228連假開始了，終於有空寫一點文章了，最近在工作上有些不順心，不知道是不是職業倦怠，但對於寫程式的熱忱我依舊沒放棄，其實我很開心我有一群碼農夥伴可以交流，不然我可能會一直怠惰下去吧！

其實這個章節主要結合前端+後端的應用，在前幾章節簡單的介紹了JSON，可能對於新手會有些困難，但也歡迎有興趣或是覺得有更不錯的寫法等，都可以寄信或留言做交流

起手式

這次主要製作一頁會員列表中的會員狀態，在撰寫之前先擬定幾個步驟

  1. 擬定資料庫內容SQL
  2. 製作HTML 頁面內容
  3. 寫後端程式給前端做處理

建立資料庫

起手式，先建立資料庫及資料表，新增【啟用、未啟用、停用、黑名單、過期】等資料，其餘的資料可供未來加以使用。

資料庫名稱: api [color=#ffb85e]

1
2
3
4
CREATE DATABASE IF NOT EXISTS `api` DEFAULT 
CHARACTER SET utf8 
COLLATE utf8_general_ci;
USE `api`;

資料表名稱: basic_option_value [color=#ffb85e]

中文名稱 欄位代號 備註
編號 id 主鍵(Primary Key)
名稱 name
對應群組代號 group_code 用在每一個選項屬於自己的群組
選項值 value
狀態 status 未來可能這個選項暫停不用
排序 sort 
1
2
3
4
5
6
7
8
CREATE TABLE `api`.`basic_option_value` ( 
  `id` INT NOT NULL AUTO_INCREMENT COMMENT '編號' , 
  `name` varchar(100) DEFAULT NULL COMMENT '名稱',
  `group_code` varchar(100) DEFAULT NULL COMMENT '對應群組代號',
  `value` varchar(50) DEFAULT NULL COMMENT '選項值',
  `status` varchar(50) DEFAULT NULL COMMENT '狀態',
  `sort` int(11) NOT NULL COMMENT '排序'
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

資料表資料 [color=#ffb85e]

1
2
3
4
5
6
7
8
9
INSERT INTO `basic_option_value` 
        (`id`, `name`, `group_code`, `value`, `status`, `想sort`) 
VALUES  (1, '顯示', 'status', '1', '1', 1),
        (2, '隱藏', 'status', '2', '1', 2),
        (3, '啟用', 'account_status', '1', '1', 1),
        (4, '未啟用', 'account_status', '2', '1', 2),
        (5, '停用', 'account_status', '3', '1', 3),
        (6, '黑名單', 'account_status', '4', '1', 4),
        (7, '過期', 'account_status', '5', '1', 5);

建立整個網頁的檔案

  • index.php
  • style.css
  • style.js
  • user.php
  • config.php
  • jquery_ajax.php

前端程式的布局

製作HTML頁面 (index.php)

※ 我們會先撈狀態列資料做呈現

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?php
    // 引入頁面一開始的資料
    require_once "user.php";
?>
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>w3HexSchool 鼠年全馬鐵人挑戰 - JSON的奧秘與應用時機(Part 4)</title>
        <!-- 引入自己的CSS檔 -->
        <link rel="stylesheet" href="style.css">
        <!-- JQuery 3.4.1 -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <!-- 按鈕的AJAX動作 -->
        <script type="text/javascript" src="style.js"></script>
    </head>
    <body>
        <div class="container">
            <h2>JSON的奧秘與應用時機(Part 4)</h2>
            <table>
                <thead>
                    <tr>
                        <th>編號</th>
                        <th>帳號</th>
                        <th>姓名</th>
                        <th>群組</th>
                        <th>狀態</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>abc20200301@gmail.com</td>
                        <td>小黑</td>
                        <td>管理部</td>
                        <td><?php echo $value; ?></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

套用表格所需的樣式(style.css)

其實這部分，我只是做一個簡單的編排，其實可以透過一些HTML框架來去做，可能會比我現在自己刻程式碼來的好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@charset "utf-8";
h2{
    text-align: center;
}

.container{
    width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

table{
    border-spacing: 0;
    width:100%
}

table tr > th,
table tr > td{
    border: 1px solid #CCC;
    text-align: center;
    height: 50px;
}

.status_btn{
    display: inline-block;
    background: #6d6969;
    padding: 10px;
    color: #FFF;
    cursor: pointer;
    border-radius: 10px;
}

.status_btn:hover{
    opacity: 0.6;
}

.btn_1{
    background: #39bc0a;
}

.btn_2{
    background: #989898;
}

.btn_3{
    background: #FF0000;
}

.btn_4{
    background: #000000;
}

.btn_5{
    background: #ff00d8;
}

後端程式的處理

建立資料庫連線(config.php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
// 資料庫連線資訊
$DB_HOST = "localhost";
$DB_NAME = "api";
$DB_USER = "root";
$DB_PASSWORD = "";
$DB_PORT = "3306";

// MySQLi，物件導向的方式
$DB_LINK = new mysqli($DB_HOST,$DB_USER,$DB_PASSWORD,$DB_NAME,$DB_PORT);

// 檢查連線是否正常 列印錯誤日誌 ※mysqli_connect_error() 是顯示連線錯誤訊息
if($DB_LINK->connect_error){
    die("錯誤代碼" . $DB_LINK->connect_errno 
    . '。錯誤訊息為：'. $DB_LINK->connect_error);
    exit;
}else{
    // 印出SQL資訊
    // echo "Connect Successfully. Host info: " . $DB_LINK->host_info;
}

// 設定連線編碼為utf8
$DB_LINK -> query("SET NAMES 'utf8'");

// 選擇要操作的資料庫
$DB_LINK -> select_db("api");

// 關閉連線
$DB_LINK->close();
?>

載入HTML頁面前的程序(user.php)

在還沒進入到index.php的頁面時，我們要先將頁面的值做讀取載入，讓資料庫資料呈現在頁面上，下面程式碼$val 變數是假設每一筆資料為啟用狀態，這單元主要為了展現JSON可以如何運用，所以只做狀態的處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?php
    // 引入資料庫設定檔
    require_once "config.php";

    /** 預設啟用狀態
     * 啟用：1
     * 未啟用：2
     * 停用：3
     * 黑名單：4
     * 過期：5
     */
    $val = "1";

    // 設定Where 條件為啟用
    $sql = 'SELECT * FROM `basic_option_value` WHERE group_code="account_status" and status="1" and `value`="'.$val.'"';
    $DB = $DB_LINK->query($sql);

    // 將資料寫入陣列
    while($row = $DB->fetch_assoc()){
        $result = $row;
    }

    $data_option = array(   
                        'id'=>$result['id'],
                        'name'=>$result['name'],
                        'code'=>$result['group_code'],
                        'value'=>$result['value'],
                        'sort'=>$result['sort']
                    );
                    
    // 將我們所需要的值拼湊成一個JSON資料
    $value = '<span class="status_btn change_check btn_'.$result['sort'].'" data-status=\''.str_replace("'","\\'",json_encode($data_option)).'\' >'.$data_option['name'].'</span>';
?>

以下為上方程式印出$value的結果

圖1

圖2

前端與後端程式的聯絡

建立按鈕的AJAX動作 (style.js)

AJAX 是現在網站開發很重要的腳色，他利用原本存在的技術(JavaScript、XML、非同步)組合而成，那很多人一定有疑問，那AJAX只能用非同步而已嗎？其實並不是，當然也可以做到同步，但在於每個設計面會有不同的設計模式，所以大部分的開發都會以非同步去使用。未來有機會我們會在做AJAX的解說與使用。

$.ajax()不專業的解說

.ajax()中內容可能有些人能理解，但不能理解的部分我稍微簡單做解說，將url值jquery_ajax.php做發送請求所返回的值，而返回的值都使以JSON格式返回，後面的.done()表示$.ajax()執行成功時則執行.done()，如果$.ajax()執行錯誤(請求失敗、語法寫作等)則.done()不做執行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function(){
    $("span.change_check").on('click',function(){
        var now_btn = $(this);
        var status_info = $(this).data('status');
        var id = status_info.id;
        var name = status_info.name;
        var code = status_info.code;
        var value = status_info.value;
        var old_sn = status_info.sort;
        $.ajax({
            // 指定請求方式，預設為GET
            type: 'POST',
            // 將要發送的請求URL位址
            url: 'jquery_ajax.php',
            // 定義將要發送給請求位址的資料
            data:{
                // 定義事件處理代碼
                event:'status_change',
                // 資料庫狀態欄位的編號
                id:id,
                // 資料庫狀態欄位的姓名
                name:name,
                // 資料庫狀態欄位的代碼
                code:code,
                // 資料庫狀態欄位的值，最後一筆，不得加上","，以免出錯
                value:value
                }
        }).done(function(data){
            // data為發送請求後所傳回的值
            // JSON.parse(jsonString): 在一個字串中解析出JSON物件
            var obj=JSON.parse(data);
            if( obj.result == 'error' ){
                alert('更新失敗：'+obj.message);
            }else{
                // 更換按鈕class的顏色
                now_btn.removeClass('btn_'+old_sn).addClass('btn_'+obj.sort);
                // 以下將按鈕的值及data做變更
                status_info.id = obj.id;
                status_info.name = obj.name;
                status_info.value = obj.value;
                status_info.sort = obj.sort;
                now_btn.data('status',status_info);
                now_btn.text(obj.name);
            }
        });
    });
});

備註：

  • JSON.parse(jsonString): 在一個字串中解析出JSON物件
  • JSON.stringify(obj) : 將一個JSON物件轉換成字串

Ajax動作命令後端作執行程序，結果回傳到Ajax (jquery_ajax.php)

其實為什麼要做一個獨立的後端PHP檔，其實當一個專案如果有共同需要做AJAX的程序時，可以將後端部分寫在這裡，以方便做管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?php
    // 引入資料庫設定檔
    require_once "config.php";
    // 接收前端做的請求
    switch( $_REQUEST['event'] ){
        //快速切換單選
        case 'status_change':
            // 請求所提供的資料做一個變數存取
            $id = $_REQUEST['id'];
            $name = $_REQUEST['name'];
            $code = $_REQUEST['code'];
            $btn_value = $_REQUEST['value'];
            
            // 所指定的資料庫
            $table = "basic_option_value";
            $sql = 'SELECT * FROM '.$table.' WHERE group_code="account_status" and status="1"';
            $DB = $DB_LINK->query($sql);

            while($row = $DB->fetch_assoc()){
                $result[] = $row;
            }
            
            $sn = 0;

            // 將所有狀態陣列做一個迴圈
            foreach( $result as $key => $value){
                // 當迴圈走到最後時，會做。
                if( !isset($first_value) ){
                    $first_id = $value["id"];
                    $first_value = $value["value"];
                    $first_name = $value["name"];
                    $first_sort = $value["sort"];
                }

                // 第二次會在這裡做給值，給值完會跳出迴圈。(EX:未啟用)
                if( isset($next_option) && $next_option == 'next' ){
                    $next_id = $value["id"];
                    $next_value = $value["value"];
                    $next_name = $value["name"];
                    $next_sort = $value["sort"];
                    break;
                }
                unset($result[$key]);
                
                // 第一次基本上會在這裡做進入。(EX:啟用)
                // 判斷前端的請求值是否相等，相等會將 $next_option給予值
                if( $value['value'] == $btn_value ){
                    if( count($result) > 0 ){
                        $next_option = 'next';
                    }else{
                        $next_value = $first_value;
                        $next_name = $first_name;
                        $next_id = $first_id;
                        $next_sort = $first_sort;
                        $sn = 0;
                        break;
                    }
                }
                $sn++;
            }
            
            // 假設狀態群裡面只有一種狀態情況，會有無法對應的值。
            if( !isset($next_value) ){ 
                echo json_encode(
                    array(
                        'result'=>'error',
                        'message'=>'無對應value')
                    );
                exit; 
            }
           
           // 將下一組的值做編譯、且回傳結果到前端。
            echo json_encode(array(
                                    'result'=>'success',
                                    'id' => $next_id,
                                    'value'=>$next_value, 
                                    'name'=>$next_name, 
                                    'sort' => $next_sort,
                                    )
                                );

            exit;
        break;
    }

?>

結論

上面的小範例可能沒有寫的那麼好，但也只是展現JSON可以做其他的應用，讓大家可以更活用JSON，若上方有不太能理解的地方，歡迎大家寄信或留言一起研究及更正，讓更多人可以受惠。

標籤: w3HexSchool Json PHP