[Basic] 3. user authentication
Upcoming SlideShare
Loading in...5
×
 

[Basic] 3. user authentication

on

  • 1,680 views

 

Statistics

Views

Total Views
1,680
Views on SlideShare
1,670
Embed Views
10

Actions

Likes
0
Downloads
41
Comments
0

1 Embed 10

http://blog.scgeneration.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

[Basic] 3. user authentication [Basic] 3. user authentication Document Transcript

  • UJK RPL TUTS™ Part Three User Authentication Login, Logout, dan Pendaftaran 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. Basic LevelUJK RPL Tuts™ Part Three : User Authentication 1
  • OverviewGambaran Part Three : User AuthenticationSebelum 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 Basic Level Daftar Login User Login Admin User Admin Id Halaman User Halaman Admin Username TglPendaftaran Password Username Password Logout User Logout Admin Nama TglLahir Login Admin : Tabel Admin – Set Session username & password Gender Login User : Tabel User – Set Session user-username & user-password Email Facebook File yang akan dibuat: Twitter Admin : Login Form, Login Action, Logout Alamat User : Daftar, Daftar Proses, Login, Login Action, Logout namafoto Did you know? #Database atau #BasisData adalah ruang penyimpanan data berupa text dan informasi bagi sebuah aplikasi, entah berbasis Dekstop ataupun Web. @enjangdspcUJK RPL Tuts™ Part Three : User Authentication 2
  • First DoLakukan ini duluTata FolderSebelum memulai Tutorial, untuk memudahkan langkah mari Tata Folder pada Bagian Files didreamweaver menjadi seperti berikut:  Buat Folder user lalu buat file index.php didalamnya  Buat Folder admin lalu buat file index.php didalamnya  Buat file index.phpFile Koneksi Buat file koneksi.php Isikan dengan kode seperti dibawah ini host user password Nama databaseUJK RPL Tuts™ Part Three : User Authentication 3
  • AdminOtentikasi AdministratorStep 1 : Create Table adminBuatlah tabel Admin, dengan Field Username dan Password dan Isikan 1 Baris Record denganUsername 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 SelesaiUJK RPL Tuts™ Part Three : User Authentication 4
  • Step 2 : Login Form adminBuatlah 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 <input type="text" name="username" id="username" /> <input type="password" name="password" id="password" /> <input type="submit" name="login" id="login" value="login" /> Lihat bagian kode Form, dan edit Form Actionnya arahkan pada login_action.php Save dengan nama form_login.php Tips form Author Hal-hal yang perlu diperhatikan ketika membuat Form Login Hal 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"UJK RPL Tuts™ Part Three : User Authentication 5
  • Step 3 : Login Action admin Buat file baru (php) Masukkan kode berikut //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 // Jika tombol login ditekan // set sesi password // 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 // Jika tombol login ditekan Simpan dengan nama login_action.php Boleh copy paste dengan syarat memahami <?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 } } ?>UJK RPL Tuts™ Part Three : User Authentication 6
  • Step 4 : Logout admin Buat file baru (php) Masukkan kode berikut // sesi dimulai // telah login? Atau belum? // jika belum tampilkan pesan belum login // jika sudah unset sesi // dan tutup sesi // tampilkan pesan sukses Simpan dengan nama logout.php Boleh copy paste dengan syarat memahami <?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 } ?>Testing AdminTest 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.phpUJK RPL Tuts™ Part Three : User Authentication 7
  • UserOtentikasi PemakaiStep 1 : Create Table userBuatlah 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 diatasUJK RPL Tuts™ Part Three : User Authentication 8
  • Step 2 : Daftar Form & Action userBuatlah sebuah Form Daftar, dengan Field Sesuai dengan Database yang tadi dibuat kecuali ‘Id’ diDreamweaver. 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++) {UJK RPL Tuts™ Part Three : User Authentication $bl = ($i<10) ? "0$i" : $i; 9 echo "<option value=$bl>$bl</option>"; }
  • Untuk List/Menu bln <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; Untuk "<option value=$bl>$bl</option>"; echo List/Menu thn <select name="thn"> } <?php ?> for </select> - ($i=1988; $i<=2000; $i++) { <select echo "<option value=$i>$i</option>"; name="thn"> } ?><?php for </select> ($i=1988; $i<=1994; $i++) $bl = ($i<10) ? "0$i" : $i; { 3. Kolom Gender memakai List/Menu dengan Value ‘P’ dan ‘L’ echo "<option value=$i>$i</option>"; echo "<option value=$bl>$bl</option>"; 4. Kolom Alamat : Text Area } } 5. Kolom Upload Foto : File Field dengan nama namafoto ?> ?> </select> - </select> Setelah form terbuat, taruh kode php daftar action di atas tag html <select name="thn"> <?php for ($i=1988; $i<=1994; $i++) { echo "<option value=$i>$i</option>"; Berikut Kode php daftar actionnya } ?> // panggil file koneksi </select> // 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 gagalUJK RPL Tuts™ Part Three : User Authentication 10
  • Simpan file dengan nama login_form.php Boleh copy paste dengan syarat memahami <?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"); } } ?>Testing UserTest 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.UJK RPL Tuts™ Part Three : User Authentication 11
  • Step 4 : Login Form userBuatlah sebuah Form Login satu lagi untuk User, dengan Field Username dan Password diDreamweaver. 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 <input type="text" name="username" id="username" /> <input type="password" name="password" id="password" /> <input type="submit" name="login" id="login" value="login" /> Lihat bagian kode Form, dan edit Form Actionnya arahkan pada user_login_action.php Save dengan nama user_form_login.php Tips form Author Hal-hal yang perlu diperhatikan ketika membuat Form Login Hal 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"UJK RPL Tuts™ Part Three : User Authentication 12
  • Step 5 : Login Action user Buat file baru (php) Masukkan kode berikut //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 // Jika tombol login ditekan // set sesi password // Tampilkan pesan Sukses // Arahkan ke Index User // Jika tombol login ditekan // Tampilkan pesan Gagal // Jika tombol login ditekankembali ke login form // Arahkan // Penutup If ($num==1) // Penutup If (isset) // Jika tombol login ditekan Simpan dengan nama user_login_action.php // Jika tombol login ditekan Boleh copy paste dengan syarat memahami <?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 } } ?>UJK RPL Tuts™ Part Three : User Authentication 13
  • Step 6 : Logout user Buat file baru (php) Masukkan kode berikut // 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 Simpan dengan nama user_logout.php Boleh copy paste dengan syarat memahami <?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 } ?>Testing UserTest 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.phpUJK RPL Tuts™ Part Three : User Authentication 14
  • Cheat SheetIngatlah selalu iniDisimpulkan 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.comUJK RPL Tuts™ Part Three : User Authentication 15