php源码建博客1--搭建站点-实现登录页面

Posted yangp67

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php源码建博客1--搭建站点-实现登录页面相关的知识,希望对你有一定的参考价值。

主要:

  1. 站点搭建
  2. 实现登录页面
  3. 分析及改进

 一,站点搭建

1)  在apache安装目录下: 【confextrahttpd-vhosts.conf】加入站点配置

 1 <VirtualHost *:80>
 2     #站点根目录
 3     DocumentRoot "D:htdocsDemo"
 4       #站点绑定的域名
 5     ServerName www.test.com
 6      #站点别名
 7     ServerAlias test.com
 8   <Directory  "D:htdocsDemo">
 9         #允许所有访问
10         #allow from all
11         Require all granted
12         #允许分布式权限配置(允许重写)(.htacess)
13         AllowOverride All
14         #不显示站点目录的文件结构
15         Options -indexes
16   </Directory>
17 </VirtualHost>

2) host文件添加域名解析。 host文件位置:【C:WindowsSystem32driversetchosts】

1 127.0.0.1 www.test.com  test.com

3) 重启apache。 完成站点配置。

二,实现登录页面

1)创建项目目录blog  【D:htdocsDemolog】, 初始化git,并提交到码云

在项目目录中右键》Git Bash     前提:已经安装git

1  git init 
2  git remote add origin https://gitee.com/NewbiesYang/young_blog
3  git pull origin master

 2)用户数据表pbg_users

 1 CREATE TABLE `pbg_users` (
 2   `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 用户主键,
 3   `username` varchar(20) NOT NULL COMMENT 用户名,
 4   `pwd` char(32) NOT NULL COMMENT 密码,
 5   `email` varchar(50) NOT NULL DEFAULT ‘‘ COMMENT 注册邮箱,
 6   `token_email` varchar(32) NOT NULL DEFAULT ‘‘ COMMENT 邮箱验证,
 7   `flag` tinyint(1) unsigned NOT NULL DEFAULT 0 COMMENT 是否是管理员,1-管理员,2-普通用户,
 8   `created_at` datetime DEFAULT NULL COMMENT 注册时间,
 9   `updated_at` datetime DEFAULT NULL COMMENT 最后一次登录时间,
10   `login_ip` varchar(20) NOT NULL DEFAULT ‘‘ COMMENT 最后登录的ip地址,
11   `login_times` smallint(6) NOT NULL DEFAULT 0 COMMENT 登录次数,
12   PRIMARY KEY (`id`),
13   UNIQUE KEY `username` (`username`),
14   UNIQUE KEY `email` (`email`)
15 ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

3) 登录界面【login.html

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登录</title>
 6     <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
 7     <link rel="stylesheet" type="text/css" href="css/style.css">
 8 </head>
 9 <body>
10 <div class="container">
11     <div class="content">
12         <form action="login.php" class="layui-form" method="post">
13             <div class="layui-form-item">
14                 <h2>登录</h2>
15             </div><hr>
16 
17             <div class="layui-form-item">
18                 <label class="layui-form-label">用户名:</label>
19                 <div class="layui-input-block">
20                     <input type="text" name="username" class="layui-input" required  lay-verify="required"  placeholder="请输入用户名" autocomplete="off" >
21                 </div>
22             </div>
23 
24             <div class="layui-form-item">
25                 <label class="layui-form-label">&nbsp;&nbsp;&nbsp;码:</label>
26                 <div class="layui-input-block">
27                     <input type="password" name="pwd" required lay-verify="required" placeholder="请输入密码"  class="layui-input">
28                 </div>
29             </div>
30 
31             <div class="layui-form-item">
32                 <div class="layui-input-block">
33                     <button  lay-submit class="layui-btn">登录</button>
34                     <button type="reset" class="layui-btn layui-btn-primary">重置</button>
35                 </div>
36             </div>
37         </form>
38     </div>
39 </div>
40 <script type="text/javascript" src="layui/layui.js"></script>
41 <script>
42     layui.use(form, function(){
43         var form = layui.form;
44     });
45 </script>
46 </body>
47 </html>

4) 登录页面样式调整【css/style.css】

技术分享图片
 1 @charset "UTF-8";
 2 
 3 body {
 4     background-color: #1E9FFF;
 5 }
 6 
 7 /*登录*/
 8 .container {
 9     position: absolute;
10     left: 50%;
11     top:50%;
12     width: 500px;
13     margin-left: -250px;
14     margin-top: -200px;"
15 }
16 .content{
17     background: #ffffff;
18     padding: 20px;
19     border-radius: 4px;
20     box-shadow: 5px 5px 50px #444444;
21 }
查看样式表

 

5)登录操作: 处理登录信息  【login.php】

技术分享图片
 1 <?php
 2 /**
 3  * 登录数据处理
 4  * User: young
 5  */
 6 header("content-type:text/html;charset=utf-8");
 7 //1-接收登录信息
 8 $data = array();
 9 $data[‘username‘] = trim($_POST[‘username‘]);
10 $data[‘pwd‘] = trim($_POST[‘pwd‘]);
11 
12 //2-连接数据库
13 $conn = @mysql_connect(‘localhost‘,‘root‘,‘root‘) or die(‘连接数据库失败!‘);
14 // mysql_set_charset("utf8");
15 // mysql_select_db("web");
16 mysql_query(‘set names utf8‘,$conn);
17 mysql_query(‘use web‘,$conn);
18 
19 //3-查询数据库  校验登录信息
20 $sql = "select username,pwd from pbg_users where username=‘{$data[‘username‘]}‘";
21 $res = mysql_query($sql,$conn);
22 
23 //4-登录结果提示信息
24 if($res != false){
25     $user = mysql_fetch_array($res);
26     if( $user[‘pwd‘] == md5($data[‘pwd‘]) ){ exit(‘登录成功‘); }
27 }
28 echo "用户名或密码不正确!";
29 header(‘refresh:3; url=login.html‘);
点击查看

 6)登录界面效果

技术分享图片

三, 分析改进

1)准备优化

  1. 文件目录结构,实现MVC结构
  2. 访问形式: 实现单入口文件访问

2)提交代码:

1 git add -A
2 git commit -m "第一次提交 && 登录页"
3 git push origin master

查看本项目源码: https://gitee.com/NewbiesYang/young_blog

小结:本次主要完成:

1. 站点配置

2. 登录数据表和登录页制作,登录逻辑简单实现

3. 下一步优化改进

以上是关于php源码建博客1--搭建站点-实现登录页面的主要内容,如果未能解决你的问题,请参考以下文章

Web 三件套个人简单博客系统页面搭建(附源码)

Web 三件套个人简单博客系统页面搭建(附源码)

Nginx 实践案例(源码编译安装方式):利用LNMP搭建wordpress站点

php源码建博客4--实现MVC结构微型框架

博客系统开发_用户登录

记一次负载均衡+NFS博客站点搭建的总结