diff --git a/es/first-app.md b/es/first-app.md index 68bfc2f..034f2c8 100644 --- a/es/first-app.md +++ b/es/first-app.md @@ -1,216 +1,232 @@ # Mi Primera Aplicación con KumbiaPHP -Luego que explicamos los pasos para configurar KumbiaPHP y ver su pantalla de -bienvenida, se viene hacer el primer ejemplo el cual tiene como objetivo -entender elementos básicos al momento de utilizar el framework que sirvan -para entender la arquitectura MVC (Modelo-Vista-Controlador). +Después de configurar KumbiaPHP y [visualizar su pantalla de bienvenida](to-install.md), vamos a crear un primer ejemplo +cuyo objetivo es comprender los elementos básicos para utilizar el framework y, al mismo tiempo, entender la +arquitectura **[MVC (Modelo-Vista-Controlador)](mvc.md)**. -## ¡Hola KumbiaPHP! +## Primer saludo con 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 busca en controlador y, -en este, una acción que atiende la petición. Luego, KumbiaPHP utiliza esta -información de controlador y acción para buscar la vista asociada a la -petición. +En este ejemplo haremos el clásico "¡Hola Mundo!", pero con una variación: diremos **"¡Hola KumbiaPHP!"**. +Recordemos el funcionamiento del modelo MVC: -## El Controlador +* KumbiaPHP recibe una petición. +* Busca el **controlador** indicado. +* Dentro del controlador, ubica la **acción** que debe atender la petición. +* Finalmente, utiliza esa información para buscar la **vista** asociada y mostrar el resultado. + +## Creando el primer controlador + +Creamos un controlador en `app/controllers/greetings_controller.php`: -Ahora agregamos contenido al controlador app/controllers/saludo_controller.php ```php ¡Hola KumbiaPHP! +
Fecha y hora actual: = $date ?>
``` - -Si ahora entramos a *http://localhost/kumbiaphp/saludo/CaChi/* , nos mostrara en el navegador web -el saludo junto con el nombre colocado y la fecha actual, como se muestra en -la figura 2.6. - -Figura 2.6: Saludando al usuario +Al ingresar en `http://127.0.0.1:8001/greetings/hello/CaChi/`, se mostrará un saludo personalizado junto con la fecha actual +(figura 5). + + +*Figura 5: Saludando al usuario* -## Repitiendo la Historia +> 💡 **Nota:** KumbiaPHP incluye la función h() como atajo de htmlspecialchars(). Se recomienda envolver los valores +dinámicos en h() para evitar problemas de seguridad (XSS) y garantizar que se respete el charset de la aplicación. -Ahora vamos otra acción llamada adios() y como su nombre indica haremos el -proceso inverso a saludar, es decir despedir a los usuarios. +## Añadiendo una nueva acción: goodbye() + +Hasta ahora hemos creado la acción `hello()` y su vista asociada. Para completar el ejemplo, vamos a añadir una segunda acción dentro del mismo controlador: `goodbye()`. +Con esta nueva acción mostraremos cómo reutilizar la misma lógica aprendida (controlador + vista) pero en este caso para despedir al usuario en lugar de saludarlo. ```php fecha = date("Y-m-d H:i"); - $this->nombre = $nombre; - } - /** - * método para despedir - */ - public function adios() { + * Controller for greetings + */ +class GreetingsController extends AppController +{ + /** + * Greeting action with name and date + * + * @param string $name User name + * @return void + */ + public function hello($name) + { + $this->date = date("Y-m-d H:i"); + $this->name = $name; + } + /** + * Farewell action + * + * @param string $name User name + * @return void + */ + public function goodbye($name) + { + $this->name = $name; } } ``` - -Agregamos una nueva vista para presentar el contenido de la acción adios() y -si recordamos lo que se explicó en la sección 2.1.3.3 deberíamos crear una -vista *app/views/saludo/adios.phtml* con el siguiente contenido. + +Ahora creamos la vista `app/views/greetings/goodbye.phtml`: + ```php -Esperamos verte pronto de nuevo.
+= Html::linkAction('hello/' . $name, 'Volver a saludar') ?> ``` - -Si ingresa al siguiente enlace *http://localhost/kumbiaphp/saludo/adios/* se vera un nuevo texto, -y un vinculo a la acción hola(), como se muestra en la figura 2.7. - - -Figura 2.7: Vista de adiós al usuario. - -Html::link(), es uno de los tantos helper que ofrece KumbiaPHP para facilitar -al momento de programar en las vistas. Podríamos escribir el código HTML -directamente, colocando *Volver a -Saludar*, pero esto puede conllevar a un problema, imagine que quisiera -cambiar de nombre a su proyecto de kumbiaphp a demo, tendríamos que modificar -todos los vínculos, los helpers de KumbiaPHP resuelven estos problemas. - -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 ni procesando otro tipo de información más compleja. - -Nos ubicamos en el directorio */path/to/kumbiaphp/app/controllers/*. Aquí -están nuestros controladores (Para más detalles, lee la documentación sobre -el directorio app). Para crear un controlador, es importante tener en cuenta -las convenciones de nombre que utiliza el Framework. Llamaremos a nuestro -controlador *saludo_controller.php*. Note el sufijo *_controller.php* esto -forma parte de la convención de nombres, y hace que KumbiaPHP identifique ese -archivo como un controlador. + +Si accedemos a `http://127.0.0.1:8001/greetings/goodbye/CaChi`, veremos el mensaje de despedida con un enlace para volver a +saludar (figura 6). + + +*Figura 6: Despedida al usuario* + +El método `Html::linkAction()` es un **helper** que facilita la creación de enlaces. En lugar de escribir manualmente: + +```html +Volver a saludar +``` + +...lo hacemos de manera más limpia y mantenible. Así, si cambiamos el nombre del controller, no tendremos que modificar +cada enlace manualmente. + +Con este primer ejemplo hemos aprendido a crear un controlador y sus vistas asociadas en KumbiaPHP, comprender cómo se estructuran las URLs y cómo se transmiten parámetros a las acciones. A través de un sencillo saludo y una despedida, se ilustra de forma práctica la arquitectura MVC, el paso de variables a las vistas y el uso de helpers que simplifican el código. Con estas bases, ya estamos listos para desarrollar aplicaciones más completas con KumbiaPHP. diff --git a/images/kumbia-url-anatomy-params.png b/images/kumbia-url-anatomy-params.png new file mode 100644 index 0000000..5c352e0 Binary files /dev/null and b/images/kumbia-url-anatomy-params.png differ diff --git a/images/kumbia-url-anatomy.png b/images/kumbia-url-anatomy.png new file mode 100644 index 0000000..488f08c Binary files /dev/null and b/images/kumbia-url-anatomy.png differ diff --git a/images/kumbiaphp-greetings-date.png b/images/kumbiaphp-greetings-date.png new file mode 100644 index 0000000..18bfc27 Binary files /dev/null and b/images/kumbiaphp-greetings-date.png differ diff --git a/images/kumbiaphp-greetings-goodbye.png b/images/kumbiaphp-greetings-goodbye.png new file mode 100644 index 0000000..647f5dc Binary files /dev/null and b/images/kumbiaphp-greetings-goodbye.png differ diff --git a/images/kumbiaphp-greetings-hello-cachi.png b/images/kumbiaphp-greetings-hello-cachi.png new file mode 100644 index 0000000..d99b05b Binary files /dev/null and b/images/kumbiaphp-greetings-hello-cachi.png differ diff --git a/images/kumbiaphp-greetings.png b/images/kumbiaphp-greetings.png new file mode 100644 index 0000000..fa66aa7 Binary files /dev/null and b/images/kumbiaphp-greetings.png differ