Đề Xuất 12/2022 # Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql / 2023 # Top 14 Like | Jetstartakeontheworld.com

Đề Xuất 12/2022 # Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql / 2023 # Top 14 Like

Cập nhật nội dung chi tiết về Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql / 2023 mới nhất trên website Jetstartakeontheworld.com. Hy vọng thông tin trong bài viết sẽ đáp ứng được nhu cầu ngoài mong đợi của bạn, chúng tôi sẽ làm việc thường xuyên để cập nhật nội dung mới nhằm giúp bạn nhận được thông tin nhanh chóng và chính xác nhất.

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.

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

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 <?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){ } }else{

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 <?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{ } }else{ Mật khẩu: sharescript.net

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

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');

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;}

Tạo Form Đăng Nhập Trong Php / 2023

Ở bài trước ” hướng dẫn tao form đăng ký ” mình đã hướng dẫn các bạn tạo form đăng ký cho website của mình. Hôm nay mình sẽ tiếp tục chia sẽ đến các bạn bài viết về hướng dẫn tạo form đăng nhập. Trong bài viết này, mình sẽ tóm tắt như sau, đó là khi một người dùng điền thông tin đăng nhập, ta sẽ thực thi việc kiểm tra thông tin đăng nhập bao gồm username và password, nếu thông tin trùng khớp với dữ liệu trong database ta sẽ tiến hành lưu , khởi tạo session và tiến hành lưu dữ liệu vào session. Tiếp theo ta sẽ dùng session đã được khởi tạo đó để check một số quyền hạn nhất định trên trang.

1. Tạo form đăng nhập :

Chúng ta sẽ tạo form đăng nhập chúng tôi , đặt trong folder my_website

ô input username : tài khoản mà người dùng đã đăng ký

ô input password : mật khẩu người dùng đã đăng ký

Gõ xong, các bạn vào đường dẫn

http://localhost/my_website/login.php

bạn sẽ thấy form như sau

Đây là giai đoạn chúng ta sẽ tiến hành kiểm tra người dùng đã nhập đủ thông tin vào form đăng nhập hay chưa, nếu chưa hiện ra thông báo bắt buộc họ phải nhập đầy đủ thông tin, sau đó tiếp tục kiểm tra thông tin người dùng với dữ liệu họ đã đăng ký trong database xem đã trùng khớp hay chưa? nếu chưa thì tiếp tục hiện thống báo phản hồi, ngược lại tiến hành lưu thông tin đăng nhập vào session để xử lý

Lưu ý : muốn sử dụng session để lưu thông tin , thì bạn phải khởi tạo session bằng function session_start() và thì tốt nhất nên đặt function session_start() đầu trang

<?php session_start(); <?php session_start(); <?php require_once("lib/connection.php"); if (isset($_POST["btn_submit"])) { $username = $_POST["username"]; $password = $_POST["password"]; $username = strip_tags($username); $username = addslashes($username); $password = strip_tags($password); $password = addslashes($password); echo "username hoặc password bạn không được để trống!"; }else{ $sql = "select * from users where username = '$username' and password = '$password' "; $query = mysqli_query($conn,$sql); $num_rows = mysqli_num_rows($query); if ($num_rows==0) { echo "tên đăng nhập hoặc mật khẩu không đúng !"; }else{ $_SESSION['username'] = $username; header('Location: index.php'); } } }

3. Xử lý sau hậu đăng nhập

Ở phần 2, sau khi đăng nhập thành công, chúng ta sẽ chuyển hướng trang web tới trang chúng tôi . Vì thế chúng ta tiếp tục tạo trang chúng tôi (đặt trong thư mục my_website) để xử lý thông tin, gọi nôm na là xử lý hậu đăng nhập.

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

Giải thích một tí về đoạn code trên, ở đoạn code

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

chúng ta sẽ tiến hành kiểm tra khi một ai đó chưa đăng nhập nhưng cố tình truy cập vào trang chúng tôi bằng cách điền địa chỉ

http://localhost/my_website/index.php

, thì sẽ bị chuyển hướng ra lại trang đăng nhập, ngược lại thì ta sẽ xuất ra dòng chữ

"Chúc mừng bạn có username là 'tên đăng nhập được lưu trong session' đã đăng nhập thành công !"

Mẫu Form Đăng Ký Và Đăng Nhập Đơn Giản Sử Dụng Css Và Javascript. / 2023

* { box-sizing: border-box; } body { background: #f6f5f7; display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: ‘Montserrat’, sans-serif; height: 100vh; margin: -20px 0 50px; } h1 { font-weight: bold; margin: 0; } h2 { text-align: center; } p { font-size: 14px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px; } span { font-size: 12px; } a { color: #333; font-size: 14px; text-decoration: none; margin: 15px 0; } button { border-radius: 20px; border: 1px solid #FF4B2B; background-color: #FF4B2B; color: #FFFFFF; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in; } button:active { transform: scale(0.95); } button:focus { outline: none; } button.ghost { background-color: transparent; border-color: #FFFFFF; } form { background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 50px; height: 100%; text-align: center; } input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%; } .container { background-color: #fff; border-radius: 10px; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); position: relative; overflow: hidden; width: 768px; max-width: 100%; min-height: 480px; } .form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out; } .sign-in-container { left: 0; width: 50%; z-index: 2; } .container.right-panel-active .sign-in-container { transform: translateX(100%); } .sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1; } .container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s; } @keyframes show { 0%, 49.99% { opacity: 0; z-index: 1; } 50%, 100% { opacity: 1; z-index: 5; } } .overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100; } .container.right-panel-active .overlay-container { transform: translateX(-100%); } .overlay { background: #FF416C; background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C); background: linear-gradient(to right, #FF4B2B, #FF416C); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #FFFFFF; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .container.right-panel-active .overlay { transform: translateX(50%); } .overlay-panel { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; transform: translateX(0); transition: transform 0.6s ease-in-out; } .overlay-left { transform: translateX(-20%); } .container.right-panel-active .overlay-left { transform: translateX(0); } .overlay-right { right: 0; transform: translateX(0); } .container.right-panel-active .overlay-right { transform: translateX(20%); } .social-container { margin: 20px 0; } .social-container a { border: 1px solid #DDDDDD; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; margin: 0 5px; height: 40px; width: 40px; } footer { background-color: #222; color: #fff; font-size: 14px; bottom: 0; position: fixed; left: 0; right: 0; text-align: center; z-index: 999; } footer p { margin: 10px 0; } footer i { color: red; } footer a { color: #3c97bf; text-decoration: none; const signUpButton = document.getElementById(‘signUp’); const signInButton = document.getElementById(‘signIn’); const container = document.getElementById(‘container’); container.classList.add(‘right-panel-active’); }); container.classList.remove(‘right-panel-active’); });

Form Đăng Nhập Bằng Ajax, Chi Tiết Cách Tạo Form Đăng Nhập Ajax / 2023

Trước đây, mình có hướng dẫn các bạn cách tạo form đăng nhập bằng PHP thông qua phương thức submit form. Đây là phương pháp tạo form cơ bản và làm load lại trang. Trong bài viết ngày hôm nay, mình sẽ hướng dẫn các bạn tạo form đăng nhập bằng ajax với thư viện jquery mới nhất.

Tạo form đăng ký bằng PHP Tạo form đăng nhập bằng PHP

Ajax, hay còn gọi là bất đồng bộ javascript, đây là một kỹ thuật rất hay, giúp cho ứng dụng web của bạn chạy nhanh hơn, trải nghiệm người dùng tốt hơn, nhiều tương tác hơn, xử lý được nhiều thành phần trên website mà không làm reload lại trang.

Đối với một ứng dụng web truyền thống không sử dụng kỹ thuật ajax thì khi chúng ta ấn submit form, yêu cầu sẽ được gửi đi đồng bộ, chuyển hướng website của bạn tới một trang mới hoặc làm reload lại page, lúc này dữ liêu mới được trả về. Còn đối với Ajax, khi bạn tạo ra một yêu cầu, yêu cầu sẽ được gửi đi về server xử lý một cách bất đồng bộ, dữ liệu sau đó sẽ được trả về mà không làm cho trang hiện hành reload lại, khiến bạn có cảm giác ứng dụng web chạy rất mượt mà.

2. Tạo form đăng nhập bằng ajax

Tại thư mục gốc của website, các bạn tạo 2 file và đặt tên lần lượt là dang_nhap_ajax.php và check_dang_nhap.php

File dang_nhap_ajax.php sẽ hiển thị form đăng nhập, và thực hiện việc gửi thông tin tên đăng nhập và mật khẩu từ form về cho file server check_dang_nhap.php xử lý.

File check_dang_nhap.php sẽ chịu trách nhiệm lấy thông tin được gửi vào từ fie dang_nhap_ajax.php và kiểm tra thông tin đăng nhập hợp lệ không

b. Tạo form đăng nhập bằng ajax

var username = $(“#username”).val(); var password = $(“#password”).val(); var error = $(“#error”); var ok = $(“#ok”);

error.html(“”); ok.html(“”);

if (username == “”) { error.html(“Tên đăng nhập không được để trống”); return false; } if (password == “”) { error.html(“Mật khẩu không được để trống”); return false; }

$.ajax({ url: “check_dang_nhap.php”, method: “POST”, data: { username : username, password : password }, success : function(response){ if (response == “1”) { ok.html(“Đăng nhập thành công”); }else{ error.html(“Tên đăng nhập hoặc mật khẩu không chính xác !”); } } });

});

Chạy thử trang này chúng ta sẽ được giao diện như sau :

Mỗi giá trị input trong form mình đều gắn cho nó thuộc tính id. Chẳng hạn Tên đăng nhập sẽ có id là “username”, mật khẩu sẽ có id là “password”.

Ở đoạn code sau, các bạn nhìn lại một lần nữa rồi mình giải thích luôn

var username = $(“#username”).val(); var password = $(“#password”).val(); var error = $(“#error”); var ok = $(“#ok”);

error.html(“”); ok.html(“”);

if (username == “”) { error.html(“Tên đăng nhập không được để trống”); return false; } if (password == “”) { error.html(“Mật khẩu không được để trống”); return false; }

$.ajax({ url: “check_dang_nhap.php”, method: “POST”, data: { username : username, password : password }, success : function(response){ if (response == “1”) { ok.html(“Đăng nhập thành công”); }else{ error.html(“Tên đăng nhập hoặc mật khẩu không chính xác !”); } } });

});

Đây là đoạn code jquery dùng để lấy thông tin đăng nhập là username và password từ form.

Trước tiên mình sẽ thực hiện việc kiểm tra thông tin người dùng nhập vào 2 ô này, nếu một trong hai ô mà để trống thì thực hiện việc thông báo lỗi ra bên ngoài và yêu cầu người dùng điền thông tin đầy đủ vào, và dừng thực thi bằng cách trả về false.

if (username == "") { error.html("Tên đăng nhập không được để trống"); return false; } if (password == "") { error.html("Mật khẩu không được để trống"); return false; }

Sau đó nếu thông tin người dùng đã điền đầy đủ, chúng ta sẽ thực thi ajax và gửi thông tin người dùng về file xử lý phía server là check_dang_nhap.php

$.ajax({ url: "check_dang_nhap.php", method: "POST", data: { username : username, password : password }, success : function(response){ if (response == "1") { ok.html("Đăng nhập thành công"); }else{ error.html("Tên đăng nhập hoặc mật khẩu không chính xác !"); } } });

Ở đoạn code trên, để có thể sử dụng ajax các bạn gõ theo cú pháp $.ajax({}). Bên trong sẽ truyền vào các tham số, bạn nhìn tên của tham số cũng rất dễ hiểu đúng không, nhưng mình cũng giải thích luôn từng tham số như sau

url : Chính là đường dẫn tới file server check_dang_nhap.php, nói với ajax rằng hãy gửi dữ liệu đến trang này và xử lý

method : phương thức dữ liệu được gửi đi là GET hay POST, trong trường hợp này là POST

data : chính là dữ liệu gửi đi, trong trường hợp này là thông tin username và password được lấy từ form

success : chính là funtion nhận dữ liệu trả về từ file server check_dang_nhap.php Nếu dữ liệu trả về là 1 thì tức là đăng nhập thành công, ngược lại bằng 0 thì không thành công

3. Code xử lý cho file check_dang_nhap.php

Các bạn mở file check_dang_nhap.php và copy toàn bộ đoạn code sau và save lại:

<?php $username_db = "kungfuphp"; $password_db = "123456"; $username = $_POST["username"]; $password = $_POST["password"];

if ($username == $username_db && $password == $password_db) { echo 1; exit(); }

echo 0; exit();

Đoạn code này rất đơn giản và dễ hiểu. Đầu tiên các bạn nhìn vào 2 biến $db_username và $db_password. Đây là 2 biến giả lập của mình, tượng trưng cho thông tin username và password có trong cơ sở dữ liệu, sau này các bạn có kết nối thật với database thì tương tự cách xử lý là như vậy.

Tiếp đến mình sẽ tiến hành lấy username và password được gửi từ ajax, thực hiện so sánh và kiểm với thông tin giả lập, nếu trùng khớp, tức thành công mình sẽ trả ra giá trị là 1, ngược lại thất bại mình sẽ trả ra giá trị là 0.

Để trống một hoặc hai ô nhập thông tin username và password rồi ấn nút Đăng nhập

Điền đầy đủ thông tin như sau Tên đăng nhập là "aaa", Mât khẩu là "bbb". Rồi ấn nút Đăng nhập

Điền đầy đủ thông tin Tên đăng nhập là "kungfuphp", Mật khẩu là "123456". Rồi ấn nút Đăng nhập

Thân !

Nguồn : kungufphp.com

Bạn đang đọc nội dung bài viết Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql / 2023 trên website Jetstartakeontheworld.com. Hy vọng một phần nào đó những thông tin mà chúng tôi đã cung cấp là rất hữu ích với bạn. Nếu nội dung bài viết hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!