Kemarin kemarin penulis dapat sebuah projek web dari ayah, projek ini menampilkan informasi data data rumah sakit dan kamu bisa kunjungi repo nya di sini untuk lebih lengkap nya. Penulis sengaja membagikan cara ini untuk orang lain yaitu melakukan dropdown auto select pada database server menggunakan SQL join dan semoga saja cara ini bisa membantu kamu. Penulis harap kamu sudah benar benar mengerti tentang SQL join karena pada artikel ini akan menggunakan juga pengkondisian pada program PHP. Tapi tunggu, sebelumnya apa itu dropdown auto select?
Dropdown Auto Select
Definisi secara panjang pada dropdown auto select adalah fitur pada elemen select html yang digunakan dalam pembuatan form HTML. Elemen select dapat digunakan untuk membuat dropdown select yang memungkinkan pengguna untuk memilih satu atau lebih opsi dari daftar yang tersedia. Fitur dropdown auto select pada HTML dapat diterapkan dengan menambahkan atribut selected pada tag option yang akan dipilih secara otomatis. Contoh kamu bisa lihat kode di bawah ini :
<select>
<option value="option1">Option 1</option>
<option value="option2" selected>Option 2</option>
<option value="option3">Option 3</option>
</select>
Perlu di ingat penulis akan menggunakan SQL join, jadi cara nya beda lagi yang di mana juga menggunakan php, jquery ajax, dan mysql. Penulis akan membuat dan mengambil gambar alur maupun desain pada aplikasi nya :
Gambar di atas terlihat mempunyai tabel bernama poliklinik dan dokter yang di mana ada field atau columns tabel bernama no_poli. Jadi nanti kita akan memanfaatkan columns no_poli dan melakukan SQL join pada element select HTML. Karena apa? karena sudah jelas hal ini pada no_poli memiliki nilai yang sama. Ouh ya gambar di atas sebenarnya gambar dari projekan ayah kemarin yang telah di beri untuk penulis. Jadi, penulis sudah tahu bagaimana desain pada aplikasi nya.
Katakanlah penulis mempunyai database bernama latihan dan penulis membuat tabel bernama tbl_poliklinik. Perintah SQL nya bisa lihat di bawah ini :
CREATE TABLE tbl_poliklinik (
no_poli SMALLINT NOT NULL PRIMARY KEY AUTO_INCREMENT,
nm_poli VARCHAR(50) NOT NULL
);
Lalu membuat tabel bernama tbl_dokter pada perintah SQL di bawah ini :
CREATE TABLE tbl_dokter (
no_dokter SMALLINT NOT NULL PRIMARY KEY AUTO_INCREMENT,
nm_dokter VARCHAR(50) NOT NULL,
no_poli SMALLINT NOT NULL,
FOREIGN KEY (no_poli) REFERENCES tbl_poliklinik(no_poli)
);
Klausa FOREIGN KEY (no_poli) REFERENCES tbl_poliklinik(no_poli) field no_poli di tabel tbl_dokter akan merujuk pada primary key dari tabel tbl_poliklinik yang bernama no_poli. Penulis akan melakukan insert pada tabel bernama tbl_poliklinik :
INSERT INTO tbl_poliklinik (no_poli, nm_poli) VALUES (NULL,'poli kandungan'),(NULL,'poli umum'),(NULL,'poli gigi');
Hasil ketika di eksekusi :
Dan untuk tbl_dokter nya :
INSERT INTO tbl_dokter (no_dokter, nm_dokter, no_poli) VALUES (NULL,'dokter kandungan 1',1), (NULL,'dokter kandungan 2',1), (NULL,'dokter kandungan 3',1), (NULL,'dokter umum 1',2), (NULL,'dokter umum 2',2), (NULL,'dokter umum 3',2),(NULL,'dokter gigi 1',3), (NULL,'dokter gigi 2',3), (NULL,'dokter gigi 3',3);
Pada tbl_dokter nya :
Ok, saatnya penulis akan membuat folder di mana folder ini penulis beri nama dengan poliklinik dan untuk file PHP nya akan beri nama dengan index.php beserta script jquery nya langsung, lalu di simpan pada folder poliklinik. Kode nya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Poli & Dokter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="sb-nav-fixed">
<!-- Navbar -->
<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
<!-- Navbar Brand-->
<h4 class="ps-3 pe-3 text-white"><i class="bi bi-vr"></i> Poli & Dokter</h4>
</nav>
<!-- </Akhir navbar -->
<!-- Main content -->
<div id="Maincontent">
<main>
<div class="container">
<div class="row mt-5">
<div class="col mt-5">
<!-- Form -->
<form id="form_id" action="list_pasien.php" method="post">
<div class="card mb-4 border-success">
<div class="card-body bg-success text-white">Pemilihan Poli & Dokter</div>
<div class="card-footer align-items-center justify-content-between bg-white">
<!-- Pilih poli -->
<div class="mb-3">
<label for="no_poli" class="form-label ms-3 mt-2 text-uppercase fs-5">Nama Poliklinik :</label>
<!-- Kita perlu mengisi value 1, 2, 3 pada option untuk no poli-->
<select class="form-control w-75 float-end me-5 mt-2" name="no_poli" id="no_poli">
<option value="">--Pilih Poli--</option>
<option value="1">poli kandungan</option>
<option value="2">poli umum</option>
<option value="3">poli gigi</option>
</select>
</div>
<!-- </Akhir pilih poli -->
<!-- Pilih pilih dokter -->
<div class="mb-3 mt-5">
<label for="nm_dokter" class="form-label ms-3 mt-2 text-uppercase fs-5">Nama Dokter :</label>
<select name="nm_dokter" class="form-control w-75 float-end me-5 mt-2" id="dokter" required>
<option value="">--Pilih Dokter--</option>
<!-- Hasil nama dokter akan di tampilkan di sini menggunakan AJAX -->
</select>
</div>
<!-- </Akhir pilih dokter -->
</div>
<!-- Button load -->
<div style="text-align: right;">
<button type="submit" class="btn btn-warning mt-3 mb-3 me-5 fw-bold text-white">LOAD</button>
</div>
<!-- </Akhir button load -->
</div>
</form>
<!-- </Akhir form -->
</div>
</div>
</div>
</main>
</div>
<!-- </Akhir main content -->
<!-- Jquery bs 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- jquery 3.6.3 -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
<!-- Script jquery -->
<script>
// ketika dokumen sudah di load
$(document).ready(function() {
// dan ketika pemilihan poli tertentu
$("#no_poli").change(function() {
// ambil no poli
let no_poli = $(this).val();
// lakukan AJAX
$.ajax({
// GET data
type: "GET",
// pada file ambil_dokter.php
url: "ambil_dokter.php",
// data yang di ambil
data: {
no_poli: no_poli,
},
// ketika sukses
success: function(result) {
// tampilkan ke select name nm_dokter
$("select[name='nm_dokter']").html(result);
}
});
});
});
</script>
</body>
</html>Yang perlu di ingat adalah kita harus mengisi value option pada kode di bawah ini :
<!-- Kita perlu mengisi value 1, 2, 3 pada option untuk no poli-->
<select class="form-control w-75 float-end me-5 mt-2" name="no_poli" id="no_poli">
<option value="">--Pilih Poli--</option>
<option value="1">poli kandungan</option>
<option value="2">poli umum</option>
<option value="3">poli gigi</option>
</select>Kode di atas harus sesuai untuk no poli pada value maupun nama poli option, hal ini karena sudah di buat pada tabel tbl_poliklinik pada columns no_poli dan nm_dokter. Semua ini akan bekerja dengan SQL join. Penulis akan membuat file ambil_dokter.php di mana di gunakan untuk mengambil nama dokter sesuai pada poli yang terseleksi pada select dari database server. Kode nya bisa di lihat di bawah ini :
<?php
// koneksi database
$db = new mysqli('localhost', 'root', '', 'latihan');
// cek jika pengguna memilih no poli tertentu
if (isset($_GET['no_poli'])) {
// set parameter
$no_poli = $_GET['no_poli'];
// lakukan query inner join tabel untuk menentukan nama dokter sesuai poli masing masing
$stmt = $db->prepare("SELECT tbl_dokter.nm_dokter FROM tbl_dokter
INNER JOIN tbl_poliklinik ON tbl_dokter.no_poli = tbl_poliklinik.no_poli
WHERE tbl_poliklinik.no_poli = ?");
// lakukan bind param
$stmt->bind_param("i", $no_poli);
// execute query
$stmt->execute();
// dapatkan hasil
$result = $stmt->get_result();
// cek jika hasilnya ada dalam tabel
if ($result->num_rows > 0) {
// init output options
$options = "";
// looping data untuk mendapatkan nama dokter
while ($row = $result->fetch_assoc()) {
$options .= "<option value='" . $row['nm_dokter'] . "'>" . $row['nm_dokter'] . "</option>";
}
// tampilkan
echo $options;
} else {
// untuk cek jika nama dokter tidak ada
echo "<option>Tidak ada dokter yang tersedia</option>";
}
// tutup koneksi mysql
$stmt->close();
}
Pada kode ini :
// lakukan query inner join tabel untuk menentukan nama dokter sesuai poli masing masing
$stmt = $db->prepare("SELECT tbl_dokter.nm_dokter FROM tbl_dokter
INNER JOIN tbl_poliklinik ON tbl_dokter.no_poli = tbl_poliklinik.no_poli
WHERE tbl_poliklinik.no_poli = ?");WHERE pada query di atas agar mengacu pada columns no poli tbl_poliklinik, karena hal ini nilai pada no poli tersebut sama dengan pada columns no poli tbl_dokter. Untuk kemudahan, penulis sudah memberikan komentar pada setiap baris kode di atas agar bisa mengerti alur kerja kode program nya.
Ketika penulis jalankan program nya pada web browser kamu bisa lihat video di bawah ini :
Penutup
Jadi, seperti itulah studi kasus mengenai SQL join pada dropdown auto select. Penulis sudah menaruh kode nya juga pada di sini. Ingat, penulis hanya membagikan studi kasus sql join ini dan cara yang telah di pecahkan mengenai projekan web penulis. Jadi, tidak ada salah nya penulis membagikan cara ini untuk orang lain karena siapa tahu bisa jadi punya masalah mengenai hal ini. Algoritma atau pemecahan masalah pada suatu program setiap programmer pasti berbeda beda. Bila ada kekurangan mengenai tulisan ini mohon maaf dan semoga bermanfaat!
0 Komentar