Displaying web pages

General principle

Web pages are generated with the Smarty templates engine ([https://www.smarty.net/). The templates are stored in two places:

  • vendors/equinton/ppci/src/Views/templates/ppci, which contains:
  • the main page of the application main.html, the only page called
  • the header (header.tpl), which includes the menu, and the footer (footer.tpl)
  • loading generic javascript libraries (main_js.tpl), including bootstrap 3, datatables, etc.
  • all the templates needed for rights and user management, plus some pages common to all applications (sql query module, for example)
  • mail templates (mail subfolder)
  • app/Views/templates: application-specific templates, including:
  • the home page: main.tpl
  • loading of specific javascript libraries: app_js.tpl
  • the About pages about_fr.tpl and about_en.tpl

The Smarty engine will prepare PHP pages during the compilation operation. These pages are stored in the writable/templates_c folder.

Appearance

Bootstrap 3 was compiled using the colors of the former Irstea graphic charter. Additional CSS styles are available in the public/display/CSS/bootstrap-prototypephp.css file.

Storing elements sent to the browser

Images are usually stored in the public/display/images folder.

Most Javascript libraries are managed by npm, and are stored in public/display/node-modules. If additional scripts are needed (and not integrated into Smarty templates), you will find them in the public/display/javascript folder.

Calling pages in the application

The display of HTML pages is entrusted to the SmartyPpci view, which can be instantiated as follows:

$view = service ("Smarty");

See the views.html page for details on how it works.

Form Specifics

Most forms are constructed like this:

<form class="form-horizontal" id="appliForm" method="post" action="appliChange">
    <input type="hidden" name="aclappli_id" value="{$data.aclappli_id}">
    <input type="hidden" name="moduleBase" value="appli">
    <div class="form-group">
        <label for="appli" class="control-label col-md-4"><span class="red">*</span> 
                {t}Nom de l'application :{/t}
        </label>
        <div class="col-md-8">
            <input id="appli" type="text" name="appli" class="form-control" value="{$data.appli}"
                    autofocus required>
        </div>
    </div>
    <div class="form-group">
        <label for="applidetail" class="control-label col-md-4">{t}Description :{/t} </label>
        <div class="col-md-8">
            <input id="applidetail" type="text" class="form-control" name="applidetail"
                    value="{$data.applidetail}">
        </div>
    </div>
    <div class="form-group center">
        <button type="submit" class="btn btn-primary button-valid">{t}Valider{/t}</button>
        {if $data.aclappli_id > 0 }
        <button class="btn btn-danger button-delete">{t}Supprimer{/t}</button>
        {/if}
    </div>
    {$csrf}
</form>

In the form tag, the action corresponds to the route to call. The moduleBase variable contains the route stem: pressing the delete button (button-delete class) will modify the route by replacing it with the content of moduleBase concatenated to Delete.

Most of the classes are those provided by Bootstrap 3.

The {$csrf} variable contains the <input type="hidden" name="csrf_app_name" value="xxxxxx"> field generated by CodeIgniter and used to prevent cross script request forgery attacks.

Particularities concerning tables

Tables, in their vast majority, use the Datatables component for their display. Here is a typical example of a call:

<table id="appliListe" class="table table-bordered table-hover datatable display" data-order='[[ 0, "asc" ]]'>

The datatable class is described in the main_js.tpl template. It contains the initialization of the Datatables component with translation management and pre-programming of the proposed functions. Several classes allow you to quickly manage the different activatable functionalities:

class Search Pagination Sort Export buttons
datatable X X
datatable-nopaging-nosearching X
datatable-searching X X X
datatable-nopaging X X
datatable-nopaging-nosort X
datatable-nosort X
datatable-export X X X
datatable-export-paging X X X X

Tables use the moment component to handle dates.

Additional javascript classes

  • number: control of the entry of integers
  • rate: control of the entry of decimal numbers (separator: point)
  • uuid: verification of fields containing an identifier of type UUID
  • datepicker: selection of a date
  • datetimepicker: selection of a date/time
  • timepicker: selection of a time (hh:mm:ss)
  • textarea-edit: multiline text area (textarea) with tab management to obtain text indents
  • confirm: display of a confirmation box on click or keypress

Two more, two additional functions are available:

  • encodeHtml(content): encodes a string in HTML. This is a function used to encode information retrieved by an Ajax request
  • operationConfirm(): displays a dialog box to confirm the operation to be performed.

Translation management

Label translations are provided by the smarty-gettext library. Labels to be translated must be included between the {t} and {/t} tags.

For more details on translation management, see this page.