Tutorial ini menggunakan materializeCSS sebagai library CSS-nya.
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.
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>
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>
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">
</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.
