Introduction

Laravel is a powerful MVC PHP framework. From official docs „Laravel is a web application framework with expressive, elegant syntax“. You must’ve heard about Laravel if you’ve ever worked with PHP. Laravel has experienced major growth since it’s initial release in 2011. Laravel was created by Taylor Otwell. It became the most starred PHP framework on GitHub in 2015.

My goal with this article is to create a guide for those who just want to learn Laravel and explore PHP. This article will not cover every small detail about Laravel but will be enough to get you started with Laravel 6.

Prerequisites

• You should be familiar with HTML, CSS & most important Object-Oriented programming with PHP 7
• A local PHP environment (Valet, Homestead, Vagrant, XAMP, LAMP, etc.)
• A database (MySQL, SQLite etc.)
• Composer
• Node & NPM installed and updated

Note: For local environment I’ll be using LAMP (Linux Apache MySQL PHP) as there are no pre-configured environment like Homestead or Valet available for Linux. You can use Homestead for windows or Valet if you’re a Mac user.

I’ll explain how to create a new Laravel 6 application just as I would in real world environment. So let’s get started.

Planning

You must plan any project before coding it out. Planning a project before implementation is a major factor in its success. It doesn’t matter how you plan a project. You can plan it on Paper, whiteboard or some simple text file. You can also use Trello for planning out all the components you’re going to create in the project.

Today, we are going to create a Contact Book app. So let’s talk about goals of it.

1. Display all contacts in a list.
2. Create a form where people can add new contact.
3. Validate the form.
4. Insert the data into the database.

Get Started

Let’s create a brand-new Laravel project. I like to put all my projects in Development directory. Open your terminal and navigate to this directory.

mkdir Development
cd Development

Next, let’s install Laravel’s command line installer.

composer global require "laravel/installer"

Now, create a new Laravel project.

laravel new ContactBook

This will create a new directory at Development/ContactBook and install a stock Laravel app.

Navigate to newly created directory and run Laravel server by

cd ContactBook
php artisan serve

You’ll get this output, open your browser and navigate to given address.

Hurray! You’ve successfully installed default Laravel application.

Laravel 6 Environment File

Let’s open this newly created project in Editor. You can use any editor or IDE of your choice. My personal favorite IDE for Laravel development is PhpStorm. Now open .env (Environment) file.

Here, you can set different environment variables. You can change the name of the app by editing ‚APP_NAME‘. The main part here is ‚DB_*‘ variables. You can set different database by specifying driver name. Here you can also set SMTP details.

Setting up Authentication

Laravel made it very easy to enable Login/Registration functionality. In this tutorial, it’s not mandatory to set up authentication, so you can skip this part if you want to.

Laravel’s laravel/ui package provides a quick way to scaffold all the routes and views you need for authentication using a few simple commands:

composer require laravel/ui --dev
php artisan ui bootstrap --auth
npm install && npm run dev

This command will install a layout view, registration and login views, as well as routes for all authentication end-points. A HomeController will also be generated to handle post-login requests to your application’s dashboard.

With the basics set up and working, it’s time to start doing some coding.

Building a Contact List

Building a whole finished project is quite overwhelming, so it’s better if we divide our project in small parts. So let’s start with displaying a list of contacts. It may sound a small task but it still requires a database, table, view and query.

So let’s create a migration. We can create a migration by using Laravel artisan command line tool.

php artisan make:migration create_contact_books_table --create=contact_books

This command will create a new migration file database/migrations/{{datetime}}_create_contact_books_table.php

The file contains two methods: up and down. We’re interested in the up method for now. Add following columns in up method.

Schema::create('contact_books', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('phone')->unique();
            $table->text('description');
            $table->timestamps();
        });

Save it and run the migration by using following command.

php artisan migrate

Now, we’re going to need a model and some dummy data to work with our database. Laravel provides database seeder to populate table with dummy data and a factory class to generate dummy data.

php artisan make:model --factory ContactBook

This command will create a new Contact model. The --factory flag will generate a new factory file. Our newly created factory file will reside in database/factories. Open the ContactFactory.php file and fill the following:

$$factory->define(ContactBook::class, function (Faker $faker) {
    return [
        'name' => $faker->name,
        'phone' => $faker->phoneNumber,
        'description' => $faker->paragraph,
    ];
});

Now, let’s create a database seeder for contacts.

php artisan make:seeder ContactBookTableSeeder

This command will create a new seeder for our contact book table. Open the seeder file by going to database/seeds/ContactBookTableSeeder.php. Now paste the following in it.

 public function run()
 {
     factory(App\ContactBook::class, 5)->create();
 }

To activate the following, navigate to database/seeds/DatabaseSeeder.php. Now paste the following in it.

public function run()
{
     $this->call(ContactBookTableSeeder::class);
}

Now, run the migration and seed the tables by running the following command.

php artisan migrate:fresh --seed

We have successfully generated fake data for our app! Now we’re ready to create a new view to display a list of Contacts.

Routes & Views

Now it’s time to provide new routes to display a form to add new contact and list existing contacts. We can add new routes to our application in the routes/web.php file.

Here, we can create necessary routes for our app. Laravel provides a default route. To create a new route, we can either use dedicated controller class or closure. For sake of simplicity we’re going to use closure in our app.

Now, let’s update the home route to show all contacts from database table.

Route::get('/', function () {
    $contacts = App\ContactBook::all();

    return view('welcome', ['contacts' => $contacts]);
});

Here, in second argument we’re passing an array of contacts to our view welcome.

Next, edit the welcome.blade.php view to display our list of contacts.

<div class="content">
    <div class="col-md-12 mt-5 mb-5">
        <div class="text-center mb-3">
             <h3>Contact Book</h3>
        </div>
        <table class="table table-striped table-bordered table-dark">
            <thead>
               <tr>
                 <th width="20%">Contact Name</th>
                 <th width="20%">Phone Number</th>
                 <th>Description</th>
               </tr>
            </thead>
            <tbody>
            @foreach ($contacts as $contact)
              <tr>
                 <td>{{ $contact->name }}</td>
                 <td>{{ $contact->phone }}</td>
                 <td>{{ $contact->description }}</td>
              </tr>
            @endforeach
            </tbody>
        </table>
   </div>
</div>

Refresh the page in your browser.

New Contact Form

Now, it’s time to add a new form so user can add their own contacts in our table. To do that, first create a new route in our web.php file.

Route::get('/add', function (){
   return view('add');
});

Next, create a new view add.blade.php in our views folder. Add the following code in it.

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3">
                <div class="card">
                    <div class="card-header">
                        <h3>Add Contact</h3>
                    </div>
                    <div class="card-body">
                        <form action="/insert" method="post">
                            @csrf
                            <div class="form-group{{ $errors->has('name') ? ' has-error' : ''}}">
                                <label for="name">Name</label>
                                <input type="text" class="form-control" id="name" name="name" 
                                  placeholder="Name" value="{{ old('name') }}">
                                @if($errors->has('name'))
                                    <span class="help-block">{{ $errors->first('name') }}</span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('phone') ? ' has-error':'' }}">
                                <label for="phone">Phone</label>
                                <input type="text" class="form-control" id="phone" name="phone" 
                                 placeholder="Phone" value="{{ old('phone') }}">
                                @if($errors->has('phone'))
                                    <span class="help-block">{{ $errors->first('phone') }}</span>
                                @endif
                            </div>
                            <div class="form-group{{ $errors->has('description') ?' has- 
                             error':''}}">
                                <label for="description">Description</label>
                                <textarea class="form-control" id="description" 
                                  name="description"
                                  placeholder="description">{{ old('description') }}</textarea>
                                @if($errors->has('description'))
                                <span class="help-block">{{ $errors->first('description') </span>
                                @endif
                            </div>
                            <button type="submit" class="btn btn-primary">Add</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

This will create a new form with 3 fields, name, phone and description. The form action is ‚/insert‘ which we will next. Laravel require to send a csrf token with any type of form submission, so we’ve also included @csrf. This will create a hidden field with a random csrf token.

Navigate to ‚/add‘ in your browser, you’ll see something like this.

Handling form submission

Now, with the form is created we can start working on our insert route, to handle the form submission. Open routes file and add the following.

use Illuminate\Http\Request;

Route::post('/insert', function (Request $request) {
    $data = $request->validate([
        'name' => 'required|max:100',
        'phone' => 'required|max:30',
        'description' => 'required|max:255',
    ]);

    $contact = tap(new App\ContactBook($data))->save();

    return redirect('/');
});

This route is a little complicated than others so let’s walk through it.

First, we are injecting the Illuminate\Http\Request object, which holds the POST data and other data about the request.

Next, we use the request’s validate() method to validate the form data. The validated fields are returned to the $data variable, and we can use them to populate our model.

We require all three fields, and using the pipe character; we can define multiple rules. If validation fails, an exception is thrown, and the route returns the user with the original input data and validation errors.

Next, we use the tap() helper function to create a new ContactBook model instance and then save it. Using tap allows us to call save() and still return the model instance after the save.

Now allow our model to populate given data, we’ve to specify „fillable“ properties. Open ContactBook model and add the following.

class ContactBook extends Model
{
    protected $fillable = [
        'name',
        'phone',
        'description'
    ];
}

Now, let’s test this in our browser. Navigate to /add and submit the form with proper data.

Conclusion

Congratulations, you’ve created your first Laravel 6 app. This article was designed to get you started on building your app, and you can use this as a building block to gain the skills you need to develop your application.

I hope you liked this article. Subscribe to our mailing list for more articles by me. Have a great day!