Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi...

14
Modul 8 Session dan Form 1.1 Tujuan a. Mahasiswa dapat menggunakan session b. Mahasiswa dapat membuat program berbasis form dan session 1.2 Materi a. Session b. Form 1.3 Alat dan Bahan a. PHP dan MySQL b. XAMPP c. Browser 1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumnya b. Instruktur menerangkan dan menjelaskan teori dan cara kerja c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan 1.5 Teori No Session Pada waktu kita browsing menjelajahi website, misalnya e-mail, kita akan diminta memasukkan username dan password. Prosedur ini hanya dilakukan sekali pada awal proses. Selanjutnya sistem akan „mengingat‟ identitas kita, dan menampilkan informasi yang sesuai. Tanpa adanya session, sistem akan salah dan menampilkan data rahasia ke orang yang salah. Untuk mengetahui kegunaan session, kita akan membuat aplikasi tanpa session. Kita membutuhkan satu halaman web dan tiga script php : login.htm, loginNoSession.php, welcomeNoSession.php dan displayNoSession.php login.htm

Transcript of Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi...

Page 1: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

Modul 8

Session dan Form

1.1 Tujuan a. Mahasiswa dapat menggunakan session b. Mahasiswa dapat membuat program berbasis form dan session

1.2 Materi

a. Session

b. Form 1.3 Alat dan Bahan

a. PHP dan MySQL b. XAMPP c. Browser

1.4 Prosedur Praktikum

a. Peserta membaca dan mempelajari materi praktikum sebelumnya

b. Instruktur menerangkan dan menjelaskan teori dan cara kerja c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan

1.5 Teori No Session

Pada waktu kita browsing menjelajahi website, misalnya e -mail, kita akan diminta memasukkan username dan password. Prosedur ini hanya dilakukan sekali pada awal proses. Selanjutnya sistem akan „mengingat‟ identitas kita, dan menampilkan informasi yang sesuai. Tanpa adanya session,

sistem akan salah dan menampilkan data rahasia ke orang yang salah. Untuk mengetahui kegunaan session, kita akan membuat aplikasi tanpa session. Kita membutuhkan satu halaman web dan tiga script php :

login.htm,

loginNoSession.php,

welcomeNoSession.php dan

displayNoSession.php

login.htm

Page 2: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

loginNoSession.php

<? // -- cek user dan password -- // if($login == "indarzah" && $pass =="test"){ header("Location: welcomeNoSession.php?user=indarzah");}

elseif($login == "oky" && $pass =="coba"){ header("Location: welcomeNoSession.php?user=oky");} else{echo("User dan password salah");}

?>

welcomeNoSession.php

<? echo("Welcome $user <br>");echo("<a href=\"displayNoSession.php?user=$user\">"); echo("klik di sini untuk mengakses daftar kenalananda</a>");

?>

displayNoSession.php

<? $dbUser = "indarzah"; $dbPass = "test";

$db = "latihan"; $server = "localhost";

// membuat koneksi $koneksi = mysql_connect($server, $dbUser, $dbPass);

// memeriksa koneksi if(!$koneksi){ echo("Koneksi ke database gagal");

exit; }

// membuka database mysql_select_db($db);

// membuat query dan mengakses hasil $query = "SELECT * FROM UserData WHERE user='$user'"; $hasil = mysql_query($query);

// menampilkan hasil echo("<table border=1>");

Page 3: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

echo("<tr>"); echo("<td>NamaTeman</td>");

echo("<td>Keterangan</td>"); echo("</tr>"); while($row = mysql_fetch_array($hasil)){

echo("<tr>"); echo("<td>".$row["namaTeman"]."</td>"); echo("<td>".$row["keterangan"]."</td>");

echo("</tr>"); } echo("</table>");

?>

kode ini membutuhkan data contact yang diambil dari tabel UserData dengan definisi sebagai berikut:

CREATE TABLE userData ( user VARCHAR(50), namaTeman VARCHAR(50),

keterangan VARCHAR(50) );

dan sampel data sebagai berikut:

INSERT INTO userData VALUES ( 'indarzah', 'Imanudin',

'Teman ceting' );

INSERT INTO userData VALUES ( 'oky', 'Iswahyudi',

'Pak Lurah kos adhyaksa' );

INSERT INTO userData VALUES ( 'oky', 'Anton Raharja',

'Rekan kerja di kantor' );

INSERT INTO userData VALUES ( 'indarzah', 'Widya Andhini',

'Gebetan lama tapi masih mesra' );

Jalannya aplikasi :

login dengan user = oky dan password = coba

Page 4: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

klik link untuk mendisplay output, tampilan akan muncul sebagai berikut:

sekarang, kita akan “memalsu” link yang ada di address bar untuk menampilkan data user indarzah. Buka browser baru dan masukkan link berikut di address bar:

http://localhost/latihan/displayNoSession.php?user=indarzah

Kemudian tekan enter.

Page 5: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

Dengan mudah data rahasia akan muncul. Cara mencegah hal ini terjadi adalah dengan meminta user untuk memasukkan login dan password setiap kali ia berpindah halaman. Tetapi tentu saja cara

ini menjengkelkan bagi user. Selain itu, mempassing variabel login dan password di setiap halaman sangat tidak aman dan rentan penyadapan. Oleh karena itulah kita menggunakan session.

Konsep session Session bekerja seperti tempat penitipan barang di supermarket. Kita datang, menitipkan barang bawaan, dan petugas akan memberikan tanda pengenal. Pada saat kita akan mengambil barang,

kita memberikan tanda pada petugas, dan petugas akan dapat mengambil barang yang dititipkan tanpa tertukar dengan barang orang lain. Permasalahan yang terjadi adalah, bagaimana “tanda pengenal” tersebut akan disimpan pada setiap halaman yang diakses user, sehingga dapat diakses

oleh sistem setiap kali user mengklik link. Ada tiga alternatif yang dapat digunakan untuk menyimpan data session :

Cookie

Hidden Form URL Embedding

Implementasi : Cookie Cookie adalah informasi yang disimpan pada browser user. Script menjalankan function setcookie yang akan menulis data di harddisk user. Cookie ditulis pada browser user dengan menggunakan

perintah :

setcookie(“sessionId”, “1234”);

Setelah itu, variabel $sessionId akan tersedia setiap kali browser user mengakses sistem.

Cookie akan hilang dari browser user setelah melewati masa kadaluarsa yang ditentukan atau dihapus melalui perintah:

setcookie(“sessionId”);

Pendekatan ini banyak mengundang kontroversi. Karena cookie dapat menghilangkan privacy user dan berpotensi mengandung virus. Oleh karena itu, user dapat menonaktifkan cookie melalui setting di browser.

Dengan demikian, pendekatan ini kurang handal untuk diterapkan pada aplikasi kita. Untuk melihat dengan lebih jelas implementasi cookie, kita akan memodifikasi aplikasi di atas sebagai berikut :

login.htm <form method="POST" action="loginSessionCookie.php"> loginSessionCookie.php

<? // -- cek user dan password -- // if($login == "indarzah" && $pass =="test"){

setcookie("user", $login); header("Location: welcomeSessionCookie.php");} elseif($login == "oky" && $pass =="coba"){

setcookie("user", $login); header("Location: welcomeSessionCookie.php");} else{echo("User dan password salah");}

?>

welcomeSessionCookie.php

Page 6: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

<? if(!$user){

echo("Illegal Access");exit; } echo("Welcome $user <br>");

echo("<a href=\"displaySessionCookie.php\">"); echo("klik di sini untuk mengakses daftar kenalan anda</a>");

?>

tambahkan baris berikut pada bagian atas displayNoSession.php dan save as displaySessionCookie.php

if(!$user){

echo("Illegal Access");exit; }

Untuk mengujinya, buka browser baru dan masukkan link berikut di address bar:

http://localhost/latihan/displaySessionCookie.php

Kemudian tekan enter. Anda akan mendapatkan:

Sekarang, disable cookie dengan cara : Klik Tools – Internet Options

Klik tab Security dan klik tombol Custom Level

Page 7: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

klik disable cookie

coba lagi mengakses halaman contact. Anda akan mendapat Illegal Access. Implementasi : Hidden Form

Cara kedua untuk menyimpan data session adalah dengan menyimpan data tersebut pada hidden input yang ada dalam form. Misalnya dengan menggunakan kode :

<input type=”hidden” name=”user” value=”$user”>

cara ini juga tidak dapat dilakukan di segala kondisi, karena ada saat -saat di mana kita tidak dapat menggunakan form.

Implementasi : URL Embedding Cara terakhir yang pasti berhasil adalah dengan “menempelkan” variabel session di link/URL. Misalnya link menuju welcome.php dimodifikasi menjadi welcome.php?sessionId=1234.

Satu-satunya kerugian cara ini adalah, link URL menjadi tidak bisa di ‟bookmark‟. Selain itu, link menjadi tidak indah dipandang mata. Tetapi secara teknis, metode inilah yang paling efektif dan reliable.

Implementasi : Session API Session API PHP menggabungkan teknik cookie dan teknik URL Embedding. Apabila user mengaktifkan cookie, PHP akan menyimpan data session pada cookie. Tetapi apabila cookie di -

Page 8: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

disable user, PHP akan menyimpan data session pada URL. Mekanisme ini terjadi secara otomatis apabila PHP dicompile dengan option --enable-trans-sid.

Cara penggunaan PHP Session API dapat dilihat pada loginSessionApi.php, welcomeSessionApi.php, dan displaySessionApi.php. Anda dapat memodifikasi setting Internet Explorer untuk melihat bahwa metode ini dapat dijalankan

walaupun cookie di-disable. Kita juga tidak dapat mengetik langsung URL

http://localhost/latihan/displaySessionApi.php

untuk membuka halaman pribadi.

loginSessionApi.php:

<? // -- cek user dan password -- //

if($login == "indarzah" && $pass =="test"){ session_start(); $user = $login;

session_register("user"); header("Location: welcomeSessionApi.php");} elseif($login == "oky" && $pass =="coba"){

session_start(); $user = $login; session_register("user");

header("Location: welcomeSessionApi.php");} else{ echo("User dan password salah");}

?>

welcomeSessionApi.php

<?

session_start(); if(!session_is_registered("user")){ echo("Illegal Access");

exit;}echo("Welcome $user <br>"); echo("<a href=\"displaySessionApi.php\">"); echo("klik di sini untuk mengakses daftar kenalananda</a>");

?>

displaySessionApi.php

<?

session_start(); if(!session_is_registered("user")){ echo("Illegal Access");

exit; } $dbUser = "indarzah";

$dbPass = "test"; $db = "latihan"; $server = "localhost";

// membuat koneksi $koneksi = mysql_connect($server, $dbUser, $dbPass);

// memeriksa koneksi if(!$koneksi){

echo("Koneksi ke database gagal"); exit; }

// membuka database mysql_select_db($db);

// membuat query dan mengakses hasil $query = "SELECT * FROM UserData WHERE user='$user'";

Page 9: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

$hasil = mysql_query($query); echo($sessionId);

// menampilkan hasil echo("<table border=1>");

echo("<tr>"); echo("<td>NamaTeman</td>"); echo("<td>Keterangan</td>");

echo("</tr>"); while($row = mysql_fetch_array($hasil)){ echo("<tr>");

echo("<td>".$row["namaTeman"]."</td>"); echo("<td>".$row["keterangan"]."</td>"); echo("</tr>");

} echo("</table>"); ?>

1.6 Latihan

1. Coba jalankan script berikut ini :

Latihan 1 Check Box

<html> <body>

<form> I have a bike: <input type="checkbox" name="Bike">

<br> I have a car: <input type="checkbox" name="Car">

</form> </body>

</html> Latihan 2

Radio Button <html>

<body> <form>

Male: <input type="radio" checked="checked" name="Sex" value="male">

<br> Female: <input type="radio"

name="Sex" value="female"> </form>

<p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked

</p> </body>

</html>

Page 10: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

Latihan 3

Simple drop down box <html> <body>

<form> <select name="cars">

<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option>

<option value="audi">Audi</option> </select> </form>

</body> </html>

Latihan 4 Another drop down box

<html> <body>

<form> <select name="cars"> <option value="volvo">Volvo</option>

<option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option>

</select> </form>

</body> </html>

Latihan 5 Textarea <html>

<body> <textarea rows=”10” cols=”30) ini text area loh

</textarea> </body> </html>

Latihan 6 Button

<html> <body>

<form> <input type="button" value="Hello world!"> </form>

Page 11: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

</body> </html>

Latihan 7 Field set

<html> <body>

<fieldset> <legend> Health information:

</legend> <form> Height <input type="text" size="3">

Weight <input type="text" size="3"> </form> </fieldset>

<p> If there is no border around the input form, your browser is too old.

</p> </body>

</html> Latihan 8

Form with input fields and a submit button <html> <body>

<form name="input" action="html_form_action.asp" method="get">

Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name:

<input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit">

</form>

<p> If you click the "Submit" button, you will send your input to a new page called html_form_action.asp.

</p> </body>

</html> Latihan 9

Form with checkboxes <html> <body>

<form name="input" action="html_form_action.asp" method="get"> I have a bike:

<input type="checkbox" name="Bike" checked="checked"><br> I have a car: <input type="checkbox" name="Car">

<br>

Page 12: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

<input type="submit" value="Submit"> </form>

<p> If you click the "Submit" button, you send your input to a new page called

html_form_action.asp. </p>

</body> </html>

Latihan 10 Form with radio buttons

<html> <body>

<form name="input" action="html_form_action.asp" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked">

<br> Female: <input type="radio" name="Sex" value="Female">

<br> <input type ="submit" value ="Submit"> </form>

<p> If you click the "Submit" button, you will send your input to a new page called

html_form_action.asp. </p>

</body> </html>

Latihan 11 Send e-mail from a form <html>

<body> <form action="MAILTO:[email protected]" method="post" enctype="text/plain">

<h3>This form sends an e-mail to Unair.</h3> Name:<br> <input type="text" name="name"

value="yourname" size="20"> <br> Mail:<br>

<input type="text" name="mail" value="yourmail" size="20"> <br>

Comment:<br> <input type="text" name="comment" value="yourcomment" size="40">

<br><br> <input type="submit" value="Send"> <input type="reset" value="Reset">

</form> </body>

</html>

Page 13: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

2. Jalankan file berikut ini :

a. Koneksi : <?php $komputer = "localhost";

$user = "root"; $pass = ""; $database = "terserah";

$connect = mysql_connect ($komputer, $user, $pass); if ($connect) {

$buka = mysql_select_db ($database); if (!$buka) { die ("Koneksi ke database gagal");

} else { echo "Koneksi berhasil"; }

} else { die ("Server tidak terhubung"); }

?> b. User:

<?php

include "koneksi.php";

//mengambil data dari database $query = "SELECT * FROM anggota ORDER BY username"; $sql = mysql_query ($query);

echo "<table border= '1'>"; echo "<tr>";

echo "<th>No</th>"; echo "<th>Username</th>"; echo "<th>Nama</th>";

echo "<th>Email</th>"; echo "<th>Password</th>"; echo "<th>Alamat</th>";

echo "<th>Action</th>"; echo "</tr>"; $no = 0;

while ($hasil = mysql_fetch_array ($sql)) { $no++; $user = $hasil['username'];

$nama = $hasil['nama']; $email = $hasil['email']; $password = $hasil['password'];

$alamat = $hasil['alamat']; echo "<tr>"; echo "<td>$no</td>";

echo "<td>$user</td>"; echo "<td>$nama</td>"; echo "<td>$email</td>";

echo "<td>$password</td>"; echo "<td>$alamat</td>"; echo "<td>Detail | Edit | Delete</td>";

echo "</tr>"; }

echo "</table>";

Page 14: Modul 8 Session dan Form - web.unair.ac.id · PDF filePeserta membaca dan mempelajari materi praktikum sebelumnya ... Instruktur menerangkan dan menjelaskan teori dan cara ... dan

?>

c. Register: <?php //koneksi

include_once "koneksi.php"; //ambil data yang ada di form

if (isset($_POST['Daftar'])) { $user = $_POST['username']; $nama = $_POST['nama'];

$email = $_POST['email']; $password = $_POST['password']; $alamat = $_POST['alamat '];

//insert ke database $query = "INSERT INTO anggota

VALUES('$user','$nama','$email ','$password','$alamat')"; $sql = mysql_query ($query); if ($sql) {

echo "<h1>Data berhasil diinput</h1>"; } else { echo "Data gagal diinput";

} } ?>

<div id="content"> <h2>Halaman Kategori</h2> <form action="" method="post">

Username : <input type="text" name="username"/> <br/> Nama Lengkap : <input type="text" name="nama"/> <br/> Email : <input type="text" name="email"/> <br/>

Password : <input type="password" name="password"/> <br/> Alamat : <textarea cols="50" rows="4" name="alamat"></textarea> <br/> <input type="submit" name="Daftar" value="Daftar" />

</form> </div>

File database: create database terserah;

use terserah;

DROP TABLE IF EXISTS `anggota`;

CREATE TABLE IF NOT EXISTS `anggota` (

`username` varchar(20) collate latin1_general_ci NOT NULL,

`nama` varchar(40) collate latin1_general_ci NOT NULL,

`email` varchar(50) collate latin1_general_ci NOT NULL,

`password` varchar(60) collate latin1_general_ci NOT NULL,

`alamat` text collate latin1_general_ci NOT NULL,

PRIMARY KEY (`username`)

)