nubuilder – Cloudy DATA Blog

Installation of Nubuilder through CPANEL

Background – I wrote sometime ago about an open source low code project called nubuilder originally started by a Steven Copely – it has been steadily and consistently developed over the years and Steven has since shared development with some other talented individuals. I took another look at it recently to see whether I could find a way of installing and playing about with it on my existing web hosting provider…

and…

If you have a webhost that allows you access to a CPANEL client to configure your hosting environment then it is highly likely that you can set up a nubuilder low code environment. If you have a webhost that allows access to a CPANEL account AND allows you unlimited sub domains and unlimited storage then it is highly likely that you will be able to create a nubuilder low code environment for zero cost!!!

A quick search online found that the following offer CPANEL / unlimited subdomains / unlimited MYSQL

A2Hosting

WebhostingHub (which are a subsidiary of InMotion)

SiteGround

There is usually a limit on the size of an individual MYSQL database but it is so high as to not be an issue.

Configuration Instructions:

This post was adapted from Steven Copleys video which can be found here..

Installing on Bluehost

First below I have blanked out my cpanel username variable with either a grey circular box or in code I’ve replaced it with an X. This variable is implemented by CPANEL software to allow resellers to ensure that thousands of users on the same servers do not accidentally duplicate directory and filenames. The username can only be accessed with an additional password but it is not generally available to anyone but the host admin and as such is additional security. It will be used in many of the default settings when creating things like databases and directory names.

Firstly Log into your providers CPANEL

Look to the Domains section and within it there should be a Subdomains icon.

and select the Subdomains icon

Create a new subdomain

Here is the Subdomain field I have typed nbexample – the document root will automatically be completed

Hit the Create button

Next we create a database

go to MySQLDatabases within the Databases menu

Now we create a New User

Here I do the same

username will be X_nb4exampledbuser

password

BlueSkyIsEverywhereToday2020

Hit the create user and Go Back and add the user to the database

On hitting add you will be asked to select the privileges that the user has over the database just indicate that you would like to allow them all privileges

Then hit the make changes button and you can if you want then check the MySQL databases and check that the database exists and that the user is there.

Next we go to the Nbuilder Github site and download the master file but zipped

Nubuilder 4.5 on GitHub

And select the Dowload ZIP option from the Code drop down list.

This will download a master file to your dowload folder – In your browser window in the bottom left you will see the file like this

You now need to go back to the main CPANEL hub and look for section marked Files and look for the File Manager option. In my CPANEL it looks it is a red icon.

The subdomain will be created as a directory within your root home directory and in my example looks like this. You will be transferring the master zip file into this directory so you want to select it.

Next hit the Upload button and navigate to find

nubuilder-4.5-master.zip

And load it into your base directory. It should look something like this now

Next you want to extract it..

It will then ask where you wish to extract it to

I will normally not put anything in here as it creates its own directory.

There will be a short delay after which you will be presented with a dialog that shows the outcome of the extraction process.

You should now see a new directory in which in my case is called nuBuilder-4.5-master.

I don’t like hypens dots and capitals or special characters in directory names. So

I rename it to nubuilder45
Convert to all lower case
Delete the old zip file

Next we want to go into the nuBuilder45 file and open up the nuconfig.php file.

This is where we will link allow the nubuilder php to link to the created mysql database.

Right mouse click and select edit.

And find the following lines

Now remember from the start our database name / user and password are as follows.

Database : X_nb4exampledb
Username : X_nb4exampledbuser
Password : BlueSkyIsEverywhereToday2020

And hit the changes..

Next we want to create a very simple index.php file – alter the path to suit your subdomain / domain and directory where you extracted the nubuilder master file to.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
window.location.replace("https://nbexample.cloudydatablog.net/nubuilder45")
</script>
</body>
</html>
</body>
</html>

It may well look like this

This simple index.php file is placed in the root of the new subdomain you created

Now you should be able to go to the new subdomain in any browser on the planet and …

Congratulations you have successfully configured a default instance of nubuilder – your journey to creating low code online databases can now begin..

PS the default credentials are

Username : globeadmin

Password : nu

Please change these immediately in the nuconfig.php file when you get a chance.

For more information on starting to design and develop with nubuilder please follow the link below

link

Javascript – Nubuilder Specific to save Date to DateUpdated field on Record Change (not subform)

From the admin screen go to Develop / Forms / Form of choice / Custom Code / Javascript

To place focus on the search button

function nuLoadBrowse(){
    $('#nuSearchButton').focus();
}

Function to Get System Date

function GetTodayDate() {
    var tdate = new Date();
    var dd = tdate.getDate(); //yields day
    var MM = tdate.getMonth(); //yields month
    var twoDigitMonth = ((tdate.getMonth().length+1) === 1)? (tdate.getMonth()+1) : '' + (tdate.getMonth()+1);
    var yyyy = tdate.getFullYear(); //yields year
    var currdate = dd + "-" + twoDigitMonth + "-" + yyyy;

    return currdate;
}

Function to update field called “DateUpdated” on edit- to be used with the GetTodayDate() function

function nuOnSave() {
if (nuFORM.edited == true)
    {
        $( "#DateUpdated" ).val( GetTodayDate() );
    }
    return true; 

}

nuBuilderPro – Import csv into a table of your application MySQL database (Its very easy)

I don’t know about you but for me its pretty rare to start an application without any information. At the very least there may be lookup tables or you have information collected in a spreadsheet. Thus when I came to nuBuilderPro one of the first things I researched was how to get information into a table. nuBuilderPro uses a vanilla version of mySQL in the background so this is what we will be working with. We will be attempting to import a csv file. You will need a clean organised csv file.

First create the tables that you require information to go into. Ensure that you have exactly the same table structure as the csv file that you wish to import. Therefore either adjust the table or the csv appropriately. Failure to have the same structure will halt the import.

Next navigate to the administration panel using your particular variation of the below url. Note that it is important to have the / at the end of the url otherwise you will be taken to the more specific database administration page where you design forms. Don’t worry if this happens you can still get to the php administration page by hitting the databases button. In fact this is an alternative way of getting to the screens that I show here.

https://youracount.nubuilder.net/nuadmin/

Use your username and password to get into the nuadmin index panel

Once you have entered your username and password appropriately you should be at the following address

https://youraccount.nubuilder.net/nuadmin/index.php

Now select the small spanner sign in the top right – this takes you to the php admin section for your whole VPS there are other ways of going into this web page but we will go this way for now.
You should be taken to a section which looks as follows

All databases within your VPS should be listed on the left. Each new application will have a database created for it. Each database holds all the required tables that hold your database and are listed on the left hand side. Click on the database in question and then hit structure. You are interested not just in the database but also the particular table. There is a notification grey line at the top of the page which shows you what database and what table you are in.

Importing a csv is a straightforward process of hitting the import button at the top selecting the csv file and hitting the go button. If the csv file contains column names you may wish to alter the row at which import starts.

Once import has been completed it will indicate how many lines were imported and how long it took. If there are problems you will obtain a message indicating so. I tried to create a simple Russian / English dictionary and it was really very straightforward. It is important that the csv has the right number of columns as per your designed table.