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 · Apr 3, 2021

roberto64 said:
14 POST https: // localhost / bvad3 / localhost / bvad3 / bvad3.php 404 (Not Found) "

Perfect then, however there is something very wrong about this line. It cant be having 2 localhosts. How have you defined your ServerIP in the main module?

Mashiane · Apr 3, 2021

Secondly @roberto64, just to confirm, is port 443 enabled in Laragon like this?

roberto64 · Apr 3, 2021

yes the port is enabled

roberto64 · Apr 3, 2021

Mashiane · Apr 3, 2021

Mashiane said:
How have you defined your ServerIP in the main module?

If you don't mind me asking again, can you please check in the main module what is assigned to ServerIP? That is where the problem is.

roberto64 · Apr 3, 2021

Public ServerIP As String = "https:localhost"

roberto64 · Apr 4, 2021

Hi, with some configuration on lagon I made the database of your example part60 work, but I don't understand how you do to insert in the db "the name and the age" where do you get the data to be stored?
regards

Mashiane · Apr 4, 2021

Hi @roberto64 , sorry I was out for the weekend and only accessing my laptop now to be able to check this. Can you please share your experience of sorting the issue out so that anyone who has a similar problem can be able to resolve it.

Thanks

Mashiane · Apr 4, 2021

roberto64 said:
but I don't understand how you do to insert in the db "the name and the age" where do you get the data to be stored?

In relation to the data, there is a BANanoFakeIT class that I found and extended and included it in BVAD3. For example, we are creating fake data on the btnAdd_click event.

B4X:

'event to add the record
Sub btnAdd_click(e As BANanoEvent)
    Dim dbMySQL As BANanoMySQLE
    dbMySQL.Initialize("test", "users", "id", "id")
    'add field types
    dbMySQL.SchemaAddInt(Array("id", "age"))
    dbMySQL.SchemaAddText(Array("name"))
    'create a new record, do not specify auto increment
    Dim faker As BANanoFakeIT
    faker.Initialize
    'create a fake record
    Dim urec As Map = faker.GetRecord1(Array("name", "age"))
    'insert current record
    dbMySQL.Insert1(urec)
    dbMySQL.JSON = banano.CallInlinePHPWait(dbMySQL.MethodName, dbMySQL.Build)
    dbMySQL.FromJSON
    Select Case dbMySQL.OK
        Case False
            Dim strError As String = dbMySQL.Error
            vuetify.ShowSnackBarError("An error took place whilst running the command. " & strError)
        Case Else
            vuetify.ShowSnackBarSuccess("User has been added successfully!")
    End Select
End Sub

Mashiane · Apr 4, 2021

Please Note: The latest working example of BVAD3 is available on GitHub. This contains the latest updates on the source code and improvements and bug fixes. This is based on Tutorial 60.

BANanoVuetifyAD3 V7.36 - New Awesome Kitchen Sink

BVAD3 Design System

mashiane.github.io

Enjoy!

PS: Should you find a bug or something is not working as expected, please post it here and if you solved something, please share so that anyone who experiences the same issue is able to find a reference to solve it.

Thank you so much!

roberto64 · Apr 5, 2021

Hi, the configuration of "https://laragon.org/docs/install.html", go to Tools, Quick add, php, phpmyadmin, mysql5.7, git, note10,
then go to C: \ Windows \ System32 \ drivers \ etc, right mause properties and uncheck read only.
regards

roberto64 · Apr 5, 2021

Mashiane, I notice that starting your example "https://mashiane.github.io/BANanoVuetifyAD3/#/phpmysql" gives the same error it gave to me before configuring Largon. the error is "An error took place whilst running the command"

/BANanoVuetifyAD3/#/phpmysql:1 Access to XMLHttpRequest at 'https://localhost/bvad3/bvad3.php' from origin 'https://mashiane.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:7508 POST https://localhost/bvad3/bvad3.php net::ERR_FAILED
(anonymous) @ app.js:7508
callAjaxWait @ app.js:7508
btnadd_click @ app.js:7547
_cb @ app.js:7527
He @ app.js:6
n @ app.js:6
He @ app.js:6
e.$emit @ app.js:6
click @ app.js:12
He @ app.js:6
n @ app.js:6
Yr.o._wrapper @ app.js:6
/BANanoVuetifyAD3/#/phpmysql:1 Access to XMLHttpRequest at 'https://localhost/bvad3/bvad3.php' from origin 'https://mashiane.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:7508 POST https://localhost/bvad3/bvad3.php net::ERR_FAILED
(anonymous) @ app.js:7508
callAjaxWait @ app.js:7508
btnadd_click @ app.js:7547
_cb @ app.js:7527
He @ app.js:6
n @ app.js:6
He @ app.js:6
e.$emit @ app.js:6
click @ app.js:12
He @ app.js:6
n @ app.js:6
Yr.o._wrapper @ app.js:6
/BANanoVuetifyAD3/#/phpmysql:1 Access to XMLHttpRequest at 'https://localhost/bvad3/bvad3.php' from origin 'https://mashiane.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
app.js:7508 POST https://localhost/bvad3/bvad3.php net::ERR_FAILED

regards

Mashiane · Apr 5, 2021

No, you can't run php from github. Besides that there is no mysql database uploaded there. It won't work.

That example is for everything related to the components. I see now that I should have clarified that part.

Thanks for the heads up anyway.

roberto64 · Apr 5, 2021

Mashiane, I did a test on my host by adding a mysql db, and I noticed that on the pc with the google browser it works ok "save the data etc .. both with mysql and with sqlite, instead with the mobile it gives the erore of "An error took place whilst running the command" I wonder why everything is ok with a pc and no cell phone?
I think then that I leave the PHP file "mysqlconfig.php" so configured, the data are stored in your local mysql.
regards

Mashiane · Apr 5, 2021

Yes I have had this issue on numerous occassions, remember this code?

B4X:

BANano.PHPHost = $"${ServerIP}/${AppName}/"$

This needs to point to the exact location the php resides otherwise it wont work.

So for example, if I am hosting the app on my servers, i would use ServerIP = "https://tgifzone.com"

roberto64 · Apr 5, 2021

ok mysql works, but with sqlite it doesn't.

Mashiane · Apr 5, 2021

roberto64 said:
ok mysql works, but with sqlite it doesn't.

Can you please share the error as displayed on the console.log (Shift+Cntl+I)

roberto64 · Apr 5, 2021

Mashiane · Apr 5, 2021

The proplem is what you have written on the ServerIP string.

I see, it seems your server is not able to find the file, perhaps try and use
http://www
.gio... as ServerIP (include the "www"), you are using port 80 isnt it? If so, then we dont need to include a port number.

I see there are double // on the address bar, that's incorrect, you are surely making a mistake somewhere, dont include the last / on the ServerIP string.

Try also type the full path on the address bar for the php file and see whether it does something, use your full URL to see if it returns {} or something.

You are almost there.

roberto64 · Apr 5, 2021

nothing, however I thought that in my linux server / host the sqlite extension must be installed, as I did with laragon by installing the sqlite extension.
regards

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

Expert

Expert

Active Member

Active Member

Expert

Active Member

Active Member

Expert

Expert

Expert

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency