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 mdicas, de visin por computador, para el desarrollo de
juegos, y para cualquier mbito que pueda ocurrrsenos. En general, con el trmino
FRAMEWORK, nos estamos refiriendo a una estructura software compuesta de
componentes personalizables e intercambiables para el desarrollo de una aplicacin. En
otras palabras, un FRAMEWORK se puede considerar como una aplicacin genrica
incompleta y configurable a la que podemos aadirle las ltimas piezas para construir una
aplicacin 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 pgina oficial www.codeigniter.com

Vamos al enlace de download y descargamos la versin que necesitemos. En este caso

hay dos versiones una que es la versin 3.0.0 pero se recomienda bajar la versin anterior
versin 2.X que es l versin estable en el momento.
 PRIMEROS PASOS CON CODEIGNITER
Para empezar a trabajar un framework debemos saber lo que es la programacin MVC.

El MVC o Modelo-Vista-Controlador es un patrn de arquitectura de software que, utilizando

3 componentes (Vistas, Models y Controladores) separa la lgica de la aplicacin de la
lgica de la vista en una aplicacin. Es una arquitectura importante puesto que se utiliza
tanto en componentes grficos bsicos hasta sistemas empresariales; la mayora de los
frameworks modernos utilizan MVC (o alguna adaptacin del MVC) para la arquitectura,
entre ellos podemos mencionar a Ruby on Rails, Django, AngularJS y muchos otros ms.
En este pequeo artculo intentamos introducirte a los conceptos del MVC.

Modelo
Se encarga de los datos, generalmente (pero no obligatoriamente) consultando la base de
datos. Actualizaciones, consultas, bsquedas, 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 comunicrselos a la vista.

Vistas
Son la representacin visual de los datos, todo lo que tenga que ver con la interfaz grfica
va aqu. Ni el modelo ni el controlador se preocupan de cmo se vern los datos, esa
responsabilidad es nicamente de la vista.
Como instalamos el CodeIgniter, es muy fcil 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 continuacin:

Y se nos abre el archivo de configuracin y buscamos la lnea que dice mod_rewrite y si

esta comentada le quitamos el smbolo de numeral guardamos y reiniciamos el servidor.
Y despus de reiniciar el servidor web ya tenemos instalado el framework y lo podemos ver
en el navegador que ms 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 estn todas las configuraciones que vamos a trabajar.
Dentro de la carpeta application est otro archivo con el que vamos a trabajar que es donde
estn todas las configuraciones es la carpeta config.

Ahora vemos que el framework no me dice donde debo guardar las imgenes, css y js
entonces en la raz del framework creo una carpeta llamada public y dentro de ella creo tres
carpetas ms que son la images, css y js.

Debemos crear un archivo .htacces que lo vamos a crear en la raz del framework.
Que hace este archivo permite cargar toda la funcionalidad del framework que est
asociado al index

El cdigo del archivo .htacces es el siguiente:

Este archivo se sac de la documentacin 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 libreras por defecto.

$config[index_page]= ;

Hagamos un hola mundo, las vistas se crean con la extensin .php en la carpeta views que
se encuentra en application y los controladores dentro de la carpeta application/controllers
y con extensin .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 convencin la clase
debe llamarse igual que el archivo pero con la primera letra en mayscula, 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 cdigo 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. Despus de
esto copiamos el archivo .htaccess en la raz de nuestro framework como se muestra a
continuacin:

Vamos a ver cmo 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 continuacin:

Como pueden ver el nombre de la clase la llame como el archivo pero la primera con
mayscula class Hola extends CI_Controller si ejecutamos en este momento el cambio
de nuestra clase hola nos seguira 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 sealado borramos el index.php: como se muestra a continuacin.

Guardamos la configuracin y abrimos el archivo autoload.php que se encuentra en la

carpeta application/config/autoload.php
En este archivo podemos cargar paquetes, libreras y helpers que son temas que ms
adelante veremos. Ahora configuremos nuestro archivo routes.php que es donde
manejaremos las urls 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 continuacin:
Volvamos al controlador que tiene una clase y esta tiene mtodos:

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 mtodo de nuestro controlador
como se muestra a continuacin:
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 mtodo dentro del controlador, recuerde que las vistas no se llamen
igual que el controlador. Creo un mtodo llamado saludo y le creo una vista

Se cre la funcin 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
parmetros a la vista para que podamos ver el resultado del array:
localhost/clase_2/hola/saludo

En el cdigo para que me imprima el resultado del array es el siguiente:

Ahora imprime el otro array y crea un array en el mtodo del index y que me cargue algn
texto en la vista.

Ahora vermos otra forma de cargar los arreglos en codeigniter, creamos otro mtodo
llamado otro y una vista llamada otro.php

Ahora creo el mtodo otro en el controlador.

Si yo ejecuto este mtodo me genera error.

Este error se genera porque las variables ttulo y bajada no estn definidas en el mtodo
otro que se defini en el controlador. Creo una variable llamada ttulo 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 ttulo sin el signo pesos adelante ($) ya que este lo toma
como una variable.
Si vamos al navegador ya solo me faltara corregir el error para la otra variable.

Vuelvo al controlador y le defino la otra variable como se muestra a continuacin:

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 cdigo 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 mtodo index.

Ejercicio

En este mismo framework cree otro controlador con otras vistas que me carguen por array
y por variables algn texto.
 LAYOUT

Este tema es fundamental en cualquier framework ya que esto tiene que ver con el
diseo. No hay un mtodo nativo para lo layouts en codeigniter ya cada empresa
decide cmo trabajar el diseo 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 libreras y esto lo encuentro en la

documentacin del codeignter. Cuando usamos el termino "Libreras" 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 separacin entre sus
recursos locales y los recursos del marco de trabajo global, ahora voy a copiar la
librera layout en la ruta anteriormente indicada.

Esta librera 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 libreras:

1. Si vamos a utilizar la librera para todos los controladores la cargamos en el

archivo autoload.php.
2. Pero si solo va ser para un controlador en especfico lo cargamos
directamente en el controlador de la siguiente manera: $this->load-
>library(session); //recuerde el nombre es opcional como usted llamo su
librera.

Abrimos el archivo autoload.php y le vamos a colocar que la clase que va cargar es

layout como se muestra a continuacin:
Despus de habernos referenciado a la librera 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 ms nuestras vistas por el mtodo
load entonces si comentan la lnea $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 mtodo 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 mtodo setLayout que me va llamar un mtodo layout que se
encuentra en la librera 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.
Fjate 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
mtodo del controlador.

Creemos otro mtodo 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 debera 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 bsico.

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 cdigo 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 cdigo que me genera esta vista y veremos que es el cdigo que
est cargando desde el template1.php

Ahora creemos la vista para el otro mtodo que se llama nosotros y lo creamos
dentro de la carpeta index
Lo abrimos y le colocamos algn texto.

Y si ejecutamos el navegador localhost/clase_3/index/nosotros

Ahora como utilizamos los otros mtodos del layout como son la etiqueta title,
keywords y descripcin. 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 ejectalo en tu
navegador. Voy a utilizar los otros mtodos del layout.

Si ejecutamos la vista vemos que no hay cambios pero si miramos el cdigo fuente
de la pgina podemos ver que el template nos coge los cambios realizados en la
pgina.
Ahora veremos cmo cargar los css y js y las imgenes entonces debemos crear
una carpeta llamada public que estar en la raz 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 debera cogerlo porque no lo estamos llamando en nuestro

template1 entonces debemos llamarlo de la siguiente manera como si estuviramos
haciendo un hipervnculo.
Podemos usar rutas absolutas con la funcin base_url(), si vemos el cdigo 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 cdigo fuente el si carga la ruta absoluta pero como no lo hemos
cargado en la etiqueta <h1> entonces no veremos el css en accin en la vista.

Ahora creamos un archivo llamado funciones.js dentro de la carpeta public/js.

Ahora hacemos el llamado de la funcin desde el template1.

El cdigo de funciones.js es el siguiente:

Ahora debemos hacer el llamado de esta funcin en el archivo nosotros.php

Y el resultado es el siguiente:
Ahora en el controlador le vamos a indicar al mtodo nosotros que nos cargue las
funciones js, como estamos trabajando con el mtodo nostros le vamos a decir que
nos cargue una funcin js que se llama librera.js que vamos a crear en la carpeta
public/js.

Recuerden que yo esta funcin 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 cdigo fuente de la pagina vemos que dentro de auxiliares se carga la funcin
que se ha creado:

Debemos solucionar el problema de la ruta absolutay para eso le agregamos al

mtodo nosotros la funcin base_url() de la siguiente manera.

y si miramos el cdigo fuente de la pagina y le damos clic a la ruta absoluta nos

muestra la funcin librera.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 funcin en la vista nosotros:

Podemos usar una tcnica comn que es en el controlador usar la funcin compact()
para hacer llamados de algn mensaje que se est guardando en una variable.
Luego hacemos el llamado de esa variable $saludito en la vista nosotros.php

Como cargamos las imgenes, 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 cmo se crea y
recuerde copiar nuestro archivo .htaccess en la raz 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 funcin 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 despus le creamos

el constructor que me hereda de los controladores de condeigniter y vamos a ir
creando los mtodos 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 cdigo.

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
funcin form_close(). Y si miramos el resultado en el navegador ya se me crea el
tag </form>.

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 mtodo 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 mtodos 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 cdigo fuente desde el navegador vemos que se crea
nuestro campo hidden

El otro resultado lo pueden mirar en el navegador. Tambin 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
Tambin podemos crear funciones javascript veamos un ejemplo rpido. El
parmetro js lo pasamos como tercer parmetro dentro del form_input(). Ya usted
creara la funcin 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 funcin js y agregamos debajo del name la variable type => password
nuestro resultado ser el siguiente http://localhost/clase_5/formulario
Nuestro cdigo va quedando asi:

Creemos nuestro campo de tipo upload para subir archivos a nuestro formulario y
lo ms importante es que en el type le debemos decir que es file
Veamos nuestro resultado http://localhost/clase_5/formulario

Dele clic al botn 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 botn 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 travs 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 envan 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 contrasea 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 despus los datos ya veremos cmo queda nuestro cdigo, debemos
crear una carpeta llamado uploads y se crea en la raz.
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.