PHP头条
热点：

创建以API为中心的Web应用(1)(4)


热度1 评论 57
www.PHPzy.Com  网友分享于：       浏览数30396次

步骤4：创建浏览器客户端

我们从为前端客户端设定新建文件夹开始。在你的Web服务器上的文件夹中创建一个名为simpletodo_client_browser的文件夹。完成后，创建一个index.php文件，并将下列代码写进去：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title>SimpleTODO</title> 
  5.       
  6.     <link rel="stylesheet" href="css/reset.css" type="text/css" /> 
  7.     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> 
  8.       
  9.     <script src="js/jquery.min.js"></script> 
  10.     <script src="js/jquery-ui-1.8.16.custom.min.js"></script> 
  11.       
  12.     <style> 
  13.     body {  
  14.         padding-top: 40px;  
  15.     }  
  16.     #main {  
  17.         margin-top: 80px;  
  18.         text-align: center;  
  19.     }  
  20.     </style> 
  21. </head> 
  22. <body> 
  23.     <div class="topbar"> 
  24.         <div class="fill"> 
  25.             <div class="container"> 
  26.                 <a class="brand" href="index.php">SimpleTODO</a> 
  27.             </div> 
  28.         </div> 
  29.     </div> 
  30.     <div id="main" class="container"> 
  31.         <form class="form-stacked" method="POST" action="login.php"> 
  32.             <div class="row"> 
  33.                 <div class="span5 offset5"> 
  34.                     <label for="login_username">Username:</label> 
  35.                     <input type="text" id="login_username" name="login_username" placeholder="username" /> 
  36.                   
  37.                     <label for="login_password">Password:</label> 
  38.                     <input type="password" id="login_password" name="login_password" placeholder="password" /> 
  39.                       
  40.                 </div> 
  41.             </div> 
  42.             <div class="actions"> 
  43.                 <button type="submit" name="login_submit" class="btn primary large">Login or Register</button> 
  44.             </div> 
  45.         </form> 
  46.     </div> 
  47. </body> 
  48. </html>  

这段代码的运行结果看起来就像这样：

 
SimpleTODO的登录页

需要注意的是我在这里已经包含了两个JavaScript文件和两个CSS文件：

  • reset.css是你的标准CSS重置脚本。我使用了meyerweb.com css reset.
     
  • bootstrap.min.css是Twitter Bootstrap
     
  • jquery.min.js是最新版的jQuery library
     
  • jquery-ui-1.8.16.custom.min.js是最新版的jQuery UI library

接下来，我们创建login.php文件来存储客户端会话中的用户名和密码。

  1. <?php  
  2. //get the form values  
  3. $username = $_POST['login_username'];  
  4. $userpass = $_POST['login_password'];  
  5. session_start();  
  6. $_SESSION['username'] = $username;  
  7. $_SESSION['userpass'] = $userpass;  
  8. header('Location: todo.php');  
  9. exit(); 

这里，我们简单地为用户开启一次会话，所依据的是用户所提供的用户名和密码组合。这充当了简单的组合密钥，它允许用户访问某个特定用户名和密码组合所存储的TODO项。然后我们重定向至todo.php，那里是我们开始与API服务器交互的地方。然而在我们开始编写todo.php文件之前，先创建一个 ApiCaller类，它将封装我们所需的全部API调用方法，包括请求的加密。

创建apicaller.php，并把下面的代码写进去：

  1. <?php  
  2. class ApiCaller  
  3. {  
  4.     //some variables for the object  
  5.     private $_app_id;  
  6.     private $_app_key;  
  7.     private $_api_url;  
  8.       
  9.     //construct an ApiCaller object, taking an  
  10.     //APP ID, APP KEY and API URL parameter  
  11.     public function __construct($app_id, $app_key, $api_url)  
  12.     {  
  13.         $this->_app_id = $app_id;  
  14.         $this->_app_key = $app_key;  
  15.         $this->_api_url = $api_url;  
  16.     }  
  17.       
  18.     //send the request to the API server  
  19.     //also encrypts the request, then checks  
  20.     //if the results are valid  
  21.     public function sendRequest($request_params)  
  22.     {  
  23.         //encrypt the request parameters  
  24.         $enc_request = base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $this->_app_key, json_encode($request_params), MCRYPT_MODE_ECB));  
  25.           
  26.         //create the params array, which will  
  27.         //be the POST parameters  
  28.         $params = array();  
  29.         $params['enc_request'] = $enc_request;  
  30.         $params['app_id'] = $this->_app_id;  
  31.           
  32.         //initialize and setup the curl handler  
  33.         $ch = curl_init();  
  34.         curl_setopt($ch, CURLOPT_URL, $this->_api_url);  
  35.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
  36.         curl_setopt($ch, CURLOPT_POST, count($params));  
  37.         curl_setopt($ch, CURLOPT_POSTFIELDS, $params);  
  38.  
  39.         //execute the request  
  40.         $result = curl_exec($ch);  
  41.           
  42.         //json_decode the result  
  43.         $result = @json_decode($result);  
  44.           
  45.         //check if we're able to json_decode the result correctly  
  46.         if( $result == false || isset($result['success']) == false ) {  
  47.             throw new Exception('Request was not correct');  
  48.         }  
  49.           
  50.         //if there was an error in the request, throw an exception  
  51.         if( $result['success'] == false ) {  
  52.             throw new Exception($result['errormsg']);  
  53.         }  
  54.           
  55.         //if everything went great, return the data  
  56.         return $result['data'];  
  57.     }  
  58. } 

我们将利用ApiCaller类向我们的API服务器发送请求。这样，所有必需的加密和cURL初始化代码将会写在一个地方，我们就不用重复代码了。

  • __construct函数接受三个参数：
  • sendRequest()函数：

现在，我们开始写todo.php。首先，我们创建一些代码来为密码为test1234的用户nikko这是我们先前用来测试API服务器的那个用户名/密码组合）获取当前的todo项。

  1. <?php  
  2. session_start();  
  3. include_once 'apicaller.php';  
  4.  
  5. $apicaller = new ApiCaller('APP001', '28e336ac6c9423d946ba02d19c6a2632', 'http://localhost/simpletodo_api/');  
  6.  
  7. $todo_items = $apicaller->sendRequest(array(  
  8.     'controller' => 'todo',  
  9.     'action' => 'read',  
  10.     'username' => $_SESSION['username'],  
  11.     'userpass' => $_SESSION['userpass']  
  12. ));  
  13.  
  14. echo '';  
  15. var_dump($todo_items); 

打开index.php，以nikko/tes1234登录，然后你应该看到我们先前创建的TODO项的avar_dump()。

恭喜，你已经成功地做好了一个向API服务器的API调用！在这段代码中，我们已经：

  • 开启会话，使我们拥有了对$_SESSION中的username以及userpass的访问权
  • 实例化了一个新的ApiCaller类，为其提供了APP ID，APP KEY，以及API服务器的URL
     
  • 通过sendRequest()方法发送了一个请求

现在，我们来重新格式化一下数据，让它们开起来更好看些。向todo.php中添加下列HTML。别忘了移去var_dump()！

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <title>SimpleTODO</title> 
  5.       
  6.     <link rel="stylesheet" href="css/reset.css" type="text/css" /> 
  7.     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> 
  8.     <link rel="stylesheet" href="css/flick/jquery-ui-1.8.16.custom.css" type="text/css" /> 
  9.       
  10.     <script src="js/jquery.min.js"></script> 
  11.     <script src="js/jquery-ui-1.8.16.custom.min.js"></script> 
  12.       
  13.     <style> 
  14.     body {  
  15.         padding-top: 40px;  
  16.     }  
  17.     #main {  
  18.         margin-top: 80px;  
  19.     }  
  20.       
  21.     .textalignright {  
  22.         text-align: right;  
  23.     }  
  24.       
  25.     .marginbottom10 {  
  26.         margin-bottom: 10px;  
  27.     }  
  28.     #newtodo_window {  
  29.         text-align: left;  
  30.         display: none;  
  31.     }  
  32.     </style> 
  33.       
  34.     <script> 
  35.     $(document).ready(function() {  
  36.         $("#todolist").accordion({  
  37.             collapsible: true  
  38.         });  
  39.         $(".datepicker").datepicker();  
  40.         $('#newtodo_window').dialog({  
  41.             autoOpen: false,  
  42.             height: 'auto',  
  43.             width: 'auto',  
  44.             modal: true  
  45.         });  
  46.         $('#newtodo').click(function() {  
  47.             $('#newtodo_window').dialog('open');  
  48.         });  
  49.     });  
  50.     </script> 
  51. </head> 
  52. <body> 
  53.     <div class="topbar"> 
  54.         <div class="fill"> 
  55.             <div class="container"> 
  56.                 <a class="brand" href="index.php">SimpleTODO</a> 
  57.             </div> 
  58.         </div> 
  59.     </div> 
  60.     <div id="main" class="container"> 
  61.         <div class="textalignright marginbottom10"> 
  62.             <span id="newtodo" class="btn info">Create a new TODO item</span> 
  63.             <div id="newtodo_window" title="Create a new TODO item"> 
  64.                 <form method="POST" action="new_todo.php"> 
  65.                     <p>Title:<br /><input type="text" class="title" name="title" placeholder="TODO title" /></p> 
  66.                     <p>Date Due:<br /><input type="text" class="datepicker" name="due_date" placeholder="MM/DD/YYYY" /></p> 
  67.                     <p>Description:<br /><textarea class="description" name="description"></textarea></p> 
  68.                     <div class="actions"> 
  69.                         <input type="submit" value="Create" name="new_submit" class="btn primary" /> 
  70.                     </div> 
  71.                 </form> 
  72.             </div> 
  73.         </div> 
  74.         <div id="todolist"> 
  75.             <?php foreach($todo_items as $todo): ?> 
  76.             <h3><a href="#"><?php echo $todo->title; ?></a></h3> 
  77.             <div> 
  78.                 <form method="POST" action="update_todo.php"> 
  79.                 <div class="textalignright"> 
  80.                     <a href="delete_todo.php?todo_id=<?php echo $todo->todo_id; ?>">Delete</a> 
  81.                 </div> 
  82.                 <div> 
  83.                     <p>Date Due:<br /><input type="text" id="datepicker_<?php echo $todo->todo_id; ?>" class="datepicker" name="due_date" value="12/09/2011" /></p> 
  84.                     <p>Description:<br /><textarea class="span8" id="description_<?php echo $todo->todo_id; ?>" class="description" name="description"><?php echo $todo->description; ?></textarea></p> 
  85.                 </div> 
  86.                 <div class="textalignright"> 
  87.                     <?php if( $todo->is_done == 'false' ): ?> 
  88.                     <input type="hidden" value="false" name="is_done" /> 
  89.                     <input type="submit" class="btn" value="Mark as Done?" name="markasdone_button" /> 
  90.                     <?php else: ?> 
  91.                     <input type="hidden" value="true" name="is_done" /> 
  92.                     <input type="button" class="btn success" value="Done!" name="done_button" /> 
  93.                     <?php endif; ?> 
  94.                     <input type="hidden" value="<?php echo $todo->todo_id; ?>" name="todo_id" /> 
  95.                     <input type="hidden" value="<?php echo $todo->title; ?>" name="title" /> 
  96.                     <input type="submit" class="btn primary" value="Save Changes" name="update_button" /> 
  97.                 </div> 
  98.                 </form> 
  99.             </div> 
  100.             <?php endforeach; ?> 
  101.         </div> 
  102.     </div> 
  103. </body> 
  104. </html> 


www.phpzy.comtrue/php/20947.htmlTechArticle步骤4：创建浏览器客户端 我们从为前端客户端设定新建文件夹开始。在你的Web服务器上的文件夹中创建一个名为simpletodo_client_browser的文件夹。完成后，创...

共5页: 上一页12345下一页

相关文章

PHP之友评论

今天推荐