Aplikasi Web Coffee Shop Bandung Toast & Coffee Berbasis Multimedia Menggunakan PHP

(1)

APLIKASI WEB COFFEE SHOP BANDUNG TOAST & COFFEE

BERBASIS MULTIMEDIA MENGGUNAKAN PHP

TUGAS AKHIR

NADHIRA UMAIYA HADI

102406101

PROGRAM STUDI D-III TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

(2)

TUGAS AKHIR

Diajukan untuk melengkapi tugas dan memenuhi syarat mencapai gelar ahlimadya

NADHIRA UMAIYA HADI

102406101

PROGRAM STUDI D-III TEKNIK INFORMATIKA

DEPARTEMEN MATEMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2013

(3)

PERSETUJUAN

Judul :

APLIKASI WEB COFFEE SHOP BANDUNG TOAST & COFFEE BERBASIS MULTIMEDIA MENGGUNAKAN PHP

Kategori : TUGAS AKHIR

Nama : NADHIRA UMAIYA HADI

Nomor Induk Mahasiswa : 102406101

Program Studi : D3 TEKNIK KOMPUTER Departemen : MATEMATIKA

Fakultas : MATEMATIKA DAN ILMU PENGETAHUAN ALAM (MIPA) UNIVERSITAS SUMATERA

UTARA

Diluluskan di Medan, Juni 2013

Diketahui/Disetujui oleh:

Departemen Matematika FMIPA USU

Ketua Pembimbing

Prof . Dr. Tulus, M.Si Drs. Pasukat Sembiring,M.Si NIP.196209011988031002 NIP. 195311131985031002

(4)

PERNYATAAN

APLIKASI WEB COFFEE SHOP BANDUNG TOAST & COFFEE BERBASIS MULTIMEDIA MENGGUNAKAN PHP

TUGAS AKHIR

Saya mengakui bahwa Tugas Akhir ini adalah hasil kerja saya,kecuali beberapa kutipan dan ringkasan yang masing-masing disebutkan nama sumbernya

Medan, Juni 2013

Nadhira Umaiya Hadi 102406101

(5)

PENGHARGAAN

Puji syukur penulis ucapkan kepada Allah Swt berkat rahmat dan karunia-Nya yang telah memberikan pengetahuan,kekuatan,dan kesempatan kepada penulis sehimgga mampu menyelesaikan Tugas Akhir ini dengan baik dan tepat pada waktunya.

Tugas Akhir yang berjudul APLIKASI WEB COFFEE SHOP BANDUNG

TOAST & COFFEE BERBASIS MULTIMEDIA MENGGUNAKAN PHP ini

dimaksudkan adalah sebagai salah satu syarat untuk menyelesaikan pendidikan penulis pada program D-3 Teknik Komputer Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.

Dalam kesempatan ini,Penulis mengucapkan terima kasih kepada banyak pihak yang telah membantu dalam penyelesaian Tugas Akhir ini.Penulis ingin mengucapkan terima kasih kepada:

1. Bapak Drs. Pasukat Sembiring,M.Si selaku Dosen Pembimbing Tugas Akhir Penulis yang telah memberikan bimbingan dan dukungan selama ini kepada Penulis dalam menyelesaikan Tugas Akhir.

2. Ibu Dra.Marpongahtun,M.sc selaku Pembantu Dekan I (PUDEK I) Fakultas Matematika dan Ilmu Pengetahuan Alam,Universitas Sumatera Utara.

3. Bapak Prof.Dr.Tulus,M.si selaku Ketua Departemen Matematika dan Ilmu Pengetahuan Alam,Universitas Sumatra Utara.

4. Teuku Galliv dan Maia Utary yang selalu memberi motivasi. Fikri setiadi yang telah membimbing dan memberi ilmunya kepada penulis

5. Orang tua tercinta, Rekan-rekan seperjuangan di D3 Teknik Komputer 2010 Kom A ,Khususnya cempeudagh.

Penulis menyadari bahwa penyusunan Tugas Akhir ini belum sempurna baik dalam penulisan maupun isi,disebabkan keterbatasan kemampuan Penulis.Oleh karena itu,Penulis mengharapkan kritik dan saran yang sifatnya membangun untuk penyempurnaan Tugas Akhir ini.

Medan, Juni 2013 Penulis

Nadhira Umaiya Hadi 102406101

(6)

ABSTRAK

Dalam penulisan Tugas Akhir ini,Penulis membahasa perancangan website Bandung Toast & Coffee dimana website tersebut sangat membantu dalam bidang promosinya. Didalam website tersebut terdapat informasi tentang menu yang ditawarkan, berita mengenai coffee shop tersebut, alamat dan lainnya. Sehingga diharapkan dibuatnya website ini dapat menaikkan pendapatan dan menjadi wacana promosi yang

(7)

DAFTAR ISI

Halaman

Persetujuan i

Pernyataan ii

Penghargaan iii

Abstrak iv

Daftar Isi v

Daftar Tabel vii

Daftar Gambar viii

BAB 1 PENDAHULUAN

1.1 Latar Belakang 1

1.2 Identifikasi Maslah 2

1.3 Rumusan Masalah 2

1.4 Batasan Masalah 3

1.5 Maksud Tujuan 3

1.6 Metode Penelitian 3

1.7 Sistematika Penulisan 4

BAB 2 LANDASAN TEORI

2.1 Pengenalan HTML 6

2.1.1 Pengenalan Dokumen HTML 6

2.1.2 Bagian HTML 6

2.2 Pengertian PHP 7

2.3 Sejarah PHP 8

2.4 Tahap Awal Memulai 8

2.5 Penggabungan Script MTML dan PHP 9

2.6 Pengenalan Mysql 10

2.7 Macromedia Dreamweaver 8 10

2.7.1 Awal Macromedia 10

2.7.2 Komponen Dreamweaver 8 13

(8)

BAB 3 ANALISA DAN PERANCANGAN SISTEM

3.1 Analisis Kebutuhhan Sistem 15

3.2 Analisis Perancangan dan Pembuatan Aplikasi 16 3.3 Perancangan Halaman dan Antarmuka Aplikasi 16 3.3.1 Rancangan Tampilan Halaman Awal (index) 16 3.3.2 Rancangan Tampilan Halaman Product 17 3.3.3 Rancangan Tampilan Halaman Detail Product 18 3.3.4 Rancangan Tampilan Halaman News 19 3.3.5 Rancangan Tampilan Halaman Detail News 20 3.3.6 Rancangan Tampilan Halaman About 21

3.4 Perancangan Flowchart Aplikasi 22

3.5 Database 26

BAB 4 IMPLEMENTASI SISTEM

4.1 Implementasi Sistem 27

4.2 Pengujian Aplikasi 27

4.2.1 Software 27

4.2.2 Hardware 27

4.3 Hasil Pengujian 30

BAB 5 KESIMPULAN DAN SARAN

5.1 Kesimpulan 36

5.2 Saran 36

DAFTAR PUSTAKA LAMPIRAN

(9)

DAFTAR TABEL

Tabel 3.1 Tabel Data Home Tabel 3.2 Tabel Data Coffee Tabel 3.3 Tabel Data Snack Tabel 3.4 Tabel Data News

(10)

DAFTAR GAMBAR

Gambar 2.1 Jendela Kerja Dreamweaver8 Gambar 2.2 Menu Insert bar

Gambar 2.3 Tampilan Document Toolbar Gambar 2.4 Tampilan Menu Dreamweaver

Gambar 3.1 Sketsa Rancangan Tampilan Halaman Awal (index) Gambar 3.2 Sketsa Rancangan Tampilan Halaman Product Gambar 3.3 Sketsa Rancangan Tampilan Halaman Detail Product Gambar 3.4 Sketsa Rancangan Tampilan Halaman News

Gambar 3.5 Sketsa Rancangan Tampilan Halaman Detail News Gambar 3.6 Sketsa Rancangan Tampilan Halaman About Gambar 3.7 Flowchart Detail Aplikasi

Gambar 3.8 Flowchart Halaman Home Gambar 3.9 Flowchart Halaman Product Gambar 3.10 Flowchart Halaman News Gambar 3.11 Flowchart Halaman About

Gambar 4.1 Tampilan Halaman Awal Bandung Toast & Coffee Gambar 4.2 Tampilan Halaman Product Coffee

Gambar 4.3 Tampilan Halaman Detail Product Coffee Gambar 4.4 Tampilan Halaman Product Snack

Gambar 4.5 Tampilan Halaman Detail Product Snack Gambar 4.6 Tampilan Halaman News

Gambar 4.7 Tampilan Halaman Detail News Gambar 4.8 Tampilan Halaman About

(11)

ABSTRAK

menguntungkan

(12)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan aplikasi web yang semakin pesat sejak munculnya teknologi internet sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan penerimaan informasi. Mulai dari perusahaan-perusahaan, restorant, sekolah-sekolah, perguruan tinggi, dan lembaga atau organisasi lainnya telah banyak memanfaat aplikasi web dalam kegiatan penjualan, promosi, belajar dan kegiatan lainnya dimana dibutuhkan pengiriman, penyebaran dan penerimaan informasi sehingga memberikan kemudahan bagi pengguna (user) yang membutuhkan.

Aplikasi coffee shop ini akan sangat berguna untuk mencari atau mendapatkan informasi tentang menu yang baru dan jenis-jenis kopi yang ditawarkan oleh coffee shop terrsebut. Sehingga para customer lebih tertarik dengan beragam menu yang ditawarkan,

Berdasarkan atas penerapan di atas, maka penulis mengajukan Tugas Akhir ini dengan judul “ Aplikasi web Bandung Toast and Coffee berbasis multimedia menggunakan PHP”.

1.2 Identifikasi Masalah

(13)

aplikasi web dalam kegiatan penjualan, promosi, belajar dan kegiatan lainnya dimana dibutuhkan pengiriman, penyebaran dan penerimaan informasi sehingga memberikan kemudahan bagi pengguna (user) yang membutuhkan.

Berdasarkan atas penerapan di atas, maka penulis mengajukan Tugas Akhir ini dengan judul “ Aplikasi web Bandung Toast and Coffee berbasis multimedia menggunakan PHP”.

1.3 Rumusan Masalah

Adapun masalah yang akan di angkat, di bahas, dan di selesaikan adalah sebagai berikut :

1. Bagaimana menerapkan informasi yang akan dirubah kedalam bahasa pemrograman PHP ?

2. Bagaimana menyampaikan informasi tentang aneka menu yang dipilih ? 3. Bagaimana Desain interface yang memudahkan user untuk mendapatkan

informasi pada web ini ?

(14)

1.4Batasan Masalah

Adapun batasan masalah dari tugas akhir ini adalah menampilkan halaman-halaman web baik bersifat statis maupun dinamis sebagai suatu website yang memberika informasi mengenai Bandung Toast Cofee itu seniri yang membutuhkan informasi.Pihak administasor web sangat berperan penting dalam membuat,mengubah,maupu mengupdate data yang ditampilkan pada web.

Aplikasi web ini ibangun di bawah sistem operasi windows XP menggunakan web server Apache,PHP,dan MySQL ,serta menggunakan Macromedia Dreamweaver8 sebagai editor perancangan dan pembangunan web.

1.5 Maksud dan Tujuan

Adapun tujuan dari penyusun Tugas Akhir ini adalah untuk mempermudah Coffee Shop Bandung Toast and Coffee untuk menyampaikan informasi mengenai produk yang ditawarkan. Sementara manfaat dari penyusunan Tugas Akhir ini adalah sumber informasi tentang Bandung Toast and Coffee untuk yang ada di kota Medan dengan interface yang mudah digunakan atau user friendly dan mempermudah para user untuk mengetahui produk terbaru yang ditawarkan sehingga menarik user datang langsung ke outlet. Dan akhirnya Bandung Toast and Coffee lebih dikenal masyarakat dan pendapatan untuk Bandung Toast and Coffee semakin meningkat.

1.6 Metode Penelitian

Penulisan Tugas Akhir ini metodelogi yang digunakan adalah studi literature, tahapan yang dilakukan adalah : Analisis, Desain, Implementasi, Pengujian Aplikasi. Langkah-langkah yang harus ditempuh oleh penulis dalam penyusunan Tugas Akhir adalah sebagai berikut :

1. Studi Pustaka

Studi pengumpulan data mengenai informasi dalam pembuatan aplikasi serta pengoperasian metodenya dengan menggunakan pemrograman “Bahasa Pemrograman PHP”.

(15)

2. Membuat Design Web

Merancang desain sistem informasi Bandung Toast & Coffee berbasis web dengan menggunakan adobe photoshop.

3. Perancangan Aplikasi

Mengkonsepkan analisis dan perancangan menjadi aplikasi memberikan informasi dalam interface mudah digunakan yang berjalan pada komputer. 4. Implementasi Aplikasi

Perancangan web Bandung Toast and Coffee menggunakan Bahasa pemrograman PHP yang dikumpulkan sebelumnya oleh penulis.

1.7 Sistematika Penulisan

Sistematika penulisan dari Tugas Akhir ini adalah sebagai berikut:

BAB 1 PENDAHULUAN

Bab ini berisikan latar belakang,rumusan masalah,batasan masalah,maksud dan tujuan.metode penelitian dan sistematika penulisan Tugas Akhir.

BAB 2 LANDASAN TEORI

Bab ini berisikan pengertian perpustakaan,sejarah singkat visual basic 2010, Penjelasan visual basic 2010 dan IDE Microsoft Visual basic 2010

BAB 3 GAMBARAN UMUM SEKOLAH DASAR NEGRI

Bab ini berisikan tentang sejarah singkat perpustakaan SD negri.

(16)

BAB 4 PERANCANGAN SISTEM

Bab ini berisikan pengertian sistem dan perancangan sistem.

BAB 5 IMPLEMENTASI SISTEM

Bab ini berisikan definisi implementasi sistem,tujuan implementasi sistem, penerapan sistem dan komponen utama dalam implementasi sistem.

BAB 6 KESIMPULAN DAN SARAN

(17)

BAB 2

LANDASAN TEORI

2.1 Pengenalan HTML

2.1.1 Pengertian Dokumen HTML

HTML ( Hypertext Markup Language ) adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa, dan disebut sebagai markup language karena mengandung tanda – tanda (tag ) tertentu yang digunakan untuk menentukan tampilan suatu teks tersebut dalam suatu dokumen. Pada dokumen HTML yang termasuk sistem hypertext , kita tidak harus membaca dokumen tersebut secara urut dari atas ke bawah atau sebaliknya, tetapi kita dapat menuju pada topik tertentu secara langsung dengan menggunakan teks penghubung yang akan membawa anda ke suatu topik atau dokumen lain secara langsung.

HTML merupakan pengembangan dari standar pemformatan dokumenteks yaitu SGML ( Standart Generalized Markup Language ). Sejak awal perkembangan sampai sekarang ini telah tersedia bermacam-macam level ( versi ) HTML, ada HTML level 1.0, HTML 2.0, HTML 3.0, dan HTML 4.0.

2.1.2 Bagian HTML

HTML terdiri dari beberapa bagian yang fungsinya sebagai penanda suatu kelompok

perintah tertentu, misalnya kelompok perintah form yang ditandai dengan kode

<form>, judul dengan <title> dan sebagainya. Untuk lebih lanjut mengenai bagian - bagian HTML perhatikan skema dibawah ini :

<html>

(18)

<head>

<body>

…isi dari halaman web… </body>

</html>

Keterangan :

1. Dokumen HTML selalu diawali dengan tanda tag pembuka<html> dan diakhiri dengan tanda tag penutup </html>.

2. Pada elemen head <head></head>, dapat kita sisipkan kode-kode untuk menuliskan keterangan tentang dokumen HTML. Atau dapat juga kita sisipkan scripts-scripts pemograman web seperti JavaScript, VBScripts, atau CSS untuk menambah daya tarik pada situs yang kita buat agar lebih menarik dan dinamis.

3. Elemen body <body></body> berisi tag-tag untuk isi atau layout tampilan situs kita, seperti: <font></font>, <table></table>, <form></form>.

Jadi jelas bahwa elemen adalah suatu bagian yang besar yang terdiri dari kode-kode tag tersebut. Sedangkan tag hanyalah merupakan bagian dari elemen. Tag adalah kode-kode yang digunakan untuk men-setting dokumen HTML.

(19)

PHP singkatan dari PHP Hypertext Preprocessor yang digunakan sebagai bahasa script server-side dalam pengembangan web yang disisipkan pada dokumen HTML. Penggunaan PHP memungkinkan web dapat dibuat dinamis sehingga maintenance situs web tersebut menjadi lebih mudah dan efisien.

PHP merupakan software Open-Source yang disebarkan dan dilisensikan secara gratis serta dapat di-download secara bebas dari situs resminya yaitu htpp://www.php.net

(20)

2.3 Sejarah PHP

PHP diciptakan pertama kali oleh Rasmus Lerdorf pada tahun 1994. Awalnya, PHP digunakan untuk mencatat jumlah serta untuk mengetahui siapa saja pengunjung homepage-nya . Rasmus Lerdorf adalah salah seorang pendukung Open Source . Oleh karena itu , ia mengeluarkan Personal Home Page Tools versi 1.0 secara gratis, kemudian menambah kemampuan PHP 1.0 dan meluncurkan PHP 2.0.

Pada tahun 1996, PHP telah banyak digunakan dalam website di dunia. Sebuah kelompok pengembang software yang terdiri dari Rasmus, Zeew Suraski, Andi Gutman, Stig Bakke, Shane Caraveo dan Jim Winstead bekerja sama untuk menyempurnakan PHP 2.0. Akhirnya, pada tahun 1998, PHP 3.0 diluncurkan. Penyempurnaan terus dilakukan sehingga pada tahun 2000 dikeluarkan PHP 4.0. Tidak berhenti sampai disitu, kemampuan PHP terus bertambah.

2.4 Tahap Awal Memulai

Sebelum kita memulai pemograman PHP yang perlu diingat adalah pastikan web server dan skrip PHP telah berjalan dengan baik. Notepad merupakan editor teks yang biasa digunakan. Dan juga dapat dengan editor yang lain seperti Adobe Macromedia, PHPPed, UltraEdit, Crimson Editor. Fungsi-fungsi yang tidak case sensitif tetapi variabelnya case sensitive ( membedakan huruf besar da kecil ) . Kode PHP diawali dengan tanda lebih kecil ( < ) da diakhiri dengan tanda lebih besar (>). Ada tiga cara untuk menuliskan skrip PHP, yaitu :

1. <?Script PHP?> 2. <?php Script PHP ?>

(21)

Pemisah antar instruksi adalah titik koma (;) . Untuk membuat atau menambahkan komentar, standar penulisan adalah

(22)

2.5 Penggabungan Script HTML dan PHP

Bahasa pemrograman PHP dapat digabungkan dengan HTML dengan terlebih dahulu memberikan tanda tag buka dilanjutkan tanda tanya ( <? ) kemudian ditutup dengan tanda tanya dilanjutkan tanda tag tutup ( ?> ).

Ada dua tipe penggabungan antara PHP dan HTML yaitu: 1. Embedded Script

Embedded Script adalah script PHP yang disisipkan di antara tag-tag dokumen HTML. Dengan cara ini, penulisan tag PHP digunakan untuk mengapit bagian-bagian tertentu dalam dokumen yang memerlukan script PHP untuk proses di dalam server. Embedded Script menempatkan PHP sebagai bagian dari script HTML.

Contoh penulisan Embedded Script dapat dilihat di bawah ini : <html>

<head>

<title> Embedded Script</title> <head>

<body>

<? echo "Hallo"; ?> </body>

</html>

(23)

Non-Embedded Script adalah script/program PHP murni. Termasuk tag HTML yang disisipkan dalam script PHP.

<?php

echo"<html>"; echo"<head>";

echo"<title>Non-Embedded Script</title>"; echo"</head><body>";

echo"Hallo"; echo"</body>"; echo"</html>";?>

(24)

2.6 Pengenalan MYSQL

MySQL merupakan salah satu perangkat lunak sistem pengelola basis data (Data Base Management System). MySQL juga dapat dikategorikan sebagai Relational Data Base Management System (RDBMS), karena dalam pembuatan basis data pada MySQL dapat dipilah-pilah ke dalam berbagai tabel 2 (dua) dimensi. Setiap tabel pada MySQL terdiri atas lajur horizontal dan lajur vertikal. MySQL pada saat ini, banyak digunakan oleh pemrogram web untuk membangun situs yang memerlukan basis data sebagai data dan pengolahan data.

2.7 Macromedia Dreamweaver 8

Macromedia Dreamweaver adalah software yang digunakan oleh Web desainer ataupun Web programmer untuk mengembangkan situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam mendesain ataupun membangun situs web. Dreamweaver juga dilengkapi fasilitas yang cukup lengkap.

2.7.1 Awal Macromedia

Dremweaver 8 Workspace adalah ruang kerja yang semua jendela dokumen dan panel integrasi pada satu jendela besar, dengan panel group yang berada disisi kanan. Ruang kerja pada dreamweaver 8 memiliki komponen yang memberikan fasilitas dan ruang untuk menuangkan kreasi dan dalam bekerja, seperti yang dilihat pada Gambar 2.1. Komponen yang disediakan oleh Dreamweaver antara lain adalah insert bar, Document toolbar, document window, Panel Groups, Site Panel, Property inspector.

(25)

Perhatikan gambar berikut ini, berikut bagian-bagian yang terdapat pada jendela kerja dari Dreamweaver 8.

(26)

Gambar 2.1 Jendela Kerja Dreamweaver 8

A. Insert Bar

Insert Bar merupakan kumpulan menu yang digunakan untuk memasukkan sebuah objek atau fungsi lainnya ke dalam jendela dokumen. Contoh: image, Layer, Tabel dan lain-lain. Insert Bar juga mempunyai tujuh menu didalamnya yaitu Common, Layout, Forms, Text, HTML, Application dan Flash Elements. Untuk menampilkan dan menggunakan menu yang terdapat pada Insert Bar, Anda dapat meng-klik tombol drop down yang berada di sebelah kiri Insert Bar. Perhatikan Gambar 2.2 di bawah ini

(27)

Gambar 2.2 Menu Insert Bar

(28)

B. Document Toolbar

Document Toolbar digunakan sebagai penempatan file-file yang telah dibuka dan sekaligus untuk menampilkan nama dari file tersebut. Document Toolbar juga mempunyai tiga buah tab yang dapat membantu Anda mendesain web dengan mengubah tampilan dari jendela dokumen, diantaranya Code, Split, Design.

Gambar 2.3 Tampilan Document Toolbar

i. Code : merupakan kumpulan kode program yang telah disusun, dan berfungsi untukmengedit listing dari program.

ii. Split : digunakan untuk menampilkan tab dari code view dan design view secara bersamaan.

iii. Design : digunakan sebagai tempat untuk meletakkan objek-objek ke dalam jendela dokumen, seperti Tabel, Form, dan lainnya.

C. Document Window

Document Window atau biasa disebut dengan jendela dokumen, merupakan tempat untuk menampilkan objek-objek atau kode program dari tab kode, split, dan design.

(29)

D. Panel Groups

Panel Group berfungsi untuk mengatur halaman web yang telah Anda buat. Contoh : Panel File, berfungsi untuk mencari dan mengetahui letak halaman

file-file yang telah dibuat.

(30)

2.7.2 Komponen Dreamweaver 8

Di dalam ruang kerja Dreamweaver 8 terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Berikut ini keterangan singkat tentang menu yang ada pada Dreamweaver 8. Menu berisi submenu yang biasanya ditampilkan sebagai dropdown menu yang akan muncul ketika anda menekan tombol menu utama.

Gambar 2.5 Tampilan Menu Dreamweaver 8

Di dalam sistem menu Dreamweaver 8 terdapat beberapa komponen yang dapat digunakan, yaitu :

1. Menu File

Menu File terdiri dari perintah untuk membuat dokumen baru, membuka dokumen yang telah disimpan, dan lain-lain.

2. Menu Edit

Menu Edit terdiri dari perintah untuk meng-copy, memindahkan serta perintah untuk pemilihan seperti Select All, dan lain-lain.

3. Menu View

Berisi perintah untuk menampilkan beberapa macam tampilan jendela dari area kerja Macromedia Dreamweaver 8. Seperti jendela Code dan View, serta untuk menampilkan dan menyembunyikan beberapa elemen halaman dan toolbar.

(31)

5. Menu Modify

Berfungsi untuk melakukan perubahan properti pada item atau halaman terpilih. Dengan menggunakan menu ini kita dapat mengedit atribut tag, mengganti tabel dan elemen tabel, dan bermacam bentuk aksi untuk item library dan template

(32)

6. Menu Text

Berfungsi untuk mempermudah dalam melakukan format teks.

7. Menu Commands

Berisi akses ke beberapa perintah, format kode yang sesuai dengan format pilihan kita, membuat photo album, dan melakukan pengeditan gambar dengan menggunakan Macromedia Fireworks.

8. Menu Site

Berisi item untuk mengelola situs seperti mendefinisikan situs baru, menghapus situs, menduplikasikan situs yang telah didefinisi.

9. Menu Window

Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamweaver.

10. Menu Help

(33)

BAB 3

ANALISA DAN PERANCANGAN SISTEM

3.1 Analisis Kebutuhan Sistem

Pada bab ini, akan menjelaskkan tentang analisa dan perancangan Aplikasi Coffee Shop Bandung Toast & Coffee meliputi analisis kebutuhan sistem, analisis perancangan dan pembuatan aplikasi, perancangan aplikasi antar muka, flowchart, dan sistem basis data atau database.

Analisis kebutuhan sistem ini dilakukan untuk mengetahui seberapa penting suatu sistem yang akan dirancang sehingga pengguna atau user dapat menerima dan menggunakan aplikasi secara yang telah dibuat dapat membantu untuk mendapatkan informasi yang dicarinya dan apakah aplikasi tersebut mudah digunakan atau user friendly. Dalam hal ini objek yang ditampilkan berupa informasui product yang berbentuk sebuah gambar atau image yang dapat ditampilkan berbentuk multimedia sehingga pengguna akan dapat berinteraksi dengan mudah pada program yang telah dirancang.

Penganalisisan kebutuhan sistem ini yang akan menjadi bagian peninjauan terhadap sistem yang akan dirancang, baik dari sisi tampilan pada program agar pengguna tertarik untuk mendapatkan informasi dan menggunakan aplikasi, serta mudah mengetahui berita yang baru dan penawaran yang diberikan , dan juga dari sisi fungsionalitas sistem yang akan dirancang.

Pada proses pembuatan aplikasi ini membutuhkan bagian sebagai berikut :

(34)

3.2 Analisis Perancangan dan Pembuatan Aplikasi

Dalam merancang aplikasi Bandung Toast & Coffee, diperlukan bentukan inputan untuk berinteraksi yang mudah digunakan antara pengguna dengan sistem yang dirancang

Penggunaan bahasa pemrograman PHP menjadi pilihan utama dalam pembuatan aplikasi ini serta juga menggunakan bahasa pemrograman pendukung yaitu HTML (hypertext markup language), CSS (cascading style sheet), javascript dan jquery. Semua bahasa pemrograman dapat mendukung pembuatan aplikasi agar menjadi lebih dinamis dan memiliki tampilan yang lebih menarik untuk digunakan oleh user.

3.3 Perancangan Halaman dan Antarmuka Aplikasi

Perancangan tampilan antarmuka atau User Interface merupakan media komunikasi antara user dengan sistem aplikasi apakah sistem ini dapat digunakan dengan mudah dan dapat memberikan informasi yang dicari oleh user

3.3.1 Rancangan Tampilan Halaman awal (index)

Tampilan ini adalah tampilan halaman awal atau yang sering disebut dengan index pada saat membuka aplikasi ini. Halaman ini juga berupa tatapmuka antar peguna atau user interface. Pada halaman ini untuk menampilkan fitur slide show tersebut maka digunakan teknologi javascript yang berupa platform yang telah

(35)

Gambar 3.1 Sketsa rancangan tampilan halaman awal ( index )

3.3.2 Rancangan Tampilan Halaman Produk

Halaman ini berisikan product yang ditawarkan terdapat beraneka ragam,yaitu Coffee dan Snack. Masing-masing terdapat beraneka ragam jenis makanana dan minuman yang ditawarkan. Sehingga user dapat melihat apa saja yang ditawarkan dan harga dicantumkan juga agar para user dapat memiliki informasi yang aktual. Sketsa tampilan halaman akan ditunjukkan

pada gambar dibawah ini.

(36)

Gambar 3.2 Sketsa rancangan tampilan halaman product 3.3.3 Rancangan Tampilam Halaman Detail Product

(37)

3.3.4 Rancangan Tampilan Halaman News

Halaman ini berisi berita atau informasi baru mengenai kopi atau menu yang baru dikeluarkan dan diskon yang dihadirkan. Sehingga user lebih dapat up to date. Yang ditampilkan dengan tampilan menarik

Gambar 3.4 Sketsa rancangan tampilan halaman news

(38)

3.3.5 Rancangan Tampilan Halaman Detail News

Pada tampilan ini akan menerangkan informasi yang dipilih secara jelas dan keseluruhan. Beserta foto dan sumber

(39)

3.3.6 Rancangan Tampilan About

Halaman ini berisi informasi alamat coffee shop tersebut dan awal berdirinya Bandung Toast & Coffee beserta tampilan map. Jika gambar rumah ditunjuk akan mengeluarkan sebuah panel kecil (hover) yang berisi nama saja dari tempat yang ditunjuk dan jika nama tersebut klik maka akan keluar panel berupa modal window yang berisikan informasi tentang tentang tempat tersebut.

Gambar 3.7 rancangan tampilan halaman abaout

(40)

3.4 Perancangan Flowchart Aplikasi

Flowchart dibawah ini akan membahas cara kerja sistem yang dibuat pada web Bandung Toast & Coffee pada masing – masing halaman.

(41)

Gambar 3.8 adalah flowchart tentang gambaran secara detail cara kerja aplikasi ini . pertama sekali pada saat diakses program akan mencari file halaman awal atau index, pada halaman tersebut terdapat sebuah menu navigasi untuk mengakses fitur – fitur yang ada pada aplikasi ini. Jika salah satu menu pada navigasi di tekan atau di click maka akan pindah halaman sesuai dengan halaman yang diklik dan pada masing – masing halaman terdapat sebuah fitur untuk membantu user mencari informasi yang ada pada aplikasi ini.

Gambar 3.9 Flowchart Pada Halaman Home

Gambar 3.9 menampilkan flowchart tentang cara kerja pada halaman home. Jika user mengklik slider image pada gambar i maka akan muncul Shadow box. Pada gambar juga terdapat dua buah tombol yang jika diakses atau diklik maka akan berpindah gambar sesuai gambar yang ditetapkan pada dua tombol tersebut.

(42)

Gambar 3.10 Flowchart Pada Halaman Product

Gambar 3.10 adalah flowchart tentang cara kerja pada halaman product. Jika user mengakses menu coffee pada navigasi pada halaman product maka tidak berpindah, namun jika memilih halaman snack akan berpindah ke halaman snack. Pada halaman product ini terdapat dua fitur yaitu fitur yang menampilkan menu coffee dan snack,dimana masing masing fitur menyediakan gambar dan informasi lengkap tentang coffee atau snack yang ada di Bandung Toast & Coffee.

(43)

Gambar 3.11 Flowchart pada Halaman News

Gambar 3.11 adalah halaman pada news yang ini menampilkan berita dan informasi baru yang ditawarkan Bandung Toast & Coffee. Yang ditammpilkan dengan gambar dan asal sumber berita atau informasi tersebut.

Gambar 3.12 Flowchart Pada Halaman About

Gambar 3.12 adalah halaman pada about yang ini menampilkan berita informasi berdirinya dan alamat beserta mapBandung Toast & Coffee.

(44)

3.5 Database

Database pada aplikasi ini digunakan sebagai penyimpan data – data berupa nama minuman, informasi serta gambar yang terdapat pada aplikasi, Data tersebut akan dipanggil jika diakses oleh pengguna atau user. Berikut akan dibahas tabel – tabel data yang terdapat pada aplikasi ini serta type data dari data tersebut.

a. Tbl Home

Tabel ini digunakan sebagai tempat penyimpanan gambar – gambar. Pada tabel terdapat beberapa nama field yang digunakan untuk keterangan tentang hotel dengan tipe data yang sama pada setiap field yang ada terkecuali dengan tipe data pada field ID sebagai kata kunci atau primary key pada tabel hotel ini.

Field Type Length Keterangan

ID Integer 100 Primary Key, Auto

Increment Thumbnail_satu Varchar 100

Thumbnail_dua Varchar 100 Thumbnail_tiga Varchar 100 Thumbnail_empat Varchar 100

Image_satu Varchar 100

Image_dua Varchar 100

Image_tiga Varchar 100 Image_empat Varchar 100

(45)

b. Tbl Coffee

Tabel ini digunakan sebagai tempat penyimpanan data tentang menu coffee yang mencakup gambar,harga dan ringkasan singkat. Tabel ini juga memuat beberapa field dengan tipe data yang sama dan tipe data yang berbeda pada field ID sebagai Primary Key.

Field Type Length Keterangan

ID Integer 20 Primary Key, Auto Increment

Nama Varchar 30

Thumbnail Varchar 100

Harga_hot Integer 10

Harga_cold Integer 10

Image Varchar 100

Ringkasan Varchar 200

Deskripsi Varchar 400

Tabel 3.2 Tabel untuk data Coffee

c. Tbl Snack

Tabel ini digunakan sebagai tempat penyimpanan data tentang menu snack yang mencakup gambar,harga dan ringkasan singkat. Tabel ini juga memuat beberapa field dengan tipe data yang sama dan tipe data yang berbeda pada field ID sebagai Primary Key.

(46)

Field Type Length Keterangan

ID Integer 20 Primary Key, Auto Increment

Nama Varchar 30

Thumbnail Varchar 100

Harga_hot Integer 10

Harga_cold Integer 10

Image Varchar 100

Ringkasan Varchar 200

Deskripsi Varchar 400

Tabel 3.3 Tabel untuk data Snack

d. Tbl News

Tabel ini sebagai tempat penyimpanan brtita – berita ataupun informasi pesan – pesan. Yang beserta gambar dan sumber dari berita itu yang didapatkan. Pada tabel ini terdapat tiga field yang memiliki tipe data sama dan field ID dengan tipe data yang berbeda sebagai primary key

Field Type Length Keterangan

ID Integer 10 Primary Key, Auto Increment

Tittle Varchar 50

Thumbnail Varchar 100

Image Varchar 100

Sumber Varchar 100

Ringkasan Varchar 50 Deskripsi Varchar 500

(47)

BAB 4

IMPLEMENTASI SISTEM

4.1Implementasi Sistem

Implementasi sistem adalah suatu langkah penerapan hasil dari program aplikasi yang telah dirancang sebelumnya untuk dibuat menjadi suatu program yang utuh, dan membutuhkan perangkat komputerisasi untuk memproses pembuatan system.

4.2Pengujian Aplikasi

Dalam sebuah sistem komputerisasi tidak akan dipisahkan antara Hardware dan Software, maka sistem ini dirancang dengan spesifikasi Software sebagai berikut:

4.2.1 Software a. Adobe CS4

Digunakan untuk merancang aplikasi. b. Macromedia Dreamweaver

Digunakan untuk mengkodekan atau coding tampilan yang telah dibuat ke dalam bahasa pemrograman

c. Mozilla Internet Browser

Digunakan untuk menguji coba hasil dari pengkodean yang telah dibuat

d. MAMP

Sebuah aplikasi yang digunakan sebagai server lokal untuk menjalankan aplikasi ini

(48)

4.2.2 Hardware a. Intel Atom b. RAM 1GB

c. 32-bit Operating System

4.3 Hasil Pengujian

1. Tampilan Halaman Awal

Pada halaman awal atau Home terdapat sebuah gambar yang menarik dan tombol navigasi untuk menggunakan fitur yang terdapat didalamnya.

Gambar 4.1 Tampilan Halaman Awal Bandung Toast & Coffee

(49)

Pada halaman ini merupakan fitur utama perancangan aplikasi ini. Fitur yang terdapat didalamnya berupa sebuah gambar pada masing – masing product yang ditawarkan,beserta harga dan prnjelasan. Tampilan tersebut terdapat 2 pilihan yaitu, coffee atau snack jika klik maka akan muncul beberapa pilihan menu yang ditawarkan dan akan menunjukan data singkat tentang menu yang ditunjuk. jika ingin lebih detail melihat menu tersebut tinggal mengklik kalimat product , dan terdapat sebuah thumbnai nama productl untuk berpindah halaman ke halaman yang menjelaskan menu tersebut secara lengkap.

Gambar 4.2 Tampilan Halaman Product ( Coffee)

(50)

Pada halaman ini juga ada tampilan halaman snack

Gambar 4.3 Tampilan Halaman Snack

3. Tampilan Halaman About

Halaman about merupakan halaman bagi para user dapat mengetahui latar belakang Bandung Toast & Coffee dan lokasi tempat. Tersedia juga contact yang dapat dihubungi dan nama di media sosial.

(51)

BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Adapun kesimpulan yang dapat diambil dalam pembuatan sistem informasi berbasis web ini adalah sebagai berikut :

1. Sebelum membuat website terlebih dahulu diracang desain, agar website yang disajikan menarik. Software yang digunakan adalah Adobe Photoshop dan Macromedia Dreamweaver 8.

2. Perancangan sistem dapat didefinisikan sebagai penggambaran, perencanaan dan pembuatan sketsa atau pengaturan dari beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.

3. Langkah –langkah atau prosedur yang dilakukan dalam menyelesaikan implementasi sistem adalah desain sistem yang telah disetujui, untuk menginstal, menguji dan memulai sistem baru atau sistem yang diperbaiki.

5.2 Saran

Saran yang bisa diberikan agar web ini tetap terus dapat digunakan adalah sebagai berikut

1. Isi situs web seharusnya di-upload oleh admin secara berkala guna memberikan informasi yang teraktual.

2. Komputer yang digunakan dalam membuat aplikasi web sebaiknya memiliki spesifikasi dengan level menengah ke atas karena penggunaan software-software memakan sumber daya komputer seperti memori dan kapasitas harddisik .

3. Adanya Galery yang berisi full menu yang ditawarkan. 4. Semoga diwaktu dekat, akan terciptanya pemesanan on - line

(52)

DAFTAR PUSTAKA

Kadir, Abdul. 2009. Dasar Perancangan Dan Implentasi Database Relasional. Yogyakarta : Penerbit Andi

Kadir, Abdul. 2005. Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta : Informatika Bandung.

Bernard, R. S. Prijono, A., dan Agustaf, R. 2005. Mudah dan Cepat Menguasai Pemrograman Web. Bandung: Informatika Bandung.

Sugiri, Haris Saputro. 2008. Pengelolaan Database MySQL dengan PhpMyAdmin. Yogyakarta: Graha Ilmu.

Kendall E, Kendall J. 2007. Analisis dan Perancangan Sistem. PT Indeks. Klaten.

Sunarfrihantono, ST, Bimo. 2002. Php Dan Mysql Utk Web HTML. Yogyakarta : Andi

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

Atau :

http://for7delapan.wordpress.com/2012/03/05/pengertian-sistem-informasi-menurut-para-ahli/. Diakses bulan Mei 2013.

http://id.shvoong.com/social-sciences/communication-media-studies/2068236-pengertian-database-menurut-para-ahli. Diakses bulan Mei 2013.

(53)

Listing Program Halaman Home(index.php) <?php require_once'config.php'; ?> <!DOCTYPE html> <html lang="en"> <head>

href="jquery/shadowbox/shadowbox.css"/>

$(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); Shadowbox.init(); }); </script>

<title>Bandung Toast Coffee Shop</title> </head>

<body>

<img src="img/headimage.jpg" alt="imagehead" title="Image Head" /> <div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="about">About</a></li> <li><a href="news">News</a></li> <li><a href="product">Product</a></li>

(54)

<div class="clear"></div> <?php

$q='SELECT * FROM tbl_home' ; $r=mysql_query($q);

while($f=mysql_fetch_object($r)){ ?>

<li><a href="<?php {echo $f->image_satu;}?>" rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_satu;}?>"/></a></li> <li><a href="<?php {echo $f->image_dua;}?>"

rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_dua;}?>"/></a></li> <li><a href="<?php {echo $f->image_tiga;}?>"

rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_tiga;}?>"/></a></li> <li><a href="<?php {echo $f->image_empat;}?>"

rel="shadowbox['1']" title="image 1" >

<img src="<?php {echo $f->thumbnail_empat;}?>"/></a></li>

</ul>

</div> <?php } ?>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="#">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html>

(55)

Config PHP <?php

$host= "localhost" ; $user= "root" ; $password= ""; $db = "db_btc" ;

$connect=mysql_connect($host, $user, $password)or die("cant connect database");

$select=mysql_select_db($db,$connect)or die("cant select db");

if($select){echo'';}

else{echo 'blom nyambung';} ?>

Halaman Product (Coffee) <?php require_once'../config.php'; ?> <!DOCTYPE html> <html lang="en"> <head>

</head> <body>

<li><a href="../about">About</a></li> <li><a href="../news">News</a></li>

<li><a class="active" href="index.php">Product</a></li>

(56)

<div id="coffee"><a href="index.php"><img src="../img/coffeeactive.png"/></a></div> <div id="snack"><a href="../snack"><img src="../img/snackunactive.png"/></a></div> <div class="clear"></div> <div class="linespacing"></div> <?php if(empty($_GET['name'])){ $sql = "SELECT * FROM tbl_coffee";

}else{

$sql = "SELECT * FROM tbl_shop WHERE name='$nama'";

}

$result = mysql_query($sql); while ($r =

mysql_fetch_object($result)){ ?>

<img src="<?php {echo $r->thumbnail;}?>" alt="<?php {echo $r->nama;}?>" title="<?php {echo $r->nama;}?>"/>

<h3>

Hot : Rp <?php {echo $r->harga_hot;}?>

<br>

Cold : Rp <?php {echo $r->harga_cold;}?> </h3>

<p><?php {echo $r->ringkasan;}?></p> </div>

<?php } ?>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li>

(57)

<li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail Coffee <?php require_once '../config.php'; $id = $_GET['id'];

$q = "SELECT * FROM tbl_coffee WHERE id='$id'"; $result = mysql_query($q);

$row = mysql_fetch_object($result) ?>

<!DOCTYPE html> <html lang="en">

<head>

</head> <body>

<div id="content"> <div id="logo"></div> <ul id="navigasi"> <li><a href="../about">About</a></li> <li><a href="../news">News</a></li> <li><a href="../product">Product</a></li> <li><a href="../index.php">Home</a></li> </ul> <div class="clear"></div>

(58)

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->nama;}?>" title="<?php {echo $row->nama;}?>"/> <h1><?php {echo $row->nama;}?></h1>

<h3>

Hot : Rp <?php {echo $row->harga_hot;}?>

<br>

Cold : Rp <?php {echo $row->harga_cold;}?> </h3>

<p><?php {echo $row->deskripsi;}?> </p> </div> <div class="clear"></div> <div class="footer"></div> <ul id="navfooter">

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail Snack <?php require_once '../config.php'; $id = $_GET['id'];

(59)

$result = mysql_query($q);

$row = mysql_fetch_object($result); ?>

<!DOCTYPE html> <html lang="en">

<head>

</head> <body>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->nama;}?>" title="<?php {echo $row->nama;}?>"/> <h1><?php {echo $row->nama;}?></h1>

<h3>

Price : Rp <?php {echo $row->harga;}?>

</h3>

<p><?php {echo $row->deskripsi;}?></p>

</div>

(60)

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q);

$row = mysql_fetch_object($result); ?>

<!DOCTYPE html> <html lang="en">

<head>

<title>Bandung Toast Coffee Shop</title> </head>

<body>

<li><a href="../about">About</a></li>

<li><a class="active" href="index.php">News</a></li> <li><a href="../product">Product</a></li>

(61)

</ul>

<div id="titlepage"><h1 align="right">Coffee Break</h1></div>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->title;}?>" title="<?php {echo $row->title;}?>"/> <h1><?php {echo $row->title;}?></h1>

<h3>Sumber : <?php {echo $row->sumber;}?></h3>

<p><?php {echo $row->deskripsi;}?></p>

</div>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li> </ul> </div> </body> </html> Detail News <?php require_once '../config.php'; $id = $_GET['id'];

$q = "SELECT * FROM tbl_news WHERE id='$id'"; $result = mysql_query($q);

$row = mysql_fetch_object($result); ?>

<!DOCTYPE html> <html lang="en">

<head>

(62)

<title>Bandung Toast Coffee Shop</title> </head>

<body>

<div id="titlepage"><h1 align="right">Coffee Break</h1></div>

<img src="<?php {echo $row->image;}?>" alt="<?php {echo $row->title;}?>" title="<?php {echo $row->title;}?>"/> <h1><?php {echo $row->title;}?></h1>

<h3>Sumber : <?php {echo $row->sumber;}?></h3>

<p><?php {echo $row->deskripsi;}?></p>

</div>

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li> <li><strong>|</strong></li> <li><a href="#">Facebook</a></li> <li><strong>|</strong></li> <li><a href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li> <li><a href="#">Instagram</a></li>

(63)

</div> </body> </html> Halaman About <!DOCTYPE html> <html lang="en"> <head>

<title>Bandung Toast Coffee Shop</title> </head>

<body>

<li><a class="active" href="index.php">About</a></li> <li><a href="../news">News</a></li>

<li><a href="../product">Product</a></li> <li><a href="../index.php">Home</a></li> </ul>

<div id="titlepage"><h1 align="right">About Us</h1></div>

(64)

<h1><strong>Bandung Toast & Coffee</strong></h1> <p>

Bandung Toast & Coffee adalah sebuah gerai kopi yang menyediakan aneka minuman coffee yang berdiri tahun 2012, saat ini bekerjasama dengan salah satu restorant dimedan, yaitu restorant srikandi yang terletak di jalan Merak Medan sunggal. Bandung Toast & coffee tidak hanya menyediakan minuman namun juga tersedia snack. Minuman kopi yang disajikan diracik oleh kopi pilihan dan bahan pendukung yang berkualitas. sehingga terasa kopi yang pas untuk lidah dan lambung anda.

</p> </div>

<div id="titlepage"><h1 align="right">Contact Us</h1></div> <div class="linespacing"></div>

</div>

<li>Address : Restorant Srikandi, Jln. Merak,

Medan Sunggal</li><br>

<li>Phone Number : +6281361332823 /

+6283199653033</li><br>

<li>Email :

Bandungtoastcoffee@yahoo.com</li><br>

<li>Facebook : Bandung Toast & Coffee</li><br> <li>Twitter : @Bdg_toastcoffee</li><br>

<li>Instagram : @Bandungtoastcoffee</li> </ul>

(65)

<li><p>Bandung Toast & Coffee Copywright All Right Reserverd</p></li>

<li><a href="#">Facebook</a></li> <li><strong>|</strong></li>

<li><a

href="https://twitter.com/bdg_toastCoffee">Twitter</a></li> <li><strong>|</strong></li>

<li><a href="#">Instagram</a></li> </ul>

</div> </body> </html>

Style CSS

body {

background:#fff url(img/bg.png) no-repeat; background-color:#fff;

background-position:bottom;

font-family:Helvetica Neue, Helvetica, Arial; font-size:10px;

}

#content {

margin:0 auto; width:960px; }

.clear

(66)

{ clear:both; } #coffee { width:60px; height:30px; float:right;

margin:-15px 230px 30px 0; } #snack { width:60px; height:30px; float:right;

margin:-15px -190px 0 0; }

#contact {

width:480px;

margin:0 0 0 15px; list-style:none; float:right; font-size:13px; font-family:AstuteSSi; letter-spacing:2px; } #contentabout { width:960px; height:175px; margin:0 0 0 10px; float:left;

(67)

#contentabout h1 {

font-family:AvantGardEF-ExtraLight; font-size:40px;

margin:0 0 10px 0; } #contentabout p { height:175px; font-family:Aliquam; font-size:16px; letter-spacing:2px; text-align:justify; } .detailnews { width:960px; height:300px; } .detailnews img { width:400px; height:300px; float:left;

margin:0 30px 0 0; }

.detailnews h1 {

width:530px; height:35px;

margin:0 0 15px 0; float:left;

font-size:28px; }

.detailnews h3

(68)

{

width:530px; height:10px; float:left;

margin:0 0 15px 0; font-size:14px; } .detailnews p { width:530px; height:225px; float:left; font-size:11px; font-family:Helvetica; text-align:justify; word-spacing:2px; } .detailproduct { wiidth:960px; height:300px; } .detailproduct img { width:400px; height:300px; float:left;

margin:0 30px 0 0; }

.detailproduct h1 {

width:530px; height:60px;

margin:0 0 30px 0; font-size:55px; float:left;

(69)

.detailproduct h3 {

width:530px; height:50px;

margin:0 0 15px 0; float:left; font-size:18px; color:#999; word-spacing:8px; } .detailproduct p { width:530px; height:145px; float:left; font-family:AstuteSSi; font-size:16px; text-align:justify; word-spacing:2px; color:#716f6f; } .footer { width:960px; height:25px;

margin:15px 0 0 0;

background:url(img/footerline.png) no-repeat; } #highlight { width:960px; height:250px;

margin:30px 0 30px 0; }

.linespacing {

background:url(img/line.png) no-repeat; width:960px;

(70)

height:5px;

margin:0 0 15px 0; } #logo { background:url(img/logo.jpg) no-repeat; width:300px; height:80px; float:left;

margin:30px 0 30px 0; } .map { width:465px; height:255px; background:url(img/map.png) no-repeat; float:left; } #maphover { background:url(img/maphover.png) no-repeat; width:268px; height:94px; float:left;

margin:70px 0 0 126px; opacity:0.1; } #maphover:hover { opacity:1; } #mapicon { width:45px; height:50px;

(71)

#navfooter {

list-style:none; margin:20px 0 0 0; }

#navfooter a, #navfooter li {

float:left;

font-family:AstuteSSi; font-size:14px;

color:#7d7d7d;

margin:0 15px 30px 25px; } #navfooter a:hover { color:#3d3c3c; } #navigasi {

margin:25px 0 30px 0; list-style:none;

float:right; }

#navigasi li {

margin:30px 0 0 60px; float:right;

font-size:23px;

font-family:"Abrazo Script SSi"; }

#navigasi li a {

color:#EF8B45;

(72)

}

#navigasi li a:hover, #navigasi li a.active { color:#703B30; font-weight:1000; } #newscontent { width:465px; height:150px;

margin:15px 15px 15px 0; float:left; } #newscontent h1 { width:250px; font-family:Helvetica; font-size:18px; float:right;

margin:15px 0 0 0; } #newscontent p { width:240px; height:150px; font-family:helvetica; font-size:12px;

margin:-115px 0 0 215px; word-spacing:5px; float:left; word-spacing:normal; } .newstb { width:225px; height:180px;

(73)

margin:0 15px 30px 0; } .newstb p { font-family:AvantGardEF-ExtraLight; font-size:14px;

margin:-15px 0 30px 0; }

#photoabout {

width:960px; height:235px; margin:0 0 15px 0; float:left; } #tbproduct { width:465px; height:200px; float:left;

margin:0 15px 30px 0; } #tbproduct img { width:200px; height:200px; float:left; margin:0 10px; } #tbproduct h1 {

margin:0 0 15px;

font-family:AstuteSSi; font-size:30px;

word-spacing:5px; }

(74)

#tbproduct h3 {

margin:0 0 10px;

font-family:AvantGardEF-ExtraLight; font-size:18px;

word-spacing:5px; color:#a1a1a1; }

#tbproduct p {

heigt:90px;

font-family:Helvetica; font-size:14px;

color:#a1a1a1; word-spacing:1px; text-align:justify; }

#titlepage {

font-family:AvantGardEF-ExtraLight; font-size:24px;

color:#CCC; }

(1)

.detailproduct h3 {

width:530px; height:50px;

margin:0 0 15px 0; float:left;

font-size:18px; color:#999;

word-spacing:8px; }

.detailproduct p {

width:530px; height:145px; float:left;

font-family:AstuteSSi; font-size:16px;

text-align:justify; word-spacing:2px; color:#716f6f; }

.footer {

width:960px; height:25px;

margin:15px 0 0 0;

background:url(img/footerline.png) no-repeat; }

#highlight {

width:960px; height:250px;

margin:30px 0 30px 0; }

.linespacing {

background:url(img/line.png) no-repeat; width:960px;

(2)

height:5px;

margin:0 0 15px 0; }

#logo {

background:url(img/logo.jpg) no-repeat; width:300px;

height:80px; float:left;

margin:30px 0 30px 0; }

.map {

width:465px; height:255px;

background:url(img/map.png) no-repeat; float:left;

}

#maphover {

background:url(img/maphover.png) no-repeat; width:268px;

height:94px; float:left;

margin:70px 0 0 126px; opacity:0.1;

}

#maphover:hover {

opacity:1; }

#mapicon {

width:45px; height:50px;

margin:171px 0 0 124px; }

(3)

#navfooter {

list-style:none; margin:20px 0 0 0; }

#navfooter a, #navfooter li {

float:left;

font-family:AstuteSSi; font-size:14px;

color:#7d7d7d;

margin:0 15px 30px 25px; }

#navfooter a:hover {

color:#3d3c3c; }

#navigasi {

margin:25px 0 30px 0; list-style:none;

float:right; }

#navigasi li {

margin:30px 0 0 60px; float:right;

font-size:23px;

font-family:"Abrazo Script SSi"; }

#navigasi li a {

(4)

}

#navigasi li a:hover, #navigasi li a.active {

color:#703B30; font-weight:1000; }

#newscontent {

width:465px; height:150px;

margin:15px 15px 15px 0; float:left;

}

#newscontent h1 {

width:250px;

font-family:Helvetica; font-size:18px;

float:right;

margin:15px 0 0 0; }

#newscontent p {

width:240px; height:150px;

font-family:helvetica; font-size:12px;

margin:-115px 0 0 215px; word-spacing:5px;

float:left;

word-spacing:normal; }

.newstb {

width:225px; height:180px; float:left;

(5)

margin:0 15px 30px 0; }

.newstb p {

font-family:AvantGardEF-ExtraLight; font-size:14px;

margin:-15px 0 30px 0; }

#photoabout {

width:960px; height:235px; margin:0 0 15px 0; float:left;

}

#tbproduct {

width:465px; height:200px; float:left;

margin:0 15px 30px 0; }

#tbproduct img {

width:200px; height:200px; float:left;

margin:0 10px; }

#tbproduct h1 {

margin:0 0 15px;

font-family:AstuteSSi; font-size:30px;

word-spacing:5px; }

(6)

#tbproduct h3 {

margin:0 0 10px;

font-family:AvantGardEF-ExtraLight; font-size:18px;

word-spacing:5px; color:#a1a1a1; }

#tbproduct p {

heigt:90px;

font-family:Helvetica; font-size:14px;

color:#a1a1a1; word-spacing:1px; text-align:justify; }

#titlepage {

font-family:AvantGardEF-ExtraLight; font-size:24px;

color:#CCC; }

Aplikasi Web Coffee Shop Bandung Toast & Coffee Berbasis Multimedia Menggunakan PHP