Creating a product catalog with djondb, PHP Restler and Backbone JS Part V – Adding new features

Intro

In our previous post, we created the user interface components of the application cialis frankreich. In this post, we’ll make some changes at database level and we’ll see how our application is impacted due to these changes.

In a relational database world

Now, let’s say that we want to include a new product type in the catalog. Now we want to sell phones too. What should we do in our application to support that?

In a traditional relational database, may be we should create a new table Phone to store its properties such as Manufacturer and Capacity.

But, we don’t want to repeat common properties as Name, Price and Picture, so we better create a Product table to store those properties and make a relation to Book and Phone Tables:


Now it looks better, but we’re not done yet. We’re changing the application in a very low level, so we need to change all the SQL queries that are based on the old Book table. And after that, change the UI to show or save the new Phone product.

Ok, that was the easy part. Now, let’s suppose that this application was already running in production, so this tables have real data. Here comes the nightmare, we need to create a SQL script that changes the database schema in production. And then, create another SQL script that migrates the data from the old to the new schema in production

And, every time we need or we want to make a change in the database schema, the nightmare repeats itself.

In a djondb world

Fortunately, this applications uses a djondb NoSQL database, so, what should we do to support the new Phone product? We just need to update the UI, yes, just as easy like that.

This is a JSON sample for the new product type:

  
	phone: {
		"_id": "50a1238a612bd",
		"prodtype": "phone",
		"name": "iPhone 5",
		"picture": "iphone5.jpg",
		"manufacturer": "Apple",
		"price": "399.99",
		"capacity": "32 GB"
	}
  

This is just a new entry in our same products namespace. So we don’t need to do anything more at database and services layer. As you can see, we can handle all dynamic properties we need inside our product document. We only need to update the UI for supporting the new product type.

Updating the UI

First, create two new templates: One for the product list, PhoneListItemView.html:

  
<a href="#products/<%= _id %>" class="thumbnail plain" style="text-align: center;">
    <img src="<%= picture === null ? 'pics/generic.jpg' : 'pics/' + picture %>" height="150" width="125" alt="">
    <div style="font-weight: bold;"><%= name %> <%= capacity %></div>
    <div><%= manufacturer %></div>
    <div><%= price %></div>
</a>
  

And another one for the product details view, PhoneView.html:

  
<div class="control-group">
    <label for="manufacturer" class="control-label">Manufacturer:</label>

    <div class="controls">
        <input type="text" id="manufacturer" name="manufacturer" value="<%= manufacturer %>"/>
        <span class="help-inline"></span>
    </div>
</div>
<div class="control-group">
    <label for="isbn" class="control-label">Capacity:</label>

    <div class="controls">
        <input type="text" id="capacity" name="capacity" value="<%= capacity %>"/>
    </div>
</div>
<div class="control-group">
    <label for="picture" class="control-label">Picture:</label>

    <div class="controls">
        <input type="text" id="picture" name="picture" value="<%= picture %>"/>
    </div>
</div>
  

Notice that we’ve split product details templates in two: one for common product information, and another one for specific Book and Phone information. So we’ll have ProductView.htm, BookView.html and PhoneView.html templates.

Now, change the Backbone views. Modify render function for ProductListView in productlist.js to add the new view:

  
    else if (products[i].attributes["prodtype"] === "phone")
      $('.thumbnails', this.el).append(new PhoneListItemView({model: products[i]}).render().el);
  

And create the PhoneListItemView that is exactly as ProductListItemView we have:

  
window.PhoneListItemView = Backbone.View.extend({

    tagName: "li",

    initialize: function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});
  

That was all for product list view, now let’s do the same changes for product details view. Change render function for ProductView in productdetails.js file:

  
        else if (p === "phone")
            $('#proddata', this.el).append(new PhoneView({model: this.model}).render().el);
  

And, add the new PhoneView:

  
window.PhoneView = Backbone.View.extend({

    initialize: function () {
        this.model.bind("change", this.render, this);
        this.model.bind("destroy", this.close, this);
    },

    render: function () {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }

});
  

Now, to support adding phones, we need to change the HeaderView.html template and add the new link to add phones:

  
<li class="add-menu"><a href="#products/add/phone"><i class="icon-edit icon-white"></i> Add Phone</a></li>  

Finally we need to modify main.js to register the views and to set books as the default product to add when no parameters are passed. That’s it. Now we can open our application in the browser and add the new iPhone 5 to the product catalog.

This is the add phone page:

And the phone is now in the product list:

Conclusion

As you see, supporting your application in djondb NoSQL database gives you great advantages as rapid development and almost zero maintenance when you need to add new features or make some improvements to your application. We hope you liked.

Download the code

You can download the application code from here.

Posted in djondb application, NoSQL Samples and tagged .
Loading Facebook Comments ...

Leave a Reply

Your email address will not be published. Required fields are marked *