Tutorial para crear un formulario de Contacto en PHP

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL

COMPUTACIÓN GRÁFICA PARA LA WEB

Tutorial para Desarrollar un

Formulario de Contacto

Profesor: Rubén Meléndez Montes de Oca Computación Gráfica para la Web

Diseño Gráfico Profesional Instituto AIEP - Sede Rancagua

Rubén Meléndez M. / [email protected] / http://tallervirtual.wordpress.com Mayo 2007



Notas Preliminares.

• Adjunto al tutorial vienen 2 archivos de texto con líneas de código, estas se deben copiar y pegar de acuerdo a las instrucciones expuestas a continuación.

• Los códigos adjuntos no requieren del uso ni la creación de una Base de Datos. Se requiere nada más que el enlace a una cuenta de correo electrónica existente y un servidor web apache.

• Para que Dreamweaver “lea” el código se debe tener instalado localmente la aplicación APPSERV. • Para su funcionamiento en la red se debe disponer de un hosting con un servidor Apache. • La raíz del sitio deberá estar la carpeta www contenida en la siguiente ruta c:/appserv/www [esta se encuentra

creada por defecto una vez instalado el appserv].

…..manos al Código




1. Instalación de AppServ [Apache, PHP, MySQL]

AppServ es un software que nos permite instalar sobre el SO. Windows los software Apache, PHP, MySQL de forma conjunta. Antiguamente la instalación se hacia por separado y programa a programa, siendo el principal inconveniente que la configuración se hacia directamente modificando líneas de código bastante específicas, con la consecuente dificultad para los que no somos programadores profesionales.

Esta es una aplicación bastante útil para empezar a familiarizarse con bases de datos, gestores de contenido, foros, blogs, por nombrar algunas de tantas otras aplicaciones, ya que al convertir nuestro pc en un servidor nos permite realizar pruebas sobre el y luego publicarlas en la red.

• Descargar el software del siguiente sitio: http://www.appservnetwork.com/ • Descargado el ejecutable, ejecutar la instalación, tras recibir el saludo de bienvenida y hacemos Click en Siguiente. • Directorio de Instalación: en esta pantalla nos solicita el directorio en el que queremos instalar la aplicación, por defecto nos marca

“c:/appserv”, pulsar Siguiente. [No cambien el Directorio]. • Tipo de Instalación: Elegimos Typical. • Server Information: La casilla Server Name la dejamos por defecto con “Localhost” y en la casilla Administrator E-mail Address

agreguen su cuenta de correo (si lo dejan por defecto no ocurre nada, se puede editar mas tarde). El campo “HTTP Port” lo dejamos

como viene (80), salvo que queramos atender las peticiones en otro puerto ¿no?. Pulsamos Siguiente.

• MySql Information: En la casilla Username coloquen su nombre (administrador de la base de datos) y en la casilla Password una

contraseña. El apartado Charset lo dejamos tal cual como viene. Pulsamos en Siguiente. • Progreso de la instalación: Aparece una pantalla que nos avisa de que ha finalizado la misma, debiendo dejar marcadas las opciones

que vienen por defecto. Finalmente pulsamos en Close o Cerrar.




• Comprobar la instalación: Abrir el navegador (Explorer, firefox, etc) y tipear http://localhost debe aparecer en la pantalla siguiente la

siguiente información.

Si aparece esta pantalla felicitaciones!!!!!!. tú computador ahora tiene instalado un servidor apache, php y MySQL.

Ahora, si la pantalla no aparece puede que Apache o MySQL no están funcionado bien, y deban volver a instalarlo.

En su defecto también puede que tengan instalado en su PC el IIS [Internet Information Server] el cual debe ser desactivado en PANEL DE CONTROL – AGREGAR O QUITAR PROGRAMAS – AGREGAR O QUITAR COMPONENTES DE WINDOWS – DESACTIVAR LA CASILLA DEL I.I.S. como se indica a continuación.


http://localhost/



.




2. El Directorio Raiz del Sitio

Una vez instalado el appserv nuestro pc esta operando con un servidor de prueba local, es sumamente importante entonces que tengamos la siguiente consideración:

Crear todos nuestros archivos php o html dentro de la carpeta www la cual ya existe en el C: del computador




3. Formulario de Contacto y los Códigos.

Adjunto a este documento vienen dos archivos de texto que incluyen los siguientes códigos de fuente:

a. Archivo process.php

Este código es el encargado de validar cada uno de los items o campos en blanco que incluye el formulario de contacto, como por ejemplo el correo al cual se direcciona el mensaje, el asunto, los datos del emisor, mensajes de error, como lo es el llenado de campos, la invalidez del correo electrónico (este se valida por medio del arroba, de echo escriban cualquier correo con una @ incluida y aun así lo validara, para estos casos se suele ocupar un script, el cual valida realmente las direcciones).

else{ $message ="nombre: ".$nombre."<br>"; $message .="telf: ".$telf."<br>"; $message .="email: ".$email."<br>"; $message .="direccion: ".$direccion."<br>"; $message .="cp: ".$cp."<br>"; $message .="localidad: ".$localidad."<br>"; $message .="comentario: ".$comentario."<br>"; $message = stripslashes($message); $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type:text/html; charset=iso-8859-1\r\n"; $headers .= "From: $email\r\n"; $headers .= "Repaly-to: $email\r\n"; $headers .= "Cc: $email\r\n"; mail($recipiente,$asunto,$message,$headers); echo "Tú mensaje ha sido enviado";!<BR> echo "Gracias por tú mensage.<BR>Te respondere lo antes posible. <BR>"; } ?> <link href="/estilo.css" rel="stylesheet" type="text/css" /> <body bgcolor="#666666"> <link href="/estilo.css" rel="stylesheet" type="text/css" /> <a href="../index.php" class="arial_verde2">volver</a>

<?php $recipiente = "[email protected]"; $asunto = "contacto"; $error = 0; $nombre = $_POST['nombre']; $telf = $_POST['telf']; $email = $_POST['email']; $direccion = $_POST['direccion']; $cp = $_POST['cp']; $localidad = $_POST['localidad']; $comentario = $_POST['comentario']; if($nombre == "" || $telf == "" || $email == "" || $comentario == ""){ $error=1; } elseif(!eregi("^[a-z0-9]+([_\\.-][a-z0-9]+)*" ."@"."([a-z0-9]+([\.-][a-z0-9]+)*)+"."\\.[a-z]{2,}"."$",$email)){ $error=2; } if($error==1){ echo "El siguiente error ha ocurrido!<BR>"; echo "No ha rellenado todos los campos obligatorios.<BR> Por favor vuelva <A HREF=\"javascript:history.back()\">atras</A>.<BR>"; } elseif($error==2){ echo "El siguiente error ha ocurrido!<BR>"; echo "El correo electronico es invalido!<BR> Por favor vuelva <A HREF=\"javascript:history.back()\">atras</A>.<BR>"; }

Rubén Meléndez M. / taller.virtual.aiep@gmMayo 2007

ail.com / http://tallervirtual.wordpress.com



En el directorio raiz del sitio creen una carpeta con el nombre contacto (puede ser otro, pero RECUERDEN que se debe realizar el cambio de nombre en el archivo contacto.html) y graben el archivo process con la extensión php.




b. Archivo contacto.html

Este código es el que nos permite crear las tablas y los campos en blanco para ser rellenados, además de los campos “dinámicos” que serán “interpretados y ejecutados” por el archivo process.php.[La figura / es la que nos indica que el archivo se encuentra en una subcarpeta].

<form action="contacto/process.php" method="post"> <table width="393" border="0px"> <tr> <td class="arial_amarillo" colspan="2">Por favor rellena todos los campos marcados con <span class="centrados">[*] </span>y me pondre en contacto contigo.</td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td width="138" class="editorial">Nombre:</td> <td width="*"><input type=text name='nombre' size="25"> *</td> </tr> <tr> <td width="138" class="editorial">Telefono:</td> <td width="*"><input type=text name='telf' size="25"> *</td> </tr> <tr> <td width="138" class="editorial">Email:</td> <td width="*"><input type=text name='email' size="25"> *</td> </tr> <tr> <td width="138" class="editorial">Direccion:</td> <td width="*"><input type=text name='direccion' size="25"></td> </tr> <tr> <td width="138" class="editorial">Pais:</td> <td width="*"><input type=text name='cp' size="25"></td> </tr> <tr> <td width="138" class="editorial">Asunto:</td> <td width="*"><input type=text name='localidad' size="25"></td> </tr> <tr> <td width="138" height="70" valign="top" class="editorial">Comentario:</td><td width="*"><textarea name='comentario' rows="4" cols="40"></textarea></td> </tr> <tr> <td colspan="2" height="40" align="center" valign="bottom"><input type=reset value='Borrar todo'> <input type=submit value='Enviar Datos'></td> </tr> </table> </form>




Para este creen un archivo html en blanco dentro de dreamweaver llamado contacto.html, copien el código en la vista programador. Debería verse algo así en la vista programador y diseño.




Seleccionen previsualizar (F12), este debería ser el resultado en el navegador. Los atributos del texto (color, tamaño) y color de fondo los manejan ustedes de acuerdo a vuestro criterio de diseñadores. Hasta aquí el tutorial. Nota: En el caso particular de esta web hay de por medio atributos generados por medio de CSS, que nada tienen que ver con la programación del formulario de contacto.

Este es el resultado final, trabajado con hojas de estilo y la sentencia “requerir”. Si se fijan el archivo contacto.html aparece dentro de otra hoja llamada contacto.php con imágenes, color y texto.




4. Bibliografía Web del Proyecto Appserv http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=21 Tutorial de Instalación http://www.thestromboliproject.com/tutoriales/extras/appserv-apache-+-mysql-2.htm Curso de Diseño en PHP y MySQL Training Center Informatico. Santiago 2005. Apuntes Personales de Programación


http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=21

http://www.thestromboliproject.com/tutoriales/extras/appserv-apache-+-mysql-2.htm

Tutorial para crear un formulario de Contacto en PHP

Technology

Transcript of Tutorial para crear un formulario de Contacto en PHP