viernes, 28 de marzo de 2014

Mi primer controlador y mi primer vista en CodeIgniter


En esta entrada vamos a trabajar con el Framework CodeIgniter, especialmente tratará este artículo, de
1.       Configurar el archivo config.php y dentro de él, su url base
2.       Generar nuestro propio controlador y dos vistas

Para comenzar con esto vamos a iniciar el wamp server, acceder al disco local c:, luego a la carpeta wamp, seguido de la carpeta www donde encontramos nuestra carpeta contenedora del CodeIgniter.

Una vez dentro de ella, abrimos la carpeta application seguido de  config y dentro abrimos el archivo config.php, el cual pasamos a editar en la línea donde se mira la siguiente instrucción:

$config['base_url'] = '';

Como se ve en la imagen:











A lo cual pasamos a editar, agregando la siguiente línea de código:

$config['base_url']         = 'localhost/codeigniter_2.1.4/index.php/practica';

Como se ve en la imagen:




Ahora que ya hemos configurado este archivo, pasamos a crear nuestro propio controlador y unas vistas que interactuarán con nuestro controlador; lo cual será de importancia comprender y practicar para aprender a trabajar con este framework ya que es la forma  común de trabajar con él.

Entramos a la carpeta  controllers que se encuentra dentro de application y vemos que existen ya dos archivos, bueno pues creamos uno más con la extensión .php y el nombre que queramos. “en este ejemplo usaré el nombre micontrolador”.

Antes de agregarle código funcional a este archivo vamos a pasar a crear una carpeta dentro de la carpeta views, dicha carpeta puede ser nombrada como queramos, para este ejemplo la llamaré mis_vistas, dentro de esa carpeta crearé dos archivos con extensión .php

Para este ejemplo nombrare a los archivos como: primer_vista.php y segunda_vista.php

Ahora pasamos a ingresar código en los tres archivos que acabamos de crear.

Primero editamos la primer_vista, a la cual le agregamos código html, podemos agregar lo que queramos, por ejemplo:

<html>
  <head>
   <title>Primera vista</title>
  </head>
  <body>
      <h1>Nombre del autor</h1>
  </body>
</html>

Lo mismo para la segunda_vista con otro mensaje a mostrar.

Y ahora vamos a editar el primer archivo que creamos en la carpeta controllers  al que llamamos micontrolador.php


A este le escribimos el siguiente código.













  1.  Donde podemos ver unos señalamientos, el primero de arriba es el  nombre que le damos a la clase y obligatoriamente debe comenzar con mayúscula en la primera letra y se debe llamar igual que el archivo.
  2.   Las flechas señalan el parámetro que recibe el objeto view y este debe ser el nombre de la carpeta que contiene las vistas que creamos antes, seguido del nombre del archivo de vista que de igual manera ya creamos antes.
  3.  También señalamos la palabra otra la cual es el nombre de la función así como en la función de arriba la función se llama index y es la principal por defecto, nosotros podemos crear las funciones que queramos con diferentes nombres para luego hacer referencia a ellas si lo necesitamos. 




Con esto ya podemos hacer uso de nuestro controlador y acceder a las vistas que hemos creado.

Vamos al navegador y escribimos localhost, seguido del nombre de nuestra carpeta contenedora de CodeIgniter, luego el archivo index.php, y por ultimo el nombre de nuestro controlador micontrolador en este caso.

El url quedaría de la siguiente forma

Nos damos cuenta de que nos lleva a la primera vista que antes creamos, ahora vamos a la segunda vista y para ello agregamos a la url el nombre de la función que llama a la otra vista llamada en este caso segunda_vista.

El url quería de la siguiente forma:

Si todo ha marchado bien, habremos visto en nuestro navegador las dos vistas que creamos y también el controlador.

MVC

Modelo-Vista-Controlador



Este patrón fue descrito por primera vez en 1979, por SMALLTALK.

Es un patrón de arquitectura de las aplicaciones de software, el cual se mantiene separado de acuerdo a su nombre M-V-C; dando esta separación mayor flexibilidad a los desarrolladores.



Este patrón describe su contenido en:

  1. Un modelo
  2. Varias vistas
  3. Varios controladore
Nota: Las vistas y los controladores están muy relacionados, puesto que los controladores tratan los eventos o funciones que producen las vistas.


Al día de hoy es utilizado es múltiples frameworks, por mencionar algunos:

  • Java swing
  • Java enterprice edition
  • Asp.Net
  • Google web toolkit
  • Apache struts
  • Ruby on rails



Flujo de control del patrón MVC


En la imagen se muestra el flujo que conlleva el patrón MVC, y a manera de explicación señalo que...
  1. En primer lugar aparece la vista del lado izquierdo con una etiqueta que denota que la imagen hace referencia a una vista. La cual sirve de interacción con el usuario.
  2. El controlador se encarga de detectar el evento de la interacción entre el usuario y la interfaz.
  3. El controlador se encarga de notificar al modelo, la acción del usuario; esto puede implicar un cambio en el estado del modelo.
  4. El modelo genera una nueva vista, o varias.
  5. La interfaz sigue esperando instrucciones del usuario.


Nota final
Este es el patrón del cual se hablaba en la entrada anterior que utiliza CodeIgniter.

miércoles, 26 de marzo de 2014

Descarga y preparación de CodeIgniter para su uso


CodeIgniter es un Framework de PHP y hecho en PHP
Que facilita el trabajo de crear páginas web y lo hace siguiendo el patrón Modelo Vista Controlador.

En este primer documento me voy a dar a la tarea de descargar la versión actual de CodeIgniter y lo vamos a colocar en el lugar correspondiente de nuestra computadora para poder trabajar con él, en escritos posteriores.

Para descargar la versión actual debemos dirigirnos en nuestro navegador con acceso a Internet a la siguiente dirección: http://ellislab.com/codeigniter .




Una vez que nos hemos dirigido a la página oficial damos click en el enlace que dice "Descarga codeigniter" "La última versión 2.1.4"


Una vez que tengamos el archivo descargado pasamos a guardarlo en un lugar especial...

Vamos a dar ejemplo desde el punto de vista particular y tomando en cuenta que estamos usando un Sistema Operativo Windows, en mi caso es Windows 8 y tengo instalado wampserver.

Para esto vamos a guardar el archivo descomprimido en la carpeta www que se instalo por defecto con mi wampserver, así que me dirijo al disco local C: y ahí dentro busco la carpeta llamada wamp que contiene la carpeta www C:\wamp\www\CodeIgniter_2.1.4


Ahí guardo el archivo y lo descomprimo; y ahora sí ya puedo acceder a el desde el navegador escribiendo localhost seguido del nombre de nuestra carpeta que contenga el CodeIgniter.

No debemos olvidar iniciar el servidor.


Así es la página principal de Codeigniter, esto quiere decir que lo hemos hecho bien y que está bien instalado para poder comenzar a trabajar con él.



Nota: se puede usar el sistema operativo Linux y de servidor se puede usar XAMPP.

Por último vamos a mostrar un simple ejemplo, que consiste en modificar un archivo PHP de los que se descargaron dentro de nuestra carpeta de Codeigniter; para esto abrimos nuestra carpeta de Codeigniter seguido de esto abrimos la carpeta de application y por ultimo la carpeta de views; ya dentro de ella veremos dos archivos, uno en formato HTML y el otro en PHP.

Abrimos el archivo "wellcome_message.php" con un editor de textos y pasamos a hacer unas modificaciones; A lo cual este archivo es el archivo de vista de bienvenida, osea que es el principal que se nos abre cuando accedemos a Codeigniter desde el localhost.


Una vez abierto el archivo nos damos cuenta que hace referencia a una página web con código HTML, CSS en un formato PHP.
Pasaremos a eliminar o comentar todo el código de estilo, desde <style> hasta </style>, también le vamos a cambiar el valor al <title> </title> le podemos escribir "Bienvenido", luego nos posicionamos en la parte del <body></body> y modificamos el <h1></h1> que se mira ahí, le cambiamos el valor por "Bienvenido a mi servidor local, aprndiendo CodeIgniter" y podemos borrar los <p></p> que se miran en el body.

Una vez editado el archivo, guardamos los cambios y actualizamos el navegador.



Así es como nos queda la página de bienvenida. Con esto doy por terminado este documento que trata de como descargar CodeIgniter y como instalarlo o configurar para poder usarlo.