0060 PHP代码嵌入到HTML网页当中

前面2节课全部都是之前写过的程序重新用PHP编程语言来实现。

这节课开始学习如何使用PHP结合HTML网页来实现具体的动态数据网页。

学哥计划做一个学生分数管理功能的网页,首先来做一个一览查询页面。

查询页面上可以输入一些查询条件,例如学生姓名或者科目等信息,点击查询按钮之后,下面显示相应的查询结果,查询结果使用表格的形式来显示。

PHP嵌入HTML的方式

前面几节课都是纯粹的PHP代码,然后通过php命令执行php文件代码的方式来运行PHP代码。

在这一章的第一节课里面,其实已经学习过将PHP代码嵌入HTML网页中的方式,来复习一下:

<html>

<body>

<?php

echo "Hello World";

?>

</body>

</html>

可以看到,虽然这个文件名最后保存为helloworld.php,但是其本质还是一个html规范格式文件,因为最终这个文件的内容是要显示在浏览器当中的,所以起本质仍然是一个html规范文件。

PHP代码的作用,仅仅是通过动态编程语言生成需要的数据或者是显示格式。

可以这样理解,PHP代码在服务器端运行,运行结束后的文件内容是HTML内容。这样的好处不言而喻,可以根据需求对每一个客户端浏览器生成完全不同的网站内容。

上面的代码,其实也可以完全用PHP代码来实现:

<?php

echo "<html>";

echo "<body>";

echo "Hello World";

echo "</body>";

echo "</html>";

?>

这段代码运行起来的结果,和上面的一段代码运行的结果是一模一样的。

这也就是说,在PHP代码里面,不在<?php ?>这组开始和结束标签里面的内容,其实就是默认相当于使用echo输出的方式返回给浏览器的。这也是PHP的一种默认的代码规范。

除了echo函数外,使用其他的标准输出函数,也是类似于echo一样,将输出内容返回到浏览器的。例如print函数、print_r函数、var_dump函数等等。只不过输出的内容如果不符合html规范的话,可能显示在浏览器里面就不是期望的样子了。

编写一览查询页面

创建2个文件studentlist.php文件和student.css文件。

参照之前的index.html和index.css样式,编写html文件和显示样式。

先通过div分成上下3个区域,最上面显示一个标题“学生信息查询”,然后下面2个div分别显示查询条件和查询按钮。

查询条件如下:姓名(文本输入)/性别(单选)/科目(多选)/分数段(下拉框选择)。

下面的区域显示查询一览结果,使用table显示,第一行是表头,显示下列数据:

ID/姓名/性别/科目/分数。

修改studentlist.php文件:

image

修改student.css文件:

image

将这2个文件部署到本地服务器的相应目录中,然后启动本地Web服务程序,然后通过浏览器访问这个php网页:

image

然后在下面一行的td里面编写显示查询一览结果的table。

显示下列数据:ID/姓名/性别/科目/分数。

第一行是表头,第二行是数据。表头和数据的显示样式可以不一样,以示区别。

修改studentlist.php文件:

image

修改student.css文件,新增下列代码:

image
image

刷新网页:

4-6-7.jpg

可以看到网页中显示了一个表格,内容是学生分数查询结果。

将数据行复制多行,并且让奇数行和偶数行显示不一样的底色,这样看起来更美观。

修改studentlist.php文件:

image

修改student.css文件,增加一个样式tdb:

image

刷新网页:

image

可以看到表格显示了多行数据,并且行之间有明显分隔。

使用PHP代码循环显示一个table的数据

通过编写静态html内容的方式,可以完成显示样式的编码。

然后将这里的多行显示内容修改为用PHP代码来动态生成。

首先将刚刚增加的4行数据行删除,只保留一行数据。

然后,在这个数据行的前面和后面分别增加PHP代码,将这行数据放入一个for循环当中,也就是让这行数据重复显示5次。

修改studentlist.php文件:

4-6-11.jpg

刷新网页:

image

可以看到,页面显示5行完全一模一样的数据。这就是PHP代码的威力。

如果要将5行变成100行,也只需要修改一个数字即可。而如果是纯粹的HTML代码,要重复100行的话,也要花很多时间进行复制粘贴。

如果要将奇数行和偶数行的显示变得不一样,可以这样修改:

首先设置一个用于显示样式是tda还是tdb的变量,名字为tds;

然后根据当前行是偶数行则赋予tds的值为tdb字符串;

然后在需要显示样式的地方,输出这个变量。这样循环当中,当变量$i变化时,对2求模的结果会是0或者1,也就是奇数还是偶数,这样变量tds的值就会变成tda或者tdb,最后输出的时候就会不一样了。

修改studentlist.php文件:

4-6-13.jpg

刷新网页:

image

如果要将这5行的ID和姓名显示的不一样,应该怎么处理呢?

一个简单的办法就是修改显示的内容为跟随当前循环变量来生成:

修改studentlist.php文件,同时调整代码的分行位置:

4-6-15.jpg

刷新网页:

image

可以看到,每一行的ID和名字都不一样了。

当然,在实际项目中,一般是不采用这样的方式的,一般来说,整个数据结果集肯定是一起返回到页面显示的地方,然后通过访问这个数据结果集来嵌入到HTML的table里面来进行显示的。

一般的方式是采用二维数组变量来保存数据结果集的。

增加一个变量$alldatas,然后内容是二维数据,外面一层是每一行的意思,里面一层用键和值来表示不同的字段数据。

然后显示循环内部,通过访问这个二维数组的某个键来获得对应的数据,并通过echo来输出到网页内容中。

修改studentlist.php文件:

image

刷新网页:

4-6-18.jpg

可以看到数据显示了5行,每一行的姓名都是按照数组变量中的值来进行显示。通过这样的方式,可以很方便的显示出后台数据。

但是有一个不正确的地方,那就是数据的行数长度为5,代码仍然是用for循环5次,加入数据的行数长度不是5,那么这里for循环就不正确了。应该改为foreach针对二维数组变量进行遍历循环,这样才能完全按照存储变量的数据来显示行数和内容。

修改循环方式和变量显示,同时将其他的字段都修改为按照这样的方式来显示。

修改studentlist.php文件:

image

刷新网页:

4-6-20.jpg

可以看到,所有的显示内容都是依赖于数组变量里面存储的值了。只要修改这个变量里面存储的数据,网页就会显示不同的内容了。

这就是动态网站的精髓之所在。

编写各个查询项目和查询按钮

接下来,编写上面的查询条件和查询按钮。

在3-4这一节当中,大致介绍了各种输入项的编写方式,来复习一下:

<input type="text">可以在网页上显示一个文本输入框。

<input type="radio">可以在网页上显示一个单选按钮。

<input type="checkbox">可以在网页上显示一个多选按钮。

<input type="submit">可以在网页上显示一个按钮。

使用select元素可以显示一个下拉框。

<select>

<option>选项1</option>

<option>选项2</option>

</select>

以上代码可以在网页中显示一个下拉框选项,里面有2个选择项目。

按照以上方式,在上面区域中增加下列查询条件和一个查询按钮。

姓名(文本输入)/性别(单选)/科目(多选)/分数段(下拉框选择)/查询按钮。

首先来规划一下这5个项目如何摆放在页面中。

打算将查询按钮放在最右侧,然后左边分成上下2行,上面一行分成3列,分别显示姓名和性别和分数段;

下面一行由于是科目多选,需要的长度比较长,因此下面一行占用3列宽度,这样正好利用table的合并单元格属性来实现。

首先,写好table的各个tr和td的分布,将边框显示出来,验证排版是否正确:

修改studentlist.php文件:

image

刷新网页看看效果:

4-6-22.jpg

然后,编写所有的查询条件和查询按钮:

修改studentlist.php文件:

image

修改student.css文件:

image

刷新网页看看效果:

4-6-25.jpg

可以看到,查询网页已经基本成型了,那么接下来就是实现点击查询按钮之后的功能,也就是根据输入不同的条件,返回不同的查询数据结果。

特别说明

这节课的内容非常关键,是编写动态网站的核心入门教程。由于这节课的内容用到了很多之前课程的相关内容,如果大家是碰巧第一次看到这篇文章的话,可能有很多不明白的地方,那么可能需要看看学哥之前写的文章,建议从0001这节课开始看,这样前后有连贯,才会更好的理解。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,386评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,939评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,851评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,953评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,971评论 5 369
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,784评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,126评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,765评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,148评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,479评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,080评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2 343

推荐阅读更多精彩内容

  • 个人学习批处理的初衷来源于实际工作;在某个迭代版本有个BS(安卓手游模拟器)大需求,从而在测试过程中就重复涉及到...
    Luckykailiu阅读 4,685评论 0 11
  • .bat脚本基本命令语法 目录 批处理的常见命令(未列举的命令还比较多,请查阅帮助信息) 1、REM 和 :: 2...
    庆庆庆庆庆阅读 8,043评论 1 19
  • 关于Mongodb的全面总结 MongoDB的内部构造《MongoDB The Definitive Guide》...
    中v中阅读 31,898评论 2 89
  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 5,719评论 0 10
  • 时间真是一块橡皮擦! 嗯,我今天要讲的就是我和我父亲之间的恩怨…… 我不知道我对他究竟是爱多一点还是恨更多一点,亲...
    Andola阅读 151评论 0 0