Search This Blog

Monday, March 11, 2013

Symfony Project sfservermon - Post 3 First Pages.

This is post 3 in a series - back to previous post.
By the end the previous post we now have a set of database Entities and a database with sample data.
The next stage is to display it.

Servers Index Page.

Note, in a later post the edit pages have been generated by the generate:doctrine:crud tool. For this to work correctly the server_id database column needed to be mapped to an Entity variable called id, the Entity generator then generates a getId() method rather than getServerId() method or getConfigId() method.
So while the primary key in the database is server_id or config_id, in Symfony through Doctrine, it needs to be mapped as 'id'. This is done in the orm file:

JMPR\ServerMonBundle\Entity\MonitorServers:
  type: entity
  table: monitor_servers
  fields:
    id:
      id: true
      type: integer
      unsigned: false
      nullable: false
      column: server_id
      generator:
        strategy: IDENTITY

Various other fields had nullable set to true:  port, error, rtime, lastOnline, lastCheck.

Routing.

For the initial pages to display, these routes were added:


server_mon_homepage:
    pattern:  /
    defaults: { _controller: JMPRServerMonBundle:Default:index }

server_mon_log:
    pattern:  /log
    defaults: { _controller: JMPRServerMonBundle:Default:indexlog }



(Note in a later post these routes are edited to that the identifier complies with the Symfony Best Practices for Structuring Bundles
These are routes to the home (server list) page and the log page.

Default Controller.

A default controller was created with these methods:

    public function indexAction()
    {

$em = $this->getDoctrine()->getManager();
$servers = $em->getRepository('JMPRServerMonBundle:MonitorServers')->findAll();
        return $this->render('JMPRServerMonBundle:Default:servers.html.twig', array('title'=>'Servers','servers'=>$servers));
    }

    public function indexlogAction()
    {

$em = $this->getDoctrine()->getManager();

$statusLogs = $em->getRepository('JMPRServerMonBundle:MonitorLog')->findBy(array('type' => 'status'), array('datetime' => 'DESC'), 100);
$emailLogs = $em->getRepository('JMPRServerMonBundle:MonitorLog')->findBy(array('type' => 'email'), array('datetime' => 'DESC'), 100);
$smsLogs = $em->getRepository('JMPRServerMonBundle:MonitorLog')->findBy(array('type' => 'sms'), array('datetime' => 'DESC'), 100);

        return $this->render('JMPRServerMonBundle:Default:logs.html.twig'
        , array('title'=>'Logs', 'statusLogs'=>$statusLogs, 'emailLogs'=>$emailLogs, 'smsLogs'=>$smsLogs));
    }

Templates.

A base template - base.html.twig in app/Resources/views is created. The base template was created by
  1. Copying and pasting the html code from the phpServerMon projec
  2. Changing the css and javascript links - /css and /js, checking the image links (to '/img')
  3. Adding twig block tags for the title, stylesheets, pageContent and javascripts.
The base template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{% block title %}PHP Server Monitor{% endblock %}</title>
  <!--CSS Files-->
<link type="text/css" href="/css/monitor.css" rel="stylesheet" />
<!--JavaScript Files-->
<script src="/js/monitor.js" type="text/javascript" ></script>

    {% block stylesheets %}{% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />

</head>
<body>

  <div class="main">

    <div class="header">
      <div class="opensource"><a href="{{ path('server_mon_homepage')}}"><img src="/img/opensource.png" alt="Open Source" height="101px" /></a></div>
      <div class="menu">
        <h1>SERVER MONITOR</h1>
        <ul>
          <li><a href="{{ path('server_mon_homepage')}}" class="active">servers</a></li>
          <li><a href="index.php?type=users" class="">users</a></li>
          <li><a href="{{ path('server_mon_log')}}" class="">log</a></li>
          <li><a href="{{ path('server_mon_config')}}" class="">config</a></li>
          <li><a href="index.php?action=check">update</a></li>
          <li><a href="http://phpservermon.sourceforge.net" target="_blank">help</a></li>
        </ul>
      </div>
    </div>

    <div class="container">
    <strong>Current time: 12:52:17 PM</strong><br>

      {% block pageContent %}{% endblock %}
</div>
      {% block javascripts %}{% endblock %}

    <div class="footer">
      Powered by <a href="http://phpservermon.sourceforge.net" target="_blank">PHP Server Monitor v2.0.1</a><br/>
      Running on: John-Reidys-MacBook-2.local, refresh at: 12:52:17 PM
    </div>
  </div>

  </body>
</html>

It contains a number of broken links - links that need to be replaced as the site is ported to Symfony.

Two templates for the server list and log list:  servers.html.twig and logs.html.twig were created in the bundle (directory: ../src/JMPR/ServerMonBundle/Resources/views/Default)
The servers template is:
{# src/JMPR/ServerMonBundle/Resources/views/Default/index.html.twig #}
{% extends '::base.html.twig' %}
{% block title %}{{title}}{% endblock %}
{% block header %}


{% endblock %}
{% block pageContent %}
<h2>servers</h2>
<div class="message"><a href="">Add new?</a></div><br/>
<table cellpadding="0" cellspacing="0">
  <tr class="odd">
    <td>&nbsp;</td>
    <td><b>Label</b></td>
    <td><b>Domain/IP</b></td>
    <td><b>Port</b></td>
    <td><b>Type</b></td>
    <td><b>Last check</b></td>
    <td><b>Response time</b></td>
    <td><b>Last online</b></td>
    <td><b>Monitoring</b></td>
    <td><b>Send Email</b></td>
    <td><b>Send SMS</b></td>
    <td><b>Action</b></td>
  </tr>
  <tr class="odd">
    <td colspan="12" class="message">&nbsp</td>
  </tr>
{% for server in servers %}
<tr class="{{ loop.index is odd ? 'odd' : 'even' }}">
 <td><img id="status_{{server.id}}" src="/img/on.png" alt="on" height="30px" title="" /></td>
 <td>{{server.label}}</td>
 <td><a href="{{path('server_mon_log', {'server_id':server.id})}}">{{server.ip}}</a></td>
 <td>{{server.port}}</td>
 <td>{{server.type}}</td>
 <td>{{server.lastOnline|date("d-m-Y H:i:s")}}</td>
 <td>{{server.rtime}} s</td>
 <td>{{server.lastCheck|date("d-m-Y H:i:s")}}</td>
 <td>yes</td>
 <td>no</td>
 <td>no</td>
 <td>
   <a href=""><img src="/img/edit.png" alt="edit" title="Edit Server" /></a>
   &nbsp;
   <a href="javascript:sm_delete('', 'servers');"><img src="/img/delete.png" alt="delete" title="Delete Server" /></a>
 </td>
</tr>

{% endfor %}
</table>
{% endblock %}


It populates the title, pagecontent and javascript blocks. note that the links to the add new server, edit and delete are all empty.
With the test data and the templates this page now looks like:


The logs page is similar the main difference is that the entries are displayed in 3 tabs for status changes/emails and sms messages sent.

The work done in this post is a great example of the power of the Symfony framework.

The next post discusses the edit forms.







No comments:

Post a Comment