Web Dev 3: Laboratory ManualPart 2
Back to Portal
Laboratory Manual: Web Development 3 (Part 2)

Advanced Guide: Migrating a Full Multi-Page Native PHP Website to Laravel Framework

In this second phase of our Laravel transition, you will move from migrating a single standalone script to migrating an entire multi-page native PHP website (e.g., Home, About, Services, Contact pages). Instead of duplicating headers, footers, and navigation bars across every file, you will harness Laravel's powerful Blade Layout Inheritance system to write modular, maintainable code.

Module Overview & Learning Objectives

Structure & Organize: Properly organize multi-page views within the resources/views/ directory.
Master Layouts: Create reusable layout templates using Laravel Blade directives (@yield, @extends, @section).
Routing: Define multiple navigation routes inside routes/web.php.
Asset Management: Properly link stylesheets, scripts, and internal page navigation across a multi-page app.

Part 1: Blade Layout Inheritance vs. Native PHP Includes

In native PHP, you likely used include 'header.php'; and include 'footer.php'; repeatedly across files like index.php, about.php, and contact.php. In Laravel, we invert this pattern using Layout Inheritance:

Master Layout (The Shell)

A single template (e.g., resources/views/layouts/app.blade.php) that contains your HTML boilerplate, navigation bar, CSS links, and footer.

Child Views (The Content)

Individual pages that “extend” the master layout and only inject their unique content into designated slots.

Part 2: Step-by-Step Guide — Migrating a Multi-Page Website

Step 2.1: Creating the Master Layout File

First, we will create a dedicated folder inside views called layouts to house your master template.

  1. Navigate to your project directory: resources/views/
  2. Create a new folder named layouts.
  3. Inside resources/views/layouts/, create a file named app.blade.php.
  4. Paste the master layout code containing your shared navigation and structure:
resources/views/layouts/app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'My Laravel App')</title>
    <!-- Linking CSS using Laravel asset helper -->
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <!-- Shared Navigation Bar -->
    <nav style="background: #f4f4f4; padding: 10px; margin-bottom: 20px;">
        <a href="/">Home</a> | 
        <a href="/about">About Us</a> | 
        <a href="/services">Services</a> | 
        <a href="/contact">Contact</a>
    </nav>
    <hr>
    <!-- Dynamic Page Content Injection Point -->
    <div class="container">
        @yield('content')
    </div>
    <hr>
    <!-- Shared Footer -->
    <footer>
        <p>&copy; 2026 Web Development 3 Class. All rights reserved.</p>
    </footer>
</body>
</html>

Step 2.2: Creating Child Page Views

Now, migrate your individual native PHP pages into clean Blade views that extend this master template.

  1. Go back to the main views folder: resources/views/
  2. Create three new files: home.blade.php, about.blade.php, and contact.blade.php.

A. Creating resources/views/home.blade.php

resources/views/home.blade.php
@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to Our Homepage</h1>
    <p>This page was successfully migrated from native PHP to Laravel Blade templates!</p>
    <p>Explore our navigation bar above to view other pages seamlessly without duplicating HTML structure.</p>
@endsection

B. Creating resources/views/about.blade.php

resources/views/about.blade.php
@extends('layouts.app')

@section('title', 'About Us')

@section('content')
    <h1>About Our System</h1>
    <p>Learn more about our institutional mission, course objectives, and student web development projects.</p>
@endsection

C. Creating resources/views/contact.blade.php

resources/views/contact.blade.php
@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
    <h1>Get in Touch</h1>
    <p>Reach out to our team via email or visit our university laboratory workstation.</p>
@endsection

Step 2.3: Registering Multiple Routes in routes/web.php

To connect your browser URLs to each of these newly created views, open your routing configuration file.

  1. Locate and open: routes/web.php
  2. Define routes for each page at the bottom of the file:
routes/web.php
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Multi-Page Migration Routes
|--------------------------------------------------------------------------
*/

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

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

// Services Route (Optional extension)
Route::get('/services', function () {
    return view('services');
});

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

Part 3: Testing Your Multi-Page Migration

Ensure your local development server is running in your terminal:

php artisan serve

Open your web browser and test each navigation route path:

  • Home: /
  • About: /about
  • Contact: /contact

Verify that the shared navbar and footer remain consistent across pages while the inner content updates dynamically.

Part 4: Final Laboratory Task & Submission

Migration Task Steps:
  1. Audit Your Old Project: Take a complete multi-page native PHP website you created previously (minimum 3 connected pages).
  2. Build the Layout: Extract the common navigation and footer into a master Blade layout (resources/views/layouts/app.blade.php).
  3. Convert Child Pages: Migrate each page content section into individual .blade.php files using @extends and @section.
  4. Configure Routes & Test: Map all pages inside routes/web.php and demonstrate your fully functioning multi-page Laravel application to your instructor for grading.

Required Submission Deliverables

Attach and submit the following proof of completion to your instructor or laboratory portal:

1. Screenshot of Code & File Location

Capture a clear screenshot of your VS Code workspace / Explorer sidebar showing where your migrated files reside:

  • resources/views/layouts/app.blade.php
  • resources/views/ (child views: home, about, contact)
  • routes/web.php

2. Screen Recording of Working Output

A short screen recording video (MP4 / GIF) demonstrating live navigation on http://127.0.0.1:8000:

  • Terminal with php artisan serve active
  • Clicking across Home, About, and Contact pages
  • Demonstrating persistent navbar & footer with dynamically updated inner content

3. Code Snippets Compilation

Paste text excerpts of your core migrated code in your submission document:

  • Master layout shell with @yield('content')
  • Sample child view with @extends('layouts.app')
  • Route definitions from routes/web.php

4. GitHub Repository Link

Push your complete migrated Laravel application to GitHub and provide your repository URL:

  • Include complete commit history
  • Ensure repository is set to Public for instructor evaluation