Aquí les dejo un ejemplo de una pagina que hice en un rato de ocio, en ella uso PHP, jQuery y CSS3 de manera simple para crear una pagina sencilla pero que con efectos que la hacen mas "dinámica" y no tan plana.
Nota: Recomiendo que todo el código puesto aquí sea escrito a mano, y no copiado y pegado ya que mientras que se lee y escribe analizas la información y comprendes mejor como funciona.
Bien, comencemos.
Primero que nada les dire sobre que trabaje:
Para escribir el código de la pagina, prácticamente todo, use "Programmer's Notepad", programa de licencia libre que permite editar archivos de casi cualquier tipo de lenguaje de programación, html, css, php incluidos, puede usarse para java y c++.
Para visualizar la pagina utilice XAMPP, la versión mas resiente.
Segundo, construí una base de datos pequeña la cual guarda en una tabla el nombre de un usuario, una contraseña y la fecha de registro. La base de datos la llame "prueba" y en ella cree la siguiente tabla como sigue:
CREATE TABLE registro
(NAME_USR VARCHAR(30) NOT NULL,
PSSWRD VARCHAR(30) NOT NULL,
REG_DATE DATE,
PRIMARY KEY (NAME_USR)
);
Contemple hacer altas, bajas y consultas desde la pagina. Para realizar las transacciones con la base de datos use PHP y formularios HTML. Pondré como ejemplo el código PHP de las altas a la base de datos que lleva por nombre "rep.php".
<?php
if($_POST['usr'] == '' or $_POST['pwd'] == '')
{echo "Campos vacios.";
}
else
{
$host = "localhost";
$user = "root";
$pass = "";
$database = "prueba";
$limpio = "INSERT INTO registro(NAME_USR, PSSWRD, REG_DATE) VALUES ('".$_POST['usr']."','".$_POST['pwd']."','".date("Y-m-d"."');";
$m1 = new mysqli($host,$user,$pass,$database);
if($sentencia1 = $m1->prepare($limpio))
{if(!$sentencia1->execute())
{echo "Ocurrio un error";}
else
{echo "Usuario añadido";}
}
}
?>
El código HTML de la pagina, que lleva por nombre "main.html", queda asi:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div>
<div>
<form action="rep.php" method="post" autocomplete="on">
Usuario <input type="text" name="usr" autofocus><br/>
Password <input type="password" name="pwd"><br/>
<input type="submit" formtarget="contenedor">
</form>
</div>
<div>
<iframe name="contenedor">
</iframe>
</div>
</div>
</body>
</html>
Así funciona el código: Damos forma a un formulario, que tiene como objetivo el objeto con identificado "contenedor", esto lo hacemos con el atributo "target", en otras palabras, en el se cargara lo que haga la pagina en PHP. Mediante el metodo "post", del "form" en "main.html", mandamos a la pagina "rep.php" lo contenido en los campos de texto como variables cuando se ejecute la acción, en este caso es presionar el botón "Enviar".
Estas variables son accesibles en PHP mediante $_POST[nombre de la variable]. En este caso lo mando como 'usr' y 'pwd' y hago referencia en PHP con los mismo nombres de esta manera $_POST['usr'] y $_POST['pwd'].
La pagina en PHP carga las variables con las cuales va a trabajar el conector a la base de datos, en este caso mysqli. Dependiendo de como configuren su XAMPP es como deben iniciar estas variables. En la variable "$limpio" se guarda la consulta a ejecutar tomando en cuenta las variables "usr" y "pwd" como mencione antes, y obteniendo mediante la función "date" la fecha para incluirla en el INSERT por lo que se genera automáticamente y no es necesario que el usuario la escriba.
Luego, mediante código orientado a objetos, se cargan las variables que realizan la conexión con la base de datos y preparan el código para ser ejecutado para finalmente ejecutarlo.
Cuando se da enter o clic en el botón y se hace con los campo de texto vacíos la pagina desplegara un mensaje que advertirá esto, si se hace un registro con un id repetido o no se ejecuta mandara mensaje de error, y si se hace de manera correcta también lo hará notar.
Este es el resultado:
El formulario de la pagina de HTML es casi el mismo para consultas y bajas, por lo que solo pondré el código del "form" y el código en PHP también funciona de manera, pero para que puedan darle un análisis lo pondré completo.
BAJAS
HTML
Archivo "baja.html"
<form action="baja.php" method="post" autocomplete="on">
Usuario <input type="text" name="usr" autofocus>
<input type="submit" value="Borrar" formtarget="contenedor">
</form>
PHP
Archivo "baja.php"
<?php
if($_POST['usr'] == '')
{echo "Consulta vacia";}
else
{
$host = "localhost";
$user = "root";
$pass = "";
$database = "prueba";
$p1 = "SELECT name_usr FROM registro WHERE registro.name_usr = '";
$p2 = "';";
$p3 = $p1.$_POST['usr'].$p2;
$m2 = new mysqli($host,$user,$pass,$database);
if($sentencia2 = $m2->prepare($p3))
{$sentencia2->execute();
$nombre = NULL;
$sentencia2->bind_result($nombre);
$i=0;
while($sentencia2->fetch())
{echo "Usuario encontrado.";
$i=1;
}
if($i==0)
{echo "No se encontro el usuario.";}
else
{$limpio = "DELETE FROM registro WHERE name_usr='".$_POST['usr']."';";
$m1 = new mysqli($host,$user,$pass,$database);
if($sentencia1 = $m1->prepare($limpio))
{if(!$sentencia1->execute())
{echo "Ocurrio un error";}
else
{echo "<br/>Usuario borrado.";}
}
}
}
}
?>
Resultado
CONSULTAS
HTML
Archivo "consulta.html"
<form action="consulta.php" method="post" autocomplete="on">
Consulta ID <input type="text" name="usr" autofocus><br/>
<input type="submit" value="Consultar" formtarget="contenedor">
</form>
PHP
Archivo "baja.php"
<?php
if($_POST['usr'] == '')
{echo "Consulta vacia.";}
else
{$host = "localhost";
$user = "root";
$pass = "";
$database = "prueba";
$p1 = "SELECT name_usr FROM registro WHERE registro.name_usr = '";
$p2 = "';";
$limpio = $p1.$_POST['usr'].$p2;
$m1 = new mysqli($host,$user,$pass,$database);
if($sentencia2 = $m1->prepare($limpio))
{$sentencia2->execute();
$nombre = NULL;
$sentencia2->bind_result($nombre);
$i=0;
while($sentencia2->fetch())
{echo "El usuario '".$nombre."' ya se encuentra registrado.";
$i=1;
}
if($i==0)
{echo "No se encontro el usuario.";}
}
}
?>
Resultado
CUERPO PRINCIPAL
Bien, ya tenemos los módulos básicos, ahora crearemos nuestra pagina principal que las juntara a todas. Para esto investigue la forma de cargar alternativamente una pagina en un mismo espacio y llegue a este código.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="estilo.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<title> Prueba </title>
<body>
<div id="container">
<div id="header">Pagina de prueba
</div>
<div id="panel">Menú
<div id="menu"><a href="consulta.html"> Consultas </a></div>
<div id="menu"><a href="baja.html"> Bajas</a></div>
<div id="menu"><a href="main.html"> Altas </a></div>
</div>
<div id="box">
Bienvenido al Sistema
</div>
</div>
<script>
jQuery().ready(function() {
jQuery('#menu a').click(function(){
var pagina = jQuery(this).attr('href');
jQuery('#box').hide('fast', cargar);
function cargar(){jQuery('#box').load(pagina,'',mostrar);}
function mostrar(){jQuery('#box').show('normal');}
return false;
});
});
</script>
</body>
</html>
Aquí es donde entra en juego jQuery. Vemos que en el head se hace referencia a un recurso externo, es la librería de jQuery. Es necesaria para escribir el código contenido en el script.
El script funciona de la siguiente manera: al hacer clic en los enlaces (a) creados dentro de los objetos (por jerarquía) que tengan por identificador "menu" cargara en una variable "pagina", mediante la función "attr", lo que este contenido en el atributo "href", que es la url de las otras paginas. Después ocultara con el método "hide" todos los objetos que tengan por identificado "box", el atributo "fast" indica la velocidad de la acción, luego llamara a la función "cargar". Esta función usa el método "load" para que todos los objetos con identificador "box" carguen el archivo que tenga como nombre "pagina", la variable que contiene el url del enlace y por ultimo carga la función mostrar. Esta ultima función usa el método "show" para que los objetos "box", el atributo 'normal' se usa para darle velocidad.
En resumen, a darle clic a cada enlace el script guarda la url a la que esta dirigido el enlace, oculta el area donde se va a mostrar, carga la pagina haciendo referencia a la url guardada y finalmente muestra la pagina ya cargada. Todo es se aplica con efectos de transición.
Esta es otra forma de designar distintos objetos como destinos, una es el atributo "target" que se usa en los formularios de las otras paginas. La otra forma es mediante jQuery haciendo uso de "attr" para cargar la url del enlace y "load" para cargar la pagina del url que cargamos previamente.
En el head se hace referencia a una hoja de estilos, sin esta hoja tendríamos una pagina totalmente plana, ademas de que contiene un efecto CSS3. El código de la pagina es:
body
{font-family:"Verdana";}
iframe
{border:0px}
a:link
{text-decoration:none;}
a:visited
{text-decoration:none;
color:#FA5858;}
a:active
{color:#B40404;
text-decoration:none;}
a:hover
{color:#FF8000;
text-decoration:none;}
#box
{padding: 0 10px;
background-color:#FF7700;
}
#inbox
{height:250px;
}
#menu
{text-align:center;
width:100px;
background-color:#FFAF00;
float:right;
transition:background-color 1s;
}
#menu:hover
{background-color:#FFA000;
}
#header
{background-color:#FFA500;
font-size:100%;
padding:20px 20px;
text-align:center;
}
#panel
{background-color:#FFD700;
padding:10px 10px;
}
#content
{background-color:#EEEEEE;
float:left;
width:500px;
height:200px;
}
#footer
{background-color:#FFA500;
clear:both;
text-align:center;
}
Este es el resultado
Y así se ve cuando se da clic en una de las paginas.
El efecto CSS3 esta definido en #menu mediante el atributo "transition" donde le indicamos los atributos que queremos que tengan una transición al cambiar de estado, en este caso en #menu:hover cambia el color de fondo, y con un numero seguido de una "s" le indicamos el tiempo de la transición.
Estos efectos se pueden aplicar para muchos otros atributos.
En el código original es un cambio de naranja a uno un poco mas oscuro, pero para que se pueda apreciar de manera mas notoria he cambiado el código a rojo para esta imagen
Este "pequeño" ejemplo es una idea de lo que pueden hacer en conjunto PHP, jQuery y CSS3, usando lineas de código sencillas.
Muchas gracias por su atencion, espero que les sirva y son bien recibidos sus quejas y comentarios.
Hasta la próxima.
