এখন আপনার কাছে একটি ফ্ল্যাট ফাইল সিস্টেম ব্যবহার করে ওয়েবসাইট আছে, এবং আপনি আপনার ইউজারদের কাছ থেকে ফিডব্যাক পেতে চান। ডিসকাস (Disqus) যোগ করা সহজ কারণ সেটি সম্পূর্ণ জাভাস্ক্রিপ্ট কোড পেজে যোগ করা হয়, কিন্তু আপনি সেটি চান না। আপনি চান যাতে তারা সরাসরি আপনাকে ইমেইল করতে পারে যাতে আপনি শুধু তাদের কাছে রিপ্লাই করতে পারেন।
আপনি ইউজারের কম্পিউটার থেকে সরাসরি ইমেইল করার জন্য একটি সম্পূর্ণ জাভাস্ক্রিপ্ট সিস্টেম তৈরি করতে পারেন, কিন্তু সেটি আপনার ইমেইল ঠিকানা স্প্যামারদের হাতে যেতে দেবে যারা সেটি কোড থেকে বের করে অন্য স্প্যামারদের বেচে দিবে। তাই আপনাকে আপনার ইমেইল ঠিকানা সার্ভারে লুকিয়ে রাখতে হবে।
এই টিউটোরিয়ালটি আপনার নতুন PressCMS (যथा phpPress, rubyPress, nodePress, এবং 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 প্রিমিটিভও আছে। এটি খালি ফর্ম সাবমিট হতে দেয় না। এটি ফ্রন্ট-এন্ডে ব্যবহার করা যেতে পারে ন্যূনতম ডেটা ভ্যালিডেশন।
form এলিমেন্টে action ডিরেক্টিভ ব্রাউজারকে বলে ফর্ম ডেটা কোন ঠিকানায় সাবমিট করবে। method ডিরেক্টিভ ব্রাউজারকে বলে post মেথড হিসেবে পাঠাবে। ফর্ম ডেটা পোস্ট রিকোয়েস্টের URL-এ প্লেস হবে সার্ভারে। এটি একটি Query String। সার্ভার তারপর কুয়েরি স্ট্রিং-এ থাকা ইনফরমেশন প্রসেস করে।
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 পেজটি খুলুন।
Contact Us পেজটি উপরের ছবির মতো দেখাবে। লোড হয়তেই নাম ফিল্ড হাইলাইট হওয়া লক্ষ্য করুন। 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 দিয়ে ফর্ম প্রসেস করা
ইউজার দেওয়া মেসেজ স্যানিটাইজ (sanitize) করার জন্য আমি 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() ফাংশনকে কল করে। এটি ইউজার দ্বারা ফর্মে পূরণ করা ইনফরমেশন রিট্রিভ করে, ব্লু ম্যান্ডে লাইব্রেরি দিয়ে মেসেজ স্যানিটাইজ করে, এবং সাইটের মালিককে sendEmail() ফাংশন ব্যবহার করে ইমেইল পাঠায়। আপনাকে <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 দিয়ে ফর্ম প্রসেস করা
নোড (Node) থেকে ইমেইল পাঠাতে, আপনাকে প্রথমে nodemailer library এবং body-parser library ইনস্টল করতে হবে নিচের কমান্ড লাইন দিয়ে:
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');
এটি নোডমেলার লাইব্রেরি লোড করবে এবং ইমেইল পাঠানোর জন্য রিযusable কম্পোনেন্ট সেট আপ করবে। আপনাকে <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 ভেরিয়েবলে সেভ করে রাখে এবং প্রপারলি স্যানিটাইজ করে।
এই কোডটি টু-ফ্যাক্টর অথেন্টিকেশন ছাড়া জিমেইল সেটআপের জন্য কাজ করে। আপনার টু-ফ্যাক্টর অথেন্টিকেশন থাকলে, আপনি Nodemailer ডকুমেন্টেশন রেফার করে সেট আপ করতে পারেন।
rubyPress দিয়ে ফর্ম প্রসেস করা
রুবিতে ইমেইল পাঠাতে, আপনাকে 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
এই যোগফলে, আপনার rubyPress সার্ভার ইমেইল ফর্ম প্রসেস করতে পারবে। একবার <your email address> আপনার ইমেইল ঠিকানায় এবং <your password> আপনার ইমেইল সার্ভারের পাসওয়ার্ডে বদলালে, স্ক্রিপ্টটি সম্পূর্ণ।
phpPress দিয়ে ফর্ম প্রসেস করা
শেষ সার্ভার হলো phpPress সার্ভার। সার্ভারে ইমেইল ক্যাপেবিলিটি যোগ করার জন্য, আমি phpmailer library ইনস্টল করব। এটি 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 ফাইলের টপে, জেড (Jade) লাইব্রেরির পর এই কোডটি যোগ করুন:
// // 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> আপনার ইমেইলের উপযুক্ত মান দিয়ে রিপ্লেস করতে হবে। আপনি যদি জিমেইল SMTP সার্ভার ছাড়া অন্য কিছু ব্যবহার করেন, তবে $mail->Host ঠিকানাও পরিবর্তন করতে হবে।
উপসংহার
আমি আপনাকে দেখিয়েছি কিভাবে সহজে একটি প্রেসসিএমএস (pressCMS) সাইটে ইমেইল ফর্ম যোগ করা যায়। এই টিউটোরিয়ালের ডাউনলোডে এই সব সার্ভার তাদের মডিফিকেশনসহ আছে। আপনি টাইপ না করে ডাউনলোড করলেই চলে। আমি কিছুটা এরর হ্যান্ডলিং করেছি। বাকিটা আপনার এক্সারসাইজ হিসেবে রেখেছি।
এখানে আমি যা পদ্ধতি শিখিয়েছি সেটি হলো URL-এ ডেটা রাখে ফর্ম ডেটা পোস্ট করা। আজকাল অনেক সাইট REST API ব্যবহার করে যেখানে ডেটা JSON স্ট্রিং হিসেবে বডিতে থাকে অ্যাকশন পারফর্ম করার জন্য। এই রুটিনগুলো সহজেই সেই মেথডলজিতে আডপ্ট করা যায়, কিন্তু সেটি আপনার এক্সারসাইজ (অথবা ভবিষ্যতের একটি টিউটোরিয়াল)। এখন যেহেতু আপনি এই পদ্ধতিতে জানেন, আপনার সাইটে নিজের ফর্ম যোগ করুন। এই টাইপের কাস্টমাইজেশন খুব মজাদার। একমাত্র সীমা আপনার কল্পনাশক্তি।
