Wizards Toolkit logo

Check Our Tutorials

Docker 2-minute Setup

This video shows how within 2 minutes you can have a fully functioning Wizard’s Toolkit environment. The rest of the video discusses Docker configuration tips and tricks including

docker-compose.yml, PHP.Dockerfile, nginx.conf and putting a Docker container within an image.

With a few commands in Terminal, this pulls down the Docker container, extracts the Wizard’s Toolkit library and setup for a full development environment in Docker, then builds an ideal Docker container which includes Nginx, PHP, MySQL, phpMyAdmin. Go from nothing to a fully working website with Wizard's Toolkit within minutes.


Docker Container
  • Nginx:1.22.0-alpine
  • MySQL 8.3
  • PHP 8.1-FPM
  • phpMyAdmin
  • Wizard’s Toolkit library
Read more
MAMP Setup and Features

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.

The Docker 2-minute Setup is now the preferred method. This video was created years ago before the CSS revamp which makes the pages look much better than what is shown in the video. It shows a MAMP implementation. The PHP, JavaScript and SQL aspects of this video are still all applicable.

This includes creating the database with over 55 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
WTK Page Builder

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

By putting in basic SQL information into the WTK Page Builder, like the table name, unique identifying column, and columns you want to see and update,

the WTK Page 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
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
Single Page App vs Multi Page App

When you are starting a project you first need to decide if it should be a Single Page App or Multi Page App. This video defines the differences, the pros and cons of each, and shows real code examples.

Then we will build a couple pages for both Single and Multi Page Application design using the Wizard’s Toolkit. Wizard’s Toolkit is a low-code development environment based on PHP, SQL and JavaScript.

With a Single Page Application when the user first comes to the website the page downloads the HTML, external CSS files, external JavaScript files, and possibly some images. Thereafter when the user navigates through the "website" or "app", what is actually happening is JavaScript functions are called which retrieve small sections of HTML and display them in a section in the previously downloaded HTML. This is usually done by calling PHP or other backend languages which receive passed parameters then retrieve information from a database, use code to determine and format HTML and return it to the calling app or website.

Historical note: Although not officially termed until 2005, Microsoft first created AJAX in 1999. AJAX originally was an acronym for Asynchronous Javascript and XML. It was a method of using JavaScript to make a call to a backend server to retrieve a small amount of data to update a web page. AJAX is no longer used solely for XML - in fact now it is usually used to retrieve JSON or HTML.

A prime advantage of Single Page Applications is speed and transitions from "page to page" can use fluid animations. All the CSS and JS files never need to be re-downloaded. The browser doesn't even have to check to see if they are in cache. You can even include hidden in the initially downloaded HTML static "pages" so they never need to be downloaded. For example, almost all websites will need a login page, a forgot password page, a "send bug report" page, and a "thanks" page. These can all be included in the original HTML and then simply unhidden when the user "navigates" to them. That way there is no need to even hit the server for those items.

A good example of a Single Page Application is Gmail. Once the page loads all clicking on links you do is only refreshing the bare necessities and makes for a good user experience.

Multi Page Applications on the other hand is how the web was originally born. Every link goes to a new page which downloads all the HTML, CSS, JavaScript and images necessary for the page. Most people have pretty fast internet so in actuality the speed difference may not seem significant especially if you have set your caching properly in your .htaccess file. Note that .htaccess settings also affect all subfolders by default. Still when a user goes from page to page there will be a page load so the "transition" is not as nice as on a Single Page App.

In this video I throttle the speed using FireFox for Developers so you can see how MPA pages load versus an SPA set of pages.

Which should you use?

If you need web page for SEO, you should go with MPA.

If you want people to share specific pages deep within your website, you should go with MPA.

If you have less than 6 pages in your websites, you should probably just go with MPA.

In almost all other scenarios it is generally better to go with SPA.

When building web pages in Wizard’s Toolkit the code is 99% the same regardless of whether you are making Multi Page or Single Page websites.

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
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