Dinamičan razvoj web aplikacija s Jquery, Php i MySQL

Kombinacija PHP -a i Jqueryja jedna je od najčešće korištenih tehnika za razvoj dinamičkih web aplikacija.
Knjižnica JQuery nudi mnoge Jquery dodatke koje programeri koriste kako bi svojim aplikacijama dali puno dinamike kako bi poboljšali iskustvo posjetitelja u internetskom pregledniku ili na mobilnom uređaju. Nastavit ćemo razvijati tutorial aplikaciju Generiranje dinamičkih popisa pomoću Jqueryja, Php -a i Mysqla, dodavat ćemo dinamičke obrasce za registraciju i izmjenu informacija, primjenjujući kombinaciju php -a i jquery -a možemo izvesti ovaj zadatak bez preusmjeravanja stranice.
Također ćemo dodati dodatak jquery.validator to će nam omogućiti provjeru valjanosti polja obrasca.
PažnjaZa ovaj vodič trebat će nam dodatak koji možemo preuzeti s http://jqueryvalidation.org/, kada ga preuzmemo, raspakiramo ga i imat ćemo sve datoteke koje nas za sada zanimaju samo dvije, a to su:
jquery.validate.js što je sam dodatak messages_es.js koja je datoteka u koju ćemo staviti poruke za posjetitelje i možemo je prevesti po jeziku.
Dodajemo datoteke u direktorij projekta:

Zatim imamo generirani popis vozila, dodat ćemo obrazac za registraciju vozila.

Nastavljajući s kodom iz prethodnog vodiča, moramo imati sloj u kojem će se oblici prikazati kada se dozovu s Jqueryjem, za to ćemo pod novim gumbom stvoriti sloj obrazaca.

POVEĆAJTE

U zaglavlje web stranice index.php dodajemo knjižnice jquery.validator i poruke. Zatim ćemo ih koristiti za izradu dinamičkih oblika

Ako ne želimo preuzeti dodatak, možemo ga koristiti s vanjskog poslužitelja

Sada ćemo stvoriti datoteke s obrascem koji će se koristiti za registraciju vozila i koje ćemo pozvati s novog gumba. Da bismo to učinili, moramo osigurati da novi gumb ima id (identifikator) kako bismo tada mogli prepoznati kada se dogodi događaj u kojem se, na primjer, dogodi klik. Tada će kôd gumba biti sljedeći:
Naziv komponente i identifikator mogu biti isti, ali jedinstveni za svaku html komponentu. U datoteku functions.js zapisujemo sljedeći kod koji će otkriti klik miša na gumb newvehiculo i pozvati datoteku hivehiculos s obrascem za prijavu.

 // Pozovite obrazac za registraciju vozila $ (function () {$ ("# newvehiculo"). Kliknite (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data) {$ ("# forms"). html (data); // Uzimam rezultat stranice i ubacujem podatke u div obrasce});});}); 

Zatim stvaramo obrazac za registraciju koji će se zvati altavehiculos.php
U zaglavlje ugrađujemo potrebne knjižnice kako bismo mogli raditi s jqueryjem i provjeravati polja

Mi stvaramo neke stilove kako bismo formi dali neki dizajn i red. Na primjer, može se koristiti u istoj datoteci ili u zasebnoj datoteci stilske tablice, a zatim dodati u zaglavlje.

Zatim zapisujemo kôd za spremanje podataka i kôd obrasca za hvatanje podataka

 $ value) {$ _POST [$ key] = mysql_real_escape_string ($ value); } $ sql = "INSERT INTO` vozila" (`vozilo_idtip`,` karakteristike`, `brandid`,` modelid`, `photo1`) VRIJEDNOSTI ('{$ _POST [' vehicle_idtype ']}}' ',' {$ _POST [ 'karakteristike']} ',' {$ _POST ['marka ID']} ',' {$ _POST ['model id']} ',' {$ _POST ['fotografija1']} ') "; mysql_query ($ sql) ili umrijeti (mysql_error ()); echo "Registracija dovršena."; }?> var13 -> // Posavjetujem se s vozilima da popunim odabir tipa vozila Registracija vozila
Odabir vozila 
Izbor robne marke
Odabir modela
Fotografija
obilježja

Također stvaram funkcije Jquery za povezivanje izjava u registracijskom obrascu

 // odabir povezane registracije vozila i marki $ (function () {$ ("# registracija vozila"). change (function () {vehicle = $ (this) .val (); // odabrana vrijednost $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Uzimam rezultat stranice i ubacujem podatke u kombinirano});});}); // odabir povezanih robnih marki i modela $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Odabrana vrijednost $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Uzimam rezultat stranice i ubacujem podatke u select} );});}); 

Kad završimo, ako izvršimo i pritisnemo novi gumb, obrazac za registraciju trebao bi se pojaviti na sljedeći način:

Kao što vidimo, obrazac se prikazuje bez preusmjeravanja stranice, ako imamo dodatak poput Firebuga instaliran u našem pregledniku, možemo vidjeti pozive Jquery u pozadini.

Na kraju ćemo napraviti kod provjere valjanosti obrasca pomoću jednostavne jquery skripte i pravila dodatka za provjeru valjanosti. Unutar datoteke functions.js stvaramo skriptu i pozivamo se na id obrasca te joj dodjeljujemo funkciju provjere valjanosti i španjolski jezik, inače će prema zadanim postavkama biti engleski kada prikaže poruku o pogrešci.

 // validacija obrasca $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // ili bilo koja jezična opcija koju imate.});}); 

Zatim u komponentu koju želimo provjeriti dodamo potrebnu klasu, odnosno element ne može biti prazan ili bez podataka.
Klase provjere valjanosti mogu se pronaći u datoteci poruka. Primjer provjere valjanosti
Potvrdite e -poštu:
Potvrdite datum:
Potvrdite broj:
Dakle, ako u naš obrazac, na primjer, elementu textarea dodamo potrebnu klasu, a u slučaju izjava select, moramo ostaviti prvu opciju praznom, a ako se ništa ne odabere, doći će do pogreške i oblik neće biti poslano.
obilježja

Primjer za odabrane modele:

 Odabir modela 

Konačno, ako ispunimo obrazac i kliknemo gumb Spremi, obrazac će se poslati pozivom jquery na istu stranicu altavehiculos.php, koja šalje zastavicu poslanu s vrijednošću 1, a zatim aktivira umetanje u MySQL tablicu.
Jedan detalj koji treba učiniti bilo s jquery -jem ili preusmjeravanjem na tradicionalan način je taj da se prilikom spremanja podataka popis pri vrhu osvježava budući da obrazac za registraciju nestaje, ali nemamo nikakav događaj za navodnjavanje popisa vozila, stoga moramo dodati poziv tako da se popis prikazuje unutar sloja popisa koji smo prethodno koristili u drugom vodiču, na ovaj način možemo registrirati podatke ako preusmjeravamo stranicu ili radimo pozadinske zadatke bez da korisnik mora preusmjeriti stranicu ili kako bi web aplikaciji dala više interaktivnosti ili transparentnosti, dopušta i ponovnu uporabu izvornog koda jer je kompatibilna s bilo kojim preglednikom i uređajem kompatibilnim s javascriptom.Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod