ASANOER.COM – CARA MEMBUAT CRUD DENGAN AJAX JQUERY DENGAN GAYA BOOTSTRAP

Lagi-lagi unek-unek itu muncul secara langsung. Jadi, langsung buka laptop dan posting artikel menarik ini.

Inilah demo dari artikel ini. Supaya Anda tertarik…

DEMO CRUD ASANOER.COM

Tidak Mau Pusing Baca Artikel? Silahkan Saja Download File Yang Disertakan Dalam Demo Di atas.

Latar Belakang

Seperti yang sudah disebutkan, latar belakang penulisan ini hanya karena nafsu sendiri di saat menyendiri, hehehe. Tapi yang jelas hasil dari kesendirian tersbut saya tuangkan sendiri dengan apik di sini.

CRUD atau istilah keren dari membuat (Create), membaca (Read), mengubah (Update), dan yang terkahir yaitu menghapus (Delete) adalah sekumpulan kata yang tidak terpisahkan pada pengolahan data. Dan memang saat saya dan tentunya Anda sedang membaca tulisan ini, maka kita tentunya tidak terlepas dari kata-kata tersebut. Memang proses yang paling banyak digunakan kita adalah Read karena memang Read itu memang mudah prosesnya dan merupakan makanan kita setiap harinya. Karena kita tidak menyadari kalau kita setiap hari akan membaca dan membaca dunia ini (iQra), ya sesuai dengan perintahNya. Dan yang paling banyak dipakai yang kedua adalah Update, mengapa demikian? Karena sarana update adalah sarana untuk mengubah suatu data yang sudah terbentuk, jadi saya masukkan peringkat yang ke dua. Dan juga pasti kita menyadari dari pada membuat lagi mending dibenerin itu yang sudah terbentuk. Hal yang sudah terbentuk pasti akan susah kita hilangkan. Ya karena itu create menempati pada posisi yang ketiga setelah update. Pembentukan atau create adalah masalah yang berat, karena kita perlu modal untuk melaksanaakannya yaitu baik modal waktu juga perlu modal materi dan juga modal pikiran yang tidak sedikit. Delete memang sangat mudah dilakukan oleh kita, akan tetapi pastinya kalau kita akan menghancurkan sesuatu modal pikiran akan menjadi lebih banyak kita gunakan.

Terlepas dari penempatan rangking di atas, maka itu adalah versi saya sendiri, selanjutnya silahkan dikomentari saja jika saya berlebihan. Karena memang uraian kecil saya di atas akan sesuai dengan pengolahan data juga. Yaitu saat kita membuat data itu memang akan penting seperti artikel ini (bagi saya sendiri). Mari kita buat komponen CRUD dalam dunia komputer melalui bahasa terkenalnya Ajax jQuery dan dengan gaya tampilan tweeter bootstrap.

Langkah-langkah

  • Jangan bosan kalau Anda mampir di asanoer.com pasti Anda akan saya persilahkan membuka halaman ini (setidaknya supaya Anda tahu kenapa tulisan ini ada untuk Anda).
  • Download software pendukunya yaitu software local server (localhost) Anda masing-masing untuk apache. Saya sendiri memakai XAMPP yang memang sudah bagus buat saya. Kemudian instalkan XAMPP di komputer. Selanjutnya download paket ZIP dari asanoer.com. Paket ZIP ini silahkan Anda gunakan sebaiknya untuk peningkatan pembelajaran Anda, akan tetapi untuk kerusakan yang ditimbulkan pada komputer, maka silahkan tanggung sendiri. Saya hanya menerima untuk perbaikan kesalahan bug dan error saja (ini juga berlaku untuk semua artikel saya).
  • Dan impor database dengan mengikuti cara ASANOER.COM – CARA IMPOR DATABASE MYSQL DENGAN TEKS SQL. Karena semua data yang ditampilkan dalam demo diatas menggunakan artikel tersebut.

 

Pembuatan Komponen CRUD

Komponen CRUD pastinya hanya modul Create, Read, Update, dan Delete saja. Akan tetapi mengingat sistem juga ada pondasi awalnya maka perlu ditambahkan komponen pondasi aplikasi. Mari diikuti berikut ini.

1. Menyiapkan Pondasi Aplikasi

Saya tahu dan begitu juga Anda pasti sudah tahu kalau bangunan memerlukan pondasi untuk berdiri kokoh di atas tanah. Maka tidak jauh berbeda dengan aplikasi komputer. Akan tetapi pondasi untuk aplikasi komputer hanya sebuah pengaturan awal dari variabel-variabel yang ditentukan.

  • Buatlah folder dalam folder htdoc (untuk folder server apache dalam XAMPP) dengan nama “crud-asanoer.com” atau mungkin Anda akan mencoba dengan nama lainnya, maka itu terserah Anda. Kemudian di browser akseslah alamat “localhost/crud-asanoer.com” maka akan muncul halaman atau “tanah” kosong yang siap diisi sebuah aplikasi.
asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-01-folder-kosong

asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-01-folder-kosong

  • Buatlah file “.htaccess” (depan kasih tanda titik). Jika Anda susah membuat file ini maka silahkan pakai saja file dalam paketan download ZIP asanoer.com. Lalu isikan teks atau skrip berikut.
FILE .htaccess
  • Skrip di atas akan membuat URL cantik atau pretty URL atau clean URL nantinya.
  • Perlu diperhatikan supaya baris kedua diganti menjadi nama folder yang tadi dibuat yaitu “/crud-asanoer.com/”.
  • Atau Anda dapat melihat isi file ini dengan klik .htaccess
  • Kemudian buatlah sebuah file dengan nama “index.php” file PHP ini merupakan pintu bagi apache saat pertama mengakses folder yang kita buat.
  • Masukkan skrip PHP di bawah ini. Lalu simpan atau dengan melihat isinya dengan klik index.php
FILE index.php
  • Baris pertama adalah include file konfigurasi dari sistem yang akan dibuat seperti tanggal sekarang, alamat URL, versi dan nama aplikasi, nama database, user database dan lainnya.
  • sedangkan baris kedua adalah index untuk page atau alamat URL nantinya. Seperti home.html, data.html, tambah.html, hapus.html dan sebagainya.
  • Lalu buatlah folder dengan nama “system” dan bukalah folder tersebut dan buatlah file dengan nama “asanoer.com-config.php” karena terlalu panjang, maka Anda dapat langsung lihat isinya di paketan download ZIPnya, atau klik asanoer.com-config.php.
  • Keluar dari folder system maka buatlah file dengan nama “asanoer.com-index-modul.php” kemudian masukkan kode PHP ini.
FILE asanoer.com-index-modul.php - Di bawah ini kode belum lengkap
  • File tersebut berfungsi mengarahkan server ke file modul yang diakses. Sebagai contoh, jika kita mengakses URL “http://localhost/folder-anda/url-modul-baru.html” seperti terlihat dalam kode PHP diatas, maka artinya kita sebenarnya telah mengakses modul dengan nama file “modul-baru.php”.
  • Kemudian Anda buat folder baru dengan nama “modul” dan file pertama dalam folder ini adalah “asanoer.com-index.php” (nama modul bebas dan harus sama yang tersebut dalam include di file asanoer.com-index-modul.php).
  • Isikan file “asanoer.com-index.php” tersebut dengan teks “Assalamu ‘alaikum DUNIA ku, semoga asanoer.com adalah menjadi blog referensi yang terbaik.” — amin, hehehe, lalu simpan file tersebut, maka coba Anda akses dengan “localhost/crud-asanoer.com” dan lihat apa yang terjadi.
asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-02-awalan

asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-02-awalan

  • Anda langsung secara otomatis diarahkan ke modul awalan / utama dari aplikasi ini yaitu “modul/asanoer.com-index.php” yang berisi teks tersebut. Sehingga URL juga akan otomatis menjadi “http://localhost/crud-asanoer.com/cicilan-mu.html”. Sebenarnya “cicilan-mu.html” sudah di konfigurasi dalam file “asanoer.com-config.php” di DEFINE dengan teks “ASANOER_INDEX_APLIKASI” silahkan dilihat sendiri.
  • Untuk selanjutnya buatlah folder baru dengan nama “pelengkap”. Folder ini sudah di DEFINE pada file “asanoer.com-config.php”. Isi folder ini hanya sebuah aset (harta) dari aplikasi. Misalnya, tema, gambar, icon, dan file pendukung lainnya.
  • Dalam folder “pelengkap” buatlah file bernama “koneksi-nya.php” yang berfungsi mengkatifkan hubungan transaksi data aplikasi dengan database.
FILE koneksi-nya.php
  • Nah sekarang buatlah file dalam folder yang sama dengan nama “header-nya.php” dan isikan kode PHP INI (klik).
  • Sama. masih dalam folder tersebut.Buat file “menu-nya.php” denga skrip PHP INI (klik).
  • Juga buat file dengan nama “footer-nya.php” dan isikan kode PHP INI (klik).

Sampai di sini pondasi aplikasi sudah dibuat. Berikutnya ikuti pembuatan komponen-komponen CRUD.

2. Modul Read Data

Modul ini berfungsi mengambil semua data (Read) dari database untuk disajikan ke pengguna. Ikut langkah berikut.

  • Dalam folder “modul” bukalah file “asanoer.com-index.php” dan gantilah isinya dengan PHP INI (klik).
  • Oke, sekarang, mulai menambahkan modul baru. Bukalah file “asanoer.com-index-modul.php” di folder “crud-asanoer.com” dan tambahkan baris berikut pada kolom fungsi SWITCH().
Penambahan modul baru = index-read.html
  • Lalu simpanlah file tersebut.
  • Buka folder modul, dan buatlah file baru dengan nama “asanoer.com-index-read.php” (perhatikan nama filenya). Kemudian masukkan teks PHP dengan kode PHP INI (klik). Modul ini berisi tabel yang akan meloading isi dari database “cicilan” tabel “tabah_peminjam” untuk disajikan ke pengguna.

Read memang sengaja saya buat terlebih dahulu atau sesuai dengan prioritas versi saya.

3. Modul Update Data

Seperti prioritas saya, update lebih mudah dari pada create. Karena kalau create pasti modalnya banyak seperti “Anda Berpikir” data yang baru akan dimasukkan, dan juga “Anda Menulis” semua data baru dalam kolom field baru. Tapi kalau Update hanya mengubah kolom tertentu. Ikuti langkah berikut.

  • Tambahkan modul baru pada file “asanoer.com-index-modul.php” seperti langkah memasukkan modul. Tambahkan kode PHP di bawah ini.
Penambahan 2 modul baru
  • Buatlah file dengan nama “asanoer.com-index-update.php” dalam folder “modul” dan masukkan kode PHP INI (klik).
  • Setelah itu, buatlah folder baru dalam folder “modul” dengan nama folder “aksi”. Folder “aksi” adalah tempat semua file untuk mengeksekusi perubahan pada database baik Update, Create, dan Delete.
  • Dalam folder “aksi” buatlah file baru “asanoer.com-index-update-x.php” yang akan menangani semua permintaan form update. Dan masukkan kode PHP INI (klik).
  • Sekarang coba Anda akses “http://localhost/crud-asanoer.com/cicilan-mu.html” dan cobalah klik tombol “ubah”. Seharusnya Anda akan melihat seperti dalam demo atau gambar di bawah ini.
asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-03-update-form

asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-03-update-form

4. Modul Create Data

Modul ini untuk menambahkan baris baru dalam tabel database. Dengan modul ini maka formulir akan muncul saat tombol tambah data ditekan. Panduannya seperti ini.

  • Tambahkan modul baru pada file “asanoer.com-index-modul.php” seperti langkah memasukkan modul. Tambahkan kode PHP di bawah ini.
Penambahan 2 modul baru
  • Buatlah file dengan nama “asanoer.com-index-create.php” dalam folder “modul” dan masukkan kode PHP INI (klik).
  • Dalam folder “aksi” buatlah file baru “asanoer.com-index-create-x.php” yang akan menangani semua permintaan form create. Dan masukkan kode PHP INI (klik).
  • Sekarang coba Anda akses “http://localhost/crud-asanoer.com/cicilan-mu.html” dan cobalah klik tombol “Peminjam +”. Seharusnya Anda akan melihat seperti dalam demo atau gambar di bawah ini.
asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-04-create-form

asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-04-create-form

5. Modul Delete Data

Terakhir adalah modul versi prioritas paling sering dihindari yaitu penghapusan data. Karena semua akan berpikir panjang saat hal yang pernah kita simpan harus dihilangkan atau dimusnahkan. Mari ikuti cara berikut.

  • Tambahkan modul baru pada file “asanoer.com-index-modul.php” seperti langkah memasukkan modul. Tambahkan kode PHP di bawah ini.
Penambahan 2 modul baru
  • Buatlah file dengan nama “asanoer.com-index-delete.php” dalam folder “modul” dan masukkan kode PHP INI (klik).
  • Dalam folder “aksi” buatlah file baru “asanoer.com-index-delete-x.php” yang akan menangani semua permintaan form delete atau penghapusan. Dan masukkan kode PHP INI (klik).
  • Sekarang coba Anda akses “http://localhost/crud-asanoer.com/cicilan-mu.html” dan cobalah klik tombol “hapus”. Seharusnya Anda akan melihat seperti dalam demo atau gambar di bawah ini.
asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-05-delete-form

asanoer.com-cara-membuat-crud-dengan-ajax-jquery-dengan-gaya-bootstrap-05-delete-form

Jika semua hal di atas dilakukan dengan benar, maka seharusnya Anda sudah melihat semua form dan aksi perubahan database. Terima kasih sudah mengkaji artikel ASANOER.COM – CARA MEMBUAT CRUD DENGAN AJAX JQUERY DENGAN GAYA BOOTSTRAP.

Sumber-sumber:
6 Comments
  1. 19 Juli 2016
    • 20 Juli 2016
      • 22 Juli 2016
        • 22 Juli 2016
          • 22 Juli 2016
          • 25 Juli 2016

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *