APLIKASI PENDOKUME NTASIAN KEGIATAN PEMER

(1)

LAPORAN PRAKTEK KERJA LAPANGAN

APLIKASI PENDOKUMENTASIAN KEGIATAN PEMERINTAH

DAERAH MELALUI MEDIA CENTER UNTUK MENINGKATKAN

PELAYANAN PUBLIK BAGIAN HUBUNGAN MASYARAKAT

SEKRETARIAT DAERAH KOTA BATU

Oleh:

RIYANTI

1431140043

SHELLA FITRISIA HARIATI

1431140129

SULISTYOWATI

1431140039

PROGRAM STUDI MANAJEMEN INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI

POLITEKNIK NEGERI MALANG

(2)

ii

LAPORAN PRAKTEK KERJA LAPANGAN

APLIKASI PENDOKUMENTASIAN KEGIATAN PEMERINTAH

DAERAH MELALUI MEDIA CENTER UNTUK MENINGKATKAN

PELAYANAN PUBLIK BAGIAN HUBUNGAN MASYARAKAT

SEKRETARIAT DAERAH KOTA BATU

Digunakan Sebagai Syarat Mengikuti Ujian Akhir Diploma III

Politeknik Negeri Malang

Disusun Oleh:

Riyanti

NIM 1431140043

Shella Fitrisia Hariati

NIM 1431140129

Sulistyowati

NIM 1431140039

PROGRAM STUDI MANAJEMEN INFORMATIKA

JURUSAN TEKNOLOGI INFORMASI

POLITEKNIK NEGERI MALANG

(3)

iii

HALAMAN PENGESAHAN

APLIKASI PENDOKUMENTASIAN KEGIATAN PEMERINTAH

DAERAH MELALUI MEDIA CENTER UNTUK MENINGKATKAN

PELAYANAN PUBLIK BAGIAN HUBUNGAN MASYARAKAT

SEKRETARIAT DAERAH KOTA BATU

Oleh:

Riyanti

1431140043

Shella Fitrisia Hariati

1431140129

Sulistyowati

1431140039

Malang,

Mengetahui dan Menyetujui

Ketua Program Studi

Manajemen Informatika

Dosen Pembimbing

Manajemen Informatika

Dr. Eng. Rosa Andrie A, ST., MT.

Pramana Yoga S, S.Kom., MMT.

NIP. 19801010 200501 1 001

NIP. 19880504 201504 1 001

Mengetahui,

Ketua Jurusan Teknologi Informasi

Rudy Ariyanto, ST., MCS

(4)

iv

HALAMAN PENGESAHAN INSTANSI

APLIKASI PENDOKUMENTASIAN KEGIATAN PEMERINTAH

DAERAH MELALUI MEDIA CENTER UNTUK MENINGKATKAN

PELAYANAN PUBLIK BAGIAN HUBUNGAN MASYARAKAT

SEKRETARIAT DAERAH KOTA BATU

Oleh:

Riyanti

1431140043

Shella Fitrisia Hariati

1431140129

Sulistyowati

1431140039

Malang,

Mengetahui dan Menyetujui

Kepala Bagian

Hubungan Masyarakat Setda

Kota Batu

Pembimbing PKL

Dra. Shanti Restuningsari, MM

Prasetyo Bagus Wicaksono, ST

(5)

v

PERNYATAAN KEASLIAN TULISAN

LAPORAN PRAKTIK KERJA LAPANGAN

Kami

menyatakan

dengan

sebenar-benarnya

bahwa

sepanjang

pengetahuan kami, didalam Naskah Laporan Praktek Kerja Lapangan ini tidak

terdapat karya ilmiah yang pernah diajukan oleh orang lain dan tidak terdapat

karya atau pendapat orang lain kecuali yang secara tertulis dikutip dalam naskah

ini dan disebutkan dalam sumber kutipan dan daftar pustaka.

Apabila di kemudian hari terbukti atau dapat dibuktikan bahwa dalam

naskah LAPORAN PRAKTEK KERJA LAPANGAN ini merupakan hasil

jiplakan, maka penulis bersedia menerima sanksi atas perbuatan tersebut.

Malang, Maret 2017

Mahasiswa PKL 1

(6)

vi

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT atas segala rahmat dan

hidayah-Nya sehingga mampu menyelesaikan laporan Praktik Kerja Lapangan ini.

Laporan Praktik Kerja Lapangan ini berjudul “Aplikasi Pendokumentasian

Kegiatan Pemerintah Daerah Melalui Media Center Untuk Meningkatkan

Pelayanan Publik Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu”.

Praktek Kerja Lapangan yang telah penulis laksanakan dengan baik di Bagian

Hubungan Masyarakat Sekretariat Daerah Kota Batu pada tanggal 23 Januari

2017 sampai dengan 18 Februari 2017.

Laporan Praktik Kerja Lapangan ini merupakan tugas yang harus

diselesaikan oleh mahasiswa program Diploma III Program Studi Manajemen

Informatika, Jurusan Teknologi Informasi, Politeknik Negeri Malang.

Tujuan utama dari Praktik Kerja Lapangan ini adalah untuk memantapkan

teori dan praktek yang telah dipelajari di Politeknik Negeri Malang dan dapat

diselesaikan serta diaplikasikan di lapangan.

Dalam proses pembuatan laporan ini tak lupa penulis haturkan rasa hormat

kepada orang tua yang telah banyak memberikan dorongan semangat dari awal

hingga selesainya laporan ini. Tak lupa penulis ucapkan terimakasih kepada

teman-teman mahasiswa yang telah memberikan dorongan moril dan material

serta informasi. Juga dengan segala hormat penulis ucapkan banyak terimakasih

kepada Bapak-Bapak/Ibu-Ibu Dosen Politeknik Negeri Malang sehingga penulis

dapat menerapkan ilmu yang telah diberikan.

Penulis menyadari tanpa adanya dukungan dan kerjasama dari berbagai

pihak, kegiatan Praktek Kerja Lapangan ini tidak akan berjalan dengan baik.

Untuk itu kami menyampaikan rasa terimakasih juga kepada:

1. Bapak Rudy Ariyanto, ST., M.Cs. selaku Ketua Jurusan Teknologi

Informasi

2. Bapak Dr. Eng. Rosa Andrie Asmara, ST., MT. selaku Ketua Program

Studi Manajemen Informatika

(7)

vii

4. Bapak Pramana Yoga Saputra, S.Kom., MMT. Selaku Pembimbing

Praktek Kerja Lapangan

5. Ibu Dra. Shanti Restuningsari, MM. selaku Kepala Bagian Hubungan

Masyarakat Sekretariat Daerah Kota Batu

6. Bapak Prasetyo Bagus Wicaksono, ST. selaku pembimbing Praktek Kerja

Lapangan di Bagian Hubungan masyarakat Sekretariat Daerah Kota Batu

7. Dan seluruh staf Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu serta seluruh pihak yang telah membantu dan mendukung lancarnya

pelaksanaan Praktek Kerja Lapangan dari awal hingga akhir yang tidak

dapat kami sebutkan satu persatu.

Penulis menyadari bahwa dalam penyusunan Laporan Praktek Kerja

Lapangan ini masih banyak terdapat kekurangan dan kelemahan yang dimiliki,

baik itu sistematika penulisan maupun penggunaan Bahasa. Untuk itu penulis

mengharapkan saran dan kritik dari berbagai pihak yang bersifat membangun

demi penyempurnaan Laporan Praktek Kerja Lapangan ini. Semoga laporan ini

berguna bagi pembaca secara umum dan kami secara khusus. Akhir kata, penulis

ucapkan banyak terimakasih.

Malang, Maret 2017

(8)

viii

DAFTAR ISI

HALAMAN PENGESAHAN ... iii

HALAMAN PENGESAHAN INSTANSI ... iv

PERNYATAAN KEASLIAN TULISAN LAPORAN PRAKTIK KERJA

LAPANGAN ... v

KATA PENGANTAR ... vi

DAFTAR ISI ... viii

DAFTAR GAMBAR ... xi

DAFTAR TABEL ... xiii

DAFTAR LAMPIRAN ... xiv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Tujuan ... 1

1.2.1 Tujuan Praktek Kerja Lapangan... 1

1.2.2 Tujuan Penulisan ... 2

Adapun tujuan dari penulisan laporan Praktik Kerja Lapangan ini, antara

lain: ... 2

1.3 Manfaat ... 2

1.3.1 Bagi Mahasiswa ... 2

1.3.2 Bagi Politeknik Negeri Malang Khususnya Program Studi

Manajemen Informatika ... 2

1.3.3 Bagi Instansi Yang Bersangkutan ... 3

1.4 Nama Kegiatan ... 3

1.5 Waktu Dan Tempat Pelaksanaan ... 3

1.6 Peserta Praktek Kerja Lapangan ... 3

(9)

ix

1.8 Sistematika Penelitian ... 5

BAB II GAMBARAN UMUM PERUSAHAAN ... 6

2.1 Sejarah Umum Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu 6

2.2 Lambang Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu . 6

2.3 Visi Dan Misi Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu 6

2.3.1 Visi ... 6

2.3.2 Misi ... 7

2.4 Lokasi Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu ... 7

2.5 Struktur Organisasi Bagian Hubungan Masyarakat Sekretariat Daerah

Kota Batu ... 7

2.6 Pengalaman Dan Aktivitas Praktek Kerja Lapangan (PKL) ... 9

BAB III PELAKSANAAN PRAKTEK KERJA ... 10

3.1 Dasar Teori ... 10

3.1.1 Sistem Informasi ... 10

3.1.2 HTML ... 10

3.1.3 PHP ... 12

3.1.4 Sublime Text 3 ... 13

3.1.5 Xampp ... 13

3.1.6 Android ... 13

3.1.7 Phonegap ... 15

3.1.8 Fitur-Fitur Phonegap ... 18

3.2 Perencanaan Proyek Praktek Kerja Lapangan ... 20

3.2.1 Latar Belakang Masalah Sistem ... 20

3.2.2 Pemecahan Masalah Yang Diambil ... 21

(10)

x

3.2.4 Main Map ... 22

3.2.5 WBS (Work Breakdown Structure) ... 23

3.2.6 Use Case Diagram ... 24

3.2.7 Activity Diagram ... 25

3.2.8 Squence Diagram ... 25

3.3 Pembuatan Proyek Praktek Kerja Lapangan ... 26

3.3.1 Perancangan Database ... 26

3.3.2 Implementasi Database ... 27

3.3.3 Perancangan Tampilan Proyek ... 30

3.3.4 Tampilan Proyek ... 36

BAB IV PENUTUP ... 43

4.1 Kesimpulan ... 43

4.2 Saran ... 43

DAFTAR PUSTAKA ... 44

(11)

xi

DAFTAR GAMBAR

Gambar 2.1 Lambang Bagian Hubungan Masyarakat secretariat Daerah kota Batu

... 6

Gambar 2.2 Struktur Organisasi Bagian Hubungan Masyarakat Sekretariat Daerah

kota Batu ... 8

Gambar 3.1 Urutan Pembuatan Aplikasi Mobile Menggunakan Phonegap ... 16

Gambar 3.2 Main Map Website Admin ... 22

Gambar 3.3 Use Case Diagram Website Admin ... 24

Gambar 3.4 Activity Diagram Website Admin... 25

Gambar 3.5 Squence Diagram Website Admin ... 25

Gambar 3.8 Tabel Foto ... 28

Gambar 3.9 Tabel Kegiatan ... 29

Gambar 3.10 Tabel Kuliner ... 29

Gambar 3.11 Tabel Wisata ... 30

Gambar 3.12 Start Menu ... 30

Gambar 3.13 Halaman Kegiatan ... 31

Gambar 3.14 Halaman Foto ... 31

Gambar 3.15 Halaman Wisata dan Kuliner ... 32

Gambar 3.16 Halaman Website Login ... 32

Gambar 3.17 Halaman Website Home... 33

Gambar 3.18 Halaman Data (Tabel) Website ... 34

Gambar 3.19 Halaman Tambah Data ... 34

Gambar 3.20 Halaman Edit Data ... 35

Gambar 3.21 Halaman Edit Data ... 35

Gambar 3.22 Halaman Login Website ... 36

Gambar 3.23 Halaman Utama Website (Home / Dashboard) ... 36

Gambar 3.24 Halaman Website Data Wisata ... 36

Gambar 3.25 Form Input Data Wisata ... 37

Gambar 3.26 Halaman Website Data Kuliner... 37

Gambar 3.27 Form Input Data Kuliner ... 37

(12)

xii

Gambar 3.29 Form Input Data Foto ... 38

Gambar 3.30 Halaman Website Untuk Menampilkan Data Kegiatan ... 39

Gambar 3.31 Form Input Data Kegiatan ... 39

Gambar 3.32 Aplikasi Menu Utama ... 40

Gambar 3.33 Aplikasi Menu Kegiatan... 40

Gambar 3.34 Aplikasi Menu Gallery Foto ... 41

Gambar 3.35 Aplikasi Menu Wisata ... 41

(13)

xiii

DAFTAR TABEL

Tabel 3.1 Tabel Admin ... 26

Tabel 3.2 Tabel Kegiatan ... 26

Tabel 3.3 Tabel Foto ... 26

Tabel 3.4 Tabel Wisata ... 27

(14)

xiv

DAFTAR LAMPIRAN

Lampiran 1:

Listing Program

Lampiran 2:

Activity Control

Praktek Kerja Lapangan

Lampiran 3: Nilai Praktek Kerja Lapangan

(15)

1 BAB I

PENDAHULUAN

1.1 Latar Belakang

Praktek Kerja Lapangan (PKL) adalah suatu kegiatan penerapan ilmu yang

diperoleh mahasiswa dibangku perkuliahan pada dunia kerja. Oleh karena itu

semua teori-teori yang dipelajari dari berbagai mata kuliah di Jurusan Teknologi

Informasi Program Studi Manajemen Informatika Politeknik Negeri Malang dapat

secara langsung dipraktekkan di Bagian Hubungan Masyarakat Sekretariat Daerah

Kota Batu. Sehingga mahasiswa mendapatkan gambaran dan pengalaman kerja

secara langsung.

Dalam mengikuti Praktek Kerja Lapangan mahasiswa diharapkan dapat

mengetahui dan berlatih pada lingkungan dunia kerja sebagai upaya untuk

mempersiapkan diri memasuki dunia kerja. Oleh karena itu, memilih Bagian

Hubungan Masyarakat Sekretariat Daerah Kota Batu sebagai wadah serta tempat

untuk melakukan Praktek Kerja Lapangan (PKL).

Praktek Kerja Lapangan di Bagian Hubungan Masyarakat Sekretariat

Daerah Kota Batu yang merupakan sebuah bagian pemerintahan yang bergerak

dibidang hubungan antara masyarakat dengan pemerintah maupun masyarakat

dengan masyarakat lainnya, sehingga dapat dijadikan tempat untuk

mempraktekkan dan mengembangkan keahlian dan kemampuan yang dimiliki dan

didapat dibangku perkuliahan, serta memecahkan dan menyelesaikan masalah

yang terjadi. Selain itu dapat membantu penerapan ilmu pengetahuan secara nyata

yang didapatkan mahasiswa dari Perguruan Tinggi untuk pihak instansi terkait.

1.2 Tujuan

1.2.1 Tujuan Praktek Kerja Lapangan

Adapun tujuan dilaksanakannya Praktik Kerja Lapangan, antara lain:

1. Mempraktekkan semua teori dan keterampilan yang dimiliki dan diperoleh di

bangku perkuliahan pada instansi yang terkait.

(16)

2

3. Menambah pengetahuan, keterampilan dan wawasan sehingga nantinya

menjadi modal untuk terjun kedunia kerja yang nyata.

1.2.2 Tujuan Penulisan

Adapun tujuan dari penulisan laporan Praktik Kerja Lapangan ini, antara

lain:

1. Melaporkan dan menganalisa seluruh kegiatan yang dilakukan selama

melaksanakan Praktik Kerja Lapangan di Bagian Hubungan Masyarakat

Sekretariat Daerah Kota Batu.

2. Mengetahui dan mengikuti kegiatan yang dilakukan di Bagian Hubungan

Masyarakat Sekretariat Daerah Kota Batu, baik yang berhubungan dengan

dunia Teknologi Informasi maupun yang lain.

1.3 Manfaat

1.3.1 Bagi Mahasiswa

a.

Dapat menerapkan secara langsung ilmu pengetahuan yang diperoleh selama

duduk dibangku perkuliahan dan membandingkannya dengan dunia kerja

yang nyata.

b.

Dapat menambah pengetahuan, keterampilan dan wawasan yang diperoleh

untuk mempersiapkan diri baik secara teori maupun praktek dalam dunia

kerja.

c.

Dapat memperkuat mental mahasiswa terhadap dunia kerja yang nyata untuk

menghadapi lingkungan kerja dan hubungan kerja.

d.

Dapat memperdalam dan meningkatkan kualitas, keterampilan dan kreatifitas

pribadi yang sesuai dengan ilmu yang dimiliki.

1.3.2 Bagi Politeknik Negeri Malang Khususnya Program Studi Manajemen

Informatika

a.

Dapat menjadi sarana pengenalan instansi pendidikan Politeknik Negeri

Malang khususnya Program Studi Manajemen Informatika kepada instansi

maupun instansi yang membutuhkan lulusan atau tenaga kerja yang ahli yang

dihasilkan oleh Politeknik Negeri Malang.

(17)

3 c.

Dapat memberikan masukan untuk mengevaluasi kesesuaian kurikulum yang

diajarkan di Politeknik Negeri Malang dengan yang sudah diterapkan dengan

kebutuhan tenaga kerja yang terampil dibidangnya.

d.

Dapat mencetak calon-calon tenaga kerja yang berwawasan luas, mempunyai

pengalaman dibidangnya dan keterampilan yang sesuai dengan yang

dibutuhkan.

1.3.3 Bagi Instansi Yang Bersangkutan

a.

Dapat membantu menyelesaikan permasalahan yang terjadi dan pekerjaan

yang ada ketika mahasiswa melaksanakan Praktik Kerja Lapangan.

b.

Dapat menjadi sarana untuk menjembatani hubungan kerjasama yang baik

antara instansi dengan Politeknik Negeri Malang dimasa yang akan datang.

1.4 Nama Kegiatan

Praktik Kerja Lapangan di Bagian Hubungan Masyarakat Sekretariat

Daerah Kota Batu dengan proyek yang berjudul “Aplikasi Pendokumentasian

Kegiatan Pemerintah Daerah Melalui Media Center Untuk Meningkatkan

Pelayanan Publik Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu”.

1.5 Waktu Dan Tempat Pelaksanaan

Waktu pelaksanaan Praktek Kerja Lapangan dimulai tanggan 23 Januari

207-18 Pebruari 2017. Bertempat di Bagian Hubungan Masyarakat Sekretariat

Daerah Kota Batu yang berlokasi di Balai Kota Among Tani, Block A, Lantai III

–

Jalan Panglima Sudirman Nomor 507 Kota Batu.

1.6 Peserta Praktek Kerja Lapangan

Praktek Kerja Lapangan ini diikuti oleh 3 mahasiswa Program Studi

Manajemen Informatika, Jurusan Teknologi Informasi, Politeknik Negeri Malang,

yaitu:

1. Nama

: Riyanti

Alamat : Dsn. Kedung Boto RT.13 / RW.06 Desa Wrati Kec.

Kejayan Kab. Pasuruan

(18)

4 E-mail

:

riyantimm2@gmail.com

2. Nama

: Shella Fitrisia Hariati

Alamat

: Jalan Letjen S. Parman Gang IV Nomor 4 Kota Malang

NIM

: 1431140129

No HP

: +62812 8579 3674

E-mail

: shellafitrisiahariati@gmail.com

3. Nama

: Sulistyowati

Alamat : Pandaan - Pasuruan

NIM

: 1431140039

No HP

: +62822 4341 4292

E-mail

:

sulistyowati2312@gmail.com

1.7 Metode Penelitian

Adapun metode penulisan dalam penyusuan laporan ini diantaranya

adalah:

1. Observasi

Pengumpulan data dengan melakukan pengamatan secara langsung terhadap

objek penelitian, dengan mencatat hal-hal penting yang berhubungan dengan

judul proposal, sehingga diperoleh data yang lengkap dan akurat.

2. Wawancara

Pengumpulan data dengan cara melakukan komunikasi dan wawancara secara

langsung dengan pihak-pihak terkait.

3. Studi Pustaka

(19)

5

1.8 Sistematika Penelitian

Uraian dalam Laporan Praktik Kerja Lapangan (PKL) ini disusun dengan

sistematika penulisan sebagai berikut:

Bab I

Pendahuluan berisikan tentang Latar Belakang, Tujuan,

Manfaat, Peserta PKL, Metode Penelitian dan Sistematika

Penulisan.

Bab II

Gambaran umum berisikan tentang profil instansi, visi dan misi,

dan penjelasan lain tentang instansi.

Bab III

Pelaksanaan Praktik Kerja Lapangan (PKL) berisikan tentang

merancang dan membangun Aplikasi Pendokumentasian

Kegiatan Pemerintah Daerah Melalui Media Center Untuk

Meningkatkan Pelayanan Publik Bagian Hubungan Masyarakat

Sekretariat Daerah Kota Batu.

(20)

6 BAB II

GAMBARAN UMUM PERUSAHAAN

2.1 Sejarah Umum Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu

Humas awalnya merupakan bagian dari Dinas Informasi Dan Komunikasi

Kota Batu. Pada tahun 2009 Humas berubah dari bagian Dinas Informasi Dan

Komunikasi menjadi sekretariat daerah yaitu Protokol Hubungan Masyarakat.

Kemudian pada tahun 2013 memisahkan diri dari bagian tersebut dan menjadi

Bagian Humas Setda Kota Batu karena mengikuti peraturan Walikota Batu.

2.2 Lambang Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu

Gambar 2.1 Lambang Bagian Hubungan Masyarakat secretariat Daerah kota Batu

2.3 Visi Dan Misi Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu

2.3.1 Visi

(21)

7

2.3.2 Misi

1. Membangun pencitraan kelembagaan pemerintah daerah

2. Mengembangkan

penyampaian

informasi

yang

akurat,

jujur

dan

bertanggungjawab kepada public

3. Mengembangkan sistem pengolahan data dan pelaporan informasi public

4. Mengoptimalkan inventarisasi data tentang informasi kebijakan kepala daerah

5. Melaksanakan dan mengoptimalkan peliputan serta pendokumentasian

kegiatan pemerintah daerah.

2.4 Lokasi Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu

Bagian Hubungan Masyarakat Sekretariat Daerah Kota Batu berlokasi di

Balai Kota Among Tani, Block A, Lantai III

–

Jalan Panglima Sudirman Nomor

507 Kota Batu.

2.5 Struktur Organisasi Bagian Hubungan Masyarakat Sekretariat Daerah

Kota Batu

(22)

8 Gambar 2.2 Struktur Organisasi Bagian Hubungan Masyarakat Sekretariat Daerah kota

(23)

9

2.6 Pengalaman Dan Aktivitas Praktek Kerja Lapangan (PKL)

Praktek Kerja Lapangan di Kantor Bagian Hubungan Masyarakat

Sekretariat Daerah Kota Batu dilakukan dari hari Senin sampai dengan hari Jumat,

dimulai sesuai dengan jam kerja yaitu jam 08.00 WIB

– 16.00 WIB pada hari

Senin-Kamis dan jam 08.00 WIB

– 13.00 WIB pada hari Jumat. Sebagai

mahasiswa Praktek Kerja Lapangan (PKL) dituntut untuk memakai pakaian resmi

dan rapi, meskipun tidak dituntut untuk memakai Jas Alamamter dari Politeknik

Negeri Malang.

Meskipun tidak ada kontrak khusus dengan pihak Bagian Hubungan

Masyarakat Sekretariat Daerah Kota Batu, namun tetap mengikuti semua tata

tertib yang berlaku didalamnya, baik dari segi pakaian yang digunakan pada saat

ke kantor, hari masuk PKL, tata cara izin ketika ada kepentingan di kampus dan

tugas-tugas yang diberikan pada saat dikantor maupun yang diselesaikan dirumah.

Kami bukan hanya mengerjakan tugas yang berhubungan dengan jurusan

dikampus, melainkan semua tugas yang diberikan kami kerjakan, baik itu dalam

bidang pemerintahan, laporan, release berita, hingga terjun ke langsung ke

lapangan untuk meliput berbagai kegiatan Walikota Batu yang dilakukan di Balai

Kota Among Tani.

(24)

10 BAB III

PELAKSANAAN PRAKTEK KERJA

Bab ini berisikan dasar teori tentang proyek yang dikerjakan pada waktu

melaksanakan Praktik Kerja Lapangan. Disini dijelaskan secara terperinci

mengenai pengertian-pengertian apa saja yang dibutuhkan atau digunakan dalam

pembuatan aplikasi ini, baik software maupun hardware.

Pada saat Praktik Kerja Lapangan yang dilakukan adalah membantu

pekerjaan dari pegawai instansi dan menyelesaikan masalah yang terjadi didalam

instansi yang berhubungan dengan Teknologi Informasi. Dalam pembuatan

proyek aplikasi ini yang dibutuhkan antara lain:

3.1 Dasar Teori

3.1.1 Sistem Informasi

Sistem adalah kumpulan dari elemen

–

elemen yang berinteraksi untuk

mencapai tujuan tertentu. Informasi terdiri dari data yang telah diambil kembali

dan diolah atau sebaliknya dan digunakan untuk tujuan informative atau

kesimpulan, argumentasi, atau sebagai dasar untuk peramalan atau pengambilan

keputusan. Sedangkan menurut (Alter,1992), Sistem Informasi adalah kombinasi

antara prosedur kerja, informasi, orang dan teknologi informasi yang

diorganisasikan untuk mencapai tujuan dalam sebuah oganisasi. Sistem informasi

adalah sistem yang mempunyai kemampuan untuk mengumpulkan informasi dari

semua sumber dan menggunakan berbagai media untuk menampilkan informasi

dan diperluhkan klarifikasi alur informasi. Seperti itu disebabkan keanekaragaman

kebutuhan akan suatu informasi oleh pengguna informasi.

3.1.2 HTML

(25)

11

1. Penamaan Dokumen HTML

Penamaan dokumen HTML

yang menggunakan tiga karakter awalnya

adalah untuk mengakomodasikan sistem penamaan yang ada pada sistem

operasi

DOS.

Nama dokumen pada beberapa sistem operasi bersifat

case

sensitive

(membedakan huruf besar dan kecil). Nama dokumen yang sama tapi

dituliskan dalam

case

yang berbeda akan dianggap sebagai document yang

berbeda, misalnya „dokumen.

html’

berbeda dengan „DOKUME

N. html’.

Kasus

case sensitive

akan dijumpai pada dokumen

web

yang di

hosting

didalam

server

yang berbasis

*.nix

(keluarga sistem operasi

UNIX

).

2. Elemen dan Tag HTML

Elemen merupakan istilah bagi komponen-komponen dasar pembentuk

dokumen HTML

untuk menandai berbagai elemen dalam suatu dokumen

HTML, digunakan

Tag. Tag

HTML

terdiri dari sebuah kurung sudut kiri (<,

tanda lebih kecil), sebuah nama

tag

, dan sebuah kurung sudut kanan (>, tanda

lebih besar).

Tag

umumnya berpasangan (misalnya, <H1> dengan </H1>), atau

yang menjadi pasangan selalu diawali dengan karakter garis miring.

Tag

yang

menunjukkan

tag

awal yang berarti awal elemen, dan yang kedua

menunjukkan

tag

akhir, berarti akhir elemen.

Nama elemen ditunjukkan dengan nama

tag

nya. Suatu elemen didalam

dokumen HTML

harus ditandai dengan

tag

nya yang berpasangan. Ada

beberapa elemen yang tidak mengharuskan

tag

nya ditulis secara berpasangan,

elemen tersebut diantarnya adalah:

1. Paragraf dengan tag <p>.

2. Ganti garis –

break line

dengan

tag

<br>.

3. Ganti datar –

horizontal rule

dengan

tag

<hr>.

4. List item dengan

tag

<Li>.

(26)

12 browser

bagaimana memberlakukan atau menampilkan (memformat) halaman

dokumen tersebut dalam

browser

.

Dalam membuat dokumen HTML

dibutuhkan elemen yang dinyatakan

dengan

tag

<

html

>, <

head

> dan <

body>

berikut

tag-tag

pasangannya. Setiap

dokumen terdiri atas

tag head

dan

body

. Elemen

head

berisi tentang informasi

dokumen tersebut, dan elemen

body

berisi teks yang sebenarnya yang tersusun

dari

link

, grafik, paragraf dan elemen lainnya.

Dalam suatu dokumen hanya ada satu dokumen HTML,

section

atau

elemen

head

ditandai dengan

tag

<

head

> diawal, dan t

ag

<

/head

> diakhir.

Section

ini berisi informasi tentang dokumen HTML

lainnya. Minimal

informasi yang dituliskan dalam elemen ini adalah judul dari elemen, judul ini

akan ditampilkan pada

captionBr

dari

windows browser

, ditandai dengan

menggunakan

tag

<

title>

dan diakhiri dengan </

title>.

Section

atau elemen

body

ditandai dengan

tag

<

body

> diawal, dan tag

</

body

> diakhir.

Section body

merupakan elemen terbesar didalam dokumen

HTML

. Elemen ini berisi dokumen yang akan ditampilkan pada

browser

,

meliputi paragraf grafik,

link

, tabel, dan sebagainya.

3.1.3 PHP

Menurut Sibero (2012:49), “PHP adalah pemograman (

interpreter

) adalah

proses penerjemahan baris sumber menjadi kode mesin yang dimengerti komputer

secara langsung pada saat baris kode dijalankan”.

Menurut

Al-Fatta

(diakses

pada

tanggal

10 April

2012

di

http://widiantogilangramadhan.wordpress.com/tag/definisi-php/)

“PHP adalah

sebuah

scripting language

(bahasa pemrograman yang mengatur suatu aplikasi)

yang didesign untuk pengembangan web dalam pembuatan halaman web

dinamis”.

Berdasarkan pendapat para ahli yang dikemukakan di atas dapat ditarik

kesimpulan bahwa PHP adalah bahasa pemrograman yang digunakan secara luas

untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa

digunakan bersamaan dengan HTML.

(27)

13 untuk mempertahankan halaman website pribadi tersebut sekaligus membangun

halaman web yang dinamis. PHP pada awalnya diperkenalkan sebagai singkatan

dari

Personal Home Page.

PHP pertama ditulis menggunakan bahasa

Perl

(

Perl

Script

), kemudian ditulis ulang menggunakan bahasa pemograman C CGI-BIN

(

Common Gateway Interface-Binary

) yang ditujukan untuk mengembangkan

halaman website yang mendukung formulir dan penyimpanan data. Pada tahun

1995

PHP Tool 1.0

dirilis untuk umum, kemudian pengembangannya dilanjutkan

oleh Andi Gutmans dan Zeev Suraski. Perusahaan bernama Zend kemudian

melanjutkan pengembangan PHP dan merilis PHP versi 5 terakhir pada terakhir

pada saat ini. Aplikasi bahasa PHP

dapat dipergunakan untuk:

a.

PHP digunakan sebagai landasan operasi pada pemrogaman jaringan berbasis

web.

b.

PHP digunakan juga untuk pemrogaman database.

c.

PHP digunakan untuk membuat aplikasi web.

3.1.4 Sublime Text 3

Sublime Text

merupakan

editor HTML

yang

professional

mendesain,

menulis kode program dan mengembangkan

website

, halaman

web

, dan aplikasi

web

. Dalam pengerjaanya

dreamweaver

memberikan tiga pilihan yaitu bekerja

dengan menulis kode program (

Menu Code

), dengan pengeditan secara visual

(

Mode Design

) dan dengan tampilan keduanya (

Split Mode

).

Dreamweaver

juga

menyediakan alat-alat bantu untuk mengembangkan kreatifitas pembuatan

web.

3.1.5 Xampp

XAMPP adalah software web server apache yang di dalamnya tertanam

server MySQL yang didukung dengan bahasa pemrograman PHP untuk membuat

website yang dinamis. XAMPP sendiri mendukung dua system operasi yaitu

windows dan Linux. Untuk linux dalam proses penginstalanny menggunakan

command line sedangkan untuk windows dalam proses penginstalannya

menggunakan interface grafis sehingga lebih mudah dalam penggunaaan XAMPP

di Windows di banding dengan Linux.

3.1.6 Android

Android (/

ˈ

æn.dr

ɔɪ

d/;

AN

-droyd

) adalah sistem operasi berbasis Linux yang

(28)

14 pintar dan komputer tablet.

Android awalnya dikembangkan oleh Android, Inc.,

dengan dukungan finansial dari Google, yang kemudian membelinya pada tahun

2005. Sistem operasi ini dirilis secara resmi pada tahun 2007, bersamaan dengan

didirikannya

Open

Handset

Alliance,

konsorsium

dari

perusahaan-perusahaan perangkat keras, perangkat lunak, dan telekomunikasi yang bertujuan

untuk memajukan standar terbuka perangkat seluler.

Ponsel Android pertama

mulai dijual pada bulan Oktober 2008.

Antarmuka pengguna Android umumnya berupa manipulasi langsung,

menggunakan gerakan sentuh yang serupa dengan tindakan nyata, misalnya

menggeser, mengetuk, dan mencubit untuk memanipulasi objek di layar,

serta papan ketik virtualuntuk menulis teks. Selain perangkat layar sentuh, Google

juga telah mengembangkan Android TV untuk televisi, Android Auto untuk

mobil, dan Android Wear untuk jam tangan, masing-masingnya memiliki

antarmuka pengguna yang berbeda. Varian Android juga digunakan

pada komputer jinjing, konsol permainan, kamera digital, dan peralatan elektronik

lainnya.

Android adalah sistem operasi dengan sumber terbuka, dan Google merilis

kodenya di bawah Lisensi Apache.

Kode dengan sumber terbuka dan lisensi

perizinan pada Android memungkinkan perangkat lunak untuk dimodifikasi

secara bebas dan didistribusikan oleh para pembuat perangkat, operator nirkabel,

dan pengembang aplikasi. Selain itu, Android memiliki sejumlah besar komunitas

pengembang aplikasi (apps) yang memperluas fungsionalitas perangkat,

umumnya ditulis dalam versi kustomisasi bahasa pemrograman Java.

Pada bulan

Oktober 2013, ada lebih dari satu juta aplikasi yang tersedia untuk Android, dan

sekitar 50 miliar aplikasi telah diunduh dari Google Play, toko aplikasi utama

Android.

Sebuah survei pada bulan April-Mei 2013 menemukan bahwa Android

adalah platform paling populer bagi para pengembang, digunakan oleh 71%

pengembang aplikasi bergerak.

Di Google I/O 2014, Google melaporkan terdapat

lebih dari satu miliar pengguna aktif bulanan Android, meningkat dari 583 juta

pada bulan Juni 2013.

(29)

15 digunakan di dunia, mengalahkan Symbian pada tahun 2010. Android juga

menjadi pilihan bagi perusahaan teknologi yang menginginkan sistem operasi

berbiaya rendah, bisa dikustomisasi, dan ringan untuk perangkat berteknologi

tinggi tanpa harus mengembangkannya dari awal.

Sifat Android yang terbuka juga

telah mendorong munculnya sejumlah besar komunitas pengembang aplikasi

untuk menggunakan kode sumber terbuka sebagai dasar proyek pembuatan

aplikasi, dengan menambahkan fitur-fitur baru bagi pengguna tingkat lanjut atau

mengoperasikan Android pada perangkat yang secara resmi dirilis dengan

menggunakan sistem operasi lain.

Pada November 2013, Android menguasai pangsa pasar telepon pintar

global, yang dipimpin oleh produk-produk Samsung, dengan persentase 64% pada

bulan Maret 2013. Pada Juli 2013, terdapat 11.868 perangkat Android berbeda

dengan beragam versi.

Keberhasilan sistem operasi ini juga menjadikannya

sebagai target ligitasi paten "perang telepon pintar" antar perusahaan-perusahaan

teknologi. Hingga bulan Mei 2013, total 900 juta perangkat Android telah

diaktifkan di seluruh dunia, dan 48 miliar aplikasi telah dipasang dari Google

Play.

3.1.7 Phonegap

(30)

16 didownload lebih dari 1 juta kali dan sedang digunakan oleh lebih dari 400.000

pengembang. Ribuan aplikasi yang dibangun menggunakan PhoneGap yang

tersedia di toko aplikasi mobile dan direktori. Kode PhoneGap disumbangkan

kepada Apache Software Foundation (ASF) di bawah nama Apache Cordova dan

lulus untuk status proyek top-level pada Oktober 2012. Melalui ASF,

pengembangan PhoneGap masa depan akan memastikan kepengurusan terbuka

proyek. Ini akan selalu tetap gratis dan open source di bawah Lisensi Apache,

Versi 2.0.

Pertama kali dikembangkan di sebuah acara iPhoneDevCamp di San

Francisco, PhoneGap memenangkan Choice Award Rakyat di O'Reilly Media

Web 2.0 Conference 2009 dan kerangka telah digunakan untuk mengembangkan

berbagai alpacas. Apple Inc. telah mengkonfirmasi bahwa kerangka memiliki

persetujuan, bahkan dengan 4.0 pengembang lisensi perubahan kesepakatan baru

kerangka PhoneGap digunakan oleh beberapa platform aplikasi mobile seperti

ViziApps, worklight, Convertigo., dan appMobi sebagai tulang punggung mesin

pengembangan klien mobile mereka. Adobe resmi mengumumkan akuisisi Nitobi

Software (pengembang asli) pada tanggal 4 Oktober 2011. Bersamaan dengan itu,

kode PhoneGap disumbangkan kepada Apache Software Foundation untuk

memulai sebuah proyek baru yang disebut Apache Cordova. Nama asli proyek,

Apache Callback, dipandang sebagai terlalu umum. Kemudian juga muncul dalam

Adobe Systems sebagai Adobe PhoneGap dan juga sebagai Adobe Phonegap

Build.

(31)

17 memiliki keyakinan yang besar terhadap phonegap yang menjadi proyek mereka

yakni phonegap team developer serta apache cordova commiter.

Mereka memiliki dua kepercayaan yaitu web adalah solusi dari cross-platform,

yakni web telah menjadi solusi yang paling meyakinkan untuk mencapai banyak

perangkat kemampuan yang berbeda, hambatan yang sangat rendah untuk

teknologi web authoring, serta Siapa pun, setiap saat , dapat mempublikasikan

sesuatu dari mana saja. kepercayaan yang kedua adalah setiap teknologi itu akan

usang, mungkin pernyataan ini terdengar agak berani namun mereka juga

memiliki alasan sendiri mengapa mengeluarkan pernyataan tersebut. Ini adalah

lebih dari sebuah pengamatan, dan sejarah yang ada selama menjadi konsultan.

Dengan pemikiran ini mereka berjuang untuk berinovasi setiap waktu agar dapat

bersaing dalam dunia teknologi.

Mereka juga memiliki tujuan yakni menjadikan web sebagai platform

pengembangan yang utama serta tujuan phonegap sendiri sudah habis. Mungkin

terdengar agak arogan bagi tujuan kedua, namun tujuan itu dapat menjadi sebuah

spirit yang membara guna menghasilkan produk yang dapat bersaing dalam pasar

teknologi. Juga sebagai komitmet bagi mereka untuk menciptakan output yang

benar-benar mengesankan bagi pasat teknologi. Mereka percaya dengan

menjadikan web sabagai platform utama maka akan membuat semua orang dapat

berpartisipasi.

Filosofi dari phonegap adalah Kami tidak mencoba untuk menjadi

segalanya bagi semua orang. Kami percaya web telah memecahkan banyak kasus

besar digunakan dalam perangkat lunak, dan karena semakin meningkat maka

mereka akan terus melakukannya.

(32)

18

3.1.8 Fitur-Fitur Phonegap

a.

Arsitektur Phonegap

Spesifikasi arsitektur aplikasi berbeda pada setiap basisnya. Biarpun

begitu data-driven aplikasi dibuat dengan mengikuti aristektur dasar. Aplikasi

PhoneGap bertindak sebagai client agar user bisa berinteraksi dengannya.

PhoneGap Client berkomunikasi dengan sebuah server aplikasi untuk menerima

data. Server aplikasi mengatur business logic dan berkomunikasi dengan sebuah

back-end data repository.

Server aplikasi biasanya adalah sebuah web server (Apache

, IIS, etc…)

dan mempunyai sebah server side scripting language seperti ColdFusion, Java,

.NET, PHO, dan sebagainya. PhoneGap adalah sebuah agnotic dari back-end

technologies dan dapat bekerja dengan banyak server aplikasi menggunakan

protocol web standart. Server aplikasi melakukan business logic dan perhitungan,

dan menerima atau menahan data dari repository data yang terpisah

–

biasanya

sebuah relasional database, tetapi juga bia semua struktur atau mekanisme untuk

penahanan data.

Aplikasi PhoneGap biasanya tidak langsung meminta langsung ke sebuah

database, komunikasinya adalah melalui sebuah aplikasi server. Komunikasi

Client ke aplikasi server dapat berdasarkan standart HTTP request untuk content

HTML, REST – ful XML services, JSON services, atau SOAP (atau websockets

jika OS kita mendukung). Ada beberapa beberapa teknik yang dapat digunakan di

sebuah desktop-browser berbasis AJAX.

Arsiktektur client-side biasanya menggunakan Model Single-page

application, dimana logic aplikasi berada ddisebuah page HTML single. Page ini

tidak pernah diambil dari memori. Semua data akan di display dengan

mengupdate HTML DOM, data diterima dari server aplikasi menggunakan teknik

AJAX, dan variabel disimpan dimemory dengan JavaScript.

(33)

19 b.

Cordova.js dan Cordova.jar

Setiap aplikasi yang dibangun dengan Phonegap harus menyertakan

sebuah library Javascript dari Phonegap. Library Phonegap ini diberi nama

Cordova.js. Library cordova.js adalah inti dari aplikasi Phonegap, dia bekerja di

belakang layar dan melakukan pekerjaan pemanggilan fitur-fitur asli platform.

Cordova.js dan Cordova.jar bekerja saat melakukan pemanggilan API

tertentu yang dokumentasi dapat dilihat melalui situs resmi Phonegap. Library

Cordova.js inilah yang menjembatani antara Bahasa pemrograman Phonegap dan

fitur asli dalam aplikasi mobile seperti Camera, GPS, Accelerometer, Compass,

File System dan lain sebagainya.

c.

Droidgap Activity

Saat membangun project berbasis Phonegap, pertama diharuskan membuat

sebuah MainActivity, terutama untuk project berbasis platform Android.

MainActivity adalah kunci Phonegap dalam mengakses fitur alami ponsel. Fitur

ini adalah pendamping utama file Cordova.js dalam membimbing Cordova.js

untuk mengakses berbagai fitur native ponsel tersebut.

d.

Phonegap Compiler

Memanfaatkan fitur Phonegap Build merupakan Cloud System untuk

mengkompilasi project berbasis Android. Tetapi pekerjaan kompilasi

menggunakan aplikasi bawaan native tentunya lebih banyak kelebihan dan

mampu mengetahui performa maupun bug-bug yang terjadi secara langsung.

Sistem kompilasi Phonegap jika memanfaaatkan aplikasi native adalah

sebagai berikut:

• Eclipse IDE untuk kompilasi aplikasi Android,

• XCode untuk kompilasi aplikasi berbasis iOS / iPhone, dan

• Microsoft Visual Studio 2010 untuk mengkompilasi aplikasi berbasis

Windows Phone.

(34)

20 PhoneGap memiliki beberapa fitur yang mendukung aplikasi mereka,

yakni Accelerometer, Camera, Compass, Contacts, File, Geolocation, Media,

Network, Notification (Alert), Notification (Sound), Notification (Vibration),

storage. Accelerometer sendiri adalah fitur yang menangkat pergerakan divais

dalam arah x, y, dan z. camera adalah fitur untuk mengakses kamera bawaan dari

divais, compass adalah fitur untuk mendapatkan arah, contacs adalah fitur yang

menyediakan akses ke database kontak pada device, file adalah fitur API untuk

membaca, menulis, dan menavigasi hierarki file system, geolocation adalah

menyediakan akses ke data lokasi berdasarkan perangkat sensor GPS atau

disimpulkan dari sinyal jaringan. Media adalah fitur yang menyediakan

kemampuan untuk merekam dan memutar file audio pada divais. Network adalah

fitur yang menyediakan akses paket data menggunakan koneksi dari operator,

notification adalah fitur untuk menyediakan pemberitahuan bagi pengguna divais

dengan audio, visual, dan perabaan atau getaran pada ponsel, dan storage adalah

fitur yang menyediakan akses kepada media penyimpanan pada device.

Gambar 3.2 Fitur-Fitur Phonegap Yang Dibagi Oleh Beberapa Jenis Paltform

3.2 Perencanaan Proyek Praktek Kerja Lapangan

3.2.1 Latar Belakang Masalah Sistem

(35)

21

1. Publikasi informasi ke masyarakat masih dilakukan dengan cara manual

upload satu per satu di Social Media.

2. Konten yang dimasukkan dalam publikasi yang biasa dilakukan berbeda

antara satu social media dengan social media yang lain.

3. Membutuhkan waktu yang lama untuk publikasi di semua social media yang

dimiliki oleh Bagian Humas Kota Batu.

3.2.2 Pemecahan Masalah Yang Diambil

Dalam menyelesaikan maslaah yang telah ditemui di Bagian Hubungan

Masyarakat Sekretariat Daerah Kota Batu tersebut, maka dibuatlah Aplikasi

Pendokumentasian Kegiatan Pemerintah Daerah Melalui Media Center Untuk

Meningkatkan Pelayanan Publik Bagian Hubungan Masyarakat Sekretariat

Daerah Kota Batu. Dengan tahapan yang dilakukan diantaranya deskripsi system,

Analisa, Main Map, Time Schedule pembuatan Aplikasi, Perancangan Sistem,

Perancangan Interface, Implementasi dan Uji Coba Aplikasi.

3.2.3 Deskripsi Sistem

Aplikasi yang akan dibuat merupakan aplikasi berbasis website dan

mobile. Website ini merupakan sebuah website yang khusus digunakan untuk

admin dalam mengelola aplikasi yang digunakan user. Website ini digunakan

untuk memasukkan, mengupdate dan bahkan menghapus data-data yang dikelola

Bagian Humas setda Kota Batu. Admin akan semakin mudah dengan website ini

Karena mengelola semua data hanya dalam satu website. Jika data dalam website

ini berubah maka data dalam aplikasi user pun akan berubah.

(36)

22

3.2.4 Main Map

Data

Admin

Layanan Laporan

Pembuatan Website Admin Aplikasi Humas Setda Kota Batu

View Gallery

View Wisata

View Kegiatan

View Kuliner

Insert Galllery

Insert Wisata

Insert Kegiatan

Insert Kuliner

Insert Galllery

Edit Galllery

Edit Wisata

Edit Kegiatan

Edit Kuliner

Jadwal Kegiatan Kota Batu

Data Tempat Wisata Kota Batu

Data Tempat Kuliner Kota Batu

Data Gallery Humas Setda Kota

Batu

(37)

23

3.2.5 WBS (Work Breakdown Structure)

No

Kegiatan

Februari

Maret

April

1

2

3

4

1

2

3

4

1

2

3

4

1 Perencanaan

-

Pengumpulan Data

-

Manajemen Proyek

2 Analisis

-

Analisis Kebutuhan

-

Analisis Design

-

Analisis Resiko

3 Design

-

Pembuatan Lembar

Kerja Tampilan

-

User Interface untuk

Admin

-

User Interface untuk

user

4 Pemrograman Sistem

5 Testing

-

Koreksi Software

-

Training

(38)

24

3.2.6 Use Case Diagram

(39)

25

3.2.7 Activity Diagram

Login Menverifikasi

Melihat Halaman Utama Admin Melihat Data kegiatan,

foto, wisata dan kuliner

Mengelola Data kegiatan, foto, wisata dan kuliner

MULAI

SELESAI

Data Tidak Valid

Data Valid

Gambar 3.6 Activity Diagram Website Admin

3.2.8 Squence Diagram

(40)

26

3.3 Pembuatan Proyek Praktek Kerja Lapangan

3.3.1 Perancangan Database

Berdasarkan data yang telah diperoleh dari Bagian Hubungan Masyarakat

Sekretariat Daerah Kota Batu, maka dirancanglah beberapa table berikut:

a.

Tabel Admin

Tabel ini digunakan untuk menyimpan user atau pengguna yang menggunakan

aplikasi ini.

Tabel 3.1 Tabel Admin

No

Kolom

Type Data

1. id_admin

varchar (15)

2. username

varchar (25)

3. password

varchar (25)

4. profile

varchar (50)

b.

Tabel Kegiatan

Tabel ini digunakan untuk menyimpan semua data jadwal kegiatan yang

diagendakan di Kota Batu. Baik yang dikelola humas maupun tidak.

Tabel 3.2 Tabel Kegiatan

No

Kolom

Type Data

1. id_kegiatan

varchar (15)

2. nama_kegiatan

varchar (100)

3. deskripsi

varchar (1000)

4. waktu

date

5. tempat

varchar (50)

6. gambar

varchar (50)

c.

Tabel Foto

Tabel ini digunakan untuk menyimpan semua data gallery foto yang dimiliki

Humas Setda Kota Batu. Baik foto internal instansi maupun eksternal.

Tabel 3.3 Tabel Foto

No

Kolom

Type Data

1. id_foto

int (11)

(41)

27

3. deskripsi_foto

varchar (100)

4. foto

varchar (50)

5. fotografer

varchar (25)

d.

Tabel Wisata

Tabel ini digunakan untuk menyimpan semua data tempat wisata yang ada di

Kota Batu.

Tabel 3.4 Tabel Wisata

No

Kolom

Type Data

1. id_wisata

int (3)

2. nama_wisata

varchar (500)

3. alamat_wisata

varchar (50)

4. deskripsi_wisata

varchar (200)

e.

Tabel Kuliner

Tabel ini digunakan untuk menyimpan semua data tempat kuliner yang ada di

Kota Batu.

Tabel 3.5 Tabel Kuliner

No

Kolom

Type Data

1. id_kuliner

varchar (3)

2. nama_kuliner

varchar (100)

3. alamat_kuliner

varchar (100)

4. deskripsi_kuliner

varchar (1000)

3.3.2 Implementasi Database

Pembuatan database menggunakan phpMyAdmin dengan nama database

“apk_humas”. Pada

database “apk_humas” tersebut terdapat 5 tabel, sebagai

berikut:

1. Tabel Admin

(42)

28 (50)).

Tabel ini digunakan untuk menyimpan data admin yang mengelola

website Humas Kota Batu ini.

Gambar 3.7 Tabel Admin

2. Tabel Foto

Didalam Tabel Foto terdapat 5 field yaitu

id_foto (int (11)), tanggal_foto

(date), deskripsi_foto (varchar (100)), foto (varchar (50)), dan fotografer

(varchar (25)).

Tabel ini digunakan untuk melakukan

Create, Read, Update

dan Delete

data Foto.

Gambar 3.8 Tabel Foto

3. Tabel Kegiatan

Didalam Tabel Kegiatan terdapat 6 field yaitu

id_kegiatan (int (15)),

nama_kegiatan (varchar (100)), deskripsi (varchar (1000)), waktu (date),

(43)

29 dan dikelola oleh Bagian Hubungan Masyarakat Sekretariat Daerah Kota

Batu.

Gambar 3.9 Tabel Kegiatan

4. Tabel Kuliner

Didalam Tabel Kuliner terdapat 4 field yaitu

id_kuliner (int (3)),

nama_kuliner (varchar (100)), alamat_kuliner (varchar (100)), dan

deskripsi_kuliner (varchar (1000)).

Tabel ini digunakan untuk melakukan

Create, Read, Update dan Delete

data tempat-tempat kuliner yang ada di

Kota Batu.

Gambar 3.10 Tabel Kuliner

5. Tabel Wisata

Didalam Tabel Wisata terdapat 4 field yaitu

id_wisata (int (3)),

nama_wisata

(varchar

(50)),

alamat_wisata

(varchar

(25))

dan

(44)

30 Create, Read, Update dan Delete

data tempat-tempat Wisata yang ada di kota

Batu.

Gambar 3.11 Tabel Wisata

3.3.3 Perancangan Tampilan Proyek

Desain antarmuka yang dibangun pada aplikasi ini dibuat untuk dua aktor,

yaitu user sebagai pengguna aplikasi melalui mobile dan admin sebagai

administrator web servernya. Halaman user meliputi: halaman start menu,

halaman kegiatan, halaman foto atau gallery, halaman wisata dan kuliner.

Sedangkan untuk halaman admin yang berhubungan dengan CRUD yakni

meliputi: halaman login, home, kegiatan, foto, wisata dan kuliner.

1. Halaman Start Menu

Gambar 3.12 Start Menu

(45)

31 kegiatan, foto, wisata, dan kuliner. Menu tersebut digunakan untuk menuju

halaman yang diinginkan.

2. Halaman Kegiatan

Gambar 3.13 Halaman Kegiatan

Didalam Halaman Kegiatan terdapat gambar sebagai header dan list daftar

kegiatan yang telah di inputkan sebelumnya oleh admin di website Humas Setda

Kota Batu.

3. Halaman Foto

Gambar 3.14 Halaman Foto

(46)

32

4. Halamam Wisata dan Halaman Kuliner

Gambar 3.15 Halaman Wisata dan Kuliner

Pada halaman wisata memiliki tampilan yang sama dengan halaman

kuliner yang menampilkan daftar kuliner dan wisata tampak seperti gambar

diaatas.

5. Halaman Website Login

Dibawah ini merupakan desain antarmuka dari halaman login. Admin

diharuskan memasukkan username dan password untuk masuk ke halaman admin

dengan meng-klik button Sign-in.

(47)

33

6. Halaman Website Home

Tampilan awal dari halaman admin, terdiri dari menu Kegiatan, wisata,

kuliner, foto, button cari dan Logout. Menu-menu tersebut digunakan untuk

menuju ke halaman-halaman yang diinginkan. Button cari digunakan untuk

mencari data yang telah diinputkan di “input text” dan logout digunakan untuk

keluar dari halaman admin atau kembali pada halaman login.

Gambar 3.17 Halaman Website Home

7. Halaman Data (Tabel) Website

Halaman Data Tabel merupakan tampilan halaman dari menu Kegiatan,

Wisata, Kuliner dan Foto. Karena ke empat halaman tersebut memiliki tampilan

halaman yang sama.

(48)

34 untuk menambahkan data baru.

Gambar 3.18 Halaman Data (Tabel) Website

8. Halaman Tambah Data

Halaman tambah Data digunakan untuk menambahkan data baru. Terdapat

tombol Simpan yang berfungsi untuk menyimpan data yang telah di isikan.

Halaman tambah data ini dimiliki setiap halaman (Kegiatan, Wisata, Kuliner dan

Foto).

(49)

35

9. Halaman Edit Data

Halaman Edit Data digunakan untuk merubah isi data yang diinginkan.

Terdapat tombol ubah yang berfungsi untuk menyimpan data yang telah dirubah.

Sama hal nya dengan halaman tambah data, halaman ini juga dimiliki setiap

halaman (Kegiatan, Wisata, Kuliner dan Foto).

Gambar 3.20 Halaman Edit Data

(50)

36

3.3.4 Tampilan Proyek

1. Halaman Login Website

Gambar 3.22 Halaman Login Website

2. Halaman Utama (Home) Website

Gambar 3.23 Halaman Utama Website (Home / Dashboard)

3. Halaman Website Data Wisata

(51)

37

4. Form Input Data Wisata

Gambar 3.25 Form Input Data Wisata

5. Halaman Website Data Kuliner

Gambar 3.26 Halaman Website Data Kuliner

6. Form Input Data Kuliner

(52)

38

7. Halaman Website Data Foto

Gambar 3.28 Halaman Website Untuk Menampilkan Data Foto

8. Form Input Data Foto

(53)

39

9. Halaman Website Data Kegiatan

Gambar 3.30 Halaman Website Untuk Menampilkan Data Kegiatan

10. Form Input Data Kegiatan

(54)

40

11. Aplikasi Menu Utama

Gambar 3.32 Aplikasi Menu Utama

12. Aplikasi Menu Kegiatan

(55)

41

13. Aplikasi Menu Gallery Foto

Gambar 3.34 Aplikasi Menu Gallery Foto

14. Aplikasi Menu Wisata

(56)

42

15. Aplikasi Menu Kuliner

(57)

43 BAB IV

PENUTUP

4.1 Kesimpulan

Praktik Kerja Lapangan (PKL) yang telah dilaksanakan selama 4 (empat)

minggu ini dapat menghasilkan sebuah website dan aplikasi yang dapat digunakan

masyarakat umum dan mempermudah admin pengelola. Website dan aplikasi

yang dibuat juga dapat membantu Bagian Hubungan Masyarakat Sekretariat

daerah kota Batu.

4.2 Saran

(58)

44 DAFTAR PUSTAKA

Andi, M. (2016, March).

Pengertian Sublime Text Editor

. Retrieved from

http://www.pemulabelajar.com/2016/03/pengertian-sublime-text-editor.html

Baru, J. (2016). Retrieved from

http://www.jadibaru.com/android/pengenalan-android-studio-2/

Ogiana. (n.d.). Perancangan Website Ogiana's House Menggunakan PHP Dan

MySQL.

repository.usu.ac.id

, 14-25.

(59)

45 LAMPIRAN

Lampiran 1 : Listing Program

Index.php

<title>Form Login</title>

<nav id="mainNav" class="navbar navbar-default

navbar-fixed-top navbar-inverse">

<button type="button" class="navbar-toggle collapsed"

data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

(60)

46

</button>

<!-- <a class="navbar-brand page-scroll"

href="#page-top">Apotek Bersama</a> -->

</div>

<form class="form-horizontal" action="proses_login.php"

method="POST">

<input type="password" name="password"

(61)

47

</div>

$query = "SELECT * FROM admin WHERE username='$username' AND password='$password'";

$result = mysql_query($query,$con) or die(mysql_error()); $num_row = mysql_num_rows($result);

"<script>alert('Gagal Login'); window.location = 'index.php'</script>";

media="screen">

<title>Anime Coder</title>

(62)

48

n.js"></script>

<body>

<div class="container"> <h2> HUMAS SETDA</h2>

<nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <li><a href="wisata.php"> Wisata</a></li> <li><a href="kuliner.php"> Kuliner</a></li> <li><a href="foto.php"> Foto</a></li>

<img src="img/header.jpg" class="img-rounded"

width="1000px" height="300px" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1">