Hola amigos, bienvenidos de nuevo a otro tutorial de uno-de-piera.com, sobre el trabajo con php esta vez vamos a utilizar también la famosa librería Javascript jQuery, este tutorial es bastante avanzado, ya no por el trabajo con phpque es bastante básico, sino por el trabajo realizado con jQuery, que bien yo no soy experto, tengo algunos conocimientos y quiero compartirlos, por eso mismo, intentáremos explícarlos más detalladamente para que todos lo entendamos y sea sencillo de seguir y comprender, continuamos creando el proyecto sobre el que trabajaremos.
Creamos nuestro proyecto
Vamos como siempre a nuestro directorio raíz y creamos una carpeta que podemos llamar form_contacto_jQuery por ejemplo, aquí iremos colocando nuestros archivos y las carpetas de nuestro proyecto.
Hay varios temas que tratar, necesitaremos descargar varios archivos para que funcione nuestro formulario, doy por hecho que el que está viendo el post sabe de lo que estamos hablando, necesitamos descargar las librerías jQuery yjQueryUI desde jQueryUI porque vamos a crear un boton con jQueryUI que la verdad está muy bien, ésto nos dará los archivos necesarios para que funcione la parte javascript de nuestro formulario, cogemos la carpeta y la guardamos en nuestro proyecto. Con ésto, ya podemos seguir con la base de datos que utilizaremos para guardar los mensajes.
La base de datos
Primero creamos la base de datos comentarios.
1
|
CREATE DATABASE comentarios
|
y a continuación la tabla que llamaremos mensajes.
1
2
3
4
5
6
7
8
9
|
CREATE TABLE mensajes(
id int AUTO_INCREMENT not null PRIMARY KEY,
nombre varchar(60),
email varchar(100),
asunto varchar(200),
mensaje text,
hora time,
fecha date
)
|
Creamos nuestro formulario
Abrimos nuestro editor de código y pasamos a crear un archivo que llamaremos formulario_contacto.php e introduciremos el siguiente código que pasaremos a explicar detalladamente.
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
28
29
30
31
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "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 con un botón especial</title>
<link rel="stylesheet" href="estilos.css" type="text/css" />
<link rel="stylesheet" href="jqueryUI/css/ui-lightness/jquery-ui-1.8.20.custom.css" type="text/css" />
<script type="text/javascript" src="jqueryUI/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jqueryUI/js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<div class="formulario">
<form name="form" class="contacto" action="procesa.php" method="post">
<div><label>Tu Nombre:</label><input type='text' name="nom" class="nom" value="<?= @$_POST['nom'] ?>" ><?php echo @$error[1] ?></div>
<div><label>Tu Email:</label><input type='text' name="email" class="email" value="<?= @$_POST['email'] ?>"><?php echo @$error[2] ?></div>
<div><label>Asunto:</label><input type='text' name="asunto" class="asunto" value="<?= @$_POST['asunto'] ?>"><?php echo @$error[3] ?></div>
<div><label>Mensaje:</label><textarea rows='6' name="mensaje" class="mensaje"><?= @$_POST['mensaje'] ?></textarea><?php echo @$error[4] ?></div>
<div><input type='submit' name="boton" class="boton" id="demo" value='Envia Mensaje'></div>
<?php
if(isset($_GET['mensaje']) and ($_GET['mensaje'] == 'enviado'))
{
?>
<span style="color:#000066">El mensaje se envío correctamente</span>
<?php
}
?>
</form>
</div>
</body>
</html>
|
En el head, llamamos a las hojas de estilo estilos.css que será con lo que demos estilos a nuestro formulario, a la hoja de estilos jquery-ui-1.8.20.custom.css con la que daremos estilo a nuestro botón y a las dos librerías que harán la validación javascript, jquery-1.7.2.min.js(la librería jQuery de siempre) y jquery-ui-1.8.20.custom.min.js, ésta última será con la que vamos a crear el botón.
Seguido creamos el formulario que como vemos el action apunta a procesa.php que es donde se procesará y hacemos un if por si nos llega una variable GET llamada mensaje y que su valor sea enviado.
Eso querrá decir que el formulario habrá pasado las validaciones jQuery o en su defecto las que hemos creado en php y se ha enviado al archivo procesa.php donde se habrá hecho correctamente la inserción y se ha devuelto a la página con la variable GET mensaje, y debajo del botón veremos un mensaje que dirá el mensaje fue enviado correctamente.
La hoja de estilos
Creamos un archivo llamado estilos.css y lo guardamos en la carpeta de nuestro proyecto, seguido incluímos el siguiente código.
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
body{
width: 700px;
margin: auto;
background-color: #c3c3c3;
}
label{
display: block;/*con esto colocamos las etiquetas label encima de los campos*/
font-weight: bold;
}
.contacto{
border: 1px solid #CED5D7;
border-radius: 6px;
padding: 45px 45px 20px;
margin-top: 50px;
background-color: white;
box-shadow: 0px 5px 10px #B5C1C5, 0 0 0 10px #999;/*con esto le colocamos un borde al formulario*/
}
.contacto input[type='text'], .contacto textarea{
padding: 12px 14px;
width: 394px;
border: 1px solid #CED5D7;
resize: none;
box-shadow:0 0 0 3px #EEF5F7;
margin: 5px 0;
}
.contacto input[type='text']:focus, .contacto textarea:focus{
outline: none;
box-shadow:0 0 0 3px #dde9ec;
}
*{
font-family: Arial;
font-size: 12px;
color: #798e94;
}
.formulario{
margin-top: 100px;
}
.error{
background-color: #BC1010;
padding: 8px 10px;
border-radius: 4px;
color: white;
font-weight: bold;
font-size: 12px;
margin-left: 16px;
margin-top: 6px;
position: absolute;
}
.error:before{ /* Este es un truco para crear una flechita */
content: '';
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #BC1010;
border-left: 10px solid transparent;
left: -16px;
position: absolute;
top: 5px;
}
|
Con esto, ya tenemos nuestro formulario estilizado y los mensajes de error con un diseño agradable. Ahora debemos crear nuestro archivo funciones.js que será donde este todo el código javascript.
Creamos el código javascript
Creamos un nuevo archivo llamado funciones.js y dentro vamos a crear todas las validaciones de nuestro formulario, incluído un pequeño plugin que crearemos para darle un mejor aspecto al formulario, este es el código.
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
//con esta función de jQueryUI damos un estilo bastante elegante
//al botón de nuestro formulario
$(function() {
$( "#demo").button();
$("#demo").click(function() {
});
});
//*******************************************************************
//Aquí comenzamos creando un plugin, podríamos haber realizado estás
//funciones de otra forma, pero así comprendemos como se crean los plugins
//con jQuery, que aunque no soy experto en el tema como ya dije, mirando la
//documentación se aprende bastante
jQuery.fn.LlenarLimpiarCampos = function(){
this.each(function(){
$(".nom").attr("value","Introduzca su nombre");
$(".nom").focus(function(){
if($(".nom").attr("value")=="Introduzca su nombre"){
$(".nom").attr("value","");
}
});
$(".nom").blur(function(){
if($(".nom").attr("value")==""){
$(".nom").attr("value","Introduzca su nombre");
}
});
$(".email").attr("value","Introduzca su email");
$(".email").focus(function(){
if($(".email").attr("value")=="Introduzca su email"){
$(".email").attr("value","");
}
});
$(".email").blur(function(){
if($(".email").attr("value")==""){
$(".email").attr("value","Introduzca su email");
}
});
$(".asunto").attr("value","Introduzca su asunto");
$(".asunto").focus(function(){
if($(".asunto").attr("value")=="Introduzca su asunto"){
$(".asunto").attr("value","");
}
});
$(".asunto").blur(function(){
if($(".asunto").attr("value")==""){
$(".asunto").attr("value","Introduzca su asunto");
}
});
$(".mensaje").attr("value","Introduzca su mensaje");
$(".mensaje").focus(function(){
if($(".mensaje").attr("value")=="Introduzca su mensaje"){
$(".mensaje").attr("value","");
}
});
$(".mensaje").blur(function(){
if($(".mensaje").attr("value")==""){
$(".mensaje").attr("value","Introduzca su mensaje");
}
});
});
return this;
};
//siempre que creemos un plugin debemos llamarlo, sino no funcionará
$(document).ready(function(){
$(this).LlenarLimpiarCampos();
});
//*************************************************************************
//realizamos las validaciones de nuestro formulario con jQuery
$(document).ready(function () {
var emailreg = /^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/;
$(".boton").click(function(){
$(".error").remove();
if( $(".nom").val() == "" || $(".nom").val() == "Introduzca su nombre"){
$(".nom").focus().after("<span class='error'>Ingrese su nombre</span>");
return false;
}else if($(".nom").val().length < 2){
$(".nom").focus().after("<span class='error'>Mínimo 2 carácteres para el nombre</span>");
return false;
}else if( $(".email").val() == "" || !emailreg.test($(".email").val()) || $(".email").val() == "Introduzca su email"){
$(".email").focus().after("<span class='error'>Ingrese un email correcto</span>");
return false;
}else if( $(".asunto").val() == "" || $(".asunto").val() == "Introduzca su asunto"){
$(".asunto").focus().after("<span class='error'>Ingrese un asunto</span>");
return false;
}else if( $(".mensaje").val() == "" || $(".mensaje").val() == "Introduzca su mensaje"){
$(".mensaje").focus().after("<span class='error'>Ingrese un mensaje</span>");
return false;
}else if($(".mensaje").val().length < 20){
$(".mensaje").focus().after("<span class='error'>Mínimo 20 carácteres para el mensaje</span>");
return false;
}
});
//******************************************************************************************************
//realizamos funciones para que sea más práctico nuestro formulario
$(".nom, .asunto, .mensaje").keyup(function(){
if ( $(this).val() != "" ){
$(".error").fadeOut();
return false;
}
});
$(".nom").keyup(function(){
if ($(this).val().length >= 2){
$(".error").fadeOut();
return false;
}
});
$(".email").keyup(function(){
if ( $(this).val() != "" && emailreg.test($(this).val())){
$(".error").fadeOut();
return false;
}
});
$(".mensaje").keyup(function(){
if ($(this).val().length >= 20){
$(".error").fadeOut();
return false;
}
});
});
|
Para crear nuestro plugin debe ir este código jQuery.fn.nombre de nuestro plugin = function(){ y esta línea también es obligada
this.each(function(){ aquí iría nuestro código }); return this; hacemos un return y cerramos el plugin con };
Después sólo nos hara falta llamarlo donde nos haga falta.
Con esto ya tenemos validado nuestro formulario correctamente, tanto en php como en jQuery, pasamos a crear nuestro archivo procesa.php que si nos damos cuenta a la hora de validar el formulario con php, el else quiere decir que todo el php se ha validado correctamente, nos envía a procesa.php, aquí es donde cogeremos los datos del formulario para procesarlos con la clase que crearemos.
Nuestra clase
Creamos una carpeta llamada class dentro de nuestro proyecto y creamos un archivo llamado class.php, dentro colocamos el siguiente código.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?php
class Conectar
{
public static function con()
{
$conexion = mysql_connect("localhost","root","");
mysql_query("SET NAMES 'UTF8'");
mysql_select_db("comentarios");
return $conexion;
}
}
class Comentarios
{
function nuevo_comentario($nombre,$email,$asunto,$mensaje)
{
$sql = "INSERT INTO mensajes VALUES(null,'".mysql_real_escape_string($nombre)."',
'".mysql_real_escape_string($email)."',
'".mysql_real_escape_string($asunto)."',
'".mysql_real_escape_string($mensaje)."',now(),now());";
$res = mysql_query($sql,Conectar::con());
}
}
?>
|
Con el código anterior creamos nuestra clase Conectar y la función con para realizar la conexión con la base de datos, aunque ya sabemos que cada clase debería ir en un archivo, está vez creamos las dos clases en el mismo archivo para agilizar un poco todo y no llenar más el post, seguido creamos la clase Comentarios y la función nuevo_comentario con los parámetros del archivo procesa.php, que es quién le dará los valores y seguidamente realizamos la inserción en la base de datos, le pasamos a las variables que vienen del formulario la función mysql_real_escape_string para evitarnos las inyecciones de código, el primer campo le ponemos null porque es autoincrementable y nos lo da la base de datos, y los dos útlimos le asignamos la función now(), que nos dará la hora y la fecha en que se realizó la inserción.
El archivo procesa.php
Aquí recibimos los datos del formulario, realizamos las validaciones con php por si acaso el usuario tiene desactivado javascript para comprobar que los campos no vengan vacíos, que el email este en un formato correcto y en el caso del nombre y el mensaje con la función strlen comprobamos que se escriban un número mínimo de caracteres y seguido, haciendo un require_once de la clase donde tenemos la conexión con nuestra base de datos y la función para realizar las inserciones lo procesamos, en caso de que se haga todo correctamente nos devolverá de nuevo a nuestro formulario con la variable GET mensaje y con valor enviado, con lo que nos mostrará un mensaje de que todo ha ido bien, este es el código.
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
|
<?php
if(isset($_POST['boton'])){
$error = array(); // declaramos un array para almacenar los errores
if($_POST['nom'] == ''){
$error[1] = '<span class="error">Ingrese su nombre</span>';
}else if(strlen($_POST['nom']) < 2){
$error[1] = '<span class="error">Mínimo 2 carácteres para el nombre</span>';
}else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
$error[2] = '<span class="error">Ingrese un email correcto</span>';
}else if($_POST['asunto'] == ''){
$error[3] = '<span class="error">Ingrese un asunto</span>';
}else if($_POST['mensaje'] == ''){
$error[4] = '<span class="error">Ingrese un mensaje</span>';
}else if(strlen($_POST['mensaje']) < 20){
$error[4] = '<span class="error">Mínimo 20 carácteres para el nombre</span>';
}else{
require_once("class/class.php");
$nuevo = new Comentarios();
$nuevo->nuevo_comentario($_POST['nom'],$_POST['email'],$_POST['asunto'],$_POST['mensaje']);
header("Location:formulario_contacto.php?mensaje=enviado");
}
//si no existe la variable post boton, osea si se ha intentado acceder
//directamente desde la url, se le devuelve a la página.
}else{
header("Location:formulario_contacto.php");
}
?>
|
Y ya está amigos, espero que les sea de gran utilidad y si tienes cualquier duda visita http://www.uneweb.edu.ve/ y échale un vistazo a nuestros cursos y diplomados.
No hay comentarios:
Publicar un comentario