Website Data Pasien Rumah Sakit menggunakan

Metode CRUD pada PHP dan Framework CSS

Bootstrap V.4.4

Richard Laurent 1*)

1
Program Studi Informatika, Fakultas Teknologi Komunikasi dan Informatika, Universitas Nasional
e-mail : 1ronaldorichard27@gmail.com

Abstrak

Membuat sebuah database adalah hal yang sangat mudah bagi kita. Database memang memiliki banyak fungsi dan
kegunaan. Terlebih jika kita mengerti mengenal cara-cara penggunaan dan toolsnya. Penelitian ini menggunakan database
MySQLi dan untuk metodenya menggunakan CRUD (Create, Read, Update, Delete) yang dimana nanti memiliki fungsi
yang hampir sama satu dengan yang lain, hanya sama syntax pada databasenya saja yang akan sedikit berbeda. Pada
penilitian ini juga saya menggunakan HTML dan CSS. Untuk penilitian ini saya menggunakan Framework CSS yaitu
Bootstrap Versi ke 4.4 yang terbaru. Framework pada PHP disini saya tidak menggunakannya karena keterbatasan
pengetahuan dan syntax yang belum begitu saya pahami disini. Jadi, saya harapkan kita bisa menggunakan metode yang
ada di PHP ini agar kita bisa dengan mudah membuat Website CRUD menggunakan PHP dan MySqli. Bootstrap
merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh
bootstrapakan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device.
Fitur ini bisa diaktifkan ataupun dinonaktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web
untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa
beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis.

Abstract

Creating a database is very easy for us. The database does have many functions and uses. Especially if we understand the
ways to use and tools. This research uses the MySQLi database and for the method using CRUD (Create, Read, Update,
Delete) which later has almost the same functions with each other, only the same syntax in the database will be a little
different. In this research I also use HTML and CSS. For this research I use the CSS Framework, Bootstrap Version 4.4,
the latest. Frameworks in PHP here I do not use it because of limited knowledge and syntax that I do not really understand
here. So, I hope we can use this method in PHP so that we can easily create a CRUD Website using PHP and MySqli.
Bootstrap is a framework for building responsive web design. That is, the web appearance created by bootstrap will adjust
the screen size of the browser that we use both on desktop, tablet or mobile devices. This feature can be activated or
deactivated according to our own wishes. So, we can make the web for desktop display only and when rendered by a mobile
browser, the appearance of the web that we make can not adapt to the screen. With Bootstrap we can also build dynamic
or static web.

Kata Kunci : Website, CRUD, Framework, User Experience

I. PENDAHULUAN hal – hal yang berkaitan dengan keselamatan jiwa dan

raganya. Mereka menuntut pelayanan yang benar-benar
Persaingan bisnis yang ada pada saat ini tidak hanya memberikan solusi terhadap apa yang menjadi kebutuhan
berlaku untuk perusahaan atau lembaga profit saja, dan permasalahan mereka. Salah satu pelayanan untuk
melainkan lembaga non profit yang memberikan kepuasan konsumen yang dapat dilakukan sebuah
kesejahteraan konsumen sebagai tujuan utamanya seperti institusi layanan masyarakat seperti rumah sakit adalah
rumah sakit juga mengalami persaingan yang sangat memanfaatkan perkembangan teknologi berupa website.
ketat. Dalam peran ini, kemampuan perusahaan dalam Dengan bantuan teknologi, akses terhadap data/informasi
berkompetisi sangat penting guna kelangsungan hidup yang tersedia dapat berlangsung dengan cepat dan tepat.
dan kesejahteraan anggota, perusahaan maupun Sehingga dengan pemanfaatan website, pencarian
konsumen rumah sakit itu sendiri. Ditambah lagi, informasi dapat dilakukan dimanapun dan kapanpun.
konsumen yang ada pada saat ini sangat selektif dan Website yang menjawab kebutuhan rumah sakit dan
cermat dalam pengambilan keputusan khususnya tentang

1|Page
konsumen adalah website informasi dan komunkasi. membosankan dan banyak hal dapat dilakukan ke dalam
Untuk menciptakan user experience, diperlukan tampilan situs
visual yang menyenangkan dan dapat menghasilkan
sebuah website yang interaktif sehingga tidak

II. TINJAUAN PUSTAKA

2.1 Definisi Framework website dengan mudah dan cepat. Developer hanya perlu
Framework digunakan bukan berarti kita bebas dari memanggil class tertentu untuk membuat tombol, panel,
pengkodean. Kita sebagai pengguna / programmer tabel, pesan peringatan, dan lain sebagainya.
menggunakan variabel dan fungsi-fungsi yang ada di Bootstrap terdiri dari beberapa file. File pada Bootstrap
sebuah framework itu. Karena itulah, kerja kita bisa berisi kumpulan baris kode tersusun dari CSS dan
menjadi efektif karena tidak harus membuat fungsi- JavaScript yang berbentuk class. Jadi ketika Anda
fungsi lagi. Untuk lebih memahaminya, saya akan menggunakan Bootstrap untuk mengembangkan website,
berikan contoh kasus. membuat satu tombol tidak perlu menyusun beberapa
baris kode karena tinggal memanggil salah satu class saja.
Rahman adalah seorang web programmer. Dia menerima
pesanan sebuah proyek website. Lalu dia 2.3 Definisi Metode CRUD
mengerjakannya dari mulai mendesain sampai sistemnya. CRUD adalah singkatan dari Create, Read, Update, dan
Semua kode-kode fungsi & konsep yang harus ada di Delete. Proses ini sangat berkaitan dengan pengambilan
sebuah website semuanya ia buat. Mulai dari kode untuk atau transaksi data dari atau ke database. Hal ini menjadi
postingan, menu, paginasi, dan sebagainya. Alhasil, krusial apabila berhubungan dengan sistem informasi
pesanannya pun berhasil diselesaikan. perusahaan karena data yang diproses biasanya
merupakan data transaksi.
Perusahaan yang memesan merasa puas dengan hasil
website Rahman. Lalu, perusahaan itu membuat kontrak Bagi PHP Developer, operasi CRUD biasanya menjadi
dengan Rahman untuk membuat proyek website lainnya. pillar untuk mempelajari proses pengelolaan data
Kemudian, tibalah waktu untuk membuat proyek website menggunakan PHP dan tentu saja MySQL database. Nah
yang kedua. Rahman mulai mengerjakannya lagi. Diawal CRUD ini bisa diibaratkan sebagai jalur atau koneksi
pengerjaannya, Rahman menyadari bahwa ada fungsi- yang menghubungkan antara bahasa pemrograman PHP
fungsi tertentu yang harus selalu ada dalam sebuah dengan MySQL.
website. Misalnya seperti fungsi postingan, paginasi dan
lain-lain. 1. C (Create) : Create berarti membuat sebuah data baru,
contoh kita sedang melakukan registrasi disebuah
Sejauh ini, framework untuk pemrograman website yang web itu sudah merupakan Create dari CRUD karena
sering digunakan adalah framework php dan framework kita membuat dan menyimpan data registrasi ke
css. Contoh framework php adalah CodeIgniter dan Zend database.
Framework. Sedangkan, contoh framework css adalah 2. R (Read) : Membaca atau menampilkan suatu data
Bootstrap. yang tadinya berada didatabase MySQL misalnya,
kemudian ditampilkan di WEB menggunakan bahasa
2.2 Definisi Bootstrap v.4.4 pemrograman Php
Bootstrap adalah framework CSS yang dikhususkan 3. U (Update) : Update untuk yang satu ini prosesnya
untuk pengembangan front-end website. Framework ini adalah mengedit sebuah data dari database yang
mempunyai nama asli Twitter Blueprint. Ada kata kemudian di edit menggunakan bahasa pemrograman
‘Twitter’ karena pada awalnya dikembangkan untuk Php berupa WEB. Contoh edit profil facebook.
sosial media Twitter yang sangat terkenal saat ini dengan 4. D (Delete) : Fungsinya hampir sama dengan Update
pengguna hampir 326 juta orang. Sebelum Bootstrap akan tetapi proses ini adalah untuk melakukan
muncul, sudah ada framework lain yang tersedia. Hanya penghapusan data di database melalui bahasa Php.
saja tingkat konsistensi dalam proses pengembangan Contoh pada sebuah blog terkadang ada komentar,
buruk. Selain itu juga butuh biaya perawatan mahal. kemudian kita hapus komentar tersebut, nah itu sudah
termasuk proses delete dalam CRUD.
Berdasarkan permasalahan ini, akhirnya para
pengembang menemukan Bootstrap. Berbeda dengan
framework sebelumnya, Bootstrap dikenal konsisten dan
lebih sederhana. Bootstrap adalah salah saatu frame work
yang memungkinkan developer dapat mengembangkan

2|Page
 III. METODOLOGI PENELITIAN Perancangan database ini merupakan pengidentifikasian
dan perancangan tabel database. Tabel tersebut sebagai
Dalam pengembangan dan pembangunan sistem ini, dasar pembuatan website rumah sakit.
terdapat 7 tahap yang dilakukan :
a. Tabel Users
3.1. Tahap Pengumpulan Data Tabel Users berisi username dan password bagian User
Melakukan pengumpulan data yang berhubungan dengan Umum.
pengangkatan dan penjadwalan pegawai di rumah Tabel 3.1 Tabel Users
bersalin, framework Bootstrap, basis data MySQL, desain Field Name Jenis Panjang Keterangan
antarmuka dan desain system. Pengumpulan data name Varchar 100 Nama User
diperoleh melalui studi literatur lewat buku-buku maupun
artikel serta jurnal yang bisa didapatkan di internet. Username
username Varchar 50
User
Password
3.2. Tahap Perencanaan password Varchar 50
User
Memahami permasalahan, mengidentifikasi dan
mendefinisikan secara rinci setiap masalah beserta email Varchar 100 E-mail User
kendalanya dan menyusun langkah-langkah
penyelesaian. b. Tabel Jaminan Pembayaran
Tabel JP (Jaminan Pembayaran) berisi data penjamin
3.3. Tahap Analisis kesehatan user.
Masalah dan langkah penyelesaian yang telah disusun
kemudian dianalisis untuk meneliti bagian-bagian detail Tabel 3.2 Tabel Jaminan Pembayaran
untuk masalah website ini. Field Name Jenis Panjang Keterangan
No. Jaminan
3.4. Tahap Perancangan id Int 3
Pembayaran
Tahap pertama untuk Tahap Perancangan ini saya
membuat Flowchartnya terlebih dahulu. Nama
nama_jaminan Varchar 100
Penjamin

Jenis
jenis_asuransi Varchar 50 Asuransi
Penjamin

c. Tabel Data Pasien

Tabel DP (Data Pasien) berisi kumpulan data pribadi
pasien di dalam Rumah Sakit.

Tabel 3.3 Tabel Data Pasien

Field Name Jenis Panjang Keterangan
no Int 3 No. Pasien
Nama
nama Varchar 50
Pasien
Jenis
jenis_kelamin Varchar 20 Kelamin
Pasien
Umur
umur Int 3
Pasien
Alamat
alamat Varchar 500
Pasien
Domisili
Gambar 3.1 Flowchart Diagram kewarganegaraan Varchar 50
Pasien

3|Page
d. Tabel Poliklinik 3.5 Metode CRUD
Tabel PK (Poliklinik) berisi kumpulan data Poliklinik Pada saat penelitian kali ini, kita akan membuat Website
yang ada di Rumah Sakit. dengan Metode CRUD maka kita harus tau dahulu
tentang Syntax yang akan kita gunakan.
Tabel 3.4 Tabel Poliklinik
Field Name Jenis Panjang Keterangan 1. INCLUDE
No. Pada Syntax ini menunjukan pada kita bisa Load File
id Int 3
Poliklinik Koneksi kita ke file lain. Biasanya Syntax ini
Jenis digunakan untuk Koneksi ke Database.
jenis_poliklinik Varchar 50
Poliklinik
Nama
nama_poliklinik Varchar 100
Poliklinik
2. $_POST
Alamat Untuk metode ini juga banyak dipakai terutama
alamat Varchar 500 untuk mengambil data dari sebuah Form.
Poliklinik

e. Tabel Pendaftaran Pasien 3. $sql->fetch()

Tabel Pendaftaran Pasien berisi kumpulan data Pasien Kode tersebut berfungsi untuk mengambil semua
yang mendaftar setiap hari. data hasil query dan menampung data-data tersebut
di dalam sebuah array lalu menyimpannya ke dalam
Tabel 3.5 Tabel Pendaftaran Pasien variable $data, dimana nantinya kita bisa memanggil
Field Name Jenis Panjang Keterangan data dari table pengguna dari hasil query diatas.
No.
id Int 3
Pendaftaran 3.6. Tahap Penerapan (Penulisan Kode)
Nama Penulisan kode menggunakan bahasa pemrograman dan
nama Varchar 50
Pasien framework yang telah dipilih dan diimplementasikan
Jenis menjadi sebuah program
jaminan_pembayaran Varchar 50 Jaminan
Pembayaran
3.7. Tahap Pengujian
Nama
poliklinik Varchar 50
Poliklinik
Pengujian Sistem Menggunakan XAMPP dan Web
Tanggal Server Apache menggunakan Database MySql
tanggal_kunjungan Varchar 20 Kunjungan
Pasien 3.8. Tahap Evaluasi (Pemeliharaan)
Memperbaiki kesalahan dan kemampuan kinerja system

IV. HASIL DAN PEMBAHASAN

4.1. Tampilan Website menggunakan Bootstrap V.4.4.

Pada poin ini saya akan membahas mengenai Hasil
Tampilan pada Website, dimana ada 6 tampilan. yaitu :

1. Tampilan Login dan Register

Pada tampilan Login dan Register ini adalah halaman
yang saling berkaitan. Pada saat kita masuk ke dalam
Website tersebut maka akan diminta username dan
password akun kita. Jika, nantinya kita belum
mendaftar ke dalam website tersebut maka, di bawah
tombol login ada link untuk ke halaman pendaftaran
seperti pada Gambar 4.1 & Gambar 4.2.

Gambar 4.1 Login Form

4|Page
 3. Tampilan Data Richzxx Hospital
Pada masing-masing page ini akan ditampilan
berbagai Data-data pilihan yang telah kita kunjungi.
Untuk Data Pasien dan Pendaftaran Pasien berisi
Informasi mengenai Data Pasien yang sudah ada di
Richzxx Hospital dan yang ingin mendaftarkan diri
untuk menjadi Pasien Richzxx Hospital.

Gambar 4.4. Data Pasien

Gambar 4.2 Register Form

2. Tampilan Homepage
Pada halaman ini adalah tampilan awal kita saat ingin
memilih hal apa yang akan kita lakukan selanjutnya.
Disini kita bisa Melihat berbagai pilihan untuk
Gambar 4.5. Data Jaminan Pembayaran
mengakses fitur yang ada di dalam website Richzxx
Hospital seperti yang terdapat pada Gambar 4.3.

Gambar 4.6 Data Poliklinik

Gambar 4.7. Data Pendaftaran Pasien

Gambar 4.3. Homepage Richzxx Hospital

5|Page
4.2. Penerapan metode CRUD menggunakan PHP Data yang telah kita masukkan tadi sudah terlihat
Pada poin ini saya menampilan penerapan metode CRUD pada id ke-2 maka, proses pendaftaran kita
pada PHP untuk Website Richzxx Hospital untuk saat ini berarti sukses dan telah masuk ke dalam
saya akan menampilkannya hanya memakai 1 Data Pasien database Richzxx Hospital.
saja. Karena, walaupun kita memakainya di Section
manapun metodenya akan tetap sama. 2. Metode Update
Pada Metode Update ini berarti kita akan
1. Metode Create mengudapte data atau lebih mudahnya
mengubah atau mengedit data yang telah ada di
Pada metode ini Create berarti kita akan dalam database. Untuk tombol Editnya
membuat Data Pasien baru, maka untuk Website kebetulan ada pada Tabel yang paling kanan
ini sudah membuat Tombol Register di bagian yaitu Action. Disitu pada Icol yang sebelah kiri
Tengah yang akan memudahkan kita untuk adalah Tombol untuk Update Data. Maka, kita
Register / Mendaftarkan data baru. akan coba mengupdate data pada id ke-2.

Gambar 4.9. Data Awal sebelum di Update

Gambar 4.10. Data yang diupdate pada Form

Edit Data

Gambar 4.11. Data setelah di Update

Pada data ini terlihat pada proses pengupdate

sudah berhasil di Update pada id ke-2. Data
Gambar 4.8. Register Create Alamat a.n. Kevil Alberth telah di Update
menjadi “Genteng Agung Jakarta Selatan”, maka
Setelah kita mengisi data pada kolom yang telah dengan ini proses pengeditan telah berhasil.
disediakan. Maka, nanti kita langsung di arahkan
Kembali ke Section Data Pasien untuk melihat
data yang telah masuk ke dalam database. 3. Metode Delete
Pada Metode Delete ini kita berarti akan
menghapus sebuah data pada Database, maka
untuk itu kita akan menghapus Data id ke-2.
Untuk Tombol Delete di Section ini juga ada di
sebelah Tombol Edit yang ada tab Action.

Gambar 4.9. Create Sukses

6|Page
 Pada data ini terlihat bahwa id ke-2 sudah tidak
terlihat lagi di tampilan tersebut. Maka, data id ke-2
telah terhapus di dalam Database Richzxx Hospital.
Maka, proses Delete berhasil.

Gambar 4.12. Metode Delete

V. PENUTUP
DAFTAR PUSTAKA
Berdasarkan Penelitian dan Pengujian pada Website
Rumah Sakit ini dapat disimpulkan sebagai berikut : [1] E, Farried., N, Barry., 2016. Penerapan
Framework Bootstrap dalam Pembangunan
1. Pada Website Richzxx Hospital metode CRUD telah Sistem Informasi Pengangkatan dan
berjalan dengan baik. Penyajian tombol-tombolnya Penjadwalan Pegawai (Studi Kasus : Rumah
juga sudah memudahkan user. Sakit bersalin Buah Delima Sidoarjo). Jurnal
2. Pada Website Richzxx Hospital untuk Tampilan UI Informatika Mulawarman, Vol.11, No. 1,
dan UXnya juga sudah variatif dengan berbagai Februari 2016.
macam UI sehingga tidak terlalu membosankan user. [2] Auliya, M. (2018, Agustus 30). Cara Membuat
Penempatan Tabel Data juga terkesan memiliki UI Landing Page dengan Mudah. Retrieved from
sehingga tidak membosankan untuk dilihat user. DomaiNesia:
3. Pada pemrograman PHP disini juga berjalan lancer https://www.domainesia.com/panduan/cara-
dan tidak menggangu Tampilan UInya, membuat-landing-page/
penempatannya juga sudah disesuaikan dengan UI
[3] Ghorust, A. (2015). Makalah Desain Grafis.
yang telah dirancang sebelumnya,
Retrieved from Academia.edu:
https://www.academia.edu/30520646/MAKAL
Setelah menganalisis keseluruhan dari Jurnal ini,
AH_DESAIN_GRAFIS
beberapa saran yang dapat saya tampilkan adalah sebagai
[4] Koji, Y. (2019, April 23). Cara Menggunakan
berikut :
Bootstrap 4 Untuk Membuat Website. Retrieved
from Niagahoster blog:
1. Untuk pengembangan selanjutnya, Website dapat
https://www.niagahoster.co.id/blog/cara-
menampilkan berbagi macam Database untuk bagian
menggunakan-bootstrap/
Dokter atau bagian yang lebih detail lagi.
2. Penambahan Gambar dan Logo yang sepertinya
sangat kurang di Website ini.
3. Pengembangan Metode CRUD ini akan
dikembangkan melalui Framework ini Back-End
dengan Codeigniter Versi 4 atau Laravel dll…

7|Page