നിങ്ങൾ എന്താണ് സൃഷ്ടിക്കുന്നത്

ഈ ട്യൂട്ടോറിയലിൽ, AJAX, PHP എന്നിവയുമായി സംയോജിപ്പിച്ച് ഏറ്റവും ജനപ്രിയമായ ഫ്രണ്ട്-എൻഡ് ഫ്രെയിംവർക്കായ ബൂട്ട്‌സ്‌ട്രാപ്പ് ഉപയോഗിച്ച് ഒരു വർക്കിംഗ് കോൺടാക്റ്റ് ഫോം എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് ഘട്ടം ഘട്ടമായി ഞാൻ നിങ്ങളെ അറിയിക്കാൻ പോകുന്നു. animate.css സ്റ്റൈൽ ഷീറ്റ് ഉപയോഗിച്ചുള്ള ചില ഫാൻസി CSS ആനിമേഷനുകൾ, Javascript വഴിയുള്ള പോസ്റ്റ്-വാലിഡേഷൻ, അസിൻക്രണസ് ഉള്ളടക്കം ഉപയോഗിച്ച് മൊത്തത്തിലുള്ള അന്തിമ ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തൽ എന്നിവ പോലുള്ള ചില വിപുലമായ ഫീച്ചറുകളും ഞങ്ങൾ ഇവിടെ പരിശോധിക്കും.

എഴുതുമ്പോൾ, ചട്ടക്കൂടിന്റെ ഏറ്റവും പുതിയ പതിപ്പ് ബൂട്ട്‌സ്‌ട്രാപ്പ് 3.3.5 ആയിരുന്നു, ഈ നിർദ്ദേശം ഒരു സാധാരണ പന്ത്രണ്ട് നിര ബിൽഡ് ഉപയോഗിക്കുമെന്നത് ശ്രദ്ധിക്കേണ്ടതാണ്. നിങ്ങൾ ഈ ഗൈഡിലൂടെ വായിക്കുമ്പോൾ, ബൂട്ട്‌സ്‌ട്രാപ്പ് ഡോക്യുമെന്റേഷനിൽ കാണിച്ചിരിക്കുന്നതുപോലെ ഏറ്റവും പുതിയ സ്‌നിപ്പെറ്റുകളും കോഡിന്റെ ഭാഗങ്ങളും നിങ്ങൾ ഉപയോഗിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.

ഏകദേശ ഫയലും ഫോൾഡർ ഘടനയും

ഒന്നാമതായി, ഞങ്ങൾ ഒരു റൂട്ട് ഡയറക്ടറി സൃഷ്ടിക്കുകയും അതിൽ ഇനിപ്പറയുന്ന ഫയലുകളും ഫോൾഡറുകളും സ്ഥാപിക്കുകയും ചെയ്യുന്നു:

ബൂട്ട്സ്ട്രാപ്പ്-ഫോം: ├── css/ ├── ഇമേജുകൾ/ ├── js/ ├── scripts.js ├── php/ ├── process.php/ ├── process.php.

ഞങ്ങളെ സഹായിക്കുന്ന നിരവധി ഫ്രണ്ട്-എൻഡ് ലൈബ്രറികൾ ചേർക്കേണ്ടതുണ്ട്, അതിനാൽ ലജ്ജിക്കാതെ ഡൗൺലോഡ് ചെയ്യുക (അല്ലെങ്കിൽ അവയിൽ ഇനിപ്പറയുന്നവയിലേക്ക് ബാഹ്യ ലിങ്കുകൾ ചേർക്കുക:

ഞങ്ങൾ അവയെ പ്രാദേശിക സംഭരണത്തിലേക്ക് ഡൗൺലോഡ് ചെയ്‌ത് പ്രോജക്‌റ്റ് ഫോൾഡറിൽ ഇട്ടുവെന്ന് കരുതുക, ഞങ്ങളുടെ പ്രോജക്റ്റിന്റെ ഫയൽ ഘടന ഇപ്പോൾ ഇതുപോലെ കാണപ്പെടും:

ബൂട്ട്സ്ട്രാപ്പ്-ഫോം: ├── css/ ├── bootstrap.min.css ├── ഇമേജുകൾ/ ├── js/ ├── scripts.js . js ├── php/ ├── process.php ├── index.html

ഫോം അടിസ്ഥാനകാര്യങ്ങൾ ക്രമീകരിക്കുന്നു

index.html തുറന്ന് ഇനിപ്പറയുന്ന അടിസ്ഥാന HTML ഘടന പകർത്തുക:

ബൂട്ട്‌സ്‌ട്രാപ്പ് 3.3.4 ഉപയോഗിച്ചുള്ള ഫോമുമായി ബന്ധപ്പെടുക " എനിക്കൊരു സന്ദേശം അയയ്‌ക്കുക

ഇത് ഞങ്ങളുടെ അടിസ്ഥാന HTML ടെംപ്ലേറ്റാണ്, അതിൽ നിന്നാണ് ഞങ്ങൾ ഫോം ഉള്ളടക്കം സൃഷ്ടിക്കുന്നത്. ആവശ്യമായ എല്ലാ CSS, JavaScript ഫയലുകളും ഞങ്ങൾ ബണ്ടിൽ ചെയ്‌തിരിക്കുന്നതായി നിങ്ങൾക്ക് കാണാൻ കഴിയും (ഈ പ്രത്യേക ഉദാഹരണത്തിനായി ഞങ്ങൾക്ക് bootstrap.js ആവശ്യമില്ലെന്ന് ശ്രദ്ധിക്കുക). ബൂട്ട്‌സ്‌ട്രാപ്പിലെ മീഡിയ ചോദ്യങ്ങളുമായി പ്രവർത്തിക്കുന്നത് എളുപ്പമാക്കുന്നതിന് ഞങ്ങൾ ഇത് ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഫോമിന്റെ പ്രധാന ഭാഗം ആദ്യം ലോഡ് ചെയ്യുന്നതിനായി ഫയലിന്റെ ചുവടെ JavaScript എഴുതിയിരിക്കുന്നു.

ബോഡി ടാഗിനുള്ളിൽ ഞങ്ങൾ col-sm-6 col-sm-offset-3 എന്ന ക്ലാസുള്ള ഒരു div ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. ഇത് അടിസ്ഥാനപരമായി അർത്ഥമാക്കുന്നത് ചെറിയ sm (ചെറിയ) സ്ക്രീനുകളിൽ 50% വീതിയുള്ള കോളം (പരമാവധി 12 നിരകൾ) പ്രദർശിപ്പിക്കാൻ ഞങ്ങൾ ആഗ്രഹിക്കുന്നു എന്നാണ്. col-sm-offset-3 ക്ലാസ് 25% ഇടത് മാർജിൻ ചേർക്കുന്നു, അങ്ങനെ ലഭ്യമായ സ്‌ക്രീനിന്റെ പകുതിയോളം എടുക്കുകയും മധ്യഭാഗത്ത് വിന്യസിക്കുകയും ചെയ്യുന്ന ഒരു ലേഔട്ട് സൃഷ്‌ടിക്കുന്നു. ഇവിടെ ഞങ്ങൾ ഒരു h3 ടാഗ് ചേർത്തു, അതാണ് ഞങ്ങളുടെ ഫോമിന്റെ അടിത്തറയുടെ തുടക്കം. ഈ ഫോമിൽ നിങ്ങൾ ഐഡി പ്രയോഗിക്കുന്നുവെന്ന് ഉറപ്പാക്കുക, അതുവഴി ഞങ്ങൾക്ക് jQuery ഇവന്റ് പിന്നീട് ബൈൻഡ് ചെയ്യാം.

റിസ്ക് എടുക്കാത്തവൻ ഷാംപെയ്ൻ കുടിക്കില്ല

ഫോം ഘടകങ്ങൾ സൃഷ്ടിക്കുമ്പോൾ, നമുക്ക് ഇനിപ്പറയുന്ന കോഡ് ടാഗുകളിൽ പകർത്തുകയോ ഒട്ടിക്കുകയോ എഴുതുകയോ ചെയ്യാം:

പേര് ഇമെയിൽ സന്ദേശം സമർപ്പിക്കുക സന്ദേശം സമർപ്പിച്ചു!

ഈ എല്ലാ ഫീൽഡുകളുമായും ബട്ടണുകളുമായും ഉപയോക്താവ് സംവദിക്കും. ഒരു പാരന്റ് ഡിവി ക്ലാസ് വരി നൽകി - ക്ലാസിക് ബൂട്ട്സ്ട്രാപ്പ് വാക്യഘടന, കോൾ ഘടകങ്ങളുടെ ഒരു നിര സൃഷ്ടിക്കുന്നു. ബൂട്ട്‌സ്‌ട്രാപ്പിലെ നിരകൾ അകത്തെ പാഡിംഗോ സ്‌പെയ്‌സിംഗോ സൃഷ്‌ടിക്കുന്നു - അവയ്‌ക്ക് ചുറ്റും ഒരു ലൈൻ ചേർക്കുന്നത് ഇടത്, വലത് പാഡിംഗ് നീക്കം ചെയ്യും, കൂടാതെ നിരകൾ പ്രധാന കണ്ടെയ്‌നറിലേക്ക് നന്നായി യോജിക്കും.

col-sm-6 (50%) എന്ന ക്ലാസ് ഉപയോഗിച്ച് ഞങ്ങൾ രണ്ട് കോളങ്ങൾ സൃഷ്ടിച്ചു, അത് ഞങ്ങളുടെ ഫോം വേർതിരിക്കുന്നതിന് ഞങ്ങൾ ഉപയോഗിക്കും. ആദ്യ കോളത്തിൽ col-sm-6 നാമത്തിനായി ഞങ്ങൾ ഒരു ലേബലും ഫീൽഡും സൃഷ്ടിച്ചു, രണ്ടാമത്തെ കോളത്തിൽ ഇമെയിലിനായി ഒരു ഫീൽഡ്. അവയിൽ ഓരോന്നിനും അനുബന്ധ ഫീൽഡിനെ പരാമർശിക്കുന്ന ആട്രിബ്യൂട്ടിന് അനുയോജ്യമായ ഒരു ലേബൽ ഉൾപ്പെടുന്നു. ഈ നിരകൾ ഓരോന്നും ഒരു ഫോം-ഗ്രൂപ്പ് ക്ലാസിൽ പൊതിഞ്ഞിരിക്കുന്നു, അത് അർത്ഥപരമായി ലേബലും ഫീൽഡും ഒരുമിച്ച് ഗ്രൂപ്പുചെയ്യുകയും ചുവടെ ഒരു ചെറിയ മാർജിൻ ചേർക്കുകയും ചെയ്യുന്നു.

ടൈപ്പോഗ്രാഫി

H1-H6 ഹെഡർ ക്ലാസുകൾ ഉപയോഗിക്കാൻ ബൂട്ട്സ്ട്രാപ്പ് നിങ്ങളെ അനുവദിക്കുന്നു. അധിക പാഡിംഗ് ചേർക്കാതെയോ ബ്ലോക്ക് ഘടകങ്ങൾ സൃഷ്ടിക്കാതെയോ ഇൻലൈൻ ഘടകങ്ങൾ ഉപയോഗിക്കാൻ ഈ ക്ലാസുകൾ ഞങ്ങളെ സഹായിക്കുന്നു. ഞങ്ങൾ ലേബലുകളിൽ H4 ക്ലാസ് പ്രയോഗിച്ചു, അവയുടെ വലുപ്പം വേഗത്തിൽ വർദ്ധിപ്പിക്കുകയും അവയെ കൂടുതൽ വ്യക്തമാക്കുകയും ചെയ്തു.

ഓരോ ഇൻപുട്ട് ഫീൽഡിലും പ്രയോഗിക്കുന്ന ഫോം-കൺട്രോൾ ക്ലാസ് അതിനെ കണ്ടെയ്നറിന്റെ മുഴുവൻ നീളത്തിലും (100%) വ്യാപിപ്പിക്കാൻ അനുവദിക്കുന്നു. വാചകത്തിന്റെ വായനാക്ഷമത മെച്ചപ്പെടുത്തുന്നതിന് ഇത് വിവിധ ശൈലികൾ ചേർക്കുന്നു (ടെക്‌സ്റ്റിന്റെ ഉയരം കൂട്ടൽ, ബോർഡർ ചേർക്കൽ മുതലായവ).

ഈ നിരകൾക്ക് ശേഷം ഞങ്ങൾ ഒരു സന്ദേശ ടെക്സ്റ്റ് ഫീൽഡ് ചേർക്കുന്നു. വീണ്ടും, ഞങ്ങൾ ഇത് ഒരു ഫോം-ഗ്രൂപ്പ് ക്ലാസിനുള്ളിൽ പൊതിഞ്ഞ് ഞങ്ങളുടെ ലേബലിലും ടെക്സ്റ്റ് ഫീൽഡിലും ഞങ്ങൾ മുമ്പ് ചെയ്തതുപോലെ സമാനമായ ശൈലികൾ പ്രയോഗിക്കുന്നു.

പ്രതികരണത്തിനായി വിളിക്കുക

അവസാനമായി, ഞങ്ങൾ ഒരു ബട്ടൺ ചേർക്കുന്നു. ബൂട്ട്‌സ്‌ട്രാപ്പിൽ വ്യത്യസ്ത നിറങ്ങളും അവസ്ഥകളുമുള്ള വ്യത്യസ്ത ബട്ടണുകൾക്കായി നിരവധി ക്ലാസുകളുണ്ട്. സ്ഥിരസ്ഥിതിയായി പച്ചയായ "വിജയം" ബട്ടൺ (btn-success) ഉപയോഗിക്കാൻ ഞങ്ങൾ തീരുമാനിച്ചു. കൂടാതെ, സ്ഥിരസ്ഥിതി ബട്ടൺ ശൈലികൾ (ബോർഡർ, പാഡിംഗ്, ടെക്സ്റ്റ് അലൈൻമെന്റ്, ഫോണ്ട് വെയ്റ്റ്) പുനഃസജ്ജമാക്കാൻ ഞങ്ങൾ ഒരു btn ക്ലാസ് ചേർക്കേണ്ടതുണ്ട്. ഞങ്ങൾ ബട്ടണിനെ വലുതാക്കുന്ന btn-lg ക്ലാസും ഒടുവിൽ ബട്ടൺ വലതുവശത്തേക്ക് വിന്യസിക്കാൻ പുൾ-റൈറ്റ് ക്ലാസും ഉപയോഗിച്ചു.

ഞങ്ങളുടെ ബട്ടണിന് ശേഷം ഞങ്ങൾ ID #msgSubmit ഉള്ള ഒരു ഡിവി ചേർക്കുകയും ഇനിപ്പറയുന്ന ക്ലാസുകൾ പ്രയോഗിക്കുകയും ചെയ്തു: " h3 ടെക്സ്റ്റ്-സെന്റർ മറച്ചിരിക്കുന്നു ". h3 ഒരു വലിയ തലക്കെട്ട് സൃഷ്‌ടിക്കുന്നു, ടെക്‌സ്‌റ്റ്-സെന്റർ (നിങ്ങൾ അത് ഊഹിച്ചിരിക്കുന്നു) ടെക്‌സ്‌റ്റ് സെന്റർ വിന്യസിക്കുന്നു, ഒടുവിൽ ഞങ്ങൾ ഒരു മറഞ്ഞിരിക്കുന്ന ക്ലാസ് സജ്ജീകരിക്കുന്നു, അത് ഡിസ്‌പ്ലേ പ്രോപ്പർട്ടി ഒന്നും അല്ലാത്തതും ദൃശ്യപരത പ്രോപ്പർട്ടി മറച്ചതും (ഡിസ്‌പ്ലേ: ഒന്നുമില്ല; ദൃശ്യപരത: മറച്ചിരിക്കുന്നു) ;).

ഒരു അയയ്ക്കൽ പ്രവർത്തനം ചേർക്കുന്നു

നിങ്ങളുടെ ബ്രൗസറിൽ കാണാനാകുന്നതുപോലെ, ഞങ്ങൾ ഒരു ബൂട്ട്‌സ്‌ട്രാപ്പ് ഫോം ബേസ് സൃഷ്‌ടിച്ചു. എന്നാൽ ഇതുവരെ അവൾ ഒന്നും ചെയ്യുന്നില്ല. അടുത്ത ഘട്ടം ഉപയോക്തൃ ഇൻപുട്ട് എടുക്കുകയും ഞങ്ങളുടെ PHP മെയിലർ ക്ലാസിലേക്ക് അസമന്വിതമായി അയയ്ക്കുകയും ചെയ്യുന്ന ഒരു ഫംഗ്ഷൻ സൃഷ്ടിക്കുക എന്നതാണ്.

scripts.js തുറന്ന് ഇനിപ്പറയുന്ന കോഡ് പകർത്തുക:

$("#contactForm").submit(function(event)( // ഫോം സമർപ്പിക്കൽ ഇവന്റ് റദ്ദാക്കുന്നു.preventDefault(); submitForm(); ));

ഈ കോഡ് ഒരു jQuery സ്‌നിപ്പറ്റാണ്, അത് ഞങ്ങളുടെ #contactForm ഐഡിയിൽ (നേരത്തെ നിർവചിച്ചതുപോലെ) ഒരു സമർപ്പിക്കൽ ഫംഗ്‌ഷൻ സ്വീകരിക്കുന്നു. ഈ ഫംഗ്‌ഷൻ ഉപയോഗിച്ച്, ഫംഗ്‌ഷനിലേക്ക് ഫോം സമർപ്പിക്കുന്നതിന്റെ പ്രവർത്തനം സംഭരിക്കുന്ന ഇവന്റ് വേരിയബിൾ ഞങ്ങൾ പാഴ്‌സ് ചെയ്യുന്നു. Event event.preventDefault(); ഫോം പ്രവർത്തനം സജ്ജീകരിക്കാത്തതിനാൽ, പേജ് പുതുക്കുന്നതിന് സാധാരണ പോലെ ഫോം ഡാറ്റ സമർപ്പിക്കുന്നത് നിർത്തുന്നു. അവസാനമായി, submitForm() ഫംഗ്‌ഷനെ വിളിക്കുന്നു; .

submitForm();

അടുത്തതായി ഞങ്ങൾ ഒരു ഫംഗ്ഷൻ സൃഷ്ടിക്കും submitForm(); :

ഫംഗ്ഷൻ submitForm())( // ഫോം ഉള്ളടക്കം ഉപയോഗിച്ച് വേരിയബിളുകൾ ആരംഭിക്കുക var പേര് = $("#name").val(); var ഇമെയിൽ = $("#email").val(); var സന്ദേശം = $("# സന്ദേശം ").val(); $.ajax((തരം: "POST", url: "php/form-process.php", ഡാറ്റ: "name=" + name + "&email=" + email + "&message= " + സന്ദേശം, വിജയം: ഫംഗ്‌ഷൻ(ടെക്‌സ്‌റ്റ്)( എങ്കിൽ (ടെക്‌സ്റ്റ് == "വിജയം")(ഫോംസക്‌സസ്(); );)

മൂന്ന് വേരിയബിളുകൾ എല്ലാ ഫോം ഇൻപുട്ടുകളുടെയും മൂല്യങ്ങൾ കൈവശം വയ്ക്കുകയും പിന്നീട് ഉപയോഗിക്കപ്പെടുന്ന ഒരു ജാവാസ്ക്രിപ്റ്റ് വേരിയബിളിലേക്ക് അസൈൻ ചെയ്യുകയും ചെയ്യുന്നു.

ഞങ്ങൾ jQuery-യിൽ AJAX ഒബ്‌ജക്റ്റ് സമാരംഭിക്കുകയും പോസ്റ്റുചെയ്യാൻ അഭ്യർത്ഥന തരം സജ്ജീകരിക്കുകയും ചെയ്യുന്നു, URL എന്നത് PHP ഫയലിലേക്കുള്ള ഒരു ലിങ്കാണ്, ഞങ്ങൾ അയയ്‌ക്കാൻ ആഗ്രഹിക്കുന്ന ഡാറ്റ, വിജയകരമായി പ്രോസസ്സ് ചെയ്‌താൽ, വിജയകരമായ പ്രവർത്തനം പ്രവർത്തനക്ഷമമാകും. ബന്ധപ്പെട്ട ഐഡി/ലേബലുമായി സംയോജിപ്പിച്ചിരിക്കുന്ന മൂന്ന് വേരിയബിളുകളും ഡാറ്റയിൽ ഉൾപ്പെടുന്നു. അജാക്സ് ഒബ്ജക്റ്റിന് PHP സ്ക്രിപ്റ്റിൽ നിന്ന് വിവരങ്ങൾ ലഭിക്കുമ്പോൾ കോൾബാക്ക് ഫംഗ്ഷനെ വിളിക്കുന്നു. ഫംഗ്ഷൻ മടങ്ങിയ വാചകം താരതമ്യം ചെയ്യുകയും അത് "വിജയം" എന്ന സ്ട്രിംഗിന് തുല്യമാണോ എന്ന് പരിശോധിക്കുകയും ചെയ്യുന്നു. എല്ലാം ശരിയാണെങ്കിൽ, formSuccess ഫംഗ്‌ഷൻ പ്രവർത്തിക്കുന്നു.

formSuccess ഫംഗ്‌ഷൻ, ഞങ്ങൾ മുമ്പ് പ്രയോഗിച്ച #msgSubmit എന്ന ഐഡി ഉപയോഗിച്ച് div-ൽ നിന്ന് മറഞ്ഞിരിക്കുന്ന ക്ലാസ് നീക്കം ചെയ്യുന്നു, അതുവഴി ടെക്‌സ്‌റ്റ് വെളിപ്പെടുത്തുന്നു.

PHP മെയിൽ ഫംഗ്‌ഷൻ ബന്ധിപ്പിക്കുന്നു

ബിൽറ്റ്-ഇൻ PHP മെയിൽ ഫംഗ്‌ഷൻ ഉപയോഗിച്ച് ഡാറ്റ സ്വീകരിക്കുന്നതിനും ഞങ്ങളുടെ വിവരങ്ങൾ അയയ്‌ക്കുന്നതിനും ഒരു PHP സ്‌ക്രിപ്റ്റ് എഴുതുക മാത്രമാണ് നമ്മൾ ചെയ്യേണ്ടത്. process.php തുറന്ന് ഇനിപ്പറയുന്ന കോഡ് ചേർക്കുക:

മുകളിലുള്ള jQuery കോഡ് സ്‌നിപ്പെറ്റിന് സമാനമായി, ഞങ്ങൾ ഉപയോഗിക്കാൻ ആഗ്രഹിക്കുന്ന വേരിയബിളുകൾ ഞങ്ങൾ സൃഷ്‌ടിക്കുകയും സംഭരിക്കുകയും ചെയ്യുന്നു. പോസ്റ്റ് ഫംഗ്ഷനിൽ നിന്ന് നമുക്ക് മൂന്ന് ഇൻപുട്ട് വേരിയബിളുകൾ ലഭിക്കുകയും അവയുടെ മൂല്യങ്ങൾ ഒരേ PHP വേരിയബിളുകളിലേക്ക് എഴുതുകയും ചെയ്യുന്നു. $EmailTo വേരിയബിൾ എന്നത് സ്ക്രിപ്റ്റിൽ വ്യക്തമാക്കിയിട്ടുള്ളതും ഫോമിൽ നിന്ന് നിങ്ങളുടെ ഇമെയിലിലേക്ക് അയച്ചതുമായ ഒരു മുൻനിശ്ചയിച്ച ഇമെയിൽ വിലാസമാണ്. ഇമെയിലിന്റെ വിഷയമായി ഉപയോഗിക്കുന്ന ഒരു സ്ട്രിംഗ് ആണ് $Subject.

മൂന്ന് വേരിയബിളുകളിൽ നിന്നാണ് പ്രധാന സന്ദേശം സൃഷ്ടിച്ചിരിക്കുന്നത്. ആദ്യം, "Name:" എന്ന സന്ദേശം ആരുടേതാണെന്ന് സൂചിപ്പിക്കുക, തുടർന്ന് പുതിയ ലൈൻ പ്രതീകം ചേർക്കുക. (പുതിയ ലൈൻ/ലൈൻ ബ്രേക്ക്). ഇത് $ബോഡി വേരിയബിളുമായി ആവർത്തിച്ച് സംയോജിപ്പിച്ചിരിക്കുന്നു.

അവസാനം ഒരു സന്ദേശം അയയ്‌ക്കുന്നതിന്, ഒരു സന്ദേശം അയയ്‌ക്കാൻ ഞങ്ങൾ ഒരു ഫംഗ്‌ഷൻ എഴുതുന്നു. $success വേരിയബിളിൽ ഞങ്ങൾ അയച്ചതിന്റെ ഫലം നൽകുന്നു, അതിൽ ഉൾപ്പെടുന്നു: സ്വീകർത്താവ്, വിഷയം, ബോഡി ടെക്‌സ്‌റ്റ്, അയച്ചയാൾ.

ഇമെയിൽ അയയ്‌ക്കൽ പ്രക്രിയ ആരംഭിക്കുന്നതിന്, നമുക്ക് അതിനെ if സ്റ്റേറ്റ്‌മെന്റിൽ വിളിക്കാം. എല്ലാം വിജയകരമാണോ അല്ലയോ എന്ന് പരിശോധിക്കാനും ഇത് സഹായിക്കുന്നു. മെയിൽ ഫംഗ്‌ഷൻ “ശരി” എന്ന മൂല്യം നൽകിയാൽ, സ്‌ക്രിപ്റ്റ് “വിജയം” എന്ന മൂല്യം നൽകും, തെറ്റാണെങ്കിൽ “അസാധുവാണ്”.

ഈ ഫലം ഒരു AJAX ഒബ്‌ജക്റ്റിലേക്ക് തിരികെ നൽകുകയും ക്ലയന്റ് വശത്ത് പ്രോസസ്സ് ചെയ്യുകയും ചെയ്യും. AJAX-ന്റെ ഭംഗി, എല്ലാം ക്ലയന്റ് ഭാഗത്ത് അസമന്വിതമായി സംഭവിക്കുന്നു, സന്ദേശം അയയ്‌ക്കുമ്പോൾ സൈറ്റ് ഉപയോഗിക്കാൻ ക്ലയന്റിനെ അനുവദിക്കുന്നു.

തികഞ്ഞ ക്രമം

ഈ ട്യൂട്ടോറിയലിന്റെ ആദ്യ പകുതിയിൽ ഞങ്ങളുടെ ഫോമിന്റെ അടിസ്ഥാന ഘടനയും പ്രവർത്തനവും ഉൾപ്പെടുത്തിയ ശേഷം, നമുക്ക് ചേർക്കാനാകുന്ന വിവിധ അധിക ഫീച്ചറുകൾ ഉപയോഗിച്ച് ഉപയോക്തൃ ഫീഡ്‌ബാക്ക് എങ്ങനെ നൽകാമെന്ന് ഞങ്ങൾ ഇപ്പോൾ സംസാരിക്കും. പ്രത്യേകിച്ചും, ക്ലയന്റ് വശത്തും സെർവർ വശത്തും പിശക് കൈകാര്യം ചെയ്യുന്നതിലൂടെ ഞങ്ങൾ ഫീഡ്‌ബാക്ക് ഫോം നോക്കും.

ഒരിക്കൽ കൂടി, ഫോം സാധൂകരിക്കാൻ ഞങ്ങൾ ചില ടൂളുകൾ ഉപയോഗിക്കും. ഇതിൽ ഉൾപ്പെടുന്നവ:

ബൂട്ട്‌സ്‌ട്രാപ്പിലും jQueryയിലും ഞങ്ങൾ മുമ്പ് ചെയ്തതുപോലെ, അവരെയും പ്രോജക്‌റ്റിലേക്ക് ചേർക്കുക. ഒരു ഫോം സമർപ്പിക്കുമ്പോൾ ഉപയോക്തൃ ഫീഡ്‌ബാക്ക് നൽകാൻ ഈ ടൂളുകൾ സഹായിക്കും. ഫോം മൂല്യനിർണ്ണയത്തിനായി (ബിൽറ്റ്-ഇൻ HTML5 വാലിഡേറ്റർ ഉൾപ്പെടെ) നിരവധി ഉപകരണങ്ങളും ചട്ടക്കൂടുകളും ഉണ്ട്, എന്നാൽ ഞങ്ങളുടെ നിലവിലെ ഫോമുമായി നന്നായി സംയോജിപ്പിക്കുന്നതിനാൽ ഞാൻ ബൂട്ട്‌സ്‌ട്രാപ്പ് വാലിഡേറ്റർ ഉപയോഗിച്ചു.

പ്രോജക്റ്റ് ഘടന ഇപ്പോൾ ഇതുപോലെയായിരിക്കണം:

ബൂട്ട്‌സ്‌ട്രാപ്പ്-ഫോം: ├── css/ ├── bootstrap.min.css ├── animate.css ├── images/ ├── js/ ├── js ── j അന്വേഷണം - 1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html

ഞങ്ങളുടെ ഫോം പരിശോധിക്കുന്നു

ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ ഫോം സാധൂകരിക്കാൻ ഒരു വാലിഡേറ്റർ സൃഷ്ടിച്ചുകൊണ്ട് നമുക്ക് ആരംഭിക്കാം. തിരികെ scripts.js ഫയലിൽ, ഫോം സമർപ്പിക്കുമ്പോൾ submitForm() ഫംഗ്‌ഷനെ വിളിക്കുന്ന ആദ്യ കോഡ് നമുക്ക് എഡിറ്റ് ചെയ്യേണ്ടതുണ്ട്.

ഇപ്പോൾ കോഡ് ഇതുപോലെ കാണപ്പെടുന്നു:

$("#contactForm").validator().on("submit", function (event) ((event.isDefaultPrevented()) ( // അസാധുവായ ഫോം കൈകാര്യം ചെയ്യുക... ) അല്ലെങ്കിൽ ( // എല്ലാം നന്നായി തോന്നുന്നു! Event.preventDefault(); submitForm(); ) );

ഈ പുതിയ കോഡ് ബൂട്ട്‌സ്‌ട്രാപ്പ് വാലിഡേറ്റർ എന്തെങ്കിലും പിശകുകൾ കണ്ടെത്തി പ്രക്രിയ നിർത്തിയിട്ടുണ്ടോ എന്ന് പരിശോധിക്കുന്നു. ഇല്ലെങ്കിൽ, ഞങ്ങൾ തുടരും. ഫോം വിജയകരമായി സമർപ്പിക്കുമ്പോൾ ഞങ്ങൾക്ക് സ്ഥിരമായ പ്രവർത്തനം (പേജ് പുതുക്കൽ) തടയേണ്ടതുണ്ട്, അതിനാൽ ഞങ്ങൾ അത് സംരക്ഷിക്കും.

ഇപ്പോൾ, നിങ്ങൾ ഫോമിന്റെ സമർപ്പിക്കൽ ബട്ടണിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, അത് പൂർണ്ണമായി പൂരിപ്പിച്ചിട്ടില്ലെങ്കിൽ, ഫോം ശരിയാണോയെന്ന് പരിശോധിക്കുകയും ഫീൽഡുകൾ ചുവപ്പ് നിറത്തിൽ ഹൈലൈറ്റ് ചെയ്യുകയും ചെയ്യും, എന്താണ് നൽകേണ്ടതെന്ന് സൂചിപ്പിക്കുന്നത്, ഇത് എളുപ്പമാണ്!

ഈ ചെക്ക് ചേർക്കുന്ന പ്രക്രിയയിൽ, ഞങ്ങൾ നേറ്റീവ് HTML5 ചെക്ക് നീക്കം ചെയ്യുകയോ പ്രവർത്തനരഹിതമാക്കുകയോ ചെയ്തു. പിശക് സന്ദേശങ്ങൾ ഉൾപ്പെടുത്തി ഞങ്ങളുടെ മൂല്യനിർണ്ണയം മെച്ചപ്പെടുത്താം. ബൂട്ട്‌സ്‌ട്രാപ്പ് വാലിഡേറ്ററിന് ഒരു മികച്ച സവിശേഷതയുണ്ട്, അത് ഓരോ ഇൻപുട്ട് ഫീൽഡിനും അടുത്തായി പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുന്നത് വളരെ എളുപ്പമാക്കുന്നു. ഇത് ചേർക്കുന്നതിന്, നിങ്ങൾ അധിക HTML കോഡ് എഴുതേണ്ടതുണ്ട്.

ഓരോ ഫോം-ഗ്രൂപ്പിലും, ഇൻപുട്ട് ഫീൽഡുകൾക്ക് കീഴിൽ, നിങ്ങൾ ഇനിപ്പറയുന്ന html കോഡ് നൽകണം:

ഉദാഹരണത്തിന്, പേര്, ഇ-മെയിൽ ഫീൽഡുകളിലേക്ക് ചേർത്ത ഒരു അധിക ഡിവി ഇതാ:

പേര് ഇമെയിൽ

ഇപ്പോൾ, ഫോം വീണ്ടും സമർപ്പിക്കുമ്പോൾ, ഫീൽഡുകൾ ശൂന്യമാണെങ്കിൽ, സ്ഥിരസ്ഥിതിയായി ഒരു പിശക് സന്ദേശം ദൃശ്യമാകും "ദയവായി ഈ ഫീൽഡ് പൂരിപ്പിക്കുക.". ഒരു ഇൻപുട്ട് ഫീൽഡിലേക്ക് ഒരു "ഡാറ്റ-പിശക്" ആട്രിബ്യൂട്ട് ചേർക്കുന്നതിലൂടെ, നിങ്ങൾക്ക് ഒരു ഇഷ്‌ടാനുസൃത പിശക് സന്ദേശം ചേർക്കാൻ കഴിയും. ഉദാഹരണത്തിന്:

ബൂട്ട്‌സ്‌ട്രാപ്പ് വാലിഡേറ്ററിൽ പ്രയോഗിക്കാൻ കഴിയുന്ന പതിവ് എക്‌സ്‌പ്രഷൻ പാറ്റേണുകൾ പോലുള്ള മറ്റ് നിരവധി സവിശേഷതകൾ ഉണ്ട്. നിങ്ങൾക്ക് Github-ൽ കൂടുതൽ കാണാൻ കഴിയും.

ആനിമേഷൻ ചേർക്കുന്നു

ഞങ്ങളുടെ ക്ലയന്റ് മൂല്യനിർണ്ണയം വളരെ മികച്ചതായി തോന്നുന്നു; ചുവന്ന നിറത്തിലുള്ള ശൂന്യമായ ഫീൽഡുകളുടെ ഹൈലൈറ്റ് ഞങ്ങളുടെ പക്കലുണ്ട്. എന്നിരുന്നാലും, എന്താണ് സംഭവിക്കുന്നതെന്ന് ഉപയോക്താവിനെ അറിയിക്കുന്നതിന് ഫോമിലേക്ക് കൂടുതൽ ആനിമേഷനുകൾ ചേർക്കുകയും കൂടുതൽ സന്ദേശങ്ങൾ ചേർക്കുകയും ചെയ്യുന്നത് നന്നായിരിക്കും. ഞങ്ങൾക്ക് നിലവിൽ ഒരു സന്ദേശമുണ്ട് "സന്ദേശം സമർപ്പിച്ചു!",വിജയകരമായ സമർപ്പണത്തിൽ ദൃശ്യമാകുന്നത്, എന്നാൽ പിശക് സന്ദേശത്തിന്റെ കാര്യമോ?

പിശക് സന്ദേശങ്ങൾ സ്വീകരിക്കുന്നതിന് വിജയ സന്ദേശം മാറ്റിക്കൊണ്ട് ഞങ്ങൾ ഞങ്ങളുടെ കോഡ് കൂടുതൽ പൊതുവായതാക്കി മാറ്റും.

ആദ്യം, നമുക്ക് വാചകം നീക്കംചെയ്യാം "സന്ദേശം സമർപ്പിച്ചു!" HTML കോഡിൽ നിന്ന് ഡിവി ബ്ലോക്ക് ശൂന്യമായി വിടുക:

സന്ദേശ നില കൈകാര്യം ചെയ്യുന്നതിന് ഇപ്പോൾ നമുക്ക് ഒരു പുതിയ ഫംഗ്ഷൻ സൃഷ്ടിക്കേണ്ടതുണ്ട്. നിങ്ങളുടെ scripts.js സ്ക്രിപ്റ്റിന്റെ അവസാനം ഈ ഫംഗ്ഷൻ ചേർക്കുക

ഫംഗ്ഷൻ സമർപ്പിക്കുകMSG(സാധുവായ, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada animated text-success"; ) else ( msgClasses = "h3 text-center text-danger"; ) $("# msgSubmit").removeClass().addClass(msgClasses).text(msg); )

ഈ ഫംഗ്‌ഷൻ രണ്ട് ആർഗ്യുമെന്റുകൾ എടുക്കുന്നു. സാധുതയുള്ളത് ഒരു ബൂളിയൻ വേരിയബിളായിരിക്കും: ഇത് ശരിയാണെങ്കിൽ ഒരു വിജയ സന്ദേശം കാണിക്കും, തെറ്റാണെങ്കിൽ ഒരു പിശക് സന്ദേശം കാണിക്കും. msg-ൽ ഒരു ഡിവിയിൽ പ്രദർശിപ്പിക്കാനുള്ള ഒരു സന്ദേശം അടങ്ങിയിരിക്കുന്നു.

ആദ്യം, മൂല്യം സാധുതയുള്ളത് പരിശോധിച്ച് ഫംഗ്ഷൻ വിജയിച്ചോ പരാജയപ്പെടുമോ എന്ന് പരിശോധിക്കുന്നു. ഏത് സാഹചര്യത്തിലും, ആവശ്യമായ CSS ക്ലാസ് പേരുകൾ വേരിയബിളിൽ എഴുതിയിരിക്കുന്നു (നിങ്ങൾ വീണ്ടും h3, ടെക്സ്റ്റ്-സെന്റർ എന്നിവ ഉൾപ്പെടുത്തേണ്ടതുണ്ട്, കാരണം ഞങ്ങൾ അവ സ്ഥിരസ്ഥിതിയായി നീക്കംചെയ്യും).

ശ്രദ്ധിക്കുക: ഞങ്ങൾ ചില animate.css ക്ലാസുകൾ ഉപയോഗിക്കുന്നു. സന്ദേശം വിജയകരമായി അയയ്‌ക്കുമ്പോൾ ടാഡ ക്ലാസ് ഒരു ആനിമേഷൻ പ്രയോഗിക്കും.

അവസാനമായി, ഫംഗ്‌ഷൻ #msgSubmit-ൽ നിന്ന് എല്ലാ ക്ലാസുകളും നീക്കം ചെയ്യുന്നു (വൈരുദ്ധ്യമുള്ള ക്ലാസുകൾ ഒഴിവാക്കുക), തുടർന്ന് മുമ്പ് ഇൻസ്റ്റാൾ ചെയ്ത ക്ലാസുകൾ ചേർക്കുകയും തുടർന്ന് div എലമെന്റിനുള്ളിൽ സന്ദേശ വാചകം ചേർക്കുകയും ചെയ്യുന്നു.

ഈ വിഭാഗത്തിന്റെ തുടക്കത്തിൽ ഞങ്ങൾ അപ്‌ഡേറ്റ് ചെയ്‌ത മൂല്യനിർണ്ണയ ഫോമിൽ, if സ്റ്റേറ്റ്‌മെന്റ് ശരിയാണെങ്കിൽ അതിനുള്ളിൽ ഇനിപ്പറയുന്ന ഫംഗ്‌ഷൻ കോൾ ചേർക്കാൻ കഴിയും.

സബ്മിറ്റ്എംഎസ്ജി(തെറ്റ്, "നിങ്ങൾ ഫോം ശരിയായി പൂരിപ്പിച്ചോ?");

ശൂന്യമായ ഫീൽഡുകളുള്ള ഒരു ഫോം സമർപ്പിക്കുമ്പോൾ ഒരു പിശക് സന്ദേശം ദൃശ്യമാകും "നിങ്ങൾ ഫോം ശരിയായി പൂരിപ്പിച്ചോ?"

ഈ പുതിയ submitMSG ഫംഗ്‌ഷന്റെ അവസാന ഘട്ടം സന്ദേശം വിജയകരമായി സമർപ്പിക്കുമ്പോൾ അതിനെ വിളിക്കുക എന്നതാണ്. formSuccess() ഫംഗ്‌ഷൻ ഇനിപ്പറയുന്ന രീതിയിൽ അപ്‌ഡേറ്റ് ചെയ്യുക:

$("#contactForm").reset(); submitMSG(ശരി, "സന്ദേശം സമർപ്പിച്ചു!")

ആദ്യം, ഫോം ഡാറ്റ പുനഃസജ്ജമാക്കാനും വിജയകരമായ സമർപ്പണത്തിൽ ഫീൽഡ് മൂല്യങ്ങൾ മായ്‌ക്കാനും ഞങ്ങൾ ആഗ്രഹിക്കുന്നു, തുടർന്ന് മുമ്പത്തെപ്പോലെ ഞങ്ങളുടെ submitMSG ഫംഗ്‌ഷനെ വിളിക്കുക. വിജയകരമായ സമർപ്പണം ഇപ്പോൾ animate.css-ൽ നിന്നുള്ള ടാഡ ആനിമേഷൻ ഇഫക്റ്റുള്ള ഒരു സന്ദേശം പ്രദർശിപ്പിക്കും.

കുലുക്കുക

മറ്റൊരു ആനിമേഷൻ, അല്ലേ? ഒരു പിശക് റിപ്പോർട്ട് ചെയ്യുമ്പോൾ മുഴുവൻ ഫോമിനും മറ്റൊരു ആനിമേഷൻ ചേർക്കാം, ആനിമേറ്റുചെയ്‌ത "ജിറ്റർ" ശരിക്കും മികച്ചതായി കാണപ്പെടും!

formSuccess() കഴിഞ്ഞ് ഉടൻ തന്നെ ഒരു പുതിയ ഫംഗ്‌ഷൻ സൃഷ്‌ടിക്കുകയും അതിനെ formError() എന്ന് വിളിക്കുകയും ചെയ്യുക

ഫംഗ്ഷൻ ഫോംഎറർ())( $("#കോൺടാക്റ്റ്ഫോം").removeClass().addClass("ഷേക്ക് ആനിമേറ്റഡ്").ഒന്ന്("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function())($(this).removeC); )) ;)

animate.css ഡെമോ പേജിൽ കാണുന്ന സമീപനം ഈ ഫംഗ്‌ഷൻ ഉപയോഗിക്കുന്നു, ഇത് ഒരു ഘടകത്തിലേക്ക് ഒരു ആനിമേഷൻ ചേർക്കാനും തുടർന്ന് വീണ്ടും വീണ്ടും വിളിക്കാനും/ചേർക്കാനും നിങ്ങളെ അനുവദിക്കുന്നു. CSS ആനിമേഷനുകളിൽ ഒരു ചെറിയ പ്രശ്‌നമുണ്ട്: നിങ്ങൾ ഒരു ഘടകത്തിലേക്ക് ഒരു തവണ ആനിമേഷൻ ചേർക്കുകയും തുടർന്ന് ശൈലികൾ നീക്കം ചെയ്യുകയും തുടർന്ന് അവ വീണ്ടും ചേർക്കുകയും ചെയ്താൽ, ആനിമേഷൻ ആവർത്തിക്കില്ല. ആനിമേഷൻ പൂർത്തിയാകുമ്പോൾ ക്ലാസുകൾ പുനഃസജ്ജമാക്കാൻ ഈ സവിശേഷത സഹായിക്കുന്നു, തുടർന്ന് അവ വീണ്ടും ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. പൂർണ്ണമായും പൂരിപ്പിച്ചിട്ടില്ലാത്ത ഒരു ഫോമിലെ "സമർപ്പിക്കുക" ബട്ടൺ ഉപയോക്താവ് ക്ലിക്കുചെയ്യുമ്പോൾ, ആനിമേഷൻ ഇളകിപ്പോകണമെന്ന് ഞങ്ങൾ ആഗ്രഹിക്കുന്നു. പിന്നെ ഫോം ആണെങ്കിൽ നിശ്ചലമായതെറ്റായി പൂരിപ്പിച്ചു, ആനിമേഷൻ വീണ്ടും പ്രവർത്തിക്കേണ്ടതുണ്ട്.

submitMSG() ഫംഗ്‌ഷന്റെ മുകളിലുള്ള ഈ ഫോംഎറർ() ഫംഗ്‌ഷനെ നമുക്ക് വിളിക്കാം. ഉദാ:

FormError(); submitMSG(തെറ്റ്, "നിങ്ങൾ ഫോം ശരിയായി പൂരിപ്പിച്ചോ?");

ഇപ്പോൾ ഞങ്ങൾ ഒരു ശൂന്യമായ ഫോം സമർപ്പിക്കുമ്പോൾ, എന്തോ കുഴപ്പം സംഭവിച്ചതായി ഉപയോക്താവിനെ അറിയിക്കാൻ അത് വിറളിക്കും.

അധിക പരിശോധന

ഈ ക്ലയന്റ് സൈഡ് മൂല്യനിർണ്ണയം എല്ലാം മികച്ചതായി തോന്നുന്നു, എന്നാൽ ഏതൊരു ഉപയോക്താവിനും ഈ അളവുകൾ അപ്രാപ്‌തമാക്കാനും അവരുടെ ബ്രൗസറിലെ കോഡ് എഡിറ്റുചെയ്‌ത് ശൂന്യമായ ഫീൽഡുകൾ ഉപയോഗിച്ച് ഫോം സമർപ്പിക്കാനും കഴിയും. അതിനാൽ കടന്നുപോകുന്ന എന്തും ക്യാപ്‌ചർ ചെയ്യുന്നതിന് സെർവർ സൈഡ് മൂല്യനിർണ്ണയം ചേർക്കുന്നത് മൂല്യവത്താണ്.

ഞങ്ങളുടെ process.php ഫയൽ തുറക്കുക, നമുക്ക് ഇത് കുറച്ച് മാറ്റേണ്ടതുണ്ട്, ശൂന്യമായ ഫീൽഡുകൾക്കായി ഒരു പരിശോധന ചേർക്കുക; അവ ശൂന്യമല്ലെങ്കിൽ, ഞങ്ങൾ സന്ദേശം ഫ്രണ്ട് എൻഡിലേക്ക് തിരികെ അയയ്ക്കുന്നു. പിശകുകൾ രേഖപ്പെടുത്താൻ ഞങ്ങൾ $errorMSG എന്ന ഒരു വേരിയബിൾ സൃഷ്ടിക്കും, തുടർന്ന് ഒരു അധിക $_POST പരിശോധന പ്രവർത്തനക്ഷമമാക്കും.

ഈ PHP കോഡ് അനുബന്ധ വേരിയബിളുകളിലേക്ക് എഴുതുന്നതിന് മുമ്പ് ഫീൽഡുകൾ ശൂന്യമാണോ എന്ന് പരിശോധിക്കുന്നു ($_POST-ൽ നിന്ന് വേരിയബിളുകൾ സജ്ജീകരിച്ച് നിലവിലുള്ള കോഡ് മാറ്റിസ്ഥാപിക്കുന്നു). അവ ശൂന്യമാണെങ്കിൽ, ക്ലയന്റിലേക്ക് തിരികെ അയയ്‌ക്കുന്നതിന് ഞങ്ങൾ ഒരു അടിസ്ഥാന സന്ദേശം നിർമ്മിക്കുന്നു. ശൂന്യതയ്ക്കായി ഫീൽഡുകൾ പരിശോധിക്കുന്നതിനേക്കാൾ കൂടുതൽ വിശദമായി നമുക്ക് പരിശോധിക്കാൻ കഴിയും (മൂല്യം വളരെ ചെറുതോ / ദൈർഘ്യമേറിയതോ ആണെങ്കിൽ, ഞങ്ങൾ അത് സാധാരണ എക്സ്പ്രഷനുകൾ ഉപയോഗിച്ച് പരിശോധിക്കും) PHP, JavaScript എന്നിവയിൽ. എന്നിരുന്നാലും, ലാളിത്യത്തിനുവേണ്ടി, ശൂന്യത പരിശോധിക്കുന്നതിൽ മാത്രം ഞങ്ങൾ സ്വയം പരിമിതപ്പെടുത്തും.

ബ്രൗസറിൽ പ്രദർശിപ്പിക്കുന്ന AJAX ഫംഗ്‌ഷനിലേക്ക് നിങ്ങൾ ഒരു സന്ദേശം തിരികെ നൽകേണ്ടതുണ്ട്. PHP ഫയലിന്റെ ചുവടെ ഞങ്ങൾ നേരത്തെ സൃഷ്ടിച്ച if കണ്ടീഷൻ ഞങ്ങൾ എഡിറ്റ് ചെയ്യും.

ഞങ്ങളുടെ if കണ്ടീഷനിൽ, $errorMSG വേരിയബിൾ ശൂന്യമാണോ ("") എന്ന് ഞങ്ങൾ പരിശോധിക്കുന്നു, അതാണ് $success വേരിയബിളിൽ ഞങ്ങൾ ഉപയോഗിച്ചത്. ഞങ്ങളുടെ മറ്റൊരു അവസ്ഥയിൽ ഞങ്ങൾ കൂടുതൽ പരിശോധന ഉൾപ്പെടുത്തി. ഇവിടെ ഇത് ഒരു പരിശോധന മാത്രമാണ്, $success വേരിയബിളിൽ തെറ്റായ ഫലം നൽകിയാൽ, അത് തിരികെ നൽകും “എന്തോ കുഴപ്പം സംഭവിച്ചു:(“.അല്ലെങ്കിൽ, ശൂന്യമായ മൂല്യങ്ങൾക്കായി പരിശോധിക്കുമ്പോൾ സമാഹരിച്ച സന്ദേശം ഞങ്ങൾ പ്രദർശിപ്പിക്കും.

അജാക്സിൽ പുതിയ സന്ദേശം സ്വീകരിച്ച് ഫോമിൽ പ്രദർശിപ്പിക്കുക എന്നതാണ് അവസാന ഘട്ടം. scripts.js ഫയലിലെ Ajax ഒബ്‌ജക്‌റ്റ് ഇനിപ്പറയുന്ന രീതിയിൽ അപ്‌ഡേറ്റ് ചെയ്യേണ്ടതുണ്ട്:

$.ajax(( തരം: "POST", url: "php/form-process.php", ഡാറ്റ: "name=" + name + "&email=" + email + "&message=" + message, success: function( വാചകം)( എങ്കിൽ (ടെക്‌സ്റ്റ് == "വിജയം")(ഫോംസക്സസ്(); ) വേറെ (ഫോംഎറർ(); സബ്മിറ്റ്എംഎസ്ജി(തെറ്റ്,ടെക്സ്റ്റ്); ) ) );

വാചകം == വിജയമാണോ എന്ന് പരിശോധിക്കുന്ന മറ്റൊരു വ്യവസ്ഥ ഞങ്ങൾ ഇപ്പോൾ അപ്ഡേറ്റ് ചെയ്തു. ഷേക്കിംഗ് ആനിമേഷൻ സജീവമാക്കുന്ന ഫോംഎറർ() ഫംഗ്‌ഷൻ എന്ന് ഞങ്ങൾ വിളിക്കുന്ന മറ്റൊന്നിൽ, submitMSG() ഫംഗ്‌ഷൻ PHP ഫയലിൽ നിന്നുള്ള സന്ദേശ വാചകം പ്രദർശിപ്പിക്കുന്നു. മടക്കിയ വാചകം ഒന്നുകിൽ ആയിരിക്കും "എന്തോ കുഴപ്പം സംഭവിച്ചു:(", അല്ലെങ്കിൽ ശൂന്യമായ ഫീൽഡുകളെക്കുറിച്ചുള്ള ഡാറ്റ.

ഉപസംഹാരം

ഞങ്ങൾ എഴുതിയ എല്ലാ കോഡുകളും കാണുന്നതിന് Github-ലേക്ക് പോകുക!

ഞങ്ങളുടെ ഫോം ഇപ്പോൾ ഉപയോക്താക്കൾക്ക് ഫീഡ്‌ബാക്ക് നൽകുകയും ഏതൊക്കെ ഫീൽഡുകളാണ് തെറ്റായി പൂരിപ്പിച്ചതെന്നും ശൂന്യമാണെന്നും കാണിക്കുന്നു. ഫോമിൽ, ഞങ്ങൾ PHP ഫയലിൽ നിന്ന് മടങ്ങിയ മൂല്യത്തിന്റെ നിലയെ അടിസ്ഥാനമാക്കി സന്ദർഭോചിതമായ സന്ദേശങ്ങൾ നൽകുകയും ഫ്രണ്ട്-എൻഡ് മൂല്യനിർണ്ണയം മറികടക്കാൻ ആഗ്രഹിക്കുന്ന ഉപയോക്താക്കളെ പിടികൂടി സെർവർ സൈഡ് മൂല്യനിർണ്ണയത്തിന്റെ ഒരു അധിക തലം നടപ്പിലാക്കുകയും ചെയ്തു.

മൊത്തത്തിൽ, ഇപ്പോൾ നിങ്ങളുടെ കൈകളിൽ വളരെ ഊർജ്ജസ്വലമായ ഒരു രൂപം ഉണ്ട്, നിങ്ങളുടെ വെബ്‌സൈറ്റുമായി സംയോജിപ്പിക്കാനും ശൈലിയാക്കാനും തയ്യാറാണ്. നിങ്ങൾ ഈ ട്യൂട്ടോറിയൽ ആസ്വദിച്ചുവെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു, ദയവായി എന്തെങ്കിലും ചോദ്യങ്ങളോ ചിന്തകളോ ചുവടെയുള്ള അഭിപ്രായങ്ങളിൽ ഇടുക!

എല്ലാവർക്കും ശുഭദിനം. അലക്സി ഗുലിനിൻ ബന്ധപ്പെട്ടിരിക്കുന്നു. കഴിഞ്ഞ ലേഖനത്തിൽ, php-ൽ സീരിയലൈസേഷൻ എന്താണെന്ന് നിങ്ങൾ പഠിച്ചു. ഈ ലേഖനത്തിൽ PHP-യിലെ ഫോമുകൾ ഉപയോഗിച്ച് എങ്ങനെ പ്രവർത്തിക്കാം എന്നതിനെക്കുറിച്ച് സംസാരിക്കാൻ ഞാൻ ആഗ്രഹിക്കുന്നു. PHP ഭാഷ വെബ് സ്ക്രിപ്റ്റുകൾ പ്രോഗ്രാമിംഗിനായി രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്, ഫോം പ്രോസസ്സിംഗ് ഈ പ്രക്രിയയിലെ ഏറ്റവും പ്രധാനപ്പെട്ട സ്ഥലമാണ്. ഇക്കാലത്ത് നിങ്ങൾക്ക് ഇല്ലാത്ത സൈറ്റുകൾ കണ്ടെത്താൻ പോലും കഴിയില്ല, ഉദാഹരണത്തിന്, രജിസ്ട്രേഷൻ അല്ലെങ്കിൽ ഒരു ഫീഡ്ബാക്ക് ഫോം, അല്ലെങ്കിൽ ഒരു ചോദ്യാവലി. ഫോറങ്ങൾ, ഓൺലൈൻ സ്റ്റോറുകൾ, ഒരു അഭിപ്രായം ചേർക്കൽ, ഒരു സോഷ്യൽ നെറ്റ്‌വർക്കിൽ ഒരു സന്ദേശം അയയ്ക്കൽ - ഇതെല്ലാം ഫോം ഫീൽഡുകളിൽ സ്ഥാപിച്ചിരിക്കുന്ന ഡാറ്റയുടെ പ്രോസസ്സിംഗ് ആണ്. പിഎച്ച്പിയിൽ ഫോമുകൾ എങ്ങനെ പ്രോസസ്സ് ചെയ്യാമെന്ന് മനസിലാക്കാൻ നമുക്ക് ഒരു ഉദാഹരണം ഉപയോഗിക്കാം.
ഞങ്ങൾ ഒരു ലളിതമായ ടാസ്ക് നടപ്പിലാക്കും: ഞങ്ങൾ 2 ഫീൽഡുകൾ (ആദ്യ പേരും അവസാന നാമവും) സൃഷ്ടിക്കേണ്ടതുണ്ട്, ഈ ഡാറ്റ action.php സ്ക്രിപ്റ്റിലേക്ക് കൈമാറുക, അതിന്റെ ഫലമായി "സ്വാഗതം, അവസാന നാമം ആദ്യ നാമം" എന്ന ആശംസ ദൃശ്യമാകും. ഫോമുകൾ എങ്ങനെ സൃഷ്ടിക്കപ്പെടുന്നുവെന്നും എന്തൊക്കെ ഫീൽഡുകളുണ്ടെന്നും മറന്നുപോയവർക്ക്, നിങ്ങൾക്ക് നോക്കാം. നമുക്ക് ഒരു test.html ഫയൽ സൃഷ്ടിക്കാം:

ആദ്യ നാമം അവസാന നാമം:

action.php ഫയൽ (ഞങ്ങളുടെ കാര്യത്തിൽ) test.html ഫയലിന്റെ അതേ ഫോൾഡറിൽ ആയിരിക്കണം എന്നത് ശ്രദ്ധിക്കുക. ഇവിടെ നിങ്ങൾക്ക് ആപേക്ഷികവും കേവലവുമായ പാതകൾ വ്യക്തമാക്കാൻ കഴിയും. ശ്രദ്ധിക്കുക, ഫോം ഹാൻഡ്‌ലർ സ്‌ക്രിപ്‌റ്റിലേക്കുള്ള പാത തെറ്റായി വ്യക്തമാക്കുന്നതുമായി ബന്ധപ്പെട്ട് നിരവധി പിശകുകൾ ബന്ധപ്പെട്ടിരിക്കുന്നു.

ഇനിപ്പറയുന്ന ഉള്ളടക്കം ഉപയോഗിച്ച് നമുക്ക് action.php ഫയൽ സൃഷ്ടിക്കാം:

നമ്മൾ ഇപ്പോൾ test.html ഫയൽ തുറന്ന്, ഫോം ഫീൽഡുകൾ പൂരിപ്പിച്ച് ബട്ടണിൽ ക്ലിക്ക് ചെയ്താൽ, ഞങ്ങൾ action.php ഫയലിൽ എത്തും, അവിടെ ഒരു സന്ദേശം പ്രദർശിപ്പിക്കും. ഈ സാഹചര്യത്തിൽ, ബ്രൗസർ action.php സ്ക്രിപ്റ്റ് ആക്സസ് ചെയ്യുകയും "?" വഴി കടന്നുപോകുകയും ചെയ്യുന്നു. നെയിം ആട്രിബ്യൂട്ടുകളുടെ എല്ലാ മൂല്യങ്ങളും ടാഗുകൾക്കുള്ളിൽ & കൊണ്ട് വേർതിരിച്ചിരിക്കുന്നു. $_SERVER-ന് പകരം വയ്ക്കുന്നത് എന്താണെന്ന് ദയവായി ശ്രദ്ധിക്കുക.

PHP-യിലെ സ്ട്രിംഗുകൾ ഉപയോഗിച്ച് പ്രവർത്തിക്കുന്നതിനുള്ള സ്റ്റാൻഡേർഡ് ഫംഗ്‌ഷനുകൾ ഉപയോഗിച്ച് QUERY_STRING സ്‌ട്രിംഗ് പാഴ്‌സ് ചെയ്‌ത് ഞങ്ങൾക്ക് ഞങ്ങളുടെ പ്രശ്‌നം പരിഹരിക്കാനാകും, എന്നാൽ $_REQUEST അറേ ഉപയോഗിച്ച് മറ്റൊരു സംവിധാനം ഉപയോഗിക്കുന്നതാണ് നല്ലത്. ഫോം ഫീൽഡുകളിൽ നിന്ന് ലഭിച്ച എല്ലാ ഡാറ്റയും PHP $_REQUEST അറേയിൽ സ്ഥാപിക്കുന്നു, ഡാറ്റ എങ്ങനെയാണ് കൈമാറ്റം ചെയ്യപ്പെട്ടത് എന്നത് പരിഗണിക്കാതെ തന്നെ: POST അല്ലെങ്കിൽ GET (നിങ്ങൾക്ക് $_SERVER["REQUEST_METHOD"] വഴി കണ്ടെത്താനാകും. ഈ രീതികൾ എങ്ങനെ വ്യത്യാസപ്പെട്ടിരിക്കുന്നുവെന്ന് ഞാൻ നിങ്ങളെ ഓർമ്മിപ്പിക്കട്ടെ:

GET രീതി പൊതുവായതാണ്, POST രീതി സ്വകാര്യമാണ്, അതായത്. പാരാമീറ്ററുകൾ കൈമാറുന്ന രീതിയിൽ അവ വ്യത്യാസപ്പെട്ടിരിക്കുന്നു. ഉദാഹരണം:

1) ഞങ്ങൾ പോസ്റ്റ് രീതി ഉപയോഗിക്കുകയാണെങ്കിൽ: mysite.ru/request.php.
2) നമ്മൾ നേടുന്ന രീതി ഉപയോഗിക്കുകയാണെങ്കിൽ: mysite.ru/request.php?myname=”Alex”&surname=”Gulynin”.

കൂടാതെ, $_REQUEST അറേ കൂടാതെ, PHP $_GET, $_POST അറേകൾ സൃഷ്ടിക്കുന്നു. നേടിയ അറിവിനെ അടിസ്ഥാനമാക്കി നമുക്ക് ഇപ്പോൾ ഞങ്ങളുടെ ചുമതല നടപ്പിലാക്കാം:

നമ്മൾ ഇപ്പോൾ ഫോം പൂരിപ്പിച്ച് ബട്ടണിൽ ക്ലിക്ക് ചെയ്താൽ, ആക്ഷൻ.പിഎച്ച്പി സ്ക്രിപ്റ്റ് അവസാന നാമത്തിലും ആദ്യ നാമത്തിലും നമ്മെ സ്വാഗതം ചെയ്യുന്നതായി കാണാം. എല്ലാം ശരിയായി പ്രവർത്തിക്കുന്നു.

ഇവിടെ എല്ലാം ശരിയാണ്, പക്ഷേ നമ്മൾ സ്ക്രിപ്റ്റിന്റെ പേര് മാറ്റുകയാണെങ്കിൽ, test.html ഫയലിൽ മാറ്റങ്ങൾ വരുത്തേണ്ടതുണ്ട്. നമുക്ക് action.php ഫയൽ പരിഷ്‌ക്കരിക്കാം, അതിലൂടെ അത് ആക്‌സസ് ചെയ്യുമ്പോൾ, ഒന്നുകിൽ നമ്മൾ ഒന്നും സമർപ്പിക്കാത്തപ്പോൾ അത് ഒരു ഫോം പ്രദർശിപ്പിക്കും, അല്ലെങ്കിൽ ഞങ്ങൾ ഒരു ബട്ടണിൽ ക്ലിക്കുചെയ്യുമ്പോൾ ഒരു ആശംസ സന്ദേശം: