Laravel Tutorial: Building Your First Home Page

Introduction

Hello there, aspiring web developers! I'm thrilled to be your guide on this exciting journey into the world of Laravel. As someone who's been teaching computer science for over a decade, I can tell you that Laravel is one of the most powerful and enjoyable frameworks to work with. Today, we're going to create our very first home page using Laravel. Don't worry if you've never coded before – we'll take it step by step, and before you know it, you'll be crafting beautiful web pages like a pro!

Laravel - Home

What is Laravel?

Before we dive in, let's quickly chat about what Laravel actually is. Imagine you're building a house. Laravel is like your trusty toolbox, filled with all sorts of nifty tools that make the job easier and faster. It's a PHP framework that helps developers create web applications without reinventing the wheel every time. It's like having a bunch of pre-built Lego pieces that you can snap together to create something amazing!

Prerequisites

To follow along with this tutorial, you'll need:

A computer (obviously!)
PHP installed on your machine (version 7.3 or higher)
Composer (a PHP dependency manager)
A text editor (I recommend Visual Studio Code, but use whatever you're comfortable with)
A sense of adventure and a willingness to learn!

Don't worry if you don't have these set up yet. There are plenty of great tutorials out there to help you get your environment ready.

Setting Up Laravel

Step 1: Installing Laravel

First things first, let's install Laravel. Open up your terminal (don't be scared, it's just a text-based way to talk to your computer) and type:

composer create-project --prefer-dist laravel/laravel my-first-laravel-project

This command tells Composer to create a new Laravel project in a folder called my-first-laravel-project. It might take a few minutes, so maybe grab a coffee or do a little dance while you wait.

Step 2: Navigating to Your Project

Once that's done, let's move into our new project folder:

cd my-first-laravel-project

Congratulations! You're now in your very first Laravel project. Feels good, doesn't it?

Creating Your Home Page

Step 3: Understanding Routes

In Laravel, routes are like the receptionist of your application. They decide where visitors should go when they arrive at your website. Let's open up the routes/web.php file. This is where we'll tell Laravel what to do when someone visits our home page.

You'll see something like this:

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

This is Laravel's default route. It says, "When someone visits the root of our website ('/'), show them the 'welcome' view." But we want to create our own home page, so let's change it up!

Step 4: Creating a Controller

Controllers are like the managers of your application. They handle requests and return responses. Let's create one for our home page:

php artisan make:controller HomeController

This command creates a new file at app/Http/Controllers/HomeController.php. Open it up and let's add a method:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
}

This index method will be responsible for showing our home page.

Step 5: Updating the Route

Now, let's update our routes/web.php file to use our new controller:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

This tells Laravel, "When someone visits '/', use the index method of the HomeController."

Step 6: Creating the View

Now we need to create the actual HTML for our home page. Create a new file at resources/views/home.blade.php and add some HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to My First Laravel Site!</title>
</head>
<body>
    <h1>Hello, Laravel World!</h1>
    <p>This is my very first Laravel home page. Exciting times!</p>
</body>
</html>

Step 7: Running Your Application

Now for the moment of truth! In your terminal, run:

php artisan serve

This starts a development server. Open up your browser and go to http://localhost:8000. You should see your new home page!

Adding Some Flair

Step 8: Using Blade Templates

Laravel uses a templating engine called Blade. It's like HTML with superpowers. Let's update our home.blade.php to use some Blade features:

@extends('layouts.app')

@section('content')
    <h1>Welcome to {{ config('app.name') }}!</h1>
    <p>The current time is {{ now() }}.</p>
@endsection

Now create a new file at resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', config('app.name'))</title>
</head>
<body>
    @yield('content')
</body>
</html>

This creates a reusable layout that our home page (and future pages) can use.

Conclusion

And there you have it! You've created your very first Laravel home page. We've covered a lot of ground – from setting up Laravel to creating routes, controllers, and views. Remember, learning to code is a journey, not a destination. Keep practicing, keep exploring, and most importantly, keep having fun!

Here's a quick reference table of the main Laravel concepts we've covered:

Concept	Description
Routes	Define URLs and how the application responds to requests
Controllers	Handle the logic for responding to requests
Views	Contains the HTML served by your application
Blade	Laravel's templating engine for creating dynamic views

Happy coding, and welcome to the wonderful world of Laravel!

Credits: Image by storyset

Next Tutorial:

Laravel - Overview