If you want to learn about how to use console.log as a professional developer then you have to learn computer property names.

Let's Start

Assume that we have 4 different objects and each one is assigned to a variable. How can we log those objects to see what are they?

const obj1 = {name: 'Joe', age: 21, happy: true}
const obj2 = {name: 'Jane', age: 20, happy: true}
const obj3 = {name: 'Jona', age: 1, happy: false}
const obj4 = {name: 'Jake', age: 2, happy: true}

Common Way

Of course, the first thing that comes into mind is to use pretty console.log :)

console.log(obj1);
console.log(obj2);
console.log(obj3);
console.log(obj4);

Result;

As you can see we could log all variables. If I ask you which of those logs represents a variable named obj2 can you tell me that without looking and remembering the code? Of course not! Because you don't know that.

Better Way

But hey look there is a better way called Computed Property Names and basically, we put all those variables into an object in console.log like as below;

console.log({obj1, obj2, obj3, obj4})

As a result, we have 1 line of code and 1 log that represents the whole data as below.

If I ask you the same question again Which one of those data represents the variable named obj2?

Then you tell me the object which has a name attribute as Jane is the obj2 without requiring to check the code.

Today I'll be writing about how to use Query Scopes efficiently in Laravel projects.

Query Scopes are very useful to encapsulate the logic you want to apply to database queries while using Models.

Let's start with an example and understand it step by step together.

Assume that there is a model called Post and we need to get only active posts. As you know it's simple and we only need to add a query condition to the Post model and get the results we needed. You can see the example below;

$activePosts = Post::where('is_active', '=', true)->get();

However, if we require to get active posts in multiple places that means we need to write the same code in multiple places too. Also, we might need to add some other conditions like getting posts published after a specific date and that means the code is going to be more complex over time.

How about making that much simpler and we can add the query conditions once needed simply by calling them?

Alright! That's possible because we can create simple Query Scope functions in the Post model and use them whenever we need them.

The following example shows how to create those two query scope functions that apply the query conditions we need to filter results.

class Post extends Model {

    // applies active filter condition
    public function scopeActive($query) {
        $query->where('is_active', '=', 1);
    }

    // applies date filter condition
    public function scopePublishedAfterDate($query, $date) {
        $query->where('published_date', '>', $date);
    }
}

Every Query Scope must be a function, starting with a scope keyword, and we need to place the name after the scope keyword.

Let's go back to the place where we needed to get only active posts and call the scope we needed to filter results.

$activePosts = Post::active()->get();

As you might notice the query scope function that we created to filter results to get only active posts from the database was called scopeActive but we used active instead because while calling query scope functions we must use the name defined after the scope keyword.

Now let's go back to the place where we need to get only active posts that are published after a date.

$activePosts = Post::active()->publishedAfterDate('2024-04-01')->get();

And simple that will also work.

That's all for Query Scopes in Laravel, if you need to ask anything just send me a message on Twitter.

Managing forms in web applications can be a complex task, especially when dealing with validation rules, error handling, and form submissions. The React useForm plugin library offers a powerful and elegant solution to simplify form management in React applications. In this tutorial, we will walk through a comprehensive example of using the useForm library to handle form lifecycle events, such as validations, rules, and form submissions. By the end of this tutorial, you will have a solid understanding of how to use the React useForm plugin library to efficiently manage forms in your React applications.

Prerequisites:

• Basic understanding of JavaScript and React

• Familiarity with React functional components and hooks

• Knowledge of form validation and handling in web applications

Getting Started:

To begin, let's install the React useForm plugin library by running the following command:

npm install react-hook-form

Now that we have the library installed, let's dive into a practical example of using the useForm library to manage a form lifecycle.

Example: Create and Update Client Action Items

In this example, we will create a form to create and update client action items. The form will include fields for title, category, description, and target_date. We will use the useForm library to manage form state, handle validations, and submit the form data to an API.

Full Code Example;

import { useForm } from 'react-hook-form';

export default function CreateClientActionItem({item}) {
    const {
        register,
        handleSubmit,
        formState: {
            errors
        }
    } = useForm({
        defaultValues: {
            title: item?.title ?? '',
            category: item?.category ?? '',
            description: item?.description ?? '',
            target_date: item?.target_date ?? '',
        }
    });

    const onSubmit = (data) => {
        let url = '/test/store-url';
        axios.post(url, data).then((res) => {
            if (res.data.status === 'success') {
                alert("Success");
            } else {
                alert("Error");
            }
        }).catch((err) => {
            notifyError("Unknown error occurred while creating action item")
        });
    }

    const onUpdate = (data) => {
        let url = '/test/update-url';
        axios.put(url, data).then((res) => {
            if (res.data.status === 'success') {
                alert("Success");
            } else {
                alert("Error");
            }
        }).catch((err) => {
            notifyError("Unknown error occurred while updating action item")
        });
    }

    const onError = (data) => {
        console.log(data);
    }

    return <form onSubmit={handleSubmit((item == null) ? onSubmit : onUpdate, onError)}>
            <div
                className="flex flex-col gap-[24px] rounded-[5px] w-full">
                <div className="flex flex-col gap-[16px]">
                    <div className="flex flex-col gap-[16px]">
                        <label htmlFor="title">Title</label>
                        <input type="text" {...register('title', {
                            required: "Title is required",
                            minLength: {
                                value: 2,
                                message: "Title must be at least 2 characters"
                            },
                            maxLength: {
                                value: 50,
                                message: 'Title can be maximum 50 characters'
                            }
                        })} name="title" id="title"
                               className="w-full p-[10px] border border-gray-500 rounded-[5px] pl-10 pr-12 f-16-400-g-sans"
                               placeholder="Title"/>
                        {errors.title ?
                            <p className="text-red-500">{errors.title.message}</p> : null}
                    </div>
                    <div className="flex flex-col gap-[16px]">
                        <label htmlFor="category">Category (optional)</label>
                        <input type="text" {...register('category', {
                            minLength: {
                                value: 2,
                                message: "Category must be at least 2 characters"
                            },
                            maxLength: {
                                value: 50,
                                message: 'Category can be maximum 50 characters'
                            }
                        })} name="category" id="category"
                               className="w-full p-[10px] border border-gray-500 rounded-[5px] pl-10 pr-12 f-16-400-g-sans"
                               placeholder="Category"/>
                        {errors.category ?
                            <p className="text-red-500">{errors.category.message}</p> : null}
                    </div>
                    <div className="flex flex-col gap-[16px]">
                        <label htmlFor="description">Description</label>
                        <textarea {...register('description', {
                            required: "Description is required",
                            minLength: {
                                value: 2,
                                message: "Description must be at least 2 characters"
                            },
                        })} name="description" id="description"
                                  className="w-full p-[10px] border border-gray-500 rounded-[5px] pl-10 pr-12 f-16-400-g-sans"
                                  placeholder="Description"/>
                        {errors.description ?
                            <p className="text-red-500">{errors.description.message}</p> : null}
                    </div>
                    <div className="flex flex-col gap-[16px]">
                        <label htmlFor="target_date">Target date (optional)</label>
                        <input type="date" {...register('target_date')} name="target_date"
                               id="target_date"
                               className="w-full p-[10px] border border-gray-500 rounded-[5px] pl-10 pr-12 f-16-400-g-sans"
                               placeholder="Description"/>
                    </div>
                </div>
                <div className="flex flex-row items-center gap-[40px]">
                    <button type="submit" className="primary-button bg-defaultPrimary">{!item ? 'Create action item' : 'Update action item'}</button>
                    <h1 onClick={closeHandler} className="text-defaultPrimary cursor-pointer">Cancel</h1>
                </div>
            </div>
        </form>
}

Code Explanation:

1. Import useForm:

Start by importing the useForm hook from the library:

import { useForm } from 'react-hook-form';

2. Initialize useForm:

In the CreateClientActionItem functional component, initialize the useForm hook and destructure its returned properties:

const {
    register,
    handleSubmit,
    formState: {
        errors
    }
} = useForm({
    defaultValues: {
        title: item?.title ?? '',
        category: item?.category ?? '',
        description: item?.description ?? '',
        target_date: item?.target_date ?? '',
    }
});

The defaultValues option allows you to set initial values for the form fields.

In this example, we use the optional chaining operator “?” and the nullish coalescing operator “??” to set the default values to empty strings if item is not provided.

3. Register form fields:

To register form fields with the useForm hook, use the register function provided by the hook. The register function takes two arguments: the field name and an optional configuration object. The configuration object can include validation rules, such as required, minLength, and maxLength. If a validation rule fails, an error message is provided and stored in the errors object.

For example, registering the title field with validation rules:

<input type="text" {...register('title', {
    required: "Title is required",
    minLength: {
        value: 2,
        message: "Title must be at least 2 characters"
    },
    maxLength: {
        value: 50,
        message: 'Title can be maximum 50 characters'
    }
})} ... />

Similarly, register the category, description, and target_date fields with appropriate validation rules.

4. Handle form submission:

The handleSubmit function is used to manage form submissions. It takes two arguments: a function to be executed on a successful submission and a function to be executed if there are any errors.

In our example, we use the onSubmit function for creating a new action item and the onUpdate function for updating an existing one:

<form onSubmit={handleSubmit((item == null) ? onSubmit : onUpdate, onError)}>

The ternary operator checks if item is null, which indicates a new action item should be created. If item is not null, it means we are updating an existing action item.

- Display error messages:

If there are any validation errors, they are stored in the errors object. To display error messages, check if an error exists for a specific form field and render the error message accordingly:

{errors.title ?
    <p className="text-red-500">{errors.title.message}</p> : null}

In this example, if there is an error for the title field, the error message is displayed in a paragraph element with a text-red-500 class. Similarly, error messages are displayed for other fields such as category and description.

- Form submission logic:

In the onSubmit and onUpdate functions, we use the axios library to send HTTP requests to the API for creating or updating an action item.

The response is checked for the status property to determine if the request was successful.

If successful, we display a success notification, update the item, and close the form. If unsuccessful, we display an error notification:

axios.post(url, data).then((res) => {
    if (res.data.status === 'success') {
        alert('success');
    } else {
        alert('error');
    }
}).catch((err) => {
    notifyError("Unknown error occurred while creating action item")
});

In the onError function, we log the error data to the console. In a real-world scenario, you might want to handle the errors differently, such as by displaying a user-friendly error message.

Conclusion:

In this tutorial, we have explored how to use the React useForm plugin library to handle form lifecycle events, including validations, rules, and form submissions.

By using this powerful library, you can streamline form management in your React applications and build robust, user-friendly forms with ease.

The provided code example demonstrates a practical use case that can be adapted to suit your specific requirements. With this knowledge, you can now confidently tackle form management challenges in your React projects.

Happy coding!

One of the key benefits of using React Hooks is that they allow developers to write cleaner and more concise code. By using Hooks, developers can avoid the need to write lengthy class components and instead use simple functions to manage state and handle other tasks. This can help improve the readability and maintainability of your code.

Another advantage of React Hooks is that they enable developers to reuse logic across different components. With Hooks, developers can extract common logic into reusable functions that can be shared across multiple components. This can help reduce duplication and make it easier to maintain and update your codebase.

Furthermore, React Hooks can make it easier to manage state in your application. With Hooks, developers can use the useState Hook to add state to a function component, and the useReducer Hook to manage complex state transitions. This can help improve the performance and scalability of your application.

In conclusion, React Hooks are a valuable tool for any React developer. They allow developers to write cleaner, more concise code, reuse logic across different components, and manage state more effectively. If you are not already using React Hooks in your development process, we highly recommend learning them and incorporating them into your workflow.

Let's Take A Look Some Very Useful React Hooks

UseEffect

useEffect is a hook that lets you perform side effects in function components. It is called after every render, including the first render. You can use it to fetch data, manipulate the DOM, or subscribe to events.

| Here is an example of useEffect:

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useContext

useContext is a hook that lets you access the React context in a function component. The context is a way to pass data through the component tree without having to pass props down manually at every level.

| Here is an example of useContext:

import React, { useContext } from 'react';

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <ThemedButton theme={theme} />
    </div>
  );
}

function ThemedButton(props) {
  return (
    <button style={{ background: props.theme.background, color: props.theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useRef

useRef is a hook that lets you get a reference to a DOM element in a function component. It is similar to React.createRef and ref in class components.

| Here is an example of useRef:

import React, { useRef } from 'react';

function Example() {
  const inputEl = useRef(null);

  function handleClick() {
    inputEl.current.focus();
  }

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={handleClick}>Focus the input</button>
    </div>
  );
}

useReducer

useReducer is a hook that lets you manage state in a function component. It is similar to redux and is often used when you have complex state logic or when the next state depends on the previous state.

| Here is an example of useReducer:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

useLayoutEffect

useLayoutEffect is a hook that is similar to useEffect, but it fires synchronously after all DOM mutations. It is useful when you need to read or modify the DOM immediately after a render.

| Here is an example of useLayoutEffect:

import React, { useState, useLayoutEffect } from 'react';

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    setWidth(document.querySelector('p').offsetWidth);
  });

  return (
    <>
      <p>The width of this paragraph is: {width}px</p>
    </>
  );
}

useDebugValue

useDebugValue is a hook that lets you display a custom label for a hook in the React DevTools. It is only called in development mode, and it has no effect in production.

| Here is an example of useDebugValue:

import React, { useState, useDebugValue } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  useDebugValue(isOnline ? 'Online' : 'Offline');

  // ...
}

useMemo

useMemo is a hook that lets you optimize the performance of a function component by memorizing the output of an expensive function. It is called on every render, but it only recomputes the memoized value if one of the dependencies has changed.

| Here is an example that shows how useMemo can be used to avoid recalculating the sum of two numbers on every render:

import React, { useMemo } from 'react';

function Example() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  const sum = useMemo(() => a + b, [a, b]);

  return (
    <div>
      <p>The sum of {a} and {b} is {sum}</p>
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

useCallback

useCallback is a hook that lets you optimize the performance of a function component by memoizing the callback function. It is similar to useMemo, but it is used for functions instead of values.

| Here is an example that shows how useCallback can be used to avoid creating a new callback function on every render:

import React, { useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

useImperativeHandle

useImperativeHandle is a hook that lets you customize the instance value that is exposed to parent components when using ref. It is often used to expose methods on a custom component that can be called by the parent.

| Here is an example that shows how useImperativeHandle can be used to expose a focus method on a custom Input component:

import React, { useRef, useImperativeHandle } from 'react';

function Input({ forwardedRef }) {
  const inputRef = useRef();
  useImperativeHandle(forwardedRef, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}

function Parent() {
  const inputRef = useRef();
  const onButtonClick = () => {
    inputRef.current.focus();
  };
  return (
    <div>
      <Input ref={inputRef} />
      <button onClick={onButtonClick}>Focus the input</button>
    </div>
  );
}

Singleton Pattern

Singleton pattern: This design pattern ensures that a class has only one instance and provides a global point of access to it. It can be useful in situations where you want to limit the number of instances of a class, such as when working with database connections or shared resources.

| Here is an example of the singleton pattern in PHP:

class Connection
{
    // store the single instance of the connection
    private static $instance;

    // private constructor to prevent external instantiation
    private function __construct() {}

    // get the single instance of the connection
    public static function getInstance()
    {
        if (!self::$instance) {
            self::$instance = new Connection();
        }

        return self::$instance;
    }
}

// example usage
$connection = Connection::getInstance();

In this example, the Connection class is defined with a private constructor, which prevents it from being instantiated directly. Instead, the getInstance method is used to create and return the single instance of the Connection class. This method uses the self keyword to access the $instance property and check if it has been instantiated. If it has not, a new instance of the Connection class is created and stored in the $instance property. If it has, the existing instance is returned. By using this pattern, we can ensure that only one instance of the Connection class is created, and that all parts of the application can access it through the getInstance method. This can be useful, for example, in situations where you want to limit the number of database connections or shared resources in your application.

Factory Pattern

Factory pattern: This design pattern provides a way to create objects without specifying the exact class to be instantiated. It can be useful in situations where you need to create objects based on user input or configuration settings.

| Here is an example of the factory pattern in PHP:

class ProductFactory
{
    // create a product instance based on the given type
    public static function createProduct($type)
    {
        switch ($type) {
            case 'book':
                return new Book();
                break;
            case 'toy':
                return new Toy();
                break;
            default:
                throw new Exception('Invalid product type.');
        }
    }
}

// example usage
$product1 = ProductFactory::createProduct('book');
$product2 = ProductFactory::createProduct('toy');

In this example, the ProductFactory class defines a createProduct method that accepts a product type as an argument and returns an instance of the corresponding product class. The method uses a switch statement to determine which product class to instantiate based on the given type, and returns the corresponding object. If an invalid product type is provided, an exception is thrown. By using the factory pattern, we can create a flexible and modular way to create objects without specifying the exact class to be instantiated. This can be useful, for example, in situations where you need to create objects based on user input or configuration settings. The factory pattern also allows you to easily add or remove product types without modifying the existing code.

Observer Pattern

Observer pattern: This design pattern defines a one-to-many dependency between objects, such that when one object changes state, all of its dependents are notified and updated automatically. It can be useful in situations where you need to maintain consistent data across multiple objects or components.

| Here is an example of the observer pattern in PHP:

class Observable
{
    // array to store registered observers
    private $observers = [];

    // register an observer
    public function registerObserver($observer)
    {
        $this->observers[] = $observer;
    }

    // notify all registered observers
    public function notifyObservers()
    {
        foreach ($this->observers as $observer) {
            $observer->update();
        }
    }
}

class Observer
{
    // update the observer
    public function update()
    {
        // ...
    }
}

// example usage
$observable = new Observable();
$observer1 = new Observer();
$observer2 = new Observer();

$observable->registerObserver($observer1);
$observable->registerObserver($observer2);

$observable→notifyObservers();

In this example, the Observable class defines an registerObserver method that allows other objects to register as observers. The notifyObservers method is used to notify all registered observers when the state of the Observable object changes. The Observer class defines an update method that is called when the Observable object is notified. By using the observer pattern, we can define a one-to-many dependency between objects, such that when the state of the Observable object changes, all of its registered observers are notified and updated automatically. This can be useful, for example, in situations where you need to maintain consistent data across multiple objects or components. The observer pattern also allows you to add or remove observers dynamically, without modifying the existing code.

Decorator Pattern

Decorator pattern: This design pattern allows you to add new behavior to an existing object dynamically, without modifying its class. It can be useful in situations where you want to extend the functionality of an existing object without changing its implementation.

| Here is an example of the decorator pattern in PHP:

// This is the base component that can be decorated
abstract class Window
{
  abstract public function draw();
}

// This is the abstract decorator class that contains a reference to the window being decorated
abstract class WindowDecorator extends Window
{
  protected $window;

  public function __construct(Window $window)
  {
    $this->window = $window;
  }

  public function draw()
  {
    $this->window->draw();
  }
}

// This is a concrete decorator that adds a border to the window
class BorderDecorator extends WindowDecorator
{
  public function draw()
  {
    $this->drawBorder();
    $this->window->draw();
  }

  private function drawBorder()
  {
    // Draws a border around the window
  }
}

// This is a concrete decorator that adds a scroll bar to the window
class ScrollDecorator extends WindowDecorator
{
  public function draw()
  {
    $this->drawScroll();
    $this->window->draw();
  }

  private function drawScroll()
  {
    // Draws a scroll bar on the window
  }
}

To use the decorator pattern, you would create a Window object and then decorate it with one or more decorators, like this:

// Create a simple window
$window = new Window();

// Decorate the window with a border and scroll bar
$decoratedWindow = new BorderDecorator(new ScrollDecorator($window));

// Draw the decorated window
$decoratedWindow→draw();

In this example, the $decoratedWindow object has both a border and a scroll bar, because it has been decorated with both the BorderDecorator and ScrollDecorator classes.

In addition to these design patterns, it is also important to have a strong understanding of object-oriented programming principles and how to apply them in your PHP projects. This includes concepts such as encapsulation, inheritance, polymorphism, and abstractions, as well as best practices for organizing and organizing your code.

Single Responsibility Principle

The Single Responsibility Principle states that a class should have only one reason to change. In PHP, this can be achieved by ensuring that each class has a clear and well-defined purpose, and that it only contains code that is directly related to that purpose. For example, a User class might contain methods for storing and retrieving user information, but it should not include code for sending email notifications or handling payment transactions.

| Here is an example of how to apply the Single Responsibility Principle in PHP:

<?php

// A class that represents a user
class User
{
  private $name;
  private $email;

  public function __construct($name, $email)
  {
    $this->name = $name;
    $this->email = $email;
  }

  // A method that returns the user's name
  public function getName()
  {
    return $this->name;
  }

  // A method that returns the user's email
  public function getEmail()
  {
    return $this->email;
  }
}

// A class that represents a user repository
class UserRepository
{
  // A method that saves a user to the database
  public function save(User $user)
  {
    // Save the user to the database
  }
}

// A class that sends email notifications
class EmailNotifier
{
  // A method that sends an email to a user
  public function sendEmail(User $user, $message)
  {
    // Send the email to the user
  }
}

// Create a new user and save it to the database
$user = new User("John Doe", "john.doe@example.com");
$repository = new UserRepository();
$repository->save($user);

// Send an email notification to the user
$notifier = new EmailNotifier();
$notifier->sendEmail($user, "Welcome to our website!");

In this example, the User class has a single responsibility, which is to represent a user and provide methods for getting their name and email. The UserRepository class has a single responsibility, which is to save users to the database. And the EmailNotifier class has a single responsibility, which is to send email notifications to users. By following the Single Responsibility Principle, these classes are easier to maintain and extend, and their code is more readable and organized.

Open-Closed Principle

The Open-Closed Principle states that a class should be open for extension but closed for modification. In PHP, this can be achieved by designing classes that have clear, well-defined interfaces and that use inheritance and abstraction to allow for flexibility and extensibility. For example, a Shape class might define an area() method that calculates the area of a shape, and subclasses such as Circle and Rectangle could override this method to provide their own implementation.

| Here is an example of how to apply the Open-Closed Principle in PHP:

<?php

// An abstract shape class that defines a common interface for all shapes
abstract class Shape
{
  // An abstract method that calculates the area of a shape
  abstract public function area();
}

// A class that represents a circle
class Circle extends Shape
{
  private $radius;

  public function __construct($radius)
  {
    $this->radius = $radius;
  }

  // An implementation of the area() method that calculates the area of a circle
  public function area()
  {
    return 3.14 * $this->radius * $this->radius;
  }
}

// A class that represents a rectangle
class Rectangle extends Shape
{
  private $width;
  private $height;

  public function __construct($width, $height)
  {
    $this->width = $width;
    $this->height = $height;
  }

  // An implementation of the area() method that calculates the area of a rectangle
  public function area()
  {
    return $this->width * $this->height;
  }
}

// A class that calculates the total area of a collection of shapes
class AreaCalculator
{
  private $shapes;

  public function __construct($shapes)
  {
    $this->shapes = $shapes;
  }

  // A method that calculates the total area of all shapes
  public function getTotalArea()
  {
    $totalArea = 0;
    foreach ($this->shapes as $shape) {
      $totalArea += $shape->area();
    }
    return $totalArea;
  }
}

// Create some shapes and calculate their total area
$circle = new Circle(5);
$rectangle = new Rectangle(10, 5);
$calculator = new AreaCalculator([$circle, $rectangle]);
$totalArea = $calculator->getTotalArea();

// Output the total area
echo "Total area: " . $totalArea . "\n";

In this example, the Shape class is an abstract class that defines a common interface for all shapes. The Circle and Rectangle classes extend Shape and provide their own implementation of the area() method. The AreaCalculator class calculates the total area of a collection of shapes, without knowing or caring about the specific types of shapes that are passed to it. This allows the AreaCalculator to be easily extended to support additional shape types, without modifying its existing code. By following the Open-Closed Principle, the code is more flexible and maintainable.

Liskov Substitution Principle

The Liskov Substitution Principle states that derived classes should be substitutable for their base classes. In PHP, this can be achieved by ensuring that subclasses conform to the same contracts and behave in the same way as their base classes. For example, if a Car class defines a start() method that starts the car's engine, a Truck class that extends Car should also have a start() method that starts the truck's engine in the same way.

| Here is an example of how to apply the Liskov Substitution Principle in PHP:

<?php

// An abstract vehicle class that defines a common interface for all vehicles
abstract class Vehicle
{
  // An abstract method that starts the vehicle
  abstract public function start();
}

// A class that represents a car
class Car extends Vehicle
{
  // An implementation of the start() method that starts the car's engine
  public function start()
  {
    // Start the car's engine
  }
}

// A class that represents a truck
class Truck extends Vehicle
{
  // An implementation of the start() method that starts the truck's engine
  public function start()
  {
    // Start the truck's engine
  }
}

// A class that controls a vehicle
class VehicleController
{
  private $vehicle;

  public function __construct(Vehicle $vehicle)
  {
    $this->vehicle = $vehicle;
  }

  // A method that starts the vehicle
  public function startVehicle()
  {
    $this->vehicle->start();
  }
}

// Create a car and a truck, and control them
$car = new Car();
$truck = new Truck();
$carController = new VehicleController($car);
$truckController = new VehicleController($truck);
$carController->startVehicle();
$truckController→startVehicle();

In this example, the Vehicle class is an abstract class that defines a common interface for all vehicles. The Car and Truck classes extend Vehicle and provide their own implementation of the start() method. The VehicleController class controls a vehicle without knowing or caring about the specific type of vehicle that it is controlling. This allows the VehicleController to be used with any type of vehicle that extends Vehicle, and ensures that all subclasses of Vehicle are substitutable for their base class. By following the Liskov Substitution Principle, the code is more flexible and maintainable.

Interface Segregation Principle

The Interface Segregation Principle states that clients should not be forced to depend on methods that they do not use. In PHP, this can be achieved by defining separate interfaces for different groups of related methods, and having classes implement only the interfaces that are relevant to their functionality. For example, a PaymentProcessor class might implement an AuthorizePayment interface that defines methods for authorizing payment transactions, and a RefundProcessor class might implement a ProcessRefund interface that defines methods for processing refunds.

| Here is an example of how to apply the Interface Segregation Principle in PHP:

<?php

// An interface that defines methods for managing user accounts
interface UserAccountManager
{
  // A method that creates a new user account
  public function createAccount(string $username, string $password);

  // A method that updates a user's password
  public function updatePassword(string $username, string $password);

  // A method that deletes a user account
  public function deleteAccount(string $username);
}

// An interface that defines methods for managing user profiles
interface UserProfileManager
{
  // A method that gets a user's profile
  public function getProfile(string $username);

  // A method that updates a user's profile
  public function updateProfile(string $username, array $profile);
}

// An interface that defines methods for managing user payments
interface UserPaymentManager
{
  // A method that gets a user's payment information
  public function getPaymentInfo(string $username);

  // A method that updates a user's payment information
  public function updatePaymentInfo(string $username, array $paymentInfo);
}

// A class that manages user accounts, profiles, and payments
class UserManager implements UserAccountManager, UserProfileManager, UserPaymentManager
{
  // An implementation of the createAccount() method
  public function createAccount(string $username, string $password)
  {
    // Create the user account
  }

  // An implementation of the updatePassword() method
  public function updatePassword(string $username, string $password)
  {
    // Update the user's password
  }

  // An implementation of the deleteAccount() method
  public function deleteAccount(string $username)
  {
    // Delete the user account
  }

  // An implementation of the getProfile() method
  public function getProfile(string $username)
  {
    // Get the user's profile
  }

  // An implementation of the updateProfile() method
  public function updateProfile(string $username, array $profile)
  {
    // Update the user's profile
  }

  // An implementation of the getPaymentInfo() method
  public function getPaymentInfo(string $username)
  {
    // Get the user's payment information
  }

  // An implementation of the updatePaymentInfo() method
  public function updatePaymentInfo(string $username, array $paymentInfo)
  {
    // Update the user's payment information
  }
}

// Create a new user manager and use its methods
$userManager = new UserManager();
$userManager->createAccount("john.doe", "password123");
$userManager->updateProfile("john.doe", ["name" => "John Doe"]);
$userManager->updatePaymentInfo("john.doe", ["card_number" => "1234567890"]);

In this example, the UserManager class implements three separate interfaces for managing user accounts, profiles, and payments. Each interface defines a group of related methods, and the UserManager class only implements the methods that are relevant to its functionality. This allows the UserManager to be easily unit tested and extended, and it also makes the code more readable and organized. By following the Interface Segregation Principle, the code is more flexible and maintainable.

Dependency Inversion Principle

The Dependency Inversion Principle states that high-level modules should not depend on low-level modules, but rather both should depend on abstractions. In PHP, this can be achieved by using dependency injection to provide an object with its dependencies, rather than creating the dependencies directly within the object. For example, a UserService class might accept a DatabaseConnection object in its constructor, rather than creating the connection itself. This allows the UserService to be easily unit tested, and also allows for greater flexibility if the underlying implementation of the DatabaseConnection class changes.

| Here is an example of how to apply the Dependency Inversion Principle in PHP:

<?php

// An interface that defines methods for connecting to a database
interface DatabaseConnection
{
  // A method that opens a connection to the database
  public function connect();

  // A method that closes the connection to the database
  public function disconnect();
}

// A class that provides a MySQL database connection
class MySQLDatabaseConnection implements DatabaseConnection
{
  // An implementation of the connect() method
  public function connect()
  {
    // Connect to the MySQL database
  }

  // An implementation of the disconnect() method
  public function disconnect()
  {
    // Close the MySQL database connection
  }
}

// A class that provides a PostgreSQL database connection
class PostgreSQLDatabaseConnection implements DatabaseConnection
{
  // An implementation of the connect() method
  public function connect()
  {
    // Connect to the PostgreSQL database
  }

  // An implementation of the disconnect() method
  public function disconnect()
  {
    // Close the PostgreSQL database connection
  }
}

// A class that uses a database connection to query the database
class QueryExecutor
{
  private $databaseConnection;

  public function __construct(DatabaseConnection $databaseConnection)
  {
    $this->databaseConnection = $databaseConnection;
  }

  // A method that queries the database and returns the result
  public function query(string $query)
  {
    // Connect to the database
    $this->databaseConnection->connect();

    // Execute the query and get the result
    $result = // Query the database

    // Close the database connection
    $this->databaseConnection->disconnect();

    return $result;
  }
}

// Create a query executor with a MySQL database connection
$mysqlConnection = new MySQLDatabaseConnection();
$queryExecutor = new QueryExecutor($mysqlConnection);

// Query the database using the MySQL connection
$result = $queryExecutor->query("SELECT * FROM users");

// Create a query executor with a PostgreSQL database connection
$postgresConnection = new PostgreSQLDatabaseConnection();
$queryExecutor = new QueryExecutor($postgresConnection);

// Query the database using the PostgreSQL connection
$result = $queryExecutor->query("SELECT * FROM users");

In this example, the QueryExecutor class depends on an abstract DatabaseConnection interface, rather than a concrete MySQLDatabaseConnection or PostgreSQLDatabaseConnection class. This allows the QueryExecutor to be easily unit tested and extended, and it also allows for greater flexibility if the underlying implementation of the DatabaseConnection class changes. By following the Dependency Inversion Principle, the code is more flexible and maintainable.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "json"
  const [json, setJson] = useState({
    name: 'John Doe',
    age: 42,
    address: {
      street: '123 Main St.',
      city: 'Boston',
      state: 'MA'
    }
  });

  // This function updates the "json" state by changing the "name" property
  const updateName = () => {
    setJson({
      ...json, // copy the current properties of "json"
      name: 'Jane Doe' // update the "name" property
    });
  };

  return (
    <div>
      <p>Name: {json.name}</p>
      <button onClick={updateName}>Update Name</button>
    </div>
  );
}

In this example, the Example component has a state variable called json that is initialized with a JSON object containing some data. The component renders the name property of the json object, and has a button that, when clicked, updates the name property of the json object.

To update the json state, the code uses a common pattern in React: it creates a new json object by copying the current properties of the existing json object, and then updating the name property with a new value. This allows us to keep the existing state and only change the properties that we want to update.

Overall, this code shows how to use React's state mechanism to manage data in a JSON object and update it in response to user actions. This is a valuable skill for any front-end developer building interactive user interfaces with React.

Hello reader, if you are a web developer like me or wanted to become one then you always have to deal with JavaScript there is no other chance.

Today I want to make an introduction to arrays in JavaScript. So, maybe at least you can find the things that you still don't know about arrays.

What are the Arrays?

Let's make it simple for everyone,

Basically, you have a variable that can store multiple data inside and makes a list of data. That's what actually array is :)

That's a widely used data structure technique in computer science and almost every programming language has arrays. (Not all of them!)

What are the Arrays in JavaScript?

Arrays in JavaScript are a little bit different than arrays in other programming languages. If you check the definition you can understand the difference because they are a kind of special type objects in JavaScript.

Let's make it more simple to understand;

Normally arrays store only one kind of data type but multiple of them inside. For example, you can put multiple strings, integers, booleans, or objects into the array but only one type in one array.

But in JavaScript, you can put any kind of element into the array at once. (That's the difference).

How to create an Array in JavaScript?

There are multiple ways to create an array but you know what let's learn the generally used simple one because you don't need other ways to create an array unless you're developing a Framework or big libraries.

Just declare a variable, open square bracket, and ta-da you have a beautiful empty array like in the example below.

const myArray = [];

Let's make some fun :)

I am a little bit of a nerd and always want to check the type of the variables I have, let's check the type of this variable.

console.log(typeof myArray);

If you run this code probably you remember something like "arrays in javascript is a special type of objects" because you have a message like "object".

How to create an Array with multiple elements?

We actually created an array before but let's create another one and put 6 different data types into it.

const myArray2 = [1, 'string', true, {}, [], function hello() {console.log('hello')}]

If you check the array we created above, we put 6 different data types (integer, string, boolean, object, array, and function).

Did you read function? Be careful because you can put a function inside of the array in JavaScript.

How to print specific elements of the Array?

In order to print specific elements of the Array, you have to know the location of the element.

Remember that arrays are zero-based indexed data structures.

Let's make it simple;

• The first element of the array is in the location 0.

• The second element of the array is in the location 1.

• The third element of the array is in the location 2.

Did you get the point? We always start to count the element's location from 0 and that's the reason that arrays are known as zero-based indexed data structures.

Simple example;

Print the fourth element of the array.

console.log(myArray2[3]);

If you check the image above, you can see that an empty object is printed because in our array we have the following elements.

 [1, 'string', true, {}, [], function hello() {console.log('hello')}]

// index 0 = 1
// index 1 = 'string'
// index 2 = true
--> index 3 = {}
// index 4 = []
// index 5 = function hello() {console.log('hello')}

That's all for array's introduction :)

Also, you can watch this tutorial on youtube;

Don't forget to follow me on;

• Youtube

ReactJS is a great library and If you combine it with TailwindCSS they become the best couple in the programming world :)

Today I will write about how to create a modal using ReactJS and style it with TailwindCSS.

Caution: ReactJS version ^18.2.0 is used in this tutorial.

Create A New React Project with TailwindCSS

To create a react project on your computer please make sure that NPM is already installed.

If you're ready, let's run the following command on your terminal or command prompt to create a react project called my-project.

npx create-react-app my-project

Change your current directory into the project folder by using the following command.

cd my-project

Since you're now in the project folder let's run the following command to include TailwindCSS with other dependencies into the project.

npm install -D tailwindcss postcss autoprefixer

Once this command is completed and the TailwindCSS is installed then run the following command to create configuration files for TailwindCSS and PostCSS.

npx tailwindcss init -p

If you've done everything correctly then you'll have the same following project structure.

At this point, we have to make some configuration changes in the tailwind.config.js file to tell which files will have TailwindCSS classes on them.

Let's add the following configuration to the file.

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Also we need to add TailwindCSS directives into the src/index.css file to include TailwindCSS.

@tailwind base;
@tailwind components;
@tailwind utilities;

We're almost done with TailwindCSS integration, So just run the following command to run the application.

npm run start

If everything goes right then you'll see some messages in terminal like below.

If you go to one of the URLs provided to you (your URLs can be different than mine) then you'll see the following screen.

Congratulations 👏👏

Create Modal Component

Our application is running and we are ready to create a lovely modal component.

So, let's create a file named modal.jsx in src folder.

After you created the file add the following piece of code into this file to convert it into the simple react component.

export function Modal({children}) {
    return (
        <div className="relative z-50">
            <div className="fixed inset-0 bg-black/10" aria-hidden="true"/>

            <div className="fixed inset-0 flex items-center justify-center p-4">
                <div className="flex min-h-full items-center justify-center">
                    {children}
                </div>
            </div>
        </div>
    );
}

Anywhere in our application, we can inject this component by calling it with the tag of Modal.

Let's add the following code into App.js to show the modal component whenever we click Open Modal button.

import {Modal} from "./modal";
import {useState} from "react";

function App() {
    const [open, setOpen] = useState(false);

    return (
        <div className="relative min-h-screen">
            <div className="flex flex-col items-center my-24">
                <button onClick={() => setOpen(!open)} className="py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-bold text-lg rounded-full">Open Modal</button>
            </div>

            {open ? <Modal>
                <div className="flex flex-col gap-2 bg-white px-4 pb-4 rounded-lg">
                    <h1 className="text-lg text-black mt-2 pr-48">This is my modal title</h1>
                    <hr/>
                    <div className="flex flex-col gap-2">
                        <label htmlFor="email">Please enter your email address.</label>
                        <input id="email" type="email" className="py-2 px-4 border border-gray-200 rounded-lg" placeholder="E.g: test@gmail.com"/>
                    </div>
                    <hr/>
                    <div className="flex flex-row gap-2">
                        <button onClick={() => setOpen(!open)} className="flex-1 py-2 px-4 bg-gray-500 hover:bg-gray-600 text-white font-bold text-lg rounded-full">Close</button>
                        <button onClick={() => setOpen(!open)} className="flex-1 py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white font-bold text-lg rounded-full">Save</button>
                    </div>
                </div>
            </Modal> : null}
        </div>
    );
}

export default App;

Let's understand how does actually it works;

• First of all, we created a state open and we surrounded it with useState hook. So we can change the state of the open by calling setState method.

• We created a button and named it as Open Modal, whenever it's clicked we change the state of open to true.

• Whenever the state of the open becomes true, then we inject Modal component into our page.

Step 1

Let's run the following artisan command to create a controller called FileUploadController. This controller will be used along the tutorial to show the file upload page to the users and store the uploaded files on the server.

php artisan make:controller FileUploadController

Step 2

Since we created our controller in step 1, in this step we will create a route in web.php to show the page to the users.

    Route::get('/file-upload-test', [FileUploadController::class, 'index'])->name('file-upload.index');

Step 3

In step 2 we created a route with the URL of file-upload-test which calls the index method in FileUploadController to show a page to the users.

But we didn't create this method yet. So, let's create this index method in the FileUploadController which will render a blade file that we named as file-upload.blade.php to show the file upload page.

<?php

namespace App\Http\Controllers;

use Illuminate\Contracts\Foundation\Application;
use Illuminate\Contracts\View\Factory;
use Illuminate\Contracts\View\View;

class FileUploadController extends Controller
{
    public function index(): Factory|View|Application
    {
        return view('file-upload');
    }
}

Step 4

In step 3 we created the index method in FileUploadController which renders a blade file called file-upload.blade.php to show the file upload page.

But we didn't create the file-upload.blade.php file yet. Let's create this file in the resources/views folder and put the following HTML into the file.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .flex {
            display: flex;
        }

        .flex-col {
            flex-direction: column;
        }

        .mt-2 {
                margin-top: 20px;
        }
    </style>
</head>
<body>
    <form action="{{ route('file-upload.store') }}" enctype="multipart/form-data" method="POST">
        @csrf
        <div class="flex flex-col shadow">
            <label for="file_selector">Select a file to upload</label>
            <input type="file" id="file_selector" name="file">
        </div>

        <button type="submit" class="mt-2">Upload File</button>
    </form>
</body>
</html>

Once this blade file is rendered we see the following page. (If you visit file-upload-test URL now you will get an error, move to the step 5)

Basically, we have a simple form with a label, an input field with the file type, and a button used to submit the form.

Let's explore the following form element a little bit to understand what's going on.

    <form action="{{ route('file-upload.store') }}" enctype="multipart/form-data" method="POST">
        @csrf
        <div class="flex flex-col shadow">
            <label for="file_selector">Select a file to upload</label>
            <input type="file" id="file_selector" name="uploaded_file">
        </div>

        <button type="submit" class="mt-2">Upload File</button>
    </form>

• We need an endpoint on the form element to send the submitted data to some URL in our app. So, we put action={{ route('file-upload.store') }} which means that whenever the form is submitted the data will be sent to this route (we didn't create it yet).

• Since we are aiming to upload a file we put enctype="multipart/form-data" otherwise the file is not submitted to the back-end.

• The method=POST attribute is specified in the form because we are going to send a POST request to the endpoint.

• In order to pass CSRF validation on Laravel we call ** @csrf** blade directive in the form element which creates a hidden CSRF token field.

Step 5

In step 4 we created an HTML form in the file-upload.blade.php file and now we are going to create a route named file-upload.store in the web.php file.

    Route::get('/file-upload-test', [FileUploadController::class, 'index'])->name('file-upload.index');
    Route::post('/file-upload', [FileUploadController::class, 'store'])->name('file-upload.store');

Step 6

In step 5 we created a route file-upload.store in web.php and we know that the route will call store method in the FileUploadController. So, let's create this method in the controller to upload the file.

    public function store(Request $request)
    {
        if ($request->hasFile('uploaded_file')) {
            $uploadedFile = $request->file('uploaded_file'); // the file uploaded
            $extension = $request->file('uploaded_file')->getClientOriginalExtension(); //jpg, jpeg, png
            $fileName = Str::uuid() . '.' . $extension; // de3f31db-85f8-4b9b-a3b9-a4b45b551322.jpg
            Storage::disk('public')->putFileAs('uploaded_files', $uploadedFile, $fileName);
        }

        return redirect()->back();
    }

Let's explore how this method work.

• First of all we check if the request has a file in the uploaded_file parameter.

• If there is a file then we store it in the uploadedFile variable.

• Then we get the uploaded file extension using $request->file('uploaded_file')->getClientOriginalExtension();

• We need a name to store the file in our file system. So, the Str::uuid() helper is used to create a universal unique identifier for the file name and appended the file extension to the end of it.

• There are three different disk options on Laravel as default local, public, and s3. Since we want to show the uploaded file in our application later we use public disk.

• In the last part, we upload the file into the uploaded_files folder in the public disk (if uploaded_files folder does not exist, it will be automatically created) using Storage::disk helper in Laravel.

This is how actually we upload a file in the Laravel Framework.

If you like to upload a file but also want to save the path into the database, then basically you just need to save the fileName variable as the path and later on, you can use this path to show the file.

Example;

<img src="{{ asset('storage/uploaded_files/7818704d-088b-4236-b3fb-dcc15bf57cc6.jpeg') }}" alt="">

Note: Since we use the public disk of the framework we should run the following artisan command to make sure the uploaded_files folder in the storage folder of the application is linked to the public as a symbolic link. Otherwise, the uploaded files will not be publicly available.

php artisan storage:link

If you already reading this article that means you know what is Axios and you couldn't figure out how to upload files with it. Don't worry it's so simple and I am going to show you an example as well.

Let's assume we have created a simple Form component which contains a simple input element with the type of file and a button to submit the form. Of course, we will not directly submit the form instead we are going to use Axios to handle this and the page will not be redirected to some URL.

import React, {useState} from 'react';
import axios from 'axios';

const Form = () => {
    // state to store the selected file.
    const [selectedFile, setSelectedFile] = useState(null);

    const handleSubmit = async (event) => {
        event.preventDefault();

        // Create a FormData object
        const formData = new FormData();

        // Append file to the formData object here
        formData.append("selectedFile", selectedFile);

        try {
            // We will send formData object as a data to the API URL here.
            const response = await axios.post("/api/upload/file", formData, {
                headers: {"Content-Type": "multipart/form-data"}
            }).then((res) => {
                alert("File Uploaded Successfully");
            }).catch((error) => {
                alert("Error")
            });
        } catch (error) {
            console.log(error)
        }
    }

    const handleFileSelect = (event) => {
        // we only get the selected file from input element's event
        setSelectedFile(event.target.files[0])
    }

    return (
        <form onSubmit={handleSubmit}>
            <input type="file" onChange={handleFileSelect}/>
            <input type="submit" value="Upload File"/>
        </form>
    )
};

export default Form;

Let's break the above solution into multiple steps

• First, we created a state called selectedFile using useState() hook and we use this state to store the currently selected file.

• Secondly, we set handleFileSelect function to the onChange handler of the input element, thus whenever we select a file then handleFileSelect function will be invoked and it sets the selected file into the selectedFile state.

• Third, we set handleSubmit function as the onSubmit handler of the form element, and whenever we press Upload File button the code we write inside handleSubmit function is executed.

• Fourth, in the handleSubmit function we created FormData object and append the file in the selectedFile state to this object.

• Fifth, as we going to send a file to the server we tell Axios that we need this FromData object to be encoded, otherwise the server will not catch the file. In order to do that, we set headers: { "Content-Type": "multipart/form-data" } to the config of the Axios object.

Caution!!! What about if we want to send PUT request with Axios, does the file will be uploaded? The answer is no!

If you want to send a PUT request then you have to send a POST request but specify the actual method you want to send is PUT request.

formData.append("_method", "PUT"); //this only works in Laravel Framework, didn't tried on other Frameworks.

Up to here, we have done with Client side and now we will write a simple code to catch the file on the Back-End and upload it to the our file storage. I am using Laravel Framework on the back-end and I'll show you the example with it.

if ($request->file('selectedFile')) {
$uploadedFile = $request->file('selectedFile');

  if ($uploadedFile) {
  $filename = Str::uuid() . '.' . $uploadedFile->getClientOriginalExtension();
  Storage::disk('public')->putFileAs('uploadedFiles/', $uploadedFile, $filename);
  }
}

The above code, checks if the request has a file in the selectedFile variable, and if the file exists, it uploads the file into the uploadedFiles folder in the public storage of the application.

I am not going to talk about what is Eloquent ORM, but I would like to just indicate that, it makes your life easier to deal with databases.

Below you can find some simple usages of eloquent;

$post = Post::find(1)
// That will run the following query in the database
// select * from posts where id = 1
// You see, it's so easy to use and powerful because we don't need to write a query anymore

If you are using relational databases such as MySQL, MariaDB, PostgreSQL and etc, it becomes more powerful because you don't need to write complex join queries anymore.

For example, we want to get a specific post from the posts table but also we want to GET the author of the post as well. The following example, clearly explains that.

class Post extends Model {
 ....
 // that will assume that we have author_id column in the posts table
 public function author(): BelongsTo
{ 
   return $this->belongsTo(related: Author::class)
 }
}

 // Since the author relation is defined in Post model, we can load it using following code
$post = Post::with('author')->find(1);
// Now, the post data will have the author data from database
// This is called Eager loading and it is very important learn about it.
// Link: https://laravel.com/docs/9.x/eloquent-relationships#eager-loading

Since we used eager loading to get author data with the post, all columns in the author data is loaded. This is not a problem with a small amount of data, but if we get millions of posts, each post will have an author and probably that will run a little bit slower. So, instead of getting all columns in author data, let's get some specific columns.

$post = Post::with('author:id, name')->find(1);
// Now, the post data will have the author data from database but only specific columns id and name
// This will make your it more faster to load data

In the example above, we have used :id, name, so, only those columns are going to be loaded from the database.

That's all for this tutorial :)

If you like to get more content similar to that, please follow me on Twitter and on my youtube channel.

Youtube: https://www.youtube.com/channel/UCH-xplaz-cmloIUkYspcEhQ

Whenever I start a new project either for my job or for my side projects, the first thing that I do is to create a new file called helpers.php. I use that file to create the custom helper functions that I will be used for along the project.

For example; I really don't like to find the name of the current route in blade files following a hard way like as below;

{{ Illuminate\Support\Facades\Route::currentRouteName() }}

Instead, I prefer to create a simple function that I can use anywhere in the project to get the current route name in a shorter syntax like as below;

{{ getCurrentRouteName() }} // In the blade files,also can be used in .php files as well.

How to make sure that this simple function can work anywhere?

Since Laravel as a default uses composer to manage the dependencies, we have a powerful tool under our hands and we can tell the composer to autoload any file we want and it allows us to use it in the entire project.

To do so; first of all, we have to create the file anywhere we want, as a default, I always put it under the app folder.

• app/helpers.php

After I am sure that, the file exists, I create my own custom helper functions in the file as shown below;

// function_exists method is initiated to check;
// If there is any function existed with the name of getCurrentRouteName,
// If not, this function will be added otherwise existed one will be used.
// The aim is to protect existing functions to be overwritten
if (!function_exists('getCurrentRouteName')) {
    function getCurrentRouteName()
    {
        return Illuminate\Support\Facades\Route::currentRouteName();
    }
}

At this point, I have to tell the composer to discover and autoload this file by adding it to the composer.json file as shown below otherwise my function will not be callable.

If you don't know, composer.json is a file in that you can define the project dependencies and install them using a simple command composer install or update them with composer update.

{
    "require": { ... },
    "require-dev": { ... },
    "autoload": {
        "psr-4": { ... },
        "files": [
            "app/helpers.php" //this is the place I tell composer to autoload file
        ]
    },
    ...
}

I created a file, add it to the composer.json file, so is it going to work? Unfortunately No 😥

Because I have to run a simple composer command to load all files again in the entire project just for one time.

composer dump-autoload

I am afraid to ask, but is it going to work? Yes! Congratulations, you've made it 😇

So, now I can use getCurrentRouteName anywhere I want as I showed in the example above.

{{ getCurrentRouteName() }} // In the blade files,also can be used in .php files as well.

This is how I create custom helper functions in my Laravel projects.