Како креирати Ајак-базирани ХТМЛ5 / ЦСС3 контакт образац

 
 
  
Ваша е-пошта је послата. Хуззах!
  

  
Грешка приликом слања обрасца
  
 
 Име   
  
 
 Емаил   
  
 
 Порука <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Пошаљите нам Маил!  
 
  

Можда сте приметили да постоји још један условни блок непосредно након почетног обрасца. Ово проверава име променљиве $ хасЕррор и приказат ће поруку о погрешци након потврде. Ова резервна метода је користи се само ако је ЈаваСцрипт онемогућен у претраживачу и стога не може генерисати динамичке грешке.

Све до краја можемо наћи појединачне ПХП варијабле се проверава. Изјаве регулишу да ли је образац већ достављен са само делимичним количинама попуњених података. Ово је још један резервни систем који приказује садржај већ попуњених поља - леп трик за правилно корисничко искуство!

Непосредно након завршетка нашег обрасца је неколико јКуери функције написали смо. Прво ћемо разговарати о њима, јер су они имплементација на задатку. Међутим, ако претраживач не прихвати ЈаваСцрипт, онда се подразумевано можемо ослонити на наш ПХП код.

Отварање у јКуери

Најлакши начин да започнете разговор о овој теми је да уђете право унутра. Оборит ћу појединачне блокове редом по ред тако да можете видјети што скрипта заправо провјерава за.

Међутим, ако се само изгубите прегледајте датотеке кода пројекта. Сви пуни блокови су унапред написани и добро документовани на јКуери веб сајту. Да бисте започели, отварамо наш код сличан сваком другом:

Ако сте упознати цаллбацкс можда ћете приметити пошта() функција има уграђени скуп параметара. Повратни позиви су мање функције које се зову након одговора података из друге функције.

На пример, када је наш јКуери.пост () Функција успјешно снима е-поруку која ће позвати властиту интерну функцију за приказ клизне анимације. Сав тај код би могао бити написан у свом блоку и премештен негде другде. Међутим, због овог туториала много је лакше писати повратни позив као инлине функцију.

Прекидање нашег ПХП-а

Коначна препрека коју треба споменути је логика иза нашег ПХП процесора. Ово је позадински систем који ће заправо бити позвати функцију поште и послати поруку. Сав код који се користи у доле наведеним примерима може се наћи директно на врху нашег главног .пхп датотеку, пре било каквог ХТМЛ излаза.

Постоји и неколико интерних стилова који освежавају страницу. Овде нема ничега новог, тако да нећемо улазити ни у један детаљ. Међутим стилес.цсс Документ је укључен у пројектни код и садржи основне технике ЦСС3.

 
За почетак отворимо ПХП клаузулу и проверимо ако је образац чак и достављен. Тхе ПОШТА променљива “достављени” заправо је скривено поље за унос додато на самом крају нашег обрасца. То је користан начин проверите да ли је корисник нешто послао али не губимо ресурсе сервера.
 
Након тога имамо 3 одвојена ако друго проверу изјаве да бисте видели ако је свако поље за унос попуњено. Нећу овде да укључим сваки део логике јер су сви веома репетитивни у природи. Међутим, да бих вам дао кратак пример, укључио сам доле наведену клаузулу за верификацију е-поште:
 
// потребна валидна е-пошта ако (трим ($ _ ПОСТ ['емаил']) === ") $ емаилЕррор = 'Заборавили сте да унесете вашу е-маил адресу.'; $ хасЕррор = труе; елсе иф (! прег_матцх) ("/([[ал ::::...] у-0-9_.-**@[а-з0-9.-табс/\т _ПОСТ ['емаил']))) $ емаилЕррор = 'Унели сте неисправну емаил адресу.'; $ ХасЕррор = труе; елсе $ емаил = трим ($ _ ПОСТ ['емаил']); 
 
ПХП ће одрезати све размаке од вредности и проверити да ли је нешто остало. Ако је тако, имамо детаљно Регуларни израз (Регек) да видимо да ли се улазни низ нашег корисника подудара са обрасцем е-поште.
 
Сигурно не морате да разумете како прег_матцх () ради на изради ове скрипте. То је корисна функција одредити правила и захтјеве за успјешан тип података, али командује напредним програмским знањем да заиста схвати. У овом сценарију осигуравамо да корисник унесе само неколико знакова, укључујући и @ симбол након којег следи 2-4 карактера представља а Домена највишег нивоа.
 
После свих наших логичких пропуста и не враћамо се никаквих грешака време је да пошаљете нашу поруку! Овај бит кода ће поставити појединачне варијабле како би прилагодили нашу е-маил поруку и подесили неке заглавља поште за процес.
 
// при грешкама без грешке пошаљи емаил одмах! иф (! иссет ($ хасЕррор)) $ емаилТо = 'иоуремаилхере@гооглемаил.цом'; $ субјецт = 'Послата порука од'. $ наме; $ сендЦопи = трим ($ _ ПОСТ ['сендЦопи']); $ боди = "Име: $ наме \ _ нЕмаил: $ емаил \ т $ хеадерс = 'Фром:'. ' <'.$emailTo.'>'. р \ т 'Одговарати на: ' . $ емаил; маил ($ емаилТо, $ субјецт, $ боди, $ хеадерс); // подесимо боолеан завршну вредност на ТРУЕ $ емаилСент = труе;  
 
Ако сте се питали како ће код одредити вашу е-маил адресу, ово је дио који треба попунити. $ емаилТо и треба да садржи оно што год е-маил адресу, која ће примити поруку.
 
Инсиде оур $ боди променљиву коју користимо н делимитер за додавање нових линија у поруку. Ово додаје мале просторе за Име пошиљаоца, адреса Е-поште, праћена паузом садржај поруке. Наравно да бисте могли да проводите време на екрану, али ова структура функционише сасвим добро.
 
Закључак
 
Овим се затвара наш водич за напредни образац за контакт. Ако желите да стилизујете своје елементе у односу на моје, проверите мој пример стилес.цсс унутар шифре пројекта. Међутим, страница је довољно добро структурирана да можете сами дизајнирати свој изглед и осјећај.
 
Слободно преузмите изворни код и испитајте што сам учинио ближе. Добро је пратити уџбеник, али имати директан приступ извору пројекта може бити непроцјењив. Такође сам укључио кратку табелу стилова како би прилагодбе биле лагане, хвала на вашем погледу!