अब जब आपके पास एक फ्लैट फाइल सिस्टम का उपयोग करने वाली एक वेब साइट है, तो आप अपने उपयोगकर्ताओं से कुछ प्रतिक्रिया प्राप्त करना चाहेंगे। Disqus जोड़ना आसान है क्योंकि पेज में सभी जावास्क्रिप्ट कोड जोड़े गए हैं, लेकिन यह वह नहीं है जो आप चाहते हैं। आप चाहते हैं कि वे आपको सीधे ईमेल कर सकें ताकि आप उन्हें केवल उत्तर दे सकें।
आप उपयोगकर्ता के कंप्यूटर से सीधे ईमेल करने के लिए एक संपूर्ण JavaScript सिस्टम बना सकते हैं, लेकिन यह आपके ईमेल को स्पैमर के लिए खुला छोड़ देता है जो इसे आपके कोड से पुनर्प्राप्त कर सकते हैं और इसे अन्य स्पैमर को बेच सकते हैं। इसलिए, आपको सर्वर पर अपना ईमेल पता छिपाने की जरूरत है।
यह ट्यूटोरियल आपके नए PressCMS . में एक ईमेल संदेश प्रणाली जोड़ने के बारे में है (यानी phpPress , रूबीप्रेस , नोडप्रेस , और goPress ) मैं फ्रंट-एंड से शुरू कर रहा हूं और फिर प्रत्येक सिस्टम के लिए बैक-एंड को संबोधित कर रहा हूं। मैं मान रहा हूँ कि आपके सिस्टम पर ये सर्वर पहले से मौजूद हैं।
ब्राउज़र में फ़ॉर्म कैसे बनाएं
चूंकि प्रत्येक सर्वर के लिए फ्रंट-एंड कोड समान होगा, इसलिए आपको इन नई फ़ाइलों को प्रत्येक सर्वर निर्देशिका में कॉपी करना होगा। इसलिए, मैं सर्वर निर्देशिका से संदर्भित पथ में फ़ाइलों के बारे में बात करूंगा।
थीम में फॉर्म-विशिष्ट स्टाइल जोड़ने के बजाय, इस फॉर्म स्क्रिप्ट में सब कुछ एक ही स्थान पर है। फ़ाइल बनाएँ questions.html site/parts
. में निम्नलिखित सामग्री के साथ वेब साइट के लिए निर्देशिका:
यह एक पूर्ण नाम (प्रथम और अंतिम नाम), ईमेल और एक संदेश के लिए पूछने वाला एक मूल रूप बनाता है। यह फ़ॉर्म यह सुनिश्चित करने के लिए नियमित अभिव्यक्तियों का उपयोग करता है कि नाम और ईमेल पता मान्य है। यदि उपयोगकर्ता उन क्षेत्रों में जो कुछ भी इनपुट करता है वह pattern
. में रेगुलर एक्सप्रेशन से मेल नहीं खाता है निर्देश, तो फॉर्म जमा नहीं किया जाएगा। एक पॉपअप उपयोगकर्ता को title
. में संदेश के साथ फ़ील्ड को ठीक से भरने के लिए कहेगा पैरामीटर। प्रत्येक इनपुट फ़ील्ड में required
होता है आदिम भी। यह रिक्त प्रपत्रों को जमा होने से रोकता है। यह न्यूनतम डेटा सत्यापन है जिसे आपको फ्रंट-एंड पर उपयोग करना चाहिए।
action
form
में निर्देश एलिमेंट वेब ब्राउजर को बताता है कि फॉर्म डेटा किस पते पर जमा करना है। method
निर्देश ब्राउज़र को post
. के रूप में भेजने के लिए कहता है तरीका। प्रपत्र डेटा को सर्वर से पोस्ट अनुरोध के URL में रखा जाएगा। यह एक क्वेरी स्ट्रिंग है . सर्वर तब क्वेरी स्ट्रिंग में जानकारी को प्रोसेस करता है।
site/pages
में निर्देशिका, फ़ाइल बनाएँ contact.md
और यह कोड डालें:
### हमसे संपर्क करें यह एक आसान संपर्क फ़ॉर्म है। कृपया अपना नाम, प्रथम और अंतिम, ईमेल पता और संदेश भरें। मैं जल्द से जल्द आपके पास वापस आऊंगा। धन्यवाद।{{{question}}}
एक बार सहेजे जाने के बाद, आप सर्वर में पृष्ठों को आज़मा सकते हैं। अपने ब्राउज़र में https://localhost:8081/contact पेज खोलें।
हमसे संपर्क करें पृष्ठ ऊपर चित्र की तरह दिखेगा। लोड होने पर सीधे नाम फ़ील्ड की हाइलाइटिंग पर ध्यान दें। autofocus
निर्देश यह वांछित व्यवहार बनाता है। यह हमेशा अच्छा डिज़ाइन होता है कि उपयोगकर्ता को पहले फ़ील्ड में स्वचालित रूप से फ़ोकस करने की आवश्यकता होती है।
संदेश भेजने के बाद, उपयोगकर्ता को एक पुष्टिकरण संदेश अच्छा होगा। site/pages
में निर्देशिका, फ़ाइल बनाएँ messagesent.md
और यह कोड डालें:
### संदेश भेजा गया था मुझे संदेश भेजने के लिए समय निकालने के लिए बहुत-बहुत धन्यवाद। मैं यथाशीघ्र उत्तर दूंगा।
बस एक साधारण संदेश ताकि उपयोगकर्ता को पता चले कि संदेश ठीक से भेजा गया था। आप जैसे चाहें इस पर विस्तार कर सकते हैं।
goPress से फ़ॉर्म को संसाधित करना
उपयोगकर्ता द्वारा दिए गए संदेश को स्वच्छ करने के लिए, मैं ब्लू मंडे . का उपयोग कर रहा हूं पुस्तकालय। उस लाइब्रेरी को अपने सिस्टम पर लोड करने के लिए, आपको यह कमांड लाइन चलाने की जरूरत है:
जाओ 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()
. फ़ाइल के अंत में, यह कोड जोड़ें:
//// फंक्शन:पोस्टमैसेज//// विवरण:यह फंक्शन उनसे//वेबसाइट के मालिक// को मैसेज भेजेगा। सर्वर//संदर्भ.//func postMessage(ctx *web.Context) string {// पोस्ट की जानकारी प्राप्त करें और // ईमेल भेजें। // नाम:=ctx.Params["Name"] से:=ctx.Params["Email"] p:=bluemonday.UGCPolicy() संदेश:=p.Sanitize(ctx.Params["Message"]) से :="<आपका ईमेल पता>" विषय:="उपयोगकर्ता से संदेश:" + नाम + "CustomCT.com का" ईमेल भेजें (से, विषय, संदेश) // // संदेश पृष्ठ सामग्री प्राप्त करें और // इसे संसाधित करें . // pgloc:=goPress.SiteData.Sitebase + "पेज/मैसेजसेंट" रिटर्न goPress.RenderPageContents(ctx, goPress.GetPageContents(pgloc), pgloc)}//// फंक्शन:sendEmail//// विवरण:यह फ़ंक्शन एक भेजता है // ईमेल संदेश।/// इनपुट:// ईमेल पते पर // ईमेल पते से // संदेश भेजने के लिए // व्यक्ति का // संदेश भेजना // विषय का विषय // संदेश // संदेश // ईमेल का संदेश // func sendEmail (स्ट्रिंग के लिए, स्ट्रिंग, विषय स्ट्रिंग, संदेश स्ट्रिंग से) {बॉडी:=fmt.Sprintf ("टू:% s \ r \ n विषय:% s \r\n\r\n%s", to, विषय, संदेश) प्रमाणन :=smtp.PlainAuth("", "<आपका ईमेल पता>", "<आपका पासवर्ड>", "smtp.gmail.com" ) त्रुटि:=smtp.SendMail("smtp.gmail.com:587 ", प्रमाणन, से, []स्ट्रिंग{से}, []बाइट(बॉडी)) यदि त्रुटि है !=nil {/// त्रुटि को संसाधित करें। वर्तमान में, वहाँ मानते हुए // कोई समस्या नहीं है। // }}
ये दो कार्य ब्राउज़र से भेजे गए ईमेल को संसाधित करने के लिए हैंडलर बनाते हैं। /api/message
मार्ग postMessage()
. को कॉल करता है समारोह। यह उपयोगकर्ता द्वारा भरे गए फॉर्म से भेजी गई जानकारी को पुनः प्राप्त करता है, ब्लूमॉन्डे लाइब्रेरी के साथ संदेश को साफ करता है, और साइट के मालिक को sendEmail()
का उपयोग करके एक ईमेल भेजता है। समारोह। आपको <your email address>
. के स्थान पर अपना जीमेल पता डालना होगा धारक और पासवर्ड <password>
. में धारक।
goPress.go
. में फ़ाइल में, इस फ़ंक्शन को SetGetRoute()
. के बाद जोड़ें समारोह:
//// फंक्शन:SetPostRoute//// विवरण:यह फंक्शन // इस लाइब्रेरी में // वेब वेरिएबल सेटअप के लिए // आसान एक्सेस देता है। / हैंडलर फंक्शन उस // रूट को चलाने के लिए।//func SetPostRoute (रूट स्ट्रिंग, हैंडलर इंटरफेस {}) {वेब।यह फ़ंक्शन बिल्कुल
SetGetRoute()
. जैसा है समारोह। केवल अंतरweb.Post()
. का उपयोग कर रहा है समारोह।इन परिवर्तनों के साथ, आपका goPress सर्वर अब उपयोगकर्ता से आपके ईमेल भेज सकता है।
नोडप्रेस के साथ फॉर्म को प्रोसेस करना
नोड से ईमेल भेजने के लिए, आपको पहले नोडमेलर लाइब्रेरी . को स्थापित करना होगा और बॉडी-पार्सर लाइब्रेरी निम्न कमांड लाइन के साथ:
npm install -save nodemailernpm install -save body-parserफिर आपको नए पुस्तकालयों को लोड करने और मेलर ऑब्जेक्ट को कॉन्फ़िगर करने की आवश्यकता है।
nodePress.js
के शीर्ष पर फ़ाइल, अंतिम लाइब्रेरी लोड होने के बाद, इन पंक्तियों को जोड़ें:var nodemailer =आवश्यकता ('नोडेमेलर'); // https://nodemailer.com/var bodyParser =आवश्यकता ('बॉडी-पार्सर'); // https://github.com/expressjs/body-parser////// डिफ़ॉल्ट SMTP ट्रांसपोर्ट//var ट्रांसपोर्टर =nodemailer.createTransport ('smtps://<आपका ईमेल नाम%40) का उपयोग करके पुन:प्रयोज्य ट्रांसपोर्टर ऑब्जेक्ट बनाएं <आपका ईमेल डोमेन>:<आपका पासवर्ड>@smtp.gmail.com');यह नोडमेलर लाइब्रेरी को लोड करेगा और ईमेल भेजने के लिए पुन:प्रयोज्य घटक स्थापित करेगा। आपको
<your email name>
. को बदलना होगा आपके ईमेल पते के नाम के साथ (अर्थात @ चिह्न से पहले),<your email domain>
आपके ईमेल पते का डोमेन है (अर्थात सामान्य gmail के लिए gmail.com या यदि आपने अपने डोमेन नाम पर gmail सेट किया है तो आपका डोमेन नाम), और<your password>
आपके ईमेल खाते के पासवर्ड के साथ।नोडप्रेस वैरिएबल को इनिशियलाइज़ करने वाली लाइन के बाद, यह कोड जोड़ें:
//// बॉडी पार्सर लाइब्रेरी को कॉन्फ़िगर करें।//nodePress.use(bodyParser.urlencoded({ Extended:true}));अब, अंतिम
nodePress.get()
. के बाद फ़ंक्शन कॉल, यह कोड जोड़ें:nodePress.post('/api/message', function(request, response) {/// सेटअप ई-मेल डेटा // var mailOptions ={ from:request.body.Email, to:'<आपका ईमेल पता>', विषय:'संपर्क फ़ॉर्म पर' + request.body.Name + 'से संदेश।', टेक्स्ट:request.body.Message, html:request.body.Message }; // // ईमेल भेजें। / /transporter.sendMail(mailOptions, function(error, info){ if(error){ return console.log(error); } // // उपयोगकर्ता को संदेश भेजें ठीक पृष्ठ। // प्रतिक्रिया। भेजें (पृष्ठ ("संदेश")); });});यह
/api/message
. के लिए हैंडलर है पता। यह फ़ंक्शन फ़ॉर्म से भेजी गई जानकारी प्राप्त करता है, उचित ईमेल संदेश बनाता है, और इसे<your email address>
में दिए गए ईमेल पते पर भेजता है . ईमेल भेजने के बाद, यह उपयोगकर्ता को/messagesent
. पर भेज देगा पृष्ठ। बॉडी पार्सर मिडलवेयर में url पैरामीटरrequest.body
. में सहेजे गए हैं परिवर्तनशील और ठीक से साफ-सुथरा।यह कोड बिना टू-फैक्टर ऑथेंटिकेशन के जीमेल सेटअप के लिए काम करता है। यदि आपके पास दो-कारक प्रमाणीकरण है, तो आप नोडमेलर . का संदर्भ ले सकते हैं इसे स्थापित करने के लिए दस्तावेज।
रूबीप्रेस के साथ फ़ॉर्म को संसाधित करना
रूबी में ईमेल भेजने के लिए, आपको रूबी-जीमेल . इंस्टॉल करना होगा निम्नलिखित कमांड लाइन के साथ पुस्तकालय:
मणि रूबी-जीमेल स्थापित करेंआपके रूबी सेटअप के आधार पर, आपको
sudo
. का उपयोग करने की आवश्यकता हो सकती है आदेश के सामने। अब लायब्रेरी लोड करने के लिए,rubyPress.rb
के शीर्ष पर निम्न पंक्ति जोड़ें फ़ाइल:'gmail' की आवश्यकता है # https://github.com/dcparker/ruby-gmailआखिर
get
परिभाषाएँ, निम्नलिखित पंक्तियाँ जोड़ें:post '/api/message' do ## फॉर्म से पैरामीटर प्राप्त करें। # नाम =पैराम्स [:नाम] ईमेल =पैराम्स [:ईमेल] संदेश =पैराम्स [:संदेश] # # ईमेल बनाएं और भेजें। # Gmail.new('<आपका ईमेल पता>', '<आपका पासवर्ड>') करते हैं |gmail| gmail.deliver do to "" ईमेल विषय से "Message from " + name text_part do body message end end end # # यूजर को मैसेज भेजे गए पेज पर भेजें। # पेज 'messagesent'end इन परिवर्धन के साथ, आपका रूबीप्रेस सर्वर ईमेल प्रपत्रों को संसाधित कर सकता है। एक बार जब आप
<your email address>
बदल देते हैं आपके ईमेल पते पर और<your password>
आपके ईमेल सर्वर के पासवर्ड के लिए, स्क्रिप्ट समाप्त हो गई है।phpPress के साथ फ़ॉर्म को संसाधित करना
संशोधित करने वाला अंतिम सर्वर phpPress सर्वर है। सर्वर में ईमेल क्षमताओं को जोड़ने के लिए, मैं phpmailer लाइब्रेरी स्थापित करने जा रहा हूं . ईमेल के साथ काम करने के लिए PHP में यह सबसे व्यापक रूप से उपयोग की जाने वाली लाइब्रेरी है। पुस्तकालय को स्थापित करने के लिए, आपको इन कमांड-लाइन कमांड को phpPress निर्देशिका में चलाने की आवश्यकता है:
संगीतकार अद्यतनसंगीतकार को phpmailer/phpmailer की आवश्यकता होती हैदुर्भाग्य से, कंपोज़र अपडेट LightnCandy लाइब्रेरी को अपडेट करेगा। यह अच्छा है क्योंकि यह बहुत तेज़ और उपयोग में आसान है। लेकिन यह सर्वर कोड तोड़ देता है। index.php फ़ाइल में,
ProcessPage()
को खोजें कार्य करें और इसे निम्न कोड से बदलें://// फंक्शन:प्रोसेसपेज//// विवरण:यह फंक्शन // एक पेज को टेम्प्लेट में प्रोसेस करेगा, // सभी मूंछों को प्रोसेस करेगा//मैक्रोज़ को प्रोसेस करेगा, और सभी // शॉर्टकोड्स को प्रोसेस करेगा।//// इनपुट्स:// $लेआउट // पेज के लिए लेआउट // $पेज पेज मुख्य // सामग्री // फ़ंक्शन प्रोसेसपेज ($ लेआउट, $ पेज) {वैश्विक $ साइट, $ पार्ट्स, $ हेल्पर्स; // // पेज की सामग्री प्राप्त करें। // $ भागों ['सामग्री'] =फिगरपेज ($ पृष्ठ); // // पहले हैंडलबार पर पास करें। // $phpStr =LightnCandy::compile($layout, $helpers); $renderer =LightnCandy::prepare($phpStr); $ पृष्ठ =$ रेंडरर ($ भागों); // // शॉर्टकोड को प्रोसेस करें। // $ पेजशॉर्ट =प्रोसेसशॉर्टकोड्स ($ पेज); // // दूसरा पास हैंडलबार। // $phpStr =LightnCandy::compile($pageShort, $helpers); $renderer =LightnCandy::prepare($phpStr); $ पृष्ठ =$ रेंडरर ($ भागों); // // परिणाम लौटाएं। // वापसी ($ पृष्ठ);}पुराने कोड से इसकी तुलना करने पर, अब आपको किसी अस्थायी फ़ाइल के साथ काम करने की आवश्यकता नहीं है। यह सब स्मृति में किया जाता है और इसलिए बहुत तेज होता है। अब,
index.php
में सबसे ऊपर फ़ाइल, इसे जेड लाइब्रेरी के बाद जोड़ें:/// PHP मेलर:https://github.com/PHPMailer/PHPMailer//require 'vendor/phpmailer/phpmailer/PHPMailerAutoload.php';यह phpmailer लाइब्रेरी को लोड करता है। अब, अंतिम
$app->get()
. के बाद फ़ंक्शन, यह कोड जोड़ें://// यह मार्ग वेबसाइट पर// ईमेल फॉर्म से पोस्ट अनुरोध को संसाधित करने के लिए है।//$app->post('/api/message', function(Request $request, Response $response) {वैश्विक $_POST; //// पोस्ट चर प्राप्त करें।// $Name =$_POST['Name']; $Email =$_POST['Email']; $Message =$_POST['Message']; / // ईमेल संदेश बनाएं और उसे भेजें। मुख्य और बैकअप SMTP सर्वर निर्दिष्ट करें $mail->SMTPAuth =true; // SMTP प्रमाणीकरण सक्षम करें $mail->उपयोगकर्ता नाम ='<आपका ईमेल पता>'; // SMTP उपयोगकर्ता नाम $mail-> पासवर्ड ='<आपका पासवर्ड>'; // SMTP पासवर्ड $mail->SMTPSecure ='tls'; // TLS एन्क्रिप्शन सक्षम करें, `ssl` ने $mail-> पोर्ट =587; // TCP पोर्ट को $mail->setFrom($Email, $ से कनेक्ट करने के लिए स्वीकार किया है) नाम); $ मेल-> पता जोड़ें ('<आपका ईमेल>', ''); // एक प्राप्तकर्ता जोड़ें $ मेल-> विषय ="$ नाम से संदेश"; $ मेल-> बॉडी =$ संदेश; अगर(!$मेल->भेजें ()) {गूंज 'संदेश भेजा नहीं जा सका।'; गूंज 'मेलर त्रुटि:'। $ मेल-> एररइन्फो; } और {$newResponse =SetBasicHeader($response); $newResponse->getBody()->लिखें (पृष्ठ ('संदेश')); वापसी ($ newResponse); }}); यह
/api/message
. के लिए एक पोस्ट अनुरोध हैंडलर है रास्ता। यह ब्राउज़र से भेजे गए फॉर्म डेटा को पुनः प्राप्त करता है, इसके साथ एक ईमेल बनाता है, और ईमेल भेजता है। PHP स्वचालित रूप से कोई भी URL पैरामीटर लेता है और उन्हें वैश्विक सरणी$_POST
. में रखता है ।आपको
<your email address>
को बदलना होगा ,<your password>
, और<your name>
आपके ईमेल के लिए उपयुक्त मानों के साथ। यदि आप जीमेल एसएमटीपी सर्वर के अलावा किसी अन्य चीज का उपयोग कर रहे हैं, तो आपको$mail->Host
बदलना होगा। पता भी।निष्कर्ष
मैंने आपको दिखाया है कि कैसे आसानी से एक प्रेससीएमएस साइट पर एक ईमेल फॉर्म को जोड़ा जा सकता है। इस ट्यूटोरियल के डाउनलोड में ये सभी सर्वर उनके संशोधनों के साथ हैं। इसलिए आप इसे टाइप करने के बजाय डाउनलोड कर सकते हैं। मैंने थोड़ा त्रुटि प्रबंधन किया है। मैं एक अभ्यास के रूप में बाकी आप पर छोड़ दूंगा।
मैंने यहां जो विधि सिखाई है वह है यूआरएल में डेटा के साथ फॉर्म डेटा पोस्ट करना। आजकल कई साइटें REST API . का उपयोग करती हैं JSON . में डेटा के साथ क्रिया करने के लिए शरीर में स्ट्रिंग। ये दिनचर्या आसानी से उस पद्धति के लिए अपनाई जाती है, लेकिन यह आपके लिए एक अभ्यास है (या शायद भविष्य का ट्यूटोरियल)। अब जब आप जानते हैं कि इसे इस तरह कैसे करना है, तो अपनी साइट पर अपने स्वयं के फ़ॉर्म जोड़ें। इस प्रकार का अनुकूलन बहुत मजेदार है। केवल आपकी कल्पना की सीमा है।