php实现留言功能

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>

效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端儿

Node.js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb

41910
来自专栏我是攻城师

如何优雅的全量读取Elasticsearch索引里面的数据

3.6K70
来自专栏Python

解决有关flask-socketio中服务端和客户端回调函数callback参数的问题(全网最全)

66840
来自专栏difcareer的技术笔记

DexHunter原理图解

DexHunter是之前开源的一个通用脱壳方案,现在大部分已经不行了,但其思路挺好的,故对着源码画了一张图,可以帮助理解其原理。

11640
来自专栏芋道源码1024

分布式事务 TCC-Transaction 源码解析 —— 调试环境搭建

本文主要基于 TCC-Transaction 1.2.3.3 正式版 1. 依赖工具 2. 源码拉取 3. 初始化数据库 4. 启动 capital 项目 5....

43970
来自专栏云知识学习

Nginx proxy_pass后的url加不加/的区别

针对情况1 :如果访问url = http://server/abc/test.jsp,则被nginx代理后,请求路径会便问http://proxy_pass/...

41790
来自专栏后端技术探索

nginx+memcached构建页面缓存应用

nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm、djang...

11520
来自专栏我的博客

Elasticsearch配置

一、术语 1、索引(index) 相当于关系数据库当中的数据库 2、文档(document) 相当于MySQL中的一行记录,但是ES中的文档没有固定结构...

41570
来自专栏后端技术探索

nginx+memcached构建页面缓存应用

nginx的memcached_module模块可以直接从memcached服务器中读取内容后输出,后续的请求不再经过应用程序处理,如php-fpm、djang...

11720
来自专栏Java3y

Tomcat+Servlet面试题都在这里

下面是我整理下来的Servlet知识点: ? 图上的知识点都可以在我其他的文章内找到相应内容。 Tomcat常见面试题 Tomcat的缺省端口是多少,怎么修改 ...

45130

扫码关注云+社区

领取腾讯云代金券