Bab IV Hasil dan Analisis
4.1 Hasil Karya / Implementasi
Implementasi adalah pelaksanaan sebuah aplikasi. Dalam implementasi aplikasi ini menampilkan rancangan antar muka. Pada aplikasi ini, user dapat mengetahui tentang apa itu Website perusahaan design, dan juga produk produk yang ditawarkan. Perancangan website yang telah dilakukan , diimplementasikan menggunakan perangkat lunak adobe dreamweaver CS 3.
Dalam pembuatan Website ini, merancang pembuatan website dengan menggunakan flowchart yang sudah dijelaskan pada halaman sebelumnya. Dari tahap-tahap rancangan tersebut, maka dihasilkan sebuah website perusahaan design.
4.1.1. Tampilan Program
Berikut ini merupakan tampilan website perusahaan design:
24
a) Tampilan Awal
Gambar 4.1 Tampilan awal
Pada saat website pertama kali dijalankan, akan muncul tampilan seperti pada gambar 4.1, saat user klik button
About, maka akan lanjut ke halamanselanjutnya, seperti pada
gambar 4.2.
<ul>
<li><a href="index.html"class="selected">Home</a></li>
<li><a href="about.html">About Us</a>
</li>
<li><a href="Form_Register.html">Register</a>
</li>
<li><a href="Galery.html">Galery</a></li>
<li><a href="contact.html">Contact</a></li>
25
b) Tampilan Halaman About Us
Gambar 4.2 Tampilan halaman About Us
Pada gambar 4.2 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “about us”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi tentang profil perusahaan
<div class="staff_box">
<div class="col_3 col_l float_r">
<h4>Design & Logo</h4>
<p>Meliputi Pembuatan desain grafis, dan juga logo-logo untuk pribadi, intansi maupun perusahaan.</p>
</div>
<div class="cleaner"></div>
26
c) Tampilan Halaman Register
Gambar 4.3 Tampilan halaman Register
Pada gambar 4.3 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “Register”, maka akan
ditampilkan tampilan seperti pada gambar ini. Berisi form-form untuk melakukan registrasi.
<tr>
<td width="317">User ID</td>
<td width="7">:</td>
<td width="210"><form id="form1" name="form1" method="post" action=""
</form></td>
<td>Password</td>
<td>:</td>
27
d) Tampilan Halaman Galery
Gambar 4.4 Tampilan halaman Galery
Pada gambar 4.4 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “Galery”, maka akan ditampilkan tampilan seperti pada gambar ini. Berisi gambar produk dari perusahaan.
<div class="post_box">
<h2><a href="Gal_Log.php">Desain Logo</a></h2>
<img src="images/blog/02.jpg" alt="Image 02" />
<div class="post_text">
<p>Melayani pembuatan design logo,Stampeel Dll Sesuai Kebutuhan Anda.</p>
<a href="blog_post.html" class="more">Pesan</a>
28
1. Tampilan Halaman Web Design
Gambar 4.5 Tampilan halaman web design
Pada gambar 4.5 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “web
design”, maka akan ditampilkan tampilan seperti
pada gambar ini. Berisi gambar produk website dari perusahaan.
<div class="post_box">
<h2>Produk website kami</h2>
<p><img src="images/WEB/web1.jpg" width="630" height="315" /></p>
<div class="cleaner"></div>
</div>
<h3><img src="images/WEB/web2.jpg" width="630" height="315" /></h3>
29
2. Tampilan Halaman Desain Logo
Gambar 4.6 Tampilan halaman desain kogo
Pada gambar 4.6 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “desain logo”, maka akan ditampilkan tampilan seperti pada
gambar ini. Berisi gambar produk desain logo dari perusahaan.
<h2>Desain Logo kami</h2>
<p><img src="images/LOG/log3.jpg" width="350" height="275" /></p> <p><br class="cleaner h20" /> </p> <p> </p> <p> </p> <p> </p>
30
3. Tampilan Halaman Program Aplikasi
Gambar 4.7 Tampilan halaman desain program aplikasi
Pada gambar 4.7 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “program
aplikasi”, maka akan ditampilkan tampilan seperti
pada gambar ini. Berisi gambar produk program aplikasi dari perusahaan.
e) Tampilan Halaman Contact
<h2>Program Aplikasi</h2>
<p><strong>Aplikasi Rental CD/DVD</strong></p>
<p><img src="images/PAPP/papp1.jpg" width="350" height="275" /></p>
<p> </p>
<p> </p>
<p> </p>
31
Gambar 4.8 Tampilan halaman Contact
Pada gambar 4.8 menampilkan beberapa menu yang dapat dipilih oleh user. Jika user memilih “Contact”, maka akan
ditampilkan tampilan seperti pada gambar. Berisi form-form untuk menghubungi perusahaan..
<form method="post" name="contact" action="#">
<label for="author">Name:</label> <input type="text" id="author" name="author" class="required input_field" />
<div class="cleaner h10"></div>
<label for="email">Email:</label> <input type="text" id="email" name="email" class="validate-email required input_field" />
<div class="cleaner h10"></div>
<label for="subject">Subject:</label> <input type="text" name="subject" id="subject" class="input_field" />
32