php真的挺好玩的!
先写出前台页面index.php:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 label{
8 width: 60px;
9 display: inline-block;
10 text-align: right;
11 margin: 0 10px 0 0;
12 }
13 @media screen and (min-width: 360px) and (max-width: 767px) {
14 .content-div{
15 width: 90%;
16 margin: 5% auto;
17 }
18 .form-ele{
19 width: 50%;
20 margin: auto;
21 }
22 .content-div h2.head-title{
23 text-align: center;
24 }
25 .form-ele p input[type="text"]{
26 width: 80%;
27 }
28 .f-messages{
29 width: 80%;
30 resize: none;
31 height: 100px;
32 padding: 10px;
33 box-sizing: border-box;
34 }
35 .submit-btn{
36 width: 90px;
37 height: 35px;
38 background: rgba(0,233,2,0.4);
39 border: none;
40 color: block;
41 font-size: 1.2em;
42 cursor: pointer;
43 -webkit-transition:background 0.5s;
44 -ms-transition:background 0.5s;
45 -o-transition:background 0.5s;
46 transition:background 0.5s;
47 }
48 .submit-btn:hover{
49 background: rgba(0,233,2,0.7);
50 }
51 }
52 @media screen and (min-width: 768px) and (max-width: 1199px){
53 .content-div{
54 width: 90%;
55 margin: 5% auto;
56 }
57 .form-ele{
58 width: 50%;
59 margin: auto;
60 }
61 .content-div h2.head-title{
62 text-align: center;
63 }
64 .form-ele p input[type="text"]{
65 width: 70%;
66 }
67 .f-messages{
68 width: 80%;
69 resize: none;
70 height: 100px;
71 padding: 10px;
72 box-sizing: border-box;
73 }
74 .submit-btn{
75 width: 90px;
76 height: 35px;
77 background: rgba(0,233,2,0.4);
78 border: none;
79 color: block;
80 font-size: 1.2em;
81 cursor: pointer;
82 -webkit-transition:background 0.5s;
83 -ms-transition:background 0.5s;
84 -o-transition:background 0.5s;
85 transition:background 0.5s;
86 }
87 .submit-btn:hover{
88 background: rgba(0,233,2,0.7);
89 }
90 }
91 @media screen and (min-width: 1200px) and (max-width: 1365px) {
92 .content-div{
93 width: 90%;
94 margin: 5% auto;
95 }
96 .form-ele{
97 width: 50%;
98 margin: auto;
99 }
100 .content-div h2.head-title{
101 text-align: center;
102 }
103 .form-ele p input[type="text"]{
104 width: 80%;
105 }
106 .f-messages{
107 width: 80%;
108 resize: none;
109 height: 100px;
110 padding: 10px;
111 box-sizing: border-box;
112 }
113 .submit-btn{
114 width: 90px;
115 height: 35px;
116 background: rgba(0,233,2,0.4);
117 border: none;
118 color: block;
119 font-size: 1.2em;
120 cursor: pointer;
121 -webkit-transition:background 0.5s;
122 -ms-transition:background 0.5s;
123 -o-transition:background 0.5s;
124 transition:background 0.5s;
125 }
126 .submit-btn:hover{
127 background: rgba(0,233,2,0.7);
128 }
129 }
130 @media screen and (min-width: 1366px) and (max-width: 1920px) {
131 .content-div{
132 width: 90%;
133 margin: 5% auto;
134 }
135 .form-ele{
136 width: 50%;
137 margin: auto;
138 }
139 .content-div h2.head-title{
140 text-align: center;
141 }
142 .form-ele p input[type="text"]{
143 width: 80%;
144 }
145 .f-messages{
146 width: 80%;
147 resize: none;
148 height: 100px;
149 padding: 10px;
150 box-sizing: border-box;
151 }
152 .submit-btn{
153 width: 90px;
154 height: 35px;
155 background: rgba(0,233,2,0.4);
156 border: none;
157 color: block;
158 font-size: 1.2em;
159 cursor: pointer;
160 -webkit-transition:background 0.5s;
161 -ms-transition:background 0.5s;
162 -o-transition:background 0.5s;
163 transition:background 0.5s;
164 }
165 .submit-btn:hover{
166 background: rgba(0,233,2,0.7);
167 }
168 }
169 </style>
170 </head>
171 <body>
172
173 <div class="content-div">
174 <h2 class="head-title">留言</h2>
175 <form action="add.php" method="post" class="form-ele">
176 <p>
177 <label for="names">姓名:</label><input id="names" type="text" name="names">
178 </p>
179 <p>
180 <label for="qq">QQ:</label><input id="qq" type="text" name="qq">
181 </p>
182 <p>
183 <label for="email">email:</label><input id="email" type="text" name="email">
184 </p>
185 <p>
186 <label for="messages">留言:</label><textarea id="messages" name="messages" class="f-messages"></textarea>
187 </p>
188 <p style="text-align: center;">
189 <input type="submit" name="sub" value="提交" class="submit-btn">
190 </p>
191 </form>
192 </div>
193
194
195 </body>
196 </html>
效果:
我们要获取的是页面表单POST上来的内容,表单action的目标是add.php,add.php与index.php放在同一目录下(譬如:d:wamp/www/phpfile,服务器用wamp就可以测试)。
下面是add.php的代码:
1 <?php
2
3 if($_POST['names']){
4
5 $host="localhost:3306";//本地服务器主机地址
6 $user = "root";//用户名
7 $password = "";//密码
8 $dbname = "phpbook";//数据库名字
9 $id = mysqli_connect($host,$user,$password,$dbname);//连接数据库,并将结果存在$id中
10 mysqli_query($id,"set names utf-8");//设置编码
11 mysqli_select_db($id,$dbname);//选择数据库
12 $names = $_POST["names"];//获取index.php表单中<input type="text" name="names">的内容
13 $qq = $_POST["qq"];//同上
14 $email = $_POST["email"];
15 $messages = $_POST["messages"];
16 $sql = "insert into users(names,qq,email,messages) values('$names','$qq','$email','$messages')";//sql语句,将获取的内容插入数据库
17 mysqli_query($id,$sql);//执行数据库语句
18
19 if($result = mysqli_query($id,"select * from users;")){//查询数据库中users中所有内容,并将结果存在$result中
20 echo "<table border='0'>
21 <tr>
22 <th>姓名</th>
23 <th>qq</th>
24 <th>email</th>
25 <th>留言内容</th>
26 </tr>";
27 while($row = mysqli_fetch_array($result)){//获取内容存在数组中
28 echo "
29
30 <tr>
31 <td>".$row['names']."
32 </td>
33 <td>".$row['qq']."
34 </td>
35 <td>".$row['email']."
36 </td>
37 <td>".$row['messages']."
38 </td>
39 </tr>
40 ";
41 }
42 echo "</table>";
43 }else{
44 echo "添加失败";
45 }
46 }
47
48 ?>
49 <!DOCTYPE html>
50 <html lang="en">
51 <head>
52 <meta charset="UTF-8">
53 <title>显示留言</title>
54 <style>
55 table{
56 border:none;
57 border-spacing:0;
58 width: 90%;
59 margin: auto;
60 }
61 </style>
62 </head>
63 <body>
64
65 </body>
66 </html>
效果: