Perkenalan penggunaan Seme Framework

Sebelum memulai tutorial, Anda harus melakukan yang dijelaskan pada halaman persyaratan terlebih dahulu.

Tujuan dari tutorial ini adalah, bagaimana berinteraksi dengan View dan Controller. Interaksi model akan dibahas pada tutorial berikutnya.

Baiklah kita mulai!

Hello World!

Hello World sering digunakan untuk menggambarkan sintaks dasar dari suatu bahasa pemrograman.

Tetapi pada Seme Framework, Hello World Hello World digunakan untuk memeriksa tujuan dasar MVC.

Penyesuaian konfigurasi

Asumsikan Seme Framework telah di instal sesuai dengan halaman Download & Install.

Setelah itu, jalankan XAMPP dan buka http://localhost/seme_framework melalui google chrome atau firefox.

Controller

Seme framework memiliki default controller yang bernama home.php dengan nama kelas yang sama yaitu Home.

Pertama, buka file yang terletak di app/controller/home.php. Apabila tidak ada file atau direktori tersebut, buatlah terlebih dahulu.

              <?php
class Home extends SENE_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
    public function index()
    {
        echo 'Hello World!';
    }
}

Kemudian buka alamat http://localhost/seme_framework, itu seharusnya sudah memunculkan Hello World! langsung dari kelas home.php controller.

View

Pada tutorial ini kita akan mempelajari cara merender tampilan dengan tema dan meneruskan data dari controller ke tampilan yang dilewatkan oleh controller.

Tutorial ini menggunakan materializeCSS sebagai library CSS-nya.

Membuat tema: front.

Sebelum memulai, kita harus memahami struktur direktori tema.

-| app/
---| view/
-----| front/
-------| theme.json
-------| script.json
-------| page/
---------| col-1.php
-----------| html/
-------------| head.php

Periksa direktori app/view/front/ apabila belum ada, silakan buat direktori tersebut.

Periksa direktori app/view/front/page/ apabila belum ada, silakan buat direktori tersebut.

Periksa direktori app/view/front/page/html/ apabila belum ada, silakan buat direktori tersebut.

File theme.json

File theme.json digunakan untuk mendefinisikan css apa saja yang akan digunakan oleh tema.

Buka file yang terletak di app/view/front/theme.json.

apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.


[
  "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" \/>",
  "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css\" \/>"
]

File script.json

File script.json digunakan untuk mendefinisikan file javascript apa saja yang akan digunakan oleh tema.

Seme Framework akan menentukan skrip mana yang akan dimuat. Buka file yang terletak di app/view/front/script.json.

apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.


[
  "<script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"><\/script>",
  "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js\"><\/script>"
]

Membuat layout HTML utama

Seme Framework mendukung tata letak utama HTML untuk rendering html, javascript, dan konten.

Buka file yang terletak di app/view/front/page/col-1.php.

apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.

<!DOCTYPE html>
<html>
  <?php $this->getThemeElement('page/html/head', $__forward) ?>
  <body>
    <?php $this->getThemeContent() ?>

  	<!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
  	<?php $this->getJsFooter(); ?>

  	<!-- Load and execute javascript code used only in this page -->
    <script>
  		$(document).ready(function(e){
  			<?php $this->getJsReady(); ?>
  		});
  		<?php $this->getJsContent(); ?>
  	</script>
  </body>
</html>

Hanya ada satu variabel yang dapat melewati view dari controller.

Jadi, kita harus meletakkan variabel apa pun yang akan ditampilkan dalam array tunggal.

Dalam contoh ini Seme Framework menggunakan variabel $data dengan tipe data array didalam controller home.php.

Pemisahan bagian HEAD dari HTML

Dengan menggunakan Seme Framework memungkinkan untuk memisahkan komponen html untuk memaksimalkan penggunaan kembali komponen HTML tersebut.

Untuk melakukannya, buka file yang terletak di app/view/front/page/html/head.php.

apabila belum ada, silakan buat file tersebut dan paste-kan isinya dari kode dibawah ini.

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title><?=$this->getTitle()?></title>

	<meta name="description" content="<?=$this->getDescription()?>">
	<meta name="keyword" content="<?=$this->getKeyword()?>"/>
	<meta name="author" content="<?=$this->getAuthor()?>">
	<meta name="robots" content="<?=$this->getRobots()?>" />

	<!-- Icons -->
	<!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
	<link rel="shortcut icon" href="<?=$this->getIcon()?>">
	<!-- END Icons -->

	<meta name="msapplication-TileColor" content="#353769">
	<meta name="theme-color" content="#353769">
	<?php $this->getAdditionalBefore()?>
	<?php $this->getAdditional()?>
	<?php $this->getAdditionalAfter()?>
</head>

Pengaturan tema di Seme Framework membutuhkan file dibawah ini supaya dapat berjalan dengan baik:

theme.json,
script.json,
dan sebuah file untuk layout HTML. Contoh: page/col-1.php

Jadi, kita harus meletakkan variabel apa pun yang akan ditampilkan dalam array tunggal.

$data['hello'] dari controller, akan diekstraksi secara otomatis menjadi variabel $hello ketika berada didalam view.

Begitupun dengan nilai atau kunci lainnya, akan diekstraksi secara otomatis juga.

Membuat isi tema

Seme Framework mendukung konten tema yang terpisah. Konten ini akan dirender pada tata letak utama bagian dalam.

Untuk melakukanya, buka file yang terletak di app/view/front/home/home.php.

Apabila file tersebut belum ada, silakan buat file-nya dulu, kemudian paste-kan kode dibawah ini.

<div class="container">
  <div class="row">
    <div class="col m12 s12">
      <div class="card rounded preload-any">
        <div class="card-content ">
          <span class="card-title"><?=$hello?> passed to view</span>
          <p>This is from view only</p>
          <br>
          <div class="btn-group">
            &nbsp;
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Implementasi di Controller

Setelah membuat tema, beserta isinya sekarang saatnya untuk integrasikan semuanya, mulai dari Controller sampai dengan view.

Untuk melakukannya, buka file app/controller/home.php kemudian edit isinya dengan menggunakan kode dibawah ini:

<?php
class Home extends SENE_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
  }
  public function index()
  {
    $data = array();
    $this->setTitle('Seme Framework Introduction!');
    $this->setDescription("Congratulation, you have done well.");
    $this->setKeyword('Seme Framework');
    $this->setAuthor('Seme Framework');

    $data['hello'] = "this is from controller";

    $this->putThemeContent("home/home",$data); //pass data to view

    $this->loadLayout("col-1",$data);
    $this->render();
  }
}

Melihat hasilnya

Untuk melihat hasil dari pembuatan tema ini, cukup buka alamat http://localhost/seme_framework melalui google chrome atau firefox.

Kemudian, kita lihat hasilnya apakah sama seperti screenshot dibawah ini.

Bonus Mission

With the main layout that we have created before, we can include and render javascript using Seme Framework.

For achieving this, first create the file app/view/front/home/home_bottom.php.

And then, put this code on it.

alert('This is Hello World from app/view/home/home_bottom.php');

After that, we have to load the home bottom from app/controller/home.php.

<?php
class Home extends SENE_Controller
{
  public function __construct()
  {
    parent::__construct();
    $this->setTheme('front');
  }
  public function index()
  {
    $data = array();
    $this->setTitle('Seme Framework Introduction!');
    $this->setDescription("Congratulation, you have done well.");
    $this->setKeyword('Seme Framework');
    $this->setAuthor('Seme Framework');

    $data['hello'] = "this is from controller";

    $this->putThemeContent("home/home",$data); //pass data to view
    $this->putJsContent("home/home_bottom",$data); //pass data to view

    $this->loadLayout("col-1",$data);
    $this->render();
  }
}

To test it, open http://localhost/seme_framework using browser.

It should show an alert, view with loaded CSS, and show H1 with content Hello World from view and using theme.