Hey guys...Welcome back. Today we are going
to create view files as well as the html files
in Laravel. In Laravel there is special view file system call Blade
templates. That is a powerful template engine and simple with Laravel. You can see the default blade template
(welcome.blade.php) is in the resources->views folder.
For our project we need some templates for
our CRUD. We name them as,
- layout.blade.php – include the common html tag structure and css, js files.
- index.blade.php – include the main view.
- create.blade.php – include the add details form.
- edit.blade.php – include the edit details form.
- show.blade.php – include the data show details page.
Ok.. first we code for the layout page. For
that create a new folder inside resources->views folder name ‘ students ‘.
Inside the students folder create a page
name ‘ layout.blade.php’ page and code for it.
<!DOCTYPE html> <html> <head> <title>@yield('title')</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"> <script language="JavaScript"> tempAlert("close",5000); </script> </head> <body> <div class="container"> @yield('content') </div> </body> </html>
You can include bootstrap CSS fil for the
code. @yield is mainly used to define a section in a layout. You
define an area (@yield) within the layout that your pages which are extending
the template will put their content into.
Now we code for the index.blade .php page.
@extends('students.layout') @section('title','Students details') @section('content') <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Students Details</h2> </div> <div class="pull-right"> <a class="btn btn-success" href="{{ route('students.create') }}"> Add New Student</a> </div> </div> </div> @if ($message = Session::get('success')) <div class="alert alert-success" role="alert"> <p>{{ $message }}</p> </div> @endif <table class="table table-bordered"> <tr> <th>No</th> <th>Name</th> <th>Age</th> <th width="280px">Action</th> </tr> @foreach ($students as $student) <tr> <td>{{ ++$i }}</td> <td>{{ $student->name }}</td> <td>{{ $student->age }}</td> <td> <form action="{{ route('students.destroy',$student->id) }}" method="POST"> <a class="btn btn-info" href="{{ route('students.show',$student->id) }}">Show</a> <a class="btn btn-primary" href="{{ route('students.edit',$student->id) }}">Edit</a> @csrf @method('DELETE') <button type="submit" class="btn btn-danger">Delete</button> </form> </td> </tr> @endforeach </table> @endsection
Now code for the create.blade.php page.
@extends('students.layout') @section('title','Add Students Details') @section('content') <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Add New Student</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a> </div> </div> </div> @if ($errors->any()) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('students.store') }}" method="POST"> @csrf <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> <input type="text" name="name" class="form-control" placeholder="Name"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Age:</strong> <input type="text" name="age" class="form-control" placeholder="age"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> @endsection
Now code for the edit.blade.php page.
@extends('students.layout') @section('title','Edit Students details') @section('content') <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2>Edit Student Details</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a> </div> </div> </div> @if ($errors->any()) <div class="alert alert-danger"> <strong>Whoops!</strong> There were some problems with your input.<br><br> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> @endif <form action="{{ route('students.update',$student->id) }}" method="POST"> @csrf @method('PUT') <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> <input type="text" name="name" value="{{ $student->name }}" class="form-control" placeholder="Name"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Age:</strong> <input type="text" name="age" value="{{ $student->age }}" class="form-control" placeholder="Age"> </div> </div> <div class="col-xs-12 col-sm-12 col-md-12 text-center"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> @endsection
Now code for the show.blade.php page.
@extends('students.layout') @section('title','View Students details') @section('content') <div class="row"> <div class="col-lg-12 margin-tb"> <div class="pull-left"> <h2> Show Student</h2> </div> <div class="pull-right"> <a class="btn btn-primary" href="{{ route('students.index') }}"> Back</a> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Name:</strong> {{ $student->name }} </div> </div> <div class="col-xs-12 col-sm-12 col-md-12"> <div class="form-group"> <strong>Age:</strong> {{ $student->age }} </div> </div> </div> @endsection
OK..Now we are completing the blade
template design. In next tutorial we are going to code for the most important
controller and modal files. Thank you. Hope your comments.
No comments:
Post a Comment