Try   HackMD

php&MySQL 開啟後端的起點

tags: 助教 助教培訓班 高科大 試教教材
文章目錄

111-2【程式設計教學助理培訓班】PHP網站程式設計入門

111-2【程式設計教學助理培訓班】PHP網站程式設計入門 - 活動訊息平台

影片紀錄

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

架設環境

WAMP

W - OS:Windows
A - 伺服器:Apache
M - 資料庫:MySQL
P - 語言:PHP

推薦使用

  1. XAMPP
  2. MAMP
  3. LAMP
  4. AppServ

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
注意 如果有使用其他整合伺服器軟體，會影響安裝，可能要暫時卸載或換port。

Mac電腦php環境安裝 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

關於XMAPP詳細說明文章

XAMPP 網頁伺服器架站工具設定與使用教學 | KJie Notes

編輯器

  1. 微軟的 Visual Studio Code
  2. Sublime Text
  3. Notepad++

推薦 Visual Studio Code，可以使用 emmet 快速寫網頁。
Cheat Sheet

檢查環境是否架設成功(網頁伺服器的位置)

  1. localhost(本地端網址)
  2. 127.0.0.1

php

PHP Tutorial | w3schools

  1. 用來製作網站後端
  2. 由伺服器執行
  3. 瀏覽器才可以看到後端網站

開始php撰寫

看出是否正常運行PHP語法，可以看到PHP 的版本(PHP version)




<?php
    phpinfo();
?>

echo用法


















<!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用法




















<!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























<!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




























<!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邏輯判斷

































<!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>

空輸入問題，前端表單屬性參數設定 




























<!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串資料庫語法
















































<!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

PHP MySQL Select Data With ORDER BY Clause | 資料排序用

add.php撰寫，SQL：INSERT頁面









































<!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

PHP MySQL Delete Data | 刪除

PHP MySQL Update Data | 修改(更新)

bootstrap 5

Bootstrap · The most popular HTML, CSS, and JS library in the world.

放在<head>標籤內，像是利用這些插件/套件，來讓網頁變漂亮跟動起來。





<!-- 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



























































<!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設計，讓畫面更簡潔。




































































<!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下載
GitHub 註冊登入

Git初學重點整理

製作範例

後端串接+帳號密碼登入、圖表展示(期末報告)

chiaoshin/NKUST_php_hw: 『財賦自游 Financial Independence』
『財賦自游 Financial Independence』| YT展示_網頁使用示範

前端修正(接案)

http://www.xledia.com/

最後更新日期

第一版2022 11 15 , 11:55 PM

第二版2023 1 10 , 11:49 AM

第三版2023 5 26 , 12:08 AM

第四版2023 6 7 , 03:29 PM

最後版2023 6 7 , 03:29 PM

Last changed by 
 
薰Shin
一個努力學習中的女孩。 【Being towards Death】 【才能不一定擁有，努力不一定成功，找到自己的興趣，才是最重要的動力。】 【研究是天性，怠惰是人性，維持平衡是韌性，而同時擁有任性，最終才是人生。】 youtube.com/chiaoshin
2
617

Read more

大數據分析與R語言 學習目錄:

◈1-1

Apr 1, 2025
大數據分析與R語言 第六週

:::spoiler 文章目錄 ::: 前情提要 報告時間(下週分組)、報告方式(中文報告，講英文則加分) 2025/5/5(一)早上或下午 建工 聽演講 R最重要的套件之一 ==ggplot2== 安裝路徑

Mar 24, 2025
薰的筆記📖[㊮](https://hackmd.io/@chiaoshin369/self)

➤ 在校上課紀錄筆記 &lt;i class=&quot;fa fa-file-code-o&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&lt;img alt=&quot;GitHub repo file count (file extension)&quot; src=&quot;https://img.shields.io/badge/%F0%9F%94%A5-%E7%81%AB%E7%86%B1%E8%A3%BD%E4%BD%9C%E4%B8%AD-red&quot;&gt; &lt;img alt=&quot;GitHub repo file count (file extension)&quot; src=&quot;https://img.shields.io/badge/%E6%B4%BB%E5%8B%95%E7%B5%90%E6%9D%9F%20--%202021%2F12%2F25-%20-lightgrey&quot;&gt;學校複習用

Mar 23, 2025
大數據分析實務&商業智慧與巨量資料分析 學習目錄:

◈1-1

Mar 19, 2025
Read more from 薰Shin
Published on HackMD