INPUT DATA TANPA REFRESH DENGAN DATABASE MYSQL I

Dalam hal ini sudah masuk ketingkat pengembangan dasar, jika memang masih diberikan banyak waktu Insya Allah akan kita kembangkan sampai pada level yang tak terbatas..ha.ha..ha ngak ada habisnya ilmu pemrograman ini kecuali kiamat tiba.

Langsung saja dipraktekkan, silahkan input data yang langsung ke koneksi ke database mysql yang sudah disiapkan dibawah ini : jika berhasil maka kita kupas tuntas lagi.

Saatnya pengguna menyiapkan MariaDB atau Mysql dalam hal ini dapat menggunakan Xampp (Apache + MariaDB + PHP + Perl) silahkan mendownload disitus resminya, dan harus sesuai Operasi Sistem (OS) Pengguna, Jika OS nya windows, maka download yang versi untuk windows begitu juga selain windows.

Jika sudah di Install Maka akan muncul kotak module seperti dibawah ini :

 

Pada saat penginstalan Xampp ada pilihan bahasa jika pilihannya Bahasa Inggris maka tampilannya berbahasa inggris begitu juga Bahasa Indonesia, pada prinsipnya yang terpenting pengguna memahami bahasa yang akan digunakan.

Dalam pemberian nama database jangan ada Spasi, jika sudah membuat nama klik Buat (jika tombolnya Bahasa Indonesia), kemudian klik nama database anda untuk anda isi head tablenya. silahkan isi sebagai berikut :

No - INT - 8 (batasan sampai 10 jutaan (10.999.999 = 8 (angka)) setelah itu klik A_I (auto increment = automatis menambah atau menaik)

nama - Varchar - 50

jabatan - Varchar - 25

telepon - char- 14

alamat - Varchar - 60

kelamin - Varchar - 11

kemudian klik kirim atau send, maka selesailah tugas kita dalam hal ini, perhatikan gambar dibawah ini :

jika berhasil dalam pembuatan maka seperti gambar ini :

Jika semua diatas sudah dilakukan silahkan memperhatikan table CRUD Tanpa Refresh I dibawah ini : (anda dapat mencobanya lebih dahulu agar memahami pola & kerangka kerjanya).

Kita akan membuat CRUD Data tanpa refresh II setelah diatas pembahasannya selesai, untuk CRUD Data tanpa refresh II kita akan menggunakan CheckBox atau radio button agar semua dapat terpenuhi hajatnya, tatkala nanti ingin membuat suatu aplikasi berbasis Web akan mudah berkreasi sesuai dengan manifestasi hati dan pikiran.

Table diatas CRUD DATA TANPA REFRESH I penulis menggunakan Bootstrap yakni : Bootstrap.min.js atau Bootstrap.js (pilih salah satunya karena keduanya sama) dan Bootstrap.min.css serta Jquery.min.js maka anda jika ingin praktek langsung silahkan download plugins bootstrap dan plugins Jquery di situs resminya, (walaupun Jquery ada yang menyatakan sudah menjadi framework, hal ini sah-sah saja karena jquery memang sudah menjadi dasar dalam pembuatan plugin, Jangan lupa memperhatikan skrip yang diberikan dan dalam meletakkan Bootstrap.min.css jangan terbalik ya, maksudnya letakkan lebih dahulu Bootstrap.min.css.

Jika ingin download disini untuk Plugin yang dibutuhkan, sudah disiapkan dibawah ini:

Silahkan anda membuat file index.php, sebagai skrip yang pertama, adapun penulisannya dengan menggunakan text editor yang ada dikomputer pengguna, bisa menggunakan notepad++, sublime atau yang lainnya, adapun skripnya dibawah ini :

---

/* Ini Skrip Pertama */

<link rel="stylesheet" href="bootstrap.min.css"> <!--- Bootstrap.min.css diletakkan tidak didalam folder -->
<div class="container">

<h3>CRUD DATA TANPA REFRESH I </h3>

<a href="javaScript:void(0);" data-toggle="modal" data-target="#Increms" 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>Kelamin</th> 
  <th>Aksi</th>
  </tr>

  </thead>
  <tbody id="crudData"></tbody>
  </table>
  </div>

<div class="modal fade" id="Increms" 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</h4>
</div>

<div class="modal-body">

<form id="FormIncrems">
<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" 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" 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" 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" class="form-control">
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="kelamin">Kelamin<span class="field-required">*</span></label>
<input type="text" name="kelamin" id="kelamin" placeholder="Kelamin" class="form-control">
</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_increms.js"></script> <!--- submit_increms.js diletakkan tidak didalam folder -->
<script src="bootstrap.min.js"></script> <!--- Bootstrap.min.css diletakkan tidak didalam folder -->

---

Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER ^(Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya, maka perhatikan dengan benar dan penuh dengan keseriusan dalam memahaminya.

Jika sudah ditulis, Sangat amat bagus ditulis dan jangan sekedar copy paste saja, tidak baik untuk kesehatan otak dan skill, dan simpan dengan nama yang kita sepakati diawal yaitu : index.php, dan jangan lupa letakkan di folder dimana saat menginstall tadi diletakkan jika default, maka letaknya dilocal C: Xampp-htdocs

Kemudian dicek atau dirunning dengan membuka browser mozila Firefox atau chrome kemudian ketik pada tempat urlnya seperti ini : localhost/index.php

Pada skrip ini : class="field-required" ini berfungsi jika tak ada inputan maka menerbitkan kotak peringatan, pengguna juga bisa menggunakan skrip yang lain tanpa harus menggunakan class untuk memanggil filenya, seperti ini : required="required" pengguna juga dapat menambhkan batasan inputan berapa kata yang dapat di input sesuai database saat dibuat, contohnya seperti ini : size="16" maxlength="60", jika dalam penulisannya yang lengkap seperti ini : <input type="text" name="kelamin" id="kelamin" placeholder="Kelamin" required="required" size="16" maxlength="60" class="form-control">, maka kita tidak lagi menggunakan class="field-required", namun dalam hal ini dapat di abaikan dulu, nanti jika ada waktu silahkan mencobanya.

Maka satu file sudah dibuat, kemudian skrip yang kedua, buat file baru lagi dengan nama submit_eksekusi_formincrems.php dan tulis skripnya dibawah ini :

---

/* Ini Skrip Kedua */

<?php

include "connection.php"; <! ---- belum kita buat -->
include_once "submit_eksekusi_formincrems.php"; <!-- File php yang berisi perintah ke Database -->
$DariFormIncrems = new SubmitEksekusiFormIncrems(); <! ---- belum kita buat -->
if ($_POST['crudOperation'] == "simpanData") {
$nama = $_POST['nama'];
$jabatan = $_POST['jabatan'];
$telepon = $_POST['telepon'];
$alamat = $_POST['alamat'];
$kelamin = $_POST['kelamin'];
$ubahId = $_POST['ubahId'];
$simpan = $DariFormIncrems->simpanData
($koneksidb, $nama, $jabatan, $telepon, $alamat, $kelamin, $ubahId);
if ($simpan){
echo "Saved";
}
}

/* ===================MENAMPILKAN DATA PADA KOLOM DIBAWAH HEAD JUDUL TABLE========================== */

if ($_POST['crudOperation'] == "DapatkanData") {
$sr = 1;
$tableData = '';
$SemuaData = $DariFormIncrems->getAllData($koneksidb);
if ($SemuaData->num_rows>0) {
while ($row = $SemuaData->fetch_object()) {
$tableData .= ' <tr>
<td>'.$sr.'</td>
<td>'.$row->nama.'</td> <!-- nama dari database yang dibuat begitu juga jabatan sampai dengan kelamin -->
<td>'.$row->jabatan.'</td>
<td>'.$row->telepon.'</td>
<td>'.$row->alamat.'</td>
<td>'.$row->kelamin.'</td>
<td><a href="javaScript:void(0)" onclick="ubahData
(\''.$row->No.'\',\''.$row->nama.'\',\''.$row->jabatan.'\',\''.$row->telepon.'\',\''.$row->alamat.'\',\''.$row->kelamin.'\');" 
class="btn btn-success btn-sm">ubah</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;
}
/*============== BATAS MENAMPILKAN DATA SELESAI ========================*/

<!--- HAPUS DATA (DELETE DATA) -->
if ($_POST['crudOperation'] == "HapusData"){
$deleteId = $_POST['deleteId'];
$hapus = $DariFormIncrems->HapusData($koneksidb,$deleteId);
if ($hapus){
echo "Hapus";
}}
 
?> 

---

Tahapan file kedua sudah selesai perhatikan huruf tebal dan warna karena itu saling terhubung, langkah selanjutnya kita membuat koneksi ke database lebih dahulu, dengan database yang sudah dibuat sebelumnya yang sudah diberi nama oleh pengguna. Dalam pembuatan nama koneksi ini sebaiknya kita sepakati bersama dulu yakni dengan nama connection.php dan ini harus sepakat karena kita sudah meletakkan nama tersebut di skrip kedua diatas. pada include "connection.php"; adapun skripnya pada file ketiga ini sebagai berikut :

---

/* Ini Skrip Ketiga*/

<?php

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

---

Maka Selesailah 3 file php, kemudian untuk langkah selanjutnya yakni ke empat dengan membuat file perintah untuk CRUD (Create ^Membuat, Read ^Membaca, Update ^menambah, Delete ^Menghapus, yang dikoneksikan kedatabase mysql atau MariaDB, namun sebelum kita lanjut hati-hati dalam penulisan karena skrip diatas terhubung dengan JAVASCRIPT, semua sudah tahu JAVASCRIPT sangat sensitif dalam penulisan besar maupun kecil apalagi berbeda.

Silahkan untuk membuat file yang ke empat dengan nama submit_eksekusi_formincrems.php (ingat .php itu sebagai type file) dan harus nama itu, mengingat kita sudah memasukan pada di skrip kedua diatas. jikapun di ubah sebenarnya tidak apa-apa asal pengguna benar-benar memahami bahasa pemrograman, namun sebaiknya nanti saja di ubah, agar dalam prakteknya jika mengalami kegagalan mudah mencari kesalahannya.

Adapun skrip yang ke empat sebagai berikut :

---

/* Ini Skrip Ke Empat*/

<?php

/* Ubah Data dan TambahData */
class SubmitEksekusiFormIncrems
{
public function simpanData

($koneksidb, $nama, $jabatan, $telepon, $alamat, $kelamin, $ubahId)
{
if ($ubahId== "") {
$query = "INSERT INTO Nama_Database_Anda SET nama='$nama', jabatan='$jabatan', telepon='$telepon', alamat='$alamat', kelamin='$kelamin'";
}else{
$query = "UPDATE Nama_Database_Anda SET nama='$nama', jabatan='$jabatan', telepon='$telepon', alamat='$alamat', kelamin='$kelamin' 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 Nama_Database_Anda";
$result = $koneksidb->query($query) or die("Menampilkan Data Bermasalah".$koneksidb->error);
return $result;
}
/* ==================== */

/* ----Eksekusi Hapus data di Database------*/
public function HapusData($koneksidb,$deleteId){
$query = "DELETE FROM Nama_Database_Anda WHERE No='$deleteId'";
$result = $koneksidb->query($query) or die("Menampilkan Data Bermasalah".$koneksidb->error);
return $result;
}
}
?>

---

Jika sudah kita langsung kepada tahapan terakhir atau yang kelima, tahapan yang kelima ini merupakan skrip javascript, maka harus berhati-hati dalam penulisannya, silahkan buat file dengan nama submit_increms.js, inipun anda harus memberi nama demikian karena sudah kita sisipkan skrip ini pada skrip yang pertama yakni di file index.php kemudian tulislah skrip dibawah ini :

---

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

});

$("form#FormIncrems").on
("submit",function (e) {e.preventDefault();
var nama = $("#nama").val();
var jabatan = $("#jabatan").val();
var telepon = $("#telepon").val();
var alamat = $("#alamat").val();
var kelamin = $("#kelamin").val();
var 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 if (kelamin == "") {
alert("Silahkan masukan jenis kelamin");
$("#kelamin").focus();
}else{
$("#buttonLabel").html("Simpan..");
$("#spinnerLoader").show('fast');
$.post("submit_php_formincrems.php",{
crudOperation:"simpanData",
nama:nama,
jabatan:jabatan,
telepon:telepon,
alamat:alamat,
kelamin:kelamin,
ubahId:ubahId,
},function (response) {
if (response == "Saved") {
$("#buttonLabel").html("Simpan");
$("#spinnerLoader").hide('fast');
$("#Increms").modal('hide');
$("form#FormIncrems").each(function () { this.reset(); });
getAllData();
}
});
}
});
/* Menampilkan Data */

function getAllData() {
$.post("submit_php_formincrems.php",{crudOperation:"DapatkanData"},

function (SemuaData) {
$("#crudData").html(SemuaData);
});
}
/* Batasan Menampilkan data */
function ubahData
(ubahId, nama, jabatan, telepon, alamat, kelamin) {
$("#ubahId").val(ubahId);
$("#nama").val(nama);
$("#jabatan").val(jabatan);
$("#telepon").val(telepon);
$("#alamat").val(alamat);
$("#kelamin").val(kelamin);
$("#Increms").modal('show');
}

function HapusData(deleteId) {
if(confirm("Apakah Anda Yakin Menghapus Data ?")){
$('#deleteSpinner'+deleteId).show('fast');
$.post("submit_php_formincrems.php",

{crudOperation:"HapusData", deleteId:deleteId}, 
function (response) {
if (response == "Hapus") {
$('#deleteSpinner'+deleteId).hide('fast');
getAllData();
} }); } }

Skrip diatas merupakan skrip javascript yang dikemas dalam Jquery, silahkan jika anda ingin mengenal jquery dapat mengunjunginya disini : Sekedar tahu Jquery.

Maka selesailah projek kita dan silahkan dijalankan projeknya dan semoga sukses.