Wizards Toolkit logo

Check Our Tutorials

Setup and Configuration

This video is 45 minutes and starts with downloading the Wizard’s Toolkit then steps through all configuration steps to get your localhost environment

fully functioning. This includes creatinng the database with over 40 tables and standard lookup data, configure it for your server, customize the color theme, verified the back office functionality works, and finally create a custom list and edit page and linked to it from the customer portal. At the end you have all the basics for registering users, dealing with forgotten passwords, and user management. This is in your own database on your own server that you have 100% control over, not like a no-code solution. Now as a developer you have a solid foundation and toolkit to quickly build data-driven websites that look good on computers, tablets and phones.

Topics Covered
  • Wizard’s Toolkit Features
  • Files in Initial Install
  • SQL Setup
  • Email Configuration
  • ionCube Configuration
  • Set Your Admin Password
  • Change the Color Theme
  • Building Pages Demo
  • Summary
Read more
Page Builder

This is a quick demo showing how the Wizard’s Toolkit Builder works.

By putting in basic SQL information into the Wizard’s Toolkit Builder, like the table name, unique identifying column, and columns you want to see and update,

the WTK Builder will generate fully functioning PHP pages which are easily editable. The pages handle listing, viewing, editing and saving of data. What’s not seen is it also handles logging what changes were made to an update-log data table.

Using the Wizard’s Toolkit low-code library I show how quickly you can build both a Browse List and Update Form.

For the update page we demonstrate how easy it is to edit it so it uses JScolor to allow picking colors in a very user-friendly manner. I was in a hurry to make these pages so went at my normal pace instead of explaining everything I was doing. A more detailed tutorial will be available later.

Read more
Menu Sets

With the Wizard’s Toolkit, making complex menu structures is easy and 100% data-driven.

First you add the page you wish to link to in the Page List. You don’t need to append “.php”, that is assumed so you would enter “lookupList”

instead of Pick the folder it is in from a drop list - which is also data-driven and easily added to.

Wizard’s Toolkit assumes using ‘rng’ for the parameter when passing a parent ID and using ‘id’ when passing a single-row lookup ID. So if you are passing parameters then in the page include the full link like “petList.php?rng=35” for example if you wanted to show a list of pets that are associated with their master who has an ID of 35.

Even the reports built with the report wizard can be linked to. Plus the menus all switch automatically to side-bar menus if the width of the browser/phone is too narrow.

Although not likely to be needed often, you can also pass both the ‘id’ and ‘rng’ by putting in the page a link like: “petList.php?id=14&rng=35” .

Read more
Browse Box

Any data-driven website needs to show lists of data. This is such a key feature that as developers we need this all the time. So in the Wizard’s Toolkit we make creating these extremely easy and adding features like header sorting, column alignment and exporting both easy and intuitive.

While other data-grid libraries often use caching, we never do that with the Wizard’s Toolkit because data can change at any second. So every sort or page navigation is pulling current data from the database.

In this video you will learn how to do all the basic functionality which is all you need 97% of the time. The PHP wtkBuildDataBrowse function is over 700 lines of code and is part of 1513 lines of the set of Browse Functions.

Features Covered
  • Turn simple SELECT into list of data on web page.
  • Custom HTML template
  • Export to CSV or XML
  • Set Page Size (number of rows)
  • Skip Footer
  • Column Alignment
  • Page Navigation
  • Sortable Headers (including date-sort feature)
  • Add Button
  • Edit Button
  • Delete Button
  • More Buttons feature
  • $gloTotalArray for number or currency summing
  • Multiple Browses on single page
Read more
Images in Browse List

Adding an image to a browse box, or list of data, is extremely easy using the Wizard’s Toolkit. By using an SQL alias of WTKIMAGE the library automatically does everything that is needed.

This video shows how to easily make minor enhancements using PHP, for example how to use a “circle” effect on an image.

CSS Maker

We created a free utility so you can quickly modify existing color themes and easily create brand new color themes using CSS. With the use of JScolor and some fancy JavaScript you can see your color choices change the page in real-time

the major elements we use of MaterializeCSS.

Using the Wizard’s Toolkit CSS files, you never modify the materialize.css but rather the WTK files override the colors. Using variables with Cascading Style Sheets is extremely powerful. We want to override their default colors in a way that affects all the many HTML elements.

So we created a wtkGlobal.css file with the global overrides. We wanted both a Light theme and a Dark theme option so we also created a wtkLight.css and wtkDark.css. Next we wanted to overlay different color themes. So we created wtk{Color}.css files which are nothing but a set of CSS variables. By listing them in this order in your HTML it properly sets up everything.

  • materialize.min.css
  • wtk{Color}.css
  • wtkLight.css or wtkDark.css
  • wtkGlobal.css

This utility allows you to pick any of the CSS files in the folder and see how the page will look. This requires the CSS file to start with 'wtk' and excludes our wtkLight, wtkDark and wtkGlobal files. You can then modify each of the main color types and see immediately what the effect is in both Light and Dark mode. Once you have designed a color theme you like you can save it.

Our CSS Maker is available for generating files online or downloading the PHP files for you to modify. The online version let’s you build color themes and have the CSS shown in a browser tab for you to “Save As”. This page also allows downnloading the source code and all our WTK CSS files.

Read more
File Display

This video showcases the File Display function. Almost all websites need to show a gallery of images, PDFs and/or videos. Sometimes those are stored in a database, and sometimes you may want to just show all files that are in a folder and sub-folders

First we examine pulling the information from a SQL database. The SQL script retrieves the locations of the user images and path to that image.

In PHP we use PDO to pull in the data into a PHP array. Then just pass that array to wtkFileDisplay and it returns the HTML to evenly distribute the images in a nice viewing grid. The function dynamically determines the optimal number to show per row but you can override that.

For this example we are using MaterializeCSS which has a nice lightbox effect for images.

Next we look at the wtkReadDir function which can be used to get a listing of files from a directory and it’s subdirectories. You can pass in a specific file extension to search for, or use the special ‘image’ or ‘video’ value to find all image file types or video file types. If you want to check specific directory instead of the directory your PHP file is in, you can.

Of course you can merge multiple arrays using array_merge_recursive then pass to wtkFileDisplay and voila, you have a combination of videos, images and PDFs. Likewise you could also pull from your SQL database and merge it into the array and display.

Last thing to note, the wtkFileDisplay function uses wtkFileCell to generate the HTML based on file type. The wtkFileCell uses wtkInsertSpaces on the file name to make it more user-friendly. The wtkInsertSpaces function adds a space between words based on WordCaps or snake_case. That way when you change a file name in the folder it displays nicely on the web page. This wtkInsertSpaces is used by many other functions in Wizard’s Toolkit to save developers huge amounts of time.

In this video we also show how easy it is to switch from Dark mode to Light mode with a single line of code.

If you have the Wizard’s Toolkit you can find code samples for this feature in /demo/fileDisplayDir.php and /demo/fileDisplayData.php .

Read more