简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PHP实例演示会话控制/简单的登录注册功能
Blogger Information
Blog 36
fans 1
comment 0
visits 26098
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP实例演示会话控制/简单的登录注册功能
早晨
Original
657 people have browsed it

首页登录入口

  1. <?php
  3. namespace _0825;
  5. session_start();
  7. // 判断是否已登录?
  8. if (isset($_SESSION['user'])) {
  9.     $us = unserialize($_SESSION['user']);
  10. }
  11. ?>
  12. <!DOCTYPE html>
  13. <html lang="zh-CN">
  15. <head>
  16.     <meta charset="UTF-8">
  17.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  18.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.     <title>首页登录入口</title>
  20. </head>
  21. <style>
  22.     nav {
  23.         height: 40px;
  24.         background-color: deepskyblue;
  25.         padding: 0 20px;
  26.         display: flex;
  27.         justify-content: space-between;
  28.         align-items: center;
  29.     }
  31.     nav>a {
  32.         color: white;
  33.         text-decoration: none;
  34.     }
  35. </style>
  37. <body>
  38.     <nav>
  39.         <a href="index.php">我的博客</a>
  41.         <?php if (isset($us)) : ?>
  42.             <span style="margin-left: 400px">用户名：<?= $us['name'] ?></span>
  43.             <span style="color: red;">邮箱：<?= $us['email'] ?></span>
  45.             <a id="logout">退出</a>
  46.         <?php else : ?>
  47.             <a href="login.php">登录</a>
  48.         <?php endif ?>
  49.     </nav>
  50.     <script>
  51.         document.querySelector('#logout').addEventListener('click', function(event) {
  52.             if (confirm('是否退出')) {
  53.                 event.preventDefault();
  54.                 window.location.assign("top.php?us=logout");
  55.             }
  56.         });
  57.     </script>
  58. </body>
  60. </html>

用户登录login.php

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>用户登录</title>
  9.     <link rel="stylesheet" href="css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="css/bootstrap.min.css">
  11.     <style type="text/css">
  12.         body,
  13.         html {
  14.             font-size: 100%;
  15.             padding: 0;
  16.             margin: 0;
  17.         }
  19.         /* Reset */
  20.         *,
  21.         *:after,
  22.         *:before {
  23.             -webkit-box-sizing: border-box;
  24.             -moz-box-sizing: border-box;
  25.             box-sizing: border-box;
  26.         }
  29.         .clearfix:before,
  30.         .clearfix:after {
  31.             content: " ";
  32.             display: table;
  33.         }
  35.         .clearfix:after {
  36.             clear: both;
  37.         }
  39.         body {
  40.             background: #00b4ef;
  41.             color: #D5D6E2;
  42.             font-weight: 500;
  43.             font-size: 1.05em;
  44.             font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
  45.         }
  47.         a {
  48.             color: rgba(255, 255, 255, 0.6);
  49.             outline: none;
  50.             text-decoration: none;
  51.             -webkit-transition: 0.2s;
  52.             transition: 0.2s;
  53.         }
  55.         a:hover,
  56.         a:focus {
  57.             color: #74777b;
  58.             text-decoration: none;
  59.         }
  61.         .form-horizontal {
  62.             background: #fff;
  63.             padding-bottom: 40px;
  64.             border-radius: 15px;
  65.             text-align: center;
  66.         }
  68.         .form-horizontal .heading {
  69.             display: block;
  70.             font-size: 35px;
  71.             font-weight: 700;
  72.             padding: 35px 0;
  73.             border-bottom: 1px solid #f0f0f0;
  74.             margin-bottom: 30px;
  75.         }
  77.         .form-horizontal .form-group {
  78.             padding: 0 40px;
  79.             margin: 0 0 25px 0;
  80.             position: relative;
  81.         }
  83.         .form-horizontal .form-control {
  84.             background: #f0f0f0;
  85.             border: none;
  86.             border-radius: 20px;
  87.             box-shadow: none;
  88.             padding: 0 20px 0 45px;
  89.             height: 40px;
  90.             transition: all 0.3s ease 0s;
  91.         }
  93.         .form-horizontal .form-control:focus {
  94.             background: #e0e0e0;
  95.             box-shadow: none;
  96.             outline: 0 none;
  97.         }
  99.         .form-horizontal .form-group i {
  100.             position: absolute;
  101.             top: 12px;
  102.             left: 60px;
  103.             font-size: 17px;
  104.             color: #c8c8c8;
  105.             transition: all 0.5s ease 0s;
  106.         }
  108.         .form-horizontal .form-control:focus+i {
  109.             color: #00b4ef;
  110.         }
  112.         .form-horizontal .fa-question-circle {
  113.             display: inline-block;
  114.             position: absolute;
  115.             top: 12px;
  116.             right: 60px;
  117.             font-size: 20px;
  118.             color: #808080;
  119.             transition: all 0.5s ease 0s;
  120.         }
  122.         .form-horizontal .fa-question-circle:hover {
  123.             color: #000;
  124.         }
  126.         .form-horizontal .main-checkbox {
  127.             float: left;
  128.             width: 20px;
  129.             height: 20px;
  130.             background: #11a3fc;
  131.             border-radius: 50%;
  132.             position: relative;
  133.             margin: 5px 0 0 5px;
  134.             border: 1px solid #11a3fc;
  135.         }
  137.         .form-horizontal .main-checkbox label {
  138.             width: 20px;
  139.             height: 20px;
  140.             position: absolute;
  141.             top: 0;
  142.             left: 0;
  143.             cursor: pointer;
  144.         }
  146.         .form-horizontal .main-checkbox label:after {
  147.             content: "";
  148.             width: 10px;
  149.             height: 5px;
  150.             position: absolute;
  151.             top: 5px;
  152.             left: 4px;
  153.             border: 3px solid #fff;
  154.             border-top: none;
  155.             border-right: none;
  156.             background: transparent;
  157.             opacity: 0;
  158.             -webkit-transform: rotate(-45deg);
  159.             transform: rotate(-45deg);
  160.         }
  162.         .form-horizontal .main-checkbox input[type=checkbox] {
  163.             visibility: hidden;
  164.         }
  166.         .form-horizontal .main-checkbox input[type=checkbox]:checked+label:after {
  167.             opacity: 1;
  168.         }
  170.         .form-horizontal .text {
  171.             float: left;
  172.             margin-left: 7px;
  173.             line-height: 20px;
  174.             padding-top: 5px;
  175.             text-transform: capitalize;
  176.         }
  178.         .form-horizontal .text a {
  179.             color: #000;
  180.         }
  182.         .form-horizontal .text a:hover {
  183.             color: red;
  184.         }
  186.         .form-horizontal .btn {
  187.             float: right;
  188.             font-size: 14px;
  189.             color: #fff;
  190.             background: #00b4ef;
  191.             border-radius: 30px;
  192.             padding: 10px 25px;
  193.             border: none;
  194.             text-transform: capitalize;
  195.             transition: all 0.5s ease 0s;
  196.         }
  198.         @media only screen and (max-width: 479px) {
  199.             .form-horizontal .form-group {
  200.                 padding: 0 25px;
  201.             }
  203.             .form-horizontal .form-group i {
  204.                 left: 45px;
  205.             }
  207.             .form-horizontal .btn {
  208.                 padding: 10px 20px;
  209.             }
  210.         }
  211.     </style>
  212. </head>
  214. <body>
  215.     <div class="demo" style="padding: 20px 0;">
  216.         <div class="container">
  217.             <div class="row">
  218.                 <div class="col-md-offset-3 col-md-6">
  219.                     <form class="form-horizontal" action="top.php?us=login" method="post" onsubmit="return compare()">
  220.                         <span class="heading">用户登录</span>
  221.                         <div class="form-group">
  222.                             <input type="email" class="form-control" name="email" id="inputEmail" placeholder="请输入邮箱">
  223.                             <i class="fa fa-user"></i>
  224.                         </div>
  225.                         <div class="form-group help">
  226.                             <input type="password" class="form-control" name="password" id="Password" placeholder="请输入密码">
  227.                             <i class="fa fa-lock"></i>
  228.                         </div>
  229.                         <div class="form-group">
  230.                             <span class="text"><a href="reg.php">注册用户</a></span>
  231.                             <button type="submit" class="btn btn-default">登录</button>
  232.                         </div>
  233.                     </form>
  234.                 </div>
  235.             </div>
  236.         </div>
  237.     </div>
  238. </body>
  239. </html>

注册用户reg.php

  1. <!DOCTYPE html>
  2. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>注册用户</title>
  9.     <link rel="stylesheet" href="css/font-awesome.min.css">
  10.     <link rel="stylesheet" href="css/bootstrap.min.css">
  11.     <style type="text/css">
  12.         body,
  13.         html {
  14.             font-size: 100%;
  15.             padding: 0;
  16.             margin: 0;
  17.         }
  19.         /* Reset */
  20.         *,
  21.         *:after,
  22.         *:before {
  23.             -webkit-box-sizing: border-box;
  24.             -moz-box-sizing: border-box;
  25.             box-sizing: border-box;
  26.         }
  29.         .clearfix:before,
  30.         .clearfix:after {
  31.             content: " ";
  32.             display: table;
  33.         }
  35.         .clearfix:after {
  36.             clear: both;
  37.         }
  39.         body {
  40.             background: #00b4ef;
  41.             color: #D5D6E2;
  42.             font-weight: 500;
  43.             font-size: 1.05em;
  44.             font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif;
  45.         }
  47.         a {
  48.             color: rgba(255, 255, 255, 0.6);
  49.             outline: none;
  50.             text-decoration: none;
  51.             -webkit-transition: 0.2s;
  52.             transition: 0.2s;
  53.         }
  55.         a:hover,
  56.         a:focus {
  57.             color: #74777b;
  58.             text-decoration: none;
  59.         }
  61.         .form-horizontal {
  62.             background: #fff;
  63.             padding-bottom: 40px;
  64.             border-radius: 15px;
  65.             text-align: center;
  66.         }
  68.         .form-horizontal .heading {
  69.             display: block;
  70.             font-size: 35px;
  71.             font-weight: 700;
  72.             padding: 35px 0;
  73.             border-bottom: 1px solid #f0f0f0;
  74.             margin-bottom: 30px;
  75.         }
  77.         .form-horizontal .form-group {
  78.             padding: 0 40px;
  79.             margin: 0 0 25px 0;
  80.             position: relative;
  81.         }
  83.         .form-horizontal .form-control {
  84.             background: #f0f0f0;
  85.             border: none;
  86.             border-radius: 20px;
  87.             box-shadow: none;
  88.             padding: 0 20px 0 45px;
  89.             height: 40px;
  90.             transition: all 0.3s ease 0s;
  91.         }
  93.         .form-horizontal .form-control:focus {
  94.             background: #e0e0e0;
  95.             box-shadow: none;
  96.             outline: 0 none;
  97.         }
  99.         .form-horizontal .form-group i {
  100.             position: absolute;
  101.             top: 12px;
  102.             left: 60px;
  103.             font-size: 17px;
  104.             color: #c8c8c8;
  105.             transition: all 0.5s ease 0s;
  106.         }
  108.         .form-horizontal .form-control:focus+i {
  109.             color: #00b4ef;
  110.         }
  112.         .form-horizontal .fa-question-circle {
  113.             display: inline-block;
  114.             position: absolute;
  115.             top: 12px;
  116.             right: 60px;
  117.             font-size: 20px;
  118.             color: #808080;
  119.             transition: all 0.5s ease 0s;
  120.         }
  122.         .form-horizontal .fa-question-circle:hover {
  123.             color: #000;
  124.         }
  126.         .form-horizontal .main-checkbox {
  127.             float: left;
  128.             width: 20px;
  129.             height: 20px;
  130.             background: #11a3fc;
  131.             border-radius: 50%;
  132.             position: relative;
  133.             margin: 5px 0 0 5px;
  134.             border: 1px solid #11a3fc;
  135.         }
  137.         .form-horizontal .main-checkbox label {
  138.             width: 20px;
  139.             height: 20px;
  140.             position: absolute;
  141.             top: 0;
  142.             left: 0;
  143.             cursor: pointer;
  144.         }
  146.         .form-horizontal .main-checkbox label:after {
  147.             content: "";
  148.             width: 10px;
  149.             height: 5px;
  150.             position: absolute;
  151.             top: 5px;
  152.             left: 4px;
  153.             border: 3px solid #fff;
  154.             border-top: none;
  155.             border-right: none;
  156.             background: transparent;
  157.             opacity: 0;
  158.             -webkit-transform: rotate(-45deg);
  159.             transform: rotate(-45deg);
  160.         }
  162.         .form-horizontal .main-checkbox input[type=checkbox] {
  163.             visibility: hidden;
  164.         }
  166.         .form-horizontal .main-checkbox input[type=checkbox]:checked+label:after {
  167.             opacity: 1;
  168.         }
  170.         .form-horizontal .text {
  171.             float: left;
  172.             margin-left: 7px;
  173.             line-height: 20px;
  174.             padding-top: 5px;
  175.             text-transform: capitalize;
  176.         }
  178.         .form-horizontal .text a {
  179.             color: #000;
  180.         }
  182.         .form-horizontal .text a:hover {
  183.             color: red;
  184.         }
  186.         .form-horizontal .btn {
  187.             float: right;
  188.             font-size: 14px;
  189.             color: #fff;
  190.             background: #00b4ef;
  191.             border-radius: 30px;
  192.             padding: 10px 25px;
  193.             border: none;
  194.             text-transform: capitalize;
  195.             transition: all 0.5s ease 0s;
  196.         }
  198.         @media only screen and (max-width: 479px) {
  199.             .form-horizontal .form-group {
  200.                 padding: 0 25px;
  201.             }
  203.             .form-horizontal .form-group i {
  204.                 left: 45px;
  205.             }
  207.             .form-horizontal .btn {
  208.                 padding: 10px 20px;
  209.             }
  210.         }
  211.     </style>
  213. </head>
  215. <body>
  217.     <div class="demo" style="padding: 20px 0;">
  218.         <div class="container">
  219.             <div class="row">
  220.                 <div class="col-md-offset-3 col-md-6">
  221.                     <form class="form-horizontal" action="top.php?us=reg" method="post" onsubmit="return compare()">
  222.                         <span class="heading">注册用户</span>
  223.                         <div class="form-group">
  224.                             <input type="text" class="form-control" name="name" id="inputName" placeholder="请输入昵称">
  225.                             <i class="fa fa-user"></i>
  226.                         </div>
  227.                         <div class="form-group">
  228.                             <input type="email" class="form-control" name="email" id="inputEmail" placeholder="请输入邮箱">
  229.                             <i class="fa fa-user"></i>
  230.                         </div>
  231.                         <div class="form-group help">
  232.                             <input type="password" class="form-control" name="password1" id="Pass1" placeholder="密码不少于8位">
  233.                             <i class="fa fa-lock"></i>
  234.                         </div>
  235.                         <div class="form-group help">
  236.                             <input type="password" class="form-control" name="password2" id="Pass2" placeholder="重复输入密码">
  237.                             <i class="fa fa-lock"></i>
  238.                         </div>
  239.                         <div class="form-group">
  240.                             <span class="text"><a href="login.php">用户登录</a></span>
  241.                             <button type="submit" class="btn btn-default" id="reg">提交注册</button>
  242.                         </div>
  243.                     </form>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.     </div>
  248.     <script>
  249.         function password() {
  250.             if (document.forms[0].pass1.value.trim() !== document.forms[0].pass2.value.trim()) {
  251.                 document.querySelector('#reg').innerText = "两次密码不一样，请重新设置。";
  252.                 return false;
  253.             }
  254.         }
  255.     </script>
  256. </body>
  258. </html>

会话处理top.php

  1. <?php
  3. namespace _0825;
  5. use PDO;
  6. // 开户会话
  7. session_start();
  8. // 连接数据库
  9. $db = new PDO('mysql:dbname=phpedu', 'root', '4889671');
  10. $stmt = $db->prepare('SELECT * FROM `admin_user`;');
  11. if ($stmt->execute()) {
  12.     $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
  13. } else {
  14.     print_r($stmt->errorInfo());
  15. }
  17. // 获取用户
  18. $us = strtolower($_GET['us']);
  19. switch ($us) {
  20.         // 注册
  21.     case 'reg':
  22.         // 1. 获取新用户的数据
  23.         $name = $_POST['name'];
  24.         $email = $_POST['email'];
  25.         $password = sha1(md5($_POST['password2']));
  26.         $datetime = time();
  27.         $sql = "INSERT `admin_user` SET `name`= ?, `email`= ?, `password`= ?, `datetime`= ?";
  28.         $stmt = $db->prepare($sql);
  29.         $data = [$name, $email, $password, $datetime];
  30.         if ($stmt->execute($data)) {
  31.             if ($stmt->rowCount() > 0) {
  32.                 // 注册成功之后,让用户自动登录
  33.                 $sql = 'SELECT * FROM `admin_user` WHERE `id` = ' . $db->lastInsertId();
  34.                 $stmt = $db->prepare($sql);
  35.                 $stmt->execute();
  36.                 $newUser = $stmt->fetch(PDO::FETCH_ASSOC);
  37.                 $_SESSION['user'] = serialize($newUser);
  38.                 exit('<script>alert("注册成功");location.href="index.php"</script>');
  39.             } else {
  40.                 exit('<script>alert("注册失败");location.href="reg.php"</script>');
  41.             }
  42.         } else {
  43.             print_r($stmt->errorInfo());
  44.         }
  46.         // 登录
  47.     case 'login':
  48.         if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  49.             $email = $_POST['email'];
  50.             $password = sha1(md5($_POST['password']));
  51.             $result = array_filter($users, function ($user) use ($email, $password) {
  52.                 return $user['email'] === $email && $user['password'] === $password;
  53.             });
  54.             if (count($result) === 1) {
  55.                 // 登录成功,写入session
  56.                 $_SESSION['user'] = serialize(array_pop($result));
  57.                 exit('<script>alert("验证通过");location.href="index.php"</script>');
  58.             }
  59.             exit('请求类型错误');
  60.         }
  62.     case 'logout':
  63.         if (isset($_SESSION['user'])) {
  64.             session_destroy();
  65.             exit('<script>alert("退出成功");location.href="index.php"</script>');
  66.         }
  67.     default:
  68.         exit('参数非法或未定义操作');
  69. }

运行效果

![![![](https://img.php.cn/upload/image/372/649/711/1661417934404408.jpg)](https://img.php.cn/upload/image/540/952/244/1661417923608889.jpg)](https://img.php.cn/upload/image/962/396/429/1661417915716768.jpg)

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！