导语：现在网络上有很多种代码架构、设计模式、开发框架。它们的原理都是什么呢？是怎么发展到现在的这个样子呢？在有这些东西之前，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>
<?php
mysql_close($con);
?>
</body>
<script>
????function comment(){
??????...
????}
</script>
</html>
三、使用navicate 管理Mysql
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));
?>