Tutorial: Optimasi Web Codeigniter 3 [Part 2]

By Budyks    PHP

Tutorial ini melanjutkan seri sebelumnya yang juga membahas Topik yang sama tentang Optimisasi Web. Namun kali ini kita akan lebih dalam membahas nya dengan bantuan PHP framework Codeigniter 3. 

[Part 1] Optimasi Website dengan Kode Minifikasi

Membuat sendiri (Coding sendiri) sebuah Blog atau website tentu menjadi tantangan sendiri dimana kita harus mengeluarkan semua effort untuk membuat Blog/website kita User friendly, Cepat load-nya, search engine friendly, Mobile friendly atau responsive, membuat CMS sendiri dll. 

Namun keuntungannya adalah kita lebih leluasa menentukan apa-apa saja yang perlu dan tidak perlu, leluasa menentukan Design (user interface & user experience) dan leluasa untuk hal lain seperti Scalling karena mana tau suatu saat Web kita tumbuh besar (Aamiin).

Pokok bahasan kita akan meliputi:

  1. Project Structure di CI 3
  2. Peran HMVC
  3. Layouting di C3
  4. Assets (JS, CSS) management
  5. File Minification (HTML, JS, CSS)
  6. Rekomendasi

 

Project Structure di CI 3 

Berbicara optimasi, maka bukanya hanya soal Cepatnya web kita di akses user tapi juga bicara tentang Structure Project atau kasaranya Structure/organisasi Source Code kita. Karena Organisasi Source yang baik akan memberikan banyak keuntungan bagi kita dan tim.

Karennya harus disepakati bagaimana kita akan mengorganisasi atau membuat struktur projet kita. Pada contoh kali ni saya menggunakan HMVC Design Pattern yang tentu developer CI mah sudah gak asing lagi kan. 

Diatas adalah Project Structure yang kita gunakan. Tidak ada perubahan pada struktur Source bawaan Codeigniter 3 hanya penambahan folder modules saja da beberapa file dari hmvc library. 

Kita bisa lihat juga pemisahan File-file nya berdasarkan Task nya yaitu ada amp, backend, dan frontend. Bisa kita tambahin lagi sesuai keperluan dan keinginan. Tapi umumnya Struktur disamping cukup banyak digunakan termasuk pada blog ini (teknosains.com). 

Peran HMVC 

Tentu dengan model hierarkial (modular) seperti ini susunan source code kita menjadi lebih rapih, mudah di atur dan maintain dan sesuai konteks atau task nya. Tanpa HMVC sebanarnya juga bisa namun karena ini sangat memudahkan bagi developer maka saya sarankan untuk di pakai.

Library thir party yang dipakai untuk HMVC dalam contoh ini adalah punyanya wiredezignz. Cek repository nya disini bitbucket CI HMVC. 

HMVC ini sendiri menawarkan banyak fitur diantarannya bisa manggil suatu class dari module lain dsb.

Layouting di C3

Saya menyebutkan sebagai cara untuk menyusun file View sedemikian rupa sehingga mudah untuk diatur dan lebih dinamis. Target Layout utama nya seperti ini 

Dimana bagian Header akan berisi mulai dari tags html sampai bawah body. Dan Body akan berisi konten dinamis seprti List artikel, widget, Detail artikel dll. Dan Footer banyak akan berisi Javascript library dan Javascript non-library yang kita tulis sendiri. 

Skema diatas akan memecah View kedalam 3 File yaitu:

  1. headerView.php
  2. [dynamicView].php
  3. footerView.php

silahkan namakan filenya sendiri sesuai selera.

Agar Layout bisa dipanggil dimana-mana maka mesti kita buatkan method khusus. Bisa di library, Trait atau buat Parent Class di application/core. Contoh dan source yang digunakan dalam tutorial ini yaitu buat parent Class MY_Controller.php di application/core.

please use Desktop to see source code

Kita hanya perlu mengatur agar Class standar (CI_Controller) diganti dengan MY_Controller.

Cara memanggilnya di Controller cukup mudah yaitu seperti 

please use Desktop to see source code

Dengan teknik diatas kita tidak perlu lagi Copy-paste disetiap halaman. Juga source code jadi mudah dibaca dan di maintain. 

Assets (JS, CSS) management

Dibeberapa framework lain sudah tersedia library assets management namun di CI (kayakna sih sudah ada juga) kita bisa bikin/teknik sendiri dengan mudah.

Dengan sistem layouting yang sudah kita implement, maka Script Injection menjadi lebih mudah karena dapat digunakan untuk memanage/memasukan file JS, CSS tambahan sesuai kebutuhan.

Pada file View header kita, tinggal kita tambahkan kode seperti berikut

please use Desktop to see source code

Lalu pada View footer kita buat seperti ini 

please use Desktop to see source code

Berikut adalah cara menggunakannya di Controller

please use Desktop to see source code

Sesuai rekomendasi google, Tips optimasi website juga ada pada teknik loading file CSS. Untuk CSS yang tipenya non-library alias CSS buatan kita sendiri terutama yang Above The Fold, Bisa kita Embed inline langsung tanpa harus load menggunakan html link tags 

yang gunakan dalam Blog ini dan Tutorial ini adalah membuat versi originalnya di /assets/css/style.css  lalu saya Copy-paste ke /views/layouts/css.php sehingga bisa kita load inline langsung. 

File Minification (HTML, JS, CSS)

Ini sudah dibahas di seri pertama sehingga tidak banyak diulas lagi. Umumnya selalu ada 2 versi file View yaitu yang original dan yang minified (sudah di minifikasi) contoh 

  1. header.php
  2. header-min.php

dengan begini kita akan lebih mudah mengontrolnya di environment Development maupun Production. Perhatikan Source Code pada Layouting dimana jika environment adalah production maka file yang akan di load adalah veri min nya. 

Jika memakai tools HTML Compressor , settingan saya biasanya seperti ini 

Kita hanya tinggal CTRL + U di browser saja untuk melihat hasilnya. 

Rekomendasi 

Agar Web nya bisa maksimal terutama saat Load, silahkan Gunakan Web Server yang bagus seperti Nginx dan PHP 7. Di Production kamu bisa gunakan Cache, gzip compression dll.

Bang...Download the Source Code 

Inilah yang ditunggu-tunggu namun saya harap kamu baca dari atas sebagai bentuk penghargaan bagi penulis :D. Silahkan Download di Github. Screenshoot tampilan juga ada disana.

Download dan Install Source nya. Buat Database di local kamu berinama ci_amp lalu import file ci_amp.sql (file terlampir di source code). 

Whats in the Source Code? 

  1. Core Extending : Core (application/core) dan helper (application/helper)
  2. Front end interface (Home, Detail article)
  3. Backend interface (Login, Admin page, create Post, update post)
  4. WYSWYG editor With TinyMCE
  5. Route management di (/config/routes.php)
  6. MySQL file (ci_smp.sql)
  7. sudah SEO friendly (inline page SEO)
  8. many more, explore yourself

Seri berikutnya akan membahas lanjutan dari ini namun kita tambah dengan mengadopsi Google AMP. Stay tune !!!.

Silahkan masukan Komentar jika ada kendala dan pertanyaan, juga Mohon bantu Share artikelnya ke Social media teman-teman biar kita banyak pahala :). 

Screenshoots:

Baca juga:

  1. Mitos atau Fakta: Jurusan Teknik Informatika Susah Cari Kerja
  2. Ayoo Jelajah Stasiun Antariksa dengan Google Street View
  3. 5 Mata Kuliah Teknik Informatika Yang Susah
  4. Ini HP Android Super Murah Paling Layak dibeli
  5. How to : Ajax CSRF Token in Codeigniter 3 and AngularJs
  6. Codeigniter : Baca File Excel (Besar) dengan Spout

Comments


    Follow Us