3. “Hello world!” User interface

Our goal in the chapter is to create a simple webpage which can execute our “hello world” service and return the results on screen.

For this, we use the standard Phalcon components to present the user with a form and need to create a controller which will bind a template to show.

Create a controller

The routing of user pages function the same as api endpoints, only the location of the file is one level up in the tree. For this example we’re going to create the following file:

/usr/local/opnsense/mvc/app/controllers/ValueA/Samples/HelloworldController.php

<?php
namespace ValueA\Samples;

class HelloworldController extends \ValueA\Base\IndexController
{
    public function indexAction()
    {
        $this->view->title = 'Helloworld!';
        $this->view->pick('ValueA/Samples/helloworld');
    }
}

In line 8 the title is set for usage in our standard template, line 9 tells the system which template it should render, also mind the name of the controller, this should be the same as the filename without the extension (like the api controller).

Create a template (view)

Now we’re ready to build our html template, but before we do so we need to make sure the directory exists.

mkdir -p /usr/local/opnsense/mvc/app/views/ValueA/Samples

/usr/local/opnsense/mvc/app/views/ValueA/Samples/helloworld.volt

<script type="text/javascript">
$( document ).ready(function() {
     $("#hello_btn").click(function(){
       ajaxGet(url="/api/samples/hello/world", sendData={}, callback=function(data,status) {
           $("#response").html($("#response").html() + ' '+ data.message);
       });
     });
 });
</script>
<button class="btn btn-primary" id="hello_btn" type="button">
   Execute!
</button>
<br/>
<div class="well" id="response">
</div>

The code block above consists of a JavaScript section, using a jQuery button click event inside a document ready block. When the button is clicked, we will perform an ajax call using on of our own wrappers, which will communicate the response with the content already in the bootstrap well.

Finally, let’s test the page. Make sure you’re logged into OPNsense, then navigate to https://<host>/ui/samples/helloworld.

Tip

ajaxGet() performs a http get, ajaxCall() implements a http post.

Note

In case your page doesn’t refresh correctly, it might be stuck in your cache. This can be solved by flushing all items in it with: rm /usr/local/opnsense/mvc/app/cache/*.php

Register into the menu system

Applications can register themselves into the menu system using an xml file, before we can do that we should make sure the model location in which the menu system lives exists.

mkdir -p /usr/local/opnsense/mvc/app/models/ValueA/Samples/Menu

Then we can create a registration, using a nested xml.

/usr/local/opnsense/mvc/app/models/ValueA/Samples/Menu/Menu.xml

<menu>
    <Hello cssClass="fa fa-plug" order="1">
        <World cssClass="fa fa-globe" url="/ui/samples/helloworld/"/>
    </Hello>
</menu>

Our application uses the url set in the “World” tag.

Note

Font-awesome is used for the icons using the attribute cssClass