Rabu, 28 Desember 2016

PHP - CRUD Berbasis OOP Menggunakan PDO dan Bootstrap Versi 1

Hallo pembaca setia Otrust!!
Sekarang lagi ramai-ramainya Om Telolet Om, hehe…. Ups. Tapi, sekarang yang Otrust bahas bukan Om Telolet Om. Tapi, Om PDO Om, Om OOP Om, Om Bootstrap Om. Wkwkwk. Udah… udah…. Sekarang kita kembali ke topik.

Sekarang ini perusahaan selalu melampirkan pengumuman lowongan kerja bagi seorang developer untuk memahami OOP. Bahkan, begitu pentingnya OOP menuntut kita untuk terus belajar dan belajar (Namanya juga dunia teknologi ya harus update:-D). Lalu, OOP itu apa sih? OOP (Object Oriented Progamming) adalah suatu metode pemrogaman yang berorientasi kepada object. Tujuan dari OOP diciptakan adalah untuk mempermudah pengembangan progam dengan cara mengikuti model yang telah ada dikehidupan sehari-hari (Sumber: fatihamaliah.wordpress.com).

Nah, itu adalah cuplikan tentang OOP. Namun, kali ini Otrust bukan bermaksud menjelaskan lebih detail apa itu OOP, PDO, dan Bootstrap. Namun, Otrust akan memberikan tutorial CRUD (Create, Read, Update, Delete) dengan menggunakan PDO dan Bootrstrap berbasis OOP.


1. Buatlah struktur folder dan file php seperti pada gambar berikut ini:


Untuk folder database tidak perlu dibuat juga tidak apa-apa karena tidak kita gunakan. Sekarang silahkan kalian perhatikan pada folder app dimana didalam folder tersebut memiliki 2 Folder dan 1 File .htaccess. Folder yang pertama yaitu model yang memiliki 2 file: class.bio.php dan database.php sedangkan pada view memiliki 6 file php yang mana didalam folder view itu hanya desain tampilan saja yang akan muncul ketika web kita jalankan di browser.

Pada file .htaccess silahkan kalian tulis ‘Deny from all’ tanpa tanda petik. Gunanya dari perintah ini adalah supaya file-file php yang ada didalam folder app tidak bisa diakses dari browser.

2. Download framework css bootstrap di website resminya disini. Otrust sendiri menggunakan bootstrap versi 3.3.7 lalu copy dan paste di folder asset seperti gambar berikut ini:



3. Lalu pada folder induk (crud-pdo-oop) tepatnya pada file index.php buatlah sorce code seperti berikut ini:


lalu coba jalankan. Nah, jangan kaget apabila belum ada tampilan yang diharapkan yah :-D. Karena itu Cuma memanggil aja. Selanjutnya kita akan membuat tampilan dari website kita.

Bukalah folder view dan ikutilah perintah dibawah ini:

4. Tulislah source code pada file header.php seperti ini:


5. Berikut source code pada file menu.php:


6. Aturlah file index.php (Ingat!! Didalam folder view bukan folder induk) seperti berikut ini:


7. Pada file terakhir yaitu footer.php buatlah seperti ini:

Selanjutnya silahkan jalankan aplikasinya sehingga tampilannya seperti ini: 
Apabila muncul keterangan error:

           Notice: Undefined variable: result in C:\xampp\htdocs\blogger\crud-pdo-oop\app\view\index.php on line

Abaikan saja. Karena data pada tabel belum kita buat. Sampai sini fokus kita pada folder view.

8. Selanjutnya kita akan membuat eksekusi perintah CRUD. Sebelum itu silahkan buat database terlebih dahulu. Silahkan membuat melalui localhost/phpyadmin dengan nama database blog_bio dan buatlah tabel seperti berikut ini:


9. Selesai kita buat database, selanjutnya pada folder model aturlah source code pada file database.php seperti berikut ini:

pada file database.php tersebut kita membuat Class Database yang mana itu nanti akan kita panggil untuk melakukan eksekusi CRUD.

10. Selanjutnya kita akan membuat perintah INSERT, UPDATE, dan DELETE. Aturlah source code pada file class.bio.php seperti berikut ini:

perhatikan pada method __construct(), kita memanggil Class Database yang sebelumnya telah kita buat dan kita panggil disini untuk melakukan eksekusi INSERT, UPDATE, DELETE. Dan pada method runQuery() kita gunakan untuk menjalankan perintah SQL yang nanti akan kita gunakan. Dan method terakhir yaitu redirect() ini hanya digunakan untuk memanggil url yang dituju. Method-method yang lain saya kira kalian sudah paham semua apabila belum silahkan Tanya-tanya dikolom komentar yah.. :-D (Peace).

11. Selanjutnya kita kembali lagi ke folder induk tepatnya  pada file index.php berilah perintah source code dibawah ini tepatnya diatas source code sebelumnya (So, kode untuk menampilkan view terletak dibawah yah. Jangan lupa):

Apabila ada datanya maka tampilannya akan seperti berikut ini: 

12. Kembali lagi ke folder view tepatnya pada file bio-add.blade.php aturlah source code seperti berikut ini:

lalu pada folder induk, file bio-add.php aturlah source code seperti berikut ini:

Proses insert data sudah selesai dan coba jalankan. Seharusnya proses insert data berhasil apabila kalian mengalami error silahkan googling atau tanyakan ke kolom komentar. Otrust siap membantu. J

13. Selanjutnya kita akan membuat form tampilan untuk editing. Bukalah kembali folder view dan pada file bio-edit.blade.php aturlah source code seperti berikut ini:

Apabila telah selesai kalian tulis source code diatas maka pada file bio-edit.php aturlah seperti ini:

Aplikasi selesai kita buat. Dan untuk proses delete juga telah kita buat sebelumnya pada file index.php pada folder induk. Silahkan teman-teman jalankan, In Syaa Allah 100% berhasil J.

 “Mas? Minta dong source codenya. Saya download buat belajar.”
Nah, sengaja tidak Otrust cantumkan download source codenya disini. Otrust hanya ingin teman-teman membaca dan memahami dulu tutorial yang Otrust tulis disini. Apabila butuh source code-nya silahkan LIKE Fanspage Facebook Otrust disamping kanan blog. Lalu share tutorial ini. Otrust akan kirim link download ke inbox facebook teman-teman. Apabila dalam waktu 24 jam silahkan kirim pesan ke saya di facebook, siapa tau saya lupa. :-D.

Ribet amat sih mas? Pelit deh… 
Kalau Otrust pelit buat apa dunk nulis tutorialnya? :-D. wkwkwk…. Sempatkan Membaca dan Memahami supaya melatih kodingan kalian dan tidak asal Copas. Okey guys… Apabila ada masukan ataupun kritikan silahkan tulis di kolom komentar. Selanjutnya Otrust akan bikin tutorial tentang insert Image melanjutkan tutorial ini, ditunggu aja yaa J

Happy Coding. J. 
Location: Malang, Malang City, East Java, Indonesia

0 comments:

Posting Komentar