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

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]

Part 52 - Creating a Task Management Dashboard

Download Section 1

As you might have noted, we have become more practical about this library by creating real world situation based projects, How about a Task Management Dashboard.

Here is section 1 of it.

A complete dashboard coming soon with source code!

Enjoy!

PS: For your web app development needs, sends me a PM and lets discuss your needs. My mobile is +27 81 736 6739

 

[Mashiane]

Part 52 - A Task Management Dashboard.



Download

 

[Mashiane]

Part 53 - Creating the CEO Dashboard

Download

This features (a) timeline (see meeting places) (b) a right drawer

 

[Mashiane]

Part 54: Vue-Google-Charts




Download

 

[Mashiane]

Part 55: Crypo Admin Dashboard




Download

 

[Mashiane]

Part 56: A Projects Dashboard



Download

 

[Mashiane]

Part 57: A Plant Shop Dashboard





Download

 

[Mashiane]

Part 58 is out, this integrates jsPDF.

One is able to export the data-table to PDF as easy as ABC.

Download

 

[Mashiane]

@swamisantosh I wish I could have listened to you about this before, its super easy and will fit perfectly on your project. This is exactly what I've been wanting to achieve, a well developed, good and sustainable framework. Thanks.

 

[Mashiane]

Version 3.75 has been released with some bug fixes, both internal to vuetify and bvad3.

GitHub - Mashiane/BANanoVuetifyAD3: Create websites & webapps using Vuetify & BANano

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

 

[Mashiane]

Tip: Base64 String of an image

You can get the base 64 string of an image file:

Dim dataUrl As String = Banano.Await(Banano.GetFileAsDataURL(slogosrc, Null))

 

[Mashiane]

Version 3.80 now available.

Mashiane/BANanoVuetifyAD3: Create websites & webapps using Vuetify & BANano (github.com)

What we did with it!

 

[Mashiane]

Version 3.83 now available

 

[roberto64]

Hi Mashiane, I found in your examples there are many that there are no more statements like "vuetify.AddTabs (.....), example 50 ....., vuetify.DialogInitialize, vuetify.Initialize (Me)", I think it is better review your examples.
regards

 

[Mashiane]

Hi @roberto64 ,

Update:

Remember, some examples are just dealing with a particular issue and others not. Whilst these codes might not be in some examples, it does not mean that it does not work. I don't think there is a need to review a working example unless something in it is actually not working completely. Which I will gladly fix, except for very very old code that might no longer be maintained.

And yes, vuetify.AddTabs and Vuetify.DialogInitialize etc are "longer" sub signatures, compared to newer versions, so its like AddTabs and AddTabs1 but AddTabs1 is a child method that eliminates the need to specify the parent id of where you want to add the tab to.

I will add a comparison table so that I am able to provide clarity about the "enhancements", but nothing is broken. Ta!

 

[roberto64]

Hi Mashine, I did not want to tell you that the code of the examples did not work "I got it wrong", indeed congratulations of the Vuetify library, and that only the examples of the tutorial having updated the library some instructions and divera, being not very expert of Vuetify remains a bit ploblematic and I think even those who look out to this library will remain a bit complex.
anyway I tell you you did a great job. Regards

 

[Mashiane]

remains a bit ploblematic and I think even those who look out to this library will remain a bit complex.

Thank you @roberto64 for your words. I would encourage anyone who finds an area challenging to please post a question on the forum or via pm and I will be glad to help.

The library itself has evolved but the ultimate goal is to use as much as possible the abstract designer functionality and less and less code. For example, I want to create layout blocks that are "reusable" with little effort as much as possible. The advantage with blocks is that you get pre-defined layouts that you can use. The only thing is that one will have to change the block to suit their needs when it comes to that.

So if there is anything, you are stuck with, please post a question and we will reach a solution.

 

[roberto64]

Hi, I'm trying your example Part60, in the databases menu selecting both Mysql PHP and Sqlite PHP gives me this message "An error took place whilst running the command" and in the google console "bananocore.js: 14 POST https: // localhost / bvad3 / localhost / bvad3 / bvad3.php 404 (Not Found) "
I state that I am using Laragon.
Greetings

 

[Mashiane]

@roberto64

Using Laragon as Dev Server

Q. Is your Laragon running in https mode? If not, you need to follow these instructions on the link https mode.
Q. Is sqlite3 extension for php enabled? If not, see the same thread on how to do that
Q. Is mysqli extension for php enabled? if not, see the same thread on how to do that.
Q. Are your mysql connection details set up in the file myconfig.php in the files folder of your b4j project? If not please ensure that this is done.
Q. On the b4j project, there is a test.db SQLite database, have you created similar with MySQL? You can back this up and restore it to MySQL.

 

[roberto64]

Hello, all your questions you asked have been verified, I have already set everything up beforehand