写给零基础的小白 包学包会
前期准备:
MAMP 用于一键创建可运行的环境
Phpstorm IDE,所有代码都在这上面编写
Chrome 推荐浏览器，主要用于测试，鼠标右键的检查的功能很强大
从左到右依次 chrome phpstorm mamp
原理
-
index.html显示输入框的页面 -
end.php处理信息的后台页面
Step 1| index.html
- 通过
phpshorm创建一个工程，文件夹下新建html file
在Test文件夹下新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Serch Page</title>
</head>
<body>
<form method="get" action="end.php" >
<label>请输入你的学号:</label>
</br>
<input type="text" name="studentId">
<button type="submit">点击查询</button>
</form>
</body>
</html>
- 这就是整个
index.html的代码,仅用到 HTML 的知识-
intput标签表示输入学号的输入框，name=studentId表示输入的值将赋值给studentId -
form标签 中的method="get"表示等会传递studentId的方式为GET,于此对应的另一种方式是POST，两者异同稍作分析
-
-
form标签 中的action="end.php"表示将值传递给 同一路径下 的end.php页面
Step 2 | end.php
- 开始之前 需要运行下载好的
MAMP
运行MAMP 注意右上角的 server 要点亮
-
在自动打开的（或者点击 Open web paga）的页面中
phpmyadmin将会作为稍后使用的本地 数据库，先放在
跳转页 在文件夹下新建
php file,生成end.php,可先输入以下代码测验
<?php
$studentId = $_GET['studentId']; // $变量名 表示新建php变量
echo "你的输入是: ".$studentId ; // echo 表示输出
?>
- 取到从index.html传来的值并赋给新建的变量
$studentId -
加引号的字符串和$studentId两者间用.连起来 - PHP 每句话结尾要加
；
Step 3 | 先小测下
- 双击
index.html文件
将鼠标移到右上角，会出现浏览器图标，点击
在弹出的浏览器窗口的输入框中随意输入一串数字
- 点击确定随即跳转，可以看到地址栏中 studentId 即 输入框的
name属性, 123456 即刚输入的值
成功显示 !
Step 4 | 与数据库交互之-创建数据
- 在之前我们需要在数据库中先创建数据，打开刚刚弹出网页中的
phpmyadmin, 我们先新建一个database取名 testdb
- 在新建的
database中新建一个table取名table1
- 创建
table时需要声明字段，我们声明两个字段 : id 用于存取 studentId , name 用于存储对应的名字，两个字段的 type 都可设置为 Varchar ,且有长度。这里的 Collation 为编码方式，采用UTF-8。
点击 Go ,一张 Table 就创建好啦 ! - 现在表格里是空的，我们需要向里面添加 记录 ，可以运行一条
SQL语句，相信这条语句很容易理解，稍后可以详细讲讲SQL
INSERT INTO `table1`(`id`, `name`) VALUES (12345,'Mars')
一条记录就诞生啦 ！
Step 5 | 与数据库交互之-获取数据
- 打开
end.php文件，添加下面几行代码
$mysql = new mysqli('localhost','root','root','testdb');
创建到数据库的连接，参数分别为 host , user , password , database
$result = $mysql->query("SELECT * FROM table1 WHERE id = '$studentId' ");
执行一条 query 语句 ，语句的内容为 从 table1 中选取 id 值等于 $studentId 的记录 ，并赋值给变量 $result
$resultRow = $result->fetch_array(); echo 'your name :'.$resultRow['name'];
将刚刚得到的记录转换成数组的形式 , 那么 $resultRow['name'] 就是得到的名字啦，并输出。
- 测试 ： 从
index.html中的输入框开始,输入学号 12345 ，提交 ，页面跳转 ， 就会得到如下显示
写在最后
相信安装这样一个流程走下来，对这个简易的查询系统的实现的能有个大体的理解了。麻雀虽小，但五脏俱全，后面复杂的功能都是基于这套流程的。前面的步骤以及代码，最好过一遍。关于 html , php , mysql 的语法，不理解都没有关系，后面会有详细的讲解以及拓展，打好基础，后面的都简单的。
