# Basic routing & views

# Basic routing

• The file routes/web.php contains all the routes that you want to visit (or get) through a browser
• When a user visits the home page http://vinyl_shop.test of the application (indicated by '/'), the Laravel 'welcome' view is shown

Route::get('/', function () {
    return view('welcome');
});

• Change the code and the project home page gets adjusted

Route::get('/', function () {
    //return view('welcome');
    return 'The Vinyl Shop';
});

• Add a new route to the URL http://vinyl_shop.test/contact-us and show some contact information

Route::get('contact-us', function () {
    return 'Contact info';
});

# Basic views

• Views correspond to the HTML (styled with CSS) that gets rendered in the browser
• Views are stored in the folder resources/views
• The view 'welcome' (called in the route to the home page) corresponds to the file welcome.blade.php
  • Blade is the templating engine (shipped with Laravel) that will be covered (extensively) further on in this course

• Make a new view contact.blade.php in the folder resources/views with some basic HTML code

<h1>Contact info</h1>

<p>The Vinyl Shop</p>
<p><a href="mailto:info@thevinylshop.com">info@thevinylshop.com</a></p>

• Adjust the 'contact-us' route in the file routes/web.php

Route::get('contact-us', function () {
    //return 'Contact info';
    return view('contact');
});

• When the URL http://vinyl_shop.test/contact-us is visited, the view contact.blade.php is shown

# Single line notation

• The code

Route::get('contact-us', function () {
    return view('contact');
});

can be replaced by

Route::view('contact-us', 'contact');

# EXERCISE: Refactor home page

• Create a new home page home.blade.php (with a h1 and a p)
• Refactor the route to it with a single line notation

Route::view('/', 'home');
Route::view('contact-us', 'contact');

# Organizing views in subfolders

• It's best practice to group the views of a project in subfolders
• Make a subfolder admin/records in resources/views and add a new view index.blade.php in this subfolder

<h1>Records</h1>

<ul>
    <li>Record 1</li>
    <li>Record 2</li>
    <li>Record 3</li>
</ul>

• Add a new route 'admin/records' (URL = http://vinyl_shop.test/admin/records) to this view in the file routes/web.php

Route::get('admin/records', function (){
    return view('admin.records.index');
});

# Passing data to the views

• Create an array $records with some data in the 'admin/records' route
• The view() function can receive an associative array as its second argument, through which this data can be passed to the view

Route::get('admin/records', function (){
    $records = [
        'Queen - Greatest Hits',
        'The Rolling Stones - Sticky Fingers',
        'The Beatles - Abbey Road'
    ];

    return view('admin.records.index', [
        'records' => $records
    ]);
});

• In the view index.blade.php, the key of this associative array can be used to access the data

<ul>
    <?php
        foreach ($records as $record){
            echo "<li> $record </li>";
            //echo '<li>' . $record . '</li>';
        }
    ?>
</ul>

return view('admin.records.index', [
    'someSillyName' => $records
]);

<ul>
    <?php
        foreach ($someSillyName as $record){
            echo "<li> $record </li>";
            //echo '<li>' . $record . '</li>';
        }
    ?>
</ul>

• Using Blade, the foreach loop in the view index.blade.php can be simplified

<ul>
    @foreach ($records as $record)
        <li>{{ $record }}</li>
    @endforeach
</ul>

• Blade-specific syntax always starts with @
• The PHP foreach loop is replaced by a Blade @foreach loop
  • Ends with @endforeach / no surrounding braces { }
  • The (body of the) loop contains HTML and PHP
  • Data passed to the view can be displayed by wrapping this data within double curly braces {{ }}

REMARKS

• Blade {{ }} statements automatically escape (any HTML in) the data to prevent cross-site scripting (XSS) attacks

 

 

$records = [
    'Queen - <b>Greatest Hits</b>',
    'The Rolling Stones - <em>Sticky Fingers</em>',
    'The Beatles - Abbey Road'
];

1
2
3
4
5

@foreach ($records as $record)
    <li>{{ $record }}</li>
@endforeach

1
2
3

• Use {!! !!} if unescaped, raw output is needed

 

@foreach ($records as $record)
    <li>{!! $record !!}</li>
@endforeach

1
2
3

# Route groups

• Route groups allow you to share route attributes, such as middleware (later in this course) across all the routes within the group
• The prefix() method can be used to prefix each route in the group with a given string
• Combine all routes, starting from http://vinyl_shop.test/admin/ in a group with the prefix admin
  Route::prefix('admin')->group(function () {...})

// Old version
/*
Route::get('admin/records', function (){...});
*/

// New version with prefix and group
Route::prefix('admin')->group(function () {
    Route::get('records', function (){
        $records = [
            'Queen - Greatest Hits',
            'The Rolling Stones - Sticky Fingers',
            'The Beatles - Abbey Road'
        ];
        return view('admin.records.index', [
            'records' => $records
        ]);
    });
});

• Open http://vinyl_shop.test/admin/records in a browser

Route::prefix('admin')->group(function () {
    Route::redirect('/', '/admin/records');
    Route::get('records', function (){...});
});