Entries Tagged 'Web Development' ↓

Setting Up a Web Development Environment

Note:  This is unfinished, and I’m still working on typing this up.

Last updated:  2008-09-29

We’re going to setup a web environment on Ubuntu Linux version 8.04, and I’ll stick with using the command-line for most things.  To access command line in Ubuntu, select

Applications -> Accessories -> Terminal

Before you click on Terminal you can right-click on Terminal, and choose Add This to Launcher Panel.  Doing this makes the terminal (console) accessible from the top menu-bar.

1.  Bringing the System Up to Date

We’ll make sure that our system has the latest security patches applied to it, and we’ll need to get a list of what’s available.  Typing sudo before commands gives us administrative access to do things that normal users cannot do.  Type:

sudo apt-get update

The command line will ask you for your password.  Yes, I know that it’s annoying that your computer is asking you for your password again even though you’ve already signed in to your machine.  This prevents someone from running administrative tasks when you’ve momentarily stepped away from your desk.  You’ll also notice that if you wait long enough after typing a sudo command, the system will request your password when typing another sudo command.

Type in your password and press enter.

Instead of applying the latest security updates, we’ll upgrade all applications to the latest versions.  I’m sure that quite a bit has changed in the five months since Ubuntu 8.04 was released.  Versions of Ubuntu correspond to a year and a month, and 8.04 means that it was released on April of 2008.  Type:

sudo apt-get upgrade

You’ll see the following output:

114 upgraded, 0 newly installed, 0 to remove and 5 not upgraded.
Need to get 127MB/129MB of archives.
After this operation, 2449kB of additional disk space will be used.
Do you want to continue [Y/n]?

Type in Y and press enter.

Find something productive to do for the next 15 minutes as it pulls down the latest programs and installs them.

After everything is finished, you can reboot your system by typing:

sudo shutdown -r now

When running the upgrade step, it mentioned that 5 packages where held back.  To install these, type:

sudo apt-get dist-upgrade

To which you’ll see the following output:

The following NEW packages will be installed:
libdns35 openssl-blacklist
The following packages will be upgraded:
bind9-host dnsutils libbind9-30 libisccfg30 ssl-cert
5 upgraded, 2 newly installed, 0 to remove and 0 not upgraded.
Need to get 7059kB of archives.
After this operation, 13.8MB of additional disk space will be used.
Do you want to continue [Y/n]?

Type Y and press enter.

2.  Installing the Web Environment

Running the following commands with install Apache, MySQL, and PHP, a web server, a database, and programming language, respectively.  A majority of this is taken from this Ubuntu guide. The only difference is that I’m not installing phpMyAdmin, opting for using the command-line instead.  To install these type:

sudo apt-get install apache2 php5 mysql-server-5.0

The system will prompt you with:

NEW packages will be installed:
apache2 apache2-mpm-prefork apache2-utils apache2.2-common
libapache2-mod-php5 libapr1 libaprutil1 libdbd-mysql-perl libdbi-perl
libmysqlclient15off libnet-daemon-perl libplrpc-perl libpq5 mysql-client-5.0
mysql-common mysql-server-5.0 php5 php5-common
0 upgraded, 18 newly installed, 0 to remove and 119 not upgraded.
Need to get 42.6MB of archives.
After this operation, 124MB of additional disk space will be used.
Do you want to continue [Y/n]?

Type Y and press enter.

During the course of the installation, you’ll be prompted for an administrative (root) MySQL database password.

Think of a password, type it in a press enter.  The system will ask you to retype your database administrative password for confirmation.

3.  Configuring the Web Server

At this point everything we need is installed and running. So, let’s test the web server. Open a web browser and browse to http://localhost. This brings up the default web page residing on the web server.

It’s reassuring to know that the web server is running, but where is the web page that says “It works!” on your computer?

3.1 Finding Apache’s Configuration Files and Web Directory

First we’ll need to locate Apache’s configuration file, httpd.conf. On Unix systems configuration files are located in the /etc directory. To locate this file from the command line use the find command.

find /etc -name httpd*

This generates the following output:

find: /etc/ssl/private: Permission denied
find: /etc/cups/ssl: Permission denied
/etc/apache2/httpd.conf

Apache’s configuration file resides at /etc/apache2/httpd.conf. However, running the find command produced “Permission denied” errors, meaning that the find command could not access a directory. This can be quite annoying when you’re searching for more nebulous file names and dozens of “Permission denied” errors appear. Let’s remove the Permission denied errors from the output by redirecting any errors to the Trash Can, or using technical terms, /dev/null.

find /etc -name httpd* 2> /dev/null

Produces:

/etc/apache2/httpd.conf

That’s better.

Sadly, httpd.conf is an empty file. Ubuntu has a different layout. In Apache’s configuration files, there is a word DocumentRoot followed by the directory where Apache’s web pages live.

Using the find command, search the Apache configuration directory for files containing the word DocumentRoot.

find /etc/apache2 -exec grep -i documentroot {} \; -print

Produces:

DocumentRoot /var/www/
/etc/apache2/sites-enabled/000-default
DocumentRoot /var/www/
/etc/apache2/sites-available/default

There two configuration file, 000-default and default (technically these refer to the same file), both have the DocumentRoot set to /var/www. Let’s see what’s in that directory. To list files, use the ls command.

ls /var/www

Produces:

index.html

The cat command displays the contents of a file.

cat index.html

Produces:

<html><body><h1>It works!</h1></body></html>

This is the “It works!” page that we saw when browsing to http://localhost.

On Ubuntu Apache’s default configuration resides in /etc/apache2/sites-available/default and the default directory holding web pages is in /var/www.

3.1 Creating Web Directories

Since one of my future tutorials will use an application framework, I’m going to create two web servers, one with the application framework and one without one. The following instructions will create two web servers pointed at two different directories. I’m not concerned about loading PHP or a framework at this point.

These web servers will be for local development and are not intended to be accessible from the outside world. Webform.localhost will be the web server without the framework and zf-webform.localhost will be the web server with the framework.

Using the command line, create directories to house web files.

mkdir -p ~/www/webform
mkdir -p ~/www/zf-webform

The mkdir command creates a directory (folder). The -p option creates directories to put other directories in if the don’t exist yet. Here, we are placing the webform directory inside the www directory, and at this point www doesn’t exist yet, and the -p option allows use to create one. The tilda (~) prefixing the path indicates that this is relative to your home directory. In my case home my directory is /home/jbivins. This will be different that your home directory.

To find out your what your home directory is. Type:

cd ~
pwd

The cd command changes the working directory to your home directory, and the pwd command will show the full path of the current directory. You’ll need to know the location of your home directory as we’ll later tell the web server the location of our files.

3.2 Creating Web Server Names

Using a technique known as name-based virtual domains, we are going to create names for our web servers. The web server will see an incoming request for either webform.localhost or zf-webform.localhost and will determine which web directory to use based on the name requested.

Before we do this though, we need to instruct that webform.localhost and zf-webform.localhost refers to your web development machine. From the outside world, webform.localhost and zf-webform.localhost will lead you elsewhere. You can assign them separate ip-addresses to each name but with name-based virtual domains that is not necessary.

A list of names and ip-addresses known locally to the machine is kept in /etc/hosts.

sudo pico /etc/hosts

Pico (now called nano) is a user-friendly text editor, featuring a menu at the bottom of the screen. The caret (^) symbol means that you need to press the control key in addition to the letter follow it. Seeing ^O means to press Control and O (O not zero) at the same time to perform that command.

Control and O saves the file.
Control and X exits the editor.

In the pico editor, add the following lines:

127.0.0.1 webform.localhost webform
127.0.0.1 zf-webform.localhost zf-webform

Press Control and O. Press enter.
Press Control and X.

3.3 Enabling Name-Based Virtual Domains

Returning to the command line, we’ll instruct the Apache web server to use name-based virtual domains. This requires editing the main apache configuration file located at /etc/apache2/apache2.conf.

sudo pico /etc/apache2/apache2.conf

Once in the editor add the following line to the bottom of the configuration file:

NameVirtualHost *:80

In pico, move to the bottom of the file by pressing the Alt key and slash (/).

Save the file and exit the editor.

3.4 Web Site Configuration Files

Ubuntu Linux holds its configuration files in /etc/apache2/site-available. There’s a set of configuration files in /etc/apache2/sites-enabled designating which web sites are turned on.

Create a configuration file for the first web server.

cd /etc/apache2/sites-available
sudo pico webform.conf

Enter the text below into the editor. Change the text to the right of the DocumentRoot and Directory to match the web directory that you created for webform.localhost.


<VirtualHost *:80>
        ServerName webform.localhost
        ServerAlias webform
        ServerAdmin me@localhost
        DocumentRoot /home/jbivins/www/webform
        <Directory /home/jbivins/www/webform>
                Options -Indexes
                AllowOverride All
                Order Allow,Deny
                Allow From All
        </Directory>
</VirtualHost>

In this configuration file, this web server is given two names, through the ServerName line the primary name of the web server is webform.localhost. The ServerAlias line gives the web server a nickname, webform. After we are done, entering either webform.localhost or webform into the address bar of an Internet browser will display the pages in the DocumentRoot directory.

To find out the web directory that you created in step 3.1, open up a new terminal session and type:

cd ~/www/webform
pwd

The output will be the web directory for the above configuration file.

Next, we’ll enable the web server. In reality, Apache only looks at the configuration files located in /etc/apache2/sites-enabled. Instead of copying the configuration file to the sites-enabled directory, we’ll create a file that links to the actual configuration file. This avoids maintain two separate configuration files.

Use the ln command to link a file to another.

sudo ln -s /etc/apache2/sites-available/webform.conf /etc/apache2/sites-enabled/webform.conf

The -s option in the ln command creates a symbolic link to the file. Removing the link will not remove the file.

Todo:  Finish this part

4.  Configuring the Database

Todo:  Finish this part

Web Forms

One of the repetitive web development tasks is collecting form field input from a web page and doing something meaningful with that data.  People sign-on to check their e-mail and register for new services all of the time.  To do this, you have to key your information into a set of fields on a web page, and I’ll delve into the intricatcies of what happens behind-scenes when you do this.

As with any programming problem, there are a variety of ways to accomplish the task, each having its own set of advantages and disadvantages.  For now, I’ll use the term web form, although it isn’t a de-facto term used among programmers, to designate a web page where some types in data and sends clicks a button to send it off somewhere.  I’ll try to use terminology that the common person can understand.

Practical applications of using web forms include:

  • Registering people on a web site.
  • Logging a user onto a web site.
  • Allowing users to search for and view information.

There’s a plethora of web programming languages available:  PHP, Java, Ruby, .NET, etc.  Some languages are lax in what you can do where as others force you to do things a certain way.  Regardless of the language, there’s a common road map, or flow diagram, for processing a web form.

I’ll choose PHP as my choice of programming language because that’s what I actively use to build web pages.  In the next set of tutorials related to this topic, I’ll:

  1. Set up a web development environment in Ubuntu Linux.
  2. Show how to process web forms using PHP 5.
  3. Show how to process web forms using PHP 5 and AJAX.
  4. Show how to process web forms using PHP 5 and an application framework, the Zend Framework.

I’m aware that I used two buzz-words, AJAX and application framework.  I’ll explain them more in-depth in the subsequent tutorials.

L.A.M.P.

L.A.M.P. is an acronym for a web server setup consisting of an operating system, a web server, a database, and a programming language.  These four components, create a web application.  In the case of a L.A.M.P. configuration you have:

  • Linux as an operating system.
  • Apache as a web server.
  • MySQL as a database.
  • PHP as a programming language.

Variants that I’ve read about differ in operating systems.  W.A.M.P. uses Windows and M.A.M.P. uses the Macintosh OS X operating system.

Encountering difficulties building Apache on Leopard OS X, I install the L.A.M.P. setup on Ubuntu, a popular flavor of Linux distribution.  Typically, I like to create these environments in Virtual Machines (VMs) where my development is sand-boxed.  If I create a mess, I can always delete it and create a new environment.

However, installing Ubuntu in a VM presented one small problem.  At the first glance, the L.A.M.P. installation did not appear to be available.

From websites that I’ve read, the L.A.M.P. installation is available by task selection within Synaptic, a program that manages linux program installations.  Synaptic can be shown by choosing from the Desktop.

System -> Administration -> Synaptic Package Manager

From the package manager, go to Edit -> Mark Packages by Task…

However, a L.A.M.P. installation is no where to be found.

Since that doesn’t appear to work, it’s time to use a second line of attack, installing each component from the command line.  I start by installing the web server and type.


sudo apt-get install apache2

And I see…


Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Couldn't find package apache2

As it turns out, I never setup the my network configuration and couldn’t connect to the Internet.  The L.A.M.P. installation only appears after clicking on Reload within Synaptic.  Alternatively, you can also do this by clicking on the Check button on the Update Manager.  After the package listing is refreshed, the L.A.M.P. installation becomes available.