How to build a Project Management App in Laravel 5 – Part 4
We have the authentication system working and the dashboard is in place.
Now, let’s start creating projects.
We’ll do some clean up and re-arranging of the view and css files.
create a sidebar.blade.php in layouts/partials folder.
sidebar.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li style="margin-left:20px;"> <img src="{{ Auth::user()->getAvatarUrl() }}" height="50" width="50" style="border-radius:25px;" /> </li> <li><a href="#"> @ {{ Auth::user()->username }}</a></li> <li class="active"><a href="#">PREGO<span class="sr-only">(current)</span></a></li> <li><a href="#">Edit Account</a></li> <li><a href="{{ route('projects.index') }}">Projects</a></li> <li><a href="#">Todos</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="">Account</a></li> <li><a href="">Help</a></li> <li><a href="{{ route('auth.logout') }}">Sign Out</a></li> </ul> </div> |
Head over to the index.blade.php and add this:
|
1 2 3 4 5 6 |
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1 class="page-header">Dashboard</h1> <h2 class="sub-header">Projects</h2> <a class="btn btn-info" href="{{ route('projects.create') }}">New Project</a> </div> |
The dashboard header and the div were there before. The only thing we are adding is
|
1 2 |
<h2 class="sub-header">Projects</h2> <a class="btn btn-info" href="{{ route('projects.create') }}">New Project</a> |
Head over to your routes.php and this:
|
1 |
Route::resource('projects', 'ProjectController'); |
The route resource method is very cool. It takes care of all the routes for a basic crud operation.
Create the ProjectController by running this in your terminal:
|
1 |
php artisan make:controller ProjectController |
It will create a ProjectController.php in your Controllers folder with some boilerplate code. ProjectController.php should be looking like this:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<?php namespace Prego\Http\Controllers; use Illuminate\Http\Request; use Prego\Http\Requests; use Prego\Http\Controllers\Controller; class ProjectController extends Controller { /** * Display a listing of the resource. * * @return Response */ public function index() { // } /** * Show the form for creating a new resource. * * @return Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param Request $request * @return Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param Request $request * @param int $id * @return Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return Response */ public function destroy($id) { // } } |
Now that we have done that. Run this command in your terminal
|
1 |
php artisan route:list |
This will show you all the routes, their route names, controller methods and middleware.
If you look carefully, you will discover that there are so many routes for projects with their respective route names. Yes!!!, that’s the power of the Route::resource method, it generates all the basic crud HTTP methods and routes for you.
Let’s go ahead and create the Project Model. Run this in your terminal:
|
1 |
php artisan make:model Project |
A Project.php file would be created in the root of the app folder. That’s our Project Model.
Go back to the views directory.
Create a projects folder and create two files in it namely index.blade.php and new.blade.php
projects/new.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@extends('layouts.master') @section('content') @include('layouts.partials.sidebar') <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1 class="page-header">New Project</h1> <div class="col-lg-6"> <form class="form-vertical" role="form" method="post" action=""> <div class="form-group{{ $errors->has('status') ? ' has-error' : '' }}"> <label for="status" class="control-label">Choose Status</label> <select name="status" id="status"> <option value="">Choose a status</option> <option value="Upcoming">Upcoming</option> <option value="Active">Active</option> <option value="Completed">Completed</option> </select> @if ($errors->has('status')) <span class="help-block">{{ $errors->first('status') }}</span> @endif </div> <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}"> <label for="name" class="control-label">Name</label> <input type="text" name="name" class="form-control" id="name" value="{{ old('name') ?: '' }}"> @if ($errors->has('name')) <span class="help-block">{{ $errors->first('name') }}</span> @endif </div> <div class="form-group{{ $errors->has('due-date') ? ' has-error' : '' }}"> <label for="due-date" class="control-label">Due date</label> <input type="date" name="due-date" class="form-control" id="due-date"> @if ($errors->has('due-date')) <span class="help-block">{{ $errors->first('due-date') }}</span> @endif </div> <div class="form-group{{ $errors->has('notes') ? ' has-error' : '' }}"> <label for="notes" class="control-label">Notes</label> <textarea name="notes" class="form-control" id="notes" rows="10" cols="10"> {{ old('notes') ?: '' }} </textarea> @if ($errors->has('notes')) <span class="help-block">{{ $errors->first('notes') }}</span> @endif </div> <div class="form-group"> <button type="submit" class="btn btn-default">Create</button> </div> <input type="hidden" name="_token" value="{{ csrf_token() }}"> </form> </div> </div> @stop |
old() is a laravel helper function that helps the form remember the previous values entered into its fields. In case, if there is a validation condition that is not fulfilled, you don’t have type all over again.
csrf_token() is a laravel helper function that helps to prevent our forms from cross-site request forgery attacks.
projects/index.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@extends('layouts.master') @section('content') @include('layouts.partials.sidebar') <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> @include('layouts.partials.alerts') <h1 class="page-header">Projects</h1> <div class="col-lg-6"> @if( $project ) @endif @if( $project->isEmpty() ) <h3>There are currently no Projects</h3> @endif </div> <a class="btn btn-info" href="{{ route('projects.create') }}">New Project</a> </div> @stop |
In these two files we are including the sidebar.blade.php file with @include('layouts.partials.sidebar')
Let’s go back to our Project Controller and fix things up: Add this to the index method
|
1 2 3 4 5 |
public function index() { $projects = Project::all(); return view('projects.index')->withProject($projects); } |
So the index method returns all the current projects in the app and pass the projects to the index view.
|
1 2 3 4 |
public function create() { return view('projects.new'); } |
The create method will return the view for creating a new project. It will return the new.blade.php file which is a view.
Please make sure you add this to the top of the Project Controller
|
1 |
use Prego\Project; |
just before use Prego\Http\Requests;. That references the Project Model unless the index method will return an error because we are making use of it in Project::all()
In the homepage now, we should have this:
When you click on the New Project button, it should direct us to the projects/create route which will show this page:
From the sidebar, Click on the Projects link. It should redirect you to the Projects index page
From that index page, you can easily click on the New Project button to go ahead and create a new project.
Go the projects/new.blade.php
|
1 |
<form class="form-vertical" role="form" method="post" action="{{ route('projects.store') }}"> |
In the form, make sure the action attribute references the route('projects.store') like you see in the code above.
Head over to the ProjectsController.php, let’s add validation and logic to the store method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public function store(Request $request) { $this->validate($request, [ 'name' => 'required|min:3', 'due-date' => 'required|date|after:today', 'notes' => 'required|min:10', 'status' => 'required' ]); $project = new Project; $project->project_name = $request->input('name'); $project->project_status = $request->input('status'); $project->due_date = $request->input('due-date'); $project->project_notes = $request->input('notes'); $project->user_id = Auth::user()->id; $project->save(); return redirect()->route('projects.index')->with('info','Your Project has been created successfully'); } |
Now, there are different ways of doing this…but I did it this way for clarity. The validation rules for the project form are inside the array, then we created a new instance of Project Model and saved the inputs from our form manually into the project instance, then called the save method on it. The save() does the actual dumping of values into the database. The we redirect the user to the Projects index page.
Note: You can check the available validation rules that Laravel provides here . You can also create a custom rule if you can’t find the one you want inbuilt with Laravel.
Auth::user()->id gets the id of the currently logged in user.
Don’t forget to include this at the top of your controller just before use PregoProject:
|
1 |
use Auth; |
If you don’t, the Auth Facade won’t be found.
Now, we need to present the currently created projects to the user on the Projects index page.
Go to projects/index.blade.php, we have added some code and changed some existing one, this is the new one:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
@extends('layouts.master') @section('content') @include('layouts.partials.sidebar') <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> @include('layouts.partials.alerts') <h1 class="page-header"> Projects <a class="btn btn-info" href="{{ route('projects.create') }}">New Project</a> </h1> <div class="container"> @if($project) <div class="row"> @foreach ($project as $proj) <div class="col-md-3" style="border:1px solid #ccc;margin-left:5px;"> <h2>{!! $proj->project_name !!}</h2> <p>Due : {!! date_format(new DateTime($proj->due_date), "D, m Y") !!}</p> <p>Status: {!! $proj->project_status !!}</p> <p>Tasks: 0</p> <p>Comments: 0</p> <p>Attachments: 0</p> </div> @endforeach </div> @endif @if($project->isEmpty()) <h3>There are currently no Projects</h3> @endif </div> <div class="container"> <a class="btn btn-info" href="{{ route('projects.create') }}">New Project</a> </div> </div> @stop |
Now create a new project and refresh your page. We should have something like this:
Awesome!!!
You have done well, dear reader. Take some time relax and test out your new functionality. You can also show your friends the cool stuff you are hacking on.
Watch out for the next post, we’ll be adding the ability to edit and update projects, add tasks to a project, attachments and also adding comments. It will be amazing.
Please if you are unclear about something or you have an observation, feel free to drop it in the comments section.
- How to build your own Youtube – Part 10 - August 1, 2016
- How to build your own Youtube – Part 9 - July 25, 2016
- How to build your own Youtube – Part 8 - July 23, 2016
- How to build your own Youtube – Part 6 - July 6, 2016
- Introducing Laravel Password v1.0 - July 3, 2016
- How to build your own Youtube – Part 5 - June 28, 2016
- How to build your own Youtube – Part 4 - June 23, 2016
- How to build your own Youtube – Part 3 - June 15, 2016
- How to build your own Youtube – Part 2 - June 8, 2016
- How to build your own Youtube – Part 1 - June 1, 2016