Jquery, Php VE MySQL ile dinamik web uygulaması geliştirme

PHP ve Jquery kombinasyonu, dinamik Web uygulamaları geliştirmek için en çok kullanılan tekniklerden biridir.
JQuery kitaplığı, geliştiricilerin uygulamalarına hem İnternet tarayıcısında hem de mobil cihazda ziyaretçi deneyimini iyileştirmek için çok fazla dinamizm vermek için kullandıkları birçok Jquery Eklentisi sağlar. Jquery, Php ve Mysql ile Dinamik Listeler Oluştur öğretici uygulamasını geliştirmeye devam edeceğiz, bilgileri kaydetmek ve değiştirmek için dinamik formlar ekleyeceğiz, php ve jquery kombinasyonunu uygulayarak bu görevi sayfayı yönlendirmeden gerçekleştirebiliriz.
Eklentiyi de ekleyeceğiz jquery.validator bu, formun alanlarını doğrulamamıza izin verecek.
DikkatBu eğitim için http://jqueryvalidation.org/ adresinden indirebileceğimiz eklentiye ihtiyacımız olacak, indirdiğimizde onu açıyoruz ve şimdilik sadece iki tanesiyle ilgilendiğimiz tüm dosyalara sahip olacağız, bunlar:
jquery.validate.js eklentinin kendisi nedir mesajlar_es.js ziyaretçiye mesajları koyacağımız ve dile göre çevirebileceğimiz dosyadır.
Dosyaları proje dizinine ekliyoruz:

Daha sonra oluşturulan araç listesine sahibiz, araçları kaydetmek için bir form ekleyeceğiz.

Bir önceki dersteki kod ile devam edersek, formların Jquery ile çağrıldığında görüntüleneceği bir katmana sahip olmamız gerekiyor, bunun için yeni buton altında form katmanını oluşturacağız.

BÜYÜT

index.php web sayfasının başlığına jquery.validator kütüphanelerini ve mesajları ekliyoruz. Sonra bunları dinamik formlar yapmak için kullanacağız.

Eklentiyi indirmek istemiyorsak harici bir sunucudan kullanabiliriz.

Şimdi yeni butondan çağıracağımız ve araç kaydı için kullanacağımız form ile dosyaları oluşturacağız. Bunu yapmak için, yeni düğmenin bir kimliğe (tanımlayıcı) sahip olduğundan emin olmalıyız, böylece örneğin bir tıklamanın gerçekleştiği bir olayın ne zaman gerçekleştiğini anlayabiliriz. Ardından düğme kodu aşağıdaki gibi olacaktır:
Bileşenin adı ve tanımlayıcı aynı olabilir ancak her html bileşeni için benzersiz olabilir. Functions.js dosyasına newvehiculo butonuna mouse ile tıklandığında algılayacak ve kayıt formu ile birlikte hivehiculos dosyasını çağıracak aşağıdaki kodu yazıyoruz.

 // Araç kayıt formunu çağırın $ (function () {$ ("# newvehiculo"). (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data )) öğesini tıklayın. {$ ("# form").html (data); // Sayfa sonucunu alıyorum ve verileri div formlarına ekliyorum});});}); 

Ardından altavehiculos.php olarak adlandırılacak olan kayıt formunu oluşturuyoruz.
Jquery ile çalışabilmek ve alanları doğrulamak için gerekli kütüphaneleri başlıkta birleştiriyoruz.

Forma biraz tasarım ve düzen vermek için bazı stiller yaratıyoruz. Örnek olarak, aynı dosyada veya ayrı bir stil sayfası dosyasında kullanılabilir ve daha sonra başlığa eklenebilir.

Sonra verileri kaydetmek için kodu ve verileri yakalamak için form kodunu yazıyoruz.

 $ değeri) {$ _POST [$ anahtarı] = mysql_real_escape_string ($ değeri); } $ sql = "INSERT INTO` araçlar` (`araç_kimliği türü`,`özellikler`, `brandid`,` modeld`, `foto1`) DEĞERLER ('{$ _POST ['araç_idtipi ']}', '{$ _POST [ 'özellikler']}', '{$ _POST [' marka kimliği ']}', '{$ _POST [' model kimliği ']}', '{$ _POST [' photo1 ']}') "; mysql_query ($ sql) veya die (mysql_error()); echo "Kayıt tamamlandı."; }?> var13 -> // Araç tipi seçimini doldurmak için araçlara danışıyorum Araç kaydı
Araç Seçimi 
Marka Seçimi
Model Seçimi
Fotoğraf
özellikleri

Ayrıca kayıt formundaki ifadeleri ilişkilendirmek için Jquery fonksiyonlarını da oluşturuyorum.

 // ilgili Araç Kaydı ve Markaları seçin $ (function () {$ ("# araç kaydı").change (function () {araç = $ (bu) .val (); // Seçilen değer $ .get ("http" : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca").html (data); // Sayfa sonucunu alıyorum ve verileri birleşik });});}); // ilgili Markaları ve Modelleri seçin $ (function () {$ ("# highbrand") change (function () {brand = $ (bu) .val (); // Seçilen değer $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo").html (data); // Sayfa sonucunu alıyorum ve verileri seçime ekliyorum} );});}); 

Bitirdikten sonra, çalıştırıp yeni düğmeye basarsak, kayıt formu aşağıdaki gibi görünmelidir:

Gördüğümüz gibi form sayfayı yönlendirmeden gösteriliyor, tarayıcımızda Firebug gibi bir eklenti kuruluysa arka planda Jquery çağrılarını görebiliriz.

Son olarak, basit bir jquery betiği ve validator eklentisinin kurallarını kullanarak form için doğrulama kodunu yapacağız. Functions.js dosyasının içinde bir komut dosyası oluşturuyoruz ve formun kimliğine başvuruyoruz ve ona function validate ve İspanyolca dilini atadık, aksi takdirde bir hata mesajı gösterdiğinde varsayılan olarak İngilizce olur.

 // form doğrulama $ (belge) .ready (function () {$ ("# frmalta") validate ({lang: 'es' // veya hangi dil seçeneğiniz varsa.});}); 

Daha sonra doğrulamak istediğimiz bileşene gerekli sınıfı ekliyoruz, yani eleman boş veya verisiz olamaz.
Doğrulama sınıfları mesaj dosyasında bulunabilir. Doğrulama örneği
Bir e-postayı doğrulayın:
Bir tarihi doğrulayın:
Bir numarayı doğrulayın:
Yani formumuza gerekli sınıfı örneğin textarea elemanına eklersek ve select deyimleri durumunda ilk seçeneği boş bırakmalıyız, o zaman hiçbir şey seçilmezse hata oluşacak ve form olmayacaktır. gönderilmiş.
özellikleri

Seçili modeller için örnek:

 Model Seçimi 

Son olarak, formu doldurup Kaydet butonuna tıklarsak, altavehiculos.php ile aynı sayfaya jquery çağrısı yaparak form kendini gönderecektir, bu da 1 değeri ile gönderilen flagı gönderip MySQL tablosundaki eklemeyi aktifleştirecektir.
Jquery ile ya da geleneksel yöntemle yeniden yönlendirme ile yapılması gereken bir ayrıntı, veriler kaydedildiğinde, kayıt formu kaybolduğu için en üstteki listenin yenilenmesi, ancak araç listesini sulamak için herhangi bir etkinliğimiz yok, bu nedenle, listenin daha önce diğer öğreticide kullandığımız liste katmanı içinde görüntülenmesi için çağrıyı eklemeliyiz, bu şekilde, kullanıcının sayfayı yeniden yönlendirmesi gerekmeden sayfayı yeniden yönlendiriyorsa veya arka plan görevleri yapıyorsa bilgileri kaydedebiliriz veya web uygulamasına daha fazla etkileşim veya şeffaflık kazandırmak için, javascript ile uyumlu herhangi bir tarayıcı ve cihazla uyumlu olduğu için kaynak kodun yeniden kullanılmasına da izin verir.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.