Forem: Ranjeet Karki

Resize image and upload to amazon S3 bucket with Laravel and Vue

Ranjeet Karki — Wed, 29 Mar 2023 07:49:42 +0000

In this article, I will teach you how to resize and upload image to amazon s3 bucket with laravel and vuejs.

First we need to install two packages in our Laravel vuejs project
Flysystem S3 package : composer require league/flysystem-aws-s3-v3 "^3.0"
Intervention Image : composer require intervention/image

The Flysystem S3 package provides an S3 adapter for Flysystem. It easy to store and retrieve files from S3, and to perform operations like moving, copying, and deleting files with this package.
We are using Intervention Image library to resize the image.

Step1: let's create a bucket on amazon s3.

Search s3 and click the create button

Give a bucket name, I have given profile-image-uploader as a bucket name. You can leave AWS Region and Object Ownership as default as show in below image

Uncheck Block all public access and acknowledge it by checking the checkbox

Enable bucket versioning and click create button. Versioning-enabled buckets can help you recover objects from accidental deletion or overwrite. For example, if you delete an object, Amazon S3 inserts a delete marker instead of removing the object permanently. Read here

Finally, your bucket is created. Now, go to your bucket and create a new folder where you want to store your all images.

I will give folder name as images

Now, click the create button

Step2: Now, we will attach the policy to the images folder of our bucket profile-image-uploader.
To create the policy, go to AWS Policy Generator
and follow below steps:

Choose s3 Bucket Policy
Choose allow for effect
Put * for Principal
Choose getObject from Actions dropdown

5.For Amazon Resource Name (ARN), use this format

arn:aws:s3:::${BucketName}/${KeyName}
my bucket name is profile-image-uploader and keyName is folder name which is images, So my ARN will be like this
arn:aws:s3:::profile-image-uploader/images/*
use /* after the folder name which means everything inside the folder images

Finally, click generate policy button to get the JSON code, copy this JSON code as we need this.

Now, go to your bucket, click permissions tab, scroll down to the bucket policy. Here click edit, paste the JSON code and finally click the save button.

Step3: Now in this part we will create a user and get thekeys

First search IAM, click IAM to go Identity and Access Management (IAM) dashboard.

On the left side, you will see the Access management, click the users from the list.

Give the username, click the radio button I want to create an IAM user, and click the next button to go next page.

Now, on the next page set the permission. First, choose the third option Attach policies directly. Search for AmazonS3FullAccess and check it as shown below in the image.

Click the user and go to Security Credentails tab

Scroll down and click the access key

On the next page do as shown in the image below and click the next button.

Now copy your access key and Secret access key and save it somewhere as we need this.

That's all with S3 bucket. Now it's time to make an API with Laravel.

First, we will make a column name profile_picture in the users table. Open the users migration file and add the string column profile_picture as shown below in the image.

Now, run the migration with this command from your project directory php artisan migrate
Open you .env file and set the key values like this



AWS_ACCESS_KEY_ID=************
AWS_SECRET_ACCESS_KEY=***************
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=profile-image-uploader
AWS_USE_PATH_STYLE_ENDPOINT=false

You should have AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY while creating the user.

If you open filesystems.php file from config folder you will see s3 setup made by laravel.

Open you web.php and create two routes as below



Route::get('upload',[UserController::class, 'create']);

Route::post('upload/to/s3', [UserController::class, 'uploadImageToS3']);

The first route will be responsible for rendering a view upload.blade.php and the second will be responsible for processing a file. Now, I will make a upload.blade.php and load a vue js component Upload.vue in our view upload.blade.php



    public function index()
    {
        return view('upload'); 
    }

This will be my Upload vue js component
Upload.vue



<template>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="image-container">
                        <input type="file" ref="myImage" id="image-upload" class="form-control"
                            @change="updateProfilePicture()">
                        <p v-if="status">Uploading...<br>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" :style="{ width: `${progress}%` }"
                                :aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
                                {{ progress }}%
                            </div>
                        </div>
                        </p>
                        <br>
                        <p id="errorUploadingImage"></p>
                        <img class="mx-auto d-block" :src="profileImage">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const progress = ref('')
const status = ref(false)
const profileImage = ref('')
const myImage = ref(null)

const updateProfilePicture = () => {}

</script>

This is our vue upload component

This is a Vue template and we have a card with an input field for uploading an image, a progress bar to indicate the status of the upload, and an image container to display the uploaded image. The template uses the v-if directive to show the progress bar and the "Uploading..." message only if status is true. status is a reactive variable defined in the script section of the component. The input field for uploading an image is defined using the input HTML element with a type of "file" and a reference to the element using ref="myImage". The @change event listener is used to call the updateProfilePicture method when a file is selected for upload. The progress bar is defined using the Bootstrap progress-bar class with a dynamic width that is bound to the progress reactive variable. The image container is defined using the img HTML element with a src attribute that is bound to the profileImage reactive variable. profileImage is initially an empty string but is updated with the URL of the uploaded image once the upload is complete. Finally, there is an empty p element with an ID of errorUploadingImage that is used to display any errors that occur during the upload process.

Now, lets process image within a updateProfilePicture



<script setup>
import { ref } from 'vue'
const progress = ref('')
const status = ref(false)
const profileImage = ref('')
const myImage = ref(null)

const updateProfilePicture = () => {
    status.value = true
    const image = myImage.value.files[0];
    const formData = new FormData();
    formData.append('image', image)
    axios.post('/upload/to/s3', formData, {
        headers: {
            'Content-Type': 'multipart-formdata'
        },
        onUploadProgress: (progressEvent) => {
            progress.value = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
            );
        },
    }).then((response) => {
        status.value = false
        profileImage.value = response.data.url
    }).catch((error) => {
        document.getElementById('errorUploadingImage').innerText = 'Error in uploading image';
        console.log(error)
    })
}

</script

Inside updateProfilePicture function, I have set the status variable to true, indicating that an upload is in progress. I then created a new FormData object and appends the selected image file to it with the key 'image'. This FormData object will be used to send the file to the server using a POST request. The code then uses Axios to send the POST request to the URL /profileImage/upload. The formData object is passed as the second parameter to the post() method. It also sets the 'Content-Type' header to 'multipart-formdata'. The onUploadProgress option is used to track the upload progress. It updates the progress variable, which is bound to the progress bar in the Vue template, with the percentage of the file that has been uploaded. If the request is successful, the function sets the status variable to false, indicating that the upload is complete, and sets the profileImage variable to the URL of the uploaded image returned in the response data. If there is an error, it displays an error message on the page and logs the error to the console.

Now, let's work on uploadImageToS3 method of UserController to upload the file to aws s3 bucket.



 public function uploadImageToS3(Request $request): JsonResponse
 {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
        ]);

        if ($request->hasFile('image')) {
            //extracts the uploaded file
            $image = $request->file('image');
          //generates a unique filename for it using hashName()
            $filename = $image->hashName();

            // Resize the image to a maximum width of 150 pixels, this is form Intervention Image library
            $img = Image::make($image->getRealPath())->resize(150, null, function ($constraint) {
                $constraint->aspectRatio();
            });

            // Upload the resized image to S3
            $path = 'images/' . $filename;
            Storage::disk('s3')->put($path, $img->stream()->__toString());

            // Update the user's profile_picture with the S3 object URL
            User::where('id', auth()->id())->update([
                'profile_picture' =>  $awsPath = Storage::disk('s3')->url($path)
            ]);

            return response()->json(['url' => $awsPath], Response::HTTP_OK);

        }
  }

Above I have written a comment for each line of code to make it easy for you to understand. The function returns a JsonResponse, make sure you use Illuminate\Http\JsonResponse; The function validates the image file uploaded with the request to ensure that it is an image file (jpeg, png, or jpg), is no larger than 2048KB, and is required for the request to be considered valid. After validating the image, we resize the image with Intervention Image Library and uploaded the resized image to the s3 bucket.$img->stream()->__toString() is used to get the raw image data as a string, which is then passed to the put() method of the S3 disk driver to upload the image. Finally, we will update the user profile_picture column with S3 Image URL which will be something like this
https://profile-image-uploader.s3.amazonaws.com/images/01WKdCYuBFSdQfwCENxz5eECU4jsW7xWxqfjrLUr.jpg

Thank you for reading.I hope you enjoyed it!

Integrate Mailchimp with Laravel and automate emails

Ranjeet Karki — Thu, 13 Oct 2022 00:49:47 +0000

In this post, I will show you how to add user to the subscription list of Mailchimp. For this example, we will use the default registration of Laravel. However, we will add a few more fields and do a slight modification to the default registration. Importantly, we will add a subscription checkbox and while registering an account, if the user clicks the subscription checkbox, we will save data to our database and also add user details such as email address, first name, last name,address and phone number of user to the list of Mailchimp. If the user does not check the subscription checkbox we will save user information only to our database.

Step1: Let's start by modifying the registration form
resources/views/auth/register.blade.php
I will remove the name field and add the first name and last name fields instead. I will also add the phone and address filed. Finally, I will create a checkbox. Our form looks as below.



@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ __('Register') }}</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf

                            <div class="row mb-3">
                                <label for="firstname"
                                    class="col-md-4 col-form-label text-md-end">{{ __('First name') }}</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('name') is-invalid @enderror"
                                        name="firstname" value="{{ old('firstname') }}" required autocomplete="firstname"
                                        autofocus>

                                    @error('firstname')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="lastname"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Last name') }}</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('lastname') is-invalid @enderror"
                                        name="lastname" value="{{ old('lastname') }}" required>

                                    @error('lastname')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="email"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control @error('email') is-invalid @enderror"
                                        name="email" value="{{ old('email') }}" required>

                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="address"
                                    class="col-md-4 col-form-label text-md-end">{{ __(' Address') }}</label>

                                <div class="col-md-6">
                                    <input id="address" type="text"
                                        class="form-control @error('address') is-invalid @enderror" name="address"
                                        value="{{ old('address') }}" required>

                                    @error('address')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="phone" class="col-md-4 col-form-label text-md-end">{{ __(' Phone') }}</label>

                                <div class="col-md-6">
                                    <input type="number" class="form-control @error('phone') is-invalid @enderror"
                                        name="phone" value="{{ old('phone') }}" required>

                                    @error('phone')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="password"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password" type="password"
                                        class="form-control @error('password') is-invalid @enderror" name="password"
                                        required autocomplete="new-password">

                                    @error('password')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row mb-3">
                                <label for="password-confirm"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Confirm Password') }}</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control"
                                        name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                            <label
                                class="col-md-4 col-form-label text-md-end form-check-label">{{ __('Subscribe to our email list') }}</label>
                            <div class="col-md-6 form-check-inline">
                                <input type="checkbox" class="form-check-input" name="subscribe">
                            </div>

                            <div class="row mb-0">
                                <div class="col-md-6 offset-md-4  text-center">
                                    <button type="submit" class="btn btn-success">
                                        {{ __('Register') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

if you visit/register, You will see your form.

Step2: Let's make changes in User.php, RegisterController.php and user migration file.
First, open your user migration file which is located in the app/database/migrations folder. I will remove the name from there and add the first name and last name as strings. I will also add the address and phone as a string and this could be nullable. My user migration file looks like this.



<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('firstname');
            $table->string('lastname');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->string('address')->nullable();
            $table->string('phone')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

Finally, run php artisan migrate to create tables
Step3:In User.php add firstname,lastname,address,and phone in fillable array.

Now, User.php looks like this:



<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array<int, string>
     */
    protected $fillable = [
        'firstname',
        'lastname',
        'email',
        'password',
        'address',
        'phone'
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array<int, string>
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array<string, string>
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Step4:
In RegisterController.php, remove a name from create method and validator and add firstname and lastname.
Now, our RegisterController.php looks like this:



<?php

namespace App\Http\Controllers\Auth;

use App\Models\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use App\Providers\RouteServiceProvider;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

class RegisterController extends Controller
{
    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;


    public function __construct()
    {
        $this->middleware('guest');
    }

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'firstname' => ['required', 'string', 'max:255'],
            'lastname' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\Models\User
     */
    protected function create(array $data)
    {
        return User::create([
            'firstname' => $data['firstname'],
            'lastname' => $data['lastname'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'address' =>  $data['address'],
            'phone' => $data['phone']
        ]);
    }
}

Now, you should be able to create an account.
Step5:
Now, let's work on Mailchimp. We will create a list where we will store our subscribers, and we will also create an API key in Mailchimp. The two things we need from Mailchimp are the list id(Audience Id) and an API key. First, create an account on Mailchimp if you don't have an account. Click this link Create Your First Audience, It will show you how to create an Audience and get your Audience Id and API key.
Refer to the picture below to create an audience and get the API key.

As you can see in the above picture I have an audience with name customers.
Copy the audience id and save it somewhere as we need this later.

By default, Mailchimp has a first name(FNAME), last name(LNAME), address(ADDRESS), phone(Phone Number), Tags, Language, Email Marketing, Source, Contact Rating, Date Added, and Last Changed. But you can create your custom field. This can be done by clicking Audience fields and *|MERGE|* tags on Settings Menu as shown in the picture below.

Let's say you want to collect the user's date of birth, you can simply click add field and select birthday, and choose one of the data formats, either DD/MM or MM/DD.

Referring to the above picture, you can change untitled to Birthday(relevant name) and MMERGE5(could be different in your case such as MMERGE6, MMERGE7, etc) to BIRTHDAY.
The birthday will be set as a header in the Mailchimp audience table and BIRTHDAY will be used as a key that accepts a value date of birth,(DD/MM, or MM/DD).
You can also mark it as required. If you mark this field as required, you must send this while making an API call otherwise Mailchimp will throw an error.
There are also other fields available in Mailchimp such as Text, Number, Date, Address, etc.

Get API Key
Go to your account and click the Extras menu, you will see an API keys dropdown.

You will see api key something like this fcb94dcb70e2v520ba57b458e6b76g4r-us5
Your API key everything before - . Here us5 is data center and in my case it is United state.
API Key:fcb94dcb70e2v520ba57b458e6b76g4r

Step6:
Now, let's work on implementing the feature. We will save user records in our database and also some information in Mailchimp. We can write the whole logic within the create method of RegisterController, but I am going to use Event and Listener concepts to perform this task.

Event-listener is a great way to clean up your code from a controller. Obviously, we don't want all the logic within the single method as it might make the code looks messy and complicated. So we want to separate our logic and still want to achieve the same functionality. Events are something that has occurred in your application and listeners are the set of logic that responds to the events. Let's say the User registered to the application, This is an event and you want to perform certain tasks such as sending a verification code to the user's email, and adding a user to the subscription list. In our case, registering a user is an event. Our application will listen to this event and subscribe users to the Mailchimp list.
We can run php artisan make:event Eventname and php artisan make:listener Listenername to create Event and Listener. Note that one event can have more than one listener.
This command will create an Event in App\Events folder and a Listener in App\Listener folder. Finally, we will register our event and listeners in App\Providers\EventServiceProvider.phpfile as below.



protected $listen = [
   Registered::class => [
     SendEmailVerificationNotification::class,
   ],
   Eventname::class => [
     Listenername::class
     //another listener class...
   ]
];

Now let's make RegistrationSuccessful event with command php artisan make:event RegistrationSuccessful and SubscribeUserToMailchimp listener with command php artisan make:listener SubscribeUserToMailchimp.These command will generate two files RegistrationSuccessful.php in app/Events SubscribeUserToMailchimp.php in app/Listeners.These two files look like this.
RegistrationSuccessful.php



<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class RegistrationSuccessful
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('channel-name');
    }
}

and SubscribeUserToMailchimp.php



<?php

namespace App\Listeners;

use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;

class SubscribeUserToMailchimp
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  object  $event
     * @return void
     */
    public function handle($event)
    {
        //
    }
}

Step7:
Let's register Event and Listener to EventServiceProvider.phpand it looks like this.



<?php

namespace App\Providers;

use App\Events\RegistrationSuccessful;
use Illuminate\Auth\Events\Registered;
use App\Listeners\SubscribeUserToMailchimp;
use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event to listener mappings for the application.
     *
     * @var array<class-string, array<int, class-string>>
     */
    protected $listen = [
        Registered::class => [
            SendEmailVerificationNotification::class,
        ],

        RegistrationSuccessful::class => [
            SubscribeUserToMailchimp::class,
        ],
    ];

    /**
     * Register any events for your application.
     *
     * @return void
     */
    public function boot()
    {
        //
    }

    /**
     * Determine if events and listeners should be automatically discovered.
     *
     * @return bool
     */
    public function shouldDiscoverEvents()
    {
        return false;
    }
}

Registered and SendEmailVerificationNotification classes are by default given by Laravel. We register RegistrationSuccessful class as an event and the SubscribeUserToMailchimp as a listener class.

Step8:
Now, let's Work on RegisterController.php, on create method we will check if the user has checked the checkbox(Subscribe to our email list). if yes we will create an event and pass user information to the event class for further processing, also we will save user information in our database. If the user has not checked the checkbox then we will not create an event.
So, our final RegisterController.php looks like this.



<?php

namespace App\Http\Controllers\Auth;

use App\Models\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use App\Events\RegistrationSuccessful;
use App\Providers\RouteServiceProvider;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

class RegisterController extends Controller
{

    use RegistersUsers;

    protected $redirectTo = RouteServiceProvider::HOME;

    public function __construct()
    {
        $this->middleware('guest');
    }

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'firstname' => ['required', 'string', 'max:255'],
            'lastname' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    protected function create(array $data): User
    {
        $user = User::create([
            'firstname' => $data['firstname'],
            'lastname' => $data['lastname'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
            'address' =>  $data['address'],
            'phone' => $data['phone']
        ]);

        if (request()->has('subscribe')) {
            RegistrationSuccessful::dispatch($user);
        }

        return $user;
    }
}

It’s pretty straightforward. We dispatched the event and you can do this in two ways, either RegistrationSuccessful::dispatch('something'); or event (new RegistrationSuccessful('something'));. So now our
RegistrationSuccessful event class will receive $user which will be declared as public property, so that it will be accessible to our Listener class(SubscribeUserToMailchimp)

Step9:RegistrationSuccessful.php



<?php

namespace App\Events;

use App\Models\User;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;

class RegistrationSuccessful
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

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

    public function broadcastOn()
    {
        return new PrivateChannel('channel-name');
    }
}

Step10:
Now, let's work on config/services.php and .env files. We have an audience id and API key from Mailchimp which we will register in our .envfile.
First services.php



'mailchimp' => [
    'key' => env('MAILCHIMP_KEY'),
    'listid' => env('MAILCHIMP_LIST_ID'),
 ],

And in .env file set the api key and audience id



MAILCHIMP_KEY=Your_api_key_from_mailchimp
MAILCHIMP_LIST_ID=Your_audience_id_from_mailchimp

Step11:
Now we are ready to work on our listener class,SubscribeUserToMailchimp.php.
First, Let's see the API documentation of Mailchimp. Here is the link Marketing API
Based on API, the base URL is https://${dc}.api.mailchimp.com/3.0/, Where dc is the data center. You can find your data center in your API key. In my case it is us5. So my base URL will be https://us5.api.mailchimp.com/3.0/. If the last part of your Mailchimp API key is us6, all API endpoints for your account are available at https://us6.api.mailchimp.com/3.0/.Here is the Documentation

So, now our SubscribeUserToMailchimp.phplooks like this.



<?php

namespace App\Listeners;

use Exception;
use Illuminate\Http\Response;
use Illuminate\Http\JsonResponse;
use Illuminate\Support\Facades\Http;

class SubscribeUserToMailchimp
{
    public string $key;
    public string $listId;
    public const BASE_URL = "https://us5.api.mailchimp.com/3.0/";

    public function __construct()
    {
        $this->key = config('services.mailchimp.key');
        $this->listId = config('services.mailchimp.listid');
    }

    public function handle($event): JsonResponse
    {
        try {
            $response = Http::acceptJson()
                ->withToken($this->key)
                ->post(self::BASE_URL . 'lists/' . $this->listId . '/members', [
                    'status' => 'subscribed',
                    'email_address' => $event->user->email,
                    'merge_fields' => [
                        'FNAME' => $event->user->firstname, 'LNAME' => $event->user->lastname,
                        'ADDRESS' => [
                            'addr1' => $event->user->address,
                            'city' => 'n/a',
                            'state' => 'n/a',
                            'zip' => 'n/a',
                            'country' => 'n/a'
                        ], 'PHONE' => $event->user->phone
                    ],
                ]);

            $response->throw();

            $responseData = $response->body();
            $decodedResponse = json_decode($responseData, true);

            if ($response->status() == Response::HTTP_OK) {
                return response()->json([
                    'success' => true,
                    'message' => 'member successfully added to mailchimp list',
                    'responseBody' => $decodedResponse,
                ]);
            }
        } catch (Exception $e) {
            return response()->json([
                'error' => $e->getMessage(),
            ], Response::HTTP_BAD_REQUEST);
        }
    }
}

Now, let me explain what is happening above. As you can see I have set the base URL to const BASE_URL, and in the constructor, we received the API key and listid(ie: audience id) from our config/services/mailchimp array, and the keys are set in our .envfile. We have assigned this list id and API key to $listid and $key respectively and declared them as public.
The important thing to note is that any property defined as public in the Event(eg: RegistrationSuccessful) class can be accessed by to listener class(SubscribeUserToMailchimp). For example, in the Event class, we have a public $eventwhich we can access in the Listener class as $event->user. We expect our handle method to return JsonResponse.

Here I have used Guzzle HTTP client, Which is the wrapper around Guzzle. It allows making HTTP requests to communicate with other web applications(In our case, it is Mailchimp). It is available in Laravel 8 and above version. In the above, acceptJson method specify that your application expects the application/json content type in response to your request. The wthToken method adds a bearer token to the request's Authorization header. $response->throw() will throw an exception if a client or server error occurred. We wrapped this logic within the try and catchblock.
As per the Mailchimp documentation FNAME, LNAME, PHONE, ADDRESS, etc should be included within merge_fields, however, email and status should be outside of merge_fields. Learn about Merge field Mailchimp address field expects five parameters: Address Line 1 (addr1), City (city), State (state), Zip code (zip), Country (country). My form does not have city, state, zip code, and country fields, So I have mentioned 'n/a'.

By default, Laravel automatically includes Guzzle. if you are using laravel version below 8, you may install it again via Composer: composer require guzzlehttp/guzzle
If you want to send requests with Guzzle, You could do something like this.



$client->request('POST', ＄url, [
    'headers' => [
        'Authorization' => "Barer {$token}",
        'Content-type' => 'application/json',
    ],
    'json' => [
        'foo' => 'bar'
        'merge_fields' => [ ]
    ]);

Now, If you create an account by checking the checkbox, it will save user registration information in your database and the user will also be added to the Mailchimp audience list.

Queued Event Listeners

As you might have noticed the browser has to wait for sometime for response back from mailchimp once user was successfully added to mailchimp audience list.This process can be done in the background with queue. By doing this user will be redirected back quickly and tasks will be performed in the background. For this you should implement ShouldQueue in SubscribeUserToMailchimp(class SubscribeUserToMailchimp implements ShouldQueue). Make sure you imported Illuminate\Contracts\Queue\ShouldQueue. Also, you have to create a table php artisan queue:table and run php artisan migrate and , in .env change QUEUE_CONNECTION=sync to QUEUE_CONNECTION=database
Final step is to run php artisan queue:work

Check user in Mailchimp and update details

Sometime we may come in a situation where user can fill the many forms with the same email address. In that case, Mailchimp will not allow you to insert duplicate email address that already exist within the list. The best way to handle this situation is to find the user based on email and update the other details of user based on email.If you check Mailchimp documentation, all it need is {subscriber_hash} as a last part of URL. So we have to convert email address to hash value. The md5() function calculates the MD5 hash of a string.



public function userExistInMailchimp(): bool
{
    $response = Http::withToken($this->token)
       ->acceptJson()
       ->get(self::BASE_URL . 'lists/' . $this->listId . '/members/' . md5(strtolower($userEmail)));

     return $response->status() == Response::HTTP_OK ? true : false;
 }

I have wrapped email address that comes from the form with md5. This method will return true if the user's email already exist in the audience list, otherwise, it will return false. Now based on this result we can make an update.

Now, to make update we could do something like this.



$response = Http::acceptJson()
        ->withToken($this->token)
        ->put(self::BASE_URL . $this->listId . '/members/' . md5(strtolower($userEmail)),  ['merge_fields' => ['FNAME' => $firstname, 'LNAME' => $lastname,'ADDRESS'=> $address, 'PHONE'=> $phone]);

Create an automated email with Mailchimp

Mailchimp automation sends automated emails to subscribers. For example, Mailchimp can send an automated email when someone subscribes to your audience or purchases a certain product. To create a free automated welcome email, first, click All campaigns under Campaigns on the left-hand side of the menu as shown below in the picture.

Step1:

Step2:

Step3:

Step4:

Thank you for reading this. I hope this was helpful 😊

Laravel chaining multiple jobs with an example

Ranjeet Karki — Fri, 23 Sep 2022 03:13:03 +0000

In this article, I will show you how to perform Job chaining in laravel. For this example, I am uploading an excel file with thousands of rows. Laravel queue will allow importing an excel in the background without making the user wait on the page until the importing has been finished. Once the importing excel finishes, we will send an email to the user to inform him that the file was imported successfully. Job chaining helps to process multiple jobs sequentially. In our example importing an excel is one job and sending a notification email is another job. However, your case might be different. You may want to register a user and send a welcome message once they successfully registered, or you may want to process the user's orders and send an invoice to the user's email. In all these cases, you want your application to run quickly. This can be achieved with a Laravel queue that allows us to run tasks asynchronously.

For this, I am using
Laravel 9: https://laravel.com
Laravel-Excel package: https://laravel-excel.com
Mailtrap to receive the email: https://mailtrap.io

Let's start:
Part1:
Install excel package: composer require maatwebsite/excel
add the ServiceProvider in config/app.php



'providers' => [
    Maatwebsite\Excel\ExcelServiceProvider::class,
]

add the Facade in config/app.php



'aliases' => [
    'Excel' => Maatwebsite\Excel\Facades\Excel::class,
]

Part2: Create a migration file for order
My excel has orders information so I want to create an orders table and model

php artisan make:model Order -m



<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('orders', function (Blueprint $table) {
            $table->id();
            $table->string('order');
            $table->string('order_date');
            $table->string('order_qty');
            $table->string('sales');
            $table->string('ship_model');
            $table->string('profit');
            $table->string('unit_price');
            $table->string('customer_name');
            $table->string('customer_segment');
            $table->string('product_category');
            $table->timestamps();
        });
    }

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

run php artisan queue:table to create jobs table. A jobs table hold the information about queue, payload, number of attempts etc of unprocessed jobs. Any information about failed jobs will be stored in the failed_jobs table.
and finally migrate these files by running command php artisan migrate
Part3: Let's work on .envfile
change QUEUE_CONNECTION=sync to QUEUE_CONNECTION=database
also, login to mailtrap and get your username and password
and the setting will be as below:



MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_username_from_mailtrap
MAIL_PASSWORD=your_password_from_mailtrap
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}

Part 4: Now let's make a OrdersImport class
php artisan make:import OrdersImport --model=Order
The file can be found in app/Imports

As you can see my excel headings are not well formatted, there is space between two texts. Laravel excel package can handle this very easily with Maatwebsite\Excel\Concerns\WithHeadingRow;
Check this:Click here

So after implementing WithHeadingRow, my Excel Order Id has changed to order_id, Order Date has changed to order_date, and so on. You can check this by doing dd($row) below.



<?php

namespace App\Imports;

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

class OrdersImport implements ToModel,WithHeadingRow
{
    /**
    * @param array $row
    *
    * @return \Illuminate\Database\Eloquent\Model|null
    */
    public function model(array $row): Order
    {
        return new Order([
            'order'     => $row['order_id'],
            'order_date'    => $row['order_date'], 
            'order_qty' => $row['order_quantity'],
            'sales' => $row['sales'],
            'ship_model' => $row['ship_mode'],
            'profit' => $row['profit'],
            'unit_price' => $row['unit_price'],
            'customer_name' => $row['customer_name'],
            'customer_segment' => $row['customer_segment'],
            'product_category' => $row['product_category'],
        ]);
    }
}

Part 5: let's make a route



Route::get('upload', [UploadController::class,'index']);
Route::post('upload', [UploadController::class,'store'])->name('store');

The index method will render the view which has an upload form and store method will handle upload.
Part6: let's make UploadController with command php artisan make:controller UploadController

Part7: let's make an upload form in resources/views with the name index.blade.php



@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ ('Upload') }}</div>
                    <div class="card-body">
                        <form action="{{ route('store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <input type="file" name="order_file" class="form-control" required>
                            <button class="btn btn-primary" id="btn" type="submit">Upload </button>
                        </form> 
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Part8: Now we will make two methods in UploadController.php index method will return a view that has an upload form and the store method will have a logic to store the excel data in the database and send the user an email once the task is finished. However, we will use job classes to perform these actions.



public function index()
{
    return view('index');
}

public function store()
{
}

Part9: Now let's make a two Job class with the name ProcessUpload and SendEmail.These two files will be located in the app/Jobs directory of your project normally containing only a handle method that is invoked when the job is processed by the queue. Every job class implements the ShouldQueue interface and comes with constructor and handle() methods.
php artisan make:job ProcessUpload php artisan make:job SendEmail

ProcessUpload.php



<?php

namespace App\Jobs;

use App\Imports\OrdersImport;
use Illuminate\Bus\Queueable;
use Maatwebsite\Excel\Facades\Excel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Contracts\Queue\ShouldBeUnique;

class ProcessUpload implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public function __construct()
    {
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        // we will write our logic to import a file 
    }
}

Part 10: Now let's work on the store method of UploadController.php. Here we will store the excel file in the storage directory and dispatch the path and email to ProcessUpload.php and SendEmail.php respectively. We will use Job Chaining, which allows us to perform multiple jobs to group together and processed them sequentially. To achieve this we have to make use of the Bus facade and call the chain method.
Now, our store method looks like this:



public function store(Request $request): string
{
    $file = $request->file('order_file')->store('temp'); 
    $path = storage_path('app'). '/' .$file;  
    $email = 'ab@gmail.com'; // or auth()->user()->email
    Bus::chain([
    new ProcessUpload($path),
    new SendEmail($email)
    ])->dispatch();

    return 'Your file is being uploaded. We will email you once it is completed';
}

Here we just passed some data to ProcessUpload.php and SendEmail.php and return a message to notify the user, remember to use use Illuminate\Support\Facades\Bus;

Now our UploadController.php looks like this



<?php

namespace App\Http\Controllers;

use App\Jobs\SendEmail;
use Illuminate\View\View;
use App\Jobs\ProcessUpload;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Bus;

class UploadController extends Controller
{
    public function index(): View
    {
        return view('index');
    }

    public function store(Request $request): string
    {
        $file = $request->file('order_file')->store('temp');
        $path = storage_path('app') . '/' . $file;
        $email = 'ab@gmail.com'; //auth()->user()->email
        Bus::chain([
            new ProcessUpload($path),
            new SendEmail($email)
        ])->dispatch();

        return 'Your file is being uploaded. We will email you once it is completed';
    }
}

Note:

Jobs can also be arranged in chains or batches. Both allow multiple jobs to be grouped together. The main difference between a batch and a chain is that jobs in a batch are processed simultaneously, Whereas jobs in a chain are processed sequentially. By making use of the chain method if one job fails to process the whole sequence will fail to process, which means if importing an excel file fails, sending a notification email will never be proceeded. So based on the type of work you want to perform, either you can use batch() or chain(). One advantage of using batch is that it helps to track the progress of your job. All the information like the total number of jobs, number of pending jobs, number of failed jobs etc will be stored in a job_batches table

Now let's work on ProcessUpload.php and SendEmail.php
first ProcessUpload.php



<?php

namespace App\Jobs;

use App\Imports\OrdersImport;
use Illuminate\Bus\Queueable;
use Maatwebsite\Excel\Facades\Excel;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Contracts\Queue\ShouldBeUnique;

class ProcessUpload implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

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

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle(): void
    {
        Excel::import(new OrdersImport, $this->data);    
    }
}

As you can see in the handle method, we have received the file name as $this->data,and we used the Excel facade provided by the package to send those excel data to OrdersImport, and the rest OrdersImport will handle. OrdersImport will insert data into the database.

Remember to use Maatwebsite\Excel\Facades\Excel; as above

Part11: Now before we work on SendEmail.php, let's make Mailables with the name NotificationEmail.php and
These classes will be stored in the app/Mail directory.

php artisan make:mail NotificationEmail

This is a very simple class that looks like this



<?php

namespace App\Mail;

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

class NotificationEmail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('notification.mail');
    }
}

Now let's make mail.blade.php inside resources/views/notification folder

mail.blade.php



<!DOCTYPE html>
<html>
<head>
    <title>Success Email</title>
</head>
<body>
<p>Congratulation! Your file was successfully imported.😃</p>
</body>
</html>

The message is simple. We just want to send the above message to user email when file imports finish .The final part is to work on SendEmail.php

Let's work on SendEmail.php



<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use App\Mail\NotificationEmail;
use Illuminate\Support\Facades\Mail;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Contracts\Queue\ShouldBeUnique;

class SendEmail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

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

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle(): void
    {
        Mail::to($this->email)->send(new NotificationEmail());
    }
}

To send a message, we use Mail facade. We used the Mail facade and specified the recipient's email. Finally, we are sending mail view to user which is specified in NotificationEmail class

Now final part is to run the queue and upload the excel file.
To run the queue worker php artisan queue:work inside your project directory. A queue worker is a regular process that runs in the background and begin processing the unprocessed job.
Now. visit /upload and upload a excel file

Now you should see this in your terminal

This means both tasks, importing an excel file and sending an email was successful.
Now let's check mailtrap for the email, and there should be the email sent to you.

Delete files from Storage

Did you notice we have stored all the excel files in the storage folder of our app? There is no reason to keep these files there forever as we no longer need them once we import all their data into the database.Therefore, we have to delete it from the storage. For this let's make another job with the name DeleteFile.
php artisan make:job DeleteFile
Now, add this in UploadController within the store method as below:



 public function store(Request $request): string
 {
      $file = $request->file('order_file')->store('temp');
      $path = storage_path('app') . '/' . $file;
      $email = 'ab@gmail.com'; //auth()->user()->email
      Bus::chain([
          new ProcessUpload($path),
          new SendEmail($email),
          new DeleteFile($file)// new class added
      ])->dispatch();

      return 'Your file is being uploaded. We will email you once it is completed';
  }

We passed $file in DeleteFile class, if you dd($file), you will get something like thistemp/M3aj6Ee29CdgmrW9USwUezmEHpBmlV0DkXP8P0ce.xlsx where temp is the folder inside storage/app directory that store all the uploaded excel files.Now, we have to write the logic in DeleteFile.php in handle method to delete the file from storage.
So, our DeleteFile.php looks like this:



<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldBeUnique;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Queue\SerializesModels;
use Illuminate\Support\Facades\Storage;

class DeleteFile implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

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

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        unlink(storage_path('app/'. $this->file));
    }
}

Restart queue: php artisan queue:work

The unlink() function is an inbuilt function in PHP which is used to delete files

Dealing With Failed Jobs

Sometime things do not work as expected. There may be a chance that jobs fail. The good thing is that Laravel provides a way to retry failed jobs. Laravel includes a convenient way to specify the maximum number of times a job should be attempted.
Check this
In a job class, we can declare the public $tries property and specify the number of times you want Laravel to retry the process once it fails. You can also calculate the number of seconds to wait before retrying the job. This can be defined in the $backoff array. Let's take the example of SendEmail.php and let's throw the plain exception within the handle method and also declare $tries and $backoffproperty.
SendEmail.php



<?php

namespace App\Jobs;

use Illuminate\Bus\Queueable;
use App\Mail\NotificationEmail;
use Illuminate\Support\Facades\Mail;
use Illuminate\Queue\SerializesModels;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Foundation\Bus\Dispatchable;

class SendEmail implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public string $email;
    public $tries = 3;
    public $backoff = [10, 30, 60];

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

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle(): void
    {
        throw new Exception();
       // Mail::to($this->email)->send(new NotificationEmail());
    }
}

It's a good idea to include $tries and $backoff property in every job class.In the above example, I have commented on the Mail sending feature and declared a plain exception just to test the retry features of Laravel.Now restart the queue: php artisan queue:work and upload the file.
Now you should see SendEmail job was processed three times because we have mentioned public $tries = 3 and
when the first job failed, Laravel tried after 10 seconds, when the second job failed, Laravel tried in 30 seconds, and when the third job failed Laravel tried in 60 seconds. If it still fails after the third attempt, failed jobs will be stored in the failed_jobs table.

I hope this was helpful
Thank you :)

Google place autocomplete API with Laravel

Ranjeet Karki — Wed, 20 Jul 2022 06:36:00 +0000

In this post, I will show you how you can create a Google autocomplete address using Google Place API. You might have seen on some websites while filling out the address form it will automatically suggest the address and on clicking that address, it will fill in the rest of the fields like street line1, street line2, city, state, postcode etc.

So what do we need to follow this tutorial?

Setup laravel project: composer create-project laravel/laravel googleautocomplete
Install Guzzle: composer require guzzlehttp/guzzle
Valid Google API key
Check the Google Place Autocomplete API Docs: Google Place Autocomplete Api

Let's make a controller with index method that returns a form



php artisan make:controller GoogleAutocompleteController

GoogleAutocompleteController.php



<?php

namespace App\Http\Controllers;

use Illuminate\View\View;
use Illuminate\Http\Request;

class GoogleAutocompleteController extends Controller
{
    public function index(): View
    {
        return view('form');
    }
}

Inside resources/views/form.blade.php
I have created a simple form with bootstrap that has a street address field, city field, state field, postcode field, and country field.



@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Google autocomplete</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="streetaddress">Street address</label>
                            <input type="text" class="form-control ui-widget autocomplete-google" id="street_address_1">
                        </div>

                        <div class="form-group">
                            <label for="streetaddress2">Street address 2</label>
                            <input type="text" class="form-control" id="street_address_2">
                        </div>

                        <div class="form-group">
                            <label for="city">City</label>
                            <input type="text" class="form-control" id="city">
                        </div>

                        <div class="form-group">
                            <label for="state">State</label>
                            <input type="text" class="form-control" id="state">
                        </div>

                        <div class="form-group">
                            <label for="postcode">Postcode</label>
                            <input type="text" class="form-control" id="postcode">
                        </div>

                        <div class="form-group">
                            <label for="country">Country</label>
                            <input type="text" class="form-control" id="country">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

In the above form, I have added a class ui-widget in the Street address field because I am using jQuery autocomplete library to pop up the address returned by Google API when the user actually starts tying the address in the Street address field. This class will enable our autocomplete.

Finally, we will register a route in web.php to view our form.



Route::get('/autocomplete',[GoogleAutocompleteController::class,'index']);

Now, when you visit the /autocomplete url in the browser, you will see this form

Part 2
In this part, we will use jQuery autocomplete library and place API. Google place API will return the place id and based on the place id we will fill all the fields of the form.

Step1: go to jQuery autocomplete
copy jquery-ui.js and jquery-ui.css links and paste it in your app.blade.php

Now my layouts/app.blade.php looks like this



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

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

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

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    {{ config('app.name', 'Laravel') }}
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4">
            @yield('content')
            @yield('script')
        </main>
    </div>
</body>
</html>

As you can see I have added @yield('script') above, which means everything that I wrapped within the script will be injected here. Later we will wrap javascript within @section('script')//..js code @endsection in form.blade.php

Step2: go to Google Place API
You can see types, You can restrict results from a Place Autocomplete request to be of a certain type by passing the types parameter. This parameter specifies a type or a type collection, as listed in Place Types. If nothing is specified, all types are returned.
We need address types

So, copy this URL and open your postman or browser, paste it and hit the send button.
https://maps.googleapis.com/maps/api/place/autocomplete/json?input= kathmandu nepal &types=address&key=YOUR_KEY

You should get a response like this:

Note: we are interested in the place_id of the response. This is because with the help of place_id, we can get country, street address, postcode, city etc.

Step3: Open your config/services.php and set the key



'googlekey'=>[
    'key'=> env('GOOGLE_KEY', null),
 ],

and in your .env file

GOOGLE_KEY=YOUR_GOOGLE_KEY

Step4: Now let's make one more route in web.php



Route::get('/placeid',[ GoogleAutocompleteController::class,'getPlaceId'])->name('placeid');

and GoogleAutocompleteController.php looks like this



<?php

namespace App\Http\Controllers;

use Illuminate\View\View;
use Illuminate\Http\Request;

class GoogleAutocompleteController extends Controller
{

    public function index(): View
    {
        return view('form');
    }

    public function getPlaceId(Request $request)
    {
        //get user-typed address via Ajax request
    }

}

Step5: In our form.blade.php let's add jQuery code to enable autocomplete dropdown, ajax request to send user typed address to our endpoint /placeId



 <script>
        $(document).ready(function() {
            $(".autocomplete-google").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/placeid',
                        type: 'GET',
                        dataType: "json",
                        data: {
                            inputData: request.term,
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
            });
        });
  </script>

Now our complete resources/form.blade.php looks like this



@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Google autocomplete</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="streetaddress">Street address</label>
                            <input type="text" class="form-control ui-widget autocomplete-google" id="street_address_1">
                        </div>

                        <div class="form-group">
                            <label for="streetaddress2">Street address 2</label>
                            <input type="text" class="form-control" id="street_address_2">
                        </div>

                        <div class="form-group">
                            <label for="city">City</label>
                            <input type="text" class="form-control" id="city">
                        </div>

                        <div class="form-group">
                            <label for="state">State</label>
                            <input type="text" class="form-control" id="state">
                        </div>

                        <div class="form-group">
                            <label for="postcode">Postcode</label>
                            <input type="text" class="form-control" id="postcode">
                        </div>

                        <div class="form-group">
                            <label for="country">Country</label>
                            <input type="text" class="form-control" id="country">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $(".autocomplete-google").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/placeid',
                    type: 'GET',
                    dataType: "json",
                    data: {
                        inputData: request.term,
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
        });
    });
</script>
@endsection

Step 6: Now let's make a dedicated Handler class for the autocomplete. We could write all code in getPlaceId() of the GoogleAutocompleteController, but to clean up the code I think it is a good idea to move all your logic to another PHP class.
let's make AutocompleteHandler.php inside the Integration folder in the app directory.



<?php

namespace App\Integration;

use GuzzleHttp\Client;

class AutocompleteHandler
{

    public const BASE_URL = "https://maps.googleapis.com/maps/api/place";

    public string $key;

    public function __construct()
    {
        $this->key = config('services.googlekey.key');
    }

    public function placeId(string $address)
    {
       //
    }
}

In the above code, I have set the base URL and key which we will use later. In above placeId(string $address) method we are receiving an address as a string parameter which we will receive from GoogleAutocompleteController getPlaceId() method as below.

Step7: Now let's inject AutocompleteHandler.php in GoogleAutocompleteController.php and pass address from getPlaceId() of GoogleAutocompleteController.php to placeId() of AutocompleteHandler.php

Now our GoogleAutocompleteController.php looks like this



<?php

namespace App\Http\Controllers;

use Illuminate\View\View;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\JsonResponse;
use App\Integration\AutocompleteHandler;

class GoogleAutocompleteController extends Controller
{

    public $googleAutocomplete;

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

    public function index(): View
    {
        return view('form');
    }

    public function getPlaceId(Request $request): JsonResponse
    {
        return $this->googleAutocomplete->placeId($request->inputData);
    }

}

Above, We receive address as an inputData and we pass this inputData as an address parameter to placeId()

Step8: Now let's work on AutocompleteHandler.php. I will include the steps that we will perform here



<?php 
namespace App\Integration;

use GuzzleHttp\Client;

class AutocompleteHandler {

    public const BASE_URL = "https://maps.googleapis.com/maps/api/place";
    public string $key;

    public function __construct()
    {
        $this->key = config('services.googlekey.key');
    }

    public function placeId(string $address)
    {

        $url= "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=kathmandu&types=address&key=YOUR_API_KEY"
// build the readable url with http_build_query and sprintf()

        try {
            // step1: instantiate GuzzleHttp client
            // step2: hit the url
            // step3: get json response
            // step4: convert json to array
            // step5: loop over the predictions array of response
            // step6: and return place_id as id and description as label

        } catch (\Exception $e) {
            //catch error
        }
    }

}

So our final AutocompleteHandler.php looks like this



<?php

namespace App\Integration;

use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Response;
use GuzzleHttp\Client;

class AutocompleteHandler
{

    public const BASE_URL = "https://maps.googleapis.com/maps/api/place";

    public string $key;

    public function __construct()
    {
        $this->key = config('services.googlekey.key');
    }

    public function placeId(string $address): JsonResponse
    {
        $url = sprintf(
            '%s/autocomplete/json?%s',
            self::BASE_URL,
            http_build_query([
                'input' => $address,
                'types' => 'address',
                'key' => $this->key,
            ])
        );
        try {
            $client = new Client();
            $response = $client->request('get', $url);
            $responseJson = $response->getBody()->getContents();
            $responseArray = json_decode($responseJson, true);
            return response()->json(collect($responseArray['predictions'])->map(
                fn ($value) =>
                [
                    'id' => $value['place_id'],
                    'label' => $value['description'],
                ]
            ));
        } catch (\Exception $e) {
            return response()->json([
                'error' => $e->getMessage(),
            ], Response::HTTP_INTERNAL_SERVER_ERROR);
        }
    }
}

In the above, I have converted $responseArray to the collection with collect() and mapped over it to return place_id and description.

Now as you start typing in the form it will start suggesting the address to you as below.

Part 3
This is the last part of Google Place autocomplete. In this part, we will fill the rest of the form field when the user chooses one address from the dropdown.
Now, we need the place_id from the previous response, and if you hit this URL: https://maps.googleapis.com/maps/api/place/details/json?place_id=EhtOZXBhbCBUYXIsIEthdGhtYW5kdSwgTmVwYWwiLiosChQKEgk9yaxKzhjrORHvFQWGXi5RGhIUChIJv6p7MIoZ6zkR6rGN8Rt8E7U&key=YOUR_KEY
You will get your response in this format.

So we are getting a result as a response and all the needed data such as street address, city, postcode etc are within the address_components

Step 1: In the above, we are returning place_id as the id, and now when the user clicks the address we will make another Ajax request to get all the details of the place based on place_id.
So, after the source, we can add select like the below



  select: function(event, ui) {
         var placeId = ui.item.id;
         console.log(placeId)        
   }

So our jQuery code looks like this



<script>
        $(document).ready(function() {
            $(".autocomplete-google").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/placeid',
                        type: 'GET',
                        dataType: "json",
                        data: {
                            inputData: request.term,
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    var placeId = ui.item.id;
                    console.log(placeId)

                }
            });
        });
 </script>

If you click the selected address, it will return the place id in the console.

Step2: let's make an endpoint that accepts the place id and returns place details based on place id

In web.php



Route::get('address',[ GoogleAutocompleteController::class,'findAddressBasedOnPlaceId'])->name('address');

So now web.php looks like this



<?php

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

Route::get('/autocomplete',[ GoogleAutocompleteController::class,'index']);
Route::get('/placeid',[ GoogleAutocompleteController::class,'getPlaceId'])->name('placeid');
Route::get('address',[ GoogleAutocompleteController::class,'findAddressBasedOnPlaceId'])->name('address');

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Step2: let's make this method in GoogleAutocompleteController.php



    public function findAddressBasedOnPlaceId(Request $request)
    {
        //get place_id via Ajax request when the user selects the address from dropdown suggestions
    }

Step 3: From the above response returned from API, we can see that our data is in address_components and all responses may or may not return postcode, locality name, etc for that place_id. So we manually need to check if the required keys are present in the response or not in order to prevent the error on the page. for example, if a postcode is present in the response then we return the postcode, and so on. So, instead of writing an if-else statement for each key let's make a helper function that returns the required key if it is in the response

Now in AutocompleteHandler.php I will add these checks



    public function getDataFromAddressComponent(array $addressComponents, string $searchFor): ?string
    {
        return collect($addressComponents)->map(fn ($addressComponent) => collect($addressComponent['types'])->contains($searchFor) ? $addressComponent['long_name'] : null)->filter()->first();
    }

Above, I am looping the $addressComponents and I am checking if we have $searchFor in that array. If true return something else return null. However, I have used the collection here.

Alternatively, we can do this



      foreach ($addressComponents as $address) {
            if (in_array($searchFor, $address['types'])) {
                return $address['long_name'];
            }
        }

       return null;

Step4: In GoogleAutocompleteController.php, we will accept the place id from the Ajax request and pass it to addressBasedOnPlaceId() method of AutocompleteHandler.php, Which will return the details of the place



 public function findAddressBasedOnPlaceId(Request $request): JsonResponse
 {
      return $this->googleAutocomplete->addressBasedOnPlaceId($request->placeId);
 }

Step5: Let's send placeId to findAddressBasedOnPlaceId() method via ajax

We will add getAddressDetails(placeId) in



 select: function(event, ui) {
       var placeId = ui.item.id;
        getAddressDetails(placeId);
  }

getAddressDetails() function will make an ajax request to our endpoint /address
Now our, resource/form.blade.php looks like this



@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Google autocomplete</div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="streetaddress">Street number</label>
                            <input type="text" class="form-control ui-widget autocomplete-google" id="street_address_1">
                        </div>

                        <div class="form-group">
                            <label for="streetaddress2">Street address 2</label>
                            <input type="text" class="form-control" id="street_address_2">
                        </div>

                        <div class="form-group">
                            <label for="city">City</label>
                            <input type="text" class="form-control" id="city">
                        </div>

                        <div class="form-group">
                            <label for="state">State</label>
                            <input type="text" class="form-control" id="state">
                        </div>

                        <div class="form-group">
                            <label for="postcode">Postcode</label>
                            <input type="text" class="form-control" id="postcode">
                        </div>

                        <div class="form-group">
                            <label for="country">Country</label>
                            <input type="text" class="form-control" id="country">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $(".autocomplete-google").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/placeid',
                        type: 'GET',
                        dataType: "json",
                        data: {
                            inputData: request.term,
                        },
                        success: function(data) {
                            response(data);
                        }
                    });
                },
                select: function(event, ui) {
                    var placeId = ui.item.id;
                    getAddressDetails(placeId);
                }
            });
        });
        function getAddressDetails(placeId) {
        $.ajax({
            url: "/address",
            type: 'GET',
            dataType: "json",
            data: {
                placeId: placeId,
            },
            success: function(data) {
                $('#country').val(data.country);
                $('#city').val(data.locality);
                $('#postcode').val(data.postal_code);
                $('#state').val(data.state);
                $('#street_address_1').val(data.streetNumber);
                $('#street_address_2').val(data.streetName);
            },
            catch: function(error) {
                console.log('error');
            }
        });
    }
    </script>
@endsection

In the above, on the success we get the result and we fill the form with country, city, postcode, state, etc, our API is yet not ready to return place details based on place ID.

Step6: In AutocompleteHandler.php we will make an addressBasedOnPlaceId() that will accept the place Id send from our findAddressBasedOnPlaceId() of GoogleAutocompleteController.php



public function addressBasedOnPlaceId(string $placeId): JsonResponse
{
    $url =   $url = // build the readable url with http_build_query and sprintf()
    https://maps.googleapis.com/maps/api/place/details/json?place_id=EhtOZXBhbCBUYXIsIEthdGhtYW5kdSwgTmVwYWwiLiosChQKEgk9yaxKzhjrORHvFQWGXi5RGhIUChIJv6p7MIoZ6zkR6rGN8Rt8E7U&key=YOUR_KEY
    );
    try {
        // step1: instantiate GuzzleHttp client
        // step2: hit the URL
        // step3: get JSON response
        // step4: Convert JSON to Array
        // step5: return required data such as street name, city, postcode, country, etc

    } catch (\Exception $e) {
        //catch error
    }
}

Step7: The final AutocompleteHandler.php looks like this



<?php

namespace App\Integration;

use GuzzleHttp\Client;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Response;

class AutocompleteHandler
{

    public const BASE_URL = "https://maps.googleapis.com/maps/api/place";

    private $key;
    public function __construct()
    {
        $this->key = config('services.googlekey.key');
    }

    public function getDataFromAddressComponent(array $addressComponents, string $searchFor): ?string
    {
        return collect($addressComponents)->map(fn ($addressComponent) => collect($addressComponent['types'])->contains($searchFor) ? $addressComponent['long_name'] : null)->filter()->first();
    }

    public function placeId(string $address): JsonResponse
    {
        $url = sprintf(
            '%s/autocomplete/json?%s',
            self::BASE_URL,
            http_build_query([
                'input' => $address,
                'types' => 'address',
                'key' => $this->key,
            ])
        );
        try {
            $client = new Client();
            $response = $client->request('get', $url);
            $responseJson = $response->getBody()->getContents();
            $responseArray = json_decode($responseJson, true);

            return response()->json(collect($responseArray['predictions'])->map(
                fn ($value) =>
                [
                    'id' => $value['place_id'],
                    'label' => $value['description'],
                ]
            ));
        } catch (\Exception $e) {
            return response()->json([
                'error' => $e->getMessage(),
            ], Response::HTTP_INTERNAL_SERVER_ERROR);
        }
    }

    public function addressBasedOnPlaceId(string $placeId): JsonResponse
    {
        $url = sprintf(
            '%s/details/json?%s',
            self::BASE_URL,
            http_build_query([
                'place_id' => $placeId,
                'key' => $this->key,
            ])
        );
        try {
            $client = new Client();
            $response = $client->request('get', $url);
            $responseJson =  $response->getBody()->getContents();
            $responseArray = json_decode($responseJson, true);

            return response()->json([
                'streetNumber' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'street_number'),
                'streetName' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'route'),
                'locality' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'locality'),
                'state' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'administrative_area_level_1'),
                'administrative_area_level_2' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'administrative_area_level_2'),
                'country' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'country'),
                'postal_code' => $this->getDataFromAddressComponent($responseArray['result']['address_components'], 'postal_code')
            ]);
        } catch (\Exception $e) {
            return response()->json(['error' => $e->getMessage(), 'exception' => get_class($e)], Response::HTTP_INTERNAL_SERVER_ERROR);
        }
    }
}

So, we have returned the streetNumber, streetName, locality, state, postcode, and country in the response and we filled the rest of the form fields with these values.

👉 Get the code