Forem: Adetola

How to avoid N + 1 queries in PHP

Adetola — Thu, 15 May 2025 09:29:53 +0000

I was reviewing a Laravel codebase a few days ago, and I saw a common N+1 query mistake. N+1 query slows down our applications unknowingly. Because things that are supposed to run at once will run 4 to 5 times.

I will be emphasizing on two N+1 query examples and their solution(s).

SCENARIO ONE:
We are trying to loop over an array to create transactions in the database.

The mistake


foreach ($request->transactions as $transaction) {
   Transaction::create([
     "transactionId" => $transaction->id,
     "amount" => $transaction->amount
     // and the rest of the code
   ]);
}

This is a classic case of N+1 query because you are creating a new record for everytime you go through a loop, and this will slow down your application or any route calling this function.

The simple solution to this will be to.

Declare an empty array before the foreach loop line.
Loop through the array and prepare to insert the record into the database.
Insert it all at once into the database.

Implementation of the explanation.

Declare an empty array before the foreach loop line

$storeTransaction = [];

Loop through the code and prepare how you will insert it

$now = now();

foreach ($request->transactions as $transaction) {
  $storeTransaction[] = [
     "transactionId" => $transaction->id,
     "amount" => $transaction->amount,
     "created_at" => $now(),
     "updated_at" => $now(),
  ];
}

Insert it all at once into the database

Transaction::insert($storeTransaction);

This approach will do one insert into the database. So instead of inserting 10 - 15 times, you inserted all the data into the database at once.

SCENARIO TWO:
You have a function to get a record and update the record, if it exists.

The mistake

public function updateTransactionStatus($id)
{
   $transaction = Transactions::where('id', $id)->get();

   if (!$transaction) {
         return $this->errorResponseHelper('fail', 'Transaction not found', 404);
   }

   Transactions::where('id', $id)->update(['status' => 1]);

   return $this->successResponseHelper('success', 'Transaction updated successfully', $transaction);
}

While this particular function or code block will do its work effectively, it is not efficient, because we are fetching records twice, then making another call to update the row/record.

The simple solution to this will be to.

Fetch the record by using the GET keyword.
If the record does not exist, return an error message
If it exists, just use the model or record that you have called already to update the record.

public function updateTransactionStatus($id)
{
   $transaction = Transactions::where('id', $id)->get();

   if (!$transaction) {
      return $this->errorResponseHelper('fail', 'Transaction not found', 404);
   }

   $transaction->update(['status' => 1]);

   return $this->successResponseHelper('success', 'Transaction updated successfully', $transaction);
}

What you have done here is to kill two or three birds with one stone.

If you have code blocks like this in your codebase, it is time to optimize your code.

Happy coding!

Why AI is not taking your job soon

Adetola — Fri, 17 Jan 2025 10:06:55 +0000

Mark Zuckerberg, in an interview, said, "Some mid-level developers will be replaced by AI in 2025," and the community has been reacting in many different ways. While it is understandable to be afraid of what might or might not happen in the near future, from what we have all seen so far from ChatGPT, Claude, Cursor, Co-pilot etc., I can confidently say we are not there yet.

Yes, AI is of great help for software developers in our day-to-day activities, they help make work faster, and it is much easier to find solutions to problems now than it was before. But, aside from dishing out snippets of codes and fine-tuning them, it can't do much.

Recently, I used the free version of Microsoft Co-pilot, and 7/10 times it recommended a code snippet to me, I ignored it, imagine the current Microsoft Copilot as it is, solely writing code without a skilled developer perusing the code. An application filled with bugs, right? If your answer is Yes, you guessed right.

AI can't reason like a human yet, AI cannot take requirements, give it deep thinking, and come up with a fully functional application. Nope, not possible for now.

Everyone wants to cut software developers' lose from their budget so they can increase profitability, while, they get a 200$ USD AI that will:

Write their codes efficiently.
Plan agenda and sprint.
Attend meetings.
Liaise with vendors.
Integrate third-party API
Deploy code and debug. etc

It is not so easy, right?

Even if we get to a stage where AI can do all the things listed above, it will be much more expensive than getting 2 to 3 developers to do the same thing.

If AI can take developers' jobs, why hasn't AI taken the job of those into Data entry completely?

Why do we still have customer service jobs?

AI can just pick your service request and work on it right, why don't we have that yet?

Don't be scared, we are not there yet. AI is not taking your jobs for now, it might eventually happen but we are still quite far from making that happen.

You can start taking AI serious when it completely takes over Data Entry jobs and completely takes over large corporation customer service operations.

For now, keep your fingers crossed, use AI code helpers when necessary, and dish out quality software solutions.

What I learned building vue3-search-select package

Adetola — Mon, 06 Jan 2025 07:09:42 +0000

A few months ago, I was working on an application that required me to have a custom select to show things in a certain way. To be explicit, I needed to show the select drop-down this way: "firstName LastName | staffId"

I wanted to use a package for this as it had to be implemented in an application I was building. So I surfed the internet, search engines, etc to get a package to help with this but no package offered such feature. This put me in a dilemma on how best to proceed, after few hours of deliberation, I concluded I had to build the select component myself.

I knew this was going to be tough, but I was prepared. After all, programming is all about problem-solving.

I successfully built the custom select component, it worked fine after I perfected it. This took me about two weeks to build and perfect, as this was a side project I was building.

After perfecting the custom component, I thought, "What if I share this component as a Vue package with the community?"

So I created a new NPM project which is actually my first package and named it vue3-search-select.

Kindly see the package here

vue3-search-select - npm

A lightweight and versatile Vue search and select package allowing for efficient searching, selection, and modification of items. Latest version: 1.0.10, last published: 2 months ago. Start using vue3-search-select in your project by running `npm i vue3-search-select`. There are no other projects in the npm registry using vue3-search-select.

npmjs.com

The lessons I learned from building this package are

In programming anything is possible.
Belief, never-say-die spirit, and dedication are important to doing anything significant.
Building a package will significantly improve your programming skills and showcase what you are capable of.
Last, but not least, the community has helped you grow one way or another, so why not give back to the community.

This is my experience building the vue3-search-select package. I hope anyone thinking of building something for the community will take this as an inspiration.

Happy coding!

The right path to go from beginner to Expert in programming

Adetola — Mon, 02 Sep 2024 07:06:54 +0000

There are so many articles, and videos detailing how to go from zero to hero with a specified roadmap in software development. Be it for Frontend development, Backend development, Mobile App development, etc. While these videos and articles are helpful and can put you on the right path to success in programming as a whole, sometimes, things don't work that way. There are so many ways to kill a bird; we can not all do the same thing.

For example, Frontend developers are told to follow the roadmap below:

HTML > CSS > Basics of JS > Intermediate JS course > React

While this is a good roadmap to go from beginner to intermediate, you might not need to follow this roadmap entirely because things might change. For example, you go through this route:

HTML > CSS > Basics of JS > React

HTML > CSS > Tailwind CSS > Basics of JS > Vue

Most backend developers are told to through a roadmap that looks like this:

SQL basics.
Basics of JS, PHP, .NET, Go, etc.
Understanding of Backend concepts.
Learn a Backend framework e.g. Express, Laravel, ASP.NET Core, Gin, etc.
Understand architecture.

In some cases, paths might change. You can be fortunate or unfortunate to go through this path:

SQL basics.
Backend framework: e.g. Express, Laravel, ASP.NET Core, Gin, etc.
By using frameworks, you learn the concept of the different programming languages and syntaxes.
Understand architecture.

The path does not have to be the same for everyone, because, there are so many roads that lead to a destination, most times.

I will use myself as an example, I learned Laravel without even touching the Basics of PHP and its syntax. To this day, I have never touched Basics of PHP course but I can work on any PHP project.

I know many developers who learned Javascript from using Jquery.

I know many developers who learned advanced concepts of Javascript from using React.

I know a developer who learned advanced concepts of Javascript from using Vue.

I know many developers who learned advanced concepts of CSS from using Tailwind.

If you find yourself struggling to get out of a loop of roadmaps, you might need to reevaluate yourself and determine the best approach, or like I told myself when I started programming "Just Start."

I wish you all the best in your programming journey.

Feel free to drop your questions.

How to easily generate data with Database Seeders in Laravel

Adetola — Thu, 25 Jul 2024 10:40:14 +0000

When building an application, be it small, medium, or large. Having test data to play around with in an application is inevitable and important.

So let's start from simple to advanced with two different scenarios.

i. All applications or the majority of applications should have users. Sometimes, we want to classify/tag users as Admin or regular Users. So let's generate a simple seeder with 100 users with the under-listed table specifications:

ID, First Name, Last Name, Email, Password
User Type: Either an Admin or a regular User

So here we go.

To seed into the users table, of course, you would have the default users migration table created for you by Laravel.

So for the sake of this demonstration, your table migration should look like this:

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('first_name');
            $table->string('last_name');
            $table->string('email');
            $table->string('password');
            $table->enum('user_type', ['user','admin'])->default('user');
            $table->rememberToken();
            $table->timestamps();
        });
    }

To create a seeder class for our Users Table.

php artisan make:seeder UserSeeder

So, to create values for the seeder we just created we need to use the default Faker package that comes with every Laravel application.

To generate 100 users at a go, we first do a for-loop and pass the fake/pseudo data into each column like this:

use Faker\Factory as Faker;

public function run()
{
   $faker = Faker::create();

   for(i = 0; i <= 99; i++)
   {
      User::create([
        'first_name' => $faker->firstName(),
        'last_name' => $faker->lastName(),
        'email' => $faker->email(),
        'password' => bcrypt('hello1234'), // we might want to set this to a value we can easily remember for testing sake
        'user_type' => $faker->randomElement(['admin', 'user'])
      ]);
   }
}

To seed this into the database, we need to run the command below:

php artisan db:seed --class=UserSeeder

This will create 100 users and insert them into the database.

It is that simple.

So now, to a more advanced solution.

We need to create:

A departments table with 10 new departments.
We will create new 100 users.
A staff table that will reference the users table with the same details and an extra column to reference the departments table i.e department_id.

We already know what the users table will look like let's look at what the staff and department tables will look like.

Staff table

Schema::create('staff', function (Blueprint $table) {
            $table->id();
            $table->string('first_name');
            $table->string('last_name');
            $table->string('email');
            $table->foreignId('department_id')->references('id')->on('departments');
            $table->foreignId('user_id')->references('id')->on('users');
            $table->timestamps();
        });

Departments table:

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

So we need to run migration to have these tables in our database.

Now, for the UserSeeder class, we are to implement the bullet points stated earlier.

A department table with 10 new departments.

$now = now();
        $count = 0;
        $departmentNames = ['Human Resources', 'Admin', 'ICT', 'Customer Service', 'Operations', 'Branding','Legal',
            'Risk', 'Audit', 'Finance', 'Infrastructure'
        ];

        for ($j=0; $j <= 9; $j++){
            Department::create([
                'name' => $departmentNames[$j],
                'created_at' => $now,
                'updated_at' => $now,
            ]);
            $count++;
        }

The last two bullet points will need to be implemented together

We will create new 100 users
A staff table that will reference the users table with the same details and an extra column to reference the departments table i.e department_id.

if ($count == 10) { // we need to make sure we have all 10 departments
            $departments = Department::pluck('id')->toArray();

            for ($i=0; $i <= 99; $i++) {
                $user = User::create([
                    'first_name' => $faker->firstName(),
                    'last_name' => $faker->lastName(),
                    'email' => $faker->email(),
                    'password' => bcrypt('hello1234'),
                    'user_type' => $faker->randomElement(['admin', 'user']),
                    'created_at' => $now,
                    'updated_at' => $now
                ]);

                Staff::create([
                    'first_name' => $user->first_name,
                    'last_name' => $user->last_name,
                    'email' => $user->email,
                    'user_id' => $user->id,
                    'department_id' => $faker->randomElement($departments), // pick random departments from DB
                    'created_at' => $now,
                    'updated_at' => $now
                ]);
            }
}

Explanation:

We created 10 departments first.
Then we set up a counter to check if all 10 departments have been created.
If the counter condition is true, we then create 100 users.
For each of these 100 users, we need to reference their details in another table called staffs table.
Each staff must belong to a user and must also belong to a department, so to do this, we need to get all the departments we created earlier and inject them into the department_id column randomly.

The full UserSeeder implementation

        $now = now();
        $count = 0;
        $departmentNames = ['Electronics', 'Home & Garden', 'Toys & Games', 'Health & Beauty', 'Automotive', 'Sports & Outdoors','Clothing & Accessories',
            'Books', 'Music', 'Movies & TV', 'Grocery'
        ];

        for ($j=0; $j <= 9; $j++){
            Department::create([
                'name' => $departmentNames[$j],
                'created_at' => $now,
                'updated_at' => $now,
            ]);
            $count++;
        }

        $faker = Faker::create();
        if ($count == 10) {
            $departments = Department::pluck('id')->toArray();

            for ($i=0; $i <= 99; $i++) {
                $user = User::create([
                    'first_name' => $faker->firstName(),
                    'last_name' => $faker->lastName(),
                    'email' => $faker->email(),
                    'password' => bcrypt('hello1234'),
                    'user_type' => $faker->randomElement(['admin', 'user']),
                    'created_at' => $now,
                    'updated_at' => $now
                ]);

                Staff::create([
                    'first_name' => $user->first_name,
                    'last_name' => $user->last_name,
                    'email' => $user->email,
                    'user_id' => $user->id,
                    'department_id' => $faker->randomElement($departments), // pick random departments from DB
                    'created_at' => $now,
                    'updated_at' => $now
                ]);
            }
        }

Then run:

php artisan make:seeder --class=UserSeeder

If you have questions, do not hesitate to drop it. Happy coding!

Opinionated: How to safely insert multiple records to more than one table in Laravel

Adetola — Thu, 27 Jun 2024 10:01:26 +0000

There are many ways to kill a bird. Different people have their unique ways of doing things effectively, that was why I added OPINIONATED to the topic, this is my way of inserting multiple records to more than one table and running other services effectively.

For example, let's say you want to run a service that does these under-listed tasks in a registration controller:

Check if the new user/potential customer exists in the database.
Register A User (of course we must save this record in a table).
Log the event/activity in a table.
Log the new user email/phone number in a tokens_table for account verification.
Dispatch Email containing a token that will expire in 10 minutes.
Dispatch SMS containing a token that will expire in 10 minutes.

The main gist here is that we are running multiple services in a controller and they must all run successfully so we don't have a Partial Transaction issue.

A Partial Transaction can be described as a scenario where only some parts of a transaction are completed, leading to data inconsistency.

How do we make sure we guide against this?

We use the Database Transactions facade readily available to us in the Laravel framework.

To run a database transaction, we need to let the code executor know this is a database transaction.

DB::beginTransaction();

Then we create a try-catch block so we can catch errors easily and do the needful. The try block will be inserting into the database while the catch block will catch any errors encountered.

For the contents in the Try block, we will have

A service to check if a user exists.

$checkIfUserExists = $userService->userExists($request->email, $request->phoneNumber);

if ($checkIfUserExists) return errorResponseHelper('fail', 'User exists!');

A service to register a new user and log the activity.

 $userService->registerUser($request);

 LogActivity($request->email, $request->phoneNumber);

Generate a token, log it in the tokens table, and dispatch an event that is being listened to by two listeners VerificationEmailListener **and **VerificationSMSListener.

 $generateToken = generateTokenHelper();

$userService->tokenLog($request->email, $generateToken[0]);

event(new VerificationTokenDispatch($request->email, $request->PhoneNumber, $generateToken[1]));

Then, the most important part of this TRY block is to commit these changes if all the services run successfully and return a successful response.

 DB::commit();

return successResponseHelper('success', "OTP has been sent to your mobile/email, kindly note that OTP validity is 10 minutes");

If all the services in this try block are successful, the database commit will save these transactions into the database.

Now Let's look at the Catch block part.

If a transaction/service fails in the TRY block, it will come to the catch block. So we will call the DB facade again to rollback every transaction that have been inserted into the database like so:

DB::rollBack();

return errorResponseHelper('fail', "Operation not successful, please retry");

The DB::rollBack() facade will unsave/rollaback every transaction that have been inserted into the database without issues in milliseconds.

This is how I guide against data inconsistency especially when I am running more than one database transaction in Laravel.

The full code block:


use Illuminate\Support\Facades\DB;


 DB::beginTransaction();

        try {
            $checkIfUserExists = $userService->userExists($request->email, $request->phoneNumber);

            if ($checkIfUserExists) return errorResponseHelper('fail', 'User exists!');

            $registerUser = $userService->registerUser($request);

            LogActivity($request->email, $request->phoneNumber);

            $generateToken = generateTokenHelper(); // returns an array, the first is encrypted the second is not

            $userService->tokenLog($request->email, $generateToken[0]);

            event(new VerificationTokenDispatch($request->email, $request->PhoneNumber, $generateToken[1])); // both SMS listeners and email listeners are listening to this event

            DB::commit();

            return successResponseHelper('success', "OTP has been sent to your mobile/email, kindly note that OTP validity is 10 minutes");
        } catch (\Throwable $th) {
            DB::rollBack();
            return errorResponseHelper('fail', "Operation not successful, please retry");
        }

If you have any questions, do not hesitate to drop it.

How to use Quill Editor with Laravel 10 and Livewire v3

Adetola — Wed, 29 May 2024 08:53:02 +0000

I wanted to build a content management system for a project I was working on recently and I needed to use a rich text editor. I tried so many rich text editors but most didn't just work well with the requirements given to by the client.

Handling image upload on Trix editor was difficult to implement, I couldn't find any rich text editor to help with that until I stumbled on Quill rich text editor.

I will not go into the details of how to install Laravel 10 and Livewire v3 because I will want to assume this particular implementation is for those who are mid to senior developers.

First step:
In your Layout folder e.g. resources/views/layouts/app.blade.php insert these Quill's CDN in your head block

<head>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.5/dist/quill.snow.css" rel="stylesheet" />

</head>

Note: the second CDN is a theme.

Second step:
In your script insert this script CDN

<script>
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.0-rc.5/dist/quill.js"></script>
</script>

Then the next step will be to create a livewire component using

php artisan make:livewire CreateBlogPost

This will create two files in the resources/views/livewire and app/Livewire folders.

Third step:
Open the CreateBlogPost.php in the app/Livewire folder and insert these blocks of Code.

use Intervention\Image\ImageManagerStatic as Image;

use WithFileUploads;

public $title;
public $trixId;
public $photos = [];
public $cover_image;
public $content = '';
public $tags;
public $imageNames = [];

public function uploadImage($image)
    {
        $imageData = substr($image, strpos($image, ',') + 1);

        $length = strlen($imageData);
        $lastSixCharacters = substr($imageData, $length - 20);

        $imageData = base64_decode($imageData);

        $filename = $lastSixCharacters . '.png';

        $resizedImage = Image::make($imageData)->resize(null, 400, function ($constraint) {
            $constraint->aspectRatio();
        });

        Storage::disk('public_uploads')->put('/blog_photos/' . $filename, $resizedImage->encode());

        $url = url('/files/blog_photos/' . $filename);

        $this->content .= '<img style="" src="' . $url . '" alt="Uploaded Image">';
        return $this->dispatch('blogimageUploaded', $url);
    }

This code block is receiving image(s) in base64 so we need to decode it and convert it to a file we can save. Then we will resize the image so it will suit the purpose of what we need.

We will then store it in a public folder (my preference), get the URL of the image uploaded and pass it in an HTML-like way, and dispatch it to a listener in our view file.

We will then insert this block of code right below uploadImage function.

public function deleteImage($image)
    {
        $imageData = substr($image, strpos($image, ',') + 1);

        $length = strlen($imageData);

        $lastSixCharacters = substr($imageData, $length - 20);

        $filename = $lastSixCharacters . '.png';

        if (file_exists(public_path("files/blog_photos/" . $filename))) {
            unlink(public_path("files/blog_photos/" . $filename));
        }
    }

This function will be dispatched from the script section of create-blog-post blade file.

Then we insert this code block right underneath deleteImage

public function submitBlogPost()
    {
        $this->validate();

        $cover_photo = uniqid() . '.' . $this->cover_image->extension();
        $this->cover_image->storeAs('blog_cover_photo', $cover_photo, 'public_uploads');

        $blog = Blog::create([
            'title' => $this->title,
            'cover_image' => $cover_photo,
            'body' => $this->content,
            'tags' => $this->tags,
            'slug' => Str::slug($this->title)
        ]);

        return $this->dispatch('notify', 'Blog post created successfully', 'Success', 'success');
    }

This will submit the blog post, straightforward for an average Laravel dev.

Now we have come full circle on the functions required to create a blog post and Image upload in app/Livewire folder, now let's move to the view part.

Fourth step:
Goto to your resources/views/livewire/create-blog-post.blade.php file, then insert this code blocks

<div class="relative mt-4" wire:ignore>
      <label for="default-search" class="mb-2 text-sm font-medium text-gray-900">Body</label>
      <div id="editor" wire:model="content"></div>
    </div>

<script>
  var editor = new Quill('#editor', {
      theme: 'snow',
      modules: {
          toolbar: [
              ['bold', 'italic', 'underline'],
              [{ 'header': 1 }, { 'header': 2 }],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['image', 'link'],
              ['align', { 'align': 'center' }],
              ['clean']
          ]
      }
  });

  editor.getModule('toolbar').addHandler('image', function () {
      @this.set('content', editor.root.innerHTML);

      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');
      input.click();

      input.onchange = function () {
          var file = input.files[0];
          if (file) {
              var reader = new FileReader();

            reader.onload = function(event) {
                var base64Data = event.target.result;

                @this.uploadImage(base64Data);
            };
            // Read the file as a data URL (base64)
            reader.readAsDataURL(file);
          }
      };
  });

  let previousImages = [];

  editor.on('text-change', function(delta, oldDelta, source) {
      var currentImages = [];

      var container = editor.container.firstChild;

      container.querySelectorAll('img').forEach(function(img) {
          currentImages.push(img.src);
      });

      var removedImages = previousImages.filter(function(image) {
          return !currentImages.includes(image);
      });

      removedImages.forEach(function(image) {
          @this.deleteImage(image);
          console.log('Image removed:', image);
      });

      // Update the previous list of images
      previousImages = currentImages;
  });

  Livewire.on('blogimageUploaded', function(imagePaths) {
    if (Array.isArray(imagePaths) && imagePaths.length > 0) {
        var imagePath = imagePaths[0]; // Extract the first image path from the array
        console.log('Received imagePath:', imagePath);

        if (imagePath && imagePath.trim() !== '') {
            var range = editor.getSelection(true);
            editor.insertText(range ? range.index : editor.getLength(), '\n', 'user');
            editor.insertEmbed(range ? range.index + 1 : editor.getLength(), 'image', imagePath);
        } else {
            console.warn('Received empty or invalid imagePath');
        }
    } else {
        console.warn('Received empty or invalid imagePaths array');
    }
  });
});
</script>

In this code block, we create the HTML div where Quill editor will be loaded/referenced, notice the wire:ignore tag in the container of the div, this is to make sure whenever Livewire is updated, the Quill div will be ignored (will not update so our changes will not be cleared).

Now to the script part. The first part of the script initializes quill for the for the HTML and passes the toolbar required, you can add more functionality.

Then, the event listener called text-change lets us listen to changes we make in our content model in the quill editor, it allows us to set the change to our model anytime we type or make changes in the quill editor. We can also listen to deleted images, so once an image is deleted, we will dispatch the livewire deleteImage function.

Then the event listener referencing toolbar also allows us to listen to changes in images uploaded, notice that images are converted to base64 and are sent to the the livewire function called uploadImage.

Then the last listener which is a Livewire listener blogimageUploaded helps us handle images uploaded. It helps us to insert the image uploaded and its path from the uploadImage i.e

 $this->content .= '<img style="" src="' . $url . '" alt="Uploaded Image">';

return $this->dispatch('blogimageUploaded', $url);

Notice the img attribute and the URL being passed to the event dispatch from blogimageUploaded.

If you follow these steps, it will be a smooth ride making use of Quill rich editor in Laravel 10 and Livewire v3 application.

If you need clarity, kindly drop your questions.

Cheers!