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的使用方法!
那要达成今天的目标的话,我认为可以就先前的个人网页来增加一个简易的留言板,让自己可以看到来访者的留言也不错吧!
首先先让我们把昨天的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>[email protected]</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指令来扰乱你的网页,详细的例子网路上有很多,一定要特别注意!
接下来现在的网站如果留言就会像下面这样显示出来:
那今天的进度就算完成啦!明天再来介绍关於php和资料库连线的方法。
今天我们在原先的个人网页上加入了留言版的功能,只是还没有非常完善,如果重新整理原先的留言就会不见,同时别人也看不到自己的留言,这都是因为我们少了一个可以储存这些讯息的地方,所以接下来就要来讨论怎麽连上资料库,只要资讯可以储存,我们就可以完成这一个留言版的功能了!
那就明天见!
今天来介绍的是如何透过 NiFi 来与 Athena 和 Redshift 来取得或写入资料,其实两...
昨天我们终於把BeautifulSoup这碗汤给喝的乾乾净净,一滴不剩 现在终於要来上我们的主餐啦,...
今天来分享一些简易的快捷键,因为自己本身是从 adobe 相关软件摸熟之後,才开始接触 figma ...
TiKV Server是负责保存数据资料,采key-value模式储存,且key的排列是二进制有序的...
前言 关於介绍 MVC、MVP、MVVM 的文章, 网络上随便搜索都可以找到超多。 MVC、MVP、...