如何通过html+css+mysql+php来快速的制作动态网页

如何通过html+css+mysql+php来快速的制作动态网页,第1张

概述如何通过html+css+mysql+php来快速的制作动态网页

给大家介绍如何通过HTML+CSS+MysqL+PHP来快速的制作动态网页,让我们一起出发探索未知的奥秘吧!!!

一、开发环境的搭建

(1)apache+PHP+MysqL环境搭建

因为要用apache来做服务器,MysqL作为数据库来存储数据,PHP来写代码以此实现网页与数据库的交互数据,所以需要下载上述软件,但上述软件的安装环境、配置很麻烦,所以在这里用了一个功能强大的建站集成软件包---XAMPP,

(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

(3)HTML网页的编写工具sublime text

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的项目。

二、博客网站的书写

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容器></!-->	<p class="container">		<!--bootstrap使用时建议使用一个row表格类,包含12个列></!-->		<p class="row" style="margin-top:200px;">			<!--距左边3个列></!-->			<p class="col-md-3"></p>			<!--中间部分占据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">版权所有,盗版必究</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)

注册界面其实也就是个往数据库增加数据的过程。

还是给出源码,源码中我给出了详解。

<?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容器></!-->	<p class="container">		<!--bootstrap使用时建议使用一个row表格类,包含12个列></!-->		<p class="row" style="margin-top:200px;">			<!--距左边3个列></!-->			<p class="col-md-3"></p>			<!--中间部分占据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">确认密码</label>						    <p class="col-sm-10">						      	<input type="password" class="form-control" name="aconfirmpassword" ID="aconfirmpassword" placeholder="请再次输入密码">						    </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">版权所有,盗版必究</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)

在源码中将上述网站的标题那部分单独给拿出来做了一个文件(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">	  <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">系统管理</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>	    </p><!-- /.navbar-collapse -->	  </p><!-- /.container-fluID -->	</nav>				

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

这里有三个功能,修改、删除、添加博客界面,下面我将单独列出添加博客这个界面

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

在这里这个编辑器如果需要图片上传功能的话,需要在文件中设置,这个文件设置为(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');?>	<p class="container">	<h2> 博客管理 <small class="pull-right"><a class='btn btn-default' href="blog.PHP">返回</a></small></h2>	<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">标题</label>			    <p class="col-sm-6">			      <input type="text" class="form-control" name="Title" placeholder="请输入标题" 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	/*后台除去管理员登录界面,均需加载这个文件,来验证该页面管理员是否登录*/ 	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)

当你想阅读该文章时,可点击标题进入阅读页,进行阅读,同样给出源码,作为参考

推荐学习:《PHP视频教程》 总结

以上是内存溢出为你收集整理的如何通过html+css+mysql+php来快速的制作动态网页全部内容,希望文章能够帮你解决如何通过html+css+mysql+php来快速的制作动态网页所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/1008921.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存