Laravel and PostgreSQL Web App PART 4

Introduction

Welcome to “Laravel and PostgreSQL web app Part 4”, a lesson in the multiple-series tutorial. In Part 3, you learned how to create the authentication process for your Laravel PostgreSQL web app. Today, in Part 4, we will go over the steps for you to create the dashboard for your application. The dashboard is where you’ll display your records plus use a modal form to insert new records into your PostgreSQL database. Let’s begin.

If you are already familiar with the steps on how to make a dashboard for your application and create a modal form, jump to The Code.

Prerequisites

Read and practice the samples given in Parts 1 through 3 in the multiple-series about creating a Laravel and PostgreSQL web app. The links are listed below:

Laravel and PostgreSQL Web App Part 1

Laravel and PostgreSQL Web App Part 2

Laravel and PostgreSQL Web App Part 3

Creating The Modal Form

Make the modal form for your Laravel PostgreSQL web app. With it, you’ll be able to add projects to your database.

  • To get started, edit your application’s dashboard home.blade.php file:
@extends('layouts.app') @section('content')
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header bg-info text-white">Dashboard</div>

        <div class="card-body">
          <button
           class="btn btn-primary btn-lg"
           data-toggle="modal"
           data-target="#addModal"
           type="button"
           name="button"
         >
            Add Projects
          </button>
          <hr />
          <h2>My Available Projects</h2>

          <table class="table table-striped table-dark" id="table-programs">
            <!-- This piece of code is for error messages display purposes -->
            @include('inc.messages')
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">Project Name</th>
                <th scope="col">Description</th>
                <th scope="col">Action</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <th scope="row"></th>
                <td></td>
                <td></td>
                <td></td>
                <td>
                  <button
                   data-id=""
                   type="button"
                   class="delete_programs btn btn-danger"
                   name="button"
                 >
                    <span class="fa fa-trash"></span>Delete
                  </button>
                </td>

                <td>
                  <button
                   type="button"
                   data-toggle="modal"
                   data-target="#editModal"
                   class="btn btn-primary"
                   name="button"
                 >
                    <span class="fa fa-edit"></span>Edit
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- this code if for the modal -->
<div
 class="modal fade bg-primary text-dark"
 tabindex="-1"
 role="dialog"
 id="addModal"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Program</h5>
        <button
         type="button"
         class="close"
         data-dismiss="modal"
         aria-label="Close"
       >
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="" action="{{route('projects.store')}}" method="post">
          {{csrf_field()}}
          <div class="form-group">
            <label for="">Project Name</label>
          </div>
          <div class="form-group">
            <label for="">Project Description</label>
            <textarea
             type="text"
             class="form-control"
             name="description"
           ></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection

Let’s review some details about the code above.

  • It creates a table structure for showing records. Furthermore, it builds a modal form for adding new records to the table.

NOTE: Eventually, the table will be equipped with the standard functionality to edit/update, and delete records. You’ll learn how to do this later in subsequent lessons in the multiple-series tutorial.

  • Lastly, under the folder views is the folder inc, and finally under that folder is the @include('inc.messages') file. The code above produces error messages when needed. The structure for the file looks like this:
// This will check for errors and loop through the errors
@if(count($errors) > 0)
    @foreach($errors->all() as $error)
    // This simply display what the error is
        <div class="alert alert-danger">
            {{$error}}
        </div>
    @endforeach
@endif

// This look out for the session success
@if(session('success'))
    <div class="alert alert-success">
        {{session('success')}}
    </div>
@endif

// This look out for the session error
@if(session('error'))
    <div class="alert alert-danger">
        {{session('error')}}
    </div>
@endif

Here are some details about the code above:

  • The dashboard will display an error message when it finds an error.

  • Now, since the {{route('projects.store')}} route is where the action for the modal form is pointed, a controller must be created. You’re creating a basic process for validating your projects. Edit the file ProjectController.php with this code:

public function store(Request $request){
        $this->validate($request,[
            'project_name' => 'required',
            'description'  => 'required'
        ]);
    }

The validation works and the dashboard displays as it should for your Laravel PostgreSQL web app.

Conclusion

That concludes today’s lesson on Laravel and PostgreSQL web app, a tutorial in the multiple-series. Here in Part 4, you discovered how to construct a dashboard for your application so that you can view your records. You also constructed a modal form that results in making PostgreSQL database record additions a breeze. Streamlining the development process gives you more time to finetune your PostgreSQL projects. And Laravel compliments PostgreSQL because it uses the MVC pattern type of architecture, which stands for model, view, controller. It’s perfect for web application development. Great job on finishing this lesson! You’re now ready to proceed to Part 5 of the Laravel and PostgreSQL web app tutorial.

The Code

Here is the entire sample code for this lesson, Part 4 of the multiple-series tutorial “Laravel and PostgreSQL web app.”

The home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-info text-white">Dashboard</div>

                <div class="card-body">
                  <!-- This is for input validation purposes -->
                   @include('inc.messages')
                   <button class="btn btn-primary btn-lg"
                   data-toggle="modal"
                   data-target="#addModal"
                   type="button" name="button">Add Projects</button>
                   <hr>
                   <h2> My Available Projects </h2>


                   <table class="table table-striped table-dark" id="table-programs">

                    <thead>
                        <tr>
                        <th scope="col">#</th>
                       <th scope="col">Project Name</th>
                        <th scope="col">Description</th>
                        <th scope="col">Action</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                        <th scope="row"> </th>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> <button data-id="" type="button" class="delete_programs btn btn-danger" name="button"><span class="fa fa-trash"></span>Delete</button>

                        <td> <button type="button"
                        data-toggle="modal"
                        data-target="#editModal" class="btn btn-primary" name="button" ><span class="fa fa-edit"  ></span>Edit</button>
                    </tbody>

                    </table>

                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade bg-primary text-dark" tabindex="-1" role="dialog" id="addModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add Project</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="" action="{{route('projects.store')}}" method="post">
            {{csrf_field()}}
            <div class="form-group">
                <label for="">Project Name</label>
                <input type="text" class="form-control" name="project_name">
            </div>
            <div class="form-group">
                <label for="">Program Description</label>
                <textarea type="text" class="form-control" name="description"></textarea>

            </div>
            <input type="submit" name="submit" value="Submit" class="btn btn-success">
        </form>
      </div>

    </div>
  </div>
</div>
@endsection

The messages.blade

@if(count($errors) > 0)
    @foreach($errors->all() as $error)
        <div class="alert alert-danger">
            {{$error}}
        </div>
    @endforeach
@endif

@if(session('success'))
    <div class="alert alert-success">
        {{session('success')}}
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger">
        {{session('error')}}
    </div>
@endif

The ProjectController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ProjectsController extends Controller
{
    //


    public function index(){
        return view('home');
    }

    public function store(Request $request){
        // validation
        $this->validate($request,[
            'project_name' => 'required',
            'description'  => 'required'
        ]);
    }
}

Pilot the ObjectRocket Platform Free!

Try Fully-Managed CockroachDB, Elasticsearch, MongoDB, PostgreSQL (Beta) or Redis.

Get Started

Keep in the know!

Subscribe to our emails and we’ll let you know what’s going on at ObjectRocket. We hate spam and make it easy to unsubscribe.