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

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

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.

If you can craft a solid SQL SELECT statement, this tool empowers you to generate detailed reports with features like sorting, filtering, aligning columns, totaling, and more. No need for complex chart training anymore; our integration with ChartJS simplifies chart creation with just a click.

Topics covered include who can benefit from this tool, report creation showcasing basic and advanced features demos, insight into SQL tables used, JavaScript files overview, and practical tips on utilizing this powerful resource efficiently.

Whether you’re a seasoned developer or new to coding, harnessing the power of the SQL Report Wizard streamlines report building processes significantly. Say goodbye to lengthy deployment cycles; now your team can create insightful analytics directly on your website without relying on multiple developers.

Unlock the potential of data visualization through charts and graphs effortlessly integrated within your reports using Chart.js. Dive into advanced feature demonstrations including dynamic filtering options like date ranges and drill-down capabilities for enhanced reporting precision.

With seven pre-built SQL reports included in Wizard's Toolkit and demo files available for deeper understanding if needed – mastering the art of data-driven reporting has never been easier. Empower yourself today by leveraging the wizardry of SQL Report Wizard for immediate gratification in meeting analytical demands.

problem resolution. In this video, we’ll explore the straightforward process of creating and assigning widgets, as well as setting up multiple Widget Dashboards based on staff roles and security levels. Additionally, we’ll delve into the functionality of the Back Office Management, Widget Creation, Data Review, and Demos, all of which come standard in Wizard’s Toolkit, a low-code development library for PHP and SQL.

Widgets use SQL and are presented as counters, charts or lists. Clicking on a Widget can take a person directly to the necessary page to review or resolve the associated problem. Each individual is able to customize their widget dashboard. This makes navigation and problem resolution easier and more tailored to individual needs.

Plus we will show how to add code to provide switching between Widget Dashboards, and even add new color options for widget counters.

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

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

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.

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 .

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.