DEV Community: Remon Hasan

Laravel Route Model Binding : Simplifying Controller Logic

Remon Hasan — Tue, 16 Apr 2024 09:31:04 +0000

Laravel's Route Model Binding stands as a cornerstone feature, streamlining the interaction between routes and models within your application. It offers a seamless mechanism to automatically inject model instances into your routes based on specified parameters. This feature not only enhances code readability but also boosts developer productivity by eliminating the need for manual model retrieval.

Understanding Route Model Binding

At its core, Route Model Binding simplifies the process of retrieving model instances by associating them directly with route parameters. Consider a scenario where you're building a blogging platform using Laravel. You have a Post model representing individual blog posts, and you wish to create routes to display these posts based on their IDs.

Implementation Example

Let's delve into a practical example to grasp the essence of Route Model Binding. In your routes/web.php file, define a route to showcase individual posts:

Route::get('/posts/{post}', 'PostController@show');

Here, {post} serves as a route parameter signifying the ID of the post.

Next, within your PostController, craft the show method as follows:

public function show(Post $post)
{
    return view('posts.show', ['post' => $post]);
}

Observe that the show method takes a parameter $post, type-hinted with the Post model. Laravel intelligently resolves this parameter, automatically injecting the corresponding Post model instance based on the value of the {post} route parameter.

Now you can access the posts:

http://localhost:8000/posts/1

Streamlining Controller Logic

Through Route Model Binding, Laravel obviates the need for manual model retrieval within controller methods. This not only declutters your code but also enhances its expressiveness and maintainability. By seamlessly integrating model instances into your controllers, Laravel empowers developers to focus on implementing business logic rather than grappling with mundane data retrieval tasks.

Conclusion

In conclusion, Laravel's Route Model Binding emerges as a powerful tool for simplifying controller logic and enhancing developer productivity. By seamlessly bridging routes and models, it facilitates cleaner, more expressive code, thereby fostering a more enjoyable and efficient development experience. Embrace Route Model Binding in your Laravel projects to unlock its full potential and streamline your application's architecture.

Do you utilize Route Model Binding in your Laravel projects? Share your experiences and insights in the comments below and you can give star on my gist. Happy Learning !

Mastering State Management in React: Overcoming Common Challenges

Remon Hasan — Tue, 02 Jan 2024 12:08:02 +0000

Introduction:

State management is a fundamental aspect of React development, yet many developers face hurdles while effectively managing it within their applications. In this guide, we'll explore common challenges and provide solutions to empower developers in mastering state management in React.

Understanding State in React:

In React, state represents the data that determines the behavior of components and their rendering. It's essential to distinguish between state and props: while props are immutable and passed from parent to child, state is mutable and managed within a component.

Common Challenges in State Management:

State Confusion:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    // Incorrect usage causing confusion
    setCount(count + 1); // This might not work as expected
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

Solution:

Utilize the functional update form to avoid dependency on the previous state.

const increment = () => {
  setCount(prevCount => prevCount + 1);
};

Prop Drilling:

// Grandparent Component
const App = () => {
  const [value, setValue] = useState('');

  return (
    <Parent value={value} setValue={setValue} />
  );
};

// Parent Component
const Parent = ({ value, setValue }) => {
  return (
    <Child value={value} setValue={setValue} />
  );
};

// Child Component
const Child = ({ value, setValue }) => {
  return (
    <Grandchild value={value} setValue={setValue} />
  );
};

// Grandchild Component
const Grandchild = ({ value, setValue }) => {
  return (
    <input
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  );
};

Solution: Implement React Context or lift the state up to the nearest common ancestor to avoid passing props through multiple layers.

Building a React-Redux Counter: Understanding State Management with Redux in React

Remon Hasan — Tue, 19 Dec 2023 11:04:38 +0000

In this post we will take a look at using Redux for managing the state in React apps. For that we'll make a simple redux counter project. Let's break down each part of the Redux implementation step by step:

Source Code : Github

Redux Basics

Redux is a predictable state container for JavaScript apps. It helps manage the state of your application in a predictable way, making it easier to debug and understand how data changes over time.

Setting Up the Folder Structure

Actions

Actions are payloads of information that send data from your application to your Redux store. In the actions folder:

actionTypes.js: Defines action types as constants.

counterActions.js: Contains action creator functions that return actions.

Reducers

Reducers specify how the application's state changes in response to actions sent to the store. In the reducers folder:

counterReducer.js: Defines how the state for the counter should change based on dispatched actions.

index.js: Combines all reducers using combineReducers from Redux.

Store

The store holds the state of the application. In the store folder: index.js: Creates the Redux store using the combined reducers.

Setting Up Redux in App

App.js : Wraps the entire app with the Redux Provider, which makes the Redux store available to any nested components.

Configuring Redux in the App

`components/Counter.js`

This is a functional component connected to Redux using the connect function from react-redux.
mapStateToProps is a function that maps parts of the Redux state to the component's props.
mapDispatchToProps is an object that maps action creators to props.
connect connects the component to the Redux store, allowing it to access the state and dispatch actions.

Running the App

Starting the Application

Run npm start to start the React application.

Summary

Actions are dispatched to describe something that happened (like "INCREMENT" or "DECREMENT").
Reducers describe how the application's state changes in response to actions.
Store holds the application's state.
Connecting Components allows them to access the Redux store's state and dispatch actions.

This breakdown covers the foundational parts of a simple Redux setup in a React application. Understanding these sections will help you grasp how Redux manages state and data flow in a React application. If any specific part needs further explanation, feel free to ask!

Preserving Special Characters in Query Parameters: A React Journey

Remon Hasan — Sun, 05 Nov 2023 06:32:58 +0000

Introduction

In the world of web development, handling query parameters and URLs is a fundamental task. However, there are situations where special characters within these parameters can lead to unexpected challenges. One such issue I encountered involved the loss of special characters within a redirect_uri. In this article, I'll walk you through the problem, the solution, and how to implement it in your React application.

The Problem

Imagine you have a URL like this:

http://localhost:3001/en/auth/login?servicename=Grant&redirect_uri=http://localhost:3000/bsmrnt/buy-ticket?code=ETN&start_time=10:00:00

In this URL, the redirect_uri contains special characters, specifically the & symbol. When extracting this parameter in a React app using queryParams, you might run into issues as the & character separates query parameters.

The Initial Approach

My initial approach was to use the common method of extracting query parameters in React:

const queryParams = new URLSearchParams(window.location.search);
const redirectUri = queryParams.get('redirect_uri');

However, this approach resulted in redirectUri containing only part of the URL:

http://localhost:3000/bsmrnt/buy-ticket?code=ETN

As you can see, the &start_time=10:00:00 part is missing.

The Solution

To preserve the complete redirect_uri, I found a creative solution using JavaScript's regular expressions and window.location.href. Here's the code:

We first obtain the complete URL using window.location.href.
Then, we use a regular expression to extract the redirect_uri and capture everything that follows it.
Finally, we ensure that we have the complete redirect_uri by checking both the regular expression match and the queryParams.

Implementation

To implement this solution in your React app, follow these steps:

Retrieve the currentURL and use the regular expression to capture the complete redirect_uri.
Use the captured redirectUri as needed in your application.

Here's a sample implementation inside a useEffect:

This ensures that you store the complete redirect_uri without losing any special characters.

Conclusion

Handling special characters in query parameters can be tricky, but with the right approach, you can ensure they are preserved. In this article, we explored a real-world problem and a creative solution using JavaScript and React. By implementing this technique, you can preserve the integrity of your URLs and provide a seamless user experience.

If you've ever struggled with lost query parameters, give this solution a try. Let's solve the mystery of preserving special characters in query parameters together!

Cronjob Schedule: Automating Old Data Cleanup with Laravel

Remon Hasan — Thu, 19 Oct 2023 09:39:58 +0000

For implementation check in : Github Repository

Introduction

I have faced a problem selecting a seat in a hall where the seat reserve timeout is supposed to be five minutes. Basically, any visitor can reserve his/her seat for at least five minutes. After that the seat will be available for all.

Problem

I have stored the selected seat on a reserve_seats table. Where I store all of the visitors' selected seats by their user_id. The main concern is it is needed to auto delete the seat when the five minutes will be passed.

Solution

Laravel has come up with a great solution of deleting the old data by managing schedule work.

1. Create a Laravel Artisan Command:
php artisan make:command ClearOldData
This will create a new command file in the app/Console/Commands directory.

2. Define the Command Logic:
Open the ClearOldData.php file in the app/Console/Commandsdirectory and define the logic for deleting old data. In this case, we'll assume you have a table named your_table_name and you want to delete records older than 5 minutes.

<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;
use Carbon\Carbon;

class ClearOldData extends Command
{
    protected $signature = 'clear:old-data';
    protected $description = 'Delete old data from the table.';

    public function __construct()
    {
        parent::__construct();
    }

    public function handle()
    {
        // Calculate the date and time 5 minutes ago
        $fiveMinutesAgo = Carbon::now()->subMinutes(5);

        // Replace 'your_table_name' with the name of your table
        \DB::table('your_table_name')->where('created_at', '<', $fiveMinutesAgo)->delete();

        $this->info('Old data has been deleted.');
    }
}

3. Define the Task Scheduling:
Open the app/Console/Kernel.php file and define the scheduling logic. Add the following code to the schedule method in the Kernel class:

protected function schedule(Schedule $schedule)
{
    $schedule->command('clear:old-data')->everyMinute();
}

4. Run the Scheduler:
To activate the task scheduler, you'll need to add a cron job that runs Laravel's scheduler every minute. In your server's cron file, add the following line:

* * * * * cd /path-to-your-laravel-project && php artisan schedule:run >> /dev/null 2>&1

5. Run the Scheduler:
To manually run the scheduler, you can execute the following command:
php artisan schedule:run

Now, the clear:old-data command will run every minute and delete records older than 5 minutes from your specified table. Adjust the table name and timing as needed for your specific use case.

uses of useNavigate instead of useHistory

Remon Hasan — Mon, 06 Jun 2022 10:24:25 +0000

Github Repository :
Github

The useHistory hook gives you access to the history instance. In General useHistory is used for redirect to particular route after fetch api data or anything else with history. We used it as:

const history = useHistory()
history.push("/path")

sometimes it fails to give you the access to the history instance. As per, useNavigate is the best way to redirect the particular route with your history instance. Here we go:

const history = useNavigate();
history("/path");

Laravel 8 REST API Authentication with Sanctum

Remon Hasan — Sun, 16 May 2021 16:07:57 +0000

Source Code

Github

Laravel Sanctum, formerly known as Airlock, is a Laravel package created for the authentication of Single Page Applications (SPAs), mobile applications, and basic token-based APIs. It can be used to issue API Tokens to your users and authenticate Single Page Applications using Laravel's session.
we are going to create product api. For testing we will use the postman.

Model and Migration

First, we have to create a product model,migration,controller as like:

php artisan make:model Product -m
php artisan make:controller ProductController --api

Create the fields as like:

Migrate: Before migrate you should create the database in env file and connect to the MySql server or others you prefer.

php artisan migrate

Route

Second, we have to create a resource route in api.php as like:

Route::resource('products', ProductController::class);

Controller Functions

Postman Test

Create:

Update:

Validation:

Delete:

Search by Name:

Get by ID:

Sanctum Authentication and Access Token Generation

Install Sanctum:

composer require laravel/sanctum

Vendor Publish for access token migration:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Migrate:

php artisan migrate

setup

Go to app, then kernel.php and add the given lines in api array section. also for query you can follow laravel Sanctum Documentation

Add to User Model: Go to User.php and add the lines:

use Laravel\Sanctum\HasApiTokens;

use HasFactory, Notifiable, HasApiTokens;

Create a group route function which will include the protected routes:

Create Controller

php artisan make:controller AuthController

Register Function

Postman Test:

Get Product access by token:

Now add logout: After logout the token will be deleted.

`public function logout(Request $request) {
auth()->user()->tokens()->delete();

    return [
        'message' => 'Logged out'
    ];
}`

Create logout route:

Route::post('/logout', [AuthController::class, 'logout']);

Postman Test:

Login

Create route for login as like:

Route::post('/login', [AuthController::class, 'login']);

Logged in:

All Public and Protected Route

Shopping Cart Laravel 8: part 03

Remon Hasan — Fri, 14 May 2021 12:14:45 +0000

Source Code

Github

Add to cart

Now we have to pick the add to cart of product by using wire bind as like:

wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})"

Additionally, we can use the method of count() for checking there is any product or not! For that we can use the loop like:

@if(Cart::count()>0) // go for product else No Products @endif

Fetch product image from database

src="{{asset('assets/images/products')}}/{{$item->model->image}}"

Route action

href="{{route('product.details',['slug'=>$item->model->slug])}}"

Rest of the functions of building cart package

Subtotall
Total
Tax

Shopping Cart Laravel 8: Part 02

Remon Hasan — Thu, 13 May 2021 10:50:36 +0000

Source Code

Github

Component Create

Create your own component for cart,product details and shop.
Then create a store function in shopcomponent.php as like:

pass the parameters to the product page as like by adding:

wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})"

Shopping Cart Laravel 8 : Part 1

Remon Hasan — Wed, 12 May 2021 16:25:11 +0000

Source Code

Github

Shopping Cart

A shopping cart is a piece of software that keeps the record of the items a buyer has 'picked up' from the online store.

Shopping Cart Package

By using the hardevine shopping cart we can easily implement that.

Installation

Go to your newly created project directory and run the command:

composer require hardevine/shoppingcart

Configuration Setup

Go to app.php and set the given line to the providers[ ] section like:

Gloudemans\Shoppingcart\ShoppingcartServiceProvider::class

Add one more to the aliases[ ] as like:

‘Cart’ => Gloudemans\Shoppingcart\Facades\Cart::class

Publishing the Package

Php artisan vendor:publish --provider="Gloudeman\ShoppingcartServiceProvider" --tag="config"

Miller Robin Primality Test

Remon Hasan — Thu, 08 Oct 2020 10:34:15 +0000

Similar to Fermat primality test, Miller-Rabin primality test could only determine if a number is a probable prime.

It is based on a basic principle where if , but , then is composite.

The algorithm in simple steps can be written as,

Given a number () for which primality is to be tested,
Step 1: Find
Step 2: Choose in range
Step 3: Compute . If is , can be prime.
Step 4: Compute . If , is composite.
If , is prime.
Step 5: Repeat Step 4 for times.
Step 6: If neither or appeared for , is composite.

Manage Categorial Data of Dataset

Remon Hasan — Tue, 06 Oct 2020 09:08:01 +0000

encoding categorial data

import LabelEncoder Class of Sklearn

from sklearn.preprocessing import LabelEncoder

create object of LabelEncoder

labelencoder_X = LabelEncoder()

labeling the object

labelencoder_X.fit_transform(X[:, 0])

now put it into the country column

X[:, 0] = labelencoder_X.fit_transform(X[:, 0])

Then Print

print(X)