Laravel Basic Tutorial – Database, Model, Routing, Layouts & Views

Our previous tutorial has explained how to install and configure Laravel application on Windows or Ubuntu. Now we’ll go through the basic guide on setting up Laravel 5 application and implementing data list functionality. This tutorial is perfect for beginners to starting with Laravel 5.
To show the basic functionality in Laravel, we’ll create an example application with Laravel 5, which will show you how to setup database, retrieve data from the database, and display data in the view. Here we’ll build a sample application to retrieve posts data from the database and list posts data in a view. This application includes the guides on following topics.

• Database configuration
• Database migrations
• Routing
• Model creation
• Blade templates, layouts, and views

Database Configuration

Open the .env file and specify the database credentials to connect the database for your Laravel application.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=root

The .env file can be found in the root directory. If you don’t see the .env file, enable the Show Hidden Files option.

Basic Post List Tutorial

Database Table Creation

Let’s create a “posts” table in the database that will hold all the posts data. The Artisan CLI can be used to generate a variety of classes for your Laravel project.
Navigate to the Laravel project directory.

cd /var/www/html/laravel

Use make:migration command to create a new database migration for “posts” table.

php artisan make:migration create_posts_table --create=posts

Open the database/migrations/xxxxxx_create_posts_table.php file and add the desired fields:

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title', 100);
            $table->text('content');
            $table->dateTime('created');
            $table->dateTime('modified');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('posts');
    }
}

Get details about database migration from here.
Use migrate Artisan command to run the migrations.

php artisan migrate

Model

Laravel’s default ORM is Eloquent. Eloquent makes easy to retrieve and store data in the database through models. Basically each model in Eloquent connected with a single database table.
Define a Post model that communicates with posts database table. Use make:model command to generate a Post model.

php artisan make:model Post

The newly created Post model will be located in app/ directory and it will look like the below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
}

Routing

Routes are used to point URLs to controllers and it is executed when user access a page.
For this example application, we’ll need only one route to display a list of the posts. Open the app/Http/routes.php file and define a route to display the post list. Also, we need to use the Post model to retrieve the posts data from the database.

<?php

use App\Post;
use Illuminate\Http\Request;

/**
 * Display All Posts
 */
Route::get('/posts', function () {
    //
});

Now retrieve the posts data from the database through Post model, specify a view (posts), and pass the posts data to the view.

Route::get('/posts', function (){
    $posts = Post::orderBy('created','desc')->get();
    return view('posts', [
        'posts' => $posts
    ]); 
});

Layouts & Views

Laravel uses the Blade templating engine to render the view and all the view files should have .blade.php extension. All Laravel views are stored in resources/views/ directory and create a resources/views/layouts/ directory to store the layouts.
Layout
Create a resources/views/layouts/app.blade.php file and Place the following code to define a simple layout.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>

        <!-- CSS And JavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->
            </nav>
        </div>
        @yield('content')
    </body>
</html>

View
Create a resources/views/posts.blade.php file and insert the following code. This view will display the existing posts data as list format.

@extends('layouts.app')

@section('content')
    
<!-- All Posts -->
@if(count($posts) > 0)
    
    <div class="panel panel-default">
        <div class="panel-heading">
            All Posts
        </div>

        <div class="panel-body">
            <table class="table table-striped task-table">

                <!-- Table Headings -->
                <thead>
                    <th>Title</th>
                    <th>Content</th>
                </thead>

                <!-- Table Body -->
                <tbody>
                @foreach($posts as $post)
                    <tr>
                        <td class="table-text">
                            <div>{{$post->title}}</div>
                        </td>
                        <td class="table-text">
                            <div>{{$post->content}}</div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>
    
@endif

@endsection

Testing

Now it’s time to check the functionality. Run /posts URL on the browser, you’ll see the post list has appeared from the posts database table.
Now you can forward to the advanced functionality of Laravel application. CRUD operations are the commonly used feature in Laravel, go through the below tutorial to learn the add, edit, and delete operations in Laravel 5.

• Laravel Tutorial Part 3: CRUD (Create Read Update Delete) Operations

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request