Wappler 5/6 Free Training/ Tutorial Course / Web App project index

As the total number of module is increasing rapidly....
To enable users to find things easier I though an index of my new Wappler 5 quick start course may a useful Wappler training course. This is a video tutorial based on the development of a real project

I will keep it updated as I add new modules.
Please keep the post clean, post comments/ questions elsewhere, in a separate topic or direct to me.

BREAKING CHANGES
As of V5.1.1 the procedure for adding font awesome to a button as changed and font awesome is now added via the App Structure Components panel, not the button properties

Introduction to the course.
An introduction to the course taking the user through the process of creating a content managed community portal

Installing Wappler for the first time (windows).
This unit covers the installation of Wappler on a windows system and the required dependencies

Quick Tour of the Wappler Interface
A tour of the buttons and menus within Wappler with brief explanations of their function

Your initial project setup and database configuration
This module takes the user through the setup of the project we will be using for this course. It covers dependencies, SQLite and database table access

Security introduction
Sorry but i seems this very important video was omitted during the initial upload of the course.
This presentation firstly outlines the different encryption methods available in Wappler.
It then continues to explain in detail the single table and dual table approach to assigning roles to users within the system, the latter allowing a user to be in more than one role simultaneously

Creating the tables needed for the security, registration and login process
This module introduces the Wappler Database manager and illustrates the creating of the tables needed for the security module of the course

Introduction to the Wappler Security provider
This module explains the Wappler Security Provider and how roles are related to users to grant permissions

Website Registration - the basic Registration form
This module covers the use of "Blocks" to create a basic registration form ready to interface with a server Connect API action

Creating your first API action - The registration process.
This module introduces the validation component and the basic Database Insert action to record details of new users of the site. The concept of "User Identities" is introduced leading to the creating of roles related to that user via their identity

PLEASE NOTE. The validate step is case sensitive so a small change should be made force the users email address to lowercase in the database insert stage i.e. $_POST.email.lowercase()

Also in the validate stage, the validate field (validate_1 by default) should also be forced to lower case as $_POST.email.lowercase()

Failure to do that can lead to email duplication if entered with different case

Finalising you registration form
Linking to you API action. Brief discussion of modals and toasts and the use of the notification component to give feedback on the page regarding the status of the API call. Introduction to the Browser component and it's use for "diverting" the user to another web page.

Spam bot and registration bot protection - The blank honeypot
Introducing the concept of a honeypot designed to reveal if the form passed to the action is genuine or has been manipulated by a Bot by use of a blank hidden field

@@@ TWEAK @@@
Instead of making the honeypot actions hidden inputs leave them as text and apply the class d-none to hide them. This helps defeat intelligent bots which ignore hidden inputs as below

image

Spam Bot and registration bot protection. The coded honeypot
Introducing the concept of a honeypot designed to reveal if the form passed to the action is genuine or has been manipulated by a Bot by use of a populated hidden field storing a unique code prodided by an API action on the page. This unit introduces the concept of adding a connection to a server action within a page

Spam Bot and registration bot protection. The coded honeypot (FIX needed for PHP Users)
A fix to work around the PHP issue regarding output of session variables via server connect

Sending an authorisation code to confirm the account
This module details how to create a random confirmation code and send it to the user who has juts registered. It also covers the setup of the mailer component

Validating the Code and confirming the account
In this module we create a code validation process to allow users to validate their account and be allocated a role on the site
ERRATA - in the success event of the validation form the browser1.goto('/') should NOT be set as internal or the layout page will not refresh and the menu will not be updated accordingly

Tidying up the registration and code validation screens
In this module we introduce the borders and padding controls. We demonstrate how to add a border to a screen element and the use background colour to highlight specific sections of the screen

Introduction to GIT repositories (optional but recommended)
In this module I introduce using GIT within Wappler to save versions of your web application

The Basic Login
NOTE There is a change needed to be made to part of this process which is explained in the logout module and corrected on the logout action module. The browser.goto action should NOT be flagged internal as a layout refresh is needed by the dynamic menu options we introduce later

This module takes' the user through the basic login procedure. The next module will deal with the extended process required if account verification is in place

Extended Login with check that account is valid
NOTE There is a change needed to be made to part of this process which is explained in the logout module and corrected on the logout action module. The browser.goto action should NOT be flagged as internal as a layout refresh is needed by the dynamic menu options we introduce later

In this module we extend the login process to ensure that the user's account has been validated.
We look a the single database query and introduce the concept of "identity" with reference to the security provider.
We make first use of a 403 "Forbidden Response"

Resending the registration authorisation code
In this module we discuss how to resend the authorisation code to the user in the event of loss or non receipt. We look again at the use of the security provider "identity" and implement an automatic login after registration.
We also introduce a simple app connect "Flow"

Our First menu - Adding a menu to your website
NOTE There is a small logic error in this module which is explained and corrected on the logout action module. The condition to show/ hide the login option should be show NOT Hide

*This module introduces the concepts of:
1. adding a menu to a layout page
2. Adding an API action to manage visibility of menu elements
3. The process to hide/ show menu elements according to data context

Adding a logout Option to the menu
NOTE Due to structural changes made to the layout page there is a retrospective change needed to the logout procedure which is explained at the start of this module. Also a small login error in relation to the login option is explained and corrected.

This module explains the security provider Logout action and introduced calling of bootstrap dialogues from within flow to conditionally run a server action

How to add the current logged in user's name to the menu
In this module we use the layout "whoami" server action all to customise the menu to show the name of the current logged in user

Adding content to our menu
In this module we populate the public facing menu to show the individual facilities available from the website

Adding registration to your menu (module added to correct omission from menu)
In this module we add a register link to the menu.
Sorry I forgot to add this to the menu and only realised a lot further into the course. As a result you may see some things in this video which do not appear in your system as it was made around 15 modules after

Making your SEO table
In this module we make the SEO table ready for management of SEO tags.
Sorry this module is a bit scrappy as it was initially omitted from the next video so I have added it as a separate module but it is edited from a few other pre-release videos

Adding API actions for implementation of dynamic SEO
In this module we create the API action needed to manage the creating of SEO entries

The SEO Global Action
In this module I introduce the concept pf global API actions and use of $_SERVER variables to dynamically create set tags

Adding your dynamic metatags to your layout page
In this module we show the user how to bind the SEO table meta tag fields to our layout page to allow tags to be bound dynamically

Creating the admin folder and layout
In this video we introduce the admin console and the use of multiple layout pages.
We create admin home and add a menu to the admin layout

Securing your admin area using an API action attached to the layout page
In this module we introduce the "Security Restrict" module of the security provider and demonstrate how to use it to protect a layout page and it's associated content

Introducing the SCRUD 5 - the generic table management actions

  • THIS MODULE IS ESSENTIAL READING *
    PLEASE NOTE - 23/08/2022 -This has been remastered due to an error in the setting of the parameters in the read action
    Pretty much any database action resolves to 5 basic functions, Search (a list), Create a Record, Read a record, Update a Record and Delete a record. In this module I set a format for the creating of these modules which can be followed by users throughout this course so they do not need to be shown each time the actions are required.

Managing our SEO entries via an admin page table
*In this module we use the first of our SCRUD 5 actions to present a searchable list of all the entries in the SEO table. *
We add a basic search filter facility and also supress the insertion of admin pages into the SEO table.
In this module we introduce
Bootstrap 5 generator
The use of "&&" in expressions to represent the condition "AND"
The use of a text input to filter the list returned by the search API
The use of the condition "contains" in a SQL query condition

Joins, sub tables and multi references demystified
In this module we look at how to join tables based in primary/ foreign key relationships, the use of sub tables to add repeating data to a master record and lastly how to use multi references to create many to many joins.
We look at INNER, LEFT and RIGHT joins, how to workaround the lack of right join support in SQLite.
We deal with how to create sub tables in the database manager and create queries based on those tables.
Lastly we deal with multi refences which combine the concepts of the subtable's reference fields and inner joins to create the many to many relationship

Managing users PART 1
In this module we present users in the from of a bootstrap table and show how an API action filter can filter multiple database columns simultaneously

PLEASE NOT I ADDED A RETROSPECTIVE UPDATE VIDEO AFTER THE MENU VIDOES AS I FORGOT TO ADD A REGISTER OPTION TO THE SITE MENU

Editing our Users via the admin menu
In the module we add the edit function to our users bootstrap table

Delete a User and Associated Roles
In this module we raise a bootbox dialogue within a click event of a button to execute a record delete within a server action. This action deletes both the user and associated roles

Managing roles via the admin console
In this unit we look at how to manage roles via the admin panel. We also look at using the browser's developers console to debug a server action which is not working correctly

Preventing duplicate roles within the roles table
In this unit I invite you viewer to consider a solution to this problem and device a solution themselves.
I do of course also offer a solution for those who need it but please see if you can come up with a solution yourselves

Building Dynamic Page Content based on blog style data structures
In this module we firstly examine the projected structure of the various pages within the site. We identify a common structure which can define all of the information pages and we use the database manager to create this structure ready for data input

Building Dynamic Page Content based on blog style data structures Part 2
Building from the previous module we tweak the structure and the query ready for final use

Building the first part of our general purpose page management administrative module
In this page we use the query developed in the previous module and the permissions table to design a bootstrap table to list the various pages base on their type by using a $_GET parameter to filter the list

Sorry about delay in this series but sometimes life issues impact on us all.
So we have moved on a little, Wappler is now at version 5.3.1, videos are now mastered on Windows 11.
We pick up where we left off and go on a journey to add videos to our pages.

Image processing - The upload form
This video shows how to upload images to a specific area on your server.
This video demonstrates singe and multiple uploads and introduces the dropzone component

Image processing resizing images for optimization
In this module we deal with resizing of images and the use of "cover fit" as an alternative to a thumbnail image.
we also show how to save the different types of image into separate sub directories

image uploads - save image details to a database
*In this module we discuss the data returned byt the image upload component, *
we look at the difference between path and url with node and discuss the many ways we can deal with paths to the uploaded images at both server and app connect level

Image processing and how to show images on screen
In this module we deal with displaying out uplaoded images on screen within a repeating region.
In this case we set paths to the image within app connect and only reference the image name for the database

Image Management - The Summernote Component
We continue out image management series by looking at the summernote component for both image management and text formatting as an alternative of addition to the use of the uploads seen previously

Sorting Uploaded images via the admin console
Sometimes it is necessary to change the order of images which have been uploaded.
In this module we look at using a form repeat and a database multi update to enable image sorting by adapting the existing image upload modal

A quick cleanup of a few minor issues before we move on to setting up out front end pages

In this video we make some small changes to the pagedata update API to cater for boolean values being sent from checkboxes
We also clear the image uplaod form after uplaod from the success event so the form is empty for next use.

23 Likes

We now start with the public facing pages of the website.

We add our first public page - Local Attractions

In this module we add our first public page.
we take a brief journey to refresh out mind about the admin data structures we built.
We investigate locating the appropriate data via the pagedate API action. We duplicate and tweak the action for public access and filter out incomplete records.
We use the bootstrap generator to create a list of attractions and show how to display these attractions in a dynamic modal.
We then use the slideshow component to display associated images.

4 Likes

In this module we create the history page

In this module we introduce the concept of a repeating region to display table data.
We add a dynamic modal and activate the modal from a click event within a column. We also load our page data from that event.
We then introduce the masonry component to display our page images

5 Likes

In this module we deal with business pages

We then list information about local businesses in a repeating region, link a new page and learn how to pass a parameter from one page to another using a route. We then populate the new page with the business data and add the business images in ”cover” size onto the page in a repeat. We then add the lightbox component to display images in “full” resolution when the smaller “cover” image is clicked.

2 Likes