[Basic] 3. user authentication

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.


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

Email

Facebook

Twitter

Alamat

namafoto

Admin

Username

Password

Login User Daftar

Logout User

Halaman Admin Halaman User

Login Admin

Logout Admin


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


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


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


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


// SQL

// Cek jika ada Username dan password yang cocok

// Jika ada 1 baris record dari Admin yang login

// set sesi username

// set sesi password


// Tampilkan pesan Sukses

// Arahkan ke Index Admin


// Tampilkan pesan Gagal

// Arahkan kembali ke login form


// Penutup If ($num==1)

// Penutup If (isset)


<?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


Step 4 : Logout admin


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

}

?>



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


Step 2 : Daftar Form & Action user Buatlah sebuah Form Daftar, dengan Field Sesuai dengan Database yang tadi dibuat kecuali ‘Id’ 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>";

}

?>


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;


}

?>

</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++) {


}

?>

</select>

$bl = ($i<10) ? "0$i" : $i;


}

?>

</select> -

<select

name="thn">

<?php

for

($i=1988; $i<=1994; $i++) {


}

?>

</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


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'])) {



$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");

}

}

?>



Step 4 : Login Form user Buatlah sebuah Form Login satu lagi untuk User, dengan Field Username dan Password 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


Step 5 : Login Action user


Simpan dengan nama user_login_action.php

//Panggil File Koneksi

// Sesi Mulai


// Field Username jadikan Variabel

// Field Password jadikan Variabel


// SQL

// Cek jika ada Username dan password yang cocok

// Jika ada 1 baris record dari Admin yang login

// set sesi username

// set sesi password


// Tampilkan pesan Sukses

// Arahkan ke Index User


// Tampilkan pesan Gagal

// Arahkan kembali ke login form


// Penutup If ($num==1)

// Penutup If (isset)


<?php

include "koneksi.php";

session_start();

if(isset($_POST['login'])) {



$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

}

}

?>



Step 6 : Logout user


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');


} else {

unset($_SESSION);

session_destroy();

?><script language="JavaScript">alert('Terimakasih, Sampai jumpa Kembali');


}

?>



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 [email protected]

http://www.twitter.com/enjangdspc

http://on.fb.me/enjangdspc

[Basic] 3. user authentication

Education

Transcript of [Basic] 3. user authentication