# php&MySQL 開啟後端的起點
###### tags: `助教` `助教培訓班` `高科大` `試教教材`
>:::spoiler 文章目錄
>[TOC]
>:::
## 111-2【程式設計教學助理培訓班】PHP網站程式設計入門
[111-2【程式設計教學助理培訓班】PHP網站程式設計入門 - 活動訊息平台](https://ws1.nkust.edu.tw/Activity/Home/Event?Sno=202305191555063SI6Kj)
### 影片紀錄
{%youtube iYtfwZ9_UXw %}
### 架設環境
#### WAMP
W - OS:Windows
A - 伺服器:Apache
M - 資料庫:MySQL
P - 語言:PHP
> **推薦使用**
1. [XAMPP](https://www.apachefriends.org/zh_tw/download.html)
2. [MAMP](https://www.mamp.info/en/downloads/)
3. LAMP
4. [AppServ](https://www.appserv.org/en/)
:warning: <font color="EA000">**注意** 如果有使用其他整合伺服器軟體，會影響安裝，可能要暫時卸載或換port。</font>
[Mac電腦php環境安裝 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10157634)
##### 關於XMAPP詳細說明文章
[XAMPP 網頁伺服器架站工具設定與使用教學 | KJie Notes](https://www.kjnotes.com/devtools/54)
#### 編輯器
1. [微軟的 Visual Studio Code](https://code.visualstudio.com/)
2. [Sublime Text](https://www.sublimetext.com/)
3. [Notepad++](https://notepad-plus-plus.org/downloads/)
:::success
推薦 Visual Studio Code，可以使用 **emmet** 快速寫網頁。
[Cheat Sheet](https://docs.emmet.io/cheat-sheet/)
:::
### 檢查環境是否架設成功(網頁伺服器的位置)
1. localhost(本地端網址)
2. 127.0.0.1
### php
[PHP Tutorial | w3schools](https://www.w3schools.com/php/default.asp)
1. 用來製作網站後端
2. 由伺服器執行
3. 瀏覽器才可以看到後端網站
### 開始php撰寫
> **看出是否正常運行PHP語法，可以看到PHP 的版本(PHP version)**
```php=1
<?php
phpinfo();
?>
```
> **echo用法**
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
echo ("Hello World");
?>
</body>
</html>
```
> **for用法**
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
for ($i = 1; $i <= 6; $i++) {
echo ("<h$i>Hello World</h$i>");
}
?>
</body>
</html>
```
> **計算BMI**
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<?php
$height = 1.74;
$weight = 65;
$bmi = $weight / ($height * $height);
echo ($height * 100 . "公分<br>");
echo ($weight . "公斤<br>");
echo ("BMI=$bmi");
?>
</body>
</html>
```
> **製作前端表單，送資料做計算BMI**
```html=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index.php" method="post">
身高：<input type="text" name="height">公尺<br>
體重：<input type="text" name="weight">公斤<br>
<input type="submit" value="計算">
</form>
<?php
$height = $_POST['height'];
$weight = $_POST['weight'];
$bmi = $weight / ($height * $height);
echo ($height * 100 . "公分<br>");
echo ($weight . "公斤<br>");
echo ("BMI=$bmi");
?>
</body>
</html>
```
> **加使用者資料判斷**
> 空輸入問題，後端資料做if邏輯判斷[color=#cc048c]
```html=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index.php" method="post">
身高：<input type="text" name="height">公尺<br>
體重：<input type="text" name="weight">公斤<br>
<input type="submit" value="計算">
</form>
<?php
$height = $_POST['height'];
$weight = $_POST['weight'];
if ($height == "" || $weight == "") {
echo "必須輸入身高、體重資料!!!";
} else {
$bmi = $weight / ($height * $height);
echo ($height * 100 . "公分<br>");
echo ($weight . "公斤<br>");
echo ("BMI=$bmi");
}
?>
</body>
</html>
```
> 空輸入問題，前端表單屬性參數設定 [color=#cc048c]
```html=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="index.php" method="post">
身高：<input type="text" name="height" required>公尺<br>
體重：<input type="text" name="weight" required>公斤<br>
<input type="submit" value="計算">
</form>
<?php
$height = $_POST['height'];
$weight = $_POST['weight'];
$bmi = $weight / ($height * $height);
echo ($height * 100 . "公分<br>");
echo ($weight . "公斤<br>");
echo ("BMI=$bmi");
?>
</body>
</html>
```
#### 配合MySQL資料庫
[PHP MySQL Select Data | MySQL串資料庫語法](https://www.w3schools.com/php/php_mysql_select.asp)
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 前端表單屬性參數設定 -->
<form action="add.php" method="post">
身高：<input type="text" size="4" name="height" required>公尺<br>
體重：<input type="text" size="4" name="weight" required>公斤<br>
<input type="submit" value="紀錄">
</form>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "bmi";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id,bmi,rdate,height,weight FROM bmirecord order by rdate desc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while ($row = $result->fetch_assoc()) {
echo "id: " . $row["id"] . " - 您的BMI紀錄為 " . $row["bmi"] . " 身高： " . $row["height"] . " 體重： " . $row["weight"] . " 紀錄時間： " . $row["rdate"] . "<br>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
```
[PHP MySQL Insert Data | 新增資料到MySQL](https://www.w3schools.com/php/php_mysql_insert.asp)
[PHP MySQL Select Data With ORDER BY Clause | 資料排序用](https://www.w3schools.com/php/php_mysql_select_orderby.asp)
> **add.php撰寫，SQL：INSERT頁面**
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`, initial-scale=1.0">
<title>add.php</title>
</head>
<body>
<?php
// BMI計算
$height = $_POST['height'];
$weight = $_POST['weight'];
$bmi = $weight / ($height * $height);
// 資料庫串接
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "bmi";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "INSERT INTO bmirecord (weight,height,bmi)
VALUES ('" . $weight . "','" . $height . "','" . $bmi . "')";
$conn->query($sql);
$conn->close();
header("Location: http://localhost/NKUST3/111-2%E3%80%90%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88%E6%95%99%E5%AD%B8%E5%8A%A9%E7%90%86%E5%9F%B9%E8%A8%93%E7%8F%AD_PHP%E7%B6%B2%E7%AB%99%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88%E5%85%A5%E9%96%80%E3%80%91/ch6/");
?>
</body>
</html>
```
### CRUD 新增 修改 刪除 查詢
已教 新增&查詢，提供其餘學習參考資料。
[後端基礎概念：php 與 資料庫基本知識. 什麼是後端？ | by Hugh's Programming life | Medium](https://hugh-program-learning-diary-js.medium.com/%E5%BE%8C%E7%AB%AF%E5%9F%BA%E7%A4%8E%E6%A6%82%E5%BF%B5-8643ca1f5315)
[PHP MySQL Delete Data | 刪除](https://www.w3schools.com/php/php_mysql_delete.asp)
[PHP MySQL Update Data | 修改(更新)](https://www.w3schools.com/php/php_mysql_update.asp)
### bootstrap 5
[Bootstrap · The most popular HTML, CSS, and JS library in the world.](https://getbootstrap.com/)
> **放在<head>標籤內，像是利用這些插件/套件，來讓網頁變漂亮跟動起來。**
```htmlembedded=1
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
```
> **加上table設計，讓畫面更簡潔。**
[表格 (Tables) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0](https://bootstrap5.hexschool.com/docs/5.0/content/tables/)
```php=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap 資料引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<!-- 前端表單屬性參數設定 -->
<form action="add.php" method="post">
身高：<input type="text" size="4" name="height" required>公尺<br>
體重：<input type="text" size="4" name="weight" required>公斤<br>
<input type="submit" value="紀錄">
</form>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "bmi";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id,bmi,rdate,height,weight FROM bmirecord order by rdate desc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 寫table
echo "<table class='table table-primary table-hover'>";
echo "<tr><td>編號</td><td>您的BMI紀錄</td><td>身高</td><td>體重</td><td>紀錄時間</td></tr>";
// output data of each row
while ($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row["id"] . "</td>";
echo "<td>" . $row["bmi"] . "</td>";
echo "<td>" . $row["height"] . "</td>";
echo "<td>" . $row["weight"] . "</td>";
echo "<td>" . $row["rdate"] . "</td>";
echo "</tr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
```
> **加上form設計，讓畫面更簡潔。**
```html=1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- bootstrap 資料引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<h2>我的BMI紀錄</h2>
<!-- 前端表單屬性參數設定 -->
<form class="form row g-3" action="add.php" method="post">
<div class="div col-xs-3">
<label for="ex1" class="form-label"><b>身高</b></label>
<input type="text" id="ex1" class="form-control" size="4" name="height" required placeholder="Ex. 1.8">公尺
</div>
<div class="div col-xs-3">
<label for="ex2" class="form-label"><b>體重</b></label>
<input type="text" id="ex2" class="form-control" size="4" name="weight" required placeholder="Ex. 70">公斤
</div>
<div class="div col">
<input type="submit" class="btn btn-primary mb-3" value="紀錄">
</div>
</form>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "bmi";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id,bmi,rdate,height,weight FROM bmirecord order by rdate desc";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 寫table
echo "<table class='table table-primary table-hover'>";
echo "<tr class='text-center'><td>編號</td><td>您的BMI紀錄</td><td>身高(cm)</td><td>體重(kg)</td><td>紀錄時間</td></tr>";
// output data of each row
while ($row = $result->fetch_assoc()) {
echo "<tr class='text-center'>";
echo "<td>" . $row["id"] . "</td>";
echo "<td>" . $row["bmi"] . "</td>";
echo "<td>" . $row["height"] * 100 . "</td>";
echo "<td>" . $row["weight"] . "</td>";
echo "<td>" . $row["rdate"] . "</td>";
echo "</tr>";
}
} else {
echo "0 results";
}
$conn->close();
?>
</body>
</html>
```
### MySQL
> **資料庫後台開啟**
1. http://localhost/phpmyadmin/
2. http://127.0.0.1/phpmyadmin/
### Git
> **用來管理版本控制 or 專案下載觀看。**
[Git下載](https://git-scm.com/)
[GitHub 註冊登入](https://github.com/)
[Git初學重點整理](https://hackmd.io/@chiaoshin369/Git-Github_LearnBook)
## 製作範例
### 後端串接+帳號密碼登入、圖表展示(期末報告)
[chiaoshin/NKUST_php_hw: 『財賦自游 Financial Independence』](https://github.com/chiaoshin/NKUST_php_hw)
[**『財賦自游 Financial Independence』| YT展示_網頁使用示範**](https://www.youtube.com/watch?v=fuJJjXmh8uA)
### 前端修正(接案)
http://www.xledia.com/
---
:::spoiler 最後更新日期
>==第一版==[time=2022 11 15 , 11:55 PM][color=#786ff7]
>第二版[time=2023 1 10 , 11:49 AM][color=#ce770c]
>第三版[time=2023 5 26 , 12:08 AM][color=#ce770c]
>第四版[time=2023 6 7 , 03:29 PM][color=#ce770c]
>**最後版[time=2023 6 7 , 03:29 PM]**[color=#EA0000]
:::
Sign in with Wallet
Connect another wallet