【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）
?? 在暑假的這幾天時間里，制作了一個簡單的博客網站。下面我將這幾天的操作流程來說一下，在原文末會貼上代碼，也會給出下載鏈接。（閑復制代碼麻煩的可以到下載地址這里直接下載?點擊打開鏈接） 剛剛更新源碼到github上點擊打開鏈接
?
一、開發環境的搭建
?? （1）apache+php+mysql環境搭建
?? 因為要用apache來做服務器，mysql作為數據庫來存儲數據，php來寫代碼以此實現網頁與數據庫的交互數據，所以需要下載上述軟件，但上述軟件的安裝環境、配置很麻煩，所以在這里用了一個功能強大的建站集成軟件包---XAMPP，具體的安裝方法可見鏈接（點擊打開鏈接）。
????????
?
?? 當然，也有可能啟動Apache時候出現錯誤，這里給出鏈接（點擊打開鏈接），如果apache啟動有錯誤可以參考上面這個鏈接來解決問題。
?? （2）數據庫客戶端軟件navigat
?? 直接在cmd命令控制臺操作數據庫并不方便，不夠直白，當然也可以直接用phpmyadmin來操作（上述xampp軟件包安裝之后在游覽器輸入127.0.0.1/phpmyadmin即可打開），但是phpmyadmin來操作也不方便，這里便采用Oracle公司出品的數據庫客戶端Navicat，這里還是給出鏈接（點擊打開鏈接），按照要求下載即可，
???????點擊連接，輸入連接名，（這里我直接取了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:\PHP\xampp\apache\conf，打開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）
? 當你想閱讀該文章時，可點擊標題進入閱讀頁，進行閱讀,同樣給出源碼，作為參考
?
?
?
?
?
總結
以上是生活随笔為你收集整理的【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用RichEditableText做的一
- 下一篇： 泛微OA-SQL注入漏洞