當前位置：首頁 > 运维知识 > 数据库 >内容正文

数据库

【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

發布時間：2023/12/10 数据库 30 豆豆

生活随笔收集整理的這篇文章主要介紹了【实战】如何通过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><?php include(PATH . '/header.inc.php');?></head> <body><div class="container"><div class="row" style="margin-top:200px;"><div class="col-md-3"></div><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 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><?php include(PATH . '/header.inc.php');?></head> <body><div class="container"><div class="row" style="margin-top:200px;"><div class="col-md-3"></div><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 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"><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><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></div></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');?><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>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做的一
下一篇：前端学习（1615）：前端系列实战课程之