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 Model, View, And Controller.

Ok, lets get started!.

Hello World!

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.

Setup the config

We assumed that you put Seme Framework which is described In the 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.

<?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!.

Model

On this tutorial we will learn, how to interacted with model from controller.

First, open files located at app/model/hello_model.php.

If the file doesnt exists, create one.

And then, put this code on it.

<?php
class Hello_Model extends SENE_Model
{
    public function __construct()
    {
        parent::__construct();
    }
    public function get()
    {
        return 'Hello World, from model';
    }
}
            

And then, open and edit the app/controller/home.php again.

Put model loader on constructor.

<?php
class Home extends SENE_Controller
{
  public function __construct()
  {
      parent::__construct();
      $this->load("hello_model", "h");
  }
  public function index()
  {
      echo $this->h->get();
  }
}
            

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

View

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

Create Theme: front.

first of all, we will define which css to call. Open files located at app/view/front/theme.json.

If the file doesnt exists, create one. And then, put this code on it.

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

Second, we will define the script to load. Open files located at app/view/front/script.json.

If the file doesnt exists, create one. And then, put this code on it.

[
  "<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>"
]
            

Third, create the HTML template. Open files located at app/view/front/page/col-1.php.

If the file doesnt exists, create one. And then, put this code on it.

<!DOCTYPE html>
<html>
  <?php $this->getThemeElement('page/html/head', $__forward) ?>
  <?php if($this->config->environment == 'production'){ ?>
  <?php } ?>
  <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>
            

Fourth, we have to create separated html head. Open files located at app/view/front/page/html/head.php.

If the file doesnt exists, create one. And then, put this code on it.

<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>
            

Fifth, we have to create main content view. Open files located at app/view/front/home/home.php.

If the file doesnt exists, create one.

And then, put this code on it.

<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>
            

Sixth, we have to create JavaScript for view specific. Open files located at app/view/front/home/home_bottom.php.

If the file doesnt exists, create one.

And then, put this code on it.

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

Last, open and edit the app/controller/home.php again.

Put theme loader on constructor, load the view, set the layout and render it.

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

    $data['hello'] = $this->h->get();

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

And then open http://localhost/seme_framework.

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