關於網頁應用程式的實際開發例子分享,前兩天講述了 Schema
與 MVC架構
,今天來要說明 API(Application Programming Interface/應用程式介面)
:
使用 API 的過程時,你不需要知道其內部程式運作的邏輯或演算法,你只要告訴 API 它需要知道的事,它就會把你想知道的結果帶來給你。
API類似一個資料交換的平台
,讓開發者能夠輕鬆利用其他系統的功能。像是開發登入功能會使用到Google or Facebook的API;開發旅遊系統,要提供使用者到達目的地最佳路徑,可使用Google Maps API;想開發自己的天氣預報APP,可使用中央氣象局API...族繁不及備載。
API在現代軟體開發中扮演著重要角色,幫助不同系統之間的協作,使應用程式能夠更加靈活和高效地運作。在WEB應用程式中,通常會將WEB切分成前端與後端,前端
多半交由專業的設計人員撰寫
切版,後端
則是由系統人員撰寫
連結資料庫與資料的處理, API就是處理後端的系統介面
。
常見的API類型包括:
接續昨天的範例,以下使用 新增
與 查詢
來撰寫寵物走失的頁面。
Model: 以Table為單位,將Table的欄位定義成Model中的參數,並寫好查詢的函數
class findpet{
public function Create()
{
$query = $this->db->prepare("INSERT INTO findpet (petType, petName, petbreeds, gender, age, weight, height, feature, picture, lostDate, lostCity, lostStreet, feederName, contactPhone) VALUES (:petType, :petName, :petbreeds, :gender, :age, :weight, :height, :feature, :picture, :lostDate, :lostCity, :lostStreet, :feederName, :contactPhone)");
$query->bindParam("petType", $this->petType, PDO::PARAM_STR);
$query->bindParam("petName", $this->petName, PDO::PARAM_STR);
$query->bindParam("petbreeds", $this->petbreeds, PDO::PARAM_STR);
$query->bindParam("gender", $this->gender, PDO::PARAM_STR);
$query->bindParam("age", $this->age, PDO::PARAM_INT);
$query->bindParam("weight", $this->weight, PDO::PARAM_INT);
$query->bindParam("height", $this->height, PDO::PARAM_INT);
$query->bindParam("feature", $this->feature, PDO::PARAM_STR);
$query->bindParam("picture", $this->picture, PDO::PARAM_STR);
$query->bindParam("lostDate", $this->lostDate, PDO::PARAM_STR);
$query->bindParam("lostCity", $this->lostCity, PDO::PARAM_STR);
$query->bindParam("lostStreet", $this->lostStreet, PDO::PARAM_STR);
$query->bindParam("feederName", $this->feederName, PDO::PARAM_STR);
$query->bindParam("contactPhone", $this->contactPhone, PDO::PARAM_STR);
$query->execute();
return $this->db->lastInsertId();
}
public function Read()
{
$query = $this->db->prepare("SELECT * FROM findpet");
$query->execute();
$this -> total=$query->rowCount();
$this -> pageSize=3;
$this -> totalPage=ceil($this -> total/$this->pageSize);
$sql="SELECT * FROM findpet order by findpet_id ASC LIMIT ".($this -> page-1)*$this -> pageSize . " , " . $this -> pageSize;
$queryData = $this->db->prepare($sql);
$queryData->execute();
$data = array();
while ($row = $queryData->fetch(PDO::FETCH_ASSOC)) {
$data[] = $row;
}
return $data;
}
Controller: 負責接受前端回傳的資訊,並呼叫Model的函數來完成資料的傳遞
function C()
{
$input = json_decode( $_POST['info'] , true);
$objFindpet = new findpet();
$objFindpet->petType=$input['petType'];
$objFindpet->petName=$input['petName'];
$objFindpet->petbreeds=$input['petbreeds'];
$objFindpet->gender=$input['gender'];
$objFindpet->age=$input['age'];
$objFindpet->weight=$input['weight'];
$objFindpet->height=$input['height'];
$objFindpet->feature=$input['feature'];
$objFindpet->picture=$input['picture'];
$objFindpet->lostDate=$input['lostDate'];
$objFindpet->lostCity=$input['lostCity'];
$objFindpet->lostStreet=$input['lostStreet'];
$objFindpet->feederName=$input['feederName'];
$objFindpet->contactPhone=$input['contactPhone'];
$objFindpet->Create();
}
function R()
{
$objFindpet = new findpet();
if(isset($_GET['page']))
$objFindpet -> setPage($_GET['page']);
else
$objFindpet -> page = 1;
$datas = $objFindpet->Read();
$pageArray = array("totalPage"=>$objFindpet -> totalPage, "currentPage"=>$objFindpet -> page, "pageSize"=>$objFindpet ->pageSize);
array_push($datas, $pageArray);
echo json_encode($datas);
}
if(isset($_POST['func'])!=""){
if($_POST['func']=="C" )
C();
}
if(isset($_GET['func'])){
if($_GET['func']=="R" )
R();
}
View: 即前端頁面,也是使用者唯一與API互動的部分,通常會搭配JavaScript撰寫
使用者可以用於填寫寵物資訊的表單(左圖) & 填寫後也會同步出現在系統中,供其他USER幫忙尋找(右圖)