這篇文章將為大家詳細(xì)講解有關(guān)怎么通過(guò)html+css+MySQL+php來(lái)快速的制作動(dòng)態(tài)網(wǎng)頁(yè)，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、館陶網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

一、開(kāi)發(fā)環(huán)境的搭建

（1）apache+php+mysql環(huán)境搭建

因?yàn)橐胊pache來(lái)做服務(wù)器，mysql作為數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)數(shù)據(jù)，php來(lái)寫(xiě)代碼以此實(shí)現(xiàn)網(wǎng)頁(yè)與數(shù)據(jù)庫(kù)的交互數(shù)據(jù)，所以需要下載上述軟件，但上述軟件的安裝環(huán)境、配置很麻煩，所以在這里用了一個(gè)功能強(qiáng)大的建站集成軟件包---XAMPP，具體的安裝方法可見(jiàn)鏈接（點(diǎn)擊打開(kāi)鏈接）。

當(dāng)然，也有可能啟動(dòng)Apache時(shí)候出現(xiàn)錯(cuò)誤，這里給出鏈接（點(diǎn)擊打開(kāi)鏈接），如果apache啟動(dòng)有錯(cuò)誤可以參考上面這個(gè)鏈接來(lái)解決問(wèn)題。

（2）數(shù)據(jù)庫(kù)客戶端軟件navigat

直接在cmd命令控制臺(tái)操作數(shù)據(jù)庫(kù)并不方便，不夠直白，當(dāng)然也可以直接用phpmyadmin來(lái)操作（上述xampp軟件包安裝之后在游覽器輸入127.0.0.1/phpmyadmin即可打開(kāi)），但是phpmyadmin來(lái)操作也不方便，這里便采用Oracle公司出品的數(shù)據(jù)庫(kù)客戶端Navicat，這里還是給出鏈接（點(diǎn)擊打開(kāi)鏈接），按照要求下載即可，

      點(diǎn)擊連接，輸入連接名，（這里我直接取了IP地址的名字127.0.0.1），主機(jī)名和端口號(hào)都不用變，這里的用戶名和密碼。如果是你用的是xampp，那么用戶名是root，密碼為空；如果不是用的是xampp安裝的，按照你設(shè)置的用戶名和密碼登錄即可。填寫(xiě)完畢之后點(diǎn)擊連接測(cè)試，沒(méi)有問(wèn)題直接確定即可連接好數(shù)據(jù)庫(kù)。

此外你要是想掌握數(shù)據(jù)庫(kù)，簡(jiǎn)單來(lái)講你想對(duì)數(shù)據(jù)庫(kù)的任何操作，都必須操作sql語(yǔ)句，總的來(lái)說(shuō)分為四個(gè)操作：增刪改查。

①增：向數(shù)據(jù)庫(kù)寫(xiě)入數(shù)據(jù)

語(yǔ)句：insert into users (`username`,`password`) values ('name','passwd')

（ps新手一定要注意這離users這個(gè)數(shù)據(jù)表后面的``這個(gè)符號(hào)是在tab鍵上方的引號(hào)，而values后面的就是個(gè)單引號(hào)）

②刪：刪除已有數(shù)據(jù)

語(yǔ)句：delete from users WHERE id='3'

③改：修改數(shù)據(jù)

語(yǔ)句：update set users username='新值', password='新值' WHERE id=3

④查：從數(shù)據(jù)庫(kù)讀取數(shù)據(jù)

語(yǔ)句：select * from users where id>1 order by id desc limit 0,2

如果你想進(jìn)一步深入的了解mysql語(yǔ)句的話，看一下這里的連接，（點(diǎn)擊打開(kāi)鏈接）連接給出了這四個(gè)操作的具體參數(shù)的詳解，要想用數(shù)據(jù)庫(kù)一定要掌握這四個(gè)操作。

（3）html網(wǎng)頁(yè)的編寫(xiě)工具sublime text

Sublime Text 是一個(gè)代碼編輯器（Sublime Text 2是收費(fèi)軟件，但可以無(wú)限期試用），也是HTML和散文先進(jìn)的文本編輯器。Sublime text具有漂亮的用戶界面和強(qiáng)大的功能，非常適合寫(xiě)代碼的程序猿。在這里還是給出sublime text的安裝方法以及注冊(cè)碼及常用插件的安裝步驟，按照連接下載即可。（點(diǎn)擊打開(kāi)鏈接）

用sublime text來(lái)寫(xiě)網(wǎng)頁(yè)代碼，可以掌握這樣一個(gè)小技巧，先新建一個(gè)文件，格式保存為html網(wǎng)頁(yè)格式，然后在sublime text中打開(kāi)，輸入html:4s 然后按下tab鍵即可生成大體框架。當(dāng)然這個(gè)快捷鍵要想使用是要按照我上述給的鏈接，按照步驟安裝好Emmet這個(gè)插件，才能使用。

（4）網(wǎng)站域名的配置

一般來(lái)講，你在游覽器打開(kāi)127.0.0.1這個(gè)網(wǎng)址，會(huì)轉(zhuǎn)到apache默認(rèn)目錄下的一個(gè)網(wǎng)址，這里我對(duì)其進(jìn)行修改，修改為我做項(xiàng)目的目錄，E:\PHP\xampp\apache\conf，打開(kāi)httpd.conf文件，將里面的路徑修改為你存儲(chǔ)網(wǎng)站的目錄，在這里我的修改為

DocumentRoot "E:/php/xampp/workplace"
   

這里要注意按照自己的下載按照路徑來(lái)修改為自己的目錄，其次我還對(duì)這個(gè)127.0.0.1這個(gè)網(wǎng)址再次做了修改，使其虛擬域名為blog.com,具體的配置及修改還是見(jiàn)鏈接（點(diǎn)擊打開(kāi)鏈接），修改完之后重啟之后，在游覽器輸入blog.com，便會(huì)出現(xiàn)下述場(chǎng)景：

在這里我發(fā)現(xiàn)我修改的DNS配置，不知道何時(shí)再前面加了一條注釋，導(dǎo)致沒(méi)法打開(kāi)，大家也要注意按照我給的連接配置好之后，如果打不開(kāi)再看一下配置文件有無(wú)錯(cuò)誤。

總之，配置環(huán)境和工具基本上也搭建成功了，接下來(lái)我就開(kāi)始講解這個(gè)blog的項(xiàng)目。

二、博客網(wǎng)站的書(shū)寫(xiě)

1.總體框架

首先在這里我先介紹一下我的總體框架，講解一下，讓大家先熟悉一下。

blog是項(xiàng)目的名字，admin文件夾里面存儲(chǔ)的是后臺(tái)登錄文件  core文件夾里面存儲(chǔ)核心文件，theme文件夾存儲(chǔ)網(wǎng)頁(yè)的樣式文件  upfiles文件夾是存儲(chǔ)從本地上傳到服務(wù)器的圖片信息，之后config.php文件是整個(gè)博客網(wǎng)站的配置文件，header.inc.php是加載了一個(gè)頁(yè)面樣式信息，index.php文件是網(wǎng)站的首頁(yè)，read.php文件是網(wǎng)站首頁(yè)文章的具體鏈接。

數(shù)據(jù)庫(kù)表中的設(shè)計(jì)在這里我給出，方便大家參考學(xué)習(xí)，這里我主要建立了三個(gè)表，admin這個(gè)表示用來(lái)存儲(chǔ)后臺(tái)管理員注冊(cè)和登錄的數(shù)據(jù)，即賬戶和密碼：

page這個(gè)表主要是用來(lái)存儲(chǔ)博客信息，在這里也給圖片，方便安裝圖來(lái)建表：

最后給出setting這個(gè)表，主要是用來(lái)存儲(chǔ)博客的系統(tǒng)設(shè)置：

2.網(wǎng)站后臺(tái)admin的書(shū)寫(xiě)

（1）登錄界面（login.php）

關(guān)于這個(gè)頁(yè)面我會(huì)在這里給出源碼，登錄頁(yè)面其實(shí)也就是個(gè)從數(shù)據(jù)庫(kù)讀取的過(guò)程，這個(gè)登錄頁(yè)面的設(shè)計(jì)我主要是采用了bootstrap來(lái)設(shè)計(jì)的，不明白的可以百度一下bootstrap，可以參考我的鏈接來(lái)看一下（點(diǎn)擊打開(kāi)鏈接）

在這里面它包含了各式的樣式、組件和JavaScript插件，可以說(shuō)很好用。

在這里我的使用方法是將bootstrap下載下來(lái)，然后將文件加壓，復(fù)制到theme這個(gè)文件夾下面，調(diào)用方法見(jiàn)下面的源碼，在源碼中我都給出了詳細(xì)的解釋。

源碼：

get('do')=='check'){
	 	/*獲取頁(yè)面提交的用戶名和密碼數(shù)據(jù)*/
	 	$ausername=$input->post('ausername');
	 	$apassword=$input->post('apassword');

	 	/*查詢頁(yè)面提交的數(shù)據(jù)是否在數(shù)據(jù)庫(kù)提供的數(shù)據(jù)存在的sql語(yǔ)句*/
	 	 $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' ";
	 	 /*數(shù)據(jù)庫(kù)查詢語(yǔ)句返回結(jié)果*/
	 	 $mysqli_result=$db->query($sql);
	 	 /*以數(shù)組形式存儲(chǔ)數(shù)據(jù)庫(kù)查詢語(yǔ)句的返回結(jié)果*/
	 	 $row=$mysqli_result->fetch_array( MYSQLI_ASSOC);
	 	 /*如果row確實(shí)返回了結(jié)果，則將結(jié)果的aid存儲(chǔ)在session里，并轉(zhuǎn)向home.php文件*/
	 	 if(is_array($row)){
	 	 	$_SESSION['aid']=$row['aid'];
	 	 	header("location:home.php");
	 	 }else{
	 	 	echo("賬戶或密碼錯(cuò)誤");
	 	 }
	 }
?>





	
	
	
	
	



	
	
		
		
			
			

			
			
			 
			    
			    	
			  		管理員登錄

			  		
			  		
			    		
			    		
							
							
						    	用戶名
						    
						      	
						    

						    

							
							
						    
						    	密碼
						    
						      	
						    

						    

							
							
						    
						    

						    
						    
						      	
						    

						    
							
								 
							

							

			    		

						

					

					 
			  		 版權(quán)所有，盜版必究

			    

			
			

			
			

		

	

	
	
		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);
		}
	
	
	

（2）注冊(cè)界面(register.php)

注冊(cè)界面其實(shí)也就是個(gè)往數(shù)據(jù)庫(kù)增加數(shù)據(jù)的過(guò)程。

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

get('do')=='check'){
		/*獲取用戶頁(yè)面注冊(cè)傳來(lái)的用戶名和密碼數(shù)據(jù)*/
		$ausername=$input->post('ausername');
		$apassword=$input->post('apassword');
		$aconfirmpassword=$input->post('aconfirmpassword');
		/*注冊(cè)時(shí)的處理*/
		if($apassword!=$aconfirmpassword){
			echo "前后兩次輸入的密碼不一致";
			exit;
		}
		/*將用戶填入的數(shù)據(jù)插入到數(shù)據(jù)庫(kù)的sql語(yǔ)句*/
		$sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')";
		/*提交sql語(yǔ)句到數(shù)據(jù)庫(kù)處理*/
		$is=$db->query($sql);
		/*判斷是否注冊(cè)成功*/
		if($is){
			echo "注冊(cè)成功";
			header("Location:login.php");
		}else{
			echo "注冊(cè)失敗";
		}
	}


?>







	
	
	
	
	


	
	
		
		
			
			

			
			
			 
			    
			    	
			  		管理員注冊(cè)

			  		
			  		
			    		
			    		
							
							
						    	用戶名
						    
						      	
						    

						    

							
							
						    
						    	密碼
						    
						      	
						    

						    

						    
						    
						    	確認(rèn)密碼
						    
						      	
						    

						    

							
							
						    
						    

						    
						      	
						    

						    

			    		

						

					

					 
			  		 版權(quán)所有，盜版必究

			    

			
			

			
			

		

	

	
	
		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);
		}
	
	
	

（3）后臺(tái)管理頁(yè)面（home.php）

在源碼中將上述網(wǎng)站的標(biāo)題那部分單獨(dú)給拿出來(lái)做了一個(gè)文件（nav.inc.php）,這里也是給出源碼，供大家學(xué)習(xí)參考。

home.php源碼

nav.inc.php

	  
	    
	    
	      
	        Toggle navigation
	        
	        
	        
	      
	      ADMIN
	    


	    
	    
	      
	        博客管理 (current)
	        
管理員管理
	         
系統(tǒng)管理
	      
	     
	      
	       
	        
	              
	          
	            
退出
	           
	          
	        
	      
	    

	  

					

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

這里有三個(gè)功能，修改、刪除、添加博客界面，下面我將單獨(dú)列出添加博客這個(gè)界面

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

為什么要單獨(dú)列出添加博客這個(gè)界面呢？因?yàn)樵谔砑硬┛瓦@個(gè)界面中加載了一個(gè)編輯器，一個(gè)強(qiáng)大的在線編輯器simditor，這里還是給出下載及使用連接，大家可以作為參考，學(xué)習(xí)一下（點(diǎn)擊打開(kāi)鏈接）在這里這個(gè)編輯器如果需要圖片上傳功能的話，需要在文件中設(shè)置，這個(gè)文件設(shè)置為（blog_uopload.php）

blog_add.php源碼

get('pid');
	/*初始化page，為了區(qū)別添加還是修改操作*/
	$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);
	 }



	 /*對(duì)于添加操作操作而言，賬戶或密碼不能為空*/
	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("數(shù)據(jù)不能為空");
		}
		/*如果aid大于1，則得出更新操作，否則執(zhí)行添加操作*/
		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);
			
		}			
		/*判斷是否有結(jié)果*/
		$is=$db->query($sql);
		if($is){
			header("location:blog.php");
		}else{
			echo "執(zhí)行失敗";
		}
	}
?>





	
	
	

	
	
	
	
	
	



	
	
	
 博客管理 返回
	

		
			" method="post">
			  
			    標(biāo)題
			    
			      '>
			    

			  

			  
			    作者
			    
			      ' >
			    

			  


			  
			    正文
			    
			     	
			     	
								     	
			    

			  

			  
			  
			    
			      提交
			    

			  

			
			
		

	

blog_upload.php源碼

 true,
				'msg'     => '',
				'file_path'=>$urlName
				);
			echo json_encode($json);
		}
	}
?>

（6）管理員管理界面（auser.php）

這里還是有三個(gè)功能，修改、刪除和添加，這里我就不單獨(dú)一一列出來(lái)了，具體可參考文末給出的源碼

（7）系統(tǒng)管理界面

系統(tǒng)管理可以在這里設(shè)置標(biāo)題、介紹和博客每頁(yè)的顯示數(shù)量

3.主界面（index.php）

這里是游客訪問(wèn)的主界面，這里給出源碼大家作為參考，

閱讀界面（read.php）

當(dāng)你想閱讀該文章時(shí)，可點(diǎn)擊標(biāo)題進(jìn)入閱讀頁(yè)，進(jìn)行閱讀,同樣給出源碼，作為參考

關(guān)于“怎么通過(guò)html+css+mysql+php來(lái)快速的制作動(dòng)態(tài)網(wǎng)頁(yè)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。