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

2021-05-27 0 1,110 百度已收录

给大师介绍若何经过html+css+mysql+php来疾速的制造静态网页,让咱们一同动身探究未知的奥妙吧!!!

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

1、开辟情况的搭建

1)apache+php+mysql情况搭建

由于要用apache来做效劳器,mysql作为数据库来存储数据,php来写代码以此完成网页与数据库的交互数据,以是需求下载上述软件,但上述软件的装置情况、设置装备摆设很费事,以是正在这里用了一个功用弱小的建站集成软件包---XAMPP,

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

2)数据库客户端软件navigat

间接正在cmd饬令把持台操纵数据库其实不便当,不敷直白,固然也能够间接用phpmyadmin来操纵(上述xampp软件包装置以后正在旅游器输出127.0.0.1/phpmyadmin便可翻开),可是phpmyadmin来操纵也没有便当,这里便采纳Oracle公司出品的数据库客户端Navicat

PHP学习_如何通过html+css+mysql+php来快速的制作动态网页 点击毗连,输出毗连名,(这里我间接取了IP地点的名字127.0.0.1),主机名以及端标语都不必变,这里的用户名以及暗码。假如是你用的是xampp,那末用户名是root,暗码为空;假如没有是用的是xampp装置的,依照你配置的用户名以及暗码登录便可。填写终了以后点击毗连测试,不成绩间接断定便可毗连好数据库。

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

别的你如果想把握数据库,复杂来说你想对于数据库的任何操纵,都必需操纵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具备美丽的用户界面以及弱小的功用,十分合适写代码的顺序猿。

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

用sublime text来写网页代码,能够把握如许一个小本领,先新建一个文件,格局保管为html网页格局,而后正在sublime text中翻开,输出html:4s 而后按下tab键便可天生大要框架。固然这个快速键要想运用是要依照我上述给的链接,依照步调装置好E妹妹et这个插件,才干运用。

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,便会呈现下述场景:

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

正在这里我发明我修正的DNS设置装备摆设,没有晓得什么时候再后面加了一条正文,招致无法翻开,大师也要留意依照我给的毗连设置装备摆设好以后,假如打没有开再看一下设置装备摆设文件有没有过错。

总之,设置装备摆设情况以及东西根本上也搭建成功了,接上去我就开端解说这个blog的名目。

2、博客网站的誊写

1.整体框架

起首正在这里我先介绍一下我的整体框架,解说一下,让大师先熟习一下。

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

blog是名目的名字,admin文件夹外面存储的是背景登录文件 core文件夹外面存储中心文件,theme文件夹存储网页的款式文件 upfiles文件夹是存储从当地上传到效劳器的图片信息,以后config.php文件是全部博客网站的设置装备摆设文件,header.inc.php是加载了一个页面款式信息,index.php文件是网站的首页,read.php文件是网站首页文章的详细链接。

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

数据库表中的计划正在这里我给出,便当大师参考进修,这里我次要树立了三个表,admin这个透露表现用来存储背景办理员注册以及登录的数据,即账户以及暗码:

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

page这个表次要是用来存储博客信息,正在这里也给图片,便当装置图来建表:

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

最初给出setting这个表,次要是用来存储博客的零碎配置:

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

2.网站背景admin的誊写

1)登录界面(login.php)

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

对于这个页面我会正在这里给出源码,登录页面实在也便是个从数据库读取的进程,这个登录页面的计划我次要是采纳了bootstrap来计划的,没有理解理睬的能够百度一下bootstrap,

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

正在这外面它包括了百般的款式、组件以及JavaScript插件,能够说很好用。

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

正在这里我的运用办法是将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学习_如何通过html+css+mysql+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)

PHP学习_如何通过html+css+mysql+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)

这里有三个功用,修正、删除了、增加博客界面,上面我将独自列出增加博客这个界面

PHP学习_如何通过html+css+mysql+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)

这里仍是有三个功用,修正、删除了以及增加,这里我就不但唯一一列进去了,详细可参考文末给出的源码

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

7)零碎办理界面

零碎办理能够正在这里配置题目、介绍以及博客每一页的表现数目

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

3.主界面(index.php)

这里是旅客拜访的主界面,这里给出源码大师作为参考,

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

浏览界面(read.php)

当你想浏览该文章时,可点击题目进入浏览页,停止浏览,异样给出源码,作为参考

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

推选进修:《PHP视频教程》

以上便是若何经过html+css+mysql+php来疾速的制造静态网页的具体内容,更多请存眷酷吧易资源网别的相关文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

酷吧易资源网 PHP教程 PHP学习_如何通过html+css+mysql+php来快速的制作动态网页 https://www.kubayi.com/5447.html

常见问题

相关文章

评论
暂无评论