✅ Dynamische webapplicatie-ontwikkeling Met JQuery, Php EN MySQL

Inhoudsopgave

De combinatie van PHP en JQuery is een van de meest gebruikte technieken voor het ontwikkelen van dynamische webapplicaties.
De JQuery-bibliotheek biedt veel JQuery-plug-ins die ontwikkelaars gebruiken om hun applicaties veel dynamiek te geven om de bezoekerservaring zowel in de internetbrowser als op een mobiel apparaat te verbeteren. We zullen doorgaan met het ontwikkelen van de zelfstudietoepassing Dynamische lijsten genereren met JQuery, Php en Mysql, we zullen dynamische formulieren toevoegen om informatie te registreren en te wijzigen, door de combinatie van php en jQuery toe te passen, kunnen we deze taak uitvoeren zonder de pagina om te leiden.
We zullen ook de plug-in toevoegen jquery.validator waarmee we de velden van het formulier kunnen valideren.
AandachtVoor deze tutorial hebben we de plug-in nodig die we kunnen downloaden van http://jqueryvalidation.org/, wanneer we deze downloaden, unzippen we hem en hebben we alle bestanden waarvan we voorlopig slechts in twee geïnteresseerd zijn, namelijk:
jquery.validate.js wat is de plug-in zelf? messages_es.js dat is het bestand waarin we de berichten voor de bezoeker zullen plaatsen en we kunnen het per taal vertalen.
We voegen de bestanden toe aan de projectdirectory:

We hebben dan de gegenereerde lijst met voertuigen, we gaan een formulier toevoegen om de voertuigen te registreren.

Verdergaand met de code uit de vorige tutorial, moeten we een laag hebben waar de formulieren worden weergegeven wanneer ze worden aangeroepen met JQuery, hiervoor zullen we onder de nieuwe knop de formulierenlaag maken.

VERGROTEN

In de header van de webpagina index.php voegen we de bibliotheken van jquery.validator en berichten toe. Dan zullen we ze gebruiken om dynamische vormen te maken

Als we de plug-in niet willen downloaden, kunnen we deze van een externe server gebruiken

Nu gaan we de bestanden maken met het formulier dat zal worden gebruikt om een voertuig te registreren en dat we zullen oproepen vanaf de nieuwe knop. Hiervoor moeten we ervoor zorgen dat de nieuwe knop een id (identifier) heeft, zodat we dan kunnen herkennen wanneer een gebeurtenis plaatsvindt waarbij bijvoorbeeld een klik plaatsvindt. Dan is de knopcode de volgende:
De naam van de component en de identifier kunnen hetzelfde zijn, maar uniek voor elke html-component. In het bestand Functions.js schrijven we de volgende code die de muisklik op de knop newvehiculo detecteert en het hivehiculos-bestand oproept met het aanmeldingsformulier.

 // Roep het voertuigregistratieformulier op $ (function () {$ ("# newvehiculo"). Klik op (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data ) {$ ("# formulieren").html (gegevens); // Ik neem het paginaresultaat en voeg de gegevens in de div-formulieren in});});});

Vervolgens maken we het registratieformulier dat altavehiculos.php . zal heten
We nemen de nodige bibliotheken op in de header om met jQuery te kunnen werken en de velden te valideren

We creëren enkele stijlen om de vorm wat design en orde te geven. Voor het voorbeeld kan het in hetzelfde bestand of in een apart stylesheetbestand worden gebruikt en vervolgens in de koptekst worden toegevoegd.

Vervolgens schrijven we de code om de gegevens op te slaan en de formuliercode om gegevens vast te leggen

 $ waarde) {$ _POST [$ key] = mysql_real_escape_string ($ waarde); } $ sql = "INSERT INTO` voertuigen` (`vehicle_idtype`,` kenmerken`, `brandid`,` modelid`, `photo1`) WAARDEN ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'kenmerken']}', '{$ _POST [' merk-ID ']}', '{$ _POST [' model-ID ']}', '{$ _POST [' foto1 ']}') "; mysql_query ($ sql) of sterven (mysql_error ()); echo "Registratie voltooid."; }?> var13 -> // Ik raadpleeg voertuigen om de voertuigtypeselectie in te vullen Voertuigregistratie
Voertuig selecteren

Ik maak ook de JQuery-functies om de verklaringen in het registratieformulier te relateren

 // selecteer gerelateerde voertuigregistratie en merken $ (functie () {$ ("# voertuigregistratie"). wijzigen (functie () {voertuig = $ (dit) .val (); // Geselecteerde waarde $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca").html (data); // Ik neem het paginaresultaat en voeg de gegevens in de combinatie });});}); // selecteer gerelateerde merken en modellen $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Geselecteerde waarde $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo").html (data); // Ik neem het paginaresultaat en voeg de gegevens in de select} );});});

Als we eenmaal klaar zijn, als we de nieuwe knop uitvoeren en erop drukken, zou het registratieformulier als volgt moeten verschijnen:

Zoals we kunnen zien, wordt het formulier weergegeven zonder de pagina om te leiden. Als we een plug-in zoals Firebug in onze browser hebben geïnstalleerd, kunnen we de JQuery-aanroepen op de achtergrond zien.

Ten slotte gaan we de validatiecode voor het formulier maken met behulp van een eenvoudig jQuery-script en de regels van de validator-plug-in. In het bestand Functions.js maken we een script en verwijzen we naar de id van het formulier en wijzen het de functie valideren en de Spaanse taal toe, anders wordt het standaard Engels wanneer er een foutmelding wordt weergegeven.

 // formuliervalidatie $ (document) .ready (functie () {$ ("# frmalta").valideren ({lang: 'es' // of welke taaloptie je ook hebt.});});

Vervolgens voegen we in de component die we willen valideren de vereiste klasse toe, dat wil zeggen dat het element niet leeg of zonder gegevens kan zijn.
De validatieklassen zijn te vinden in het berichtenbestand. Validaties voorbeeld
Een e-mail valideren:
Valideer een datum:
Een nummer valideren:
Dus als we bijvoorbeeld de vereiste klasse aan ons formulier toevoegen aan het textarea-element, en in het geval van select-statements, moeten we de eerste optie leeg laten, als er niets is geselecteerd, zal de fout optreden en zal het formulier niet worden verzonden.
Kenmerken

Voorbeeld voor de geselecteerde modellen:

 Model selecteren

Als we ten slotte het formulier invullen en op de knop Opslaan klikken, zal het formulier zichzelf verzenden door een jquery-aanroep te doen naar dezelfde pagina altavehiculos.php, die de vlag verzendt die is verzonden met waarde 1 en vervolgens de invoeging in de MySQL-tabel activeert.
Een detail dat nog moet worden gedaan met jQuery of omleiden op de traditionele manier, is dat wanneer de gegevens worden opgeslagen, de lijst bovenaan wordt vernieuwd omdat het registratieformulier verdwijnt, maar we hebben geen enkele gebeurtenis om de voertuiglijst te irrigeren, daarom moeten we de aanroep toevoegen zodat de lijst wordt weergegeven in de lijstlaag die we eerder in de andere tutorial hebben gebruikt, op deze manier kunnen we informatie registreren als de pagina wordt omgeleid of achtergrondtaken worden uitgevoerd zonder dat de gebruiker de pagina hoeft om te leiden of om de webtoepassing meer interactiviteit of transparantie te geven, is het ook mogelijk om de broncode te hergebruiken, aangezien deze compatibel is met elke browser en elk apparaat dat compatibel is met javascript.Vond je deze Tutorial leuk en heb je eraan geholpen?Je kunt de auteur belonen door op deze knop te drukken om hem een positief punt te geven