Share
Ahora que tiene un sitio web que utiliza un sistema de archivos planos, le gustaría recibir comentarios de sus usuarios. Agregar Disqus es fácil ya que es todo el código JavaScript agregado a la página, pero no es lo que quieres. Quieres que puedan enviarte un correo electrónico directamente para que puedas responder solo a ellos.
Puede crear un sistema todo JavaScript para enviar correos electrónicos directamente desde la computadora del usuario, pero eso deja su correo abierto a los spammers capaces de recuperarlo de su código y venderlo a otros spammers. Por lo tanto, necesita ocultar su dirección de correo electrónico en el servidor.
Este tutorial trata sobre agregar un sistema de mensajes de correo electrónico a su nuevo PressCMS (es decir. phppress, RubyPress, nodePress, y goPress). Estoy empezando con el front-end y luego dirijo el back-end para cada sistema. Supongo que ya tiene estos servidores en su sistema.
Dado que el código de usuario será el mismo para cada servidor, tendrá que copiar estos nuevos archivos en cada uno de los directorios del servidor. Por lo tanto, hablaré sobre los archivos en la ruta como se menciona en el directorio del servidor.
En lugar de agregar un estilo de formulario específico al tema, este script de formulario tiene todo en un solo lugar. Crear el archivo preguntas.html en el sitio / partes Directorio para el sitio web con el siguiente contenido:
Esto crea un formulario básico que solicita un nombre completo (nombre y apellidos), correo electrónico y un mensaje. Este formulario utiliza expresiones regulares para garantizar que el nombre y la dirección de correo electrónico sean válidos. Si lo que el usuario ingresa en esos campos no coincide con la expresión regular en el modelo Directiva, entonces el formulario no será enviado. Una ventana emergente le pedirá al usuario que complete correctamente el campo con el mensaje en el título parámetro. Cada campo de entrada tiene la necesario primitivo también. Esto evita que se envíen formularios en blanco. Esta es la validación de datos mínima que debe usar en el front-end.
los acción directiva en el formar element le dice al navegador web a qué dirección enviar los datos del formulario. los método directiva le dice al navegador para enviar como una enviar método. Los datos del formulario se colocarán en la URL de la solicitud posterior al servidor. Esto es un Cadena de consulta. El servidor entonces procesa la información en la cadena de consulta.
En el sitio / páginas directorio, crea el archivo contact.md y coloque este código:
### Contáctenos Este es un formulario de contacto simple. Por favor ingrese su nombre, nombre y apellido, dirección de correo electrónico y mensaje. Me pondré en contacto con usted lo antes posible. Gracias. pregunta
Una vez guardado, puedes probar las páginas en el servidor. En su navegador, abra la página http: // localhost: 8081 / contact.
Página de formulario de contacto los Contáctenos La página se verá como la imagen de arriba. Observe el resaltado del campo Nombre directamente al cargar. los enfoque automático La directiva crea este comportamiento deseado. Siempre es un buen diseño tener el primer campo que el usuario necesita escribir enfocado automáticamente.
Después de enviar el mensaje, un mensaje de confirmación para el usuario sería bueno. En el sitio / páginas directorio, crea el archivo messagesent.md y coloque este código:
### Mensaje enviado Muchas gracias por tomarse el tiempo para enviarme un mensaje. Responderé tan pronto como sea posible.
Solo un mensaje simple para que el usuario sepa que el mensaje se envió correctamente. Puede expandirse sobre esto como quiera.
Página de confirmación de mensaje enviado Para sanear el mensaje dado por el usuario, estoy usando el Lunes azul biblioteca. Para cargar esa biblioteca en su sistema, necesita ejecutar esta línea de comando:
ve a github.com/microcosm-cc/bluemonday
Esto hará que la biblioteca esté disponible para su programa. Esa es la única biblioteca no estándar necesaria.
Abre el goPressServer.go archivo y agregar esto a la parte superior del archivo dentro de la importar () declaración:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
Enviar mensajes de correo electrónico desde el servidor requiere estas bibliotecas. Después de la línea que tiene goPress.DefaultRoutes ( Llamada de función, agregue el siguiente código:
Accentsconagua
// // Configurar ruta especial para nuestro procesamiento de formularios. // goPress.SetPostRoute ('/ api / message', postMessage)Esto establece una ruta de publicación de / api / mensaje para ejecutar la función mensaje posterior (). Al final del archivo, agregue este código:
// // Función: postMessage // // Descripción: Esta función enviará // el mensaje de ellos // el sitio web al propietario // del sitio. // // Entradas: // ctx El servidor web // contexto. // func postMessage (ctx * web.Context) string // // Obtenga la información de la publicación y envíe el // correo electrónico. // nombre: = ctx.Params ["Nombre"] desde: = ctx.Params ["Correo electrónico"] p: = bluemonday.UGCPolicy () mensaje: = p.Sanitize (ctx.Params ["Mensaje"]) a: = ""subject: =" Mensaje del usuario: "+ nombre +" de CustomCT.com "sendEmail (to, from, subject, message) // // Obtenga el contenido de la página messageent y // procesarlo. // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" return goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Función: sendEmail // // Descripción: Esta función envía un // mensaje de correo electrónico. / / // Entradas: // a La dirección de correo electrónico // para enviar el // mensaje // desde La dirección de correo electrónico // de la persona // enviando el // mensaje // asunto El asunto del // mensaje // mensaje El mensaje de // email // func sendEmail (a cadena, desde cadena, cadena de asunto, cadena de mensaje) cuerpo: = fmt.Sprintf ("Para:% s \ r \ nSujeto:% s \ r \ n \ r \ n% s ", para, asunto, mensaje) auth: = smtp.PlainAuth (" "," " "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, from, [] string to, [] byte (body)) if err! = nil // // Procesar el error. Actualmente, suponiendo que // no es un problema. //
Estas dos funciones conforman el controlador para procesar los correos electrónicos enviados desde el navegador. los / api / mensaje ruta llama al mensaje posterior () función. Recupera la información enviada desde el formulario completado por el usuario, desinfecta el mensaje con la biblioteca de BlueMonday y envía un correo electrónico al propietario del sitio utilizando el enviar correo electrónico() función. Tendrá que poner su dirección de Gmail en lugar de la
En el goPress.go archivo, agregue esta función después de la SetGetRoute () función:
// // Función: SetPostRoute // // Descripción: Esta función proporciona un // acceso fácil a la // configuración de la variable web en // esta biblioteca. // // Entradas: // ruta Ruta a configuración // controlador Función para ejecutar esa // ruta. // func SetPostRoute (cadena de ruta, interfaz del manejador ) web.Post (ruta, manejador)
Esta función es exactamente como la SetGetRoute () función. La única diferencia es usar el web.Post () función.
Con estos cambios, su servidor goPress ahora puede enviar sus correos electrónicos del usuario.
Para enviar correos electrónicos desde el nodo, primero deberá instalar el biblioteca de nodemailer y el biblioteca body-parser con la siguiente línea de comando:
npm install -save nodemailer npm install -save body-parser
Entonces necesita cargar las nuevas bibliotecas y configurar el objeto de correo. En la parte superior de la nodePress.js archivo, después de la última biblioteca cargada, agregue estas líneas:
var nodemailer = require ('nodemailer'); // https://nodemailer.com/ var bodyParser = require ('body-parser'); // https://github.com/expressjs/body-parser // // crea un objeto transportador reutilizable utilizando el // transporte SMTP predeterminado // var transporter = nodemailer.createTransport ('smtps: //:@ smtp.gmail.com '); Esto cargará la biblioteca de nodemailer y configurará el componente reutilizable para enviar correos electrónicos. Tienes que reemplazar
Después de la línea que inicializa la variable nodePress, agregue este código:
// // Configurar la biblioteca del analizador del cuerpo. // nodePress.use (bodyParser.urlencoded (extended: true));
Ahora despues de la ultima nodePress.get () Llamada de función, agregue este código:
nodePress.post ('/ api / message', función (solicitud, respuesta) // // configurar datos de correo electrónico // var mailOptions = from: request.body.Email, to: '', asunto:' Mensaje de '+ request.body.Name +' en el formulario de contacto. ', texto: request.body.Message, html: request.body.Message; // // Enviar el correo electrónico. // transporter.sendMail (mailOptions, function (error, info) if (error) return console.log (error); // // Enviar al usuario al mensaje fue enviado correctamente. // response.send ( página ("messagesent"));); ); Este es el controlador para el / api / mensaje dirección. 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 que figura en /mensaje enviado página. El middleware del analizador del cuerpo tiene los parámetros de URL guardados en el request.body Variable y debidamente desinfectado..
Este código funciona para la configuración de Gmail sin autenticación de dos factores. Si tiene autenticación de dos factores, puede consultar el Nodemailer documentación para configurarlo.
Para enviar correos electrónicos en Ruby, deberá instalar el ruby-gmail biblioteca con la siguiente línea de comando:
gema instalar ruby-gmail
Dependiendo de su configuración de Ruby, es posible que necesite usar sudo en frente de la orden. Ahora para cargar la biblioteca, agregue la siguiente línea en la parte superior de la rubypress.rb expediente:
requiere 'gmail' # https://github.com/dcparker/ruby-gmail
Después de todo el obtener Definiciones, agregue las siguientes líneas:
post '/ api / message' do # # Obtenga los parámetros del formulario. # name = params [: Name] email = params [: Email] message = params [: Message] # # Crea y envía el correo electrónico. # Gmail.new ('','') hacer | gmail | gmail.deliver do to ""del asunto del correo electrónico" Mensaje de "+ nombre text_part do body end end end end end # # Envía al usuario a la página del mensaje enviado. # page 'messagesent' end Con estas adiciones, su servidor rubyPress puede procesar formularios de correo electrónico. Una vez que cambies
El último servidor a modificar es el servidor phpPress. Para agregar capacidades de correo electrónico al servidor, voy a instalar el biblioteca phpmailer. Esta es la biblioteca más utilizada en PHP para trabajar con correos electrónicos. Para instalar la biblioteca, necesita ejecutar estos comandos de línea de comandos en el directorio phpPress:
actualización del compositor compositor requiere phpmailer / phpmailer
Desafortunadamente, la actualización del compositor actualizará la biblioteca LightnCandy. Esto es bueno porque es mucho más rápido y fácil de usar. Pero rompe el código del servidor. En el archivo index.php, localice el Página de proceso () Funciona y reemplázala con el siguiente código:
// // Función: ProcessPage // // Descripción: Esta función procesará // una página en la plantilla, // procesará todas las macros de Moustache // y procesará todos los // códigos cortos. // // Entradas: // $ layout El diseño para // la página // $ page Las páginas principales // contenidos // función ProcessPage ($ layout, $ page) global $ site, $ parts, $ helpers; // // Obtener los contenidos de la página. // $ parts ['content'] = figurePage ($ page); // // Primera pasada en manillares. // $ phpStr = LightnCandy :: compile ($ layout, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ partes); // // Procesar los códigos cortos. // $ pageShort = processShortcodes ($ page); // // Segundo paso Manillares. // $ phpStr = LightnCandy :: compile ($ pageShort, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ partes); // // Devuelve los resultados. // return ($ page);
Comparándolo con el código anterior, ya no tiene que trabajar con un archivo temporal. Todo se hace en memoria y por lo tanto es mucho más rápido. Ahora, en la parte superior de la index.php archivo, agregue esto después de la biblioteca de Jade:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // require 'vendor / phpmailer / phpmailer / PHPMailerAutoload.php';
Esto carga la librería phpmailer. Ahora despues de la ultima $ aplicación-> obtener () función, añade este código:
// // Esta ruta es para procesar la solicitud de publicación del // formulario de correo electrónico en el sitio web. // $ app-> post ('/ api / message', función (Solicitud $ solicitud, Respuesta $ respuesta) global $ _POST; // // Obtenga las variables de publicación. // $ Name = $ _POST ['Name' ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Cree el mensaje de correo electrónico y envíelo. // $ mail = new PHPMailer; $ mail-> isSMTP ( ); // Configure el remitente para usar SMTP $ mail-> Host = 'smtp.gmail.com'; // Especifique los servidores SMTP principales y de respaldo $ mail-> SMTPAuth = true; // Habilite la autenticación SMTP $ mail-> Nombre de usuario = ''; // Nombre de usuario SMTP $ mail-> Contraseña = ''; // Contraseña de SMTP $ mail-> SMTPSecure = 'tls'; // Habilitar el cifrado TLS, 'ssl' también se acepta $ mail-> Port = 587; // Puerto TCP para conectarse a $ mail-> setFrom ($ Email, $ Name); $ mail-> addAddress ('',''); // Agregar un destinatario $ mail-> Asunto = "Mensaje de $ Nombre"; $ mail-> Cuerpo = $ Mensaje; if (! $ mail-> send ()) echo 'No se pudo enviar el mensaje.'; echo 'Error del remitente:'. $ mail-> ErrorInfo; else $ newResponse = SetBasicHeader ($ response); $ newResponse-> getBody () -> write (page ('messagesent')); return ($ newResponse); ); Este es un controlador de solicitud de correo para el / api / mensaje camino. 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 $ mail-> Host dirección también.
Le 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. Te dejo el resto a ti como ejercicio..
El método que enseñé aquí es mediante la publicación de los datos del formulario con los datos en la URL. Muchos sitios hoy en día utilizan una API REST con los datos en una JSON Cadena en el cuerpo para realizar la acción. Estas rutinas se adoptan fácilmente para esa metodología, pero ese es un ejercicio para usted (o quizás 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.
