LAPORAN KERJA PRAKTEK

WEB PROFIL WISATA TUBING GENDING INDAH MAGELANG

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

LAPORAN KERJA PRAKTEK

WEB PROFIL WISATA TUBING GENDING INDAH MAGELANG

MENGGUNAKAN CODEIGNITER

Diajukan untuk memenuhi syarat menempuh Skripsi 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

iii

PERNYATAAN

Dengan ini saya menyatakan bahwa Laporan Kerja Praktek ini tidak terdapat

karya yang pernah diajukan untuk memperoleh gelar Kesarjanaan disuatu Perguruan

Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau pendapat yang

pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara tertulis diacu

dalam naskah ini dan disebutkan dalam daftar pustaka.

Yogyakarta, 9 Januari 2018

Wawan Chahyo Nugroho

NIM. 12131294

HALAMAN MOTO

“Janganlah engkau rendahkan cita-citamu, sesungguhnya aku tidak melihat orang

yang lebih malas dari orang yang rendah cita-citanya.”

- Umar bin Khattaab -

KATA PENGANTAR

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

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

yang berjudul “Web Profil Wisata Tubing Gending Indah Magelang 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 Andri Syafrianto, S.Kom., M.Cs. selaku dosen pembimbing Kerja

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

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

penulis selama menyusun Laporan Kerja Praktek ini.

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

penulis, dan umumnya bagi para pembaca.

Yogyakarta, 9 Januari 2018

Penulis

vii

DAFTAR ISI

Halaman

HALAMAN PERSETUJUAN .................................... Error! Bookmark not defined.

HALAMAN PENGESAHAN ..................................... Error! Bookmark not defined.

PERNYATAAN ........................................................................................................... iv

HALAMAN MOTO ..................................................................................................... v

KATA PENGANTAR ................................................................................................. vi

DAFTAR ISI ............................................................................................................... vii

DAFTAR TABEL ........................................................................................................ ix

DAFTAR GAMBAR .................................................................................................... x

INTISARI .................................................................................................................... xii

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

1.1 Latar Belakang Masalah .......................................................................................... 1

1.2 Rumusan Masalah ................................................................................................... 2

1.3 Tujuan Penelitian .................................................................................................... 2

1.4 Manfaat Penelitian .................................................................................................. 2

1.5 Metodologi Penelitian ............................................................................................. 2

1.5.1 Metode Pengumpulan Data.................................................................................................. 2

1.5.2 Metode Perancangan Sistem ................................................................................................ 3

1.6 Sistematika Penulisan ............................................................................................. 4

BAB II TINJAUAN PUSTAKA ................................................................................... 5

BAB III LANDASAN TEORI ...................................................................................... 7

3.1 Internet .................................................................................................................... 7

3.2 Website .................................................................................................................... 8

3.3 HTML ..................................................................................................................... 8

3.4 CSS .......................................................................................................................... 8

3.5 PHP ......................................................................................................................... 9

3.6 Javascript ................................................................................................................. 9

3.7 Wampserver ............................................................................................................ 9

3.8 Web Browser ........................................................................................................... 9

3.9 CodeIgniter .............................................................................................................. 9

3.9.1 Model .................................................................................................................................. 10

3.9.2 View .................................................................................................................................... 11

3.9.3 Controller ............................................................................................................................ 11

3.10 Bootstrap ............................................................................................................. 11

3.11 MySQL ................................................................................................................ 12

3.12 Text Editor .......................................................................................................... 12

3.13 Notepad++ ........................................................................................................... 13

3.14 Basis Data ........................................................................................................... 13

3.15 Perancangan Basis Data ...................................................................................... 13

3.15.1 Teknik Normalisasi ............................................................................................................ 14

3.15.2 Relasi Antar Tabel (Entity Relationship) ............................................................................ 15

3.16 Kamus Data ......................................................................................................... 15

3.17 Diagram Alir Data (DAD) .................................................................................. 16

BAB IV RANCANGAN PENELITIAN .................................................................... 18

viii

4.1 Diagram Alir Data (DAD) .................................................................................... 18

4.1.1 Diagram Konteks ................................................................................................................. 19

4.1.2 Diagram Alir Data (DAD) Level 0 ......................................................................................... 20

4.1.3 Diagram Alir Data (DAD) Level 1 Proses Olah Data ............................................................. 21

4.2 Rancangan Basis Data ........................................................................................... 21

4.2.1 Bentuk Tidak Normal .......................................................................................................... 22

4.2.2 Bentuk Normal Pertama (1NF) ........................................................................................... 22

4.2.3 Bentuk Normal Kedua (2NF) ............................................................................................... 23

4.2.4 Relasi Antar Tabel ............................................................................................................... 24

4.2.5 Kamus Data Tabel ............................................................................................................... 25

4.3 Antarmuka ............................................................................................................. 29

4.3.1 Panel Publik ........................................................................................................................ 29

4.3.2 Panel Admin ........................................................................................................................ 32

BAB V HASIL PENELITIAN DAN PEMBAHASAN ............................................. 36

5.1 Panel Publik .......................................................................................................... 36

5.1.1 Home .................................................................................................................................. 36

5.1.2 About .................................................................................................................................. 36

5.1.3 Paket ................................................................................................................................... 37

5.1.4 Booking ............................................................................................................................... 37

5.1.5 Agenda ................................................................................................................................ 38

5.1.6 Galeri .................................................................................................................................. 38

5.1.7 Blog ..................................................................................................................................... 39

5.1.8 Contact................................................................................................................................ 40

5.2 Panel Admin .......................................................................................................... 40

5.2.1 Dashboard........................................................................................................................... 40

5.2.2 Member .............................................................................................................................. 41

5.2.3 Slider ................................................................................................................................... 42

5.2.4 Artikel ................................................................................................................................. 43

5.2.5 Harga Paket ......................................................................................................................... 44

5.2.6 Moderasi ............................................................................................................................. 45

5.2.7 Inbox ................................................................................................................................... 45

5.2.8 Login ................................................................................................................................... 46

5.2.9 Logout ................................................................................................................................. 46

BAB Vi PENUTUP .................................................................................................... 47

6.1 Kesimpulan ........................................................................................................... 47

6.2 Saran ...................................................................................................................... 47

DAFTAR PUSTAKA ................................................................................................. 48

DAFTAR TABEL

Halaman

Tabel 2.1 Tinjauan pustaka ........................................................................................... 6

Tabel 3.1 Kelebihan dan kekurangan MySQL ............................................................ 12

Tabel 3.2 Simbol DAD ............................................................................................... 16

Tabel 4.1 Hubungan external entities dengan I/O ....................................................... 18

Tabel 4.2 Kamus data tabel artikel .............................................................................. 25

Tabel 4.3 Kamus data tabel paket ............................................................................... 26

Tabel 4.4 Kamus data tabel booking ........................................................................... 26

Tabel 4.5 Kamus data tabel slider ............................................................................... 26

Tabel 4.6 Kamus data tabel inbox ............................................................................... 27

Tabel 4.7 Kamus data tabel login ................................................................................ 27

Tabel 4.8 Kamus data tabel groups ............................................................................. 27

Tabel 4.9 Kamus data tabel groups ............................................................................. 28

Tabel 4.10 Kamus data tabel users .............................................................................. 28

DAFTAR GAMBAR

Halaman

Gambar 1.1 Metode waterfall ....................................................................................... 3

Gambar 3.1 Skenario konsep MVC ............................................................................ 10

Gambar 3.2 One to One Relationship ......................................................................... 15

Gambar 3.3 One to Many Relationship ...................................................................... 15

Gambar 3.4 Many to Many Relationship .................................................................... 15

Gambar 4.1 Diagram konteks ..................................................................................... 19

Gambar 4.2 DAD level 0 ............................................................................................ 20

Gambar 4.3 DAD level 1 proses olah data .................................................................. 21

Gambar 4.4 Bentuk tidak normal ................................................................................ 22

Gambar 4.5 Bentuk normal pertama ........................................................................... 23

Gambar 4.6 Bentuk normal kedua .............................................................................. 24

Gambar 4.7 Bentuk relasi antar tabel .......................................................................... 25

Gambar 4.8 Menu utama panel publik ........................................................................ 29

Gambar 4.9 Desain antarmuka home .......................................................................... 30

Gambar 4.10 Desain antarmuka about ........................................................................ 30

Gambar 4.11 Desain antarmuka paket ........................................................................ 30

Gambar 4.12 Desain antarmuka booking .................................................................... 31

Gambar 4.13 Desain antarmuka agenda...................................................................... 31

Gambar 4.14 Desain antarmuka galeri ........................................................................ 31

Gambar 4.15 Desain antarmuka contact ..................................................................... 32

Gambar 4.16 Menu utama panel admin ...................................................................... 32

Gambar 4.17 Desain antarmuka login ......................................................................... 33

Gambar 4.18 Desain antarmuka dokumentasi ............................................................ 33

Gambar 4.19 Desain antarmuka member .................................................................... 34

Gambar 4.20 Desain antarmuka slider ........................................................................ 34

Gambar 4.21 Desain antarmuka artikel ....................................................................... 34

Gambar 4.22 Desain antarmuka harga paket .............................................................. 35

Gambar 4.23 Desain antarmuka moderasi .................................................................. 35

Gambar 4.24 Desain antarmuka inbox ........................................................................ 35

Gambar 5.1 Antarmuka publik home .......................................................................... 36

Gambar 5.2 Antarmuka publik about .......................................................................... 37

Gambar 5.3 Antarmuka publik paket .......................................................................... 37

Gambar 5.4 Antarmuka publik booking...................................................................... 38

Gambar 5.5 Antarmuka publik agenda ....................................................................... 38

Gambar 5.6 Antarmuka publik galeri.......................................................................... 39

Gambar 5.7 Antarmuka publik blog............................................................................ 39

Gambar 5.8 Antarmuka publik contact ....................................................................... 40

Gambar 5.9 Antarmuka admin dashboard .................................................................. 41

Gambar 5.10 Hak akses selain level admin ................................................................ 41

Gambar 5.11 Antarmuka admin member .................................................................... 42

Gambar 5.12 Antarmuka admin slider ........................................................................ 42

Gambar 5.13 Antarmuka admin artikel ....................................................................... 44

Gambar 5.14 Antarmuka admin harga paket .............................................................. 44

Gambar 5.15 Antarmuka admin moderasi .................................................................. 45

Gambar 5.16 Antarmuka admin inbox ........................................................................ 46

Gambar 5.17 Antarmuka admin login ......................................................................... 46

xii

INTISARI

WEB PROFIL WISATA TUBING GENDING INDAH MAGELANG

MENGGUNAKAN CODEIGNITER

Oleh

WAWAN CHAHYO NUGROHO

12131294

Wisata Tubing Gending Indah (WTGI) merupakan obyek wisata yang

berlokasi di Magelang dengan segala potensi yang dimiliki, maka sangat perlu untuk

memperkenalkan potensi tersebut kepada masyarkat secara luas, disamping itu juga

untuk melengkapi daftar destinasi wisata kabupaten Magelang. 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 dan wawancara, 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 WTGI.

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 WTGI 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 paket dan halaman public yang

berisi halaman slider, halaman about, halaman paket, halaman reservasi atau booking,

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

WTGI dikenal di internet dan tidak hanya sebatas instagram.

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

wisata

BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Penggunaan website sebagai kios informasi dianggap memberi pengaruh

besar dalam pengembangan sebuah perusahaan atau organisasi yang biasa lebih

dikenal dengan company profile. Dengan adanya company profile ini, maka

pelanggan, investor, bahkan konsumen (visitor) dapat mengetahui sebuah

perusahaan atau organisasi dengan lebih efektif dan efisien (Dr. Ir. Jarot S.Suroso,

M.Eng, Skripsi S1, BINUS University, 2015: 1).

Company profile memiliki peranan cukup penting bagi sebuah perusahaan

yang melakukan business to business karena dapat mempresentasikan visi dan

misi perusahaan atau apa yang ingin ditawarkan kepada konsumen. Selain itu

manfaat lain dari company profile sebagai sarana presentasi adalah dapat

mempersingkat pertemuan sehingga klien tidak perlu bertanya secara detail

tentang profil, visi, dan misi perusahaan secara langsung (Khurriyatur, Rosyida,

Thesis, STIKOM Surabaya, 2014: 1).

Company profile merupakan pencitraan dari profesionalitas sebuah

perusahaan yang dapat digunakan sebagai marketing tool yang efektif karena

terdapat unsur visual berupa gambar dan teks, terlebih lagi jika ditambahkan unsur

multimedia yang lain akan membuat desain company profile terlihat lebih menarik

dan dapat membuat klien terkesan. Company profile yang kurang menarik akan

menimbulkan ketidakpercayaan konsumen terhadap suatu perusahaan terutama

penyedia jasa (Khurriyatur Rosyida, Thesis, STIKOM Surabaya, 2014: 1).

Wisata Tubing Gending Indah (WTGI) merupakan obyek wisata yang

berlokasi di Magelang dengan segala potensi yang dimiliki, maka sangat perlu

untuk memperkenalkan potensi tersebut kepada masyarkat secara luas. Namun

sangat disayangkan karena metode promosi yang digunakan masih sebatas

Instagram, sehingga jangkauannya masih kecil, hanya sebatas pengguna

Instagram.

1.2 Rumusan Masalah

Wisata Tubing Gending Indah (WTGI) yang beralamatkan di Gadungan,

Pasuruhan, Mertoyudan, Magelang, belum memiliki web profil sebagai company

profile. Sejauh ini media promosi yang digunakan masih sebatas Instagram,

sehingga jangkauannya kecil, hanya sebatas pengguna Instagram.

1.3 Tujuan Penelitian

Tujuan dari penelitian ini adalah menyediakan company profil berbasis web

sebagai sarana promosi Wisata Tubing Gending Indah (WTGI), agar bisa

menjangkau masyarakat secara luas.

1.4 Manfaat Penelitian

Manfaat dari penelitian ini adalah:

1. Memperluas jangkauan promosi Wisata Tubing Gending Indah (WTGI).

2. Meningkatkan profesionalitas pengelolaan Wisata Tubing Gending Indah

(WTGI).

3. Meningkatkan popularitas Wisata Tubing Gending Indah (WTGI).

4. Memudahkan pengelola dalam mempromosikan dan memperkenalkan

potensi-potensi yang dimilik Wisata Tubing Gending Indah (WTGI).

1.5 Metodologi Penelitian

Dalam membuat aplikasi ini, metodologi yang digunakan adalah

pengumpulan data dan perancangan sistem.

1.5.1 Metode Pengumpulan Data

Dalam melakukan penelitian ini penulis mengambil data dengan

menggunakan 2 (dua) metode sebagai berikut.

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

dilapangan atau obyek penelitian.

2. Wawancara, yaitu mengadakan tanya jawab kepada petugas atau panitia di

WTGI Magelang.

1.5.2 Metode Perancangan Sistem

Dalam mengembangkan aplikasi ini, metode yang digunakan adalah air

terjun (waterfall). “Waterfal adalah metode klasik yang sistematis dan urut”

(Sudarmawan 2007, h. 154).

Gambar 1.1 Metode waterfall

1. Analisis Syarat dan Ketentuan (Requirements definition). Mengumpulkan

apa yang dibutuhkan secara lengkap untuk kemudian dianalisis guna

mendefinisikan kebutuhan yang harus dipenuhi oleh program yang akan

dibangun. Fase ini harus dikerjakan secara lengkap untuk bisa menghasilkan

desain yang lengkap.

2. Sistem dan Desain Perangkat Lunak (System and software design). Setelah

apa yang dibutuhkan selesai dikumpulkan dan sudah lengkap maka desain

kemudian dikerjakan.

3. Implementasi dan Pengujian Unit (Implementation and unit testing). 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 (Integration and system testing). Penyatuan

unit-unit program untuk kemudian diuji secara keseluruhan (system testing).

5. Operasi dan Pemeliharaan (Operation and maintenance). Mengoperasikan

program di lingkungannya dan melakukan pemeliharaan, seperti

penyesuaian atau perubahan untuk adaptasi dengan situasi yang sebenarnya.

1.6 Sistematika Penulisan

Untuk mempermudah dalam pengerjaan, maka susunan penulisan laporan

dibuat sebagaimana berikut.

BAB I

PENDAHULUAN.

Berisi latar belakang masalah, rumusan masalah, tujuan

penelitian, manfaat penelitian, metode penelitian, jadwal

penelitian dan sistematika penulisan.

BAB II

TINJAUAN PUSTAKA.

Berisi narasumber dan kutipan beberapa kalimat yang

mendukung penelitian ini.

BAB III

LANDASAN TEORI.

Beisi penjelasan atau keterangan yang dipakai dalam

membuat sistem aplikasi ini.

BAB IV

RANCANGAN PENELITIAN.

Berisi penjelasan model perancangan yang akan digunakan

dalam sistem aplikasi ini.

BAB V

HASIL PENELITIAN DAN PEMBAHASAN.

Beisi implementasi sistem aplikasi yang telah berhasil

dibuat dan diuji.

BAB VI

KESIMPULAN DAN SARAN.

Berisi kesimpulan dari keseluruhan sistem palikasi yang

dibuat.

BAB II

TINJAUAN PUSTAKA

Zaman, Asror, Azis, Daniswari, Suryani (2017), Teknik Informatika,

STMIK El Rahma Yogyakarta. Dengan judul WEB PROFIL SMP

MUHAMMADIYAH 2 BAMBANGLIPURO DENGAN FRAMEWORK

LARAVEL. Manfaat dari pembangunan website ini pihak sekolah dapat

memberikan informasi-informasi yang berhubungan dengan Sekolah Menengah

Pertama Muhammadiyah 2 Bambanglipuro kepada masyarakat pada umumnya

maupun warga sekolah pada khususnya secara efektif dan efisien dapat diakses

dimana, kapan dan oleh siapa saja.

Wisata (2016), Manajemen Informatika, STMIK El Rahma Yogyakarta.

Dengan judul PEMBUATAN WEB COMPANY PROFILE PADA PT VIVA

VICTORY PROPERTI yang dapat meningkatkan interaksi masyarakat secara

umum dalam mencari informasi terkait PT. Viva Victory Property.

Putri, Prasetyo, Adytia (2014), Sistem Informasi, Fakultas Rekayasa

Industri, Universitas Telkom. Dengan judul MEMBANGUN WEB PORTAL

PARIWISATA “GOTRIP” MENGGUNAKAN METODE WATERFALL DAN

FRAMEWORK CODEIGNITER guna membantu wisatawan dalam

merencanakan perjalanan wisata yang tergabung di portal Pasaramai.

Dari penjelasan di atas dapat diringkas ke dalam Tabel 2.1 Tinjauan

pustaka.

Tabel 2.1 Tinjauan pustaka

No.

Nama

Judul

Tahun

Hasil

Zaman, Asror,

Azis,

Daniswari,

Suryani

WEB PROFIL SMP

MUHAMMADIYAH

BAMBANGLIPURO

DENGAN

FRAMEWORK

LARAVEL

2017

Warga sekolah dan

masyarakat secara

umum menjadi lebih

mudah dalam mencari

mengakses informasi

terkait SMP

Muhammadiyah 2

Bambanglipuro secara

efektif dan efisien.

Wisata

PEMBUATAN WEB

COMPANY

PROFILE PADA PT

VIVA VICTORY

PROPERTI

2016

Masyarakat secara

umum lebih mudah

dalam mencari

informasi terkait PT.

Viva Victory

Property.

Putri,

Prasetyo,

Adytia

MEMBANGUN

WEB PORTAL

PARIWISATA

“GOTRIP”

MENGGUNAKAN

METODE

WATERFALL DAN

FRAMEWORK

CODEIGNITER

2014

Para wisatawan lebih

mudah dalam

merencanakan

perjalanan wisata

yang tergabung di

portal Pasaramai.

BAB III

LANDASAN TEORI

3.1 Internet

Menurut Ahmadi dan Hermawan (2013) internet adalah komunikasi

jaringan global yang menghubungkan seluruh komputer di dunia meskipun

berbeda sistem operasi dan mesin.

Internet merupakan jaringan komputer yang dibentuk oleh Departemen

Pertahanan Amerika Serikat pada tahun 1969, melalui proyek ARPA yang disebut

ARPANET (Advanced Research Project Agency Network), dimana mereka

mendemonstrasikan bagaimana penggunaan hardware dan software komputer

yang berbasis UNIX, dengan menggunakan proyek tersebut kita bisa melakukan

komunikasi dalam jarak yang tidak terhingga melalui saluran telepon.

Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar

informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan

menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai

Transmission Control Protocol/Internet Protocol (TCP/IP).

Tujuan awal dibangunnya proyek itu adalah untuk keperluan militer. Pada

saat itu Departemen Pertahanan Amerika Serikat (US Departement of Defense)

membuat sistem jaringan komputer yang tersebar dengan menghubungkan

komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan

nuklir dan untuk menghindari terjadinya informasi terpusat yang apabila terjadi

perang, maka dapat dengan mudah dihancurkan.

Pada mulanya ARPANET hanya menghubungkan 4 situs saja yaitu Stanford

Research Institute, University of California, Santa Barbara, University of Utah, di

mana mereka membentuk satu jaringan terpadu pada tahun 1969, dan secara

umum ARPANET diperkenalkan pada bulan Oktober 1972. Tidak lama kemudian

proyek ini berkembang pesat di seluruh daerah, dan semua universitas di negara

tersebut ingin bergabung, sehingga ARPANET kesulitan untuk mengaturnya, oleh

sebab itu ARPANET dipecah menjadi dua, yaitu “MILNET” untuk keperluan

militer dan “ARPANET” baru yang lebih kecil untuk keperluan non-militer

seperti, universitas-universitas. Gabungan kedua jaringan akhirnya dikenal dengan

nama DARPA Internet yang kemudian disederhanakan menjadi Internet.

3.2 Website

Website atau disingkat web, dapat diartikan sekumpulan halaman yang

terdiri dari beberapa laman yang berisi informasi dalam bentuk data digital baik

berupa text, gambar, video, audio, dan animasi lainnya yang disediakan melalui

jalur koneksi internet. Lebih jelasnya, website merupakan halaman-halaman yang

berisi informasi yang ditampilkan oleh browser seperti Mozilla Firefox, Google

Chrome atau yang lainnya (Abdullah, 2015).

3.3 HTML

Menurut Abdullah (2015) HTML singkatan dari Hyper Text Markup

Language, yaitu skrip yang berupa tag-tag untuk membuat dan mengatur struktur

website. Beberapa tugas utama HTML dalam membangun website diantaranya

sebagai berikut:

a. Menentukan layout website.

b. Memformat text dasar seperti pengaturan paragraf, dan format font.

c. Membuat list.

d. Membuat tabel.

e. Menyisipkan gambar, video, dan audio.

f. Membuat link.

g. Membuat formulir.

3.4 CSS

CSS singkatan dari Cascading Style Sheets, yaitu skrip yang digunakan

untuk mengatur desain website. Walaupun HTML mempunyai kemampuan untuk

mengatur tampilan website, namun kemampuannya sangat terbatas. Fungsi CSS

adalah memberikan pengaturan yang lebih lengkap agar struktur website yang

digunakan dengan HTML terlihat lebih rapi dan indah (Abdullah, 2015).

3.5 PHP

PHP singkatan dari Hypertext Preprocessor yang merupakan server-sider

programming, yaitu bahasa pemrograman yang diproses di sisi server. Fungsi

utama PHP dalam membangun website adalah untuk melakukan pengolahan data

pada database. Data website akan dimasukkan ke database, diedit, dihapus, dan

ditampilkan pada website yang diatur oleh PHP (Abdullah, 2015).

3.6 Javascript

Berbeda dengan php yang diproses di sisi server, javascript diproses pada

komputer client. Pemrosesannya yang dilakukan di komputer client, membuat

javascript lebih interaktif dibanding php. Peran javascript dalam membuat website

adalah memberikan efek animasi yang menarik dan interaktifitas dalam

penanganan event yang dilakukan oleh pengguna website (Abdullah, 2015).

3.7 Wampserver

Mengapa Wampserver? Karena software simulasi server local ini bersifat

freesource dan sangat lengkap fiturnya. Aplikasi ini dapat didownload di

http://www.wampserver.com/en/ (Wiswakarma, 2010).

3.8 Web Browser

Web browser digunakan untuk menampilkan hasil website yang telah

dibuat. Web browser yang paling sering digunakan diantaranya Mozilla Firefox,

Google Chrome, dan Safari. Saya sarankan untuk menggunakan lebih dari satu

web browser untuk memastikan desain website dapat tampil sempurna di berbagai

web browser (Abdullah, 2015).

3.9 CodeIgniter

CodeIgniter adalah sebuah framework untuk web yang dibuat dalam format

PHP, yang bersifat open source digunakan untuk membangun aplikasi PHP

dinamis.

Tujuan utama pengembangan CodeIgniter adalah untuk membantu

developer dalam membuat dan mengembangkan aplikasi berbasis web dengan

lebih cepat, karena tidak perlu memulainya dari nol dalam menulis program.

CodeIgniter menyediakan berbagai macam fitur yang handal dalam

membuat aplikasi web kompleks, dalam pengembangan, CodeIgniter sendiri

dibangun dengan konsep MVC (Model, View, Controller) struktur kode yang

dihasilkan menjadi lebih terstruktur dan memiliki standar yang jelas, adapun

komponen-komponen MVC diantaranya (Wiswakarma, 2010).

Gambar 3.1 Skenario konsep MVC

3.9.1 Model

Model merupakan struktur data, secara spesifikasi class model mengandung

fungsi kode yang akan membantu dalam segala proses yang berhubungan dengan

database seperti memasukkan, mengedit, mendapatkan dan menghapus data dalam

database.

3.9.2 View

View merupakan informasi yang disampaikan ke pengguna, sebuah View

biasanya berupa halaman web, tetapi dalam CodeIgniter bisa berupa sebuah

fragment halaman seperti header dan footer, view bisa juga berupa RSS atau

sejenis halaman web lainnya.

3.9.3 Controller

Controller bertindak sebagai perantara antara model dan view dan semua

sumber yang dibutuhkan, di dalam controller ini terdapat class-class dan fungsi-

fungsi yang memproses permintaan dari View ke dalam struktur data di dalam

Model.

Controller juga tidak boleh berisi kode untuk mengakses basis data, karena

tugas mengakses basis data sudah menjadi tanggung jawab Model, tugas

Controller adalah menyediakan berbagai variabel yang akan ditampilkan di View,

memanggil model untuk melakukan akses ke basis data, menyediakan penanganan

kesalahan (error handling), mengerjakan proses logika dari aplikasi serta

melakukan validasi atau cek terhadap input.

3.10 Bootstrap

Bootstrap merupakan salah satu framework CSS yang sangat popular di

kalangan pecinta pemrograman website. Dengan bootstrap, proses desain website

tidak dibuat dari nol, sehingga proses desain website lebih cepat dan mudah.

Sejak bootstrap dilengkapi dengan fitur responsive pada tahun 2012,

bootstrap semakin banyak digemari dan semakin banyak ditemui website di

internet yang menggunakan bootstrap dalam desainnya. Dengan fitur responsive

yang disediakan bootstrap, maka website dapat dilihat dala berbagai ukuran layar

seperti smartphone atau tablet dengan desain tetap teratur dan mengikuti ukuran

layar (Abdullah, 2015).

3.11 MySQL

Menurut Raharjo (2011) MySQL merupakan Relational Database

Management System (RDBMS) atau (server database) yang mengelola database

dengan cepat menampung dalam jumlah sangat besar dan dapat diakses oleh

banyak user.

Menurut Wahana Komputer (2011) MySQL adalah database server open

source yang cukup popular keberadaannya, dengan berbagai keunggulan yang

dimiliki, membuat software database ini banyak digunakan oleh praktisi untuk

membangun suatu project. Adanya API (Application Programming Interface)

yang dimiliki oleh MySQL memungkinkan berbagai macam aplikasi komputer

yang ditulis dengan berbagai bahasa pemrograman dapat mengakses basis data

MySQL.

Menurut Raharjo (2011) beberapa keunggulan dan kekurangan MySQL

selengkapnya dijelaskan pada Tabel 3.1 Kelebihan dan kekurangan MySQL.

Tabel 3.1 Kelebihan dan kekurangan MySQL

No.

Kelebihan

Kekurangan

Mampu menangani jutaan user

dalam kurun waktu yang

bersamaan.

MySQL memiliki overhead koneksi

rendah. Karakteristik inilah yang

menjadikan MySQL harus bekerja

dengan aplikasi CGI, dimana setiap

request script akan melakukan

koneksi, mengirimkan satu atau

lebih perintah SQL, lalu

memutuskan koneksi lagi.

Mampu menampung lebih dari

50.000.000 record.

Sangat cepat mengeksekusi perintah

sql.

Memiliki user privilage system yang

mudah dan efisien.

MySQL tersedia untuk berbagai

platform, baik Linux, Windows,

Mac, maupun Unix.

3.12 Text Editor

Text editor digunakan untuk menuliskan skrip HTML, CSS, PHP, dan

Javascript. Ada banyak text editor yang dapat digunakan diantaranya Notepad,

Notepad++, Adobe Dreamweaver, dan sebagainya (Abdullah, 2015).

3.13 Notepad++

Notepad++ adalah salau satu code editor gratis yang dapat didownload di

http://sourceforge.net/projects/notepad-plus/files/. Alasan menggunakan

Notepad++, karena interfacenya sangat sederhana dan ukuran dari softwarenya

juga kecil, sehingga ringan berjalan di sistem operasi Windows, selain itu juga

nyaman digunakan.

3.14 Basis Data

“A database may be defined as a collection of interrelated data stored

together without harmful or unnecessary redudancy to serve one or more

applications in an optional fashion; the data are stored so that they are

independent of programs with use the data; a common and controlled approach

its used in adding new data and in modifying and retriving existing data within

the database”.

Dengan memahami definisi di atas maka istilah basis data dapat dipahami

sebagai suatu kumpulan data terhubung (interrelated data) yang disimpan secara

bersama-sama pada suatu media, tanpa mengatap satu sama lain atau tidak perlu

suatu kerangkapan data, kalaupun ada maka kerangkapan data tersebut harus

seminimal mungkin dan terkontrol (controlled redundancy), data disimpan

dengan cara-cara tertentu sehingga mudah digunakan / atau ditampilkan kembali;

data dapat digunakan oleh satu atau lebih program-program aplikasi secara

optimal; data disimpan tanpa mengalami ketergantungan dengan program yang

akan menggunakannya; data disimpan sedemikian rupa sehingga proses

penambahan, pengambilan, dan modifikasi data dapat dilakukan dengan mudah

dan terkontrol (Sutanta, 2011).

3.15 Perancangan Basis Data

Menurut Nugroho (2014) basis data adalah kumpulan data, yang dapat

digambarkan sebagai aktivitas dari satu atau lebih organisasi yang berelasi.

Manajemen sistem basis data (database management system – DBMS) adalah

perangkat lunak yang didesain untuk membantu dalam hal pemeliharaan dan

utilitas kumpulan data dalam jumlah besar.

Tujuan penggunaan basis data adalah untuk menangani masalah seperti.

a. Kecepatan dan kemudahan (speed)

b. Efisiensi ruang penyimpanan (space)

c. Ketersediaan (accuracy)

d. Kelengkapan (availability)

e. Keamanan (completeness)

f. Kebersamaan pemakai (shareability).

3.15.1 Teknik Normalisasi

Menurut Nugroho (2014) normalisasi merupakan suatu proses untuk

mengubah suatu tabel yang memiliki masalah tertentu ke dalam dua buah tabel

atau lebih yang tidak lagi memiliki masalah tersebut.

Dalam proses normalisasi, diperlukan kunci relasi untuk pengaksesan data

dari dalam relasi atau menyusun relasi antar relasi. Kunci relasi merupakan satu

atau gabungan beberapa atribut yang bersifat unik yang dapat digunakan untuk

mengidentifikasi setiap record dalam relasi.

Dalam proses normalisasi juga membutuhkan beberapa tahap sebelum

diimplementasikan dalam program. Tahapan tersebut adalah.

a. Bentuk Tidak Normal (Unormalized Form), yaitu bentuk dimana semua

data dikumpulkan apa adanya tanpa mengikuti aturan-aturan tertentu. Bisa

jadi datanya tidak lengkap dan/atau duplikasi data.

b. Bentuk Normal Pertama (First Normal Form), yaitu bentuk dimana data

yang dikumpulkan menjadi satu field yang sifatnya tidak akan berulang

dan tiap field hanya mempunyai satu pengertian.

c. Bentuk Normal Kedua (Seond Normal Form), yaitu bentuk yang telah

memenuhi kriteria bentuk normal pertama dan field bukan kunci

tergantung secara fungsi pada kunci primer.

3.15.2 Relasi Antar Tabel (Entity Relationship)

Menurut Nugroho (2014) relasional adalah bentuk hubungan antara

beberapa data yang dikelompokan dalam sebuah tabel, bentuk hubungan ini

sangat dibutuhkan untuk memperoleh informasi dan dapat mendokumentasikan

berbagai informasi. Relasional merupakan bentuk hubungan antara dua tabel atau

lebih, yang salah satu tabel anggotanya akan memiliki bentuk ketergantungan

yang erat sehingga tidak dapat dipisahkan sendiri-sendiri. Hubungan logis relasi

antar tabel diantaranya.

a. One to One Relationship, yaitu hubungan antara file pertama dengan file

kedua adalah satu berbanding satu.

Gambar 3.2 One to One Relationship

b. One to Many Relationship, yaitu hubungan antara file pertama dengan file

kedua adalah satu berbanding banyak.

Gambar 3.3 One to Many Relationship

c. Many to Many Relationship, yaitu hubungan antara file pertama dengan

file kedua adalah banyak berbanding banyak.

Gambar 3.4 Many to Many Relationship

3.16 Kamus Data

Menurut Nugroho (2014) Kamus Data atau Data Dictionary atau Systems

Data Dictionary adalah katalog fakta tentang data dan kebutuhan-kebutuhan

informasi dari suatu sistem informasi. Dengan menggunakan kamus data, analis

sistem dapat mendefinisikan data yang mengalir di sistem dengan lengkap. Kamus

data dibuat pada tahap analisis sistem dan digunakan baik pada tahap analisis

maupun pada tahap perancangan sistem.

Pada tahap analisis, kamus data dapat digunakan sebagai alat komunikasi

antara analis sistem dengan pemakai sistem tentang data yang mengalir di sistem,

yaitu tentang data yang masuk ke sistem dan tentang informasi yang dibutuhkan

oleh pemakai sistem. Pada tahap perancangan sistem, kamus data digunakan

untuk merancang input, merancang laporan-laporan dan database.

3.17 Diagram Alir Data (DAD)

Menurut Nugroho (2014) DAD adalah alat yang digunakan untuk

menggambarkan suatu sistem yang telah ada atau sistem baru yang akan

dikembangkan secara logika tanpa mempertimbangkan lingkungan fisik dimana

data tersebut mengalir atau lingkungan fisik dimana data tersebut akan disimpan.

Simbol-simbol yang sering digunakan dalam DAD dijelaskan pada Tabel

3.3 Simbol DAD.

Tabel 3.2 Simbol DAD

Simbol

Nama

Keterangan

Entity luar (pihak luar)

Merupakan sumber atau

tujuan dari aliran data

dari atau ke sistem. Entity

luar merupakan

lingkungan luar sistem.

Aliran data

Menggambarkan aliran

data dari satu proses ke

proses lainnya.

atau

Proses atau fungsi

Mentransformasikan data

secara umum.

atau

Berkas atau tempat

penyimpanan

Digunakan untuk

menyimpan data atau file.

Pedoman dalam penggambaran DAD.

1. Mengidentifikasi semua kesatuan luar (external entity) yang terlibat dalam

sistem.

2. Mengidentifikasi semua input dan output yang terlibat dengan kesatuan luar.

3. Menggambar diagram konteks, yang berfungsi untuk menggambarkan

sistem pertama kali secara garis besar.

4. Menggambar bagan berjenjang yang menggambarkan semua proses yang

ada di sistem.

5. Menggambar sketsa DAD untuk overview diagram (level 0) berdasarkan

proses di diagram berjenjang.

6. Menggambarkan DAD untuk level-level berikutnya, yaitu level 1 dan

seterusnya untuk tiap-tiap proses yang dipecah-pecah sesuai dengan bagan

berjenjangnya.

Kesalahan yang harus dihindari berkaitan dengan proses yaitu:

1. Proses mempunyai input tetapi tidak menghasilkan output (back hole), ada

data masuk tapi tidak ada data keluar.

2. Proses menghasilkan output tapi tidak pernah menerima input (miracle).

BAB IV

RANCANGAN PENELITIAN

4.1 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 4.1 Hubungan external entities dengan I/O

External entities

Input

Output

Admin

Input data admin

Input data slider

Input data artikel

Input data paket

Input status booking

detail admin

detail slider

detail artikel

detail paket

detail booking

detail kotak masuk

detail invoice

Visitor

Input kotak masuk

Input data booking

daftar agenda

detail paket

detail artikel

detail invoice

4.1.1 Diagram Konteks

Dalam rangka memperlihatkan gambaran umum tentang interaksi sistem

informasi dengan lingkungan yang sudah ditetapkan.

Gambar 4.1 Diagram konteks

4.1.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 4.2 DAD level 0

4.1.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 4.3 DAD level 1 proses olah data

4.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.

4.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 4.4 Bentuk tidak normal

4.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

booking

id_booking

nm_user

cp_user

tgl_booking

group

id_group

name

description

inbox

id_pesan

nama

judul

paket

id_paket

nm_paket

harga

slider

nm_gambar

users

Gambar 4.5 Bentuk normal pertama

4.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.

Gambar 4.6 Bentuk normal kedua

4.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 4.7 Bentuk relasi

antar tabel.

a. * : Kunci primer

b. ** : Kunci sekunder

c. : Hubungan relasi one to many

d. : Hubungan relasi many to one

Gambar 4.7 Bentuk relasi antar tabel

4.2.5 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 WTGI.

a. Kamus Data Tabel Artikel

Nama Tabel : artikel

Kunci Utama : id_artikel

Keterangan : Tabel untuk menyimpan artikel

Tabel 4.2 Kamus data tabel artikel

No.

Nama Field

Tipe Data

Lebar

Keterangan

id_artikel

int

id artikel

label

varchar

label artikel

judul

varchar

judul artikel

isi

longtext

isi artikel

waktu

datetime

waktu publikasi

b. Kamus Data Tabel Paket

Nama Tabel : paket

Kunci Utama : id_paket

Keterangan : Tabel untuk menyimpan data paket

Tabel 4.3 Kamus data tabel paket

No.

Nama Field

Tipe Data

Lebar

Keterangan

id_paket

int

id paket

nm_paket

varchar

nama paket

harga

int

harga paket

c. Kamus Data Tabel Booking

Nama Tabel : booking

Kunci Utama : id_booking

Keterangan : Tabel untuk menyimpan data booking

Tabel 4.4 Kamus data tabel booking

No.

Nama Field

Tipe Data

Lebar

Keterangan

id_booking

int

id booking

nm_user

varchar

nama user

cp_user

int

no. telp/hp user

tgl_booking

varchar

tanggal booking

varchar

email user

paket

int

pilihan paket by id

jml_peserta

int

jumlah peserta

status

varchar

status booking

d. Kamus Data Tabel Slider

Nama Tabel : slider

Kunci Utama : id

Keterangan : Tabel untuk menyimpan gambar slider

Tabel 4.5 Kamus data tabel slider

No.

Nama Field

Tipe Data

Lebar

Keterangan

int

id gambar

nm_gbr

varchar

nama gambar

tipe_gbr

varchar

tipe gamber

ket_gbr

text

keterangan gambar

e. Kamus Data Tabel Inbox

Nama Tabel : inbox

Kunci Utama : id_pesan

Keterangan : Tabel untuk menyimpan pesan inbox

Tabel 4.6 Kamus data tabel inbox

No.

Nama Field

Tipe Data

Lebar

Keterangan

id_pesan

int

id pesan

nama

varchar

nama pengirim

varchar

email pengirim

judul

varchar

judul pesan

pesan

varchar

500

isi pesan

tgl

datetime

tanggal terkirim

f. Kamus Data Tabel Login

Nama Tabel : login_attempts

Kunci Utama : id

Keterangan : Tabel untuk menyimpan upaya login

Tabel 4.7 Kamus data tabel login

No.

Nama Field

Tipe Data

Lebar

Keterangan

int

id admin

ip_address

varchar

ip address admin

varchar

100

password

time

int

waktu login

g. Kamus Data Tabel Groups

Nama Tabel : groups

Kunci Utama : id

Keterangan : Tabel untuk menyimpan data groups

Tabel 4.8 Kamus data tabel groups

No.

Nama Field

Tipe Data

Lebar

Keterangan

mediumint

id groups

name

varchar

nama groups

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 4.9 Kamus data tabel groups

No.

Nama Field

Tipe Data

Lebar

Keterangan

int

id user groups

user_id

int

id user

group_id

mediumint

id groups

i. Kamus Data Tabel Users

Nama Tabel : users

Kunci Utama : id

Keterangan : Tabel untuk menyimpan data users

Tabel 4.10 Kamus data tabel users

No.

Nama Field

Tipe

Data

Lebar

Keterangan

int

id users

ip_address

varchar

ip address

username

varchar

100

username

password

varchar

255

passwrod

salt

varchar

255

tempat enkripsi

varchar

254

activation_code

varchar

kode aktivasi

forgotten_password_code

varchar

kode lupa

password

forgotten_password_time

int

waktu lupa

password

remember_code

varchar

kode pengingat

created_on

int

waktu

pembuatan

last_login

int

waktu terakhir

active

tinyint

status aktif /

tidak

first_name

varchar

nama depan

last_name

varchar

nama belakang

company

varchar

100

nama perusahaan

phone

varchar

no. HP/Telp.

4.3 Antarmuka

Perancangan antarmuka meliputi struktur menu, panel admin dan panel

publik.

4.3.1 Panel Publik

Menu panel publik dijelaskan lebih rinci pada Gambar 4.1 Menu utama

panel publik.

Gambar 4.8 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 WTGI.

2. Paket, untuk menampilkan konten paket wisata yang disediakan oleh WTGI.

3. Booking, untuk menampilkan formulir pemesanan atau booking.

4. Agenda, untuk menampilkan daftar klien terverifikasi beserta jadwal

kegiatannya.

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

WTGI.

6. Blog, untuk menampilkan konten atau artikel blog.

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

dan peta WTGI.

Gambar 4.9 Desain antarmuka home

Gambar 4.10 Desain antarmuka about

Gambar 4.11 Desain antarmuka paket

Gambar 4.12 Desain antarmuka booking

Gambar 4.13 Desain antarmuka agenda

Gambar 4.14 Desain antarmuka galeri

Gambar 4.15 Desain antarmuka contact

4.3.2 Panel Admin

Menu panel admin dijelaskan lebih rinci pada Gambar 4.9 Menu utama

panel admin.

Gambar 4.16 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 WTGI.

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 paket, untuk mengelola jenis dan harga paket.

5. Moderasi, untuk mengelola daftar transaksi booking.

6. Inbox, untuk mengelola pesan masuk dari tamu.

7. Logout, untuk keluar dari panel admin.

Gambar 4.17 Desain antarmuka login

Gambar 4.18 Desain antarmuka dokumentasi

Gambar 4.19 Desain antarmuka member

Gambar 4.20 Desain antarmuka slider

Gambar 4.21 Desain antarmuka artikel

Gambar 4.22 Desain antarmuka harga paket

Gambar 4.23 Desain antarmuka moderasi

Gambar 4.24 Desain antarmuka inbox

BAB V

HASIL PENELITIAN DAN PEMBAHASAN

5.1 Panel Publik

Panel publik merupakan antarmuka pengguna yang berfungsi

menghubungkan antara pengguna (visitor) dengan sistem aplikasi web profil,

menyediakan berbagai macam informasi seputar WTGI yang dapat dikonsumsi

oleh publik, juga menyediakan beberapa formulir yang dapat digunakan untuk

berinteraksi seperti booking, contact, dan komentar di blog.

5.1.1 Home

Antarmuka home menonjolkan gambar-gambar unggulan, dipresentasikan

dalam bentuk slider ukuran penuh, memungkinkan menarik perhatian dan minat

pengguna (visitor) untuk mengunjungi obyek tersebut.

Gambar 5.1 Antarmuka publik home

5.1.2 About

Antarmuka about menonjolkan informasi seputar sejarah berdirinya WTGI,

visi, misi dan struktur organisasinya.

Gambar 5.2 Antarmuka publik about

5.1.3 Paket

Antarmuka paket menonjolkan informasi seputar paket, harga paket, dan

fasilitas yang disediakan. Halaman ini menjadi acuan bagi pengguna (visitor)

dalam menentukan pilihan paket saat booking.

Gambar 5.3 Antarmuka publik paket

5.1.4 Booking

Antarmuka booking menyediakan formulir yang memungkinkan pengguna

(visitor) melakukan reservasi terhadap barang dan jasa yang tersedia, dalam hal

ini adalah paket wisata tubing gending indah magelang.

Gambar 5.4 Antarmuka publik booking

5.1.5 Agenda

Antarmuka agenda menyediakan daftar informasi seputar klien / tamu yang

telah memenuhi kriteria transaksi booking. Informasi tersebut meliputi nama

tamu, hari, tanggal dan waktu booking mereka.

Gambar 5.5 Antarmuka publik agenda

5.1.6 Galeri

Antarmuka galeri menyediakan informasi multimedia seperti playlist video

channel youtube dan koleksi foto instagram milik WTGI. Memperkuat daya tarik

WTGI terhadap pengguna (visitor), memungkinkan WTGI lebih dikenal di mesin

pencari maupun sosial media.

Gambar 5.6 Antarmuka publik galeri

5.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 WTGI lebih luas dalam menjangkau

pengguna (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 WTGI dengan pengguna (visitor).

Gambar 5.7 Antarmuka publik blog

5.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 dan jasa WTGI.

Jumlah karakter pada formulir pesan kami batasi maksimal 500, hal ini

sebagai bentuk antisipasi dan pencegahan terhadap penyalahgunaan seperti spam.

Gambar 5.8 Antarmuka publik contact

5.2 Panel Admin

Panel admin merupakan antarmuka pengguna (administrator) yang

memungkinkan untuk melakukan kontrol dan manajemen terhadap konten web

profil WTGI. Hanya orang-orang dengan kriteria tertentu yang diperbolehkan

masuk ke panel ini.

5.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.

Gambar 5.9 Antarmuka admin dashboard

5.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 5.10 Hak akses selain level admin

Selebihnya tidak ada respon atau akan ditampilkan pesan error jika Anda

memaksa ingin menonaktifkan atau menghapus member tertentu.

Gambar 5.11 Antarmuka admin member

5.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 5.12 Antarmuka admin slider

5.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.

Gambar 5.13 Antarmuka admin artikel

5.2.5 Harga Paket

Adalah menu yang memungkinkan Anda mengatur daftar paket beserta

harganya.

Ketentuan :

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

2. Harga Paket, hanya boleh memasukan angka. Dilarang menggunakan titik(.)

atau koma(,) sebagai tanda pemisah angka.

3. ID Paket, hanya disediakan 10 ID, artinya jumlah paket hanya dibatasi max

10. ID yang sudah digunakan tidak dapat digunakan kembali, dengan kata

lain Anda tidak dapat memilih ID yang sama untuk paket lain.

Gambar 5.14 Antarmuka admin harga paket

5.2.6 Moderasi

Adalah menu yang memungkinkan Anda mengontrol transaksi booking,

mana yang layak dan tidak layak ditindaklanjuti.

Transaksi booking 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.

Gambar 5.15 Antarmuka admin moderasi

5.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 5.16 Antarmuka admin inbox

5.2.8 Login

Antarmuka yang memungkinkan Anda masuk ke panel administrator, hanya

anggota terdaftar yang dapat menggunakan.

Gambar 5.17 Antarmuka admin login

5.2.9 Logout

Adalah menu yang memungkinkan Anda keluar dari panel Administrator.

Pastikan selalu logout jika aktifitas Anda mengelola web dirasa cukup.

BAB VI

PENUTUP

6.1 Kesimpulan

Kesimpulan yang dapat diambil dalam penelitian ini berdasarkan studi kasus

Wisata Tubing Gending Indah Magelang adalah.

1. Wisata Tubing Gending Indah Magelang menjadi memiliki web profil.

2. Jangkauan promosi Wisata Tubing Gending Indah (WTGI) menjadi lebih

luas dengan adanya web profil, karena memiliki kesempatan berpartisipasi

dalam mesin pencari.

3. Meningkatkan profesionalitas pengelolaan Wisata Tubing Gending Indah

(WTGI).

4. Meningkatkan popularitas Wisata Tubing Gending Indah (WTGI).

5. Memudahkan pengelola dalam mempromosikan dan memperkenalkan

potensi-potensi yang dimilik Wisata Tubing Gending Indah (WTGI) kepada

khalayak.

6.2 Saran

Saran yang dapat diberikan peneliti untuk pengembangan aplikasi web

profil mykp v1 ke versi berikutnya adalah.

1. Layout web profil mykp v1 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 mykp v1 bisa dikatakan masih pinjam editor untuk input

artikel yang identik dengan paragraph yang panjang.

DAFTAR PUSTAKA

Abdullah, R., 2015, Web Programming is Easy, PT. Elex Media Komputindo,

Jakarta.

Ahmadi, C., Hermawan, D., 2013, E-Business & E-Commerce, Andi, Yogyakarta.

Asror, M., Azis, RA., Zaman, EASN., Dasniswari, RT., Suryani, 2017, Web Profil

Smp Muhammadiyah 2 Bambanglipuro Dengan Framework Laravel, Laporan

Kerja Praktek, Teknik Informatika, STMIK El Rahma, Yogyakarta.

Haryanto, D., Septiandi, William, Dr. Ir. Suroso, JS. M.Eng., 2015, Analisis dan

Perancangan Sistem Informasi Ikatan Alumni Program Habibie (IABIE)

Berbasis Multimedia, Tesis, Teknik Informatika, BINUS University, Jakarta

Barat.

Herlawati, PPW., 2011, Menggunakan UML, Informatika Bandung, Bandung.

Irnawati, Ekawati, D., Nugroho W., 2014, Pengenalan Dasar Perancangan, Desain

dan Pembuatan Sistem Informasi Rekam Medis pada Klinik Rawat Jalan, CV.

Trans Info Media, Jakarta.

Irsyad M., Slamet S., Susanto A., 2012, Perancangan Website Sekolah Pada

Subsystem User Interface, Jurnal, Sekolah Tinggi Teknologi, Garut.

Khurriyatur, Rosyida, 2013, Perancangan Interaktif Company Profile PT. Simpati

Global Surabaya, Tesis, Teknik Informatika, STIKOM, Surabaya.

Nugraha A., 2010, Cara Mudah Membangun Aplikasi PHP, Mediakita, Jakarta.

Putri, NH., Prasetyo, YA., Adytia, P., 2014, Membangun Web Portal Pariwisata

“GOTRIP” Menggunakan Metode Waterfall dan Framework Codeigniter,

Skripsi, Teknik Informatika, Telkom University.

Rosa SA., Shalahuddin M., 2014, Rekayasa Perangkat Lunak Terstruktur dan

Berorientasi Objek, Informatika, Bandung.

Sutanta, E., 2011, Basis Data dalam Tinjauan Konseptual, CV. Andi Offset,

Yogyakarta.

Wisata, BC., 2017, Pembuatan Web Company Profile Pada Pt Viva Victory Properti,

Laporan Kerja Praktek, Manajemen Informatika, STMIK El Rahma,

Yogyakarta.

Wiswakarma K., 2010, 9 Langkah Menjadi Master Framework CodeIgniter,

Lokomedia, Yogyakarta.