Nozik fikr php. PHP da fikr-mulohaza shaklini yaratish

Salom do'stlar! Men sizning e'tiboringizga shakllardan elektron pochtaga ma'lumotlarni yuborish uchun universal skriptni taqdim etmoqchiman. Skript Landing Page, tashrif qog'ozi saytlari va boshqalar kabi saytlar uchun juda mos keladi. Bizning fikr-mulohaza shakllari skriptimiz Internetdagi boshqa skriptlar orasida alohida ajralib turadi, chunki u bir sahifada turli maydonlarga ega bo'lgan cheksiz sonli shakllarni ulash va bir nechta qabul qiluvchilarga xat yuborish imkoniyatiga ega.

Shunday qilib. Qani boshladik. Skriptning imkoniyatlaridan boshlaylik.

Bitta sahifada cheksiz sonli shakllarni ulang.

Maydonlar to'g'ri to'ldirilganligini tekshirish.

Bildirishnomalarni sozlash.

Har bir shakl uchun harflardan foydalanish qobiliyati.

Harf turi - (agar html teglari ishlatilsa)

Cheklanmagan miqdordagi manzillarga yuborish.

Har bir shaklni individual sozlash.

Skript sahifani qayta yuklamasdan ishlaydi.

Spam-botlardan himoya.

Dastlabki sozlash.
Skript kutubxonaga asoslangan holda ishlaydi, shuning uchun biz qilishimiz kerak bo'lgan birinchi narsa uni ulashdir. Buning uchun Google Hosted Libraries dan foydalanishni tavsiya etaman.

Qolgan fayllar haqida batafsilroq gaplashamiz:

feedback.js asosiy skript fayli boʻlib, AJAX formasini yuborish uchun javobgardir.
jquery.arcticmodal.js,
jquery.arcticmodal. - formalarni modal oynada ko'rsatish imkoniyatini ta'minlash.
jquery.jgrowl.js,
jquery.jgrowl.css - sahifada bildirishnomalarni ko'rsatishga imkon beradi (sahifaning yuqori burchagidagi bloklar).

HTML va kerakli atributlar.
Shaklning barcha elementlari uchun talab qilinadigan atribut name="" atributidir - formani keyingi sozlash uchun zarur.
Bir tugma uchun (type="tugma") class="feedback" ni belgilashingiz kerak. Shuni ham e’tiboringizga qaratmoqchimanki, “teskari aloqa” sinfiga ega har qanday HTML teg tugma vazifasini bajarishi mumkin Modal oynada formani chaqirish Modal oynada formani chaqirish uchun avvalo amalni belgilashingiz kerak. har qanday tegni bosish uchun, masalan, modal_btn sinfiga ega div
Modal oynada formani chaqirish $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal (); ))) )))
Shakl faqat modal oynada ko'rinadigan bo'lishi kerakligi sababli uni style="display: none;" atributi bilan div ichiga joylashtirish va modal oynani uslublash uchun bir nechta standart divlarga o'ralgan holda yashirish kerak.
x

Shunday qilib, biz shakllarni elektron pochtaga yuborish uchun skriptimizni ulash uchun asosiy sozlamalarni aniqladik. Keling, ichki qismni ko'rib chiqamiz va maydonlarni, bildirishnomalarni va u erda mavjud bo'lgan barcha narsalarni qanday sozlashni aniqlaymiz.

Bitta forma uchun sozlash namunasi Barcha shakllar uchun sozlamalar geribildirim\index.php faylida saqlanadi.
$form["form-1"] = massiv("maydonlar" => massiv("nom" => massiv("title" => "Ism", "tasdiqlash" => massiv("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "messages" => array("preg" => "[ %1$s ] maydonida xatolik bor", "minlength" " => "Minimal maydon uzunligi [ %1$s ] ruxsat etilganidan kamroq - %2$s", "maxlength" => "Maksimum maydon uzunligi [ %1$s ] ruxsat etilganidan katta - %2$s", )), "tell " => array("title" => "Telefon", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minlength" => "5",), "xabarlar" => massiv( "preg" => "[ %1$s ] maydonida xatolik bo‘lishi mumkin", "minlength" => "Maydonning minimal uzunligi [ %1$s ] ruxsat etilgan uzunlikdan kamroq - %2$s",) ),), "cfg" => array(" charset" => "utf-8", "subject" => "E-pochta mavzusi", "title" => "Xatning asosiy qismidagi sarlavha", " ajax" => rost, "validate" => rost, "from_email" = > " [elektron pochta himoyalangan]", "from_name" => "noreply", "to_email" => " [elektron pochta himoyalangan], [elektron pochta himoyalangan]", "to_name" => "noreply1, noreply2", "geoip" => rost, "referer" => rost, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "okay" => "Xabar yuborildi - OK", "fuck" => "Xabar yuborildi - XATO", "spam" => "Spam robot", "xabar berish" => "color-modal-textbox", "usepresuf" => false)); // Keyingi shakl $form["form-2"] = array("fields" => array(.....)
Yangi shakl sozlamalarini qo‘shish uchun siz $form["form-1"] massivi misolida yangi $form[""] massivini yaratishingiz kerak.

Kerakli name="" atributi haqida aytganlarimni eslaysizmi?

Shaklning barcha elementlari uchun talab qilinadigan atribut name="" atributidir - formani keyingi sozlash uchun zarur.
Shunday qilib, nima uchun hali ham zarurligini aytib berish vaqti keldi.
name="" massiv uchun alfanumerik kalit, $form[""] massivi uchun yagona bo'lishi kerak.

Aniqlik uchun misol html kod

Endi massivlar va ular nima uchun kerakligini tushunamiz.

$form["form-1"] = massiv();
$form["form-2"] = massiv(); va hokazo.
Bular har bir yangi shakl uchun asosiy massivlar bo'lib, quyidagilarni o'z ichiga oladi:

"maydonlar" => massiv(); - Shakl elementlari uchun sozlashlar massivi.

"name" => massiv(); - Bir qator sozlamalarga ega bo'lgan shakl elementi sozlamalari massivi (masalan, kiritish nomi="nom" turi="matn").
- "title" => "Sizning ismingiz" - shakl elementining nomi, xato yoki shablonda ko'rsatiladi.
- "validate" => massiv(); - massiv, forma elementlarini tekshirish qoidalarini o'z ichiga oladi
  - "preg" => "%%" - muntazam ifoda
  - "minlength" => "3" - minimal maydon hajmi
  - "maxlength" => "35" - maksimal maydon hajmi
  - "substr" => "35" - har doim N belgigacha kesiladi
- "xabarlar" => massiv(); - tekshirish xabarlarini o'z ichiga olgan massiv, xususan:
  - "preg" => "Shakl elementi oddiy ifodaga mos kelmaydi"
  - "minlength" => "Maydonning minimal uzunligi [ %1$s ] maqbul qiymatdan kamroq - %2$s" - tekshirish xatosi, kalit (preg) tekshirish kalitiga mos kelmaydi
  - "maxlength" => "Maydonning maksimal uzunligi [ %1$s ] ruxsat etilgan chegaradan oshib ketdi - %2$s" - tekshirish xatosi, kalit (preg) tekshirish kalitiga mos kelmaydi

"cfg" => massiv(); - Shakl sozlamalari massivi.

"charset" => "utf-8" - kodlash
"subject" => "Xat mavzusi", - Xat mavzusi
"title" => "Hatning asosiy qismidagi sarlavha", - Maktubning asosiy qismidagi sarlavha
"ajax" => rost, - bu Ajax TODO shakli (agar kerak bo'lmasa, uni noto'g'ri qilib qo'ying)
"validate" => true, - (to'g'ri) agar formani serverda tasdiqlamoqchi bo'lsak, js validatsiyasini "ajax" => true bilan almashtiradi. O'chirilganda (noto'g'ri), siz tasdiqlash maydoni sozlamalarini o'rnatishingiz shart emas. QILMOQ
"from_email" => "mening pochtam", - jo'natuvchi, maydon nomini belgilang (nom = "mening pochtam") va agar sizga foydalanuvchidan elektron pochta kerak bo'lmasa, u holda stub. [elektron pochta himoyalangan]
"from_name" => "mening ismim", - jo'natuvchi, maydon nomini belgilang (name="mening ismim") va agar sizga foydalanuvchi nomi kerak bo'lmasa, javobsiz stub.
"to_email" => " [elektron pochta himoyalangan]", - qabul qiluvchining elektron pochtasi. Bir nechta manzillarga yuborish uchun ularni vergul bilan ajrating. Misol ("to_email" => " [elektron pochta himoyalangan], [elektron pochta himoyalangan], [elektron pochta himoyalangan]",)
"to_name" => "noreply1", - Qabul qiluvchining nomi. Bir nechta manzilga yuborayotganda, oluvchilarning ismlarini vergul bilan ajrating. Misol ("to_name" => "noreply1, noreply2, noreply3",)
"geoip" => rost, - TODO turidan foydalanib manzilni toping
"referer" => false, - shakl yuborilgan sahifaning URL manzilini qo'shing
"type" => "tekis", - harf turi - oddiy, html (agar html teglari ishlatilsa)
"tpl" => false, - harf shablonidan foydalaning. Agar rost bo'lsa, shablon fayli jilddagi forma nomiga (name="form-1") muvofiq ulanadi va faylga (feedback/tpl/form-1.tpl) ishlov beriladi, aks holda hammasi shunday bo'ladi. har bir maydon yangi satrdagi kabi yuboriladi
"antispam" => "email77", - Anti spam, usul yashirin (displey: yo'q) maydonga asoslangan bo'lib, uni faqat robot avtomatik ravishda to'ldiradi va shu bilan o'zini qo'yib yuboradi.
"antispamjs" => "address77", - Antispam usuli dastlab to'ldirilgan yashirin (displey: yo'q) maydonga asoslangan bo'lib, sahifa yuklanganda JavaScript-ni avtomatik ravishda o'chirib tashlaydi, hatto aqlli robot ham buni kuta olmaydi va keyin u bloklangan.
"okay" => "Foydalanuvchiga xabar", - Agar ariza muvaffaqiyatli topshirilgan bo'lsa, foydalanuvchiga xabar ko'rsatiladi, siz html teglaridan foydalanishingiz mumkin.
"fuck" => "Foydalanuvchiga xabar", - Shaklni yuborishda xatolik yuz berganda ko'rsatiladigan foydalanuvchiga xabar, siz HTML teglaridan foydalanishingiz mumkin.
"spam" => "Foydalanuvchiga xabar", - Foydalanuvchiga yuborilgan xabar, agar spam-robotdan shubhalansa, siz HTML teglaridan foydalanishingiz mumkin.
"notify" => "color-modal", - qanday turdagi bildirishnomalarni ko'rsatish kerak, matn qutisi - sahifaning yuqori burchagidagi bloklar, rang - shakldagi rangni ajratib ko'rsatish, modal - sahifaning o'rtasida joylashgan modal oyna, yo'q - o'chirish. Siz birlashtirishingiz mumkin, masalan: rang-modal - maydonlarni ajratib ko'rsatish bilan to'ldirishdagi xatolar va TODO modal oynasida matn yuborish holati
"usepresuf" => false - Mavzuga yoki harfning sarlavhasiga maxsus qo'shimcha qo'llaniladimi, kichik o'zgarishlar bo'lsa, masalan, %%cfg.title.suffix%% belgilashingiz mumkin, buning uchun bo'lishi kerak. shakldagi yashirin maydon, batafsil ma'lumot uchun f -qiu presuf() ga qarang.

Harf shablonlarini o'rnatish Shunday qilib. Keling, xabarlarimiz mavzusini ko'rib chiqaylik.
Birinchidan, shakl shablonda yuborilishi uchun forma sozlamalarida shablon faylidan foydalanishni yoqishingiz kerak - "tpl" => true ,
Ikkinchidan, siz jildida *.tpl kengaytmali shablon faylini yaratishingiz kerak (feedback/tpl/), shakl nomiga mos ravishda (name="form-1" ).

Misol: (feedback/tpl/form-1.tpl)

Elektron pochtaning asosiy qismidagi sarlavha
%%name.title%%	%%ism.qiymat%%
%%tell.title%%	%%tell.value%%

ism, ayting va hokazo. - Bular foydalanuvchi to'ldiradigan maydonlarning atributlari (name="").
sarlavha - forma elementi sozlamalari massivida o'rnatiladigan shakl elementining nomi.
qiymat - shakl elementining qiymati.

Bu bugungi kun uchun hammasi, lekin skript, albatta, mukammal emas, shuning uchun xatolarning sharhlari va tavsiflari mamnuniyat bilan qabul qilinadi va kelgusi versiyalarda tuzatiladi.

P.S. Ssenariy jamoa tomonidan ishlab chiqilgan

Amalda eng keng tarqalgan vazifalardan biri bu fikr-mulohaza shaklini amalga oshirishdir. Siz uning HTML kodini yozishni, uni CSS-da loyihalashni, foydalanuvchidan olingan ma'lumotlarni qayta ishlovchi va uni bizning pochtamizga yuboradigan PHP skriptini yaratishni, kiritilgan ma'lumotlarning mosligini tekshiradigan JS skriptini yozishni, himoya qilishni nazarda tutyapsiz. Bizning pochta qutimiz bot hujumlaridan qulab tushmasligi uchun spamdan bizning aqlimiz.

Yuqoridagi barcha fikrlar bizning sharhimizda muhokama qilinadi va batafsil sharhlanadi.

Shunday qilib, keling, fikr-mulohaza shaklini yaratishni boshlaylik:

HTML

Avvalo, biz HTML kodini yozamiz, u foydalanuvchi to'ldiradigan maydonlarni belgilaydi. Kelajakda ular rasmiylashtiriladi. Shakl kodi quyidagicha ko'rinadi:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Nomi:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Xabar:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Yuborish" />

Va endi vizual tarzda u quyidagicha ko'rinadi:

Qabul qilaman, hozirgacha hamma narsa xunuk va hech narsa aniq emas, lekin biz endi boshladik.

Keling, yuqoridagi kodni batafsil ko'rib chiqaylik:

< form method= "post" action= "mail.php" > …

Formani yaratish uchun siz forma tegidan foydalanishingiz kerak. Aynan u kod tarjimoni uchun shaklning boshi va oxirini aniqlaydi. U, har qanday teg kabi, atributlarning butun to'plamiga ega, ammo formaning ishlashi uchun faqat ikkita narsa talab qilinadi, bular usul (serverga so'rov yuborish usuli, shakllar uchun standart sifatida post ishlatiladi) va harakat ( forma ishlov beruvchi fayliga yo'lni ko'rsatadi, ya'ni Ushbu faylda PHP skripti mavjud bo'lib, u foydalanuvchi kiritgan qiymatlarni elektron pochta orqali bizga yuboradi.Bizning holatlarimizda bu fayl mail.php deb nomlanganini ko'ramiz va u biz ko'rib chiqayotgan sahifa bilan bir xil sayt katalogida joylashgan).
< input maxlength= "30" type= "text" name= "name" />

Keyinchalik bizda kirishlar mavjud. Bu, aslida, foydalanuvchilar bizga kerakli ma'lumotlarni kiritadigan shakl maydonlarining o'zlari (type="text" bu matn bo'lishini bildiradi). maxlength atributi foydalanuvchi berilgan shakl maydoniga qancha belgilar kiritishi mumkinligini belgilaydi. Eng muhim atribut bu nom - u ma'lum bir maydon nomini belgilaydi. Aynan shu nomlar bo'yicha PHP skripti keyinchalik unga kiritilgan ma'lumotlarni qayta ishlaydi. Agar so'ralsa, kursor uning ichiga joylashtirilganda yo'qoladigan maydon ichidagi matnni ko'rsatadigan to'ldiruvchi atributini ham o'rnatishingiz mumkin. To'ldiruvchi bilan bog'liq muammolardan biri shundaki, u ba'zi eski brauzerlar tomonidan qo'llab-quvvatlanmaydi.
< label for = "name" >Nomi:

To'ldiruvchilarni tashlab ketgan bo'lsak ishlatiladi. Oddiy maydon imzosi, for atributi bu imzo qaysi sohaga tegishli ekanligini bildiradi. Qiymat bizni qiziqtirgan maydon nomini bildiradi.
< textarea rows= "7" cols= "50" name= "message" >

Kirish kabi, u foydalanuvchi uchun ma'lumot kiritish uchun mo'ljallangan, faqat bu safar maydon uzoq xabarlar uchun moslashtirilgan. Rows satrlarda maydon hajmini, belgilarda ustunlarni belgilaydi. Umuman olganda, ular maydonimizning balandligi va kengligini o'rnatadilar.
< input type= "submit" value= "Yuborish" />

Type="submit" bizga bu shaklni yuborish tugmasi ekanligini bildiradi va qiymat bu tugma ichida bo'ladigan matnni belgilaydi.
< div class = "right" >

faqat shaklning keyingi vizual dizayni uchun ishlatiladi.

CSS

Fikr-mulohaza shaklimiz ko'rinadigan ko'rinishi uchun uni formatlash kerak. Quyidagi natijani olish uchun:

Biz ushbu koddan foydalandik:

forma (fon: #f4f5f7; to‘ldirish: 20px; ) shakl . chap, shakl. o'ng (displey: inline- blok; vertikal tekislash: tepa; eni: 458px; ) shakl . o'ng ( padding- chap: 20px; ) yorlig'i (displey: blok; shrift- o'lchami: 18px; matnni tekislash: markaz; chekka: 10px 0px 0px 0px; ) kiritish, matn maydoni (chegara: 1px qattiq #82858D; to'ldirish: 10px; shrift- o'lchami: 16px; eni: 436px; ) textarea (balandlik: 98px; chekka-pastki: 32px; ) input[ type= "submit" ] (kenglik: 200px; float: o'ng; chegara: yo'q; fon: #595B5F; rang: #fff; matnni o'zgartirish: katta harf;)

Men CSS-ni batafsil tavsiflashning ma'nosini ko'rmayapman; Men sizning e'tiboringizni faqat asosiy fikrlarga qarataman:

Shaklda har bir teg uchun dizayn yozishning hojati yo'q. Selektorlaringizni shunday yaratishga harakat qilingki, siz bir necha qator kodlarda kerakli barcha elementlarni loyihalashingiz mumkin.

Chiziqlarni buzish va chekinishlar yaratish uchun keraksiz turdagi teglardan foydalanmang< br>, < p>va hokazo. Displeyli CSS: to'ldirish xususiyatlariga ega blok va chekka bu vazifalarni yaxshi bajaradi. Nima uchun undan foydalanmaslik kerakligi haqida ko'proq< br>Umuman olganda, siz Tag br maqolasida o'qishingiz mumkin, lekin bu haqiqatan ham kerakmi? .

Shakllar uchun jadvalli tartibdan foydalanmaslik kerak. Bu ushbu tegning semantikasiga zid keladi va qidiruv tizimlari semantik kodni yaxshi ko'radi. Hujjatning vizual tuzilishini shakllantirish uchun bizga faqat div teglari va CSS-da ko'rsatilgan displey xususiyatlari kerak: inline-block (bloklarni qatorga joylashtiradi) va vertikal-align: top (ularning ekran bo'ylab tarqalishini oldini oladi) , ularni kerakli balandlikka o'rnating va voila, ortiqcha narsa yo'q va hamma narsa biz kerakli tarzda joylashgan.

Veb-sayt dizaynida o'z vaqtlarini tejashni istaganlar uchun veb-saytlarni yaratishda CSS ramkalaridan foydalanishni tavsiya qilaman, ayniqsa o'z-o'zidan yozilgan. Bu borada mening tanlovim Twitter Bootstrap. Undan foydalanib shakllarni loyihalash bo'yicha darsni ko'rishingiz mumkin.

PHP

Xo'sh, bizning formamizni ishlash vaqti keldi.

Biz saytning asosiy katalogiga o'tamiz va u erda mail.php faylini yaratamiz, biz avvalroq forma tegining action atributida yo'lni ko'rsatgan edik.

Oxir-oqibat uning kodi quyidagicha ko'rinadi:

Xabaringiz muvaffaqiyatli yuborildi

Ushbu hujjatning HTML va CSS qismlarini muhokama qilishni o'tkazib yuborishingiz mumkin. Asosiysi, bu sizning xohishingiz va ehtiyojlaringiz bo'yicha loyihalashingiz mumkin bo'lgan oddiy veb-sayt sahifasidir. Keling, uning eng muhim qismini - shaklni qayta ishlash uchun PHP skriptini ko'rib chiqaylik:

$orqaga = "

Ortga qaytmoq

" ;

Ushbu qator bilan biz oldingi sahifaga qaytish uchun havola yaratamiz. Biz foydalanuvchi qaysi sahifadan bu sahifaga kirishini oldindan bilmaganimiz uchun, bu kichik JS funksiyasi yordamida amalga oshiriladi. Kelajakda biz ushbu o'zgaruvchiga uni kerakli joylarda ko'rsatish uchun foydalanamiz.

agar (! empty ($_POST [ "name" ] ) va ! empty ($_POST [ "telefon" ] ) va ! empty ($_POST [ "mail" ] ) va ! empty ($_POST [ "xabar" ] ) ) ) ( //ishlovchining ichki qismi ) else ( echo "Xabar yuborish uchun barcha maydonlarni to'ldiring! $back " ; exit ; )

Bu erda biz maydonlar to'ldirilganligiga ishonch hosil qilish uchun ariza tekshiruvini qo'shamiz. Siz taxmin qilganingizdek, $_POST["name"] qismida qo'shtirnoq ichida biz kiritilgan ma'lumotlarning name atributining qiymatini yozamiz.

Agar barcha maydonlar to'ldirilgan bo'lsa, u holda skript o'zining ichki qismida ma'lumotlarni qayta ishlashni boshlaydi, lekin agar kamida bitta maydon to'ldirilmagan bo'lsa, foydalanuvchi ekranida hamma narsani to'ldirishni so'ragan xabar paydo bo'ladi. forma maydonlari aks-sado "Xabar yuborish uchun barcha maydonlarni to'ldiring! $back" va biz birinchi qator bilan yaratgan oldingi sahifaga qaytish uchun havola.

Keyin forma ishlov beruvchisining ichki qismiga joylashtiramiz:

$name = trim(strip_tags($_POST["ism"])); $telefon = trim(strip_tags($_POST["telefon"])); $mail = trim(strip_tags($_POST["pochta"])); $xabar = trim(strip_tags($_POST["xabar"]));

Shunday qilib, biz foydalanuvchi tomonidan kiritilgan ma'lumotlarni HTML teglari va qo'shimcha bo'shliqlardan tozaladik. Bu bizga yuborilgan xabarlarda zararli kodni olishdan o'zimizni himoya qilish imkonini beradi.

Tekshiruvlarni murakkablashtirish mumkin, ammo bu sizning ixtiyoringizda. Biz allaqachon server tomonida minimal himoyani o'rnatdik. Qolganini JS yordamida mijoz tomonida qilamiz.

Men JS foydasiga server tomonida forma himoyasidan butunlay voz kechishni tavsiya etmayman, chunki juda kamdan-kam bo'lsa-da, brauzerda JS o'chirilgan noyoblar mavjud.

Teglarni tozalagandan so'ng, xabar yuborishni qo'shing:

pochta ("[email protected]" , "saytingiz_manzilingizdan xat" , "Men sizga yozdim: " . $name . "
Uning raqami: ". $telefon ."
Uning elektron pochtasi: ". $mail."
Uning xabari: " . $message, "Content-type:text/html;charset=windows-1251" );

Aynan shu liniya xabarni yaratish va bizga yuborish uchun javobgardir. U quyidagicha to'ldiriladi:

“[email protected]” – bu yerda siz tirnoq orasiga e-pochtangizni kiritasiz

“Sayt_manzilingizdan maktub” elektron pochtangizga yuboriladigan xabar mavzusidir. Siz bu erda hamma narsani yozishingiz mumkin.

"Men sizga yozdim: ".$name."< br />Uning raqami: ".$phone."< br />Uning elektron pochtasi: ".$mail."< br />Uning xabari: ".$message – biz xabar matnining o‘zini shakllantiramiz. $name – biz oldingi bosqichdagi maydonlarga kirish orqali foydalanuvchi tomonidan to‘ldirilgan ma’lumotlarni kiritamiz, tirnoq ichida bu maydon nimani anglatishini teg bilan tasvirlaymiz.< br />Biz butun xabarni o'qish mumkin bo'lishi uchun chiziqni ajratamiz.

Content-type:text/html;charset=windows-1251 - oxirida xabarda uzatiladigan ma'lumotlar turi va uning kodlanishi aniq ko'rsatilgan.

MUHIM!

Hujjatning "boshida" ko'rsatilgan kodlash (< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />), Content-type:text/html;charset=windows-1251 xabaridagi kodlash va umuman olganda PHP faylining kodlanishi mos kelishi kerak, aks holda pochta orqali kelgan xabarlarda rus tili oʻrniga “aqldan ozgan soʻzlar” koʻrsatiladi yoki Ingliz harflari.

Ko'pchilik yuborilayotgan xabarning kodlanishini aniq ko'rsatmaydi, lekin ba'zi elektron pochta mijozlarida bu kelajakda muammolarga olib kelishi mumkin (o'qilmagan elektron pochta xabarlari pochtaga yuboriladi), shuning uchun baribir uni ko'rsatishni tavsiya etaman.

Shaklni kiritilgan ma'lumotlarning muvofiqligini tekshirish

Foydalanuvchilar maydonlarni tasodifan o'tkazib yubormasliklari va hamma narsani to'g'ri to'ldirishlari uchun kiritilgan ma'lumotlarni tekshirishga arziydi.

Buni server tomonida PHP da, mijoz tomonida ham JS da qilish mumkin. Men ikkinchi variantdan foydalanaman, chunki shu tarzda odam nima noto'g'ri qilganini darhol bilib oladi va qo'shimcha sahifaga o'tishni amalga oshirmasdan xatoni tuzatishi mumkin.

Biz skript kodini formaning HTML qismiga ega bo'lgan bir xil faylga joylashtiramiz. Bizning holatimizda u quyidagicha ko'rinadi:

< script>funksiya checkForm(form) ( var nomi = shakl. nom. qiymat; var n = nom. match(/ ^[ A- Za- zA- Jaa- z ] * [ A- Za- zA- Jaa- z ] + $/ ) ; if (! n) ( alert("Kiritilgan nom noto‘g‘ri bo‘lsa, xatoni tuzating" ) ; false qaytaring; ) var telefon = forma. telefon. qiymat; var p = telefon. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) ( alert("Telefon noto‘g‘ri kiritilgan" ); return false ; ) var mail = form. mail . value; var m = pochta . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; agar (! m) ( ogohlantirish ("Elektron pochta noto'g'ri kiritilgan, xatoni to'g'irlang") ; noto'g'ri ; ) haqiqatni qaytaring; )

Xo'sh, endi odatiy tahlil:

Yuborish tugmachasini bosganimizda shaklni tekshirishimiz uchun biz skriptimizni ishga tushirishni forma tegiga biriktiramiz:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Endi nazorat ro'yxatini nuqta bo'yicha ko'rib chiqamiz:

Ko'rib turganingizdek, bunday mini-chek bizning har bir sohamiz uchun yozilgan. Men skrinshotda bitta maydonni tekshirishni qizil kvadrat bilan ta'kidladim; boshqa maydonlar uchun u xuddi shunday tuzilishga ega va agar maydon qo'shish yoki uni olib tashlash kerak bo'lsa, endi buni osongina qilishingiz mumkin.

Veb-loyihani ishlab chiqish uchun tashrif buyuruvchilardan fikr-mulohazalarni olish juda muhimdir. Afsuski, ko'pgina veb-saytlarda ishlab chiquvchilarga xabar yuborish imkoniyati umuman taqdim etilmaydi yoki juda jiddiy qiyinchiliklar bilan bog'liq.

Bugun biz ushbu muammoning oddiy echimini qilamiz. JQuery, PHP va PHPMailer klassidan foydalanib, forma foydalanuvchi taklifini bevosita pochta qutingizga yuboradi.

HTML

Keling, HTML belgilashdan boshlaylik. Uslublar hujjatning yuqori qismida, JavaScript fayllari esa pastki qismida joylashgan. Bu sahifani yuklash jarayonini optimallashtiradi, shuning uchun skriptlar oxirgi marta yuklanadi, bu foydalanuvchiga sahifa mazmunini ko'rish imkonini beradi.

demo.html

PHP va jQuery yordamida fikr-mulohaza shakli | Veb-sayt veb-sayti uchun demo. Fikr-mulohaza

Agar javob olishni istasangiz, kontakt ma'lumotlarini kiriting.

Yuborish

Ichkarida tanasi joylashgan div#fikr. U o'quv qo'llanmaning CSS bo'limida ko'rinadigan sobit joylashuv yordamida oynaning pastki o'ng tomoniga joylashtirilgan.

Buning ichida div beshta rangli element joylashtirilgan oraliq. Ularning har biri 20% kenglikka ega va chapga siljiydi. Shu tarzda ular butun kenglik bo'ylab to'liq joylashtiriladi. div#fikr.

Keyin sarlavha, matn maydoni va tugmani o'z ichiga olgan .section konteyneri keladi.

CSS

Keling, forma uchun uslublarni o'rnatishga o'tamiz. Birinchidan, uslublar jadvalining tuzilishi nimadan iboratligi haqida bir necha so'z aytaylik. Agar siz quyidagi CSS ta'riflariga qarasangiz, har bir qoida #feedback bilan boshlanishini ko'rasiz. Bu CSS-da shunga o'xshash nom maydonini yaratadi, bu esa mavjud veb-saytga ziddiyatlarsiz kod qo'shishni osonlashtiradi.

styles.css - 1-qism

#feedback( fon rangi:#9db09f; eni:310px; balandlik:330px; joylashuv: belgilangan; pastki:0; oʻng:120px; pastki chet:-270px; z-index:10000; ) #feedback .section( fon :url("img/bg.png") takrorlash-x yuqori chap; chegara: 1px qattiq #808f81; chegara-pastki: yoʻq; toʻldirish: 10px 25px 25px; ) #feedback .color( float:left; height:4px; kengligi:20%; to‘lib-toshgan: yashirin; ) #feedback .color-1(fon rangi:#d3b112;) #feedback .color-2(fon rangi:#12b6d3;) #feedback .color-3(fon rangi: :#8fd317;) #feedback .color-4(fon rangi:#ca57df;) #feedback .color-5(fon rangi:#8ecbe7;) #feedback h6(fon:url("img/feedback.png" ) takrorlanmaslik; balandlik: 38px; hoshiya: 5px 0 12px; matn boʻshligʻi:-99999px; kursor: koʻrsatgich; ) #feedback textarea(fon rangi:#fff; chegara: yoʻq; rang:#666666; shrift:13px "Lucida Sans",Arial,sans-serif; balandlik:100px; toʻldirish:10px; eni:236px; oʻlchamini oʻzgartirish:yoʻq; kontur:yoʻq; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit -box-soya: 4px 4px 0 #8a9b8c; quti soyasi: 4px 4px 0 #8a9b8c; )

Uslub qilinadigan birinchi element div#fikr. U qat'iy pozitsiyaga ega va brauzer oynasiga biriktirilgan. Shundan so'ng uchun ta'rif keladi div .Bo'lim va beshta rangli element oraliq. Bu elementlar faqat har bir sinf uchun alohida ajratilgan fon rangida farqlanadi.

CSS faylining taqdim etilgan qismining eng pastki qismida matn maydonini ko'rsatish qoidalari belgilangan.

styles.css - 2-qism

#feedback a.submit( background:url("img/submit.png") takrorlanmaydi; chegara: yo'q; displey:blok; balandlik: 34px; chekka: 20px avtomatik 0; matn dekoratsiyasi: yo'q; matn chekindisi: -99999px; width:91px; ) #feedback a.submit:hover( fon-pozitsiya:chap past; ) #feedback a.submit.working( fon-pozitsiya:yuqori o‘ng !muhim; kursor:default; ) #feedback .message (shrift-family:Corbel,Arial,sans-serif; rang:#5a665b; matn soyasi:1px 1px 0 #b3c2b5; pastki chet:20px; ) #feedback .arrow( background:url("img/arrows.png) ") takrorlanmaslik; float: o'ng; kenglik: 23 piksel; balandlik: 18 piksel; pozitsiya: nisbiy; tepa: 10 piksel; ) #feedback .arrow.down( fon-pozitsiya:chap tepa;) #feedback h6:hover .past( fon-pozitsiya:chap pastki;) #feedback .arrow.up( fon-pozitsiya:o'ng tepa;) #feedback h6:hover .up (fon-pozitsiya:o'ng pastki;) #feedback .response( font-size:21px; chet-usti: 70px; matnni tekislash: markaz; matn soyasi: 2px 2px 0 #889889; rang:#FCFC; displey: blok; )

Uslublar jadvalining ikkinchi qismi yuborish tugmasi ko'rinishini belgilaydi. E'tibor bering, uchta tugma holati mavjud, ularning rasmlari fon tasviri uchun bitta faylda joylashgan - submit.png. Ular faqat kerak bo'lganda ko'rsatiladi.

jQuery

Fikr-mulohaza shakli ikki holatga ega - minimallashtirilgan va maksimal. Yuklashda standart holat ekranning pastki o'ng qismida minimallashtirilgan holatga o'rnatiladi. Va jQuery foydalanuvchi sarlavhani bosganida shaklni maksimal holatga keltiradi. Ushbu funktsiya hodisani bog'lash va oddiy animatsiyalarni bajarish orqali amalga oshiriladi.

script.js - 1-qism

$(document).ready(function())( // Submit.php skriptining nisbiy URL manzili. // Siz uni oʻzgartirishingiz kerak boʻlishi mumkin. var submitURL = "submit.php"; // Fikr-mulohaza obyektini keshlash: var geribildirim = $( "#feedback"); $("#feedback h6").click(function())( // Animatsiya xususiyati qiymatlari saqlanadi // alohida obyektda: var anim = ( mb: 0, // Pastki chekka pt: 25 // Yuqori toʻldirish); var el = $(this).find(".arrow"); if(el.hasClass("pastga"))( anim = ( mb: -270, pt. : 10); ) // Birinchi animatsiya shaklni yuqoriga yoki pastga siljitadi, ikkinchisi esa // sarlavhasini kichiklashtirilgan versiyaga mos keladigan qilib siljitadi feedback.stop().animate((marginBottom: anim.mb)); feedback.find(".section").stop() .animate((paddingTop:anim.pt),function())( el.toggleClass("pastga yuqoriga"); )); ));

Kodni sodda va tushunarli qilish uchun tepada animatsiya uchun qiymatlarni o'z ichiga olgan animatsiya ob'ekti yaratiladi va operator joylashtiriladi. agar. Sinfning mavjudligiga qarab ' pastga‘ strelkada biz shaklni kengaytiramiz yoki siqamiz.

Ikkinchi qism script.js AJAX bilan ishlashni boshqaradi submit.php.

script.js - 2-qism

$("#feedback a.submit").live("click",function())( var button = $(this); var textarea = feedback.find("textarea"); // Biz ishchilar sinfidan foydalanmaymiz. faqat maʼlumotlarni yuborish tugmasi uchun uslublarni oʻrnatish uchun, //, shuningdek, shaklning koʻp avlodini oldini olish uchun bir turdagi blokirovka sifatida. if(button.hasClass("ishlovchi") || 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; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });

Biz jQuery ning AJAX $.ajax() usulidan foydalanamiz submit.php. Bu usul $.get() va $.post() ga qaraganda ulanish ustidan bir oz ko'proq nazorat beradi.

Usulning afzalliklaridan biri "butun" qayta qo'ng'iroq qilish funktsiyasi davomida ob'ekt xususiyatlarining ko'rinishidir. Bu erda biz javob holatini muvofiqligini tekshiramiz xato 404 (sahifa topilmadi), va foydalanuvchiga yo'lni tekshirishni so'ragan xabarni ko'rsating submitURL.

Endi yakuniy qismga - PHP ga o'tish vaqti keldi.

PHP

PHP AJAX dan yuborilgan ma'lumotlarni qayta ishlaydi, ularni tasdiqlaydi va ko'rsatilgan manzilga elektron pochta xabarini yuboradi.

submit.php

// Bu yerda siz o'z manzilingizni kiritishingiz kerak $emailAddress = " [elektron pochta himoyalangan]"; // Suv toshqini oldini olish uchun sessiyadan foydalaning: session_name("quickFeedback"); session_start(); // Agar oxirgi shakl 10 soniyadan kamroq vaqt oldin yuborilgan bo'lsa, // yoki foydalanuvchi oxirgi soat ichida 10 ta xabar yuborgan bo'lsa. if($_SESSION[ "lastSubmit"] && (vaqt() - $_SESSION["lastSubmit"]< 10 || $_SESSION["submitsLastHour"] >10))( die("Iltimos, xabarni qayta yuborishdan oldin bir necha daqiqa kuting."); ) $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; "phpmailer/class.phpmailer.php" talab qilish; if(ini_get("magic_quotes_gpc"))( $_POST["xabar"] = chiziq chizig'i($_POST["message"]); ) if(mb_strlen($_POST["message"],"utf-8")< 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Qabul qiluvchining manzilini qo'shing $mail->Addaddress($emailAddress); $mail->Subject = "Fikr-mulohaza shaklidan yangi xat"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Namoyish sahifasida fikr-mulohaza shakli"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Demo sahifadagi fikr-mulohaza shakli"); $mail->Yuborish(); echo "Rahmat!";

Biz birinchi navbatda foydalanuvchi so'nggi soat ichida ariza yuborishdan qanchalik tez-tez foydalanganligini aniqlash uchun sessiya boshqaruvidan foydalanamiz, shuningdek, oxirgi yuborilganidan beri o'tgan vaqt miqdorini aniqlaymiz. Agar oxirgi yuborishdan keyin 10 soniyadan kamroq vaqt o'tgan bo'lsa yoki foydalanuvchi oxirgi soat ichida 10 dan ortiq xabar yuborgan bo'lsa, xato xabari ko'rsatiladi.

Elektron pochta PHPMailer klassi yordamida yuboriladi. Diqqat! U faqat PHP5 bilan ishlaydi.

Ko'p usullar PHPMailer chiquvchi elektron pochtani sozlash uchun ishlatiladi. IsMail() usuli sinfga ichki PHP funksiyasidan foydalanishni aytadi pochta(). AddAddress() usuli qabul qiluvchining manzilini qo'shadi (siz bu usulga qo'shimcha qo'ng'iroqlar bilan bir nechta qabul qiluvchilarni qo'shishingiz mumkin). Xat va matn mavzusini qo'shgandan so'ng, javoblar uchun manzil ko'rsatiladi va xabar yuboriladi.

Tayyor!

Xulosa

Saytga tashrif buyuruvchidan tezkor fikr-mulohazalarni tashkil qilish uchun ushbu shakldan foydalanishingiz mumkin. Taqdim etish uchun juda past to'siq - siz faqat matn maydonini to'ldirishingiz va tugmani bosishingiz kerak - sahifalaringizga tashrif buyuruvchilar o'z fikrlarini baham ko'rishlari uchun ajoyib muhit yaratadi. Skript ham yaxshi tuzilgan va sozlash oson, bu esa uni veb-saytingizda minimal harakat bilan ishlatishingizga yordam beradi.

Aloqa formasi joylashtirilishi mumkin. Buni qilish oson. Agar siz taklif qilingan CSS uslubini qabul qilsangiz, shakl "kauchuk" bo'ladi:

Quyida pochta jo‘natish skriptining ikkita varianti mavjud: Javascript bilan va Javascriptsiz

1. Qayta yuklamasdan aloqa shakli

PHP alohida faylga ko'chiriladi

F5 tugmachasini bosish shaklni qayta yubormaydi

Shaklni topshirgandan so'ng sahifa qayta yuklanmaydi

IE8 va undan past versiyalarda qo'llab-quvvatlanmaydi (siz kodni addEventListener() , preventDefault() va XMLHttpRequest analoglari bilan to'ldirishingiz yoki 2-variantdan foydalanishingiz kerak)

Kontaktlar.html fayli Siz bilan qanday bog'lanish mumkin: Aloqa uchun elektron pochta: Sizning xabaringiz: document.getElementById("feedback-form").addEventListener("submit", function(evt)( var http = new XMLHttpRequest(), f = this; evt.preventDefault( ); http.open("POST", "contacts.php ", rost); http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send("nameFF="" + f.nameFF.value + "&contactFF=" + f.contactFF.value + "&messageFF=" + f.messageFF.value); http.onreadystatechange = function() ( agar (http.readyState == 4 && http.status) == 200) ( alert(http.responseText + ", Xabaringiz qabul qilindi.\nMutaxassislarimiz sizga 2 kun ichida javob berishadi.\nKompaniyamizga qiziqish bildirganingiz uchun tashakkur!"); f.messageFF.removeAttribute("value "); // (ikki qator) f.messageFF.value=""; ) ) http.onerror = function() ( alert("Kechirasiz, ma'lumotlar uzatilmadi"); ) ), noto'g'ri); Kontaktlar.php fayli 2. JavaScriptsiz aloqa shakli

ko'p hollarda fayl kengaytmasi .php bo'lishi kerak

F5 tugmasini bosganingizda forma yana yuboriladi

Shaklni topshirgandan so'ng sahifa qayta yuklanadi

maydonlarning to'g'ri to'ldirilganligini tekshirish server tomonida amalga oshirilmaydi

Kontaktlar.php fayli #feedback-form ( maksimal kenglik: 400px; toʻldirish: 2%; chegara radiusi: 3px; fon: #f1f1f1; ) #feedback-form (kenglik: 100%; quti oʻlchami: chegara qutisi; hoshiya: 2px 0 2% 0; toʻldirish: 2%; chegara: 1px qattiq rgba(0,0,0,.1); chegara radiusi: 3px; quti soyasi: 0 1px 2px -1px rgba(0,0, 0,.2) inset, 0 0 transparent; ) #feedback-form :hover (chegara-rang: #7eb4ea; box-shadow: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 shaffof; ) #feedback-form :focus (kontur: yo‘q; hoshiya-rang: #7eb4ea; quti-soya: 0 1px 2px -1px rgba(0,0,0,.2) inset, 0 0 4px rgba(35,146,243, .5); oʻtish: .2s chiziqli; ) #feedback-form ( toʻldirish: 2%; chegara: yoʻq; chegara radiusi: 3px; quti-soya: 0 0 0 1px rgba(0,0,0,.2) inset; fon: #669acc; rang: #fff; ) #fikr-shakl: kursor (fon: #5c90c2; ) #feedback-form:fokus (box-soya: 0 1px 1px #fff, inset 0 1px 2px rgba(0) ,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05); ) Siz bilan qanday bog‘lanish mumkin: E-pochta manzili: Sizning xabaringiz:

[email protected] manzilini almashtirishingiz kerak

contacts.php ni to'liq manzil bilan almashtirishingiz kerak, masalan, http://site.ru/folder/folder/contacts.php

yangi maydon qo'shish uchun HTML, JavaScript va PHP kodlariga o'zgartirishlar kiritishingiz kerak. Boshqacha qilib aytganda, contactFF bilan bir xil bo'limlarni qo'shing. Misol da tasvirlanganidek

Hech kimga sir emaski, siz tez-tez veb-saytingizga tashrif buyuruvchilar bilan qandaydir tarzda muloqot qilishingiz kerak. Albatta, siz shunchaki elektron pochtangizni berishingiz mumkin (men qilganim kabi) yoki boshqa usulni taklif qilishingiz mumkin - bu fikr-mulohaza shakli. Albatta, bu PHP tilini bilishni talab qiladi. Lekin siz hamma narsani noldan yozishingiz shart emasligi uchun men sizga juda yaxshi fikr-mulohaza shakli skriptini taqdim etaman.

Yuklab olgandan so'ng, arxivni veb-saytingizga olib tashlang (hech narsani o'chirmaslik uchun ehtiyot bo'ling). Endi uni sozlaymiz. Buning uchun "config.php" faylini oching. Va quyidagi o'zgaruvchilarning qiymatlarini o'zgartiring:

"mailto" - o'rniga "qo'ying" [elektron pochta himoyalangan]"sizning pochta qutingiz manzili.

"charset" - kodlashni o'rnating, garchi sizning saytingiz rus bo'lsa, siz "windows-1251" ni tark etishingiz mumkin.

"kontent" - Men sizga "matn/tekis" ni qoldirishni maslahat beraman, chunki tashrif buyuruvchilaringiz sizga HTML formatida xabar yuborishlari dargumon.

Endi siz skriptning index.php faylini ishga tushirishingiz mumkin. Natijada, sizning oldingizda shakl paydo bo'ladi. Siz uni to'ldirishingiz va xat yuborishingiz mumkin.

Endi savol tug'iladi: "Ushbu fikr-mulohaza shaklini veb-saytingizga qanday kiritish kerak?" Buni amalga oshirish uchun fikr-mulohaza sahifangiz uchun javobgar bo'lgan faylni toping (u "feedback.html" bo'lsin). Darhol kengaytmani php ga o'zgartiring (ya'ni "feedback.php"). Kodni index.php skriptidan fikr-mulohaza sahifasi (feedback.php) bilan faylga ko'chiring. Endi siz va teglari orasida xohlagan narsani qilishingiz mumkin, shunchaki index.php dan qo'ygan narsalarni o'chirmang. Agar siz nima qilayotganingizni aniq bilmasangiz, teglar orasidagi narsaga ham tegmang.

Va nihoyat, agar siz shaklning ko'rinishini yoqtirmasangiz, uni "styling.css" faylida tuzatishingiz mumkin.

Agar sizda hali ham savollaringiz bo'lsa yoki skriptda ba'zi nosozliklar mavjud bo'lsa (men uni sinab ko'rmadim), uni tuzatishim uchun menga elektron pochta orqali yozing.

Boshqa odamlarning skriptlari ishiga bog'liq bo'lmaslik uchun ularni o'zingiz yaratishni o'rganing. Mening "PHP va MySQL noldan gurugacha" video kursim sizga quyidagilarni o'rgatadi: