Perkenalan penggunaan Seme Framework 4

Sebelum memulai tutorial, Anda harus melakukan apa 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.

x
–
+
<?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.

Jika tampilannya sudah sesuai seperti yang ada digambar, berarti tutorial hello world pertama telah selesai. Sekarang kita akan melanjutkan tutorial Hello World bagian kedua.

Hello World bagian 2

Pada hello world bagian kedua, kita akan mencoba untuk mengimplementasikan Hello World melalui sebuah tema tampilan. Kita akan mulai membuat view, kemudian tema, lalu menyesuaikan controller supaya dapat memanggil tema yang sudah dibuat.

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.

x
–
+
app/
└── view/
 └── front/
  ├── home
  │ ├── home.php
  │ └── home_bottom.php
  ├── 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.

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

Pelajari selengkapnya tentang theme.json .

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.

x
–
+
{
  "script":
  [
  {
    "src": "https://code.jquery.com/jquery-3.5.1.min.js"
  },
  {
    "src": "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"
  }
  ]
}

Pelajari selengkapnya tentang script.json .

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.

x
–
+
<!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.

x
–
+
<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:

  1. theme.json,
  2. script.json,
  3. 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.

x
–
+
<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 ganti (edit) isinya dengan menggunakan kode dibawah ini:

x
–
+
<?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 Tambahan

Dengan layout utama yang telah kita buat sebelumnya, kita dapat memasukkan dan merender javascript menggunakan Seme Framework. Untuk mencapai ini, pertama buat file app/view/front/home/home_bottom.php. Dan kemudian tambahkan kode ini di atasnya.

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

Setelah itu, kita harus memuat tombol beranda dari app/controller/home.php.

x
–
+
<?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();
  }
}

Untuk mengujinya, buka http://localhost/seme_framework menggunakan browser. Apabila sudah benar, itu akan menampilkan sebuah alert, kemudian menampilkan H1 dengan konten Hello World dari tampilan dan menggunakan tema.

Tutorial
Tutorial: Notfound