---
# System prepended metadata

title: 細節頁面
tags: [PHP]

---

---
title: PHP9 
tags: PHP
---

從 "甚麼都沒有" 開始~

````
<!DOCTYPE html>
<html lang="zh-Hant-TW">

<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

    ?>
</body>

</html>

````


留言板-->討論區->會員-->申請免費空間




---
申請免費空間--結果 20220416 兩個都不能用

Domain-->網站名字

https://byet.host/free-hosting/news

http://www.yabi.me/


---

跳過幾筆 -- 顯示幾筆 --語法--

![](https://i.imgur.com/irFBOc1.png)



---

開 新的資料夾-
![](https://i.imgur.com/FKrNBAf.png)

VSＯＤＥ　打開

![](https://i.imgur.com/Ibh9jnY.png)



---

新建資料庫－

使用的語系要跟後面同步- utf8mb4_unicode_ci -->可以儲存 表情符號

https://mitblog.pixnet.net/blog/post/43827108-%5Bmysql%5D-%E7%82%BA%E4%BB%80%E9%BA%BC-mysql-%E8%A6%81%E8%A8%AD%E5%AE%9A%E7%94%A8-utf8mb4-%E7%B7%A8%E7%A2%BC-utf8mb4_

也可以從 操作 改-

![](https://i.imgur.com/qMnd4EV.png)


改完要記得V

![](https://i.imgur.com/Gvh902X.jpg)
![](https://i.imgur.com/oaTdVWs.jpg)


---

![](https://i.imgur.com/eRFbQdZ.png)




---
資料表－

![](https://i.imgur.com/GLPLWgJ.png)

![](https://i.imgur.com/VZM5lYG.png)


---

開始填裡面-

![](https://i.imgur.com/IyMdzic.png)


![](https://i.imgur.com/eQVgElV.png)



---

加入 connSQL_php

````

<?php
    $dbhost = 'localhost';
    //資料庫主機位置(大部份都是localhost)

    $dbuser = 'root';
    //資料庫使用者 登入帳號(xampp預設是root最高權限登入)

    $dbpw = '';
    //資料庫使用者 登入密碼(xampp預設是密碼是空的)

    $database = 'my_gbook';
    //資料庫名稱

    $myconnect = new mysqli($dbhost, $dbuser, $dbpw, $database);
    //建立資料庫連線 實體化mysqli(資料庫主機位置, 登入帳號, 登入密碼, 資料庫名稱)


    // if ($myconnect->connect_error) {
    //     die("連線失敗: " . $myconnect->connect_error);
    // } else {
    //     echo "連線OK";
    // }
    //資料庫連線若失敗出現錯誤訊息幫助我們除錯，確認沒有問題後可以刪除

    $myconnect->set_charset("utf8mb4");
    //設定連線utf8編碼，防止中文亂碼

?>

````


改資料庫名稱- my_gbbok

語系改--utf8mb4

注意不要有空白

![](https://i.imgur.com/wUn3TsD.png)




---
我的網址-http://localhost:8012/my_gbook/

![](https://i.imgur.com/UrtXxVv.png)



---
先寫新增 "留言動作"-

檔案要有命名規則- 之後比較好找--

name 要跟 資料表 名稱一樣 -->比較好記

快捷鍵打-->form:post 按 tab鍵

![](https://i.imgur.com/nJSm0rY.png)

http://localhost:8012/my_gbook/gbook_add.php


![](https://i.imgur.com/rdbxna0.png)

![](https://i.imgur.com/8r0zEFV.png)

![](https://i.imgur.com/4qIrGSf.png)



---
主題類型:

![](https://i.imgur.com/baOmgYx.png)

![](https://i.imgur.com/fldb3gp.png)




---
主題+內容

![](https://i.imgur.com/orjlToO.png)

![](https://i.imgur.com/LtTxHWB.png)


---

兩個按鈕-


![](https://i.imgur.com/FckHeAZ.png)

![](https://i.imgur.com/sydgnvY.png)

![](https://i.imgur.com/WPYpOXK.png)

按"重設" 會還原到預設值
![](https://i.imgur.com/jeZWUfR.png)



---
增加 emoji 圖示

![](https://i.imgur.com/NPjgTB3.png)


+ 增加2個檔案 到 C:\xampp\htdocs\MY_GBOOK

![](https://i.imgur.com/FQLJlh4.png)

![](https://i.imgur.com/Lsv6cPw.png)

![](https://i.imgur.com/15x6rXk.png)

下面class 沒有點

![](https://i.imgur.com/9KRBNSl.png)

![](https://i.imgur.com/y5c6Ule.png)


---

4-
放在<head>跟</head>中間即可

![](https://i.imgur.com/cAb9QjF.png)

![](https://i.imgur.com/lds5AeE.png)


---

````
拷貝下面語法至<Head>區域中

<!--emoji開始-->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="emojionearea.min.js"></script>
    <link rel="stylesheet" href="emojionearea.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $(".文字區域class").emojioneArea({
                pickerPosition: "left",
                tonesStyle: "bullet",
                pickerPosition: "bottom"
            });
        });
    </script>
<!--emoji結束-->



3.修改 .文字區域class 為您的文字區域類別
例如 <textarea name="mymsg" class="mymsg" cols="30" rows="10">內容</textarea>

則改成
$(".mymsg").emojioneArea({

4.預設textarea會是100%寬度，可以加入css寬度控制
例如
    <style>
        .mymsg {
            width: 500px;
        }
    </style>



4.官網(可看到各項選項說明/及下載新版本)
https://github.com/mervick/emojionearea
````



---
建立 "隱藏欄位"- 知道使用者第幾次進來-設成 hidden

![](https://i.imgur.com/uzlLXTK.png)



---
判斷使用者在不在--從最上面--

先打東西..再打才會看到...

![](https://i.imgur.com/OIb4reZ.png)


![](https://i.imgur.com/wsOyP6u.png)

看看樣子-
![](https://i.imgur.com/Q5wkvZk.png)

![](https://i.imgur.com/EBCRHjO.png)

先打東西..再打才會看到...
![](https://i.imgur.com/O5NjApD.png)


---
先確認資料庫是否會被寫入-
![](https://i.imgur.com/85Y7iAc.png)

![](https://i.imgur.com/J9Aum1D.png)

![](https://i.imgur.com/0H5Uy5K.png)

出現BUG
![](https://i.imgur.com/37DkKcq.png)


要記得有寫 name
![](https://i.imgur.com/yZftAPT.png)

![](https://i.imgur.com/o2dSniT.png)

有BUG-->

把空格刪掉在試試看

![](https://i.imgur.com/30xDL0r.png)


![](https://i.imgur.com/x6Psrfp.png)

到目前的程式碼-

````
<?php
    if(isset($_POST["mygo"])){
        echo "第2次接收此程式";

        //寫入資料庫-

        echo $_POST["gbook_poser"];
        echo $_POST["gbook_kind"];
        echo $_POST["gbook_title"];
        echo $_POST["gbook_msg"];


    }

?>

<!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>新增留言</title>

    
<!--emoji開始-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="emojionearea.min.js"></script>
    <link rel="stylesheet" href="emojionearea.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $(".mymsg").emojioneArea({
                pickerPosition: "left",
                tonesStyle: "bullet",
                pickerPosition: "bottom"
            });
        });
    </script>
<!--emoji結束-->
 

    <style>
        .mymsg {
            width: 500px;
        }
    </style>


</head>
<body>
    <h1>新增留言</h1>

    <form action="gbook_add.php" method="post">
        發表人:
        <input type="text" name="gbook_poser">
        <br>

        主題類型:
        <select name="gbook_kind">
            <option value="公佈">公佈</option>
            <option value="求助">求助</option>
            <option value="閒聊">閒聊</option>

       </select>
       <br>

       發表主題:
       <input type="text" name="gbook_title">
       <br>

       主題內容:
       <textarea name="gbook_msg"  cols="25" rows="6" class="mymsg">
       </textarea>
       <br>

       <input type="hidden" name="mygo" value="ok">

       <button type="submit">新增</button>
       <button type="reset">重設</button>

    </form>
   
</body>
</html>


````

---
繼續連資料庫-


要跳轉到首頁-增加"首頁"-首頁都要叫 index


設了一進來就是 index 這頁


````
<!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>
   
</body>
</html>

````
![](https://i.imgur.com/DEbIOVC.png)

http://localhost:8012/my_gbook/


![](https://i.imgur.com/zU1kx6h.png)

---

繼續連資料庫-

程式碼-

````
<?php
    if(isset($_POST["mygo"])){
        //echo "第2次接收此程式";

        //寫入資料庫-

        //echo $_POST["gbook_poser"];
        //echo $_POST["gbook_kind"];
        //echo $_POST["gbook_title"];
        //echo $_POST["gbook_msg"];

        include_once('connSQL.php');
        //連線資料庫

        $insertSQL ="INSERT INTO gbook(gbook_poser
        ,gbook_kind,gbook_title,gbook_msg)
        VALUES ('$_POST[gbook_poser]','$_POST[gbook_kind]','$_POST[gbook_title]','$_POST[gbook_msg]')";
        //加入-資料庫

        
        $myData = $myconnect->query($insertSQL);
        //執行上面那段SQL語法
        if ($myData) {
            header("Location: index.php");
        } else {
            echo "錯誤: " . $insertSQL . "<br>" . $myconnect->error;
        }


    }

?>

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<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>新增留言</title>

    
<!--emoji開始-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="emojionearea.min.js"></script>
    <link rel="stylesheet" href="emojionearea.min.css">
    <script type="text/javascript">
        $(document).ready(function () {
            $(".mymsg").emojioneArea({
                pickerPosition: "left",
                tonesStyle: "bullet",
                pickerPosition: "bottom"
            });
        });
    </script>
<!--emoji結束-->
 

    <style>
        .mymsg {
            width: 500px;
            height: 250px;
        }
    </style>


</head>
<body>
    <h1>新增留言</h1>

    <form action="gbook_add.php" method="post">
        發表人:
        <input type="text" name="gbook_poser">
        <br>

        主題類型:
        <select name="gbook_kind">
            <option value="公佈">公佈</option>
            <option value="求助">求助</option>
            <option value="閒聊">閒聊</option>

       </select>
       <br>

       發表主題:
       <input type="text" name="gbook_title">
       <br>

       主題內容:
       <textarea name="gbook_msg"  cols="25" rows="6" class="mymsg">
       </textarea>
       <br>

       <input type="hidden" name="mygo" value="ok">

       <button type="submit">新增</button>
       <button type="reset">重設</button>

    </form>
   
</body>
</html>

````

要到下一頁只能打檔名-
http://localhost:8012/my_gbook/gbook_add.php

![](https://i.imgur.com/XHFkJjf.png)

![](https://i.imgur.com/KRLYE1d.png)


按新增就會跑回首頁

到資料庫看看有沒有--
![](https://i.imgur.com/Z0CoXXz.png)



-----------------

測試連線
http://localhost:8012/my_gbook/connSQL.php
![](https://i.imgur.com/ENjZVWG.png)

````

<?php
    $dbhost = 'localhost:3307';
    //資料庫主機位置(大部份都是localhost)

    $dbuser = 'root';
    //資料庫使用者 登入帳號(xampp預設是root最高權限登入)

    $dbpw = '';
    //資料庫使用者 登入密碼(xampp預設是密碼是空的)

    $database = 'my_gbook';
    //資料庫名稱

    $myconnect = new mysqli($dbhost, $dbuser, $dbpw, $database);
    //建立資料庫連線 實體化mysqli(資料庫主機位置, 登入帳號, 登入密碼, 資料庫名稱)


     if ($myconnect->connect_error) {
         die("連線失敗: " . $myconnect->connect_error);
     } else {
         echo "連線OK";
     }
    //資料庫連線若失敗出現錯誤訊息幫助我們除錯，確認沒有問題後可以刪除

    $myconnect->set_charset("utf8mb4");
    //設定連線utf8編碼，防止中文亂碼

?>

````

---




到資料庫看有沒有新增-

![](https://i.imgur.com/CG3SONI.png)


-----
![](https://i.imgur.com/h62BI6N.png)

發現 BUG 是資料庫 命名'錯誤-- 從操作去改

 原來是 http://localhost:8012/my_gbook/index.php
 
 +# bind-address="127.0.0.1:3307"
 
 
 居然是兩個要不同--
 http://localhost:8012/my_gbook/index.php
 
 改的就是--
 
 
 
 +# bind-address="127.0.0.1:3307"
  改的就是--
  
  ![](https://i.imgur.com/r7f3NVg.png)
  
  ![](https://i.imgur.com/QyFAyZn.png)
  
  在xmapp的mysql的config的檔案
  ![](https://i.imgur.com/5o0d95r.png)

![](https://i.imgur.com/Xj3YKN0.png)


mysql按停止 在開始 網頁在重整

$dbhost = 'localhost';
這段改成$dbhost = 'localhost:3307'

![](https://i.imgur.com/PPj78wR.png)

http://localhost:8012/phpmyadmin/sql.php?db=my_gbook&table=gbook&pos=0


--------------
增加回到首頁 / 新增留言 的按鈕





---
還有index的menu的動作

先新增一個檔案-menu.php


````
<nav>
        <a href="index.php">回到首頁</a>|
        <a href="gbook_add.php">新增留言</a>
</nav>

````

http://localhost:8012/my_gbook/index.php

![](https://i.imgur.com/1ZyMOdF.png)

到indexe掛上-
![](https://i.imgur.com/AR4C8Rg.png)

````
<title>我是首頁</title>
</head>
<body>
<?php include_once("menu.php") //掛選單 ?>
    <h1>首頁</h1>
    <?php

    ?>
</body>

````
樣子

![](https://i.imgur.com/tJ4TL3j.png)

按新增留言-
![](https://i.imgur.com/iFjILhg.png)

http://localhost:8012/my_gbook/gbook_add.php

裡面加入語法-

````
<?php include_once("menu.php") //掛選單 ?>
````

長的樣子-
![](https://i.imgur.com/uhtAx0s.png)

上面也是兩個按鈕


---
後面再新增在"首頁"有打入的東西

![](https://i.imgur.com/itgO6og.png)


````
<?php
    include_once('connSQL.php');
    //連線資料庫

    $selectSQL = "SELECT * FROM  gbook";
    //來一段SQL的SELECT語法吧

    $myData = $myconnect->query($selectSQL);
    //執行上面那段SQL語法並將所得資料放進 $myData



    if ($myData->num_rows > 0) {
        //有資料筆數大於0時才執行
        while ($row = $myData->fetch_assoc()) {
            //將陣列資料中的Key值設定為該欄位的欄位名稱，並依序放進$row中   
            echo $row["gid"];
            echo $row["gbook_date"];
            echo $row["gbook_title"];
            echo "<hr>";
        }
    } else {
        //沒有資料時顯示
        echo '沒有資料';
    }
    ?>

````

看看樣子-
![](https://i.imgur.com/659AqpM.png)



---
再加入語法-

````
<?php
    include_once('connSQL.php');
    //連線資料庫

    $selectSQL = "SELECT * FROM  gbook";
    //來一段SQL的SELECT語法吧

    $myData = $myconnect->query($selectSQL);
    //執行上面那段SQL語法並將所得資料放進 $myData



    if ($myData->num_rows > 0) {
        //有資料筆數大於0時才執行
        while ($row = $myData->fetch_assoc()) {
            //將陣列資料中的Key值設定為該欄位的欄位名稱，並依序放進$row中   
            echo $row["gbook_date"] . " | ";
            echo "<a href=detail.php?id=$row[gid]> $row[gbook_title] </a>";
            echo "<hr>";
        }
    } else {
        //沒有資料時顯示
        echo '沒有資料';
    }
    ?>

````
![](https://i.imgur.com/0Fw8pY3.png)



---
出現 連線OK有點醜~
就是這裡註解掉-
![](https://i.imgur.com/DNhlQng.png)

再看看樣子-

![](https://i.imgur.com/oX10Gz8.png)


---

改背景 顏色/圖-

````
    <style>
        body{
            background-color: 	#FF69B4;
            /*background-image: url("");*/
        }
    </style>
    
    ````

https://www.toodoo.com/db/color.html

你可以去網路找圖，然後複製好圖片連結放在url()中間
![](https://i.imgur.com/uREGPNZ.jpg)

太花了~

程式碼-

````

    <style>
        body{
           background-color: 	#FF69B4;
            /*background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcX16rXjwPiTG9fQpV8BK1dUYkI4GIh8sKR0FkA88jFy8hqRfqXMz9c1mQszhxs00BSGg&usqp=CAU");*/
        }
    </style>
    
````

![](https://i.imgur.com/zR4ToHL.jpg)


![](https://i.imgur.com/Cez7lLj.png)

![](https://i.imgur.com/AMQJHYT.png)



看看樣子
body裡面註解是 <!-- -->
css註解 /* */
js註解是 //

![](https://i.imgur.com/dcNqXCb.png)



---

首頁頁面-->點進去 的 "細節頁面"--

![](https://i.imgur.com/k7Q82jq.png)

![](https://i.imgur.com/XqNpsSD.png)



"細節頁面"--程式碼- detail.php

````

<!DOCTYPE html>
<html lang="zh-Hant-TW">

<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>細節頁面</title>
</head>

<body>
    <?php include_once("menu.php") //掛選單 
    ?>
    <h1>細節頁面</h1>
    <?php
    include_once('connSQL.php');
    //連線資料庫

    $selectSQL = "SELECT * FROM  gbook WHERE gid = '$_GET[id]'";
    //來一段SQL的SELECT語法吧

    $myData = $myconnect->query($selectSQL);
    //執行上面那段SQL語法並將所得資料放進 $myData

    if ($myData->num_rows > 0) {
        //有資料筆數大於0時才執行
        $row = $myData->fetch_assoc();
        //將陣列資料中的Key值設定為該欄位的欄位名稱，並依序放進$row中   
        echo "發表人" . $row["gbook_poser"] . "<br>";
        echo "主題類型" . $row["gbook_kind"] . "<br>";
        echo "發表主題" . $row["gbook_title"] . "<br>";
        echo "發表內容" . $row["gbook_msg"] . "<br>";
        echo "發表時間" . $row["gbook_date"] . "<br>";
    } else {
        //沒有資料時顯示
        echo '沒有資料';
    }

    ?>
</body>

</html>

````

首頁頁面-

修改---增加語法--

````
echo "發表時間".$row["gbook_date"] . " | ";
            echo "<a href=detail.php?id=$row[gid]> $row[gbook_title] </a>";
            echo "<hr>";
        }

````

看看樣子-

![](https://i.imgur.com/W9xlGf3.png)

首頁頁面- 程式碼--

````

<!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>我是首頁</title>
    
    
    <style>
        body{
           background-color: 	#FF69B4;
            /*background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcX16rXjwPiTG9fQpV8BK1dUYkI4GIh8sKR0FkA88jFy8hqRfqXMz9c1mQszhxs00BSGg&usqp=CAU");*/
        }
    </style>
</head>
<body>
<?php include_once("menu.php") //掛選單 ?>
    <h1>首頁</h1>
    <?php
    include_once('connSQL.php');
    //連線資料庫

    $selectSQL = "SELECT * FROM  gbook";
    //來一段SQL的SELECT語法吧

    $myData = $myconnect->query($selectSQL);
    //執行上面那段SQL語法並將所得資料放進 $myData



    if ($myData->num_rows > 0) {
        //有資料筆數大於0時才執行
        while ($row = $myData->fetch_assoc()) {
            //將陣列資料中的Key值設定為該欄位的欄位名稱，並依序放進$row中   
            echo "發表時間".$row["gbook_date"] . " | ";
            echo "<a href=detail.php?id=$row[gid]> $row[gbook_title] </a>";
            echo "<hr>";
        }
    } else {
        //沒有資料時顯示
        echo '沒有資料';
    }
    ?>
</body>
</html>

````


---

後面會先上傳-


Cpanel URL: http://cpanel.yabi.me/
![](https://i.imgur.com/9QRH7YK.png)

看到結果網址-
Your URL: http://jzs2home.yabi.me or http://www.jzs2home.yabi.me

![](https://i.imgur.com/AvLNHNi.png)


---
匯出資料庫-20220416 只能上傳
![](https://i.imgur.com/JNjD0JZ.png)

Cpanel URL: http://cpanel.yabi.me/

![](https://i.imgur.com/1iLPxV5.png)
![](https://i.imgur.com/OyuHgbN.png)

都看不到 --申請另外一個
---
https://filemanager.ai/new/#

CODE 要壓成 ZIP檔再上傳 /或者用 全選 也可以

![](https://i.imgur.com/6n7aK45.png)


![](https://i.imgur.com/ZrDB9LP.jpg)

![](https://i.imgur.com/ghVmcnD.jpg)

![](https://i.imgur.com/4sjs7vG.jpg)

![](https://i.imgur.com/qaiiPbq.jpg)

![](https://i.imgur.com/9SDQTTj.jpg)

![](https://i.imgur.com/TfvcAMz.jpg)

![](https://i.imgur.com/VSTjutw.jpg)

-------------------

![](https://i.imgur.com/rKYf4wz.png)
修改---

![](https://i.imgur.com/Ve57HwU.png)

依序改下來--

![](https://i.imgur.com/HqRsOF9.png)

![](https://i.imgur.com/ctXw98C.png)

![](https://i.imgur.com/C8HcG11.png)


````
 $dbhost = 'localhost:3307';
    //資料庫主機位置(大部份都是localhost)

    $dbuser = 'root';
    //資料庫使用者 登入帳號(xampp預設是root最高權限登入)

    $dbpw = '';
    //資料庫使用者 登入密碼(xampp預設是密碼是空的)

    $database = 'my_gbook';
    //資料庫名稱

````

再來就是 全世界都可以到您的網域去看到了--

Your URL: http://jzs2home.byethost15.com or http://www.jzs2home.byethost15.com

---
建議免費主機申請:infinityfree比較容易申請,lionfree要等版審核通過

--20220416 都不能

同學做的超讚-http://www.myphp.purple.nuxmax.com/index.php



---

頁數- 就是 新增 "下一頁"

````



````



---

管理權線的設置-

資料庫 新增- USER




---
再來到CODE 新增--要有2個檔 一個是 login.php+一個是 login2.php

````

````



---
![](https://i.imgur.com/Sh329SL.png)

http://jzs2home.byethost15.com/gbook_add.php

