Bạn đang xem bài viết Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql được cập nhật mới nhất tháng 10 năm 2023 trên website Rafs.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung 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.
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ậpTươ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ệuTạ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ậpDá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ểnTrang 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ấtTrang đă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 trangCuố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ừng Bước Tạo Trang Đăng Nhập (Login Page) Bằng Php
Bước 1 : Tạo database và table
Trong ví dụ này chúng ta sẽ đặt tên database là ” test “ và tạo một table là “members”. Nếu bạn nào chưa biết cách tạo database và table thì có thể tham khảo bài viết Tạo database, table và quản lý cơ sở dữ liệu MySQL bằng phpMyAdmin
CREATE TABLE `members` ( `id` int(4) NOT NULL auto_increment, `username` varchar(65) NOT NULL default ”, `password` varchar(65) NOT NULL default ”, PRIMARY KEY (`id`) ) TYPE=MyISAM AUTO_INCREMENT=2 ; — — Dumping data for table `members` — INSERT INTO `members` VALUES (1, ‘john’, ‘1234’);
Bước 2 : Tạo file ” main_login.php “
Các bạn dán (paste) đoạn code sau vào file này:
Bước 3 : Tạo file ” chúng tôi “
File này được dùng để kiểm tra xem người dùng sau khi nhập username và password xong có đúng hay không, và nó cũng kiểm tra xem user đó đã tồn tại hay chưa, nếu người dùng nhập đúng tài khoản của họ thì nó sẽ tự động chuyển sang trang thông báo ” login_success.php” và ngược lại nó sẽ thông báo lỗi đăng nhập Các bạn dán đoạn code sau vào file chúng tôi :
<?php $host="localhost"; $username="root"; $password=""; $db_name="test"; $tbl_name="members"; mysql_connect("$host", "$username", "$password")or die("Không thể kết nối"); mysql_select_db("$db_name")or die("cannot select DB"); $myusername=$_POST['myusername']; $mypassword=$_POST['mypassword']; $myusername = stripslashes($myusername); $mypassword = stripslashes($mypassword); $myusername = mysql_real_escape_string($myusername); $mypassword = mysql_real_escape_string($mypassword); $sql="SELECT * FROM $tbl_name WHERE username='$myusername' and password='$mypassword'"; $result=mysql_query($sql); $count=mysql_num_rows($result); if($count==1){ session_register("myusername"); session_register("mypassword"); header("location:login_success.php"); } else { echo "Sai tên đăng nhập hoặc mật khẩu"; }Bước 4 : Tạo file ” login_success.php “
Như mình đã nói ở bước 3 , file này sẽ xuất hiện dòng thông báo đăng nhập thành công. Các bạn dán đoạn code sau :
<?php session_start(); if(!session_is_registered(myusername)){ header("location:main_login.php"); } Đăng nhập thành công !Bước 5 : Tạo file ” chúng tôi “
File này được dùng để thoát tài khoản , các bạn dán đoạn code sau, đoạn code này sẽ xóa bỏ hết các session
<?php session_start(); session_destroy();Tạo Form Đăng Nhập Trong Php
Ở 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.phpbạ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 !"Tạo Form Đăng Ký Trong Php
Đối với các bạn mới bắt đầu học lập trình PHP các bạn nên gõ theo từng đoạn code để nhớ bài và hiểu vấn đề hơn, đừng copy nguyên đoạn code như vậy sẽ không nắm được lâu kiến thức.Chuẩn bị :
Để bắt đầu thực hành bài này, các bạn hãy chuẩn bị cho mình những điều cần thiết sau : – Đã khởi chạy (start) môi trường để lập trình PHP (coi lại bài Hướng dẫn cài đặt môi trường lập trình PHP) – Chuẩn bị công cụ editor phù hợp để có thể code (các bạn có thể tham khảo bài Giới thiệu về các editor cho nhà phát triển web)
– Trong thư mục gốc của website (ở đây mình dùng wamp nên thư mục gốc sẽ là www, còn đối với các bạn dùng xampp, thì thư mục gốc sẽ là htdocs), các bạn tạo 1 folder đặt tên là my_website để chưa tất cả source code mà mình sẽ hướng dẫn các bạn từng bước làm 1 website hoàn chỉnh bằng ngôn ngữ lập trình PHP từ đây trở về sau.
Trong thư mục my_website , các bạn tạo cho mình cấu trúc thư mục như sau :
Đầu tiên mình sẽ thiết kế một form đăng ký, đặt tên là chúng tôi (đặt trong thư mục my_website) bao gồm các trường : – trường để người dùng nhập nickname – trường để người dùng nhập mật khẩu – trường để người dùng nhập họ tên – trường để người dùng nhập địa chỉ email
Chạy đoạn code trên (vào browser gõ đường dẫn http:// localhost/my_website/register.php) ta được form đăng ký đơn giản như sau
Tiếp đến, ta sẽ thiết kế cơ sở dữ liệu và tạo bảng lưu trữ thông tin người dùng, ở đây mình lấy tên cho database là “kungfuphp” và bảng là “users”. Trong bảng uses sẽ bao gồm các cột
id : kiểu int, khóa chính, thuộc tính tự tăng (auto increment)
username : tên đăng nhập, kiểu var char, độ dài là 30 kí tự
password : mật khẩu, kiểu var char, độ dài 30 kí tự
name : tên người dùng, kiểu var char, độ dài 255 kí tự
email : địa chỉ email, kiểu var char, đồ dài 255 kí tự
CREATE DATABASE IF NOT EXISTS `kungfuphp` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; USE `kungfuphp`; CREATE TABLE IF NOT EXISTS `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(30) NOT NULL, `password` varchar(30) NOT NULL, `name` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ; 3. Bắt đầu code <?php $server_username = "root"; $server_password = ""; $server_host = "localhost"; $database = 'kungfuphp'; $conn = mysqli_connect($server_host,$server_username,$server_password,$database) or die("không thể kết nối tới database"); mysqli_query($conn,"SET NAMES 'UTF8'");Ở đoạn code trên, chúng ta dùng phương thức mysqli_connect của PHP để PHP có thể kết nối tới dữ liệu mysql với 3 tham số:
$server_host :tên host chưa database, ở đây mình dùng là localhost vì chạy ở máy tính cục bộ, còn khi upload website lên các host khác thì chúng ta có thể thay đổi tham số này cho phù hợp.
$server_username : tên đăng nhập vào database, mặc định ở local là root
$server_password ; mật khẩu đăng nhập vào database, mặc định ở local là rỗng
phương thức or die nhằm kiểm tra nếu kết nối thất bại sẽ xuất ra dòng chữ “không thể kết nối tới database”
phương thức mysqli_query($conn,”SET NAMES ‘UTF8′”) bạn có thể thêm vào hoặc không đều được, đây là phương thức tùy chọn, dành cho trong trường hợp cơ sở dữ liệu của bạn có các kí tự đặc biệt dạng utf-8 thì khi truy vấn hoặc cập nhật dữ liệu sẽ không bị lỗi font chữ
Tiếp đến trong file chúng tôi bạn cần phải require file chúng tôi vừa tạo vào bằng cách dùng từ khóa require_once (hoặc include, include_once, require)
require_once("lib/connection.php");Sau khi đã require_once tập tin chúng tôi vào, chúng ta đến giai đoạn kiểm tra thông tin đăng ký hợp lệ và lưu dữ liệu vào database, ở đây mình sẽ lấy các thông tin ở form đăng ký đã tạo ở trên bằng phương thức POST, các bạn lưu ý là :
Ngoài phương thức POST, chúng ta còn có thể sử dụng phương thức GET và sử dụng từ khóa $_GET để lấy dữ liệu
Sự khác nhau giữa POST và GET thì mình sẽ nói rõ hơn trong các bài sau 🙂
<?php if (isset($_POST["btn_submit"])) { $username = $_POST["username"]; $password = $_POST["pass"]; $name = $_POST["name"]; $email = $_POST["email"]; echo "bạn vui lòng nhập đầy đủ thông tin"; }else{ } } <?php if (isset($_POST["btn_submit"])) { $username = $_POST["username"]; $password = $_POST["pass"]; $name = $_POST["name"]; $email = $_POST["email"]; echo "bạn vui lòng nhập đầy đủ thông tin"; }else{ $sql = "INSERT INTO users( username, password, name, email ) VALUES ( '$username', '$password', '$name', '$email' )"; mysqli_query($conn,$sql); echo "chúc mừng bạn đã đăng ký thành công"; } }Toàn bộ code đầy đủ trong file chúng tôi sẽ như sau :
<?php require_once("lib/connection.php"); if (isset($_POST["btn_submit"])) { $username = $_POST["username"]; $password = $_POST["pass"]; $name = $_POST["name"]; $email = $_POST["email"]; echo "bạn vui lòng nhập đầy đủ thông tin"; }else{ $sql="select * from users where username='$username'"; $kt=mysqli_query($conn, $sql);
echo "Tài khoản đã tồn tại"; }else{ $sql = "INSERT INTO users( username, password, name, email ) VALUES ( '$username', '$password', '$name', '$email' )"; mysqli_query($conn,$sql); echo "chúc mừng bạn đã đăng ký thành công"; }
} }
Bài 46: Xây Dựng Chức Năng Đăng Ký Thành Viên Với Php Và Mysql
Bài này chúng ta sẽ thực hành xây dựng chức năng đăng ký thành viên với PHP và MySQL, đây là một chức năng đơn giản và rất hay được sử dụng trong PHP. Để xem được bài này đòi hỏi bạn phải nghiên cứu qua hai phương thức POST và GET, các thẻ input thông dụng như text, textarea, …
Để làm được chức năng đăng nhập thì bạn phải thực hiện các bước như sau:
Nội dung chính
1. Xây dựng database bảng thành viên
2. Xây dựng form đăng ký thành viên
3. Xử lý thao tác đăng ký thành viên
4. Lời kết
1
2
3
4
5
6
7
8
9
CREATE TABLE IF NOT EXISTS `member` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(15) COLLATE utf8_unicode_ci DEFAULT NULL,
`password` varchar(50) COLLATE utf8_unicode_ci DEFAULT NULL,
`email` varchar(200) COLLATE utf8_unicode_ci DEFAULT NULL,
`phone` varchar(15) COLLATE utf8_unicode_ci DEFAULT NULL,
`level` tinyint(4) DEFAULT NULL COMMENT '1: admin, 0: member',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;
Tiếp theo ta sẽ Insert một user với tên là admin để làm người quản trị:
1
2
3
INSERT INTO `member` (
`username`, `password`, `email`, `phone`, `level`
) VALUES ('admin', MD5('tinhoccuaem.com'), 'minhtham2006@gmail.com', '0988888888', '1')
Admin là thành viên quản trị của hệ thống website có và có level = 1. Nghĩa là:
Và mật khẩu của admin là MD5('tinhoccuaem.com'), nghĩa là trong hệ thống để bảo đảm an toàn thì ta sẽ dùng hàm MD5 để băm mật khẩu lưu vào trong cơ sở dữ liệu. Như vậy khi check Login thì phải dùng hàm MD5 trong PHP để mã hóa trước khi đưa vào so sánh.
Bạn tạo một file tên register.php với nội dung 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
32
33
34
35
36
37
38
39
40
41
42
Action của form mình trỏ đến file xuly.php nên khi submit form hệ thống sẽ gửi thông tin đến file này. Giao diện như sau:
Form đăng ký thành viên
Trước khi xử lý thao tác thêm thành viên thì ta có một số lưu ý như sau:
Trong hệ thống CSDL thì field idcó thuộc tính auto increment (tự động tăng) nên ta không cần truyền giá trị vào lúc thêm
Thuộc tính Username và Email phải là duy nhất nên trước khi thêm phải kiểm tra bị trùng hay không
Bây giờ bạn tạo file xuly.php với nội dung 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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
header('Content-Type: text/html; charset=utf-8');
if (isset($_POST['do-register']))
{
$username = isset($_POST['username']) ? mysql_escape_string($_POST['username']) : '';
$password = isset($_POST['password']) ? md5($_POST['password']) : '';
$email = isset($_POST['email']) ? mysql_escape_string($_POST['email']) : '';
$phone = isset($_POST['phone']) ? mysql_escape_string($_POST['phone']) : '';
$level = isset($_POST['level']) ? (int)$_POST['level'] : '';
$conn = mysqli_connect('localhost', 'root', 'vertrigo', 'demo') or die ('Lỗi kết nối');
mysqli_set_charset($conn, "utf8");
$sql = "SELECT * FROM member WHERE username = '$username' OR email = '$email'";
$result = mysqli_query($conn, $sql);
{
die ();
}
else {
$sql = "INSERT INTO member (username, password, email, phone, level) VALUES ('$username','$password','$email','$phone', '$level')";
if (mysqli_query($conn, $sql)){
}
else {
}
}
}
Trong file này bạn chú ý mình sử dụng alert được echo từ php để xuất ra thông báo là thành công hay thất bại. Bây giờ bạn chạy thử và kết quả sẽ:
Thông báo thành công nếu thao tác thành công
Thông báo username hoặc email đã tồn tại nếu bạn đăng ký trùng thông tin có sẵn trong CSDL
Thông báo thất bại nếu thao tác lỗi
Mẫu Form Đăng Ký Và Đăng Nhập Đơn Giản Sử Dụng Css Và Javascript.
* { 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’); });
Cập nhật thông tin chi tiết về Tạo Trang Đăng Nhập Đăng Ký Đơn Giản Bằng Php Mysql trên website Rafs.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!