Bây giờ bạn có một trang web sử dụng hệ thống tệp phẳng, bạn muốn nhận được một số phản hồi từ người dùng của mình. Thêm Disqus rất dễ dàng vì nó là tất cả mã JavaScript được thêm vào trang, nhưng nó không phải là những gì bạn muốn. Bạn muốn họ có thể gửi email trực tiếp cho bạn để bạn chỉ có thể trả lời họ.
Bạn có thể tạo một hệ thống tất cả JavaScript để gửi email trực tiếp từ máy tính của người dùng, nhưng điều đó khiến email của bạn mở cho những kẻ gửi spam có thể truy xuất nó từ mã của bạn và bán nó cho những người gửi spam khác. Do đó, bạn cần ẩn địa chỉ email của mình trên máy chủ.
Hướng dẫn này là về cách thêm hệ thống thông báo email vào PressCMS mới của bạn (tức là phpPress , rubyPress , nodePress và goPress ). Tôi đang bắt đầu với front-end và sau đó giải quyết back-end cho mỗi hệ thống. Tôi cho rằng bạn đã có những máy chủ này trên hệ thống của mình.
Cách tạo biểu mẫu trong trình duyệt
Vì mã giao diện người dùng sẽ giống nhau cho mỗi máy chủ, bạn sẽ phải sao chép các tệp mới này vào từng thư mục máy chủ. Do đó, tôi sẽ nói về các tệp trong đường dẫn được tham chiếu từ thư mục máy chủ.
Thay vì thêm kiểu dành riêng cho biểu mẫu vào chủ đề, tập lệnh biểu mẫu này có mọi thứ ở một nơi. Tạo tệp question.html trong site/parts thư mục cho trang web với nội dung sau:
<!-- 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>
Điều này tạo ra một biểu mẫu cơ bản yêu cầu tên đầy đủ (họ và tên), email và tin nhắn. Biểu mẫu này sử dụng cụm từ thông dụng để đảm bảo rằng tên và địa chỉ email hợp lệ. Nếu bất kỳ thứ gì người dùng nhập vào các trường đó không khớp với biểu thức chính quy trong pattern chỉ thị, sau đó biểu mẫu sẽ không được gửi. Một cửa sổ bật lên sẽ yêu cầu người dùng điền đúng vào trường có thông báo trong title tham số. Mỗi trường nhập có required nguyên thủy là tốt. Điều này giữ cho các biểu mẫu trống không được gửi. Đây là xác thực dữ liệu tối thiểu nhất mà bạn nên sử dụng trên giao diện người dùng.
Hành động action chỉ thị trong form cho trình duyệt web biết địa chỉ nào để gửi dữ liệu biểu mẫu đến. Phương thức action lệnh yêu cầu trình duyệt gửi dưới dạng post phương pháp. Dữ liệu biểu mẫu sẽ được đặt vào URL của yêu cầu đăng lên máy chủ. Đây là Chuỗi truy vấn . Sau đó, máy chủ xử lý thông tin trong chuỗi truy vấn.
Trong site/pages thư mục, tạo tệp contact.md và đặt mã này:
### 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}}} Sau khi lưu, bạn có thể thử các trang trong máy chủ. Trong trình duyệt của bạn, hãy mở trang https:// localhost:8081 / contact.
Liên hệ với chúng tôi trang sẽ giống như hình trên. Lưu ý phần đánh dấu của trường Tên ngay khi tải. autofocus chỉ thị tạo ra hành vi mong muốn này. Luôn luôn là một thiết kế tốt để có trường đầu tiên mà người dùng cần nhập vào tiêu điểm một cách tự động.
Sau khi gửi tin nhắn, một thông báo xác nhận cho người dùng sẽ rất hay. Trong site/pages thư mục, tạo tệp messagesent.md và đặt mã này:
### Message was sent Thank you so much for taking time to send me a message. I will reply as soon as possible.
Chỉ là một tin nhắn đơn giản để người dùng biết tin nhắn đã được gửi đúng cách. Bạn có thể mở rộng tùy chọn này tùy thích.
Xử lý biểu mẫu bằng goPress
Để làm sạch thông báo do người dùng đưa ra, tôi đang sử dụng Thứ Hai Xanh thư viện. Để tải thư viện đó trên hệ thống của bạn, bạn cần chạy dòng lệnh sau:
go get github.com/microcosm-cc/bluemonday
Điều này sẽ làm cho thư viện có sẵn cho chương trình của bạn. Đó là thư viện không chuẩn duy nhất cần thiết.
Mở goPressServer.go và thêm tệp này vào đầu tệp bên trong import () tuyên bố:
"fmt"
"github.com/hoisie/web"
"net/smtp"
"github.com/microcosm-cc/bluemonday"
Gửi email từ máy chủ yêu cầu các thư viện này. Sau dòng có goPress.DefaultRoutes( gọi hàm, thêm mã sau:
//
// Setup special route for our form processing.
//
goPress.SetPostRoute('/api/message', postMessage)
Điều này đặt một tuyến đường đăng bài là /api/message để chạy hàm postMessage() . Ở cuối tệp, hãy thêm mã này:
//
// 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.
//
}
}
Hai chức năng này tạo nên trình xử lý để xử lý các email được gửi từ trình duyệt. /api/message định tuyến gọi postMessage() hàm số. Nó truy xuất thông tin được gửi từ biểu mẫu do người dùng điền vào, làm sạch thư bằng thư viện BlueMonday và gửi email đến chủ sở hữu của trang web bằng cách sử dụng sendEmail() hàm số. Bạn sẽ phải đặt địa chỉ Gmail của mình thay cho <your email address> chủ sở hữu và mật khẩu trong <password> chủ sở hữu.
Trong goPress.go , hãy thêm hàm này vào sau SetGetRoute() chức năng:
//
// 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)
}
Hàm này giống hệt như SetGetRoute() hàm số. Sự khác biệt duy nhất là sử dụng web.Post() chức năng.
Với những thay đổi này, máy chủ goPress của bạn hiện có thể gửi email của bạn từ người dùng.
Xử lý biểu mẫu bằng nodePress
Để gửi email từ nút, trước tiên bạn cần cài đặt thư viện gật đầu và thư viện phân tích cú pháp cơ thể bằng dòng lệnh sau:
npm install -save nodemailer npm install -save body-parser
Sau đó, bạn cần tải các thư viện mới và cấu hình đối tượng mailer. Ở đầu nodePress.js tệp, sau khi thư viện cuối cùng được tải, hãy thêm các dòng sau:
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');
Thao tác này sẽ tải thư viện gật đầu và thiết lập thành phần có thể tái sử dụng để gửi email. Bạn phải thay thế <your email name> với tên địa chỉ email của bạn (tức là trước ký hiệu @), <your email domain> là miền cho địa chỉ email của bạn (tức là gmail.com cho gmail thông thường hoặc tên miền của bạn nếu bạn đã thiết lập gmail trên tên miền của mình) và <your password> bằng mật khẩu cho tài khoản email của bạn.
Sau dòng khởi tạo biến nodePress, hãy thêm mã này:
//
// Configure the body parser library.
//
nodePress.use(bodyParser.urlencoded({
extended: true
}));
Bây giờ, sau nodePress.get() cuối cùng gọi hàm, thêm mã này:
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"));
});
});
Đây là trình xử lý cho /api/message địa chỉ. Chức năng này nhận thông tin được gửi từ biểu mẫu, tạo thông báo email thích hợp và gửi đến địa chỉ email được cung cấp trong <your email address> . Sau khi gửi email, nó sẽ đưa người dùng đến /messagesent trang. Phần mềm trung gian phân tích cú pháp cơ thể có các tham số url được lưu vào request.body có thể thay đổi và được làm sạch đúng cách.
Mã này hoạt động để thiết lập Gmail mà không cần xác thực hai yếu tố. Nếu bạn có xác thực hai yếu tố, bạn có thể tham khảo Nodemailer tài liệu để thiết lập nó.
Xử lý biểu mẫu bằng rubyPress
Để gửi email bằng Ruby, bạn cần cài đặt ruby-gmail thư viện với dòng lệnh sau:
gem install ruby-gmail
Tùy thuộc vào thiết lập Ruby của bạn, bạn có thể cần sử dụng sudo ở phía trước của lệnh. Bây giờ để tải thư viện, hãy thêm dòng sau vào đầu rubyPress.rb tệp:
require 'gmail' # https://github.com/dcparker/ruby-gmail
Sau tất cả get định nghĩa, thêm các dòng sau:
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
Với những bổ sung này, máy chủ rubyPress của bạn có thể xử lý các biểu mẫu email. Sau khi bạn thay đổi <your email address> đến địa chỉ email của bạn và <your password> mật khẩu cho máy chủ email của bạn, tập lệnh đã hoàn tất.
Xử lý biểu mẫu bằng phpPress
Máy chủ cuối cùng để sửa đổi là máy chủ phpPress. Để thêm khả năng email vào máy chủ, tôi sẽ cài đặt thư viện phpmailer . Đây là thư viện được sử dụng rộng rãi nhất trong PHP để làm việc với email. Để cài đặt thư viện, bạn cần chạy các lệnh dòng lệnh này trong thư mục phpPress:
composer update composer require phpmailer/phpmailer
Thật không may, bản cập nhật của nhà soạn nhạc sẽ cập nhật thư viện LightnCandy. Điều này là tốt vì nó nhanh hơn và dễ sử dụng hơn nhiều. Nhưng nó phá vỡ mã máy chủ. Trong tệp index.php, định vị ProcessPage() và thay thế nó bằng mã sau:
//
// 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);
}
So sánh nó với mã cũ hơn, bạn không còn phải làm việc với một tệp tạm thời. Tất cả được thực hiện trong bộ nhớ và do đó nhanh hơn nhiều. Bây giờ, ở đầu index.php , thêm cái này vào sau thư viện Jade:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';
Thao tác này sẽ tải thư viện phpmailer. Bây giờ, sau $app->get() cuối cùng chức năng, thêm mã này:
//
// 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);
}
});
Đây là trình xử lý yêu cầu bài đăng cho /api/message đường dẫn. Nó lấy dữ liệu biểu mẫu được gửi từ trình duyệt, tạo một email với nó và gửi email. PHP tự động lấy bất kỳ tham số URL nào và đặt chúng vào mảng chung $_POST .
Bạn sẽ phải thay thế <your email address> , <your password> và <your name> với các giá trị thích hợp cho email của bạn. Nếu bạn đang sử dụng thứ gì đó không phải là máy chủ SMTP của Gmail, bạn sẽ cần thay đổi $mail->Host cả địa chỉ.
Kết luận
Tôi đã chỉ cho bạn cách dễ dàng thêm biểu mẫu email vào trang web pressCMS. Tải xuống cho hướng dẫn này có tất cả các máy chủ này với các sửa đổi của chúng. Do đó, bạn có thể tải xuống thay vì nhập. Tôi đã xử lý một chút lỗi nhỏ. Tôi sẽ giao phần còn lại cho bạn như một bài tập.
Phương pháp tôi đã dạy ở đây là đăng dữ liệu biểu mẫu với dữ liệu trong URL. Nhiều trang web ngày nay sử dụng API REST với dữ liệu trong JSON chuỗi trong phần thân để thực hiện hành động. Những thói quen này dễ dàng được áp dụng cho phương pháp đó, nhưng đó là một bài tập cho bạn (hoặc có thể là một bài hướng dẫn trong tương lai). Bây giờ bạn đã biết cách thực hiện theo cách này, hãy thêm các biểu mẫu của riêng bạn vào trang web của bạn. Loại tùy chỉnh này rất thú vị. Giới hạn duy nhất là trí tưởng tượng của bạn.