B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · Nov 14, 2020

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...

www.b4x.com

*************************************************

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)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...

What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...

www.b4x.com

[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

USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]

Mashiane · Dec 10, 2020

Part 32

We create an input dialog to capture user profiles. This uses a v-dialog and a v-card component.

Mashiane · Dec 10, 2020

Part 33

We create steppers, preference lists and tasks lists.

Mashiane · Dec 10, 2020

Part 34

We create a SQLite backend database and perform some crud functions, thanks to PHP.

Mashiane · Dec 10, 2020

Upcoming Updates - Hide Data-Table Columns @ runtime

This is code to hide columns for our first example.

B4X:

'hide specific columns
    vetable.HideColumns(tables, Array("fat", "carbs", "protein"))

Its the table name, passing the vue-component name and the columns to hide. This is done after the table is created.

NB: This sub expects that you know which columns to hide. If you want to hide tables for all the duration of the app, just better dont add them to the data-table, it wont affect the underlying data.

This shows this now...

To clear the structure and data of the data-table, a .Reset method has been added. Thanks Mr J.

Mashiane · Dec 11, 2020

Part 35

We use MySQL as our backend for our CRUD (same codebase as in SQLite on part 34 above)

NB: It is important that you understand the details of tutorial 34 when starting we this. We are not repeating anything we said here before about the code structure as the code base is 99.9% the same as in tutorial 34 and that was explained in detail.

Please also note this tutorials contains the most updated code for everything we have discussed here, and the code has indeed evolved.

Download

Mashiane · Dec 11, 2020

Part 36

Download

We use MSSQL as our backend for our CRUD (same codebase as in SQLite on part 34 above)

NB: It is important that you understand the details of tutorial 34 when starting we this. We are not repeating anything we said here before about the code structure as the code base is 99.9% the same as in tutorial 34 and that was explained in detail.

Please also note this tutorials contains the most updated code for everything we have discussed here, and the code has indeed evolved.

Lello1964 · Dec 12, 2020

I've tryed to test mysql Php demo, i've changed config.php setting with mysql parameters my local Mysql database but when i try ADD USER button i have this error :
An error took place whilst running the command. Access Forbidden.

I use Heidi to access database and it work.

Can you help me ?

config.php:

<?php echo("Access Forbidden");exit();
const DB_HOST = '127.0.0.1';
const DB_NAME = 'TOUCH';
const DB_USER = 'root';
const DB_PASS = 'admin';
?>

Mashiane · Dec 13, 2020

Lello1964 said:
I've tryed to test mysql Php demo, i've changed config.php setting with mysql parameters my local Mysql database but when i try ADD USER button i have this error :
An error took place whilst running the command. Access Forbidden.

I use Heidi to access database and it work.

Can you help me ?

config.php:

<?php echo("Access Forbidden");exit(); const DB_HOST = '127.0.0.1'; const DB_NAME = 'TOUCH'; const DB_USER = 'root'; const DB_PASS = 'admin'; ?>

Update the first line of the config file to just be <?php

micro · Dec 13, 2020

Lello1964 said:
echo("Access Forbidden");exit();

Remove this

Lello1964 · Dec 13, 2020

now pressing ADD USER have this error:

An error took place whilst running the command. Warning:
call_user_func_array() expects parameter 1 to be a valid callback, first array member is not a valid class name
or object in C:\laragon\www\bvad3\bvad3.php on line 131 Fatal error:
Uncaught Error: Call to a member function execute() on boolean in C:\laragon\www\bvad3\bvad3.php:161
Stack trace: #0 C:\laragon\www\bvad3\bvad3.php(502): BANanoMySQL('changes', 'INSERT INTO `us...', Array, Array)
#1 {main} thrown in C:\laragon\www\bvad3\bvad3.php on line 161 

all buttons generate error

Lello1964 · Dec 13, 2020

config.php:

<?php
const DB_HOST = '127.0.0.1';
const DB_NAME = 'TOUCH';
const DB_USER = 'root';
const DB_PASS = 'admin';
?>

Mashiane · Dec 14, 2020

Lello1964 said:
all buttons generate error

Unfortunately I cannot re-produce this on my side.

Mashiane · Dec 15, 2020

IMPORTANT ANNOUNCEMENT: BVAD3 Version 2.64+

The config.php files have been renamed to mysqlconfig.php and mssqlconfig.php. This way one can use both dbs in the same project. Rename them accordingly going forward.

1. mysqlconfig.php for MySQL and

Example

B4X:

<?php
const DB_HOST = 'localhost';
const DB_NAME = 'XXX';
const DB_USER = 'XXX';
const DB_PASS = 'XXX';
?>

2. mssqlconfig.php for MSQQL

Example

B4X:

<?php
const DB_HOST = '(local)\sqlexpress';
const DB_NAME = 'XXX';
const DB_USER = 'XXX';
const DB_PASS = 'XXX';
?>

Also ensure that the BANano.PHPHost points to the correct location of your php file.

B4X:

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

For external webservers, DO NOT include the port number and use the actual IP/domain name of the webserver, e.g. http://www.mycompany.com

Ensure your webserver is set up properly for MySQL and MSSQL. You can refer to Setting up the IDE section of the PDF document in the repo.

TheMash

Mashiane · Dec 15, 2020

Part 37

Download

We use BANAnoSQL i.e. IndexedDB wrapped with AlaSQL as our backend for our CRUD.

Whats different: a) we build auto-increment values ourselves and b) we are not using PHP by BANanoSQL.ExecuteWait.

Please also note this tutorials contains the most updated code for everything we have discussed so far in this tutorial.

Lello1964 · Dec 15, 2020

I've solved, must rename bvad3.php file in same name of AppName

Mashiane · Dec 18, 2020

Part 38

Version 2.65 BETA is out with important updates to the data-table functionality.

We add a title to the data-table
We add a search to the data-table to filter records
We add an "addNew" button"
We add a "clear sort" button
We add an "apply (column visibility) filter"
We add a "clear filter" button
Here we use a v-chip-group to control data-table column visibility.

NB: This tutorial is the latest code for everything we have discussed so far in these tutorials.

Enjoy!

micro · Dec 18, 2020

Hi Mash
i downloaded the latest demo and compiled the library BANanoVuetifyAD3.b4xlib
these are same errors:

B4X:

Sub Init
    'initialize the app
    vuetify.Initialize(Me) 'look for the second parameter Appname

B4X:

vbtn.OnMulti(EventName, vuetify.EVENT_Click, $"'${btnID}'"$) 'unknown member OnMulti

.....

joulongleu · Dec 18, 2020

Hi micro:1.Please open the tutorials\Part38 example ,or modify the following code
2. library BANanoVuetifyAD3 unknown member OnMulti

code:

Sub Init
    'initialize the app
    vuetify.Initialize(Me, "inspire")

micro · Dec 18, 2020

joulongleu said:
Hi micro:1.Please open the tutorials\Part38 example ,or modify the following code

code:

Sub Init 'initialize the app vuetify.Initialize(Me, "inspire")

yes thanks joulongleu I knew how to fix
it is to have Mash fix.

joulongleu said:
2. library BANanoVuetifyAD3 unknown member OnMulti

This is in Demos folder, 08.Discord

Mashiane · Dec 18, 2020

micro said:
This is in Demos folder, 08.Discord

I am unfortunately not maintaining old code due to time constraints. Tutorial 38 has the latest working code for this BETA library. A lot has happened and the code has evolved a lot.

Tutorial 38 has everything we have discussed in these tutorials and its the latest code structure that should be used. If I make drastic changes, I make notifications here.

Hope we all understand.

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Active Member

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency