變身多人使用月曆-theme部份
在這裏的教學,我們要使用WordPress會員系統融入月曆中,使得月曆可以支援多人使用(自己的主題、自己的記事資料)
我們先在WordPress後台增加一個使用者,,可以看到資料表格資料如下:
接著,我們處理月曆的theme這個資料表格,新增一個欄位user_login,類型參考WordPress的users資料表格:
新增資料並將使用者的登入名稱加入:
資料處理好之後,我們再來處理程式中關於theme後端資料表格的操作。
程式有幾個邏輯:
index.php 中的 script段
資料庫表格的處理
我們打開WordPress的使用者資料表格,這邊,我們要使用user_login這個欄位,做為使用者的辨識。
我們先在WordPress後台增加一個使用者,,可以看到資料表格資料如下:
接著,我們處理月曆的theme這個資料表格,新增一個欄位user_login,類型參考WordPress的users資料表格:
新增資料並將使用者的登入名稱加入:
資料處理好之後,我們再來處理程式中關於theme後端資料表格的操作。
程式有幾個邏輯:
第一部份 讀取theme
若使用者沒有登入,我們用預設的theme:bluecurrentColor.name = "blue";登入後,至資料表格中取得theme欄位資料,這個之前有點不一樣,我們在查詢表格時,要加上where user_login = ???? 條件。
currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON編碼字串,然後指定給currentColor.name
<script>
var stylesheet_directory = "<?php echo get_stylesheet_directory_uri(); ?>" ;
<?php
global $current_user; wp_get_current_user();
if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話
echo "var currentUserLoigin = ".'"'.$current_user->user_login.'";'."rnt";
echo "var currentUserDisplayName = ".'"'.$current_user->display_name.'";'."rnt";
}
?>
if (typeof currentUserDisplayName !== 'undefined') {
//若currentUserDisplayName不是未定義的話,表示使用者是登入的
document.getElementById("app-name-landscape").innerHTML = currentUserDisplayName;
document.getElementById("app-name-portrait").innerHTML = currentUserDisplayName;
currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON編碼字串,然後指定給currentColor.name
} else {
//使用者未登入,使用預設的藍色主題
currentColor.name = "blue";
}
let today = new Date(); //新增一個Date物件,命名為today
let thisYear = today.getFullYear();
let thisMonth = today.getMonth();
let thisDate = today.getDate();
updateDates();
fillInMonth(thisYear, thisMonth, thisDate);
</script>
修改index.php中的setTheme函式
//讀取theme表格中的色彩名稱
function setTheme(){
//呼叫wp_get_current_user方法得WordPress的使用者資料,並放入$current_user這個全域變數中
global $current_user; wp_get_current_user();
global $connection;
//使用where子句查詢登入的使用者資料列
$query = "SELECT * FROM theme where user_login = '$current_user->user_login'";
$result = mysqli_query($connection, $query);
if(!$result){
die("Something went wrong...`");
}
while($row = mysqli_fetch_assoc($result)){
return $row['cur_theme'];
}
}
原本的setTheme方法(供對照)
//讀取theme表格中的色彩名稱
function setTheme(){
global $connection;
$query = "SELECT * FROM theme";
$result = mysqli_query($connection, $query);
if(!$result){
die("Something went wrong...`");
}
while($row = mysqli_fetch_assoc($result)){
return $row['cur_theme'];
}
}
第二部份 設定theme
更新資料加上where user_login = ???? 條件子句,有使用者有登入的話,就會查到使用者資料列,並更新該登入者的資料列,若未登入的話,會找不到資料,不會進行任何資料的更新。
修改index.php中的updateTheme
// 更新theme表格中的cur_theme欄位的資料
function db_updateTheme($newTheme){
//呼叫wp_get_current_user方法得WordPress的使用者資料,並放入$current_user這個全域變數中
global $current_user; wp_get_current_user();
global $connection;
//使用where條件找出登入的使用者的資料列的cur_theme欄位值為$newTheme
$query = "UPDATE theme SET cur_theme = '$newTheme' where user_login = '$current_user->user_login'";
$result = mysqli_query($connection, $query); //送出SQL查詢
if(!$result){ //查詢失敗的話…
die("Query failed: " . mysqli_error($connection));
}
}
原本updateTheme方法(供對照)
// 更新theme表格中的cur_theme欄位的資料
function db_updateTheme($newTheme){
global $connection;
$query = "UPDATE theme SET cur_theme = '$newTheme' WHERE id = 1"; //更新theme資料表格中,id欄位值為1的資料列中的cur_theme欄位值為$newTheme
$result = mysqli_query($connection, $query); //送出SQL查詢
if(!$result){ //查詢失敗的話…
die("Query failed: " . mysqli_error($connection));
}
}
