电子书：《零基础学PHP》全彩版附赠手册
1327内容简介：
实战01趣味图片生成器
实战01趣味图片生成器
学习小贴士:建议学完第1篇知识后进行本实战
1.1我们要做什么
随着微 信朋友圈的ri益火爆,朋友圈晒图已成为越来越多的人娱乐放松的方式。本
实战将开发一个“趣味图片生成器”,生成一张有趣的图片,发布到朋友圈,让你成为
“霸屏小达人”。
本实例使用HTML5响应式设计(兼容手机),利用PHP强大的图形图像处理技
术一GD库,开发一个“趣味图片生成器”。运行效果如图1.1所示
拉萨站
”图号
图1.1趣味图片生成器运行效果图
1.2可以这样来思考
趣味图片生成器的实现流程如图1.2所示
·“
添加公共
编写实现
提交表单
库函数
Wen=
图1.2趣味图片生成器实现流程图
零基础学P田P小白实战手册
1.3放手去做吧
131首贡设计
首先创建一个项目,命名为“ Fun Pic”。接下来创建首页 index. php文件。为实现响应
式
效果,需使用FrozenUI(网址:https://frozenuigithub.io)框架设计首页样式。将“光盘
小白实战项目01 Unpick”目录下的 Public文件夹复制到根目录下,此时目录结构如图
Code Refactor Run
图1.3新增 Public文件后的目录结构
现在编写首页 index. php文件,具体代码如下:
<代码位置:光盘小白实战项目01 Fun Piclindex php>
oI <IDOCTYPE html
2046
03 <head
meta charset= UTF-8/>
meta name=\"viewport content= width=device-width, initial-scale=1.0,
minimum-scale=1. 0, maximum-scale=1.0, user-scalable=no/>
07< title>趣味图片生成器</tite
<link type text/css rel- stylesheet href= Public/css/frozen, css /
link type= text/css rel= stylesheet href Public/css/style. css/
10<head
I1<body>
12 <header class. ui-header ui-header-positive ui-border-b>
h1>趣味图片生成器</h1>
14 </header
15 <div class= container style= padding: 60px 0;>
678
<ul classe ul-list ui.list-link ui-border-tb>
li class= ui-border-t
Click- javascript: window location. hrefs Train/index.php>
<div class= ui-li
span style= background-image: url(train/icon. pg)></span>
实战01趣味图片生成器
<div class ul-list-info>
234567890
4c1ass=ui- nowrap\">火车票生成器(自定义所有信息)</h4
p class\" ui-nowrap\">踏上火车奔向远方</p
<!省略其余模块代码
/u1
31</htm1
上述代码中,首先在<head标签内引入 frozen.css文件,然后使用u>标签下的
标签分别包含每一个模块。在浏览器中输入网址“ localhost/Fun Pic/index,php”,首页运
效果如图14所示
巴径毛机生
图1.4首页运行效果
口说明:首页中各个模块之间是并列关系,由于还没有编写单个模块代码,所以首页并没有
显示模块图片。
1.3.2创建头部和底部文件
由于每个模块的<head>标签和< footer>标签内容相同,为减少代码量,可以将公
共部分写入一个 Common目录下。然后,在每个模块中分别引入即可。将“光盘小白
实战项目01 UnpIck”目录下的 Common文件夹导入到根目录下,此时目录结构如图
1.5所示
基础学PP·小白实战手册
Ee Edit Yew Navigate Sode Befsctor Ru
图1.5导入 Common文件夹后的目录结构
1.3.3创建表单页面
下面开始编写“火车票生成器”的表单页面。具体步骤如下
(1)在根目录下创建 Train文件夹,作为“火车票生成器”模块。然后,将“光盘
白实战项目1 Fun Pic\\Train”目录下的图片资源“ Icon png”和“ old picture. jpg”复制
到 Train目录下。
(2)在Tain目录下创建 edit form. htm表单页面,表单内容包括“QiDian站”“终点
站”“车次”“价格”“姓名”“身份证号”。具体代码如下
代码位置:光盘小白实战项目01 Fun Pic\\Trainledit form htm
01 <header class= ui-header ui-header-positive ui-border-b
h1>火车票生成器(自定义所有信息)</h1
03 </header>
04 <div class= wrapper>
img
icon. pg style= margin: 15p
<div class= ui-fe
<form action=>
6678o01234561890
<div class= ui-form-item ui-border.b>
label>QiDian站</ label.
input type= text\"name\" start\" placeholder如广州
/din
<div class= ui-form-item ui-border-b>
1abe1>终点站</ label
input type= text'name= end placeholder如北京上海杭州>
<div class= ui-form-item ui-borderb
1abel>车次</1abe1
input type= text name=train num placeholder=u1314>
/div>
<div class= ui-form-item ui-border-b
实战01趣味图片生成器
1abe1>价格</abe1
cinput type= text name. price placeholder=n500>
</div>
<div class= ui-form-item ui-border-b
1abel>姓名</ label>
input types text\"name= name placeholder=”如某某某”>
456789012343678
</div>
placeholders”如44092319*383011
<div class= ui-btn-wrap
<button class=ui-btn-lg ui-btn-primary'>WE</button
(3)在 Train目录下创建 index. php文件,作为“火车票生成器”的入口文件。通过访
问该文件,即可访问表单页面,具体代码如下
<代码位置:光盘小白实战项目01 Fun PiclTrain\\index. php
02040
include,/Common/header. html
//引入头留
include 'edit form. html
/引入表单
include,,/Common/footer. html
//引入底部
在浏览器中输入网址“ localhost/ FunPic/Train/index. php”,运行结果如图1.6所
图1.6火车票生成器表单页面
免费下载地址：
http://pan.qqq0.com/file/488067-425783609
页:
[1]