PHP / Bootstrap y HTML

Bienvenidos sean a este post, hoy pondremos en practica uno de los conceptos que vimos anteriormente.

Si no lo tienen les recomiendo visitar este post donde esta toda la estructura de nuestro proyecto y los archivos que generamos nosotros, en este post vimos como instalar todos los componentes necesarios pero en todo caso la primera vez que carguen la pagina deberia solicitarles instalar el composer, para habilitarlo simplemente desde el directorio raiz del proyecto debemos ejecutar este comando desde una terminal para iniciar nuestro servidor:

$ php -S localhost:8000 -t webroot

Si lo iniciamos y ejecutamos desde un navegador la direccion http://localhost:8000/ veremos la siguiente pagina:

Si tienen esta pagina esta todo perfecto, como mencionamos en el post anterior en nuestro proyecto tenemos un path relativo y debemos cambiarlo por un path absoluto pero primero debemos definir a las constantes que necesitaremos, para ello debemos ir al archivo index.php en el directorio webroot, y agregaremos el siguiente bloque antes de la definicion de la constante ENTORNO:

defined('DS') || define('DS', DIRECTORY_SEPARATOR);
define('APPDIR', realpath(__DIR__.'/../app/').DS);
define('SYSTEMDIR', realpath(__DIR__.'/../system/').DS);
define('PUBLICDIR', realpath(__DIR__).DS);
define('ROOTDIR', realpath(__DIR__.'/../').DS);

La primera linea verifica si esta definido DS, en caso contrario definiremos a DS como la constante DIRECTORY_SEPARATOR, esta es una constante que representa al separador predeterminado del S.O, recuerden que Linux y Windows usan distintos, lo siguiente sera definir las distintas constantes que usaremos en el codigo, para ello usaremos a define, en todos los casos asignaremos primero el nombre que lo representa, luego usaremos a la funcion realpath la cual nos devolvera el nombre de la ruta absoluta canonizada, luego le adicionaremos el path relativo para que vaya al que le corresponde, y por ultimo el separador de archivos (DS), esa es la estructura de cada una de las definiciones, veamos a que se refiere cada constante:

• APPDIR, sera el directorio de app
• SYSTEMDIR, sera el directorio de system
• PUBLICDIR, sera el directorio webroot
• ROOTDIR, sera el directorio raiz de nuestro proyecto

Recuerden que index.php esta en el directorio webroot por lo tanto para salir de este siempre debemos usar los dos puntos (..) y despues el directorio a donde queremos ir, salvo para el caso de PUBLICDIR porque es donde debemos estar y ROOTDIR que es el directorio anterior, si se preguntan por el valor que realpath posee, les dejo uno de ejemplo:

/home/tinchicus/lenguajes/PHP/proyecto/webroot

Por ultimo les dejo el codigo final por el momento de index.php:

index.php

<?php
if(file_exists('../vendor/autoload.php')){
	require '../vendor/autoload.php';
} else {
	echo "<h1>Por favor instalalo via composer.json</h1>";
	echo "<p>Instrucciones del Composer: <a href='https://getcomposer.org/doc/00-intro.md#globally'>https://getcomposer.org/doc/00-intro.md#globally</a></p>";
	echo "<p>Una vez que se instalo ve al directorio de trabajo en tu terminal o prompt de comando e ingresa 'composer.phar install'</p>";
	exit;
}

defined('DS') || define('DS', DIRECTORY_SEPARATOR);
define('APPDIR', realpath(__DIR__.'/../app/').DS);
define('SYSTEMDIR', realpath(__DIR__.'/../system/').DS);
define('PUBLICDIR', realpath(__DIR__).DS);
define('ROOTDIR', realpath(__DIR__.'/../').DS);

define('ENTORNO', 'desarrollo');

if (defined('ENTORNO')){

	switch (ENTORNO){
		case 'desarrollo':
			error_reporting(E_ALL);
		break;

		case 'produccion':
			error_reporting(0);
		break;

		default:
			exit('El entorno no esta configurado correctamente.');
	}

}

$config = App\Config::get();

new System\Route($config);

Nuestro siguiente paso sera la modificacion del archivo View.php en el directorio system, en este caso debemos modificar la siguiente linea:

$patharchivo = "../app/Views/$path.php";

De esta forma:

$patharchivo = APPDIR . "Views/$path.php";

Ahora nuestra variable paso de un path relativo a un path absoluto que con solo modificar el valor de la constante se aplicara automaticamente, nuestro siguiente paso sera crear un nuevo directorio dentro del directorio Views en app al cual llamaremos layouts, en este crearemos los siguientes archivos:

• errores.php
• footer.php
• header.php
• nav.php

Con nuestros archivos creados pasemos a completarlos, para ello debemos ir al archivo errores.php y agreguemos el siguiente codigo:

errores.php

<?php

use App\Helpers\Sesion;

if (isset($errores))
{
        foreach($errores as $error)
                echo "<div class='alerta alerta-peligro'>$error</div>";
}

if (Sesion::get('exito'))
{
        echo "<div class='alerta alerta-exito'>" . 
                Sesion::quitar('exito') . "</div>";
}

En este caso utilizamos un namespace que implementaremos mas adelante en otro post, el primer condicional verifica si errores tiene algun valor, en caso de ser verdadero pasara por todos los elementos almacenados en este y nos lo mostrara en pantalla, el siguiente si utiliza a la clase que aun no tenemos y en caso de tener exito nos mostrara en pantalla el contenido, este sera usado para proporcionar informacion al usuario, pasemos al archivo header.php y agreguemos el siguiente codigo:

header.php

<!doctype html>
<html lang="sp">
<head>
<meta charset="utf-8">
<title><?=(isset($titulo) ? $titulo.' - ':'');?> Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="contenedor">

Nota:
Si ven de forma distinta el codigo con respecto a los otros casos es porque se me modifica una parte automaticamente y generara un error.

Como pueden ver este archivo sera el encabezado para todas nuestras paginas, lo mas interesante de esta pagina estan en la parte del titulo (title) donde si lo pasamos un valor a ese argumento lo veremos en el titulo de la pagina, de lo contrario solo aparecera la palabra Demo, luego tenemos un link externo donde sera para obtener la parte de CSS del bootstrap, el siguiente sera un CSS nuestro que se encontrara en el directorio webroot pero de eso hablaremos luego, despues tenemos dos llamados de script, el primero nos traera a Jquery y el segundo para el bootstrap, por ultimo inicia un div llamado contenedor, vayamos al archivo nav.php y agreguemos el siguiente codigo:

nav.php

<nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Navigacion alternativa</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">El proyecto</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/">Admin</a></li>
          <li><a href="/usuarios">Usuarios</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/admin/logout">Salir</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
</nav>

Basicamente lo que haremos aqui es crear una barra de navegacion de bootstrap, estara compuesto por varios div y span para establecer las capas y los elementos que veremos en los mismos, por el momento sera una simple barra de navegacion pero en un proximo post veremos las paginas de admin y usuarios asi como para salir de la sesion, por ultimo vamos al archivo footer.php y agreguemos el siguiente codigo:

footer.php

</div>
</body>
</html>

Como pueden ver sera simplemente el final del archivo para cerrar todo lo que empezamos con nuestro archivo header.php, por ultimo debemos ir a nuestro archivo 404.php y en el cambiaremos el texto original por el siguiente:

404.php

<?php include(APPDIR . 'Views/layouts/header.php'); ?>
404!
<?php include(APPDIR . 'Views/layouts/footer.php'); ?>

En este caso simplemente le pasamos el archivo de header y footer que creamos anteriormente, estos en teoria armaran el encabezado y final del archivo, asi como en este archivo no necesita de la barra de navegacion por lo tanto solo pasamos estos dos archivos, con todo esto comentado podemos pasar a probarlo, si utilizan la direccion original no veran ninguna diferencia pero si utilizan la siguiente direccion:

http://localhost:8000/ejemplo

Debera devolvernos la siguiente ventana:

Pero si hacemos click con el boton derecho y seleccionamos «Ver codigo fuente» o «View source code» veremos lo siguiente:

Podemos ver que nos trajo todo el codigo que agregamos en los archivos que creamos, esto sucedera siempre que usemos a include para llamarlos, si lo lograron Felicitaciones!!! hemos hecho el primer paso para automatizar ciertos pasos pero esto es solo el comienzo.

En resumen, hoy hemos visto como incluir bootstrap en nuestra pagina, hemos hecho todas las modificaciones necesarias, hemos agregado todos los archivos necesarios, hemos visto los codigos de los mismos y por el momento solamente lo hemos puesto en practica para el archivo 404 pero proximamente lo veremos mejor, espero les haya gustado sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Donación

Es para mantenimento del sitio, gracias!

$1.50