Share
Nu u een website heeft die gebruikmaakt van een plat bestandssysteem, wilt u wat feedback van uw gebruikers ontvangen. Het toevoegen van Disqus is eenvoudig, omdat het allemaal JavaScript-code is die aan de pagina is toegevoegd, maar dit is niet wat u wilt. U wilt dat ze u rechtstreeks kunnen e-mailen zodat u alleen op hen kunt reageren.
U kunt een volledig JavaScript-systeem maken om rechtstreeks vanaf de computer van de gebruiker te e-mailen, maar dat laat uw e-mail open voor spammers die het uit uw code kunnen halen en het aan andere spammers kunnen verkopen. Daarom moet u uw e-mailadres op de server verbergen.
Deze tutorial gaat over het toevoegen van een e-mailsysteem aan je nieuwe PressCMS (d.w.z. phpPress, rubyPress, nodePress, en goPress). Ik begin met de front-end en vervolgens de back-end voor elk systeem. Ik ga ervan uit dat je deze servers al op je systeem hebt staan.
Aangezien de front-endcode voor elke server hetzelfde is, moet u deze nieuwe bestanden kopiëren naar elk van de serverdirectory's. Daarom zal ik het hebben over de bestanden in het pad waarnaar wordt verwezen vanuit de serverdirectory.
In plaats van het toevoegen van een formulier-specifieke stijl aan het thema, heeft dit formulierscript alles op één plaats. Maak het bestand aan questions.html in de site / onderdelen map voor de website met de volgende inhoud:
Hiermee wordt een basisformulier gemaakt waarin om een volledige naam (voor- en achternaam), e-mailadres en een bericht wordt gevraagd. Dit formulier maakt gebruik van reguliere expressies om ervoor te zorgen dat de naam en het e-mailadres geldig zijn. Als wat de gebruiker invoert in die velden niet overeenkomt met de reguliere expressie in de patroon richtlijn, dan wordt het formulier niet ingediend. Een pop-up vraagt de gebruiker om het veld correct in te vullen met het bericht in de titel parameter. Elk invoerveld heeft de verplicht ook primitief. Hierdoor worden lege formulieren niet ingediend. Dit is de absolute minimale gegevensvalidatie die u op de front-end moet gebruiken.
De actie richtlijn in de het formulier element vertelt de webbrowser naar welk adres de formuliergegevens moeten worden verzonden. De methode richtlijn vertelt de browser om te verzenden als een post methode. De formuliergegevens worden in de URL van het postverzoek naar de server geplaatst. Dit is een Queryreeks. De server verwerkt vervolgens de informatie in de queryreeks.
In de site / pagina map, maak het bestand aan contact.md en plaats deze code:
### Neem contact met ons op Dit is een eenvoudig contactformulier. Vul alstublieft uw naam, voor- en achternaam, e-mailadres en bericht in. Ik zal zo snel mogelijk contact met u opnemen. Bedankt. vraag
Na het opslaan kunt u de pagina's op de server uitproberen. Open in uw browser de pagina http: // localhost: 8081 / contact.
Contactformulierpagina De Neem contact met ons op pagina ziet eruit als de bovenstaande afbeelding. Let op de markering van het veld Naam direct na het laden. De autofocus richtlijn creëert dit gewenste gedrag. Het is altijd een goed ontwerp om het eerste veld te hebben dat de gebruiker moet typen om automatisch gefocust te zijn.
Na het verzenden van het bericht zou een bevestigingsbericht naar de gebruiker leuk zijn. In de site / pagina map, maak het bestand aan messagesent.md en plaats deze code:
### Bericht is verzonden Heel erg bedankt voor het nemen van de tijd om me een bericht te sturen. Ik zal zo snel mogelijk antwoorden.
Gewoon een eenvoudig bericht zodat de gebruiker weet dat het bericht correct is verzonden. U kunt dit uitbreiden zoals u wilt.
Bericht verzonden Bevestigingspagina Om het bericht van de gebruiker te ontsmetten, gebruik ik de Blauwe maandag bibliotheek. Als u die bibliotheek op uw systeem wilt laden, moet u deze opdrachtregel uitvoeren:
ga naar github.com/microcosm-cc/bluemonday
Hiermee wordt de bibliotheek beschikbaar voor uw programma. Dat is de enige niet-standaard bibliotheek die nodig is.
Open de goPressServer.go bestand en voeg dit toe aan de bovenkant van het bestand in de import () uitspraak:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
Voor het e-mailen van berichten van de server zijn deze bibliotheken nodig. Na de regel die dat heeft goPress.DefaultRoutes ( functieaanroep, voeg de volgende code toe:
Accentsconagua
// // Speciale route instellen voor onze formulierverwerking. // goPress.SetPostRoute ('/ api / message', postMessage)Hiermee wordt een postroute van ingesteld / Api / message om de functie uit te voeren postMessage (). Voeg aan het einde van het bestand deze code toe:
// // Functie: postMessage // // Beschrijving: deze functie verzendt // het bericht van hen // de website naar de eigenaar // van de site. // // Inputs: // ctx De context van de webserver //. // func postMessage (ctx * web.Context) string // // Verkrijg de post-informatie en verzend de // email. // name: = ctx.Params ["Name"] from: = ctx.Params ["Email"] p: = bluemonday.UGCPolicy () message: = p.Sanitize (ctx.Params ["Message"]) naar: = ""subject: =" Bericht van gebruiker: "+ name +" van CustomCT.com "sendEmail (naar, van, onderwerp, bericht) // // Haal de inhoud van de messageent-pagina op en // verwerk deze // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" return goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Functie: sendEmail // // Beschrijving: deze functie verzendt een // e-mailbericht. / // Invoer: // naar Het e-mailadres // om het // bericht // te verzenden vanaf Het e-mailadres // van de persoon // het // -bericht verzenden // onderwerp Het onderwerp van het bericht // bericht // Het bericht van de // email // func sendEmail (naar string, van string, onderwerpstring, berichtstring) body: = fmt.Sprintf ("To:% s \ r \ nSubject:% s \ r \ n \ r \ n% s ", naar, onderwerp, bericht) auth: = smtp.PlainAuth (" "," "," "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, from, [] string to, [] byte (body)) if fout! = nihil // // Verwerk de fout. Momenteel is ervan uitgaan dat // geen probleem is. //
Deze twee functies vormen de handler voor het verwerken van e-mails verzonden vanuit de browser. De / Api / message route roept de postMessage () functie. Het haalt de informatie op uit het formulier dat door de gebruiker is ingevuld, zuivert het bericht met de BlueMonday-bibliotheek en stuurt een e-mail naar de eigenaar van de site met behulp van de sendEmail () functie. Je zult je Gmail-adres moeten plaatsen in plaats van de
In de goPress.go bestand, voeg deze functie toe na de SetGetRoute () functie:
// // Functie: SetPostRoute // // Beschrijving: deze functie geeft // een gemakkelijke toegang tot de // webvariabele setup in // deze bibliotheek. // // Ingangen: // route Route naar setup // handler Functie om die // route uit te voeren. // func SetPostRoute (routestring, handlerinterface ) web.Post (route, handler)
Deze functie is precies hetzelfde als de SetGetRoute () functie. Het enige verschil is het gebruik van de web.Post () functie.
Met deze wijzigingen kan uw goPress-server nu uw e-mails van de gebruiker verzenden.
Om e-mails van het knooppunt te verzenden, moet u eerst het nodemailer-bibliotheek en de body-parser-bibliotheek met de volgende opdrachtregel:
npm install - bewaar nodemailer npm install - body-parser opslaan
Vervolgens moet u de nieuwe bibliotheken laden en het mailer-object configureren. Aan de top van de nodePress.js bestand, voeg na het laden van de laatste bibliotheek deze regels toe:
var nodemailer = require ('nodemailer'); // https://nodemailer.com/ var bodyParser = require ('body-parser'); // https://github.com/expressjs/body-parser // // maak een herbruikbaar transporter-object aan met behulp van het // standaard SMTP-transport // var transporter = nodemailer.createTransport ('smtps: //:@ Smtp.gmail.com '); Hierdoor wordt de bibliotheek van nodemailer geladen en wordt het herbruikbare component voor het verzenden van e-mails ingesteld. Je moet vervangen
Na de regel die de variabele nodePress initialiseert, voegt u deze code toe:
// // De body parser-bibliotheek configureren. // nodePress.use (bodyParser.urlencoded (extended: true));
Nu, na de laatste nodePress.get () functieaanroep, voeg deze code toe:
nodePress.post ('/ api / message', function (request, response) // // setup e-mail data // var mailOptions = from: request.body.Email, to: '', onderwerp:' Bericht van '+ request.body.Name +' op contactformulier. ', tekst: request.body.Message, html: request.body.Message; // // Stuur de e-mail. // transporter.sendMail (mailOptions, function (error, info) if (error) return console.log (error); // // Stuur de gebruiker naar het bericht is verzonden okay. // response.send ( pagina ("messagesent"));); ); Dit is de handler voor de / Api / message adres. Deze functie haalt de informatie uit het formulier, maakt het juiste e-mailbericht en stuurt het naar het e-mailadres dat is opgegeven in /bericht verzonden pagina. De body parser-middleware heeft de URL-parameters opgeslagen in de request.body variabel en naar behoren schoongemaakt.
Deze code werkt voor Gmail-instellingen zonder tweefactorauthenticatie. Als u twee-factor-authenticatie hebt, kunt u verwijzen naar de Nodemailer documentatie om het in te stellen.
Als u e-mails in Ruby wilt verzenden, moet u de ruby-gmail bibliotheek met de volgende opdrachtregel:
gem installeer ruby-gmail
Afhankelijk van je Ruby-setup, moet je misschien gebruiken sudo voor het commando. Om de bibliotheek te laden, voegt u de volgende regel toe aan de bovenkant van de rubyPress.rb het dossier:
vereisen 'gmail' # https://github.com/dcparker/ruby-gmail
Na alle krijgen definities, voeg de volgende regels toe:
post '/ api / message' do # # Haal de parameters uit het formulier. # name = params [: Name] email = params [: Email] message = params [: Message] # # Maak en verstuur de e-mail. # Gmail.new ('','') do | gmail | gmail.deliver doen om ""van e-mail onderwerp" Bericht van "+ naam text_part doe lichaam bericht end end end # # Stuur de gebruiker naar de bericht verzonden pagina. # pagina 'berichten''eind Met deze toevoegingen kan uw rubyPress-server e-mailformulieren verwerken. Zodra je verandert
De laatste server die moet worden gewijzigd, is de phpPress-server. Om e-mailmogelijkheden aan de server toe te voegen, ga ik het installeren phpmailer-bibliotheek. Dit is de meest gebruikte bibliotheek in PHP voor het werken met e-mails. Om de bibliotheek te installeren, moet u deze opdrachtregelopdrachten uitvoeren in de directory phpPress:
componist update componist heeft phpmailer / phpmailer nodig
Helaas werkt de update van de componist de LightnCandy-bibliotheek bij. Dit is goed omdat het veel sneller en gemakkelijker te gebruiken is. Maar het breekt de servercode. Zoek in het index.php-bestand naar ProcessPage () functie en vervang deze door de volgende code:
// // Functie: ProcessPage // // Beschrijving: deze functie verwerkt // een pagina in de sjabloon, // verwerkt alle Moustache // -macro's en verwerkt alle // shortcodes. // // Inputs: // $ layout De layout voor // de pagina // $ pagina De pagina's main // contents // functie ProcessPage ($ layout, $ page) global $ site, $ parts, $ helpers; // // Download de inhoud van de pagina. // $ parts ['content'] = figurePage ($ page); // // Eerste doorgeven stuur. // $ phpStr = LightnCandy :: compileren ($ layout, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // Verwerk de shortcodes. // $ pageShort = processKortcodes ($ pagina); // // Tweede doorgangstuur. // $ phpStr = LightnCandy :: compile ($ pageShort, $ helpers); $ renderer = LightnCandy :: prepare ($ phpStr); $ page = $ renderer ($ parts); // // De resultaten retourneren. // return ($ pagina);
Als je het vergelijkt met de oudere code, hoef je niet langer met een tijdelijk bestand te werken. Het is allemaal in het geheugen gedaan en is daarom veel sneller. Nu, bovenaan index.php bestand, voeg dit toe na de Jade-bibliotheek:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // vereisen 'vendor / phpmailer / phpmailer / PHPMailerAutoload.php';
Dit laadt de phpmailer-bibliotheek. Nu, na de laatste $ App-> get () functie, voeg deze code toe:
// // Deze route is bedoeld voor het verwerken van het postverzoek uit het // e-mailformulier op de website. // $ app-> post ('/ api / message', function (Request $ request, Response $ response) global $ _POST; // // Verkrijg de postvariabelen. // $ Name = $ _POST ['Name' ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Maak het e-mailbericht aan en verzend het. // $ mail = nieuwe PHPMailer; $ mail-> isSMTP ( ); // Stel mailer in om SMTP $ mail-> Host = 'smtp.gmail.com'; // Geef hoofd- en back-up SMTP-servers te gebruiken $ mail-> SMTPAuth = true; // Schakel SMTP-authenticatie $ mail-> Username = in ''; // SMTP-gebruikersnaam $ mail-> Wachtwoord = ''; // SMTP-wachtwoord $ mail-> SMTPSecure = 'tls'; // Schakel TLS-codering in, 'ssl' accepteerde ook $ mail-> Poort = 587; // TCP-poort om verbinding te maken met $ mail-> setFrom ($ Email, $ Name); $ Mail-> addAddress ('',''); // Voeg een ontvanger toe $ mail-> Subject = "Bericht van $ Naam"; $ mail-> Body = $ Message; if (! $ mail-> send ()) echo 'Bericht kan niet worden verzonden.'; echo 'Mailer Error:'. $ Mail-> ErrorInfo; else $ newResponse = SetBasicHeader ($ antwoord); $ NewResponse-> getBody () -> write (pagina ( 'messagesent')); return ($ newResponse); ); Dit is een handler voor postverzoek voor de / Api / message pad. Het haalt de formuliergegevens op die zijn verzonden vanuit de browser, maakt er een e-mail mee en verzendt de e-mail. PHP neemt automatisch URL-parameters en plaatst deze in de globale array $ _POST.
Je zult moeten vervangen $ Mail-> Host adres ook.
Ik heb je laten zien hoe je gemakkelijk een e-mailformulier kunt toevoegen aan een pressCMS-site. De download voor deze tutorial heeft al deze servers met hun modificaties. Je kunt het dus downloaden in plaats van te typen. Ik heb een kleine foutafhandeling gedaan. Ik laat de rest aan jou over als een oefening.
De methode die ik hier heb geleerd, is door formuliergegevens te plaatsen met de gegevens in de URL. Veel sites gebruiken tegenwoordig een REST API met de gegevens in a JSON string in het lichaam om de actie uit te voeren. Deze routines kunnen gemakkelijk worden overgenomen in die methodologie, maar dat is een oefening voor u (of misschien een toekomstige zelfstudie). Nu u weet hoe u dit op deze manier moet doen, voegt u uw eigen formulieren toe aan uw site. Dit soort aanpassen is erg leuk. De enige beperking is je verbeelding.
