Ubuntu 12.04, LAMP and CodeIgniter 2

This guide aims to install and use CodeIgniter on an Ubuntu machine. We will assume you have the default Ubuntu installation.

1. Install Apache 2:

   sudo apt-get install apache2

2. Install MySQL:
   

   sudo apt-get install mysql-server mysql-client

3. Install PHP5 and the necessary libraries:
   

   sudo apt-get install php5-cli php5-mysql libapache2-mod-php5

4. Download the CodeIgniter framework:
   

   wget http://codeigniter.com/download.php -O ~/CodeIgniter.zip

5. Extract the framework to the default Apache2 web directory:
   

   sudo unzip ~/CodeIgniter.zip /var/www/

6. You should now be able to navigate to your extracted folder from your web-browser. Hint: you will need to open firefox to http://localhost/<name-of-folder> which you can get by executing the following command:
   

   ls /var/www

References

• 'Installing the LAMP stack for Apache2' from www.howtoforge.com
•  Another LAMP stack for Ubuntu tutorial from smashingweb.info
• Settin up LAMP and CodeIgniter from caravaggisto.wordpress.com

Setting up a CentOS 6.2 web server: Installation

CentOS is the free release version of Red Hat Linux with all the branding removed. It also does not have the support options and some of the fancy trimmings the Enterprise version offers, but it is still a solid server OS. This guide is a brief step-by-step guide in how to install CentOS 6.2 and configure it as a web-server.

Install from DVD:

1. Boot up from your DVD (you will need to enter into the Boot menu of your computer OR edit your BIOS to do so)


2. Select Install or upgrade an existing system from the menu


3. If you are worried about your DVD you can choose to to test it, but this is not a necessary step so you can skip it.


4. On the Welcome screen select 'Next'
   


5. Select your language (in our case we are going for the default of 'English (English)')


6. Select your keyboard type (in Australia we use 'U.S. English')


7. If you are just going for a standard local hard-drive set-up then just choose the 'Basic Storage Devices' option. If you are going for something fancy (such as network storage or special drives), or you just want to disable some devices for that extra level of paranoid security then choose 'Specialized Storage Devices'.
   
   If you have no idea which one you should choose then just select the Basic option.


8. Enter in the host-name of your new server (for best results you should append your domain name to the end so it works seamlessly with SSL certificates) i.e. testserver.example.com
   
   If you want to configure a static IP address click on the 'Configure Network' button, select the your network card (probably eth0) and enter away.
   
   If you are going to use DHCP, or just don't know, just hit 'Next'


9. Select the correct timezone for you (just click a location on the map and it should select the closest one to you).


10. Enter in an appropriate root password. Make as long and complex as possible (long sentences with mixed character types are easier to remember than jibberish strings; for instance 'My office is situated in 1234 fake street, Fakeville!')


11. In this example we are going to go for a custom partition layout, so select 'Create Custom Layout'. If you are fine with defaults, just skip to part .


12. Delete all existing partitions and do the following:
• A /boot partition of about 100MB. Use the ext4 format


• Create a LVM Physical Volume that fills up the rest of the hard-drive


• Create a LVM Volume Group with a Physical Extent of 4MB.


• Create LVM Logical Volumes on the Volume group as follows:


• Swap space that is at least equal to how much RAM is in your server
• /tmp/ should be as big as the largest file you will be manipulating (for instance, if you are copying a DVD you will need at least 4GB)
•  /var/log and /var/log/audit are separated so that if your log system goes haywire it does not kill the space for other applications. Dedicate a couple of gigabytes to each.
• /home/ and /usr/ should be a few gigabytes each. /usr/ just holds your applications and should remain pretty static, while /home/ is where you will store your personal files.
• /var/ and /var/www/ will contain the majority of space on your system. MySQL stores your database files in /var/lib/mysql/, while Apache runs from /var/www/. Dedicate adequate space to each folder.
• Your root folder (/) will only need a few GB of space. It will mainly hold configuration files.


13. The system will take some time to format your hard-drive. Once it is complete it will ask you to install the boot-loader. While the defaults are suitable, for extra security you should consider password protecting your boot-loader.


14. We can now select our packages. You can customize the system to suit your needs, but for the basics just select 'Basic Server' from the menu and the 'Customize now' from the radio buttons. Hit 'Next'.


15. Do the following edits:
• Base system - Remove 'Java Platform' and 'Directory Client'
• Web Server - Add 'Web Server' and 'PHP support'


16. Reboot your system!

References

• Howto Forge's guide: 'The Perfect Server - CentOS 6.2 x86_64 with Apache2'
• Howto Forge's guide: 'Installing Apache2 with PHP5 and MySQL support on CentOS 6.2'
• Red Hat Linux 5 Hardening Tips - National Security Agency
• Guide to the secure configuration of Red Hat Linux 5 - National Security Agency
• CentOS wiki on hardening the OS

Extended Jquery tutorial

This tutorial is an extension of the basic JQuery tutorial. We will not cover the same stuff here, so if you want a quick and easy primer on JQuery please click on that link. Instead, this offers some extra background information that help put the code examples into context.

You might also want to check out my other posts such as the JQuery Slideshow or AJAX with JQuery and PHP.

What is JQuery?

JQuery is a client-side JavaScript library that can do a wide variety of tasks. This includes browser effects, AJAX, and interact with the DOM. Despite the introduction of CSS3 (which will elegantly handle browser effects and limited DOM manipulation), JQuery still has alot to offer the web developer. It has also been around for longer which means, for the moment, it has better cross-browser support.

JQuery is not meant to be used as an application framework. It does not provide a blueprint around which a developer can build a website. Instead, it offers a wide set of tools to make development much, MUCH easier.

Getting started...

Getting started with jQuery is easy; download the library script from the website and include it in your web-application as you would any other JavaScript file. Alternatively, Google provides live hosting of the jQuery so you could link to that to save on your bandwidth.

<!-- Include the JQuery Library code... JQuery will not work without this -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

Selectors

JQuery works best by manipulating the DOM (the fancy, technical name given to the HTML page displayed by the browser), but to do this it needs a way of finding the elements to manipulate. To do this jQuery sports a CSS selector engine, meaning you just use standard CSS nomenclature to select an element.

For instance, if we had a div element with an id set to foo, in CSS we would write #foo {} to declare the style for that id. In JQuery, to search for and manipulate element foo you would write:

$('#foo').function()

Make sure the DOM is ready!

A common problem new developers have with jQuery is they start querying the DOM before it is ready. Browsers sometimes execute JavaScript before they have completely parsed the DOM, and this leads to errors where you manipulate the #foo class but it has not loaded on the page yet.

This problem is solved by calling the jQuery function that waits until the DOM has completely loaded:

$(document).ready(function {
      $('#foo').css('colour', 'red');
});

References:

• "The benefits of CSS3 vs JQuery" by Chris Skelton
• "Basics of JQuery" primer by Andree Hansson
• JQuery reference documentation
• "Tips to getting started with JQuery" by Jake Rocheleau
• w3schools jQuery tutorial

Basic JQuery Tutorial

I have been playing with JQuery and I am falling in love with it. It offers you a simple way to add powerful features to any website; I don't think there is anything out there that compares. If there is, please let me know so I can try it out!

Anyway, the purpose of this post is to offer a brief code example that uses JQuery to manipulate the DOM of your website. I also provided some references that I used, so if you want to do some exploring just click away!

What you need:

• The JQuery framework for JavaScript
• Some knowledge of HTML, CSS and Javascript
• A web-server such as Apache or nginx

Summary:

This post will show a couple of quick 'Hello World' examples, followed by a quick overview of some interesting functions available in JQuery.

Hello world: Example 1

The following code includes HTML comments to explain the code:

<html>
    <head>
       <title>jQuery Hello World</title>
        <!-- Include the JQuery Library code... JQuery will not work without this -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    </head>

    <!-- Our JQuery function. This will search for #flag and inject the Hello world text -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#flag").html("Hello World !! (display due to jQuery)");
        });
    </script>
 
    <body>
        <!-- Note that this is empty, but upon execution will contain text -->
        <div id="flag">
        </div> 
    </body>
</html>

Hello world: Example 2

This Hello World example differs slightly in that it now uses an alert box to display the text:

<html>
    <head> 
        <title>jQuery Hello World</title> 
        <!-- Include the JQuery Library code... JQuery will not work without this -->            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
    </head>
 
    <!-- Our JQuery function. This will output a text box on the click event -->
    <script type="text/javascript"> 
        $(document).ready(function(){
             $("#cl").click(function(){
                 alert("HELLO WORLD!"); 
            });
         });
     </script>
 
    <body> 
        <button id="cl">Click Me</button> 
    </body>
</html>



Editing and manipulating JQuery elements

This code will output the size of any div element that is of the "change" class:

alert($("div.change p").size());
// This will count any <p> element within <div class="change"></div>

This will slide a <p class="first"> element up or down to hide/show it when called:

$("div.change p.first:hidden").slideDown("slow");
$("div.change p.first:visible").slideUp("slow");

This will instantly change the CSS code of any <em> element within <div class="change"></div>:

$("div.change em").css({color:"#993300", fontWeight:"bold"});

References:

• JQuery Hello World script from Rose India
• Example code from w3schools
• Live examples from the JQuery website
• A guide to getting started with JQuery
• Some tips from the JQuery website
• for element selection
• The whole JQuery API reference