LAPORAN KULIAH KERJA LAPANGAN

WEB PROFIL ISTANA TOPI MENGGUNAKAN CODEIGNITER

Disusun Oleh

Nama : Wawan Chahyo Nugroho

Nomor Mahasiswa : 12131294

Program Studi : Teknik Informatika

Jenjang : Strata 1 (S1)

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

EL RAHMA

YOGYAKARTA

2018

i

LAPORAN KULIAH KERJA LAPANGAN

WEB PROFIL ISTANA TOPI MENGGUNAKAN CODEIGNITER

Diajukan untuk memenuhi syarat menempuh Kerja Praktek pada Program Studi

Teknik Informatika

Disusun Oleh

Nama : Wawan Chahyo Nugroho

Nomor Mahasiswa : 12131294

Program Studi : Teknik Informatika

Jenjang : Strata 1 (S1)

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN ILMU KOMPUTER

EL RAHMA

YOGYAKARTA

2018

ii

HALAMAN PENGESAHAN

LAPORAN KULIAH KERJA LAPANGAN

WEB PROFIL ISTANA TOPI MENGGUNAKAN CODEIGNITER

Disusun Oleh

Nama : Wawan Chahyo Nugroho

Nomor Mahasiswa : 12131294

Program Studi : Teknik Informatika

Jenjang : Strata 1 (S1)

Yogyakarta, ……………. 2018

Menyetujui,

Pembimbing Lapangan

Dosen Pembimbing Lapangan

Fredi Muhammad Pribadi

Suparyanto, ST., M.Eng.

NIP. 197005042005011001

Mengetahui,

Pemilik Toko Andi Topi

Ketua LP2M

Andi

Suparyanto, ST., M.Eng.

NIP. 197005042005011001

iii

KATA PENGANTAR

Segala puji bagi Allah Yang Maha Pengasih lagi Maha Penyayang, atas Izin

dan Kekuatan-Nya, sehingga penulis mampu menyelesaikan Laporan Kuliah Kerja

Lapangan yang berjudul “Web Profil Istana Topi Menggunakan Codeigniter” yang

merupakan salah satu mata kuliah yang harus diambil pada Program Studi Teknik

Informatika STMIK EL RAHMA Yogyakarta.

Pada kesempatan ini, penulis ingin mengucapkan terima kasih kepada yang

terhormat Bapak Suparyanto, ST., M.Eng selaku dosen pembimbing Kuliah Kerja

Lapangan yang telah meluangkan waktu, tenaga, dan pemikirannya dengan penuh

ketulusan, kesabaran, perhatian, dan ketelitian dalam memberikan pengarahan kepada

penulis selama menyusun Laporan Kuliah Kerja Lapangan.

Akhir kata, semoga karya tulis ini bisa memberikan manfaat khususnya bagi

penulis, dan umumnya bagi para pembaca.

Yogyakarta, 1 Mei 2018

Penulis

Wawan Chahyo Nugroho

NIM. 12131294

iv

DAFTAR ISI

Halaman

HALAMAN PENGESAHAN ....................................................................................... ii

KATA PENGANTAR .................................................................................................iii

DAFTAR ISI ................................................................................................................ iv

DAFTAR TABEL ........................................................................................................ vi

DAFTAR GAMBAR .................................................................................................. vii

ABSTRAK ................................................................................................................... ix

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

A. Analisa Situasi ..................................................................................................... 1

B. Perumusan Program ............................................................................................. 2

BAB II PEMBAHASAN .............................................................................................. 3

A. Persiapan .............................................................................................................. 3

B. Pelaksanaan.......................................................................................................... 3

1. RANCANGAN ............................................................................................................................ 4

1.1 Rancangan Halaman Menu Utama ..................................................................................... 4

1.2 Rancangan Basis Data ......................................................................................................... 5

1.2.1 Bentuk Tidak Normal ................................................................................................... 6

1.2.2 Bentuk Normal Pertama (1NF) .................................................................................... 6

1.2.3 Bentuk Normal Kedua (2NF) ....................................................................................... 7

1.2.4 Relasi Antar Tabel ....................................................................................................... 8

1.3 Diagram Alir Data (DAD) ..................................................................................................... 9

1.3.1 Diagram Konteks ......................................................................................................... 9

1.3.2 Diagram Alir Data (DAD) Level 0 ............................................................................... 10

1.3.3 Diagram Alir Data (DAD) Level 1 Proses Olah Data ................................................... 11

1.4 Kamus Data Tabel ............................................................................................................. 11

1.5 Rancangan Antar Muka (I/O) ............................................................................................ 15

1.5.1 Antar Muka Publik ..................................................................................................... 15

1.5.2 Antar Muka Admin .................................................................................................... 18

1.6 Flow Chart ......................................................................................................................... 21

1.6.1 Flow Chart Program .................................................................................................. 21

1.6.1 Flow Chart Sistem ..................................................................................................... 23

2. IMPLEMENTASI ...................................................................................................................... 23

1.1 Implementasi Panel Publik ................................................................................................ 23

1.1.1 Home ......................................................................................................................... 24

1.1.2 About ......................................................................................................................... 24

1.1.3 Produk ....................................................................................................................... 25

1.1.4 Order ......................................................................................................................... 25

1.1.5 Agenda ...................................................................................................................... 26

1.1.6 Galeri ......................................................................................................................... 26

1.1.7 Blog ........................................................................................................................... 27

1.1.8 Contact ...................................................................................................................... 27

1.2 Implementasi Panel Admin ............................................................................................... 28

1.2.1 Dashboard ................................................................................................................. 28

1.2.2 Member .................................................................................................................... 29

v

1.2.3 Slider ......................................................................................................................... 30

1.2.4 Artikel ........................................................................................................................ 31

1.2.5 Harga Produk............................................................................................................. 32

1.2.6 Moderasi ................................................................................................................... 33

1.2.7 Inbox ......................................................................................................................... 34

1.2.8 Login .......................................................................................................................... 35

1.2.8 Logout ....................................................................................................................... 35

C. Analisis Hasil Pelaksanaan ................................................................................ 36

1 Kelebihan ................................................................................................................................ 36

2 Kekurangan ............................................................................................................................. 36

BAB III PENUTUP .................................................................................................... 37

3.1 Kesimpulan ........................................................................................................ 37

3.2 Saran .................................................................................................................. 37

LAMPIRAN ................................................................................................................ 38

1 Dokumentasi Outlet Istana Topi ........................................................................ 37

2 Kode Program .................................................................................................... 40

vi

DAFTAR TABEL

Halaman

Tabel 2.1 Hubungan external entities dengan I/O ......................................................... 9

Tabel 2.2 Kamus data tabel artikel .............................................................................. 12

Tabel 2.3 Kamus data tabel produk ............................................................................ 12

Tabel 2.4 Kamus data tabel booking ........................................................................... 12

Tabel 2.5 Kamus data tabel slider ............................................................................... 13

Tabel 2.6 Kamus data tabel inbox ............................................................................... 13

Tabel 2.7 Kamus data tabel login ................................................................................ 13

Tabel 2.8 Kamus data tabel groups ............................................................................. 14

Tabel 2.9 Kamus data tabel groups ............................................................................. 14

Tabel 2.10 Kamus data tabel users .............................................................................. 14

Tabel 2.11 Lanjutan .................................................................................................... 15

vii

DAFTAR GAMBAR

Halaman

Gambar 2.1 Menu utama panel publik .......................................................................... 4

Gambar 2.2 Menu utama panel admin .......................................................................... 5

Gambar 2.3 Bentuk tidak normal .................................................................................. 6

Gambar 2.4 Bentuk normal pertama ............................................................................. 7

Gambar 2.5 Bentuk normal kedua ................................................................................ 8

Gambar 2.6 Bentuk relasi antar tabel ............................................................................ 9

Gambar 2.7 Diagram konteks ..................................................................................... 10

Gambar 2.8 DAD level 0 ............................................................................................ 10

Gambar 2.9 DAD level 1 proses olah data .................................................................. 11

Gambar 2.10 Desain antarmuka home ........................................................................ 15

Gambar 2.11 Desain antarmuka about ........................................................................ 16

Gambar 2.12 Desain antarmuka produk...................................................................... 16

Gambar 2.13 Desain antarmuka order ........................................................................ 16

Gambar 2.14 Desain antarmuka agenda...................................................................... 17

Gambar 2.15 Desain antarmuka galeri ........................................................................ 17

Gambar 2.16 Desain antarmuka contact ..................................................................... 17

Gambar 2.17 Desain antarmuka login ......................................................................... 18

Gambar 2.18 Desain antarmuka dokumentasi ............................................................ 18

Gambar 2.19 Desain antarmuka member .................................................................... 19

Gambar 2.20 Desain antarmuka slider ........................................................................ 19

Gambar 2.21 Desain antarmuka artikel ....................................................................... 19

Gambar 2.22 Desain antarmuka harga produk ............................................................ 20

Gambar 2.23 Desain antarmuka moderasi .................................................................. 20

Gambar 2.24 Desain antarmuka inbox ........................................................................ 20

Gambar 2.25 Flow chart program publik .................................................................... 21

Gambar 2.26 Flow chart program admin .................................................................... 22

Gambar 2.27 Flow chart sistem .................................................................................. 23

Gambar 2.28 Antarmuka publik home ........................................................................ 24

Gambar 2.29 Antarmuka publik about ........................................................................ 24

Gambar 2.30 Antarmuka publik produk ..................................................................... 25

Gambar 2.31 Antarmuka publik order ........................................................................ 25

Gambar 2.32 Antarmuka publik agenda ..................................................................... 26

Gambar 2.33 Antarmuka publik galeri........................................................................ 26

Gambar 2.34 Antarmuka publik blog.......................................................................... 27

Gambar 2.35 Antarmuka publik contact ..................................................................... 28

Gambar 2.36 Antarmuka admin dashboard ................................................................ 29

Gambar 2.37 Hak akses selain level admin ................................................................ 29

viii

Gambar 2.38 Antarmuka admin member .................................................................... 30

Gambar 2.39 Antarmuka admin slider ........................................................................ 30

Gambar 2.40 Antarmuka admin artikel ....................................................................... 32

Gambar 2.41 Antarmuka admin harga paket produk .................................................. 33

Gambar 2.42 Antarmuka admin moderasi .................................................................. 34

Gambar 2.43 Antarmuka admin inbox ........................................................................ 34

Gambar 2.44 Antarmuka admin login ......................................................................... 35

ix

ABSTRAK

WEB PROFIL ISTANA TOPI MENGGUNAKAN CODEIGNITER

Oleh

WAWAN CHAHYO NUGROHO

12131294

Toko Istana Topi yang berlokasi di Jl. Perumnas No.103, Condongcatur, Kec.

Depok, Kabupaten Sleman, Daerah Istimewa Yogyakarta 55283 adalah salah satu

penyedia topi dengan berbagi merk, label dan desain, disamping itu toko ini juga

melayani pesanan dengan desain sendiri dari pelanggan mereka, baik partai besar

maupun kecil. Namun sangat disayangkan karena metode promosi yang digunakan

masih sebatas Instagram, sehingga jangkauannya masih kecil, hanya sebatas

pengguna Instagram.

Penelitian pembuatan web profil ini dimulai dengan pengambilan data-data di

lapangan dengan metode observasi, kemudian membuat data alir diagram (DAD) dan

desain antarmuka. Setelah itu menentukan kebutuhan software dan hardware,

kemudian membuat prototipe web profil sesuai dengan desain interface

menggunakan CodeIgniter dan Bootstrap. Prototipe aplikasi web profil masih

menggunakan konten dummy guna presentasi kepada pihak pengelola Toko Istana

Topi. Setelah pihak pengelola menyetujui dengan desain yang direpresentasikan

berupa prototipe, maka tahap berikutnya adalah mengganti konten dummy prototipe

menjadi konten produksi sebagaimana data hasil observasi dan wawancara. Uji coba

aplikasi dilakukan pada pengelola Toko Istana Topi yang telah ditunjuk sebagai

administrator.

Penelitian ini menghasilkan sebuah aplikasi company profile berbasis web

yang terdiri dari halaman admin berisi halaman autentikasi, panel slider, panel artikel,

panel booking, panel inbox, panel moderasi, panel produk dan halaman publik yang

berisi halaman slider, halaman about, halaman produk, halaman pemesanan atau

booking, halaman agenda, halaman contact, dan halaman blog. Web profil ini

memungkinkan Toko Istana Topi dikenal di internet dan tidak hanya sebatas

instagram.

Kata Kunci: company profile, web, codeigniter, bootstrap, internet marketing,

fashion

1

BAB I

PENDAHULUAN

A. Analisa Situasi

Kegiatan KKL dilaksanakan mulai dari tanggal 2 April 2018 di Toko Istana

Topi yang berlokasi di Jl. Perumnas No.103, Condong Catur, Depok, Sleman,

Yogyakarta, yaitu salah satu penyedia topi dengan berbagi merk, label dan desain.

Disamping itu toko ini juga melayani pesanan dengan desain sendiri dari

pelanggan mereka, baik partai besar maupun kecil.

Tahap pertama yang dilakukan dalam kegiatan ini adalah pengumpulan data

menggunakan metode.

1. Observasi, yaitu data dikumpulkan dengan cara mengamati secara langsung

obyek penelitian di lapangan, terutama bagian pemasaran.

2. Wawancara, yaitu mengadakan tanya jawab kepada petugas atau karyawan

Toko Istana Topi, dalam hal ini kepada Bp. Fredi Muhammad Pribadi

selaku kepala outlet.

Dokumentasi dilakukan secara bersamaan dengan tahap pengumpulan data

sehigga diperoleh hasil sebagai berikut.

1. Pendataan dan pencaraian stock barang masih dilakukan secara manual

menggunakan buku tulis biasa.

2. Catatan transaksi menggunakan nota biasa.

3. Promosi yang dilakukan selama ini hanya menggunakan sosial media seperti

facebook dan instagram.

4. Pelaporan harian jumlah stock barang dan transaksi kepada atasan dilakukan

secara manual menggunakan buku tulis biasa yang kemudian di foto dan

dikirimkan via whatsapp.

Berdasarkan permasalah di atas dapat disimpulkan bahwa Toko Istana Topi

masih jauh dari kata canggih, sehingga perlu dibuatkan sistem informasi berupa

company profile berbasis web yang dapat meningkatkan jangkauan promosi

mereka, sekaligus dapat memudahkan dalam mengelola, mengontrol, dan

melaporkan stock barang maupun transaksi.

2

Selain itu, manfaat lain dari company profile berbasis web ini juga sebagai

sarana presentasi Istana Topi, sehingga klien tidak perlu bertanya secara detail

tentang profil, visi, dan misi perusahaan secara langsung. Disamping itu juga

dapat meningkatkan profesionalitas Istana Topi, sehingga terlihat lebih menarik

dan dapat membuat klien terkesan.

B. Perumusan Program

Berdasarkan hasil analisa situasi tersebut, maka penulis selaku mahasiswa

KKL dapat mengambil tindakan upaya peningkatan sistem kerja Istana Topi yang

sebelumnya serba manual menjadi komputerisasi, dengan langkah-langkah seperti

berikut.

1. Mendefinisikan kebutuhan yang harus dipenuhi oleh program yang akan

dibangun, kemudian melaporkan kepada kepala outlet untuk diteruskan

kepada pemilik toko agar memudahkan dalam realisasi pengadaan barang.

2. Merancang sistem program menggunakan DAD dan mendesain antarmuka

program menggunakan CorelDraw untuk memudahkan saat coding ataupun

saat presentasi kepada pihak terkait.

3. Implementasi dan Pengujian Unit, yaitu desain program diterjemahkan ke

dalam kode-kode dengan menggunakan bahasa pemrograman yang sudah

ditentukan. Program yang dibangun langsung diuji secara unit, apakah

sudah bekerja dengan baik.

4. Integrasi dan Pengujian Sistem, yaitu menyatukan unit-unit program untuk

kemudian diuji secara keseluruhan.

5. Training, yaitu mengedukasi kepada pihak terkait tentang cara

mengoperasikan program yang sudah dibuat, agar fitur-fiturnya dapat

dimanfaatkan secara optimal.

6. Operasi dan Pemeliharaan, yaitu mengoperasikan program di lingkungan

kerja sebenarnya dan melakukan pemeliharaan, seperti penyesuaian atau

perubahan untuk adaptasi dengan situasi yang sebenarnya.

3

BAB II

PEMBAHASAN

A. Persiapan

Demi terlaksananya kegiatan realisasi ide dan gagasan company profile

berbasis web ini, maka perlu dipersiapkan kebutuhan software dan hardware

seperti.

1. PC atau Laptop (include windows os and office tools).

2. Smartphone.

3. Printer.

4. Browser chrome atau mozila.

5. Notepad++.

6. Wampserver.

7. CodeIgniter.

8. Bootstrap.

9. Filezilla Client (FTP).

10. Github Dekstop.

11. Dia.

12. CorelDraw.

13. Photoshop.

Selain itu juga diperlukan anggaran untuk sewa hosting dan domain pada

kelas low end selama 12 bulan, total senilai Rp. 700.000,- di hostinger.com.

B. Pelaksanaan

Pembuatan program company profile Istana Topi berbasis web, dimulai

dengan perancangan sistem secara konseptual, kemudian implementasi.

4

1. RANCANGAN

1.1 Rancangan Halaman Menu Utama

Menu panel publik dijelaskan lebih rinci pada Gambar 2.8 Menu

utama panel publik.

Gambar 2.1 Menu utama panel publik

Halaman home sebagai root atau base secara default akan

menampilkan slider. Sisi atas slider ditampilkan beberapa menu utama

seperti.

1. About, untuk menampilkan konten berkaitan dengan sejarah, visi,

misi, dan struktur organisasi pengelola obyek wisata Toko Istana

Topi.

2. Produk, untuk menampilkan konten paket wisata yang disediakan oleh

Toko Istana Topi.

3. Order, untuk menampilkan formulir pemesanan.

4. Agenda, untuk menampilkan daftar klien terverifikasi beserta jadwal

kegiatannya.

5. Galeri, untuk menampilkan playlist video youtube dan foto instagram

akun Toko Istana Topi.

6. Blog, untuk menampilkan konten atau artikel blog.

7. Contact, untuk menampilkan formulir buku tamu, contact person,

alamat dan peta Toko Istana Topi.

Menu panel admin dijelaskan lebih rinci pada Gambar 2.16 Menu

utama panel admin.

5

Gambar 2.2 Menu utama panel admin

Halaman Autentikasi sebagai portal pertama yang harus dilalui

sebelum masuk ke panel admin untuk mengakses berbagai macam menu

dan fitur yang tersedia. Pihak terkait harus memasukkan email dan password

yang sudah didaftarkan sebelumnya, jika autentikasi berhasil maka pihak

terkait secara default disuguhkan dengan halaman dokumentasi atau

petunjuk praktis penggunaan aplikasi ini. Menu utama admin yang tersedia

di sidebar diantaranya seperti.

1. Member, untuk mengelola daftar anggota pengelola website Istana

Topi.

2. Slider, untuk mengelola gambar slider yang mana ditampilkan di

halaman public.

3. Artikel, untuk mengelola artikel, baik artikel about, paket, maupun

blog.

4. Harga produk, untuk mengelola jenis dan harga produk.

5. Moderasi, untuk mengelola daftar transaksi booking.

6. Inbox, untuk mengelola pesan masuk dari tamu.

7. Logout, untuk keluar dari panel admin.

1.2 Rancangan Basis Data

Dalam perancangan basis data terdiri dari beberapa tahapan

identifikasi mulai dari bentuk tidak normal, hingga ke tahap normalisasi

data sampai didapat bentuk yang benar-benar normal dan sesuai dengan

kebutuhan pengembangan.

6

1.2.1 Bentuk Tidak Normal

Merupakan sekumpulan field yang diperoleh dari metode

pengumpulan data, tidak ada keharusan mengikuti format tertentu, bisa tidak

lengkap atau terduplikasi.

Gambar 2.3 Bentuk tidak normal

1.2.2 Bentuk Normal Pertama (1NF)

Suatu tabel dikatakan dalam bentuk normal pertama bila setiap kolom

bernilai tunggal untuk setiap baris.

artikel

id_artikel

label

judul

isi

order

id_order

nm_user

cp_user

tgl_order

email

group

id_group

name

description

inbox

id_pesan

nama

email

judul

login

produk

id_ produk

nm_produk

harga

slider

id

nm_gambar

users

7

Gambar 2.4 Bentuk normal pertama

1.2.3 Bentuk Normal Kedua (2NF)

Pada bentuk normal kedua ini terlebih dahulu harus memenuhi

normalisasi bentuk pertama dan semua atribut bukan kunci memiliki

dependensi atau ketergantungan sepenuhnya terhadap kunci primer, untuk

membentuk normal kedua harus sudah ditentukan kunci field. Kunci field

haruslah unik yang dipakai sebagai pedoman dalam pencarian data dan

dapat mewakili atribut yang menjadi anggota.

Pada normaliasi bentuk pertama dilakukan lagi pemecahan terhadap

tabel yang dirasa masih bermasalah. Pemecahan tabel tersebut bertujuan

untuk mengurangi kerangkapan data, mengoptimalkan redudansi yang tidak

bisa dihilangkan sama sekali karena berguna untuk integritas referensial

(seperangkat aturan yang mengatur hubungan antara kunci primer dengan

kunci tamu milik tabel-tabel yang berada dalam satu basis data relasional

untuk menjaga konsistensi data), mengurangi masalah anomali, dan

penentuan ukuran penyimpanan data untuk mempercepat proses permintaan

data.

8

Gambar 2.5 Bentuk normal kedua

1.2.4 Relasi Antar Tabel

Relasional merupakan bentuk hubungan antara beberapa data yang

dikelompokan dalam sebuah tabel, bentuk hubungan antara dua tabel atau

lebih, yang salah satu tabel anggotanya memiliki ketergantungan dengan

anggota tabel lain. Relasi menunjukan adanya hubungan diantara sejumlah

entitas. Dalam relasi antar tabel dimaksudkan adanya hubungan logis antara

tabel satu dengan tabel lainnya.

Keterangan simbol logis yang digunakan pada Gambar 2.7 Bentuk

relasi antar tabel.

a. * : Kunci primer

b. ** : Kunci sekunder

c. : Hubungan relasi one to many

d. : Hubungan relasi many to one

9

Gambar 2.6 Bentuk relasi antar tabel

1.3 Diagram Alir Data (DAD)

Langkah pembuatan DAD dapat dimulai dari.

a. Identifikasi semua kesatuan luar (external entities) yang terlibat dalam

sistem. Kesatuan luar yang digunakan dalam sistem ini adalah Admin

dan User.

b. Identifikasi semua input dan output yang terlibat dengan kesatuan

luar.

Tabel 2.1 Hubungan external entities dengan I/O

External entities

Input

Output

Admin

login

Input data admin

Input data slider

Input data artikel

Input data produk

Input status order

detail admin

detail slider

detail artikel

detail produk

detail order

detail kotak masuk

detail invoice

Visitor

Input kotak masuk

Input data order

daftar agenda

detail produk

detail artikel

detail invoice

1.3.1 Diagram Konteks

Dalam rangka memperlihatkan gambaran umum tentang interaksi

sistem informasi dengan lingkungan yang sudah ditetapkan.

10

Gambar 2.7 Diagram konteks

1.3.2 Diagram Alir Data (DAD) Level 0

DAD level 0 memberikan pandangan secara menyeluruh mengenai

sistem yang ditangani, menunjukkan tentang fungsi-fungsi utama atau

proses yang ada, aliran data, dan eksternal entity. Pada level ini sudah

dimungkinkan adanya data store yang digunakan.

Gambar 2.8 DAD level 0

11

1.3.3 Diagram Alir Data (DAD) Level 1 Proses Olah Data

DAD level 1 adalah diagram yang menguraikan proses apa yang ada

di dalam diagram level 0.

Gambar 2.9 DAD level 1 proses olah data

1.4 Kamus Data Tabel

Pada tahap perancangan sistem, kamus data digunakan untuk

merancang input, merancang laporan-laporan dan database. Berikut ini

adalah kamus data sistem web profil Istana Topi.

a. Kamus Data Tabel Artikel

Nama Tabel : artikel

Kunci Utama : id_artikel

Keterangan : Tabel untuk menyimpan artikel

12

Tabel 2.2 Kamus data tabel artikel

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id_artikel

int

20

id artikel

2

label

varchar

30

label artikel

3

judul

varchar

30

judul artikel

4

isi

longtext

isi artikel

5

waktu

datetime

waktu publikasi

b. Kamus Data Tabel Produk

Nama Tabel : produk

Kunci Utama : id_ produk

Keterangan : Tabel untuk menyimpan data produk

Tabel 2.3 Kamus data tabel produk

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id_produk

int

2

id produk

2

nm_produk

varchar

15

nama produk

3

harga

int

10

harga produk

c. Kamus Data Tabel Order

Nama Tabel : order

Kunci Utama : id_order

Keterangan : Tabel untuk menyimpan data order

Tabel 2.4 Kamus data tabel booking

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id_order

int

20

id order

2

nm_user

varchar

30

nama user

3

cp_user

int

20

no. telp/hp user

4

tgl_order

varchar

30

tanggal order

5

email

varchar

30

email user

6

produk

int

2

pilihan produk by id

7

jml_peserta

int

10

jumlah peserta

8

status

varchar

10

status order

13

d. Kamus Data Tabel Slider

Nama Tabel : slider

Kunci Utama : id

Keterangan : Tabel untuk menyimpan gambar slider

Tabel 2.5 Kamus data tabel slider

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id

int

3

id gambar

2

nm_gbr

varchar

35

nama gambar

3

tipe_gbr

varchar

10

tipe gamber

4

ket_gbr

text

keterangan gambar

e. Kamus Data Tabel Inbox

Nama Tabel : inbox

Kunci Utama : id_pesan

Keterangan : Tabel untuk menyimpan pesan inbox

Tabel 2.6 Kamus data tabel inbox

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id_pesan

int

10

id pesan

2

nama

varchar

30

nama pengirim

3

email

varchar

20

email pengirim

4

judul

varchar

15

judul pesan

5

pesan

varchar

500

isi pesan

6

tgl

datetime

tanggal terkirim

f. Kamus Data Tabel Login

Nama Tabel : login_attempts

Kunci Utama : id

Keterangan : Tabel untuk menyimpan upaya login

Tabel 2.7 Kamus data tabel login

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id

int

11

id admin

2

ip_address

varchar

45

ip address admin

3

login

varchar

100

password

4

time

int

11

waktu login

14

g. Kamus Data Tabel Groups

Nama Tabel : groups

Kunci Utama : id

Keterangan : Tabel untuk menyimpan data groups

Tabel 2.8 Kamus data tabel groups

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id

mediumint

8

id groups

2

name

varchar

20

nama groups

3

description

varchar

100

deskripsi groups

h. Kamus Data Tabel User Groups

Nama Tabel : user_groups

Kunci Utama : id

Keterangan : Tabel untuk menyimpan data user groups

Tabel 2.9 Kamus data tabel groups

No.

Nama Field

Tipe Data

Lebar

Keterangan

1

id

int

11

id user groups

2

user_id

int

11

id user

3

group_id

mediumint

8

id groups

i. Kamus Data Tabel Users

Nama Tabel : users

Kunci Utama : id

Keterangan : Tabel untuk menyimpan data users

Tabel 2.10 Kamus data tabel users

No.

Nama Field

Tipe

Data

Lebar

Keterangan

1

id

int

11

id users

2

ip_address

varchar

45

ip address

3

username

varchar

100

username

4

password

varchar

255

passwrod

5

salt

varchar

255

tempat enkripsi

6

email

varchar

254

email

7

activation_code

varchar

40

kode aktivasi

8

forgotten_password_code

varchar

40

kode lupa

password

15

Tabel 2.11 Lanjutan

No.

Nama Field

Tipe

Data

Lebar

Keterangan

9

forgotten_password_time

int

11

waktu lupa

password

10

remember_code

varchar

40

kode pengingat

11

created_on

int

11

waktu

pembuatan

12

last_login

int

11

waktu terakhir

login

13

active

tinyint

1

status aktif /

tidak

14

first_name

varchar

50

nama depan

15

last_name

varchar

50

nama belakang

16

company

varchar

100

nama perusahaan

17

phone

varchar

20

no. HP/Telp.

1.5 Rancangan Antar Muka (I/O)

1.5.1 Antar Muka Publik

Gambar 2.10 Desain antarmuka home

16

Gambar 2.11 Desain antarmuka about

Gambar 2.12 Desain antarmuka produk

Gambar 2.13 Desain antarmuka order

17

Gambar 2.14 Desain antarmuka agenda

Gambar 2.15 Desain antarmuka galeri

Gambar 2.16 Desain antarmuka contact

18

1.5.2 Antar Muka Admin

Gambar 2.17 Desain antarmuka login

Gambar 2.18 Desain antarmuka dokumentasi

19

Gambar 2.19 Desain antarmuka member

Gambar 2.20 Desain antarmuka slider

Gambar 2.21 Desain antarmuka artikel

20

Gambar 2.22 Desain antarmuka harga produk

Gambar 2.23 Desain antarmuka moderasi

Gambar 2.24 Desain antarmuka inbox

21

1.6 Flow Chart

1.6.1 Flow Chart Program

Gambar 2.25 Flow chart program publik

22

Gambar 2.26 Flow chart program admin

23

1.6.1 Flow Chart Sistem

Gambar 2.27 Flow chart sistem

2. IMPLEMENTASI

1.1 Implementasi Panel Publik

Panel publik merupakan antarmuka pengguna yang berfungsi

menghubungkan antara calon pembeli (visitor) dengan sistem aplikasi web profil,

menyediakan berbagai macam informasi seputar Toko Istana Topi yang dapat

dikonsumsi oleh publik, juga menyediakan beberapa formulir yang dapat

digunakan untuk berinteraksi seperti booking, contact, dan komentar di blog.

24

1.1.1 Home

Antarmuka home menonjolkan gambar-gambar unggulan,

dipresentasikan dalam bentuk slider ukuran penuh, memungkinkan menarik

perhatian dan minat calon pembeli (visitor) terhadap produk unggulan yang

dipamerkan.

Gambar 2.28 Antarmuka publik home

1.1.2 About

Antarmuka about menonjolkan informasi seputar sejarah berdirinya

Toko Istana Topi, visi, misi dan struktur organisasinya.

Gambar 2.29 Antarmuka publik about

25

1.1.3 Produk

Antarmuka produk menonjolkan informasi seputar produk, harga, dan

fitur yang disediakan. Halaman ini menjadi acuan bagi calon pembeli

(visitor) dalam menentukan pilihan produk saat pemesanan.

Gambar 2.30 Antarmuka publik produk

1.1.4 Order

Antarmuka order menyediakan formulir yang memungkinkan calon

pembeli (visitor) melakukan pemesanan baik satuan maupun jumlah banyak

terhadap barang yng tersedia.

Gambar 2.31 Antarmuka publik order

26

1.1.5 Agenda

Antarmuka agenda menyediakan informasi berupa daftar pesanan

yang telah valid sesuai SOP Istana Topi. Informasi tersebut meliputi nama

pelanggan, hari, tanggal dan waktu pesanan mereka.

Gambar 2.32 Antarmuka publik agenda

1.1.6 Galeri

Antarmuka galeri menyediakan informasi multimedia seperti playlist

video channel youtube dan koleksi foto instagram milik Istana Topi.

Memperkuat daya tarik Istana Topi terhadap calon pembeli (visitor),

memungkinkan Istana Topi lebih dikenal di mesin pencari maupun sosial

media.

Gambar 2.33 Antarmuka publik galeri

27

1.1.7 Blog

Antarmuka blog memiliki fungsi beragam, mulai dari catatan harian,

media publikasi dalam kampanye produk atau jasa, sampai dengan even

khusus sebuah badan usaha. Hal ini memungkinkan Istana Topi lebih luas

dalam menjangkau calon pembeli (visitor), karena setiap konten unik pada

blog ini memiliki daya tarik tersendiri di mata mesin pencari.

Antarmuka blog juga dilengkapi dengan media khusus untuk

berkomentar, memungkinkan pengguna (visitor) mengutarakan pendapat

mereka. Hal ini dapat menjalin keakraban antara Istana Topi dengan

pengguna (visitor).

Gambar 2.34 Antarmuka publik blog

1.1.8 Contact

Antarmuka contact memiliki fungsi khusus dan formal, media dimana

pengguna (visitor) dapat mengutarakan keluhan, kritikan, saran, maupun

pertanyaan pertanyaan-pertanyaan penting terkait produk Istana Topi.

Jumlah karakter pada formulir pesan kami batasi maksimal 500, hal

ini sebagai bentuk antisipasi dan pencegahan terhadap penyalahgunaan

seperti spam.

28

Gambar 2.35 Antarmuka publik contact

1.2 Implementasi Panel Admin

Panel admin merupakan antarmuka pengguna (administrator) yang

memungkinkan untuk melakukan kontrol dan manajemen terhadap konten

web profil Istana Topi. Hanya orang-orang dengan kriteria tertentu yang

diperbolehkan masuk ke panel ini.

1.2.1 Dashboard

Saat Anda berhasil masuk ke panel Administrator, maka secara default

halaman ini akan ditampilkan kepada Anda. Sebuah halaman bantuan yang

berisi petunjuk praktis penggunaan fitur-fitur yang tersedia di aplikasi ini.

Anda dapat menggunakan tombol Toggle Menu & CTRL+F untuk

membantu Anda melakukan pencarian cepat.

29

Gambar 2.36 Antarmuka admin dashboard

1.2.2 Member

Adalah menu yang memungkinkan Anda menambahkan anggota

sebagai partner dalam mengelola web atau menonaktifkan anggota yang

sudah tidak memenuhi kriteria.

Setiap anggota mempunyai tingkatan (level). Admin merupakan level

tertinggi dan memiliki hak akses penuh atas semua fitur yang tersedia di

web profil ini.

Jika level Anda bukan Admin, maka fitur yang dapat digunakan

adalah sebagai berikut.

Gambar 2.37 Hak akses selain level admin

Selebihnya tidak ada respon atau akan ditampilkan pesan error jika

Anda memaksa ingin menonaktifkan atau menghapus member tertentu.

30

Gambar 2.38 Antarmuka admin member

1.2.3 Slider

Adalah menu yang memungkinkan Anda mengunggah foto sebagai

slider halaman publik. Format yang diijikan adalah gif, jpg, png. Dimensi

yang direkomendasikan adalah 1900x1080. Size yang direkomendasikan

adalah kurang dari 4MB.

Gambar 2.39 Antarmuka admin slider

31

1.2.4 Artikel

Adalah menu yang memungkinkan Anda menulis artikel about,

paket, blog, maupun alamat.

Penggunaan label

1. about, digunakan khusus untuk halaman about. Jumlah artikel hanya

diperbolehkan 1.

2. paket, digunakan khusus untuk halaman paket. Jumlah artikel

diperbolehkan lebih dari 1.

3. address, digunakan khusus untuk menulis alamat di halaman contact.

Jumlah artikel hanya diperbolehkan 1.

Selain ketiga label diatas, Anda dapat secara bebas menggunakan label

lain untuk artikel di halaman blog. Jumlah artikel diperbolehkan lebih

dari 1. Insert Image Maximum file size 1.5MB (via komputer local /

media penyimpanan local) dan tidak terbatas (via image URL).

Kelola Artikel. Scroll ke bawah untuk melihat daftar artikel yang

telah dibuat.

1. Search box, digunakan untuk mensortir artikel, dengan cara

memasukkan keyword yang dikehendaki sebagai pendekatan.

2. Tombol Lihat, digunakan untuk meninjau / melihat artikel secara detail

layaknya tampilan public.

3. Tombol Edit, digunakan untuk mengedit artikel, berlaku untuk judul,

label, dan isi/konten.

4. Tombol Delete, digunakan untuk menghapus artikel.

5. Tombol Top, digunakan untuk kembali ke bilah atas bagian form

artikel, jika Anda menghendaki menambah artikel.

32

Gambar 2.40 Antarmuka admin artikel

1.2.5 Harga Produk

Adalah menu yang memungkinkan Anda mengatur daftar paket

beserta harganya.

Ketentuan :

1. Nama Produk, direkomendasikan penamaan tidak lebih dari 2(dua)

kata.

2. Harga Produk, hanya boleh memasukan angka. Dilarang

menggunakan titik(.) atau koma(,) sebagai tanda pemisah angka.

3. ID Produk, hanya disediakan 10 ID, artinya jumlah Produk hanya

dibatasi max 10. ID yang sudah digunakan tidak dapat digunakan

kembali, dengan kata lain Anda tidak dapat memilih ID yang sama

untuk Produk lain.

33

Gambar 2.41 Antarmuka admin harga paket produk

1.2.6 Moderasi

Adalah menu yang memungkinkan Anda mengontrol transaksi

pesanan, mana yang layak dan tidak layak ditindaklanjuti.

Transaksi pesanan yang baru masuk akan berstatus Pending, maka

yang perlu Anda lakukan adalah.

1. Tombol Print, gunakan tombol ini untuk mencetak invoice dan

mengirimkannya kepada pihak terkait via whatapps, email, atau media

lain yang memungkinkan.

2. Pending, tekan tombol ini sehingga menjadi Approved, jika pihak

terkait tuntas melakukan pembayaran, maka layak dimasukkan ke

Agenda.

3. Tombol Delete, gunakan tombol ini jika pihak terkait tidak tuntas

melakukan pembayaran.

34

Gambar 2.42 Antarmuka admin moderasi

1.2.7 Inbox

Adalah menu yang memungkinkan Anda melihat pesan masuk dari

tamu. Anda juga dapat mempelajari pola interaksi mereka dari sini,

menentukan jawaban yang tepat untuk FAQ, atau bisa juga sebagai list

building untuk kepentingan marketing. Selain itu, Anda juga dapat

membalas pesan mereka dengan cara klik alamat email mereka.

Tombol Delete, gunakan tombol ini untuk menghapus pesan masuk

yang tidak relevan.

Gambar 2.43 Antarmuka admin inbox

35

1.2.8 Login

Antarmuka yang memungkinkan Anda masuk ke panel administrator,

hanya anggota terdaftar yang dapat menggunakan.

Gambar 2.44 Antarmuka admin login

1.2.8 Logout

Adalah menu yang memungkinkan Anda keluar dari panel

Administrator. Pastikan selalu logout jika aktifitas Anda mengelola web

dirasa cukup.

36

C. Analisis Hasil Pelaksanaan

Web profil Istana Topi ini memiliki beberapa kelebihan dan kekurangan

dintaranya.

1 Kelebihan

1. Autentikasi aplikasi company profile ini dilengkapi dengan forgot

password, sehingga administrator Istana Topi tidak perlu khawatir

bilamana suatu saat lupa dengan passwordnya.

2. Galeri terintegrasi dengan sosial media milik Istana Topi, sehingga

update konten yang dilakukan di akun mereka otomatis akan tampil

juga di website profil Istana Topi.

3. Kotak pesan buku tamu dilengkapi dengan form validation dan

pembatasan jumlah karakter, hal ini untuk mengantisipasi serangan

spammer.

4. Pada menu order juga dilengkapi dengan pilihan cetak Invoice, hal ini

memudahkan petugas mengelola dan mengontrol pengeluaran,

sekaligus dapat juga digunakan untuk lampiran laporan kepada bagian

keuangan atau atasan.

2 Kekurangan

1. Layout web profil Istana Topi belum sepenuhnya responsif, sehingga

tampilannya tidak akan proposional jika dijalankan pada perangkat

mobile digital dengan ukuran layar kecil seperti smartphone atau tablet.

2. Editor pengisian alamat belum dibuat secara terpisah artikel, sehingga

petugas perlu lebih meningkatkan kreatifitas dalam menuliskannya.

37

BAB III

PENUTUP

3.1 Kesimpulan

Kesimpulan yang dapat diambil dalam pelaksanaan KKL ini berdasarkan

studi kasus Toko Istana Topi adalah.

1. Toko Istana Topi menjadi memiliki web profil.

2. Jangkauan promosi Toko Istana Topi menjadi lebih luas dengan adanya web

profil, karena memiliki kesempatan berpartisipasi dalam mesin pencari.

3. Meningkatkan profesionalitas pengelolaan Toko Istana Topi.

4. Meningkatkan popularitas Toko Istana Topi.

5. Memudahkan petugas dalam mengelola dan mempromosikan potensi-

potensi yang dimilik Toko Istana Topi kepada khalayak.

6. Memudahkan petugas dalam melakukan pendataan dan pencaraian stock

barang menggunakan search box yang ada di menu artikel.

7. Memudahkan petugas mengontrol catatan transaksi yang dilakukan secara

online mengacu pada invoice yang dicetak.

3.2 Saran

Saran yang dapat diberikan untuk pengembangan aplikasi web profil Istana

Topi ini adalah.

1. Layout web profil Istana Topi belum sepenuhnya responsif, jadi untuk

meningkatkan pengalaman pengguna alangkah baiknya jika dibuat

responsive, sehingga dapat dijalankan dengan proposional dari berbagai

macam dimensi perangkat digital seperti mobile, tablet, laptop maupun PC.

2. Pada halaman contact bagian konten alamat dan sosial media masih

menggunakan gambar sebagai icon, alangkah baiknya jika dibuatkan

interface khusus untuk menginputkan alamat beserta social media, karena

pada web profil Istana Topi bisa dikatakan masih pinjam editor untuk input

artikel yang identik dengan paragraph yang panjang.

38

LAMPIRAN 1

Dokumentasi Outlet Istana Topi

39

DOKUMENTASI OUTLET STORE ISTANA TOPI

40

LAMPIRAN 2

Kode Program Web Profil Istana Topi

41

KODE PROGRAM

Admin.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Admin extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Mupload'); //load model Mupload yang berada di folder model

$this->load->model('Marticle'); //load model Marticle yang berada di folder

model

$this->load->model('Mbooking'); //load model Marticle yang berada di folder

model

$this->load->model('Memail'); //load model Marticle yang berada di folder

model

$this->load->model('Mpaket'); //load model Marticle yang berada di folder

model

if (!$this->ion_auth->logged_in())

{

$this->session->set_flashdata('message', 'You must be an admin to view

this page');

redirect('auth/login');

}

/**

* Index Page for this controller.

*

* Maps to the following URL

* http://example.com/index.php/welcome

* - or -

* http://example.com/index.php/welcome/index

* - or -

* Since this controller is set as the default controller in

* config/routes.php, it's displayed at http://example.com/

*

* So any other public methods not prefixed with an underscore will

* map to /index.php/welcome/<method_name>

* @see https://codeigniter.com/user_guide/general/urls.html

*/

public function index()

{

$this->load->view('admin/petunjuk');

}

/* PANEL SLIDER DI SINI

----------------------------*/

public function slider(){

//ambil variabel URL

$data['query'] = $this->Mupload->get_allimage(); //query dari model

$this->load->view('admin/slider',$data); //tampilan awal ketika controller

upload di akses

}

public function do_upload()

{

$nmfile = "file_".time(); //nama file saya beri nama langsung

dan diikuti fungsi time

$config['upload_path'] = './uploads/';

$config['allowed_types'] = 'gif|jpg|png';

$config['max_size'] = 0;

$config['max_width'] = 2000;

$config['max_height'] = 1100;

$config['file_name'] = $nmfile; //nama yang terupload nantinya

$this->load->library('upload', $config);

$this->upload->initialize($config);

42

/*DISABLE METHOD ORIGINAL CI UPLOAD

if ( ! $this->upload->do_upload('userfile'))

{

$error = array('error' => $this->upload->display_errors());

$this->load->view('admin/slider', $error);

}

else

{

$data = array('upload_data' => $this->upload->data());

$this->load->view('admin/upload_success', $data);

}

END DISABLE*/

/* ADD NEW METHOD UPLOAD+POST */

if($_FILES['userfile']['name'])

{

if ($this->upload->do_upload('userfile'))

{

$gbr = $this->upload->data();

$data = array(

'nm_gbr' =>$gbr['file_name'],

'tipe_gbr' =>$gbr['file_type'],

'ket_gbr' =>$this->input->post('textket')

);

$thumbs = array('upload_data' => $this->upload->data()); //utk

generate thumbnails

$this->Mupload->get_insert($data); //akses model untuk menyimpan ke

database

//pesan yang muncul jika berhasil diupload pada session flashdata

$this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div

class=\"alert alert-success\" id=\"alert\">Upload gambar berhasil DAB!!!</div></div>");

// redirect('admin/upload_success'); //jika berhasil maka akan

ditampilkan view vupload

$this->load->view('admin/upload_success', $thumbs);

}else{

//pesan yang muncul jika terdapat error dimasukkan pada session flashdata

$this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div

class=\"alert alert-danger\" id=\"alert\">Gagal upload gambar !!</div></div>");

redirect('admin/slider'); //jika gagal maka akan ditampilkan form upload

}

public function hapus_gb($id){ //fungsi hapus article sesuai dengan id

//initialize kolom tabel

$rowdel['isi'] = $this->Mupload->get_byimage($id);

/* file gambar dihapus dari folder */

//delete_files('./uploads/'.$rowdel['isi']->nm_gbr);

$path = './uploads/'.$rowdel['isi']->nm_gbr;

$pathumb = './uploads/thumbs/'.$rowdel['isi']->nm_gbr;

echo $path;

echo $pathumb;

if (unlink($path) and unlink($pathumb)) {

//echo 'success kabeh';

$this->Mupload->del_gb($id);

$msgp = $this->session->set_flashdata("pesan", "<div class=\"col-md-

12\"><div class=\"alert alert-warning\" id=\"alert\">DELETE Gambar Berhasil

COOY!!</div></div>");

redirect('admin/slider',$msgp);

}

else {

//pesan yang muncul jika terdapat error dimasukkan pada session

flashdata

$msgn = $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div

class=\"alert alert-danger\" id=\"alert\">Gagal DELETE Gambar COOY!!</div></div>");

redirect('admin/slider',$msgn);

43

}

//delete_files($path);

//unlink('./uploads/thumbs/'.$rowdel['isi']->nm_gbr);

}

public function edit_gb($id){

$rowed['isi'] = $this->Mupload->get_byimage($id);

$this->load->view('admin/vedit_gb',$rowed);

}

public function update_gb(){

$idg = $this->input->post('idgbr');

$ket = $this->input->post('textket');

$data = array(

'ket_gbr' => $ket

);

$this->Mupload->get_update_gb($idg,$data); //modal update data article

$msgp = $this->session->set_flashdata("pesan", "<div class=\"alert alert-

success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Keterangan gambar berhasil

diupdate GAN!!!</div>"); //pesan yang tampil setelah berhasil di update

redirect('admin/slider',$msgp);

}

/* PANEL ARTICLE DI SINI

----------------------------*/

public function artikel(){

$data['query'] = $this->Marticle->get_article(); //query dari model

$this->load->view('admin/v_artikel',$data); //tampilan awal ketika controller

upload di akses

}

public function form(){

//ambil variabel URL

$mau_ke = $this->uri->segment(3);

$id = $this->uri->segment(4);

//ambil variabel dari form

$ide = $this->input->post('ide');

$judul = $this->input->post('title');

$kategori = $this->input->post('category');

$konten = $this->input->post('content');

//mengarahkan fungsi form sesuai dengan uri segmentnya

if ($mau_ke == "add") {//jika uri segmentnya add

$data['title'] = 'Tambah Article';

//$data['aksi'] = 'aksi_add';

$this->load->view('admin/v_artikel',$data);

} else if ($mau_ke == "edit") {//jika uri segmentnya edit

$data['isi'] = $this->Marticle->get_article_byid($id);

$data['title'] = 'Edit Artikel';

//$data['aksi'] = 'aksi_edit';

$this->load->view('admin/e_artikel',$data);

} else if ($mau_ke == "aksi_add") {//jika uri segmentnya aksi_add sebagai fungsi

untuk insert

$data = array(

'judul' => $judul,

'label' => $kategori,

'isi' => $konten

);

$this->Marticle->get_insert($data); //model insert data article

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-

success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Data berhasil di

insert</div>"); //pesan yang tampil setalah berhasil di insert

redirect('admin/artikel',$msgp);

} else if ($mau_ke == "aksi_edit") { //jika uri segmentnya aksi_edit sebagai

fungsi untuk update

$data = array(

'judul' => $judul,

'label' => $kategori,

44

'isi' => $konten

);

$this->Marticle->get_update($ide,$data); //modal update data article

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-

success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Data berhasil

diupdate</div>"); //pesan yang tampil setelah berhasil di update

redirect('admin/artikel',$msgp);

}

public function hapus_artikel($id){ //fungsi hapus article sesuai dengan id

$this->Marticle->del_article($id);

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-danger\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Artikel berhasil dihapus</div>");

redirect('admin/artikel',$msgp);

}

/* END

----------------------------*/

/* PANEL List Booking

----------------------------*/

public function mod_booking()

{

$data['query'] = $this->Mbooking->get_booking(); //query dari model

$this->load->view('admin/list_booking',$data);

}

public function approve()

{

$idb = $this->uri->segment(3);

$data = array(

'status' => 'approved'

);

$this->Mbooking->get_update($idb,$data); //modal update data booking

$msgp = $this->session->set_flashdata("pesan", "<div class=\"alert alert-success\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Order telah disetujui!!!</div>");

//pesan yang tampil setelah berhasil di update

redirect('admin/mod_booking',$msgp);

}

public function cencel($idb){ //fungsi hapus article sesuai dengan id

$this->Mbooking->del_booking($idb);

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-danger\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Order telah digagalkan!!!</div>");

redirect('admin/mod_booking',$msgp);

}

//END

/*----------------------------*/

/* PANEL Invoice

----------------------------*/

public function invoice($idb)

{

$data['query'] = $this->Mbooking->get_booking_byid($idb); //query dari model

$kdh=$data['query'][0]->paket;

$data['hrg'] = $this->Mpaket->get_paket_byid($kdh); //query dari model

$this->load->view('admin/invoice',$data);

}

//END

/*----------------------------*/

/* PANEL Email

----------------------------*/

public function inbox(){

$data['query'] = $this->Memail->get_message(); //query dari model

$this->load->view('admin/mail',$data); //tampilan awal ketika controller

upload di akses

}

public function sendmail(){

//ambil variabel dari form

$nama = $this->input->post('nama');

$email = $this->input->post('email');

$judul = $this->input->post('subject');

45

$pesan = $this->input->post('message');

$data = array(

'nama' => $nama,

'email' => $email,

'judul' => $judul,

'pesan' => $pesan

);

//sekalian insert ke database

$this->Memail->get_insert($data);

//template email dari sistem

$app = 'WTGI WEB';

$pengiriman['psn'] = '<br/>

#PENGIRIM: '.$nama.',<br/>

#EMAIL: '.$email.',<br/>

+----------------------------------------------------------- <br/>

'.$pesan.'<br/>

';

$config = Array(

'protocol' => 'smtp',

'smtp_host' => 'ssl://smtp.googlemail.com',

'smtp_port' => 465,

'smtp_user' => 'YOUR_MAIL@gmail.com', // change it to yours (DEFAULT Email For

SYSTEM)

'smtp_pass' => 'YOUR_PASSWORD', // change it to yours

'mailtype' => 'html',

'charset' => 'iso-8859-1',

'crlf' => '\r\n',

'newline' => '\r\n',

'wordwrap' => TRUE

);

$this->load->library('email',$config);

$this->email->from($email,$app); // change it to yours

$this->email->to('YOUR_DESTINATION@gmail.com');// change it to yours (DESTINASI

Email Administrator)

$this->email->subject($judul);

$this->email->message($this->load->view('mail_template', $pengiriman, TRUE));

if($this->email->send())

{

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert

alert-success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Pesan telah dikirim!

</div>"); //pesan yang tampil setelah berhasil di update

redirect('demo/contact',$msgp);

}

else

{

//show_error($this->email->print_debugger());

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert

alert-danger\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Pesan gagal dikirim,

silakan coba lagi! </div>"); //pesan yang tampil setelah berhasil di update

redirect('demo/contact',$msgp);

}

public function del_pesan($id){ //fungsi hapus article sesuai dengan id

$id = $this->uri->segment(3);

$this->Memail->del_message($id);

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-danger\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Pesan berhasil dihapus</div>");

redirect('admin/inbox',$msgp);

}

public function hrg_paket(){

$data['list'] = $this->Mpaket->get_paket();

$this->load->view('admin/harga',$data);

}

public function tbh_hrg(){

//ambil variabel dari form

$nm_pkt = $this->input->post('nm_paket');

46

$hrg = $this->input->post('hrg_paket');

$kd = $this->input->post('id_paket');

$data = array(

'id_paket' => $kd,

'nm_paket' => $nm_pkt,

'harga' => $hrg

);

//sekalian insert ke database

$this->Mpaket->ins_paket($data);

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-success\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Harga berhasil ditambahkan!

</div>"); //pesan yang tampil setelah berhasil di update

redirect('admin/hrg_paket',$msgp);

}

public function edit_hrg($idh){

$data['old'] = $this->Mpaket->get_paket_byid($idh);

$this->load->view('admin/e_harga',$data);

}

public function update_hrg(){

//ambil variabel dari form

$nm_pkt = $this->input->post('nm_paket');

$hrg = $this->input->post('hrg_paket');

$kd = $this->input->post('id_paket');

$data = array(

'nm_paket' => $nm_pkt,

'harga' => $hrg

);

$this->Mpaket->upd_paket($kd,$data); //modal update data article

$msgp = $this->session->set_flashdata("pesan", "<div class=\"alert alert-

success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Harga berhasil diupdate!

</div>"); //pesan yang tampil setelah berhasil di update

redirect('admin/hrg_paket',$msgp);

}

public function del_hrg($kd){ //fungsi hapus article sesuai dengan id

$id = $this->uri->segment(3);

$this->Mpaket->del_paket($kd);

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-danger\"

id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Harga telah dihapus!</div>");

redirect('admin/hrg_paket',$msgp);

}

Demo.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Demo extends CI_Controller {

public function __construct() {

parent::__construct();

$this->load->model('Mupload'); //load model Mupload yang berada di folder model

$this->load->model('Marticle'); //load model Marticle yang berada di folder

model

$this->load->model('Mbooking'); //load model Mbooking yang berada di folder

model

$this->load->model('Mpaket'); //load model Mbooking yang berada di folder

model

}

/**

* Index Page for this controller.

*

* Maps to the following URL

* http://example.com/index.php/welcome

* - or -

* http://example.com/index.php/welcome/index

* - or -

* Since this controller is set as the default controller in

47

* config/routes.php, it's displayed at http://example.com/

*

* So any other public methods not prefixed with an underscore will

* map to /index.php/welcome/<method_name>

* @see https://codeigniter.com/user_guide/general/urls.html

*/

public function index()

{

$data["array_emp"] = $this->Mupload->get_allimage();

$this->load->view('demo/home',$data);

}

public function about()

{

$data["array_emp"] = $this->Marticle->get_about();

$this->load->view('demo/about',$data);

}

public function paket()

{

$data["array_emp"] = $this->Marticle->get_paket();

$this->load->view('demo/paket',$data);

}

public function d_paket($id)

{

//$data['title'] = 'Detail Artikel'; //judul title

$data['isi'] = $this->Marticle->get_article_byid($id); //query model article

sesuai id

$this->load->view('demo/s_paket',$data); //meload views detail article

}

/* PANEL ARTICLE DI SINI

----------------------------*/

public function booking(){

$data['list'] = $this->Mpaket->get_paket();

$this->load->view('demo/booking',$data);

}

public function form(){

//ambil variabel URL

$mau_ke = $this->uri->segment(3);

//ambil variabel dari form

$nama = $this->input->post('namanya');

$kontak = $this->input->post('no_hpnya');

$tglbooking = $this->input->post('tglnya');

$email = $this->input->post('emailnya');

$paket = $this->input->post('paketnya');

$peserta = $this->input->post('jmlpeserta');

//mengarahkan fungsi form sesuai dengan uri segmentnya

if ($mau_ke == "add") {//jika uri segmentnya add

$data['title'] = 'Tambah Pesanan';

//$data['aksi'] = 'aksi_add';

$this->load->view('admin/v_artikel',$data);

} else if ($mau_ke == "aksi_add") {//jika uri segmentnya aksi_add sebagai fungsi

untuk insert

$data = array(

'nm_user' => $nama,

'cp_user' => $kontak,

'tgl_booking' => $tglbooking,

'email' => $email,

'paket' => $paket,

'jml_peserta' => $peserta

);

$this->Mbooking->get_insert($data); //model insert data article

$msgp=$this->session->set_flashdata("pesan", "<div class=\"alert alert-

success\" id=\"alert\"><i class=\"glyphicon glyphicon-ok\"></i> Booking berhasil, silakan

tunggu pesan konfirmasi via Email/Whatsapp/Telp/SMS </div>"); //pesan yang tampil setalah

berhasil di insert

//############SEND NOTIFICATION

//template email dari sistem

$app = 'WTGI BOOKING NOTIFICATION';

48

$pengiriman['psn'] = '

<br/>

Hai Admin WTGI, ada yang booking loh,<br/>

[CLIENT: '.$nama.'],<br/>

[EMAIL: '.$email.'],<br/>

<br/>

silakan cek PANEL MODERASI pada website!<br/>

<br/>

Salam,<br/>

ROBOT WEB WTGI.

';

$this->load->library('email',$config);

$this->email->from($email,$app); // change it to yours

$this->email->to('YOUR_DESTINATION@gmail.com');// change it to yours (DESTINASI

Email Administrator)

$this->email->subject($app);

$this->email->message($this->load->view('mail_template', $pengiriman, TRUE));

$this->email->send();

//############SEND NOTIFICATION END

redirect('demo/booking',$msgp);

}

/* END

----------------------------*/

public function agenda(){

$data['query'] = $this->Mbooking->get_agenda(); //query dari model

$this->load->view('demo/agenda',$data); //tampilan awal ketika controller

upload di akses

}

public function galeri(){

$this->load->view('demo/galeri');

}

public function contact(){

$data["array_emp"] = $this->Marticle->get_address();

$this->load->view('demo/contact',$data);

}

public function detail($id){ //fungsi detail article

//$data['title'] = 'Detail Artikel'; //judul title

$data['isi'] = $this->Marticle->get_article_byid($id); //query model article

sesuai id

$this->load->view('demo/s_artikel',$data); //meload views detail article

}

public function label(){

$from = $this->uri->segment(3);

$jumlah_data = $this->Marticle->jumlah_label($from);

$this->load->library('pagination');

$config['base_url'] = base_url().'Demo/blog/';

$config['total_rows'] = $jumlah_data;

$config['per_page'] = 3;

//customize pagination

$config['next_link'] = 'Older →';

$config['next_tag_open'] = '<li class="next">';

$config['next_tag_close'] = '</li>';

$config['prev_link'] = '← Newer';

$config['prev_tag_open'] = '<li class="previous">';

$config['prev_tag_close'] = '</li>';

$config['display_pages'] = FALSE;

//end customize pagination

$this->pagination->initialize($config);

$data["array_emp"] = $this->Marticle->get_label($config['per_page'],$from);

$data["sidebar"] = $this->Marticle->get_labelside('',$from);

$this->load->view('demo/blog',$data);

}

public function blog(){

//$data["array_emp"] = $this->Marticle->get_blog();

$jumlah_data = $this->Marticle->jumlah_data();

$this->load->library('pagination');

$config['base_url'] = base_url().'Demo/blog/';

49

$config['total_rows'] = $jumlah_data;

$config['per_page'] = 3;

//customize pagination

$config['next_link'] = 'Older →';

$config['next_tag_open'] = '<li class="next">';

$config['next_tag_close'] = '</li>';

$config['prev_link'] = '← Newer';

$config['prev_tag_open'] = '<li class="previous">';

$config['prev_tag_close'] = '</li>';

$config['display_pages'] = FALSE;

//end customize pagination

$from = $this->uri->segment(3);

$this->pagination->initialize($config);

$data["array_emp"] = $this->Marticle->get_blog($config['per_page'],$from);

$data["sidebar"] = $this->Marticle->get_labelside('',$from);

$this->load->view('demo/blog',$data);

}

public function search(){

//$data["array_emp"] = $this->Marticle->get_blog();

$key = $this->input->get('cari');

$jumlah_data = $this->Marticle->jumlah_data();

$this->load->library('pagination');

$config['base_url'] = base_url().'Demo/blog/';

$config['total_rows'] = $jumlah_data;

$config['per_page'] = 3;

//customize pagination

$config['next_link'] = 'Older →';

$config['next_tag_open'] = '<li class="next">';

$config['next_tag_close'] = '</li>';

$config['prev_link'] = '← Newer';

$config['prev_tag_open'] = '<li class="previous">';

$config['prev_tag_close'] = '</li>';

$config['display_pages'] = FALSE;

//end customize pagination

$from = $this->uri->segment(3);

$this->pagination->initialize($config);

$data["array_emp"] = $this->Marticle-

>blog_search($config['per_page'],$from,$key);

$data["sidebar"] = $this->Marticle->get_labelside('',$from);

$this->load->view('demo/blog',$data);

}

e_artikel.php

<?php $this->load->view('admin/header');

foreach($isi as $showdata):

$id=$showdata->id_artikel;

$jud=$showdata->judul;

$cat=$showdata->label;

$isi=$showdata->isi;

endforeach;

?>

rel="stylesheet">

<body>

<?=$this->session->flashdata('pesan')?>

<div class="panel-heading"><strong>Panel Artikel</strong> <small>Selamat

menulis</small></div>

50

<form action="<?=base_url()?>admin/form/aksi_edit" method="POST">

<input type="text" name="ide" class="form-control" readonly="readonly"

value="<?=$id?>" />

</div>

<label for="exampleInputEmail1">Judul</label>

</div>

<label for="exampleInputEmail1">Label</label>

</div>

<label for="exampleInputEmail1">Konten</label>

$(document).ready(function() {

$('#summernote').summernote({

maximumImageFileSize: 1572864, // 1.5MB

placeholder: 'Hallo gan!, selamat menulis...',

tabsize: 2,

height: 236

});

var markupStr = $('#summernote').summernote('code');

});

</script>

</div>

<button type="submit" class="btn">Submit</button>

</form>

</div>

</body>

e_harga.php

<?php $this->load->view('admin/header');

foreach($old as $x):

$id = $x->id_paket;

$nm = $x->nm_paket;

$hrg = $x->harga;

endforeach;

?>

<style>

#sidebar-wrapper,#wrapper {

-webkit-transition: none;

-moz-transition: none;

-o-transition: none;

transition: none;

}

</style>

<body>

<form class="form-horizontal" role="form" action="<?=base_url()?>admin/update_hrg"

method="POST">

<legend>Pengaturan Harga</legend>

<?=$this->session->flashdata('pesan')?>

<label class="col-sm-3 control-label" for="card-holder-name">Nama Paket</label>

51

<input type="text" class="form-control" name="nm_paket" placeholder="Nama Paket"

value="<?=$nm?>">

</div>

<label class="col-sm-3 control-label" for="card-number">Harga Paket</label>

<input type="text" class="form-control" name="hrg_paket" placeholder="Nominal"

value="<?=$hrg?>">

</div>

<label class="col-sm-3 control-label" for="expiry-month">ID Paket</label>

</select>

</div>

<button type="submit" class="btn btn-success">Submit</button>

</div>

<span class="glyphicon glyphicon-hand-left"> <i>Monggo... silakan

diedit.</i></span>

</div>

</fieldset>

</form>

</div>

</body>

about.php

<?php

$this->load->view('demo/header'); ?>

<style>

p {

margin: 0 0 10px;

font-size: 17px;

}

.footer{

bottom:0px;

}

</style>

<br />

</div>

<?php

if(empty($array_emp)){

echo "<h1>#404: Belum Ada Artikel Tentang About!!</h1><br />";

echo "<h2>#405: Tidak Di ijinkan >1 Artikel Tentang About!!</h2>";

52

}else{

foreach($array_emp as $d):

echo "<div class='container' id='artikel' style='margin-bottom:100px; width:1000px;'>";

echo '<div>';

echo '<h1>'.$d->judul.'</h1>';

echo '</div>';

echo '<p class="lead">';

echo $d->isi;

echo '</p>';

echo "</div>";

endforeach;

}

?>

</main>

<?php $this->load->view('demo/footer'); ?>

agenda.php

<?php

$this->load->view('demo/header');?>

<br />

<h2>Agenda</h2>

<p>

This agenda viewer will let you see multiple events cleanly!

</p>

</div>

<hr />

<thead>

<tr>

<th>Hari & Tanggal</th>

<th>Waktu</th>

</tr>

</thead>

<tbody>

<?php

if(empty($query)){

echo "<h1>#404: Agenda Kosong...</h1>";

}else{

foreach($query as $d):

$tgl = $d->tgl_booking;

?>

<tr>

</td>

<?=substr($tgl,11,5)?>

</td>

<i class="glyphicon glyphicon-user text-muted"

title="Repeating event"></i>

<?=$d->nm_user?>

53

</div>

</td>

</tr>

<?php endforeach;

}

?>

</tbody>

</table>

</div>

<?php

$this->load->view('demo/footer'); ?>

blog.php

<?php

$this->load->view('demo/header');?>

img {

display: block;

max-width: 100%;

height: auto;

}

.post {

display: block;

height: 625px;

overflow: hidden;

white-space: pre-wrap;

text-overflow: ellipsis;

}

.btn-primary {

margin-top: 20px;

margin-bottom: 30px;

}

hr {

margin-top: 5px;

margin-bottom: 5px;

}

</style>

</head>

<body>

<?php

if(empty($array_emp)){

echo "<h1>#404: Belum Ada Artikel Untuk Blog!!</h1>";

}else{

foreach($array_emp as $d):

echo ' <h2>';

echo ' <a href="'.base_url().'demo/detail/'. $d->id_artikel .'">'.$d-

>judul.'</a>';

echo ' </h2>';

echo ' <p><span class="glyphicon glyphicon-time"></span> Posted on '.$d-

>waktu.'</p>';

echo ' <hr>';

echo ' <div class="post"><p>'.$d->isi.'</p></div>';

echo ' <a class="btn btn-primary" href="'.base_url().'demo/detail/'. $d-

54

>id_artikel .'">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>';

echo ' <hr>';

endforeach;

}

?>

<?php echo $this->pagination->create_links();?>

</ul>

</div>

<h4>Blog Search</h4>

<form action="<?=base_url()?>demo/search" method="GET"

class="form-inline">

</button>

</span>

</div>

</form>

</div>

<h4>Blog Categories</h4>

<?php

if(empty($sidebar)){

echo "<h1>#404: Belum Ada Label Untuk Blog!!</h1>";

}else{

foreach($sidebar as $k):

echo ' <li>';

echo ' <a href="'.base_url().'demo/label/'. $k->label .'">'.$k->label.'</a>';

echo ' </li>';

endforeach;

}

?>

</ul>

</div>

</div>

<h4>Halo Petualang!</h4>

<p>Selamat datang di blog WTGI, tempat dimana kami akan berbagi cerita

super seru seputar perjalanan kami dalam mengarungi sugai gending.</p>

</div>

<hr>

</div>

</body>

<?php

$this->load->view('demo/footer'); ?>

55

contact.php

<?php

$this->load->view('demo/header'); ?>

</div>

input#counter {

border: none;

background-color: transparent;

margin-left: 3px;

}

h4{

margin-bottom: 7px;

}

.footer{

bottom:0px;

}

</style>

<?=$this->session->flashdata('pesan')?>

<form action="<?=base_url()?>admin/sendmail" method="POST">

Name</label>

<input name="nama" type="text" class="form-control" id="name"

placeholder="Enter name" required="required" />

</div>

Email Address</label>

<span class="input-group-addon"><span class="glyphicon

glyphicon-envelope"></span>

</span>

<input name="email" type="email" class="form-control"

id="email" placeholder="Enter email" required="required" /></div>

</div>

Subject</label>

<select id="subject" name="subject" class="form-control"

required="required">

<option value="na" selected="">Choose One:</option>

<option value="Service">General Customer Service</option>

<option value="Suggestions">Suggestions</option>

<option value="Product">Product Support</option>

</select>

</div>

Message</label>

<textarea onkeyup="textCounter(this,'counter',500);"

name="message" id="message" class="form-control" rows="9" cols="25" required="required"

placeholder="Message"></textarea>

<input disabled maxlength="3" size="3"

value="500" id="counter">

</div>

<button type="submit" class="btn btn-primary pull-right"

id="btnContactUs">

56

Send Message</button>

</div>

</form>

</div>

<form>

<!-- <legend><span class="glyphicon glyphicon-globe"></span> Our

office</legend> -->

<iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1977.5385245217421!2d110.198177

35794159!3d-

7.566578848635824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a8c2fba5125e9%3A0

x683c4bc19cab6d13!2sWisata+Tubing+Gending+Indah!5e0!3m2!1sid!2sid!4v1514761362972"

width="360" height="355" frameborder="0" style="border:0" allowfullscreen></iframe>

</form>

</div>

<hr>

<?php

if(empty($array_emp)){

echo "<h4>#404: Alamat belum tertera!!</h4>";

echo "<h4>#405: Tidak Di ijinkan >1 alamat!!</h4>";

}else{

foreach($array_emp as $d):

echo $d->isi;

endforeach;

}

?>

</center>

</div>

function textCounter(field,field2,maxlimit)

{

var countfield = document.getElementById(field2);

if ( field.value.length > maxlimit ) {

field.value = field.value.substring( 0, maxlimit );

return false;

} else {

countfield.value = maxlimit - field.value.length;

}

</script>

<?php $this->load->view('demo/footer'); ?>

galeri.php

<?php

$this->load->view('demo/header');?>

src="<?=base_url()?>bower_components/instafeed.js/instafeed.min.js"></script>

div#instafeed-gallery-feed {

width: 1060px;

margin-left: 40px;

}

@import

url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,

900i');

body {

font-family: 'Lato', "Helvetica", Arial, sans-serif;

}

/* remove bootstrap gutter*/

.row.no-gutter {

57

margin-left: 0;

margin-right: 0;

}

.row.no-gutter [class*='col-']:not(:first-child),

.row.no-gutter [class*='col-']:not(:last-child) {

padding-right: 0;

padding-left: 0;

}

/* the good stuff */

body {

}

.img-featured-container {

overflow: hidden;

position: relative;

}

.img-featured-container img {

width: 100%;

/* padding: 10px; */

}

.img-featured-container .img-backdrop {

background: linear-gradient(135deg, rgba(38, 163, 255, 0.85), rgba(83, 201, 179, 0.85));

margin: 0;

padding: 0;

width: 100%;

height: 100%;

position: absolute;

z-index: 1;

opacity: 0;

transition: all 0.3s ease;

}

.img-featured-container:hover > .img-backdrop {

opacity: 1;

}

/* center text horizontally and vertically on image hover */

.img-featured-container .description-container {

color: #fff;

font-size: 16px;

line-height: 1.2;

padding: 0 30px;

text-align: center;

line-height: 20px;

width: 100%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

transform-style: preserve-3d;

z-index: 2;

opacity: 0;

transition: all .2s ease;

}

.img-featured-container .description-container .fa-instagram {

font-size: 40px;

}

.img-featured-container .description-container p {

font-weight: 300;

margin-bottom: 0;

}

.img-featured-container:hover .description-container {

opacity: 1;

}

.img-featured-container .description-container .caption {

display: none;

margin-bottom: 10px;

}

.img-featured-container .description-container .likes,

.img-featured-container .description-container .comments {

margin: 0 5px;

58

}

/* load more button */

#btn-instafeed-load {

color: #fff;

background: #26a3ff;

font-size: 16px;

margin: 20px auto;

padding: 8px 40px;

display: block;

border: none;

}

/* media queries */

@media screen and (min-width:768px) {

.img-featured-container .description-container .caption {

display: block;

}

div#instafeed-gallery-feed{

width: 300px;

margin-left: 0px;

float: right;

margin-bottom: 10px;

}

#btn-instafeed-load {

margin-left: 135px;

}

.col-md-4 {

overflow-y: scroll;

overflow-x: hidden;

height: 450px;

}

.footer{

bottom:0px;

}

</style>

<?=br(3)?>

src="//www.youtube.com/embed/videoseries?list=UUUbXWejbVWK_vGVO2kNV2VQ" frameborder="0"

allowfullscreen></iframe>

</div>

</div>

var galleryFeed = new Instafeed({

get: 'user',

userId: 'YOUR_ID',

accessToken: "YOUR_TOKEN",

//resolution: "standard_resolution",

useHttp: "true",

limit: '6',

//template: '<div class="col-md-4"><a href="{{image}}"><div class="img-featured-

container"><div class="img-backdrop"></div><div class="description-container"><p

class="caption">{{caption}}</p><span class="likes"><i class="icon ion-heart"></i>

{{likes}}</span><span class="comments"><i class="icon ion-chatbubble"></i>

{{comments}}</span></div><img src="{{image}}" class="img-responsive"></div></a></div>',

target: "instafeed-gallery-feed",

after: function() {

// disable button if no more results to load

if (!this.hasNext()) {

btnInstafeedLoad.setAttribute('disabled', 'disabled');

}

},

});

59

galleryFeed.run();

var btnInstafeedLoad = document.getElementById("btn-instafeed-load");

btnInstafeedLoad.addEventListener("click", function() {

galleryFeed.next()

});

</script>

</div>

<?php

$this->load->view('demo/footer'); ?>

home.php

<?php

$this->load->view('demo/header');

?>

<?php

$carousel = count($array_emp);

for( $i = $carousel; $i>0; $i-- ) {

echo '<li data-target="#myCarousel" data-slide-to="'.$i.'"></li>';

}

?>

</ol>

<?php

if(empty($array_emp)){

echo "<h3>Belum Ada Gambarnya Coy!!</h3>";

}else{

foreach($array_emp as $d):

$upath=base_url().'uploads/'.$d->nm_gbr;

$tag="'";

echo '<div class="item">';

echo '<div class="fill" style="background-image:url('.$tag.$upath.$tag.');"></div>';

echo '<div class="carousel-caption">';

echo '<h4>'.$d->ket_gbr.'</h4>';

echo '</div>';

endforeach;

}

?>

</div>

</a>

</a>

</header>

$(".carousel .item").first().addClass("active");

$('.carousel').carousel({

interval: 5000 //changes the speed

})

</script>