Developing a full web application using Node.js, Mongo and Angular.js: Introduction

Recently I was developing a web application for an event at my company. Its a quiz based game where an admin can control and present a quiz to all connected users.

It was my first time developing an end to end web application using various frameworks. Here is the details of software stack I was using for it.

  • Server side: Node.js for server, Express.js a web-application framework for node,  Socket.IO for realtime control over quiz, Passport.js for authentication.
  • database: MongoDB, mongojs module for accessing database from Node.js
  • Client: Angular.js
  • Deployment: Openshift Paas cloud server.

Beast thing about above stack is that everything is JavaScript 🙂 . No switching over languages for server, client and database.)

I had never worked with all of these together. And if you search on internet you’ll get only 2-3 of these together not all of them together. So I searched and found bits and pieces, collected and combined all of them to make a beatiful realtime web-application.

I’ll continue it in several parts. Client, Server, database, authentication and realtime communication – everthing in single tutorial series.


Building and running First Django Application on Ubuntu 13.04 – Part 1

Django is a popular web development framework based on Python. You can read more about here.

In this first part we will do basic setup required for Django on Ubuntu 13.04. Python comes already installed in all versions of Ubuntu. This tutorial will work for Python versions 2.6 or later and may not work for 3.0+ .

To Check python version type following in terminal

Python --version

We will need pip, a tool for installing and managing Python packages. Which can be installed using this command in terminal.

sudo apt-get install python-pip

Now we will install django framework

sudo pip install django

We will also need MySQL on our system for database requirments. So go ahead and follow this link to install MySQL and PHPmyAdmin(web client for MySQL database).

Generally you should do python based development in Virtualenv, you can read more about on this tutorial

We will use following tools to write and execute the python codes

1. IPython : Interactive python shell unlike boring IDLE(shell which comes with standad python)
run following commands in python

Sudo apt-get install ipython && ipython-qtconsole

you can type ipython directly in console or use ipython-qtconsole – the Qt frontend.

2. Sublime-Text : Very lightweight Text-editor cum IDE. We will use sublime text for coding most of the code.
Follo instruction on this tutorial to install sublime-text on ubuntu.

Now the setup is complete. Follow Part-2 to write your first django Application.

Some Helpful Links:

How to use jQuery UI datepicker in webpage

I was developing a simple java web application where I needed a datepicker. So here is how I used the jQuery UI datepicker in my application.

First you need to include jQuery UI javascript and css in head of your html page.

<script type="text/javascript"
	rel="stylesheet" type="text/css" />


Then add following html code in body section of your page where you want datepicker.

<input id="datepicker" />

after that add following javascript to your head section.

<script type="text/javascript">
	$(document).ready(function() {
			changeMonth : true,
			changeYear : true,
			dateFormat : "yy-mm-dd",
			altField : "#alternate",
			altFormat : "DD, d MM, yy",
			showButtonPanel : true,
			showOtherMonths : true,
			selectOtherMonths : true,
			showOn : "button",
			buttonImage : "calendar.gif",
			buttonImageOnly : true,
			showAnim : "slide"

Above javaScript code runs as soon as the full html page is ready. The various options are for different variation available with the datepicker ui. You can remove and add any option as per the requirements.

Suppose you don’t want the animation while calendar loads, then remove the last option ‘showAnim : “slide”.

You can find different variations at jQuery UI datepicker.

I’ll soon upload zip of html file with working the Datepicker.