Formulir Login PHP dengan database MySQL dan validasi formulir

oleh Vincy. Terakhir diubah pada 19 Juli 2022.

Formulir masuk – titik masuk situs web untuk mengautentikasi pengguna. Sistem login PHP mengharuskan pengguna untuk mendaftar dengan aplikasi terlebih dahulu untuk login kemudian.

Pengguna terdaftar dikelola dalam database di bagian belakang. Pada setiap upaya login melalui formulir login PHP, ia memverifikasi database untuk menemukan kecocokan.

Ini adalah pekerjaan yang sangat sederhana dan penting. Pada saat yang sama, itu harus dirancang dengan keamanan untuk menjaga situs. Itu harus memfilter hit anonim 100% untuk tidak membiarkan pengguna yang tidak terdaftar masuk.

Tindakan formulir login PHP menyimpan pengguna yang login dalam sebuah sesi. Ia menggunakan PHP $_SESSION salah satu superglobalnya. Lebih baik memvalidasi keberadaan sesi ini di awal setiap halaman yang akan dilindungi.

Kode PHP ini juga dapat digunakan untuk menambahkan login admin untuk panel kontrol Anda. Juga, ini dapat digunakan sebagai entri otentikasi umum untuk sisi admin dan pengguna aplikasi.

Kode formulir login PHP

Contoh ini adalah merancang formulir login PHP yang bekerja dengan pemrosesan backend. Halaman login di PHP menunjukkan elemen UI seperti login sosial, lupa kata sandi dan lain-lain.

Ini memposting data untuk memproses otentikasi login berbasis nama pengguna/kata sandi. Contoh ini menggunakan database untuk mengotentikasi login pengguna.

Sistem login PHP ini mampu menautkan kode berikut ke kontrol formulir login tambahan.

  1. Tautkan fitur lupa/reset kata sandi PHP.
  2. Tautkan Contoh PHP pendaftaran pengguna ke opsi pendaftaran.
  3. Juga, Link masuk Oauth dengan Facebook, Twitter dan Linkedin.

formulir login php

Templat formulir HTML

Laman landas merender template ini ke dalam UI agar pengguna dapat masuk. Ini akan terjadi jika tidak ada sesi masuk.

Formulir ini menerima nama pengguna atau email detail login pengguna dan kata sandi yang aman. Acara kirim memicu validasi formulir login PHP dan memposting data login ke PHP.

Formulir login PHP ini responsif terhadap ukuran viewport yang berbeda. Ini menggunakan kueri media CSS sederhana untuk menambahkan respons situs.

Tag formulir memanggil fungsi JavaScript mengesahkan() pada acara penyerahan. Kode di bawah ini menyertakan skrip validasi formulir login PHP di bagian akhir.

lihat/login-form.php

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>User Login</title>
<link href="https://phppot.com/php/php-login-form/./view/css/form.css" rel="stylesheet" type="text/css" />
<style>
body {
	font-family: Arial;
	color: #333;
	font-size: 0.95em;
	background-image: url("./view/images/bg.jpeg");
}
</style>
</head>
<body>
	<div>
		<form action="login-action.php" method="post" id="frmLogin"
			onSubmit="return validate();">
			<div class="login-form-container">

				<div class="form-head">Login</div>
                <?php
                if (isset($_SESSION["errorMessage"])) {
                    ?>
                <div class="error-message"><?php  echo $_SESSION["errorMessage"]; ?></div>
                <?php
                    unset($_SESSION["errorMessage"]);
                }
                ?>
                <div class="field-column">
					<div>
						<label for="username">Username</label><span id="user_info"
							class="error-info"></span>
					</div>
					<div>
						<input name="user_name" id="user_name" type="text"
							class="demo-input-box" placeholder="Enter Username or Email">
					</div>
				</div>
				<div class="field-column">
					<div>
						<label for="password">Password</label><span id="password_info"
							class="error-info"></span>
					</div>
					<div>
						<input name="password" id="password" type="password"
							class="demo-input-box" placeholder="Enter Password">
					</div>
				</div>
				<div class=field-column>
					<div>
						<input type="submit" name="login" value="Login" class="btnLogin"></span>
					</div>
				</div>
				<div class="form-nav-row">
					<a href="#" class="form-link">Forgot password?</a>
				</div>
				<div class="login-row form-nav-row">
					<p>New user?</p>
					<a href="#" class="btn form-link">Signup Now</a>
				</div>
				<div class="login-row form-nav-row">
					<p>May also signup with</p>
					<a href="#"><img src="view/images/icon-facebook.png"
						class="signup-icon" /></a><a href="#"><img
						src="view/images/icon-twitter.png" class="signup-icon" /></a><a
						href="#"><img src="view/images/icon-linkedin.png"
						class="signup-icon" /></a>
				</div>
			</div>
		</form>
	</div>
	<script>
    function validate() {
        var $valid = true;
        document.getElementById("user_info").innerHTML = "";
        document.getElementById("password_info").innerHTML = "";
        
        var userName = document.getElementById("user_name").value;
        var password = document.getElementById("password").value;
        if(userName == "") 
        {
            document.getElementById("user_info").innerHTML = "required";
        	$valid = false;
        }
        if(password == "") 
        {
        	document.getElementById("password_info").innerHTML = "required";
            $valid = false;
        }
        return $valid;
    }
    </script>
</body>
</html>

Tindakan formulir masuk PHP

Skrip titik akhir PHP yang merupakan target tindakan dari formulir login menangani data login.

Halaman login di PHP ini membersihkan data sebelum memprosesnya. Ini menggunakan PHP filter_var berfungsi untuk membersihkan detail otentikasi yang dimasukkan pengguna.

Itu melakukan proses otentikasi setelah menerima kredensial pengguna.

Program ini menempatkan detail pengguna yang diautentikasi dalam satu sesi. Kemudian, ia mengakui pengguna yang sesuai.

login-action.php

<?php
namespace Phppot;

use PhppotMember;
if (! empty($_POST["login"])) {
    session_start();
    $username = filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
    $password = filter_var($_POST["password"], FILTER_SANITIZE_STRING);
    require_once (__DIR__ . "/class/Member.php");
    
    $member = new Member();
    $isLoggedIn = $member->processLogin($username, $password);
    if (! $isLoggedIn) {
        $_SESSION["errorMessage"] = "Invalid Credentials";
    }
    header("Location: ./index.php");
    exit();
}


Kelas model otentikasi login PHP

Ini berisi fungsi processLogin() untuk memeriksa data form login PHP dengan database. Ini menggunakan PHP verifikasi_kata sandi() berfungsi untuk memvalidasi kata sandi yang dimasukkan pengguna. Fungsi PHP ini membandingkan password dengan password hash pada database.

Fungsi getMemberById() membaca hasil anggota dengan id anggota. Setelah berhasil login, dipanggil dari case untuk menampilkan dashboard. Ini mengembalikan array data yang akan ditampilkan di dasbor.

class/Member.php

<?php
namespace Phppot;

use PhppotDataSource;

class Member
{

    private $dbConn;

    private $ds;

    function __construct()
    {
        require_once "DataSource.php";
        $this->ds = new DataSource();
    }

    function getMemberById($memberId)
    {
        $query = "select * FROM registered_users WHERE id = ?";
        $paramType = "i";
        $paramArray = array($memberId);
        $memberResult = $this->ds->select($query, $paramType, $paramArray);
        
        return $memberResult;
    }
    
    public function processLogin($username, $password) {
        $query = "select * FROM registered_users WHERE user_name = ? OR email = ?";
        $paramType = "ss";
        $paramArray = array($username, $username);
        $memberResult = $this->ds->select($query, $paramType, $paramArray);
        if(!empty($memberResult)) {
            $hashedPassword = $memberResult[0]["password"];
            if (password_verify($password, $hashedPassword)) {
                $_SESSION["userId"] = $memberResult[0]["id"];
                return true;
            }
        }
        return false;
    }
}

Tampilkan dasbor dan tautan keluar setelah login PHP

Setelah login berhasil, situs mengatakan ada sesi pengguna yang login. Itu dapat ditunjukkan dengan cara yang berbeda.

Di sebagian besar situs, tajuk situs menampilkan tautan profil pengguna yang masuk. Itu bisa berupa avatar yang dapat diklik yang meluncur ke bawah menu profil.

Sistem login PHP ini mengarahkan pengguna ke halaman dashboard setelah login. Halaman dasbor ini menampilkan pesan selamat datang, tentang pengguna dengan avatar.

Halaman arahan memeriksa sesi PHP jika ada pengguna yang sudah masuk. Jika demikian, itu akan dialihkan ke halaman dasbor ini.

lihat/dasbor.php

<?php
namespace Phppot;

use PhppotMember;

if (! empty($_SESSION["userId"])) {
    require_once __DIR__ . './../class/Member.php';
    $member = new Member();
    $memberResult = $member->getMemberById($_SESSION["userId"]);
    if(!empty($memberResult[0]["display_name"])) {
        $displayName = ucwords($memberResult[0]["display_name"]);
    } else {
        $displayName = $memberResult[0]["user_name"];
    }
}
?>
<html>
<head>
<title>User Login</title>
<style>
body {
	font-family: Arial;
	color: #333;
	font-size: 0.95em;
}

.dashboard {
	background: #d2edd5;
	margin: 15px auto;
	line-height: 1.8em;
	color: #333;
	border-radius: 4px;
	padding: 30px;
	max-width: 400px;
	border: #c8e0cb 1px solid;
	text-align: center;
}

a.logout-button {
	color: #09f;
}
.profile-photo {
    width: 100px;
    border-radius: 50%; 
}
</style>
</head>
<body>
    <div>
        <div class="dashboard">
            <div class="member-dashboard">
            <p>Welcome <b><?php echo $displayName; ?>!</b></p>
            <p><?php echo $memberResult[0]["about"]; ?></p>
            
            <p><img src="https://phppot.com/php/php-login-form/./view/images/photo.jpeg" class="profile-photo" /></p>
            <p>You have successfully logged in!</p>
            <p>Click to <a href="./logout.php" class="logout-button">Logout</a></p>
            </div>
        </div>
    </div>
</body>
</html>

PHP Masuk di Dasbor Pengguna

Keluar dari situs

Ini adalah rutinitas umum untuk keluar dari situs. Skrip berikut menghapus sesi PHP. Kemudian diarahkan kembali ke halaman login di PHP.

Terkadang, kasus logout dapat menghapus cookie. Contoh: Dalam hal menggunakan fitur Remember Me berbasis cookie saat login.

lihat/dasbor.php

<?php 
session_start();
$_SESSION["user_id"] = "";
session_destroy();
header("Location: index.php");

Struktur file

Lihat gambar di bawah ini yang menunjukkan struktur file contoh form login PHP sederhana ini. Ini berisi UI formulir login unggulan dengan aplikasi melihat file.

Itu tindakan masuk memanggil model PHP pada acara kirim. Ini melakukan otentikasi backend dengan database.

file formulir login php

Skrip basis data

Lihat skrip SQL ini yang berisi pernyataan CREATE dan contoh data baris.

Dengan mengimpor SQL ini, ini menciptakan persyaratan database di lingkungan pengembangan Anda.

Data sampel membantu untuk mencoba login yang mengembalikan respons sukses pada otentikasi.

Data pengujian: username: kate_91 password: admin123

sql/database.sql

--
-- Database: `blog_eg`
--

-- --------------------------------------------------------

--
-- Table structure for table `registered_users`
--

CREATE TABLE `registered_users` (
  `id` int(8) NOT NULL,
  `user_name` varchar(255) NOT NULL,
  `display_name` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `photo` text DEFAULT NULL,
  `about` text DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `registered_users`
--

INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`, `photo`, `about`) VALUES
(1, 'kate_91', 'Kate Winslet', '$2y$10$LVISX0lCiIsQU1vUX/dAGunHTRhXmpcpiuU7G7.1lbnvhPSg7exmW', 'kate@wince.com', 'images/photo.jpeg', 'Web developer');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `registered_users`
--
ALTER TABLE `registered_users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `registered_users`
--
ALTER TABLE `registered_users`
  MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;


Amankan DataSource menggunakan MySQL dengan pernyataan yang disiapkan

DataSource ini adalah file umum untuk digunakan dalam aplikasi PHP yang berdiri sendiri. Ini menggunakan MySQLi dengan pernyataan yang disiapkan untuk mengeksekusi kueri basis data. Ini bekerja dengan PHP 8 dan 7+

class/DataSource.php

Kelas ini tersedia dalam file zip unduhan proyek di bawah ini. Ini adalah pembungkus umum untuk MySQL menggunakan PreparedStatement.

Kesimpulan

Kita telah melihat contoh sederhana pada form login PHP. Semoga ini bermanfaat untuk memiliki formulir login yang responsif dan unggulan.

Artikel tersebut menghubungkan konstelasi formulir login. Akan sangat membantu untuk mengintegrasikan lebih banyak fitur dengan template login yang ada.

Beri tahu saya tanggapan Anda di bagian komentar jika Anda memerlukan perbaikan pada sistem login PHP ini.

Unduh

Kembali ke Atas

[ad_2]
Source link