Wizards Toolkit logo

Check Our Tutorials

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 I show 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 Set

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