Sistem Penjualan Online Store Berbasis Web

(1)

SISTEM PENJUALAN ONLINE STORE

BERBASIS WEB

TUGAS AKHIR

INDAH PERMATA SARI

092406017

PROGRAM STUDI D-III TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2012


(2)

SISTEM PENJUALAN ONLINE STORE

BERBASIS WEB

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh Ahli Madya

INDAH PERMATA SARI

092406017

PROGRAM STUDI D-III TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2012


(3)

PERSETUJUAN

Judul : SISTEM PENJUALAN ONLINE STORE

BERBASIS WEB

Kategori : TUGAS AKHIR

Nama : INDAH PERMATA SARI

Nomor Induk Mahasiswa

: 092406017

Program Studi

: DIPLOMA (D-III) TEKNIK INFORMATIKA

Departemen

: MATEMATIKA

Fakultas

: MATEMATIKA DAN ILMU PENGETAHUAN

ALAM (FMIPA) UNIVERSITAS SUMATERA

UTARA

Diluluskan di

Medan, juli 2012

Komisi Pembimbing

:

Diketahui/Disetujui oleh

Pembimbing,

Departemen Matematika FMIPA USU

Ketua,

Prof. Drs. Tulus Vordipl. Math., M.Si., Ph.D

Syahril Efendi, S.Si, M.IT

Nip. 19620901 198803 1 002

Nip. 197711101996021001


(4)

PERNYATAAN

SISTEM PENJUALAN ONLINE STORE

BERBASIS WEB

TUGAS AKHIR

Saya mengakui bahwa tugas akhir ini adalah hasil kerja saya sendiri, kecuali beberapa

kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, juli 2012

INDAH PERMATA SARI

092406017


(5)

PENGHARGAAN

Puji syukur penulis panjatkan kepada Allah SWT atas limpahan rahmat dan

hidayah-Nya sehingga kajian tugas akhir ini dapat diselesaikan dengan baik dan dalam waktu

yang telah ditetapkan.

Penyusunan tugas akhir ini masih banyak memiliki kekurangan karena keterbatasan

kemampuan dan pengetahuan penulis, sehingga diharapkan kritik dan saran yang

membangun serta dapat memberikan inspirasi yang baik untuk kemajuan tugas akhir

ini. Penulis berharap semoga Tugas Akhir ini bermanfaat bagi siapapun yang

membacanya.

Selama mempersiapkan tugas akhir ini penulis banyak mendapat bantuan,

dorongan, dan motivasi baik secara langsung maupun tidak langsug, maka pada

kesempatan ini penulis juga menyampaikan terima kasih kepada :

1.

Bapak Syahril Efendi, S.Si, M.IT, selaku Dosen pembimbing pada penyelesaian

tugas akhir ini yang telah memberikan panduan dan penuh kepercayaan kepada

penulis untuk menyelesaikan kajian tugas akhir ini.

2.

Bapak Syahril Efendi, S.Si, MIT dan Syahriol Sitorus S.Si, MIT selaku ketua dan

sekretaris program studi D-III Teknik Informatika di Universitas Sumatera Utara.

3.

Prof.Drs. Tulus Vordipl. Math., M.Si., Ph.D, selaku ketua Departemen

Matematika di Universitas Sumatera Utara.

4.

Bapak Dr. Sutarman, M.Sc, selaku Dekan Fakultas Matematika dan Ilmu

Pengetahuan Alam di Universitas Sumatera Utara.

5.

Para Staf/Pengajar Jurusan D-3 Teknik Informatika FMIPA USU.

6.

Kedua orang tua saya Bpk.Edy Hariandy SH, Ibu Farida Nasution terimakasih

atas do’a serta dukungan moril maupun materil. Dan seluruh keluarga besar saya.

7.

Adik-Adik saya Cindy Anugrah Dan Fara Sheila terimakasih atas dukungannya.

8.

Yang terkasih Putra Al-gofarie terimakasih atas dukungan dan dorongan

semangatnya selama ini.

9.

Om saya Novrizal lubis yang memberi materi pengajaran selama pembuatan tugas

akhir ini.

10.

Seluruh rekan-rekan dari D-III Teknik Informatika FMIPA USU, khususnya

teman-teman Kom B 2009, terimakasih atas saran dan kritik dalam penyusunan

tugas akhir ini.


(6)

ABSTRAK

Pada penulisan tugas akhir ini, penulis membuat Sistem Penjualan Online Store

Berbasis Web. Sistem ini merupakan penjualan cake’s secara Online dengan

mengguna CMS Wordpress yang merupakan gabungan dari Web Server, PHP dan

MySQL. Pembuatan sistem penjualan online store ini bertujuan untuk mempermudah

masyarakat dalam memperoleh informasi perbelanjaan (Online) sehingga menghemat

waktu. Fasilitas-fasilitas yang terdapat dalam pembuatan website ini berupa data dan

informasi terbaru, profil dan bermacam-macam variasi cake yang tersedia .Layout dan

header yang bagus dan menarik sehingga dapat menambah daya tarik tersendiri.


(7)

DAFTAR ISI

Halaman

Persetujuan

ii

Pernyataan

iii

Penghargaan

iv

Abstrak

v

Daftar Isi

viii

Daftar Tabel

ix

Daftar Gambar

x

BAB 1 PENDAHULUAN

1

1.1 Latar Belakang Masalah

1

1.2 Identifikasi Masalah

3

1.3 Batasan Masalah

3

1.4 Rumusan Masalah

3

1.5 Tujuan

4

1.6 Manfaat

4

1.7 Sistematika Penulisan

5

BAB 2 LANDASAN TEORI

6

2.1 Sekilas Tentang e-commerce

6

2.2 Sekilas Tentang komputer

6

2.3 Sekilas Tentang internet

7

2.4 Sekilas Tentang perancangan

7

2.5 Sekilas Tentang sistem

8

2.6 Sekilas Tentang informasi

8

2.7 Sekilas Tentang PHP dan MYSQL

9

2.8 Sekilas Tentang HTML

11

2.8.1 Struktur HTML

11

2.9 Sekilas Tentang CSS

12

2.10 JavaScript

12

2.11 Sekilas Tentang Domain

13

2.12 Sekilas Tentang Hosting dan Software Website

15

2.13 Data Flow Diagram (DFD)

16

2.13 Flow-Chart

17

BAB 3 PERANCANGAN SISTEM

20

3.1 Perancangan Dan Perancangan

20

3.2 Perancangan Halaman Website

22

3.2.1 Halaman Home

22

3.2.2 Cara Pembelian

23

3.2.3 Pengiriman

23


(8)

3.4 Perancangan Alir (flowchart) website

26

3.4.1 Flowchart Home

26

3.4.2 Flowchart Cara Pembelian

28

3.4.3 Flowchart Produk

29

3.4.4 Flowchart Admin

30

3.5 Merancang Database Server

31

3.6 Desain Website

35

3.6.1 Desain Home

35

3.6.2 Desain Cara Pembelian

36

3.6.3 Desain Pengiriman

36

3.6.4 Desain Halaman Product

37

3.6.5 Desain Halaman Birthday cake

37

3.6.6 Desain Halaman Cake

38

3.6.7 Desain Halaman Wedding Cake

38

3.6.8 Desain Halaman Cookies

39

3.6.9 Desain Halaman Cupcake

39

3.6.10 Desain Halaman Puding

40

3.6.11 Desain Halaman Tentang Kami

40

3.6.12 Desain Halaman Login Admin

41

3.6.13 Desain Halaman Admin

41

BAB 4 IMPLEMENTASI SISTEM

42

4.1 Pengertian Implementasi Sistem

42

4.2 Tujuan Implementasi Sistem

42

4.3 Komponen Dalam Implementasi Sistem

43

BAB 5 KESIMPULAN DAN SARAN

45

5.1 Kesimpulan

45

5.2 Saran

46

Daftar Pustaka

47

Lampiran:

Listing Program


(9)

DAFTAR TABEL

Halaman

Tabel 2.1 Simbol-Simbol DFD

16

Tabel 2.2 Flow Chart

18

Tabel 3.1 Tabel Commentmeta

31

Tabel 3.2 Tabel Comment

31

Tabel 3.3 Tabel Links

32

Tabel 3.4 Tabel Option

32

Tabel 3.5 Tabel Postmeta

32

Tabel 3.6 Tabel Post

33

Tabel 3.7 Tabel Terms

34

Tabel 3.8 Tabel User meta

34


(10)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Tampilan Awal Lembar Kerja Microsoft Visual Basic 6.0

9

Gambar 2.2 Tampilan Menu Bar

9

Gambar 2.3 Tampilan Toolbar

9

Gambar 2.4 Tampilan ToolBox Standard

12

Gambar 2.5 Tampilan Form Window

15

Gambar 2.6 Tampilan Jendela Project

15

Gambar 2.7 Tampilan Jendela Properties

16

Gambar 2.8 Tampilan Jendela Form Layout

16

Gambar 2.9 Tampilan Window Code

17

Gambar 3.1 Tampilan Form Menu Utama

24

Gambar 3.2 Tampilan Form Menu English – Indonesian

25

Gambar 3.3 Tampilan Form Menu Indonesian – English

26

Gambar 3.4 Tampilan Form Data Processing Dictionary

27

Gambar 3.5 Tampilan Form About Me

28

Gambar 3.6 Flow Chart Halaman Menu Utama

29

Gambar 3.7 Flow Chart Halaman English – Indonesian

30

Gambar 3.8 Flow Chart Halaman Indonesian – English

31

Gambar 3.9 Flow Chart Halaman Data Processing

32

Gambar 4.1 Tampilan Menu Utama

33

Gambar 4.2 Tampilan Menu English – Indonesian

34

Gambar 4.3 Tampilan Menu Indonesian – English

35

Gambar 4.4 Tampilan Data Processing

36


(11)

ABSTRAK

Pada penulisan tugas akhir ini, penulis membuat Sistem Penjualan Online Store

Berbasis Web. Sistem ini merupakan penjualan cake’s secara Online dengan

mengguna CMS Wordpress yang merupakan gabungan dari Web Server, PHP dan

MySQL. Pembuatan sistem penjualan online store ini bertujuan untuk mempermudah

masyarakat dalam memperoleh informasi perbelanjaan (Online) sehingga menghemat

waktu. Fasilitas-fasilitas yang terdapat dalam pembuatan website ini berupa data dan

informasi terbaru, profil dan bermacam-macam variasi cake yang tersedia .Layout dan

header yang bagus dan menarik sehingga dapat menambah daya tarik tersendiri.


(12)

BAB 1

PENDAHULUAN

1.1

Latar Belakang Masalah

Teknologi informasi pada saat ini telah berkembang sangat pesat sehingga mempunyai

dampak dalam meningkatkan efektifitas dan keefisienan dalam melakukan setiap

pekerjaan. Mungkin suatu kenaifan kalau berbicara tentang teknologi informasi dan

komunikasi, tanpa membicarakan suatu benda yang bernama komputer. Komputer

merupakan suatu media elektronik yang memegang peranan yang sangat penting

dalam perkembangan yang terjadi saat ini.

Pada saat ini teknologi informasi mengalami perkembangan yang sangat cepat,

seiring dengan kebutuhan manusia yang juga terus bertambah. Teknologi memegang

peranan yang sangat penting bagi kehidupan manusia. Saat ini, siapa saja yang tidak

bisa mengikuti perkembangan teknologi, maka dapat dipastikan akan menjadi orang

terbelakang.

Jaman memang telah berubah begitu pula kita harus dapat mengikuti

perkembangannya. Teknologi internet merupakan salah satu bidang yang mengalami

perkembangan sangat cepat. Telah banyak sektor yang menerapkan teknologi ini,


(13)

salah satunya dalam bidang perdagangan. Lalu muncul perdagangan dengan internet

sebagai sarana utama, yaitu e-commerce.

Implementasi e-commerce dalam dunia bisnis salah satunya adalah dengan

banyak bermunculan situs-situs penjualan secara online atau berbasis web. Hal ini

membawa kita dalam budaya baru dalam melakukan transaksi yang tidak lagi

konvensional, melainkan membawa kita kepada transaksi dunia maya. Disadari atau

tidak penerapan e-commerce ini telah berdampak pada efisiensi dan efektifitas

transaksi, serta dapat mengangkat produk atau citra dari perusahaan yang menerapkan

konsep tersebut.

Sejak munculnya teknologi komputer, proses pengiriman, penyampaian, serta

penerimaan informasi itu sendiri menjadi lebih cepat dan efektif. Seiring

berkembangnya teknologi komputer, maka penggunaan komputer dilihat akan lebih

baik dari segi penggunaan, kemudahan, dan keakuratan data yang digunakan.

PHP (Hypertext Preprocessor) merupakan bahasa pemrograman yang bersifat

server side script, yaitu bahasa yang berbentuk script yang terletak dan dieksekusi di

server untuk kemudian hasilnya (berupa kode HTML) dikembalikan ke browser

pengguna/user/client. PHP dirancang untuk membentuk suatu web yang bersifat

dinamis, yang artinya halaman yang ditampilkan dibuat saat halaman itu diminta oleh

pengguna/user/client. PHP juga dapat berinteraksi dengan hampir semua teknologi

web yang telah ada dan sifatnya open source (bebas pakai) sehingga memberikan


(14)

Selain itu demi mendukung berkembangnya aplikasi web yang semakin besar,

rumit, dan kompleks maka di kembangkanlah kemampuan objek orientid

programming dari PHP. Keuntungan yang dapat diperoleh dari kemampuan object

oriented programming dari PHP, yaitu kemudahan untuk mengolah kompleksitas yang

dibuat serta kemudahan untuk melakukan perubahan dan pengembangan dari aplikasi

tersebut.

1.2

Identifikasi Masalah

Adanya toko kue online ini agar mempermudah konsumen untuk memesan kue secara

bervariasi dan sesuai dengan mereka inginkan, membeli cemilan sehat yang tidak

berdampak buruk bagi kesehatan keluarga. Kendalanya kadang keterlambatan kiriman

dan ini sebagai toko kue online yg tidak mau merugikan konsumen harus mengecek

ulang pengiriman. Aplikasi ini dapat juga mempermudah dalam mencari pelanggan

dengan menggunakan tampilan yg menarik .

1.3 Batasan Masalah

Dalam hal ini penulis membatasi permasalahan kurang tepatnya tanggal sampai

pemesanan barang kepada konsumen, sehingga merupakan kendala yang selalu di

hadapi. Untuk itu perlunya pengecekan pengiriman barang kepada konsumen agar

konsumen benar-benar merasa puas dengan sistem pembelian secara online.


(15)

1.4 Rumusan Masalah

Dalam dunia bisnis memang memiliki tingkat persaingan yang kompetitif, persaingan

bisnis antar pelaku pasar dalam menarik perhatian masyarakat untuk menjadi

pelanggannya dilakukan dengan berbagai cara. Untuk memperjelas permasalahan

yang akan dibahas dalam tugas akhir ini, maka penulis memberikan rumusan masalah.

Adapun rumusan masalah dalam penulisan Tugas Akhir ini adalah:

1.

Pembeli dapat melakukan transaksi dari mana pun dan kapan pun hanya

dengan menggunakan sebuah komputer yang telah memiliki akses internet.

Permasalahannya sekarang adalah bagaimana pelanggan dapat melakukan

transaksi secara online.

2.

menggunakan teknologi internet, pembeli atau pelanggan dapat menikmati

layanan ini dan akan mendapatkan informasi dengan cepat dan akurat

karena data yang diakses melalui jaringan internet.

1.5 Tujuan

Tujuan pembuatan program ini adalah untuk menerapkan program aplikasi yang

berbasiskan

web dalam bidang bisnis sebagai sarana untuk efisiensi dan penerapan

teknologi informasi dalam dunia perdagangan.

1.6

Manfaat


(16)

nantinya, beberapa manfaat yang saya dapatkan adalah antara lain:

1.

memberi kemudahan terhadap teransaksi penjulan.

2.

Memberikan alternatif lain cara berbisnis secara tepat.

3.

Dapat meningkatkan kemampuan managerial yang baik dan benar .

1.7

Sistematika Penulisan

Maksud dan tujuan dari pembuatan sistematika penulisan tugas akhir ini adalah untuk

mempermudah penulis dalam membuat dan menyelesaikan permasalahan yang

dianalisis oleh penulis sehingga lebih terarah dan lebih terfokus serta diuraikan bab

per-bab. Sistematika penulisan laporan ini adalah :

BAB 1 : Mengenai latar belakang pembuatan tugas akhir ini, identifikasi, batasan

dan rumusan masalah, tujuan, serta manfaat dari tugas akhir ini.

BAB 2 : Pada bab ini menjelskan landasan teori yang meliputi pengertian

sistem, e-commerce, uraian singkat tentang domain, hosting dan

software website.

BAB 3 : Pada bab ini penulis menjelaskan tentang perancangan sistem penjualan

toko kue online store meliputi flow diagram , strucktur database,sertifikasi

input, sertifikasi output dan flowchart.

BAB 4 : Menyajikan tentang pengertian implementasi sistem, Tujuan implementasi

Sistem yang di rancang.


(17)

BAB 2

LANDASAN TEORI

2.1

Sekilas E-commerce

Electronic commerce (e-commerce) di definisikan sebagai proses pembelian dan

penjualan produk, jasa dan informasi yang di lakukan secara elektronik dengan

memanfaatkan jaringan komputer.

2.2

Pengertian Komputer

Istilah komputer (computer) diambil dari bahasa Latin computare yang berarti

menghitung

(to compute atau to reckon). Menurut Blissmer (1985), komputer

adalah suatu alat elektronik yang mampu melakukan beberapa tugas, yaitu

menerima input, memproses input sesuai dengan instruksi yang diberikan,

menyimpan perintah-perintah dan hasil pengolahannya, serta menyediakan output

dalam bentuk informasi.


(18)

menghasilkan

output berdasarkan instruksi-instruksi yang telah tersimpan di

dalam memori. Dan masih banyak lagi ahli yang mencoba mendefinisikan secara

berbeda tentang komputer. Namun, pada intinya dapat disimpulkan bahwa

komputer adalah suatu peralatan elektronik yang dapat menerima input, mengolah

input, memberikan informasi, menggunakan suatu program yang tersimpan di

memori komputer, dapat menyimpan program dan hasil pengolahan, serta bekerja

secara otomatis.

2.3

Pengertian Internet

Internet adalah kependekan dari interconnection-networking dan dapat diartikan

sebagai suatu jaringan komputer yang satu dengan yang lain saling terhubung untuk

keperluan komunikasi dan informasi.

Untuk fungsi atau kegunaan internet pada dewasa ini sangat banyak sekali di

berbagai bidang. Secara umum dapat dikatakan bahwa internet berfungsi untuk

mengakses berbagai macam informasi serta peristiwa di berbagai belahan dunia

dengan waktu yang relatif singkat tanpa batasan waktu dan tempat.

2.4

Sekilas Tentang Perancangan

Perancangan dapat diartikan sebagai suatu tahap setelah analisa dari pengembangan

sistem untuk mengembangkan bagaimana suatu sistem itu akan dibentuk. Perancangan

juga dapat berupa penggambaran,

perencanaan, dan pembuatan sketsa atau


(19)

pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh

dan berfungsi. Termasuk juga menyangkut perangkat lunak dan komputer.

2.5

Sekilas Tentang Sistem

Kata sistem berasal dari bahasa Yunani yaitu “systema” yang berarti kesatuan suatu

kesatuan yang saling tergantung dan saling bekerja sama untuk mencapai tujuan

tertentu. Suatu sistem dapat terdiri dari sitem-sistem bagian lainnya atau sering disebut

subsistem. Subsistem saling berinteraksi dan saling berhubungan membentuk suatu

kesatuan untuk tercapainya suatu sasaran dan sistem tidak terlepas dari

komponen-komponen pendukung sistem yang mempunyai sifat dan fungsi tertentu dan mampu

mempengaruhi proses sistem secara keseluruhan.

pengertian sistem yaitu “sekumpulan elemen-elemen atau komponen-komponen

yang saling berhubungan dimana setiap elemen tersebut saling mendukung satu

dengan yang lainnya untuk mencapai suatu tujuan.”

2.6

Sekilas Tentang Informasi

Informasi adalah hasil dari suatu pengolahan data, maksudnya adalah sesuatu

yang diperoleh setelah adanya pemrosesan data dan penyusunan data-data

kedalam bentuk yang sedemikian rupa sehingga memiliki makna untuk dapat

digunakan dalam pengambilan keputusan .


(20)

2.7

Sekilas Tentang PHP (

Hypertext Preprocessor

) dan MYSQL

PHP adalah salah satu bahasa pemrograman di Internet. Bisa juga di artikan

sebagai bahasa

scripting yang menyatu dengan HTML dan dijalankan pada server

side. PHP bersifat cepat, gratis dan murah ( gratis ), selain itu PHP mendukung

penggunaan database seperti MySQL, PostgreSQL, mSQL, Oracle etc.

Untuk dapat menjalankan PHP melalui browser, maka anda diharuskan

terlebih dahulu menginstall web server (misalnya Apache, PWS, IIS) lalu

menginstall PHP, sedangkan untuk menjalankan MySQL anda tidak perlu

menginstall web server, hanya saja jika ingin dijalankan melalui browser, maka

anda harus menginstall web server. Prosedur penginstallan web server, PHP dan

MySQL dapat anda baca pada manual masing – masing.

Jika anda tidak ingin direpotkan dengan prosedur penginstallan PHP, anda

dapat menjalankan PHP di direktori public_html anda di s.ee.itb.ac.id. Hal itu dapat

dilakukan karena PHP bersifat server side artinya script PHP di jalankan di server,

bukan di computer client. Jadi semakin banyak client yang menjalankan script PHP di

suatu situs, maka beban yang ditanggung oleh server semakin bertambah.

Sintaks – sintaks dalam PHP banyak yang sama dengan C++, dalam hal ini

penulis tidak memberikan penjelasan penggunaan sintaks–sintaks tersebut mengingat

para cakru telah memperoleh pengajaran tersebut di dalam kuliah maupun praktikum

EL – 207 Komputer dan Pemrograman.


(21)

PHP dijalankan dalam file berekstensi .php, .php3 atau .phtml, itu tergantung

dengan settingan PHP anda, tetapi secara umum ekstensi file PHP adalah .php. Kode

PHP menyatu dengan tag – tag HTML dalam satu file. Kode PHP diawali dengan tag

<? atau <?php dan ditutup dengan ?>.

Contoh :

<?

phpinfo();

?>

Struktur penulisan dalam PHP, sama seperti dalam C++, yaitu setiap pernyataan

diakhiri oleh semicolon ( ; ) dan bersifat case sensitive untuk penulisan nama variabel.

Cara penulisan komentar dalam PHP juga sama dengan C++.

Contoh :

<?

$nama = “divisi komputer hme itb”; // Huruf kecil semua

$NAMA = “DIVISI KOMPUTER HME ITB”; // Huruf besar semua

print “$nama

variable menggunakan huruf

kecil.<br>”;

print “$NAMA

variable menggunakan huruf besar.”

;

?

MySQL adalah sebuah perangkat lunak Pembuat database yang bersifat

terbuka atau open source dan berjalan disemua platform baik

Linux maupun Si

Windows, MySQL merupakan program pengakses database

yang bersifat network


(22)

2.8

Sekilas Tentang HTML (

HyperText Markup Language

)

Hypertext Markup Language biasa digunakan untukmembangun suatu halaman Web

yang akan dirancang tetapi bukan suatu bahasa pemograman melainkan sebuah

penandaan terhadap sebuah dokumen teks.

Apakah HTML itu?

HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan

untuk membangun suatu halaman Web. Sekalipun banyak orang menyebutnya sebagai

suatu bahasa pemrograman, HTML sebenarnya sama sekali bukan bahasa

pemrograman, karena seperti tercermin dari namanya HTML adalah suatu bahasa

mark up. HTML digunakan untuk melakukan mark up (penandaan) terhadap sebuah

dokumen teks. Tanda tersebut digunakan untuk menentukan format atau style dari teks

yang ditandai.

2.8.1 Struktur Dasar HTML

Untuk menandai sebuah file teks merupakan file HTML, maka ciri yang paling

nampak jelas adalah file-nya, yaitu .html. Namun lebih jauh daripada itu, di dalam file

tersebut harus terkandung struktur sebagai berikut:

<html>

<head>

...

</head>

<body>


(23)

...

</body>

</html>

Tag <html> tersebut harus diletakkan pada bagian paling awal dan tag </html>

harus diletakkan pada bagian paling akhir. Bagian head umumnya berisi informasi

mengenai dokumen tersebut, misalnya judul dokumen, versi HTML yang digunakan.

Sedangkan body berisi layout atau desain halaman web.

2.9

Sekilas Tentang CSS (Cascading Style Sheet )

Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang

digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga

akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan

ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna

hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri,

kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai

bahasa

style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan

adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan

format yang berbeda.


(24)

suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi obyek,

sedangkan Script adalah serangkaian instruksi program. Dalam aplikasi client untuk

Navigator, pernyataan Java Script yang tertulis dalam sebuah halaman web dapat

mengetahui dan merespon perintah pemakai seperti gerakan mouse, input form, dan

navigasi halaman HTML.

2.11 Sekilas Tentang Domain

Domain adalah nama atau alamat dari sebuah website. Di Internet, setiap orang harus

mengetikkan sebuah nama domain untuk bisa membuka dan membaca isi dari sebuah

website. Dalam hal ini, peranan pemilihan nama domain cukup penting untuk

membedakan website Anda dengan website orang lain.

Domain ini terdiri dari nama domain dan extension. Contoh

blogbisnisinternet.com, blogbisnisinternet adalah nama domain dan .com adalah

extensionnya. Extension biasanya mewakili untuk kategori tertentu seperti .com

untuk keperlukan komersial, .net untuk keperluan jaringan, .org untuk keperluan

website nonkomersial, dan lain-lainnya.

Extension bermacam-macam, bisa berupa TLD (Top Level Domain) seperti

.com, .net, .org atau ada juga yang berupa cTLD (country Top Level Domain)

seperti .co.id, .co.cc dimana id mewakili domain negera Indonesia.

Untuk memilih nama domain Anda bisa menggunakan website yang

menyediakan jasa registrasi nama domain atau dengan menggunakan

software

domain co.cc untuk membantu memilih nama domain untuk website Anda.


(25)

Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan

kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain

ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain

ber-ekstensi lokasi Negara Indonesia adalah :

.co.id : Untuk Badan Usaha yang mempunyai badan hukum sah

.ac.id : Untuk Lembaga Pendidikan

.go.id : Khusus untuk Lembaga Pemerintahan Republik Indonesia

.mil.id : Khusus untuk Lembaga Militer Republik Indonesia

.or.id : Untuk segala macam organisasi yang tidak termasuk dalam kategori

“ac.id”,”co.id”,”go.id”,”mil.id” dan lain lain

1.

.war.net.id : untuk industri warung internet di Indonesia

.sch.id : khusus untuk Lembaga Pendidikan yang menyelenggarakan

pendidikan seperti SD, SMP dan atau SMU


(26)

2.12 Sekilas Tentang Hosting dan Software Website

Hosting adalah tempat Anda meletakkan file-file website Anda di sebuah server yang

terhubung dengan jaringan internet. Jadi agar website Anda bisa ditampilkan, maka

file-file website perlu Anda simpan di sebuah server hosting.

Software Website adalah software website open source seperti blog wordpress, joomla,

phpbb, dan lain-lainnya, tentunya Anda bisa membuat website yang sama.Dalam web

ini menggunakan software wordpress.


(27)

2.13 Data Flow Diagram (DFD)

Data flow diagram (DFD) adalah alat bantu yang digunakan untuk

menggambarkan aliran data informasi dan transformasi (proses) dari data dimulai

dari pemasukan data sampai menghasilkan keluaran (output) data. Adapun

simbol-simbol dari flow diagram, yaitu:

Tabel 2.1 simbol-simbol DFD

NO

Gambar

Nama

fungsi

1

Kesatuan luar

(External Entity)

Merupakan

kesatuan luar di

lingkungan luar

sistem yang akan

memberikan input

atau menerima

output dari sistem.


(28)

2

Proses (process)

Kegiatan dari hasil

suatu arus data

yang masuk dalam

proses untuk

dihasilkan arus

data yang akan

keluar atau untuk

mengubah input

menjadi output

3

Aliran data

Data mengalir

melalui sistem,

dimulai dengan

sebagian input

data dan diubah

atau diproses

menjadi input

4

Penyimpanan data

( Data Stronge)

Data disimpan

untuk keperluan

berikutnya

2.13 Flow-Chart

Flow chart adalah penggambaran secara grafik dari langkah – langkah dan urutan –

urutan prosedur dari suatu program. Flow chart menolong analis dan programmer

untuk memecahkan masalah ke dalam segmen – segmen yang lebih kecil dan

menolong dalam menganalisis alternatif – alternatif lain dalam pengoperasian Flow

chart biasanya mempermudah penyelesaian suatu masalah khususnya masalah yang

perlu dipelajari dan dievaluasi lebih lanjut. Petunjuk untuk membuat flow chart Bila

seorang analisis dan programmer akan membuat flow chart, ada eberapa petunjuk


(29)

yang harus diperhatikan, seperti :

1. Flow chart digambarkan dari halaman atas ke bawah dan kiri ke kanan.

2. Aktifitas yang digambarkan harus didefinisikan secara hati – hati dan defenisi ini

harus dapat dimengerti oleh pembacanya.

3. Kapan aktifitas dimulai dan berakhir harus ditentukan secara jelas.

4. Setiap langkah dari aktifitas harus diuraikan dengan menggunakan deksripsi kata

kerja.

5. Setiap langkah dari aktifitas harus berada pada urutan yang benar.

6. Lingkup, range dan aktifitas yang sedang digambarkan harus ditelusuri dengan

hati - hati. Percabangan - percabangan yang memotong aktifitas yang

sedang digambarkan tidak perlu digunakan dan percabangannya diletakkan pada

halaman yang terpisah atau hilangkan seluruhnya bila percabangan tidak berkaitan

dengan sistem.

7. Gunakan symbol – symbol flowchart yang standard.

Berikut ini adalah gambar simbol – simbol standar dalam flow chart beserta

dengan arti dari masing – masing simbol :

Tabel 2.2

Flow-Chart

Simbol

Keterangan

Terminal/Interupt

(Mulai/Berhenti)

Simbol ini dipergunakan untuk menunjukkan awal

kegiatan atau akhir kegiatan atau berhentinya

suatu program.


(30)

Input/Output (data/hasil)

Untuk mewakili data input dan menuliskan

output-nya

Process (Pengolahan)

Suatu simbol yang melambangkan diprosesnya

suatu data.

Decision (Keputusan)

Dipakai untuk menuliskan jika adanya percabangan,

seperti if, case.

Prefendefined

Untuk

program-program yang sering

dipergunakan sebuah program berulang kali,

biasanya dibuat program terpisah dengan sebuah

sub program (subroutine). Untuk menghubungkan

program utama dengan subroutine dipergunakan

symbol ini.

Connector (Penghubung)

Bila suatu flow-chart sangat panjang dan diputus

di tengah sebelum selesai, jika disambung dalam

halaman yang sama lagi, maka digunakan symbol

ini.

Flow lines (Garis Alir)

Bila suatu flow-chart dihubungkan dengan

garis-garis ini. Garis-garis-garis ini menunjukkan akar

selanjutnya yang akan dituju. Bila arahnya ke

bawah atau ke kanan tidak perlu memakai tanda

panah. Bila ke atas atau ke kiri , tanda panah

harus dipakai, untuk membedakannya.


(31)

BAB 3

PERANCANGAN SISTEM

3.1

Perancangan dan Perancangan

Tahapan perancangan dan perancangan merupakan tahapan awal yang dilakukan

penulis dalam membangun website ini. Pada tahapan ini penulis akan

menjabarkan awal perancangan sistem, diagram alur, tujuan dan isi dari website

yang akan dibangun. Website ini dirancang dengan menggunakan domain, hosting

dan software website.

Sebelum membangun software website, ada beberapa tahapan pertanyaan

sebagai identifikasi awal yang perlu dilakukan, antara lain :

a.

Website apa yang akan dibuat ?

b.

Siapa saja yang di harapkan melihat website tersebut ?

c.

Apa saja aktifikasi yang di lakukan dalam website tersebut ?

d.

Apa saja yang ingin dicapai dari pembuatan website tersebut ?

Dengan menjawab beberapa pertanyaan di atas, maka jawaban dari penulis

untuk beberapa pertanyaan di atas sebagai berikut :


(32)

b.

Yang di harapkan untuk melihat website

ini adalah pembeli yang ingin

membeli kue yang tersedia.

c.

Aktifikasi yang dapat dilakukan dalam website tersebut adalah

pengunjung dapat melihat semua jenis kue yang berfariasi sesuai dengan

yang di butuhkan oleh konsumen di setiap moment.

d.

Target yang ingin dicapai dalam pembuatan website ini adalah dapat

memberikan kemudahan terhadap teransaksi penjulan, juga pembeli dapat

melakukan transaksi dari mana pun dan kapan pun hanya dengan

menggunakan sebuah komputer yang telah memiliki akses internet.

Tahapan selanjutnya adalah tahapan pembuatan bagan atau struktur dari

website tersebut. Struktur website tersebut menampilkan struktur hirarki dan isi

halaman perhalaman. Dengan adanya struktur, akan sangat mudah untuk

memvisualisasikan isi dari setiap halaman website dan navigasi antar halaman.

Adapun struktur dari website yang penulis buat di tunjukkan pada gambar

berikut


(33)

Gambar 3.1 Struktur Website

3.2

Perancangan Halaman Website

3.2.1 Halaman Home

Halaman ini merupakan halaman utama dari website. Halaman ini berisikan tentang

perkenalan product dan

update terbaru

product yang di jual dan link-link utama

menuju ke halaman-halaman lainnya.

Home

home

Perkenalan

product

comment

Cara pembelian

pengiriman

product

Tentang kami

Data toko

Form

pembelian

Jasa

pengiriman

Birthday

Cake

Cake

Cake

Wedding

Cookies

Cupcake

Pudding

Admin

Login Admin

entries rss (antrian

ringkasan pesanan

atau webblog)

Ringkasan

komentar


(34)

3.2.2 Cara Pembelian

Halaman ini berisikan link-link yang menghubungkan data toko dan form pembelian.

Dimana pembeli dapat melihat data toko dan dapat memesan product di form yang di

sediakan di halaman ini .

3.2.3 Pengiriman

Halaman ini berisikan ke jasa pegiriman yang telah di sediakan , pembeli akan

memilih satu tempat pengiriman baik itu TIKI ataupun JNE.

3.2.4 Product

Halaman ini berisikan aneka macam jenis kue yang di link kan ke jenis-jenis kue

beraneka ragam yang tersedia untuk segala momen dan harganya masing-masing.

3.2.5 Tentang Kami

Halaman ini berisikan tentang info toko kue online store .

3.2.6 Halaman Admin

Halaman ini berisikan login yang akan menghubungkan ke halaman adminisrator.

Halaman ini khusus hanya dapat di akses oleh adminstrator website untuk melakukan

pengaturan website seperti menambah, menghapus dan mengubah data.


(35)

3.3

Diagram Level Konteks

Dalam perancangan sistem ini, penulis mencoba untuk memberikan gambaran

mengenai alur pemesanan produk. Adapun rancangan DFD pada sistem ini adalah

sebagai berikut:

Info pemesanan kue info data katagori kue

Info kue

Kategori kue data pemesan kue

Produk kue

Laporan pemesanan kue

Gambar 3.2 DFD Level Konteks

Admin

Sistem

E-commerce

pemesan


(36)

Tampilan Utama

Product kue

Cara Pembelian

Pengiriman

Data pemesan kue

Kode kue

Gambar 3.3 DFD Level 0

Pemesan

Admin

F1

F2

1.0

Input Data

F3

F4

2.0

Pembuatan

Laporan


(37)

3.4

Perancangan Diagram Alir (

flowchart

)

Website

Diagram alir (flowchart) ini menjelaskan secara rinci langkah-langkah dari proses

program.

Flowchart dibuat dengan menggunakan simbol-simbol tertentu yang

menyatakan setiap langkah program. Berikut ini adalah bentuk-bentuk flowchart

dari toko kue online store.

3.4.1

flowchart Home

seorang pengunjung website dapat mengakses menggunakan jaringan internet dan

dapat berpindah dari halaman yang satu ke halaman lainnya. Masing- masing

halaman utama memiiki link-link yang dapat dipilih .Menu utama menampilkan

update-update product terbaru. Flowchart menu utama dapat dilihat pada gambar

3.4


(38)

Yes

Yes

Yes Yes

Yes

Yes Yes

Yes

Yes

Yes

Yes Yes

Yes

Yes

Yes

Yes Yes

Gambar 3.4 Flowchart

Halaman Menu Utama

Home

START

Menampilkan

Menu Utama

Pilih link

yang ada

Cara

pembelian

Pengiriman

product

Tentang

kami

Prosedur

log in

Pilih link

yang ada

B

Profil

product

Prosedur

log in

C

Admin

Prosedur

log in

D


(39)

3.4.2

Flowchart Cara Pembelian

Halaman ini di tujukan untuk pengunjung yang ingin memesan atau membeli kue.

Dimana pembeli dapat melihat data toko dan dapat memesan product di form yang di

sediakan di halaman ini. flowchart cara pembelian dapat di lihat pada gambar 3.5

Yes

Yes

Yes

Yes

Y Yes Yes

Yes

No Yes

Pemesanan Pebelian

Informasi data

penjual

Masukkan data

pembeli

Masukkan kode

pesanan dan jumlah

pesanan

e-mail

B

Pilih pengiriman

yang di sediakan

- TIKI

- JNE


(40)

3.4.3 flowchart Produk

Halaman ini ini di jutukan untuk pengunjung yang hendah meliht jenis-jenis kue,

harganya yang mau di pesan . Pada halaman ini terdapat jenis kue seperti: Birthday

Cake, Cake, Cake Wedding, Cookies, Cupcake, Pudding dan melinkan ke

macam-macam jenis kue. Flowchart cara produk penjualan dapat di lihat pada gambar 3.6

Yes

Yes

Yes

Yes

Yes Yes

Yes

Yes

Yes

Yes

Yes

c

Pilih jenis kue

Home

product

-Birthday Cake

- Cake

- Wedding Cake

- Cookies

- Cupcake

-Pudding

Cara pembelian

e-mail

Jumlah pesanan

Pilih kode

Nama kue dan

kodenya

masing-masing

Update product terbaru


(41)

3.4.3

Flowchart Admin

Halaman admin ini hanya dapat di akses oleh administrator

.Username dan

password

dari

administrator harus sesuai dengan tabel admin. Jika username

dan

password maka admin akan masuk ke halaman administrator dan jika username atau

password salah maka akan timbul pesan error dan untuk login kembali.

Flowchart

admin dapat dilihat pada gambar 3.7 di bawah ini.

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

D

Buka Halaman Admin

Login

Input Username

& password

Cek Username

& password

Username & password salah

Tampilan halaman admin

- Post (menampilkan)

- Media (tempat gambar)

- Link(hubungan)

- Pages (lembar halaman)

- Comments(komentar orang)

- Appearance(penampilan)


(42)

3.5

Merancang Database Server

Database merupakan tempat penyimpanan data yang terstruktur sehingga dapat

diakses dengan cepat dan mudah. Tahap mempersiapkan database

ini merupakan

tahap dimana penulis mempersiapkan tempat untuk menampung data di server.

Data

tersebut akan diproses oleh program yang kita buat pada tahap pemrograman baik

menambah, mengubah, penghapusan, dan menampilkan database itu sendiri.

Database terdiri dari tabel-tabel yang dibuat menggunakan program MYSQL.

Database yang dirancang penulis adalah database

toko kue online store yang terdiri

dari 9(sembilan) tabel sebagai berikut :

1.

Tabel Commentmeta

Tabel 3.1 Tabel Commentmeta

Field Name

Type

Width

Meta id

Bigint

20

Comment_id

Bigint

20

2.

Tabel Comment

Tabel 3.2 Tabel Comment

Field Name

Type

width

Comment id

bigint

20

Comment_post_id

bigint

20


(43)

Comment_author_email

varchar

100

Comment_author_url

varchar

200

Comment_date

datetime

_

Comment_approved

varchar

20

Comment_type

varchar

20

User_-id

bigint

20

3.

Tabel Links

Tabel 3.3 Tabel Links

Fiel Name

Type

Width

Link_id

bigin

20

Link_url

Varchar

225

Link_image

varchar

225

Link_update

datetime

_

4.

Tabel Option

Tabel 4.4 Tabel Option

Fiel Name

Type

Width

Option id

bigint

20

Blog_id

int

11

Option_name

varchar

64

5.

Tabel Postmeta

Tabel 3.5 Tabel Postmeta

Fiel Name

Type

width

Meta id

bigint

20


(44)

6.

Tabel Post

Tabel 3.6 Tabel Post

Fiel Name

Type

Widt

h

ID

bigint

20

Post_author

bigint

20

Post_date

datetime

_

Post_content

longtext

_

Post_title

text

_

Post_status

varchar

20

Comment-status

varchar

20

Ping_status

varchar

20

Post_password

varchar

20

Post_name

varchar

200

Post_modified

datetime

_

Post_content_filtered

text

_

Post_parent

bigin

20

Menu_order

int

11

Post_type

varchar

20

Comment_count

bigint

20

7.

Tabel Terms

Tabel 3.7 Tabel Terms

Fiel Name

Type

Width

Term_id

Bigint

20


(45)

Slug

varchar

200

Term_group

bigint

10

8.

Tabel User_meta

Tabel 3.10 Tabel User_meta

Field Name

Type

Width

Umeta id

bigint

20

User_id

bigint

20

Meta_key

varchar

225

Mata_value

longtext

_

9.

Tabel Users

Tabel 3.11 Tabel Users

Field Name

Type

Width

Id

bigint

20

User_login

varchar

60

User_pass

varchar

64

User_nicenime

varchar

50

User_email

varchar

100

User_url

varchar

100

User_registered

datetime

_

User_activation_key

varchar

60

User_status

int

11


(46)

3.6

Desain Website

3.6.1

Desain Home

Halaman home adalah halaman pembuka yang merupakan halaman yang akan

tampil setelah masuk ke webite penjualan online store.Halaman ini juga termasuk

halaman perberitahuan product-product terbaru. Adapun tampilannya adalah sebagai

berikut:


(47)

3.6.2

Desain Cara Pembeli

Halaman ini berisikan link-link yang menghubungkan data toko dan form

pembelian .

Gambar 3.9 Tampilan Halaman Pembelian

3.6.3

Desain Pengiriman

Halaman ini menghubungkan ke jasa pegiriman yang telah di sediakan ,

pembeli akan memilih satu tempat pengiriman baik itu TIKI ataupun JNE.


(48)

3.6.4

Desai Halaman Product

Halaman ini berisikan aneka macam jenis kue yang di link kan ke jenis-jenis kue

beraneka ragam yang tersedia untuk segala momen dan harganya masing-masing.

Gambar 3.11 Tampilan Halaman Product

3.6.5

Desai Halaman Birthday Cake

Halaman ini menampilkan jenis-jenis Birthday Cake ,kode, dan harganya

masing-masing.


(49)

3.6.6

Desain Halaman Cake

Halaman ini menampilkan jenis-jenis Cake ,kode, dan harganya masing-masing.

Gambar 3.13 Tampilan Halaman Cake

3.6.7

Desain Halaman Wedding Cake

Halaman ini menampilkan jenis-jenis Wedding Cake ,kode, dan harganya

masing-masing.


(50)

3.6.8

Desain Halaman Cookies

Halaman ini menampilkan jenis-jenis Cookies, kode, dan harganya masing-masing.

Gambar 3.15 Tampilan Halaman Cookies

3.6.9

Desain Halaman Cupcake

Halaman ini menampilkan jenis-jenis Cupcake, kode, dan harganya masing-masing.


(51)

3.6.10

Desain Halaman Puding

Halaman ini menampilkan jenis-jenis puding, kode, dan harganya masing-masing.

Gambar 3.17 Tampilan Halaman Cupcake

3.6.11

Desain Halaman Tentang Kami


(52)

3.6.12

Desain Halaman Login Admin

Halaman ini berisikan login yang akan menghubungkan ke halaman adminisrator.

3.6.13

Desain Halaman Admin

Halaman ini khusus hanya dapat di akses oleh adminstrator website

untuk

melakukan pengaturan website seperti menambah, menghapus dan mengubah data.


(53)

BAB 4

IMPLEMENTASI SISTEM

4.1

Pengertian Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur yang dilakukan dalam

menyelesaikan desain

sistem yang telah disetujui untuk menguji, menginstal dan

melalui sistem baru atau sistem yang diperbaiki untuk menggantikan sistem yang

lama.

4.2

Tujuan Implementasi Sistem

Tujuan Implementasi Sistem adalah sebagai berikut :

1.

Menyelesaikan desain website yang baru akan di buat.

2.

Menguji program-program dan prosedur baru.

3.

Memastikan bahwa sistem yang dibuka dengan sempurna oleh pembeli.

4.

Menguji apakah sistem baru tersebut sesuai dengan apa yang diinginkan.

5.

Memastikan bahwa pemakai (user) dapat mengoperasikan sistem baru dengan

Baik.


(54)

4.3

Komponen Dalam Implementasi Sistem

Untuk mengetahui perancangan website yang telah kita kerjakan dapat berjalan

dengan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah

kita buat. Untuk itu dibutuhkan beberapa komponen utama mencakup perangkat keras

(hardware), perangkat lunak (software), dan otak (brainware).

Pada website toko online store ini di butuhkan beberapa komponen seperti

yang di sebut diatas, yaitu :

1.

Perangkat keras (hardware)

a.

Monitor

b.

Harddisk

c.

Memory minimal 256 MB

d.

Modem

e.

Keybord dan mouse

2.

Perangkat lunak

a.

Sistem Operasi windows7

b.

.co.cc sebagai Domain

c.

000webhost sebagai Database

d.

MYSQL sebagai pengelola data.

e.

PHP sebagai bahasa pemrograman serverside

f.

CSS untuk mengatur tampilan dokumen dalam mengendalikan ukuran gambar,

warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna

mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,

bawah.


(55)

3.

Perangkat Operator

a.

Administrator


(56)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Dari keterangan dan bab-bab sebelumnya penulis dapat mengambil beberapa

kesimpulan sebagai berikut :

1.

Dalam pembuatan website ini ada beberapa tahapan yang dilakukan penulis

yaitu tahapan perencanaan, tahapan perancanagn diagram(flowchart),

mempersiapkan database server, dan tahapan implementasi sistem.

2.

Website ini dibuat menggunakan .co.cc sebagai domain, 000webhost sebagai

database dan file manager, PHP sebagai bahasa pemrograman, MYSQL

sebagai pengelola server, CSS sebagai pengatur tampilan dokumen.

3.

Pembuatan website

ini dilakukan pada jaringan internet .koneksi internet

sangat di butuhkan dalam mengaksesan situs.

4.

Layout dan header yang bagus dan menarik dapat menambah daya tarik

website sehingga banyak dikunjungi para pengunjung.

5.

Selalu meng-Update informasi seputar product terbaru

6.

Merupakan sarana online yang dapat diakses oleh siapapun .


(57)

5.2 Saran

Adapun beberapa saran penulis pada pembuatan website ini adalah :

1. Perlu dilakukan pembaruan atau update berkala oleh administrator pada website

Ini guna memberikan informasi dan product terbaru.

2.

Untuk menarik minat pengunjung dan pembeli, perlu dibuat rancangan loyout atau

temple dengan animasi yang menarik.

3.

Dalam pembuatan website ini, perlu dirancang dengan teliti agar dalam melakukan

pembaharuan data tidak ada kesalahan.

4.

Perlu adanya jaringan internet yang baik untuk mengedit data, agar data yang di

buat tidak hilang.

5.

Perlu dilakukan penggandaan (backup) secara teratur kedalam penyimpanan

lainnya untuk mencegah hal-hal yang tidak di inginkan seperti data hilang atau

rusak.

6.

Dengan adanya website ini dapat memotivasi pembisnis dalam membuka peluang

usaha dan terus meningkatkan ilmu pengetahuan khususnya dalam bidang

teknologi dan bisnis.


(58)

DAFTAR PUSTAKA

Fathansyah., Sistem Basis Data, Informatika, Bandung, 1999.

Hartono, Jogianto Pengenalan Komputer, Andi, Yogyakarta, 2004.

Kurniadi, Adi. Belajar mahir website, PT. Elex Media Komputindo Gramedia,

Surabaya, 2001.

Muhaimin, Yahya A. Kamus Besar Bahasa Indonesia, Menteri Pendidikan, Jakarta,

2000.

Mahyuzir Tavri., Pengelolahan Data, PT. Elex Media Komputindo, Jakarta.

2012.


(59)

LAMPIRAN 1 : LISTING PROGRAM

Listing header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php

language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title><?php if (is_home () ) { bloginfo('name'); } elseif (

is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); }

elseif (is_single() ) { single_post_title(); } elseif (is_page() ) { bloginfo('name'); echo ': '; single_post_title(); }

else { wp_title('',true); } ?></title>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/script.js"></script>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<!--[if IE 6]><link rel="stylesheet" href="<?php

bloginfo('template_url'); ?>/style.ie6.css" type="text/css" media="screen" /><![endif]-->

<link rel="alternate" type="application/rss+xml" title="<?php printf(__('%s RSS Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="<?php printf(__('%s Atom Feed', 'kubrick'), get_bloginfo('name')); ?>" href="<?php bloginfo('atom_url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?>

</head> <body> <div class="PageBackgroundSimpleGradient"> </div> <div class="PageBackgroundGlare"> <div class="PageBackgroundGlareImage"></div> </div> <div class="Main"> <div class="Sheet"> <div class="Sheet-tl"></div> <div class="Sheet-tr"><div></div></div> <div class="Sheet-bl"><div></div></div> <div class="Sheet-br"><div></div></div> <div class="Sheet-tc"><div></div></div> <div class="Sheet-bc"><div></div></div> <div class="Sheet-cl"><div></div></div> <div class="Sheet-cr"><div></div></div> <div class="Sheet-cc"></div> <div class="Sheet-body"> <div class="Header">


(60)

<a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

<div id="slogan-text" class="logo-text"> <?php bloginfo('description'); ?></div> </div>

</div>

<div class="nav">

<?php wp30_menu(); ?> <div class="l"> </div> <div class="r"> <div> </div> </div> </div>

Listing Templet.php

<?php get_header(); ?> <?php

$lcmp_page_head = <<<TXT <div class="contentLayout"> <div class="content">

TXT;

$lcmp_is_left = strpos($lcmp_page_head,"sidebar"); if($lcmp_is_left===FALSE){

$lcmp_rightdefault = 'default'; $lcmp_leftdefault = 'notdefault'; }else{

$lcmp_leftdefault = 'default'; $lcmp_rightdefault = 'notdefault'; }

?>

<div class="contentLayout"> <?php

global $lcmp_sidebarloc;

if($lcmp_sidebarloc == $lcmp_leftdefault || $lcmp_sidebarloc == 'left'){ ?>

<div class="sidebar1">

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div>

<?php } ?>

<div class="content"> <div class="Block"> <div class="Block-tl"></div> <div class="Block-tr"><div></div></div> <div class="Block-bl"><div></div></div> <div class="Block-br"><div></div></div> <div class="Block-tc"><div></div></div> <div class="Block-bc"><div></div></div> <div class="Block-cl"><div></div></div> <div class="Block-cr"><div></div></div> <div class="Block-cc"></div> <div class="Block-body">


(61)

<div class="BlockHeader">

<div class="header-tag-icon"> <div class="BlockHeader-text"> <?php _e('Not Found', 'kubrick'); ?> </div>

</div>

<div class="l"></div>

<div class="r"><div></div></div> </div>

<div class="BlockContent">

<div class="BlockContent-body">

<h2 class="center"><?php _e('Error 404 - Not Found', 'kubrick'); ?></h2>

</div> </div>

</div> </div>

</div> <?php

global $lcmp_sidebarloc;

if($lcmp_sidebarloc == $lcmp_rightdefault || $lcmp_sidebarloc == 'right'){ ?>

<div class="sidebar1">

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div>

<?php } ?>

<?php if(file_exists(TEMPLATEPATH . '/sidebar2.php')){ ?> <div class="sidebar2">

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?> </div>

<?php } ?> </div>

<div class="cleared"></div> <?php get_footer(); ?>

Listing Archives.PHP

<?php get_header(); ?> <?php

$lcmp_page_head = <<<TXT <div class="contentLayout"> <div class="content">

TXT;

$lcmp_is_left = strpos($lcmp_page_head,"sidebar"); if($lcmp_is_left===FALSE){

$lcmp_rightdefault = 'default'; $lcmp_leftdefault = 'notdefault'; }else{


(62)

?>

<div class="contentLayout"> <?php

global $lcmp_sidebarloc;

if($lcmp_sidebarloc == $lcmp_leftdefault || $lcmp_sidebarloc == 'left'){ ?>

<div class="sidebar1">

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div>

<?php } ?>

<div class="content">

<?php is_tag(); ?> <?php is_tag(); ?>

<?php if (have_posts()) : ?>

<div class="Post"> <div class="Post-tl"></div> <div class="Post-tr"><div></div></div> <div class="Post-bl"><div></div></div> <div class="Post-br"><div></div></div> <div class="Post-tc"><div></div></div> <div class="Post-bc"><div></div></div> <div class="Post-cl"><div></div></div> <div class="Post-cr"><div></div></div> <div class="Post-cc"></div> <div class="Post-body"> <div class="Post-inner article">

<div class="PostContent">

<?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>

<?php /* If this is a category archive */ if (is_category()) { ?> <h2 class="pagetitle"><?php printf(__('Archive for the

&#8216;%s&#8217; Category', 'kubrick'), single_cat_title('', false)); ?></h2>

?></h2>

<?php /* If this is a tag archive */ } elseif( is_tag() ) { ?> <h2 class="pagetitle"><?php printf(__('Posts Tagged

&#8216;%s&#8217;', 'kubrick'), single_tag_title('', false) ); ?></h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?>

<h2 class="pagetitle"><?php printf(_c('Archive for %s|Daily archive page', 'kubrick'), get_the_time(__('F jS, Y', 'kubrick'))); ?></h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2 class="pagetitle"><?php printf(_c('Archive for %s|Monthly archive page', 'kubrick'), get_the_time(__('F, Y', 'kubrick'))); ?></h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2 class="pagetitle"><?php printf(_c('Archive for %s|Yearly archive page', 'kubrick'), get_the_time(__('Y', 'kubrick'))); ?></h2>

<?php /* If this is an author archive */ } elseif (is_author()) { ?> <h2 class="pagetitle"><?php _e('Author Archive', 'kubrick'); ?></h2> <?php /* If this is a paged archive */ } elseif

(isset($_GET['paged']) && !empty($_GET['paged'])) { ?>

<h2 class="pagetitle"><?php _e('Blog Archives', 'kubrick'); ?></h2> <?php } ?>

<?php


(63)

'kubrick'));

$next_link = get_next_posts_link(__('&laquo; Older Entries', 'kubrick'));

?>

<?php if ($prev_link || $next_link): ?> <div class="navigation">

<div class="alignleft"><?php echo $next_link; ?></div>

<div class="alignright"><?php echo $prev_link; ?></div>

</div>

<?php endif; ?>

</div>

<div class="cleared"></div>

</div>

</div> </div>

<?php while (have_posts()) : the_post(); ?> <div class="Post">

<div class="Post-tl"></div>

<div class="Post-tr"><div></div></div> <div class="Post-bl"><div></div></div> <div class="Post-br"><div></div></div> <div class="Post-tc"><div></div></div> <div class="Post-bc"><div></div></div> <div class="Post-cl"><div></div></div> <div class="Post-cr"><div></div></div> <div class="Post-cc"></div>

<div class="Post-body"> <div class="Post-inner article"> <h2 class="PostHeaderIcon-wrapper">

<img src="<?php bloginfo('template_url');

?>/images/PostHeaderIcon.png" width="27" height="25" alt="PostHeaderIcon" />

<span class="PostHeader"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>">

<?php the_title(); ?> </a></span>

</h2>

<?php $icons = array(); ?> <?php if (!is_page()) : ?> <?php ob_start(); ?>

<img src="<?php bloginfo('template_url'); ?>/images/PostDateIcon.png" width="17" height="18" alt="PostDateIcon" />

<?php the_time(__('F jS, Y', 'kubrick')) ?> <?php $icons[] = ob_get_clean(); ?>


(64)

_e('Author', 'kubrick'); ?>"><?php the_author() ?></a> <?php $icons[] = ob_get_clean(); ?>

<?php endif; ?>

<?php if (current_user_can( 'edit_post', $post->ID )) : ?><?php ob_start(); ?>

<img src="<?php bloginfo('template_url'); ?>/images/PostEditIcon.png" width="13" height="13" alt="PostEditIcon" />

<?php edit_post_link(__('Edit', 'kubrick'), ''); ?> <?php $icons[] = ob_get_clean(); ?><?php endif; ?> <?php if (0 != count($icons)): ?>

<div class="PostHeaderIcons metadata-icons"> <?php echo implode(' | ', $icons); ?>

</div>

<?php endif; ?>

<div class="PostContent">

<?php if (is_search()) the_excerpt(); else the_content(__('Read the rest of this entry &raquo;', 'kubrick')); ?>

</div>

<div class="cleared"></div> <?php $icons = array(); ?> <?php if (!is_page()) : ?> <?php ob_start(); ?>

<img src="<?php bloginfo('template_url');

?>/images/PostCategoryIcon.png" width="18" height="18" alt="PostCategoryIcon" />

<?php printf(__('Posted in %s', 'kubrick'), get_the_category_list(', ')); ?>

<?php $icons[] = ob_get_clean(); ?> <?php endif; ?>

<?php if (!is_page() && get_the_tags()) : ?><?php ob_start(); ?> <?php the_tags(__('Tags:', 'kubrick') . ' ', ', ', ' '); ?> <?php $icons[] = ob_get_clean(); ?><?php endif; ?>

<?php if (!is_page() && !is_single()) : ?><?php ob_start(); ?> <img src="<?php bloginfo('template_url');

?>/images/PostCommentsIcon.png" width="18" height="18" alt="PostCommentsIcon" />

<?php comments_popup_link(__('No Comments &#187;', 'kubrick'), __('1 Comment &#187;', 'kubrick'), __('% Comments &#187;', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?>

<?php $icons[] = ob_get_clean(); ?><?php endif; ?> <?php if (0 != count($icons)): ?>

<div class="PostFooterIcons metadata-icons"> <?php echo implode(' | ', $icons); ?>

</div>

<?php endif; ?>

</div>

</div> </div>

<?php endwhile; ?>

<?php if ($prev_link || $next_link): ?> <div class="Post">

<div class="Post-tl"></div>


(65)

<div class="Post-bl"><div></div></div> <div class="Post-br"><div></div></div> <div class="Post-tc"><div></div></div> <div class="Post-bc"><div></div></div> <div class="Post-cl"><div></div></div> <div class="Post-cr"><div></div></div> <div class="Post-cc"></div>

<div class="Post-body"> <div class="Post-inner article">

<div class="PostContent">

<div class="navigation">

<div class="alignleft"><?php echo $next_link; ?></div>

<div class="alignright"><?php echo $prev_link; ?></div>

</div>

</div>

<div class="cleared"></div>

</div>

</div> </div>

<?php endif; ?>

<?php else : ?> <div class="Post">

<div class="Post-tl"></div>

<div class="Post-tr"><div></div></div> <div class="Post-bl"><div></div></div> <div class="Post-br"><div></div></div> <div class="Post-tc"><div></div></div> <div class="Post-bc"><div></div></div> <div class="Post-cl"><div></div></div> <div class="Post-cr"><div></div></div> <div class="Post-cc"></div>

<div class="Post-body"> <div class="Post-inner article">

<div class="PostContent">

<?php

if ( is_category() ) { // If this is a category archive

printf("<h2 class='center'>".__("Sorry, but there aren't any posts in the %s category yet.", "kubrick").'</h2>',

single_cat_title('',false));

} else if ( is_date() ) { // If this is a date archive

echo('<h2>'.__("Sorry, but there aren't any posts with this date.", "kubrick").'</h2>');

} else if ( is_author() ) { // If this is a category archive $userdata =


(1)

?>

left: <?php echo $lcmp_hdrleftpos; ?>; <?php } ?>

<?php

if($lcmp_hdrtoppos!='default'){

if(is_numeric($lcmp_hdrtoppos)) $lcmp_hdrtoppos.="px"; ?>

top:<?php echo $lcmp_hdrtoppos; ?>; <?php } ?>

<?php

if($lcmp_hdrwidth!='default'){

if(is_numeric($lcmp_hdrwidth)) $lcmp_hdrwidth.="px"; ?>

width: <?php echo $lcmp_hdrwidth; ?>; <?php } ?>}

<?php

if($lcmp_hdrvmargin!='default'){

if(is_numeric($lcmp_hdrvmargin)) $lcmp_hdrvmargin.="px"; ?>

.Sheet

{margin-top: <?php echo $lcmp_hdrvmargin; ?> !important;} <?php } ?>

<?php

if($lcmp_cstftrwidgewidth!='' || $lcmp_cstftrwidgemargin!=''){ ?>

.widget-area{ <?php

if($lcmp_cstftrwidgewidth!=''){

if(is_numeric($lcmp_cstftrwidgewidth)) $lcmp_cstftrwidgewidth.="px";

?>

width: <?php echo $lcmp_cstftrwidgewidth; ?>; <?php } ?>

<?php

if($lcmp_cstftrwidgemargin!=''){

if(is_numeric($lcmp_cstftrwidgemargin)) $lcmp_cstftrwidgemargin.="px";

?>

margin-right: <?php echo $lcmp_cstftrwidgemargin; ?>; <?php } ?>

} <?php } ?> <?php

if($lcmp_cstftrwidgewidth1!=''){

if(is_numeric($lcmp_cstftrwidgewidth1)) $lcmp_cstftrwidgewidth1.="px";

?>

.foot-widget-1

{width: <?php echo $lcmp_cstftrwidgewidth1; ?>;} <?php } ?>

<?php

if($lcmp_cstftrwidgewidth2!=''){

if(is_numeric($lcmp_cstftrwidgewidth2)) $lcmp_cstftrwidgewidth2.="px";

?>


(2)

{width: <?php echo $lcmp_cstftrwidgewidth2; ?>;} <?php } ?>

<?php

if($lcmp_cstftrwidgewidth3!=''){

if(is_numeric($lcmp_cstftrwidgewidth3)) $lcmp_cstftrwidgewidth3.="px";

?>

.foot-widget-3

{width: <?php echo $lcmp_cstftrwidgewidth3; ?>;} <?php } ?>

<?php

if($lcmp_cstftrwidgewidth4!=''){

if(is_numeric($lcmp_cstftrwidgewidth4)) $lcmp_cstftrwidgewidth4.="px";

?>

.foot-widget-4

{width: <?php echo $lcmp_cstftrwidgewidth4; ?>;} <?php } ?>

</style> <?php }

global $adsenseBlock1; TXT;

add_action('admin_menu', 'lcmp_add_theme_page'); add_action('wp_footer','lcmp_theme_options');

Listing links

<?php get_header(); ?> <?php

$lcmp_page_head = <<<TXT <div class="contentLayout"> <div class="content">

TXT;

$lcmp_is_left = strpos($lcmp_page_head,"sidebar"); if($lcmp_is_left===FALSE){

$lcmp_rightdefault = 'default'; $lcmp_leftdefault = 'notdefault'; }else{

$lcmp_leftdefault = 'default'; $lcmp_rightdefault = 'notdefault'; }

?>

<div class="contentLayout"> <?php

global $lcmp_sidebarloc;

if($lcmp_sidebarloc == $lcmp_leftdefault || $lcmp_sidebarloc == 'left'){ ?>

<div class="sidebar1">

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div>


(3)

<?php } ?>

<div class="content"> <div class="Block">

<div class="Block-tl"></div>

<div class="Block-tr"><div></div></div> <div class="Block-bl"><div></div></div> <div class="Block-br"><div></div></div> <div class="Block-tc"><div></div></div> <div class="Block-bc"><div></div></div> <div class="Block-cl"><div></div></div> <div class="Block-cr"><div></div></div> <div class="Block-cc"></div>

<div class="Block-body"> <div class="BlockHeader">

<div class="header-tag-icon"> <div class="BlockHeader-text"> <?php _e('Links:', 'kubrick'); ?> </div>

</div>

<div class="l"></div>

<div class="r"><div></div></div> </div>

<div class="BlockContent">

<div class="BlockContent-body"> <ul>

<?php get_links_list(); ?> </ul>

</div> </div>

</div> </div> </div> <?php

global $lcmp_sidebarloc;

if($lcmp_sidebarloc == $lcmp_rightdefault || $lcmp_sidebarloc == 'right'){ ?>

<div class="sidebar1">

<?php include (TEMPLATEPATH . '/sidebar1.php'); ?> </div>

<?php } ?>

<?php if(file_exists(TEMPLATEPATH . '/sidebar2.php')){ ?> <div class="sidebar2">

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?> </div>

<?php } ?> </div>

<div class="cleared"></div> <?php get_footer(); ?>


(4)

Listing Menu CAKE.php

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40"> <head>

<title>Pudding</title> <style type="text/css"> body{margin

margin-top:100px; margin-bottom:100px; margin-right:150px; margin-left:100px; }

p.padding {

padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; }

h1 {color:#00ff00;} </style>

<body bgcolor="#FFCC66">

<img src="http://indah-permata.co.cc/wp-content/HTML/Header.jpg" width="752" height="170" /><table border="0">

<div id =”nav”>

<tr><td><a href= "http://indah-permata.co.cc/">HOME</a> </td> <td >| <a href= "http://indah-permata.co.cc/cara-pembelian/">Cara Pembelian</a></td>

<td>| <a href= "http://indah-permata.co.cc/pengiriman/"> Pengiraman</a></td>

<td>| <a href= "http://indah-permata.co.cc/Product">Product</a></td> <td>| <a href= "LOGIN.html ">CONTACT US</a></td> </tr></table>

</br>

<div id="container" style="width:750px">

<div id="header" style="background-color:#FFA500;">

<Marquee behavior=""scroll"direction="left" scrollamount="5" scrolldelay="10" bgcolor="#FFDD00"> Selamat Datang di Site Kami, Silakan Melihat-Lihat dan berbelanja disini ....</Marquee></h3> </h1></div>

<div id="MENU"

style="background-color:#FFDD00;height:750px;width:230px;float:left;"> &nbsp;<p><b>&nbsp;&nbsp;&nbsp; Daftar Menu kue</b><br /> &nbsp;</p>

<p>&nbsp;&nbsp;&nbsp;

<a href= "CAKE.html ">CAKE</a><br /></br> &nbsp;&nbsp;&nbsp;


(5)

&nbsp;&nbsp;&nbsp;

<a href= "BIRTHDAYCAKE.html ">BIRTHDAY CAKE<br /></br> </a>&nbsp;&nbsp;&nbsp;

<a href= "WEDDINGCAKE.html">WEDDING CAKE</a><br/></br> &nbsp;&nbsp;&nbsp;

<a href= "COOKIES.html ">COOKIES</a><br/></br> &nbsp;&nbsp;&nbsp;

<a href= "PUDDING.html ">PUDDING</a><br/></br> </br>

<b> Supported by : </b></br></br> <img src = "jne.jpg"> </br></br> <img src = "tiki.jpg"> </br></br> </div>

<div id="content"

style="background-color:#FFFF99;height:750px;width:520px;float:left;"> <style type="text/css">

div.img {

margin: 20px;

border: 2px solid #0000ff; height: auto;

width: auto; float: right;

text-align: center; }

div.img img {

display: inline; margin: 3px;

border: 1px solid #ffffff; }

div.img a:hover img {border: 1px solid #0000ff;} div.desc

{

text-align: center; font-weight: normal; width: 120px;

margin: 2px; }</style> </head> <br> <center>

<img src="http://indah-permata.co.cc/wp-content/HTML/Pcake.jpg" width="500" height="200" />

</center> </br> <body>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Handling Form</title> </head><body>

<center> <?php

//mebuat variabel

$nama=$_REQUEST['nama']; $email=$_REQUEST['email']; $gender=$_REQUEST['gender'];


(6)

$umur=$_REQUEST['umur'];

$komentar=$_REQUEST['komentar']; //menampilkan datayang diterima

echo "TERIMA KASIH TELAH MEMESAN<BR>"; echo "Nama : $nama<br>";

echo "Email : $email<br>";

echo "Jenis Kelamin : $gender<br>"; echo "Umur : $umur<br>";

echo "Komentar : <br>"; echo $komentar;

?>

</center> <br> <center> <img

src="http://kaveeshmanchanda.files.wordpress.com/2011/05/approved_red _stamp.png" width="470" height="200" />

</div> </center> </br>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

TOKO KUE ONLINE</div> </div>

</body> <footer> </footer> </head> </html>