revisi wep ghjpro
TRANSCRIPT
-
8/18/2019 Revisi Wep ghjPro
1/42
MAKALAH
PERANCANGAN SISTEM INFORMASI TOKO KUE BERBASIS
WEB
WEB PROGRAMMING I
Diajukan Untuk Memenuhi Niai UAS Mata Kuiah We! P"#$"ammin$ I
Di%u%un Oeh &
A"'hian Ra(hmat ) *+*,-+./ 0
I1an S#2ian ) *+*,,.,/ 0
3i%m1 A4a"i% ) *+*,*+55 0
Da"t# ) *+*+,.+* 0
Wah1u Ku"nia P"am!u'i ) *+*,6+5* 0
Kea% & *+7.C7,*
3u"u%an Manajemen In4#"matika
Aka'emi Manajemen In4#"matika Bina Sa"ana In4#"matika
De8i Sa"tika
+-*.
KATA PENGANTAR
-
8/18/2019 Revisi Wep ghjPro
2/42
Segala puji dan syukur penulis ucapkan kehadirat Tuhan Yang Maha Esa
sehingga penulis dapat menyelesaikan Makalah Tugas UAS ini dengan judul
9Pe"an(an$an Si%tem In4#"ma%i T#k# Kue Be"!a%i% We!:.
Dalam penyusunan Makalah Tugas UAS ini penulis tidak jarang selalu
mendapat hambatan, tantangan dan kesulitan, hal ini di sebabkan karena banyak
faktr dari keterbatasan dan kemampuan yang penulis miliki.
!enulis juga sadar sepenuhnya bah"a tanpa bantuan, bimbingan, petunjuk
serta drngan dari berbagai pihak, tidak mungkin Makalah Tugas UAS ini dapat
selesai, sehubungan dengan hal tersebut, maka penulis dalam kesempatan ini dengan
segala kerendahan hati penulis mengucapkan terima kasih kepada #
$. Tuhan Yang Maha Esa atas semua berkat, karunia serta pertlngan%&ya yang
telah diberikan kepada penulis di setiap langkah dalam pembuatan prgram
hingga penulisan Makalah Tugas UAS ini.'. (epada kedua rang tua, )apak dan *bu yang telah memberikan kasih sayang
dan mti+asi kepada !enulis.. Seluruh Dsen -urusan Manajemen *nfrmatika yang telah banyak
memberikan ilmunya kepada penulis.
. Teman % teman di Manajemen *nfrmatika '/$, serta seluruh teman 0 temansemua di Manajemen *nfrmatika pada umumnya yang tidak dapat penulis
sebutkan satu per satu.1. Semua pihak yang telah membantu, yang tidak dapat penulis sebutkan satu
per satu.
!enulis menyadari sepenuhnya dalam penulisan Makalah Tugas UAS ini
tidak lepas dari kekurangan%kekurangan, baik dalam penuangan daya pikir, kata%kata,
ataupun yang lainnya.
Akhir kata, dengan segala harapan dan kerendahan hati penulis berharap
Makalah Tugas UAS ini dapat bermanfaat bagi semua pihak yang memerlukan dan
mendapat menambah pengetahuan penulis dan pembaca.
2
-
8/18/2019 Revisi Wep ghjPro
3/42
-akarta, &+ember '/$1
Penulis
3
-
8/18/2019 Revisi Wep ghjPro
4/42
DAFTAR ISI
(ata !engantar ........................................................................................................ *
Daftar *si ................................................................................................................. ***
BAB I PENDAHULLUAN
$.$...........................................................................................................................2ata
r )elakang ........................................................................................................ $$.'...........................................................................................................................Mak
sud dan Tujuan ................................................................................................. '$............................................................................................................................3ua
ng 2ingkup ....................................................................................................... '
BAB II LANDASAN TEORI
'.$...........................................................................................................................Ter
i%Teri Tentang 4eb ......................................................................................... '.'...........................................................................................................................Ter
i E3D dan 23S ................................................................................................ 1
'.'.$ Teri Struktur &a+igasi .................................................................................. 5
'............................................................................................................................3an
cangan 4eb ...................................................................................................... 6
BAB III PEMBAHASAN
.$...........................................................................................................................Spes
ifikasi 7ile ........................................................................................................ $$.'...........................................................................................................................E3
D ...................................................................................................................... $8............................................................................................................................23S
.......................................................................................................................... $8............................................................................................................................Stru
ktur &a+igasi .................................................................................................... $8.1...........................................................................................................................Tam
pilan 4eb ......................................................................................................... $9
4
-
8/18/2019 Revisi Wep ghjPro
5/42
BAB I; PENUTUP
.$...........................................................................................................................(esi
mpulan ............................................................................................................. ''
.'...........................................................................................................................Saran ....................................................................................................................... ''
DAFTAR PUSTAKA ............................................................................................ '
LAMPIRAN .......................................................................................................... '
5
-
8/18/2019 Revisi Wep ghjPro
6/42
BAB I
PENDAHULUAN
*7*7Lata" Beakan$
Dengan meluasnya perdagangan glbal dan kemajuan teknlgi, membuat
banyak knsumen meminta fasilitas yang baru yang bisa mempermudah mereka
dalam hal pemenuhan kebutuhan pkknya sehari%hari. Dengan jumlah knsumen
yang semakin banyak akan menggeser minat mereka untuk melakukan teransaksi
pembelian melalui internet.
Untuk meningkatkan jangkauan knsumen yang tinggi maka setiap penjual
harus melakukan hal%hal yang in+atif dalam memasarkan prduk yang akan di jual,
baik dalam melakukan berbagai prmsi dan penjualan. &amun mbilitas masyarakat
yang tinggi merupakan salah satu kendala dalam prses prmsi dan penjualan
barang maupun jasa leh penjual kepada knsumen, jika perses prmsi dan
penjualan yang dilakukan leh sebuah penjual ternyata sukses maka penjual tersebut
telah memilih kepercayaan knsumen yang baik namun jika buruk maka tingkat
kepercayaan knsumen terhadap penjual tersebut buruk pula, hal ini dapat
mempengaruhi prduktifitas dan keuntungan yang diperleh penjual tersebut akan
mengalami penurunan.
Saat ini perkembangan teknlgi kmputer dan kmunikasi sudah mencapai
perkembangan yang sangat pesat. Dalam melakukan penjualan penjual memiliki
banyak alternati+e, diantaranya melalui media elektrnik dan media masa. -ika dilihat
efektifitasnya media elektrnika memiliki efektifitas yang lebih tinggi dalam perses
penjualan prduk daripada media masal namun hal tersebut memerlukan biaya yang
tinggi. )erbagai media elektrnik yang dapat digunakan dalam penjualan prduk
diantaranya handphne.
1
-
8/18/2019 Revisi Wep ghjPro
7/42
(ehadiran electrnic cmmerce :e%cmmerce; sebagai sebuah sistem yang
merupakan gabungan antara marketing, cmputer, cmmunicatin dan cntent dapat
membukakan jalan baru bagi U(M untuk berinteraksi dengan pelanggan, pemask
dan mitra usahanya dengan membentuk ulang pandangan tradisinal tentang pasar
dan lingkungan bisnis perusahaan. E%
-
8/18/2019 Revisi Wep ghjPro
8/42
*7+7 Mak%u' 'an Tujuan
Maksud dari penulisan Makalah ini adalah untuk membangun "ebsite
-
8/18/2019 Revisi Wep ghjPro
9/42
BAB II
LANDASAN TEORI
+7*7 Te#"i
-
8/18/2019 Revisi Wep ghjPro
10/42
+7 We!%ite
Adalah suatu halaman "eb yang saling berhubungan yang umumnya berada
pada peladen yang sama berisikan kumpulan infrmasi yang disediakan secara
perrangan, kelmpk, atau rganisasi. Sebuah situs "eb biasanya ditempatkansetidaknya pada sebuah ser+er "eb yang dapat diakses melalui jaringan seperti
*nternet, ataupun jaringan "ilayah lkal :2A&; melalui alamat *nternet yang dikenali
sebagai U32. >abungan atas semua situs yang dapat diakses publik di *nternet
disebut pula sebagai 4rld 4ide 4eb atau lebih dikenal dengan singkatan 444.
Meskipun setidaknya halaman beranda situs *nternet umumnya dapat diakses publik
secara bebas, pada prakteknya tidak semua situs memberikan kebebasan bagi publik
untuk mengaksesnya, beberapa situs "eb me"ajibkan pengunjung untuk melakukan
pendaftaran sebagai anggta, atau bahkan meminta pembayaran untuk dapat menjadi
aggta untuk dapat mengakses isi yang terdapat dalam situs "eb tersebut, misalnya
situs%situs yang menampilkan prngrafi, situs%situs berita, layanan surel :e%mail;,
dan lain%lain. !embatasan%pembatasan ini umumnya dilakukan karena alasan
keamanan, menghrmati pri+asi, atau karena tujuan kmersil tertentu.
+7+7 Te#"i ERD 'an LRS*7 ERD ) Entit1 Reati#n%hi2 Dia$"am 0
E3D merupakan suatu mdel untuk menjelaskan hubungan antar data dalam
basis data berdasarkan bjek%bjek dasar data yang mempunyai hubungan antar
relasi. E3D untuk memdelkan struktur data dan hubungan antar data, untuk
menggambarkannya digunakan beberapa ntasi dan simbl.
Menurut salah satu para ahli, )rady dan 2nam :'/$/;, Entity 3elatinship
diagram :E3D; merupakan teknik yang digunakan untuk memdelkan kebutuhan
data dari suatu rganisasi, biasanya leh System Analys dalam tahap analisis
persyaratan pryek pengembangan system. Sementara selah%lah teknik diagram
atau alat peraga memberikan dasar untuk desain database relasinal yang mendasari
sistem infrmasi yang dikembangkan. E3D bersama%sama dengan detail pendukung
5
-
8/18/2019 Revisi Wep ghjPro
11/42
merupakan mdel data yang pada gilirannya digunakan sebagai spesifikasi untuk
database.
+7 LRS ) L#$i(a Re(#"' St"u(tu"e 0
23S Adalah representasi dari struktur recrd%recrd pada tebel%tabel yang
terbentuk dari hasil antar himpunan entitas. Menentukan kardinalitas, jumlah table
dan 7reign (ey :7(; :(usrini, '//8;. )erikut cnth serta cara kerja dari 23S
berdasarkan kardinalitas antar tabel #
a; ?ne%T%?ne :$ 0 $;Mempunyai pengertian =Setiap baris data pada tabel pertama dihubungkan
hanya ke satu baris data pada tabel ke dua. b; ?ne%T%Many :$ 0 ;Mempunyai pengertian =Setiap baris data dari tabel pertama dapat
dihubungkan ke satu baris atau lebih data pada tabel ke dua =.c; Many%T%Many : 0 ;
Mempunyai pengertian =Satu baris atau lebih data pada tabel pertama bisa
dihubungkan ke satu atau lebih baris data pada tabel ke dua =.
Mdel 3elasinal atau !hysical Data Mdel :!DM; # mdel yang
menggunakan sejumlah tabel untuk menggambarkan data serta hubungan antara data%
data tersebut. Setiap tabel mempunyai sejumlah klm di mana setiap klm
memiliki nama yang unik. 3elasinalMenggunakan mdel berupa tabel berdimensi
dua :yang disebut relasi atau tabel;,Memakai kunci tamu :freign key; sebagai
penghubung dengan tabel lain.
+7+7*7 Ran(an$an Te#"i St"uktu" Na=i$a%i
4ebsite digunakan untuk menggambarkan secara garis besar isi dari seluruh
situs "eb dan menggambarkan bagaimana hubungan antara isi%isi tersebut. Teri
Struktur &a+igasi pada "ebsite infrmasi Tk (ue ini adalah Struktur campuran.
6
-
8/18/2019 Revisi Wep ghjPro
12/42
Toko Kue
Home
Tentang
Kami Gallery
Menu
Kue Outlet
Hubungi
Kami
Melalui Teri Struktur &a+igasi "ebsite ini, terlihat bagaimana isi dan susunan dari
sebuah "ebsite secara menyeluruh.
!embuatan Teri Struktur &a+igasi "ebsite ini akan sangat membantu
nantinya ketika akan membuat rancangan seluruh halaman "eb. Teri Struktur
&a+igasi "ebsite yang baik adalah yang mampu memberitahukan kepada pengunjung
tentang lkasi mereka sekarang, lkasi%lkasi yang bisa dikunjungi dari lkasi
sekarang.
*7 Ran(an$an Tam2ian We!%ite
a. 3ancangan Calaman !omeCalaman !ome merupakan sebuah halaman a"al yang akan kita temui
se"aktu pertama kali membuka situs ini. b. 3ancangan Calaman Tentang (ami
)erisi deskripsi singkat tentang +isi 0 misi dan tujuan pembuatan "ebsite ini,
dapat diakses leh semua pengunjung.c. Menu (ue
)erisi tentang catalg 0 catalg kue yang ada di tk kami.d. ?utlet
)erisi tentang inf lkasi tk kue kami.e. >allery
)erisi tentang ft 0 ft di tk kue kami.
7
-
8/18/2019 Revisi Wep ghjPro
13/42
f. (ntak (ami)erisi tentang inf alamat tempat tk kami dan nmer telepn.
+7,7 Ran(an$an We!
a; 3ancangan Tampilan Cme
b; 3ancangan Tampilan Tentang (ami
c; 3ancangan Tampilan Menu (ue
8
-
8/18/2019 Revisi Wep ghjPro
14/42
d; 3ancangan Tampilan >allery
-
8/18/2019 Revisi Wep ghjPro
15/42
e; 3ancangan Tampilan ?utlet
f; 3ancangan Tampilan Cubungi (ami
1!
-
8/18/2019 Revisi Wep ghjPro
16/42
BAB III
PEMBAHASAN
,7*7 S2e%i4ika%i Fie
Menjelaskan tentang file atau tabel yang terbentuk dari transfrmasi E3D
:dan atau file%file penunjang untuk "eb;. 7ile%file ini tersimpan pada database
tkkue dengan parameter%parameter sbb #
*7 S2e%i4ika%i Ta!e Tentan$ Kami
&ama 7ile # tentang kami
Akrnim # abutus.myd
7ungsi # Tempat penyimpanan isi data tentang kami
Tipe 7ile # 7ile Master
!anjang recrd # Maksimal $/// karakter
Akses 7ile # andom
?rganisasi 7ile # Inde$ Se%&ential
7ield (unci # id
Sft"are # MyS2
11
-
8/18/2019 Revisi Wep ghjPro
17/42
S2e%i4ika%i ta!e tentan$ kami
Eemen Data Nama Fie' Ti2e Si>e Kete"an$an
*d Tentang kami *d Int . A&to'increment
-udul tentang kami -udul arc!ar ,-
*si Tentang (ami *si Te$t %
>ambar tentang kami >ambar Te$t %
+7 S2e%i4ika%i Ta!e Kue
&ama 7ile # (ue
Akrnim # kue.myd
7ungsi # Tempat penyimpanan data kue
Tipe 7ile # 7ile Master
!anjang recrd # Maksimal // karakter
Akses 7ile # andom
?rganisasi 7ile # Inde$ Se%&ential
7ield (unci # idkue
Sft"are # MyS2
12
-
8/18/2019 Revisi Wep ghjPro
18/42
S2e%i4ika%i Ta!e Kue
Eemen Data Nama Fie' Ti2e Si>e Kete"an$an
*d kue id Int . A&to'increment
&ama kue &amakue arc!ar ,-
-enis kue -eniskue arc!ar ,-
ambarkue arc!ar *--
,7 S2e%i4ika%i Ta!e Gae"1
&ama 7ile # >allery
Akrnim # gallery.myd
7ungsi # Tempat penyimpanan data gallery
Tipe 7ile # 7ile Master
!anjang recrd # Maksimal $8 karakter
Akses 7ile # andom
?rganisasi 7ile # Inde$ Se%&ential
7ield (unci # idft
Sft"are # MyS2
13
-
8/18/2019 Revisi Wep ghjPro
19/42
S2e%i4ika%i Ta!e Gae"1
Eemen Data Nama Fie' Ti2e Si>e Kete"an$an
*d ft *d Int . A&to'increment
7t gambar arc!ar .-
-
8/18/2019 Revisi Wep ghjPro
20/42
S2e%i4ika%i Ta!e Outet
Eemen Data Nama Fie' Ti2e Si>e Kete"an$an
*d utlet *d Int . A&to'increment
-
8/18/2019 Revisi Wep ghjPro
21/42
S2e%i4ika%i Ta!e Outet
Eemen Data Nama Fie' Ti2e Si>e Kete"an$an
*d *d arc!ar ,
&ama &ama arc!ar +-
Email Email arc!ar .-
!esan !esan Te$t <
Analisis kebutuhan :re%&irement anal#sis; mencakup pekerjaan%pekerjaan penentuan atau kndisi yang harus dipenuhi dalam suatu prduk baru atau perubahan
prduk, yang mempertimbangkan berbagai kebutuhan yang bersinggungan antar
berbagai pemangku kepentingan. (ebutuhan dari hasil analisis ini harus dapat
dilaksanakan, diukur, diuji, terkait dengan kebutuhan bisnis yang teridentifikasi, serta
didefinisikan sampai tingkat detail yang memadai untuk desain sistem.
16
https://id.wikipedia.org/wiki/Pemangku_kepentinganhttps://id.wikipedia.org/wiki/Pemangku_kepentinganhttps://id.wikipedia.org/wiki/Pemangku_kepentingan
-
8/18/2019 Revisi Wep ghjPro
22/42
,7+7 ERD
,7,7 LRS
,7/7 St"uktu" Na=i$a%i
17
-
8/18/2019 Revisi Wep ghjPro
23/42
Toko Kue
HomeTentang
KamiGallery
MenuKue
OutletHubungi
Kami
4ebsite digunakan untuk menggambarkan secara garis besar isi dari seluruh
situs "eb dan menggambarkan bagaimana hubungan antara isi%isi tersebut. Teri
Struktur &a+igasi pada "ebsite infrmasi Tk (ue ini adalah Struktur campuran.
Melalui Teri Struktur &a+igasi "ebsite ini, terlihat bagaimana isi dan susunan dari
sebuah "ebsite secara menyeluruh.
!embuatan Teri Struktur &a+igasi "ebsite ini akan sangat membantu
nantinya ketika akan membuat rancangan seluruh halaman "eb. Teri Struktur
&a+igasi "ebsite yang baik adalah yang mampu memberitahukan kepada pengunjung
tentang lkasi mereka sekarang, lkasi%lkasi yang bisa dikunjungi dari lkasi
sekarang.
18
-
8/18/2019 Revisi Wep ghjPro
24/42
,7.7Tam2ian We!
a7 Tentang (ami
!7 >allery
1
-
8/18/2019 Revisi Wep ghjPro
25/42
(7 Menu (ue
d. ?utlet
2!
-
8/18/2019 Revisi Wep ghjPro
26/42
e. Cubungi
21
-
8/18/2019 Revisi Wep ghjPro
27/42
BAB I;
PENUTUP
/7*7 Ke%im2uan
Dengan adanya suatu sistem "eb untuk memasarkan suatu prduk yanga akan
di jual, akan dapat lebih baik dan efesien baik bagi knsumen maupun prdudesen
dagang, sehingga akan lebih menguntungkan bagi baik dalam segi pemasaran
maupun penjualannya.
/7+7 Sa"an
• 2ebih meningkatkan kualitas "eb baik dari segi tampilan dan sistem.
• Dari segi kualitas prduk juga perlu disempurnakan.
22
-
8/18/2019 Revisi Wep ghjPro
28/42
DAFTAR PUSTAKA
-giant. '//1. Analisa dan Disain Sistem *nfrmasi Tersruktur.Ygyakarta#
!enerbit Andi
3mlay, Marshall ). '//5. Sistem *nfrmasi Managemant. Edisi ke%9. )uku $.
-akarta # Salemba Empat
4inarn, 4ahyu 4ing. '//5. Sistem *nfrmasi Manajemen. Edisi ke%5.
Ygyakarta # U!! ST*M Y(!&
23
-
8/18/2019 Revisi Wep ghjPro
29/42
LAMPIRAN
• Script 4eb Tk (ue
a. Abut Us
• *+D,CT-P. !tml
• *!tml
• *!ead
• *titleToko 0&e1k&ean*/title
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23w45css3
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23css/font1awesome5min5css3
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23t!eme1red5css3
• *meta name23viewport3 content23widt!2device1widt! initial1scale263
• */!ead
• *7od# st#le23margin1rig!t869:;margin1left869:;3 class23w41card1koneksi5p!p>;
• [email protected] B, a7o&t&s3;
• ?res<2m#s%l'%&er#(?perinta!?koneksi);
• ?data2m#s%l'fetc!'arra#(?res<);
•
• =•
• *div class23w41image3
• *img src23asset/img/!eader5"pg3 alt23cake3
st#le23widt!86EE:;min1!eig!t8a&to;ma$1!eig!t8a&to;3
• *div class23w41title3
• *!6 class23w41"&m7o w41te$t1s!adow3Toko
0&e10&e1An*/!6
• *p class23w41$large w41te$t1s!adow3Disini 7er7agai
macam k&e di "&al*/p
• */div
• */div
• *div class23w41topnav w41large w417l&e3
• *a !ref23inde$5p!p3*i class23fa fa1!ome w41
large3*/i*/a
• *a !ref23a7o&t1&s5p!p3Tentang 0ami*/a
24
-
8/18/2019 Revisi Wep ghjPro
30/42
• *a !ref23galler#5p!p3Faller#*/a
• *a !ref23men&1k&e5p!p3en& 0&e*/a
• *a !ref23o&tlet5p!p3,&tlet*/a
• *a !ref23contact1&s5p!p3G&7&ngi 0ami*/a
• */div
• *div class23w41padding1$large3
• *!*=p!p ec!o ?dataH>"&d&l>;=*/!
• *div class23w41card1gam7ar>;=3 alt23k&e3 st#le23widt!86EE:3 align23center3
• */div
• *=p!p ec!o ?dataH>isi>;=
• */div
•
• *footer class23w41container w417l&e3
• *pJcop#; E69 Toko 0&e10&e1An*/p
• */footer
• */7od#
• FBhtmlG
b.
-
8/18/2019 Revisi Wep ghjPro
31/42
• */div
• *div class23w41topnav w41large w417l&e3
• *a !ref23inde$5p!p3*i class23fa fa1!ome w41
large3*/i*/a
• *a !ref23a7o&t1&s5p!p3Tentang 0ami*/a• *a !ref23galler#5p!p3Faller#*/a
• *a !ref23men&1k&e5p!p3en& 0&e*/a
• *a !ref23o&tlet5p!p3,&tlet*/a
• *a !ref23contact1&s5p!p3G&7&ngi 0ami*/a
• */div
• *div class23w41container3
• *div class23w41t!ird3
• *form class23w41form3
• *! class23w41te$t17l&e3G&7&ngi Toko 0&e*/!
•
• *div class23w41gro&p3
• *la7el class23w41la7el w41te$t1
7l&e3*7Nama*/7*/la7el
• *inp&t class23w41inp&t w417order3 t#pe23te$t3
• */div
• *div class23w41gro&p3
• *la7el class23w41la7el w41te$t1
7l&e3*7.mail*/7*/la7el
• *inp&t class23w41inp&t w417order3 t#pe23te$t3
• */div
•
• *div class23w41gro&p3
• *la7el class23w41la7el w41te$t1
7l&e3*7Pesan*/7*/la7el
• *+11 *inp&t class23w41inp&t w417order3 t#pe23te$t3
11
• *te$tarea class23w41inp&t w417order3
cols236E3*/te$tarea
• */div
•
• *7&tton class23w417tn w417l&e3S&7mit*/7&tton
•
• *pTelepon 8 E61KLLEM444*/p
• *pBace7ook 8 Toko 0&e10&e1An*/p
• *pTwitter 8 tokok&eid*/p
• *pInstagram 8 tokok&eid*/p
26
-
8/18/2019 Revisi Wep ghjPro
32/42
• */form
•
• */div
• */div
•
• *footer class23w41container w417l&e3
• *pJcop#; E69 Toko 0&e10&e1An*/p
• */footer
• */7od#
•*/!tml
•
•
27
-
8/18/2019 Revisi Wep ghjPro
33/42
c. >allery
• *+D,CT-P. !tml
• *!tml
• *!ead• *titleToko 0&e1k&ean*/title
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23w45css3
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23css/font1awesome5min5css3
• *link rel23st#les!eet3 t#pe23te$t/css3 !ref23t!eme1red5css3
• *meta name23viewport3 content23widt!2device1widt! initial1scale263
• */!ead
• *7od# st#le23margin1rig!t869:;margin1left869:;3 class23w41card1
-
8/18/2019 Revisi Wep ghjPro
34/42
• *img src23asset/img/galler#/65"pg3
st#le23widt!86EE:3
• */div
• */div
•
• *div class23w41%&arter3
• *div class23w41card1
-
8/18/2019 Revisi Wep ghjPro
35/42
• *img src23asset/img/galler#/M5"pg3
st#le23widt!86EE:3
• */div
• */div
•
• *div class23w41%&arter3
• *div class23w41card1
-
8/18/2019 Revisi Wep ghjPro
36/42
• Fbdy styleI@margin%right#$1KLmargin%left#$1KL@ classI@"%card%@G
•
• Fphp
• include Nkneksi.phpNL
•
• OperintahI@SE2EalleryFBaG
• Fa hrefI@menu%kue.php@GMenu (ueFBaG
• Fa [email protected]@G?utletFBaG
• Fa hrefI@cntact%us.php@GCubungi (amiFBaG
• FBdi+G
•
• Fdi+ classI@"%cntainer "%teJt%blue%grey@G
• Fh' classI@"%larger@ alignI@center@GMenu kue
Tk (ue%kue%AnFBh'G• FBdi+G
•
• Fdi+ classI@"%r"%padding "%margin%tp@G
•
• Fdi+ classI@"%Quarter@G
• Fdi+ classI@"%card%'@G
31
-
8/18/2019 Revisi Wep ghjPro
37/42
• Fimg
[email protected]@ styleI@"idth#$//K@G
• Fdi+ classI@"%cntainer@G
• Fh1G)lack 7restFBh1G
• FBdi+G
• FBdi+G
• FBdi+G
•
• Fdi+ classI@"%Quarter@G
• Fdi+ classI@"%card%'@G
• Fimg [email protected]@
styleI@"idth#$//K@G
• Fdi+ classI@"%cntainer@G
• Fh1G
-
8/18/2019 Revisi Wep ghjPro
38/42
• FBdi+G
• FBdi+G
• FBdi+G
•
• FBdi+G
•
• Fdi+ classI@"%r"%padding "%margin%tp@G
•
• Fdi+ classI@"%Quarter@G
• Fdi+ classI@"%card%'@G
• Fimg [email protected]@
styleI@"idth#$//K@G
• Fdi+ classI@"%cntainer@G
•
Fh1G2imeFBh1G• FBdi+G
• FBdi+G
• FBdi+G
•
• Fdi+ classI@"%Quarter@G
• Fdi+ classI@"%card%'@G
• Fimg
[email protected]@ styleI@"idth#$//K@G
• Fdi+ classI@"%cntainer@G
• Fh1GMilk
-
8/18/2019 Revisi Wep ghjPro
39/42
• FBdi+G
•
• Fdi+ classI@"%Quarter@G
• Fdi+ classI@"%card%'@G
• Fimg
[email protected]@ styleI@"idth#$//K@G
• Fdi+ classI@"%cntainer@G
• Fh1G?re
-
8/18/2019 Revisi Wep ghjPro
40/42
• Ffter classI@"%cntainer "%blue@G
• FpGcpyL '/$1 Tk (ue%(ue%AnFBpG
• FBfterG
• FBbdyG
• FBhtmlG
•
e. ?utlet
• FHD?
-
8/18/2019 Revisi Wep ghjPro
41/42
• FBdi+G
• FBdi+G
• Fdi+ classI@"%tpna+ "%large "%blue@G
• Fa [email protected]@GFi classI@fa fa%hme "%
large@GFBiGFBaG
• Fa hrefI@abut%us.php@GTentang (amiFBaG
• Fa [email protected]@G>alleryFBaG
• Fa hrefI@menu%kue.php@GMenu (ueFBaG
• Fa [email protected]@G?utletFBaG
• Fa hrefI@cntact%us.php@GCubungi (amiFBaG
• FBdi+G
• Fdi+ classI@"%cntainer@G
• Fh' classI@"%center@G?utlet Tk (ue%(ue%
AnFBh'G•
• Fphp
•
• if :mysQlnumr"s:Oresult;F$;
• ech @Data )elum ada@L
•
•
• else
•
• "hile :OdataImysQlfetcharray:Oresult;;
•
• G
• Fh classI@"%large@ styleI@fnt%"eight#1//@GF
php ech OdataVNcabangNWLGFBhG
• FpGFphp ech OdataVNalamatNWLGFBpG
• FpGFphp ech OdataVNntelepnNWLGFBpG
• Fphp
•
• •
• G
• FBdi+G
•
• Ffter classI@"%cntainer "%blue@G
36
-
8/18/2019 Revisi Wep ghjPro
42/42
• FpGcpyL '/$1 Tk (ue%(ue%AnFBpG
• FBfterG
• FBbdyG
• FBhtmlG
•