LAPORAN AKHIR

PHP PEMROGRAMAN BERBASIS WEB

NAMA

: PRINCESS GLADYS INGRID

NPM

: 15111582

KELAS

: 4 KA 23

TANGGAL PRAKTIKUM : SELASA, 21 APRIL 2015

MATERI PRAKTIKUM : INTRO
SHIFT

: 2 (09.30 11.30)

KETUA ASISTEN

:
Paraf

LABORATORIUM SISTEM INFORMASI

UNIVERSITAS GUNADARMA
ATA 2015

Membuat Halaman Login dengan PHP

(Tanpa Database)
Pada hari Selasa minggu lalu, tepatnya pada tanggal 21 April 2015
pukul 09.30-11.30 WIB, kelas 4ka23 mengikuti kelas pertemuan pertama
praktikum mata kuliah Pemrograman Berbasis Web di Laboratorium Sistem
Informasi (LABSI) Universitas Gunadarma di ruang E512. Ini adalah LA
(laporan akhir) membuat halaman Login dengan bahasa PHP tanpa database.
Maka disini akan dibahas cara membuat halaman login tersebut.
Pertama-tama, sediakan perangkat yang diperlukan, seperti:
1. Hardware
2. Software

: 1 buah PC atau Laptop

: OS Windows 7, Notepad++ atau Notepad, Browser (Misal:

Google Chrome) XAMPP, dan Adobe Dreamweaver jika perlu.

1. MEMBUAT TAMPILAN LOGIN

Setelah keperluan diatas dipersiapkan, buka XAMPP Control Panel
dengan cara sebagai berikut:
1. Arahkan kursor ke notification area pada sebelah pojok kanan
desktop taskbar. Klik kanan icon xampp control. Maka akan
muncul tampilan berikut ini. Klik Start pada Apache dan MySQL.

Gambar 1&2. XAMPP-Control pada Notification Area.

2. Cara lainnya adalah dengan mengkil Windows Start-lalu search
XAMPP. Klik XAMPP Control Panel. Berikut tampilannya.

Gambar 3. XAMPP Control Panel Search pada Start Windows

Setelah itu, maka akan muncul jendela XAMPP Control
Panel berikut ini. Klik tombol Start pada Apache dan MySQL.

Gambar 4&5. XAMPP CP sebelum(kiri) dan sesudah(kanan) setting

Selanjutnya, buat folder labsi pada c-xampp-htdocs.

Gambar 6. Folder Labsi pada c-xampp-htdocs

Disini saya membuat folder baru, bernama 1login khusus untuk LA
pertemuan pertama membuat halaman login.

Gambar 7. Folder 1login di dalam folder Labsi

Lalu simpan file-file yang diperlukan pada folder 1login tersebut. Disini
saya menyimpan 1 gambar yang akan dipakai sebagai background dan 1
gambar yang akan dijadikan tombol login.

Gambar 8. Isi folder 1login (dengan 2 file image)

Selanjutnya buka editor Notepad++ dengan cara berikut ini:
1. Klik windows Start Search Ketik Notepad, maka akan muncul hasil
berikut ini.

Gambar 9. Windows Start Searching Notepad

2. Bisa juga dengan melakukan double click pada icon shortcut Notepad++
pada desktop.

Gambar 10. Shortcut Icon Notepad++ pada Desktop

Maka akan muncul jendela Notepad++ berikut ini. Biasanya tampilan
text areanya warna putih, tapi disini sudah diganti setting tampilannya.

Gambar 11. Tampilan Jendela Notepad++

Gambar 12. Save As..

Gambar 13. Simpan file login.php

Langkah selanjutnya adalah membuat form tampilan login. Untuk
mempermudah, dapat menggunakan Adobe Dreamweaver CS6. Pertamatama, buka aplikasi Adobe DW CS6 sehingga muncul jendela loading
berikut ini.

Gambar 14. Jendela Loading Adobe Dreamweaver CS6

Setelah loading, maka akan muncul jendela awal Adobe Dreamweaver

CS6, maka akan muncul jendela seperti gambar berikut. Untuk memulai,
dapat langsung memilih PHP, namun karena file login.php telah dibuat di
notepad++, maka cukup klik file-open file- cari direktori penyimpanan
login.php dan buka file tersebut.

Gambar 15. Tampilan Awal Adobe Dreamweaver CS6

Kali ini akan dibuat form login dengan menggunakan table dan form
fieldset, legend dan text field. Langkah awal untuk tampilan desain login

tersebut adalah dengan membuat table. Namun sebelumnya saya membuat

tampilan header terlebih dahulu. Caranya adalah dengan mengklik inserttable- isi row=1 dan column=1.

Gambar 16. Setting Tabel untuk Header

Berikut ini adalah tampilan koding dan header yang telah dibuat dengan
table tadi dengan isi LOGIN LABSI yang diatur dengan rata tengah.

Gambar 17. Tampilan Header

Selanjutnya buat kotak fieldset dengan legend LOGIN USER

Gambar 18. Setting Fieldset

Setelah itu, kali ini membuat table untuk login dengan row=2 untuk
username dan password, dan column=3. Klik insert-table lalu setting row dan
columnnya.

Gambar 19. Settingan Tabel Login

Lalu buat form input text field dengan cara klik insert-form-text field.
Buat untuk kolom isian username dan kolom password.

Gambar 20. Settingan Awal Text Field

Setelah itu, jalankan yang telah dibuat pada browser. Caranya adalah
dengan menuliskan alamat localhost sesuai direktori file php. Misalnya:
http://localhost/labsi/1login/login.php. berikut adalah tampilan rancangan
awal yang telah dibuat.

Gambar 21. Tampilan pada browser

Lalu ubah tampilan awal menjadi lebih menarik dengan mensetting

background, mengganti font teks, mengubah warna table, dan mengganti
tombol submit dengan gambar yang telah disediakan di awal persiapan folder.
Berikut adalah tampilan yang sudah diedit.

Gambar 22. Tampilan awal login

Gambar 23. Tampilan berhasil login.

Gambar 24. Tampilan Logout

Gambar 25. Tampilan Login dengan Username yg salah

Gambar 26. Tampilan Output Jika Username Salah

Gambar 27. Tampilan Login dengan Password Salah Input

Gambar 28. Output jika Password Salah

Gambar 29. Coding login.php pada notepad++ (Bagian 1&2)

Ket: Bagian 1=baris 1-35 (kiri) & Bagian 2=baris 35-70 (kanan)

Gambar 30. Coding login.php pada notepad++ (Bagian 3&4)

Ket: Bagian 3=baris 1-35 (kiri) & Bagian 4=baris 35-70 (kanan)

Gambar 31. Tampilan Kodingan logout.php pada notepad++

2. Penjelasan Logika Program PHP

A.

Logika PHP login.php

Berikut ini adalah potongan program baris 1-4 dari file login.php. Baris
pertama merupakan tag pembuka <html>. Baris ke 2 adalah tag
pembuka <head> yang ditutup di baris ke-4 </head>. Sedangkan pada
baris ke-3 adalah tag pembuka dan penutup <title></title> dengan judul
LA 1 LOGIN.

Baris ke-6 adalah tag pembuka <body> dengan settingan latar belakang
menggunakan file bernama background.jpg. Sedangkan pada baris ke-7
adalah

tag

<font>

dengan

settingan

tulisan

menggunakan

tipe

jokername dengan warna <color> dan besar <size> yang ditentukan.

Disini juga ada tag pembuka <center>.

Pada baris ke-8 terdapat sintaks pembuka bahasa PHP <?php . Pada
baris ke-10 terdapat fungsi memulai session. Sedangkan pada baris ke12 dan 13, adalah fungsi string untuk data username dan password.

Baris ke-16 adalah logika jika user mengklik tombol login. Baris ke 1921 adalah kondisi untuk mengecek kebenaran isi yang di input dengan.
Sedangkan baris ke 24-25 adalah set definisi baru untuk Session.

Baris ke 28-30 adalah untuk menampilkan output jika user berhasil

login dengan fungsi echo dengan legend dan fieldset. Baris ke-32 adalah
menampilkan LOGOUT pada halaman yang sama dengan berhasil login
yang jika diklik akan diarahkan ke halaman logout.php dengan sintaks
<a href>. Sedangkan baris ke 36-39 adalah logika kesalahan jika input
username salah.

Baris 42-45 adalah kondisi ke-2 yang akan ditampilkan jika Password
yang diinput salah. Sedangkan baris 48-52 adalah kondisi lainnya yang
akan muncul jika terdapat kesalahan login lainnya. Lalu pada baris ke55 adalah penutup sintak PHP, dan baris ke-56 adalah penutup dari
sintaks awal PHP sebelumnya.

B.

Logika PHP logout.php

Pada kali ini akan dijelaskan logika dari logout.php berikut. Pada baris

ke-8 adalah tag awal dari php. Baris ke-10 adalah definisi dari awal session.
Baris ke 13-15 adalah sintaks sission setelah user berhasil logout dari
halaman sebelumnya. Pada baris ke-15 terdapat teks <<Back yang jika diklik
akan mengarahkan kembali ke halaman login.php (halaman awal login).
Sedangkan baris ke-16 adalah penutup dari sintaks PHP.

SEKIAN