How-to: Laravel 4 tutorial; part 1 – installation

[easyreview title=”Complexity rating” icon=”geek” cat1title=”Level of experience required, to follow this how-to.” cat1detail=”A good level of familiarity with web hosting will come in handy here, especially if your hosting environment is different from mine. It will also help if you’re comfortable at the command line.” cat1rating=”4″ overall=”false”]

Laravel Tutorials

Introduction

If, like me, you spend much time coding for the web – for pleasure or profit – sooner or later you’re going to find that you benefit from using a development framework. A framework is a collection of scripts that help you create an application much more quickly. Frameworks typically include a lot of the “nuts and bolts” components – scripts that assist with database connections for example, plus components that impose some structure on your programming.

For a long time, my framework of choice was CodeIgniter. CodeIgniter has stagnated of late and concerns have arisen over licensing. Partly as a consequence, many PHP developers like me have searched for an alternative. In the search, I came across a framework that many programmers are turning to: Laravel. My early experiences with Laravel have been extremely positive and I have found many things I prefer about it. In this series of tutorials, I’ll show you how to get up and running with Laravel and begin creating an application. The application will involve some web-scraping, so you may wish to stay tuned for that reason alone.

Before we dive in though, one word of caution: Laravel is a young open source project. Like many such projects, its documentation is less complete than you might wish, particularly when compared to CodeIgniter. In fact CodeIgniter’s great documentation was one of the reasons why I initially chose it as a development framework. Documentation is a core commitment of the Laravel team, but at the time of writing, with the recent release of Laravel 4, I’m finding the documentation is not quite up to scratch. Possibly you’ve found that too, which is why you’ve made it here to this tutorial. In fact one of the worst parts of the documentation at the time of writing is the installation procedure! With that caveat in place, let’s move on – it’s still well worthwhile.

Prerequisites

All my web coding is done within a Linux environment, usually CentOS or Ubuntu Server. For the easiest experience following these tutorials, you may wish to create a similar environment. (I’ve written about that elsewhere.) Alternatively, you should be able to follow the tutorials with some tweaking – but you’re on your own there. At the very least, I recommend you have in place:

  • Apache web server
  • Shell access to the server (preferably SSH)
  • Root access to install Composer globally (not essential)
  • Git must be installed in your environment.

Installing Composer

With the latest release (4) Laravel has taken a leap forward in several areas. One such area is the management of third party libraries and packages. Laravel previously made use of an external project called “Composer“, to install dependent packages. With Laravel 4, you now use Composer to install Laravel itself. To install Composer, from a root login shell, do the following:

cd /usr/local/bin
curl -sS https://getcomposer.org/installer | php
mv composer.phar composer

Provided /usr/local/bin is in your $PATH environment variable, you will now be able to call Composer with “composer [options] command [arguments]“.

Installing Laravel



The beauty of Composer is the simplicity it brings to library/application installation. There is an overwhelming range of tutorials on how to install Laravel with Composer. Please bear in mind that many of these were written while Laravel 4 was in beta or even alpha. Now it has been released, the installation is quite straightforward. Having prepared a new environment for a web site (a virtual host or whatever), navigate to the directory above the default web root directory. Then install using Composer. Eg:

cd /home/geek/domains/test.geekanddummy.com/
composer create-project laravel/laravel

You should see a fair bit of output indicating that Composer is creating a directory “laravel” and pulling in all the dependencies for a basic installation. The laravel directory contains a folder entitled “public“, intended to be your web root. Your easiest way to complete the configuration is to point your web site at that directory. For example, using Virtualmin, you would go to Server Configuration –> Website Options and change “Website documents sub-directory” from “public_html” to “laravel/public”.

Having done that, when I browse to my test web site, I see:

Laravel landing page

Installing other frameworks

Now would be a good time put to put Twitter’s Bootstrap and jQuery in place, if you’re planning to use them. Naturally, we’ll use Composer for this. You might use other frameworks in your web applications – check out Packagist to see if anyone has made a Composer package available.

Composer demands a tutorial all of its own, but I’ll keep it simple here. I’m going to make my new Laravel application depend on the latest compatible branches of Bootstrap and jQuery. This will potentially allow us to upgrade these two frameworks with a simple Composer command at a later date.

In the root of your Laravel application you’ll find the main Composer configuration file, composer.json. You don’t need to get your hands dirty editing the file, just from a shell in that root directory, issue the following commands:

composer require "components/jquery":"*"
composer require "twitter/bootstrap":"*"

This updates the composer.json file to include these dependencies and goes ahead and downloads them. It can take a while – be patient.

You’ll end up with jQuery files under ./components/jquery and Bootstrap files under ./vendor/twitter/bootstrap. These are locations not visible to your web server (the root is at ./public, you’ll recall). This is a particular problem in the case of Bootstrap. For now, here’s a quick-and-dirty way of accessing these files. I’m on the lookout for a more elegant solution, but this will get you up and running rapidly. Navigate to the “public” folder in a login shell and issue the following commands:

mkdir -p assets/css
mkdir assets/img
mkdir assets/js
ln -s ../../../vendor/twitter/bootstrap/img/glyphicons-halflings.png ./assets/img
ln -s ../../../vendor/twitter/bootstrap/docs/assets/css/bootstrap.css ./assets/css
ln -s ../../../vendor/twitter/bootstrap/docs/assets/css/bootstrap-responsive.css ./assets/css
ln -s ../../../components/jquery/jquery.min.js ./assets/js

And so on, for whichever bits you’ll use. This will only work if your web server allows following symbolic links. The .htaccess directive “Options +SymLinksIfOwnerMatch” may help here, but that’s outside the scope of this tutorial.

Configure your development environment

I use NetBeans for development. If you don’t already have a preferred IDE (integrated development environment), I recommend you check it out. Another favourite is Eclipse. You could use an ordinary text editor, but then you’d be missing out on a lot of things that can make your coding more comfortable and efficient.

Having installed Laravel and the other frameworks on my web server, next I use NetBeans to pull the code across to my development environment. In the NetBeans “New Project” wizard, select the option “PHP Application from Remote Server”. In the remote configuration, ensure that you choose as your “upload directory”, the laravel. From there, you’ll want to download the app and public directories.

Conclusion

That’s it for today’s tutorial. Next time, we’ll look at orientating ourself within the framework (“what goes where?”).

Easily host your own web sites | part 5: Web design (geek/hacker)

Contents


Rambling introduction. Sorry.

beardy guysIn the last post in this series, I looked at some options for creating a website with relative ease. Perhaps the word “easily” should not be present in the title of this, the last episode.

If you’re a budding geek/hacker, sooner or later running WordPress blogs is going to get old. You could spend a lifetime learning how to bend WordPress to your will (which would be like dancing on shifting sand – it’s constantly changing underneath you and you’ll die from exhaustion) or you could set your mind to doing the thing from scratch. Or near enough from scratch.

I first got into programming (at the age of 11 or so) when the “hacker” community demographic genuinely consisted of bearded recluses. Social skills were an inconvenience. If you couldn’t say it with ones and zeroes, it wasn’t worth saying. Later on, when I took Computer Science at university (along with Law), little had changed. Less than three percent of the people in my year for CompSci were women. Less than three percent had discovered personal hygiene products. It wasn’t the same three percent, by the way.

I say this by way of apology. My path to web development was long and winding. I had experience with many different programming languages before my eyes were opened to the wonders of web-centric coding. This gave me quite an advantage. Diving into this material can be intimidating, if you’ve little or no experience of code. Let me just reassure you: all you need to do is assimilate a little bit of knowledge at a time. Eventually it will all start to hang together. With the tools I’ll show you, you’ll be hammering out awesome code before you can say Xyzzy.

Disclaimer: proceeding down this path may not turn you into a geek. Or cause you to grow a beard. Please try to contain your disappointment, if so.

The building blocks

Many (but by no means all) web sites are built using a combination of:

  • HTML: the language which describes the components of a web page. It has much more to do with layout/structure than with how things actually look. HTML is probably the easiest bit to learn. In your browser, you can right-click on most web pages and select “view source”. What you’ll be looking at is largely HTML code. Start learning HTML at W3Schools. Whenever I need a quick reference for HTML, I go here.
  • CSS: Cascading Style Sheets describe how a web page should look. Colour, positioning, borders, etc. Reference here. Tutorials here. Learn how to do fancy things with CSS at CSS Play and goggle at others’ CSS prowess in the CSS Zen Garden.
  • JavaScript: There seems to be an increasing trend to use “CamelCase” when writing “JavaScript”, these days. When I started learning, it was simply “javascript” – not to be confused with Java. JavaScript is a true programming language, which runs in your browser. It is loaded along with the HTML and CSS and actions are performed on the basis of the JavaScript code instructions. Reference here. Tutorials here.
  • PHP: A hugely popular server-side (so-called because it runs at the web server end, not in the browser) programming language. PHP is by no means the only – nor necessarily the best – web programming language out there. Ruby, Python, Java and ASP.NET all have a strong presence in modern web sites. PHP is the one with which I and many other far superior web developers are familiar. It’s idiosyncratic and inconsistent at times, but I have found it to be easy to learn and for the most part well documented. The official PHP site is an excellent reference tool. If you learn PHP, you’ll be using this site’s function search box regularly. The W3Schools tutorials don’t cut the grade for me here. Start learning PHP at the home of PHP.
  • MySQL: one of the most popular database management systems on the planet. If you need to store a lot of data (or even a little), you’ll benefit from a database engine powering your web site. Learn about using MySQL within PHP here. The official reference is here.

Gasp. That’s a lot to get hold of, isn’t it? Don’t worry – you’ll see that a lot of this learning dovetails together. For example, once you’ve learnt some JavaScript, picking up PHP will be that bit easier, because they have much in common.

Frameworks

You can get by, just knowing the building blocks. But if you want to create efficient, reusable code, without continually reinventing the wheel, you’d do well to make use of some frameworks. Each language has many frameworks and you could spend a lifetime trying them all out. I will steer you in the direction of a small few, but by all means try out as many as you have time for. Each is different from the other, which can be bewildering, but it also means you’re likely to find frameworks which fit or even enhance your style of working.

  • Twitter’s Bootstrap: built by the mighty Twitter, Bootstrap gives you consistent CSS styles, which (amongst other things) help to ensure your web sites look very similar in different browsers. Sooner or later you’ll be stung by cross-browser differences. Making use of a CSS framework such as Bootstrap will reduce the impact of this pain. Bootstrap is more than just a CSS framework, it also has JavaScript plugins. There’s much to explore here and unless you’re already a CSS/design guru, it will make your web sites look better.
  • jQuery: a phenomenal JavaScript library – it enables you to do phenomenal things on the browser side, with very little coding, which would otherwise take you hours of work. jQuery is not the only such library, but it is one of the best. It is further enhanced visually by the excellent jQuery UI.
  • CodeIgniter: I have built many web sites with this PHP development platform. It was my first introduction to the MVC (Model, View, Controller) paradigm, where you split out your database work (Models) from your presentation/pages (Views) and your application/business logic (Controllers). CodeIgniter has some flaws, including the suggestion (a view shared by many) that it would benefit from a ground-up rewrite. But it is well-built, fast, solid and will help you to concentrate on the unique features of your web site, without having to reinvent the wheel all the time. Your resulting code will be easier to understand and maintain.

Special mention

There’s a rapidly up-and-coming PHP framework that deserves some attention at this point, Laravel. I have not personally had chance to experiment with it yet, but I intend to use it for my next web application. I understand it addresses many of the shortcomings of other PHP frameworks and apparently CodeIgniter developers are flocking to it in droves.

Graphics

As I’m sure you can tell, graphic design is not my strong suit. I am amongst other things a web developer, not a web designer. It’s rare to find someone who’s good at both. Nevertheless, even if you’re not graphically inclined, there are still a lot of things you can do to give yourself a “leg up”. Here are my top graphics tips:

  1. Don’t be afraid to copy. There are very few genuine innovators out there. Most fashion is a rehash of other fashion. It’s fine not to be original. See what works, figure out why it works, and put your own spin on it.
  2. Get a good graphics package. Don’t be put off by its name; download GIMP. It’s like Adobe Photoshop at the great price of free. If you’re not short of cash, I can also recommend Adobe Fireworks, which is an excellent but expensive web-focussed design package.
  3. Follow the GIMP tutorials. Really. Do it.
  4. Use an online colour scheme generator.
  5. Soak up some design inspiration from Designpiration or Web Creme.

That’s me done. Now go forth and conquer the interwebs.

Photo of bearded gents copyright © Igal Koshevoy, licensed under Creative Commons. Used with permission.