LAPORAN PEMROGRAMAN WEB WEB INFORMASI HA (1)

(1)

LAPORAN PEMROGRAMAN WEB

[WEB INFORMASI HARGA ALAT MUSIK]

DISUSUN OLEH :

[091110150] Deddy Wahyu Hermawan

[091110154] Lailatul Wahidah

[091110144] Dimas Arsetyo Guntoro

(2)

HALAMAN PERSETUJUAN

LAPORAN PEMROGRAMAN WEB

DISUSUN OLEH :

[091110150] Deddy Wahyu Hermawan

[091110154] Lailatul Wahidah

[091110144] Dimas Arsetyo Guntoro

Telah disetujui untuk dilaksanakan oleh :

Malang, Juli 2011

Eko T.T

(3)

Kata Pengantar

Pertama kami ucapkan puji syukur kepada Tuhan Yang Maha Esa atas penyertaan-Nya

dalam penyelesaian pengerjaan Tugas Akhir Pemrograman WEB ini. Serta ucapan terima kasih

atas bimbingan dari Bapak Eko selaku dosen Pemrograman Web yang telah membimbing kami

dalam kuliah Pemrograman WEB.

Adapun bagian dari web ini banyak penggunaan dari CSS dalam home indexnya. Kami

menyajikan sebuah web sederhana dan juga kami senantiasa membuka tangan dan hati terhadap

(4)

DAFTAR ISI

i. Judul ……… 1

ii. Persetujuan ……….. 2

iii. Kata Pengantar ……….. . 3

iv. Daftar Isi ………. 4

v. Pendahuluan ……… 5

vi. Rancangan Web ……….. 6

vii. Implementasi Web ……….. 7

viii. Penutup ……….. 10

(5)

BAB I

PENDAHULUAN

A.

JUDUL WEB

Informasi Harga Alat Musik

B. LATAR BELAKANG MASALAH

Teknologi komputer sudah menjadi suatu kebutuhan yang penting akhir –

akhir ini, dan itu berdampak pada semua aspek bisnis. Salah satunya adalah alat

musik. Saat ini dunia belantika musik sedang menggeliat, terlebih dengan

penjualan alat-alat musik yang semakin banyak di pergunakan. Sehingga banyak

orang mencari harga alat-alat musik tersebut dan banyak yang menggunakan

internet sebagai wadah dalam pencarian tersebut.

C. Halaman WEB

Tujuan pembuatan halaman web ini adalah untuk memberi informasi yang

sederhana dan mudah untuk dipergunakan dalam melakukan pencarian harga

seputar alat-alat musik.

Meskipun web ini dalam bahasa inggris, tetapi tidak mengurangi

(6)

BAB II

RANCANGAN WEB

Pada halaman awal web kami, di headernya terpampang empat buah menu pilihan. Pada

home berisi perkenalan web kami, yaitu kalimat penjelasan yang ditulis dalam bahasa inggris

mengenai fungsi web ini. Di pilihan menu kedua yaitu Product berisi category dari berbagai

alat-alat music yang tersedia. Bila di klik maka halaman akan berganti pada category yang dipilih. Di

pilihan menu ke tiga yaitu Pricelist berisi nama product dan juga harga tanpa gambar product.

Dan disusun menjadi sebuah daftar kebawah. Dan pada menu contact berisi identitas kami. Dan

disebelah kanan isi halaman web terdapat link untuk memudahkan memilih langsung category

product, beserta contact dan showroom.

Di dalam rancangan ini desain kami focus dengan nuansa music yang berwarna-warni untuk

mensupport background kita yg berwarna hitam dan pada web ini kami merancangnya dengan

sangat sederhana dengan tujuan untuk mempermudah user yang mengaccess web kami agar

mendapatkan informasi yang sebanyak-banyaknya. Kami juga menyediakan contact person

untuk memberikan informasi lebih pada user yang memiliki kesulitan. Pemilihan font Arial pada

web kita ini agar memudahkan user membaca informasi yang ada di web kami, pada halaman

home kami menyediakan fasilitas translate untuk kalimat pembuka dengan cara mengarahkan

(7)

BAB III

IMPLEMENTASI WEB

Home

(8)

PENUTUP

Kesimpulan yang kami dapat dari web kami yang sederhana adalah masih banyak

kekurangan yang mesti dibenahi. Terlepas dari itu kami merasakan bahwa fungsi dari tujuan

yang telah kami tetapkan yaitu sebagai web informasi harga alat-alat musik telah mengambil

tempat yang tepat.

Maka dari itu bila ada kesalahan dalam tulisan ataupun kekurangan dari apa yang telah

dituliskan, kami mohon maaf sebesar-besarnya.

Akhir kata kami ucapkan terima kasih pada pihak-pihak yang telah membimbing kami.

Semoga Web ini dapat memberi suatu contoh dalam penggunaannya yang sederhana bagi

(11)

LAMPIRAN

Listing Program

A. Home

<body>

<li class="current_page_item"><a href="index.html">HOME</a></li> <li><a href="Product.html">PRODUCT</a></li>

<li><a href="Pricelist.html">PRICELIST</a></li> <li></li>

<li><a href="Contact.html">CONTACT</a></li> </ul>

</div> </div>

<h2><a href=#>welcome to mandriva music</a></h2> <div>

<p align="justify"> <span title="Kami mencoba untuk menyajikan data seakurat mungkin baik itu spesifikasi, bentuk dan warna pada gambar produk." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor=''">We try to present the data as accurately as possible whether it's specifications, shapes and colors on the product image. </span><span title="Untuk keakuratan informasi dari produk-produk yang kami tampilkan disarankan untuk juga merujuk ke website resmi produk yang bersangkutan atau menghubungi customer service kami untuk mendapatkan informasi yang lebih lengkap." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor=''">For the accuracy of product information, we display products are advised to also refer to the official website of the product concerned or to contact our customer service to get more complete information. </span><span title="Bila anda menemukan kesalahan dalam informasi yang kami sajikan, silahkan memberitahu kami, sehingga anda ikut membantu pengunjung lain untuk mendapatkan data yang benar." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor=''">If you find errors in the information we present, please notify us, so that you are helping other visitors to get the correct data. </span><span title="Terima Kasih." onmouseover="this.style.backgroundColor='#ebeff9'" onmouseout="this.style.backgroundColor=''">Thank You.</span></p>

</div> </div>

<li>

<li>

<h2>Categories</h2> <ul>

<li><a href="Acoustic Guitars.html">Acoustic Guitars</a><a href="#"></a></li> <li><a href="Bass Amplifier.html">Bass Amplifier</a></li>

(12)

<li><a href="Drums.html">Drums</a><a href="#"></a></li>

<li><a href="Electric Acoustic.html">Electric Acoustic</a><a href="#"></a></li> <li><a href="Electric Bass.html">Electric Bass</a><a href="#"></a></li>

<li><a href="Electric Guitars.html">Electric Guitars</a><a href="Guitars Amplifier.html"></a></li>

<li><a href="Guitars Amplifier.html">Guitars Amplifier</a></li> </ul>

</li> <li>

<h2>Contact</h2> <ul>

<li><a href="#">Deddy (085649289339)</a></li> <li><a href="#">Lailatul (081945553392)</a></li> <li><a href="#">Dimas (08986310993)</a></li> <li></li>

</ul>

<h2>Showroom</h2>

<ul>

<li><a href=#>Jl. Raya Tidar 100</a></li></ul> </li>

</ul> </div>

</div>

</html>

B. Product

<body>

<li class="current_page_item"><a href="Product.html">PRODUCT</a></li> <li><a href="Pricelist.html">PRICELIST</a></li> <li></li> <li></li> <li><a href="Contact.html">CONTACT</a></li> </ul> </div> </div>

(13)

<td width="123" height="31"><a href="Acoustic Guitars.html">Acoustic Guitars</a></td> <td width="123"><a href="Bass Amplifier.html">Bass Amplifier</a></td>

<td width="123"><a href="Digital Piano.html">Digital Piano</a></td> </tr>

<tr>

<td height="28"><a href="Drums.html">Drums</a></td> <td><a href="Electric Acoustic.html">Electric Acoustic</a></td> <td><a href="Electric Bass.html">Electric Bass</a></td> </tr>

<tr>

<td height="27"><a href="Electric Guitars.html">Electric Guitars</a></td> <td><a href="Guitars Amplifier.html">Guitars Amplifier</a></td> <td><a href="Guitars Amplifier.html">Guitars Amplifier</a></td> </tr> </table> <p> </p> </div> </div> <div id="sidebar"> <ul> <li>

<li><a href="Acoustic Guitars.html">Acoustic Guitars</a><a href="#"></a></li>

<li><a href="Bass Amplifier.html">Bass Amplifier</a></li> <li><a href="Digital Piano.html">Digital Piano</a><a href="#"></a></li>

<li><a href="Drums.html">Drums</a><a href="#"></a></li> <li><a href="Electric Acoustic.html">Electric Acoustic</a><a href="#"></a></li>

<li><a href="Electric Bass.html">Electric Bass</a><a href="#"></a></li>

</li> <li>

</ul>

<h2>Showroom</h2>

<ul>

<li><a href="#">Jl. Raya Tidar 100</a></li></ul> </li>

</ul> </div>

(14)

</body> </html>

C. Pricelist

</style> </head> <body> <div id="wrapper">

<div id="header" class="container"> <div id="logo"> <h1> </h1> <p> </p> </div> <div id="menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="Product.html">PRODUCT</a></li>

<li class="current_page_item"><a href="Pricelist.html">PRICELIST</a></li> <li></li> <li></li> <li><a href="Contact.html">CONTACT</a></li> </ul> </div> </div>

<h2><a href="#">pricelist products</a></h2><div> <p> </p>

<h3><a href="#">Acoustic Guitars</a> </h3>

(15)

<h3><a href="#">Bass Amplifier</a></h3> <table width="346" border="1">

<tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr>

<tr>

<td>Russel Beastmaster 150</td> <td>Rp. 2.890.000,-</td> </tr> <tr> <td>Russel RB20</td> <td>Rp. 690.000,-</td> </tr> <tr> <td>Russel RB50</td> <td>Rp. 1.220.000,-</td> </tr> <tr> <td>Russel RB90</td> <td>Rp. 1.270.000,-</td> </tr> <tr>

<td>Russel Storm 100</td> <td>Rp. 2.150.000,-</td> </tr>

<tr>

<td>Russel Thuder Bass 200</td> <td>Rp. 5.120.000,-</td> </tr>

</table> <p></p>

<h3><a href="#">Digital Piano</a> </h3> <table width="346" border="1"> <tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr> <tr> <td>Yamaha CLP320</td> <td>Rp. 10.400.000,-</td> </tr> <tr> <td>Yamaha CLP330</td> <td>Rp. 10.700.000,-</td> </tr> </table> <p></p>

<h3><a href="#">Drums</a> </h3> <table width="346" border="1"> <tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr> <tr> <td>Mapex QE5245T</td> <td>Rp. 4.450.000,-</td> </tr> <tr> <td>Mapex VX5255TA</td> <td>Rp. 5.600.000,-</td> </tr> <tr>

<td>Sonor Force 507</td> <td>Rp. 4.750.000,-</td> </tr>

<tr>

(16)

</tr> <tr> <td>Yamaha Gigmaker</td> <td>Rp. 8.000..000,-</td> </tr> </table> <p></p>

<h3><a href="#">Electric Acoustic</a> </h3> <table width="346" border="1">

<tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr> <tr> <td>Yamaha APX500</td> <td>Rp.1.850.000,-</td> </tr> <tr> <td>Yamaha CX40</td> <td>Rp. 1.040.000,-</td> </tr> <tr> <td>Yamaha FX310</td> <td>Rp. 1.100.000,-</td> </tr> </table> <p></p>

<h3><a href="#">Electric Bass</a> </h3> <table width="346" border="1"> <tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr> <tr> <td>Yamaha RBX170</td> <td>Rp. 1.790.000,-</td> </tr> <tr> <td>Yamaha RBX270J</td> <td>Rp. 1.980.000,-</td> </tr> </table> <p></p>

<h3><a href="#">Electric Guitars</a> </h3> <table width="346" border="1">

<tr>

<th width="205" scope="col">Product Name</th> <th width="125" scope="col">Price</th> </tr> <tr> <td>Ibanez GAX70</td> <td>Rp. 2.000.000,-</td> </tr> <tr> <td>Ibanez GRX20</td> <td>Rp. 1.700.000,-</td> </tr> <tr>

<td>Rockwell Baby Blues</td> <td>Rp. 1.000.000,-</td> </tr> <tr> <td>Rockwell EX22</td> <td>Rp. 1.050.000,-</td> </tr> <tr>

<td>Rockwell RA S</td> <td>Rp. 1.250.000,-</td> </tr>

(17)

<td>Rockwell RLP22</td> <td>Rp. 1.250.000,-</td> </tr> <tr> <td>Rockwell RV22</td> <td>Rp. 1.550.000,-</td> </tr> <tr>

<td>Yamaha Pasifica 012</td> <td>Rp. 1.330.000,-</td> </tr>

<tr>

<td>Yamaha Pasifica 112J</td> <td>Rp. 1.800.000,-</td> </tr>

<tr>

<td>Yamaha Pasifica 112V</td> <td>Rp. 2.550.000,-</td> </tr>

<tr>

<td>Yamaha RGX 121Z</td> <td>Rp. 1.890.000,-</td> </tr>

</table> <p></p>

<h3><a href="#">Guitars Amplifier</a> </h3> <table width="346" border="1">

<tr>

<th scope="col">Product Name</th> <th scope="col">Price</th> </tr> <tr> <td>Russel RG15CD</td> <td>Rp. 650.000,-</td> </tr> <tr> <td>Russel RG30</td> <td>Rp. 1.040.000,-</td> </tr> <tr> <td>Russel RG60</td> <td>Rp. 1.350.000,-</td> </tr> <tr>

<td>Russel ROKR 80</td> <td>Rp. 1.850.000,-</td> </tr>

<tr>

<td>Russel SURFER 60</td> <td>Rp. 1.800.000,-</td> </tr> </table> <p></p> <p> </p> </div> </div> <div id="sidebar"> <ul> <li>

(18)

<li><a href="Digital Piano.html">Digital Piano</a><a href="#"></a></li>

</li> <li>

</ul>

<h2>Showroom</h2>

<ul>

</ul> </div>

</html>

D. Contact

<body>

<div id="header" class="container"> <div id="logo"> <h1> </h1> <p> </p> </div> <div id="menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="Product.html">PRODUCT</a></li> <li><a href="Pricelist.html">PRICELIST</a></li> <li></li> <li></li>

<li class="current_page_item"><a href="Contact.html">CONTACT</a></li> </ul>

</div> </div>

(19)

<h2><a href=#>contact person</a></h2> <div>

<td width="174" height="268"> <img src="images/deddy.jpg" alt="" width="165" height="247" /></td> <td width="286"><p>Deddy Wahyu Hermawan</p>

<p>e-mail : deddy_kempong@yahoo.com</p> <p>telp : 085649289339</p></td>

</tr> <tr>

<td height="236"><img src="images/lailatul.jpg" alt="" width="166" height="221" /></td> <td><p>Lailatul Wahidah</p>

<p>e-mail : syailaalial@yahoo.com</p> <p>telp : 081945553392</p></td> </tr>

<tr>

<td height="200"><img src="images/samid.jpg" alt="" width="166" height="181" /></td> <td><p>Dimas Arsetyo Guntoro</p>

<p>e-mail : dimas.strife@gmail.com</p> <p>telp : 08986310993</p></td> </tr> </table> <p align="justify"> </p> </div> </div> <div id="sidebar"> <ul> <li>

<li>

</li> <li>

</ul>

<h2>Showroom</h2>

<ul>

<li><a href=#>Jl. Raya Tidar 100</a></li> </ul>

</li> </ul>

</div>

(20)

</html>

E. Category(Acoustic Guitars, Drums, Dll)

</style> </head> <body> <div id="wrapper">

<div id="header" class="container"> <div id="logo"> <h1> </h1> <p> </p> </div> <div id="menu"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="Product.html">PRODUCT</a></li> <li><a href="Pricelist.html">PRICELIST</a></li> <li></li> <li></li> <li><a href="Contact.html">CONTACT</a></li> </ul> </div> </div>

<h2><a href="#">acoustic guitars</a> </h2> <div> </div>

<div>

<td width="361"><h3><a href="#"> YAMAHA C330</a></h3> <p>Price Rp. 680.000,-</p></td>

</tr> <tr>

<td><img src="images/acoustic_guitars_yamaha_c390.jpg" alt="" width="90" height="90" /></td> <td><h3><a href="#">YAMAHA C390</a></h3>

<p>Price Rp. 885.000,-</p></td> </tr>

<tr>

<td><img src="images/acoustic_guitars_yamahacs40.jpg" alt="" width="90" height="90" /></td> <td><h3><a href="#">YAMAHA CS40</a></h3>

(21)

</tr> <tr>

<td><img src="images/acoustic_guitarsf310.jpg" alt="" width="90" height="90" /></td> <td><h3><a href="#">YAMAHA F310</a></h3>

<p>Price Rp. 775.000,-</p></td> </tr> </table> <p> </p> </div> <div> </div> </div> <div id="sidebar"> <ul> <li>

</li> <li>

</ul>

<h2>Showroom</h2>

<ul>

</ul> </div>

</html>

F. Style CSS

body {

(22)

background: #010101 url(images/img01.gif) repeat; font-family: Arial, Helvetica, sans-serif;

font-size: 12px; color: #616161; }

h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; color: #810988; }

h1 {

font-size: 2em; }

h2 {

font-size: 2.8em; }

h3 {

font-size: 1.6em; }

p, ul, ol {

margin-top: 0; line-height: 180%; }

ul, ol { }

a {

text-decoration: none; color: #B23C1C; }

a:hover { }

#wrapper {

margin: 0 auto; padding: 0;

background: url(images/img03.gif) no-repeat center top; }

.container {

width: 1000px; margin: 0px auto; }

/* Header */

#header {

width: 900px; height: 150px; margin: 0 auto; padding: 0px 50px;

background: url(images/img01.jpg) no-repeat left top; }

/* Logo */

#logo {

(23)

}

#logo h1, #logo p { }

#logo h1 {

padding: 60px 0px 0px 0px; letter-spacing: -2px; text-transform: lowercase; font-size: 3.8em; }

#logo h1 a {

color: #B23C1C; }

#logo p {

margin: 0;

padding: 0px 0 0 0px; letter-spacing: -1px;

font: normal 18px Georgia, "Times New Roman", Times, serif; font-style: italic;

color: #8E8E8E; }

#logo p a {

color: #8E8E8E; }

#logo a {

border: none; background: none; text-decoration: none; color: #000000; }

/* Splash */

#splash {

width: 960px; height: 300px; margin: 0px auto; }

/* Menu */

#menu {

float: right; width: 500px; height: 90px; margin: 0 auto; padding: 0; }

#menu ul {

float: right; margin: 0;

padding: 85px 0px 0px 0px; list-style: none;

line-height: normal; }

#menu li {

float: left; }

#menu a {

display: block; margin-right: 1px;

(24)

background: url(images/img06.gif) no-repeat left 12px; text-decoration: none;

text-align: center;

font-family: Arial, Helvetica, sans-serif; font-size: 13px;

font-weight: bold; color: #FFFFFF; border: none; }

#menu a:hover, #menu .current_page_item a { text-decoration: none;

color: #B23C1C; }

#menu .current_page_item a { }

/* Page */

#page {

width: 900px; margin: 0 auto; padding: 30px 30px; background: #000000; }

/* Content */

#content {

float: left; width: 580px;

padding: 0px 0px 0px 0px; }

.post {

overflow: hidden; margin-bottom: 40px;

border-bottom: 1px dotted #1B1B1B; }

.post .title {

height: 41px;

padding: 7px 0px 0px 0px; letter-spacing: -1px; }

.post .title a {

border: none;

text-transform: lowercase; color: #B23C1C; }

.post .meta {

margin-bottom: 30px; padding: 0px; text-align: left;

font-family: Arial, Helvetica, sans-serif; font-size: 13px;

font-weight: bold; }

.post .meta .date { float: left; }

(25)

.post .meta a { }

.post .entry {

padding: 0px 0px 20px 0px; padding-bottom: 20px; text-align: justify; }

.links {

padding-top: 20px; margin-bottom: 30px; }

.more {

display: block; float: left; width: 88px; height: 25px;

padding: 2px 0px 0px 0px; margin-right: 10px;

background: url(images/img08.jpg) no-repeat left top; text-align: center;

color: #FFFFFF; }

.comments {

display: block; float: left; width: 88px; height: 25px;

padding: 2px 0px 0px 0px;

background: url(images/img08.jpg) no-repeat left top; text-align: center;

color: #FFFFFF; }

/* Sidebar */

#sidebar {

float: right; width: 280px; margin: 0px;

padding: 0px 0px 0px 0px; color: #787878;

}

#sidebar ul { margin: 0; padding: 0; list-style: none; }

#sidebar li { margin: 0; padding: 0; }

#sidebar li ul {

margin: 0px 0px; padding-bottom: 30px; }

#sidebar li li {

line-height: 35px;

border-bottom: 1px dotted #1B1B1B; margin: 0px 30px;

(26)

#sidebar li li span { display: block; margin-top: -20px; padding: 0; font-size: 11px; font-style: italic; }

#sidebar li li a {

#sidebar h2 {

height: 38px; padding-left: 30px; letter-spacing: -.5px; font-size: 1.8em; color: #B23C1C; }

#sidebar p {

margin: 0 0px;

padding: 0px 30px 20px 30px; text-align: justify;

}

#sidebar a {

border: none; color: #494949; }

#sidebar a:hover {

text-decoration: underline; color: #B23C1C; }

/* Calendar */

#calendar { }

#calendar_wrap { padding: 20px; }

#calendar table { width: 100%; }

#calendar tbody td { text-align: center; }

#calendar #next { text-align: right; }

/* Three Column Footer Content */

#footer-content { }

#footer-bg {

overflow: hidden; width: 890px;

background: url(images/img05.jpg) no-repeat left bottom; }

(27)

margin: 0px;

padding: 0px 0px 20px 0px; letter-spacing: -1px; text-transform: lowercase; font-size: 26px; color: #FFFFFF; }

#footer-content ul { margin: 0px;

#footer-content a { }

#column1 { float: left; width: 290px; margin-right: 30px; }

#column2 { float: left; width: 280px; }

#column3 {

float: right; width: 260px; }

/* Footer */

#footer {

height: 50px; margin: 0 auto; padding: 0px 0 15px 0;

font-family: Arial, Helvetica, sans-serif; }

#footer p {

margin: 0; padding-top: 10px; line-height: normal; font-size: 9px;

text-transform: uppercase; text-align: center; color: #202020; }

#footer a {

color: #202020; }

#marketing {

overflow: hidden; margin-bottom: 30px; padding: 20px 0px 10px 0px; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }

(28)

color: #345E9B; }

#marketing .text2 { float: right; }

#marketing .text2 a { display: block; width: 252px; height: 38px;

background: url(images/img07.jpg) no-repeat left top; letter-spacing: -2px;