Before we get deep into it, we will start with a basic example to show you the functionality of the system and basic terminology. We will continue our previous example and use the same tables.

We are going to use JavaScript in our website/UI builder to call back to our database that is connected to our site, and ask it to show all cars that are available in stock with a model above 2014.

This is the final result we wish to accomplish:

Below you will find our table called “cars” that is placed in our database that is named “example”.

Here are our column names if you wish to follow the example:

car_model

car_code

car_color

car_year

car_img

available

stock

After setting up our table, we will enter the website builder. From the top left bar we will enter website settings and connect our database named "example" to our website as below:

We will drop down an HTML element and add our code that will present our work:

"snd" Style="padding:30px;border:1px">

To add our Javascript code we will open our Javascript tool. Go to - Page menu > Javascript.

var car = Simbla.Object.extend("Cars");

var query = new Simbla.Query(car);

query.equalTo("available", true);

query.greaterThan("car_year", 2014);

   query.find({

         success: function(car) {

              var str="";

               for (var i=0;i<car.length;i++){

               str += "<h1>"+ car[i].get("car_model") + "</h1>";

               str += "<p>"+ car[i].get("car_year") + "</p>";

               str += "<p>"+ car[i].get("car_color") + "</p>";

               str += "<img style='width:200px' src='"+ car[i].get("car_img").url() + "'/>";

       

    }

    $("#snd").html(str);

  },

       error: function(car, error) {

           alert("Error - The object was not retrieved successfully" );

    }

 });

Click on the Publish button, then on the Preview, and then view live link.