Share
Nu när du har en webbplats med ett platt filsystem, vill du få lite feedback från dina användare. Att lägga till Disqus är enkelt eftersom det är allt JavaScript-kod som läggs till på sidan, men det är inte det du vill ha. Du vill att de ska kunna maila dig direkt så att du kan svara bara för dem.
Du kan skapa ett helt JavaScript-system för att skicka e-post direkt från användarens dator, men det låter ditt mail vara öppet för spammare som kan hämta det från din kod och sälja det till andra spammare. Därför måste du gömma din e-postadress på servern.
Denna handledning handlar om att lägga till ett e-postmeddelandesystem för ditt nya PressCMS (d.v.s.. phpPress, rubyPress, nodePress, och goPress). Jag börjar med fronten och adresserar sedan baksidan för varje system. Jag antar att du redan har dessa servrar på ditt system.
Eftersom den främre ändkoden kommer att vara densamma för varje server måste du kopiera dessa nya filer till var och en av serverns kataloger. Därför kommer jag att prata om filerna i sökvägen som referens från serverns katalog.
I stället för att lägga till formulärspecifik styling till temat har detta formulärskript allt på ett ställe. Skapa filen questions.html i språk / delar katalog för webbplatsen med följande innehåll:
Detta skapar en grundläggande blankett som kräver ett fullständigt namn (för- och efternamn), e-post och ett meddelande. Denna formulär använder vanliga uttryck för att se till att namn och e-postadress är giltiga. Om det som användaren matar in i dessa fält inte matchar det reguljära uttrycket i mönster direktivet kommer formuläret inte att lämnas in. En popup kommer att be användaren att fylla i fältet korrekt med meddelandet i titel parameter. Varje inmatningsfält har nödvändig primitiva också. Detta håller tomma blanketter från att skickas in. Det här är den minsta minimidatavalideringen du ska använda på fronten.
De verkan direktivet i form elementet berättar webbläsaren vilken adress som ska skickas till formulärdata till. De metod direktivet berättar att webbläsaren ska skicka som en posta metod. Formdata kommer att placeras i webbadressen för efterförfrågan till servern. Det här är en Frågesträng. Servern behandlar sedan informationen i frågesträngen.
I Sajt / sidor katalog, skapa filen contact.md och placera den här koden:
### Kontakta oss Detta är ett enkelt kontaktformulär. Vänligen fyll i ditt namn, första och sista, e-postadress och meddelande. Jag kommer tillbaka till dig så snart som möjligt. Tack. fråga
När du har sparat kan du prova sidorna på servern. Öppna webbläsaren http: // localhost: 8081 / contact i din webbläsare.
Kontaktformulärssida De Kontakta oss sidan kommer att se ut som ovanstående bild. Observera markeringen av fältet Namn direkt vid laddning. De autofokus direktivet skapar detta önskade beteende. Det är alltid bra att ha det första fältet som användaren behöver skriva in i fokuserad automatiskt.
Efter att ha skickat meddelandet skulle ett bekräftelsemeddelande till användaren vara trevligt. I Sajt / sidor katalog, skapa filen messagesent.md och placera den här koden:
### Meddelandet skickades Tack så mycket för att du tog dig tid att skicka ett meddelande till mig. Jag kommer att svara så snart som möjligt.
Bara ett enkelt meddelande så att användaren vet att meddelandet skickades korrekt. Du kan expandera på detta som du vill.
Meddelande skickad bekräftelse sida För att sanitera meddelandet som ges av användaren använder jag Blå måndag bibliotek. För att ladda det biblioteket på ditt system måste du köra den här kommandoraden:
gå github.com/microcosm-cc/bluemonday
Detta gör biblioteket tillgängligt för ditt program. Det är det enda icke-standardiserade biblioteket som behövs.
Öppna goPressServer.go fil och lägg till det här till början av filen inuti import () påstående:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
Att skicka meddelanden från servern kräver dessa bibliotek. Efter linjen som har goPress.DefaultRoutes ( funktionssamtal, lägg till följande kod:
Accentsconagua
// // Konfigurera speciell väg för vår formbehandling. // goPress.SetPostRoute ('/ api / message', postMessage)Detta ställer in en postruta av / Api / meddelande att köra funktionen skicka meddelande(). Lägg till den här koden i slutet av filen:
// // Funktion: postMessage // // Beskrivning: Den här funktionen skickar // meddelandet från dem // webbplatsen till ägaren // av webbplatsen. // // Inmatningar: // ctx Webbservern // kontext. // func postMessage (ctx * web.Context) sträng // // Hämta postinformationen och skicka // email. // namn: = ctx.Params ["Name"] från: = ctx.Params ["Email"] p: = bluemonday.UGCPolicy () meddelande: = p.Sanitize (ctx.Params ["Message"]) till: = ""ämne: =" Meddelande från användare: "+ namn +" av CustomCT.com "sendEmail (till, från, ämne, meddelande) // // Hämta meddelandets innehåll och // bearbeta det. // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" returnera goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Funktion: sendEmail // // Beskrivning: Den här funktionen skickar ett // email-meddelande. / // Inmatningar: // till e-postadressen // för att skicka // meddelandet // från e-postadressen // till personen // skicka // meddelande // ämne ämnet för // meddelande // meddelande Meddelandet till // email // func sendEmail (till sträng, från sträng, ämnessträng, meddelandesträng) body: = fmt.Sprintf ("Till:% s \ r \ nSubject:% s \ r \ n \ r \ n% s ", till, ämne, meddelande) auth: = smtp.PlainAuth (" "," "," "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, från, [] sträng till, [] byte (kropp)) om err! = nil // // Bearbeta felet. För närvarande antas det att // är inget problem. //
Dessa två funktioner utgör handlaren för behandling av e-postmeddelanden som skickas från webbläsaren. De / Api / meddelande rutt anropar skicka meddelande() fungera. Den hämtar informationen som skickas från formuläret fyllt i av användaren, sanitiserar meddelandet med BlueMonday-biblioteket och skickar ett mail till ägaren av webbplatsen med hjälp av skicka epost() fungera. Du måste lägga din Gmail-adress i stället för
I goPress.go fil, lägg till den här funktionen efter SetGetRoute () fungera:
// // Funktion: SetPostRoute // // Beskrivning: Den här funktionen ger en // enkel åtkomst till // webbvariablerna i // det här biblioteket. // // Inmatningar: // ruttväg till installation // handler Funktion för att köra den // rutten. // func SetPostRoute (ruttsträng, hanteringsgränssnitt ) web.Post (rutt, hanterare)
Den här funktionen är precis som SetGetRoute () fungera. Den enda skillnaden är att använda web.Post () fungera.
Med dessa ändringar kan din goPress-server nu skicka dina e-postmeddelanden från användaren.
För att skicka e-post från nod måste du först installera nodemailer bibliotek och den kroppsparserbibliotek med följande kommandorad:
npm installera - spara nodemailer npm installera - spara kroppsparser
Då måste du ladda de nya biblioteken och konfigurera mailerobjektet. På toppen av nodePress.js filen, efter det att det senaste biblioteket laddats, lägg till följande rader:
var nodemailer = kräver ("nodemailer"); // https://nodemailer.com/ var bodyParser = kräver ('body-parser'); // https://github.com/expressjs/body-parser // // skapa återanvända transportörsobjekt med // standard SMTP-transport // var transporter = nodemailer.createTransport ('smtps: //:@ Smtp.gmail.com "); Detta laddar nodemailer-biblioteket och ställer in den återanvändbara komponenten för att skicka e-postmeddelanden. Du måste byta ut
Efter linjen som initierar variabeln nodePress, lägg till den här koden:
// // Konfigurera kroppsparserbiblioteket. // nodePress.use (bodyParser.urlencoded (extended: true));
Nu efter det sista nodePress.get () funktionssamtal, lägg till den här koden:
nodePress.post ('/ api / message', funktion (begäran, svar) // // setup e-mail data // var mailOptions = from: request.body.Email, to: '', ämne:' Meddelande från '+ request.body.Name +' på kontaktformulär. ', text: request.body.Message, html: request.body.Message; // // Skicka e-postmeddelandet. // transport.sendMail (mailOptions, funktion (fel, info) if (error) returnera console.log (error); // // Skicka användaren till meddelandet skickades okej sida. // response.send ( sida ("messagesent"));); ); Detta är hanteraren för / Api / meddelande adress. Den här funktionen får informationen som skickas från formuläret, skapar korrekt e-postmeddelande och skickar det till den e-postadress som anges i /meddelande skickat sida. Body parser middleware har URL-parametrarna sparade i request.body variabel och korrekt sanitiserad.
Den här koden fungerar för konfiguration av Gmail utan tvåfaktorsautentisering. Om du har tvåfaktorsautentisering kan du referera till Nodemailer dokumentation för att ställa in den.
För att skicka e-postmeddelanden i Ruby måste du installera ruby-gmail bibliotek med följande kommandorad:
pärla installera ruby-gmail
Beroende på din Ruby-inställning kan du behöva använda sudo framför kommandot. För att ladda biblioteket lägger du till följande rad överst på sidan rubyPress.rb fil:
kräver "gmail" # https://github.com/dcparker/ruby-gmail
Efter alla skaffa sig definitioner, lägg till följande rader:
posta '/ api / message' do # # Hämta parametrarna från formuläret. # name = params [: Name] email = params [: Email] message = params [: Message] # # Skapa och skicka e-postmeddelandet. # Gmail.new ('','') gör | gmail | gmail.deliver gör till ""från e-post ämne" Meddelande från "+ namn text_part gör body message slutet slutet # # Skicka användaren till meddelandet skickade sidan. # page 'messageent' slutet Med dessa tillägg kan din rubypress-server hantera e-postformulär. När du ändras
Den sista servern som ska ändras är phpPress-servern. För att lägga till e-mailfunktioner till servern ska jag installera phpmailer biblioteket. Detta är det mest använda biblioteket i PHP för att arbeta med e-post. För att installera biblioteket måste du köra kommandoraden för kommandoraden i phpPress-katalogen:
kompositör uppdatera kompositören kräver phpmailer / phpmailer
Tyvärr uppdaterar komponentuppdateringen LightnCandy-biblioteket. Det här är bra eftersom det är mycket snabbare och lättare att använda. Men det bryter serverns kod. I index.php-filen, leta reda på ProcessPage () funktionen och ersätt den med följande kod:
// // Funktion: ProcessPage // // Beskrivning: Denna funktion kommer att bearbeta // en sida i mallen, // bearbeta alla mustasch // makron och bearbeta alla // kortnummer. // // Inmatningar: // $ layout Layouten för // sidan // $ sidan Sidorna main // content // function ProcessPage ($ layout, $ page) global $ site, $ parts, $ helpers; // // Hämta innehållet på sidan. // $ parts ['content'] = figurePage ($ sida); // // Först lämna handtag. // $ phpStr = LightnCandy :: kompilera ($ layout, $ helpers); $ renderer = LightnCandy :: förbereda ($ phpStr); $ page = $ renderer ($ parts); // // Bearbeta kortkoderna. // $ pageShort = processShortcodes ($ sida); // // Second pass Handtag. // $ phpStr = LightnCandy :: kompilera ($ pageShort, $ helpers); $ renderer = LightnCandy :: förbereda ($ phpStr); $ page = $ renderer ($ parts); // // Retur resultaten. // retur ($ sida);
Om du jämför det med den äldre koden behöver du inte längre arbeta med en tillfällig fil. Det är allt gjort i minnet och är därför mycket snabbare. Nu, på toppen av index.php fil, lägg till detta efter Jade-biblioteket:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // kräver 'säljare / phpmailer / phpmailer / PHPMailerAutoload.php';
Detta laddar upp phpmailer-biblioteket. Nu efter det sista $ App> get () funktion, lägg till den här koden:
// // Denna rutt är för att behandla postförfrågan från //-formuläret på webbplatsen. // $ app-> post ('/ api / message', funktion (begäran $ request, Response $ response) global $ _POST; // // Hämta postvariablerna. // $ Name = $ _POST ['Name' ] $ $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Skapa e-postmeddelandet och skicka det. // $ mail = new PHPMailer; $ mail-> isSMTP ); // Ange mailer för att använda SMTP $ mail-> Host = 'smtp.gmail.com'; // Ange huvud- och backup SMTP-servrar $ mail-> SMTPAuth = true; // Aktivera SMTP-autentisering $ mail-> Användarnamn = ''; // SMTP användarnamn $ mail-> Password = ''; // SMTP-lösenord $ mail-> SMTPSecure = 'tls'; // Aktivera TLS-kryptering, 'ssl' accepterade också $ mail-> Port = 587; // TCP-port för att ansluta till $ mail-> setFrom ($ Email, $ Name); $ Post-> addAddress (',''); // Lägg till en mottagare $ mail-> Subject = "Meddelande från $ Name"; $ mail-> Body = $ Message; om (! $ mail-> send ()) echo 'Meddelandet kunde inte skickas.'; echo 'Mailer Error:'. $ Post-> ErrorInfo; annars $ newResponse = SetBasicHeader ($ response); $ NewResponse-> getBody () -> write (sida (messagesent ')); avkastning ($ newResponse); ); Detta är en postförfrågningshanterare för / Api / meddelande väg. Den hämtar formulärdata som skickas från webbläsaren, skapar ett mail med det och skickar e-postmeddelandet. PHP tar automatiskt alla webbadressparametrar och placerar dem i den globala gruppen $ _POST.
Du måste ersätta $ Post-> Host adress också.
Jag har visat dig hur du enkelt kan lägga till ett e-postformulär på en pressCMS-webbplats. Nedladdningen för denna handledning har alla dessa servrar med sina ändringar. Du kan därför ladda ner den istället för att skriva. Jag har gjort en liten felhantering. Jag lämnar vila upp till dig som en övning.
Metoden jag lärde mig här är att posta formulärdata med data i webbadressen. Många webbplatser använder idag a REST API med uppgifterna i a JSON sträng i kroppen för att utföra åtgärden. Dessa rutiner är enkelt anpassade till den metoden, men det är en övning för dig (eller kanske en framtida handledning). Nu när du vet hur du gör det här sättet, lägg till dina egna formulär på din webbplats. Denna typ av anpassning är mycket roligt. Den enda gränsen är din fantasi.
