In the second part of our series on programming, we will look at configuring our development server, write our first lines of code and commit the changes to a version control system.
- What you will learn in this series:
- How to to configure a development environment and write HTML, CSS, PHP and SQL code
- What you need to know:
- BSD and general PC administration skills
Introduction
Before we get started, you need to have a FreeBSD test server available with the AMP (Apache / MySQL / PHP ) installed. We will also use a version control system (VCS) and a CLI based text editor. I am using FreeBSD 9.0 with VI, MC (for file management) and GIT running under Virtualbox.
Start by installing FreeBSD from DVD and configure networking, user and root accounts, etc. as normal.
Key
Command line instructions
Alterations to configuration files
MySQL prompt / SQL
HTML / XHTML / PHP code
Part 1. Installing the Software
Step 1
As root, Install mc and git from packages:
dev# pkg_add -r mc git
Step 2. Upgrade the Ports Tree
dev# portsnap fetch && portsnap extract
Step 3. Install Apache
dev# cd /usr/ports/www/apache22
dev# make install clean
Configure rc.conf to start Apache on reboot:
dev# echo ‘apache22_enable=”YES”‘ >> /etc/rc.conf
Ensure hosts has your machine name set in /etc/hosts otherwise Apache will not start.
::1 localhost dev
127.0.0.1 localhost dev
Start Apache:
dev# /usr/local/etc/rc.d/apache22 start
Step 4. Install MySQL
dev# cd /usr/ports/databases/mysql55-server
dev# make install clean
Start MySQL:
dev# echo ‘mysql_enable=”YES”‘ >> /etc/rc.conf
dev# /usr/local/etc/rc.d/mysql-server start
Set the MySQL root password and check MySQL works:
dev# /usr/local/bin/mysqladmin -u root password ‘cms-password’
dev# rehash
dev# mysql -uroot -pcms-password
mysql>q
Step 5. Install PHP5 and Language Extensions
Enable and build apache module. See Figure 1.
dev# cd /usr/ports/lang/php5
dev# make config
Install PHP5 and the extensions:
dev# make install clean
Enable mysql and mysqli support. See Figure 2.
dev# cd /usr/ports/lang/php5-extensions/
dev# make config
dev# make install clean
Edit /usr/local/etc/apache22/httpd.conf to reflect the following:
DirectoryIndex index.html index.xhtml index.php
And add the following at the end for PHP support:
AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps
Copy the php.ini file across:
dev# cp /usr/local/etc/php.ini-development /usr/local/etc/php.ini
Restart apache to pick up the new PHP extensions:
dev# /usr/local/etc/rc.d/apache22 restart
Now we need to setup a development area in our home directory. We will create an account with username dev:
dev# adduser
Follow the prompts (the defaults are fine), and give the new user a password. We want to edit / develop as dev, so move the apache data directory across to /home/dev and symlink back. That way, Apache can serve the files we create as a non-root user as we can run GIT as a normal user:
dev# mv /usr/local/www/apache22/data/ /home/dev/
dev# chown dev:dev datapwd
dev# ln -s /home/dev/data/ /usr/local/www/apache22/data
dev# cd /home/dev/data
dev# chown dev:dev index.html
dev# /usr/local/etc/rc.d/apache22 restart
If you visit your dev box with a browser (http://youripadress) you should see the standard Apache “It works!” welcome page.
Part 2. GIT Revision Control and our Test Pages
As a developer, a version control system is an important tool not only to track code changes, but to allow quick recovery from mistakes. Once a file is added and committed to the repository, any errors can be quickly rectified by rolling back to a previous version.
Login with (or su to) the new DEV user account, change to the data directory, and create a new repository then commit index.html to it after setting your details. When prompted in the editor, the commit message should be “Initial Load”.
dev# su dev
dev# cd /home/dev/data/
dev# git config –global user.name “dev”
dev# git config –global user.email dev@dev
dev# git init
dev# git add *
dev# git commit
This will commit the original index.html to the new GIT repository. Edit index.html to reflect Code Listing 1 – “Hello World” is always the first statement written in experimental code. Check with your browser that the page has changed (you may need to press Shift F5 to refresh the cache). Now commit it to the repository:
dev# git commit -am “First line of HTML”
To view the change log:
dev# git log
Now delete index.html. To recover:
dev# git checkout index.html
To go back to the original Apache file (Where 0007073d is the first 8 digits of the file checksum) and overwrite your changes permanently:
dev# git checkout 0007073d
Now the log will only show the original file. Create two files index.xhtml and phpinfo.php with the code from code Listing 2 and 3 respectively and add and commit to the repository:
dev# git add *
dev# git commit -am “XHTML and PHP test page ”
dev# git log
You should see a log file similar to Figure 4.
Listing 1 is a standard XHTML page, with the XML and document type defined. In the next article, we will look at adding CSS and Javascript to this skeleton, but the important point to note here is that all the tags are “balanced” – every opening tag (e.g.
) has to have a matching closing tag. To view this page, visit http://youripaddress/index.xhtml in your browser. Listing 2 is a very simple PHP command – phpinfo(); displays all the configuration values, modules loaded etc. available to the PHP interpreter. You should see a page similar to Figure 3 if you visit http://youripaddress/phpinfo.php. The modified Apache index.xhtml
Hello World!
Code Listing 2. index.xhtml
Hello world
Code Listing 3. phpinfo.php In the Next Article
We will look at code structure, program flow and how to embed CSS and Javascript in out pages. We will also start using SQL to dynamically generate pages.
- Further reading
- GIT VCS: http://githowto.com
- PHP: http://php.net
- W3 Schools: http://www.w3schools.com
- W3C: http://www.w3.org
Bio
Rob Somerville has been passionate about technology since his early teens. A keen advocate of open systems since the mid eighties, he has worked in many corporate sectors including finance, automotive, airlines, government and media in a variety of roles from technical support, system administrator, developer, systems integrator and IT manager. He has moved on from CP/M and nixie tubes but keeps a soldering iron handy just in case.
