Saturday, January 10, 2015

Your first web application


I am quite interested to know the web principles, and develop web applications. I have done a lot researches regarding the web programming languages, their suitability even the support provided by web hosting companies. I will try to include my ideas and knowledge I gained recently; although this single article is not fair enough to cover everything.

TOOLS

Before I start, I will tell you the development platform I am bound to. Basically, I do not really like purchasing software or tools for development as a free-lancer. So, I am quite bound to open source software, libraries or tools. So, everything I explain here is tested for linux based Ubuntu Operating System, probably, it works for all linux based system, but no guaranty.

So, if we have the latest version of Ubuntu(14.04 LTS), we can start creating our first dynamic website.  Then we install the following application softwares:

1) Apache Server: The apache server which is container of our web pages i.e. it serves the request for the web-pages it contains.  Its very easy to install it from terminal.

sudo apt-get install apache2

After installation completes, we can test it by browsing localhost, it display the apache server information.

2) MySql: This is quite popular opensource database and almost all hosting companies provide mysql database. And it is really simple and lightweight, so easy for startutp.

sudo apt-get install mysql-server

There is a very nice client administrator tool for mysql called mysql-workbench. It make everything simple, otherwise you can just use mysql command lines via terminal.

3) PHP: This is very very popular language for dynamic website programming. I guess everybody who involves web development is familiar with php to some extent. It is quite easy, interesting and we see the output at the time of writing. Generally, we do not prefer writing codes using core php, so there are a bunch of frameworks which makes the development task easier with manageable and scalable source code. 

sudo apt-get install php5

Now it is good time to test whether php installed properly,or not. We create a sample php file and place it under /var/www/html which is root directory and browsing that file.

A note: If you are using php encryption module, then  you have to install it

sudo apt-get install php5-mcrypt

After installation we have to enable it.

sudo php5enmod mcrypt

Then restart apache server

sudo service apache2 restart


FRAMEWORKS

There are many php frameworks to simplify the development php work. I have started from Laravel, although it is advanced framework, I got a lot of problems because of composer and other files management. The number of files the framework contains is so huge, it is really difficult to handle and manage those files, even if one file is missed or corrupted(sometimes composer itself does that), it can not be compiled. Another problem is I could not run composer to the hosting server where I do not have root access to the server.

Then I tried CodeIgniter, its really simple and huge community and good documentation. So, as a beginner, I started development of application using Codeigniter. I got a lot of help and support from Codeigniter community.

Step 1:

You have to download the Codeigniter, extract it to /var/www directory. Since this is not root directory, so, user can not view from browser. Suppose the name of directory is CI_BASE. After we extract it, copy the index.php file from Codeigniter to root directory i.e. /var/www/html. Now, we modify the system and application path based on the current directory structure.

For example: replace  $system_path = 'system'; by $system_path=__DIR__.'/../CI_BASE/system';

Step 2

We have to define database and controller configurations. Database is quite simple and straightforward. (CI_BASE/application/config/database.php)

In the config file (CI_BASE/application/config/config.php), for simplicity, we modify the following values:

$config['base_url'] = '';
$config['index_page'] = '';

In $CI_BASE/application/config/autoload.php,  you define to auto load library and helper classes:

$autoload['helper'] = array('url','form');
$autoload['libraries'] = array('database','email');


SECURITY

Before deploying a web application, we have to define some sort of security mechanism, so that our deployed files are secure. That is maintained by .htaccess file placed in root directory where we define the files or folder that are accessible from the browser.

A sample .htaccess file looks something like this:

 <IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

   RewriteCond $1 !^(index\.php|css|user_guide|images|robots\.txt)
   RewriteRule ^(.*)$ /index.php/$1 [L]
</IfModule>

It is defining the rewrite condition and rewrite rule. 

If you need to redirect any http traffic to https traffic, we have to include .htaccess file needs some modification as follows:

 <IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On
        RewriteCond %{HTTP:X-Forwarded-Proto} !https 

RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
 RewriteCond $1 !^(index\.php|css|user_guide|images|robots\.txt)
 RewriteRule ^(.*)$ /index.php/$1 [L]
 </IfModule>


APACHE CONFIGURATION

Okay we are in the final step. We configure Apache (/etc/apache2/apache2.conf) and modify Directores, in our case it is /var/www. So, we replace that one by the following
<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>



Last but not least, we activate the apache mod_rewrite module:

sudo a2enmod rewrite


Please do not forget to restart Apache server.   There are already welcome controller and welcome views defined, so, when the root URL is access it displays the content of welcome view. 







FINAL NOTE: VIRTUAL HOST

It is not necessary to place all files in /www/html folder. You can define any other directories(working directory e.g.) to host the web contents.

We need two steps to implement that:

Step 1: /etc/apach2/apache2.conf : Add Directory element as follows

<Directory /home/krishna/openshift/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>


Step 2: /etc/apache2/sites-available :  Replace the DocumentRoot with your document root. For example:

  DocumentRoot /home/krishna/openshift/pm

Now, restart apache server, then this time when you browse localhost, it will search for the index page in the folder /home/krishna/openshift/pm.