Introduction

Before starting the tutorial, you have to do which is described on the requirements first. The goals for this tutorial is, how to interacted with View and Controller. Model interaction will be explored at next tutorial. Ok, lets get started!.

Hello World! part 1

Hello World is often used to illustrate the basic syntax of a programming language. But on Seme Framework, Hello World used to checked the basic MVC purpose.

Configuration adjustment

We assumed that you put Seme Framework which is described In the Download & Install page. After that, start the XAMPP and open http://localhost/seme_framework.

Controller

On Seme Framework, the default controller named home.php with its class name name Home too. First, open files located at app/controller/home.php. If the file doesnt exists, create one.

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

And then open http://localhost/seme_framework, it should show Hello World!.

Hello World! part 2

On hello worl part 2, we will practice about Seme Framework view, view component, and theme also loading a theme and view in a controller.

View

On this tutorial we will learn how to render the view with theme and passing the data from controller to view passed by controller.

This tutorial using materializeCSS as the CSS Library.

Create Theme: front.

Before start, we have to understand the theme directory structure.

x
–
+
app/
└── view/
 └── front/
  ├── home
  │ ├── home.php
  │ └── home_bottom.php
  ├── theme.json
  ├── script.json
  └── page/
   ├── col-1.php
   └── html/
     └── head.php

Check the app/view/front/ directory, create directory if does not exists.

Check the app/view/front/page/ directory, create directory if does not exists.

Check the app/view/front/page/html/ directory, create directory if does not exists.

File theme.json

File theme.json purpose is to define the css that are required for creating the Theme. Open files located at app/view/front/theme.json. If the file does not exists, create one. And then, put this code on it.

x
–
+
[
"<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\" \/>"
]

Learn more about theme.json .

File script.json

File script.json purpose is to define the javascript that are required for creating the Theme. We will define the which scripts to load. Open files located at app/view/front/script.json. If the file does not exists, create one. And then, put this code on it.

x
–
+
[
"<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>"
]

Learn more about script.json .

Create HTML Main layout

Seme Framework support HTML main layout for rendering html, javascript, and content. Open files located at app/view/front/page/col-1.php. If the file does not exists, create one. And then, put this code on it.

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>

There is only one variable can pass through the view from controller.

So, we have to put any variable that will pass into view in single array.

In this example we use $data variable in controller.

Separated HTML head

Seme Framework support separated layout element for maximizing reusable components. To do so open files located at app/view/front/page/html/head.php. If the file does not exists, create one. And then, put this code on it.

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>

Seme Framework theme engine required these files to work properly:

  1. theme.json,
  2. script.json,
  3. and a layout page/col-1.php

So, we have to put any variable that will pass into view in single array.

$data['hello'] from controller, will be auto extracted into $hello variable in view.

As well as with the other array keys, will be auto extracted.

Create the Content

Seme Framework support separated theme content. This content will be rendered on inner main layout. To do so, open files located at app/view/front/home/home.php. If the file does not exists, create one. And then, put this code on it.

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>
Implement on the Controller

After creating a theme with its content, now we have to integrating it from controller.

To do so, open app/controller/home.php and then change the source code with this code:

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();
  }
}
Test the Result

For testing the result, open http://localhost/seme_framework from browser and then lets we see what we got.

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.

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

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();
  }
}

To test it, open http://localhost/seme_framework using browser. It should show an javascript alert(), view with loaded CSS, and show H1 with content Hello World from view and using theme.

Tutorials
Tutorial: Get Data