✅ Dynamisk webapplikasjonsutvikling Med Jquery, Php OG MySQL

Innholdsfortegnelse

Kombinasjonen av PHP og Jquery er en av de mest brukte teknikkene for å utvikle dynamiske webapplikasjoner.
JQuery -biblioteket gir mange Jquery -plugins som utviklere bruker for å gi applikasjonene mye dynamikk for å forbedre besøkeropplevelsen både på nettleseren eller på en mobil enhet. Vi vil fortsette å utvikle opplæringsprogrammet Generer dynamiske lister med Jquery, Php og Mysql, vi vil legge til dynamiske skjemaer for å registrere og endre informasjon, ved å bruke kombinasjonen av php og jquery vi kan utføre denne oppgaven uten å omdirigere siden.
Vi vil også legge til pluginet jquery.validator som lar oss validere feltene i skjemaet.
Merk følgendeFor denne opplæringen trenger vi pluginet som vi kan laste ned fra http://jqueryvalidation.org/, når vi laster det ned pakker vi det ut, og vi vil ha alle filene vi bare er interessert i to for nå, som er:
jquery.validate.js hva er selve pluginet messages_es.js som er filen der vi vil legge meldingene til den besøkende, og vi kan oversette den etter språk.
Vi legger til filene i prosjektkatalogen:

Vi har da den genererte listen over kjøretøyer, vi skal legge til et skjema for å registrere kjøretøyene.

Ved å fortsette med koden fra den forrige opplæringen, må vi ha et lag der skjemaene vises når de påkalles med Jquery, for dette, under den nye knappen vil vi lage skjemalaget.

FORSTØRRE

I toppteksten til websiden index.php legger vi til bibliotekene til jquery.validator og meldinger. Deretter vil vi bruke dem til å lage dynamiske former

Hvis vi ikke vil laste ned programtillegget kan vi bruke det fra en ekstern server

Nå skal vi lage filene med skjemaet som skal brukes til å registrere et kjøretøy og som vi vil påberope oss fra den nye knappen. For å gjøre dette må vi sørge for at den nye knappen har en id (identifikator), slik at vi deretter kan gjenkjenne når det oppstår en hendelse der det for eksempel oppstår et klikk. Da vil knappekoden være følgende:
Navnet på komponenten og identifikatoren kan være det samme, men unikt for hver html -komponent. I filen functions.js skriver vi følgende kode som oppdager museklikket på knappen newvehiculo og påkaller hivehiculos -filen med registreringsskjemaet.

 // Påkall registreringsskjema for kjøretøy $ (function () {$ ("# newvehiculo"). Klikk (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data) {$ ("# forms"). html (data); // Jeg tar sideresultatet og setter inn dataene i div -skjemaene});});});

Deretter oppretter vi registreringsskjemaet som vil bli kalt altavehiculos.php
Vi inkorporerer de nødvendige bibliotekene i overskriften for å kunne jobbe med jquery og validere feltene

Vi lager noen stiler for å gi formen litt design og orden. For eksempel kan den brukes i den samme filen eller i en egen stilarkfil og deretter legges til i overskriften.

Deretter skriver vi koden for å lagre dataene og skjemakoden for å fange data

 $ verdi) {$ _POST [$ nøkkel] = mysql_real_escape_string ($ verdi); } $ sql = "INSERT INTO` vehicles" (`vehicle_idtype`,` features`, `brandid`,` modelid`, `photo1`) VERDIER ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'features']} ',' {$ _POST ['brand id']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']} ') "; mysql_query ($ sql) eller die (mysql_error ()); ekko "Registrering fullført."; }?> var13 -> // Jeg konsulterer kjøretøyer for å fylle ut valg av kjøretøytype Kjøretøyregistrering
Kjøretøyvalg

Jeg lager også Jquery -funksjonene for å relatere utsagnene i registreringsskjemaet

 // velg tilhørende kjøretøyregistrering og merker $ (funksjon () {$ ("# kjøretøyregistrering"). endre (funksjon () {kjøretøy = $ (dette) .val (); // Valgte verdi $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Jeg tar sideresultatet og setter inn dataene i kombinasjon});});}); // velg relaterte merker og modeller $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valgte verdi $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Jeg tar sideresultatet og setter inn dataene i select} );});});

Når vi er ferdige, hvis vi utfører og trykker på den nye knappen, skal registreringsskjemaet vises som følger:

Som vi kan se, vises skjemaet uten å omdirigere siden. Hvis vi har et plugin som Firebug installert i nettleseren vår, kan vi se Jquery -anropene i bakgrunnen.

Til slutt skal vi lage valideringskoden for skjemaet ved hjelp av et enkelt jquery -skript og reglene for validator -plugin. Inne i functions.js -filen lager vi et skript og refererer til skjemaets ID og tildeler det funksjonen validate og det spanske språket, ellers blir det standard til engelsk når det viser en feilmelding.

 // formvalidering $ (dokument) .ready (funksjon () {$ ("# frmalta"). validere ({lang: 'es' // eller hvilket språkalternativ du enn har.});});

Deretter legger vi til den nødvendige klassen i komponenten vi vil validere, det vil si at elementet ikke kan være tomt eller uten data.
Valideringsklassene finnes i meldingsfilen. Valideringseksempel
Valider en e -post:
Valider en dato:
Valider et tall:
Så hvis vi for eksempel legger til den nødvendige klassen i skjemaet vårt til tekstområdeelementet, og når det gjelder utvalgte setninger, må vi la det første alternativet stå tomt, så hvis ingenting er valgt, vil feilen oppstå og skjemaet vil ikke være sendt.
funksjoner

Eksempel på utvalgte modeller:

 Velg modell

Til slutt, hvis vi fyller ut skjemaet og klikker på Lagre -knappen, vil skjemaet sende seg selv ved å foreta et jquery -anrop til samme side altavehiculos.php, som sender flagget sendt med verdi 1 og deretter aktiverer innsettingen i MySQL -tabellen.
En detalj som gjenstår å gjøre enten med jquery eller omdirigering på tradisjonell måte, er at når dataene er lagret, oppdateres listen øverst siden registreringsskjemaet forsvinner, men vi har ingen hendelse for å vanne kjøretøylisten, derfor må vi legge til samtalen slik at listen vises i listelaget som vi tidligere brukte i den andre opplæringen, på denne måten kan vi registrere informasjon hvis vi omdirigerer siden eller utfører bakgrunnsoppgaver uten at brukeren må omdirigere siden eller For å gi webprogrammet mer interaktivitet eller åpenhet, tillater det også gjenbruk av kildekoden siden den er kompatibel med alle nettlesere og enheter som er kompatible med javascript.Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng