您的位置：首页 > Web前端 > BootStrap

留言板——提交后台

2015-09-08 00:00 429 查看
摘要: Bootstrap+PHP开发留言板之提交后台

这一讲主要是留言的后台提交。

一.将 html 文件修改为 php 文件

将 Comments.html 的后缀改为 .php，并且分离出头尾部分，这部分代码可以重复使用。

header.html 和 footer.html 都放在 includes 文件夹中

header.html：

在第12行，修改

<title>留言板</title>

为

<title><?php echo $page_title; ?></title>

完整代码为：

<!DOCTYPE html>
<!-- saved from url=(0048)http://v3.bootcss.com/examples/starter-template/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="./images/favicon.ico">

<！-- 自定义标题 -->
<title><?php echo $page_title; ?></title>

<!-- Bootstrap core CSS -->
<link href="./css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="./css/starter-template.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="./css/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>#haloword-pron { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -34px; }#haloword-pron:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -34px; }#haloword-open { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -17px; }#haloword-open:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -17px; }#haloword-close { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px 0; }#haloword-close:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px 0; }#haloword-add { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -51px; }#haloword-add:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -51px; }#haloword-remove { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -94px -68px; }#haloword-remove:hover { background: url(chrome-extension://bhkcehpnnlgncpnefpanachijmhikocj/img/icon.svg) -111px -68px; }</style></head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div>


footer.html：

</div><!-- /.container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./css/jquery.min.js"></script>
<script src="./css/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="./css/ie10-viewport-bug-workaround.js"></script>

</body>
</html>


Comments.php：

在头部添加：

<?php
$page_title = '留言板';
include('includes/header.html');
?>

在尾部添加：

<?php
include('includes/footer.html');
?>

所以至此完整代码为：

<?php
$page_title = '留言板';
include('includes/header.html');    //包含头文件
?>

<div class="starter-template">
<h1>留言板</h1>
</div>

<div class="col-lg-6">
<h2>这里是留言板列表</h2>
</div>

<div class="col-lg-6">
<form role="form">
<label for="inputName" class="sr-only">Name</label>
<input type="text" name="inputName" class="form-control" placeholder="Name" maxlength="20" required autofocus>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="inputEmail" class="form-control" placeholder="Email address" maxlength="80" required>
<label for="inputComment" class="sr-only">Comment</label>
<textarea class="form-control" name="inputComment" rows="5" placeholder="Comment" maxlength="100" required></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</form>
</div>

<?php
include('includes/footer.html');    //包含尾文件
?>


现在用浏览器打开 Comments.php ，可以看到和之前没有任何改变，说明你成功的修改为 php 文件。

二.与数据库进行连接

现在要连接数据库，使你的页面可以提交数据到数据库。

首先需要写一个数据库配置文件 mysqli_connect.php ， 这个文件里定义你连接数据库的用户名、密码等信息，所以它非常的重要，通常都是放在你网站目录的上一级目录里，所以我们也要把它放到 Comments.php 的上一级目录里。

mysqli_connect.php：

<?php

DEFINE('DB_USER', 'user');            //你的数据库用户名
DEFINE('DB_PASSWORD', 'password');    //你的数据库密码
DEFINE('DB_HOST', 'localhost');       //数据库主机
DEFINE('DB_NAME', 'comments');        //数据库

//连接函数
$dbc = @mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) OR die('Could not to MySQL:'.mysqli_connect_error());

?>


@ 标识符使得即使这句代码发生错误，也不会显现 Warning 错误信息，因为如果让出了你以外的任何人因为这个代码的错误而看到数据库的敏感信息都是不好的。

OR die 后面一句话表示，如果连接数据库出现问题，则显示自定义的错误信息。

数据库连接成功后，会返回一个数据库资源到 $dbc 上。

最后加上与数据库连接，插入数据的代码，以下为 Comments.php 的完整代码。

Comments.php

<?php
$page_title = '留言板';
include('includes/header.html');    //头文件

if(isset($_POST['submitted']))
{
//包含上一级目录的数据库连接文件
require_once('../mysqli_connect.php');

//获取用户的输入
$n = mysqli_real_escape_string($dbc, trim($_POST['inputName']));
$e = mysqli_real_escape_string($dbc, trim($_POST['inputEmail']));
$c = mysqli_real_escape_string($dbc, trim($_POST['inputComment']));

//插入语句
$q = "insert into comment_list(name, email, comment, comment_date) values('$n', '$e', '$c', now())";
//执行sql语句，同样需要在前头加上 @ 符号
$r = @mysqli_query($dbc, $q);

//如果提交成功，则弹出提示
if($r)
{
echo "<script type='text/javascript'>alert('提交成功！');</script>";
}

//关闭数据库
mysqli_close($dbc);
}

?>

<div class="starter-template">
<h1>留言板</h1>
</div>

<div class="col-lg-6">
<h2>这里是留言板列表</h2>
</div>

<div class="col-lg-6">
<form role="form" action="Comments.php" method="post">
<label for="inputName" class="sr-only">Name</label>
<input type="text" name="inputName" class="form-control" placeholder="Name" maxlength="20" required autofocus>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" name="inputEmail" class="form-control" placeholder="Email address" maxlength="80" required>
<label for="inputComment" class="sr-only">Comment</label>
<textarea class="form-control" name="inputComment" rows="5" placeholder="Comment" maxlength="100" required></textarea>
<button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
<!-- 隐藏输入框，用于判断用户是否点击提交 -->
<input type = "hidden" name="submitted" value="TRUE">
</form>
</div>

<?php
include('includes/footer.html');    //尾文件
?>


include 与 require 的区别：include加载进一个文件如果发生错误还会继续加载，而 require 会立即终止后续代码的解释。

form 表单的后台处理页面即为 Comments.php ，并且方式必须为post方式。

在表单的最后一项需要添加一个隐藏输入框，其值为TRUE，则在一开始判断是可用

if(isset($_POST['submitted']))
{
}

来判断。

mysqli_real_escape_string 函数转义 SQL 语句中使用的字符串中的特殊字符，可预防数据库攻击。

trim 函数去掉字符串两边多余的空格。

mysqli_query 函数执行 sql 语句，并返回一个数据库资源到 $r 上。

mysqli_close 函数是关闭数据库，虽然 php 的结束标签会自动关闭数据库，但书写上也是一个好习惯。

以下为页面完成的模样：





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Bootstrap PHP 留言板
相关文章推荐
新的分享
章节导航