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 Manu bar (1,2,3) Contents (1,2,3) Footer
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.blade.php Header Manu bar (1,2,3) manu.blade.php Contents (1,2,3) Footer 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/bootstraptheme.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/bootstraptheme.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: pageheader --> <h1> My Web page </h1> <br> <hr> <!-- END: pageheader --> <!-- START: pagefooter --> <br> <hr> <br> copyright (c) 2015 <!-- END: pagefooter -->
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/bootstraptheme.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