Html tablosu, Jquery, php ve Mysql ile satırlar, kontroller ve dinamik veriler ekler

Personel listesi yapacağız. Önce infotec adlı sözde bir teknoloji şirketinin veritabanını oluşturacağız ve ardından mysql'de Personal tablosunu oluşturacağız, phpmyadmin'den veya başka bir mysql yöneticisinden sql kodunu kullanabiliriz.

 TABLO OLUŞTURMAYIN 'kişisel' ('id' int (11) DEĞİL NULL AUTO_INCREMENT, 'name' varchar (100) NULL DEĞİL, 'alan' varchar (100) NULL DEĞİL, 'set' varchar (100) NULL DEĞİL, `email` varchar (100) NULL DEĞİL, BİRİNCİL ANAHTAR (` id`)) MOTOR = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1; - - Bazı veriler ekliyoruz - INSERT INTO `kişisel` (`kimlik`, `ad`,`alan`, `pozisyon`,`eposta`) DEĞERLER (1, 'Carlos Alonso', 'Informática', 'Geliştirici', ' [email protected] '), (2,' Jose Garrido ',' Yönetim ',' Muhasebeci ',' [email protected] '), (3,' Ana Junin ',' Informática ',' Tasarım Grafiği ' ,' [email protected] '); 

Burada SQL kodu çalıştırıldığında tablonun nasıl göründüğünü görebiliriz.

BÜYÜT

Daha sonra mysql'i işlemek için php'de basit bir sınıf oluşturacağız, bu sınıf başka projelerde yeniden kullanılabilir. config.php veya classDB., Php dosyasını oluşturuyoruz ve aşağıdaki kodu ekliyoruz.

bağlantı)) {$ this-> bağlantı = (mysql_connect ("localhost", "root", "")) veya die (mysql_error ()); mysql_select_db ("infotec", $ this-> bağlantı) veya die (mysql_error ()); }} genel işlev sorgusu ($ sorgusu) {$ sonuç = mysql_query ($ sorgusu, $ bu-> bağlantı); if (! $ sonuç) {echo 'MySQL Hatası:'. MySQL Hatası (); çıkış; } $ sonuç döndür; } public işlevi satırları alır ($ sorgusu) {return mysql_fetch_array ($ sorgusu); } genel işlev toplam satır sayısı ($ sorgusu) {dönüş mysql_num_rows ($ sorgusu); }}?> var13 ->

Şimdi projenin ana dosyasını index.php olacak, mümkünse Xampp gibi yerel bir sunucu oluşturacağız, burada veritabanını sorgulayacağız ve kişisel tabloyu bir html tablosunda göstereceğiz.

 MySQL(); // Kişisel tabloya başvuruyoruz $ sorgu = $ db-> sorgu ("SELECT * FROM Personal"); ?> var13 ->
İnsan kaynakları

 satır al ($ sorgu)) {?> var13 -> 
 
 
İD
 
İsim
 
Alan
 
Konum
 
e-posta
 
Hareketler
 
 
 
 
 
 
 
 
 

 

Tabloyu gösteren php kodunun sonucu aşağıdaki gibi olacaktır:

Daha sonra stiller adında bir stil sayfaları dosyası oluşturacağız. CSS tabloya ve satırlara daha sonra fare üzerlerine geldiğinde biraz tasarım vermek için.

Dosyayı web sayfasının başına ekleyeceğiz

MySQL'de sahip olduğumuz tabloyu php ve html kullanarak göstermeyi başardık. Şimdi, jquery aracılığıyla, web'i yeniden yönlendirmeden ve başka bir ekran açmadan, ancak aynı veri satırında yapmadan dinamik olarak veri eklememize ve kaydetmemize izin veren bir komut dosyası oluşturacağız.
Tablonun altındaki kodda, yeni satırlar eklemek için jquery işlevini çağırmak için bir düğme ekliyoruz.

Yeni 

Butondan sonra satır eklemeyi mümkün kılacak jquery betiğini ekleyeceğiz.

Komut dosyasında, birkaç satır eklememiz gerekirse, html öğelerinin adlarını bir matris olarak kullanmalıyız, ardından veriler, her biri 0,1,2 konumunda olan bir matris olarak kaydedilecek ve daha sonra bizi php'den okuyacaktır. .
Bu nedenle isim, örneğin iki parantez ile matris olduğunu belirtir.
Verileri mysql veritabanına kaydedecek dosyayı oluşturuyoruz, metin kutularından verileri alıyor ve daha sonra gönderdiğimizde dizileri okuyoruz ve for döngüsünden geçiyoruz.

 MySQL(); // gönderilen verileri okur ve dizilerde saklarız $ name = $ _ POST ['name']; $ alan = $ _ POST ['alan']; $ gönderi = $ _ POST ['gönder']; $ email = $ _ POST ['email']; // ($ i = 0; $ i sorgusu ($ sql);} için mysql tablosuna giriyoruz ve verileri giriyoruz // ilk sayfa başlığına dönüyoruz ('Location: index.php');?> var13 - -> 

Kaydet butonuna bastığımızda veriler Mysql veritabanına kaydedilecek ve listeye geri döneceğiz. Hiçbir doğrulama olmadığını ve burada yalnızca bir tabloya nasıl satır ekleneceğini göstermek ve büyük listelerdeki bilgileri daha kolay ve daha rahat bir şekilde düzenleyebilmek için tasarlandığını unutmayın.

BÜYÜT

Kullanıcıya her kutuya ne gireceğini söylemek istiyorsak, metin kutusuna bir yorum yazmak için placeholder özelliğini kullanabiliriz. Metin kutusuna bir şey yazılırsa bu yorum kaybolur ve hiçbir şey yazılmazsa kaydedilmez, yalnızca kullanıcıya ne tür veri yazacağını veya veri girerken onlara yardımcı olacak başka bir göstergeyi belirtmeye yarar.
Bunu yapmak için, yeni satırı oluşturan komut dosyasını değiştiririz, her metin kutusuna bir yer tutucu ve kullanıcıya göstermek istediğimiz ilgili yorum veya göstergeyi ekleriz.

 var satır = '
 '+ ''+ ''+ ''+ '

'; 

BÜYÜT

Yeni bir satır eklerken, her metin kutusunda göstergeleri göreceğiz. Satır eklemek için komut dosyasına ek olarak, jquery.validator eklentisi ile her metin kutusundaki verileri doğrulamak için bir komut dosyası uygulayabiliriz. Başka bir öğreticide, aynı HTML tablosunda düzenleme ve silme eylemlerini dinamik olarak oluşturmak için hücre kimliğinden verileri okuyarak verileri nasıl düzenleyeceğinizi ve verileri ve tablonun ilgili satırını nasıl sileceğimizi göreceğiz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.