DEV Community

Cover image for Laravel 8 and Google Autocomplete form tutorial
Christophe
Christophe

Posted on

Laravel 8 and Google Autocomplete form tutorial

#laravel #crud #tutorial #googleapi

I wrote this tutorial as this was something I had a hard time to get it right, and documentation was not really clear for me.

I'll explain this basic crud example in Laravel 8 with a Google Autocomplete form. So I combine it with a real-life example. I will also implement a login/register system, which is one of Laravel's strengths.

Get following stuff ready:

1. Create a Laravel project

Create a Laravel project, assuming you have Composer installed. If you don't have composer install or for further documentation, I refer you to the official Laravel documentation, which is really clear and helpful.

To see if you have Composer installed, you can run composer --version in your terminal to see what version you have installed. If not, you should take a look at the documentation 👆.

composer create-project laravel/laravel laravel-googlemaps-autocomplete
Enter fullscreen mode Exit fullscreen mode

After everything is installed cd into the project and open with your IDE.

2. Database credentials

Before we can add an authentication system, we should configure our database. Fill in your .env variables and check the connection with your preferred DB manager. On my mac I use Sequel Ace, which I can really recommend. For the live server I use MAMP, which is really easy and straightforward.
For example my .env file looks like this:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel_googlemaps_autocomplete
DB_USERNAME=root
DB_PASSWORD=
Enter fullscreen mode Exit fullscreen mode

Yours will look different. The DB_PORT is the port that MAMP uses for MySQL. Username and password are usually both root, but you should check that out.

Add the database with the same name to your databases in your db-manager.

After you filled in the credentials in your .env file, run your database migrations with php artisan migrate. You should be able to see that the migration tables were created successfully and these tables should be visible in your db-manager, like this:
Screenshot 2021-04-08 at 12.17.31

3. Authentication (Laravel Breeze)

We want an authentication system where we can login and register. Laravel Breeze is a very handy and lightweight option.

Once everything in the last step is installed successfully, you can install Laravel Breeze via Composer:

composer require laravel/breeze --dev
Enter fullscreen mode Exit fullscreen mode

Next steps (copied from the Laravel documentation website) are:

After Composer has installed the Laravel Breeze package, you may run the breeze:install Artisan command. This command publishes the authentication views, routes, controllers, and other resources to your application. Laravel Breeze publishes all of its code to your application so that you have full control and visibility over its features and implementation. After Breeze is installed, you should also compile your assets so that your application's CSS file is available:

php artisan breeze:install

npm install

npm run dev

php artisan migrate
Enter fullscreen mode Exit fullscreen mode

Run php artisan serve to run your project and you should see Login and Register in the top-right corner of the browser. The package has been successfully installed, you can now test out these features by registering an account and have a look at the database to see new entries coming in!

Tip: to not always have to fill in data in forms, you can install Fake Filler as a Chrome plugin and will fill in some dummy data.

4. Laravel controller

We are going to generate a controller. For this example we will generate a resource controller, which is common when building a CRUD application. Let's call this AddressController as we will be working with, well, addresses. Let's also add the model Address.

You will get the message A App\Models\Address model does not exist. Do you want to generate it? (yes/no) [yes]:, just type yes and hit enter.

php artisan make:controller AddressController --resource --model=Address
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-04-08 at 14.02.23

5. Blade pages

Let's make our blade pages. For now, we will just make 2 different pages: index and create. First one will be the page where we will show the given address, the other page will be the form page.

Copy the code from the dashboard.blade.php page and edit. Add a small link to the create.blade.php page and paste some code there as well.

Your index.blade.php should look something like this:
Screenshot 2021-04-08 at 14.18.58

The file structure should be like this:
Screenshot_2021-04-08_at_14.19.44

6. Routes

Now we want to be able to navigate to our address pages.

We have to do these things:

  • Create a route to Address
  • Add the view to our AddressController
  • Add the link in the navigation bar

First things first. Navigate to web.php and you will see a route to the dashboard. We want the dashboard and address pages to be accessible when logged in.

So we are going to group these like this - and don't forget to add use App\Http\Controllers\AddressController; at the top of the page:

Route::group(['middleware' => 'auth'], function () {
    Route::get('/dashboard', function () {
        return view('dashboard');
    })->name('dashboard');

    Route::resource('address', AddressController::class);
});
Enter fullscreen mode Exit fullscreen mode

Next, open AddressController.php. In the index function add return view(address.index). We are telling the router to show the index.blade.php when navigating to /address.

Last step is editing the navigation.blade.php, which can be found under /views/layouts (or by searching with ⌘ + P on a Mac, Ctrl + P on a Windows machine). Copy the Dashboard part under <!-- Navigation Links —> and edit like this:

<!-- Navigation Links -->
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
        {{ __('Dashboard') }}
    </x-nav-link>
</div>

<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
    <x-nav-link :href="route('address.index')" :active="request()->routeIs('address.index')">
        {{ __('Address') }}
    </x-nav-link>
</div>
Enter fullscreen mode Exit fullscreen mode

Refresh your page and you will see the Address-section in the navigation bar, and you will be open the index page. If you click on the part where you can add details, you will get an empty page. That brings us to the next step...

7. Google entered then room

We are going to use Google's autocomplete form and copy all the code. You will have to make a developers account, generate an API key and put it in your .env file so it's never shared or uploaded to GitHub.

First, let's generate an API key. Navigate to the Google Cloud Platform after you logged in and click on APIs & Services → Credentials. Create a project, preferably with the same name as your repo. When the page is loaded, click on + CREATE CREDENTIALS-> API KEY. Your generated API KEY will be in front of you. Congrats!
Screenshot 2021-04-08 at 14.56.40

Copy the key and paste it in your .env file of your project, and name it something like GOOGLE_KEY. Save, and restart your php artisan serve command.

The key is is not yet assigned to the libraries we are using. Head to the library section in the left hand side and search for 'Maps JavaScript API' and 'Places API'. Click both on enable.

You will have to enable billing on the project, more on this later on.

8. Importing the form

Let's open the create.blade.php of our address section. Copy all the code from index.blade.php of the Address section. Delete the text we wrote before.

Now, go to the Google Developers page of Place Autocomplete Address Form. Head over to the code, click on All, and copy the code starting from <style type="text/css"> until ></script>. Paste this in between the <x-app-layout> tags we copied earlier.

Import your GOOGLE_KEY from .env file, like this:
Screenshot 2021-04-08 at 15.47.17

Refresh your page, and with some luck you will be seeing something like this:
Screenshot 2021-04-08 at 15.50.10

9. Google billing

Open the console of your browser. Try typing something in the first input. You will see an error in your console, regarding billing. Google asks you to enable billing when using some of their API's. Not to worry though, you get sufficient free credit and you won't be billed if the trial ends. Be sure to check it now and then though, avoiding any surprises. It's up to you if you want so link your credit card to this, but I believe that it's totally worth it when it's for your own educational purposes.

So after this, go back to the project, refresh the page and type something in the form. You will now see the autocomplete works! For now the autocomplete is limited to USA and Canada, but it's possible to change those in the code (see below componentRestrictions: { country: ["us", "ca"] }).

Screenshot 2021-04-08 at 16.16.24

Screenshot 2021-04-08 at 16.17.45

10. Back-end part

Here's where the magic happens ✨.

First, let's create a migration.

php artisan make:migration create_addresses_table
Enter fullscreen mode Exit fullscreen mode

A migration file wil be added to /database/migrations. Open the file and we will add the values we get from the Google autocomplete form.

As we see from our form (using the name values), the values of ship_address, address2, locality, state, postcode, country will be written to the database. Change ship-address to ship_address in the form under the name attribute.

Let's also add user_id as we will store and load the address of every unique user who registers.

Add ->nullable() to address2 as we won't always have to fill in an apartment or floor number. This function will automatically add 'Allow null' to this row when we migrate.

Screenshot 2021-04-09 at 12.10.31

Open up the Address model. Fill in the all the same values.

Screenshot 2021-04-09 at 12.10.57

Finish off with php artisan migrate. As you can see, the table is migrated to our database.

Screenshot 2021-04-09 at 14.17.41

11. Form behaviour

Open up the form again (create.blade.php from Address). Each form requires an action. We are going to use the store-function to write the data to our database. Add the route [address.store](http://address.store) to the action attribute and change to the method to post. Also add @csrf below this line.

<form method="post" action="{{ route('address.store') }}" autocomplete="off" id="google-map">
    @csrf
Enter fullscreen mode Exit fullscreen mode

Let's add a success message to our form, with some simple Tailwind styling.

@if(Session::has('success'))
    <div class="text-green-700 bg-green-100" role="alert">
      {{ Session::get('success') }}
  </div>
@endif
Enter fullscreen mode Exit fullscreen mode

12. Store function

Last step. Open up the AddressController where you will find the store() function, filled in with Request $request as variable. We can just use the data we get from the $request to write to the database. But there's just one variable we have to get somewhere else. The user_id is a value we won't get from the form, but it's stored as Auth::id() when we're logged in.

public function store(Request $request)
    {
        $data = $request->input();
        $data['user_id'] = Auth::id();

        Address::create($data);

        return back()->with('success', "Info updated successfully.");
    }
Enter fullscreen mode Exit fullscreen mode

We return with a simple success message.

Open up your browser and put in some data and see how it's been written in the database.

13. Showing the address (when previously created)

We want to greet the user when logged in with previously stored address, when provided.

Open up the index.blade.php and add following code. This part will only be loaded when there is already an address stored for this particular id.

@if(!empty($address))
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class=" p-6 bg-white border-b border-gray-200">
              Your address is:
              <ul class="list-inside">
                <li>Street + number: {{ $address->ship_address }}</li>
                @if(!empty($address->address2))
                <li>Apartment, unit, suite, or floor: {{ $address->address2 }}</li>
                @endif
                <li>City: {{ $address->locality }}</li>
                <li>Country: {{ $address->country }}</li>
              </ul>
            </div>  
          </div>
      </div>
    </div>
    @endif
Enter fullscreen mode Exit fullscreen mode

We need a function that gets the data from the database. Open up the AddressController. We're going to rewrite the index() function. The $address variable will grab the latest entry in the database with a certain id, the one that is used to log in.

public function index()
    {
        $address = DB::table('addresses')->where('user_id', Auth::user()->id)->latest('updated_at')->first();

        return view('address.index', compact('address'));
    }
Enter fullscreen mode Exit fullscreen mode

We return the address.index view with the $address variable, we can write it as compact('address').

Don't forget to add use Illuminate\Support\Facades\DB; at the top.

That's it! A basic Laravel 8 example with a Google Autocomplete form.

I also put the the code in this GitHub repo.

Top comments (1)

Collapse
 
jhanleycom profile image
John J. Hanley •

Some parts of your code/html are pictures. One is too small to even read. Please replace with content that can be copied/pasted like the other sections of your article.

Read next

willvelida profile image

Integrating Azure Policy in your AKS cluster using Terraform

Will Velida -

wlepczynski profile image

AWS Lambda: OCR and Text Translation in the AWS Cloud

Wojciech Lepczyński -

jetthoughts-dev profile image

Ruby on Rails 8: How to Batch with Custom Columns

JetThoughts Dev -

jetthoughts-dev profile image

Ruby on Rails 8: Simplifying Sharding with New Methods

JetThoughts Dev -