RSS

Sistema CRUD en Codeigniter 2/11

28 Dic

En esta entrega vamos a hacer dos cosas importantes que también se hacen solo una vez y que ayuda mucho al momento de codear. Lo primero es agregar bootstrap y lo segundo es una estructura de vistas que separen el header, body y footer de nuestra aplicación.

crud_2

Empecemos agregando bootstrap, se hace así:

Creamos una carpeta en la raíz del proyecto que se llame assets (en realidad la pueden llamar como quieran pero este nombre de carpeta para referirse a donde están los css, js e imágenes es muy utilizado). Dentro de la misma, creamos 3 carpetas que serán css, js e images. Quedaría algo así:

assets3

Lo siguiente es bajar bootstrap y obtenemos un bootstrap.css y bootstrap.js, y lo ponemos en su correspondiente carpeta. No olvidar que se debe agregar también jquery en js.


Ahora lo que vamos a hacer es estructurar las vistas para que sea más fácil manipularlas en el controlador.

La siguiente imagen explica que el header de la aplicación no cambia, después de donde se define el menú está el cuerpo de lo que mostramos al usuario en esa sección y esto siempre es cambiante, el footer es algo que generalmente no cambia Veamos esta imagen:

body

Lo que vamos a hacer es separar este código y ponerlo en vistas de manera ordenada para que al momento de llamarlo en nuestro controlador, sea sencillo de hacer.

De esta forma es que se separará el código anterior:

body2

Creamos dentro de la carpeta views dos carpetas: headfoot y body (yo las nombro así pero ustedes pueden darle el nombre descriptivo que quieran).

Ahora bien, dentro de headfoot creamos dos archivos: header.php y footer.php:

header.php contiene:

<!DOCTYPE html>
 
<html lang="es">
 
  <head>
      <!-- Links a los css y demás cosas -->
      <!-- De esta forma se llama a los css -->
      <link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/bootstrap.css">
  </head>
   
  <body>

<header>
         <!-- Menú del sitio/aplicación -->
         <!-- Generalmente esto no cambia -->
         Hola header
      </header>

footer.php contiene:


<footer>
          <!-- Generalmente esto no cambia -->
      </footer>

  </body>
  <!-- Aquí cargar los js -->
  <!-- Así se llaman a los js -->
  <script src="<?php echo base_url();?>assets/js/jquery-1.10.2.js"></script>
  <script src="<?php echo base_url();?>assets/js/bootstrap.js"></script>
</html>

En body ponemos:


<section>
           <!-- Esta parte siempre cambia -->
           <!-- en cada sección a la que se -->
           <!-- mueva el usuario por el menú -->
  </section>

De este modo ya tenemos separado todo el código y ahora vamos a ver el controlador nuestro controlador por dedafult que llamamos Incio.php en la carpeta controllers y llamaremos a estas 3 vistas de la siguiente forma:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Inicio extends CI_Controller {

	public function index(){
            //load->view te pone en la carpeta views
            //puedes llamar con ruta absoluta desde views a tus carpetas
	    $this->load->view('headfoot/header');
	    $this->load->view('body/inicio');
	    $this->load->view('headfoot/footer');
	}
}

Se vería esto al momento:

modulo2_1

Hasta aquí dejamos este segundo módulo, te recuerdo que puedes bajar el zip con este módulo. Te sugiero como práctica, separar más el código del html y llamarlo en el controlador.

Espero que me quieras compartir tus avances en ringhugos@gmail.com o enviarme una foto de tu avance en whatsapp, mi número lo puedes ver en el footer de mi sitio huguidugui.com

 
Deja un comentario

Publicado por en 28 diciembre, 2016 en Codeigniter, PHP

 

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: