Web Programming UNPAS Watch on YouTube

Belajar Laravel 11 | 4. Blade Templating Engine

3 min read 11 months ago

Published on Sep 11, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we'll explore the Blade templating engine in Laravel 11. Blade allows developers to create dynamic and flexible web applications by simplifying the process of building views. We'll also integrate TailwindCSS to enhance the styling of our pages. This guide will walk you through the essential steps to get started with Blade and improve your application’s visual appeal.

Step 1: Setting Up Your Environment

Before diving into Blade, ensure your Laravel environment is ready.

Install Laravel 11 if you haven't already. You can follow the official documentation here.
Make sure you have Node.js and npm installed, as TailwindCSS requires them.

Step 2: Configuring TailwindCSS

To enhance your application's styles, we will install TailwindCSS.

Install TailwindCSS: Run the following command in your Laravel project's root directory:
```
npm install -D tailwindcss postcss autoprefixer
```
Initialize TailwindCSS: Next, create the Tailwind configuration files:
```
npx tailwindcss init -p
```

Configure Tailwind: Open the tailwind.config.js file and set the content option to include your Blade files:

module.exports = {
  content: [
    './resources/views/**/*.blade.php',
    './resources/js/**/*.vue',
    './resources/js/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add Tailwind to your CSS: In your resources/css/app.css, add the following lines to include Tailwind's base, components, and utilities:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Step 3: Compiling Your Assets

After setting up TailwindCSS, compile your assets to apply the styles.

Run the following command:
```
npm run dev
```

Step 4: Creating Blade Templates

Now it's time to utilize Blade for creating views.

Create a Blade File: Navigate to resources/views and create a new Blade file, for example, welcome.blade.php.

Using Blade Syntax: You can use Blade directives like @extends, @section, and @yield. Here’s a basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <title>Welcome</title>
</head>
<body>
    @yield('content')
</body>
</html>

Creating Sections: In the same Blade file, define a section:

@section('content')
    <h1 class="text-3xl font-bold">Welcome to Laravel 11 with Blade!</h1>
@endsection

Step 5: Improving JavaScript and Navigation

If your project requires JavaScript functionality, consider using AlpineJS for reactive components.

Integrate AlpineJS: Add AlpineJS by including it in your Blade file:
```
<script src="//unpkg.com/alpinejs" defer></script>
```

Enhancing Navigation: Create a navigation component that utilizes TailwindCSS for styling. For example:

<nav class="bg-gray-800 p-4">
    <ul class="flex space-x-4">
        <li><a href="/" class="text-white">Home</a></li>
        <li><a href="/about" class="text-white">About</a></li>
    </ul>
</nav>

Conclusion

In this tutorial, we covered the basics of the Blade templating engine in Laravel 11, including how to set up TailwindCSS for styling. By following these steps, you can create dynamic and visually appealing web applications.

Next, consider exploring more advanced Blade features, such as components and layouts, to further enhance your Laravel projects. Happy coding!

Table of Contents

Recent