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. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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 Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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. Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB • 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. Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB . Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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 Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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). <?php else{ $message =quot;nombre: quot;.$nombre.quot;<br>quot;; $recipiente = quot;contacto.baudio@gmail.comquot;; $message .=quot;telf: quot;.$telf.quot;<br>quot;; $asunto = quot;contactoquot;; $message .=quot;email: quot;.$email.quot;<br>quot;; $error = 0; $message .=quot;direccion: quot;.$direccion.quot;<br>quot;; $nombre = $_POST['nombre']; $message .=quot;cp: quot;.$cp.quot;<br>quot;; $telf = $_POST['telf']; $message .=quot;localidad: quot;.$localidad.quot;<br>quot;; $email = $_POST['email']; $message .=quot;comentario: quot;.$comentario.quot;<br>quot;; $direccion = $_POST['direccion']; $message = stripslashes($message); $cp = $_POST['cp']; $headers = quot;MIME-Version: 1.0rnquot;; $localidad = $_POST['localidad']; $headers .= quot;Content-type:text/html; charset=iso-8859-1rnquot;; $comentario = $_POST['comentario']; $headers .= quot;From: $emailrnquot;; if($nombre == quot;quot; || $telf == quot;quot; || $email == quot;quot; || $comentario == quot;quot;){ $error=1; $headers .= quot;Repaly-to: $emailrnquot;; } $headers .= quot;Cc: $emailrnquot;; elseif(!eregi(quot;^[a-z0-9]+([_.-][a-z0-9]+)*quot; .quot;@quot;.quot;([a-z0-9]+([.-][a-z0-9]+)*)+quot;.quot;.[a- mail($recipiente,$asunto,$message,$headers); z]{2,}quot;.quot;$quot;,$email)){ echo quot;Tú mensaje ha sido enviadoquot;;!<BR> $error=2; echo quot;Gracias por tú mensage.<BR>Te respondere lo antes posible. } <BR>quot;; if($error==1){ } echo quot;El siguiente error ha ocurrido!<BR>quot;; ?> echo quot;No ha rellenado todos los campos obligatorios.<BR> Por favor <link href=quot;/estilo.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> vuelva <A HREF=quot;javascript:history.back()quot;>atras</A>.<BR>quot;; <body bgcolor=quot;#666666quot;> } <link href=quot;/estilo.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; /> elseif($error==2){ <a href=quot;../index.phpquot; class=quot;arial_verde2quot;>volver</a> echo quot;El siguiente error ha ocurrido!<BR>quot;; echo quot;El correo electronico es invalido!<BR> Por favor vuelva <A HREF=quot;javascript:history.back()quot;>atras</A>.<BR>quot;; } Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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. Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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=quot;contacto/process.phpquot; method=quot;postquot;> <table width=quot;393quot; border=quot;0pxquot;> <tr> <td class=quot;arial_amarilloquot; colspan=quot;2quot;>Por favor rellena todos los campos marcados con <span class=quot;centradosquot;>[*] </span>y me pondre en contacto contigo.</td> </tr> <tr> <td colspan=quot;2quot;></td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Nombre:</td> <td width=quot;*quot;><input type=text name='nombre' size=quot;25quot;> *</td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Telefono:</td> <td width=quot;*quot;><input type=text name='telf' size=quot;25quot;> *</td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Email:</td> <td width=quot;*quot;><input type=text name='email' size=quot;25quot;> *</td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Direccion:</td> <td width=quot;*quot;><input type=text name='direccion' size=quot;25quot;></td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Pais:</td> <td width=quot;*quot;><input type=text name='cp' size=quot;25quot;></td> </tr> <tr> <td width=quot;138quot; class=quot;editorialquot;>Asunto:</td> <td width=quot;*quot;><input type=text name='localidad' size=quot;25quot;></td> </tr> <tr> <td width=quot;138quot; height=quot;70quot; valign=quot;topquot; class=quot;editorialquot;>Comentario:</td><td width=quot;*quot;><textarea name='comentario' rows=quot;4quot; cols=quot;40quot;></textarea></td> </tr> <tr> <td colspan=quot;2quot; height=quot;40quot; align=quot;centerquot; valign=quot;bottomquot;><input type=reset value='Borrar todo'> <input type=submit value='Enviar Datos'></td> </tr> </table> </form> Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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. Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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. Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

INSTITUTO PROFESIONAL AIEP DISEÑO GRAFICO PROFESIONAL COMPUTACIÓN GRÁFICA PARA LA WEB 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 Rubén Meléndez M. / taller.virtual.aiep@gmail.com / http://tallervirtual.wordpress.com Mayo 2007

http://www.slideshare.net	90
http://baudio.cl	62
http://utswebavanzado.blogspot.com	26
http://utswebavanzado.blogspot.mx	10
http://utswebavanzado.blogspot.com.ar	3

Tutorial para crear un formulario de Contacto en PHP

by baudio

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 191

Statistics

Tutorial para crear un formulario de Contacto en PHP Presentation Transcript