Nuk është sekret që shumë shpesh duhet të komunikoni disi me vizitorët në faqen tuaj. Sigurisht, ju mund të jepni vetëm tuajën e-mail(siç bëra unë), ose mund të sugjeroni një mënyrë tjetër - kjo është formë reagime ... Sigurisht, këtu kërkohet njohuri. PHP... Por që të mos keni nevojë të shkruani gjithçka nga e para, ju ofroj një shumë të mirë skenari i formularit të reagimit.
Pas shkarkimit, nxirrni arkivin në faqen tuaj (shiko, mos fshini asgjë nga vetja). Tani le ta konfigurojmë. Për ta bërë këtë, hapni skedarin " config.php". Dhe ndryshoni vlerat e variablave të mëposhtëm:
- "mailto"- vendos në vend të" [email i mbrojtur] "adresa e kutisë tuaj postare.
- "grup karakteresh"- vendosni kodimin, megjithëse nëse faqja juaj është në Rusisht, mund të largoheni" Windows-1251".
- "përmbajtjen"- Te keshilloj te largohesh" teksti / i thjeshtë", pasi nuk ka gjasa që vizitorët tuaj t'ju dërgojnë mesazhe Formati HTML.
Tani mund ta ekzekutoni skedarin indeks.php skenarin. Si rezultat, një formular do të shfaqet para jush. Mund ta plotësoni dhe të dërgoni një letër.
Tani lind pyetja: " Si mund ta vendos këtë formular kontakti në faqen time të internetit?". Për ta bërë këtë, gjeni skedarin që është përgjegjës për faqen tuaj të komenteve (le të jetë" reagime.html"). Ndryshojeni menjëherë shtesën në php(domethënë në " reagimet.php"). Kopjo kodin nga indeks.php skript me të cilin do të skedari faqja e komenteve (reagimet.php). Tani mund të bëni çfarë të doni midis etiketave dhe , thjesht mos e fshini atë nga e keni futur indeks.php... Çfarë ka midis etiketave dhe ?> gjithashtu mos e prekni nëse nuk e dini saktësisht se çfarë po bëni.
Dhe së fundi, nëse nuk ju pëlqen pamja e formularit, atëherë mund ta korrigjoni atë në skedar " stilimi.css".
Nëse keni akoma pyetje, ose ka disa defekte me skenarin (nuk e kam testuar), atëherë më shkruani në e-mail që unë të rregulloj.
Në mënyrë që të mos vareni nga puna e skripteve të njerëzve të tjerë, mësoni se si t'i krijoni ato vetë. Kursi im video do t'ju mësojë këtë " PHP dhe MySQL nga Zero në Guru":
Në këtë mësim do të njihemi me funksionin postë (), duke përdorur shembullin e krijimit Format e reagimit PHP me dërgimin e mëvonshëm të të dhënave të marra në postë.
Për këtë, ne do të krijojmë dy skedarë - forma.php dhe mail.php... Skedari i parë do të përmbajë vetëm një formular me fusha për futjen e të dhënave nga përdoruesi. Brenda etiketës formë- butoni "Dërgo" dhe atribut veprim që i referohet mbajtësit - mail.php, është tek ai që të dhënat nga formulari aksesohen kur shtypet butoni "Dërgo"... Në shembullin tonë, të dhënat e formularit dërgohen në një faqe interneti të quajtur "/Mail.php"... Kjo faqe përmban një skript për PHP e cila përpunon të dhënat e formularit:
Kështu duket vizualisht forma në shfletues.
Më pas, ne shkruajmë kodin për skedarin mail.php... Ardhja me emrat për variablat. V PHP ndryshorja fillon me një shenjë $ dhe më pas emri i ndryshores. Vlera e tekstit ndryshorja është e mbyllur në thonjëza. Me ndihmën e variablave, përmbajtja e formularit dërgohet në emailin e administratorit, thjesht duke e zëvendësuar atë në kllapa katrore Emri i elementit të formës - vlera emri.
$ në = " [email i mbrojtur]"; // emaili i marrësit të të dhënave nga formulari
$ tema = "Formulari i komenteve PHP"; // subjekti i emailit të marrë
$ message = "Emri juaj:". $ _ POST ["emri"]."
"; // cakto variablit vlerën e marrë nga forma emri = emri
$ message. = "E-mail:". $ _ POST ["email"]."
"; // marrë nga formulari emri = email
$ message. = "Numri i telefonit:". $ _ POST ["telefon"]."
"; // marrë nga forma emri = telefon
$ message. = "Mesazhi:". $ _ POST ["mesazh"]."
"; // marrë nga forma emri = mesazh
$ headers = "MIME-Version: 1.0". "\ r \ n"; // titulli përputhet me formatin plus një karakter të furnizimit të linjës
$ headers = "Lloji i përmbajtjes: tekst / html; grup karakteresh = utf-8". "\ r \ n"; // tregon llojin e përmbajtjes që dërgohet
mail ($ te, $ tema, $ mesazh, $ headers); // dërgoni vlerat e ndryshueshme te marrësi me email
?>
Kështu, të dhënat nga grupi $ _POST do t'u kalohet variablave përkatës dhe do të dërgohet në postë duke përdorur funksionin postë... Le të plotësojmë formularin tonë dhe të shtypim butonin e dorëzimit. Mos harroni të përfshini e-mailin tuaj. Letra mbërriti menjëherë.
Pra, le të vazhdojmë bisedën. Në postimin e fundit, ju thashë pse në të vërtetë kemi nevojë për reagime dhe çfarë është. Në këtë do t'ju prezantoj me rregullat e reagimit dhe do të flas pak se si dhe ku ta zbatoni atë.
9 parimet e reagimit.
Pra, këtu janë 9 parimet e reagimit. Unë, natyrisht, nuk i kam shpikur ato, por i kam mbledhur gjatë viteve të punës dhe i kam formuluar në një mënyrë shumë të thjeshtë dhe gjuhë e kuptueshme- Unë mendoj se i tillë informacion të dobishëm duhet të jetë i arritshëm dhe i qartë për të gjithë, pa terma të panevojshëm dhe fjali komplekse.
Unë do të jap një shembull për secilin nga parimet - është gjithashtu shumë i thjeshtë, por shpresoj se do t'i bëjë më të qarta parimet. Përveç kësaj, do ta holloj me mendimet e mia. Shkoni!
1. Feedback-u është mjeti më i rëndësishëm në të gjitha sferat e jetës, e aq më tepër në aktivitetet shoqërore dhe në punën me njerëzit. Perdore!
Kam shkruar për rëndësinë e reagimeve në postimin e fundit, këtu dua të shkruaj për përdorimin e tij. Unë besoj se sa më shumë njerëz të familjarizohen me reagimet dhe parimet e tij, aq më lehtë do të jetë për të gjithë ne të jetojmë. Është i zbatueshëm në punë, në komunikimin e përditshëm me njerëzit, në familje. Por! Është shumë e rëndësishme të mos e teproni me të. Mësuesja ime në kursin në grup një herë tha: "E kuptova se kisha nevojë të bëja pushime kur fillova t'i jepja komente burrit dhe fëmijëve të mi, duke ndjekur qartë parimet e tij". Kjo deklaratë e saj më zhyti vërtet në shpirt. Mos më keqkuptoni, jam i sigurt se reagimet ndaj burrit, fëmijëve, nënës dhe vjehrrës mund të jenë vetëm të dobishme. Por mos harroni se familja është e jona. vend i sigurtë, dhe duhet të ketë hapësirë për emocione të pashpjegueshme, deklarata pa kuptim, shfaqje dashurie pa qëllim, çudira, më në fund. Në një familje, është shumë e rëndësishme të gjesh një ekuilibër midis reagimeve dhe emocioneve normale njerëzore. Kjo është e rëndësishme kudo, por veçanërisht në familje.
2. Feedback-u jepet nga dëshira për të ndihmuar, përmirësuar, mbështetur dhe drejtuar një person.
Ky parim është jashtëzakonisht i rëndësishëm. Përpara se të jepni komente, ndaloni për një sekondë dhe mendoni pse doni ta thoni atë. Shoqja juaj dëshiron të shkojë në takimin e parë me një fund që ia prish shumë pamjen e bukur dhe ju dëshironi që takimi i saj të shkojë mirë, jeni të shqetësuar për të? Fol. Jeni të mërzitur nga aroma e parfumit të koleges tuaj, dhe ajo vetë, dhe gjuha ju kruhet prej një muaji për t'i treguar gjithçka që mendoni për aromën e saj mbytëse? Ky nuk është reagim, miq. Ndoshta është më mirë të heshtësh këtu.
3. Në procesin e reagimeve, detyra juaj është të sillni shembuj specifikë dhe fakte, jo deklarata abstrakte dhe emocionale.
Gjithçka është e thjeshtë këtu. "Vasya, dreqin, o dhi, çfarë dreqin më ke shkruar këtu!" - ky nuk është reagim, dhe nuk ka gjasa të përfitojë askënd. "Vasya, e keni gabim. Unë ju kërkova të më shkruani një listë të të gjithë klientëve me emra nga tre shkronja, dhe më ke shkruar një listë punonjësish me emra nga katër shkronja... Do të jetë shumë më e lehtë për mua nëse i dëgjoni kërkesat e mia me më shumë vëmendje. "Ky është reagim. Vasya mund të jetë dhi, por pas fjalisë së parë ai do të mbetet dhi. Pas reagimeve, ka mundësi që herën tjetër që ju do të marrë diçka prej tij, atë që ju nevojitet.
4. Zgjedhja fjalët e sakta dhe formulimi është jashtëzakonisht i rëndësishëm në procesin e reagimit - mbani mend se një person që është i rëndësishëm për ju është ulur para jush, ose ndërveprimi me të është i rëndësishëm për ju (kjo është në punë, si rregull).
Kjo pikë rrjedh drejtpërdrejt nga ajo e mëparshme. Përpara se të jepni komente, MENDONI saktësisht se çfarë doni të thoni dhe çfarë dëshironi që ata të arrijnë. Ekziston një i ashtuquajtur "parim sanduiç", unë jam mjaft indiferent ndaj tij, por shumëve u duket i dobishëm, pse jo. Ai thotë se duhet të vendosni argumente në reagime, si buka dhe djathi në një sanduiç. Fillojmë me pozitive (bukë), vazhdojmë me negative (djathë) dhe përfundojmë sërish me pozitive. Unë mendoj se kjo është e tepërt, por nëse ju pëlqen, merreni dhe përdorni.
5. Këshillohet që në komente të mos përdorni fjalën "por" (më pëlqeu gjithçka, por ...). Anulon dhe anulon atë që u tha më parë.
Nëse komentet tuaja përmbajnë pika pozitive dhe negative, atëherë thjesht ndani ato, thuani ato me fjali të ndryshme. Në fund të fundit, ata nuk varen nga njëri-tjetri dhe nuk anulojnë njëri-tjetrin. Shoqja juaj, e cila ju vjen për këshilla për veshje të reja, ka më shumë gjasa të mërzitet nëse i thoni "Funja nuk është asgjë, por këpucët janë absolutisht budallaqe". Por nëse thua "Më pëlqen ky fund, të shkon në mënyrë perfekte, të hollë dhe ngjyrën tënde. Nuk më pëlqejnë këpucët, më duket se nuk është ky stili yt, dhe ngjyra është për të ardhur keq." Kjo është një fjalë për "të vërtetën në sy". Feedback-u na lejon ta themi këtë të vërtetë pa rrezikuar ofendimin e miqve ose mosmarrëveshjen me kolegët. Sigurisht që kam miq dhe familjarë me të cilët do të kalërojnë "fundi budallaqe" madje edhe "këmbët e shtrembër", por të gjithë kemi pak njerëz të tillë, ndaj shiko pikën 1.
6. Mos harroni se reagimi i mirë është ai lloj reagimi që do t'i mundësojë personit që e merr atë të përmirësojë diçka. Mos harroni gjithashtu se askush nuk është i detyruar të pajtohet me komentet tuaja dhe ta pranojë atë - në fund të fundit, ju jeni gjithmonë subjektiv.
Kjo, miq, është jashtëzakonisht pikë e rëndësishme... Të mos harrojmë se një mik me këpucë të çuditshme ka më shumë gjasa të vazhdojë t'i mbajë ato. Dhe opinioni ynë nuk është opinioni përfundimtar. V rasti më i mirë mund të shpresojmë se do të merret parasysh në një mënyrë ose në një tjetër. Në një rast tjetër, mendimi ynë mund të mbetet vetëm i yni dhe kjo është NORMAL. Në fund të fundit, ne vetë nuk e pranojmë gjithmonë mendimin e atyre që na japin reagime, qoftë ai tri herë fitues i çmimit Nobel apo nëna e tij. Kështu që ne e lëmë vendimin - të pranojmë ose të mos pranojmë reagime nga pala e ofenduar.
7. Reagimi nuk duhet të jetë gjykues, por duhet të jetë një pasqyrim i VETËM mendimeve dhe ndjenjave tuaja për marrësin e reagimit në një situatë të caktuar.
Po, po, sapo dënojmë, komentet tona humbasin vlerën e tyre, më duket se këtu nuk duhet as një shembull dhe gjithçka është e qartë.
8. Nëse jeni marrës i komenteve, mos harroni të falënderoni personin që ju jep këtë reagim. Me njohuritë e fituara, duhet të bëni një punë, të ndani kokrrat nga byku dhe të përpiqeni t'i zbatoni ato. Reagimi është një dhuratë e vlefshme!
E vështirë, apo jo? Por të jesh në gjendje të marrësh komente është po aq e rëndësishme sa dhënia e tij, mendoj.
9. Është shumë e rëndësishme të mos humbni reagimet pozitive gjatë procesit të reagimit - nuk është më pak i rëndësishëm se reagimi negativ!
Shumë prej nesh kanë një qëndrim të tillë - në mënyrë që një person të mësojë, ju duhet ta qortoni atë. Një relike e tillë e lugës. Epo, kjo është marrëzi, e dini. Duhet të kujtojmë se reagimet nuk janë vetëm një listë konstruktive dhe e saktë e mangësive, por edhe një tregues i domosdoshëm i avantazheve dhe kërkimit të gjërave të mira. Në fund të fundit, ju i thoni burrit tuaj jo vetëm "I dashur, e keni tepruar supën!", por edhe "Zemër, sa simite të shijshme keni pjekur!" :) Në fund të fundit, nëse burri dëgjon gjatë gjithë kohës vetëm për kotelet e djegura dhe për supë të kripur, ai më shpejt do të ndalojë së gatuar. Pra, në fusha të tjera - mos harroni të mirën, por më mirë - filloni me kërkimin e saj.
Unë dua t'ju jap një shembull të reagimeve shumë të rëndësishme që kam marrë. Shembulli është shumë personal, por është e rëndësishme për mua t'ju tregoj për këtë përvojë për t'u treguar veprim real ky mjet jo vetëm në abstraktin e Vasya Pupkin nga shembujt e mi.
Rreth një vit më parë, shoku im më i ngushtë më thirri në një kafene. Ilani, djali im, ishte 3 muajsh, sapo kisha filluar të zvarritem në botë nga pelenat dhe karrocat. Mendova se do të bisedonim për budallallëqet e hallës sonë. Dhe ajo tha se duhej të fliste me mua për atë të dhimbshmen. Ajo më tha se i mungon shumë. Që në gjashtë muajt e fundit jam zhytur plotësisht në veten time dhe në familjen time, që nuk i flas në telefon, nuk i them asgjë për shtatzëninë apo djalin tim, nuk i dëgjoj problemet e saj. dhe gëzimet. Ajo tha që më mungonte shumë dhe nuk e dinte se çfarë do të ndodhte më pas me marrëdhënien tonë, pasi ne po largoheshim dhe unë absolutisht nuk isha në dijeni të lajmeve të saj. Ajo shtoi se ka një periudhë shumë të vështirë në jetën e saj dhe ka shumë nevojë për mbështetjen time.
Ishte një reagim i vërtetë. Ajo foli për ndjenjat e saj, duke dhënë shembuj të situatave specifike. Ajo nuk më fajësoi për zhytjen time në familje, foli për atë që do të donte nga marrëdhënia jonë dhe si mund të arrihet kjo. Ishte e qartë se ajo e thoshte këtë jo vetëm për veten e saj, por edhe për mua.
Dhe për mua ishte një lajm absolut! Isha aq i zhytur në djalin tim të porsalindur, dhe para kësaj - në shtatzëni, sa nuk e vura re se si i largova njerëzit e mi më të afërt dhe shumë të rëndësishëm! jam ngritur sot i tronditur nga sa i pavetëdijshëm isha për sjelljen time.
Çfarë do të kishte ndodhur nëse ajo nuk do të kishte folur me mua atëherë? Me shumë mundësi, një sërë ankesash: "pse nuk më telefonon?" "ju nuk jeni parë më për njëqind vjet" "ju nuk jeni të interesuar për jetën time" etj.
Çfarë ndodhi në të vërtetë? U zgjova". I thashë qartë se nuk doja të shkoja askund, se e doja dhe se po kthehesha. E mblodha veten dhe bëmë disa "takime" njëherësh për muajt e ardhshëm. Fillova të telefonoja më shpesh dhe u përpoqa ta marr telefonin kur ajo më telefononte. Dhe gjithashtu - shkova të vizitoj një mike tjetër që e ka më të vështirë të japë këtë lloj reagimi dhe i bëra një pyetje vetë. Dhe doli që edhe ajo ndihet si e para - mund ta imagjinoni? Mund ta imagjinoni sa gjëra të mira dolën nga një reagim? Kam mbajtur kontakte me dy njerëz shumë të rëndësishëm për mua. Dhe shoku im është shumë mirënjohës për atë bisedë.
Si përfundim, dua të them se në jetë ka më shumë se vetëm reagime. Ai përmban grindje, seks, marrëzi, debate, vetëkënaqësi, humor, pakënaqësi, dashuri, komplimente, të qeshura dhe shumë më tepër. Dhe e gjithë kjo ka të drejtë të ekzistojë - si aspekte të ndryshme të komunikimit ndërpersonal. Dhe është pak më e lehtë të jetosh me reagime.
Kur filloni një projekt të ri në internet, nuk ka asgjë më të mirë se ta merrni atë menjëherë. komente pozitive dhe faleminderit nga vizitorët e parë. Fatkeqësisht, pronarët e shumë faqeve të internetit e humbasin këtë fakt dhe është mjaft e vështirë të kontaktosh administratën në faqen e tyre.
Sot do t'ju tregojmë për një zgjidhje të thjeshtë të problemit. Kjo formë, duke përdorur jQuery, PHP dhe PHPMailer do t'ju lejojë të merrni reagime nga vizitorët direkt në e-mail.
HTML
Le të fillojmë me Shënimi HTML... Fleta e stilit përfshihet në fillim të dokumentit dhe burimet javascript janë në fund. Kjo përmirëson performancën sepse skriptet ngarkohen të fundit ndërsa pjesa tjetër e faqes në internet është ngarkuar dhe shfaqur tashmë.
: reagime.html
Formulari i reagimit të shpejtë w / PHP dhe jQuery | Demoja e tutorialzines
Në trupin e dokumentit, ne shohim "#feedback" DIV. Ka një pozicionim fiks të caktuar në këndin e poshtëm të djathtë të dritares, të cilin mund ta shihni seksioni tjetër artikuj.
Brenda saj ka 5 hapje me ngjyra. Ato janë 20% të gjera secila prej dokumentit dhe janë rreshtuar në të majtë. Në këtë mënyrë, ata mbushin të gjithë gjerësinë e #feedback DIV.
Së fundi, kontejneri .section, i cili përmban titullin dhe kokën, përmban butonin dhe fushën e futjes së tekstit.
CSS
Duke kaluar te redaktimi i stileve të formularit, së pari duhet të themi diçka për mënyrën se si është strukturuar fleta e stilit. Siç mund ta shihni nga përkufizimet e CSS më poshtë, çdo rregull fillon me një #feedback. Në këtë mënyrë, ne arrijmë ekuivalentin CSS të hapësirave të emrave, gjë që e bën më të lehtë shtimin e kodit në një sajt ekzistues dhe ndihmon në shmangien e konflikteve të mundshme.
: styles.css - Pjesa 1
#feedback (
ngjyra e sfondit: # 9db09f;
gjerësia: 310 px;
lartësia: 330 px;
pozicioni: fiks;
fund: 0;
djathtas: 120px;
margjina-fund: -270px;
z-indeksi: 10000;
}
#feedback .seksion (
sfond: url ("img / bg.png") repeat-x majtas lart;
kufiri: 1px solid # 808f81;
kufiri-fund: asnjë;
mbushje: 10px 25px 25px;
}
#feedback .ngjyrë (
noton: majtas;
lartësia: 4 px;
gjerësia: 20%;
vërshoj: i fshehur;
}
#feedback .color-1 (ngjyra e sfondit: # d3b112;)
#feedback .color-2 (ngjyra e sfondit: # 12b6d3;)
#feedback .color-3 (ngjyra e sfondit: # 8fd317;)
#feedback .color-4 (ngjyra e sfondit: # ca57df;)
#feedback .color-5 (ngjyra e sfondit: # 8ecbe7;)
#feedback h6 (
sfond: url ("img / feedback.png") pa përsëritje;
lartësia: 38 px;
diferenca: 5px 0 12px;
teksti-indenti: -99999px;
kursori: treguesi;
}
zona e tekstit #feedback (
ngjyra e sfondit: #fff;
kufiri: asnjë;
ngjyra: # 666666;
font: 13px "Lucida Sans", Arial, sans-serif;
lartësia: 100 px;
mbushje: 10 px;
gjerësia: 236 px;
Moz-box-hije: 4px 4px 0 # 8a9b8c;
-webkit-box-shadow: 4px 4px 0 # 8a9b8c;
kuti-hije: 4px 4px 0 # 8a9b8c;
}
Elementi i parë që duhet të formatojmë është DIV #feedback. Ka një pozicionim fiks dhe është i kufizuar në dritaren e shfletuesit. Më pas vjen përkufizimi i seksionit DIV'a dhe pesë hapësirave me ngjyra. Këto hapësira ndryshojnë vetëm në ngjyrën e sfondit të specifikuar nga klasa të ndryshme.
Në fund, ne kemi rregullat CSS që përcaktojnë pamjen e fushës së futjes së tekstit.
: styles.css - Pjesa 2
#feedback a.submit (
sfond: url ("img / submit.png") pa përsëritje;
kufiri: asnjë;
shfaqja: bllok;
lartësia: 34 px;
diferenca: 20 px automatike 0;
tekst-dekorim: asnjë;
teksti-indenti: -99999px;
gjerësia: 91 px;
}
#feedback a.submit: rri pezull (
pozicioni i sfondit: fundi majtas;
}
#feedback a.submit.working (
sfond-pozicion: lart djathtas!e rëndësishme;
kursori: i paracaktuar;
}
#feedback .mesazh (
font-familja: Corbel, Arial, sans-serif;
ngjyra: # 5a665b;
tekst-hije: 1px 1px 0 # b3c2b5;
margjina-fund: 20px;
}
#feedback .shigjeta (
sfond: url ("img / arrows.png") pa përsëritje;
noton: djathtas;
gjerësia: 23 px;
lartësia: 18 px;
pozicioni: i afërm;
sipër: 10px;
}
#feedback .shigjeta.poshtë (pozicioni në sfond: majtas lart;)
#feedback h6: rri pezull .poshtë (pozicioni në sfond: poshtë majtas;)
#feedback .arrow.lart (pozicioni i sfondit: lart djathtas;)
#feedback h6: rri pezull .lart (pozicioni i sfondit: poshtë djathtas;)
#feedback .përgjigje (
madhësia e shkronjave: 21 px;
margin-top: 70px;
text-align: qendër;
tekst-hije: 2px 2px 0 # 889889;
ngjyra: #FCFCFC;
}
Në pjesën e dytë të fletës së stilit, mund të shihni përkufizimin e butonit "dorëzo" (dorëzo). Ju lutemi vini re se butoni ka tre pozicione që janë të lidhura me të njëjtat imazhi i sfondit- submit.png, dhe shfaqet vetëm kur nevojitet. Pozicionet: pozicioni standard, pozicioni i mausit mbi pozicionin dhe pozicioni aktiv "vrapues". Kur butoni është në pozicionin e punës, efekti i lëvizjes së miut çaktivizohet.
jQuery
Formulari i komenteve ka dy dispozita: të fshehura dhe të zbuluara. Kur ngarkohet, pozicioni i tij vendoset si i fshehur nga standardi. Por kur përdoruesi klikon në titull, ai zgjerohet përmes jQuery. Kjo zbatohet përmes monitorimit dhe aktivizimit të ngjarjeve animacion i thjeshtë siç mund ta shihni qartë më poshtë.
: script.js - Pjesa 1
$ (dokument) .ready (funksion () (
// URL-ja relative e skriptit submit.php.
// Ju ndoshta do të duhet ta ndryshoni atë.
var submitURL = "submit.php";
// Memoria e objektit të reagimit:
var feedback = $ ("# reagime");
$ ("# reagime h6"). kliko (funksioni () (
// Ne ruajmë vlerat e animuar
// vetitë në një objekt të veçantë:
Var el = $ (kjo) .gjeni (". Shigjeta");
Nëse (el.hasClass ("poshtë")) (
anim = (
mb: -270,
pt: 10
};
}
// Animacioni i parë e lëviz formën lart ose poshtë, dhe e dyta
// lëviz titullin "Feedback", kështu që përshtatet në versionin e minimizuar
Feedback.stop () Animate ((marginBottom: anim.mb));
Feedback.find (". Seksioni"). Stop (). Animate ((paddingTop: anim.pt), funksion () (
el.toggleClass ("poshtë lart");
});
});
Për ta mbajtur kodin tonë të rregullt, ne kemi zhvendosur pozicionet if në krye të dokumentit dhe kemi krijuar një objekt anim që mban vlerat e animacionit. Në varësi të faktit nëse ka një klasë "poshtë" në shigjetë, ne e fshehim ose zbulojmë formën.
Pjesa e dytë e script.js përmban strukturën për ndërveprimin AJAX me submit.php.
: script.js - Pjesa 2
$ ("# komente a.submit"). live ("kliko", funksioni () (
butoni var = $ (kjo);
var textarea = reagime.gjeni ("textarea");
// Ne përdorim klasën punëtore jo vetëm për stilimin e butonit "dorëzo",
// por edhe si një lloj "bllokimi" për të parandaluar paraqitjet e shumta.
If (button.hasClass ("punon") || textarea.val (). Gjatësia e kthimit është false;
}
// Bllokimi i formularit dhe ndryshimi i stilit të butonit:
button.addClass ("punon");
$ .ajax ((
url: dërgoniURL,
lloji: "post",
të dhënat: (mesazh: textarea.val ()),
i plotë: funksioni (xhr) (
Var tekst = xhr.responseText;
// Kjo do t'i ndihmojë përdoruesit të zgjidhin problemet e formës së tyre:
nëse (xhr.status == 404) (
text = "Rruga juaj për të dërguar.php është e pasaktë.";
}
// Fshehja e butonit dhe zonës së tekstit, pas së cilës
// po tregojmë përgjigjen e marrë nga submit.php
Butoni.fadeOut ();
Textarea.fadeOut (funksioni () (
varg hapësirë = $ (" ",{
Emri i klasës: "përgjigje",
html: tekst
})
.fsheh ()
.appendTo (feedback.find (". seksioni"))
.shfaqje ();
)) val ("");
}
});
Kthehu false;
});
});
Këtu po përdorim metodën AJAX nivel më të ulët jQuery - $ .ajax (), përmes të cilit zbatohet ndërveprimi me submit.php. Kjo metodë na jep pak më shumë kontroll mbi lidhjen sesa $ .get () ose $ .post ().
Një avantazh i madh kjo metodë konsiston në një mesazh kthyes "të plotë". Këtu ne përcaktojmë një përputhje midis përgjigjes dhe gabimit 404, i cili me mirësjellje i thotë përdoruesit të kontrollojë shtegun për në submitURL.
Tani le të shkojmë përpara dhe të kalojmë në pjesën e fundit të tutorialit - seksionin PHP
PHP
PHP përmban informacionin e kaluar përmes AJAX, e përpunon atë dhe dërgon një mesazh në kutinë tuaj hyrëse.
: paraqes.php
// Shkruani adresën tuaj të emailit më poshtë
Adresa e emailit $ = " [email i mbrojtur]";
// Përdorimi i seancës për të parandaluar përmbytjet:
emri i sesionit ("Që shpejtë");
sesioni_fillimi ();
// Nëse formulari i fundit i dorëzuar ishte më pak se 10 sekonda më parë,
// ose përdoruesi ka dërguar tashmë 10 mesazhe në orën e fundit
nëse ($ _ SESSION ["LastSubmit"] && (koha () - $ _SESSION ["LastSubmit"] 10)) (
die ("Ju lutemi prisni disa minuta përpara se të dërgoni përsëri.");
}
$ _SESION ["LastSubmit"] = koha ();
$ _SESION ["submitsLastHour"] ++;
kërkojnë "phpmailer / class.phpmailer.php";
nëse (ini_get ("magic_quotes_gpc")) (
// Nëse thonjëzat magjike janë të aktivizuara, hiqni ato
$ _POST ["mesazh"] = stripslashes ($ _ POST ["mesazh"]);
}
nëse (mb_strlen ($ _ POST ["mesazh"], "utf-8") die ("Trupi juaj i komenteve është shumë i shkurtër.");
}
$ msg = nl2br (etiketat_strip ($ _ POST ["mesazh"]));
// Përdorimi i klasës PHPMailer
$ mail = i ri PHPMailer ();
$ mail-> IsMail ();
// Shtimi i adresës së emailit marrës
$ mail-> AddAddress ($ emailAddress);
$ mail-> Subject = "Dorëzimi i formularit të ri të komenteve të shpejta";
$ mail-> MsgHTML ($ msg);
$ mail-> AddReplyTo (" [email i mbrojtur]". $ _ SERVER [" HTTP_HOST "]," Formulari i Shpejtë Feedback ");
$ mail-> SetFrom (" [email i mbrojtur]". $ _ SERVER [" HTTP_HOST "]," Formulari i Shpejtë Feedback ");
jehonë "Faleminderit!";
Së pari, ne do të përdorim kontrollet seancat PHP për të llogaritur sa herë përdoruesi e ka përdorur formularin në orën e kaluar. Nëse një përdorues përpiqet të dërgojë një mesazh më pak se 10 sekonda pasi është dërguar postimi i fundit ose dërgon më shumë se 10 mesazhe brenda një ore, atëherë atij do t'i shfaqet një gabim.
Mesazhet dërgohen duke përdorur klasën PHPMailer. Ai funksionon vetëm me PHP5, kështu që serveri duhet të mbështesë këtë version të veçantë.
Një numër metodash PHPMailer përdoren për të konfiguruar postën dalëse. Ne përdorim IsMail () për t'i thënë klasës të përdorë funksionin e brendshëm të postës PHP (). AddAddress () shton marrës (mund të shtoni më shumë se një marrës atje). Pas shtimit të objektit në trupin e dokumentit, ne tregojmë adresën e përgjigjes dhe dërgojmë mesazhin.
Kjo përfundon zhvillimin!
Në përfundim
ju mund të përdorni këtë formë për të mbledhur reagime nga vizitorët. Me këtë formular, ju lehtësoni shumë procesin e shkrimit të komenteve për përdoruesit, dhe shumë përdorues thjesht nuk do të shkruajnë një përmbledhje nëse për këtë ju ende duhet të klikoni diku dhe të shkoni diku. Ju gjithashtu mund ta personalizoni me lehtësi formularin sipas dëshirës tuaj ose nga një shabllon uebsajti.
Për zhvillimin e një projekti në internet, është shumë e rëndësishme të merrni reagime nga vizitorët. Fatkeqësisht, në shumë faqe interneti, aftësia për të dërguar një mesazh te zhvilluesit ose nuk ofrohet fare, ose shoqërohet me vështirësi mjaft serioze.
Sot do të bëjmë një zgjidhje të thjeshtë për këtë problem. Duke përdorur jQuery, PHP dhe klasën PHPMailer, formulari dërgon sugjerimin e përdoruesit direkt në kutinë tuaj hyrëse.
HTML
Le të fillojmë me shënimin HTML. Stilet përfshihen në krye të dokumentit dhe Skedarët JavaScript- në fund. Kjo optimizon procesin e ngarkimit të faqes, kështu që skriptet ngarkohen të fundit, duke i lejuar përdoruesit të shohë përmbajtjen e faqes.
demo.html
Feedback
dërgoniBrenda trupi e vendosur div #feedback... Ai pozicionohet në fund të djathtë të dritares duke përdorur pozicionimin fiks, siç do ta shihni në seksionin CSS të tutorialit.
Në kuadër të kësaj div vendosen pesë elementë me ngjyra shtrirje... Secila është 20% e gjerë dhe e zhvendosur në të majtë. Kështu, ato përshtaten saktësisht në të gjithë gjerësinë. div #feedback.
Pastaj vjen kontejneri .seksioni, i cili përmban një titull, një zonë teksti dhe një buton.
CSS
Le të kalojmë në vendosjen e stileve për formën. Së pari, le të themi disa fjalë se nga përbëhet struktura e një fletë stili. Nëse shikoni përkufizimet e CSS më poshtë, do të vini re se çdo rregull fillon me #feedback... Kjo krijon një ngjashmëri me hapësirën e emrave në CSS, duke e bërë të lehtë shtimin e kodit në një faqe interneti ekzistuese pa konflikte.
styles.css - Pjesa 1
#feedback (ngjyra e sfondit: # 9db09f; gjerësia: 310 pikselë; lartësia: 330 pikselë; pozicioni: fiks; poshtë: 0; djathtas: 120 px; margjina-poshtë: -270 px; indeksi z: 10000;) #feedback .seksioni (sfondi : url ("img / bg.png") përsërit-x lart majtas; kufiri: 1px solid # 808f81; kufiri-poshtë: asnjë; mbushja: 10px 25px 25px;) #feedback .color (float: majtas; lartësia: 4px; gjerësia: 20%; tejmbushje: e fshehur;) #feedback .color-1 (ngjyra e sfondit: # d3b112;) #feedback .color-2 (ngjyra e sfondit: # 12b6d3;) #feedback .color-3 (ngjyra e sfondit : # 8fd317;) #feedback .color-4 (ngjyra e sfondit: # ca57df;) #feedback .color-5 (ngjyra e sfondit: # 8ecbe7;) #feedback h6 (sfondi: url ("img / feedback.png" ) pa përsëritje; lartësia: 38 px; margjina: 5 px 0 12 px; dhëmbëzimi i tekstit: -99999 px; kursori: treguesi;) zona e tekstit #feedback (ngjyra e sfondit: #fff; kufiri: asnjë; ngjyra: # 666666; fonti: 13 px "Lucida Sans", Arial, sans-serif; lartësia: 100 px; mbushja: 10 px; gjerësia: 236 px; ndryshimi i madhësisë: asnjë; skica: asnjë; tejmbushja: automatik; -moz-box-hije: 4px 4px 0 # 8a9b8c; -webit -box-sha dow: 4px 4px 0 # 8a9b8c; kuti-hije: 4px 4px 0 # 8a9b8c; )
Elementi i parë që duhet stiluar është div #feedback... I caktohet një pozicion fiks dhe fiksohet në dritaren e shfletuesit. Pasi vjen përkufizimi për div .seksioni dhe pesë elementë me ngjyra shtrirje... Këta elementë ndryshojnë vetëm në ngjyrën e sfondit, e cila është caktuar veçmas për secilën klasë.
Në fund të pjesës së paraqitur të skedarit CSS, përcaktohen rregullat për shfaqjen e një rajoni teksti.
styles.css - Pjesa 2
#feedback a.submit (sfondi: url ("img / submit.png") pa përsëritje; kufiri: asnjë; shfaqja: bllok; lartësia: 34 px; margjina: 20 pikselë automatike 0; dekorimi i tekstit: asnjë; dhëmbëzimi i tekstit: -99999px; gjerësia: 91px;) #feedback a.submit: hover (pozicioni i sfondit: majtas poshtë;) #feedback a.submit.working (pozicioni i sfondit: lart djathtas! E rëndësishme; kursori: i paracaktuar;) #feedback .message (font-familje: Corbel, Arial, sans-serif; ngjyra: # 5a665b; tekst-hije: 1px 1px 0 # b3c2b5; margjina-fund: 20px;) #feedback .shigjeta (sfondi: url ("img / shigjeta.png ") pa përsëritje; notimi: djathtas; gjerësia: 23 px; lartësia: 18 px; pozicioni: relative; lart: 10 px;) #feedback .shigjeta.poshtë (pozicioni në sfond: majtas lart;) #feedback h6: rri pezull .poshtë ( background-position: majtas fund;) #feedback .shigjeta.lart (background-position: djathtas lart;) #feedback h6: hover .lart (background-position: djathtas bottom;) #feedback .response (madhësia e shkronjave: 21px; margjina në krye: 70 pikselë; rreshtimi i tekstit: në qendër; hija e tekstit: 2 px 2px 0 # 889889; ngjyra: #FCFCFC; ekrani: bllok;)
Pjesa e dytë e fletës së stilit përcakton pamjen e butonit të paraqitjes. Vini re se ka tre gjendje të butonit, imazhet për të cilat gjenden në një skedar për foto sfondi - paraqit.png... Ato shfaqen vetëm kur është e nevojshme.
jQuery
Formulari i komenteve ka dy gjendje - të minimizuara dhe maksimale. Në nisje, parazgjedhja vendoset në gjendjen e minimizuar në fund të djathtë të ekranit. Dhe jQuery e shtyn formularin në gjendjen e tij maksimale kur përdoruesi klikon në kokë. Ky funksion bëhet duke lidhur një ngjarje dhe duke kryer animacione të thjeshta.
script.js - Pjesa 1
$ (dokument) .ready (funksioni () (// URL-ja relative e skriptit submit.php. // Ju ndoshta duhet ta ndryshoni atë.var submitURL = "submit.php"; // Memoria e objektit të komenteve: reagime var = $ ( "#feedback"); $ ("# feedback h6"). kliko (funksioni () (// Vlerat e vetive të animacionit ruhen // në një objekt të veçantë: var anim = (mb: 0, // Fusha e poshtme pt: 25 // Dhënia e sipërme); var el = $ (kjo) .find (". Shigjeta"); if (el.hasClass ("poshtë")) (anim = (mb: -270, pt: 10 );) // Animacioni i parë e zhvendos formën lart ose poshtë dhe i dyti lëviz titullin // në mënyrë që të përputhet me versionin e minimizuar feedback.stop (). animate ((marginBottom: anim.mb)); feedback.find (". seksioni"). stop () .animate ((paddingTop: anim.pt), funksioni () (el.toggleClass ("poshtë");));));
Për ta mbajtur kodin të thjeshtë dhe të drejtpërdrejtë, në krye krijohet një objekt anim, i cili përmban vlerat për animacion dhe vendoset operatori nëse... Në varësi të ekzistencës së klasës ' poshtë 'Në shigjetë, ne po zgjerojmë ose shembim formularin.
Pjesa e dytë skript.js trajton punën me AJAX me paraqes.php.
script.js - Pjesa 2
$ ("# reagime a.submit"). live ("kliko", funksioni () (butoni var = $ (kjo); var textarea = feedback.find ("textarea"); // Ne po përdorim klasën punëtore për më shumë sesa thjesht vendosjen e stileve për butonin e paraqitjes, // por edhe si një lloj bllokimi për të parandaluar gjenerimin e shumëfishtë të formave.if (button.hasClass ("punon") || textarea.val (). gjatësia< 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Ky operacion ndihmon përdoruesin të identifikojë gabimin: if (xhr.status == 404) (tekst = "Rruga drejt skriptit submit.php është e pavlefshme.";) // Fshihni butonin dhe zonën e tekstit, pas së cilës // ne tregoi përgjigjen e marrë nga butoni submit.php .fadeOut (); textarea.fadeOut (funksioni () (varg span = $ (" ", (Emri i klasës:" përgjigja ", html: tekst)) .hide () .appendTo (feedback.find (". seksioni ")) .shfaq ();)). val (" ");))); kthim i rremë;));));
Ne jemi duke përdorur metodën jQuery për AJAX $ .ajax () për të bashkëvepruar me paraqes.php... Kjo metodë jep pak më shumë kontroll mbi lidhjen sesa $ .merr () dhe $ .post ().
Një nga avantazhet e metodës është dukshmëria e vetive të objektit në funksionin "e tërë" të kthimit të thirrjes. Këtu kontrollojmë statusin e përgjigjes për pajtueshmëri Gabim 404 (faqja nuk u gjet), dhe shfaqni një mesazh për përdoruesin që i kërkon të kontrollojë shtegun dërgoURL.
Tani është koha për të kaluar në pjesën e fundit - PHP.
PHP
PHP përpunon të dhënat e dërguara nga AJAX, i vërteton ato dhe i dërgon mesazh e-mail në adresën e dhënë.
paraqes.php
// Shkruani adresën tuaj këtu $Adresa email = " [email i mbrojtur]"; // Përdor sesionin për të parandaluar vërshimin: emri i sesionit (" QuickFeedback "); session_start (); // Nëse formulari i fundit është dorëzuar më pak se 10 sekonda më parë, // ose përdoruesi ka dërguar tashmë 10 mesazhe në orën e fundit nëse ($ _ SESSION [ "LastDorëzimi i fundit"] && (koha () - $ _SESSION ["Dërgoja e fundit"]< 10 || $_SESSION["submitsLastHour"] >10)) (die ("Ju lutemi prisni disa minuta përpara se të dërgoni përsëri mesazhin.");) $ _SESSION ["lastSubmit"] = koha (); $ _SESION ["submitsLastHour"] ++; kërkojnë "phpmailer / class.phpmailer.php"; if (ini_get ("magic_quotes_gpc")) ($ _POST ["message"] = stripslash ($ _ POST ["mesazh"]);) if (mb_strlen ($ _ POST ["mesazh"], "utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail (); // Shto adresën e marrësit $ mail-> AddAddress ($ emailAddress); $ mail-> Subject = "Letër e re nga formulari i komenteve"; $ mail-> MsgHTML ($ msg); $ mail-> AddReplyTo (" [email i mbrojtur]". $ _ SERVER [" HTTP_HOST "]," Formulari i komenteve në faqen demo "); $ mail-> SetFrom (" [email i mbrojtur]". $ _ SERVER [" HTTP_HOST "]," Formulari i komenteve në faqen demo "); $ mail-> Dërgo (); jehonë" Faleminderit! ";
Ne fillimisht përdorim menaxhimin e sesioneve për të përcaktuar se sa shpesh përdoruesi përdor paraqitjen e formularit gjatë orën e fundit, dhe gjithashtu përcaktoni kohën e kaluar nga dërgimi i fundit... Nëse kanë kaluar më pak se 10 sekonda nga paraqitja e fundit, ose përdoruesi ka dërguar më shumë se 10 mesazhe në orën e fundit, shfaqet një mesazh gabimi.
Email dërgohet duke përdorur klasën PHPMailer. Kujdes! Punon vetëm me PHP5.
Metoda të shumëfishta PHPMailer përdoret për konfigurim e-mail dalës... Metoda IsMail () i thotë klasës të përdorë të brendshmen Funksioni PHP postë ()... Metoda Shto adresën () shton adresën e marrësit (mund të shtoni më shumë se një marrës me thirrje shtesë në këtë metodë). Pas shtimit të temës së letrës dhe tekstit, tregohet adresa për përgjigje dhe dërgohet mesazhi.
Gati!
konkluzioni
Ju mund ta përdorni këtë formular për të organizuar reagime të shpejta nga vizitori i faqes suaj të internetit. Barrierë shumë e ulët përpara dërgimit - thjesht duhet të plotësoni fushën e tekstit dhe të shtypni butonin - do të krijohet kushte të shkëlqyera në mënyrë që vizitorët në faqet tuaja të fillojnë të ndajnë idetë e tyre. Skripti është gjithashtu i strukturuar mirë dhe i lehtë për t'u konfiguruar, gjë që do t'ju ndihmojë përpjekje minimale përdorni atë në faqen tuaj.
