oleh Vincy. Terakhir diubah pada 23 Agustus 2021.
Sistem login adalah untuk mengautentikasi pengguna sebelum mengizinkan mereka mengakses layanan aplikasi. Ini memberi wewenang kepada pengguna untuk mengakses halaman aplikasi yang diistimewakan.
Ada dua hal penting yang perlu diingat saat menerapkan otentikasi login.
- Ikuti mekanisme yang sudah dikenal dan alur masuk
- Hadirkan elemen UI formulir dengan jelas
Otentikasi dapat dilakukan dengan berbagai cara. beberapa dari mereka terdaftar di bawah ini.
- Nama pengguna/email dan kata sandi
- Otentikasi OTP berbasis nomor ponsel
- Otentikasi 2FA
- Otentikasi deteksi wajah
- Otentikasi berbasis pengenalan suara
- Otentikasi berbasis dikte kode
Lebih baik menerapkan cara yang paling umum diikuti di seluruh dunia. Dalam daftar di atas, yang pertama adalah metode paling umum untuk mengumpulkan nama pengguna dan kata sandi dari pengguna. Jadi, cara ini memberikan lebih banyak keakraban dan kejelasan kepada pengguna.
Sebagai titik masuk, halaman login harus menampilkan UI sesederhana mungkin agar pengguna dapat masuk dengan mudah. Saya lebih suka menggunakan alat front-end seperti Bootstrap untuk menyajikan formulir login yang bagus.
Artikel ini akan memberi Anda 3 templat formulir login Bootstrap yang mengagumkan. Itu juga telah membuat kode backend di PHP untuk memproses login. Halaman login responsif agar sesuai dengan viewport berbagai perangkat. Ada lebih banyak templat online untuk menyediakan skrip HTML untuk formulir login Bootstrap.
Komponen formulir masuk
Formulir login dapat berisi elemen-elemen berikut. Bootstrap adalah alat yang cocok untuk memasukkan elemen-elemen ini ke dalam templat formulir masuk dengan tampilan dan nuansa yang bagus.
Contoh ini hanya akan menampilkan dua bidang input untuk mendapatkan nama pengguna dan kata sandi. Ini menggunakan CSS eksternal untuk menangani kueri media untuk menambahkan respons ke UI.
Tentang contoh formulir login Bootstrap
Contoh form login Bootstrap ini menyediakan 3 template alternatif untuk halaman login. Dalam tutorial sebelumnya, kami telah merender formulir kontak Bootstrap agar pengguna dapat menghubungi admin situs.
Ini memuat pustaka Bootstrap dan FontAwsome dengan tata letak umum. Tata letak ini menyematkan PHP untuk menyertakan templat anak formulir login.
Memuat template login bersifat dinamis berdasarkan parameter yang diteruskan dalam string kueri halaman login.
Ketiga template berbagi satu mesin backend yang sama untuk memproses login di PHP. Backend menyertakan skrip login berbasis sesi untuk melanjutkan proses otentikasi.
Tangkapan layar ini menunjukkan struktur file dari contoh formulir login Bootstrap. Ini menunjukkan lokasi template login yang dibuat untuk contoh ini.
Folder gambar menunjukkan gambar latar belakang untuk wadah HTML halaman login.
Setelah login, itu memvalidasi keberadaan sesi pengguna untuk menampilkan pesan selamat datang.
Kode HTML tata letak halaman masuk
Ini adalah tata letak umum untuk ketiga template login. Tata letak ini berisi JavaScript yang diperlukan, CSS termasuk memuat Bootstrap 5.
Ini menggunakan toolkit Font-Awesome untuk memperkaya halaman login untuk menampilkan ikon di tempat yang sesuai.
URL halaman login akan berisi string kueri ?aku= untuk meneruskan nilai numerik 1,2 atau 3. HTML ini menyematkan PHP untuk mendapatkan nilai ini guna merender formulir login yang sesuai ke UI.
Jika tidak ada nilai yang diteruskan, PHP menempatkan nilai default untuk memuat template formulir login Bootstrap 1. Ini menginterpolasi variabel $templat ke jalur templat halaman login.
index.php (Templat induk umum untuk merender formulir Login Bootstrap)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://phppot.com/php/bootstrap-login-form-template/vendor/bootstrap/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome/css/all.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<?php
if (! empty($_GET["i"])) {
$template = intval($_GET["i"]);
}
if (empty($template)) {
$template = 1;
}
require_once __DIR__ . '/template/login-template' . $template . '.php';
?>
</body>
</html>Template untuk halaman login
Template HTML di bawah ini untuk menampilkan formulir login Bootstrap dalam berbagai desain. Bagian ini menunjukkan screenshot keluaran dari setiap template halaman login di bawah kode HTML.
Templat 1
template/login-template1.php
<div id="template-bg-1">
<div
class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class="card p-4 text-light bg-dark mb-5">
<div class="card-header">
<h3>Sign In</h3>
</div>
<div class="card-body w-100">
<form name="login" action="" method="post">
<div class="input-group form-group mt-3">
<div class="bg-secondary rounded-start">
<span class="m-3"><i
class="fas fa-user mt-2"></i></span>
</div>
<input type="text" class="form-control"
placeholder="username" name="username">
</div>
<div class="input-group form-group mt-3">
<div class="bg-secondary rounded-start">
<span class="m-3"><i class="fas fa-key mt-2"></i></span>
</div>
<input type="password" class="form-control"
placeholder="password" name="password">
</div>
<div class="form-group mt-3">
<input type="submit" value="Login"
class="btn bg-secondary float-end text-white w-100"
name="login-btn">
</div>
</form>
<?php if(!empty($loginResult)){?>
<div class="text-danger"><?php echo $loginResult;?></div>
<?php }?>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center">
<div class="text-primary">If you are a registered
user, login here.</div>
</div>
</div>
</div>
</div>
</div>
Templat 2
template/login-template2.php
<div class="sidenav">
<div class="text-white m-5">
<h1>
User Login<br />Authentication
</h1>
<p>
Enter your login details<br /> to get into the application.
</p>
</div>
</div>
<div class="main">
<div
class="d-flex flex-column justify-content-center align-items-center">
<div class="col-md-6 col-sm-12">
<div class="login-form">
<form name="login" action="" method="post" class="m-3">
<div class="form-group">
<label>User Name</label> <input type="text"
class="form-control mt-1 mb-3"
placeholder="User Name" name="username">
</div>
<div class="form-group mb-3">
<label>Password</label> <input type="password"
class="form-control mt-1"
placeholder="Password" name="password">
</div>
<input type="submit"
class="btn text-white bg-dark w-25 login"
value="Login" name="login-btn">
<?php if(!empty($loginResult)){?>
<div class="text-danger"><?php echo $loginResult;?></div>
<?php }?>
</form>
</div>
</div>
</div>
</div>
Templat 3
template/login-template3.php
<div
class="d-flex flex-column min-vh-100 justify-content-center align-items-center"
id="template-bg-3">
<div class="card mb-5 p-5 bg-dark bg-gradient text-white col-md-4">
<div class="card-header text-center">
<h3>Login</h3>
</div>
<div class="card-body mt-3">
<form name="login" action="" method="post">
<div class="input-group form-group mt-3">
<input type="text"
class="form-control text-center p-3"
placeholder="Username" name="username">
</div>
<div class="input-group form-group mt-3">
<input type="password"
class="form-control text-center p-3"
placeholder="Password" name="password">
</div>
<div class="text-center">
<input type="submit" value="Login"
class="btn btn-primary mt-3 w-100 p-2"
name="login-btn">
</div>
</form>
<?php if(!empty($loginResult)){?>
<div class="text-danger"><?php echo $loginResult;?></div>
<?php }?>
</div>
<div class="card-footer p-3">
<div class="d-flex justify-content-center">
<div class="text-primary">If you are a registered user,
login here.</div>
</div>
</div>
</div>
</div>
Ini adalah gaya eksternal untuk menambahkan latar belakang halaman login. Ini juga berisi kueri media untuk membuat formulir login Bootstrap responsif.
assets/css/style.css
/* Template 1 style */
#template-bg-1 {
background-image: url('../../images/template-bg-1.jpg');
}
/* Template 2 style */
.sidenav {
height: 100%;
overflow-x: hidden;
padding-top: 20px;
background-image: url('../../images/side-nav-bg.jpg');
}
.main {
padding: 0px 10px;
}
/* Template 3 style */
#template-bg-3 {
background-image: url('../../images/template-bg-3.jpg');
}
/* Welcome page style */
.bg-image {
background-image: url('../../images/welcome-page-bg.jpg');
}
/* Template 1 media queries begins */
@media screen and (min-width:300px) and (max-width: 400px) {
.container {
width: 100% !important;
display: initial;
}
}
/* Template 2 media queries */
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
}
@media screen and (max-width: 450px) {
.login-form {
margin-top: 10%;
}
}
@media screen and (max-width: 924px) {
.login {
width: 145px !important;
}
}
@media screen and (min-width: 768px) {
.main {
margin-left: 40%;
}
.sidenav {
width: 40%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.login-form {
margin-top: 80%;
}
}
/* Template 3 media queries */
@media screen and (min-width:768px) and (max-width: 980px) {
.card {
width: 50% !important;
display: initial;
}
}
Halaman login, kirim tindakan di PHP
Ada lebih banyak hal untuk membangun sistem otentikasi login yang aman. Tapi, contoh ini membuat skrip PHP sederhana untuk memverifikasi detail yang dimasukkan dengan database
Ini adalah kode PHP rutin untuk menangani otentikasi pengguna berbasis sesi. Ini umum untuk formulir login sederhana dengan nama pengguna dan kata sandi. Tidak peduli apakah itu formulir login Bootstrap atau tidak.
Ini mengimpor kelas model Anggota untuk memanggil fungsi otentikasi login. Kelas model mendefinisikan masukAnggota() untuk menerima detail login yang diposting melalui formulir.
Ini memvalidasi nama pengguna dan kata sandi dengan database anggota. PHP ini menerima respon dari masukAnggota() fungsi.
index.php (Memanggil fungsi login)
<?php
use PhppotMember;
if (! empty($_POST["login-btn"])) {
require_once __DIR__ . '/lib/Member.php';
$member = new Member();
$loginResult = $member->loginMember();
}
?>
Kelas model Anggota ini menghubungkan database untuk mendapatkan objek koneksi. Ketika pengguna masuk, itu memverifikasi apakah nama pengguna ada. Jika demikian, maka itu memverifikasi kata sandi yang diposting dengan kata sandi terenkripsi dalam database.
Setelah login berhasil, ia menambahkan status login ke sesi PHP. Jika tidak, ia mengembalikan pesan kesalahan untuk meminta pengguna mencoba lagi.
lib/Member.php
<?php
namespace Phppot;
class Member
{
private $ds;
function __construct()
{
require_once __DIR__ . '/../lib/DataSource.php';
$this->ds = new DataSource();
}
public function getMember($username)
{
$query = 'SELECT * FROM tbl_member where username = ?';
$paramType="s";
$paramValue = array(
$username
);
$memberRecord = $this->ds->select($query, $paramType, $paramValue);
return $memberRecord;
}
public function loginMember()
{
$memberRecord = $this->getMember($_POST["username"]);
$loginPassword = 0;
if (! empty($memberRecord)) {
if (! empty($_POST["password"])) {
$password = $_POST["password"];
}
$hashedPassword = $memberRecord[0]["password"];
$loginPassword = 0;
if (password_verify($password, $hashedPassword)) {
$loginPassword = 1;
}
} else {
$loginPassword = 0;
}
if ($loginPassword == 1) {
// login sucess so store the member's username in
// the session
session_start();
$_SESSION["username"] = $memberRecord[0]["username"];
$_SESSION["name"] = $memberRecord[0]["name"];
session_write_close();
$url = "home.php";
header("Location: $url");
} else if ($loginPassword == 0) {
$loginStatus = "Invalid username or password.";
return $loginStatus;
}
}
}Layar selamat datang dari halaman login
Dengan memasukkan detail login, tindakan submit memanggil PHP untuk menampilkan hasil login. Ini adalah respons yang berhasil dari tindakan formulir masuk Bootstrap.
Ini menampilkan pesan selamat datang dengan menangani pengguna yang masuk. Itu memuat nama tampilan pengguna dari sesi.
Sebelum menampilkan UI, itu memverifikasi sesi login. Jika sesi tidak kosong, maka akan menampilkan layar selamat datang. Jika tidak, itu akan mengarahkan pengguna kembali ke formulir login Bootstrap.
home.php
<?php
session_start();
if (! empty($_SESSION["name"])) {
$name = $_SESSION["name"];
} else {
session_unset();
$url = "./index.php";
header("Location: $url");
}
session_write_close();
?>
<HTML>
<HEAD>
<TITLE>Welcome</TITLE>
<link rel="stylesheet" href="https://phppot.com/php/bootstrap-login-form-template/vendor/bootstrap/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome-free-5.15.3-web/css/all.css"
rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style>
</style>
</HEAD>
<BODY class="bg-image">
<div class="row">
<div class="col-md-12 text-center mt-5">
<h1>Welcome to the application, <?php echo $name;?>!</h1>
</div>
</div>
</BODY>
</HTML>
Login Bootstrap – Data uji
Berikut ini adalah langkah-langkah untuk menjalankan contoh ini di lingkungan Anda.
- Unduh kode dan unzip ke lingkungan PHP Anda.
- Impor skrip database dan konfigurasikan database di kelas DataSource
- Gunakan detail login ini untuk menguji login.
- nama pengguna – admin
- kata sandi – admin123
Skrip basis data
Impor file .sql ini ke database Anda dan konfigurasikan detailnya di DataSource.php. Ini adalah langkah penting untuk menjalankan contoh ini di komputer lokal Anda.
Skrip ini menyertakan pernyataan buat dan kueri sisipkan untuk tabel anggota. Tabel anggota berisi nama pengguna, kata sandi, dan kolom nama tampilan.
database.sql
--
-- Table structure for table `tbl_member`
--
CREATE TABLE `tbl_member` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`password` varchar(200) NOT NULL,
`create_at` timestamp NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp()
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `tbl_member`
--
INSERT INTO `tbl_member` (`id`, `username`, `password`, `create_at`) VALUES
(1, 'admin', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-08-05 07:48:40'),
(2, 'user', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-08-05 07:49:01');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_member`
--
ALTER TABLE `tbl_member`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_member`
--
ALTER TABLE `tbl_member`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
Kesimpulan
Dengan demikian formulir login Bootstrap dibuat hanya dengan perpustakaan UI yang begitu populer. Contoh dengan UI dan kode backend ini memberikan solusi ujung ke ujung untuk autentikasi.
Template Bootstrap dasar untuk halaman login mudah disesuaikan. Anda juga dapat menambahkan fitur tambahan seperti Ingat Saya atau Lupa Kata Sandi. Artikel tersebut menghubungkan kode contoh untuk membuat fitur ini.
Bagikan saran dan pertanyaan Anda di bagian komentar.
Unduh
Kembali ke Atas
Source link
