溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

發(fā)布時(shí)間:2021-05-27 09:24:58 來源:億速云 閱讀:317 作者:小新 欄目:編程語言

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

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

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

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

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

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁       點(diǎn)擊連接,輸入連接名,(這里我直接取了IP地址的名字127.0.0.1),主機(jī)名和端口號都不用變,這里的用戶名和密碼。如果是你用的是xampp,那么用戶名是root,密碼為空;如果不是用的是xampp安裝的,按照你設(shè)置的用戶名和密碼登錄即可。填寫完畢之后點(diǎn)擊連接測試,沒有問題直接確定即可連接好數(shù)據(jù)庫。

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

此外你要是想掌握數(shù)據(jù)庫,簡單來講你想對數(shù)據(jù)庫的任何操作,都必須操作sql語句,總的來說分為四個(gè)操作:增刪改查。

①增:向數(shù)據(jù)庫寫入數(shù)據(jù)

語句:insert into users (`username`,`password`) values ('name','passwd')

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

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

語句:delete from users WHERE id='3'

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

語句:update set users username='新值', password='新值' WHERE id=3

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

語句:select * from users where id>1 order by id desc limit 0,2

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

(3)html網(wǎng)頁的編寫工具sublime text

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

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

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

DocumentRoot "E:/php/xampp/workplace"
    <Directory "E:/PHP/xampp/workplace">

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁  

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

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

二、博客網(wǎng)站的書寫

1.總體框架

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

2.網(wǎng)站后臺admin的書寫

1)登錄界面(login.php)

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

源碼:

<?php
/*
后臺管理員登錄窗口
 */ 
    
    /*啟動(dòng)session服務(wù),記錄賬號登錄的cookies*/
	session_start();
	
	/*包含一個(gè)配置文件*/
	include('../config.php');
	

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

	 	/*查詢頁面提交的數(shù)據(jù)是否在數(shù)據(jù)庫提供的數(shù)據(jù)存在的sql語句*/
	 	 $sql="select * from admin where ausername='{$ausername}' and apassword='{$apassword}' ";
	 	 /*數(shù)據(jù)庫查詢語句返回結(jié)果*/
	 	 $mysqli_result=$db->query($sql);
	 	 /*以數(shù)組形式存儲(chǔ)數(shù)據(jù)庫查詢語句的返回結(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ò)誤");
	 	 }
	 }
?>

<!--后臺管理員登錄界面></!-->
<!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容器></!-->
	<p class="container">
		<!--bootstrap使用時(shí)建議使用一個(gè)row表格類,包含12個(gè)列></!-->
		<p class="row" style="margin-top:200px;">
			<!--距左邊3個(gè)列></!-->
			<p class="col-md-3"></p>
			<!--中間部分占據(jù)6列></!-->
			<p class="col-md-6" ">
			 
			    <p class="panel panel-primary">
			    	<!--登錄頭部分></!-->
			  		<p class="panel-heading">管理員登錄</p>
			  		<!--登錄的身體部分></!-->
			  		<p class="panel-body">
			    		
			    		<form  class="form-horizontal" action="login.php?do=check" method="post">
							<!--登錄的用戶名那一行></!-->
							<p class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
						    <p class="col-sm-10">
						      	<input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名" datatype="*3-10" errormsg="請輸入長度 范圍在3-10之間的昵稱">
						    </p>
						    </p>
							
							<!--登錄的密碼那一行></!-->
						    <p class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
						    <p class="col-sm-10">
						      	<input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
						    </p>
						    </p>
							
							<!--登錄、注冊那一行></!-->
						    <p class="form-group">
						    <p class="col-sm-3"></p>
						    <!--登錄></!-->
						    <p class="col-sm-4">
						      	<input type="submit" value="登錄" class='btn btn-primary'>
						    </p>
						    <!--注冊></!-->
							<p class="col-sm-4">
								<a href="register.php"><input type="button" value="注冊" class="btn btn-primary"> </a>
							</p>
							</p>
			    		</form>

						

					</p>
					 <!--登錄的尾部分></!-->
			  		 <p class="panel-footer text-right">版權(quán)所有,盜版必究</p>
			    </p>
			
			</p>
			<!--距離右邊三列></!-->
			<p class="col-md-3"></p>
		</p>
	</p>
	<!--窗口背景的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)

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

<?php
	/*包含一個(gè)配置文件*/
	include('../config.php');
	
	if($input->get('do')=='check'){
		/*獲取用戶頁面注冊傳來的用戶名和密碼數(shù)據(jù)*/
		$ausername=$input->post('ausername');
		$apassword=$input->post('apassword');
		$aconfirmpassword=$input->post('aconfirmpassword');
		/*注冊時(shí)的處理*/
		if($apassword!=$aconfirmpassword){
			echo "前后兩次輸入的密碼不一致";
			exit;
		}
		/*將用戶填入的數(shù)據(jù)插入到數(shù)據(jù)庫的sql語句*/
		$sql="INSERT INTO admin(`ausername`,`apassword`) values('$ausername','$apassword')";
		/*提交sql語句到數(shù)據(jù)庫處理*/
		$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容器></!-->
	<p class="container">
		<!--bootstrap使用時(shí)建議使用一個(gè)row表格類,包含12個(gè)列></!-->
		<p class="row" style="margin-top:200px;">
			<!--距左邊3個(gè)列></!-->
			<p class="col-md-3"></p>
			<!--中間部分占據(jù)6列></!-->
			<p class="col-md-6" ">
			 
			    <p class="panel panel-primary">
			    	<!--注冊頭部分></!-->
			  		<p class="panel-heading">管理員注冊</p>
			  		<!--注冊的身體部分></!-->
			  		<p class="panel-body">
			    		
			    		<form  class="form-horizontal" action="register.php?do=check" method="post">
							<!--注冊的用戶名那一行></!-->
							<p class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">用戶名</label>
						    <p class="col-sm-10">
						      	<input type="text" class="form-control" name="ausername" id="ausername" placeholder="請輸入用戶名">
						    </p>
						    </p>
							
							<!--注冊的密碼那一行></!-->
						    <p class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">密碼</label>
						    <p class="col-sm-10">
						      	<input type="password" class="form-control" name="apassword" id="apassword" placeholder="請輸入密碼">
						    </p>
						    </p>
						    <!--注冊的密碼確定那一行></!-->
						    <p class="form-group">
						    	<label for="inputEmail3" class="col-sm-2 control-label">確認(rèn)密碼</label>
						    <p class="col-sm-10">
						      	<input type="password" class="form-control" name="aconfirmpassword" id="aconfirmpassword" placeholder="請?jiān)俅屋斎朊艽a">
						    </p>
						    </p>
							
							<!--提交注冊那一行></!-->
						    <p class="form-group">
						    <p class="col-sm-4"></p>
						    <p class="col-sm-6">
						      	<input type="submit" value="注冊" class='btn btn-primary btn-lg btn-block'>
						    </p>
						    </p>
			    		</form>

						

					</p>
					 <!--登錄的尾部分></!-->
			  		 <p class="panel-footer text-right">版權(quán)所有,盜版必究</p>
			    </p>
			
			</p>
			<!--距離右邊三列></!-->
			<p class="col-md-3"></p>
		</p>
	</p>
	<!--窗口背景的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)

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

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');?>  <!--所有的頁面都需加載這個(gè)文件></!-->
</head>
<body>
	<?php include('nav.inc.php');?>  <!--管理員登錄頁面的標(biāo)題部分></!-->
</body>
</html>

nav.inc.php

<!--后臺管理界面的上方標(biāo)題></!-->
<nav class="navbar navbar-default" role="navigation">
	  <p class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <p 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>
	    </p>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <p 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">系統(tǒng)管理</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>  <!--輸出此時(shí)登錄的賬戶名></!-->
	          <ul class="dropdown-menu">
	            <li><a href="logout.php">退出</a></li>
	           
	          </ul>
	        </li>
	      </ul>
	    </p><!-- /.navbar-collapse -->
	  </p><!-- /.container-fluid -->
	</nav>				

4)博客管理界面(blog.php)

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

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

blog_add.php源碼

<?php
	/*后臺除去管理員登錄界面,均需加載這個(gè)文件,來驗(yàn)證該頁面管理員是否登錄*/ 
	include ('check.php');
	/*取出傳來的pid從而判斷是添加還是修改操作*/
	$pid=$input->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);
	 }



	 /*對于添加操作操作而言,賬戶或密碼不能為空*/
	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í)行失敗";
		}
	}
?>

<!--管理員添加博客或修改博客的界面<>/!-->
<!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');?>
	<p class="container">
	<h3> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.php">返回</a></small></h3>
	<hr/>
		<p class="rows">
			<form class="form-horizontal" role="form" action="blog_add.php?do=add&pid=<?php echo $pid;?>" method="post">
			  <p class="form-group">
			    <label for="inputEmail3" class="col-sm-2 control-label">標(biāo)題</label>
			    <p class="col-sm-6">
			      <input type="text" class="form-control" name="title" placeholder="請輸入標(biāo)題" value='<?php echo $page['title'];?>'>
			    </p>
			  </p>
			  <p class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">作者</label>
			    <p class="col-sm-4">
			      <input type="text" class="form-control" name="author" placeholder="請輸入作者" value='<?php echo $page['author'];?>' >
			    </p>
			  </p>

			  <p class="form-group">
			    <label for="inputPassword3" class="col-sm-2 control-label">正文</label>
			    <p 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>			     	
			    </p>
			  </p>
			  
			  <p class="form-group">
			    <p class="col-sm-offset-2 col-sm-6">
			      <button type="submit" class="btn btn-default">提交</button>
			    </p>
			  </p>
			</form>
			
		</p>
	</p>
</body>
</html>


 

blog_upload.php源碼

<?php
	/*后臺除去管理員登錄界面,均需加載這個(gè)文件,來驗(yàn)證該頁面管理員是否登錄*/ 
	include('check.php');
	/*將文件上傳到服務(wù)器的目錄里*/
	$key='file1';
	$dir='../upfiles/';
	if(isset($_FILES[$key])){
		$file=$_FILES[$key];
		if($file['error']==0){
			/*文件所處服務(wù)器的目錄*/
			$pathName=$dir . $file['name'];
			/*文件所在服務(wù)器的網(wǎng)址*/
			$urlName='http://blog.com/blog/upfiles' . $file['name'];
			$is=move_uploaded_file($file['tmp_name'], $pathName);
			/*判斷是否移動(dòng)成功*/
			if(!$is){
				die("上傳失敗");
			}
			/*編輯器來判斷是否成功上傳圖片*/
			$json=array(
				'success' => true,
				'msg'     => '',
				'file_path'=>$urlName
				);
			echo json_encode($json);
		}
	}
?>

6)管理員管理界面(auser.php)

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁
 

3.主界面(index.php)

這里是游客訪問的主界面,這里給出源碼大家作為參考,

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

閱讀界面(read.php)

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

怎么通過html+css+mysql+php來快速的制作動(dòng)態(tài)網(wǎng)頁

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

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI