[BÀI 23] HƯỚNG DẪN VIẾT CHỨC NĂNG ĐĂNG NHẬP HOÀN CHỈNH VỚI PHP VÀ MYSQL
Sau khi đã tìm hiểu cơ bản về PHP và mysql. Những chức năng phổ biến chúng ta có thể thực hiện một cách dễ dàng, để làm được chức năng đăng nhập chúng ta cần làm các bước sau: Các bước để thực hiện chức năng đăng nhập: Tạo database và một bảng lưu danh sách người dùng. Việc đăng nhập có thành ...
Sau khi đã tìm hiểu cơ bản về PHP và mysql. Những chức năng phổ biến chúng ta có thể thực hiện một cách dễ dàng, để làm được chức năng đăng nhập chúng ta cần làm các bước sau:
Các bước để thực hiện chức năng đăng nhập:
- Tạo database và một bảng lưu danh sách người dùng. Việc đăng nhập có thành công hay không phụ thuộc vào bảng này.
- Tạo folder và các file cần thiết.
- Kết nối database
- Tạo form thêm người dùng.
- Lấy dữ liệu từ form thêm người dùng và insert vào database.
- Tạo một form đăng nhập.
- Lấy thông tin người dùng nhập từ form.
- So sánh dữ liệu người dùng nhập và xử lý.
- Thực hiện chức năng đăng xuất.
Bước 1: Tạo database:
Để lưu danh sách các tài khoản, tôi tạo một database có tên là ‘devpro’ và chọn bảng mã là unicode_utf8_ci để có thể lưu dữ liệu tiếng Việt vào database. Trong database này tôi tạo 1 bảng tên là ‘user’ để lưu thông tin của các user. Bảng này có các trường sau:
- id: dữ liệu kiểu int, là khóa chính, tự động tăng. Trường này sẽ lưu id của người dùng.
- user_name : kiểu varchar(50), trường này sẽ lưu tài khoản đăng nhập của người dùng.
- password: kiểu text, trường này sẽ lưu mật khẩu của người dùng.
- full_name: kiểu varchar(100), trường này sẽ lưu họ tên của người dùng.
Sau khi tạo bảng xong, cấu trúc bảng này sẽ như sau:
Bước 2: tạo folder và các file cần thiết:
Trước khi kết nối database, tôi tạo folder trong thư mục ‘xampphtdocs’ (tùy vào lúc cài đặt xampp bạn cài đặt vào ổ C,D,… mà bạn đến đường dẫn thư mục cho phù hợp, ví dụ tôi cài trên ổ C thì tôi sẽ vào: C:xampphtdocs ). Thư mục ‘htdocs’ tôi tạo một forder tên là ‘devpro’ , trong thư mục ‘devpro’ tôi tạo các file sau file ‘index.php’ , ‘register.php’ , ‘login.php’, ‘admin.php’.
Trong đó:
- Trang index.php: sẽ là trang chủ, thực hiện việc xử lý, tính toán, và lấy dữ liệu cho phù hợp.
- Trang register.php: sẽ là trang để đăng ký thành viên.
- Trang login.php: là trang đăng nhập, nếu người dùng đăng nhập không thành công hoặc chưa đăng nhập thì index.php sẽ gọi login.php vào.
- Trang admin.php: là trang sẽ được gọi vào index.php khi đã đăng nhập thành công
Sau khi tạo thư mục và các file thành công, sẽ có cấu trúc như sau:
Bước 3: kết nối database
Mọi thao tác xử lý chúng ta đều thực hiên trên trang index.php, do vậy mà việc kết nối database tôi cũng sẽ thực hiện ở trang index.php.
Ở trang này tôi thực hiện việc kết nối tới database với lệnh sau:
mysqli_connect(‘$_host_name’,’$_user_name_db’,’$_pass_login_db’,’$_database_name’);
Trong đó:
- $_host_name: là tên host của bạn. Nếu cài localhost thì bạn sẽ đặt trường này là localhost (tên máy chủ hoặc địa chỉ ip máy chủ).
- $_user_name_db: tài khoản đăng nhập database (nếu cài xampp, tài khoản mặc định là ‘root’).
- $_pass_login_db: mật khẩu đăng nhập database (mặc định xampp không đặt mật khẩu đăng nhập, nên trường này bạn để trống).
- $_database_name: tên database mà bạn cần thao tác.
Việc kết nối này tôi sẽ gán vào 1 biến là $connect, như tôi đã trình bày ở những bài trước, trong PHP bất kỳ dữ liệu kiểu gì bạn cũng có thể gán vào một biến được.
$connect = mysqli_connect(‘localhost’,’root’,”,’devpro’);
Tiếp theo tôi chọn việc truy vấn này có thể đọc và hiểu tiếng Việt, tôi viết tiếp lệnh sau:
mysqli_set_charset($connect,”utf8″);
Trong đó:
- mysqli_set_charset() : là hàm chọn bảng mã, hàm này có 2 tham số truyền vào
- $connect: việc truy vấn đến database nào
- utf8: bảng mã có thể viết tiếng Việt
Hoàn thành 2 câu lệnh trên, cấu trúc file index.php như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php $connect = mysqli_connect('localhost','root',','devpro'); mysqli_set_charset($connect,"utf8"); ?> <!DOCTYPE html> <html> <head> <title>Devpro.edu.vn</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> </body> </html> |
Trong lệnh trên, tôi đặt những lệnh php kết nối lên đầu để những lệnh này sẽ được chạy đầu tiên. Việc kết nối sẽ kết nối đến máy chủ là ‘localhost’, tài khoản đăng nhập là ‘root’, không có mật khẩu, và database chọn để thao tác là ‘devpro’.
Ở phần html ở dưới tôi có link css,js của bootstrap và jquery để tạo giao diện bắt mắt hơn, bạn không cần link những file này vào cũng không ảnh hưởng gì hết.
Bước 4: tạo form thêm người dùng:
form thêm người dùng tôi sẽ viết ở trang: register.php
Trước khi đăng nhập, bạn phải có tài khoản để đăng nhập đã. Để có tài khoản thì bạn phải đăng ký, khi đăng ký thành công, tài khoản của bạn sẽ được insert vào database.
Đầu tiên tạo một form đăng nhập với method=”post” (dữ liệu gửi đi dạng post), action=”” (địa chỉ mà dữ liệu sẽ gửi đến: trang hiện tại).
- Thuộc tính ‘name’ ở trong ô input: dữ liệu gửi đi sẽ được gán vào biến $_POST[“name”]
- Thuộc tính ‘type’: kiểu dữ liệu nhập vào ô input (text: dạng text, password: dạng mật khẩu,submit: dạng nút gửi dữ liệu đi – nút kích hoạt form,…)
- Thuộc tính ‘required’: bắt buộc phải nhập
Trong form sẽ có một ô nhập tài khoản (user_name), một ô nhập mật khẩu (pass1), một ô nhập lại mật khẩu (pass2), một ô nhập họ tên đầy đủ (full_name), và một nút submit để gửi dữ liệu đi:
Cụ thể ở trang register.php tôi sẽ viết form đăng ký như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<form action="" method="post"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel-primary"> <div class="panel-body"> <div class="form-group"> <label for="email">Email:</label> <input type="text" class="form-control" name="user_name" placeholder="Nhập tên đăng nhập..."> </div> <div class="form-group"> <label for="pwd">'Mật khẩu: '</label> <input required type="password" class="form-control" name="pass1" placeholder="Nhập mật khẩu..."> </div> <div class="form-group"> <label for="pwd">'Nhập lại mật khẩu:'</label> <input required type="password" class="form-control" name="pass2" placeholder="Nhập lại mật khẩu..."> </div> <div class="form-group"> <label for="email">'Tên đầy đủ của bạn:'</label> <input type="text" class="form-control" name="full_name" placeholder="Nhập tên đầy đủ của bạn..."> </div> <button type="submit" class="btn btn-default" name="dangky">'Đăng ký'</button> </div> </div> </div> </form> |
Sau đó ở trang index.php tôi tạo một nút nhấn, khi nhấn vào nút này, tôi sẽ gọi trang register.php vào (gọi form đăng ký vào).
Trang index.php tôi viết tiếp như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php $connect = mysqli_connect('localhost','root',','devpro'); mysqli_set_charset($connect,"utf8"); ?> <!DOCTYPE html> <html> <head> <title>Devpro.edu.vn</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> //tạo nút nhấn: truyền biến $_GET["page"]="dangky" lên URL <div class="row"> <a href="index.php?page=dangky" class="btn btn-success">'Đăng ký thành viên'</a> </div> <div class="row"> //kiểm tra nếu tồn tại biến $_GET["page"] = "dangky" thì gọi register.php vào <?php if(isset($_GET["page"])&&$_GET["page"]=="dangky") include "register.php"; ?> </div> </div> </body> </html> |
Khi nhấn vào nút “Đăng ký thành viên”, biến $_GET[“page”] = “dangky” sẽ được truyền lên URL. Tôi thực hiện kiểm tra, nếu như có tồn tại $_GET[“page”] = “dangky” thì tôi sẽ gọi trang đăng ký vào.
Bước 5: lấy dữ liệu người dùng thêm từ form đăng nhập, kiểm tra , và insert vào database:
Khi người dùng nhấn nút submit (đăng ký) thì dữ liệu sẽ được gửi đi theo phương thức post, vì method của form tôi đã đặt là post.
Tôi sẽ lấy dữ liệu người dùng nhập và insert vào database bằng các lệnh sau ở trang index.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?php $connect = mysqli_connect('localhost','root',','devpro'); mysqli_set_charset($connect,"utf8"); ?> <!DOCTYPE html> <html> <head> <title>Devpro.edu.vn</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <?php if(isset($_POST["dangky"])){ $user_name = $_POST["user_name"]; $pass1 = $_POST["pass1"]; $pass2 = $_POST["pass2"]; $name = $_POST["full_name"]; //kiểm tra xem 2 mật khẩu có giống nhau hay không: if($pass1!=$pass2){ header("location:index.php?page=dangky"); setcookie("error", "Đăng ký không thành công!", time()+1, "/","", 0); } else{ $pass = md5($pass1); mysqli_query($connect," insert into user (user_name,password,full_name) values ('$user_name','$pass','$name') "); header("location:index.php?page=dangky"); setcookie("success", "Đăng ký thành công!", time()+1, "/","", 0); } } ?> <div class="container"> <div class="row"> <a href="index.php?page=dangky" class="btn btn-success">'Đăng ký'</a> <a href="index.php" class="btn btn-info">'Trang chủ'</a> </div> <div class="row"> <!-- 'start nếu xảy ra lỗi thì hiện thông báo:' --> <?php if(isset($_COOKIE["error"])){ ?> <div class="alert alert-danger"> <strong>'Có lỗi!'</strong> <?php echo $_COOKIE["error"]; ?> </div> <?php } ?> <!-- 'end nếu xảy ra lỗi thì hiện thông báo:' --> <!--
Có thể bạn quan tâm
0
|
