Mohammad Kareem

Posted on Aug 30

Baby Steps Learning Laravel

#webdev #php #laravel #sideprojects

Welcome Back, Devs! ✨

In this chapter of our Laravel journey (remember, I’m learning as I write these articles, so this will be one of the most realistic tutorial series you can find!), we’ll dive into our Laravel project. We’ll explore the project structure, get familiar with migrations, and break down the MVC architecture in the simplest way possible.

📅 Today’s Agenda:

Exploring Our Project Structure 🗂️
- Understand the directory layout and navigate through it smoothly.
Setting Up a Database & Learning About Migrations 🛠️
- Configure our database and get to grips with migrations.
Understanding MVC & Creating Some MVC Elements 🔄
- Learn how the MVC architecture works and tinker with migrations.

So, What Are All These Directories Doing? 🤔

Upon your first launch of VSCode in your newly created Laravel project, you might find the directory structure a bit intimidating. Here's a quick overview of what each key directory does:

app/: Contains application logic (controllers, models).
resources/views/: Where your Blade templates live.
routes/: Contains route definitions.
config/: Configuration files for various aspects of Laravel.
database/: Migrations, seeders, and SQLite database (if used).
public/: Entry point for web requests, including assets like CSS and JS.

Good News: You don’t need to know everything right now. Keep this cheatsheet handy!

Bad News: You'll need to learn about these as the series progresses. I'll add "knowledge checkpoints" to remind you of their purposes.

Viewing Your Web App in the Browser 🌐

Let’s get a taste of Laravel! Open your terminal and type:

php artisan serve

Then, head over to your browser and visit localhost:8000. You should see something like this:

Important: Ensure your server and DB are running (if using XAMPP, as explained in my previous article).

What Is Artisan? 🔧

If you're used to JavaScript, think of php artisan serve as similar to npm run dev.

Artisan is a powerful command-line tool that comes with Laravel, making various tasks easy and quick. The serve command starts a local development server. We'll use Artisan more as we progress, so don’t worry too much about it right now.

Configuring Our Database 💾

A web app is essentially a wrapper for a database. Laravel supports various databases:

SQLite: Default, zero configuration—ideal for small to medium projects.
MySQL: For larger projects, though SQLite will work for most cases.

Setting Up SQLite

You don’t need to configure it; it’s the default database.

Setting Up MySQL (if using XAMPP)

Edit your .env file to uncomment the MySQL configuration:

SQLite Config

MySQL Config

The .env file is like a switchboard for toggling configurations on and off.

🔍 Sneak Peek into MVC: Baby Examples 🍼

Before diving deeper into MVC in future articles, let’s get a quick overview with some baby examples.

What is MVC? 🤔

MVC stands for Model-View-Controller. It’s a design pattern that separates concerns in your application:

Model: 🗃️ Manages the data and business logic.
View: 👁️ Displays data to the user.
Controller: 🎛️ Connects the Model and View, handling input and data flow.

🛠️ Baby Example: A Simple "Hello World" App

1. Model

Here’s a Greeting model for storing messages:

// app/Models/Greeting.php
namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Greeting extends Model
{
    protected $table = 'greetings';
    protected $fillable = ['message'];
}

2. View

The view displays the greeting message:

<!-- resources/views/greeting.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>Greeting</title>
</head>
<body>
    <h1>{{ $message }}</h1>
</body>
</html>

3. Controller

The controller fetches the greeting message and passes it to the view:

// app/Http/Controllers/GreetingController.php
namespace App\Http\Controllers;

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

class GreetingController extends Controller
{
    public function show()
    {
        $greeting = Greeting::first();
        return view('greeting', ['message' => $greeting->message]);
    }
}

How It All Works Together

Model: Manages data (Greeting class).
View: Presents data (greeting.blade.php).
Controller: Connects Model and View (GreetingController).

In this setup:

The Model handles the data.
The View presents the data.
The Controller connects the two.

In future articles, we'll dive deeper into each component and explore more complex examples. Stay tuned! 🚀

DEV Community