Dokumen ini membahas tentang pembuatan aplikasi website tentang "Sisi Lain Pelajar" menggunakan software XAMPP dan Adobe Fireworks. Terdiri dari empat bab yang membahas instalasi XAMPP, rancangan aplikasi berupa flowchart dan layout, pembuatan aplikasi website meliputi pembuatan menu bar, berbagai page, dan kategori, serta pembuatan database menggunakan PHPMyAdmin dan PHP.

1. TUGAS LAPORAN PROYEK APLIKASI
“SISI LAIN PELAJAR”
Oleh
Zakia Nadalina
NISN : 9974996873
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

2. DAFTAR ISI
Halaman
KATA PENGANTAR................................................................................................v
BAB I. INSTALASI SOFTWARE XAMPP.............................................................1
1.1. XAMPP .............................................................................................................3
BAB II. RANCANGAN APLIKASI.......................................................................5
2.1. Flowchart...........................................................................................................5
2.2. Layout.................................................................................................................6
BAB III. PEMBUATAN APLIKASI WEBSITE......................................................7
3.1. Membuat Menubars didalam Aplikasi Fireworks.......................................7
3.2. Membuat Page 1 (HOME)..............................................................................15
3.3 Membuat Page II (Profile)............................................................................21
3.4 Membuat page III (Blog)................................................................................22
3.5 Membuat Page IV (Photos)............................................................................23
3.5 Membuat Page V (Contact)...........................................................................25
3.6 Membuat Page Categories “Pelajar Cemerlang”........................................26
3.7 Membuat Page Categories “Pelajar Teladan”.............................................26
3.8 Membuat Page Categories “Sopan Santun”................................................27
3.9 Membuat Page Categories “Sopan Santun”................................................30
BAB IV Membuat Database Didalam Web.........................................31
4.1 Membuat database diPHPMyAdmin.............................................................32
4.1 Membuat Koneksi .........................................................................................35

3. KATA PENGANTAR
Puji syukur saya panjatkan ke hadirat Allah SWT, dengan atas rahmat dan karunia
Nya saya dapat menyelesaikan Laporan ini. Shalawat dan salam tercurah kepada
Rasulullah Muhammad SAW beserta keluarganya.
Selama melaksanakan tugas akhir ini, saya mendapat bantuan dan dukungan dari
berbagai pihak. Untuk itu, penulis ingin mengucapkan terima kasih kepada :
1. Ibu Inne Ria Abidin selaku pembimbing I, yang telah memberikan
bimbingan dan semangat dalam menyelesaikan ini.
2. Bapak Nanang Suwandi selaku pembimbing II, yang telah mencurahkan
perhatian dan waktunya yang demikian banyak dalam penyelesaian tugas
akhir ini.
3. bapak, ibu, kakak-kakak dan adik-adik tercinta, beserta seluruh keluarga
yang senantiasa memberikan semangat dan do’anya.
4. dan semua pihak yang membantu, yang tidak dapat penulis sebutkan satu
persatu.
Saya menyadari bahwa Laporan ini bukanlah tanpa kekurangan, untuk itu kritik
dan saran sangat diharapkan.
Akhir kata, semoga Laporan ini dapat bermanfaat bagi para pembacanya.
Amin...
Depok, 24 Mei 2013
Zakia Nadalina

4. BAB I
INSTALASI SOFTWARE XAMPP
1.1. XAMPP
XAMPP merupakan sebuah aplikasi dimana bila kita ingin membuat sebuah
aplikasi WEB kita membutuhkan aplikasi tersebut, dan kali ini saya akan
menjelaskan cara menginstal Xampp untuk Laptop/PC anda .
Cara Menginstall XAMPP
1. Download Xampp di website yang kamu ketahui softwarenya berkualitas,
jangan asal mendownload software diwebsite yang tidak kalian kenal.
2. Setelah di download, instal Xampp tersebut
3. Pilih bahasa, setalah itu klik OK
4. Pilih folder tujuan install XAMPP, lalu NEXT
5. Pada window XAMPP options, kamu akan diminta memilih beberapa
options seperti XAMPP desktop, XAMPP start menu, dan XAMPP
section. Abaikan saja pilihan tersebut, lalu klik INSTALL
6. Setelah instalasi selesai, jalankan XAMPP
7. Lalu klik Start Apache dan Start MySQL

5. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan
browser sesuai selera anda. Membuka localhost gratis, tanpa harus koneksi
ke internet kita pun bisa menjalankan localhost tersebut.

6. BAB II
RANCANGAN APLIKASI
2.1. Flowchart
Flowchart merupakan langkah awal membuat program. Dengan adanya
Flowchart urutan proses kegiatan lebih jelas. Jika ada penambahan proses maka
dapat dilakukan lebih mudah. Setelah Flowchart selesai disusun, selanjutnya
pemrograman (programmer) menerjemahkannya program dengan bahasa
pemrograman.
Namun secara garis besar, setiap pengolahan selalu terdiri dari tiga bagian
utama, yaitu:
4 Input ialah bahan mentah
5 Proses pengolahan
6 Output ialah bahan jadi
Untuk mengolah data dengan komputer, dapat dirangkum urutan dasar untuk
pemecahan suatu masalah, yaitu:
1. START : Berisi instruksi untuk persiapan peralatan yang diperlukan
sebelum menangani pemecahan masalah.
2. READ : Berisi instruksi untuk membaca data dari suatu peralatan input.
3. PROCESS : Yang berkaitan dengan pemecahan persoalan sesuai dengan
data yang dibaca.
4. WRITE : Berisi instruksi untuk merekan hasil kegiatan ke peralatan
5. END : Mengakhiri kegiatan pengolahan.

7. Flowchart Web Saya
2.2 Layout
Sebelum kita membuat Web, terlebih dahulu kita membuat rancangannya.
Dan kali ini saya akan membuat sebuah rancangan (Layout) web saya, inilah
hasil rancangan web saya :

8. BAB III
PEMBUATAN APLIKASI WEBSITE
3.1. Membuat Menubars didalam Aplikasi Fireworks
Kali ini saya akan membuat aplikasi web menggunakan fireworks untuk
menubarsnya. Dan berkut adalah langkah-langkahnya :
1. Pertama, jika anda sudah mempunyai aplikasi Adobe fireworks, maka
buka aplikasi tersebut ya kawan :
2. Kedua, bila aplikasi tersebut sudah tampil, maka akan muncul seperti
gambar dibawah ini :

9. 3. Setelah muncul klik File, lalu New :
4. Setelah itu tentukan ukuran yang kalian inginkan, kali ini saya akan
memakai ukuran 2000 x 1000 pixels.

10. 5. Setelah itu maka akan muncul seperti gambar berikut ini :
6. Cari common Library yang berada tepat disebelah kanan aplikasi
fireworks tersebut.

11. 7. Jika sudah ketemu pilih menubars sesuai selera anda.
8. Setelah itu drag menubars tersebut, dan masukkan kedalam canvas
yang ada disebelahnya, maka hasilnya akan seperti gambar berikut :

12. 9. Jika anda ingin mengubahnya maka klik “Double klik” didalam
menubars tersebut, saya akan mengubah nama-nama menubars dari
yang aslinya menjadi seperti berikut :
10. Jika anda ingin membuat link didalamnya maka cari tulisan web yang
berada di toolbars sebelah kiri fireworks, dan klik icon yang saya beri
tanda merah, seperti berikut ini :

13. 11. Setelah itu blok didalam menubars yang anda ingin beri link, seperti
berikut ini :
12. Dan tulis alamat websitenya, dikotak yang bertulisan “Link”.

14. 13. Jika ada lima menubars diweb anda, maka lima-limanya anda bisa
memberikan linknya.
14. Setelah sudah semua diberi link, maka selanjutnya klik “FILE”, lalu
klik “Eksport”

15. 15. Setelah itu tulis dengan judul “menubars.html”, lalu klik “Save”
16. Maka hasilnya akan seperti gambar berikut

16. 3.2 Membuat Page 1 (HOME)
1. Menubars yang tadi kalian buat sudah selesai, dan akan memunculkan
script seperti dibawah ini :
2. Ganti Title yang ada di script tersebut sesuai keinginan anda, didalam
web saya ini, saya akan memberikan Title “Web Zakia Nadalina”, dan
hasilnya adalah seperti dibawah ini :

17. 3. Lalu tulis Judul web yang anda inginkan, didalam web saya ini saya
akan memberikan judul “SISI LAIN PELAJAR”, hasilnya seperti
berikut :
• Script
• Hasil :

18. 4. Setelah itu saya akan membuat tips” menjadi seorang pelajar di pojok
sebelah kiri web saya, seperti berikut :
• Script
• Hasil

19. 5. Lalu aku akan membuat isi dari home saya.Berikut adalah Script dan
hasilnya :
• Script
• Hasil

20. 6. Setelah itu saya membuat categories disebelah kanan web saya.
Berikut adalah script dan hasilnya :
• Script
• Hasil

21. 7. Lalu saya akan membuat footer dibawahnya, berikut adalah script dan
hasilnya :
• Script
• Hasil

22. 3.3 Membuat Page II (Profile)
Setelah home selesai, kita lanjutkan ke page berikutnya, yakni
“PROFILE”. Berikut adalah script dan hasilnya :
• Script
• Hasil

23. 3.4 Membuat page III (Blog)
Jika “Profile” pun sudah selesai, maka page selanjutnya adalah blog.
Berikut adalah scriptnya :
• Script

24. • Hasilnya :
3.5 Membuat Page IV (Photos)
1. Next Page Photos. Berikut adalah scriptnya :
• Script

25. • Hasilnya adalah seperti berikut :
3.6 Membuat Page V (Contact)
1. Next Page “Contact” dan berikut adalah scriptnya :
• Script

26. • Hasilnya :
3.7 Membuat Page Categories “Pelajar Cemerlang”
1. Selanjutnya adalah page Pelajar Cemerlang. Berikut adalah
scriptnya :

27. 2. Dan hasilnya adalah seperti ini :

28. 3.8 Membuat Page Categories “Pelajar Teladan”
1. Dan sekarang adalah script untuk page Pelajar Teladan

29. 2. Hasilnya adalah sebagai berikut :

30. 3.9 Membuat Page Categories “Sopan Santun”
1. Next. Page Sopan santun. Berikut adalah scriptnya :
2. Dan hasilnya adalah sebagai berikut :

31. 3.10 Membuat Page Categories “Pelajar Berprestasi”
1. Dan Next Page adalah “Pelajar Berprestasi”. Berikut adalah
scriptnya :
2. Dan hasilnya adalah sebagai berikut :

32. BAB IV
Membuat Database Didalam Web
4.2 Membuat database diPHPMyAdmin
1. Jika Anda ingin membuat suatu database maka pertama kali kalian buka
localhost/phpmyadmin/

33. 2. Dan selanjutnya akan tampil page seperti berikut :
3. Lalu tulis Script “create database biodata_pelajar” lalu klik “Go”

34. 4. Lalu akan muncul database disebelah kanannya.
5. Setelah itu klik “SQL” dan tulis script dibawah ini :

35. 6. Maka hasilnya akan seperti berikut :
4.3 Membuat Koneksi
1. Pertama tulis script PHP seperti berikut :

36. 2. Lalu simpan dengan format “Php” :
3. Setelah koneksi selesai dibuat. Maka buat prosesnya. Berikut adalah
scriptnya :

37. 4. Simpan dengan format “PHP” juga.
5. Setelah proses selesai dibuat. Maka buat outputnya. Berikut ini adalah
scriptnya :

39. 6. Simpan pula dengan script “PHP”.
7. Hasil dari Input-Proses-Outputnya bisa dilihat dari gambar berikut.
• Pertama buka Blog diwebsite ini. Dan isikan biodata anda.
• Setelah itu klik Submit. Maka akan muncul seperti gambar
berikut :

40. • Lalu klik “Ok” maka akan masuk ke page selanjutnya
~ Biodata anda pun sudah tersimpan. Silahkan bergabung ~
~SELESAI~