1, PHP development landing page
1. Database construction
First create a test database login table in mysql database:
Set the following fields:
id: it is unique, type int, and select the primary key.
uesrname: user name, type varchar, length 30.
Password: password, type varchar, length 30.
Add a user name and password for testing
A data is inserted, and the username is 22222; The password is 22222
2. Verification code
Publish a basic image generating png image verification code:
1. Generate a picture of png
2. Set the background color for the picture
3. Set font color and style
4. Generate 4-digit random verification code
5. Adjust the rotation angle and position of each generated character and draw it on the png picture
6. Add noise and interference lines to prevent the registration machine from analyzing the original image to register maliciously
7. Output picture
8. Free up memory occupied by pictures
The following is an example of verification code:
```python
```php
<?php
//Setting session must be at the top of the script
session_start();
$image = imagecreatetruecolor(100, 30); //1> Function to set the picture size of verification code
//5> Set the verification code color imagecolorallocate(int im, int red, int green, int blue);
$bgcolor = imagecolorallocate($image,255,255,255); //#ffffff
//6> The area filled with int imagefill(int im, int x, int y, int col) (x,y) is colored. col indicates the color to be painted
imagefill($image, 0, 0, $bgcolor);
//10> Set variables
$captcha_code = "";
//7> Generate random numbers
for($i=0;$i<4;$i++){
//Set font size
$fontsize = 6;
//Set font color, random color
$fontcolor = imagecolorallocate($image, rand(0,120),rand(0,120), rand(0,120)); //0-120 dark color
//Set number
$fontcontent = rand(0,9);
//10>.= Continuously defined variables
$captcha_code .= $fontcontent;
//Set coordinates
$x = ($i*100/4)+rand(5,10);
$y = rand(5,10);
imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
//10> Save to session
$_SESSION['authcode'] = $captcha_code;
//8> Add interference element and set snowflake point
for($i=0;$i<200;$i++){
//The color of the set point, 50-200, is lighter than the number and does not interfere with reading
$pointcolor = imagecolorallocate($image,rand(50,200), rand(50,200), rand(50,200));
//imagesetpixel - draw a single pixel
imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);
}
//9> Add interference elements and set horizontal lines
for($i=0;$i<4;$i++){
//Sets the color of the line
$linecolor = imagecolorallocate($image,rand(80,220), rand(80,220),rand(80,220));
//Set line, two points and one line
imageline($image,rand(1,99), rand(1,29),rand(1,99), rand(1,29),$linecolor);
}
//2> Set header, image/png
header('Content-Type: image/png');
//3> Imagepng() establish png graph function
imagepng($image);
//4> Imagedestroy() ends the graph function and destroys $image
imagedestroy($image);
?>
2.HTML page
<!DOCTYPE html>
<html>
<head>
<title>User login page</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
```php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login interface</title>
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("enter one user name");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("Please input a password");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("Please enter the verification code");
myform.yzm.focus();
return false;
}
}
</script>
<style type="text/css">
body{background-image: url("2.png")}
.container{
width: 380px;
height: 330px;
margin: 0 auto;margin-top: 240px;
box-shadow: 0 0 20px #222;
border-radius:40px;
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative;
left: 40px;
top: 20px;
}
input {
width: 180px;
height: 25px;
}
#yzm{
width: 90px;
height: 25px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="login.php" method="post" onsubmit="return foo();" name="myform" >
<div class="container"style="font-size:17px">
<div class="right">
<h2>User login</h2>
<p>
user name:<input type="text" name="username" placeholder="enter one user name">
</p>
<p>
dense　 Code: < input type = "password" name = "password" placeholder = "please enter password" >
</p>
<p>
Verification Code:<input type="text" name="code" id="yzm" placeholder="Please enter the verification code">
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</p>
<p style=" margin-left: 200px"><a href="zhuce.html">register</a></p>
<p>
<button class="button">Log in now</button>
</p>
</div>
</div>
</form>
</body>
</html>
3.PHP page
Use POST to obtain data, such as user name and password
<?php $username = $_POST["username"]; //user name $password = $_POST["password"]; //password $code = $_POST["code"]; //Verification Code ?>
You need to connect to the database and judge whether the connection is successful. We have introduced the creation of database test and table login. You can connect directly here.
<?php
$link = mysqli_connect('localhost','root','root','test');
if (!$link) {
die("connection failed:".mysqli_connect_error());
}
$sql = "select * from login";
$result = mysqli_query($link, $sql);
$rows = mysqli_fetch_array($result);
?>
The user name and password should be verified and judged to prevent illegal login access
<?php
if($username == "")
{
//echo "please fill in the user name < br >";
echo"<script type='text/javascript'>alert('Please fill in the user name');location='login.html'; </script>";
}
if($password == "")
{
//echo "please fill in the password < br > < a href ='login. HTML '> return < / a >";
echo"<script type='text/javascript'>alert('Please fill in the password');location='login.html';</script>";
}
?>
After filling in the user name and password, the user needs to check whether it is correct in the database. After checking the correctness, you can log in normally and jump to the login success page.
<?php
if($rows) {
//Take the submitted user name and password to the database to find out whether the user name and password exist
if ($username == $rows["username"] && $password == $rows["password"]) {
//echo "verification succeeded! < br >";
echo "<script type='text/javascript'>alert('Login successful');location='success.html';</script>";
} else {
//echo "wrong user name or password < br >";
echo "<script type='text/javascript'>alert('Wrong user name or password');location='login.html';</script>";
//Echo "< a href ='login. HTML '> return < / a >";
}
}
?>
2, PHP development registration page
1.HTML page
<!DOCTYPE html>
<html>
<head>
<title>User registration page</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
list-style:none;
margin:50px auto;
}
li{
padding:12px;
position:relative;
}
label{
width:80px;
display:inline-block;
float:left;
line-height:30px;
}
input[type='text'],input[type='password']{
height:30px;
}
img{
margin-left:10px;
}
input[type="submit"]{
margin-left:80px;
padding:5px 10px;
}
</style>
</head>
<body>
<form action="zhuce.php" method="post">
<ul>
<li>
<label>user name:</label>
<input type="text" name="username" placeholder="Please enter the registered account"/>
</li>
<li>
<label>password:</label>
<input type="password" name="password" placeholder="Please input a password" />
</li>
<li>
<label>Confirm password:</label>
<input type="password" name="confirm" placeholder="Please enter the password again" />
</li>
<li>
<label>Email:</label>
<input type="text" name="email" placeholder="Please enter email address"/>
</li>
<li>
<label>Verification Code:</label>
<input type="text" name="code" size="4" style="float:left" placeholder="Please fill in the verification code"/>
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</li>
<li>
<input type="submit" value="register" />
</li>
</ul>
</form>
</body>
2.PHP page
Use POST to obtain data.
<?php $username = $_POST['username']; //Registered user name $password = $_POST['password']; //Registration password $confirm = $_POST['confirm']; //Confirm password $email = $_POST['email']; //mailbox $code = $_POST['code']; //Verification Code ?>
Continue connecting to the database and tables that have been created
<?php
$link = mysqli_connect('localhost','root','root','test');
if (!$link) {
die("connection failed:".mysqli_connect_error());
}
$sql = "select * from login";
$result = mysqli_query($link, $sql);
$rows = mysqli_fetch_array($result);
?>
Make regular judgment on the entered user name and mailbox
<?php
if ((strlen($username) < 3)||(!preg_match('/^\w+$/i', $username)))
{
echo "<script>alert('The user name must contain at least 3 characters and no illegal characters! Refill');window.location.href='zhuce'</script>";
//Judge the length of user name and illegal characters
}
if (!preg_match('/^[\w\.]+@\w+\.\w+$/i', $email))
{
echo "<script>alert('Email address is illegal! Refill');window.location.href='zhuce.html'</script>";
//Determine whether the email format is legal
}
?>
The biggest difference from user login here is that if the user name has been registered by other users, you will not be able to use this user name again.
You need to read the existing user name data in the database first, and then make a judgment.
<?php
if(mysqli_fetch_array(mysqli_query($link,"select * from login where username = '$username'")))
{
echo "<script>alert('User name already exists');window.location.href='zhuce.html'</script>";
// Determine whether the user name has been registered
}
?>
3, PHP development login registration complete code
1. Login HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login interface</title>
<script type="text/javascript">
function foo(){
if(myform.name.value=="")
{
alert("enter one user name");
myform.name.focus();
return false;
}
if (myform.pwd.value=="")
{
alert("Please input a password");
myform.pwd.focus();
return false;
}
if (myform.yzm.value=="")
{
alert("Please enter the verification code");
myform.yzm.focus();
return false;
}
}
</script>
<style type="text/css">
body{background-image: url("2.png")}
.container{
width: 380px;
height: 330px;
margin: 0 auto;margin-top: 240px;
box-shadow: 0 0 20px #222;
border-radius:40px;
background-color: rgba(152, 242, 242, 0.23);
}
div.right{
position: relative;
left: 40px;
top: 20px;
}
input {
width: 180px;
height: 25px;
}
#yzm{
width: 90px;
height: 25px;
}
.button{
background-color: rgba(230, 228, 236, 0.93); /* Green */
border: none;
color: #110c0f;
padding: 10px 30px;
text-align: center;
display: inline-block;
font-size: 16px;
margin-top: -40px;
margin-left: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="login.php" method="post" onsubmit="return foo();" name="myform" >
<div class="container"style="font-size:17px">
<div class="right">
<h2>User login</h2>
<p>
user name:<input type="text" name="username" placeholder="enter one user name">
</p>
<p>
dense　 Code: < input type = "password" name = "password" placeholder = "please enter password" >
</p>
<p>
Verification Code:<input type="text" name="code" id="yzm" placeholder="Please enter the verification code">
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</p>
<p style=" margin-left: 200px"><a href="zhuce.html">register</a></p>
<p>
<button class="button">Log in now</button>
</p>
</div>
</div>
</form>
</body>
</html>
2. Login PHP page
<?php
//Open Session
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect("127.0.0.1", "root", "7777777",'test');
if (!$link) {
die("connection failed:".mysqli_connect_error());
}
//Accept the submitted user name and password
$username = $_POST["username"];//user name
$password = $_POST["password"];//password
$code = $_POST["code"]; //Verification Code
if($username == "")
{
//echo "please fill in the user name < br >";
echo"<script type='text/javascript'>alert('Please fill in the user name');location='login.html'; </script>";
}
if($password == "")
{
//echo "please fill in the password < br > < a href ='login. HTML '> return < / a >";
echo"<script type='text/javascript'>alert('Please fill in the password');location='login.html';</script>";
}
if($code != $_SESSION['authcode']) //Judge whether the filled verification code matches the information generated by the verification code PHP file
{
echo "<script type='text/javascript'>alert('Verification code error!');location='login.html';</script>";
}
$sql_select="select username,password from login where username= ?"; //Query information from database
$stmt=mysqli_prepare($link,$sql_select);
mysqli_stmt_bind_param($stmt,'s',$username);
mysqli_stmt_execute($stmt);
$result=mysqli_stmt_get_result($stmt);
$row=mysqli_fetch_assoc($result);
if($row){
if($password !=$row['password'] || $username !=$row['username']){
echo "<script>alert('Password error, please re-enter');location='login.html'</script>";
exit;
}
else{
$_SESSION['username']=$row['username'];
echo "<script>alert('Login successful');location='success.html'</script>";
}
}
else{
echo "<script>alert('The user name you entered does not exist');location='login.html'</script>";
exit;
}
?>
3. Register HTML page
<!DOCTYPE html>
<html>
<head>
<title>User registration page</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
list-style:none;
margin:50px auto;
}
li{
padding:12px;
position:relative;
}
label{
width:80px;
display:inline-block;
float:left;
line-height:30px;
}
input[type='text'],input[type='password']{
height:30px;
}
img{
margin-left:10px;
}
input[type="submit"]{
margin-left:80px;
padding:5px 10px;
}
</style>
</head>
<body>
<form action="zhuce.php" method="post">
<ul>
<li>
<label>user name:</label>
<input type="text" name="username" placeholder="Please enter the registered account"/>
</li>
<li>
<label>password:</label>
<input type="password" name="password" placeholder="Please input a password" />
</li>
<li>
<label>Confirm password:</label>
<input type="password" name="confirm" placeholder="Please enter the password again" />
</li>
<li>
<label>Email:</label>
<input type="text" name="email" placeholder="Please enter email address"/>
</li>
<li>
<label>Verification Code:</label>
<input type="text" name="code" size="4" style="float:left" placeholder="Please fill in the verification code"/>
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</li>
<li>
<input type="submit" value="register" />
</li>
</ul>
</form>
</body>
4. Register PHP page
<?php
session_start();
header("Content-type:text/html;charset=utf-8");
$link = mysqli_connect('127.0.0.1','root','7777777','test');
if (!$link) {
die("connection failed:".mysqli_connect_error());
}
$username = $_POST['username'];
$password = $_POST['password'];
$confirm = $_POST['confirm'];
$email = $_POST['email'];
$code = $_POST['code'];
if($username == "" || $password == "" || $confirm == "" || $email == "" || $code == "")
{
echo "<script>alert('Information cannot be empty! Refill');window.location.href='zhuce.html'</script>";
} else if ((strlen($username) < 3)||(!preg_match('/^\w+$/i', $username))) {
echo "<script>alert('The user name must contain at least 3 characters and no illegal characters! Refill');window.location.href='zhuce'</script>";
//Judge the length of user name
}else if(strlen($password) < 5){
echo "<script>alert('The password must be at least 5 digits! Refill');window.location.href='zhuce.html'</script>";
//Judge password length
}else if($password != $confirm) {
echo "<script>alert('The two passwords are different! Refill');window.location.href='zhuce.html'</script>";
//Check whether the two passwords are the same
} else if (!preg_match('/^[\w\.]+@\w+\.\w+$/i', $email)) {
echo "<script>alert('Email address is illegal! Refill');window.location.href='zhuce.html'</script>";
//Determine whether the email format is legal
} else if($code != $_SESSION['authcode']) {
echo "<script>alert('Verification code error! Refill');window.location.href='zhuce.html'</script>";
//Judge whether the verification code is filled in correctly
} else if(mysqli_fetch_array(mysqli_query($link,"select * from login where username = '$username'"))){
echo "<script>alert('User name already exists');window.location.href='zhuce.html'</script>";
} else{
$sql= "insert into login(username, password, confirm, email)values('$username','$password','$confirm','$email')";
//insert database
if(!(mysqli_query($link,$sql))){
echo "<script>alert('Data insertion failed');window.location.href='zhuce.html'</script>";
}else{
echo "<script>alert('Registration succeeded! Go login');window.location.href='login.html'</script>";
}
}
?>
5. Verification code program
<?php
//Setting session must be at the top of the script
session_start();
$image = imagecreatetruecolor(100, 30); //1> Function to set the picture size of verification code
//5> Set the verification code color imagecolorallocate(int im, int red, int green, int blue);
$bgcolor = imagecolorallocate($image,255,255,255); //#ffffff
//6> The area filled with int imagefill(int im, int x, int y, int col) (x,y) is colored. col indicates the color to be painted
imagefill($image, 0, 0, $bgcolor);
//10> Set variables
$captcha_code = "";
//7> Generate random numbers
for($i=0;$i<4;$i++){
//Set font size
$fontsize = 6;
//Set font color, random color
$fontcolor = imagecolorallocate($image, rand(0,120),rand(0,120), rand(0,120)); //0-120 dark color
//Set number
$fontcontent = rand(0,9);
//10>.= Continuously defined variables
$captcha_code .= $fontcontent;
//Set coordinates
$x = ($i*100/4)+rand(5,10);
$y = rand(5,10);
imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor);
}
//10> Save to session
$_SESSION['authcode'] = $captcha_code;
//8> Add interference element and set snowflake point
for($i=0;$i<200;$i++){
//The color of the set point, 50-200, is lighter than the number and does not interfere with reading
$pointcolor = imagecolorallocate($image,rand(50,200), rand(50,200), rand(50,200));
//imagesetpixel - draw a single pixel
imagesetpixel($image, rand(1,99), rand(1,29), $pointcolor);
}
//9> Add interference elements and set horizontal lines
for($i=0;$i<4;$i++){
//Sets the color of the line
$linecolor = imagecolorallocate($image,rand(80,220), rand(80,220),rand(80,220));
//Set line, two points and one line
imageline($image,rand(1,99), rand(1,29),rand(1,99), rand(1,29),$linecolor);
}
//2> Set header, image/png
header('Content-Type: image/png');
//3> Imagepng() establish png graph function
imagepng($image);
//4> Imagedestroy() ends the graph function and destroys $image
imagedestroy($image);
?>
6. Precautions
- This project is implemented through phpstudy. The local Apache server + mysql provided by phpstudy
- Therefore, all files should be put into the directory of phpstudy web page in order to run normally locally
