BAB II

LANDASAN TEORI

2.1 Tinjauan Pustaka

Dalam menyusun proposal ini, peneliti sedikit terinspirasi dari penelitian

sebelumnya yang berkaitan dengan konteks permasalahan. Untuk penelitian yang

berkaitan dengan proposal ini antara lain

Penelitian yang dilakukan oleh Monica Fenina Purba, dkk 2022 yang

berjudul “Perancangan Sistem Informasi Web profil Kelurahan Tebing Kabupaten

Karimun”. Tujuan sistem informasi website profil yang dibuat peneliti kali ini

adalah tentang bagaimana cara masyarakat dapat mendapatkan informasi

Kelurahan Tebing secara cepat dan tepat. Metode yang digunakan peneliti adalah

metode waterfall dan teknik analisa data adalah menggunakan data sekunder.

Dalam implementasi perancangan profil sistem informasi berbasis web untuk

kelurahan Tebing kabupaten Karimun, bahasa pemrograman yang digunakan

adalah CSS, PHP, HTML, Jquery, Javascript, text editor menggunakan sublime

text, server localhost menggunakan XAMPP, dan database yang digunakan adalah

MySQL. Hasil dari sistem ini adalah dapat memberikan informasi tentang

kelurahan Tebing berupa profil situs yang dapat digunakan untuk mengelola

proses pelayanan publik.

1
 Penelitian selanjutnya yang dilakukan oleh Riska Padillah Ansar, dkk

2022 yang berjudul “Rancang Bangun Sistem Informasi Berbasis Website Profil

Kelurahan Benteng”. Tujuan dari penelitian ini adalah merancang sistem

informasi profil desa Benteng berbasis web yaitu merancang interface dan sistem

database, membuat sistem sesuai dengan desain yang telah dirancang

mengimplementasikan sistem yang dibuat serta melakukan pengujian pada sistem.

Sistem informasi kelurahan dirancang dan dibuat menggunakan sistem operasi

windows 10 64-bit, xampp control panel v3.2.1, sublime text 3, PHP 5.4.16.

Sebelum merancang sistem informasi kelurahan ini, terdapat beberapa langkah

yang dimulai dari melakukan analisis terhadap sistem yang ada dan menganalisis

kebutuhan yang dibutuhkan oleh kelurahan benteng. Perancangan sistem

informasi berbasis website di kantor kelurahan Benteng dapat mempermudah

pengelolaan dan pemberian informasi kepada pengguna atau masyarakat tentang

informasi tentang kelurahan Benteng.

Penelitian selanjutnya yang dilakukan oleh Yulindawati, dkk 2020 yang

berjudul “Membangun Website Profile Kelurahan Melayu Tenggarong”. Penelitian

pembuatan Website Profile Kelurahan Melayu Tenggarong merupakan penelitian

untuk memudahkan masyarakat mendapatkan informasi yang lengkap dan terkini

karena informasi tersebut dianggap penting untuk pengambilan keputusan dan

mencapai tujuan. Tujuan jangka panjang yang ingin dicapai adalah diharapkannya

sistem ini dapat mempublikasikan kegiatannya untuk informasi yang lebih terbaru

sehingga masyarakat dapat mengetahui kegiatan yang telah dilakukan, kemudahan

informasi tata cara pengurusan surat menyurat di daerah kelurahan melayu

2
tenggarong kepada masyarakat secara luas. Oleh karena itu, tujuan khusus

menggunakan website kelurahan melayu tenggarong sebagai media penyampaian

informasi, yang efektif dapat tercapai. Sistem ini dirancang menggunakan bahasa

pemrograman PHP, HTML, CSS, JAVASCRIPT. Selain itu editor code

menggunakan Sublime Text serta MySql sebagai database. Desain yang dihasilkan

akan diproduksi dalam bentuk program nyata yang dapat digunakan baik itu

berupa halaman website dan query dari data.

Penelitian yang dilakukan oleh Adi Sucipto, dkk 2022 yang berjudul

“Penerapan Sistem Informasi Profil Berbasis Web Di Desa Bandarsari”.

Pengabdian ini bertujuan untuk mengimplementasikan sistem informasi profil

berbasis web untuk memudahkan masyarakat dalam mencari dan menemukan

informasi pembangunan desa. Selain itu juga mendukung penggunaan sistem

sehingga perangkat desa dapat menggunakan dan mengoperasikan sistem secara

terus menerus. Pengembangan sistem dapat dilakukan dengan menggunakan

framework Laravel berbasis bahasa pemrograman PHP yang dipadukan dengan

HTML sebagai interface dan MySQL sebagai database. Untuk mengevaluasi

kelayakan, sistem yang diuji menurut standar ISO 25010 mencakup 5 aspek utama

standar ISO 25010, yaitu kesesuaian fungsional, keandalan, kinerja, kegunaan

kegunaan dan mobilitas. Hasil perhitungan yang di interpretasikan berdasarkan

Skala Likert memperoleh hasil 84.21%, sehingga bisa disimpulkan bahwa sistem

baik untuk dijalankan dan layak untuk digunakan.

3
 Penelitian yang dilakukan oleh Maya Utami Dewi, dkk 2023 yang

berjudul “Pengembangan Website Profil Untuk Online Branding Pada Omah

Ampiran Wonolopo Mijen Kota Semarang”. Potensi pemberdayaan ekonomi

masyarakat lokal di Omah Ampiran Kelurahan Wonolopo Mijen Kota Semarang

belum meningkat dan berkembang secara berkelanjutan karena kurangnya

promosi dan komunikasi yang maksimal dan efektif. maka keberadaan website

profile dengan konten yang selalu update menjadi keharusan, dengan tetap

menggunakan nama domain yang sesuai dengan target lokasi dan juga terhubung

dengan berbagai macam sosial media. Maka dari itu, pengembangan website

dengan teknologi Content Management System direalisasikan untuk hasil yang

lebih baik. Bahasa pemrograman yang digunakan antara lain PHP, ASP, NET dan

memanfaatkan database MySQL atau MS SQL. Website ini akan dimanfaatkan

oleh masyarakat publik yang ingin mengetahui Omah Ampiran Wonolopo dan

juga khususnya masyarakat lokal yang memanfaatkan untuk kepentingan promosi

dan pemasaran usaha.

Berdasarkan kelima penelitian di atas adapun persamaan dan perbedaan

dengan penelitian saat ini adalah membahas mengenai website profil

menggunakan bahasa pemrograman PHP, dan MySQL sebagai database

sedangkan perbedaannya terletak pada metode pengembangan sistem yang

digunakan serta tempat penelitian.

4
2.2 Dasar Teori

2.2.1 Pengertian Sistem Informasi

Sistem informasi adalah suatu sistem yang mempertemukan kebutuhan

pengolahan transaksi harian dan akan mendukung fungsi operasional organisasi,

untuk dapat menyediakan laporan yang diperlukan oleh pihak terkait (Abdur

Rochman, 2019)

2.2.2 Pengertian Perancangan Sistem

Perancangan adalah proses merencanakan, merencanakan, dan membuat

sketsa atau pengaturan dari beberapa elemen yang terpisah menjadi satu kesatuan

yang utuh. Perancangan sistem dapat dirancang dalam bentuk diagram sistem, alat

bantu grafik yang dapat menunjukkan urutan proses sistem. Model terstruktur dan

model berorientasi objek adalah dua (dua) pemodelan sistem yang umum

digunakan dalam perancangan sistem informasi. (Julianto Simatupang, 2019).

2.2.3 Pengertian Website

Website merupakan sebuah kumpulan halaman-halaman web beserta file-

file pendukungnya, seperti file gambar, video, dan file digital yang disimpan pada

sebuah web server yang umumnya dapat diakses melalui internet. Atau dengan

kata lain, website adalah sekumpulan folder dan file yang mengandung banyak

perintah dan fungsi-fungsi tertentu, seperti fungsi tampilan, fungsi menangani

penyimpanan data (Yudin Wahyudin, 2020).

5
2.2.4 Pengertian Website Profil

Website profil adalah website yang memberikan informasi singkat

tentang perusahaan, termasuk sejarahnya, tujuan dan aspirasi masa depan, visi dan

misi, product yang ditawarkan, hubungan dengan pelanggan, dan informasi lain

seperti bagaimana pelanggan dapat bekerja dengan mereka. website berisi

informasi yang terkait dengan perusahaan itu sendiri. Situs profil adalah platform

komunikasi, yang memungkinkan orang-orang yang membutuhkan informasi

tertentu tentang perusahaan untuk mengaksesnya. (Monica Fenina Purba, 2022).

2.2.5 Pengertian Kelurahan

Kelurahan adalah kesatuan masyarakat hukum yang memiliki batas

wilayah, dan berwenang untuk mengatur serta mengurus kepentingan masyarakat

setempat yang dipimpin oleh kepala kelurahan atau lurah, seperti halnya dengan

pemerintahan negara, pemerintah di kelurahan juga memiliki struktur

pemerintahannya sendiri dan berada dalam naungan kecamatan (Michelle

Lengkong, 2022)

2.2.5.1 Kelurahan Klagete

Kelurahan Klagete merupakan salah satu kelurahan di Kota Sorong,

Provinsi Papua Barat Daya. Kelurahan klagete terletak di Dsitrik Malaimsimsa,

Kota Sorong yang memiliki jumlah 16 RT dan 4 RW. Kelurahan Klagete sendiri

mempunyai total 9 pegawai yang bekerja tiap harinya di Kelurahan, dan juga

mempunyai tugas dan tanggung jawab masing-masing.

6
2.2.6 Metode Pengembangan Sistem

Proses pengembangan sistem sering disebut sebagai pengembangan

sistem informasi. Penyusunan sistem baru untuk menggantikan sistem yang lama

secara keseluruhan atau meningkatkan sistem yang sudah ada using berbagai

teknik pengembangan sistem dapat didefinisikan sebagai pengembangan sistem.

Metode yang paling populer juga disebut sebagai Cycle of System Development

(SDLC). Beberapa Model yang tersedia untuk penerapan tahapan proses SDLC

termasuk model sequential atau waterfall, parallel, iterative, prototyping, Rapid

Application Development (RAD) model, spiral model, vshaped model, dan agile

Development. (Yudin Wahyudin, 2020).

2.2.6.1 Rapid Application Development (RAD)

Proses pengembangan perangkat lunak berurutan linier yang mengikuti

model dikenal sebagai rapid application development (RAD). Siklus

pengembangannya sangat singkat, kira-kira 60 hingga 90 hari. RAD adalah

metode pengembangan sistem yang menggabungkan pengembangan metodologi

dan perangkat lunak. Tujuan RAD adalah untuk mengurangi jumlah waktu yang

diperlukan dalam siklus hidup pengembangan sistem tradisional antara fase desain

dan implementasi system informasi. Pada akhirnya, rapid application

development (RAD) bertujuan untuk memenuhi kebutuhan bisnis yang berubah

dengan cepat. Dalam pengembangan sistem, RAD menggunakan pendekatan

iteratif. Model RAD memiliki 3 tahapan sebagai berikut:

7
 1) Rencana Kebutuhan (Requirement Planning), user dan analyst

melakukan pertemuan untuk mengidentifikasi tujuan dari sistem dan kebutuhan

informasi untuk mencapai tujuan. Pada tahap ini merupakan hal terpenting yaitu

adanya keterlibatan dari kedua belah pihak.

2) Proses Desain Sistem (Design System), Pada tahap ini keaktifan user

yang terlibat menentukan untuk mencapai tujuan karena pada proses ini

melakukan proses desain dan melakukan perbaikan-perbaikan apabila masih

terdapat ketidaksesuaian desain antara user dan analyst. Seorang user dapat

langsung memberikan komentar apabila terdapat ketidaksesuaian pada desain,

merancang sistem dengan mengacu pada dokumentasi kebutuhan user yang dibuat

pada tahap sebelumnya. Keluaran dari tahapan ini adalah spesifikasi software

yang meliputi organisasi sistem secara umum, struktur data dan yang lain.

3) Implementasi (Implementation), Tahapan ini adalahan tahapan

programmer yang mengembangkan desain suatu program yang telah disetujui

oleh user dan analyst. Sebelum di aplikasikan pada suatu organisasi terlebih

dahulu dilakukan proses pengujian terhadap program tersebut apakah ada

kesalahan atau tidak. Pada tahap ini user biasa memberikan tanggapan akan

sistem yang sudah dibuat serta mendapat persetujuan mengenai sistem tersebut

(Titania Pricillia, 2021)

8
 Gambar
2.1
Tahapan Metode RAD
(Sumber: Mardhi Yudhi Putra, 2021)

2.2.7 Bahasa Pemrograman

Bahasa pemrograman terdiri dari kombinasi simbol dan kata kode yang

memungkinkan programmer menyampaikan perintah kepada komputer. Perangkat

pemrograman digunakan oleh programmer untuk membuat program. Perangkat

pemrograman adalah program yang memungkinkan pengguna membuat program.

Untuk membuat program, programmer menggunakan bahasa pemrograman dan

perangkat. Pembuatan sebuah website membutuhkan bahasa pemograman, yang

dapat dikategorikan sebagai bahasa berbasis serverside karena dibutuhkan web

server untuk menjalankannya. (Dedi, 2020).

9
2.2.7.1 Hypertext Marckup Language (HTML)

HTML adalah suatu bahasa marckup yang digunakan untuk pembuatan

halaman website untuk dapat menampilkan berbagai informasi baik tulisan

maupun gambar pada sebuah web browser. Saat ini HTML masih terus

dikembangkan. Hal ini dikarenakan pengguna internet semakin hari semakin

berkembang pesat. Oleh karena itu bahasa HTML harus ditingkatkan lagi agar

dapat menciptakan halaman website yang lebih berkualitas. (Andy Antonius

Setiawan, 2019)

2.2.7.2 Cascading Style Sheet (CSS)

Cascading style sheet, atau CSS, adalah bahasa pemrograman desain

yang bermanfaat yang membantu mempercepat proses pembuatan website. CSS

digunakan untuk mendesain beranda dan antarmuka web. Jika dibandingkan

dengan bahasa pemrograman dasar seperti HTML dan PHP, CSS dapat melakukan

banyak hal, seperti mengubah warna teks, font, baris antar paragraf, ukuran

kolom, dan jenis background. (Aji Chondro Saputro, 2021).

2.2.7.3 Javascript

Javascript adalah salah satu bahasa pemrograman yang paling umum

digunakan untuk membuat halaman online yang dinamis dan interaktif. Javascript

dan java memiliki beberapa kesamaan tetapi secara fundamental berbeda.

Javascript mirip Java, tetapi tidak memiliki pengetikan statis dan pengecekan

10
tipe. Nama javascript diubah dari livescript menjadi javascript karena mengikuti

sebagian besar sintaks ekspresi java serta standar penamaan dan pembuatan aliran

kontrol dasar. (Aji Chondro Saputro, 2021).

2.2.7.4 Hypertext Preprocessor (PHP)

Hypertext Preprocessor (PHP) adalah bahasa pemrograman scripting

server-side yang bersifat opensource. PHP sebagai bahasa, scripting, dan

menjalankan instruksi program saat proses berjalan. Bergantung pada informasi

yang digunakan, hasil instruksi berbeda. PHP adalah bahasa pemrograman sisi

server dengan kata lain, script PHP berjalan di server. Apache, Nginx, dan

litespeed adalah server PHP yang umum. Sebuah survei yang dilakukan oleh

W3Techs.com menunjukkan bahwa PHP memiliki presentase 78.9%,

mengalahkan bahasa pemrograman lainnya. Ini pasti jumlah yang besar jika

dibandingkan dengan yang lain. Meskipun fungsi PHP mungkin bukan yang

optimal di antara pemrograman online lainnya, pengguna PHP tetap nomor satu

(Monica Fenina Purba, 2022).

2.2.8 Database

Database merupakan kumpulan informasi yang disimpan di dalam

komputer secara sistematis, sehingga dapat diperiksa menggunakan suatu program

untuk memperoleh informasi dari basis data tersebut. Pengertian umum dari

database adalah sistem penyimpanan data dimana data yang sudah banyak di

input disiman dalam satu sistem penyimpanan. Sistem database telah digunakan

di berbagai bidang, tidak hanya bidang teknologi, bahkan saat ini database sudah

11
digunakan di perusahaan dari skala kecil hingga besar, universitas, perkantoran,

supermarket bahkan rumah (Magdalena Simanjuntak, 2019).

2.2.8.1 MySql

MySQL adalah DBMS (database management system) yang banyak

digunakan saat ini untuk membangun aplikasi berbasis web dengan perintah SQL

(structured query language). MySQL dibagi menjadi dua lisensi, yang pertama

adalah perangkat lunak gratis yang memungkinkan siapa saja mengakses

database. Yang kedua adalah shareware, di mana perangkat lunak berpemilik

memiliki batasan penggunaannya. MySQL adalah sistem manajemen basis data

relasional. Dengan kata lain, basis data relasional digunakan dalam pemrosesan

data. Selain itu, ini berfungsi sebagai penghubung antara perangkat lunak dan

server basis data (Monica Fenina Purba, 2022).

2.2.9 Framework
Framework adalah istilah mengacu pada kerangka kerja yang digunakan

oleh pengembang perangkat lunak atau aplikasi untuk membantu mereka

membuat atau mengembangkan aplikasi atau perangkat lunak. Framework sendiri

terdiri dari perintah-perintah dan fungsi dasar yang biasa digunakan untuk

membuat dan mengembangkan perangkat lunak atau aplikasi. Tujuan dari

framework adalah untuk memungkinkan aplikasi yang dibuat dibangun dengan

lebih cepat, lebih efisien, dan lebih terorganisir. (Bambang Suprayogi, 2019).

12
2.2.9.1 Bootstrap

Bootstrap adalah framework depan yang mempercepat dan

mempermudah pengembangan website dengan mengedapankan tampilan untuk

perangkat mobile (seperti smartphone dan handphone). Bootstrap menawarkan

javascript, HTML, dan CSS yang siap pakai dan mudah dikembangkan. Bootstrap

merupakan rangka kerja yang digunakan untuk membangun desain online yang

responsif. Singkatnya, tampilan online yang dibuat oleh bootstrap akan

menyesuaikan ukuran layar dari browser desktop, tablet, dan ponsel. Anda dapat

memilih untuk mengaktifkan fitur ini atau tidak. Dengan demikian, hanya dapat

membuat web untuk tampilan desktop, dan jika ditampilkan melalui browser

mobile, tampilan web yang dibuat tidak dapat disesuaikan dengan layar.

(Bambang Suprayogi, 2019).

2.2.10 Flowchart

Flowchart, juga dikenal sebagai diagram alir, adalah jenis diagram yang

menampilkan algoritma atau langkah-langkah instruksi yang berurutan yang ada

dalam sistem. Untuk memberikan gambaran logis sebuah sistem yang akan

dibangun kepada programmer, seorang analis system menggunakan flowchart

sebagai bukti dokumentasi. Dengan demikian, flowchart dapat membantu

13
menyelesaikan masalah yang mungkin muncul saat membangun sistem. Simbol

pada dasarnya digunakan untuk menggambarkan flowchart. Setiap simbol

menunjukkan langkah-langkah tertentu. Namun, garis penghubung digunakan

untuk menghubungkan satu proses ke proses berikutnya. (Rizqi Rosaly, 2019).

Flowchart disusun dengan simbol-simbol. Simbol ini dipakai sebagai alat

bantu menggambarkan proses di dalam program. Simbol-simbol yang digunakan

antara-lain:

Simbol Nama Fungsi

Berfungsi untuk Menghubungkan
Flow Direction Symbol atau simbol yang satu dengan yang
Connecting Line lainnya, menyatakan arus suatu
proses

Digunakan untuk menyatakan

Connector sambungan proses berikutnya di
halaman yang berbeda

Digunakan untuk menunjukkan

Processing pengolahan yang akan dilakukan
dalam komputer

Digunakan untuk memilih proses

Decision yang akan dilakukan berdasarkan
kondisi tertentu

Digunakan untuk menyatakn

Input atau Output input dan output tanpa melihat
jenisnya.

Digunakan untuk memulai atau

mengakhiri program
Terminal

Tabel 1. Simbol pada flowchart

(Sumber: Mardhi Yudhi Putra, 2021)

14
2.2.11 Unified Modelling Language (UML)

Struktur dan metode pemodelan desain program berorientasi objek

(OOP) digabungkan dalam unified modeling language (UML), yang juga

mencakup aplikasinya. Metodologi UML digunakan untuk membuat sistem open

source (OOP) dan sekelompok alat untuk mendukungnya. Grup manajemen objek

telah mengembangkan model, teknologi, dan protokol OOP sejak tahun 1980-an,

dan itulah tempat UML pertama kali diperkenalkan. Para praktisi OOP sekarang

banyak menggunakan UML. Perangkat desain berorientasi objek IBM adalah

UML. Untuk menentukan, memvisualisasikan, membangun, dan

mendokumentasikan sistem informasi, bahasa yang disebut UML digunakan.

Grady Booch, Jim Rumbaugh, dan Ivar Jacobson mengembangkan UML sebagai

alat untuk analisis dan desain berorientasi objek. UML tidak hanya menampilkan

diagram itu juga menjelaskan konteksnya. Beberapa diagram yang dapat

digunakan dalam UML untuk menganalisis sistem termasuk use case diagram,

activity diagram, sequence diagram, dan class diagram. (Roys Pakaya, 2020).

15
2.2.11.1 Usecase Diagram

Simbol Deskripsi
Funsionalitas yang disediakan sistem sebagai unit-unit yang saling
bertukar pesan antar unit atau aktor; biasanya dinyatakan dengan
menggunakan kata kerja diawal di awal frase nama use case

Orang, proses, atau sistem lain yang berinteraksi dengan sistem

informasi yang akan dibuat di luar sistem informasi yang akan
dibuat itu sendiri, jadi walaupun simbol dari aktor adalah gambar
orang, tapi aktor belum tentu merupakan orang; biasanya
dinyatakan menggunakan kata benda di awal frase nama aktor.
Komunikasi antara aktor dan use case yang berpatisipasi pada use
case atau use case memiliki interaksi dengan actor.

Association
Include berarti use case yang ditambahkan akan selalu dipanggil
saat use case tambahan dijalankan

Hubungan generalisasi dan spesialisasi (umum – khusus) antara

dua buah use case dimana fungsi yang satu adalah fungsi yang
lebih umum dari lainnya, misalnya: arah panah mengarah pada use
case yang menjadi generalisasinya (umum)

Sistem, sistem eksternal, dan pengguna berinteraksi satu sama lain

melalui use case diagram. Dengan kata lain, use case diagram menunjukkan siapa

yang akan utilize system dan bagaimana pengguna mengharapkan berinteraksi

dengannya. Secara naratif, use case digunakan untuk menggambarkan sekuensi

langkah-langkah dari setiap interaksi. (Abdur Rochman, 2019). Diagram use case

juga berfungsi sebagai pemodelan sistem informasi yang akan dibangun. Ketika

satu atau lebih aktor berinteraksi dengan system informasi yang akan dibangun.

16
Kasu menentukan fungsi sistem informasi dan siapa yang berhak

menggunakannya. (Julianto Simatupang, 2019).

Tabel 2.2 Simbol Usecase Diagram

(Sumber: Julianto Simatupang, 2019)

2.2.11.2 Activity Diagram

Activity diagram adalah rancangan aliran kerja atau aliran aktivitas dalam

sebuah sistem yang akan dijalankan. Selain itu activity Diagram juga digunakan

untuk mendefinisikan atau mengelompokan aluran tampilan dari sistem tersebut.

Activity diagram memiliki komponen dengan bentuk tertentu yang dihubungkan

dengan tanda panah. Panah tersebut mengarah ke-urutan aktivitas yang terjadi dari

awal hingga akhir (Jovi Favian, 2021).

Tabel 2.3 Simbol Activity Diagram

Simbol Deskripsi
Status awal aktivitas sistem, sebuah
diagram aktivitas memiliki sebuah
status awal.
Status Awal
Aktivitas Aktivitas yang dilakukan sistem,
aktivitas biasanya diawali dengan
kata kerja.

Percabangan Asosiasi percabangan dimana jika

ada pilihan aktivitas lebih dari Satu.

Penggabungan Asosiasi penggabungan dimana

lebih dari satu aktivitas digabungkan
/ join menjadi satu.

Status Akhir Status akhir yang dilakukan sistem,

sebuah diagram aktivitas memiliki
sebuah status akhir.

17
 (Sumber: Julianto Simatupang, 2019)

2.2.11.3 Statechart

Sebuah statechart diagram, juga disebut sebagai statechart, digunakan

untuk mencatat berbagai kondisi atau keadaan yang dapat terjadi terhadap sebuah

kelas serta kegiatan apa pun yang dapat merubah kondisi atau keadaan tersebut.

Gambar statechart biasanya menggambarkan kelas tertentu, satu class dapat

mengandung lebih dari satu diagram.) (Jovi Favian, 2021).

Simbol Deskripsi

Kondisi ini digambarkan dengan simbol panah, untuk menunjukan

perubahan status satu ke yang lainnya.

Seluruh statechart diagram memiliki kondisi awal, yang

digambarkan dengan simbol lingkaran solid.

Notasi ini menunjukan mewakili keadaan akhir objek.

Fork Transisi tunggal atau satu transisi terbagi ke beberapa transisi.

States adalah notasi menggambarkan suatu kondisi yang terjadi pada

objek.

Tabel 2.4 Simbol Statechart

(Sumber: Ramadhanti, 2023)

18
2.2.11.4 Balsamiq Mockup

Balsamiq Mockup adalah salah satu software yang digunakan dalam

pembuatan desain atau prototyping dalam pembuatan tampilan user interface

sebuah aplikasi. Dengan menggunakan Balsamiq Mockup kita dimudahkan dalam

pembuatan user interface karena Balsamiq Mockup sudah menyediakan tools

yang dapat memudahkan dalam membuat desain prototyping aplikasi

(Muhammad Reynaldi,2022).

Gambar 2.2 Tampilan Balsamiq Mockup

19
2.2.11.5 Draw.io

Draw.io merupakan sebuah website yang di desain khusus untuk

menggambarkan diagram secara online. Semua fitur yang ada pada situs ini dapat

dinikmati atau digunakan hanya dengan bermodalkan browser yang mendukung

HTML 5. Draw.io yang digunakan sekarang merupakan software yang telah dapat

dioperasikan secara offline (Muhammad Reynaldi, 2022).

Gambar 2.3 Tampilan Draw.io

20
2.2.12 Blackbox Testing

Karena hanya memerlukan batas bawah dan batas atas dari data yang

diharapkan, metode blackbox testing adalah salah satu yang paling mudah

digunakan. Jumlah field data entri yang akan diuji, aturan entri yang harus

dipenuhi, dan kasus batas atas dan batas bawah dapat digunakan untuk

menghitung estimasi banyaknya data uji. Dan dengan cara ini, kita dapat

mengetahui apakah fungsionalitas masih dapat menerima data yang tidak

diinginkan, yang berarti data yang disimpan tidak valid. Pengujian adalah

kumpulan tindakan yang direncanakan dengan tujuan menguji atau mengevaluasi

kebenaran yang diinginkan. Pengujian perangkat lunak berdasarkan spesifikasi

fungsional tanpa menguji desain dan kode program untuk menentukan apakah

fungsi, masukan, dan keluaran perangkat lunak memenuhi spesifikasi. metode

black box untuk menguji sistem, Pengujian pada sistem menggunakann metode

black box, tujuannya adalah untuk mengetahui kelemahan sistem agar data yang

dihasilkan sesuai dengan data yang dimasukkan setelah data dieksekusi dan untuk

menghindari kesalahan dan kekurangan aplikasi sebelum digunakan oleh

pengguna. (Ni Made Dwi Febriyanti, 2021).

21
 Gambar 2.2 Tahapan Blackbox Testing
(Sumber: Aelius Venture, 2021)

2.2.13 Text Editor

Text editor adalah perangkat lunak yang dapat digunakan untuk membuat

kode untuk program aplikasi yang menggunakan berbagai bahasa pemrograman.

(Khoirunisa, 2021). Text Editor adalah alat yang dapat digunakan untuk membuat

program komputer, mengedit source code bahasa pemograman, dan membuat

halaman web atau template desain web. Sebagian besar editor teks memiliki fitur

dasar seperti memasukkan, menghapus, dan mengedit teks. Atom, visual studio

code, dan sublime text adalah contoh text editor berbasis web yang terkenal.

2.2.13.1 Visual Studio Code

Microsoft telah membuat teks editor visual studio code (vs code), yang

dapat digunakan di berbagai sistem operasi, termasuk Linux, Mac, dan Windows.

Editor teks ini mendukung bahasa pemrograman JavaScript, Typescript, dan

Node.js secara langsung, serta bahasa pemrograman lainnya dengan bantuan

plugin yang dapat dipasang melalui marketplace visual studio code. Contoh

bahasa pemrograman ini termasuk C++, C#, Python, Go, dan Java, antara lain.

Antara banyak fitur visual studio code adalah Intellisense, integrasi Git,

debugging, dan ekstensi yang meningkatkan kemampuan editor teks. Seiring

dengan penambahan versi visual studio code, fitur-fitur ini akan terus diperbarui.

22
Versi visual studio code ini juga diperbarui secara berkala setiap bulan inilah yang

membedakan vs code dari teks editor lainnya. (Yudi Permana, 2019).

Gambar 2.2 Tampilan Visual Studio Code

2.2.14 Web Server

Software yang dikenal sebagai web server menawarkan layanan berbasis

data melalui protokol HTTP atau HTTPS kepada klien yang menggunakan

aplikasi web browser untuk meminta data. Data dikirim ke server dalam bentuk

halaman web, biasanya dokumen HTML. Halaman online yang diminta dapat

berisi teks, video, gambar, file, dan jenis konten lainnya. Apache adalah salah satu

web server yang bersifat opensource yang digunakan untuk melayani dan

melakukan pengaturan fasilitas web. Apache biasanya dapat memperoleh berkas

23
yang mengandung permintaan dari klien melalui web browser, kemudian

memproses data tersebut dan menghasilkan output yang diinginkan oleh klien.

Data yang diambil dari database online tersebut digunakan untuk menghasilkan

hasil. (Gregorius Hendita, 2021)

2.2.14.1 XAMPP

XAMPP adalah perangkat lunak bebas yang merupakan kompilasi dari

beberapa program dan mendukung banyak sistem operasi. Fungsinya adalah

sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apache

HTTP Server, database MySQL, dan penerjemah bahasa pemrograman PHP dan

Perl. X (empat sistem operasi), Apache, MySQL, PHP, dan Perl adalah singkatan

dari XAMPP. Program ini bebas dan dapat diakses melalui lisensi umum publik

GNU, dan merupakan web server yang mudah digunakan dengan dapat

menyediakan tampilan halaman online yang dinamis. Apache Friends adalah tim

proyek yang membangun XAMPP, yang terdiri dari tim inti (Core Team), tim

pengembang (Development Team), dan tim pendukung (Support Team). (Fakih

Zulfa, 2019)

24
 Gambar 2.3 Tampilan XAMPP

BAB III

METODE DAN PERANCANGAN SISTEM

3.1 Tinjauan Umum

Tinjauan umum ini menjelaskan tentang bagaimana cara penyaluran atau

penyampaian informasi kepada warga yang ada di Kelurahan Klagete, Distrik

Malaimsimsa, Kota Sorong. Dalam penyampaian informasi dari pihak kelurahan

kepada masyarakat, masih menghadapi kendala terkait kurangnya media yang

dapat membantu untuk menyalurkan informasi secara cepat, tepat dan efisien.

Informasi dari pihak kelurahan masih harus disebarluaskan secara manual dan

tidak sistematis. Informasi dari kelurahan dilakukan dengan cara surat-menyurat

atau biasa ditempelkan pada papan pengumuman yang ada di kantor kelurahan.

banyak keluhan yang datang dari masyarakat kepada kelurahan karena terlambat

mendapatkan informasi dari RT dan RW.

25
 Gambar 3.1 Kantor Kelurahan Klagete

3.2 Metode Penelitian

Dua pendekatan penelitian yang digunakan dalam penelitian ini adalah

metode penggumpulan data dan model pengembangan sistem, yang dijelaskan

sebagai berikut:

3.2.1 Metode Pengumpulan Data

Pengumpulan data dalam Penelitian ini dibagi menjadi 2 (dua), yaitu

data primer dan data sekunder.

1. Data primer, data ini diperoleh dengan menggunakan metode wawancara

dan observasi pada tempat Penelitian yaitu di Kantor Kelurahan Klagete Malanu

Sorong, Papua Barat Daya. Wawancara dilakukan untuk mendapatkan informasi

terkait layanan publik di kelurahan, pendataan warga, layanan kesehatan

sedangkan observasi dilakukan untuk melihat secara langsung tempat penelitian

sekaligus mendalami permasalahan yang akan dipecahkan.

2. Data sekunder yang didapatkan berupa data, data layanan publik, layanan

kesehatan dan juga pendataan kepada masyarakat.

3.2.2 Metode Pengembangan Sistem

Pada penelitan ini menggunakan model perancangan sistem informasi

yaitu Rapid application development (RAD). Seperti yang telah diuraikan pada

26
 BAB II bahwa metode ini memiliki 3 (tiga) tahapan untuk mencapai hasil. Berikut

tahapan tersebut dalam penelitian ini:

1. Rencana Kebutuhan (Requirement Planning)

user dan analyst melakukan pertemuan untuk mengidentifikasi tujuan

dari sistem dan kebutuhan informasi untuk mencapai tujuan. Pada tahap ini

merupakan hal terpenting yaitu adanya keterlibatan dari kedua belah pihak.

2. Proses Desain Sistem (Design System)

Pada tahap ini keaktifan user yang terlibat menentukan untuk mencapai

tujuan karena pada proses ini melakukan proses desain dan melakukan perbaikan-

perbaikan apabila masih terdapat ketidaksesuaian desain antara user dan analyst.

Seorang user dapat langsung memberikan komentar apabila terdapat

ketidaksesuaian pada desain, merancang sistem dengan mengacu pada

dokumentasi kebutuhan user yang dibuat pada tahap sebelumnya. Keluaran dari

tahapan ini adalah spesifikasi software yang meliputi organisasi sistem secara

umum, struktur data dan yang lain.

3. Implementasi (Implementation)

Tahapan ini adalah tahapan programmer yang mengembangkan desain

suatu program yang telah disetujui oleh user dan analyst. Sebelum di aplikasikan

pada suatu organisasi terlebih dahulu dilakukan proses pengujian terhadap

program tersebut apakah ada kesalahan atau tidak. Pada tahap ini user biasa

27
memberikan tanggapan akan sistem yang sudah dibuat serta mendapat persetujuan

mengenai sistem tersebut.

3.3 Analisis Kebutuhan Sistem

3.3.1 Kebutuhan perangkat keras

Kebutuhan perangkat keras yang digunakan yaitu perangkat keras yang

dibutuhkan dalam perancangan, pemrograman, hingga sistem berhasil dibuat, dan

juga saat sistem diimplementasikan di Kelurahan Klagete. Spesifikasi komputer

yang digunakan dalam perancangan, membuat program peracangan website profil

di Kelurahan Klagete.

Tabel 3.1 Spesifikasi Perangkat Keras

Perangkat Spesifikasi
Laptop Merk Acer Aspire
Sistem Operasi Windows 10 Pro 64-bit
Processor Intel Core i3
Memory 4 Gb
HDD/SSD 1000 GB/250 GB

3.3.2 Kebutuhan Perangkat Lunak

Adapun perangkat lunak yang digunakan dalam website ini adalah sebagai

berikut:

Tabel 3.2 Perangkat lunak yang digunakan

No. Nama Perangkat Lunak

1. Google chrome
2. Draw.io
3. Balsamiq Mockup 4
4. Xammp
5. Microsoft Visual Studio Code

28
 3.3.3 Kebutuhan Informasi

Kebutuhan informasi merupakan penjelasan tentang hasil (output) dari

website profil kelurahan yang telah dirancang. Sistem ini akan menghasilkan

output berupa informasi tentang profil kelurahan serta berita atau informasi yang

ada kelurahan dan juga terkait pendataan warga yang ada di Kelurahan Klagete.

3.3.4 Kebutuhan Pengguna (User)

Pengguna (user) yang terlibat dalam penggunaan website profil

kelurahan yaitu petugas (admin) dan warga Kelurahan Klagete.

1. Petugas bertindak sebagai admin yang bertugas mengoperasikan sistem,

mengelola data berita atau informasi yang akan ditampilkan di dalam sistem serta

pendataan warga kelurahan

2. Warga Kelurahan Klagete yang melihat Informasi yang ditampilkan di dalam

sistem

3.4 Perancangan Sistem

Perancangan sistem menjelaskan konsep dan alasan pemodelan sistem.

Tiga komponen terdiri dari perancangan sistem yaitu perancangan proses,

perancangan basis data, dan perancangan antarmuka (interface).

3.4.1 Perancangan Proses

Perancangan proses akan menggunakan flowchart untuk menjelaskan

pemodelan fisik dan UML untuk menjelaskan pemodelan logic.

29
3.4.1.1 Flowchart

Gambar 3.2 Flowchart Admin

Gambar 3.2 merupakan flowchart sistem, admin dapat mengelola sistem

secara keseluruhan mulai dari mengelola data profil kelurahan, berita, pendataan

warga, agenda kegiatan, galeri dan kontak.

30
 Gambar 3.3 Flowchart Warga

Gambar 3.3 merupakan flowchart sistem dari warga, warga hanya dapat

melihat informasi yang ada di sistem seperti berita, pendataan warga, profil

kelurahan seperti visi misi, sejarah, sturktur organisasi, agenda kegiatan yang ada

di kelurahan, galeri dan kontak.

3.4.1.2 Usecase Diagram

Gambar 3.4 Usecase Diagram admin

31
 Gambar 3.3 menjelaskan bahwa dari usecase diagram di atas, admin atau

petugas melakukan aktivitas, setelah admin login masuk ke sistem website profil

maka admin bertugas untuk mengelola data profil, pendataan warga, agenda

kegiatan, galeri dan kontak. Selain itu warga juga dapat melihat hasil atau

tampilan dari website tersebut.

Gambar 3.5 Usecase Diagram Warga

Gambar 3.5 menjelaskan bahwa dari usecase diagram di atas, warga

melakukan aktivitas, yaitu dengan mengakses sistem maka warga hanya dapat

melihat informasi yang sudah tertera di sistem tersebut.

32
3.4.1.3 Activity Diagram

Gambar
3.6
Activity
Diagram

Gambar

diatas

menjelaskan alur kerja pengelolahan data setelah admin berhasil login untuk

masuk ke sistem pengelolahan data, admin dapat memasukkan data pada website

profil tersebut, data yang telah masukkan akan di cek oleh database jika sudah

benar maka data akan disimpan lalu sistem akan menampilkannya dan warga yang

akan melihat informasi tersebut.

33
3.4.1.4 State Chart

34
 Gambar 3.7 Statechart sistem

Gambar di atas menjelaskan proses kerja admin dalam sistem website

profil kelurahan. Admin masuk terlebih dahulu ke sistem dengan memasukkan

nama pengguna dan kata sandi. apabila nama pengguna tidak sesuai maka akan

muncul peringatan sistem nama pengguna dan kata sandi salah. Dan admin

pengguna melakukan penginputan nama pengguna dan kata sandi kembali, setelah

proses ini berhasil sesuai data, admin pengguna masuk ke sistem untuk melakukan

penginputan data lalu kemudian di simpan. Data-data yang sudah di simpan,

kemudian akan ditampilkan pada sistem.

3.4.2 Perancangan Basis Data

Perancangan basis data menguraikan perancangan media penyimpanan

data dalam aplikasi dengan metode ERD model dan teknik normalisasi untuk

menghasilkan tabel-tabel dalam basis data.

3.4.2.1 Perancangan Tabel

Tabel 3.3 Rancangan tabel admin

Field Name Tipe Data Ukuran keterangan

id_admin Int 20 Primary key
username Varchar 50
password Varchar 50
id_kelurahan Int 20
id_berita Int 20
id_agendakegiatan Int 20

35
 id_pendataan Int 20
id_galeri Int 20
id_kontak Int 20

Tabel 3.4 Rancangan tabel tentang kelurahan

Field Name Tipe Data Ukuran Keterangan

id_kelurahan Int 20 Primary Key

sejarah Date 100

visi misi Varchar 100

struktur_organisasi Varchar 100

Tabel 3.5 Rancangan tabel berita

Field Name Tipe Data Ukuran Keterangan

id_berita Int 20 Primary Key
hari/tanggal Date -
judul_berita Varchar 100
detail_berita Varchar 100

Tabel 3.6 Rancangan tabel pendataan

Field Name Tipe Data Ukuran Keterangan
id_pendataan Int 20 Primary Key

36
 NIK Varchar 50
nama Varchar 50
alamat Varchar 100

Tabel 3.7 Rancangan tabel agenda kegiatan

Field Name Tipe Data Ukuran Keterangan
id_agendakegiatan Int 20 Primary Key
hari/tanggal date -
lokasi Varchar 100
waktu Varchar 30

Tabel 3.8 Rancangan tabel galeri

Field Name Tipe Data Ukuran Keterangan

id_galeri Int 20 Primary Key

nama Varchar 100
detail Varchar 100
gambar Varchar 100

Tabel 3.9 Rancangan tabel kontak

Field Name Tipe Data Ukuran Keterangan

id_kontak Int 20 Primary Key
nama Varchar 100
jabatan Varchar 100
no_hp Varchar 100

37
3.4.3 Relasi Antar Tabel

Relasi tabel dibutuhkan untuk merelasikan hubungan tabel yang satu

dengan yang lainnya agar terjadi koneksi database yang baik, adapun rancangan

tabel sebagai berikut:

Gambar 3.8 Relasi Tabel

3.4.4 Perancangan Interface

Untuk menginplementasikan sistem yang baik, maka perlu dirancang

antarmuka sistem sebagai berikut:

1. Interface Admin Login success

Tampilan ini adalah tahap awal admin menggunakan sistem harus login

terlebih dahulu. Berikut adalah tampilan halaman login admin, jika admin berhasil

login.

38
 Gambar 3.9 Tampilan lnterface admin login berhasil

2. Interface Admin Login Failed

Tampilan ini adalah tahap awal admin menggunakan sistem harus login

terlebih dahulu. Berikut adalah tampilan halaman login admin, jika admin gagal

login.

39
 Gambar 3.10 Tampilan lnterface admin login gagal

3. Interface Halaman Utama

Tampilan ini adalah masuk ke halaman utama setelah admin berhasil

login dan akan menampilkan menu dan informasi umum yang terkait dengan

Kelurahan Klagete.

Gambar 3.11 Tampilan lnterface Halaman Utama

4. Interface Halaman Tentang Kelurahan

Tampilan ini adalah masuk ke halaman utama setelah admin berhasil

login dan akan menampilkan menu tentang Kelurahan Klagete.

40
 Gambar 3.12 Tampilan lnterface Halaman Tentang Kelurahan

5. Interface Halaman Sejarah

Tampilan ini adalah masuk ke sub menu tentang kelurahan, halaman ini

berisi sejarah dari Kelurahan Klagete.

Gambar 3.13 Tampilan lnterface Halaman Sejarah

41
6. Interface Halaman Visi Misi

Tampilan ini adalah masuk ke sub menu tentang kelurahan, halaman ini

berisi visi dan misi dari Kelurahan Klagete.

Gambar 3.14 Tampilan lnterface Halaman Visi Misi

7. Interface Halaman Struktur Organisasi

Tampilan ini adalah masuk ke sub menu tentang kelurahan, halaman ini

berisi struktur organisasi dari Kelurahan Klagete.

42
 Gambar 3.15 Tampilan lnterface Halaman Struktur Organisasi

8. Interface Halaman Berita

Tampilan ini adalah masuk ke menu berita, halaman ini berisi informasi

yang akan disampaikan kepada warga dari Kelurahan Klagete.

Gambar 3.16 Tampilan lnterface Halaman Berita

43
9. Interface Halaman Agenda kegiatan

Tampilan ini adalah masuk ke menu agenda kegiatan, halaman ini berisi

agenda kegiatan dari pihak kelurahan yang akan dibuat oleh pihak kelurahan

kepada warga atau adanya kerja sama dari pihak Kelurahan Klagete dengan pihak

lainnya yang akan menyelenggarakan kegiatan di kelurahan.

Gambar 3.17 Tampilan lnterface Halaman Agenda Kegiatan

10. Interface Halaman Pendataan

Tampilan ini adalah masuk ke menu pendataan, halaman ini berisi

pendataan warga yang ada di Kelurahan Klagete.

44
 Gambar 3.18 Tampilan lnterface Halaman Pendataan

11. Interface Halaman Kontak

Tampilan ini adalah masuk ke menu kontak, halaman ini berisi kontak

dari pegawai yang ada di Kelurahan Klagete.

Gambar 3.19 Tampilan lnterface Halaman Kontak

45
12. Interface Halaman Galeri

Tampilan ini adalah masuk ke menu galeri, halaman ini berisi gambar

atau foto dari berbagai informasi atau kegitatan yang ada di Kelurahan Klagete.

Gambar 3.20 Tampilan lnterface Halaman Galeri

13. Interface Halaman Dashboard Admin

Tampilan ini adalah masuk ke halaman utama admin, halaman ini berisi

menu tentang kelurahan, berita, agenda kegiatan, pendataan, galeri dan kontak.

46
47
 Gambar 3.21 Tampilan lnterface Halaman Dashboard Admin

14. Interface Halaman Sejarah Admin

Tampilan ini adalah masuk ke halaman utama admin, halaman ini berisi

tentang sejarah dari Kelurahan Klagete, admin juga dapat melakukan tambah, edit,

serta hapus data.

48
 Gambar 3.22 Tampilan lnterface Halaman Sejarah Admin

15. Interface Halaman Visi Misi Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

tambah, edit serta menghapus data yang ada di menu visi misi. Halaman ini berisi

visi dan misi dari Kelurahan Klagete.

49
 Gambar 3.23 Tampilan lnterface Halaman Visi Misi Admin

16. Interface Halaman Struktur Organisasi Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

menambah serta menghapus data yang ada di menu sturktur organisasi. Halaman

berisi struktur organisasi yang ada di Kelurahan Klagete.

50
 Gambar 3.24 Tampilan lnterface Halaman Struktur Organisasi Admin

17. Interface Halaman Berita Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

menambahkan, mengedit serta menghapus informasi yang ada di menu berita.

51
 Gambar 3.25 Tampilan lnterface Halaman Berita Admin

18. Interface Halaman Struktur Agenda Kegiatan Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

mengatur agenda kegiatan yang ada di Kelurahan Klagete.

52
 Gambar 3.26 Tampilan lnterface Halaman Agenda Kegiatan Admin

19. Interface Halaman Pendataan Admin

Tampilan ini adalah masuk ke halaman utama admin, lalu admin dapat

mengubah, menambah serta menghapus data dari warga yang ada di Kelurahan

Klagete.

Ga

mbar 3.27 Tampilan lnterface Halaman Pendataan Admin

20. Interface Halaman Galeri Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

menambahkan atau menhapus gambar beserta penjelasan dari gambar tersebut.

53
 Gambar 3.28 Tampilan lnterface Halaman Galeri Admin

21. Interface Halaman Galeri Admin

Tampilan ini adalah masuk ke halaman utama admin, admin dapat

menambahkan atau menhapus gambar beserta penjelasan dari gambar tersebut.

54
Gambar 3.29 Tampilan lnterface Halaman Kontak Admin

55