lunes, 25 de noviembre de 2013

Tutorial crear formulario HTML, guardar y mostrar datos/consultas SQL con PHP

Buenas tardes!
Hoy os traigo un tutorial muy útil y muy pedido por los usuarios. Se trata de como crear un formulario en HTML y al darle al botón de enviar se guarde en una base de datos SQL utilizando la programación de PHP.

Este tutorial se puede dividir en varios archivos/páginas pero al tratarse de un ejemplo de un tutorial lo he creado todo en el mismo archivo index.php. El tutorial es bastante simple pero servirá para abrir los ojos aquellos que estén empezando en este mundo de las paginas webs y de las bases de datos.


No he añadido como se crean las tablas en SQL porque creo que ya esta bastante extenso. Pero si lo necesitáis pedirlo que lo añadiré.
Primero os mostraré el código completamente creado y comentado por mí y a continuación abrán dos links, uno para ver el ejemplo en vivo del funcionamiento del formulario y ver como muestra las consultas y el otro link será de descarga  del archivo.

Antes de empezar decir que el archivo index.php al ser .php solo funciona en la parte del servidor, es decir, que no se podrá ejecutar en el Pc a no ser que tengas instalado un servicio web. Yo recomiendo este hosting gratuito y simple para hacer las pruebas: http://adf.ly/4920962/hostingho

Empecemos por el código:
<!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>
<?
//Creamos la conexión a nuestra base de datos
//Hay que sustituir el usuario contraseña
$conexion = mysql_connect("localhost", "(usuario)", "(password)");
//Aquí hay que sustituir la el nombre de la base de datos
mysql_select_db("(base de datos)", $conexion);
?>
<body>
<p>Formulario para insertar datos en SQL</p>
<!-- Ahora creamos el formulario que enviará los datos -->
<!-- En el apartado 'action' hay que poner a que página
enviaremos los datos, en este caso y como ejemplo lo enviaremos
a index.php, es decir, a esta misma web -->
<form id="form1" name="form1" method="post" action="index.php">
  <table width="200" border="0">
  <tr>
    <td width="61">Nombre:</td>
    <td width="123">
      <label for="nombre"></label>
      <input type="text" name="nombre" id="nombre" />
    </td>
  </tr>
  <tr>
    <td>Nick:</td>
    <td><label for="nick"></label>
    <input type="text" name="nick" id="nick" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td align="right">
    <input type="submit" name="enviar" id="enviar" value="Enviar" />
    </td>
  </tr>
</table>
</form>
<?
    //Comprovamos si se han recivido datos del formulario
    //Como vemos se lo utilizando el campo nombre
    if(isset($_POST['nombre'])){
      //Insertamos los datos en SQL en mi caso la tabla se  
      //llama personas y consta de dos celdas 
      //la de nombres y la de nick
      $insertar = "INSERT INTO personas (nombre, nick) 
          VALUES ('".$_POST['nombre']."', '".$_POST['nick']."')";
      mysql_query($insertar,$conexion); 
     }
?>

Mostramos los resultados que hay en SQL <br><br>
<?
 //Creamos el Select para decir que campos queremos mostrar
 //en este caso de ejemplo mostraremos los dos que hay
 $sql = "SELECT nombre,nick FROM personas";
 $retval = mysql_query( $sql, $conexion);
 //Creamos un Bucle que recorra toda la tabla de SQL
 while($row =  mysql_fetch_assoc($retval)){
    echo "Nombre: ".$row['nombre'].", Nick: ".$row['nick']."<br>";
} 
?>
</body>
</html>

Para ver el ejemplo en vivo:

Para descargar el proyecto:

Muchas gracias! espero comebntarios!
Recuerda el +1 nos ayuda a todos!

29 comentarios:

  1. Excelente aportación, me ha servido mucho. Mil gracias

    ResponderEliminar
  2. Actualiza el links del ejemplo en vivo... No hagas trampa!! Estas ganando por un link que esta caido

    ResponderEliminar
  3. en caso de que yo no haga la conexión a la base de datos sino que necesita que con sesiones de php al enviar llenar los campos de usuario y contraseña me mostrara un mensaje de bienvenida y mostrara en pantalla el nombre de usuario como se haría eso?

    ResponderEliminar
  4. Amigo los Link estan deshabilitado.. soy nuevo en este mundo de la programacion , como hago la BD

    ResponderEliminar
  5. Excelente, Gracias :)

    ResponderEliminar
  6. Hola, como hago para que luego de insertar los datos en la bdd me muestre los datos que se guardaron? Sin buscar por clave.

    ResponderEliminar
  7. por favor, actualiza los links. Muchas gracias por tu aporte!

    ResponderEliminar
  8. Hola mi amigo disculpa podrias actualizar los links por favor y gracias por el aporte ya que me esta sirviendo mucho

    ResponderEliminar
  9. Excelenteee! Me he cansado de buscar, no sabía cuál era el problema... Creé desde cero varios formularios y conexiones a ver si es que me equivocaba y no me daba cuenta... Y, si soy sincero, no he identificado el porqué en los casos anteriores no me funcionó; lo que veo aquí es prácticamente lo mismo que ya había hecho... claro que algo distinto tiene que haber, pero en vista de que tengo muchas horas despierto y que tengo que levantarme temprano, dejaré para mañana ese análisis jajaja... Otra cosa, he visto por ahí la utilización y recomendación del mysqli, creen que deba tratar de que mi formulario funcione usando esos comandos? o podría trabajar cómoda y eficazmente utilizando estos comandos mysql que vi por ahí que decían ser obsoletos... Gracias por leer el comentario ;)

    ResponderEliminar
  10. Necesito crear una a base de datos de los estudiantes que sea local y no bajo web, tengo elaborado el formulario pero no se crear la base de datos y que se guarden localmente, pueden ayudarme a que correo le envió lo que tengo gracias este es mi correo osnid1@gmail.com

    gracias

    ResponderEliminar
    Respuestas
    1. la base de datos localmente la puedes crear con un software llamado XAMPP "https://www.apachefriends.org/es/index.html" este conecta con mysql y puedes crear tus proyectos sin necesidad de un hosting.

      Eliminar
  11. Buenas puedes colocar un ejemplo con varias tablas que no doy como hacerlo

    ResponderEliminar
  12. Buenas puedes colocar un ejemplo con varias tablas que no doy como hacerlo

    ResponderEliminar
  13. codigo para enviar datos del formulario a la base de datos a la vez con esa misma informacion generar una nueva pagina php para editarlo

    ResponderEliminar
  14. buenisimo!! aunque me resta muchisimo por aprender en todo esto ya que hasta hace 2 dìas descubri como crear una base de datos desde mi localhost

    ResponderEliminar
  15. Buenas tardes..!! gran aporte, pero veras estoy creando una modesta pagina, en una de sus secciones habran articulos cosas asi.. en texto y pues queria saber como hacer que ya cuando deba editar o cargar un nuevo articulo, el anterior vaya a la base de datos, y evidentemente que tal naticia o articulo este disponible y se acceda desde alguna columna lateral, se que de pronto no es el tema, pero te agradeceria si puedes ayudarme con eso... soy un novato en este mundo pero tengo el deseo de aprender y lograr esto.. gracias.!! espero tu respuesta.

    ResponderEliminar
  16. Oe actualiza los links por favor

    ResponderEliminar
  17. los link solo son publicidad =(

    ResponderEliminar
  18. falto la tabla sql y como crearla

    ResponderEliminar
  19. Hola
    una consulta, tengo un sitio web responsive, y al momento de ser visualizada en el móvil solo se me ven algunos productos, pero por computador se me ven todas..
    que puede ser.. gracias espero su ayuda

    ResponderEliminar
  20. has algo mejor niño rata!!

    ResponderEliminar
  21. una pregunta , necesito poner en mi web un cuadro que me permita consular con un numero de cedula y que si esta cedukla se encuentra en mi base de datos traiga el nombre y el aspecto que yo requiero este codigo me sirve para esto ?

    ResponderEliminar
  22. Es en serio,si vas compartir deja de poner link llenos de contenido basura, y segunda ten los link activos

    ResponderEliminar
  23. quiero una asi pero sin php solo con html

    ResponderEliminar