Online database and Web application builder

Create and manage responsive website applications in an online database environment 

5.1 Javascript example

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.


Final results 

This is the final result we wish to accomplish:

Step 1 - create a table

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


Screenshot_6.jpg

Step 2- connect your website to the right database

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:

Step 3 - create an element to contain database data

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

HTML code:


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

</div>



Step 4 - get data from the database

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

Javascript code:

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 += "<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" );

    }

 });


Now let's see the result

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

About Simbla

Trying to create a website for their own business, Simbla's founders recognized, over the years, a lack of excellent, simple tools available on the market. Therefore, in 2013 Simbla was founded, for the purpose of providing a smart and easy website building solution for all types of businesses. Simbla's founders have more than 15 years of experience with web-based platforms and website building. We are helping SMB's to create a web presence and to evolve easily into a highly competitive market.

In our vision Simbla creates a new environment where websites are meant for everybody!

Social

all rights reserved to simbla inc

2016