Home > Uncategorized > Backendless form using Parse and Bootstrap

Backendless form using Parse and Bootstrap

If you want to collect information from users, but don’t need to act on the information right away, for example, a Survey, or unsubscribe form, then you’d think you’d need to start creating a database table, connecting up server side code, etc, etc.,

This is obviously one way to go about it, but sometimes, you’d like a quicker solution, that just uses javascript code, on the client side, and wouldn’t it be nice if I didn’t have to upload Bootstrap, jquery, etc., to the server, and load everything from CDNs?, so something that would typically require a database, business layer code, hundreds of images, css, and javascript libraries can just be deployed with one file?

Which is where Parse comes in. You can use it to store and retrieve arbitrary javascript objects in a persistent manner, so that you don’t have to create a database or middleware.

So, I have a simple unsubscribe form, where I want to capture and store users’ email addresses, and then I’ll export them back out of Parse whenever it comes time to remove bad emails from my list.

Here’s the code in javascript;

$(init);
function init()
{
Parse.initialize(“xxx”, “xxxx”);
$(“#btnReport”).bind(“click”,btnReport_click);
}
function btnReport_click()
{
var Unsubscription = Parse.Object.extend(“Unsubscription”);
var unsubscription = new Unsubscription();
unsubscription.save({email: $(“#ReportedBy”).val()}).then(function(object) {
bootbox.alert(“Thanks, we’ve recorded your request.”);
});
}

I’ve replaced my Parse keys with xxx – you’ll need to get your own. It creates a new Unsubscription object, then saves it with the property “email”, and lets the user know when it’s done.- This is then persistently stored on Parse’s servers.

And, the rest of the form, all loaded from CDN’s

<html >
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”&gt;
http://code.jquery.com/jquery-1.11.3.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
http://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.js
http://www.parsecdn.com/js/parse-1.6.2.min.js

$(init);
function init()
{
Parse.initialize(“xxx”, “xxx”);
$(“#btnReport”).bind(“click”,btnReport_click);
}
function btnReport_click()
{
var Unsubscription = Parse.Object.extend(“Unsubscription”);
var unsubscription = new Unsubscription();
unsubscription.save({email: $(“#ReportedBy”).val()}).then(function(object) {
bootbox.alert(“Thanks, we’ve recorded your request.”);
});
}

</head>
<body>
<form class=”form-horizontal”>
<fieldset>
<legend>Unsubscibe</legend>

Your email

If you do not want to receive any more email from us, just enter it here.

</div>

</div>
</fieldset>
</form>
</body>

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: