ตอนนี้คุณมีเว็บไซต์ที่ใช้ระบบไฟล์แบบเรียบแล้ว คุณต้องการรับคำติชมจากผู้ใช้ของคุณ การเพิ่ม Disqus นั้นง่ายเพราะเป็นโค้ด JavaScript ทั้งหมดที่เพิ่มลงในหน้า แต่มันไม่ใช่สิ่งที่คุณต้องการ คุณต้องการให้พวกเขาส่งอีเมลถึงคุณโดยตรงเพื่อให้คุณสามารถตอบกลับได้
คุณสามารถสร้างระบบ JavaScript ทั้งหมดเพื่อส่งอีเมลจากคอมพิวเตอร์ของผู้ใช้ได้โดยตรง แต่นั่นทำให้อีเมลของคุณเปิดกว้างต่อผู้ส่งสแปมที่สามารถดึงข้อมูลจากโค้ดของคุณ และขายให้กับนักส่งสแปมคนอื่นๆ ดังนั้น คุณต้องซ่อนที่อยู่อีเมลของคุณบนเซิร์ฟเวอร์
บทแนะนำนี้เป็นเรื่องเกี่ยวกับการเพิ่มระบบข้อความอีเมลใน PressCMS . ใหม่ของคุณ (เช่น phpPress , rubyPress , nodePress และ goPress ). ฉันกำลังเริ่มต้นด้วย front-end แล้วจัดการกับ back-end สำหรับแต่ละระบบ ฉันคิดว่าคุณมีเซิร์ฟเวอร์เหล่านี้อยู่ในระบบของคุณแล้ว
วิธีการสร้างแบบฟอร์มในเบราว์เซอร์
เนื่องจากรหัสส่วนหน้าจะเหมือนกันสำหรับแต่ละเซิร์ฟเวอร์ คุณจะต้องคัดลอกไฟล์ใหม่เหล่านี้ไปยังแต่ละไดเรกทอรีของเซิร์ฟเวอร์ ดังนั้น ผมจะพูดถึงไฟล์ในพาธที่อ้างอิงจากไดเร็กทอรีเซิร์ฟเวอร์
แทนที่จะเพิ่มการกำหนดรูปแบบเฉพาะแบบฟอร์มให้กับธีม สคริปต์ของแบบฟอร์มนี้มีทุกอย่างในที่เดียว สร้างไฟล์ questions.html ใน site/parts ไดเร็กทอรีสำหรับเว็บไซต์ที่มีเนื้อหาดังต่อไปนี้:
<!-- 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>
ซึ่งจะสร้างแบบฟอร์มพื้นฐานเพื่อขอชื่อเต็ม (ชื่อและนามสกุล) อีเมล และข้อความ แบบฟอร์มนี้ใช้นิพจน์ทั่วไปเพื่อให้แน่ใจว่าชื่อและที่อยู่อีเมลถูกต้อง หากสิ่งที่ผู้ใช้ป้อนลงในฟิลด์เหล่านั้นไม่ตรงกับนิพจน์ทั่วไปใน pattern คำสั่งแล้วแบบฟอร์มจะไม่ถูกส่ง ป๊อปอัปจะขอให้ผู้ใช้กรอกข้อความในช่อง title . ให้ถูกต้อง พารามิเตอร์. ช่องป้อนข้อมูลแต่ละช่องมี required ดั้งเดิมเช่นกัน วิธีนี้ช่วยป้องกันไม่ให้ส่งแบบฟอร์มเปล่า นี่คือการตรวจสอบความถูกต้องของข้อมูลขั้นต่ำที่คุณควรใช้ในส่วนหน้า
action คำสั่งใน form องค์ประกอบบอกเว็บเบราว์เซอร์ว่าต้องส่งข้อมูลแบบฟอร์มไปยังที่อยู่ใด method คำสั่งบอกให้เบราว์เซอร์ส่งเป็น post กระบวนการ. ข้อมูลแบบฟอร์มจะถูกวางไว้ใน URL ของคำขอโพสต์ไปยังเซิร์ฟเวอร์ นี่คือ สตริงข้อความค้นหา . จากนั้นเซิร์ฟเวอร์จะประมวลผลข้อมูลในสตริงการสืบค้น
ใน site/pages ไดเร็กทอรี สร้างไฟล์ contact.md แล้ววางโค้ดนี้:
### 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}}} เมื่อบันทึกแล้ว คุณสามารถลองใช้หน้าต่างๆ ในเซิร์ฟเวอร์ได้ ในเบราว์เซอร์ของคุณ ให้เปิดหน้า http://localhost:8081/contact.
ติดต่อเรา หน้าจะมีลักษณะเหมือนภาพด้านบน สังเกตการเน้นของฟิลด์ชื่อโดยตรงเมื่อโหลด autofocus คำสั่งสร้างพฤติกรรมที่ต้องการนี้ เป็นการออกแบบที่ดีเสมอที่จะมีฟิลด์แรกที่ผู้ใช้ต้องพิมพ์ลงในโฟกัสโดยอัตโนมัติ
หลังจากส่งข้อความแล้ว ข้อความยืนยันไปยังผู้ใช้ก็น่าจะดี ใน site/pages ไดเร็กทอรี สร้างไฟล์ messagesent.md แล้ววางโค้ดนี้:
### Message was sent Thank you so much for taking time to send me a message. I will reply as soon as possible.
เพียงข้อความง่ายๆ เพื่อให้ผู้ใช้ทราบว่าข้อความถูกส่งไปอย่างถูกต้อง คุณสามารถขยายได้ตามต้องการ
การประมวลผลแบบฟอร์มด้วย goPress
ในการฆ่าเชื้อข้อความที่ผู้ใช้มอบให้ ฉันใช้ Blue Monday ห้องสมุด. ในการโหลดไลบรารีนั้นในระบบของคุณ คุณต้องเรียกใช้บรรทัดคำสั่งนี้:
go get github.com/microcosm-cc/bluemonday
ซึ่งจะทำให้ห้องสมุดพร้อมใช้งานสำหรับโปรแกรมของคุณ นั่นคือห้องสมุดที่ไม่ได้มาตรฐานเพียงแห่งเดียวที่จำเป็น
เปิด goPressServer.go ไฟล์และเพิ่มไปที่ด้านบนของไฟล์ภายใน import () คำสั่ง:
"fmt"
"github.com/hoisie/web"
"net/smtp"
"github.com/microcosm-cc/bluemonday"
การส่งอีเมลข้อความจากเซิร์ฟเวอร์ต้องใช้ไลบรารีเหล่านี้ หลังบรรทัดที่มี goPress.DefaultRoutes( เรียกฟังก์ชัน เพิ่มโค้ดต่อไปนี้:
//
// Setup special route for our form processing.
//
goPress.SetPostRoute('/api/message', postMessage)
ซึ่งจะกำหนดเส้นทางการโพสต์ของ /api/message เพื่อเรียกใช้ฟังก์ชัน postMessage() . ที่ส่วนท้ายของไฟล์ ให้เพิ่มโค้ดนี้:
//
// 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.
//
}
}
ฟังก์ชันทั้งสองนี้ประกอบขึ้นเป็นเครื่องจัดการสำหรับการประมวลผลอีเมลที่ส่งจากเบราว์เซอร์ /api/message เส้นทางเรียก postMessage() การทำงาน. ดึงข้อมูลที่ส่งจากแบบฟอร์มที่ผู้ใช้กรอก ล้างข้อความด้วยห้องสมุด BlueMonday และส่งอีเมลไปยังเจ้าของเว็บไซต์โดยใช้ sendEmail() การทำงาน. คุณจะต้องใส่ที่อยู่ Gmail ของคุณแทน <your email address> เจ้าของและรหัสผ่านใน <password> ผู้ถือ
ใน goPress.go ไฟล์ เพิ่มฟังก์ชันนี้ต่อจาก 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)
}
ฟังก์ชันนี้เหมือนกับ SetGetRoute() การทำงาน. ข้อแตกต่างเพียงอย่างเดียวคือการใช้ web.Post() ฟังก์ชัน
ด้วยการเปลี่ยนแปลงเหล่านี้ เซิร์ฟเวอร์ goPress ของคุณสามารถส่งอีเมลจากผู้ใช้ได้
การประมวลผลแบบฟอร์มด้วย nodePress
ในการส่งอีเมลจากโหนด คุณจะต้องติดตั้ง ไลบรารี Nodemailerก่อน และ ไลบรารีตัวแยกวิเคราะห์ ด้วยบรรทัดคำสั่งต่อไปนี้:
npm install -save nodemailer npm install -save body-parser
จากนั้นคุณต้องโหลดไลบรารีใหม่และกำหนดค่าวัตถุเมล ที่ด้านบนของ nodePress.js หลังจากโหลดไลบรารี่ล่าสุด ให้เพิ่มบรรทัดเหล่านี้:
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');
การดำเนินการนี้จะโหลดไลบรารี nodemailer และตั้งค่าส่วนประกอบที่ใช้ซ้ำได้สำหรับการส่งอีเมล คุณต้องแทนที่ <your email name> ด้วยชื่อที่อยู่อีเมลของคุณ (เช่น ก่อนเครื่องหมาย @) <your email domain> เป็นโดเมนสำหรับที่อยู่อีเมลของคุณ (เช่น gmail.com สำหรับ gmail ปกติหรือชื่อโดเมนของคุณหากคุณตั้งค่า Gmail ในชื่อโดเมนของคุณ) และ <your password> ด้วยรหัสผ่านสำหรับบัญชีอีเมลของคุณ
หลังจากบรรทัดที่เริ่มต้นตัวแปร nodePress ให้เพิ่มโค้ดนี้:
//
// Configure the body parser library.
//
nodePress.use(bodyParser.urlencoded({
extended: true
}));
ตอนนี้หลังจาก nodePress.get() . ล่าสุด เรียกฟังก์ชัน เพิ่มโค้ดนี้:
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"));
});
});
นี่คือตัวจัดการสำหรับ /api/message ที่อยู่. ฟังก์ชันนี้รับข้อมูลที่ส่งจากแบบฟอร์ม สร้างข้อความอีเมลที่เหมาะสม และส่งไปยังที่อยู่อีเมลที่ให้ไว้ใน <your email address> . หลังจากส่งอีเมลแล้ว ระบบจะส่งผู้ใช้ไปที่ /messagesent หน้าหนังสือ. มิดเดิลแวร์ตัวแยกวิเคราะห์เนื้อหามีพารามิเตอร์ url ที่บันทึกไว้ใน request.body แปรผันและผ่านการฆ่าเชื้ออย่างถูกต้อง
รหัสนี้ใช้ได้กับการตั้งค่า Gmail โดยไม่มีการตรวจสอบสิทธิ์แบบสองปัจจัย หากคุณมีการตรวจสอบสิทธิ์แบบสองปัจจัย คุณสามารถอ้างถึง Nodemailer เอกสารประกอบการตั้งค่า
การประมวลผลแบบฟอร์มด้วย rubyPress
ในการส่งอีเมลใน Ruby คุณจะต้องติดตั้ง ruby-gmail ไลบรารีด้วยบรรทัดคำสั่งต่อไปนี้:
gem install ruby-gmail
คุณอาจต้องใช้ sudo . ทั้งนี้ขึ้นอยู่กับการตั้งค่า Ruby ของคุณ ต่อหน้าคำสั่ง ตอนนี้ในการโหลดไลบรารี ให้เพิ่มบรรทัดต่อไปนี้ที่ด้านบนของ rubyPress.rb ไฟล์:
require 'gmail' # https://github.com/dcparker/ruby-gmail
หลังจากทั้งหมด get คำจำกัดความ เพิ่มบรรทัดต่อไปนี้:
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
ด้วยส่วนเพิ่มเติมเหล่านี้ เซิร์ฟเวอร์ rubyPress ของคุณสามารถประมวลผลแบบฟอร์มอีเมลได้ เมื่อคุณเปลี่ยน <your email address> ไปยังที่อยู่อีเมลของคุณและ <your password> สำหรับรหัสผ่านสำหรับเซิร์ฟเวอร์อีเมลของคุณ สคริปต์จะเสร็จสิ้น
การประมวลผลแบบฟอร์มด้วย phpPress
เซิร์ฟเวอร์สุดท้ายที่จะแก้ไขคือเซิร์ฟเวอร์ phpPress ในการเพิ่มความสามารถของอีเมลไปยังเซิร์ฟเวอร์ ฉันจะติดตั้ง ไลบรารี phpmailer . นี่เป็นไลบรารี่ที่ใช้กันอย่างแพร่หลายที่สุดใน PHP สำหรับการทำงานกับอีเมล ในการติดตั้งไลบรารี คุณต้องเรียกใช้คำสั่งบรรทัดคำสั่งเหล่านี้ในไดเร็กทอรี phpPress:
composer update composer require phpmailer/phpmailer
ขออภัย การอัปเดตผู้แต่งจะอัปเดตไลบรารี LightnCandy นี่เป็นสิ่งที่ดีเพราะเร็วกว่าและใช้งานง่ายกว่ามาก แต่มันทำลายรหัสเซิร์ฟเวอร์ ในไฟล์ index.php ค้นหา ProcessPage() และแทนที่ด้วยรหัสต่อไปนี้:
//
// 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);
}
เมื่อเปรียบเทียบกับรหัสที่เก่ากว่า คุณไม่จำเป็นต้องทำงานกับไฟล์ชั่วคราวอีกต่อไป ทั้งหมดนี้ทำได้ในหน่วยความจำและเร็วกว่ามาก ตอนนี้ ที่ด้านบนของ index.php ไฟล์เพิ่มหลังไลบรารีหยก:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';
สิ่งนี้จะโหลดไลบรารี phpmailer ตอนนี้หลังจาก $app->get() . ล่าสุด ฟังก์ชั่นเพิ่มรหัสนี้:
//
// 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);
}
});
นี่คือตัวจัดการคำขอโพสต์สำหรับ /api/message เส้นทาง. จะดึงข้อมูลแบบฟอร์มที่ส่งจากเบราว์เซอร์ สร้างอีเมลด้วย และส่งอีเมล PHP นำพารามิเตอร์ URL ใด ๆ มาใส่ในอาร์เรย์ส่วนกลาง $_POST .
คุณจะต้องเปลี่ยน <your email address> , <your password> และ <your name> ด้วยค่าที่เหมาะสมสำหรับอีเมลของคุณ หากคุณกำลังใช้อย่างอื่นที่ไม่ใช่เซิร์ฟเวอร์ Gmail SMTP คุณจะต้องเปลี่ยน $mail->Host ที่อยู่ด้วย
บทสรุป
ฉันได้แสดงวิธีการเพิ่มแบบฟอร์มอีเมลไปยังไซต์ pressCMS อย่างง่ายดาย การดาวน์โหลดสำหรับบทช่วยสอนนี้มีเซิร์ฟเวอร์ทั้งหมดที่มีการแก้ไข คุณจึงดาวน์โหลดแทนการพิมพ์ได้ ฉันทำผิดพลาดเล็กน้อยในการจัดการ ฉันจะปล่อยให้ที่เหลือเป็นการออกกำลังกายของคุณ
วิธีที่ฉันสอนที่นี่คือการโพสต์ข้อมูลในแบบฟอร์มพร้อมข้อมูลใน URL ปัจจุบันไซต์จำนวนมากใช้ REST API ด้วยข้อมูลใน JSON สตริงในร่างกายเพื่อดำเนินการ กิจวัตรเหล่านี้ใช้ได้กับวิธีการนั้นอย่างง่ายดาย แต่นั่นเป็นแบบฝึกหัดสำหรับคุณ (หรืออาจจะเป็นบทช่วยสอนในอนาคต) เมื่อคุณทราบวิธีการทำเช่นนี้แล้ว ให้เพิ่มแบบฟอร์มของคุณเองลงในไซต์ของคุณ การปรับแต่งประเภทนี้สนุกมาก ขีดจำกัดเพียงอย่างเดียวคือจินตนาการของคุณ
