INPUT DATA TANPA REFRESH NON DATABASE
Follow @X_increms
Ditulis Oleh: Alfians Increms April, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi
INPUT DATA TANPA REFRESH & DATABASE
Kali ini penulis mengupas bagaimana cara memasukan data tanpa refresh & tanpa database, pembahasan kali ini dimulai dari awal sampai pada tingkat selanjutnya
Langsung saja dipraktekkan, silahkan input data dibawah ini : jika berhasil maka kita kupas tuntas.
Hasil Data-Data yang Di Input
==============================
Langkah-langkah awal yang harus dilakukan untuk membuat Input Data Tanpa Refresh:
- Silahkan membuat file php dengan nama submit_tanpa_refresh (anggap saja anda sudah memiliki dan membuka komputer) adapun membuatnya bisa menggunakan sublime, notepad++, dreamweaver atau android studio, pada prinsipnya membuat file PHP dengan nama (yang sudah kita sepakati bersama) yaitu : submit_tanpa_refresh.
- Membuat table adapun skripnya sebagai berikut :
- Buat lagi file dengan nama submit, adapun skripnya (php) sebagai berikut:
- langkah berikutnya buatlah file javascript bertipe js dengan nama eksekusi_submit sehingga menjadi eksekusi_submit.js, adapun skripnya sebagai berikut:
- File js tersebut diletakan diatas </head> bersamaan dengan file jquery.js sehinga menjadi seperti dibawah ini :
<!doctype html>Jika sudah dibuat silahkan disimpan dengan nama yang sudah kita sepakati ya, walaupun sebenarnya saya tak tahu apakah anda sepakat atau tidak ?
<html>
<head>
<meta charset="utf-8">
<title>Input Data Tanpa Refresh & Database</title>
</head>
<body> <form id="FormData" method="post">
<table width="367" border="1" class="table table-bordered table-striped text-wrap">
<tbody>
<tr>
<td colspan="2" style="text-align: center"><strong>DATA KARYAWAN</strong></td>
</tr>
<tr>
<td>Nama</td>
<td><input name="nama" type="text" id="nama" placeholder="Nama Karyawan" title="Nama Karyawan" size="40" maxlength="50" /></td>
</tr>
<tr>
<td>Jabatan</td>
<td><input name="jabatan" type="text" id="jabatan" placeholder="Jabatan" title="Jabatan" size="40" maxlength="50" /></td>
</tr>
<tr>
<td>Nomor Telepon</td>
<td><input name="telepon" type="text" id="telepon" placeholder="Nomor Telepon" title="Nomor Telepon" size="40" maxlength="50" /></td>
</tr>
<tr>
<td>Alamat</td>
<td><input name="alamat" type="text" id="alamat" placeholder="Alamat" title="Alamat" size="40" maxlength="50" /></td>
</tr>
<tr>
<td>Kelamin</td>
<td><input name="kelamin" type="radio" value="Perempuan">
Perempuan
<input name="kelamin" type="radio" value="Laki-laki">
Laki-laki <br/></td>
</tr>
<tr>
<td> </td>
<td><input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" /></td>
</tr>
</tbody>
</table> </form> <p> Hasil Data-Data yang Di Input<br/>
==============================</p><br>
<div id="hasil"></div>
</body>
</html>
<?phpJika sudah silahkan disimpan dengan nama submit sehingga menjadi submit.php, jangan lupa untuk mendownload file jquery.js disitus resminya sebagai pendukung saja.
echo $_POST['nama'] . "<br />";
echo $_POST['jabatan'] . "<br />";
echo $_POST['telepon'] . "<br />";
echo $_POST['alamat'] . "<br />";
echo $_POST['kelamin'] . "<br />";
echo "==============================<br />";
echo "Semua data berhasil di eksekusi!";
?>
Jika sudah silahkan disimpan dengan tipe file js.
function SubmitFormData() {
var nama = $("#nama").val();
var jabatan = $("#jabatan").val();
var telepon = $("#telepon").val();
var alamat = $("#alamat").val();
var kelamin = $("input[type=radio]:checked").val();
$.post("submit.php", { nama: nama, jabatan: jabatan, telepon: telepon, alamat: alamat, kelamin: kelamin },
function(data) {
$('#hasil').html(data);
$('FormData')[0].reset();
});
}
<!doctype html>Jika anda masukan file tersebut didalam folder misalnya folder plugin maka skripnya menjadi seperti ini : <script src="plugin/eksekusi_submit.js"></script> , bila semua sudah dilakukan maka silahkan eksekusi dan semoga berhasil ya.
<html>
<head>
<meta charset="utf-8">
<title>Input Data Tanpa Refresh & Database</title> <script src="jquery.js"></script> <script src="eksekusi_submit.js"></script>
</head>
<body>
INPUT DATA TANPA REFRESH dengan table
Input data tanpa refresh halaman dengan table merupakan projek lanjutan dari pembahasan diatas, perbedaanya posisi hasil data berada dalam table yang sudah disiapkan seperti contoh dibawah ini:
| HASIL DATA KARYAWAN | |
| Nama | |
| Jabatan | |
| Nomor Telepon | |
| Alamat | |
| Kelamin | |
| @Salam team Xflash | |
function SubmitFormDataTable() {
var namakaryawan = $("#namakaryawan").val();
var jabatankaryawan = $("#jabatankaryawan").val();
var teleponkaryawan = $("#teleponkaryawan").val();
var alamatkaryawan = $("#alamatkaryawan").val();
var kelaminkaryawan = $("input[type=radio]:checked").val();
$.post("submit_table.php", { namakaryawan: namakaryawan, jabatankaryawan: jabatankaryawan, teleponkaryawan: teleponkaryawan, alamatkaryawan: alamatkaryawan, kelaminkaryawan: kelaminkaryawan },
function(data) {
$("#hasilnama").html(namakaryawan);
$("#hasiljabatan").html(jabatankaryawan);
$("#hasiltelepon").html(teleponkaryawan);
$('#hasilalamat').html(alamatkaryawan);
$('#hasilkelamin').html(kelaminkaryawan);
$('FormDataTable')[0].reset();
});
}
Sehingga untuk menerbitkannya di dalam table, hanya meletakkan <div id="hasilnama"> </div> didalam kolom table yang sudah dibuat, disesuaikan dengan file javascriptnya yakni :
- <div id="hasilnama"> </div>
- <div id="hasiljabatan"> </div>
- <div id="hasiltelepon"> </div>
- <div id="hasilalamat"> </div>
- <div id="hasilkelamin"> </div>
Seperti table praktek diatas yang sudah penulis buatkan sebagai hasil pembuktian kerja skripnya berfungsi dengan baik, kenapa skrip kedua ini nama jadi ada tambahan namakaryawan yang lainnya juga begitu dan termasuk SubmitFormDataTable(), ini dilakukan semata-mata agar tidak berbenturan dengan form sebelumnya, oleh sebab itu dibedakan namanya.
Jika ingin melanjutkan ke tahap pengembangan bisa mengunjungi link disini Input data tanpa refresh dengan database mysqli
Input Data Tanpa Refresh Dengan Database MYSQL
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
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
