এখন আপনার কাছে একটি ফ্ল্যাট ফাইল সিস্টেম ব্যবহার করে একটি ওয়েব সাইট আছে, আপনি আপনার ব্যবহারকারীদের কাছ থেকে কিছু প্রতিক্রিয়া পেতে চান। Disqus যোগ করা সহজ কারণ এটি সমস্ত জাভাস্ক্রিপ্ট কোড পৃষ্ঠায় যোগ করা হয়েছে, কিন্তু আপনি যা চান তা নয়। আপনি চান যে তারা আপনাকে সরাসরি ইমেল করতে সক্ষম হোক যাতে আপনি তাদের উত্তর দিতে পারেন।
আপনি ব্যবহারকারীর কম্পিউটার থেকে সরাসরি ইমেল করার জন্য একটি সমস্ত জাভাস্ক্রিপ্ট সিস্টেম তৈরি করতে পারেন, কিন্তু এটি আপনার ইমেলটিকে আপনার কোড থেকে পুনরুদ্ধার করতে এবং অন্য স্প্যামারদের কাছে বিক্রি করতে সক্ষম স্প্যামারদের জন্য উন্মুক্ত রাখে। অতএব, আপনাকে সার্ভারে আপনার ইমেল ঠিকানা লুকিয়ে রাখতে হবে।
এই টিউটোরিয়ালটি আপনার নতুন PresCMS-এ একটি ইমেল বার্তা সিস্টেম যোগ করার বিষয়ে (যেমন phpPress , রুবিপ্রেস , নোডপ্রেস , এবং goPress ) আমি ফ্রন্ট-এন্ড দিয়ে শুরু করছি এবং তারপর প্রতিটি সিস্টেমের জন্য ব্যাক-এন্ডকে সম্বোধন করছি। আমি অনুমান করছি যে আপনার সিস্টেমে এই সার্ভারগুলি ইতিমধ্যেই রয়েছে৷
ব্রাউজারে কীভাবে ফর্ম তৈরি করবেন
যেহেতু ফ্রন্ট-এন্ড কোড প্রতিটি সার্ভারের জন্য একই হবে, তাই আপনাকে প্রতিটি সার্ভার ডিরেক্টরিতে এই নতুন ফাইলগুলি অনুলিপি করতে হবে। অতএব, আমি সার্ভার ডিরেক্টরি থেকে উল্লেখিত পাথের ফাইলগুলি সম্পর্কে কথা বলব৷
৷
থিমে ফর্ম-নির্দিষ্ট স্টাইলিং যোগ করার পরিবর্তে, এই ফর্ম স্ক্রিপ্টে এক জায়গায় সবকিছু রয়েছে৷ 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}}}৷ একবার সংরক্ষণ করা হলে, আপনি সার্ভারে পৃষ্ঠাগুলি চেষ্টা করে দেখতে পারেন। আপনার ব্রাউজারে, https://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 দিয়ে ফর্ম প্রক্রিয়াকরণ
ব্যবহারকারীর দেওয়া বার্তাটিকে স্যানিটাইজ করতে, আমি ব্লু সোমবার ব্যবহার করছি লাইব্রেরি আপনার সিস্টেমে সেই লাইব্রেরিটি লোড করতে, আপনাকে এই কমান্ড লাইনটি চালাতে হবে:
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 সার্ভার এখন ব্যবহারকারীর কাছ থেকে আপনার ইমেল পাঠাতে পারে৷
৷নোডপ্রেস দিয়ে ফর্ম প্রক্রিয়াকরণ
নোড থেকে ইমেল পাঠাতে, আপনাকে প্রথমে নোডমেলার লাইব্রেরি ইনস্টল করতে হবে এবং বডি-পার্সার লাইব্রেরি নিম্নলিখিত কমান্ড লাইন সহ:
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');
এটি নোডমেলার লাইব্রেরি লোড করবে এবং ইমেল পাঠানোর জন্য পুনরায় ব্যবহারযোগ্য উপাদান সেট আপ করবে। আপনাকে <your email name> প্রতিস্থাপন করতে হবে আপনার ইমেল ঠিকানার নামের সাথে (যেমন @ চিহ্নের আগে), <your email domain> আপনার ইমেল ঠিকানার জন্য ডোমেন (যেমন সাধারণ জিমেইলের জন্য gmail.com বা আপনার ডোমেন নাম যদি আপনার ডোমেন নামে জিমেইল সেট আপ করা থাকে), এবং <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 সেটআপের জন্য কাজ করে। আপনার যদি দ্বি-ফ্যাক্টর প্রমাণীকরণ থাকে, আপনি নোডমেলার উল্লেখ করতে পারেন এটি সেট আপ করার জন্য ডকুমেন্টেশন।
রুবিপ্রেস দিয়ে ফর্ম প্রক্রিয়াকরণ
রুবিতে ইমেল পাঠাতে, আপনাকে ruby-gmail ইনস্টল করতে হবে নিম্নলিখিত কমান্ড লাইন সহ লাইব্রেরি:
gem install ruby-gmail
আপনার রুবি সেটআপের উপর নির্ভর করে, আপনাকে sudo ব্যবহার করতে হতে পারে কমান্ডের সামনে। এখন লাইব্রেরি লোড করতে, 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
এই সংযোজনগুলির সাথে, আপনার রুবিপ্রেস সার্ভার ইমেল ফর্মগুলি প্রক্রিয়া করতে পারে৷ একবার আপনি <your email address> পরিবর্তন করুন আপনার ইমেল ঠিকানা এবং <your password> আপনার ইমেল সার্ভারের পাসওয়ার্ডে, স্ক্রিপ্টটি শেষ।
phpPress দিয়ে ফর্ম প্রক্রিয়াকরণ
পরিবর্তন করার শেষ সার্ভার হল phpPress সার্ভার। সার্ভারে ইমেল ক্ষমতা যোগ করতে, আমি phpmailer লাইব্রেরি ইনস্টল করতে যাচ্ছি . ইমেলের সাথে কাজ করার জন্য এটি পিএইচপি-তে সর্বাধিক ব্যবহৃত লাইব্রেরি। লাইব্রেরি ইনস্টল করার জন্য, আপনাকে 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 পরিবর্তন করতে হবে পাশাপাশি ঠিকানা।
উপসংহার
আমি আপনাকে দেখিয়েছি কিভাবে সহজে একটি প্রেসসিএমএস সাইটে একটি ইমেল ফর্ম যোগ করতে হয়। এই টিউটোরিয়ালের ডাউনলোডে এই সমস্ত সার্ভারগুলি তাদের পরিবর্তন সহ রয়েছে। তাই আপনি টাইপ করার পরিবর্তে এটি ডাউনলোড করতে পারেন। আমি সামান্য ত্রুটি পরিচালনা করেছি। আমি ব্যায়াম হিসাবে বাকিটা আপনার উপর ছেড়ে দেব।
আমি এখানে যে পদ্ধতিটি শিখিয়েছি তা হল URL-এ ডেটা সহ ফর্ম ডেটা পোস্ট করে৷ অনেক সাইট আজকাল একটি REST API ব্যবহার করে৷ একটি JSON-এ ডেটা সহ কর্ম সঞ্চালনের জন্য শরীরে স্ট্রিং। এই রুটিনগুলি সহজেই সেই পদ্ধতিতে গৃহীত হয়, তবে এটি আপনার জন্য একটি অনুশীলন (বা ভবিষ্যতের টিউটোরিয়াল)। এখন যেহেতু আপনি এইভাবে এটি করতে জানেন, আপনার সাইটে আপনার নিজস্ব ফর্ম যোগ করুন। এই ধরনের কাস্টমাইজ করা অনেক মজার। একমাত্র সীমা হল আপনার কল্পনা।
