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:
<!-- Styling for the form -->
<style>
form {
margin: 20px auto;
width: 400px;
padding: 1em;
border: 1px solid #f0d5ad;
border-radius: 1em;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
width: 300px;
-moz-box-sizing: border-box;
}
input:focus, textarea:focus {
border-color: #000;
}
textarea {
vertical-align: top;
height: 5em;
resize: vertical;
}
button {
margin-top: 10px;
margin-left: 8em;
}
</style>
<!-- HTML for the Form -->
<form action="/api/message" method="post">
<div>
<label for="Name">Name:</label>
<input id="Name" name="Name" type="text" value="" pattern="[a-zA-Z]{3,3} [a-zA-Z]{3,3}" title="First and Last name." autofocus required />
</div>
<div>
<label for="Email">Email:</label>
<input id="Email" name="Email" type="email" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}" title="Valid Email only." value="" required />
</div>
<div>
<label for="Message">Message:</label>
<textarea id="Message" name="Message" type="text" value="" required></textarea>
</div>
<button type="submit">Send Message</button>
</form>
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:
### Contact Us
This is a simple contact form. Please fill in your name, first and last, email address, and message. I will get back to you as soon as possible. Thanks.
{{{question}}}
Una vez guardado, puede probar las páginas en el servidor. En su navegador, abra la página http://localhost:8081/contact.
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:
### Message was sent Thank you so much for taking time to send me a message. I will reply as soon as possible.
Sólo un simple mensaje para que el usuario sepa que el mensaje fue enviado correctamente. Puedes ampliar esto como quieras.
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:
go get github.com/microcosm-cc/bluemonday
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():
"fmt"
"github.com/hoisie/web"
"net/smtp"
"github.com/microcosm-cc/bluemonday"
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:
//
// Setup special route for our form processing.
//
goPress.SetPostRoute('/api/message', postMessage)
Esto establece una ruta post de /api/message para ejecutar la función postMessage(). Al final del archivo, agregue este código:
//
// Function: postMessage
//
// Description: This function will send
// the message from them
// the website to the owner
// of the site.
//
// Inputs:
// ctx The web server
// context.
//
func postMessage(ctx *web.Context) string {
//
// Get the post information and send the
// email.
//
name := ctx.Params["Name"]
from := ctx.Params["Email"]
p := bluemonday.UGCPolicy()
message := p.Sanitize(ctx.Params["Message"])
to := "<your email address>"
subject := "Message from User:" + name + " of CustomCT.com"
sendEmail(to, from, subject, message)
//
// Get the messagesent page contents and
// process it.
//
pgloc := goPress.SiteData.Sitebase + "pages/messagesent"
return goPress.RenderPageContents(ctx, goPress.GetPageContents(pgloc), pgloc)
}
//
// Function: sendEmail
//
// Description: This function sends an
// email message.
//
// Inputs:
// to The email address
// to send the
// message
// from The email address
// of the person
// sending the
// message
// subject The subject of the
// message
// message The message of the
// email
//
func sendEmail(to string, from string, subject string, message string) {
body := fmt.Sprintf("To: %s\r\nSubject: %s\r\n\r\n%s", to, subject, message)
auth := smtp.PlainAuth("", "<your email address>", "<your password>", "smtp.gmail.com")
err := smtp.SendMail("smtp.gmail.com:587", auth, from, []string{to}, []byte(body))
if err != nil {
//
// Process the error. Currently, assuming there
// isn't a problem.
//
}
}
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():
//
// Function: SetPostRoute
//
// Description: This function gives an
// easy access to the
// web variable setup in
// this library.
//
// Inputs:
// route Route to setup
// handler Function to run that
// route.
//
func SetPostRoute(route string, handler interface{}) {
web.Post(route, handler)
}
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:
npm install -save nodemailer npm install -save body-parser
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:
var nodemailer = require('nodemailer'); // https://nodemailer.com/
var bodyParser = require('body-parser'); // https://github.com/expressjs/body-parser
//
// create reusable transporter object using the
// default SMTP transport
//
var transporter = nodemailer.createTransport('smtps://<your email name%40<your email domain>:<your password>@smtp.gmail.com');
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:
//
// Configure the body parser library.
//
nodePress.use(bodyParser.urlencoded({
extended: true
}));
Ahora, después de la última llamada a la función nodePress.get(), agregue este código:
nodePress.post('/api/message', function(request, response) {
//
// setup e-mail data
//
var mailOptions = {
from: request.body.Email,
to: '<your email address>',
subject: 'Message from ' + request.body.Name + ' on contact form.',
text: request.body.Message,
html: request.body.Message
};
//
// Send the email.
//
transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}
//
// Send the user to the message was sent okay page.
//
response.send(page("messagesent"));
});
});
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:
gem install ruby-gmail
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:
require 'gmail' # https://github.com/dcparker/ruby-gmail
Después de todas las definiciones get, agregue las líneas siguientes:
post '/api/message' do
#
# Get the parameters from the form.
#
name = params[:Name]
email = params[:Email]
message = params[:Message]
#
# Create and send the email.
#
Gmail.new('<your email address>', '<your password>') do |gmail|
gmail.deliver do
to "<your email address>"
from email
subject "Message from " + name
text_part do
body message
end
end
end
#
# Send the user to the message sent page.
#
page 'messagesent'
end
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:
composer update composer require phpmailer/phpmailer
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:
//
// Function: ProcessPage
//
// Description: This function will process
// a page into the template,
// process all Mustache
// macros, and process all
// shortcodes.
//
// Inputs:
// $layout The layout for
// the page
// $page The pages main
// contents
//
function ProcessPage( $layout, $page ) {
global $site, $parts, $helpers;
//
// Get the page contents.
//
$parts['content'] = figurePage($page);
//
// First pass on Handlebars.
//
$phpStr = LightnCandy::compile($layout, $helpers);
$renderer = LightnCandy::prepare($phpStr);
$page = $renderer($parts);
//
// Process the shortcodes.
//
$pageShort = processShortcodes($page);
//
// Second pass Handlebars.
//
$phpStr = LightnCandy::compile($pageShort, $helpers);
$renderer = LightnCandy::prepare($phpStr);
$page = $renderer($parts);
//
// Return the results.
//
return($page);
}
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:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';
Esto carga la biblioteca phpmailer. Ahora, después de la última función $app->get(), agregue este código:
//
// This route is for processing the post request from the
// email form on the website.
//
$app->post('/api/message', function(Request $request, Response $response) {
global $_POST;
//
// Get the post variables.
//
$Name = $_POST['Name'];
$Email = $_POST['Email'];
$Message = $_POST['Message'];
//
// Create the email message and send it.
//
$mail = new PHPMailer;
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.gmail.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = '<your email address>'; // SMTP username
$mail->Password = '<your password>'; // SMTP password
$mail->SMTPSecure = 'tls'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 587; // TCP port to connect to
$mail->setFrom($Email, $Name);
$mail->addAddress('<your email>', '<your name>'); // Add a recipient
$mail->Subject = "Message from $Name";
$mail->Body = $Message;
if(!$mail->send()) {
echo 'Message could not be sent.';
echo 'Mailer Error: ' . $mail->ErrorInfo;
} else {
$newResponse = SetBasicHeader($response);
$newResponse->getBody()->write(page('messagesent'));
return($newResponse);
}
});
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.
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
