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

Mashiane

Expert
Licensed User
Longtime User
Adding Totals to VueTable/VDataTable

1643888845258.png



The Kitchen sink data-tables has been updated to include adding totals to data-table.

Step 1: Define your fields and titles

1643889352267.png


Step 2: Define your fields which will be summed. For each field indicate which callback should be used to sum contents of that field.

1643889376227.png


1643889415949.png


Note that in the first column we have "total", this "total" is not hard coded as any column can have a sum.

Step 3: Define the callbacks

B4X:
Sub sumname As String
    Return "Totals"
End Sub

Other columns

B4X:
Sub sumfat As Double
    Dim recs As List = dt1.GetData
    Dim tot As Double = BANanoShared.ListSumProperty(recs, "fat")
    Return tot
End Sub

This gets the data from the data-table (including any changes made). It sums up the "fat" field and returns the value.

Everything else is done internally by the VueTable.BuildSlots method.

Have fun.

PS: A bug for fixing the v-data-table header was also fixed. To have the header fixed, checked the fixed header property and then specify a height of the v-data-table.
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
MongoDB PHP CRUD with BANanoVuetifyAD3

Download

In this video we start to explore how we can achieve CRUD functionality in MongoDB using PHP. We are able to Create, Read, Update and Delete records. We are also able to filter only the records we need, just like a select where SQL statement clause. The code is very simple to follow.


See instructions here on how to add MongoDB to Laragon and installing the MongoDB drivers for PHP.

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Full Stack WebApp using Vuetify & FireStore (No PHP)

If you have not used FireStore before, you can get a brief introduction here (2min in)





1. Note the URL links in Main.AppStart added with AddJavaScript.
2. Note the fb.js file in Files folder. This should be based on your own Firebase config file for your project.
3. Note the DataSource settings for firebase.




Interesting Reading

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Full Stack WebApp using Vuetify, MongoDB & Java Jetty (No PHP)

Please note the installation instructions here (you dont need to use Laragon)



 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify & MongoDB PHP

Note: the connection settings are in the data-source.



To install MongoDB, you can see more details here:

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify & MySQL PHP

In this example (which is 99.9% similar in code with the previous one) we use MySQL php. We change the database type in the data-source, update the mysqlconfig.php file, so that our app knows where to perform CRUD and run our code.

 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify & SQLite3 PHP

1. You need to activate the sqlite3.dll extension in your PHP installation.
2. The sqlite db is added to the Files tab, on each run the server sqlite db file will be replaced., so be careful.
3. We change the database type setting in the Data-Source, the code is 99.9% similar to the previous MySQL PHP code.

 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify & CouchDB

CouchDB is an offline first backend database. You can set it to work offline (using IndexedDB) and online (directly to CouchDB server)
In this example we make it to work online and then later set it to work offline to demonstrate this.

How this database works was discussed on this thread

In this example, we explore the current fullstack examples for ease of use and understanding.

Reproducing.

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 - Fullstack WebApp using Vuetify, SQLite & Java Jetty (No Php)

Please note the BROWSERIndex and SERVERIndex DirectSQLite... calls
The code base is similar to the other examples dealing with BANanoServer.
The DirectDB class has been updated to cater for SQLite database. This does not require a pooling approach.

 
Top