Dokumen tersebut merupakan laporan proyek aplikasi website bernama Speed_Shop yang dibuat oleh Ade Thariq F. Laporan tersebut membahas tentang instalasi perangkat lunak pengembang seperti XAMPP dan Photoshop, rancangan aplikasi berupa flowchart, serta pembuatan aplikasi website beserta databasenya untuk menampung komentar pengunjung.

1. TUGAS LAPORAN PROYEK APLIKASI
”WEB= SPEED_SHOP”
Oleh
ADE THARIQ F
NISN : XXXXXXXXX
Kelas X RPL 1
SMK NEGERI 1 DEPOK
2013

2. DAFTAR ISI
Halaman
LEMBAR PENGESAHAN .................................................................................................................. ii
KATA PENGANTAR ...........................................................................................................................v
BAB I. INSTALASI SOFTWARE PENGEMBANG............................................................................1
1.1. XAMPP ................................................................................................................ 1
1.2. Editor gambar (Adobe Photoshop) ..................................................................... 2
BAB II. RANCANGAN APLIKASI................................................................................................. 4
2.1. Flowchart............................................................................................................. 4
BAB III. PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE.......................................6

3. KATA PENGANTAR
Puji syukur penulis panjatkan ke hadirat Allah SWT, yang atas rahmat dan karunia
Nya penulis dapat menyelesaikan tugas Laporan Proyek Akhir demi memenuhi
standar kenaikan kelas. Shalawat dan salam tercurah kepada Rasulullah Muhammad
SAW beserta keluarganya.
Selama melaksanakan tugas akhir ini, penulis mendapat bantuan dan dukungan dari
berbagai pihak. Untuk itu, penulis ingin mengucapkan terima kasih kepada
bapak/ibu guru yang telah memberikan kesempatan kepada saya untuk mengerjakan
dan menyelesaikan tugas ini. Mohon bimbingan untuk lebih baik.
Penulis menyadari bahwa laporan ini bukanlah tanpa kelemahan, untuk itu kritik dan
saran yang bersifat membangun sangat diharapkan.
Akhir kata, semoga laporan ini dapat dijadikan ilmu yang bermanfaat bagi semua
umumnya dan bagi saya khususnya.
Depok, Mei 2013
Penulis

4. BAB I
INSTALASI SOFTWARE PENGEMBANG
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

5. 8. Web yang kita buat, akan beralamat di http://localhost, akses dengan browser
sesuai selera anda
1.2. 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.

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

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

8. 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 SPEED_SHOP
Start
Menu
Utama
Tampil
Home Profil Contanct
Tampil
Home
Tampil
Profil dan
Input
Komentar
Tampil
Contact
Y Y Y
N
N
N
Simpan Komentar
END

9. BAB III
PEMBUATAN APLIKASI WEBSITE BERSERTA DATABASE
1. Pastikan aplikasi xampp telah terinstall di komputer kamu dan telah kamu
jalankan
2. Buka browser anda, seperti gambar yang ada di bawah ini:
3. Ketikkan " localhost/phpmyadmin " (tanpa tanda kutip) pada browser anda yang
diberi tanda lingakaran merah seperti gambar di bawah ini. Lalu tekan enter
4. Setelah menekan enter, anda akan masuk pada phpMyAdmin. Tampilannya
seperti yang ada di bawah ini.

10. 5. Setelah itu, ganti bahasa Deutsch - German menjadi English yang sudah diberi
tanda lingkaran merah, lalu klik menu SQL yang juga sudah diberi tanda lingkaran
merah.
6. Setelah masuk menu SQL, silahkan tulis script (tanpa tanda kutip):
“ create database coba “
Lalu klik Go.

11. 7. Setelah klik Go, maka akan muncul proses loading. Setelah proses loading selesai,
maka akan muncul database bernamakan "coba" disebelah kiri yang diberi tanda
lingkaran merah seperti gambar di bawah ini.
8. Setelah database terbuat, selanjutnya adalah membuat table di dalam database
tersebut. Lalu klik database "coba" tadi, lalu klik menu SQL kembali.
9. Setelah masuk menu SQL, silahkan tulis script berikut :
CREATE TABLE IF NOT EXISTS `komentar` (
`nama` varchar(30) NOT NULL,

12. `email` varchar(40) NOT NULL,
`komentar` text NOT NULL
)
Lalu klik Go
10. Setelah meng-klik Go, maka akan muncul proses loading. Setelah proses loading
selesai, maka akan muncul table bernamakan "komentar" dalam database "coba"
yang bisa dilihat di sebelah kiri.
11. Dalam keadaan ini, table "komentar" masih dalam keadaan kosong. Untuk
membuat record nama admin pada table "komentar", maka pilih menu SQL lagi dan
ketik script berikut.
INSERT INTO `komentar` (`nama`, `email`, `komentar`) VALUES
('ade', 'ade', 'ade')
Jika sudah, lalu klik Go.
13. Setelah meng-klik Go, maka akan muncul proses loading. Tunggu hingga proses
loading selesai. Dan jika berhasil, klik table login untuk melihat recordnya seperti
tampilan di bawah ini.

13. 14. Dengan ini, kerangka database telah dibuat. Selanjutnya kita akan membuat page
.html profil dan menyambungkannya ke database tersebut. Sehingga, saat kita
berhadapan dengan halaman profil.html, kita dapat melihat dan memasukkan
komentar.
15. Sebelum itu, pastikan kamu telah membuat folder kosong untuk website kamu di
dalam folder installan XAMPP yang berletak di local disk c/xampp/htdocs/ dan buat
folder baru disitu dengan nama yang kamu kehendaki. Contoh pada study kasus kita
buat folder speed_shop.
16. Setelah itu, kita langsung membuat file html menggunakan notepad. Yang
pertama kita buat file profil.php dengan cara memasukan atau mengetik source code
di bawah ini :
<html>
<head>

14. <title>Speed Shop</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div style="position:absolute; top:135px;
right:175px">
<FORM method=GET
action="http://www.google.co.id/search" target="_blank"
style="width:200px; height:30px;">
<input name="q" type="text" id="q"
maxlength="200" name="q" onfocus="if (this.value == 'Search
Google') {this.value = '';}" value="Search Google" onblur="if
(this.value == '') {this.value = 'Search Google';}"
style="border:#FF9900 solid 1px; height:20px; width:150px;
margin-left:10px;" />
<input type=hidden name=hl value="id" />
<input type="image" name="button" alt="Search"
src="images/go.png" style="width:20px; height:20px;
float:right; margin-right:10px;"/>
</form></div>
</div>
<div id="menu_atas">
<a href="index.html">HOME</a>
<a href="profil.php">PROFILE</a>
<a href="contact.html">CONTACT</a>
</div>
<div id="tengah">
<h2>Profile</h2>
Tentang www.speed-shop.vacau.com<br>

15. Bagi anda yang berdomisili di kota Depok dan
sekitarnya<br>
atau kota-kota besar Jawa Barat<br>
Kami menyediakan berbagai macam suku cadang<br>
motor bebek,matic dan racing untuk modifikasi.<br>
Kami memberikan kelengkapan produk,jaminan kualitas dan
harga<br>
yang kompetitif,plus kemudahan dan kenyamanan berbelanja
spare part motor.<br>
selain menjual spare part kami juga melayani jasa
modifikasi<br>
motor bebek,matic dan racing.untuk lebih jelas hubungi
kami di<br>
contact kami.<br>
<br>
Jual Aksesoris Motor Lengkap - Aksesoris Sepeda
Motor<br>
HNS MOTOPARTS merupakan perusahaan aksesoris motor perorangan
yang pertama kali didirikan sejak awal 2009.<br>
Kita memulai bisnis aksesoris motor dari sebuah toko di kebun
jeruk III, Jakarta.<br>
Kami menjual berbagai aksesoris motor, helm, dan bahkan
perlengkapan buat para bikers.<br>
Sampai pada saat sekarang, pelanggan setia HNS MOTOPARTS
telah merambah ke seluruh Indonesia dari Sabang sampai
Merauke.<br>
Barang aksesoris kita kebanyakan berasal dari Thailand,
Malaysia, China, Taiwan dan Indonesia.<br>
<br>
Dikarenakan banyaknya permintaan dari customer kita untuk
melihat produk kita,<br>

16. maka kami mebuat website www.hnsmotoparts.com sebagai media
untuk mempermudah para bikers untuk berbelanja aksesoris
motor dan helm melalui internet.<br>
Kami berharap dengan adanya website ini, para bikers dapat
mencari keperluan motor dengan effective dan se-efficient
mungkin. <br>
Bikers dapat melihat-lihat dan memesan produk kami (7
hari,24 jam). <br>
Jika Bikers belum menemukan yang anda cari pada website kami
hari ini, silahkan mengulang pencarian secara berkala karena
kami selalu menambahkan item-item baru.<br>
<br>
HNS MOTOPARTS kini juga menyediakan perlengkapan aksesoris
motor dengan harga grosir sehingga bagi para pelanggan yang
ingin membuka usaha dapat menjalin kerja sama dengan
kami.<br>
Kami dengan senang hati akan membantu mengembangkan usaha
anda. <br>
Kami juga membuka kesempatan kepada para suppliers untuk
menjalin kerja sama dalam memasarkan produk anda.<br>
Kepuasan dan Kepercayaan anda adalah yang paling kita
utamakan.<br>
<h3>Komentar</h3>
<form method='post' action='input_komentar.php'>
Nama<br><input type='text' name='nama'><br>
E-Mail<br><input type='text' name='email'><br>
Komentar<br><textarea name='komentar'></textarea><br>
<input type='submit' name='submit' value='Kirim'>
</form><br>
<?php
mysql_connect('localhost','root','') or die('gagal koneksi');

17. mysql_select_db('atf');
$query=mysql_query("select * from komentar");
while($h=mysql_fetch_array($query)){
echo"<div style='border-bottom:1px solid;
width:90%;'><b>$h[nama](<i>$h[email]</i>)</b><br>$h[komentar]
</div><br>";
}
?>
</div>
<div id="footer">
&copy;Speed Shop - 2012 | created by: Ade Thoriq
Fadlilah
</div>
</div>
</body>
</html>
Dan kemudian simpan dengan nama profil.php. maka hasil yang ditampilkan adalah
sebagai berikut:

18. 17. Untuk memproses input komentar kita buat lagi file .php menggunakan notepad
dan tulislah source code dibawah ini :
<?php
mysql_connect('localhost','root','') or die('gagal koneksi');
if($_POST){
mysql_select_db('atf');
mysql_query("insert into komentar
values('$_POST[nama]','$_POST[email]','$_POST[komentar]')");
}
header('location:profil.php');
?>
Dan kemudian simpan dengan nama input komentar.php. Setelah itu, kita uji coba
memasukkan data.

19. Tekan tombol Kirim untuk memasukkan data. Dan setelah itu hasilnya adalah
sebagai berikut:
18. Setelah program input komentar selesai kita buat, maka selanjutnya kita buat
menu lainnya menggunakan notepad seperti cara pada pembuatan file .php atau
.html sebelumnya . Berikut adalah source codenya :
<html>
<head>
<title>Speed Shop</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js"></script>
<script type="text/javascript" src="coin-slider/jquery-
1.4.2.js"></script>
<script type="text/javascript" src="coin-slider/coin-
slider.min.js"></script>
<link rel="stylesheet" href="coin-slider/coin-slider-
styles.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {

20. $('#coin-
slider').coinslider({ width: 967, height:300, delay: 5000 });
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<div
style="position:absolute; top:135px; right:175px">
<FORM method=GET
action="http://www.google.co.id/search" target="_blank"
style="width:200px; height:30px;">
<input name="q" type="text" id="q"
maxlength="200" name="q" onfocus="if (this.value == 'Search
Google') {this.value = '';}" value="Search Google" onblur="if
(this.value == '') {this.value = 'Search Google';}"
style="border:#FF9900 solid 1px; height:20px; width:150px;
margin-left:10px;" />
<input type=hidden name=hl value="id" />
<input type="image" name="button" alt="Search"
src="images/go.png" style="width:20px; height:20px;
float:right; margin-right:10px;"/>
</form></div>
</div>
<div id="menu_atas">
<a href="index.html">HOME</a>
<a
href="profil.php">PROFILE</a>
<a
href="contact.html">CONTACT</a>
</div>
<div id="tengah">
<h2>Home</h2>
<div id='coin-slider'>
<img
src="images/1.jpg"/>
<img
src="images/2.jpg"/>
<img
src="images/3.jpg"/>
</div>
Selamat datang di www.speed-shop.vacau.com<br>
Disini kami menyediakan accessories motor matic<br>

21. dan sparepart racing Thailand lengkap dan terpercaya dengan
harga yang terjangkau,<br>
dimana sangat memudahkan Anda mencari dan berbelanja produk-
produk yang anda butuhkan.<br>
<br>
Kenyamanan berbelanja, Kepuasan dan Kepercayaan,<br>
disini kami utamakan untuk anda dengan Keamanan pengiriman
barang tiba ditangan anda.<br>
Nikmati kemudahan berbelanja online bersama kami... <br>
<br>
Happy shopping...<br>
</div>
<div id="footer">
&copy;Speed Shop - 2013 |
created by: Ade Thoriq Fadlilah
</div>
</div>
</body>
</html>
Dan simpan dengan nama index.html, dan hasilnya sebagai berikut:
Setelah itu kita akan membuat file menu tambahan yaitu file contact.php atau .html
Berikut adalah source codenya :
<html>
<head>
<title>Speed Shop</title>

22. <link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div style="position:absolute; top:135px;
right:175px">
<FORM method=GET
action="http://www.google.co.id/search" target="_blank"
style="width:200px; height:30px;">
<input name="q" type="text" id="q"
maxlength="200" name="q" onfocus="if (this.value == 'Search
Google') {this.value = '';}" value="Search Google" onblur="if
(this.value == '') {this.value = 'Search Google';}"
style="border:#FF9900 solid 1px; height:20px; width:150px;
margin-left:10px;" />
<input type=hidden name=hl value="id" />
<input type="image" name="button" alt="Search"
src="images/go.png" style="width:20px; height:20px;
float:right; margin-right:10px;"/>
</form></div>
</div>
<div id="menu_atas">
<a href="index.html">HOME</a>
<a href="profil.php">PROFILE</a>
<a href="contact.html">CONTACT</a>
</div>
<div id="tengah">
<h2>Contact</h2>
Anda dapat menghubungi Kami pada layanan berikut
:<br>
Telepon dan SMS : 089652148612<br><br>
<a href='http://facebook.com' target='_blank'><img
src="images/fb.jpg" width='60'/></a>
<a href='http://twitter.com' target='_blank'><img
src="images/twitter-logo-1.jpg" width='60'/></a>
</div>
<div id="footer">
&copy;Speed Shop - 2012 | created by: Ade Thoriq
Fadlilah
</div>
</div>
</body>
</html>
Dan simpan dengan nama index.html, dan hasilnya sebagai berikut: