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