DAY5-PHP這是什麼老東西

2021 iThome 鐵人賽

DAY 5

Modern Web

1995到2021，php到react網站開發歷程系列第 5 篇

13th鐵人賽 php html

Cooksuhr

團隊Obit0 Studio

2021-09-17 08:50:25

1169 瀏覽

前言：

PHP(Hypertext Preprocessor)作為網頁開發的先驅，可是不知道是因為這個名子很有上世紀的美感或是已經太廣泛被使用十幾年，導致大家都覺得這已經是一個很老的東西了，其實比起Python(1991)，php還是年輕了一點喔！(1995)

雖然現在已經有很多其他很好用的開發工具(像是Javascript, react)，但我覺得php還是有它無可取代的地方，像是網頁運作的架構等，使用php來寫其實都非常直觀，所以這邊還是寫一篇大略介紹一下php，相信這樣對於之後的javascript、react會更好理解。

這裡也非常推薦大家去看看關於php發明者的訪談：

https://www.youtube.com/watch?v=0GyTwlqcugw

目標：

今天我想使用php來做一些動態生成的東西，順便介紹一下php本身和html是如何互動的，之後我打算再更進一步介紹php和資料庫的連動，以及一些session和cookies的使用方法！

那要達成今天的目標的話，我認為可以就先前的個人網頁來增加一個簡易的留言板，讓自己可以看到來訪者的留言也不錯吧！

Coding!

首先先讓我們把昨天的index.html直接改成index.php，然後記得在view→syntax裡改成php。

改好了之後讓我們新增下面這串tag在social media這個div的下面。

<form>
<textarea name="name" placeholder="稱呼：" 
                    style="margin-top:2%; width: 30%; height: 25%; border-radius: 5px;">
</textarea><br />
                    
<textarea name="email" placeholder="Email：" 
                    style="margin-top:2%; width: 60%; height: 25%; border-radius: 5px;">
</textarea>
                    
<textarea name="comments" placeholder="有什麼要對我說的嗎~" 
                    style="margin-top:2%; width: 100%; height: 50%; border-radius: 5px;">
</textarea>
<input type="submit" name="submit" value="submit">
</form>

這個時候網頁應該長這樣：

那我希望可以把來留言的人的資訊直接顯示在留言區的下面，這時候就要用到PHP了！

而呼叫php的方法其實非常簡單，就是使用<?php?>這個標籤，而這個標籤可以用在html的任何一個位置裡。

接下來我們可以在原本的檔案加上一串PHP的指令，這時候index.php應該會長這樣：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>個人網頁</title>
    <link rel="stylesheet" href="style.css">

</head>
<body >

<div class="wrapper">
    <div class="left">
        <img src="./pic/cat.jpg" 
        alt="user" width="100">
        <h4>Sen Chao</h4>
    </div>
    <div class="right">

        <div class="intro">
            <h3>個人簡介</h3>
            <ul>
              <li><p>我是阿森，目前就讀臺灣大學工程科學與海洋工程學系大三。<br/>聽到這裡，
						你可能會好奇，工程科學乾寫網頁什麼事？嗯......的確是完全沒有關聯！
						<strike>那我們30天就到此結束~謝謝各位~~</strike><br/>
            沒有啦！正因為我也不是本科出身的，我相信我可以透過更大眾的說法來和各位分享我的所學，
						也希望大家可以真正學到一些技能，</br>並在這30天後有能創作出自己網頁的能力！</br>
						</p></li>

          </ul>
      </div>

        <div class="info">
            <h3>個人資訊</h3>
            <div class="info_data">
                 <div class="data">
                    <h4>Email</h4>
                    <p>senchao0930@gmail.com</p>
                 </div>
                 <div class="data">
                   <h4>手機</h4>
                    <p>09--------</p>
                </div>
                <div class="data">
                   <h4>github</h4>
                    <p>Cooksuhr</p>
                </div>
            </div>
        </div>

      
        <div class="social_media">
            <h3>社交媒體</h3>
            <ul>
              <li><a href="#">Facebook</a></li>

              <li><a href="#">Instgram</a></li>

              <li><a href="#">My Blog</a></li>
          </ul>
      </div>

      <div class="info">
            <h3>留言板</h3>
            <div class="info_data">
                 <div class="data">
                    <form>
                    <textarea name="name" placeholder="稱呼：" 
                    style="margin-top:2%; width: 30%; height: 20%; border-radius: 5px; padding-top: 0% ; font-size: 16px;"></textarea><br />
                    <textarea name="email" placeholder="Email：" 
                    style="margin-top:2%; width: 60%; height: 25%; border-radius: 5px; font-size: 16px;"></textarea>
                    <textarea name="comments" placeholder="有什麼要對我說的嗎~" 
                    style="margin-top:2%; width: 100%; height: 50%; border-radius: 5px; font-size: 16px;"></textarea>
                    <input type="submit" name="submit" value="送出" style="height: 25px; margin-top:2%;">
                    </form>
                 </div>
                 
            </div>
            <pre>
<?php
$name = "匿名";
$email = "匿名";

if( isset($_GET['comments']) && $_GET['comments']!='' ){

			$comment = htmlentities($_GET['comments']);

			    if( isset($_GET['name']) && $_GET['name']!='' ){
						$name = htmlentities($_GET['name']);}
			    if( isset($_GET['email']) && $_GET['email']!='' ){
						$email = htmlentities($_GET['email']);}

    echo $name ;
    echo "(Email:".$email.")";
    echo("<br/>");
    echo "留言：".$comment;
}

?>
</pre>
        </div>
    </div>
</div>

</body>
</html>

這時候我們的網頁會變成這樣：

在這個網頁中，PHP的作用就是他會去抓那些input中的text，再把這些變數儲存在一個叫做GET的地方，我們要取用這些變數就是使用$_GET[""]來呼叫，而其實php支援的方法不只有GET，還有像是POST等等的方法，但GET跟POST是最常用的，而這裡就先介紹GET這個方法，POST會流到之後和資料庫連線一起說。

要設定使用哪一種方法就要在 tag裡面加上mothed="POST"，這裡因為他預設是使用GET方法，所以上面的code就沒有特別寫。

這裡在特別提到一下，在寫這種input或是textarea的時候要特別注意，當把這些變數存到php變數裡的時候，要加上htmlentities()來把他包裹住，不然之後echo的時候很可能會受到html侵入攻擊(HTML Injeciton Attack)，也就是透過輸入html tag或php指令來擾亂你的網頁，詳細的例子網路上有很多，一定要特別注意！

接下來現在的網站如果留言就會像下面這樣顯示出來：