Skip to content

DataRepeater

Rosario Carvello edited this page May 18, 2020 · 14 revisions

The simpler component made available by WebMVC is framework\components\DataRepeater provided by the framework to easy the displaying of data coming from a given source. Two possible scenarios where the DataRepeater can be conveniently used are when: a list of records from a database or data stored in an array must be provided in the output according to a given visualization structure.
In the example above example, implemented by coding the SimpleDataRepeater assembly, we show how an instance of framework\components\DataRepeater will provide data repetition from different data sources, array and DB, and how you can use it.

First of all the code for templates\simple_data_repeater.html.tpl where a Block Parts is designed to renders data.

<!DOCTYPE html>
<html>
<head>
    <title>DataRepeater component</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
</head>
<body>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
<div class="container-fluid">
    <h2>Part list example using the DataRepeater component</h2>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Part code</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                   	<!-- BEGIN Parts -->
                     <tr>
                        <td>{part_code}</td>
                        <td>{description}</td>
                    </tr> 
                	<!-- END Parts -->
                </tbody>
            </table>
        </div>
    </div>
</div>
</html>

Here the simple views\SimpleDataRepetaer.php

<?php
namespace views;

use framework\View;

class SimpleDataRepeater extends View
{

    /**
    * Object constructor.
    *
    * @param string|null $tplName The html template containing the static design.
    */
    public function __construct($tplName = null)
    {
        if (empty($tplName))
            $tplName = "/simple_data_repeater";
        parent::__construct($tplName);
    }
    
}

Below we show the models\SimpleDataRepetaer.php in which we coded two methods getPartsFromArray() and getPartsFromDB() (read code comments) providing respectively data from array and DB. You will find the DDL of the table part here (lines from 171 to 198)

<?php

namespace models;

use framework\Model;

class SimpleDataRepeater extends Model
{

    public function getPartsFromArray()
    {

        $users = array(
            array('part_code' => '1', 'description' => 'description 1'),
            array('part_code' => '2', 'description' => 'description 2'),
            array('part_code' => '3', 'description' => 'description 3'),

        );
        return $users;
    }

    /**
     * Provides parts from table part
     *
     * @return \mysqli_result
     * @note  resultset must be in a proper keys and number of columns
     * required by the Block which is used by the Datarepeater
     * component.
     */
    public function getPartsFromDB()
    {
       $this->sql = "SELECT part_code,description FROM part";
       $this->updateResultSet();
    }

}

Given that DataRepeater is a component that populates variables of a template block with data coming from data soyrces:

where the controller UserListDataRepeater shown in example 7.1.a uses the component DataRepeater to populate a block and inheritance to extend the controller UserList. The constructor of DataRepeater takes as parameters: a view, a model, the name of the template block to manipulate, and a reference to an array. Apparently, the MVC unit UserListDataRepeater seems more complicated than UserList because it has 6 components instead of 4. However, the inheritance can be avoided, if you wish, completing the definition of example 7.1.a with the methods of the controller UserList, and then removing it from the MVC unit. Furthermore, the definition of views\UserList is somewhat simplified, as shown in the example 7.1.b; this simplification becomes more evident when we have to substitute many placeholders in a template.

Clone this wiki locally