將資料寫入訂單檔案
程式打包
注意：記得先新增order.txt(與index.php同目錄)
將收到的單筆訂單資料寫入order.txt的php程式碼片段：
<?php
$file = 'order.txt'; //訂單資料檔名稱，請先在此程式index.php同目錄建立order.txt，裏面是空的不是空的都可以。
$current = file_get_contents($file); //讀出舊資料，並以$current變數做為操作的檔案handler
date_default_timezone_set("Asia/Taipei"); //設定時區，要在order裏輸出時間，把時區調到Taipei
if(isset($_POST['order'])){ //如果有傳進order的話 (系統會將資料名稱與值放入$_POST陣列中，php的語函請參考"associative array")
$current .= $_POST['order']." ".date("Y-m-d h:i:sa")."rn"; //將除錯資訊加到檔後端
}
file_put_contents($file, $current); //輸出檔案
?>
送出訂單資料函式：
function submit_order(){
const order_people = document.getElementById("order").value;
if (order_people == "") {
alert(" 學號/姓名不能是空白！！！");
return;
}
order_text = order_people + ":" + food_choice;
console.log(order_text);
ajax({order:order_text}); //使用ajax將{order:order_text}這個物件送至index.php(這支程式本身，也可以送至其他程式。)
document.getElementById("submit-button").disabled = true; //送出訂單資料後，將送出按鈕設為不能動作，防止重覆送出訂單資料，直到另外選取食品。
}
完整的程式列表：(一旦index.html改成index.php後，裏面的php程式碼會由後端主機執行，前端瀏覽器看不到php程式碼。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>富國快餐</title>
<link rel="stylesheet" href="css/modal.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<style>
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
body {
background-image:url('images/backimg.jpg');
background-repeat:no-repeat;
background-color:Black;
margin : 0;
font-family: 'cwtexkai', sans-serif;
font-weight : 800;
}
</style>
<body>
<?php
$file = 'order.txt'; //訂單資料檔
$current = file_get_contents($file); //讀出舊資料
date_default_timezone_set("Asia/Taipei"); //設定時區，要在php-log裏輸出時間，把時區調到Taipei
if(isset($_POST['order'])){ //如果有傳進order的話
$current .= $_POST['order']." ".date("Y-m-d h:i:sa")."rn"; //將除錯資訊加到檔後端
}
file_put_contents($file, $current); //輸出檔案
?>
<dialog id="modal" open>
<div id="fav-food" open>
<div class="popup">
<h4 class="center">訂便當-富國快餐</h4>
<div id="food-options">
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>酥炸雞腿</h5>
<div class="food-checkmark" id="酥炸雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('酥炸雞腿')"><i class="fas fa-check checkmark"></i></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>蜜汁雞腿</h5>
<div class="food-checkmark" id="蜜汁雞腿" style="background-color: #D01212;" onclick="addCheckMark('蜜汁雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>醬燒雞腿</h5>
<div class="food-checkmark" id="醬燒雞腿" style="background-color: #721D89;" onclick="addCheckMark('醬燒雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>爌肉</h5>
<div class="food-checkmark" id="爌肉" style="background-color: #158348;" onclick="addCheckMark('爌肉')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>主廚雞腿</h5>
<div class="food-checkmark" id="主廚雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('主廚雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>招牌雞腿</h5>
<div class="food-checkmark" id="招牌雞腿" style="background-color: #D01212;" onclick="addCheckMark('招牌雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>獨門雞腿</h5>
<div class="food-checkmark" id="獨門雞腿" style="background-color: #721D89;" onclick="addCheckMark('獨門雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>石板烤肉</h5>
<div class="food-checkmark" id="石板烤肉" style="background-color: #158348;" onclick="addCheckMark('石板烤肉')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-1.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>不二雞腿</h5>
<div class="food-checkmark" id="不二雞腿" style="background-color: #1B19CD;" onclick="addCheckMark('不二雞腿')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-2.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>三寶便當</h5>
<div class="food-checkmark" id="三寶便當" style="background-color: #D01212;" onclick="addCheckMark('三寶便當')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-3.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>烤鴨便當</h5>
<div class="food-checkmark" id="烤鴨便當" style="background-color: #721D89;" onclick="addCheckMark('烤鴨便當')"></div>
</div>
</div>
<div class="food-option">
<div><img src="images/food-4.png" alt="" width="128" height="96"></div>
<div class="food-check">
<h5>無雙爌肉</h5>
<div class="food-checkmark" id="無雙爌肉" style="background-color: #158348;" onclick="addCheckMark('無雙爌肉')"></div>
</div>
</div>
</div>
<div class="submit-box">
<h5>學號(或姓名)：</h5>
<textarea id="order" class="font" name="order" autofocus></textarea>
<div><button id="update-theme-button" class="button font" onclick="submit_order();">送 出</button></div>
</div>
</div>
</div>
</dialog>
<script type="text/javascript">
function ajax(object){
var request = new XMLHttpRequest();
request.open("POST", "index.php");
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(objectToString(object));
}
function objectToString(object){
let str = "";
Object.keys(object).forEach(function(key){
str += key;
str += `=${object[key]}&`;
});
console.log(str)
return str;
}
function submit_order(){
const order_people = document.getElementById("order").value;
if (order_people == "") {
alert(" 學號/姓名不能是空白！！！");
return;
}
order_text = order_people + ":" + food_choice;
console.log(order_text);
ajax({order:order_text});
}
var food_choice = '酥炸雞腿';
function addCheckMark(food){
food_choice = food;
// console.log(food_choice);
//清除/移除類別有"checkmark"的元素，也就是清除掉勾選的顯示
var checkmarks = document.getElementsByClassName("checkmark");
for(let i = 0; i < checkmarks.length; i++){
checkmarks[i].parentNode.removeChild(checkmarks[i]);
}
//加上勾選的顯示
var foodOptions = document.getElementsByClassName("food-checkmark");
for (let i = 0; i < foodOptions.length; i++){
if (foodOptions[i].id == food) {
foodOptions[i].innerHTML = "<i class='fas fa-check checkmark'></i>";
}
}
}
</script>
</body>
</html>
PHP檔案操作參考資料：