MARI BELAJAR :)

Morning Worl, morning July, morning All readers :))
Finally, selesai juga tugas Pemrograman Website yg udah dari lama banget di bikin. Tugas ini di bikin untuk syarat lulusny Ujian Akhir Semester 4..
Nah, dsini akan saya share Laporan Akhir dari tugas tersebut, yang mana tau ntar bermafaat buat kamu :)
Oke, let's check this out!

LEMBAR PERSETUJUAN

UJIAN PEMROGRAMAN WEB

SEMESTER GENAP TAHUN AKADEMIK 2011/2012

“Toko Online Tas Fitri”

Disusun Oleh

NAMA : Fitri Apriani

NIM : 100155201019

Menyetujui,

Dosen Mata Kuliah

( Sulfikar Sallu, S.Kom, M.Kom)

NIPY: 751070108.

JURUSAN TEKNIK INFORMATIKA S-1

FAKULTAS TEKNIK

UNIVERSITAS MARITIM RAJA ALI HAJI

2012

Kata Pengantar

Puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta karunia-Nya kepada penulis sehingga penulis berhasil menyelesaikan Makalah ini yang alhamdulillah tepat pada waktunya yang berjudul “Website Toko Fitri”.

Makalah ini berisikan tentang informasi tentang Toko Fitri atau yang lebih khususnya membahas tentang pembuatan desain, dan segala sesuatu yang diperlukan dalam webste ini juga kegunaan website ini.Diharapkan Makalah ini dapat memberikan informasi kepada kita semua tentang bagaimana membuat Website dengan mudah.

Penulis menyadari bahwa makalah ini masih jauh dari sempurna, oleh karena itu kritik dan saran dari semua pihak yang bersifat membangun selalu penuli harapkan demi kesempurnaan makalah ini.

Akhir kata, penulis sampaikan terima kasih kepada semua pihak yang telah berperan serta dalam penyusunan makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa meridhai segala usaha kita. Amin.

Batam, 2012

Fitri Apriani

DAFTAR ISI

LEMBAR PERSETUJUAN .................................................................................................. i

KATA PENGANTAR ......................................................................................................... ii

DAFTAR ISI ..................................................................................................................... iii

BAB I PENDAHULUAN ....................................................................................................... 1

1.1 Latar Belakang ................................................................................................................ 1

1.2 Batasan Masalah ............................................................................................................ 2

1.3 Tujuan ............................................................................................................................. 2

BAB II LANDASAN TEORI .................................................................................................. 3

BAB III DESAIN DAN IMPLEMENTASI ............................................................................... 5

3.1 DFD ................................................................................................................................ 5

3.2 Site Map ........................................................................................................................... 5

3.3 Tata cara install Database .............................................................................................. 6

3.4 Cara Membuat DataBase ............................................................................................... 11

3.5 Layout .............................................................................................................................. 12

3.6 Source Code...................................................................................................................... 14

BAB IV PENGUJIAN ............................................................................................................ 20

4.1 Pengujian Insert ............................................................................................................... 20

4.2 Pengujian Edit ................................................................................................................. 20

4.3 Pengujian Delete ............................................................................................................. 21

BAB V PENUTUP .................................................................................................................. 22

5.1 Kesimpulan ...................................................................................................................... 22

5.2 Saran ................................................................................................................................ 22

DAFTAR PUSTAKA ............................................................................................................. 23

BAB I

PENDAHULUAN

1.1 Latar Belakang

Dari segi bahasa, toko online berasal dari dua suku kata, Toko dan Online. Menurut Kamus Besar Bahasa Indonesia, toko berarti sebuah tempat atau bangunan permanen untuk menjual barang-barang (makanan, minuman, dan sebagainya). Sedangkan online yang terjemahan bahasa indonesianya adalah dalam jaringan menurut Wikipedia adalah keadaan di saat seseorang terhubung ke dalam suatu jaringan ataupun sistem yang lebih besar. Jadi berangkat dari dua pengertian secara bahasa tersebut kita dapat mengartikan toko online sebagai tempat terjadinya aktifitas perdagangan atau jual beli barang yang terhubung ke dalam suatu jaringan dalam hal ini jaringan internet.

Toko online adalah tempat kita bisa memajang barang dagangan kita di internet dan dilakukan transaksi dengan pembeli melalui mesin di web. Saat ini toko online di Indonesia mulai berkembang pesat. Semakin banyak orang yang menggunakan internet untuk membeli dan menjual barang ataupun jasa. Toko online di indonesia memang sangat cocok sekali karena letak geografis indonesia yang kepulauan, memungkinkan kita untuk membeli barang tanpa perlu datang ke tempat penjual.

Konsep online shopping atau Toko online menyediakan banyak kemudahan dan kelebihan jika dibandingkan dengan konsep belanja yang tradisional. Selain proses transaksi bisa menjadi lebih cepat, di internet telah disediakan hampir semua barang yang biasanya dijual secara lengkap

Dunia internet juga menjadi sumber inspirasi bagi penulis untuk membuat toko online ini. Penulis menyadari adanya beberapa keuntungan dari membuat toko online ini yaitu biaya lebih murah karena tidak perlu tanpa harus menyewa toko.

Maka dari itu, toko online sangat berguna bagi orang yang suka berbelanja namun tidak mempunyai waktu yang banyak untuk berbelanja secara langsung dengan mengunjungi toko sebenarnya.

1.2 Batasan Masalah

Batasan masalah dari tugas akhir yang diajukan adalah sebagai berikut:

1. Sistem ini diimplementasikan pada satu toko tas online.

2. Target pasar dari toko tas online yang menerapkan teknologi di atas adalah masyarakat pengguna internet

3. Pembuatan toko tas online ini memakai aplikasi Adobe Dreamweaver, php editor, xampp, dan sql yog.

1.3 Tujuan

Adapun tujuan yang ingin dicapai dalam pembuatan website adalah sebagai berikut :

1. Untuk memenuhi tugas Ujian Akhir Semester genap dalam mata kuliah Pemrograman Website.

2. Mempermudah orang yang suka berbelanja namun tidak mempunyai waktu yang banyak untuk berbelanja secara langsung dengan mengunjungi toko sebenarnya.

BAB II

LANDASAN TEORI

Dalam pembuatan website ini tentunya ditunjang oleh beberapa aplikasi diantaranya :

1. Adobe Dreamver

2. Php Editor

3. Xampp

4. SqlYog

5. Photoshop CS 3

Berikut akan dijelaskan tentang teori dari masing-masing aplikasi tersebut.

1. Adobe Dreamweaver

Adalah adalah sebuah software HTML editor profesionalyang digunakan untuk mendisainsecara visual dan mengelola situs webs maupun halaman web. Dreamweaver memudahkan kita dalam pembuatan website karena tidak perlu berhubungan langsung dengan coding html dan lainnya karena dilengkapi dengan berbagai macam tools pendukung. Dreamweaver dilengkapi dengan beberapa fasilitas diantaranya :

· Referensi HTML

· CSS dan Java Script

· Javascript debugger

· Editor kode

2. PHP Editor

PHP Singakatan dari Personal Home Page. Penggunaan Php editor dalam pembuatan website penulis adalah untuk mengkonversikan bahasa html menjadi php agar mudah dikoneksikan dengan database.

3. Xampp

Merupakan singkatan dari X (empat system operasi apapun), Apache, MySql, Php, Perl. Xampp merupakan aplikasi yang menyediakan paket perangkat lunak kedalam satu buah paket. Dalam paketnya sudah terdapat Apache (web server). MySql (database), Php (server side scripting), Perl, FTP server, PhpMyadmin.

4. SqlYog

SQLyog adalah salah satu software yang bisa digunakan sebagai gui database manager untuk database MySQL. Dengan aplikasi ini kita dapat membuat databse baru, mengupdate tabel, menghapus tabel, menambahkan entry baru, dan masih banyak lagi.

5. PhotoShop CS 3

Adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto / gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar / foto. Dalam mhal ini penulis menggunakan software ini untuk mendisain banner dan lain-lain.

Selain penggunaan aplikasi – aplikasi yang dibutuhkan oleh wesite yaitu beberapa bahasa pemrogaraman website yang penulis gunakan adalah html, php, dan css.

a. HTML

Merupakan singkatan dari HyperText Markup Language adalah script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet . HTML sendiri adalah suatu dokumen teks yang biasa yang mudah dimengerti dibanding bahasa pemrograman lainnya.

b. PHP

Adalah bahasa pemrograman web atau scripting language yang di desain untuk web. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.

c. CSS (Cascading Style Sheet)

Istilah CSS ini sering kali kita dengar ketika berurusan dengan mendesain halaman web. CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML. Ada beberapa kelebihan penggunaan CSS yaitu halaman web menjadi tidak padat, lebih mudah mengganti tampilan web dengan cukup mengganti nilai dan definsi pada satu file css saja.

BAB III

DESAIN DAN IMPLEMENTASI

3.1 DFD

Gambaran alur data yang terdapat dalam web.

Gambar 3.1. DFD Design Web

3.2 Site Map

Gambar site map website.

Gambar 3.2. Gambar site map Web

3.3 Install Database

Dalam hal ini, penulis menggunakan database SqlYog. Langkah - langkah penginstallannya adalah :

a. Double Klik pada installer Sqlyog, setelah double klik pada file tersebut untuk memulai penginstalan. Klik Next.

b. Pilih custom untuk memilih tipe penginstallan.

c. Kemudian klik change untuk mengubah folder tujuan penginstallan.

d. "Look in" tujukan ke C:Apache/Server, kemudian buat sebuah folder dengan nama mysql atau anda bisa langsung mengetikkan di "Folder Name" dengan C: \Apache Server\mysql\ kemudian klik OK.

e. Klik Next untuk melanjutkan.

f. Masih ada kesempatan untuk mengubah seandainya masih ada yang kurang tepat, tapi jika semua sudah beres, tinggal klik install.

g. Tunggu hingga proses penginstallan selesai.

h. Klik Next.

i. Next again

j. Tandai configure The Mysql server now, klik Finish.

k. Klik Next

l. Pilih Detailed Configuration, kemudian next.

m. Pilih developer machine, klik next.

n. Tandai multifunctional database, kemudian next.

o. Biarkan saja tanpa perubahan, klik next.

p. Pilih Decision support, klik next.

q. Tandai enable TCP/IP Networking dan Enable Script Mode, kemudian next.

r. Pilih Best Support For Multilingualism, klik Next.

s. Tandai Install as Windows Service, klik next.

t. Pilih modify security, kemudian isikan password. Klik next.

u. Klik Execute untuk memproses segala pengaturan yang telah dibuat.

Setelah semua berjalan dengan baik, Klik finish.

3.4 Membuat Database yang digunakan

· Buka SqlYog yang sudah terinstall, klik continue, lalu klik connect.

· Klik kanan pada root@localhost, lalu klik create database, isi Database nama,lalu klik create.

· Lalu klik database yang sudah di buat tadi, klik kanan pada tabel, pilih create tabel

· Isi Field name, Datatype , Lenght, Default, dan centang pada PK, Auto Increment Not null, unsigned, dan zerofil jika dibutuhkan, serta isikan comment jika ada, lalu klik create table, lalu ketikkan nama tabelnya.

3.5 Layout

o Gambar di bawah merupakan halaman awal atau hompage dari website penulis. Terdapat penjelasan singkat mengenai toko tas online ini, link Follow me yang terdiri dari Facebook dan twitter, dan terdapat alamat si pemilik website.

Gambar 3.3.Homepage

o Gambar di bawah merupakan halaman collection yang berisi kumpulan tas - tas.

Gambar 3.4 Halaman Collection

o Gambar di bawah merupakan halaman pemesanan yang di dalamnya terdapat cara - cara untuk memesan tas di dalam toko tas online ini.

Gambar 3.4 Halaman Pemesanan

o Gambar di bawah merupaka halaman terakhir yaitu halaman Contact us yang didalamnya berisi contact si pemilik website dan form pemesanan

Gambar 3.4 Halaman Contact Us

3.6 Source Code

Kode program pada website yang telah di buat.

1. Home

<!DOCTYPE html>

<HTML>

<HEAD>

<TITLE>Toko Fitri</TITLE>

<!--[if IE 9]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 6]>

<![endif]-->

</HEAD>

<BODY>

<php

<div>

</div>

<ul>

<li><a href="collection.php">Collection</a></li>

<li><a href="pemesanan.php">Pemesanan</a></li>

<li><a href="contact.php">Contact Us</a></li>

</ul>

</div>

<div>

<div>

<span>Follow Me</span>

<ol>

<li><a href="http://www.facebook.com/fitri.apriani11" target="_blank" class="facebook">Facebook</a></li>

<li><a href="http://twitter.com/#!/trian_11" target="_blank" class="twitter">Twitter</a></li>

</ol>

<span>Address</span>

<p>Perum Taman Sari Hijau Blok D5 No.12, Tiban, Batam, Kepri</p>

</div>

</form>

<div>

<h1><strong>Welcome</strong></h1>

</a></h1>

<p><span style="font-size:18px">Website ini adalah toko tas online yang menyediakan berbagai tas wanita yang sedang up to date saat ini. Berbagai pilihan warna dan model ditawarkan di toko ini.</span></p>

<p><span style="font-size:18px">Dan yang lebih penting lagi, semua harga tas di Toko Fitri ini adalah Everything all about</span><strong><span style="font-size:18px">75.000 *</span></strong> </p>

<p><em><span style="font-size:12px">*belum termasuk ongkir diluar Kepri</span></em></p>

<tr>

</tr>

<tr>

<p><strong><span style="font-size:18px"><marquee>ADVERTISE YOUR PRODUCT HERE</marquee></span></strong>

</tr>

</table>

</form>

</div>

<div>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

</BODY>

</HTML>

2. Page Collection

<HTML>

<HEAD>

<TITLE>Collection</TITLE>

<!--[if IE 9]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 6]>

<![endif]-->

</HEAD>

<BODY>

<php

<div>

</div>

<ul>

<li class="selected"><a href="collection.php">Collection</a></li>

<li><a href="pemesanan.php">Pemesanan</a></li>

<li><a href="contact.php">Contact Us</a></li>

</ul>

</div>

<div>

<ul>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li>

<li><a href="contact.php">Pesan</a></li>

<li><a href="contact.php">Pesan</a>

</li>

</ul>

</div>

<ul>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li><a href="contact.php">Pesan</a></li>

<li><a href="contact.php">Pesan</a>

</li>

</ul>

</div>

<ul>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li><a href="contact.php">Pesan</a></li>

<li><a href="contact.php">Pesan</a>

</li>

</ul>

</div>

<ul>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li><a href="contact.php">Pesan</a></li>

<li><a href="contact.php">Pesan</a>

</li>

</ul>

</div>

<div>

<h3>Address</h3>

<p>Perum Taman Sari Hijau BLok D5 No.12, Tiban, Batam, Kepri</p>

</div>

<div>

<h3>Follow us</h3>

<ul>

<li><a href="http://www.facebook.com/fitri.apriani11" target="_blank" class="facebook">Facebook</a></li>

<li><a href="http://twitter.com/#!/trian_11" target="_blank" class="twitter">Twitter</a></li>

</ul>

</div>

</BODY>

</HTML>

3. Page Pemesanan

<HTML>

<HEAD>

<TITLE>Pemesanan</TITLE>

<!--[if IE 9]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 6]>

<![endif]-->

</HEAD>

<BODY>

<php

<div>

</div>

<ul>

<li><a href="collection.php">Collection</a></li>

<li class="selected"><a href="pemesanan.php">Pemesanan</a></li>

<li><a href="contact.php">Contact Us</a></li>

</ul>

</div>

<div>

<ul>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li>

<li class="first"><a href="contact.php">Pesan</a>

</li>

<li>

<li class="first"><a href="contact.php">Pesan</a>

</li>

</ul>

</div>

<div>

<h1>Cara Pemesanan</h1>

<p>1.Pilih barang yang akan di beli, dan lihat kode barang, lalu klik tombol pesan.</p>

<p>2.Isi Form yang telah disediakan atau Klik Menu "Contact Us".</p>

<p>3.Untuk info selanjutnya akan dikirim ke email Anda atau via SMS.</p>

</div>

<div>

<h3>Address</h3>

<p>Perum. Taman Sari Hijau Blok D5 No. 12, Tiban, Batam . Kepri</p>

</div>

<div>

<h3>Follow us</h3>

<ul>

<li><a href="http://www.facebook.com/fitri.apriani11" target="_blank" class="facebook">Facebook</a></li>

<li><a href="http://twitter.com/#!/trian_11" target="_blank" class="twitter">Twitter</a></li>

</ul>

</div>

</BODY>

</HTML>

4. Page Contact US

<HTML>

<HEAD>

<TITLE>Contact</TITLE>

<!--[if IE 9]>

<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if IE 6]>

<![endif]-->

</HEAD>

<BODY>

<php

<div>

</div>

<ul>

<li><a href="collection.php">Collection</a></li>

<li><a href="pemesanan.php">Pemesanan</a></li>

<li class="last select"><a href="contact.php">Contact Us</a></li>

</ul>

</div>

<div>

<div>

<span>Follow Me</span>

<ol>

<li><a href="http://www.facebook.com/fitri.apriani11" target="_blank" class="facebook">Facebook</a></li>

<li><a href="http://twitter.com/#!/trian_11" target="_blank" class="twitter">Twitter</a></li>

</ol>

<span>Address</span>

<p>Perum Taman Sari Hijau Blok D5 No.12, Tiban, Batam, Kepri</p>

</div>

</div>

<div>

<h3>Contact Us</h3>

<p>Isi Form di bawah ini untuk melakukan Pemesanan atau apabila ada Pertanyaan yang ingin ditanyakan.. </p>

<p>Info Selanjutnya akan kami balas via Email atau SMS</p>

<label for="alamat">Alamat dan No.HP</label>

<label for="kode">Kode Barang</label>

</form>

</div>

<div>

</div>

</BODY>

</HTML>

BAB IV

PENGUJIAN

4.1. Pengujian Insert

Tuliskan cara menguji Insert, dan tampilkan gambarnya di Gambar 4.1.

1. Klik kanan pada tabel pemesanan, pilih Alter. Klik Insert lalu isi field name dll.

4.2. Pengujian Edit

Tuliskan cara menguji Edit, dan tampilkan gambarnya di Gambar 4.2.

Klik kanan pada tabel pemesanan, pilih Alter.

4.3. Pengujian Delete

Tuliskan cara menguji Delete, dan tampilkan gambar sebelum delete di Gambar 4.3. dan setelah delete di Gambar 4.4.

Tuliskan cara menguji Edit, dan tampilkan gambarnya di Gambar 4.2.

Klik kanan pada tabel pemesanan, pilih Alter, pilih kolom yang ingin di hapus, klik delete lalu Yes.

BAB V

PENUTUP

5.1 Kesimpulan

Dalam penulisan Tugas Akhir ini telah di uraikan berbagai macam kebutuhan yang menunjang dalam pembuatan website toko tas online ini. Maka penulis menyimpulkan :

1) Website ini adalah sarana penjualan tas secara online yang dapat di akses oleh siapa saja.

2) Sasaran dari website ini adalah para user yang tidak mempunyai waktu untuk mengunjungi toko sebenarnya untuk membeli tas.

3) Website ini di bangun dengan desain yang simple agar nyaman dilihat oleh para user.

4) Website ini dibangun juga untuk menhemat biaya karena tidak perlu menyewa toko.

5.2 Saran

Adapun saran yang dapat penulis berikan yang diharapkan berguna dimasa yang akan datang adalah sebagai berikut:

1) Agar selalu di percaya oleh pelanggan ataupun calon pembeli maka hendaknya pihak / pemilik toko online ini selalu cepat dan tepat dalam memberikan informasi dan layanan yang dibutuhkan.

2) Perlu adanya pengembangan dari segi desain, kelengkapan, detail produk, tata cara pembayaran dan pengiriman yang cepat dan mudah kedepannya.

3) Kecepatan dalan membuka halaman web juga nantinya akan di tingkatkan.

4) Penambahan fitur - fitur serta content juga perlu dilakukan untuk menarik minat calon pembeli ataupun pelanggan.

DAFTAR PUSTAKA

[1] Sadeli Muhammad, 2011, Membuat Toko Online dengan PHP. Palembang: Maxikom.

[2] Zuhry Ramadhan Muhammad, 2008, Penjualan Online pada Toko Microtech Computer, (http://repository.usu.ac.id).

[3] Zulkifli Dede, dkk, 2011, Gampang Membuat Toko Online. Jakarta: Informatika.

[4] www.hostinggokil.com/artikel/script-dasar-php-untuk-membuat-koneksi-database.htm.

Read more »

MARI BELAJAR :)

Absen dulu yuk :)

Follow Me

Facebook Badge

Blog Archive

Followers

Minggu, 22 Juli 2012

Al - Qur'an Online

Minggu, 01 Juli 2012

Makalah Pembuatan Toko Online