Revisi Wep ghjPro

download Revisi Wep ghjPro

of 42

Transcript of Revisi Wep ghjPro

  • 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&lt2m#s%l'%&er#(?perinta!?koneksi);

    •    ?data2m#s%l'fetc!'arra#(?res&lt);

    •    =•

    •    *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