This article explains how to create a simple registration and login page using backbone.js. We know that backbone.js is a JavaScript framework for using JavaScript in the Model View and Collection model. We can also create a single page application using backbone.js. Here we will also create a single page application for registration and login.
A Model in backbone consists of the connected data for the web application. It also contains the connection among the data. It contains the interactive data.
The view is the user interface but in backbone it is not only the view but also a controller for connecting the model to the data interaction.
Collections are the set of models, we create the collection by extending the Backbone.Collection. While creating the collection we want to pass the property that specifies the specific model that the collection will hold..
Use the following procedure to create the sample code for registration and login.
<!DOCTYPE html>
<html>
<head>
<title>Backbone</title>
<script src="js/zepto.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/backbone-min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="divClient">
UserName <input type="text" id="txtIdClient" placeholder="Username"><br /><br />
Password : <input type="password" id="txtNomClient" placeholder="Paasword"><br /><br/>
<button id="cmdAddClient">REGISTER</button>
<button id="login">Login</button>
<br>
<ul id="listeClient"></ul>
</div>
</body>
<script>
var reg_name, reg_pass;
var Client = Backbone.Model.extend({
defaults: {
name: null,
pwd: null
},
initialize: function () {
console.log("initialize client");
}
});
var ClientsCollection = Backbone.Collection.extend({
model: Client,
initialize: function () {
console.log("initialize clients collection");
this.bind("add", function (model) { console.log("Add", model.get('id'), model); });
this.bind("remove", function (el) { console.log("Remove", el.get('id'), el); });
}
});
var ClientView = Backbone.View.extend({
el: $("#divClient"), /* Utilisation de zepto pour lier ClientView au DOM */
initialize: function () {
var that = this;
this.listeClients = new ClientsCollection();
this.listClients = new ClientsCollection();
this.listeClients.bind("add", function (model) {
that.addClientToList(model);
});
this.listClients.bind("add", function (model) {
that.addLoginToList(model);
});
},
events: {
'click #cmdAddClient': 'cmdAddClient_Click',
'click #login': 'login'
},
cmdAddClient_Click: function () {
var tmpClient = new Client({
name: $("#txtIdClient").val(),
pwd: $("#txtNomClient").val(),
});
this.listeClients.add(tmpClient);
},
login: function () {
var tmplogin = new Client({
name: $("#txtIdClient").val(),
pwd: $("#txtNomClient").val(),
});
this.listClients.add(tmplogin);
},
addClientToList: function (model) {
reg_name = model.get('name');
reg_pass = model.get('pwd');
$("#listeClient").html("<font size=5 color=green>You are Successfully Registered, Now you can Login</font>");
},
addLoginToList: function (model) { ;
if (model.get('name') == reg_name && model.get('pwd') == reg_pass) {
$("#divClient").html("<font size=4 color=blue>Login sucessfull</font>");
}
else {
$("#listeClient").html("<font size=5 color=green>Failed Logged in, Retry</font>");
}
}
});
var clientView = new ClientView();
Backbone.history.start();
</script>
</html>
Enter the UserName and Password and click on the Registered button, then it displays a message.
Now we can log in with the registered UserName and Password.
If we log in without any registered UserName and Password then it displays a login failed message.