DEV Community: Christophe

Change picture on hover with Vue

Christophe — Tue, 20 Apr 2021 12:25:34 +0000

For example, you want to make a portfolio of your projects. It would be a cool feature on your website to have the picture of your project move on hover.

With this small tutorial, it will allow you to activate a .gif when hovered over a picture.

1. Set up vue project

Create your vue-project, follow the steps and cd into it.



vue create vue-hover-picture

2. Clean up project

For this, we'll stick to the HelloWorld.vue component. Get rid of all the code in both HelloWorld.vue and the App.vue component.

Load the image in the HelloWorld.vue component, like below.



<template>
  <div class="hello">
    <img :src="pictureStatic">
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png")
    }
  }
}
</script>

<style scoped> 
img {
  height: 500px;
}
</style>

We now have a picture loaded in our component. We want this picture to become a .gif when we're hovering.

3. Hover function

In vue, we can use @mouseover and @mouseleave events. We can pass in the boolean hover where it will be true in the @mouseover event and, surprise, false with @mouseleave.

As we're using this in our code and using it further on in a function, add it to our data and set it to false. Let's also import our .gif.



export default {
  name: 'HelloWorld',
  data () {
    return {
      pictureStatic: require("../assets/todo.png"),
      pictureGif: require("../assets/todo.gif"),
      hover: false
    }
  }
}

Next, we are going to use a function to determine the src of our image, whether it's hovered or not.

Add the computed part and write a new function, let's call it pictureHover. So we can write out a simple function, using hover as our conditional statement.



computed: {
    pictureHover () {
      if (this.hover == true) {
        return this.pictureGif
      } else {
        return this.pictureStatic
      }
    }
  }

Now we should change our html code of the image. We can pass in this function pictureHover() to our src attribute of our image:



<img :src="pictureHover" @mouseover="hover = true" @mouseleave="hover = false">

And that's it! You can now put in a small live preview of your project when people hover over the picture.

Add Twitch-like hover effect to a picture

Christophe — Tue, 20 Apr 2021 09:45:31 +0000

I based this code on the CodePen link by Arnaud Delante, but I thought it might be handy to make an article of this.

It's pretty straight forward and you can change stuff to your liking.

1. HTML

Import a stylesheet, show some pictures and write out the HTML code.

For every picture that needs the hover effect, we have to wrap it in a separate container div, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <img class="picture" src="picture.jpeg" alt="picture">
    </div>
    <div class="container">
        <img class="picture" src="picture2.jpeg" alt="picture">
    </div>
</body>
</html>

2. CSS

Use your class names and use this CSS code:

body {
    text-align: center;
}

.container {
    display: inline-block;
    margin: 50px;
    background-color: red;
  }

.container:before,
.container:after {
    display: block;
    background-color: red;
    width: 8px;
    height: 8px;
    position: absolute;
    transition: all .15s ease;
}

.container:before {
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: rotate(-45deg) scale(0);
}

.container:after {
    right: 0;
    bottom: 0;
    transform-origin: bottom right;
    transform: rotate(45deg) scale(0);
}

.picture {
    height: 300px;
    display: block;
    transform: translate(0, 0);
    transition: all .15s ease;
    z-index: 10;
}

.container:hover .picture {
    transform: translate(6px, -6px);
}

.container:hover:before {
    transform: rotate(-45deg) scale(1);
}

.container:hover:after {
    transform: rotate(45deg) scale(1);
}

I just used a simple red background color. Of course, you can add any color you like. Or tweak any other of these variables.

Live demo

Laravel 8 and Google Autocomplete form tutorial

Christophe — Fri, 09 Apr 2021 12:26:12 +0000

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
Terminal - check out Oh My Zsh
Local server environment - I use MAMP
DB Manager - I use 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, 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

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=

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:

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

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

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

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:

The file structure should be like this:

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);
});

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>

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!

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:

Refresh your page, and with some luck you will be seeing something like this:

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"] }).

10. Back-end part

Here's where the magic happens ✨.

First, let's create a migration.

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.

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

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

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

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

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.");
    }

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

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'));
    }

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.