Veri Tablosu Yapımı

Hazırlayan:Furkan Fatih Çiftçi-22430070037

Projede react  kullanarak tek sayfalı uygulama olan (SPA) yöntemi ile Veri Tablosu yaptım.

Projemi  dosyamı npx create-react-app verisitesi-react-app   bu kodları  terminale yazarak react uygulaması oluşturdum içine veri atabildiğimiz bir veri tablosu oluşturdum.Veri tablosunun dış görünümü Aşağıdaki şekildeki gibidir.

Bu veri tablosu aynı SQL'de olduğu gibi içine veri  ekleyebileceğiz.Tablo oluşturacağım alt tarafında soldan sağ'a dört adet boşluk olucak bunlar sırasıyla soldan sağ'a ad yeri,adres yeri,telefon numarası yeri ve email  buraya kişilerin bilgilerini girebileceğiz.

Sitede içinde başında zaten veri olucak ve bunların add butonuna basıp  üstüne veri ekleyebileceğiz ya da bu verileri delete butonuna basıp silebileceğiz ya da içindeki verileri edit butonuna basıp düzenleme hakkına sahip olabileceğiz.

Şimdi veri tablosu hakkındaki açtığım dosya'ya ve içindeki dosya sayfa kodları hakkında bilgi vericem.

 App.js'in içinde Classname  yani nesne adına sahip bir div ekleyeceğiz ver container oluşturacağız.Bu girdiğimiz kod ile veri tablosunun dış yapısı oluşacak.

App.js'de veri tablomuzun içindeki başlıklıkları App.js'in içine yazdığımız kodlar ile oluşturacağım.

App.js'de asıl işlemleri olucak map() kişiye göre satır ekleme kodu gibi  contact kodu sayesinde'de verdiğimiz değerleri görüntülemeye sahip olacağız  ve üstten eklediğim  App.js'e import sayesinde yani diğer sayfadaki içindeki kodları içine çekmiş olucam ve hepsi burda birleşmiş olucak.

Sayesinde  buton ID lerini (yani butonların görüntülenmesini) ve önceden kalan verileri direk bir sayfa toplama özelliğine sahip  olucak.

App.css'de ise girdiğimiz container yani tablo'nun  içinde yer alan yazı boyutunu  yazıyı sola hizalamayı ayarlarız .

Bunun yanında sütunların içinde yer alan yerlerde arkanın renk yapısını ayarlarız.

Butonların işlevi için bir klasör  açacağım  içine iki tane kod sayfası atacağım biri EditableRow.js diğeride  ReadOnlyRow.js sayfası olucak.

ReadOnlyRow.js :Sayfasında yazdığımız özellikleri  düzenlemeye ve silmeye işlev yarayan buton'a bastığımızda çalışmasını sağlayan kodlar olacaktır.

EditableRow.js :Sayfasında yazdığımız özellikleri kaydetmemizi sağlayan ve düzenlemeyi buton'a bastığımızda çalışmasını sağlayan kodlar olacaktır.

{ } mockdata.json:Sayfasında tablonun önceden yazdığımız  içinde olan verileri buraya yazıyoruz.