3. View - notafrancescodavid/webmvcframework GitHub Wiki

Static design

A view has the responsibility to organize and show data in graphical structures. With WebMVC, a View class that operates on a template containing HTML code manages this responsibility. To write an application that uses a view you can create:

  • a custom template file containing the HTML of the page that you want to show
  • an object of the framework\View class provided by WebMVC to manage the template
  • a custom Controller

In WebMVC, the controller is the only entity that allows you to instantiate and run code starting from an HTTP request. Therefore, if you need to show an HTML page, you must create a controller that: a) uses a view object that manages the HTML file, and b) provides the output.

We can write an example that shows an HTML file into the browser following the steps described above.

Create the filetemplates\home.html.tpl containing the HTML of the web page and put it in the directory templates:

<!DOCTYPE html>
<html>
  <head>
    <title>Site home page</title>
  </head>
  <body>
    <p>Welcome to the site Home Page</p>
  </body>
</html>

The file must have a .tpl extension in order to be accepted by WebMVC. Then, create the Home controller controllers\Home.php as follows and put it in the directory controllers (pay attention to the comments):

namespace controllers;

use framework\Controller;
use framework\View;

class Home extends Controller
{
    /**
     * Home constructor.
     * @override parent constractor
     */
    public function __construct()
    {
      /**
       * A reference to the file: templates/home.html.tpl
       * @note Do not to specify the file extension ".html.tpl".
       */
        $tplName = "home";


      /**
       * Set the view variable with a new object of type framework\View. 
       * @note: We create the View object by using the template reference.
       */
        $this->view = new View($tplName);

      /**
       * The parent class Controller handle the necessary operations to print the output. 
       * First, it uses the created View object to load the file containing the template, 
       * then it renders the template in the browser. 
       */

        parent::__construct($this->view);
    }
    
}

Finally, run the controller by typing the following address into your web browser:

http://localhost/home

You should see the page:
Welcome to the site Home Page

The basic control flow for the cooperation of Controller and View

The example above highlights the basic flow of control for the execution of a program within WebMVC where a controller and a view cooperate to do a job. It is analogous to the control flow of a command interpreter:

  1. Accept a command (the controller accepts an HTTP request)
  2. Execute the command (the controller executes the command using a View for the management of a template)
  3. Print the output (the controller rends the HTML into your browser)

Summary

The example of this section shows the basic control flow of a custom controller that cooperates with the framework View class to show an HTML file. There are circumstances where we need to introduce a new view defined by the developer because the framework View class alone in no more sufficient. This is the case of dynamic views that manage dynamic contents. In the next two sections, we illustrate the techniques to create a new view aiming at the dynamic contents management.

Next page: dynamic content.

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️