Son las 1:47 de la madrugada y y desvelado trabajando en esta publicación que he querido traerles y que se que les sera muy útil pues, poco a poco te ayudará a independizarte un poco o de despertar en ti esos deseos de saber mas sobre como trabajar con bases de datos, las cuales si no existieran, el mundo de la Internet fuera nulo, aburrido y sin nada nuevo que ver. Para esta ocasión, he realizado un pequeño formulario, trabajado con HTML y CSS para darle tan llamativo aspecto, con PHP y MySQL para conexión y consultas a bases de datos y PHPMyAdmin para gestión de las mismas, de manera que antes de comenzar a realizar este tutorial recomiendo instalar un localhost en tu computador, o bien, si tienes un servidor externo también funciona, sin embargo; trabajar con un servidor local seria lo preferible.



Ingresa a PHPMyAdmin en tu computador, luego ve a Importar > pestaña SQL y pega el siguiente código

Archivo SQL

-- phpMyAdmin SQL Dump
-- version 2.10.3
-- http://www.phpmyadmin.net
-- 
-- Servidor: localhost
-- Tiempo de generación: 09-06-2014 a las 05:52:30
-- Versión del servidor: 5.0.51
-- Versión de PHP: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

-- 
-- Base de datos: `comentarios`
-- 

-- --------------------------------------------------------

-- 
-- Estructura de tabla para la tabla `comentarios`
-- 

CREATE TABLE `comentarios` (
  `ip` int(11) NOT NULL auto_increment,
  `usuario` varchar(20) NOT NULL,
  `email` varchar(50) NOT NULL,
  `website` varchar(1000) NOT NULL,
  `comentario` varchar(3000) NOT NULL,
  `fecha` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`ip`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1305 ;

-- 
-- Volcar la base de datos para la tabla `comentarios`
-- 

INSERT INTO `comentarios` VALUES (1303, 'Formatos', 'formatos@formatos.com', '', '<b>Texto en negrita</b><br />\r\n<i>Texto en cursiva</i><br />\r\n<u>Texto subrayado</u><br />\r\n<strike>Texto Tachado</strike><br />\r\n<span style="color: #3d85c6;">Texto en color</span><br />\r\n<span style="background-color: yellow;">Texto con color de fondo</span><br />\r\n<a href="http:/#">Link</a><br />\r\n<blockquote class="tr_bq">\r\nCita</blockquote>\r\n<div class="separator" style="clear: both; text-align: center;">\r\n<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s1600/flores_rojas_08.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBaT5C7n4tz4LflY6vUj1du-cbLX8uwl1wVbpEPfSPk09UoTnKR8zP-zdw2yHstkVYdVlKIonndNLgjtxip2QMnvnLf2fAqCt2pR63uCppbDb00jNSayT7npKpjlviBdSS02BOJ8bF0c/s320/flores_rojas_08.jpeg" /></a></div>\r\n<h1>\r\nEncabezado 1</h1>\r\n<h1>\r\n</h1>\r\n<h2>\r\nEncabezado 2</h2>\r\n<h2>\r\n</h2>\r\n<h3>\r\nEncabezado 3</h3>\r\n<h3>\r\n</h3>\r\n<h4>\r\nEncabezado 4</h4>\r\n<h4>\r\n<marquee>Texto desplazable</marquee>\r\n</h4>\r\n<audio controls="" src="https://sites.google.com/site/anthonyjmedinaf/archivos/Eagles%20-%20Hotel%20California.mp3">Hotel California - Eagles</audio><br />\r\n<br />\r\n<iframe allowfullscreen="" frameborder="0" height="360" src="//www.youtube.com/embed/_V5o392WOzw" width="100%"></iframe>', '2014-06-09 01:08:20');
INSERT INTO `comentarios` VALUES (1304, 'Anthony', 'nthny21@hotmail.com', '', 'Este es un <b>comentario</b>, almacenado en una base de datos MySQL y mostrado en esta página a través de una consulta ', '2014-06-09 01:19:38');

El código presenta dos ejemplos de comentarios el cual podras visualizar con mejoras mas adelante, crea el siguiente archivo de formato .php, donde localhost sera la direccion del servidor, si trabajas con servidor local, lo mas probable es que tengas que dejarla igual, usuario es tu nombre de usuario, password tu contraseña, y el nombre de la base de datos donde deseamos guardar los comentarios, en nuestro caso, "comentarios".

conexion.php

<?php
$conexion = mysqli_connect("localhost","usuario","password","comentarios");

if (!$conexion) {
 die("Error de conexión (".mysqli_connect_errno().")".mysqli_connect_error());
} 
?>

Es momento de crear el archivo principal, donde se ubicará el formulario de contacto y se publicaran los comentarios.

form.php

<!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>Formulario de comentarios</title>
<style type="text/css"> 
form ::-webkit-scrollbar {
    width: 8px;
}
form ::-webkit-scrollbar-button {
    background:#003;
}
 
form ::-webkit-scrollbar-track {
 background:#EEE;
}
 
form ::-webkit-scrollbar-thumb {
 background:#003;
}

form {
 clear:both;
 width:74%;
}
#datos {
 float:left;
}
input[type=text] {
 display:block;
 padding:9.4px 4px 9.3px 45px;
 font-family:"Raleway", Arial, Helvetica, sans-serif;
 font-size:18px;
 font-weight:300;
 border:#CCC 1px solid;
 color:#CCC;
 margin:9px 1px 9px 8px;
 transition:all ease-in-out .3s;
 clear:inherit;
}
input[type=text]:hover {
 color:#666;
 border:#666 1px solid;
 box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;

}
input[type=text].nombre { 
 background:#FFF url(imagenes/user.png) no-repeat;
 border-radius:2px 18px 0px 2px;

}
input[type=text].email {
 background:#FFF url(imagenes/email.png) no-repeat;
}

input[type=text].website {
 background:#FFF url(imagenes/web.png) no-repeat;
 border-radius:2px 0px 0px 2px;

}

textarea.comentario {
 clear:both;
 width:444px;
 display:block;
 padding:8px 11px 8px 11px;
 font-family:"Raleway", Arial, Helvetica, sans-serif;
 font-size:18px;
 border:#CCC 1px solid;
 border-radius:18px 2px 2px 0px;
 color:#CCC;
 margin:9px 1px 9px 1px;
 transition:all ease-in-out .3s;
 float:left;
 resize:none;
}
textarea.comentario:hover {
 color:#666;
 box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;
 border:#666 1px solid;

}
input[type=submit] {
 width:99.4%;
 clear:both;
 background:#FFF;
 display:block;
 padding:8px 11px 8px 11px;
 font-family:"Raleway", Arial, Helvetica, sans-serif;
 font-size:18px;
 border:#CCC 1px solid;
 border-radius:0px 0px 18px 18px;
 color:#CCC;
 margin:9px 1px 9px 1px;
 transition:all ease-in-out .3s;

}
input[type=submit]:hover {
 color:#666;
 box-shadow:2px 2px 2px #EEE,-2px -2px 2px #EEE;
 border:#666 1px solid;

}
#comentarios {
 display:block;
 width:70%;
 padding:4px 4px 4px 12px;
 font-family:'Raleway',sans-serif;

}
#comentarios:hover {
}
#comentarios a {
 color:#FFF;
 text-decoration:none;
 transition:all ease-out .3s;

}
#comentarios a:hover {
 color:#EEE;
}

#comentarios .user {
 clear:both;
 padding:4px 9px 4px 9px;
 margin:4px 0px 4px 4px;
 float:left;
 width:30%;
 background:#003;
 border-radius:4px 0px 0px 4px;
 font-weight:bold;
 color:#FFF;

}
#comentarios .comment {
 border:1px solid #003;
 margin:4px 4px 4px 0px;
 padding:18px 9px 18px 9px;
 float:left;
 width:61%;
 border-radius:0px 4px 4px 0px;

}
#comentarios .comment a {
 transition:all ease-in .2s;
 color:#999;
}
#comentarios .comment img {
 width:93%;
 border:7px solid #FFF;
 box-shadow:2px 2px 4px #003;
}
#comentarios .comment a:hover {
 font-weight:bold;
}
.tiempo {
 text-align:right;
 text-transform:uppercase;
 font-size:10px;
}
</style>
</head>


<body>

<?php
include('comentarios.php');
?><br/><br/><br/>

<form action="enviar.php" method="post">
<textarea class="comentario" name="comentario" cols="29" rows="6" aria-required="true" ></textarea>
<div id="datos">
<input type="text" size="20" name="usuario" class="nombre" placeholder="Nombre de usuario" required="required" autocomplete="off" />
<input type="text" size="20" name="email" class="email" placeholder="Correo eléctronico" required="required" autocomplete="off"/>
<input type="text" size="20" name="website" class="website" placeholder="Sitio web" autocomplete="off" />
</div>

<input type="submit" value="Enviar" name="enviar"/>
</form>
</body>
</html>

Este archivo (enviar.php) es de suma importancia, pues; es el que a la final validará los datos y establecerá el contacto con MySQL para enviar los datos ingresados en el formulario a cada fila y columna de la base de datos.

enviar.php

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
</head>
<body>
<?php 
// Llamamos al archivo de conexión a la base de datos
require("conexion.php");
 
//Creamos las variables con los nombres de los campos del formulario
$usuario = $_POST["usuario"];
$email = $_POST["email"];
$website = $_POST["website"];
$comentario = $_POST["comentario"];

// Codigo de insercion a la base de datos
$insertar = mysqli_query($conexion,"INSERT INTO comentarios (usuario, email, website, comentario) VALUES ('$usuario','$email','$website','$comentario')");

if (!$insertar) {
 echo "Error al guardar";
} else {
 echo "Guardado con éxito";
}

mysqli_close($conexion);
?>
<br/>
<a href="form.php">ver comentarios</a>
</body>

</html>

y finalmente, creamos el siguiente archivo, recuerda sustituir nuevamente los datos del usuario de MySQL como lo pide el código, de manera que se puedan conectar mutuamente.

comentarios.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Comentarios</title> 
</head> 
<body> 
<?php 
  // Se conecta al SGBD 
  if(!($conexion = mysql_connect("localhost", "usuario", "password"))) 
    die("Error: No se pudo conectar");
 
  // Selecciona la base de datos 
  if(!mysql_select_db("comentarios", $conexion)) 
    die("Error: No existe la base de datos");
 
  // Sentencia SQL: muestra todo el contenido de la tabla "books" 
  $sentencia = "SELECT * FROM comentarios"; 
  // Ejecuta la sentencia SQL 
  $resultado = mysql_query($sentencia, $conexion); 
  if(!$resultado) 
    die("Error: no se pudo realizar la consulta");

 echo "<div id='comentarios'>";
  while($fila = mysql_fetch_assoc($resultado)) 
  { 
   echo "<div class='user'>";
    echo "<a href='" . $fila['website'] . "'>" . $fila['usuario'] . "</a><br/> <div class='tiempo'>" . $fila['fecha'] . "</div>";
   echo "</div>";
   echo "<div class='comment'>";
    echo $fila['comentario'] . '<br/>';
   echo "</div>";
  } 
 echo "</div><br/>";
  // Libera la memoria del resultado
  mysql_free_result($resultado);
  
  // Cierra la conexión con la base de datos 
  mysql_close($conexion); 
?> 
</body> 
</html> 

Esto ha sido todo; puedes descargarte también los archivos, y trabajarlos directamente.

Descargar archivos