DEV Community

Cover image for Create A Laravel Cookie Consent Banner Without JavaScript
Devtonight
Devtonight

Posted on • Updated on • Originally published at devtonight.com

Create A Laravel Cookie Consent Banner Without JavaScript

To comply with EU GDPR (General Data Protection Regulation) law, all the websites owned by or targeted the EU users should inform and get consent from visitors beforehand to store or retrieve any information from their devices. It protects the privacy of visitors by making them aware of how their information is being collected and used. Also, it gives visitors a chance to allow or not. We use a “Cookie Consent Banner” to inform and get that consent from visitors. In this tutorial, we are going to explore the possibilities and the capabilities of Laravel to implement such a thing in our Laravel application, of course, without using any JavaScript code.

How Cookie Consent Banners Work

As a convention, we use JavaScript for this kind of task. When the page loads, a piece of Javascript code checks whether a particular cookie exists or not. If the cookie is not available in the user's browser, then it will display the cookie consent banner. Otherwise, it will hide the banner. Also, when the user clicked the “Accept” button, we create that cookie in the browser.

Wait! But how do we implement such a thing without using Javascript? Well, whenever a user requests a page, Laravel checks whether the user's browser has a particular cookie called “cookie-consent”. If it does not exist, then it renders the cookie consent banner as expected. But if it is there, Laravel renders the rest of the page without rendering the banner. When the user clicked the “Accept” button, it will load a special route that instructs the user's browser to set the “cookie-consent” cookie.

Before and after the “Accept” button clicked.

Before and after cookie-consent cookie creation

Here we can see, Laravel instructs the client's browser to create the "cookie-consent" cookie upon “Accept” click.

Response header with Set-Cookie cookie-consent

Also, that route will redirect the user to the previous page without displaying anything.

Create The Laravel Project

So let's get started. First, we are going to create a brand-new Laravel project, of course, you can even use these steps in your existing Laravel applications as well. Create a new Laravel project using the Composer. If you having problems with creating a Laravel project, you may read the How To Install Laravel 8 On Ubuntu 20.04 LTS guide.

composer create-project laravel/laravel --prefer-dist no-js-cookie-consent-app
Enter fullscreen mode Exit fullscreen mode

Install Laravel Breeze

For this tutorial, we are using Laravel with TailwindCSS to design the UI of the banner. If you need, you can manually implement TailwindCSS into the Laravel by adding and configuring everything manually. But fortunately, we have Laravel Breeze! Let's install it in our application.

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

Nice! Then run the following command, it will copy all the necessary files into their correct places.

php artisan breeze:install
Enter fullscreen mode Exit fullscreen mode

Now we need to build the frontend using the following commands. The first command, npm install will install all the necessary NPM packages and the second command, npm run dev will build CSS.

npm install && npm run dev
Enter fullscreen mode Exit fullscreen mode

We do not need to run npm install every time, npm run watch is sufficient to continuously rebuild CSS (and JS) automatically as you make changes. Now we can start the Laravel app by running the following command.

php artisan serve
Enter fullscreen mode Exit fullscreen mode

In a separate terminal window, run the following command to start building the CSS.

npm run watch
Enter fullscreen mode Exit fullscreen mode

Invokable Controller

Create a controller called CookieConsentController with --invokable flag. Laravel invokable controllers have one purpose and do not have regular controller methods like index, create, store, show, edit, update and destroy.

php artisan make:controller CookieConsentController --invokable
Enter fullscreen mode Exit fullscreen mode

Add the following code to the __invoke method of the CookieConsentController file. When it gets a request, it will create a cookie called "cookie-consent" which expire in one year. Then it will redirect to the previous page.

public function __invoke(Request $request)
{
    Cookie::queue('cookie-consent', 1, 60 * 24 * 365 * 1);

    return redirect()->back();
}
Enter fullscreen mode Exit fullscreen mode

Cookie Consent Banner Component

Instead of putting the same code over and over again, we are going to create the cookie consent banner in a re-usable component.

Add the following codes to /resources/views/components/cookie-consent-banner.blade.php file. This file contains all the HTML markup with TailwindCSS classes.

<!-- /resources/views/components/cookie-consent-banner.blade.php -->
@if(!Cookie::get('cookie-consent'))
<div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
  <div class="bg-gray-800 shadow-md max-w-sm fixed right-0 bottom-0 mx-4 mb-4 p-4 rounded-lg">
    <div class="grid grid-cols-4">
      <div class="w-full">
        <svg class="w-full h-20 mt-2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="202" height="194" viewBox="0, 0, 202, 194">
          <defs><clipPath id="Clip_1"><path d="M12.945,3.967 L198.025,3.967 L198.025,192.164 L12.945,192.164 z" /></clipPath><clipPath id="Clip_2"><path d="M10.735,11.091 L186.925,11.091 L186.925,191.315 L10.735,191.315 z" /></clipPath><clipPath id="Clip_3"><path d="M2.045,9.388 L198.355,9.388 L198.355,185.318 L2.045,185.318 z" /></clipPath><clipPath id="Clip_4"><path d="M14.135,11.996 L189.685,11.996 L189.685,188.041 L14.135,188.041 z" /></clipPath><clipPath id="Clip_5"><path d="M22.125,16.124 L187.355,16.124 L187.355,184.456 L22.125,184.456 z" /></clipPath><clipPath id="Clip_6"><path d="M7.335,12.366 L183.515,12.366 L183.515,178.73 L7.335,178.73 z" /></clipPath><clipPath id="Clip_7"><path d="M22.725,16.105 L181.415,16.105 L181.415,181.771 L22.725,181.771 z" /></clipPath><clipPath id="Clip_8"><path d="M25.235,15.539 L186.105,15.539 L186.105,181.15 L25.235,181.15 z" /></clipPath><clipPath id="Clip_9"><path d="M18.535,16.067 L171.015,16.067 L171.015,176.065 L18.535,176.065 z" /></clipPath><clipPath id="Clip_10"><path d="M26.515,23.013 L173.865,23.013 L173.865,172.78 L26.515,172.78 z" /></clipPath><clipPath id="Clip_11"><path d="M28.565,20.985 L179.995,20.985 L179.995,174.964 L28.565,174.964 z" /></clipPath><clipPath id="Clip_12"><path d="M28.635,20.579 L169.085,20.579 L169.085,167.473 L28.635,167.473 z" /></clipPath><clipPath id="Clip_13"><path d="M19.245,25.059 L180.885,25.059 L180.885,169.914 L19.245,169.914 z" /></clipPath><clipPath id="Clip_14"><path d="M28.555,26.543 L174.655,26.543 L174.655,173.056 L28.555,173.056 z" /></clipPath><clipPath id="Clip_15"><path d="M34.595,29.323 L173.635,29.323 L173.635,170.97 L34.595,170.97 z" /></clipPath><clipPath id="Clip_16"><path d="M21.375,25.44 L171.315,25.44 L171.315,167.027 L21.375,167.027 z" /></clipPath><clipPath id="Clip_17"><path d="M33.815,27.905 L170.455,27.905 L170.455,170.552 L33.815,170.552 z" /></clipPath><clipPath id="Clip_18"><path d="M35.315,26.66 L175.495,26.66 L175.495,170.984 L35.315,170.984 z" /></clipPath><clipPath id="Clip_19"><path d="M28.695,26.332 L163.235,26.332 L163.235,167.501 L28.695,167.501 z" /></clipPath><clipPath id="Clip_20"><path d="M35.025,31.713 L166.705,31.713 L166.705,165.55 L35.025,165.55 z" /></clipPath><clipPath id="Clip_21"><path d="M36.125,29.091 L173.235,29.091 L173.235,168.513 L36.125,168.513 z" /></clipPath><clipPath id="Clip_22"><path d="M35.425,27.869 L164.335,27.869 L164.335,162.69 L35.425,162.69 z" /></clipPath><clipPath id="Clip_23"><path d="M32.265,32.412 L166.345,32.412 L166.345,161.52 L32.265,161.52 z" /></clipPath><clipPath id="Clip_24"><path d="M2.045,3.967 L198.355,3.967 L198.355,192.164 L2.045,192.164 z" /></clipPath></defs><g id="レイヤー_3" /><g id="レイヤー_1"><g clip-path="url(#Clip_24)"><g clip-path="url(#Clip_1)"><path d="M197.99,94.027 C198.469,105.137 193.917,115.304 189.997,125.028 C186.054,134.809 182.377,145.215 175.002,153.251 C167.955,160.931 157.872,165.687 148.604,171.467 C139.668,177.04 131.059,184.07 120.872,187.603 C110.772,191.106 99.862,190.928 89.315,192.163 C81.839,190.254 72.374,189.301 63.526,184.383 C55.965,180.179 49.894,172.745 42.958,166.496 C36.281,160.482 28.193,155.249 23.458,147.468 C18.816,139.839 17.902,130.477 16.398,121.269 C15.028,112.885 12.554,104.184 14.783,94.585 C11.21,85.418 13.571,76.364 15.744,67.41 C17.847,58.741 19.888,49.232 25.851,41.556 C31.387,34.427 40.124,29.8 47.738,24.175 C55.276,18.606 62.223,11.605 70.623,8.119 C79.685,4.359 89.442,4.571 98.096,3.966 C107.512,4.337 117.355,4.054 126.325,7.854 C134.905,11.489 141.798,18.793 149.461,24.804 C156.893,30.634 165.641,35.492 171.749,42.867 C177.9,50.293 181.038,59.811 185.386,68.113 C189.964,76.856 195.938,85.101 197.99,94.027" fill="#BF7721" /></g><g clip-path="url(#Clip_2)"><path d="M185.66,96.83 C188.332,106.362 185.797,115.498 183.899,124.474 C181.973,133.584 180.399,143.262 175.06,151.169 C169.843,158.898 161.373,164.145 154.126,170.126 C146.697,176.258 139.896,183.541 131.629,187.207 C122.361,191.317 112.515,191.154 103.941,191.315 C93.473,190.112 83.344,190.569 74.561,187.672 C64.557,184.373 56.813,177.706 49.091,172.564 C40.437,166.8 31.459,161.885 25.808,154.308 C19.792,146.241 17.854,136.179 15.412,126.676 C13.008,117.324 9.78,107.744 11.006,97.615 C10.013,87.791 13.31,79.047 15.375,70.77 C17.677,61.539 19.334,52.205 24.588,45.046 C30.021,37.644 38.582,33.274 46.198,28.257 C53.801,23.248 61.163,17.098 69.955,14.64 C78.792,12.169 88.403,13.618 97.443,13.898 C107.78,12.623 117.654,10.13 126.639,11.48 C136.891,13.021 145.317,18.61 153.335,23.057 C162.178,27.962 171.226,32.553 176.707,40.298 C182.241,48.117 183.506,58.145 184.922,68.111 C186.201,77.116 188.283,86.656 185.66,96.83" fill="#C07924" /></g><g clip-path="url(#Clip_3)"><path d="M198.359,95.897 C195.052,105.24 189.055,113.61 185.063,122.146 C180.83,131.197 178.303,140.972 172.771,148.566 C166.984,156.51 158.526,161.695 150.709,167.412 C143.216,172.892 135.77,179.49 125.851,182.342 C117.34,184.789 107.412,183.625 96.739,183.747 C86.486,184.681 76.888,186.469 68.409,184.26 C58.976,181.803 51.725,175.274 44.336,169.56 C37.074,163.945 28.893,158.663 23.454,150.539 C18.423,143.027 16.421,133.382 12.825,124.244 C9.487,115.764 4.243,107.235 2.041,97.77 C3.218,88.435 8.345,79.921 12.167,71.495 C16.017,63.008 18.872,53.722 24.776,46.551 C30.73,39.32 39.339,34.72 46.737,29.23 C54.351,23.58 61.307,16.716 69.756,13.346 C78.656,9.796 88.349,10.132 97.371,9.616 C106.75,9.48 116.675,8.573 125.99,11.668 C134.909,14.632 142.469,21.256 150.553,26.693 C158.443,32.001 167.447,36.44 173.826,43.653 C180.178,50.836 183.469,60.273 187.623,68.905 C191.762,77.505 197.092,86.293 198.359,95.897" fill="#C27C26" /></g><g clip-path="url(#Clip_4)"><path d="M189.611,102.589 C190.277,112.057 186.179,120.838 182.628,129.384 C179.188,137.661 176.075,146.761 169.491,153.768 C163.392,160.26 154.516,164.172 146.38,169.242 C138.735,174.006 131.438,180.345 122.54,183.582 C113.972,186.699 104.484,186.581 95.237,188.042 C86.318,186.978 77.452,187.09 69.712,183.756 C61.578,180.251 55.477,173.488 48.92,168.046 C42.137,162.417 34.409,157.599 29.62,150.533 C24.664,143.221 23.127,134.231 20.647,126.085 C18.076,117.645 14.445,109.424 14.909,100.873 C12.967,91.427 15.17,82.244 16.268,73.516 C17.455,64.088 17.923,54.491 22.183,46.635 C26.619,38.455 34.486,32.942 41.708,27.311 C48.801,21.782 56.021,15.452 65.269,13.204 C73.677,11.16 83.176,13.146 92.95,14.459 C103.661,13.016 113.672,10.846 122.51,12.73 C132.552,14.871 140.387,21.264 148.122,27.026 C155.799,32.745 164.196,38.363 169.716,46.945 C174.785,54.826 176.698,64.868 180.04,74.597 C183.106,83.523 187.927,92.547 189.611,102.589" fill="#C37E29" /></g><g clip-path="url(#Clip_5)"><path d="M187.343,93.628 C186.954,104.234 183.121,113.829 180.7,122.98 C177.999,133.185 176.246,143.403 170.896,151.393 C165.294,159.761 156.503,165.049 147.852,170.506 C139.902,175.521 131.547,181.479 120.905,183.639 C111.921,185.461 101.732,183.732 90.755,183.269 C82.347,183.401 73.809,184.164 66.415,181.004 C59.033,177.85 53.661,171.151 47.793,165.176 C42.306,159.59 35.582,154.291 31.843,146.628 C28.436,139.644 28.183,131.091 26.553,122.679 C25.076,115.059 21.923,107.155 22.149,98.585 C21.841,90.135 25.026,81.979 26.739,73.937 C28.515,65.592 29.045,56.793 32.919,49.606 C36.956,42.116 44.026,36.985 50.254,31.563 C56.451,26.169 62.527,19.872 70.803,17.342 C78.25,15.066 86.85,16.552 95.913,17.222 C105.251,17.057 114.46,15.519 122.777,17.397 C131.851,19.446 139.353,24.938 146.85,29.09 C154.907,33.552 163.478,37.208 169.263,43.687 C175.254,50.397 177.798,59.329 180.84,67.737 C183.786,75.881 187.644,84.329 187.343,93.628" fill="#C4802C" /></g><g clip-path="url(#Clip_6)"><path d="M183.304,100.726 C182.048,108.682 177.208,116.104 173.655,123.926 C170.243,131.441 167.954,139.952 162.828,146.585 C157.668,153.262 150.025,157.594 143.532,162.624 C136.778,167.857 130.553,174.118 122.806,176.73 C114.893,179.4 106.173,178.102 97.706,177.139 C89.36,178.363 80.33,179.878 71.766,177.393 C63.693,175.053 56.751,169.085 49.358,164.314 C42.088,159.62 33.795,155.812 27.997,149.572 C21.884,142.993 18.81,134.413 15.254,127.022 C11.242,118.682 6.851,110.461 7.376,102.351 C9.615,92.918 14.718,84.711 18.032,76.506 C21.665,67.511 23.817,58.153 28.81,50.815 C34.183,42.919 42.148,37.669 49.181,31.919 C56.284,26.112 63.048,19.372 71.935,15.997 C80.155,12.875 89.637,13.208 99.459,12.367 C107.484,12.565 116.828,12.527 125.722,16.498 C133.5,19.971 140.022,26.793 147.23,32.535 C154.166,38.06 162.308,42.81 167.67,49.913 C173.132,57.149 175.377,66.19 178.133,74.529 C180.932,82.997 184.425,91.683 183.304,100.726" fill="#C6822E" /></g><g clip-path="url(#Clip_7)"><path d="M180.789,100.258 C182.758,108.69 179.717,117.205 176.948,125.719 C174.373,133.638 172.094,142.468 166.465,149.521 C161.155,156.175 153.08,160.521 145.925,165.621 C138.805,170.696 132.067,176.922 123.957,179.709 C115.573,182.59 106.63,181.728 98.094,181.351 C90.382,179.859 82.09,179.502 74.855,175.897 C67.786,172.375 62.405,165.935 56.345,160.655 C50.369,155.448 43.235,151.018 38.768,144.348 C34.381,137.796 32.985,129.573 30.555,121.844 C28.23,114.448 24.592,107.121 24.506,98.854 C21.744,89.972 22.966,81.559 23.172,73.978 C23.416,64.97 23.324,56.321 27.005,49.265 C30.886,41.824 38.235,37.011 45.003,31.881 C51.461,26.985 57.924,21.081 66.158,18.418 C73.887,15.918 82.608,16.765 91.19,16.338 C100.956,16.383 110.347,15.27 118.708,17.547 C127.995,20.076 135.394,26.038 142.754,30.912 C150.563,36.082 158.854,40.74 164.258,48.05 C169.661,55.358 171.694,64.671 174.45,73.603 C177.074,82.104 180.778,90.74 180.789,100.258" fill="#C78531" /></g><g clip-path="url(#Clip_8)"><path d="M186.101,99.611 C185.392,108.517 180.79,116.706 177.129,124.719 C173.484,132.696 170.507,141.391 164.659,148.087 C158.862,154.725 150.611,158.899 143.354,163.89 C135.984,168.958 129.109,175.147 120.965,178.116 C112.432,181.226 103.329,180.799 94.774,181.15 C86.749,180.03 78.357,179.892 71.028,176.396 C63.756,172.926 58.286,166.43 52.313,160.854 C46.482,155.41 39.589,150.443 35.572,143.21 C31.766,136.357 31.076,127.946 29.396,119.676 C27.864,112.139 24.994,104.334 25.611,95.765 C24.305,87.898 26.729,80.177 28.101,72.582 C29.494,64.871 30.027,56.664 33.91,49.854 C37.738,43.141 44.501,38.482 50.487,33.248 C56.212,28.241 61.64,22.083 69.106,18.965 C76,16.086 84.07,16.379 92.263,15.54 C102.21,15.914 111.448,15.127 119.467,17.595 C128.723,20.442 135.737,26.637 142.768,31.778 C150.198,37.21 158.131,42.136 163.503,49.517 C168.769,56.751 171.128,65.929 174.833,74.439 C178.411,82.657 183.6,90.745 186.101,99.611" fill="#C98733" /></g><g clip-path="url(#Clip_9)"><path d="M170.446,98.571 C170.324,107.399 167.078,115.222 165.212,122.755 C163.113,131.224 161.982,139.736 157.645,146.389 C153.123,153.325 145.769,157.646 138.774,162.398 C132.331,166.776 125.779,172.239 117.204,174.589 C109.837,176.608 101.345,175.591 92.384,175.999 C83.977,176.046 75.515,176.589 68.027,173.515 C60.521,170.433 54.796,164.025 48.651,158.426 C42.717,153.018 35.759,148.016 31.497,140.83 C27.398,133.918 26.26,125.426 24.066,117.378 C21.953,109.624 18.557,101.628 18.532,93.272 C20.403,85.673 25.389,78.448 29.072,70.779 C32.573,63.488 34.913,55.171 39.93,48.592 C44.925,42.044 52.271,37.628 58.651,32.531 C65.081,27.394 71.065,21.211 78.783,18.308 C86.259,15.497 94.613,16.132 103.186,16.121 C110.915,17.589 119.143,17.837 126.355,21.159 C133.6,24.497 139.189,30.652 145.202,35.699 C151.326,40.838 158.346,45.345 162.446,52.086 C166.499,58.75 167.265,66.94 168.608,75.001 C169.834,82.357 172.056,90.185 170.446,98.571" fill="#CA8936" /></g><g clip-path="url(#Clip_10)"><path d="M172.84,95.291 C174.991,103.762 173.234,111.769 172.336,119.146 C171.321,127.481 170.634,135.766 166.574,142.39 C162.36,149.266 155.134,153.628 148.626,158.293 C142.142,162.94 135.716,168.397 127.951,170.48 C120.237,172.549 111.831,171.052 103.831,170.225 C94.941,171.249 86.692,173.479 79.345,172.564 C70.465,171.459 63.386,166.924 56.783,163.402 C49.243,159.38 41.744,155.562 37.209,149.023 C32.688,142.502 31.7,134.06 30.205,125.708 C28.849,118.135 26.518,110.225 27.681,101.672 C25.3,93.017 27.104,84.714 28.283,76.839 C29.551,68.373 30.625,59.721 35.183,52.755 C39.734,45.801 47.293,41.288 54.273,36.447 C61.048,31.749 67.845,26.18 76.12,24.047 C84.042,22.004 92.736,23.479 101.336,24.294 C109.699,23.753 117.586,22.177 124.438,23.84 C132.334,25.757 138.296,31.027 144.207,35.419 C150.34,39.975 157.044,44.251 161.066,50.938 C164.866,57.254 165.676,65.252 167.617,72.998 C169.402,80.125 172.609,87.325 172.84,95.291" fill="#CB8B39" /></g><g clip-path="url(#Clip_11)"><path d="M179.966,94.67 C180.358,103.76 176.634,112.079 173.427,120.035 C170.201,128.037 167.192,136.551 161.158,143.126 C155.392,149.41 147.143,153.301 139.559,158.03 C132.248,162.589 125.204,168.341 116.87,171.232 C108.606,174.098 99.68,173.953 91.05,174.964 C84.934,173.401 77.189,172.622 69.95,168.597 C63.764,165.158 58.797,159.076 53.122,153.964 C47.659,149.042 41.041,144.761 37.167,138.395 C33.369,132.153 32.622,124.492 31.391,116.959 C30.27,110.1 28.246,102.981 30.07,95.127 C27.146,87.626 29.078,80.218 30.855,72.893 C32.577,65.8 34.247,58.02 39.125,51.739 C43.655,45.906 50.803,42.12 57.033,37.518 C63.2,32.962 68.884,27.234 75.757,24.382 C83.171,21.305 91.154,21.479 98.235,20.984 C105.939,21.288 113.992,21.056 121.331,24.165 C128.351,27.139 133.991,33.115 140.261,38.033 C146.341,42.803 153.499,46.777 158.496,52.812 C163.528,58.888 166.096,66.675 169.653,73.467 C173.399,80.621 178.287,87.367 179.966,94.67" fill="#CD8E3B" /></g><g clip-path="url(#Clip_12)"><path d="M169.088,94.621 C168.898,102.321 165.461,109.524 163.171,116.597 C160.809,123.894 159.348,131.676 155.182,137.841 C150.871,144.218 144.147,148.426 138.381,153.081 C132.386,157.922 126.757,163.544 119.721,165.948 C112.579,168.388 104.737,167.33 97.087,166.651 C89.604,166.713 81.834,167.793 74.77,165.82 C67.488,163.786 61.468,158.807 55.342,154.934 C48.886,150.853 41.84,147.399 37.49,141.65 C32.964,135.668 31.723,128.05 30.411,120.688 C29.184,113.808 27.436,106.584 29.82,98.865 C27.808,90.864 29.457,83.398 30.217,76.288 C31.06,68.394 31.438,60.482 35.015,53.95 C38.696,47.228 45.276,42.633 51.078,37.65 C56.838,32.703 62.337,26.878 69.418,23.939 C76.465,21.014 84.34,21.224 91.937,20.58 C100.368,21.948 108.326,21.683 115.11,23.947 C123.246,26.662 129.325,31.924 135.336,35.848 C142.293,40.39 149.365,44.17 153.859,50.206 C158.485,56.422 160.029,64.364 162.486,72.019 C164.762,79.11 168.302,86.417 169.088,94.621" fill="#CE903E" /></g><g clip-path="url(#Clip_13)"><path d="M180.886,96.288 C178.163,103.98 173.225,110.872 169.938,117.901 C166.453,125.353 164.372,133.401 159.818,139.654 C155.053,146.194 148.089,150.463 141.652,155.171 C135.483,159.683 129.352,165.116 121.186,167.464 C114.178,169.479 106.003,168.52 97.216,168.621 C88.774,169.389 80.871,170.862 73.889,169.043 C66.123,167.02 60.152,161.644 54.069,156.94 C48.09,152.316 41.354,147.967 36.875,141.278 C32.733,135.093 31.084,127.152 28.124,119.628 C25.375,112.645 21.058,105.623 19.245,97.83 C20.214,90.144 24.435,83.134 27.582,76.196 C30.752,69.208 33.103,61.563 37.964,55.658 C42.866,49.704 49.954,45.917 56.046,41.397 C62.315,36.745 68.042,31.093 74.998,28.319 C82.326,25.396 90.307,25.672 97.736,25.247 C105.458,25.135 113.63,24.388 121.3,26.937 C128.643,29.377 134.868,34.831 141.524,39.308 C148.02,43.678 155.434,47.333 160.687,53.272 C165.917,59.186 168.626,66.956 172.047,74.064 C175.455,81.145 179.843,88.38 180.886,96.288" fill="#CF903E" /></g><g clip-path="url(#Clip_14)"><path d="M174.591,101.939 C175.145,109.819 171.735,117.127 168.779,124.239 C165.916,131.128 163.326,138.701 157.847,144.532 C152.77,149.935 145.384,153.191 138.613,157.411 C132.25,161.376 126.177,166.651 118.772,169.345 C111.641,171.939 103.745,171.841 96.048,173.056 C88.626,172.171 81.248,172.265 74.806,169.489 C68.037,166.573 62.958,160.944 57.501,156.416 C51.856,151.731 45.425,147.72 41.439,141.84 C37.315,135.755 36.036,128.272 33.971,121.494 C31.832,114.469 28.81,107.628 29.196,100.511 C27.58,92.65 29.413,85.007 30.327,77.743 C31.315,69.896 31.705,61.909 35.25,55.372 C38.942,48.564 45.489,43.975 51.5,39.289 C57.402,34.687 63.412,29.42 71.108,27.549 C78.106,25.848 86.011,27.501 94.145,28.593 C103.06,27.392 111.392,25.586 118.748,27.155 C127.105,28.937 133.625,34.257 140.063,39.052 C146.452,43.812 153.44,48.488 158.034,55.63 C162.253,62.189 163.845,70.546 166.626,78.643 C169.178,86.072 173.19,93.582 174.591,101.939" fill="#CF903F" /></g><g clip-path="url(#Clip_15)"><path d="M173.621,94.541 C173.294,103.466 170.069,111.539 168.031,119.24 C165.758,127.828 164.283,136.425 159.782,143.148 C155.067,150.19 147.67,154.639 140.39,159.232 C133.701,163.452 126.671,168.465 117.715,170.282 C110.156,171.816 101.582,170.361 92.345,169.972 C85.27,170.083 78.085,170.724 71.863,168.066 C65.652,165.411 61.131,159.775 56.193,154.747 C51.576,150.046 45.918,145.588 42.772,139.139 C39.905,133.262 39.692,126.065 38.32,118.987 C37.078,112.575 34.425,105.924 34.614,98.712 C34.356,91.601 37.036,84.738 38.477,77.972 C39.972,70.95 40.417,63.545 43.677,57.498 C47.074,51.195 53.024,46.877 58.265,42.315 C63.479,37.776 68.592,32.477 75.556,30.348 C81.822,28.433 89.059,29.684 96.685,30.247 C104.543,30.109 112.292,28.814 119.291,30.395 C126.926,32.119 133.239,36.74 139.548,40.234 C146.328,43.989 153.54,47.066 158.407,52.518 C163.448,58.164 165.59,65.68 168.149,72.755 C170.627,79.607 173.874,86.716 173.621,94.541" fill="#D0913F" /></g><g clip-path="url(#Clip_16)"><path d="M171.135,100.64 C170.066,107.411 165.947,113.729 162.923,120.386 C160.019,126.781 158.071,134.024 153.709,139.669 C149.317,145.353 142.812,149.038 137.287,153.32 C131.539,157.774 126.24,163.101 119.647,165.326 C112.913,167.598 105.491,166.493 98.285,165.674 C91.182,166.715 83.497,168.004 76.208,165.89 C69.338,163.897 63.429,158.82 57.138,154.758 C50.951,150.764 43.892,147.523 38.958,142.212 C33.755,136.612 31.139,129.31 28.113,123.02 C24.698,115.922 20.961,108.925 21.408,102.023 C23.314,93.995 27.657,87.01 30.477,80.027 C33.569,72.372 35.401,64.408 39.65,58.163 C44.223,51.442 51.001,46.974 56.987,42.08 C63.032,37.138 68.789,31.402 76.352,28.53 C83.348,25.872 91.417,26.156 99.777,25.44 C106.607,25.609 114.559,25.577 122.129,28.956 C128.749,31.912 134.299,37.718 140.434,42.605 C146.336,47.307 153.266,51.349 157.829,57.395 C162.478,63.553 164.389,71.248 166.734,78.345 C169.117,85.553 172.089,92.943 171.135,100.64" fill="#D1913F" /></g><g clip-path="url(#Clip_17)"><path d="M169.915,100.365 C171.611,107.625 168.992,114.957 166.608,122.288 C164.39,129.107 162.428,136.71 157.582,142.783 C153.009,148.513 146.056,152.255 139.895,156.647 C133.765,161.016 127.962,166.377 120.979,168.777 C113.76,171.258 106.06,170.515 98.71,170.191 C92.069,168.906 84.93,168.599 78.7,165.495 C72.613,162.462 67.98,156.917 62.761,152.37 C57.616,147.887 51.473,144.072 47.627,138.329 C43.849,132.688 42.647,125.607 40.555,118.952 C38.552,112.583 35.42,106.274 35.346,99.156 C32.968,91.508 34.02,84.263 34.197,77.736 C34.408,69.98 34.329,62.532 37.498,56.456 C40.84,50.05 47.168,45.905 52.995,41.488 C58.556,37.273 64.121,32.189 71.211,29.895 C77.866,27.743 85.375,28.472 92.765,28.105 C101.174,28.143 109.26,27.185 116.459,29.146 C124.456,31.323 130.827,36.457 137.165,40.654 C143.889,45.106 151.027,49.117 155.681,55.41 C160.333,61.703 162.084,69.722 164.457,77.413 C166.716,84.733 169.905,92.17 169.915,100.365" fill="#D2913F" /></g><g clip-path="url(#Clip_18)"><path d="M175.498,99.925 C174.88,107.686 170.87,114.823 167.679,121.805 C164.503,128.758 161.909,136.335 156.813,142.17 C151.76,147.955 144.57,151.592 138.246,155.941 C131.823,160.359 125.832,165.752 118.735,168.339 C111.299,171.05 103.365,170.678 95.91,170.984 C88.917,170.007 81.603,169.887 75.216,166.84 C68.879,163.817 64.112,158.155 58.907,153.296 C53.825,148.551 47.818,144.224 44.317,137.92 C41.001,131.948 40.4,124.618 38.935,117.411 C37.6,110.843 35.099,104.041 35.637,96.573 C34.499,89.718 36.611,82.989 37.807,76.37 C39.021,69.65 39.485,62.499 42.869,56.564 C46.205,50.714 52.099,46.653 57.315,42.092 C62.304,37.729 67.035,32.362 73.541,29.645 C79.549,27.136 86.582,27.391 93.721,26.66 C102.39,26.986 110.441,26.3 117.429,28.451 C125.495,30.932 131.607,36.331 137.735,40.811 C144.21,45.545 151.123,49.837 155.805,56.27 C160.394,62.574 162.449,70.572 165.679,77.988 C168.797,85.15 173.319,92.199 175.498,99.925" fill="#D29140" /></g><g clip-path="url(#Clip_19)"><path d="M162.733,99.127 C162.625,106.916 159.761,113.819 158.115,120.465 C156.263,127.938 155.265,135.448 151.438,141.318 C147.449,147.437 140.96,151.249 134.789,155.442 C129.104,159.305 123.323,164.125 115.757,166.199 C109.257,167.98 101.764,167.083 93.858,167.442 C86.44,167.484 78.974,167.963 72.368,165.251 C65.745,162.531 60.693,156.878 55.272,151.938 C50.036,147.166 43.897,142.753 40.137,136.412 C36.52,130.314 35.516,122.822 33.581,115.72 C31.716,108.879 28.72,101.824 28.698,94.452 C30.348,87.747 34.748,81.372 37.997,74.605 C41.086,68.173 43.151,60.835 47.578,55.03 C51.984,49.252 58.466,45.356 64.095,40.859 C69.769,36.327 75.048,30.871 81.858,28.31 C88.454,25.83 95.824,26.39 103.389,26.38 C110.208,27.675 117.468,27.894 123.831,30.826 C130.224,33.77 135.154,39.202 140.46,43.654 C145.863,48.189 152.057,52.165 155.674,58.113 C159.251,63.993 159.926,71.219 161.112,78.331 C162.193,84.821 164.153,91.728 162.733,99.127" fill="#D39140" /></g><g clip-path="url(#Clip_20)"><path d="M165.784,96.303 C167.707,103.874 166.136,111.03 165.333,117.623 C164.426,125.07 163.812,132.474 160.184,138.393 C156.418,144.537 149.961,148.436 144.145,152.604 C138.351,156.757 132.608,161.633 125.67,163.494 C118.776,165.343 111.264,164.005 104.115,163.267 C96.171,164.182 88.8,166.174 82.234,165.357 C74.299,164.369 67.972,160.316 62.072,157.169 C55.334,153.575 48.632,150.163 44.58,144.319 C40.539,138.492 39.657,130.948 38.321,123.484 C37.109,116.717 35.026,109.648 36.065,102.005 C33.937,94.271 35.55,86.851 36.604,79.813 C37.737,72.248 38.697,64.516 42.77,58.291 C46.836,52.076 53.591,48.044 59.829,43.718 C65.883,39.52 71.957,34.543 79.352,32.637 C86.431,30.812 94.2,32.13 101.886,32.858 C109.36,32.375 116.407,30.966 122.53,32.452 C129.586,34.165 134.914,38.875 140.196,42.799 C145.677,46.871 151.668,50.692 155.263,56.668 C158.658,62.312 159.382,69.459 161.116,76.381 C162.712,82.75 165.577,89.185 165.784,96.303" fill="#D49140" /></g><g clip-path="url(#Clip_21)"><path d="M173.213,95.811 C173.568,104.042 170.196,111.574 167.292,118.778 C164.371,126.024 161.646,133.732 156.183,139.686 C150.962,145.376 143.493,148.899 136.626,153.181 C130.006,157.309 123.629,162.517 116.082,165.134 C108.599,167.73 100.518,167.598 92.704,168.513 C87.166,167.099 80.153,166.393 73.599,162.749 C67.997,159.635 63.5,154.127 58.361,149.498 C53.415,145.042 47.423,141.166 43.915,135.401 C40.476,129.75 39.8,122.814 38.685,115.993 C37.67,109.782 35.837,103.336 37.489,96.224 C34.842,89.433 36.591,82.726 38.2,76.093 C39.758,69.671 41.27,62.626 45.687,56.939 C49.789,51.658 56.261,48.23 61.902,44.063 C67.486,39.938 72.633,34.751 78.856,32.169 C85.57,29.382 92.798,29.54 99.209,29.092 C106.185,29.367 113.476,29.157 120.121,31.972 C126.478,34.665 131.584,40.076 137.262,44.529 C142.767,48.848 149.248,52.447 153.773,57.91 C158.329,63.412 160.655,70.463 163.875,76.613 C167.267,83.09 171.693,89.198 173.213,95.811" fill="#D59240" /></g><g clip-path="url(#Clip_22)"><path d="M164.333,95.826 C164.158,102.893 161.004,109.504 158.902,115.996 C156.734,122.693 155.394,129.835 151.569,135.494 C147.614,141.347 141.441,145.209 136.15,149.481 C130.647,153.924 125.481,159.085 119.023,161.291 C112.468,163.531 105.271,162.559 98.25,161.936 C91.382,161.993 84.25,162.984 77.767,161.173 C71.083,159.307 65.558,154.736 59.936,151.182 C54.01,147.436 47.543,144.266 43.551,138.99 C39.397,133.5 38.258,126.508 37.053,119.751 C35.928,113.436 34.323,106.805 36.511,99.721 C34.664,92.377 36.178,85.525 36.875,79 C37.649,71.755 37.996,64.492 41.279,58.497 C44.657,52.329 50.697,48.111 56.021,43.538 C61.308,38.997 66.356,33.65 72.854,30.953 C79.323,28.269 86.55,28.461 93.522,27.87 C101.26,29.125 108.564,28.882 114.791,30.96 C122.259,33.452 127.838,38.281 133.355,41.883 C139.74,46.052 146.231,49.521 150.355,55.061 C154.602,60.766 156.019,68.056 158.274,75.082 C160.363,81.589 163.612,88.296 164.333,95.826" fill="#D59241" /></g><g clip-path="url(#Clip_23)"><path d="M165.851,97.08 C166.32,105.03 163.597,112.009 161.681,118.646 C159.559,126.002 157.771,133.408 153.162,138.997 C148.544,144.598 141.567,147.793 134.92,151.458 C128.729,154.872 122.435,159.224 114.877,160.823 C107.987,162.281 100.416,161.023 92.69,160.87 C86.695,160.878 80.187,161.438 74.253,159.005 C68.715,156.734 64.333,151.835 59.394,147.812 C54.695,143.985 48.976,140.778 45.284,135.683 C41.699,130.735 40.402,124.343 38.188,118.487 C36.033,112.789 32.734,107.097 32.266,100.805 C32.414,93.007 35.236,85.874 36.862,79.11 C38.685,71.526 39.642,63.926 43.287,57.947 C47.224,51.49 53.605,47.376 59.619,43.187 C65.419,39.147 71.419,34.495 79.105,32.936 C85.748,31.589 93.26,33.174 101.282,33.936 C107.592,33.494 114.762,32.781 121.515,35.223 C127.654,37.444 132.841,42.418 138.455,46.442 C143.97,50.395 150.356,53.674 154.553,58.84 C158.964,64.271 160.736,71.15 162.778,77.329 C164.937,83.862 167.415,90.409 165.851,97.08" fill="#D69241" /></g></g><path d="M158.99,48.913 C155.034,54.543 146.527,55.384 139.988,50.79 C133.449,46.196 131.356,37.908 135.312,32.277 C139.267,26.647 147.775,25.806 154.313,30.4 C160.852,34.994 162.946,43.283 158.99,48.913" fill="#51310E" /><path d="M156.231,45.009 C153.066,49.513 146.26,50.186 141.03,46.511 C135.799,42.836 134.124,36.205 137.288,31.7 C140.453,27.196 147.259,26.524 152.49,30.199 C157.721,33.874 159.396,40.505 156.231,45.009" fill="#56320F" /><path d="M154.336,43.678 C151.804,47.282 146.36,47.819 142.175,44.879 C137.99,41.939 136.65,36.635 139.182,33.031 C141.714,29.428 147.158,28.89 151.343,31.83 C155.528,34.77 156.868,40.074 154.336,43.678" fill="#6D3C17" /><path d="M66.208,73.044 C72.082,76.628 73.47,85.063 69.307,91.885 C65.145,98.707 57.009,101.331 51.135,97.747 C45.261,94.163 43.874,85.727 48.036,78.906 C52.198,72.084 60.334,69.46 66.208,73.044" fill="#51310E" /><path d="M62.49,76.05 C67.189,78.917 68.299,85.666 64.97,91.123 C61.64,96.58 55.131,98.68 50.432,95.812 C45.733,92.945 44.622,86.197 47.952,80.739 C51.282,75.282 57.791,73.183 62.49,76.05" fill="#56320F" /><path d="M61.285,78.026 C65.044,80.32 65.932,85.719 63.269,90.084 C60.605,94.45 55.398,96.13 51.638,93.836 C47.879,91.542 46.991,86.143 49.655,81.778 C52.319,77.412 57.526,75.732 61.285,78.026" fill="#6D3C17" /><path d="M177.874,107.012 C184.755,107.021 190.325,113.506 190.315,121.497 C190.305,129.488 184.718,135.959 177.837,135.95 C170.956,135.941 165.386,129.456 165.396,121.465 C165.406,113.474 170.993,107.003 177.874,107.012" fill="#51310E" /><path d="M176.261,111.511 C181.766,111.518 186.222,116.706 186.214,123.099 C186.206,129.492 181.736,134.669 176.231,134.662 C170.726,134.654 166.27,129.466 166.278,123.073 C166.287,116.681 170.756,111.504 176.261,111.511" fill="#56320F" /><path d="M176.258,113.827 C180.662,113.833 184.227,117.983 184.22,123.097 C184.214,128.212 180.638,132.353 176.234,132.347 C171.83,132.342 168.265,128.191 168.272,123.077 C168.279,117.963 171.854,113.821 176.258,113.827" fill="#6D3C17" /><path d="M30.567,135.002 C27.253,139.719 20.125,140.423 14.647,136.575 C9.169,132.726 7.415,125.782 10.729,121.065 C14.043,116.347 21.171,115.643 26.649,119.492 C32.127,123.341 33.881,130.285 30.567,135.002" fill="#51310E" /><path d="M28.255,131.732 C25.604,135.506 19.902,136.069 15.519,132.99 C11.137,129.911 9.733,124.356 12.385,120.582 C15.036,116.808 20.738,116.245 25.12,119.324 C29.503,122.403 30.906,127.958 28.255,131.732" fill="#56320F" /><path d="M26.668,130.617 C24.547,133.636 19.985,134.087 16.479,131.623 C12.973,129.16 11.851,124.716 13.972,121.697 C16.093,118.678 20.654,118.227 24.16,120.691 C27.666,123.154 28.789,127.598 26.668,130.617" fill="#6D3C17" /><path d="M135.51,117.016 C138.665,122.16 136.38,129.301 130.406,132.965 C124.432,136.629 117.031,135.429 113.876,130.285 C110.721,125.141 113.006,118 118.98,114.336 C124.954,110.672 132.355,111.872 135.51,117.016" fill="#51310E" /><path d="M131.407,117.878 C133.931,121.993 132.103,127.706 127.324,130.637 C122.545,133.569 116.624,132.609 114.1,128.493 C111.576,124.378 113.404,118.666 118.183,115.734 C122.962,112.803 128.883,113.763 131.407,117.878" fill="#56320F" /><path d="M129.676,118.94 C131.695,122.232 130.233,126.802 126.41,129.147 C122.586,131.492 117.85,130.725 115.83,127.432 C113.811,124.14 115.273,119.57 119.097,117.225 C122.92,114.88 127.657,115.648 129.676,118.94" fill="#6D3C17" /><path d="M77.307,177.386 C73.351,183.016 64.844,183.857 58.305,179.263 C51.766,174.669 49.673,166.381 53.628,160.75 C57.584,155.12 66.092,154.279 72.63,158.873 C79.169,163.467 81.263,171.756 77.307,177.386" fill="#51310E" /><path d="M74.548,173.483 C71.383,177.987 64.577,178.66 59.346,174.985 C54.116,171.31 52.441,164.679 55.605,160.174 C58.77,155.67 65.576,154.998 70.807,158.673 C76.038,162.348 77.713,168.979 74.548,173.483" fill="#56320F" /><path d="M72.654,172.152 C70.122,175.756 64.678,176.293 60.493,173.353 C56.308,170.413 54.968,165.109 57.5,161.505 C60.031,157.902 65.476,157.364 69.661,160.304 C73.846,163.244 75.186,168.548 72.654,172.152" fill="#6D3C17" /><path d="M70.01,27.375 C70.01,34.256 63.532,39.834 55.541,39.834 C47.55,39.834 41.072,34.256 41.072,27.375 C41.072,20.494 47.55,14.915 55.541,14.915 C63.532,14.915 70.01,20.494 70.01,27.375" fill="#51310E" /><path d="M65.509,25.767 C65.509,31.272 60.327,35.735 53.934,35.735 C47.541,35.735 42.358,31.272 42.358,25.767 C42.358,20.262 47.541,15.799 53.934,15.799 C60.327,15.799 65.509,20.262 65.509,25.767" fill="#56320F" /><path d="M63.194,25.767 C63.194,30.171 59.048,33.741 53.934,33.741 C48.819,33.741 44.673,30.171 44.673,25.767 C44.673,21.363 48.819,17.793 53.934,17.793 C59.048,17.793 63.194,21.363 63.194,25.767" fill="#6D3C17" /><path d="M120.116,35.912 C122.17,39.85 120.128,44.976 115.555,47.361 C110.982,49.746 105.61,48.488 103.556,44.55 C101.502,40.613 103.544,35.487 108.117,33.101 C112.69,30.716 118.062,31.974 120.116,35.912" fill="#51310E" /><path d="M117.06,36.335 C118.703,39.485 117.07,43.586 113.411,45.494 C109.753,47.403 105.455,46.396 103.812,43.246 C102.169,40.095 103.803,35.995 107.461,34.086 C111.119,32.178 115.417,33.185 117.06,36.335" fill="#56320F" /><path d="M115.735,37.026 C117.049,39.546 115.743,42.827 112.816,44.353 C109.889,45.88 106.451,45.075 105.137,42.555 C103.822,40.034 105.129,36.754 108.056,35.227 C110.982,33.7 114.42,34.506 115.735,37.026" fill="#6D3C17" /><path d="M121.245,154.766 C119.399,158.805 114.1,160.342 109.408,158.199 C104.717,156.055 102.411,151.043 104.257,147.003 C106.103,142.964 111.402,141.427 116.094,143.571 C120.785,145.714 123.091,150.727 121.245,154.766" fill="#51310E" /><path d="M119.034,152.614 C117.557,155.846 113.318,157.075 109.565,155.36 C105.812,153.645 103.967,149.635 105.444,146.404 C106.92,143.172 111.16,141.943 114.913,143.658 C118.666,145.373 120.511,149.383 119.034,152.614" fill="#56320F" /><path d="M117.675,151.993 C116.493,154.578 113.102,155.562 110.1,154.19 C107.097,152.818 105.621,149.61 106.803,147.025 C107.984,144.44 111.376,143.456 114.378,144.828 C117.38,146.2 118.856,149.408 117.675,151.993" fill="#6D3C17" /></g><g id="レイヤー_2" />
        </svg>
      </div>
      <div class="text-white col-span-3 pl-3">
        <div class="py-2 text-sm">Hey! We are using cookies! Read our <a href="#" class="underline">privacy policy</a> for more information.</div>
        <div class="mt-2 flex justify-end gap-x-2">
          <a href="https://google.com" class="bg-red-500 px-3 py-1 text-sm rounded">Exit</a>
          <a href="{{ route('cookieConsent') }}" class="bg-green-600 px-3 py-1 text-sm rounded">Accept</a>
        </div>
      </div>
    </div>
  </div>
</div>
@endif
Enter fullscreen mode Exit fullscreen mode

Open the resources/views/welcome.blade.php file and add the CSS file before closing the tag.

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
Enter fullscreen mode Exit fullscreen mode

Again include the cookie-consent-banner.blade.php component to the same welcome.blade.php file. Make sure to add it before closing the </body> tag.

    <x-cookie-consent-banner />
</body>
Enter fullscreen mode Exit fullscreen mode

Repeat the above mentioned two steps for all other pages.

Routes

Add this new route to web.php file.

Route::get('/cookie-consent', CookieConsentController::class)->name('cookieConsent');
Enter fullscreen mode Exit fullscreen mode

Production Build

Now everything is almost completed and you can run the following command to build the CSS for production. It will build an optimized version by removing all the unnecessary classes. But before that, make sure to terminate the execution of the previous npm run watch command by pressing [Ctrl] + [C] keys.

npm run prod
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this tutorial, we discussed an alternative method that we can use to achieve interactive functionality which is usually done with JavaScript. This method can be a good fallback strategy especially when the user disables JavaScript in their browser. We can even extend this method to pass additional data as URL parameters. Among the downsides, we cannot do anything with this method without human interaction. Also, we cannot avoid full page refreshes. What do you think about this tutorial? Let us know your thoughts in the comment section.

Feel free to visit devtonight.com for more related content.

Top comments (0)