अब जब आपके पास एक फ्लैट फाइल सिस्टम का उपयोग करने वाली वेब साइट है, तो आप अपने यूजर्स से कुछ फीडबैक प्राप्त करना चाहेंगे। Disqus जोड़ना आसान है क्योंकि यह पेज में जोड़ा गया ऑल जावास्क्रिप्ट कोड है, लेकिन यह वह नहीं है जो आप चाहते हैं। आप चाहते हैं कि वे आपको सीधे ईमेल कर सकें ताकि आप केवल उन्हें जवाब दे सकें।
आप यूजर के कंप्यूटर से सीधे ईमेल करने के लिए एक ऑल जावास्क्रिप्ट सिस्टम बना सकते हैं, लेकिन यह आपके ईमेल को स्पैमर्स के लिए खुला छोड़ देता है जो इसे आपके कोड से प्राप्त कर अन्य स्पैमर्स को बेच सकते हैं। इसलिए, आपको सर्वर पर अपना ईमेल एड्रेस छिपाने की आवश्यकता है।
यह ट्यूटोरियल आपके नए PressCMS (यानी phpPress, rubyPress, nodePress, और goPress) में एक ईमेल मैसेज सिस्टम जोड़ने के बारे में है। मैं फ्रंट-एंड से शुरू कर रहा हूं और फिर प्रत्येक सिस्टम के लिए बैक-एंड को संबोधित कर रहा हूं। मैं मान रहा हूं कि आपके सिस्टम पर पहले से ही ये सर्वर हैं।
ब्राउज़र में फॉर्म कैसे बनाएं
चूंकि फ्रंट-एंड कोड प्रत्येक सर्वर के लिए समान होगा, आपको इन नई फाइलों को प्रत्येक सर्वर डायरेक्टरी में कॉपी करना होगा। इसलिए, मैं सर्वर डायरेक्टरी से संदर्भित पथ में फाइलों के बारे में बात करूंगा।
थीम में फॉर्म-विशिष्ट स्टाइलिंग जोड़ने के बजाय, इस फॉर्म स्क्रिप्ट में सब कुछ एक ही स्थान पर है। questions.html फाइल को वेब साइट के लिए site/parts डायरेक्टरी में निम्न सामग्री के साथ बनाएं:
<!-- फॉर्म के लिए स्टाइलिंग --> <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 --> <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 में रखा जाएगा। यह एक क्वेरी स्ट्रिंग है। सर्वर तब क्वेरी स्ट्रिंग में जानकारी को प्रोसेस करता है।
site/pages डायरेक्टरी में, contact.md फाइल बनाएं और यह कोड रखें:
### Contact Us यह एक सिंपल कॉन्टैक्ट फॉर्म है। कृपया अपना नाम, पहला और अंतिम, ईमेल एड्रेस, और मैसेज भरें। मैं जल्द से जल्द आपसे संपर्क करूंगा। धन्यवाद। {{{question}}}
एक बार सेव हो जाने पर, आप सर्वर में पेजेस को आज़मा सकते हैं। अपने ब्राउज़र में, पेज https://localhost:8081/contact खोलें।
Contact Us पेज उपरोक्त तस्वीर जैसा दिखेगा। लोड होने पर सीधे नाम फील्ड की हाइलाइटिंग पर ध्यान दें। autofocus डायरेक्टिव यह वांछित व्यवहार बनाता है। यह हमेशा अच्छा डिज़ाइन है कि जिस फील्ड में यूजर को टाइप करना है उस पर ऑटोमैटिकली फोकस हो।
मैसेज भेजने के बाद, यूजर को एक कन्फर्मेशन मैसेज अच्छा होगा। site/pages डायरेक्टरी में, messagesent.md फाइल बनाएं और यह कोड रखें:
### Message was sent मुझे मैसेज भेजने के लिए समय निकालने के लिए बहुत-बहुत धन्यवाद। मैं जल्द से जल्द जवाब दूंगा।
बस एक सिंपल मैसेज ताकि यूजर को पता चले कि मैसेज ठीक से भेजा गया था। आप इसे अपनी पसंद के अनुसार विस्तारित कर सकते हैं।
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( फंक्शन कॉल है, निम्न कोड जोड़ें:
// // हमारे फॉर्म प्रोसेसिंग के लिए विशेष रूट सेटअप करें। // goPress.SetPostRoute('/api/message', postMessage)
यह /api/message का एक पोस्ट रूट सेट करता है जो postMessage() फंक्शन चलाता है। फाइल के अंत में, यह कोड जोड़ें:
// // फंक्शन: postMessage // // विवरण: यह फंक्शन वेबसाइट से // उनके मैसेज को // साइट के मालिक को भेजेगा। // // इनपुट: // ctx वेब सर्वर // कॉन्टेक्स्ट। // func postMessage(ctx *web.Context) string { // // पोस्ट जानकारी प्राप्त करें और // ईमेल भेजें। // name := ctx.Params["Name"] from := ctx.Params["Email"] p := bluemonday.UGCPolicy() message := p.Sanitize(ctx.Params["Message"]) to := "" subject := "Message from User:" + name + " of CustomCT.com" sendEmail(to, from, subject, message) // // messagesent पेज कंटेंट प्राप्त करें और // प्रोसेस करें। // pgloc := goPress.SiteData.Sitebase + "pages/messagesent" return goPress.RenderPageContents(ctx, goPress.GetPageContents(pgloc), pgloc) } // // फंक्शन: sendEmail // // विवरण: यह फंक्शन एक // ईमेल मैसेज भेजता है। // // इनपुट: // to ईमेल एड्रेस // मैसेज भेजने के लिए // from मैसेज भेजने वाले // व्यक्ति का ईमेल एड्रेस // subject मैसेज का विषय // message ईमेल का मैसेज // 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("", "", "", "smtp.gmail.com") err := smtp.SendMail("smtp.gmail.com:587", auth, from, []string{to}, []byte(body)) if err != nil { // // त्रुटि प्रोसेस करें। वर्तमान में, मान लें // कि कोई समस्या नहीं है। // } }
ये दो फंक्शन ब्राउज़र से भेजे गए ईमेल को प्रोसेस करने के लिए हैंडलर बनाते हैं। /api/message रूट postMessage() फंक्शन को कॉल करता है। यह यूजर द्वारा भरे गए फॉर्म से भेजी गई जानकारी को पुनः प्राप्त करता है, BlueMonday लाइब्रेरी के साथ मैसेज को सैनिटाइज़ करता है, और sendEmail() फंक्शन का उपयोग करके साइट के मालिक को ईमेल भेजता है। आपको <your email address> प्लेसहोल्डर के स्थान पर अपना जीमेल एड्रेस और <password> प्लेसहोल्डर में पासवर्ड डालना होगा।
goPress.go फाइल में, SetGetRoute() फंक्शन के बाद यह फंक्शन जोड़ें:
// // फंक्शन: SetPostRoute // // विवरण: यह फंक्शन देता है // इस लाइब्रेरी में सेटअप // वेब वेरिएबल तक // आसान पहुंच। // // इनपुट: // route सेटअप करने के लिए रूट // handler उस रूट को चलाने के लिए // फंक्शन। // func SetPostRoute(route string, handler interface{}) { web.Post(route, handler) }
यह फंक्शन बिल्कुल SetGetRoute() फंक्शन की तरह है। एकमात्र अंतर web.Post() फंक्शन का उपयोग है।
इन परिवर्तनों के साथ, आपका goPress सर्वर अब यूजर से ईमेल भेज सकता है।
nodePress के साथ फॉर्म प्रोसेस करना
नोड से ईमेल भेजने के लिए, आपको पहले nodemailer लाइब्रेरी और body-parser लाइब्रेरी को निम्न कमांड लाइन से इंस्टॉल करना होगा:
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 // // डिफ़ॉल्ट SMTP ट्रांसपोर्ट का उपयोग करके // पुन: प्रयोज्य ट्रांसपोर्टर ऑब्जेक्ट बनाएं // var transporter = nodemailer.createTransport('smtps://:@smtp.gmail.com');
यह nodemailer लाइब्रेरी लोड करेगा और ईमेल भेजने के लिए पुन: प्रयोज्य घटक सेट करेगा। आपको <your email name> को अपने ईमेल एड्रेस के नाम से बदलना होगा (यानी @ सिंबल से पहले), <your email domain> आपके ईमेल एड्रेस का डोमेन है (यानी सामान्य जीमेल के लिए gmail.com या आपका डोमेन नाम यदि आपने अपने डोमेन नाम पर जीमेल सेटअप किया है), और <your password> अपने ईमेल अकाउंट के पासवर्ड के साथ।
nodePress वेरिएबल को इनिशियलाइज़ करने वाली लाइन के बाद, यह कोड जोड़ें:
// // बॉडी पार्सर लाइब्रेरी कॉन्फ़िगर करें। // nodePress.use(bodyParser.urlencoded({ extended: true }));
अब, अंतिम nodePress.get() फंक्शन कॉल के बाद, यह कोड जोड़ें:
nodePress.post('/api/message', function(request, response) { // // ईमेल डेटा सेटअप करें // var mailOptions = { from: request.body.Email, to: '', subject: 'Message from ' + request.body.Name + ' on contact form.', text: request.body.Message, html: request.body.Message }; // // ईमेल भेजें। // transporter.sendMail(mailOptions, function(error, info){ if(error){ return console.log(error); } // // यूजर को मैसेज ठीक से भेजा गया पेज पर भेजें। // 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 # # फॉर्म से पैरामीटर्स प्राप्त करें। # name = params[:Name] email = params[:Email] message = params[:Message] # # ईमेल बनाएं और भेजें। # Gmail.new('', '') do |gmail| gmail.deliver do to "" from email subject "Message from " + name text_part do body message end end end # # यूजर को मैसेज भेजा गया पेज पर भेजें। # page 'messagesent' end
इन जोड़ के साथ, आपका rubyPress सर्वर ईमेल फॉर्म्स प्रोसेस कर सकता है। एक बार जब आप <your email address> को अपने ईमेल एड्रेस और <your password> को अपने ईमेल सर्वर के पासवर्ड में बदलते हैं, तो स्क्रिप्ट समाप्त हो जाती है।
phpPress के साथ फॉर्म प्रोसेस करना
संशोधित करने के लिए अंतिम सर्वर phpPress सर्वर है। सर्वर में ईमेल क्षमताएं जोड़ने के लिए, मैं phpmailer लाइब्रेरी इंस्टॉल करने जा रहा हूं। यह PHP में ईमेल के साथ काम करने के लिए सबसे व्यापक रूप से उपयोग की जाने वाली लाइब्रेरी है। लाइब्रेरी इंस्टॉल करने के लिए, आपको phpPress डायरेक्टरी में ये कमांड-लाइन कमांड चलाने होंगे:
composer update composer require phpmailer/phpmailer
दुर्भाग्य से, composer update LightnCandy लाइब्रेरी को अपडेट करेगा। यह अच्छा है क्योंकि यह बहुत तेज़ और उपयोग में आसान है। लेकिन यह सर्वर कोड को तोड़ देता है। index.php फाइल में, ProcessPage() फंक्शन का पता लगाएं और इसे निम्न कोड से बदलें:
// // फंक्शन: ProcessPage // // विवरण: यह फंक्शन होगा // एक पेज को टेम्पलेट में प्रोसेस करेगा, // सभी Mustache // मैक्रोज़ प्रोसेस करेगा, और प्रोसेस करेगा // सभी शॉर्टकोड्स। // // इनपुट: // $layout पेज के लिए // लेआउट // $page पेज के मुख्य // कंटेंट // function ProcessPage( $layout, $page ) { global $site, $parts, $helpers; // // पेज कंटेंट प्राप्त करें। // $parts['content'] = figurePage($page); // // हैंडलबार्स पर पहला पास। // $phpStr = LightnCandy::compile($layout, $helpers); $renderer = LightnCandy::prepare($phpStr); $page = $renderer($parts); // // शॉर्टकोड्स प्रोसेस करें। // $pageShort = processShortcodes($page); // // दूसरा पास हैंडलबार्स। // $phpStr = LightnCandy::compile($pageShort, $helpers); $renderer = LightnCandy::prepare($phpStr); $page = $renderer($parts); // // परिणाम लौटाएं। // return($page); }
पुराने कोड के साथ तुलना करने पर, आपको अब एक अस्थायी फाइल के साथ काम नहीं करना पड़ेगा। यह सब मेमोरी में किया जाता है और इसलिए बहुत तेज़ है। अब, index.php फाइल के शीर्ष पर, Jade लाइब्रेरी के बाद यह जोड़ें:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';
यह phpmailer लाइब्रेरी लोड करता है। अब, अंतिम $app->get() फंक्शन के बाद, यह कोड जोड़ें:
// // यह रूट वेबसाइट पर ईमेल फॉर्म से पोस्ट रिक्वेस्ट प्रोसेस करने के लिए है। // $app->post('/api/message', function(Request $request, Response $response) { global $_POST; // // पोस्ट वेरिएबल्स प्राप्त करें। // $Name = $_POST['Name']; $Email = $_POST['Email']; $Message = $_POST['Message']; // // ईमेल मैसेज बनाएं और भेजें। // $mail = new PHPMailer; $mail->isSMTP(); // मेलर को SMTP उपयोग करने के लिए सेट करें $mail->Host = 'smtp.gmail.com'; // मुख्य और बैकअप SMTP सर्वर निर्दिष्ट करें $mail->SMTPAuth = true; // SMTP ऑथेंटिकेशन सक्षम करें $mail->Username = ''; // SMTP यूज़रनेम $mail->Password = ''; // SMTP पासवर्ड $mail->SMTPSecure = 'tls'; // TLS एन्क्रिप्शन सक्षम करें, `ssl` भी स्वीकार किया जाता है $mail->Port = 587; // कनेक्ट करने के लिए TCP पोर्ट $mail->setFrom($Email, $Name); $mail->addAddress('', ''); // एक प्राप्तकर्ता जोड़ें $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 स्ट्रिंग में डेटा होता है। इन रूटीन को आसानी से उस कार्यप्रणाली के लिए अपनाया जा सकता है, लेकिन यह आपके लिए एक अभ्यास है (या शायद भविष्य का ट्यूटोरियल)। अब जब आप जानते हैं कि इसे इस तरह कैसे करना है, तो अपनी साइट पर अपने खुद के फॉर्म जोड़ें। इस प्रकार का अनुकूलन बहुत मजेदार है। एकमात्र सीमा आपकी कल्पना है।
