This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

Taller de Programación Web #2

  • 8 Replies
  • 9369 Views

0 Members and 1 Guest are viewing this topic.

Online ANTRAX

  • *
  • Administrator
  • Posts: 5802
  • Actividad:
    100%
  • Country: ar
  • Reputación 42
  • ANTRAX
  • Twitter: @Underc0de
    • View Profile
    • Underc0de
    • Email

Taller de Programación Web #2

  • on: April 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:
Code: (text) You are not allowed to view links. Register or Login
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:
Code: (text) You are not allowed to view links. Register or Login
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>
<IfModule !mod_rewrite.c>
ErrorDocument 404 /index.php
</IfModule>

De esta manera  podremos utilizar:
Code: (text) You are not allowed to view links. Register or Login
http://www.tuweb.com/controlador/
En vez de:
Code: (text) You are not allowed to view links. Register or Login
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:
Code: (text) You are not allowed to view links. Register or Login
[+] - Directorio
 | --[+] application
 | --[+] system
 | --    index.php
 | --    .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
Code: (php) You are not allowed to view links. Register or Login
$autoload['libraries'] = array('database','session');
$autoload['helper'] = array('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
Code: (php) You are not allowed to view links. Register or Login
$config['index_page'] = '';
$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
Code: (php) You are not allowed to view links. Register or Login
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'underDB';
Ustedes completan con la información correcta.

routes.php
Code: (php) You are not allowed to view links. Register or Login
$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
Code: (php) You are not allowed to view links. Register or Login
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class 
Underc0de extends CI_Controller {

public function index(){

}

}
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:
Code: (php) You are not allowed to view links. Register or Login
public function index(){
echo "Yo inicio inmediatamente";
}

public function saludar($nombre = "Usuario de underc0de.org"){
echo "Hola: ".$nombre;
}

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
Code: (html5) You are not allowed to view links. Register or Login
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Mi primera WEB con CodeIgniter - Underc0de.org</title>
</head>

body.php
Code: (html5) You are not allowed to view links. Register or Login
<body>
<h1>Título</h1>
Hola, esto cargó por el Body
</body>

Footer.php
Code: (html5) You are not allowed to view links. Register or Login
<footer>
Visitanos en <a href="http://www.underc0de.org">UnderC0de</a>
</footer>
</html>

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:
Code: (php) You are not allowed to view links. Register or Login
public function index(){
$this->load->view('header'); // Esto carga primero
$this->load->view('body');   // Esto carga segundo
$this->load->view('footer'); // Esto carga tercero
}
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:
Code: (php) You are not allowed to view links. Register or Login
public function index(){
$datos['miembro'] = "DeBobiPro"; //creamos un arreglo
$this->load->view('header');
$this->load->view('body',$datos); //Se lo enviamos a la vista
$this->load->view('footer');
}

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
Code: (html5) You are not allowed to view links. Register or Login
<body>
<h1>Título</h1>
Hola<?= "[".$miembro."]"; ?>, esto cargó por el Body
</body>
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:
Code: (html5) You are not allowed to view links. Register or Login
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Mensaje</th>
</tr>
</head>
<tbody>
<tr>
<th>Juan</th>
<th>Saludos!</th>
</tr>
<tr>
<th>Catalina</th>
<th>Yo aprendí con underc0de.org</th>
</tr>
</tbody>
</table>
(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.
Code: (mysql) You are not allowed to view links. Register or Login
CREATE TABLE IF NOT EXISTS `miembros` (
  `id_miembro` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(200) NOT NULL,
  `mensaje` varchar(200) NOT NULL,
  PRIMARY KEY (`id_miembro`)
);

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

Code: (mysql) You are not allowed to view links. Register or Login
INSERT INTO `underc0de`.`miembros` (`id_miembro`, `nombre`, `mensaje`) VALUES (NULL, 'Juanito', 'Saludos Model!'), (NULL, 'Catalina', 'Aprendí Modelos!');
Teniendo esto ¡ya podemos comenzar!
En nuestro directorio models crearemos un archivo llamado “usuarios_model.php” con el siguiente contenido:
Code: (php) You are not allowed to view links. Register or Login
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class 
Usuarios_model extends CI_Model {

}

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

Code: (php) You are not allowed to view links. Register or Login
public function obtenerDatos(){
$consulta = $this->db->get('miembros');
return $consulta->result();
}

$this->db->get(‘miembros’); es equivalente a
Code: (mysql) You are not allowed to view links. Register or Login
SELECT * FROM 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:
Code: (php) You are not allowed to view links. Register or Login
public function index(){
$this->load->model('usuarios_model'); //cargamos nuestro modelo
$datosmiembros = $this->usuarios_model->obtenerDatos(); //cargamos la      variable con los datos del modelo

$datos['miembro'] = "DeBobiPro";
$this->load->view('header');
$this->load->view('body',$datos);
$this->load->view('footer');
}

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:

Code: (php) You are not allowed to view links. Register or Login
public function index(){
$this->load->model('usuarios_model'); //cargamos nuestro modelo
$datosmiembros = $this->usuarios_model->obtenerDatos(); //cargamos la variable con los datos del modelo

$tabla = "";

foreach ($datosmiembros as $fila) {
$tabla.="<tr>
<td>".$fila->nombre."</td>
<td>".$fila->mensaje."</td>
</tr>";
}

$datos['tabla'] = $tabla;
$datos['miembro'] = "DeBobiPro";
$this->load->view('header');
$this->load->view('body',$datos);
$this->load->view('footer');
}
Construimos una tabla en nuestro controlador y la enviamos a la vista:

Body.php
Code: (html5) You are not allowed to view links. Register or Login
<body>
<h1>Título</h1>
Hola<?= "[".$miembro."]"; ?>, esto cargó por el Body
<br><br>
<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Mensaje</th>
</tr>
</thead>
<tbody>
<?= $tabla;  ?>
</tbody>
</table>
<br><br>
</body>
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



Offline nikolai47

  • *
  • Underc0der
  • Posts: 18
  • Actividad:
    0%
  • Reputación 0
    • View Profile

Re:Taller de Programación Web #2

  • on: April 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.

Offline blackdrake

  • *
  • Co Admin
  • Posts: 2005
  • Actividad:
    26.67%
  • Country: es
  • Reputación 23
    • View Profile

Re:Taller de Programación Web #2

  • on: April 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.


Offline DeBobiPro

  • *
  • Ex-Staff
  • *****
  • Posts: 328
  • Actividad:
    0%
  • Reputación 6
  • Como no sabía que era imposible, lo hice.
    • View Profile

Re:Taller de Programación Web #2

  • on: April 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

Offline nikolai47

  • *
  • Underc0der
  • Posts: 18
  • Actividad:
    0%
  • Reputación 0
    • View Profile

Re:Taller de Programación Web #2

  • on: April 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

Offline ChristianGro

  • *
  • Underc0der
  • Posts: 6
  • Actividad:
    0%
  • Reputación 0
    • View Profile
    • Email

Re:Taller de Programación Web #2

  • on: April 08, 2017, 12:40:01 am
Muy bueno ANTRAX!

 Te animo a que sigas con este taller!
« Last Edit: April 08, 2017, 11:44:31 am by Gabriela »

Offline Elburgues

  • *
  • Underc0der
  • Posts: 1
  • Actividad:
    0%
  • Reputación 0
    • View Profile

Re:Taller de Programación Web #2

  • on: November 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.
« Last Edit: November 16, 2019, 10:41:52 am by Elburgues »

Offline HazumiSuzuki

  • *
  • Underc0der
  • Posts: 1
  • Actividad:
    0%
  • Country: ve
  • Reputación 0
    • View Profile

Re:Taller de Programación Web #2

  • on: August 27, 2020, 10:14:41 pm
Excelente aporte, pero no encuentro  "Programacion Web #1" muchas gracias, espero que lo agreguen para los nuevos usuarios.
 ;) ;)

Offline DeBobiPro

  • *
  • Ex-Staff
  • *****
  • Posts: 328
  • Actividad:
    0%
  • Reputación 6
  • Como no sabía que era imposible, lo hice.
    • View Profile

Re:Taller de Programación Web #2

  • on: August 27, 2020, 10:18:30 pm
Hola [email protected]!

Me parece que esta la parte uno, pero de todas formas si requieres, puedes crear un topic con dudas y te podemos ayudar!

Además hoy hay más herramientas que en la fecha de creación de este!

Un saludo!
Nivel 77 You are not allowed to view links. Register or Login