CursosEmpresasBlogLiveConfPrecios

Código de guardar

Clase 14 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Contenido del curso

Introducción

  • 1
    Cómo aprenderás a crear SPAs en Laravel

    Cómo aprenderás a crear SPAs en Laravel

    02:29 min
  • 2
    Introducción a Jetstream

    Introducción a Jetstream

    03:38 min

Proyecto

  • 3
    Conoce qué SPA vas a construir

    Conoce qué SPA vas a construir

    03:59 min
  • 4
    Configuración inicial

    Configuración inicial

    09:58 min
  • 5
    Sistema basado en componentes

    Sistema basado en componentes

    04:29 min
  • 6
    Jetstream: configuración inicial

    Jetstream: configuración inicial

    09:03 min
  • 7
    Jetstream: personalización

    Jetstream: personalización

    07:42 min
  • 8
    Listado de notas: configuración inicial

    Listado de notas: configuración inicial

    07:38 min
  • 9
    Listado de notas: personalización

    Listado de notas: personalización

    06:12 min
  • 10
    Vista detalle de nota

    Vista detalle de nota

    07:11 min
  • 11
    Formulario de editar

    Formulario de editar

    08:46 min
  • 12
    Código de actualizar

    Código de actualizar

    06:55 min
  • 13
    Formulario de crear

    Formulario de crear

    06:40 min
  • 14
    Código de guardar

    Código de guardar

    Viendo ahora
  • 15
    Función de eliminar

    Función de eliminar

    05:12 min
  • 16
    Flash message

    Flash message

    07:51 min
  • 17
    Buscador

    Buscador

    09:42 min

Conclusión

  • 18
    Repaso final

    Repaso final

    03:31 min
  • 19
    Despedida

    Despedida

    03:21 min
  • 20
    Clase bonus: nunca parar de aprender

    Clase bonus: nunca parar de aprender

    01:33 min
Tomar examen

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads

      Comentarios

      Carlos Eduardo Gomez García

      Carlos Eduardo Gomez García

      teacher•
      hace 5 años
        Nestor David Velasquez Lopez

        Nestor David Velasquez Lopez

        student•
        hace 5 años
        Abel da Cunha

        Abel da Cunha

        student•
        hace 5 años
      María Sierra

      María Sierra

      student•
      hace 5 años
      Gonzalo Garcia-Ariño Merki

      Gonzalo Garcia-Ariño Merki

      student•
      hace 5 años
        Jimmy Buriticá Londoño

        Jimmy Buriticá Londoño

        student•
        hace 5 años
      VICTOR CAUDILLO

      VICTOR CAUDILLO

      student•
      hace 4 años
        Kenneth Angulo L

        Kenneth Angulo L

        student•
        hace 3 años
      Paul Auqui

      Paul Auqui

      student•
      hace 4 años
        Kenneth Angulo L

        Kenneth Angulo L

        student•
        hace 3 años
      Jorge Bou-saad

      Jorge Bou-saad

      student•
      hace 3 años
      Kenneth Angulo L

      Kenneth Angulo L

      student•
      hace 3 años
      Moisés de Jesús Cortés Castellanos

      Moisés de Jesús Cortés Castellanos

      student•
      hace 4 años

      Me gusta que en Laravel puedes crear datos y guardarlos en tan solo 3 líneas de código, y esto es genial y tampoco implica un problema de seguridad porque para eso son las validaciones, de hecho las validaciones no se deberían hacer ahí (en un proyecto real, por motivos del curso y practicar está bien), pero en un proyecto real, las validaciones de Laravel se hacen en un archivo aparte y si no mal recuerdo se pasaban como una inyección de dependencias 👀

      Así es, y adicional a ello como buena práctica es mejor cambiar el metodo all() por el método validated(). Así te aseguras de que estas utilizando únicamente los datos que ya fueron validados

      👍

      Código de guardar


      Ya que copiamos el código del archivo Edit.vue, tenemos que modificar el método submit para que realmente envié los datos a store y los cree en la base de datos.

      methods: { submit() { this.$inertia.post(this.route('notes.store'), this.form) } }

      Ahora tenemos que modificar el método store en el controlador de esa ruta. Aquí vamos a validar los datos, después obtenerlos y mandarlos todos a la base de datos, y por último redirigirnos a la ruta de edición de esa misma nota que hemos creado

      public function store(Request $request) { $request->validate([ 'excerpt' => 'required', 'content' => 'required' ]); $note = Note::create($request->all()); return redirect()->route('notes.edit', $note->id); }

      Para mi fue preferible una vez que se guarda el nuevo registro, es decir la nota nueva, en vez de remitir a editar que es un formulario idéntico, lo mando a show, que no deja editar, dando cuenta del exito a la hora de guardar el registro.

      Estas en lo cierto, se ve mejor.

      Si quisiera enviar los datos de errores a la vista ¿cómo podria hacerlo? Ahora mimos pienso que podria agregar en el props un array erros y solo imprimir pero me gustaría ver un ejemplo

      El Componente de vue ya esta intersectando (si se puede decir asi), los errores generados por el validador (StoreNoteRequest o UpdateNoteRequest o el generico si no configuraste), no tienes que enviarlos manualmente. . Y se muetsran con esta linea de codigo (importando el componente previamente.): .

      <BreezeInputError :message="form.errors.excerpt"/>

      Hola como obtengo los errores del modelo con vue 3

      HOla, El framework ya viene preparado para esto. Ya existe un componente de breeze que se encarga de ellos. .

      1. en el area de scripts de vue, importar esto:
      import BreezeInputError from '@/Components/InputError.vue';
      1. En cada componente de html al que le quieras mostrar el error, ejemplo despues de cerrar el textarea pones esto:
      <BreezeInputError :message="form.errors.excerpt"/

      Y listo !!

      Comparto mi commit con Laravel 9

      https://github.com/jlbousing/platzi-inertia/commit/464fa5d28e1080193631c8114767b82d135f724e

      create-note.png

      Hay una manera un poco más eficiente desde mi perspectiva para evitar las redirecciones, y ahorrarse una petición al servidor. Todo consiste simplemente en usar las funciones en vez de las redirecciones y aprovechar el poder de esta gran herramienta.

      public function store(Request $request) { $request->validate([ 'excerpt' => 'required', 'content' => 'required', ]); $note = Note::create($request->all()); return $this->show($note); }

      Lo mismo se puede hacer para la función de actualizar.

      public function update(Request $request, Note $note) { $request->validate([ 'excerpt' => 'required', 'content' => 'required', ]); $note->update($request->all()); return $this->index(); }

      Esto se puede mejorar un poco más separando las validaciones en sus archivos respectivos y el asunto seria aun más simple y estético.

      Si estoy bien, o mal o hay una mejor solución espero me la hagan saber.