26
Chapter 8: Laravel Route View Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL Ref. Raphaël Saunier, “Getting Started with Laravel 4”, Packt Publishing, 2014
Chapter 8: Laravel Route View
Asst.Prof.Dr. Supakit Nootyaskool
Information Technology, KMITL
Ref. Raphaël Saunier, “Getting Started with Laravel 4”, Packt Publishing, 2014
Objective
• Explain how to write a JavaScript code to web
• Demonstrate how to create a calculation part on client-side.
• Tell how to apply JavaScript in a webpage.
Topics
• What is Laravel
• Architecture of Laravel
• Route
• View
What is Laravel
• Laravel is open-source PHP framework.
• Laravel is tool for developing web application using concept of model-view-control (MVC)
• Laravel developed by Taylor Orwell by first release June 2011.
• www.laravel.com
MVC?
Ref. https://en.wikipedia.org/wiki/Model-view-controller
Laravel directories
./app/ # Your Laravel application ./app/commands/ # - Command line scripts ./app/config/ # - Configuration files ./app/controllers/ # - Controllers ./app/database/ # - Database migrations and seeders ./app/lang/ # - Localization variables ./app/models/ # - Classes used to represent entities ./app/start/ # - Startup scripts ./app/storage/ # - Cache and logs directory ./app/tests/ # - Test cases ./app/views/ # - Templates that are rendered to HTML ./app/filters.php # - Filters executed before/after a request ./app/routes.php # - URLs and actions
From MVC to Laravel
Each step of designing
1. Get requirement from users
2. Design by drawing a wireframe
3. Show the wireframe and ask response from users
4. Write code
5. Test and Deployment
6. Training user
Design
Header
Footer
Manu bar (1,2,3)
Contents (1,2,3)
Laravel: Blade Templates
• Blead is a technique reduce overhead of webpage and giving easily manipulation.
• Blead idea is separation webpage to each part.
• Blead using suffix name is
*.blade.php
Design
Header
Footer
Manu bar (1,2,3)
Contents (1,2,3)
header.blade.php
manu.blade.php
footer.blade.php
1. Create Home
• Open route.php in directory root\larvel\app\
• Add code below
Route::get('/home', function()
{
echo "hello world";
exit;
});
Output
• Change URL to http://localhost:8080/laravel/public/home
2. Crete master page • Change directory to \root\laravel\app\views and create a file
“master.blade.php”
• Add code below
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html, charset=UTF-8"/>
<title> Intro to Master Blade </title>
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-
theme.min.css')}}">
<script src="{{asset('js/bootstrap.js')}}"> </script>
</head>
<body>
Header <br>
Menu <br>
Home <br>
Content1 <br>
Content2 <br>
footer <br>
</body>
</html>
Output
Laravel commands
• @yield(‘file.php’)
• @section(‘file.php’)
• @extends(‘ reference part’ )
• @section(‘ reference part’ )
3.Create contents
• Create a file “home.blade.php” place at \root\laravel\app\views
• Type code below
@extends('master')
@section('content')
<div class = "well">
This is Home zone
</div>
@stop
• Edit master.blade.php by adding some code
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html, charset=UTF-8"/>
<title> Intro to Master Blade </title>
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-
theme.min.css')}}">
<script src="{{asset('js/bootstrap.js')}}"> </script>
</head>
<body>
Header <br>
Menu <br>
Home <br>
@yield(‘content’)
Content1 <br>
Content2 <br>
footer <br>
</body>
</html>
Output
4. Create page header and page footer
• Create a file “pageheader.blade.php” and “pagefooter.blade.php” placing in view directory
<!-- START: pagefooter -->
<br>
<hr>
<br> copyright (c) 2015
<!-- END: pagefooter -->
<!-- START: pageheader -->
<h1> My Web page </h1>
<br>
<hr>
<!-- END: pageheader -->
• Modify master.blade.php by
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html, charset=UTF-8"/>
<title> Intro to Master Blade </title>
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-
theme.min.css')}}">
<script src="{{asset('js/bootstrap.js')}}"> </script>
</head>
<body>
@include(‘pageheader’)
Menu <br>
Home <br>
@yield(‘content’)
Content1 <br>
Content2 <br>
@include(‘pagefooter’)
</body>
</html>
Output
5. Create two contents
• Copy “home.blade.php” and past with change filename to be “content1.blade.php” and “content2.blade.php”
• Give some contents in the files
@extends('master')
@section('content')
<div class = "well">
This is content2
</div>
@stop
• Add new route
Route::get('/c1', function()
{
return View::make('content1');
});
Route::get('/c2', function()
{
return View::make('content2');
});
Output
Summary
