Chapter 8: Laravel Route View. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL

Size: px

Start display at page:

Download "Chapter 8: Laravel Route View. Asst.Prof.Dr. Supakit Nootyaskool Information Technology, KMITL"

Christian Hood
7 years ago
Views:

1 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

2 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.

3 Topics What is Laravel Architecture of Laravel Route View

4 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

5 MVC? Ref.

6 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

7 From MVC to Laravel

8 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

9 Design Header Manu bar (1,2,3) Contents (1,2,3) Footer

10 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

11 Design header.blade.php Header Manu bar (1,2,3) manu.blade.php Contents (1,2,3) Footer footer.blade.php

12 1. Create Home Open route.php in directory root\larvel\app\ Add code below Route::get('/home', function() { echo "hello world"; exit; });

13 Output Change URL to

14 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>

15 Output

16 Laravel file.php file.php reference part reference part )

17 3.Create contents Create a file home.blade.php place at \root\laravel\app\views Type <div class = "well"> This is Home zone

18 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 content ) Content1 <br> Content2 <br> footer <br> </body> </html>

19 Output

20 4. Create page header and page footer Create a file pageheader.blade.php and pagefooter.blade.php placing in view directory  <h1> My Web page </h1> <br> <hr>   <br> <hr> <br> copyright (c) 2015

21 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> pageheader ) Menu <br> Home content ) Content1 <br> Content2 pagefooter ) </body> </html>

22 Output

23 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 <div class = "well"> This is content2

24 Add new route Route::get('/c1', function() { return View::make('content1'); }); Route::get('/c2', function() { return View::make('content2'); });

25 Output

26 Summary

Developing ASP.NET MVC 4 Web Applications MOC 20486

Developing ASP.NET MVC 4 Web Applications MOC 20486 Course Outline Module 1: Exploring ASP.NET MVC 4 The goal of this module is to outline to the students the components of the Microsoft Web Technologies