Pembuka?

Merupakan informasi yang berkaitan dengan isi dari materi yang akan dipelajari

Persiapan?

Menjelaskan tentang persiapan yang harus Anda lakukan sebelum mempraktekan semua materi yang ada.

Pengenalan CodeIgniter 4?

Materi yang wajib Anda kerjakan dan pahami, semua materi-materi berikutnya akan mengacu pada projek ini.

Bootstrap dan Font Awesome?

Penggunaan Bootstrap dan Font Awesome untuk mempercepat dan mempercantik desain website.

Pelengkap AGC?

Membahas cara membuat dan atau menggunakan script siap pakai untuk keperluan pembuatan web AGC kita nantinya.

AGC Hotel dengan File JSON?

Membahas tentang cara memanfaat data hotel dari Agoda.com untuk dijadikan sebagai sumber data Web AGC dalam format JSON.

AGC Hotel dengan Database?

Membahas tentang cara memanfaatkan data hotel dari Agoda.com untuk dijadikan sebagai sumber data Web AGC dalam format Database.

PHP To HTML Converter?

Membahas cara membuat tools untuk melakukan konversi Web AGC yang dibuat menggunakan bahasa pemroraman PHP agar menjadi halaman web HTML.

Jutaan Data Produk Siap Pakai?

Berisi link daftar produk siap pakai, tidak perlu scrape lagi.

Dasar-Dasar Web Scraping?

Topik ini membahas tentang cara mengumpulkan data dengan teknik web scraping.

Web AGC dengan Teknik Web Scraping

Membuat Route, Model, View dan Controller

Membuat Route, Model, View dan Controller

Pada saat akan membuat website alangkah baiknya jika kita menentukan terlebih dahulu apa saja yang akan ditampilkan pada web AGC kita nantinya, sebagai contoh:

http://nama-domain.com

Halaman home page akan digunakan untuk menampilkan daftar artikel

http://nama-domain.com/about

Halaman ini akan digunakan untuk menampilkan informasi tentang situs tersebut

http://nama-domain.com/dmca

Halaman ini akan digunakan untuk menjelaskan tentang hal-hal yang berkaitan dengan DMCA.

http://nama-domain.com/judul-artikel

Halaman ini akan digunakan untuk menampilkan detail dari suatu konten atau artikel sesuai dengan judul yang diinginkan.

Setelah Anda memiliki gambaran tentang isi dari website yang akan dibuat, langkah selanjutnya adalah membuat Route. Silahkan buka file Routes.php dalam folder app/Config.

Carilah baris kode berikut pada bagian “Route Definitions”:

$routes->get('/', 'Home::index');

Maksud dari perintah di atas adalah: ketika ada seseorang mengakses root atau Base URL dari website (http://nama-domain.com) maka Router akan memanggil Controller Home (Home.php) dan mengeksekusi method index() yang terdapat dalam Controller Home tersebut.

Sekarang cobalah buka file Home.php yang terdapat dalam folder app/Controllers, Anda akan menemukan baris kode seperti berikut:

publicfunction index()  
{  
  return view('welcome_message');
}

Method index() di atas berfungsi untuk menampilkan View welcome_message (welcome_message.php).

Anda bisa mencari file wellcome_message.php dalam folder app/Views, file inilah yang digunakan sebagai tampilan default dari projek Anda.

Sekarang modifikasi baris kode berikut:

$routes->get('/', 'Home::index);

Agar tampak seperti baris kode berikut:

$routes->get('/', 'Page::HomePage');

Jika sudah selesai silahkan simpan perubahannya, coba lihat hasilnya dengan melakukan refresh pada web projek Anda.

Pada layar muncul pesan “Controller or its method is not found” hal ini terjadi karena Anda memang belum membuat Controller Page tersebut.

Sekarang buatlah sebuah Controller dengan nama file Page.php pada folder app/Controllers, untuk lebih jelasnya perhatikan gambar berikut:

Ketikkan baris kode berikut ke dalam Controll Page tersebut:

<?php namespace App\Controllers;  

class Page extends BaseController  
{  

  public function HomePage()  
  {  
    $data['post'] = [  
      'title' => HOME_TITLE,  
      'description' => HOME_DESCRIPTION,  
      'keywords' => HOME_KEYWORDS,  
      'content' => 'Berisi daftar artikel untuk home page',
      'related' => 'Tidak ada artikel terkait'  
    ];  

    return view(THEME . '/index', $data);  
  }  

}

Method HomePage() pada Controller Page di atas berfungsi untuk mengirimkan data pada View yang akan digunakan, yaitu file index.php.

Jika sudah selesai simpanlah perubahannya dan kemudian refresh kembali web projek Anda untuk melihat hasilnya.

Munculnya pesan “Invalid file” tersebut disebabkan karena kita belum membuat View dengan nama file index.php pada folder test (nama “test” ini berdasarkan pada setting THEME yang sudah Anda buat sebelumnya di dalam file app/Config/Constants.php).

Buatlah sebuah folder dengan nama “test” didalam folder app/Views. Kemudian buat sebuah View dengan nama file index.php di dalam folder app/Views/test yang baru saja Anda buat tersebut, lalu ketikkan baris kode berikut:

<?php    
echo '<pre>';    
print_r($post);  
echo '</pre>';

Jika sudah selesai silahkan simpan perubahannya dan lihatlah hasilnya.

Sekarang kita akan coba membuat halaman About dan DMCA untuk web projek kita tersebut. Silahkan tambahkan baris kode berikut pada file app/Config/Routes.php

$routes->get('/about', 'Page::AboutPage');  
$routes->get('/dmca', 'Page::DMCAPage');

Jika sudah selesai simpanlah perubahannya.

Tambahkan baris kode berikut pada file app/Controllers/Page.php

public function AboutPage()  
{  
  $data['post'] = [  
    'title' => 'About Us',  
    'description' => 'About Us',  
    'keywords' => 'About Us',  
    'content' => 'Artikel ketik di View',  
    'related' => 'Tidak ada artikel terkait'  
  ];  

  return view(THEME . '/about', $data);  
}  

public function DMCAPage()  
{  
  $data['post'] = [  
    'title' => 'DMCA',  
    'description' => 'DMCA',  
    'keywords' => 'DMCA',  
    'content' => 'Artikel ketik di View',  
    'related' => 'Tidak ada artikel terkait'  
  ];  

  return view(THEME . '/dmca', $data);  
}

Jika sudah selesai simpanlah perubahannya.

Setelah Anda menambahkan Method AboutPage() dan DMCAPage() di dalam Controller Page, selanjutnya buatlah View dengan nama file about.php dan dmca.php di dalam folder app/Views/test.

Berikut adalah baris kode untuk View about (about.php)

<?php  
  echo '<pre>';  
  print_r($post);  
  echo '</pre>';  
?>  

<p>Halaman ini berisi informasi tentang website Anda.</p>

Jika sudah selesai simpan perubahannya dan lihatlah hasilnya dengan mengakses web projek Anda melalui url:

http://agcstarter.test/about

Berikut adalah baris kode untuk View dmca (dmca.php)

<?php  
  echo '<pre>';  
  print_r($post);  
  echo '</pre>';  
?>  

<p>Halaman ini berisi informasi tentang DMCA.</p>

Jika sudah selesai simpanlah perubahannya dan lihatlah hasilnya dengan mengakses web projek Anda melalui url:

http://agcstarter.test/dmca

Sampai sejauh ini Anda telah memiliki tiga buah halaman untuk web projek Anda, yaitu home page, about dan dmca.

Ada satu halaman yang lagi yang wajib Anda buat yaitu halaman detail yang berfungsi untuk menampilkan isi suatu konten secara lengkap. Silahkan tambahkan terlebih dahulu baris kode berikut pada file app/Config/Routes.php

$routes->get('/(:any)', 'Page::DetailPage/$1');

Jika sudah selesai simpanlah perubahannya.

Perhatikan untuk Route yang terakhir, disana kita menggunakan (:any) yang artinya setelah tanda slash (/) dapat berisi apa saja (angka, huruf, atau karakter yang diijinkan dalam pembuatan slug oleh CodeIgniter), dan itu akan dijadikan sebagai parameter oleh Method DetailPage() di dalam Controller Page, hal ini ditandai dengan adanya /$1.

Selanjutnya tambahkan baris kode berikut pada Controller Page

public function DetailPage($title)  
{  
  $title = ucwords(str_replace('-', ' ', $title));  

  $data['post'] = [  
    'title' => $title,  
    'description' => "Deskripsi singkat tentang $title",  
    'keywords' => "Keyword tentang $title",  
    'content' => "Isi artikel tentang $title",  
    'related' => "Daftar artikel yang berkaitan dengan $title" 
  ];  

  return view(THEME . '/detail', $data);  
}

Jika sudah selesai simpanlah perubahannya, kemudian buatlah sebuah View dengan nama file detail.php dan ketikkan baris kode berikut:

<?php  
echo '<pre>';  
print_r($post);  
echo '</pre>';

Jika sudah selesai simpanlah perubahannya dan lihatlah hasilnya dengan mengakses web projek Anda melalui url

http://agcstarter.test/ternak-lele

Di dalam projek pembuatan web AGC biasanya terdapat dua jenis halaman, yaitu yang bersifat statis (konten tetap dan tidak berubah, yaitu halaman About dan DMCA), dan halaman yang bersifat dinamis (kontent dapat berubah-ubah, yaitu Homepage dan Detail). Untuk halaman yang bersifat statis artikel dapat ditulis secara langsung di dalam View, sedangkan halaman yang bersifat dinamis menurut konsep MVC harus didefinisikan melalui Model.

Model berfungsi menyediakan data untuk Controller yang kemudian oleh Controller akan dikirimkan ke View untuk ditampilkan. Sumber data suatu Model biasanya berasal dari database, file, API atau dapat juga bersumber dari hasil scraping tentunya. Namun untuk menyederhanakan contoh, pada projek kita kali ini kita hanya akan membuat data dummy yang dibuat pada Model itu sendiri.

Buatlah sebuah file dengan nama Content.php pada folder app/Models, lalu ketikkan baris kode berikut:

<?php namespace App\Models;  

use CodeIgniter\Model;  

class Content extends Model  
{     

  public function GetContents($total)  
  {  
    for($i=0; $i<$total; $i++)  
    {  
      $contents[] = [  
        'title' => "Judul Artikel $i",  
        'content' => "Isi artikel yang ke $i"  
      ];  
    }  

    return $contents;  
  }  

  public function GetDetails($title)  
  {  
    $title = ucwords(str_replace('-', ' ', $title));  

    $content = [  
      'title' => "$title",  
      'content' => "Isi artkel yang berjudul $title"  
    ];  

    return $content;  
  }  

}

Jika sudah selesai simpanlah perubahannya.

Model Content di atas memiliki dua buah Method, yaitu Method GetContents() berfungsi untuk mengambil daftar kontent sejumlah yang ditentukan dalam parameter $total, dan Methode GetDetails() yang berfungsi untuk mengambil data detail suatu kontent berdasarkan parameter $title.

Kita akan coba menggunakan Model Content tersebut pada Method HomePage() dan DetailPage() di dalam Controller Page.

Silahkan Anda modifikasi Controller Page agar tampak seperti baris kode berikut:

<?php namespace App\Controllers;

use App\Models\Content;

class Page extends BaseController
{

  protected $content;

  public function __construct()
  {
    $this->content = new Content();
  }

  public function HomePage()
  {
    $data['post'] = [
      'title' => HOME_TITLE,
      'description' => HOME_DESCRIPTION,
      'keywords' => HOME_KEYWORDS,
      'content' => $this->content->GetContents(TOTAL_POSTS_HOMEPAGE),
      'related' => 'Tidak ada artikel terkait'
    ];

    return view(THEME . '/index', $data);
  }

  public function DetailPage($title)
  {
    $content = $this->content->GetDetails($title);
    $title = $content['title'];

    $data['post'] = [
      'title' => $title,
      'description' => "Deskripsi singkat tentang $title",
      'keywords' => "Keyword tentang $title",
      'content' => $this‑>content‑>GetDetails($title),
      'related' => $this‑>content‑>GetContents(TOTAL_POSTS_RELATED)
    ];

    return view(THEME . '/detail', $data);
  }

  public function AboutPage()
  {
    $data['post'] = [
      'title' => 'About Us',
      'description' => 'About Us',
      'keywords' => 'About Us',
      'content' => 'Artkel ketik di View',
      'related' => 'Tidak ada artikel terkait'
    ];

    return view(THEME . '/about', $data);
  }

  public function DMCAPage()
  {
    $data['post'] = [
      'title' => 'DMCA',
      'description' => 'DMCA',
      'keywords' => 'DMCA',
      'content' => 'Artkel ketik di View',
      'related' => 'Tidak ada artikel terkait'
    ];

    return view(THEME . '/dmca', $data);
  }

}

Jika sudah selesai simpanlah perubahannya dan lihatlah hasilnya.

Hasil pada halaman home page:

Biasanya halaman home page berisi daftar beberapa artikel berupa excerpt, pada contoh di atas daftar artikel dipresentasikan dalam suatu array.

Hasil pada halaman detail:

Pada contoh di atas kita memiliki sebuah konten utama dan beberapa konten yang terkait dengan konten utama tersebut.