http://laptrinhphp.vn/bai-33-huong-dan-viet-mot-trang-web-co-ban-phan-2-tao-chuc-nang-dang-nhap/
Last updated
[BÀI 33] HƯỚNG DẪN VIẾT MỘT TRANG WEB CƠ BẢN (PHẦN 2: TẠO CHỨC NĂNG ĐĂNG NHẬP)
Trong bài số 32, chúng ta đã cơ bản hoàn tất các cấu trúc file của 1 trang web và giao diện của trang chủ. Ở bài này tôi sẽ hướng dẫn các bạn tạo giao diện trang admin, và viết chức năng đăng nhập theo mô hình MVC hướng đối tượng.
Trong thư mục admin/view/
Tôi tạo một thư mục là layout, và trong thư mục layout tôi tạo layout.php, để viết giao diện cho trang admin.
Tiếp theo tôi tạo một thư mục login, trong thư mục login tôi tạo 1 file là login.php, trang này là trang giao diện để người dùng đăng nhập.
Kết thúc việc tạo 2 file này tôi có cấu trúc file như sau:
Trang admin/view/layout/layout.php tôi viết như sau:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
<?php date_default_timezone_set("Asia/Ho_Chi_Minh"); //gọi controller động: $duongdan_controller=""; if(isset($_GET["controller"])){ $duongdan_controller="controller/controller_".$_GET["controller"].".php"; if(file_exists($duongdan_controller)) include $duongdan_controller; } ?> <!DOCTYPE html> <html> <head> <title>'Trang quản trị'</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <link rel="stylesheet" href="public/style.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><div id="wrapper"> <!-- start avigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php">'QUẢN TRỊ HỆ THỐNG'</a> </div> <!-- end avigation --> <!-- start top menu --> <ul class="nav navbar-right top-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 'Xin chào: Hồ Ngọc Trung'<b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#"><i class="glyphicon glyphicon-list-alt"></i> 'Danh sách tài khoản'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-user"></i> 'Hồ sơ cá nhân'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-plus-sign"></i> 'Thêm tài khoản'</a> </li> <li class="divider"></li> <li> <a href="#"><i class="glyphicon glyphicon-off"></i> 'Đăng xuất'</a> </li> </ul> </li> </ul> <!-- end top menu --> <!-- start menu left --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li style="background:#52bc89;color:#fff;"> <a href="#" style="color:#fff;"><i class="glyphicon glyphicon-folder-open"></i> 'Danh mục'</a> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmcc"><i class="glyphicon glyphicon-picture"></i> Banner <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmcc" class="collapse"> <li> <a href="#">'Banner hiện tại'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dm"><i class="glyphicon glyphicon-picture"></i>' Danh sách khóa học '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm mới'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmm"><i class="glyphicon glyphicon-sunglasses"></i>' Dịch vụ của chúng tôi '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_bv"><i class="glyphicon glyphicon-globe"></i> 'Thông tin về Devpro' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_bv" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a1"><i class="glyphicon glyphicon-camera"></i> 'Thông tin liên hệ' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a1" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a2"><i class="glyphicon glyphicon-tag"></i> 'Tin nhắn học viên' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a2" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a456"><i class="glyphicon glyphicon-star-empty"></i> Design <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a456" class="collapse"> <li> <a href="#">'Để nâng cấp website, liên hệ:'</a> <a href="http://facebook.com/trung.hongoc">'Hồ Ngọc Trung'</a> <a href="#">0969 540 038</a> </li> </ul> </li> </ul> </div> </nav> <!-- end menu left --> <!-- 'start nội dung' --> <div id="page-wrapper"> <div class="container-fluid"> </div> </div> <!-- 'end nội dung' --> </div></body></html>
Tiếp theo, tôi tạo giao diện trang admin/view/login/login.php:
1234567891011121314151617181920212223242526272829303132333435
<!DOCTYPE html> <html> <head> <title>'Trang quản trị'</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <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 required 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="pass" placeholder="Nhập mật khẩu..."> </div> <button type="submit" class="btn btn-default" name="dangnhap">'Đăng nhập'</button> </div> </div> </div> </form></body></html>
Viết lại trang admin/index.php:
12345678910111213
<?php include "../config.php"; session_start(); ob_start(); include "model/model.php"; include "controller/controller.php"; ?> <?php //gọi controller đăng nhập: include "controller/controller_login.php"; ob_end_flush();?>
Trang admin/controller/controller_login.php tôi viết như sau:
123456789101112131415161718192021222324252627282930313233343536
<?php class controller_login extends controller { public function __construct(){ parent::__construct(); if(!isset($_SESSION["loged"])||$_SESSION["loged"]=="") include "view/login/login.php"; else include "view/layout/layout.php"; if(isset($_POST["dangnhap"])) $this->login(); } public function login(){ $user_name = $_POST["user_name"]; $pass = $_POST["pass"]; $pass = md5($pass); $kt_dangnhap=$this->model->fetch_one(" select email,password,name from users where email='$user_name' and password='$pass' "); if($kt_dangnhap["email"]==$user_name&&$kt_dangnhap["password"]==$pass){ $_SESSION["loged"] = $kt_dangnhap["name"]; header("location:index.php"); } else header("location:index.php"); } } new controller_login();?>
Và đừng quên vào database tạo một tài khoản mới trước khi thực hiện đăng nhập, lưu ý phần mật khẩu nhớ chọn md5 để mật khẩu được mã hóa sang dạng md5, ví dụ tôi tạo một tài khoản như sau:
Quay lại kiểm tra đăng nhập:
Sau khi đã viết các controller, tạo bản ghi trong database và giao diện hoàn tất, bây giờ chức năng đăng nhập của chúng ta đã phần nào hoàn tất, quay lại form đăng nhập và tiến hành đăng nhập vào tài khoản vừa tạo. Thành công sẽ hiển thị ra giao diện sau:
Và nếu đăng nhập không thành công thì vẫn ở trang login.
Nhấn vào Chào bạn: …. phía góc trên cùng bên phải, có phần đăng xuất, và ý tưởng là nhấn vào đăng xuất sẽ đăng xuất khỏi hệ thống.
Để đăng xuất, tôi truyền 1 biến dạng GET lên URL, và tôi sẽ kiểm tra biến này tồn tại hay không, nếu tồn tại thì tôi sẽ tiến hành đăng xuất.
Trong file admin/view/layout/layout tôi sửa lại như sau:
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
<?php date_default_timezone_set("Asia/Ho_Chi_Minh"); //gọi controller động: $duongdan_controller=""; if(isset($_GET["controller"])){ $duongdan_controller="controller/controller_".$_GET["controller"].".php"; if(file_exists($duongdan_controller)) include $duongdan_controller; } ?> <!DOCTYPE html> <html> <head> <title>'Trang quản trị'</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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> <link rel="stylesheet" href="public/style.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body><div id="wrapper"> <!-- start avigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.php">'QUẢN TRỊ HỆ THỐNG'</a> </div> <!-- end avigation --> <!-- start top menu --> <ul class="nav navbar-right top-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-user"></i> 'Xin chào: <?php if(isset($_SESSION["loged"])) echo $_SESSION["loged"]; ?>'<b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#"><i class="glyphicon glyphicon-list-alt"></i> 'Danh sách tài khoản'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-user"></i> 'Hồ sơ cá nhân'</a> </li> <li> <a href="#"><i class="glyphicon glyphicon-plus-sign"></i> 'Thêm tài khoản'</a> </li> <li class="divider"></li> <li> <a href="index.php?act=logout"><i class="glyphicon glyphicon-off"></i> 'Đăng xuất'</a> </li> </ul> </li> </ul> <!-- end top menu --> <!-- start menu left --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav side-nav"> <li style="background:#52bc89;color:#fff;"> <a href="#" style="color:#fff;"><i class="glyphicon glyphicon-folder-open"></i> 'Danh mục'</a> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmcc"><i class="glyphicon glyphicon-picture"></i> Banner <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmcc" class="collapse"> <li> <a href="#">'Banner hiện tại'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dm"><i class="glyphicon glyphicon-picture"></i>' Danh sách khóa học '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm mới'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_dmm"><i class="glyphicon glyphicon-sunglasses"></i>' Dịch vụ của chúng tôi '<i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_dmm" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> <li> <a href="#">'Thêm'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_bv"><i class="glyphicon glyphicon-globe"></i> 'Thông tin về Devpro' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_bv" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a1"><i class="glyphicon glyphicon-camera"></i> 'Thông tin liên hệ' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a1" class="collapse"> <li> <a href="#">'Chi tiết'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a2"><i class="glyphicon glyphicon-tag"></i> 'Tin nhắn học viên' <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a2" class="collapse"> <li> <a href="#">'Danh sách'</a> </li> </ul> </li> <li> <a href="javascript:;" data-toggle="collapse" data-target="#demo_a456"><i class="glyphicon glyphicon-star-empty"></i> Design <i class="glyphicon glyphicon-chevron-down"></i></a> <ul id="demo_a456" class="collapse"> <li> <a href="#">'Để nâng cấp website, liên hệ:'</a> <a href="http://facebook.com/trung.hongoc">'Hồ Ngọc Trung'</a> <a href="#">0969 540 038</a> </li> </ul> </li> </ul> </div> </nav> <!-- end menu left --> <!-- 'start nội dung' --> <div id="page-wrapper"> <div class="container-fluid"> </div> </div> <!-- 'end nội dung' --> </div></body></html>
Tôi có đặt link cho đăng xuất là index.php?act=logout, và tôi tiến hành viết lệnh đăng xuất khi biến act tồn tại và act=logout.
Việc đăng xuất chính là việc hủy $_SESSION[“loged”].
Quay lại file admin/index.php, tôi viết tiếp như sau:
12345678910111213141516171819202122
<?php include "../config.php"; session_start(); ob_start(); include "model/model.php"; include "controller/controller.php"; ?> <?php //thực hiện đăng xuất: if(isset($_GET["act"])) if($_GET["act"]=="logout"){ unset($_SESSION["loged"]); header("location:index.php"); } ?> <?php //gọi controller đăng nhập: include "controller/controller_login.php"; ob_end_flush();?>
Như vậy tôi đã hướng dẫn thành công thực hiện chức năng đăng nhập và đăng xuất với lập trình hướng đối tượng theo mô hình MVC.
Tải toàn bộ mã nguồn của bài hôm nay tại đây!
Xem video hướng dẫn chi tiết tạo chức năng đăng nhập và đăng xuất với PHP MVC lập trình hướng đối tượng:
