Install PHP and MySQL with APC on Ubuntu

I have been dabbling with VPS’s for a while now and have always wanted recipes I can work with and come back to when I do my setup. I don’t want to search for what packages I need to install and have missed.

Here’s a basic setup I do. This will of course be reserved as a reference for anyone needing to setup PHP on a blank server (Ubuntu 12.04).

Apache

Chances are, you would need a web server. My choice has always been Apache.

sudo apt-get install apache2

Here, we are going to install the needed modules for Apache to work with PHP.

sudo apt-get install libapache2-mod-php5

MySQL

First of all, you would need to install MySQL.

sudo apt-get install mysql-server mysqltuner

mysqltuner is a performance script to tune performance for MySQL.

Secure your MySQL
sudo mysql_secure_installation

It will present you with a few questions, starting with your MySQL password. You will then secure parts of your MySQL installation.

PHP

If you’re like me, you would want to get the latest PHP versions available for your system version. You may need to skip this if you want to install the default distributed PHP version for your system.

Add repository for latest PHP version
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:ondrej/php5
sudo apt-get update
sudo apt-get upgrade
Install PHP
sudo apt-get install php5-common php5-mysql php5-xmlrpc php5-cgi php5-curl php5-gd php5-cli php5-fpm php-apc php-pear php5-dev php5-imap php5-mcrypt
Secure PHP Installation(optional, but recommended)
sudo apt-get install php-suhosin

Check your PHP version

php -v

You may get something like this depending on your PHP version:

PHP 5.3

PHP 5.3.6-13ubuntu3.10 with Suhosin-Patch (cli) (built: Mar 11 2013 14:30:28) 
Copyright (c) 1997-2011 The PHP Group
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies

PHP 5.4

PHP 5.4.17RC1 (cli) (built: Jun 22 2013 19:27:26) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.4.0, Copyright (c) 1998-2013 Zend Technologies

PHP 5.5

PHP 5.5.1-1~precise+1 (cli) (built: Jul 22 2013 07:42:13) 
Copyright (c) 1997-2013 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2013 Zend Technologies
    with Zend OPcache v7.0.2-dev, Copyright (c) 1999-2013, by Zend Technologies

Next Stop

A tutorial on how to host multiple sites will be arranged in a couple of weeks. Stay tuned!

 Speed Up Your Websites

Maverick: I feel the need…
Maverick, Goose: …the need for speed!

I remember the movie as my boss imitated Maverick from Top Gun. He wanted to our company product to load fast, very fast.

Speed is a big issue today.

Here are some fascinating facts and statistics by KissMetrics1.

  • 47% of consumers expect a webpage to load in 2 seconds or less
  • 40% of people abandon a website that takes more than 3 seconds to load
  • A 1 second delay in page response can result in a 7% reduction in conversions
  • If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year
  • 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again

Slow page loads costs money. Literally. And faster websites improve user experience. Time to speed up our sites!

Determine your sites performance

So, how fast does your website load again? There are few tools available online to evaluate the speed of your site.:

  • Page Speed – Google’s tool for examining your site’s load speed
  • YSlow! – a free tool that suggests enhancements you can do for your site

Now, let’s speed up our sites!

There have been a curnicopia (I always wanted to use that word in a blog post) of tips on how to speed up your sites. Here are well-tested tips to speed up your websites.

Put Scripts at the bottom

Unless you are new to web development, you would have probably encountered this rule on a lot of websites. Viewing some websites’ sources make you want to wonder why <script> tags are just above the <body>’s end tag.

The reason is simple really. When we put <script> tags at the bottom, they block rendering while they are being loaded executed/run.

<html>
    <body>
        <p>My page already loads faster!</p>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    </body>
</html>

Minify Javascripts

Javascript files, while meant to be coded by individual beings, it is just some command to the browser. No matter how legible your code is, it won’t matter to the browser. Spaces in your javascript files are still bytes. Which means they are one of the few things your browser doesn’t need but will be downloaded. Shave off the extra bytes.

Try working with a minified and un-minified version of javascript files when you work and use the minified versions of the scripts for your websites.

Un-minified version
$(function(){
    $('#button').click(function{
        alert("I have been clicked!");
    })
});
Minified version
$(function(){$('#button').click(function{alert("I have been clicked!");})});

Minify HTML

Removing whitespace is commonly used when minifying HTML.

Default values are the keys here. HTML tag attributes just like many other things have their default values. This means that there are a ton of things we don’t need to write but write anyway just because we can.

Here are a few examples of tag attributes we don’t need to write:

<form method="get">
// Better alternative
<form>
<a href="http://yourwonderfulwebsite.com/home.html">
// Better alternative
<a href="/home.html">

Final Words

Remember, slow loading pages, costs money and faster loading pages improve customer experience.

Further Reading

There are tons of information on the web about performance. Here’s a list of very good articles with regards to performance and web speed.

1 KissMetrics

 HTML5 Datalist

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Autocomplete is probably one of the most used UI implementations of the last decade.

Why shouldn’t it be? It makes it easier for websites to present possible values you would want. It makes for a sleeker form instead of having an ugly select tag.

HTML5 Datalist

As always HTML5 has come up with the neatest tricks possible. As a replacement to our old autocomplete implementations, HTML5 presents the Datalist.

How to Use

First, we will need to have some data that we want to present to our users.

<datalist id="countries">
    <option value="United States">
    <option value="Afghanistan">
    <option value="Andorra">
    <option value="Antigua and Barbuda">
    <option value="Argentina">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <option value="Bahamas">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Barbados">
    <option value="Belarus">
    <option value="Belgium">
    <option value="Belize">
    <option value="Benin">
    <option value="Bhutan">
    <option value="Bolivia">
    <option value="Bosnia and Herzegovina">
    <option value="Botswana">
    <option value="Brazil">
    <option value="Brunei">
    <option value="Bulgaria">
    <option value="Burkina Faso">
    <option value="Burundi">
    <option value="Cambodia">
    <option value="Cameroon">
    <option value="Canada">
    <option value="Cape Verde">
    <option value="Central African Republic">
    <option value="Chad">
    <option value="Chile">
    <option value="China">
    <option value="Colombia">
    <option value="Comoros">
    <option value="Congo (Brazzaville)">
    <option value="Congo">
    <option value="Costa Rica">
    <option value="Cote d'Ivoire">
    <option value="Croatia">
    <option value="Cuba">
    <option value="Cyprus">
    <option value="Czech Republic">
    <option value="Denmark">
    <option value="Djibouti">
    <option value="Burundi">
    <option value="Dominica">
    <option value="Dominican Republic">
    <option value="East Timor (Timor Timur)">
    <option value="Ecuador">
    <option value="Egypt">
</datalist>

Then we need to add our input box

<input name="countries" list="countries" />

Try it!

Try the HTML5 Datalist sample here!

 Best Practices When Creating HTML Emails

Most web developers have, even once, written an HTML email.

Coding a HTML website is one thing. Coding an HTML is another. There are a few things you have to consider when designing and coding one.

Keep it Light on the Images

While most people who prefer websites with dazzling images, most people don’t like it in their emails. For a few reasons.

  • They load slowly
  • It (sometimes) makes things hard to read
  • Makes it hard to make sense of it all

Besides, most email clients block the images at first load. Why not take advantage of CSS colors instead?

In any case, use images, but use them sparingly.

Use Tables

I can’t image using tables when coding in HTML, except when its for data based content. I am a big fan of pushing CSS to the limits but with HTML emails, you shouldn’t. Tables will be your friend here. No floats will be available to you.

<table><tr><td>I know you hate me and I know it.</td></tr><table>

Use External Images

Images should be hotlinked from an external server. That’s the way it should be.

<img src="http://www.gravatar.com/avatar/2461e49b79f7b1f72273bad5d06f2b3d?s=75" />

Use Inline CSS

Remember having read, never to use CSSs inline? Forget that when writing HTML emails. Most clients will block or won’t interpret external CSSs.

<p style='background-color: #333333; color: #FFFFFF'>This is some white text on black background</p>

Test on various email clients

Test. Test. Test. A nice HTML email will be able to be rendered correctly on a bunch of mostly used HTML email clients. The most popular are:

  • Microsoft Outlook
  • Yahoo! Mail
  • Hotmail
  • Gmail
  • Apple Mail

Now, don’t forget these when you think of writing or designing your own HTML emails!