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

这篇文章将为大家详细讲解有关怎么通过html+css+MySQL+php来快速的制作动态网页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

目前创新互联已为上千多家的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、馆陶网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

一、开发环境的搭建

(1)apache+php+mysql环境搭建

因为要用apache来做服务器,mysql作为数据库来存储数据,php来写代码以此实现网页与数据库的交互数据,所以需要下载上述软件,但上述软件的安装环境、配置很麻烦,所以在这里用了一个功能强大的建站集成软件包---XAMPP,具体的安装方法可见链接(点击打开链接)。

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

当然,也有可能启动Apache时候出现错误,这里给出链接(点击打开链接),如果apache启动有错误可以参考上面这个链接来解决问题。

(2)数据库客户端软件navigat

直接在cmd命令控制台操作数据库并不方便,不够直白,当然也可以直接用phpmyadmin来操作(上述xampp软件包安装之后在游览器输入127.0.0.1/phpmyadmin即可打开),但是phpmyadmin来操作也不方便,这里便采用Oracle公司出品的数据库客户端Navicat,这里还是给出链接(点击打开链接),按照要求下载即可,

怎么通过html+css+mysql+php来快速的制作动态网页       点击连接,输入连接名,(这里我直接取了IP地址的名字127.0.0.1),主机名和端口号都不用变,这里的用户名和密码。如果是你用的是xampp,那么用户名是root,密码为空;如果不是用的是xampp安装的,按照你设置的用户名和密码登录即可。填写完毕之后点击连接测试,没有问题直接确定即可连接好数据库。

怎么通过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

如果你想进一步深入的了解mysql语句的话,看一下这里的连接,(点击打开链接)连接给出了这四个操作的具体参数的详解,要想用数据库一定要掌握这四个操作。

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

Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime text具有漂亮的用户界面和强大的功能,非常适合写代码的程序猿。在这里还是给出sublime text的安装方法以及注册码及常用插件的安装步骤,按照连接下载即可。(点击打开链接)

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

用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"
   

这里要注意按照自己的下载按照路径来修改为自己的目录,其次我还对这个127.0.0.1这个网址再次做了修改,使其虚拟域名为blog.com,具体的配置及修改还是见链接(点击打开链接),修改完之后重启之后,在游览器输入blog.com,便会出现下述场景:

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

在这里我发现我修改的DNS配置,不知道何时再前面加了一条注释,导致没法打开,大家也要注意按照我给的连接配置好之后,如果打不开再看一下配置文件有无错误。

总之,配置环境和工具基本上也搭建成功了,接下来我就开始讲解这个blog的项目。

二、博客网站的书写

1.总体框架

首先在这里我先介绍一下我的总体框架,讲解一下,让大家先熟悉一下。

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

blog是项目的名字,admin文件夹里面存储的是后台登录文件  core文件夹里面存储核心文件,theme文件夹存储网页的样式文件  upfiles文件夹是存储从本地上传到服务器的图片信息,之后config.php文件是整个博客网站的配置文件,header.inc.php是加载了一个页面样式信息,index.php文件是网站的首页,read.php文件是网站首页文章的具体链接。

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

数据库表中的设计在这里我给出,方便大家参考学习,这里我主要建立了三个表,admin这个表示用来存储后台管理员注册和登录的数据,即账户和密码:

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

page这个表主要是用来存储博客信息,在这里也给图片,方便安装图来建表:

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

最后给出setting这个表,主要是用来存储博客的系统设置:

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

2.网站后台admin的书写

(1)登录界面(login.php)

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

关于这个页面我会在这里给出源码,登录页面其实也就是个从数据库读取的过程,这个登录页面的设计我主要是采用了bootstrap来设计的,不明白的可以百度一下bootstrap,可以参考我的链接来看一下(点击打开链接)

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

在这里面它包含了各式的样式、组件和JavaScript插件,可以说很好用。

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

在这里我的使用方法是将bootstrap下载下来,然后将文件加压,复制到theme这个文件夹下面,调用方法见下面的源码,在源码中我都给出了详细的解释。

源码:

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("账户或密码错误");
	 	 }
	 }
?>





	
	管理员登录界面
	
	
	



	
	
		
		
			
			

               管理员登录

                     用户名                 

    

          密码                 

    

         

                     

      

    

      版权所有,盗版必究

    

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)注册界面(register.php)

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

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

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

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 "注册失败";
		}
	}


?>







	
	管理员注册界面
	
	
	


	
	
		
		
			
			

               管理员注册

                     用户名                 

    

          密码                 

    

               确认密码                 

    

         

                

    

    

      版权所有,盗版必究

    

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)后台管理页面(home.php)

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

在源码中将上述网站的标题那部分单独给拿出来做了一个文件(nav.inc.php),这里也是给出源码,供大家学习参考。

home.php源码







	 
	管理员登录
	  


	  

nav.inc.php



	  
	    
	    
	      
	        Toggle navigation
	        
	        
	        
	      
	      ADMIN
	    

                         博客管理 (current)         
  • 管理员管理
  •          
  • 系统管理
  •                                                                            
  • 退出
  •                                            

      

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

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

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

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

    为什么要单独列出添加博客这个界面呢?因为在添加博客这个界面中加载了一个编辑器,一个强大的在线编辑器simditor,这里还是给出下载及使用连接,大家可以作为参考,学习一下(点击打开链接)在这里这个编辑器如果需要图片上传功能的话,需要在文件中设置,这个文件设置为(blog_uopload.php)

    blog_add.php源码

    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 "执行失败";
    		}
    	}
    ?>
    
    
    
    
    
    	
    	添加博客
    	
    
    	
    	
    	
    	
    	
    	
    
    
    
    	
    	
    	

     博客管理 返回


    " method="post">        标题            '>     

      

           作者            ' >     

      

           正文                            

      

                     提交     

      


     

    blog_upload.php源码

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

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

    这里还是有三个功能,修改、删除和添加,这里我就不单独一一列出来了,具体可参考文末给出的源码

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

    (7)系统管理界面

    系统管理可以在这里设置标题、介绍和博客每页的显示数量

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

    3.主界面(index.php)

    这里是游客访问的主界面,这里给出源码大家作为参考,

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

    阅读界面(read.php)

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

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

    关于“怎么通过html+css+mysql+php来快速的制作动态网页”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    名称栏目:怎么通过html+css+mysql+php来快速的制作动态网页
    分享网址:http://hbruida.cn/article/iieeoe.html