14 May 2017

Membuat Form Edit PHP pada Modal Bootstrap

Assalamualaikum
Beberapa waktu yang lalu ada seorang teman yang tengah membuat sebuah sistem informasi untuk sekolah tempat ia bekerja bertanya pada saya perihal membuat Form Edit data menggunakan PHP namun Form tersebut ada pada Modal Bootstrap.
Membuat Form Edit PHP pada Modal Bootstrap

pertanyaan tersebut membuat saya teringat ketika Dulu sewaktu duduk dibangku kuliah saya sempat mendapati hal yang serupa, yaitu saya kesulitan membuat form edit jika ditampilkan pada modal Bootstrap, Akhirnya pada waktu itu karena saya tidak tahu cara membuatnya, terpaksa saya gak jadi pake Modal melainkan saya buatkan halaman baru untuk mengedit data.

Seiring berjalanya waktu akhirnya setelah kesana kemari mencari petunjuk akhirnya saya bisa juga menampilkan form edit pada Modal Bootstrap menggunakan bantuan Javascript

Skenario yang akan saya jadikan contoh untuk penerapan Form edit Pada Bootstrap kali ini adalah sbb :
  1. Saya mempunyai sebuah database dengan nama "modal"
  2. dengan 1 buah tabel dengan nama "siswa"
  3. didalam tabel siswa terdapat 3 field yaitu id, nama dan umur
  4. Saya akan menampilkan isi data dari tabel siswa tersebut kedalam sebuah Tabel HTML yang mempunya sebuah tombol Edit untuk tiap masing-masing datanya
  5. saat tombol Edit diklik maka akan muncul sebuah modal bootstrap yang didalamnya terdapat data berupa nama dan umur yang bisa di edit berdasarkan id pada masing-masing data tersebut
Untuk Mempersingkatnya langsung saja kita praktekan
1. Buat dulu database dengan tabel dan field2nya berdasarkan skenario diatas
2. Buat sebuah file dan beri nama index.php lalu diisi dengan Source Code dibawah ini

3. Selanjutnya buat lagi sebuah file dengan nama koneksi.php dengan source code dibawah ini

4. Buat sebuah file lagi lalu beri nama detail.php dengan source codenya seperti yang ada dibawah ini
5. Buat lagi 1 file terakhir dan beri nama edit.php lalu isikan Source code dibawah ini

Buat yang gak mau ribet, silahkan langsung download aja script lengkapnya (Beserta SQLnya) melalui link dibawah ini
Download Form Edit Modal Bootstrap
Sekian dan Terima kasih

8 komentar

gan itu bisa local ngak
pas saya intertidak terhubung tidak biasa di edit

Saya coba dan berhasil...terima kasih.
Lalu Saya mengganti form inputnya dengan TEXTAREA bukan INPUT
mengapa datanya tampil di luar textarea ya...
kok tidak didalam textarea sehingga gak bisa diedit?

kak, ini coding nya kalo dibikin satu file php nggak bisa kah ?

Bisa aja
silahkan di Explorasi aja mbak

kalo value id yang dikirim ke modal null itu kenapa ya? pas di echo null


EmoticonEmoticon