programming php

Đăng nhập PHP của tôi

Người dùng lần đầu sẽ cần tạo tài khoản MyPHP mới. Vui lòng chọn cổng thích hợp để bắt đầu

Bàn tham khảo thành viên chứa các biểu mẫu và tài liệu có thể tải xuống cho chương trình sức khỏe của bạn. Khi bạn nhập số nhóm và số người đăng ký, bạn sẽ có thể tải xuống bản tóm tắt quyền lợi, sổ tay PHP, giấy chứng nhận bảo hiểm, chỉ thị trước, tuyên bố về quyền riêng tư, mẫu đơn đặt hàng qua thư của nhà thuốc và danh sách thuốc theo toa

Trong hướng dẫn này, tôi sẽ hướng dẫn bạn cách bạn có thể tạo hệ thống đăng nhập PHP an toàn của riêng mình. Biểu mẫu đăng nhập là những gì khách truy cập trang web của bạn có thể sử dụng để đăng nhập vào trang web của bạn nhằm truy cập nội dung bị hạn chế, chẳng hạn như trang hồ sơ. Chúng tôi sẽ tận dụng MySQL để lấy dữ liệu tài khoản từ cơ sở dữ liệu

Gói Nâng cao bao gồm các tính năng bổ sung và liên kết tải xuống mã nguồn

nội dung

Bắt đầu
1. Yêu cầu
2. Bạn sẽ học được gì trong Hướng dẫn này
3. Cấu trúc & Thiết lập Tệp
Tạo thiết kế biểu mẫu đăng nhập
Tạo cơ sở dữ liệu và thiết lập bảng
Xác thực người dùng bằng PHP
Tạo Trang chủ
Tạo trang hồ sơ
Tạo tập lệnh đăng xuất

1. Bắt đầu

Có một số bước chúng tôi cần thực hiện trước khi tạo hệ thống đăng nhập an toàn của mình. Chúng tôi cần thiết lập môi trường máy chủ web của mình và đảm bảo rằng chúng tôi đã bật các tiện ích mở rộng cần thiết

1. 1. Yêu cầu

Nếu bạn chưa thiết lập máy chủ web cục bộ, tôi khuyên bạn nên tải xuống và cài đặt XAMPP
XAMPP là gói máy chủ web đa nền tảng bao gồm các yếu tố cần thiết cho nhà phát triển back-end. Nó bao gồm PHP, MySQL, Apache, phpMyAdmin, v.v. Không cần thiết phải cài đặt riêng từng phần mềm với XAMPP

1. 2. Bạn sẽ học được gì trong Hướng dẫn này

Thiết kế biểu mẫu — Thiết kế biểu mẫu đăng nhập với HTML5 và CSS3
Truy vấn SQL đã chuẩn bị — Cách chuẩn bị đúng cách các truy vấn SQL để ngăn chặn SQL injection và do đó ngăn cơ sở dữ liệu của bạn bị lộ
Xác thực cơ bản — Xác thực dữ liệu biểu mẫu được gửi đến máy chủ bằng các yêu cầu GET và POST [tên người dùng, mật khẩu, email, v.v. ]
Quản lý phiên - Khởi tạo phiên và lưu trữ kết quả cơ sở dữ liệu đã truy xuất. Các phiên được lưu trên máy chủ và được liên kết với một ID duy nhất được lưu trong trình duyệt

1. 3. Cấu trúc & Thiết lập Tệp

Bây giờ chúng ta có thể khởi động máy chủ web của mình và tạo các tệp và thư mục mà chúng ta sẽ sử dụng cho hệ thống đăng nhập của mình

Mở Bảng điều khiển XAMPP
Bên cạnh mô-đun Apache, nhấp vào Bắt đầu
Bên cạnh mô-đun MySQL, nhấp vào Bắt đầu
Điều hướng đến thư mục cài đặt của XAMPP [C. \xampp]
Mở thư mục htdocs
Tạo các thư mục và tệp sau

Cấu trúc tệp

\-- phplogin
. -- mục lục. html
. -- Phong cách. css
. -- xác thực. php
. -- đăng xuất. php
. -- Trang Chủ. php
. -- Hồ sơ. php

Mỗi tập tin sẽ bao gồm những điều sau đây

mục lục. html — Biểu mẫu đăng nhập được tạo bằng HTML5 và CSS3. Chúng tôi không cần sử dụng PHP trong tệp này. Do đó, chúng ta có thể lưu nó dưới dạng HTML đơn giản
Phong cách. css — Biểu định kiểu [CSS3] cho hệ thống đăng nhập an toàn của chúng tôi
xác thực. php — Xác thực người dùng, kết nối với cơ sở dữ liệu, xác thực dữ liệu biểu mẫu, truy xuất kết quả cơ sở dữ liệu và tạo phiên mới
đăng xuất. php — Hủy phiên đăng nhập và chuyển hướng người dùng đến trang đăng nhập
Trang Chủ. php — Trang chủ cơ bản dành cho người dùng đã đăng nhập
Hồ sơ. php — Truy xuất chi tiết tài khoản của người dùng từ cơ sở dữ liệu MySQL của chúng tôi và điền chúng bằng PHP và HTML

2. Tạo thiết kế biểu mẫu đăng nhập

Bây giờ chúng tôi sẽ tạo một biểu mẫu mà người dùng của chúng tôi có thể sử dụng để nhập thông tin chi tiết của họ và gửi chúng để xử lý. Chúng tôi sẽ sử dụng HTML và CSS cho phần này của hướng dẫn vì PHP sẽ không cần thiết trên trang này

Chỉnh sửa chỉ mục. html bằng trình chỉnh sửa mã yêu thích của bạn và thêm đoạn mã sau

HTML Bản sao



	
		
		Login
		
	
	
		
			Login

Nếu chúng tôi điều hướng đến trang chỉ mục trong trình duyệt web của bạn, nó sẽ giống như sau

http. // localhost/phplogin/chỉ mục. html

Khá cơ bản phải không? . css và triển khai mã sẽ cải thiện giao diện của biểu mẫu

Thêm đoạn mã sau vào phong cách. tập tin css

CSS Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Chúng tôi cần đưa biểu định kiểu của chúng tôi vào chỉ mục của chúng tôi. html và do đó chúng ta phải thêm đoạn mã sau vào phần đầu

HTML Bản sao

Và bây giờ nếu chúng ta làm mới chỉ mục. html trong trình duyệt web của bạn, biểu mẫu đăng nhập của bạn sẽ trông hấp dẫn hơn

http. // localhost/phplogin/chỉ mục. html

Điều đó có vẻ tốt hơn nhiều. Hãy thu hẹp các thành phần của biểu mẫu để chúng ta có thể hiểu rõ hơn về những gì đang diễn ra

Biểu mẫu - Chúng tôi cần sử dụng cả thuộc tính hành động và bài đăng. Thuộc tính hành động sẽ được đặt thành tệp xác thực. Khi biểu mẫu được gửi, dữ liệu biểu mẫu sẽ được gửi đến tệp xác thực để xử lý. Ngoài ra, phương thức được khai báo là post vì điều này sẽ cho phép chúng tôi xử lý dữ liệu biểu mẫu bằng phương thức yêu cầu POST
- Đầu vào [văn bản/mật khẩu] — Chúng tôi cần đặt tên cho các trường biểu mẫu của mình để máy chủ có thể nhận ra chúng. Ví dụ, giá trị của tên thuộc tính mà chúng ta có thể khai báo là tên người dùng, mà chúng ta có thể sử dụng để truy xuất biến bài đăng trong tệp xác thực của mình để lấy dữ liệu. $_POST['tên người dùng']
- Đầu vào [gửi] — Khi gửi biểu mẫu, dữ liệu sẽ được gửi đến tệp xác thực của chúng tôi để xử lý

3. Tạo cơ sở dữ liệu và thiết lập bảng

Đối với phần này, bạn sẽ cần truy cập cơ sở dữ liệu MySQL của mình, bằng cách sử dụng phpMyAdmin hoặc ứng dụng quản lý cơ sở dữ liệu MySQL ưa thích của bạn

Thực hiện theo các hướng dẫn bên dưới nếu bạn đang sử dụng phpMyAdmin

Hướng đến. http. //localhost/phpmyadmin/
Nhấp vào tab Cơ sở dữ liệu ở trên cùng
Trong Tạo cơ sở dữ liệu, nhập phplogin vào hộp văn bản
Chọn utf8_General_ci làm đối chiếu
Nhấp vào Tạo

Bạn có thể sử dụng tên cơ sở dữ liệu của riêng mình, nhưng đối với hướng dẫn này, chúng tôi sẽ sử dụng phplogin

Những gì chúng ta cần bây giờ là một bảng tài khoản vì nó sẽ lưu trữ tất cả các tài khoản [tên người dùng, mật khẩu, email, v.v.] đã được đăng ký với hệ thống

Nhấp vào cơ sở dữ liệu trên bảng điều khiển bên trái [phplogin] và thực hiện câu lệnh SQL sau

SQL Sao chép

CREATE TABLE IF NOT EXISTS `accounts` [
	`id` int[11] NOT NULL AUTO_INCREMENT,
  	`username` varchar[50] NOT NULL,
  	`password` varchar[255] NOT NULL,
  	`email` varchar[100] NOT NULL,
    PRIMARY KEY [`id`]
] ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;

INSERT INTO `accounts` [`id`, `username`, `password`, `email`] VALUES [1, 'test', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', 'test@test.com'];

Trên phpMyAdmin, cái này sẽ giống như

http. //localhost/phpmyadmin/

Đoạn mã câu lệnh SQL trên sẽ tạo bảng tài khoản với các cột id, tên người dùng, mật khẩu và email

Câu lệnh SQL sẽ chèn một tài khoản thử nghiệm với tên người dùng. kiểm tra và mật khẩu. kiểm tra. Tài khoản thử nghiệm sẽ được sử dụng cho mục đích thử nghiệm để đảm bảo hệ thống đăng nhập của chúng tôi hoạt động chính xác

4. Xác thực người dùng bằng PHP

Bây giờ chúng ta đã thiết lập cơ sở dữ liệu, chúng ta có thể tiếp tục và bắt đầu viết mã bằng PHP. Chúng tôi sẽ bắt đầu với tệp xác thực, tệp này sẽ xử lý và xác thực dữ liệu biểu mẫu mà chúng tôi sẽ gửi từ chỉ mục của mình. tệp html

Chỉnh sửa xác thực. php và thêm vào như sau

PHP Bản sao

Đoạn mã trên sẽ chuẩn bị câu lệnh SQL sẽ chọn cột id và mật khẩu từ bảng tài khoản. Ngoài ra, nó sẽ liên kết tên người dùng với câu lệnh SQL, thực thi và sau đó lưu trữ kết quả

Sau dòng sau

$stmt->store_result[];

Thêm vào

PHP Bản sao

________số 8

Đầu tiên, chúng ta cần kiểm tra xem truy vấn có trả về kết quả nào không. Nếu tên người dùng không tồn tại trong cơ sở dữ liệu thì sẽ không có kết quả

Nếu tên người dùng tồn tại, chúng tôi có thể liên kết kết quả với cả hai biến $id và $password

Sau đó, chúng tôi tiến hành xác minh mật khẩu bằng hàm password_verify. Chỉ những mật khẩu được tạo bằng hàm password_hash mới hoạt động

Nếu bạn không muốn sử dụng bất kỳ phương thức mã hóa mật khẩu nào, bạn chỉ cần thay thế đoạn mã sau

PHP Bản sao

if [password_verify[$_POST['password'], $password]] {

Với

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Tuy nhiên, tôi không khuyên bạn nên loại bỏ các hàm băm vì nếu bằng cách nào đó cơ sở dữ liệu của bạn bị lộ, tất cả mật khẩu được lưu trong bảng tài khoản cũng sẽ bị lộ. Ngoài ra, người dùng sẽ có cảm giác riêng tư khi biết mật khẩu của họ được mã hóa

Sau khi xác thực thành công từ người dùng, các biến phiên sẽ được khởi tạo và lưu giữ cho đến khi chúng bị hủy do đăng xuất hoặc phiên hết hạn. Các biến phiên này được lưu trữ trên máy chủ và được liên kết với ID phiên được lưu trữ trong trình duyệt của người dùng. Chúng tôi sẽ sử dụng các biến này để xác định xem người dùng đã đăng nhập hay chưa và để liên kết các biến phiên với kết quả cơ sở dữ liệu MySQL đã truy xuất của chúng tôi

Bạn có biết không? Hàm session_regenerate_id[] sẽ giúp ngăn chặn việc chiếm quyền điều khiển phiên vì nó tạo lại ID phiên của người dùng được lưu trữ trên máy chủ và dưới dạng cookie trong trình duyệt

Người dùng không thể thay đổi các biến phiên trong trình duyệt của họ và do đó bạn không cần phải lo lắng về vấn đề đó. Biến duy nhất họ có thể thay đổi là ID phiên được mã hóa, được sử dụng để liên kết người dùng với phiên máy chủ

Bây giờ chúng ta có thể kiểm tra hệ thống đăng nhập và đảm bảo xác thực hoạt động chính xác. Điều hướng đến http. // localhost/phplogin/chỉ mục. html trong trình duyệt của bạn

Nhập tên người dùng và mật khẩu ngẫu nhiên và nhấp vào nút đăng nhập. Nó sẽ xuất ra một lỗi trông giống như sau

http. // localhost/php đăng nhập/xác thực. php

Đừng lo lắng, nó không bị hỏng. Nếu chúng tôi điều hướng trở lại biểu mẫu đăng nhập của mình và nhập kiểm tra cho cả trường tên người dùng và mật khẩu, trang xác thực sẽ giống như sau

http. // localhost/php đăng nhập/xác thực. php

Nếu bạn gặp lỗi, hãy nhớ kiểm tra kỹ mã của mình để đảm bảo bạn không bỏ sót điều gì hoặc kiểm tra xem tài khoản thử nghiệm có tồn tại trong cơ sở dữ liệu của bạn không

5. Tạo Trang chủ

Trang chủ sẽ là trang đầu tiên người dùng của chúng tôi nhìn thấy khi họ đăng nhập. Cách duy nhất họ có thể truy cập trang này là nếu họ đã đăng nhập, trong khi nếu không, họ sẽ được chuyển hướng trở lại trang đăng nhập

sửa nhà. php và thêm đoạn mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Về cơ bản, đoạn mã trên sẽ kiểm tra xem người dùng đã đăng nhập chưa, nếu không, họ sẽ được chuyển hướng đến trang đăng nhập. Hãy nhớ biến $_SESSION['loggedin'] mà chúng tôi đã xác định trong xác thực. tập tin php?

Bây giờ chúng ta có thể thêm một số HTML vào trang chủ của mình. Bên dưới thẻ đóng, thêm đoạn mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Đoạn mã trên là mẫu cho trang chủ của chúng tôi. Trên trang này, người dùng sẽ gặp một thông báo chào mừng cùng với tên của họ được hiển thị

Chúng ta cần thêm CSS cho trang chủ. Thêm đoạn mã sau vào phong cách. tập tin css

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Bây giờ chúng tôi đã thiết lập trang chủ của mình, chúng tôi có thể chuyển hướng người dùng của mình từ xác thực. php vào trang chủ của chúng tôi, chỉnh sửa xác thực. php và thay thế dòng mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Với

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Nếu bạn đăng nhập bằng tài khoản thử nghiệm, bạn sẽ thấy như thế này

http. // localhost/phplogin/trang chủ. php

Đây là một trang chủ khá cơ bản. Bạn có thể tùy chỉnh nó theo cách bạn muốn khi bạn đã hiểu cách thức hoạt động của nó

6. Tạo trang hồ sơ

Trang hồ sơ sẽ hiển thị thông tin tài khoản cho người dùng đã đăng nhập

Chỉnh sửa hồ sơ. php và thêm đoạn mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Đoạn mã trên lấy thông tin tài khoản bổ sung từ cơ sở dữ liệu, như trước đây với trang chủ, chúng tôi không cần kết nối với cơ sở dữ liệu vì chúng tôi đã lấy dữ liệu được lưu trữ trong phiên

Chúng tôi sẽ điền tất cả thông tin tài khoản cho người dùng và do đó chúng tôi phải truy xuất các cột mật khẩu và email từ cơ sở dữ liệu. Chúng tôi không cần truy xuất các cột tên người dùng hoặc id vì chúng tôi đã lưu trữ chúng trong các biến phiên đã được khai báo trong xác thực. tập tin php

Sau thẻ đóng, thêm đoạn mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Một bố cục đơn giản sẽ điền thông tin tài khoản. Nếu bạn điều hướng đến hồ sơ. php, nó sẽ giống như sau

http. // localhost/phplogin/hồ sơ. php

Hãy nhớ rằng, mật khẩu được mã hóa, vì vậy bạn không thể thấy mật khẩu được giải mã trừ khi bạn tạo một biến phiên mới và lưu trữ mật khẩu trong tệp xác thực. tập tin php

7. Tạo tập lệnh đăng xuất

Tạo tập lệnh đăng xuất rất đơn giản. Tất cả những gì bạn cần làm là hủy các phiên đã được khai báo trong tệp xác thực

Chỉnh sửa đăng xuất. php và thêm đoạn mã sau

PHP Bản sao

* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
body {
  	background-color: #435165;
}
.login {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba[0, 0, 0, 0.3];
  	margin: 100px auto;
}
.login h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.login form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.login form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
  	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.login form input[type="submit"] {
  	width: 100%;
  	padding: 15px;
 	margin-top: 20px;
  	background-color: #3274d6;
  	border: 0;
  	cursor: pointer;
  	font-weight: bold;
  	color: #ffffff;
  	transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Khởi tạo phiên, hủy chúng và chuyển hướng người dùng đến trang đăng nhập. Chúng tôi sử dụng các phiên để xác định xem người dùng có đăng nhập hay không, vì vậy bằng cách xóa chúng, người dùng sẽ không đăng nhập

Phần kết luận

Bây giờ bạn đã có hiểu biết cơ bản về cách hệ thống đăng nhập hoạt động với PHP và MySQL. Bạn được tự do sử dụng mã nguồn và kết hợp nó vào các dự án của riêng bạn

Bước tiếp theo là tạo một hệ thống đăng ký cho phép khách truy cập đăng ký

Đừng quên theo dõi chúng tôi và chia sẻ bài viết vì nó sẽ giúp chúng tôi tạo các hướng dẫn trong tương lai và cập nhật nội dung hiện có với các tính năng mới

Hướng dẫn tiếp theo trong loạt bài này. Hệ thống đăng ký an toàn với PHP và MySQL

Nếu bạn muốn hỗ trợ chúng tôi, hãy xem xét việc mua hệ thống đăng nhập và đăng ký an toàn nâng cao bên dưới vì nó sẽ giúp chúng tôi tạo ra nhiều hướng dẫn hơn và duy trì hoạt động của trang web của chúng tôi. Gói nâng cao bao gồm mã cải tiến và nhiều tính năng hơn

Nâng cao

$ 20. 00

xem thêm chi tiết

Mã nguồn

Tệp SQL cơ sở dữ liệu

Hệ thống đăng nhập và đăng ký an toàn

Trang chủ, Hồ sơ & Chỉnh sửa Trang Hồ sơ

Tính năng kích hoạt tài khoản

Tính năng Nhớ tôi

Tích hợp AJAX

PDO, MVC OOP & Phiên bản cơ bản

bảng quản trị

Thêm vào. Quên mật khẩu

Thêm vào. Bảo vệ vũ lực

Thêm vào. Bảo vệ CSRF

Thêm vào. Xác thực hai yếu tố

Thêm vào. mã ngẫu nhiên

Thiết kế đáp ứng [thân thiện với thiết bị di động]

Tệp SCSS

Mã nhận xét

Cập nhật và hỗ trợ miễn phí [các vấn đề nhỏ]

Hướng dẫn sử dụng

Thêm. Mã nguồn hướng dẫn

PayPal Tải xuống Stripe Tải xuống CryptoDownload

Giảm giá

Gói [Tiết kiệm 53%]

$ 119. 00

255. 00

xem thêm chi tiết

Hệ thống đăng nhập và đăng ký an toàn

Hệ thống giỏ hàng

Ứng dụng CRUD

Hệ thống bán vé

Hệ thống thư viện

Hệ thống lịch sự kiện

Hệ thống thăm dò ý kiến và bỏ phiếu

Hệ thống bình luận

Đánh giá hệ thống

Mâu liên hệ

Hệ thống trò chuyện hỗ trợ trực tiếp

Bản tin & Hệ thống gửi thư

Truy cập vào các tập lệnh trong tương lai

PayPal Tải xuống Stripe Tải xuống CryptoDownload

về tác giả

David Adams

Nhà phát triển trang web nhiệt tình, tôi đã thiết kế và phát triển các ứng dụng web trong hơn 10 năm, tôi tận hưởng sự sáng tạo mà tôi đưa vào các dự án của mình và tận hưởng những gì người khác mang đến cho trang web tuyệt vời. Mục tiêu của tôi là giúp những người mới tìm hiểu cách sử dụng web

Làm cách nào để đăng nhập trong PHP MySQL?

Để chạy form đăng nhập các bạn mở xampp control panel chạy apache server và PHP. Bây giờ, gõ localhost/xampp/tên thư mục/tên tệp trong trình duyệt và nhấn phím Enter. Tất cả các thiết lập được thực hiện ngay bây giờ. Nhập tên người dùng và mật khẩu vào mẫu đăng nhập và nhấp vào nút đăng nhập

Làm cách nào để sử dụng phpMyAdmin?

Làm cách nào để làm việc với phpMyAdmin? . Chúng tôi có thể tạo bất kỳ số lượng cơ sở dữ liệu nào. Nhập tên bảng, số cột và nhấp vào Đi. Click on New [1] to create a database and enter the database name in Create database [2] field and then click on Create [3] button. We can create any number of databases. Enter the table name, number of columns, and click on Go.

phpMyAdmin có giống với MySQL không?

Sự khác biệt giữa PHPMyAdmin và MySQL là gì? . phpMyAdmin là ứng dụng web được viết chủ yếu bằng PHP . Nó được sử dụng để quản lý cơ sở dữ liệu MySQL.

Làm cách nào để kiểm tra Tên người dùng và mật khẩu trong PHP MySQL?

php $servername = "localhost";

nội dung

1. Bắt đầu

1. 1. Yêu cầu

1. 2. Bạn sẽ học được gì trong Hướng dẫn này

1. 3. Cấu trúc & Thiết lập Tệp

Cấu trúc tệp

2. Tạo thiết kế biểu mẫu đăng nhập

Login

3. Tạo cơ sở dữ liệu và thiết lập bảng

4. Xác thực người dùng bằng PHP

5. Tạo Trang chủ

6. Tạo trang hồ sơ

7. Tạo tập lệnh đăng xuất

Phần kết luận

Nâng cao

Gói [Tiết kiệm 53%]

về tác giả

David Adams

Làm cách nào để đăng nhập trong PHP MySQL?

Làm cách nào để sử dụng phpMyAdmin?

phpMyAdmin có giống với MySQL không?

Làm cách nào để kiểm tra Tên người dùng và mật khẩu trong PHP MySQL?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề