Creating Blades

View

Laravel has its own structure. Model, View and Controller (MVC) are three main pillar of Laravel, View provide a way to place all HTML in separate files and distinct between application logic and presentation logic. Views are live in the resources/views directory.

Blade

Blade is a Laravel powerful templating engine. Its file uses the .blade.php file extension and is typically stored in the resources/views directory. I have already demonstrated the home.blade.php and admin-home.blade.php in previous post. In here, I am going to explore create.blade.php, edit.blade.php and delete.blade.php.

@csrf

Laravel automatically generates a CSRF token for each active user session, the aim of CSRF token is to make sure authenticated users make the request to the application. To prevent malicious attack @csrf token will be used in every POST, PUT, PATCH and DELETE request. I have used @csrf blade directive in Create.blade.php, edit.blade.php and delete.blade.php to generate hidden token input field and validate the request.

@error

@error blade directive has been used for validation error message. within an @error directive, you display the error message.

resources/views/create.blade.php

- I have previously demonstrated the template here. I am going to focus on functionality of create page.

<a href="{{ route('user.index') }}" class="btn btn-success btn-sm" title="Back to Your

Contact List"> <i class="fa fa-arrow-left"></i> Go Back </a>

I have used named route to generate url for Go Back button.

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

This is the most common way to display all validation error. It will echo all the validation error messages in create view file if there any validation error exists in the $errors variable. the any() method on $errors variable is about to check there are any validation errors exist in it or not. It returns 1 if any errors exist in $errors variable. After that you can call foreach method on $errors->all() and display message using $error variable.

@if(session()->has('success')) <div class="alert alert-success alert-dismissible fade show w-50"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> {{ session()->get('success') }} </div> @endif

Display success message.

<form action="{{ route('user.store') }}" method="post" enctype="multipart/form-data"> @csrf <label> Name</label></br> <input type="text" name="name" id="name" class="form-control" value="{{

old('name') }}"></br> <label> Mobile</label></br> <input type="text" name="mobile" id="mobile" class="form-control" value="{{

old('mobile') }}"></br> <input class="form-control" name="photo" type="file" id="photo"></br> <input type="submit" value="Create" class="btn btn-success" title="Create

new Contact"></br> </form>

- Named route has been used to generate url.

- Method is posted so I used @csrf

- As the form includes input type file, I used multipart/form-data.

- Laravel has a useful feature called old input. It keeps input from one request during

the next request, this way if forms detect validation errors and you do not need to re-

populate the form. I have used old helper which is compatible with blade template to keep

input from one request during the other request.

resources/views/edit.blade.php

- I have previously demonstrated the template here, I am going to focus on functionality of edit page

<a href="{{ route('user.index') }}" class="btn btn-success btn-sm" title="Back to Your

Contact List"> <i class="fa fa-arrow-left"></i> Go Back </a>

I have used named route to generate url for Go Back button

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

Within @if blade directive, I have use @foreach to iterate validation error message and display them.

@if(session()->has('success')) <div class="alert alert-success alert-dismissible fade show w-50"> <button type="button" class="btn-close" data-bs-dismiss="alert"></button> {{ session()->get('success') }} </div> @endif

Display success message.

<form method="POST" action="{{route('user.update', $contacts->id)}}"

enctype="multipart/form-data"> @csrf @method('PUT') <input type="hidden" name="id" id="id" value="{{$contacts->id}}" id="id" /> <label>Name</label></br> <input type="text" name="name" id="name" value="{{$contacts->name}}"

class="form-control"></br> <label>Mobile</label></br> <input type="text" name="mobile" id="mobile" value="{{$contacts->mobile}}"

class="form-control"></br> <input class="form-control" name="photo" type="file" id="photo"> <img src="{{ asset($contacts->photo) }}" width= '50' height='50' class="img

img-responsive" /> <input type="submit" value="Update" class="btn btn-success" title="Update

Contact"></br> </form>

- Named route has been used to generate url.

- Method is posted so I used @csrf

- As the form includes input type file, I used multipart/form-data.

- Retrieved field value from database.

- For photo I have used asset helper as it creates url.

resources/views/delete.blade.php

- I have previously demonstrated the template here, I am going to focus on functionality of delete page.

- The form method is posted so I used @csrf

- HTML forms cannot make Delete request so I used the blade @method directive to make delete request.

- I have used <a> tag and href attribute to redirect into user.index

<form action="{{ route('user.destroy', $contacts->id) }}" method="post"> @csrf @method('DELETE') <div class="form-group row mb-0" > <div class="col-md-12" style="text-align: center;"> <h4> Are you sure you want to delete {{ $contacts->name }}? </h4> </div> </div> </br> <div class="form-group row mb-0" > <div class="col-md-8 offset-md-5 "> <button type="submit" class="btn btn-danger"> Yes </button> <a href="{{ route('user.index') }}" class="btn btn-info">No</a> </div> </div> <br> <br> </form>