Máster en CodeIgniter 3 con Bootstrap 4 y Vue - Desde Cero

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 descargar e instalar CodeIgniter; vamos a conocer y comenzar con conceptos 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.

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.

Vamos a introducir un elemento fundamental que nos permitirán trabajar en nuestra aplicación en los próximos vídeos; los helpers.

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.

Vamos a crear la base de datos de la aplicación, para guardar nuestros posts y categorías.

Vamos a crear nuestros primeros modelos y aprender ha realizar nuestras primeras conexiones para hacer inserciones, actualizar, borrar y listar registros.

Vamos a descargar y configurar Bootstrap en el proyecto.

Vamos a instalar nuestro dashboard que emplearemos en nuestro controlador Admin, el cual vamos a trabajar en los próximos vídeos.

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.

Aquí te dejo el código fuente de la sección, para que la descargues y puedas realizar tus pruebas con el.

Recuerda que en este proyecto llevamos una metodología evolutiva en la cual vamos sacando más y más contenido para todas las secciones, por tal motivo es probable que el código fuente varíe en algunas secciones pero no en lo fundamental. Si quieres tener la versión más completa, descarga el código fuente de la sección de Despedida.

Bienvenidos a este módulo, 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.

Vamos a crear nuestro primer formulario con ayuda de los helpers en CodeIgniter, que es fundamental para crear nuestro CRUD. 

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. 

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. 

Vamos a terminar el primer formulario que hemos creado para guardar los posts en base de datos. 

Vamos a aprender a cómo emplear la librería para manejar los errores que nos trae CodeIgniter de manera global y local. 

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.

Vamos a crear un simple listado mediante una tabla de nuestros posts.

Crearemos un modal para que al seleccionar uno de los post, pregunte si lo desea eliminar y a posterior lo elimine.

Vamos a crear otro helper para limpiar la URL y crear una URL SEO amigable de nuestros posts. 

A partir de la acción que permite crear nuestros post, vamos a actualizarla para que también pueda actualizar nuestros post. 

Crearemos una simple función en JavaScript para abrir una imagen seleccionada en una ventana nueva. 

Vamos a comenzar a generar el contenido con texto enriquecido para nuestro contenido, para eso vamos a instalar este plugin WYSIWYG. 

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.

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. 

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

Vamos a configurar las categorías que definimos anteriormente como un campo de selección en nuestros posts. 

Aquí te dejo el código fuente de la sección, para que la descargues y puedas realizar tus pruebas con el.

Recuerda que en este proyecto llevamos una metodología evolutiva en la cual vamos sacando más y más contenido para todas las secciones, por tal motivo es probable que el código fuente varíe en algunas secciones pero no en lo fundamental. Si quieres tener la versión más completa, descarga el código fuente de la sección de Despedida.

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.

Les dejo anexo el proyecto y el logo de la aplicación que se los tenía pendiente.

Así que sin más que decir, disfrute el módulo.

Aprenderemos qué son estos componentes que señalamos anteriormente.

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. 

Vamos a aprender a instalar el paquete del que hablamos anteriormente en CodeIgniter.   

Vamos a aprender a usar el paquete que instalamos anteriormente, crearemos una vista template para nuestro login. 

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. 

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.

Vamos a replicar el cierre de sesión que nos ofrece el paquete para el control de usuario.

Una vez que tenemos los datos de usuario en sesión, vamos a mostrarlos en secciones claves o típicas en la aplicación.

Vamos a exportar el CRUD que nosotros definimos en el CORE de nuestro framework, en MyModel.

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. 

Vamos a emplear esta librería en nuestros CRUDs que definimos en la sección anterior. 

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. 

Vamos a aprender a realizar las mismas validaciones que podemos hacer con los formularios en CodeIgniter, pero con Grocery CRUD.

Vamos a emplear el sistema de de Grocery CRUD solamente para las tablas del POSTs; desactivando el resto de los elementos del mismo.

Aquí vamos a entender los elementos más importantes de Grocery CRUD, conoceremos los callbacks y demás parámetros de configuración que nos permite esta librería. 

Vamos a realizar una carga de archivos empleando Grocery CRUD.

Vamos a reparar algunos errores que hemos dejado pasar: redirecciones y mucho más.

Vamos a definir una pantalla para que el usuario cambie sus credenciales. 

Vamos a crear un helper para manejar el avatar del usuario.

Vamos a crear un helper para manejar las migajas de pan del administrador.

Vamos a realizar una presentación de una aplicación existente que emplea Grocery CRUD en conjunto con el tema de Bootstrap 4

Aquí te dejo el código fuente de la sección, para que la descargues y puedas realizar tus pruebas con el.

Recuerda que en este proyecto llevamos una metodología evolutiva en la cual vamos sacando más y más contenido para todas las secciones, por tal motivo es probable que el código fuente varíe en algunas secciones pero no en lo fundamental. Si quieres tener la versión más completa, descarga el código fuente de la sección de Despedida.

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.

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. 

Vamos a crear un listado con paginación para nuestros POSTs.

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. 

Vamos a crear la sección de registro de los usuarios con un formulario creado en HTML y no con el helper de CodeIgniter. 

Vamos a agregar unos campos de validaciones a nuestro formulario de registro de usuarios.

Vamos a colocar unos pequeños íconos en nuestro header que variarán según el usuario se encuentre autenticado o no. 

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. 

Vamos a crear otro listado pero esta vez asociado a las categorías empleando lo que hemos hecho hasta los momentos. 

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. 

Vamos a crear un buscador por palabras claves y un filtro en nuestra categoría. 

Vamos a instalar y configurar nuestro plugin para los comentarios que podrá realizar los usuarios en nuestros posts.

Vamos a crear la vista y la función asociada para crear la función de solicitud de recuperación de credenciales. 

Vamos a crear una librería para el envío de emails.

Vamos a crear la vista HTML que vamos a emplear cuando se envíe el email.

Vamos a crear la vista HTML para que el usuario pueda cambiar su contraseña 

Vamos a instalar y configurar nuestro plugin para los comentarios que podrá realizar los usuarios en nuestros posts.

Vamos a ajustar la librería de Emails para dejarla lista al momento de que queramos implementar otros métodos para el envío de emails. 

Debes hacer una tarea la cual consiste en definir los meta tags en el resto de las secciones.

Resolución de la tarea.

Aquí te dejo el código fuente de la sección, para que la descargues y puedas realizar tus pruebas con el.

Recuerda que en este proyecto llevamos una metodología evolutiva en la cual vamos sacando más y más contenido para todas las secciones, por tal motivo es probable que el código fuente varíe en algunas secciones pero no en lo fundamental. Si quieres tener la versión más completa, descarga el código fuente de la sección de Despedida.

En esta sección vamos a seguir desarrollando nuestro blog, vamos a realizar varias optimizaciones a nivel de SEO y de paso vamos a desarrollar nuevos componentes en CodeIgniter y aprender nuevas cosas en el camino.

Vamos a aprender a crear el cache de las páginas de nuestros POST empleando un componente en CodeIgniter.

Vamos a borrar la caché de nuestro POST al momento de que actualicemos el POST desde nuestro admin y habilitar una bandera para deshabilitar la caché según el ambiente en el cual nos encontremos.

Vamos a desarrollar nuestro primer hooks en CodeIgniter, el cual permitirá comprimier el HTML de toda nuestra aplicación.

Vamos a practicar un poco de CSS definiendo un header social para colocar nuestros links sociales con algunos efectos CSS.

Vamos a convertir nuestro bloque JS de comentarios para nuestros post, en un archivo JavaScript independiente.

Vamos a hablar de la importancia del Sitemap en nuestras aplicaciones y cómo podemos construir uno de manera automática para nuestros POST con CodeIgniter.

Aquí te dejo el código fuente de la sección, para que la descargues y puedas realizar tus pruebas con el.

Recuerda que en este proyecto llevamos una metodología evolutiva en la cual vamos sacando más y más contenido para todas las secciones, por tal motivo es probable que el código fuente varíe en algunas secciones pero no en lo fundamental. Si quieres tener la versión más completa, descarga el código fuente de la sección de Despedida.

Como les he mencionado ya hasta el cansancio, en este curso queremos hacer un poco de todo teniendo como eje central enseñar CodeIgniter, pero extendiéndose a otras tecnologías punteras como ya hemos enseñado hasta estos momentos, una de estas tecnologías punteras que desde inicios del curso quiero introducir y que finalmente ha llegado el momento de trabajar con ella: Vue.

Vue y CodeIgniter, vamos a integra de una manera muy sencilla vue en nuestra aplicación creada en CodeIgniter para crear una aplicación SPA como vamos a explicar en esta sección.

Aquí como recomendación adicional, vamos a duplicar el controlador de blog y vistas asociadas para hacer otra versión de nuestro Blog, al menos las secciones que nos interesa, pero es importante tener eso en cuenta, que es una variación de nuestro blog.

Tu decidirás cual decides emplear si la que empleamos en la sección de crear nuestro blog o esta versión con Vue y la SPA.

No vamos ha hacer un curso de inicial de vue como tal pero vamos a ir dando la correspondiente explicación a cada elemento que introducimos de Vue, aunque te recomiendo que visites mi blog, mi canal en YouTube o te inscribas en el mini curso gratuito de Vue en esta misma plataforma.

Lo otro que debes saber es que es una web SPA de su siglas Single-page application

Es una aplicación de una única página con el objetivo de dar una experiencia más fluida a los usuarios

En un SPA todos los códigos de HTML, JavaScript, y CSS se carga de una única vez, al momento de la consulta y se varía el contenido de las secciones claves haciendo llamadas al servidor para traer los datos, como será nuestro caso, o dar esquemas ya precargados.

Vue es un framework muy pequeño que permite crear elementos interactivos en la interfaz de usuario, cuenta con una curva de aprendizaje baja una vez que entendemos un poco su estructura, es extensible mediante componentes y gracias a estos también ganamos un mayor nivel de organización como veremos un poco más adelante y con Vue vamos a crear nuestra web SPA.

Ya cuento con un curso en Vue que puedes acceder gratuitamente en mi YouTube o en esta misma plataforma en donde vamos paso a paso explicamos como realizar condicionales, bucles, definir nuestras propiedades y cómo interactuar con ellas y los componentes. Aquí vamos a saltarnos un poco todo esto y vamos a ir directamente a lo que nos interesa e iniciar a crear una aplicación, entonces cuando necesitemos introducir un nuevo elemento o componente en Vue se hará la debida explicación.

Vamos a instalar Vue en nuestra web y configurar un nuevo proyecto.

Vamos a crear una web SPA muy sencilla, empleando los componentes en Vue y enlazarla internamente.

Vamos a instalar Vue con CodeIgniter y empezar con nuestra SPA.

Vamos a crear nuestro primer componente en Vue para el listado de nuestros POST.

Vamos a crear una función para mostrar el detalle de nuestra imagen.

Vamos a crear un componente en Vue para el detalle de nuestros POST.

Vamos a evitar que CodeIgniter renderize nuestras vistas y dejarle el trabajo a Vue.

Vamos a explicar estas configuraciones.

Vamos a acomodar y dar más detalle sobre la composición del HTML de los componentes que hemos creado.

Vamos a crear un componente para la imagen principal de nuestro POST.

Vas a crear el componente para los links sociales en la cabecera del detalle de nuestros POST.

Solución de la tarea.

Vas a crear un componente para el botón de las categorías que colocamos en el detalle de nuestro Post.

Vamos a crear un componente para la categoría (y su listado) que colocamos en el detalle de nuestros POST.

Resolución de la tarea.

Vamos a crear un componente más genérico para el detalle de nuestros POST

Vamos a emplear un plugin que nos ayudará para paginar el contenido de nuestros posts.

Vas a crear la paginación para el listados de los POSTs en base a la categoría.

Resolución de la tarea.

Vamos a cambiar el ámbito de nuestro #app para que ocupe prácticamente todo el body unos detalles menores de visualización.

Vamos a empezar a trabajar con la sección de favoritos, para eso vamos a tratar los eventos, los binding y más conexiones ajax mediante fetch en nuestro favoritos (parte 1)

Una pequeña demostración en la cual empleamos los métodos para variar la clase de un elemento.

Vamos a empezar a trabajar con la sección de favoritos, para eso vamos a tratar los eventos, los binding y más conexiones ajax mediante fetch en nuestro favoritos (parte 2)

Vamos a poner a funcionar nuestro buscador por palabras claves para nuestros POST con Vue.

Vamos a terminar de poner a funcionar nuestro buscador de POST con Vue, sería poner a funcionar los filtros con categorías, además de esto hablamos un caso en el que jQuery supera a Vue.

Aquí resumimos todo lo que hemos aprendido en esta sección.

Vamos a aprender a manejar los distintos ambientes de CodeIgniter para pasar nuestra aplicación de desarrollo a producción.

Vamos a aprender a manejar y configurar nuestros logs y niveles del mismo.

Vamos a aprender a manejar y configurar nuestros logs y niveles del mismo.

Vamos a aprender a manejar nuestras vistas 404, personalizarlas y registrar los mismos.

Vamos a aprender a emplear el método del cual dispone CodeIgniter para mostrar pantallas de errores generales en nuestra app y personalizar la vista.

Vamos a aprender a cambiar los idiomas en CodeIgniter, específicamente vamos a pasar de ingles a español.

Vamos a aprender a manejar los archivos de idiomas, crear el propio y emplearlo en nuestra aplicación.

Vamos a dar unos pequeños ejemplos para detallar el funcionamiento de las inyecciones XXS y cómo evitarlas desde CodeIgniter.

Vamos a aprender a mover la carpeta system de CodeIgniter a una ubicación global para que pueda ser empleada por múltiples proyecto en CodeIgniter

Vamos a aprender a emplear los archivos en CodeIgniter y de cómo podemos generar una copia de las operaciones de inserción y actualización que hagamos en nuestra base de datos.

Vamos a crear un acceso directo a crear POST que aparecerá solo en la vista de actualización de los POST.

Vamos a colocar enlaces para la edición de los POST y enlace al admin en nuestro Blog cuando el admin está autenticado.

Vamos a aprender a crear un nuevo usuario con Community Auth; un usuario editor que tendrá acceso al módulo admin pero de manera reducida.

Vamos a seguir configurando nuestro módulo administrador para que trabaje con nuestro usuario editor.

Vamos a seguir configurando nuestro módulo administrador para que trabaje con nuestro usuario editor.

Vamos a corregir un pequeño error al momento de importar el modelo.

Vamos a realizar una demostración de cómo podemos configurar la SDK 1 de Dropbox para PHP en un proyecto CodeIgniter de manera manual.

Vamos a instalar Dropbox en su API 2 con composer en nuestro CodeIgniter.

Vamos a explorar la documentación oficial de esta SDK de Dropbox para el manejo de los archivos.

Vas a crear un módulo CRUD para las tareas, similar al que manejamos para los Post pero más sencillo.

Vamos a resolver la tarea anterior.

Vamos a definir los métodos para realizar la carga de archivos en nuestra nueva sección de tareas, los cuales se van a cargar a Dropbox.

Vamos a definir los métodos para realizar la eliminación de archivos en nuestra nueva sección de tareas, los cuales se van a cargar a Dropbox.