Pelajari Sistem Informasi & Basis Data pada Aplikasi Web! 🔥

Big project atau final project akan dimulai dengan memperkenalkan gambaran besar mengenai cara basis data menyimpan dan mengambil data. Oleh karena itu kita akan mempelajari contoh web sederhana berikut. Namun sebelumnya, pastikan aplikasi ini sudah terinstal di komputer/laptop yang akan Anda gunakan.

✅ Persiapan Aplikasi

XAMPP

Pengembangan website membutuhkan lingkungan khusus di perangkat komputer. Salah satu aplikasi yang menyediakan lingkungan pengembangan web adalah XAMPP. Perangkat lunak ini lengkap dan mudah diinstal. Kita aka membutuhkan komponen A (Apache) sebagai server web utama yang bertugas menangani permintaan HTTP dari browser serta akan mengembalikan halaman web. Komponen kedua yaitu M (MySQL) sebagai sistem manajemen basis data (DBMS) yang digunakan untuk mengelola data untuk aplikasi web. Komponen terakhir yaitu P (PHP) sebagai bahasa pemrograman server-side untuk berinteraksi dengan basis data serta digunakan untuk membuat website dinamis.

Jika XAMPP belum terinstal dikomputer, lakukan instalasi terlebih dahulu dengan mengunduh pada link berikut https://www.apachefriends.org/download.html. Pada halaman tersebut unduh XAMPP, pilih berdasarkan sistem operasi yang berjalan di komputer Anda. Panduan lengkap instalasi dapat melihat artikel berikut: Instalasi XAMPP

Visual Studio Code

Visual Studio Code merupakan aplikasi gratis dari Microsoft untuk proses perubahan kode program. Aplikasi ini sifatnya tidak wajib, namun VSCode dapat membuat proses pengembangan website lebih cepat. Penggunaan VSCode, memungkinkan kita tidak perlu membuka file explorer pada window terpisah, dan terminal pada window lainnya. Penggunaan VSCode memungkinkan kita mengubah source-code, bersamaan dengan membuka terminal dan file explorerpada satu jendela. Selain itu terdapat banyak plugin yang tersedia untuk mengefektifkan proses pemrograman sesuai dengan bahasa program yang digunakan.

Web Browser

Aplikasi terakhir yang dibutuhkan yaitu web browser. Teman-teman dapat menggunakan aplikasi seperti Google Chrome, Safari, Mozila Firefox maupun Microsoft Edge.

✅ Operasikan Aplikasi Terkait

Pertama nyalakan XAMPP di komputer dengan mengikuti langkah-langkah berikut:

1. Tekan tombol start di Windows komputer, kemudian cari XAMPP Control Panel dan klik untuk membuka. Atau lakukan pencarian dengan mengetikkan XAMPP di search input toolbar.
2. Aplikasi XAMPP yang terbuka akan terlihat seperti gambar berikut.
3. 
4. Tekan tombol Start pada modul Apache dan MySQL. Tunggu proses hingga modul berwarna hijau.
5. 

✅ Unduh Folder Berikut

Jika aplikasi yang dibutuhkan sudah siap tanpa kendala, unduh file zip di bawah ini ke folder download. Kemudian unzip dan ganti nama folder dengan format NAMA3DIGITTERAKHIRNRP. Contoh budi014. Jika sudah letakkan di folder htdocs pada komputer teman-teman.

Unduh file pada link di bawah ini!

⚠️ Letak Folder htdocs

Untuk meletakkan folder yang kita unduh di htdocs, kita harus tahu dimana dan bagaimana nantinya folder ini akan diakses. Penjelasan mengenai file, nama dan cara akses akan dijelaskan detail pada bagian ini. Lokasi folder XAMPP biasanya akan disimpan di This PC → Windows (C:) → xampp. Lokasi ini bergantung pada proses setup instalasi yang sebelumnya dilakukan lihat link berikut untuk instalasi XAMPP.

1. Langkah pertama, buka folder di mana xampp disimpan di komputer.

2. Buka folder “xampp” dan cari folder “htdocs”. Buka folder “htdocs”. htdocs adalah folder/direktori yang digunakan XAMPP untuk menyimpan file dan proyek web yang ingin dijalankan pada server lokal. htdocs merupakan web directory root, artinya file yang disimpan di dalam folder ini akan dapat diakses melalui server lokal (diakses melalui url pada web browser). 

3. Letakkan folder yang telah diunduh dan diubah namanya ke folder htdocs ini.

✅ Cara Akses di Web Browser

Jika XAMPP berjalan, akses proyek web yang ada di dalam folder htdocs dapat dilakukan dengan membuka browser. Ketikkan localhost/ diikuti dengan nama_folder/nama_file. Contoh jika folder proyek bernama baiduri-clinic, maka cara aksesnya melalui localhost/baiduri-clinic. URL ini akan mengakses file index.php. Pada kasus kita kali ini jika folder diberi nama budi014 dan file yang akan dibuka bernama formulir.php maka akses URL nya localhost/budi014/formulir.php

✅ Pengaturan Database

Sampai pada tahap ini, sebagian besar dari teman-teman akan mengalami error pada halaman web yang diakses melalui web browser. Hal tersebut karena kita belum melakukan penganturan terhadap akses basis data di mySQL (phpMyAdmin)

Akses terhadap basis data memerlukan username password. Secara default biasanya username di atur sebagai ‘root’ dan password kosong ””. Kita akan memastikan username password yang digunakan untuk mengakses phpMyAdmin pada XAMPP yang terinstal di komputer terlebih dahulu. Ikuti langkah-langkah berikut:

1. Buka direktori instalasi XAMPP, lalu masuk ke folder \phpMyAdmin. Direktori biasanya di This PC > Windows (C) > xampp > phpMyAdmin
2. Cari dan buka file dengan nama config.inc.php menggunakan editor teks seperti VSCode atau Notepad
3. Cari pada file tersebut yang bertuliskan /* Authentication type and info */
4. Lihat username dan password yang diset.

Setelah mengetahui username dan password untuk mengakses phpMyAdmin, tuliskan keduanya pada file con.php di folder yang telah kamu unduh dan yang telah dipindahkan ke htdocs sebelumnya. Lihat gambar di bawah ini yang merupakan file con.php

Terakhir buatlah basis data dengan nama simrs di phpMyAdmin. Ikuti setiap instruksi berikut:

1. Buka localhost/phpMyAdmin di web browser (Chrome)
2. Pastikan tab databases aktif. Lihat pada bagian “Create database”. Ketikkan nama simrs1 untuk kelompok 1. Jika kelompok 3 simrs3. Format nama basisdata simrsKELOMPOK. Ketikkan pada inputan form “Database nama” kemudian tekan tombol Create.

3. Pastikan basis data yang dibuat sudah ada pada area sebelah kiri. Klik basis data tersebut.

4. Pada tab di area kanan, klik tab SQL.

5. Ketikkan kode berikut.

CREATE TABLE PASIEN( no_rm INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, kartu_identitas CHAR(4) NOT NULL, no_identitas BIGINT(16) NOT NULL, nama VARCHAR(100) NOT NULL, jenis_kelamin TINYINT, tempat_lahir VARCHAR(20), tgl_lahir DATE NOT NULL, agama VARCHAR(20), status_pernikahan VARCHAR(20), pendidikan VARCHAR(20), pekerjaan VARCHAR(50), kewarganegaraan CHAR(3) NOT NULL, email VARCHAR(50) NOT NULL, alamat VARCHAR(50), rt TINYINT, rw TINYINT, provinsi VARCHAR(50), kotakab VARCHAR(50), kecamatan VARCHAR(50), kelurahan VARCHAR(50), nama_ibu VARCHAR(100) NOT NULL, nama_ayah VARCHAR(100) ) AUTO_INCREMENT = 100001;

6. Kode akan terlihat seperti pada window berikut. Jika baris kode tidak ada yang error, klik tombol “Go”.

7. Pastikan tabel pasien sudah ada dengan mengecek bagian kiri. Basis data simrs memiliki tabel PASIEN.

8. Akses kembali aplikasi web pada web browser dengan format, localhost/NAMA3DIGITNRP/formulir.php. Lihat gambar berikut sebagai referensi:

9. Isi formulir identitas pasien kemudian submit. Cobalah beberapa data pasien. Pada halaman “Daftar Pasien” kita bisa mencari pasien sesuai dengan inputan yang kita berikan.

Lanjutkan ke modul Final Project Basis Data II!