Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Web Servers
Code

Procesamiento de formularios con phpPress, goPress, rubyPress y nodePress

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Ahora que usted tiene un sitio web usando un sistema de archivos plano, le gustaría recibir algunos comentarios de sus usuarios. Añadir Disqus es fácil, ya que es todo el código JavaScript agregado a la página, pero no es lo que quieres. Desea que puedan enviarle un correo electrónico directamente para que pueda responderle sólo a ellos.

Puede crear un sistema JavaScript para enviar correo electrónico directamente desde el equipo del usuario, pero eso deja su correo electrónico abierto a los spammers capaces de recuperarlo de su código y venderlo a otros spammers. Por lo tanto, debe ocultar su dirección de correo electrónico en el servidor.

Este tutorial trata de agregar un sistema de correo electrónico a su nuevo PressCMS (es decir, phpPress, rubyPress, nodePress y goPress). Estoy empezando con el front-end y luego abordando el back-end para cada sistema. Estoy asumiendo que ya tiene estos servidores en su sistema.

Cómo crear el formulario en el explorador

Puesto que el código front-end será el mismo para cada servidor, tendrá que copiar estos nuevos archivos en cada uno de los directorios del servidor. Por lo tanto, voy a hablar de los archivos en la ruta de acceso como se hace referencia desde el directorio del servidor.

En lugar de añadir estilo de forma específica al tema, este script de formulario tiene todo en un solo lugar. Cree el archivo questions.html en el directorio de site/parts del sitio web con el siguiente contenido:

Esto crea un formulario básico que solicita un nombre completo (nombre y apellido), correo electrónico y un mensaje. Este formulario utiliza expresiones regulares para garantizar que el nombre y la dirección de correo electrónico son válidos. Si lo que el usuario ingresa en esos campos no coincide con la expresión regular en la directiva pattern , el formulario no se enviará. Una ventana emergente le pedirá al usuario que rellene correctamente el campo con el mensaje en el parámetro tittle. Cada campo de entrada tiene también la primitiva required . Esto evita que se envíen formularios en blanco. Esta es la validación de datos mínima que debe utilizar en el front-end.

La directiva action en el elemento de form le indica al navegador web a qué dirección debe enviar los datos del formulario. La directiva method indica al navegador que se envíe como un método post. Los datos del formulario se colocarán en la URL de la solicitud de publicación al servidor. Esta es una cadena de consulta. A continuación, el servidor procesa la información en la cadena de consulta.

En el directorio site/pages , cree el archivo contact.md y coloque este código:

Una vez guardado, puede probar las páginas en el servidor. En su navegador, abra la página  http://localhost:8081/contact.

Contact Form Page
Página de formulario de contacto

La página de contacto se verá como en la imagen anterior. Observe el resaltado del campo Nombre directamente al cargar. La directiva autofocus crea este comportamiento deseado. Es siempre buen diseño tener el primer campo que el usuario necesita escribir y es enfocado automáticamente.

Después de enviar el mensaje, un mensaje de confirmación para el usuario sería agradable. En el directorio site/pages, cree el archivo messagesent.md y coloque este código:

Sólo un simple mensaje para que el usuario sepa que el mensaje fue enviado correctamente. Puedes ampliar esto como quieras.

Message Sent Confirmation Page
Página de confirmación de mensaje enviado

Procesando el formulario con goPress

Para sanitizar el mensaje dado por el usuario, estoy usando la biblioteca Blue Monday. Para cargar esa biblioteca en su sistema, necesita ejecutar esta línea de comandos:

Esto hará que la biblioteca esté disponible para su programa. Esa es la única biblioteca no estándar que se necesita.

Abra el archivo goPressServer.go y agregue esto a la parte superior del archivo dentro de la instrucción import():

Los mensajes de correo electrónico desde el servidor requieren estas bibliotecas. Después de la línea que tiene goPress.DefaultRoutes (llamada de función, agregue el código siguiente:

Esto establece una ruta post de /api/message para ejecutar la función postMessage(). Al final del archivo, agregue este código:

Estas dos funciones constituyen el controlador para el procesamiento de correos electrónicos enviados desde el navegador. La ruta /api/message llama a la función postMessage(). Recupera la información enviada desde el formulario llenado por el usuario, sanitiza el mensaje con la biblioteca BlueMonday y envía un correo electrónico al propietario del sitio usando la función sendEmail(). Deberá colocar su dirección de Gmail en lugar del titular <your email address> y la contraseña en el titular <password>.

En el archivo goPress.go, agregue esta función después de la función SetGetRoute():

Esta función es exactamente igual que la función SetGetRoute(). La única diferencia es usar la función web.Post().

Con estos cambios, su servidor goPress puede enviar sus correos electrónicos desde el usuario.

Procesamiento del formulario con nodePress

Para enviar correos electrónicos desde el nodo, primero deberá instalar la biblioteca nodemailer y la biblioteca body-parser con la siguiente línea de comandos:

A continuación, debe cargar las nuevas bibliotecas y configurar el objeto de correo. En la parte superior del archivo nodePress.js, después de la última biblioteca cargada, agregue estas líneas:

Esto cargará la biblioteca del nodemailer y configurará el componente reutilizable para enviar correos electrónicos. Tienes que reemplazar <your email name> con el nombre de tu dirección de correo electrónico (es decir, antes del símbolo @), <your email domain> es el dominio de tu dirección de correo electrónico (es decir, gmail.com para gmail normal o tu nombre de dominio si Tener configurado gmail en su nombre de dominio) y <your password> con la contraseña de su cuenta de correo electrónico.

Después de la línea que inicializa la variable nodePress, agregue este código:

Ahora, después de la última llamada a la función nodePress.get(), agregue este código:

Este es el controlador para la dirección /api/message. Esta función obtiene la información enviada desde el formulario, crea el mensaje de correo electrónico adecuado y lo envía a la dirección de correo electrónico indicada en <your email address>. Después de enviar el correo electrónico, enviará al usuario a la página /messagesent. El middleware body-parser tiene los parámetros de url guardados en la variable request.body y correctamente sanitizados.

Este código funciona para la configuración de Gmail sin autenticación de dos factores. Si tiene una autenticación de dos factores, puede consultar la documentación de Nodemailer para configurarla.

Procesando el formulario con rubyPress

Para enviar correos electrónicos en Ruby, necesitará instalar la biblioteca ruby-gmail con la siguiente línea de comandos:

Dependiendo de la configuración de Ruby, puede que tenga que usar sudo delante del comando. Ahora para cargar la biblioteca, agregue la siguiente línea a la parte superior del archivo rubyPress.rb:

Después de todas las definiciones get, agregue las líneas siguientes:

Con estas adiciones, su servidor rubyPress puede procesar formularios de correo electrónico. Una vez que cambie su <your email address> a su dirección de correo electrónico y <your password> a la contraseña para su servidor de correo electrónico, el script está terminado.

Procesando el formulario con phpPress

El último servidor a modificar es el servidor phpPress. Para agregar capacidades de correo electrónico al servidor, voy a instalar la biblioteca phpmailer. Esta es la biblioteca más utilizada en PHP para trabajar con correos electrónicos. Para instalar la biblioteca, debe ejecutar estos comandos de línea de comandos en el directorio phpPress:

Desafortunadamente, la actualización de composer actualizará la biblioteca LightnCandy. Esto es bueno porque es mucho más rápido y más fácil de usar. Pero rompe el código del servidor. En el archivo index.php, busque la función ProcessPage() y reemplácela con el código siguiente:

Si lo comparas con el código anterior, ya no tienes que trabajar con un archivo temporal. Todo se hace en la memoria y por lo tanto mucho más rápido. Ahora, en la parte superior del archivo index.php, agregue esto después de la biblioteca de Jade:

Esto carga la biblioteca phpmailer. Ahora, después de la última función $app->get(), agregue este código:

Se trata de un gestor de peticiones post para la ruta /api/ message. Recupera los datos del formulario enviados desde el navegador, crea un correo electrónico con él y envía el correo electrónico. PHP toma automáticamente cualquier parámetro de URL y los coloca en la matriz global $_POST.

Tendrá que reemplazar <your email address>, <your password> y <your name> con los valores apropiados para su correo electrónico. Si está utilizando algo que no sea un servidor SMTP de Gmail, también tendrá que cambiar la dirección $mail->Host.

Conclusion

Te he mostrado cómo agregar fácilmente un formulario de correo electrónico a un sitio de pressCMS. La descarga de este tutorial tiene todos estos servidores con sus modificaciones. Por lo tanto, puede descargarlo en lugar de escribir. He hecho un pequeño manejo de errores. Voy a dejarle el resto como un ejercicio.

El método que enseñé aquí es mediante la publicación de datos de formulario con los datos en la URL. Muchos sitios utilizan hoy en día una API REST con los datos en una cadena JSON en el cuerpo para realizar la acción. Estas rutinas se adoptan fácilmente a esa metodología, pero eso es un ejercicio para ti (o tal vez un tutorial futuro). Ahora que sabe cómo hacerlo de esta manera, agregue sus propios formularios a su sitio. Este tipo de personalización es muy divertido. El único límite es tu imaginación.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.