Make Responsive Web Apps with Simbla’s New Online Database and Web Application Builder

Simbla, that awesome website builder built on Bootstrap that we've previously talked about here and here, recently came out with a new system to let you build database driven websites and applications with no code required.

This is really useful because it allows you do even more with Simbla via their online database toolset. Your entire business environment is now in one single place allowing you to:

  • Build more complex websites with their easy-to-use drag-and-drop toolset
  • Quickly build protypes of web applications
  • Build complete simple web applications
  • Build complete complex web applications with their powerful JavaScript API

This means you can add a whole bunch of complex features to your website with almost zero-effort. Things like User Registration, Login/Logout buttons, site search, and much more.

In this post, we'll cover the new features their online database provide.

How it Works

The way their new system works is an extension of their current website builder cloud based platform. It now allows you to manage your own online database. They achieved this by basing it on Facebook's Parse.

Check-out this graphic to see the workflow:

Simbla Database Builder

As you can see, you still use their awesome responsive UI builder to construct your website. They now have an additional feature of drag and drop widgets that will allow you to connect your responsive UI builder to an online database.

Database Setup

Before you can start using this the online database, you need to setup your database and connect it to your website. Simbla makes this process ridiculously easy. We'll demo this by following the guide in their docs where they create a basic "users" table, but you can do whatever you'd like for your application.

Step 1: Create the Database

Through the dashboard, navigate to "Database" in your control panel. From here, just click "Create a New Database".

Simbla Database Step 1

Step 2: Create Tables

Next, you just need to create your tables. Their documentation covers users, roles, and more. You can create as many as you would like.

One of the best things about their interface is it allows for a very friendly UI that is easy-to-understand for everyone. Look how easy the example "Users" table looks:

You can view, edit, and delete users with no confusion at all!

Step 3: Connecting the Database

The last step is to connect your website to the database. This is simple with Simbla because no code is required. Simply head over to your website and add the settings of the database to your website like so:

Step 4: CSV Import

A final step, you can optionally use their CSV Importer to bulk add rows to your database tables. All you need to do is have a CSV where the first row matches the column names in your database. Then, just click "import" on a table and watch the magic happen:

Drag and Drop Widgets

Now that you have a basic database setup, it's time to explore the real power of Simbla's application system with their drag and drop widgets.

Widgets are a custom drag-and-drop interface built by Simbla that lets you very quickly add complete custom functionality to your website. We'll do a quick overview of some of these. For a full list, make sure to check out the official documentation on Web Widgets!

Registration Widget

The registration widget adds registration to your website. It does this by providing the registration form and connecting it to your user table.

Make sure to check out this working demo to see it in action.

Login/Logout

This is really neat because it allows to have permissions on your pages. The widget adds the login form and permissions.

Simbla has even made a working demo of this! You can try it out here:

Form to Database

This widget is insanely powerful and probably my favorite! You can connect any custom form to a database. This is really useful for things like capturing additional information. Imagine it as your own little form builder.

Search

Imagine if you created a table for "Cars". In this table, you had over 50,000 different cars. Rather than having your users navigate for this, you could easily implement search functionality for them via this widget.

You just need to set paramaters and add the widget to get it working:

Database Gallery

Okay, so imagine if you wanted to show a page with pagination for those 50,000 cars instead of site search. Maybe just 6 at a time with pagination at the bottom. This is the widget for you. You can quickly showcase an entire database table in a responsive, interactive, UI/UX design.

Make sure to check out the demo for Database Gallery too.

This widget is great because it's likely the first steps for full ecommerce integration with Simbla (we hear is coming soon)!

Charts

The final widget I wanted to share is the Charts widget. It's super powerful and easy-to-use. Quite the amazing development accomplishment from Simbla.

This widget allows you to connect to any database table and display the data in interactive charts. Just check out this great demo to see it in action!

JavaScript API

Widgets are really cool for most people. You're on Scotch though, so you probably know your stuff!

The JavaScript API allows advance users to interact with their database in ways that basically allow you to create your own widget-type stuff. So really, you could build whatever you want.

They accomplish this by storing everything in a Simbla javascript object. Here's some example code samples to give you a general idea:

// Syntax to create a new subclass of Simbla.object.
var Cars = Simbla.Object.extend("Cars");

// Create a new instance of the class
var car = new Cars();    

// Query
var car = new Simbla.Object("Cars");
var query = new Simbla.Query(car);

// Add stuff to Cars
var Cars = Simbla.Object.extend("Cars");
var car = new Cars();
car.set("car_year", 2014);
car.set("car_model", "Test car");
car.set("car_code", 12468);
car.set("car_color", "red");
car.set("available", true);
car.set("stock", 5);
car.save(null, {
      success: function(car) {
            alert('New object created with objectId: ' + car.id);
       },
       error: function(car, error) {
             alert('Failed to create new object, with error code: ' + error.message);
       }
});

You can do any CRUD operation:

  • Create new record in table
  • Retrieving An Object
  • Updating Objects
  • Deleting Objects

Conclusion

As you can see, the great people at Simbla have been hard at work adding an online database to their responsive website builder.

Additional Resources

This content is sponsored via Syndicate Ads.