Tutorial Menggunakan Image CRUD di Code Igniter + Grocery CRUD

TUTORIAL MENGGUNAKAN IMAGE CRUD DI CODEIGNITER + GROCERYCRUD

Apabila temen - temen belum mengikuti tutorial codeigniter + grocerycrud ini dari awal alangkah baiknya melihat halaman ini terlebih dahulu link nya http://my12web.blogspot.com/2019/10/tutorial-codeigniter-grocerycrud.html

Apabila sudah mengikuti tutorial tersebut maka kita akan melanjutkan tutorial code igniter + grocerycrud dengan menerapkan image crud silahkan di perhatikan dan di ikuti tutorial nya berikut ini

1. Hal pertama yang harus disiapkan untuk mengikuti tutorial ini adalah menyiapkan tools yang akan digunakan untuk menjalankan fitur image crud ini diantaranya.

a. XAMPP bisa di download di link ini https://www.apachefriends.org/index.html

b. Codeigniter bisa di download di link ini https://codeigniter.com/

c. Text editor bisa menggunakan sublime text atau notepad++ atau visual studio code

d. Fungsi image crud bisa di download di link ini https://www.grocerycrud.com/image-crud

Tampilan halaman image crud

e. Web browser bisa menggunakan google chrome atau firefox atau internet explorer.

2. Apabila tools sudah disiapkan maka extract file codeigniter nya ke halaman htdocs di dalam folder xampp

Untuk nama folder nya bebas

3. Setelah itu extract file image crud nya dan timpa ke folder codeigniter

Pada gambar diatas folder image crudnya sudah dimasukan ke dalam codeigniter

4. Selanjutnya yaitu membuka file example_database.sql untuk melihat database image crudnya

Pada file ini terdapat database yang berisi data gambar dari image crud

5. Sebelum kita membuka phpmyadmin nyalakan terlebih dahulu fitur apache dan mysql pada xampp

Tampilan halaman xampp

6. Lalu buka phpmyadmin di browser dengan memasukan link ini http://localhost/phpmyadmin/

Tampilan halaman phpmyadmin

7. Selanjutnya adalah mengcopy seluruh isi file examples_database.sql ke database db_mulmed yang merupakan database yang sudah dibuat pada tutorial sebelumnya melalui sql query

Selanjutnya tekan kirim

8. Apabila sql query nya berhasil maka di dalam database db_mulmed ini akan menambahkan 4 tabel

Tampilan sturktur tabel dari db_mulmed

9. Lalu kita buka folder codeigniternya di text editor kali ini saya menggunakan visual studio code

Tampilan visual studio code

10. Pertama kali yang harus dikonfigurasi adalah memasukan username yaitu root dan database yaitu db_mulmed pada file database yang berada di folder application lalu folder config

Tampilan konfigurasi pada file database.php

11. Lalu kita buka folder controller di dalam folder application dan buka file images_examples.php namun saya melakukan rename menjadi nama saya sendiri yaitu Idham.php

Tampilan file contoller dan jangan lupa untuk mengganti nama class controller nya sama dengan nama filenya

12. Setelah itu buka di browser controllernya dengan memasukan base url lalu nama controller seperti ini http://localhost/codeigniter2/index.php/idham/

Apabila tidak error maka akan muncul tampilan seperti ini

13. Lalu buka folder views lalu buka file example.php lalu scroll kebawah sampai menemukan baris seperti ini

Lalu ubahlah kata image example menjadi nama controller Idham atau nama yang sudah direname pada file image_example sehingga menjadi seperti ini

Lalu buka kembali dibrowser dan coba mengklik salah satu link nya

14. Apabila terdapat error seperti ini maka buka file image_moo.php dan tambahkan constructor pada file tersebut

Tampilan error karena class image moo tidak memiliki constructor

Lalu tambahkan fungsi constructor di dalam class image_moo

15. Apabila sudah buka kembali di browser dan coba untuk mengklik link nya

Tampilan halaman example 1

Tampilan halaman example 2

Tampilan halaman example 3

Tampilan halaman example 4

Tampilan halaman simple photo gallery

16. Apabila tampilan nya seperti gambar diatas berarti image crud nya sudah berhasil dan beberapa tampilan diatas merupakan object yang terdapat dalam beberapa subclass di controller idham