Assignments Of Day 11 Advanced Blade Features

Assignments Of Day 11  

Advanced Blade Features

Assignment 1: Create a Layout and Extend it

Problem

1.  Create a layout file named main.blade.php with the following sections:

o    A header that says "My Blog."

o    A dynamic page title (@yield('title')).

o    A main content area (@yield('content')).

o    A footer with static text like "© 2024 My Blog."

2.  Extend this layout in a home.blade.php file and include:

o    A title "Home."

o    A welcome message in the content area: "Welcome to My Blog!"

Solution

main.blade.php

php

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@yield('title')</title>

</head>

<body>

    <header>

        <h1>My Blog</h1>

    </header>

 

    <main>

        @yield('content')

    </main>

 

    <footer>

        <p>&copy; 2024 My Blog</p>

    </footer>

</body>

</html>

home.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Home')

 

@section('content')

    <h2>Welcome to My Blog!</h2>

    <p>Stay tuned for updates and posts.</p>

@endsection

Expected Output:
The home page will display the layout with a dynamic title "Home" and the welcome message in the content area.

Assignment 2: Use Components for Alerts

Problem

1.  Create a Blade component named Alert with two dynamic properties:

o    type (e.g., success, error).

o    message (the alert text).

2.  Use this component in the home.blade.php file to display a success message: "Welcome to My Blog!"

Solution

Create the Component
Run the command:

bash

Copy code

php artisan make:component Alert

Edit alert.blade.php
Located in resources/views/components/alert.blade.php:

php

Copy code

<div class="alert alert-{{ $type }}">

    {{ $message }}

</div>

Use the Component in home.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Home')

 

@section('content')

    <x-alert type="success" message="Welcome to My Blog!" />

@endsection

Expected Output:
A styled alert box (e.g., with alert-success) will display the message "Welcome to My Blog!"

Assignment 3: Create a Sidebar Partial

Problem

1.  Create a partial view named sidebar.blade.php with links to "Home," "About," and "Contact."

2.  Include this partial in the main.blade.php layout so it appears on every page.

Solution

sidebar.blade.php
Located in resources/views/partials/sidebar.blade.php:

php

Copy code

<nav>

    <ul>

        <li><a href="/home">Home</a></li>

        <li><a href="/about">About</a></li>

        <li><a href="/contact">Contact</a></li>

    </ul>

</nav>

Modify main.blade.php
Include the sidebar using @include:

php

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@yield('title')</title>

</head>

<body>

    <header>

        <h1>My Blog</h1>

    </header>

 

    @include('partials.sidebar')

 

    <main>

        @yield('content')

    </main>

 

    <footer>

        <p>&copy; 2024 My Blog</p>

    </footer>

</body>

</html>

Expected Output:
The sidebar will appear on every page with links to "Home," "About," and "Contact."

Assignment 4: Use @include for the Footer

Problem

1.  Create a partial view for the footer (footer.blade.php) containing the text "This is the footer."

2.  Replace the footer section in the main.blade.php layout with this partial.

Solution

footer.blade.php
Located in resources/views/partials/footer.blade.php:

php

Copy code

<footer>

    <p>This is the footer.</p>

</footer>

Modify main.blade.php
Replace the footer with the @include:

php

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@yield('title')</title>

</head>

<body>

    <header>

        <h1>My Blog</h1>

    </header>

 

    @include('partials.sidebar')

 

    <main>

        @yield('content')

    </main>

 

    @include('partials.footer')

</body>

</html>

Expected Output:
The footer content will now be managed in the partial view.

Assignment 5: Dynamic Title and Content

Problem

1.  Update the layout (main.blade.php) to include a dynamic <meta description> tag using @yield.

2.  Pass a meta description to the home.blade.php page.

Solution

Modify main.blade.php
Add a placeholder for the meta description:

php

Copy code

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="@yield('description')">

    <title>@yield('title')</title>

</head>

Modify home.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Home')

 

@section('description', 'This is the home page of My Blog.')

 

@section('content')

    <h2>Welcome to My Blog!</h2>

    <p>Stay tuned for updates and posts.</p>

@endsection

Expected Output:
The page will now have a meta description tag with dynamic content.

General Notes for Evaluation

1.  Ensure students can test the solutions locally by setting up Laravel correctly.

2.  Emphasize reusability and clean code practices using Blade features.

3.  Encourage creativity in designing components and layouts.

Let me know if you'd like additional assignments or variations!

4o

You said:

give more

ChatGPT said:

ChatGPT

Here are more assignments with solutions to reinforce the concepts of Blade features for beginners:

Assignment 6: Conditional Rendering with Blade

Problem

1.  Create a Blade file dashboard.blade.php that checks if the user is an admin or a regular user.

2.  Display:

o    "Welcome, Admin!" if the $role variable is admin.

o    "Welcome, User!" if the $role variable is user.

3.  Include a logout button for all users.

Solution

dashboard.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Dashboard')

 

@section('content')

    @if($role === 'admin')

        <h2>Welcome, Admin!</h2>

    @elseif($role === 'user')

        <h2>Welcome, User!</h2>

    @else

        <h2>Welcome, Guest!</h2>

    @endif

 

    <form method="POST" action="/logout">

        @csrf

        <button type="submit">Logout</button>

    </form>

@endsection

Controller Code to Pass Role (Example):

php

Copy code

public function dashboard()

{

    $role = 'admin'; // Example role; could come from authentication

    return view('dashboard', ['role' => $role]);

}

Expected Output:
Displays a message based on the $role variable and a logout button for all users.

Assignment 7: Loop Through an Array

Problem

1.  Create a Blade view products.blade.php that receives an array of product names.

2.  Display each product in an unordered list using a Blade loop.

Solution

products.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Product List')

 

@section('content')

    <h2>Product List</h2>

    <ul>

        @foreach($products as $product)

            <li>{{ $product }}</li>

        @endforeach

    </ul>

@endsection

Controller Code to Pass Products (Example):

php

Copy code

public function products()

{

    $products = ['Laptop', 'Smartphone', 'Tablet', 'Smartwatch'];

    return view('products', ['products' => $products]);

}

Expected Output:
An unordered list of product names passed from the controller.

Assignment 8: Blade Includes with Data

Problem

1.  Create a partial view user-profile.blade.php that displays a user's name and email.

2.  Include this partial in the profile.blade.php file and pass the data dynamically.

Solution

user-profile.blade.php

php

Copy code

<div>

    <h3>User Profile</h3>

    <p>Name: {{ $name }}</p>

    <p>Email: {{ $email }}</p>

</div>

profile.blade.php

php

Copy code

@extends('main')

 

@section('title', 'User Profile')

 

@section('content')

    @include('partials.user-profile', ['name' => $userName, 'email' => $userEmail])

@endsection

Controller Code to Pass User Data (Example):

php

Copy code

public function profile()

{

    return view('profile', [

        'userName' => 'John Doe',

        'userEmail' => 'john.doe@example.com'

    ]);

}

Expected Output:
Displays the user’s profile with dynamic name and email.

Assignment 9: Blade Components with Slots

Problem

1.  Create a reusable Card component with a slot for content.

2.  Use this component in a blog.blade.php file to display two blog posts.

Solution

Create the Component
Run the command:

bash

Copy code

php artisan make:component Card

Edit card.blade.php
Located in resources/views/components/card.blade.php:

php

Copy code

<div class="card">

    <h3>{{ $title }}</h3>

    <div class="card-body">

        {{ $slot }}

    </div>

</div>

blog.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Blog')

 

@section('content')

    <x-card title="Post 1">

        <p>This is the first blog post content.</p>

    </x-card>

 

    <x-card title="Post 2">

        <p>This is the second blog post content.</p>

    </x-card>

@endsection

Expected Output:
Displays two card-like sections, each with a title and content provided via the slot.

Assignment 10: Blade Loop with Conditional Rendering

Problem

1.  Create a Blade view tasks.blade.php to display a list of tasks.

2.  If the task is marked as completed, display it with a strikethrough.

Solution

tasks.blade.php

php

Copy code

@extends('main')

 

@section('title', 'Task List')

 

@section('content')

    <h2>Task List</h2>

    <ul>

        @foreach($tasks as $task)

            <li>

                @if($task['completed'])

                    <s>{{ $task['name'] }}</s>

                @else

                    {{ $task['name'] }}

                @endif

            </li>

        @endforeach

    </ul>

@endsection

Controller Code to Pass Tasks (Example):

php

Copy code

public function tasks()

{

    $tasks = [

        ['name' => 'Buy groceries', 'completed' => true],

        ['name' => 'Complete project', 'completed' => false],

        ['name' => 'Call friend', 'completed' => true]

    ];

    return view('tasks', ['tasks' => $tasks]);

}

Expected Output:
Tasks marked as completed will appear with a strikethrough.

Assignment 11: Custom Error Messages with Blade

Problem

1.  Create a Blade view form.blade.php for a contact form with a name field.

2.  Display a custom error message below the input field if the name is missing.

Solution

form.blade.php

php

Copy code

@extends('main')

 

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

 

@section('content')

    <h2>Contact Form</h2>

    <form method="POST" action="/submit">

        @csrf

        <label for="name">Name:</label>

        <input type="text" id="name" name="name" value="{{ old('name') }}">

        @error('name')

            <p style="color: red;">{{ $message }}</p>

        @enderror

        <button type="submit">Submit</button>

    </form>

@endsection

Controller Code for Validation (Example):

php

Copy code

public function submit(Request $request)

{

    $request->validate([

        'name' => 'required'

    ]);

 

    return 'Form submitted successfully!';

}

Expected Output:
If the user submits the form without entering a name, a red error message will appear below the input field.

These assignments provide further practice in Blade’s advanced features while reinforcing the principles of dynamic rendering, reusability, and clean code. Let me know if you need even more tasks!


 

Comments

Post a Comment

Popular posts from this blog

MCQs Of Day CRUD 8 Operations with Eloquent

MCQs Of Day 8 CRUD  Operations with Eloquent   CRUD Operations with Eloquent - MCQs 1. What does CRUD stand for in database management? a) Create, Read, Update, Delete b) Connect, Retrieve, Update, Delete c) Create, Return, Update, Delete d) Collect, Read, Update, Delete Answer:  a) Create, Read, Update, Delete Explanation:  CRUD is a set of operations that stand for Create, Read, Update, and Delete, which are basic functions used in databases to manage records. 2. Which Laravel method is used to create a new record in a database? a) create() b) store() c) insert() d) add() Answer:  a) create() Explanation:  The create() method is used in Laravel's Eloquent ORM to create a new record in the database. 3. Which of the following is true about Eloquent ORM in Laravel? a) It allows only raw SQL queries. b) It does not support relationships between models. c) It provides an active record implementation for working with the database. d) It is used only for Read op...
Read more

Lecture Notes Of Day 24: Laravel Policies

  Lecture Notes Of Day 24: Laravel Policies Objective: To implement policies for authorization, ensuring that different users can perform only the actions they are authorized to do. This will help students understand how to manage user permissions effectively for different actions in Laravel applications. Outcome: By the end of this class, students will be able to create, register, and use policies to manage user permissions for various actions in a Laravel application. They will also learn how to secure resources and actions based on user roles or other attributes. What are Policies in Laravel? In Laravel, policies provide a convenient way to authorize user actions on certain resources. A policy is essentially a class that organizes authorization logic for a particular model. For example, if you have a Post model, you might have a PostPolicy class that defines who can view, update, or delete a post. Why use Policies? Policies centralize authorization ...
Read more

MCQs of Day 7 Eloquent ORM Basics

  MCQs of Day 7 Eloquent ORM Basics 1. Which command is used to create an Eloquent model in Laravel? A) php artisan create:model B) php artisan make:model C) php artisan model:create D) php artisan generate:model Answer: B) php artisan make:model Explanation: The php artisan make:model command is used to create a new Eloquent model in Laravel. 2. What is the purpose of the $fillable property in an Eloquent model? A) To define which fields can be mass-assigned B) To define the table name C) To store timestamps D) To define relationships between models Answer: A) To define which fields can be mass-assigned Explanation: The $fillable property in an Eloquent model defines which fields are allowed for mass-assignment to protect against mass-assignment vulnerabilities. 3. How do you retrieve a single record by its ID in Eloquent? A) Model::get(1) B) Model::find(1) C) Model::single(1) D) Model::first(1) Answer: B) Model::find(1) Explanation: The find() method retrieves a single record by ...
Read more