FRAMEWORKS El concepto FRAMEWORK se emplea en muchos ámbitos del desarrollo de sistemas software, no solo en el ámbito de aplicaciones Web. Podemos encontrar FRAMEWORKS para el desarrollo de aplicaciones médicas, de visión por computador, para el desarrollo de juegos, y para cualquier ámbito que pueda ocurrírsenos. En general, con el término FRAMEWORK, nos estamos refiriendo a una estructura software compuesta de componentes personalizables e intercambiables para el desarrollo de una aplicación. En otras palabras, un FRAMEWORK se puede considerar como una aplicación genérica incompleta y configurable a la que podemos añadirle las últimas piezas para construir una aplicación concreta. COMO DESCARGAR UN FRAMEWORK Primero debemos mirar que FRAMEWORK vamos a utilizar, en nuestro caso vamos a utilizar el frame CodeIgniter. Para descargarlo lo buscamos de la página oficial www.codeigniter.com
Vamos al enlace de download y descargamos la versión que necesitemos. En este caso hay dos versiones una que es la versión 3.0.0 pero se recomienda bajar la versión anterior versión 2.X que es l versión estable en el momento.
PRIMEROS PASOS CON CODEIGNITER Para empezar a trabajar un framework debemos saber lo que es la programación MVC. El MVC o Modelo-Vista-Controlador es un patrón de arquitectura de software que, utilizando 3 componentes (Vistas, Models y Controladores) separa la lógica de la aplicación de la lógica de la vista en una aplicación. Es una arquitectura importante puesto que se utiliza tanto en componentes gráficos básicos hasta sistemas empresariales; la mayoría de los frameworks modernos utilizan MVC (o alguna adaptación del MVC) para la arquitectura, entre ellos podemos mencionar a Ruby on Rails, Django, AngularJS y muchos otros más. En este pequeño artículo intentamos introducirte a los conceptos del MVC.
Modelo Se encarga de los datos, generalmente (pero no obligatoriamente) consultando la base de datos. Actualizaciones, consultas, búsquedas, etc. todo eso va aquí, en el modelo. Controlador Se encarga de... controlar, recibe las órdenes del usuario y se encarga de solicitar los datos al modelo y de comunicárselos a la vista. Vistas Son la representación visual de los datos, todo lo que tenga que ver con la interfaz gráfica va aquí. Ni el modelo ni el controlador se preocupan de cómo se verán los datos, esa responsabilidad es únicamente de la vista.
Como instalamos el CodeIgniter, es muy fácil solo debemos descomprimir el framework en el servidor web en este caso si tenemos xampp lo descomprimimos en la carpeta htdocs y le cambiamos el nombre por el nombre del proyecto que vamos a crear. En este caso mi framework le cambie el nombre por el de clase_1, ahora vamos a modificar el archivo apache (httpd.conf) como se muestra en la imagen a continuación:
Y se nos abre el archivo de configuración y buscamos la línea que dice mod_rewrite y si esta comentada le quitamos el símbolo de numeral guardamos y reiniciamos el servidor.
Y después de reiniciar el servidor web ya tenemos instalado el framework y lo podemos ver en el navegador que más nos guste. Como ejecutamos el framework nos metemos al navegador y digitamos la url http://localhost/clase_1
Y ya tenemos ejecutado la pantalla de bienvenida del CodeIgniter. Ahora veamos la estructura de carpetas del framework.
En la carpeta application es donde están todas las configuraciones que vamos a trabajar.
Dentro de la carpeta application está otro archivo con el que vamos a trabajar que es donde están todas las configuraciones es la carpeta config.
Ahora vemos que el framework no me dice donde debo guardar las imágenes, css y js entonces en la raíz del framework creo una carpeta llamada public y dentro de ella creo tres carpetas más que son la images, css y js.
Debemos crear un archivo .htacces que lo vamos a crear en la raíz del framework.
Que hace este archivo permite cargar toda la funcionalidad del framework que está asociado al index El código del archivo .htacces es el siguiente:
Este archivo se sacó de la documentación de CodeIgniter. Ahora modificamos el archivo config.php que se encuentra en la ruta application/config/config.php, quitamos el index.php esto quiere decir que el framework va trabajar con las librerías por defecto. $config[‘index_page’]=’ ’;
Hagamos un hola mundo, las vistas se crean con la extensión .php en la carpeta views que se encuentra en application y los controladores dentro de la carpeta application/controllers y con extensión .php, como podemos ver hay un controlador llamado welcome.php y una vista llamada welcome_message.php. Recuerde que vamos a crear un controlador llamado hola.php
Como pueden ver estoy cargando un controlador llamado hola y por convención la clase debe llamarse igual que el archivo pero con la primera letra en mayúscula, luego me meto a las vistas application/views y creo una vista llamada hola.php y que como pueden ver la estoy llamando desde el controlador $this->load->view(‘hola’); y el código para la vista es el siguiente:
El resultado es el siguiente: desde el navegador escribimos la siguiente url http://localhost/clase_1/hola
Ejercicio 1 Cree un controlador y una vista que me diga hola mundo.
CONTROLADORES Y VISTAS Recuerda que primero le sacamos copia al framework y reescribimos el nombre de la carpeta, la puedes llamar como quieras en este caso yo la llamare clase_2. Después de esto copiamos el archivo .htaccess en la raíz de nuestro framework como se muestra a continuación:
Vamos a ver cómo se comporta un controlador para el llamado de una vista. Entonces vamos a la carpeta application/controllers y le sacamos una copia al controlador welcome:
Y lo renombramos el welcome-copia.php por el nombre de hola.php, ahora lo abrimos y empezamos a hacer los cambios que se muestran a continuación:
Como pueden ver el nombre de la clase la llame como el archivo pero la primera con mayúscula class Hola extends CI_Controller si ejecutamos en este momento el cambio de nuestra clase hola nos seguiría cargando el welcome del codeigniter veamos:
En el navegador coloque la siguiente url http://localhost/clase_2/index.php/hola, a donde debemos ir si no queremos que nos cargue ese controlador por defecto, debemos ir a application/config y abrimos el archivo config.php:
Y donde está señalado borramos el index.php: como se muestra a continuación.
Guardamos la configuración y abrimos el archivo autoload.php que se encuentra en la carpeta application/config/autoload.php
En este archivo podemos cargar paquetes, librerías y helpers que son temas que más adelante veremos. Ahora configuremos nuestro archivo routes.php que es donde manejaremos las url’s que manejaremos en nuestros proyectos.
A este archivo le vamos a configurar nuestro controlador en este caso se llama hola y reemplazamos el welcome por hola como veremos a continuación:
Volvamos al controlador que tiene una clase y esta tiene métodos:
Ahora debemos buscar la vista que se encuentra en application/views/welcome_message.php y le sacamos copia y lo renombramos con el nombre de index.php ya que se debe llamar igual que el método de nuestro controlador como se muestra a continuación:
Abrimos el archivo hola.php lo modificamos y le colocamos hola para ver que si nos funciona
Recuerde cambiar en el controlador $this->load->view('welcome_message'); por $this>load->view('index'); Veamos el resultado en el navegador: localhost/clase_2/hola
Ahora creemos otro método dentro del controlador, recuerde que las vistas no se llamen igual que el controlador. Creo un método llamado saludo y le creo una vista
Se creó la función saludo que me apunta a una vista llamada saludo, como se crea esta vista pues puedes sacarle una copia al index que se encuentra en application/vistas y lo renombras con el nombre de saludo.php
La abrimos y la modificamos con el texto hola desde la vista saludo. Veamos el resultado en el navegador, digito localhost/clase_2/hola/saludo
Como podemos ver solo le estamos diciendo al controlador que me cargue una vista ahora le diremos al controlador que me cargue datos a la vista. Creemos un array multiple para pasarle datos a la vista, y como se lo paso a la vista entonces le decimos en el cotrolador lo siguiente:
Si cargamos el navegador vemos que el resultado es igual ahora debemos pasar los parámetros a la vista para que podamos ver el resultado del array: localhost/clase_2/hola/saludo
En el código para que me imprima el resultado del array es el siguiente:
Ahora imprime el otro array y crea un array en el método del index y que me cargue algún texto en la vista. Ahora vermos otra forma de cargar los arreglos en codeigniter, creamos otro método llamado otro y una vista llamada otro.php
Ahora creo el método otro en el controlador.
Si yo ejecuto este método me genera error.
Este error se genera porque las variables título y bajada no están definidas en el método otro que se definió en el controlador. Creo una variable llamada título y se la paso al $this>load->view(‘otro’, compact(‘titulo’)); compact es una palabra reservada del lenguaje y como pueden ver paso la variable título sin el signo pesos adelante ($) ya que este lo toma como una variable.
Si vamos al navegador ya solo me faltaría corregir el error para la otra variable.
Vuelvo al controlador y le defino la otra variable como se muestra a continuación:
y el resultado en nuestro navegador es el siguiente: localhost/clase_2/hola/otro
Ahora pasemos un array a ver qué sucede con nuestro controlador y vista. Modifiquemos el código de la vista otro para que nos cargue el array en nuestro navegador.
Y el resultado en el navegador es el siguiente:
Cada controlador se le recomienda que contenga un método index. Ejercicio En este mismo framework cree otro controlador con otras vistas que me carguen por array y por variables algún texto.
LAYOUT
Este tema es fundamental en cualquier framework ya que esto tiene que ver con el diseño. No hay un método nativo para lo layouts en codeigniter ya cada empresa decide cómo trabajar el diseño de sus desarrollos web. Lo primero es crear nuestro proyecto, como siempre es sacarle copia a nuestro framework. Creo una carpeta llamada clase_3 recuerde que usted la puede llamar como quiera. Recuerde copiar el .htaccess:
Ahora debemos abrir los archivos autolad.php, routes.php y config.php que se encuentran en application/config, recuerde que el routes.php modificamos el welcome por index:
Ahora en el config.php le decimos al index_page que no nos cargue ninguna url por defecto.
Codeigniter te permite crear tus propias librerías y esto lo encuentro en la documentación del codeignter. Cuando usamos el termino "Librerías" normalmente nos referimos a las clases que se localizan en el directorio libraries y descriptas en la Referencia de Clases de su Guia de Usuario. En este caso, sin embargo, en lugar de ello describiremos como puede crear sus propias librerias dentro del
directorio application/libraries con el fin de mantener la separación entre sus recursos locales y los recursos del marco de trabajo global, ahora voy a copiar la librería layout en la ruta anteriormente indicada.
Esta librería se les compartirá en el material de apoyo en la carpeta del instructor y la carpeta se llama codeigniter. Hay dos formas de cargar las librerías: 1. Si vamos a utilizar la librería para todos los controladores la cargamos en el archivo autoload.php. 2. Pero si solo va ser para un controlador en específico lo cargamos directamente en el controlador de la siguiente manera: $this->load>library(‘session’); //recuerde el nombre es opcional como usted llamo su librería. Abrimos el archivo autoload.php y le vamos a colocar que la clase que va cargar es layout como se muestra a continuación:
Después de habernos referenciado a la librería debemos crear nuestro index.php en la carpeta controllers.
Modifiquemos nuestro index.php:
Y si cargamos el controlador en nuestro navegador se debe generar un error:
Este error se genera ya que no vamos a cargar más nuestras vistas por el método load entonces si comentan la línea $this->load->view('welcome_message'); ya no se nos muestra el error.
Ahora vamos al controlador para ver como cargamos esa vista, le cargamos la vista index al layout por el método view. Y esa vista debe estar alojada en views.
Si vemos en el navegador el me va a generar un error
Este error se debe a que no he generado un constructor, y en el constructor vamos a trabajar con el método setLayout que me va llamar un método layout que se encuentra en la librería layout. Ahora vamos al archivo autoload.php y vamos a utilizar un helper llamado url.
Si recargamos nuestro navegador nos va salir un error que no encuentra la vista index.
Fíjate muy bien que el error me dice index/index, esto quiere decir que por cada controlador debe haber una carpeta que me controle las vistas. Entonces debemos crear dos directorios llamados index y layouts dentro de la carpeta views.
Si actualizamos el navegador nos sigue sacando el error pero ya es porque no existe el archivo index dentro de la carpeta index. Ensayalo en tu navegador. Debemos crear el archivo index.php dentro de la carpeta index.
En este archivo index.php es donde vamos a manejar los datos que provienen del método del controlador. Creemos otro método dentro del controlador llamado nosotros y va cargar una vista llamada nosotros.
Ahora ejecutemos nuestro framework en el navegador para ver que sucede.
Ahora me saca el error de que no existe el archivo layout.php que debería estar en la carpeta layouts. Le vamos a cambiar el nombre en el constructor $this->layout->setLayout('layout'); y ese layout lo cambiamos por template1 $this->layout->setLayout('template1');
En la carpeta layouts vamos a crear el archivo template1.php
En este archivo vamos a colocar toda la funcionalidad de html básico.
Las funcionalidades de este archivo las carga desde el archivo layout.php que se encuentra en application/libraries. Ahora modifico la vista index que se encuentra dentro de la carpeta index y no le meto mucho código html ya que este me lo coge desde el template si cargamos nuestra pagina nos sale el mensaje que mandamos desde la vista localhost/clase_3/
Ahora miremos el código que me genera esta vista y veremos que es el código que está cargando desde el template1.php
Ahora creemos la vista para el otro método que se llama nosotros y lo creamos dentro de la carpeta index
Lo abrimos y le colocamos algún texto.
Y si ejecutamos el navegador localhost/clase_3/index/nosotros
Ahora como utilizamos los otros métodos del layout como son la etiqueta title, keywords y descripción. Entonces ahora vamos a utilizarlos en el controlador de la siguiente manera.
Y vemos en nuestro navegador que coge el titulo que le mande desde el controlador.
Y si cargamos nuestra vista index nos carga el titulo por defecto ejecútalo en tu navegador. Voy a utilizar los otros métodos del layout.
Si ejecutamos la vista vemos que no hay cambios pero si miramos el código fuente de la página podemos ver que el template nos coge los cambios realizados en la página.
Ahora veremos cómo cargar los css y js y las imágenes entonces debemos crear una carpeta llamada public que estará en la raíz del framework y contendrá tres carpetas que son js, css y images
Para poder mirar el ejemplo copio una imagen cualquiera en la carpeta images, ahora creamos un archivo css y lo vamos a llamar estilos.css que se guarda en la carpeta public/css
Ahora vamos a la vista y le vamos a cargar nuestro estilos.css
Si lo ejecutamos no debería cogerlo porque no lo estamos llamando en nuestro template1 entonces debemos llamarlo de la siguiente manera como si estuviéramos haciendo un hipervínculo.
Podemos usar rutas absolutas con la función base_url(), si vemos el código fuente de la pagina vemos que se esta usando una ruta absoluta para utilizar el estilo css
Y si cargamos la vista nosotros vemos que el efecto del css no se carga en el.
Si vemos el código fuente el si carga la ruta absoluta pero como no lo hemos cargado en la etiqueta
entonces no veremos el css en acción en la vista.
Ahora creamos un archivo llamado funciones.js dentro de la carpeta public/js.
Ahora hacemos el llamado de la función desde el template1.
El código de funciones.js es el siguiente:
Ahora debemos hacer el llamado de esta función en el archivo nosotros.php
Y el resultado es el siguiente:
Ahora en el controlador le vamos a indicar al método nosotros que nos cargue las funciones js, como estamos trabajando con el método nostros le vamos a decir que nos cargue una función js que se llama librería.js que vamos a crear en la carpeta public/js.
Recuerden que yo esta función la estoy cargando desde el controlador y para esto aca interviene el template1 que tiene su zona de funciones auxiliares que es donde yo le digo que me cargue todas mis funciones y si cargamos el navegador y vemos
el código fuente de la pagina vemos que dentro de auxiliares se carga la función que se ha creado:
Debemos solucionar el problema de la ruta absolutay para eso le agregamos al método nosotros la función base_url() de la siguiente manera.
y si miramos el código fuente de la pagina y le damos clic a la ruta absoluta nos muestra la función librería.js
Ahora se hace lo mismo para los estilos y creamos estilos2.css en la carpeta css
Creo el archivo estilos2.css
Ahora le hago el llamado a la función en la vista nosotros:
Podemos usar una técnica común que es en el controlador usar la función compact() para hacer llamados de algún mensaje que se esté guardando en una variable.
Luego hacemos el llamado de esa variable $saludito en la vista nosotros.php
Como cargamos las imágenes, esto lo hacemos desde la vista nosotros.php de la siguiente manera
Y el resultado en el navegador es:
EJERCICIO Crear un layout y un template y aplicarlo a un controlador y vista.
FORMULARIOS Vamos a generar como tomar datos desde un formulario. Como siempre creamos nuestro proyecto que ustedes ya saben cómo se crea y recuerde copiar nuestro archivo .htaccess en la raíz del framework.
Se puede copiar el framework de la carpeta clase_3 donde esta implementado el layout. Vamos a trabajar con la clase form y el helper form. Hay dos formas de cargar los helpers: 1. Desde la función load. 2. Desde el archivo autoload.php Carguemos el helper de formularios abrimos el archivo autoload.php y modificamos y el helper que vamos a cargar se llama form:
Vamos a crear un controlador en la carpeta controllers y lo llamamos formulario.php
Creamos la clase Formulario en el controlador formulario.php después le creamos el constructor que me hereda de los controladores de condeigniter y vamos a ir creando los métodos de la clase.
Si ejecutamos en el navegador nos va generar error ya que no se ha creado la vista formulario pero nos dice a su vez que debemos crear un directorio llamado formulario.
En views vamos a crear nuestra carpeta formulario
Y debemos crear dentro de formulario nuestra vista index:
Ahora ejecutemos en nuestro navegador si ya no nos está generando error http://localhost/clase_5/formulario
Ahora vamos a trabajar los formularios y en el index.php vamos a empezar a escribir nuestro código.
Si vamos al navegador se nos carga la pagina y podemos ver que se nos carga el tag de form_open()
El form_open lo que hace es pasarme la ruta absoluta por medio del form_action. Recuerde que debemos cerrar el formulario y para ello utilizaremos la siguiente función form_close(). Y si miramos el resultado en el navegador ya se me crea el tag .
Si en ves de colocar email/enviar le colocamos null queda setiada la ruta como vemos el resultado en el navegador.
Como no tengo una clase css llamada class la puedo eliminar.
Y si cargo en el navegador solo me carga el método post.
Antes de crear campos vamos a ver una variante del form_open y es el form_open_multipart() que me permite cargar archivos en el formulario. Y si ejecutamos el formulario podemos ver que se nos carga el enctype que permite que el formulario está autorizado para la captura de archivos. Nuestro archivo index.php que es nuestra vista queda asi:
Ahora vamos a trabajar los métodos y vamos a empezar con los campos ocultos. Miremos nuestro formulario y como creamos este tipo de campo oculto
Y si miramos nuestro resultado en el navegador podemos ver que se crea nuestro campo oculto y si miramos el código fuente desde el navegador vemos que se crea nuestro campo hidden
El otro resultado lo pueden mirar en el navegador. También podemos crear campos como arreglos multidimensionales y por cada valor del arreglo se nos crea un input, creemos nuestro campo de tipo texto.
Y miremos nuestro resultado en el navegador http://localhost/clase_5/formulario
Miremos como podemos trabajar este campo de texto de forma mas ordenada y lo trabajaremos como un arreglo
También podemos crear funciones javascript veamos un ejemplo rápido. El parámetro js lo pasamos como tercer parámetro dentro del form_input(). Ya usted creara la función de javascript que no se mande el campo vacio.
Creemos un campo de texto tipo password podemos copiar el arreglo anterior y le quitamos la función js y agregamos debajo del name la variable type => ‘password’ nuestro resultado será el siguiente http://localhost/clase_5/formulario
Nuestro código va quedando asi:
Creemos nuestro campo de tipo upload para subir archivos a nuestro formulario y lo más importante es que en el type le debemos decir que es file
Veamos nuestro resultado http://localhost/clase_5/formulario
Dele clic al botón y nos abrirá el administrador de archivos para que elijamos nuesro archivo a subir, vamos a crear un text área y ya no trabajamos form_input si no con form_textarea()
Ejecutemos en nuestro navegador para ver como va quedando nuestro formulario http://localhost/clase_5/formulario
Creemos un botón de envió
Y nuestro resultado es:
Hagamos un campo de tipo select y este si lo vamos a crear de la forma normal
Y el resultado es que nos carga un input de tipo select:
Ahora vamos al controlador para crear los ambientes que son sin post que es que el formulario no me recibe nada del formulario y el ambiente post que es cuando el formulario nos guarda los datos que enviamos a través del formulario. En el controlador vamos a programar los dos ambientes recuerde que nuestro controlador se llama formulario.php. Con la clase input es la que vamos a recibir los datos que se envían en el formulario.
Si ejecutamos y escribimos algo en el campo de texto podemos ver que el formulario nos imprime en pantalla lo enviado en la caja de texto:
Y le damos clic en enviar y se imprime en pantalla:
Y asi con cada uno de los campos del formulario entonces como vamos a enviar el password lo encriptamos para que no nos muestre la contraseña digitada
Que nos falta que nos cargue la imagen y para eso tenemos que usar la clase upload y como se trabaja esta clase pues se debe tratar como a un arreglo y le debemos indicar en donde se debe guardar el archivo ./uploads/ primero debemos procesar la imagen y después los datos ya veremos cómo queda nuestro código, debemos crear una carpeta llamado uploads y se crea en la raíz.
Si ejecuto y me sale un error donde me dice que no reconoce $session es porque no lo he habilitado en el autoload.php voy y lo activo y se debe solucionar el problema.