| Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

47
TUGAS LAPORAN PROYEK APLIKASI ”Aplikasi WEB” ”Dream Japan Film”” Oleh Singgih. Imantoro NISN : 99778494646 Kelas X RPL I SMK NEGERI 1 DEPOK 2013 i

description

 

Transcript of | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Page 1: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

TUGAS LAPORAN PROYEK APLIKASI

”Aplikasi WEB”

”Dream Japan Film””

Oleh

Singgih. Imantoro

NISN : 99778494646

Kelas X RPL I

SMK NEGERI 1 DEPOK

2013

i

Page 2: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

“Dream Japan Film”

Oleh :

Singgih Imantoro NISN : 99778494646Reno Cahyo Hutomo NISN : 9986773959

Tugas Laporan Proyek Aplikasi

Telah diuji sebagai syarat kelulusan mata pelajaran produktif RPL

Semester Genap Tingkat X

Tahun Ajaran 2012/ 2013

di

SMK NEGERI 1 DEPOK

Depok, 21 MEI 2013

Penguji,

Inne Ria.

ii

Page 3: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Kata Pengantar

Bismillahirahmanirrahim.

Terima kasih yang tak terhingga penuh rasa syukur terucapkan kepada ALLAH S.W.T, Sang Maha Hati, sang Maha Segalanya, Maha Pengasih dan Maha Penyayang, yang telah memberikan kekuatan, kesabaran, keikhlasan dan cinta yang tak terhingga; Nikmat dan Cobaan yang penuh dengan pelajaran yang sangat berharga. Terima kasih atas segala pejaman dan ketertundukan dalam do’a yang telah membuat diri kami bangga-bahagia hadir sebagai makhluk-Mu di dunia ini. Terima kasih dan sembah sujud kepada Baginda Nabi Muhammad S.A.W atas perjuangan dan amanah yang tak pernah padam sampai akhir zaman. Shalawat dan salam semoga tercurahkan kepada Baginda Rasulullah Muhammad S.A.W, juga kepada keluarganya, pengikutnya, golongannya dan semua sahabatnya serta para pengikut mereka dalam kebaikan sampai hari kiamat. Semoga keselamatan tercurah kepada mereka semua.

Kepada keluarga tercinta Ibu, Bapak, Kakak serta Adik kami tercinta, terima kasih atas cinta dan rasa syukur yang sangat luar biasa, setiap hari, setiap saat, tanpa batas dan terima kasih juga atas segala kasih sayang, perhatian dan “Pengertian” yang amat berharga dan sangat berarti bagi kami. Khusus unutuk seorang Ibu,, terima kasih atas segala kasih sayangmu, ketulusan cintamu, pengorbanan jiwa, raga, harta hingga nyawa yang engkau telah pertaruhkan demi kami, seorang manusia yang jauh dari kata ideal dan proporsional, yang sangat jauh dari Sang Pencipta serta Orangtua dan sangat dekat dengan Komandan Maksiat, Setan, Iblis sederajat, yang sangat tidak tau terima kasih dan balas budi ini. Maafkan kami, bu…

Terima kasih untuk teman-teman di SMKN 1 DEPOK, khususnya kelas I0 RPL I. Untuk sahabat-sahabat tercinta di Kelas I0 RPL I dimana pun anda berada. Terus tebarkan semangat bersahabat dan berbagi untuk Indonesia. Kepada Kepala SMKN I DEPOK, seluruh Guru, Karyawan, Staff dan yang lain yang kami tidak bisa sebutkan nama, alamat, usia masing-masing. Terimakasih yang sebesar-besarnya kepada Jajaran Guru yang sudah tererlanjur masuk ke dunia RPL.

Puncak Keberhasilan, yang telah memberikan sesuatu yang mungkin tidak akan pernah terlupakan seumur hidup kami.

Terima kasih untuk semua pihak, saudara/saudari kami dimanapun domisili anda, teman-teman di lingkungan rumah, teman-teman para pengunjung Website kami, teman-teman Pelajar di seluruh SMK/SMA sederajat di Indonesia, yang tidak bisa kami sebutkan satu per satu.

Tak lupa juga kami ucapkan kepada seluruh alam semesta, galaksi bima sakti, matahari, bintang, planet-planet serta komponen yang lainnya yang tidak mungkin bisa kami sebutkan satu per satu. Kalian telah menerangi dan menemani hari-hari kami yang penuh dengan kegelapan

iii

Page 4: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

menjadi penuh dengan sinar kebangkitan. Alam, Sumber Daya juga apapun itu yang bisa kami eksplorasi, kami serukan terima kasih atas segala yang telah kalian siapkan, sediakan, dan hamburkan kepada kami, para penjahat alam yang hanya bisa memanfaatkan kalian semaksimal dan sebodoh mungkin dan tidak memperhitungkan apa yang akan terjadi di masa depan, masa dimana generasi kami sudah tiada, generasi baru sudah muncul, era baru pun telah datang mengusir era kami. Untuk para hewan dan tumbuhan jangan pernah menganggap kami tidak adil, kami juga berterima kasih pada kalian yang setiap hari selalu menemani hari-hari kami dengan suara maupun gerakan kalian yang membuat hari kami yang tadinya kosong menjadi terisi.

Dan yang terakhir, untuk Kamu. Terima kasih telah meluangkan mata hati dan sedikit waktu yang kamu miliki untuk melihat, membaca, mengunjungi hingga mendownload apa yang tersedia di Website kami. Tidak akan ada kami tanpa teman-teman semua.

Dream Japan Film. Dream Japan Film sendiri adalah sebuah hasil karya anak bangsa dan anak manusia (Reno cahyo Hutomo dan Singgih Imantoro) yang merupakan buah dari usaha, kerja keras kami selama berada di Kelas Tercinta, Terkotor, Tersederhana, Tergaduh dan Teraneh kami, I0 RPL I. Hembusan nafas ketidakwajaran yang tak terhingga telah kami lewati selama berada di Kelas ini. Ketiduran maupun sengaja tidur, kemalasan, keangkuhan, keberanian sengaja melintas dihadapan kami sewaktu ada di kelas ini. Keributan, kejanggalan, kegilaan, kehebohan, keceriaan, kesenanagan, tangis disertai tawa hampir setiap hari menemani hari-hari, hati dan pikiran kami. Diskriminatif, Pengucilan, Kejahatan, Kebohongan hingga Kekerasan telah kami lihat, saksikan, bahkan kami rasakan dan alami selama berada di Kelas Berdarah ini.

Teman-teman kami yang memiliki keanekaragaman wajah, gaya bicara, gaya rambut, gaya berpakaian, tempat tinggal, nama orang tua, usia, sifat, perilaku, bahasa, warna kulit, ras, suku, marga, agama, keyakinan, budaya, hingga keimanan yang beranekaragam seakan telah disiapkan di kelas ini.

Dream Japan Film didireksikan langsung untuk memperkenalkan berbagai macam Film Jepang maupun Anime Jepang. Website ini memiliki beberapa kategori film yang tersedia, antara lain Action, Adventure, Anime, History Band, Horror dan lain lain. Selain itu Website ini mempersembahkan link untuk mendownload film yang sebelumnya sudah anda pilih. Selain download, Website ini juga memperlihatkan Alur Cerita/Plot dari masing-masing film yang ada.

Harapan kami Website ini (Dream Japan Film) bisa menjadi Website Penyedia Film Jepang No. 1 di Indonesia. Untuk mencapai harapan tersebut kami sudah membuat sebuah planning untuk ke depannya. 1/2 minggu sekali kami akan mengupload film baru. Anda juga bisa me-request/meminta film yang anda sukai/inginkan melalui Official E-mail kami di [email protected] / klik form Request Time, lalu isikan data anda di tabel yang sudah tersedia.

iv

Page 5: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Jangan lupa juga untuk selalu mengunjungi Website kami setiap minggunya ya.. Jangan sampai menjadi orang yang terakhir dalam mengetahui film Jepang, BE THE FIRST!. Kami mengharapkan disetiap kunjungan kalian untuk meninggalkan kritik dan saran. Kritik dan sarana akan lebih memacu kami untuk lebih bisa memuaskan kalian para pengunjung. Kritik dan saran bisa kalian kirim melalui social media kami yang telah tersedia di form Contact / anda bisa melalui Official E-mail kami di [email protected]. Kami tidak akan menyediakan Film, Anime / apapun yang mengandung unsur SARA dan PORNOGRAFI.

Dengan segala kerendahan hati, dari orang biasa yang akan terus berjuang untuk karyanya. Kami akan terus berusaha menjadi perantara untuk teman-teman semua melalui website kami. Semoga ALLAH S.W.T. mengizinkan diri yang masih banyak kekurangan dan masih harus banyak belajar ini.

Sekali lagi, terima kasih teman-teman semua, terima kasih banyak!!

Indonesia untuk Impian dan Kebaikan

Fighting Dreamers!.Goodness! Integrity!

Reno Cahyo Hutomo dan Singgih Imantoro

v

Page 6: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Daftar ISI

Kata Pengantar………………………………………………………………………….iii

Daftar ISI…………………………………………………………………………….…..vi

Tujuan dari laporan………………………………………………………………...….vii

BAB 1 Perkenalan WEB

1.1 Software Untuk Membuat Web………………………………………………....11.2 XAMP………………………………………………………………………….....11.3 Notepad……………………………………………………………………….…..5

BAB 2 Rancangan Aplikasi

2.1 Desain Interface…………………………………………………………………...…6

2.2 Flowchart…………………………………………………………………….……….7

2.2 Pseudecode………………………………………………………………….………...8

BAB 3 Membuatan Code Pada Web

3.1 Membuat Halaman Home…………………………………………………….……..9

3.2 Membuat Halaman Contact………………………………………………………..12

3.3 Membuat Halaman Categories ……………………………………………………16

3.3.1 Membuat halaman link dalam categories………………………………

3.4 Membuat Halaman Request Time………………………………………………...18

3.5 Membuat Database koneksi berformat PHP……………………..........................21

3.6 Membuat Database proses_komentar berformat PHP…………………………..21

3.7 Mengkoneksikan halaman Request Time dengan database reques_time..…….22

BAB 4 Penutup

Penutup………………………………………………………………………………….

vi

Page 7: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Tujuan dari laporan

Assalamu’alaikum Wr. Wb.

Tujuan kami membuat laporan ini untuk memenuhi syarat kenaikan kelas XI yang kami tujukan untuk guru produktif, dan bukti dari kami telah membuat aplikasi yang sudah dipresentasikan pada 21 Mei 2013 di kelas X RPL I. Dan kalau ada kata-kata yang tidak berkenan mohon dimaafkan. Sekian dari tujuan kami membuat applikasi ini.

Wassalamu’alaikum Wr. Wb.

vii

Page 8: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

BAB I

1.1 Software untuk membuat WEB

Dalam membuat web kita perlu tahu software apa yang digunakan untuk membuat aplikasi WEB maupun Game Mobile atau Aplikasi lainnya, dan kita juga harus mengetahui bahasa pemograman dalam membuat applikasi WEB, contoh <html> adalah pembukaan untuk pembuatan web. IPO adalah kata untuk memasukan data dan memproses data dan pengeluaran data. Dalam pembuatan Web kali ini kita memakai aplikasi yg bernamakan Notepad/Notepad++. Sedangkan untuk membuat databasenya kita menggunakan sebuah aplikasi yg berjudul XAMPP.

1.2 XAMPP

XAMPP adalah aplikasi atau software untuk membuat database dalam web local yang biasa di sebut localhost, localhost adalah web local dimana kita bisa menjadi seorang user maupun client, di bawah ini tampilan icon XAMPP.

Dan di bawah ini cara mengisntal XAMPP.

1. Buka mentahan XAMPP yang ada.

1

Page 9: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

2. Pilih bahasa yang anda kuasai.

3. Klik next jika sudah muncul kotak dialog setup install seperti di bawah ini.

2

Page 10: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

4. Polih destinasi untuk menaruh instalan XAMPP anda, lalu klik Next.

5. Lalu klik instal.

6. Tunggu proses pengistallan XAMPP anda sampai selesai,

3

Page 11: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

7. Jika sudah selesai klik Finish

8. Setelah penginstallannya selesai, langsung saja buka XAMPP Control Panel di file XAMPP yg tadi anda install. Setelah muncul kotak doalig XAMPP Control Panel,

4

Page 12: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

klik Start pada Apache, MySql dan FileZilla. Jika ketiganya sudah dijalankan anda langsung bisa membuka XAMPP di browser anda, seperti Mozila Firefox, Google Chrome, Internet Exploler dll dengan cara menulis http/localhost/ di kolom Address Bar.

1.3 Notepad

5

Page 13: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Notpad adalah aplikasi untuk membuat web atau sebagainya, notpad sudah salak satu fitur dari microsoft, dalam membuat web dengan notpad kita perlu mengetahui dasar atau bahasa pemograman yang digunakan. Contoh

Dan ini adalahhasil dari scrip di atas

Itu lah contoh pertama

NB : jika web tidak berjalan mungkin format masih salah (bukan format html) atau scrip salah.

BAB II

6

Page 14: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

2.1 Desain Inter Face

Desain inte face adalah deain awal sebah apliksi atau rancangan awal aplikasi yang akan dibuat conth seperti rancangan desain interface Dream Japan Film.

Itu adalah desain interface dari Dream Japan Film yang sebelumnya dibuat sebelum membuat webnya.

2.2 Flowchart

7

Page 15: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Flowchart merupakan gambar atau bagan yang memperlihatkan urutan dan hubungan antara proses beserta intstruksinya. Gambar ini dinyatakan dengan dengan symbol dengan demikian setiap simbol menggambarkan proses tertentu. Sedangkan hubungan antara proses antara proses dihubungkan dengan garis penghubung.

Flowchart merupakan langkah awal membuat program. Dengan adanya flowchart urutan proses kegiatan menjadi lebih jela. Jika ada penambahan proses maka dapatdilakukan dengan lebih mudah. Setelah flowchart selesai disusun selanjutnya menerjemahkanke bentuk progra dengan bahasa pemoggraman.

Simbol-simbol Flowchart

Start disimbolkan dengan persegi panjang tumul

Input/Output disimbolkan dengan jajargenjang

Proses disimbolkan dengan Persegi panjang

Decision disimbolkan dengan Belah ketupa

Conecter dismbolkan dengan lingkaran

Flow dolambangkan denga garis lusus

Contoh dibawah ini adalah flowchart dari Dream Japan Film:

2.3 Code

8

Page 16: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Dalam web dibuthkan code yang tepat untuk mengatur tata letak dan ukuran dan lain-lain. Dalam membuat web di butuhkan code yang bisa dibaca program untuk menjalanka suatui aplikasi dalam web. Contoh di bawah ini:

<htrml>

<head>

<title>Home</title>

</head>

<body>

SELAMAT DATANG

</body>

</html>

Itu afdalah code awaldalam membuat web

Maksud dari <html>…..</html> adalah pembukan dan penutupan web yang akan di buat

<head>……</head> adalah bagian atas atau kepala web

<title>….</title> adalah judul web yanbg akan di buat menurut kita

<body>…..</body> adalah badan web atau isi web yang akan di buat

BAB III

9

Page 17: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

Membuat web

3.1Buat Halaman Home1. Script

<html><head><title>Dream Japan Film</title><style type="text/css">a:visited {

color: #c5bc37;}a:hover {

color: #FF0;}</style></head><body background="backgrounds.png"><center><img src="Banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center><center><img src="marquee.png"></center><p><table width="800" border="0" align="center"> <tr> <td width="550" align="center"><font size="4" color ="black"><b>Posted On April<small> 14th, 2013 By Admin</small></td> <td width="240" align="center"><font size="5"color ="black">TOP RATING!!</td> </tr> <tr> <td height="68"><font size="4" color ="black">Selamat Datang di Dream Japan Film?? Kawan! Dream Japan Film adalah sebuah wadah, sarana, tempat untuk menampung para pecinta Film Jepang di seluruh Indonesia.Website ini diperuntukkan bagi para pecinta Film Jepang yang sangat mendamba-dambakan mempunyai berbagai Film-Film Jepang. Sepengetahuan kami, Web yang

10

Page 18: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

berisi tentang Film-Film Jepang itu sulit ditemukan dan dicari. Jadi, kami menyediakan dan mempersembahkan Web ini untuk anda yang kesulitan mencari, menemukan dan mendownload Film Jepang kesukaan anda. ARIGATOU!!</p></td> <td valign="top"><font size="4"><a href="CrowsZeroI.html">~ Crows Zero I</font></a><br> <font size="4"><a href="BeckMongolianChopSquad.html">~ Beck Mongolian Chop Squad</font></a> </td> </tr> <tr> <td height="68">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td height="23" align="center"><font size="4" color ="black"><b>Posted On April<small> 14th, 2013 By Admin</small></td> <td align="center"><font size="5" color ="black">NEW POST!!</td> </tr> <tr> <td height="68"><font size="4" color ="black">Dream Japan Film</span> sendiri menyediakan berbagai film Jepang, mulai dari Film Action, Anime, Food Story, Friendship, Horror, Music dan lain sebagainya. Kami berusaha menjadikan Website ini sebagai Web penyedia Film Jepang No. 1 di Indonesia dan menjadikan Website ini sebagai acuan para Pecinta Film Jepang di seluruh Indonesia juga sebagai sarana untuk berkomunikasi antar sesama Pecinta Film Jepang. Mudah-mudahan Website ini bisa membantu anda. Kritik serta Saran anda kami terima dengan ikhlas demi menyempurnakan Website yang jauh dari kata sempurna ini. ARIGATOU!!</td> <td valign="top"><font size="4"><a href="CrowszeroII.html">~ Crows Zero II</a></font><br> <font size="4"><a href="Ringu.html">~ Ringu 'The Ring'</font></a> </td> </tr> </table><p>&nbsp;</p><center><img src="footer.gif" width="1000" height="200"></center></body>

11

Page 19: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

</html>

2. Screnshot

3.2 Contact

12

Page 20: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

1. Script<html><head><title>Dream Japan Film</title></head><body background="backgrounds.png"><center><img src="banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center><center><img src="marquee.png"></center><p><center><font size="5" color ="white">If you want to ask something or asking for to been given information about things which pertinent with this website, you can contact we:</font></center><p>&nbsp;</p><center><table><tr>

<td width="150"><font size="4" color ="Red">Via Handphone</td>

<td width="30" align="center"><font size="4" color ="Red">:</td>

<td width="325" align="center"><font size="4" color ="Red">08992372238</td> </tr>

<tr> <td><font size="4" color ="Red">Via E-mail</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">[email protected]</td></tr>

<tr> <td><font size="4" color ="Red">Via Facebook</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color ="Red">Reno

Cahyo Hutomo</td> </tr>

<tr>

13

Page 21: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td><font size="4" color ="Red">Via Twitter</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">@reno_raito</td></tr>

<tr> <td><font size="4" color ="Red">Via Blogger</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">renocahyohutomo.blogspot.com</td></tr>

<tr> <td colspan="3" align="center">&nbsp;</td></tr><tr> <td colspan="3"><font size="5" color="Red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONTACT PERSON</font></td> </tr></tr><tr>

<td width="150"><font size="4" color ="Red">Via Handphone</td>

<td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">08979962311</td></tr>

<tr> <td><font size="4" color ="Red">Via E-mail</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">[email protected]</td></tr>

<tr> <td><font size="4" color ="Red">Via Facebook</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">Singgih Imantoro</td></tr>

<tr>

14

Page 22: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td><font size="4" color ="Red">Via Twitter</td> <td align="center"><font size="4" color ="Red">:</td> <td align="center"><font size="4" color

="Red">@singgihnaxhb</td> </tr> <tr> <td width="150"><font size="4" color ="Red">Via

Blogger</td> <td width="30" align="center"><font size="4" color

="Red">:</td> <td width="325" align="center"><font size="4" color

="Red">naxgaswad.blogspot.com</td> </tr>

</table></center><p>&nbsp;</p><center><img src="footer.gif" width="1000" height="200"></center></body></html>

2. Screen shot

3.3 Categories

15

Page 23: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

1. script<html><head><title>Dream Japan Film</title><style type="text/css">a:visited {

color: #c5bc37;}a:hover {

color: #FF0;}</style></head><body background="backgrounds.png"><center><img src="banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center><center><img src="marquee.png"></center><p><center><font face="Arial" size="6" color="Green"><blink>Choose Your Favorite Film!!</blink></font></center><p>&nbsp;</p><table align="center" border="1" width="800"> <body>

<tr align="center"><td><font color="black">GENRES</font><td><font color="black">NAME</font><td><font color="black">RELEASED</font></tr><tr><td valign="top"><font color="black">Action</font><td align="left"><font color="black"><a href="CrowsZeroI.html">Crows Zero

I</a><br><a href="CrowsZeroII.html">Crows Zero II</a><br><a href="Gantz.html">GANTZ</font></center>

<td align="left"><center><font color="black">2007<br>2009<br>2011</font></tr><tr><td valign="top"><font color="black">Anime</font>

16

Page 24: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td align="left"><font color="black"><a href="BeckMongolianChopSquad.html">Beck Mongolian Chop Squad</a><br><a href="DailyLivesOfHighschoolBoys.html">Daily Lives Of Highschool Boys</a><br><a href="ChuunibyouDemoKoiGaShitai.html">Chuunibyou Demo Koi Ga Shitai</font></center>

<td align="left"><center><font color="black">1999<br>2010<br>2010</font></tr><tr><td valign="top"><font color="black">Documentary</font><td align="left"><font color="black"><a href="JiroDreamsOfSushi.html">Jiro

Dreams Of Sushi</a></font></center><td align="left"><center><font color="black">2002</font></tr><tr><td valign="top"><font color="black">Drama</font><td align="left"><font color="black"><a href="KimiNITodoke.html">Kimi Ni

Todoke</a></font></center><td align="left"><center><font color="black">2003</font></tr><tr><td valign="top"><font color="black">Horror</font><td align="left"><font color="black"><a href="Ju-On'TheGrudge'.html">Ju-On

The Grudge</a><br><a href="ParanormalActivity2TokyoNight.html">Paranormal Activity 2 Tokyo Night</a><br><a href="Ringu.html">Ringu The Ring</a></font></center>

<td align="left"><center><font color="black">2002<br>2010<br>2000</font></tr><tr><td valign="top"><font color="black">Music</font><td align="left"><font color="black"><a href="BeckTheMovie.html">Beck The

Movie</a></font></center><td align="left"><center><font color="black">2008</font></tr>

</table><p>&nbsp;</p><center><img src="footer.gif" width="1000" height="200"></center></body></html>

3.Screen shot

17

Page 25: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

3.3.1 Halaman link dalam categoriesSebagai contoh kita akan membuat halaman BECK THE MOVIE sebagai berikut:1. script<html><head><title>Dream Japan Film</title></head><body background="backgrounds.png"><center><img src="banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center>

<table align="center" border="1" width="800"> <tr align="center">

<td colspan="3"><font color="black" size="5">BECK MONGOLIAN CHOP SQUAD</font>

</tr> <tr> <td colspan="3"><p>&nbsp;</p>

18

Page 26: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<p>BECK MONGOLIAN CHOP SQUAD adalah judul sebuah manga yang ditulis oleh Harold Sakuishi yang diterbitkan oleh Kodansha di Jepang. Di Indonesia, manga ini diterbitkan oleh Elex Media Komputindo dan dimasukan dalam kategori komik remaja Shonen Magz. Manga ini diadaptasikan dalam sebuah film yang diperankan oleh aktor, dan akan dirilis pada tahun 2010. Aktor Jepang Hiro Mizushima dan Takeru Sato akan berperan sebagai tokoh Ryusuke dan Koyuki di film ini

<p>Manga ini bercerita tentang sekelompok remaja Jepang yang menapaki karier dibidang musik rock. Pemuda bernama Tanaka Yukio (14 tahun) atau yang lebih dikenal oleh temannya dengan sebutan Koyuki merasa bosan dengan kehidupannya yang sangat datar, sampai akhirnya kehidupannya yang membosankan hilang ketika ia menolong seekor anjing bernama Beck dari tiga pemuda yang lagi mabuk keturunan Kulit Putih. Disaat ini lah ia bertemu Ryusuke (yang saat itu berusia 16 tahun) pemilik dari anjing yang Koyuki tolong. Ryusuke telah lama tinggal di Amerika dan sangat berbakat dalam bermusik khususnya musik rock. Ryusuke lah yang memperkenalkan Koyuki dunia musik, ia pun juga memengaruhi Koyuki untuk belajar memetik gitar hingga mahir. tapi bos tempat Koyuki-lah yang mengajarkan trik-trik gitar sampai koyuki mahir memainkan gitar. <p>Cerita berlanjut dengan perjalanan dan lika-liku band bernama BECK yang telah dibentuk oleh Ryusuke. Dalam kesehariannya mereka berlatih dan terus mencari personel untuk band mereka, sampai suatu saat Chiba dan Taira ikut bergabung sebagai Vokalis dan Bassis, dan Saku yang merupakan teman sekolah Koyuki membuat mereka terpesona oleh kemahirannya dalam menabuh Drum sehingga menjadikannya ia sebagai Drummer dalam band ini. Di dalam manga ini, juga menceritakan tentang hubungan Koyuki, khususnya hubungan dengan Ryusuke dan hubungan cintanya dengan Maho yang merupakan adik dari Ryusuke. <p>Tokoh <p>Yukio "Koyuki" Tanaka<br>Yukio Tanaka adalah karakter utama dalam cerita ini, dipanggil Koyuki karena bertubuh kecil (Ko artinya kecil, dalam bahasa jepang). Koyuki adalah pemuda yang pendiam dan sering dipermainkan oleh geng Hyodou di sekolahnya. ia juga merupakan vokalis dan gitaris kedua di BECK, pernah diajak menyanyi oleh vokalis Dying Breed, Mat Reed dan suaranya biasa dipakai untuk suara rendah (bas). Gitarnya sendiri pertama adalah Gretch yang dipinjamkan oleh Kenichi Saitou, pemilik pabrik kertas tempat Koyuki bekerja; Fender Telecaster warna kuning, SG yang ditemukannya ketika sedang bekerja pada jasa angkut pindahan; Fender Mustang 69 yang dibelinya di London sesuai nasihat Billy Riley.<br> <p>Ryusuke "Ray" Minami<br>Seorang pemuda yang merupakan gitaris handal, dia menginspirasikan Koyuki untuk bermain gitar, dia adalah pendiri BECK dan gitaris utama di bandnya. Ray sebagai gitaris pertama, berteman baik dengan Eddie Lee, gitaris dari band internasional Dying Breed. Sebuah cerita dan konflik mengelilinginya dan gitar Gibson Les Paul miliknya, Prudence (Versi orisinalnya adalah Lucille) Meruapakan sosok yang susah ditebak sifatnya.

19

Page 27: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<p>Maho Minami<br>Maho adalah adik dari Ryusuke, ia penyanyi yang berbakat. Koyuki bertemu dengan Maho pertama kali di dalam sebuah cafe, dimana Maho bernyanyi disana. Mereka semakin akrab ketika mereka bernyanyi Follow Me bersama di acara reuni guru renang Koyuki, Kenichi Saitou. Semakin lama hubungan mereka semakin romantis. <p>Ken'ichi Saitou<br>Saitou mengajari Koyuki renang dan bermain gitar, ia meminjamkan gitarnya kepada Koyuki untuk berlatih dirumahnya. Pria single paruh baya ini menyukai band luar seperti The Beatles, Rolling Stones <p>Taira Yoshiyuki<br>Bassis band BECK, anggota pertama yang direkrut oleh Ryusuke, permainannya sangat funky untuk ukuran seorang pemain bass, merupakan anggota yang paling dewasa walaupun wajahnya selalu kelihatan tidak peduli. Disaat pertunjukan, ia melepaskan bajunya menunjukan ciri khasnya di BECK.

<p>Chiba Tsunemi<br>Vokalis utama BECK, Chiba lebih terpengaruh dengan musik rap dan punk ketimbang Koyuki yang lebih pas menyanyikan lagu Slow di BECK, bakatnya sebagai rapper sangat tinggi dan pernah mengikuti duel rapper walaupun kalah. Chiba bertemu dengan Ryusuke disaat permainan baseball berlangsung dan membawa keyakinan dari Ryusuke bahwa Chiba adalah vokalis dengan talenta baik di panggung. Chiba juga dikenal handal dalam bela diri Karate, dialah orang pertama yang menolong Koyuki saat diganggu oleh Rikiya, salah satu berandalan di sekolah Koyuki. Dengan kemampuan bela dirinya, ia berhasil menaklukan Rikiya dalam waktu singkat. Chiba juga dikenal paling kocak dari seluruh anggota BECK yang lainnya.

<p>Sakurai "Saku" Yuji<br>Saku adalah drummer BECK, dia adalah anggota terakhir yang bergabung. Ia merupakan siswa pindahan dan sahabat Koyuki yang paling dekat. Walaupun sedikit bicara, Saku memiliki sifat pemberani, dialah orang pertama yang berani menentang Hyodo dan kawan-kawan, yang merupakan gang berandalan sekolah.</td> </tr> <tr align="center"> <td><a href="BeckMongolianChopSquadImages.html">SEE THE IMAGES</a> <td><= THANK YOU FOR => <td><a href="Free Download Anime Series BECK Mongolian Chop Squad [COMPLETED].htm">DOWNLOAD</a> </tr> </table></tr><pre>

</pre><center><img src="Footer.gif" width="1000" height="200"></center></body></html>

20

Page 28: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

2. Sreen Shot

3.4 Request time1. Script<html><head><title>Dream Japan Film</title></head><body background="backgrounds.png"><center><img src="banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center>

21

Page 29: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<center><img src="marquee.png"></center><p><center><h1><font face=Arial size=6 color="Black"></h1>REQUEST TIME <hr color="black"><br></h3></font><table border=0><form action="proses_komentar.php" method="POST"><tr>

<td width=20%>Nama</td><td width=3%>: </td><td width=82%><input type="text" name="nama"

size=20></td></tr><tr>

<td width=20%>Umur</td><td width=3%>: </td><td width=82%><input type="text" name="umur"

size=3></td></tr><tr>

<td width=20%>E-mail</td><td width=3%>: </td><td width=82%><input type="text" name="email"

size=50></td></tr><tr>

<td width=20%>Genre</td><td width=3%>: </td><td width=82%><input type="text" name="genre"

size=20></td></tr><tr>

<td width=20%>Nama Film</td>

22

Page 30: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td width=3%>: </td><td width=82%><input type="text" name="namafilm"

size=20></td></tr><tr>

<td width=20%>Kritik</td><td width=3%>:</td><td width=82%><input type="text" name="kritik"

size=50></td></tr><tr>

<td width=20%>Saran</td><td width=3%>:</td><td width=82%><input type="text" name="saran"

size=50></td></tr><tr>

<td width=15% colspan=3 align=center>

</td></tr><tr>

<td colspan=3 align=right>

<input type="submit" value="Submit"><input type="reset" value="Reset">

</td></tr></form></table></ul><p><hr color="black"><p><center><img src="footer.gif" width="1000" height="200"></center>

23

Page 31: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

</body></html>

2.Sreen shot

3.5 Koneksi Database PHP1. Script

3.6 proses_komentar PHP

1. Script

24

Page 32: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

3.7 request_time berbasis PHP1. Script<html><head><title>Dream Japan Film</title></head><body background="backgrounds.png"><center><img src="banner.gif" width="1000" height="200"></center><center><table width="200" border="0"><p><a href="index.html"><img src="home.png"></a><a href="categories.html"><img src="categories.png"></a><a href="contact.html"><img src="contact.png"></a><a href="RequestTime.html"><img src="request time.png"></a></table></center><center><img src="marquee.png"></center><p><center><h1><font face=Arial size=6 color="Black"></h1>REQUEST TIME <hr color="black"><br></h3></font><table border=0><form action="proses_komentar.php" method="POST"><tr>

<td width=20%>Nama</td><td width=3%>: </td>

25

Page 33: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td width=82%><input type="text" name="nama" size=20></td></tr><tr>

<td width=20%>Umur</td><td width=3%>: </td><td width=82%><input type="text" name="umur"

size=3></td></tr><tr>

<td width=20%>Email</td><td width=3%>: </td><td width=82%><input type="text" name="email"

size=50></td></tr><tr>

<td width=20%>Genre</td><td width=3%>: </td><td width=82%><input type="text" name="genre"

size=20></td></tr><tr>

<td width=20%>NamaFilm</td><td width=3%>: </td><td width=82%><input type="text" name="namafilm"

size=20></td></tr><tr>

<td width=20%>Kritik</td><td width=3%>:</td><td width=82%><input type="text" name="kritik"

size=50></td></tr><tr>

<td width=20%>Saran</td>

26

Page 34: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

<td width=3%>:</td><td width=82%><input type="text" name="saran"

size=50></td></tr><tr>

<td width=15% colspan=3 align=center>

</td></tr><tr>

<td colspan=3 align=right>

<input type="submit" value="Submit"><input type="reset" value="Reset">

</td></tr></form></table></ul><p><hr color="black"><p><center><img src="footer.gif" width="1000" height="200"></center></body></html>

27

Page 35: | Tutorial Membuat Sebuah Aplikasi Berbasis Web | How To Create A Web-Based Applications |

BAB 4PENUTUP

Demikian Tutorial/Laporan yang kami paparkan mengenai materi yang menjadi pokok bahasan dalam Laporan ini, tentunya terima kasih banyak dengan bantuan teman, kerena terbatasnya pengetahuan dan kurangnya rujukan atau referensi yang ada hubungannya dengan judul Laporan ini.Penulis banyak berharap para pembaca yang budiman dusi memberikan kritik dan saran yang membangun kepada penulis demi sempurnanya Laporan ini dan dan penulisan laporan di kesempatan-kesempatan berikutnya. Semoga laporan ini berguna bagi penulis pada khususnya juga para pembaca yang budiman pada umumnya.

28