Briefly introduce the case of PHP login and registration
Data is stored in MySQL database
The page is built using PHP + HTML
1. First, we first create a folder PHP-login with code development tools (remember to create it in the running directory of your own computer integration tool)
2. Create folders and files (as shown in the figure)
Next show the code part
index.php
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PHP login registration case</title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <style> body { color: white; padding: 20px; background: url(./img/bg.jpg) repeat center top; margin-top: 10%; } button { margin: 10px; } .title { font-size: 60px; text-shadow: 2px 2px 3px #000000; margin-bottom: 20px; } </style> </head> <body> <div class="container"> <div class="col text-center title">PHP registration and login case</div> <button class="btn btn-primary col" onclick="location.href='./register.html'">Register</button> <button class="btn btn-success col" onclick="location.href='./login.html'">Login</button> </div> </body> </html>
register.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Registration Page</title> </head> <script> function ResCheck() { var x=document.forms["Register"]["username"].value; if (x == "" || x == null){ alert("Username cannot be empty!"); return (false); } var y= document.forms["Register"]["password"].value; if (y == "" || y == null){ alert("The password cannot be empty!"); return (false); } var z= document.forms["Register"]["password2"].value; if ( z!=y ) { alert("Twice password input is inconsistent, re-enter!"); return (false); } } </script> <body> <div style="position: absolute; left: 25%; top: 25%;width: 1000px; margin-left:-50px; margin-top: -100px; border: 1px dashed; padding: 50px"> <div> <form action="register.php" method="post" name="Register" onsubmit="return ResCheck()"> <div style="color:black"> <h2>User registration</h2> </div> <div> <label>Username</label> <div> <input type="text" name="username" id="username" placeholder="username" autocomplete="off"> </div> </div> <br/> <div> <label>Password</label> <div> <input type="password" name="password" id="password" placeholder="password" autocomplete="off"> </div> </div> <br/> <div> <label>Confirm Password</label> <div> <input type="password" name="password2" id="password2" placeholder="Enter password again" autocomplete="off"> </div> </div> <br/> <div> <input type="submit" value="submit"> </div> </form> </div> </div> </body> </html>
register.php
<?php //Database Connectivity require("connectsql.php"); //Data received from the registration page $user=$_POST["username"]; $pwd=$_POST["password"]; $sql="INSERT INTO user (username,password) VALUES ('$user','$pwd')"; $select="SELECT username FROM user WHERE username='$user'"; $result=mysqli_query($conn,$select); $row=mysqli_num_rows($result); if(!$row){ if (mysqli_query($conn,$sql)){ echo "<script>alert('Successful registration, please log in');location='login.html'</script>"; }else{ echo "<script>alert('Registration failed, please re-register');location='regsiter.html'</script>"; } }else{ echo "<script>alert('The user already exists, please log in directly');location='login.html'</script>"; } ?>
login.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Register and log in</title> </head> <script language=JavaScript> function InputCheck(){ var x = document.forms["Login"]["username"].value; if (x == "" || x == null){ alert("Please enter a username!"); return (false); } var y= document.forms["Login"]["password"].value; if (y == "" || y == null){ alert("Please enter the password!"); return (false); } } function Regpage() { location='register.html'; } </script> <body> <div style="position: absolute; left: 50%; top: 50%; width: 500px; margin-left:-250px; margin-top: -200px"> <div style="background: #eFeFeF; padding: 20px; border-radius: 4px; box-shadow: 5px 5px 20px #444444"> <div> <form action="login.php" method="post" name="Login" onsubmit="return InputCheck()"> <div style="color: black"> <h2>Registration and login system</h2> </div> <div> <label>Username</label> <div> <input type="text" name="username" id="username" placeholder="username" autocomplete="off"> </div> </div> <div> <label>Password</label> <div> <input type="password" name="password" id="password" placeholder="password" autocomplete="off"> </div> </div> <div> <div> <input type="submit" value="login"> <input type="button" name="register" id="register" value="register" onclick="Regpage()"> </div> </div> </form> </div> </div> </div> </body> </html>
login.php
<?php //Database Connectivity require("connectsql.php"); //I write the connection code to connect to the database on the connectsql.php script //Data received from login page $name=$_POST["username"]; $pwd=$_POST["password"]; $sql="SELECT id,username,password FROM user WHERE username='$name' AND password='$pwd';"; $result=mysqli_query($conn,$sql); $row=mysqli_num_rows($result); if(!$row){ echo "<script>alert('Wrong password, please re-enter');location='login.html'</script>"; } else { echo "<script>alert('login successful');location='user.html'</script>"; } ?>
connectsql.php
<?php // create connection $conn = new mysqli("localhost", "root", "", "regitlogin", 3306); $conn->set_charset("utf8"); // detect connection if ($conn->connect_error) { die("Database connection failed: " . $conn->connect_error); } ?>
user.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>Welcome to successful login</h1> </body> </html>
regitlogin.sql database file code
-- phpMyAdmin SQL Dump --version 5.0.2 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1:3306 -- Generation date: 2021-09-26 02:57:47 -- Server version: 5.7.31 -- PHP version: 7.3.21 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; START TRANSACTION; SET time_zone = " + 00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `regitlogin` -- -------------------------------------------------- -------- -- -- table structure `user` -- DROP TABLE IF EXISTS `user`; CREATE TABLE IF NOT EXISTS `user` ( `id` mediumint(32) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'id', `username` varchar(255) COLLATE utf8_unicode_ci NOT NULL COMMENT 'username', `password` varchar(64) COLLATE utf8_unicode_ci NOT NULL COMMENT 'password', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Database screenshot:
Specific database operations: first create a database named regitlogin, and then create a data table user, the options are id, username, password specific type parameters as shown in the figure below