✅ Dynamiczne tworzenie aplikacji internetowych z Jquery, PHP I MySQL

Spisie treści

Połączenie PHP i Jquery jest jedną z najczęściej używanych technik tworzenia dynamicznych aplikacji internetowych.
Biblioteka JQuery zapewnia wiele wtyczek Jquery, których programiści używają, aby nadać swoim aplikacjom dużą dynamikę, aby poprawić wrażenia odwiedzających zarówno w przeglądarce internetowej, jak i na urządzeniu mobilnym. Będziemy dalej rozwijać aplikację samouczka Generuj listy dynamiczne za pomocą Jquery, Php i Mysql, dodamy dynamiczne formularze do rejestracji i modyfikacji informacji, stosując kombinację php i jquery możemy wykonać to zadanie bez przekierowywania strony.
Dodamy również wtyczkę jquery.validator co pozwoli nam zweryfikować pola formularza.
UwagaDo tego samouczka będziemy potrzebować wtyczki, którą możemy pobrać ze strony http://jqueryvalidation.org/, gdy ją pobierzemy, rozpakujemy ją i będziemy mieć wszystkie pliki, którymi na razie interesują nas tylko dwa, czyli:
jquery.validate.js czym jest sama wtyczka wiadomości_es.js czyli plik, w którym umieścimy wiadomości dla gościa i możemy go przetłumaczyć według języka.
Pliki dodajemy do katalogu projektu:

Mamy wtedy wygenerowaną listę pojazdów, dodamy formularz do rejestracji pojazdów.

Kontynuując kod z poprzedniego samouczka, musimy mieć warstwę, w której formularze będą wyświetlane po ich wywołaniu za pomocą Jquery, w tym celu pod nowym przyciskiem utworzymy warstwę formularzy.

POWIĘKSZAĆ

W nagłówku strony index.php dodajemy biblioteki jquery.validator oraz wiadomości. Następnie wykorzystamy je do tworzenia dynamicznych form

Jeśli nie chcemy pobierać wtyczki, możemy z niej skorzystać z zewnętrznego serwera

Teraz utworzymy pliki z formularzem, który posłuży do rejestracji pojazdu i który będziemy wywoływać z nowego przycisku. W tym celu musimy upewnić się, że nowy przycisk posiada identyfikator (identyfikator), dzięki czemu będziemy mogli wtedy rozpoznać, kiedy nastąpi zdarzenie, w którym następuje np. kliknięcie. Wtedy kod przycisku będzie następujący:
Nazwa komponentu i identyfikator mogą być takie same, ale unikalne dla każdego komponentu html. W pliku functions.js piszemy następujący kod, który wykryje kliknięcie myszą w przycisk newvehiculo i wywoła plik hivehiculos z formularzem rejestracji.

 // Wywołaj formularz rejestracyjny pojazdu $ (function () {$ ("# newvehiculo"). Kliknij (function () {$ .get ("http://localhost/proyectos/agenciaautos/altavehiculos.php", function (data) ) {$ ("# formularze").html (dane);// biorę wynik strony i wstawiam dane do formularzy div});});});

Następnie tworzymy formularz rejestracyjny, który będzie się nazywał altavehiculos.php
Włączamy niezbędne biblioteki w nagłówku, aby móc pracować z jquery i walidować pola

Tworzymy kilka stylów, aby nadać formie trochę designu i porządku. Na przykład może być użyty w tym samym pliku lub w osobnym pliku arkusza stylów, a następnie dodany w nagłówku.

Następnie piszemy kod do zapisania danych i kod formularza do przechwycenia danych

 wartość $) {$ _POST [klucz $] = mysql_real_escape_string (wartość $); } $ sql = "WSTAW DO` pojazdów` (`vehicle_idtype`,` charakterystyka`, `brandid`,` modelid`, `photo1`) WARTOŚCI ('{$ _POST [' vehicle_idtype ']}', '{$ _POST [ 'characteristics']}', '{$ _POST [' identyfikator marki ']}', '{$ _POST [' identyfikator modelu ']}', '{$ _POST [' zdjęcie1 ']}') "; mysql_query ($ sql) lub umrzeć (mysql_error ()); echo "Rejestracja zakończona."; }?> var13 -> // Sprawdzam pojazdy, aby wypełnić wybór typu pojazdu Rejestracja pojazdu
Wybór pojazdu

Tworzę również funkcje Jquery do powiązania oświadczeń w formularzu rejestracyjnym

 // wybierz powiązane rejestracje i marki pojazdów $ (function() {$ ("# rejestracja pojazdu").change (function() {vehicle = $ (this) .val()); // Wybrana wartość $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca").html (data); // biorę wynik strony i wstawiam dane do kombi });});}); // wybierz powiązane marki i modele $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // Wybrana wartość $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo").html (data); // biorę wynik strony i wstawiam dane w select} );});});

Po zakończeniu, jeśli wykonamy i wciśniemy nowy przycisk, formularz rejestracyjny powinien wyglądać następująco:

Jak widzimy, formularz jest wyświetlany bez przekierowywania strony, jeśli mamy zainstalowaną wtyczkę typu Firebug w naszej przeglądarce, możemy zobaczyć wywołania Jquery w tle.

Na koniec zrobimy kod walidacji formularza za pomocą prostego skryptu jquery i reguł wtyczki walidatora. Wewnątrz pliku functions.js tworzymy skrypt i odwołujemy się do identyfikatora formularza i przypisujemy mu funkcję validate oraz język hiszpański, w przeciwnym razie domyślnie będzie to angielski, gdy pojawi się komunikat o błędzie.

 // walidacja formularza $ (dokument) .ready (function () {$ ("# frmalta"). validate ({język: 'es' // lub dowolna opcja językowa.});});

Następnie w komponencie, który chcemy zwalidować dodajemy wymaganą klasę, czyli element nie może być pusty ani bez danych.
Klasy walidacji można znaleźć w pliku komunikatów. Przykład walidacji
Potwierdź e-mail:
Zatwierdź datę:
Sprawdź numer:
Czyli jeśli dodamy wymaganą klasę do naszego formularza np. do elementu textarea, a w przypadku instrukcji select musimy pozostawić pierwszą opcję pustą, to jeśli nic nie zostanie zaznaczone, wystąpi błąd i formularz nie zostanie wysłano.
funkcje

Przykład dla wybranych modeli:

 Wybierz model

Na koniec, jeśli wypełnimy formularz i klikniemy przycisk Zapisz, formularz wyśle się sam wykonując wywołanie jquery do tej samej strony altavehiculos.php, która wysyła flagę wysłaną z wartością 1, a następnie aktywuje wstawienie w tabeli MySQL.
Jednym szczegółem, który pozostaje do zrobienia albo z jquery, albo przekierowaniem w tradycyjny sposób, jest to, że po zapisaniu danych lista na górze jest odświeżana, ponieważ formularz rejestracyjny znika, ale nie mamy żadnego zdarzenia do nawadniania listy pojazdów, dlatego musimy dodać wywołanie, aby lista była wyświetlana w warstwie listy, z której korzystaliśmy wcześniej w innym samouczku, w ten sposób możemy zarejestrować informacje o przekierowywaniu strony lub wykonywaniu zadań w tle bez konieczności przekierowywania strony lub aby zapewnić większą interaktywność lub przejrzystość aplikacji internetowej, umożliwia również ponowne wykorzystanie kodu źródłowego, ponieważ jest on zgodny z dowolną przeglądarką i urządzeniem zgodnym z javascript.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt