編碼的世界 / 優質文選 / 文明
【實戰】如何通過html+css+mysql+php來快速的制作動態網頁（以制作一個博客網站為列）
2021年10月17日
-
在暑假的這幾天時間裏，制作了一個簡單的博客網站。下面我將這幾天的操作流程來說一下，在原文末會貼上代碼，也會給出下載鏈接。（閑複制代碼麻煩的可以到下載地址這裏直接下載 點擊打開鏈接） 剛剛更新源碼到github上點擊打開鏈接
一、開發環境的搭建 （1）apache+php+mysql環境搭建 因為要用apache來做服務器，mysql作為數據庫來存儲數據，php來寫代碼以此實現網頁與數據庫的交互數據，所以需要下載上述軟件，但上述軟件的安裝環境、配置很麻煩，所以在這裏用了一個功能強大的建站集成軟件包-XAMPP，具體的安裝方法可見鏈接（點擊打開鏈接）。
當然，也有可能啟動Apache時候出現錯誤，這裏給出鏈接（點擊打開鏈接），如果apache啟動有錯誤可以參考上面這個鏈接來解決問題。
點擊連接，輸入連接名，（這裏我直接取了IP地址的名字127.0.0.1），主機名和端口號都不用變，這裏的用戶名和密碼。如果是你用的是xampp，那麼用戶名是root，密碼為空；如果不是用的是xampp安裝的，按照你設置的用戶名和密碼登錄即可。填寫完畢之後點擊連接測試，沒有問題直接確定即可連接好數據庫。
此外你要是想掌握數據庫，簡單來講你想對數據庫的任何操作，都必須操作sql語句，總的來說分為四個操作：增刪改查。
①增：向數據庫寫入數據
語句：insert into users (`username`,`password`) values ('name','passwd')
（ps新手一定要注意這離users這個數據表後面的``這個符號是在tab鍵上方的引號，而values後面的就是個單引號）
②刪：刪除已有數據
語句：delete from users WHERE id='3'
③改：修改數據
語句：update set users username='新值', password='新值' WHERE id=3
④查：從數據庫讀取數據
語句：select * from users where id>1 order by id desc limit 0,2
如果你想進一步深入的了解mysql語句的話，看一下這裏的連接，（點擊打開鏈接）連接給出了這四個操作的具體參數的詳解，要想用數據庫一定要掌握這四個操作。
（3）html網頁的編寫工具sublime text Sublime Text 是一個代碼編輯器（Sublime Text 2是收費軟件，但可以無限期試用），也是HTML和散文先進的文本編輯器。Sublime text具有漂亮的用戶界面和強大的功能，非常適合寫代碼的程序猿。在這裏還是給出sublime text的安裝方法以及注冊碼及常用插件的安裝步驟，按照連接下載即可。（點擊打開鏈接）
用sublime text來寫網頁代碼，可以掌握這樣一個小技巧，先新建一個文件，格式保存為html網頁格式，然後在sublime text中打開，輸入html:4s 然後按下tab鍵即可生成大體框架。當然這個快捷鍵要想使用是要按照我上述給的鏈接，按照步驟安裝好Emmet這個插件，才能使用。
（4）網站域名的配置 一般來講，你在遊覽器打開127.0.0.1這個網址，會轉到apache默認目錄下的一個網址，這裏我對其進行修改，修改為我做項目的目錄，E:PHPxamppapacheconf，打開httpd.conf文件，將裏面的路徑修改為你存儲網站的目錄，在這裏我的修改為
DocumentRoot "E:/php/xampp/workplace" <Directory "E:/PHP/xampp/workplace">
這裏要注意按照自己的下載按照路徑來修改為自己的目錄，其次我還對這個127.0.0.1這個網址再次做了修改，使其虛擬域名為blog.com,具體的配置及修改還是見鏈接（點擊打開鏈接），修改完之後重啟之後，在遊覽器輸入blog.com，便會出現下述場景：
在這裏我發現我修改的DNS配置，不知道何時再前面加了一條注釋，導致沒法打開，大家也要注意按照我給的連接配置好之後，如果打不開再看一下配置文件有無錯誤。
總之，配置環境和工具基本上也搭建成功了，接下來我就開始講解這個blog的項目。
二、博客網站的書寫 1.總體框架 首先在這裏我先介紹一下我的總體框架，講解一下，讓大家先熟悉一下。
blog是項目的名字，admin文件夾裏面存儲的是後台登錄文件 core文件夾裏面存儲核心文件，theme文件夾存儲網頁的樣式文件 upfiles文件夾是存儲從本地上傳到服務器的圖片信息，之後config.php文件是整個博客網站的配置文件，header.inc.php是加載了一個頁面樣式信息，index.php文件是網站的首頁，read.php文件是網站首頁文章的具體鏈接。
數據庫表中的設計在這裏我給出，方便大家參考學習，這裏我主要建立了三個表，admin這個表示用來存儲後台管理員注冊和登錄的數據，即賬戶和密碼：
page這個表主要是用來存儲博客信息，在這裏也給圖片，方便安裝圖來建表：
最後給出setting這個表，主要是用來存儲博客的系統設置：
2.網站後台admin的書寫 （1）登錄界面（login.php）
關於這個頁面我會在這裏給出源碼，登錄頁面其實也就是個從數據庫讀取的過程，這個登錄頁面的設計我主要是采用了bootstrap來設計的，不明白的可以百度一下bootstrap，可以參考我的鏈接來看一下（點擊打開鏈接）
在這裏面它包含了各式的樣式、組件和JavaScript插件，可以說很好用。
在這裏我的使用方法是將bootstrap下載下來，然後將文件加壓，複制到theme這個文件夾下面，調用方法見下面的源碼，在源碼中我都給出了詳細的解釋。
源碼：
<?php
/*
後台管理員登錄窗口
*/
/*啟動session服務，記錄賬號登錄的cookies*/
session_start();
/*包含一個配置文件*/
include('../config.php');
if($input->get('do')=='check'){
/*獲取頁面提交的用戶名和密碼數據*/
$ausername=$input->post('ausername');
$apassword=$input->post('apassword');
/*查詢頁面提交的數據是否在數據庫提供的數據存在的sql語句*/
$sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' ";
/*數據庫查詢語句返回結果*/
$mysqli_result=$db->query($sql);
/*以數組形式存儲數據庫查詢語句的返回結果*/
$row=$mysqli_result->fetch_array( MYSQLI_ASSOC);
/*如果row確實返回了結果，則將結果的aid存儲在session裏，並轉向home.php文件*/
if(is_array($row)){
$_SESSION['aid']=$row['aid'];
header("location:home.php");
}else{
echo("賬戶或密碼錯誤");
}
}
?>
<!後台管理員登錄界面></!>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>管理員登錄界面</title>
<!加載包含bootstrap裏css和javascript裏的文件></!>
<?php include(PATH . '/header.inc.php');?>
</head>
<body>
<!最外面的container容器></!>
<div class="container">
<!bootstrap使用時建議使用一個row表格類，包含12個列></!>
<div class="row" style="margin-top:200px;">
<!距左邊3個列></!>
<div class="col-md-3"></div>
<!中間部分占據6列></!>
<div class="col-md-6" ">
<div class="panel panel-primary">
<!登錄頭部分></!>
<div class="panel-heading">管理員登錄</div>
<!登錄的身體部分></!>
<div class="panel-body">
<form class="form-horizontal" action="login.php?do=check" method="post">
<!登錄的用戶名那一行></!>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名" datatype="*3-10" errormsg="請輸入長度 範圍在3-10之間的昵稱">
</div>
</div>
<!登錄的密碼那一行></!>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
</div>
</div>
<!登錄、注冊那一行></!>
<div class="form-group">
<div class="col-sm-3"></div>
<!登錄></!>
<div class="col-sm-4">
<input type="submit" value="登錄" class='btn btn-primary'>
</div>
<!注冊></!>
<div class="col-sm-4">
<a href="register.php"><input type="button" value="注冊" class="btn btn-primary"> </a>
</div>
</div>
</form>
</div>
<!登錄的尾部分></!>
<div class="panel-footer text-right">版權所有，盜版必究</div>
</div>
</div>
<!距離右邊三列></!>
<div class="col-md-3"></div>
</div>
</div>
<!窗口背景的script加載></!>
<script type="text/javascript">
window.onload = function() {
var config = {
vx : 4,
vy : 4,
height : 2,
width : 2,
count : 100,
color : "121, 162, 185",
stroke : "100, 200, 180",
dist : 6000,
e_dist : 20000,
max_conn : 10
}
CanvasParticle(config);
}
</script>
<script type="text/javascript" src="../theme/js/canvas-particle.js"></script>
</script>
</body>
</html>（2）注冊界面(register.php) 注冊界面其實也就是個往數據庫增加數據的過程。
還是給出源碼，源碼中我給出了詳解。
<?php
/*包含一個配置文件*/
include('../config.php');
if($input->get('do')=='check'){
/*獲取用戶頁面注冊傳來的用戶名和密碼數據*/
$ausername=$input->post('ausername');
$apassword=$input->post('apassword');
$aconfirmpassword=$input->post('aconfirmpassword');
/*注冊時的處理*/
if($apassword!=$aconfirmpassword){
echo "前後兩次輸入的密碼不一致";
exit;
}
/*將用戶填入的數據插入到數據庫的sql語句*/
$sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')";
/*提交sql語句到數據庫處理*/
$is=$db->query($sql);
/*判斷是否注冊成功*/
if($is){
echo "注冊成功";
header("Location:login.php");
}else{
echo "注冊失敗";
}
}
?>
<!後台管理員登錄界面></!>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>管理員注冊界面</title>
<!加載包含bootstrap裏css和javascript裏的文件></!>
<?php include(PATH . '/header.inc.php');?>
</head>
<body>
<!最外面的container容器></!>
<div class="container">
<!bootstrap使用時建議使用一個row表格類，包含12個列></!>
<div class="row" style="margin-top:200px;">
<!距左邊3個列></!>
<div class="col-md-3"></div>
<!中間部分占據6列></!>
<div class="col-md-6" ">
<div class="panel panel-primary">
<!注冊頭部分></!>
<div class="panel-heading">管理員注冊</div>
<!注冊的身體部分></!>
<div class="panel-body">
<form class="form-horizontal" action="register.php?do=check" method="post">
<!注冊的用戶名那一行></!>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名">
</div>
</div>
<!注冊的密碼那一行></!>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
</div>
</div>
<!注冊的密碼確定那一行></!>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">確認密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="aconfirmpassword" id="aconfirmpassword" placeholder="請再次輸入密碼">
</div>
</div>
<!提交注冊那一行></!>
<div class="form-group">
<div class="col-sm-4"></div>
<div class="col-sm-6">
<input type="submit" value="注冊" class='btn btn-primary btn-lg btn-block'>
</div>
</div>
</form>
</div>
<!登錄的尾部分></!>
<div class="panel-footer text-right">版權所有，盜版必究</div>
</div>
</div>
<!距離右邊三列></!>
<div class="col-md-3"></div>
</div>
</div>
<!窗口背景的script加載></!>
<script type="text/javascript">
window.onload = function() {
var config = {
vx : 4,
vy : 4,
height : 2,
width : 2,
count : 100,
color : "121, 162, 185",
stroke : "100, 200, 180",
dist : 6000,
e_dist : 20000,
max_conn : 10
}
CanvasParticle(config);
}
</script>
<script type="text/javascript" src="../theme/js/canvas-particle.js"></script>
</script>
</body>
</html>（3）後台管理頁面（home.php）
在源碼中將上述網站的標題那部分單獨給拿出來做了一個文件（nav.inc.php）,這裏也是給出源碼，供大家學習參考。
home.php源碼
<?php
/*
後台管理員登錄之後php控制端
*/
include ('check.php');
?>
<!後台管理員登錄之後的界面<>/!>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>管理員登錄</title>
<?php include(PATH . '/header.inc.php');?> <!所有的頁面都需加載這個文件></!>
</head>
<body>
<?php include('nav.inc.php');?> <!管理員登錄頁面的標題部分></!>
</body>
</html>nav.inc.php
<!後台管理界面的上方標題></!>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<! Brand and toggle get grouped for better mobile display >
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.php">ADMIN</a>
</div>
<! Collect the nav links, forms, and other content for toggling >
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ><a href="blog.php">博客管理 <span class="sr-only">(current)</span></a></li>
<li><a href="auser.php">管理員管理</a></li>
<li><a href="setting.php">系統管理</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <?php echo $session_user['ausername'];?> <span class="caret"></span></a> <!輸出此時登錄的賬戶名></!>
<ul class="dropdown-menu">
<li><a href="logout.php">退出</a></li>
</ul>
</li>
</ul>
</div><! /.navbar-collapse >
</div><! /.container-fluid >
</nav> （4）博客管理界面(blog.php） 這裏有三個功能，修改、刪除、添加博客界面，下面我將單獨列出添加博客這個界面
（5）添加博客界面(blog_add.php)
為什麼要單獨列出添加博客這個界面呢？因為在添加博客這個界面中加載了一個編輯器，一個強大的在線編輯器simditor，這裏還是給出下載及使用連接，大家可以作為參考，學習一下（點擊打開鏈接）在這裏這個編輯器如果需要圖片上傳功能的話，需要在文件中設置，這個文件設置為（blog_uopload.php）
blog_add.php源碼
<?php
/*後台除去管理員登錄界面，均需加載這個文件，來驗證該頁面管理員是否登錄*/
include ('check.php');
/*取出傳來的pid從而判斷是添加還是修改操作*/
$pid=$input->get('pid');
/*初始化page，為了區別添加還是修改操作*/
$page=array(
'title' => '',
'author' => '',
'content' => '',
);
/*如果pid大於0，可以得出並不是添加操作，而是修改操作*/
if($pid>0){
$sql="select * from page where pid ='{$pid}' ";
$res=$db->query($sql);
$page=$res->fetch_array(MYSQLI_ASSOC);
}
/*對於添加操作操作而言，賬戶或密碼不能為空*/
if($input->get('do')=='add'){
$title=$input->post('title');
$author=$input->post('author');
$content=$input->post('content');
if(empty($title)||empty($author)||empty($content)){
echo("數據不能為空");
}
/*如果aid大於1，則得出更新操作，否則執行添加操作*/
if($pid>0){
$uptime=time();
$sqlTpl="UPDATE page set title='%s',author='%s',content='%s',uptime='%d' where pid='%d' ";
$sql=sprintf($sqlTpl,$title,$author,$content,$uptime,$pid);
}
else{
$intime=time();
$sqlTpl="INSERT INTO page(`title`,`author`,`content`,`intime`,`uptime`) values('%s','%s','%s','%d','%d')";
$sql=sprintf($sqlTpl,$title,$author,$content,$intime,0);
}
/*判斷是否有結果*/
$is=$db->query($sql);
if($is){
header("location:blog.php");
}else{
echo "執行失敗";
}
}
?>
<!管理員添加博客或修改博客的界面<>/!>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>添加博客</title>
<?php include(PATH . '/header.inc.php');?>
<!加載simiditor編輯器的文件></!>
<link rel="stylesheet" type="text/css" href="../theme/simditor/styles/simditor.css" />
<script type="text/javascript" src="../theme/simditor/scripts/module.js"></script>
<script type="text/javascript" src="../theme/simditor/scripts/hotkeys.js"></script>
<script type="text/javascript" src="../theme/simditor/scripts/uploader.js"></script>
<script type="text/javascript" src="../theme/simditor/scripts/simditor.js"></script>
</head>
<body>
<?php include('nav.inc.php');?>
<div class="container">
<h2> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.php">返回</a></small></h2>
<hr/>
<div class="rows">
<form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">標題</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="title" placeholder="請輸入標題" value='<?php echo $page['title'];?>'>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">作者</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="author" placeholder="請輸入作者" value='<?php echo $page['author'];?>' >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">正文</label>
<div class="col-sm-8">
<textarea id="content" name="content" class="form-control"><?php echo $page['content'];?></textarea>
<!在script中初始化編輯器,在這裏注意script裏加載的textarea的ID要與上方textarea的id號一致></!>
<script>
var editor = new Simditor({
textarea: $('#content'),
upload:{
url:'blog_upload.php',
fileKey:'file1'
}
//optional options
});
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>blog_upload.php源碼
<?php
/*後台除去管理員登錄界面，均需加載這個文件，來驗證該頁面管理員是否登錄*/
include('check.php');
/*將文件上傳到服務器的目錄裏*/
$key='file1';
$dir='../upfiles/';
if(isset($_FILES[$key])){
$file=$_FILES[$key];
if($file['error']==0){
/*文件所處服務器的目錄*/
$pathName=$dir . $file['name'];
/*文件所在服務器的網址*/
$urlName='http://blog.com/blog/upfiles' . $file['name'];
$is=move_uploaded_file($file['tmp_name'], $pathName);
/*判斷是否移動成功*/
if(!$is){
die("上傳失敗");
}
/*編輯器來判斷是否成功上傳圖片*/
$json=array(
'success' => true,
'msg' => '',
'file_path'=>$urlName
);
echo json_encode($json);
}
}
?>（6）管理員管理界面（auser.php） 這裏還是有三個功能，修改、刪除和添加，這裏我就不單獨一一列出來了，具體可參考文末給出的源碼
（7）系統管理界面 系統管理可以在這裏設置標題、介紹和博客每頁的顯示數量
3.主界面（index.php） 這裏是遊客訪問的主界面，這裏給出源碼大家作為參考，
閱讀界面（read.php）
當你想閱讀該文章時，可點擊標題進入閱讀頁，進行閱讀,同樣給出源碼，作為參考
熱門文章
