Bagaimana saya bisa tahu login dan kata sandi saya di php?

Question

Dalam tutorial ini, saya akan mengajari Anda cara membuat sistem login PHP aman Anda sendiri. Formulir masuk adalah yang dapat digunakan pengunjung situs web Anda untuk masuk ke situs web Anda untuk mengakses konten yang dibatasi, seperti halaman profil. Kami akan memanfaatkan MySQL untuk mengambil data akun dari database

Table of Contents Show

1. 1. Persyaratan
1. 2. Apa yang Akan Anda Pelajari dalam Tutorial ini
1. 3. Struktur & Pengaturan File
Struktur File
2. Membuat Desain Form Login
3. Membuat Database dan mengatur Tabel
4. Otentikasi Pengguna dengan PHP
5. Membuat Halaman Beranda
6. Membuat Halaman Profil
7. Membuat Skrip Logout
Bundel (Hemat 53%)
Tentang Penulis
Bagaimana saya bisa mengetahui ID login dan kata sandi saya di php?
Bagaimana cara memeriksa kata sandi di php?
Bagaimana cara memeriksa kata sandi dan mengonfirmasi kata sandi di php?
Bagaimana cara memeriksa login di php?

Termasuk fitur tambahan dan tautan unduhan ke kode sumber. Selain itu, ini termasuk kode sumber tutorial lengkap

Isi

1. Mulai

Ada beberapa langkah yang perlu kita ambil sebelum kita membuat sistem login aman kita. Kami perlu mengatur lingkungan server web kami dan memastikan kami telah mengaktifkan ekstensi yang diperlukan

1. 1. Persyaratan

Jika Anda belum menyiapkan server web lokal, saya sarankan Anda mengunduh dan menginstal XAMPP
XAMPP adalah paket server web lintas platform yang menyertakan hal-hal penting untuk pengembang back-end. Ini termasuk PHP, MySQL, Apache, phpMyAdmin, dan banyak lagi. Tidak perlu menginstal semua perangkat lunak secara terpisah dengan XAMPP

1. 2. Apa yang Akan Anda Pelajari dalam Tutorial ini

Desain Formulir — Desain formulir login dengan HTML5 dan CSS3
Kueri SQL yang Disiapkan — Cara menyiapkan kueri SQL dengan benar untuk mencegah injeksi SQL dan karenanya mencegah database Anda terekspos
Validasi Dasar — Memvalidasi data formulir yang dikirim ke server menggunakan permintaan GET dan POST (nama pengguna, kata sandi, email, dll. )
Manajemen Sesi — Menginisialisasi sesi dan menyimpan hasil database yang diambil. Sesi disimpan di server dan dikaitkan dengan ID unik yang disimpan di browser

1. 3. Struktur & Pengaturan File

Kita sekarang dapat memulai server web kita dan membuat file dan direktori yang akan kita gunakan untuk sistem login kita

Buka Panel Kontrol XAMPP
Di sebelah modul Apache klik Mulai
Di sebelah modul MySQL, klik Mulai
Arahkan ke direktori instalasi XAMPP (C. \xampp)
Buka direktori htdocs
Buat direktori dan file berikut

Struktur File

\-- login php
  . -- indeks. html
  . -- gaya. css
  . -- otentikasi. php
  . -- keluar. php
  . -- rumah. php
  . -- Profil. php

Setiap file akan terdiri dari berikut ini

indeks. html — Formulir login yang dibuat dengan HTML5 dan CSS3. Kita tidak perlu menggunakan PHP dalam file ini. Oleh karena itu, kita dapat menyimpannya sebagai HTML biasa
gaya. css — Stylesheet (CSS3) untuk sistem login aman kami
mengotentikasi. php — Otentikasi pengguna, sambungkan ke database, validasi data formulir, ambil hasil database, dan buat sesi baru
keluar. php — Hancurkan sesi login dan alihkan pengguna ke halaman login
rumah. php — Beranda dasar untuk pengguna yang masuk
Profil. php — Mengambil detail akun pengguna dari database MySQL kami dan mengisinya dengan PHP dan HTML

Kami sekarang akan membuat formulir yang dapat digunakan pengguna kami untuk memasukkan detail mereka dan mengirimkannya untuk diproses. Kami akan menggunakan HTML dan CSS untuk bagian tutorial ini karena PHP tidak diperlukan di halaman ini

Mengedit indeks. html dengan editor kode favorit Anda dan tambahkan kode berikut

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Login</title>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="login">
			<h1>Login</h1>
			<form action="authenticate.php" method="post">
				<label for="username">
					<i class="fas fa-user"></i>
				</label>
				<input type="text" name="username" placeholder="Username" id="username" required>
				<label for="password">
					<i class="fas fa-lock"></i>
				</label>
				<input type="password" name="password" placeholder="Password" id="password" required>
				<input type="submit" value="Login">
			</form>
		</div>
	</body>
</html>

Jika kita arahkan ke halaman index di web browser anda, maka akan terlihat seperti berikut

http. //localhost/phplogin/index. html

Cukup mendasar bukan? . file css dan mengimplementasikan kode yang akan meningkatkan tampilan formulir

Tambahkan kode berikut ke style. file css

CSS

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

_

Kita perlu menyertakan stylesheet kita di index. html dan oleh karena itu kita harus menambahkan kode berikut ke bagian head

HTML

<link href="style.css" rel="stylesheet" type="text/css">

Dan sekarang jika kita me-refresh index. html di browser web Anda, formulir login Anda akan terlihat lebih menarik

http. //localhost/phplogin/index. html

Itu terlihat jauh lebih baik. Mari persempit elemen form, sehingga kita bisa mendapatkan pemahaman yang lebih baik tentang apa yang terjadi

Form — Kita perlu menggunakan atribut action dan post. Atribut tindakan akan diatur ke file otentikasi. Saat formulir dikirimkan, data formulir akan dikirim ke file autentikasi untuk diproses. Selain itu, metode ini dideklarasikan sebagai post karena ini memungkinkan kita untuk memproses data formulir menggunakan metode permintaan POST
- Masukan (teks/kata sandi) — Kita perlu memberi nama kolom formulir kita agar server dapat mengenalinya. Nilai dari nama atribut dapat kita deklarasikan sebagai nama pengguna, yang dapat kita gunakan untuk mengambil variabel post di file autentikasi kita untuk mendapatkan datanya, misalnya. $_POST['nama pengguna']
- Input (kirim) — Saat pengiriman formulir, data akan dikirim ke file autentikasi kami untuk diproses

3. Membuat Database dan mengatur Tabel

Untuk bagian ini, Anda perlu mengakses database MySQL Anda, baik menggunakan phpMyAdmin atau aplikasi manajemen database MySQL pilihan Anda

Ikuti petunjuk di bawah ini jika Anda menggunakan phpMyAdmin

Navigasi ke. http. //localhost/phpmyadmin/
Klik tab Database di bagian atas
Di bawah Buat basis data, masukkan phplogin di kotak teks
Pilih utf8_general_ci sebagai pemeriksaan
Klik Buat

Anda dapat menggunakan nama database Anda sendiri, tetapi untuk tutorial ini, kami akan menggunakan phplogin

Yang kita butuhkan sekarang adalah tabel akun karena ini akan menyimpan semua akun (nama pengguna, kata sandi, email, dll) yang terdaftar di sistem

Klik database di panel sisi kiri (phplogin) dan jalankan pernyataan SQL berikut

SQL

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', '[email protected]');

Pada phpMyAdmin ini akan terlihat seperti ini

http. //localhost/phpmyadmin/

Kode pernyataan SQL di atas akan membuat tabel akun dengan kolom id, username, password, dan email

Pernyataan SQL akan memasukkan akun pengujian dengan nama pengguna. tes, dan kata sandi. tes. Akun pengujian akan digunakan untuk tujuan pengujian guna memastikan sistem login kami berfungsi dengan benar

4. Otentikasi Pengguna dengan PHP

Sekarang setelah database kita siap, kita dapat melanjutkan dan mulai membuat kode dengan PHP. Kita akan mulai dengan file autentikasi, yang akan memproses dan memvalidasi data formulir yang akan kita kirim dari index. html

Edit autentikasi. php dan tambahkan berikut ini

PHP

<?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
	// If there is an error with the connection, stop the script and display the error.
	exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}

_

Awalnya, kode akan memulai sesi karena ini memungkinkan kami menyimpan detail akun di server dan nantinya akan digunakan untuk mengingat pengguna yang masuk. Tanpa sesi, kami tidak dapat mengaitkan klien dengan server

Menghubungkan ke database sangat penting. Tanpanya, bagaimana kami dapat mengambil dan menyimpan informasi yang terkait dengan pengguna kami?

Tambahkan di bawah

PHP

// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
	// Could not get the data that should have been sent.
	exit('Please fill both the username and password fields!');
}

Kode di atas akan memastikan data formulir ada, sedangkan jika pengguna mencoba mengakses file tanpa mengirimkan formulir, itu akan menghasilkan kesalahan sederhana

Tambahkan di bawah

PHP

// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
	// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
	$stmt->bind_param('s', $_POST['username']);
	$stmt->execute();
	// Store the result so we can check if the account exists in the database.
	$stmt->store_result();


	$stmt->close();
}
?>

_

Kode di atas akan menyiapkan pernyataan SQL yang akan memilih kolom id dan kata sandi dari tabel akun. Selain itu, ini akan mengikat nama pengguna ke pernyataan SQL, menjalankannya, lalu menyimpan hasilnya

Tip Memanfaatkan pernyataan yang disiapkan dengan benar akan mengamankan kueri SQL Anda dan karenanya mencegah injeksi SQL

Setelah baris berikut

$stmt->store_result();

Menambahkan

PHP

if ($stmt->num_rows > 0) {
	$stmt->bind_result($id, $password);
	$stmt->fetch();
	// Account exists, now we verify the password.
	// Note: remember to use password_hash in your registration file to store the hashed passwords.
	if (password_verify($_POST['password'], $password)) {
		// Verification success! User has logged-in!
		// Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
		session_regenerate_id();
		$_SESSION['loggedin'] = TRUE;
		$_SESSION['name'] = $_POST['username'];
		$_SESSION['id'] = $id;
		echo 'Welcome ' . $_SESSION['name'] . '!';
	} else {
		// Incorrect password
		echo 'Incorrect username and/or password!';
	}
} else {
	// Incorrect username
	echo 'Incorrect username and/or password!';
}

_

Pertama, kita perlu memeriksa apakah kueri telah mengembalikan hasil apa pun. Jika nama pengguna tidak ada di database maka tidak akan ada hasil

Jika nama pengguna ada, kita dapat mengikat hasilnya ke variabel $id dan $password

Selanjutnya, kami melanjutkan untuk memverifikasi kata sandi dengan fungsi password_verify. Hanya kata sandi yang dibuat dengan fungsi password_hash yang akan berfungsi

Jika Anda tidak ingin menggunakan metode enkripsi kata sandi apa pun, Anda cukup mengganti kode berikut

PHP

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

_

Dengan

PHP

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

_0

Namun, saya tidak menyarankan menghapus fungsi hashing karena jika entah bagaimana database Anda terekspos, semua kata sandi yang disimpan di tabel akun juga akan terekspos. Selain itu, pengguna akan memiliki rasa privasi mengetahui kata sandi mereka dienkripsi

Setelah autentikasi berhasil dari pengguna, variabel sesi akan diinisialisasi dan dipertahankan hingga dihancurkan dengan keluar atau sesi berakhir. Variabel sesi ini disimpan di server dan dikaitkan dengan ID sesi yang disimpan di browser pengguna. Kami akan menggunakan variabel-variabel ini untuk menentukan apakah pengguna masuk atau tidak dan untuk menghubungkan variabel sesi dengan hasil database MySQL kami yang diambil

Tahukah Anda? Fungsi session_regenerate_id() akan membantu mencegah pembajakan sesi karena meregenerasi ID sesi pengguna yang disimpan di server dan sebagai cookie di browser

Pengguna tidak dapat mengubah variabel sesi di browser mereka, dan karena itu Anda tidak perlu khawatir tentang masalah seperti itu. Satu-satunya variabel yang dapat mereka ubah adalah ID sesi terenkripsi, yang digunakan untuk mengaitkan pengguna dengan sesi server

Sekarang, kita dapat menguji sistem login dan memastikan otentikasi berfungsi dengan benar. Arahkan ke http. //localhost/phplogin/index. html di browser Anda

Ketik nama pengguna dan kata sandi acak, dan klik tombol masuk. Seharusnya menampilkan kesalahan yang akan terlihat seperti berikut

http. //localhost/php masuk/otentikasi. php

Jangan khawatir, itu tidak rusak. Jika kita menavigasi kembali ke form login dan memasukkan test untuk field username dan password, halaman autentikasi akan terlihat seperti berikut

http. //localhost/php masuk/otentikasi. php

Jika Anda menerima kesalahan, pastikan untuk memeriksa ulang kode Anda untuk memastikan Anda tidak melewatkan apa pun atau memeriksa apakah akun pengujian ada di database Anda

5. Membuat Halaman Beranda

Halaman beranda akan menjadi halaman pertama yang dilihat pengguna kami saat mereka masuk. Satu-satunya cara mereka dapat mengakses halaman ini adalah jika mereka login, sedangkan jika tidak, mereka akan dialihkan kembali ke halaman login

Mengedit rumah. php dan tambahkan kode berikut

PHP

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

_1

Pada dasarnya, kode di atas akan memeriksa apakah pengguna sudah masuk. Jika tidak, mereka akan dialihkan ke halaman login. Ingat variabel $_SESSION['loggedin'] yang kita definisikan di autentikasi. file php?

Setelah itu, kita dapat menambahkan beberapa HTML ke beranda kita. Di bawah tag penutup, tambahkan kode berikut

PHP

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

_2

Kode di atas adalah template untuk halaman rumah kami. Di halaman ini, pengguna akan menemukan pesan selamat datang bersama dengan nama mereka ditampilkan

Kita perlu menambahkan CSS untuk halaman beranda. Tambahkan kode berikut ke style. file css

PHP

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

_3

Sekarang setelah kami menyiapkan beranda, kami dapat mengalihkan pengguna kami dari autentikasi. php ke beranda kami, edit autentikasi. php dan ganti baris kode berikut

PHP

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

_4

Dengan

PHP

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

_5

Jika Anda masuk dengan akun percobaan, Anda akan melihat sesuatu seperti ini

http. //localhost/phplogin/home. php

Ini adalah halaman beranda yang cukup mendasar. Anda dapat menyesuaikannya sesuai keinginan Anda sekarang setelah Anda memahami cara kerjanya

6. Membuat Halaman Profil

Halaman profil akan menampilkan informasi akun untuk pengguna yang masuk

Edit profil. php dan tambahkan kode berikut

PHP

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

_6

Kode di atas mengambil informasi akun tambahan dari database, seperti sebelumnya dengan halaman beranda, kami tidak perlu terhubung ke database karena kami mengambil data yang disimpan dalam sesi

Kami akan mengisi semua informasi akun untuk pengguna dan oleh karena itu kami harus mengambil kata sandi dan kolom email dari database. Kami tidak perlu mengambil kolom nama pengguna atau id karena kami telah menyimpannya dalam variabel sesi yang dideklarasikan dalam autentikasi. file php

Setelah tag penutup, tambahkan kode berikut

PHP

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

_7

Tata letak sederhana yang akan mengisi informasi akun. Jika Anda menavigasi ke profil. php, maka akan terlihat seperti berikut

http. //localhost/phplogin/profil. php

Ingat, kata sandi dienkripsi, jadi Anda tidak dapat melihat kata sandi yang didekripsi kecuali Anda membuat variabel sesi baru dan menyimpan kata sandi di autentikasi. file php

7. Membuat Skrip Logout

Membuat skrip logout sangatlah mudah. Yang perlu Anda lakukan hanyalah menghancurkan sesi yang dideklarasikan dalam autentikasi. file php

Edit logout. php dan tambahkan kode berikut

PHP

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

_8

Inisialisasi sesi, hancurkan, dan arahkan pengguna ke halaman login. Kami menggunakan sesi untuk menentukan apakah pengguna masuk atau tidak, jadi dengan menghapusnya, pengguna tidak akan masuk

Kesimpulan

Anda sekarang harus memiliki pemahaman dasar tentang bagaimana sistem login bekerja dengan PHP dan MySQL. Anda bebas menggunakan kode sumber dan memasukkannya ke dalam proyek Anda sendiri

Langkah selanjutnya adalah membuat sistem pendaftaran yang memungkinkan pengunjung untuk mendaftar

Jangan lupa untuk mengikuti kami dan membagikan artikel ini karena ini akan membantu kami membuat tutorial selanjutnya dan memperbarui konten yang ada dengan fitur baru

Tutorial berikutnya dalam seri ini. Sistem Registrasi Aman dengan PHP dan MySQL

Jika Anda ingin mendukung kami, pertimbangkan untuk membeli sistem masuk & pendaftaran aman lanjutan di bawah ini karena ini akan sangat membantu kami membuat lebih banyak tutorial dan menjaga agar situs web kami tetap aktif dan berjalan. Paket lanjutan mencakup kode yang ditingkatkan dan lebih banyak fitur

Canggih

$ 20. 00

melihat rincian lebih lanjut

Kode sumber

File SQL basis data

Login Aman & Sistem Registrasi

Beranda, Profil & Edit Halaman Profil

Fitur Aktivasi Akun

Fitur Ingat Saya

Integrasi AJAX

PDO, MVC OOP & Versi Dasar

panel admin

Tambahan. Tidak ingat kata sandi

Tambahan. Perlindungan Brute Force

Tambahan. Perlindungan CSRF

Tambahan. Autentikasi Dua Faktor

Tambahan. Captcha asli

Tambahan. reCAPTCHA v3

Tambahan. Google OAuth

Tambahan. OAuth Facebook

Desain Responsif (ramah seluler)

File SCSS

Kode yang dikomentari

Pembaruan & Dukungan Gratis (masalah kecil)

Panduan pengguna

Tambahan. Kode Sumber Tutorial

PayPal Unduh Kripto Unduh

Penjualan

Bundel (Hemat 53%)

$ 119. 00

255. 00

melihat rincian lebih lanjut

Login Aman & Sistem Registrasi

Sistem Keranjang Belanja

Aplikasi CRUD

Sistem Tiket

Sistem Galeri

Sistem Kalender Acara

Sistem Polling dan Voting

Sistem Komentar

Sistem Peninjauan

formulir kontak

Sistem Obrolan Dukungan Langsung

Buletin & Sistem Mailing

Akses ke skrip masa depan

PayPal Unduh Kripto Unduh

Tentang Penulis

David Adams

Pengembang situs web yang antusias, saya telah merancang dan mengembangkan aplikasi web selama lebih dari 10 tahun, saya menikmati kreativitas yang saya masukkan ke dalam proyek saya dan menikmati apa yang dibawa orang lain ke web yang luar biasa. Tujuan saya adalah membantu pendatang baru mempelajari cara-cara web

php $namaserver = "localhost";

Bagaimana cara memeriksa kata sandi di php?

Fungsi password_verify() dapat memverifikasi bahwa hash yang diberikan cocok dengan sandi yang diberikan . Perhatikan bahwa fungsi password_hash() dapat mengembalikan algoritme, biaya, dan garam sebagai bagian dari hash yang dikembalikan. Oleh karena itu, semua informasi yang perlu diverifikasi merupakan hash yang termasuk di dalamnya.

Bagaimana cara memeriksa kata sandi dan mengonfirmasi kata sandi di php?

[\w\-]+)/",$email)) { $emailErr = "Anda Memasukkan Format Email yang Tidak Valid"; } } //Validasi Username if (kosong($_POST["username"])) { $userErr . "; } else { $username = test_input($_POST["username"]); } //Validasi kata sandi dan konfirmasi kata sandi

session_start(); Periksa apakah $_SESSION["loggedIn" ] (tidak) benar - Jika tidak, alihkan mereka ke login . Simpan jawaban ini.

kode php