在WordPress上的月曆 – 記事資料後端資料庫的處理 (原月曆資料庫的作法)

準備工作

本階段教學延續上一個工作：在WordPress上的月曆 – Theme後端資料庫的處理 (原月曆資料庫的作法)，記事資料的部份在沒有移植到WordPress時的作法：Part 10 實現記事資料的CRUD(Create, Read, Update, Delete)

我們從上一個工作複製資料夾，以我的為例，上一週的資料夾名稱是：mycalendar14-wordpress-theme-db，複製一個新的資料並改名為：mycalendar15-wordpress-notes-db，使用VSCODE開始這個資料夾，打開sftp.json，修改remotepath：

{
    "name": "My Server",
    "host": "u1085100.stu.fgchen.com",
    "protocol": "sftp",
    "port": 22,
    "username": "u1085100",
    "password": "這是密碼不給你看…",
    "remotePath": "/home/u1085100/public_html/wp_dev/wp-content/themes/mycalendar15-note-db-tut",
    "uploadOnSave": true
}

修改style.css裏的Theme Name：

/*
Theme Name: My Calendar 15 - notes db 
Author: 陳富國
Author URI: https://fgchen.com/
Version: 1.0
 */

接著將整個目錄上傳至主機 (sftp sync local->remote)，然後至WordPress的控制台->外觀，啟用這個新的theme。

測試一下是否一切正常(跟上一週一樣)，沒問題之後，我們再開始後面記事資料的資料庫處理。

建立記事資料庫

建立記事資料所需要使用到的資料表格notes，notes資料表格有4個欄位：

id, int(12), 主鍵，auto_increment(不用給值自動依照前筆資料的值加1)
note_id, varchar(12)
note_color, int(10)
note_text, text

資料庫建立好之後，我們就要正式進入記事資料的CRUD操作。

記事資料的CRUD(Create, Read, Update, Delete)

記事資料的新增 – Create

首先在index.php中的php程式區塊加入db_insertNote函式，這個函式的目的是使用SQL的Insert into句子將一筆資料加入一個資料表格中。

Insert into語法：

INSERT INTO "表格名" ("欄位1", "欄位2", ...) VALUES ("值1", "值2", ...);

後端處理程式 (所謂後端程式是由伺服端所執行的程式碼，在我這邊是使用PHP)

function db_insertNote($uid, $color, $text){ //新增記事資料函式
  global $connection;
  $text = mysqli_real_escape_string($connection, $text);
  $query = "INSERT INTO notes(note_id, note_color, note_text) VALUES('$uid', '$color', '$text')";
  $result = mysqli_query($connection, $query);
  if(!$result){
      die("Something went wrong...");
  }
}  

if(isset($_POST['new_note_uid'])){ //前端傳來新增記事資料
  db_insertNote($_POST['new_note_uid'], $_POST['new_note_color'], $_POST['new_note_text']);
}

上面這段程式先判斷是否從前端有傳來new_note_uid記事資料，若有的話，就將傳來的記事資料3個欄位值(note_uid, note_color, note_text)作為參數呼叫db_insertNote函式，此函式執行SQL的Insert into新增查詢，將資料寫入到資料庫。

接著，我們要在前端程式中處理新增記事資料的程式(postIt.js裏的submitPostIt函式)區塊中加入程式碼：

ajax({new_note_uid: postIt.id, 
      new_note_color: postIt.note_num, 
      new_note_text: postIt.note});

整個submitPostIt函式列表如下：

function submitPostIt(){ //按了PostIt按鍵後，所要執行的方法
        const value = document.getElementById("edit-post-it").value;
        document.getElementById("edit-post-it").value = "";
        let num = getRandom(1, 6); //取得1~5的亂數，用來標示便利貼顏色的檔案代號
        let postIt = {
                id: currentPostItID,
                note_num: num,
                note: value
        }
        if(newCurrentPostIt){ //如果是新記事的話
                postIts.push(postIt); //將新記事postIt物件推入postIts記事資料陣列
                //加入新增記事資料的ajax呼叫
                ajax({new_note_uid: postIt.id, 
                    new_note_color: postIt.note_num, 
                    new_note_text: postIt.note}); 
        } else {//目前有記事資料的話            
             //更新現有記事物件的記事資料
                postIts[currentPostItIndex].note = postIt.note; 
        }
        console.log(postIts)
        fillInMonth(); //因為記事資料變了，呼叫fillInMonth重新產出月曆表格
        closeMakeNote();
}

測試的方式是從月曆那邊新增記事，然後到資料庫那邊觀察前端新增的資料是否有成功加入notes資料表中。

Update

在月曆中，記事資料是可以修改的，修改在SQL的中是透過update語句完成，update的語法：

UPDATE "表格名"
SET "欄位1" = [新值]
WHERE "條件";

後端處理程式

同樣的把下面的PHP插入到index.php中的PHP段(後端)：

function db_updateNote($uid, $text){//更新記事資料函式
    global $connection;
    $text = mysqli_real_escape_string($connection, $text);
    $query = "UPDATE notes SET note_text = '$text' WHERE note_id = '$uid' LIMIT 1";
    $result = mysqli_query($connection, $query);
    if(!$result){
        die("Something went wrong....");
    }
}

if(isset($_POST['update_note_uid'])){ //若前端有傳來更新記事資料
  db_updateNote($_POST['update_note_uid'], $_POST['update_note_text']);
}

前端處理程式

將下面ajax傳送更新資料的程式加入到submitPostIt函式裏的更新記事資料段落：

//加入更新記事資料的ajax呼叫
ajax({update_note_uid: postIts[currentPostItIndex].id, 
      update_note_text: postIt.note});

最新的submitPostIt函式列表如下：

function submitPostIt(){ //按了PostIt按鍵後，所要執行的方法
        const value = document.getElementById("edit-post-it").value;
        document.getElementById("edit-post-it").value = "";
        let num = getRandom(1, 6); //取得1~5的亂數，用來標示便利貼顏色的檔案代號
        let postIt = {
                id: currentPostItID,
                note_num: num,
                note: value
        }
        if(newCurrentPostIt){ //如果是新記事的話
                postIts.push(postIt); //將新記事postIt物件推入postIts記事資料陣列
                //加入新增記事資料的ajax呼叫
                ajax({new_note_uid: postIt.id, 
                    new_note_color: postIt.note_num, 
                    new_note_text: postIt.note}); 
        } else {//目前有記事資料的話            
             //更新現有記事物件的記事資料
                postIts[currentPostItIndex].note = postIt.note; 
                //加入更新記事資料的ajax呼叫
                ajax({update_note_uid: postIts[currentPostItIndex].id, 
                    update_note_text: postIt.note});
        }
        console.log(postIts)
        fillInMonth(); //因為記事資料變了，呼叫fillInMonth重新產出月曆表格
        closeMakeNote();
}

Delete

接著我們使用SQL的Delete語句將Notes記事資料表中的一筆記事資料進行刪除，Delete的語法如下：

DELETE FROM "表格名"
WHERE "條件";

後端處理程式

function db_deleteNote($uid){ //刪除記事資料函式
    global $connection;
    $query = "DELETE FROM notes WHERE note_id = '$uid'";
    $result = mysqli_query($connection, $query);
    if(!$result){
        die("Something went wrong…");
    }
}

if(isset($_POST['delete_note_uid'])){ //刪除記事資料
  db_deleteNote($_POST['delete_note_uid']);
}

這部份的後端PHP程式接收來自己前端的POST資料發送，前端送出delete_note_uid=uid的資料格式給後端，後端PHP程式從$_POST[‘delete_note_uid’]判斷是否有資料，有資料的話，呼叫db_deleteNote這支PHP函式，對記事資料uid進行刪除。

前端處理程式

postIt.js中的deleteNote函式，一開始就加入 ajax呼叫：

function deleteNote(){//刪除點擊日期的記事資料
    if(!newCurrentPostIt) { //如果點擊的日期是有記事資料話
        //加入刪除記事資料的ajax呼叫
        ajax({delete_note_uid: postIts[currentPostItIndex].id}); 

        //使用splice刪除掉點擊日期的記事資料    
        postIts.splice(currentPostItIndex, 1);
        console.log(postIts);
        document.getElementById("edit-post-it").value = "";
        //因為記事資料變動了
        //呼叫fiilInMonth方法重新繪製一次月曆表格          
        fillInMonth();      
    }
    closeMakeNote();
}

ajax({delete_note_uid: postIts[currentPostItIndex].id}); 此行將目前記事資料的id送到後端，由後端PHP程式以SQL的方式將該資料從資料表格中刪除掉。

上面是記事資料新增、更新與維護的三個動作，最後，我們要在程式一開始的時候，把所有的記事資料進行查詢(SQL select)，一筆一筆的資料讀出來後，echo成JSON物件敘述，再將這些資料JSON物件一一加入PostIts記事資料陣列中。

Read

後端處理程式

在index.php程式的PHP段加入：

<?php
  function getNoteData(){
    global $connection;
    $query = "SELECT * FROM notes";
    $result = mysqli_query($connection, $query);
    if(!$result){
        die("Something went wrong");
    }

    $id = 0;
    $color = 1;
    $text = "";

    while($row = mysqli_fetch_assoc($result)){
      $id = $row['note_id'];
      $color = $row['note_color'];
      $text = $row['note_text'];

      //以上為php碼 
?>
<script type="text/javascript">
  postIt = {
    id: <?php echo json_encode($id); ?>,
    note_num: <?php echo json_encode($color); ?>,
    note: <?php echo json_encode($text); ?>
  }
  postIts.push(postIt);
</script>

<?php //再接著php碼，這種寫法在混合式的php、html、JavaScript很常見的寫法，要習慣。
    }
  }
?>

前端處理程式

之後再到index.php中的後段(在<script>附近)加入：

<?php getNoteData(); ?>

Curriculum

在WordPress上的月曆 – 記事資料後端資料庫的處理 (原月曆資料庫的作法)

準備工作

建立記事資料庫

記事資料的CRUD(Create, Read, Update, Delete)

記事資料的新增 – Create

Update

後端處理程式

前端處理程式

Delete

後端處理程式

前端處理程式

Read

後端處理程式

前端處理程式

Leave A Reply 取消回覆

Login with your site account

Modal title