Archive for month: January, 2009

29Jan 2009 31 Comments

Diseño web modular PHP chau frames

Categories: CSS, Diseño, PHP - Tags: , , ,

¿Por qué debemos olvidarnos de los frames?

Los viejos frames funcionan bien pero google, yahoo y ningún buscador los indexa bien, así que perdemos ranking y será muy raro que aparezcamos en un buscador, además no nos permiten disfrutar de las ventajas del CSS.

¿Qué es diseño web modular?

Para reemplazar a los viejos frames, es mejor usar PHP y separar las secciones de nuestra página web en módulos, en castellano la vamos trozar como pollo, de tal forma que cada pedazo contenga la estructura de la página:

  • top_page.php Aqui vamos a poner todos los encabezados html
  • header.php Aqui vamos a poner el encabezado de nuestra página, es decir el título y el menú
  • footer.php Aqui vamos a poner la parte de abajo de nuestra página nuestro copyright, links, etc

top_page.php

Primero todo header del html, nuestro titulo, hoja de estilos

1
2
3
4
5
6
7
8
9
<!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>Mi pagina modular</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">

header.php

Aqui vamos a poner nuestro encabezado y menu

1
2
3
4
5
6
7
8
<div id="header">
</div>
<div id="menu">
    <a href="#">Homepage</a>&nbsp;&nbsp;|&nbsp;&nbsp;    
    <a href="#">About Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#">Services</a>&nbsp;&nbsp;|&nbsp;&nbsp;
    <a href="#">Contact Us</a>
</div>

footer.php

Aqui la parte final de nuestra página web

1
2
3
4
5
6
<div id="footer">
    Visita <a href="http://www.miguelmanchego.com" target="_blank">el Blog</a> para aprender diseño
</div>
</div>
</body>
</html>

¿Cómo lo junto todo?

Pues usando includes vamos a pegar todas esas partes que se repiten en nuestra página web, y quedaría algo asi

1
2
3
4
5
6
<?php include("includes/top_page.php"); ?>
<?php include("includes/header.php"); ?>
<div id="contenido">
  <p>Nuestro texto va aqui</p>
</div>
<?php include("includes/footer.php"); ?>

Aquí he descrito la forma más simple de hacer web modular pero no es la mejor forma, sobre todo a la hora de usar frienly url, o cuando tenemos muchas páginas, por lo que te sugiero leer la segunda parte de este tutorial

21Jan 2009 46 Comments

DropDown menu desplegable ajax

Categories: AJAX - Tags: , ,

En este tutorial voy a explicar como crear un menú desplegable de múltiples niveles, es decir el menu, submenu, los submenus de ese submenu y así sucesivamente y todo eso usando jquery.

Creando el menu

Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li dentro un div contenedor llamado “menu”

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
<div id="menu">
<ul id="nav">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Servicios</a>
        <ul class="submenu">
            <li><a href="#">Marketing</a>
                <ul class="subsubmenu">
                    <li><a href="#">Precios</a></li>
                    <li><a href="#">Consultas</a></li>
                </ul>
            </li>
            <li><a href="#">Mercadotecnia</a></li>
            <li><a href="#">Encuestas</a></li>
        </ul>
    </li>
    <li><a href="#">Nosotros</a>
        <ul class="submenu">
            <li><a href="#">Vision</a></li>
            <li><a href="#">Mision</a></li>
        </ul>
    </li>
    <li><a href="#">Otros</a></li>
    <li><a href="#">Contactanos</a></li>
</ul>
</div>

Jquery para el menu ajax

Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
function mainmenu(){
// Oculto los submenus
$(" #nav ul ").css({display: "none"});
// Defino que submenus deben estar visibles cuando se pasa el mouse por encima
$(" #nav li").hover(function(){
    $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        $(this).find('ul:first').slideUp(400);
    });
}
$(document).ready(function(){
    mainmenu();
});
</script>

La hoja de estilos del dropdown

He diseñado una hoja de estilos que puedas modificar fácilmente tanto para el menu, submenu y en segundo submenu pero recuerda que puedes crear cualquier cantidad de submenus

1
2
3
4
5
6
7
8
9
10
11
12
13
* { padding:0px; margin:0px; }
body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; }
#menu { background-image:url(nav_bg.png); background-repeat:repeat-x; height:30px; width:500px; margin:auto; padding-left:70px; }
#nav { list-style:none; }
#nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right; }
#nav li a { display:block; padding:7px 10px; text-decoration:none; color:#CCCCCC; font-weight:bold; }
#nav li a:hover { color:#FFFFFF; }
/* Submenu */
#nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;}
#nav ul.submenu li { float:none; background-image:none; border-bottom:1px solid #999999; width:200px;}
/* Subsubmenu */
#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;}
#nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;}

Y eso sería todo.






20Jan 2009 2 Comments

Ajax enviar formularios sin recargar jquery

Categories: AJAX, PHP - Tags: , ,

En un post anterior expliqué como actualizar un elemento de la página sin recargar pero ahora voy a explicar como enviar un formulario para que este nos muestre la respuesta de PHP sin necesidad de recargar la página o redirigir a otra página.

Creando el formulario

Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además he creado un div con el id “result” que es donde mostraremos el resultado de lo que enviemos.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="post" action="envio.php" id="fo3" name="fo3" >
      <fieldset>
        <legend>Perfil</legend>
        <ol>
            <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li>
            <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li>
            <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li>
        </ol>
        <input type="submit"   name="mysubmit" value="Enviar" />
      </fieldset>
</div>
</form>
<div id="result"></div>

Implementando AJAX

Ahora viene la parte novedosa del script voy a hacer que jquery intercepte el evento submit y envie el formulario sin recargar la página.

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
<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
   // Esta primera parte crea un loader no es necesaria
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
   // Interceptamos el evento submit
    $('#form, #fat, #fo3').submit(function() {
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
            }
        })        
        return false;
    });
})  
</script>


20Jan 2009 46 Comments

Actualizar un elemento sin recargar con jquery

Categories: AJAX - Tags: ,

Ahora que esta muy de moda la web 2.0, muchos clientes piden que se recarguen elementos, que aparezcan mensajes, etc y todo sin recargar la página para eso se puede usar complicados y confusos codigos AJAX o DOM pero yo prefiero usar un método mas simple con Jquery.

¿Qué es Jquery?

Jquery es una libreria javascript que nos hace la vida más fácil a la hora de manipular elementos html, enviar formularios con ajax, hacer animaciones y todas esas cosas que llaman web 2.0

Actualizar un elemento sin recargar usando AJAX

Para eso vamos a crear DIV con el id “recargado” donde vamos a llamar el resultado de un archivo PHP, que podría ser la invocación a una base de datos, un mensaje, validación, prácticamente cualquier cosa que hag PHP y porsupuesto sin recargar la página

1
2
3
4
<div id="recargado">Mi texto sin recargar</div>
<p align="center">
    <a href="#" onclick="javascript:recargar();">recargar</a>
</p>

Implementando JQUERY

Luego de incluir la libreria jquery

1
<script language="javascript" src="js/jquery-1.2.6.min.js"></script>

Escribimos nuestro código que se ejecutará cuando demos click al link “recargar”

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
function recargar(){   
       /// Aqui podemos enviarle alguna variable a nuestro script PHP
    var variable_post="Mi texto recargado";
       /// Invocamos a nuestro script PHP
    $.post("miscript.php", { variable: variable_post }, function(data){
       /// Ponemos la respuesta de nuestro script en el DIV recargado
    $("#recargado").html(data);
    });        
}
</script>


//////// Update ////////
Para ver como realizar una acción según la respuesta que dé PHP pueden ver este tutorial

20Jan 2009 25 Comments

Combos dependientes AJAX base de datos

Categories: AJAX, PHP - Tags: , ,

Anteriormente publiqué un post para crear combos dependientes usando jquery, el cual podía modificarse para ser usado con una base de datos, ahora voy a publicar esa modificación. Puedes ver el post original aqui

En el caso anterior se usaban dos archivos para mostrar el nuevo contenido del combo que serían combo1.php y combo2.php

1
2
3
4
5
6
$rpta= '
    <option value="op2_1">Option1</option>
    <option value="op2_2">Option2</option>
    <option value="op2_3">Option3</option>
    ';
echo $rpta;

¿Cómo me conecto a la base de datos?

Lo primero es conectarnos a la base de datos y buscar el elemento seleccionado en el combo y según eso llenar el otro combo por una cuestión de comodidad voy a usar una clase que se encargue de dicha conexion, puedes descargarla y ver como funciona aqui

¿Cómo busco los datos?

Para eso hay que usar una consulta sql como esta:
“SELECT * FROM ciudad WHERE pais_id LIKE ‘$_POST[elegido]‘”
La consulta obviamente varia de acuerdo a nuestra base de datos, para este ejemplo estoy usando una base de datos con las tablas continente, pais y ciudad

combo1.php y combo2.php

El script para ambos similar, lo único que varía es la consulta sql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Incluimos la configuración de la conexión de base de datos
include("includes/config.inc.php");
include("includes/mysql.class.php");
// Creamos la conexión
$db = new MySQL();  
// Abrimos la conexión
$db->open();
// Ejecutamos la consulta sql
$consulta = $db->consulta("SELECT * FROM pais WHERE continente_id LIKE '$_POST[elegido]'");
// Creamos un array para mostrar los datos del combo
if ($row = $db->fetch_array($consulta)) {
    do {
        echo
        '<option value="'.$row['pais_id'].'">'.$row['pais_name'].'</option>';
    }while($row = $db->fetch_array($consulta));
}
?>

Puedes bajar todo el código desde aquí
No olvides que para usar ese ejemplo debes subir primero la base de datos (migueltest.sql) y además debes modificar el archivo includes/config.inc.php con la información de tu servidor de base de datos

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi