Tạo trang đăng nhập đăng ký đơn giản bằng php mysql

Bài viết này tôi sẽ hướng dẫn chi tiết cách để tạo một trang đăng nhập, đăng ký đơn giản bằng php và mysql. Chức năng đơn giản đó là đăng nhập, đăng ký và đăng xuất.

Tôi sử dụng php 5.6 cho code này, tôi không kiểm tra xem nó có hoạt động với php 7, vì thế hãy đảm bảo bạn đang sử dụng php 5.6 để không gặp lỗi không mong muốn nhé.

Các bước làm

Tạo một bảng cơ sở dữ liệu
Tạo trang đăng ký
Tạo trang đăng nhập
Kết nối với cơ sở dữ liệu
Xác thực người dùng đã đăng nhập
Tạo trang chủ
Tạo trang bảng điều khiển
Tạo trang đăng xuất
Tạo style cho trang

1) Tạo một bảng cơ sở dữ liệu

Chắc chắn rằng bạn đã tạo một cơ sở dữ liệu, tiếp theo để tạo bảng, hãy thực hiện truy vấn dưới đây trong SQL

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `trn_date` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

2) Tạo trang đăng ký

Tạo một file có tên là registration.phpvà dán đoạn code sau vào.

<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đăng ký - Sharescript.net</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<?php
  require('db.php');
    if (isset($_REQUEST['username'])){
    $username = stripslashes($_REQUEST['username']);
    $username = mysqli_real_escape_string($con,$username);
    $email = stripslashes($_REQUEST['email']);
    $email = mysqli_real_escape_string($con,$email);
    $password = stripslashes($_REQUEST['password']);
    $password = mysqli_real_escape_string($con,$password);

    $trn_date = date("Y-m-d H:i:s");
        $query = "INSERT into `users` (username, password, email, trn_date) VALUES ('$username', '".md5($password)."', '$email', '$trn_date')";
        $result = mysqli_query($con,$query);
        if($result){
            echo "<div class='form'><h3>Bạn đã đăng ký thành công</h3><br/>Click để <a href='login.php'>Đăng nhập</a></div>";
        }
    }else{
?>
<div class="form">
<h1>Đăng ký</h1>
<form name="registration" action="" method="post">
<input type="text" name="username" placeholder="Tên đăng nhập" required />
<input type="email" name="email" placeholder="Email" required />
<input type="password" name="password" placeholder="Mật khẩu" required />
<input type="submit" name="submit" value="Đăng ký" />
</form>
</div>
<?php } ?>
</body>
</html>

3) Tạo trang đăng nhập

Tương tự, tạo một file login.phpvà dán code dưới vào.

<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Đăng nhập - sharescript.net</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<?php
  require('db.php');
  session_start();
    if (isset($_POST['username'])){
    
    $username = stripslashes($_REQUEST['username']);
    $username = mysqli_real_escape_string($con,$username);
    $password = stripslashes($_REQUEST['password']);
    $password = mysqli_real_escape_string($con,$password);
        $query = "SELECT * FROM `users` WHERE username='$username' and password='".md5($password)."'";
    $result = mysqli_query($con,$query) or die(mysql_error());
    $rows = mysqli_num_rows($result);
        if($rows==1){
      $_SESSION['username'] = $username;
      header("Location: index.php");
            }else{
        echo "<div class='form'><h3>Tên đăng nhập hoặc mật khẩu không đúng!</h3></br><a href='login.php'>Đăng nhập lại</a></div>";
        }
    }else{
?>
<div class="form">
<h1>Đăng nhập</h1>
<form action="" method="post" name="login">
<input type="text" name="username" placeholder="Tên đăng nhập" required />
<input type="password" name="password" placeholder="Mật khẩu" required />
<input name="submit" type="submit" value="Đăng nhập" />
</form>
<p>Bạn chưa có tài khoản? <a href='registration.php'>Đăng ký ngay</a></p><br/>
Test ngay:<br/>
Tên đăng nhập: sharescript.net<br/>
Mật khẩu: sharescript.net
</div>
<?php } ?>
</body>
</html>

4) Kết nối với cơ sở dữ liệu

Tạo file db.phpvà dán code vào.

<?php
$con = mysqli_connect("localhost","database_username","password","database_name");
if (mysqli_connect_errno())
  {
  echo "Không thể kết nối đến MySQL: " . mysqli_connect_error();
  }
?>

Chú ý: Trong đoạn code mysqli_connect("localhost","database_username","password","database_name")chỉnh sửa thành thông tin database của bạn

5) Xác thực người dùng đã đăng nhập

Dán đoạn code sau vào file auth.php

<?php
session_start();
if(!isset($_SESSION["username"])){
header("Location: login.php");
exit(); }
?>

6) Tạo trang chủ

Trang chủ này chính là file index.php, sau khi đăng nhập thành công sẽ chuyển hướng đến file này.

<?php
include("auth.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sharescript.net</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="form">
<p>Xin chào <?php echo $_SESSION['username']; ?>!</p>
<p>Đây là trang chủ</p>
<p><a href="dashboard.php">Bảng điều khiển</a></p>
<a href="logout.php">Đăng xuất</a>
</div>
</body>
</html>

7) Tạo trang bảng điều khiển

Trang này tương tự như index.phpnhưng là một trang khác. Bạn có thể bỏ qua trang này.

<?php
require('db.php');
include("auth.php");?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bảng điều khiển - Sharescript.net</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="form">
<p>Bảng điều khiển</p>
<p>Đây cũng là một trang được bảo mật</p>
<p><a href="index.php">Trang chủ</a></p>
<a href="logout.php">Đăng xuất</a>
</div>
</body>
</html>

8) Tạo trang đăng xuất

Trang đăng xuất tôi sẽ đặt tên là logout.php, khi người dùng vào trang này sẽ tự động destroy session.

<?php
session_start();
if(session_destroy())
{
header("Location: login.php");
}
?>

9) Tạo style cho trang

Cuối cùng là làm đẹp cho trang thôi!

body {font-family:Arial, Sans-Serif;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
a {color:#0067ab; text-decoration:none;}
a:hover {text-decoration:underline;}
.form{width: 300px; margin: 0 auto;}
input[type='text'], input[type='email'], input[type='password'] {width: 200px; border-radius: 2px;border: 1px solid #CCC; padding: 10px; color: #333; font-size: 14px; margin-top: 10px;}
input[type='submit']{padding: 10px 25px 8px; color: #fff; background-color: #0067ab; text-shadow: rgba(0,0,0,0.24) 0 1px 0; font-size: 16px; box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0; border: 1px solid #0164a5; border-radius: 2px; margin-top: 10px; cursor:pointer;}
input[type='submit']:hover {background-color: #024978;}

Trên đây là tất cả các file để tạo chức năng đăng ký đăng nhập đơn giản. Nếu bạn muốn download thì ở mỗi cuối bài viết đều có demo và download đầy đủ. Nếu chưa làm được hãy để lại comment nhé. Chúc các bạn thành công!

Download file[Google drive]123link
[Sharescript.net]dang_nhap_dang_ky_phpmysql.zip

Demo Download

Google drive 123link Fshare Zagl

Đánh giá