Loading...
overlay
"Barangsiapa menjaga kehormatan orang lain, pasti kehormatan dirinya akan terjaga "

- Sayyidina Umar bin Khattab RA -

Belajar PHP dan CodeIgniter HMVC Bag.2 (membuat template)

Welcome back, melanjutkan tutorial kemaren tentang Instalasi PHP, MySQL, Apache dan Codeigniter. Sekarang, kita lanjutkan ke bahasan Belajar PHP dan CodeIgniter HMVC Bag.2 tentang membuat template. Kita nda perlu mengetahui code2 Front End secara detail,cukup dimengerti saja kegunaanya untuk apa.... ibarat naek motor, nda perlu taw cara bikin rem, klakson, roda dll. Cukup ketahui saja bagaimana cara kerjana dan cara menggunakannya... demikian juga dengan tutorial yang saya buat ini, tpi klo memang maw mempelajari secara lebih detail juga bagus sih,,, browsing aja, mbah gugel bnyk referensi tuwh :D.

Daripada kita membuat design dari awal, itu bisa makan waktu yang lama dan musti faham beberapa code CSS + Bootstrap, Jquery dll. biar cepat kita gunakan yang orang lain share, bnyak kok yang gratisan... nah, tinggal kita pasang di aplikasi kita... Lets Do It.

  1.  Pertama, download dulu template Gentelella Disini.
  2.  Extract dan buka directory hasil extract ..\gentelella-master\production\ dan copy paste folder css, fonts, images, js dan less ke aplikasi kita, disini saya simpan di drive C:\xampp\htdocs\inventory\ seperti yang terlihat pada gambar berikut.copas folder

 

Ok, pemasangan sudah selesai, sekarang kita mulai melakukan coding ria... masih ingat HMVC kemaren?? klo lupa klik link berikut. Sekarang kita buat modul pertama kita, buka folder C:\xampp\htdocs\inventory\application\modules. dan buat folder dengan nama dashboard nantinya kita sebut modul dashboard atau controller dashboard. Codeigniter itu menggunakan konsep MVC (Model View Controller). Untuk lebih jelasnya browsing saja disini kita nda bahas teori yha :D.

Sekarang pada modul dashboard kita buat mvc, buat 3 buah folder didalam modul dashboard dan beri nama models, views, controllers (NB* tidak boleh nama yg lain karena ini udah struktur baku codeigniter).

  1.  Folder model = berisi fungsi2 yang berhubungan dengan query database.
  2.  Folder view   = inilah bagian user interface yang akan langsung terlihat oleh kita.
  3.  Folder Controller = disinilah inti dari code kita, yang berisi method aplikasi kita dan yang menghubungkan antara model dan view.

buka folder C:\xampp\htdocs\inventory\application\modules\dashboard\controllers\ selanjutnya buat file didalamnya berinama Dashboard.php (dengan huruf besar diawalnya). kemudian ketikan kode seperti dibawah

kode diatas akan memanggil view dengan nama template, nah sekarang kita buat view tersebut. buka folder C:\xampp\htdocs\inventory\application\views\ selanjutnya buat file didalamnya berinama template.php. ketik apa saja di isinya, misal "Belajar membuat template dengan codeigniter dan css bootstrap". save hasil code dan ketikkan di browser localhost/inventory/index.php/dashboard. apabila browser menampilkan text yang anda ketik tanpa adanya pesan error, berarti anda telah sukses membuat modul pertama. Karena tujuan kita adalah membuat template gentelella, so kita belom selesai... sebelum dilanjut kita ubah dulu beberapa settingan dasar.

  • pertama buka dulu file autoload.php di C:\xampp\htdocs\inventory\application\config\autoload.php. cari baris kode $autoload['helper'] = array(); dan tambahkan array url dan html menjadi seperti berikut $autoload['helper'] = array('url','html');.
  • kemudian buka file config.php di C:\xampp\htdocs\inventory\application\config\config.php. cari baris kode $config['base_url'] = ''; dan rubah menjadi $config['base_url'] = 'http://localhost/inventory';
  • terakhir buka file routes.php di C:\xampp\htdocs\inventory\application\config\routes.php. cari baris kode $route['default_controller'] = 'welcome'; dan rubah menjadi $route['default_controller'] = 'dashboard';

Buka hasil extract template kita cari file dengan nama plain_page.html di folder production. buka filenya dengan text editor dan copy paste semua codenya ke file template.php kita. Refresh browser dan tada... eh, tapi kok tampilanya acak2kan?,, tenang itu karna file2 css belom terload sesuai struktur codeigniter.... sekarang kita akan edit pada file template.php.

kembali ke file template.php dan rubah pemanggilan css, image dan javascriptnya seperti kode berikut. rubah yang saya kasih warna.

dan cek hasilnya dengan refresh browser anda, tampilan terakhir menjadi seperti berikut

finish

Tutorial untuk session kali ini sampai disini yho:D. next kita akan membuat Design dan relasi databasenya. Terima kasih jgan lupa share ke temen2 , eheheheh