Web Applications in PHP

Appearance

Automation ​

Vite ​

  • The configuration from the previous section is very basic and has several limitations
    • A CDN link is not the best solution if you want to change the look and feel with Tailwind CSS.
      It's better to use a locally hosted, version of Tailwind CSS that will be compiled (automatically) with the build-in JIT compiler.
    • We don't have our own JavaScript file yet, in which we group all the scripts that apply to every page.
    • You'll need to refresh your browser manually every time you make a change to the code.
  • All these limitations can be solved easily with Laravel Vite
  • Follow the instructions in Config -> Laravel Vite to incorporate Vite into your application (resulting in a better, automated workflow)
    • Configure Laravel Vite

Update the template ​

  • Open resources/views/layouts/vinylshop.blade.php
    • Line 6: remove the CDN link to tailwindcss !
    • Line 9: add the @vite() reference to the head to make all the files based on the template hot reloadable
html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{-- <script src="https://cdn.tailwindcss.com"></script> --}}   
    <meta name="description" content="{{ $description ?? 'Welcome to the Vinyl Shop' }}">
    <title>{{  $title ?? 'The Vinyl Shop' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])   
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">
        {{--  Navigation  --}}
        <x-layout.nav />
    </header>
    <main class="container mx-auto p-4 flex-1 px-4">
        {{-- Title --}}
        <h1 class="text-3xl mb-4">
            {{ $subtitle ?? $title ?? "This page has no (sub)title" }}
        </h1>
        {{-- Main content --}}
        {{ $slot }}
    </main>
    <x-layout.footer />
</div>
@stack('script')
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {{-- <script src="https://cdn.tailwindcss.com"></script> --}}   
    <meta name="description" content="{{ $description ?? 'Welcome to the Vinyl Shop' }}">
    <title>{{  $title ?? 'The Vinyl Shop' }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])   
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">
        {{--  Navigation  --}}
        <x-layout.nav />
    </header>
    <main class="container mx-auto p-4 flex-1 px-4">
        {{-- Title --}}
        <h1 class="text-3xl mb-4">
            {{ $subtitle ?? $title ?? "This page has no (sub)title" }}
        </h1>
        {{-- Main content --}}
        {{ $slot }}
    </main>
    <x-layout.footer />
</div>
@stack('script')
</body>
</html>

Tailwind: app.css ​

  • By default, Tailwind removes all style properties from all the tags. For example, all headings have the same font size and weight as a normal paragraph
  • If you’d like to add your own base styles, simply add them to your CSS within a @layer base directive
  • Open resources/views/home.blade.php and add some dummy headings and text with emmet:
    (hr.my-4^h2>{heading 2}^p>lorem^h3>{heading 3}^p>lorem)
php
<x-vinylshop-layout>
    <x-slot name="description">New description</x-slot>
    <x-slot name="title">The Vinyl Shop</x-slot>

    <p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>

    <hr class="my-4">   
    <h2>heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis commodi dolorem eaque error esse
        eum impedit iusto necessitatibus optio, perferendis possimus quaerat, quod rem sapiente suscipit voluptates!
        Repudiandae, tempore?</p>
    <h3>heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at dolor dolorum fugit ipsam iusto laborum
        perferendis reprehenderit sapiente tenetur. Ab architecto autem dolorem illo maiores minima natus repellat
        vitae.</p>

    @push('script')
        <script>
            console.log('The Vinyl Shop JavaScript works! 🙂')
        </script>
    @endpush
</x-vinylshop-layout>
<x-vinylshop-layout>
    <x-slot name="description">New description</x-slot>
    <x-slot name="title">The Vinyl Shop</x-slot>

    <p>Welcome to the website of The Vinyl Shop, a large online store with lots of (classic) vinyl records.</p>

    <hr class="my-4">   
    <h2>heading 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium blanditiis commodi dolorem eaque error esse
        eum impedit iusto necessitatibus optio, perferendis possimus quaerat, quod rem sapiente suscipit voluptates!
        Repudiandae, tempore?</p>
    <h3>heading 3</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A at dolor dolorum fugit ipsam iusto laborum
        perferendis reprehenderit sapiente tenetur. Ab architecto autem dolorem illo maiores minima natus repellat
        vitae.</p>

    @push('script')
        <script>
            console.log('The Vinyl Shop JavaScript works! 🙂')
        </script>
    @endpush
</x-vinylshop-layout>
  • Open resources/css/app.css and add some default styling to the base layer for the h2 and h3 tags
css
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

@layer base {       
    h2 { 
        @apply text-2xl my-2;
    }
    h3 {
        @apply text-xl italic my-2;
    } 
}
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

@layer base {       
    h2 { 
        @apply text-2xl my-2;
    }
    h3 {
        @apply text-xl italic my-2;
    } 
}
  • Remove the dummy text from de homepage

Livewire ​

  • In later chapters, we will use Livewire and Alpine.js to add some interactivity to the application to make our pages more dynamic
  • When a page contains one or more Livewire components, the corresponding CSS and JavaScript files are automatically added to the page
  • When a page does not contain any Livewire components, but only elements that contain Alpine.js directives, then it's necessary CSS and JavaScript files must be added manually
    • Line 6: add @livewireStyles just before the closing head tag
    • Line 15: add @livewireScripts just before the closing body tag
php
<!doctype html>
<html lang="en">
<head>
    ...
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles     
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">...</header>
    <main class="container mx-auto p-4 flex-1 px-4">...</main>
    <x-layout.footer />
</div>
@stack('script')
@livewireScripts        
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    ...
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles     
</head>
<body class="font-sans antialiased">
<div class="flex flex-col space-y-4 min-h-screen text-gray-800 bg-gray-100">
    <header class="shadow bg-white/70 sticky inset-0 backdrop-blur-sm z-10">...</header>
    <main class="container mx-auto p-4 flex-1 px-4">...</main>
    <x-layout.footer />
</div>
@stack('script')
@livewireScripts        
</body>
</html>

Last updated:

© 2023 - Vince Colson, Jordi De Roeck & Patrick Verhaert