Et raskt tilbakemeldingsskjema i PHP og jQuery. Kvalitetskontrollavdeling

For ikke å være avhengig av arbeidet med andres manus, lær hvordan du lager dem selv. Mitt videokurs vil lære deg dette " PHP og MySQL fra Zero til Guru":

For utvikling av et nettprosjekt er det svært viktig å få tilbakemeldinger fra besøkende. Dessverre, på mange nettsteder, er muligheten til å sende en melding til utviklere enten ikke gitt i det hele tatt, eller er forbundet med ganske alvorlige vanskeligheter.

I dag skal vi lage en enkel løsning på dette problemet. Ved å bruke jQuery, PHP og PHPMailer-klassen sender skjemaet brukerens forslag direkte til din postkasse.

Html

La oss begynne med HTML-oppmerking... Stiler er inkludert øverst i dokumentet, og JavaScript-filer- på bunnen. Dette optimerer siden lasteprosessen, slik at skriptene lastes sist, slik at brukeren kan se sideinnholdet.

demo.html

Innsiden kropp plassert div #tilbakemelding... Den er plassert nederst til høyre i vinduet med fast posisjonering, som du vil se i CSS-delen av opplæringen.

Innenfor dette div fem fargede elementer er plassert span... Hver er 20 % bred og forskjøvet til venstre. Dermed passer de nøyaktig over hele bredden. div #tilbakemelding.

Så kommer beholderen .seksjon, som inneholder en tittel, et tekstområde og en knapp.

CSS

La oss gå videre til å angi stilene for skjemaet. La oss først si noen ord om hva strukturen til et stilark består av. Ser på CSS-definisjoner presentert nedenfor, kan du se at hver regel starter med #tilbakemelding... Dette skaper en likhet med navneområdet i CSS, noe som gjør det enkelt å legge til kode på et eksisterende nettsted uten konflikter.

styles.css – del 1

#tilbakemelding (bakgrunnsfarge: # 9db09f; bredde: 310px; høyde: 330px; posisjon: fast; bunn: 0; høyre: 120px; margin-bottom: -270px; z-indeks: 10000;) #feedback .section (bakgrunn : url ("img / bg.png") repeat-x øverst til venstre; kantlinje: 1px solid # 808f81; border-bottom: ingen; polstring: 10px 25px 25px; ) #tilbakemelding .farge (flyt: venstre; høyde: 4px; bredde: 20%; overløp: skjult;) #tilbakemelding .farge-1 (bakgrunnsfarge: # d3b112;) #tilbakemelding .farge-2 (bakgrunnsfarge: # 12b6d3;) #tilbakemelding .farge-3 (bakgrunnsfarge: # 8fd317;) #tilbakemelding .farge-4 (bakgrunnsfarge: # ca57df;) #tilbakemelding .farge-5 (bakgrunnsfarge: # 8ecbe7;) # tilbakemelding h6 (bakgrunn: url ("img / feedback.png") no-repeat; høyde: 38px; margin: 5px 0 12px; text-indent: -99999px; cursor: pointer;) #feedback textarea (bakgrunnsfarge: # fff; kantlinje: ingen; farge: # 666666; font: 13px "Lucida Sans", Arial, sans-serif; høyde: 100px; polstring: 10px; bredde: 236px; endre størrelse: ingen; disposisjon: ingen; overløp: auto; - moz-box-shadow: 4px 4px 0 # 8a9b8c; -webkit-box-shadow: 4px 4px 0 # 8a9b8c; box-shadow: 4px 4px 0 # 8a9b8c;)

Det første elementet som skal styles er div #tilbakemelding... Den er tildelt en fast posisjon og snapper til nettleservinduet. Etter det kommer definisjonen for div .seksjon og fem fargede elementer span... Disse elementene er bare forskjellige i bakgrunnsfargen, som tildeles separat for hver klasse.

Helt nederst i den presenterte delen CSS-fil definerer reglene for visning av et tekstområde.

styles.css - del 2

#feedback a.submit (bakgrunn: url ("img / submit.png") no-repeat; border: none; display: block; height: 34px; margin: 20px auto 0; text-decoration: none; text-indent: -99999px; width: 91px;) #feedback a.submit: hover (background-position: left bottom;) #feedback a.submit.working (bakgrunnsposisjon: øverst til høyre! Viktig; markør: standard;) #feedback .message (font-familie: Corbel, Arial, sans-serif; farge: # 5a665b; text-shadow: 1px 1px 0 # b3c2b5; margin-bottom: 20px;) #feedback .arrow (bakgrunn: url ("img / arrows.png) ") no-repeat; flyte: høyre; bredde: 23px; høyde: 18px; posisjon: relativ; topp: 10px;) #feedback .arrow.down (bakgrunnsposisjon: venstre topp;) #feedback h6: hover .down ( bakgrunnsposisjon: venstre bunn;) #tilbakemelding .pil.opp (bakgrunnsposisjon: høyre øverst;) #tilbakemelding h6: hover .opp (bakgrunnsposisjon: høyre bunn;) #tilbakemelding .respons (font-size: 21px; margin-top: 70px; tekstjustering: center; text-shadow: 2px 2px 0 # 889889; farge: #FCFCFC; display: blokk;)

Den andre delen av stilarket definerer utseendet til send-knappen. Legg merke til at det er tre tilstander for knappen, bildene som finnes i én fil for bakgrunnsbilde - submit.png... De vises kun ved behov.

jQuery

Tilbakemeldingsskjemaet har to tilstander - minimert og maksimum. Ved oppstart er standard satt til minimert tilstand nederst til høyre på skjermen. Og jQuery skyver skjemaet til sin maksimale tilstand når brukeren klikker på overskriften. Denne funksjonen gjøres ved å binde en hendelse og utføre enkle animasjoner.

script.js – del 1

$ (document) .ready (funksjon () (// Den relative URL-en til submit.php-skriptet. // Du må sannsynligvis endre it.var submitURL = "submit.php"; // Bufre tilbakemeldingsobjektet: var feedback = $ ( "#feedback"); $ ("# tilbakemelding h6"). klikk (funksjon () (// Animasjonsegenskapsverdier lagres // i et separat objekt: var anim = (mb: 0, // Nederste felt pt: 25 // Toppinnrykk); var el = $ (this) .find (". Arrow"); if (el.hasClass ("ned")) (anim = (mb: -270, pt: 10 );) // Den første animasjonen flytter skjemaet opp eller ned, og den andre flytter tittelen // slik at den er på linje med den minimerte versjonen feedback.stop (). animate ((marginBottom: anim.mb)); feedback.find (". seksjon"). stop () .animate ((paddingTop: anim.pt), function () (el.toggleClass ("ned opp");));));

For å holde koden enkel og grei, opprettes et animobjekt øverst, som inneholder verdiene for animasjon, og operatøren plasseres hvis... Avhengig av klassens eksistens ned «På pilen utvider eller skjuler vi skjemaet.

Andre del script.js håndterer arbeid med AJAX med submit.php.

script.js – del 2

$ ("# feedback a.submit"). live ("klikk", funksjon () (var-knappen = $ (dette); var textarea = feedback.find ("textarea"); // Vi bruker arbeiderklassen for mer enn bare å stille inn stiler for send-knappen, // men også som en slags lås for å forhindre flere skjemagenerasjoner.if (button.hasClass ("fungerer") || textarea.val (). length< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Denne operasjonen hjelper brukeren med å identifisere feilen: if (xhr.status == 404) (text = "Stien til submit.php-skriptet er ugyldig.";) // Skjul knappen og tekstområdet, hvoretter // vi viste det mottatte svaret fra submit.php-knappen .fadeOut (); textarea.fadeOut (funksjon () (var span = $ (" ", (klassenavn:" respons ", html: tekst)) .hide () .appendTo (feedback.find (". seksjon ")) .vis ();)). val (" ");))); returner falsk;));));

Vi bruker jQuery-metoden for AJAX $ .ajax ()å samhandle med submit.php... Denne metoden gir litt mer kontroll over tilkobling enn $ .get () og $ .post ().

En av fordelene med metoden er synligheten av objektegenskapene i «hele» tilbakeringingsfunksjonen. Her sjekker vi status på svaret for samsvar 404-feil (side ikke funnet), og vis en melding til brukeren som ber ham sjekke banen submitURL.

Nå er det på tide å gå videre til den siste delen - PHP.

PHP

PHP behandler dataene som sendes fra AJAX, validerer dem og sender dem e-postmelding på oppgitt adresse.

submit.php

// Skriv inn adressen din her $ emailAddress = " [e-postbeskyttet]"; // Bruk økt for å forhindre oversvømmelse: session_name (" quickFeedback "); session_start (); // Hvis det siste skjemaet ble sendt inn for mindre enn 10 sekunder siden, // eller brukeren allerede har sendt 10 meldinger den siste timen hvis ($ _ SESSION [ "lastSubmit"] && (tid () - $ _SESSION ["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10)) (die ("Vennligst vent noen minutter før du sender meldingen igjen.");) $ _SESSION ["lastSubmit"] = tid (); $ _SESSION ["submitsLastHour"] ++; krever "phpmailer / class.phpmailer.php"; if (ini_get ("magic_quotes_gpc")) ($ _POST ["melding"] = skråstreker ($ _ POST ["melding"]);) if (mb_strlen ($ _ POST ["melding"], "utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail (); // Legg til mottakerens adresse $ mail-> AddAddress ($ emailAddress); $ mail-> Subject = "Nytt brev fra tilbakemeldingsskjemaet"; $ mail-> MsgHTML ($ msg); $ mail-> AddReplyTo (" [e-postbeskyttet]". $ _ SERVER [" HTTP_HOST "]," Tilbakemeldingsskjema på demosiden "); $ mail-> SetFrom (" [e-postbeskyttet]". $ _ SERVER [" HTTP_HOST "]," Tilbakemeldingsskjema på demosiden "); $ mail-> Send (); echo" Takk! ";

Vi bruker først øktadministrasjon for å bestemme hvor ofte brukeren bruker skjemainnsending under siste time, og bestemmer også tiden som har gått siden siste utsendelse. Hvis det har gått mindre enn 10 sekunder siden siste innsending, eller brukeren allerede har sendt mer enn 10 meldinger den siste timen, vises en feilmelding.

E-post sendes med PHPMailer-klassen. Merk følgende! Det fungerer bare med PHP5.

Flere metoder PHPMailer brukes til konfigurasjon utgående e-post... Metode IsMail () ber klassen om å bruke den interne PHP funksjon mail ()... Metode AddAddress () legger til mottakeradresse (du kan legge til mer enn én mottaker med ekstra samtaler denne metoden). Etter å ha lagt til emnet for brevet og teksten, vises adressen for svar og meldingen sendes.

Klar!

Konklusjon

Du kan bruke dette skjemaet til å organisere rask tilbakemelding fra besøkende på nettstedet ditt. Veldig lav barriere før sending - du trenger bare å fylle ut tekstfeltet og trykke på knappen - det vil opprette utmerkede forhold slik at besøkende på sidene dine begynner å dele ideene sine. Skriptet er også godt strukturert og enkelt å konfigurere, noe som vil hjelpe deg med minimal innsats bruk den på nettstedet ditt.

Informasjonen som presenteres på denne siden er først og fremst rettet mot nybegynnere webansvarlige.

Hei venner, kjære besøkende på min ydmyke side! Mange av dere, inkludert nybegynnere av nettredaktører, vet sikkert hva FOS er og hva det er for (tilbakemeldingsskjema).

Tradisjonell FOS i selve enkel versjon- dette er når brukeren fyller ut feltene i et skjema som ligger på en nettside, og serverprogram behandler disse dataene og videresender dem til sideadministratorens postboks. Men det er andre alternativer, og vi vil vurdere en av dem i denne leksjonen.

Det er klart at ved bruk av et CMS f.eks gratis Joomla og WordPress, kan tilbakemeldingsproblemet løses ved hjelp av ulike utvidelser eller plugins, men det er det alternative måter som kan være nyttig for ethvert prosjekt bygget på begge ren HTML, PHP og bruk av motoren.

På nettet kan du finne ganske mange skript av forskjellige FOS - både enkle og veldig sofistikerte, som er installert på nettstedet som et fullverdig CMS og krever ikke bare PHP-støtte men også en database. Du må mest sannsynlig søke, finne og prøve ut mange alternativer som passer for deg.

Tilbakemelding er også mulig gjennom et kommentarskjema åpent for alle, der besøkende kommuniserer med sideadministrasjonen og seg imellom, løser problemer og problemer, og FOS forutsetter en mer lukket, tilbaketrukket kommunikasjon mellom to personer. Besøkende og kunder har alltid spørsmål, så å si, ikke for offentlig visning og publisitet.

Det er også verdt å si at det finnes gode tjenester for å lage tilbakemeldingsskjemaer, men nå skal vi snakke om en interessant og ukonvensjonell FOS. Hovedforskjellen fra andre prøver er at den ikke trenger å være tilgjengelig og brukt. e-postklient... Dette er et nettskjema og meldinger i det opprettes, sendes til nettsiden og mottas på nettsiden. Med andre ord, gitt form fungerer på serveren til nettstedet ditt uten å bruke noen e-postserver.

På gratis hosting SMTP-serveren er ikke tilgjengelig fra PHP, så lag en tjeneste for å sende meldinger fra siden til nettstedet e-post til administratorens e-post er ikke mulig. Det foreslåtte settet med FOS løser dette problemet og gir både avsendere av meldinger fra sidesiden og administratoren, praktisk måte meldinger.

Du har mulighet til å sjekke tilbakemeldingsskjemaet på jobben, sende en melding ved å fylle ut feltene på avsendersiden, og også se det på en annen side med mottatte meldinger.

En dråpe nyttig informasjon

I fremtiden, for ikke å oppleve vanskeligheter med å omkode filer, les et lite "pedagogisk program". For å utføre konvertering, for eksempel fra Windows-1251 til utf-8, må du:

1. Åpne alle filene i tekstredigerer, best i Notisblokk ++;
2. Slett poster om gammel koding, for eksempel,
   ;
3. Omkode alle filer én etter én (Kodinger → konverter til utf-8 uten stykkliste);
4. Sett inn poster om den nye kodingen, for eksempel,
   ;
5. Lagre endringer i alle filer (fil -> lagre alle).

I disse handlingene er det viktig å observere operasjonssekvensen, ellers vil du få uforståelige "krakozyabry" i stedet for russiske ord.

1. Last ned nødvendig arkiv med materialet og pakk det ut til gjeldende mappe på datamaskinen din. I tilbakemeldingsmappen vil du se en img-mappe med bilder og skjemafiler. Last opp hele tilbakemeldingsmappen til serveren til nettstedet ditt.

MERK FØLGENDE! Hvis filene er lastet opp til serveren, er det nødvendig å angi attributtene: 666 for message.txt-filen, ellers vil det ikke være mulig å lese og skrive til filen og serveren vil vise en feilmelding.

2. Skriv inn adressen i adressefeltet i nettleseren din:
// ditt domene / feedback / feedback.php
Tilbakemeldingssiden med dataregistreringsskjemaet vil bli lastet. Du kan teste arbeidet med skjemaet ved å fylle ut alle feltene og sende en melding. Gjør inn rett sted lenke til denne siden fra nettstedet ditt.

3. For å sjekke meldinger, skriv inn adressefeltet nettleseradresse:
// ditt domene / feedback / message.php
Siden med meldingsoverskriften, dataene og teksten til den sendte meldingen blir lastet inn. For å slette alle poster, klikk på Slett alle-knappen på siden. Bokmerk meldingssiden (message.php) slik at du enkelt kan åpne den neste gang.

FOS er klar til å jobbe med nettsiden din. Hvor lang tid tok det å installere den?

Alternativ nummer 2. Installasjon av FOS i sidemalen.

Dette skjemaet kan også settes inn i en PHP-sidemal. Denne oppgaven er litt vanskeligere.

Skjemaet vil se omtrent slik ut, og meldinger kan mottas.

Filer i utf-8-koding, hvis nettstedet ditt er i en annen koding - de må kodes om. Du kan allerede gjøre dette selv.

Feedback.php og send.php sidene har for klarhet foreløpig registrering, som ikke vil være nødvendig i fremtiden fordi merket nødvendige blokker(start av blokk -> slutten av blokk) i feedback.php- og send.php-filene må du kopiere og lime dem inn i malene for nettsidens side. Da bør disse malene gis nytt navn til feedback.php og send.php tilsvarende. Det bør være en lenke til feedback.php i hovedmenyen på nettstedet ditt.

Filene header.php, footer.php, som brukes til å danne feedback.php og send.php sidene under foreløpig testing, er heller ikke påkrevd.

Message.php- og deltext.php-filene er tjenestesider for nettstedadministratoren. De kan stå uendret, eller du kan ordne dem etter eget ønske.

Alle disse filene skal være plassert i rotkatalogen sammen med message.txt-filen:

For å unngå problemer, før du laster opp filer til rotmappen nettsted, sjekk om det er noen filnavn som samsvarer! I så fall bør filene gis nytt navn.

Hvis et nettsted som inneholder vanlige HTML-sider brukes på hosting med PHP, bør skjemaet fra feedback.php-filen settes inn i malen til siden for tilbakemelding kalt feedback.html. Og i malen til HTML-siden som heter send.html, setter du inn skriptblokken fra den tilsvarende filen og gir siden nytt navn til send.php.

Det er alt! Bruk FOS maksimalt, kommuniser med besøkende, utvikler ressursen din og alt godt til deg! Ikke glem å besøke nettsiden min. Din L.M.