Doble CRUD Laravel 10 Vue 3 con Inertia.js | Vite | Tailwind | ChartJs | DataTables
ฝัง
- เผยแพร่เมื่อ 20 ก.ย. 2024
- En este video crearemos un doble CRUD en Laravel 10 con relaciones entre tablas utilizando laravel y vue con inertia
También utilizaremos el sistema de autenticación que trae laravel.
#laravel #laravel10 #vue #inertia
composer create-project laravel/laravel laravuecompany --prefer-dist
composer require laravel/breeze --dev
php artisan breeze:install vue
Instalar dependencias:
npm i @fortawesome/fontawesome-free sweetalert2 @ocrv/vue-tailwind-pagination vue-chartjs chart.js datatables.net-vue3 datatables.net datatables.net-responsive-dt datatables.net-buttons jszip pdfmake
Crear Controladores, modelos, migraciones y factory:
php artisan make:model Department -mcrf
php artisan make:model Employee -mcrf
Ejecutar migraciones con Seeder:
php artisan migrate --seed
Página de Facebook:
/ programandocondancruise
Subir proyecto Laravel Vue Inertia a cPanel
• Subir proyecto Laravel... - วิทยาศาสตร์และเทคโนโลยี
Que potente que es Laravel con Vue, muchas gracias por este maravilloso video!!
La vdd si es una excelente combinación estas tecnologías 👍
Dios mejor que un curso pagado. Gracias enserio es lo que buscaba, que Dios te bendiga por tu gran aporte
Es bueno saber que mis pequeños aportes son de apoyo 👍
Really amazing tutorial. Superb sir so nice as you have explained and used it with great way of coding.
Hi! i appreciate your comment.
excelente material para quienes estamos aprendiendo!!
Un video fantástico!!! Muchas gracias y felicidades por el trabajo realizado!
Gracias por tu comentario, me da gusto que te haya servido 👍
ufff el titulo de este video suena tan bueno que imposible no mirarlo
Gracias! espero si les sirva de base en sus proyectos.
Wow es un tutorial muy completo laravel con vue ! gracias por compartir tus conocimientos, estoy realizando un proyecto personal tomando como plantilla este CRUD he visto muchas veces el video y aunque compartes el codigo fuente, para comparar esta bien, pero aprendo mejor paso a paso segun tus instrucciones en el tutorial. nuevamente gracias.
Qué tal Ingrid, me da gusto saber que si te está sirviendo, yo igual cuando recién comencé prefería hacerlo paso a pasa para entender bien 👍
@@programandocondancruise una pregunta, es posible validar los controles como textbox numericos, texto, ò calendario ? esto dentro del form modal
@@ingridmor Claro, los puedes validar con el required de html o en el controlador, en el input le indicas de que tipo lo quieres, 'date' para las fechas por ejemplo y le pones required
Amigo, tremendo tutorial que acabas de subir. He estado aprendiendo Vue 3 con Inertia por mi cuenta y no había encontrado un crud o documentación que usará modals con Vue 3 y los que si, parecían muy complejos y decían que se usar axios o vuetify. Muchas gracias. Un like y un subscriptor nuevo bien merecido.
Algo más, me gustaría saber cómo aprendiste estas tecnologías, he seguido la documentación oficial pero hay uno que otro hueco a la hora de implementarlo. Y por último ya a criterio personal siento que encajaría mejor usar los modales de confirmación que vienen en los componentes de breeze o jetstream en lugar de sweet alert. No sé si cambie mucho mostrar los de yes no para borrar y alguno para indicar un mensaje de éxito pero creo que combinaría un poco más con la estética del proyecto. Pero como te comento hermano, tutorial 10/10
Gracias… no me habían hecho esa pregunta, doy clases en nivel licenciatura, tal vez la necesidad de enseñarle a mis alumnos siempre tecnologías actuales. Comencé a hacer los videos para mis clases y después comencé a compartir y vi que si había gente aparte de mis alumnos que veía mis videos jeje.
Y quizás el tiempo que llevo en el desarrollo web hace que me dé una idea de cómo hacerle para emplear las nuevas tecnologías aunque claro comencé con php puro y js con jQuery, es cuestión de saber bien las bases para tener una idea de cómo llevarlo a cabo con librerías o frameworks. El practicar las cosas ayuda bastante pero el enseñarlas es mucho mejor.
Gracias por la idea, en algún próximo video usaré los modales de breeze como confirmación 😃👍
@@programandocondancruise En que escuela da clases profe, suena como de menos de 30 años jajaja. Que padre que enseñe tecnologías nuevas, yo por mi parte le he batallado en aprenderlas ya que al menos en la BUAP no se les da por estar a la vanguardia :c
Gracias por las recomendaciones, seguiré practicando.
Orales, estudias en Puebla ? Cuando gustes este face ocupo para apoyar en dudas: facebook.com/programandocondancruise?mibextid=LQQJ4d
Sii, y muchas gracias.
Excelente tutorial amigo. De ser posible a futuro seria genial nos colabores con tu conocimiento de como agregar roles y permisos a este crud. Gracias por compartir conocimiento y enseñarnos ! 100% genial ! =D
Gracias por tu comentario, la vdd si estaría bien podría complementar el crud con roles y permisos…👍😃
Rey como vamos , Excelente curso . Te felicito . La verdad no se si sabia de laravel pero me quedaron demasiados conceptos , hay cosas que uno debe de seguir mejorando , con respecto a los scritps , cierta logica en el manejo de los datatables, pero esto lo anima a uno a seguir mejorando . Pd : Me ayudo este curso para una prueba de una oferta laboral :). Mil gracias parcero. !!!!!!!!
Que bueno que te sirvió! 😃 y si, siempre hay que seguir mejorando, el aprendizaje es continuo 👍
gracias por tu video. mui bueno.
Qué bueno que te fue de ayuda 😃👍
Excelente video.. espero que puedas subir más funcionalidad de inertia con Laravel y vue.. gracias!
Gracias, si, próximamente iré añadiendo más funcionalidades, ¿como qué te gustaría ver?
@@programandocondancruise podría ser un crudo para subir imágenes con vue inertia y laravel
Subir varias fotos juntas
Increíble video y material me cuesta creer que este en TH-cam, si tienes un curso por favor házmelo saber para comprarlo y continuar aprendiendo, es muy bueno
Puedes hacer un aporte en $ con la opcion que esta al lado del boton Me Gusta.
Gracias, tengo otros videos que complementan a este, como por ejemplo añadirle un Dashboard, botones de acción para la parte de datatables y subirlo a hostinger, por el momento no tengo curso como tal, todos mis videos son gratuitos, me apoya mucho el que compartas mis videos, también puedo impartir asesoría para algún proyecto o conocimiento en específico.
Exacto también las aportaciones son bien recibidas jeje 😜
super!!!!!👏👏👏👏👏👏👏👏👏👏👏
Excelente tutorial
Muchas gracias 👍
vale totalmente la pena ver el video completo
Gracias, ojalá si les sea de ayuda
El problema es que primero haces todos los controladores, luego todas las vistas. No se logra entender algunas partes por esta razón, la explicación está aislada
no se como seas ahora, pero si supieras tantito de programacion orientada a objetos, le entenderias sin problemas cruck, salu3
😮 Excelente
Excelente amigo :)
Qué bueno que te sirvió este ejemplo 👍
Hola! Excelente tutorial ❤ te felicito…
Ahora podrías por favor explicar cómo correr este tipo de proyectos en AWS? 😅 si no es mucha molestia
Gracias, si es buena idea 👍
Nuevo suscriptor 😊
Buenos días. Me pareció muy bueno este video. Donde se puede descargar el repositorio del proyecto.
Qué tal, en la descripción del canal están los enlaces a repositorios de GitLab y GitHub, en estos está la mayoría de los ejercicios de los videos.
gracias por tu ayuda
¡Qué buen tutorial! Muchas gracias por compartir. Tengo una curiosidad ¿Qué tema usaste en VS Code? se ven muy agradables los colores en el código.
Gracias por tu comentario, el tema es propio, te lo comparto, en este short están los pasos para instalarlo:
th-cam.com/users/shortsn2CMGJhBWpA?feature=share
Genial.
muchas gracias
Thank you mister Dan..., very well explained
😃👍
El video es buenisimo, yo apenas estoy aprendiendo a usar Laravel y la verdad este video es una excelnte herramienta para reforzar el aprendizaje.
Sin embargo tengo una duda que me gustaría que pudieran aclararme y es que, en el controlador de empleados en la linea 9 ¿qué es ese -use DB-? porque al intentar seguir el tutorial a mi me aparece como que no esta definido al momento de utilizarlo en la función EmployeeByDepartment :(
Se utiliza para usar los métodos de select, update, insert y delete … Podrías intentar así:
use Illuminate\Support\Facades\DB;
al intentar hacer el create tengo el siguiente , problema :
The POST method is not supported for route departments/departments.create. Supported methods: GET, HEAD, PUT, PATCH, DELETE.
Excelente tutorial, me gustaria saber si puedes hacer la implementacion de charts js con inertia en laravel 11, muchas gracias y nuevo suscriptor.
Qué tal, claro… ya está en proceso nuevo video de Laravel y vue con Inertia … y si se incluye Chart.js tal vez el miércoles ya lo esté subiendo
@@programandocondancruise Excelente yo ya he logrado realizar una grafica gracias a tu ejemplo, pero la grafica type Line no me sale y logre realizarla pero me produce solo puntos en los datos o sea que la linea no me sale.
Excelente, te felicito! sería descomunal si te es posible hacer un admin panel (dashboard) y complementarlo con roles y permisos utilizando el paquete laravel-permission - Spatie. muchas gracias por compartir!
Gracias, integrar con un Dashboard y añadir roles y permisos está en planes, lo han pedido y está contemplado, te aviso cuando tenga el video
i have a request kindly make a video from scratch make these same things but using any template and also teach us how to break template in laravel with vue and inertia.. It will be thankful. Thank a lot i will wait for your response.
Of course! Soon I will upload a video of inertia with a template, it will be included in my next 5 videos. Also roles and permissions.
@@programandocondancruise thanks a lot dear. but please use vue also not only inertia.
видео огонь!!!
Sobre el componente de paginacion que utilizas, hay alguna manera de quitarle el textbox y el boton GO ? me gustaria que no lo tuviera, busque la manera pero no he encontrado :/
Podrías intentar modificando el componente, desde el código que tiene en la carpeta de node o podrías usar vuejs-paginate-next
Muchas gracias por la info! algunas veces meja borrar algun departamento y otras veces me marca un error. Pregunta: Das asesorias?
Qué tal, si un departamento ya tiene empleados no te va a dejar eliminarlo por restricción en base de datos, claro si doy asesorías
@@programandocondancruise Como te contacto para una asesoria?
facebook.com/profile.php?id=100093180794136&mibextid=D4KYlr
Muy bueno, me encanto. Tengo una pregunta... cada vez que cambio de página; si bien, no recarga la pagina, si me aparece una barra de progreso arriba; ósea, el cambio de página no es fluido ¿sabes a que se podría deber eso?
Me ha servido mucho, solo que tengo un problema tenga una tabla que se llama usuarios y un campo de ellos se llama condición es boleam y quiero activar y desactivar cuando quiera pero no eliminar como lo hago porque intento hacerlo por el metodo put me da error
comenta que hay un repositorio, pero no lo vi en la descripción, hay que estar suscrito o hacer algún pago para acceder?
Hola, no es necesario hacer pago, las ligas a los repositorios están en la descripción del canal. Te comparto la liga de este video: gitlab.com/DanCruise/laravuecompany
Agradecería mucho tu suscripción al canal 👍
ขอบคุณมากๆ😊😊😊
Dan una pregunta ❓ porque no usaste eloquent en las relaciones de las tablas employees y department.
Porque eran solo 2 tablas pero si, lo mejor es que la relación se haga en los modelos en el video actualizado a laravel 11 y vue con interina si se hacen las relaciones en los modelos
@@programandocondancruise que es eso de interina o quisiste decir Inertia.
Si, inertia
thank you instructor
Excelente video! solo tengo una duda, la paginación solo me muestra 3 páginas sin importar que haya más para mostrar, tienes idea de a que se debe?
Qué tal Abel, de casualidad le añadiste limit en el componente de paginación? Si me puedes mandar captura del código por Facebook te puedo apoyar
poque me vota, al momento de aumentar las pestañas , departments ,etcc .... se refresa y me vota y no muestras la pagina principal ..muestra vacio , y esta todo igualito q el video
Hola, muchas gracias por el video, un gran trabajo! Me gustaría hacerte una consulta, como solucionas el problema de eliminar un departamento cuando ya tiene empleados? Si está vacio lo elimina bien, pero con algún empleado registrado no me deja eliminarlo, un saludo y muchas gracias de nuevo.
Hola qué tal, en la función destroy debes de añadir una validación que revise si existe el ID del departamento en la tabla de empleados
Muchísimas gracias por su trabajo y por compartirlo 😊😊, mis respetos maestro, un saludo :)
No hay diferencia si te sigo con Jetstream, cierto ?
No creo, mientras uses Tailwind
Muy buenos dias Profe. Gracias por compartir. Se puede trabajar con Supabase? Gracias. Desde Quito Ecuador.
Qué tal, sinceramente no lo he trabajado con supabase, sé que hay librerías para poder integrarlo, por ejemplo: PHPSupabase . Saludos desde México a Quito Ecuador!
eso es eloquent ??? , estoy confundido
Hola muy buen tutorial
el codigo que pueda compartir para validar por si hay falla el que realizamos
Gracias, ya está el código en los repositorios 👍
Cual es el repositorio no lo veo?
Los repositorios están en la información del canal, de igual manera te dejo la liga directa a este proyecto: gitlab.com/DanCruise/laravuecompany
Saludos 🖖
Error "The department id field must be a number" block Create employee
Hola, por qué puede ser que en el seeding quiera insertar datos en la columna department en employees en lugar de la columna department_id, tengo que modificar algo más en el seeding?
Hola qué tal… Ha menos que no se hayan colocado correctamente las columnas en el Factory o en el modelo
@@programandocondancruise Hola Dan, si era eso, ya está corregido! Gracias
Genial ! 👍
@@programandocondancruise Magnífico video, muy claro y útil sobre todo porque usa Laravel 10 que es la versión que nos están pidiendo.
Hola buenos dias, tengo un error en el eliminar, hago click en eliminar carga pero no elimina, otra cosa es que en la consola del navegador no manda ningun tipo de error
Qué tal, entonces podría ser el error en la función del controlador, puedes revisar con el código del repositorio o si gustas mandarme captura por Facebook y te apoyo
Estimados, a alguien le pasó el siguiente error al quere eliminar un registro de Departments: SQLSTATE[23000]: Integrity constraint violation: 1451 Cannot delete or update a parent row: a foreign key constraint fails (`laravuecompany`.`employees`, CONSTRAINT `employees_department_id_foreign` FOREIGN KEY (`department_id`) REFERENCES `departments` (`id`) ON UPDATE CASCADE)
Que tal, ocurre cuando intentas eliminar un departamento que ya tiene empleados, en la función destroy debes de añadir una validación que revise esto antes de eliminar
Hola, una pregunta. Como podría agregar botones de editar y eliminar al datatable? He intentado agregarlos manualmente pero no me lo permite el render del datatable
th-cam.com/video/Fwc2VOWJQcA/w-d-xo.html
Puedes renderizar los botones de acción en un tu tabla de la siguiente manera:
const columns = [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name'},
{ data: 'created_at', name: 'created_at'},
{
data: null, orderable: false,
render: function (data) {
return ('Editar');
},
},
{
data: null, orderable: false,
render: function (data) {
return ('Delete');
},
}
]
después añades a tu archivo la siguiente importación import { ref, onMounted } from 'vue';
en mi caso agregue al botón una clase llamada department para poder acceder a toda la colección de botones.
// accedemos a toda la coleccion de los botones del datatable
const departmentRow = document.getElementsByClassName('department');
// dentro de esta funcion recorremos todos los botones y le damos un evento click a cada boton
onMounted(() => {
for (const element of departmentRow) {
let boton = element;
// accedemos a cada boton y agregamos evento click
boton.addEventListener("click", function(event) {
event.preventDefault();
let id = boton.getAttribute("dataId"); // obtenemos los atributos de cada boton
let name = boton.getAttribute("dataName");
if (name) {
deleteDeparment(id, name); // llamamos la funcion que ya teniamos creada
} else {
window.location.href = '/departments/' + id + '/edit';
}
});
}
})
Espero les sirva y me haya hecho entender
disculpe algun repositorio para descargar el código?
Claro que si: gitlab.com/DanCruise/laravuecompany
disculpa tenes mas videos o es el unico
En el canal puedes encontrar varios videos igual de inertia, laravel, VUE, React , por ejemplo al proyecto de este video se le añade un Dashboard:
th-cam.com/video/JdwIVXlPdF4/w-d-xo.html
Com emits y props, porfa
No inventes hermano, vas muy rapido, como si fuecemos expertos, un poco más lento. Lo de las tablas no se entiende nada
Qué tal, agradezco tu retroalimentación, trataré de ir más lento
Hello. Thank you for the video. I'm getting this error on componente Report.vue. Could you help me ?
Uncaught (in promise) TypeError: e.slice is not a function
at p (datatables.net-vue3.mjs:99:47)
at datatables.net-vue3.mjs:84:39
at runtime-core.esm-bundler.js:2675:88
at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2655:19)
at flushPostFlushCbs (runtime-core.esm-bundler.js:325:40)
at render2 (runtime-core.esm-bundler.js:6335:5)
at mount (runtime-core.esm-bundler.js:3824:13)
at app.mount (runtime-dom.esm-bundler.js:1431:19)