B4J Tutorial [BANano] [VuetifyAD3] Small solutions to development hitches (Tricks and tracks)

At the request of several friends, I opened this Thread which explains some problems encountered when developing with Banano and VuetiiFy.

Obviously I will propose the solutions that I have experimented, perhaps they will not be the best, but they are those obtainable with the documentation available at the moment.

INDEX

1. MAKE A VTextField visible or invisible
2. CHANGE NUMBER OF COLUMNS AND NAMES IN A TABLE BY CODE
3. SIDE MENU
4. CARD, ITERATIVE CYCLES AND .... ELECTRONIC SHOWCASE ( Part-1 , Part-2 , Part-3 , Part-4 , SOURCE CODE )
5. IN-LINE PHP
6. LOCAL storage of data or variables
7. Change properties of vLabel and VTextField from code
8. VUETABLE- How to insert MinusPlus columns and editable fields
9. Button inside a VTABLE and event raised
10. MESSAGE box, INPUTDIALOG and ToastMessage
11. REGEX SPLIT
12. From http to https (insecure to secure)
13. How can I cast form String to number?
14. Upload file to DB
15. Viewer image from DB
16. Upload a file and save it in a folder
17. List of file
18. USE the php code from an external application
19. Using MQTT from Banano VAD3 with a ListView

PLEASE DO NOT WRITE IN THIS THREAD. If you have any questions or comments, open a dedicated threads, but don't post your posts here.
If you want to propose some other solution, open your specific tutorial

 

[Star-Dust]

Upload a file and save it in a folder

You can use BANanoShared.UploadFileWait like this:

Private Sub VFileInput1_Change (fileObj As Map)
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    VFileInput1.UpdateLoading(page, True)
 
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    Dim fnm As String = fileDet.FileName
    fileDet=BANanoShared.UploadFileWait(fileObj)
    Dim sstatus As String = fileDet.Status
 
    Select Case sstatus
        Case "error"
            vuetify.ShowSwalNotificationError($"file ${fnm} error"$,10000)
        Case "success"
            vuetify.ShowSwal("Success" )
    End Select
    VFileInput1.UpdateLoading(page, False)
End Sub

With this code, however, it transfers the file to the assets folder. But it could be a problem if the file you upload has the same name as one already present, even worse if it is a logo or a file needed for your pages.

This is why I suggest to modify the upload.php file (or create a second one with a different name) which loads the page in a different folder (for example the upload folder)

<?php
header("Access-Control-Allow-Origin: *");
set_time_limit(0);
// create folder if don't exist
if (!file_exists('../upload/')) {
    mkdir('../upload/', 0777, true);
}
if (isset($_FILES['upload'])) {
    // Example:
    // if(move_uploaded_file($_FILES['upload']['tmp_name'], "../assets/" . $_FILES['upload']['name'])){
    if(move_uploaded_file($_FILES['upload']['tmp_name'], "../upload/" . $_FILES['upload']['name'])){
        echo '{ "status": "success" }';
    } else {
        echo '{ "status": "error" }';
    }
    exit;
} else {
    echo '{ "status": "error" }';
}
?>

In case you decide to use a second php for upload,
If you call the file upload2.php, you can invoke the code with UploadFileWait sub

Sub UploadFileWait(fileO As Map) As FileObject
    'get the file details
    Dim fileDet As FileObject = BANanoShared.GetFileDetails(fileO)
    'get the file name
    Dim fn As String = fileDet.FileName
    'start uploading the file
    Dim fd As BANanoObject
    fd.Initialize2("FormData", Null)
    fd.RunMethod("append", Array("upload", fileO))
    '
    Dim Res As String = BANano.CallAjaxWait("./assets/upload2.php", "POST", "", fd, True, Null) ' php filename - upload2.php
    Dim result As Map = BANano.FromJson(Res)
    Dim sstatus As String = result.Get("status")
    fileDet.Status = sstatus
    If sstatus = "success" Then
        fileDet.FileOK = True
    Else
        fileDet.FileOK = False
    End If
    fileDet.FullPath = $"./upload/${fn}"$ ' folder selected
    Return fileDet
End Sub

And the event raised by VFileInput1 must be like this

Private Sub VFileInput1_Change (fileObj As Map)
    If banano.IsNull(fileObj) Or banano.IsUndefined(fileObj) Then Return
    VFileInput1.UpdateLoading(page, True)
 
    Dim fileDet As FileObject
    fileDet = BANanoShared.GetFileDetails(fileObj)
    Dim fnm As String = fileDet.FileName
    fileDet=UploadFileWait(fileObj)
    Dim sstatus As String = fileDet.Status
 
    Select Case sstatus
        Case "error"
            vuetify.ShowSwalNotificationError($"file ${fnm} error"$,10000)
        Case "success"
            vuetify.ShowSwal("Success" )
    End Select
    VFileInput1.UpdateLoading(page, False)
End Sub

_________________________________________________________________________________________________________________________________________
PLEASE DO NOT WRITE IN THIS THREAD. If you have any questions or comments, open a dedicated threads, but don't post your posts here.
If you want to propose some other solution, open your specific tutorial

 

[Star-Dust]

List of file
Today I have the need to have the list of files inside an upload folder.
As I load the images from the pc, I would like to get the content. How to do?

Here is a small example:

B4J code (For split function see here)

Private Sub refresh
    VList1.Clear(page)
    VList1.AddHeader("File founded")
    Dim res As String = banano.CallInlinePHPWait("listdir", CreateMap("path":"upload"))
    For Each nomefile As String In Split("&",res)
        VList1.AddItem("",nomefile,"mdi-file","blue",nomefile.Replace("upload/",""),"")
    Next
    VList1.Refresh(page)
End Sub

'This is a variant of the attached source
Private Sub VList1_Click (item As Map)
    'vuetify.ShowSwal(banano.ToJson(item))
    'vuetify.NavigatetoURL(Main.ServerIP & item.Get("id"))
    VImg1.SetImage(page,Main.ServerIP & item.Get("id"))
End Sub

PHP Code

  function listdir($path) {
    $ret = "";
      //$fileList = glob( __DIR__. $path. "/*.*");
    $fileList = glob($path. "/*.*");
    foreach($fileList as $filename){
        if(is_file($filename)){
            $ret.= $filename. "&";
        }
    }
    echo $ret;
  }

NB. To upload the image see the previous post

_________________________________________________________________________________________________________________________________________
PLEASE DO NOT WRITE IN THIS THREAD. If you have any questions or comments, open a dedicated threads, but don't post your posts here.
If you want to propose some other solution, open your specific tutorial

 

[Star-Dust]

USE the php code from an external application
In the pages of BANANO it is possible to insert PHP functions as explained in lesson 5 (see here)
If you also develop a STAND-Alone Mobile (android or iOs) or Desktop version of the same WebApp you may want to use the same PHP functions without having to recreate them all over again. How to do?

Suppose we have added this function

#IF PHP
 function funcmd5($codevalue) {
    echo md5($codevalue);
   }
#END IF

From BANANO we would call the function like this

Dim res As String = banano.CallInlinePHPWait("funcmd5", CreateMap("value": "mytext"))

From the App (Android / iOS / Desktop) we will send a POST request to the url nameApp.php with these JSON parameters

{"request":"funcmd5","params":{"codevalue":"mytext"}}

in B4X it would be

Dim j As HttpJob
j.Initialize("", Me)
j.PostString("https://www.yourdomain.org/bananonameapp.php",$"{"request":"funcmd5","params":{"codevalue":"mytext"}}"$)
Wait For (j) JobDone(j As HttpJob)
If j.Success Then
    Log(j.GetString)
End If
j.Release

______________________________________________________________________________________________________________________________________

What if you would like to use the BANANO functions to access the DB?
Here is an example of parameters that must be sent in the POST

{"request":"BANanoMySQLDynamic","params":{"command":"select","query":"SELECT * FROM `my_table` WHERE `KeyName` = ? ORDER BY `Nome`","args":["Star-Dust"],"types":["s"],"host":"localhost","username":"userDB","password":"passwordDB","dbname":"my_databasename"}}

NB. Replace yourdomain with the name of the webApp address included in the sub-folder if it exists.
The PHP file always has the name you gave the WebApp. If you have any doubts, look in the folder where the files were generated and find the php file in the main folder where you also find the index.

PS. If you send POST requests from an App, don't forget to set USER-Agent, because you may have access authorization problems on some servers

_________________________________________________________________________________________________________________________________________
PLEASE DO NOT WRITE IN THIS THREAD. If you have any questions or comments, open a dedicated threads, but don't post your posts here.
If you want to propose some other solution, open your specific tutorial

 

[Star-Dust]

Using MQTT from Banano VueAD3 with a ListView

I noticed that there are no examples of how to use Banano/VueAD3 to broadcast messages on an MQTT server.
It is very simple, the same as it is normally done on B4J. Please find attached a sample code


NB. You need to use mqtt with websocket connection.
Works fine with chrome and edge, in my case with opera the connection was not successful. I have not tested on other browsers

_________________________________________________________________________________________________________________________________________
PLEASE DO NOT WRITE IN THIS THREAD. If you have any questions or comments, open a dedicated threads, but don't post your posts here.
If you want to propose some other solution, open your specific tutorial

 

[alwaysbusy]

Thanks for publishing the example. Usage is indeed just like normal B4J.

doesn't connect using opera

Maybe there is some conflict within BDAV3? In pure BANano MQTT does work in Opera. We have several WebApps in production which use MQTT. We do have our own MQTT servers, setup with secure websockets, which may be something Opera does require? What errors do you see in the console in Opera?

Probably better to open a new thread for this issue.