PHP會員管理系統 - CRUD概念 & 前後端分離介面

#ajax #PHP #jquery

Posted by 半夏 on 2020-06-12

以下預設你已經裝好了 XAMPP ，也會使用這套軟體。

這篇文章會使用的語言：

  • PHP & MySQL
  • HTML ( Bootstrap )
  • JavaScript ( jQuery )

使用到的 函數：

PHP & MySQL

  • mysqli_connect() ; mysqli_connect_error()
  • mysqli_query()
  • mysqli_num_rows()
  • mysqli_fetch_assoc()
  • json_encode()
  • mysqli_close()

JavaScript ( jQuery )

  • alert()
  • append()
  • $.ajax()

1.先建立資料庫 member

2.創建一個管理 member 的管理帳號

不建議用最高權限管理，有可能手誤或程式寫錯就把系統整個砍掉！

指定資料庫的 管理權限不要勾選

資料表 給只管理 member 的權限

再重新登入之後就會看到只有 menber 這個資料庫。

使用者帳號這是練習使用 'member@localhost' 比較好記憶，但是在實務上帳號不可以用一樣的唷，危險危險。

如果不能重新登入，就是要到 phpMyAdmin 資料夾裡的 config.inc.php 檔案修改成使用 http

以下僅供練習，真正實務上要設計再強\強度高的密碼。

/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'http';  //選擇使用 http 網域登入
$cfg['Servers'][$i]['user'] = 'root';       //這裡輸入你的帳號
$cfg['Servers'][$i]['password'] = '';       //這裡輸入密碼    
$cfg['Servers'][$i]['extension'] = 'mysqli';  //選擇是哪個資料庫
$cfg['Servers'][$i]['AllowNoPassword'] = true;  //要不要開啟密碼登入資料庫
$cfg['Lang'] = '';

資料庫的地方也會顯示沒有建立新資料庫的權限

3.建立 PHP 連線

這裡可以參考 W3School 的 PHP Connect to MySQL 練習寫一遍，以下是用 Example (MySQLi Procedural) 的範例練習。

<?php
    $servername = "localhost";
    $username = "member";
    $password = "123456";

    //建立連線
    $conn = mysqli_connect($servername, $username, $password);

    //測試連線有沒失敗
    if(!$conn){
        die('連線失敗' . mysqli_connect_error());
    }

    echo '連線成功'; 
?>

加上 mysqli_connect_error() 連線失敗會有錯誤訊息，就可以判斷是哪裡有 Bug

連線失敗Access denied for user 'member'@'localhost' (using password: YES)

小知識：CRUD
Create Read Update Delete
常用在資料庫連線的說法，再回去看 W3School 的 MySQL 列表是不是比較清楚明白了呢？

4.建立資料庫裡的資料表連線

因為一步驟一步驟學，所以把 PHP 連線跟資料表連線分開紀錄。有部分程式碼是一樣的。

參考 W3School 的 PHP MySQL Select Data

<?php
    $servername = "localhost";
    $username = "member";
    $password = "123456";
    $dbname = "member";    //資料庫 member

    //連線資料庫
    $conn = mysqli_connect($servername, $username, $password, $dbname);

    //判斷連線是否失敗
    if(!$conn){
        die('連線失敗' . mysqli_connect_error());
    }

    //選擇要撈取的資料， * 表示全部。
    $sql = 'SELECT * FROM usermember';

    //找出 result 的語法
    $result = mysqli_query($conn, $sql); 

    //判斷資料表有沒有內容，如果是空的就不執行查詢
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_assoc($result)){   //因為不知道資料有多少筆，所以用 While 迴圈
            echo $row['Username'];
        }
    }else{
        echo '沒有資料內容';
    }
    //每次連線完都要寫關閉，才不會讓伺服器負載過大
    mysqli_close($conn);  
?>

這裡畫一個流程圖

5.讓 PHP 的 MySQL 資料轉成 JSON 格式

修改上一步驟的 if...else 程式碼。

//新增一個 PHP 陣列，用來轉成 Json 格式
    $myarray = array();

    //判斷資料表有沒有內容，如果是空的就不執行查詢
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_assoc($result)){
            // echo $row['Username'];
            $myarray[] = $row;
        }
        //轉成 json 語法
        echo json_encode($myarray);
    }else{
        echo '沒有資料內容';
    }

解釋一下 $myarray = array() 是新增一個 PHP 陣列，目的是要把這個陣列轉換成 JSON 格式。由於 PHP 內建把陣列轉換成 JSON 的函數 json_encode() ，所以最後用 echo 就好。

還有 While 迴圈的地方，我們要把輸出結果用陣列取代，所以改寫成 $myarray[] = $row 。

如果只有寫 $myarray = $row ，就只會顯示第一筆資料。

把它想像成是抽屜一樣，多了 [ ] 就可以打開每個抽屜放入你要的資料，讓每筆資料都正常顯示了。

他們之間的關係圖應該是長這樣，有空再整理畫一張。

6.開始寫個前端介面，接收資料庫的 data 囉

使用的是 Bootstrap 簡單做一個表格，用 jQuery 的 Ajax 函數串接資料顯示出來。

這是完整的程式碼，以下會一一說明解釋。
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>會員資料系統</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-8 offset-2">
                <table class="table">
                    <thead>
                        <tr>
                            <th>標號</th>
                            <th>姓名</th>
                            <th>註冊時間</th>
                            <th>信箱</th>
                        </tr>
                    </thead>
                    <tbody id="member_list">
                        <tr>
                            <td>001</td>
                            <td>TT</td>
                            <td>465656</td>
                            <td>d@mail</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "http://www/mobileweb/20200515_php_Server_dataconn_to_json.php",
                dataType: "json",
                success: show,
                error: function(){ 
                    alert("error!");
                }
            });
        });
        function show(data){
            console.log(data);
            for(i=0; i<data.length; i++){   
                str = '<tr><td>'+data[i].ID+'</td><td>'+data[i].Username+'</td><td>'+data[i].Created_at+'</td><td>'+data[i].Email+'</td></tr>';

                $("#member_list").append(str);  
            };

        };

    </script>
  </body>
</html>

特別要注意的是直接使用 Bootstrap 的檔案時，使用的 jQuery 檔案不能是 slim 檔，因為這個檔案不包含 Ajax 的語法，所以我們要修改 Bootstrap 預設引入的檔案。

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>

然後把要串接的資料程式寫在引入檔的下面，或是另外建一個 JavaScript 檔寫也可以。

<script>
        $(function(){
            $.ajax({
                type: "GET",
                url: "http://www/mobileweb/20200515_php_Server_dataconn_to_json.php",
                dataType: "json",
                success: show,   //創立一個名字叫"show"的function，拉出去括號寫
                error: function(){ 
                    alert("error!");
                }
            });
        });
        //定義名叫"show" 的 function 要做什麼內容
        function show(data){
            console.log(data);  //測試一下資料有沒有跑出來

            //因為要顯示很多筆資料，所以我們寫一個迴圈讓它重複做這件事情
            for(i=0; i<data.length; i++){    

                //str 存放要顯示的資料跟HTML格式
                str = '<tr><td>'+data[i].ID+'</td><td>'+data[i].Username+'</td><td>'+data[i].Created_at+'</td><td>'+data[i].Email+'</td></tr>';

                //寫一個監聽做這件事情，使用append()函數，把資料覆蓋上去的用法。
                $("#member_list").append(str);  
            };
        };
    </script>

如果跑出來的資料都是 undefined 表示 Ajax 裡面的 dataType 寫錯囉！ T 要記得大寫。

str 存放要顯示的 HTML 應該有更好閱讀與維護的寫法，但是目前只學到這種，之後會再研究這部分的內容。

結語

以上就做完一個前後端分離的會員系統，非常簡單的做法，但是能利用自己實作理解前後端的概念，並互相串連起來。


#ajax #PHP #jquery

半夏
新文章在個人部落格 -> https://blog.roroiii.com




Related Posts

Node.js 環境建置、邏輯運算、位元運算

Node.js 環境建置、邏輯運算、位元運算

 saffran
React原理 - Virtual DOM

React原理 - Virtual DOM

 Andy Tsai
【Windows】消除桌面右下角浮水印

【Windows】消除桌面右下角浮水印

 Jianna

Comments