LAPORAN KERJA PRAKTEK

HALAMAN JUDUHALAMAN JUDUL

PERANCANGAN SISTEM INFORMASI

BERBASIS WEB DI DINAS LIPONSOS
KEPUTIH SURABAYA

Oleh:
Sofyan Yuliyanto
1461800070

PROGRAM SARJANA
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
TAHUN
 LEMBAR PENGESAHAN

LAPORAN KERJA PRAKTEK

PERANCANGAN SISTEM INFORMASI BERBASIS
WEB DI DINAS LIPONSOS KEPUTIH SURABAYA

Sebagai salah satu syarat untuk melaksanakan Kerja Praktek

Oleh :
Sofyan Yuliyanto
1461800070

Surabaya, 26 Juni 2021

Koordinator KP, Dosen Pembimbing

Supangat, S.Kom., M.Kom. Geri Kusnanto, S.Kom., MM

NPP. 20460.11.0602 NPP. 20460.94.0401

Mengetahui,
Ka, Program Studi Teknik Informatika

Geri Kusnanto, S.Kom., MM

NPP. 20460.94.0401
 KATA PENGANTAR
Puji syukur penulis panjatkan atas rahmat dan hidayah yang diberikan
Tuhan Yang Maha Esa sehingga Penulis dapat menyelesaikan laporan kerja
praktik yang berjudul “ Perancangan Sistem Informasi Berbasis Web Di Dinas
Sosial Liponsos Keputih Surabaya ”yang dilaksanakan di Dinas Sosial Liponsos
Keputih Surabaya dapat terselesaikan dengan baik dan benar.
Penulis menyadari bahwa dalam penyusunan laporan kerja praktik dapat
terselesaikan dengan baik atas bantuan, motivasi, dan dukungan dari berbagai
pihak baik secara langsung maupun tidak langsung kepada penulis. Oleh karena
itu pada kesempatan ini penulis ingin mengucapkan terima kasih serta
penghargaan yang tak terhingga kepada :
1. Bapak Geri Kusnanto, S.Kom, MM selaku Kepala Program Studi
Teknik Informatika Universitas 17 Agustus 1945 Surabaya.
2. Bapak Supangat, S.Kom, M.Kom, ITIL, COBIT selaku Koordinator
Kerja Praktek Fakultas Teknik Informatika
3. Bapak Geri, S. Kom, MM selaku Dosen Pembimbing yang telah
memberikan dukungan motivasi, saran dan wawasan bagi penulis Kerja
Praktek dan Pembuatan Laporan Kerja Praktek.
4. Ibu Rukoyah, S. E selaku Kepala di Dinas Sosial Liponsos Keputih yang
telah menerima dan mengijinkan saya Kerja Praktek di Dinas Sosial
Liponsos Keputih Surabaya
5. Mas topan yang telah menerima dan membimbing penulis selama
pelaksanaan Kerja Praktek di Dinas Sosial Liponsos Keputih Surabaya.
6. Semua pihak karyawan yang tidak dapat penulis sebutkan satu persatu,
yang telah tulus ikhlas memberikan dukungan sehingga dapat
terselesaikanya Kerja Praktek ini.
7. Sofyan Yuliyanto selaku teman satu kelompok Kerja Praktek yang telah
berjuang untuk menyelesaikan Kerja Praktek ini bersama-sama
8. Sahabat saya Yolanda yang telah mendampingi Kerja Praktek saya dan
membantu menyelesaikan laporan kerja praktek dengan baik dan benar
dan terselesaikan tepat waktu.

Penulis menyadari bahwa masih terdapat banyak kekurangan di dalam

penulisan dan penyusunan Laporan Kerja Praktik ini, oleh karena itu penulis
mengharapkan kritik dan saran yang membangun dari pembaca demi perbaikan
laporan kerja praktik Lapangan.
Semoga laporan ini dapat bermanfaat bagi para pembaca pada umumnya
dan bagi penulis pada khususnya.

Surabaya, 26 Juni 2021

Penulis
 DAFTAR ISI

HALAMAN JUDUL................................................................................................i
LEMBAR PENGESAHAN.....................................................................................ii
KATA PENGANTAR............................................................................................iii
DAFTAR ISI...........................................................................................................iv
DAFTAR TABEL...................................................................................................vi
DAFTAR GAMBAR.............................................................................................vii
DAFTAR LAMPIRAN........................................................................................viii
BAB 1 PENDAHULUAN.......................................................................................1
1.1 Latar Belakang..........................................................................................1
1.2 Rumusan Masalah.....................................................................................1
1.3 Batasan Masalah........................................................................................1
1.4 Tujuan........................................................................................................1
1.5 Manfaat......................................................................................................2
1.6 Luaran........................................................................................................2
1.7 Waktu Dan Tempat Pelaksanaan...............................................................2
BAB 2 GAMBARAN UMUM................................................................................3
2.1 Sejarah Instansi..........................................................................................3
2.1.1 Letak Liponsos Keputih.....................................................................4
2.1.2 Fasilitas Liponsos Keputih.................................................................4
2.2 Struktur Organisasi....................................................................................3
2.3 Visi dan Misi Instansi................................................................................4
2.3.1 Visi dan Misi Dinas sosial Kota Surabaya.........................................4
2.3.2 Visi dan Misi Dinas sosial Liponsos Keputih Surabaya....................4
2.4 Kajian Pustaka...........................................................................................4
2.4.1 Sistem Informasi................................................................................4
2.4.2 Web....................................................................................................4
2.4.3 HTML................................................................................................4
2.4.4 PHP....................................................................................................4
2.4.5 CSS.....................................................................................................4
2.4.6 Database.............................................................................................4
2.4.7 SQL....................................................................................................4
2.4.8 XAMPP..............................................................................................4
2.4.9 Unified Modeling Leanguage (UML)................................................4
BAB 3 PELAKSANAAN KERJA PRAKTEK.......................................................8
3.1 Kegiatan Survei Lapangan........................................................................8
3.3.1 Penentuan Kerja Praktek....................................................................4
3.3.2 Analisi Kebutuhan..............................................................................4
3.3.3 Analisis Kebutuhan Non Fungsional.................................................4
 3.3.4 System Requirement..........................................................................4
3.3.5 Jadwal Kerja Praktek.........................................................................4
3.2 Rancangan Database..................................................................................8
3.2.1 Use Case Diagram..............................................................................4
3.2.2 Activity Diagram................................................................................4
3.2.3 Sequence Diagram.............................................................................4
3.2.4 Class Diagram....................................................................................4
3.2.5 Entity Realtionship Diagram (ERD)..................................................4
3.2.6 Flowchart...........................................................................................4
3.2.7 Struktur Database...............................................................................4
3.3 Pemilihan Supporting Designer Tools......................................................9
3.3.1 Microsoft Visio..................................................................................4
3.3.2 Microsoft Word..................................................................................4
3.3.3 Microsoft Excel..................................................................................4
3.3.4 Notepad++..........................................................................................4
3.3.5 Google Chrome..................................................................................4
3.3.6 Sumblime Text 3................................................................................4
3.3.7 PhpMyAdmin.....................................................................................4
3.4 Mockup......................................................................................................9
BAB 4 KESIMPULAN DAN SARAN.................................................................10
4.1 Kesimpulan..............................................................................................10
4.2 Saran........................................................................................................10
DAFTAR PUSTAKA............................................................................................11
 DAFTAR TABEL

Tabel 3.1 Jadwal Hari dan Jam Kerja Praktek.........................................................5

Tabel 3.2 Simbol atau Komponen Use Case Diagram..........................................12
Tabel 3.3 Simbol atau Komponen Activity Diagram............................................12
Tabel 3.4 Simbol atau Komponen Sequence Diagram..........................................12
Tabel 3.5 Simbol atau Komponen Class Diagram.................................................12
Tabel 3.6 Simbol atau Komponen ERD.................................................................12
Tabel 3.7 Simbol atau Komponen Flowchart........................................................12
 DAFTAR GAMBAR

Gambar 1.1 Alur Pelayanan.....................................................................................3

Gambar 1.2 Tampilan Halaman Dashboard.............................................................4
Gambar 1.3 Tampilan Database.............................................................................12
Gambar 1.4 Data Razia.........................................................................................12
Gambar 1.5 Tampilan Halaman Grid View...........................................................12
Gambar 1.6 Tampilan Halaman Lihat Data...........................................................12
Gambar 1.7 Tampilan Halaman Isi Data...............................................................12
Gambar 2.1 Halaman Depan Liponsos..................................................................12
Gambar 2.2 Letak Maps Liponsos Keputih...........................................................12
Gambar 2.3 Struktur Organisasi.............................................................................12
Gambar 2.4 Logo HTML.......................................................................................12
Gambar 2.5 Logo PHP...........................................................................................12
Gambar 2.6 Logo CSS...........................................................................................12
Gambar 2.7 Logo SQL...........................................................................................12
Gambar 2.8 Logo Xampp.......................................................................................12
Gambar 2.9 Logo UML.........................................................................................12
Gambar 3.1 Use Case Diagram..............................................................................12
Gambar 3.2 Activity Diagram................................................................................12
Gambar 3.3 Sequence Diagram.............................................................................12
Gambar 3.4 Class Diagram....................................................................................12
Gambar 3.5 ERD....................................................................................................12
Gambar 3.6 Flowchart............................................................................................12
Gambar 3.7 Struktur Organisasi.............................................................................12
Gambar 3.8 Tabel User..........................................................................................12
Gambar 3.9 Tabel Member....................................................................................12
Gambar 3.10 Logo Microsoft Visio.......................................................................12
Gambar 3.11 Logo Microsoft Word......................................................................12
Gambar 3.12 Logo Microsoft Excel......................................................................12
Gambar 3.12 Logo Notepad ++ ............................................................................12
Gambar 3.12 Logo Google Chrome.......................................................................12
Gambar 3.12 Logo Sublime Text 3 .......................................................................12
Gambar 3.12 Logo PhpMyAdmin.........................................................................12
Gambar 3.12 Halaman Dashboard.........................................................................12
Gambar 3.12 Halaman Lihat Data.........................................................................12
Gambar 3.12 Halaman Tambah Data Pasien.........................................................12
Gambar 3.12 Halaman Edit Data Pasien................................................................12
Gambar 3.12 Halaman Hapus Data Pasien............................................................12
Gambar 3.12 Halaman Grid View.........................................................................12
 DAFTAR LAMPIRAN

Lampiran 1.............................................................................................................51
Lampiran 2.............................................................................................................52
Lampiran 3.............................................................................................................12
Lampiran 4.............................................................................................................12
Lampiran 5.............................................................................................................12
Lampiran 6.............................................................................................................12
Lampiran 7.............................................................................................................12
 BAB 1
PENDAHULUAN

1.1 Latar Belakang

Di era modern saat ini, perkembangan teknologi terutama teknologi
informasi yang sangat dibutuhkan oleh perusahaan ataupun lembaga dalam
berbagai bidang, baik itu perusahaan kecil, perusahaan besar maupun institusi
pemerintahan. Dengan menerapkan teknologi informasi, perusahaan menjadi lebih
mudah dalam melakukan pekerjaan mereka daripada menggunakan cara manual.
Oleh karena itu, perusahaan mengharapkan para penerus terutama mahasiswa
untuk terus melanjutkan dan mengembangkan teknologi informasi yang ada saat
ini untuk kedepannya.
Mahasiswa merupakan generasi penerus bangsa yang pada waktunya akan
memikul tongkat estafet guna meneruskan, mensukseskan pemabangunan
nasional, dan memajukan bangsa dan negara. Kebutuhan akan kemapuan dan
keahlian dalam teknologi terutama teknologi informasi menuntut adanya pelatikan
dan usaha yang sungguh-sungguh. Adapun tuntunan dalam dunia kerja yang
mengharuskan lulusan perguruan tinggi dapat menjadi seorang problem solver
atas segala permaslahan yang muncul.
Untuk dapat memenuhi tuntutan tersebut, mahasiswa diharuskan
meningkatkan wawasan dan kemampuan pada bidang teknologi informassi
dengan cara melaksanakan kegiatan kerja praktek. Sehingga mahasiswa dapat
merealisasikan kemampuan hard skill maupun softkill yang didapatkan selama
perkuliahan.
Kerja Praktek itu sendiri merupakan salah satu matakuliah pada jurusan
Teknik Informatika Universitas 17 Agustus 1945 Surabaya, yang berperan sebagi
tempat pelatihan mahasiswa untuk mengembangakan diri dan menerapkan ilmu
pengetahuan yang telah didapat selama mengikuti perkuliahan. Dengan adanya
kerja praktek mahasiswa dapat memperoleh pengalaman dan gambaran mengenai
berbagai hal yang berkaitan dengan masalah yang terjadi di tempat kerja sesui
dengan bidang yang diambil.
UPTD Liponsos Keputih adalah suatu instansi dalam Dinas Sosial yang
bergerak dalam memberi pelayanan kesejahteraan social terhadap psikotik,
gelandangan dan pengemis,anak jalanan dan wanita tua susila yang berada di
Surabaya, banyaknya gangguan jiwa atau gelandangan yang masuk membuat
UPTD Liponsos Keputih Membutuhkan penyimpanan data yang lebih fleksibel.

1
1.2 Rumusan Masalah
1. Bagaimana memaksimalkan penggunaan teknologi dalam era digital ?
2. Bagaimanan cara membuat pengelolaan data pada instansi lebih mudah
dan praktis ?
3. Bagaimana cara memberikan informasi kepada user tentang data-data yang
tersedia ?
1.3 Batasan Masalah
1. Produk yang dikembangkan adalah sistem informasi berbasis website
2. Fitur – fitur yang ada didalam website ini disesuaikan dengan kebutuhan
pengguna yang berkaitan dengan pengelolaan data.
3. Sistem informasi ini berfokus pada platform pengelolaan data antar
komputer.
1.4 Tujuan
Adapun tujuan dari pelaksanaan Kerja Praktek ini yaitu:

 Kerja Praktek dilaksanakan agar ilmu yang didapatkan di bangku kuliah

dapat diterapkan di dunia nyata / di dunia kerja.
 Dengan melaksanakan Kerja Praktek diharapkan mahasiswa bisa melihat
secara langsung permasalahan yang timbul di lapangan dan mencari solusi
dari permasalahan yang ada.
 Dengan melaksanakan Kerja Praktek mahasiswa bisa mengetahui atau
menempatkan diri dalam kondisi di dunia kerja yang sesungguhnya
sehingga mahasiswa dapat mempersiapkan diri secara mental untuk
bersaing dalam memasuki dunia kerja.
 Meningkatkan pemahaman mahasiswa mengenai hubungan antara teori
dan penerapannya sehingga dapat memberikan bekal bagi mahasiswa
untuk terjun ke lingkungan masyarakat.
 Menambah wawasan, memperluas pengetahuan, mengasah keterampilan
dan bakat, serta melatih untuk menjadi tenaga kerja yang profesional dan
ahli dalam bidangnya masing- masing.
 Meningkatkan hubungan kerja sama baik antara perguruan tinggi,
pemerintah, dan perusahaan.
 Memenuhi salah satu syarat kelulusan Sarjana Teknik Informatika
Universitas 17 Agustus 1945.

1.5 Manfaat
Adapun manfaat dari pelaksanaan Kerja Praktek, yaitu :

1. Manfaat bagi Mahasiswa :

 Dapat memenuhi tugas mata kuliah Kerja Praktek (KP) sebagai syarat
wajib kelulusan mahasiswa S1 Teknik Informatika Universitas 17
Agustus 1945.

2
  Mahasiswa mandapat pengalaman bagaimana prosedur kerja yang baik
dan mendapat ilmu pengetahuan dari tempat kerja praktek.
 Melatih mahasiswa untuk bekerja secara disiplin dan profesional.
 Mengenalkan dan membiasakan diri terhadap suasana kerja sebenarnya
sehingga dapat membangun etos kerja yang baik, serta upaya untuk
memperluas wawasan dunia kerja.
 Mengetahui serta mendapatkan wawasan dalam dunia kerja yang
sebenarnya dalam membangun aplikasi berbasis website.

2. Manfaat bagi Universitas :

 Sebagai sarana penegenalan dan pembelajaran yang efektif bagi
mahasiswa sebelum lulus dan terjun dalam dunia kerja nyata.
 Sebagai sarana mengenalkan kualitas mahasiswa Universitas 17
Agustus 1945 kepada perusahaan.
 Bagi akademik dapat menjadikan tolak ukur para mahasiswa yang
akan melakukan Kerja Praktek.
 Menyesuaikan metode pembelajaran dan mata kuliah agar lebih
relevan di dunia kerja
 Membangun hubungan kemitraan dengan instansi tempat kerja praktek
 Mewujudkan tujuan dari program studi Teknik Informatika.

3. Manfaat bagi Perusahaan :

 Instansi atau perusahaan dapat mengusulkan persoalan-persoalan yang
timbul di dalam instansi atau perusahaan dan mahasiswa dapat diminta
untuk mengidentifikasi persoalan yang ada.
 Tugas mahasiswa yang merupakan inti dari program KP dapat
dimanfaatkan sebagai mitra tukar pikiran dalam menghadapi berbagai
masalah yang terjadi dalam kegiatan praktis yang berhubungan dengan
Teknik Informatika
 Kegiatan pekerjaan yang ada dalam suatu instansi / perusahaan yang
terkait bisa terbantu dengan mahasiswa yang melaksanakan kegiatan
Kerja Praktek.
 Membangun hubungan mitra kerja sama antara instansi tempat kerja
praktek dengan Universitas 17 Agustus 1945 Surabaya.
 Meningkatkan produktivitas dalam kegiatan pengelolaan sistem
informasi.

1.6 Luaran
Luaran dari kerja praktek ini adalah laporan akhir serta dokumentasi dan Produk
Program yaitu website sistem informasi Liponsos Keputih Surbaya
Target dari Luaran ini yaitu :
1. Memberikan kemudahan dalam penggunaan web sistem infromasi ini,
banyaknya data-data yang harus diolah dan harus dikerjakan secara
bersama Sistem diharapkan dapat digunakan untuk mengelola data-
data yang ada di Dinas Sosial Liponsos Keputih.

3
 Gambar 1.1 Alur Pelayanan

Gambar 1.2 Tampilan Halaman Dashboard

4
 Gambar 1.3 Tampilan Database

2. Sistem juga diharapkan mampu memberikan data kepada sistem lain

yang berhubungan agar lebih cepat dan fleksibel dalam pengolahan
data.

3. Sistem diharapkan mampu memberikan Excel yang bisa diolah

langsung dari web tersebut.

Gambar 1.4 Data Razia

5
Gambar 1.5 Tampilan Halaman Grid View

Gambar 1.6 Tampilan Halaman Lihat Data

6
 Gambar 1.7 Tampilan Halaman Isi Data

1.7 Waktu Dan Tempat Pelaksanaan

Tempat Kerja Praktek dilaksanakan di:
Tempat : Dinas Sosial Liponsos Keputih Surabaya
Alamat : Jl.Medokan Keputih No.5, Medokan Semampir, Kec.
Sukolilo, SBY
Tanggal : 8 Februari s.d. 7 Mei 2021
Waktu : 08.00 s.d. 17.00 WIB

7
 BAB 2
GAMBARAN_UMUM

2.1 Sejarah Instansi

Arsitektur merupakan produk budaya manusia dalam bentuk bangunan yang
pada awalnya digunakan sebagai tempat untuk bernaung, hidup dan berlindung
dari cuaca dan alam yang mengancam. Kehadiran arsitektur dalam kehidupan
manusia memberikan kontribusi positif yakni sebagai tempat manusia untuk
bertahan hidup juga sebagai sarana manusia untuk melakukan berbagai
aktivitasnya. Prinsip umumnya adalah membangun sesuatu di atas permukaan
tanah sebagai penanda, sebagai ruang yang disiapkan untuk mereka menjadi
kesatuan dalam komunitas kehidupannya. Perkembangan zaman kemudian
mempengaruhi upaya mereka dalam membangun berdasarkan kebutuhan dan
capaian yang akan menaungi bangunan tersebut.
Kondisi tersebut terjadi setelah keberadaan lingkungan manusia dipengaruhi
oleh zaman yang melingkupinya, maka bangunan tercipta dan diwujudkan atas
ide-ide manusia yang dikondisikan oleh perkembangan zaman, seperti kota
Surabaya yang merupakan kota dengan kepadatan penduduk yang relatif tinggi.
Dari perkembangan zaman yang terjadi mestinya terdapat masalah masalah
yang akan terdapat pada kehidupan manusia sebagai makhluk sosial, banyak dari
kalangan tertentu dapat & tidak dapat mengikuti arah perubahan hidup dari
perkembangan zaman yang berdampak pada masalah sosial seperti PMKS
Penyandang Masalah Kebutuhan Sosial, Kesejahteraan sosial merupakan suatu
keadaan terpenuhinya kebutuhan hidup yang layak bagi masyarakat, sehingga
mampu mengembangkan diri dan dapat melaksanakan fungsi sosialnya yang dapat
dilakukan pemerintah, pemerintah daerah dan masyarakat dalam bentuk pelayanan
sosial yang meliputi rehabilitasi sosial, jaminan sosial, pemberdayaan sosial, dan
perlindungan sosial (UU No 11 Tahun 2009 pasal 1 dan 2).
Oleh karena itu, Walikota Surabaya menangani masalah menumpuknya
kaum PMKS tersebut dengan cara mengutus Satuan Polisi Pamong Praja (Satpol
PP) untuk menggiring dan membawa kaum PMKS ke Liponsos (Lingkungan
Pondok Sosial), Dimana terdapat peran dari pemerintah sehingga pemerintah
membuat ruang lingkup komunitas yang diatur dan dinaungi oleh pemerintah

8
Dinas Sosial berupa Lingkungan Pondok Sosial ( LIPONSOS ) yang menangani
PMKS sesuai dengan UUD 1945 pasal 34 ( fasilitas pelayanan yang dipelihara
oleh pemerintah), di kota Surabaya sendiri LIPONSOS terdapat di Jl. Keputih
Tegal No.32, Keputih, Sukolilo, Kota SBY, Jawa Timur.
PMKS yang ditangani Di LIPONSOS keputih Surabaya ini yaitu 1.316
orang penderita PSIKOTIK (Gangguan Jiwa), 211 orang (gelandang pengemis),12
orang (Wanita Tuna Susila), 8 orang (anak jalanan), 2 orang (waria). Kapasitas
LIPONSOS Surabaya sendiri untuk saat ini dapat menampung maximal 900
PMKS tetapi Jumlah PMKS yang terdapat pada LIPONSOS ini mencapai 1.549
PMKS.
Dalam lingkungan pondok sosial sendiri dalam kategori list penghuni
Liponsos Keputih Surabaya yaitu :
1. Penghuni dengan jumlah yang relatif tinggi terpadat pada pelaku
penderita psikotik ( gangguan jiwa ) dengan jumlah 1.316 jiwa ( laki-
laki dan perempuan ),
2. Gelandangan pengemis ( GEPENG ) dengan jumlah 211 jiwa ( laki-laki
dan perempuan ), Anak Jalanan dengan jumlah 8 jiwa termasuk
katergori GEPENG
3. Wanita Tuna Susila ( Pekerja Seks Komersial ) 12 jiwa,Wanita Pria
(WARIA) 2 jiwa.
Dari jumlah penghuni yang relatif tinggi dalam Lingkungan Pondok Sosial
(LIPONSOS ) mengalami Overload yang seharusnya dari ruang lingkup
rehabilitasi dengan kapasitas penghuni maksimal 900 jiwa, saat ini mencapai
1.549 jiwa.

9
 Gambar 2.1 Halaman Depan Liponsos
2.1.1 Letak Liponsos Keputih
Liponsos didirikan oleh pemerintah di bawah naungan Dinas pada tahun
1997 yang terletak di jl. Keputih Tegal No.32, LIPONSOS berada di depan
makam Umum TPU Keputih Surabaya, dilihat dari lokasi menuju ke Dinas Sosial
Liponsos Keputih Surabaya adalah sebagai berikut :

Gambar 2.2 letak maps Liponsos Keputih

Dinas Sosial Liponsos Keputih Surabaya mempunyai lahan seluas 1,6

Hektar yang terdiri dari :
1) Dua blok bangunan, tiap blok terdiri dari 32 kamar ukuran 3x4 m
lengkap dengan kamar mandi untuk menampung
psykotik/Skizofrenia perempuan dan laki-laki.

10
 2) Dua tempat ukuran 4x26 m. Tiap tempat dilengkapi 5 kamar mandi
3) Satu blok untuk menampung glandangan pengemis yang tidak
mempunyai keluarga terdiri dari 32 kamar lengkap dengan kamar
mandi
4) Satu blok untuk istirahat petugas penjaga, petugas masak, petugas
piket dengan kamar mandi
5) Satu ruang dapur umum dengan ukuran 6x12 m
6) Satu ruang serba guna dengan ukuran 6x20 yang biasanya ruang ini
juga digunakan untuk pelatihan para psyikotik/ skizofrenia untuk
berwirausaha dan ketrampilan
7) Satu ruang kantor 6x12
8) Satu ruang UPTD
9) Satu ruang untuk pemeriksaan medis
10) Satu ruang untuk pemeriksaan kejiwaan
11) Satu ruang bangunan mushola
2.1.2 Fasilitas Liponsos Keputih
1. Satu unit mobil ambulans
2. Satu unit mobil pick up
3. 5 orang pegawai negri sipil
4. petugas panti yang terdiri dari :
a. Juru masak
b. Petugas perawat
c. Petugas kebersihan
d. Petugas secretariat
e. Petugas penjaga keamanan

11
2.2 Struktur Organisasi

1Gambar 2.3 Struktur Organisasi

Susunan Organisasi terdiri atas :
a. Kepala Dinas
b. Sekretariat membawahi :
1. Sub Bagian perencanaan
2. Sub Bagian Umum dan Kepegawaian
3. Sub Bagian Keuangan
c. Kelompok Jabatan Fungsional
d. UPTD

2.3 Visi dan Misi Instansi

Visi merupakan suatu rangkaian kata yang di dalamnya terdapat impian,
citacita atau nilai inti dari suatu lembaga atau organisasi. Bisa dikatakan visi
menjadi tujuan masa depan suatu organisasi atau lembaga, berisi pikiran-pikiran
yang terdapat di dalam benak para pendiri. Pikiran-pikiran itu adalah gambaran
dari masa depan dari organisasi yang ingin dicapai. Ada juga yang berpandangan
bahwa visi adalah suatu pandangan tertentu mengenai arah managemen lembaga.
Ini sangat menentukan akan dibawa kemana lembaga yang bersangkutan di masa
depan. Adanya visi ini dipengaruhi oleh suatu pandangan bahwa untuk mencapai
suatu kesuksesan, sebuah organisasi atau lembaga harus memiliki arah yang jelas.
Misi adalah penjabaran dari suatu visi. Apabila visi hanya ditulis dalam kalimat
yang singkat, maka misi menjabarkan visi tersebut dalam beberapa kalimat yang
lebih luas supaya orang yang membacanya lebih mudah dalam memperoleh
pemahaman utuh,
2.3.1 Visi dan Misi dari Dinas Sosial Kota Surabaya
 Visi
Fasilitator Terdepan dalam Penyelenggaraan Kesejahteraan Sosial.
 Misi
1. Meningkatkan Kinerja Dinas.

12
 2. Meningkatkan Kualitas layanan public didukung oleh
sistemdan prosedur yang pasti.
3. Mewujudkan Kerukunan hidup beragama, multikultur dan
pelestarian nilai nilai kepahlawanan.
4. Mengembangkan kemitraan dan kerjasama dengan seluruh
komponen masyarakat.
2.3.2 Visi dan Misi dari Dinas Sosial Liponsos Keputih Surabaya
 Visi
Meningkatkan Kinerja PMS di Kota Surabaya dalam usaha
Kesejahteraan Sosial Menuju Surabaya yang lebih baik

 Misi
1. Meningkatkan Kinerja dinas, mengoptimalkan peran serta
masyarakat dan mewujudkan kerukunan hidup.
2. Melakukan koordinasi pada SKPD di pemerintah kota
Surabaya baik secara horizontal maupun vertikal
3. Fasilitator terdepan dalam penyelenggaraan kesejahteraan
Sosial.

2.4 Kajian Pustaka

Kajian pustaka adalah suatu kegiatan penelitian yang bertujuan melakukan
kajian secara sungguh-sungguh tentang teori-teori dan konsep-konsep yang
berkaitan dengan topik yang akan diteliti sebagai dasar dalam melangkah pada
tahap penelitian selanjutnya. Teori dan konsep yang dikaji digunakan untuk
memperjelas dan mempertajam ruang lingkup dan konstruk variable yang akan di
teliti, sebagai dasar perumusan hipotesis dan penyusunan instrumen penelitian,
dan sebagai dasar dalam membahas hasil penelitian untuk digunakan untuk
memberikan saran dalam upaya pemecahan topik permasalahan. Kajian pustaka
yang digunakan dalam kerja praktek kali ini adalah sebagai berikut.
2.4.1 Sistem Informasi
Sistem informasi bisa didefinisikan sebagai sebuah sistem yang mana terdiri
dari teknologi atau alat, media yang digunakan, prosedur yang terorganisir, serta
sumber daya manusia yang didalamnya bekerja sebagai sebuah kombinasi
membentuk sebuah sistem yang terorganisir. Kombinasi antara teknologi dan
manusia ini bekerja untuk mendapatkan sebuah informasi yang kemudian
digunakan untuk mendukung suatu manajemen guna mengambil sebuah kebijakan
atau keputusan.

13
 Tujuan dari sistem informasi adalah untuk menghasilkan informasi. Sistem
informasi merupakan data yang diolah menjadi bentuk yang berguna bagi para
penggunanya. Data yang diolah saja pun tidak cukup apabila dikatakan sebagai
suatu informasi. Untuk dapat berguna, maka harus tersedia tiga pilar seperti
berikut:
1. Relevance : Tepat kepada Orangnya
2. Timeliness : Tepat Waktu
3. Accurate : Akurat atau tepat nilainya.

Berikut beberapa fungsi dari sistem informasi:

1. Meningkatkan aksesiblitas data secara efektif dan efisien kepada
pengguna, tanpa dengan perantara sistem informasi.
2. Menjamin ketersediaan kualitas dan keterampilan dalam memanfaatkan
sistem informasi secara kritis.
3. Mengidentifikasi kebutuhan mengenai keterampilan pendukung sistem
informasi
4. Mengembangkan proses perencanaan yang efektif
5. Menjamin ketersediaan kualitas dan keterampilan dalam memanfaatkan
sistem informasi secara kritis
Dapat disimpulkan bahwa sistem informasi adalah sebuah kombinasi yang
membentuk sistem guna mendapatkan sebuah informasi yang dibutuhkan.
Disebut sebagai sebuah sistem, komposisi ini juga memerlukan komponen-
komponen yang dibutuhkan untuk mendukung kombinasi kerja itu.
Komponen-komponen itu bekerja dengan saling berinteraksi untuk
membentuk sebuah kesatuan sistem, yang mana nantinya bisa menghasilkan
informasi yang bisa digunakan sebagai bahan pertimbangan untuk mengambil
keputusan.
Sistem informasi memiliki beberapa komponen seperti dibawah ini:
1. Komponen input: Data yang masuk ke dalam sistem informasi.

14
 2. Komponen model: Kombinasi prosedur, logika, dan model matematika
yang memproses data yang tersimpan pada basis data dengan cara yang
sudah di tentukan untuk menghasilkan keluaran yang diinginkan
3. Komponen output: Hasil informasi yang berkualitas dan dokumentasi
yang berguna untuk semua tingkatan manajemen serta semua pemakai
sistem.
4. Komponen teknologi: Alat dalam sistem informasi, teknologi digunakan
dalam menerima input, menjalankan model, menyimpan dan mengakses
data, menghasilkan dan mengirimkan output, serta memantau
pengendalian sistem.
5. Komponen basis data: Kumpulan data yang saling berhubungan yang
tersimpan di dalam komputer dengan menggunakan software database.
6. Komponen kontrol: Komponen yang mengendalikan gangguan terhadap
sistem informasi.
Berikut ciri-ciri dari sistem informasi:
 Baru: Informasi yang didapat adalah baru, dan segar bagi para
penerima informasi.
 Tambahan: Informasi dapat diperbaharui atau memberi tambahan
terhadap informasi yang sebelumnya telah hadir
 Kolektif: Informasi yang dapat menjadi suatu koreksi dari informasi
yang salah sebelumnya.
 Penegas: Informasi yang dapat mempertegas informasi yang
sebelumnya telah ada.
2.4.2 Web
Jaringan komputer yang terdiri dari kumpulan situs internet yang
menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol
transfer hypertext. Orang banyak mengenal web dengan istilah WWW (world
wide web), World Wide Web adalah layanan internet yang paling populer saat ini
internet mulai dikenal dan digunakan secara luas setelah adanya layanan WWW .
WWW adalah halaman-halaman website yang dapat saling terkoneksi satu dengan
lainnya (hyperlink) yang membentuk samudra belantara informasi . WWW
berjalan dengan protokol HyperText Transfer Protokol (HTTP). Halaman Web

15
merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML yang
dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser.
Sintaks HTML mampu memuat konten text, gambar, audio, video dan
animasi. Kini internet identik dengan web, karena kepopuleran web sebagai
standar interface pada lanyanan-layanan yang ada di internet, dari awalnya
sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email
sampai dengan chatting, sampai dengan melakukan transaksi binsin (commerce)
(Betha Sidik,Ir, Pemrograman web dengan HTML, Informatika Bandung, 2005)
Banyak keuntungan yang diberikan oleh Aplikasi berbasis Web dari pada aplikasi
berbasis destop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan
sebagai bagian dari strategi teknologi informasinya.

2.4.3 HTML
HTML atau HyperText Markup Language adalah Bahasa pemrograman
standar yang digunakan untuk membuat sebuah halaman website. Halaman ini
kemudian bisa diakses untuk menampilkan berbagai informasi di dalam sebuah
browser. HTML adalah bahasa pemrograman yang paling umum digunakan. Ia
dirancang untuk memproses, menentukan, dan menyajikan teks dengan
menyematkan tag dan anotasi teks dalam file untuk membuat manipulasi teks
yang mudah bagi komputer. Kemudian pada tahun 2018, HTML mengalamin
pembaruan dengan rilisnya HTML5 ke pasaran. Penjelasan lebih rinci mengenai
arti kataperkata dari HTML adalah sebagai berikut:
 HyperText: adalah istilah teks aktif, yang apabila diklik akan
meloncat atau menuju halaman lain. Ini merupakan kemampuan dari
sebuah halaman web yang dapat saling berhubungan antara halaman
satu dengan lainnya.
 Markup: Merupakan tag-tag yang biasanya diawali dengan tag
pembuka (opening tag) dan tag penutup (closing tag) yang memberi
kemampuan untuk menata layout atau memformat struktur halaman
web pada sebuah konten teks sederhana didalam file HTML itu
sendiri.

16
  Language: yaitu bahasa yang digunakan oleh HTML itu sendiri.
Perintahperintah tag menggunakan bahasa yang dapat dimengerti
oleh browser atau interpreter lainnya.
HTML bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java,
C, C++, visual basic dan sejenisnya, melainkan bahasa markup / markah
yang ditulis dengan perintah tag-tag atau element yang menaungi
(mengapit) konten didalamnya yang akan ditampilkan pada sebuah halaman
web oleh browser atau HTML interpreter (penerjemah HTML) lainnya.
HTML5 adalah kepanjangan dari HyperText Markup Language versi 5,
merupakan HTML baru penerus dari HTML 4, XHTML1, dan DOM Level 2
HTML. HTML5 merupakan pengembangan bahasa HTML yang lebih baik, lebih
berarti atau semantik (semantic meaning) yang sebelumnya adalah bahasa
markup sederhana menjadi sebuah flatform canggih, penuh fitur dan kaya akan
antarmuka pemrograman aplikasi yang disebut API (Application Programming
Interface).
HTML berguna untuk menampilkan konten, menghubungkan (link) antar
halaman, memberi struktur dan informasi terkait dengan sebuah halaman web.
konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten
interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan
ditampilkan pada halaman web.

Gambar 2.4 Logo HTML

2.4.4 PHP
PHP adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakan untuk mengembangkan situs web statis atau situs web dinamis atau

17
aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang sebelumnya
disebut Personal Home Pages. Script sendiri merupakan sekumpulan instruksi
pemrograman yang ditafsirkan pada saat runtime. Sedangkan Bahasa scripting
adalah bahasa yang menafsirkan skrip saat runtime. Dan biasanya tertanam ke
dalam lingkungan perangkat lunak lain.
Karena PHP merupakan scripting server-side maka jenis bahasa
pemrograman ini nantinya script/program tersebut akan dijalankan/diproses oleh
server. Berbeda dengan javascript yang client-side. PHP adalah bahasa
pemrograman umum yang berarti php dapat disematkan ke dalam kode HTML,
atau dapat digunakan dalam kombinasi dengan berbagai sistem template web,
sistem manajemen konten web, dan kerangka kerja web.
Fungsi PHP adalah membuat atau mengembangkan situs web statis atau
situs web dinamis atau aplikasi Web. Walaupun sebenarnya bukan hanya PHP
bahasa pemrograman yang bisa digunakan untuk memuat website. PHP digunakan
karena untuk membuat website dinamis bisa digunakan untuk menyimpan data ke
dalam database, membuat halaman yang dapat berubah-ubah sesuai dengan input
user, memproses form, dll.
Dalam membuat file PHP dapat digabung menggunakan tag html, Dan
ketika tanpa menggunakan tag html apa pun disebut file PHP Murni. Server
menginterpretasikan kode PHP dan mengeluarkan hasilnya sebagai kode HTML
ke browser web. Agar server mengidentifikasi kode PHP dari kode HTML, kita
harus selalu menyertakan kode PHP dalam tag PHP.

Gambar 2.5 Logo PHP

2.4.5 CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian
instruksi yang menentukan bagiamana suatu text akan ditampilkan pada halaman
web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts

18
(huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran
font (font sizes) dan lain-lain. Cascading Style Sheets juga bisa berarti meletakkan
styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style
sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.
Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style
sheet. Saat menggunakan CSS, Anda tidak perlu menulis propertis font, color atau
size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat
sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat
kembali menggunakannya bila diperlukan.
CSS adalah salah satu bahasa desain web (style sheet language) yang
mengontrol format tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda (markup laguage). Biasanya CSS digunakan untuk
mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS dapat
diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL bahkan
ANDROID. CSS dibuat untuk memisahkan konten utama dengan tampilan
dokumen yang meliputi layout, warna dan huruf. Pemisahan ini dapat
meningkatkan daya akses konten pada web, menyediakan lebih banyak
fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah
tampilan, memungkinkan untuk membagi halaman untuk formatting dan
mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya
teknik tableless pada desain web.
Fungsi utama css adalah merancang, merubah, mendesain, membentuk
halaman wesite. Pada dasarnya css itu dapat merubah tag-tag html (yang
sederhana) sehingga menjadi lebih fungsional dan menarik. CSS juga
memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan
menggunakan metode pembawaan yang berbeda pula, seperti on-screen, in-print,
by voice, dan lain-lain. HTML dan CSS memiliki keterikatan yang erat. Karena
HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk
semua aspek yang terkait dengan tampilan website), maka kedua bahasa
pemrograman ini harus berjalan beriringan.

19
 Gambar 2.6 Logo Css
2.4.6 Database
Database atau basis data adalah kumpulan data yang dikelola sedemikian
rupa berdasarkan ketentuan tertentu yang saling berhubungan sehingga mudah
dalam pengelolaannya. Melalui pengelolaan tersebut pengguna dapat memperoleh
kemudahan dalam mencari informasi, menyimpan informasi dan membuang
informasi, Adapun pengertian lain dari database adalah sistem yang berfungsi
sebagai mengumpulkan file, tabel, atau arsip yang terhubung dan disimpan dalam
berbagai media elektronik.
Basis data dapat didefinisikan atau diartikan sebagai kumpulan data yang
disimpan secara sistematis di dalam komputer yang dapat diolah atau
dimanipulasi menggunakan perangkat lunak (software) program atau aplikasi
untuk menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi
berupa tipe data, struktur data dan juga batasan-batasan pada data yang kemudian
disimpan
Basis data merupakan aspek yang sangat penting dalam sistem informasi
karena berfungsi sebagai gudang penyimpanan data untuk diolah lebih lanjut.
Basis data menjadi penting karena dapat mengorganisasi data, menghidari
duplikasi data, menghindari hubungan antar data yang tidak jelas dan juga update
yang rumit.
Proses memasukkan dan mengambil data ke dan dari media penyimpanan
data memerlukan perangkat lunak yang disebut dengan sistem manajemen basis
data (database management system | DBMS). DBMS merupakan sistem perangkat

20
 lunak yang memungkinkan pengguna basis data (database user) untuk
memelihara, mengontrol dan juga mengakses data secara praktis dan efisien.
Dengan kata lain, semua akses ke basis data akan ditangani oleh DBMS.
DBMS ini menjadi lapisan yang menghubungkan basis data dengan program
aplikasi untuk memastikan bahwa basis data tetap terorganisasi secara konsisten
dan dapat diakses dengan mudah.
Ada beberapa fungsi yang harus ditangani DBMS seperti pendefinisian
data, menangani permintaan pengguna untuk mengakses data, memeriksa sekuriti
dan integriti data yang didefinisikan oleh DBA (Database Administrator),
menangani kegagalan dalam pengaksesan data yang disebabkan oleh kerusakan
sistem maupun media penyimpanan (disk) dan juga menangani unjuk kerja semua
fungsi secara efisien.
Tujuan utama DBMS adalah untuk memberikan tinjauan abstrak data
kepada pengguna. Jadi sistem menyembunyikan informasi tentang bagaimana data
disimpan, dipelihara dan juga bisa diakses secara efisien. Pertimbangan efisien di
sini adalah rancangan struktur data yang kompleks tetapi masih bisa digunakan
oleh pengguna awam tanpa mengetahui kompleksitas strukturnya
Menurut jenisnya, basis data dapat dibagi menjadi :
a. . Basis data flat-file.
Basis data ini ideal untuk data berukuran kecil dan dapat dirubah dengan
mudah. Pada dasarnya, basis data flat-file tersusun dari sekumpulan string dalam
satu atau lebih file yang dapat diurai untuk mendapatkan informasi yang
disimpan. Basis data flat-file cocok untuk menyimpan daftar atau data yang
sederhana dan dalam jumlah kecil. Basis data flat-file akan menjadi sangat rumit
apabila digunakan untuk menyimpan data dengan struktur kompleks walaupun
dimungkinkan pula untuk itu.
Beberapa kendala dalam menggunakan basis data jenis ini adalah rentan pada
korupsi data karena tidak adanya penguncian yang melekat ketika data digunakan
atau dimodifikasi dan juga adanya duplikasi data yang mungkin sulit dihindari.
Salah satu tipe basis data flat-file adalah file CSV yang menggunakan pemisah
koma untuk setiap nilainya.
b. Basis data relasional

21
 Basis data ini mempunyai struktur yang lebih logis terkait cara
penyimpanannya. Kata "relasional" berasal dari kenyataan bahwa tabel-tabel yang
ada di basis data relasional dihubungkan satu dengan lainnya. Basis data
relasional menggunakan sekumpulan tabel dua dimensi yang masing-masing tabel
tersusun atas baris (tupel) dan kolom (atribut).
Untuk membuat hubungan antara dua atau lebih tabel, digunakan key (atribut
kunci) yaitu primary key di salah satu tabel dan foreign key di tabel yang lain.
Saat ini, basis data relasional menjadi pilihan utama karena keunggulannya.
Program aplikasi untuk mengakses basis data relasional menjadi lebih mudah
dibuat dan dikembangkan dibandingkan dengan penggunaan basis data flat-file.
Beberapa kekurangan yang mungkin dirasakan di basis data jenis ini adalah
implementasi yang lebih sulit untuk data dalam jumlah besar dengan tingkat
kompleksitasnya yang tinggi. Selain itu, proses pencarian informasi juga menjadi
lebih lambat karena perlu menghubungkan tabel-tabel terlebih dahulu apabila
datanya tersebar di beberapa tabel.
Namun, terlepas dari beberapa kekurangannya, basis data relasional telah
digunakan secara luas. Saat ini, basis data relasional telah banyak dimanfaatkan
oleh perusahaan-perusahaan dari skala kecil, menengah hingga besar. Beberapa
basis data ternama yang ada saat ini, baik yang berasal dari sumber terbuka (open
source) atau yang komersil, adalah juga basis data relasional.
2.4.7 SQL
Structured Query Language atau SQL adalah bahasa kueri yang dirancang
untuk membantu dalam pengambilan dan mengelola informasi pada sebuah
database. Biasanya diartikan sebagai bahasa yang digunakan untuk mengakses
sebuah data dalam basis relasional.
Terkait dengan standarisasi SQL sudah ada sejak tahun 1986 dan diinisialisasi
oleh ANSI (American National Standard Institute). Hingga sekarang, banyak
sekali server yang dapat mengartikan SQL, baik dari database maupun software.
Terdapat beberapa fungsi yang dimiliki oleh bahasa kueri SQL. Berikut
merupakan beberapa penjelasan mengenai fungsi dari bahasa pemrograman ini.
a. Dapat Memanipulasi dan Mengakses Database

22
 Fungsi yang pertama adalah dengan menggunakan SQL, maka kita dapat
mengakses database dengan menuliskan beberapa perintah sesuai dengan
kueri yang telah ditetapkan. Misalnya saja, anda dapat membuat,
menambahkan, mengupdate, dan menghapus basis data, tabel, dan beberapa
informasi yang tidak dibutuhkan sistem.
b. Mampu untuk Mengeksekusi Query
Fungsi yang kedua adalah mampu untuk mengeksekusi berbagai kueri
yang ada. Penggunaan dari masukan kueri tersebut bertujuan untuk
memberikan perintah langsung kepada sistem untuk dapat mengelola sebuah
sistem database. Contoh dari beberapa eksekusi kueri adalah fungsi trigger,
alter, grant, dan lain sebagainya
c. . Dapat Mengatur Hak Akses User
fungsi yang terakhir adalah untuk mengatur dan mengelola kebutuhan hak
akses tabel, pandangan, dan prosedur pada database. Tujuan dari adanya hak
akses ini adalah untuk membatasi akses pengguna sesuai dengan kebutuhan
sistem yang diterapkan.
Terdapat beberapa macam perintah dasar yang harus diketahui. Berikut
merupakan beberapa penjabarannya.
a. Data Definition Language (DDL)
Perintah ini merupakan perintah paling mendasar di dalam bahasa
SQL. Tujuan dari penggunaan DDL adalah untuk membuat struktur
database dengan tepat. Kemudian jenis DDL terbagi menjadi lima bagian,
diantaranya adalah sebagai berikut.
 Create
Perintah create digunakan untuk membuat sebuah database baru
 Alter
Perintah alter digunakan untuk mengubah struktur tabel yang sudah
ada sebelumnya. Biasanya digunakan untuk mengubah atau
menghapus kolom, merubah nama tabel, dan lain – lain.
 Rename
Untuk perintah rename digunakan untuk mengubah nama tabel yang
sudah dibuat sebelumnya

23
  Drop
Perintah drop memiliki fungsi untuk menghapus database, tabel,
kolom, hingga bagian index.
 Show
Perintah DDL yang terakhir adalah perintah show yang berfungsi
untuk menampilkan data tabel yang ada.
b. Data Manipulation Language (DML)
Pengertian dari DML adalah sebuah perintah SQL yang bertujuan
untuk memanipulasi data dalam database. Perintah dari DML terbagi
menjadi empat bagian, yaitu:

 Insert
Perintah DML yang pertama digunakan untuk memasukkan data record
yang baru ke dalam sebuah tabel.
 Select
Perintah select ini digunakan untuk menampilkan atau mengambil data
dari sebuah tabel. Juga dapat mengambil data dari tabel yang berbeda
dengan menggunakan fungsi relasi.
 Update
Perintah update bertujuan untuk merubah data record (pembaruan data)
yang sudah ada. Dapat menuliskan perintah ini jika terdapat proses input
yang salah pada record.
 Delete
Perintah DML yang terakhir berfungsi untuk menghapus data record
yang telah dibuat sebelumnya dalam sebuah tabel.
c. Data Control Language (DCL)
Perintah dasar yang terakhir adalah DCL, berfungsi untuk mengatur hak
akses apa saja yang dimiliki oleh pengguna. DCL terbagi menjadi dua
jenis, yaitu:
 Grant

24
 Perintah DCL yang pertama adalah grant, yaitu perintah yang dapat
dilakukan oleh admin database untuk memberikan akses kepada user
yang lainnya.
 Revoke
Untuk perintah DCL yang kedua merupakan kebalikan dari
perintah yang sebelumnya, berfungsi untuk mencabut atau menghapus
hak akses bagi user tertentu sesuai dengan keinginan admin database.
Di sisi yang lain, terdapat sebuah teknik yang dapat
menyalahgunakan celah keamanan dalam SQL pada database suatu
aplikasi. Teknik tersebut dinamakan dengan SQL Injection, yang juga
merupakan favorit dari seorang Hacker untuk meretas program atau
sistem dengan mudah. Hal ini dapat terjadi karena kesalahan dalam
proses input yang tidak terfilter dengan benar dan penggunaan form
yang salah.

Gambar 2.7 Logo Sql

2.4.8 XAMPP
XAMPP adalah sebuah paket perangkat lunak (software) komputer yang
sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) /
MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat
pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi
ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS
Windows, Mac OS, dan juga Solaris.

25
 Sejarah mencatat, software XAMPP pertama kali dikembangkan oleh tim
proyek bernama Apache Friends dan sampai saat ini sudah masuk dalam rilis versi
7.3.9 yang bisa didapatkan secara gratis dengan label GNU (General Public
License).

Gambar 2.8 logo Xampp

Jika dijabarkan secara gamblang, masing-masing huruf yang ada di dalam
nama XAMPP menurut para ahli memiliki arti sebagai berikut ini :
 X = Cross Platform
Merupakan kode penanda untuk software cross platform atau yang bisa
berjalan di banyak sistem operasi. Jadi, ada XAMPP untuk Windows,
xampp for mac, dan untuk Linux. Semua itu bersifat free download xampp.
 A = Apache
Apache adalah aplikasi web server yang bersifat gratis dan bisa
dikembangkan oleh banyak orang (open source).
 M = MySQL / MariaDB
MySQL atau MariaDB merupakan aplikasi database server yang
dikembangkan oleh orang yang sama. MySQL berperan dalam mengolah,
mengedit, dan menghapus daftar melalui database.
 P = PHP
Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk
menunjukkan eksistensi bahasa pemrograman PHP. Bahasa pemrograman
ini biasanya digunakan untuk membuat website dinamis, contohnya dalam
website berbasis CMS WordPress.

26
  P = Perl
Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari
bahasa pemrograman Perl yang kerap digunakan untuk memenuhi
berbagai macam kebutuhan. Perl ini bisa berjalan di dalam banyak sistem
operasi sehingga sangat fleksibel dan banyak digunakan.
Program aplikasi XAMPP berfungsi sebagai server lokal untuk
mengampu berbagai jenis data website yang sedang dalam proses
pengembangan. Dalam prakteknya, XAMPP bisa digunakan untuk
menguji kinerja fitur ataupun menampilkan konten yang ada didalam
website kepada orang lain tanpa harus terkoneksi dengan internet, cukup
akses melalui Xampp control panel, atau istilahnya website offline.
XAMPP bekerja secara offline layaknya web hosting biasa namun
tidak bisa diakses oleh banyak orang. Maka dari itu, XAMPP biasanya
banyak digunakan oleh para mahasiswa maupun pelajar untuk melihat
hasil desain website sebelum akhirnya dibuat online menggunakan web
hosting yang biasa dijual dipasaran
2.4.9 Unified Modeling Language (UML)
UML merupakan singkatan dari “Unified Modelling Language” yaitu
suatu metode permodelan secara visual untuk sarana perancangan sistem
berorientasi objek, atau definisi UML yaitu sebagai suatu bahasa yang sudah
menjadi standar pada visualisasi, perancangan dan juga pendokumentasian sistem
software. Saat ini UML sudah menjadi bahasa standar dalam penulisan blue print
software. UML digunakan untuk memodelkan suatu sistem (bukan hanya
perangkat lunak) yang menggunakan konsep berorientasi object. Dan juga untuk
menciptakan suatu bahasa pemodelan yang dapat digunakan baik oleh manusia
maupun mesin.
Aplikasi atau sistem yang tidak terdokumentasi biasanya dapat
menghambat pengembangan karena developer harus melakukan penelusuran dan
mempelajari kode program. UML juga dapat menjadi alat bantu untuk transfer
ilmu tentang sistem atau aplikasi yang akan dikembangkan dari satu developer ke
developer lainya. Tidak hanya antar developer terhadap orang bisnis dan siapapun

27
dapat memahami sebuah sistem dengan adanya UML. UML diciptakan oleh
Object Management Group yang diawali dengan versi 1.0 pada Januari 1997.
Tujuan penggunaan UML dapat dijabarkan sebagai berikut :
 Dapat memberikan bahasa permodelan visual kepada pengguna dari
berbagai macam pemerograman maupun proses rekayasa.
 Dapat menyatukan praktek-praktek terbaik yang ada dalam permodelan.
 Dapat memberikan model yang siap untuk digunakan, merupakan bahasa
permodelan visual yang ekspresif untuk mengembangkan sistem dan untuk
saling menukar model secara mudah.
 Dapat berguna sebagai blue print, sebab sangat lengkap dan detail dalam
perancangannya yang nantinya akan diketahui informasi yang detail
mengenai koding suatu program.
 Dapat memodelkan sistem yang berkonsep berorientasi objek, jadi tidak
hanya digunakan untuk memodelkan perangkat lunak (software) saja.
 Dapat menciptakan suatu bahasa permodelan yang nantinya dapat
dipergunakan oleh manusia maupun oleh mesin.

Gambar 2.9 Logo UML

BAB 3
PELAKSANAAN_KERJA_PRAKTEK

3.1 Kegiatan Survei Lapangan

Pada saat melakukan survei lapangan, ada beberapa hal yang dilakukan
sebelum melakukan tahap pembangunan aplikasi. Diantaranya sebagai berikut :
3.1.1 Penentuan Kerja Praktek

28
 Kerja Praktek yang dilaksanakan pada Dinas Sosial Liponsos Keputih
Surabaya dilaksanakan dengan membuat sebuah system informasi Pengelolaan
Data berbasis Web dengan fungsi pengelolaan data yang disesuaikan pada Instansi
serta fungsi lain seperti membuat grid view dan download untuk data dan fungsi
lain yang sekiranya diperlukan.
3.1.2 Analisis Kebutuhan
“Kebutuhan Fungsional adalah kebutuhan yang berisi proses-proses apa saja /
layanan apa saja yang nantinya harus disediakan oleh sistem, mencakup
bagaimana sistem harus bereaksi pada input tertentu dan bagaimana perilaku
sistem pada situasi tertentu.” (Ristievanny, 2018)

Adapun kebutuhan fungsional yang dari website yang akan dibangun ini
adalah sebagai berikut :
a. Admin dapat Melihat data pasien liponsos keputih
b. Admin dapat Menghapus data pasien liponsos keputih
c. Admin dapat Mengisi data pasien liponsos keputih
d. Admin dapat Mengedit data pasien liponsos keputih
e. Admin dapat Melihat jumlah data pasien liponsos keputih
f. Admin dapat Mendownlod file data tersebut berupa Excel, Csv, pdf atau
Word
g. Admin dapat Mengedit data Pasien sesuai kebutuhan lalu mendownload
data yang sudah di edit tersebut
h. Admin dapat melihat jumlah pasien sesuai kategori
3.1.3 Analisis Kebutuhan Non Fungsional
“Kebutuhan Non Fungsional adalah kebutuhan yang menitikberatkan pada
properti prilaku yang dimiliki oleh sistem. kebutuhan fungsional juga sering
disebut sebagai batasan layanan atau fungsi yang ditawarkan sistem seperti
batasan waktu, batasan pengembangan proses, standarisasi dan lain lain.”
(Ristievanny, 2018).
Adapun kebutuhan non fungsional yang dari website yang akan dibangun ini
adalah sebagai berikut :
1. Keamanan

29
 Sistem Informasi ini hanya dijalankan antar Komputer.
2. Kendala
Sistem informasi dikerjakan berjalan dengan baik, karena di
kerjakan secara tim. Namun sistem informasi ini masih belum
menggunakan cloud server, hanya sebatas localhost.
3. Kinerja
Proses berjalan dengan localhost, yang menggunakan database
Xampp

3.1.4 System Requirement

System Requirement adalah sebuah kemampuan yang harus dimiliki dari
suatu software. Kemampuan ini dapat ditujukan untuk memecahkan suatu
permasalahan ataupun diperlukan untuk memenuhi ketentuan-ketentuan tertentu
(seperti standar tertentu, keputusan manajemen, ataupun alasan-alasan politis).
Kumpulan dari berbagai requirement digunakan dalam berbagai aspek
dalam pengembangan sebuah sistem. Dalam tahap perancangan, requirement
digunakan untuk menentukan berbagai fitur yang akan ada di dalam sistem. Pada
penghujung sebuah development effort, himpunan requirement ini digunakan
untuk melakukan validation & verification untuk memastikan perangkat lunak
yang telah dibuat memang sesuai dengan yang diinginkan. Bahkan selagi
pengembangan berjalan, himpunan requirement ini terus dimodifikasi untuk
menyesuaikannya dengan berbagai kebutuhan para stakeholder serta tenggat
waktu dan dana yang tersedia. Secara luas, software systems requirements
engineering (RE) adalah proses untuk menemukan suatu himpunan requirement
yang tepat sehingga suatu perangkat lunak dapat memenuhi kegunaannya. Proses
ini dilakukan dengan cara mengenali para stakeholder serta kebutuhan mereka
serta mendokumentasikannya di dalam bentuk yang dapat digunakan untuk
analisa, komunikasi, dan implementasi yang mengikutinya. Berikut adalah
system requirement Dinas Sosial Liponsos Keputih Surabaya :
1. System mampu menyimpan data Pasien
2. System mampu menampilkan data Pasien
3. System mampu mengupdate data Pasien

30
 4. System mampu menghapus data Pasien
5. System mampu mendownload file data Pasien

3.1.5 Jadwal Kerja Praktek

N Hari Kerja Jam Kerja Istirahat
O
1 Senin Pukul 08:00 s/d 16.00 Pukul 12:00 s/d 13.00
2 Selasa Pukul 08:00 s/d 16.00 Pukul 12:00 s/d 13.00
3 Rabu Pukul 08:00 s/d 16.00 Pukul 12:00 s/d 13.00
4 Kamis Pukul 08:00 s/d 16.00 Pukul 12:00 s/d 13.00
5 Jumat Pukul 08:00 s/d 16.00 Pukul 11:00 s/d 13.00
6 Sabtu Pukul 08:00 s/d 15.00 Pukul 12:00 s/d 13.00
7 Minggu Libur Libur
Tabel 3.1 Jadwal Hari dan Jam Kerja Praktek

3.2 Rancangan Database

3.2.1 Use Case Diagram
Use case diagram merupakan diagram yang menggambarkan hubungan
antara aktor dengan sistem. Use case diagram bisa mendeskripsikan sebuah
interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Use case
diagram juga bisa digunakan untuk mengetahui fungsi apa saja yang ada di dalam
sebuah sistem dan bisa juga mempresentasikan sebuah interaksi aktor dengan
sistem. Komponen tersebut kemudian menjelaskan komunikasi antara aktor,
dengan sistem yang ada. Dengan demikian, use case dapat dipresentasikan dengan
urutan yang sederhana, dan akan mudah dipahami oleh para konsumen. Manfaat
dari use case sendiri adalah untuk memudahkan komunikasi dengan menggunakan
domain expert dan juga end user, memberikan kepastian pemahaman yang pas
tentang requirement atau juga kebutuhan sebuah sistem.

Gambar3.1 Use case diagram

Use case diagram mempunyai 3 komponen ,yaitu :
a. Sistem
Menyatakan batasan sistem dalam relasi dengan aktor-aktor yang
menggunakannya (di luar sistem) dan fitur-fitur yang harus disediakan
(dalam sistem).

31
 b. Aktor
Aktor adalah segala hal diluar sistem yang akan menggunakan
sistem tersebut untuk melakukan sesuatu. Bisa merupakan manusia,
sistem, atau device yang memiliki peranan dalam keberhasilan operasi dari
sistem.
c. Use Case
Use Case sendiri adalah gambaran fungsional dari sebuah sistem.
Dengan demikian, antara konsumen dan juga pengguna pada sistem
tersebut, akan mengerti atau paham mengenai fungsi sistem yang tengah
dibangun.
Use case diagram juga mempunyai beberapa relasi, yaitu :
a. Association
Teknik mengindentifikasi interaksi yang dilakukan oleh actor
tertentu dengan use case tertentu. Hal ini digambarkan dengan garis antara
aktor terhadap use case tersebut.
b. Generalization
Mendefinisikan relasi antara dua aktor atau dua use case yang
mana salah satunya meng-inherit dan menambahkan atau override sifat
dari yang lainnya.

c. Dependency
Dependency ini terbagi menjadi 2 macam, yaitu include dan juga
extend. Include : Berfungsi untuk mengindentifikasi hubungan antara 2
use case, dimana use case yang satu akan memanggil use case yang
lainnya. Extend : Apabila pemanggilan, memerlukan kondisi tertentu maka
akan berlaku dependensi.
Berikut simbol atau komponen dari use case diagram, antara lain :
Simbol Nama Keterangan
Aktor Merupakan peran
orang, sistem yang
lain, atau alat ketika
berhubungan dengan
use case.

32
 Use Case Abstraksi dari
penghubung antara
aktor dengan use
case.
Association Abstraksi dari
penghubung antara
aktor dengan use
case.

Extend Menunjukkan bahwa

suatu use case
merupakan
tambahan fungsional
dari use case lainnya
jika suatu kondisi
terpenuhi.
Include Menunjukkan bahwa
suatu use case
seluruhnya
merupakan
fungsionalitas dari
use case lainnya.
Generalization Menunjukkan
spesialisasi aktor
untuk dapat
berpartisipasi
dengan use case.
Tabel 3.2 Simbol atau Komponen use case Diagram
3.2.2 Activity Diagram
Activity Diagram merupakan rancangan aliran aktivitas atau aliran kerja dalam
sebuah sistem yang akan dijalankan. Activity Diagram juga digunakan untuk
mendefinisikan atau mengelompokan aluran tampilan dari sistem tersebut.
Activity Diagram memiliki komponen dengan bentuk tertentu yang dihubungkan

33
dengan tanda panah. Panah tersebut mengarah ke-urutan aktivitas yang terjadi dari
awal hingga akhir.

Gambar 3.2 Activity Diagram

Berikut simbol atau komponen dari activity diagram, antara lain :
Simbol Nama Keterangan
Status awal Sebuah diagram aktivitas
memiliki sebuah status
awal.

Aktivitas Aktivitas yang dilakukan

sistem,aktivitas biasanya
diawali dengan kata kerja.

Percabangan/Decision Percabangan dimana ada

pilihan aktivitas yang lebih
dari satu.
Penggabungan/Join Penggabungan dimana
yang mana lebih dari satu
aktivitas lalu digabungkan
jadi satu
Status akhir Status akhir yang
dilakukan sistem, sebuah
diagram aktivitas memiliki
sebuah status akhir.

Swimlane Swimlane memisahkan

organisasi bisnis yang
bertanggung jawab
terhadap aktivitas yang
terjadi.
Tabel 3.3 Simbol atau Komponen Activity Diagram
3.2.3 Sequence Diagram
Sequence Diagram adalah suatu diagram yang menjelaskan interaksi objek
dan menunjukkan (memberi tanda atau petunjuk) komunikasi diantara objek-

34
objek tersebut. Sequence diagram digunakan untuk menjelaskan perilaku pada
sebuah skenario dan menggambarkan bagaimana entitas dan sistem berinteraksi,
termasuk pesan yang dipakai saat interaksi. Semua pesan digambbarkan dalam
urutan pada eksekusi.

Gambar 3.3 Sequence Diagram

Berikut adalah Simbol atau Komponen Sequence Diagram :
Simbol Nama Keterangan
Aktor Merepresentasikan entitas yang
berada di luar sistem dan
berinteraksi dengan sistem

Lifeline Menghubungkan objek selama

sequence (message dikirim atau
diterimadan aktifasinya).
General Merepresentasikan entitas tunggal
dalam sequence diagram.

Boundary Berupa tepi dari sistem, seperti user

interface atau suatu alat yang
berinteraksi dengan sistem yang
lain.
Control Element mengatur aliran dari
informasi untuk sebuah skenario.
Objek ini umumnya mengatur
perilaku dan perilaku bisnis.
Entitas Elemen yang bertanggung jawab
menyimpan data atau informasi. Ini
dapat berupa beans atau model
object.

35
 Activation Suatu titik dimana sebuah objek
mulai berpartisipasi di dalam
sebuah sequence yang
menunjukkan kapan sebuah objek
mengirim atau menerima objek.
Message Berfungsi untuk menggambarkan
Entry pesan/hubungan antar objek yang
menunjukkan urutan kejadian yang
terjadi.
Message to Simbol ini menggambarkan
Self pesan/hubungan objek itu sendiri,
yang menunjukkan urutan kejadian
yang terjadi.
Message Menggambarkan hasil dari
Return pengiriman message dan
digambarkan dengan arah dari
kanan ke kiri.

Tabel 3.4 Simbol atau Komponen Sequence Diagram

3.2.4 Class Diagram

Class diagram adalah visual dari struktur sistem program pada jenis-jenis
yang di bentuk. Class diagram merupakan alur jalannya database pada sebuah
sistem.Class diagram merupakan penjelasan proses database dalam suatu
program. Dalam sebuah laporan sistem maka class diagram ini wajib ada.

Gambar 3.4 Class Diagram

Berikut adalah Simbol atau Komponen Class Diagram

Simbol Nama Keterangan

Kelas Kelas pada struktur sistem.
Interface Sama dengan konsep interface
dalam pemrograman berorientasi
objek.

Association Relasi antarclass dengan arti

36
 umum, asosiasi biasanya juga
disertai dengan Multiplicity.
Directed Relasi antarkelas dengan makna
Association kelas yang atau digunakan oleh
kelas yang lain, asosiasi biasanya
juga disertai dengan multiplicity.
Generalisasi Relasi antarkelas dengan makna
generalisasispesialisasi (umum
khusus).
Dependency Relasi antarkelas dengan makna
kebergantungan antarkelas.
Aggregation Relasi antarkelas dengan makna
semuabagian (whole-part).

Tabel 3.5 Simbol atau Komponen Class Diagram

3.2.5 Entity Relationship Diagram (ERD)

ERD adalah model atau rancangan untuk membuat database, supaya lebih
mudah dalam menggambarkan data yang memiliki hubungan atau relasi dalam
bentuk sebuah desain. Dengan adanya ER diagram, maka sistem database yang
terbentuk dapat digambarkan dengan lebih terstruktur dan terlihat rapi.

Gambar 3.5 ERD

Berikut adalah tabel simbol ERD :

Simbol Nama Keterangan
Entity Kumpulan objek yang dapat
diidentifikasikan secara unik atau
saling berbeda. Simbol dari entitas
biasanya digambarkan dengan
persegi panjang.

37
 Atribut Berfungsi untuk mendeskripsikan
karakteristik dari entitas tersebut.
Atribut kunci merupakan hal
pembeda atribut dengan entitas.
Relationship Hubungan antara sejumlah entitas
yang berasal dari himpunan entitas
yang berbeda. Gambar relasi
diwakili oleh simbol belah ketupat.
Tabel 3.6 Tabel Simbol ERD

3.2.6 Flowchart
Flowchart (diagram alir) adalah suatu jenis diagram yang merepresentasikan
algoritma atau langkah-langkah instruksi yang berurutan dalam suatu sistem.
Flowchart biasanya digunakan sebagai bukti dokumentasi untuk menjelaskan
gambaran logis sebuah sistem yang akan dibangun kemudian diberikan kepada
programmer, dengan begitu, flowchart dapat membantu untuk memberikan solusi
terhadap masalah yang bisa saja terjadi dalam membangun sistem.

Gambar 3.6 Flowchart

Berikut adalah tabel simbol Flowchart:
Simbol Nama Keterangan
Terminal Point Symbol Simbol yang digunakan
(Simbol Titik Terminal) sebagai permulaan
(start) atau akhir (stop)
dari suatu proses
Flow Direction Symbol simbol ini digunakan
(Simbol Arus) untuk menghubungkan
simbol satu dengan
simbol yang lain
(connecting line).
Processing Symbol simbol yang digunakan
(Simbol Proses) untuk menunjukkan
kegiatan yang dilakukan
oleh computer

38
 Decision Symbol simbol yang digunakan
(Simbol Keputusan) untuk memilih proses
atau keputusan
berdasarkan kondisi
yang ada.
Tabel Simbol Flowchart

3.2.7 Struktur DataBase

Gambar 3.7 Struktur Database

1. Tabel User

Gambar 3.8 Tabel User

2. Tabel Member

39
 Gambar 3.9 Tabel Member

3.3 Pemilihan Supporting Designer Tools

Untuk menunjang kegiatan kerja praktek, berikut ini adalah perangkat lunak
pendukung yang digunakan dalam pengembangan sistem informasi Dinas Sosial
Liponsos Keputih Surabaya serta penulisan laporan :
3.3.1 Microsoft Visio
Microsoft Office Visio atau biasa disebut dengan Microsoft Visio,
merupakan sebuah software komputer yang biasanya digunakan untuk membuat
diagram, diagram alir, brainstorm, dan skema jaringan. Software ini menggunakan
grafik vektor untuk membuat diagramnya. Dengan software ini dapat membantu
pengguna dalam meningkatkan kinerja, mulai dari mempersiapkan penggambaran
diagram seperti DFD, ERD, UML, Jaringan, Rancangan User Interface dan
sejenisnya. Terlebih adanya sejumlah template yang disediakan, dapat

40
memungkinkan pengguna untuk membuat diagram dengan mudah, intuitif serta
profesional. Untuk versi yang digunakan adalah Visio 2016.

Gambar 3.10 logo Microsoft Visio

3.3.2 Microsoft Word
Microsoft word adalah aplikasi pengolah kata (word processor) yang dapat
membantu pengguna untuk menyelesaikan berbagai pekerjaan yang berhubungan
dengan dokumen, teks atau tulisan. Contohnya seperti pembuatan laporan, buku,
makalah, jurnal dll. Dalam definisi lain, Microsoft Word adalah software yang
berfungsi untuk membuat, mengedit dan memformat data dalam bentuk dokumen
yang hasilnya bisa disimpan dalam bentuk softcopy (file) ataupun hardcopy (hasil
print). Microsoft Word mempunyai beragam fitur yang dapat membantu
kebutuhan para penggunanya. Selain masukan huruf dan angka, Word juga
mendukung penggunaan gambar, tabel, word art, penomoran halaman dan format
keluaran file yang beragam mulai dari .txt sampai format pdf. Dalam penulisan
laporan, versi Microsoft Word yang digunakan adalah Word 2013.

41
 Gambar 3.11 logo Mirosoft Word

3.3.3 Microsoft Excel

Microsoft Excel adalah sebuah aplikasi yang digunakan untuk mengolah
sebuah data dengan otomatis melalui berbagai bentuk seperti rumus, perhitungan
dasar, pengolahan data, pembuatan tabel, pembuatan grafik hingga manajemen
data. Maka tak heran jika Excel seringkali digunakan untuk keperluan
administrasi perusahaan. Karena aplikasi ini sangat lengkap dan sangat penting
dalam proses pengolahan data perusahaan. Selain itu, Excel juga memiliki
formula yang memudahkan kita melakukan sebuah perhitungan dalam pengolahan
data tersebut. Aplikasi ini juga sangat penting dalam pembuatan grafik tertentu
yang dibutuhkan oleh perusahaan.
Aplikasi Microsoft Excel ini berupa lembaran kerja atau spreadsheet yang
mempunyai fitur-fitur kalkulasi yang baik dalam membantu kita semua untuk
kebutuhan pekerjaan kantor. Bahkan Excel merupakan aplikasi yang populer yang
banyak digunakan untuk kebutuhan olahan data atau manajemen data.
Berdasarkan sejarahnya, Excel bermula dari sebuah program berupa spreadsheet
yang dibuat di tahun 1982 dengan sebutan Multiplan. Program ini awalnya sangat
populer untuk sistem operasi CP/M, namun tidak untuk MS-DOS karena sudah
terdapat saingannya seperti Lotus 1-2-3. Sehingga pihak Microsoft sendiri mula
mengembangkan aplikasi terbaru dari spreadsheet, yakni Excel.Versi yang
digunakan adalah Excel 2013

42
 Gambar 3.12 logo Microsoft Excel

3.3.4 Notepad++
Notepad++ adalah sebuah aplikasi penyunting teks dan penyunting kode
sumber yang berjalan di sistem operasi Windows. Notepad++ menggunakan
komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas
kode sumber berbagai bahasa pemrograman. Notepad++ mendukung banyak
bahasa pemrograman. Dukungan dalam hal ini adalah dimengerti dan
diterjemahkan menjadi teks oleh Notepad++. Misalnya pada C++, fungsi-
fungsinya akan di masukan kedalam daftar fungsi dan kata-katanya akan berubah
warna sesuai dengan makna kata tersebut di C++. Dalam pengembangan sistem
informasi akademik SDI Plus Al-Azhar, versi yang digunakan adalah Notepad++
v7.6.2.

Gambar 3.13 Notepad++

3.3.5 Google Chrome
Google Chrome adalah sebuah aplikasi peramban yang digunakan untuk
menjelajah dunia maya seperti halnya Firefox, Opera ataupun Microsoft Edge.
Jika Firefox dikembangkan oleh Mozilla, Google Chrome dibuat dan dirancang
oleh Google, perusahaan internet terbesar di dunia yang juga empunya Android.
Proyek open source yang digunakan oleh Google disebut Chromium,
menggunakan mesin rendering Webkit sampai dengan versi 27 dan dirancang

43
untuk bekerja dengan kecepatan di atas rata-rata namun tetap ringan dijalankan di
perangkat desktop dan mobile.

Gambar 3.14 Google Chrome

3.3.6 Sublime Text
Sublime text merupakan perangkat lunak text editor yang digunakan
untukmembuat atau meng-edit suatu aplikasi. Sublime text mempunyai
fiturplugintambahan yang memudahkan programmer selain itu sublime text 3
adalah editor berbasis python, sebuah teks editor yang elegan, kaya akan fitur,
cross platform,mudah dan simple yang cukup terkenal di kalangan developer
(pengembang),penulis dan desainer.Versi yang digunakan adalah Sumblime Text
3

Gambar 3.15 Sublime Text 3

3.3.7 Php MyAdmin

phpMyAdmin pertama kali didirikan oleh Tobias Ratschiller. Saat itu,
Ratschiller adalah seorang konsultan IT. Ratschiller juga kemudian mendirikan
perusahaan perangkat lunak Maguma.

44
 Ratschiller mulai mengerjakan front-end berbasis PHP ke MySQL pada
tahun 1998, terinspirasi oleh MySQL-Webadmin Peter Kuppelwieser. Dia sempat
berhenti mengerjakan proyek tersebut dan juga phpAdsNew pada tahun 2000
karena kurangnya waktu.
Pada saat itu, phpMyAdmin sudah menjadi salah satu aplikasi PHP dan
alat administrasi MySQL yang paling populer, dengan komunitas pengguna dan
kontributor yang besar. Untuk mengkoordinasikan semakin banyak patches, tiga
orang pengembang, Olivier Müller, Marc Delisle dan Loïc Chapeaux
mendaftarkan proyek phpMyAdmin di SourceForge.net dan mengambil alih
pembangunan pada tahun 2001. Sejak tahun 2015 pembangunan sepenuhnya
didasarkan pada GitHub
PhpMyAdmin adalah sebuah aplikasi pendukung untuk membuka
software aplikasi web PhpMyAdmin. Menurut Sibero (2013) menyatakan bahwa
“phpMyAdmin adalah aplikasi web yang dibuat oleh phpmyadmin.net.
PhpMyAdmin digunakan untuk administrasi database MySQL”.
Berdasarkan teori diatas maka dapat disimpulkan PhpMyAdmin adalah
sebuah aplikasi web yang digunakan untuk administrasi database MySQL yang
berbasis tool open source dan Word Wide Web.
phpMyAdmin memiliki interface yang user-friendly dan intuitive yang
mudah dipelajari. Dengan begitu, orang-orang dapat mempelajari dan
membiasakan diri dengan fitur-fiturnya dengan mudah dan cepat.
phpMyAdmin memperbolehkan user memanfaatkan kebanyakan fungsi
MySQL, termasuk mengelola database, menjalankan queries MySQL,
mengeksekusi statement MySQL, mengelola user dan permission dan masih
banyak lagi. Mengimport dan mengexport data dari dan ke berbagai format.
Dengan pre-defined fuctions, bisa mengubah format data-data yang sudah
tersimpan.
phpMyAdmin bisa membuat graphics database dalam bentuk PDF,
bersamaan dengan beberapa queries yang kompleks dibantu dengan query-
byexample.Php MyAdmin versi yang digunakan adalah Versi 3.2.4

45
 Gambar 3.16 Logo PhpMyAdmin

3.4 Mockup
Dalam pengerjaan sebuah aplikasi, adanya mockup akan sangat membantu.
Sang programmer akan menjadi lebih fokus dalam proses coding karena desain
sudah ada. Selain itu, mockup juga dapat berperan sebagai media komunikasi
yang baik antara klien dan perusahaan serta antara project manager, desainer, dan
programmer. Adanya mockup dapat membuat perusahaan khususnya para
developer, untuk memahami requirement yang diminta oleh klien.
Mock up selain disebut sebagai visualisasi sebuah konsep desain, bisa juga
disebut sebagai gambaran nyata rancangan produk, atau preview sebuah ide yang
terlihat seperti wujud aslinya. Anda bisa melihat seperti apa preview dari
rancangan halaman web yang akan dibuat. Hal ini akan persis seperti aslinya,
hanya saja masih belum memakai aplikasi web dan ini dalam bentuk layout.
Mock up ini sendiri bisa dibuat dengan cara manual dengan mengandalkan
kertas, cat warna, dan pena. Akan tetapi, juga bisa dibuat secara lebih modern
dengan mengandalkan aplikasi seperti CorelDraw, Adobe Photoshop,
Marcomedia Freehand, Adobe Illustrator, dan sebagainya. Bahkan, bisa juga
memakai aplikasi khusus untuk mock up desain website
Web designer yang sudah berpengalaman akan menampilkan gambaran visual
seperti konsep asli desain web, sehingga ini akan memberi kemudahan untuk
Anda. Anda tak akan kesulitan lagi untuk membayangkan seperti apa konsep
halaman web yang Anda pesan dan inginkan.

46
 Berikut merupakan Mockup dari Perancangan Sistem Informasi Berbasis
Web Dinas Sosial Liponsos Keputih :

47
 1. Dashboard

Gambar 3.17 Halaman Dashboard

Pada halaman dashboard berisikan halaman utama yang mana Admin akan
dilihatkan jumlah Pasien di setiap barak, Keterangan umum Pasien.
2. Halaman Lihat Data

48
 Gambar 3.18 Halaman Lihat Data
Pada halaman Lihat Data berisikan konten data semua Pasien, button untuk
Mendownload data-data pasien berupa Excel, Csv, Pdf, Word, dan button untuk
Menambah Pasien, edit Edit Pasien dan hapus Pasien.
3. Halaman Tambah Pasien

49
 Gambar 3.19 Halaman Tambah Pasien
Pada Halaman Tambah Pasien digunakan untuk Menambah data
pasien yang terdiri dari Foto Pasien, Status PMKS, Tahun Masuk, Tahun
Keluar, Nama, Umur, Jenis Kelamin, Barak, NIK, Pendidikan, Nama
Sekolah, Alamat Domisili, Kelurahan, Kecamatan, Kota, Instansi, TKP,
Keterangan Masuk, Keterangan Keluar, lalu form untuk Identistas
Keluarga yang berisi nama, Pekerjaan, Nama Keluarga yang bertanggung
Jawab, NIK Penanggung jawab, Alamat, Kota, No HP, dan form untuk
Penanganan yang berisi Petugas yang mengeluarkan, Penyerahan
Keluarga, Status Penanganan, Jenis Penanganan, Jenis Rehabilitasi,
Berhasil diRehabilitasi, Deskripsi Keberhasilan Rehabilitasi Sosial, Status
Pengentasan Secara Sosial, Nama PSKS yang membantu dalam
Penanganan

50
4. Halaman Edit Pasien

Gambar 3.20 Halaman Edit Pasien

Pada Halaman Edit Pasien digunakan untuk Mengedit data pasien
yang terdiri dari Foto Pasien, Status PMKS, Tahun Masuk, Tahun Keluar,
Nama, Umur, Jenis Kelamin, Barak, NIK, Pendidikan, Nama Sekolah,
Alamat Domisili, Kelurahan, Kecamatan, Kota, Instansi, TKP, Keterangan
Masuk, Keterangan Keluar, lalu form untuk Identistas Keluarga yang
berisi nama, Pekerjaan, Nama Keluarga yang bertanggung Jawab, NIK
Penanggung jawab, Alamat, Kota, No HP, dan form untuk Penanganan
yang berisi Petugas yang mengeluarkan, Penyerahan Keluarga, Status
Penanganan, Jenis Penanganan, Jenis Rehabilitasi, Berhasil diRehabilitasi,
Deskripsi Keberhasilan Rehabilitasi Sosial, Status Pengentasan Secara
Sosial, Nama PSKS yang membantu dalam Penanganan

51
52
 5. Halaman Hapus Data

Gambar 3.21 Halaman Hapus Data Pasien

Pada halaman hapus Pasien disuguhkan dengan tampilan pop up
konfirmasi hapus untuk meyakinkan admin untuk menghapus pasien
6. Halaman Grid View

Gambar 3.22 Halaman Grid View

Pada Halaman Grid View digunakan untuk mengedit data-data pasien jika ingin
mengexport ke Excel dengan data-data yang diperlukan

53
 BAB 4
KESIMPULAN_DAN_SARAN

Bab ini berisi kesimpulan serta saran yang terkait dengan hasil dari kerja
praktek ini. Berdasarkan analisis yang telah dilakukan mulai dari pengumpulan
informasi, diskusi bersama hingga pembuatan sistem informasi ini maka dapat
ditarik beberapa kesimpulan serta saran yang dapat digunakan sebagai
pertimbangan demi keberlangsungan sistem informasi yang dibuat.
4.1 Kesimpulan
Pembuatan Sistem Informasi berbasis Web di Dinas Sosial Liponsos
Keputih Surabaya bertujuan untuk mempermudah proses pengelolaan data pada
pasien di Liponsos dimana sebelumnya masih menggunakan Excel dan hanya
dikerjakan oleh satu orang, dengan adanya Sistem Informasi Berbasis Web ini
diharapkan dapat mempermudah proses Pengelolaan data dari segi kemudahan,
kepraktisan dan efektifitas

4.2 Saran
Berdasarkan pembahasan kesimpulan yang telah diuraikan, sistem informasi
akademik yang telah dibuat belum sepenuhnya berjalan dengan baik, tentunya
terdapat kekurangan dan perlu dikembangkan lagi agar lebih sesuai dengan
kebutuhan seperti :

 Rancangan desain pada sebagian halaman terlihat sedikit polos

 Diperlukan pengecekan secara berkala oleh admin untuk memastikan
bahwa sistem informasi akademik berjalan sesuai yang diinginkan.

54
 DAFTAR PUSTAKA

Nama, P., Tahun. Judul Kutipan Judul Kutipan Judul Kutipan Judul Kutipan
Judul Kutipan. Kota: Penerbit.
Connolly, Thomas and Begg, Carolyn. (2010). Database Systems A Practical
Approach to Design, Implementation, and Management Fifth Edition. Boston:
Pearson Education.
Komputer, Wahana. 2012. Membangun Web Interaktif dengan Adobe
Dreamweaver CS5, PHP dan MySQL. Semarang: Andi Yogyakarta
Sukamto, & Shalahuddin. (2013). Analisa dan Desain Sistem Informasi.
Yogyakarta: Andi Offset.
Nugroho, Bunafit. 2013. Dasar Pemograman Web PHP – MySQL dengan
Dreamweaver. Yogyakarta: Gava Media
Sevima. 2020. Manfaat Sistem Informasi Akademik Bagi Perguruan Tinggi &
Mahasiswa. [Online]. Tersedia : https://sevima.com/manfaat-sistem-
informasiakademik-bagi-perguruan-tinggi-mahasiswa/. [4 Juni 2021]

55
Lampiran 1
Surat Balasan Dinas Sosial Liponsos Keputih Surabaya

56
Lampiram 2

57
Quisioner
Kerja Praktek
di DInas
Sosial
Liponsos
Keputih
Surabaya

58
59
60
Lampiran 3
Formulir Peniliaian

61
Lampiran 4
Aktivitas Kerja Praktek

62
63
Lampiran 5
Checcklist
Proposal
Kerja Praktek
PROGRAM
STUDI TEKNIK
INFORMATIKA
FAKULTAS
TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA

CHECKLIST PROPOSAL KERJA PRAKTEK

Semester Gasal / Genap Tahun 20.../20... Periode : ...

Nama : M. Rizky Kurniawan

NBI : 1461800069
Alamat Rumah / Kost : Dusun : , Kauman Asri 2, RT/RW : 2/6, Kelurahan : Benowo, Kecamatan : Pa
No Telp. / Hp : 082243623063
Pembimbing : Geri Kusnanto (20460940401)
Judul KP : Perancangan Sistem Informasi berbasis Web di Dinas Sosial Liponsos Keputi
Surabaya

Dosen Pembimbing wajib memberikan check (  ) untuk tiap point yang telah dipenuhi.
Ketentuan umum yang harus dipenuhi
❒ Mahasiswa telah lulus mata kuliah minimal 72 sks
❒ Mahasiswa mempunyai IPK minimal 2.50
❒ Mahasiswa sudah mencantumkan mata kuliah Kerja Praktek dalam KRS
❒ Kerja Praktek sudah sesuai dengan bidang ilmu pada program studi Teknik
Informatika
❒ Mahasiswa sudah melakukan pembayaran untuk mengikuti mata kuliah Kerja
Praktek pada periode saat ini
Sistematika Penulisan Proposal
❒ Font yang digunakan adalah Times New Roman dengan ukuran 12
❒ Jarak baris pada proposal KP adalah 1 spasi
❒ Ukuran kertas yang digunakan adalah A4 dengan minimal 10 halaman
❒ Ukuran margin yang digunakan sudah sesuai aturan, yaitu right, top, bottom
adalah 3 cm, dan left 4 cm
❒ Halaman Sampul sampai Daftar Isi diberi nomor halaman dengan huruf: i, ii, iii,
…. dst dan diletakkan pada sudut kanan bawah
❒ Halaman Pendahuluan sampai Daftar Pustaka diberi nomor halaman dengan
angka arab: 1, 2, 3, …dst yang diletakkan pada sudut kanan atas
❒ Deskripsi kegiatan kerja praktek sudah 1 halaman atau lebih

Surabaya

64
 , .............
...............
............
Mengetahui,
Koordinator KP Dosen Pembimbing

Supangat, S.Kom., M.Kom

G
eri
Kusnan
to
NIP : 20460110602
NIP : 20460940401

65
Lampiran 6
Lembar Bimbingan Kerja Praktek
PROGRAM
STUDI TEKNIK
INFORMATIKA
FAKULTAS
TEKNIK
UNIVERSITAS 17 AGUSTUS 1945 SURABAYA
LEMBAR BIMBINGAN KERJA PRAKTEK
Semester Gasal / Genap Tahun 20.../20... Periode : ...
Pas Photo 4 x 6 Nama : Sofyan Yuliayanto
NBI : 1461800070
Alamat Rumah / Kost : Dusun : , Kauman Asri 2, RT/RW : 2/6, Kelurahan : Benow
Kecamatan : Pakal
No Telp. / Hp : 082243623063
Pembimbing : Geri Kusnanto (20460940401)
Mulai Bimbingan Judul KP : Perancangan Sistem Informasi berbasis Web di Dinas Sosial
Liponsos Keputih Surabaya

PERSETUJUAN DOSEN PEMBIMBING NILAI

Tanggal : ................................
Ttd. Pembimbing

(Geri Kusnanto)

LEMBAR BIMBINGAN KERJA PRAKTEK

NO HARI / TGL URAIAN MATERI TT.DOSEN
1

JUDUL KERJA PRAKTEK SETELAH DIREVISI

LEMBAR PENGESAHAN JUDUL KERJA PRAKTEK

Tanggal : ...............................

66
 Ttd. Pembimbing Ttd. Koordinator

Geri Kusnanto Supangat, S.Kom., M.Kom

NIP : 20460940401 NIP : 20460110602

* Cetak dilembar buffalo kuning

SYARAT MAJU PRESENTASI KERJA PRAKTEK

67
Lampiran 7
Foto Dokumentasi di Dinas Sosial Liponsos Keputih

68
69