Laravel - Create Linked Page

Mohamad MahmoodMohamad Mahmood
3 min read

[0] Prep

Continue from previous article or download quickstart file.

[1] Migration Tasks

[1.1] Create migration file

COPY

php artisan make:migration create_workgroups_table --create=workgroups

[1.2] Edit migration file

Assuming we have the following DDL:

CREATE TABLE "workgroups" (
"id" INTEGER,
"hid" TEXT,
"name" TEXT,
"refr" TEXT,
"desc" TEXT,
"locn" TEXT,
"estartdate" INT,
"key1" TEXT,
"key2" TEXT,
"key3" TEXT,
"key4" TEXT,
"key5" TEXT,
"n" INT,
"admn" INT,
"cord" INT,
"modr" INT,
"oper" INT,
PRIMARY KEY("id" AUTOINCREMENT)
)

File C:\laragon\www\razzi\database\migrations\2024_03_31_093600_create_workgroups_table.php :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up()
    {
        Schema::create('workgroups', function (Blueprint $table) {
            $table->increments('id');
            $table->string('hid');
            $table->string('name');
            $table->string('refr');
            $table->string('desc');
            $table->string('locn');
            $table->integer('estartdate');
            $table->string('key1');
            $table->string('key2');
            $table->string('key3');
            $table->string('key4');
            $table->string('key5');
            $table->integer('n');
            $table->integer('admn');
            $table->integer('cord');
            $table->integer('modr');
            $table->integer('oper');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('workgroups');
    }
};

[1.2] Create model

php artisan make:model Workgroup

[1.3] Run migration

php artisan migrate

[1.4] Import CSV data

php artisan app:import-csv-data C:\laragon\z\razzi\workgroups.csv --table=workgroups

Outcome:

[2] Add page to view records

Create a new route: Open your routes/web.php file and add a route that maps to a controller method or a closure.

use App\Http\Controllers\WorkgroupController;

Route::get('/workgroups', [WorkgroupController::class, 'index'])->name('workgroups.index');

Create a new controller: Run the following command to generate a new controller:

php artisan make:controller WorkgroupController

This will create a new WorkgroupController.php file in the app/Http/Controllers directory.

Define the index method: Open the WorkgroupController.php file and define the index method. This method will handle the logic for retrieving all members and passing them to the view.

File C:\laragon\www\razzi\app\Http\Controllers\WorkgroupController.php :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Workgroup;

class WorkgroupController extends Controller
{
    public function index()
    {
        $workgroups = Workgroup::all();
        return view('workgroups.index', compact('workgroups'));
    }
}

Create a view: Create a new file named index.blade.php in the resources/views/workgroups directory. This file will contain the HTML markup for displaying the members.

File C:\laragon\www\razzi\resources\views\workgroups\index.blade.php:

<h1>Workgroups</h1>

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Refr</th>
            <th>Desc</th>
            <th>Locn</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($workgroups as $workgroup)
        <tr>
            <td>{{ $workgroup->name }}</td>
            <td>{{ $workgroup->refr }}</td>
            <td>{{ $workgroup->desc }}</td>
            <td>{{ $workgroup->locn }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

Output:

[3] Integrate into Breeze dashboard

[3.1] Add the link into the layout file

                    <x-nav-link :href="route('workgroups.index')" :active="request()->routeIs('dashboard')">
                        {{ __('Workgroups') }}
                    </x-nav-link>

[2.2] Add the Breeze layout into the view file

File C:\laragon\www\razzi\resources\views\workgroups\index.blade.php:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Workgroups') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Refr</th>
                                <th>Desc</th>
                                <th>Locn</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($workgroups as $workgroup)
                            <tr>
                                <td>{{ $workgroup->name }}</td>
                                <td>{{ $workgroup->refr }}</td>
                                <td>{{ $workgroup->desc }}</td>
                                <td>{{ $workgroup->locn }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Outcome:

0
Subscribe to my newsletter

Read articles from Mohamad Mahmood directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Mohamad Mahmood
Mohamad Mahmood

Mohamad's interest is in Programming (Mobile, Web, Database and Machine Learning). He studies at the Center For Artificial Intelligence Technology (CAIT), Universiti Kebangsaan Malaysia (UKM).