Share
Acum, dacă aveți un site web care utilizează un sistem de fișiere plat, doriți să obțineți feedback de la utilizatorii dvs. Adăugarea Disqus este ușor, deoarece tot codul JavaScript este adăugat la pagină, dar nu este ceea ce doriți. Doriți ca ei să vă poată adresa direct prin e-mail, astfel încât să puteți răspunde doar la ele.
S-ar putea crea un sistem JavaScript toate pentru a trimite direct prin e-mail de la computerul utilizatorului, dar care lasă e-mail-ul dvs. deschis pentru a spammerilor în măsură să-l preluați de la codul dvs. și să-l vândă altor spammeri. Prin urmare, trebuie să vă ascundeți adresa de e-mail pe server.
Acest tutorial vizează adăugarea unui sistem de mesaje prin e-mail noului dvs. PressCMS (adică. phpPress, rubyPress, nodePress, și goPress). Încep cu front-ul și apoi adresez back-end-ul pentru fiecare sistem. Presupun că aveți deja serverele în sistemul dvs..
Deoarece codul front-end va fi același pentru fiecare server, va trebui să copiați aceste fișiere noi în fiecare din directoarele serverului. Prin urmare, voi vorbi despre fișierele din cale, așa cum se face referire în directorul serverului.
În loc să adăugați un aspect specific stilului tematic, acest script de formă are totul într-un singur loc. Creați fișierul questions.html în site-ul / piese pentru site-ul Web cu următorul conținut:
Aceasta creează un formular de bază care solicită un nume complet (numele și prenumele), adresa de e-mail și un mesaj. Acest formular utilizează expresii regulate pentru a vă asigura că numele și adresa de e-mail sunt valide. Dacă orice intrare a utilizatorilor în acele câmpuri nu se potrivește cu expresia regulată din model directivă, atunci formularul nu va fi prezentat. Un popup va cere utilizatorului să completeze corect câmpul cu mesajul din titlu parametru. Fiecare câmp de introducere are necesar primitiv, de asemenea. Aceasta păstrează formularele necompletate de la a fi trimise. Aceasta este validarea minimă a datelor pe care ar trebui să o utilizați la front-end.
acțiune directivă în formă element spune browser-ului web ce adresa trebuie să trimită datele formularului. metodă directiva îi spune browserului să trimită ca a post metodă. Datele formularului vor fi plasate în adresa URL a solicitării de postare către server. Acesta este un Șir de interogare. Serverul procesează apoi informațiile din șirul de interogări.
În site-ul / pagini director, creați fișierul contact.md și plasați acest cod:
### Contactați-ne Acesta este un formular simplu de contact. Vă rugăm să completați numele dvs., prima și ultima, adresa de e-mail și mesajul. Mă voi întoarce cât mai curând posibil. Mulțumiri. întrebare
După salvare, puteți încerca paginile din server. În browser-ul dvs., deschideți pagina http: // localhost: 8081 / contact.
Formularul de contact Contacteaza-ne pagina va arata ca imaginea de mai sus. Observați evidențierea câmpului Nume direct la încărcare. autofocus directiva creează acest comportament dorit. Este întotdeauna un design bun pentru a avea primul câmp de care are nevoie utilizatorul pentru a introduce în focalizare automată.
După trimiterea mesajului, un mesaj de confirmare pentru utilizator ar fi frumos. În site-ul / pagini director, creați fișierul messagesent.md și plasați acest cod:
### Mesajul a fost trimis Vă mulțumesc foarte mult pentru că ați luat timp pentru a-mi trimite un mesaj. Voi răspunde cât mai curând posibil.
Doar un mesaj simplu, astfel încât utilizatorul să știe că mesajul a fost trimis corect. Puteți extinde acest lucru după cum doriți.
Mesaj de confirmare trimis în mesaj Pentru a dezinstala mesajul dat de utilizator, folosesc Albastru luni bibliotecă. Pentru a încărca acea bibliotecă în sistemul dvs., trebuie să executați această linie de comandă:
du-te la github.com/microcosm-cc/bluemonday
Aceasta va face biblioteca disponibilă pentru programul dvs. Aceasta este singura bibliotecă non-standard necesară.
Deschide goPressServer.go fișier și adăugați aceasta în partea de sus a fișierului din interiorul import () afirmație:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
E-mailarea mesajelor de la server necesită aceste biblioteci. După linia care are goPress.DefaultRoutes ( apel, adăugați următorul cod:
Accentsconagua
// // Crearea unui traseu special pentru procesarea formularului. // goPress.SetPostRoute ('/ api / message', postMessage)Aceasta stabilește un traseu post / Api / mesaj pentru a rula funcția postMessage (). La sfârșitul fișierului, adăugați acest cod:
// // Funcție: postMessage // // Descriere: Această funcție va trimite // mesajul de la ei // site-ul proprietarului // al site-ului. // // Intrări: // ctx Serverul web // context. // func postMessage (ctx * web.Context) șir // // Obțineți informațiile despre poștă și trimiteți // emailul. // name: = ctx.Params ["Name"] din: = ctx.Params ["Email"] p: = bluemonday.UGCPolicy () message: = p.Sanitize (ctx.Params [ = ""subject: =" Mesaj de la utilizator: "+ nume +" de la CustomCT.com "sendEmail (către, de la subiect, mesaj) // // Obțineți conținutul paginilor cu mesajul și procesați-l / / pgloc: = goPress .SiteData.Sitebase + "pagini / messagesent" retur goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Funcție: sendEmail // // Descriere: Această funcție trimite un // mesaj email. // // Intrări: // la adresa de e-mail // pentru a trimite // message // de la adresa de e-mail // a persoanei // trimiterea // message // subiect Subiectul mesajului // message // Mesajul funcției // email // func sendEmail (la șir, din șir, șir de subiect, șir de mesaj) body: = fmt.Sprintf ("Către:% s \ r \ nSubject:% s \ r \ n \ r \ n% s ", la, subiect, mesaj) auth: = smtp.PlainAuth (" ", "," ", smtp.gmail.com) err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, din, [] șir to, [] byte (corp)) err! // // Elaborarea erorii. În prezent, presupunând că // nu este o problemă.
Aceste două funcții alcătuiesc handler-ul pentru prelucrarea e-mailurilor trimise de browser. / Api / mesaj rută solicită postMessage () funcţie. Acesta returnează informațiile trimise din formularul completat de utilizator, dezinfectează mesajul cu biblioteca BlueMonday și trimite un e-mail proprietarului site-ului utilizând Trimite email() funcţie. Va trebui să puneți adresa dvs. Gmail în locul paginii
În goPress.go fișier, adăugați această funcție după SetGetRoute () funcţie:
// // Funcție: SetPostRoute // // Descriere: Această funcție permite accesul ușor la // configurarea variabilei web din // această bibliotecă. // // Intrări: // route Route to setup // handler Funcție pentru a rula acea // cale. // func SetPostRoute (șir de rute, interfață handler ) web.Post (rută, handler)
Această funcție este exact ca SetGetRoute () funcţie. Singura diferență este folosirea funcției web.Post () funcţie.
Cu aceste modificări, serverul dvs. goPress vă poate trimite e-mailurile de la utilizator.
Pentru a trimite e-mailuri de la nod, va trebui să instalați mai întâi biblioteca nodemailer si bibliotecă de parser cu următoarea linie de comandă:
npm instalează -save nodemailer npm instalează -save corp-parser
Apoi trebuie să încărcați noile biblioteci și să configurați obiectul mailer. În partea de sus a nodePress.js după ultima bibliotecă încărcată, adăugați următoarele rânduri:
var nodemailer = necesită ("nodemailer"); // https://nodemailer.com/ var bodyParser = necesită ('body-parser'); // https://github.com/expressjs/body-parser // // a crea un obiect de transport reutilizabil utilizând // transportul SMTP implicit // var transporter = nodemailer.createTransport ('smtps: //:@ Smtp.gmail.com '); Aceasta va încărca biblioteca nodemailer și va configura componenta reutilizabilă pentru trimiterea de e-mailuri. Trebuie să o înlocuiți
După linia care inițializează variabila nodePress, adăugați acest cod:
// // Configurați biblioteca parserului corpului. / / nodePress.use (bodyParser.urlencoded (extended: true));
Acum, după ultimul nodePress.get () funcția de apel, adăugați acest cod:
nodePress.post ('/ api / message', functie (cerere, raspuns) // // configurare date e-mail // var mailOptions = de la: request.body.Email, la:', subiectul:' Mesaj de la '+ request.body.Name +' pe formularul de contact. ', text: request.body.Message, html: request.body.Message; Trimiteți e-mailul. // transporter.sendMail (mailOptions, functie (eroare, info) if (eroare) retur console.log (eroare); // // trimite utilizatorului mesajul a fost trimis bine pagina // reply.send pagina ("mesaje"));); ); Acesta este managerul pentru / Api / mesaj adresa. Această funcție primește informațiile trimise din formular, creează mesajul de e-mail propriu și îl trimite la adresa de e-mail dată în /mesaj trimis pagină. Partea centrală parseră a corpului are parametrii url salvați în request.body variabilă și sanitară adecvată.
Acest cod funcționează pentru configurarea Gmail fără autentificare cu doi factori. Dacă aveți autentificare cu două factori, puteți să consultați Nodemailer documentație pentru ao stabili.
Pentru a trimite e-mailuri în Ruby, va trebui să instalați rubin-gmail bibliotecă cu următoarea linie de comandă:
gem instala ruby-gmail
În funcție de configurația Ruby, este posibil să trebuiască să o utilizați sudo în fața comenzii. Acum, pentru a încărca biblioteca, adăugați următoarea linie în partea de sus a paginii rubyPress.rb fişier:
cereți "gmail" # https://github.com/dcparker/ruby-gmail
După toate acestea obține definiții, adăugați următoarele rânduri:
post "/ api / message" do # # Obțineți parametrii din formular. # name = params [: Nume] email = paramale [: Email] message = params [: Message] # # Creați și trimiteți e-mailul. # Gmail.new ('","') nu | gmail | gmail.deliver face ""din subiectul mesajului de e-mail" Mesaj de la "+ nume text_part până la finalul sfârșitului mesajului # # Trimiteți utilizatorul la pagina trimisă de mesaj. Cu aceste adăugiri, serverul dvs. rubyPress poate procesa formularele de e-mail. Odată ce te-ai schimbat
Ultimul server pe care îl modificați este serverul phpPress. Pentru a adăuga capabilități de e-mail la server, voi instala phpmailer bibliotecă. Aceasta este cea mai utilizată bibliotecă din PHP pentru a lucra cu e-mailuri. Pentru a instala biblioteca, trebuie să executați aceste comenzi de linie de comandă în directorul phpPress:
Compozitorul pentru compozitorul de actualizare necesită phpmailer / phpmailer
Din păcate, actualizarea compozitorului va actualiza biblioteca LightnCandy. Acest lucru este bun pentru că este mult mai rapid și mai ușor de utilizat. Dar rupe codul serverului. În fișierul index.php, localizați Proceseazapagina () funcția și înlocuiți-l cu următorul cod:
// // Funcție: ProcessPage // // Descriere: Această funcție va procesa // o pagină în șablon, // va procesa toate macro-urile Mustache // și va procesa toate // shortcodes. // // Inputs: // $ layout Layout pentru // pagina // // pagina Pagina principala // continut // functie ProcessPage ($ layout, $ page) global $ site, $ parts, $ helpers; // // Obțineți conținutul paginii. // $ parts ['conținut'] = cifrăPage ($ pagină); Prima trecere pe mâner. // $ phpStr = LightnCandy :: compilați ($ layout, $ helpers); $ renderer = LightnCandy :: pregăti ($ phpStr); $ page = $ renderer ($ parts); // Procesează codurile scurte. // $ pageShort = processShortcodes (pagina $); // // Partea inferioară a ghidonului. // $ phpStr = LightnCandy :: compilați ($ pageShort, $ helpers); $ renderer = LightnCandy :: pregăti ($ phpStr); $ page = $ renderer ($ parts); // // returnați rezultatele. // retur (pagina $);
Comparând-o cu codul mai vechi, nu mai trebuie să lucrați cu un fișier temporar. Totul este făcut în memorie și, prin urmare, este mult mai rapid. Acum, în partea de sus a index.php fișier, adăugați aceasta după biblioteca Jade:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // cere "vânzător / phpmailer / phpmailer / PHPMailerAutoload.php";
Se încarcă biblioteca phpmailer. Acum, după ultimul $ App-> get () funcția, adăugați acest cod:
// // Acest traseu este destinat prelucrării solicitării de post din // formularul de e-mail de pe site. // $ app-> post ('/ api / message', functie (Solicitare $ request, Response $ response) global $ _POST; // // Obtinerea variabilelor posts // $ Name = $ _POST [ ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Creați mesajul e-mail și trimiteți-l. ); // Setați mailer pentru a utiliza SMTP $ mail-> Host = 'smtp.gmail.com'; // Specificați servere SMTP principale și de backup $ mail-> SMTPAuth = true; // Activează autentificarea SMTP $ mail-> Username = '„; // Numele de utilizator SMTP $ mail-> Password = '„; // Parola SMTP $ mail-> SMTPSecure = 'tls'; // Activați criptarea TLS, "ssl" acceptă și $ mail-> Port = 587; // Portul TCP pentru conectarea la $ mail-> setFrom ($ Email, $ Name); $ Mail-> addAddress (“","„); // Adăugați un destinatar $ mail-> Subject = "Mesaj de la $ Name"; $ mail-> Body = $ Mesaj; if (! $ mail-> send ()) echo 'Mesajul nu a putut fi trimis.'; echo "Eroare de mailer: '. $ Mail-> ErrorInfo; altceva $ newResponse = SetBasicHeader ($ answer); $ NewResponse-> getBody () -> write (pagina ( 'messagesent')); întoarcere ($ newResponse); ); Acesta este un post de gestionare a cererii pentru / Api / mesaj cale. Acesta preia datele de formular trimise de la browser, creează un e-mail cu el și trimite e-mailul. PHP în mod automat ia orice parametri URL și le plasează în matricea globală $ _POST.
Va trebui să înlocuiți $ Mail-> gazdă adresa.
V-am arătat cum puteți adăuga cu ușurință un formular de e-mail pe un site de la pressCMS. Descărcarea pentru acest tutorial are toate aceste servere cu modificările lor. Prin urmare, puteți să o descărcați în loc să tastați. Am făcut o mică eroare. O să las restul pentru tine ca un exercițiu.
Metoda pe care am învățat-o aici este prin afișarea datelor din formular cu datele din URL. Multe site-uri folosesc astăzi a REST API cu datele din a JSON șir în organism pentru a efectua acțiunea. Aceste rutine sunt ușor de adoptat pentru această metodologie, dar acesta este un exercițiu pentru tine (sau poate un tutorial viitor). Acum că știți cum să faceți acest lucru, adăugați propriile formulare pe site-ul dvs. Acest tip de personalizare este foarte distractiv. Singura limită este imaginația ta.
