DEV Community: Jeffrey Kwade

Building a RESTful API with Laravel: Best Practices and Implementation Tips.

Jeffrey Kwade — Mon, 05 Jun 2023 12:25:33 +0000

In today's interconnected world, building robust and efficient APIs has become a crucial aspect of web development. Laravel, one of the most popular PHP frameworks, provides developers with a powerful toolkit for creating RESTful APIs. With its elegant syntax, extensive features, and active community, Laravel simplifies the process of designing and implementing APIs, allowing developers to focus on delivering high-quality services.

In this blog post, we will delve into the fascinating world of building RESTful APIs with Laravel. We will explore the best practices, implementation tips, and essential considerations for creating well-designed and scalable APIs. Whether you are a seasoned Laravel developer or just getting started with API development, this guide will equip you with the knowledge and techniques to build robust APIs with ease.

Throughout this article, we will cover various aspects of API development using Laravel, including defining routes, handling requests and responses, implementing authentication and authorization mechanisms, validating input data, handling errors gracefully, and implementing pagination and versioning strategies. We will also explore some of Laravel's built-in features and packages specifically tailored for API development, such as Laravel Sanctum for API authentication and Laravel Passport for OAuth2 integration.

By the end of this article, you will have a solid understanding of the best practices for building RESTful APIs with Laravel and be ready to embark on your own API development journey. So, let's dive in and discover how Laravel empowers developers to create efficient and reliable APIs that meet the needs of modern web applications.

When constructing a RESTful API in Laravel, developers are confronted with a crucial decision: choosing between Laravel Sanctum and Laravel Passport.

Let's look at both Laravel tools and decide which to choose.

Laravel Sanctum is a powerful authentication package provided by the Laravel framework. It offers a lightweight and simple solution for implementing token-based authentication in your Laravel applications. With Sanctum, you can easily secure your API routes and control access to your resources.

Sanctum uses API tokens for authentication, allowing clients to authenticate and access protected endpoints. It supports multiple authentication methods, including token-based authentication and session-based authentication. This flexibility makes it suitable for various types of applications, whether you're building a single-page application (SPA), a mobile app, or a traditional web application.

One of the key features of Laravel Sanctum is its ability to generate long-lived and short-lived API tokens. Long-lived tokens are suitable for scenarios where you want persistent authentication, while short-lived tokens are ideal for temporary authentication, such as for mobile apps or SPA authentication.

Sanctum also provides CSRF protection out of the box, securing your application against cross-site request forgery attacks. It integrates seamlessly with Laravel's existing authentication system, making it easy to authenticate users and authorize their access to different parts of your API.

With Laravel Sanctum, you can focus on building your API endpoints and leave the authentication and security concerns to the package. It simplifies the process of implementing authentication in your Laravel applications, saving you time and effort.

While Laravel Passport is a comprehensive OAuth2 server implementation provided by the Laravel framework. It allows developers to easily add API authentication to their Laravel applications, enabling secure communication between clients and servers.

Passport provides a complete set of OAuth2 endpoints, allowing you to issue access tokens, refresh tokens, and revoke tokens. It follows the OAuth2 specification, which is widely used for authenticating and authorizing API requests.

One of the key features of Laravel Passport is its simplicity and ease of use. It integrates seamlessly with Laravel's existing authentication system, making it straightforward to authenticate users and protect your API routes. With Passport, you can easily generate access tokens for your clients and use them to authenticate API requests.

Passport supports various OAuth2 grant types, such as personal access tokens, password grant, authorization code grant, and implicit grant. This flexibility allows you to choose the most suitable authentication flow for your application, depending on the requirements and security considerations.

Another advantage of Laravel Passport is its ability to generate API documentation automatically. Passport generates API documentation based on your API endpoints and authentication configuration, saving you time and effort in documenting your API for client developers.

Additionally, Laravel Passport provides convenient features like token revocation and token scopes. Token revocation allows you to invalidate access tokens, while token scopes enable you to define fine-grained access permissions for your API resources.

The big decision lies ahead now that we have explored both tools: Passport or Sanctum? Let's consult the official Laravel documentation for their recommendations.

Before getting started, you may wish to determine if your application would be better served by Laravel Passport or Laravel Sanctum. If your application absolutely needs to support OAuth2, then you should use Laravel Passport.

However, if you are attempting to authenticate a single-page application, mobile application, or issue API tokens, you should use Laravel Sanctum. Laravel Sanctum does not support OAuth2; however, it provides a much simpler API authentication development experience.

Now, let's explore the following best practices and helpful tips.

Versioning

Versioning is an essential aspect of building RESTful APIs in Laravel to ensure compatibility, maintainability, and smooth evolution of your API over time. Laravel provides several strategies for API versioning, each with its advantages and considerations. Let's explore some common versioning strategies used in Laravel RESTful APIs:

URL Versioning: With URL-based versioning, you include the version number in the API endpoint URL. For example:



Route::middleware('auth:sanctum')->prefix('v1')->group(function(){

});

This approach allows you to have different versions of the API accessible via distinct URLs. It provides clear separation between versions and makes it easy to manage and maintain different API versions. However, it can result in longer URLs and may require additional routing configuration.

Folders Versioning: Versioning also allows developers to properly structure their Laravel folders like Controller, Resources, Request and Routes.

From the image above, you can see that I have implemented versioning in my Laravel project by creating a separate folder named 'V1' within the 'Controllers' and 'Resources' directories. This naming convention helps me organize and distinguish the files belonging to the first version of my API.

By adopting this structure, it becomes clear that all the files within the 'V1' folder are specific to the initial version of my API. This approach simplifies the management of different API versions, allowing me to make updates or introduce new features without affecting the existing functionality.

With this versioning setup, I can easily navigate and maintain my codebase, ensuring that the changes made in subsequent versions do not conflict with the initial implementation. It also helps me adhere to the principles of backward compatibility, enabling clients to continue using the API without disruption while transitioning to newer versions at their own pace.

By following this versioning strategy, I can effectively organize and evolve my Laravel API, making it easier to manage and provide a consistent experience for API consumers across different versions.

Data validation

In Laravel, developers have two main approaches to validate incoming data: validating data directly within the controller or using a form request file.

Validating Data within the Controller: In this approach, data validation is performed directly within the controller method that handles the request. Developers define the validation rules and apply them to the incoming data using Laravel's validation system. Here's an example:



public function store(Request $request)
{
    $validatedData = $request->validate([
        'name' => 'required|max:255',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:8',
    ]);

    // Proceed with storing the data or performing further actions
}

In the above example, the validate method is called on the $request object, and the validation rules are defined as an array. If any of the validation rules fail, Laravel automatically redirects back to the form with the validation errors.

Using Form Request Files: Laravel provides a convenient way to handle data validation by using form request files. Form requests are custom classes that extend Laravel's Illuminate\Foundation\Http\FormRequest class. These classes encapsulate the validation rules for a specific request and provide a dedicated place to define and manage the validation logic. Here's an example:



namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreUserRequest extends FormRequest
{
    public function rules()
    {
        return [
            'name' => 'required|max:255',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:8',
        ];
    }
}

In the above example, the rules method is overridden to define the validation rules. To use the form request, you simply type-hint it in your controller method:



public function store(StoreUserRequest $request)
{
    // The request has already been validated at this point
    // Proceed with storing the data or performing further actions
}

Always remember to set the authorize function to true, this will allow the rules function to take effect.



class StoreCommentRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array<string, mixed>
     */
    public function rules()
    {
        return [
            //
        ];
    }
}

By returning true, it indicates that any authenticated user is authorized to proceed with the requested action. This means that the authorization check is bypassed, and all users are considered authorized. This approach is suitable when you want to skip the authorization step and allow all authenticated users to perform the action.

Both approaches serve the purpose of validating incoming data in Laravel. The choice between them depends on the complexity and reusability of the validation logic. Form request files provide a more structured and reusable way to handle validation, while validating within the controller can be more straightforward for simple cases.

Resources

In Laravel, resources are a powerful feature that allows you to define a consistent and structured way to transform and format your API responses. Resources provide a convenient and flexible approach to transform your models and data into a well-defined JSON representation.

To create a resource in Laravel, you can use the make:resource Artisan command. For example, to generate a UserResource that represents a user model, you can run the following command:

php artisan make:resource UserResource

This command will create a new UserResource class in the app/Http/Resources directory. Inside the resource class, you can define how the user model should be transformed and formatted when it's returned as a response.

A basic resource class typically includes a toArray method, where you specify the attributes and relationships you want to include in the transformed output. Here's an example of a UserResource:



<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource
{
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email,
            'created_at' => $this->created_at,
            'updated_at' => $this->updated_at,
        ];
    }
}

In this example, the UserResource includes the id, name, email, created_at, and updated_at attributes of the user model.

Once you have defined a resource, you can use it in your API controllers to transform your model instances before returning them as responses. Here's an example of how you can use the UserResource:



use App\Http\Resources\UserResource;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function show(Request $request, $id)
    {
        $user = User::findOrFail($id);

        return new UserResource($user);
    }
}

When return multiple users simply call the UserResource with a collection. here's an example:



use App\Http\Resources\UserResource;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function index()
    {
        $user = User::all();

        return UserResource::collection($user);
    }
}

In this example, when the show method is called, it retrieves a user model by its ID and returns a transformed response using the UserResource. The user model will be automatically transformed based on the toArray method defined in the resource.

Resources provide a convenient way to customize the structure and formatting of your API responses. They can handle relationships, include additional data, and apply conditional formatting based on your specific requirements. Resources help to keep your API responses consistent and maintainable, especially when dealing with complex data structures and relationships.

Disabling data wrapping

By default, a resource is automatically wrapped in a data key once the JSON serialization is done.



{
    "data": [
        {
            "id": 1,
            "name": "John Doe",
            "email": "john@doe.com"
        },
        {
            "id": 2,
            "name": "Jane Doe",
            "email": "jane@doe.com"
        }
    ]
}

This wrapping is useful for including additional keys, like links and meta, when using pagination. However, it may only be necessary for some projects.

To disable it, add JsonResource::withoutWrapping() into the boot function of your AppServiceProvider of your Laravel application.



/**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JsonResource::withoutWrapping();
    }

Pagination

Pagination in Laravel API allows you to divide large result sets into smaller, more manageable chunks called "pages." This helps improve performance by reducing the amount of data transferred over the network and provides a better user experience when dealing with large collections of data.

Laravel provides built-in pagination support that you can easily incorporate into your API endpoints. Here's how you can use pagination in your Laravel API:



public function index(){
        return PostResource::collection(Post::query()->paginate(3));
    }

And you'll get this as a response:



{
    "data": [
        {
            "id": 21,
            "name": "John Doe",
            "email": "john@doe.com"
        },
        {
            "id": 22,
            "name": "Jane Doe",
            "email": "jane@doe.com"
        },
        // ...
    ],
    "links": {
        "first": "http://example.com/pagination?page=1",
        "last": "http://example.com/pagination?page=8",
        "prev": "http://example.com/pagination?page=2",
        "next": "http://example.com/pagination?page=4"
    },
    "meta": {
        "current_page": 3,
        "from": 21,
        "last_page": 8,
        "path": "http://example.com/pagination",
        "per_page": 10,
        "to": 30,
        "total": 86
    }
}

Conditional Attributes

Conditional attributes in Laravel API resources allow you to include or exclude certain attributes based on specific conditions. This can be useful when you want to customize the response data based on different scenarios or user roles.

To implement conditional attributes in Laravel API resources, you can make use of the when() method provided by Laravel's API resource class. The when() method accepts a condition and a callback, and the callback will be executed only if the condition evaluates to true. Within the callback, you can define the attributes that should be included based on the condition.

Here's an example of how you can use conditional attributes in a Laravel API resource:



<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource
{
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->when(auth()->user()->isAdmin(), $this->email),
            'phone' => $this->when(auth()->user()->isPremium(), $this->phone),
        ];
    }
}

In the example above, the UserResource class includes conditional attributes based on the user's role.

The email attribute will only be included if the authenticated user is an admin.
The phone attribute will only be included if the authenticated user is a premium user.

In conclusion, building RESTful APIs with Laravel not only empowers developers to create efficient and reliable APIs but also enhances the overall web development process by providing robust tools, best practices, and a supportive community, making it an excellent choice for API development in the modern web landscape. If you found this article helpful and want to stay updated with more insightful content, be sure to follow me on Github, LinkedIN, Twitter for regular updates, tips, and discussions. Let's connect and continue the conversation!

The Battle of With vs Load in Eloquent: Which One Wins?

Jeffrey Kwade — Tue, 02 May 2023 14:14:56 +0000

In the realm of Laravel's Eloquent ORM, developers often find themselves faced with a crucial decision: should they employ the "with" method or the "load" method? These two methods, although similar in purpose, have subtle differences that can significantly impact the performance and behavior of database queries. It's a battle that has intrigued developers for years, as they strive to find the optimal approach for fetching related data in their applications. In this article, we delve deep into the battle of "With vs Load" in Eloquent, aiming to uncover the strengths, weaknesses, and best use cases for each method. So, fasten your seatbelts as we embark on this journey to determine which one emerges as the ultimate winner in the quest for efficient and elegant data retrieval in Laravel.

Understanding Eloquent relationships?

Eloquent relationships are a fundamental feature of the Laravel framework's Eloquent ORM (Object-Relational Mapping) system. These relationships define the associations between different database tables/entities and enable you to work with related data seamlessly. With Eloquent relationships, you can effortlessly retrieve, manipulate, and perform common database operations on associated records.

By establishing relationships between your database tables, you can create powerful connections that mirror real-world associations, such as one-to-one, one-to-many, and many-to-many relationships. Eloquent provides a fluent and expressive syntax to define and work with these relationships, making it easier to navigate and manipulate your application's data.

Whether you need to fetch a user's posts, retrieve all comments on a blog article, or retrieve a product's categories, Eloquent relationships provide a clean and intuitive way to query and work with related data.

Exploring `With()` eloquent method.

The with() method in Laravel is used to eager load relationships when querying a model. By eager loading relationships, you can retrieve the related models along with the main model in a more efficient way, reducing the number of database queries.

"Eager" refers to the concept of associating related models in a single query instead of using multiple queries. When using eager loading, you fetch the main set of data and also preload the related models associated with that data in a single database query, rather than executing additional queries for each related model.

This approach is beneficial in situations where you have a collection of items and need to access the related models for each item. By eager loading the related models, you can optimize performance by reducing the number of queries required to fetch the associated data.

Without eager loading, you would need to execute a separate query for each item in the initial set to retrieve its related models. This can lead to the "N+1" problem, where the number of queries becomes proportional to the number of items in the set.

Here are some key points to understand about the with() method:

The with() method is called on the query builder instance, typically when retrieving models from the database.
When you use the with() method, Laravel will automatically fetch the related models and include them in the query result.
It uses separate queries to load the related models, based on the relationships defined in your models.
The related models are then associated with the main model using their defined relationships.

Unveiling the `load()` Method.

The load() method in Laravel is used to load relationships on a model that has already been retrieved from the database. It allows you to load specific relationships dynamically after the initial retrieval.

Here are some key points to understand about the load() method:

The load() method is called on an instance of a model.
When you use the load() method, Laravel will fetch the related models and associate them with the main model.
It uses separate queries to load the related models, similar to eager loading with with(), but it applies to an already retrieved model.
The load() method allows you to load relationships on-demand, based on your specific needs.
It gives you flexibility in choosing which relationships to load, depending on the context of your application.

The Battle of `with()` vs `load()`:

Applying Conditions: Both with() and load() methods in Eloquent allow you to apply conditions to the eager loading of relationships.

With with(), you can apply conditions by passing an array of key-value pairs, where the key represents the relationship name and the value represents the conditions to be applied.

For example:

$users = User::with(['posts' => function ($query) {
    $query->where('published', true);
}])->get();

In the example above, the with() method is used to eager load the posts relationship for the User model, but only load the posts that are published.

Similarly, with load(), you can also apply conditions by chaining the where method on the relationship.

For example:

$user = User::find(1);
$user->load(['posts' => function ($query) {
    $query->where('published', true);
}]);

In this example, the load() method is used to load the posts relationship for a specific user, but only load the published posts.

Both with() and load() methods provide flexibility to apply conditions when eager loading relationships in Laravel's Eloquent ORM.

Usage Context: The with() method in Laravel is used on the query builder instance, typically when retrieving models from the database. When you use the with() method, Laravel automatically fetches the related models and includes them in the query result.

On the other hand, the load() method is called on an "instance" of a model. With the load() method, you can fetch the related models and associate them with the main model. Unlike eager loading, the load() method allows you to load relationships on-demand, based on your specific needs. It provides flexibility in choosing which relationships to load, depending on the context of your application.

A key difference between with() and load() lies in how and when the related models are fetched. With with(), the related models are fetched in the initial query, while with load(), the related models are fetched separately as needed.

Using the load() method can be advantageous when you want to control the loading of relationships dynamically, based on runtime conditions or specific user actions. It allows you to minimize unnecessary queries and optimize performance by loading only the relationships that are necessary in a given context.

Multiple Relationships:

with(): With with(), you can eager load multiple relationships using an array or a comma-separated list of relationship names. This allows you to specify and load multiple relationships efficiently in a single query.
Example:

$users = User::with(['posts', 'comments'])->get();

load():With load(), you can load multiple relationships individually by calling the load() method multiple times on the model instance. This allows you to load specific relationships on a per-instance basis as needed.
Example:

$user = User::find(1);
$user->load('posts');
$user->load('comments');

Eager Loading:

with(): The with() method performs eager loading of relationships, which means it retrieves the related data along with the main query in a single database call. This helps reduce the number of database queries and enhances performance, especially when dealing with large datasets or complex relationships.

load(): The load() method performs lazy loading of relationships, which means it retrieves the related data on-demand when accessed for the first time. This approach may result in additional database queries if multiple relationships are loaded separately.

Winner

In conclusion, the battle of "With vs Load" in Laravel's Eloquent ORM ultimately declares you, the developer building the application, as the ultimate winner. The with() method shines when you need to eagerly load relationships during the initial retrieval of models, optimizing performance by reducing queries and eliminating the "N+1" problem. On the other hand, the load() method empowers you with the flexibility to load relationships on-demand, allowing you to dynamically fetch related models based on specific runtime conditions or user actions.

The choice between with() and load() depends entirely on your application's unique requirements and usage context. If you already know in advance which relationships you need to fetch, with() becomes an excellent choice for optimizing database queries. However, if you seek greater control over relationship loading based on specific scenarios, the load() method proves invaluable, allowing you to fetch related models precisely when needed.

As you harness the power of Laravel's Eloquent ORM, understanding the distinctions and strengths of each method empowers you to make informed decisions, leading to efficient and elegant data retrieval in your Laravel applications. So, embrace your role as the winner and leverage the capabilities of with() and load() to create exceptional applications that deliver optimal performance and meet your specific needs.

Database Optimization Techniques for Laravel Applications.

Jeffrey Kwade — Wed, 12 Apr 2023 14:12:23 +0000

Optimizing database performance is an essential aspect of building robust web applications.

There are several ways to optimize a database, some of which include Indexing, Proper schema design, Data normalization, Query optimization, Partitioning, Compression, and Proper hardware selection. In this blog post, I will focus on database caching.

In this article, we'll explore how to optimize the performance of your database-driven Laravel application using caching. Caching is a powerful technique that can significantly reduce the number of queries needed to retrieve data, resulting in faster response times and improved user experience.

Laravel offers several caching mechanisms, including file caching, database caching, and Redis caching. Each mechanism has its own strengths and weaknesses, and the choice of which to use will depend on your application's specific needs and requirements.

To implement caching in your Laravel application, you can use the built-in caching functions and cache drivers provided by Laravel. You can also use third-party packages and libraries for more advanced caching functionality.

However, caching also has its potential drawbacks, such as increased memory usage and the need for cache invalidation. To mitigate these issues, it is important to use a consistent naming convention for cache keys and to group related data using cache tags.

To measure the effectiveness of caching in your application, you can use benchmarking and profiling tools to analyze your application's performance before and after implementing caching.

By following these best practices for implementing caching in your Laravel application, you can improve its overall performance and provide a better user experience for your users.

By default, Laravel is configured to use the file cache driver, which stores the serialized, cached objects on the server's filesystem. For larger applications, it is recommended that you use a more robust driver such as Memcached or Redis. You may even configure multiple cache configurations for the same driver. I'm going to be using the default cache driver in this article.

In this example, we have a restaurant application that allows users to place orders and make table reservations. The application heavily relies on database transactions, which can result in slow performance and reduced user experience if not optimized. One effective way to optimize the performance of the application is by implementing database caching.

Caching can help reduce the number of database queries needed to retrieve data and improve application responsiveness. In our restaurant application, we can cache the cart items that users add to their orders and reservations. By caching the cart items, we can reduce the number of queries needed to retrieve the items from the database and improve application performance.

To implement caching in our restaurant application, we can leverage Laravel's caching mechanism. We can use Laravel's built-in caching functions and cache drivers to store the cart items in a cache store. We can also use Laravel's observer to delete cached data when the state of the cart items changes. For example, when a user adds new items to their cart or performs CRUD operations on the cart model, the observer can automatically invalidate the cache store and ensure that the latest data is retrieved from the database.

Additionally, we can use cache tags to group related data and improve cache invalidation. By assigning tags to our cached data, we can easily invalidate related data when necessary and avoid clearing the entire cache store.

To measure the effectiveness of our caching strategy in the restaurant application, we can use benchmarking and profiling tools like Clockwork. Clockwork is a free and open-source tool that can help us analyze the performance of our application before and after implementing caching.

We can use Clockwork to track the number of database queries executed, the time taken to execute each query, and the memory used by the application. This information can help us identify any performance bottlenecks and optimize our caching strategy for maximum performance.
To get started, we need to install Clockwork in our Laravel project via Composer. You can do this by running the following command in your terminal:

composer require --dev itsgoingd/clockwork

Now download the browser extension of Clockwork. Let's dive in!

class CartController extends Controller
{
    //
    public function index(){
        return view('frontend.cart', [
            'carts' => Cache::remember('cart', 60, function () {
                return Cart::where('user_id', auth()->user()->id())->get();
            })
        ]);
    }
}

Let me explain the code above, this code block is a method in a Laravel controller that is used to display a user's shopping cart on the frontend of a web application. The index() method retrieves the cart items from the database using the Cart model and then stores the retrieved data in the cache for 60 seconds using the Cache::remember() method.

The Cache::remember() method takes three parameters: the key for the cached data, the time-to-live (TTL) in minutes, and a closure that retrieves the data to be cached. In this case, the key is 'cart', the TTL is 60 minutes, and the closure returns the cart items from the database using the Cart::where() query builder method.

Once the cart items have been retrieved and cached, they are passed to the frontend.cart view using the view() helper function. The cached cart items are then accessed in the view using the $carts variable, which contains the cached data.

Now let's create an observer for the cart model by using php artisan make:observer CartObserver --model=Cart.

Laravel will then generate a new PHP file with method resource and we'll use this observer to clear our cached data whenever our Cart model changes state.

<?php

namespace App\Observers;

use App\Models\Cart;
use Illuminate\Support\Facades\Cache;

class CartObserver
{
    /**
     * Handle the Cart "created" event.
     *
     * @param  \App\Models\Cart  $cart
     * @return void
     */
    public function created(Cart $cart)
    {
        //
        Cache::forget('cart');
    }

    /**
     * Handle the Cart "updated" event.
     *
     * @param  \App\Models\Cart  $cart
     * @return void
     */
    public function updated(Cart $cart)
    {
        //
        Cache::forget('cart');
    }

    /**
     * Handle the Cart "deleted" event.
     *
     * @param  \App\Models\Cart  $cart
     * @return void
     */
    public function deleted(Cart $cart)
    {
        //
        Cache::forget('cart');
    }

    /**
     * Handle the Cart "restored" event.
     *
     * @param  \App\Models\Cart  $cart
     * @return void
     */
    public function restored(Cart $cart)
    {
        //
    }

    /**
     * Handle the Cart "force deleted" event.
     *
     * @param  \App\Models\Cart  $cart
     * @return void
     */
    public function forceDeleted(Cart $cart)
    {
        //
        Cache::forget('cart');
    }
}

Now, let's use Clockwork to compare the performance before and after implementing caching. This will help us determine the impact of caching on our application's performance.

Before caching:

After caching:

Before implementing caching, our application made nine database queries in seventeen milliseconds. After implementing caching, we observed a significant improvement in performance, as our application made only eight queries in just eight milliseconds. The difference here is not only in the time recorded but also in the number of queries made.

By caching frequently accessed data like cart items, we were able to reduce the number of queries needed to retrieve data from the database. This resulted in faster response times and improved overall performance. Imagine the impact of implementing caching on other frequently accessed data in our application - it can be mind-blowing!

Caching is a powerful technique that can significantly improve the performance of database-driven applications. By reducing the number of database queries needed to retrieve data, caching can improve application responsiveness and user experience. It is important to choose the right caching strategy based on your application's specific needs and requirements to achieve the best results.

Thanks for reading! I hope this article has been helpful in understanding the benefits of database caching and how to implement it in Laravel. If you have any questions or feedback, feel free to reach out to me on twitter or Github. Don't forget to follow me for more articles and updates.

Testing Applications In Laravel.

Jeffrey Kwade — Sun, 09 Apr 2023 00:29:23 +0000

## Exploring Uncommon Error Messages When Running Tests in Laravel

Hello developers,

Welcome to my first episode in the "Testing Applications in Laravel" series. In this series, I will discuss different topics related to testing Laravel applications. Today, I will be discussing some rare errors that you might encounter while running tests in Laravel.

When it comes to testing, encountering errors is inevitable. It can be frustrating, and it's common to feel like screaming at your computer. However, with a little knowledge and understanding, you can quickly fix these errors and make your tests pass.

Today we shall discuss Error: Test code or tested code did not (only) close its own output buffers.

The error message Error: Test code or tested code did not (only) close its own output buffers is a common issue in PHPUnit tests when output buffering is used. Output buffering is a feature in PHP that allows you to capture the output of a script and manipulate it before it is sent to the browser.

When PHPUnit tests are run, they capture any output from the test code and compare it with the expected output. If there is any output left in the buffer after the test is complete, it can cause this error.

A junior developer reached out to me seeking assistance with the 'Error: Test code or tested code did not (only) close its own output buffers' issue. She had tried several methods, but none seemed to work. It brought back memories from when I first encountered this error, and I remember how frustrating it was to solve. Unfortunately, most articles related to this error are outdated or not clearly explained, which can make it challenging for junior developers to understand and resolve the issue.

The issue with this error is that it can be difficult to diagnose because it doesn't always output a clear error message. In many cases, the console will generate a more specific error message that can help us pinpoint the root cause of the issue. This is why it's important to pay close attention to any error messages that are generated by your application and use them as a starting point for troubleshooting.

So, to solve this error, we need to retrieve the output buffer levels using ob_get_level(). This allows us to check whether there are any open output buffers that haven't been closed. We then retrieve the contents of the output buffer using ob_get_contents() and clear the buffer using ob_end_clean().

It's important to note that many solutions online advise using ob_start() at the beginning of the test and ob_end_clean() at the end. However, this doesn't always work for complex test cases.

Now, let's move on to the coding part and see how we can implement this solution.

<?php

namespace Tests\Unit\V1\Admin\Vehicle;

use App\Http\Livewire\Admin\Vehicle\Add;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Foundation\Testing\WithoutMiddleware;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Livewire\Livewire;
use Tests\TestCase;

class VehicleTest extends TestCase
{
    use RefreshDatabase, WithoutMiddleware;



    public function test_create_new_vehicle_entry_with_file_upload()
    {

        ob_start();
        Storage::fake('avatars');

        $user = User::factory()->create();
        $this->actingAs($user);
        Auth::login($user);

        $file = UploadedFile::fake()->image('avatar.jpg');

        Livewire::test(Add::class)
                ->set([
                    'name' => 'Toyota',
                    'reg_num' => 'GD-123-12',
                    'vin_num' => 'kajsy',
                    'status' => true,
                    'home_away' => true,
                    'image' => $file,
                    'transmission' => 'automatic',
                    'price' => '1000',
                    'fuel' => 'petrol',
                    'mileage' => 1000
                ])
                ->call('create')
                ->assertSet('image', $file->name)
                ->assertHasNoErrors(['name', 'reg_num']);
                 Storage::disk('avatars')->assertExists($file->hashName());
                $this->assertAuthenticatedAs($user);
                $this->assertTrue(Auth::check());
                $this->assertDatabaseHas('vehicles', [
                    'name' => 'Toyota',
                    'reg_num' => 'GD-123-12',
                    'vin_num' => 'kajsy',
                    'serviced' => null,
                    'status' => true,
                    'home_away' => true,
                    'transmission' => 'automatic',
                    'price' => 1000,
                    'fuel' => 'petrol',
                ]);
                ob_get_contents();
                ob_end_clean();
    }
}

In the code block above, we are writing a test to add a new vehicle record to the database. Now I have intentionally added code blocks to specifically throw Error: Test code or tested code did not (only) close its own output buffers, which is `assertSet('image', $file).

Let's take a look a the console when we run this test despite including ob_start() and ob_end_clean().

`
There was 1 risky test:

1) Tests\Unit\V1\Admin\Vehicle\VehicleTest::test_create_new_vehicle_entry_with_file_upload
Test code or tested code did not (only) close its own output buffers

F:\projects\Laravel\live2\tests\Unit\V1\Admin\Vehicle\VehicleTest.php:21

FAILURES!
Tests: 1, Assertions: 1, Failures: 1, Risky: 1.
`

The error message still isn't clearly stated, now I'm going to refactor the code and run the test.

`
public function test_create_new_vehicle_entry_with_file_upload()
{

    while (ob_get_level() > 0) {
        ob_end_clean();
    }
    Storage::fake('avatars');

    $user = User::factory()->create();
    $this->actingAs($user);
    Auth::login($user);

    $file = UploadedFile::fake()->image('avatar.jpg');

    Livewire::test(Add::class)
            ->set([
                'name' => 'Toyota',
                'reg_num' => 'GD-123-12',
                'vin_num' => 'kajsy',
                'status' => true,
                'home_away' => true,
                'image' => $file,
                'transmission' => 'automatic',
                'price' => '1000',
                'fuel' => 'petrol',
                'mileage' => 1000
            ])
            ->call('create')
            ->assertSet('image', $file->name)
            ->assertHasNoErrors(['name', 'reg_num']);
            Storage::disk('avatars')->assertExists($file);
            $this->assertAuthenticatedAs($user);
            $this->assertTrue(Auth::check());
            $this->assertDatabaseHas('vehicles', [
                'name' => 'Toyota',
                'reg_num' => 'GD-123-12',
                'vin_num' => 'kajsy',
                'serviced' => null,
                'status' => true,
                'home_away' => true,
                'transmission' => 'automatic',
                'price' => 1000,
                'fuel' => 'petrol',
            ]);
            ob_get_contents();
            ob_end_clean();
}

I have replaced ob_start() with ob_get_level() in a conditional statement that'll trigger ob_end_clean() when it surpasses 0. Let's take a look at the error message.

`
PS F:\projects\Laravel\live2> ./vendor/bin/phpunit --filter=VehicleTest
PHPUnit 10.0.11 by Sebastian Bergmann and contributors.

Runtime: PHP 8.2.0
Configuration: F:\projects\Laravel\live2\phpunit.xml

F 1 / 1 (100%)

Time: 00:01.956, Memory: 42.00 MB

There was 1 failure:

1) Tests\Unit\V1\Admin\Vehicle\VehicleTest::test_create_new_vehicle_entry_with_file_upload
Failed asserting that two strings are equal.
--- Expected
+++ Actual
@@ @@
-'avatar.jpg'
+'livewire-file:RxzKXRUzs3bLTN9IHbWBFtHgfTLRb4-metaYXZhdGFyLmpwZw==--size=695.jpg'

F:\projects\Laravel\live2\vendor\livewire\livewire\src\Testing\Concerns\MakesAssertions.php:22
F:\projects\Laravel\live2\tests\Unit\V1\Admin\Vehicle\VehicleTest.php:50
F:\projects\Laravel\live2\vendor\laravel\framework\src\Illuminate\Foundation\Testing\TestCase.php:173

FAILURES!
Tests: 1, Assertions: 1, Failures: 1.
`

Now we get a clear error message that will allow us to properly Debug our code.

Now that we have a clear understanding of how to handle the Error: Test code or tested code did not (only) close its own output buffers issue, we'll be diving deeper into the topic of debugging in our next episode. We'll cover some essential tools and techniques that every developer should have in their toolkit to troubleshoot issues quickly and effectively. Stay tuned!

Be sure to follow me on twitter, github, showwcase at @rebelnii and subscribe to my YouTube

How to build a custom eloquent builder class in Laravel.

Jeffrey Kwade — Wed, 05 Apr 2023 02:38:39 +0000

In Laravel, Eloquent is the default ORM (Object-Relational Mapping) that provides an elegant and easy way to interact with the database. An Eloquent builder is a query builder that provides a convenient, fluent interface to create and run database queries.

When you create a new instance of an Eloquent model, you can use its query builder methods to create and run queries. For example, you can use the "where" method to specify conditions for the query, the "orderBy" method to order the results, and the get method to retrieve the results.

In addition to the basic query builder methods, the Eloquent builder also provides a number of advanced features, such as eager loading of related models, lazy loading of relationships, and support for polymorphic relationships. Overall, the Eloquent builder is a powerful tool that makes it easy to work with databases in Laravel.

Let's dive into the code! In this example, we have a model called Bookings, where a user can make a reservation to rent out a company's vehicles. The goal is to fetch a user's reservation records and allow the user to filter the records based on whether the reservation was cancelled, if the user picked up the reserved vehicle, and a general search based on the name on the reservation or the email used for the reservation. To achieve this, we will create our first eloquent builder and improve upon it as we go along.

Booking::query()->where('user_id', $this->user_id)
    ->when($this->cancelled != null, function($query){
        $query->where('cancelled', filter_var($this->cancelled, FILTER_VALIDATE_BOOLEAN));
    })
    ->when($this->picked_up != null, function($query){
        $query->where('confirm_pick', filter_var($this->picked_up, FILTER_VALIDATE_BOOLEAN));
    })
    ->when($this->search != '', function($query){
        $query->where('name', "LIKE", "%{$this->search}%")
                ->orWhere('email', 'LIKE', "%{$this->search}%");
    })->paginate(5)

Let me explain the code above.

We begin the query builder by calling the model Booking and query method Booking::query(), this is how we start query builders in Laravel.
Then we add the where method to add constraints which implies that we are looking for bookings where the user_id matches the current user's id.
Next, when($this->cancelled != null, function($query){...}) is a conditional statement using the when() method. If the $cancelled property of the current class is not null, it will execute the function passed as the second argument. Inside the function, $query represents the query builder instance. Here, we're adding another filter to the query builder where cancelled column should be equal to the boolean value of $this->cancelled property.
Similarly, when($this->picked_up != null, function($query){...}) adds a filter to the query builder based on the $picked_up property, and when($this->search != '', function($query){...}) adds a filter based on the $search property.

5.Finally, the paginate(5) method is used to paginate the results and limit the number of results per page to 5.

So, this code generates a query to fetch the bookings where the user_id is equal to the current user's user_id, and then applies additional filters based on the values of $cancelled, $picked_up, and $search, before paginating the results.

Now that we understand what the code means, let's clean up our code. Writing clean code has many benefits like:

Readability: Clean code is easier to read and understand, which helps other developers on the team to quickly grasp the code and make modifications if needed.
Maintainability: Clean code is easier to maintain and update, which saves time and effort in the long run.
Collaboration: Clean code promotes collaboration among developers as it is easier to understand and modify. This means that multiple developers can work on the same codebase without stepping on each other's toes.
Debugging: Clean code makes debugging easier since it is easier to identify where errors or bugs may be located.
Scalability: Clean code is more scalable since it is easier to add new features or functionality without introducing bugs or breaking existing code.
Efficiency: Clean code is more efficient since it requires fewer resources to execute and runs faster, which can lead to improved performance and user experience.

We are going to implements the scope approach to clean up the initial form of our code.

In Laravel, a scope query is a reusable query constraint that can be applied to a model. It allows you to define a specific set of constraints for a query and reuse it in different parts of your application.

You can define a scope query method in a model by prefixing its name with "scope".

<?php

namespace App\Models;

use App\Builders\BookingsBuilder;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Booking extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'email', 'booking_date', 'pickup_date', 'return_date', 'confirm_pick', 'user_id', 'vehicle_id', 'total_price', 'num_days'];


    public function scopeCancelled($query, $cancelled)
    {
        return $query->when($cancelled != null, function($q) use($cancelled){
            $q->where('cancelled', filter_var($cancelled, FILTER_VALIDATE_BOOLEAN));
        });
    }

    public function scopePickedUp($query, $pickedUp)
    {
        return $query->when($pickedUp != null, function($q) use($pickedUp){
            $q->where('confirm_pick', filter_var($pickedUp, FILTER_VALIDATE_BOOLEAN));
        });
    }

    public function scopeSearch($query, $search)
    {
        return $query->when($search != null, function($q) use($search){
            $q->where('name', 'like', '%'.$search.'%')
                    ->orWhere('email', 'like', '%'.$search.'%');
        });
    }
}

The code above achieves the same goal as the original query builder, but with the added benefit of creating reusable methods that can be called on the model from anywhere in our application. This means we can avoid duplicating our code and have a more organized and efficient way of handling our queries.

Let's take a look at what our current code looks like.

public function render()
    {
        return view('livewire.frontend.user-bookings', [
            'bookings' => Booking::query()->where('user_id', $this->user_id)
                ->Cancelled( $this->cancelled)
                ->PickedUp( $this->picked_up)
                ->Search( $this->search)
                ->paginate(5)
        ]);
    }

It's much cleaner and more readable than its initial form. However, as you can see, our model class now has a lot of methods, which can make it messy and harder to maintain. To take it a step further, let's build a custom Eloquent builder class.

When using Laravel's Eloquent ORM, it's common to define scopes on models to encapsulate commonly used query logic. This makes it easier to maintain and reuse queries across different parts of your application. However, as your application grows and you add more and more scopes to your models, it can become cluttered and difficult to manage.

A solution to this problem is to use a custom Eloquent builder class. This class is responsible for building queries based on the defined scopes and filters, instead of putting all the logic in the model. This approach can help keep your models clean and focused on their main responsibilities, while also providing a more modular and testable codebase. By separating the query building logic from the model, you can also make it easier to reuse the queries across different models and even different projects.

First, create a new class that extends Laravel's base Illuminate\Database\Eloquent\Builder class and move all your methods from the model into this class:

<?php
namespace App\Builders;
use Illuminate\Database\Eloquent\Builder;



class BookingsBuilder extends Builder
{
    public function __construct($query)
    {
        parent::__construct($query);
    }

    public function Cancelled( $cancelled)
    {
        return $this->when($cancelled != null, function($q) use($cancelled){
            $q->where('cancelled', filter_var($cancelled, FILTER_VALIDATE_BOOLEAN));
        });
    }

    public function PickedUp( $pickedUp)
    {
        return $this->when($pickedUp != null, function($q) use($pickedUp){
            $q->where('confirm_pick', filter_var($pickedUp, FILTER_VALIDATE_BOOLEAN));
        });
    }

    public function Search( $search)
    {
        return $this->when($search != null, function($q) use($search){
            $q->where('name', 'like', '%'.$search.'%')
                    ->orWhere('email', 'like', '%'.$search.'%');
        });
    }
}

Next, update your model to use the new builder class:

<?php

namespace App\Models;

use App\Builders\BookingsBuilder;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Booking extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'email', 'booking_date', 'pickup_date', 'return_date', 'confirm_pick', 'user_id', 'vehicle_id', 'total_price', 'num_days'];

    public function newEloquentBuilder($query)
    {
        return new BookingsBuilder($query);
    }

    public function vehicle()
    {
        return $this->belongsTo(Vehicle::class);
    }

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

Now our model is clean and easily readable.

Thank you for reading and please be sure to follow me on my social media accounts Twitter, Github, showwcase and also subscribe to my Youtube, I have a tutorial about this blog post on there.

Let's Talk About HTTP-Client In Laravel.

Jeffrey Kwade — Sun, 02 Apr 2023 22:37:15 +0000

Laravel provides an easy-to-use interface for making HTTP requests to remote servers or APIs. Whether you need to send a GET request to retrieve data, a POST request to create or update data, or any other type of HTTP request, Laravel's HTTP client can handle it all.
To make an HTTP request in Laravel, you can use the built-in HTTP client that utilizes Guzzle. This client offers a simple API for making requests, and it can handle things like setting headers, adding query parameters, and even sending JSON payloads.
In addition to the basic HTTP client, Laravel also provides several other features to make working with HTTP requests even easier. For example, you can use middleware to modify requests or responses, and you can use the cache system to cache responses for improved performance.

Sending HTTP requests to a RESTful API endpoint is a common task in web development. Laravel provides a convenient Http facade that allows developers to easily send HTTP requests using the GET, POST, PUT, PATCH, and DELETE methods.

Let's take a closer look at how to use the Http facade in Laravel.

use Illuminate\Support\Facades\Http;

$response = Http::get('https://rest.coinapi.io/v1/exchangerate/BTC/USD');

$response = Http::post('https://rest.coinapi.io/v1/exchangerate/BTC/USD', [
    'name' => 'Steve',
    'role' => 'Network Administrator',
]);

$response = Http::put('https://rest.coinapi.io/v1/exchangerate/BTC/USD', [
    'name' => 'Steve',
    'role' => 'Network Administrator',
]);

$response = Http::patch('https://rest.coinapi.io/v1/exchangerate/BTC/USD', [
    'name' => 'Steve',
    'role' => 'Network Administrator',
]);

$response = Http::delete('https://rest.coinapi.io/v1/exchangerate/BTC/USD', [
    'name' => 'Steve',
]);

The get method returns an instance of Illuminate\Http\Client\Response, which provides a variety of methods that may be used to inspect the response.

The following methods are available on the response object:

body() returns the response body as a string.
json($key = null, $default = null) returns the response body as an array or object.
object() returns the response body as an object.
collect($key = null) returns the response body as a collection.
status() returns the HTTP status code of the response.
successful() returns true if the HTTP status code is in the 200-299 range.
redirect() returns true if the HTTP status code is in the 300-399 range.
failed() returns true if the HTTP status code is in the 400-599 range.
clientError() returns true if the HTTP status code is in the 400-499 range.
header($header) returns the value of the specified HTTP header.
headers() returns an array of HTTP headers.

While sending HTTP requests to an external API endpoint, it's essential to handle errors that might occur. Laravel's Http facade provides a straightforward way to handle HTTP errors using the throw() method.
For example, to throw an exception if the HTTP status code is not in the 200-299 range, you can use the following code:

$response = Http::get('https://api.example.com');

$response->throw();

Laravel also provides a method to dump a request. This helps a developer to confirm that they are sending the intended parameters and headers. You may add the 'dd()' method to the beginning of your request definition:

Http::dd()->withUrlParameters([
    'endpoint' => 'https://api.example.com',
    'page' => 'docs',
    'version' => '9.x',
    'topic' => 'validation',
])->get('{+endpoint}/{page}/{version}/{topic}');

Now let's make a GET request to coinapi and dump the response body.

"""
{


  "time": "2023-04-02T18:19:49.0000000Z",


  "asset_id_base": "BTC",


  "asset_id_quote": "USD",


  "rate": 28192.38334862458369820384358


}
""" // app\Http\Livewire\Admin\Admin.php:24

The Http response in Laravel also implements PHP's array access allowing us to directly access json response data.

Http::accept('application/json')->withHeaders([ 'X-CoinAPI-Key' => 'Example' ])->get('https://rest.coinapi.io/v1/exchangerate/BTC/USD')['rate'];.

In our HTTP request, we added the acceptJson method to quickly specify that our application expects the application/json content type in response to our request, as well as the withHeaders method. This withHeaders method accepts an array of key/value pairs.

After making the HTTP GET request, let's dump our response:

28212.751030531 // app\Http\Livewire\Admin\Admin.php:24

we easily grab our desired data with less code.

If you would like, you may use the withToken method to quickly add a bearer token to the request's Authorization header:
$response = Http::withToken('token-key')->post(/* ... */);

In conclusion, the HTTP facade allows a developer to easily make HTTP requests in an efficient and clean manner compared to other methods of making HTTP requests in PHP.

Let's compare the HttpRequest in PHP to Laravel's HTTP facade:

<?php
$request = new HttpRequest();
$request->setUrl('https://rest.coinapi.io/v1/exchangerate/BTC/USD');
$request->setMethod(HTTP_METH_GET);
$request->setHeaders(array(
  'X-CoinAPI-Key' => '73034021-THIS-IS-SAMPLE-KEY'
));

try {
  $response = $request->send();
  echo $response->getBody();
} catch (\HttpException $ex) {
  echo $ex;
}
?>

<?php

Http::accept('application/json')->withHeaders([
            'X-CoinAPI-Key' => 'Example'
        ])->get('https://rest.coinapi.io/v1/exchangerate/BTC/USD')['rate'];


?>

We have a shorter and cleaner code syntax when implementing Laravel's Http request compared to PHP's HttpRequest api.

These are just a few use cases for the Http facade in laravel, take a look through Laravel's documentation for a comprehensive list of options available with the Http facade.

Thank you for taking the time to read this post. For more tips and tutorials on web development, feel free to follow me on twitter, github and subscribe to my youtube.

How to create a dynamic fixed navigation system on a web page.

Jeffrey Kwade — Wed, 29 Mar 2023 11:51:33 +0000

Hello devs,

I have a simple but useful topic to blog about so lend me your time, I promise it will be worth it.

We will be looking at how to render a dynamic navbar on a web application. Our navbar will start out as a block element and we'll dynamically change it to a fixed element when to scroll down our Y-Axis of our window using JavaScript.

This will be our html template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Rebelbase</title>
</head>
<body>
    <div id="container">
        <nav id="nav" class="block">
            <div class="">
                <h1>Fixed Navigation</h1>
            </div>
            <div class="list">
                <ul>
                    <li>Home</li>
                    <li>Profile</li>
                    <li>Cart</li>
                    <li>Logout</li>
                </ul>
            </div>
        </nav>
        <main>
            <section class="section">
                <h1 class="h1">Section One</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
            <section class="section">
                <h1 class="h1">Section Two</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
            <section class="section">
                <h1 class="h1">Section Three</h1>
                <article class="art">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem animi placeat minus ipsa nisi nostrum velit, officiis neque soluta possimus aliquid, commodi ad maiores laudantium quae, dolore repudiandae facilis qui.
                    Quo dolor inventore aspernatur quis, delectus impedit cupiditate numquam porro est dolore laudantium nisi ratione magni quasi alias, vero soluta atque rerum temporibus natus eius pariatur. Distinctio impedit minima reprehenderit!
                    Earum, facilis id? Accusamus veritatis voluptates corporis rem mollitia odio iste earum animi amet fugit, ipsa architecto totam soluta accusantium! Delectus, rem consequuntur omnis inventore voluptate laborum! Necessitatibus, atque cum.
                    Ducimus, excepturi. Beatae atque quas iste commodi vel, neque corrupti asperiores nostrum maiores ipsa laudantium assumenda odio ipsum, nam a laboriosam amet quisquam, facere veritatis. Saepe ipsum dolorum aut deserunt?
                    Rem, quam saepe numquam reiciendis sunt corrupti esse, veniam iste delectus officiis inventore excepturi repellat culpa cumque quas. Eos voluptas eveniet sunt ad aperiam nulla nobis non ratione, adipisci cumque!
                    Odit nostrum molestias, facere officia fugiat ipsam fugit voluptates dolore eaque necessitatibus nesciunt sed beatae. Eum quidem, totam necessitatibus eius aperiam neque ex esse labore nihil sequi facilis, dicta molestias!
                    Harum dolor dolorum illum et expedita repellendus dicta, nemo recusandae sequi suscipit ut necessitatibus labore consequatur sunt quam, modi aliquid reprehenderit esse. Dolores alias, illum recusandae temporibus harum voluptates atque.
                    Ducimus quaerat earum perspiciatis doloribus, alias suscipit nobis esse officiis voluptate magnam non maiores eos ex, dolor quis pariatur corrupti sed dolorum fugiat dignissimos? Ratione eveniet fugiat ea. Sint, mollitia!
                    Minima hic eaque distinctio, consequatur cupiditate autem numquam laboriosam, molestiae soluta quidem laudantium? Quam asperiores soluta temporibus in aliquam accusamus doloribus explicabo animi ad, quibusdam nemo tenetur ipsum amet aspernatur.
                    Sed distinctio quidem, odit reiciendis alias error exercitationem placeat voluptates at dolore? Voluptate adipisci quod assumenda possimus. Nostrum error ut illum incidunt iste doloremque suscipit corrupti ex nesciunt nobis. Culpa.
                </article>
            </section>
        </main>
    </div>

    <script src="index.js"></script>
</body>
</html>

The focus of this blog will be on our "nav" element that currently has an id of nav and a class of block.

Let's take a look at the css I have applied:

*{
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    overflow-x: hidden;
}


body{
    width: 100%;
    height: 100%;
}

#container{
    width: 100%;
    min-height: 100vh;
}

#container .block{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px;
    background: lightcoral;
    transition: all 500ms ease-in-out;
}

#container .fixed {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    padding: 14px;
    z-index: 10;
    background: lightcoral;
    transition: all 500ms ease-in-out;
}

#container nav .list ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#container nav .list ul li{
    list-style: none;
    cursor: pointer;
}


#container main .section {
    padding: 13px 8px;
}

The idea here is to dynamic change the class of our nav element from block to fixed using JavaScript, I have already applied css attributes to these two class.

Now let's focus on the fun bit.

window.addEventListener('scroll', () => {
    /**
     * I'm setting a scroll event on the window
     * Then assign var currentScrollPosition the value of window.pageYOffset
     * window.pageYOffset will help us track the current position on our Y-axis
     * When we're at the very top of our window, y-axis will be 0
     * and the value will increase as we scroll down the window page.
     * The moment move from point 0, we'll swap the block class with the fixed class
     * 
     */
    let currentScrollPosition = window.pageYOffset;
    let nav = document.getElementById('nav');
    if(nav && currentScrollPosition > 0){
        nav.classList.remove('block');
        nav.classList.add('fixed');
    }else{
        nav.classList.remove('fixed');
        nav.classList.add('block');
    }

    console.log(currentScrollPosition)

})

Allow me to explain why I included the "nav" element in the if conditional statement.

In building complex web applications, we often have multiple layouts catering to different user types, such as guests, authenticated users, and administrators. Therefore, our navbar may not always be present, resulting in an error in the console. The conditional statement is used to prevent this error from occurring.

However, I must note that this method is primarily intended for beginners. Experienced developers would typically use frameworks like Vue.js, React, Alpine.js, Laravel, and Tailwind CSS, which provide easy implementation of this feature

You can watch a youTube tutorial, please subscribe and be sure to follow me on twitter, gitHub, showwcase.

Thank you for your time,
Jeffrey.

Creating Laravel Blade Directive

Jeffrey Kwade — Sat, 25 Mar 2023 15:27:34 +0000

Hello fellow developers,

I'll be talking about creating your very own custom blade directives in Laravel.

Let's begin by explaining what blade directives are.

Laravel Blade directives are a powerful feature of the Laravel PHP framework that allows developers to write clean and concise templates with minimal boilerplate code. Here are some of the most commonly used Laravel Blade directives:

@if, @else, @elseif: These directives allow developers to conditionally display content based on a given condition.

@foreach: This directive allows developers to loop through an array or collection and display content for each item.

@include: This directive allows developers to include a partial view file within a parent view file, making it easy to reuse common markup across multiple pages.

@extends, @yield, @section: These directives allow developers to define a master layout file and inject content into specific sections of that layout from child views.

@auth, @guest: These directives allow developers to conditionally display content based on the user's authentication status.

@csrf: This directive generates a hidden input field with a CSRF token, which can help protect your application against cross-site request forgery attacks.

Laravel Blade directives are easy to learn and use, and they can help developers write clean, maintainable, and efficient code.

Now that we have that settled, let's create our custom blade directive.

We will be creating the @admin blade directive, this directive allows me to render an html element(s) only when a user is has administrative privileges.

We shall begin moving to the User model and create a method named "isAdmin".

public function isAdmin()
{
    return $this->is_admin == true;
}

After we have successfully created this method, let's switch to the AppServiceProvider file, locate the boot function and let's register a function.

use Illuminate\Support\Facades\Blade;

public function boot(): void
{
    Blade::if('admin', function(){
            return auth()->user()->isAdmin();
        });
    }

Make sure to import the blade facade. The first parameter of the blade facade is the name we are giving to the blade directive and the second parameter is a callabck function that simply returns the method we created within the User model.

Now Let's use our newly created @admin blade directive.

<div class="flex justify-end">
    @auth
        <div class="flex items-center gap-2">
             @admin
                  <a href="/admin" class="">Admin</a>
             @endadmin
                 <livewire:auth.logout />
        </div>
      @else
         <a href="/login">Login</a> &nbsp;/&nbsp; 
         <a href="/register">Register</a>
     @endauth
</div>

If the current user has administrative privileges, the admin navigation link will be rendered.

Thank you for reading.
I'm Jeffrey Kwade, follow me on Twitter, Github and subscribe to my new Youtube channel