Dasar-dasar pembuatan Halaman Statis

Setelah mempelajari perutean , kita akan belajar membuat halaman statis dan berpindah antar halaman tersebut Sebelum memulai tutorial ini, pastikan sudah menginstall dan menjalankan Seme Framework. Diasumsikan Seme Framework berjalan menggunakan XAMPP dan diinstall di D:/XAMPP/htdocs/seme_framework. Kemudian buka aplikasi Atom IDE, VsCode atau notepad++. Setelah itu pilih file / Open Directory dan arahkan ke tempat folder atau direktori instalasi Seme Framework.

Menyetel pengaturan base_url()

Sebelum melanjutkan, periksa dulu nilai dari variabel $site pada file app/config/development.php, pastikan nilainya http://localhost/seme_framework/. Untuk lebih jelasnya lihat contoh pengaturannya.

x
–
+
...
/**
 * Site Base URL with http:// or https:// prefix and trailing slash
 * @var string
 */
$site = "http://localhost/seme_framework/";
...

Membuat Controller Produk

Buat file baru di dalam app/controller/produk.php untuk membuat Controller produk. Kemudian, tuliskan kode ini didalam file produk.php dan simpan.

x
–
+
<?php
class Produk extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo 'Nanti halaman produk akan tampil disini';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/produk/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada dicontroller berarti anda telah berhasil halaman baru.

Merubah isi Controller Home

Sekarang kita akan mencoba untuk menambahkan link dengan tag <a href="...">...</a> supaya dapat mengarah ke halaman Produk. Untuk itu, kita akan merubah file app/controller/home.php kemudian ubah isi file tersebut menjadi sama seperti contoh kode dibawah ini.

x
–
+
<?php
class Home extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo 'Halaman utama';
    echo '<br>';
    echo 'Menuju ke halaman <a href="'.base_url().'produk">produk</a>';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada di controller home berarti anda telah berhasil merubah controller Home.

Menambah List Produk

Sekarang kita akan menambahkan list produk, yaitu produk A dan produk B untuk ilustrasi. Dan tidak lupa juga untuk menambahkan link kembali ke halaman utama juga dengan tag <a href="...">...</a>. Untuk itu buka file app/controller/produk.php dan ganti isinya seperti contoh kode dibawah ini.

x
–
+
<?php
class Produk extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo 'Halaman Produk';
    echo '<br>';
    echo 'Produk A <br>';
    echo 'Produk B <br>';
    echo 'Kembali ke <a href="'.base_url().'">Halaman Utama</a>';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/produk/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada di controller home berarti anda telah berhasil merubah controller Home.

Membuat contoh halaman lanjutan

Sekarang kita akan mencoba membuat contoh halaman lanjutan untuk produk, yaitu halaman detail produk.

Merubah isi Controller Home

Sekarang kita akan mencoba untuk menambahkan judul dengan tag <h1>...</h1> dan <p>...</p> untuk sub judulnya. Untuk itu, kita akan merubah file app/controller/home.php kemudian ubah isi file tersebut menjadi sama seperti contoh kode dibawah ini.

x
–
+
<?php
class Home extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo '<h1>Halaman utama</h1>';
    echo '<p>Selamat datang di Toko Kamu</p>';
    echo '<br>';
    echo 'Lihat <a href="'.base_url().'produk">Produk</a>';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada di controller home berarti anda telah berhasil merubah controller Home.

Menambahkan Detail Produk

Sekarang kita akan menambahkan 2 metode baru, yaitu metode a() dan b() pada kelas Produk. Sekarang ganti isi file app/controller/produk.php dengan kode sumber seperti dibawah ini.

x
–
+
<?php
class Produk extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo 'Halaman Produk';
    echo '<br>';
    echo 'ke <a href="'.base_url().'produk/a/">Produk A</a><br>';
    echo 'ke <a href="'.base_url().'produk/b/">Produk B</a><br>';
    echo 'Kembali ke <a href="'.base_url().'">Halaman Utama</a>';
  }
  public function a(){
    echo '<h1>Produk A</h1>';
    echo '<p>Produk A cocok untuk dipakai di musim hujan</p>';
    echo '<p style="text-decoration: line-through">Harga IDR 150.000</p>';
    echo '<p>Harga IDR 125.000</p>';
    echo '<br>';
    echo 'Kembali ke <a href="'.base_url().'produk">Produk</a>';
  }
  public function b(){
    echo '<h1>Produk B</h1>';
    echo '<p>Produk B cocok untuk dipakai di musim panas</p>';
    echo '<p>Harga IDR 150.000</p>';
    echo '<br>';
    echo 'Kembali ke <a href="'.base_url().'produk">Produk</a>';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/produk/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada di controller home berarti anda telah berhasil merubah controller Home.

Menggunakan Direktori Produk

Sekarang kita akan mencoba membuat contoh halaman produk dengan menggunakan direktori.

Buat direktori Produk

Pertama-tama, buat direktori produk didalam app/controller.

Pindahkan controller produk

Kemudian, pindahkan controller app/controller/produk.php ke dalam direktori app/controller/produk/produk.php.

Ganti nama file dan nama kelas controller Produk

Setelah itu ganti nama kelas dan controller Produk menjadi Home, begitu juga dengan nama filenya menjadi app/controller/produk/home.php Untuk lebih lengkapnya, bisa lihat contoh kode dibawah ini.

x
–
+
<?php
class Home extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo 'Halaman Produk';
    echo '<br>';
    echo 'ke <a href="'.base_url().'produk/a/">Produk A</a><br>';
    echo 'ke <a href="'.base_url().'produk/b/">Produk B</a><br>';
    echo 'Kembali ke <a href="'.base_url().'">Halaman Utama</a>';
  }
}

Pergeseran Peta Segmen URL

Ketika kita menggunakan direktori untuk produknya, maka segmen URL pun berubah. Dari asalnya merujuk pada metode didalam kelas produk, setelah menggunakan direktori maka link produk detail akan merujuk pada sebuah kelas bukan metode. Pada contoh kali ini, kelas yang ditunjuk adalah kelas A dan kelas B didalam direktori produk.

Membuat Kelas A

Sekarang kita akan membuat kelas A untuk detail produk A, buat file baru dan simpan didalam app/controlller/produk/a.php.

x
–
+
<?php
class A extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo '<h1>Produk A</h1>';
    echo '<p>Produk A cocok untuk dipakai di musim hujan</p>';
    echo '<p style="text-decoration: line-through">Harga IDR 150.000</p>';
    echo '<p>Harga IDR 125.000</p>';
    echo '<br>';
    echo 'Kembali ke <a href="'.base_url().'produk">Produk</a>';
  }
}

Membuat Kelas B

Sekarang kita akan membuat kelas B untuk detail produk B, buat file baru dan simpan didalam app/controlller/produk/b.php.

x
–
+
<?php
class B extends SENE_Controller {
  public function __construct(){
    parent::__construct();
  }
  public function index(){
    echo '<h1>Produk B</h1>';
    echo '<p>Produk b cocok untuk dipakai di musim panas</p>';
    echo '<p>Harga IDR 150.000</p>';
    echo '<br>';
    echo 'Kembali ke <a href="'.base_url().'produk">Produk</a>';
  }
}

Setelah itu buka Browser, kemudian buka alamat localhost/seme_framework/produk/ dan tekan enter untuk membuka halaman tersebut. Apabila, muncul tulisan seperti yang ada di controller home berarti anda telah berhasil merubah controller Home.

Kesimpulan

  • Dari tiga contoh diatas, dapat disimpulkan bahwa Seme Framework secara otomatis dapat menentukan pemetaan Alamat URL secara otomatis.
  • Untuk membuat halaman harus ada 2 tahap ini.
    1. Membuat file baru untuk view.
    2. Kemudian untuk kelas Controller-nya:
      • buat kelas controller baru, kemudian panggil view-nya, atau
      • Ubah di Controller-nya, Tambahkan metode function baru, kemudian panggil view-nya, atau
      • Ubah di Controller-nya, ubah metode / function yang sudah ada, kemudian panggil view-nya.
Basic Routing
Tutorial