Back Button Techniques
Playing With PHP

Playing With PHP

This series is all about the little projects you build once you're off the clock. One topic per section, we'll toy with the fringes of PHP to, for example, blink our lights when a PHPUnit test fails. Why bother? Because it's fun! Come along and join me.

Intermediate
8 episodes
2h
8
Latest Episode in This Series

Added 1 day ago

Use Livewire

We can also use Livewire to make our weather widget interactive. We'll re-use much...

Watch
Playing With PHP

Playing With PHP

This series is all about the little projects you build once you're off the clock. One topic per section, we'll toy with the fringes of PHP to, for example, blink our lights when a PHPUnit test fails. Why bother? Because it's fun! Come along and join me.

Begin
8
Latest Episode in This Series

Added 1 day ago

Use Livewire

We can also use Livewire to make our weather widget interactive. We'll re-use much of the logic...
Watch

Your Teacher | Andre Madarang

https://laracasts.s3.amazonaws.com/avatars/andre-madarang.jpg's avatar
Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.
  1. Section 1 The Phillips Hue API

    1. Free Episode Run Time 9:42

      To begin, let's have a look at the Philips Hue REST API. We'll figure out how to toggle the lights in our room and adjust their colors.

    2. Now let's leverage Vue 3 and Tailwind to build a simple client app that allows us to control our lights from any web browser.

    3. We can hook into PHPUnit's events, like for passing or failing tests, to change the color of our lights accordingly. GitHub Repo: https://github.com/drehimself/lc-hue-phpunit

  2. Section 2 How's the Weather

    1. New Run Time 15:21

      Let's begin by styling our app with Tailwind CSS and extracting it to a Blade component.

    2. We can use the OpenWeather API along with Laravel's HTTP client to fetch data for our current and future forecasts.

    3. New Run Time 12:40

      We can make our application more interactive by pulling in Algolia Places for our dropdown of cities. The query string will help us keep track of the currently selected city and keep the majority of logic on the backend.

    4. New Run Time 25:32

      Let's now make our Weather widget interactive by extracting it to a Vue component. We'll move much of the logic over from Laravel into Vue and allow it to update whenever the location is changed from the Places API.

    5. New Run Time 13:36 View Source

      We can also use Livewire to make our weather widget interactive. We'll re-use much of the logic from the Blade components we created, but make a few changes to make it work with Livewire. We'll also pull in Alpine.js for some simple DOM manipulation.