Build A TodoList with Laravel, PHP and Ionic Vue

Learn to bootstrap a Laravel app with Docker and Cool, installing Docker Desktop and Cool, starting the Docker engine, and using the Laravel preset for easy local development.

Create a Laravel project by pulling images from the docker repo, selecting PHP 8, and configuring Postgres with a cache server, then review the docker-compose.yaml and the Laravel YAML script.

Build a Laravel docker image, configure the env file for postgres, set database host and port, and run the initial setup with docker-compose before exploring models and controllers.

Create a Laravel to-do model and migration, run artisan commands via cool, define title and completed fields, migrate the database, and prepare an API with controllers.

Create a Laravel API controller with Artisan, set up API routes for the Todo resource, import the controller, and verify routes with php artisan route:list.

implement the store method to save todos to the database, return a json response with status 200, and verify that the records are populated before the next api retrieval.

Implement Laravel API endpoints for a todo list using Eloquent to fetch all todos and find by id, returning JSON responses.

Update todos via Laravel by locating a todo by its id, applying changes from the request object, and returning the updated todo with a 200 status in JSON.

Delete a todo via a Laravel API by removing it by id, confirming the database deletion, and returning a 200 response, then prepare for web and mobile integration.

Globally install Ionic, create a new app with Ionic start, explore the project structure, run Ionic serve, integrate Capacitor HTTP, and build for production.

Create an ionic http service to fetch and manage todos using capacitor http, define a todo interface, and implement get and post requests.

Learn how to implement Ionic HTTP service methods for update and delete requests using a resource URL and todo id, and match HTTP verbs for get, post, put, and delete.

Build the Ionic Vue homepage, create a home view, and implement two components (form and todo list) with services for fetch, create, update, and delete via async setup.

Create an Ionic Vue to-do list item component by building a reusable template driven by item data, defining props for update status, and implementing update and delete methods.

Develop the Ionic Vue UI for a to-do list, including toggle completion, update status, and delete actions, and integrate it into the homepage while refining the layout.

This lecture demonstrates a bug fix workflow in an Ionic Vue todo list app, debugging rendering issues, loading initial data on mounted, and updating to-do items.

Create an Ionic Vue to-do form that inputs a title, sets completed to false, and adds the item to the list with v-model and a submit button on an ion-grid.