100% found this document useful (3 votes)

1K views

Laravel 5 Cookbook

Uploaded by

Vu Nguyen

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (3 votes)

1K views

Laravel 5 Cookbook

Uploaded by

Vu Nguyen

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 215

Laravel 5 Cookbook

Enhance Your Amazing Applications

Nathan Wu
© 2015 - 2016 Nathan Wu
Contents

Book Information . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Book Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
What You Will Get . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Book Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Translation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Book Status, Changelog and Contributors . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Changelog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Current Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Laravel 5 Cookbook . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Chapter 1: Back End Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Project Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
List Of Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Recipe 1 - Introducing CLI (Command Line Interface) . . . . . . . . . . . . . . . . . . . . 8
Recipe 2 - All About Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Recipe 3 - Build A Laravel Starter App . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Recipe 4 - Create A User Authentication System with Facebook and Socialite . . . . . . . 31
Recipe 5 - Create A User Authentication System Using Laravel Auth Scaffold . . . . . . . 42
Recipe 6 - Image Upload In Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Recipe 7 - Seeding Your App Using Faker . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Recipe 8 - Pagination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Recipe 9 - Testing Your App . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Recipe 10 - Writing APIs with Laravel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Chapter 2: Front End Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
List Of Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Recipe 201 - Notifications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
CONTENTS

Recipe 202 - Integrating Buttons With Built-in Loading Indicators . . . . . . . . . . . . . 116

Recipe 203 - Create A Registration Page Using AJAX and jQuery . . . . . . . . . . . . . 123
Recipe 204 - Create A Login Page Using AJAX And jQuery . . . . . . . . . . . . . . . . . 139
Recipe 205 - Upload Files Using AJAX And jQuery . . . . . . . . . . . . . . . . . . . . . 148
Recipe 206 - Cropping Images Using jQuery . . . . . . . . . . . . . . . . . . . . . . . . . 167

Chapter 3: Deployment Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
List Of Recipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Recipe 301 - Deploying your applications using DigitalOcean (PHP 7 and Nginx) . . . . . 185
Recipe 302 - Deploying your applications using Heroku . . . . . . . . . . . . . . . . . . . 200
Recipe 303 - Deploying your applications blazingly fast using GIT . . . . . . . . . . . . . 208
Book Information

1
Book Description
If you’re looking for a book that can help you to build amazing web applications, this is the book
for you! Aimed at people who have some experience with Laravel, this cookbook has your back!
There are many proven code rich recipes for working with Laravel. Each recipe includes practical
advice, tips and tricks for working with jQuery, AJAX, JSON, API, data persistence, complex
application structure, modular PHP, testing, deployment and more.
Think about this book as a collection of all premium Laravel tutorials or the successor to the popular
Learning Laravel 5 book.
Laravel 5 Cookbook also includes tested code that you can download and reuse in your own
applications. You’ll save time, learn more about Laravel and other related technologies in the process.
We also have a forum for discussion and debate. You can freely ask any questions, provide your
valuable feedback and help others.
It’s time to discover Laravel more!

Requirements
The projects in this book are intended to help people who have grasped the basics of PHP and
HTML to move forward, developing more complex projects, using Laravel advanced techniques.
The fundamentals of the PHP and Laravel are not covered, you will need to:

• Read Learning Laravel 5 book. (optional)

• Have a basic knowledge of PHP, HTML, CSS and Laravel.
• Love Laravel.

What You Will Get

• Lifetime access to the online book. (Premium Only)
• Digital books: PDF, MOBI, EPUB (Premium Only)
• Full source code (Premium Only)
• Access new chapters of the book while it’s being written (Premium Only)
• A community of 20000+ students learning together.
• Amazing bundles and freebies to help you become a successful developer.
• iPhone, iPad and Android Accessibility.

2
Book Description 3

Book Structure
Note: This is a draft version. This book is still under active development, that means some chapters
and its content may change. The book also may have some errors and bugs. For any feedback, please
send us an email. Thank you.

Chapter 1 - Back End Recipes

Building APIs and large applications using modern technologies can be a daunting task. In this
chapter, you’ll learn best practices and modern techniques for back-end development, starting with
an introduction to the command line and Git.
These complete, easy-to-use recipes show you how to use cookies, sessions, web storage and some
popular Laravel packages. You’ll also learn about writing APIs and debugging techniques.
In addition to mastering the technologies, you’ll understand when they’re needed and how to use
them.

Chapter 2 - Front End Recipes

Whether you are a beginner or intermediate web developer, if you wish to make good interactive
web applications, then this chapter is for you.
In this chapter, you’ll be getting some recipes about front-end web technologies and popular front-
end tools. These recipes cover best practices and modern techniques for front-end development
such as: integrating Twitter Bootstrap, AJAX loading, notifications, cropping images, file uploads
and many more.
By the end, you should have a better understanding of how to work with AJAX, Jquery, front end
frameworks and responsive design. You can apply these techniques to build beautiful applications
and add that interactivity to any site you work on.

Chapter 3 - Deployment Recipes

After learning some tricky topics to successfully build a full stack application, it’s time to deploy
your app. This chapter contains some helpful recipes about working with Heroku, Digital Ocean,
etc.
Deploy your applications blazingly fast using GIT and secret techniques are also discussed in the
book!
Book Description 4

Feedback
Feedback from our readers is always welcome. Let us know what you liked or may have disliked.
Simply send an email to [email protected].
We’re always here.

Translation
We’re also looking for translators who can help to translate our book to other languages.
Feel free to contact us at [email protected].
Here is a list of our current translators:
List of Translators¹

Book Status, Changelog and Contributors

You can always check the book status, changelog and view the list of contributors at:
Book Status²
Changelog³
Contributors⁴
¹http://learninglaravel.net/books/laravelcookbook/cookbook-translators
²http://learninglaravel.net/books/laravelcookbook/cookbook-status
³http://learninglaravel.net/books/laravelcookbook/cookbook-changelog
⁴http://learninglaravel.net/books/laravelcookbook/cookbook-contributors
Changelog
Current Version
Latest version the book:

• Version: 0.20
• Status: Complete (Beta Version)
• Updated: May 15th, 2016

5
Laravel 5 Cookbook

6
Chapter 1: Back End Recipes
Introduction
Building APIs and large applications using modern technologies can be a daunting task. In this
chapter, you’ll learn best practices and modern techniques for back-end development, starting with
an introduction to the command line and Git.
These complete, easy-to-use recipes show you how to use cookies, sessions, web storage and some
popular Laravel packages. You’ll also learn about writing APIs and debugging techniques.
In addition to mastering the technologies, you’ll understand when they’re needed and how to use
them.

Project Files
All project files of this book can be downloaded at:
https://github.com/LearningLaravel/cookbook/releases⁵
At the end of each recipe, you can find the recipe’s project files (Tag). Feel free to use each of them
at any stage of your development process.

List Of Recipes
Note: As this is a cookbook, you may skip any recipe that you know already. The book
is still under active development, that means some chapters and its recipes may change.
The book also may have some errors and bugs. For any feedback, please send us an
email.

Backend recipes
• Recipe 1 - Introducing CLI (Command Line Interface)
• Recipe 2 - All About Git
• Recipe 3 - Build A Laravel Starter App
• Recipe 4 - Create A User Authentication System with Facebook and Socialite
⁵https://github.com/LearningLaravel/cookbook/releases

7
Chapter 1: Back End Recipes 8

• Recipe 5 - Create A User Authentication System Using Laravel Auth Scaffold

• Recipe 6 - Image Upload In Laravel
• Recipe 7 - Seeding Your App Using Faker
• Recipe 8 - Pagination
• Recipe 9 - Testing Your App
• Recipe 10 - Writing APIs with Laravel
• (More recipes will be added later)

Recipe 1 - Introducing CLI (Command Line Interface)

Laravel 5 Cookbook contains many recipes to create interactive web applications. These recipes are
premium tutorials for web developers of all skill levels. For most of the recipes in this book, you
will need to use Git to install sample code and Homestead to execute your code. If you don’t have
Homestead installed yet, you can follow these instructions to install it:
http://learninglaravel.net/laravel5/installing-laravel
Working with Laravel and GIT requires a lot of interactions with the CLI, thus you will need to
know how to use it.

What will we learn?

This recipe shows you how to use the command line on PC and Mac.

CLI for MAC OSX

Luckily, on Mac, you can find a good CLI called Terminal at /Applications/Utilities.
Most of what you do in the Terminal is enter specific text strings, then press Return to execute
them.
Alternatively, you can use iTerms 2⁶.
⁶https://www.iterm2.com
Chapter 1: Back End Recipes 9

Iterm inteface

CLI for Windows

Unfortunately, the default CLI for Windows (cmd.exe) is not good, you may need another one.
The most popular one called Git Bash. You can download and install it here:
http://msysgit.github.io⁷
Most of what you do in Git Bash is enter specific text strings, then press Enter to execute them.

CLI for Linux

On Linux, the CLI is called Terminal or Konsole. If you know how to install and use Linux, I guess
you’ve known how to use the CLI already.
⁷http://msysgit.github.io
Chapter 1: Back End Recipes 10

Recipe 2 - All About Git

There’s a chance you may already know about Git! Today, most programmers prefer Git over other
distributed version control systems.

What will we learn?

This recipe introduces Git and provides a list of some important Git commands to get you going
with Git.

What is Version Control?

Version Control System (VCS) let you store different versions of your projects and all its files. You
can roll back to an earlier version or take a look at an older snapshot to see which files have been
changed.
Here is a nice infographic about Version Controler System:

Iterm inteface
Chapter 1: Back End Recipes 11

Why do you need to use Git?

Git is becoming an ‘industry standard’. If you want to become a better developer, you may need
to use Git to develop software and collaborate with other developers. Git lets you manage code
development in a virtually endless variety of way. Here are benefits of using Version Control
System/Git:

• Git allows you to create as many branches of your project as you want. You can use each
branch to test, create a new feature, fix bugs, etc.
• You can see what was changed in your project’s files. This helps you understand what
happened and improve your code.
• You can easily store all the versions of your site and restore previous versions whenever you
want.
• Store your files on cloud-based Git repository host services like Github and Bitbucket.
• You can easily share your files with others.
• A VCS or Git helps your team work more efficiently. Everyone knows what is going on and
can merge the changes into a common version.

How to install Git?

Note: if you don’t know how to run a command, please read the Recipe 1 - Introducing
CLI (Command Line Interface).

Install Git on Mac

The easiest way is to install the Xcode Command Line Tools. You can do this by simply running
this command:

1 xcode-select --install

Click Install to download Command Line Tools package.

Alternatively, you can also find the OSX Git installer at this website:
http://git-scm.com/download/mac⁸
Install Git on Windows
You can download GitHub for Windows to install Git:
https://windows.github.com⁹
Install Git on Linux/Unix
You can install Git by running this command:
⁸http://git-scm.com/download/mac
⁹https://windows.github.com
Chapter 1: Back End Recipes 12

1 sudo yum install git

If you’re on a Debian-based distribution, use this:

1 sudo apt-get install git

For more information and other methods, you can see this guide:
https://git-scm.com/book/en/v2/Getting-Started-Installing-Git¹⁰

Configuring Git
When you first install Git, you should set your name, email address and enable coloring to pretty
up command outputs. Open your CLI and run these commands:

1 git config --global user.name "Your Name"

2 git config --global user.email "Your Email Address"
3 git config --global color.ui auto

Note: Remember to replace Your Name and Your Email Address.

Start versioning your project using Git

Git is very simple to use. First, you need to go to your working directory:

1 cd Code/Laravel

Note: If you’re using Homestead, the Code directory is where we will put our Laravel
apps. Code/Laravel is your working directory. You can use Git on Homestead or on
your local machine, it’s up to you.

Now we can use the git init command to initialize Git:

1 git init

This command creates an empty Git repository. If you’re using Homestead, the path of the Git
directory is:

¹⁰https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
Chapter 1: Back End Recipes 13

1 /home/vagrant/Code/Laravel/.git/

“.git” is a hidden folder and it doesn’t contain your project’s files yet.

Add and commit your files

Now we can use git status command to check the status of our working directory:

1 git status

You will see a list of untracked files, that means Git doesn’t monitor those files yet.

Untracked files

To tell Git that you want to include all these files, use the git add -A command:

1 git add -A

Note: Alternatively, you can use git add –a or git add –all or git add . command.
Chapter 1: Back End Recipes 14

When we run the git status command again, you’ll see:

Add files

The git add command tells git to add changes in your project to the staging area. However, those
changes aren’t saved yet until you run git commit:

1 git commit -m "First commit"

You can use the -m flag (stands for message) to give a comment on the command line. My message
is “First commit”, but you can use whatever you like.
Well done! You’ve made your first commit!
Chapter 1: Back End Recipes 15

Store your files on Git repository host services

You can store all your files on cloud-based Git repository host services and access them anywhere,
anytime.
The two most popular services are Github¹¹ and Bitbucket¹².
We’ll use Github in this book, but feel free to use what you like.
Let’s register an account on Github if you don’t have one yet. After that, click the New repository
button to create a new repository.

New repository

This repository contains all your project’s files.

¹¹http://github.com
¹²http://bitbucket.org
Chapter 1: Back End Recipes 16

Creata a new repository

When creating a new repository, you can choose any name that you like. Choose Private if you
don’t want anyone access your files.

Note: Don’t worry too much about the settings, you can change those settings later.

Click Create repository to confirm.

Great! You now have a new Github repository!

Push your project to Github

You should see Github’s quick setup guide:
Chapter 1: Back End Recipes 17

Creata a new repository

Your new repository (repo) is empty. You need to upload your files to that Github repo.
Every repository has a unique remote URL, your remote URL should look like this:
https://github.com/YourGithubUsername/YourRepoName.git
Take note of this link.
Good! We will try to upload our Laravel app (/Code/Laravel) to Github.
Navigate to the working directory (on your Homestead or local machine):

1 cd /Code/Laravel

Add a new remote by using git remote add command:

1 git remote add origin https://github.com/LearningLaravel/Laravel.git

origin is the remote name, https://github.com/LearningLaravel/Laravel.git is the remote URL.

Note: Your remote URL should be different. Be sure to use your remote URL.

After adding a new remote, we can push our files to Github using the git push command:

1 git push -u origin master

If it asks for a password, enter your Github password.

origin is the remote that we’ve just added. master is your working directory.
When we use the -u (stands for upstream) flag, we add the upstream reference. If we successfully
push our files to the repo, Git will remember it, so we don’t have to type origin master next time.
That means, if we want to upload our files again, we can just type:
Chapter 1: Back End Recipes 18

1 git push

You now have your files on the cloud!

Cloning a repository
To download any repo, you can use the git clone command.
First, navigate to the location where you want to place the cloned directory:

1 cd Code

Type git clone and the unique remote URL to clone the repo:

1 git clone https://github.com/YourGithubUsername/YourRepoName.git

This command creates a local clone of the repository on your computer.

Note: you can clone any public repository. If you don’t want anyone to download your
repo, set it private.

Recipe 2 Wrap-up
In this recipe, you learned some major Git commands. Throughout this book, we’ll use Git to
download the source code, front end components and deploy our Laravel applications. We won’t
talk about it anymore because this is a Laravel book, not a Git book. If you wish to learn more about
Git, check these sites out:
Atlassian Git Tutorials¹³
Git-Tower¹⁴
Codeschool - Try Git¹⁵
Super Useful Need To Know Git Commands¹⁶
It’s time to start learning about Laravel!
¹³https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
¹⁴https://www.git-tower.com/learn/git/ebook
¹⁵https://www.codeschool.com/courses/try-git
¹⁶http://zackperdue.com/tutorials/super-useful-need-to-know-git-commands
Chapter 1: Back End Recipes 19

Recipe 3 - Build A Laravel Starter App

What will we learn?

We will build a simple app and use it as a template for our next recipes.
Throughout this process, we will learn how to run multiple Laravel sites on Homestead and how to
integrate Twitter Bootstrap into our apps.

Installing Laravel
Let’s start by installing Laravel!

Note: Please note that I’m using Homestead. If you don’t use Homestead, the process
could be different.

First, SSH into our Homestead:

1 vagrant ssh

Then navigate to our Code directory.

1 cd Code

Be sure to have the latest version of Laravel Installer by running this command:

1 Composer global require "laravel/installer"

New repository

Now let’s create a new cookbook app:

Chapter 1: Back End Recipes 20

1 laravel new cookbook

Great! You should have a new Laravel app! Feel free to change the name of the app to your liking.

Note: If you’re not familiar with this process, please read the Learning Laravel 5 book.

Create multiple Laravel apps on Homestead

You can’t access your new app because Homestead doesn’t know about it yet. Therefore, let’s follow
these steps to activate your site:

Note: Be sure to backup your current projects’ files and databases.

First, we have to go to the Homestead directory:

1 cd ~/.homestead

And edit the Homestead.yaml file:

1 vim Homestead.yaml

We use VIM to edit the file. If you don’t know how to use VI or VIM, you can open it with your
favorite editor by using this command:

1 open Homestead.yaml

Find:

1 sites:
2 - map: homestead.app
3 to: /home/vagrant/Code/Laravel/public

Just a quick reminder, this section allows us to map a domain to a folder on our VM. For example, we
can map homestead.app to the public folder of our Laravel project, and then we can easily access
our Laravel app via this address: “http://homestead.app”.
Our new app is called cookbook, and I would like to access it via this address: “http://cookbook.app”.
So, let’s add the following code:
Chapter 1: Back End Recipes 21

1 - map: cookbook.app
2 to: /home/vagrant/Code/cookbook/public

Save the file.

Tip: if you’re using VIM, press ESC and then write :wq (write quit) to save and exit

Remember that, when we add any domain, we must edit the hosts file on our local machine to
redirect requests to our Homestead environment.
On Linux or Mac, you can find the hosts file at etc/hosts or /private/etc/hosts. You can edit the
hosts file using this command:

1 sudo vim /private/etc/hosts

On Windows, you can find the hosts file at C:WindowsSystem32\drivers\etc\hosts.

After opening the file, we need to add this line at the end of the file:

1 192.168.10.10 cookbook.app

Note: All sites will be accessible by HTTP via port 8000 and HTTPS via port 44300 by
default.

To let the system know that we’ve edited the hosts file, run this command:

1 source /private/etc/hosts

Finally, SSH into our Homestead (by using vagrant ssh or homestead ssh), and use the serve
command to activate our new site:

1 serve cookbook.app /home/vagrant/Code/cookbook/public/

Good job! If everything is working correctly, we should see our app’s home page:
Chapter 1: Back End Recipes 22

New home page

Creating Our Home Page

Note: If you don’t understand any step in this section, be sure to check out the Learning
Laravel 5 book. If you don’t want to follow along, you may skip these steps and
download the sample app at the end of this recipe.

We will create a new home page for our app.

First, let’s create a home view (views/home.blade.php) for our homepage:
Chapter 1: Back End Recipes 23

1 <html>
2 <head>
3 <title>Home Page</title>
4
5 <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' typ\
6 e='text/css'>
7
8 <style>
9 body {
10 margin: 0;
11 padding: 0;
12 width: 100%;
13 height: 100%;
14 color: #B0BEC5;
15 display: table;
16 font-weight: 100;
17 font-family: 'Lato';
18 }
19
20 .container {
21 text-align: center;
22 display: table-cell;
23 vertical-align: middle;
24 }
25
26 .content {
27 text-align: center;
28 display: inline-block;
29 }
30
31 .title {
32 font-size: 96px;
33 margin-bottom: 40px;
34 }
35
36 .quote {
37 font-size: 24px;
38 }
39 </style>
40 </head>
41 <body>
42 <div class="container">
Chapter 1: Back End Recipes 24

43 <div class="content">
44 <div class="title">Home Page</div>
45 <div class="quote">Our Home page!</div>
46 </div>
47 </div>
48 </body>
49 </html>

After that, generate a new PagesController:

1 php artisan make:controller PagesController

Open PagesController, which can be found at app/Http/Controllers, and create a new home
action:

1 ?php namespace App\Http\Controllers;

2
3 use App\Http\Requests;
4 use App\Http\Controllers\Controller;
5
6 use Illuminate\Http\Request;
7
8 class PagesController extends Controller {
9
10 public function home()
11 {
12 return view('home');
13 }
14
15 }

When you have the PagesController, the next thing to do is modifying our routes!
Open routes.php file. Change the default route to:

1 Route::get('/', 'PagesController@home');

Great! We should now have a new home page!

Chapter 1: Back End Recipes 25

New home page

Integrating Twitter Bootstrap

Nowadays, the most popular front-end framework is Twitter Bootstrap. It’s free, open source and
has a large active community.
Using Twitter Bootstrap, we can quickly develop responsive, mobile-ready web applications.
Millions of beautiful and popular sites across the world are built with Bootstrap.
In this section, we will learn how to integrate Twitter Bootstrap into our Laravel application.
You can get Bootstrap and read its official documentation here:
http://getbootstrap.com¹⁷
There are three ways to integrate Bootstrap:

1. Using Bootstrap CDN

2. Using Precompiled Bootstrap Files
3. Using Bootstrap Source Code (Less)
¹⁷http://getbootstrap.com
Chapter 1: Back End Recipes 26

In this book, we will use the first one (using Bootstrap CDN). This is also the fastest method.
Let’s open home.blade.php, remove the Lato font and these css styles:

1 <link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='t\

2 ext/css'>
3
4 <style>
5 body {
6 margin: 0;
7 padding: 0;
8 width: 100%;
9 height: 100%;
10 color: #B0BEC5;
11 display: table;
12 font-weight: 100;
13 font-family: 'Lato';
14 }
15
16 .container {
17 text-align: center;
18 display: table-cell;
19 vertical-align: middle;
20 }
21
22 .content {
23 text-align: center;
24 display: inline-block;
25 }
26
27 .title {
28 font-size: 96px;
29 margin-bottom: 40px;
30 }
31
32 .quote {
33 font-size: 24px;
34 }
35 </style>

Place these links inside the head tag

Chapter 1: Back End Recipes 27

1 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css\

2 /bootstrap.min.css">
3 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css\
4 /bootstrap-theme.min.css">
5
6 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
7 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\
8 "></script>

Done! You now have fully integrated Twitter Bootstrap into our app!

Create a master layout, app navigation bar and other pages

It’s time to create a master layout (master.blade.php) for our app:

Next, create a new navbar view and place it at shared/navbar.blade.php:

Chapter 1: Back End Recipes 28

1 <nav class="navbar navbar-default">

2 <div class="container-fluid">
3 
4 <div class="navbar-header">
5 <button type="button" class="navbar-toggle collapsed" data-toggle="c\
6 ollapse"
7 data-target="#bs-example-navbar-collapse-1">
8 <span class="sr-only">Toggle navigation</span>
9 <span class="icon-bar"></span>
10 <span class="icon-bar"></span>
11 <span class="icon-bar"></span>
12 </button>
13 <a class="navbar-brand" href="#">Learning Laravel</a>
14 </div>
15
16 
17 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
18 <ul class="nav navbar-nav navbar-right">
19 <li class="active"><a href="/">Home</a></li>
20 <li><a href="/about">About</a></li>
21 <li><a href="/contact">Contact</a></li>
22 <li class="dropdown">
23 <a href="#" class="dropdown-toggle" data-toggle="dropdown" r\
24 ole="button" aria-expanded="false">Member
25 <span class="caret"></span></a>
26 <ul class="dropdown-menu" role="menu">
27 <li><a href="/users/register">Register</a></li>
28 <li><a href="/users/login">Login</a></li>
29 </ul>
30 </li>
31 </ul>
32 </div>
33 </div>
34 </nav>

We can now change our home view to extend the master layout.
Chapter 1: Back End Recipes 29

1 @extends('master')
2 @section('title', 'Home')
3
4 @section('content')
5 <div class="container">
6 <div class="content">
7 <div class="title">Home Page</div>
8 <div class="quote">Our Home page!</div>
9 </div>
10 </div>
11 @endsection

Refresh your browser, we should have a new home page with a nice navigation bar:

New home page

We can then continue to create the about and contact page:

about view (about.blade.php):
Chapter 1: Back End Recipes 30

1 @extends('master')
2 @section('title', 'About')
3
4 @section('content')
5 <div class="container">
6 <div class="content">
7 <div class="title">About Page</div>
8 <div class="quote">Our about page!</div>
9 </div>
10 </div>
11 @endsection

contact view (contact.blade.php):

1 @extends('master')
2 @section('title', 'Contact')
3
4 @section('content')
5 <div class="container">
6 <div class="content">
7 <div class="title">Contact Page</div>
8 <div class="quote">Our contact page!</div>
9 </div>
10 </div>
11 @endsection

Edit the routes.php file. Add the following lines:

1 Route::get('/about', 'PagesController@about');
2 Route::get('/contact', 'PagesController@contact');

Please note that we’re using Laravel 5.2, so we need to add these routes into the web middleware
group:

1 Route::group(['middleware' => ['web']], function () {

2 Route::get('login/facebook', 'Auth\AuthController@redirectToFacebook');
3 Route::get('login/facebook/callback', 'Auth\AuthController@getFacebookCallba\
4 ck');
5 });

Open PagesController, add:

Chapter 1: Back End Recipes 31

1 public function about()

2 {
3 return view('about');
4 }
5
6 public function contact()
7 {
8 return view('contact');
9 }

Congratulations! You’ve just taken the first step in building awesome Laravel applications!

Note: If you’re using Git, this is a good time to initialize your repo with git init.

This will be our starter template.

Recipe 3 Wrap-up
Tag: Version 0.1 - Recipe 3¹⁸

Good job! We’ve got our app running.

As you can see, our main app template is very simple and it isn’t what we really want. Therefore,
let’s start adding more features into it!

Recipe 4 - Create A User Authentication System with

Facebook and Socialite

What will we learn?

We will learn how to use Socialite - a new Laravel 5 feature - to let users log in using their Facebook
account.
After learning this recipe, you may apply the technique to authenticate users with other social
networks (Twitter, Github, Gmail, etc.) as well.
¹⁸https://github.com/LearningLaravel/cookbook/releases/tag/v0.1
Chapter 1: Back End Recipes 32

Installing Socialite
In most web frameworks, authenticating users using 3rd party providers is never as easy as it could
be. Luckily, Laravel 5 provides a simple way to authenticate with OAuth providers using Socialite.
Currently, Socialite officially supports authentication with Facebook, GitHub, Google, Twitter and
Bitbucket. If you want to use Socialite with other providers (Youtube, Wordpress, etc.), check out
SocialiteProviders¹⁹, which is a collection of OAuth 1 and 2 packages that extends Socialite.
Actually, Socialite is an official package, and it’s not included in Laravel by default. To use Socialite,
we have to install it by running this command:

1 composer require laravel/socialite

Alternatively, you may edit the composer.json file, add below code into the require section and
run composer update:

1 "laravel/socialite": "~2.0"

Next, open config/app.php.

Add the following line into the providers array:

1 Laravel\Socialite\SocialiteServiceProvider::class,

Add the Socialite facade into the aliases array:

1 'Socialite' => Laravel\Socialite\Facades\Socialite::class,

Done! Socialte is now ready to use!

Create a Facebook app

In order to use Facebook as our authentication provider, we must create a Facebook app.
Don’t worry, it’s very simple.
First, let’s go to:
https://developers.facebook.com
Register a Facebook account or login if you have one already.
There is an Account Menu at the top right corner of the page.
¹⁹https://socialiteproviders.github.io
Chapter 1: Back End Recipes 33

New home page

Click Add a New App and choose Website to create a Facebook app.
Alternatively, you can access this link:
https://developers.facebook.com/quickstarts/?platform=web
Enter your app’s name and click Create New Facebook App ID:
Chapter 1: Back End Recipes 34

New home page

Choose a Category for your app and then click Create App ID
Click Skip Quick Start to access your App Dashboard

New home page

That’s it! You can get your App ID and App Secret here.

Create a Facebook Test App

If you’re working on Homestead, you will have to create a Test App to test the authentication
locally.
Find the Test Apps button, which is on the left menu:
Chapter 1: Back End Recipes 35

Create a test app

Follow the instructions to create a test app. You can name the app whatever you want.
After that, click Settings -> Add Platforms -> Website
Enter your app URL into the Site URL field. (For example, cookbook.app)
Chapter 1: Back End Recipes 36

Add platform and app domain

Enter your app URL into the App Domains field, too.
Click Save Changes to update your Test App.
Well done! Don’t forget to grab your Test App ID and Test App Secret.

Tell Laravel about your Facebook app

After creating your Facebook app, you can connect it to your Laravel app by simply editing the
config/services.php file. Add this:

1 'facebook' => [
2 'client_id' => 'yourFacebookAppID',
3 'client_secret' => 'yourFacebookAppSecret',
4 'redirect' => 'http://yourLaravelAppURL/login/facebook/callback',
5 ],

If you’re using the .env config file, you may use the following instead:
Chapter 1: Back End Recipes 37

1 'facebook' => [
2 'client_id' => env('FACEBOOK_ID'),
3 'client_secret' => env('FACEBOOK_SECRET'),
4 'redirect' => env('FACEBOOK_URL'),
5 ],

Edit your .env files:

1 FACEBOOK_ID=yourFacebookAppID
2 FACEBOOK_SECRET=yourFacebookAppSecret
3 FACEBOOK_URL=http://yourLaravelAppURL/login/facebook/callback

Done! Laravel automatically detects your Facebook app information and prepares everything for
you!

Note: If you’re using Homestead, use your Test App ID and Secret.

Update Users Migration

We have to update our database to store users’ Facebook Unique ID and other related information.
This is a new app, so we just need to update the create_users_table migration.

Note: Laravel includes the create_users_table by default (2014_10_12_000000_create_-

users_table.php), we don’t need to create it.

Open database/migrations/timestamps_create_users_table.php file and update the up method:

1 public function up()

2 {
3 Schema::create('users', function (Blueprint $table) {
4 $table->increments('id');
5 $table->string('facebook_id')->unique();
6 $table->string('name');
7 $table->string('email')->unique();
8 $table->string('password', 60);
9 $table->rememberToken();
10 $table->timestamps();
11 });
12 }

This migration will create a new users table with the facebook_id column.
If you have an existing app, you have to create a new migration to update the users table:
Chapter 1: Back End Recipes 38

1 php artisan make:migration update_users_table

Open the update_users_table file and update the code as follows:

1 <?php
2
3 use Illuminate\Database\Schema\Blueprint;
4 use Illuminate\Database\Migrations\Migration;
5
6 class UpdateUsersTable extends Migration
7 {
8 public function up()
9 {
10 if(Schema::hasColumn('users', 'facebook_id')) {
11
12 } else {
13 Schema::table('users', function ($table) {
14 $table->string('facebook_id')->unique();
15 });
16 }
17 }
18
19 public function down()
20 {
21 Schema::table('users', function ($table) {
22 $table->dropColumn('facebook_id');
23 });
24 }
25 }

Next, don’t forget to run php artisan migrate to update your database.

Note: If you don’t have a database yet, create a new one. The name of our database
is cookbook. If you wish to learn more about working with databases, read Learning
Laravel 5 book’s Chapter 3²⁰.

One last step, open app/User.php file and update our User Model:

²⁰http://learninglaravel.net/laravel5/building-a-support-ticket-system
Chapter 1: Back End Recipes 39

1 protected $fillable = [
2 'name', 'email', 'password', 'facebook_id',
3 ];

Update our Routes and AuthController

We will need two routes:

1. A route that redirects users to our OAuth provider, which is Facebook.

2. Another route that receives a response (callback) from Facebook.

Let’s open our routes.php file and add these routes:

1 Route::get('login/facebook', 'Auth\AuthController@redirectToFacebook');
2 Route::get('login/facebook/callback', 'Auth\AuthController@getFacebookCallback');

When users visit http://cookbook.app/login/facebook, Laravel redirects users to Facebook and

receive the callback at this route http://cookbook.app/login/facebook/callback.
Easy?
Now we need to create two controller methods, open Auth/AuthController, add:
The redirectToFacebook method:

1 public function redirectToFacebook()

2 {
3 return Socialite::with('facebook')->redirect();
4 }

The getFacebookCallback method:

1 public function getFacebookCallback()

2 {
3
4 $data = Socialite::with('facebook')->user();
5 $user = User::where('email', $data->email)->first();
6
7 if(!is_null($user)) {
8 Auth::login($user);
9 $user->name = $data->user['name'];
10 $user->facebook_id = $data->id;
Chapter 1: Back End Recipes 40

11 $user->save();
12 } else {
13 $user = User::where('facebook_id', $data->id)->first();
14 if(is_null($user)){
15 // Create a new user
16 $user = new User();
17 $user->name = $data->user['name'];
18 $user->email = $data->email;
19 $user->facebook_id = $data->id;
20 $user->save();
21 }
22
23 Auth::login($user);
24 }
25 return redirect('/')->with('success', 'Successfully logged in!');
26 }

Note: Facebook now returns a full name instead of first name and last name. We have
to use $data->user[‘name’] to get the name of the user.

Because we’re using the Socialite facade and the Auth facade, be sure to tell Laravel about them.
Find:

1 class AuthController extends Controller

Add above:

1 use Socialite;
2 use Auth;

Done! We can now be able to log in or register a new account using Facebook.

Login or register using Facebook

Now, let’s visit this link:
http://cookbook.app/login/facebook
We’ll be redirected to Facebook for authentication. If everything is ok, Facebook will redirect us
back to our application.
Check our users table using Sequel Pro or your favorite database management app, we should see
a new user has been created.
Just for testing purposes, let’s modify our home page:
Chapter 1: Back End Recipes 41

1 @section('content')
2 <div class="container">
3 <div class="content">
4 <div class="title">Home Page</div>
5 @if(!Auth::check())
6 <div class="quote">Our Home page!</div>
7 @else
8 <div class="quote">You are now logged in!</div>
9 @endif
10 </div>
11 </div>
12 @endsection

We use Auth::check() to check if the user is already logged into our application. If the user is
authenticated, we display the You are now logged in message.
Once again, because we’re using Laravel 5.2, we have to put our routes into the web middleware
group to use Session. The routes.php should look like this:

1 Route::group(['middleware' => ['web']], function () {

2 Route::get('login/facebook', 'Auth\AuthController@redirectToFacebook');
3 Route::get('login/facebook/callback', 'Auth\AuthController@getFacebookCallba\
4 ck');
5
6 Route::get('/', function () {
7 return view('home');
8 });
9
10 Route::get('/about', 'PagesController@about');
11 Route::get('/contact', 'PagesController@contact');
12
13 Route::get('users/register', 'Auth\AuthController@getRegister');
14 Route::post('users/register', 'Auth\AuthController@postRegister');
15
16 });

Save the changes and reload our home page, we should see:
Chapter 1: Back End Recipes 42

New home page

Note: The users/register routes are optional. You may use them to build a registration
page to create test users (Recipe 203 or Learning Laravel 5 book’s Chapter 4) and test
the Facebook login feature. If you don’t need them, you may just remove them.

Recipe 4 Wrap-up
Tag: Version 0.2 - Recipe 4²¹

That’s it! You can now log in or register a new member using Facebook.
Using this technique, you can use Socialite to authenticate users with other providers!
By default, your Facebook app is in development mode (aka sandbox mode). Don’t forget to make
your app live and use the real App ID and App Secret.
If you want to add a Facebook login button to your app, simply add the following to wherever you
want:

1 <a href="/login/facebook"> <div class="btn btn-md btn-primary"> <i class="fa fa-\

2 facebook"></i> Login with Facebook </div></a>

Note: We use Font Awesome here. If you want to learn how to integrate Font Awesome,
please read the next recipe. Recipe 5 also shows how to add the Facebook button into
your login page.

Recipe 5 - Create A User Authentication System Using

Laravel Auth Scaffold

What will we learn?

This recipe shows you how to use Laravel 5.2’s Auth Scaffold to build a user authentication system
that has: user signup, login/logout, password reset and user dashboard.
²¹https://github.com/LearningLaravel/cookbook/releases/tag/v0.2
Chapter 1: Back End Recipes 43

Generate the user authentication system

Laravel 5.2 comes with a new auth scaffold that we can use to generate a complete user authentica-
tion system with just one line of code.
Let’s start by running this Artisan command:

1 php artisan make:auth

Make:auth command

As you see, Laravel has generated some views, created a new HomeController and updated our
routes.php file.
Go ahead and reload our home page:

Make:auth command

With all this done, we now have a complete user authentication system!

Understanding the auth scaffold

When you run the Artisan command, these views are generated:

• auth/login.blade.php - the login page

• auth/register.blade.php - the signup page
• auth/passwords/email.blade.php - the password reset confirmation page
Chapter 1: Back End Recipes 44

• auth/passwords/reset.blade.php - the password reset page

• auth/emails/password.blade.php - the password reset email
• home.blade.php - the user dashboard page
• welcome.blade.php - the new welcome page

The routes.php has been changed:

1 Route::group(['middleware' => 'web'], function () {

2 Route::auth();
3
4 Route::get('/home', 'HomeController@index');
5 });

The home route (user dashboard) and HomeController are also created.
The Routes::auth() method is used to define the login route, the register route and the password
reset routes.
You may realize that our home page and other pages now have a different master layout. The new
layout is views/layouts/app.blade.php:

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7
8 <title>Laravel</title>
9
10 
11 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/fo\
12 nt-awesome.min.css" rel='stylesheet' type='text/css'>
13 <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" re\
14 l='stylesheet' type='text/css'>
15
16 
17 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.mi\
18 n.css" rel="stylesheet">
19 {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
20
21 <style>
Chapter 1: Back End Recipes 45

22 body {
23 font-family: 'Lato';
24 }
25
26 .fa-btn {
27 margin-right: 6px;
28 }
29 </style>
30 </head>
31 <body id="app-layout">
32 <nav class="navbar navbar-default">
33 <div class="container">
34 <div class="navbar-header">
35
36 
37 <button type="button" class="navbar-toggle collapsed" data-toggl\
38 e="collapse" data-target="#spark-navbar-collapse">
39 <span class="sr-only">Toggle Navigation</span>
40 <span class="icon-bar"></span>
41 <span class="icon-bar"></span>
42 <span class="icon-bar"></span>
43 </button>
44
45 
46 <a class="navbar-brand" href="{{ url('/') }}">
47 Laravel
48 </a>
49 </div>
50
51 <div class="collapse navbar-collapse" id="spark-navbar-collapse">
52 
53 <ul class="nav navbar-nav">
54 <li><a href="{{ url('/home') }}">Home</a></li>
55 </ul>
56
57 
58 <ul class="nav navbar-nav navbar-right">
59 
60 @if (Auth::guest())
61 <li><a href="{{ url('/login') }}">Login</a></li>
62 <li><a href="{{ url('/register') }}">Register</a></li>
63 @else
Chapter 1: Back End Recipes 46

64 <li class="dropdown">
65 <a href="#" class="dropdown-toggle" data-toggle="dro\
66 pdown" role="button" aria-expanded="false">
67 {{ Auth::user()->name }} <span class="caret"></s\
68 pan>
69 </a>
70
71 <ul class="dropdown-menu" role="menu">
72 <li><a href="{{ url('/logout') }}"><i class="fa \
73 fa-btn fa-sign-out"></i>Logout</a></li>
74 </ul>
75 </li>
76 @endif
77 </ul>
78 </div>
79 </div>
80 </nav>
81
82 @yield('content')
83
84 
85 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.\
86 js"></script>
87 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.mi\
88 n.js"></script>
89 {{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
90 </body>
91 </html>

This master layout also has Bootstrap, jQuery, Font Awesome, Lato font and a navigation bar.

Updating our app’s layout

Now we’re going to update the current layout. We’ll use the old master layout that we’ve created
because it’s much cleaner.
First, clear the contents of views/layouts/app.blade.php.
Next, copy the contents of views/master.blade.php into views/layouts/app.blade.php. To save
time, you can copy the code below:
Chapter 1: Back End Recipes 47

Last step, open views/shared/navbar.blade.php and find:

1 <ul class="dropdown-menu" role="menu">

2 <li><a href="/register">Register</a></li>
3 <li><a href="/login">Login</a></li>
4 </ul>

Replace with:

1 <ul class="dropdown-menu" role="menu">

2 
3 @if (Auth::guest())
4 <li><a href="{{ url('/login') }}">Login</a></li>
5 <li><a href="{{ url('/register') }}">Register</a></li>
6 @else
7 <li class="dropdown">
8 <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-o\
9 ut"></i>Logout</a></li>
10 </li>
11 @endif
12 </ul>
Chapter 1: Back End Recipes 48

We now have a new layout. All the pages are still working fine.

To test out the new pages, you can try to register a new member, login and logout.
Sadly, our app still has one bug. Let’s see what it is and how to fix it in the next section.

Fixing the “new member” bug

If you use Socialite, when you try to register a new member multiple times, you may encounter
this error:

New member error

As you may have guessed, the facebook_id column should be unique.

To fix this bug, open our AuthController file. Update the create method as follows:
Chapter 1: Back End Recipes 49

1 protected function create(array $data)

2 {
3 return User::create([
4 'name' => $data['name'],
5 'email' => $data['email'],
6 'password' => bcrypt($data['password']),
7 'facebook_id' => $data['email'],
8 ]);
9 }

It’s fairly simple to fix. When users register a new account, their facebook id is set as their provided
email, which should be unique.
Now that we’ve taken care of the bug!

Adding a Facebook login button

So far, we’ve worked our way through building an awesome Facebook user authentication. Let’s add
a Facebook login button to our login and register page, when users click on that button, they can be
able to log into our app.
First, open views/auth/login.blade.php, and find:

1 <button type="submit" class="btn btn-primary">

2 <i class="fa fa-btn fa-sign-in"></i> Login
3 </button>

Add the Facebook login button below:

1 <a href="/login/facebook"> <div class="btn btn-md btn-primary"> <i class="fa fa-\

2 facebook"></i> Login with Facebook </div></a>

Next, open views/auth/register.blade.php, and find:

1 <button type="submit" class="btn btn-primary">

2 <i class="fa fa-btn fa-user"></i>Register
3 </button>

Add the Facebook login button below:

Chapter 1: Back End Recipes 50

1 <a href="/login/facebook"> <div class="btn btn-md btn-primary"> <i class="fa fa-\

2 facebook"></i> Login with Facebook </div></a>

We’re using Font Awesome here, so let’s add the following inside of our master layout’s head tag
to integrate Font Awesome:

1 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-a\
2 wesome.min.css" rel='stylesheet' type='text/css'>

Now we can see a nice Facebook login button:

Login Facebook button

Recipe 5 Wrap-up
Tag: Version 0.3 - Recipe 5²²

Our user authentication system is working perfectly!

Please note that there are many ways to implement authentication, this is just a quick look at
implementing a good basis of authentication for our application. If you have time, try to create
a user authentication system manually to understand more about it.

Recipe 6 - Image Upload In Laravel

What will we learn?

This recipe shows you how to upload and handle images in Laravel 5.
²²https://github.com/LearningLaravel/cookbook/releases/tag/v0.3
Chapter 1: Back End Recipes 51

Installing Intervention Image

Intervention Image is one of the most popular open source PHP image handling and manipulation
libraries. Using the package, you can easily create, edit and compose images. The best thing is,
Intervention Image doesn’t require Laravel or any other framework, it only needs the following
components to work correctly:

• PHP >= 5.4

• Fileinfo Extension
• GD Library (>=2.0) or Imagick PHP extension (>=6.5.7)

To install Intervention Image, run the following command:

1 composer require intervention/image

Next, open your config/app.php file.

Add the following line into your $providers array:

1 Intervention\Image\ImageServiceProvider::class,

Add this Intervention Image’s facade into your $aliases array:

1 'Image' => Intervention\Image\Facades\Image::class,

Intervention Image supports both PHP’s GD library and Imagick extension. You can choose which
one that you want to use in Intervention Image’s configuration file.
Let’s generate the configuration file by running this command:

1 php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLa\

2 ravel5"

The configuration file is copied to config/image.php.

We did it! You can now use Intervention Image to manipulate all images!
There’s lots more to learn:

• Uploading images
• Display images
• Manipulating images (resize, crop, etc.)

In the next section, we’re going to implement a cover image for our home page.
Chapter 1: Back End Recipes 52

Creating an upload form

Let’s start by building an Image Upload form.
To keep things simple, let’s put the form at our home page. Here’s the very beginnings of our home
view (home.blade.php):

1 @extends('layouts.app')
2
3 @section('content')
4
5 <div class="container spark-screen">
6 <div class="row">
7 <div class="col-md-10 col-md-offset-1">
8 <div class="panel panel-default">
9
10 <div class="panel-heading">Dashboard</div>
11
12 <div class="panel-body">
13
14 <form method="POST" action="/upload" enctype="multipart/form\
15 -data">
16
17 @foreach ($errors->all() as $error)
18 <p class="alert alert-danger">{{ $error }}</p>
19 @endforeach
20
21 @if (session('status'))
22 <div class="alert alert-success">
23 {{ session('status') }}
24 </div>
25 @endif
26
27 {!! csrf_field() !!}
28
29 <div class="form-group">
30 <label for="image">Choose an image</label>
31 <input type="file" id="image" name="image">
32 </div>
33
34 <button type="submit" class="btn btn-default">Upload</bu\
35 tton>
36
Chapter 1: Back End Recipes 53

37 </form>
38
39 </div>
40 </div>
41 </div>
42 </div>
43 </div>
44 @endsection

As you see, we’ve just inserted a new form:

1 <form method="POST" action="/upload" enctype="multipart/form-data">

2
3 @foreach ($errors->all() as $error)
4 <p class="alert alert-danger">{{ $error }}</p>
5 @endforeach
6
7 @if (session('status'))
8 <div class="alert alert-success">
9 {{ session('status') }}
10 </div>
11 @endif
12
13 {!! csrf_field() !!}
14
15 <div class="form-group">
16 <label for="image">Choose an image</label>
17 <input type="file" id="image" name="image">
18 </div>
19
20 <button type="submit" class="btn btn-default">Upload</button>
21
22 </form>

Please keep in mind that when you upload a file, you need to include this line in your form:

1 enctype="multipart/form-data"

Just a quick reminder, we display the errors when the form is not valid. If the validator fails, Laravel
will store all errors in the session. We can easily access the errors via $errors object:
Chapter 1: Back End Recipes 54

1 @foreach ($errors->all() as $error)

2 <p class="alert alert-danger">{{ $error }}</p>
3 @endforeach

We also display a status message if the image is uploaded successfully:

1 @if (session('status'))
2 <div class="alert alert-success">
3 {{ session('status') }}
4 </div>
5 @endif

Note: If you want to learn more about how to work with forms, read the Learning
Laravel 5 book’s Chapter 3²³

Now we can see the upload form in our browser:

Upload image form

Storing images
To validate the form, we will create a new ImageFormRequest:

1 php artisan make:request ImageFormRequest

Go ahead and define the form’s rules here:

²³http://learninglaravel.net/laravel5/building-a-support-ticket-system
Chapter 1: Back End Recipes 55

1 <?php
2
3 namespace App\Http\Requests;
4
5 use App\Http\Requests\Request;
6
7 class ImageFormRequest extends Request
8 {
9 /**
10 * Determine if the user is authorized to make this request.
11 *
12 * @return bool
13 */
14 public function authorize()
15 {
16 return true;
17 }
18
19 /**
20 * Get the validation rules that apply to the request.
21 *
22 * @return array
23 */
24 public function rules()
25 {
26 return [
27 'image' => 'required',
28 ];
29 }
30 }

The next step is to wire the form to a controller and process it.
Let’s generate a new ImagesController:

1 php artisan make:controller ImagesController

Next, create a store action to handle images:

Chapter 1: Back End Recipes 56

1 public function store(ImageFormRequest $request)

2 {
3
4 if ($request->hasFile('image')) {
5
6 $file = $request->file('image');
7
8 $name = $file->getClientOriginalName();
9
10 $file->move(public_path() . '/images/', $name);
11
12 return redirect('/')->with('status', 'Your image has been uploaded s\
13 uccessfully!');
14 }
15
16 }

That seems overwhelming at first, but it’s actually very easy to understand. First, we check if the
form has a file (image) or not:

1 if ($request->hasFile('image')) {

Once the validation is done, we may retrieve all of the input data using:

1 $file = $request->file('image');

Now we can get the image’s name:

1 $name = $file->getClientOriginalName();

Sweet! If everything looks good, we can store the file at our public/images folder:

1 $file->move(public_path() . '/images/', $name);

Finally, redirect users back to our home page and display a status message:

1 return redirect('/')->with('status', 'Your image has been uploaded successfully!\

2 ');

Here is the entire ImagesController file:

Chapter 1: Back End Recipes 57

1 <?php
2
3 namespace App\Http\Controllers;
4
5 use App\Http\Requests;
6 use App\Http\Requests\ImageFormRequest;
7
8 class ImagesController extends Controller
9 {
10 public function store(ImageFormRequest $request)
11 {
12
13 if ($request->hasFile('image')) {
14
15 $file = $request->file('image');
16
17 $name = $file->getClientOriginalName();
18
19 $file->move(public_path() . '/images/', $name);
20
21 return redirect('/')->with('status', 'Your image has been uploaded s\
22 uccessfully!');
23 }
24
25 }
26 }

The last thing we need to do is create a route:

1 Route::post('upload', 'ImagesController@store');

Well done! Now when users make a POST request to this route, Laravel will execute the
ImagesController’s store action.
Let’s test what we’ve just made to make sure that it works properly:
Chapter 1: Back End Recipes 58

Sample image

I will try to upload this image, you may download it at:

Laravel Cookbook Image²⁴

Note: Feel free to use your own image.

Let’s view the site in your browser and try to upload the image:

Upload image successfully

Check your public/images directory, you will see the image there.

Displaying images
This is the simple part. Once we have that image file, we can easily display it on our home page.
Open home.blade.php, find:

1 <div class="panel-heading">Dashboard</div>

Add below:

²⁴images/chap1-pic24.png
Chapter 1: Back End Recipes 59

1 <div><img src="/images/chap1-pic24.png" width="100%"/></div>

Now we should be able to see our image:

Cover image

Note: If you’re using your own image, be sure to change the file name.

Manipulating images
What’s the point in installing Intervention Image if we don’t use it? It’s time to use “the power” of
Intervention Image to manipulate our images!

Note: We talked about Intervention Image earlier and this will be your first use of it.

Let’s start by telling Intervention Image where our image is. First, open the ImagesController and
find:

1 if ($request->hasFile('image')) {
2
3 $file = $request->file('image');
4
5 $name = $file->getClientOriginalName();
6
7 $file->move(public_path().'/images/', $name);

Add below:
Chapter 1: Back End Recipes 60

1 $imagePath = public_path().'/images/'.$name;

When we have the path of our image, this is how we resize the image:

1 $image = Image::make($imagePath)->resize(1000, 250)->save();

Now try to upload the image again and check its size. The image should be resized to 1000x250 px:

New image size

Super simple stuff!

The beauty of Intervention Image is that you can do many things more: crop, blur, flip, sharpen,
etc.
Don’t forget to take a look at the Intervention Image’s API:
http://image.intervention.io²⁵
Now let’s try to use one more API:

1 $image = Image::make($imagePath)->resize(1000, 250)->greyscale()->save();

Greyscale API

²⁵http://image.intervention.io/
Chapter 1: Back End Recipes 61

As you see, the image has been converted to grayscale!

This is what’s so cool about Intervention Image!

Recipe 6 Wrap-up
Tag: Version 0.4 - Recipe 6²⁶

Image upload is a hard concept to grasp if you are new to Laravel development. However, by using
Intervention Image and Laravel Request, we have just created our first image upload function! As
you see, the syntax is fairly straightforward.

Recipe 7 - Seeding Your App Using Faker

What will we learn?

This recipe shows you how to use Faker - a popular PHP library - to generate fake data for testing
purposes.

What is Faker?
Faker is a PHP library that we use to generate dummy data. It can be used to generate all sorts of
data for testing purposes or bootstrapping our applications.
If you’re using Laravel 5.1 or newer, the Faker library has been already installed by default.
If you’re an old version of Laravel, you can install Faker by running this Composer command:

1 composer require fzaninotto/faker

Faker can be used to generate:

• Random Digit
• Word
• Paragraph
• Name
• City
• Year
• Domain Name
• Credit Card Number
²⁶https://github.com/LearningLaravel/cookbook/releases/tag/v0.4
Chapter 1: Back End Recipes 62

… and many more.

For more information, please visit Faker’s official documentation:
https://github.com/fzaninotto/Faker²⁷

Creating blog posts using Faker

Here is a quick overview of how to use Faker.
The first step is creating our Post model and its migration:

1 php artisan make:model Post -m

Note: You can generate the Post model and its migration at the same time by adding
the -m option.

Open timestamp_create_posts_table.php, which can be found in the migrations directory. Update

the up method and the down method as follows:

1 public function up()

2 {
3 Schema::create('posts', function (Blueprint $table) {
4 $table->increments('id');
5 $table->string('title', 255);
6 $table->text('content');
7 $table->string('slug')->nullable();
8 $table->tinyInteger('status')->default(1);
9 $table->integer('user_id');
10 $table->timestamps();
11 });
12 }
13
14 public function down()
15 {
16 Schema::drop('posts');
17 }

Don’t forget to run:

²⁷https://github.com/fzaninotto/Faker
Chapter 1: Back End Recipes 63

1 php artisan migrate

Your database should now have a new posts table.

Just like we create our Post model, run this command to create a new PostsTableSeeder file:

1 php artisan make:seeder PostsTableSeeder

Open the app/database/seeds/PostsTableSeeder.php file, update the run method as follows:

1 public function run()

2 {
3 $faker = Faker::create();
4
5 foreach(range(1,20) as $index)
6 {
7 $title = $faker->text(80);
8
9 Post::create([
10 'title' => $title,
11 'content' =>$faker->paragraph(30),
12 'slug' => Str::slug($title, '-'),
13 'status' => 1,
14 'user_id' => $faker->numberBetween($min = 1, $max = 5),
15 ]);
16 }
17
18 }

It’s very easy to understand, right?

Find:

1 class PostsTableSeeder extends Seeder

Add above:

1 use App\Post;
2 use Faker\Factory as Faker;
3 use Illuminate\Support\Str;

In our app/database/seeds/DatabaseSeeder.php, update the run method as follows:

Chapter 1: Back End Recipes 64

1 public function run()

2 {
3 $this->call(PostsTableSeeder::class);
4 }

The last part needed to seed data is to run this Artisan command:

1 php artisan db:seed

Check your database, you should see 20 new posts:

20 new posts

Display all blog posts

Once we have the dummy data, we can create a blog page to view all blog posts.
Let’s register a blog route by adding the following code to our routes.php file:

1 Route::get('/blog', 'BlogController@index');

We would need to create the BlogController:

1 php artisan make:controller BlogController

Insert the following code into it:

Find:

1 class BlogController extends Controller

Tell Laravel that you want to use the Post model in this controller. Add above:
Chapter 1: Back End Recipes 65

1 use App\Post;

Next, add the index action:

1 public function index()

2 {
3 $posts = Post::all();
4 return view('blog.index', compact('posts'));
5 }

Create a new index view at views/blog directory. The following are the contents of the views/blog/in-
dex.blade.php file:

1 @extends('master')
2 @section('title', 'Blog')
3 @section('content')
4
5 <div class="container col-md-8 col-md-offset-2">
6
7 @if (session('status'))
8 <div class="alert alert-success">
9 {{ session('status') }}
10 </div>
11 @endif
12
13 @if ($posts->isEmpty())
14 <p> There is no post.</p>
15 @else
16 @foreach ($posts as $post)
17 <div class="panel panel-default">
18 <div class="panel-heading">{!! $post->title !!}</div>
19 <div class="panel-body">
20 {!! mb_substr($post->content,0,500) !!}
21 </div>
22 </div>
23 @endforeach
24 @endif
25 </div>
26
27 @endsection
Chapter 1: Back End Recipes 66

We use mb_substr (Multibyte String) function to display only 500 characters of the post.
If you want to learn more about the function, visit:
http://php.net/manual/en/function.mb-substr.php²⁸
We should add a blog link to our navigation bar to access the blog page faster. Open shared/-
navbar.blade.php and find:

1 <li><a href="/about">About</a></li>

Add above:

1 <li><a href="/blog">Blog</a></li>

Head over to your browser and visit the blog page.

The blog page

Recipe 7 Wrap-up
Tag: Version 0.5 - Recipe 7²⁹
²⁸http://php.net/manual/en/function.mb-substr.php
²⁹https://github.com/LearningLaravel/cookbook/releases/tag/v0.5
Chapter 1: Back End Recipes 67

You now know how to use Faker to generate good-looking dummy data!
This technique can be applied to more than just posts. You can use it to create larger applications
and test your apps.

Recipe 8 - Pagination

What will we learn?

We will learn how to implement pagination in your Laravel application.

Simple pagination
Recently, we showed all blog posts in one page. Eventually, if thousands of posts are posted, this will
become problematic. Pagination is a good solution to this overload issue.
As you may know, creating pagination from scratch is not an easy task. Luckily, Laravel has a
paginate method that we can use to create the pagination without having to write any extra code.
Let’s open our BlogController, find:

1 $posts = Post::all();

Replace with:

1 $posts = Post::paginate(10);

As you see, we use the paginate method to create the pagination. This will return an instance of
IlluminatePaginationLengthAwarePaginator.
Alternatively, you can use the new simplePaginate method. This will return an instance of
IlluminatePaginationPaginatorThis Paginator class.

1 $posts = Post::simplePaginate(10);

These objects provide several useful methods that we can use to customize and display our
pagination.
I want to display 10 posts on a page, so I put 10 as the parameter.
If you would like to use Query Builder, you may write:
Chapter 1: Back End Recipes 68

1 $posts = DB::table('posts')->paginate(10);

For more information, be sure to read the official documentation:

https://laravel.com/docs/master/pagination
Next, open the blog/index.blade.php view and find:

1 @if ($posts->isEmpty())
2 <p> There is no post.</p>
3 @else
4 @foreach ($posts as $post)
5 <div class="panel panel-default">
6 <div class="panel-heading">{!! $post->title !!}</div>
7 <div class="panel-body">
8 {!! mb_substr($post->content,0,500) !!}
9 </div>
10 </div>
11 @endforeach
12 @endif

Add below:

1 {!! $posts->render() !!}

Good job!
Let’s give our brand new pagination system a try:

Pagination

If you use the simplePaginate method, you should now see something like this:

Simple Pagination
Chapter 1: Back End Recipes 69

Additional helper methods

The Paginator instances also have many useful methods that you can access:

• $posts->count()
• $posts->currentPage()
• $posts->hasMorePages()
• $posts->lastPage() (Not available when using simplePaginate)
• $posts->nextPageUrl()
• $posts->perPage()
• $posts->previousPageUrl()
• $posts->total() (Not available when using simplePaginate)
• $posts->url($page)

As Laravel is constantly updated, be sure to check the documentation to know all latest helper
methods:
https://laravel.com/docs/master/pagination³⁰

Ajax pagination
When creating Ajax pagination, we will need to return the pagination as JSON. The Paginator
classes implement the IlluminateContractsSupportJsonableInterface contract and have toJson
method. That means you can easily convert the result instance to JSON by simply returning it from
a route or controller action.
Let’s try to return the pagination as JSON from our BlogController’s index action:

1 use Response;
2 class BlogController extends Controller
3 {
4 public function index()
5 {
6 $posts = Post::paginate(10);
7 $response = Response::json($posts,200);
8 return $response;
9 }
10 }

³⁰https://laravel.com/docs/master/pagination
Chapter 1: Back End Recipes 70

Here is the new blog:

Retuning the pagination as JSON

Now let’s try to return the instance from a route. Open our routes.php file, add a new route:

1 Route::get('json', function () {
2 return App\Post::paginate();
3 });

Visit cookbook.app/json, you should see:

Chapter 1: Back End Recipes 71

Retuning the pagination as JSON from a route

Recipe 8 Wrap-up
Tag: Version 0.6 - Recipe 8³¹

Great! Having the knowledge of the above will let you create a simple pagination or ajax pagination
in no time.
Now this won’t do much for our app yet, but these techniques can be used to build many applications
in all sorts of different styles.

Recipe 9 - Testing Your App

What will we learn?

No code is safe! This recipe shows you how to do testing to make sure that everything is working
like it’s supposed to.

Why should we do testing?

Most of the time, you can successfully deploy and run your apps without any problems. Unfortu-
nately, sometimes things might go terribly horribly wrong. That’s when you need testing skills to
pinpoint at the right issues.
³¹https://github.com/LearningLaravel/cookbook/releases/tag/v0.6
Chapter 1: Back End Recipes 72

Testing is really boring and there’s a lot of code which is hard to unit test properly. That is true.
However, not having a comprehensive test suite means that our applications may not meet the
stated requirements and we’re taking more risks.

“Even good programmers make mistakes. The difference between a good programmer
and a bad one is that a good one detects it sooner by using automated tests” - Sebastian
Bergmann

That may sound a bit exaggerated, but we should know how to write and test our code effectively
to improve the quality of our applications.
To beginners of Laravel, testing can truly seem like a very difficult job. But don’t worry.
Remember that, if you can write PHP, you can write tests.
Now let’s get started and talk more about these concepts as we go along!

Manual testing and automated testing

There are many ways to test your app. When talking about testing, people usually think about
automated test, but we can always go for a manual testing approach as well.

• Manual Testing: is the process of running series of tasks manually to find the defects in our
applications.
• Automated Testing: is the process of using automated tools to run tests based on algorithms
to check your applications.

There are different types of automated tests. Here are the popular ones:

• Unit tests
• Integration tests
• Acceptance tests (aka Functional tests)

In this recipe, we will talk about some useful tools and techniques that we can use to manually test
our app. We also learn about PHPUnit and write some automated tests to check our application.

dd(), var_dump(), print_r() and Kint

Laravel has a popular helper function that we can use to display structured information of the
given variable and stop the script’s execution: dd().
Now let’s open our BlogController, and add this function to our index action:
Chapter 1: Back End Recipes 73

1 public function index()

2 {
3 $posts = Post::paginate(10);
4 dd($posts);

Visit our blog to see the changes:

Use dd() function

Using the paginate method, we will receive an instance of IlluminatePaginationLengthAwarePag-

inator. The dd() function helps us to see the contents of the instance. If you don’t get the instance
or the information is not correct, then your app is probably having a bug somewhere.
As you see, we can read the title and content of our posts (and many things more) without using
Chapter 1: Back End Recipes 74

views to display it.

We can also use the dd() function to dump the response object as well:

1 $response = Response::json($posts,200);
2 dd($response);

Or we can just display a simple text:

1 dd("This is a test");

Amazing, right?
You’ll be using this function a lot since it’s very useful for showing off data and debugging our app.
Alternatively, we can use var_dump() and print_r() PHP function to display the information about
a variable. These functions are very useful when working with arrays.
W3resouce has a really good tutorial about them, you may check it out at:
http://www.w3resource.com/php/function-reference/var_dump.php³²
Recently, Kint - a powerful and modern PHP debugging tool - is also becoming very popular.
It’s a good replacement for var_dump() and print_r(). Using Kint in conjunction with the dd()
function is a powerful combination.
You can install Kint by simply running this Composer command:

1 composer require raveren/kint

Or add it into your composer.json file.

1 "require": {
2 "raveren/kint": "^1.0"
3 }

For more information, check out Kint’s official home page:

https://github.com/raveren/kint³³
³²http://www.w3resource.com/php/function-reference/var_dump.php
³³https://github.com/raveren/kint
Chapter 1: Back End Recipes 75

Useful tools, extensions and packages

As PHP is the most popular open source server-side scripting language, it has ready-to-use tools,
well-supported extensions, and free packages that can help us properly test, debug and optimize our
application.
Here is a list of interesting tools that I use when developing different types of applications:
Developer Tools:³⁴ The Developer Tools are part of the open source Webkit project. They are
bundled and available in Chrome, Safari, Opera and any Webkit browser. If you’re using Chrome,
you should use Chrome Developer Tools (aka Chrome DevTools). The tools let you do many
things: inspect elements, view raw html/css, manipulate DOM, debug local browser storage, etc.
You can open the DevTools by right click and choose Inspect or use this shortcut: Ctrl + Shift +
I (Windows), F12 (Windows), or Cmd + Opt + I (Mac)

Chrome DevTools

Want to learn how to use Devtools? CodeSchool has a nice video course about it (free):
http://discover-devtools.codeschool.com³⁵
You may also check the Chrome Devtools’ documentation:
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts ³⁶
vardumpling() extension:³⁷ This Google Chrome extension beautifies your var_dumps and makes
them easier to read.
³⁴https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts
³⁵http://discover-devtools.codeschool.com
³⁶https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts
³⁷https://chrome.google.com/webstore/detail/vardumpling/aikblkmigebodlhkdepmfmgdgmbokkdn
Chapter 1: Back End Recipes 76

vardumpling

JSON Formatter extension:³⁸ Similar to the vardumpling extension, if you want to view JSON files
directly on your browser, you’ll love this Chrome’s plugin.
³⁸https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa
Chapter 1: Back End Recipes 77

JSON Formatter

Postman:³⁹ This is the most popular extension for working with APIs. Postman helps us build, test,
and document APIs faster.
³⁹https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en
Chapter 1: Back End Recipes 78

Postman

Clockwork:⁴⁰ Chrome DevTools doesn’t support PHP by default, but we can extend the DevTools
with a new panel that supports PHP and Laravel. Once installed, we can debug, view cookies/sessions
data, run database queries, etc.
⁴⁰https://chrome.google.com/webstore/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp
Chapter 1: Back End Recipes 79

Clockwork

Laravel Debug Bar:⁴¹ Laravel Debugbar is one of the best Laravel packages. It adds a “debug bar”
to our application. Using the bar, we can view all important information of our site, such as: queries,
routes, views, collections, etc.
It’s very easy to install the package. First, run this Composer command:

1 composer require barryvdh/laravel-debugbar

After that, open your config/app.php file and add Debugbar’s ServiceProvider to the providers
array:

1 Barryvdh\Debugbar\ServiceProvider::class,

Next, add the Debugbar facade to the aliases array:

1 'Debugbar' => Barryvdh\Debugbar\Facade::class,

Finally, run this command to generate Debugbar’s config file:

⁴¹https://github.com/barryvdh/laravel-debugbar
Chapter 1: Back End Recipes 80

1 php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

Go ahead and view our app in the browser, you’ll see a nice debug bar:

Debugbar

You may read the official Debugbar documentation at:

https://github.com/barryvdh/laravel-debugbar⁴²
There are many other tools, extensions, and packages. If you have a good one, feel free to send us
an email, I’ll add it to the list.
It’s time to create some tests!

Running tests with PHPUnit

When talking about a PHP testing framework, people usually think about PHPUnit.
PHPUnit is one of the most widely-used PHP testing frameworks. The great news is, Laravel 5 ships
with PHPUnit out of the box. It’s now a part of the Laravel core. That means we can write some unit
tests right away without worrying about setting everything up. There are some convenient helper
methods and example files for us to use as well.
In the root of your application, there is a file called phpunit.xml. This is the PHPUnit’s configura-
tion file.

⁴²https://github.com/barryvdh/laravel-debugbar
Chapter 1: Back End Recipes 81

1 <?xml version="1.0" encoding="UTF-8"?>

2 <phpunit backupGlobals="false"
3 backupStaticAttributes="false"
4 bootstrap="bootstrap/autoload.php"
5 colors="true"
6 convertErrorsToExceptions="true"
7 convertNoticesToExceptions="true"
8 convertWarningsToExceptions="true"
9 processIsolation="false"
10 stopOnFailure="false">
11 <testsuites>
12 <testsuite name="Application Test Suite">
13 <directory>./tests/</directory>
14 </testsuite>
15 </testsuites>
16 <filter>
17 <whitelist>
18 <directory suffix=".php">app/</directory>
19 </whitelist>
20 </filter>
21 <php>
22 <env name="APP_ENV" value="testing"/>
23 <env name="CACHE_DRIVER" value="array"/>
24 <env name="SESSION_DRIVER" value="array"/>
25 <env name="QUEUE_DRIVER" value="sync"/>
26 </php>
27 </phpunit>

By looking at the following:

1 <testsuite name="Application Test Suite">

2 <directory>./tests/</directory>
3 </testsuite>

you may know that all our test files are placed in the tests directory.
Let’s go to the tests directory, we should see two files:
TestCase.php:
Chapter 1: Back End Recipes 82

1 <?php
2
3 class TestCase extends Illuminate\Foundation\Testing\TestCase
4 {
5 /**
6 * The base URL to use while testing the application.
7 *
8 * @var string
9 */
10 protected $baseUrl = 'http://localhost';
11
12 /**
13 * Creates the application.
14 *
15 * @return \Illuminate\Foundation\Application
16 */
17 public function createApplication()
18 {
19 $app = require __DIR__.'/../bootstrap/app.php';
20
21 $app->make(Illuminate\Contracts\Console\Kernel::class)->bootstrap();
22
23 return $app;
24 }
25 }

Basically, we don’t need to worry about this file, it’s just a base class. If we want to write new
tests, simply extend this TestCase class.
If you want to use a different URL while testing your application, you may change the URL here.
ExampleTest.php:

1 <?php
2
3 use Illuminate\Foundation\Testing\WithoutMiddleware;
4 use Illuminate\Foundation\Testing\DatabaseMigrations;
5 use Illuminate\Foundation\Testing\DatabaseTransactions;
6
7 class ExampleTest extends TestCase
8 {
9 /**
10 * A basic functional test example.
Chapter 1: Back End Recipes 83

11 *
12 * @return void
13 */
14 public function testBasicExample()
15 {
16 $this->visit('/')
17 ->see('Laravel 5');
18 }
19 }

This is a testing class. In PHPUnit, we call it “a test case”.

A test case is a term for a class that contains different tests. All the tests usually have the same
functionality.
As mentioned above, we need to have our test class extend the TestCase class.

1 public function testBasicExample()

2 {
3 $this->visit('/')
4 ->see('Laravel 5');
5 }

This is a test. As you see, it’s just a method. If you write a new method (a new test), your method
must be public and you must start them with test. It’s a naming convention.
By reading the testBasicExample test, can you guess what it does?
Very simple! It says: “Visit our home page (/) and see the words Laravel 5”.
Now, let’s try to run our first test!
Vagrant ssh into your homestead, navigate to your app, and run this command:

1 vendor/bin/phpunit

Because we don’t have the words Laravel 5 on our home page, the test should fail.
We should see a red message.

First test

Next, let’s open our home view and find:

Chapter 1: Back End Recipes 84

1 <div class="panel-heading">Dashboard</div>

Replace with:

1 div class="panel-heading">Laravel 5</div>

Run the test again:

1 vendor/bin/phpunit

Second test

Now our example test shows a passing test.

We should see a green message.

PHPUnit documentation and Laravel’s PHPUnit methods

If you want to learn more about PHPUnit methods and how to use them. I encourage you to spend
some time reading PHPUnit’s documentation⁴³.
The PHPUnit’s documentation is wonderful. It’s just like a book and it’s totally free.
Laravel also has some additional assertion methods for PHPUnit tests that we can use:

• ->assertResponseOk(): Assert that the client response has an OK status code.

• ->assertResponseStatus($code): Assert that the client response has a given code.
• ->assertViewHas($key, $value = null): Assert that the response view has a given piece of
bound data.
• ->assertViewHasAll(array $bindings); Assert that the view has a given list of bound data.
⁴³https://phpunit.de/manual/current/en/writing-tests-for-phpunit.html#writing-tests-for-phpunit.test-dependencies
Chapter 1: Back End Recipes 85

• ->assertViewMissing($key): Assert that the response view is missing a piece of bound data.
• ->assertRedirectedTo($uri, $with = []): Assert whether the client was redirected to a given
URI.
• ->assertRedirectedToRoute($name, $parameters = [], $with = []): Assert whether the client
was redirected to a given route.
• ->assertRedirectedToAction($name, $parameters = [], $with = []): Assert whether the
client was redirected to a given action.
• ->assertSessionHas($key, $value = null): Assert that the session has a given value.
• ->assertSessionHasAll(array $bindings): Assert that the session has a given list of values.
• ->assertSessionHasErrors($bindings = [], $format = null): Assert that the session has errors
bound.
• ->assertHasOldInput(): Assert that the session has old input.

I get these methods from the testing section of Laravel’s documentation⁴⁴. Be sure to check it out!

Writing our first PHPUnit test

To better understand PHPUnit, let’s try to create a new test case.
To create a new test case, use the following command:

1 php artisan make:test BlogTest

Check the tests directory, we should see a new BlogTest.php file.

1 <?php
2
3 use Illuminate\Foundation\Testing\WithoutMiddleware;
4 use Illuminate\Foundation\Testing\DatabaseMigrations;
5 use Illuminate\Foundation\Testing\DatabaseTransactions;
6
7 class BlogTest extends TestCase
8 {
9 /**
10 * A basic test example.
11 *
12 * @return void
13 */
14 public function testExample()
15 {

⁴⁴https://laravel.com/docs/master/testing
Chapter 1: Back End Recipes 86

16 $this->assertTrue(true);
17 }
18 }

We don’t need the testExample method, so just remove it and write our new test:

1 public function testBlogResponseIsValid()

2 {
3 $this->visit('/blog')
4 ->assertResponseOk();
5 }

As you see, the name of our test is testBlogResponseIsValid.

Our blog’s response should have an OK status code (200). Of course, the test would fail if the
response is not valid (return other status code).
This is a pretty standard process to us by now. Run PHPUnit again:

1 vendor/bin/phpunit

Open our BlogController, if the response has the 200 status code…

1 $response = Response::json($posts,200);
2 return $response;

…the test case is green and everything passes.

If we modify the response, we should see:

Second test

Another thing to note is that we can use multiple methods to create our test:
Chapter 1: Back End Recipes 87

1 public function testBlogResponseIsValid()

2 {
3 $this->visit('/')
4 ->click('Blog')
5 ->see('current_page')
6 ->assertResponseOk();
7 }

Recipe 9 Wrap Up
Tag: Version 0.7 - Recipe 9⁴⁵

Up to this point, we have learned some useful testing techniques and created several unit tests.
You should be able to test your application effectively now.
Remember that, the more tests that you create, the more your testing skills will be improved.
Practice makes perfect.

Recipe 10 - Writing APIs with Laravel

What will we learn?

This recipe shows you how to build a REST API on top of our Laravel application. We can then use
our app as a backend service for mobile applications or AJAX-based client applications.

What is REST API?

API stands for Application Program Interface. Simply put, an API is an interface for coders to
communicate with applications.
API acts just like a middleware. When we send requests to an API, it checks the requests. If the
requests are allowed, data will be returned. Proper responses are also returned to let us know the
result of our requests.
Using APIs, we can effectively create a backend service that supports many types of applications.
Developers can change the look and feel of their apps frequently without worrying about breaking
the apps.
REST stands for Representational State Transfer. It’s a style of web architecture. Basically, REST
is just a set of agreements and constraints on how components should work together.
⁴⁵https://github.com/LearningLaravel/cookbook/releases/tag/v0.7
Chapter 1: Back End Recipes 88

When APIs use REST architecture, they are called REST APIs (aka RESTful APIs).
A typical REST API has these following constraints⁴⁶:

• Client - server: Servers (back end) and clients (front end) can be developed independently.
• Stateless: Session state should be stored on the client. Client data should not be stored on the
server between requests.
• Cacheable: Client can cache responses to improve scalability and performance.

REST API use HTTP requests to communicate with the servers. Each request specifies a certain
HTTP verb in the request header, such as:

1 GET /posts HTTP/1.1

There are many HTTP verbs, but the most popular ones for building REST APIs are:

• GET
• POST
• PUT
• DELETE

Creating an API endpoint

The API endpoint is a URL that we use to connect and send requests to our application. Every
dataset or individual data record of our application has its own endpoint.
Example Imgur⁴⁷ API’s endpoints:
⁴⁶https://en.wikipedia.org/wiki/Representational_state_transfer#cite_note-Fielding-Ch5-4
⁴⁷http://www.imgure.com
Chapter 1: Back End Recipes 89

Imgur API

In this section, let’s move onto creating a new endpoint that lists all blog posts.
Chapter 1: Back End Recipes 90

First, we will add a new route. Open routes.php and add:

1 Route::resource('posts', 'PostsController');

As you see, we don’t use Route::get or Route::post here, we use Route:resource. In Laravel, this is
a resourceful route.
This route tells Laravel to create multiple routes to handle a variety of RESTful actions on the
posts resource.
Simply put, instead of creating multiple routes manually:

1 Route::get('posts', 'PostsController@index');
2 Route::post('posts', 'PostsController@store');
3 ...

we may just use a resourceful route and Laravel will automatically generate all the related routes
for us.
Once again, when having a new route, we may need a new controller.
We don’t have the PostsController yet. Let’s create one by running this Artisan command:

1 php artisan make:controller PostsController --resource

By adding a –resource flag, Laravel generates a new resource controller for us, instead of a plain
controller.

Note: If you’re using older versions of Laravel, a resource controller is generated by

default.

1 <?php
2
3 namespace App\Http\Controllers;
4
5 use Illuminate\Http\Request;
6
7 use App\Http\Requests;
8 use App\Http\Controllers\Controller;
9
10 class PostsController extends Controller
11 {
Chapter 1: Back End Recipes 91

12 /**
13 * Display a listing of the resource.
14 *
15 * @return \Illuminate\Http\Response
16 */
17 public function index()
18 {
19 //
20 }
21
22 /**
23 * Show the form for creating a new resource.
24 *
25 * @return \Illuminate\Http\Response
26 */
27 public function create()
28 {
29 //
30 }
31
32 /**
33 * Store a newly created resource in storage.
34 *
35 * @param \Illuminate\Http\Request $request
36 * @return \Illuminate\Http\Response
37 */
38 public function store(Request $request)
39 {
40 //
41 }
42
43 /**
44 * Display the specified resource.
45 *
46 * @param int $id
47 * @return \Illuminate\Http\Response
48 */
49 public function show($id)
50 {
51 //
52 }
53
Chapter 1: Back End Recipes 92

54 /**
55 * Show the form for editing the specified resource.
56 *
57 * @param int $id
58 * @return \Illuminate\Http\Response
59 */
60 public function edit($id)
61 {
62 //
63 }
64
65 /**
66 * Update the specified resource in storage.
67 *
68 * @param \Illuminate\Http\Request $request
69 * @param int $id
70 * @return \Illuminate\Http\Response
71 */
72 public function update(Request $request, $id)
73 {
74 //
75 }
76
77 /**
78 * Remove the specified resource from storage.
79 *
80 * @param int $id
81 * @return \Illuminate\Http\Response
82 */
83 public function destroy($id)
84 {
85 //
86 }
87 }

Believe it or not, by just running two commands, we have all RESTful routes and actions that we
need to make an API endpoint.
To make sure that we have all the posts’ routes, you can list all your application’s routes by running
the following command:

1 php artisan route:list

Chapter 1: Back End Recipes 93

Posts’ routes

Here is a list of actions handled by the generated resource controller:

Posts’ routes

If you want to learn more about RESTful resource controllers, you may take a look at the official
documentation⁴⁸.
Next, open PostsController and update the index action as follows:

⁴⁸https://laravel.com/docs/master/controllers#restful-resource-controllers
Chapter 1: Back End Recipes 94

1 public function index()

2 {
3 $posts = Post::all();
4 $response = Response::json($posts,200);
5 return $response;
6 }

Alternatively, you may use the following:

1 public function index()

2 {
3 $posts = Post::all();
4 return $posts;
5 }

Go ahead and visit http://cookbook.app/posts⁴⁹, you should see all the blog posts in JSON format:

posts route

Great! We have our first API endpoint!

However, we need to do one more thing.
⁴⁹http://cookbook.app/posts
Chapter 1: Back End Recipes 95

Our API will likely change over time. One day, we may need to change our code significantly to
add more features or restructure our application. Therefore, we should version our API from the
beginning.
As you know, Laravel 5.2 has introduced a new feature called middleware groups and we’ve used
the web middleware group in previous recipes. Let’s open the app/Http/Kernel.php file:

1 protected $middlewareGroups = [
2 'web' => [
3 \App\Http\Middleware\EncryptCookies::class,
4 \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
5 \Illuminate\Session\Middleware\StartSession::class,
6 \Illuminate\View\Middleware\ShareErrorsFromSession::class,
7 \App\Http\Middleware\VerifyCsrfToken::class,
8 ],
9
10 'api' => [
11 'throttle:60,1',
12 ],
13 ];

As you see, there is another middleware group called api. When building APIs with Laravel 5.2 (or
newer), it’s better to utilize this middleware group.
Open routes.php, add our posts resourceful route into the api middleware group:

1 Route::group(['prefix' => 'api/v1', 'middleware' => 'api'], function(){

2 Route::resource('posts', 'PostsController');
3 });

In order to version our API, we also add the prefix (api/v1) to the group. Now we can access our
first API endpoint at http://cookbook.app/api/v1/posts⁵⁰.
In the future, if we want to develop a new version of our APIs, all we have to do is creating a new
middleware group!
Another thing to note, you may see the words throttle:60,1 in the api middleware group:

1 'api' => [
2 'throttle:60,1',
3 ],

Well, it’s the API rate limiting feature of Laravel. If a user (or a bot) is hitting our API endpoint
a million times a minute, our application would be still running fine. When they try to make too
many requests in a short time, they will get this message:
⁵⁰http://cookbook.app/api/v1/posts
Chapter 1: Back End Recipes 96

1 429: Too Many Attempts

The default throttle allows users to make 60 requests per minute. They can’t access our application
for one minute if they hit the limit.
Feel free to change the limit to whatever you want.

Using Postman to test our API

As mentioned before, when working with APIs, we should use Postman⁵¹ - a Google Chrome
extension.
Postman has many features and amazing interface that help us to test our APIs faster. Using Postman,
we can send GET, POST, PUT, PATCH, and DELETE request to test our APIs effectively.
Once installed, open Postman and choose GET (which means GET request).
Enter the URL of our API (http://cookbook.app/api/v1/posts) into the input box. Finally, click the
blue Send button.

Postman

⁵¹https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en
Chapter 1: Back End Recipes 97

Pretty simple so far, right?

The output is very useful. We can see the status code (200), the execution time (795 ms) and our
posts data in pretty JSON format.

Pagination
Usually, we don’t want to display all posts at once. As you may have guessed, we can easily paginate
our posts by using the paginate method.
Open PostsController and update the index action as follows:

1 public function index()

2 {
3 $posts = Post::paginate(10);
4 $response = Response::json($posts,200);
5 return $response;
6 }
Chapter 1: Back End Recipes 98

Pagination

Status Code
After sending requests, we usually get back a message with a status code. This status code is called
HTTP Response Code. It’s very important to understand those status codes because they are used
to express various success and failure states of our application.
You may view a list of response codes here:
https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html⁵²
These are the most common ones:

• 100: Continue - The client should continue with its request.

• 200: OK - The request has succeeded.
⁵²https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
Chapter 1: Back End Recipes 99

• 201: Created - The request has been fulfilled and resulted in a new resource being created.
• 202: Accepted - The request has been accepted for processing, but the processing has not been
completed.
• 204: No Content - The server has fulfilled the request but does not need to return an entity-
body, and might want to return updated metainformation.
• 301: Moved Permanently - The requested resource has been assigned a new permanent URI
and any future references to this resource should use one of the returned URIs.
• 302: Moved Temporarily - The requested resource resides temporarily under a different URI.
• 400: Bad Request - The request could not be understood by the server due to malformed
syntax.
• 401: Unauthorized - The request requires user authentication.
• 403: Forbidden - The server understood the request, but is refusing to fulfill it.
• 404: Not Found - The server has not found anything matching the Request-URI.
• 500: Internal Server Error - The server encountered an unexpected condition which prevented
it from fulfilling the request.

Getting a single post

Now that you know about the response code. Let’s try to send a GET request to grab a single post.
The API endpoint should be /posts/{postid} and the action that we use is show.
Open PostsController and update the show action as follows:

1 public function show($id)

2 {
3 $post= Post::find($id);
4
5 if(!$post){
6 $response = Response::json([
7 'error' => [
8 'message' => 'This post cannot be found.'
9 ]
10 ], 404);
11 return $response;
12 }
13
14 $response = Response::json($post
15 , 200);
16 return $response;
17 }
Chapter 1: Back End Recipes 100

Open Postman. Enter this URL: http://cookbook.app/api/v1/posts/2⁵³, and hit Send.

This is how we can get a post by using its id.

1 single post

Cool! Now we have the post and the status code is 200. Everything’s working fine.
If we enter a wrong id, we should get this message:

Wrong id

Now the status code is 404. We know that the post doesn’t exist.

Adding a new post using POST request

Just like we created the API endpoint to grab data, we will use POST request to insert a new post.
The API endpoint should be /posts and the action that we use is store.
⁵³http://cookbook.app/api/v1/posts/2
Chapter 1: Back End Recipes 101

Open PostsController, update the store action as follows:

1 public function store(Request $request)

2 {
3 if((!$request->title) || (!$request->content)){
4
5 $response = Response::json([
6 'error' => [
7 'message' => 'Please enter all required fields'
8 ]
9 ], 422);
10 return $response;
11 }
12
13 $post = new Post(array(
14 'title' => $request->title,
15 'content' => $request->content,
16 'slug' => Str::slug($request->title, '-'),
17 ));
18
19 $post->save();
20
21 $response = Response::json([
22 'message' => 'The post has been created succesfully',
23 'data' => $post,
24 ], 201);
25
26 return $response;
27 }

Open our Post model (app/Post.php):

1 <?php
2
3 namespace App;
4
5 use Illuminate\Database\Eloquent\Model;
6
7 class Post extends Model
8 {
9 protected $fillable = [
10 'title', 'content', 'slug', 'status',
Chapter 1: Back End Recipes 102

11 ];
12
13 }

The $fillable property should have the following: title, content, slug, status.
Be sure that we’ve told Laravel to use Str and Request:

1 <?php
2
3 namespace App\Http\Controllers;
4
5 use Illuminate\Http\Request;
6
7 use App\Http\Requests;
8 use App\Http\Controllers\Controller;
9
10 use App\Post;
11 use Response;
12 use Illuminate\Support\Str;
13
14 class PostsController extends Controller
15 {

Now open Postman and try to send a POST request:

Error message when creating post

If we only enter the title, there should be an error message. The status code is 422.
If we enter everything correctly, we should be able to create a new post:
Chapter 1: Back End Recipes 103

The post is created successfully

Updating a post
Now that we have created a new post. Let’s look at how we can use PUT request to update a post.
The API endpoint should be /posts/{postid} and the action that we use is update.
Open PostsController, update the update action as follows:

1 public function update(Request $request, $id)

2 {
3 if((!$request->title) || (!$request->content)){
4
5 $response = Response::json([
6 'error' => [
7 'message' => 'Please enter all required fields'
8 ]
9 ], 422);
10 return $response;
11 }
12
13 $post = Post::find($id);
14 $post->title = $request->title;
15 $post->content = $request->content;
16 $post->slug = Str::slug($request->title, '-');
Chapter 1: Back End Recipes 104

17 $post->save();
18
19 $response = Response::json([
20 'message' => 'The post has been updated.',
21 'data' => $post,
22 ], 200);
23
24 return $response;
25 }

Now open Postman. Select PUT.

Enter this URL: http://cookbook.app/api/v1/posts/2⁵⁴.
Choose x-www-form-urlencoded. Enter the title and content of your post.
Finally, hit Send.

The post is updated

The post is now updated!

Deleting a post
In our last section, we used PUT request to update our posts. We’ll follow the same process that we
used to delete a post, but this time, we use DELETE request.
The API endpoint should be /posts/{postid} and the action that we use is destroy.
Open PostsController and update the destroy action as follows:
⁵⁴http://cookbook.app/api/v1/posts/2
Chapter 1: Back End Recipes 105

1 public function destroy($id)

2 {
3 $post = Post::find($id);
4
5 if(!$post) {
6 $response = Response::json([
7 'error' => [
8 'message' => 'The post cannot be found.'
9 ]
10 ], 404);
11
12 return $response;
13 }
14
15 Post::destroy($id);
16
17 $response = Response::json([
18 'message' => 'The post has been deleted.'
19 ], 200);
20
21 return $response;
22 }

Now open Postman. Select DELETE.

Enter this URL: http://cookbook.app/api/v1/posts/2000⁵⁵.
Hit Send.

The post is updated

Because the post’s id is 2000, we should receive an error message.

⁵⁵http://cookbook.app/api/v1/posts/2000
Chapter 1: Back End Recipes 106

Now let’s try to run again, but this time, enter 5 as the post’s id.

The post is updated

The post is now deleted successfully.

Adding CORS
CORS⁵⁶ stands for Cross-Origin Resource Sharing, which is a mechanism that allows modern
browsers to send and receive restricted data (images, fonts, files, etc.) from a domain other than the
one that made the request.
Simply put, if we don’t enable CORS, we can’t access our API from other applications.
To enable CORS, we may build a custom middleware⁵⁷ to add CORS header to our response. This is
a simple method, but the simplest one is to use a popular package called laravel-cors⁵⁸.
To install the package, run this Composer command:

1 composer require barryvdh/laravel-cors

Once installed, open config/app.php and add the CorsServiceProvider to our providers array:

1 Barryvdh\Cors\ServiceProvider::class,

Next, open routes.php and add the cors middleware to our api middleware group:

1 Route::group(['prefix' => 'api/v1', 'middleware' => ['api', 'cors']], function(){

2 Route::resource('posts', 'PostsController');
3 });

That’s it!
Our API is now working properly!
⁵⁶https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
⁵⁷http://learninglaravel.net/laravel-51-easily-enable-cors
⁵⁸https://github.com/barryvdh/laravel-cors
Chapter 1: Back End Recipes 107

Chapter 10 Wrap-up
Tag: Version 0.8 - Recipe 10⁵⁹

Congratulations! There we have it! A Laravel application that can be used as a backend service for
mobile applications or AJAX-based websites.
Now let’s move onto Chapter 2. We will learn some front end recipes to improve user experience.
In the future, I’ll add more backend recipes, so that we can learn more about API and other Laravel
features.
This is just a beginning.
⁵⁹https://github.com/LearningLaravel/cookbook/releases/tag/v0.8
Chapter 2: Front End Recipes
Introduction
Whether you are a beginner or intermediate web developer, if you wish to make good interactive
web applications, then this chapter is for you.
In this chapter, you’ll be getting some recipes about front-end web technologies and popular front-
end tools. These recipes cover best practices and modern techniques for front-end development
such as: integrating Twitter Bootstrap, AJAX loading, notifications, file uploads, cropping images
and many more.
By the end, you should have a better understanding of how to work with AJAX, Jquery, front end
frameworks and responsive design. You can apply these techniques to build beautiful applications
and add that interactivity to any site you work on.

List Of Recipes

Frontend recipes
• Recipe 201 - Notifications
• Recipe 202 - Integrating Buttons With Built-in Loading Indicators
• Recipe 203 - Create A Registration Page Using AJAX and jQuery
• Recipe 204 - Create A Login Page Using AJAX And jQuery
• Recipe 205 - Upload Files Using AJAX And jQuery
• Recipe 206 - Cropping Images Using jQuery

(More recipes will be added later)

Recipe 201 - Notifications

What will we learn?

This recipe shows you how to integrate notifications into your Laravel application.

108
Chapter 2: Front End Recipes 109

Say hi to Sweet Alert

Nowadays, notifications become a very important functionality of our modern applications. By
integrating good looking notifications into our system, we will attract more users’ attention and
our app will definitely look nicer.
There are many notifications libraries, but the most popular ones are: HumanJS⁶⁰, HubSpot
Messaging Library⁶¹ and Sweet Alert⁶².
This recipe will focus on integrating Sweet Alert - which is an amazing library that aims to replace
JavaScript’s alert and prompt features.

SweetAlert

⁶⁰http://wavded.github.io/humane-js
⁶¹http://github.hubspot.com/messenger/docs/welcome/
⁶²http://t4t5.github.io/sweetalert
Chapter 2: Front End Recipes 110

Installing Sweet Alert

Installing Sweet Alert is pretty easy! There is a Laravel package called Easy Sweet Alert Messages
for Laravel⁶³. We can use this package to easily show Sweet Alert notifications in our Laravel
application.
First, open our composer.json file and add the following code into the require section:

1 "uxweb/sweet-alert": "~1.1"

Next, run composer update to install the package.

Open config/app.php, add the following code to the providers array:

1 UxWeb\SweetAlert\SweetAlertServiceProvider::class,

Then find the aliases array and add:

1 'Alert' => UxWeb\SweetAlert\SweetAlert::class,

Next, download the latest version of Sweet Alert⁶⁴.

Note: You may also use Sweet Alert 2⁶⁵.

Once downloaded, unzip (decompress) the file and go to sweetalert-master/dist.

Copy the sweetalert.min.js file to your public/js directory. Create the js directory if you don’t have
one.
Copy the sweetalert.css file to your public/css directory. Create the css directory if you don’t have
one.
Last step, open our master layout (resources/views/layouts/app.blade.php). Find:

1 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css\

2 /bootstrap-theme.min.css">

Add below:

⁶³https://github.com/uxweb/sweet-alert
⁶⁴https://github.com/t4t5/sweetalert/archive/master.zip
⁶⁵https://github.com/limonte/sweetalert2
Chapter 2: Front End Recipes 111

1 <link rel="stylesheet" href="/css/sweetalert.css">

Find:

1 </body>

Add above:

1 <script src="/js/sweetalert.min.js"></script>
2 @include('sweet::alert')

Our master layout should look like this:

1 <html>
2 <head>
3 <title> @yield('title') </title>
4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6\
5 /css/bootstrap.min.css">
6 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6\
7 /css/bootstrap-theme.min.css">
8 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/fo\
9 nt-awesome.min.css" rel='stylesheet'
10 type='text/css'>
11 <link rel="stylesheet" href="/css/sweetalert.css">
12
13 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
14 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.mi\
15 n.js"></script>
16 </head>
17 <body>
18
19 @include('shared.navbar')
20
21 @yield('content')
22
23 <script src="/js/sweetalert.min.js"></script>
24 @include('sweet::alert')
25 </body>
26 </html>

Sweet Alert is now ready to use!

If we want to customize the alert message partial, run:
Chapter 2: Front End Recipes 112

1 php artisan vendor:publish

A Sweet Alert view is now generated in our resources/views/vendor/sweet/ directory.

You can change the sweet alert configuration to your liking. Available options can be found at the
Sweet Alert documentation⁶⁶.

Our first Sweet Alert message

Here’s the moment we’ve been waiting for. Let’s create our first Sweet Alert notification.
Open routes.php and find:

1 return view('home');

Add above:

1 Alert::info('Welcome to our website', 'Hi! This is a Sweet Alert message!');

Done! Head over to our home page and refresh the page:
⁶⁶http://t4t5.github.io/sweetalert
Chapter 2: Front End Recipes 113

Our first Sweet Alert message

This is how we show our first notification! Very simple, isn’t it?
We’ve just used Sweet Alert Facade to display the notification. Alternatively, we may use Sweet
Alert Helper to accomplish the same result:
Find:

1 Alert::info('Welcome to our website', 'Hi! This is a Sweet Alert message!');

Replace with:

1 alert()->info('Welcome to our website', 'Hi! This is a Sweet Alert message');

Here is a list of Facade’s methods that we can use:

Chapter 2: Front End Recipes 114

1 Alert::message('Message', 'Optional Title');

2 Alert::basic('Basic Message', 'Mandatory Title');
3 Alert::info('Info Message', 'Optional Title');
4 Alert::success('Success Message', 'Optional Title');
5 Alert::error('Error Message', 'Optional Title');
6 Alert::warning('Warning Message', 'Optional Title');
7
8 Alert::basic('Basic Message', 'Mandatory Title')->autoclose(3500);
9
10 Alert::error('Error Message', 'Optional Title')->persistent('Close');

A list of Helper’s methods:

1 alert()->message('Message', 'Optional Title');

2 alert()->basic('Basic Message', 'Mandatory Title');
3 alert()->info('Info Message', 'Optional Title');
4 alert()->success('Success Message', 'Optional Title');
5 alert()->error('Error Message', 'Optional Title');
6 alert()->warning('Warning Message', 'Optional Title');
7
8 alert()->basic('Basic Message', 'Mandatory Title')
9 ->autoclose(3500);
10
11 alert()->error('Error Message', 'Optional Title')
12 ->persistent('Close');

Now let’s try to show different notifications:

1 alert()->success('Your product has been updated', 'Thank you')

2 ->persistent('Close');
Chapter 2: Front End Recipes 115

A successful notification

When adding persistent(‘Your Custom Text’), users must click the button to close the notification.

1 Alert::error('There is an error', 'Error')->autoclose(2000);

An error notification

When using autoclose(‘time’), the notification will be closed automatically after the defined time
has passed.
Chapter 2: Front End Recipes 116

Recipe 201 Wrap-up

Tag: Version 0.9 - Recipe 201⁶⁷

As you see, Sweet Alert is really a good package.

Using the techniques above will be a good foundation to build beautiful notifications for our
applications.
In the next recipes, we will be using Sweet Alert to provide textual feedback to our users.

Recipe 202 - Integrating Buttons With Built-in Loading

Indicators

What will we learn?

This recipe shows you how to place a spinner directly inside a button and create some cool buttons
with loading indicators.

Installing Ladda
When building modern applications, it’s important to provide some creative loading effects to
improve user experience. In this section, I’ll show you how to install Ladda⁶⁸ - a popular Javascrip-
t/Jquery plugin that we can use to make button loading effects.
⁶⁷https://github.com/LearningLaravel/cookbook/releases/tag/v0.9
⁶⁸https://github.com/hakimel/Ladda
Chapter 2: Front End Recipes 117

Ladda

You can test all the effects at:

http://lab.hakim.se/ladda⁶⁹
Be sure to disable the Sweet Alert notification if you don’t want to see it:
⁶⁹http://lab.hakim.se/ladda
Chapter 2: Front End Recipes 118

1 // Alert::error('There is an error', 'Error')->autoclose(2000);

Now, let’s install the plugin!

First, download the latest version of Ladda⁷⁰.
Once downloaded, unzip (decompress) the file and go to Ladda-1.0.0/dist.

Note: Your version of Ladda could be different.

Copy the spin.min.js file to your public/js directory.

Copy the ladda.min.js file to your public/js directory.
Copy the ladda-themeless.min.css file to your public/css directory.
Copy the ladda.min.css file to your public/css directory.

Note: Create the css and js directory if you don’t have.

Next, open our master layout (resources/views/layouts/app.blade.php). Find:

1 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css\

2 /bootstrap-theme.min.css">

Add below:

1 <link rel="stylesheet" href="/css/ladda-themeless.min.css">

Find:

1 </body>

Add above:

1 <script src="/js/spin.min.js"></script>
2 <script src="/js/ladda.min.js"></script>
3 <script src="/js/custom_script.js"></script>

Create a new file called custom_script.js and place it at public/js/custom_script.js.

Copy the following code into the file:
⁷⁰https://github.com/hakimel/Ladda/archive/master.zip
Chapter 2: Front End Recipes 119

1 Ladda.bind( 'input[type=submit]', { timeout: 10000 } );

2
3 // Bind normal buttons
4 Ladda.bind( '.ladda-button', { timeout: 10000 } );
5
6 // Bind progress buttons and simulate loading progress
7 Ladda.bind( '.ladda-button', {
8 callback: function( instance ) {
9 var progress = 0;
10 var interval = setInterval( function() {
11 progress = Math.min( progress + Math.random() * 0.1, 1 );
12 instance.setProgress( progress );
13
14 if( progress === 1 ) {
15 instance.stop();
16 clearInterval( interval );
17 }
18 }, 200 );
19 }
20 } );

This is how we attach a spinner to the desired button.

Note: You may use jQuery instead. If you use jQuery, be sure to use the ladda.jquery.min.js
file. Read the Ladda documentation⁷¹ to know about that method. Feel free to use Gulp,
Elixir or other tools to minify the custom_script.js file.

Well done! Ladda is now ready to use.

Use Ladda to create loading buttons

Since we already have Ladda installed, let’s try to change the Register button of our Register page.
Open the register view (resources/views/register.blade.php), and find the button:

1 <button type="submit" class="btn btn-primary">

We just need to change it to:

⁷¹https://github.com/hakimel/Ladda
Chapter 2: Front End Recipes 120

1 <button type="submit" class="btn btn-primary ladda-button" data-style="expand-le\

2 ft">

As you see, we can choose the effect by setting the data-style attribute:

1 data-style="expand-left"

That’s it! Go ahead and click the Register button, you should see the loading effect:

Of course that we can put the spinner inside our Login With Facebook button as well:

1 <a href="/login/facebook">
2 <div class="btn btn-md btn-primary ladda-button" data-style="expand-left">
3 <i class="fa fa-facebook"></i> Login with Facebook </div>
4 </a>

If you like the style of original Ladda buttons that we just see in the demo. Open our master layout,
and change:

1 <link rel="stylesheet" href="/css/ladda-themeless.min.css">

To:
Chapter 2: Front End Recipes 121

1 <link rel="stylesheet" href="/css/ladda.min.css">

Ladda buttons

Using ladda.min.css, we may change buttons’ size and color by using the data-size and data-color
attribute.

1 <button type="submit" class="btn btn-primary ladda-button" data-style="expand-le\

2 ft" data-size="s" data-color="green">
3 <i class="fa fa-btn fa-user"></i> Register
4 </button>
5
6 <a href="/login/facebook">
7 <div class="btn btn-md btn-primary ladda-button" data-style="expand-left" da\
8 ta-size="s" data-color="blue">
9 <i class="fa fa-facebook"></i> Login with Facebook </div>
10 </a>
Chapter 2: Front End Recipes 122

Ladda buttons

Here are all attributes that we can use:

• data-style: one of the button styles, full list in demo [required]

• data-color: green/red/blue/purple/mint
• data-size: xs/s/l/xl, defaults to medium
• data-spinner-size: 40, pixel dimensions of spinner, defaults to dynamic size based on the
button height
• data-spinner-color: A hex code or any named CSS color.
• data-spinner-lines: 12, the number of lines the for the spinner, defaults to 12

Very cool, isn’t it?

Recipe 202 Wrap-up

Tag: Version 0.10 - Recipe 202⁷²

This should give you a sample of how to use Ladda. Let’s try to change other buttons by yourself to
create some effects that fit your needs.
Using loading effects is very important when working with AJAX, because it’s a great way to inform
users that we’re processing their requests.
⁷²https://github.com/LearningLaravel/cookbook/releases/tag/v0.10
Chapter 2: Front End Recipes 123

Recipe 203 - Create A Registration Page Using AJAX and

jQuery

What will we learn?

This recipe shows you how to create a user registration system using AJAX and jQuery.

Building a registration form

When talking about AJAX forms, people usually think that they’re very complicated. Don’t worry,
they are much simpler than they often seem. You can build AJAX forms even if you don’t know
much about jQuery and AJAX.
Basically, an AJAX registration form is very similar to the normal registration form that we already
have, we only need to add some AJAX features to make better user experience.
For learning purposes, let’s create different routes for our AJAX registration page. Open routes.php,
add:

1 Route::get('users/register', 'Auth\AuthController@getRegister');
2 Route::post('users/register', 'Auth\AuthController@postRegister');

Note: You may use different routes, different actions or different controllers if you want.

Next, open our AuthController (app/Http/Controllers/Auth/AuthController) and update the

getRegister action as follows:

1 public function getRegister() {

2 return view('auth/ajax_register');
3 }

By now you should be a pro at handling views, so let’s create a new view called ajax_register
(resources/views/auth/ajax_register.blade.php):
Chapter 2: Front End Recipes 124

1 @extends('layouts.app')
2
3 @section('content')
4 <div class="container">
5 <div class="row">
6 <div class="col-md-8 col-md-offset-2">
7 <div class="panel panel-default">
8 <div class="panel-heading">AJAX Register</div>
9 <div class="panel-body">
10 <form class="form-horizontal" id="registration" method="\
11 POST" action="{{ url('/users/register') }}">
12 {!! csrf_field() !!}
13
14 <div class="form-group">
15 <label class="col-md-4 control-label">Name</labe\
16 l>
17
18 <div class="col-md-6">
19 <input type="text" class="form-control" name\
20 ="name">
21 </div>
22 </div>
23
24 <div class="form-group">
25 <label class="col-md-4 control-label">E-Mail Add\
26 ress</label>
27
28 <div class="col-md-6">
29 <input type="email" class="form-control" nam\
30 e="email">
31
32 </div>
33 </div>
34
35 <div class="form-group">
36 <label class="col-md-4 control-label">Password</\
37 label>
38
39 <div class="col-md-6">
40 <input type="password" class="form-control" \
41 name="password" id="password">
42
Chapter 2: Front End Recipes 125

43 </div>
44 </div>
45
46 <div class="form-group">
47 <label class="col-md-4 control-label">Confirm Pa\
48 ssword</label>
49
50 <div class="col-md-6">
51 <input type="password" class="form-control" \
52 name="password_confirmation">
53 </div>
54 </div>
55
56 <div class="form-group">
57 <div class="col-md-6 col-md-offset-4">
58 <button type="submit" class="btn btn-primary\
59 ladda-button" data-style="expand-left"
60 data-size="s" data-color="green">
61 <i class="fa fa-btn fa-user"></i> Regist\
62 er
63 </button>
64 <a href="/login/facebook"> <div class="btn b\
65 tn-md btn-primary ladda-button"
66 data-style="expand-left" data-size="s" data-\
67 color="blue">
68 <i class="fa fa-facebook"></i> Login wit\
69 h Facebook </div></a>
70 </div>
71 </div>
72 </form>
73 </div>
74 </div>
75 </div>
76 </div>
77 </div>
78 @endsection

Of course, this view is used to display our AJAX registration form. As you can see, it’s just a simple
HTML form. Because this will be an AJAX form, we don’t need to use session or the errors variable
here.
Chapter 2: Front End Recipes 126

Our new registration form

We can now access the form at http://cookbook.app/users/register⁷³

Adding inline validation to our registration form

Using AJAX forms, we will need to find out a way to display the input validation as our users type.
That means the page should not be refreshed, and users can see the generic feedback immediately.
That feature which we want is called Javascript form validation or inline validation.
Luckily, there are many Javascript libraries that we can use to integrate inline validation into our
form.
Here are popular (and free) Javascript inline validation libraries:

• Parsley⁷⁴
• Validate.js⁷⁵
• jQuery Validation Plugin⁷⁶
• Verify.js⁷⁷
• gvalidator⁷⁸
⁷³http://cookbook.app/users/register
⁷⁴http://parsleyjs.org
⁷⁵http://rickharrison.github.io/validate.js/
⁷⁶http://jqueryvalidation.org
⁷⁷http://verifyjs.com
⁷⁸https://code.google.com/archive/p/gvalidator
Chapter 2: Front End Recipes 127

Parsley is the most popular one, so we will use it to add inline validation to our registration form.
To install Parsley, you may choose one of the following methods:
Method 1: Using a CDN. Open our master layout (app.blade.php) and find:

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Add below:

1 <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.5/parsley.min\
2 .js"></script>

Method 2: You can download Parsley (version 2.3.5) here⁷⁹.

Once downloaded, put the file at public/js/parsley.min.js.
Next, open our master layout (app.blade.php) and find:

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Add below:

1 <script src="/js/parsley.min.js"></script>

Done! We now have Parsley installed!

To use Parsley, we just need to add data-parsley-validate to the form that we want to be validated.
Open the ajax_register view and find:

1 <form class="form-horizontal" id="registration" method="POST" action="{{ url('us\

2 ers/register') }}">

Change to:

1 <form class="form-horizontal" id="registration" method="POST" action="{{ url('us\

2 ers/register') }}" data-parsley-validate>

It’s now time to add some validation rules to our form.

Find all input fields:
⁷⁹http://parsleyjs.org/dist/parsley.min.js
Chapter 2: Front End Recipes 128

1 <input type="text" class="form-control" name="name">

2
3 <input type="email" class="form-control" name="email">
4
5 <input type="password" class="form-control" name="password" id="password">
6
7 <input type="password" class="form-control" name="password_confirmation">

Change to:

1 <input type="text" class="form-control" name="name" required>

2
3 <input type="email" class="form-control" name="email" required>
4
5 <input type="password" class="form-control" name="password" id="password" requir\
6 ed>
7
8 <input type="password" class="form-control" name="password_confirmation" data-pa\
9 rsley-equalto="#password" required>

You might have noticed that we’re adding the required attribute to our input fields. Users must
enter all the required fields before submitting the form.
We also use data-parsley-equalto=”#password” to make sure that the value of our password_-
confirmation field must be the same with the password field’s value.
Let’s give our brand new inline validation system a try.
Chapter 2: Front End Recipes 129

Our new registration form

If we enter wrong values and click the Register button. We should see some errors immediately.
Parsley also detects the email field automatically and validate the field for us!
Amazing! Right?
The great thing is, we can customize all Parsley’s classes and elements in the DOM when it
validates.
Let’s create a new app.css stylesheet and place it at public/css/app.css.. Add the following:

1 input.parsley-success,
2 select.parsley-success,
3 textarea.parsley-success {
4 color: #468847;
5 background-color: #DFF0D8;
6 border: 1px solid #D6E9C6;
7 }
8
9 input.parsley-error,
10 select.parsley-error,
11 textarea.parsley-error {
12 color: #B94A48;
13 background-color: #F2DEDE;
14 border: 1px solid #EED3D7;
Chapter 2: Front End Recipes 130

15 }
16
17 .parsley-errors-list {
18 margin: 2px 0 3px;
19 padding: 0;
20 list-style-type: none;
21 font-size: 0.9em;
22 line-height: 0.9em;
23 opacity: 0;
24
25 transition: all .3s ease-in;
26 -o-transition: all .3s ease-in;
27 -moz-transition: all .3s ease-in;
28 -webkit-transition: all .3s ease-in;
29 }
30
31 .parsley-errors-list.filled {
32 opacity: 1;
33 }

You can find these css rules at:

http://parsleyjs.org/src/parsley.css⁸⁰
Finally, open our master layout and find:

1 <link rel="stylesheet" href="/css/sweetalert.css">

Add below:

1 <link rel="stylesheet" href="/css/app.css">

It’s time to refresh our registration form to see the changes.

⁸⁰http://parsleyjs.org/src/parsley.css
Chapter 2: Front End Recipes 131

Our new registration form

We now have a beautiful registration form!

Optional: To access our AJAX registration page easier, open our navbar view (resources/views/shared/-
navbar.blade.php) and find:

1 <li><a href="{{ url('/register') }}">Register</a></li>

Add below:

1 <li><a href="{{ url('/users/login') }}">AJAX Login</a></li>

2 <li><a href="{{ url('/users/register') }}">AJAX Register</a></li>

We can now access our AJAX registration and AJAX login page via the main menu.

Using AJAX and jQuery to submit the form

Now you know how to use client side JavaScript to validate the user input in web forms. There’s
just one more thing to do: submitting the form using AJAX and jQuery.
Definitely, this is the hardest part, especially if you don’t know much about jQuery or Javascript.
But stay with me, I’ll try my best to make this simple enough. If you’ve made it this far in the book,
you can do it!
First, let’s learn how to use jQuery.
As before, we’ll use the custom_script.js file. If you don’t have one, create a new one and put it
at public/js/custom_script.js. Be sure that you have the following code at the end of our master
layout (app.blade.php):
Chapter 2: Front End Recipes 132

1 <script src="/js/custom_script.js"></script>
2 </body>
3 </html>

jQuery has a statement known as the ready event:

1 $( document ).ready(function() {
2
3 // Our code will be here.
4
5 });

We have to put our code inside the ready event. When the document is ready, our code will run
without waiting for other assets (images, files, etc.) to load.
Alternatively, you may use:

1 window.onload = function() {
2
3 // Our code will be here.
4
5 };

or simply use:

1 $(function() {
2 // Our code will be here.
3 };

Note: Please note that the last two methods are not recommended.

Choose one of the methods above, and put the code at the end of our custom_script.js file.
Next, we need to find our registration form by using the following:

1 $( document ).ready(function() {
2
3 var form = $('#registration');
4
5 });

As you see, we just use jQuery ID Selector to select our registration form. Please note that our
registration form must have the id attribute:
Chapter 2: Front End Recipes 133

1 <form class="form-horizontal" id="registration" method="POST" action="{{ url('us\

2 ers/register') }}" data-parsley-validate>

Once the form is selected, we use e.preventDefault() method to prevent the submit button (the
Register button) from submitting the form using the default action. Simply put, our browser should
understand that we want to use the Register button to do other things. If we try to click the button
now, it does nothing.

1 $( document ).ready(function() {
2
3 var form = $('#registration');
4
5 form.submit(function(e){
6 e.preventDefault();
7 });
8 });

This final step is interesting. We will use jQuery’s $.ajax() function to send an asynchronous HTTP
request:

1 $(document).ready(function () {
2
3 var form = $('#registration');
4
5 form.submit(function (e) {
6 e.preventDefault();
7
8 $.ajax({
9 url: form.attr('action'),
10 type: "POST",
11 data: form.serialize(),
12 dataType: "json"
13 })
14 .done(function (response) {
15 // If the request succeeds, do something
16 })
17 .fail(function () {
18 // If the request fails, do something
19 });
20 });
21 });
Chapter 2: Front End Recipes 134

Let’s take a look deeper at this $.ajax() function:

The url parameter is the URL that we want to reach. We use form.attr(‘action’) to get the value of
our form’s action attribute.
We’re sending POST request, so the type is POST.
The form.serialize() is used to serialize the form data⁸¹.
We know that we would get a JSON object in response, so the dataType should be json.
Once our requests are sent, we’ll receive a response from the server. We’ll use the done() and fail()
method to handle it.
Here is the full code:

1 $(document).ready(function () {
2
3 var form = $('#registration');
4
5 form.submit(function (e) {
6 e.preventDefault();
7
8 $.ajax({
9 url: form.attr('action'),
10 type: "POST",
11 data: form.serialize(),
12 dataType: "json"
13 })
14 .done(function (response) {
15 if (response.success) {
16 swal({
17 title: "Hi " + response.name,
18 text: response.success,
19 timer: 2000,
20 showConfirmButton: false,
21 type: "success"
22 });
23 window.location.replace(response.url);
24 } else {
25 swal("Oops!", response.errors, 'error');
26 }
27 })
28 .fail(function () {

⁸¹http://www.formget.com/javascript-serialize
Chapter 2: Front End Recipes 135

29 swal("Fail!", "Cannot register now!", 'error');

30 });
31 });
32 });

Let’s see the code line by line.

If the request succeeds, we use Sweet Alert to display a successful notification:

1 swal({
2 title: "Hi " + response.name,
3 text: response.success,
4 timer: 2000,
5 showConfirmButton: false,
6 type: "success"
7 });

We then redirect users to another place:

1 window.location.replace(response.url);

If we can’t register a new member, we use Sweet Alert to display the errors:

1 swal("Oops!", response.errors, 'error');

If the request fails (server problems) we also use Sweet Alert to trigger error messages.

1 swal("Fail!", "Cannot register now!", 'error');

Our “frontend part” is now complete!

Give it a try:
Chapter 2: Front End Recipes 136

Our new registration form

Because we haven’t built the backend (server) yet, we should see an error message.
Let’s build the backend!

Building backend to handle AJAX requests

To start off, open our AuthController (app/Http/Controllers/Auth/AuthController) and update the
postRegister action as follows:

1 public function postRegister(Request $request) {

You may notice that we’ve just created some validation rules. If you’re not familiar with this, please
take a look at the documentation⁸²
⁸²https://laravel.com/docs/master/validation#available-validation-rules
Chapter 2: Front End Recipes 137

1 **Note:** You may create a RegisterFormRequest to validate the form or change th\
2 e rules if you want.

Next, if the validation fails, an error response will be generated to notify users. If the form is valid,
a successful response will be generated, a new user will be created and we will send the user to a
preferred location (dashboard, for example):

1 public function postRegister(Request $request) {

2
3 $validator = Validator::make($request->all(), [
4 'email' => 'required|email|unique:users,email',
5 'name' => 'required|min:2',
6 'password' => 'required|alphaNum|min:6|same:password_confirmation',
7 ]);
8
9 if ($validator->fails()) {
10 $message = ['errors' => $validator->messages()->all()];
11 $response = Response::json($message,202);
12 } else {
13
14 // Create a new user
15
16 $user = new User([
17 'name' => $request->name,
18 'email' => $request->email,
19 'facebook_id' => $request->email
20 ]);
21 $user->save();
22
23 Auth::login($user);
24
25 $message = ['success' => 'Thank you for joining us!', 'url' => '/', 'nam\
26 e' => $request->name];
27 $response = Response::json($message,200);
28 }
29 return $response;
30 }

This might all be a lot to take in all at once, but the code is pretty easy.
Notice that we also use Auth::login to log the user in.
If we’ve done our job properly, we now have a working AJAX registration form!
Chapter 2: Front End Recipes 138

Let’s check the form in our browser:

If we enter wrong credentials, an error notification should appear:

Our new registration form

If everything is fine, a new user should be created, we see a successful message and we’re redirected
to another location.

Our new registration form

Chapter 2: Front End Recipes 139

Recipe 203 Wrap-up

Tag: Version 0.11 - Recipe 203⁸³

Congratulations! By now you should have a good grasp of how to build an AJAX registration form.
This technique can be used to build many other AJAX forms. Go ahead and try to build another
form to test your skill.
You may try to build the login form as well. I know that you can do it!

Recipe 204 - Create A Login Page Using AJAX And

jQuery

What will we learn?

This recipe shows you how to create an AJAX login page using AJAX and jQuery.

Building a login form

So far we’ve built a registration form. It turns out that we can do the same thing to create an AJAX
login form.
First of all, open routes.php and add these routes:

1 Route::get('users/login', 'Auth\AuthController@getLogin');
2 Route::post('users/login', 'Auth\AuthController@postLogin');

Next, open our AuthController (app/Http/Controllers/Auth/AuthController) and update the get-

1 public function getLogin()

2 {
3 return view('auth/ajax_login');
4 }

Create a new view called ajax_login (resources/views/auth/ajax_login.blade.php):

⁸³https://github.com/LearningLaravel/cookbook/releases/tag/v0.11
Chapter 2: Front End Recipes 140

1 @extends('layouts.app')
2
3 @section('content')
4 <div class="container">
5 <div class="row">
6 <div class="col-md-8 col-md-offset-2">
7 <div class="panel panel-default">
8
9 <div class="panel-heading">AJAX Login</div>
10 <div class="panel-body">
11
12 <form class="form-horizontal" id="login" method="POST" a\
13 ction="{{ url('/login') }}">
14 {!! csrf_field() !!}
15
16 <div class="form-group">
17 <label class="col-md-4 control-label">E-Mail Add\
18 ress</label>
19
20 <div class="col-md-6">
21 <input type="email" class="form-control" nam\
22 e="email">
23 </div>
24 </div>
25
26 <div class="form-group">
27 <label class="col-md-4 control-label">Password</\
28 label>
29
30 <div class="col-md-6">
31 <input type="password" class="form-control" \
32 name="password">
33 </div>
34 </div>
35
36 <div class="form-group">
37 <div class="col-md-6 col-md-offset-4">
38 <div class="checkbox">
39 <label>
40 <input type="checkbox" name="remembe\
41 r"> Remember Me
42 </label>
Chapter 2: Front End Recipes 141

43 </div>
44 </div>
45 </div>
46
47 <div class="form-group">
48 <div class="col-md-6 col-md-offset-4">
49 <button type="submit" class="btn btn-primary\
50 ladda-button" data-style="expand-left"
51 data-size="s" data-color="green">
52 <i class="fa fa-btn fa-sign-in"></i> Log\
53 in
54 </button>
55 <a href="/login/facebook">
56 <div class="btn btn-md btn-primary ladda\
57 -button" data-style="expand-left"
58 data-size="s" data-color="blue"><i \
59 class="fa fa-facebook"></i> Login with
60 Facebook
61 </div>
62 </a>
63 <a class="btn btn-link" href="{{ url('/passw\
64 ord/reset') }}">Forgot Your
65 Password?</a>
66 </div>
67 </div>
68 </form>
69 </div>
70 </div>
71 </div>
72 </div>
73 </div>
74 @endsection

We can now access the form at http://cookbook.app/users/login⁸⁴.

⁸⁴http://cookbook.app/users/login
Chapter 2: Front End Recipes 142

Our new login form

Adding inline validation to our login form

Similarly, we will use Parsley to add inline validation to our login form.

Note: Please read the previous recipe to learn how to install and use Parsley if you don’t
know what Parsley is.

As you may already know, we need to add data-parsley-validate to the form that we want to be
validated.
Open the ajax_login view and find:

1 <form class="form-horizontal" id="login" method="POST" action="{{ url('/login') \

2 }}">

Change to:

1 <form class="form-horizontal" id="login" method="POST" action="{{ url('/login') \

2 }}" data-parsley-validate>

Find all input fields:

Chapter 2: Front End Recipes 143

1 <input type="email" class="form-control" name="email">

2
3 <input type="password" class="form-control" name="password">

Update to:

1 <input type="email" class="form-control" name="email" required>

2
3 <input type="password" class="form-control" name="password" required>

Well done! We’ve integrated inline validation into our login form!

Inline validation

Using AJAX and jQuery to submit our login form

As before, we’ll use the custom_script.js file. If you don’t have one, create a new one and put it
at public/js/custom_script.js. Be sure that you have the following code at the end of our master
layout (app.blade.php):
Chapter 2: Front End Recipes 144

1 <script src="/js/custom_script.js"></script>
2 </body>
3 </html>

We should put our code inside the ready event:

1 $( document ).ready(function() {
2
3 // Registration form (previous recipe)
4
5 // Our code will be here.
6
7 });

Next, we use jQuery ID Selector to select the login form.

1 var login_form = $('#login');

Once the form is selected, don’t forget to use e.preventDefault() method to prevent the submit
button (the Login button) from submitting the form using the default action.

1 var login_form = $('#login');

2
3 login_form.submit(function (e) {
4 e.preventDefault();
5 });

After that, we can use the $.ajax() function to submit the form:

1 var login_form = $('#login');

2
3 login_form.submit(function (e) {
4 e.preventDefault();
5
6 $.ajax({
7 url: login_form.attr('action'),
8 type: "POST",
9 data: login_form.serialize(),
10 dataType: "json"
11 })
12 .done(function (response) {
Chapter 2: Front End Recipes 145

13 if (response.success) {
14 swal({
15 title: "Welcome back!",
16 text: response.success,
17 timer: 5000,
18 showConfirmButton: false,
19 type: "success"
20 });
21
22 window.location.replace(response.url);
23
24 } else {
25 swal("Oops!", response.errors, 'error');
26 }
27 })
28 .fail(function () {
29 swal("Fail!", "Cannot login now!", 'error');
30 });
31 });

Just like we previously set up the registration form, we’ll use Sweet Alert to display a successful
message and we’ll redirect the user to another location if the response from the server is OK (200).
If not, we also use Sweet Alert to display error notifications.
The form can be used to send our AJAX request now.

The form is working

Chapter 2: Front End Recipes 146

Building the login backend

Here is the code for the postLogin action:

1 public function postLogin(Request $request)

2 {
3
4 $validator = Validator::make($request->all(), [
5 'email' => 'required|email',
6 'password' => 'required',
7 ]);
8
9 if ($validator->fails()) {
10 $message = ['errors' => $validator->messages()->all()];
11 $response = Response::json($message, 202);
12 } else {
13 $remember = $request->remember? true : false;
14
15 if (Auth::attempt(['email' => $request->email, 'password' => $request->p\
16 assword], $remember)) {
17
18 $message = ['success' => 'Love to see you here!', 'url' => '/'];
19
20 $response = Response::json($message, 200);
21 } else {
22 $message = ['errors' => 'Please check your email or password again.'\
23 ];
24 $response = Response::json($message, 202);
25 }
26 }
27
28 return $response;
29 }

First, we use Validator to validate the form. If our validation rules pass, we use Auth::attempt to
authenticate the user.
If the login credentials of the user are correct, we return a successful response with a URL. If not,
we simply return an error message.
You may notice that we also use the $remember variable to store the value of the Remember Me
select box.
Chapter 2: Front End Recipes 147

We use the variable for the remember me functionality in our application. When we pass the
$remember variable (which is a boolean) as the second argument to the attempt method, if the
value of the variable is 1 (yes), our app keeps the user authenticated indefinitely.
For more information about using the Auth facade, check this out:
https://laravel.com/docs/master/authentication#authenticating-users⁸⁵
Let’s give our new login form a try.
If we enter wrong information, an error notification should appear:

Error

If the credentials are correct, we will be able to log in!

⁸⁵https://laravel.com/docs/master/authentication#authenticating-users
Chapter 2: Front End Recipes 148

We can login now

Recipe 204 Wrap-up

Tag: Version 0.12 - Recipe 204⁸⁶

By applying the techniques above, we can easily build an AJAX login page!
Although we have only dealt with users, these concepts can be applied to create many types of
forms.

Recipe 205 - Upload Files Using AJAX And jQuery

What will we learn?

This recipe shows you how to upload images using AJAX and jQuery.

All about jQuery File Upload Plugin

We can find many open source file upload libraries, but it’s very hard to get a library that works with
any server-side platforms, supports multiple languages, easy to skin and have a good documentation.
Here is a list of the best file upload libraries:

• jQuery File Upload Plugin⁸⁷

⁸⁶https://github.com/LearningLaravel/cookbook/releases/tag/v0.12
⁸⁷https://github.com/blueimp/jQuery-File-Upload
Chapter 2: Front End Recipes 149

• DropzoneJS⁸⁸
• Plupload⁸⁹
• Uploadify⁹⁰
• jQuery DROPAREA⁹¹
• jqUploader⁹²

In this recipe, we’ll learn about jQuery File Upload Plugin, which is the most popular jQuery file
upload library.
Here are some of the most prominent jQuery File Upload’s features:

• Multiple file upload.

• Drag & Drop support.
• Upload progress bar.
• Resumable uploads.
• Chunked uploads.
• Preview images, audio and video.
• Graceful fallback for legacy browsers.
• Multipart and file contents stream uploads.
• Compatible with any server-side application platform.

You may view all jQuery File Upload’s features and its documentation at:
https://github.com/blueimp/jQuery-File-Upload⁹³
Be sure to check out the demo⁹⁴ to see how it works.
⁸⁸http://www.dropzonejs.com
⁸⁹http://www.plupload.com/example_queuewidget.php
⁹⁰http://www.uploadify.com
⁹¹http://gokercebeci.com/dev/droparea
⁹²http://pixeline.be/experiments/jqUploader
⁹³https://github.com/blueimp/jQuery-File-Upload
⁹⁴https://blueimp.github.io/jQuery-File-Upload
Chapter 2: Front End Recipes 150

jQuery File Upload

Installing jQuery File Upload

To install jQuery File Upload, we have to download its latest version⁹⁵ first.
Unzip (decompress) the downloaded file, and go to the js directory.
jQuery File Upload comes with many files, but we only need these files:

• jquery.fileupload-image.js
• jquery.fileupload-process.js
• jquery.fileupload-ui.js
• jquery.fileupload.js
• jquery.iframe-transport.js
• vendor/jquery.ui.widget.js

Note: You may use all the files if you want.

Place them all at our public/js directory.

Next, open the master layout (app.blade.php) and find:

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Add below:

⁹⁵https://github.com/blueimp/jQuery-File-Upload/archive/master.zip
Chapter 2: Front End Recipes 151

1 
3 <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"\
4 ></script>
5 
6 <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min\
7 .js"></script>
8 
9 <script src="/js/jquery.ui.widget.js"></script>
10 <script src="/js/jquery.iframe-transport.js"></script>
11 <script src="/js/jquery.fileupload.js"></script>
12 <script src="/js/jquery.fileupload-process.js"></script>
13 <script src="/js/jquery.fileupload-image.js"></script>

Done! jQuey File Upload plugin is now ready to use!

But note that just because we can use these:

1 <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"\
2 ></script>
3 <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min\
4 .js"></script>

doesn’t mean you should just use them in a production environment. We should download those
files, and put them in the public/js directory.
Our master layout should look like this:

1 <script src="/js/load-image.all.min.js"></script>
2 <script src="/js/canvas-to-blob.min.js"></script>
3 
4 <script src="/js/jquery.ui.widget.js"></script>
5 <script src="/js/jquery.iframe-transport.js"></script>
6 <script src="/js/jquery.fileupload.js"></script>
7 <script src="/js/jquery.fileupload-process.js"></script>
8 <script src="/js/jquery.fileupload-image.js"></script>

Creating an upload form

We’ll begin by creating a new form to upload images.
Because our about page is empty, we’ll put the form there. Open resources/views/about.blade.php
and update the code as follows:
Chapter 2: Front End Recipes 152

1 @extends('layouts.app')
2 @section('title', 'About')
3
4 @section('content')
5
6 <div class="container">
7 <div class="content">
8 <div class="title">About Page</div>
9 <div>
10 <div id="files" class="files">
11 <div id="testimage"><img src="/images/testimage.png" alt\
12 ="test image"></div>
13 </div>
14 <span class="btn btn-info btn-file">
15 Upload an image
16 <input id="fileupload" class="upload" type="file" na\
17 me="files[]">
18 </span>
19 <div id="progress" class="progress" style="display:none;">
20 <div class="progress-bar progress-bar-success"></div>
21 </div>
22 </div>
23 </div>
24 </div>
25
26 @endsection

Let’s see the code line by line.

First, a default image is placed at the top of the page:

1 <div id="files" class="files">

2 <div id="testimage"><img src="/images/testimage.png" alt="test image"></\
3 div>
4 </div>

Currently, we don’t have the testimage.png yet, so the image won’t display.
(Optional) You may download the image below (or use any image that you like) and save it at
public/images/testimage.png.
Learning Laravel 5 cover image⁹⁶
Here is our upload button:
⁹⁶http://learninglaravel.net/img/LearningLaravel5_cover.png
Chapter 2: Front End Recipes 153

1 <span class="btn btn-info btn-file">

2 Upload an image
3 <input id="fileupload" class="upload" type="file" name="files[]">
4 </span>

As you see, we don’t have to create a form here. A simple button is more than enough.
Lastly, we put the progress bar at the bottom:

1 <div id="progress" class="progress" style="display:none;">

2 <div class="progress-bar progress-bar-success"></div>
3 </div>

Give it a try. You should see something like this:

Chapter 2: Front End Recipes 154

Upload form

You can also customize the style of the upload button and everything else to your liking. For instance,
we may style the button in pure css⁹⁷. Open our public/css/app.css file, add the following:

⁹⁷http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css
Chapter 2: Front End Recipes 155

1 .btn-file {
2 position: relative;
3 overflow: hidden;
4 margin: 10px;
5 }
6 .btn-file input.upload {
7 position: absolute;
8 top: 0;
9 right: 0;
10 margin: 0;
11 padding: 0;
12 font-size: 20px;
13 cursor: pointer;
14 opacity: 0;
15 filter: alpha(opacity=0);
16 }

Here is our new upload button:

Chapter 2: Front End Recipes 156

The new upload button

Uploading images using jQuery File Upload

Now we’ll use jQuery File Upload to upload an image.
First of all, open the routes.php file, add this route to the web middleware group:

1 Route::post('imageupload', 'ImagesController@storeImage');

This route is where the upload request is sent to.

Next, open the master layout (app.blade.php), find:

1 <script src="/js/jquery.fileupload-image.js"></script>

Add below:
Chapter 2: Front End Recipes 157

1 <meta name="_token" content="{{ csrf_token() }}" />

2
3 <script src="/js/upload.js"></script>

Because the web middleware group has the CSRF middleware, we have to generate a CSRF token
and send it with our form. If we don’t have a CSRF token, we will get a 500 internal server error.

Note: if you don’t want to use the CSRF feature and generate the token, you may put
the imageupload route outside of the web middleware group.

Create a new file called upload.js and place it at public/js/upload.js:

1 $.ajaxSetup({
2 headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
3 });
4
5 $(function () {
6 'use strict';
7
8 var url = '/imageupload';
9
10 $('#fileupload').fileupload({
11 url: url,
12 dataType: 'json',
13 autoUpload: true,
14 acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
15 singleFileUploads: true,
16 maxFileSize: 999000,
17 previewMaxWidth: 300,
18 previewMaxHeight: 300,
19 previewCrop: false
20 }).on('fileuploadadd', function (e, data) {
21
22 $('#progress').fadeIn();
23 data.context = $('<div class="fileinfo"><div/>').appendTo('#files');
24 $.each(data.files, function (index, file) {
25 var node = $('<p/>')
26 .append($('<span/>').text(file.name));
27 node.appendTo(data.context);
28 });
29 }).on('fileuploadprocessalways', function (e, data) {
30
Chapter 2: Front End Recipes 158

31 var index = data.index,

32 file = data.files[index],
33 node = $(data.context.children()[index]);
34 if (file.preview) {
35 node
36 .prepend('<br>')
37 .prepend(file.preview);
38 }
39 }).on('fileuploadprogressall', function (e, data) {
40
41 var progress = parseInt(data.loaded / data.total * 100, 10);
42 $('#progress .progress-bar').css(
43 'width',
44 progress + '%'
45 );
46 }).on('fileuploaddone', function (e, data) {
47
48 $('#files').empty();
49 $.each(data.result.files, function (index, file) {
50 if (file.url) {
51 var currentTime = (new Date()).getTime();
52 $('#files').append("<div id='testimage'><img src='" + file.url +\
53 "?" + currentTime + "' /></div>");
54
55 // reset the progress bar
56 $('#progress').fadeOut();
57 setTimeout(function () {
58 $('#progress .progress-bar').css('width', 0);
59 }, 500);
60
61 } else if (file.error) {
62 var error = $('<span class="text-danger"/>').text(file.error);
63 $(data.context.children()[index])
64 .append('<br>')
65 .append(error);
66 }
67 });
68 }).on('fileuploadfail', function (e, data) {
69
70 $.each(data.files, function (index) {
71 var error = $('<span class="text-danger"/>').text('File upload faile\
72 d.');
Chapter 2: Front End Recipes 159

73 $(data.context.children()[index])
74 .append('<br>')
75 .append(error);
76 });
77 });
78 });

This may seem overwhelming at first, but the code is easy. Let’s take a look deeper!
First, we use $.ajaxSetop() to add a default header to every request:

1 $.ajaxSetup({
2 headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
3 });

This header contains the CSRF token that we have generated.

Next, we use the fileupload method to initialize the File Upload widget:

1 var url = '/imageupload';

2
3 $('#fileupload').fileupload({
4 url: url,
5 dataType: 'json',
6 autoUpload: true,
7 acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
8 singleFileUploads: true,
9 maxFileSize: 999000,
10 previewMaxWidth: 300,
11 previewMaxHeight: 300,
12 previewCrop: false
13 })

There are many options⁹⁸ that we can use to configure the plugin. For instance, the url option can
be used to specify where the request is sent (/imageupload).
You may remove some options or add more option if you want.
jQuery File Upload also provides us some callbacks⁹⁹ that we can use to execute code during some
events.

⁹⁸https://github.com/blueimp/jQuery-File-Upload/wiki/Options
⁹⁹https://github.com/blueimp/jquery-file-upload/wiki/options#callback-options
Chapter 2: Front End Recipes 160

1 .on('fileuploadadd', function (e, data) {

2
3 $('#progress').fadeIn();
4 data.context = $('<div class="fileinfo"><div/>').appendTo('#files');
5 $.each(data.files, function (index, file) {
6 var node = $('<p/>')
7 .append($('<span/>').text(file.name));
8 node.appendTo(data.context);
9 });
10 })

As you see, we use the fileuploadadd callback here. This callback is invoked as soon as files are
added to the fileupload widget.
When files are added, we will display a progress bar, and add the files’ name to the #files section.

1 .on('fileuploadprocessalways', function (e, data) {

2
3 var index = data.index,
4 file = data.files[index],
5 node = $(data.context.children()[index]);
6 if (file.preview) {
7 node
8 .prepend('<br>')
9 .prepend(file.preview);
10 }
11 })

fileuploadprocessalways is the callback for the end of an individual file processing queue.
When the file is processed, we will display preview images on the page.

1 .on('fileuploadprogressall', function (e, data) {

2
3 var progress = parseInt(data.loaded / data.total * 100, 10);
4 $('#progress .progress-bar').css(
5 'width',
6 progress + '%'
7 );
8 })

When the file is being processed, we calculate the progress bar percentage here and change the width
of the bar using CSS.
Chapter 2: Front End Recipes 161

1 .on('fileuploaddone', function (e, data) {

2
3 $('#files').empty();
4 $.each(data.result.files, function (index, file) {
5 if (file.url) {
6 var currentTime = (new Date()).getTime();
7 $('#files').append("<div id='testimage'><img src='" + file.url +\
8 "?" + currentTime + "' /></div>");
9
10 // reset the progress bar
11 $('#progress').fadeOut();
12 setTimeout(function () {
13 $('#progress .progress-bar').css('width', 0);
14 }, 500);
15
16 } else if (file.error) {
17 var error = $('<span class="text-danger"/>').text(file.error);
18 $(data.context.children()[index])
19 .append('<br>')
20 .append(error);
21 }
22 });
23 })

When the file is uploaded successfully, we remove all the images in the #files section using:

1 $('#files').empty();

After that, we will insert a new image into the #files section.
Actually, we can just simply use the following code to display the image:

1 $('#files').append("<div id='testimage'><img src='" + file.url + "' /></div>");

However, some browsers have browser cache. When the new image has the same name with the
old one, the image is not updated. We could not see the new image.
This is how we fix the issue:
Chapter 2: Front End Recipes 162

1 var currentTime = (new Date()).getTime();

2 $('#files').append("<div id='testimage'><img src='" + file.url + "?" + currentTi\
3 me + "' /></div>");

As you see, we may add a current timestamp at the end of the image URL. For example, the URL
of the image is changed to images/testimage.png?1458728374846.

1 // reset the progress bar

2 $('#progress').fadeOut();
3 setTimeout(function () {
4 $('#progress .progress-bar').css('width', 0);
5 }, 500);

Next, we reset the progress bar and hide it.

1 } else if (file.error) {
2 var error = $('<span class="text-danger"/>').text(file.error\
3 );
4 $(data.context.children()[index])
5 .append('<br>')
6 .append(error);
7 }
8 });

If the file has some errors, we insert the error messages to the page.

1 }).on('fileuploadfail', function (e, data) {

2
3 $.each(data.files, function (index) {
4 var error = $('<span class="text-danger"/>').text('File upload faile\
5 d.');
6 $(data.context.children()[index])
7 .append('<br>')
8 .append(error);
9 });
10 });

Finally, if the request fails, all that left to do is to display an error message.
Here’s what our form should now look like when we try to upload a new image:
Chapter 2: Front End Recipes 163

The request fails

If you still feel confused, try to remove some callbacks and modify some options to get a better
understanding of what’s really going on behind the scenes.

Note: Please note that we may also use Sweet Alert to display the messages as well.
Some callbacks (such as fileuploadprocessalways) can be removed.

Building the backend

The process we’ll follow will be pretty similar to how we’ve built the image upload backend in
Recipe 6.

Note: We will use Intervention Image in this section. If you don’t have the package
installed, please read the Recipe 6.

If you don’t have the ImagesController yet, let’s generate a new one:

1 php artisan make:controller ImagesController

Once we have the ImagesController file, open it and add this storeImage action:
Chapter 2: Front End Recipes 164

1 public function storeImage()

2 {
3
4 $files = Input::file('files');
5
6 $json = array(
7 'files' => array()
8 );
9
10 foreach ($files as $file) {
11
12 $destination = 'images';
13 $size = $file->getSize();
14 $filename = 'testimage';
15 $extension = 'png';
16 $fullName = $filename . '.' . $extension;
17 $pathToFile = $destination . '/' . $fullName;
18 $upload_success = Image::make($file)->encode('png')->save($destination .\
19 '/' . $fullName);
20
21 if ($upload_success) {
22 $json['files'][] = array(
23 'name' => $filename,
24 'size' => $size,
25 'url' => $pathToFile,
26 'message' => 'Uploaded successfully'
27 );
28 return Response::json($json);
29 } else {
30 $json['files'][] = array(
31 'message' => 'error uploading images',
32 );
33 return Response::json($json, 202);
34 }
35 }
36 }

As you notice, we set the image’s name as testimage.png. After that, We also use Intervention
Image to convert the image to PNG and move it to our public/images directory:
Chapter 2: Front End Recipes 165

1 $destination = 'images';
2 $size = $file->getSize();
3 $filename = 'testimage';
4 $extension = 'png';
5 $fullName = $filename . '.' . $extension;
6 $pathToFile = $destination . '/' . $fullName;
7 $upload_success = Image::make($file)->encode('png')->save($destination . '/' . $\
8 fullName);

If the image is uploaded successfully, we return a JSON object containing a files array:

1 if ($upload_success) {
2 $json['files'][] = array(
3 'name' => $filename,
4 'size' => $size,
5 'url' => $pathToFile,
6 'message' => 'Uploaded successfully'
7 );
8 return Response::json($json);
9 }

Note: even if only one file is uploaded, the response should always be a JSON object
containing a files array.

If we can’t upload the image, an error message is returned:

1 else {
2 $json['files'][] = array(
3 'message' => 'error uploading images',
4 );
5 return Response::json($json, 202);
6 }

Our backend should now be working perfectly!

Let’s try to upload an image:
Chapter 2: Front End Recipes 166

Upload an image

We should see a progress bar and a preview image while uploading. Our new image appears
without reloading the page.
If you’ve done it right, your image should now be uploaded successfully.
Here is a little tip. If you don’t want to set the image’s name or its extension, you may use the
following:
Chapter 2: Front End Recipes 167

1 $destination = 'images';
2 $time = time();
3 $formatTime = date("Y-m-d_h-m", $time);
4 $filename = $formatTime . '_' . str_random(8);
5 $extension = $file->getClientOriginalExtension();
6 $size = $file->getSize();
7 $fullName = $filename . '.' . $extension;
8 $pathToFile = $destination . '/' . $fullName;
9 $upload_success = Image::make($file)->save($destination . '/' . $fullName);

This time we generate the image’s name automatically and preserve the original image’s extension.
You may also insert the image link into your database to keep track of it. When you have the links,
you can display images anywhere on your site.

Recipe 205 Wrap-up

Tag: Version 0.13 - Recipe 205¹⁰⁰

So we’ve seen how to go from integrating jQuery File Upload to uploading images asynchronously.
As you see, the plugin is is very customizable. Using the techniques, you can build some useful
features such as: uploading the site’s cover, changing user’s profile picture, etc.
This just covers the basics of what you can do with jQuery File Upload, be sure to explore its features
more!

Recipe 206 - Cropping Images Using jQuery

What will we learn

This recipe shows you how to upload and crop images using jQuery.

All about Cropper

For cropping images using jQuery, there are many popular plugins:

• Cropper¹⁰¹
• Croppic¹⁰²
¹⁰⁰https://github.com/LearningLaravel/cookbook/releases/tag/v0.13
¹⁰¹https://github.com/fengyuanchen/cropper
¹⁰²http://www.croppic.net
Chapter 2: Front End Recipes 168

• Cropit¹⁰³
• JCrop¹⁰⁴
• Cropimg¹⁰⁵
• jQuery Guillotine Plugin¹⁰⁶

Currently, it’s hard to find a better plugin than Cropper.

Cropper has many features and it is still strongly maintained. At the time of writing this section,
the last commit to Github was less than 2 weeks ago.
Here are some of Cropper’s prominent features:

• It has 39 options, 27 methods and 7 events

• Supports touch (mobile)
• Supports zooming
• Supports rotating
• Supports scaling (flipping)
• Supports multiple croppers
• Supports to crop image in the browser-side by canvas
• Cross-browser support
¹⁰³http://scottcheng.github.io/cropit
¹⁰⁴http://deepliquid.com/projects/Jcrop/demos.php
¹⁰⁵http://requtize.github.io/cropimg
¹⁰⁶https://github.com/matiasgagliano/guillotine
Chapter 2: Front End Recipes 169

Cropper demo

You can check out the demo page of Cropper¹⁰⁷.

Be sure to read Cropper documentation¹⁰⁸ to know more about its features and what we can do with
it.

Installing Cropper
Let’s get started by downloading the latest release of Cropper¹⁰⁹.
Unzip (decompress) the downloaded file, and go to the cropper-master/dist directory.
Copy the cropper.min.css file to our public/css directory.
Copy the cropper.min.js file to our public/js directory.
Open our master layout (app.blade.css), find:

1 <link rel="stylesheet" href="/css/app.css">

Add above:

¹⁰⁷http://fengyuanchen.github.io/cropper
¹⁰⁸https://github.com/fengyuanchen/cropper
¹⁰⁹https://github.com/fengyuanchen/cropper/archive/master.zip
Chapter 2: Front End Recipes 170

1 <link rel="stylesheet" href="/css/cropper.min.css">

Find:

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Add below:

1 <script src="/js/cropper.min.js"></script>
2 <script src="/js/crop.js"></script>

Create a new file called crop.js and place it inside our public/js directory. This is our custom
Javascript file.
Cropper is now ready to use!

Cropping an image using Cropper

Just for testing purposes, we’ll be placing our image cropping form at the contact page.
Open views/contact.blade.php, here is the very beginnings of the file:

1 @extends('layouts.app')
2 @section('title', 'Contact')
3
4 @section('content')
5 <div class="container">
6 <div class="content">
7 <div class="title">Contact Page</div>
8 <div class="img-container">
9 <img id="image" src="/images/testimage.png">
10 </div>
11 </div>
12 </div>
13 @endsection

As you see, we just create a normal image and put it inside a wrapper (img-container). The size
of the cropper inherits from the size of the wrapper, so be sure to always wrap the image with a
visible block element.
We can display a new cropper by adding the following to our crop.js file:
Chapter 2: Front End Recipes 171

1 $(function () {
2
3 'use strict';
4
5 var $image = $('#image');
6 $image.cropper();
7
8 });

We use jQuery to find the image. After that, we use $image.cropper() to initialize the cropper.
Now we can see the cropper in our browser!

New cropper

As mentioned earlier, the size of the cropper is the wrapper’s size. Let’s change the cropper’s size by
adding these CSS rules to our app.css file:
Chapter 2: Front End Recipes 172

1 img {
2 max-width: 100%;
3 }
4
5 .img-container {
6 margin-bottom: 20px;
7 max-width: 516px;
8 }

Here is the new cropper:

New cropper with new size

Feel free to modify its size to your liking.

Now our cropper doesn’t do much so let’s give it a button to crop the image. Open contact.blade.php,
find:
Chapter 2: Front End Recipes 173

1 <div class="img-container">

Add above:

1 <button type="button" id="crop-btn" class="btn btn-primary">

2 Crop Image
3 </button>
4 <div class="image-data"></div>

You should see a Crop Image button above our image.

Open the crop.js file, find:

1 $image.cropper();

Add below:

1 var croppingData = {};

2 $('#crop-btn').click(function() {
3 croppingData = $image.cropper("getCroppedCanvas");
4 $('.image-data').html(croppingData);
5 });

Cropper has a method called getCroppedCanvas that we can use to get a canvas drawn the
cropped image when clicking the Crop Image button:

1 $('#crop-btn').click(function() {
2 croppingData = $image.cropper("getCroppedCanvas");
3 });

Once having the cropping data, we can display the cropped image in the image-data section:

1 $('.image-data').html(croppingData);

Let’s give it a try.

Change the cropped area position and then click the Crop Image button:
Chapter 2: Front End Recipes 174

Click the crop image button

Great! Every time we click the Crop Image button, we should see a new cropped image immediately!

Uploading and cropping an image

Although we have only dealt with a single test image, this is the foundation for how we can add
more related features to our application.
Let’s say we wanted to let our users upload an image to our site and crop it. Here are the steps for
building this feature:
Chapter 2: Front End Recipes 175

First of all, open our contact view (contact.blade.php), find:

1 <button type="button" id="crop-btn" class="btn btn-primary">

Add above:

1 <form method="POST" action="/cropimage" enctype="multipart/form-data">

2
3 {!! csrf_field() !!}
4
5 <input type="hidden" id="cropped-image" name="cropped-image" value="">
6
7 <span class="btn btn-info btn-file">
8 Choose an image
9 <input id="uploaded-image" class="upload" type="file" name="uploaded-image" \
10 onchange="PreviewImage();"/>
11 </span>
12
13 <button type="submit" class="btn btn-default ladda-button" data-style="expan\
14 d-left" data-size="s" data-color="purple">
15 Upload</button>
16
17 </form>

Now we should have a nice little form with some buttons:

Chapter 2: Front End Recipes 176

Form buttons

Of course, we don’t want users to click the Crop Image button if they don’t choose any image yet.
Let’s temporarily hide the button!
Open our app.css file (public/css/app.css), and add:

1 #crop-btn {
2 display:none;
3 }
Chapter 2: Front End Recipes 177

Our Crop Image button should now be hidden.

When users click the Choose an image button, they can choose an image that they want to crop.
Once an image is selected, we will display the image inside a crop box. We can add this functionality
by creating a new Javascript function called PreviewImage.
In our crop.js, add the function:

1 function PreviewImage() {
2 var oFReader = new FileReader();
3 oFReader.readAsDataURL(document.getElementById("uploaded-image").files[0]);
4 oFReader.onload = function(oFREvent) {
5 $('#crop-btn').show();
6 $("#image").cropper('destroy');
7 document.getElementById("image").src = oFREvent.target.result;
8 $("#image").cropper();
9 };
10 }

Here is how the PreviewImage function works:

1 var oFReader = new FileReader();

2 oFReader.readAsDataURL(document.getElementById("uploaded-image").files[0]);
3 oFReader.onload = function(oFREvent) {

We use FileReader to get the chosen image.

1 $('#crop-btn').show();

Next, we display the #crop-btn button (Crop Image button).

1 $("#image").cropper('destroy');

Be sure that there is no cropper on the page by destroying it. If we don’t do this step, when users
select an image again, the new image will not be displayed.

1 document.getElementById("image").src = oFREvent.target.result;
2 $("#image").cropper();

Finally, we replace the old image with the chosen one and display a new cropper.
The thing to notice here is that we must use the onchange event to trigger the PreviewImage
function when a user selects an image:
Chapter 2: Front End Recipes 178

1 <span class="btn btn-info btn-file">

2 Choose an image
3 <input id="uploaded-image" class="upload" type="file" name="uploaded-image" onch\
4 ange="PreviewImage();"/>
5 </span>

Go ahead and test the form:

Choose an image
Chapter 2: Front End Recipes 179

If we click the Choose an image button and pick an image, then a cropper with our image will be
displayed on the page!
The last thing we need to do is create a hidden input to send our image data to our server (backend)
and another action to handle that request.

1 <input type="hidden" id="cropped-image" name="cropped-image" value="">

As you may notice, our form has the hidden input already, so just open the crop.js and update as
follows:

1 $('#crop-btn').click(function() {
2 croppingData = $image.cropper("getCroppedCanvas");
3 $('.image-data').html(croppingData);
4 $('#cropped-image').val(croppingData.toDataURL();
5 });

When we use croppingData.toDataURL(), the image will be converted to base64¹¹⁰. Simply put,
base64 encoded data is a string of characters that contains our image data. We can decode that
base64 data later to create a new image.
Next, add this route to our web middleware group:

1 Route::post('cropimage', 'ImagesController@storeCroppedImage');

Here is the storeCroppedImage action:

1 public function storeCroppedImage()

2 {
3 $files = Input::all();
4
5 if ($files['cropped-image'] != "") {
6
7 $file = $files['cropped-image'];
8
9 $destination = 'images';
10 $filename = 'testimage';
11 $extension = 'png';
12 $fullName = $filename . '.' . $extension;
13
14 $image = Image::make($file)->encode('png')->save($destination . '/' . $f\

¹¹⁰https://en.wikipedia.org/wiki/Base64
Chapter 2: Front End Recipes 180

15 ullName);
16
17 Alert::success('Image has been cropped successfully!', 'Success!')->auto\
18 close(2000);
19
20 return redirect('/contact');
21
22 } else if(isset($files['uploaded-image']) ) {
23
24 $file = $files['uploaded-image'];
25 $destination = 'images';
26 $filename = 'testimage';
27 $extension = 'png';
28 $fullName = $filename . '.' . $extension;
29 $image = Image::make($file)->encode('png')->save($destination . '/' . $f\
30 ullName);
31
32 Alert::success('Image has been uploaded successfully!', 'Success!')->aut\
33 oclose(2000);
34
35 return redirect('/contact');
36
37 } else {
38
39 Alert::error('There is an error', 'Error')->autoclose(2000);
40
41 return redirect('/contact');
42 }
43 }

Let’s take a look deeper at this action so that we can see how it works.

1 if ($files['cropped-image'] != "") {
2
3 $file = $files['cropped-image'];
4
5 $destination = 'images';
6 $filename = 'testimage';
7 $extension = 'png';
8 $fullName = $filename . '.' . $extension;
9
10 $image = Image::make($file)->encode('png')->save($destination . '/' . $f\
Chapter 2: Front End Recipes 181

11 ullName);
12
13 Alert::success('Image has been cropped successfully!', 'Success!')->auto\
14 close(2000);
15
16 return redirect('/contact');
17
18 }

We’ll start by checking if our cropped-image field is empty. If it’s not empty, we use Intervention
Image to create a new image. We also use Sweet Alert to display a successful message. After that,
the user will be redirected to the contact page.

1 } else if(isset($files['uploaded-image']) ) {
2
3 $file = $files['uploaded-image'];
4 $destination = 'images';
5 $filename = 'testimage';
6 $extension = 'png';
7 $fullName = $filename . '.' . $extension;
8 $image = Image::make($file)->encode('png')->save($destination . '/' . $f\
9 ullName);
10
11 Alert::success('Image has been uploaded successfully!', 'Success!')->aut\
12 oclose(2000);
13
14 return redirect('/contact');
15
16 }

If we don’t get the cropped-image but we still get the uploaded-image, that means our users have
uploaded an image but they haven’t cropped it. We still save the image, display a successful message
and redirect them back to the contact page.

1 } else {
2
3 Alert::error('There is an error', 'Error')->autoclose(2000);
4
5 return redirect('/contact');
6 }

Lastly, if there is no image or there is an error, we just simply display an error message and redirect
users back to our contact page.
Be sure that our ImagesController has all the required classes:
Chapter 2: Front End Recipes 182

1 <?php
2
3 namespace App\Http\Controllers;
4
5 use App\Http\Requests;
6 use App\Http\Requests\ImageFormRequest;
7
8 use Image;
9 use Illuminate\Support\Facades\Input;
10 use Response;
11 use Alert;
12
13 class ImagesController extends Controller

Well done! Go ahead and test your application! Let’s make sure that everything is working properly.
Chapter 2: Front End Recipes 183

Crop the image successfully

Note: Sometimes, you may not see any changes. This is the browser cache issue. You
have to manually refresh the page to clear your browser cache and see the new image.
There are many ways to solve this issue: using a different image name, using Javascript
to reload the page automatically, adding a timestamp to the image’s name, redirecting
users to a different page, etc.

Additionally, you may also set cropper options using $().cropper(options). For example, you may
Chapter 2: Front End Recipes 184

set some options as follows:

1 $("#image").cropper({
2 aspectRatio: 200/200,
3 resizable: true,
4 zoomable: false,
5 rotatable: false,
6 });

Be sure to check out the documentation¹¹¹ to know more about other options.

Recipe 206 Wrap-up

Tag: Version 0.14 - Recipe 206¹¹²

Congratulations! Now that you know the theory behind the cropping image functionality.
Don’t forget to take advantage of all features of Cropper plugin to enhance your application. There
is much more that you can now build using this technique. For example, you can use Cropper to get
the height, width and x/y coordinates of the crop box, then crop the image at the backend.
Remember, this is just a beginning.
Have fun coding!

The chapter is now complete. However, more recipes will be added later. Feedback from
our readers is always welcome. Please leave your testimonials at http://learninglaravel.net/laravel¹¹³

¹¹¹https://github.com/fengyuanchen/cropper
¹¹²https://github.com/LearningLaravel/cookbook/releases/tag/v0.14
¹¹³http://learninglaravel.net/laravel
Chapter 3: Deployment Recipes
Introduction
After learning some tricky topics to successfully build a full stack application, it’s time to deploy
your app. This chapter contains some helpful recipes about working with Heroku, Digital Ocean,
etc.
Deploy your applications blazingly fast using GIT and secret techniques are also discussed in the
book!

List Of Recipes

Deployment recipes
• Recipe 301 - Deploying your applications using DigitalOcean (PHP 7 and Nginx)
• Recipe 302 - Deploying your applications using Heroku
• Recipe 303 - Deploying your applications blazingly fast using GIT.

Recipe 301 - Deploying your applications using

DigitalOcean (PHP 7 and Nginx)

What will we learn?

This recipe shows you how to deploy your Laravel applications using DigitalOcean. In this recipe,
we’ll use PHP 7 (which is twice as fast as PHP 5) and Nginx 1.9.x.

All about DigitalOcean

DigitalOcean is one of the best cloud server providers that you can find around the world. You can
get their cheapest SSD Cloud Server for just $5 a month. Millions of amazing sites across the web
are hosted on DigitalOcean!

185
Chapter 3: Deployment Recipes 186

DigitalOcean

If you’re not a DigitalOcean member yet, you’ll need to register a new account at DigitalOcean.
You can use the link below to get $10 for free, that means you can use their $5 cloud server for
two months.
Register a new DigitalOcean account and get $10 for free!¹¹⁴
¹¹⁴https://www.digitalocean.com/?refcode=5f7e95cb014e
Chapter 3: Deployment Recipes 187

Note: You will need to provide your credit card information or Paypal to activate your
account.

Little tip: Learning Laravel also has a freebies section¹¹⁵, you may find some useful coupons there.

Creating a new droplet (VPS)

After your account has been activated. You will need to create a “droplet”, which is a cloud server.
Click on the Create Droplet button or go to:
https://cloud.digitalocean.com/droplets/new¹¹⁶
Follow these steps:

• At the Choose an Image section, be sure to choose Ubuntu 14.04 x64.

• Select your droplet size and region that you like ($5/month or $10/month is ok).
• At the Choose a hostname section, name your Droplet (For example, learninglaravel).
• You may skip other settings.
• Click “Create” to create your first cloud server!

Note: There are some newer versions of Ubuntu (14.10, 15.04, etc.), but the 14.04 is an
LTS (Long Term Support) version, that means we will receive updates and support for
at least five years. Ubuntu 14.04 also has more compatible plugins. By the way, you may
try to use a newer version if you want.

Creating a new droplet

Wait for a few seconds…

Congratulations! You just have a new Ubuntu VPS!
Check your email to get the username and password, you will need to use them to access your server.

¹¹⁵http://learninglaravel.net/topics/freebies
¹¹⁶https://cloud.digitalocean.com/droplets/new
Chapter 3: Deployment Recipes 188

1 Droplet Name: learninglaravel

2 IP Address: 128.199.206.121
3 Username: root
4 Password: yourPassword

Installing PHP 7, Nginx and other packages

Now you can access the new server via Terminal or Git Bash by using this command:

1 ssh root@yourIPAddress

Change your password

The first time you login, it will ask you to change the password. Enter the current Unix password
again, and then enter your new password to change it.
Finally, run this command to check and update all current packages to the latest version:

1 apt-get update && apt-get upgrade

Say Y (Yes) if it asks you anything.

We’re now ready to install PHP 7, Nginx and other packages!
First of all, we need to add Ondrej’s PPA to the system’s Apt sources by running this command:
Chapter 3: Deployment Recipes 189

1 sudo add-apt-repository ppa:ondrej/php

Note: A PPA (Personal Package Archive) is an Apt repository hosted on Launchpad.

Third-party developers can distribute their custom PPA packages for Ubuntu outside of
the official channels. We have to add the Ondrej’s PPA because it supports PHP 7.0 for
Ubuntu.

Run this command again to update our local packages:

1 sudo apt-get update

Next, run this command to install Nginx, PHP 7, PHP7.0-FPM, PHP-MySQL, PHP7.0-Zip, Curl,
phpredis, xdebug and other useful packages.

1 apt-get -y install nginx php7.0 php7.0-fpm php7.0-mysql php7.0-curl php7.0-xml g\

2 it php7.0-zip php-redis php-xdebug php7.0-mcrypt
3 php-mbstring php7.0-mbstring php-gettext php7.0-gd

Alternatively, you may use this command to install more packages:

1 apt-get -y install nginx php7.0-fpm php7.0-cli php7.0-common php7.0-json php7.0-\

2 opcache php7.0-mysql php7.0-phpdbg
3 php7.0-gd php7.0-imap php7.0-ldap php7.0-pgsql php7.0-pspell php7.0-recode php7.\
4 0-tidy php7.0-dev php7.0-intl php7.0-gd
5 php7.0-curl php7.0-zip php7.0-xml git php-redis php-xdebug php7.0-mcrypt php-mbs\
6 tring php7.0-mbstring php-gettext

You may use this command to see all the PHP 7 packages:

1 sudo apt-cache search php7-*

Available packages:
Chapter 3: Deployment Recipes 190

1 php-radius - radius client library for PHP

2 php-http - PECL HTTP module for PHP Extended HTTP Support
3 php-uploadprogress - file upload progress tracking extension for PHP
4 php-mongodb - MongoDB driver for PHP
5 php7.0-common - documentation, examples and common module for PHP
6 libapache2-mod-php7.0 - server-side, HTML-embedded scripting language (Apache 2 \
7 module)
8 php7.0-cgi - server-side, HTML-embedded scripting language (CGI binary)
9 php7.0-cli - command-line interpreter for the PHP scripting language
10 php7.0-phpdbg - server-side, HTML-embedded scripting language (PHPDBG binary)
11 php7.0-fpm - server-side, HTML-embedded scripting language (FPM-CGI binary)
12 libphp7.0-embed - HTML-embedded scripting language (Embedded SAPI library)
13 php7.0-dev - Files for PHP7.0 module development
14 php7.0-curl - CURL module for PHP
15 php7.0-enchant - Enchant module for PHP
16 php7.0-gd - GD module for PHP
17 php7.0-gmp - GMP module for PHP
18 php7.0-imap - IMAP module for PHP
19 php7.0-interbase - Interbase module for PHP
20 php7.0-intl - Internationalisation module for PHP
21 php7.0-ldap - LDAP module for PHP
22 php7.0-mcrypt - libmcrypt module for PHP
23 php7.0-readline - readline module for PHP
24 php7.0-odbc - ODBC module for PHP
25 php7.0-pgsql - PostgreSQL module for PHP
26 php7.0-pspell - pspell module for PHP
27 php7.0-recode - recode module for PHP
28 php7.0-snmp - SNMP module for PHP
29 php7.0-tidy - tidy module for PHP
30 php7.0-xmlrpc - XMLRPC-EPI module for PHP
31 php7.0-xsl - XSL module for PHP (dummy)
32 php7.0 - server-side, HTML-embedded scripting language (metapackage)
33 php7.0-json - JSON module for PHP
34 php-all-dev - package depending on all supported PHP development packages
35 php7.0-sybase - Sybase module for PHP
36 php7.0-sqlite3 - SQLite3 module for PHP
37 php7.0-mysql - MySQL module for PHP
38 php7.0-opcache - Zend OpCache module for PHP
39 php-apcu - APC User Cache for PHP
40 php-xdebug - Xdebug Module for PHP
41 php-imagick - Provides a wrapper to the ImageMagick library
42 php-ssh2 - Bindings for the libssh2 library
Chapter 3: Deployment Recipes 191

43 php-redis - PHP extension for interfacing with Redis

44 php-memcached - memcached extension module for PHP5, uses libmemcached
45 php-apcu-bc - APCu Backwards Compatibility Module
46 php-amqp - AMQP extension for PHP
47 php7.0-bz2 - bzip2 module for PHP
48 php-rrd - PHP bindings to rrd tool system
49 php-uuid - PHP UUID extension
50 php-memcache - memcache extension module for PHP5
51 php-gmagick - Provides a wrapper to the GraphicsMagick library
52 php-smbclient - PHP wrapper for libsmbclient
53 php-zmq - ZeroMQ messaging bindings for PHP
54 php-igbinary - igbinary PHP serializer
55 php-msgpack - PHP extension for interfacing with MessagePack
56 php-geoip - GeoIP module for PHP
57 php7.0-bcmath - Bcmath module for PHP
58 php7.0-mbstring - MBSTRING module for PHP
59 php7.0-soap - SOAP module for PHP
60 php7.0-xml - DOM, SimpleXML, WDDX, XML, and XSL module for PHP
61 php7.0-zip - Zip module for PHP
62 php-tideways - Tideways PHP Profiler Extension
63 php-yac - YAC (Yet Another Cache) for PHP
64 php-mailparse - Email message manipulation for PHP
65 php-oauth - OAuth 1.0 consumer and provider extension
66 php-propro - propro module for PHP
67 php-raphf - raphf module for PHP
68 php-solr - PHP extension for communicating with Apache Solr server
69 php-stomp - Streaming Text Oriented Messaging Protocol (STOMP) client module for\
70 PHP
71 php-gearman - PHP wrapper to libgearman

Note: You may remove some packages that you don’t use and install them later when
you need.

Once installed, you can now visit your Nginx server via the IP address (Be sure to use your droplet’s
IP address):
http://128.199.206.121¹¹⁷
¹¹⁷http://128.199.206.121
Chapter 3: Deployment Recipes 192

Creating a new droplet

We can check the installed version of PHP by using this command:

1 php -v

PHP 7’s running

After that, we need to edit the server block (aka virtual hosts) file. Open it:

1 sudo nano /etc/nginx/sites-available/default

Find:

1 root /usr/share/nginx/html;

This is the path to your Laravel application, we don’t have a Laravel application yet, but let’s change
it to:

1 root /var/www/learninglaravel.net/html;

Note: You may use a different address (change learninglaravel.net to your website’s
address) if you want. Be sure to replace all the addresses.

Find:
Chapter 3: Deployment Recipes 193

1 index index.html index.htm;

Change to:

1 index index.php index.html index.htm;

Find:

1 location / {
2 # First attempt to serve request as file, then
3 # as directory, then fall back to displaying a 404.
4 try_files $uri $uri/ =404;
5 # Uncomment to enable naxsi on this location
6 # include /etc/nginx/naxsi.rules
7 }

Change to:

1 location / {
2 # First attempt to serve request as file, then
3 # as directory, then fall back to displaying a 404.
4 # try_files $uri $uri/ =404;
5 try_files $uri/ $uri /index.php?$query_string;
6 # Uncomment to enable naxsi on this location
7 # include /etc/nginx/naxsi.rules
8 }

Add below:

1 location ~ \.php$ {
2 try_files $uri /index.php =404;
3 fastcgi_split_path_info ^(.+\.php)(/.+)$;
4 fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
5 fastcgi_index index.php;
6 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
7 include fastcgi_params;
8 }

Save the file and exit.

In nano, you can do this by pressing Ctrl-X to exit, then press y to confirm, and Enter to overwrite
the file.
As you know, we don’t have the /var/www/learninglaravel.net/html directory yet, let’s create it.
Chapter 3: Deployment Recipes 194

1 sudo mkdir -p /var/www/learninglaravel.net/html

Be sure to give it a proper permission:

1 sudo chown -R www-data:www-data /var/www/learninglaravel.net/html

2
3 sudo chmod 755 /var/www

Next, let’s make a test file called index.html to test our configurations:

1 sudo nano /var/www/learninglaravel.net/html/index.html

Here is the content of the index.html file:

1 <html>
2 <head>
3 <title>Learning Laravel</title>
4 </head>
5 <body>
6 <h1>Learning Laravel test page. PHP 7 and Nginx</h1>
7 </body>
8 </html>

Finally, restart PHP and Nginx by running the following:

1 service php7.0-fpm restart

2 service nginx restart

Now when you visit your website via its IP address, you should see:

PHP 7’s running

Well done! You now have a working PHP 7 installation.

Chapter 3: Deployment Recipes 195

Installing Composer and Laravel

Now that we have everything in order, we will be going to install Composer and use it to install
Laravel!
If you’re installing Laravel on a 512MB droplet, you must add a swapfile to Ubuntu to prevent it
from running out of memory. You can add a swapfile easily by running these commands:

1 dd if=/dev/zero of=/swapfile bs=1024 count=512k

2 mkswap /swapfile
3 swapon /swapfile

Note: If your server is restarted, you have to add the swapfile again.

Run this simple command to install Composer:

1 curl -sS https://getcomposer.org/installer | php

Once installed, run this command to move composer.phar to a directory that is in your path, so
that you can access it globally:

1 mv composer.phar /usr/local/bin/composer

Next, we will use Composer to download the Laravel Installer:

1 composer global require "laravel/installer"

Installing Laravel Installer

If you read the Laravel docs, you may see this:

“Make sure to place the ∼/.composer/vendor/bin directory in your PATH so the laravel executable
can be located by your system.”
Let’s do that by running these commands:
Chapter 3: Deployment Recipes 196

1 export PATH="$PATH:~/.composer/vendor/bin"
2 source ~/.bashrc

Once finished, we’re finally at the part that we’ve been waiting for: Installing Laravel!
We will put our Laravel application at /var/www/learninglaravel.net/. Type the following to get
there:

1 cd /var/www/learninglaravel.net/

It’s time to install Laravel:

1 laravel new laravel

Installing Laravel

This is a pretty standard process. I hope you understand what we’ve done. If you don’t, please read
Learning Laravel 5 book’s Chapter 1¹¹⁸.
By now, we should have our Laravel app installed at /var/www/learninglaravel.net/laravel.
Once that step is done, we must give the directories proper permissions:

1 chown -R www-data /var/www/learninglaravel.net/laravel/storage

2 chmod -R 775 /var/www/learninglaravel.net/laravel/public
3 chmod -R 0777 /var/www/learninglaravel.net/laravel/storage
4
5 chgrp -R www-data /var/www/learninglaravel.net/laravel/public
6 chmod -R 775 /var/www/learninglaravel.net/laravel/storage

These commands should do the trick.

One last step, edit the server block file again:
¹¹⁸http://learninglaravel.net/laravel5/installing-laravel
Chapter 3: Deployment Recipes 197

1 sudo nano /etc/nginx/sites-available/default

Find:

1 root /var/www/learninglaravel.net/html;

Change to:

1 root /var/www/learninglaravel.net/laravel/public;

Finally, restart Nginx:

1 service nginx restart

Go ahead and visit your Laravel app in browser:

Laravel is running

Your application is now ready to rock the world!

Possible Errors
If you see this error:
Chapter 3: Deployment Recipes 198

1 Whoops, looks like something went wrong.

2 No supported encrypter found. The cipher and / or key length are invalid.

This is a Laravel 5 bug. Sometimes, your app doesn’t have a correct application key (this key is
generated automatically when installing Laravel)
You need to run these commands to fix this bug:

1 php artisan key:generate

2
3 php artisan config:clear

Finally, restart your Nginx server:

1 service nginx restart

Take a snapshot of your application

I know that the process is a bit complicated. The great thing is, you can take a snapshot of your VPS,
and then you can restore it later. When you have new projects, you don’t have to start over again!
Everything can be done by two clicks!
To take a snapshot, shutdown your server first:

1 shutdown -h now

Now, go to DigitalOcean Control Panel. Go to your droplet. Click on the Snapshots button to view
the Snapshots section.
Chapter 3: Deployment Recipes 199

Take a snapshot

Enter a name and then take a snapshot!

You may use this snapshot to restore your VPS later by using the Restore Droplet functionality.

Tips
Here are some little tips when using a droplet:
Tip 1:
If you have a domain and you want to connect it to your site, open the server block file, and edit
this line:

1 server_name localhost;

Modify to:

1 server_name yourDomain.com;

Now you can be able to access your site via your domain.
Tip 2:
You can access your server using FTP as well (to upload, download files, etc.), use this information:
Chapter 3: Deployment Recipes 200

1 Host: IP address or your domain

2
3 User: root
4
5 Password: your password
6
7 Port: 22

Recipe 301 Wrap-up

Wonderful! We now have a Nginx web server running PHP 7!
The great thing is, Laravel 5.2 fully supports PHP 7! The performance of our sites should be improved.
Please note that this technique can be used to install Laravel on other Ubuntu servers, that means
you can use other VPS services as well.

Recipe 302 - Deploying your applications using Heroku

What will we learn?

This recipe shows you how to install Laravel on Heroku for free.

All about Heroku

Heroku is a popular cloud hosting service that supports PHP, Ruby, Java, and many other languages.
One of the best features of Heroku is, we can register a Heroku account and deploy our applications
to Heroku for free.
About the pricing, DigitalOcean is actually cheaper and I personally prefer DigitalOcean, but Heroku
is still a good option if we just want to quickly test your applications on a production environment
or show our projects to our friends and colleagues.
To use Heroku, we need to Register a Heroku account¹¹⁹ first.
¹¹⁹https://signup.heroku.com
Chapter 3: Deployment Recipes 201

Register a Heroku account

Once having an account, we can choose PHP to get started.

Note: Keep in mind that you can choose other languages later.
Chapter 3: Deployment Recipes 202

Register a Heroku account

Next, we must download and install Heroku Toolbelt¹²⁰, which is a terminal utility that provides
you access to the Heroku Command Line Interface (Heroku CLI).
You may choose and download Heroku Toolbelt for your system at the devcenter¹²¹ or at the Heroku
Toolbelt page¹²².
Once installed, we can use the heroku command from our command shell:

1 heroku
¹²⁰https://toolbelt.heroku.com
¹²¹https://devcenter.heroku.com/articles/getting-started-with-php#set-up
¹²²https://toolbelt.heroku.com
Chapter 3: Deployment Recipes 203
Chapter 3: Deployment Recipes 204

The first time we use the heroku command, Heroku installs some dependencies and plugins for
us, and then we’ll see a list of commands.
Done! We can now use Heroku to deploy our applications.

Creating a new Laravel application

Just for testing purposes, we’ll create a new Laravel application and then deploy it to Heroku later.
First, SSH into our Homestead:

1 vagrant ssh

Then navigate to our Code directory.

1 cd Code

Now let’s create a new laraheroku app:

Note: Feel free to change the name of the app to your liking.

1 laravel new laraheroku

Great! We should have a new Laravel application!

Heroku command

Now we need to write down or just remember the application key. We’ll need this key later.

1 base64:trchbNOb9jbqH8rz03/kLhMIybDIIcxHZi4zKMPx5tc=

Last step, we’ll need to initialize a new Git repository.

Be sure that we’re at the laraheroku’s root:

1 cd laraheroku

Initializing a new Git repo by using the following:

Chapter 3: Deployment Recipes 205

1 git init
2 git add .
3 git commit -m "My new laraheroku app"

Our code is ready to go!

Delploying to Heroku
We’ll need to create a Procfile, which is a configuration file that tells Heroku about our applications’
settings. Our Laravel applicationâ€™s root is the public/ subdirectory, so we have to create a new
Procfile to serve the application from /public.
To begin, be sure that we’re at the laraheroku’s root.
Creating a new Procfile and add “web: vendor/bin/heroku-php-apache2 public” to the file by
using the following:

1 echo web: vendor/bin/heroku-php-apache2 public/ > Procfile

Next, we’ll add the new file to our Git repository:

1 git add .
2 git commit -m "Procfile for Heroku"

Now we create a new Heroku application that we can push to, using this command:

1 heroku create

Important: We’ve installed Heroku Toolbelt on our system (not on Homestead),

so be sure that we run the heroku create command on our system (for example:
∼/Code/laraheroku).

You may need to enter your Heroku’s credentials.

Heroku command

As you see, a random name was automatically chosen for our application. https://intense-oasis-
43391.herokuapp.com¹²³ is my application URL.
Heroku automatically detects our application is written in PHP. However, we should tell Heroku
about that again, because sometimes it may not work as expected:
¹²³https://intense-oasis-43391.herokuapp.com
Chapter 3: Deployment Recipes 206

1 heroku buildpacks:set heroku/php

Before deploying our app for the first time, we must set a Laravel encryption key, which is the
application key used by Laravel to encrypt user sessions and other information.
We may use heroku config:set APP_KEY= command to do this:

1 heroku config:set APP_KEY=base64:eXJbtMeuhk3LtwIa7Xh4z1mEPQ4dgn3nT20aIsTZEkM=

Note: Replace base64:eXJbtMeuhk3LtwIa7Xh4z1mEPQ4dgn3nT20aIsTZEkM= with

your key.

We should have the key already when creating our new Laravel application. If you don’t have the
key, you can generate a new one by running this Artisan command (on Homestead):

1 php artisan key:generate --show

Finally, we can deploy our application to Heroku by pushing our files to the Heroku Git remote
(https://git.heroku.com/intense-oasis-43391.git):

1 git push heroku master

Deploy to Heroku

Head over to your Heroku application:

Note: https://intense-oasis-43391.herokuapp.com¹²⁴ is my application, your applica-

tion’s URL should be different.

You may also use this Heroku command to open your application in a new window:

¹²⁴https://intense-oasis-43391.herokuapp.com
Chapter 3: Deployment Recipes 207

1 heroku open

A new Laravel app

Congratulations! Your application is now running on Heroku!

Recipe 302 Wrap-up

This concludes our exploration of the Heroku cloud application platform. As you see, the deployment
process is very straight forward and simple.
In addition, you may install a database by reading the Heroku ClearDB (MySQL alternative)¹²⁵ or
Heroku Postgres¹²⁶ documentation.
Using Git to deploy our application is really great, right?
We can do the same thing when using our own server (DigitalOcean droplet or other VPS services).
Let’s learn about this technique in the next recipe.
¹²⁵https://devcenter.heroku.com/articles/cleardb
¹²⁶https://devcenter.heroku.com/articles/heroku-postgresql
Chapter 3: Deployment Recipes 208

Recipe 303 - Deploying your applications blazingly fast

using GIT

What will we learn?

This recipe shows you how to deploy your applications using Git.

Creating a Git remote

In this section, I’ll show you how to create a Git remote, which is a Git repository for our project.
We can put this Git repository anywhere.
Absolutely, we can push changes to a Git remote and pull changes from it. That means, we don’t need
to use FTP to upload or download our files manually anymore. Git handles all the tedious processes
for us. Additionally, Git automatically compresses all our files, so we can deploy our applications
much faster.
Let’s get started by creating a new Git repository first.
Login to your server via SSH:

1 ssh root@yourIPAddress

Note: Let’s assume that we’re using DigitalOcean here.

Navigate to our site directory:

1 cd /var/www/learninglaravel.net

I will create a new directory called repos and put my Git repository there:

1 mkdir repos
2 cd repos

Now we can initialize a new Git repository by using the following:

1 git init --bare --shared learninglaravel.git

Next, go back to our site directory:

Chapter 3: Deployment Recipes 209

1 cd /var/www/learninglaravel.net

Assuming that our Laravel app will be installed at /var/www/learninglaravel.net/laravel, we’ll

use Git clone to clone the learninglaravel.git repository:

1 git clone /var/www/learninglaravel.net/repos/learninglaravel.git laravel

If you already have the laravel directory, you should remove it by running this command:

1 rm -r laravel

Now on our local machine or Homestead, go to our application directory:

1 cd Code/laravel

Note: If you don’t have the laravel directory yet, be sure to create a new Laravel
application and name it laravel.

We can add a new git remote called learninglaravel here:

1 git remote add learninglaravel root@yourIPAddress:/var/www/learninglaravel.net/r\

2 epos/learninglaravel.git

Note: if you’re using a different site name, be sure to replace learninglaravel with
your site name. Replace yourIPAddress with your real server IP address as well.

That’s it for now!

Deploying our application to a VPS using Git

Once we have a Git remote (learninglaravel), we can push our files to the server using Git:

1 git add .
2 git commit -a -m "Push files to the server"
3 git push learninglaravel master

Now our learninglaravel.git repository should contain all the files.

On our server, navigate to the laravel directory:
Chapter 3: Deployment Recipes 210

1 cd /var/www/learninglaravel.net/laravel

Next, we can use git pull to fetch learninglaravel.git repository and merge the changes into the
laravel repository:

1 git pull origin master

Once that step is done, we must give the directories proper permissions:

1 chown -R www-data /var/www/learninglaravel.net/laravel/storage

Note: We only need to do this one time.

To ensure that everything is working fine, let’s visit our site:

A new Laravel app

Perfect! We’ve used Git to deploy our application!

Next time, if we make any changes or we want to upload files to the server, we can simply use these
commands (On our local machine/homestead):
Chapter 3: Deployment Recipes 211

1 git add .
2 git commit -a -m "Update files"
3 git push learninglaravel master

And then use git pull to merge the changes (on our server):

1 git pull origin master

Recipe 303 Wrap-up

It took a bit of work, but we finally deploy our application to our server.
This technique is really great and it saves me a lot of time. Faithfully, I haven’t used FTP in a long
time. Git does the job better and faster.
Actually, you may use some third party services to deploy your applications, but Git is free and it’s
very easy to use.
Remember that, this is just a basic technique, you can do a lot more with Git.
I hope you enjoy reading my books a much as I enjoy writing them.
Happy learning and good luck!
Please send me your valuable feedback ([email protected]) and leave your testimonial or
review here¹²⁷.

¹²⁷http://learninglaravel.net/laravel

Report Lap 2
No ratings yet
Report Lap 2
19 pages
Learn PHP in A Day
100% (1)
Learn PHP in A Day
181 pages
Laravel Testing Decoded
No ratings yet
Laravel Testing Decoded
279 pages
Build Mobile Apps With Ionic and Firebase Sample
No ratings yet
Build Mobile Apps With Ionic and Firebase Sample
43 pages
Jenkins Tutorial PDF
0% (1)
Jenkins Tutorial PDF
16 pages
Functional PHP
No ratings yet
Functional PHP
39 pages
Project Plan Excel Template
No ratings yet
Project Plan Excel Template
11 pages
Learning Laravel
No ratings yet
Learning Laravel
31 pages
Learn Laravel in 1 Week: Devan Singaram
100% (1)
Learn Laravel in 1 Week: Devan Singaram
35 pages
Tamás Sallai - Asynchronous Programming Patterns in Javascript - How To Use Async - Await and Promises To Solve Programming Problems-Leanpub (2021)
No ratings yet
Tamás Sallai - Asynchronous Programming Patterns in Javascript - How To Use Async - Await and Promises To Solve Programming Problems-Leanpub (2021)
135 pages
Create Role and Permission (Using Entrust) in Laravel - Imron02
No ratings yet
Create Role and Permission (Using Entrust) in Laravel - Imron02
13 pages
Learn Kubernetes in Under 3 Hours: A Detailed Guide To Orchestrating Containers PDF
No ratings yet
Learn Kubernetes in Under 3 Hours: A Detailed Guide To Orchestrating Containers PDF
61 pages
Ionic Building Mobile Apps With Ionic Framework
100% (1)
Ionic Building Mobile Apps With Ionic Framework
113 pages
WooCommerce Mobile App - Ionic 3
No ratings yet
WooCommerce Mobile App - Ionic 3
22 pages
A Software Engineer Learns Html5, Javascript and Jquery
100% (1)
A Software Engineer Learns Html5, Javascript and Jquery
297 pages
Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1
100% (2)
Bootstrap Overview: Silicus Training Name I V1.0 Silicus Technologies India PVT LTD © 2017 1
50 pages
Android Constraint Layout
No ratings yet
Android Constraint Layout
2 pages
WooCommerce Theme Developer Handbook - WooCommerce
No ratings yet
WooCommerce Theme Developer Handbook - WooCommerce
12 pages
Intro To Jenkins
No ratings yet
Intro To Jenkins
31 pages
Jenkins Essentials - Sample Chapter
No ratings yet
Jenkins Essentials - Sample Chapter
31 pages
Multi Threading: Defnition of Thread
No ratings yet
Multi Threading: Defnition of Thread
17 pages
HTML & XML For Beginners
No ratings yet
HTML & XML For Beginners
417 pages
Symfony5 The Fast Track PDF
100% (1)
Symfony5 The Fast Track PDF
342 pages
Important Tips CKA CKAD July 2018
No ratings yet
Important Tips CKA CKAD July 2018
3 pages
Python Console Application Development 2
No ratings yet
Python Console Application Development 2
27 pages
Javascript Goodies
100% (12)
Javascript Goodies
496 pages
Jenkins Tips
No ratings yet
Jenkins Tips
23 pages
Angularjs Cookbook PDF
75% (4)
Angularjs Cookbook PDF
154 pages
Building A React Native JWT Client - API Requests and AsyncStorage
No ratings yet
Building A React Native JWT Client - API Requests and AsyncStorage
24 pages
Theme Development WordPress Codex
No ratings yet
Theme Development WordPress Codex
15 pages
FULL Stack Web Development: 100% Job Guarantee Program
No ratings yet
FULL Stack Web Development: 100% Job Guarantee Program
13 pages
Jenkins From Scratch
No ratings yet
Jenkins From Scratch
95 pages
Vuejs Tutorial
100% (1)
Vuejs Tutorial
185 pages
Little ASP Net Core Book
No ratings yet
Little ASP Net Core Book
122 pages
Docker Mastery - 5
No ratings yet
Docker Mastery - 5
87 pages
Hacking With React
100% (1)
Hacking With React
123 pages
Jquery Workshop
No ratings yet
Jquery Workshop
254 pages
How To Code in Node - js-p1
No ratings yet
How To Code in Node - js-p1
300 pages
Laravel Development Using Phpstorm: Prerequisites (Plugin Installation and Configuration)
No ratings yet
Laravel Development Using Phpstorm: Prerequisites (Plugin Installation and Configuration)
18 pages
Angular Material Tutorial
0% (1)
Angular Material Tutorial
17 pages
Bootstrap (Front-End Framework)
No ratings yet
Bootstrap (Front-End Framework)
4 pages
Google Flutter
No ratings yet
Google Flutter
16 pages
Golang Book
100% (1)
Golang Book
293 pages
58-Browser Tests (Laravel Dusk) - Laravel - The PHP Framework For Web Artisans
0% (1)
58-Browser Tests (Laravel Dusk) - Laravel - The PHP Framework For Web Artisans
24 pages
Laravel Artisan Sample
No ratings yet
Laravel Artisan Sample
199 pages
Latihan CRUD PHP Native
No ratings yet
Latihan CRUD PHP Native
10 pages
User Authentication With Laravel - Laravel Book
No ratings yet
User Authentication With Laravel - Laravel Book
9 pages
Writing Mysql Scripts With PHP and Pdo: Paul Dubois
No ratings yet
Writing Mysql Scripts With PHP and Pdo: Paul Dubois
11 pages
WordPress PHP Versions
No ratings yet
WordPress PHP Versions
19 pages
Resume 3
No ratings yet
Resume 3
4 pages
Simplilearn DevOps Engineer Master Program
No ratings yet
Simplilearn DevOps Engineer Master Program
22 pages
NET Core - Xamarin Forms + Prism - Xamarin Classic + MVVM Cross (Veterinary)
No ratings yet
NET Core - Xamarin Forms + Prism - Xamarin Classic + MVVM Cross (Veterinary)
447 pages
Kubernetes Succinctly
No ratings yet
Kubernetes Succinctly
121 pages
NodeJS + MongoDB
100% (1)
NodeJS + MongoDB
12 pages
HTML5 Applications Development Fundamentals 98-375
100% (8)
HTML5 Applications Development Fundamentals 98-375
297 pages
A Complete Guide To Flexbox - CSS-Tricks PDF
No ratings yet
A Complete Guide To Flexbox - CSS-Tricks PDF
533 pages
Bootiful Applications With Spring Boot
No ratings yet
Bootiful Applications With Spring Boot
47 pages
Prometheus Up and Running Infrastructure
No ratings yet
Prometheus Up and Running Infrastructure
6 pages
NW.js Essentials
From Everand
NW.js Essentials
Alessandro Benoit
No ratings yet
PHP and MongoDB Web Development Beginner’s Guide
From Everand
PHP and MongoDB Web Development Beginner’s Guide
Rubayeet Islam
No ratings yet
Fullstack React
No ratings yet
Fullstack React
9 pages
EViews 5 Users Guide
No ratings yet
EViews 5 Users Guide
990 pages
BSNL Nova Net PC
No ratings yet
BSNL Nova Net PC
4 pages
SpaceLogic™ AS-P Automation Server - SXWASPSBX10001
No ratings yet
SpaceLogic™ AS-P Automation Server - SXWASPSBX10001
2 pages
Advanced Troubleshooting Cisco WAAS
No ratings yet
Advanced Troubleshooting Cisco WAAS
108 pages
BPO Call Centre Resume Sample Word
No ratings yet
BPO Call Centre Resume Sample Word
3 pages
Ganda Ko
43% (7)
Ganda Ko
15 pages
How To Draw Hair - Stan Prokopenko's Blog
100% (1)
How To Draw Hair - Stan Prokopenko's Blog
16 pages
Mba e Business
100% (2)
Mba e Business
18 pages
Trading Application SRS Document
No ratings yet
Trading Application SRS Document
6 pages
Siebel Administrator Resume PDF
No ratings yet
Siebel Administrator Resume PDF
2 pages
Text Tutorial Ps4
No ratings yet
Text Tutorial Ps4
3 pages
Ccna3 Mod 1.1-Vlsm
No ratings yet
Ccna3 Mod 1.1-Vlsm
22 pages
Resume
No ratings yet
Resume
3 pages
FAA Paver
No ratings yet
FAA Paver
30 pages
Intelligent Security API (ANPR) Part 2
No ratings yet
Intelligent Security API (ANPR) Part 2
13 pages
Of Mushroom Men: Dungeonous Ctopus
No ratings yet
Of Mushroom Men: Dungeonous Ctopus
3 pages
What Is CAAS and IAAS in Cloud Computing
No ratings yet
What Is CAAS and IAAS in Cloud Computing
3 pages
Shailesh Singh Visen: Objective
No ratings yet
Shailesh Singh Visen: Objective
4 pages
SEO Fundamentals & Training - S3 v2
No ratings yet
SEO Fundamentals & Training - S3 v2
34 pages
IPSecurity - Computer Networks Questions & Answers - Sanfoundry
100% (2)
IPSecurity - Computer Networks Questions & Answers - Sanfoundry
7 pages
DFD and Database
No ratings yet
DFD and Database
9 pages
Last Mile - Mobile App For Logistics
No ratings yet
Last Mile - Mobile App For Logistics
12 pages
Minutes of The Meeting-Science Month Celebration 2021
No ratings yet
Minutes of The Meeting-Science Month Celebration 2021
3 pages
Employee Management System For DGLW
100% (7)
Employee Management System For DGLW
134 pages
1ST PT in Ict-Grade 5
No ratings yet
1ST PT in Ict-Grade 5
3 pages
Internetworking Devices
No ratings yet
Internetworking Devices
31 pages
Facial Hair Mask
No ratings yet
Facial Hair Mask
1 page
Needs Met Through RPGs
No ratings yet
Needs Met Through RPGs
19 pages
Group 2: "On The Rise of Citizen Journalism: Power To The People?"
67% (3)
Group 2: "On The Rise of Citizen Journalism: Power To The People?"
7 pages