#Ajax - #PHP

Membuat CRUD menggunakan Ajax PHP – Input Data

By Muzanni
5 January 2024
Ajax PHP

Membuat crud menggunakan ajax php dalam operasi input data. Artikel ini dilanjutkan dari materi sebelumnya yang membahas bagaimana cara menampilkan data menggunakan ajax dan php.

Ajax atau ajax jquery merupakan fitur untuk membuat aplikasi/website tanpa reload. Ajax sendiri dikenal sangat ringan dan sangat bagus jika digunakan proses development aplikasi.

Membuat CRUD menggunakan Ajax PHP – Input Data

Pada artikel part ini kita membahas bagaimana membuat CRUD dengan ajax jquery pada operasi input data kedalam database mysql. Untuk sobat yang masih belum mengerti tahapan saya rekomendasikan untuk membaca part sebelumnya membuat crud denan ajax php – menampilkan data.

Untuk membuat inpu data menggunakan ajax ada tahapannya tersendiri yang bisa dilakukan. Mulai dari persipaan form dan juga proses input data dalam database. Ikuti langkah-langkah berikut untuk lebih jelasnya dalam input data menggunakan ajax jquery.

Persiapan Form Inputan

Langkah awal yaitu mempersiapkan form inputan yang menampung data apa saja yang diperlukan. Misalnya disini Kita memerlukan identitas user berupa nama, kelamin, kontak dan alamat. Untuk membuat form inputan bisa dilihat dari script dibawah ini :

</div>

<label>Jenis Kelamin</label>

<option>--pilih--</option>

<option value="perempuan">Perempuan</option>

</select>

</div>

<label>Kontak</label>

</div>

<label >Alamat</label>

</div>

<button type="submit" id="tombol_simpan" class="btn btn-primary">Submit</button>

</div>

</form>

Jika dilihat pada script diatas ada yang tidak biasa, dimana pada biasanya dalam membuat form input data menggunakan php ada aksi dan model pengiriman data yang digunakan. Namun pada form yang kita buat ini hanya ditandai dengan id yaitu form_input (<form id="form_input">).

Nah id inilah yang dikirim dan akan ditampung menggunakan javascript untuk membuat input data. Juga dapat dilihat pada setiap item data di tandai oleh id misalnya : <input type="text" class="form-control" id="nama" name="nama" placeholder="Nama"> ini maksudnya adalah untuk menampung data dari nama itu sendiri. Begitu juga dengan lainnya.

Untuk script lebih lengkap dalam membuat Saya lampirkan pada script berikut ini :

<!DOCTYPE html>

<head>

<title>Malasngoding.com - CRUD AJAX PHP MYSQLI </title>

</head>

<body>

<br>

<center><h2>CRUD AJAX PHP MYSQLI - INPUT DATA</h2></center>

</div>

<label>Jenis Kelamin</label>

<option>--pilih--</option>

<option value="perempuan">Perempuan</option>

</select>

</div>

<label>Kontak</label>

</div>

<label >Alamat</label>

</div>

<button type="submit" id="tombol_simpan" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</div>

</body>

integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

$(document).ready(function () {

tampil_data();

});

//fungsi tampil data

function tampil_data() {

$.ajax({

url: 'data.php',

type: 'get',

success: function(data) {

$('#tampil_data').html(data);

}

});

}

</script>

</html>

Tampilannya dari hasil script diatas dapat dilihat pada gambar berikut ini :

Proses Input Data Dengan Ajax Jquery

Tahap kedua yaitu membuat proses inputan dengan Ajax. Berikut script ajax untuk menangkap data yang akan di proses. Perhatikan script berikut ini :

$("#tombol_simpan").click(function () {

//validasi form

$('#form_input').validate({

rules: {

nama: {

required: true

kelamin: {

required: true

kontak: {

required: true

alamat: {

required: true

}

submitHandler: function (form) {

$.ajax({

type: 'POST',

url: "simpan.php",

data: $('#form_input').serialize(),

success: function () {

//setelah simpan data, update data terbaru

tampil_data()

}

});

//kosongkan form nama dan jurusan

document.getElementById("nama").value = "";

document.getElementById("kelamin").value = "";

document.getElementById("kontak").value = "";

document.getElementById("alamat").value = "";

return false;

}

});

Berikut penjelasan singkat yang bisa membantu sobat malasngoding dalam memahi codingan :

$("#tombol_simpan").click(function () { script ini dijalankan ketika tombol simpan di klik. #tombol_simpan adalah id dari tombol simpan yang kita buat pada form inputan diatas.
$('#form_input').validate({ script ini digunakan untuk menangkap data yang ada dalam form dan di cek validasinya.
rules: { ini adalah script untuk kita buat aturan dimana jika salah satu data kosong maka tidak bisa di proses. Artinya data akan di proses jika sudah lengkap
submitHandler: function (form) { ini adalah script untuk menghandle inputan data yang akan disimpan dalam database.

Adapun penjelasan script untuk proses ajax jquery dalam menyimpan data adalah sebagai berikut :

$.ajax({

type: 'POST',

url: "simpan.php",

data: $('#form_input').serialize(),

success: function () {

//setelah simpan data, update data terbaru

tampil_data()

}

});

Tipe yang digunakan untuk proses inputan menggunakan POST, url-nya simpan.php sedangkan data yang disimpan sesuai dengan data pada form. nah jika proses penyimpanan berhasil maka akan dijalankan fungsi tampil data.

Untuk script menyimpan data menggunakan php dalam hal ini file simpan.php adalah sebagai berikut :

<?php

include('koneksi.php');

$nama = $_POST['nama'];

$kelamin = $_POST['kelamin'];

$kontak = $_POST['kontak'];

$alamat = $_POST['alamat'];

mysqli_query($koneksi,"insert into user values(NULL,'$nama','$kelamin','$kontak','$alamat')");

Langkah pertama yaitu memasukkan (include) koneksi, selanjutnya menampung semua data yang ada pada form, dan terakhir yaitu perintah sql untuk input data.

script lengkapnya dapat dilihat ada kolom berikut :

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!DOCTYPE html>

<head>

<title>Malasngoding.com - CRUD AJAX PHP MYSQLI </title>

</head>

<body>

<br>

<center><h2>CRUD AJAX PHP MYSQLI - MENAMPILKAN DATA</h2></center>

</div>

<label>Jenis Kelamin</label>

<option>--pilih--</option>

<option value="perempuan">Perempuan</option>

</select>

</div>

<label>Kontak</label>

</div>

<label >Alamat</label>

</div>

<button type="submit" id="tombol_simpan" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

</div>

</body>

integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

$(document).ready(function () {

tampil_data();

});

//fungsi tampil data

function tampil_data() {

$.ajax({

url: 'data.php',

type: 'get',

success: function(data) {

$('#tampil_data').html(data);

}

});

}

$("#tombol_simpan").click(function () {

//validasi form

$('#form_input').validate({

rules: {

nama: {

required: true

kelamin: {

required: true

kontak: {

required: true

alamat: {

required: true

}

// alert(nama);

//jika validasi sukses maka lakukan

submitHandler: function (form) {

$.ajax({

type: 'POST',

url: "simpan.php",

data: $('#form_input').serialize(),

success: function () {

//setelah simpan data, update data terbaru

tampil_data()

}

});

//kosongkan form nama dan jurusan

document.getElementById("nama").value = "";

document.getElementById("kelamin").value = "";

document.getElementById("kontak").value = "";

document.getElementById("alamat").value = "";

return false;

}

});

</script>

</html>

Itulah gambar hasil dari input data menggunakan ajax jquery dan php. Supaya lebih muda di pahami cobalah membaca dari artikel part sebelumnya.

Muzanni

Algorithms Learner, future lecturer and Happy to sharing about knowledge

Tags: ajax adalah, ajax crud javascript, belajar ajax jquery php, contoh ajax jquery, crud adalah, crud ajax jquery, crud ajax php, crud modal ajax, Membuat CRUD Dengan Ajax PHP, membuat crud tanpa reload dengan php, menampilkan data menggunakan ajax, menampilkan data tanpa reload php

Whatsapp	0896-0676-7404
Email	malasngoding@gmail.com

Membuat CRUD menggunakan Ajax PHP – Input Data

Membuat CRUD menggunakan Ajax PHP – Input Data

Persiapan Form Inputan

Proses Input Data Dengan Ajax Jquery

Tutorial Menarik Lainnya

Membuat CRUD menggunakan Ajax PHP – Hapus Data

Membuat CRUD menggunakan Ajax PHP – Menampilkan Data

Membuat Select Option Dinamis Menggunakan Ajax

Membuat Halaman Web Ajax Tanpa Reload dengan JQuery

Diskusi

Belum Ada Diskusi

Download Ebook belajar HTML & CSS dasar untuk pemula gratis.