Tugas14 2103191002-IGedeRakaSadiantara Control Session & Cookies

TUGAS PRAKTIKUM ONLINE
PEMROGRAMAN WEB
LAPORAN RESMI DAY 14
CONTROL SESSION AND COOKIES
Oleh :
I Gede Raka Sadiantara
D3 Teknik Informatika A
2103191002
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
TAHUN AJARAN
2019/2020
Buat Halaman Login seperti gambar dibawah
Username dicocokkan dengan nama anda dan passwordnya dicocokkan dengan NRP anda,
bila sesuai maka akan tampil halaman dibawah ini.
Gunakan cookie untuk membuat aplikasi ini. Selama tidak logout, maka yang muncul adalah
tampilan dibawah, ketika sudah logout. Maka yang tampil adalah halaman login.
Contoh : Tampilan
JAWAB :
Jadi hal yang pertama kali siapkan untuk membuat skrip PHP itu adalah lingkungan
pengembangan webnya. Karena PHP tidak client side namun server side maka harus
menyiapkan webserver, php dan data basenya. Tapi untuk memudahkan nya kita disini
langsung menggunakan all in one packages application, dan kali ini kita menggunakan
XAMPP. Untuk menjalankan webnya nanti aplikasi dari XAMPP ini harus senantiasa berjalan.
Berikut adalah contoh tampilannya :
21031910002 | I Gede Raka Sadiantara 2

Kita dapat menggunakan module yang ada, dan kali ini saya menggunakan apache
sebagai webservernya. Pastikan untuk background dari body itu berwarna hijau yang
menandakan aplikasi sudah berjalan sempurna sehingga nantinya tidak ada masalah saat
menjalankan web.
Langkah selanjutnya adalah dengan membuat file php nya yang kali ini saya
menggunakan visual studio untuk menuliskan source codenya. Untuk script lengkap tidak saya
berikan disini karena sudah dicantumkan pada google class room. Disini saya akan
menjelaskan bagian perbagian dari codingan saya, di mulai dari bagian pertama yakni sebagai
berikut :
File login.php :
<html>
<title>Halaman LOGIN</title>
</html>
<body>
<h1>Halaman LOGIN</h1>
<form action="checklogin.php" method="post">

<table> <tr>
<td>
<label for="username">Username :</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>
<label for="password">Password :</label></td>
<td><input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> <input type="submit" name="login" value="LOGIN"></input></td>
</tr>
</table>
</form>
</body>
Analisa :
Hal yang pertama kali lakukan adalah membuat file yang digunakan untuk
menampilkan tampilan login dari user yang dapat dibuat melalu form sehingga bentuknya
seperti form. Untuk menandakan ini bagian dari script html yang digunakan untuk membuat
tampilan isi dari web maka saya memulainya dengan menggunakan tag <html> yang diakhir
dari script ini akan ditutup dengan slash html. Selanjutnya saya membuat tag tittle yang
didalamnya berisikan tulisan Halaman LOGIN yang ini akan dimunculkan pada bagian paling
atas web yang biasanya berada pada new tab. Tag title ini biasanya berada didalam tag head.
Saya lanjutkan dengan membuat isi dari web nya dengan menggunakan tag body.
Didalam tag ini saya mengawalinya dengan membuat header yang type pertama untuk judulnya
sehingga diketahui bahwa ini adalah halaman untuk login. Karena halaman ini dibuat untuk
login dan berbentuk form maka saya membuat tag form. Dengan attribute action dengan value
checklogin.php yang berfungsi memberikan aksi melalu file yang ditunjuk atau proses. Lalu
menggunakan method post yang digunakan untuk mengirim data ke server.
Lalu untuk membuat tampilan form lebih rapi dan mudah dibuat saya menggunakan tag
table dengan juga menggunakan elemennya yakni tr untuk membuat baris baru dan juga td
yang digunakan untuk membuat kolom baru. Pada baris pertama saya membuat tulisan
username yang menggunakan elemen label yang digunakan untuk menentukkan id dari form
control (element yang berkaitan dengan sebuah form) yang hendak diasosiasikan. Dilanjutkan
dengan membuat kolom inputan dengan tipe text, dan juga name & id dengan value adalah
username yang tujuannya agar dikenali oleh file lainnya untuk mengirim data. Begitu pula
juga dengan bagian password yang bedanya disini adala password menggunakan type
password, sehingga tulisan yang diinputkan tidak akan ditampilkan pada web namun yang
ditampilkan adalah bulat hitam perkarakternya.
Diakhir tentu saya membuat inputan yang bertype submit dengan name login lalu
valuenya juga LOGIN yang akan ditampilkan pada halaman web seperti bentuk tombol
bertuliskan LOGIN. Dan seperti biasa ditutup dengan slash table dan juga form lalu body.

Hasil Tampilan Web :
File checklogin.php :
<?php
$user=($_POST['username']);
$pass=($_POST['password']);
if ($user == "rakasadiantara" && $pass == "2103191002"){

setcookie("username", $user, time() + (86400 * 30), "/");
setcookie("passsword", $pass, time() + (86400 * 30), "/");
echo "<script>
document.location='prakform.php';
</script>";
}
else{
echo "<script>
alert('Username / Password salah, silahkan coba lagi !');
document.location='login.php';
</script>";
}
?>
Analisa :
Nah, pada bagian file ini saya membuat bagian php nya yang digunakan untuk
mengecek username dan password ke server, yang biasanya jika user lebih dari satu akan
dibuatkan database agar memudahkan untuk mengelolanya tapi kali ini kita hanya
menggunakan algoritma pengambilan keputusan. Saya awali dengan membuat tag php yang
dimulai dengan <?php dan ditutup dengan ?> lalu saya membuat variable terlebih dahulu untuk
menampung secara aman value dari data username dan juga password yang dikirimkan,
menggunakan syntax $_POST dengan nama masing variabelnya yakni user dan pass.
Lalu saya membuat bagian if else nya. Dimuali dari if yang parameternya jika variable
user bernilai sama dengan rakasadiantara dan pass berniali sama dengan 2103191002 maka

diakan melakukan : eksekusi fungsi setcookies. Cookies adalah file teks yang berisi data
tertentu yang disimpan di browser. Dengan argument yang dimiliki dari cookies ini
sebenearnya ada 6. Cookies yyang pertama saya beri nama username dan yang kedua adalah
password. Valuenya adalah isi dari variable user dan juga pass. Lalu saya setting cookies itu
akan expire atau kadaluarsa dalam 30 hari. “/” Berarti bahwa cookie tersedia di seluruh situs
web (jika tidak, pilih direktori yang Anda inginkan). Lalu saya menggunakan fungsi echo
dengan element <script> yang digunakan untuk menulis script, atau lebih tepatnya adalah
untuk menyisipkan script (seperti JavaScript) pada sisi client, baik itu ditulis secara langsung
di dalam element <script>, maupun merujuk sumber file eksternal dengan attribute src. Yang
isinya adalah untuk menampilkan form dengan menggunakan document.location.
Lalu diakhiri dengan else atau jika nilainya tidak sesuai dengan if yang sebelumnya
maka akan dilakukannya pengeksekusian fungsi echo yang didalamnya berisi kan elemen script
lalu terdapat alert yang digunakan untuk menampilkan text box sebagai peringatan yang akan
muncul sesuai dengan tulisan yang sudah saya cantum kan pada script. Lalu dia akan kembali
ke tampilan dari login.
Hasil Tampilan :
Jika Username dan Password BENAR

Jika Username dan Password yang dimasukkan salah :

Yang jika kita klik ok maka akan tampil seperti dibawah ini atau kembali lagi ke halaman login:
File prakform.php
<html>
<head>
<title>Formulir DATA MAHASISWA</title>
</head>
<body>
<form name="form1" method="POST" action="cookiesform.php">
<table border="0">
<tr>
<td colspan="6"><h3><center> Homepage DATA ENTRY </center></h1
></td><br>
</tr>
<tr>
<td colspan="6"><h2><center> FORMULIR DATA MAHASISWA </center>
</h1></td><br>
</tr>
<tr>
<td><b>1. Nama :</b> </td>
<td colspan="5"><input name="nama" type="text" id="nama" value
="<?php echo $_COOKIE['username'] ?>" ></td>
</tr>
<tr>
<td><b>2. NRP : </b></td>
<td colspan="5"><input name="nrp" type="text" id="nrp" value="
<?php echo $_COOKIE['cookie_pass'] ?>"></td>
</tr>
<tr>
<td><b>3. Kelas :</b> </td>

<td colspan="5"><input name="kelas" type="text" id="kelas" ></
td>
</tr>
<tr>
<td><b>4. Jenis Kelamin :</b> </td>
<td><input type="radio" name="gender" value="Laki-laki">Laki-
Laki</td>
<td><input type="radio" name="gender"value="Perempuan">Perempu
an</td>
</tr>
<tr>
Analisa :
Kita tahu bahwa Struktur umum dari html itu sendiri adalah sebagai berikut :
<html>
<head>
</head>
<body>
</body>
</html>
Maka dari itu saya membuat struktur awal seperti itu dahulu, saya mengawali listing
program saya tersebut dengan tag html yang tujuannya adalah memberi tahu browser bahwa
yang ada dikedua tag <html> dan </html> adalah document dari html.
Bentuk penulisan HTML secara umum terdiri dari elemen, attribute, dan value serta
kali ini : Yang tulisan berwarna biru merupakan elemennya. Lalu untuk tulisan yang berwarna
hijau merupakan attribute dan yang berwarna orange merupakan value atau nilainya.
Selanjutnya terdapat tag <head> yang biasanya di tag ini akan memuat tag <tittle> yang
berfungsi untuk menampilkan judul dari halaman web. Dan nanti jika kita lihat dibrowser akan
ditampilkan pada bagian tab. Dan seperti biasa tag dari header akan ditutup dengan tag
</head>.
Pada bagian selanjutnya saya gunakan Tag <body> berfungsi untuk menampilkan text,
image, link, serta semua yang akan kita tampilkan di web page. Sebuah form didefinisikan
dengan tag <form>. <form> …</form>. Disini saya meggunakan method yakni post dengan
action yakni regex.php yang nantinya source phpnya terdapat pada file tersebut dan dari
sanalah prosesnya akan berjalan. <table> element merepresentasikan data dengan lebih dari
satu dimensi dalam bentuk sebuah tabel (table). Diawal saya menggunakan block level h2 dan
h3 untuk membuat judul dari form dan juga menggunakan colspan agar tersedia ruang untuk
menuliskan judul tersebut. Dan tag center yang berguna untuk menaruh tulisan berada di tengah
tengah table atau form.
Lalu saya menggunakan tag <tr></tr> yang digunakan untuk menambah baris pada
table, sehingga nanti akan muncul baris untuk bagian nama. Didalam tag <tr> saya memberikan
2 tag <td> yang bertujuan untuk membuat 2 kolom dalam satu baris nama itu, kolom satu saya
beri tulisan nama, lalu untuk kolom 2 saya menggunakan tag input dengan attribute type dengan
value text yang bertujuan untuk membuat kotak inputan untuk teks saja. Lalu untuk kolom ini
saya juga menggunakan attribute colspan yang bertujuan untuk menggabungkan beberapa
kolom menjadi satu. Lalu seperti biasa saya menutup tag tag tersebut dengan </(tag
yangdigunakan)>. Lalu untuk setiap informasi pada form saya tuliskan dengan huruf cetak
tebal agar memudahkan para user untuk membaca form yang kita buat dengan menggunakan
tag <b>.
Untuk informasi nama, NRP, dan Kelas mirip dengan yang saya jelaskan diatas. Namun
untuk iinformasi jenis kelamin sedikit berbeda dengan sebelumnya. Tepatnya pada bagian
inputnya, disini saya menggunakan type radio button. Sehingga nanti user hanya bisa memilih
satu dari pilihan yang ada.
Untuk Tambahannya disini adalah pada bagian nrp dan juga nama saya
tambahkan attribute value yang isinya adalah <?php echo $_COOKIE[‘username’] ?>
yang tujuannya adalah digunakan untuk membaca data cookie yang berasal dari
sebelumnya yakni checklogin.php. sehingga setelah user berhasil login otomatis dari
kolom inputan nama dan nrp sudah terisi data cookienya.
<tr>
<td><b>5. Agama :</b> </td>
<td colspan="5"> <select name="agama" id="agama">
<option name="agama1" value="Islam" id="agama1">Islam<
/option>
<option name="agama2" value="Kristen" id="agama2">Kris
ten</option>
<option name="agama3" value="Hindu" id="agama3">Hindu<
/option>
<option name="agama4" value="Budha" id="agama4">Budha<
/option>
</select>
</td>
</td>
</tr>
<tr>
<td><b>6.Tempat/Tgl Lahir:</b> </td>
<td colspan="5"><input name="tempat" type="text" id="tempat">/
<input name="tanggal" type="text" id="tanggal"></td>
</tr>
<tr>

<td><b>7. Alamat : </b></td>
</tr>
<tr>
<td></td>
<td><textarea name="alamat" id="alamat"></textarea> </td>
</tr>
<tr>
<td><b>8. Pendidikan : </b></td>

</tr>
<tr>
<td></td>
<td > A. SD : </td>
<td colspan="5"><input name="sd" type="text" id="sd" ></td>
</tr>
<tr>
<td></td>
<td > B. SMP :</td>
<td colspan="5"><input name="smp" type="text" id="smp" ></td>
</tr>
<tr>
<td></td>
<td > C. SMA : </td>
<td colspan="5"><input name="sma" type="text" id="sma" ></td>
</tr>
<tr>
<td><b>9. Email :</b> </td>
<td colspan="5"><input name="email" type="text" id="email" ></
td>
</tr>
<tr>
<td><b>10. Homepage : </b></td>
<td colspan="5"><input name="homepage" type="text" id="homepag
e"></td>
</tr>
Hampir sama dengan bagian sebelumnya disini saya menggunakan tag tr dan td untuk
membuat baris dan kolomnya. Perbedaanya kembali terletak pada jenis inputan pada informasi
yang kelima. Disini saya menggunakan combo box. Dengan tag yang digunakan yakni
<select>, dan untuk isi dari boxnya tersebut kita dapat isi dengan tag option.
Untuk informasi yang keenam cara pembuatannya sama dengan pembuatan informasi
nama, hanya menggunakan tag tr dan td serta untuk type inputannya adalah text box.
Lalu untuk informasi yang ketujuh, yang membedakannya adalah type inputannya
yakni ia menggunakan textbox multiline, sehingga kita bisa menginputkan beberapa baris
kalimat atau informasi pada box yang disediakan. Untuk tag nya sendiri kita bisa menggunakan
tag <textarea>

Disini untuk informasi 9 dan 10 pembuatannya sama dengan pembuatan form informasi
yang nomer satu yakni bagian nama. Disini saya hanya menggunakan tag td dan tr untuk
membuat baris dan juga kolom pada formulir, lalu saya juga menggunakan colspan dengan
value lima yang digunakan untuk menggabungkan 5 kolom menjadi satu, dan type dari inputan
nya adalah text box.
Yang berbeda disini adalah bagian no. 8, karena disini terdapat penjabaran dari
informasi riwayat Pendidikan. Agar form riwayat Pendidikan disamping kanannya kosong kita
bisa memberikan kolom kosong sehingga disamping tulisan Pendidikan tidak terdapat text box.
Lalu untuk memberikan jarak antara batas kiri dengan tulisan sd smp smanya kita hanya perlu
membuat kolom yang kosong sehingga tulisan dan text boxnya dapat lebih menjorok ke tengah.
<tr>
<td><b>11. Hobby :</b> </td>
</tr>
<tr>
<td></td>
<td><textarea name="hobby" id="hobby"></textarea> </td>
</tr>
<tr>
<tr>
<td><b>12. Interest : </b></td>
<td><input name="minat1" type="checkbox" id="minat1" value="ch
eckbox">Komputer</td>
eckbox">Sport</td>
eckbox">Traveling</td>
eckbox">Writing</td>
eckbox">Reading</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="SIMPAN"> </td>
<td><input type="submit" name="logout" value="LOGOUT" > </td>
</tr>
</table>
<br><br>
</form>
</body>
</html>
Untuk hobby sama pembuatannya dengan alamat yang ada pada bagian sebelumnya,
menggunakan tipe inputan yakni text box. Namun pada bagian ini yang membedakan adalah

pada bagian interst menggunakan inputan type check box dengan menggunakan attribute type
dan value : checkbox.
Lalu untuk bagian bawah yang mirip seperti button itu kita bisa menggunakan type
inputan yakni submit dengan value sesuai dengan tulisan yang kita ingin tampilkan , disini saya
memberi tulisan/ valuenya yakni SIMPAN & LOGOUT.
File cookiesform.php
<?php
if(!isset($_COOKIE['username']) && !isset($_COOKIE['password']))
header('Location: login.php');
if(isset($_POST['logout'])){
setcookie("username", "", time() - 3600, "/");
setcookie("password", "", time() - 3600, "/");
header('Location: login.php');
}
?>
Analisa :
Saya mulai dengan menggunakan tag php yakni <?php dan ditutup dengan ?>. lalu saya
membuat algoritma if dengan maksud if bagian pertama adalah jika cookies username dan
passwordnya belum ke set maka akan otomatis ke halaman login.php
Bagian if kedua dimaksudkan jika tombol logout diklik maka cookies nya akan
dihapus, lalu nilainya diganti "". Waktunya juga dikurangi time()-3600 detik. Yang pada
dasarnya semua ini digunakan untuk menghapus cookie dan membuat cookie tersebut expired.
Selanjutnya akan otomatis menuju halaman dari login.php dikarenakan harus login terlebih
dahulu sebelum mengisi biodatanya

Tampilan Hasil :
Nama dan Nrp sudah otomatis teriisi

Jika kita klik Logout maka akan kembali ke halaman login.

Tugas14 2103191002-IGedeRakaSadiantara Control Session & Cookies

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas14 2103191002-IGedeRakaSadiantara Control Session & Cookies

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS PRAKTIKUM ONLINE

LAPORAN RESMI DAY 14

CONTROL SESSION AND COOKIES

I Gede Raka Sadiantara

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

21031910002 | I Gede Raka Sadiantara 2

<form action="checklogin.php" method="post">

21031910002 | I Gede Raka Sadiantara 4

if ($user == "rakasadiantara" && $pass == "2103191002"){

21031910002 | I Gede Raka Sadiantara 5

Jika Username dan Password BENAR

21031910002 | I Gede Raka Sadiantara 6

21031910002 | I Gede Raka Sadiantara 7

21031910002 | I Gede Raka Sadiantara 8

21031910002 | I Gede Raka Sadiantara 10

<td><b>8. Pendidikan : </b></td>

21031910002 | I Gede Raka Sadiantara 11

21031910002 | I Gede Raka Sadiantara 12

21031910002 | I Gede Raka Sadiantara 13

Nama dan Nrp sudah otomatis teriisi

21031910002 | I Gede Raka Sadiantara 14

21031910002 | I Gede Raka Sadiantara 15

Anda mungkin juga menyukai