Pada kesempatan kali ini saya akan membahas Cara Menggunakan Plugin Select Bootstrap Dalam PHP. Dalam kasus saat ini Plugin Select Bootstrap yang dipakai untuk membuat multiple select sebuah form. Jadi saat kita bisa pilih beberapa option lebih dari satu pilihan kemudian disimpan kedalam database.Baiklah langsung saja kita mulai untuk membuatnya yuk ikutin langkah-langkah berikut:
Pertama sahabat silahkan membuat tabel baru pada database seperti tampilan dibwah ini:
Kedua buat file baru kemudian ketikkan code dibawah ini lalu beri nama
index.php
<!DOCTYPE html>
<html>
<head>
<title>Cara Menggunakan Plugin Select Bootstrap Dalam PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group">
<form method="post" id="multiple_select_form">
<select name="materi_kursus" id="materi_kursus" class="form-control selectpicker" data-live-search="true" multiple >
<option value="HTML-CSS">HTML CSS</option>
<option value="Bootstrap">Bootstrap</option>
<option value="Codeigniter">Codeigniter</option>
<option value="Laravel">Laravel</option>
<option value="VueJS">Vue JS</option>
<option value="Laravue">Laravel Vue</option>
<option value="PHPMysql">PHP Mysql</option>
</select>
<input type="hidden" name="hidden_framework" id="hidden_framework" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Pada code diatas bisa diperhatikan pada tag head terdapat plugin atau link library bootstrap serta plugin bootstrap select.
Ketiga buat sebuah script untuk menghubungkan proses tambah data atau insert data sesuai pilihan pada select option di form.
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#materi_kursus').change(function(){
$('#hidden_framework').val($('#materi_kursus').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#materi_kursus').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"tambah.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#hidden_framework').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Silahkan Pilih Paket Kursus Anda");
return false;
}
});
});
</script>
pada code diatas terdapat request proses data untuk menambahkan pilihan dari form ke file tambah.php
Selanjutnya kita tambahkan file proses datanya seperti dibawah ini:
<?php
$koneksi = mysqli_connect("localhost", "root", "", "test");
$sql = "INSERT INTO tb_materi(materi) VALUES ('".$_POST["hidden_framework"]."')";
if(mysqli_query($koneksi, $sql))
{
echo 'Data Berhasil Ditambahkan';
}
?>
Jika sudah sahabat semua langsung simpan kedu file diatas kemudian buka pada browser masing-masing dengan mengetikan pada URL
localhost/folder_projek/index.php
Pada gambar diatas adalah tampilan yang sudah kita buat seperti bagian kiri dan jika kita klik pada option maka akan menampilkan semua optionnya.
Saya kira cukup dalam pembahasan artikel kali ini Cara Menggunakan Plugin Select Bootstrap Dalam PHP. Semoga bermanfaat serta dapat membantu teman-teman yang sedang belajar PHP.
terima kasih.
The post Cara Menggunakan Plugin Select Bootstrap Dalam PHP appeared first on Kursus Website Terbaik.