BLADE TEMPLATING & COMPILING
1)CREATE VIEW LAYOUT
create file: lsapp/resources/views/layouts/app.blade.php
edit content:
<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport" content="device-width,initial-scale=1">
<title>{{config('app.name','LSAPP')}}</title>
</heade>
<body>
@yield('content')
</body>
</html>
2) EDIT VIEW PAGE
edit file: lsapp/resources/views/pages/index.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>Welcome To Laravel</h1>
<p>This is the Laravel application from the "Laravel From Scratch" Youtube series</p>
@endsection
edit file: lsapp/resources/views/pages/about.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>About</h1>
<p>This is the about page</p>
@endsection
edit file: lsapp/resources/views/pages/services.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>Services</h1>
<p>This is the services page</p>
@endsection
browse: /index
browse: /about
browse: /services
3) ADD PAGE DATA TO PAGE CONTROLLER USING COMPACT
edit file: lsapp/resources/views/pages/index.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>{{$title}}</h1>
<p>This is the Laravel application from the "Laravel From Scratch" Youtube series</p>
@endsection
edit file: lsapp/resources/views/pages/about.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>{{$title}}</h1>
<p>This is the about page</p>
@endsection
edit file: lsapp/app/Http/Controllers/PagesController.php
file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index',compact('title'));
}
public function about(){
return view('pages.about');
}
public function services(){
return view('pages.services');
}
}
4) ADD PAGE DATA TO PAGE CONTROLLER USING WITH
edit file: lsapp/app/Http/Controllers/PagesController.php
file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
return view('pages.services');
}
}
note:
-compact() is a PHP Function.
-compact() creates an array from existing variables given as string arguments to it.
-with() is a Laravel method.
-with() allows you to pass variables to a view.
5) ADD PAGE ARRAY DATA TO PAGE CONTROLLER USING WITH
edit file: lsapp/resources/views/pages/services.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>{{$title}}</h1>
<p>This is the services page</p>
@endsection
edit file: lsapp/app/Http/Controllers/PagesController.php
file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
$data=array(
'title'=>'Our Services'
);
return view('pages.services')->with($data);
}
}
6) ADD PAGE NESTED ARRAY DATA TO PAGE CONTROLLER USING WITH
edit file: lsapp/resources/views/pages/services.blade.php
edit content:
@extends('layouts.app')
@section('content')
<h1>{{$title}}</h1>
@if(count($services)>0)
@foreach($services as $service)
<ul>
<li>{{$service}}</li>
</ul>
@endforeach
@endif
@endsection
edit file: lsapp/app/Http/Controllers/PagesController.php
file content:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class PagesController extends Controller
{
public function index(){
$title = 'Welcome To Laravel';
return view('pages.index')->with('title',$title);
}
public function about(){
$title = 'About Us';
return view('pages.about')->with('title',$title);
}
public function services(){
$data=array(
'title'=>'Our Services',
'services'=>['Web Design','Programming','SEO']
);
return view('pages.services')->with($data);
}
}
7) ADD STYLING TO VIEW LAYOUT
to add link to css file
create file: lsapp/resources/views/layouts/app.blade.php
edit content:
<!doctype html>
<html lang="{{config('app.locale')}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"
<meta name="viewport" content="device-width,initial-scale=1">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>{{config('app.name','LSAPP')}}</title>
</heade>
<body>
@yield('content')
</body>
</html>
8) USING NODE TO COMPILE STYLING CODES
time:10.25
.
.
