This video is going to be very long, you can skip to the parts that interest you using the quick "SKIP VIDEO TO POSITION" button below the video, or watch the entire thing, it all depends on what you are looking to learn.
Within the contents of this Wappler Login tutorial I have tried to cover every aspect of a single database login setup using a single Cryptographic method of my choosing, to ensure that, if you follow from start to finish you will have a very secure website, however if you prefer to switch from my cryptographic choice to another it should still work on the same concept.
This is the sixth video in the Wappler v1.2.3 "Fruit Juice International" training set, in it I am going to teach the login steps I have already been using on a real website I already created, in great detail; as usual.
Please be aware that after this video is published all passwords mentioned within will be reset for my own peace of mind. Not that I do not trust my audience, haha.
This video will see a little moving between phpMyAdmin and Wappler, as although we had already created our database table structures, we still needed to insert at least a single record into it for a start. Due to the use of Foreign Key relationships, this meant that to get a single user record, I first needed a "Franchise" record, then a "Store" record, all so I could create the "User" record.
Please note that there are multiple ways to build a page layout in Wappler, in this first Wappler video I have chosen to build as much as possible through the App Structure panel even though it is quicker to use the Design Mode - on page rather, in the next videos I will be building in the preferred documented way.
Core components and concepts used within are as follows:
• Creating new Files in the Wappler File Manager > Opening Files from the Wappler File Manager.
• Adding Frameworks for Bootstrap 4, jQuery 3.3.1 & App Connect from a CDN (Content Delivery Network).
• Setting Page Title > Setting App ID if required.
• The powerful Wappler App Connect Browser built in Extension & highlights of usage cases.
• Adding Bootstrap Alerts in Wappler > Adding a Submit Button > Adding Forms & Form Inputs > Fine Tune Wappler Designs > Add Input Attributes.
• Adding Wappler Client Side Form Validation.
• Create Server Connect Folders & Actions > Connect to your Database > Add Security Provider with permission roles.
• Connect Wappler Server Connect to App Connect as a Server Side to Client Side processor > Listen for Server Submit Success Events & combine Events.
• Set Success GoTo Redirection.
• HTML5 Form Inputs vs Bootstrap 4.1 Form Group Inputs.
• Adding Wappler Server Connect Data Formatter Cryptographic SHA256 password HASH encryption with a SALT. Generate SHA256 Hash.