How to turn your Ubuntu into a Web Development system

I have been an Ubuntu user since version 6.04 and I still remember, the first time I installed on my desktop, I literally screwed the system (it was a great learning experience, though). Since then I am an avid Ubuntu user.

Almost a year ago, I purchased a new laptop (my 2nd personal laptop) and It was so important for me (as a web developer) to have a dedicated system for development. I am sharing my experience on how I used my laptop (which was shipped with Windows 8) into a web development system. In this step by step guide I will show you how to configure a  Local server (Apache with PHP) and a version control system (Git) with an IDE.

Local Server

Let’s  start with the basics, first thing that you would require is to have web server. You can choose XAMPP  for linux. However, I would recommend you to install all the required software on your own.

Apache

I use apache (you can use another http server as well). Open terminal and just use the following commands.

sudo apt-get install apache2

Now if you will open your browser (I recommend the mighty Firefox which is shipped with Ubuntu by default) and go to http://localhost or http://127.0.0.1 it should show “It Works!!”

MySQL

You need a database system. I use MySQL

sudo apt-get install mysql-server libapache2-mod-auth-mysql php5-mysql

PHP

I mostly work with PHP, so here are the steps to Install PHP

sudo apt-get install php5 libapache2-mod-php5 php5-mcrypt

Also, I recommend you should install PhpMyAdmin , which is a very good Database management system for MySQL

sudo apt-get install phpmyadmin
sudo service apache2 restart

You can access PHPMyAdmin at the following URL

http://localhost/phpmyadmin

Now you can use the folder /var/www for all your Web Development. I usually create a folder and then change the permission to be used

chmod -R 777 "Folder Name"

Now you are up and running with a full fledged web server. You can create your own websites and probably go public with this server (if you consider some security concerns)

Version Control

You should work with a version control system such as Git or SVN. I use git with github and bibucket to host my code. Here is how you can setup git on your system
sudo apt-get install git-core

 

Now , lets work on the code writing part.

IDE

By default Ubuntu ships with Gedit, which is a quite useful text-editor and if some plugins are added it can become a pretty good tool to write your code. To add the plugins you can just use the following command at the terminal.

sudo apt-get install gedit-plugins

You can also use Geany, which is a pretty good IDE. I use the * wildcard to install everything related to Geany (including plugins)

sudo apt-get install geany*

However, recently we have some other good options as per IDE are concerned for linux distros. Such as Brackets, Atom and Aptana.

My personal favourite is Brackets. To install Brackets , you need to download  the .deb package from their website (link) to a folder and install it using the following command

dpkg -i brackets-release-version

Where you should choose the release you have downloaded.

Now you are ready to run your own web development machine on Ubuntu. Do share your experiences and comments so that I can improve this article and learn wherever I am missing.

 

Creating a ToDo webapp using PHP , MySQL and AJAX

I was trying to create a ToDo app just to improve my understanding the way Ajax is used with PHP and MySQL. Finally I have written this app, which is hosted at github. This blog post will serve as a tutorial for the same.

 

The database

CREATE TABLE IF NOT EXISTS `tasks` (
`task_id` int(11) NOT NULL AUTO_INCREMENT,
`task` varchar(100) NOT NULL,
`target_date` date NOT NULL,
PRIMARY KEY (`task_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

Now we will create 5 files for the application.

  1. connect_db.php  – To connect with the database.
  2. create.php – The file used to create create the task. This will be called on submit of the form.
  3. create_task.php  – The file to show the form that will be used to create the task.
  4. delete.php – The file will be called when the delete action will be invoked.
  5. index.php  – The main container of the app which will show all the data.
  6. read.php  – The action to fetch all the data from the database.
  7. script.js – The JS file which will have all the actions using ajax.
  8. update.php – The action to update the data using edit action.
  9. update_form.php – The form to update the data.

 

Index.php

 

In our index file , we are using the following ID which is used to display the data. All the page content will be dynamically loaded in the following div.

<div id="pageContent">

</div>

 

Also we have created two buttons which will be used to generate the list of tasks or add a new task

<button type="button" id="viewTasks">Check Tasks</button>

<button type="button" id="addTask">Add Task</button>

connect_db.php

We can use the following code to connect with the database. This file will be included everytime we want to interact with the database.


$host='localhost'; 
$dbname='database'; 
$user='username'; 
$pass='password'; 

 
try {
  # MySQL with PDO_MYSQL
  $DBH = new PDO("mysql:host=$host;dbname=$dbname", $user, $pass);
 
 }
catch(PDOException $e) {
    echo $e->getMessage();
}

In script.js we will add the following code. This code will fetch the data dynamically from the database using the output from the read.php file. Similarly we will call all other files dynamically for the respective actions.

// READ Tasks
function showTasks(){
    // read and show the records after at least a second
    // we use setTimeout just to show the image loading effect when you have a very fast server
    // otherwise, you can just do: $('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });
    // THIS also hides the loader image
    setTimeout("$('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });", 1000);
}

Fork it at – https://github.com/mohitkr05/ToDo

When to use GET and when to use POST

According to the HTTP specification, you should use the POST method when you’re using the form to change the state of something on the server end. For example, if a page has a form to allow users to add their own comments, like this page here, the form should use POST. If you click “Reload” or “Refresh” on a page that you reached through a POST, it’s almost always an error — you shouldn’t be posting the same comment twice — which is why these pages aren’t bookmarked or cached.

You should use the GET method when your form is, well, getting something off the server and not actually changing anything.  For example, the form for a search engine should use GET, since searching a Web site should not be changing anything that the client might care about, and bookmarking or caching the results of a search-engine query is just as useful as bookmarking or caching a static HTML page.

Also, don’t ever use GET method in a form that capture passwords and other things that are meant to be hidden.

 

Source – http://www.php.net/manual/en/tutorial.forms.php