✅ Dezvoltare dinamică a aplicațiilor web Cu Jquery, Php ȘI MySQL

Cuprins

Combinația dintre PHP și Jquery este una dintre cele mai utilizate tehnici pentru dezvoltarea aplicațiilor web dinamice.
Biblioteca JQuery oferă multe pluginuri Jquery pe care dezvoltatorii le folosesc pentru a oferi aplicațiilor lor mult dinamism pentru a îmbunătăți experiența vizitatorilor atât pe browserul de internet, fie pe un dispozitiv mobil. Vom continua dezvoltarea aplicației tutoriale Generați liste dinamice cu Jquery, Php și Mysql, vom adăuga formulare dinamice pentru a înregistra și modifica informațiile, aplicând combinația de php și jquery putem realiza această sarcină fără a redirecționa pagina.
Vom adăuga și pluginul jquery.validator care ne va permite să validăm câmpurile formularului.
AtenţiePentru acest tutorial vom avea nevoie de pluginul pe care îl putem descărca de pe http://jqueryvalidation.org/, când îl descărcăm îl dezarhivăm și vom avea toate fișierele de care suntem interesați doar de două, deocamdată, care sunt:
jquery.validate.js care este pluginul în sine messages_es.js care este fișierul în care vom pune mesajele pentru vizitator și îl putem traduce după limbă.
Adăugăm fișierele în directorul proiectului:

Apoi avem lista generată de vehicule, vom adăuga un formular pentru înregistrarea vehiculelor.

Continuând cu codul din tutorialul anterior, trebuie să avem un strat în care formularele vor fi afișate atunci când sunt invocate cu Jquery, pentru aceasta, sub noul buton vom crea stratul de formulare.

MARI

În antetul paginii web index.php, adăugăm bibliotecile jquery.validator și mesaje. Apoi le vom folosi pentru a crea forme dinamice

Dacă nu dorim să descărcăm pluginul, îl putem folosi de pe un server extern

Acum vom crea fișierele cu formularul care va fi utilizat pentru înregistrarea unui vehicul și pe care îl vom invoca din noul buton. Pentru a face acest lucru, trebuie să ne asigurăm că noul buton are un id (identificator), astfel încât să putem recunoaște atunci când are loc un eveniment în care, de exemplu, are loc un clic. Apoi, codul butonului va fi următorul:
Numele componentei și identificatorul pot fi aceleași, dar unice pentru fiecare componentă html. În fișierul functions.js scriem următorul cod care va detecta clicul mouse-ului pe butonul newvehiculo și vom invoca fișierul hivehiculos cu formularul de înscriere.

 // Invocați formularul de înregistrare a vehiculului $ (funcție () {$ ("# newvehiculo"). Faceți clic pe (funcție () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", funcție (date) {$ ("# formulare"). html (date); // iau rezultatul paginii și introduc datele în formularele div});});});

Apoi creăm formularul de înregistrare care se va numi altavehiculos.php
Încorporăm bibliotecile necesare în antet pentru a putea lucra cu jQuery și pentru a valida câmpurile

Creăm câteva stiluri pentru a da formei un design și o ordine. Pentru exemplu, poate fi utilizat în același fișier sau într-un fișier de foaie de stil separat și apoi adăugat în antet.

Apoi scriem codul pentru a salva datele și codul formularului pentru a captura date

 $ valoare) {$ _POST [$ cheie] = mysql_real_escape_string ($ valoare); } $ sql = "INSERT INTO` vehicles" (`vehicle_idtype`,` caracteristici`, `brandid`,` modelid`, `photo1`) VALORI ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'caracteristici']} ',' {$ _POST ['ID marca']} ',' {$ _POST ['model id']} ',' {$ _POST ['photo1']} ') "; mysql_query ($ sql) sau die (mysql_error ()); ecou „Înregistrare finalizată.”; }?> var13 -> // Consult vehicule pentru a completa selecția tipului de vehicul Înmatriculare vehicul
Selectare vehicul

De asemenea, creez funcțiile Jquery pentru a raporta declarațiile din formularul de înregistrare

 // selectați înregistrarea vehiculului și mărcile asociate $ (funcție () {$ ("# înregistrare vehicul"). modificare (funcție () {vehicul = $ (aceasta) .val (); // Valoare selectată $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Iau rezultatul paginii și introduc datele în combo});});}); // selectați mărci și modele înrudite $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Valoarea selectată $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // iau rezultatul paginii și introduc datele în select} );});});

Odată terminat, dacă executăm și apăsăm butonul nou, formularul de înregistrare ar trebui să apară după cum urmează:

După cum putem vedea, formularul este afișat fără redirecționarea paginii, dacă avem un plugin ca Firebug instalat în browserul nostru, putem vedea apelurile Jquery în fundal.

În cele din urmă, vom face codul de validare pentru formular folosind un script jquery simplu și regulile pluginului de validare. În interiorul fișierului functions.js, creăm un script și ne referim la ID-ul formularului și îi atribuim funcția de validare și limba spaniolă, altfel va fi implicit limba engleză atunci când afișează un mesaj de eroare.

 // validare formular $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // sau orice opțiune de limbă aveți.});});

Apoi, în componenta pe care dorim să o validăm adăugăm clasa necesară, adică elementul nu poate fi gol sau fără date.
Clasele de validare pot fi găsite în fișierul de mesaje. Exemplu de validări
Validați un e-mail:
Validați o dată:
Validați un număr:
Deci, dacă adăugăm clasa necesară la formularul nostru la elementul textarea, de exemplu, și în cazul instrucțiunilor selectate, trebuie să lăsăm prima opțiune goală, atunci dacă nu este selectat nimic, eroarea va apărea și formularul nu va fi trimis.
Caracteristici

Exemplu pentru modelele selectate:

 Selectare model

În cele din urmă, dacă completăm formularul și facem clic pe butonul Salvare, formularul se va trimite singur făcând un apel jquery către aceeași pagină altavehiculos.php, care trimite steagul trimis cu valoarea 1 și apoi activează inserarea în tabelul MySQL.
Un detaliu care rămâne de făcut fie cu jQuery, fie redirecționând în mod tradițional, este că atunci când datele sunt salvate, lista din partea de sus este reîmprospătată, deoarece formularul de înmatriculare dispare, dar nu avem niciun eveniment care să irige lista vehiculelor, prin urmare, trebuie să adăugăm apelul astfel încât lista să fie afișată în stratul de listă pe care l-am folosit anterior în celălalt tutorial, în acest fel putem înregistra informații dacă redirecționăm pagina sau efectuăm sarcini de fundal fără ca utilizatorul să redirecționeze pagina sau pentru a oferi mai multă interactivitate sau transparență aplicației web, permite, de asemenea, reutilizarea codului sursă, deoarece este compatibilă cu orice browser și dispozitiv compatibil cu javascript.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv