L1_laravel

LARAVEL WEB APP DEVELOPMENT
LARAVEL
TEXT
LARAVEL FRAMEWORK FOR BUILDING WEB APP
WHY LARAVEL IS POPULAR

TEXT
INSTALL LARAVEL APP

composer create-project --prefer-dist laravel/laravel <project_name> “5.7.*"
php artisan serve

TEXT
BASIC ROUTING
In the routes/web.php, add the new route called contact and return the
view
Create the new file in views/contact.blade.php
Route::get('/contact', function() {
return view('contact');
});
TEXT
BLADE LAYOUT FILES

Create a new folder and file called views/layouts/master.blade.php
Write the html code in master.blade and add @yield for the content in the body tag
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
{{-- Content --}}

@yield('content')
TEXT
BLADE LAYOUT FILES

Change the title into @yield in the master blade layout file
Change the title by @section in About Us , Contact us page.
<head>
...
<title> @yield('title', 'Laravel Web App’) </title>
</head>
TEXT
BLADE LAYOUT FILES

Use this template in welcome , about and contact layout page
@extends('layouts.master')
@section('title', 'Contact')
@section('content')
<h1> Contact Form </h1>
...
@endsection
TEXT
SENDING DATA TO YOUR VIEWS

Pass the array of tasks into the views in routes/web.php
Use the @foreach to print the array of tasks in welcome.blade.php
Route::get('/', function () {
$tasks = [
'Go to store ',
'Go to market ',
'Go to work '
];
return view('welcome', [
'tasks' => $tasks
]);
});
TEXT
SENDING DATA TO YOUR VIEWS
Use the @foreach to print the array of tasks in welcome.blade.php
@extends('layouts.master')
@section('content')
<h1> Here we go !</h1>
<ul>
@foreach ($tasks as $task)
<li> {{ $task }} </li>
@endforeach
</ul>
@endsection
TEXT
CONTROLLERS 101
Create the new controller via : php artisan make:controller PagesController
Change all of the routes into controller@function_name
Route::get('/', 'PagesController@home');
Route::get('/about', 'PagesController@about');
Route::get('/contact', 'PagesController@contact');
TEXT
CONTROLLERS 101
Add the home function in Http/controllers/PagesController.php
// About Page
// Home Page
public function about()
public function home()
{
{
return view('about');
$tasks = [
}
'Go to store ',
// Contact Page
'Go to market ',
public function contact()
'Go to work '
{
];
return view('contact');
return view('welcome', [
}
'tasks' => $tasks
]);
}
TEXT
DATABASES AND MIGRATIONS

Setting up the environment variable for database configuration in .env
Create the new database table in phpmyadmin called project_db
Run the command : php artisan migrate
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=project_db
DB_USERNAME=root
DB_PASSWORD=
TEXT
DATABASES AND MIGRATIONS

Run the command : php artisan make:migration create_projects_table
Write this schema database/migrations/…_create_project_table.php
Schema::create('projects', function (Blueprint $table) {

$table->increments('id');
$table->string('title');
$table->longtext(‘description');
$table->timestamps();
});
TEXT
ELOQUENT, NAMESPACING, AND MVC
Run the command : php artisan make:model Project
Insert the data via tinker : php artisan tinker
$project = new App\Project;
$project->title = "My first Project";
$project->description = "Project one

description ";
$project->save();
App\Project::all();
TEXT
Insert the data via tinker : php artisan tinker
Write this code inside the terminal
$project = new App\Project;
$project->title = "My first Project";
$project->description = "Project one

description ";
$project->save();
App\Project::all();
TEXT

Goal: Show the Projects lists in url /projects
1.Insert
Createthe
the data via tinker
new route : php
in web.php to artisan tinker
controler@index
2. Create Projects controller via artisan command
3. Use the Project::all() in the controller
4. Pass the data projects into views
4. Test your work!
TEXT
FORM HANDLING
Create a new route called “projects/create” in web.php
Route::post('/projects', ‘ProjectsController@store');
Route::get('/projects/create', 'ProjectsController@create');
TEXT
FORM HANDLING
Write a new function called create() in the ProjectsController
{{ csrf_field() }}
Make an new view projects/create.blade.php
Write the form …
public function create()

{
return view('projects.create');
}
TEXT
FORM HANDLING
Write a new function called store() in the ProjectsController
// Save the project

public function store()
{
$project = new Project();
$project->title = request('title');
$project->description = request('description');
$project->save();
return redirect('/projects');
}
TEXT
ROUTING CONVENTION
Write a new function called store() in the ProjectsController
proj
G
proje ects.
E
cts inde
T
x
proje proje
G
cts/ cts.c
E
creat reat
T
e e
proje
proj
G cts/
ects.
E{proj
sho
T ect_i
w
TEXT
ROUTING CONVENTION
Change the resource route in web.php
// Route::get('/projects', 'ProjectsController@index');
// Route::post('/projects', 'ProjectsController@store');
// Route::get('/projects/create', 'ProjectsController@create');
Route::resource('/projects', 'ProjectsController');
TEXT
FAKING PATCH AND DELETE REQUESTS
Create the new function called edit($id) in the ProjectsController.php
// Edit the project

public function edit($id)
{
$project = Project::findOrFail($id);
return view('projects.edit', compact('project'));
}
TEXT
Create a new form in views/projects/edit.blade.php

TEXT
Simple code for the project edit page
<form method="POST" action="/projects/{{ $project->id }}">

{{ method_field('PATCH') }}
{{ csrf_field() }}
<input value="{{ $project->title }}" type="text" name="title">

<textarea name="description">{{ $project->description }}</textarea>
<button type="submit">Update Project</button>

</form>
TEXT
Add the new function called update($id) in the ProjectsController.php
public function update($id)

{
$project->title = request('title');
$project->description = request('description');
$project->save();
}
TEXT
Add the new function called destroy($id) in the ProjectsController.php
public function destroy($id)

{
$project = Project::findOrFail($id)->delete();
}
TEXT
Add the new form with the delete button in edit.blade.php
<form method="POST" action="/projects/{{ $project->id }}" style="margin-top:20px;">

@method('DELETE')
@csrf
<div class="form-group">
<button class="btn btn-danger" type="submit">Delete Project</button>
</div>
</form>
TEXT
DISPLAY THE PROJECT

Add the new form with the delete button in edit.blade.php
// Show the project

public function show($id)
{
return view('projects.show', compact('project'));
}
TIME TO
REFACTOR
TEXT
ROUTE MODEL BINDING

Change the parameter id to model object in the ProjectsController
// Show the project

public function show(Project $project)
{
return view('projects.show', compact('project'));
}
// Save the project

public function store(Project $project)
{
$project->create(request(['title','description']));
}
TEXT
ROUTE MODEL BINDING

// Edit the project

public function edit(Project $project)
{
return view('projects.edit', compact('project'));
}
public function update(Project $project)
{
$project->update(request(['title','description']));
}
TEXT
ROUTE MODEL BINDING

// Delete the project

public function destroy(Project $project)
{
$project->delete();
}
TEXT
ROUTE MODEL BINDING

Add the guarded array for the id key avoid to use in mass assignment
class Project extends Model

{
protected $guarded = ['id'];
// Change the Route Key Name
public function getRouteKeyName()
{
return 'title';
}
}
TEXT
TWO LAYERS OF VALIDATION

There are two layers of validation process : client site and server site
Use the validation function in request in store () & update ()

request()->validate([
'title' => 'required|min:3',
'description' => 'required|min:3',
])
TEXT

Add the server site validation messages in create.blade.php


@include('projects.message')
...
<input class="form-control {{ $errors->has('title') ? 'is-invalid' : ‘' }}"
type="text"
name="title"
placeholder="Project Title"
value="{{ old('title') }}”
>
TEXT

Create the new blade file in projects/message.blade.php


@if($errors->any())
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
TEXT
FIRST ELOQUENT RELATIONSHIP
Create the new model called Tasks
php artisan make:model Task -m -f
// create_tasks_table.php
Schema::create('tasks', function (Blueprint $table) {
$table->unsignedInteger(‘project_id');
$table->string('description');
$table->boolean('completed')->default(false);
});
TEXT
Create the relationship with Project Model
Use the HasMany relationship because one project has many tasks …
class Project extends Model

{
...
public function tasks()
{
return $this->hasMany(Task::Class);
}
}
TEXT
Inversely , each task has belongs with one project
So, use the belongsTo relationship for the project model
class Task extends Model

{
// Belongs with the project
public function project()
{
return $this->belongsTo(Project::class);
}
}
TEXT
Show the lists of tasks in projects/show.blade.php
@if ($project->tasks->count())
<div>
@foreach ($project->tasks as $task)
<li> {{ $task->description }}</li>
@endforeach
</div>
@endif
TEXT
FORM ACTION CONSIDERATIONS
Create the new route for patch request update protected $guarded = [‘id'];
php artisan make:controller ProjectTasksController -r
Route::patch('/tasks/{task}', 'ProjectTasksController@update');
public function update(Task $task)

{
// Update the tasks
$task->update([
'completed' => request()->has('completed')
]);
return back();
}
TEXT
FORM ACTION CONSIDERATIONS
Change the lists of tasks in projects/show.blade.php
@foreach ($project->tasks as $task)

<div class="tasks">
<form method="post" action="/tasks/{{ $task->id }}">
@csrf
@method('PATCH')
<label class="{{ $task->completed ? 'completed' : '' }}" for="completed">
<input type="checkbox" name="completed"
onChange="this.form.submit()" {{ $task->completed ? 'checked' : '' }}>
{{ $task->description }}
</label>
</form>
</div>
@endforeach
TEXT
CREATE NEW PROJECT TASKS

Create new task form in projects/show.blade.php
<form method="post" action="/projects/{{ $project->title }}/tasks">

@csrf
<div class="form-group">
<input class="form-control {{ $errors->has('description') ? 'is-invalid': ''}}"
type="text" name="description"
placeholder="New Task">
</div>
</form>
TEXT
CREATE NEW PROJECT TASKS

Create the new route for POST request of projects tasks
Route::post('/projects/{project}/tasks', 'ProjectTasksController@store');

{
// Create new fun in Project model
// Validate the requests
public function addTask($task)
$attributes = request()->validate([
{
'description' => 'required|min:3'
$this->tasks()->create($task);
]);
}
$project->addTask($attributes);
return back();
}
TEXT
BETTER ENCAPSULATION
Change the encapsulation for the tasks completed
public function update(Task $task)

{
// Update the completed tasks
request()->has('completed') ? $task->complete() : $task->incomplete();
return back();
}
TEXT
BETTER ENCAPSULATION
Write the new method in model for the tasks complete / incomplete
class Task extends Model

{
...
public function complete($completed = true)

{
$this->update(compact('completed'));
}
public function incomplete()
{
$this->complete(false);
}
}
TEXT
REGISTRATION SYSTEM IN SECONDS
Create the login/registration system : php artisan make:auth

TEXT
MIDDLEWARE
Middleware provide a convenient mechanism for filtering HTTP requests
entering your application.
TEXT
MIDDLEWARE
Two types of middleware : Global Middleware, Assigning Middleware To
Routes
/**
* The application's route middleware.
*/
protected $routeMiddleware = [
'auth' => \App\Http\Middleware\Authenticate::class,
'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,
'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
'can' => \Illuminate\Auth\Middleware\Authorize::class,
'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
];
TEXT
MIDDLEWARE
Assign the route middleware in web.php
Route::resource('/projects', 'ProjectsController')->middleware('auth');
// Or can also create the middleware group

Route::group(['middleware' => ['auth']], function () {
Route::resource('/projects', 'ProjectsController');
Route::post('/projects/{project}/tasks', 'ProjectTasksController@store');
Route::patch('/tasks/{task}', 'ProjectTasksController@update');
});
TEXT
AUTH FACADE
The auth () returns an authenticator instance.
You may use it instead of the Auth facade for convenience: Auth::user ()
auth()->id(); // User Id
auth()->user(); // User Instance
auth()->check(); // Boolean
TEXT
AUTH FACADE
php artisan make:migration add_owner_id_to_projects --table=“projects”
Add this column owner_id & run this command : php artisan migrate:fresh
Schema::create('projects', function (Blueprint $table) {

$table->string('title');
$table->text('description');
});
TEXT
VIEW OWN PROJECTS

Use the auth helper to view own projects
Chang the code in the ProjectsController.php
// List all projects

public function index()
{
$projects = Project::where('owner_id', auth()->id())->get();
return view('projects.index', compact('projects'));
}
TEXT
VIEW OWN PROJECTS

Use the auth helper to view own projects
Chang the code in the ProjectsController.php
// Save the project

{
$project->create(
request()->validate([
]) + ['owner_id' => auth()->id()]
);
}
TEXT
AUTHORIZATION ESSENTIALS
php artisan make:policy ProjectPolicy --model=Project
Write the condition for the ProjectPolicy.php & register in AuthServiceProvider
public function view(User $user, Project $project)

{
return $project->owner_id === $user->id;
}
public function update(User $user, Project $project)

{
return $project->owner_id === $user->id;
}
TEXT
php artisan make:policy ProjectPolicy --model=Project
Write the condition for the ProjectPolicy.php & register in AuthServiceProvider
class AuthServiceProvider extends ServiceProvider

{
protected $policies = [
'App\ProjectPolicy' => 'App\Policies\ProjectPolicy',
];
...
}
TEXT
Use the authroize () in ProjectsController.php
// Show the project

public function show(Project $project)
{
$this->authorize('view', $project);
...
}
TEXT
Or Simplify the code in web.php
Route::resource('/projects', ‘ProjectsController')
->middleware('can:view, project');
TEXT
ADMIN ACCESS EVERYTHING

Use the before () of Gate facade in AuthServiceProvider.php
public function boot()

{
...
Gate::before(function ($user) {
return $user->id == 1;
});
}
TEXT
ADMIN ACCESS EVERYTHING

Use the before () of Gate facade in AuthServiceProvider.php
public function boot()

{
...
Gate::before(function ($user) {
return $user->id == 1;
});
}
TEXT
DON’T REPEAT YOURSELF

Refactor the code validation process ProjectsController.php
Use this function in store() and update() as well
// Validate the project

protected function validateProject()
{
return request()->validate([
]);
}
TEXT
API RESOURCES
Building API need a transformation layer between Eloquent models & JSON
responses
TEXT
API RESOURCES
Generate the api resource: php artisan make:resource UserResource
class UserResource extends JsonResource

{
...
public function with($request)
{
return ['status' => 'success'];
}
public function withResponse($request, $response)

{
$response->setStatusCode(202);
}
}
TEXT
API RESOURCES
Generate the api resource collections: php artisan make:resource
UserCollection
class UserCollection extends ResourceCollection

{
public function toArray($request)
{
return [
'data' => $this->collection,
'status' => 'success'
];
}
}
TEXT
API RESOURCES
Add the new eloquent resource in api.php
namespace App\Http\Resources\ResourceName
Route::get('/users', function(){
$user = App\User::with('projects')->paginate(10);
return new UserCollection($user);
});
Route::get('/users/{id}', function($id){
$user = App\User::with('projects')->find($id);
return new UserResource($user);
});
TEXT
API RESOURCES
Create a new user from api : php artisan make:request UserRequest
use Illuminate\Contracts\Validation\Validator;
use Illuminate\Validation\ValidationException;
use Illuminate\Http\Exceptions\HttpResponseException;
public function rules()

{
return [
'name' => ['required', 'string', 'max:255', 'min:5'],
'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
'password' => ['required', 'string', 'min:6', 'confirmed'],
];
}
TEXT
API RESOURCES
Override the function to response the JSON format.
protected function failedValidation(Validator $validator)

{
$errors = (new ValidationException($validator))->errors();
throw new HttpResponseException(
response()->json([
'data' => [],
'errors' => $errors,
'success' => false,
'method' => request()->method()
], 400)
);
}
TEXT
API RESOURCES
Add a new route and create a new user in api.php
Route::post('/users', function(UserRequest $request, User $user){

$attributes = $request->except(['password_confirmation']);
$attributes['password'] = Hash::make($request->password);
return new UserResource($user->create($attributes));
});
TEXT
CREATE PROJECTS API

Goal: Create the Projects API in url api/projects
1. Insert
Createthe dataroute
the new via tinker : php artisan tinker
in `api.php’
2. Create ProjectsService controller via artisan command
3. Use the Project::all() in the controller
4. Pass the data of projects collection into JSON response
4. Test your work!
THANK
YOU !

L1_laravel

Uploaded by

L1_laravel

Uploaded by

LARAVEL WEB APP DEVELOPMENT

WHY LARAVEL IS POPULAR

INSTALL LARAVEL APP

php artisan serve

Create the new file in views/contact.blade.php

BLADE LAYOUT FILES

{{-- Content --}}

BLADE LAYOUT FILES

Change the title by @section in About Us , Contact us page.

BLADE LAYOUT FILES

SENDING DATA TO YOUR VIEWS

Use the @foreach to print the array of tasks in welcome.blade.php

SENDING DATA TO YOUR VIEWS

Use the @foreach to print the array of tasks in welcome.blade.php

Change all of the routes into controller@function_name

DATABASES AND MIGRATIONS

Create the new database table in phpmyadmin called project_db

Run the command : php artisan migrate

DATABASES AND MIGRATIONS

Write this schema database/migrations/…_create_project_table.php

Schema::create('projects', function (Blueprint $table) {

ELOQUENT, NAMESPACING, AND MVC

Run the command : php artisan make:model Project

Insert the data via tinker : php artisan tinker

$project = new App\Project;

$project->title = "My first Project";

$project->description = "Project one

ELOQUENT, NAMESPACING, AND MVC

Run the command : php artisan make:model Project

Insert the data via tinker : php artisan tinker

Write this code inside the terminal

$project = new App\Project;

$project->title = "My first Project";

$project->description = "Project one

ELOQUENT, NAMESPACING, AND MVC

Run the command : php artisan make:model Project

Write the form …

public function create()

// Save the project

FAKING PATCH AND DELETE REQUESTS

Create the new function called edit($id) in the ProjectsController.php

// Edit the project

FAKING PATCH AND DELETE REQUESTS

Create a new form in views/projects/edit.blade.php

FAKING PATCH AND DELETE REQUESTS

Simple code for the project edit page

<form method="POST" action="/projects/{{ $project->id }}">

<input value="{{ $project->title }}" type="text" name="title">

<button type="submit">Update Project</button>

FAKING PATCH AND DELETE REQUESTS

Add the new function called update($id) in the ProjectsController.php

public function update($id)

FAKING PATCH AND DELETE REQUESTS

Add the new function called destroy($id) in the ProjectsController.php

public function destroy($id)

FAKING PATCH AND DELETE REQUESTS

Add the new form with the delete button in edit.blade.php

<form method="POST" action="/projects/{{ $project->id }}" style="margin-top:20px;">

DISPLAY THE PROJECT

// Show the project

ROUTE MODEL BINDING

// Show the project

// Save the project

ROUTE MODEL BINDING

// Edit the project

ROUTE MODEL BINDING

// Delete the project

ROUTE MODEL BINDING

class Project extends Model

TWO LAYERS OF VALIDATION

Use the validation function in request in store () & update ()

TWO LAYERS OF VALIDATION

TWO LAYERS OF VALIDATION

FIRST ELOQUENT RELATIONSHIP