# Shop: preparation

• Next, we want to add a (web) shop to our application
• Therefore, we need two pages
  • A master page to show all the records
  • A detail page with detailed information about one record

# Update navigation

• Open resources/views/shared/navigation.blade.php and add a 'Shop' link (between 'Home' and 'Contact')

<ul class="navbar-nav mr-auto">
    <li class="nav-item">
        <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/shop">Shop</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/contact-us">Contact</a>
    </li>
</ul>

# Make ShopController

• Make a new controller class with the terminal command php artisan make:controller ShopController
• Open app/Http/Controllers/ShopController.php and add two methods
  • The show() method expects a parameter $id identifying the record of which the detail page must be shown

class ShopController extends Controller
{
    // Master Page: http://vinyl_shop.test/shop or http://localhost:3000/shop
    public function index()
    {
        return 'Master Page works';
    }

    // Detail Page: http://vinyl_shop.test/shop/{id} or http://localhost:3000/shop/{id}
    public function show($id)
    {
         return "Details for record $id";
    }
}

# Add routes

• Add two new routes to routes/web.php
  • As stated before, the ShopController@show() method expects a parameter $id. This parameter is sent to the controller as part of the URL (e.g. http://localhost:3000/shop/5). In the route definition this route parameter {id}should be enclosed (without the leading $) between single curly braces.

Route::view('/', 'home');
Route::get('shop', 'ShopController@index');
Route::get('shop/{id}', 'ShopController@show');
Route::view('contact-us', 'contact');

// New version with prefix and group
Route::prefix('admin')->group(function(){
    Route::redirect('/', 'records');
    Route::get('records', 'Admin\RecordController@index');
});

• Test the two new routes (http://localhost:3000/shop and http://localhost:3000/shop/5) in a browser

# Add views

• Create a new folder resources/views/shop
• Add a new file index.blade.php to this shop folder

@extends('layouts.template')

@section('title', 'Shop')

@section('main')
    <h1>Shop</h1>
@endsection

• Add a new file show.blade.php to this shop folder

@extends('layouts.template')

@section('title', 'Record')

@section('main')
    <h1>Artist - Record</h1>
    <p>You selected the record with id: {{ $id }}</p>
@endsection

# Update ShopController

• The function index() loads the view shop/index.blade.php
• The function show() loads the view shop/show.blade.php. For testing purposes, we temporarily send the $id to the view.

public function index()
{
    return view('shop.index');
}

public function show($id)
{
   return view('shop.show', ['id' => $id]);  // Send $id to the view
} 

• Revisit the pages (http://localhost:3000/shop and http://localhost:3000/shop/5) in a browser