Share
Nå som du har et nettsted med et flatt filsystem, vil du gjerne få tilbakemelding fra brukerne dine. Å legge til disqus er enkelt siden det er alt JavaScript-kode lagt til siden, men det er ikke det du vil ha. Du vil at de skal kunne sende deg e-post direkte slik at du bare kan svare dem.
Du kan opprette et alt JavaScript-system for å sende e-post direkte fra brukerens datamaskin, men det gir e-posten din åpen for spammere som kan hente den fra koden din og selge den til andre spammere. Derfor må du skjule e-postadressen din på serveren.
Denne opplæringen handler om å legge til et e-postmeldingssystem for det nye PressCMS (dvs. phpPress, rubyPress, nodePress, og goPress). Jeg starter med fronten og adresserer deretter bakenden for hvert system. Jeg antar at du allerede har disse serverne på systemet ditt.
Siden front-end-koden vil være den samme for hver server, må du kopiere disse nye filene til hver av serverkatalogen. Derfor vil jeg snakke om filene i banen som referert fra serverkatalogen.
I stedet for å legge til formspesifikk styling til temaet, har dette skjemaet skript alt på ett sted. Opprett filen questions.html i site / deler katalog for nettstedet med følgende innhold:
Dette skaper et grunnleggende skjema som ber om et fullt navn (for- og etternavn), e-post og en melding. Dette skjemaet bruker vanlige uttrykk for å sikre at navnet og e-postadressen er gyldige. Hvis det som brukeren skriver inn i disse feltene, ikke samsvarer med det vanlige uttrykket i mønster Direktivet vil ikke bli sendt inn skjemaet. En popup vil be brukeren til å fylle ut feltet med meldingen i feltet tittel parameter. Hvert inntastingsfelt har nødvendig primitiv også. Dette holder tomme skjemaer fra å bli sendt inn. Dette er den bare minimumsdatavalideringen du bør bruke på forsiden.
De handling direktiv i skjema element forteller nettleseren hvilken adresse du skal sende skjemedata til. De metode Direktivet forteller at nettleseren skal sende som en post metode. Skjemadataene blir lagt inn i nettadressen til postforespørselen til serveren. Dette er en Søkeord. Serveren behandler deretter informasjonen i spørringsstrengen.
I site / sider katalog, lag filen contact.md og plasser denne koden:
### Kontakt oss Dette er et enkelt kontaktskjema. Vennligst fyll inn navnet ditt, første og siste, e-postadresse og melding. Jeg kommer tilbake til deg så snart som mulig. Takk. spørsmål
Når du er lagret, kan du prøve ut sidene på serveren. I nettleseren din, åpne siden http: // localhost: 8081 / contact.
Kontaktskjema Side De Kontakt oss siden vil se ut som bildet ovenfor. Legg merke til fremhevingen av feltet Navn direkte ved lasting. De autofokus Direktivet skaper denne ønskede oppførsel. Det er alltid god design å ha det første feltet brukeren må skrive inn fokusert automatisk.
Etter å ha sendt meldingen, vil en bekreftelsesmelding til brukeren være hyggelig. I site / sider katalog, lag filen messagesent.md og plasser denne koden:
### Meldingen ble sendt Takk så mye for at du tok deg tid til å sende meg en melding. Jeg vil svare så snart som mulig.
Bare en enkel melding slik at brukeren vet at meldingen var riktig sendt. Du kan utvide på dette som du vil.
Melding sendt bekreftelse side For å sanitisere meldingen gitt av brukeren bruker jeg Blåmandag bibliotek. For å laste det biblioteket på systemet ditt, må du kjøre denne kommandolinjen:
gå github.com/microcosm-cc/bluemonday
Dette vil gjøre biblioteket tilgjengelig for programmet ditt. Det er det eneste ikke-standardiserte biblioteket som trengs.
Åpne goPressServer.go fil og legg dette til toppen av filen inne i importere () uttalelse:
"fmt" "github.com/hoisie/web" "net / smtp" "github.com/microcosm-cc/bluemonday"
Sending av meldinger fra serveren krever disse bibliotekene. Etter linjen som har goPress.DefaultRoutes ( funksjonsanrop, legg til følgende kode:
Accentsconagua
// // Oppsett spesiell rute for vår formbehandling. // goPress.SetPostRoute ('/ api / message', postMessage)Dette setter en postrute for / Api / melding å kjøre funksjonen postmessage (). På slutten av filen legger du til denne koden:
// // Funksjon: postMessage // // Beskrivelse: Denne funksjonen vil sende // meldingen fra dem // nettsiden til eieren // av nettstedet. // // Inputs: // ctx Webserveren // kontekst. // func postMessage (ctx * web.Context) streng // // Få postinformasjonen og send // // email. // navn: = ctx.Params ["Name"] fra: = ctx.Params ["Email"] p: = bluemonday.UGCPolicy () melding: = p.Sanitize (ctx.Params ["Message"]) til: = ""emne: =" Melding fra bruker: "+ navn +" av CustomCT.com "sendEmail (til, fra, emne, melding) // // Få meldingsinnholdet innhold og // behandle det. // pgloc: = goPress .SiteData.Sitebase + "pages / messagesent" returnere goPress.RenderPageContents (ctx, goPress.GetPageContents (pgloc), pgloc) // // Funksjon: sendEmail // // Beskrivelse: Denne funksjonen sender en / / e-postmelding. / // Inngang: // til e-postadressen // for å sende // meldingen // fra e-postadressen // til personen // sende // meldingen // emnet Emnet for // meldingen // meldingen Meldingen til // email // func sendEmail (til streng, fra streng, emne streng, meldingsstreng) body: = fmt.Sprintf ("Til:% s \ r \ nSubject:% s \ r \ n \ r \ n% s ", til, emne, melding) auth: = smtp.PlainAuth (" "," "," "," smtp.gmail.com ") err: = smtp.SendMail (" smtp.gmail.com:587 ", auth, fra, [] streng til, [] byte (kropp)) hvis feil! = null // // Behandle feilen. For øyeblikket antas det at // er ikke et problem. //
Disse to funksjonene utgjør handleren for behandling av e-postmeldinger sendt fra nettleseren. De / Api / melding rute ringer til postmessage () funksjon. Den henter informasjonen som sendes fra skjemaet som er fylt ut av brukeren, sanitiserer meldingen med BlueMonday-biblioteket, og sender en e-post til eieren av nettstedet ved hjelp av Send e-post() funksjon. Du må sette Gmail-adressen din i stedet for
I goPress.go fil, legg til denne funksjonen etter SetGetRoute () funksjon:
// // Funksjon: SetPostRoute // // Beskrivelse: Denne funksjonen gir en // enkel tilgang til // web variabelloppsettet i // dette biblioteket. // // Inputs: // rute Rute til oppsett // handler Funksjon for å kjøre den // ruten. // func SetPostRoute (rutestreng, handlergrensesnitt ) web.Post (rute, handler)
Denne funksjonen er akkurat som SetGetRoute () funksjon. Den eneste forskjellen er å bruke web.Post () funksjon.
Med disse endringene kan goPress-serveren nå sende e-postene fra brukeren.
For å sende e-post fra node, må du først installere nodemailer biblioteket og kroppsparserbibliotek med følgende kommandolinje:
npm installere-lagre nodemailer npm installere-lagre kroppsparser
Deretter må du laste de nye bibliotekene og konfigurere mailerobjektet. På toppen av nodePress.js fil, etter at det siste biblioteket er lastet, legg til disse linjene:
var nodemailer = krever ('nodemailer'); // https://nodemailer.com/ var bodyParser = krever ('body-parser'); // https://github.com/expressjs/body-parser // // opprett gjenbrukbar transportørobjekt ved hjelp av // standard SMTP-transport // var transporter = nodemailer.createTransport ('smtps: //:@ Smtp.gmail.com '); Dette vil laste nodemailer biblioteket og sette opp den gjenbrukbare komponenten for å sende e-post. Du må bytte ut
Etter linjen som initialiserer nodePress-variabelen, legg til denne koden:
// // Konfigurer kroppsparserbiblioteket. // nodePress.use (bodyParser.urlencoded (extended: true));
Nå, etter sist nodePress.get () funksjonsanrop, legg til denne koden:
nodePress.post ('/ api / message', funksjon (forespørsel, svar) // // oppsett e-postdata // var mailOptions = fra: request.body.Email, to: '', emne:' Melding fra '+ request.body.Name +' på kontaktskjema. ', tekst: request.body.Message, html: request.body.Message; // // Send e-posten. // transport.sendMail (mailOptions, funksjon (feil, info) if (error) return console.log (error); // // Send brukeren til meldingen ble sendt ok side. // response.send side ("messagesent"));); ); Dette er håndterer for / Api / melding adresse. Denne funksjonen får informasjonen sendt fra skjemaet, oppretter den riktige e-postmeldingen, og sender den til e-postadressen som er oppgitt i /Melding sendt side. Kroppsparseren mellomvare har urlparametrene lagret i request.body variabel og riktig sanitert.
Denne koden fungerer for Gmail-oppsett uten tofaktorautentisering. Hvis du har tofaktorautentisering, kan du referere til Nodemailer dokumentasjon for å sette opp det.
For å sende e-post i Ruby, må du installere ruby-gmail bibliotek med følgende kommandolinje:
perle installere ruby-gmail
Avhengig av Ruby-oppsettet ditt, må du kanskje bruke sudo foran kommandoen. Nå legger du inn biblioteket, legg til følgende linje øverst på siden rubyPress.rb fil:
krever 'gmail' # https://github.com/dcparker/ruby-gmail
Etter alt få definisjoner, legg til følgende linjer:
post '/ api / message' do # # Få parametrene fra skjemaet. # name = params [: Navn] email = params [: Email] message = params [: Message] # # Lag og send epost. # Gmail.new ('','') do | gmail | gmail.deliver gjør til ""fra e-post emne" Melding fra "+ navn tekst_part gjør body message slutten slutten # # Send brukeren til meldingen sendte siden. # page 'messageent' end Med disse tilleggene kan rubyPress-serveren behandle e-postformularer. Når du endrer
Den siste serveren som skal endres, er phpPress-serveren. For å legge til e-postfunksjoner på serveren, skal jeg installere phpmailer biblioteket. Dette er det mest brukte biblioteket i PHP for å arbeide med e-post. For å installere biblioteket må du kjøre disse kommandolinjekommandoene i phpPress-katalogen:
Komponistoppdateringskomponist krever phpmailer / phpmailer
Dessverre oppdaterer komponistoppdateringen LightnCandy-biblioteket. Dette er bra fordi det er mye raskere og enklere å bruke. Men det bryter serverkoden. I index.php filen, finn ProcessPage () funksjonen og erstatt den med følgende kode:
// // Funksjon: ProcessPage // // Beskrivelse: Denne funksjonen vil behandle // en side i malen, // behandle alle mustache // makroer og behandle alle // kortkoder. // // Inputs: // $ layout Oppsettet for // siden // $ side Sidene viktigste // innhold // funksjon ProcessPage ($ layout, $ side) global $ site, $ parts, $ helpers; // // Få innholdet på siden. // $ parts ['content'] = figurePage ($ side); // // Først må du sende håndtakene. // $ phpStr = LightnCandy :: kompilere ($ layout, $ helpers); $ renderer = LightnCandy :: lagre ($ phpStr); $ side = $ renderer ($ deler); // // Behandle kortkodene. // $ pageShort = processShortcodes ($ side); // // andre passerer styrene. // $ phpStr = LightnCandy :: kompilere ($ sideShort, $ helpers); $ renderer = LightnCandy :: lagre ($ phpStr); $ side = $ renderer ($ deler); // / Returner resultatene. // retur ($ side);
Sammenligning med den eldre koden, du trenger ikke lenger å jobbe med en midlertidig fil. Det er alt gjort i minnet og er derfor mye raskere. Nå, på toppen av index.php fil, legg til dette etter Jade biblioteket:
// // PHP Mailer: https://github.com/PHPMailer/PHPMailer // krever 'leverandør / phpmailer / phpmailer / PHPMailerAutoload.php';
Dette laster phpmailer biblioteket. Nå, etter sist $ App-> get () funksjon, legg til denne koden:
// // Denne ruten er for behandling av postforespørselen fra //-skjemaet på nettstedet. // $ app-> post ('/ api / message', funksjon (Request $ request, Response $ response) global $ _POST; // // Få postvariablene. // $ Name = $ _POST ['Name' ]; $ Email = $ _POST ['Email']; $ Message = $ _POST ['Message']; // // Opprett e-postmeldingen og send den. // $ mail = new PHPMailer; $ mail-> isSMTP ); // Set mailer for å bruke SMTP $ mail-> Host = 'smtp.gmail.com'; // Angi hoved- og backup SMTP-servere $ mail-> SMTPAuth = true; // Aktiver SMTP-godkjenning $ mail-> Brukernavn = ''; // SMTP brukernavn $ mail-> Password = ''; // SMTP passord $ mail-> SMTPSecure = 'tls'; // Aktiver TLS-kryptering, 'ssl' aksepterte også $ mail-> Port = 587; // TCP-port for å koble til $ mail-> setFrom ($ Email, $ Name); $ Post-> addAddress ('',''); // Legg til en mottaker $ mail-> Subject = "Melding fra $ Name"; $ mail-> Body = $ Message; hvis (! $ mail-> send ()) echo 'Melding kunne ikke sendes.'; ekko 'Mailer Error:'. $ Post-> errorinfo; ellers $ newResponse = SetBasicHeader ($ respons); $ NewResponse-> getBody () -> write (side ( 'messagesent')); avkastning ($ newResponse); ); Dette er en postbehandlerhåndbok for / Api / melding sti. Den henter skjemadataene som sendes fra nettleseren, oppretter en epost med den, og sender e-posten. PHP tar automatisk noen nettadresseparametere og plasserer dem i det globale systemet $ _POST.
Du må bytte ut $ Post-> Host adresse også.
Jeg har vist deg hvordan du enkelt legger til et e-postskjema på et pressCMS-nettsted. Nedlastingen for denne opplæringen har alle disse serverne med sine modifikasjoner. Du kan derfor laste den ned i stedet for å skrive. Jeg har gjort en liten feilhåndtering. Jeg legger resten til deg som en øvelse.
Metoden jeg lærte her er ved å legge inn skjemadata med dataene i nettadressen. Mange nettsteder bruker i dag a REST API med dataene i a JSON streng i kroppen for å utføre handlingen. Disse rutinene er lett vedtatt til den metoden, men det er en øvelse for deg (eller kanskje en fremtidig opplæring). Nå som du vet hvordan du gjør det på denne måten, legg til dine egne skjemaer på nettstedet ditt. Denne typen tilpassing er mye moro. Den eneste grensen er fantasien din.
