Hallo guys, saya di sini akan memberikan tutorial cara
membuat sistem CRUD sederhana dengan menggunakan PHP Mysqli dan Bootstrap. CRUD
itu sendiri adalah Create, Read, Update dan Delete nantinya dari sistem yang
kita buat akan bisa digunakan untuk Menambah , Mengubah , Menghapus data yang
terhubung ke database dan ditampilkan ke tampilan utama dari sistem yang kita
buat.
DATABASE
Oke, langsung saja kita lanjut ke langkah-langkah untuk
membuat sistemnya :
Pertama
kali yang kita lakukan adalah membuat sebuah database dengan nama
web_programming2 pada database MySQL dan tabelnya dengan nama user . Seperti pada gambar dibawah ini :
STRUKTUR FOLDER
Oke, disini saya menggunakan text editor untuk membuat
file-file yang diperlukan , dibawah ini adalah struktur folder yang akan saya
gunakan :
Disitu terdapat folder assets yang didalamnya terdapat
folder css dan js dari bootstrap yang saya gunakan , jadi kalian bisa download
terlebih dahulu bootstrapnya dan letakan di folder assets.
Kemudian , kita mulai bikin file satu per satu :
KONEKSI
Cara selanjutnya adalah membuat sebuah koneksi yang
nantinya akan digunakan untuk menghubungkan ke database dan digunakan untuk
semua proses yang terjadi. Disini saya membuat file koneksi.php dengan
menggunakan text editor.
Dibawah ini adalah kode dari “koneksi.php”
Selanjutnya membuat sebuah file dengan nama “index.php”
dimana file ini adalah file yang akan di baca pertama kali oleh sebuah web
browser untuk menampilkan tampilan dari sistem tersebut.
Dibawah ini adalah kode dari “index.php”
Kemudian membuat sebuah file dengan nama “body.php” , file
ini yang akan digunakan untuk pemanggilan fitur atau aksi yang akan dilakukan
agar tampilan tetap berada di dalam sebuah kerangka website , contohnya disini
saya terdapat navbar maka navbar tersebut akan tetap muncul jika kita melakukan
aksi tambah atau edit data.
Dibawah ini adalah kode dari “body.php”
CONTENT
Selanjutnya membuat sebuah folder dengan nama content dan
didalamnya buat file dengan nama “header.php” , file ini digunakan untuk
pemanggilan bootstrap yang kita gunakan untuk mempercantik sistem yang kita
buat.
Dibawah ini adalah kode dari “header.php”
Selanjutnya masih didalam folder content dan didalamnya buat
satu file dengan nama “navbar.php” , file ini digunakan untuk membuat tampilan
navbar pada sistem yang kita buat.
Dibawah ini adalah kode dari “navbar.php”
Dan yang kali ini adalah file yang paling penting karena
akan tampil di halaman awal saat kita mengaksesnya. Masih didalam folder
content kita buat satu file dengan nama “data_user.php” , file ini digunakan
untuk membuat sebuah tampilan tabel yang datanya diambil dari database , pada
halaman awal ini nanti terdapat button untuk menambah data , edit data dan
hapus data.
Dibawah ini adalah kode dari “data_user.php”
CRUD
Selanjutnya , kita buat folder satu lagi dengan nama crud
untuk menampung file-file yang digunakan untuk melakukan proses CRUD .
1. Pertama , kita buat file dengan nama
“tambah_data.php” , file ini berguna untuk menampilkan sebuah form data yang
nantinya kita gunakan untuk menambahkan data ke dalam database .
Dibawah ini adalah kode dari
“tambah_data.php”
2. Dari kode diatas akan di proses ke dalam sebuah
file dengan nama “proses_tambah.php” , jadi disini kita buat file baru dengan
nama “proses_tambah.php” yang berguna untuk memproses data yang telah kita
inputkan ke form untuk di insertkan ke database.
Dibawah ini adalah kode dari
“proses_tambah.php”
3. Selanjutnya , kita buat file dengan nama
“edit_user.php” , file ini berguna untuk menampilkan sebuah form data yang
telah terisi untuk kita edit . kita bisa melakukan edit data dengan cara
memilih button edit yang ada di opsi pada tabel .
Dibawah ini adalah kode dari
“edit_user.php”
4. Dari kode diatas akan di proses ke dalam sebuah
file dengan nama “proses_edit.php” , jadi disini kita buat file baru dengan
nama “proses_edit.php” yang berguna untuk memproses data yang kita edit pada
form edit untuk di update ke database.
Dibawah ini adalah kode dari
“proses_edit.php”
5. Yang terakhir kita buat file dengan nama “delete_data.php” yang berguna untuk memproses data yang akan di hapus
Dibawah ini adalah kode dari “delete_data.php”
5. Yang terakhir kita buat file dengan nama “delete_data.php” yang berguna untuk memproses data yang akan di hapus
Dibawah ini adalah kode dari “delete_data.php”
Berikut tampilan dari sistem CRUD
Tampilan Awal
Tampilan Tambah Data
Tampilan Edit Data
Oke, teman-teman mungkin itu saja tutorial
dari saya . silahkan kalian bisa coba dan jalankan di browser kalian .
0 komentar:
Posting Komentar