PERANCANGAN APLIKASI SISTEM INFORMASI DATA

KEPENDUDUKAN KELURAHAN PEKAN SELESAI

MENGGUNAKAN METODE WATERFALL BERBASIS WEB

SKRIPSI

YUSTIKA AMELIA
1614370351

PROGRAM STUDI SISTEM KOMPUTER

FAKULTAS SAINS & TEKNOLOGI
UNIVERSITAS PEMBANGUNAN PANCA BUDI
MEDAN
2020
 LEMBAR PENGESAHAN

PERANCANGAN APLIKASI SISTEM INFORMASI DATA

KEPENDUDUKAN KELURAHAN PEKAN SELESAI
MENGGUNAKAN METODE WATERFALL BERBASIS WEB

Disusun Oleh :

Nama : Yustika Amelia

NPM : 1614370351
Program Studi : Sistem Komputer

Skripsi telah disetujui oleh Dosen Pembimbing Skripsi

Pada tanggal, 2020

Dosen Pembimbing I Dosen Pembimbing II

Barany Fachri S.T M.Kom Ranti Eka Putri S.Kom M.Kom

Mengetahui

Dekan Fakultas Sains dan Teknologi Ketua Prodi Sistem Komputer

Hamdani S.T., MT Eko Hariyanto S.kom M.kom

 ABSTRAK

YUSTIKA AMELIA
PERANCANGAN APLIKASI SISTEM INFORMASI DATA
KEPENDUDUKAN KELURAHAN PEKAN SELESAI MENGGUNAKAN
METODE WATERFALL BERBASIS WEB
2020

Zaman modern dini hari sangat membutuhkan teknologi untuk membantu

pekerjaan manusia. Hampir seluruh instansi baik kepemerintahan maupun swasta
kini membutuhkannya. Salah satu bentuk teknologi tersebut adalah sistem
informasi. Kantor lurah Kelurahan Pekan Selesai adalah salah satu instansi yang
memerlukan sistem informasi. Pengolahan data yang cepat dan mudah adalah
alasan yang tepat. Kelurahan Pekan Selesai selama ini belum memiliki sistem
informasi yang dapat mengolah data-data. Baik dari data surat maupun data yang
lainnya. Diantara masalah yang sangat menonjol adalah seperti penulisan surat
yang masih menggunakan mesin ketik manual, yang mengakibatkan terjadi
kesalah pengetikan sehingga pegawai / petugas memungkinkan untuk melakukan
pengetikan ulang pada surat yang salah tersebut. Dalam pembuatan sistem
informasi yang akan dimasukan dalam sistem meliputi informasi tentang surat
menyurat dan beberapa pengumuman yang disajikan untuk masyarakat. Sedang
perangkat lunak yang digunakan adalah DBMS (Data Base Management System)
yang digunakan sebagai media penyimpanan data adalah MySql, bahasa
pemrograman PHP, CSS, JavaScript dan HTML digunakan sebagai pembuatan
interface, yang bertujuan mempermudah user maupun administrator dalam
memanipulasi data.

Kata Kunci : sistem informasi, data, surat, database

 KATA PENGANTAR

Dengan mengucapkan Alhamdulillah segala puji dan syukur penulis

panjatkan atas kehadirat Allah SWT, karena berkat rahmat dan hidayah-Nya
penyusunan Skripsi yang berjudul “Perancangan Aplikasi Sistem Informasi
Data Kependudukan Kelurahan Pekan Selesai Menggunakan Metode
Waterfall Berbasis Web.” ini dapat diselesaikan guna memenuhi salah satu
persyaratan dalam menyelesaikan pendidikan Starata satu (S1) pada Jurusan
Sistem Komputer Fakultas Sains Dan Teknologi Universitas Pembangunan Panca
Budi Medan.
Perjalanan panjang telah penulis lalui dalam rangka perampungan
penulisan Skripsi saya ini. Banyak hambatan yang dihadapi dalam
penyusunannya, namun berkat kehendak-Nyalah sehingga penulis berhasil
menyelesaikan penyusunan Skripsi. Oleh karena itu, dengan penuh kerendahan
hati, pada kesempatan ini patutlah kiranya penulis mengucapkan terima kasih
kepada :
1. Kedua orang tua saya, ayahanda Alm Ischak dan ibunda tercinta Nurhayati
yang senantiasi memberikan kasih sayang dan semagat,dukungan kepada
penulis.
2. Bapak Dr. H. Muhammad Isa Indrawan, SE, MM selaku Rektor
Universitas Pembanguna Panca Budi Medan.
3. Bapak Hamdani S.T., MT selaku Dekan Fakultas Sains dan Teknologi
Universitas Pembangunan Panca Budi Medan.
4. Bapak Eko Hariyanto S.Kom, M.Kom selaku Ketua Prodi Sistem
Komputer Universitas Pembangunan Panca Budi Medan.
5. Bapak Barany Fachri S.T, M.Kom selaku dosen pembimbing 1 yang telah
bayak memberikan bimbigan dan arahan dalam menyelesaikan skripsi
saya ini Terima kasih atas ajaran, dan ilmu-ilmu baru yang penulis
dapatkan dari selama penyusunan Skripsi ini.
6. Ibu Ranti Eka Putri S.Kom.M.Kom selaku dosen pembimbig II yang telah
banyak memberikan bimbingan dan pengarahan selama menyelesaikan
skripsi ini.
7. Seluruh Dosen Fakultas Sistem Komputer Universitas Pembangunan
Panca Budi Medan yang telah banyak memberikan ilmu pengetahuan

i
 kepada penulis selama masih dalam proses perkuliahan sebagai bekal ilmu
penulis dikemudian hari.
8. Kepada kakak dan abang ku tercinta terimakasih yang telah
menyemangati.
9. Kepada teman-teman angkatan 2016, yang tidak dapat disebutkan
namanya satu persatu.
10. Terimakasih penulis ucapkan kepada seluruh staff fakultas komputer yang
telah membantu dan menyelesaikan skripsi ini.
11. Terimakasih penulis ucapkan kepada sahabat-sahabat yang banyak
membantu dan memberikan motivasi atau masukan yang positif kepada
penulis.

Akhir kata, penulis mengharapkan skripsi ini dapat memberikan manfaat

dan mendatangkan ridho bagi kita semua terutama bagi penulis sendiri.

Medan, Juli 2020

Penulis,

(Yustika Amelia)

ii
 DAFTAR ISI

KATA PENGANTAR .................................................................................... i

DAFTAR ISI ................................................................................................... iii
DAFTAR TABEL .......................................................................................... v
DAFTAR GAMBAR ...................................................................................... vi

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

1.1 Latar Belakang Masalah ....................................................................... 1
1.2 Rumusan Masalah ................................................................................ 3
1.3 Batasan Masalah ................................................................................... 3
1.4 Tujuan Penelitian.................................................................................. 3
1.5 Manfaat Penelitian................................................................................ 4

BAB II LANDAAN TEORI .......................................................................... 5

2.1 Sistem Informasi .................................................................................. 5
2.2 Kelurahan ............................................................................................. 6
2.3 Dokumen .............................................................................................. 7
2.4 Website ................................................................................................. 8
2.5 Html...................................................................................................... 9
2.6 PHP....................................................................................................... 9
2.7 CSS ....................................................................................................... 10
2.8 Mysql .................................................................................................... 11
2.9 Xampp ................................................................................................. 12
2.10 Waterfall ............................................................................................ 12
2.11 UML................................................................................................... 14

BAB III METODE PENELITIAN ............................................................... 22

3.1 Tahapan Penelitian ............................................................................... 22
3.2 Metode Pengambilan Data ................................................................... 23
3.3 Analisis Sistem Yang Berjalan ............................................................ 23
3.4 Rancangan Penelitian ........................................................................... 25

BAB IV HASIL DAN PEMBAHASAN ....................................................... 55

4.1 Kebutuhan Spesifikasi .......................................................................... 55
4.2 Pengujian Aplikasi ............................................................................... 56
4.3 Pengujian Sistem .................................................................................. 62
4.4 Kelebihan dan Kekurangan Sistem ...................................................... 62

iii
BAB V PENUTUP .......................................................................................... 64
5.1 Kesimpulan .......................................................................................... 64
5.2 Saran ..................................................................................................... 64

DAFTAR PUSTAKA ..................................................................................... 65

iv
 DAFTAR TABEL

Tabel 2.1 Simbol-simbol Use Case Diagram ............................................. 15

Tabel 2.2 Simbol-simbol Class Diagram.................................................... 16
Tabel 2.3 Simbol-simbol Activity Diagram .............................................. 18
Tabel 2.4 Simbol-simbol Sequence Diagram ............................................ 19
Tabel 3.1 Aktor Pengguna Sistem .............................................................. 25
Tabel 3.2 Tabel Admin ............................................................................... 42
Tabel 3.3 Tabel Data Penduduk ................................................................. 42
Tabel 3.4 Tabel Profil Lurah ..................................................................... 43
Tabel 3.5 Tabel Berita / Pengumuman ...................................................... 44
Tabel 3.6 Tabel Permohonan Surat ........................................................... 44
Tabel 3.7 Tabel Surat ................................................................................. 45
Tabel 3.8 Tabel Arsip Surat ....................................................................... 46
Tabel 4.1 Perangkat Lunak Yang Digunakan............................................. 55
Tabel 4.2 Spesifikasi Perangkat Keras Yang Digunakan .......................... 56
Tabel 4.3 Hasil Pengujian Sistem .............................................................. 56

v
 DAFTAR GAMBAR

Gambar 2.1 Metode Waterfall .................................................................. 14

Gambar 3.1 Metode Penelitian ................................................................ 22
Gamber 3.2 Flowchart Sistem Yang Berjalan ......................................... 24
Gambar 3.3 Use Case Diagram ................................................................ 26
Gamber 3.4 Diagram Acitivity Admin Mengelola Data Penduduk .......... 27
Gambar 3.5 Diagram Acitivity Admin Mengelola Profil Kepala Lurah .. 28
Gamber 3.6 Diagram Acitivity Admin Mengelola Pengumuman............. 29
Gambar 3.7 Diagram Acitivity Admin Mengelola Pengumuman ............ 30
Gambar 3.8 Diagram Activity Melihat Profil Lurah................................. 31
Gambar 3.9 Diagram Activity Baca Pengumuman ................................... 32
Gambar 3.10 Diagram Activity Admin...................................................... 33
Gambar 3.11 Class Diagram ...................................................................... 34
Gambar 3.12 Sequences Diagram Login .................................................. 35
Gambar 3.13 Acativity Diagram Input Data ............................................. 36
Gambar 3.14 Sequences Diagram Edit Data Penduduk ............................ 37
Gambar 3.15 Sequences Diagram Hapus Data Penduduk ........................ 37
Gambar 3.16 Sequence Diagram Input Berita........................................... 38
Gambar 3.17 Sequence Diagram Edit Berita ............................................ 38
Gambar 3.18 Sequence Diagram Hapus Pengumuman............................. 39
Gambar 3.19 Sequence Diagram Profil Lurah .......................................... 40
Gambar 3.20 Sequence Diagram Input / Edit Profil Lurah ....................... 41
Gambar 3.21 Rancangan Login Admin ..................................................... 47
Gambar 3.22 Rancangan Halaman Dashboard Admin ............................. 47
Gambar 3.23 Rancangan Halaman Data Lurah ........................................ 48
Gambar 3.24 Rancangan Halaman Berita / Pengumuman ....................... 49
Gambar 3.25 Rancangan Halaman Pembuatan Surat ............................... 49
Gambar 3.26 Rancangan Halaman Data Produk ...................................... 50
Gambar 3.27 Rancangan Halaman Home ................................................. 51
Gambar 3.28 Rancangan Halaman Profil ................................................. 52
Gambar 3.29 Rancangan Halaman Pengumuman / Berita ....................... 53
Gambar 3.30 Rancangan Halaman Pengajuan Permohonan Surat ............ 54
Gambar 4.1 Tampilan Login Admin ....................................................... 56
Gambar 4.2 Tampilan Dashboard Admin .............................................. 57
Gambar 4.3 Tampilan Profil Lurah Admin ............................................. 58
Gambar 4.4 Tampilan Pengumuman Admin ........................................... 58
Gambar 4.5 Tampilan Data Anggota ...................................................... 59
Gambar 4.6 Tampilan Edit Data Anggota .............................................. 59
Gambar 4.7 Tampilan Home Users ........................................................ 60
Gambar 4.8 Tampilan Menu Profil ........................................................ 60
Gambar 4.9 Tampilan Menu Pengumuman ............................................ 61
Gambar 4.10 Tampilan Menu Pengumuman ............................................ 61

vi
 BAB I

PENDAHULUAN

1.1 Latar Belakang Masalah

Instansi pemerintah terkecil setingkat dengan desa yaitu Kantor kelurahan

merupakan suatu instansi yang melakukan pengolahan data kependudukan terutama

dalam proses pembuatan Kartu Keluarga (KK), Surat Kematian, Surat Keterangan

Pendatang, dan Surat Keterangan Pindah. Kartu Tanda Penduduk, Surat Pengantar

Perkawinan, Surat Pernyataan, Surat Keterangan Silang Sengketa, dan Surat Ahli

Waris Untuk dapat lebih meningkatkan pendataan penduduk beserta laporan kepada

instansi yang lebih tinggi yaitu kecamatan, maka perlu pengembangan sistem

pengolahan data.

Kependudukan berhubungan dengan teknik pengumpulan data, mencatat dan

mengelola data kependudukan yang terdiri dari pengolahan data kelahiran pengolahan

data kematian, pengolahan kedatangan penduduk dan perpindahan, Pengolahan data

tersebut merupakan suatu kegiatan utama yang dilakukan oleh pihak kelurahan.

Dimana dalam melakukan pengolahan data kependudukan harus dilakukan secara

cepat, tepat dan akurat. Tetapi pada kenyataanya saat ini masih banyak lembaga

pemerintahan yang masih melakukan pengolahan data kependudukan secara manual

dan menyebabkan berbagai permasalahan seperti hilangnya berkas menjadi

lambatnya proses pelayanan terhadap masyarakat dan kurang akurat dalam membuat

laporan dan mengirim laporan yang nantinya akan diserahkan kepada kecamatan.

1
 Febri Haswan telah membuat sebuah sistem informasi untuk lurah. Mereka

merancang sebuah aplikasi yang berfungsi untuk mempermudah pendataan data

masyarakat yang terdapat pada kelurahan tersebut. Aplikasi ini sangat dapat

membantu dalam menyimpan data dengan resiko kehilangan data lebih sedikit dari

pada harus menyimpan data dengan data-data yang masih di tulis dalam kertas /

dokumen lainnya. Untuk dari itu saya berinisiatif unutk menambahkan sebuah fitur

dan design aplikasi yang berbeda. Fitur yang dimaksud adalah fitur permohonan

surat. Fitur ini nantinya akan berfungsi sebagai media pengajuan serat oleh

masayarakat untuk pegawai yang bekrja pada kantor lurah tanpa harus mendatangi

kantor lurah (Febri Haswan, 2018).

Pengembangan Sistem Informasi ini akan memanfaatkan informasi yang akan

membantu pendataan penduduk dikelurahan pada proses pendataan penduduk, Kartu

Keluarga (KK), Surat Kelahiran, Surat Kematian, surat keterangan pendatang, dan

Surat Keterangan pindah yang memerlukan kecamatan. Sehingga dalam waktu yang

singkat pembuatan laporan pendataan penduduk tersebut dapat meminimalkan

kesalahan yang mungkin terjadi dan dapat memberikan laporan secara cepat dan

tepat. Oleh karena itu kita harus menghasilkan sebuah sistem informasi pengolahan

data penduduk yang dapat mempermudah dalam proses pelayanan kependudukan

serta dapat menghasilkan sebuah data-data yang terkait seperti data kematian, data

perpindahan dan pendatang. Berdasarkan latar belakang masalah di atas, maka

penulis tertarik untuk mengambil judul “Perancangan Aplikasi Sistem Informasi

2
Pengolahan Data Kependudukan Kelurahan Pekan Selesai Berbasis Web

Menggunakan Metode Waterfall. ”

1.2 Rumusan Masalah

Berdasarkan uraian pada latar belakang diatas, maka didapatkan rumusan

masalah yaitu:

1. Bagaimana merancang dan membangun sistem informasi pengolahan data

kependudukan yang sistimatis, terstruktur dan terarah sehingga dapat

meningkatkan kinerja yang lebih baik lagi.

2. Bagaimana membuat sistem yang dapat memberikan informasi data

kependudukan secara cepat dan akurat.

1.3 Batasan Masalah

Adapun batasan masalah pada penelitian ini agar penelitian dapat memberikan

pelayanan informasi dengan benar dan tepat sasaran sebagai berikut : Pendataan

penduduk dalam proses pembuatan Surat Kelahiran, Surat Kematian, Surat Pendataan

Penduduk, Surat Pindah sehingga menjadi lebih optimal dan terkontrol.

1.4 Tujuan Penelitian

Tujuan dari adanya penelitian ini adalah : Untuk menghasilkan sebuah sistem

informasi pengolahan data berbasis web yang dapat mempermudah melakukan

pengolahan data penduduk, proses penyimpanan surat keterangan penduduk dan

3
mempercepat penyebaran informasi. Serta dapat menghasilkan data yang terkait

seperti data kematian, data pindah dan data penduduk.

1.4 Manfaat Penelitian

1. Bagi instansi/Kelurahan

Sebagai media informasi atau sarana dalam penyampaian informasi yang

berhubungan dengan kelurahan pekan selesai.

2. Bagi penulis

Menambah pengetahuan, wawasan dan mengembangkan daya nalar dalam

menganalisis dan merancang sistem informasi berbasis web.

3. Bagi Perguruan Tinggi

Diharapkan dari penelitian ini dapat menjadi referensi yang berguna bagi

kalangan akademik.

4. Bagi Umum/Masyarakat

Lebih Mempermudah kalangan masyarakat.

4
 BAB II

LANDASAN TEORI

2.1 Sistem Informasi

Sistem merupakan “kumpulan prosedurprosedur dari sejumlah komponen

yang diproses suatu tujuan dari sistem tersebut.maksud dari suatu sistem adalah untuk

mencapai suatu tujuan dan sasaran”. (Putri & Putra, 2018)

Informasi dibutuhkan oleh manajemen untuk menghindari proses entropi.

Proses entropi adalah proses berakhirnya keberadaan suatu sistem manajemen yang

didahului kondisi tanpa pola dan tidak menentu. Informasi adalah hasil pengolahan

data yang dapat digunakan sebagai dasar pengambilan keputusan. (Habiby &

Yamasari, 2017)

Sistem informasi dalam suatu organisasi dapat dikatakan sebagai suatu sistem

yang menyediakan informasi bagi semua tingkatan dalam organisasi tersebut. Sistem

ini menyimpan, mengambil, mengubah, mengolah dan mengkomunikasikan informasi

yang diterima dengan menggunakan sistem informasi atau peralatan sistem lainnya.

Sistem ini berfungsi juga sebagai media untuk menyediakan informasi yang berguna

untuk managemen dan mendukung rencana strategi dalam organisasi. Sedangkan

tujuan dari sistem informasi tersebut untuk mengumpulkan data, menyimpan dan

menginformasikan kepada para pemakai (user) yang membutuhkannya. Sistem

informasi telah menjadi kebutuhan penting agar dapat mempermudah dan

mempercepat pekerjaan manusia.

5
2.2 Kelurahan

Pengertian dari Kelurahan yaitu: dalam Undang-Undang Nomor 22 tahun

1999 menjelaskan bahwa kelurahan adalah suatu wilayah yang ditempati oleh

sejumlah penduduk dengan kesatuan masyarakat hukum yang mempunyai organisasi

pemerintah terendah langsung di bawah camat yang tidak berhak menyelenggarakan

rumah tangganya sendiri dalam Negara Kesatuan Republik Indonesia. (Linggi, 2017)

dalam jurnalnnya menyebutkan Jenis Pelayanan Aparatur Kelurahan adalah sebagai

berikut :

1. Pelayanan pembuatan Kartu Keluarga (KK)

2. Pelayanan pembuatan Kartu tanda Penduduk (KTP)

3. Pelayanan pembuatan surat keterangan belum nikah (SKBN)

4. Pelayanan pembuatan surat keterangan tidak mampu (SKTM)

5. Pelayanan pembuatan surat keterangan tanda lapor diri (SKTLD)

6. Pelayanan pembuatan surat keterangan kelakuan baik (SKKB)

7. Pelayanan pembuatan KTP sementara

8. Pelayanan pembuatan surat pengantar untuk nikah

9. Pelayanan pembuatan surat keterangan lahir

10. Pelayanan pembuatan surat keterangan kematian

11. Pelayanan pembuatan surat keterangan pindah

12. Pelayanan pembuatan surat ijin tempat usaha (SITU), SIUP, IMB

6
 13. Pelayanan pembuatan surat tanah Berdasarkan pada penjelasan di atas dapat

diketahui bahwa pelayanan yang terdapat di Kelurahan mencakup semua

aspek pelayanan kepada masyarakat, sehingga pelayanan yang diberikan

pegawai/aparat Kelurahan diharapkan dapat dilaksanakan secara baik, efektif

dan efisien dan dapat dirasakan oleh seluruh masyarakat

2.3 Dokumen

Dokumen adalah surat, akta dan sebagainya yang penting atau berharga yang

sifatnya tertulis atau tercetak yang berfungsi atau dapat di pakai sebagai bukti

ataupun keterangan (Lestanti & Susana, 2016). Dalam kata lain dapat kita simpulkan

dokumen merupakan kertas yang tertulis atau tercetak yang memiliki fungsi tertentu.

Dokumen Elektronik Rekod elektronik merupakan Rekodrekod yang disimpan dan

diolah di dalam suatu format, dimana hanya computer yang dapat memprosesnya.

Oleh karenanya Rekod elektronik seringkali dikatakan sebagai Machine-readable

record. Rekod elektronik merupakan informasi yang terkandung dalam file dan media

elektronik, yang dibuat, diterima, atau dikelola oleh organisasi maupun perorangan

dan menyimpannya sebagai bukti kegiatan (Suroyo & Amin. 2017).

Dalam dokumen elektronik terdapat beberapa jenis file yang sangat sering di

guanakan. Beberapa diantaranyanya adalah file DOC dan PDF. DOC atau document

adalah salah satu ekstensi tipe file dokumen pengolah kata. DOC merupakan format

file binary yang digunakan oleh aplikasi Microsoft Word. Sedangkan PDF atau

Portable Document Format adalah tipe file dokumen umum yang mewakili berbagai

7
jenis tipe file dokumen lain yang terdapat di internet sejak tahun 1993 oleh Adobe

Systems.

2.4 Website

(Destiningrum & Adrian, 2017) menyimpulkan bahwa web adalah Sebuah

software yang berfungsi untuk menampilkan dokumen - dokumen pada suatu web

yang membuat pengguna dapat mengakses internet melalui software yang terkoneksi

dengan internet. Ditinjau dari aspek content atau isi, web dapat dibagi menjadi 2

jenis, yaitu web statis dan web dinamis. Selain dari sisi content/isi, web statis dan

web dinamis dapat dilihat dari aspek teknologi yang digunakan untuk membuat jenis

web tersebut. Pada umumnya web statis tidak memiliki data base sebagai media

penyipanan dan dibuat dengan hanya menggunakan bahasa pemrograman html

dilengkapi dengan css sebagai pengatur / desain tampilan. Sedangkan web dinamis

biasanya di buat dengan gabungan beberapa bahasa pemrograman dan memiliki

database sebagai media penyimpanan.

2.5 HTML

HyperText Markup Language (HTML) adalah “sebuah bahasa markup yang

digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di

dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis

kedalam berkas format ASCII agar dapat menghasilkan tampilan wujudyang

terintegerasi” (Harison & Syarif, 2016). Untuk dapat membuat website dengan baik

8
maka langkah awal yang harus dilakukan yaitu mengenal kode-kode dasar HTML

yang sering digunakan oleh programmer web professional. Kode HTML memiliki

aturan dan struktur penulisan tersendiri yang disebut tag HTML. Tag adalah kode

yang digunakan untuk memoles (mark-up) teks menjadi file HTML. Setiap tag diapit

dengan tanda kurung runcing. Ada tag pembuka dan tag penutup, yang membedakan

tag penutup ditandai dengan tanda garis miring (slash) di depan awal tulisannya.

Dokumen html merupakan dokumen yang disajikan dalam web browser dan biasanya

hanya untuk menampilkan informasi maupun interface. Secara umum, dokumen web

dibagi menjadi dua bagian, yaitu head dan body, sehingga setiap dokumen html harus

mempunyai pola dasar.

2.6 PHP

(Habiby & Yamasari, 2017) dalam jurnalnya yang berjudul Sistem Informasi

Sekolah Berbasis Web menyatakan “Hypertext Preprocessor (PHP) adalah bahasa

serverside scripting yang menyatu dengan HTML untuk membuat halaman web yang

dinamis”. Karena PHP merupakan server-side scripting maka sintaks dan perintah-

perintah PHP akan dieksekusi di server kemudian hasilnya dikirim ke browser dalam

format HTML. Dengan demikian kode program yang ditulis dalam PHP tidak akan

terlihat oleh user sehingga keamanan halaman web lebih terjamin. PHP dirancang

untuk membentuk suatu tampilan berdasarkan permintaan terkini, seperti

menampilkan isi basis data ke halaman web.Beberapa kelebihan PHP dari bahasa

pemrograman web, antara lain : Bahasa pemrograman PHP adalah sebuah bahasa

9
script yang tidak melakukan sebuah kompilasi dalam penggunanya. PHP memiliki

tingkat akses yang lebih cepat.PHP memiliki tingkat lifecycle yang cepat sehingga

selalu mengikuti perkembangan teknologi internet. PHP juga mendukung akses ke

beberapa database yang sudah ada baik yang bersifat free/gratis ataupun komersial.

Database itu antara lain : MySQL, PostgresSQL, infomix, dan MicrosoftSQL Server.

Web server yang mendukung PHP dapat ditemukan dimana mana dari mulai Apache,

IIS, AOserver, phttp. Dalam sisi pengembangan lebih mudah, karena banyaknya

milis-milis dan developer yang siap membantu dalam pengembangan. PHP bersifat

free atau gratis.

2.7 CSS

Menurut Rohi Abdulloh (Josi, 2017), CSS singkatan dari cascading style

sheets, yaitu “skrip yang digunakan untuk mengatur desain website. Walaupun

HTML mempunyai kemampuan untuk mengatur tampilan website, namun

kemampuannya sangat terbatas. Fungsi CSS adalah memberikan pengaturan yang

lebih lengkap agar struktur website yang dibuat dengan HTML terlihat lebih rapi dan

indah”. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang

dibuat dengan bahasa HTML dan XHTML. Menurut BPTIK (Badan Pengembangan

Teknologi Informasi dan Komunikasi) Cascading Style Sheet atau CSS adalah sebuah

pemrogaman atau boleh dibilang script yang mengendalikan beberapa komponen (tag

html) dalam sebuah website sehingga tampilan akan menjadi lebih terstruktur dan

seragam. (jurnal css & mysql)

10
2.8 MySql

Menurut Adi Nugroho (Destiningrum & Adrian, 2017) MySQL (My

Structured Query Language) adalah: “ Suatu sistem basis data relation atau Relational

Database managemnt System (RDBMS) yang mampu bekerja secara cepat dan

mudah digunakan MySQL juga merupakan program pengakses database yang bersifat

jaringan, sehingga sapat digunakan untuk aplikasi multi user (banyak pengguna).

MySQL didistribusikan gratis dibawah lisensi GPL (General Public License). Dimana

setiap program bebas menggunakan MySQL namun tidak bisa dijadikan produk

turunan yang dijadikan closed source atau komersial”.

2.9 XAMPP

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem

operasi, merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai

server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP

Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa

pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat

sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam

GNU General Public License dan bebas, merupakan web server yang mudah

digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk

mendapatkanya dapat mendownload langsung dari web resminya (Palit et al., 2015)

11
2.10 Waterfall

Metode ini memberikan pendekatan-pendekatan sistematis dan berurutan bagi

pengembangan sistem informasi. (Susanti, 2016) menjelaskan bahwa terdapat

tahapan-tahapan pada metode waterfall. Berikut merupakan gambar serta

penjelasannya :

1. Perancangan Sistem (System Enginering) Perancangan sistem sangat

diperlukan, karena sistem informasi biasanya merupakan bagian dari suatu

sistem yang lebih besar. Pembuatan sebuah sistem informasi dapat dimulai

dengan melihat dan mencari apa yang dibutuhkan oleh sistem. Dari kebutuhan

sistem tersebut akan diterapkan kedalam sistem informasi yang dibuat

2. Analisa (Analysis) Merupakan proses pengumpulan kebutuhan sistem

informasi. Untuk memahami dasar dari program yang akan dibuat, seorang

analisis harus mengetahui ruang lingkup informasi, fungsi-fungsi yang

dibutuhkan, kemampuan kinerja yang ingin dihasilkan dan perancangan

antarmuka pemakai sistem informasi tersebut.

3. Perancangan (Design) Perancangan sistem informasi merupakan proses

bertahap yang memfokuskan pada empat bagian penting, yaitu: Struktur data,

arsitektur sistem informasi, detil prosedur, dan karakteristik antar muka

pemakai.

4. Pengkodean (Coding) Pengkodean sistem informasi merupakan proses

penulisan bahasa program agar sistem informasi tersebut dapat dijalankan

oleh mesin.

12
5. Pengujian (Testing) Proses ini akan menguji kode program yang telah dibuat

dengan memfokuskan pada bagian dalam sistem informasi. Tujuannya untuk

memastikan bahwa semua pernyataan telah diuji dan memastikan juga bahwa

input yang digunakan akan menghasilkan output yang sesuai. Pada tahap ini

pengujian ini dibagi menjadi dua bagian, pengujian internal dan pengujian

eksternal. Pengujian internal bertujuan menggambarkan bahwa semua

statement sudah dilakukan pengujian, sedangkan pengujian eksternal

bertujuan untuk menemukan kesalahan serta memastikan output yang

dihasilkan sesuai dengan yang diharapkan.

6. Pemeliharaan (Maintenance) Proses ini dilakukan setelah sistem informasi

telah digunakan oleh pemakai atau konsumen. Perubahan akan dilakukan

Sistem Enginering

Analisys

Design

Code

Testing

Maintenance

Gambar 2.1 Metode Waterfall

(Susanti, 2016)

13
2.11 UML

Berdasarkan jurnal (Heriyanto, 2018) mengungkapkan : “Unified Modeling

Language (UML) merupakan bahasa pemodelan yang berbentuk grafis yang

digunakan untuk memvisualisasi, menspesifikasikan suatu sistem perangkat lunak.”

Masih dalam jurnal yang sama. Yunahar (2018) juga mengutip pendapat yang

berisikan “Unified Modeling Language (UML) adalah sebuah bahasa yang

berdasarkan grafik/gambar untuk memvisualisasi, menspesifikasikan dari sebuah

sistem pengembangan software berbasis object oriented.” (Mamed Rofendy Manalu,

2015). Sedangkan menurut penulis, Unified Modeling Language (UML) adalah

bahasa pemodelan yang divisualisasikan untuk menjelaskan sebuah sistem yang

dirancang. Dalam memvisualisasikan setiap proses, UML memiliki diagram grafis

yang memiliki fungsi yang berbeda.

2.11.1 Use Case

Use case diagram menggambarkan sebuah interaksi antara satu atau lebih

aktor dengan sistem informasi yang akan dibuat. Use case digunakan untuk

mengetahui fungsi apa saja yang ada di dalam sebuah sistem dan siapa saja yang

berhak menggunakan fungsi-fungsi tersebut.

14
 Tabel 2.1 Sombol-simbol Diagram Use Case
Simbol
Use case
Aktor / actor
Asosiasi / assosiation
Ekstensi / extend <<extend>>
Generalisasi / generalization
Sumber : (Heriyanto, 2018)
Deskrifsi
Fungsionalitas yang disediakan sistem sebagai
unit-unit yang saling tertukar pesan antar unit
atau aktor; biasanya dinyatakan dengan
menggunakan kata kerja diawal frase nama Use
Case
Orang, proses, atau sistem lain yang
berinteraksi dengan sistem informasi yang
akan dibuat diluar sistem informaasi yang akan
dibuat itu sendiri, jadi walaupun simbol dari
aktor adalah gambar orang, tapi aktor belum
tentu merupakan orang: biasanya dinyatakan
menggunakan kata benda diawal frase nama
aktor
Komunikasi antara aktor dan use case yang
berpartisifasi pada use case atau use case
memiliki interaksi dengan aktor
Relasi use case tambahan kesebuah use case
dinamakan use case yang ditambahkan dapat
berdiri sendiri walau tanpa use case tambahan
itu; mirip dengan prinsip intherince pada
pemrograman berorientasi objek; biasanya use
case tambahan memiliki nama depan yang
sama dengan use case yang ditambahkan.
Hubungan generalisasi dan spesialisasi
(umum-khusus) antara dua buah use case
dimana fungsi yang satu adalah fungsi yang
lebih umum dari laainnya.
15
2.11.2 Class Diagram

Class diagram menggambarkan kelas-kelas dalam dalam sebuah sistem dan

hubungannya antara satu sama lainnya.

Tabel 2.2 Simbol-simbol Diagram Kelas

Simbol Deskripsi

Kelas Kelas pada struktur sistem sama dengan

konsep interface dalam
pemrograman berorientasi objek

Asosiasi / Association Relasi antar kelas dengan makna umum,

asosiasi biasanya juga disertai dengan
multiplicity

Asosiasi berarah / Directed Relasi antarkelas dengan makna kelas satu

Association digunakan oleh kelas yang lain, asosiasi
biasanya juga disertai dengan multiplicity

Generalisasi Relasi antarkelas dengan makna

generalisasi-spesialisasi (umum khusus)

Kebergantungan / Dependency Relasi antar kelas dengan makna

kebergantungan antarkelas

Agregasi / Aggregation Relas antarkelas dengan makna semua-

bagian (whole-part)

Sumber : Shaluddin & Rossa (Aprianti & Maliha, 2016)

16
2.11.3 Activity Diagram

Activity Diagram menggambarkan aliran kerja atau aktivitas dari sebuah

sistem.

Tabel 2.3 Simbol-simbol Activity Diagram

Simbol Deskripsi
Status awal Status awal aktivitas sistem, sebuah diagram
aktivitas memiliki sebuah status awal

Aktivitas Aktivitas yang dilakukan sistem, aktivitas

biasanya diawali dengan kata kerja

Percabangan / decision Asosiasi percabangan dimana jika ada pilihan

aktivitas lebih dari satu

Penggabungan / join Asosiasi penggabungan dimana lebih dari satu

aktivitas digabungkan menjadi satu

Status akhir Status akhir yang dilakukan sistem, sebuah

diagram aktivitas memiliki sebuah status akhir

Swimlane Memisahkan organisasi bisnis yang bertanggung

Nama Swimlane
jawab terhadap aktivitas yang terjadi

Sumber : Shaluddin & Rossa (Aprianti & Maliha, 2016)

2.11.4 Sequence Diagram

Sequence Diagram merupakan tool yang digunakan dalam pengembangan

sistem.

17
 Tabel 2.4 Simbol-simbol Sequence Diagram

Simbol Deskripsi
Aktor Orang, proses, atau sistem lain yang
berinteraksi dengan sistem informasi yang
akan dibuat diluar sistem informasi itu
sendiri, jadi walaupun simbol dari aktor
adalah orang, tapi aktor belum tentu
Atau merupakan orang; biasanya dinyatakan
menggunakan kata benda diawal frase
nama aktor

Garis hidup / Lifeline Menyatakan kehidupan suatu objek

Objek Menytakan objek yang berinteraksi pesan

Waktu aktif Menyatakan objek dalam keadaan aktif

dan berinteraksi, semua yang terhubung
dengan waktu aktif ini adalah sebuah
tahapan yang dilakukan didalamnya.

Pesan tipe create Menyatakan suatu objek membuat objek

yang lain, arah panah mengarah pada
<<create>> objek yaang dibuat

Pesan tipe send Menyatakan bahwa suatu objek

mengirimkan data / masukan / informasi
ke objek lainnya, arah panah mengarah
pada objek yang dikirimi

18
 Tabel 2.4 Simbol-simbol Sequence Diagram (Lanjutan)

Simbol Deskripsi
Pesan tipe call Menyatakan suatu objek menggail operasi
/ metode yang ada pada objek lain atau
dirinya sendiri. Arah panah mengarah
pada objek yang memiliki operasi /
metode, karena ini menggil operasi /
metode maka operasi / metode ya ng
dipanggil harus ada pada diagram kelas
sesuai dengan kelas objek yang
berinteraksi
Pean tipe return Menyatakan suatu objek yang yelah
menjalankan suatu operasi atau metode
menghasilkan suatu kembalian keobjek
tertentu, arah panah mengarah pada objek
yang menerima kembalian
Pesan tipe destroy Menyatakan suatu objek mengakhiri hidup
objek yang lain, arah panah mengarah
pada objek yang diakhiri, sebaiknya jika
ada create maka ada destroy

Sumber : Shaluddin & Rossa (Aprianti & Maliha, 2016)

19
 BAB III

METODE PENELITIAN

3.1 Tahapan Penelitian

Dalam melakukan penelitian, diperlukan adanya langkah-langkah atau

tahapan kerja agar dapat mencapai tujuan dari penelitian. Pada gambar 3.1

dibawah ini merupakan tahapan yang dilakukan penulis dalam melakukan

penelitian.

Pengumpulan Data

1. Studi Pustaka
2. Studi Lapangan

Perancangan Basis Data Perancangan Interface

1. Design Database 1. Design Konsep Web

2. Design Relasi Antar Tabel 2. Design Tampilan Web

Implementasi

Penerapan Metode
Waterfall

Melakukan Pengujian

1. Melakukan Login
2. Melakukan Input
3. Melakukan Edit
4. Melakukan Hapus

Gambar 3.1 Metode Penelitian

22
 23

3.2 Metode Pengumpulan Data

Berikut metode pengumpulan data yang dilakukan pada penelitian ini

sebagai berikut :

1. Study Pustaka

Study pustaka merupakan metode pengumpulan data dengan melalui

beberapa referensi ilmiah yang sesuai dengan topik pembahasan tanpa

langsung melalui objek penelitian.

2. Study Lapangan

Berbeda dengan study pustaka, study lapangan ini dilakukan dengan

mengumpulkan data langsung dari objek penelitian

3.3 Analisis Sistem Yang Berjalan

Bagian ini akan menjelaskan tentang bagaimana sistem yang berjalan

pada Kantor Lurah Kelurahan Pekan Selesai. Berikut adalah poin-poin tersebut :

1. Proses Pelaporan

Pada tahapan ini masyarakat yang menginginkan surat harus datang untuk

memohon surat yang dibutuhkan. Surat yang paling banyak digunakan

adalah surat pernyataan dari Kelurahan terhadap seorang warga, baik itu

surat keterangan telah meninggal dan lainnya. Dalam hal surat-menyurat

ataupun pelaporan, biasanya pegawai Kantor Lurah Kelurahan Pekan

Selesai akan menggunakan mesin ketik manual untuk membuat surat

penyataan tersebut.

23
 24

2. Kelemahan Sistem Yang Berjalan

Terdapat kelemahan terhada sistem yang berjalan pada Kantor Lurah

Kelurahan Pekan Selesai tersebut, yakni arsip surat menyurat dengan

menggunakan buku catatan. Hal tersebut dapat mengakibatkan

kemungkinan terjadinya kesalahan mencatat dan juga dapat menjadi

tumpukan dokumen yang dapat memakan tempat untuk penyimpanannya.

Dan juga masyarakat harus datang ke kantor.

3. Analisis Kebutuhan Sistem

Dari poin kelemahan sistem yang berjalan, dibutuhkan sebuah aplikasi

yang dapat membantu baik dari pihak masyarakat dalam melaporkan

pembuatan surat dan juga pihak pegawai kantor lurah dalam membuat

surat. Masyarakat akan di beritahukan tentang permohonan surat tersbut,

apakah telah selesai atau belum berdasarkan form pengajuan yang akan di

sematkan pada aplikasi yang dimaksud. Dengan demikian masyarakat

tidak lagi perlu menunggu di kantor lurah namun cukup dari rumah saja

hingga mendapatkan konfirmasi dari pihak pegawai kantor lurah. Tidak

hanya itu, aplikasi ini juga dapat mempermudah pekerjaan pegawai kantor

lurah dalam menyiapkan surat dengan cepat dilengkapi juga dengan

Masyarakat
pengarsipannya. Pegawai Kantor Lurah

24
 25

Start

Permohonan
Pembuatan Surat
Surat

Surat Cek Kesesuaian

End
Catat Data Surat

Gambar 3.2 Flowchart Sistem Yang Berjalan

3.4 Rancangan Penelitian

Dalam merancang sistem, penulis menggunakan UML (Unified Model

Language) untuk menguraikan cara kerja sistem yang terdiri dari use case

diagram, activity diagram, class diagram dan Sequences diagram.

1. Use case Diagram

Use case diagram adalah sebuah kegiatan atau juga interaksi yang saling

berkesinambungan antara aktor dan juga sistem. Terdapat tiga aktor dalam

perancangan ini, yakni admin, anggota dan user. Untuk melihat peran dari

aktor tersebut dapat dilihat pada tabel berikut ini :

25
 26

Tabel 3.1 Aktor Pengguna Sistem

Aktor Peran
Admin Memiliki hak akses penuh dalam mengelola
website, baik mengelola data penduduk serta
mengelola surat-surat pernyataan.
User Masyarakat yang dapat melihat informasi-
informasi yang di sampaikan oleh pihak
Kantor Lurah Kelurahan Pekan Selesai

Sedangkan untuk menggabarkan interaksi aktor dengan sistem dapa dilihat

pada gambar berikut ini :

Verify
Password
<<include>>

Password <<extend>>
Login
Eror

Olah Data Masyarakat

Olah Profil Lurah

Olah Pengumuman
User Admin

Olah Surat

<<include>>

Pengajuan Surat

Pengumuman

Profil Lurah

Gambar 3.3 Use Case Diagram

26
 27

2. Diagram Activity

Diagram activity merupakan gambaran alur suatu sistem. Dalam rancangan

aplikasi ini terdapat beberapa activity yakni sebagai berikut :

a. Diagram Activity Admin

Admin memiliki akses penuh terhadap sistem, baik mengelola data

penduduk, berita / pengumuman dan memproses pembuatan surat.

Admin memiliki hak akses untuk mengedit data – data yang telah

diupload ketika diperlukan dalam keadaan darurat saja.

1) Diagram Acitivity Mengelola Data Penduduk

Activitas Mengelola Data Penduduk

Admin Web Lurah

Akses Web Login

Eror

Validasi
Valid

Klick Tombol
Tambah / Edit / Tampilan awal
Hapus

Data Ditambah /
Teredit / Terhapus
Phase

Gambar 3.4 Diagram Acitivity Admin Mengelola Data Penduduk

27
 28

2) Diagram Activity Mengeolal Profil Lurah

Activitas Mengelola Profil Lurah

Admin Web Lurah

Akses Web Login

Eror

Validasi
Valid

Memilih Menu Profil

Tampilan awal
Lurah

Edit / Hapus Data Menampilkan

Lurah Informasi Lurah

Informasi Lurah
Teredit / Hilang
Phase

Gambar 3.5 Diagram Acitivity Admin Mengelola Profil Kepala Lurah

28
 29

3) Diagram Activity Mengelola Pengumuman

Activitas Mengelola Pengumuman

Admin Web Lurah

Akses Web Login

Eror

Validasi
Valid

Pilih Menu
Tampilan awal
Pengumuman

Klick Tombol Buat / Menampilkan

Edit / Hapus Halaman Berita

Pengumuman
Ditambah / Teredit /
Terhapus
Phase

Gambar 3.6 Diagram Acitivity Admin Mengelola Pengumuman

29
 30

4) Diagram Activity Mengelola Surat

Activitas Mengelola Surat

Admin Web Lurah

Akses Web Login

Eror

Validasi
Valid

Pilih Menu Surat

Tampilan awal
Masuk

Menampilkan Data
Cari Data Pemohon Pemohon Surat
Masuk

Data Ada Buat Surat

Cari Data

Data Kosong Surat Tersimpan

Abaikan permohonan
Phase

Gambar 3.7 Diagram Acitivity Admin Mengelola Pengumuman

30
 31

b. Diagram Activity User

Pada sistem yang akan di rancang, user dapat melakukan beberapa

aktifitas, yakni melakukan pengajuan permohonan surat, membaca

pengumuman dan melihat profil Kepala Lurah. Gambar dibawah ini

merupakan beberapa diagram activity yang meliputi aktifitas user

dalam aplikasi yang akan di rancang.

1) Diagram Activity Profil Lurah

Activitas Pengajuan Surat

Masyarakat Web Lurah

Mengakses link Tampilan Awal

website Website

Memilih Menu Menampilkan Menu

Perofil

Menampilkan Data
KA Lurah
Phase

Gambar 3.8 Diagram Activity Melihat Profil Lurah

31
 32

2) Diagram Activity Baca Pengumuman

Activitas Membca Pengumuman

Masyarakat Web Lurah

Mengakses link Tampilan Awal

website Website

Memilih Menu Menampilkan Menu

Pengumuman

Memilih Menampilkan
Pengumuman Pengumuman
Phase

Gambar 3.9 Diagram Activity Baca Pengumuman

32
 33

3) Diagram Activity Pengajuan Permohonan Surat

Activitas Pengajuan Surat

Masyarakat Web Lurah

Mengakses link Tampilan Awal

website Website

Memilih Menu Menampilkan Menu

Pengajuan Surat

Input Data Menampilkan Form

Input
Phase

Gambar 3.10 Diagram Activity Admin

3. Class Diagram

Class diagram menggambarkan sebuah struktur dan deskripsi class,

package dan objek beserta hubungan satu dengan yang lainnya. Class diagram

rancangan sistem ini dapat dilihat pada gambar berikut :

33
 34

Admin
+id
+username
+password
+melakukan login()
+mengolah data penduduk()
+mengolah profil kepala
lurah()
+mengolah pengumuman()
+mengolah surat()
Mengolah Mengolah Mengolah

Mengolah

Melihat

Surat Pengumuman Profil Kepala Lurah PemohonSurat DataPenduduk

+idSurat +idBerita +nama +id +id

+jenisSurat +tanggalBuat +alamat +nik +nama penduduk
+isiSurat +judul +tempatLahir +noKK +nik
+tanggalBuat +isi +tangaalLahir +email +noKK
+tandaTangan +menampilkan pengumuman +pendidikanTerakhir +jenisSurat +tempatLahir
+membuat surat +menampilkan profil() +pesan +tanggalLahir
+tanggalPermohonan +alamat
+menampilkan data +jenisKelamin
pemohon surat() +statusPernikahan
Melihat +menampilkan data
Permohonan penduduk()

Melihat
Masyarakat
+id
+nik
+noKK
+jenisSurat
+pesan
+melihat profil kepala lurah()
+melihat pengumuman()
+mengajukan permohonan
surat

Gambar 3.11 Class Diagram

4. Sequences Diagram

Sequence diagram ini adalah diagram yang menggambarkan kolaborasi

dinamis antara sejumlah object. Kegunaannya untuk menunjukkan rangkaian

pesan yang dikirim antara object juga interaksi antara object. Sesuatu yang terjadi

pada titik tertentu dalam eksekusi sistem. Berikut ini adalah sequence diagram

rancangan :

a. Sequence Diagram Login

Bagian ini akan menjelasankan tentang bagaimana sistem rancangan

login yang akan digunakan dalam membangun website. Berikut ini

merupakan gambar dari Sequences diagram login :

34
 35

Admin Form Login Cek Data Data Admin Halaman Awal

1. Akses Halaman Admin()

2. Username, Password()

3.Username, Passwordi()

4. Validasi()

5. Membuka Menu Utama()

Gambar 3.12 Sequences Diagram Login

b. Sequences Diagram Input Data Penduduk

Sequences diagram input data penduduk ini merupakan sistem yang

dijalankan oleh admin dalam mengolah data penduduk yang dapat

dilihat dari gambar berikut ini :

Form Input Kontrol

Admin Data Penduduk
Data Data

1. Pilih Menu

2. Data Penduduk Ditambah

3. Tambah Data Penduduk

Tambah Data

5. Data Tersimpan

6.Data Penduduk Berhasil Disimpan

7. Tampil Pesan Data Berhasil Ditambahkan

Gambar 3.13 Acativity Diagram Input Data

35
 36

c. Sequence Diagram Edit Data Penduduk

Sama seperti tambah anggota, edit data penduduk juga dijalankan oleh

admin. Untuk melihat gambar Sequences diagram edit data penduduk

sebagai beikut ini :

Tabel Data Form Input Kontrol Data

Admin
Penduduk Surat Data Pengumuman

1. Pilih Data

2. Form Edit Data

3. Data Diedit 4. Edit Data Penduduk

5. Edit Data Data

6. Data Tersimpan

7.Data Penduduk Berhasil Disimpan

8. Tampilkan Pesan Data Berhasil Diedit

Gambar 3.14 Sequences Diagram Edit Data Penduduk

d. Sequence Delete Data Penduduk

Untuk penduduk yang tidak perlu berada dalam database dapat

dilakukan menghapus data dengan menggunakan tombol delete pada

aplikasi. Berikut merupakan Sequences delete :

36
 37

Kontrol Data Penduduk

Data
Admin Tabel Data

1. Pilih Data
2. Menghapus Data
Hapus Data

3. Hapus Surat

5. Data Dihapus

6. Data Soal Berhasil Dihapus

7. Tampilkan Pesan Surat Berhasil Diedit

Gambar 3.15 Sequences Diagram Hapus Data Penduduk

e. Sequence Tulis Berita / Pengumuman

Dalam mengelola informasi, diperlukan fitur input berita /

pengumuman. Berdasarkan inputan tersebutlah masyarakat dapat

melihat informasi apa saja yang disampaikan oleh pihak lurah terhadap

masyarakat, baik himbauan ataupun bersifat informasi. Berikut ini

Sequences diagram dari input berita / pengumuman :

37
 38

Form Input Kontrol Data

Admin
Pengumuman Data Pengumuman

1. Pilih Menu

2. Pengumuman Ditambah

3. Tambah Data Pengumuman

Tambah Data

5. Data Tersimpan

6.Data Pengumuman Berhasil Disimpan

7. Tampil Pesan Data Berhasil Ditambahkan

Gambar 3.16 Sequence Diagram Input Berita

f. Sequence Diagram Edit Berita / Pengumuman

Dikarenakan berita / pengumuman bersifat sensitif maka diperlukan

fitur edit, untuk menanggulangi kesalahan ketik yang mungkin saja

terjadi. Berikut ini merupakan gambar Sequence diagramnya :

Kartu Form Input Kontrol Data

Admin
Pengumuman Surat Data Pengumuman

1. Pilih Data

2. Form Edit Pengumuman

3. Pengumuman Diedit 4. Edit Pengumuman

5. Edit Pengumuman

6. Data Tersimpan

7.Data Pengumuman Berhasil Diedit

8. Tampilkan Pesan Pengumuman Berhasil Diedit

Gambar 3.17 Sequence Diagram Edit Berita

38
 39

g. Sequence Diagram Delete Berita / Pengumuman

Untuk menghapus berita / pengumuman dari sistem terdapat fitur hapus

yang digambarkan dalam Sequences diagram berikut ini :

Kontrol Data
Card Data Pengumuman
Admin
Pengumuman

1. Pilih Pengumuman
2. Menghapus Berita

3. Hapus Pengumuman Hapus Pengumuman

5. Data Dihapus

6. Data Pengumuman Berhasil Dihapus

7. Tampilkan Pesan Berhasil Dihapus

Gambar 3.18 Sequence Diagram Hapus Pengumuman

h. Sequence Diagram Inputt Profil Lurah

Profil lurah merupakan sedikit data lurah yang akan berkaitan dengan

surat. Di dalam surat yang dikeluarkan oleh pihak lurah tentunya akan

ada tertanda tangan dari kepala lurah. Oleh karena itu jika lurahnya

ganti maka hanya perlu merubah data lurah ini agar nama lurah disurat

berikutnya akan tergantikan. Berikut ini merupakan sequence

diagramnya :

39
 40

Form Input Kontrol

Admin Data Profil
Profil Data

1. Pilih Menu

2. Profil Diisi

3. Tambah Data Profil

Tambah Data

5. Data Tersimpan

6.Data Pprofil Berhasil Disimpan

7. Tampil Pesan Data Berhasil Ditambahkan

Gambar 3.19 Sequence Diagram Profil Lurah

i. Sequence Diagram Permohonan Surat

Pada tahapan ini akan menggambarkan bagaimana sistem masyarakat

mengajukan permohonan surat keterangan yang di tujukan kepada

pihak kantor lurah. Tahapan ini hanya bias di akses oleh masyarakat

sedangkan untuk pemprosesan dilakukan oleh pihak kantor lurah.

40
 41

Form Input Kontrol

Admin Data Pengajuan
Pengajuan Data

1. Pilih Menu

2. Data Pengajuan

3. Tambah Data Pengajuan

Tambah Data

5. Data Tersimpan

6.DataPengajul Berhasil Disimpan

Gambar 3.20 Sequence Diagram Input / Edit Profil Lurah

3.5 Perancangan Database

Database merupakan sebuah wadah yang berisikan informasi mengenai

satu atau beberapa objek. Informasi tersebut disimpan dalam tabel yang biasanya

saling berhubungan antara satu dengan yang lainnya. Dalam sistem rancangan ini

dibutuhkan tabel sebanyak 3. Antara lain yakni :

1. Tabel Admin

Nama database : sistem_lurah

Nama tabel : admin

Primary key : id

41
 42

Tabel 3.2 Tabel Admin

No Field Name Type Size

1 id Int -
2 Username Varchar 25
3 Password Varchar 25

2. Tabel Anggota

Nama database : sistem_lurah

Nama tabel : dataPenduduk

Primary key : id

Tabel 3.3 Tabel Data Penduduk

No Field Name Type Size

1 id Int -
2 nama Vachar 50
3 noKK Int 16

4 NIK Int 16

5 alamat Varchar 50

6 tempatLahir Varchar 50
7 tanggalLahir Varchar 12
8 status Varchar 10

3. Profil Lurah

Nama database : sistem_lurah

Nama tabel : profilLurah

Primary ket : name

42
 43

Tabel 3.4 Tabel Profil Lurah

No. Field Niame Type Size

1 name Varchar 50
2 nik Int 16
3 alamat Varchar 50
4 pendidikan Vachar 10
5 photo Varchar 25

4. Berita

Nama database : sistem_lurah

Nama tabel : berita

Primary ket : id

Tabel 3.5 Tabel Berita / Pengumuman

No. Field Niame Type Size

1 id Int -
2 dateCreated Varchar 25
3 judul Varchar 50
4 isi Vachar 10
5 image Varchar 25

5. Permohonan Surat

Nama database : sistem_lurah

Nama tabel : berita

Primary ket : id

43
 44

Tabel 3.6 Tabel Permohonan Surat

No. Field Niame Type Size

1 id Int -
2 dateCreated Varchar 25
3 nik Int 16
4 jenisSurat Vachar 25
5 status Int 1

6. Surat

Nama database : sistem_lurah

Nama tabel : surat

Primary ket : id

Tabel 3.7 Tabel Surat

No Field Name Type Size

1 id Vachar -
2 jenisSurat Text -
3 header Text -
4 content Text -
5 footer Text -
6 tanggal Varchar 25
7 namaLurah Varchar 50

7. Arsip

Nama database : sistem_lurah

Nama tabel : arsip

Primary ket : id

44
 45

Tabel 3.8 Tabel Arsip Surat

No Field Name Type Size

1 id Int -
2 jenisSurat Varchar 25
3 nik Int 16
4 tanggal Varchar 25

3.6 Perancangan Antar Muka

Perancangan antar muka bertujuan untuk memudahkan interaksi antar

pengguna dengan sistem yang akan dirancang. Perancangan dilakukan dengan

sesederhana mungkin, sehingga pengguna tidak menimbulkan kebingungan dalam

menggunakan sistem tersebut.

1. Perancangan Tampilan Admin

a. Login

Login merupakan fitur filtering pengguna aplikasi yang berperan

sebagai admin . Fitur ini diberikan sebagai fitur keamanan agar sistem

dapat berjalan sesuai yang diinginkan. Berikut merupakan tampilannya

Gambar 3.21 Rancangan Login Admin

45
 46

b. Dashboard

Home merupakan tampilan awal jika admin berhasil melakukan login.

Gambar 3.22 Rancangan Halaman Dashboard Admin

c. Profil Lurah

Data Anggota merupakan menu yang berfungsi untuk mengubah data

kepala lurah jika kepala lurah ganti.

Gambar 3.23 Rancangan Halaman Data Lurah

46
 47

d. Pengumuman / Berita

Halaman ini akan berfungsi untuk menulis berita untuk di informasikan

kepada masyarakat melalui sistem ini.

Gambar 3.24 Rancangan Halaman Berita / Pengumuman

e. Pembuatan Surat

Halaman ini adalah halaman yang berfungsi untuk membuat surat

berdasarkan permohonan dari masyarakat.

Gambar 3.25 Rancangan Halaman Pembuatan Surat

47
 48

f. Permohonan Surat Masuk

Menu ini merupakan menu yang menampilkan data-data pemohon

untuk dibuatkan surat.

Gambar 3.26 Rancangan Halaman Data Produk

2. Perancangan Tampilan Publik

a. Home

Berbeda dari menu-menu diatas, menu ini dan seterusnya merupakan

menu yang hanya terdapat pada sistem yang disediakan untuk

masyarakat. Home ini merupakan tampilan awal ketika mengakses

aplikasi yang akan dirancang. Berikut adalah tampilan rancangannya :

48
 49

Gambar 3.27 Rancangan Halaman Home

b. Profil

Halaman ini akan menampilkan sedikit tentang kelurahan pecan selesai,

seperti misalnya menampilkan foto kepala lurah, sejarah serta visi dan

misi.

49
 50

Gambar 3.28 Rancangan Halaman Profil

c. Perancangan Pengumuman / Berita

Halaman ini menampilkan informasi-informasi yang berguna bagi

masyarakat.

50
 51

Gambar 3.29 Rancangan Halaman Pengumuman / Berita

d. Perancangan Tampilan Pengajuan Permohonan Surat

Halaman ini akan menyediakan form input yang digunakan untuk

mengajuakan permohonan surat.

51
 52

Gambar 3.30 Rancangan Halaman Pengajuan Permohonan Surat

52
 BAB IV

HASIL DAN PEMBAHASAN

4.1 Kebutuhan Spesifikasi

Dalam merancang sebuah website dibutuhkan perangkat keras dan

perangkat lunak. Untuk melihat kebutuhan perangkat lunak serta perangkat keras

yang penulis gunakan pada penelitian ini adalah sebagai berkut :

1. Analisa Kebutuhan Perangkat Lunak

Perangkat lunak (software) yang digunakan penulis dalam merancang

website dapat dilihat pada tabel 3.1 berikut ini :

Tabel 4.1 Perangkat Lunak Yang Digunakan

Nama Software Fungsi

Windows 7 Ultimate 64 bit Sebagai sistem operasi yang berjalan
pada perangkat / laptop yang
digunakan untuk merancanga website
Sublime Text Sebagai media penulisan code
pemrograman
XAMPP Sebagai alat bantu dalam penggunaan
database mysql
Google Chroome Sebagai media menjalankan website
yang dirancang

2. Analisa Kebutuhan Perangkat Keras

Dalam pengujian ini juga membutuhkan perangkat keras (hardware)

dengan spesifikasi sebagai berikut :

Tabel 4.2 Spesifikasi Perangkat Keras Yang Digunakan

Nama Spesifikasi
Processor Minimal Intel Pentium 4
RAM 128 Mb
Hardisk Minimal 100 Mb kosong

55
 56

4.2 Pengujian Aplikasi dan Pembahasan

Bab ini menjelaskan tentang pengujian hasil program yang dijalankan.

Untuk meligat hasil rancangan website yang telah dirancang adalah sebagai

berikut :

4.2.1 Tampilan Pada Admin

1. Tampilan Login

Gambar 4.1 Tampilan Login Admin

2. Tampilan Dashboard

Tampilan home merupakan tampilan utama setelah melakukan login.

Tampilan ini berisikan kartu-kartu informasi jumlah data penduduk. Pada

halaman ini juga dapat melakukan pengolahan data penduduk. Baik dari

input, edit dan delete

56
 57

Gambar 4.2 Tampilan Dashboard Admin

3. Tampilan Menu Profil Lurah

Tampilan ini berfungsi untuk mengolah data lurah yang mana data tersebut

akan di tampilkan pada aplikasi users

Gambar 4.3 Tampilan Profil Lurah Admin

57
 58

4. Tampilan Pengumuman

Tampilan ini akan difungsikan untuk mengolah terkait dengan berita ataupun

pengumuman yang akan di buat.

Gambar 4.4 Tampilan Pengumuman Admin

5. Tampilan Pembuatan Surat

Untuk membuat surat dan riwayat pembuatan surat ada pada menu ini.

Berikut adalah tampilannya:

Gambar 4.5 Tampilan Data Anggota

58
 59

6. Tampilan Permohonan Masuk

Untuk melihat siapa saja yang telah mengajukan surat permohonan, dapat

dilihat dari menu permohonan surat masuk. Berikut tampilannya :

Gambar 4.6 Tampilan Edit Data Anggota

4.2.2 Tampilan Pada Users

1. Tampilan Awal Users

Ketika users mengakses link dari website, maka users akan diarahkan pada

tampilan utama. Berikut adalah tampilannya:

Gambar 4.7 Tampilan Home Users

59
 60

2. Tampilan Profil

Menu ini akan berisikan beberapa informasi mengenai Kepala Lurah

Kelurahan Pekan Selesai.

Gambar 4.8 Tampilan Menu Profil

3. Tampilan Menu Pengumuman

Menampilkan pengumuman yang diolah pihak kelurahan untuk

masyarakat.

Gambar 4.9 Tampilan Menu Pengumuman

60
 61

4. Tampilan Surat

Agar mempermudah masyarakat dalam permohonan surat kepada kantor

lurah, maka diperlukan fitur permohonan surat. Berikut adalah

tampilannya :

Gambar 4.10 Tampilan Menu Pengumuman

4.3 Pengujian Sistem

Pengujian dilakukan untuk melihat keberhasilan dari suatu sistem yang

telah berdiri. Baik dari input maupun output yang diharapkan. Untuk melihat hasil

pengujian tersebut, dapat dilihat dari tabel berikut ini :

Tabel 4.3 Hasil Pengujian Sistem

Status
No Butir Pengujian Output Yang Diharapkan
Keberhasilan
Muncul form input username dan
1 Login Admin Berhasil
password
2 Tambah Data Penduduk Form input data Berhasil
3 Edit Data Anggota Form edit data Berhasil
4 Delete Data Anggota Menghilangkan data dari tabel Berhasil
5 Edit Foto Lurah Form edit file Berhasil
6 Edit Data Lurah Form edit data kepala lurah Berhasil
7 Tambah Pengumuman Form input pengumuman Berhasil
8 Edit Pengumuman Form edit produk Berhasil
9 Detail Pengmuman Tampilan lengkap dari sebuah berita Berhasil

61
 62

Tabel 4.3 Hasil Pengujian Sistem (Lanjutan)

Status
No Butir Pengujian Output Yang Diharapkan
Keberhasilan
Bertambahnya data surat pada table
10 Membuat Surat Berhasil
riwayat surat
11 Cetak Surat Print surat Berhasil
12 Lihat Surat Menampilkan isi surat Berhasil
13 Edit Surat Form Edit Surat Berhasil

4.4 Kelebihan dan Kekurangan Sistem

1. Kelebihan Sistem

Ada beberapa poin kelebihan dari sistem ini, poin tersebut yakni :

a. Sistem ini dapat mengolah data penduduk, memberikan informasi

berupa berita ataupun pengumuman, dan juga dapat melayani

permohonan surat

b. Sistem ini dapat melakukan upload gambar

c. Sistem ini juga dapat menampilkan seluruh data pemohon sesuai data

yang diisi pemohon

2. Kekurangan Sistem

Terdapat juga kekurangan dari sistem ini, adapun kekurangannya adalah

sebagai berikut :

a. Belum dilengkapi dengan keaman, seperti algoritma password dan

keamanan lainnya.

b. Tidak semua pekerjaan kelurahan terdapat dalam sistem.

c. Belum dilengkapi dengan javascript dan bahasa pemrograman lainnya.

62
 BAB V

PENUTUP

5.1 Kesimpulan

Berdasarkan permasalahan yang ada, dapat ditarik dua kesimpulan :

1. Salah satu cara untuk mengatasi dokumen surat yang memakan ruang dan

juga mengatasi kesalahan ketikdalam penulisan surat, maka diperlukan

sebuah sistem online yang dapat diakses oleh kapan dan dimanapun.

2. Membangun sistem informasi pengolahan data penduduk yang berbasis

website pada Kantor Lurah Kelurahan Pekan Selesai dapat dilakukan

dengan bahasa pemrograman PHP dan pengolahan database dengan

Mysql.

5.2 Saran

Berdasarkan paparan serta kekurangan-kerungan yang telah dijelaskan,

berikut adalah saran yang hendaknya direalisasikan :

1. Hendaknya pihak kelurahan menerapkan sistem informasi ini untuk

meningkatkan kinerja serta mempu memberikan informasi dengan terus

update.

2. Hendaknya aplikasi ini dapat lebih dikembangkan agar dapat lebih

menarik dan berfungsi secara maksimal.

3. Hendaknya website ini juga dapat diteruskan menjadi website e-commerce

yang dapat bertransaksi melalui website ini.

64
 65

DAFTAR PUSTAKA

Andalia, F., & Setiawan, E. B. (2015). Pengembangan Sistem Informasi

Pengolahan Data Pencari Kerja Pada Dinas Sosial Dan Tenaga Kerja Kota
Padang. Komputa : Jurnal Ilmiah Komputer Dan Informatika, 4(2), 93–97.
https://doi.org/10.34010/komputa.v4i2.2431

Andi, J. (2015). Pembangunan Aplikasi Child Tracker Berbasis Assisted – Global

Positioning System ( A-GPS ) Dengan Platform Android. Jurnal Ilmiah
Komputer Dan Informatika (KOMPUTA), 1(1), 1–8.
elib.unikom.ac.id/download.php?id=300375

Aprianti, W., & Maliha, U. (2016). Sistem Informasi Kepadatan Penduduk

Kelurahan Atau Desa Studi Kasus Pada Kecamatan Bati-Bati. 2(2013), 21–
28.

Arman. (2016). Sistem Informasi Pengolahan Data Penduduk Nagari Tanjung

Lolo, Kecamatan Tanjung Gadang, Kabupaten Sijunjung Berbasis Web.
Jurnal Edik Informatika Penelitian Bidang Komputer Sains Dan Pendidikan
Informatika V2.I2(163-170), 55(5), 163–170.

Destiningrum, M., & Adrian, Q. J. (2017). Sistem Informasi Penjadwalan Dokter

Berbassis Web Dengan Menggunakan Framework Codeigniter (Studi Kasus:
Rumah Sakit Yukum Medical Centre). Jurnal Teknoinfo, 11(2), 30.
https://doi.org/10.33365/jti.v11i2.24

Fachri, B. (2017). PERANCANGAN SISTEM INFORMASI PERPUSTAKAAN

BERBASIS WEB ( STUDI KASUS PERPUSTAKAAN KOPERTIS WILAYAH
I SUMUT ) Barany Fachri. 2(April), 20–26.

Habiby, A. I., & Yamasari, Y. (2017). Sistem Informasi Sekolah Berbasis Web
(Studi Kasus : TK Kusuma Putra Kota Mojokerto). Jurnal Manajemen
Informatika, 7(2), 94–100.

Harison, & Syarif, A. (2016). SISTEM INFORMASI GEOGRAFIS PEMETAAN

SARANA PRASARANA Jurnal TEKNOIF ISSN : 2338-2724. Jurnal
TEKNOIF, 4(2), 76–81.

Heriyanto, Y. (2018). Perancangan Sistem Informasi Rental Mobil Berbasis Web

Pada PT.APM Rent Car. Jurnal Intra-Tech, 2(2), 64–77.

Josi, A. (2017). Penerapan Metode Prototyping Dalam Membangun Website Desa

(Studi Kasus Desa Sugihan Kecamatan Rambang). Jti, 9(1), 50–57.
 66

Lestanti, S., & Susana, A. D. (2016). Sistem Pengarsipan Dokumen Guru Dan
Pegawai Menggunakan Metode Mixture Modelling Berbasis Web.
Antivirus : Jurnal Ilmiah Teknik Informatika, 10(2), 69–77.
https://doi.org/10.35457/antivirus.v10i2.164

Linggi, R. K. (2017). Dra. Rita Kala Linggi, M.Si adalah Ketua Program Studi
Ilmu Pemerintahan, Fisipol Universitas Mulawarman, Samarinda. 324–335.
Palit, R. V, Rindengan, Y. D. Y., & Lumenta, A. S. M. (2015). Rancangan Sistem
Informasi Keuangan Gereja Berbasis Web Di Jemaat Gmim Bukit Moria
Malalayang. E-Journal Teknik Elektro Dan Komputer, 4(7), 1–7.
https://doi.org/10.35793/jtek.4.7.2015.10458

Pauziah, U. (2013). Perancangan Sistem Pendataan Penduduk Pada Kelurahan

Cililitan Jakarta Timur Berbazis Delphi. Faktor Exacta 6(3): 189-199, 6(3),
189–199.

Putri, R. E., & Putra, R. R. (2018). Perancangan Aplikasi Rekam Medis

Menggunakan Bahasa Pemograman VB.Net 2010. Jurnal Teknik Dan
Informatika, 5(2), 49–55.

Susanti, M. (2016). Perancangan Sistem Informasi Akademik Berbasis Web Pada

Smk Pasar Minggu Jakarta. Informatika, 3(1), 91–99.