B4J Tutorial [BANanoVuetifyAD3] Converting your DB to a WebApp using VFlexDialog + MySQL CRUD PHP (Abstract Designer)

Hi there

NB: B4xTemplate & Example Project Attached

This example is a showcase of using the VFlexDialog with MySQL as a back-end using PHP.

By the end of this tutorial, you should have been able to

1. You created a new BVAD3 CRUD Project that will use MySQL + PHP, using a b4xtemplate named BVAD3 VFlexMySQL PHP.
2. You created a page for a table named projects using an existing template named BVAD3 CRUD Page. This involved creating a class module based on an existing template. You named this page ViewProjects
3. You copied the layCRUD template to a layProjects and renamed all the elements inside it from contCRUD to contProjects etc.
4. You have installed a development webserver (if you did not have one running) of your choice.
5. In the Main Module, you have changed the variable AppName to be assigned the name of your app (DO NOT USE SPACES)
6. In the Main Module, you have updated the Publish variable to be assigned the folder path where your app will be published to on your PC. The contents of this folder are what you will FTP to your public webserver.
7. You have updated the config.properties file to point to where your app will be running from.
8. You have updated the mysqlconfig.php file to link your MySQL backend to the app.
9. You have also created the back-end MySQL database that you will use with the tables you need.
10. We started the VFlexDialog builder and created a new page, a new form and 2 text fields.
11. We updated the properties of the form so that it works with the projects table.
12. We also updated the properties of both our text fields to be linked to the id and name fields of our table.
13. We did a preview of how our UI looks like, how our HTML will look like and how our b4x code is.
14. We downloaded the generated b4x source code so that we can copy it to our project.
15. After downloading the VFlexBuilder generated source code for your page, you added parts of the code to pgIndex.AddPages, this had an effect of adding the page for the build up process of the app.
16. You also added a script to save the data-model for the projects table to the memory of the app. Part of this code has an effect of creating the database table if it does not exist.
17. You also added a link to the page on the navigation drawer of the app.
18. You replaced all the source code in the ViewProjects page in your B4J project with what was generated by the VFlexDialog builder.
19. You ran your app, added, updated, deleted some projects.
20. You discovered that a bug where the id column is marked as "Hidden-Table" was showing on the data-table. This bug was set on purpose for you to fix.
21. You fixed the "All Columns Visible" property of the tblProjects component by setting it to off.
22. You also verified the code that controls the name field visibility on the data-table.
23. Possibly you played with Hide Details to explore what it does on the "error" messages being shown under the field.
24. You are happy with the progress made and are ready to publish your app to your server.

Lets begin!

In the attached source code, there are templates, this is how you will use them to create your app.

Preparing the IDE

1. Close B4J and copy the attached b4xtemplate to your Additional Libraries folder
2. If you have not used BVAD3 before, copy these additional resources and unzip them to your Additional Libraries. Also download, unzip and run the BVAD3 library from here. You will need the BANano library for this to work.

Creating a Database Driven Web App

1. Open B4J, click File > New then

2. Type in your project name and click Ok.

Adding a Page for projects (this should be done for each table you need to be in the WebApp)

1. Click on Project > Add New Module > Class Module > BVAD3 CRUD Page

2. Type in the name of the View, name it ViewProjects and click Ok. Another page for another table can be ViewResources, ViewRisks, ViewTasks etc.

Creating the layouts (this should be done for each DB table you want to be in the webapp)

1. We have a template called layCRUD. This is the basis for everything crud you will do. It comes with a data-source, a vue table, a msgbox and a message box elements.

2. Lets use the example provided, for creating a CRUD example using a DB table called "projects". Open the layCRUD layout.

3. On the layout, click File > Save As

4. We will use the table name as a suffix for everything. Type in layprojects as a layout name and click Ok. For another table it can be layresources, layrisks, laychallenges etc.

5. In layprojects, rename the elements to be suffixed by the word projects. So contCRUD>contProjects, dsCRUD>dsProjects etc.

contProjects - this is the housing container for everything on the page. This container is compulsory for each page. By renaming it contProjects you are making it unique across the app.
dsProjects - this is the Database Abstract Layer. Its a simple tool for you not to worry about writing SQL statements and yes, you can feed it custom SQL statements too. You rename is dsProjects to make it unique.
rowProjects - this is the row inside the container.
colProjects - this is the 12 spaces column inside the row
tblProjects - this is the data-table to list the records in the database table. The following important properties are set [Manual=True, Button Size=Small, Button Elevation=0]. The Manual property is compulsory because the data-table structure, that is columns etc will be build by the vflexdialog.
dlgProjects - this is the vflexdialog that is the glue for our page. The code to create it is generated by the VFlexDialog builder. More details on how that is done are here.
confirmProjects - this is the dialog to confirm "delete" actions.

Save the layout.

What have you accomplished so far?

1. You created a new BVAD3 CRUD Project that will use MySQL + PHP, using a b4xtemplate named BVAD3 VFlexMySQL PHP.
2. You created a page for a table named projects using an existing template named BVAD3 CRUD Page. This involved creating a class module based on an existing template. You named this page ViewProjects
3. You copied the layCRUD template to a layProjects and renamed all the elements inside it from contCRUD to contProjects etc.

 

[Mashiane]

Preparing the Development WebServer & Linking your App

You can use any development webserver of your choice. I just use Laragon due to its simplicity. This you can get here and is not compulsory.

1. Go to the files tab in your app.

2. In the Config (virtual) folder, open the config.properties file.

3. Here you need to indicate to the app where it will be running from. We have set it to https://localhost. This can be the publicly available URL of your inter-web based server.

This link is important for the BANano Inline PHP link established in the Main module, AppStart sub.

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

This indicates that the app will run from that ServerIP, inside that sub-domain, this being your AppName.

The AppName here is

Public AppName As String = "vfdcrud"

It's important to change this to be the name of your app. When BANano transpiles your app, it will create the names subfolder inside your Publish path.

Also, in Main > AppStart, you will have to indicate to where your WebApp will be published to:

Private Publish As String = "C:\laragon\www"

This could be [c:/xampp/htdocs] for example.

Preparing the back-end database connectivity to our webapp

For this example, I have a data-base called projects, with a table called projects. This table has 2 fields, id (int, auto-increment) and name (string)

In the files tab, open the mysqlconfig.php file.

Update it to reflect your MySQL PHP connection details. This is an include file used by the php inline scripts.

Update this to suit your needs

<?php
const DB_HOST = 'localhost';
const DB_NAME = 'projects';
const DB_USER = 'root';
const DB_PASS = '';
const DB_KEY = '';
?>

I am attaching herein a PhpMyAdmin compatible zip file to re-create this database, called projects.zip

What have you accomplished so far?

1. You have installed a development webserver (if you did not have one running) of your choice.
2. In the Main Module, you have changed the variable AppName to be assigned the name of your app (DO NOT USE SPACES)
3. In the Main Module, you have updated the Publish variable to be assigned the folder path where your app will be published to on your PC. The contents of this folder are what you will FTP to your public webserver.
4. You have updated the config.properties file to point to where your app will be running from.
5. You have updated the mysqlconfig.php file to link your MySQL backend to the app.
6. You have also created the back-end MySQL database that you will use with the tables you need.

 

[Mashiane]

Creating the UI with the VFlexDialog Builder

The VFlexDialog Builder is an online tool available on Netlify & Github. (you can download and run locally). As much as you can do the same by just writing the code, it helps speeds the process and is enhanced.

If you are not familiar with how the VFlexDialog Builder works, you can watch this Clip.



Creating the Projects UI for our App

1. In the right drawer, expand it and click "Page"

2. The following screen appears...

Just click Apply for now.

3. This updates the tree view on the left and closed the expand panels. Click the vform chip.

Update the details to reflect the name of the database table we want to create a UI for and click Apply to save it. Our table name is projects, with primary and auto-increment key id, the column value to be used for delete confirmations is name.

The form elements should be dense, outlined and the "hints" and "error" labels under should be hidden. i.e hide-details.

4. Expand the VFields section and click the v-text-field twice. This will create 2 text fields in the form.

Your UI now looks like this.

5. Expand the left tree view to show the structure of your form.

6. Click on the edit icon of textfield1 and update its properties. The field name is id, its an integer, it will be a text field, should exist on the form but is hidden. It will not be on the table and should be hidden on the table anyway. Click Apply

7. Update textfield2 with properties to reflect it. The name of the field is "name", the title should be project name, its a string type, should show as a text field. Its is a required content (this creates a rule for it). It must receive auto-focus, and it should be used by ORDER BY in the sql statement. We also change the Row and Column position to be 1 as the id field will be hidden. You can also move elements by using the arrows in the tree view.

We also want to set some data-table options for the name column. Click the "Options" tab. We set the name column to be sortable and filterable. Sortable ensures that when we click the Header on the table, we can sort it asc/desc. Filterable means that when searching with the data-table search, the name field contents will also be searched. Click Apply to save your changes. (Details Tab)

When you are done, clicking on the form in the tree view will show this. You are done creating you UI for you projects table.

Viewing the HTML of your page.

You can click the HTML tab to see the generated HTML of your form.

Viewing your B4X Code

The part that we are interested in is the B4X code, which we will use to build our page in b4x. The important part of the code is the form build up. If everything is done correctly, all the code for:

7.1 Backend Database
7.2. DataTable
7.3 Creating, Reading, Updating, Deleting our projects is done.

Click the Download button to get the generated source code.

What to note:

The first part of the code is related to the pgIndex. That is all the code before #IgnoreWarnings:12

What have we accomplished this far?

1. We started the VFlexDialog builder and created a new page, a new form and 2 text fields.
2. We updated the properties of the form so that it works with the projects table.
3. We also updated the properties of both our text fields to be linked to the id and name fields of our table.
4. We did a preview of how our UI looks like, how our HTML will look like and how our b4x code is.
5. We downloaded the generated b4x source code so that we can copy it to our project.

 

[Mashiane]

Updating your b4j project (pgIndex & ViewProjects)

pgIndex.AddPages

From the downloaded source code, cut the following code and paste it in pgIndex.AddPages sub.

Dim pgprojects As ViewProjects
    pgprojects.Initialize(vuetify)
    BANano.Await(Build_projects_BackEnd)

This ensures that when your app runs, the new ViewProjects page is also built and added as part of the app resources.

Also cut and copy this piece of code to pgIndex. This saves the data-model of the projects to the app for later use. The code also has a section to create the DB "projects" table if it does not exist. The code to create the table needs to be removed for production release of your app.

Sub Build_projects_BackEnd
    ''add the data-model for 'projects' to the project instance
    vuetify.AddDataModel("projects", "id", "id")
    vuetify.AddDataModelStrings("projects", Array("id","name"))

    'START: CREATE TABLE IF NOT EXIST projects - NB: COMMENT THIS SECTION OUT FOR PRODUCTION
    'declare the table recordSet
    'this will create the table if it does not exist
    'Comment this code for production
    Dim rsprojects As BANanoMySQLE
    'initialize table for table creation
    rsprojects.Initialize("projects", "projects", "id", "id")
    'set the master back-end
    vuetify.SetBackEndMySQLE(rsprojects)
    rsprojects.SchemaAddInt(Array("id"))
    rsprojects.SchemaAddText(Array("name"))
    'generate & run command to create the table
    rsprojects.SchemaCreateTable
    rsprojects.JSON = BANano.CallInlinePHPWait(rsprojects.MethodName, rsprojects.Build)
    rsprojects.FromJSON
    'END: CREATE TABLE IF NOT EXIST projects
End Sub

pgIndex.Drawer

We also want to have a link to the projects page on the nav drawer. On the created life cycle event, cut this line from the code and copy it to the created sub

drwlist.AddItem("", "pprojects", "mdi-vuetify", "blue", "Projects", "/vprojects")

This eventually will ensure that your app works like..

ViewProjects source code

From the downloaded source code, copy all the code from #IgnoreWarning 12 and REPLACE all the source code in the ViewPages class module with it.

Making the ViewProjects the start page of our App

We want to make our ViewProjects page the start page of our app. We need to do 2 things for that.

1. In ViewProjects.Initialize, uncomment the line

page.StartPage

NB: All other pages with this line un-commented, it should now be commented.

2. Update the pgIndex.created sub for the page link to be

drwlist.AddItem("", "pprojects", "mdi-vuetify", "blue", "Projects", "/")

Changing /vprojects to / so that it goes to the right page.

What have you achieved so far?

1. After downloading the VFlexBuilder generated source code for your page, you added parts of the code to pgIndex.AddPages, this had an effect of adding the page for the build up process of the app.
2. You also added a script to save the data-model for the projects table to the memory of the app. Part of this code has an effect of creating the database table if it does not exist.
3. You also added a link to the page on the navigation drawer of the app.
4. You replaced all the source code in the ViewProjects page in your B4J project with what was generated by the VFlexDialog builder.

Its time to run and test your app.

 

[Mashiane]

Running & Testing your App

Press F5 to run the app, the app will be transpiled and your default browser opened. This process might take a little while because your app has not been optimized and the full bva3 library is used. We will tree-shake this later on.

In the data-table click the + button to add a new record. A prompt screen appears.

If you click Save without entering anything, the "namecheck" rule will fire and a red block will appear around the name. If we had set Hide Details to off, the error will be displayed just below the Project Name in red, you can update this by changing this

dlgprojects.HideDetails = True

to

dlgprojects.HideDetails = False

This results in.

You can continue adding projects...

You can click the delete button to delete also..

Also click the Edit button for the project you want and change its details.

Try to also check if on the data-base everything is saved properly.

A bug for you to fix

There is a known bug in the app for you to fix. When we defined our app, we indicated that the id column should not show in the data-table, however in this instance it shows. We need to fix this.

In the vue-table in the layout, there is a setting which by default is true. You need to switch this off. The property name is "All Columns Visible".

Also ensure that this line is correctly reflected as

dlgprojects.SetItemOnTable("name", "Normal", True, True ,True, "large")

Now run the app. The id column should be hidden. Bug fixed. Congratulations.

What have you accomplished this far?

1. You ran your app, added, updated, deleted some projects.
2. You discovered that a bug where the id column is marked as "Hidden-Table" was showing on the data-table. This bug was set on purpose for you to fix.
3. You fixed the "All Columns Visible" property of the tblProjects component by setting it to off.
4. You also verified the code that controls the name field visibility on the data-table.
5. Possibly you played with Hide Details to explore what it does on the "error" messages being shown under the field.
6. You are happy with the progress made and are ready to publish your app to your server.

 

[Mashiane]

Publishing your WebApp

We will discuss some useful tools and other things you can do to your WebApp/PWA before we publish our app. Also you might have to do some reading about PWAs.

FavIcon Generator

Favicon & App Icon Generator

Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

www.favicon-generator.org

SEO / OpenGraph Meta Tags

Before you can publish your app, you can add meta tags for SEO purposes. There are a variety of ways to do this.

Meta Tags — Preview, Edit and Generate

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

metatags.io

The best tools for web development | Web Code Tools

Award-winning, free website code generators. Generate HTML, CSS, Structured Data, Twitter Cards, Open Graph and more.

webcode.tools

Testing WebApp Performance

WebPageTest

View this on WebPageTest.org...

www.webpagetest.org

Coming soon