First Laravel application - Mini Project: Build & Apply

First Laravel application

📖 Scenario: You want to create a simple Laravel web page that shows a welcome message. This is like setting up a new shop sign to greet visitors.

🎯 Goal: Build a basic Laravel application that displays a welcome message on the homepage using routes and views.

📋 What You'll Learn

Create a route for the homepage at '/'

Create a view file named welcome.blade.php in the resources/views folder

Pass a variable called message from the route to the view

Display the message variable inside the view

💡 Why This Matters

🌍 Real World

Creating routes and views is the foundation of building web pages in Laravel applications.

💼 Career

Understanding routing and Blade templating is essential for Laravel developers to build dynamic websites.

1

Set up the homepage route

In the routes/web.php file, create a route for the homepage at '/' that returns the view named 'welcome'.

Laravel

// Your code here to create the homepage route

Hint

Use Route::get('/', function () { return view('welcome'); }); to create the homepage route.

2

Create the welcome view file

Create a Blade view file named welcome.blade.php inside the resources/views folder. Inside it, write HTML with a heading that says Welcome to Laravel!.

Laravel

Hint

Create a file welcome.blade.php with <h1>Welcome to Laravel!</h1> inside resources/views.

3

Pass a message variable from route to view

Modify the homepage route in routes/web.php to pass a variable called message with the value 'Hello from Laravel!' to the welcome view.

Laravel

Welcome to Laravel!

Hint

Use return view('welcome', ['message' => 'Hello from Laravel!']); inside the route.

4

Display the message variable in the view

In the welcome.blade.php file, add Blade syntax to display the message variable below the heading.

Laravel

 'Hello from Laravel!']);
});

// resources/views/welcome.blade.php
// Add Blade syntax to show message below heading

Hint

Use {{ $message }} in the Blade view to show the message variable.

Practice

1. What is the main purpose of the routes/web.php file in a new Laravel application?

easy

A. To configure server settings for deployment

B. To store database connection settings

C. To write CSS styles for the application

D. To define the URLs and what they should return when visited

Solution

1. Step 1: Understand the role of routes in Laravel

   Routes tell Laravel which URL should show which content or run which code.

2. Step 2: Identify what routes/web.php does

   This file is where you write those URL rules for web pages.

3. Final Answer:

   To define the URLs and what they should return when visited -> Option D

4. Quick Check:

   Routes = URL rules [OK]

Hint: Routes file maps URLs to responses [OK]

Common Mistakes:

• Confusing routes with database settings
• Thinking routes handle CSS or server configs
• Assuming routes are for backend logic only

2. Which command starts the built-in Laravel development server?

easy

A. php artisan serve

B. php serve artisan

C. php artisan start

D. php start artisan

Solution

1. Step 1: Recall the Laravel command to run the server

   The correct command is php artisan serve to start the local server.

2. Step 2: Check the options for correct syntax

   Only php artisan serve matches the exact command syntax.

3. Final Answer:

   php artisan serve -> Option A

4. Quick Check:

   Start server = php artisan serve [OK]

Hint: Remember: 'serve' runs the server in Laravel [OK]

Common Mistakes:

• Swapping command order
• Using 'start' instead of 'serve'
• Adding extra words in the command

3. Given this route in routes/web.php:

Route::get('/', function () {
    return 'Hello, Laravel!';
});

What will you see when you visit http://localhost:8000/ in your browser?

medium

A. A blank page

B. An error message

C. The text 'Hello, Laravel!'

D. A JSON object

Solution

1. Step 1: Understand the route definition

   The route listens for a GET request at '/' and returns the string 'Hello, Laravel!'.

2. Step 2: Predict the browser output

   Visiting the root URL will display exactly the returned string as plain text.

3. Final Answer:

   The text 'Hello, Laravel!' -> Option C

4. Quick Check:

   Route returns string = 'Hello, Laravel!' [OK]

Hint: Route returns string shown in browser [OK]

Common Mistakes:

• Expecting JSON or HTML page instead of plain text
• Thinking it shows an error or blank page
• Confusing route URL with different path

4. What is wrong with this route code in routes/web.php?

Route::get('/', function {
    return 'Welcome!';
});

medium

A. Missing semicolon after return statement

B. Missing parentheses after function keyword

C. Route method should be post, not get

D. The string should be in double quotes

Solution

1. Step 1: Check the function syntax

   Anonymous functions in PHP require parentheses even if no parameters are passed.

2. Step 2: Identify the syntax error

   The code misses parentheses after function, causing a syntax error.

3. Final Answer:

   Missing parentheses after function keyword -> Option B

4. Quick Check:

   Anonymous function needs () [OK]

Hint: Always add () after function for anonymous functions [OK]

Common Mistakes:

• Forgetting parentheses after function
• Thinking semicolon is missing after return
• Confusing HTTP methods get/post
• Believing string quotes cause error

5. You want to create a new Laravel route that returns the current year dynamically. Which code snippet correctly does this in routes/web.php?

hard

A. Route::get('/year', function () {
return date('Y');
});

B. Route::get('/year', function () {
echo "date('Y')";
});

C. Route::get('/year', function () {
return "Year is date('Y')";
});

D. Route::get('/year', function () {
return date(d);
});

Solution

1. Step 1: Use PHP date function correctly

   The date('Y') function returns the current year as a string.

2. Step 2: Return the year string properly in the route

   Using return date('Y'); inside the route's closure sends the year as response.

3. Step 3: Identify errors in other options

   The echo option outputs literal "date('Y')"; another returns literal "Year is date('Y')"; the last uses date(d) without quotes, returning the day of the month instead of the year.

4. Final Answer:

   Route::get('/year', function () { return date('Y'); }); -> Option A

5. Quick Check:

   Return date('Y') for current year [OK]

Hint: Use return with date('Y') inside route function [OK]

Common Mistakes:

• Using echo instead of return in route
• Forgetting quotes around 'Y' in date()
• Returning a string that does not evaluate PHP
• Confusing syntax for PHP date function