Step by Step Real World Application with

Laravel 4
Ibrahim Yusuf
This book is for sale at http://leanpub.com/real-world-laravel4

This version was published on 2014-03-12

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing
process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and
many iterations to get reader feedback, pivot until you have the right book and build traction once
you do.

©2014 Ibrahim Yusuf

Tweet This Book!
Please help Ibrahim Yusuf by spreading the word about this book on Twitter!
The suggested hashtag for this book is #realworld-laravel.
Find out what other people are saying about the book by clicking on this link to search for this
hashtag on Twitter:
https://twitter.com/search?q=#realworld-laravel
Contents

Love as a Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Let’s Begin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Adding More Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Love as a Service
In previous chapter, we have learned the basics of Laravel. Let’s get our hands dirty and create
something useful.
Sometimes I realize that my words can be extremely rude without me even notice it. I know, words
can be sharper than a sword. So, let’s help me neutralize that bad karma by making this app: Love
as a Service. This app will let its users express their love to anything, and anyone they want just by
sharing links.
In the last few years, we’ve seen many people sell things as a service. Software as a Service,
Infrastructure as a Service, Metal as a Service, and so on. It seems that everything can be a service.
That’s where the idea came from. Of course, it is just a name and nothing to do with the purpose of
this app.

Let’s Begin
Open up your Terminal, and create a fresh install of Laravel.

$ laravel new laas

This may take some time, depending on your internet connection speed. After the command finished,
let’s start the server, so we can access it with our web browser.

$ cd laas
$ php artisan serve
Laravel development server started on http://localhost:8000

This is the Laravel development server, as mentioned in the previous chapter. If you have finished
using the server, you can stop the server by pressing CTRL+C. Don’t do this now, though, we are just
getting started!
Open your browser, and go to http://localhost:8000.
Love as a Service 2

Laravel’s welcome screen.

Let’s open our routes.php. Add these lines:

Route::get('love/{to}', function($to) {
return "I love you, {$to}!";
});

Fire up your browser and navigate to http://localhost:8000/love/ibrahim.

Thanks! You’re very kind, I love you too. Let’s try another, http://localhost:8000/love/snoopy.
You will see:

I love you, Snoopy!

This is an example of dynamic routing. We take the parameter to and echo it back to client. Let’s
enhance this a little. We will use a View this time. Create a file, named app/views/love.blade.php.
 Love as a Service 3

1 <div class="panel">
2 <div class="panel-body">
3 I love you, {{ $to }}!
4 </div>
5 </div>

Go back to your routes.php, and change the route like so:

1 Route::get('love/{to}', function($to) {
2 return View::make('love', array('to' => $to));
3 });

I see what you did there… Alright, refresh your browser to test it.
Now, let’s style it a little bit. Create a file in your public directory, name it main.css.

1 /* public/main.css */
2 body {
3 margin: 0;
4 }
5
6 .panel {
7 position: absolute;
8 top: 50%;
9 margin-top: -80px;
10 width: 100%;
11 }
12
13 .panel-body {
14 text-align: center;
15 font-family: serif;
16 font-size: 60px;
17 }
18
19 .to {
20 text-transform: capitalize;
21 }
22
23 .sender {
24 font-size: 32px;
25 margin-left: 150px;
26 text-transform: capitalize;
27 }
 Love as a Service 4

We need to reference this CSS from our page. Again, open love.blade.php, and add this line to the
beginning of the file.

1 // app/views/love.blade.php
2
3 <link rel="stylesheet" type="text/css" href="/main.css"/>
4 /* ... */

Refresh your browser. It should look like the screenshot below.

Very simple page with basic styling.

This is already good for secret admirers. However, there are circumstances where you want to put
your name on it. Let’s modify our route a bit.
 Love as a Service 5

1 Route::get('love/{to}/{from?}', function($to, $from = 'Secret Admirer') {

2 return View::make('love', array('to' => $to, 'from' => $from));
3 });

Notice the ? sign on our from parameter. It marks the parameter optional. In the closure (the
function), we specify the default value of that parameter. So, when the argument is empty, the
default value will be used.
Let’s test it in our browser. Navigate to http://localhost:8000/love/juliet/romeo.
Ah, we forgot to modify our views. Let’s do it. Edit your app/views/love.blade.php.

1 <link rel="stylesheet" type="text/css" href="/main.css"/>

2 <div class="panel">
3 <div class="panel-body">
4 I love you, <span class="to">{{ $to }}</span>!
5 <div class="sender"> - {{ $from }}</div>
6 </div>
7 </div>

Refresh your browser. It should display a nice message with sender name below it. Wait. What
if we don’t supply the sender name? Try deleting the /romeo part so your address bar looks like
http://localhost:8000/love/juliet. Ah, it still works without sender name, and the browser
displays “Secret Admirer” instead. You have given your users the freedom to put the sender name
or not.
 Love as a Service 6

We can now put the sender’s name!

Adding More Features

We can also add new features, like sending happy birthday wishes or anniversary. We can do that
by adding these lines to our routes.php.

1 Route::get('bday', function($to, $from = null) {

2 return "Happy birthday, {$to}!";
3 });

If you want to support multiple views by only a single route, we can check if a view exists using
View::exists(). This is useful when you want to create many views or templates, so you don’t
have to create separate routes each time you add new views.
 Love as a Service 7

1 Route::get('{wish}/{to}/{from}', function($wish, $to, $from) {

2 if (View::exists($wish))
3 return View::make($wish, array('from' => $from, 'to' => $to));
4 else
5 return Response::error('404');
6 });

When we try to navigate to http://localhost:8000/love/snoopy, it’s still works! Yes, we already

have love.blade.php in our views. Let’s try http://localhost:8000/bday/laravel. Oh, it displays
404 error, since bday.blade.php do not yet exist. To make it working, we just have to create that
file.
Let them eat the cake!

1 // app/views/bday.blade.php
2
3 <div class="panel">
4 <div class="panel-body">
5 Happy Birthday, {{ $to }}!
6 @if ($from)
7 <div class="sender"> - {{ $from }}</div>
8 @endif
9 </div>
10 </div>

Conclusion
In just minutes, we have created a simple, yet fully functional web app available for public use.
However, this is just a tip of an iceberg. We’ve only used a few routes and views in this app, while
you can do much more with Laravel. This chapter shows you how easy it is to build a functional
web app using Laravel. At the same time, it also try to show us that good words will always look
beautiful. Even without a fancy design.
Our app is now ready, but it will have to wait until we reach Deployment chapter, when we upload
and run it to a real server. After that, we can show our love just by sharing a link. And other people
can, too!

Let’s Customize
In this app, we’ve only passed strings to URL, render the view, and send it back to the
browser. Try customizing the page’s appearance. Add new features to your liking, such as
image, music, or even video!