【實戰】如何經過html+css+mysql+php來快速的製做動態網頁（以製做一個博客網站爲列）

時間 2019-11-20

標籤實戰如何經過 html+css+mysql+php html css mysql php 快速製做動態網頁一個博客網站欄目 HTML 简体版

原文原文鏈接

1、開發環境的搭建javascript

（1）apache+php+mysql環境搭建php

由於要用apache來作服務器，mysql做爲數據庫來存儲數據，php來寫代碼以此實現網頁與數據庫的交互數據，因此須要下載上述軟件，但上述軟件的安裝環境、配置很麻煩，因此在這裏用了一個功能強大的建站集成軟件包---XAMPP
css

固然，也有可能啓動Apache時候出現錯誤。html

（2）數據庫客戶端軟件navigatjava

直接在cmd命令控制檯操做數據庫並不方便，不夠直白，固然也能夠直接用phpmyadmin來操做（上述xampp軟件包安裝以後在遊覽器輸入127.0.0.1/phpmyadmin便可打開），可是phpmyadmin來操做也不方便，這裏便採用Oracle公司出品的數據庫客戶端Navicat

mysql

點擊鏈接，輸入鏈接名，（這裏我直接取了IP地址的名字127.0.0.1），主機名和端口號都不用變，這裏的用戶名和密碼。若是是你用的是xampp，那麼用戶名是root，密碼爲空；若是不是用的是xampp安裝的，按照你設置的用戶名和密碼登陸便可。填寫完畢以後點擊鏈接測試，沒有問題直接肯定便可鏈接好數據庫。laravel

此外你要是想掌握數據庫，簡單來說你想對數據庫的任何操做，都必須操做sql語句，總的來講分爲四個操做：增刪改查。sql

①增：向數據庫寫入數據shell

語句：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

（3）html網頁的編寫工具sublime text

phper在進階的時候總會遇到一些問題和瓶頸，業務代碼寫多了沒有方向感，不知道該從那裏入手去提高，對此我整理了一些資料，包括但不限於：分佈式架構、高可擴展、高性能、高併發、服務器性能調優、TP6，laravel，YII2，Redis，Swoole、Kafka、Mysql優化、shell腳本、Docker、微服務、Nginx等多個知識點高級進階乾貨須要的能夠免費分享給你們，須要的（點擊→）個人官方羣677079770

Sublime Text 是一個代碼編輯器（Sublime Text 2是收費軟件，但能夠無限期試用），也是HTML和散文先進的文本編輯器。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的項目。

2、博客網站的書寫

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這個文件夾下面，調用方法見下面的源碼，在源碼中我都給出了詳細的解釋。

源碼：

  1 <?php
  2 /*
  3 後臺管理員登陸窗口
  4  */ 
  5     
  6     /*啓動session服務，記錄帳號登陸的cookies*/
  7     session_start();
  8     
  9     /*包含一個配置文件*/
 10     include('../config.php');
 11     
 12  
 13      if($input->get('do')=='check'){
 14          /*獲取頁面提交的用戶名和密碼數據*/
 15          $ausername=$input->post('ausername');
 16          $apassword=$input->post('apassword');
 17  
 18          /*查詢頁面提交的數據是否在數據庫提供的數據存在的sql語句*/
 19           $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' ";
 20           /*數據庫查詢語句返回結果*/
 21           $mysqli_result=$db->query($sql);
 22           /*以數組形式存儲數據庫查詢語句的返回結果*/
 23           $row=$mysqli_result->fetch_array( MYSQLI_ASSOC);
 24           /*若是row確實返回告終果，則將結果的aid存儲在session裏，並轉向home.php文件*/
 25           if(is_array($row)){
 26               $_SESSION['aid']=$row['aid'];
 27               header("location:home.php");
 28           }else{
 29               echo("帳戶或密碼錯誤");
 30           }
 31      }
 32 ?>
 33  
 34 <!--後臺管理員登陸界面></!-->
 35 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 36 <html lang="en">
 37 <head>
 38     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 39     <title>管理員登陸界面</title>
 40     <!--加載包含bootstrap裏css和javascript裏的文件></!-->
 41     <?php include(PATH . '/header.inc.php');?>
 42     
 43  
 44 </head>
 45 <body>
 46     <!--最外面的container容器></!-->
 47     <div class="container">
 48         <!--bootstrap使用時建議使用一個row表格類，包含12個列></!-->
 49         <div class="row" style="margin-top:200px;">
 50             <!--距左邊3個列></!-->
 51             <div class="col-md-3"></div>
 52             <!--中間部分佔據6列></!-->
 53             <div class="col-md-6" ">
 54              
 55                 <div class="panel panel-primary">
 56                     <!--登陸頭部分></!-->
 57                       <div class="panel-heading">管理員登陸</div>
 58                       <!--登陸的身體部分></!-->
 59                       <div class="panel-body">
 60                         
 61                         <form  class="form-horizontal" action="login.php?do=check" method="post">
 62                             <!--登陸的用戶名那一行></!-->
 63                             <div class="form-group">
 64                                 <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
 65                             <div class="col-sm-10">
 66                                   <input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名" datatype="*3-10" errormsg="請輸入長度 範圍在3-10之間的暱稱">
 67                             </div>
 68                             </div>
 69                             
 70                             <!--登陸的密碼那一行></!-->
 71                             <div class="form-group">
 72                                 <label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
 73                             <div class="col-sm-10">
 74                                   <input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
 75                             </div>
 76                             </div>
 77                             
 78                             <!--登陸、註冊那一行></!-->
 79                             <div class="form-group">
 80                             <div class="col-sm-3"></div>
 81                             <!--登陸></!-->
 82                             <div class="col-sm-4">
 83                                   <input type="submit" value="登陸" class='btn btn-primary'>
 84                             </div>
 85                             <!--註冊></!-->
 86                             <div class="col-sm-4">
 87                                 <a href="register.php"><input type="button" value="註冊" class="btn btn-primary"> </a>
 88                             </div>
 89                             </div>
 90                         </form>
 91  
 92                         
 93  
 94                     </div>
 95                      <!--登陸的尾部分></!-->
 96                        <div class="panel-footer text-right">版權全部，盜版必究</div>
 97                 </div>
 98             
 99             </div>
100             <!--距離右邊三列></!-->
101             <div class="col-md-3"></div>
102         </div>
103     </div>
104     <!--窗口背景的script加載></!-->
105     <script type="text/javascript">
106         window.onload = function() {
107             var config = {
108                 vx : 4,
109                 vy : 4,
110                 height : 2,
111                 width : 2,
112                 count : 100,
113                 color : "121, 162, 185",
114                 stroke : "100, 200, 180",
115                 dist : 6000,
116                 e_dist : 20000,
117                 max_conn : 10
118             }
119             CanvasParticle(config);
120         }
121     </script>
122     <script type="text/javascript" src="../theme/js/canvas-particle.js"></script>
123     </script>
124 </body>
125 </html>

（2）註冊界面(register.php)

註冊界面其實也就是個往數據庫增長數據的過程。

仍是給出源碼，源碼中我給出了詳解。

  1 <?php
  2     /*包含一個配置文件*/
  3     include('../config.php');
  4     
  5     if($input->get('do')=='check'){
  6         /*獲取用戶頁面註冊傳來的用戶名和密碼數據*/
  7         $ausername=$input->post('ausername');
  8         $apassword=$input->post('apassword');
  9         $aconfirmpassword=$input->post('aconfirmpassword');
 10         /*註冊時的處理*/
 11         if($apassword!=$aconfirmpassword){
 12             echo "先後兩次輸入的密碼不一致";
 13             exit;
 14         }
 15         /*將用戶填入的數據插入到數據庫的sql語句*/
 16         $sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')";
 17         /*提交sql語句到數據庫處理*/
 18         $is=$db->query($sql);
 19         /*判斷是否註冊成功*/
 20         if($is){
 21             echo "註冊成功";
 22             header("Location:login.php");
 23         }else{
 24             echo "註冊失敗";
 25         }
 26     }
 27  
 28  
 29 ?>
 30  
 31  
 32  
 33 <!--後臺管理員登陸界面></!-->
 34 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 35 <html lang="en">
 36 <head>
 37     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 38     <title>管理員註冊界面</title>
 39     <!--加載包含bootstrap裏css和javascript裏的文件></!-->
 40     <?php include(PATH . '/header.inc.php');?>
 41     
 42 </head>
 43 <body>
 44     <!--最外面的container容器></!-->
 45     <div class="container">
 46         <!--bootstrap使用時建議使用一個row表格類，包含12個列></!-->
 47         <div class="row" style="margin-top:200px;">
 48             <!--距左邊3個列></!-->
 49             <div class="col-md-3"></div>
 50             <!--中間部分佔據6列></!-->
 51             <div class="col-md-6" ">
 52              
 53                 <div class="panel panel-primary">
 54                     <!--註冊頭部分></!-->
 55                       <div class="panel-heading">管理員註冊</div>
 56                       <!--註冊的身體部分></!-->
 57                       <div class="panel-body">
 58                         
 59                         <form  class="form-horizontal" action="register.php?do=check" method="post">
 60                             <!--註冊的用戶名那一行></!-->
 61                             <div class="form-group">
 62                                 <label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
 63                             <div class="col-sm-10">
 64                                   <input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名">
 65                             </div>
 66                             </div>
 67                             
 68                             <!--註冊的密碼那一行></!-->
 69                             <div class="form-group">
 70                                 <label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
 71                             <div class="col-sm-10">
 72                                   <input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
 73                             </div>
 74                             </div>
 75                             <!--註冊的密碼肯定那一行></!-->
 76                             <div class="form-group">
 77                                 <label for="inputEmail3" class="col-sm-2 control-label">確認密碼</label>
 78                             <div class="col-sm-10">
 79                                   <input type="password" class="form-control" name="aconfirmpassword" id="aconfirmpassword" placeholder="請再次輸入密碼">
 80                             </div>
 81                             </div>
 82                             
 83                             <!--提交註冊那一行></!-->
 84                             <div class="form-group">
 85                             <div class="col-sm-4"></div>
 86                             <div class="col-sm-6">
 87                                   <input type="submit" value="註冊" class='btn btn-primary btn-lg btn-block'>
 88                             </div>
 89                             </div>
 90                         </form>
 91  
 92                         
 93  
 94                     </div>
 95                      <!--登陸的尾部分></!-->
 96                        <div class="panel-footer text-right">版權全部，盜版必究</div>
 97                 </div>
 98             
 99             </div>
100             <!--距離右邊三列></!-->
101             <div class="col-md-3"></div>
102         </div>
103     </div>
104     <!--窗口背景的script加載></!-->
105     <script type="text/javascript">
106         window.onload = function() {
107             var config = {
108                 vx : 4,
109                 vy : 4,
110                 height : 2,
111                 width : 2,
112                 count : 100,
113                 color : "121, 162, 185",
114                 stroke : "100, 200, 180",
115                 dist : 6000,
116                 e_dist : 20000,
117                 max_conn : 10
118             }
119             CanvasParticle(config);
120         }
121     </script>
122     <script type="text/javascript" src="../theme/js/canvas-particle.js"></script>
123     </script>
124 </body>
125 </html>

（3）後臺管理頁面（home.php）

在源碼中將上述網站的標題那部分單獨給拿出來作了一個文件（nav.inc.php）,這裏也是給出源碼，供你們學習參考。

home.php源碼

 1 <?php
 2 /*
 3 後臺管理員登陸以後php控制端
 4  */     
 5     include ('check.php');
 6 ?>
 7  
 8 <!--後臺管理員登陸以後的界面<>/!-->
 9 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
10 <html lang="en">
11 <head>
12     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
13     <title>管理員登陸</title>
14     <?php include(PATH . '/header.inc.php');?>  <!--全部的頁面都需加載這個文件></!-->
15 </head>
16 <body>
17     <?php include('nav.inc.php');?>  <!--管理員登陸頁面的標題部分></!-->
18 </body>
19 </html>

nav.inc.php

 1 <!--後臺管理界面的上方標題></!-->
 2 <nav class="navbar navbar-default" role="navigation">
 3       <div class="container-fluid">
 4         <!-- Brand and toggle get grouped for better mobile display -->
 5         <div class="navbar-header">
 6           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 7             <span class="sr-only">Toggle navigation</span>
 8             <span class="icon-bar"></span>
 9             <span class="icon-bar"></span>
10             <span class="icon-bar"></span>
11           </button>
12           <a class="navbar-brand" href="home.php">ADMIN</a>
13         </div>
14  
15         <!-- Collect the nav links, forms, and other content for toggling -->
16         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
17           <ul class="nav navbar-nav">
18             <li ><a href="blog.php">博客管理 <span class="sr-only">(current)</span></a></li>
19             <li><a href="auser.php">管理員管理</a></li>
20              <li><a href="setting.php">系統管理</a></li>
21           </ul>
22          
23           <ul class="nav navbar-nav navbar-right">
24            
25             <li class="dropdown">
26               <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>  <!--輸出此時登陸的帳戶名></!-->
27               <ul class="dropdown-menu">
28                 <li><a href="logout.php">退出</a></li>
29                
30               </ul>
31             </li>
32           </ul>
33         </div><!-- /.navbar-collapse -->
34       </div><!-- /.container-fluid -->
35     </nav>

（4）博客管理界面(blog.php）

這裏有三個功能，修改、刪除、添加博客界面，下面我將單獨列出添加博客這個界面

（5）添加博客界面(blog_add.php)

爲何要單獨列出添加博客這個界面呢？由於在添加博客這個界面中加載了一個編輯器，一個強大的在線編輯器simditor在這裏這個編輯器若是須要圖片上傳功能的話，須要在文件中設置，這個文件設置爲（blog_uopload.php）

blog_add.php源碼

  1 <?php
  2     /*後臺除去管理員登陸界面，均需加載這個文件，來驗證該頁面管理員是否登陸*/ 
  3     include ('check.php');
  4     /*取出傳來的pid從而判斷是添加仍是修改操做*/
  5     $pid=$input->get('pid');
  6     /*初始化page，爲了區別添加仍是修改操做*/
  7     $page=array(
  8             'title'   => '',
  9             'author'  => '',
 10             'content' => '',
 11         );
 12     /*若是pid大於0，能夠得出並非添加操做，而是修改操做*/
 13      if($pid>0){
 14          $sql="select * from page where pid ='{$pid}' ";
 15          $res=$db->query($sql);
 16          $page=$res->fetch_array(MYSQLI_ASSOC);
 17      }
 18  
 19  
 20  
 21      /*對於添加操做操做而言，帳戶或密碼不能爲空*/
 22     if($input->get('do')=='add'){
 23         $title=$input->post('title');
 24         $author=$input->post('author');
 25         $content=$input->post('content');
 26         if(empty($title)||empty($author)||empty($content)){
 27             echo("數據不能爲空");
 28         }
 29         /*若是aid大於1，則得出更新操做，不然執行添加操做*/
 30         if($pid>0){
 31             $uptime=time();
 32             $sqlTpl="UPDATE page set title='%s',author='%s',content='%s',uptime='%d' where pid='%d' ";
 33             $sql=sprintf($sqlTpl,$title,$author,$content,$uptime,$pid);
 34         }
 35         else{
 36             $intime=time();
 37             $sqlTpl="INSERT INTO page(`title`,`author`,`content`,`intime`,`uptime`) values('%s','%s','%s','%d','%d')";
 38             $sql=sprintf($sqlTpl,$title,$author,$content,$intime,0);
 39             
 40         }            
 41         /*判斷是否有結果*/
 42         $is=$db->query($sql);
 43         if($is){
 44             header("location:blog.php");
 45         }else{
 46             echo "執行失敗";
 47         }
 48     }
 49 ?>
 50  
 51 <!--管理員添加博客或修改博客的界面<>/!-->
 52 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 53 <html lang="en">
 54 <head>
 55     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 56     <title>添加博客</title>
 57     <?php include(PATH . '/header.inc.php');?>
 58  
 59     <!--加載simiditor編輯器的文件></!-->
 60     <link rel="stylesheet" type="text/css" href="../theme/simditor/styles/simditor.css" />
 61     <script type="text/javascript" src="../theme/simditor/scripts/module.js"></script>
 62     <script type="text/javascript" src="../theme/simditor/scripts/hotkeys.js"></script>
 63     <script type="text/javascript" src="../theme/simditor/scripts/uploader.js"></script>
 64     <script type="text/javascript" src="../theme/simditor/scripts/simditor.js"></script>
 65  
 66 </head>
 67 <body>
 68     <?php include('nav.inc.php');?>
 69     <div class="container">
 70     <h2> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.php">返回</a></small></h2>
 71     <hr/>
 72         <div class="rows">
 73             <form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post">
 74               <div class="form-group">
 75                 <label for="inputEmail3" class="col-sm-2 control-label">標題</label>
 76                 <div class="col-sm-6">
 77                   <input type="text" class="form-control" name="title" placeholder="請輸入標題" value='<?php echo $page['title'];?>'>
 78                 </div>
 79               </div>
 80               <div class="form-group">
 81                 <label for="inputPassword3" class="col-sm-2 control-label">做者</label>
 82                 <div class="col-sm-4">
 83                   <input type="text" class="form-control" name="author" placeholder="請輸入做者" value='<?php echo $page['author'];?>' >
 84                 </div>
 85               </div>
 86  
 87               <div class="form-group">
 88                 <label for="inputPassword3" class="col-sm-2 control-label">正文</label>
 89                 <div class="col-sm-8">
 90                      <textarea id="content" name="content" class="form-control"><?php echo $page['content'];?></textarea>
 91                      <!--在script中初始化編輯器,在這裏注意script里加載的textarea的ID要與上方textarea的id號一致></!-->
 92                     <script>
 93                         var editor = new Simditor({
 94                           textarea: $('#content'),
 95                           upload:{
 96                               url:'blog_upload.php',
 97                               fileKey:'file1'
 98                           }
 99                           //optional options
100                         });
101                     </script>                     
102                 </div>
103               </div>
104               
105               <div class="form-group">
106                 <div class="col-sm-offset-2 col-sm-6">
107                   <button type="submit" class="btn btn-default">提交</button>
108                 </div>
109               </div>
110             </form>
111             
112         </div>
113     </div>
114 </body>
115 </html>
116

blog_upload.php源碼

 1 <?php
 2     /*後臺除去管理員登陸界面，均需加載這個文件，來驗證該頁面管理員是否登陸*/ 
 3     include('check.php');
 4     /*將文件上傳到服務器的目錄裏*/
 5     $key='file1';
 6     $dir='../upfiles/';
 7     if(isset($_FILES[$key])){
 8         $file=$_FILES[$key];
 9         if($file['error']==0){
10             /*文件所處服務器的目錄*/
11             $pathName=$dir . $file['name'];
12             /*文件所在服務器的網址*/
13             $urlName='http://blog.com/blog/upfiles' . $file['name'];
14             $is=move_uploaded_file($file['tmp_name'], $pathName);
15             /*判斷是否移動成功*/
16             if(!$is){
17                 die("上傳失敗");
18             }
19             /*編輯器來判斷是否成功上傳圖片*/
20             $json=array(
21                 'success' => true,
22                 'msg'     => '',
23                 'file_path'=>$urlName
24                 );
25             echo json_encode($json);
26         }
27     }
28 ?>