Laravel 8 and Google Autocomplete form tutorial
Tags: laravel, crud, tutorial, googleapi
Published: 2021-04-09 12:26:12

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:
- IDE - [VSCode](https://code.visualstudio.com/)
- Terminal - check out [Oh My Zsh](https://ohmyz.sh/)
- Local server environment - I use [MAMP](https://www.mamp.info/en/mamp/mac/)
- DB Manager - I use [Sequel Ace](https://github.com/Sequel-Ace/Sequel-Ace)


### 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](https://laravel.com/docs/8.x/installation), 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 👆.

```php
composer create-project laravel/laravel laravel-googlemaps-autocomplete
```

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:
```jsx
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=laravel_googlemaps_autocomplete
DB_USERNAME=root
DB_PASSWORD=
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb1puyxccloa3xrvfu3e.png)


### 3. Authentication (Laravel Breeze)

We want an authentication system where we can login and register. [Laravel Breeze](https://laravel.com/docs/8.x/starter-kits#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:

```php
composer require laravel/breeze --dev
```

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
php artisan breeze:install

npm install

npm run dev

php artisan migrate
```

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](https://chrome.google.com/webstore/detail/fake-filler/bnjjngeaknajbdcgpfkgnonkmififhfo?hl=en) 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](https://laravel.com/docs/8.x/controllers#resource-controllers), 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
php artisan make:controller AddressController --resource --model=Address
```

![Screenshot 2021-04-08 at 14.02.23](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwlj8rrnn2csy25fbg9d.png)


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb7qio3kufhh3cxp7pyv.png)

The file structure should be like this: 
![Screenshot_2021-04-08_at_14.19.44](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2402aozgo4gct5pfh629.png)


### 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:

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

    Route::resource('address', AddressController::class);
});
```

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:

```html
<!-- 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>
```
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](https://console.cloud.google.com/) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yehlub39sfwwpx43lyj1.png)

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](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wri2tssaaqm1uc0yehen.png)

Refresh your page, and with some luck you will be seeing something like this:
![Screenshot 2021-04-08 at 15.50.10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3pgxx4d2ve2vjucv4vue.png)


### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q68wro9708y5vwa2maph.png)

![Screenshot 2021-04-08 at 16.17.45](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h66vzjrjc50varhglqeb.png)


### 10. Back-end part

Here's where the magic happens :sparkles:.

First, let's create a [migration](https://laravel.com/docs/8.x/migrations).

```php
php artisan make:migration create_addresses_table 
```   

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnvb53gc1jht9txvbh2i.png)

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

![Screenshot 2021-04-09 at 12.10.57](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84q99f5aen5phueovb53.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kewpx3qyh3cqqfbc06z9.png)


### 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.

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

Let's add a success message to our form, with some simple [Tailwind](https://tailwindcss.com/) styling.

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


### 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.

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

        Address::create($data);

        return back()->with('success', "Info updated successfully.");
    }
```
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.

```php
@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
```

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.

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

        return view('address.index', compact('address'));
    }
```

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](https://github.com/chadriae/laravel-googlemaps-autocomplete).