TUGAS LAPORAN PROYEK APLIKASI

”TEENS GO GREEN”

Oleh

PUTRI MAULIDA

NISN : 9976896733

Kelas X RPL 1

SMK NEGERI 1 DEPOK2013

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.................................................................................................................19BAB 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

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

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. 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

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.

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

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

2.2. Layout

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 :

2. Lalu akan muncul seperti gambar dibawah ini :

3. Jika aplikasi fireworks sudah tampil maka akan seperti

gambar dibawah ini :

4. Lalu klik “File” lalu “New”

6. Lalu tentukan kertas canvas yang sesuai keinginan, web tens

go green ini memakai ukuran “542 x 158” :

7. Dan setelah itu akan tampil seperti gambar berikut ini :

8. Lalu buatlah kotak menubars Vector Rounded Rectangle.

Seperti gambar dibawah ini :

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 :

11. Lalu tulis menubars sesuai keinginan anda

12. Lalu menubars berikutnya yakni, “Profile”

13. Selanjutnya adalah “About”

14. Page menubars berikutnya yakni, “Galery”

3.3 Membuat Categories menggunakan Fireworks

1. Pertama kita klik “File” lalu “New”

2. Setelah itu tentukan ukurannya, ukurannya “298 x 82”

3. Lalu buatlah kotak menubars Vector Rounded Rectangle.

Seperti gambar dibawah ini :

15. Lalu warnain sesuai selera pula, sekarang kita pakai warna

hijau

16. Setelah itu buat line disekitarnya

17. Setelah itu Selanjutnya adalah pembuatan Menu untuk

Categories “Pengertian Reuse”

18. Selanjutnya adalah pembuatan Menu untuk Categories

“Pengertian Reduce”

19. Selanjutnya adalah pembuatan Menu untuk Categories

“Pengertian Recycle”

3.4 Membuat Background Menggunakan Adobe Photoshop CS5

1. Klik Photoshop yang ada didalam PC/Laptop kalian

2. Setelah muncul, klik “File”, lalu “New”

3. Tentukanlah ukurannya, disini kita gunakan ukuran

“1300x1000”

4. Selanjutnya akan muncul seperti gambar berikut

5. Klik icon “Paint bucket tool”

6. Setelah itu beri warna, disini kita gunakan warna hijau.

7. Next. Dipojok kiri atas kita beri Tulisan “Teens Go Green”

8. Setelah itu simpan dan pembuatan Background yang disertai

Judul Selesai.

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 :

4. Setelah itu kita beri background didalamnya. Dengan

menulis script seperti berikut ini :

5. Hasilnya akan seperti berikut :

6. Selanjutnya adalah membuat menubars, berikut adalah

scriptnya :

7. Dan hasilnya akan seperti berikut :

8. Selanjutnya buat categories dibawahnya, dan inilah

scriptnya :

9. Hasilnya seperti dibawah ini :

10. Selanjutnya kita buat isi diweb ini. Dan inilah

scriptnya:

11. Dan hasilnya adalah seperti gambar berikut :

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 :

4.3 Membuat Page III (Profile)

1. Next. Script about seperti berikut.

2. Hasilnya sebagai berikut :

4.4 Membuat Page IV (Galery)

1. Next. Script Galery

2. Hasilnya :

4.5 Membuat Categories “Pengertian Reuse”

1. Next. Script Pengertian Reuse.

2. Hasilnya

4.6 Membuat Categories “Pengertian reduse”

1. Next. Script Pengertian Reduse.

2. Hasilnya akan seperti ini

4.7 Membuat Categories “Pengertian Recycle”

1. Next. Script Pengertian Recycle

2. Hasilnya akan seperti ini

~SELESAI~