rancang bangun website portal pada kantor badan …
TRANSCRIPT
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
FAKULTAS TEKNIK KOMPUTER
UNIVERSITAS COKROAMINOTO PALOPO
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.
Sumber: Rosa dan Shalahuddin (2015:167)
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.
Sumber: Rosa dan Shalahuddin (2015:167)
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.
Sumber: Rosa dan Shalahuddin (2015:167)
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Kesbangpol dan Linmas Kota Palopo:
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
Activity diagram dibawah ini, admin dapat melakukan proses tambah data
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
dilihat pada gambar 22 berikut:
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
Activity diagram dibawah ini, admin dapat melakukan proses hapus data
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
Activity diagram dibawah ini, admin dapat melakukan proses tambah data
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
Klik tombol tambah Menampilkan form
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
dilihat pada gambar 26 berikut:
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
Activity diagram dibawah ini, admin dapat melakukan proses hapus data
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
Activity diagram dibawah ini, admin dapat melakukan proses tambah data
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
Klik tombol tambah Menampilkan form
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
Activity diagram dibawah ini, admin dapat melakukan proses hapus data
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
Activity diagram dibawah ini, admin dapat melakukan proses tambah data
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
Activity diagram dibawah ini, admin dapat melakukan proses edit data
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
Activity diagram dibawah ini, admin dapat melakukan proses hapus data
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
Activity diagram dibawah ini, admin dapat melakukan proses tambah data
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
Activity diagram dibawah ini, admin dapat melakukan proses edit data
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
Activity diagram dibawah ini, admin dapat melakukan proses hapus data
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)
Menampilkan tabel berita
Data berita tersimpan
Menekan tombol edit
Menampilkan form edit berita
Simpan data edit
(judul, isi, kategori, status, nama penulis
dan gambar berita
Menampilkan tabel berita
Data berita tersimpan
Menekan tombol hapus
Hapus data (judul, isi, kategori,
status, nama penulis dan gambar berita
Menampilkan tabel 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
Menampilkan form 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)
Menampilkan tabel kategori
Data kategori tersimpan
Menekan tombol hapus
Menampilkan tabel kategori
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
Menekan tombol tambah data
Menampilkan form tambah data
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)
Menampilkan tabel level access
Data level access
tersimpan
Menekan tombol hapus
Menampilkan tabel level access
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
Menekan tombol tambah data
Menampilkan form tambah data
Hapus database
Simpan data (input judul, input isi dan input gambar)
Menampilkan tabel visi dan misi
Data visi dan misi
tersimpan
Menekan tombol edit
Menampilkan form edit level access
Edit dan Simpan data (input judul, input isi dan input gambar)
Menampilkan tabel visi dan misi
Data visi dan misi
tersimpan
Menekan tombol hapus
Menampilkan tabel visi dan misi
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
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 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
Menekan tombol tambah data
Menampilkan form tambah data
Hapus database
Simpan data (input judul dan input gambar)
Menampilkan tabel struktur organisasi
Data struktur organisasi
tersimpan
Menekan tombol edit
Menampilkan form edit level access
Edit dan Simpan data (input judul dan gambar)
Menampilkan tabel struktur organisasi
Data struktur organisasi
tersimpan
Menekan tombol hapus
Menampilkan tabel struktur organisasi
Data strukrut organisasi
terhapus
Menghapus data
struktur organisasi
Gambar 46. Sequence diagram kelola menu struktur organisasi
51
7) Sequence diagram kelola menu tabel user
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 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
Menekan tombol hapus
Menampilkan tabel user
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)
Menampilkan tabel user
Data tabel user
tersimpan
Menekan tombol hapus
Menampilkan tabel user
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
-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
-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
Logo Instansi Home Profile Berita Kontak SearchSearch...
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
Logo Instansi Home Profile Berita Kontak SearchSearch...
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
Masyarakat Kota Palopo.
5) Menu struktur organiasi
Logo Instansi Home Profile Berita Kontak SearchSearch...
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
Logo Instansi Home Profile Berita Kontak SearchSearch...
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
Masyarakat Kota Palopo.
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
Masyarakat Kota Palopo.
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
Field Type Keterangan
*id Int (11) Id Pengguna
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
Field Type Keterangan
*id Int (11) Id Pengguna
kategori Varchar (128) Kategori Berita
Field Type Keterangan
*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
Field Type Keterangan
*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
Field Type Keterangan
*id Int (11) Id Struktur
judul Varchar (128) Judul Struktur Organisasi
gambar Varchar(11) Gambar struktur organisasi
Field Type Keterangan
*id Int (11) Id Pengguna
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
Field Type Keterangan
*id Int (11) Id Pengguna
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
jelasnya dapat dilihat pada gambar di bawah ini:
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
jelasnya dapat dilihat pada gambar di bawah ini:
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
masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:
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
masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:
Gambar 72. Halaman berita
f. Tampilan halaman kontak
Tampilan halaman kontak merupakan tampilan yang akan tampil saat
masuk ke website, untuk lebih jelasnya dapat dilihat pada gambar di bawah ini:
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
proses perhitungan sebagai berikut:
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
Sehingga jumlah region (∑R) sebanyak 4 yaitu R1, R2, R3 dan R4.
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
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
= 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
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
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
= 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
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
proses perhitungan sebagai berikut:
Diketahui = Node (N) = 9
Edge (E) = 11
Predikat (P) = 3
CC = E – N + 2
= 11 – 9 + 2 = 4
IP = P + 1
= 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
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
dilakukan proses perhitungan sebagai berikut:
Diketahui = Node (N) = 13
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
dilakukan proses perhitungan sebagai berikut:
Diketahui = Node (N) = 7
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
2. Kembali ke menu utama
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
dilakukan proses perhitungan sebagai berikut:
Diketahui = Node (N) = 7
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
77
j. Flowchart dan flowgraph halaman sejarah Mulai
1. Menu sejarah
2. Kembali ke menu utama
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
proses perhitungan sebagai berikut:
Diketahui = Node (N) = 7
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
78
k. Flowchart dan flowgraph halaman berita Mulai
1. Menu berita
2. Kembali ke menu utama
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
proses perhitungan sebagai berikut:
Diketahui = Node (N) = 7
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
79
l. Flowchart dan flowgraph halaman kontak Mulai
1. Menu berita
2. Kembali ke menu utama
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
proses perhitungan sebagai berikut:
Diketahui = Node (N) = 7
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
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 :
RANCANG BANGUN WEBSITE PORTAL PADA KANTOR BADAN
KESATUAN BANGSA POLITIK DAN PERLINDUNGAN
MASYARAKAT KOTA PALOPO
Adi Murdayani
1504411060
PROGRAM STUDI INFORMATIKA
FAKULTAS TEKNIK KOMPUTER
UNIVERSITAS COKROAMINOTO PALOPO
2020
87
Lampiran 1. Dokumentasi Penelitian
Dokumentasi Penelitian :
LEMBAR ALGORITMA DASAR PROGRAM
Judul Penelitian :
RANCANG BANGUN WEBSITE PORTAL PADA KANTOR BADAN
KESATUAN BANGSA POLITIK DAN PERLINDUNGAN
MASYARAKAT KOTA PALOPO
Adi Murdayani
1504411060
PROGRAM STUDI INFORMATIKA
FAKULTAS TEKNIK KOMPUTER
UNIVERSITAS COKROAMINOTO PALOPO
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');
$this->form_validation->set_rules(
'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,
adalah sebagai berikut :
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', [
'email' => $this->session->userdata('email') ])->row_array();
$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', [
'email' => $this->session->userdata('email') ])->row_array();
$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
admin, adalah sebagai berikut :
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,
adalah sebagai berikut :
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', [
'email' => $this->session->userdata('email') ])->row_array();
$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,
adalah sebagai berikut :
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', [
'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/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,
adalah sebagai berikut :
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', [
'email' => $this->session->userdata('email') ])->row_array();
$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');
$this->form_validation->set_rules(
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,
adalah sebagai berikut :
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)
admin, adalah sebagai berikut :
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,
adalah sebagai berikut :
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
admin, adalah sebagai berikut :
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,
adalah sebagai berikut :
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); }