Update week 10Fe-17Fe - Policies vs Spatie - Vue 3 + RestApi + C4 +Tailwind -Django Store

Youtube, Policies vs Spatie, CKEditor on, CORS C4 fetch axios listing, Django Online Blog Courses/Books Django Online Store and CodeIgniter + Rest Api + Vue + Oruga UI + Tailwind

Hello everyone and welcome to another week in which I will talk to you about the updates I made to my blog, YouTube and of course the courses and in the future the books from the week of February 10 to February 17.

YouTube

So starting as always with the updates that happened at the YouTube channel level, here we have the updates from last week obviously.

Here is a personal video that was the only one I uploaded for this week, which is the policies and spatie, let's remember that spatie is a system of roles and permissions. Here I talk to you about when to use one or the other, since both, however much they handle the permissions. Then I give you a video with a bit of an opinion on the policies. I see them as a bit more general use. For example, if a user buys a book, buys access, pays for a subscription, then you can verify it perfectly as a policy, while the roles and permissions part I see it as a bit more general. For example, you configure a user who has access to a certain module or not based on just a label, while this is or has a stronger integration with what would be the business logic of your application. Again, if a user bought a book, then you make the query and verify it. That's what this video is about.

Here we also have a video that is already part of what are the courses of, well, of my paid courses, this would be about the editor section, in this case, we are integrating it with Laravel. I'll talk to you a little about it, about this plugin and I use it here you can see it

These are part of the basic codiner course that I am updating a bit, I had not touched it for a while then I think it was now and all of these are based on an apir that we are consuming the apir that I created 3 years ago I am creating the application here with viw to consume it and here we go here you can see it with oruga ui so here I am publishing some things the first thing is how it is a separate application it is not the same as we have the Laravel one that we have the integration directly in the project yes this is a project. The first thing we do here is an easy way to configure them, then we will see the way, as they say, recommended at the end of the section. Here we do some tests with the fch to familiarize ourselves with all this, as with axios, there we also consume the list, no, sorry, this is to know the life cycle of a component, the create part and everything else, that is, we use this so that when the component is loaded using the create function we can load all the logic, and here we go with tn. Here you can see that I am jumping a little ugly, but in this part, as it is a little separate from this, I wanted to publish it. Tailwind ccs came out recently in its version 4, it changed the installation a little. I like it a lot more now, as the installation is much more friendly, fewer steps, fewer strange things, less abstract, and here we see how you can configure it with vi3, although the steps that we are going to see here are useful to install it in any project in node, the only difference is that in Vue we already had the vite file, so there we simply add it, and if you are installing it in a new project, it depends on whether it is or not and if it is not there you have to create it or it creates it for you using a command I'll see later

Here I talk to you a little bit about this, it should have been before but I left it there for later, a little bit presenting some ccs for what to use, why to use and little else, in a few words, use it because it is an excellent library that allows you to easily create your components, have your code organized, very easy to scale and obviously very easy to customize and unlike boostrap you are not forced to be loading a lot of ccs or styles that you are not going to use, if here you can or are you going to export production only the style, the classes that you are going to use, then it is a little bit what is talked about in this video on the channel.

We continue here publishing some videos and from here I also published in this I am doing it in Windows on the other machine I am starting here to update a little bit what is the dango course in this case to create an online store type application that I created in the original course So I am here migrating to the new framework in this case version 5 and also for the benefit of it and I put it in the book and I am going to publish I think the entire section on how to create an online store a simple one more or less the same type blot and then we add PayPal

Books and Courses

As for the courses and books, I already spol you a little bit here we have what is the creation of the RestAPI plus Vue a little bit the same we go there little by little I always start with the listing component and I started to publish this last week that is why we are a little more advanced here the part of deleting and reloading the listing delete dialog that is to say we are here in the crut part we define the buttons for the actions we go with telwin here we are loading the container and finally here the margins since the problem that oruga UI has is that it does not have these classes as it says general purpose which is basically telwin then we can integrate both in an almost perfect way there are its little things but ultimately it works quite well and for the dango course and book in this case with Django 5 which would be the last of the date we are starting there with the section in which we are here creating the master template we create the Data in Django Talwind but before we configure it here we create the test Data we use bura 5 again which is the one I use so as not to complicate things too much life with style with the cdn that I like, here we go with the list, the pagination, the container, the navigation links, that is, making the list and then the detail page, we are going to link both and finally here we are creating some filters for vga, the redundancy, filtering from the client and being able, for example, to search for a certain type of product or for search terms, for the rest, the coupon of the week and without further ado, we'll see you next week

CodeIgniter 4 + Rest Api + Vue

  1. ListComponent.vue: Eliminar, recargar listado

    1. Vamos a eliminar la posición del array correspondiente al registro a eliminar al momento de eliminar

  2. ListComponent.vue: Diálogo de eliminar

    1. Vamos a implementar un diálogo de confirmación al momento de eliminar un registro.

  3. Botones para editar y eliminar

    1. Vamos a definir los enlaces de navegación para las operaciones CRUD en el listado.

  4. Tailwind: Sobre

    1. Vamos a hablar sobre Tailwind.

  5. Tailwind: Instalar

    1. Vamos a instalar Tailwind 4 en un proyecto Vue 3

  6. Tailwind: Container

    1. Vamos a colocar un container para todo el contenido.

  7. Tailwind: Márgenes

    1. Vamos a colocar espaciados en los componentes necesarios.

Tienda en Línea - Django 5

  1. Plantilla maestra

    1. Vamos a crear la plantilla maestra.

  2. Django Admin

    1. Vamos a asignar los modelos y crear el superusuario.

  3. Data de prueba

    1. Vamos a crear data de prueba.

  4. Configurar Bootstrap 5

    1. Vamos a configurar B5 en el proyecto

  5. Listado

    1. Vamos a construir la página de listado con B5.

  6. Paginación

    1. Habilitamos la paginación en la aplicación.

  7. Container

    1. Vamos a crear el container.

  8. Detalle

    1. Creamos la vista de detalle.

  9. Enlace de navegación

    1. Creamos el botón de navegación.

  10. Listado: Filtro en el servidor

    1. Vamos a implementar las opciones del filtro en el servidor.

  11. Listado: Filtro en el cliente

    1. Vamos a implementar las opciones del filtro en el cliente, el campo de búsqueda y la categoría.

- 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.