Garis besar topik
-
Bahasas Pemrograman
Compiler
Interpreter
Web Server (Apache)
Web Browser
-
Siswa harusTandai selesai
-
-
-
User Interface (html, css)
Dinamis Programming (php)
-
-
HTML FORM
PHP:
Operator Floting Point
Seleksi
Perulangan
Method GET dan POST
-
-
include, requered
fungsi
javascrip
notice
-
-
-
-
-
-
-
-
-
-
Skrip Login PHP dengan Sesi
Dalam tutorial ini, mari kita buat skrip login dengan sesi di PHP. Skrip ini berisi contoh sederhana penerapan autentikasi pengguna. Contoh ini menggunakan formulir login standar untuk mendapatkan detail login pengguna. Dan skrip ini mempertahankan status login dengan sesi PHP.
Masuk adalah langkah pertama di banyak aplikasi. Terkadang, sebagian fungsi istimewa aplikasi akan meminta pengguna untuk masuk.
Jadi, skrip login merupakan bagian integral dari sebuah aplikasi. Saya akan menunjukkan implementasi sistem login dengan kode minimal.
Autentikasi akan membantu kami mengidentifikasi pengguna asli. Dengan mengaktifkan autentikasi, kami dapat melindungi situs web kami dari akses anonim.
Apa isinya?
- Cara membuat sistem otentikasi
- Tentang contoh ini
- Struktur berkas
- Antarmuka login pengguna
- Kode PHP untuk memproses login
- Dapatkan data profil pengguna yang masuk untuk menampilkan pesan selamat datang
- Menangani kode logout di PHP
- Skrip basis data
- Detail login uji coba
- Skrip login PHP dengan keluaran sesi
Cara membuat sistem otentikasi
Ada berbagai cara untuk menerapkan sistem autentikasi. Cara yang paling populer adalah dengan mendapatkan nama pengguna dan kata sandi melalui formulir login dan melakukan autentikasi berdasarkan informasi tersebut.
Belakangan ini, autentikasi menggunakan OTP juga menjadi hal yang umum. OTP bersifat dinamis dan hanya dapat digunakan sekali.
Untuk autentikasi OTP, aplikasi mengirimkannya melalui SMS atau email. Di artikel sebelumnya, kita telah melihat contoh kode dalam PHP untuk masuk dengan mengirimkan OTP melalui email .
Tentang contoh ini
Contoh ini memiliki basis data pengguna berisi nama, email, kata sandi, dan detail lainnya. Terdapat juga formulir HTML dengan input untuk mendapatkan kredensial login pengguna.
Kode PHP akan menerima data yang diposting ketika pengguna mengirimkan detail login mereka. Kode ini akan membandingkan data yang dimasukkan dengan data yang tersimpan di basis data pengguna.
Jika kecocokan ditemukan, maka sesi login pengguna akan diatur. Kode autentikasi ini menyimpan ID pengguna dalam sesi PHP. Keberadaan sesi ini akan menentukan status autentikasi pengguna.
Setelah autentikasi, variabel super global PHP $_SESSION akan berisi ID pengguna. $_SESSION[ΓÇ£member_idΓÇ¥] diatur untuk mengelola sesi yang sedang login. Variabel ini akan tetap ada hingga pengguna keluar atau menutup peramban.
Selama logout, kami membatalkan semua variabel sesi menggunakan fungsi PHP unset() .
Struktur berkas
Tangkapan layar di bawah ini menunjukkan struktur berkas terorganisir dari contoh login pengguna ini. Member.php adalah kelas model dengan fungsi autentikasi.
File DataSource.php berisi fungsi untuk mendapatkan koneksi dan mengakses database.
Di direktori tampilan , saya telah membuat semua berkas terkait UI untuk antarmuka login dan dasbor. Direktori ini juga berisi lembar gaya yang digunakan untuk UI ini.
index.php adalah halaman arahan yang memeriksa sesi login pengguna. Kemudian, halaman ini mengarahkan pengguna untuk login atau ke dasbor .
File login -action.php dan logout.php adalah titik akhir PHP. File-file ini menangani tindakan yang diminta oleh pengguna melalui Antarmuka autentikasi interaktif.
Antarmuka login pengguna
Membuat formulir HTML untuk masuk adalah langkah pertama. Langkah ini bertujuan untuk mendapatkan detail login dari pengguna.
Contoh ini 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. Selain itu, terdapat kode untuk menampilkan respons kesalahan sisi server berdasarkan hasil login.
<html> <head> <title>User Login</title> <meta name="viewport" content="width=device-width , initial-scale=1"> <link rel="stylesheet" type="text/css" href="./view/css/form.css" /> <link rel="stylesheet" type="text/css" href="./view/css/style.css" /> </head> <body> <div class="phppot-container tile-container text-center"> <?php if (isset($_SESSION["errorMessage"])) { ?> <div class="validation-message"><?php echo $_SESSION["errorMessage"]; ?></div> <?php unset($_SESSION["errorMessage"]); } ?> <form action="login-action.php" method="post" id="frmLogin" onSubmit="return validate();"> <h2>Enter Login Details</h2> <div class="row"> <label class="text-left" for="username">Username <span id="user_info" class="validation-message"></span></label> <input name="user_name" id="user_name" type="text" class="full-width"> </div> <div class="row"> <label class="text-left" for="password">Password <span id="password_info" class="validation-message"></span></label> <input name="password" id="password" type="password" class="full-width"> </div> <div class="row"> <input type="submit" name="login" value="Login" class="full-width"></span> </div> </form> </div> </body> </html>Validasi formulir login
Skrip ini untuk memvalidasi data login di sisi klien. Jika pengguna mengirimkan login dengan kolom kosong, skrip ini akan mengembalikan nilai boolean yang salah.
Ketika mengembalikan nilai false, skrip akan menampilkan pesan kesalahan validasi kepada pengguna. Dengan mengembalikan nilai boolean 0, skrip validasi formulir mencegah proses login lebih lanjut.
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; }Kode PHP untuk memproses login
Berkas login-action.php menerima dan menangani data login yang diposting. Berkas ini mengirimkan nama pengguna dan kata sandi ke fungsi processLogin().
Metode ini mendapatkan rincian login dan membandingkannya dengan basis data pengguna.
Fungsi ini menyiapkan kueri dan mengikat parameter login dengannya untuk menemukan kecocokan dari basis data. Fungsi processLogin() akan mengembalikan hasil jika kecocokan login ditemukan.
Setelah berhasil masuk, login-action.php akan mengatur sesi pengguna yang sedang masuk. Jika tidak, akan muncul pesan kesalahan "Kredensial Tidak Valid".
<?php namespace Phppot; require_once __DIR__ . "/class/Member.php"; use Phppot\Member; if (! empty($_POST["login"])) { session_start(); $member = new Member(); $isLoggedIn = $member->loginMember(); if (! $isLoggedIn) { $_SESSION["errorMessage"] = "Invalid Credentials"; } header("Location: ./index.php"); exit(); } ?>Dapatkan data profil pengguna yang masuk untuk menampilkan pesan selamat datang
Kode ini untuk menampilkan dasbor setelah masuk. Kode PHP yang disematkan dengan HTML ini berfungsi untuk mengambil sesi pengguna dan data pengguna dari basis data.
Menampilkan pesan selamat datang dengan menyapa pengguna dengan nama tampilan mereka.
Dasbor berisi tautan keluar selain teks selamat datang.
<?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 class="phppot-container text-center"> Welcome <b><?php echo $displayName; ?></b>, You have successfully logged in!<br> Click to <a href="./logout.php">Logout.</a> </div> </body> </html>Anggota.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 __DIR__ . "/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; } function processLogin($username) { $query = "SELECT * FROM registered_users WHERE user_name = ?"; $paramType = "s"; $paramArray = array( $username ); $memberResult = $this->ds->select($query, $paramType, $paramArray); return $memberResult; } function loginMember() { $memberResult = $this->processLogin($_POST["user_name"]); $loginPassword = 0; if (! empty($memberResult)) { $password = $_POST["password"]; $hashedPassword = $memberResult[0]["password"]; if (password_verify($password, $hashedPassword)) { $loginPassword = 1; } if ($loginPassword == 1) { $_SESSION["userId"] = $memberResult[0]["id"]; return $memberResult; } } } } ?>Mengarahkan pengguna untuk masuk atau Dasbor berdasarkan Sesi
Halaman arahan index.php berisi kode untuk memeriksa sesi yang masuk dan mengarahkan pengguna sesuai dengan itu. Kode berikut menunjukkan cara mengarahkan pengguna berdasarkan sesi tersebut.
<?php session_start(); if(!empty($_SESSION["userId"])) { require_once __DIR__ . '/view/dashboard.php'; } else { require_once __DIR__ . '/view/login-form.php'; } ?>Menangani logout di PHP
Mengklik tautan keluar dari dasbor akan memanggil skrip PHP ini. Skrip ini akan menghapus sesi masuk saat ini dan mengarahkan pengguna ke halaman masuk. Kode keluarnya adalah:
<?php session_start(); $_SESSION["user_id"] = ""; session_destroy(); header("Location: index.php"); ?>Sumber Data.php
Kelas ini membuat objek koneksi untuk mengakses basis data berdasarkan permintaan. Kelas ini memiliki fungsi select untuk menyiapkan kueri pengambilan dan mengembalikan hasilnya. Kelas ini tersedia dalam file zip unduhan proyek yang ditautkan di akhir tutorial ini.
Skrip basis data
Skrip ini berisi pernyataan CREATE untuk tabel registered_users . Selain itu, skrip ini juga memiliki dump data untuk memeriksa contoh dengan detail login pengujian.
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 COLLATE=latin1_swedish_ci; INSERT INTO `registered_users` (`id`, `user_name`, `display_name`, `password`, `email`) VALUES (1, 'admin', 'Kate Winslet', '$2a$10$0FHEQ5/cplO3eEKillHvh.y009Wsf4WCKvQHsZntLamTUToIBe.fG', 'kate@wince.com'); ALTER TABLE `registered_users` ADD PRIMARY KEY (`id`); ALTER TABLE `registered_users` MODIFY `id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;Detail login uji coba
Setelah menetapkan contoh kode dan basis data ini di komputer Anda, gunakan data uji berikut untuk memeriksa sistem login contoh.
Username: kate_91Password: kate@03Skrip login PHP dengan keluaran sesi
Tangkapan layar keluaran ini menunjukkan antarmuka formulir masuk. Formulir ini memiliki kolom input untuk mendapatkan detail login pengguna.
Ini adalah tangkapan layar pesan selamat datang. Setelah masuk, pengguna akan melihat respons ini di peramban.
Tampilan ini akan menampilkan pesan selamat datang kepada pengguna yang telah masuk. Tampilan ini juga memiliki tautan untuk keluar, seperti yang ditunjukkan di bawah ini.
-
-
-
Aplikasi dashboard adalah sebuah aplikasi khusus yang dilengkapi dengan tampilan visual yang bisa menyuguhkan data secara keseluruhan dan terpusat. Umumnya, data yang ditampilkan berbentuk visual, seperti tabel, angka, grafik, pie chart, bar chart, dan sebagainya.
-
-
Chart.js is an free JavaScript library for making HTML-based charts. It is one of the simplest visualization libraries for JavaScript, and comes with the many built-in chart types:
- Scatter Plot
- Line Chart
- Bar Chart
- Pie Chart
- Donut Chart
- Bubble Chart
- Area Chart
- Radar Chart
- Mixed Chart
-
Siswa harusTandai selesai
-
-
-
-
Presentasi Kelompok (Cleaner Shoes)
-
Apa Itu Pagination
Jadi, apa itu pagination? Secara sederhana, pagination adalah teknik untuk mengatur konten di website dengan membaginya menjadi beberapa halaman berurutan, biasanya ditandai dengan nomor seperti 1, 2, 3, atau tombol ΓÇ£NextΓÇ¥ dan ΓÇ£PreviousΓÇ¥. Biasanya, nomor ini muncul di atas atau bawah halaman situs. Tujuannya? Agar pengunjung mudah bernavigasi dan situs tidak menampilkan semua data di satu tempat.
Contoh sederhananya, bayangkan situs e-commerce dengan ribuan produk. Jika semua produk ditampilkan di satu halaman, loadingnya akan lama, dan pengunjung malas scroll sampai bawah. Dengan pagination, produk dibagi per halaman, misalnya 10 atau 20 item per halaman. Hasilnya? Situs menjadi lebih ringkas, cepat, dan pengalaman pengguna (UX) meningkat. Keren, kan?
Cara Kerja Pagination di Web Development
Sekarang, mari bahas cara kerjanya. Apa itu Pagination? Ini tuh ibarat asisten setia developer dan desainer UI. Dalam praktiknya, developer akan menentukan berapa banyak konten yang muncul per halaman, lalu membuat sistem otomatis untuk menampilkan halaman berikutnya. Misalnya, menggunakan framework seperti CodeIgniterΓÇöyang memang ahli dalam web developmentΓÇöpagination bisa diatur menggunakan library bawaan agar lebih mudah.
Di sisi teknis, situs akan mengambil data dari database, lalu membaginya berdasarkan batas yang ditentukan. Misalnya, halaman 1 menampilkan item 1-10, halaman 2 item 11-20, dan seterusnya. Pengunjung tinggal klik nomor halaman atau tombol navigasi untuk melihat data selanjutnya. Sederhana, tapi dampaknya besar bagi performa situs.
Pengaruh Pagination terhadap SEO
Nah, sekarang kita masuk ke bagian yang agak serius: pengaruh pagination terhadap SEO. Apa itu pagination dari sisi search engine? Ternyata, ada dua sisi mata uang di sini. Yuk, kita breakdown!
Konten yang Tidak Tercrawl
Pagination bisa membuat search engine bingung jika datanya terlalu banyak. Bot seperti Google memiliki ΓÇ£anggaran crawlingΓÇ¥ yang terbatas. Jika situsmu memiliki ratusan halaman, bisa jadi sebagian konten tidak tercrawl atau terindeks. Solusinya? Letakkan konten paling penting di halaman awal agar Google memprioritaskannya.Thin Content dan Duplikat
Pernah dengar thin content? Itu adalah konten yang isinya sangat minim, kurang berbobot. Pagination kadang membuat halaman hanya memiliki sedikit isi, sehingga terlihat ΓÇ£kosongΓÇ¥ oleh Google. Belum lagi risiko duplikat jika setiap halaman memiliki meta tag atau judul yang mirip. Oleh karena itu, konten harus dioptimasi agar tetap relevan dan unik.Sinyal Ranking Terpecah
Jika situsmu mendapatkan backlink berkualitas, tetapi menggunakan pagination, otoritas link itu akan terbagi ke semua halaman. Akibatnya? Sinyal ranking menjadi lambat naik. Solusi sederhananya, pastikan backlink mengarah ke halaman utama atau konten kunci agar efeknya maksimal.
Meski ada tantangan, pagination tetap menjadi solusi cerdas. Jika perusahaan sedang mencari desain UI yang paling efektif untuk website, salah satu solusi terbaiknya adalah paginationΓÇökhususnya untuk situs dengan data yang besar.
Kelebihan Pagination: Kenapa Harus Dicoba?
Pagination tidak hanya tentang nomor halaman saja, bro. Ada banyak manfaatnya, terutama untuk situs yang ingin memberikan pengalaman terbaik kepada pengunjung. Apa saja? Simak ini:
- Navigasi Lebih Mudah: Pengunjung tidak bingung mencari konten, cukup klik halaman yang diinginkan.
- Situs Lebih Rapi: Data terstruktur, tidak menumpuk di satu tempat.
- Loading Lebih Cepat: Halaman pendek membuat waktu muat lebih singkatΓÇöSEO menyukai ini!
- Engagement Meningkat: Pengunjung betah menjelajahi situs, penjualan pun bisa melonjak.
Hal ini berlaku karena pagination dianggap sebagai desain yang paling cocok untuk menyebarkan data dalam jumlah besar. Makanya, situs perusahaan juga bisa menggunakannya untuk proses navigasi yang lebih mudah, UX yang lebih sederhana, buyer persona yang lebih baik, dan sebagainya.
Contoh Nyata Pagination di Situs Besar
Buktinya? Banyak situs besar yang menggunakan pagination dan sukses. Berikut beberapa contohnya:
- Shopify: Platform e-commerce ini menggunakan pagination untuk menampilkan produk.
- Amazon: Raksasa e-commerce dengan katalog yang rapi berkat pagination.
- Dribbble: Komunitas desainer ini membuat portofolio mudah dilihat.
- Google: Ya, mesin pencari nomor satu ini juga menggunakan pagination untuk hasil pencarian!
Bahkan, karena dianggap efektif, kebanyakan situs e-commerce dan Google sendiri memanfaatkan desain pagination. Jadi, jika situs sekelas mereka saja menggunakannya, masa kamu tidak mau mencoba?
Pagination memang keren, tapi tidak semua situs cocok menggunakannya. Agar maksimal, cek dulu kebutuhan situsmu. Jika kontennya sedikit, lebih baik gunakan infinite scroll. Namun, jika datanya banyak, pagination adalah jawabannya. Pastikan juga optimasi SEO-nya berjalan, seperti membuat meta tag unik per halaman dan memprioritaskan konten di halaman pertama.
Kesimpulan
Jadi, apa itu pagination? Intinya, ini adalah teknik penomoran halaman yang membuat situsmu lebih teratur, cepat, dan mudah dinavigasi. Meski ada efek samping terhadap SEO, kelebihannya jauh lebih banyakΓÇödari UX yang baik hingga peningkatan penjualan. Cocok banget untuk situs e-commerce, blog, atau apa pun yang memiliki data dalam jumlah besar.
-
-
-
-