Rangkuman dokumen ini adalah: 1. Dokumen ini membahas tentang pembuatan aplikasi berbasis web bertema "Teens Go Green" menggunakan software XAMPP, Adobe Fireworks, dan Adobe Photoshop. 2. Langkah-langkah pembuatan mulai dari instalasi software, perancangan aplikasi, pembuatan desain antarmuka pengguna, hingga pengembangan aplikasinya. 3. Aplikasi ini terdiri dari beberapa halaman yaitu Home, About

1. TUGAS LAPORAN PROYEK APLIKASI
”TEENS GO GREEN”
Oleh
PUTRI MAULIDA
NISN : 9976896733
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

2. DAFTAR ISI
Halaman
KATA PENGANTAR............................................................................................v
BAB I. INSTALASI SOFTWARE ............................................1
1.1. XAMPP ............................................................................................................1
1.2. Editor gambar (Adobe Photoshop)................................................................2
BAB II. RANCANGAN APLIKASI....................................................................13
2.1. Flowchart.........................................................................................................18
2.2Layout.................................................................................................................19
BAB III. MEMBUAT RANCANGAN APLIKASI ..............................25
3.1 Membuat Menubars DiFireworks............................................26
3.2. Membuat Categories menggunakan Fireworks.....................27
3.3 Membuat Background Menggunakan Adobe Photoshop CS5
BAB IV MEMBUAT APLIKASI BERBASIS WEB..........................................29
4.1 Membuat Page I (Home)..........................................................30
4.2 Membuat Page II (About)........................................................31
4.3 Membuat Page IV (Galery)....................................................32
4.4 Membuat Page III (Profile).....................................................33
4.5 Membuat Categories “Pengertian Reuse”.............................34
4.6 Membuat Categories “Pengertian reduse”............................35
4.7 Membuat Categories “Pengertian Recycle”..........................36

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
Putri Maulida

4. BAB I
INSTALASI SOFTWARE
1.1. XAMPP
XAMPP kepanjangan dari X yang berarti cross platform, A yang
berarti Apache, M yang berarti MySQL, P yang berarti PHP, dan P
yang satu lagi yaitu Perl. XAMPP adalah sebuah installer web server
yang berisi Apache dan MySQL dan mendukung program PHP dan
Perl .
Cara Menginstall XAMPP
1. Download XAMPP untuk Windows di
http://www.apachefriends.org/en/xampp-windows.html, pilih basic
package untuk instalasi standar
2. Setelah di download, jalankan installer XAMPP
3. Pilih bahasa, setalah itu klik OK
4. Pilih folder tujuan install XAMPP, lalu NEXT

5. 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
8. Web yang kita buat, akan beralamat di http://localhost, akses
dengan browser
sesuai selera anda
1.2. Editor Menu Bar (Adobe Fireworks)
1.3. Editor gambar (Adobe Photoshop)
Adobe Photoshop, software editor gambar yang mendukung untuk
mendesain tampilan page website kita. Disini saya menggunakan
Adobe Photoshop CS5 portable version (versi bajakan) untuk
mempersingkat waktu dan size, yang bisa kalian download di google.
Cara Menginstall Adobe Photoshop CS5 Portable

6. 1. Buka photoshop yang telah kamu download, lalu double klik
photoshop tersebut.
2. Setelah double klik, tunggu proses sampai muncul tampilan
seperti gambar di bawah ini.
3. Klik Next
4. Pilih folder tujuan install Photoshop, lalu klik Next
5. Klik Install, tunggu proses hingga selesai.
6. Setelah proses selesai, maka photoshop telah terinstall di
komputer kamu seperti gambar di bawah ini.

8. BAB II
RANCANGAN APLIKASI
2.1. Flowchart
Flowchart merupakan gambar yang memperlihatkan urutan
dan hubungan proses berserta intruksinya. Gambaran ini dinyatakan
simbol dengan demikian setiap simbol menggambarkan proses
tertentu. Sedangkan hubungan antara proses digambarkan dengan
garis penghubung.
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.
Simbol Simbol Flowchart
Flowchart disusun dengan simbol – simbol ini dipakai sebagai
alat bantu menggambarkan proses di dalam program.
Dalam pembuatan Flowchart tidak ada rumus atau patokan
yang bersifat mutlak karena flowchart merupakan gambaran hasil
pemikiran dalam menganalisa suatu masalah dengan computer
sehingga flowchart yang dihasilkan dapat beragam antara satu
pemrogram dengan pemrogram lainnya.
Namun secara garis besar, setiap pengolahan selalu terdiri
dari tiga bagian utama, yaitu:
1. Input ialah bahan mentah
2. Proses pengolahan

9. 3. 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.
Flowchart Teens Go Green

10. 2.2. Layout

11. BAB III
MEMBUAT RANCANGAN APLIKASI
3.2 Membuat Menubars DiFireworks
Saya akan Membuat menubars didalam fireworks berikut
adalah langkah-langkahnya :
1. Terlebih dahulu membuka fireworks, jika belum ada
silahkan menginstalnya terlebih dahulu. Tapi jika sudah
ada maka silahkan, klik start lalu pilih Adobe Fireworks
CS5, seperti gambar berikut :

12. 2. Lalu akan muncul seperti gambar dibawah ini :
3. Jika aplikasi fireworks sudah tampil maka akan seperti
gambar dibawah ini :

13. 4. Lalu klik “File” lalu “New”
6. Lalu tentukan kertas canvas yang sesuai keinginan, web tens
go green ini memakai ukuran “542 x 158” :

14. 7. Dan setelah itu akan tampil seperti gambar berikut ini :
8. Lalu buatlah kotak menubars Vector Rounded Rectangle.
Seperti gambar dibawah ini :

15. 9. Setelah itu warnai sesuai dengan selera. Kali ini kita memakai
warna hijau. Pertama klik icon seperti gambar berikut :
10. Jika sudah buat line disekitarnya, seperti gambar berikut :

16. 11. Lalu tulis menubars sesuai keinginan anda
12. Lalu menubars berikutnya yakni, “Profile”

17. 13. Selanjutnya adalah “About”
14. Page menubars berikutnya yakni, “Galery”

18. 3.3 Membuat Categories menggunakan Fireworks
1. Pertama kita klik “File” lalu “New”
2. Setelah itu tentukan ukurannya, ukurannya “298 x 82”

19. 3. Lalu buatlah kotak menubars Vector Rounded Rectangle.
Seperti gambar dibawah ini :
15. Lalu warnain sesuai selera pula, sekarang kita pakai warna
hijau

20. 16. Setelah itu buat line disekitarnya
17. Setelah itu Selanjutnya adalah pembuatan Menu untuk
Categories “Pengertian Reuse”

21. 18. Selanjutnya adalah pembuatan Menu untuk Categories
“Pengertian Reduce”
19. Selanjutnya adalah pembuatan Menu untuk Categories
“Pengertian Recycle”

22. 3.4 Membuat Background Menggunakan Adobe Photoshop CS5
1. Klik Photoshop yang ada didalam PC/Laptop kalian
2. Setelah muncul, klik “File”, lalu “New”

23. 3. Tentukanlah ukurannya, disini kita gunakan ukuran
“1300x1000”
4. Selanjutnya akan muncul seperti gambar berikut

24. 5. Klik icon “Paint bucket tool”
6. Setelah itu beri warna, disini kita gunakan warna hijau.

25. 7. Next. Dipojok kiri atas kita beri Tulisan “Teens Go Green”
8. Setelah itu simpan dan pembuatan Background yang disertai
Judul Selesai.

26. BAB IV
MEMBUAT APLIKASI BERBASIS WEB
4.1 Membuat Page I (Home)
1. Pertama kita buka terlebih dahulu notepad yang
terdapat dilaptop/PC anda.
2. Kemudian tulis sript seperti berikut :
3. Dan hasilnya akan seperti berikut :

27. 4. Setelah itu kita beri background didalamnya. Dengan
menulis script seperti berikut ini :
5. Hasilnya akan seperti berikut :

28. 6. Selanjutnya adalah membuat menubars, berikut adalah
scriptnya :
7. Dan hasilnya akan seperti berikut :

29. 8. Selanjutnya buat categories dibawahnya, dan inilah
scriptnya :
9. Hasilnya seperti dibawah ini :

30. 10. Selanjutnya kita buat isi diweb ini. Dan inilah
scriptnya:
11. Dan hasilnya adalah seperti gambar berikut :

31. 4.2 Membuat Page II (About)
1. Page home sudah selesai. Selanjutnya buatlah page Profile.
Scriptnya pun hanya diganti dibagian paling bawah. Dan berikut
adalah scriptnya :
2. Hasilnya adalah seperti berikut :

32. 4.3 Membuat Page III (Profile)
1. Next. Script about seperti berikut.
2. Hasilnya sebagai berikut :

33. 4.4 Membuat Page IV (Galery)
1. Next. Script Galery
2. Hasilnya :

34. 4.5 Membuat Categories “Pengertian Reuse”
1. Next. Script Pengertian Reuse.
2. Hasilnya

35. 4.6 Membuat Categories “Pengertian reduse”
1. Next. Script Pengertian Reduse.
2. Hasilnya akan seperti ini

36. 4.7 Membuat Categories “Pengertian Recycle”
1. Next. Script Pengertian Recycle
2. Hasilnya akan seperti ini
~SELESAI~