CRUD TANPA REFRESH DENGAN SELECT

Pembahasan yang ke empat ini sebagai pelengkap untuk kebutuhan pemrograman bagi yang ingin menggunakannya, yakni : Input data tanpa refresh dengan select ke database mysql IV, adapun pola dan kerangka kerja tidak jauh berbeda silahkan untuk mencobanya lebih dahulu, pada bentuk rupa perwujudannya dibawah ini :

Catatan : untuk select kita buat dengan menggunakan 2 cara, yakni : menggunakan cara pemrograman php dan Jquery, kemudian kita tambahkan window.location.reload(false); (untuk merefresh halaman pada tombol skrip yang di inginkan, jika false=reload/refresh via cache, jika true= reload via server).

Silahkan membaca tentang : Makanan yang dapat mencegah dan mengobati kanker usus & kanker ganas atau cara membesarkan alat vital pria secara permanen & aman serta kuat, keras dan tahan lama kualitas khasiat bermutu tinggi.

Ada beberapa skrip javascript untuk refresh atau reload page (halaman) seperti dibawah ini:

"document.location.reload(true);"
"self.location.replace(location['href'])"
"window.location = location"
"window.location = location.href"
"self.location.assign(window.location)"
"location['replace'](window.location)"
"location.assign(self.location.href)"
"location.replace(self.location.href)"
"history.go(0);"

Table CRUD Tanpa Refresh dengan select ke database mySQL IV

CRUD DENGAN SELECT

     Tambah Data

Sebelum dilanjutkan bagi yang belum mengikuti pembahasan sebelumnya silahkan mengunjungi artikel dibawah ini :

Input data tanpa refresh dan tanpa database

Input data tanpa refresh dan tanpa database menggunakan table

Input data tanpa refresh dengan database MySQL I

Input data tanpa refresh dengan radio Button ke database MySQL II

Bagi yang sudah mengikuti artikel sebelumnya, silahkan melanjutkan artikel ini pada skrip dibawah ini :

Membuat database, jika sudah ada, maka cukup membuat tabel database seperti dibawah ini :

 

Kemudian kita akan membuat 5 file yakni 4 file bertipe php dan 1 file bertipe js (javascript).

Adapun skrip pengoneksian database sebenarnya sudah kita bahas yakni : connection.php,, tak apa-apa kita include kan disini :

*Skrip - Skrip CRUD BAB IV*

/*Skrip Database*/

Simpan dengan nama connection.php

<?php
  $koneksidb = new mysqli("localhost","root","","Nama_Database_Anda");
if (!$koneksidb){die("Error Koneksi !!!".$koneksidb->connect_error);}  ?>

---

/* Skrip Pertama */

Skrip Table yang meliputi Select dengan PHP dan Select menggunakan Javascript (Jquery), Disinilah skrip untuk aktivitas CRUD.

Silahkan beri nama file dengan submit_empat_tanpa_refresh.php atau sesuai isi hati dan pikiran untuk memberi nama yang anda akan berikan dan jangan lupa meletakkan skrip untuk file pendukungnya seperti : Jquery.min.js dan juga file javascript yang akan dibuat nantinya.

<?php
$Spendidikan=isset($_POST['Spendidikan']) ?$_POST['Spendidikan']: '';
?>
<div class="container">
<a href="javaScript:void(0);" data-toggle="modal" data-target="#EmpatIncrems" class="btn btn-primary pull-right bottom-gap" >Tambah Data <i class="fa fa-plus" aria-hidden="true"></i></a>
<table class="table table-bordered">
<thead id="thead" style="background-color:#92938E">
<tr>
<th>No</th>
<th>Nama</th>
<th>Jabatan</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Jenis Kelamin</th> 
<th>Status Nikah</th> 
<th>Pendidikan</th>
<th>Gol Darah</th> 
<th>Aksi</th>
</tr>
</thead>
<tbody id="crudDataEmpat"></tbody>
</table>
</div>

<div class="modal fade" id="EmpatIncrems" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>Create-Read-Update-Delete <sup>(CRUD)</sup><br>Tanpa Refresh Dengan Select</h4>
</div>
<div class="modal-body">

<form id="EmpatFormIncrems">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label for="nama">Nama Karyawan <!--<span class="field-required">*</span> --></label>
<input type="text" name="nama" id="nama" placeholder="Nama Karyawan" size="20" maxlength="50" required="required" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="jabatan">Jabatan <span class="field-required">*</span></label>
<input type="text" name="jabatan" id="jabatan" placeholder="Jabatan" size="20" maxlength="25" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="telepon">Telepon<span class="field-required">*</span></label>
<input type="text" name="telepon" id="telepon" placeholder="Telepon" size="14" maxlength="15" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="alamat">Alamat<span class="field-required">*</span></label>
<input type="text" name="alamat" id="alamat" placeholder="Alamat" size="20" maxlength="100" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="kelamin">Kelamin<span required="required">*</span></label>
<input type="checkbox" name="kelamin" id="kelamin" value="Perempuan">
Perempuan 
<input type="checkbox" name="kelamin" id="kelamin" value="Laki-Laki">
Laki-Laki 
</div>
</div> 
                       
<div class="col-md-8">
<div class="form-group">
<label for="radio">Status Nikah<span>*</span></label>
<input type="radio" name="radio" id="radio" value="Belum Menikah" required="required">
Belum nikah
<input type="radio" name="radio" id="radio" value="Menikah" required="required">
Menikah
</div>
</div>        
            
<div class="col-md-8">
<div class="form-group">
<label for="Spendidikan">Pendidikan*</label> 
<select name="Spendidikan" autofocus="autofocus" required="required" id="Spendidikan">
<option value="" selected="selected">Pendidikan Terakhir</option>
<?php
$pendidikan = array( "Sekolah Dasar", "SMP", "SMA", "Diploma", "Sarjana-S1", "Master Sarjana-S2");
foreach ($pendidikan as $nilai) {
if ($Spendidikan == $nilai) {
$cek="selected";
} else { $cek = ""; }
echo "<option value='$nilai' $cek>$nilai</option>";
}
?> 
</select> 
</div>
</div>          
                
<div class="col-md-8">
<div class="form-group">          
<label for="Gdarah">Pendidikan*</label>             
<select id="Gdarah" required="required">
<option>Golongan Darah</option>
<option>A</option>
<option>O</option>
<option>B</option>
<option>AO</option>
</select>
</div>
</div>             
</div>
<div class="row">
<div class="col-md-8">
<input type="hidden" name="ubahId" id="ubahId" value="" /> 
<button type="submit" name="submitBtn" id="submitBtn" class="btn btn-primary"><i class="fa fa-spinner fa-spin" id="spinnerLoader"></i> <span id="buttonLabel">Simpan</span> </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>

<script src="jquery.min.js"></script> <!--- jquery.min.js diletakkan tidak didalam folder -->
<script src="submit_empat_increms.js"></script> <!--- submit_increms.js diletakkan tidak didalam folder -->
<script src="bootstrap.min.js"></script> <!--- Bootstrap.min.js diletakkan tidak didalam folder -->

//Jika belum memilikinya silahkan download disini : 
// Input data tanpa refresh dengan database MySQL I

Adapun pada file kedua yakni pengoneksian ke database, adapun skripnya sebagai berikut :

Jika ada perbedaan skrip dari pembahasan pada artikel sebelumnya, memang sengaja dilakukan, agar membuka cakrawala berpikir, hingga semakin mudah untuk memahaminya.

/*SKRIP KEDUA*/

Dalam hal nama file tabel database silahkan mengikuti pembahasan sebelumnya yaitu : connection.php, sedangkan nama file dibawah ini, beri dengan nama :

 submit_empat_eksekusi_formincrems.php

dan tabel database dengan nama : increms_ke_empat (nama ini sesuai sewaktu anda membuatnya)

<?php
class SubmitEksekusiEmpat
{
public function taruhData($koneksidb,$nama,$jabatan,$telepon,$alamat,$kelamin,$nikah,$Spendidikan,$Gdarah,$ubahId)
{
if ($ubahId ==""){
$query = "INSERT INTO increms_ke_empat SET nama='$nama', jabatan='$jabatan', telepon='$telepon', alamat='$alamat', kelamin='$kelamin', nikah='$nikah', pendidikan='$Spendidikan', darah='$Gdarah'";
}
$result = $koneksidb->query($query) or die("Penyimpanan Data Bermasalah".$koneksidb->error);
return $result;
}

public function ubahData($koneksidb,$nama,$jabatan,$telepon,$alamat,$kelamin,$nikah,$Spendidikan,$Gdarah,$ubahId)
{
if ($ubahId >="1"){
$query = "UPDATE increms_ke_empat SET nama='$nama', jabatan='$jabatan', telepon='$telepon', alamat='$alamat', kelamin='$kelamin', nikah='$nikah', pendidikan='$Spendidikan', darah='$Gdarah' WHERE No='$ubahId'"; 
}
$result = $koneksidb->query($query) or die("Penyimpanan Data Bermasalah".$koneksidb->error);
return $result;
}

/* Menampilkan Data */
public function getAllData($koneksidb)
{
$query = "SELECT * FROM increms_ke_empat";
$result = $koneksidb->query($query) or die("Menampilkan Data Bermasalah".$koneksidb->error);
return $result;
}
/* Batasan Menampilkan Data */
public function HapusData($koneksidb,$deleteId){
$query = "DELETE FROM increms_ke_empat WHERE No='$deleteId'";
$result = $koneksidb->query($query) or die("Menampilkan Data Bermasalah".$koneksidb->error);
return $result;
}}
?>

 

---

/*SKRIP KETIGA*/

Skrip Javascript yang mengoneksi atau sebagai jembatan ke CRUD dan ke Database serta file PHP, silahkan beri nama "submit_empat_increms.js" (simpan ke type js)

$(document).ready(function() {
getAllData();
});

$("form#EmpatFormIncrems").on("submit",function (e) {e.preventDefault();
let nama = $("#nama").val();
let jabatan = $("#jabatan").val();
let telepon = $("#telepon").val();
let alamat = $("#alamat").val();
let kelamin = $("input[type='checkbox']:checked").val();
let nikah = $("input[type='radio']:checked").val();
let Spendidikan = $("#Spendidikan option:selected").val();
let Gdarah = $("#Gdarah option:selected").val();
let ubahId = $("#ubahId").val();

if (nama == ""){
alert("Silahkan masukan data nama");
$("#nama").focus(); 
}else if (jabatan == "") {
alert("Silahkan masukan data jabatan");
$("#jabatan").focus();
}else if (telepon == "") {
alert("Silahkan masukan nomor telepon");
$("#telepon").focus();
}else if (alamat == "") {
alert("Silahkan masukan alamat");
$("#alamat").focus();
}
else  { 
$("#buttonLabel").html("Simpan");
$("#spinnerLoader").show('fast');
$.post("submit_empat_php_formincrems.php",{
crudOperation:"taruhData",
nama:nama,
jabatan:jabatan,
telepon:telepon,
alamat:alamat,
kelamin:kelamin,
nikah:nikah,
Spendidikan:Spendidikan,
Gdarah:Gdarah,
ubahId:ubahId,
},function (response) {
if (response == "Saved") 
{
$("#buttonLabel").html("Simpan");
$("#spinnerLoader").hide('fast');
$("#EmpatIncrems").modal('hide');
$("form#EmpatFormIncrems").each(function () { this.reset(); });
getAllData();
}
}); 
} 
}); 
// Dipasahkan untuk merubah data 
$("form#EmpatFormIncrems").on("submit",function (e) {e.preventDefault();
let nama = $("#nama").val();
let jabatan = $("#jabatan").val();
let telepon = $("#telepon").val();
let alamat = $("#alamat").val();
let kelamin = $("input[type='checkbox']:checked").val();
let nikah = $("input[type='radio']:checked").val();
let Spendidikan = $("#Spendidikan option:selected").val(); 
let Gdarah = $("#Gdarah option:selected").val(); 
let ubahId = $("#ubahId").val();
$("#buttonLabel").html("Simpan");
$("#spinnerLoader").show('fast');
$.post("submit_empat_php_formincrems.php",{
crudOperation:"ubahData",
nama:nama,
jabatan:jabatan,
telepon:telepon,
alamat:alamat,
kelamin:kelamin,
nikah:nikah,
Spendidikan:Spendidikan,
Gdarah:Gdarah,
ubahId:ubahId,

},function (response) {
if (response == "Saved") 
{

$("#buttonLabel").html("Simpan");
$("#spinnerLoader").hide('fast');
$("#EmpatIncrems").modal('hide');
$("form#EmpatFormIncrems").each(function ()  { this.reset(); });
getAllData();
window.location.reload(false); // Berfungsi jika ingin menggunakan reload halaman (true)
}
}); 
}); 
/* Menampilkan Data */
function getAllData() {
$.post("submit_empat_php_formincrems.php",{crudOperation:"DapatkanData"},function (SemuaData) {
$("#crudDataEmpat").html(SemuaData);
});
}
function ubahId(ubahId,nama,jabatan,telepon,alamat,kelamin,nikah,pendidikan,darah) {
$("#ubahId").val(ubahId);
$("#nama").val(nama);
$("#jabatan").val(jabatan);
$("#telepon").val(telepon);
$("#alamat").val(alamat);
$("input[type='checkbox']:checked").val(kelamin);
$("input[type='radio']:checked").val(nikah);
$("#Spendidikan option:selected").val(pendidikan);
$("#Gdarah option:selected").val(darah);
$("#EmpatIncrems").modal('show');
}
function HapusData(deleteId) {
if(confirm("Apakah Anda Yakin Menghapus Data ?")){
$('#deleteSpinner'+deleteId).show('fast');
$.post("submit_empat_php_formincrems.php",{crudOperation:"HapusData",deleteId:deleteId},function (response) {
if (response == "Hapus") {
$('#deleteSpinner'+deleteId).hide('fast');
getAllData();
}
});
}}

---

/*SKRIP KE EMPAT */

Adapun yang ke empat sebagai Jembatan untuk ke Database serta ke file CRUD (pertama), silahkan beri nama file :

"submit_empat_php_formincrems.php"

---

<?php
include "connection.php";
include_once "submit_empat_eksekusi_formincrems.php";

$TigaIncremsEmpat = new SubmitEksekusiEmpat();
if ($_POST['crudOperation'] == "taruhData") {
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$telepon = $_POST['telepon'];
$alamat = $_POST['alamat'];
$kelamin = $_POST['kelamin'];
$nikah = $_POST['nikah'];
$Spendidikan = $_POST['Spendidikan'];
$Gdarah = $_POST['Gdarah'];
$ubahId = $_POST['ubahId'];
$simpan = $TigaIncremsEmpat->taruhData($koneksidb,$nama,$jabatan,$telepon,$alamat,$kelamin,$nikah,$Spendidikan,$Gdarah,$ubahId);
if ($simpan){
echo "Saved"; 
}}
/* RUBAH DATA DIPIDAHKAN */
$IncremsEmpat = new SubmitEksekusiEmpat();
if ($_POST['crudOperation'] == "ubahData") {
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$telepon = $_POST['telepon'];
$alamat = $_POST['alamat'];
$kelamin = $_POST['kelamin'];
$nikah = $_POST['nikah'];
$Spendidikan = $_POST['Spendidikan'];
$Gdarah = $_POST['Gdarah'];
$ubahId = $_POST['ubahId'];
$simpan = $IncremsEmpat->ubahData($koneksidb,$nama,$jabatan,$telepon,$alamat,$kelamin,$nikah,$Spendidikan,$Gdarah,$ubahId);

if ($simpan){
echo "Saved";
}}
/* ===================MENAMPILKAN DATA ========================== */
if ($_POST['crudOperation'] == "DapatkanData") {
$sr = 1;
$Kode = '';
$tableData = '';
$SemuaData = $TigaIncremsEmpat->getAllData($koneksidb);
if ($SemuaData->num_rows>0) {
while ($row = $SemuaData->fetch_object()) {
$Kode =$row->No;
$tableData .= ' <tr>
<td>'.$sr.'</td>
<td>'.$row->nama.'</td>
<td>'.$row->jabatan.'</td>
<td>'.$row->telepon.'</td>
<td>'.$row->alamat.'</td>
<td>'.$row->kelamin.'</td>
<td>'.$row->nikah.'</td>
<td>'.$row->pendidikan.'</td>
<td>'.$row->darah.'</td>
<td><a href="javaScript:void(0)" onclick="ubahId (\''.$Kode.'\',\''.$row->nama.'\',\''.$row->jabatan.'\',\''.$row->telepon.'\',\''.$row->alamat.'\',\''.$row->kelamin.'\',\''.$row->nikah.'\',\''.$row->pendidikan.'\',\''.$row->darah.'\');" class="btn btn-success btn-sm">ubah<i class="fa fa-pencil-square-o"></i></a>
<a href="javaScript:void(0)" onclick="HapusData(\''.$row->No.'\');" class="btn btn-danger btn-sm">Hapus</a>
<i class="fa fa-spinner fa-spin" id="deleteSpinner'.$row->No.'" style="color: #ff195a;display: none"></i></td>
</tr>';
$sr++;
}}
echo $tableData;
}
/*======================================*/
if ($_POST['crudOperation'] == "HapusData"){
$deleteId = $_POST['deleteId'];
$hapus = $TigaIncremsEmpat->HapusData($koneksidb,$deleteId);
if ($hapus){
echo "Hapus";
}}
?>

Sedangkan untuk skrip ke 5 (lima) merupakan skrip database, Dalam pembahasan ini kita anggap selesai dan anda dapat mengembangkannya lebih lanjut dalam hal ini, pada dasarnya ini sudah dapat membuat aplikasi untuk skala besar.

Oh iya kenapa menggunakan "var" pada pembahasan sebelumnya, dan sekarang menggunakan "let" pada javascript, apa perbedaan "var" dan "let"?

Jawaban untuk hal ini : karena fungsi peruntukkannya sama dan untuk menambah pengetahuan dalam hal ini, bahwa : Variabel yang dideklarasikan dengan "var" hanya dicakup ke fungsi tetapi variabel yang dideklarasikan dengan " let " atau "const " adalah cakupan blok (blok fungsi, blok if, loop dan lain-lain) serta berdasarkan pengalaman, jika anda menggunakan var dan let secara global tak begitu berbeda fungsinya, namun jika saat membuat aplikasi skala besar dan berbasis BIGDATA serta saling terintegrasi, maka untuk penggunaan "var" kurang baik untuk direkomendasikan karena sifat ruang lingkupnya hanya dicakup difungsi namun aktualnya var bisa kemana-mana (liar), sedangkan "let" lebih luas & selektif, sehingga salah kamar tidak terjadi.

#input data tanpa refresh dengan select php dan select javascript

---