Insert Data ke Database dengan JQuery, Bootstrap dan Ajax

sample pen insert data ajax

FSodic.com - Selamat pagi mblo, gimana kabarnya semua?
Semoga baik selalu pastinya . Sudah lama ya saya tidak hadir mengisi blog ini. Namun sekarang sudah bisa aktif kembali. Ada beberapa pertanyaan di inbox facebook saya yang bertanya mengapa blog ini seperti tak terpakai. Nah, itu salah ya mblo. Blog ini udah ada rencana akan saya isi semenjak bulan Desember 2018 tapi masih ada yang kurang di panel blognya yang sekaligus saya rebuild hingga menyesuaikan dengan php versi baru php7++.

Oke kita langsung masuk ke pembahasan posting aja ya. Sebenarnya ini sudah saya share di Halaman Pen saya berjudul Insert Data to Database using JQuery, Bootstrap and Ajax. Tapi berhubung hanya ada source code disana, jadi saya akan jelaskan pembuatannya disini.

Oke kita buat 4 file dulu seperti ini:
1. index.php
2. daftar_produk.php
3. database.php
4. submit.php

Nah lalu dimana databasenya? kalian bisa langsung mengambil dibawah ini:

1. index.php:
File ini adalah bagian untuk menampilkan daftar dalam table sekaligus tempat form input ke table.

Disini kita menggunakan Bootstrap CSS untuk tampilan dan Glyphicon untuk font icon-nya. Lalu kita gunakan juga JQuery dan Bootstrap sebagai framework Javascript kita.

2. daftar_produk.php:
File ini berfungsi menampilkan daftar dalam table, kita akan gunakan contoh bahwa kita akan membuat daftar barang disebuah toko.

File ini akan menampilkan daftar produk yang sudah kita input didatabase sekaligus file yang akan kita load secara real time setelah ada input baru. Artinya kita tidak perlu mereload halaman kita untuk menampilkan lagi produk barang apabila ada yang baru.

3. database.php:
File ini adalah penghubung antara database dengan php kita.

Kegunaan file ini adalah untuk menghubungkan php dengan database tetapi tidak harus menulis berulang kali melainkan hanya perlu memanggil setiap kita perlukan.

4. submit.php:
File ini adalah bagian untuk mengirimkan input dari form ke dalam database.

Oke cukup sekian dari saya kali ini mblo, kita ketemu lagi minggu depan diblog yang sama. Untuk teman-teman yang ingin langsung melihat source code dan mendownload source code ini bisa lihat di pen saya disini.