You are a developer? Join our network of volunteering Developers!

Laravel 6 – Build Your First Laravel Application

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.

Default Laravel Homepage

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.

Laravel 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.

All Contacts, listed in a table

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.

Filling data in form
Our New Contact added to the bottom of the contact list

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!

Serving Machine Learning Model with MLFlow

We are going to briefly follow the Quickstart in the official MLFlow Documentation. We will create, serve and invoke a Machine Learning Model with MLFlow. Installation pip3 install mlflow Create a new folder for our little project and create a new file called...

Laravel 6 – Build Your First Laravel Application

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...

MLFlow vs. Metaflow

We compare two Machine Learning and Data Science frameworks - MLFlow vs. Metaflow. These Data Science and Machine Learning Frameworks are the most popular in their category - ML. They provide you a fixed set or best practices, methods, classed and helping tools (like...

Introduction to Ruby on Rails

Learn why Ruby on Rails can help speed up the development process. and why so many big companies rely on Ruby on Rails to run their business.

Serve Keras Model with Flask REST API

This tutorial will briefly discuss the benefits of serving a trained Machine Learning Model with an API. Then we will take a look at a precise example using a Keras Model and Python Flask to serve the model. You'll learn how to Serve Keras Model with Flask REST API....

How to create a WordPress Plugin

Introduction What is WordPress? A technical definition is "WordPress is an open source content management system (CRM) built in PHP". Currently WordPress is the most popular CRM available for free! If you've ever used WordPress, you definitely know about themes &...

Getting started with PHP 7 in 2020

What is PHP? PHP stands for Hypertext Preprocessor (earlier called "Personal home page"). It is an open source scripting language created for the web development. PHP is a server-side language which means all the code is rendered on server and only static HTML, CSS...

Complete Vue.js 3 Guide

This is the first and most comprehensive Guide to Vue.js 3. We give an overview of the Changes, an introduction in usage of VueJS3 with Example Codes.

IT Career Path Nobody Is Discussing

Whatever path you decide on, we will help you find out the ideal things to do to take. Your career path contains the jobs you should hit your final career objective. While the career path will appear different for everybody, aiming to acquire equal parts experience in...

Awesome Future of Frontend in 2020

Before we dive in to Future of Frontend in 2020. Let's begin with some basics as we gradually get more forward-looking. We obviously cannot know what technology will dominate in 2020 and what framework will pop up. But we can try at least. What is frontend? Frontend...