导语：现在网络上有很多种代码架构、设计模式、开拓框架。它们的事理都是什么呢？是怎么发展到现在的这个样子呢？在有这些东西之前，web编程是若何的呢？那时候的程序员都是怎么开拓的呢？本文不能完备回答这些问题，只是想从一些基本的知识点，来侧写出冰山的一角。
链接文章：
1、php根本知识
2、web客户端编程根本-HTML、CSS
3、web客户端编程根本-JavaScript
4、数据库根本条记-SQL
文章所说的代码和sql文件：
http://thumb.liyulinbill.com/upload/attachment/saas_mTiikMvYZq_php_html.rar
一、基本环境搭建
推举直策应用phpstudy，软件安装好后，直接启动。
代理做事器Apache和nginx哪一个都可以，本文不涉及。
php版本5或者7 都可以，本文不涉及。
mysql 能启动就行，本文涉及。
把稳：phpstudy官网已经出到8.0，和以往的版本UI差别有点大，以是建议还是找以前的版本利用。
以前版本UI如下图所示：
phpstudy默认的网站根目录，就在安装文件夹下面的WWW目录里面，
可以在软件 “其它选项菜单”>”phpStudy设置”>”端口常规设置” 里面设置网站根目录。
然后在WWW目录下新建一个phpinfo.php文件，写入代码
<?php phpinfo(); ?>
在浏览器中输入地址：http://localhost/phpinfo.php
涌现php的版本信息，就解释基本环境已经配置好了，如图所示：
设置mysql密码
phpstudy安装好后，mysql启动默认用户root，密码root。mysql密码可以在phpstudy软件 “其它选项菜单”>”phpStudy设置”>”端口常规设置”中，MySQL修正密码项修正。
二、静态数据页面展示
在www目录下创建一个index.php文件，
如果利用的是phpstorm编辑器，先输入一个英文!号，然后按一下tab键，则可以天生以下html代码
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body></body></html>
没有的话，自己手写也是不错的体验。
一样平常情形，建议在head标签里面引用css文件和<style></style>内联css代码，在</html>里面，body标签表面引用js文件和<script></script>内联js代码。
然后在代码中，任何地方都可以利用<?php ?>标签来插入php代码。这里可以自行考试测验。
例如后文提及的detail.php:
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <?php $data = $_GET; if(!isset($data['id'])||!$data['id']){ var_dump('404');die; } //连接mysql数据库 $con = mysql_connect('localhost','root','liyulin'); //选择数据库 mysql_select_db('test',$con); ?> <title>文章详情页面</title> <style> /css代码/ input[name='comment']{padding: 5px;height: 35px;line-height: 35px;font-size: 16px;border-radius: 8px;} .comment-btn{background-color: red;color: #fff;border: none;cursor: pointer;width: 80px;padding: 12px;text-align: center;border-radius: 5px;} </style></head><body><?php$sql = "SELECT FROM article";$result = mysql_query($sql);$detail = mysql_fetch_object($result);?><h1> <?php echo $detail->title; ?></h1><div class="content"> <?php echo $detail->content;?></div><div class="back"> <a href="/index.php?page=1">返回列表页面</a></div><div class="comment"> <h4>我要评论</h4> <p> <input type="text" placeholder="请输入要评论的内容" name="comment" id="comment"> <input type="hidden" value="<?php echo $data['id']?>" name="id" id="article_id"> <div onclick="comment()" class="comment-btn">确认评论</div> </p></div><?phpmysql_close($con);?></body><script> function comment(){ ... }</script></html>
1、什么是navicate
Navicat是一套快速、可靠并价格相称便宜的数据库管理工具，专为简化数据库的管理及降落系统管理本钱而设。它的设计符合数据库管理员、开拓职员及中小企业的须要。Navicat 因此直觉化的图形用户界面而建的，让你可以以安全并且大略的办法创建、组织、访问并共用信息。
2、创建数据库连接
在导航栏上，选择 “连接”>”MySQL”，涌现连接面板
连接名：本地 //这个自定义名称
主机：localhost //连接本地的地址，也可以填127.0.0.1 本地回环地址
端口: 3306 //没有分外需求，默认都是3306
用户名: root //mysql的登任命户名
密码：root //mysql的root用户的密码
连接成功，效果如图所示：
3、创建数据库
命令行：ALTER DATABASE `test` CHARACTER SET 'utf8' COLLATE 'utf8_general_ci';
navicat操作：点击创建好的连接，右键选择“新建数据库”
数据库名称: test //要操作的数据库名称
字符集：utf8 //数据库字符集，后文涉及到中文，这里建议利用utf8
排序规则: utf8_general_ci
如图：
4、创建数据库表
命令行:CREATE TABLE `test`.`article` ( `id` int(11) NOT NULL, `title` varchar(255) NULL, `content` varchar(255) NULL, PRIMARY KEY (`id`)) COMMENT = '文章表';
navicat操作: 选择数据库，右键点击“表”，选择新建表，
名：这是数据库表字段的名称
类型：表字段的数据类型
长度：不同类型的长度范围是不同的。
小数点：针对double、decimal、float利用，其它建议默认0
不是null：是否许可为空
键：是否为主键
注释：对该表字段的注释
如图：
现在，有了mysql数据库，浏览器也能访问localhost了。于是就可以做一个最最大略的文章展示了。常见的文章展示，分为列表页面展示和详情页面展示。首先，要把数据从数据库里面取出来，再展示到html页面。
四、php自带mysql操作函数
1、连接数据库
mysql_connect(servername,username,password);
servername 可选。规定要连接的做事器。默认是 "localhost:3306"。
username 可选。规定登录所利用的用户名。默认值是拥有做事器进程的用户的名称。
password 可选。规定登录所用的密码。默认是 ""。
2、关闭数据库连接
mysql_close($con); //$con 连接变量
3、选择数据库
mysql_select_db(“数据库名称”, $con);
4、实行数据库语句
mysql_query(“DDL 或 DML”);
5、结果集处理
mysql_fetch_array() 函数从结果集中取得一行作为关联数组，或数字数组，或二者兼有
返回根据从结果集取得的行天生的数组，如果没有更多行则返回 false。
mysql_fetch_object() 函数从结果集（记录集）中取得一行作为工具。
mysql_affected_rows() 函数返回前一次 MySQL 操作所影响的记录行数
根据上述几个大略函数，可得知php把数据从数据库取出来，再显示到web页面上的流程：
连接数据库连接->选择数据库->实行数据库语句->获取结果集->把结果集显示到web页面->关闭数据库
五、文章列表页面
数据库获取数据代码
//连接mysql数据库$con = mysql_connect('localhost','root','liyulin'); if(!$con){ die('Could not connect: ' . mysql_error($con));}//选择数据库mysql_select_db('test',$con);//实行查询$result = mysql_query(" SELECT FROM article");
处理数据库结果
```
//处理查询结果
while($row = mysql_fetch_array($result))
{
echo "<div class='lists'>";
echo "<h4>";
echo $row['title'];
echo "</h4>";
echo "<p>";
echo $row['content'];
echo "</p>";
echo "</div>";
}
```
把代码添加到index.php 文件中，并访问 http://localhost/index.php
基本列表页效果，如图所示：
现在列表页出来了，数据量少，一次性展示出来没问题，但是当数据量多，有成千上万条时，一起查出来就不合理了。这时，sql 中有一个TOP 子句，mysql也便是limit 子句，可以限定一次查询条数。这种需求功能，在web编程中，就叫做分页功能。
根据上述需求，须要修正一条实行查询语句：$result = mysql_query(" SELECT FROM article");
把 SELECT FROM article 加上 limit “开始数”,”长度”：select from article limit 2,2;
那么开始数和长度哪里来的？
这时每页数长度可以默认2条或者10条，而页数可以大略的直接从 url地址get传参进来：
http://localhost/index.php?page=1
最糙的分页功能就出来了：
//获取传参 $data = $_GET; //$_POST, $_REQUEST; //实行查询 $size = 2; //每页条数 if(isset($data['page'])&&$data['page']){ $start = ($data['page']-1)$size; $sql = "SELECT FROM article limit ".$start.",".$size; } else{ $sql = "SELECT FROM article"; }
翻页按钮:
<div class="pages"> <a href="/index.php?page=1">第一页</a> <a href="/index.php?page=2">第二页</a> </div>
如图：
列表页点击进入详情页面
html页面跳转的办法紧张有四种：
1、meta 设置
2、a标签href属性
3、window.location.href
4、window.history.go(-1)；或者window.history.back(-1)
列表页面进入详情页方法1和4都不得当。方法2是比较常用的，这里就利用方法3：
在JavaScript代码中实现 location.href
<script> function jump(id) { location.href = '/detail.php?id='+id; }</script>
然后，我们创造WWW目录下还没有detail.php 这个文件，以是须要去建一个。
六、文章详情页
数据库连接和数据获取、展示都和列表页差不多，就不累述了。
目前列表页和详情页都有了，下面我们就给文章详情页面添加一个更糙的评论功能吧。
要有的东西：
0、既然是评论功能，得有用户吧 -- 匿名评论，可以不要用户，那么这步就省略了。
1、既然是评论功能，得有地方输入吧：
<input type="text" placeholder="请输入要评论的内容" name="comment" id="comment">
2、既然是评论功能，得知道评论的是哪篇文章吧：
<input type="hidden" value="<?php echo $data['id']?>" name="id" id="article_id">
3、既然是评论功能，评论写好了，得提交到哪里去吧：
<div onclick="comment()" class="comment-btn">确认评论</div>
4、提交到哪里呢？直接写一个api.php 文件
5、这个api.php 要做什么呢？连接数据库，把评论内容存到数据库里面。
INSERT INTO `comment` (article_id,content) VALUES (".$data['id'].",'".$data['comment']."');
目前彷佛没有 comment 的这张表呢？？ 用navicat 新建一个吧。
6、得见告用户评论成功了： alert(“评论成功！
”);
那么就开始写代码了。
信息提交，我们可以利用form表单或者js实现
这里就利用js 的XMLHttpRequest，来实现POST的异步信息提交
<div class="comment"> <h4>我要评论</h4> <p><!-- <form action="api.php" method="post">--><!-- </form>--> <input type="text" placeholder="请输入要评论的内容" name="comment" id="comment"> <input type="hidden" value="<?php echo $data['id']?>" name="id" id="article_id"> <div onclick="comment()" class="comment-btn">确认评论</div> </p></div><script> function comment(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.open('POST','/api.php',true); xmlHttp.onreadystatechange = function () { if(this.readyState==4 && this.status == 200){ alert('评论成功！
'); } }; var c = document.getElementById('comment').value; var id = document.getElementById('article_id').value; //要求头部 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var sendStr = "id="+id+"&comment="+c; xmlHttp.send(sendStr); }</script>
api.php 文件部分代码
<?php$data = $_REQUEST;.....//数据库插入$sql = "INSERT INTO `comment` (article_id,content) VALUES (".$data['id'].",'".$data['comment']."'); ";$result = mysql_query($sql);....echo json_encode(array('status'=>200,'data'=>$data));?>
