Taller de Programación Web #2

  • 6 Respuestas
  • 7073 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5667
  • Actividad:
    63.33%
  • Country: ar
  • Reputación 37
  • ANTRAX
  • Skype: underc0de.org
  • Twitter: @Underc0de
    • Ver Perfil
    • Underc0de
    • Email

Taller de Programación Web #2

  • en: Abril 05, 2015, 04:36:36 pm

Tabla de contenidos

1.- Saludo
2.- Instrucción inicial
2.1.- Vista
2.2.- Controlador
2.3.- Modelo
3.- Barra de direcciones
3.1.- Evitar el index.php en la URL
4.- Instalando CodeIgniter
4.1.- Directorio application
4.2.- Directorio system
5.- Primera vista
6.- Configuración Inicial
6.1.- autoload.php
6.2.- config.php
6.3.- database.php
6.4.- routes.php
7.- Controladores
7.1.- Funciones dentro de un controlador
7.2.- Práctico 1
8.- Vistas
8.1.- Cargando vistas desde un controlador   
8.2.- Enviando información a las vistas
8.3.- Práctico 2
9.- Modelos
9.1.- Controladores, modelos y vistas
10.- Despedida

 
Saludo

Muy bienvenido seas a la segunda parte del tutorial de Bootstrap y CodeIgniter, hoy aprenderemos a utilizar las 3 etapas básicas del framework CODEIGNITER, modelo, vista y controlador.
Espero lo disfrutes y te sea de utilidad.

Instrucción inicial
Para entender de mejor manera como utilizaremos este framework les daré una pequeña descripción de lo que haremos en cada “capa”:

Vista
En esta capa tendremos casi exclusivamente códigos html o algunos “echo” de php, esta será la parte visual, la que ve el cliente.

Controlador
En esta capa estará la lógica de nuestra aplicación, 100% código PHP, esta capa envía la información a la “vista”.

Modelo
En esta capa tendremos todas las interacciones a la base de datos, no existe lógica de programación.


Barra de direcciones
CodeIgniter trabaja con la siguiente organización en la barra de direcciones:
Código: Text
  1. http://www.tuweb.com/CONTROLADOR/FUNCION/PARAMETRO1/PARAMETRO2/.../PARAMETROX

Es decir, después de nuestra dirección base podemos especificar el nombre de algún controlador seguido de la función de ese controlador, y finalmente, todos los parámetros de entrada si es que requiere.

Evitar el index.php en la URL
Para evitar agregar la palabra ‘index.php’ en nuestras direcciones crearemos un archivo llamado ‘.htaccess’ en nuestra raíz con el siguiente contenido:
Código: Text
  1. <IfModule mod_rewrite.c>
  2.    RewriteEngine On
  3.    RewriteCond %{REQUEST_FILENAME} !-f
  4.    RewriteCond %{REQUEST_FILENAME} !-d
  5.    RewriteRule ^(.*)$ index.php/$1 [L]
  6. </IfModule>
  7. <IfModule !mod_rewrite.c>
  8. ErrorDocument 404 /index.php
  9. </IfModule>

De esta manera  podremos utilizar:
Código: Text
  1. http://www.tuweb.com/controlador/

En vez de:
Código: Text
  1. http://www.tuweb.com/index.php/controlador/

Así tendremos una URL más limpia.

Instalando CodeIgniter
Los archivos descargados en el la parte I de este taller los dejaremos en nuestra carpeta raíz de nuestro hosting, subdominio o directorio local.

Quedando de la siguiente manera:
Código: Text
  1. <ul class="bbc_list"><li type="square"> - Directorio[/li][/list]
  2.  | --</li><li type="square"> application[/li][/list]
  3.  | --</li><li type="square"> system[/li][/list]
  4.  | --    index.php
  5.  | --    .htaccess

Que serán los archivos necesarios, la documentación y los archivos .git no son necesarios para este desarrollo.

Directorio application
En este directorio encontraremos todo lo necesario para poder desarrollar, ahí está la carpeta de modelos (models), vistas (views) y controladores (controllers).
Encontraremos también los archivos de configuración de bases de datos y configuraciones generales.

Directorio system
En este directorio está la configuración propia de CodeIgniter, no nos meteremos aquí al menos en este taller.

Primera vista
Accedemos por URL a nuestra web y veremos algo como esto:

 

Pero como aprenderemos desde 0 vamos a borrar esos dos archivos que trae por defecto:
Welcome_message.php y welcome.php
Debemos conseguir el error 404:

Ahora si tenemos CodeIgniter VIRGEN, listo para comenzar a trabajar en nuestra aplicación.


Configuración Inicial
Siento mucho hacerlos pasar por esta parte que puede resultar bastante tediosa, pero ya viene la parte divertida y práctica, haremos rápida esta parte.
Nos situaremos en la siguiente dirección: application/config

autoload.php
Código: PHP
  1. $autoload['libraries'] = You are not allowed to view links. Register or Login('database','session');
  2. $autoload['helper'] = You are not allowed to view links. Register or Login('url');
Cargaremos automáticamente las librerías de base de datos, session y el helper de URL, así no tendremos que llamarlos cada vez que los necesitemos.

config.php
Código: PHP
  1. $config['index_page'] = '';
  2. $config['encryption_key'] = 'underc0de##Taller$$';
El encryption_key puede ser cualquier cadena, preferentemente de 32 caracteres de largo, la usaremos para las variables de sesión.

database.php
Código: PHP
  1. $db['default']['hostname'] = 'localhost';
  2. $db['default']['username'] = 'root';
  3. $db['default']['password'] = '';
  4. $db['default']['database'] = 'underDB';
Ustedes completan con la información correcta.

routes.php
Código: PHP
  1. $route['default_controller'] = "underc0de";
Aquí configuraremos el controlador que cargará al inicio, es decir, al cargar la página.
Como hemos eliminado el llamado “welcome.php” nos da error 404 como vimos anteriormente, pero ahora crearemos el controlador con el nombre que ustedes escriban ahí.
Nota: No es necesario escribir la extensión .php

Hecho esto ¡vamos a los códigos!

Controladores
Para trabajar los controladores nos situaremos en el directorio “application/controllers” y crearemos un archivo php con el nombre que escogieron anteriormente, en mi caso ‘underc0de.php’, dentro del archivo escribiremos lo siguiente
Código: PHP
  1. <?php if ( ! You are not allowed to view links. Register or Login('BASEPATH')) You are not allowed to view links. Register or Login('No direct script access allowed');
  2.  
  3. class Underc0de extends CI_Controller {
  4.  
  5.    public function index(){
  6.      
  7.    }
  8.  
  9. }
Es importante agregar la primera línea, así no pueden tener acceso por otro lado que no sea directamente nuestra aplicación.
Recuerden que el nombre de la clase comienza con mayúsculas aunque el archivo no comience con mayúsculas, mi archivo se llama ‘underc0de.php’.
No cierren la etiqueta php al final del controlador.

Funciones dentro de un controlador
Por defecto podemos incluir la función llamada “index()” que sería la función que carga al llamar el controlador desde un navegador, ahora si cargamos nuestra web veremos una página en blanco, pero podemos hacer unas modificaciones para entenderlo de mejor manera:
Código: PHP
  1. public function index(){
  2.    echo "Yo inicio inmediatamente";
  3. }
  4.  
  5. public function saludar($nombre = "Usuario de underc0de.org"){
  6.    echo "Hola: ".$nombre;
  7. }

You are not allowed to view links. Register or Login mostrará lo siguiente:
 
You are not allowed to view links. Register or Login mostrará lo siguiente:
 
You are not allowed to view links. Register or Login mostrará lo siguiente:
 
* Es importante que tengan habilitado el módulo de “Rewrite” en sus servidores.
You are not allowed to view links. Register or Login

Práctico 1
Crear un nuevo controlador llamado como tu Nick en el foro de underc0de.org y una función llamada “Jalisco” que reciba un parámetro de entrada numérico.
Al cargar esa función por URL debe imprimir por pantalla el número ingresado, aumentado en una unidad seguido por el mensaje “gané”.
EJEMPLO:
You are not allowed to view links. Register or Login
Debe decir: Yo digo: 8 gané!
You are not allowed to view links. Register or Login
Debe decir: eso no es un número…
(Puedes enviarme tu desarrollo por mensaje privado (PM) a DeBobiPro en el foro: You are not allowed to view links. Register or Login )


Vistas
Las vistas nos ayudarán a darle un toque más llamativo a la parte que el cliente verá, es importante aclarar que no podremos acceder directamente a estas vistas a no ser que pasemos por un controlador que las cargue en nuestra página.
El orden al momento de cargar las vistas debe ser coherente con la programación, lo entenderemos con el siguiente ejemplo:
Trabajaremos en el directorio “views” y creamos 3 archivos: header.php, body.php y footer.php

Header.php
Código: HTML5
  1. <!DOCTYPE html>
  2. <You are not allowed to view links. Register or Login lang="es-ES">
  3. <You are not allowed to view links. Register or Login>
  4.    <You are not allowed to view links. Register or Login charset="UTF-8">
  5.    <You are not allowed to view links. Register or Login>Mi primera WEB con CodeIgniter - Underc0de.org</You are not allowed to view links. Register or Login>
  6. </You are not allowed to view links. Register or Login>

body.php
Código: HTML5
  1. <You are not allowed to view links. Register or Login>
  2.    <You are not allowed to view links. Register or Login>Título</You are not allowed to view links. Register or Login>
  3.    Hola, esto cargó por el Body
  4. </You are not allowed to view links. Register or Login>
  5.  

Footer.php
Código: HTML5
  1. <You are not allowed to view links. Register or Login>
  2.    Visitanos en <You are not allowed to view links. Register or Login href="http://www.underc0de.org">UnderC0de</You are not allowed to view links. Register or Login>
  3. </You are not allowed to view links. Register or Login>
  4. </You are not allowed to view links. Register or Login>

Podemos ver que tenemos una página web partida en 3 partes y en diferentes archivos, esto nos ayudará a mantener encabezados, menús, banners, etc… de manera estática y no tener que escribir el código cada vez que lo necesitemos, simplemente llamando nuestra vista en el lugar correcto.
¿Cómo lo hago…?

Cargando vistas desde un controlador
Volveremos a nuestro controlador previamente creado (en mi caso ‘underc0de.php’) y en la función index() escribiremos las siguientes líneas:
Código: PHP
  1. public function index(){
  2.    $this->load->view('header'); // Esto carga primero
  3.    $this->load->view('body');   // Esto carga segundo
  4.    $this->load->view('footer'); // Esto carga tercero
  5. }
En esta parte es importante el orden que le damos a las vistas.
Cargamos nuestra web del navegador y veremos lo siguiente:
 
Enviando información a las vistas
Para enviar información a las vista creamos un arreglo de esta manera en nuestro controlador:
Código: PHP
  1. public function index(){
  2.    $datos['miembro'] = "DeBobiPro"; //creamos un arreglo
  3.    $this->load->view('header');
  4.    $this->load->view('body',$datos); //Se lo enviamos a la vista
  5.    $this->load->view('footer');
  6. }

Y en la vista tendremos una variable php con el nombre de la asociación de nuestro arreglo con el contenido que le hemos dado, (sí, hablé en Chino, lo entenderás con el ejemplo).

body.php
Código: HTML5
  1. <You are not allowed to view links. Register or Login>
  2.    <You are not allowed to view links. Register or Login>Título</You are not allowed to view links. Register or Login>
  3.    Hola<?= "[".$miembro."]"; ?>, esto cargó por el Body
  4. </You are not allowed to view links. Register or Login>
El nombre asociado al String “DeBobiPro” es “miembro” (ver controlador) y es esa la variable que ahora existe en mi body y que puedo utilizar ($miembro)
¿Fácil, no?

Practico 2
Crear una vista llama “tabla.php” con las cabeceras:
Nombre   Mensaje

Y un controlador que envié el contenido de esa tabla quedando de la siguiente manera:
Nombre   Mensaje
Juan   Saludos!
Catalina   Yo aprendí en underc0de.org!

La estructura para esta tabla es la siguiente:
Código: HTML5
  1. <You are not allowed to view links. Register or Login>
  2.    <You are not allowed to view links. Register or Login>
  3.       <You are not allowed to view links. Register or Login>
  4.          <You are not allowed to view links. Register or Login>Nombre</You are not allowed to view links. Register or Login>
  5.          <You are not allowed to view links. Register or Login>Mensaje</You are not allowed to view links. Register or Login>
  6.       </You are not allowed to view links. Register or Login>
  7.    </You are not allowed to view links. Register or Login>
  8.    <You are not allowed to view links. Register or Login>
  9.       <You are not allowed to view links. Register or Login>
  10.          <You are not allowed to view links. Register or Login>Juan</You are not allowed to view links. Register or Login>
  11.          <You are not allowed to view links. Register or Login>Saludos!</You are not allowed to view links. Register or Login>
  12.       </You are not allowed to view links. Register or Login>
  13.       <You are not allowed to view links. Register or Login>
  14.          <You are not allowed to view links. Register or Login>Catalina</You are not allowed to view links. Register or Login>
  15.          <You are not allowed to view links. Register or Login>Yo aprendí con underc0de.org</You are not allowed to view links. Register or Login>
  16.       </You are not allowed to view links. Register or Login>
  17.    </You are not allowed to view links. Register or Login>
  18. </You are not allowed to view links. Register or Login>
(Puedes enviarme tu desarrollo por mensaje privado (PM) a DeBobiPro en el foro:  You are not allowed to view links. Register or Login )

Modelos
Finalmente y ya llegando al final de este taller, vamos a ver cómo trabajan los modelos, para ello crearemos una tabla en nuestro servidor local de base de datos.
Código: MySQL
  1. You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login EXISTS `miembros` (
  2.   `id_miembro` You are not allowed to view links. Register or Login(11) You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login,
  3.   `nombre` You are not allowed to view links. Register or Login(200) You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login,
  4.   `mensaje` You are not allowed to view links. Register or Login(200) You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login,
  5.   You are not allowed to view links. Register or Login (`id_miembro`)
  6. );

Validar el nombre de la base de datos configurada en el archive database.php

Código: MySQL
  1. You are not allowed to view links. Register or Login You are not allowed to view links. Register or Login `underc0de`.`miembros` (`id_miembro`, `nombre`, `mensaje`) You are not allowed to view links. Register or Login (You are not allowed to view links. Register or Login, 'Juanito', 'Saludos Model!'), (You are not allowed to view links. Register or Login, 'Catalina', 'Aprendí Modelos!');

Teniendo esto ¡ya podemos comenzar!
En nuestro directorio models crearemos un archivo llamado “usuarios_model.php” con el siguiente contenido:
Código: PHP
  1. <?php if ( ! You are not allowed to view links. Register or Login('BASEPATH')) You are not allowed to view links. Register or Login('No direct script access allowed');
  2.  
  3. class Usuarios_model extends CI_Model {
  4.  
  5. }

Y creamos una función llamada obtenerDatos() y atención a las líneas de código:

Código: PHP
  1. public function obtenerDatos(){
  2.    $consulta = $this->db->get('miembros');
  3.    return $consulta->result();
  4. }

$this->db->get(‘miembros’); es equivalente a
Código: MySQL
  1. You are not allowed to view links. Register or Login * You are not allowed to view links. Register or Login miembros;

Y hacemos un return con los resultados, en este momento nuestro modelo no sirve para nada ya que no se puede acceder mediante URL y no lo estamos llamando en ningún controlador, ahora vamos a ello.

Controladores, modelos y vistas
En el controlador underc0de nos ubicamos en la función index() agregando las siguientes líneas:
Código: PHP
  1. public function index(){
  2.    $this->load->model('usuarios_model'); //cargamos nuestro modelo
  3.    $datosmiembros = $this->usuarios_model->obtenerDatos(); //cargamos la      variable con los datos del modelo
  4.  
  5.    $datos['miembro'] = "DeBobiPro";
  6.    $this->load->view('header');
  7.    $this->load->view('body',$datos);
  8.    $this->load->view('footer');
  9. }

Y a modo de ejemplo los enviaremos dentro de una tabla (esto les ayudará para entender mejor el practico 2).
Hay diferentes formas de hacer esta parte, yo les enseñaré una:

Código: PHP
  1. public function index(){
  2.    $this->load->model('usuarios_model'); //cargamos nuestro modelo
  3.    $datosmiembros = $this->usuarios_model->obtenerDatos(); //cargamos la variable con los datos del modelo
  4.  
  5.    $tabla = "";
  6.  
  7.    foreach ($datosmiembros as $fila) {
  8.       $tabla.="<tr>
  9.            <td>".$fila->nombre."</td>
  10.            <td>".$fila->mensaje."</td>
  11.          </tr>";
  12.    }
  13.  
  14.    $datos['tabla'] = $tabla;
  15.    $datos['miembro'] = "DeBobiPro";
  16.    $this->load->view('header');
  17. $this->load->view('body',$datos);
  18.    $this->load->view('footer');
  19. }
Construimos una tabla en nuestro controlador y la enviamos a la vista:

Body.php
Código: HTML5
  1. <You are not allowed to view links. Register or Login>
  2.    <You are not allowed to view links. Register or Login>Título</You are not allowed to view links. Register or Login>
  3.    Hola<?= "[".$miembro."]"; ?>, esto cargó por el Body
  4.    <You are not allowed to view links. Register or Login><You are not allowed to view links. Register or Login>
  5.    <You are not allowed to view links. Register or Login border="1">
  6.       <You are not allowed to view links. Register or Login>
  7.          <You are not allowed to view links. Register or Login>
  8.             <You are not allowed to view links. Register or Login>Nombre</You are not allowed to view links. Register or Login>
  9.             <You are not allowed to view links. Register or Login>Mensaje</You are not allowed to view links. Register or Login>
  10.          </You are not allowed to view links. Register or Login>
  11.       </You are not allowed to view links. Register or Login>
  12.       <You are not allowed to view links. Register or Login>
  13.          <?= $tabla;  ?>
  14.       </You are not allowed to view links. Register or Login>
  15.    </You are not allowed to view links. Register or Login>
  16.    <You are not allowed to view links. Register or Login><You are not allowed to view links. Register or Login>
  17. </You are not allowed to view links. Register or Login>
Y cargamos nuestra variable $tabla donde corresponde, obteniendo el siguiente resultado:

Despedida
Hemos llegado al final de la segunda parte de nuestro taller de CodeIgniter y Bootstrap, espero que les sea de utilidad lo expuesto y a practicar mucho ahora!!

En la tercera entrega veremos cómo se comportan estos 2 frameworks trabajando en conjunto.


You are not allowed to view links. Register or Login



Desconectado nikolai47

  • *
  • Underc0der
  • Mensajes: 18
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

Re:Taller de Programación Web #2

  • en: Abril 06, 2015, 06:06:25 pm
Lo mismo que la 1º parte, muchas gracias.
Te animo a que sigas con este taller y lo publicaré entre los que se quieran iniciar que conozco.

Desconectado blackdrake

  • *
  • Co Admin
  • Mensajes: 1951
  • Actividad:
    13.33%
  • Country: es
  • Reputación 16
    • Ver Perfil

Re:Taller de Programación Web #2

  • en: Abril 07, 2015, 10:41:47 am
You are not allowed to view links. Register or Login
Lo mismo que la 1º parte, muchas gracias.
Te animo a que sigas con este taller y lo publicaré entre los que se quieran iniciar que conozco.

El autor es DebobiPro, no todos los talleres los hace Antrax, de todas formas, estoy seguro de que se continuará.

Saludos.


Desconectado DeBobiPro

  • *
  • Moderador
  • Mensajes: 327
  • Actividad:
    13.33%
  • Reputación 6
  • Como no sabía que era imposible, lo hice.
    • Ver Perfil

Re:Taller de Programación Web #2

  • en: Abril 07, 2015, 12:30:41 pm
Aquí estoy por si tienen dudas y abierto a temas que quieran trabajar para hacer tutoriales :D
Nivel 77 You are not allowed to view links. Register or Login

Desconectado nikolai47

  • *
  • Underc0der
  • Mensajes: 18
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

Re:Taller de Programación Web #2

  • en: Abril 07, 2015, 03:59:17 pm
Que me perdone el autor que ayer postee a las prisas y ya luego leyendo el pdf tranquilamente fue cuando me di cuenta.
Respecto al PDF, pude encontrar algún que otro error tipográfico que no sé si se debe al cambiar el formato o a un despiste.
Si el autor quiere puedo reportárselo.
Un saludo y buen trabajo

Desconectado ChristianGro

  • *
  • Underc0der
  • Mensajes: 6
  • Actividad:
    0%
  • Reputación 0
  • Skype: Blackwave39
    • Ver Perfil
    • Email

Re:Taller de Programación Web #2

  • en: Abril 08, 2017, 12:40:01 am
Muy bueno ANTRAX!

 Te animo a que sigas con este taller!
« Última modificación: Abril 08, 2017, 11:44:31 am por Gabriela »

Desconectado Elburgues

  • *
  • Underc0der
  • Mensajes: 1
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

Re:Taller de Programación Web #2

  • en: Noviembre 16, 2019, 10:40:13 am
You are not allowed to view links. Register or Login
.

Buenas, ya se que como usuario nuevo no tengo mucho derecho a molestar/citar por aqui, pero estoy aprendiendo y he intentado acceder al Taller de Programación Web #1 y no esta disponible, supongo que habreis hecho cambios en la web y se os ha pasado poner bien los enlaces en el listado de talleres,tampoco esta en la raiz del foro. Estoy interesado en hacer el dos, pero me gustaria ir paso a paso y completar primero el uno, por temas de no empezar la casa por el tejado y eso...

Gracias y que sepas que estos talleres son oro para el que sepa apreciarlos, me han ayudado y me van a ayudar bastante en la carrera.
« Última modificación: Noviembre 16, 2019, 10:41:52 am por Elburgues »

 

Taller de pentesting con Kali Linux - Parte I

Iniciado por ANTRAX

Respuestas: 59
Vistas: 54883
Último mensaje Abril 12, 2020, 11:53:45 pm
por t4k30v3r
Taller de Pentesting con Kali Linux #2

Iniciado por ANTRAX

Respuestas: 32
Vistas: 32987
Último mensaje Noviembre 10, 2017, 07:40:18 am
por Brittsman97
Taller de Seguridad Wireless #5

Iniciado por ANTRAX

Respuestas: 18
Vistas: 16314
Último mensaje Septiembre 30, 2019, 01:12:06 pm
por Layer8N00b.CL
Taller de Seguridad Wireless #2

Iniciado por ANTRAX

Respuestas: 9
Vistas: 12556
Último mensaje Mayo 26, 2015, 03:05:38 pm
por Mich
Taller de Seguridad Wireless #4

Iniciado por ANTRAX

Respuestas: 24
Vistas: 26683
Último mensaje Mayo 24, 2018, 03:06:03 am
por VYP3R