Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

[Mashiane]

Good day

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

FOR A MORE DETAILED SETUP PROCESS, PLEASE SEE THE GITHUB REPO README. Github

NB: PLEASE DO NOT ASK QUESTIONS ON THIS THREAD.

Download (All Source Code Related to this Series)

Getting Started (Video of Setting up your IDE - PLEASE FOLLOW THE GITHUB LINK ABOVE)

Forms (TL;DR)

Creating Forms with VFlexDialog (VDialog+VForm+VFields)


Video Lessons

00. Up and Running with BVAD3 in 5 minutes
01. Creating a Login Dialog
02. Creating input controls for the login dialog with validation
03. Getting the entered data i.e email and password, validating it, showing a loading button
04. Adding a background image for our page and hiding the navbar and drawer for until a user is authenticated.
05. Creating the back-end database and User Sign Up
06. User Sign Up and "Taken" User Profiles
07. User Sign Up
08. User Sign Out
09. Creating our own HTML tags i.e. Components

HIGHLIGHT!!!! - The New Form Builder

10. Creating Dialogs
11. Live Code Swapping / Hot Reload
12. VMsgBox Inputs & Prompts & Changing Button Labels @ runtime
13. Beginning Offline First WebApps
14. Creating a Text File NotePad (i.e reading text files)
15. Introducing the V-Data-Table (VueTable)
16. BANanoVuetifyAD3 Rewind - BindState Source Code Generation with the Kitchen Sink BindState Tool
17. BANanoVuetifyAD3 Rewind - A Time to Reflect
18. Mashy Teaches BANanoVuetifyAD3 : Creating a Data Table Invoice Listing using MySQL PHP
19. BANanoVuetifyAD3 Rewind - Basic Animations with BANanoAnimeJS
20: CRUD - Creating a Dialog Form to capture our Invoices - Part 1 [Lesson 18 - continuation]
21: CRUD - Creating a Dialog Form to capture our Invoices - Part 2
22: BANanoVuetifyAD3 Rewind - The Awesome Beautiful Sweet Alerts
23: CRUD - Creating a Dialog Form to capture our Invoices - Part 3
24: Installing BVAD3 Class Templates
25. CRUD Page Template
26. Creating a simple chat bot
27. Mashy Teaches V-Label
28. BANanoVuetifyAD3 Rewind - Getting Started
29 The basics of creating Single Page Applications (SPAs)
... Export VueTable to PDF and Excel (with one liners)
Changing the WebApp Global Font
Handling UI Breakages on Page Refresh

Data-Table: Import CSV, Run Timers, Inline Editing & RealTime Updates, Export to Excel & PDF
V-Data-Table Exports Explained - PDF, Excel, CSV Exports
Updating our UI at run-time (using a single v-bind object) - a demo based on Alerts
Changing the look and feel of the scrollbars
Explaining the VList(View)
Vue Fetch HTTP Requests with BANanoVuetifyAD3
Vue Axios HTTP Requests with BANanoVuetifyAD3
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 1
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 2
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 3
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 4
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 5
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 6
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 7 (JSON CRUD)
Creating Vuetify Forms using BANanoVuetifyAD3 - Part 8 (Styling VueTable)
Creating Vuetify Forms with BANanoVuetifyAD3 - Part 9 - Uploading Files with VFileInput
New Animation Strategies in BVAD3
How to play Lottie files in Vuetify using BANanoVuetifyAD3
Creating a Chart in the Vuetify VBottomSheet with BANanoVuetifyAD3
Offline First NoSQL CRUD with CouchDB using BANanoVuetifyAD3
Adding Totals to VueTable / VDataTable +Sticky Headers
Dynamic Browser Titles using the Vue-Router in BANanoVuetifyAD3
Creating Round VCards
Creating Diamond, Square, Buttons with Images
Tree-Shaking your BVAD3 project with the BVAD3 Package Manager
MongoDB PHP CRUD with BANanoVuetifyAD3
Full Stack WebApp using MySQL, Java Jetty & Hikari Pooling (No PHP)
Full Stack WebApp using Vuetify, MongoDB & Java Jetty (No PHP)
Full Stack WebApp using Vuetify & FireStore (No PHP)
Full Stack WebApp using Vuetify & MongoDB PHP
Full Stack WebApp using Vuetify & MySQL PHP
Full Stack WebApp using Vuetify & SQLite3 PHP
Full Stack WebApp using Vuetify & IndexedDB
Full Stack WebApp using Vuetify & CouchDB
Full Stack WebApp using Vuetify, SQLite & Java Jetty (No Php)
Full Stack WebApp using Vuetify, MSSQL, Java Jetty & Hikari Pooling (No PHP)
Full Stack WebApp using Vuetify, MSSQL PDO PHP
Full Stack WebApp using Vuetify, PostGreSQL PDO PHP
Full Stack WebApp using Vuetify & MSAccess PHP PDO
Full Stack WebApp using Vuetify, MSAccess & Java Jetty (No PHP)

VERY VERY VERY IMPORTANT - Fixing VueJS/JavaScript Memory Leaks (when end users press F5)

Improve accessibility of your app with Text2Speech with a single line of code.
Creating Multi-Language WebApps
Vuetable - Getting the ClickedRow / RightClickedRow / DoubleClickedRow
VueTable - Creating Expansion Panels
Creating PDF Reports with the Abstract Designer Drag n Drop
Creating CRUD based WebApps free eBook (for those in a hurry)
Embedding a Website inside your WebApp
Recap: Embedding a PDF document inside your WebApp
Runtime Manipulation of components in pgIndex from other pages
Adding a tour guide to your app using Enjoy Hint
VueTable Dynamic Columns At Runtime
Creating Steppers with Form Inputs
Creating Tabs with Form Inputs
Creating Expansion Panels with Form Inputs
QRCodes, BarCodes and Signatures
Customizing the Off & On Icons for v-checkbox and v-radiogroup
Creating VBtn(Icon) from VField
Adding a Prefix / Suffix in VFields
Creating a Mini Nav Drawer
Creating a ListView - Avatars
Creating a ListView - Other Item Variants
Creating a ListView - Preferences using left check boxes
Creating a ListView - Preferences using the Right Check Boxes
Creating a ListView - Using Left Switches
Creating a ListView - using Right Switches
BVAD3 Kitchen Sink Topic Search
Uploading Files to a folder of your choice and or rename the name of the uploaded file.
Creating colored chips using VChipGroup
Sending Emails via EmailJS REST API
VFlexDialog + MySQL CRUD REST API (PHP)
Leaftlet Map - Click & MouseMove Events

Featured WebApps​

Contacts Manager - BANanoServer + jRDC2
House Rental
Invoicer
Organogram Lite
IoT (Internet of Things) Tracker
ICT Asset Manager
Cloud Inventory
Meal Prep
Nobel Peace Prize
Walts B4xGoodies Explorer
Projects Created with BANano

Features
Introducing the BANanoDataSource with MySQL PHP
Work Offline with BANanoRelax - Sync with Server (see the CouchDB example above)
Encrypt & Decrypt Traffic between BVAD3 and MySQL PHP DB
Navigation Guards
Creating Desktop Apps using Electron
PHP File Management with BANano
Package Manager
Isiketshi (Sketch)

Emails

Responsive Email Framework


Deployment
Deploy on Windows - HTTPS
Deploy on Windows - HTTP
Deploy on Netlify

Related Content​

Download & Run New Awesome Kitchen Sink
Downlod & Run New BANanoServer Awesome Kitchen Sink

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...

www.b4x.com

 

[Mashiane]

01 Creating a Login Dialog - in part 2 we add input controls with validation

Video

 

[Mashiane]

02 Creating a Login Dialog - we start and finish part 2 with adding input controls and form validation.

 

[Mashiane]

03 -Getting the entered login details data, validating it, showing a sweet alert and a loading button.

 

[Mashiane]

04 - Adding a background image for our page and hiding the navbar and drawer for until a user is authenticated.

 

[Mashiane]

05 Creating the back-end database and User Sign Up

 

[Mashiane]

06 User Sign Up & Taken Email Addresses

 

[Mashiane]

07 User Sign In

 

[Mashiane]

08 Sign Out

 

[Gabino A. de la Gala]

Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.

 

[Mashiane]

Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.

The backend database is MySQL and accessing it from outside / inside it just needs to be accessible. Is is finicky though sadly.

BANano.PHP_NAME = $"${AppName}.php"$
    BANano.PHPHost = $"${ServerIP}/${AppName}/"$
    BANano.PHPAddHeader("Access-Control-Allow-Origin: *")

For accessing via mobile device, I usually use the domain name in the config.properties file e.g. https://domain.com, with that said, try and use the domain name just to test.
Also as the default port is 8080 for web access, do not include it on the server ip string, the ip address should work fine also without hustles.

Just also remember to update your MySQL connection settings on the login layout, registerDS to point to your server. This you have to do on all DataSources that you use.

 

[Mashiane]

Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.

I kindly request that you use the link provided in the first post to ask questions as it has tutorials about everything BVAD3 related, this thread is just for lessons. Please, its a kind request.

 

[Mashiane]

09 Creating our own HTML tags i.e. Components

 

[Mashiane]

The New Form Builder

Please kindly go through these videos to introduce yourself to the New Form Builder. Using it going forward will greatly help with your building working apps faster and easier.

Video 1




Video 2




Video 3


More videos on the form Builder are coming...

 

[Mashiane]

10. Creating Dialogs with the New Form Builder.

NB: Please watch all videos in post #14 for a background.

 

[Mashiane]

11. Live Code Swapping i.e. Hot Reload

 

[Johan Hormaza]

11. Live Code Swapping i.e. Hot Reload

Excuse me friend, I could re-upload the video but with higher quality, it cannot be seen well.
Thanks! ?

 

[Mashiane]

Excuse me friend, I could re-upload the video but with higher quality, it cannot be seen well.
Thanks! ?

I see its still processing HD version...., please be patient a little bit. Thanks

 

[Mashiane]

12 VMsgBox (Inputs & Prompts)

In one page, we use 2 VMsgBoxes, one for input and another to show a prompt. We also show how to change the labels of the OK button at runtime by calling

.UpdateOkLabel

Before the VMsgBox is shown. When changing the buttons, we set a "Mode" to determine the kind of action we are executing.

 

[Mashiane]

Teaching Notes...

One of the awesome things that one can do with BANanoVuetifyAD3 is to create fully fledged CRUD WebApps.

In this thread we look at how we can create a CRUD app for Server Maintenance using MySQL (Php)

[BANanoVuetifyAD] Server Maintenance Categories MySQL CRUD WebApp featuring the BANanoDataSource (PHP)

Ola NB: Please run the MySQL Connection Test first Attached is a fully working project developed with BVAD3 that showcases the new BANanoDataSource. Download Source Youw ill need the BVAD3 b4xlib, copy these to your external libraries folder These are the components we have used...

www.b4x.com