How to create a widget

---

❗ The instructions below are outdated, please use a REST API to supply widgets with data (E.g. pending_widget.php)

---

To create a widget, you'll need to have some knowledge of how to compose a database query and how to render the results in html using the php scripting language.

The query

So, to get all the machines that have pending installs in a widget, we use the following sql query:

SELECT computer_name, pendinginstalls, machine.serial_number 
FROM machine
LEFT JOIN munkireport USING(serial_number) 
WHERE pendinginstalls > 0 
ORDER BY pendinginstalls DESC;

You can test this query against your munkireport database to see if it gives you the desired results. We want the computer_name, the pending installs and the serial_number (which we'll use for a link to the detail page).

The view

Layout is done with bootstrap, which is a web framework. Widgets are made with a couple of nested divs:

<div class="col-lg-4">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Widget title</h3>
        </div>
        <div class="list-group scroll-box">
        <!-- we need to put the list here -->
        </div>
    </div><!-- /panel -->
</div><!-- /col -->

• The first div determines the width of the widget. class="col-lg-4" means that the widget takes up 4 columns (out of 12) on a large screen.
• The next div creates a panel (see http://getbootstrap.com/components/#panels)
• Inside the panel there's a heading and a list-group (the scroll-box is a munkireport addition)

The php script

Munkireport runs on a php framework called kissmvc. Although you could write your own database query routines, it is much easier to use the built-in routines.

$machine = new Machine_model; new Munkireport_model;
$sql = "SELECT computer_name, pendinginstalls, machine.serial_number
	FROM machine
	LEFT JOIN munkireport USING(serial_number)
	WHERE pendinginstalls > 0 
	ORDER BY pendinginstalls DESC";

A you can see we're instantiating two model objects: Machine_model and Munkireport_model. Although not strictly necessary, it is always safe to instantiate all models you need in a query. We only need one object to do the query, so the other one is unassigned. We also put the sql query in a string.

<?foreach($machine->query($sql) as $obj):?>
    <a href="<?=url("clients/detail/$obj->serial_number")?>" class="list-group-item">
        <?=$obj->computer_name?>
        <span class="badge pull-right"><?=$obj->pendinginstalls?></span>
    </a>
<?endforeach?>

Now were running a loop that retrieves the data from the database and puts it in our list. There's some magic in here: $machine->query($sql) returns a list of objects. These objects have the selected columns as properties. The next thing is the url() function call, this function converts a relative path into a proper url.

Bringing it together

<? 
$machine = new Machine_model; new Munkireport_model;
$sql = "SELECT computer_name, pendinginstalls, machine.serial_number
    FROM machine
    LEFT JOIN munkireport USING(serial_number)
    WHERE pendinginstalls > 0 
    ORDER BY pendinginstalls DESC";
?>
<div class="col-lg-4 col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="icon-moon"></i> Clients with pending installs</h3>
        </div>
        <div class="list-group scroll-box">
            <?foreach($machine->query($sql) as $obj):?>
            <a href="<?=url('clients/detail/'.$obj->serial_number)?>" class="list-group-item">
                <?=$obj->computer_name?>
                <span class="badge pull-right"><?=$obj->pendinginstalls?></span>
            </a>
            <?endforeach?>
        </div>
    </div><!-- /panel -->
</div><!-- /col -->

That's our widget. As you can see, we added a nice icon to the title, munkireport comes with the great icon font Font Awesome