Forem: Fajar Windhu Zulfikar

Build an AI Project Manager with MCP, Node.js, and Google Sheets

Fajar Windhu Zulfikar — Mon, 01 Sep 2025 00:03:45 +0000

Learn to build an intelligent task management system that understands natural language and stores data in Google Sheets using the Model Context Protocol.

💡 I included the link to the example repository at the conclusion of this tutorial.

This guide walks through building a simple project management MCP server using Node.js, TypeScript, Google Sheets as a backend, and OpenAI for natural language interactions. You'll learn how to:

Expose tools via the Model Context Protocol (MCP)
Write tasks into a Google Sheets spreadsheet
Query tasks naturally using OpenAI agents

We will build from scratch using:

Node.js + Express (REST API backend)
Google Sheets API via googleapis
OpenAI Agents + MCP (for AI reasoning & tool usage)
Zod (validation)
TypeScript (strong typing)

Here is how the spreadsheet will look like when the project is done:

Prerequisites

Before we start, make sure you have:

Node.js (>= 18)
npm or yarn
Google Spreadsheet credentials (for managing the spreadsheet)
An OpenAI API key (we'll use it to run the agent)

Project Setup

Let's start by creating our project and installing the necessary dependencies. We need several packages to build our MCP server with Google Sheets integration.

## Create folder
mkdir blog-ai-mcp-pm && cd blog-ai-mcp-pm

## Init Node.js project
npm init -y

## Install dependencies
npm install express zod dotenv
npm install googleapis openai @openai/agents @modelcontextprotocol/sdk

## Dev deps
npm install -D typescript tsx @types/node @types/express

Here's what each dependency does:

express: Our web server framework
zod: Runtime validation for API inputs
googleapis: Official Google Sheets API client
@modelcontextprotocol/sdk: Core MCP protocol implementation
tsx: Fast TypeScript execution for development

Now let's set up TypeScript configuration for our project:

npx tsc --init

I'm using a specific TypeScript configuration optimized for modern Node.js development with ESM modules. Replace the generated tsconfig.json with this:

{
  "compilerOptions": {
    // Ignore module structure
    "module": "Preserve",

    // Allow JSON modules to be imported
    "resolveJsonModule": true,

    // Allow JS files to be imported from TS and vice versa
    "allowJs": true,

    // Use correct ESM import behavior
    "esModuleInterop": true,

    // File Layout
    // "rootDir": "./src",
    "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "target": "ES2020",
    "types": [],

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Recommended Options
    "strict": true,
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
  }
}

The key settings here are:

module: "Preserve": Keeps imports/exports unchanged so Node.js can resolve them as ESM.
esModuleInterop: true: Makes import express from "express" work with CommonJS packages.
outDir: "./dist": Compiled JS goes into dist/.
target: "ES2020": Uses modern JS features supported by recent Node.js.
strict: true: Enforces strong typing overall.

Project Structure

blog-ai-mcp-pm/
├── dist/
├── src/
│   ├── agent.ts
│   ├── index.ts
│   ├── mcpServer.ts
│   ├── config/
│   │   ├── config.ts
│   │   └── constants.ts
│   ├── routes/
│   │   └── tasks.ts
│   ├── services/
│   │   └── googleSheetsService.ts
│   ├── tools/
│   │   ├── addTask.ts
│   │   ├── getTasks.ts
│   │   └── index.ts
│   ├── types/
│   │   └── task.interface.ts
│   ├── utils/
│   │   ├── formatters.ts
│   │   └── helpers.ts
├── .env
├── package.json
├── tsconfig.json

We will organize the project using a clean modular structure to keep concerns separated and maintainable. The core entry points are index.ts, which initializes the app, agent.ts, which configures the OpenAI MCP Agent, and mcpServer.ts, which sets up the MCP server itself.

Features are broken down into their own layers: routes/ defines task-related endpoints, tools/ holds the MCP tools like addTask and getTasks, and services/ contains integrations such as googleSheetsService.ts for external APIs.

Shared logic is centralized under utils/ for formatters and helpers, while types/ defines TypeScript interfaces like task.interface.ts to ensure type safety. Configuration constants and environment variables live in config/ and .env, keeping settings flexible and secure.

Environment Config

Let's continue with the config setup. We need to create a centralized configuration system that reads our environment variables and provides type-safe access to them throughout our application.

// src/config/config.ts

import "dotenv/config";

export const config = {
  port: process.env.PORT ? parseInt(process.env.PORT, 10) : 3000,
  google: {
    projectId: process.env.GOOGLE_PROJECT_ID,
    privateKeyId: process.env.GOOGLE_PRIVATE_KEY_ID,
    privateKey: process.env.GOOGLE_PRIVATE_KEY,
    clientEmail: process.env.GOOGLE_CLIENT_EMAIL,
    clientId: process.env.GOOGLE_CLIENT_ID,
  },
  spreadsheet: {
    id: process.env.SPREADSHEET_ID
  },
  openAI: {
    apiKey: process.env.OPENAI_API_KEY,
  },
  isProd: process.env.NODE_ENV === "production",
};

This configuration file centralizes all our environment variables in one place. The import "dotenv/config" automatically loads our .env file, and we're creating a typed config object that the rest of our application can safely import. Notice how we're parsing the port as an integer and providing a default value - this prevents runtime errors if the environment variable isn't set properly.

💡 Note: You Need API Usage Balance

Keep in mind that using the OpenAI API is a paid service. To make requests to the API, your OpenAI account must have a sufficient balance or an active subscription plan. If you run out of balance, your API requests will fail until you top up your account or renew your subscription.

You can get the detail of the google credentials by downloading the json that looks like this:

{
  "type": "service_account",
  "project_id": "",
  "private_key_id": "",
  "private_key": "-----BEGIN PRIVATE KEY-----\n\n-----END PRIVATE KEY-----\n",
  "client_email": "x@x.iam.gserviceaccount.com",
  "client_id": "",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "",
  "universe_domain": "googleapis.com"
}

Now let's define some constants that our application will use:

// src/config/constants.ts

export const USER_AGENT = "project-management-app/1.0";

export const TASK_STATUSES = ["Todo", "In Progress", "Done"] as const;

These constants define our application's identity for API calls and the allowed task statuses. Using as const on the task statuses array gives us strict TypeScript typing - TypeScript will know exactly which strings are valid, not just that it's an array of strings. This helps prevent typos when working with task statuses later in our code.

Create Utility Codes

Now we'll create some helper utilities that our MCP server will use throughout the application. These utilities handle common formatting tasks and provide consistent interfaces for our tools.

Create Formatter Helper

// src/utils/formatters.ts
interface ToolResponseProps {
  content: {
    type: "text";
    text: string;
  }[];
}

export function toolResponse(message: string): ToolResponseProps {
  return {
    content: [
      {
        type: "text",
        text: message,
      },
    ],
  };
}

This formatter creates standardized responses for our MCP tools. The MCP protocol expects responses in a specific format with a content array containing text objects. Rather than manually creating this structure every time a tool returns data, we use this helper function to ensure consistent formatting across all our tools.

Read also:

Building a CLI Tool in JavaScript: Streamlining Tasks With Simple Commands

Laravel Service Pattern: Applying SOLID Principles for Scalable Code

Create General Helper

// src/utils/helpers.ts

export const formatDate = (date: Date): string => {
  let d = date.getDate().toString().padStart(2, "0");
  let m = (date.getMonth() + 1).toString().padStart(2, "0");
  let y = date.getFullYear();
  return `${d}/${m}/${y}`;
}

This utility formats JavaScript Date objects into a consistent DD/MM/YYYY string format. We'll use this when creating tasks with due dates or displaying task information. The padStart(2, "0") ensures single-digit days and months get a leading zero, so we get "01/03/2024" instead of "1/3/2024" for better consistency in our spreadsheet.

Google Sheet Service

Let's create the Google Sheets service that will handle authentication and provide access to the Sheets API. This service will be the foundation for all our spreadsheet operations.

// src/services/googleSheetsService.ts

import "dotenv/config";
import { google } from "googleapis";
import { config } from "../config/config.js";

const SCOPES = ["https://www.googleapis.com/auth/spreadsheets"];

const {
  projectId,
  privateKeyId,
  privateKey,
  clientEmail,
  clientId,
} = config.google;

if (
  !projectId ||
  !privateKeyId ||
  !privateKey ||
  !clientEmail ||
  !clientId
) {
  throw new Error("Missing required Google service account environment variables.");
}

const auth = new google.auth.GoogleAuth({
  credentials: {
    type: "service_account",
    project_id: projectId,
    private_key_id: privateKeyId,
    private_key: privateKey.replace(///n/g, "/n"),
    client_email: clientEmail,
    client_id: clientId,
  },
  scopes: SCOPES,
});

export const sheets = google.sheets({ version: "v4", auth });

This service sets up authentication with Google's service account system. We're using service account credentials (not OAuth) because our MCP server needs to access the spreadsheet programmatically without user interaction. The SCOPES array specifies we only need spreadsheet access, following the principle of least privilege. The exported sheets client will handle all our spreadsheet operations.

Create The Tools

Now we'll build the core MCP tools that our AI agent will use to manage tasks. Each tool follows the MCP protocol specification and includes proper validation.

Create Add Task Tool

// src/tools/addTask.ts

import { z } from "zod";
import { TASK_STATUSES } from "../config/constants.js";
import { sheets } from "../services/googleSheetsService.js";
import { toolResponse } from "../utils/formatters.js";
import { formatDate } from "../utils/helpers.js";
import { config } from "../config/config.js";

const addTaskToolSchema = {
  task: z.string().max(1000).describe("The task to assign"),
  assignee: z.string().max(100).describe("The name of the person that should be assigned to"),
  status: z.enum(TASK_STATUSES).describe("Status of the task"),
  dueDate: z.string().max(100).describe("Due date of the task with toLocaleDateString format (DD/MM/YYYY)"),
};

const zAddTaskToolSchema = z.object(addTaskToolSchema);

type AddTaskToolProps = z.infer<typeof zAddTaskToolSchema>;

export const addTaskTool = {
  name: "add_task",
  description: "Add task to the spreadsheet",
  schema: addTaskToolSchema,
  async execute({ task, assignee, status, dueDate }: AddTaskToolProps): Promise<any> {
    try {
      if (!config.spreadsheet.id) {
        return toolResponse("Spreadsheet ID is missng");
      }

      const createdDate = formatDate(new Date);
      const values = [[task, assignee, status, createdDate, dueDate]];
      await sheets.spreadsheets.values.append({
        spreadsheetId: config.spreadsheet.id,
        range: "Tasks!A:E",
        valueInputOption: "USER_ENTERED",
        requestBody: { values },
      });

      const message = `✅ Task added:\n- Task: ${task}\n- Assignee: ${assignee}\n- Status: ${status}\n- Created: ${createdDate}\n- Due: ${dueDate}`;

      return toolResponse(message);
    } catch (error) {
      console.error("Error adding task:", error);
      throw error;
    }
  },
};

This tool handles creating new tasks in our spreadsheet. The Zod schema validates all inputs before execution - ensuring task descriptions aren't too long, assignee names are reasonable, and status values match our predefined constants. The sheets.spreadsheets.values.append method adds a new row to our "Tasks" sheet, and we return a formatted confirmation message that the AI agent can show to users.

Create Get Tasks Tool

// src/tools/getTasks.ts

import { config } from "../config/config.js";
import { sheets } from "../services/googleSheetsService.js";
import type { Task } from "../types/task.interface.js";
import { toolResponse } from "../utils/formatters.js";

export const getTasksTool = {
  name: "get_tasks",
  description: "Get all tasks",
  schema: {},
  async execute(): Promise<any> {
    try {
      if (!config.spreadsheet.id) {
        return toolResponse("Spreadsheet ID is missng");
      }

      const response = await sheets.spreadsheets.values.get({
        spreadsheetId: config.spreadsheet.id,
        range: "Tasks!A:E",
      });

      const rows = response.data.values || [];
      if (rows.length <= 1) {
        return toolResponse("📭 No tasks found.");
      }

      // skip header row
      const tasks: Task[] = rows.slice(1).map((row) => ({
        task: row[0] || "",
        assignee: row[1] || "",
        status: (row[2] as Task["status"]) || "Todo",
        createdDate: row[3] || "",
        dueDate: row[4] || "",
      }));

      // Format tasks as text
      const formattedTasks = tasks
        .map(
          (t, i) =>
            `${i + 1}. ${t.task} — ${t.assignee} [${t.status}] (Created: ${t.createdDate}, Due: ${t.dueDate})`
        )
        .join("\n");

      return toolResponse(`📋 Task list:\n\n${formattedTasks}`);
    } catch (error) {
      console.error("Error fetching tasks:", error);
      throw new Error("Failed to fetch tasks");
    }
  },
};

This tool retrieves all tasks from our spreadsheet and formats them for display. We're reading from the "Tasks!A:E" range (columns A through E, remember the screenshot I shared above), skipping the header row with slice(1), and mapping each row to our Task interface. The formatted output includes emojis and clear structure so users can easily read the task list when the AI agent returns it. Notice how we handle empty cells with fallback values using the || "" operator.

Create the Types Used

// src/types/task.interface.ts

import type { TASK_STATUSES } from "../config/constants.js";

export type TaskStatus =  typeof TASK_STATUSES[number];

export interface Task {
  task: string;
  assignee?: string;
  status: TaskStatus;
  createdDate?: string;
  dueDate?: string;
}

Here we're defining the core data structure for our project management system. The TaskStatus type extracts the literal string types from our TASK_STATUSES constant array, giving us type safety - TypeScript will only allow "Todo", "In Progress", or "Done" as valid status values. The Task interface represents a single task with optional fields for assignee and dates, matching the column structure we'll use in our Google Sheets.

Register the Tools

// src/tools/index.ts

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { addTaskTool } from "./addTask.js";
import { getTasksTool } from "./getTasks.js";

export function registerTools(server: McpServer) {
  server.tool(addTaskTool.name, addTaskTool.description, addTaskTool.schema, addTaskTool.execute);
  server.tool(getTasksTool.name, getTasksTool.description, getTasksTool.schema, getTasksTool.execute);
}

This registration function connects our tools to the MCP server. Each tool gets registered with its name, description, input schema, and execution function. The MCP server uses this information to expose the tools to AI agents, allowing them to understand what each tool does and how to call it properly. This centralized registration makes it easy to add new tools later - just import them and add another server.tool() call.

Create the MCP Server

// src/mcpServer.ts

import "dotenv/config";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { registerTools } from "./tools/index.js";

async function main() {
  const server = new McpServer({
    name: "project-management",
    version: "1.0.0",
    capabilities: {
      resources: {},
      tools: {},
    },
  });

  registerTools(server);

  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("Project Management MCP Server running on stdio");
}

main().catch((error) => {
  console.error("Fatal error in main():", error);
});

This creates our MCP server that will expose our project management tools to AI agents. The server uses stdio transport, which means it communicates through standard input/output streams - this is how OpenAI agents will connect to it. We register our tools using the function we created earlier, and the server announces its capabilities to any connecting agents.

Read also:

Building an AI Assistant for Exploratory Data Analysis with Node.js and OpenAI

Building a Telegram Bot in Node.js: Create Your Own Daily Word Bot

Create the Agent Using OpenAI Agent

// src/agent.ts

import { Agent, MCPServerStdio } from "@openai/agents";
import OpenAI from "openai";
import { config } from "./config/config.js";

const client = new OpenAI({ apiKey: config.openAI.apiKey });

const mcpServer = new MCPServerStdio({
  name: "pmMcp",
  fullCommand: config.isProd ? "node ./dist/mcpServer.js" : "tsx ./src/mcpServer.ts",
});

mcpServer.connect();

export const agent = new Agent({
  name: "PMAgent",
  instructions: "You are a project management agent. Help the user with adding and getting all tasks.",
  mcpServers: [mcpServer],
});

This sets up our OpenAI agent that will use our MCP server. The MCPServerStdio connects to our MCP server by running it as a subprocess - using the compiled version in production and the TypeScript version during development. The agent gets instructions about its role as a project management assistant and has access to all the tools we registered in our MCP server. When users interact with this agent, it can intelligently decide when to use our add_task and get_tasks tools based on natural language requests.

Create the Route

// src/routes/tasks.ts

import { run } from "@openai/agents";
import express from "express";
import z from "zod";
import { agent } from "../agent.js";

const tasksRouter = express.Router();

tasksRouter.post("/chat", async (req, res) => {
  try {
    const chatSchema = z.object({
      query: z.string().min(1),
    });

    const parsed = chatSchema.safeParse(req.body);
    if (!parsed.success) {
      return res.status(400).json({
        error: "Invalid request body",
      });
    }

    const { query } = parsed.data;

    const systemInstruction = `Always use the current date: ${new Date().toLocaleDateString("en-GB")}.`;
    const result = await run(agent, [
      {
        role: "system",
        content: systemInstruction,
      },
      {
        role: "user",
        content: query,
      },
    ]);

    return res.json({
      data: {
        answer: result.finalOutput,
      },
    });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Something went wrong" });
  }
});

export default tasksRouter;

This route creates the API endpoint where users can send natural language queries about project management. The /chat endpoint accepts POST requests with a query string, validates the input using Zod, then passes it to our OpenAI agent. The run function executes the agent with access to our MCP tools - the agent will automatically decide whether to add tasks, retrieve tasks, or just respond conversationally based on the user's request. We return the agent's final output as JSON.

Create the Index

// src/index.ts

import express from "express";
import tasksRouter from "./routes/tasks.js";
import { config } from "./config/config.js";

const app = express();
app.use(express.json());

app.use("/api/tasks", tasksRouter);

app.listen(config.port, () => console.log(`Server running on http://localhost:${config.port}`));

This is our main server file that ties everything together. We create an Express app, enable JSON parsing for incoming requests, and mount our tasks router at the /api/tasks path. This means our chat endpoint will be available at POST /api/tasks/chat. The server starts on the configured port and provides a simple way to interact with our project management system through HTTP requests.

With this setup, users can send requests like {"query": "Add a task to review the documentation, assign it to John, due tomorrow"} and the agent will automatically use our MCP tools to create the task in Google Sheets.

Package.json Configuration

Here's our package.json scripts:

{
  "name": "mcp-node",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "tsx src/index.ts",
    "build": "tsc",
    "prod": "npm run build && node dist/index.js"
  },
  "devDependencies": {
    // ...
  },
  "dependencies": {
    // ...
  }
}

Explanation:

"type": "module": Enables ES modules (import/export syntax) instead of CommonJS (require/module.exports). This is essential for modern Node.js development and MCP compatibility.
"dev": "tsx watch src/index.ts": Runs our TypeScript code directly with hot reload. When you save any file, the server automatically restarts. Perfect for development.
"start": "tsx src/index.ts": Runs the TypeScript code once without watching for changes. Useful for testing the production-like behavior without compilation.
"build": "tsc": Compiles our TypeScript code into JavaScript in the dist/ folder using our tsconfig.json settings.
"prod": "npm run build && node dist/index.js": First compiles the code, then runs the compiled JavaScript. This is what you'd use in production deployment.

Testing

Now let's try our app by running npm run dev.

Conclusions

We've successfully built a complete project management system that combines modern AI capabilities with practical data storage. Here's what we accomplished:

Built an MCP Server: Created a Model Context Protocol server that exposes project management tools to AI agents, allowing natural language interaction with our task management system.
Integrated Google Sheets: Set up service account authentication and created tools that can read from and write to Google Sheets, turning a simple spreadsheet into a powerful backend for our application.
Created AI-Powered Interface: Developed an OpenAI agent that can understand natural language requests like "add a task for John to review the docs by Friday" and automatically translate them into structured data operations.
Implemented Type Safety: Used TypeScript and Zod throughout the project to catch errors early and ensure data consistency between our API, spreadsheet, and AI agent interactions.
Modular Architecture: Organized the code into clean, separated concerns - configuration, services, tools, routes, and utilities - making the system easy to extend and maintain.

What You Can Do Next

With this foundation, you can easily extend the system:

Add more tools: Create update task, delete task, or filter tasks tools
Enhance the agent: Give it more sophisticated project management capabilities
Build a frontend: Create a web interface that uses the /api/tasks/chat endpoint
Add authentication: Implement user management and task ownership
Scale the data: Move from Google Sheets to a proper database when needed

The beauty of this MCP approach is that your AI agent automatically gets access to any new tools you create, without needing to retrain or reconfigure the AI model. You simply register new tools, and the agent can start using them intelligently based on user requests.

You now have a working project management system that demonstrates the power of combining traditional APIs, modern AI agents, and the Model Context Protocol for building intelligent, extensible applications.

💻 The repository for this example can be found at fajarwz/blog-ai-mcp-pm.

💡 Thanks for reading all the way to the end. If you found this helpful, please like or star the Github repo so I know it's really helpful. Otherwise, let me know what I can improve in the comment or email.

Easily Send Emails in Laravel with Brevo

Fajar Windhu Zulfikar — Sat, 15 Jul 2023 03:26:27 +0000

Empower seamless email communication with Brevo (formerly Sendinblue) in Laravel

💡 I included the link to the example repository at the conclusion of this tutorial.

Sending emails is an essential part of many Laravel applications. Whether you need to send notifications, confirmations, or marketing messages, Laravel provides a powerful and flexible way to send emails.

Laravel provides a simple and straightforward email API that is powered by the popular Symfony Mailer component. This means that you can quickly and easily send emails through a local or cloud-based service of your choice, such as SMTP, Mailgun, Brevo, etc.

In this tutorial, we will give you step-by-step instructions on how to send an email in Laravel using Brevo (formerly Sendinblue). We will show you how to create a simple blade file design and how to include dynamic information in the mail layout. So let's get started!

Step 1: Install Laravel

We will start with a fresh Laravel application. Create a new application for this demo:

Using the Laravel Installer

laravel new blog-laravel-mail-brevo

Using Composer create-project

composer create-project laravel/laravel blog-laravel-mail-brevo

Using Laravel build and Sail

curl -s "https://laravel.build/blog-laravel-mail-brevo" | bash

This command will create a new Laravel project in a directory named blog-laravel-mail-brevo.

Step 2: Create Brevo Account

Next, if you don't have a Brevo account, you need to create one. Create account using email address that you want to use to send mail in Laravel. You can register by clicking on the link below:

https://onboarding.brevo.com/account/register

Read also:

Simple and Advanced Search With Laravel Scout and Meilisearch

The Art of Clean Code: Naming, Commenting, and Code Organization

Step 3: Applying Brevo Configuration to Laravel .env

Once we have created an account, search for SMTP & API menu or go to the following URL:

https://app.brevo.com/settings/keys/smtp

Click the menu and we will be redirected to the page

Replace the MAIL_XXX configuration in the Laravel .env file with our Brevo account configuration.

MAIL_DRIVER=smtp
MAIL_HOST=smtp-relay.brevo.com
MAIL_PORT=587
MAIL_USERNAME=login.address@xxx.com
MAIL_PASSWORD=masterpassword
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="${MAIL_USERNAME}"
MAIL_FROM_NAME="${APP_NAME}"

Step 4: Create the Mailable Class

Next, let's create a mail class called TestMail to facilitate email sending. This class will specify the view to be used and the necessary data for the mail content. To proceed, run the following command:

php artisan make:mail TestMail

Fill the Class with the following codes:

// app\Mail\TestMail.php
<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class TestMail extends Mailable
{
    use Queueable, SerializesModels;

    public $data;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($data)
    {
        $this->data = $data;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->subject('Mail test')->view('emails.test');
    }
}

Step 5: Creating Blade View

Create a blade view file where we can write the email content that we want to send. For now, we will simply write some dummy text. Follow the instructions below to create the necessary files in the emails folder:

// resources\views\emails\test.blade.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h2>{{ $data['title'] }}</h2>
    <p>{{ $data['content'] }}</p>
</body>
</html>

Step 6: Adding the Route

Next, we will create a web route to test the sending of our TestMail email.

Open your Laravel application's routes/web.php file.

Add the following route definition:

Route::get('send-mail', function () {
    $details = [
        'title' => 'Success',
        'content' => 'This is an email testing using Laravel-Brevo',
    ];

    \Mail::to('destination.address@xxx.com')->send(new \App\Mail\TestMail($details));

    return 'Email sent at ' . now();
});

Read also:

Laravel 10 CRUD and Image Upload Tutorial with Laravel Breeze and Repo Example

Easy Laravel Localization Tutorial With Blog Use Case and Repo Example

Step 7: Test the Mail Sending

Once the route is added, you can access it by visiting the /send-mail URL in your browser. This will trigger the sending of the TestMail email to the specified email address.

Run the App

php artisan serve

Open Link

localhost:8000/send-mail

Now, let's check our inbox to verify if the email was sent successfully. If the email was sent without any issues, you should see the following email in your inbox:

Conclusion

In this tutorial, we explored how to easily send emails in Laravel using Brevo as our email service provider. We covered the necessary steps to set up the configuration, create a Mailable class, and define a blade view for the email content. By following these steps, we can integrate email sending functionality into our Laravel applications effortlessly.

With Brevo's SMTP configuration added to the Laravel .env file, we can leverage Laravel's powerful email API to send various types of emails, such as notifications, confirmations, and marketing messages. By creating a Mailable class and a corresponding blade view, we have full control over the email's structure and content, enabling us to customize the email to suit our application's needs.

By following this tutorial, we now have the knowledge and tools to send emails in Laravel using Brevo, empowering us to enhance our application's communication capabilities and provide a seamless email experience to our users.

💻 The repository for this example can be found at fajarwz/blog-laravel-mail-brevo.

Simple and Advanced Search With Laravel Scout and Meilisearch

Fajar Windhu Zulfikar — Mon, 03 Jul 2023 14:51:45 +0000

Explore the seamless integration of Laravel Scout and MeiliSearch

💡 I included the link to the example repository at the conclusion of this tutorial.

Efficient and accurate search functionality is crucial for any web application or platform. Users expect to find relevant results quickly and effortlessly, making search implementation a critical component of user experience. Fortunately, Laravel Scout, a powerful full-text search package, combined with MeiliSearch, a lightning-fast and feature-rich search engine, offers an exceptional solution for implementing advanced search capabilities in your Laravel application.

Laravel Scout acts as a bridge between your application and various search engines, allowing you to seamlessly integrate a search feature without compromising on performance. MeiliSearch is an open-source search engine known for its speed and relevance, delivering exceptional search experiences. When used together, Laravel Scout and MeiliSearch create a powerful and customizable search system that is both robust and efficient.

Laravel Scout and MeiliSearch provide a powerful combination that can enhance the search functionality of any application, including e-commerce platforms, content management systems, and more.

This article will explore the seamless integration of Laravel Scout and MeiliSearch, demonstrating how these two technologies work together to deliver lightning-fast search results. We will delve into the steps required to set up and configure both Laravel Scout and MeiliSearch within your Laravel application. Additionally, we will explore the advanced search features offered by MeiliSearch, such as typo tolerance, pagination, sorting, and filtering, which further enhance the search experience for your users.

What is Meilisearch

Meilisearch is an open-source and highly scalable search engine. It is built on top of Rust, a modern programming language that is known for its speed and safety. Meilisearch is designed to be easy to use and to scale to large datasets.

Meilisearch works by first indexing your data. This means that Meilisearch creates a representation of your data that is optimized for searching. Once your data is indexed, Meilisearch can then be used to search your data quickly and efficiently.

When your app needs to search for data, it will first contact the Meilisearch server. The Meilisearch server will then use the index to search your data and return the results to your app.

Here is a diagram of how Meilisearch works:

The app sends a search query to the Meilisearch server. The Meilisearch server then uses the index to search the database and returns the results to the app.

It's important to note that MeiliSearch should not be considered as your primary data store. MeiliSearch is specifically designed as a search engine, not a database. Its purpose is to store and manage the data that you want your users to search through efficiently.

When using MeiliSearch, it's recommended to include only the relevant data that you want to be searchable. If you have additional data that is not directly related to search functionality, it's advisable to mark those fields as non-searchable. This helps improve the relevancy of search results and enhances the response time of MeiliSearch queries.

Meilisearch is a powerful search engine that can be used to power a variety of applications. It is easy to use and to scale, making it a great choice for both small and large projects.

Read also:

Remote Work: Effective Strategies for Communication and Timely Responses

Laravel Export/Import: Step-by-Step Guide with Repo Example

Features

Search as You Type: Also referred to as "quick search," MeiliSearch provides real-time search results as you type in your query. The displayed results dynamically update as you enter more text into the search box.
Filters: MeiliSearch allows you to create filters that enable users to narrow down their search results based on user-defined criteria. This helps refine the search experience and provide more specific results.
Sorting: MeiliSearch allows users to customize the sorting of search results at query time. Users can choose the types of results they want to see first, enhancing their search experience.
Typo Tolerant: MeiliSearch handles typos gracefully, ensuring that even with spelling mistakes, the intended results are still discovered. This prevents typos from hindering the search experience.
Prefix Search: In Meilisearch, you can perform a search using just a single letter as your query. This is possible due to the prefix search approach the Meilisearch follow. Prefix search involves sorting the documents by comparing the search query with the beginning of each word in your dataset. This means that even with a single letter query, Meilisearch will return relevant results by matching the prefix of words in your dataset. You can check in the documentation for more detail.
And many more, check out the official website for more detail.

Now, let's explore MeiliSearch within a Laravel application.

Step 1: Install Laravel

As always, we will start with a fresh Laravel application. Create a new application for this demo:

Using the Laravel Installer

laravel new blog-laravel-scout-meilisearch

Using Composer create-project

composer create-project laravel/laravel blog-laravel-scout-meilisearch

Using Laravel build and Sail

curl -s "https://laravel.build/blog-laravel-scout-meilisearch" | bash

This command will create a new Laravel project in a directory named blog-laravel-scout-meilisearch.

Step 2: Install Laravel Scout

Open your terminal and navigate to your project directory (blog-laravel-scout-meilisearch). Run the following command to install Laravel Scout:

composer require laravel/scout

Step 3: Publish Laravel Scout Config

The next step is to publish the configuration for Laravel Scout by running the following artisan command:

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"

This command will generate a Scout configuration file at config/scout.php, allowing us to modify Scout settings if needed. For now, we will keep the configuration as it is.

Step 4: Install the MeiliSearch PHP Client

In order to communicate with the MeiliSearch server, we need to install the MeiliSearch PHP SDK. Run the following command to install the library:

composer require meilisearch/meilisearch-php

Step 5: Install Meilisearch

To install Meilisearch, you have the option to either install it locally or deploy it on a cloud service. In this case, we will use the local installation method.

Download the latest stable release of Meilisearch using cURL. Once the download is complete, launch Meilisearch to start the server.

# Install Meilisearch
curl -L https://install.meilisearch.com | sh

# Launch Meilisearch
./meilisearch
# Or in Windows
meilisearch

Step 6: Configure Laravel Scout

Next, open your .env file and add the necessary Scout configuration variables. These variables include the SCOUT_DRIVER and the MEILISEARCH_HOST:

SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://localhost:7700
# use your own master key with a length of 16 bytes or more, or you can leave this blank
MEILISEARCH_KEY=joVaZyaMWrqrO8OXEyTPxpvE8kY_gjLf6FTq1t9chR8

Adjust the MEILISEARCH_HOST value based on your MeiliSearch server setup, the default value is http://localhost:7700.

If you choose to specify the MEILISEARCH_KEY in your .env file or configuration, Laravel Scout will use it to authenticate API requests sent to the MeiliSearch server. This can be helpful if you have set up access restrictions or need to secure your search data. The MEILISEARCH_KEY should be at least 16 bytes long if you choose to fill it.

This key should match the key used to run the MeiliSearch server. To start the MeiliSearch server with the provided key, use the following command:

meilisearch --master-key joVaZyaMWrqrO8OXEyTPxpvE8kY_gjLf6FTq1t9chR8

However, if you omit the MEILISEARCH_KEY configuration, Laravel Scout will still function properly. MeiliSearch supports unauthenticated requests by default, allowing you to interact with the server without requiring a key. This is particularly useful during development or in scenarios where authentication is not necessary.

Step 7: Initializing the Database

We will create a basic application that can store and display data. Let's start by initializing a database for this purpose.

For this tutorial, create a database named blog_laravel_scout_meilisearch. Once the database is created, we need to update the database connection settings in the .env file of our Laravel application. Modify the settings to match the newly created database name, as well as the username and password associated with the database.

Step 8: Create table migration

Next, we will create two tables: posts and categories. To do this, we need to generate the table migrations.

Run the following command to generate the posts table migration files for the posts tables:

php artisan make:migration create_posts_table

Insert the following code in the up() function. Here, we include the published column, which we will use to conditionally display the post and also to selectively import the record to the MeiliSearch server. Additionally, we have the category_id column to establish a relation between the posts and categories tables.

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->string('slug')->unique();
    $table->text('content');
    $table->boolean('published')->default(true);
    $table->foreignId('category_id')
        ->index()->constrained()->cascadeOnDelete();

    $table->timestamps();
});

Run the following command to generate the categories table migration files for the categories tables:

php artisan make:migration create_categories_table

Insert the following code:

Schema::create('categories', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('slug')->unique();
    $table->timestamps();
});

Step 9: Create Models

Create a Category model and establish a relation with the Post model. Here, we use a one-to-many relation to allow a category to have multiple post records, utilizing the hasMany method.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    use HasFactory;

    public function posts()
    {
        return $this->hasMany(Post::class);
    }
}

Also create a Post model that has a category() relation with the following code:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'slug',
        'content',
        'published',
        'category_id',
    ];

    public function category()
    {
        return $this->belongsTo(Category::class);
    }   
}

Read also:

Information Clarity in Remote Teams: Tips and Examples

Easy Laravel Localization Tutorial With Blog Use Case and Repo Example

Step 10: Create Factories

To generate some data, we need a factory. Let's start by creating the CategoryFactory and inserting the following code:

// database\factories\CategoryFactory.php
// codes ...
use Str;
// codes ...

public function definition(): array
{
    // the category name should be unique
    $name = $this->faker->unique()->word();

    return [
        'name' => $name,
        // generate slug from category title
        'slug' => Str::slug(
            title: $name,
        ),
    ];
}

Additionally, create a factory for the posts data using the following code:

// database\factories\PostFactory.php
// codes ...
use Illuminate\Support\Str;
use App\Models\Category;
// codes ...

public function definition(): array
{
    $title = $this->faker->unique()->sentence();

    return [
        'title' => $title,
        // insert slug based on the generated title
        'slug' => Str::slug(
            title: $title,
        ),
        'content' => $this->faker->paragraph(),
        // insert boolean to published and the chance of the value being true
        'published' => $this->faker->boolean(
            chanceOfGettingTrue: 85,
        ),
        // insert category_id with Category Factory, but we will replace this later
        'category_id' => Category::factory(),
    ];
}

Step 11: Prepare DatabaseSeeder

After preparing our migration and factory, let's proceed to prepare our database seeder. In this step, we can add a progress bar to the seeder to track its progress, although you can choose to skip this if you prefer.

// database\seeders\DatabaseSeeder.php
//  codes ...
use App\Models\Category;
use App\Models\Post;
// codes ...

public function run(): void
{
    // create 10 categories from factory
    $categories = Category::factory(10)->create();

    // "do this for each category"
    $categories->each(function (Category $category) {
        // optional
        $this->command->getOutput()->info(
            message: "Creating posts for category: [$category->name]",
        );

        // optional
        $bar = $this->command->getOutput()->createProgressBar(100);

        // loop 100x
        for ($i = 0; $i < 100; $i++) {
            // optional
            $bar->advance();

            // create a post from factory
            Post::factory()->create([
                // use category id from current category
                'category_id' => $category->id,
            ]);
        }

        // optional
        $bar->finish();
    });
}

Step 12: Run the Database Seeder

After preparing the seeder, the next step is to migrate the database and run the seeder. Simply execute the following command to accomplish this:

php artisan migrate --seed

The terminal will display one progress bar for each category, and once the process is completed, we should have approximately 1000 posts in our database.

Step 13: Make Model Searchable

Before importing our data into MeiliSearch, we need to make our model searchable. To achieve this, we only need to use the Searchable trait from Laravel Scout

// codes ...
use Laravel\Scout\Searchable;

class Post extends Model
{
    use Searchable;
    use HasFactory;

    // codes ...
}

Let's do the same thing to Category model

// codes ...
use Laravel\Scout\Searchable;

class Category extends Model
{
    use Searchable;
    use HasFactory;

    // codes ...
}

We can further customize the search configuration by specifying the data we want to store in the Meilisearch server using the toSearchableArray() function and conditionally make data searchable using the shouldBeSearchable() function.

// App\Models\Post.php
// codes ...

// control how the data is added to the Meilisearch server
public function toSearchableArray(): array
{
    return [
        'id' => (int) $this->title,
        'title' => $this->title,
        'slug' => $this->slug,
        'content' => $this->content,
        'published' => (bool) $this->published,
        // making sure the category id is treated as a number
        'category_id' => (int) $this->category_id,
        'created_at' => $this->created_at,
        'updated_at' => $this->updated_at,
    ];
}

// make the data searchable based on this condition
public function shouldBeSearchable(): bool
{
    return $this->published;
}

Step 14: Run Meilisearch and import data

Now that our preparation is complete, let's ensure that our Meilisearch server is running. Run the following command in the terminal:

meilisearch --master-key joVaZyaMWrqrO8OXEyTPxpvE8kY_gjLf6FTq1t9chR8

Note that we are running it with the same master key as specified in the .env file.

Now let's import all of our post records into Meilisearch:

php artisan scout:import "App\Models\Post"

Step 15: Simple Search

When it comes to simple search, we can achieve it using the search() method. By default, it will return only 20 records. You have the option to modify the limit or use the paginate() method to retrieve more records.

$post = Post::search(trim($request->get('query')) ?? '')->get();

return response()->json([
    'data' => $post,
    'status' => 200,
]);

Step 16: Advanced Search

Imagine having a vast customer database with millions of searchable, filterable, and sortable records. We desire to empower end-users with the ability to perform comprehensive searches and apply various filters. We want to leverage Eloquent models and utilize Scout's native capabilities. But how can we achieve this?

Fortunately, we can utilize the search() method inherited by the model through the Searchable trait by passing a callback function. This allows us to define customized search logic tailored to our specific requirements.

Before proceeding, let's configure our Scout settings in the config/scout.php file:

use App\Models\Post;
// codes ...

'meilisearch' => [
    'host' => env('MEILISEARCH_HOST', 'http://localhost:7700'),
    'key' => env('MEILISEARCH_KEY', null),
    'index-settings' => [
        // we will set config for Post model or "posts" index
        Post::class => [
            // we need to filter based on id and category_id
            'filterableAttributes'=> ['id', 'category_id'],
            // we need to sort based on these columns
            'sortableAttributes' => ['title', 'category_id', 'created_at', 'updated_at'],
        ],
    ],
],

Run the following command to update our scout config:

php artisan scout:sync-index-settings

Next, set up our route file. We will use an API route, so we don't need to set up a view for this.

// routes/api.php

use App\Http\Controllers\SearchController;
// codes ...

Route::get('search', SearchController::class)->name('search');

Now let's go to the controller.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
use MeiliSearch\Endpoints\Indexes;
use Illuminate\Database\Eloquent\Builder;

class SearchController extends Controller
{
    public function __invoke(Request $request)
    {
        // simple search based on given query query parameter
        $post = Post::search(trim($request->get('query')) ?? '', 
            function(Indexes $meiliSearch, string $query, array $options) use ($request) {
                if ($request->has('order_by')) {
                    // if there is an order_by query then apply sorting
                    // here we use comma (,) if we need to apply sort direction
                    // the default sort direction is "ascending"
                    $orderBy = explode(',', $request->order_by);
                    $options['sort'] = [$orderBy[0].':'.($orderBy[1] ?? 'asc')];
                }
                if ($request->has('category_id')) {
                    // if there is a category_id query then apply filtering
                    // we can add multiple filtering conditions using "AND", "OR", "=", ">" etc. here
                    $options['filter'] = 'category_id = "'.$request->category_id.'"';
                }

                return $meiliSearch->search($query, $options);
            });

        return response()->json([
            // load category relation after search, paginate, and include query strings 
            // with the paginate url
            'data' => $post->query(fn (Builder $query) => $query->with('category'))
                ->paginate()->withQueryString(),
            'status' => 200,
        ]);
    }
}

Another approach to perform advanced search, like filtering and sorting with Meilisearch is to utilize the where() and orderBy() methods, similar to querying an original Eloquent ORM. Here's an example:

// Perform a simple search based on the provided 'query' query parameter
$post = Post::search(trim($request->get('query')) ?? '');

// if there is a category_id query then apply filtering
if ($request->has('category_id')) {
    // we can add multiple filtering conditions using "where" etc.
    $post->where('category_id', $request->get('category_id'));
}

// if there is an order_by query then apply sorting
if ($request->has('order_by')) {
    // here we use orderBy even if we use "desc" sorting direction
    $orderBy = explode(',', $request->get('order_by'));
    $post->orderBy($orderBy[0], $orderBy[1] ?? 'asc');
}

return response()->json([
    'data' => $post->query(fn (Builder $query) => $query->with('category'))
        ->paginate()->withQueryString(),
    'status' => 200,
]);

Hey, Why Isn't the String Ordering in the Expected Order?

If the sorting is not producing the desired results, you can try updating the ranking rules. For example here I will update the ranking rules because the ordering of the string is not as expected.

url: http://localhost:7700/indexes/posts/settings/ranking-rules
method: PUT
data: ["words", "typo", "sort", "proximity", "attribute", "exactness"]

Here I will use Postman to update the ranking rules.

Now, the ordering functionality is working as expected.

Read also:

Laravel 10 CRUD and Image Upload Tutorial with Laravel Breeze and Repo Example

The Art of Clean Code: Naming, Commenting, and Code Organization

How to Update the Search Index When New Data is Stored

Once you have included the Laravel\Scout\Searchable trait in a model, adding a model instance to your search index is as simple as saving (using save()) or creating (using create()) the instance. Laravel Scout takes care of automatically indexing the model for you.

For example let's create a store post functionality in our Laravel app

Route:

use App\Http\Controllers\PostController;

Route::resource('posts', PostController::class)->only(['store']);

PostController:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;
use Str;

class PostController extends Controller
{
    public function store(Request $request)
    {
        $post = Post::create([
            'title' => $request->title,
            'slug' => Str::slug($request->title , '-') . '-' . time(),
            'content' => $request->content,
            'published' => $request->published,
            'category_id' => $request->category_id,
        ]);

        return response()->json([
            'data' => $post,
            'status' => 200,
        ]);
    }
}

Let's try creating a new record for posts now.

Now, let's check the results when we search for the string "fajarwz".

Notice that if we directly insert data into the database without utilizing Laravel Scout, we won't be able to see the record when we perform searches. This is because the record is not indexed by MeiliSearch, and we rely on MeiliSearch to handle the searching functionality in our Laravel application.

Conclusion

In this article, we have covered the initial setup process, including the installation and configuration of Laravel Scout and MeiliSearch. We have also explored how to index data and perform searches using these technologies.

By integrating Laravel Scout with MeiliSearch, we can revolutionize the search functionality of our Laravel application. The combination of Laravel Scout's seamless integration and MeiliSearch's speed and relevance offers an exceptional search experience for our users.

💻 The repository for this example can be found at fajarwz/blog-laravel-scout-meilisearch.

References

The Art of Clean Code: Naming, Commenting, and Code Organization

Fajar Windhu Zulfikar — Wed, 22 Feb 2023 15:22:24 +0000

Efficient Strategies for Improving Code Readability, Maintenance, and Collaboration

Clean coding is an important aspect of software development that aims to create code that is readable, maintainable, and efficient. The goal of clean coding is to make the code as easy to understand as possible, both for the developers who wrote it and for those who will be working with it in the future. In this article, we will discuss some key concepts of clean coding, including meaningful naming, code commenting, and code organization.

Meaningful Naming

One of the most important aspects of clean coding is the use of meaningful naming. This refers to the practice of using clear and descriptive names for variables, functions, and classes. When names are meaningful, it is easier to understand what the code is doing, and to make changes to it when necessary.

For example, consider the following code snippet:

$x = 5;
$y = 10;
$z = $x + $y;

This code snippet is simple, but the variable names are not meaningful. It is unclear what the purpose of x, y, and z is. Now consider the following code snippet:

$firstNumber = 5;
$secondNumber = 10;
$sum = $firstNumber + $secondNumber;

This code snippet is much more readable and easier to understand. The variable names are meaningful, and it is clear what the code is doing.

Here are some of the reasons why meaningful naming is so important:

Improves readability

Meaningful naming makes the code more readable and easier to understand, even for someone who is not familiar with the code. It helps to avoid confusion and ambiguity, which can lead to errors and bugs in the code.

Enhances maintainability

Clean code should be maintainable, which means it should be easy to update or modify. Meaningful naming makes it easier to understand the function of the code, making it simpler to modify or refactor in the future.

Facilitates collaboration

Meaningful naming helps team members understand what the code is doing and reduces the amount of communication needed to explain the code's purpose. This can be especially helpful when working on larger projects with multiple developers.

Promotes consistency

By using consistent naming conventions throughout the codebase, developers can improve the code's overall organization and clarity. This can make it easier for developers to navigate the code, reducing the amount of time it takes to understand how different parts of the code relate to each other.

Improves error detection

When variable names, function names, and class names are meaningful, it is easier to spot errors or issues in the code. This can make it simpler to identify bugs and resolve them more quickly, leading to more efficient debugging and testing processes.

Meaningful Naming vs. Code Commenting

While meaningful naming is important, it is not always sufficient on its own. In some cases, it may be necessary to include comments in the code to explain what is happening. However, code commenting should not be used as a replacement for meaningful naming. If the code is well-written and the variable names are meaningful, comments should be unnecessary.

Here's an example code snippet that demonstrates the importance of meaningful naming and how it can reduce the need for excessive code commenting:

// Example 1: Poor Naming, Excessive Commenting

// Function to calculate the square of a number
function sq(n) {
    // Returns the square of the input number
    return n * n;
}

// Main program
const x = 5;
// Calculate the square of the input number and store it in the variable y
const y = sq(x);
// Print the result
console.log(`The square of ${x} is ${y}.`);

// Example 2: Meaningful Naming, Minimal Commenting

// Function to calculate the square of a number
function calculateSquare(number) {
    return number * number;
}

// Main program
const inputNumber = 5;
const squareOfInputNumber = calculateSquare(inputNumber);
console.log(`The square of ${inputNumber} is ${squareOfInputNumber}.`);

In the first example, the function name sq is not very descriptive, and the comments have to explain what the function does and how to use it. In the main program, the variable names x and y are also not very clear, requiring additional comments to explain their purpose.

In the second example, the function name calculateSquare is much more descriptive, making it clear what the function does without any additional comments. In the main program, the variable names inputNumber and squareOfInputNumber are also very clear and don't require any additional comments to explain their purpose.

Overall, by using meaningful naming conventions, developers can minimize the need for additional comments, making the code simpler, more organized, and easier to understand.

While both practices are essential, meaningful naming is generally preferred over code commenting. Here are some reasons why:

Clarity

Meaningful naming provides clarity and makes the code easier to read and understand. Good naming conventions can eliminate the need for additional comments that only restate what the code is doing. With descriptive naming, developers can easily understand the code's purpose and how it works without the need for extra comments.

Simplicity

Code that is self-explanatory is often more straightforward than code that requires additional comments. Comments can add unnecessary complexity to the code and create additional work for developers.

Maintenance

Meaningful naming makes code more maintainable by making it easier to modify or update the code. If a variable, function, or class has a clear name that reflects its purpose, developers can quickly understand how it fits into the codebase and how it interacts with other components.

Consistency

Consistent naming conventions make code more organized and easier to navigate. When developers use the same naming conventions throughout the codebase, it is easier to locate functions, variables, and classes that serve a specific purpose.

However, there are times when code commenting is necessary. For instance, if a section of the code is particularly complex, adding comments can help other developers understand its purpose. Comments can also be useful in explaining a particularly tricky or unconventional piece of code.

Code Organization

Another important aspect of clean coding is code organization. This refers to the practice of organizing code in a way that is easy to navigate and understand. Well-organized code should be divided into meaningful sections, with related functions and classes grouped together.

The Use of Modules or Packages

One common approach to code organization is the use of modules or packages. Modules are self-contained sections of code that perform a specific task. By dividing the code into modules, it is easier to understand what each section of code is doing, and to make changes to the code without affecting other parts of the system.

Design Patterns

Another approach to code organization is the use of design patterns. Design patterns are reusable solutions to common software development problems. By using well-known design patterns, it is possible to create code that is more maintainable and easier to understand.

Conclusion

Clean coding is an important aspect of software development that aims to create code that is readable, maintainable, and efficient. By using meaningful naming, organizing code effectively, and minimizing code commenting, it is possible to create code that is easier to understand and maintain over time. While clean coding requires some extra effort on the part of the developer, it is well worth the investment in the long run.

Laravel 10 CRUD and Image Upload Tutorial with Laravel Breeze and Repo Example

Fajar Windhu Zulfikar — Thu, 16 Feb 2023 00:04:00 +0000

Build a Laravel 10 CRUD App with Image Upload using Breeze - Step-by-Step Tutorial with Repo Example

Laravel is a popular open-source PHP framework that makes it easy to build web applications. It provides a powerful set of tools and features for web developers, such as routing, middleware, database integration, and templating.

Laravel 10 is the latest version of Laravel, released in 2023. It comes with several new features and improvements, such as support for PHP 8.1, enhanced security features, and performance optimizations.

In this tutorial, we will create a simple CRUD (Create, Read, Update, Delete) application using Laravel, one of the most popular PHP frameworks. The CRUD application will allow us to manage a list of blog posts, including creating new posts, reading existing posts, updating posts, and deleting posts. In addition to that, we will also learn how to upload and manage images for the blog posts.

By the end of this tutorial, you will have a good understanding of how to build a basic CRUD application in Laravel and how to work with images in the application. Let's get started!

Install Laravel 10

Before we begin, make sure you have the latest version of PHP (at least PHP 8.1) and Composer installed on your system. To install Laravel 10, you can use the following command:

composer create-project --prefer-dist laravel/laravel:^10 pmid-laravel10-breeze

This command will create a new Laravel 10 project in a directory named pmid-laravel10-breeze.

Initializing the Database

Next, we need to set up a database. For this tutorial, create a database named pmid_laravel10_breeze. After creating the database, we need to modify the database connection settings in our Laravel app's .env file to match the new database name, as well as the username and password.

Install Laravel Breeze

Laravel Breeze is a lightweight authentication scaffold for Laravel 8 and later versions. It provides a simple way to add authentication functionality to your Laravel application.

To install Laravel Breeze, run the following command in your terminal:

composer require laravel/breeze --dev

After downloading Laravel Breeze via Composer, we can run the breeze:install Artisan command to install Laravel Breeze in our Laravel 10 application:

php artisan breeze:install

A prompt will appear, asking which stack we want to install. Choose "blade". Another prompt may appear asking if we want to enable dark mode support. For now, we won't use it, so answer "no". Finally, a prompt may appear asking if we want to use the Pest testing framework. Currently, we won't use it, so answer "no".

Create Posts Migration

Now that we have installed Laravel 10 and Laravel Breeze, let's create a migration for our posts table. This table will store our post data for this CRUD tutorial.

To create a migration, run the following command in your terminal:

php artisan make:migration "create posts table"

This command will create a new migration file in the database/migrations directory.

Open the migration file and add the following code to create the posts table:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('content');
        $table->text('featured_image');
        $table->timestamps();
    });
}

public function down()
{
    Schema::dropIfExists('posts');
}

This code will create a posts table with an id, title, content, featured_image, and timestamps columns.

Migrate the Migration

Finally, let's run the migration to create the posts table in our database. To do this, run the following command in your terminal:

php artisan migrate

This command will run all the outstanding migrations in the database/migrations directory.

Create Routes

Now that we have our posts table and database set up, let's create some routes to handle the CRUD operations for our blog posts.

Open the routes/web.php file and update it with the following code:

<?php

use App\Http\Controllers\ProfileController;
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

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

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');

    // Add the following route to the existing routes because we want the posts route accessible to authenticated users only.
    // We'll use a resource route because it contains all the exact routes we need for a typical CRUD application.
    Route::resource('posts', PostController::class);
});

require __DIR__.'/auth.php';

This adds the posts resource route to the existing routes and applies the auth middleware to restrict access to authenticated users only. The PostController is set up as a resource controller to handle all the typical CRUD operations.

Read also:

Easy Laravel Localization Tutorial With Blog Use Case and Repo Example

Laravel Export/Import: Step-by-Step Guide with Repo Example

Create PostController

Now let's create a PostController to handle the CRUD operations for our blog posts. To create a new controller with resource methods, run the following command in your terminal:

php artisan make:controller PostController --resource

This command will create a new PostController with all the resource methods in the app/Http/Controllers directory.

Open the PostController and add the following code to the class:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\Support\Facades\Storage;
// Use the Post Model
use App\Models\Post;
// We will use Form Request to validate incoming requests from our store and update method
use App\Http\Requests\Post\StoreRequest;
use App\Http\Requests\Post\UpdateRequest;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index(): Response
    {
        return response()->view('posts.index', [
            'posts' => Post::orderBy('updated_at', 'desc')->get(),
        ]);
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create(): Response
    {
        return response()->view('posts.form');
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(StoreRequest $request): RedirectResponse
    {
        $validated = $request->validated();

        if ($request->hasFile('featured_image')) {
            // put image in the public storage
            $file = Storage::disk('public')->put('images/posts/featured-images', request()->file('featured_image'), 'public');
            // get the image path in the url
            $path = Storage::url($file);
            $validated['featured_image'] = $path;
        }

        // insert only requests that already validated in the StoreRequest
        $create = Post::create($validated);

        if($create) {
            // add flash for the success notification
            session()->flash('notif.success', 'Post created successfully!');
            return redirect()->route('posts.index');
        }

        return abort(500);
    }

    /**
     * Display the specified resource.
     */
    public function show(string $id): Response
    {
        return response()->view('posts.show', [
            'post' => Post::findOrFail($id),
        ]);
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(string $id): Response
    {
        return response()->view('posts.form', [
            'post' => Post::findOrFail($id),
        ]);
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(UpdateRequest $request, string $id): RedirectResponse
    {
        $post = Post::findOrFail($id);
        $validated = $request->validated();

        if ($request->hasFile('featured_image')) {
            // get current image path and replace the storage path with public path
            $currentImage = str_replace('/storage', '/public', $post->featured_image);
            // delete current image
            Storage::delete($currentImage);

            $file = Storage::disk('public')->put('images/posts/featured-images', request()->file('featured_image'), 'public');
            $path = Storage::url($file);
            $validated['featured_image'] = $path;
        }

        $update = $post->update($validated);

        if($update) {
            session()->flash('notif.success', 'Post updated successfully!');
            return redirect()->route('posts.index');
        }

        return abort(500);
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(string $id): RedirectResponse
    {
        $post = Post::findOrFail($id);

        $currentImage = str_replace('/storage', '/public', $post->featured_image);
        Storage::delete($currentImage);

        $delete = $post->delete($id);

        if($delete) {
            session()->flash('notif.success', 'Post deleted successfully!');
            return redirect()->route('posts.index');
        }

        return abort(500);
    }
}

Create Form Request for store() method

We can run the following command to create a form request for store():

php artisan make:request Post/StoreRequest

And then add the following code to the class:

    public function authorize(): bool
    {
        // dont' forget to set this as true
        return true;
    }

    public function rules(): array
    {
        // make all of the fields required, set featured image to accept only images
        return [
            'title' => 'required|string|min:3|max:250',
            'content' => 'required|string|min:3|max:6000',
            'featured_image' => 'required|image|max:1024|mimes:jpg,jpeg,png',
        ];
    }

Create Form Request for update() method

We can run the following command to create a form request for update():

php artisan make:request Post/UpdateRequest

The code for this class is similar to the code for StoreRequest except that the featured_image rule is set to nullable:

    public function authorize(): bool
    {
        // dont' forget to set this as true
        return true;
    }

    public function rules(): array
    {
        // make all of the fields required, set featured image to accept only images
        return [
            'title' => 'required|string|min:3|max:250',
            'content' => 'required|string|min:3|max:6000',
            'featured_image' => 'nullable|image|max:1024|mimes:jpg,jpeg,png',
        ];
    }

Add $fillable to Post Model

In the app/Models/Post.php file, add the fillable property to specify which fields can be mass-assigned. Here's an example:

class Post extends Model
{
    protected $fillable = [
        'title', 
        'content',
        'featured_image',
    ];
}

Create a Symbolic Link for Our Public Storage

To make files stored in the public disk accessible from the web, a symbolic link needs to be created from the public/storage folder to the storage/app/public folder. By default, the public disk uses the local driver. No changes are required to our public storage configuration. To create the symbolic link, run the following command:

php artisan storage:link

TailwindCSS and Vite Configuration

We will be using TailwindCSS for our styling and Vite as our Asset Bundling helper. Therefore, we need to adjust their configurations a bit.

Since we will be writing additional styles to our app, we need to start the Tailwind CLI build process while we code our views. To do this, run the following command:

npx tailwindcss -i ./resources/css/app.css -o ./resources/css/main.css --watch

This command will generate a new file at resources/css/main.css. Now, we need to tell Vite that we will be using main.css instead of app.css.

We will reuse resources/views/layouts/app.blade.php layout so update the Vite code in the head section to the following:

    {{-- some other code --}}
    @vite(['resources/css/main.css', 'resources/js/app.js'])
</head>

Setting Up the Layout

We will update the header section inside our layout's body so that it can handle flash notifications for success messages. Please update it with the following code:

<!-- Page Heading -->
@if (isset($header))
    <header class="bg-white shadow">
        <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
            {{ $header }}

            {{-- check if there is a notif.success flash session --}}
            @if (Session::has('notif.success'))
            <div class="bg-blue-300 mt-2 p-4">
                {{-- if it's there then print the notification --}}
                <span class="text-white">{{ Session::get('notif.success') }}</span>
            </div>
            @endif
        </div>
    </header>
@endif

So our resources\views\layouts\app.blade.php file will be updated with the below code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/main.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            <!-- Page Heading -->
            @if (isset($header))
                <header class="bg-white shadow">
                    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                        {{ $header }}

                        @if (Session::has('notif.success'))
                        <div class="bg-blue-300 mt-2 p-4">
                            <span class="text-white">{{ Session::get('notif.success') }}</span>
                        </div>
                        @endif
                    </div>
                </header>
            @endif

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>

Read also:

Information Clarity in Remote Teams: Tips and Examples

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Create Index View

Create a new file resources/views/posts/index.blade.php with the following contents:

{{-- use AppLayout Component located in app\View\Components\AppLayout.php which use resources\views\layouts\app.blade.php view --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ 'Posts' }}
            </h2>
            <a href="{{ route('posts.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md">ADD</a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <table class="border-collapse table-auto w-full text-sm">
                        <thead>
                            <tr>
                                <th class="border-b font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 text-left">Title</th>
                                <th class="border-b font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 text-left">Created At</th>
                                <th class="border-b font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 text-left">Updated At</th>
                                <th class="border-b font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 text-left">Action</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white">
                            {{-- populate our post data --}}
                            @foreach ($posts as $post)
                                <tr>
                                    <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">{{ $post->title }}</td>
                                    <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">{{ $post->created_at }}</td>
                                    <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">{{ $post->updated_at }}</td>
                                    <td class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 text-slate-500 dark:text-slate-400">
                                        <a href="{{ route('posts.show', $post->id) }}" class="border border-blue-500 hover:bg-blue-500 hover:text-white px-4 py-2 rounded-md">SHOW</a>
                                        <a href="{{ route('posts.edit', $post->id) }}" class="border border-yellow-500 hover:bg-yellow-500 hover:text-white px-4 py-2 rounded-md">EDIT</a>
                                        {{-- add delete button using form tag --}}
                                        <form method="post" action="{{ route('posts.destroy', $post->id) }}" class="inline">
                                            @csrf
                                            @method('delete')
                                            <button class="border border-red-500 hover:bg-red-500 hover:text-white px-4 py-2 rounded-md">DELETE</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Create Show View

Create a new file resources/views/posts/show.blade.php with the following contents:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ 'Show' }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <div class="mb-6">
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ 'Title' }}
                        </h2>

                        <p class="mt-1 text-sm text-gray-600">
                            {{ $post->title }}
                        </p>
                    </div>
                    <div class="mb-6">
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ 'Content' }}
                        </h2>

                        <p class="mt-1 text-sm text-gray-600">
                            {{ $post->content }}
                        </p>
                    </div>
                    <div class="mb-6">
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ 'Featured Image' }}
                        </h2>

                        <p class="mt-1 text-sm text-gray-600">
                            <img class="h-64 w-128" src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}" srcset="">
                        </p>
                    </div>
                    <div class="mb-6">
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ 'Created At' }}
                        </h2>

                        <p class="mt-1 text-sm text-gray-600">
                            {{ $post->created_at }}
                        </p>
                    </div>
                    <div class="mb-6">
                        <h2 class="text-lg font-medium text-gray-900">
                            {{ 'Updated At' }}
                        </h2>

                        <p class="mt-1 text-sm text-gray-600">
                            {{ $post->updated_at }}
                        </p>
                    </div>
                    <a href="{{ route('posts.index') }}" class="bg-blue-500 text-white px-4 py-2 rounded-md">BACK</a>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Create Form View

Create a new file resources/views/posts/form.blade.php. Here we will use some already defined components we get from Laravel Breeze. Write the following code:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{-- Use 'Edit' for edit mode and create for non-edit/create mode --}}
            {{ isset($post) ? 'Edit' : 'Create' }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    {{-- don't forget to add multipart/form-data so we can accept file in our form --}}
                    <form method="post" action="{{ isset($post) ? route('posts.update', $post->id) : route('posts.store') }}" class="mt-6 space-y-6" enctype="multipart/form-data">class="mt-6 space-y-6">
                        @csrf
                        {{-- add @method('put') for edit mode --}}
                        @isset($post)
                            @method('put')
                        @endisset

                        <div>
                            <x-input-label for="title" value="Title" />
                            <x-text-input id="title" name="title" type="text" class="mt-1 block w-full" :value="$post->title ?? old('title')" required autofocus />
                            <x-input-error class="mt-2" :messages="$errors->get('title')" />
                        </div>

                        <div>
                            <x-input-label for="content" value="Content" />
                            {{-- use textarea-input component that we will create after this --}}
                            <x-textarea-input id="content" name="content" class="mt-1 block w-full" required autofocus>{{ $post->content ?? old('content') }}</x-textarea-input>
                            <x-input-error class="mt-2" :messages="$errors->get('content')" />
                        </div>

                        <div>
                            <x-input-label for="featured_image" value="Featured Image" />
                            <label class="block mt-2">
                                <span class="sr-only">Choose image</span>
                                <input type="file" id="featured_image" name="featured_image" class="block w-full text-sm text-slate-500
                                    file:mr-4 file:py-2 file:px-4
                                    file:rounded-full file:border-0
                                    file:text-sm file:font-semibold
                                    file:bg-violet-50 file:text-violet-700
                                    hover:file:bg-violet-100
                                "/>
                            </label>
                            <div class="shrink-0 my-2">
                                <img id="featured_image_preview" class="h-64 w-128 object-cover rounded-md" src="{{ isset($post) ? asset($post->featured_image) : '' }}" alt="Featured image preview" />
                            </div>
                            <x-input-error class="mt-2" :messages="$errors->get('featured_image')" />
                        </div>

                        <div class="flex items-center gap-4">
                            <x-primary-button>{{ __('Save') }}</x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        // create onchange event listener for featured_image input
        document.getElementById('featured_image').onchange = function(evt) {
            const [file] = this.files
            if (file) {
                // if there is an image, create a preview in featured_image_preview
                document.getElementById('featured_image_preview').src = URL.createObjectURL(file)
            }
        }
    </script>
</x-app-layout>

Create textarea-input Component

Create additional component with the following codes:

@props(['disabled' => false])

<textarea {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm']) !!}>{{$slot}}</textarea>

Update Navigation Component

Update the navigation component with the following codes:

<nav x-data="{ open: false }" class="bg-white border-b border-gray-100">
    <!-- Primary Navigation Menu -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <!-- Logo -->
                <div class="shrink-0 flex items-center">
                    <a href="{{ route('dashboard') }}">
                        <x-application-logo class="block h-9 w-auto fill-current text-gray-800" />
                    </a>
                </div>

                <!-- Navigation Links -->
                <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                        {{ __('Dashboard') }}
                    </x-nav-link>
                    <!-- add this -->
                    <x-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')">
                        {{'Posts' }}
                    </x-nav-link>
                </div>
            </div>

            <!-- Settings Dropdown -->
            <div class="hidden sm:flex sm:items-center sm:ml-6">
                <x-dropdown align="right" width="48">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition ease-in-out duration-150">
                            <div>{{ Auth::user()->name }}</div>

                            <div class="ml-1">
                                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <x-dropdown-link :href="route('profile.edit')">
                            {{ __('Profile') }}
                        </x-dropdown-link>

                        <!-- Authentication -->
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
            </div>

            <!-- Hamburger -->
            <div class="-mr-2 flex items-center sm:hidden">
                <button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Responsive Navigation Menu -->
    <div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                {{ __('Dashboard') }}
            </x-responsive-nav-link>
            <!-- add this -->
            <x-responsive-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')">
                {{ 'Posts' }}
            </x-responsive-nav-link>
        </div>

        <!-- Responsive Settings Options -->
        <div class="pt-4 pb-1 border-t border-gray-200">
            <div class="px-4">
                <div class="font-medium text-base text-gray-800">{{ Auth::user()->name }}</div>
                <div class="font-medium text-sm text-gray-500">{{ Auth::user()->email }}</div>
            </div>

            <div class="mt-3 space-y-1">
                <x-responsive-nav-link :href="route('profile.edit')">
                    {{ __('Profile') }}
                </x-responsive-nav-link>

                <!-- Authentication -->
                <form method="POST" action="{{ route('logout') }}">
                    @csrf

                    <x-responsive-nav-link :href="route('logout')"
                            onclick="event.preventDefault();
                                        this.closest('form').submit();">
                        {{ __('Log Out') }}
                    </x-responsive-nav-link>
                </form>
            </div>
        </div>
    </div>
</nav>

Here we add our Posts link to the desktop and mobile version navigation.

Test Our Laravel App

If you haven't run npm install since installing Laravel Breeze, make sure to run it first to install all the necessary dependencies. If you have already done that, you can skip this step. Next, run npm run dev to start working with Vite.

Once you have set up your frontend dependencies, you can run your local development server by running the following command:

php artisan serve

Read also:

Web Rendering: What Is SSR, CSR, SSG, and ISR?

Create Login With Google OAuth Using Laravel Socialite

Welcome Page

You will see the following Laravel 10 Welcome Page. You will also see Log in and Register link at the navbar because we already installed Laravel Breeze.

Dashboard Page

Here is how the Dashboard page looks like. You should also see an additional link at the navbar named Posts:

Post List Page

Here is how the post list page in /posts should look like. It should have a table with Show, Edit, and Delete buttons in each record:

Show Post Page

Here is how the Show Post page should look like:

Create and Edit Post Page

Here is how the Create Post page should look like with image preview. This is also similar to the Edit Post page:

Notification Display

A notification should appear after we successfully create, edit, or delete a record:

Conclusion

In this tutorial, we have learned how to create a simple CRUD application using Laravel 8 with Laravel Breeze for authentication. We have covered the basic concepts of Laravel, such as routing, controllers, views, and models, as well as using components from Laravel Breeze to handle user authentication.

We also learned how to use Tailwind CSS and Vite to style our application and optimize asset bundling. Additionally, we covered how to handle flash notifications and file uploading in our application.

Overall, this tutorial provides a solid foundation for building CRUD applications using Laravel, and with the knowledge gained, you can easily extend this application to meet your specific requirements.

The repository for this example can be found at fajarwz/blog-laravel10-crud-image.

Easy Laravel Localization Tutorial With Blog Use Case and Repo Example

Fajar Windhu Zulfikar — Sat, 04 Feb 2023 01:45:39 +0000

Learn How to Easily Implement Multi-Lingual Support in Your Next Laravel Project!

Laravel is a popular open-source PHP framework that helps developers build modern, robust, and scalable web applications. Localization, also known as L10n, is the process of adapting a product to meet the language, cultural, and other specific requirements of a particular country or region. Laravel provides support for Localization through its built-in functions, but for a more comprehensive solution, you can use the mcamara/laravel-localization package.

In this tutorial, we'll guide you through the process of installing and setting up the package, and building a simple multilingual blog website using Laravel.

Installation

Laravel Installation

Before we start, you need to have Laravel installed on your system. If you don't have it installed, run the following command in your terminal to install the version 9:

composer create-project laravel/laravel:^9.0 blog-laravel-localization

This will create a new Laravel project in our current directory named blog-laravel-localization.

Initializing the Database

Next, we need to set up a database and include some sample data to work with. For this tutorial, create a database named blog_laravel_localization. After creating the database, we need to modify the database connection settings in our Laravel app's .env file to match the new database name, as well as the username and password.

Database Table Design

For our blog example, we will use the following table design:

Initializing the Migration

For our multilingual blog web, we need to create two database tables: posts and post_translations

Run the following command:

php artisan make:migration "create posts table"

Use the following code to create a posts migration:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->tinyInteger('is_draft')->default(0);
        $table->timestamps();
    });
}

Run the following command:

php artisan make:migration "create post_translations table"

And use the following code to create a post_translations migration:

public function up()
{
    Schema::create('post_translations', function (Blueprint $table) {
        $table->id();
        $table->bigInteger('post_id')->unsigned();
        $table->string('locale'); // id, en, etc.
        $table->string('title');
        $table->text('content');

        // We added a unique constraint on post_id and locale to ensure each 
        // post translation is unique, and a foreign key constraint on post_id 
        // to reference the posts table.
        $table->unique(['post_id', 'locale']);
        $table->foreign('post_id')->references('id')->on('posts')->onDelete('cascade');
    });
}

Initializing the Seeder

We will use Laravel Factories to seed our data. Before that, we need to create the Models for our posts and post_translations.

Create Post Model

Use the following code to create the Post Model:

// app/Models/Post.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    // Returns the related post translations for this post
    public function postTranslations()
    {
        return $this->hasMany(PostTranslation::class);
    }
}

Create PostTranslation Model

Use the following code to create the PostTranslation Model:

// app/Models/PostTranslation.php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class PostTranslation extends Model
{
    use HasFactory;

    // we don't use timestamps in our post_translations table
    public $timestamps = false;

    // Not mandatory in this tutorial, but it is a best practice
    public function post()
    {
        return $this->belongsTo(Post::class);
    }
}

Read also:

Laravel Export/Import: Step-by-Step Guide with Repo Example

Information Clarity in Remote Teams: Tips and Examples

Create Factory for Post

Create a PostFactory with the following codes:

// database/factories/PostFactory.php
<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition()
    {
        return [
            'is_draft' => 1,
        ];
    }
}

Create Factory for PostTranslation

Create a PostTranslationFactory with the following codes:

// database/factories/PostTranslationFactory.php
<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Post>
 */
class PostTranslationFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition()
    {
        return [
            'post_id' => null,
            // we use Faker library, which generates fake data
            'locale' => $this->faker->randomElement(['id', 'en']),
            'title' => $this->faker->sentence(),
            'content' => $this->faker->paragraph(2),
        ];
    }
}

Update our DatabaseSeeder Codes

Update the run() method with the following codes:

// database/seeders/DatabaseSeeder.php
public function run()
{
    // create 10 dummy posts with two language translations each.
    for ($i=0; $i < 10; $i++) { 
        // create a post using factory
        $post = Post::factory()->create();

        // create a post translation for the 'id' locale using the factory
        PostTranslation::factory()->create([
            'post_id' => $post->id,
            'locale' => 'id',
        ]);
        // create a post translation for the 'en' locale using the factory
        PostTranslation::factory()->create([
            'post_id' => $post->id,
            'locale' => 'en',
        ]);
    }
}

Once we have our migration and seeder set up, we can run the following command to run the migration and seed the data into the posts and post_translations table:

php artisan migrate --seed

Install the mcamara/laravel-localization Package

Install the Package With Composer

Install it using composer:

composer require mcamara/laravel-localization

Package Configuration

In order to edit the default configuration you may execute:

php artisan vendor:publish --provider="Mcamara\LaravelLocalization\LaravelLocalizationServiceProvider"

After that, config/laravellocalization.php will be created.

In the config/laravellocalization.php configuration file, make sure to specify the languages that you want to support. For this tutorial, we will only use the id and en locales, so the supportedLocales setting will look like this:

...
'supportedLocales' => [
        // ... other commented value
        'id'          => ['name' => 'Indonesian',             'script' => 'Latn', 'native' => 'Bahasa Indonesia', 'regional' => 'id_ID'],
        'en'          => ['name' => 'English',                'script' => 'Latn', 'native' => 'English', 'regional' => 'en_GB'],
        // ... other commented value
    ],
...

We may also register the package's middleware to app\Http\Kernel.php but not mandatory in this tutorial:

// app\Http\Kernel.php
<?php 
namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel {

    protected $routeMiddleware = [
        ...

        /**** OTHER MIDDLEWARE ****/
        'localize'                => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRoutes::class,
        'localizationRedirect'    => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter::class,
        'localeSessionRedirect'   => \Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect::class,
        'localeCookieRedirect'    => \Mcamara\LaravelLocalization\Middleware\LocaleCookieRedirect::class,
        'localeViewPath'          => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath::class

        ...
    ];

}

Create the Routes

We will create two pages, the Home and About pages, and display our multilingual blog posts on the Home page. Thus, we need to create two routes for these pages.

// routes/web.php
<?php

use Illuminate\Support\Facades\Route;

// grouping the routes with locale prefix like 'id', 'en', etc.
Route::group(['prefix' => LaravelLocalization::setLocale()], function () {
    Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
    Route::get('/about', [App\Http\Controllers\AboutController::class, 'index'])->name('about');
});

Create the Controllers

Create the HomeController

To display our blog posts on the home page, we need to create a HomeController. This controller will have a single method named index(). This method retrieves the current locale, and then queries the Post model along with its translations. It uses the retrieved locale to filter the translations, ensuring only the translations for the current locale are retrieved. Finally, the data is passed to the view home to be displayed to the user. The code for the HomeController is as follows:

// app/Http/Controllers/HomeController.php
<?php

namespace App\Http\Controllers;

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

class HomeController extends Controller
{
    public function index()
    {
        $locale = app()->currentLocale();
        // eager load the postTranslations relation
        $data = Post::with(['postTranslations' => function($query) use($locale) {
            // give a condition so we only retrieve the current locale translation
            $query->where('locale', $locale);
        }])->get();

        return view('home', ['data' => $data]);
    }
}

Create the AboutController

In this step, we will create a controller specifically for our About page. This controller will have only one method, index(), which will return the about view.

// app/Http/Controllers/AboutController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AboutController extends Controller
{
    public function index()
    {
        return view('about');
    }
}

Create the Views

Create the Home View

Let's create the home view for our home page. We'll design the home page with a navbar that includes a locale switcher. We'll also display all the post data based on the currently selected locale.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>

        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Fajarwz</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item d-flex">
                            <a class="nav-link {{ Route::currentRouteName() === 'home' ? 'active' : '' }}" aria-current="page" href="{{ route('home') }}">Home</a>
                            <a class="nav-link {{ Route::currentRouteName() === 'about' ? 'active' : '' }}" aria-current="page" href="{{ route('about') }}">About</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                {{ strtoupper(LaravelLocalization::getCurrentLocale()) }}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                @foreach (LaravelLocalization::getSupportedLanguagesKeys() as $locale)
                                    <li><a class="dropdown-item" href="{{ LaravelLocalization::getLocalizedURL($locale) }}">{{ strtoupper($locale) }}</a></li>
                                @endforeach
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row pt-5">
                <div class="text-center pb-3">
                    <h1>{{ __('general.title') }}</h1>
                </div>
                @foreach ($data as $data)
                <div class="col-3">
                    <div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
                        <div class="card-header">{{ $data->postTranslations->first()->locale }}</div>
                        <div class="card-body">
                            <h5 class="card-title">{{ $data->postTranslations->first()->title }}</h5>
                            <p class="card-text">{{ Str::limit( strip_tags( $data->postTranslations->first()->content ), 100 ) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach  
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    </body>
</html>

Read also:

Remote Work: Effective Strategies for Communication and Timely Responses

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Create the About View

Now, we will create a view for the About page which will also be designed with a navbar including a locale switcher. This page will display only the title "About".

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <!-- Styles -->
        <style>

        </style>

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Fajarwz</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item d-flex">
                            <a class="nav-link {{ Route::currentRouteName() === 'home' ? 'active' : '' }}" aria-current="page" href="{{ route('home') }}">Home</a>
                            <a class="nav-link {{ Route::currentRouteName() === 'about' ? 'active' : '' }}" aria-current="page" href="{{ route('about') }}">About</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                {{ strtoupper(LaravelLocalization::getCurrentLocale()) }}
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                @foreach (LaravelLocalization::getSupportedLanguagesKeys() as $locale)
                                    <li><a class="dropdown-item" href="{{ LaravelLocalization::getLocalizedURL($locale) }}">{{ strtoupper($locale) }}</a></li>
                                @endforeach
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container">
            <div class="row pt-5">
                <div class="text-center pb-3">
                    <h1>{{ __('general.about') }}</h1>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    </body>
</html>

Create the Lang File

You see there is a code like this:

{{ __('general.title') }}

This is from a lang file, it is retrieving a value based on currently selected locale.

Locate the lang folder in your project's root directory. In the lang folder, create a new folder for each language you want to support. For example, if you want to support Indonesia and English, you would create two folders: "id" and "en". Within each language folder, create a new file. For example, we will call it general.php.

In the general.php file, return an array filled with keys and their corresponding translation values. This way, you can easily retrieve the values based on the currently selected locale.

For example: {{ __('general.title') }} retrieves the value of the "title" key from the general.php file in the currently selected language folder.

Let's set it up.

Write the following codes inside en/general.php:

// lang/en/general.php
<?php

return [
    'about' => 'About',
    'title' => 'Latest Posts',
];

And write the following codes inside id/general.php:

// lang/id/general.php
<?php

return [
    'about' => 'Tentang',
    'title' => 'Artikel Terbaru',
];

Test the Web

Now is the time for us to check our work. Run the Laravel app.

php artisan serve

Here is how the Home Page with id locale looks like, it retrieve all posts with id locale only.

And here is how the Home Page with en locale looks like, it retrieve all posts with en locale only.

This is the About page with id locale

And this is the About page with en locale

Conclusion

In conclusion, this article has provided a step-by-step guide on how to create a multi-language website using Laravel. By following this tutorial, you will have learned how to: create the views for your Home and About pages, set up the navigation bar with a locale switcher, create the lang folder, and create a lang file for each language you want to support. With these skills, you should be able to create a website that supports multiple languages and provides a seamless user experience for your visitors.

The repository for this example can be found at fajarwz/blog-laravel-localization.

Information Clarity in Remote Teams: Tips and Examples

Fajar Windhu Zulfikar — Mon, 23 Jan 2023 15:46:32 +0000

Effective communication is crucial for the success of remote teams. Without face-to-face interactions, it can be more difficult to communicate effectively, and this can lead to misunderstandings and mistakes. Clear and concise information is essential to ensure that everyone is on the same page, and that the work is being done efficiently.

"There's an Error in Your Code"

An example of this can be seen when communicating about errors in code. Instead of simply stating "There's an error in your code", a more effective approach would be to specify the location of the error and the nature of the problem.

For example, "I noticed an error in the code on line 45 of the 'main.py' file. It looks like there's a missing parenthesis. Can you take a look and fix it? Let me know if you need help with anything." This allows the person responsible for the code to quickly identify and fix the problem, and shows that the sender is willing to help out if needed.

Another example could be "I noticed an error in the code on line 45 of the 'main.py' file. The error message is 'invalid syntax' can you take a look and fix it? Let me know if you need help with anything." This also specifies the location of the error and the error message which is also very helpful for the person responsible for the code to quickly identify and fix the problem.

It's also important to keep in mind that the tone of the message should be professional and respectful, and avoid using language that could be interpreted as blameful or accusatory.

Read also:

Remote Work: Effective Strategies for Communication and Timely Responses

Laravel Export/Import: Step-by-Step Guide with Repo Example

The Importance of Information Clarity

Accountability

Accountability is a key aspect of effective communication in remote teams. When team members have a clear understanding of what is expected of them and what their roles are, they are more likely to take ownership of their work and to be accountable for their actions. This means they will be more likely to meet deadlines, complete tasks to a high standard and communicate any issues that arise.

In a remote work setting, where there is less opportunity for direct supervision, accountability is even more important. Managers and team leaders may not be physically present to check in on their team members, so it's essential that team members take ownership of their work and hold themselves accountable for their actions. This can be achieved by providing clear instructions and expectations, setting deadlines, and regularly checking in on progress.

When team members are accountable for their work, it helps to ensure that the work is completed efficiently, and that deadlines are met. It also promotes a culture of trust and collaboration, where team members feel comfortable sharing their ideas and concerns, and where managers and team leaders can rely on their team members to complete their work to a high standard.

Read also:

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Web Rendering: What Is SSR, CSR, SSG, and ISR?

Progress Tracking

Another important aspect is the ability to track progress, when information is shared clearly, it’s easier to track progress, and to make sure that the work is on schedule.

Information clarity helps managers and team leaders to track the progress of their team, and to identify and solve any issues that arise. This helps to ensure that the work is on schedule, and that the quality of the work is up to standard.

In summary, information clarity is crucial in remote teams as it helps to maintain accountability and to track progress, it promotes a culture of trust and collaboration, and it helps to ensure that the work is completed efficiently and that deadlines are met.

Conclusion

Effective communication is not only important for solving problems and tracking progress but also for maintaining accountability and fostering a culture of trust and collaboration, which is essential for remote teams. It’s essential for remote teams to establish clear communication protocols and to ensure that everyone is aware of the information they need to do their jobs effectively.

Laravel Export/Import: Step-by-Step Guide with Repo Example

Fajar Windhu Zulfikar — Tue, 17 Jan 2023 10:40:37 +0000

One of the common tasks in web development is the ability to export and import data. This can be useful for a variety of reasons, such as allowing users to download their data, or allowing administrators to bulk upload data into the system.

In the Laravel ecosystem, we can use SpartnerNL/Laravel-Excel package to handle our export and import functionality. This package is an easy-to-use wrapper for the popular PhpSpreadsheet library, and it allows us to easily export and import data from various file formats, including Excel, CSV, and ODS.

Installing Laravel 9

To get started, we need to have Laravel installed on our machine. To do this, we will first need to have Composer, the PHP package manager, installed. Once Composer is installed, we can use it to install Laravel by running the following command:

composer create-project --prefer-dist laravel/laravel:^9.0 blog-laravel-excel

This will create a new Laravel project in a directory called blog-laravel-excel.

Initializing the Database

Before we can start exporting and importing data, we need to have a database set up and some sample data to work with.

For this tutorial, we will create a database called blog_laravel_excel. Once the database is created, we will need to adjust the database connection settings in our Laravel app's .env file to match the new database name, as well as the database username and password.

Initializing the Migration

In Laravel 9, there is already a users migration in the database/migrations directory. However, you will need to make sure that it includes the necessary fields for name, email, and password before you run the migration.

public function up()
{
    Schema::create('users', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('email')->unique();
        $table->timestamp('email_verified_at')->nullable();
        $table->string('password');
        $table->rememberToken();
        $table->timestamps();
    });
}

Initializing the Seeder

We also need to create a users seeder but in Laravel 9, there is already a factory and code in place to generate the seeders. You can use the factory to generate fake data for the users table.

Just make sure that there is a factory called UserFactory in the database/factories/UserFactory.php file, and that it contains the following code:

<?php

namespace Database\Factories;

use Illuminate\Database\Eloquent\Factories\Factory;
use Illuminate\Support\Str;

/**
 * @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\User>
 */
class UserFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition()
    {
        return [
            'name' => fake()->name(),
            'email' => fake()->unique()->safeEmail(),
            'email_verified_at' => now(),
            'password' => '$2y$10$92IXUNpkjO0rOQ5byMi.Ye4oKoEa3Ro9llC/.og/at2.uheWG/igi', // password
            'remember_token' => Str::random(10),
        ];
    }

    /**
     * Indicate that the model's email address should be unverified.
     *
     * @return static
     */
    public function unverified()
    {
        return $this->state(fn (array $attributes) => [
            'email_verified_at' => null,
        ]);
    }
}

In addition, check the run() method from database/seeders/DatabaseSeeder.php file, to make sure it is calling the UserFactory to generate the necessary number of fake data for seeding the users table.

public function run()
{
    \App\Models\User::factory(10)->create();
}

Once we have our migration and seeder set up, we can run the following command to run the migration and seed the data into the users table:

php artisan migrate --seed

Installing the Laravel-Excel Package

Next, we need to install the Laravel-Excel package. We can do this by running the following command:

composer require maatwebsite/excel

This will add the version 3.1 package to our project and make it available for use.

Package Configuration

With our database set up and seeded with data, we can now move on to configuring the Laravel-Excel package.

The Maatwebsite\Excel\ExcelServiceProvider is auto-discovered and registered by default, so no need to add it manually in the config file. The Excel facade is also auto-discovered, so there is no need to register it manually.

To publish the config, we can run the vendor publish command:

php artisan vendor:publish --provider="Maatwebsite\Excel\ExcelServiceProvider" --tag=config

This command will create a new config file named config/excel.php, where you can customize the package's settings as per your requirement.

Read also:

Remote Work: Effective Strategies for Communication and Timely Responses

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Create Route file

Create 3 routes in the routes/web.php file that handle the import and export functionality for Excel and CSV files.

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/', [UserController::class, 'index'])->name('users.index'); // view
Route::post('import', [UserController::class, 'import'])->name('users.import'); // import route
Route::get('export', [UserController::class, 'export'])->name('users.export'); // export route

Create Export Class

Create an export class in the app/Exports directory by utilizing the make:export command.

php artisan make:export UserExport --model=User

Here is the final code in app/Exports/UserExport.php.

<?php

namespace App\Exports;

use App\Models\User;
use Maatwebsite\Excel\Concerns\FromQuery;
use Maatwebsite\Excel\Concerns\WithHeadings;

// implements WithHeadings to add headings, we can omit this if we want
class UserExport implements FromQuery, WithHeadings
{
    // add headings if we implements WithHeadings
    public function headings(): array
    {
        return [
            'ID',
            'Name',
            'Email',
            'Email Verified At',
            'Created At',
            'Updated At',
        ];
    }

    // because we implements FromQuery we need to add this query() method 
    public function query()
    {
        return User::query();   // class that we use for the query
    }
}

Create Import Class

Create an import class in the app/Imports directory by utilizing the make:import command.

php artisan make:import UserImport --model=User

Here is the final code in app/Exports/UserImport.php.

<?php

namespace App\Imports;

use App\Models\User;
use Maatwebsite\Excel\Concerns\ToModel;
use Maatwebsite\Excel\Concerns\WithHeadingRow;

// If your file includes a heading row (a row in which each cell 
// indicates the purpose of that column) and you want to use 
// those names as the array keys of each row, you can implements the 
// WithHeadingRow.
class UserImport implements ToModel, WithHeadingRow
{
    public function model(array $row)
    {
        return new User([
            // because we would have 'Name', 'Email', and 'Password' heading in our excel
            'name'     => $row['name'], 
            'email'    => $row['email'], 
            'password' => bcrypt($row['password']), 
        ]);
    }
}

Create UserController

We will create a controller to manage the import and export of files such as Excel and CSV. To create the controller, we can use the following command:

php artisan make:controller UserController

This command will generate a new controller file in the app/Http/Controllers directory.

Create index, import, and export methods as previously defined in our web routes. Alternatively, place the following code in the app/Http/Controllers/UserController.php file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Imports\UserImport;
use App\Exports\UserExport;
use App\Models\User;
use Excel;

class UserController extends Controller
{
    public function index()
    {
        return view('users.index', [
            // we will display a list of user data on the index page
            'users' => User::all(),
       ]);
    }

    public function import(Request $request) 
    {
        // use Excel facade to import data, by passing in the UserImport class and the uploaded file request as arguments
        Excel::import(new UserImport, $request->file('file')->store('temp'));
        return back();
    }

    public function export() 
    {
        // use Excel facade to export data, by passing in the UserExport class and the desired file name as arguments
        return Excel::download(new UserExport, 'users.xlsx');
    }
}

Create the Blade View

In this step, we will create a view for managing the importing and exporting of files through the front-end. To do this, create a resources/views/users/index.blade.php file and insert the following code:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Import Export Excel & CSV in Laravel 9</title>
    {{-- we will use Bootstrap 5 --}}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5 text-center">
        <h2 class="mb-4">
            Laravel 9 Import and Export CSV & Excel to Database
        </h2>
        {{-- create a form tag with method post for the import feature --}}
        <form action="{{ route('users.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group mb-4" style="max-width: 500px; margin: 0 auto;">
                <div class="input-group">
                    {{-- make sure to add file to name attribute --}}
                    <input type="file" name="file" class="form-control">
                </div>
                <div><small>Upload the file here before clicking 'Import data'</small></div>
            </div>
            <button class="btn btn-primary">Import data</button>
            {{-- create a button for export feature --}}
            <a class="btn btn-success" href="{{ route('users.export') }}">Export data</a>
        </form>
        {{-- display users data --}}
        <table class="table">
            <thead>
                <tr>
                    <td>#</td>
                    <td>Name</td>
                    <td>Email</td>
                </tr>
            </thead>
            <tbody>
                @foreach ($users as $key => $user)
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>
</html>

Read also:

Send Slack Notifications From Laravel App

Create Login With Google OAuth Using Laravel Socialite

Run and Test It

Now we have our UI, controller, and model set up, we can test our export and import functionality. We can do this by running the project and navigating to the users index page.

php artisan serve

Here is the endpoint that we can finally test:

http://127.0.0.1:8000/

We can then test uploading an excel file and check if the data is imported correctly, and also test exporting the data and check if the exported file is in the correct format.

Import Feature

Here is the data that will be imported:

Upload it by clicking 'Import data' and here is the list of user data after it has been successfully imported:

Export feature

Here is the exported data:

Conclusion

In conclusion, using the Laravel-Excel package, it is easy to add export and import functionality to a Laravel application. With its simple syntax and powerful features, it makes it easy to handle various file formats and manipulate data. This tutorial gives a simple example of how to implement export and import functionality in a Laravel application, but the package can be used for more complex use cases as well.

The repository for this example can be found at fajarwz/blog-laravel-excel.

Remote Work: Effective Strategies for Communication and Timely Responses

Fajar Windhu Zulfikar — Tue, 17 Jan 2023 00:46:59 +0000

Remote work has become an increasingly popular way of working in recent years, with more and more companies embracing the idea of letting their employees work from home or other locations outside of the office. Remote work has many benefits, such as increased flexibility and productivity, but it also presents some unique challenges, particularly when it comes to communication and response time. In this article, we'll explore the importance of both communication and a quick response when it comes to remote work.

The Importance of Communication

Communication is key when it comes to remote work. With employees working from different locations, it can be challenging to stay on the same page and ensure that everyone is on the same page. This is why it's important to have clear and regular communication channels in place, such as regular meetings, email, instant messaging, and video conferencing. These tools allow remote workers to stay connected and collaborate effectively, even when they're not in the same physical location. It's important for companies to establish a clear communication protocol that everyone must follow, this way, it's easier for the team to understand how and when to communicate, and avoid confusion.

Make Your Response Quick

Another important aspect of remote work is quick response. With everyone working from different locations, it's important to be responsive and accessible when needed. This means being available to answer questions, provide feedback, and resolve issues in a timely manner. A quick response time can help to keep projects moving forward and ensure that everyone is on track. It also helps to build trust and establish effective working relationships with colleagues and clients. Being responsive is not only important for the company, but also for the employee, as it will help them to be more productive and have a better work-life balance.

Read also:

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Web Rendering: What Is SSR, CSR, SSG, and ISR?

As an example, take a virtual team working on a new product launch. The team is spread out across different time zones, making it difficult to schedule meetings and discussions. To overcome this challenge, the team leader established a clear communication protocol, including regular video meetings, instant messaging and email updates. This helped the team stay connected and on the same page, ensuring the successful launch of the product. Additionally, the team leader implemented a "24-hour response policy" where all team members had to respond to any queries or issues within 24 hours. This helped to keep the project moving forward and fostered a sense of trust and reliability among team members.

Conclusion

In conclusion, remote work can be a great way to increase flexibility and productivity, but it also presents some unique challenges. Communication and quick response are two key factors that can help to make remote work successful. By having clear and regular communication channels in place and being responsive and accessible when needed, remote workers can stay connected and collaborate effectively, even when they're not in the same physical location. Companies that effectively address the challenges of remote work can not only improve their bottom line but also improve the quality of life for their employees.

Laravel 10 Bug Hunt Contest - $1,000 USD Prize

Fajar Windhu Zulfikar — Tue, 10 Jan 2023 01:52:12 +0000

The Laravel team has announced a bug hunt contest with a chance to win $1,000 USD as part of the upcoming release of Laravel 10 in February. The team relies on the community to help test new major versions before their release, and this time they have decided to hold a contest to find and fix any bugs that may be present in the new release.

To participate in the contest, follow these rules:

Only pull requests (PRs) sent to the 10.x branch of the laravel/framework repository are eligible.
Only genuine bug fixes are accepted. New features, refactoring, or typo fixes will not be counted.
Every bug fix must include a test.
Accepted bug fixes will be labeled, and a random winner will be selected at the end of the contest.

The contest will end as soon as the first stable version of Laravel 10 is released. Any PRs that are still pending at that time or are sent in after the Laravel 10 release will not be eligible.

To install Laravel 10, use the Laravel installer with the --dev flag:

laravel new laravel-contest --dev

Good luck to all participants!

Source: Laravel 10 Bug Hunt | Laravel Blog

Create Search Feature for Hugo Static Site With Lunr

Fajar Windhu Zulfikar — Thu, 05 Jan 2023 14:29:05 +0000

Having a large website with a lot of content can often make it difficult to know where to find what we need. To solve this problem, we may want to add a search feature to the website.

We have already figured out how to make a search feature for a dynamic website, but what if the site is a static site?

Just because our Hugo website is a static site doesn't mean we can't implement a search feature for our content. Thanks to technologies such as Lunr, we can use this to implement a client-side search.

I have already implemented this feature on my site at fajarwz.com/blog. I used Lunr to make the feature. There are some other libraries that can do the same job - you can check them out here. But in this tutorial, we will only try to implement it with Lunr. If you want to find out how to make it, keep following me here.

Get Lunr

We can install Lunr with npm:

npm install lunr

Alternatively, we can also include Lunr using script tags before the closing </body> tag by getting a link from a CDN. For example, we can use the unpkg CDN

<script src="https://unpkg.com/lunr/lunr.js"></script>

But I use jsdelivr and the minified version one so here is the code:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js"></script>

Create a Search Form

To create a search feature, we'll need to create a search form. It's a good idea to make this a partial template so that we can reuse the form wherever we want and keep the design consistent across the website.

Here is an example of what the search form partial template might look like:

<!-- action to the search page permalink, HTTP method get is enough -->
<form id="search" action='{{ with .GetPage "/search" }}{{.Permalink}}{{end}}' method="get">
    <label hidden for="search-input">Search</label>
    <input type="text" id="search-input" name="query" placeholder="🔍 Type here to search">
</form>

This will create a simple search form with an input field. You can customize the form by adding additional fields or styling the form with CSS. We can save it as layouts/partials/search-form.html.

Include it in other templates we need with:

{{ partial "search-form.html" . }}

For example I include the form in /blog page so here is how it looks like with additional CSS:

Create a Search Page

The next step in implementing a search feature for our static website is to create a page for displaying the search results, the "Search Results" Page.

Create a layouts inside layouts/search/list.html with the following markup example

<!-- inherit from base layout -->
{{ define "main" }}
<!-- include our search form -->
{{ partial "search-form.html" . }}

<h2 id="search-title">
    {{ .Name }} 
</h2>

<!-- later this element will be used to place our search results -->
<ul id="results">
    <li>
        Search results would be shown here.
    </li>
</ul>
{{ end }}

To make Hugo render our search page, we need to create a front matter for it. A minimal one should also work. Create a file in content/search/_index.md.

---
title: Search
---

We can see the search page in /search to make sure it works as we expected. Here is an example of my search page:

I also included the search form there.

Create a Search Index

This is our "search database". We will create an index of our desired searchable content. Create a file in layouts/partials/search-index.html and write the following code:

<script>
window.store = {
    // get section blog data
    {{ range where .Site.Pages "Section" "blog" }}
    // Permalink as an identifier
    "{{ .Permalink }}": {
        // write all data we need to be displayed in the search list
        "title": "{{ .Title  }}",
        "content": {{ .Content | plainify }}, // Strip out HTML tags
        "url": "{{ .Permalink }}"
        "tags": [{{ range .Params.Tags }}"{{ . }}",{{ end }}],
    },
    {{ end }}
}
</script>

Include this file inside our search page.

If we try to build it on our local device, we will see that it generates the same data as we generate it for a list page. Every time we search for content using the search form, Lunr will look for it in this index. The code to integrate the search form with this index will be covered later on.

Search Form and Index Integration

Place this code inside your main.js or wherever you want so it is included also on the search page.

function displayResults (results, store) {
    // grab the element that we will use to place our search results
    const searchResults = document.getElementById('results')
    // if the result(s) found
    if (results.length) {
    let resultList = ''
    // iterate over the results
    for (const n in results) {
        // get the data
        const item = store[results[n].ref]
        // build result list elements
        // if you want to style the list, edit this
        resultList += `
            <li>
                <h2>
                    <a href="${item.url}">${item.title}</a>
                </h2>'
                <p>${item.content.substring(0, 150)}...</p>
                <p>${item.tags}</p>
            </li>
        `;
    }
    // place the result list
    searchResults.innerHTML = resultList
    } else {
    // if no result return this feedback
    searchResults.innerHTML = 'No results found.'
}
}

// Get the query parameter(s)
const params = new URLSearchParams(window.location.search)
const query = params.get('query')

// if query exists, perform the search
if (query) {
    // Retain the query in the search form after redirecting to the search page
    document.getElementById('search-input').setAttribute('value', query)

    // Search these fields
    const idx = lunr(function () {
        this.ref('id')
        this.field('title', {
            // boost search to 15
            boost: 15
        })
        this.field('tags')
        this.field('content', {
            // boost search to 10
            boost: 10
        })

        // provide search index data to lunr function / idx
        for (const key in window.store) {
            this.add({
            id: key,
            title: window.store[key].title,
            tags: window.store[key].category,
            content: window.store[key].content
            })
        }
  })

  // Perform the search
  const results = idx.search(query)
  // get the result and build the result list
  displayResults(results, window.store)

  // Replace the title to 'Search Results for <query>' so user know if the search is successful
  document.getElementById('search-title').innerText = 'Search Results for ' + query
}

This is what the search results list looks like when there are results:

<li>
    <h2>
        <a href=".../blog/my-awesome-blog/">
            My Awesome Blog
        </a>
    </h2>
    <p>Welcome to my awesome blog, this is fajarwz...</p>
    <p>Go,Hugo,Blog</p>
</li>

If no results are found, return the message 'No results found'.

<li>
    No results found.
</li>

Here is my own search page with CSS:

That's it! Now we have a search form, a search results page, a search index, and JavaScript for performing the search. Be sure to adjust the code to fit your own Hugo site.

Here is the folder structure inside my Mayhugo theme for this search feature:

the-theme/
├── layouts/
│   ├── partials/
│   │   ├── search-form.html
│   │   ├── search-index.html
│   ├── search/
│   │   ├── list.html
└── static/
    └── js/
        ├── search.js

Conclusions

Finally we have successfully implemented a client-side search feature for our Hugo static website! This is a very useful feature for static sites, as it allows users to quickly search for specific content without having to scroll or click through multiple pages. While static sites are known for their speed, a search feature can still be a valuable addition for improving the user experience.

I hope this tutorial has been helpful in showing you how to implement a search feature for your Hugo static website. If you have any questions or need further assistance, feel free to ask.

Reference

Add search to Hugo static sites with Lunr | victoria.dev

Read Also

Search for your Hugo Website | Hugo

Follow my Twitter @fajarwz or connect with my LinkedIn Fajar Windhu Zulfikar for more content.

Laravel with(): How to Solve the N+1 Problem with Eager Loading Relationships

Fajar Windhu Zulfikar — Sat, 31 Dec 2022 06:50:02 +0000

Eloquent ORM makes it easier to access the database. ORM, or Object-Relational Mapping, is a programming technique for converting data between a Relational Database Management System (RDBMS) and an object-oriented programming language. ORM allows us to access a database using objects rather than writing raw SQL queries.

Laravel also has this feature called Eloquent ORM.

When we use Eloquent ORM in Laravel, we can use the eloquent relationship feature. This allows us to create model relationships for relational database tables in Eloquent ORM.

Laravel's eloquent relationships can be loaded using two methods:

Eager loading
Lazy loading

Project Example

For example we have a blog web. We have two tables named users and posts. users and posts have a one to many relation.

Create Laravel Project

Let's practice this. Create a Laravel project and adjust your .env.

composer create-project laravel/laravel:^9.0 blog-laravel-with-method

Create Posts Migration

Create a migration for posts table .

php artisan make:migration "create posts table"

Write the migration based on the database diagram above.

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->bigInteger('user_id')->unsigned();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
};

Create Post Model

Create Post model first for posts table

php artisan make:model Post

Create Users and Posts Seeder

Create a seeder for both users and posts tables. I will create it inside database/seeders/DatabaseSeeder.php, so here is my DatabaseSeeder.php

<?php

namespace Database\Seeders;

// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\User;
use App\Models\Post;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // Create the User seeder first
        $stepen = User::factory()->create([
            'name' => 'Stepen',
            'email' => 'stepen@test.com',
        ]);
        $peri = User::factory()->create([
            'name' => 'Peri',
            'email' => 'peri@test.com',
        ]);
        $bambang = User::factory()->create([
            'name' => 'Bambang',
            'email' => 'bambang@test.com',
        ]);

        // Then create the Post seeder
        for ($i=0; $i < 30; $i++) { 
            Post::create([
                'user_id' => rand($stepen->id, $bambang->id), // random between stepen's id (1) and bambang's id (3)
                'title' => 'Laravel CRUD Tutorial ' . $i,
                'content' => 'This is the content of Laravel CRUD Tutorial ' . $i,
            ]);
        }
    }
}

Install Laravel Debugbar

To see what query we execute in our Laravel project we need barryvdh/laravel-debugbar.

To install it simply run the following command. It is recommended to use --dev flag so we just install this in development environment only.

composer require barryvdh/laravel-debugbar --dev

Modify Web Route

Let's update the home or / route to our needs

<?php

use Illuminate\Support\Facades\Route;
use App\Models\Post; // include the Post model

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    $posts = Post::all();   // get all posts

    return view('welcome', [
        'posts' => $posts,  // send it to 'welcome' view
    ]);
});

Read also:

How to Fix 'Client Intended to Send Too Large Body' Nginx 413 Error

Create Global Query With Laravel Global Scope

Modify Welcome view

Let's just use the welcome view, modify it to our needs

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

        <style>
            body {
                font-family: 'Nunito', sans-serif;
            }
        </style>
    </head>
    <body>
        <h2>Posts</h2>
        @foreach ($posts as $post)
            <h3>{{ $post->title }}</h3>
            <p>{{ 'By: ' . $post->user->name }}</p>
            <p>{{ $post->content }}</p>
        @endforeach
    </body>
</html>

Lazy Load

Eloquent relationships can be accessed as properties, but the relationship data is not actually loaded until you first access the property. This is called "lazy loading".

When you run the above code, it will return the relationship value without requiring you to write the with() method.

However, when you look at the Debugbar in the "Queries" tab, you will see that we only executed one query to get the entire posts data and N queries to get the user data associated with each post record, where N is the total number of post records we retrieve.

According to the Debugbar, we just executed 31 queries, where 30 of them are duplicated and only 1 is unique. The total duration for running these queries is 29.88ms.

This can cause a performance issue because we don't need to execute that many queries. To fix it, we can use the eager loading approach. This loads the relationship data in a single additional query, rather than one additional query for each relationship.

Eager Load

Eloquent can "eager load" relationships at the time you query the parent model. Eager loading alleviates the "N+1" query problem.

To eager load our user-post relationship we just need to modify Post::all() query and chain it with with() method.

...

Route::get('/', function () {
    $posts = Post::with('user')->get();   // get all posts and eager load the user relation

    return view('welcome', [
        'posts' => $posts,  // send it to 'welcome' view
    ]);
});

...

When we refresh the welcome page and check the "Queries" tab in the Debugbar again, we will see that we now only execute 2 statements. The first is to get all the post records and the second is to get the user data for the owners of the post records we retrieved. The total duration has also dropped to only 8.9ms.

Eager Loading Relationships By Default

If we need to eager load some relationships by default we can add $with variable to our model. With this we don't need to use with() again every time we query the model we need.

Let's update our Post model with $with.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $with = ['user'];

    protected $fillable = [
        'user_id',
        'title',
        'content',
    ];

    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

And then let's just try to get the posts data without with().

...

Route::get('/', function () {
    $posts = Post::all();

    return view('welcome', [
        'posts' => $posts,
    ]);
});

...

And we will get the same result.

If we later need to remove the global relationship from $with for a single query, just add without method to the query

$posts = Post::without('user')->get();

And to override all items within the $with for a single query we can use withOnly method like this.

$posts = Post::withOnly('user')->get();

Conclusions

And that's it! We have successfully implemented eager loading examples. Now we know how to handle queries that need to call their relationships without encountering the "N+1" problem using with() or $with. Eager loading can improve the performance of our application by reducing the number of queries that need to be executed.

A repository for this example case can be found here: fajarwz/blog-laravel-with-method.

Reference

Eloquent: Relationships - Eager Loading - Laravel