iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0

關於網頁應用程式的實際開發例子分享,前兩天講述了 SchemaMVC架構,今天來要說明 API(Application Programming Interface/應用程式介面)

使用 API 的過程時,你不需要知道其內部程式運作的邏輯或演算法,你只要告訴 API 它需要知道的事,它就會把你想知道的結果帶來給你。

API類似一個資料交換的平台 ,讓開發者能夠輕鬆利用其他系統的功能。像是開發登入功能會使用到Google or Facebook的API;開發旅遊系統,要提供使用者到達目的地最佳路徑,可使用Google Maps API;想開發自己的天氣預報APP,可使用中央氣象局API...族繁不及備載。

API在現代軟體開發中扮演著重要角色,幫助不同系統之間的協作,使應用程式能夠更加靈活和高效地運作。在WEB應用程式中,通常會將WEB切分成前端與後端,前端多半交由專業的設計人員撰寫切版,後端則是由系統人員撰寫連結資料庫與資料的處理, API就是處理後端的系統介面

常見的API類型包括:

  • Web API:通過網路使用HTTP/HTTPS協議提供功能,ex. RESTful API。
  • 函式庫 API:透過框架提供功能,ex. Highcharts API
  • 作業系統 API:讓應用程式可以與作業系統進行互動,ex. WinAPI

API DEMO

接續昨天的範例,以下使用 新增查詢 來撰寫寵物走失的頁面。

  1. 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;
         }
    
  2. 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();
     }
    
  3. View: 即前端頁面,也是使用者唯一與API互動的部分,通常會搭配JavaScript撰寫
    使用者可以用於填寫寵物資訊的表單(左圖) & 填寫後也會同步出現在系統中,供其他USER幫忙尋找(右圖)
    https://ithelp.ithome.com.tw/upload/images/20240913/201623025mxFqiCa4N.png

Reference


上一篇
Day 26 應用-讓系統可視化的 MVC Pattern
下一篇
Day 28 應用-LibreOffice連結資料庫(1)
系列文
不居功的系統隱士 - 30天由淺入深學SQL30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言