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

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