Dan Harper

Book Review - PHP 5 Social Networking

2011-02-06T00:00:00Z

The guys at Packt Publishing recently emailed me asking if I’d be interested in reviewing their latest book, PHP 5 Social Networking by Michael Peacock. Of course I jumped at the chance of receiving another free book!

The book guides you through the process of building a fully-featured social networking site for Dinosaur owners, complete with user profiles, a status stream, events and groups. While the book pushes itself as a ‘social networking’ book, everything you will learn is adaptable to any type of site – the social network is simply the demo application you will build.

The book starts you off by building an MVC framework on which the rest of the application will be built upon. MVC, for those unfamiliar, stands for Model-View-Controller and is a programming style whereby your code is split into three logic sections. The Controller processes a user’s request and calls the relevant models and files which will be needed. The Model handles database interaction, and the View is the template the data will be displayed in. The idea is to not have large chunks of PHP code mixed in with your HTML layout files (after all, you wouldn’t include CSS in your HTML, so why big chunks of PHP logic?)

The framework itself is completely application-agnostic and can be re-used on any other web application project you have.

Michael does a great job demonstrating the best way to do a task. You learn to build your own database class for handling database interaction instead of relying on PHP’s ageing mysql() class.

You also build your own templating system which allows you to simplify your views and stripping out all PHP code. From example instead of having <h1><?php echo $user->username; ?></h1> or something similar, you will use <h1>{username}</h1>. There’s a big argument over the use of a templating system in PHP applications and personally I prefer using PHP code instead of some pseudo-template-language, but it’s still a great piece of functionality to add into an app and it’s handled perfectly.

One surprising addition to the book is Chapter 11, “Developing an API” which guides you through the implementation of an API to allow third parties to access sections of your application just like the one Facebook, Twitter and most other social sites provide. This chapter proved very useful.

The final three chapters, “Deployment, Security and Maintenance”, “Marketing, SEO, User Retention and Monetization Strategies” and “Planning for Growth” all provide some great information for running a PHP site. The chapters are quite vague in their actual implementation (which is understandable as you could write an entire book on each topic) but prove to offer a wealth of useful information.

One thing I did find lacking was testing. There’s no mention of unit testing which I feel would be useful on an application of this size where it could be quite easy to accidentally break a feature while altering some core files.

Overall, I highly recommend this book for anyone with a small amount of programming experience. You’ll learn a variety of good practices which you’ll find useful in other web development projects. And hey, if some day people really do have pet dinosaurs, you’ll have a ready-made social network for them!

One Line Server Install

2011-01-22T00:00:00Z

I’ve recently published a script called One Line Server over at GitHub which, with one line, installs everything you need to run a LAMP and Rails web server with Ubuntu. This removes a bulk of the work required to set up a server manually, as I detailed recently in my Setting up an Ubuntu web server screencast for Nettuts+.

The script itself is a fork of Joshua Frye’s Rails Ready script which installs Ruby and Rails on Ubuntu.

One Line Server is available over at GitHub and just like the original ‘Rails Ready’ script, can be install with just one line in the terminal:

sudo apt-get -y install curl && curl https://github.com/danharper/onelineserver/raw/master/railsready.sh >> railsready.sh && chmod a+x railsready.sh && ./railsready.sh

One Line Server gives you the following:

Updates your system
Apache server 2.2.17
PHP 5.3.5
MySQL server 5.5
SQLite 3.7.4
Ruby 1.9.2 (either through RVM or natively)
Git
OpenSSH server
Imagemagick
Rubygems
Bundler gem
Rails 3 gem

You can contribute to One Line Server or the original Rails Ready by forking the repo at GitHub.

A (Very) Brief Look at CSS3 Transitions

2011-01-17T00:00:00Z

Sometimes I like to re-create effects I like from other sites. I find this is a great way to learn a new technology or skill. Today, I decided to have a go at creating the big “Welcome to Channel 4” navigation area on the Channel 4 homepage in CSS3.

There’s a nice flash animation on the navigation links. On hover the link gets larger, and the two links on either side also get slightly bigger.

I still hadn’t got round to experimenting with CSS3 animations, so this was new for me. I knew that basically I had to change the font size of a link when it’s hovered over (easy enough), and use CSS3 to somehow ease in to and out of the new size.

A bit of searching and I came up with this:

section li a:hover {
        transition-property: font-size;
        transition-duration: 0.3s;
        font-size: 30px;
}

The transition-property CSS3 property allows you to mark any other CSS property on an element to be animated through a “transition”.

In this case I’ve marked font-size as a transition property and set a transition duration of 0.3 seconds. This means that when the font size is changed to 30px, it will occur gradually over a period of 0.3 seconds.

Another example would be gradually changing the background colour on an element:

a:link, a:visited {
        transition-property: background-color, color, padding;
        transition-duration: 1s;
        background-color: red;
        color: blue;
        padding: 10px 15px;
        text-decoration: none;
}

a:hover {
        background-color: black;
        color: white;
        padding: 10px 30px;
}

Anyway, with the transition working, this simple effect is done. You can see the example below (in an iframe of all things :S)…

Iframes disabled, eh? Click here to view the demo.

One thing which doesn’t work, is the change in size of the two links next to the one currently being hovered. As far as I know, there isn’t a way to target the previous and next link in CSS (or maybe there is and I’m just low on sleep). So I decided to use jQuery to target those links, and apply/remove a class to them as needed:

$(function() {
        var prev;
        var next;
        $("section li a").hover(
                function () {
                        prev = $(this).parent().prev("li").children("a");
                        next = $(this).parent().next("li").children("a");
                        prev.addClass("hovered");
                        next.addClass("hovered");
                },
                function () {
                        prev.removeClass("hovered");
                        next.removeClass("hovered");
                }
        );
});

And the CSS:

section li a.hovered {
        font-size: 20px;
}

I’m not that great with jQuery so there may be a more elegant way to achieve this, but I tried. Here’s the example:

Iframes disabled, eh? Click here to view the demo.

The effect on the adjacent links is subtle but quite jumpy/slow so it’s not something I’d use in a different project unless I could make it smoother.

Moving files between servers

2011-01-08T00:00:00Z

While publishing my latest Nettuts+ post, a screencast tutorial on setting up a LAMP server with Ubuntu, I first needed to get the video, a 150mb archive, to the editor.

Now, I could have uploaded the file through FTP to my own server then sent him the link, but I’ve developed a bit of a distrust of FTP with it corrupting a few of my files, and with an upload speed of ~45kb/s I only wanted to do this once.

So I went with Rapidshare: a popular file hosting service. About an hour later, the file was uploaded and I sent the link off to Jeffrey to be published.

Now, you may be aware that the Tuts+ network allow their authors to publish the Premium tutorials they’ve created to the Tuts+ Marketplace for people who would rather use their marketplace allowance to buy the occasional premium tutorial than purchase a recurring Tuts+ Premium membership. So I also needed to get this 150mb archive up on the Marketplace ASAP to maximise the number of potential buyers.

So I could have uploaded the file through the marketplace’s web-based file uploader, but I knew there had to be a faster way. Well, the marketplace also allow you to upload your large files via FTP if you prefer, but as I mentioned I don’t really trust my connection with FTP.

But I do trust my web server’s connection. So how do I go about using my web server to upload a file hosted on Rapidshare to my FTP account at Envato? SSH!

Typically to download a Rapidshare file you must either:

Be a ‘free’ user, wait for a count-down and enter a Captcha before the download starts
Be a Premium member (which I am) and the download starts immediatly

So I need a way to log in to Rapidshare account on my web server so I can get an instant download. I could have figured out the details behind logging in and storing a cookie, but I remembered Rapidshare allow you to mark any of your files as “TrafficShare” which means that this anyone downloading the file will be treated as a Premium user and the traffic they use will be deducted from your own download limit.

With my file marked as “TrafficShare”, I connected to my server through SSH and entered:

$ wget http://rapidshare.com/path/to/my/file

This downloaded the file to the server almost instantly. Now I could FTP this file to my Envato account:

$ ftp ftp.marketplace.envato.com
Connected to ftp.marketplace.envato.com.
220
Name (ftp.marketplace.envato.com): danharper
331 Please specifiy the password.
Password: 
230 Login successful.
Remote system type is UNIX.
Using binary mode to transfer files.

ftp> put nettuts-ubuntu-server.tgz

A few seconds later, the file had been sent over! This whole process took about 5 minutes, as opposed to the hour it would have taken me to upload it over my own connection.

A New Year, A New Site

2011-01-01T00:00:00Z

It’s been a whole year since I last had what I could think of as a “proper site”, and not just a landing page with links to my profiles elsewhere on the web. It’s always such a challenge to create something for yourself and be 100% pleased with it. I must have gone through over 20 new designs which I get part-way through, decide I don’t like it any more and abandon it.

This time it’ll be different. I’m going into this new design knowing that I’ll probably be making slight changes to it every few weeks, constantly improving, constantly changing.

I’ve also never really blogged before as I’ve never been happy with the tools available. Previous versions of my site have been built on the WordPress blogging platform which I’ve also hacked a portfolio section in to, so it’s not that I don’t understand WordPress, but that writing a blog post in the WordPress dashboard is actually a horrible experiece.

There’s text boxes, checkboxes, sliders and buttons for a huge amount of settings cluttering up the ‘Write’ page from what’s most important: your content!

I was about ready to start work on my own little CMS/blogging script which would do content creation the right way when I discovered nanoc, a surprisingly flexible “static-site” generator which allows you to write your site using Ruby which will then be compiled into normal, static HTML pages which you can upload to your site. nanoc offered me:

Freedom from a database – accessing it for every page request is slow and stupid, and a caching system is creating static HTML pages anyway…
The ability to write my content into whatever format I please, using whatever text editor I choose. I’m formatting this post in Textile using MacVim and nanoc will filter this content through RedCloth to parse it into valid HTML.
Version control with Git over not just my site’s files, but over my blog posts, too!
No security holes! As no server-side code is being run, there’s not a chance of someone exploiting yet another hole in WordPress’ defenses.
SEO-friendly URLs without any complex .htaccess rules or behind-the-scenes trickery – just normal files and directories!

And just to show off the simpilicity: this is how I’ll be backing up this post, publishing it to the site and pushing it to GitHub:

nanoc compile
        git commit -a
        git push origin master
        rake deploy:rsync

But I’m going to write a simple Rake task to make the whole process as easy as:

rake publish

I’m going to publish another post in a few days time detailing the process I took in both designing & developing this site.

I’ve also decided to open-source this site and I’ve released it on my GitHub profile along with my previous landing page design.

Post image courtesty of tetraconz – Flickr.