Curso en Master en CodeIgniter 3 con Bootstrap 4 y Vue.js: Tutoriales para crear tu web SPA y Tienda en linea con Stripe

13-01-2019 - Andrés Cruz

En este gran curso para CodeIgniter 3 que les traigo podrán aprender desde los fundamentos del framework con algo tan básico como llamar a una vista hasta elementos más complejos como completos CRUDs, Control de Acceso en base a roles para nuestros usuarios, autenticación o login en base a un completo sistema que podemos hacer en CodeIgniter.

En este interesante e intensivo curso, en donde veremos muchísimas cosas vamos a desarrollar una aplicación para la gestión de contenido con texto enriquecido y listado de contenido; en otras palabras una aplicación tipo Blog.

Podrás pensar "oye un blog que original" pero si, vamosa a desarrollar un fabuloso blog el cual vamos a hacer crecer; un blog es la mejor forma de aprender los elementos más interesantes que nos trae CodeIgniter.

Un Blog nos permitirá aprender desde los fundamentos de CodeIgniter, desde su estructura sus elementos fundamentales y otros elementos sumamente requeridos en una aplicación como el login, el manero casi automatizado de los CRUDs, el famoso plugin WYSIWYG,una completa gestión y control de usuarios, carga de contenido vía Ajax, buscador de entradas, detalle de las entradas, comentarios de múltiples niveles, envío de emails y mucho más.

También veremos otros elementos como abrir un proyecto en varios IDEs o Ambientes de Desarrollo de Software que es un acto sumamente sencillo, para que si eres inicial trabajes con el IDE que más te guste y se te haga más cómodo; o bloc de notas si así lo quieres.

Aprender desde los más básico hasta hacer sus aplicaciones de manera sencilla, profesional y eficiente como solo te permite CodeIgniter; vamos a trabajar desde sus vistas, modelos y controladores, hasta sus librerías, helpers y paquetes, vamos a instalar nuestro dashboard con Bootstrap y mucho más en nuestro Curso en CodeIgniter.

Cómo instalar Codeigniter en XAMPP

Vamos a ver los sencillos y cortos pasos para instalar CodeIgniter en tu servidor web, con que tengas PHP en su versión 5.6 o superior y MySQL ya estas listo, con copiar el proyecto y poco más estás listo para empezar a trabajar con CodeIgniter y empezar con nuestro Curso para ser un Master en este framework tan versátil y amigable con el usuario.

Instalar y configurar CodeIgniter

Aprenderás a configurar correctamente Codeigniter en el servidor que es algo bastante rápido y esta es una de las principales virtudes de CodeIgniter y de sus puntos fuertes, lo rápido, directo y sencillo para hacer múltiples desarrollos.

En este curso para CodeIgniter también veremos como configurar remover el index.php de nuestra URL y configurar la URL base de nuestra aplicación

CRUD en CodeIgniter

Vamos a realizar los CRUDs, desde lo más doloroso, paso a paso cómo narramos en esta entrada:

Creando los formularios, los CRUDs en nuestra base de datos, las vistas de creación y actualización, las validaciones, los listados y por supuesto el eliminar, hasta la automatización completa de nuestros CRUDs para hacerlos en poco minutos, hacer CRUDs completos con tablas paginadas por AJAX, campos de búsqueda, ordenación, validaciones, mensajes de errores y confirmaciones lo podrás hacer en pocos minutos.

Estos CRUDs podrás personalizarlos con temas con Bootstrap 3 y 4; podemos extender estos CRUDs con funciones callbacks antes y después de realizar las operaciones del CRUD para potenciar nuestros desarrollos como Dios manda.

Sistema Login en CodeIgniter, control de usuarios y ACL

Vamos a crear un completo sistema de login que constará de autenticación, registro, recuperación de credenciales, bloqueo de cuentas, roles, permisos y carga inicial de datos; vamos a crear vistas para personalizar el perfil del usuario.

Aunque CodeIgniter no cuenta con su propia librería para el control de los usuarios, existe una estupenda y completa librería para el login y todo lo señalado anteriormente que podemos emplear en nuestros proyectos:

Vamos a crear un sistema para el control de usuario completo con la librería que trabajaremos en nuestro Curso Master en CodeIgniter; limitar los accesos fallidos, login único, bloquear por IPs, hash en nuestras contraseñas, recuperación de credenciales, listas de control de acceso, roles a usuarios, protección de controladores y vistas y por supuesto, la autenticación con esta fabulosa librería que verás como instalar y configurar paso a paso en nuestro Master en CodeIgniter, el curso más completo que jamas he creado en alguno de todos los temas que he tratado en DesarrolloLibre en sus años de existencia.

Curso completo de CodeIgniter 3 con Bootstrap 4 y Vue en Udemy

Cómo ves es un curso de lo más completo que no puedes perderte; tratamos desde los fundamentos del framework hasta ir a componentes mucho más interesantes como una completa gestión de los POSTs, podemos agregar contenido con texto enriquecido, incluido imágenes mediante en mismo.

Aprenderemos paso a paso cómo desarrollar las distintas funcionalidades de nuestra aplicación que van mucho más allá de lo señalado hasta los momentos:

• Un completo gestor de contenido para los Posts, que incluye carga y selección de imágenes para enriquecer el contenido.
• Procesamiento de las categorías de nuestros Post.
• Carga, validación y redimensionamiento de imágenes.
• Sistema de control de usuario: Listas de Control de Acceso y login.
• Carga de contenido vía Ajax.
• Creación de un buscador por palabras claves y filtrado por categorías.
• Diseños responsivos con Bootstrap 4.
• Uso de los templates en CodeIgniter.
• Envio de emails.
• CRUDs a mano y casi autogenerados.
• Crear tus breadcrumb o migas de pan entre tus componentes.

En términos de conocimientos aprenderás:

• Instalar y configurar CodeIgniter.
• Creación de un sistema modular organizado.
• Trabajar con base de datos, crear tu base de datos, consultas SQLs, Joins, deletes, inserts, updates y mucho más.
• Manejar el MVC de Codeigniter junto con la herencia.
• Creación manejo de los helpers.
• Creación, validación y muestreo de errores de formularios en CodeIgniter.
• Uso de librerías.
• Autenticación y control de usuario.
• Instalar plantillas como el dashboard administrativos.
• Crear tus propias vistas de manera eficiente empleando frameworks CSS y JavaScript como Bootstrap, jQuery y a posterior Vue o créalas tu mismo a mano.
• Extender CodeIgniter con helpers, librerías y paquetes externos a la aplicación
• Creación de rutas
• Procesamiento (redimensionamiento y validación) y carga de imágenes
• Aprenderás un poco de SEO básico para aplicar en tus posts

Cómo puedes deducir, es una aplicación clave y central la que vamos a desarrollar que nos permitirá explicar de todo con CodeIgniter; seleccioné un Blog, ya que un Blog soporta todo, la podemos extender como queramos y contiene los elementos claves que cuentan otras aplicaciones y que tu quieres saber como crear logins, CRUDs, envío de emails, pasarela/plataformas de pago, ajax, paginación todo esto lo podemos agregar en nuestra aplicación y extenderla como queramos (creo que los blogs son los sistemas más versátiles y variados que hay en Internet y por lo tanto elegí hacer un blog), y como vamos a seguir haciendo en nuestro curso en línea.

Librerías y demás elementos de terceros en CodeIgniter

También estamos sacando secciones para atacar los "puntos débiles" de CodeIgniter, que vienen siendo la integración con otras librerías de terceros, de los cuales no existen muchos en CodeIgniter, a mejos a lo que se refieren a librerías o paquetes desarrollados por terceros en CodeIgniter; cómo sabrás si realizas una búsqueda rápida en Internet, la mayorías de las librerías desarrolladas para CodeIgniter NO tienen soporte pero no te desanimes, que desde la versión 3 de CodeIgniter tenemos composer lo que en resumidas cuentas es un manejador de dependencias en PHP que nos permite instalar paquetes de PHP fácilmente y con esto se nos suma una nueva forma de incorporar paquetes en CodeIgniter lo cual lo estamos empleando en el curso.

De esta forma podemos incorporar cualquier librería de PHP en CodeIgniter sin morir en el intento de dos formas, manual y por composer las cuales las cubrimos en el curso con ejemplos y mucho más; vemos temas de como instalar la librería de Dropbox en su versión V1 y la librería para la Api Rest de manera manual también instalamos y estudiamos la librería de Dropbox en su versión 2 que es la actual por composer, la librería de Stripe y la estamos estudiando en nuestro proyecto actual para desarrollar una sencilla pero efectiva tienda en línea y mucho más.

Para esta segunda etapa de nuestra combinación de CodeIgniter con Vue, vamos a crear una aplicación mucho más organizada que la que vimos anteriormente; vamos a minimizar el desarrollo por parte del controlador y vamos a crear una capa para obtener y recibir datos, en otras palabras, vamos a crear una Rest Api para todo lo que necesita nuestra tienda en línea que en términos generales sería:

• Listado de productos.
• Detalle de productos
• Carrito de compras con las Cookies
• Vista de checkout para cambiar elementos del carrito de compra (actualizar carrito)
• Vista previa al pago y envío de información básica del pedido mediante un formulario
• Procesador del pago junto con la información validada del pedido, como lo es dirección teléfono etc.
• Pasarela de pago con Stripe

Cómo ves ya tenemos el ciclo completo de la tienda en línea, aún faltan terminar varios detalles de la tienda pero ya tenemos el ciclo principal.

De momento todos las integraciones o todos los desarrollo que estamos haciendo lo estamos haciendo con Vue CDN, lo que significa que es el desarrollo clásico de aplicaciones incluyendo lo que sería el tag para script en las cabeceras para cada componente o plugin de JavaScript y en resumen nada de Node.js, pero a futuro, vamos a migrar a un proyecto en Vue Cli para que tengas el completo ecosistema de Vue a tu disposición.

Ventajas de trabajar con CodeIgniter

CodeIgniter nos ofrece una completa cantidad de librerías para hacer de todo, y las que no existen seguro que ya hay algo en Internet que podemos emplear, así de simple, y lo mejor de todo es que al ser un framework MVC todo queda modular listo para la reutilización.

CodeIgniter nos ofrece una plataforma de trabajo muy estable, en comparación con otros framework como Laravel; que, aunque son más grandes y versátiles pero cuentan con un mayor grado de complejidad para el desarrollo de estas aplicaciones, tanto técnicamente (nos solicita las últimas versiones de todo para poder trabajar, llegando hasta los extremos de que existen máquinas virtuales con su propio LAMP instalado para garantizar que un simple proyecto creado en PHP corra) hasta ser mucho más complejo en el desarrollo o codificación.

Ventajas de tomar el curso

Nada de esto tendrás que preocuparte al trabajar con CodeIgniter, empieza desde lo más básico, aprende de manera organizada, resolviendo problemas que te ocurrirán, este curso no es una narración de cómo programamos los distintos componentes, desarrollamos en el sitio, verás los errores que ocurren al momento del desarrollo de la aplicación tipo blog para la gestión de contenido y cómo actuar en consecuencia, como realizar sencillos pero efectivos debugging en la aplicación.

He creado multitud de proyectos en toda mi carrera tan diversos como:

• Aplicaciones hoteleras para la gestión de cuartos, alquileres y toda la data de la aplicación.
• Aplicación de gestión de contenido para restaurantes, de tal forma que otras apps puedan conectarse a la misma para obtener los menús, comidas y bebidas
• Aplicaciones para la gestión de Almacenes, guardar datos mediante cuadrículas en Excel
• Gestores de contenido, incluido este blog en donde estas leyendo esto...

¡Todo esto lo he creado con CodeIgniter!; sin ninguna limitación por parte de este estupendo framework

Por lo tanto soy la persona ideal para enseñarte todo lo que se de CodeIgniter, de una manera fácil, directa, con programación en el sitio y creme que la mejor forma de aprender CodeIgniter es mediante esta aplicación tipo Blog, que luego la puedes fragmentar y emplearlas en tus aplicaciones:

• Necesitas mantener el control de distintos usuarios, módulos, permisos de acceso.
• Necesitas enviar contenido mediante emails.
• Necesitas un área para crear contenido con texto enriquecido que incluye la carga de imágenes.
• Necesitas hacer módulos CRUDs básicos y semi avanzados de manera rápida en pocos minutos,
• Necesitas construir listados con Ajax.
• Necesitas cargar imágenes al servidor de manera segura y redimensionar las imágenes.

Todo esto y mucho más lo aprenderás y podrás implementarlo fácilmente con un copia y pega de lo que vemos en este Master en CodeIgniter, mi mejor curso y tutorial que he creado hasta la fecha solo para tí.

Más temas de interés que vamos a llevar en el curso: temas actuales

En este curso vamos a ver muchas cosas que podemos hacer empleando CodeIgniter, empleando CodeIgniter como eje central de nuestras aplicaciones, un tema muy interesante hoy en día es la creación de webs de tipo SPA, lo cual lo aplicamos con Vue, que es nuestro caso de estudio, en caso de que no conozcas Vue, tambien te tengo un curso gratuito para que inicies en Vue en la misma plataforma de Udemy aunque vemos todo lo necesario en el curso del Master, pero simplemente te doy más opciones si eres como yo que le gusta ir poco a poco, y puedes darle un rápido vistazo a Vue en el siguiente enlace.

y un curso gratis para CodeIgnier en caso de que quieras ir poco a poco .

Vue básico para CodeIgniter

Vamos a dar una iniciación a Vue, este estupendo framework para JavaScript que tanto está dando de qué hablar, para desarrollar secciones con Vue que nos permita tener una web de tipo SPA, lo que significa que solo se recarguen ciertas secciones claves de la web, manteniendo lo que NO se debe actualizar sin actualizar, y lo que se debe actualizar se va a actualizar vía AJAX de manera automática.

Para nuestra web SPA tenemos un par de proyectos en el curso (actualmente estamos trabajando en el segundo que es la tienda en línea con Stripe) el primero de ellos viene siendo una especie de híbrido entre una web normal y una SPA en el cual tomamos como caso de estudio a desarrollar nuestro blog de cara al usuario final y la convertimos en una web SPA, este es nuestro primer acercamiento a Vue con la SPA y todo esto que te indico aquí así que hacemos una especie de híbrido con lo que desarrollamos inicialmente para que no nos sea el golpe tan fuerte.

Actualmente en desarrollo en el curso del Master en CodeIgniter: TIenda en Línea con Vue

En esta sección quiero hablarte un poco de lo que estamos llevando o lo que estamos desarrollando, y es que estamos desarrollando nuestra tienda en línea que disponga de todo lo necesario para hacer compras de productos, aquí si entramos de lleno con la SPA y Vue, lo hacemos de la forma más organizada empleando una Rest Api, y también vamos a emplear Stripe que lo introducimos en el curso; creamos componentes para todo lo que necesitamos, listado de los productos, carrito, vista de detalle, y mucho más, aprendemos a interconectarlos y por supuesto cómo podemos integrar nuestra aplicación perfectamente con CodeIgniter, para que trabajen bajo un mismo proyecto, misma estructura de URL y mucho más; esto es un tema que prácticamente no existe nada de documentación en Internet y te lo traigo aquí de la mejor forma que tengo para explicartelo y al mejor precio.

Esta sección actualmente cuenta con más de 8 horas en donde hemos visto en muy resumidas cuentas:

• Cómo integrar nuestra aplicación en CodeIgniter con Stripe, mediante modales de Bootstrap.
• Cómo emplear las cookies para guardar nuestros productos.
• Listado y paginación de productos mediante componentes en Vue y una Rest Api en CodeIgniter.
• Vista de detalle del producto.
• Funciones de agregar a carrito de compra y vista de detalle.
• Vista previa al checkout para la edición del carrito de compra, variar cantidades y eliminar productos.
• Vista de checkout para realizar el pago con el modal de Stripe.
• Vista de orden de pago.

En desarrollo:

• Tabla de pedidos realizados y detalle del pedido.
• Sincronización del carrito de compra con base de datos con usuario autenticado.

Por supuesto, puedes consultar el acceso al curso para que veas el detalle de todo lo que hacemos.

Próximas actualizaciones para el curso de CodeIgniter

Este es un curso que voy a sacarle mucha rosca y que pienso mantener, actualizar y agregar nuevas secciones que aunque no vayan a estar relacionadas directamente con nuestro proyecto base, un gestor de contenido tipo Blog, lo vamos a hacer porqué son elementos realmente interesantes que podemos llevar a cabo; entre las que voy a agregar en los próximas semanas/meses son:

Login social en CodeIgniter

Vamos a colocarle login social, para Google, Twitter, Facebook, esto es una característica que la podemos aprovechar en el Blog para cuando nuestro usuario ingresa de visita y no tenga que registrarse desde cero, si no en poco segundos.

Conección social con Twitter

Quieres automatizar la publicación de tweets con CodeIgniter; es perfectamente posible enviar tweets programados y construir los mismos con las entradas en tu blog, esto también lo veremos a posterior.

Temática del curso en CodeIgniter

01 Módulo básico: Conociendo e instalando CodeIgniter

En este primer módulo quiero darte una grata bienvenida, este es tu primer paso para aprender a crear una aplicación de manera profesional con CodeIgniter; No hace falta que tengas conocimientos en este framework para empezar a trabajar.

En este módulo vamos a ante todo a descargar e instalar CodeIgniter Vamos a conocer y comenzar con conceptos y elementos básicos que te servirán para crear cosas cada vez más completas e interesantes.

Vamos a hablar sobre los controladores, modelos, vistas e inclusive en esta primer parte vamos a instalar nuestro dashboard o plantilla que vamos a emplear en nuestro módulo administrador.

Con este módulo vamos a empezar nuestro recorrido para la creación de nuestra aplicación de tipo Blog

• Bienvenida al módulo
• Descarga, instalación y configuración de CodeIgniter - Importación del proyecto en el IDE
• Vamos a ver el paso a paso para empezar a trabajar con CodeIgniter, desde la descarga, pasando por la instalación y configuración básica del proyecto, hasta incorporar el proyecto en nuestro ambiente de desarrollo de software
• Probando nuestro controlador por defecto y creando un controlador - Remover el index.php de la aplicación
• Vamos a crear nuestro primer controlador y vista asociada y además vamos a remover el index.php que se encuentra por defecto en nuestra aplicación.
• Creando la base de datos de nuestra aplicación
• Vamos a crear la base de datos de la aplicación, para guardar nuestros posts y categorías
• Creando nuestros modelos y CRUD en los mismos
• Vamos a crear nuestros primeros modelos y aprender ha realizar nuestras primeras conexiones para hacer inserciones, actualizar, borrar y listar registros
• Instalando Bootstrap, jQuery y definiendo variables globales
• Vamos a empezar a agregar recursos webs como Bootstrap y jQuery en nuestra vista que usaremos como base en nuestra aplicación.
• Descargar e instalar AdminLTE en nuestro proyecto
• Vamos a instalar nuestro dashboard que emplearemos en nuestro controlador Admin, el cual vamos a trabajar en los próximos vídeos.
• Trabajando con las vistas en CodeIgniter
• Vamos a profundizar un poco más en el uso de las vistas, vamos a crear nuestra primer template o plantilla en nuestra aplicación.

CRUDs para los posts y las categorías

Ya en este punto podrás trabajar con CodeIgniter en cosas básicas, ya sabes como crear un controlador, crear vistas en los controladores, asociar recursos de JavaScript y CSS inclusive sabes ya instalar un dashboard, que fue nuestra plantilla para el administrador, además de esto ya empezaste a crear tus primeros queries con la query Class de CodeIgniter.

En esta sección vamos a profundizar lo que vimos anteriormente y vamos a poner todo a trabajar como dios manda, vamos a aprender a trabajar con los formularios, precargar datos, validarlos y guardar los datos de los formularios en la base de datos

Vamos a aprender a cargar archivos en nuestro servidor.

Vamos a aprender a colocar reglas sobre los archivos que vamos a cargar.

Vamos a aprender a redimensionar las imágenes.

En resumen vamos a aprender a crear CRUDs, que son elementales en cualquier aplicación de carácter administrativo.

• Bienvenida al módulo
• Crear el formulario para guardar los post: Vamos a crear nuestro primer formulario con ayuda de los helpers en CodeIgniter, que es fundamental para crear nuestro CRUD.
• Creando nuestro primer helper para el enum posted: Vamos a crear nuestro primer helper, que es una función que nos permite mantener funcionalidades de manera global en nuestro proyecto, este helper nos servirá para indicar si el post estará publicado o no.
• Definiendo nuestro template para el admin: Vamos a eliminar del template lo que no necesitamos para poder trabajar con lo que vamos a emplear, vamos a organizar mejor lo que llevamos en nuestro proyecto.
• Terminando el formulario para guardar los post: Vamos a terminar el primer formulario que hemos creado para guardar los posts en base de datos.
• Manejando los errores en el formulario: Vamos a aprender a cómo emplear la librería para manejar los errores que nos trae CodeIgniter de manera global y local.
• Cargar y redimensionar la imagen principal del post: Vamos a aprender paso a paso cómo cargar una imagen con un formulario en nuestro servidor, vamos a validar el tipo de archivo según la extensión y vamos a aprender a redimensionar imágenes.
• Crear el listado de los Posts
• Eliminar Post desde el listado: Crearemos un modal para que al seleccionar uno de los post, pregunte si lo desea eliminar y a posterior lo elimine.
• Guardar la url limpia de nuestro post: Vamos a crear otro helper para limpiar la URL y crear una URL SEO amigable de nuestros posts.
• Actualizar post: A partir de la acción que permite crear nuestros post, vamos a actualizarla para que también pueda actualizar nuestros post.
• Abrir las imágenes principales de nuestro post en una nueva ventana: Crearemos una simple función en JavaScript para abrir una imagen seleccionada en una ventana nueva.
• Instalando nuestro plugin para el contenido enriquecido de nuestros posts: Vamos a comenzar a generar el contenido con texto enriquecido para nuestro contenido, para eso vamos a instalar este plugin WYSIWYG.
• Cargar imágenes en el servidor desde el CKEditor: Vamos a aprender a realizar la carga de imágenes en nuestro servidor mediante este plugin que instalamos en un vídeo anterior, para ello emplearemos la misma función de upload para la imagen principal de nuestro post.
• Selección de las imágenes en el Servidor para el CKEditor: Vamos a aprender a listar las imágenes que estén cargadas en nuestro servidor y a integrarlas con el plugin para el contenido enriquecido.
• Crear el CRUD para las Categorías: Vas a crear el CRUD para las categorías, basándose en todo lo que has aprendido y apoyándote en la estructura que hemos amado juntos.
• Configurar las categorías para los post: Vamos a configurar las configurar las categorías que definimos anteriormente como un campo de selección en nuestros posts.

Paquetes y librerías

En este módulo en la cual vamos a finalizar nuestra aplicación de tipo Blog, o para gestionar contenidos.

Este módulo que vas a ver a continuación vamos a trabajar principalmente con una librería llamada Grocery CRUD que nos permitirá crear CRUDs rápidamente y también vamos a trabajar con un paquete para manejar el login, el control de acceso y seguridad en nuestros controladores y acciones.

Vamos a seguir trabajando en el módulo administrador para integrar y potenciar lo que ya hemos creado con estas herramientas que les comenté anteriormente; elementos como el uso de los formularios, validaciones sesiones los vamos a seguir profundizando.

• Bienvenida al módulo
• ¿Qué son los helpers, librerías y paquetes en CodeIgniter?: Aprenderemos qué son estos componentes que señalamos anteriormente.
• Community Auth para el login y el Control de Acceso (ACL): Vamos a hablar sobre este paquete para tener control total sobre nuestros usuarios, niveles de acceso en nuestro módulos, logins, recuperación de credenciales, bloqueo de usuarios y más.
• Descargar e instalar Community Auth en nuestra aplicación: Vamos a aprender a instalar el paquete del que hablamos anteriormente en CodeIgniter.
• Crear la estructura base para el login: Vamos a aprender a usar el paquete que instalamos anteriormente, crearemos una vista template para nuestro login.
• Configurar el módulo de login con Community Auth: En esta segunda tanta vamos a seguir configurando este paquete para el control de nuestros usuarios en la aplicación, vamos a ver cómo definir nuestro login y acciones.
• Construir datos de sesión y proteger controlador Admin: Ya instalada el paquete Comunnity Auth, vamos a proteger nuestros módulos con el control de acceso y definir los datos de usuario en sesión.
• Creando el cierre de sesión: Vamos a replicar el cierre de sesión que nos ofrece el paquete para el control de usuario.
• Manejar datos de usuario por sesión: Una vez que tenemos los datos de usuario en sesión, vamos a mostrarlos en secciones claves o típicas en la aplicación.
• Grocery Crud para crear nuestros CRUDs en 1 minuto: Vamos a instalar una librería para la creación de los CRUDs en poco tiempo y casi automatizado; ideal para crear CRUDs simples en pocos minutos.
• Primeros pasos con Grocery CRUD: Vamos a emplear esta librería en nuestros CRUDs que definimos en la sección anterior.
• Optimizaciones en Grocery CRUD - Remover JQuery, instalar la carga de recursos en la cabecera y callbacks: Aquí vamos a aprender a usar nuestra librería para crear nuestros CRUDs a un nivel intermedio, configuraciones básicas que nos permitirán entender cómo funciona.
• Validaciones en los formularios de Grocery CRUD: Vamos a aprender a realizar las mismas validaciones que podemos hacer con los formularios en CodeIgniter, pero con Grocery CRUD
• Grocery CRUD en los listados de los Posts: Vamos a emplear las tablas de Grocery CRUD solamente para las tablas del POSTs.
• Grocery Crud para los usuarios administradores
• Definir el avatar para nuestro usuario con Grocery CRUD: Vamos a realizar una carga de archivos empleando Grocery CRUD
• Corrección de errores: Redirecciones, y otros elementos de formularios
• Pantalla de perfil del administrador: Vamos a definir una pantalla para que el usuario cambie sus credenciales.
• Helper para el avatar del usuario: Vamos a crear nuestro helper para siempre tener una imagen que mostrar independientemente de si el usuario personaliza su avatar o no tiene ninguno configurado.
• Breadcrumb o migas de pan en nuestro módulo admin: Vamos a colocar estos sencillos y útiles enlaces para mejorar la navegación de nuestro módulo administrador.

Creando nuestro Blog y terminando nuestra aplicación

Aquí finalmente nuestro trabajo tendrá sentido, vamos a hacer que el contenido se muestre a tus usuarios, todo el contenido de tus POST vamos a mostrarlos, en distintos tipos de listados, tendremos una vista de detalle, una sección de búsqueda y un filtro por categoría; en esencia crear un módulo aparte al que hemos venido trabajando hasta los momentos, nuestro Blog, para presentar nuestro contenido al mundo.

Vamos es a trabajar principalmente con la presentación de los datos. También vamos a adaptar otros desarrollos que ya hemos realizado para que todo funcione como queremos.

Sección de registro, imagen de perfil o avatar, comentarios en nuestro posts, favoritos y más lo trataremos en esta sección.

• Bienvenida
• Crear el controlador Blog y vistas asociadas: Vamos a crear nuestro controlador para mostrar el contenido de nuestros POSTs a nuestros usuarios, el cual nos permitirá crear listados de posts y las vista de detalle, búsqueda y más.
• Listado y paginación de los POST: Vamos a crear la acción para que permita el listado con paginación de nuestros posts y la vista asociada al listado.
• Detalle de los post y rooteo: Vamos a crear nuestra vista de detalle de nuestro post, además de esto vamos a crear un rooteo para que la web emplee la URL que nosotros queramos.
• Registro de usuarios: Vamos a crear la sección de registro de los usuarios con un formulario creado en HTML y no con el helper de CodeIgniter.
• Validaciones en el registro: Vamos a agregar validaciones al formulario anterior.
• Opciones de un usuario autenticado en el header y colocar sesión en el Blog: Vamos a colocar unos pequeños íconos en nuestro header que variarán según el usuario se encuentre autenticado o no.
• Perfil para el usuario y carga de avatar: Vamos emplear la misma vista de perfil y la acción que empleamos en nuestro módulo administrador para nuestro Blog, para que veas lo sencillo que es la reutilización de este tipo de recursos en donde queramos.
• Listado de Post en base a las Categorías: Vamos a crear otro listado pero esta vez asociado a las categorías empleando lo que hemos hecho hasta los momentos.
• Instalando y configurando el plugin para los mensajes: Vamos a instalar y configurar un plugin para mostrar los mensajes de tipo flash de nuestra aplicación y los errores de sesión en el login.
• Programando la búsqueda y filtro por categorías: Vamos a crear un buscador por palabras claves y un filtro en nuestra categoría.
• Sección de favoritos
• Sección de comentarios para los posts: Vamos a instalar y configurar nuestro plugin para los comentarios que podrá realizar los usuarios en nuestros posts.
• Enviar Emails con CodeIgniter
• Vamos a aprender a crear un banner social para colocar nuestros iconos sociales y también vamos a crear nuestro módulo de comentarios.

Creando nuestra web SPA con CodeIgniter y Vue.js

En esta sección estamos trabajando con Vue.js, vamos a crear una web SPA para nuestro blog, una web SPA es aquella página que solo carga una vez, y el resto del contenido del página, se refresca bajo demanda, pero lo que es el CSS, JavaScript así como el HTML de la web (salvo secciones claves, como lo es el bloque central del sitio) aquí vamos a agarrar todo lo que es nuestro blog, entiéndase los listados de los post en sus distintas presentaciones:

• Últimos Posts
• Posts por categoría

Recuerda que también tenemos material para iniciar en Vue en nuestra entrada en nuestro blog.

También puedes iniciarte con Vue en nuestro mini curso gratuito para Vue en donde damos una introducción para conocer sus componentes:Primeros pasos con el framework JavaScript Vue.js.

Así que ya lo sabes, si no sabes trabajar con Vue, no te preocupes, puedes inscribete en mi mini curso gratuito en el cual comenzamos a dar los primeros pasos con Vue, este curso al igual que nuestro master en CodeIgniter va a estar en constante actualización.

También el detalle de los Posts con sus elementos como comentarios y banner social, todo esto lo vamos a convertir en componentes en Vue para crear nuestra web SPA, vamos a crear nuestra capa para obtener todos los datos que necesiten los componentes anteriores, vamos a aprender qué son las promesas y cómo emplear los fetch para realizar las peticiones Ajax.

Así que ya lo sabes, si no sabes trabajar con Vue, no te preocupes, puedes inscribete en mi mini curso gratuito en el cual comenzamos a dar los primeros pasos con Vue, este curso al igual que nuestro master en CodeIgniter va a estar en constante actualización.

De momento tenemos las siguientes actualizaciones con las cuales seras capaz de iniciar desde cero con Vue y crear tu web SPA en el proceso:

• ¿Qué es Vue? y ¿Cómo empezar a trabajar con Vue?
• Los eventos en Vue
• Crear nuestro primer proyecto en Vue
• Los componentes en Vue
• Nuestro primer componente en Vue
• Configurando CodeIgniter para trabajar con Vue.js
• Vue router para crear nuestra web SPA
• Crear un componente de la vista de detalle de los POST
• Componentes agrupados
• Crear más componentes, para los links sociales, el botón de las categorías y el listados de los POST.

Curso de Master en CodeIgniter aqui!!.

Puedes tener nuestra iniciación gratuita que estamos dando desde YouTube:

Además de los vídeos que puedes consultar anteriormente; tienes una completa iniciación gratuita en nuestro Blog:

Como puedes ver, tenemos de todo, un curso de iniciación en CodeIgniter gratuito a la regla y de calidad; tienes curso tutorial para hacer envío de correos, login social con Twitter, Facebook y Gmail, tienes librerías para hacer el login en CodeIgniter, subir archivos, el famoso upload mediante la forma tradicional o Ajax, integración con Netbeans para que sea más potente, tienes forma de encriptar y desencriptar cadenas de texto, tienes para hacer tu propio CRUD a mano o casi automatizado con Grocery CRUD, tienes para redimensionar imágenes e iniciación a las REST FULL APIS con CodeIgniter, pagos con PayPal y Stripe todo en este listado de entradas que viste anteriormente.

Curso gratuito en CodeIgniter: crea tu propio CRUD

Y si quieres un curso gratuito en CodeIgniter también puedes ver el siguiente curso gratuito, una versión gratis y lite hay que decir de nuestro Master en CodeIgniter, que actualmente es el curso en español más completo que encontrarás de CodeIgniter en la plataforma; la versión lite de nuestro curso lo puedes encontrar aquí:

En esta mini curso que te traigo de manera gratuita, vas a aprender a crear un CRUD, pienso que la mejor manera de impartir enseñanza sobre lenguajes de programación, framework, etc es hacer un CRUD, con esto tocamos puntos fundamentales que debes conocer; en este curso vamos a crear un controlador como el siguiente:

Controlador del CURD persona

Aquí vemos uno de los elementos fundamentales que explicamos en nuestro curso gratuito para CodeIgniter, el Controlador, aquel eje central que actúa entre la vista y el modelo debe ser lo primero que debemos explicar:

class Personas extends CI_Controller {    public function __construct() {        parent::__construct();        $this->load->helper('form');        $this->load->helper("url");        $this->load->model('Persona');        $this->load->library('form_validation');        $this->load->database();    }    function index() {        redirect("/personas/listado");    }    public function listado() {        $vdata["personas"] = $this->Persona->findAll();        $this->load->view('personas/listado', $vdata);    }    public function guardar($persona_id = NULL) {        $this->form_validation->set_rules('nombre', 'Nombre', 'required|min_length[3]');        $this->form_validation->set_rules('apellido', 'Apellido', 'required');        $this->form_validation->set_rules('edad', 'edad', 'required');        $vdata["nombre"] = $vdata["apellido"] = $vdata["edad"] = "";        if (isset($persona_id)) {            $persona = $this->Persona->find($persona_id);            if (isset($persona)) {                $vdata["nombre"] = $persona->nombre;                $vdata["apellido"] = $persona->apellido;                $vdata["edad"] = $persona->edad;            }        }        if ($this->input->server("REQUEST_METHOD") == "POST") {            $data["nombre"] = $this->input->post("nombre");            $data["apellido"] = $this->input->post("apellido");            $data["edad"] = $this->input->post("edad");            $vdata["nombre"] = $this->input->post("nombre");            $vdata["apellido"] = $this->input->post("apellido");            $vdata["edad"] = $this->input->post("edad");            if ($this->form_validation->run()) {                if (isset($persona_id)) {                    $this->Persona->update($persona_id, $data);                } else                    $persona_id = $this->Persona->insert($data);                                 redirect("/personas/guardar/$persona_id");            }        }        $this->load->view('personas/guardar', $vdata);    }    public function borrar($persona_id = NULL) {        $this->Persona->delete($persona_id);                redirect("/personas/listado");    }    public function ver($persona_id = NULL) {        if (!isset($persona_id)) {            show_404();        }        $persona = $this->Persona->find($persona_id);        if (!isset($persona)) {            show_404();        }        if (isset($persona)) {            $vdata["nombre"] = $persona->nombre;            $vdata["apellido"] = $persona->apellido;            $vdata["edad"] = $persona->edad;        } else {            $vdata["nombre"] = $vdata["apellido"] = $vdata["edad"] = "";        }        $this->load->view('personas/ver', $vdata);    } }

Como puedes ver, este es el controlador de nuestro CRUD, vemos que tenemos realizamos redirecciones de las URL, cargamos vistas, validamos datos de formularios, insertamos datos del formulario en la base de datos, precargamos datos que van a ser enviamos a la vista, eliminamos datos, desde una misma acción actualizamos y guardamos nuestros registros y también tenemos una tabla que es el eje central para listar nuestros registros.

También empleamos el modelo pertinente para comunicarnos con la base de datos, obtener registros y actualizar, guardar o eliminar otros registros.

Vista de listado y guardado de las personas

En otro bloque del curso definimos lo que es la tabla para listar las personas, todos los registros de manera fácil; para eso empleamos una tabla con estilo creado con Bootstrap:

<html>    <head>        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">    </head>    <body>        <div class="container">            <br>            <a href="guardar" class="btn btn-success">Guardar</a>            <br><br>                        <table class="table">                <thead>                    <tr>                        <th scope="col">#</th>                        <th scope="col">Nombre</th>                        <th scope="col">Apellido</th>                        <th scope="col">Edad</th>                        <th scope="col">Acciones</th>                    </tr>                </thead>                <tbody>                    <?php foreach ($personas as $key => $p) : ?>                        <tr>                            <th scope="row"><?php echo $p->persona_id ?></th>                            <td><?php echo $p->nombre ?></td>                            <td><?php echo $p->apellido ?></td>                            <td><?php echo $p->edad ?></td>                            <td>                                <a href="guardar/<?php echo $p->persona_id ?>">Editar</a>                                <br>                                <a href="ver/<?php echo $p->persona_id ?>">Ver</a>                                <br>                                <a href="borrar/<?php echo $p->persona_id ?>">Borrar</a>                            </td>                        </tr>                    <?php endforeach; ?>                      </tbody>            </table>        </div>    </body> </html>

El código anterior, corresponde al HTML de nuestra tabla con los datos claves de la persona y las acciones para operar la tabla.

Por otra parte, tenemos el formulario para crear y actualizar a las personas, que es el ente que tratamos en nuestro Curso gratuito en CodeIgniter; en esta parte creamos un formulario empleando el helper en CodeIgniter del formulario; luego en controlador definido anteriormente se encarga de todo.

Modelos en CodeIgniter: el puente entre PHP y la base de datos

Por otra parte, también tenemos el modelo, que nos sirve de puente entre la base de datos con el resto de la aplicación que estamos desarrollando, en ella definimos los distintos métodos que empleamos en nuestro CRUD:

-<?php class Persona extends CI_Model {    public $table = 'personas';    public $table_id = 'persona_id';    public function __construct() {            }    function find($id) {        $this-<db-<select();        $this-<db-<from($this-<table);        $this-<db-<where($this-<table_id, $id);        $query = $this-<db-<get();        return $query-<row();    }    function findAll() {        $this-<db-<select();        $this-<db-<from($this-<table);        $query = $this-<db-<get();        return $query-<result();    }    function insert($data) {        $this-<db-<insert($this-<table, $data);        return $this-<db-<insert_id();    }    function update($id, $data) {        $this-<db-<where($this-<table_id, $id);        $this-<db-<update($this-<table, $data);    }    function delete($id) {        $this-<db-<where($this-<table_id, $id);        $this-<db-<delete($this-<table);    } }

Además de esto, explicamos organización, para tener un código fácilmente escalable, que puedas implementar nuevos módulos fácilmente; todo esto lo tienes de manera gratuita para que tengas un abreboca de lo que te espera en nuestro Master en CodeIgniter, el curso más grande que he realizado y el más completo en español en CodeIgniter que encontrarás en Internet.

A esto vamos a ir personalizando mucho más el controlador junto con el resto de las capas para el MVC, filtro global, individuales, paginación y mucho más.

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

Andrés Cruz En Udemy