Sebuah variabel session PHP digunakan untuk menyimpan informasi, atau mengubah pengaturan untuk sesi pengguna. Variabel sesi menyimpan informasi tentang satu pengguna tunggal, dan tersedia untuk semua halaman dalam satu aplikasi.
Ketika Anda bekerja dengan sebuah aplikasi, Anda membukanya, melakukan beberapa perubahan dan kemudian Anda menutupnya. Hal ini sama seperti Session. Komputer tahu siapa Anda. Ia tahu ketika Anda memulai aplikasi dan ketika Anda mengakhiri. Tapi di internet ada satu masalah: server web tidak tahu siapa Anda dan apa yang Anda lakukan karena alamat HTTP tidak terdefinisi.
Sebuah sesi PHP memecahkan masalah ini dengan memungkinkan Anda untuk menyimpan informasi pengguna pada server untuk kemudian digunakan (yaitu nama, item belanja, dll). Namun, informasi sesi bersifat sementara dan akan dihapus setelah pengguna telah meninggalkan situs web. Jika Anda membutuhkan penyimpanan permanen Anda mungkin ingin menyimpan data dalam database.
Sesi bekerja dengan menciptakan sebuah id unik (UID) untuk setiap pengunjung dan menyimpan variabel berdasarkan UID ini. UID adalah baik disimpan dalam cookie atau disebarkan dalam URL.
Sebelum Anda dapat menyimpan informasi pengguna dalam sesi PHP Anda, Anda harus terlebih dahulu memulai session.
Catatan: fungsi session_start () harus muncul SEBELUM tag <html>:
<?php session_start(); ?> <html> <body> </body> </html>
Kode di atas akan mendaftarkan sesi pengguna dengan server, memungkinkan Anda untuk mulai menyimpan informasi pengguna, dan menetapkan UID untuk sesi pengguna tersebut.
Sepertinya cukup untuk berbicara teori apa itu session dalam php.
Baiklah untuk lebih memahami session dimana untuk pemahaman secara teori anda dapat mencari referensi dimanapun tentang session dalam php, untuk itu mari kita akan mencoba mempelajari session dengan form login. Dalam aplikasi login ini terdiri dari beberapa file-file penunjang, yaitu: css, font [fontawesome-webfont], jquery, dan modernizr, juga beberapa gambar/image.
Struktur lengkap dari form login ini adalah sebagai berikut:
| css [direktori]
demo.css
font-awesome.css
style.css
| font [direktori]
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
| images [direktori]
bg.jpg
noise.png
loading.gif
| js [direktori]
custom.js
jquery.placeholder.min.js
modernizr.custom.63321.js
| admin.html [file html]
| form_submit.php [file php]
| halaman_utama.php [file php]
Mari kita bahas:
Anda perlu bentuk formulir input untuk banyak kesempatan di mana interaksi antara pengguna dan aplikasi Anda atau situs web yang diperlukan: login, komentar, kontak, umpan balik, dan banyak lagi. Jika sebuah formulir berantakan, maka anda mengacaukan pengguna Anda.
Dengan itu dalam pikiran, ada beberapa hal yang dapat Anda lakukan untuk membuat bentuk-bentuk yang lebih baik, lebih user-friendly. Mari kita membuat babak kecil bersama-sama.
- Label: Label adalah penting. Saya tidak berbicara tentang tag label, saya berbicara tentang indikasi tentang titik sebuah field isian. Mari kita membuat hal-hal yang jelas: semua field isian yang sama. Hal ini jika memiliki label maka pengguna tahu apa yang harus ditulis atau di mana kolom isian nya. Gunakan label, atau ikon, atau apa saja yang diperlukan untuk membuat pengguna memahami apa yang ia lakukan.
- Fields :: Koloom inputan yang lebih menarik, akan lebih menyenangkan untuk dilihat, pengguna akan menjadi senang. Membuat ruang di sekitar dan di input Anda. Jangan membuat lapangan mengganjal isinya. Input harus cukup besar untuk menampilkan seluruh isian. Jangan membuat kolom isian kecil kecil memaksa para penggunanya untuk menjelajahi di dalamnya dengan tombol panah.
- Labels + bidang: Membuat hubungan antara input dan label . Gunakan untuk atribut pada label. Mengklik pada textarea dengan mudah, bahkan pada perangkat mobile. Mengklik pada checkbox namun bisa rumit, terutama ketika ke menu ponsel. Membuat label dapat diklik akan mempermudah pengguna. Menggunakannya. Membuat input yang cukup besar untuk tampilan mobile, di mana label mungkin tidak dapat diklik.
- States: CSS memungkinkan penargetan elemen sesuai dengan kondisi saat ini: melayang, fokus, aktif, default, dll Sangat penting untuk menunjukkan pengguna dia melayang sesuatu dapat diklik, atau memfokuskan sesuatu yang dapat mengisi.
- Tombol Kirim: The tombol submit adalah langkah terakhir bagi pengguna untuk mengisi formulir dan berinteraksi dengan aplikasi Anda. Ini harus terlihat. Ingat "panggilan untuk bertindak". Jangan menggunakan gaya default untuk tombol kirim, membuat sesuatu yang cantik! Dan jangan pernah menggunakan "Submit". Ini tidak jelas. Jika itu adalah form login, gunakan "Masuk" atau "Login". Jika itu adalah bentuk komentar, menggunakan sesuatu seperti "kirimkan komentar". Memberitahu pengguna tindakan apa yang akan dilakukan.
- HTML5 input dan atribut: HTML5 menyediakan banyak atribut baru dan masukan yang berguna untuk membuat bentuk-bentuk yang lebih baik dan lebih mudah untuk mengisi. Gunakan atribut-atribut dan input bila diperlukan, dengan fallbacks tentu saja. Lebih lanjut tentang Wufoo.
Sekarang kita telah membahas dasar-dasar formulir login yang akan kita buat, mari kita membuat beberapa bentuk.
Seperti yang telah dibahas sebelumnya, saya mencoba untuk membuat setiap bentuk yang berbeda dari yang lain dengan kekhususan sendiri. Yang satu ini mengandalkan tombol yang mengirimkan, semacam "keluar dari layar", dan bulat.
Form html
<form class="form-1" action="form_submit.php" >
<p class="field">
<input type="text" name="login" placeholder="Nama login atau email">
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" name="password" placeholder="Password">
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
</p>
</form>
Baiklah, jadi html diatas ini cukup minim, artinya kita tidak akan menggunakan label. Tapi, kita tentu perlu memberitahu pengguna apa yang mereka harus tulis dalam bidang input, jadi kita menggunakan ikon. Mereka adalah tag <i/> kecil.
Catatan: Saya tidak akan membahas di sini bagaimana menggunakan font ikon seperti FontAwesome. Jika Anda ingin mempelajari lebih lanjut tentang hal itu, Anda dapat memeriksa contoh di situs web mereka.
Pada dasarnya, kita memiliki dua kontainer wrapping masukan dan ikon. Tombol submit dalam kontainer sendiri, dan kita menggunakan <button/> bukan sebuah <input/> dengan ikon di dalamnya.
Kami juga akan menggunakan placeholders untuk membuat sesuatu yang lebih jelas untuk browser yang didukung. Informasi lebih lanjut tentang dukungan browser untuk atribut placeholder dapat ditemukan di CanIUse.com.
Hal utama yang akan kita bahas adalah proses bagaimana form ini bekerja dengan mengirimkan variabel post melalui JavaScript dan AJAX(JQuery) yang kemudian akan diproses oleh file php (form_submit.php) dengan hasil proses ini akan memberikan variabel jawaban atas posting form yang dilakukan.
Beberapa fitur dari formulir login ini adalah:
- Proses formulir tanpa refresh halaman menggunakan AJAX
- Validasi sisi klien
- Validasi sisi server (validasi dari sisi PHP)
- Menampilkan kesalahan jika ada
- Menampilkan sukses jika formulir dikirimkan dengan benar
Ini akan menjadi bagian yang termudah. Karena kita menggunakan PHP, kita bisa membuat script sederhana untuk memproses formulir login. Mari kita namakan form_submit.php.
File php ini akan memberikan dukungan untuk mengirim kembali data JSON (yang mana kode javaScript akan memproses setelah PHP atau kode sisi server mengirimkan kembali informasi). Juga akan mengirim kembali kesalahan dan pesan kesalahan dalam data yang dikirimkan kembali. Dan file ini hanya akan memeriksa untuk melihat apakah variabel ada atau tidak. Ada banyak validasi yang dapat Anda lakukan seperti memeriksa untuk melihat apakah login yang valid, tapi kita hanya akan fokus pada status diperlukan.
<?php // form_submit.php
$errors = array(); // array untuk menampung kesalahan validasi
$data = array(); // array untuk menampung data yang dikembalikan
// memvalidasi variabel ======================================================
// jika variabel ini tidak ada, tambahkan kesalahan untuk array $errors
if (empty($_POST['login']))
$errors['login'] = 'Nama Login diperlukan.';
if (empty($_POST['password']))
$errors['password'] = 'Password diperlukan.';
// mengembalikan respon ===========================================================
// jika tidak ada kesalahan dalam array, memberikan nilai boolean false
if (!empty($errors)) {
// jika ada item dalam array kesalahan, mengembalikan nilai kesalahan-kesalahan ini
$data['success'] = false;
$data['errors'] = $errors;
} else {
// jika tidak ada kesalahan memproses formulir, maka mengembalikan pesan sukses
// LAKUKAN SEMUA PENGOLAHAN FORMULIR ANDA DI SINI
// INI BISA APA PUN ANDA INGIN LAKUKAN (LOGIN, SIMPAN, UPDATE, APAPUN)
// menampilkan pesan sukses dan memberikan nilai true untuk variabel sukses
session_start(); // memulai session
$_SESSION['auth'] = 'ok'; // menyimpan nilai ok pada variabel session auth
$data['success'] = true;
$data['message'] = 'Sukses!';
}
// mengembalikan semua data untuk panggilan AJAX
echo json_encode($data);
?>
Perhatikan di PHP, untuk mengirimkan data kembali ke panggilan javaScript, lakukan dengan menggunakan echo json_encode(). Menggunakan return dalam fungsi tidak akan memberikan data JSON kembali.
Untuk menjelaskan secara lebih rinci bagaimana proses form_submit.php:
Untuk menampung informasi kesalahan atau data yang dikembalikan ditampung dalam variabel array dibawah ini
$errors = array(); // array untuk menampung kesalahan validasi
$data = array(); // array untuk menampung data yang dikembalikan
Kemudian POST setiap variabel yang dikirimkan dilakukan validasi
jika $_POST['login'] bernilai kosong maka informasi kesalahan dimasukan kedalam array kesalahan ($errors['login'])
jika $_POST['password'] bernilai kosong maka informasi kesalahan dimasukan kedalam array kesalahan ($errors['password'])
Selanjutnya jika array $errors bernilai kosong maka respon data success bernilai true, dan respon data message bernilai 'Sukses',
$data['success'] = true; $data['message'] = 'Sukses!';
dan sebaliknya jika array $errors tidak bernilai kosong, maka respon data success bernilai false, dan respon data errors bernilai array kesalahan $errors.
$data['success'] = false; $data['errors'] = $errors;
pada baris dimana array $errors bernilai kosong, akan mulai menuliskan SESSION agar dapat dikenal disetiap halaman yang membutuhkan otorisasi.
session_start();
$_SESSION['auth'] = 'ok';
pada bagian akhir adalah mengembalikan semua data untuk panggilan AJAX dengan perintah
echo json_encode($data);
Formulir Login [admin.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<meta name="description" content="Form Login" />
<meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" />
<meta name="author" content="jagocoding" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Jagocoding top bar -->
<div class="jagocoding-top">
<a href="http://www.jagocoding.com/profile/darmawan">
<strong>« jadocoding.com: </strong>Modul Pengenalan PHP
</a>
<span class="right">
<a href="http://cloud.juplo.com">
<strong>Personal Cloud</strong>
</a>
</span>
</div><!--/ Jagocoding top bar -->
<header>
<h1><strong>Form Login</strong></h1>
<h2>Pengenalan SESSION php dengan modul login dengan beberapa penunjang seperti css, jquery, modernizr</h2>
<div class="support-note">
<span class="note-ie">Maaf, hanya browser modern.</span>
</div>
</header>
<section class="main">
<div class="alert alert-error hide">
<button class="close" data-dismiss="alert">×</button>
Pesan kesalahan.
</div>
<div class="alert alert-success hide">
<button class="close" data-dismiss="alert">×</button>
Pesan sukses.
</div>
<form class="form-1" action="form_submit.php" >
<p class="field">
<input type="text" name="login" placeholder="Nama login atau email">
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" name="password" placeholder="Password">
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
</p>
</form>
</section>
</div>
<script src="js/modernizr.custom.63321.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Untuk mengirimkan formulir melalui AJAX, kita perlu melakukan hal-hal tertentu dalam file javaScript.
- Capture bentuk tombol submit agar aksi default (post a form) tidak terjadi
- Dapatkan semua data dari formulir kami menggunakan jQuery
- Submit menggunakan AJAX
- Tampilkan kesalahan jika ada
Kita akan mulai berkas JavaScript dengan mendapatkan data dari formulir login (admin.html) dan mengirim permintaan POST ke script PHP (form_submit.php).
/*
* custom.js
*/
var formc = $('.form-1');
var error1 = $('.alert-error');
var success1 = $('.alert-success');
$(document).ready(function() {
$('.close').bind('click', function() {
var d = $('.' + $(this).attr('data-dismiss'));
d.fadeOut();
});
formc.submit(function(e) {
var postData = formc.serializeArray();
var formURL = formc.attr("action");
var errmsg = '';
error1.hide(); success1.hide();
$('.support-note').html('<p style="color:white"><img src="images/loading.gif"> Tunggu sejenak sedang proses.</p>').show();
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
dataType: 'json', // jenis data yang kita harapkan kembali dari server
encode: true
})// penggunaan 'done' memberikan panggilan balik (callback)
.done(function(data) {
// log data ke konsol sehingga kita dapat melihat
console.log(data);
// di sini kita akan menangani error dan pesan validasi
if (!data.success) {
// menangani kesalahan untuk nama login
if (data.errors.login) {
errmsg += data.errors.login;
}
// menangani kesalahan untuk password
if (data.errors.password) {
if (errmsg === '') {
errmsg += '';
} else {
errmsg += ', ';
}
errmsg += data.errors.password;
}
$('.alert-error').html(errmsg);
error1.show();
} else {
// menampilkan pesan sukses!
formc.append('<div class="alert alert-success">' + data.message + '</div>');
success1.show();
// biasanya setelah pengiriman formulir, Anda akan ingin untuk mengarahkan
window.location = 'halaman_utama.php'; // mengarahkan pengguna ke halaman lain
}
$('.support-note').hide();
})
.fail(function(data) {
// menunjukkan kesalahan
console.log(data);
});
e.preventDefault(); //Aksi default BERHENTI
});
});
Sekarang ketika tombol submit ditekan pada formulir, kode javaScript akan mendapatkan semua nilai input yang dibutuhkan dan mengirim permintaan POST untuk form_submit.php.
Callback: akan menggunakan panggilan balik .done untuk menangani permintaan AJAX sukses.. Ini biasanya menggunakan .success akan tetapi telah usang sejak penggunaan jQuery 1.8 +.
Cara lain untuk Dapatkan Form Data adalah serialize
Melihat data kembalian dari JSON
Script PHP akan memproses input bahwa panggilan AJAX dikirim dan dikirim kembali $data[] array yang telah dibuat. Anda dapat melihat hal ini dalam konsol browser Anda setelah Anda mengirimkan formulir Anda.
Untuk menjelaskan secara lebih rinci bagaimana proses custom.js ini;
Di dalam fungsi kita yang dimuat saat halaman siap, kami menambahkan beberapa validasi form. Tapi hal pertama yang harus ditambahkan adalah mendeklarasikan form, errors, dan success, serta menyembunyikan bagian dari pesan kesalahan dan pesan sukses (errors dan success).
var formc = $('.form-1');
var error = $('.alert-error');
var success = $('.alert-success');
selanjutnya adalah saat tombol submit form dieksekusi, maka baris javascript dibawah ini akan manangani/mengambil alih dari default POST (dimana jika tanpa AJAX POST, maka halaman akan menuju ke alamat url form, dan halaman akan berubah), awal proses ajax diawali dengan menampilkan pesan "Tunggu sejenak sedang proses." agar pengguna mengetahui jika layar sedang melakukan proses, hasil dari proses form_submit.php akan ditangkap pada proses .done, jika nilai dari data .success adalah false maka isi dari pesan kesalahan akan ditampung diberikan kepada errmsg, dan ditampilkan pada bagian pesan kesalahan
<div class="alert alert-error hide"> <button class="close" data-dismiss="alert">×</button> Pesan kesalahan. </div>
dengan perintah untuk menampilkannya adalah; error.show();
sebaliknya jika nilai dari data .success adalah true maka pesan sukses akan ditampilkan pada bagian pesan sukses
<div class="alert alert-success hide"> <button class="close" data-dismiss="alert">×</button> Pesan sukses. </div>
dengan perintah untuk menampilkannya adalah; success.show(); dan tidak lupa menutup pesan "Tunggu sejenak sedang proses" dengan perintah $('.support-note').hide();
selanjutnya mengarahkan pengguna ke halaman utama admin (halaman_utama.php)
pada halaman utama (atau halaman-halamann yang membutuhkan otorisasi), seperti telah kita bahas pada awal tulisan mengenai SESSION, diawal tags html dituliskan fungsi session_start(); dimana kemudian akan mengecek nilai dari SESSION auth, jika nilai auth ini 'ok' maka halaman utama (atau halaman lain yang membutuhkan otorisasi) ditampilkan, sebaliknya jika false maka halaman akan diarahkan kembali ke halaman login, karena untuk mengakses/membuka halaman utama atau halaman lain yang memerlukan otorisasi.
<?php
session_start();
if (!isset($_SESSION['auth'])) {
header('Location: admin.html');
die;
}
if (isset($_REQUEST['logout']) && $_REQUEST['logout'] == 1) {
session_destroy();
header("Location: admin.html");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Utama</title>
<meta name="description" content="Form Login" />
<meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" />
<meta name="author" content="jagocoding" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if lte IE 7]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<!-- Jagocoding top bar -->
<div class="jagocoding-top">
<a href="http://www.jagocoding.com/profile/darmawan">
<strong>« jadocoding.com: </strong>Modul Pengenalan PHP
</a>
<span class="right">
<a href="http://cloud.juplo.com">
<strong>Personal Cloud</strong>
</a>
</span>
</div><!--/ Jagocoding top bar -->
<header>
<h1><strong>Halaman Utama</strong></h1>
<h2>Halaman ini dapat diakses setelah melakukan login.</h2>
<nav class="jagocoding-demos">
<a class="" href="?logout=1">Logout</a>
<a class="current-demo" href="#">Halaman 2</a>
<a href="#">Halaman 3</a>
<a href="#">Halaman 4</a>
<a href="#">Halaman 5</a>
</nav>
<div class="support-note">
<span class="note-ie">Maaf, hanya browser modern.</span>
</div>
</header>
<section class="main">
</section>
</div>
<script src="js/modernizr.custom.63321.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</body>
</html>
