Laporan akhir

TUGAS LAPORAN PROYEK APLIKASI

”WEB= SPEED_SHOP”

Oleh

ADE THARIQ F

NISN : XXXXXXXXX

Kelas X RPL 1

SMK NEGERI 1 DEPOK

2013

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

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

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

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.

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

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.

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.

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,

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

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>

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

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>

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');

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:

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.

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() {

$('#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>

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>

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