Cara Membuat Halaman Login Dengan Script PHP Sesi

TauScript - Dalam tutorial ini, mari kita buat skrip login dengan sesi dalam PHP. Ini memiliki contoh sederhana menerapkan otentikasi pengguna. Contoh ini menggunakan formulir login standar untuk mendapatkan detail login pengguna. Dan mempertahankan status login dengan sesi PHP.

Masuk akan menjadi langkah pertama dari banyak aplikasi. Terkadang, bagian dari fungsi aplikasi yang istimewa akan meminta pengguna untuk masuk.

Jadi, skrip login merupakan bagian integral dari suatu aplikasi. Saya akan menunjukkan implementasi sistem login dengan kode minimal.

Otentikasi akan membantu kami mengidentifikasi pengguna asli. Dengan mengaktifkan otentikasi, kami dapat melindungi situs web kami dari akses anonim.

Ada berbagai cara menerapkan sistem otentikasi. Cara yang paling populer adalah mendapatkan nama pengguna dan kata sandi melalui formulir masuk dan mengotentikasi berdasarkan mereka.

Baru-baru ini, otentikasi menggunakan OTP juga menjadi norma. OTP akan dinamis dan diizinkan untuk satu kali.

Untuk otentikasi OTP, aplikasi mengirimkannya melalui layu melalui SMS atau email. Dalam artikel sebelumnya, kami telah melihat contoh kode dalam PHP untuk masuk dengan mengirim OTP melalui email .

Tentang contoh ini

Dalam contoh ini, ia memiliki basis data pengguna dengan nama, email, kata sandi, dan detail lainnya. Ini memiliki bentuk HTML dengan input untuk mendapatkan kredensial login pengguna.

Ketika pengguna mengirimkan detail login mereka, maka kode PHP akan menerima data yang diposting. Ini membandingkan data yang dimasukkan dengan basis data pengguna.

Jika kecocokan ditemukan, maka mengatur sesi login pengguna. Dalam kode otentikasi ini, ia mempertahankan id pengguna dalam sesi PHP. Keberadaan sesi ini akan menyatakan status otentikasi pengguna.

Setelah otentikasi, variabel super global PHP $ _SESSION akan berisi id pengguna. Yaitu, $ _SESSION [“member_id”] diset untuk mengelola sesi login. Itu akan tetap sampai keluar atau keluar dari browser.

Saat keluar, kami menghapus semua variabel sesi menggunakan fungsi PHP tidak disetel () .

Struktur file

Tangkapan layar di bawah ini menunjukkan struktur file yang terorganisir dari contoh login pengguna ini. Member.php adalah kelas model dengan fungsionalitas otentikasi.

File DataSource.php berisi fungsi untuk mendapatkan koneksi dan mengakses database.

Dalam direktori tampilan , saya telah membuat semua file terkait UI untuk login dan antarmuka dasbor. Ini juga berisi stylesheet yang digunakan untuk UI ini.

Index.php adalah halaman arahan yang memeriksa sesi login pengguna. Lalu itu mengarahkan pengguna baik untuk masuk atau ke dasbor.

File login-action.php dan logout.php adalah titik akhir PHP. Mereka menangani tindakan seperti yang diminta oleh pengguna melalui Antarmuka otentikasi interaktif.

Antarmuka login pengguna

Membuat formulir HTML untuk masuk adalah langkah pertama. Ini untuk mendapatkan detail login dari pengguna.

Dalam contoh ini, ia memiliki dua bidang nama pengguna dan kata sandi untuk login pengguna.

Saya telah menentukan fungsi validasi dan titik akhir PHP dengan tag formulir.

HTML berisi elemen untuk menampilkan kesalahan validasi sisi klien. Juga, ia memiliki kode untuk menunjukkan respons kesalahan sisi-server berdasarkan hasil login.

<html>
<head>
<title>User Login</title>
<link href="./view/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<form action="login-action.php" method="post" id="frmLogin" onSubmit="return validate();">
<div class="demo-table">

<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">
</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">
</div>
</div>
<div class=field-column>
<div>
<input type="submit" name="login" value="Login"
class="btnLogin"></span>
</div>
</div>
</div>
</form>
</div>
</body>
</html>

Dan styles nya adalah,

body {
font-family: Arial;
color: #333;
font-size: 0.95em;
}

.form-head {
color: #191919;
font-weight: normal;
font-weight: 400;
margin: 0;
text-align: center;
font-size: 1.8em;
}

.error-message {
padding: 7px 10px;
background: #fff1f2;
border: #ffd5da 1px solid;
color: #d6001c;
border-radius: 4px;
margin: 30px 10px 10px 10px;
}

.demo-table {
background: #ffffff;
border-spacing: initial;
margin: 15px auto;
word-break: break-word;
table-layout: auto;
line-height: 1.8em;
color: #333;
border-radius: 4px;
padding: 30px;
width: 380px;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}

.demo-table .label {
color: #888888;
}

.demo-table .field-column {
padding: 15px 10px;
}

.demo-input-box {
padding: 13px;
border: #CCC 1px solid;
border-radius: 4px;
width: 100%;
}

.btnLogin {
padding: 13px;
background-color: #5d9cec;
color: #f5f7fa;
cursor: pointer;
border-radius: 4px;
width: 100%;
border: #5791da 1px solid;
font-size: 1.1em;
}

.response-text {
max-width: 380px;
font-size: 1.5em;
text-align: center;
background: #fff3de;
padding: 42px;
border-radius: 3px;
border: #f5e9d4 1px solid;
font-family: arial;
line-height: 34px;
margin: 15px auto;
}

.terms {
margin-bottom: 5px;
}

.dashboard {
background: #d2edd5;
text-align: center;
margin: 15px auto;
line-height: 1.8em;
color: #333;
border-radius: 4px;
padding: 30px;
max-width: 400px;
border: #c8e0cb 1px solid;
}
.error-info {
color: #FF0000;
margin-left: 10px;
}
a.logout-button {
color: #09f;
}

Validasi formulir masuk

Skrip ini untuk memvalidasi data login di sisi klien. Jika pengguna mengirimkan login dengan bidang kosong maka skrip ini akan mengembalikan boolean false.

Ketika kembali salah, ini menampilkan pesan kesalahan validasi kepada pengguna. Dengan mengembalikan boolean 0, skrip validasi formulir mencegah login untuk melanjutkan lebih jauh.

Kode PHP untuk memproses login

File login-action.php menerima dan menangani data login yang diposkan. Ia mengirim nama pengguna dan kata sandi ke fungsi processLogin ().

Metode ini mendapatkan detail login dan membandingkannya dengan basis data pengguna.

Itu menyiapkan permintaan dan mengikat params login dengan itu untuk menemukan kecocokan dari database. Jika ditemukan kecocokan, prosesLogin akan mengembalikan hasilnya.

Saat login berhasil, login-action.php menetapkan sesi pengguna login. Jika tidak, itu akan mengembalikan kesalahan dengan mengatakan "Kredensial Tidak Valid".

<?php
namespace Phppot;

use \Phppot\Member;
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();
}

Dapatkan data profil pengguna yang masuk untuk menampilkan pesan sambutan

Kode ini untuk menampilkan dasbor setelah masuk. Kode PHP yang disematkan dengan HTML ini adalah untuk mendapatkan sesi pengguna dan data pengguna dari database.

Ini menampilkan pesan selamat datang dengan menyapa pengguna dengan nama tampilan mereka.

Dasbor berisi tautan logout selain teks sambutan.

<?php
namespace Phppot;

use \Phppot\Member;

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>
<link href="./view/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<div class="dashboard">
<div class="member-dashboard">Welcome <b><?php echo $displayName; ?></b>, You have successfully logged in!<br>
Click to <a href="./logout.php" class="logout-button">Logout</a>
</div>
</div>
</div>
</body>
</html>

Member.php

Ini adalah kelas PHP yang dibuat dalam contoh ini untuk menangani proses login. Metode getMemberById meminta DataSource untuk mengambil hasil anggota.

<?php
namespace Phppot;

use \Phppot\DataSource;

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) {
$passwordHash = md5($password);
$query = "select * FROM registered_users WHERE user_name = ? AND password = ?";
$paramType = "ss";
$paramArray = array($username, $passwordHash);
$memberResult = $this->ds->select($query, $paramType, $paramArray);
if(!empty($memberResult)) {
$_SESSION["userId"] = $memberResult[0]["id"];
return true;
}
}
}

Arahkan pengguna ke Login atau Dasbor berdasarkan Sesi

Index.php halaman arahan berisi kode untuk memeriksa sesi masuk dan rute pengguna yang sesuai. Kode berikut menunjukkan cara mengarahkan pengguna berdasarkan sesi.

<?php
session_start();
if(!empty($_SESSION["userId"])) {
require_once './view/dashboard.php';
} else {
require_once './view/login-form.php';
}
?>

Menangani logout dalam PHP

Dengan mengklik tautan logout dari dasbor, ia memanggil skrip PHP ini. Dalam skrip ini, menghapus sesi login saat ini dan mengarahkan kembali pengguna ke login. Kode logout adalah,

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

DataSource.php

Kelas ini membuat objek koneksi untuk mengakses database berdasarkan permintaan. Ini memiliki fungsi pilih untuk menyiapkan kueri pengambilan untuk mengembalikan hasilnya.

<?php
namespace Phppot;

/**
* Generic datasource class for handling DB operations.
* Uses MySqli and PreparedStatements.
*
* @version 2.3
*/
class DataSource
{

// PHP 7.1.0 visibility modifiers are allowed for class constants.
// when using above 7.1.0, declare the below constants as private
const HOST = 'localhost';

const USERNAME = 'root';

const PASSWORD = '';

const DATABASENAME = 'phpsamples';

private $conn;

/**
* PHP implicitly takes care of cleanup for default connection types.
* So no need to worry about closing the connection.
*
* Singletons not required in PHP as there is no
* concept of shared memory.
* Every object lives only for a request.
*
* Keeping things simple and that works!
*/
function __construct()
{
$this->conn = $this->getConnection();
}

/**
* If connection object is needed use this method and get access to it.
* Otherwise, use the below methods for insert / update / etc.
*
* @return \mysqli
*/
public function getConnection()
{
$conn = new \mysqli(self::HOST, self::USERNAME, self::PASSWORD, self::DATABASENAME);

if (mysqli_connect_errno()) {
trigger_error("Problem with connecting to database.");
}

$conn->set_charset("utf8");
return $conn;
}

/**
* To get database results
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return array
*/
public function select($query, $paramType="", $paramArray=array())
{
$stmt = $this->conn->prepare($query);

if(!empty($paramType) && !empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType, $paramArray);
}

$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$resultset[] = $row;
}
}

if (! empty($resultset)) {
return $resultset;
}
}

/**
* To insert
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return int
*/
public function insert($query, $paramType, $paramArray)
{
print $query;
$stmt = $this->conn->prepare($query);
$this->bindQueryParams($stmt, $paramType, $paramArray);
$stmt->execute();
$insertId = $stmt->insert_id;
return $insertId;
}

/**
* To execute query
* @param string $query
* @param string $paramType
* @param array $paramArray
*/
public function execute($query, $paramType="", $paramArray=array())
{
$stmt = $this->conn->prepare($query);

if(!empty($paramType) && !empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType="", $paramArray=array());
}
$stmt->execute();
}

/**
* 1. Prepares parameter binding
* 2. Bind prameters to the sql statement
* @param string $stmt
* @param string $paramType
* @param array $paramArray
*/
public function bindQueryParams($stmt, $paramType, $paramArray=array())
{
$paramValueReference[] = & $paramType;
for ($i = 0; $i < count($paramArray); $i ++) {
$paramValueReference[] = & $paramArray[$i];
}
call_user_func_array(array(
$stmt,
'bind_param'
), $paramValueReference);
}

/**
* To get database results
* @param string $query
* @param string $paramType
* @param array $paramArray
* @return array
*/
public function numRows($query, $paramType="", $paramArray=array())
{
$stmt = $this->conn->prepare($query);

if(!empty($paramType) && !empty($paramArray)) {
$this->bindQueryParams($stmt, $paramType, $paramArray);
}

$stmt->execute();
$stmt->store_result();
$recordCount = $stmt->num_rows;
return $recordCount;
}
}

Skrip basis data

Script ini berisi pernyataan CREATE untuk tabel Regist_users. Juga, ia memiliki dump data untuk memeriksa contoh dengan rincian login uji.

--
-- 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
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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

INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`) VALUES
(1, 'kate_91', 'Kate Winslet', 'ad5611358209efdc202d35127a160748', 'kate@wince.com');

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

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

Uji detail login

Setelah mengatur kode contoh ini dan basis data di komputer Anda, gunakan data tes berikut untuk memeriksa contoh sistem login.

Username: kate_91
Password: kate@03

Script login PHP dengan output sesi

Tangkapan layar keluaran ini menunjukkan antarmuka formulir masuk. Ini memiliki bidang input untuk mendapatkan detail login pengguna.

Ini adalah tangkapan layar dari pesan selamat datang. Setelah masuk, maka pengguna akan melihat respons ini di browser.

Tampilan ini akan menampilkan pesan sambutan dengan menyapa pengguna yang masuk. Ini juga memiliki tautan untuk keluar seperti yang ditunjukkan di bawah ini.

Tau Script

Breaking

Saturday, June 13, 2020

Cara Membuat Halaman Login Dengan Script PHP Sesi

No comments:

Post a Comment

Cari Artikel

Recent

Comments

Script PHP

Recent Post

Script Java

Popular