How to quickly create dynamic web pages through html+css+mysql+php

慕斯
Release: 2023-04-10 06:44:02
forward
13698 people have browsed it

Let me introduce to you how to quickly create dynamic web pages through html css mysql php. Let us set out to explore the unknown mysteries together! ! !

How to quickly create dynamic web pages through html+css+mysql+php

1. Construction of development environment

1)apache php mysql environment construction

Because Apache is used as the server, MySQL is used as the database to store data, and PHP is used to write code to realize the interactive data between the web page and the database, so the above software needs to be downloaded, but the installation environment of the above software , configuration is very troublesome, so here I use a powerful website building integration software package---XAMPP,

           

    (2) Database client software navigat

It is inconvenient and not straightforward enough to operate the database directly on the cmd command console. Of course, you can also directly use phpmyadmin to operate it (after installing the above xampp software package, enter 127.0 in the browser .0.1/phpmyadmin can be opened), but phpmyadmin is inconvenient to operate. Here we use the database client Navicat

produced by Oracle. Click on the connection and enter the connection name. (Here I took it directly. The name of the IP address is 127.0.0.1), the host name and port number do not need to be changed, the user name and password here are. If you are using xampp, then the username is root and the password is empty; if you are not using xampp to install it, just log in according to the username and password you set. After filling in, click the connection test. If there are no problems, you can directly connect to the database.

## In addition, if you want to master the database, simply speaking any operation of the database, you must operate the SQL statement. In general, it is divided into four operations: increase Delete, modify and check.

①Add: Write data to the database

Statement: insert into users (`username`,`password`) values ​​('name','passwd')

(PS novices must pay attention to the `` symbol behind the users data table, which is a quotation mark above the tab key, and the one after values ​​​​is a single quotation mark)

②Delete: Delete existing data

Statement: delete from users WHERE id='3'

③Change: Modify data

Statement: update set users username='new value', password='new value' WHERE id=3

④Check: Read data from the database

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

(3) HTML web page writing tool sublime text

Sublime Text is a code editor (Sublime Text 2 is a paid software, but it can be tried indefinitely), and it is also an advanced text editor for HTML and prose. device. Sublime text has a beautiful user interface and powerful functions, which is very suitable for programmers who write code.

                                                                                                                                                                                                                                  Using sublime text to write web page code, you can master this little trick, first create a new file, save the format as html web page format, and then in Open it in sublime text, enter html:4s and press the tab key to generate the general frame. Of course, if you want to use this shortcut key, you must follow the link I gave above and follow the steps to install the Emmet plug-in before you can use it.

4)Configuration of website domain name

Generally speaking, when you open the URL 127.0.0.1 in the browser, it will be redirected to apache A URL in the default directory. Here I modify it and change it to the directory where I do the project, E:\PHP

\xampp\apache\conf , open the httpd.conf file, and change the path inside to the directory where you store the website. Here I changed it to DocumentRoot "E:/php

/xampp/workplace"

Here you should pay attention to modify the path to your own directory according to your own download. Secondly, I also modified the 127.0.0.1 URL again to make its virtual domain name blog.com. After modification, after restarting, Enter blog.com in the browser, and the following scene will appear:

Here I found the DNS configuration I modified, and I don’t know when I added a comment in front of it. , resulting in the inability to open it. Everyone should also pay attention to configuring the connection according to the connection I gave. If it cannot be opened, check the configuration file for errors.

In short, the configuration environment and tools have been basically set up successfully. Next, I will start to explain the blog project.

2. Writing the blog website

1. Overall framework

First of all, let me introduce my overall structure here Let me explain the framework so that everyone can get familiar with it first.

               

Blog is the name of the project, the admin folder stores the background login file, the core folder stores the core files, and the theme folder stores the style files of the web page upfiles folder It stores the image information uploaded from the local to the server. Then the config.php file is the configuration file of the entire blog website. The header.inc.php loads a page style information. The index.php file is the homepage of the website. The read.php file It is a specific link to the article on the homepage of the website.

The design of the database table is given here for your reference and study. Here I mainly created three tables. The admin representation is used to store background administrator registrations. And login data, that is, account and password:

## This page table is mainly used to store blog information. Pictures are also given here to facilitate the installation of pictures to build tables:

Finally, the setting table is given, which is mainly used to store the system settings of the blog:

                                      .Website backend admin writing

1)Login interface (login.php)

Regarding this page, I will give the source code here. The login page is actually a process of reading from the database. I mainly used bootstrap to design this login page. If you don’t understand, you can Baidu bootstrap,

It contains various styles, components and JavaScript plug-ins, which can be said to be very useful.

## This is here to download Bootstrap, then press the file to press it to the file folder. I have given detailed explanations in both.

Source code:

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





	
	管理员登录界面
	
	
	


管理员登录

Copy after login

(2) Registration interface (register.php)

The registration interface is actually a process of adding data to the database.

Still give the source code, I gave a detailed explanation in the source code.

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


?>







	
	管理员注册界面
	
	
	

管理员注册

Copy after login

3)Backend management page (home.php)

In the source code, add the above The title part of the website has been taken out separately and made into a file (nav.inc.php). The source code is also given here for your study and reference.

home.php source code







	 
	管理员登录
	  

Copy after login

nav.inc.php

4)Blog management interface (blog.php)

There are three functions here, modify, delete, and add blog interface. Below I will list the add blog interface separately

( 5) Add blog interface (blog_add.php)

在这里这个编辑器如果需要图片上传功能的话,需要在文件中设置,这个文件设置为(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 "执行失败";
		}
	}
?>





	
	添加博客
	

	
	
	
	
	
	


博客管理 返回


'>

' >

Copy after login

blog_upload.php源码

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

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

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

  7)系统管理界面

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


  3.主界面(index.php)

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

 

  阅读界面(read.php)

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

推荐学习:《PHP视频教程

The above is the detailed content of How to quickly create dynamic web pages through html+css+mysql+php. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!