Updated week 14-21Oct - Livewire Inertia Shopping Cart instanceOf, whereBetween and +

YouTube: Vue+Laravel, install axios, icons and listing, Livewire table sorting, where between, instanceOf polymorphic relationships, CKEditor NPN, Properties in Livewire Courses: Shopping Cart, Blog and ToDo Laravel Livewire/Inertia Blog, Meta Quest 2 months, slippery pad in EU

Hello everyone, welcome to another week in which I will tell you what the updates were for the week of October 14-21 starting.

Youtube

As always from what I uploaded on the YouTube channel or the YouTube channels here.

I'm going to go to what would be the content posts for the old Laravel course which was Laravel in its version 10 here we are working with what would be Vue then we are installing the iconography also here we install what is axios and also down here we have what is to create a finally paginated list in Vue as simple as that.

Laravel Livewire as it is how to apply sorting in Tables and with this have a kind of Data Table like this we can sort by ID title and date in this case it is projects with inerti but it is equivalent it is the same remember that both courses are brothers.

Here now we have what is the filtering by ranges what you could see here that I can select a date from and a date to and they would appear.

Here the publications that are using the whereBetween.

Here is also a personal or exclusive video for what would be the YouTube channel How is the instanceof which is the best ally to precisely work with polymorphic relationships since with it by having a polymorphic relationship and accessing the relationship we can know if for example suppose it is a relationship called File that can be books that can be images or another then through this instanceof they can tell us if it is a book if it is an image or another type of file we can easily know then as I put in the title this is being your best ally.

Here we also have what it is to install CKEditor through node or through npm which would be the most recommended option I am going to show you what the steps are which are basically two on the one hand install what is the CKEditor and on the other hand obtain the source code of the basic structure to have a fully functional CKEditor.

This is the introductory video of the Laravel Livewire course for computed properties and other options such as debounce and Lazy.

This is another introduction to Laravel Livewire, in this case for what would be the blog-type website, which is already part of the course updates. I'll mention it now, and here is what is the introduction to Livewire javascript and what I'm referring to would be the oo wir among other additions and things that we have pending there.

Here we also have some data and well additional data about the Livewire properties, again locked properties in this case, that is to say being able to place a Lock, which is very important if you want, for the sake of redundancy, to publish a property at the component level but you don't want to use it in your forms. So this would be practically mandatory so that an attacker can avoid injecting an additional property that controls that property that in principle should not have been exposed, for example, which is the case that we see here, the ID, the ID of a publication, suppose it is the ID of some order, you have it published there at the property level but you don't have it exposed in a form, so it can be a bit delicate since a user can edit or work based on the form that you have exposed with the identifier or the order of another user, so these are little things that you have to keep in mind there, for that we can block it with the lot or directly declare it as private, although the people at Livewire recommend that you place the Lock.

Here is also a very personal video in which I tell you about my experience or how I carry out my day to day as a software developer in this case, completely independent, but even though my physical location is, at least for the moment, it is Venezuela, which is good to be here to make a summary here, as they say, you can't live if you don't survive. I think that is a conclusion that I had to also put in that video, but well, I'll take advantage and mention it now, since from here on we will do this last.

Courses

Let's go to the updates at the course level that remembers that I am working on the lightware and inertia course that to date are already available on the udem platform In case you are also interested in getting them there Remember that the latest version is Laravel 11 which is the latest to date then here we have what is the creation of a simple blot that would be a page like the following one which we have here a list with the filtering that we also created here for the dashboard the posted section that obviously should not be here because all the publications that are here have to be posted and the detail page and we are taking advantage of this On the one hand to be able to embed other components such as the step by step and see what the experience is and mention some little things and on the other hand to implement what is a shopping cart a kind of shopping cart I am going to give it here to filter like the one you are seeing on the screen to be able to excuse the redundancy based on some typology that we place for the publications to be able to acquire this product in this case we are not going to reach the payment platform because not we are interested in this course we are interested in handling or knowing inertia lightware but it is basically that well for the rest here we have all the steps obviously the layout the design of the detail page the navigation the filtering form etcetera here we also have what is at the iner level the shopping cart that was the one that I presented to you before we have already finished it as you can see here we have the option of here we have the previous items or here we have the possibility of adding the current one the one that we are seeing on the screen obviously it is like who says a sketch there would be a lot of work left to finish it but my intention is not to show a pretty page or anything like that but to know the characteristics of Livewire or inertia since we do we do this type of developments again well for the rest here we have the application of everything that we are starting that would be what you can see on the screen at the moment the creation part works all four here the list appears and little else we are going to start from today to work on the elimination and editing part but that is basically what we cover here the part of form errors also that appears here we also change the style of the field and little else really for Here, the same as the shopping cart, but in this case from the Livewire point of view. Here we also have the event management part.

Integración con Livewire - Blog

  1. Introducción

  2. Página de listado: Diseño

    1. Vamos a trabajar en el diseño de la página de listado.

  3. Layout

    1. Vamos a crear y configurar un layout para el módulo de blog.

  4. Página de detalle

    1. Vamos a crear la página de detalle.

  5. Botón de navegación

    1. Vamos a crear el botón de navegación.

  6. Colocar formulario paso por paso en detalle

    1. Vamos a colocar el formulario paso por paso en el detalle del post.

Integración con Inertia - Carrito compras

  1. Introducción

  2. Calcular total

    1. Vamos a calcular el total de elementos en el carrito.

  3. Crear botón flotante

    1. Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

  4. Palabras finales

Integración con Inertia - To Do

  1. Crear el esqueleto de la aplicación de to do: Controlador y componente Vue

    1. Vamos a crear la estructura base de la app to do.

  2. Crear el esqueleto de la aplicación de to do: Listado y Formulario

    1. Vamos a crear la estructura base de la app to do para el listado de to do.

  3. Crear migración y modelo

    1. Vamos a crear el modelo  y migración de los to do.

  4. Crear to do

    1. Vamos a crear un to do desde en el servidor.

  5. Crear to do: Errores y validaciones

    1. Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.

  6. Popular listado de todos

    1. Vamos a mostrar el listado de to do de la base de datos.

       

Integración con Livewire - Carrito de Compras

  1. Listado de productos: Esquema inicial

    1. Vamos a crear el esqueleto del módulo.

  2. Item de carrito

    1. Vamos a crear el componente y estructura inicial de un ítem del carrito.

  3. CRUD en sesión: Agregar un producto

    1. Vamos a implementar la opción de agregar un producto al carrito.

  4. CRUD en sesión: Eliminar un producto

    1. Vamos a implementar la opción de eliminar un producto al carrito.

  5. Formulario para agregar un producto

    1. Vamos a crear un formulario para poder agregar post de tipo publicidad

  6. Formulario para agregar un producto: Eventos

    1. Vamos a corregir la implementación en el uso de los eventos.

Blog

Let's move on to the posts as the first post here we have a video that is also from the new YouTube channel in which I talk about my experience after two months and I emphasize two months with the metaquest device which in summary is a quite curious device and also very different from what we may be used to if we compare it with a television, a video game console, a telephone since being so intrusive or so invasive it has sometimes been a little difficult to use and we also have some somewhat extra expectations in which Although it is very invasive, understand that you cannot do absolutely anything else while you use them, even when you are using it you have to be very aware of your environment so as not to kill yourself by falling down some stairs or crashing into something in the end the experience in my particular case is not entirely satisfactory for several reasons including those then.

Here I mention it I have commented before my experience of working from here from Venezuela here we also have well This is an update of the basic course some text changed there what I was telling you about the properties the Livewire in this case the locked properties and also what is the use of the properties in general some additional things that we have pending this I also published the video that I had missed to place it in the list that is the slippery surfaces how we implement it in a real and here what is the installation of the sec editor through Note here we also have what I was telling you about Instant of here you can see an example of this here for example we have the polymorphic relationship called File here we access the file as who says I don't know how to mention it in Spanish but if it were a label it would be like label So I don't know what the translation of fillable would be but again it could be a book it could be an image it could be another type of file then obviously many times you need based on this to do some operation but if it is a book you are going to do a different operation and if it is an image you are going to do another operation for example access a location disk-specific.

So it is essential that you perform this type of logic either at the conditional level or also at the query level using eloquent, which I talk about in this video. So if you work with this, I highly recommend that you watch this video to have some additional tips there and here finally the sorting part that I mentioned before about Livewire that I always compare with what is jQuery Data Table, which would be the image you are seeing here on the screen, so this would be everything we did or uploaded for this week. The week of October 14th to 21st and without further ado, we'll see you next week.

- Andrés Cruz

En español

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2025 Copyright | Contacto | Acerca de | Versión PC