Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Cargar otras páginas de contenido dentro de la misma página con PHP
Actualizado el 08 Mayo, 2015 y leído 17,732 veces
Calificación: 10.00 / 10

Cargar otras páginas de contenido dentro de la misma página con PHP

Anexsoft

En esta entrada vamos a ver como navegar entre varias páginas reuitlizando código HTML como el header y el footer porque este usualmente siempre es el mismo para toda nuestra web, este concepto lo conocemos como layout.

Nuestra URL puede ser algo como esta index.php?p=inicio, la cual quiere decir que la página que queremos visualizar es la de inicio. Para nuestro ejemplo hemos creado tres páginas:

  • Inicio (index.php?p=inicio)

  • Nosotros (index.php?p=nosotros)

  • Contacto (index.php?p=contacto)


¿Por qué trabajamos de esta manera?, para evitar tener que repetir todo nuestro código HTML en los archivos de: inicio.php, nosotros.php y contacto.php.

¿Que es el "?p=inicio"?, este es un valor que estamos pasando por la URL (queyString) el cual nos va a servir para saber que página cargar.


La estructura de nuestro proyecto:

  • assets, todo el codigo js, css va a en esta carpeta

  • index.php, el primer script en ejecutarse al entrar a la web

  • pagina, dentro guardaremos todas las páginas adicionales


Lo primero que hacemos es crear el archivo header y footer

header - "pagina/header.php"

<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de navegación usando Bootstrap 3 y PHP</title>
<meta name="viewport" maximum-scale=1,> <meta charset="utf-8" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />

<style>body{padding-top:30px;}</style>
</head>
<body>

<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="<?php echo $pagina == 'inicio' ? 'active' : ''; ?>"><a href="?p=inicio">Inicio</a></li>
<li class="<?php echo $pagina == 'nosotros' ? 'active' : ''; ?>"><a href="?p=nosotros">Nosotros</a></li>
<li class="<?php echo $pagina == 'contacto' ? 'active' : ''; ?>"><a href="?p=contacto">Contacto</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Tengan en cuenta que aquí estamos maquetando los enlaces de navegación, debemos usar el "?" para decirle a la URL que vamos a enviar parámetros, y nuestro parámetro a enviar se llama "p", luego especificamos que valor queremos que tenga la variable "p" mediante un "=". De esta creamos el menú para la navegación.

Luego hacemos una validación para saber en que página estamos, este es un tema estético ya que queremos dejar marcado el botón de la página actual.


<ul class="nav navbar-nav">
<li class="<?php echo $pagina == 'inicio' ? 'active' : ''; ?>"><a href="?p=inicio">Inicio</a></li>
<li class="<?php echo $pagina == 'nosotros' ? 'active' : ''; ?>"><a href="?p=nosotros">Nosotros</a></li>
<li class="<?php echo $pagina == 'contacto' ? 'active' : ''; ?>"><a href="?p=contacto">Contacto</a></li>
</ul>

La variable "$pagina" la encontraremos seteada en el archivo "index.php".


footer - "pagina/footer.php"

<footer class="well well-sm text-center">
Ejemplo desarrollado por <a href="http://anexsoft.com">Anexsoft</a>
</footer>

</div>

</body>
</html>


Luegos las otras páginas, la cual no pongo el código para no alargar el post. Este lo pueden visualizar descargando el ejempo más abajo.


Lógica para crear la navegación

En nuestro archivo index.php vamos a crear toda la lógica para realizar esta acción.

<?php

// Pequeña lógica para capturar la pagina que queremos abrir
$pagina = isset($_GET['p']) ? strtolower($_GET['p']) : 'inicio';

// El fragmento de html que contiene la cabecera de nuestra web
require_once 'paginas/header.php';


/* Estamos considerando que el parámetro enviando tiene el mismo nombre del archivo a cargar, si este no fuera así
se produciría un error de archivo no encontrado */
require_once 'paginas/' . $pagina . '.php';

// Otra opción es validar usando un switch, de esta manera para el valor esperado le indicamos que página cargar


// El fragmento de html que contiene el pie de página de nuestra web
require_once 'paginas/footer.php';

Como ven el código, hacemos un isset para validar que el parámetro en la URL exista y podamos cargar la página seleccionada, del caso contrario cargamos la página por defecto.


NOTA: solo se ha agregado los CSS de Bootstrap 3, para usar todo el framework completo agreguen el archivo "JS" y de jQuery.


DEMO: http://anexsoft.com/tutoriales/navegacion

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.