✅ Dynamische Entwicklung von Webanwendungen mit Jquery, PHP UND MySQL

Inhaltsverzeichnis

Die Kombination von PHP und Jquery ist eine der am häufigsten verwendeten Techniken zur Entwicklung dynamischer Webanwendungen.
Die JQuery-Bibliothek stellt viele Jquery-Plugins bereit, mit denen Entwickler ihren Anwendungen viel Dynamik verleihen, um das Besuchererlebnis sowohl im Internetbrowser als auch auf einem mobilen Gerät zu verbessern. Wir werden die Tutorial-Anwendung Generate Dynamic Lists With Jquery, PHP und Mysql weiter entwickeln. Wir werden dynamische Formulare hinzufügen, um Informationen zu registrieren und zu ändern.
Wir werden auch das Plugin hinzufügen jquery.validator Damit können wir die Felder des Formulars validieren.
AufmerksamkeitFür dieses Tutorial benötigen wir das Plugin, das wir von http://jqueryvalidation.org/ herunterladen können. Wenn wir es herunterladen, entpacken wir es und wir haben alle Dateien, von denen wir derzeit nur an zwei interessiert sind, nämlich:
jquery.validate.js Was ist das Plugin selbst? Nachrichten_es.js Dies ist die Datei, in der wir die Nachrichten für den Besucher ablegen und sie nach Sprache übersetzen können.
Wir fügen die Dateien dem Projektverzeichnis hinzu:

Wir haben dann die generierte Liste der Fahrzeuge, wir werden ein Formular hinzufügen, um die Fahrzeuge zu registrieren.

Um mit dem Code aus dem vorherigen Tutorial fortzufahren, müssen wir eine Ebene haben, auf der die Formulare angezeigt werden, wenn sie mit Jquery aufgerufen werden. Dazu erstellen wir unter der neuen Schaltfläche die Formularebene.

VERGRÖSSERN

Im Header der Webseite index.php fügen wir die Bibliotheken von jquery.validator und Messages hinzu. Dann werden wir sie verwenden, um dynamische Formulare zu erstellen

Wenn wir das Plugin nicht herunterladen möchten, können wir es von einem externen Server verwenden

Jetzt erstellen wir die Dateien mit dem Formular, das zur Registrierung eines Fahrzeugs verwendet wird und das wir über die neue Schaltfläche aufrufen. Dazu müssen wir sicherstellen, dass der neue Button eine ID (Identifikator) besitzt, damit wir dann erkennen können, wann ein Ereignis eintritt, bei dem beispielsweise ein Klick erfolgt. Dann sieht der Tastencode wie folgt aus:
Der Name der Komponente und der Bezeichner können gleich, aber für jede HTML-Komponente eindeutig sein. In die Datei functions.js schreiben wir den folgenden Code, der den Mausklick auf die Schaltfläche newvehiculo erkennt und die Datei hivehiculos mit dem Anmeldeformular aufruft.

 // Fahrzeugregistrierungsformular aufrufen $ (function () {$ ("# newvehiculo"). Click (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data ) {$ ("# forms"). html (data); // Ich nehme das Seitenergebnis und füge die Daten in die div-Formulare ein});});});

Dann erstellen wir das Registrierungsformular, das altavehiculos.php heißt
Wir binden die notwendigen Bibliotheken in den Header ein, um mit jquery arbeiten zu können und die Felder zu validieren

Wir erstellen einige Stile, um der Form etwas Design und Ordnung zu geben. Für das Beispiel kann es in derselben Datei oder in einer separaten Stylesheet-Datei verwendet und dann im Header hinzugefügt werden.

Dann schreiben wir den Code zum Speichern der Daten und den Formularcode zum Erfassen der Daten

 $-Wert) {$_POST [$-Schlüssel] = mysql_real_escape_string ($-Wert); } $ sql = "INSERT INTO`fahrzeuge` (`vehicle_idtype`,` properties`, `brandid`,` modelid`, `photo1`) VALUES ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'merkmale']}', '{$ _POST [' Marken-ID ']}', '{$ _POST [' Modell-ID ']}', '{$ _POST [' Foto1 ']}') "; mysql_query ($ sql) oder sterben (mysql_error ()); echo "Registrierung abgeschlossen."; }?> var13 -> // Ich konsultiere Fahrzeuge, um die Fahrzeugtypauswahl auszufüllen Fahrzeugregistrierung
Fahrzeugauswahl

Ich erstelle auch die Jquery-Funktionen, um die Aussagen im Registrierungsformular zu verknüpfen

 // entsprechende Fahrzeugregistrierung und Marken auswählen $ (function () {$ ("# Fahrzeugregistrierung"). change (function () {vehicle = $ (this) .val (); // Ausgewählter Wert $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Ich nehme das Seitenergebnis und füge die Daten in die Kombination });});}); // verwandte Marken und Modelle auswählen $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Ausgewählter Wert $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Ich nehme das Seitenergebnis und füge die Daten in die Auswahl ein} );});});

Wenn wir fertig sind und den neuen Button drücken, sollte das Registrierungsformular wie folgt aussehen:

Wie wir sehen, wird das Formular ohne Umleitung der Seite angezeigt, wenn wir ein Plugin wie Firebug in unserem Browser installiert haben, können wir die Jquery-Aufrufe im Hintergrund sehen.

Schließlich werden wir den Validierungscode für das Formular mit einem einfachen jquery-Skript und den Regeln des Validator-Plugins erstellen. In der Datei functions.js erstellen wir ein Skript und verweisen auf die ID des Formulars und weisen ihm die Funktion validieren und die spanische Sprache zu. Andernfalls wird standardmäßig Englisch verwendet, wenn eine Fehlermeldung angezeigt wird.

 // Formularvalidierung $ (Dokument) .ready (Funktion () {$ ("# frmalta"). validieren ({lang: 'es' // oder welche Sprachoption Sie haben.});});

Dann fügen wir in der Komponente, die wir validieren möchten, die erforderliche Klasse hinzu, dh das Element darf nicht leer oder ohne Daten sein.
Die Validierungsklassen finden Sie in der Nachrichtendatei. Validierungsbeispiel
Bestätigen Sie eine E-Mail:
Bestätigen Sie ein Datum:
Bestätigen Sie eine Nummer:
Wenn wir also zum Beispiel unserem Formular die erforderliche Klasse zum textarea-Element hinzufügen und bei select-Anweisungen die erste Option leer lassen müssen, dann tritt der Fehler auf und das Formular wird nicht angezeigt, wenn nichts ausgewählt ist gesendet.
Merkmale

Beispiel für die ausgewählten Modelle:

 Modellauswahl

Wenn wir schließlich das Formular ausfüllen und auf die Schaltfläche Speichern klicken, sendet sich das Formular selbst durch einen jquery-Aufruf an dieselbe Seite altavehiculos.php, die das mit dem Wert 1 gesendete Flag sendet und dann die Einfügung in die MySQL-Tabelle aktiviert.
Ein Detail, das entweder bei jquery oder beim Redirecting auf traditionelle Weise noch zu erledigen ist, ist, dass beim Speichern der Daten die Liste oben aktualisiert wird, da das Registrierungsformular verschwindet, aber wir haben kein Ereignis, um die Fahrzeugliste zu bewässern. Daher müssen wir den Aufruf hinzufügen, damit die Liste innerhalb der Listenebene angezeigt wird, die wir zuvor im anderen Tutorial verwendet haben. Auf diese Weise können wir Informationen registrieren, wenn die Seite umgeleitet oder Hintergrundaufgaben ausgeführt werden, ohne dass der Benutzer die Seite umleiten muss oder um der Webanwendung mehr Interaktivität oder Transparenz zu verleihen, ermöglicht es auch die Wiederverwendung des Quellcodes, da es mit jedem Browser und Gerät kompatibel ist, das mit Javascript kompatibel ist.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben