Edición de «Hola Mundo KumbiaPHP Framework»

De KumbiaPHP Framework Wiki

Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.

Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.

Revisión actual Tu texto
Línea 1: Línea 1:
{{cleanupbox
+
El presente ejemplo tiene como objetivo entender la creación de una primera aplicación usando [http://www.kumbiaphp.com KumbiaPHP], que nos servirá para entender la arquitectura MVC y algunos características interesantes.  
|image=[[Archivo:Information_icon4.png|45px]]
 
|texto ='''Este Artículo cumple con todos los requerimientos de los Kumbieros.'''<br />
 
}}
 
  
 +
= Creando una nueva aplicación =
  
Este ejemplo tiene como objetivo entender la creación de una primera aplicación usando [http://www.kumbiaphp.com KumbiaPHP], que nos servirá para entender la arquitectura MVC y algunas características interesantes.
+
Lo primero que se debe hacer es [http://sourceforge.net/projects/kumbia/files/Kumbia/KumbiaPHP%201.0/kumbiaphp_1.0b1.zip/download Descargar la Versión 1.0] de KumbiaPHP, Una vez obtenida la copia del Framework descomprimimos y cambiamos el nombre la carpeta con el nombre de nuestro proyecto, para efecto del ejemplo llamaremos a nuestro proyecto '''kumbiaphp''' quedando de la siguiente forma:
 
 
= Creando una nueva aplicación =
 
  
Lo primero que debemos hacer es [https://github.com/KumbiaPHP/KumbiaPHP descargar la Versión 1.0 Beta2] de KumbiaPHP. Una vez obtenida la copia del Framework la descomprimimos en el directorio web público y renombramos la carpeta con el nombre de nuestro proyecto. Para efecto del ejemplo, llamaremos a nuestro proyecto '''kumbiaphp''' quedando la estructura de directorios de la siguiente forma:
+
<pre>
 +
kumbiaphp/
 +
|-- app
 +
|-- core
 +
|-- index.php
 +
</pre>
  
    kumbiaphp/
+
Mas detalles sobre la [[KumbiaPHP_Framework_Versión_1.0_Spirit#Nueva_Estructura_de_Directorios | Estructura de Directorio]] de la [[KumbiaPHP_Framework_Versión_1.0_Spirit | Versión 1.0]].
    |-- default/
 
        |--app/
 
        |--public/
 
            |-- index.php //archivo por el que entran todas las peticiones
 
    |-- core/
 
 
   
 
   
Antes de continuar, vamos a verificar que todo esté trabajando bien en nuestras configuraciones a nivel de servidor web.
+
Antes de continuar vamos a verificar que todo este trabajando bien en nuestras configuraciones a nivel de servidor web, para esto abrimos nuestro navegador web y colocamos http://localhost/kumbiaphp/, si todo esta funcionando bien debería mostrarnos la [http://www.kumbiaphp.com/blog/2009/05/31/spirit_estrena_nueva_bienvenida/ Pantalla de Bienvenida de KumbiaPHP].
 
 
Para esto, abrimos nuestro navegador web y vamos a [http://localhost/kumbiaphp/ http://localhost/kumbiaphp/]. Si todo está funcionando bien, debería mostrarnos la [http://www.kumbiaphp.com/blog/2009/05/31/spirit_estrena_nueva_bienvenida/ pantalla de Bienvenida de KumbiaPHP]:
 
  
 
[[Archivo:Bienvenida_kumbiaphp_framework_1.0.png|800px|thumb|center|Pantala de Bienvenida de KumbiaPHP Framework]]
 
[[Archivo:Bienvenida_kumbiaphp_framework_1.0.png|800px|thumb|center|Pantala de Bienvenida de KumbiaPHP Framework]]
  
= Hola, ¡KumbiaPHP! =
+
= Hola KumbiaPHP =
  
Ahora escribiremos el famoso "¡Hola, Mundo!" pero con un pequeño cambio: Diremos "Hola, ¡KumbiaPHP!". Pensando en esto, recordemos el modelo MVC: Según esto, KumbiaPHP debería aceptar una petición, que buscaría en controlador y, en éste, una acción que atendería la petición. Luego, KumbiaPHP utilizará esta información de controlador y acción para buscar la vista asociada a la petición.
+
Ahora tenemos que escribir el famoso Hola Mundo! pero nosotros hicimos un pequeño cambio y sera ''Hola KumbiaPHP!'' Pensando en esto recordemos el modelo MVC. Según esto, KumbiaPHP debería aceptar una petición que buscaría en controlador y en éste, una acción que atendería la petición, luego KumbiaPHP utilizara esta información de controlador y acción para buscar la vista asociada a la petición.
  
Para escribir el código de nuestro "Hola, ¡KumbiaPHP!" no necesitamos sino un controlador y una vista. No necesitamos modelos, ya que no estamos trabajando con información de una base de datos.
+
Para escribir el código de nuestro Hola KumbiaPHP!, no necesitamos sino un controlador y una vista. No necesitamos modelos ya que no estamos trabajando la información de una base de datos.
  
Nos ubicamos en el directorio <code>app/controllers/</code>. Aquí estarán nuestros controladores (Para más detalles, lee la documentación sobre el [[KumbiaPHP_Framework_Versión_1.0_Spirit#Explicando_dir_app |directorio app]]).
+
Nos ubicamos en el directorio app/controllers/ aquí estarán nuestros controladores ([[KumbiaPHP_Framework_Versión_1.0_Spirit#Explicando_dir_app |ver mas]]), para crear un controlador es importante tener en cuenta las [[Preguntas_Frecuentes#.C2.BFCu.C3.A1l_es_la_convenci.C3.B3n_para_nombrar_los_archivos_y_clases_de_modelos_y_controladores.3F | convenciones de nombre]] que utiliza el Framework, para entender mejor nosotros llamaremos a nuestro controlador '''saludo_controller.php''' nótese el sufijo '''_controller.php''' esto forma parte de la convención de nombre y hace que KumbiaPHP identifique ese archivo como un controlador.
Para crear un controlador, es importante tener en cuenta las [[Preguntas_Frecuentes#.C2.BFCu.C3.A1l_es_la_convenci.C3.B3n_para_nombrar_los_archivos_y_clases_de_modelos_y_controladores.3F | convenciones de nombre]] que utiliza el Framework. Nosotros llamaremos a nuestro controlador <code>saludo_controller.php</code>. Nótese el sufijo <code>_controller.php</code>: ésto forma parte de la convención de nombres, y hace que KumbiaPHP identifique ese archivo como un controlador.
 
  
==app/controllers/saludo_controller.php==
+
'''''app/controllers/saludo_controller.php'''''
  
 
Dentro de este archivo colocaremos las siguientes lineas de código.
 
Dentro de este archivo colocaremos las siguientes lineas de código.
Línea 39: Línea 32:
 
<source lang="php">
 
<source lang="php">
 
<?php  
 
<?php  
class SaludoController extends AppController {
+
class SaludoController extends ApplicationController {
 
 
 
     public function hola()  
 
     public function hola()  
 
     {
 
     {
         //Ver método select[1]
+
         //Ver método render[1]
         View::select(NULL); //no mostramos la vista, solo el template
+
         $this->render(null);
 
     }
 
     }
 
}
 
}
 
</source>
 
</source>
  
Como vemos, es una clase con un método <code>hola()</code>. Nótese que también esta el sufijo <code>Controller</code> al final de la declaración de la clase: ésto la identifica como una clase controladora, y ésta hereda (<code>extends</code>) de la superclase <code>AppController</code>, con lo que adquiere las propiedades de una clase controladora.
+
como vemos en una clase con un método hola(), nótese que también esta el sufijo '''Controller''' al final de la declaración de la clase esto la identifica como una clase controladora y esta hereda (extends) de la superclase ApplicationController  con lo que adquiere las propiedades de una clase controladora.
 +
 
 +
[1] [[KumbiaPHP_Framework_Versión_1.0_Spirit#Utilizando_el_m.C3.A9todo_render.28.24view.2C_.5B.24template.5D.29 | Método render]]
  
[1] [[http://www.kumbiaphp.com/api/beta2/class_kumbia_view.html | Método View::Select()]]
+
Vamos a ejecutar desde el navegador nuestro controlador saludo y la acción hola de la siguiente manera http://localhost/kumbiaphp/saludo/hola/.
  
Para ejecutar la acción <code>hola</code> de nuestro controlador <code>saludo</code>, vamos a [http://localhost/kumbiaphp/saludo/hola/ http://localhost/kumbiaphp/saludo/hola/]. Deberíamos ver ésto:
+
Como podemos darnos cuenta tenemos una acción vacía sin nada que mostrar al usuario que realizo la solicitud, esto es sencillo de deducir ya que no tenemos ninguna vista asociada a nuestra acción.
  
 
[[Archivo:Saludo_controller_action_hola.png|1000px|thumb|center|Renderizando un Controller sin View]]
 
[[Archivo:Saludo_controller_action_hola.png|1000px|thumb|center|Renderizando un Controller sin View]]
  
Como podemos darnos cuenta, tenemos una acción vacía, sin nada que mostrar al usuario que realizó la solicitud. Esto es sencillo de deducir, ya que no tenemos ninguna vista asociada a nuestra acción.
+
=KumbiaPHP URLS=
 +
Para continuar de una manera que vayamos entendiendo el funcionamiento del framework es importante entender sus URL, hagamos una descomposición de esta URL http://localhost/kumbiaphp/saludo/hola/
  
=KumbiaPHP URLs=  
+
<pre>
Para entender el funcionamiento del framework, es importante entender sus URLs:
+
http://localhost => Dominio
 +
        /kumbiaphp => Nombre del Proyecto
 +
            /saludo => Nombre del Controlador
 +
                /hola => Nombre de una Accion del Controlador
  
[[Archivo:Url-instalacion-local.png|center]]
+
</pre>
  
En producción, no queremos mostrar el nombre del directorio de instalación de KumbiaPHP. Para esto, simplemente hacemos que nuestro directorio <code>default/public/</code> sea el directorio público del servidor:
+
NOTA: Normalmente cuando se lleva una aplicación a producción no necesitamos el nombre del proyecto como se muestra arriba, simplemente se coloca el directorio '''app/''' en '''public_html'''
  
 
[[Archivo:URL-sin-modulo.png|center]]
 
[[Archivo:URL-sin-modulo.png|center]]
  
Cualquier otra información pasada por URL es tomada como parámetro a la acción, a propósito de nuestra aplicación:
+
Cualquier otra información pasada por URL es tomada como parámetro a la acción para propósito de nuestra aplicación.
 +
 
 +
http://localhost/kumbiaphp/saludo/hola/param1/param2/
 +
 
 +
<pre>
 +
http://localhost => Dominio
 +
        /kumbiaphp => Nombre del Proyecto
 +
            /saludo => Nombre del Controlador
 +
                /hola => Nombre de una Accion del Controlador
 +
                  /param1 => Parámetro 1
 +
                      /param2 => Parámetro 2
 +
</pre>
 +
 
 +
Quedando la acción hola de la siguiente forma:
 +
 
 +
<source lang=php>
 +
    ...
 +
 
 +
    public function hola($param1, $param2)
 +
    {
 +
        //quitamos el render
 +
    }
  
[[Archivo:Url-parametros2.png|center]]
+
    ...
 +
</source>
  
Esto es útil para evitar que tener estar enviando parámetros GET de la forma <code>?var=valor&var2=valor2</code> (esto es, de la forma tradicional como se viene utilizando PHP), la cual revela información sobre la arquitectura de software que se dispone en el servidor. Además, hacen que nuestra URL se vea mal.
+
Esto es útil para evitar que tener estar enviando parámetros GET que no hacen que se vea bien nuestra URL.
  
 
=Nuestra Primera Acción=
 
=Nuestra Primera Acción=
  
Agreguémosle contenido a la acción <code>hola</code>:
+
Agreguemosle contenido a la acción '''hola'''.
  
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
class SaludoController extends AppController {         
+
class SaludoController extends ApplicationController {         
  
 
     public function hola()  
 
     public function hola()  
 
     {
 
     {
         //quitamos el View::select(NULL);
+
         //quitamos el render
 
     }
 
     }
 
}
 
}
 +
 
</source>
 
</source>
  
Para poder ver la salida que envía el controlador, es necesario crear la vista asociada a la acción. Primero, creamos un directorio con el mismo nombre de nuestro controlador (en este caso debería llamarse <code>saludo</code>), y dentro de este estarán todas las vistas asociadas a las acciones que necesiten mostrar alguna información. En nuestro ejemplo llamamos a una acción llamada <code>hola</code>; por lo tanto, creamos un archivo llamado <code>hola.phtml</code> en el directorio <code>app/views/saludo/hola.phtml</code>.
+
Para poder ver la salida que envia el controlador es necesario crear la vista asociada a la acción, esto lo hacemos creando un directorio con el mismo nombre de nuestro controlador en este caso debería llamarse '''saludo''' y dentro de este estarán todas las vistas asociadas a las acciones que necesiten mostrar alguna información, para efecto del ejemplo llamamos a una acción llamada '''hola''' por lo tanto creamos un archivo llamado '''hola.phtml''' fíjese que el archivo se llama igual que la acción, este archivo lo creamos en el directorio:
 +
 
 +
'''app/views/saludo/hola.phtml'''
  
Una vez creado este archivo, le agregamos un poco de contenido:
+
Una vez creado este archivo le agregamos un poco de contenido...
  
 
<source lang="php">
 
<source lang="php">
<h1>Hola, ¡KumbiaPHP!</h1>  
+
<h1>Hola KumbiaPHP</h1>  
 
</source>
 
</source>
  
Ahora, si volvemos a [http://localhost/kumbiaphp/saludo/hola/ http://localhost/kumbiaphp/saludo/hola/], deberíamos ver lo siguiente:
+
Ahora si volvemos ejecutar desde nuestro navegador web http://localhost/kumbiaphp/saludo/hola/ si nos debe mostrar el contenido del archivo '''hola.phtml''' obtenemos la siguiente salida.
  
 
[[Archivo:Vista_Action_hola.png|800px|thumb|center|Mostrando el Contenido de un View]]
 
[[Archivo:Vista_Action_hola.png|800px|thumb|center|Mostrando el Contenido de un View]]
  
'''KumbiaPHP''' carga la vista con el mismo nombre que la acción en el directorio con el nombre del controlador seleccionado.  
+
Ahora si visualizamos en el explorador se entiende que KumbiaPHP automáticamente carga la vista con el mismo nombre la acción en el directorio con el nombre del controlador seleccionado.  
 +
Poniendo a consideración podríamos decir que las vistas permiten la salida al usuario usando PHP embebido en HTML. Por esto las vistas poseen extensión phtml a diferencia de los controladores que poseen PHP puro y por esto su extensión .php
  
Las vistas permiten dar formato a la salida al usuario usando PHP incrustado en HTML; por esto las vistas poseen extensión <code>.phtml</code>, a diferencia de los controladores, que poseen PHP puro, y por esto su extensión <code>.php</code>.
+
Pues como se ve ya hemos ejecutado la primera acción en Kumbia esto nos permite apreciar el comportamiento del Framework.
  
 
=Agregando más Contenido=
 
=Agregando más Contenido=
  
Agregaremos algo de contenido dinámico a nuestro proyecto, para que no sea tan aburrido. Mostraremos la hora y la fecha, usando la función <code>date()</code>.
+
Ahora vamos a mostrar la hora y fecha haciendo uso de la función date(), con esto evitamos tener un contenido estático y tener un sitio mas dinámico, editamos el archivo saludo_controller.php.
 
 
Cambiamos un poco el controlador <code>saludo_controller.php</code>...
 
  
 
<source lang="php">
 
<source lang="php">
 
<?php  
 
<?php  
   class SaludoController extends AppController {
+
   class SaludoController extends ApplicationController {
 
 
 
       public function hola() {
 
       public function hola() {
 
         $this->fecha = date("Y-m-d H:i");
 
         $this->fecha = date("Y-m-d H:i");
Línea 121: Línea 142:
 
</source>
 
</source>
  
...y la vista <code>hola.phtml</code>:
+
Y la vista hola.phtml quedaría asi:
 +
 
 +
'''app/views/saludo/hola.phtml'''
  
 
<source lang="php">
 
<source lang="php">
Línea 128: Línea 151:
 
</source>
 
</source>
  
Podemos ver que definimos <code>$this->fecha</code> en nuestro controlador, pero leímos <code>$fecha</code> en nuestra vista, gracias a que '''KumbiaPHP''' trabaja con variables de instancia.
+
'''Nota:''' Cuando hacemos uso de '''$this''' sobre una variable en el controlador, como se puede apreciar con '''$this->fecha''', automáticamente tenemos esa variable en la vista de la siguiente manera $fecha, esto porque KumbiaPHP trabaja con variables de instancia.
  
Ahora, si volvemos a [http://localhost/kumbiaphp/saludo/hola/ http://localhost/kumbiaphp/saludo/hola/], obtendremos la hora y fecha del momento en que se haga la petición:
+
Ahora si volvemos a ejecutar http://localhost/kumbiaphp/saludo/hola/ obtendremos la hora y fecha del momento en que se haga la petición.
  
 
[[Archivo:Vista_action_date.png|1000px|thumb|center|Renderizando la vista hola con una variable pasada desde el controller]]
 
[[Archivo:Vista_action_date.png|1000px|thumb|center|Renderizando la vista hola con una variable pasada desde el controller]]
 
Para agregarle calidez al asunto, le preguntaremos al usuario su nombre:
 
 
Volvemos a editar el controlador <code>saludo_controller.php</code>...
 
 
<source lang="php">
 
<?php
 
  class SaludoController extends AppController {
 
 
      //definimos un parametro en la acción al que llamamos $nombre
 
      public function hola($nombre) {
 
        $this->fecha = date("Y-m-d H:i");
 
        $this->nombre = $nombre;
 
      }
 
  }
 
</source>
 
 
...y la vista <code>hola.phtml</code> así:
 
 
'''app/views/saludo/hola.phtml'''
 
 
<source lang="php">
 
<h1>Hola <?php echo $nombre; ?>, ¡Qué lindo es utilizar KumbiaPHP! ¿No es cierto?</h1>
 
<?php echo $fecha ?>
 
</source>
 
 
Si ahora entramos a [http://localhost/kumbiaphp/saludo/hola/pepito/ http://localhost/kumbiaphp/saludo/hola/pepito/], nos mostrará por pantalla el saludo junto con el nombre ("pepito"), y la fecha.
 
  
 
=Repitiendo la Historia=
 
=Repitiendo la Historia=
  
 
Ahora vamos a crear otra acción llamada '''despedida''', que le dirá adiós a los usuarios:
 
Ahora vamos a crear otra acción llamada '''despedida''', que le dirá adiós a los usuarios:
 
Editamos nuestro controlador...
 
  
 
<source lang="php">
 
<source lang="php">
 
<?php  
 
<?php  
   class SaludoController extends AppController {
+
   class SaludoController extends ApplicationController {
 
 
 
       public function hola() {
 
       public function hola() {
 
         $this->fecha = date("Y-m-d H:i");
 
         $this->fecha = date("Y-m-d H:i");
 
       }
 
       }
 
 
       //dice adios...
 
       //dice adios...
 
       public function adios()  
 
       public function adios()  
       {
+
       {}
       }
+
        
 
   }
 
   }
 
</source>
 
</source>
  
...y agregamos una nueva vista, en <code>app/views/saludo/adios.phtml</code>
+
Tal como se menciona arriba creamos una vista con el nombre de la acción en este caso nuestra vista en:
 +
 
 +
'''app/views/saludo/adios.phtml'''
  
 
<source lang="php">
 
<source lang="php">
 
<h1>Adiós</h1>
 
<h1>Adiós</h1>
<?php echo Html::link('saludo/hola/', 'Volver a Saludar') ?>
+
<?php echo link_to('saludo/hola/', 'Volver a Saludar') ?>
 
</source>
 
</source>
  
Vamos a [http://localhost/kumbiaphp/saludo/adios/ http://localhost/kumbiaphp/saludo/adios/], y veremos nuestro nuevo texto, y un vínculo a la acción <code>hola</code> que armamos antes:
+
Ahora colocamos en nuestro navegador http://localhost/kumbiaphp/saludo/adios/ obtendremos un texto y un vinculo hacia nuestro controlador saludo y la acción hola.
  
 
[[Archivo:View_adios.png|1000px|thumb|center|Renderizando la Vista adios y muestra un link que vuelve a la vista hola]]
 
[[Archivo:View_adios.png|1000px|thumb|center|Renderizando la Vista adios y muestra un link que vuelve a la vista hola]]
  
<code>Html::link()</code>, es un Método del [[helper]] [https://github.com/manuelj555/Guia-de-Referencia-KumbiaPHP/blob/master/helpers/html.rst HTML] que ofrece KumbiaPHP para facilitar al momento de programar. Podríamos escribir el HTML directamente, poniendo, por ejemplo <code><a href="kumbiaphp/saludo/index">Volver a Saludar</a></code>, pero esto trae un problema: Si ahora quisiéramos renombrar nuestro proyecto de <code>kumbiaphp</code> a <code>demo</code>, tendríamos que modificar todos los vínculos.
+
'''link_to''', es un helper que ofrece KumbiaPHP para facilitar al momento de programar, este helper es equivalente a hacer
 +
<source lang="html4strict">
 +
<a href="kumbiaphp/saludo/index">Volver a Saludar</a>
 +
</source>
 +
Esto funciona bien, pero que sucedería si decidimos cambiar el nombre de la aplicación de '''kumbiaphp''' a '''demo''' por ejemplo, significa que deberías cambiar los vínculos de la aplicación para que apunten a la nueva ubicación.
 +
 
  
 
[[Categoría:Tutoriales KumbiaPHP]]
 
[[Categoría:Tutoriales KumbiaPHP]]

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)

Plantilla usada en esta página: