[basic] 3. user authentication
Post on 07-Jul-2015
1.672 Views
Preview:
TRANSCRIPT
UJK RPL Tuts™ Part Three : User Authentication 1
User Authentication Login, Logout, dan Pendaftaran
UJK RPL TUTS™
Part Three
Basic Level
Lisensi Dokumen
Seluruh dokumen yang dibuat oleh SCG dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk
tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan
pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan
ulang, kecuali mendapatkan ijin terlebih dahulu dari Penulis atau Software Community Generation.
Copyright © 2012 Software Community Generation.
UJK RPL Tuts™ Part Three : User Authentication 2
Overview Gambaran
Sebelum memulai Tutorial ini, harap sediakan dan pastikan komponen-komponen berikut:
Telah memahami dan menyelesaikan Tutorial sebelumnya
Adobe Dreamweaver CS3
XAMPP 1.8.0
Jalankan XAMPP Control Panel, dan pastikan service Apache dan MySQL running.
Gambaran User Authentication
Login Admin : Tabel Admin – Set Session username & password
Login User : Tabel User – Set Session user-username & user-password
File yang akan dibuat:
Admin : Login Form, Login Action, Logout
User : Daftar, Daftar Proses, Login, Login Action, Logout
Part Three : User Authentication
Did you know?
#Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi
bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web.
@enjangdspc
Basic Level
User
Id
TglPendaftaran
Username
Password
Nama
TglLahir
Gender
Alamat
namafoto
Admin
Username
Password
Login User Daftar
Logout User
Halaman Admin Halaman User
Login Admin
Logout Admin
UJK RPL Tuts™ Part Three : User Authentication 3
First Do Lakukan ini dulu
Tata Folder
Sebelum memulai Tutorial, untuk memudahkan langkah mari Tata Folder pada Bagian Files di
dreamweaver menjadi seperti berikut:
Buat Folder user lalu buat file index.php
didalamnya
Buat Folder admin lalu buat file index.php
didalamnya
Buat file index.php
File Koneksi
Buat file koneksi.php
Isikan dengan kode seperti dibawah ini
Nama database
host user password
UJK RPL Tuts™ Part Three : User Authentication 4
Admin Otentikasi Administrator
Step 1 : Create Table admin Buatlah tabel Admin, dengan Field Username dan Password dan Isikan 1 Baris Record dengan Username Admin dan Password Admin.
Masuk ke database yang telah dibuat di phpMyAdmin, dan Create Table baru, klik Go Ex. Database KreditMotor
Masukkan nama Field Username dan Password. Klik Save
Isikan satu baris Record, dengan mengklik Insert
Masukkan admin di kolom Username dan admin di Field Password, klik Go
Selesai
UJK RPL Tuts™ Part Three : User Authentication 5
Step 2 : Login Form admin Buatlah sebuah Form Login, dengan Field Username dan Password di Dreamweaver.
Buka Dreamweaver, dan buat File Baru (PHP) Sisipkan Form dengan mengklik ikon form di dreamweaver
Lalu sisipkan tabel dengan colomn 3 dan baris 4 dengan mengklik ikon table
Lalu susun sedemikian rupa sehingga seperti gambar
Lihat bagian kode Form, dan edit Form Actionnya arahkan pada login_action.php
Save dengan nama form_login.php
Hal
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="submit" name="login" id="login" value="login" />
Hal-hal yang perlu diperhatikan ketika membuat Form Login
1. Sisipkan terlebih dahulu Form, baru kemudian Tabel
2. Cek setiap Field pada form dan beri nama sesuai dengan nama field di database Ex. Field username di Form login, beri nama username sesuai dengan di database admin
3. Namai tombol submit dengan nama yang sama dengan yang digunakan pada fungsi
isset. Ex. Tombol Submit harus bernama (name dan value) login karena di file
login_process.php if(isset($_POST['login'])) {
4. Cek Form Action di Form Login. Set dengan action="login_action.php"
Tips form Author
UJK RPL Tuts™ Part Three : User Authentication 6
Step 3 : Login Action admin
Buat file baru (php) Masukkan kode berikut
Simpan dengan nama login_action.php
//Panggil File Koneksi
// Sesi Mulai
// Jika tombol login ditekan
// Field Username jadikan Variabel
// Field Password jadikan Variabel
// Jika tombol login ditekan
// SQL
// Cek jika ada Username dan password yang cocok
// Jika ada 1 baris record dari Admin yang login
// set sesi username
// set sesi password
// Jika tombol login ditekan
// Tampilkan pesan Sukses
// Arahkan ke Index Admin
// Jika tombol login ditekan
// Tampilkan pesan Gagal
// Arahkan kembali ke login form
// Jika tombol login ditekan
// Penutup If ($num==1)
// Penutup If (isset)
// Jika tombol login ditekan
<?php
include "koneksi.php";
session_start();
if(isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = mysql_query("SELECT * FROM admin WHERE username='$username' && password='$password'");
$num = mysql_num_rows($sql);
if($num==1) {
$_SESSION['username'] = $username;
$_SESSION['password'] = $password;
?>
<script language="JavaScript">alert('Selamat Datang Admin!');
document.location='admin/index.php'</script><?php
} else {
?>
<script language="JavaScript">alert('Nama Pemakai atau Kata Sandi Salah');
document.location='login_form.php'</script>
<?php
}
}
?>
Boleh copy paste dengan syarat memahami
UJK RPL Tuts™ Part Three : User Authentication 7
Step 4 : Logout admin
Buat file baru (php) Masukkan kode berikut
Simpan dengan nama logout.php
Testing Admin Test login dan logout
Cobalah login di login_form.php dengan username dan password yang pada awal pembahasan sudah dibuat. Username : admin password : admin
Dan test logout dengan menuliskan di address bar browser http://localhost/kreditmotor/logout.php
// sesi dimulai
// telah login? Atau belum?
// jika belum tampilkan pesan belum login
// jika sudah unset sesi
// dan tutup sesi
// tampilkan pesan sukses
<?php
session_start();
if(!isset($_SESSION['username']) || !isset($_SESSION['password'])) {
?><script language="JavaScript">alert('Nampaknya anda belum login');
document.location='../index.php'</script><?php
} else {
unset($_SESSION);
session_destroy();
?><script language="JavaScript">alert('Terimakasih, Sampai jumpa Kembali');
document.location='index.php'</script><?php
}
?>
Boleh copy paste dengan syarat memahami
UJK RPL Tuts™ Part Three : User Authentication 8
User Otentikasi Pemakai
Step 1 : Create Table user Buatlah tabel User, dengan Field :
Nama Field Tipe, Panjang Index Dafault Atrributs
Id int(11) PRIMARY Auto_Increment
TglPendaftaran timestamp
CURRENT_TIMESTAMP On Update CURRENT_TIMESTAMP
username varchar(250) UNIQUE
password varchar(250)
Nama varchar(250)
TglLahir Date
Gender varchar(2)
Email varchar(250)
Facebook varchar(250)
Twitter varchar(250)
Alamat Text
namafoto Text
Masuk ke database yang telah dibuat di phpMyAdmin, dan Create Table baru, klik Go
Ex. Database KreditMotor
Masukkan nama Field seperti tabel diatas
UJK RPL Tuts™ Part Three : User Authentication 9
Step 2 : Daftar Form & Action user Buatlah sebuah Form Daftar, dengan Field Sesuai dengan Database yang tadi dibuat kecuali ‘Id’ di Dreamweaver.
Buka Dreamweaver, dan buat File Baru (PHP) Sisipkan Form dengan mengklik ikon form di dreamweaver
Lalu sisipkan tabel dengan column 3 dan baris 11 dengan mengklik ikon table
Lalu susun sedemikian rupa sehingga seperti gambar:
1. Kolom Nama Pemakai, Kata Sandi, Nama Lengkap, Email, FB, Twitter : Text Field 2. Kolom Tanggal Lahir : 3 List/Menu, tgl, bln, dan thn Sedangkan valuesnya memakai kode PHP Untuk List/Menu tgl
<select name="tgl">
<?php
for
($i=1; $i<=31; $i++) {
$tgl = ($i<10) ? "0$i" : $i;
echo "<option value='$tg;'>$tgl</option>";
}
?>
<=12; $i++) {
$bl = ($i<10) ? "0$i" : $i;
echo "<option value='$bl'>$bl</option>";
}
?>
UJK RPL Tuts™ Part Three : User Authentication 10
Untuk List/Menu bln
Untuk List/Menu thn
3. Kolom Gender memakai List/Menu dengan Value ‘P’ dan ‘L’ 4. Kolom Alamat : Text Area 5. Kolom Upload Foto : File Field dengan nama namafoto
Setelah form terbuat, taruh kode php daftar action di atas tag html
Berikut Kode php daftar actionnya
<select name="tgl">
<?php
for
($i=1; $i<=31; $i++) {
$bln = ($i<10) ? "0$i" : $i;
echo "<option value='$bln'>$bln</option>";
}
?>
<=12; $i++) {
$bl = ($i<10) ? "0$i" : $i;
echo "<option value='$bl'>$bl</option>";
}
?>
</select> -
<select
name="thn">
<?php
for
($i=1988; $i<=1994; $i++) {
echo "<option value='$i'>$i</option>";
}
?>
</select>
<select name="thn">
<?php
for
($i=1988; $i<=2000; $i++) {
echo "<option value='$i'>$i</option>";
}
?>
</select>
$bl = ($i<10) ? "0$i" : $i;
echo "<option value='$bl'>$bl</option>";
}
?>
</select> -
<select
name="thn">
<?php
for
($i=1988; $i<=1994; $i++) {
echo "<option value='$i'>$i</option>";
}
?>
</select>
// panggil file koneksi
// Jika tombol daftar di tekan
// Field di jadikan Variabel
// Jika ada foto yang di upload
// Proses Upload File
// Pindahkan foto ke folder user/foto
// SQL
// Jika sukses tampilkan pesan sukses
// Jika gagal tampilkan pesan gagal
UJK RPL Tuts™ Part Three : User Authentication 11
Simpan file dengan nama login_form.php
Testing User Test Proses Pendaftaran
Cobalah daftar dan isi semua field di daftar_form.php, serta upload sebuah foto lihat di database KreditMotor pada tabel user apakah semua isian field masuk.
Dan lihat di folder foto yang berada di dalam folder user, apakah foto yang tadi di upload saat daftar telah berada di dalam folder ini, jika ya berarti sukses.
<?php
include("koneksi.php");
if (isset($_POST['daftar'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$nama = $_POST['Nama'];
$tanggal = $_POST['thn']."-".$_POST['bln']."-".$_POST['tgl'];
$gender = $_POST['Gender'];
$email = $_POST['Email'];
$facebook = $_POST['Facebook'];
$twitter = $_POST['Twitter'];
$alamat = $_POST['Alamat'];
$namafoto = $_FILES['namafoto']['name'];
if (strlen($namafoto)>0){
if (is_uploaded_file($_FILES['namafoto']['tmp_name']))
{
move_uploaded_file ($_FILES['namafoto']['tmp_name'], "user/foto/".$namafoto);
}
}
$query = "INSERT INTO user (username, password, Nama, TglLahir, Gender, Email, Facebook, Twitter, Alamat, namafoto)
VALUES ('$username','$password', '$nama', '$tanggal', '$gender', '$email', '$facebook', '$twitter', '$alamat', '$namafoto')";
$sql = mysql_query($query) or die (mysql_error());
if ($sql) {
echo ("Sukses <a href='user_login_form.php'>Klik disini untuk login</a>");
} else {
echo ("Data Gagal");
}
}
?>
Boleh copy paste dengan syarat memahami
UJK RPL Tuts™ Part Three : User Authentication 12
Step 4 : Login Form user Buatlah sebuah Form Login satu lagi untuk User, dengan Field Username dan Password di Dreamweaver.
Buka Dreamweaver, dan buat File Baru (PHP) Sisipkan Form dengan mengklik ikon form di dreamweaver
Lalu sisipkan tabel dengan colomn 3 dan baris 4 dengan mengklik ikon table
Lalu susun sedemikian rupa sehingga seperti gambar
Lihat bagian kode Form, dan edit Form Actionnya arahkan pada user_login_action.php
Save dengan nama user_form_login.php
Hal
<input type="text" name="username" id="username" />
<input type="password" name="password" id="password" />
<input type="submit" name="login" id="login" value="login" />
Hal-hal yang perlu diperhatikan ketika membuat Form Login
Sisipkan terlebih dahulu Form, baru kemudian Tabel
Cek setiap Field pada form dan beri nama sesuai dengan nama field di database Ex. Field username di Form login, beri nama username sesuai dengan di database user
Namai tombol submit dengan nama yang sama dengan yang digunakan pada fungsi isset.
Ex. Tombol Submit harus bernama (name dan value) login karena di file
user_login_process.php if(isset($_POST['login'])) {
5. Cek Form Action di Form Login. Set dengan action="login_action.php"
Tips form Author
UJK RPL Tuts™ Part Three : User Authentication 13
Step 5 : Login Action user
Buat file baru (php) Masukkan kode berikut
Simpan dengan nama user_login_action.php
//Panggil File Koneksi
// Sesi Mulai
// Jika tombol login ditekan
// Field Username jadikan Variabel
// Field Password jadikan Variabel
// Jika tombol login ditekan
// SQL
// Cek jika ada Username dan password yang cocok
// Jika ada 1 baris record dari Admin yang login
// set sesi username
// set sesi password
// Jika tombol login ditekan
// Tampilkan pesan Sukses
// Arahkan ke Index User
// Jika tombol login ditekan
// Tampilkan pesan Gagal
// Arahkan kembali ke login form
// Jika tombol login ditekan
// Penutup If ($num==1)
// Penutup If (isset)
// Jika tombol login ditekan
<?php
include "koneksi.php";
session_start();
if(isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = mysql_query("SELECT * FROM user WHERE username='$username' && password='$password'");
$num = mysql_num_rows($sql);
if($num==1) {
$_SESSION['user-username'] = $username;
$_SESSION['user-password'] = $password;
?>
<script language="JavaScript">alert('Selamat Datang User!');
document.location='user/index.php'</script><?php
} else {
?>
<script language="JavaScript">alert('Nama Pemakai atau Kata Sandi Salah');
document.location='login_form.php'</script>
<?php
}
}
?>
Boleh copy paste dengan syarat memahami
UJK RPL Tuts™ Part Three : User Authentication 14
Step 6 : Logout user
Buat file baru (php) Masukkan kode berikut
Simpan dengan nama user_logout.php
Testing User Test daftar, login dan logout
Cobalah terlebih dulu daftar di daftar_form.php, kemudian login dengan username dan password pada saat daftar di user_login_form.php
Dan test logout dengan menuliskan di address bar browser http://localhost/kreditmotor/user_logout.php
// sesi dimulai
// telah login? Atau belum?
// jika belum tampilkan pesan belum login
// jika sudah unset sesi
// dan tutup sesi
// tampilkan pesan sukses
// arahkan ke index.php
<?php
session_start();
if(!isset($_SESSION['user-username']) || !isset($_SESSION['user-password'])) {
?><script language="JavaScript">alert('Nampaknya anda belum login');
document.location='index.php'</script><?php
} else {
unset($_SESSION);
session_destroy();
?><script language="JavaScript">alert('Terimakasih, Sampai jumpa Kembali');
document.location='index.php'</script><?php
}
?>
Boleh copy paste dengan syarat memahami
UJK RPL Tuts™ Part Three : User Authentication 15
Cheat Sheet Ingatlah selalu ini
Disimpulkan dalam tutorial ini, User Authentication di Bagi 2:
1. Admin
- Untuk admin dibuat tabel Admin dengan field username dan password
- membuat file form_login.php, login_action.php, dan logout.php
- login diarahkan ke index.php di folder Admin.
2. User
- Untuk user dibuat tabel User dengan field username, password, dan field biodata lainnya
- membuat file user_form_login.php, user_login_action.php, user_logout.php,
daftar_form.php.
- login diarahkan ke index.php di folder User.
Do the Best and Good Luck.
This Tuts Brought To You By
Author : Enjang Kurniawan
AKA enjangdspc. Work as Web Programmer and Chief Web Officer at
SCGeneration. Alumni of RPL SMKN 1 Karawang 2011.
@enjangdspc on.fb.me/enjangdspc enjang.kurniawan@outlook.com
top related