One of the most common needs of any website is to list data. The wtkBuildDataBrowse PHP function makes it extremely easy to do this.

As an example of the simplest use, these few lines create a fully functioning page by calling wtkFillBrowsePage which is a wrapper for both wtkBuildDataBrowse and wtkMergePage.

<?php
$gloLoginRequired = false;
require('wtk/wtkLogin.php');

$pgSQL = 'SELECT `FirstName`, `LastName`, `City` FROM `wtkUsers`';
wtkFillBrowsePage($pgSQL);
?>

Full Tutorial Video

To add an Edit button all you need to do is define where you want the Edit link to go in this variable: `$gloEditPage`.

With the WTK library, usually the Add page uses the same PHP page as the Edit page. So although you can have the Add button go anywhere, most of the time you will define them as such:

$gloEditPage = '/demo/petEdit';
$gloAddPage  = $gloEditPage;

To add a Delete button to your list, you simply

$gloDelPage  = 'petsDelDate'; // have DelDate at end if should DelDate instead of DELETE

All columns will be left justified by default. To make a column center or right justified, just assign it in the PHP global variable like this:

$gloColumnAlignArray = array (
    'Priority' => 'center',
    'Amount' => 'right'
);

Choosing which columns should be summed is easy also. This only sums the values shown in the list. So if your list is for 200 and your page navigation is set to 50, it will only show the first 50 rows and the total for the rows which are visible.

$gloTotalArray = array (
    'OrderCount' => 'SUM'
    'TotalInvoiced' => 'DSUM'
);

Passing SUM tallies the numbers. Using DSUM makes it so the sum at the bottom uses your chosen currency. The nubmer formatting and currency setting are defined by these two global variables which you set in the wtk/wtkServerInfo.php file.

$gloPHPLocale = 'en_US';  // determines number formatting
$gloCurrencyCode = 'USD'; // determines currency code in number formatting

The wtkSetHeaderSort function can take 1, 2 or 3 parameters. Note, as usual spaces will be automatically be inserted for WordCaps or snake_case. For example, 'FirstName' will be changed to 'First Name'.

Note that in order for Sort Order to work, it requires the SELECT to have an ORDER BY.

PagesVisited

This uses column named `PagesVisited` and makes header as “Pages Visited” and sorts by this column.

LookupDisplay, USA State

This uses column named `LookupDisplay` but shows the header as “USA State”. It sorts by the `LookupDisplay` column.

DOB, Birthday, u.`BirthDate`

This uses column named `DOB` but shows the header as “Birthday”. It sorts using u.`BirthDate` column. This is really important when formatting causes problem with sort order. For example if your date format is '%b %D, %Y' then sorting by that would not give the results you want.

Example

Here is an example SQL query and the associated Sort Options.

SELECT p.`UID`, u.`FirstName` AS `Owner`, p.`PetName`, p.`City`,
  DATE_FORMAT(p.`BirthDate`,'%b %D, %Y') AS `DOB`
FROM `pets` p
  INNER JOIN `wtkUsers` u ON u.`UID` = p.`UserUID`
  INNER JOIN `wtkLookups` L ON L.`LookupType` = 'USAstate' AND 

Sortable Columns Owner City, Town DOB, Birthday, p.`BirthDate`

So for the above example, in the PHP you would simply add this before the wtkBuildDataBrowse call.

wtkSetHeaderSort('Owner'); // Defaults column name but can change with second parameter
wtkSetHeaderSort('City', 'Town');
wtkSetHeaderSort('DOB', 'Birthday', 'p.`BirthDate`');
// when third parameter exists it is used for sorting of first parameter's column

If you want more buttons this is easily done by assigning them in the $gloMoreButtons PHP variable. This assumes you have `UID`, `id` or `GUID` in your SQL query because that value will be passed to the page for accessing. The library is smart enough to use whichever one you put in the SELECT query.

These extra buttons will be put to the between the Edit button and the Delete button.

$gloMoreButtons = array(
                'User Logins' => array(
                        'act' => '/admin/userLogins',
                        'img' => 'beenhere'
                    ),
                'User Updates' => array(
                        'act' => '/admin/userUpdates',
                        'img' => 'assignment'
                    ),
                'Send Invite' => array(
                        'act' => '/admin/sendInvite',
                        'img' => 'send'
                    ),
                'Send Password Reset' => array(
                        'act' => '/admin/sendResetPW',
                        'img' => 'send'
                    )
                );

In the above example, the 'User Logins' will be the hover-over title on the button. The 'act' value defines the page which will be gone to. For example, the 'User Logins' button will go to the userLogins.php page in the /admin/ folder. The 'img' determines the materializecss icon which will be used. In the 'User Logins' example the generated HTML code will be:

<a onclick="JavaScript:ajaxGo('/admin/userLogins',0,7);"
   class="btn btn-floating btn-small"><i class="material-icons"
   alt="Click to User Logins" title="Click to User Logins">beenhere</i></a>

Here is how these actually look on the page:

If you know the result set will be so few you will not need page navigation, you can choose to skip showing the footer. For example, if there are only 9 rows returned, using $gloSkipFooter will prevent the bottom of your browse list from showing “1 - 9 of 9”.

Simply before calling wtkBuildDataBrowse put in this line:

``` $gloSkipFooter = true; ```

By default your browse lists will show 20 rows of data. If there are more rows, page navigation will automatically be added at the bottom allowing jumping to the end, or jumping 20 rows at a time.

This 20 can be globally changed by setting the following PHP variable in wtk/wtkServerInfo.php. Of course if you want you can set this on any individual page to override the global default.

$gloRowsPerPage = 30;

If you use the WTK Page Builder it will create a browse PHP page for you and have in the code comments all the main features.

Full Tutorial Video