browse_box
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
browse_box [2024/12/02 00:57] – minimized code and added video links; still much to do wtkadmin | browse_box [2024/12/02 04:14] (current) – added php to code tags wtkadmin | ||
---|---|---|---|
Line 3: | Line 3: | ||
One of the most common needs of any website is to list data. The **wtkBuildDataBrowse** PHP function makes it extremely easy to do this. | 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. | + | 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 | <?php | ||
$gloLoginRequired = false; | $gloLoginRequired = false; | ||
Line 15: | Line 15: | ||
</ | </ | ||
- | [[https:// | + | [[https:// |
+ | ===== Add, Edit and Delete ===== | ||
- | ===== WTK Page Builder ===== | + | This assumes you have `UID`, `id` or `GUID` in your SQL query because that value will be passed to the Edit or Delete page for determining which row to affect. |
+ | |||
+ | <code sql> | ||
+ | SELECT `pet_id` AS `UID`, `pet_name` | ||
+ | FROM `pets` | ||
+ | </ | ||
+ | |||
+ | 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: | ||
+ | |||
+ | <code php> | ||
+ | $gloEditPage = '/ | ||
+ | $gloAddPage | ||
+ | </ | ||
+ | |||
+ | ==== Delete Button ==== | ||
+ | |||
+ | To add a Delete button to your list, you simply put the table name. If you are using the logic of having a `DelDate` column in your table and instead of truly DELETEing data, you set the `DelDate` to NOW(), then you can append after the table name " | ||
+ | |||
+ | For example, in the `pets` demo table we use the `DelDate` logic so the delete functionality is defined as: | ||
+ | |||
+ | <code php> | ||
+ | $gloDelPage = ' | ||
+ | </ | ||
+ | |||
+ | ==== More Buttons ==== | ||
+ | |||
+ | If you want more buttons this is easily done by assigning them in the **$gloMoreButtons** PHP variable. | ||
+ | |||
+ | These extra buttons will be put to the between the Edit button and the Delete button. | ||
+ | |||
+ | <code php> | ||
+ | $gloMoreButtons = array( | ||
+ | 'User Logins' | ||
+ | ' | ||
+ | ' | ||
+ | ), | ||
+ | 'User Updates' | ||
+ | ' | ||
+ | ' | ||
+ | ), | ||
+ | 'Send Invite' | ||
+ | ' | ||
+ | ' | ||
+ | ), | ||
+ | 'Send Password Reset' => array( | ||
+ | ' | ||
+ | ' | ||
+ | ) | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | In the above example, the 'User Logins' | ||
+ | |||
+ | <code html> | ||
+ | <a onclick=" | ||
+ | | ||
+ | | ||
+ | </ | ||
+ | |||
+ | Here is how these actually look on the page: | ||
+ | {{:: | ||
+ | |||
+ | |||
+ | ==== Conditional Edit and Delete ==== | ||
+ | |||
+ | If you want only some rows to have the Edit button, this can be done by defining a column and the conditional data required to be allowed to edit. | ||
+ | |||
+ | For example, if you only wanted to allow wtkUsers with a SecurityLevel of 80 to be allowed to edit, you would add these two lines before the call to **wtkBuildDataBrowse**. | ||
+ | |||
+ | <code php> | ||
+ | $gloEditCondCol | ||
+ | $gloEditCondition | ||
+ | </ | ||
+ | |||
+ | Likewise, you can set a condition on Delete button displaying by setting the following PHP variables. | ||
+ | |||
+ | <code php> | ||
+ | $gloDelCondCol | ||
+ | $gloDelCondition | ||
+ | </ | ||
+ | |||
+ | ===== Printing Mode ===== | ||
+ | |||
+ | If the page is in printing mode or the data is being exported, then the Add, Edit and Delete buttons will not be displayed. | ||
+ | |||
+ | <code php> | ||
+ | $gloPrinting = true; | ||
+ | </ | ||
+ | ===== Column Alignment ===== | ||
+ | |||
+ | All columns will be left justified by default. | ||
+ | |||
+ | <code php> | ||
+ | $gloColumnAlignArray = array ( | ||
+ | ' | ||
+ | ' | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | ===== Totaling Columns ===== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | <code php> | ||
+ | $gloTotalArray = array ( | ||
+ | ' | ||
+ | ' | ||
+ | ); | ||
+ | </ | ||
+ | |||
+ | Passing SUM tallies the numbers. | ||
+ | |||
+ | <code php> | ||
+ | $gloPHPLocale = ' | ||
+ | $gloCurrencyCode = ' | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Sorting Functionality ===== | ||
+ | |||
+ | 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, ' | ||
+ | |||
+ | Note that in order for Sort Order to work, it requires the SELECT to have an ORDER BY. | ||
+ | |||
+ | |||
+ | ==== One Parameter ==== | ||
+ | |||
+ | PagesVisited | ||
+ | |||
+ | This uses column named `PagesVisited` and makes header as "Pages Visited" | ||
+ | |||
+ | ==== Two Parameters ==== | ||
+ | |||
+ | LookupDisplay, | ||
+ | |||
+ | This uses column named `LookupDisplay` but shows the header as "USA State" | ||
+ | |||
+ | ==== Three Parameters ==== | ||
+ | |||
+ | DOB, Birthday, u.`BirthDate` | ||
+ | |||
+ | This uses column named `DOB` but shows the header as " | ||
+ | |||
+ | **Example** | ||
+ | |||
+ | Here is an example SQL query and the associated Sort Options. | ||
+ | <code sql> | ||
+ | SELECT p.`UID`, u.`FirstName` AS `Owner`, p.`PetName`, | ||
+ | DATE_FORMAT(p.`BirthDate`,' | ||
+ | FROM `pets` p | ||
+ | INNER JOIN `wtkUsers` u ON u.`UID` = p.`UserUID` | ||
+ | INNER JOIN `wtkLookups` L ON L.`LookupType` = ' | ||
+ | </ | ||
+ | |||
+ | **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. | ||
+ | |||
+ | <code php> | ||
+ | wtkSetHeaderSort(' | ||
+ | wtkSetHeaderSort(' | ||
+ | wtkSetHeaderSort(' | ||
+ | // when third parameter exists it is used for sorting of first parameter' | ||
+ | </ | ||
+ | |||
+ | ===== Display UID Column ===== | ||
+ | |||
+ | By default when you have your unique identifying column (UID, GUID, ID) in the SELECT statement, it will not be shown. | ||
+ | |||
+ | <code php> | ||
+ | $gloHideUID = false; | ||
+ | </ | ||
+ | |||
+ | ===== Truncating ===== | ||
+ | |||
+ | By default your result set will not be truncated. | ||
+ | |||
+ | <code php> | ||
+ | $gloBrowseTruncate = true; | ||
+ | </ | ||
+ | |||
+ | ===== Remove HTML ===== | ||
+ | |||
+ | You can set the follow variable and any HTML formatting will be removed from the SQL results before putting them into the browse list. This uses the **wtkRemoveStyle** function which is defined in wtk/ | ||
+ | |||
+ | <code php> | ||
+ | $gloBrowseNoStyle = true; | ||
+ | </ | ||
+ | |||
+ | ===== NL2BR ===== | ||
+ | |||
+ | If you want the SQL results to have <br> added in place of line breaks, set this PHP variable to true before calling **wtkBuildDataBrowse**: | ||
+ | |||
+ | <code php> | ||
+ | $gloBrowseNL2BR = true; | ||
+ | </ | ||
+ | |||
+ | ===== Skip Footer ===== | ||
+ | |||
+ | If you know the result set will be so few you will not need page navigation, you can choose to skip showing the footer. | ||
+ | |||
+ | Simply before calling **wtkBuildDataBrowse** put in this line: | ||
+ | |||
+ | <code php> | ||
+ | $gloSkipFooter = true; | ||
+ | </ | ||
+ | |||
+ | ===== Rows per Page ===== | ||
+ | |||
+ | 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/ | ||
+ | |||
+ | <code php> | ||
+ | $gloRowsPerPage = 30; | ||
+ | </ | ||
+ | |||
+ | ===== Custom HTML Row and Header ===== | ||
+ | |||
+ | Usually you want the data returned in simple columns, and that is the default for wtkBuildDataBrowse. | ||
+ | |||
+ | <code php> | ||
+ | |||
+ | $pgSQL =<<< | ||
+ | SELECT `UID`, DATE_FORMAT(`AddDate`, | ||
+ | CONCAT(`FilePath`, | ||
+ | CONCAT(`FirstName`, | ||
+ | `Address`, `City`, `State`, `Zipcode` | ||
+ | FROM `wtkUsers` | ||
+ | WHERE `NewFileName` IS NOT NULL | ||
+ | ORDER BY `FirstName` ASC | ||
+ | SQLVAR; | ||
+ | |||
+ | $gloColHdr = '< | ||
+ | |||
+ | $gloRowHtm =<<< | ||
+ | < | ||
+ | <div class=" | ||
+ | @WTKIMAGE@ | ||
+ | <a class=" | ||
+ | </ | ||
+ | <div class=" | ||
+ | < | ||
+ | < | ||
+ | @Address@< | ||
+ | @City@, @State@ @Zipcode@</ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | htmVAR; | ||
+ | |||
+ | $pgHtm | ||
+ | $pgHtm .= wtkBuildDataBrowse($pgSQL); | ||
+ | </ | ||
+ | ===== wtkRowFunction ===== | ||
+ | |||
+ | This feature is rarely needed but does give you amazing flexibility. | ||
+ | |||
+ | When you need complex rules and customization of HTML based on the data of a returned row, you can use the **wtkRowFunction** function. | ||
+ | |||
+ | Here is example code: | ||
+ | |||
+ | <code php> | ||
+ | // You define the next function in any way you like | ||
+ | function wtkRowFunction($fncHtmRow, | ||
+ | $fncNewRow = $fncHtmRow; | ||
+ | if ($fncData[' | ||
+ | $fncNewRow = wtkReplace($fncNewRow, | ||
+ | endif; | ||
+ | if ($fncData[' | ||
+ | $fncNewRow = wtkReplace($fncNewRow, | ||
+ | else: | ||
+ | $fncNewRow = wtkReplace($fncNewRow, | ||
+ | endif; | ||
+ | return $fncNewRow; | ||
+ | } | ||
+ | |||
+ | $pgSQL =<<< | ||
+ | SELECT p.`UID`, p.`PetName`, | ||
+ | L.`LookupDisplay` AS `PetType`, | ||
+ | CONCAT(' | ||
+ | `fncContactIcons`(p.`OwnerEmail`, | ||
+ | FROM `pets` p | ||
+ | LEFT OUTER JOIN `wtkLookups` L ON L.`LookupType` = ' | ||
+ | WHERE p.`DelDate` IS NULL | ||
+ | SQLVAR; | ||
+ | |||
+ | wtkSearchReplaceRow(' | ||
+ | // above line is what triggers wtkRowFunction to be called for every row | ||
+ | |||
+ | $pgHtm .= wtkBuildDataBrowse($pgSQL); | ||
+ | </ | ||
+ | |||
+ | Utilizing this, the wtkBuildDataBrowse function will call your **wtkRowFunction** function passing it the row of data that was retrieved and formatted. | ||
+ | |||
+ | ====== Demo Pages ====== | ||
+ | |||
+ | We have several demos showing all the different functionality for the **wtkBuildDataBrowse** function which you will find is one of the most useful functions in the Wizard' | ||
+ | |||
+ | The PHP demos have exact minimalist code examples of how easy it is to use the powerful feature of passing a SQL query to generate a full listing web page with all of the features listed above. | ||
+ | |||
+ | * / | ||
+ | * / | ||
+ | * / | ||
+ | * / | ||
+ | * / | ||
+ | * / | ||
+ | * / | ||
+ | |||
+ | |||
+ | ====== WTK Page Builder | ||
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. | 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. | ||
- | [[https:// | + | [[https:// |
browse_box.1733101045.txt.gz · Last modified: 2024/12/02 00:57 by wtkadmin