Después de la primera configuración de Codeigniter y de ver un poco sus carpetas crearemos un poco la interfaz de lo que seria nuestro sitio web.Para eso usaremos bootstrap Twitter que ya explicamos en el primer manual de que trataba.

DESCARGA E INSTALACIÓN DE BOOTSTRAP

Para descargar bootstrap entraremos en su pagina web:

http://twitter.github.io/bootstrap/

Una vez descargado y abierto nos encontramos que tiene la misma estructura de archivos que creamos en el anterior tutorial.

codeigniter

Copiamos y pegamos en la raíz nuestro proyecto.

CREACION DE UNA PLANTILLA

Una vez tengamos descargado y colocado bootstrap en nuestro proyecto crearemos un controlador nuevo llamado acerca_de para que tengamos en nuestro sitio una página que nos explique un poco de que va y así podremos jugar mas adelante con la vista.

Creamos la vista acerca_de, por ahora podemos usar index.php y guardarla con otro nombre.

Si se fijan, al guardar el mismo html se guarda también el css, para evitar tener que cambiar en todos los .html el css crearemos un Template (plantilla) al cual le añadiremos todo lo que deben contener todas las paginas en tema de diseño y donde queramos que cambie el contenido llamaremos a la pagina en cuestión que será acerca_de.php o index.php en nuestro caso.

Empezamos por crear una vista en la carpeta views con el nombre template.php y añadimos el siguiente código que hemos recogido de la pagina de bootstrap y lo hemos adaptado:

Cosas que aclarar de el código de arriba:

  • base_url: Esta función de codeigniter se usa para la llamada desde la raíz de la carpeta a cualquier cosa que necesitemos.
  • jquery: Necesitaremos la ultima versión, si se fijan se ha cambiado de la documentación oficial de bootstrap que lo llama online a interno a través de base_url. Para que eso funcione únicamente tenemos que ir a la pagina del código de Jquery y guardar ese código con el nombre jquery.js dentro de la carpeta js.

En estos momentos tenemos creado nuestro template pero nos faltaría llamar al contenido de index.php y acerca_de, para hacer eso tendríamos que crear una variable dentro de la array $data que llamaremos $contenido  en la carpeta controladores y que le daremos la ruta según si queramos que sea una u otra pagina. A la hora de cargar la vista le tendremos que pasar la array $data:

Lo único que nos queda para que nos cargue la pagina en cuestión es llamar a la array en la vista, lo colocaremos dentro del segundo div:

Borramos todo de las paginas acerca_de y index y colocamos solo el nombre de cada una en encabezado 1. Ejemplo de index:

Si quieren podemos jugar un poco con el css de bootstrap para que vean que funciona (solo por curiosidad):

Probamos a ver como queda acerca_de:

codeigniter

TEMAS BOOTSTRAP

Hay diferentes paginas que nos ofrecen temas para bootstrap, algunos gratuitos y otros no. Al descargarlo verán que tienen el mismo formato que bootstrap original, únicamente es necesario sobrescribir.

Aquí algunos links:

PROYECTO

Descargar proyecto completo hasta ahora (Juan Manuel)

MANUALES CODEIGNITER

The following two tabs change content below.
Programador por definición, diseñador por hobby, futuro Ingeniero Informático y amante de lo sencillo.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies. CERRAR