rancang bangun website portal pada kantor badan …

RANCANG BANGUN WEBSITE PORTAL PADA KANTOR

BADAN KESATUAN BANGSA POLITIK DAN

PERLINDUNGAN MASYARAKAT KOTA PALOPO

ADI MURDAYANI

1504411060

FAKULTAS TEKNIK KOMPUTER

UNIVERSITAS COKROAMINOTO PALOPO

2020

SKRIPSI

RANCANG BANGUN WEBSITE PORTAL PADA KANTOR BADAN

KESATUAN BANGSA POLITIK DAN PERLINDUNGAN

MASYARAKAT KOTA PALOPO

Diajukan sebagai salah satu syarat untuk melakukan penelitian dalam rangka

penyusunan skripsi pada Program Studi Informatika Fakultas Teknik

Komputer Universitas Cokroaminoto Palopo

ADI MURDAYANI

1504411060

PROGRAM STUDI INFORMATIKA



2020

iv

ABSTRAK

Adi. 2019. Rancang Bangun Website Portal pada Kantor Badan Kesatuan Bangsa

Politik dan Perlindungan Masyarakat Kota Palopo (dibimbing oleh Nirsal dan

Jumardi).

Tujuan penelitian ini adalah untuk membuat rancang bangun website portal pada

Kantor Badan Kesatuan Bangsa Politik dan Perlindungan Masyarakat Kota

Palopo, dimana penyebaran informasi dari kantor ini masih secara manual. Jenis

penelitian yang digunakan yaitu Research and Development (R&D) mengacu

pada model waterfall. Metode pegumpulan data yang digunakan yaitu observasi,

wawancara, dokumentasi dan studi pustaka. Adapun software yang digunakan

adalah sublime text sebagai text editor, PHP sebagai bahasa pemrograman,

framework codeigneter, MySQL untuk pengelolahan basis data dan xampp

sebagai local servernya. Teknik pengujian yang digunakan dalam sistem ini yaitu

teknik pengujian white box testing. Hasil penelitian rancang bangun website portal

ini menyediakan semua data-data yang terkait dengan website kantor Badan

Kesatuan Bangsa Politik dan Perlindungan Masyarakat dan telah disesuaikan

terlebih dahulu sehingga dapat memudahkan pihak kantor kesbangpol dalam

mengoperasikan sistem tersebut. hasil pengujian dan perhitungan didapatkan

jumlah cyclomatic complexity = 47, independent path = 47, dan region = 47.

Kata Kunci: Rancang bangun, website portal, Kesbangpol dan Linmas.

v

KATA PENGANTAR

Puji syukur Alhamdulillah penulis panjatkan kehadirat ALLAH SWT yang

telah memberikan rahmat dan hidayat-Nya sehingga penulis dapat menyelesaikan

skripsi ini dengan judul “Rancang Bangun Website Portal pada Kantor

Kesbangpol dan Linmas Kota Palopo”.

Penulisan skripsi ini diajukan untuk memenuhi salah satu syarat kelulusan

dalam jenjang perkuliahan strata 1 Universitas Cokroaminoto Palopo. Dalam

penulisan skripsi ini tidak lepas dari hambatan dan kesulitan, namun berkat

bimbingan, bantuan, nasihat dan saran serta kerjasama dari berbagai pihak,

khususnya pembimbing, segala hambatan tersebut akhirnya dapat diatasi dengan

baik.

Penulis menyadari bahwa skripsi ini jauh dari sempurna sehingga penulis

membutuhkan kritik dan saran yang bersifat membangun untuk kemajuan

pendidikan dimasa yang akan datang. Selanjunya, dalam penulisan skripsi ini

penulis banyak diberi bantuan oleh berbagai pihak.

Dalam kesempatan ini penulis dengan tulus hati mengucapkan terima

kasih kepada :

1. Bapak Prof. Hanifie Mahtika. MS., Selaku Rektor Universitas Cokroaminoto

Palopo yang selalu menjadi panutan bagi seluruh mahasiswa.

2. Ibu Rusmala. S.Kom., M.Kom., selaku Dekan Fakultas Teknik Komputer

yang telah memudahkan segala perizinan penelitian.

3. Bapak Nirsal. S.Kom., M.Pd., selaku Wakil Dekan Fakultas Teknik

Komputer yang tiada hentinya selalu memberikan motivasi.

4. Bapak Nirsal. S.Kom., M.Pd., selaku dosen pembimbing I dalam penyusunan

skripsi ini. Terima kasih atas bimbingan dan kesabarannya selama ini

sehingga penulis dapat menyelesaikan skripsi ini.

5. Bapak Andi Jumardi.S.Pd., M.Pd, selaku dosen pembimbing II yang telah

memberikan saran dan kritik serta masukan untuk penyusunan skripsi ini.

6. Bapak/Ibu Dosen Fakultas Teknik Komputer yang telah mendidik dan

mengajarkan berbagai disiplin ilmu kepada penulis.

vi

7. Kedua orang tua saya yang telah memberikan doa dan restu serta dukungan

baik materil maupun moril, sehingga skripsi ini dapat terselesaikan dengan

tepat waktu.

8. Seluruh rekan-rekan seperjuangan angkatan 2015 yang selama ini telah

memberikan dukungan dan setia menemani baik suka maupun duka.

Terakhir semoga segala bantuan yang telah diberikan sebagai amal soleh

senantiasa mendapatkan ridho ALLAH SWT. Sehingga akhirnya skripsi ini dapat

bermanfaat bagi kemajuan dunia pendidikan terutama di bidang teknologi

informasi komputer.

Palopo, Februari 2020

Adi Murdayani

vii

RIWAYAT HIDUP

Adi Murdayani. Lahir di Sukamukti, 08 Agustus 1996, anak

keempat dari empat bersaudara, buah hati dari pasangan

Ngatio dan Ngatiyem. Peneliti menempuh pendidikan Sekolah

Dasar di SDN 175 Sukamukti dan lulus pada tahun 2008.

Kemudian peneliti melanjutkan pendidikan di Sekolah

Menegah Pertama (SMP) di SMP Negeri 3 Sukamaju dan lulus

pada tahun 2011, selanjutnya pada tahun yang sama peneliti melanjutkan Sekolah

Menegah Kejuruan (SMK) di SMK Kartika Wirabuana XX-2 Kota Palopo dan

Lulus pada tahun 2014. Pada tahun 2015 peneliti melanjutkan pendidikan di

Universitas Cokroaminoto Palopo dan memilih Fakultas Teknik Komputer

(FTKom) Program Studi Informatika. Untuk menyelesaikan studi di Universitas

Cokroaminoto Palopo dan memperoleh gelar sarjana komputer, peneliti menulis

sebuah skripsi yang berjudul Rancang Bangun Website Portal pada Kantor Badan

Kesatuan Bangsa Politik dan Perlindungan Masyarakat Kota Palopo.

viii

DAFTAR ISI

Halaman

HALAMAN JUDUL .......................................................................................... i

LEMBAR PENGESAHAN ............................................................................... ii

PERNYATAAN KEASLIAN SKRIPSI ............................................................. iii

ABSTRAK .......................................................................................................... iv

KATA PENGANTAR ....................................................................................... v

RIWAYAT HIDUP ............................................................................................ vii

DAFTAR ISI ......................................................................................................viii

DAFTAR TABEL .............................................................................................. x

DAFTAR GAMBAR ......................................................................................... xi

DAFTAR LAMPIRAN .......................................................................................xiv

BAB I PENDAHULUAN

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

1.2 Rumusan Masalah ............................................................................ 3

1.3 Tujuan Penelitian ............................................................................. 3

1.4 Manfaat Penelitian ........................................................................... 3

BAB II TUJUAN PUSTAKA

2.1 Kajian Teori ..................................................................................... 5

2.2 Hasil Penelitian yang Relevan ......................................................... 18

2.3 Kerangka Pikir ................................................................................. 20

BAB III METODE PENELITIAN

3.1 Jenis Penelitian ................................................................................. 21

3.2 Tempat dan Waktu Penelitian .......................................................... 23

3.3 Batasan Penelitian ............................................................................ 23

3.4 Teknik Pengumpulan Data ............................................................... 24

3.5 Tahap Penelitian ............................................................................... 24

3.6 Analisis Penelitian ............................................................................ 25

1 Analisis Sistem yang Berjalan....................................................... 25

2 Analisis Sistem yang Diusulkan .................................................... 26

3.7 Perancangan Desain Produk ............................................................. 25

ix

BAB IV HASIL PENELITIAN DAN PEMBAHASAN

4.1 Hasil ................................................................................................. 61

4.2 Pembahasan ...................................................................................... 81

BAB V KESIMPULAN DAN SARAN

5.1 Kesimpulan ...................................................................................... 84

5.2 Saran ................................................................................................. 84

DAFTAR PUSTAKA ........................................................................................ 86

LAMPIRAN ....................................................................................................... 89

x

DAFTAR TABEL

Halaman

Tabel 1. Use case diagram .................................................................................... 13

Tabel 2. Class diagram ......................................................................................... 14

Tabel 3. Activity diagram ...................................................................................... 15

Tabel 4. Sequence diagram ................................................................................... 15

Tabel 5. Simbol flowchart ..................................................................................... 16

Tabel 6. Simbol basis path .................................................................................... 17

Tabel 7. Aktor Diagram Use Case ........................................................................ 27

Tabel 8. User ......................................................................................................... 57

Tabel 9. Biodata .................................................................................................... 58

Tabel 10. Kategori ................................................................................................. 58

Tabel 11. Sejarah ................................................................................................... 58

Tabel 12. Visimisi ................................................................................................. 59

Tabel 13. Struktur.................................................................................................. 59

Tabel 14. Berita ..................................................................................................... 59

Tabel 15. User_level ............................................................................................. 60

Tabel 16. Hasil pengujian sistem .......................................................................... 82

xi

DAFTAR GAMBAR

Halaman

Gambar 1. Kerangka pikir ..................................................................................... 20

Gambar 2. Skema R&D penelitian........................................................................ 21

Gambar 3. Skema waterfall penelitian .................................................................. 23

Gambar 4. Skema tahapan penelitian .................................................................... 25

Gambar 5. Analisis sistem yang sedang berjalan .................................................. 26

Gambar 6. Analisis sistem yang diusulkan ........................................................... 26

Gambar 7. Diagram use case halaman login admin. ............................................ 30

Gambar 8. Diagram use case kelola visi dan misi ................................................ 30

Gambar 9. Diagram use case kelola struktur organiasi ........................................ 31

Gambar 10. Diagram use case kelola sejarah ....................................................... 31

Gambar 11. Diagram use case kelola berita ......................................................... 32

Gambar 12. Diagram use case kelola halaman level user .................................... 32

Gambar 13. Diagram use case kelola halaman kategori....................................... 33

Gambar 14. Diagram use case edit profile ........................................................... 33

Gambar 15. Diagram use case tabel user .............................................................. 34

Gambar 16. Diagram use case tabel user .............................................................. 34

Gambar 17. Diagram use case user ...................................................................... 35

Gambar 18. Activity diagram login admin ........................................................... 36

Gambar 19. Activity diagram tambah data berita.................................................. 36

Gambar 20. Activity diagram edit data berita ....................................................... 37

Gambar 21. Activity diagram hapus data berita .................................................... 37

Gambar 22. Activity diagram tambah kategori ..................................................... 38

Gambar 23. Activity diagram edit kategori ........................................................... 38

Gambar 24. Activity diagram hapus kategori ........................................................ 39

Gambar 25. Activity diagram tambah user level .................................................. 39

Gambar 26. Activity diagram edit user level ......................................................... 40

Gambar 27. Activity diagram hapus user level ..................................................... 40

Gambar 28. Activity diagram tambah visi dan misi .............................................. 41

Gambar 29. Activity diagram edit visi dan misi .................................................... 41

Gambar 30. Activity diagram hapus visi dan misi ................................................ 42

xii

Gambar 31. Activity diagram tambah struktur organisasi. .................................... 42

Gambar 32. Activity diagram edit sturktur organisasi .......................................... 43

Gambar 33. Activity diagram hapus struktur organisasi ....................................... 43

Gambar 34. Activity diagram tambah sejarah. ...................................................... 44

Gambar 35. Activity diagram edit sejarah. ............................................................ 44

Gambar 36. Activity diagram hapus sejarah ......................................................... 45

Gambar 37. Activity diagram hapus data user ...................................................... 45

Gambar 38. Activity diagram hapus data pesan .................................................... 46

Gambar 39. Activity diagram edit profil ............................................................... 46

Gambar 40. Activity diagram user ........................................................................ 47

Gambar 41. Sequence diagram login admin ......................................................... 48

Gambar 42. Sequence diagram kelola menu berita .............................................. 48

Gambar 43. Sequence diagram kelola menu kategori .......................................... 49

Gambar 44. Sequence diagram kelola menu user level ........................................ 49

Gambar 45. Sequence diagram kelola menu visi dan misi ................................... 50

Gambar 46. Sequence diagram kelola menu struktur organisasi .......................... 50

Gambar 47. Sequence diagram kelola menu tabel user ........................................ 51

Gambar 48. Sequence diagram kelola menu edit profil ........................................ 51

Gambar 49. Sequence diagram user ...................................................................... 52

Gambar 50. Class diagram .................................................................................... 53

Gambar 51. Halaman login admin ........................................................................ 53

Gambar 52. Menu beranda (home)........................................................................ 54

Gambar 53. Menu profil ........................................................................................ 54

Gambar 54. Visi dan misi...................................................................................... 55

Gambar 55. Menu struktur organisasi ................................................................... 55

Gambar 56. Menu sejarah ..................................................................................... 56

Gambar 57. Menu berita ....................................................................................... 56

Gambar 58. Menu kontak ...................................................................................... 57

Gambar 59. Tampilan halaman login admin ......................................................... 60

Gambar 60. Tampilan halaman administrator ....................................................... 61

Gambar 61. Halaman kelola berita........................................................................ 61

Gambar 62. Halaman kelola kategori.................................................................... 62

xiii

Gambar 63. Halaman kelola visi dan misi ............................................................ 63

Gambar 64. Halaman kelola struktur organisasi ................................................... 63

Gambar 65. Halaman kelola sejarah ..................................................................... 64

Gambar 66. Halaman kelola level user ................................................................. 64

Gambar 67. Halaman kelola edit profile ............................................................... 65

Gambar 68. Halaman home ................................................................................... 65

Gambar 69. Halaman visi dan misi ....................................................................... 66

Gambar 70. Halaman sejarah ................................................................................ 66

Gambar 71. Halaman struktur organisasi .............................................................. 67

Gambar 72. Halaman berita .................................................................................. 67

Gambar 73. Halaman kontak................................................................................. 68

Gambar 74. Flowgraph dan flowchart halaman login admin .............................. 68

Gambar 75. Flowchart dan flowgraph kelola berita ............................................. 69

Gambar 76. Flowchart dan flowgraph kelola kategori ......................................... 70

Gambar 77. Flowchart dan flowgraph kelola visi dan misi .................................. 71

Gambar 78. Flowchart dan flowgraph kalola struktur organisasi......................... 72

Gambar 79. Flowchart dan flowgraph kelola sejarah ........................................... 73

Gambar 80. Flowchart dan flowgraph halaman home .......................................... 74

Gambar 81. Flowchart dan flowgraph halaman visi dan misi .............................. 75

Gambar 82. Flowchart dan flowgraph halaman struktur organisasi ..................... 76

Gambar 83. Flowchart dan flowgraph halaman sejarah ....................................... 77

Gambar 84. Flowchart dan flowgraph halaman berita ......................................... 78

Gambar 85. Flowchart dan flowgraph halaman kontak........................................ 79

xiv

DAFTAR LAMPIRAN

Halaman

Lampiran 1. Dokumentasi penelitian .................................................................. 91

Lampiran 2. Algoritma dasar program ................................................................ 93

BAB I

PENDAHULUAN

1.1 Latar Belakang

Menurut Yohanes, Herawati dan Sunyata (2013:5), kemajuan teknologi

informasi untuk mengeliminasi sekat-sekat birokrasi organisasi, serta membentuk

jaringan sistem manajemen dan proses kerja yang memungkinkan instansi–

instansi pemerintah bekerja secara terpadu untuk menyederhanakan akses dan

transparansi ke semua informasi dan layanan publik yang harus disediakan

pemerintah dengan prosedur pelayanan yang baku dan standar yang jelas. Hal

terpenting yang harus kita cermati adalah instansi–instasi pemerintah merupakan

suatu pendorong serta fasilitator dalam keberhasilan berbagai kegiatan dalam hal

pembangunan. Oleh karena itu keberhasilan pembangunan harus didukung oleh

kecepatan arus data dan informasi antar instasi agar terjadi keterpaduan sistem

antar pemerintah dengan pihak pengguna lainnya. Tuntutan masyakarat akan

pemerintahan yang baik sudah sangat mendesak untuk dilaksanakan oleh

aparaturnya. Salah satu solusi yang diperlukan adalah keterpaduan sistem

penyelenggaraan pemerintah melalui jaringan sistem informasi online antar

instansi pemerintah baik pusat dan daerah untuk mengakses seluruh data dan

informasi terutama berkaitan pelayanan publik.

Menurut Tarmin dkk (2018:1), Badan Kesatuan Bangsa, Politik dan

Perlindungan Masyarakat atau biasa disingkat dengan Kesbangpol dan Linmas

merupakan unsur Pemerintah bidang Kesatuan Bangsa dan Politik dalam Negeri

yang dipimpin oleh Kepala Badan yang berkedudukan dibawah dan bertanggung

jawab kepada Gubernur melalui Sekertaris Daerah. Badan Kesatuan Bangsa dan

Politik mempunyai tugas membantu Gubernur, melaksanakan urusan pemerintah

bidang Kesatuan Bangsa dan Politik dalam Negeri sebagaimana yang telah di

amanatkan Undang–Undang dan peraturan yang berlaku.

Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan Masyarakat

(Kesbangpol dan Linmas) Kota Palopo merupakan sebuah instansi pemerintah

yang beralamat di Jalan K.H. Hasyim Kelurahan Tompotika Kecamatan Wara

Kota Palopo Provinsi Sulawesi Selatan. Kantor Kesbangpol dan Linmas Kota

Palopo merupakan salah satu instansi pemerintah yang melakukan pelayanan

2

pemantauan pemeilihan kepala daerah, memantau lembaga-lembaga daerah dan

lain-lain. Proses administrasi dan pelayanan kepada masyarakat yang dilakukan

oleh pihak kantor sebagian besar menggunakan sistem komputer. Namun dalam

hal penyebaran informasi kepada masyarakat masih secara manual seperti

menggunakan media spanduk maupun penyampaian secara lisan sehingga

informasi yang disebarkan oleh pihak kantor tidak maksimal diterima oleh

masyarakat.

Berdasarkan hasil wawancara awal dengan Pegawai Kesbangpol dan

Linmas (Dr. Baso Sulaiman, M. Ag. wawancara pra-riset, 9 Juni 2019), beliau

mengemukakan bahwa penyebaran informasi di Kantor Kesbangpol dan Linmas

Kota Palopo dianggap kurang efektif oleh masyarakat dan pihak kantor. Jauh

sebelum wawancara ini saya lakukan, beliau telah meminta saya agar

membuatkan sebuah media berupa website untuk Kesbangpol dan Linmas Kota

Palopo, agar informasi Kantor Kesbangpol dan Linmas Kota Palopo dapat di

akses di manapun dan kapanpun. Dengan adanya masalah tersebut, maka di

perlukan sebuah sarana yang dapat membantu proses kerja dari Kantor

Kesbangpol dan Linmas Kota Palopo menjadi lebih cepat serta memudahkan

masyarakat dalam mendapatkan informasi dan dapat diakses dimanapun dan

kapanpun. Solusi untuk memecahkan masalah yang terjadi yaitu membuat sebuah

website Kantor Kesbangpol dan Linmas Kota Palopo.

Menurut Arafat dan Trimarsiah (2017:250), website adalah kumpulan

dari halaman-halaman situs, yang biasanya terangkum dalam sebuah domain atau

subdomain, yang tempatnya berada di dalam World Wide Web (WWW) di

internet. Sebuah halaman web adalah dokumen yang ditulis dalam format HTML

(Hyper Text Markup Language), yang hampir selalu bisa diakses melalui HTTP,

yaitu protokol yang menyampaikan informasi dari server website untuk

ditampilkan kepada para pemakai melalui website browser. Semua publikasi dari

website-website tersebut dapat membentuk sebuah jaringan informasi yang sangat

besar. Pilihan untuk membangun sebuah sistem informasi website juga lebih

beragam dan dipermudah, salah satunya dengan codeigniter. Codeigniter adalah

sebuah framework untuk website yang dibuat dalam format PHP.

3

Setelah mempelajari dan mengamati permasalahn yang ada, maka penulis

berkeinginan untuk melakukan penelitian dengan judul “Rancang Bangun Website

Portal pada Kantor Kesbangpol dan Linmas Kota Palopo”.

1.2 Rumusan Masalah

Berdasarkan latar belakang masalah yang telah dikemukakan di atas,

maka dapat dirumuskan masalah “Bagaimana merancang dan membangun website

portal pada kantor Badan Kesatuan Bangsa, Politik dan Perlindungan Masyarakat

(Kesbangpol dan Linmas) Kota Palopo?”.

1.3 Tujuan Penelitian

Berdasarkan rumusan masalah diatas maka tujuan penelitian yang akan

dilakukan adalah merancang dan membangun website portal yang dapat

digunakan oleh Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan

Masyarakat (Kesbangpol dan Linmas) Kota Palopo.

1.4 Manfaat Penelitian

Berdasarkan manfaat dalam penelitian merancang dan membangun

website portal Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan

Masyarakat (Kesbangpol dan Linmas) Kota Palopo, yang dibuat dapat diharapkan

dapat bermanfaat, diantaranya:

1. Manfaat Bagi Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan

Masyarakat (Kesbangpol dan Linmas) Kota Palopo

Hasil penelitian ini bermanfaat bagi Kantor Badan Kesatuan Bangsa,

Politik dan Perlindungan Masyarakat (Kesbangpol dan Linmas) Kota Palopo

untuk memberikan informasi Badan Kesatuan Bangsa, Politik dan Perlindungan

Masyarakat (Kesbangpol dan Linmas) kepada masyarakat luas tentang profil

kantor tersebut beserta pelayanan yang ada.

2. Manfaat Bagi Peneliti

Bagi peneliti bermanfaat sebagai penambah wawasan dalam

pengaplikasian teknologi dan mengetahui media yang tepat dalam penyebaran

informasi.

4

3. Manfaat terhadap Dunia Akademik

Manfaat penelitian ini terhadap dunia akademik adalah menambah literatur

bagi pembuat laporan sejenis dalam lingkungan Universitas Cokroaminoto

Palopo.

BAB II

TINJAUAN PUSTAKA

2.1 Kajian Teori

Kajian teori berisi topik-topik yang akan dibahas dalam penelitian ini.

Kajian teori mempunyai peranan penting dalam hal melakukan penelitian

kuantitatif. Dengan kajian teori, peneliti dapat menjustifikasi adanya masalah

penelitian dan mengidentifikasikan arah penelitian.

1. Konsep Dasar Perancangan Website

a. Pengertian Perancangan

Menurut Dengen dan Hatta (dalam Siregar, Siregar dan Melani, 2018:113),

perancangan didefinisikan sebagai proses aplikasi berbagai teknik dan prinsip

bagi tujuan pendefinisian suatu perangkat, suatu proses atau sistem dalam detail

yang memadai untuk memungkinkan realisasi fisiknya. Sedangkan menurut

Nugroho (2016:718), langkah awal dalam membuat sebuah sistem adalah

perancangan dari sistem tersebut. Perancangan adalah proses pengembangan

spesifikasi baru berdasarkan rekomendasi hasil analisis sistem.

Berdasarkan definisi di atas peneliti dapat menarik kesimpulan bahwa

perancangan merupakan suatu pola/tujuan untuk masalah yang dihadapi

perusahaan ataupun organisasi.

b. Rancang Bangun

Menurut Christian, Hasinto dan Agustina (2018:6), perancangan sistem

mulanya diawali dengan menentukan segala keperluan yang akan memenuhi apa

yang dibutuhkan oleh sistem, siapa yang mengambil lengkah dan bagaimana cara

menyesuaikannya. Pada dasarnya perancangan sistem bergerak dari input menuju

ke output sistem, yang terdiri dari reports dan file untuk memenuhi kebutuhan

organisasi. Menurut Bambang (dalam Sari 2017:83), menjelaskan rancang bangun

adalah proses pembangunan sistem untuk menciptakan sistem baru maupun

mengganti atau memperbaiki sistem yang telah ada baik secara keseluruhan

maupun hanya sebagian. Berdasarkan definisi di atas peneliti dapat menarik

kesimpulan bahwa perancangan merupakan suatu pola/tujuan untuk masalah yang

dihadapi perusahaan ataupun organisasi.

6

c. Website

World Wide Web atau sering di kenal sebagai web adalah suatu layanan

sajian informasi yang menggunakan konsep hyperlink (tautan), yang

memudahakan surfer (sebutan para pemakai komputer yang melakukan browsing

atau penelusuran informasi melalui internet). Keistimewaan inilah yang telah

menjadikan web sebagai service yang paling cepat pertubuhannya. Web

mengijinkan pemberian highlight (penyorotan atau penggaris bawahan) pada kata-

kata atau gambar dalam sebuah dokumen untuk menghubungkan atau menunjuk

ke media lain seperti dokumen, frase, movie clip, atau file suara. Web dapat

menghubungkan dari sembarang tempat dalam sebuah dokumen atau gambar ke

sembarang tempat di dokumen lain. Dengan sebuah browser yang memiliki

Grapihcal User Interface (GUI), link-link dapat di hubungkan ke tujuannya

dengan menunjuk link tersebut dengan mouse dan menekannya. Susilo, Kurniati

dan Kasmawati (2018:99)

Menurut Christian, Hasinto dan Agustina (2018:22), website atau di

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

d. Web Server

Menurut Aziz dan Tampati (2015:13), perangkat lunak web server dikenal

dapat melayani permintaan pengguna berupa http dari client yang terhubung

dalam jaringan dan memberikan pelayanan kepada yang meminta informasi

berkaitan dengan website dan memberikan suatu hasil berupa halaman web yang

ditampilkan dalam browser. Berikut merupakan jenis web server antara lain:

Apache Web Server, Apache Tomcat, MS Windows server 2003 Internet

Information Service (IIS), Light HTTP, Sun Java System Web Server, Zerus Web

Server serta Nginx. Sedangkan menurut Christian, Hasinto dan Agustina (2018:

23), web server adalah sebuah perangkat lunak server yang berfungsi menerima

permintaan HTTP atau HTTPS dari klien yang dikenal dengan web browser dan

mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang

umumnya berbentuk dokumen HTML.

7

e. Model View Controller (MVC)

MVC adalah sebuah teknik pemrograman yang memisahkan bisnis logic

(alur pikir), data logic (penyimpanan data) dan Interface logic (antar muka

aplikasi) atau secara sederhana adalah memisahkan antara desain, data, dan

proses. MVC mengatur arsitektur sebuah aplikasi. Umumnya aplikasi yang

dibangun oleh MVC adalah aplikasi yang cukup besar, karena salah satu

keuntungan MVC yaitu kemudahan dalam pemeliharaan dan pengembangan

aplikasi tersebut. CodeIgniter menggunakan konsep ini, dengan memisahkan kode

database ke folder model, kode proses ke folder kontrol, dan kode tampilan ke

kode view (Putri dan S. Arya, 2016:18)

Menurut Wijaya dan Christian (2019:96), Model View Controller (MVC)

adalah sebuah konsep yang diperkenalkan oleh penemu smalltalk (Trygye

Reenskaug) untuk membuat satu jenis data jaringan menjadi jenis data lainnya

bersama dengan pemrosesan (model), mengisolasi dari proses manipulasi

(controller) dan tampilan (view) untuk dipresentasikan pada sebuah user interface.

f. Internet

Diana (2016:77) menjelaskan tentang Internet (Interconnection

networking) yaitu sistem jaringan yang menghubungkan komputer-komputer

dalam sistem jaringan yang sangat besar meliputi seluruh dunia, menggunakan

standar yang disebut TCP/IP (Internet Protocol Suite). Dengan menggunakan

teknologi internet memungkinkan komputer yang berlainan tipe untuk dapat

berinteraksi dengan pengguna komputer lainnya dan terjadinya pertukaran data

yang sangat cepat.

Pibriana dan Ricoida (2017:105) mendefinisikan tentang Internet adalah

alat penghubung antar organisasi dan pelanggannya, sehingga tercipta sebuah

organisasi baru secara virtual, internet sebuah sistem komputer di seluruh dunia

yang menggunakan sarana umum untuk menghubungkan perangkat keras dan

mentransmisikan informasi digital, komunikasi orang dengan menggunakan

sebuah teknologi komunikasi yang umum dan mendistribusikan sistem informasi

secara global.

8

Sehingga dapat disimpulkan Internet memungkinkan satu individu untuk

terhubung dengan satu atau lebih individu lainnya baik untuk berkomunikasi,

menerima serta menyebarkan informasi.

g. Bootstrap

Menurut Christian, Hasinto dan Agustina (2018:22), bootstrap adalah

paket aplikasi siap pakai untuk membuat front-end sebuah website. Bisa

dikatakan, bootstrap adalah template desain web dengan fitur plus. Bootstrap

diciptakan untuk mempermudah proses desain web bagi berbagai tingkat

pengguna, mulai dari level pemula hingga yang sudah berpengalaman. Cukup

bermodalkan pengetahuan dasar mengenai HTML dan CSS, anda pun siap

menggunakan bootstrap. Sedangkan menurut Zakir (2016:7), bootstrap kerangka

front-end yang berfungsi untuk pengembangan responsive web layout lebih cepat

dan lebih mudah.

h. Bahasa Pemrograman PHP

Menurut Sari (2017: 83), PHP adalah singkatan dari PHP Hypertext

Preprocessor. Saat pertama kali dikembangkan oleh programmer bernama

Rasmus Lerdoff, PHP awalnya adalah singkatan dari Personal Home Page Tools.

Sedangkan menurut Pranata, Hamdani dan K. Marisa (2015:26), PHP merupakan

singkatan dari Hypertext Preprocesor adalah skrip yang dijalankan di server.

Hasilnyalah yang dikirimkan ke klien, tempat pemakai menggunakan browser.

Keuntungan PHP, kode yang menyusun program tidak perlu diedarkan ke

pemakai sehingga kerahasiaan kode dapat dilindungi.

i. Java Script

Java Script adalah bahasa pemrograman yang dapat memegang kontrol

aplikasi, berorientasi objek murni dan digunakan secara prosedur. JavaScript

merupakan bahasa yang case sensitive seperti halnya bahasa pemrograman Java

yaitu membedakan penelitian dengan huruf kecil dan huruf besar memberi arti

yang berbeda. Java menggunakan kelas untuk membentuk suatu objek. Sejumlah

kelas sudah tersedia dan dapat digunakan dengan mudah, bahkan dapat

dikembangkan jauh melebihi konsep pewarisan, yang dimaksud pewarisan adalah

sifat yang ada pada bahasa pemrograman berorientasi objek yang memungkinkan

9

sifat-sifat suatu objek diturunkan dengan mudah ke objek lain. (Putri & Aryas,

2016:18) Sedangkan menurut Sibero (dalam Nasril & Saputra, 2016:50),

javascript adalah suatu bahasa pemrograman yang dikembangkan untuk dapat

berjalan pada web browser.

j. Framework

Menurut Suharsana, Wirawan dan S. Yuniastari (2016:21), pembuatan

website dengan framework yang berati kerangka kerja yang memudahkan

programmer untuk membuat sebuah aplikasi sehingga programmer akan lebih

mudah melakukan perubahan (customize) terhadap aplikasinya (website) dan

dapat memakainya kembali untuk aplikasi lain yang sejenis, dengan menggunakan

framework, delevoper tidak perlu membuat program dari awal, tetapi sudah

diberikan library fungsi-fungsi yang sudah diorganisasikan untuk dapat membuat

suatu program dengan cepat. Sedangkan menurut

k. HTML

Prabowo dan Syani (2017:73), mendefinisikan Hypertext Markup

Language (HTML) sebagai file teks murni yang dapat dibuat dengan editor teks

sembarang. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan

dokumen yang disajikan dalam browser web surfer. Dokumen ini umumnya berisi

informasi atau interface sistem di dalam internet. Sedangkan menurut Pranata,

Hamdani dan K. Marisa (2015:26), Hypertext Markup Language (HTML) dikenal

sebagai bahasa kode berbasis teks untuk membuat sebuah halaman website,

keberadaannya dikenal dengan adanya ekstensi *.hrml atau *.html. HTML

merupakan suatu bahasa website (WWW) yang dipergunakan untuk menyusun

dan membentuk dokumen agar dapat ditampilkan pada program browser. Ketika

user mengakses website, maka ia mengakses dokumen seseorang yang ditulis

dengan gunakan format HTML. Dapat disimpulkan bahwa HTML merupakan

protokol yang digunakan untuk transfer data atau dokumen dari website server ke

browser.

l. Codeigniter

Menurut Suharsana, Wirawan dan Yuniastari (2016:21), codeigniter

adalah sebuah framework yang digunakan untuk membuat sebuah aplikasi

10

berbasis website yang disusun dengan menggunakan bahasa PHP. Di dalam CI

terdapat beberapa macam kelas (class) yang berbentuk library dan helper.

Keduanya berfungsi untuk membantu pemrogram (programmer) dalam

mengembangkan aplikasinya. Sedangkan menurut Istiono, Hijrah dan Sutarya

(2016:54), codeigniter adalah aplikasi open source berupa framework dengan

model MVC (Model, View, Controller) untuk membangun website dinamis

dengan menggunakan PHP.

m. Jquery

Menurut Hidayatullah dan Kawistara (dalam Fridayanthie dan Mahdiati,

2016: 131), jquery adalah suatu library javascript yang akan menjadi web lebih

bagus dalam hal user interface. Lebih stabil, dan dapat mempercepat waktu

kinerja dalam membuat web hanya perlu memanggil fungsinya saja tanpa harus

membuat dari awal. Sedangkan Menurut Prabowo dan Syani, (2017:76)

mengemukakan jquery adalah kumpulan kode/fungsi java script siap pakai,

sehingga memudahkan dan mempercepat dalam membuat kode java script.

n. Xampp

Menurut Riyanto (dalam Nasril dan Saputra, 2016:49), xampp (X Apache

MySQL PHP Perl) merupakan paket PHP dan MySQL berbasis open source yang

dapat digunakan sebagai tool pembantu pengembangan aplikasi berbasis PHP.

Sedangkan menurut Christian, Hesinto dan Agustina (2018: 22), Xampp adalah

salah satu paket installer yang berisi apache yang merupakan web server tempat

menyimpan file yang diperlukan website, dan phpmyadmin sebagai aplikasi yang

digunakan untuk perancangan database MySQL.

o. Database MySQL

Menurut Pranata, Hamdani dan Marisa (2015:26), MySQL merupakan

software yang berbasis structure query language (SQL) tergolong sebagai DBMS

(Database Management System) yang bersifat open source MySQL adalah

implementasi dari sistem manajemen database relasional (RDBMS) yang

didistribusikan secara gratis dibawah lisensi GPL (Generic Public License). Setiap

penggunaan dapat secara bebas menggunakan MySQL, namun dengan batas

perangkat lunak tersebut tidak boleh dijadikan produk turunan yang bersifat

11

komersial. Sedangkan menurut Rahajo (dalam Siregar, Siregar dan Melani,

2018:115), MySQL merupakan sistem database yang banyak digunakan untuk

pengembangan aplikasi web. Karena pengelolahan datanya sederhana, memiliki

tingkat keamanan yang bagus, dan mudah diperoleh.

Berdasarkan pendapat yang dikemukakan oleh para ahli diatas dapat

ditarik kesimpulan bahwa MySQL adalah suatu software atau program yang

digunakan untuk membuat sebuah basis data yang bersifat open source.

p. Sublime Text 3

Menurut Farid (2015:3), mendefinisikan sublime text sebagai teks editor

berbasis Python, sebuah teks editor yang elegan, kaya fitur, cross platform, mudah

dan sederhana yang cukup terkenal dikalangan programmer developer

(pengembang), penulis dan desainer. Sublime text 3 mempunyai beberapa

keunggulan – keunggulan yang dapat membantu pengguna dalam membuat

sebuah web development. Sublime text 3 mempunyai fungsi untuk membuat

perubahan pada sebuah kode pada waktu yang sama dan dalam baris yang

berbeda, mempunyai fungsi yang berguna untuk mengakses file shortcut dengan

mudah, dapat mencari dan membuka file didalam sebuah project dengan cepat dan

mudah, Sublime text 3 mempunyai keunggulan dengan plugin yang berbasis

python plugin API. Text editor ini juga mempunyai plugin yang sangat beragam,

dan ini dapat memudahkan pengguna dalam mengembangkan software-nya. Drag

and drop dalam teks editor ini pengguna dapat menyeret dan melepas file text ke

dalam editor yang akan membuka tab baru secara otomatis. Split editing didalam

fitur ini pengguna dapat mengedit file secara berdampingan dengan klik file->new

menu into file.

Aplikasi teks editor inilah (sublime text 3) yang kemudian dipilih dan

digunakan oleh penulis, sebagai aplikasi untuk membuat script program aplikasi

website. Dengan segala kelebihan yang dimiliki oleh aplikasi ini maka akan lebih

mempermudah penulis dalam proses pembuatan program website.

q. Microsoft Visio 2010

Setiadi, dkk (2010:3), mengemukakan bahwa microsoft visio (atau sering

disebut visio) adalah sebuah program aplikasi komputer yang sering digunakan

12

untuk membuat diagram, diagram alir (flowchart), brainstrorm, dan skema

jaringan yang dirilis oleh microsoft corporation. Aplikasi ini menggunakan grafik

vektor untuk membuat diagram – diagramnya.

Microsoft visio 2010 di gunakan oleh penulis untuk merancang serta

menggambarkan alur kerja sistem yang akan dibuat secara sederhana, melihat atau

membuat suatu objek dari sudut pandang yang lain. Objek yang dimaksud di sini

adalah sketsa. Salah satu contoh sketsa yang dapat dibuat menggunakan microsoft

visio 2010 adalah diagram dan flowchart. Dengan menggunakan microsoft visio

2010, perancangan sederhana dapat dibuat dengan mudah.

r. Corel Draw X7

Suharmawan (2018:1) menuliskan bahwa corel draw adalah sebuah

drawing software yang sangat populer. Sebuah software yang serba guna dan

dimanfaatkan oleh para desainer dari berbagai aliran yaitu seni murni, desain logo,

desain ikon dan karakter, desain poster, brosur, kartu nama, cover buku dan

sebagainya. Digemari oleh desainer cetak karena memiliki palet warna yang

mendekati warna yang dihasilkan oleh mesin cetak.. Pertama kali muncul pada

tahun 1987, versi terakhir yang dirilis adalah X7. Popularitas dan penggunaannya

yang begitu luas membuat software lain yang sejenis, sedikit banyak kemudian

mengikuti tampilan dan cara penggunaannya, termasuk drawing software yang

tidak berbayar (open source). Corel draw X7 merupakan sebuah software editing

foto gambar yang berguna untuk membantu dalam mengolah dan mengelola

gambar ataupun foto yang ingin diedit corel draw X7 sendiri banyak digunakan

oleh para desain grafis untuk membuat logo, denah, foto vektor dan lain

sebagainya.

Aplikasi corel draw X7 inilah dengan segala keunggulan dan

kemudahannya penulis menggunakan aplikasi ini sebagai drawing software untuk

mendesain dan mengolah data berupa gambar atau foto yang akan disertakan

kedalam bagian-bagian website yang akan dibangun.

s. Unified Modeling Language (UML)

Shalahuddin dan Rosa (2015:137) menuliskan bahwa Unified Modeling

Language (UML) merupakan bahasa visual untuk pemodelan dan komunikasi

13

mengenai sebuah sistem dengan menggunakan diagram dan teks-teks khusus.

UML adalah sebuah bahasa yang telah menjadi standar industri untuk visualisasi,

merancang, dan mendokumentasikan sistem perangkat lunak. Tetapi karena UML

juga menggunakan class dan operation dalam konsep dasarnya, maka lebih cocok

untuk penulisan perangkat lunak dalam bahasa-bahasa berorientasi objek seperti

C++, Java dan VB.Net. Walaupun demikian UML dapat digunakan untuk

modeling aplikasi prosedural dalam visual basic. Berikut ini adalah berbagai

macam diagram UML:

1) Use Case Diagram

Use case adalah deskripsi fungsi dari sebuah sistem dari perspektif

pengguna. Use case bekerja dengan cara mendeskripsikan tipikal interaksi antara

user (pengguna) sebuah sistem dengan sistemnya sendiri melalui sebuah cerita

bagaimana sebuah sistem dipakai. Use case juga biasa dapat dikatakan sebagai

rangkaian atau uraian kelompok yang saling terkait dan membentuk sistem yang

teratur yang dilakukan atau di awasi sebuah actor. Adapun simbol use case

diagram dapat dilihat pada tabel berikut:

Tabel 1. Use case diagram No Gambar Nama Keterangan

1

Actor Menspesifikasikan himpunan peran yang pengguna

mainkan ketika berinteraksi dengan use case.

2 Dependency

Hubungan dimana perubahan yang terjadi pada

suatu elemen mandiri (independent) akan

mempengaruhi elemen yang bergantung padanya

elemen yang tidak mandiri (independent).

3 Generalization

Hubungan dimana objek anak (descendent berbagi

perilaku dan struktur data dari objek yang ada

diatasnya objek induk (ancestor).

4

Include Menspesifikasikan bahwa use case sumber secara

eksplisit.

5

Extend

Menspesifikasikan bahwa use case target

memperluas perilaku dari use case sumber pada

suatu titik yang diberikan.

6 Association

Menghubungkan antara objek satu dengan objek

lainnya.

7

System

Menspesifikasikan paket yang menampilkan sistem

secara terbatas.

8

Use Case

Deskripsi dari urutan aksi-aksi yang ditampilkan

sistem yang menghasilkan suatu hasil yang terukur

bagi suatu aktor.

14

No Gambar Nama Keterangan

9

Note

Elemen fisik yang eksis saat aplikasi dijalankan

dan mencerminkan suatu sumber daya komputasi.

Sumber: Rosa dan Shalahuddin (2015:156)

2) Class Diagram

Class diagram sangat membantu dalam visualisasi struktur kelas dari suatu

sistem. Hal ini disebabkan karena class adalah deskripsi kelompok obyek-obyek

dengan property, perilaku (operasi) dan relasi yang sama. Disamping itu class

diagram bisa memberikan pandangan global atas sebuah sistem. Adapun simbol

class diagram dapat dilihat pada tabel berikut:

Tabel 2. Class diagram No Gambar Nama Keterangan

1 Generalization

Hubungan dimana objek anak (descendent) berbagi

perilaku dan struktur data dari objek yang ada di

atasnya objek induk (ancestor).

2

Narcy

Association

Upaya untuk menghindari asosiasi dengan lebih dari

2 (dua) objek.

3 Class1

Class

Himpunan dari objek-objek yang berbagi atribut serta

operasi yang sama.

4

collaboration

Deskripsi dari urutan aksi-aksi yang ditampilkan

sistem yang menghasilkan suatu hasil yang terukur

bagi semua aktor.

5 Realization Operasi yang benar-benar dilakukan oleh suatu objek.

6

Dependency

Hubungan dimana perubahan yang terjadi pada suatu

elemen mandiri (independent) akan mempengaruhi

elemen yang tergantung padanya elemen yang tidak

mandiri.

7 Association

Menghubungkan antara objek satu dengan objek

lainnya.


3) Activity Diagram

Activity diagram adalah teknik untuk mendeskripsikan logika procedural,

proses bisnis dan aliran kerja dalam banyak kasus. Yang perlu diperhatikan disini

adalah diagram activity menggambarkan aktifitas sistem bukan apa yang

dilakukan actor. Jadi aktifitas yang dapat dilakukan oleh sistem. Berikut adalah

simbol-simbol yang sering digunakan pada saat pembuatan activity diagram:

15

Tabel 3. Activity diagram No Gambar Nama Keterangan

1

Actifity

Memperlihatkan bagaimana masing-masing kelas

antarmuka saling berinteraksi satu sama lain.

2

Action

State dari sistem yang mencerminkan eksekusi dari

suatu aksi.

3

Intital Node

Bagaimana objek dibentuk atau diawali.

4

Actifity Final

Node

Bagaimana objek dibentuk dan dihancurkan.

5

Fork Node Satu aliran yang pada tahap tertentu berubah

menjadi bebarapa aliran.


4) Sequence Diagram

Sequence Diagram digunakan untuk menggambarkan perilaku pada

sebuah scenario, diagram ini menunjukkan sejumlah contok obyek dan message

(pesan) yang diletakkan diantara obyek-obyek ini didalam use case. Komponen

utama sequence diagram terdiri atas obyek yang dituliskan dengan kotak

segiempat bernama message diwakili oleh garis dengan tanda panah dan waktu

yang ditunjukkan dengan progress vertical. Berikut simbol sequence diagram

dapat dilihat pada tabel berikut:

Tabel 4. Sequence diagram No Gambar Nama Keterangan

1

Life Line Objek entity, antar muka yang saling berinteraksi.

2 Message

Spesifikasi dari komunikasi antar objek yang

memuat informasi-informasi tentang aktivitas

yang terjadi.

3 Message

Spesifikasi dari komunikasi antar objek yang

memuat informasi-informasi tentang aktivitas

yang terjadi.


t. Flowchart

Menurut Iswandy (2015:73), flowchart merupakan urutan-urutan langkah

kerja suatu proses yang digambarkan dengan menggunakan simbol-simbol yang

disusun secara sistematis. Sedangkan menurut Sulindawati (dalam Laila 2018:21),

flowchart adalah penggambaran secara grafik dari langkah-langkah dan urut-

urutan prosedur dari suatu program. flowchart biasanya mempermudah

16

penyelesaian suatu masalah khususnya masalah yang perlu dipelajari dan

dievaluasi lebih lanjut.

Berdasarkan pengertian yang dikemukakan di atas, dapat disimpulkan

bahwa flowchart adalah proses atau alur logika suatu aplikasi, sehingga tanpa

melihat aplikasi, alur aplikasi dapat dimengerti.

Tabel 5. Simbol flowchart No Nama Simbol Keterangan

1. Terminator

Pemulaan/akhir program

2. Garis Alir

(Flow Line)

Arah aliran program

3. Preparation

Proses inisialisasi/pembelian harga

awal

4. Prosses

Proses perhitungan/proses pengolahan

data

5. Input/Output

Data

Proses input/output data, parameter,

informasi

6. Predefined Proses

(Sub Program)

Permulaan sub program/proses

menjalankan sub program

7. Decision

Perbandingan pernyataan,

penyeleksian data yang memberikan

pilihan untuk langkah selanjutnya

8. On Page Connector

Penghubung bagian-bagian flowchart

yang berada pada satu halaman

9. Off Page Connector

Penghubung bagian-bagian flowchart

yang berada pada halaman berbeda

Sumber: Iswandy (2015: 73)

2. Pengujian Sistem (White Box)

Menurut Pare (dalam Rahayuda, 2013:225), sistem pengujjian white box

adalah salah satu teknik pengujian menggunakan sistem white box testing adalah

basis path testing. Metode basis path digunakan untuk menentukan ukuran

kompleksitas logika dari suatu logika. Metode basis path testing yang digunakan

berguna untuk:

17

a. Mengukur kompleksitas logic dari desain prosedur dan sekaligus sebagai

pedoman untuk mendapatkan konsistensi jalur aplikasi.

b. Pengujian yang dilakukan dijamin menggunakan statement dalam program

minimal satu kali selama pengujian.

c. Menghitung cyclometris complexity sebagai ukuran kontitif untuk menentukan

jumlah independent path sebagai jalur yang perlu diuji. Notasi grafik alir

(flowgraph) adalah grafik program yang dihasilkan dari pemetaan flowchart

program yang ada untuk merepresentasikan aliran kontrol logika program

yang ada. Dalam notasi grafik alir (flowgraph) dikenal beberapa istilah, yaitu :

1) Jumlah region (R) grafik alir (flowgraph) sama dengan kompleksitas

siklomatis

2) Kompleksitas Siklomatis, V( G), untuk grafik alir G ditentukan sebagai V(G)

= (E – N) + 2, dimana E adalah jumlah edge grafik alir dan N adalah jumlah

simpul grafik alir.

3) Kompleksitas Siklomatis, V(G), untuk grafik alir G ditentukan sebagai V(G)

= P + 1, dimana P adalah jumlah simpul predikat yang diisikan dalam grafik

alir. Simbol-simbol yang digunakan pada pengujian basis path dapat dilihat

pada tabel berikut:

Tabel 6. Simbol basis path No Gambar Nama Keterangan

1

Node Node adalah simbol proses pada flowchart

2 Edge Edge adalah garis penghubung node

3

Predikat Predikat yaitu node yang mempunyai dua edge

4

Region Region adalah wilayah tertutup yang terbentuk dari

Sumber: Pare (dalam Rahayuda, 2013:226)

Rumus pengujian basis path :

V( G ) = ∑ R

V( G ) = E – N + 2 atau

V( G ) = P + 1

18

Pengujian pada suatu aplikasi dapat dikatakan berhasil jika hasil dari

rumus 1, rumus 2 dan rumus 3 adalah sama.

3. Gambaran Umum Kantor Badan Kesatuan Bangsa, Politik dan

Perlindungan Masyarakat Kota Palopo

Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan Masyarakat

Kota Palopo yang dipimpin oleh Bapak Dr. Baso Sulaiman, M. Ag. merupakan

salah satu kantor jajaran pemerintahan tingkat tinggi yang berada di Jalan K.H.

Hasyim Kelurahan Tompotika Kecamatan Wara Kota Palopo Provinsi Sulawesi

Selatan. Kantor Badan Kesatuan Bangsa, Politik dan Perlindungan Kota Palopo

ini mulai beroperasi pada tahun 1970 hingga saat ini, Kantor Badan Kesatuan

Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo ini mengalami

kemajuan yang begitu pesat, mulai dari pembuatan layanan Halo Kesbang, dan

pelayanan kepada masyarakat yang semakin baik. Kantor Badan Kesatuan

Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo ini merupakan salah

satu instansi pemerintahan di Kota Palopo yang selalu berusaha untuk

meningkatkan mutu baik dalam hal prestasi maupun pelayanan masyarakat.

2.2 Penelitian yang Relevan

Penelitian ini merujuk pada beberapa penelitian yang sudah ada sebagai

referensi dalam penelitian untuk diukur, penelitian tersebut antara lain :

1. Lesomar, Wowor, dan Tulenan (2015) dengan judul penelitian “Rancang

Bangun Protal Web Pariwisata Maluku Tenggara”. Jurusan Teknik

Informatika Fakultas Teknik Universitas Sam Ratulangi. Penelitian ini

bertujuan untuk memasarkan pariwisata dan kuliner yang ada di Maluku

Tenggara, dengan adanya website portal ini masyarakat yang ada di sekitar

Maluku Tenggara maupun yang ada di luar Maluku Tenggara bisa melihat

kuliner dan tempat-tempat pariwisata yang ada di Maluku Tenggara.

2. Triamalia (2017) dengan judul penelitian “Rancang Bangun Portal

Ketenagakerjaan Berbasis Web Pada PT. Bintang Internasional”. Jurusan

Sistem Informasi Fakultas Sains dan Teknologi UIN Alauddin Makassar.

Penelitian ini bertujuan untuk membatu calon tenaga kerja mendapatkan

sebuah pekerjaan yang sesuai dengan kriteria dari perusahaan, dengan adanya

19

website portal ketenagakerjaan ini masyarakat bisa menemukan sebuah

pekerjaan dengan mudah dan dapat di akses secara online, sehingga

masyarakat tidak lagi datang ke perusahaan tertentu untuk mendapatkan

informasi tersebut.

3. Pranata, Hamdani, dan Khairina, (2015) dengan judul penelitian “Rancang

Bangun Website Jurnal Ilmiah Bidang Komputer Pada Program Studi Ilmu

Komputer Universitas Mulawarman”. Jurusan Ilmu Komputer FMIPA

Universitas Mulawarman. Kemudahan dalam mengakses informasi lewat

internet sangat mendukung pengembangan pembuatan jurnal secara online.

Jurnal online sangat bermanfaat bagi mahasiswa dan dosen untuk mengakses

jurnal dimanapun dan kapanpun. Tujuan penelitian ini adalah untuk

merancang content management system berbasis web untuk website Jurnal

Informatika untuk mempermudah mahasiswa dan dosen.

4. Amirwan (2016) dengan judul penelitian “Rancang Bangun Portal Akademik

Program Studi Teknik Informatika Universitas Tanjungpura”. Jurusan Teknik

Informatika Universitas Tanjungpura. Penelitian ini bertujuan untuk

memberikan sebuah informasi mengenai akademik kampus Universitas

Tanjungpura, dengan adanya website ini maka mahasiswa dapat dengan

mudah mendapatkan informasi dari kampus dimanapun dan kapanpun secara

online.

5. Oktaviani dan Hidayat (2018) dengan judul penelitian “Rancang Bangun

Portal Seminar Nasional Berbasis Web”. Jurusan Teknik Informatika STMIK

Bumi Gora Mataram. Penelitian ini bertujuan untuk menyediakan informasi

seminar nasional guna untuk memudahkan dalam mencari informasi seminar

nasional berdasarkan lokasi dan tanggal seminar.

2.3 Kerangka Pikir

Sebuah kerangka pikir merupakan susunan dari pokok permasalahan

sehingga menghasilkan suatu solusi. Kerangka pikir penelitian ini dibuat dalam

bentuk skema seperti gambar berikut:

20

Kantor Kesbangpol dan Linmas Kota Palopo merupakan salah satu instansi pemerintah yang berada di Jalan

K.H. Hasyim, Kelurahan Tompotika, Kecamatan Wara Utara Kota Palopo yang selalu berusaha meningkatkan

mutu perlayanan kepada masyarakat.

Permasalahan yang timbul di Kantor Kesbangpol dan Linmas Kota Palopo ini adalah sistem penginformasian

kepada masyarakat luas khususnya masyarakat sekitaran Kota Palopo, belum memiliki sebuah sarana untuk

memberikan sebuah informasi tentang kegiatan kantor tersebut kepada masyarakat luas, sehingga pihak

instansi masih sangat susah untuk berkomunikasi dengan masyarakat luas.

Kantor Kesbangpol dan Linmas Kota Palopo memerlukan sebuah website portal. Untuk memaksimalkan

proses penginformasian di Kantor Kesbangpol dan Linmas Kota Palopo ini dikarenakan penyebaran

informasinya yang masih kurang luas, maka diperlukan suatu sistem informasi yang dapat menangani

permasalahan tersebut, salah satunya yaitu website portal menggunakan pemrograman website berbasis

framework menggunakan codeigniter PHP versi 5.6 dan database MySQL versi 5.6

Dengan dibuatnya website portal pada kantor Kesbangpol dan Linmas Kota Palopo, diharapkan dapat

bermanfaat bagi pihak instansi dan masyarakat luas serta mempermudah pencarian data dengan

memanfaatkan fasilitas internet, dan dapat membantu sistem yang ada pada sistem sebelumnya sehingga

kantor Kesbangpol dan Linmas Kota Palopo menjadi lebih baik lagi. Gambar 1. Kerangka pikir

BAB III

METODE PENELITIAN

3.1 Jenis Penelitian

Jenis penelitian yang digunakan yaitu penelitian pengembangan atau

Research and Development (R&D) jenis penelitian ini sering diartikan sebagai

suatu proses atau langkah-langkah untuk mengembangkan suatu produk baru atau

menyempurnakan produk yang telah ada. Yang dimaksud dengan produk dalam

konteks ini adalah tidak selalu berbentuk hardware (buku, modul, alat bantu

pembelajaran di kelas dan laboratorium), tetapi bisa juga perangkat lunak

(software) seperti program aplikasi untuk sistem informasi pemerintahan,

pengolahan data, sistem informasi pembelajaran di kelas, perpustakaan atau

laboratorium, ataupun model-model pendidikan, pembelajaran pelatihan,

bimbingan, evaluasi, manajemen dan lain sebagainya.

Pengumpulan

DataAnalisis Website

Perancangan

Website

Pengujian

Website

Pembuatan

Website

Implementasi

WebsiteLaporan

Gambar 2. Skema R&D penelitian

1. Pengumpulan Data

Dalam peroses pengumpulan data dalam penelitian ini yang pertama

dilakukan yaitu yang pertama peneliti melakukan tahap wawancara dan observasi,

setelah tahap ini telah di lakukan maka data yang diperlukan dari Kantor

Kesbangpol dan Linmas Kota Palopo telah ada.

2. Analisis Website

Proses analisis website, pada tahap ini peneliti akan melakukan proses

tanya jawab kepada pihak kantor Kesbangpol dan Linmas Kota Palopo, dalam hal

desain website yang mereka inginkan.

3. Perancangan Website

Dalam proses perancangan website, peneliti akan membuat sebuah

rancangan website sesuai dengan keinginan pihak kantor Kesbangpol dan Linmas

Kota Palopo.

22

4. Pengujian Website

Proses pengujian website ini bertujuan untuk melihat kelayakan website

yang telah dibuat, untuk di pakai oleh pihak kantor Kesbangpol dan Linmas Kota

Palopo. Disini peneliti akan berusaha untuk mencari kesalahan yang ada di koding

website yang dibuat.

5. Pembuatan Website

Dalam proses pembuatan website peneliti akan membuat website dengan

menggunakan pemrograman framework codeigniter dan sublime text sebagai text

editor, sesuai dengan keinginan pihak kantor Kesbangpol dan Linmas Kota

Palopo

6. Implementasi Website

Setelah kelima yang ada di jenis penelitian R&D sudah dilakukan maka

peneliti akan mendemokan website yang telah layak di pakai di kantor

Kesbangpol dan Linmas Kota Palopo, agar pihak kantor bisa menggunakan

website tersebut.

7. Laporan

Dalam pembuatan laporan ini, peneliti akan mewawancarai pihak kantor

Kesbangpol dan Linmas Kota Palopo mengenai tentang website yang telah dibuat.

Dalam proses penelitian ini penulis menggunakan pendekatan atau metode

waterfall yang mana pada pendekatan ini adalah proses pembuatan sistem melalui

tahapan – tahapan yang runtut yaitu dimulai dari proses observasi, analisis dan

pengumpulan data, perancangan sistem pembuatan program, pengujian kemudian

diimplementasikan. Sesuai dengan karakter tersebut maka penulis berusaha

membuat sebuah Website Portal Pada Kantor Bangsa, Politik dan Perlindungan

Masyarakat Kota Palopo.

23

Analisis Kebutuhan

Desain Sistem

Penulisan Kode

Program

Pengujian Program

Implementasi

Program

Gambar 3. Skema waterfall penelitian

1. Analisis Kebutuhan

2. Desain Sistem

3. Penulisan Kode Program

4. Pengujian Program

5. Implementasi Program

3.2 Tempat dan Waktu Penelitian

Adapun lokasi penelitian yaitu di Kantor Bangsa, Politik dan Perlindungan

Masyarakat Kota Palopo yang beralamat di Jalan K.H. Hasyim Kelurahan

Tompotika Kecamatan Wara Kota Palopo. Penelitian ini mulai dilaksanakan pada

bulan Juni 2019.

3.3 Batasan Penelitian

Dalam hal ini, untuk menghindari terjadinya penyimpangan dalam

penulisan tugas akhir ini, penulis membatasi masalah yang dibahas antara lain:

1. Aplikasi website yang di buat akan menampilkan tentang informasi pada

Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo.

2. Pemrograman yang di gunakan yaitu pemrograman website berbasis

framework dengan menggunakan codeigniter versi 3.1.5 PHP 5.6.1 dan

database MySQL 5.6.1.

3. Desain sistem menggunakan Unified Modeling Language (UML) yang ada

pada Microsoft Visio 2010.

24

4. Perancangan dan Pembuatan aplikasi website Kantor Bangsa, Politik dan

Perlindungan Masyarakat Kota Palopo yang ditampilkan adalah beranda

(home), profil, sejarah dan visi dan misi, berita dan kontak kami.

3.4 Teknik Pengumpulan Data

Pada penelitian ini penulis menggunakan tiga metode yang dijadikan

sebagai cara pengumpulan data, sebagai berikut:

1. Metode Wawancara (Interview)

Wawancara merupakan cara menjaring informasi atau data melalui

interaksi verbal/lisan. Wawancara memungkinkan analisis sistem sebagai

pewawancara (interviwer), komunikasi berlangsung dalam bentuk tanya jawab

dalam hubungan tatap muka dalam hal ini penulis langsung melakukan

wawancara terhadap pihak kantor.

2. Metode Observasi (Observation)

Observasi adalah cara yang sangat sesuai untuk mengkaji proses atau

perilaku. Dalam penelitian ini, peneliti melakukan pengamatan atau peninjauan

langsung untuk memperoleh informasi yang tepat dan akurat. Metode

pengumpulan data observasi dilakukan peneliti dengan cara melakukan

pengamatan secara langsung ke tempat penelitian yang sedang diteliti, yaitu

Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo. Teknik

observasi digunakan untuk memperkuat, dengan melihat secara langsung pada

objek penelitian yaitu Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota

Palopo. Dengan demikian hasil observasi ini sekaligus untuk mengkonfirmasikan

data yang telah terkumpul melalui wawancara dengan kenyataan yang sebenarnya.

3. Dokumentasi

Penelitian dokumentasi digunakan sebagai dasar pengumpulan data-data

yang akan digunakan untuk membangun website portal. Dengan adanya metode

pengumpulan data ini peneliti dapat mengambil data gambar dan data-data yang

diperlukan lainnya untuk menunjang pembuatan website.

25

3.5 Tahapan Penelitian

Tahapan penelitian yang digunakan dalam penelitian ini adalah sebagai

berikut:

1. Melakukan proses pengumpulan data

2. Analisis sistem yang dilakukan dengan menggunakan instrument yang ada

untuk menganalisis dan merancang aplikasi website portal pada Kantor

Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo.

3. Mendesain sistem sebelum diimplementasi

4. Menguji coba sistem yang telah didesain menggunakan pengujian white box.

5. Mengimplementasikan aplikasi website portal Kantor Bangsa, Politik dan

Perlindungan Masyarakat Kota Palopo

Pengumpulan Data

Analisis Website

Pengujian Website

Implementasi Website

Pembuatan MultimediaPerancangan Multimedia

Gambar 4. Skema tahapan penelitian

3.6 Analisis Sistem

Tujuan dari analisis perancangan sistem secara umum adalah untuk

memberikan gambaran secara umum kepada pemakai tentang sistem yang baru.

Perancangan sistem secara umum merupakan persiapan dari perancangan sistem

secara terinci. Berikut adalah analisis sistem yang sedang berjalan dan sistem baru

yang akan diusulkan pada Kantor Bangsa, Politik dan Perlindungan Masyarakat

Kota Palopo.

26

1. Sistem yang Sedang Berjalan

Analisis sistem yang sedang berjalan pada penelitian ini dapat dilihat pada

gambar 2.

Informasi Kantor Kesbangpol dan

Linmas Kota Palopo

MasyarakatPegawai Kantor

Kesbangpol dan Linmas

Gambar 5. Analisis sistem yang sedang berjalan

Gambar diatas menunjukan bahwa untuk mengakses atau memperoleh

informasi, masyarakat berhubungan langsung dengan pegawai atau staf kantor,

sebaliknya pihak kantor kesbangpol dan linmas memberikan informasi kepada

masyarakat secara langsung di dalam sebuah forum.

2. Sistem yang Diusulkan

Sistem

Login

Beranda

Visi & Misi SejarahStruktur

Organisasi

Profil

Berita

Logout

<<include>><<include>><<include>>

Admin User

Kontak Kami

Gambar 6. Analisis sistem yang diusulkan

27

Tabel 7. Aktor Diagram Use Case

Admin

Admin adalah petugas atau staf Kantor Bangsa, Politik dan

Perlindungan Masyarakat yang bertugas mengoperasikan website dalam

hal ini meng-update informasi dan memonitor perkembangan webiste.

User

User adalah masyarakat yang akan mengakses informasi seputar Kantor

Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo, namun juga

masyarakat luas atau masyarakat global.

Keterangan:

a. Admin

Aktivitas yang dilakukan oleh admin pertama melakukan proses login

sesudah melakukan login admin langsung masuk ke halaman home

b. User

Aktivitas yang dilakukan oleh user pada sistem ini bisa melihat informasi

yang terkait tentang Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota

Palopo tanpa melakukan proses login. Jika masyarakat (User) ingin mengakses

informasi seputar Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota

Palopo mereka dapat melihat informasi melalui website portal dengan mengakses

alamat situs website portal kantor tersebut.

3.7 Kebutuhan Sistem

Dari hasil observasi, wawancara dan studi pustaka yang dilakukan pada

tahap sebelumnya, maka penulis dapat menganalisis bahwa belum efektifnya

pemanfaatan teknologi informasi dalam proses penyebaran informasi pada Kantor

Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo, maka penulis

menganalisa kebutuhan dan perancangan sistem yang akan dibuat adalah sebagai

berikut :

1. Kebutuhan Fungsional

Kebutuhan fungsional sistem ini terdiri atas beberapa fungsi utama yang

saling berhubungan dan mendukung sistem satu sama lain, yang meliputi fungsi –

fungsi sebagai berikut :

a. Kebutuhan fungsional dari admin

1) Admin dapat login sebagai administrator.

2) Admin dapat mengelola home.

28

3) Admin dapat mengelolah informasi profile website Kantor Kesbangpol dan

Linmas seperti sejarah, visi dan misi, dan struktur organisasi.

4) Admin dapat mengelolah menu level user.

5) Admin dapat mengelolah menu kategori.

6) Admin dapat mengelolah menu berita.

7) Admin dapat mengelola menu live chat.

8) Admin dapat mengelola menu edit profile admin

9) Admin dapat mengelolah menu tabel user.

10) Admin dapat melihat informasi Kantor Kesbangpol dan Linmas yang sudah

diinputkan pada halaman website.

b. Kebutuhan fungsional dari user.

1) User dapat melihat home.

2) User dapat melihat berita.

3) User dapat melihat sejarah, visi dan misi dan struktur organisasi.

4) User dapat melihat menu live chat.

5) User dapat melihat hubungi kami.

Data yang akan tampil di website Kantor Kesbangpol dan Linmas Kota

Palopo meliputi:

a. Visi dan Misi Badan Kesatuan Bangsa dan Politik Kota Palopo

b. Struktur Organisasi Badan Kesatuan Bangsa dan Politik Kota Palopo

c. Berita Kegiatan pada Kantor Badan Kesatuan Bangsa Politik Kota Palopo

2. Kebutuhan Nonfungsional

Kebutuhan nonfungsional adalah kebutuhan yang tidak secara langsung

terkait dengan fitur tertentu di dalam sistem.

a. Kebutuhan perangkat keras

Kebutuhan perangkat keras dalam membangun aplikasi dibagi menjadi

perangkat keras administrator sistem dan perangkat keras pengguna. Untuk

perangkat keras administrator sistem dalam hal ini menggunakan laptop dengan

spesifikasi sebagai berikut:

1) Perangkat keras administrator sistem

a) PC processor Intel Core Duo dengan kecepatan 2.60 GHz.

29

b) 4 GB RAM DDR3 serta Harddisk 500 GB.

c) Perangkat standar input dan output.

2) Perangkat keras pengguna

Perangkat keras yang digunakan dalam membangun aplikasi ini adalah

sebagai berikut :

a) Windows, Linux dan android.

b) Minimal 1 GB RAM DDR 3 serta Harddisk 320 GB ATA 5400 RPM.

b. Kebutuhan perangkat lunak

Perangkat lunak yang digunakan dalam membangun aplikasi ini adalah

sebagai berikut :

1) Sistem operasi Windows 10 pro.

2) Pemrograman yang digunakan yitu pemrograman website berbasis framework

dengan menggunakan codeigniter versi 3.5 PHP 5.6 dan database MySQL

5.6, xampp sebagai webserver local dan perangkat lunak tambahan mozilla

dan chrome.

3) Aplikasi desain background dan editing sejenisnya menggunakan corel draw

X7.

4) Jaringan internet sebagai alat untuk mengakses aplikasi website portal Kantor

Bangsa, Politik dan Perlindungan Masyarakat (Kesbangpol dan Linmas) Kota

Palopo.

1. Rancang Model/Sistem

Analisis sistem (system analysis) dapat didefinisikan sebagai penguraian

dari suatu sistem informasi yang utuh ke dalam bagian-bagian komponennya

dengan maksud untuk mendefinisikan dan mengevaluasi permasalahan-

permasalahan, kesempatan-kesempatan, hambatan-hambatan yang terjadi dan

kebutuhan-kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-

perbaikannya. Rancangan sistem secara umum bertujuan untuk memberikan

gambaran secara umum kepada pengguna tentang sistem yang akan direncanakan.

Berikut ini website portal pada Kantor Kesbangpol dan Linmas Kota Palopo

terdapat beberapa diagram yaitu, use case diagram, activity diagram, sequence

diagram dan class diagram:

30

a. Use case diagram

Use case diagram adalah gambaran fungsionalitas dari suatu sistem,

sehingga pengguna sistem paham dan mengerti mengenai kegunaan sistem yang

akan dibangun. Dalam use case diagram website ini terdapat dua aktor yaitu

admin dan user.

1) Diagram use case login admin

Berikut adalah diagram use case login admin pada website Kantor

Kesbangpol dan Linmas Kota Palopo:

Login

Logout

Input Email

Input Password

Klik tombol login

<<include>>

<<include>>

<<include>>

Admin

Gambar 7. Diagram use case halaman login admin.

Gambar 7. menunjukan bahwa admin dapat melakukan login dengan cara

menginputkan email dan password lalu menekan tombol login kemudian sistem

akan memvalidasi email dan password yang telah diinputkan apakah sudah benar

atau tidak.

2) Diagram use case halaman visi dan misi

Berikut adalah diagram use case visi dan misi admin pada website Kantor


Menu Visi dan Misi

Tambah Visi dan Misi

Edit Visi dan Misi

Hapus Visi dan Misi

<<include>>

<<include>>

<<include>>

Admin

Gambar 8. Diagram use case kelola visi dan misi

31

Gambar 8 menunjukan bahwa admin mengelola halaman visi misi dan

dapat menginput visi misi kantor kesbangpol dan linmas, edit visi dan misi, hapus

visi dan misi, dan tambah visi visi misi.

3) Diagram use case halaman struktur organisasi

Berikut adalah diagram use case struktur organiasi admin pada website

Kantor Kesbangpol dan Linmas Kota Palopo:

Menu Struktur Organiasi

Tambah Struktur Organiasi

Edit Struktur Organiasi

Hapus Struktur Organiasi

<<include>>

<<include>>

<<include>>

Admin

Gambar 9. Diagram use case kelola struktur organiasi

Gambar 9 menunjukan bahwa admin mengelola halaman struktur organiasi

dan dapat menginput gamba struktur organiasi Kantor Kesbangpol dan Linmas,

edit gambar struktur organiasi, hapus gambar struktur organisasi, dan tambah

gambar struktur organiasi.

4) Diagram use case halaman sejarah

Berikut adalah diagram use case sejarah admin pada website Kantor


Menu Sejarah

Tambah Sejarah

Edit Sejarah

Hapus Sejarah

<<include>>

<<include>>

<<include>>

Admin

Gambar 10. Diagram use case kelola sejarah

Gambar 10 menunjukan bahwa admin mengelola halaman Sejarah dan

dapat mengedit, hapus, dan tambah data sejarah.

32

5) Diagram use case halaman berita

Berikut adalah diagram use case berita admin pada website Kantor


Menu Berita

Tambah Berita

Edit Berita

Hapus Berita

<<include>>

<<include>>

<<include>>

Admin

Gambar 11. Diagram use case kelola berita

Gambar 11 menunjukan bahwa admin mengelola halaman berita dan dapat

menginput data berita yang akan di pubikasikan. Admin juga bisa melakukan edit

berita, hapus berita dan tambah berita.

6) Diagram use case halaman level user

Berikut adalah diagram use case Level User admin pada website Kantor


Menu Level User

Tambah Level Access

Edit Level Access

Hapus Level Access

<<include>>

<<include>>

<<include>>

Admin

Gambar 12. Diagram use case kelola halaman level user

Gambar 12 menunjukan bahwa admin dapat mengelola halaman level

user. admin juga bisa melakukan edit level user, hapus level user dan tambah level

user.

7) Diagram use case halaman kategori

Berikut adalah diagram use case kategori admin pada website Kantor


33

Menu

Tambah

Edit

Hapus

<<include>>

<<include>>

<<include>>

Gambar 13. Diagram use case kelola halaman kategori

Gambar 13 menunjukan bahwa admin dapat mengelola halaman kategori

dan menginput kategori berita. Admin juga bisa melakukan edit kategori berita,

hapus kategori berita dan tambah kategori berita.

8) Diagram use case ubah profile

Berikut adalah diagram use case ubah profile admin pada website Kantor


Input kategori

tampil Password lama

Input Password baru

<<include>>

<<include>>

<<include>>

Konfirmasi password

<<include>>Admin

Input Nama

Input email

<<include>>

<<include>>

Input gambar

Input tanggal

<<include>>

<<include>>

Gambar 14. Diagram use case edit profile

Gambar 14 menunjukan bahwa admin dapat mengelola halaman ubah

password dan dapat menginput nama, email, level user, password, tanggal dan

gambar yang akan diubah.

34

9) Diagram use case pesan

Berikut adalah diagram use case tabel pesan di halaman admin pada

website Kantor Kesbangpol dan Linmas Kota Palopo:

Menu Tabel pesan Hapus Data User<<include>>

Admin

Gambar 15. Diagram use case tabel user

Gambar 15 menunjukan bahwa admin dapat mengelola halaman tabel

pesan dengan akses hapus data pesan.

10) Diagram use case tabel user

Berikut adalah diagram use case tabel user admin pada website Kantor


MenuTabel User Hapus Data User<<include>>

Admin

Gambar 16. Diagram use case tabel user

Gambar 16 menunjukan bahwa admin dapat mengelola halaman tabel user

dengan akses hapus data user.

11) Diagram use case user

Berikut adalah diagram use case user pada website Kantor Kesbangpol

dan Linmas Kota Palopo:

35

Lihat menu beranda

Lihat menu profil

Lihat struktur organisasi

Lihat menu visi dan misi

<<include>>

<<include>>

Lihat sejarah

<<include>>

Lihat menu berita

Lihat kontak kami

User

Lihat menu live chat

Gambar 17. Diagram use case user

Gambar 17 menunjukan bahwa user dapat melihat menu beranda, profil

yang memuat visi dan misi, struktur organiasi dan sejarah. User juga dapat

melihat halaman berita. Kemudian user dapat melihat kontak admin dan Kantor

Kesbangpol dan linmas Kota Palopo.

b. Activity login admin

Activity diagram adalah diagram yang menggambarkan workflow (aliran

kerja) atau aktivitas dari sebuah sistem atau proses bisnis, yang perlu diperhatikan

adalah bahwa diagram aktivitas menggambarkan aktivitas sistem bukan apa yang

dilakukan actor, jadi aktivitas yang dapat dilakukan oleh sistem.

1) Activity login admin

Activity diagram dibawah ini, admin dapat melakukan proses login terlebih

dahulu untuk masuk kehalaman administrator, seperti pada gambar 18 berikut:

36

Login Admin

Admin Sistem

Masuk Halaman

UtamaValidasi

Login Admin

Login Admin Login AdminMenampilkan

Halaman Admin

Ya

Menampilkan

dashboard admin

Gambar 18. Activity diagram login admin

2) Activity diagram tambah berita

Activity diagram dibawah ini, admin dapat melakukan proses tambah data

berita mengenai Kantor Kesbangpol dan Linmas, Menu berita pada halaman

admin ini berada pada menu berita di menu utama. Jika admin ingin

menambahkan data berita baru, tekan tombol tambah berita maka akan muncul

form tambah data berita, kemudian setelah melakukan penginputan data berita jika

ingin disimpan di database maka silahkan klik tombol tambah, maka data berita

akan terkirim. Rancang diagram activity penginputan berita seperti pada gambar

19 berikut:

Activity Diagram Tambah Berita

Admin Sistem

Phas

e

Pilih menu berita

Klik tombol tambah berita

Input judul berita

Input judul seo

Input isi berita

Input kategori

Klik tombol tambah

Menampilkan tabel

berita

Menampilkan form

tambah berita

Tambah dan

menampilkan tabel

berita

Gambar 19. Activity diagram tambah data berita

37

3) Activity diagram edit berita

Activity diagram dibawah ini, admin dapat melkukan proses edit data

berita pada tabel berita. Menu berita pada halaman admin ini berada pada halaman

menu berita di halaman utama. Admin bisa memilih menu berita, setelah memilih

menu berita, maka akan muncul tabel berita, kemudian pilih tombol edit, maka

akan muncul form edit berita. Rancangan activity diagram edit data berita dapat

dilihat pada gambar 20 berikut:

Activiy Diagram Edit Berita Admin

Admin Sistem

Phas

e

Pilih menu berita

Klik tombol edit

Input judul berita

Input judul seo

Input isi berita

Input kategori

Input penulis

Input gambar berita

Klik tombol edit berita

Menampilkan tabel berita

Menampilkan form edit

berita

Edit data dan menampilkan

data ke tabel berita

Gambar 20. Activity diagram edit data berita

4) Activity diagram hapus data berita

Activity diagram dibawah ini, admin dapat melakukan proses hapus data

berita dari tabel berita. Tekan tombol hapus pada list data yang akan di hapus,

maka data berita pada tabel berita terhapus. Rancang acitivity diagram hapus data

berita dapat dilihat pada gambar 21 berikut:

Hapus Data Berita

Admin Sistem

Ph

ase

Klik menu list berita

Menampilkan tabel

berita

Klik tombol hapus

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 21. Activity diagram hapus data berita

38

5) Activity diagram tambah kategori


kategori, dengan cara klik tombol tambah, setelah itu akan muncul form tambah

data. Setelah penginputan data telah selesai di lakukan, klik tombol simpan. Maka

akan tampil tabel kategori. Rancang activity diagram tambah kategori dapat


Tambah Kategori

Admin Sistem

Pilih menu kategoriMenampilkan tabel

data kategori

Klik tombol tambah Menampilkan form

tambah kategori

Input kategori

Klik tombol simpan

Menyimpan dan

menampilkan tabel

kategori

Gambar 22. Activity diagram tambah kategori

6) Activity diagram edit kategori

Activity diagram dibawah ini, admin dapat melakukan proses edit data

kategori, dengan cara klik tombol edit data ketegori. Maka akan muncul form edit

data kategori. Setelah penginputan data telah selesai, klik tombol simpan. Maka

akan muncul tabel kategori. Rancang activity diagram edit kategori dapat dilihat

pada gambar 23 berikut:

Edit Kategori

Admin Sistem

Pilih menu kategoriMenampilkan tabel

data kategori

Klik tombol edit Menampilkan form

edit kategori

Input kategori

Klik tombol simpan

Menyimpan dan

menampilkan tabel

kategori

Gambar 23. Activity diagram edit kategori

39

7) Activity diagram hapus kategori


kategori dengan cara klik tombol hapus, maka data terhapus. Setelah itu tabel

kategori tampil. Rancang activity diagram hapus kategori dapat dilihat pada

gambar 24 berikut:

Hapus Kategori

Admin Sistem

Pilih menu kategori

Menampilkan tabel

data kategori

Klik tombol hapus

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 24. Activity diagram hapus kategori

8) Activity diagram tambah user level


user level dengan cara klik tombol tambah user level, maka akan tampil form

tambah data. setelah penginputan data selesai di lakukan, klik tombol simpan.

maka akan tampil tabel user level. rancang activity diagram tambah user level

dapat dilihat pada gambar 25 berikut:

Tambah Level User

Admin Sistem

Pilih menu level

access

Menampilkan tabel

data level access


tambah level access

Input nama level

access

Klik tombol simpan

Menyimpan dan

menampilkan tabel

level access

Gambar 25. Activity diagram tambah user level

40

9) Activity diagram edit user level

Activity diagram dibawah ini, admin dapat melakukan proses edit data user

level, dengan cara klik tombol edit pada kolom tabel user level. setelah itu maka

akan muncul form edit user level. setelah penginputan data selesai, klik tombol

simpan. maka akan tampil tabel user level. rancang activity edit user leveldapat


Edit Level User

Admin Sistem

Pilih menu level

access

Menampilkan tabel

data level access

Klik tombol edit Menampilkan form

edit level access

Input nama level

access

Klik tombol simpan

Menyimpan dan

menampilkan tabel

level access

Gambar 26. Activity diagram edit user level

10) Activity diagram hapus user level


user level dengan cara klik tombol hapus, maka data user level terhapus. Rancang

activity diagram hapus user level dapat dilihat pada gambar 27 berikut:

Hapus Level User

Admin Sistem

Pilih menu level user

Menampilkan tabel

data level access

Klik tombol hapus

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 27. Activity diagram hapus user level

41

11) Activity diagram tambah visi dan misi


visi dan misi dengan cara klik tombol tambah data visi misi, maka akan muncul

form tambah data visi misi. Setelah penginputan data dilakukan, klik tombol

simpan. Maka akan tampil tabel visi misi. Rancang activity diagram tambah visi

dan misi dapat dilihat pada gambar 28 berikut:

Tambah Visi dan Misi

Admin Sistem

Pilih menu visi dan

misi

Menampilkan tabel

data visi dan misi


tambah visi misi

Input judul

Input isi

Input gambar

klik tombol simpan

Menyimpan dan

menampilkan data

tabel visi misi

Gambar 28. Activity diagram tambah visi dan misi

12) Activity diagram edit visi dan misi

Activity diagram dibawah ini, admin dapat melakukan proses edit data visi

misi dengan cara klik tombol edit visi misi, maka akan tampil form edit visi misi.

Setelah penginputan data selesai, klik tombol simpan. Maka akan tampil tabel visi

misi. Rancang activity diagram edit visi misi dapat dilihat pada gambar 29

berikut:

Edit Visi dan Misi

Admin Sistem

Pilih menu visi

dan misi

Menampilkan

tabel data visi dan

misi

Klik tombol edit Menampilkan

form edit visi misi

Input judul

Input isi

Input gambar

klik tombol

ubah

Mengubah dan

menampilkan data

tabel visi misi

Gambar 29. Activity diagram edit visi dan misi

42

13) Activity diagram hapus visi dan misi


visi dan misi dengan cara klik tombol hapus, maka data visi dan misi akan

terhapus. Rancang activity diagram hapus data visi dan misi dapat dilihat pada

gambar 30 berikut:

Hapus Visi dan Misi

Admin Sistem

Pilih menu visi dan

misi

Menampilkan tabel

data visi dan misi

Klik tombol hapus

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 30. Activity diagram hapus visi dan misi

14) Activity diagram tambah struktur organisasi


struktur organisasi dengan cara klik tombol upload struktur organisasi, maka akan

muncul form upload data struktur organisasi. Setelah melakukan input data, klik

tombol simpan. Maka akan tampil tabel struktur organisasi. Rancang activity

diagram tambah struktur organisasi dapat dilihat pada gambar 31 berikut:

Tambah Struktur Organisasi

Admin Sistem

Pilih menu struktur

organisai

Klik tombol upload

Menampilkan tabel

struktur organisasi

Menampilkan form

upload struktur

organisasi

Input judul

Klik tombol simpan

Menyimpan dan

menampilkan tabel

struktur organisasi

Input gambar

Gambar 31. Activity diagram tambah struktur organisasi.

43

15) Activity diagram edit struktur organisasi


struktur organisasi, dengan cara klik tombol edit pada tabel struktur organisasi,

maka akan tampil form edit data struktur organisasi. Setelah selesai penginputan

data, klik tombol simpan. Maka akan tampil tabel data struktur organisasi.

Rancang activity diagram edit struktur organisasi dapat dilihat pada gambar 32

berikut:

Edit Struktur Organisasi

Admin Sistem

Pilih menu struktur

organisai

Klik tombol edit

Menampilkan tabel

struktur organisasi

Menampilkan form

edit struktur

organisasi

Input judul

Klik tombol ubah

Mengubah dan

menampilkan tabel

struktur organisasi

Input gambar

Gambar 32. Activity diagram edit sturktur organisasi

16) Activity diagram hapus struktur organisasi


struktur organisasi dengan cara klik tombol hapus yang ada pada tabel struktur

organisasi, maka data akan terhapus. Rancang activity diagram hapus struktur

organisasi dapat dilihat pada gambar 33 berikut:

Hapus Struktur Organisasi

Admin Sistem

Pilih menu struktur

organisai

Klik tombol hapus

Menampilkan tabel

struktur organisasi

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 33. Activity diagram hapus struktur organisasi

44

17) Activity diagram tambah sejarah


sejarah dengan cara klik tombol tambah sejarah, maka akan muncul form tambah

sejarah. Setelah melakukan input data, klik tombol simpan. Maka akan tampil

tabel sejarah. Rancang activity diagram tambah sejarah dapat dilihat pada gambar

34 berikut:

Tambah Sejarah

Admin Sistem

Pilih menu sejarah

Klik tombol tambah

Menampilkan tabel

sejarah

Menampilkan form

tambah sejarah

Input judul

Klik tombol simpan

Menyimpan dan

menampilkan tabel

sejarahInput gambar

Input isi

Gambar 34. Activity diagram tambah sejarah.

18) Activity diagram edit sejarah


sejarah dengan cara klik tombol edit sejarah, maka akan muncul form edit sejarah.

Setelah melakukan input data, klik tombol ubah. Maka akan tampil tabel sejarah.

Rancang activity diagram edit sejarah dapat dilihat pada gambar 35 berikut:

Tambah Sejarah

Admin Sistem

Pilih menu sejarah

Klik tombol edit

Menampilkan tabel

sejarah

Menampilkan form

edit sejarah

Input judul

Klik tombol ubah

Mengubah dan

menampilkan tabel

sejarahInput gambar

Input isi

Gambar 35. Activity diagram edit sejarah.

45

19) Activity diagram hapus sejarah


sejarah dengan cara klik tombol hapus yang ada pada tabel sejarah, maka data

akan terhapus. Rancang activity diagram hapus sejarah dapat dilihat pada gambar

36 berikut:

Hapus Sejarah

Admin Sistem

Pilih menu sejarah

Klik tombol hapus

Menampilkan tabel

sejarah

Menampilkan pesan

konfirmasi

Ya

Tidak

Gambar 36. Activity diagram hapus sejarah

20) Activity diagram hapus data user

Activity Diagram dibawah ini, admin dapat melakukan proses hapus data

dengan cara klik tombol hapus, maka data user akan terhapus. Rancang activity

diagram hapus data user dapat dilihat pada gambar 37 berikut:

Hapus data user

Admin Sistem

Pilih menu tabel user

Klik tombol hapus

Menampilkan tabel

user

Menghapus dan

menampilkan tabel

user

Gambar 37. Activity diagram hapus data user

21) Activity diagram hapus data pesan

Activity Diagram dibawah ini, admin dapat melakukan proses hapus data

dengan cara klik tombol hapus, maka data pesan akan terhapus. Rancang activity

diagram hapus data pesan dapat dilihat pada gambar 38 berikut:

46

Hapus data user

Admin Sistem

Pilih menu tabel

pesan

Klik tombol hapus

Menampilkan tabel

pesan

Menghapus dan

menampilkan tabel

pesan

Gambar 38. Activity diagram hapus data pesan

22) Activity diagram edit profil

Activity diagram dibawah ini, admin dapat melakukan proses edit

profilnya dengan cara klik menu edit profile yang terdapat pada sidebar di

halaman admin, maka akan muncul form edit profile. Setelah penginputan data

selesai, klik edit. Rancang activity diagram edit profil dapat dilihat pada gambar

39 berikut:

Edit Profil

Admin Sistem

Pilih menu profil

Klik tombol edit

profile

Menampilkan

halaman profile

admin

Input nama

Input email

Mengedit dan

halaman profile

admin

Menampilkan form

edit profile

Input level user

Input password lama

Input konfirmasi

password

Input password baru

Input tanggal

Input gambar

Klik tombol ubah

Gambar 39. Activity diagram edit profil

47

23) Activity diagram user

Activity diagram dibawah ini, user dapat melihat halaman home, profil

yang meliputi visi dan misi, struktur organisasi, sejarah, berita, kontak kami dan

live chat. Masing-masing halaman tersebut memiliki fungsi untuk memanggil

halaman yang lain.

Activity Diagram

User Sistem

Ph

ase

User mengetikan

url di browser

Menampilkan

halaman website

Home Profile Berita Kontak KamiMenampilkan

Halaman Home

Menampilkan

Halaman

Profile(visi dan

misi, struktur

organisasi,

sejarah)

Menampikan

halaman berita

Menampilkan

halaman kontak

kami

Gambar 40. Activity diagram user

c. Sequence diagram

Sequence diagram adalah suatu diagram yang memperhatikan atau

menampilkan interaksi-interaksi antar objek didalam sistem yang disusun pada

sebuah urutan atau rangkaian waktu. interaksi antara objek tersebut termaksud

pengguna, disiplin, dan sebagainya berupa pesan.

1) Sequence diagram login admin

Sequence diagram login admin, admin melakukan login dengan cara

memasukkan email dan password kemudian menekan tombol login, setelah itu

sistem akan memvalidasi email dan password yang dimasukkan oleh admin, jika

benar maka sistem akan menampilkan halaman admin, jika salah maka sistem

akan menampilkan pesan bahwa email dan password yang dimasukkan salah.

Lebih jelas dapat dilihat pada gambar 41:

48

AdminForm

LoginHome Logout

Input email dan password

Menampilkan halaman admin

Menekan tombol logout

Menampilkan halaman login

Gambar 41. Sequence diagram login admin

2) Sequence diagram kelola menu berita

Sequence diagram menjelaskan bawha, admin dapat melakukan proses

tambah data, edit dan hapus. Dengan cara klik tombol tambah data, edit dan

hapus, pada halaman berita. Rancang sequence diagram dapat dilihat pada gambar

42 berikut:

AdminHalaman

adminBerita

Tamba

h data

Login dan masuk

kehalaman admin

Edit

Pilih menu berita

Menampilkan

halaman berita

Klik tombol tambah data

Menampilkan form tambah data

Hapus database

Simpan data ( judul, isi, kategori

status, nama penulis

dan gambar berita)


Data berita tersimpan

Menekan tombol edit

Menampilkan form edit berita

Simpan data edit

(judul, isi, kategori, status, nama penulis

dan gambar berita


Data berita tersimpan

Menekan tombol hapus

Hapus data (judul, isi, kategori,

status, nama penulis dan gambar berita


Data berita terhapus

Gambar 42. Sequence diagram kelola menu berita

49

3) Sequence diagram kelola menu kategori

Sequence diagram , admin dapat melakukan proses tambah, edit dan hapus

data. Dengan cara klik tombol tambah, edit dan hapus data. Rancang sequence

diagram kelola menu kategori dapat dilihat pada gambar 43 berikut:

AdminHalaman

adminKategori

Tambah

data

Login dan masuk

kehalaman admin

Edit

Pilih menu kategori

Menampilkan

halaman kategori

Menekan tombol tambah data


Hapus database

Simpan data (input kategori)

Menampilkan tabel kategori

Data kategori tersimpan

Menekan tombol edit

Menampilkan form edit kategori

Edit dan Simpan data ( input kategori)


Data kategori tersimpan



Data kategori terhapus

Menghapus data

kategori

Gambar 43. Sequence diagram kelola menu kategori

4) Sequence diagram kelola menu user level

Sequence diagram , admin dapat melakukan proses tambah, edit dan hapus

data. Dengan cara klik tombol tambah, edit dan hapus data. Rancang sequence

diagram kelola menu User Level dapat dilihat pada gambar 44 berikut:

AdminHalaman

admin

Level

access

Tambah

data

Login dan masuk

kehalaman admin

Edit

Pilih menu

level access

Menampilkan

halaman level access



Hapus database

Simpan data (input level access)

Menampilkan tabel level access

Data level access

tersimpan

Menekan tombol edit

Menampilkan form edit level access

Edit dan Simpan data ( input level access)


Data level access

tersimpan



Data level access

terhapus

Menghapus data

level access

Gambar 44. Sequence diagram kelola menu user level

50

5) Sequence diagram kelola menu visi dan misi

Sequence diagram dibawah ini , admin dapat melakukan proses tambah,

edit dan hapus data. Dengan cara klik tombol tambah, edit dan hapus data.

Rancang sequence diagram kelola menu visi dan misi dapat dilihat pada gambar

45 berikut:

AdminHalaman

adminVisi misi

Tambah

data

Login dan masuk

kehalaman admin

Edit

Pilih menu

visi dan misi

Menampilkan

halaman visi dan misi



Hapus database

Simpan data (input judul, input isi dan input gambar)

Menampilkan tabel visi dan misi

Data visi dan misi

tersimpan

Menekan tombol edit


Edit dan Simpan data (input judul, input isi dan input gambar)


Data visi dan misi

tersimpan



Data visi dan misi

terhapus

Menghapus data

visi dan misi

Gambar 45. Sequence diagram kelola menu visi dan misi

6) Sequence diagram kelola menu struktur organisasi



Rancang sequence diagram kelola menu struktur organisasi dapat dilihat pada

gambar 46 berikut:

AdminHalaman

admin

Struktur

organisasi

Tambah

data

Login dan masuk

kehalaman admin

Edit

Pilih menu

struktur organisasi

Menampilkan

halaman struktur organisasi



Hapus database

Simpan data (input judul dan input gambar)

Menampilkan tabel struktur organisasi

Data struktur organisasi

tersimpan

Menekan tombol edit


Edit dan Simpan data (input judul dan gambar)


Data struktur organisasi

tersimpan



Data strukrut organisasi

terhapus

Menghapus data

struktur organisasi

Gambar 46. Sequence diagram kelola menu struktur organisasi

51

7) Sequence diagram kelola menu tabel user



Rancang sequence diagram kelola menu tabel user.

AdminHalaman

admin

Tabel

user

Login dan masuk

kehalaman admin

Edit

Pilih menu

tabel user

Menampilkan

halaman tabel user

Hapus database

Menekan tombol edit

Menampilkan form edit tabel user

Edit dan Simpan data (input nama, input email, input password lama,

input password baru, input konfirmasi password, input tanggal dan input gambar)

Menampilkan tabel user

Data tabel user

tersimpan



Data tabel user

terhapus

Menghapus data

tabel user

Gambar 47. Sequence diagram kelola menu tabel user

8) Sequence diagram Kelola Menu Edit Profil

Sequence diagram dibawah ini , admin dapat melakukan proses edit data.

Dengan cara klik tombol edit data. Kemudian isi inputan edit data profil, klik

tombol edit. Rancang sequence diagram kelola menu edit profil dapat dilihat pada

gambar 48 berikut:

AdminHalaman

admin

Tabel

user

Login dan masuk

kehalaman admin

Edit

Pilih menu

tabel user

Menampilkan

halaman tabel user

Hapus database

Menekan tombol edit

Menampilkan form edit tabel user

Edit dan Simpan data (input nama, input email, input password lama,

input password baru, input konfirmasi password, input tanggal dan input gambar)


Data tabel user

tersimpan



Data tabel user

terhapus

Menghapus data

tabel user

Gambar 48. Sequence diagram kelola menu edit profil

52

9) Sequence diagram user

Sequence diagram dibawah ini , user dapat melihat beranda yang memuat

informasi umum serta berita. User juga dapat melihat profil yang didalam ada

submenu visi dan misi, sejarah, struktur organisasi dan data pegawai, dan juga

dapat melihat menu berita, produk hukum dan hubungi kami. Rancang sequence

diagram user dapat dilihat pada gambar 49 berikut:

AdminBerand

aProfil Berita Galeri

Hubung

i kami

Pilih menu beranda

Menampilkan

halaman

beranda

Pilih menu profil

Menampilkan submenu profil

Pilih Menu visi dan misi

Menampilkan halaman visi dan misi

PIlih menu sejarah

Menampilkan halaman sejarah

Pilih menu struktur organisasi

Menampilkan halaman struktur organisasi

Pilih menu berita

Menampilkan halaman berita

Pilih menu galeri

Menampilkan halaman galeri

Pilih menu hubungi kami

Menampilkan halaman hubungi kami

Gambar 49. Sequence diagram user

d. Class diagram

Class diagram dari program yang telah dibuat yang saling berelasi. Class

diagramnya dapat dilihat pada gambar 50 berikut:

53

Admin

*id

+pilih

-nama

-email

-user_aktif

-password

-tanggal_buat

-gambar

-user_id

+edit

+hapus

Berita*id

+pilih

-judul_seo

-kategori_id

-judul-isi

-tanggal

-penulis

-gambar

+tambah

+edit

+hapus

Kategori

*id

+pilih

-kategori

+tambah

+edit

+hapus

Visi dan misi

*id

+pilih

-judul

-isi

-gambar

+tambah

+edit

+hapus

User level

*id

+pilih

-level

+tambah

+edit

+hapus

Struktur organisasi

*id

+pilih

-judul

-gambar

+tambah

+edit

+hapus

Biodata

-id

+pilih

-nama

-email

-alamat

-no_hp

+tambah

-riwayat-jenis_kelamin-pendidikan_terakhir

Sejarah

*id

+pilih

-judul

-isi

-gambar

+tambah

+edit

+hapus

Gambar 50. Class diagram

2. Perancangan Interface

Perancangan interface dalam penelitian ini dapat dilihat pada gambar–

gambar dibawah ini :

1) Menu login admin

Email address

Password

Login

Register a new membership

Login

Nama Instansi

Gambar 51. Halaman login admin

Halaman ini merupakan halam login untuk admin. Halaman ini

menampilkan input text username, password dan button login, agar admin bisa

masuk ke halaman administrator, untuk mengedit data, menghapus data dan

menambahkan data pada halaman tersebut.

54

2) Menu beranda (home)

Logo Instansi Home Profile Berita Kontak SearchSearch...

Gambar

Berita Kategori

Gambar 52. Menu beranda (home)

Halaman ini merupakan halaman Berana yang menampilkan slide show

foto Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo,

menampilkan menu–menu yang lainnya, seperti menu profil, menu layanan, menu

berita dan menu hubungi kami. Untuk di setiap menunya memiliki halaman

masing–masing.

3) Menu profil


Berita Baru Visi dan Misi

Struktur Organisasi

Sejarah

Profile Home Profile

Gambar 53. Menu profil

Halaman ini merupakan halaman profil yang menampilkan visi dan misi,

struktur organisasi dan sejarah.

55

4) Menu visi dan misi


Berita BaruHome/Profil/Visi dan Misi

Visi dan Misi Badan Kesatuan Bangsa Politik dan

Perlindungan Masyarakat

Home/Profil/Visi dan MisiVisi dan Misi

Gambar 54. Visi dan misi

Halaman ini merupakan halaman visi dan misi yang menampilkan isi dari

visi dan misi Kantor Badan Kesatuan Bangsa Politik dan Perlindungan


5) Menu struktur organiasi


Berita BaruHome/Profil/Struktur Organisasi

Struktur Organisasi Badan Kesatuan Bangsa Politik

dan Perlindungan Masyarakat

Home/Profil/Struktur OrganisasiStruktur Organisai

Gambar 55. Menu struktur organisasi

Halaman ini merupakan halaman Struktur Organisasi yang menampilkan

Struktur Orgnaisasi Kantor Bangsa, Politik dan Perlindungan Masyarakat Kota

Palopo.

56

6) Menu sejarah


Berita BaruHome/Profil/Sejarah

Sejarah Badan Kesatuan Bangsa Politik dan

Perlindungan Masyarakat

Home/Profil/SejarahSejarah

Gambar 56. Menu sejarah

Halaman ini merupakan halaman Sejarah Kantor Bangsa, Politik dan

Perlindungan Masyarakat (Kesbangpol dan Linmas) Kota Palopo, yang

menampilkan sejarah singkat Kantor Bangsa, Politik dan Perlindungan


7) Menu berita

Logo Instansi Home Profile Berita Kontak Login

Gambar

Arsip berita

Kategori

Gambar 57. Menu berita

Halaman ini merupakan halaman Berita Kantor Bangsa, Politik dan

Perlindungan Masyarakat Kota Palopo, yang menampilkan artikel – artikel dan

berita mengenai tentang kegiatan Kantor Bangsa, Politik dan Perlindungan


57

8) Menu kontak

Logo Instansi Home Profile Berita Kontak Login

Gambar

Peta Lokasi Kantor

Kategori

Gambar 58. Menu kontak

Halaman ini merupakan halaman kontak kami, yang menampilkan kontak

admin, pegawai dan pimpinan Kantor Kesbangpol dan Linmas.

3. Rancang database

Adapun rancangan database website portal pada Kantor Kesatuan Bangsa

Politik dan Perlindungan Masyarakat, yaitu:

a. Tabel admin

Tabel user adalah tabel yang digunakan untuk menyimpan data user. Tabel

ini terdiri dari 8 field, yaitu, id, nama, email, pass, level_id, user_aktif, tgl_buat

dan gambar. Rancangan tabel user dapat dilihat pada tabel 8.

Tabel 8. user

b. Tabel biodata

Tabel biodata adalah tabel yang digunakan untuk menyimpan data biodata.

Tabel ini terdiri dari 8 field, yaitu, id, nama, email, alamat, no_hp, riwayat,

Field Type Keterangan

*id Int (11) Id Pengguna

nama Varchar(128) Nama Lengkap

email Varchar (128) Email User

pass Varchar (128) Password

level_id Int (11) Tipe User

user_aktif Int (11) Status User

gambar Varchar (128) Gambar Pengguna

58

jenis_kelamin dan pendidikan terakhir. Rancangan tabel biodata dapat dilihat pada

tabel 9.

Tabel 9. Biodata

c. Tabel kategori

Tabel kategori adalah tabel yang digunakan untuk menyimpan data kategori.

Tabel ini terdiri dari 2 field, yaitu, id dan kategori. Rancangan tabel kategori dapat

dilihat pada tabel 10.

Tabel 10. Kategori

d. Tabel sejarah

Tabel sejarah adalah tabel yang digunakan untuk menyimpan data sejarah.

Tabel ini terdiri dari 4 field, yaitu, id, judul, isi dan gambar. Rancangan tabel

sejarah dapat dilihat pada tabel 11.

Tabel 11. Sejarah



nama Varchar (128) Nama user

Email Varchar(123) Email user

Alamat Text Alamat user

No_hp Varchar(123) Nomor hp user

Riwayat Text Riwayat hidup user

Jenis_kelamin Varchar(123) Jenis kelamin user

Pendidikan_terakhir Varchar(123) Pendidikan terakhir user



kategori Varchar (128) Kategori Berita


*id Int (11) Id Sejarah

judul Varchar(128) Judul Sejarah Kesbangpol dan Linmas

isi text Isi Sejarah

gambar Varchar(255) Gambar kantor kesbang

59

e. Tabel visi dan misi

Tabel sejarah adalah tabel yang digunakan untuk menyimpan data sejarah.

Tabel ini terdiri dari 4 field, yaitu, id, judul, isi dan gambar. Rancangan tabel

sejarah dapat dilihat pada tabel 12.

Tabel 12. Visimisi

f. Tabel struktur

Tabel struktur adalah tabel yang digunakan untuk menyimpan data

struktur. Tabel ini terdiri dari 3 field, yaitu, id, judul dan gambar. Rancangan

tabel struktur dapat dilihat pada tabel 13.

Tabel 13. Struktur

g. Tabel berita

Tabel berita adalah tabel yang digunakan untuk menyimpan data berita.

Tabel ini terdiri dari 8 field, yaitu, id, judul, judul_seo, kategori_id, waktu_post,

isi, penulis dan gambar. Rancangan tabel berita dapat dilihat pada tabel 14.

Tabel 14. Berita


*id Int (11) Id visi dan misi

judul Varchar(128) Judul visi dan misi Kesbangpol dan Linmas

isi text Isi visi dan misi kesbangpol

gambar Varchar(255) Gambar kantor kesbang


*id Int (11) Id Struktur

judul Varchar (128) Judul Struktur Organisasi

gambar Varchar(11) Gambar struktur organisasi



judul Varchar (255) Judul Berita

judul_seo Varchar(255) Slug Berita

kategori_id Int(11) Kategori Berita

waktu_post Int(11) Waktu Posting Berita

Isi Text Isi Berita

Penulis Varchar(128) Nama Penulis Berita

gambar Varchar(255) Gambar Berita

60

h. Tabel user level

Tabel user level adalah tabel yang digunakan untuk menyimpan data user

level. Tabel ini terdiri dari 2 field, yaitu, id dan level. Rancangan tabel user level

dapat dilihat pada tabel 15.

Tabel 15. User_level



level Varchar (128) Tipe User

BAB IV

HASIL PENELITIAN DAN PEMBAHASAN

4.1 Hasil Penelitian

Hasil penelitian ini adalah Rancang Bangun Website Portal Kantor

Kesatuan Bangsa Politik dan Perlindungan Masyarakat Kota Palopo, ini dibuat

yang terdiri dari input dan output.

1. Tampilan Halaman Input

a. Tampilan halaman login website admin

Tampilan halaman login merupakan tampilan admin menginput email dan

password sehinga dapat mengakses sistem, untuk lebih jelasnya dapat dilihat pada

gambar di bawah ini:

Gambar 59. Tampilan halaman login admin

b. Tampilan halaman administrator

Tampilan halaman admin merupakan tampilan menu-menu yang dapat

digunakan oleh admin untuk mengelola sistem, untuk lebih jelasnya dapat dilihat

pada gambar di bawah ini:

61

Gambar 60. Tampilan halaman administrator

Pada halaman dashboard ini berfungsi untuk menampilkan jumlah data

user, berita, galeri dan kategori berita. Di halaman ini admin dapat mengetahui

berapa jumlah datanya.

c. Tampilan halaman kelola berita

Tampilan halaman kelola berita merupakan tampilan yang digunakan oleh

admin untuk menginput, menghapus dan mengedit data berita, untuk lebih

jelasnya dapat dilihat pada gambar di bawah ini:

Gambar 61. Halaman kelola berita

Pada halaman kelola berita berfungsi untuk menginputkan data-data berita

yang akan dipublikasikan di halaman utama. Pada halaman ini admin harus

menginputkan nama judul berita, judul seo berita, isi berita, kategori berita,

62

penulis berita, tanggal publikasi berita dan gambar berita. Pastikan semua data

terisi agar bisa dipublikasikan.

d. Tampilan halaman kelola kategori

Tampilan halaman kelola kategori merupakan tampilan yang digunakan

oleh admin untuk menginput, menghapus dan mengedit data kategori, untuk lebih


Gambar 62. Halaman kelola kategori

Pada halaman kelola kategori ini berfungsi untuk menambahkan kategori

berita yang akan dipublikasikan. Pada halaman ini admin hanya menginputkan

data kategori berita. Setelah terisi maka data kategori berita bisa tertambahkan di

tabel kategori.

e. Tampilan halaman kelola visi dan misi

Tampilan halaman kelola visid an misi merupakan tampilan yang

digunakan oleh admin untuk menginput, menghapus dan mengedit data visi dan

misi, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:

63

Gambar 63. Halaman kelola visi dan misi

f. Tampilan halaman kelola struktur organisasi

Tampilan halaman kelola struktur organisasi merupakan tampilan yang

digunakan oleh admin untuk menginput, menghapus dan mengedit data struktur

organisasi, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:

Gambar 64. Halaman kelola struktur organisasi

g. Tampilan halaman kelola sejarah

Tampilan halaman kelola sejarah merupakan tampilan yang digunakan

oleh admin untuk menginput, menghapus dan mengedit data sejarah, untuk lebih


64

Gambar 65. Halaman kelola sejarah

h. Tampilan halaman kelola level user

Tampilan halaman kelola level user merupakan tampilan yang digunakan

oleh admin untuk menginput, menghapus dan mengedit data level user, untuk

lebih jelasnya dapat dilihat pada gambar di bawah ini:

Gambar 66. Halaman kelola level user

i. Tampilan halaman kelola edit profile

Tampilan halaman kelola edit profile merupakan tampilan yang digunakan

oleh admin untuk menginput, menghapus dan mengedit data edit profile, untuk

lebih jelasnya dapat dilihat pada gambar di bawah ini:

65

Gambar 67. Halaman kelola edit profile

2. Tampilan Halaman Output

a. Tampilan halaman home

Tampilan halaman home merupakan tampilan yang akan tampil saat

masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:

Gambar 68. Halaman home

b. Tampilan halaman profile (visi dan misi)

Tampilan halaman visi dan misi merupakan tampilan yang akan tampil

saat masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di bawah

ini:

66

Gambar 69. Halaman visi dan misi

c. Tampilan halaman profile (sejarah)

Tampilan halaman sejarah merupakan tampilan yang akan tampil saat


Gambar 70. Halaman sejarah

d. Tampilan halaman profile (struktur organisasi)

Tampilan halaman struktur organisasi merupakan tampilan yang akan

tampil saat masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di

bawah ini:

67

Gambar 71. Halaman struktur organisasi

e. Tampilan halaman berita

Tampilan halaman berita merupakan tampilan yang akan tampil saat


Gambar 72. Halaman berita

f. Tampilan halaman kontak

Tampilan halaman kontak merupakan tampilan yang akan tampil saat


68

Gambar 73. Halaman kontak

3. Pengujian Sistem

Pengujian diperlukan sebagai salah satu tahapan implementasi untuk

menguji tingkat minimal kesalahan dan keakuratan perangkat lunak yang

dirancang. Pengujian dilakukan dengan metode pengujian white box.

a. Flowchart dan flowgraph halaman login

Mulai

Login

Masukan Email

dan Password

Cek Email dan

Password

Halaman

Administrator

Y

Selesai

T

1

2

3

4

5

6

R1R2

Gambar 74. Flowgraph dan flowchart halaman login admin

Berdasarkan flowgraph halaman login administrator diatas, dapat

dilakukan proses perhitungan sebagai berikut:

Diketahui : Node (N) = 6

Edge (E) = 6

Predikat (P) = 1

69

CC = E – N + 2

= 6 – 6 + 2 = 2

IP = P + 1

= 1 + 1

∑R = 2

Sehingga jumlah Region (∑R) sebanyak 2 yaitu R1 dan R2.

Independent path:

: Path 1 = 1 – 2 – 3 – 4 – 5 – 6

: Path 2 = 1 – 2 – 3 – 4 – 2

Jumlah region, cyclomatic complexcity V(G) dan independent path sama

yaitu 2 maka dapat disimpulkan bahwa halaman login atau lebih bebas dari

kesalahan logika pemrograman.

b. Flowchart dan flowgraph kelola berita

Mulai

1. Tambah data berita

2. Edit data berita

3. Hapus data berita

Tambah data

berita

Edit data berita

Hapus data

berita

T

Selesai

Simpan dan

publis berita

Edit atau

update berita

Hapus data

Y

Y

Y

1

2

3

5

7

9

3

3

3

R1 R2

R3

R4

Gambar 75. Flowchart dan flowgraph kelola berita

Berdasarkan flowgraph kelola halaman berita diatas, dapat dilakukan

proses perhitungan sebagai berikut:

Diketahui : Node (N) = 9

Edge (E) = 11

Predikat (P) = 3

CC = E – N + 2

= 11 – 9 + = 4

IP = P + 1

70

= 3 + 1 = 4

∑R = 4

Sehingga jumlah region (∑R) sebanyak 4 yaitu R1, R2, R3 dan R4.

Independent path:

Path 1 = 1-2-3-5-7-9

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

c. Flowchart dan flowgraph kelola kategori Mulai

Selesai

1. Tambah data kategori berita

2. Edit data kategori berita

3. Hapus data kategori

Tambah data

kategori

Edit data

kategori

Hapus data

kategori

T

Simpan data

kategori

Edit data

kategori

Hapus data

kategori

Y

Y

Y

1

2

3

5

7

4

6

8

9

R1R2

R3

R4

Gambar 76. Flowchart dan flowgraph kelola kategori

Berdasarkan flowgraph kelola data kategori diatas, maka dapat dilakukan


Diketahui = Node (N) = 9

Edge (E) = 11

Predikat (P) = 3

CC = E – N + 2

= 11 – 9 + = 4

IP = P + 1

= 3 + 1 = 4

∑R = 4


Independent path:

71

Path 1 = 1-2-3-5-7-9

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

d. Flowchart dan flowgraph kelola visi dan misi Mulai

Selesai

1. Tambah data visi dan misi

2. Edit data visi dan misi

3. Hapus data visi dan misi

Tambah data

visi misi

Edit data visi

misi

Hapus data visi

misi

T

Simpan data

visi misi

Edit data visi

misi

Hapus data

visi misi

Y

Y

Y

1

2

3

5

7

4

6

8

9

R1R2

R3

R4

Gambar 77. Flowchart dan flowgraph kelola visi dan misi

Berdasarkan flowgraph kelola data visi dan misi diatas, maka dapat



Edge (E) = 11

Predikat (P) = 3

CC = E – N + 2

= 11 – 9 + = 4

IP = P + 1

= 3 + 1 = 4

∑R = 4


Independent path:

Path 1 = 1-2-3-5-7-9

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

72

e. Flowchart dan flowgraph kelola struktur organisasi

Mulai

Selesai

1. Tambah data struktur

organisasi

2. Edit data struktur organisasi

3. Hapus data struktur

organisasi

Tambah data

struktur

organisasi

Edit data

struktur

organisasi

Hapus data

struktur

organisasi

T

Simpan data

struktur

organisasi

Edit data

struktur

organisasi

Haps data

Y

Y

Y

1

2

3

5

7

4

6

8

9

R1R2

R3

R4

Gambar 78. Flowchart dan flowgraph kalola struktur organisasi

Berdasarkan flowgraph kelola data struktur organisasi diatas, maka dapat



Edge (E) = 11

Predikat (P) = 3

CC = E – N + 2

= 11 – 9 + = 4

IP = P + 1

= 3 + 1 = 4

∑R = 4


Independent path:

Path 1 = 1-2-3-5-7-9

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

73

f. Flowchart dan flowgraph kelola sejarah Mulai

Selesai

1. Tambah data sejarah

2. Edit data sejarah

3. Hapus data sejarah

Tambah data

sejarah

Edit data sejarah

Hapus data

sejarah

T

Simpan data

sejarah

Edit data

sejarah

Hapus data

Y

Y

Y

1

2

3

5

7

4

6

8

9

R1R2

R3

R4

Gambar 79. Flowchart dan flowgraph kelola sejarah

Berdasarkan flowgraph kelola data sejarah diatas, maka dapat dilakukan



Edge (E) = 11

Predikat (P) = 3

CC = E – N + 2

= 11 – 9 + 2 = 4

IP = P + 1

= 3 + 1 = 4

∑R = 4


Independent path:

Path 1 = 1-2-3-5-7-9

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

74

g. Flowchart dan flowgraph halaman home Mulai

1. Menu Home

2. Menu Profile

3. Menu Berita

4. Menu Kontak

5. Menu Live Chat

1. Menu Home

2. Menu profile

3. Menu berita

4. Menu kontak

5. Menu live

chat

Selesai

T

T

T

T

Halaman live

chat

Halaman

home

Halaman

profile

Halaman

berita

Halaman

kontak

Y

Y

Y

Y

Y

1

2

3

5

7

9

11

13

4

6

8

10

12

R1

R2

R3

R4

R5

R6

Gambar 80. Flowchart dan flowgraph halaman home

Berdasarkan flowgraph halaman utama atau home diatas, maka dapat



Edge (E) = 17

Predikat (P) = 5

CC = E – N + 2

= 17 – 13 + 2 = 6

IP = P + 1

= 5 + 1 = 6

∑R = 6

Sehingga jumlah region (∑R) sebanyak 6 yaitu R1, R2, R3, R4, R5 dan

R6. Independent path:

Path 1 = 1-2-3-5-7-9-11-13

Path 2 = 1-2-3-4-2

75

Path 3 = 1-2-3-5-6-2

Path 4 = 1-2-3-5-7-8-2

Path 5 = 1-2-3-5-7-9-10-2

Path 6 = 1-2-3-5-7-9-11-12-2

h. Flowchart dan flowgraph halaman visi dan misi Mulai

1. Menu visi dan misi

2. Kembali ke menu utama

1. Menu visi dan

misi

2. Menu utama

Selesai

T

Menu visi

dan misi

Y

Halaman

utama

1

2

3

5

6

7

4R1R2

R3

Gambar 81. Flowchart dan flowgraph halaman visi dan misi

Berdasarkan flowgraph halaman utama atau home diatas, maka dapat



Edge (E) = 8

Predikat (P) = 2

CC = E – N + 2

= 8 – 7 + 2 = 3

IP = P + 1

= 2 + 1 = 3

∑R = 3

Sehingga jumlah region (∑R) sebanyak 6 yaitu R1, R2 dan R3.

Independent path:

Path 1 = 1-2-3-5-6-7

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-2

76

i. Flowchart dan flowgraph halaman struktur organisasi Mulai

1. Menu struktru organisasi


1. Menu struktru

organisasi

2. Menu utama

Selesai

T

Menu

struktru

organisasi

Y

Halaman

utama

1

2

3

5

6

7

4R1R2

R3

Gambar 82. Flowchart dan flowgraph halaman struktur organisasi

Berdasarkan flowgraph halaman struktur organisasi diatas, maka dapat



Edge (E) = 8

Predikat (P) = 2

CC = E – N + 2

= 8 – 7 + 2 = 3

IP = P + 1

= 2 + 1 = 3

∑R = 3


Independent path:

Path 1 = 1-2-3-5-6-7

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-2

77

j. Flowchart dan flowgraph halaman sejarah Mulai

1. Menu sejarah


1. Menu sejarah

2. Menu utama

Selesai

T

Menu sejarahY

Halaman

utama

1

2

3

5

6

7

4R1R2

R3

Gambar 83. Flowchart dan flowgraph halaman sejarah

Berdasarkan flowgraph halaman sejarah diatas, maka dapat dilakukan



Edge (E) = 8

Predikat (P) = 2

CC = E – N + 2

= 8 – 7 + 2 = 3

IP = P + 1

= 2 + 1 = 3

∑R = 3


Independent path:

Path 1 = 1-2-3-5-6-7

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-2

78

k. Flowchart dan flowgraph halaman berita Mulai

1. Menu berita


1. Menu berita

2. Menu utama

Selesai

T

Menu beritaY

Halaman

utama

1

2

3

5

6

7

4R1R2

R3

Gambar 84. Flowchart dan flowgraph halaman berita

Berdasarkan flowgraph halaman berita diatas, maka dapat dilakukan



Edge (E) = 8

Predikat (P) = 2

CC = E – N + 2

= 8 – 7 + 2 = 3

IP = P + 1

= 2 + 1 = 3

∑R = 3


Independent path:

Path 1 = 1-2-3-5-6-7

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-2

79

l. Flowchart dan flowgraph halaman kontak Mulai

1. Menu berita


1. Menu berita

2. Menu utama

Selesai

T

Menu beritaY

Halaman

utama

1

2

3

5

6

7

4R1R2

R3

Gambar 85. Flowchart dan flowgraph halaman kontak

Berdasarkan flowgraph halaman kontak diatas, maka dapat dilakukan



Edge (E) = 8

Predikat (P) = 2

CC = E – N + 2

= 8 – 7 + 2 = 3

IP = P + 1

= 2 + 1 = 3

∑R = 3


Independent path:

Path 1 = 1-2-3-5-6-7

Path 2 = 1-2-3-4-2

Path 3 = 1-2-3-5-2

80

4.2 Pembahasan Penelitian

1. Perancangan Input dan Output

Rancangan yang telah dibuat menggunakan UML dan didesain

menggunakan aplikasi microsoft visio 2010, yang dimulai dengan diagram use

case, diagram activity, diagram sequence, diagram class.

Diagram use case merupakan gambaran secara umum dari sistem yang

akan dibuat pada diagram use case ini ada dua aktor yang dapat mengakses sistem

yaitu admin dan user. Admin dapat mengakses semua sistem yang ada seperti

login, mengelola data home, mengelola data menu profil yang meliputi sejarah,

visi dan misi, struktur organisasi, admin juga dapat mengelola data berita, admin

juga dapat mengelola data kategori, admin juga dapat mengelola edit profil,

admin juga dapat mengelola ubah profil user admin, admin juga dapat mengelola

data menu kontak dan live chat, dan data admin, tambahan dalam hal ini yang

menggunakan halaman ini yaitu admin website itu sendiri

Diagram activity merupakan gambaran aktivitas dari tiap-tiap halaman

atau form. Rancangan diagram activity meliputi rancangan activity login,

rancangan activity mengelola data profil, rancangan activity mengelola data

sejarah, rancangan activity mengelola data visi dan misi, rancangan activity

mengelola data struktur organisasi, rancangan activity mengelola data berita,

rancangan activity mengelola data kategori, rancangan activity mengelola edit

profil admin, rancangan activity mengelola data kontak, rancangan activity

mengelola data live chat, rancangan activity mengelola data admin. Sedangkan

user dapat melihat rancangan activity halaman home, rancangan activity halaman

profil, rancangan activity halaman sejarah, rancangan activity halaman visi dan

misi, rancangan activity halaman informasi data struktur organisasi, rancangan

activity halaman berita, rancangan activity halaman kontak dan rancangan activity

halaman live chat.

Diagram sequence mendeskripsikan tingkah laku objek untuk mengirim

dan menerima pesan antara objek dan sistem. Rancangan diagram sequence

meliputi sequence login, rancangan sequence mengelola data sejarah, rancangan

sequence mengelola data visi dan misi, rancangan sequence mengelola data

struktur organisasi, rancangan sequence mengelola data kategori, rancangan

81

sequence mengelola edit profil admin, rancangan sequence mengelola data

kontak, rancangan sequence mengelola data berita, rancangan sequence mengelola

data live chat dan rancangan sequence mengelola data admin. Sedangkan user

dapat melihat rancangan sequence diagram secara umum yang meliputi halaman

home, profile meliputi visi dan misi, sejarah, struktur organisasi, berita, dan

halaman kontak serta halaman live chat.

Diagram class merupakan diagram yang menggambarkan struktur sistem

dari segi pendefenisian kelas-kelas. Pada diagram class ini terdiri dari diagram

class login admin, untuk menu profil sendiri ada rancangan class mengelola data

visi misi, rancangan class mengelola data sejarah, rancangan class mengelola data

struktur organisasi. Pada menu berita ada rancangan class mengelola data berita,

rancangan class mengelola data kategori, dan rancangan class mengelola data

pendidikan. Adapun rancangan data lainnya yaitu rancangan class mengelola data

kontak, rancangan class mengelola data level user, rancangan class mengelola

menu edit profil admin dan rancangan class mengelola ubah pesan.

Input dan output yang dihasilkan dari rancang bangun website portal pada

kantor Kesbangpol dan Linmas Kota Palopo ini adalah sistem yang berbasis

webiste dibuat dengan menggunakan bahasa pemrograman PHP dengan

framework codeigneter dan menggunakan database MySQL versi 5.6. Website

portal kantor Kesbangpol dan Linmas Kota Palopo ini pada administrator terdiri

dari halaman login, mengelola data profil kantor Kesbangpol dan Linmas yang

meliputi sejarah, visi dan misi dan struktur organisasi, mengelola data berita,

mengelola data kontak, kategori serta level user, mengelola data live chat dan

mengelola data admin. Sedangkan user dapat melihat atau mengakses halaman

home, halaman profil Kesbangpol dan Linmas yang meliputi sejarah, visi dan

misi, struktur organisasi, halaman berita, halaman kontak dan halaman live chat.

2. Hasil Pengujian

Berdasarkan pengujian yang telah dilakukan dapat disimpulkan bahwa

rancang bangun website portal pada Kantor Kesatuan Bangsa Politik dan

Perlindungan Masyarakat Kota Palopo layak dan sesuai dengan fungsi yang

dibutuhkan. Semua nilai dari setiap pengujian halaman direkap baik cyclomatic

complexity, independen path, maupun region-nya, ketiga parameter ini masing-

82

masing nilainya pada setiap hasil pengujian halaman dimasukkan ke dalam tabel,

kemudian dijumlahkan sehingga didapatkan hasil jumlah dari keseluruhan

halaman. Hasil dari rekap tiap pengujian halaman yang ada pada program dapat

dilihat pada tabel dibawah ini:

Tabel 16. Hasil pengujian sistem

Kesimpulan dari hasil pengujian dan perhitungan diatas didapatkan jumlah

cyclomatic complexity = 47, independent path = 47, dan region = 47, karena

jumlah ketiga parameter diatas bernilai sama maka dapat disimpulkan bahwa

website yang telah dibuat dapat dikatakan bebas dari kesalahan logika.

No. Nama bagan alir program (CC) (IP) (R)

1 Flowgraph login 2 2 2

2 Flowgraph kelola sejarah 4 4 4

3 Flowgraph kelola visi dan misi 4 4 4

4 Flowgraph kelola struktur organisasi 4 4 4

5 Flowgraph kelola berita 4 4 4

6 Flowgraph kelola kategori 4 4 4

7 Flowgraph kelola kontak 4 4 4

8 Flowgraph lihat halaman home 6 6 6

9 Flowgraph lihat halaman sejarah 3 3 3

10 Flowgraph lihat halaman visi dan misi 3 3 3

11 Flowgraph lihat halaman struktur organisasi 3 3 3

12 Flowgraph lihat halaman berita 3 3 3

13 Flowgraph lihat halaman kontak 3 3 3

Jumlah 47 47 47

BAB V

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Berdasarkan hasil penelitian dan pembahasan yang telah diuraikan pada

bab-bab sebelumnya, maka dapat ditarik kesimpulan sebagai berikut:

1. Perancangan website portal pada Kantor Kesbangpol dan Linmas Kota

Palopo menggunakan pemodelan UML (Unified Modeling Language),

dengan menggunakan empat diagram yaitu, diagram usecase, diagram

activity, diagram sequence, dan class diagram. Keempat diagram digunakan

untuk menggambarkan alur atau cara merancang website portal Kantor

Kesatuan Bangsa, Politik dan Perlindungan Masyarakat Kota Palopo.

2. Portal website yang dibuat meliputi halaman login, mengelola data home,

mengelola data profil yang meliputi sejarah, visi dan misi, struktur organisasi,

mengelola data berita, mengelola data kategori, mengelola data live chat dan

mengelola data admin. Sedangkan user atau masyarakat dapat melihat

halaman home, halaman profil meliputi halaman visi dan misi, halaman

sejarah, halaman struktur organisasi, halaman berita, halaman kontak dan

halaman live chat.

3. Portal website ini telah diuji dengan menggunakan metode white box, dari

hasil pengujian dan perhitungan diatas didapatkan jumlah cyclomatic

complexity = 47, independent path = 47, dan region = 47, karena jumlah

ketiga parameter diatas bernilai sama maka dapat disimpulkan bahwa website

yang telah dibuat dapat dikatakan bebas dari kesalahan logika.

5.2 Saran

Adapun saran dari hasil penelitian dan pembahasan yang telah diuraikan

pada bab-bab sebelumnya, maka saran dari hasil penelitian yaitu sebagai berikut:

1. Perlu diadakan pelatihan bagi administrator website portal ini, dimana

pelatihan tersebut akan memberikan pengarahan kepada administrator website

portal ini.

2. Apabila diterapkan, disarankan sebaiknya memiliki komputer dengan syarat

minimal spesifikasi hardware yang dibutuhkan.

82

3. Diharapkan website ini dapat dikembangkan lagi untuk terwujudnya sistem

penyebaran informasi yang lebih baik dan menarik.

DAFTAR PUSTAKA

Arafah, M., & Trimarsiah, Y. 2017. Analisis dan Perancangan Website Sebagai

Sarana Infromasi pada Lembaga Bahasa Kewirausahaan dan Komputer

AKMI BATURAJA. Jurnal Ilmiah MATRIK. 19(1): 1-10.

Aziz, A., & Tampati, T. 2015. Analisis Web Server untuk Pengembangan Hosting

Server Institusi: Pembandingan Kinerja Web Server Apache dengan

Nginx. Jurnal Multinetics. 1(2): 12-20.

Christian, A., Hesinto, S., & Agustina, A. 2018. Rancang Bangun Website

Sekolah dengan Menggunakan Framework Bootstrap (Studi Kasus SMP

Negeri 6 Prabumulih). Jurnal Sisfokom (Sistem Informasi dan Komputer),

7(1): 22-27.

Diana, D,. 2016. Studi Deskriptif Tentang Pemanfaatan Internet Sebagai Media

Pembelajaran. Jurnal Ilmiah Matrik. 18(1): 77.

Farid, M. 2015. Fitur Dahsyat Sublime Text 3. STIKOM Surabaya. Surabaya.

Fridayanthie, E. W., & Mahdiati, T. 2016. Rancang Bangun Sistem Informasi

Permintaan Atk Berbasis Intranet (Studi Kasus: Kejaksaan Negeri

Rangkasbitung). Jurnal Khatulistiwa Informatika. 4(2): 126-138.

Istiono, W., Hijrah, & Sutarya. 2016. Pengembangan Sistem Aplikasi Penilaian

dengan Pendekatan MVC dan Menggunakan Bahasa PHP dengan

Framework Codeigniter dan Database MYSQL pada Pahoa College

Indonesia. Jurnal TICOM. 5(1): 53-59.

Iswandy, E. 2015. Sistem Penunjang Keputusan Untuk Menentukan Penerimaan

Dana Santunan Sosial Anak Nagari dan Penyalurannya Bagi Mahasiswa

dan Pelajar Kurang Mampu di Kenagarian Barung–Barung Balantai

Timur. Jurnal Teknoif. 3(2): 70-79.

Laila, S. 2018. Rancang Bangun Website pada SDN 76 Malimongan. Universitas

Cokroaminoto Palopo. Palopo.

Nasril, N., & Saputra, A. Y. 2017. Rancang Bangun Sistem Informasi Ujian

Online. Jurnal Lentera Ict. 3(1): 47–53.

Nugroho, F, E,. 2016. Perancangan Sistem Informasi Penjualan Online Studi

Kasus Tokoku. Jurnal SIMETRIS. 7(2): 171:724.

Pibriana, D., & Ricoida, D, I. 2017. Analisis Pengaruh Penggunaan Internet

Terhadap Minat Belajar Mahasiswa (Studi Kasus: Perguruan Tinggi di

Kota Palembang). Jurnal JATISIS (Jurnal Teknik Informatika dan Sistem

Informasi). 3(2): 104-115.

84

Prabowo, F, A., & Syani, M. 2017. Sistem Informasi Pengolahan Sertifikat

Berbasis Web di Divisi Training Seamolec. Jurnal Masyarakat

Informatika Indonesia. 2(1): 1-9.

Pranata, D., Hamdani, H., & Khairina, D. M. 2015. Rancang Bangun Website

Jurnal Ilmiah Bidang Komputer (Studi Kasus: Program Studi Ilmu

Komputer Universitas Mulawarman). Informatika Mulawarman : Jurnal

Ilmiah Ilmu Komputer. 10(2): 25-29.

Putri, S. I., & S, Y. A. 2016. Perancangan Sistem Perpustakaan Online

Menggunakan Metode Model View Controller (MVC) Studi Kasus

STMIK Asia Malang. Jurnal Ilmiah Teknologi Informasi Asia. 10(2): 17–

23.

Rahayuda, Surya., I, G. 2017. Evaluasi Penggunaan Framework Laravel pada E-

government Menggunakan ISO/IEC 25010:2011. JURNAL IPTEKKOM :

Jurnal Ilmu Pengetahuan & Teknologi Informasi. 19(1): 81-94.

Rosa A, S, M,. & Shalahuddin. 2011. Rekayasa Perangkat Lunak Terstruktur Dan

Berorientasi Objek. Informatika. Bandung.

Sari, Y. P. 2017. Rancang Bangun Aplikasi Penjualan dan Persediaan Obat pada

Apotek Merben di Kota Prabumulih. Jurnal Sistem Kesehatan. 1(1): 8.

Setiadi, dkk. 2010. Perancangan Dan Implementasi Aplikasi Persediaan Barang (

Studi Kasus : PT. Banten Tirta Kharisma ). Program Studi Komputerisasi

Akuntansi Politeknik Telkom Bandung.

Siregar, H, F., Siregar, Y, H, & Melani. 2018. Perancangan Aplikasi Komik

Hadist Berbasis Multimedia. Jurnal Teknologi Informasi. 2(2): 113-121.

Suharsana, I. K., Wirawan, I. W. W., & S, N. L. A. K. Y. 2016. Implementasi

Model View Controller dengan Framework Codeigniter pada E-Commerce

Penjualan Kerajinan Bali. Jurnal Sistem Dan Informatika (JSI). 11(1): 19–

28.

Susilo, M,. Kurniati, R, & Kasmawati. 2018. Rancang Bangun Website Toko

Online Menggunakan Metode Waterfall. INFOTEKJAR : Jurnal Nasional

Informatika dan Teknologi Jaringan. 2(2): 98–105.

Suharmawan. 2018. Modul Materi Corel Draw X7. Academia. Tanggerang

Selatan.

Tarmin dkk. 2018. Badan Kesatuan Bangsa dan Politik Provinsi Kepulauan

Bangka Belitung. Buku Profile. Bangka Belitung.

85

Wijaya, Khana, & Andi Christian. 2019. Implementasi Metode Model View

Controller (MVC) dalam Rancang Bangun Website SMK Yayasan Bakti

Prabumulih. Paradigma-Jurnal Komputer dan Informatika. 21(1): 95–102.

Yohanes, Herawati, N., & Sunyata, L. 2013. Strategi Penerapan Teknologi

Informasi di Pemerintah Kabupaten Sintang Provinsi Kalimantan Barat.

Jurnal Tesis PMIS-UNTAN-PSIAN. 1(1): 1-22.

Zakir, A,. 2016. Rancang Bangun Responsive Web Layout dengan Menggunakan

Bootstrap Framework. Jurnal INFOTEKJAR (Jurnal Nasional Informasi

dan Teknologi Jaringan). 1(1): 7:10.

LEMBAR FOTO DOKUMENTASI PENELITIAN

Judul Penelitian :




Adi Murdayani

1504411060




2020

87

Lampiran 1. Dokumentasi Penelitian

Dokumentasi Penelitian :

LEMBAR ALGORITMA DASAR PROGRAM

Judul Penelitian :




Adi Murdayani

1504411060




2020

89

Lampiran 2. Algoritma Dasar Pemrograman

1. Algoritma Dasar Halaman Login

Adapun algoritma dasar yang dimiliki oleh halaman login adalah sebagai

berikut:

public function index()

{

$data['judul'] = 'Halaman Login Admin';

$this->form_validation->set_rules(

'email',

'Email',

'trim|required|valid_email');


'password',

'Password',

'trim|required|min_length[5]');

if ($this->form_validation->run() == FALSE) {

$this->load->view('temp-login/header', $data);

$this->load->view('auth/index', $data);

$this->load->view('temp-login/footer', $data);

} else {

$this->_login();

} }

2. Algoritma Dasar Halaman Dashboard Admin

Adapun algoritma dasar yang dimiliki oleh halaman dashboard admin,

adalah sebagai berikut :

public function index()

{ $data['judul'] = 'Dashboard'; $data['pesan'] = $this->M_pesan->get_all_data(); $data['jumlah_berita'] = $this->M_berita->jumlahBerita(); $data['jumlah_kategori'] = $this->M_kategori->jumlah_kategori(); $data['jumlah_user'] = $this->M_user->jumlah_user(); $data['jumlah_galeri'] = $this->M_galeri->jumlah_galeri(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['user'] = $this->db->get_where('user', [

'email' => $this->session->userdata('email') ])->row_array();

$this->load->view('temp-admin/header', $data); $this->load->view('temp-admin/topbar', $data); $this->load->view('temp-admin/sidebar', $data); $this->load->view('admin/dashboard', $data); $this->load->view('temp-admin/footer'); } }

90

3. Algoritma Dasar Halaman Kelola Berita

Adapun algoritma dasar yang dimiliki oleh halaman kelola berita admin,


public function index() { $data['judul'] = 'Berita'; $data['pesan'] = $this->M_pesan->get_all_data(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['user'] = $this->db->get_where('user', [


$data['berita'] = $this->M_berita->get_all_data(); $data['kategori'] = $this->db->get('kategori')->result_array(); $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/berita', $data, FALSE); $this->load->view('temp-admin/footer', $data, FALSE); }

4. Algoritma Dasar Halaman Kelola Visi Dan Misi

Adapun algoritma dasar yang dimiliki oleh halaman kelola visi dan misi

admin, adalah sebagai berikut :

public function index() { $data['judul'] = 'Visi dan Misi'; $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['user'] = $this->db->get_where('user', [


$data['visimisi'] = $this->db->get('visimisi')->result_array(); $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/visimisi', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/footer'); }

5. Algoritma Dasar Halaman Kelola Sturktur Organisasi

Adapun algoritma dasar yang dimiliki oleh halaman struktur organisasi


public function index() { $data['judul'] = 'Struktur Organisasi'; $data['struktur'] = $this->M_struktur->get_all_data(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['user'] = $this->db->get_where('user', [

'email' => $this->session->userdata('email')

91

])->row_array(); $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/struktur', $data, FALSE); $this->load->view('temp-admin/footer'); }

6. Algoritma Dasar Halaman Kelola Sejarah

Adapun algoritma dasar yang dimiliki oleh halaman kelola sejarah admin,


public function index() { $data['judul'] = 'Sejarah'; $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['user'] = $this->db->get_where('user', [


$data['sejarah'] = $this->db->get('sejarah')->result_array(); $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/sejarah', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/footer'); }

7. Algoritma Dasar Halaman Kelola Galeri

Adapun algoritma dasar yang dimiliki oleh halaman dashboard admin,


public function index() { $data['judul'] = 'Galeri'; $data['galeri'] = $this->M_galeri->get_all_data(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['user'] = $this->db->get_where('user', [


$this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/galeri', $data, FALSE); $this->load->view('temp-admin/footer'); }

8. Algoritma Dasar Halaman Kelola Pesan

Adapun algoritma dasar yang dimiliki oleh halaman pesan admin, adalah

sebagai berikut :

92

public function index() { $data['judul'] = 'Pesan'; $data['user'] = $this->db->get_where('user', ['email' => $this->session->userdata('email')])->row_array(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/pesan', $data, FALSE); $this->load->view('temp-admin/footer', $data, FALSE); }

9. Algoritma Dasar Halaman Kelola Profile Admin

Adapun algoritma dasar yang dimiliki oleh halaman kelola profil admin,


public function index() { $data['judul'] = 'Profile'; $data['users'] = $this->M_user->get_profile(); $data['biodata'] = $this->db->get('biodata')->row_array(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['user'] = $this->db->get_where('user', [


$this->form_validation->set_rules( 'nama', 'Nama', 'trim|required');

$this->form_validation->set_rules( 'email', 'Email', 'trim|required|valid_email');

$this->form_validation->set_rules( 'alamat', 'Alamat', 'trim|required');

$this->form_validation->set_rules( 'jenis_kelamin', 'Jenis Kelamin', 'trim|required');

$this->form_validation->set_rules( 'no_hp', 'Nomor Telepon', 'trim|required');


93

'pendidikan_terakhir', 'Pendidikan terkahir', 'trim|required');

if ($this->form_validation->run() == FALSE) { $this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/profile', $data, FALSE); $this->load->view('temp-admin/footer'); } else { $data = [ 'nama' => $this->input->post('nama'), 'email' => $this->input->post('email'), 'alamat' => $this->input->post('alamat'), 'no_hp' => $this->input->post('no_hp'), 'riwayat' => $this->input->post('riwayat'), 'jenis_kelamin' => $this->input->post('jenis_kelamin'), 'pendidikan_terakhir'=>$this->input->post('pendidikan_terakhir') ]; $this->db->insert('biodata', $data); redirect('admin/profile'); } }

10. Algoritma Dasar Halaman Kelola User

Adapun algoritma dasar yang dimiliki oleh halaman kelola user admin,


public function index() { $data['judul'] = 'User'; $data['users'] = $this->M_user->get_all_data(); $data['pesan'] = $this->M_pesan->get_all_data(); $data['jumlah_pesan'] = $this->M_pesan->jumlah_pesan(); $data['user'] = $this->db->get_where(

'user', ['email' => $this->session->userdata('email') ])->row_array();

$this->load->view('temp-admin/header', $data, FALSE); $this->load->view('temp-admin/sidebar', $data, FALSE); $this->load->view('temp-admin/topbar', $data, FALSE); $this->load->view('admin/user', $data, FALSE); $this->load->view('temp-admin/footer'); }

11. Algoritma Dasar Halaman Home (Beranda)

Adapun algoritma dasar yang dimiliki oleh halaman home (beranda)


public function index() { $data['judul'] = 'Halaman Utama'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data();

94

$data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/home', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); }

12. Algoritma Dasar Halaman Profile

Adapun algoritma dasar yang dimiliki oleh halaman profile admin, adalah

sebagai berikut :

public function index() { $data['judul'] = 'Profile'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $data['sejarah'] = $this->db->get_where('sejarah')->row_array(); $data['visimisi'] = $this->db->get_where('visimisi')->row_array(); $data['struktur'] = $this->db->get_where('struktur')->row_array(); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/profile', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); } }

13. Algoritma Dasar Halaman Visi Dan Misi

Adapun algoritma dasar yang dimiliki oleh halaman visi dan misi admin,


public function index() { $data['judul'] = 'Visi dan Misi'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $data['sejarah'] = $this->db->get_where('sejarah')->row_array(); $data['visimisi'] = $this->db->get_where('visimisi')->row_array(); $data['struktur'] = $this->db->get_where('struktur')->row_array(); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/visi-misi', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); }

95

14. Algoritma Dasar Halaman Struktur Organisasi

Adapun algoritma dasar yang dimiliki oleh halaman struktur organisasi


public function index() { $data['judul'] = 'Struktur Organisasi'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $data['sejarah'] = $this->db->get_where('sejarah')->row_array(); $data['visimisi'] = $this->db->get_where('visimisi')->row_array(); $data['struktur'] = $this->db->get_where('struktur')->row_array(); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/struktur', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); }

15. Algoritma Dasar Halaman Sejarah

Adapun algoritma dasar yang dimiliki oleh halaman sejarah admin, adalah

sebagai berikut :

public function index() { $data['judul'] = 'Sejarah'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $data['sejarah'] = $this->db->get_where('sejarah')->row_array(); $data['visimisi'] = $this->db->get_where('visimisi')->row_array(); $data['struktur'] = $this->db->get_where('struktur')->row_array(); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/sejarah', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); }

16. Algoritma Dasar Halaman Berita

Adapun algoritma dasar yang dimiliki oleh halaman berita admin, adalah

sebagai berikut :

public function index() { $data['judul'] = 'Berita'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1);

96

$data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $this->load->library('pagination'); if ($this->input->post('submit')) { $data['keyword'] = $this->input->post('keyword'); } else { $data['keyword'] = null; } $config['base_url'] = 'http://localhost/kesbang/berita/index'; $config['total_rows'] = $this->M_berita->jumlahBerita(); $config['per_page'] = 4; $config['full_tag_open'] = '<nav aria-label="Page navigation">

<ul class="pagination justify-content-center">'; $config['full_tag_close'] = '</nav></ul>'; $config['first_link'] = 'First'; $config['first_tag_open'] = '<li class="page-item">'; $config['first_tag_close'] = '</li>'; $config['last_link'] = 'Last'; $config['last_tag_open'] = '<li class="page-item">'; $config['last_tag_close'] = '</li>'; $config['next_link'] = 'danraquo'; $config['next_tag_open'] = '<li class="page-item">'; $config['next_tag_close'] = '</li>'; $config['prev_link'] = 'danlaquo'; $config['prev_tag_open'] = '<li class="page-item">'; $config['prev_tag_close'] = '</li>'; $config['cur_tag_open'] = '<li class="page-item active">

<a class="page-link" href="#">'; $config['cur_tag_close'] = '</a></li>'; $config['num_tag_open'] = '<li class="page-item">'; $config['num_tag_close'] = '</li>'; $config['attributes'] = array('class' => 'page-link'); $this->pagination->initialize($config); $data['start'] = $this->uri->segment(3); $data['berita_all'] = $this->M_berita->get_limit(

$config['per_page'], $data['start'], $data['keyword']);

$this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/berita', $data, FALSE);

97

$this->load->view('temp-blog/footer', $data, FALSE); }

17. Algoritma Dasar Halaman Kontak Kami

Adapun algoritma dasar yang dimiliki oleh halaman kontak kami admin,


public function index() { $data['judul'] = 'Kontak Kami'; $data['berita_baru'] = $this->M_berita->get_berita(4, 1); $data['berita_kategori'] = $this->M_berita->get_data(); $data['berita'] = $this->M_berita->get_limit(4, 1); $data['kategori'] = $this->db->get('kategori')->result_array(); $data['galeri'] = $this->M_galeri->get_galeri(2, 1); $this->load->view('temp-blog/header', $data, FALSE); $this->load->view('temp-blog/menubar', $data, FALSE); $this->load->view('depan/kontak', $data, FALSE); $this->load->view('temp-blog/footer', $data, FALSE); }

rancang bangun website portal pada kantor badan …

Documents