Formulario con php y mysql

Formulario con php y mysql

En esta ocasión vamos crear un pequeño sistema de formulario con php y mysql en varias páginas ¿Porque digo en varias páginas? Simple, este sistema de formulario se dividirá en 3 partes donde el usuario va a tener que ir rellenado campos de texto, es parecido a esos sistema de formulario que crean las tiendas online solo que este es mucho más básico.

Ver ejemplo del sistema: Formulario con php y mysql

Lo que necesitamos para este formulario con php y mysql

Para este formulario con php y mysql vamos a necesitar 7 archivos para no tener todo el código agrupado y para que lo podamos entender mucho mejor, los campos que he puesto solo lo puse para enseñar cómo funcionan estos formularios con php en varias sesiones.

Bueno lo primero que vamos a crear son los archivos, puedes crearlo e ir colocando el código en cada uno según valla el tutorial.
Pagina1.php
Pagina2.php
Pagina3.php
Salir.php
Sesión.php
Procesar.php
Style.css

Primero vamos a crear la estructura de la pagina1.php que será la pagina donde iniciaremos con nuestro formulario php.
Pagina1.php

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>formulario con php y mysql utilizando sesiones</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>Formulario con php y mysql</h1>
</div>
<div id="cuerpo">
 <div id="formulario">
  <h2>Pagina Principal</h2>
<form action="procesar.php" method="post">
 <input type="hidden" name="pagina"  value="1"/>
  <b>Nombre:</b><br />
 <input type="text" name="name" value=""><br />
    <b>Apellido:</b><br />
    <input type="text" name="apellido" value=""><br />
    <b>Correo:</b><br />
    <input type="text" name="correo" value=""><br />
    <b>Edad:</b><br />
    <input type="text" name="edad" value=""><br />
    <b>Sexo:</b><br />
    <input type="text" name="sexo" value=""><br />
    <b>Ocupacion:</b><br />
    <input type="text" name="ocupacion" value=""><br />
    <b>Sortero o Casado:</b><br />
    <input type="text" name="sortero" value=""><br />
    <input type="reset" value="Borrar Todo" id="procesar" />
    <input type="submit" value="Siguiente" id="procesar" /> 
</form>
</div>
</div>
<div id="footer">
Creado por <font color="#FF0000">Eriberto Rodriguez</font> de <a href="http://www.comocrearmiweb.com" title="como crear mi web">Como crear mi web</a>
</div>
</body>
</html>

Ahora la estructura de la pagina2.php

pagina2.php

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>formulario con php y mysql utilizando sesiones</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>Formulario con php y mysql</h1>
</div>
<div id="cuerpo">
<div id="formulario">
<h2>Pagina II</h2>
<form action="procesar.php" method="post">
 <input type="hidden" name="pagina" value="2"/>
 <b>Pais o Region:</b><br />
 <input type="text" name="pais" value=""><br />
    <b>Probincia:</b><br />
    <input type="text" name="probincia" value=""><br />
    <b>Municipio:</b><br />
    <input type="text" name="municipio" value=""><br />
    <b>No.Casa y Calle</b><br />
    <input type="text" name="casacalle" value=""><br />
    <b>Producto:</b><br />
    <input type="text" name="producto" value=""><br />
    <b>Precio:</b><br />
    <input type="text" name="precio" value=""><br />
    <b>Cantidad:</b><br />
    <input type="text" name="cantidad" value=""><br />
        <input type="submit" value="Siguiente" id="procesar" />
</form>
 <form action="salir.php" method="post">
 <input type="submit" value="Cancelar" id="procesar"/>
</div>
</div>
<div id="footer">
Creado por <font color="#FF0000">Eriberto Rodriguez</font> de <a href="http://www.comocrearmiweb.com" title="como crear mi web">Como crear mi web</a>
</div>
</body>
</html>

Ahora ponemos la estructura de la pagina3.php

pagina3.php

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>formulario con php y mysql utilizando sesiones</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="header">
<h1>Formulario con php y mysql</h1>
</div>
<div id="cuerpo">
<div id="formulario">
<h2>Pagina III</h2>
<form action="procesar.php" method="post">
 <input type="hidden" name="pagina" value="3" />
 <b>Tarjeta o Efectivo:</b><br />
 <input type="text" name="mpago" value=""/><br />
    <b>Fecha de hoy:</b><br />
    <input type="text" name="fecha" value=""/><br />
    <b>Como llegaste a esta web:</b><br />
    <input type="text" name="referencia" value=""/><br />
    <b>Pagina web:</b><br />
    <input type="text" name="web" value=""><br />
    <b>Num.Telefono:</b><br />
    <input type="text" name="telefono" value=""/><br />
    <b>Nom.Celular:</b><br />
    <input type="text" name="celular" value=""/><br />
    <b>Tu Pin:</b><br />
    <input type="text" name="pin" value=""><br />
    <input type="reset" value="Borrar Todo" id="procesar" />
    <input type="submit" value="Finalizar" id="procesar" />
</form>
 <form action="salir.php" method="post">
 <input type="submit" value="Cancelar" id="procesar"/>
</div>
</div>
<div id="footer">
Creado por <font color="#FF0000">Eriberto Rodriguez</font> de <a href="http://www.comocrearmiweb.com" title="como crear mi web">Como crear mi web</a>
</div>
</body>
</html>

Si te fijas en cada una de las páginas hemos dejado la propiedad value de html en los campos de texto vacías, y esto es pera utilizarla más adelante cuando vallamos a verificar que los campos no estén vacios.

Ahora le vamos a dar un poco de estilo a nuestras 3 páginas para eso creamos la página style.css que es la que le dará forma al documento HTML y a los input
Style.css

*{
margin:0px;
padding:0px;
}
a{text-decoration:none;}
h2{
 border-bottom:solid 1px #999;
 border-bottom-style:dotted;
}
#header,#footer,#cuerpo,#nav{
 width:90%;
 height:70px;
 text-align:center;
 background:#DEDEDE;
 }
#header{
 width:100%;
 height:auto;
 padding:15px;
 margin:0px;
 background:-moz-linear-gradient(#fff 0%, #dadada 100%);
 background:-ms-linear-gradient(#fff 0%, #dadada 100%);
 background:-o-linear-gradient(#fff 0%, #dadada 100%);
 background:-wekit-linear-gradient(#fff 0%, #dadada 100%);
 }
#cuerpo{
 width:50%;
 height:auto;
 background:#DEDEDE;
 padding:5px;
 margin:10px auto;
 border:solid 1px #999;
 border-radius:5px;
 }
#formulario{
 background:#fff;
 padding:10px;
 height:auto;
 width:50%;
 margin:10px auto;
 text-align:left;
 border-radius:5px;
 color:#06C;
 border:solid 1px #999;
 }
#footer{
 width:100%;
height:auto;
 padding:10px;
 margin:0px;
 }
input{
 border:solid 1px #DEDEDE;
 border-radius:5px;
 padding:5px;
 width:230px;
 color:red;
}
input:focus{
 box-shadow:0 0 10px #09F;
 -moz-box-shadow:0 0 10px #09F;
 -ms-box-shadow:0 0 10px #09F;
 -o-box-shadow:0 0 10px #09F;
 -webkit-box-shadow:0 0 10px #09F;
 border:none;
 }
#procesar{
 width:auto;
 margin:10px;
 padding:5px;
 height:auto;
 border-radius:5px;
 border:solid 1px #DADADA;
 color:#09F;
 background:linear-gradient(#fff 0%, #DEDEDE 100%);
 background:-ms-linear-gradient(#fff 0%, #DEDEDE 100%);
 background:-o-linear-gradient(#fff 0%, #DEDEDE 100%);
 background:-webkit-linear-gradient(#fff 0%, #DEDEDE 100%);
 }
#procesar:hover{
background:linear-gradient(#f5f5f5 0%, #DEDEDE 100%);
background:-moz-linear-gradient(#f5f5f5 0%, #DEDEDE 100%);
background:-ms-linear-gradient(#f5f5f5 0%, #DEDEDE 100%);
background:-o-linear-gradient(#f5f5f5 0%, #DEDEDE 100%);
background:-webkit-linear-gradient(#f5f5f5 0%, #DEDEDE 100%);
}
 b{
 color:blue;
 }
form{
 display:inline-block;
 }

Bueno ya tenemos el código de los principales archivos que vamos a utilizar solo falta el código php que es la parte más difícil y la que tenemos que analizar un poquito más en la próxima entrada vamos a ver cómo hacer todo el código php para validar los campos que no estén vacios y para crear la sesión en el servidor.

Formulario con php y mysql parte 2

Sera hasta la proxima entrada…

Comments

  1. By Jose

Deja un comentario

Tu dirección de correo electrónico no será publicada.