[ MTR01 ] - Lesson 5-1 之後端基礎

[zuppachu]

28:59 前後端結合

後端「實際上」到底是什麼？

1. 需要有一個伺服器來處理 Request 跟 Response 伺服器 Apache，通常不會注意到它，主要是用來接收 request 並回傳 response
2. 需要寫程式來處理 以下皆可 PHP, JS, Python...etc
3. 需要有資料庫可以儲存資料: 這個非必要，但大部分的網頁都需要有資料庫來存資料。（MySQL：專門設計用來快速處理資料的程式）

伺服器、資料庫其實都是一支程式，只是為了解決不同問題存在而已。

Apache 阿帕契（server）and MySQL

• Apache：通常不會注意到他的存在！
• MySQL：資料庫，專門設計用來快速處理資料的程式。

Request 透過阿帕契 way1 => Apache 呼叫 php 處理 Request 並且回傳 Response way2 => Apache 呼叫 php 處理, 需要資料庫的話，透過 MySQL 拿取資料 然後 回傳 PHP 再到 Server 再回傳 Response

[圖來自 HULI 的 MTR01_5-1]

如何安裝 xampp？

12:36～14:05 安裝 xampp

下載後，可參照這裡的解釋。

測試時最主要該注意的是路徑！路徑應為：lampp/htdocs/joanne/hello.php。 用 http://localhost:8080/joanne/hello.php 或 localhost:8080/joanne/hello.php 測試都是一樣的結果。 只要出現 Hello, world! 就代表環境安裝成功了。

前面網頁失敗好久的原因：

1. 路徑不對，我沒設在 htdocs 之下
2. 我的 php 寫錯了，應該是這樣子 <?php ?> (php 與 ? 應該緊連著才對！)

[zuppachu]

PHP 基礎

17:00 處

• 在 php 內，不用宣告變數
• 需要錢字號開頭 $
• 記得要加分號;
• php 的字串連接是.，非加號+。

1. 印出東西

   <h1>
   <?php
   echo 'hello';
   ?>
   </h1>

   與 index.html 的差別？ 用網址打開後，看到的是經過 php 處理過後的樣子 => <h1> hello</h1> 再回傳給 response。

2. For loop

   <?php
   echo '<ul>';
   for($i=0; $i<10; $i++) {
       echo '<li>'. $i .'</li>';
   }
   echo '<ul>';
   ?>
   //得
   //0
   //1
   .
   .
   .
   //9

   或是讓 php 直接回傳可改成如下：

   
   <ul>
   <?php
   
       for($i=0; $i<10; $i++) {
           echo '<li>'. $i .'</li>';
       }       
   ?>
   <ul>

//結果（0~9 列表排列）跟上面的寫法一樣！

3. 用`$_GET`拿資料
```js
<?php
  $username = $_GET['username']; //$_GET 是 PHP 準備的 GET 變數
  if ($username === 'admin') {
    echo 'welcome!';
  } else {
    echo 'wrong username';
  }
?>

<?php
  $username = "";
  if (isset($_POST["username"]) && isset($_POST["password"])) {  
       //isset() 意思是如果變數有被設定的話
    $username = $_POST["username"];
    $password = $_POST["password"];
    if ($username === "admin" && $password === "admin") {
        echo "登入成功";
    }
  }
?>

4. 前後端透過表單溝通

在 index.php 放表單

<form action="/zuppachu/index.php" method="POST">
    username: <input name="username" />
    password: <input name="password" />
    <input type="submit" />
</form>

<?
  $username = "";
  if (isset($_POST["username"]) && isset($_POST["password"])) {
    $username = $_POST["username"];
    $password = $_POST["password"];

    if ($username === "admin" && $password === "admin") {
?>
        <h1>登入成功</h1>
<?
    } else {
?>
        <h1>登入失敗</h1>
<?
    }
  }
?>

<form action="/zuppachu/index.php" method="POST">
    username: <input name="username" />
    password: <input name="password" />
    <input type="submit" />
</form>

上面其實就是三個<script>結合起來，很常這樣寫，但是不容易閱讀。

5. 其他表單示範

29:06

在 login.php 裡面放 php 程式碼，如果 request 是 PSOT 就用 $_POST 變數

<?php
  if(isset($_POST['username']) && isset($_POST['password'])) {
    $username = $_POST['username'];
    $password = $_POST['password'];

    if($username === 'admin' && $password === 'admin') {
?>
      <h1>登入成功<h1>
<?php
    } else {
      header('Location: index.php');  //用 header('Location:') 轉址 redirect
    }
  }
?>

<form action="/zuppachu/index.php" method="POST">
    username: <input name="username" />
    password: <input name="password" />
    <input type="submit" />
</form>

---

補充資料：

PHP day1 to day7

[zuppachu]

資料庫

為什麼要有資料庫？

1. 因為要存資料呀，存在資料庫比較方便，可以查詢、新增、刪除。
2. 可以用指令操控資料庫。

   檔案叫 Database
   表格叫 Table
   行叫 Column （像|）
   列叫 Row (像中文一)

   SQL (Structure Query Language)

   為資料庫提供，專門用來查詢資料的程式語法。 幾個常見指令 CRUD (Create, Read, Update, Delete)：

• 查詢 (Read）

  SELECT phone FROM users WHERE name=peter
  //從 users 裡面找到 name 是 peter 的那列，並把 phone 的值取出來

  SELECT * FROM users
  // * ＝所有。取出 users 裡面所有欄位的值

• 刪除 (Delete)

  DELETE FROM users WHERE name=peter
  //刪除 users 裡面 name 是 peter 那列

• 更新 (Update)

  UPDATE users SET phone=123 WHERE name=peter
  //更新 users 裡面 name 是 peter 的那列，把 phone 設成 123

• 新增 (Create)

  INSERT INTO users(name, phone) VALUES (peter, 123)
  //新增一筆記錄 name 是 peter，phone 是 123

  資料庫操作示範

什麼是 phpMyAdmin？ 一個用網頁圖形化的介面管理你的資料庫。

詳細示範在 43:35 。

[zuppachu]

資料庫跟 PHP 結合

54:33

PHP 與資料庫：連接

<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "mentor";

//new mysqli 跟 MySQL 連接
$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {  // -> 跟 JavaScript 裡的 . 類似
    die("Connection failed: " . $conn->connect_error);
}
?>

<form action="/lidemy/login.php" method="POST">
    username: <input name="username" />
    password: <input name="password" />
    <input type="submit" />
</form>

PHP 與資料庫：Select

<?
$sql = "SELECT * FROM users";
$result = $conn->query($sql);   //執行 query

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {  //fetch_assoc() 把資料庫裡每個欄位取出來
        echo "id: " . $row["id"] . ", username:" . $row["username"] . "<br>";
    }
} else {
    echo "0 results";
}
?>

PHP 與資料庫：其他

<?
$sql = "INSERT INTO users (username) VALUES ('huli')";

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
?>

用 Require 引入檔案

require("conn.php")

範例： 在 index.php

<?

    require_once("conn.php");

?>

<h1>登入</h1>
<form action="/lidemy/login.php" method="POST">
    username: <input name="username" />
    password: <input name="password" type="password"/>
    <input type="submit" />
</form>

<h1>註冊</h1>
<form action="/lidemy/login.php" method="POST">
    username: <input name="username" />
    password: <input name="password" type="password"/>
    <input type="submit" />
</form>

在 conn.php

<?

  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "mentor";

  $conn = new mysqli($servername, $username, $password, $dbname);

?>

在 login.php

<?

  require_once("conn.php");  //如果同時 require 多個檔案，使用 require_once 確保一樣的東西只會引入進來一次，所以實務上更常被使用

  $username = $_POST["username"];
  $password = $_POST["password"];

  $sql = "SELECT * FROM users WHERE username='" . $username . "'and password='" . $password ."'";

  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
      echo "登入成功";
  } else {
      header("Location: index.php");
  }
?>