Embed Size (px)
Citation preview
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
1
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
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.
3
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.
4
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
5
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
6
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.
7
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.
8
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.
9
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.
10
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>
11
<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>
12
<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>
13
<?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">
©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:
14
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.
15
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>
16
<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"/>
17
</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">©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 .htmlBerikut adalah source codenya : <html><head>
18
<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">
©Speed Shop - 2012 | created by: Ade Thoriq Fadlilah
</div></div></body></html>
Dan simpan dengan nama index.html, dan hasilnya sebagai berikut:
19
20
