Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan yazılım eğitim serisinin on birinci bölümüdür. Eğitmen, form tasarımı ve JavaScript kullanımını adım adım göstermektedir.
- Video, formun CSS özelliklerinin geliştirilmesi ile başlayıp, JavaScript ile formun boş alanlarının kontrolü ve gönder butonunun disable edilmesi ile devam etmektedir. Daha sonra React ve Vue.js teknolojileri kullanılarak form gönderme işleminin nasıl yapılacağı, Axios kütüphanesi ile veri gönderimi ve form başarılı olduğunda kullanıcıya bildirim verme işlemleri anlatılmaktadır.
- Eğitim, formun gönderildiğinde router push ile listeye yönlendirme yaparak kullanıcıya bildirim gönderme işlemini uygulamalı olarak göstermektedir. Video, bir serinin parçası olup, bir sonraki videoda listeye basıldığında işin biteceği belirtilmektedir.
- Formun Eksik Alanlarının Düzeltilmesi
- Bu videoda formun eksik görülen alanları düzeltilip, formun VX'e bağlanması ve gönder butonunun VX'e bir action'a bağlanması yapılacak.
- Formun CSS kısmı düzeltilecek ve ardından metotlar yazılacak.
- 00:50Kart Klas Ayarları
- Kart klasına max-width, marjin ve border özellikleri verilecek.
- Header'a border-top-left-radius 15 piksel, box-shadow 5 piksel ve bg-color 4445e özellikleri verilecek.
- Kart title'a font-size, font-weight, border-bottom-left-radius 1,25 piksel, border-bottom-right 1 piksel, box-shadow ve padding-left özellikleri verilecek.
- 06:32Form Klas Ayarları
- Forma padding 45 piksel ve bg-color 3444495e özellikleri verilecek.
- Formun text-light ve text-warning özellikleri için Bootstrap'un sunduğu class'lar kullanılacak.
- Forma border-bottom-left-radius 15 piksel, border-bottom-right 15 piksel ve box-shadow özellikleri verilecek.
- 12:55Gönder Butonu ve JavaScript
- Gönder butonu disable edilecek, eğer formdaki herhangi bir alan boşsa.
- JavaScript ile formdaki objelerin değerleri kontrol edilecek ve boş alanlar varsa buton disable edilecek.
- 15:04Form Gönder Butonu ve Durum Kontrolü
- Form gönder butonu, formun boş olup olmadığına göre disable veya enable durumuna getiriliyor.
- Form boşken buton disable oluyor ve tıklanamıyor, form doldurulduğunda buton enable oluyor.
- 16:25Axios Kütüphanesi Kullanımı
- Axios, backend endpoint'e GET, POST, DELETE gibi requestleri göndermenizi sağlayan bir kütüphane.
- Axios kütüphanesi npm ile yükleniyor ve package.json dosyasına ekleniyor.
- Axios, Vue Store'a import edilerek istek atma işlemleri için kullanılacak.
- 19:15Form Gönderme İşlemi
- Form gönderme işlemi için "sendForm" adında bir action oluşturuluyor.
- SendForm action'ı, form verilerini Axios ile POST isteği olarak gönderiyor.
- Gönderilen veriler, "createItem" endpoint'ine ve "mySeller" parametresine göre gönderiliyor.
- 20:44State ve MapActions Kullanımı
- MapActions ve mapState fonksiyonları kullanılarak form verileri state'e aktarılıyor.
- SendForm action'ı, form verilerini state'e göndererek formun durumunu güncelliyor.
- Form verileri, state'e aktarıldıktan sonra mapState ile komponente aktarılıyor.
- 22:29Veri Alma ve Listeleme
- GetItems adında bir action oluşturuluyor ve Axios GET isteği ile veriler alınıyor.
- Alınan veriler, state'e aktarılıyor ve mapState ile komponente aktarılıyor.
- Form verileri, state'e aktarıldıktan sonra mapState ile komponente aktarılıyor.
- 26:17Form Gönderme ve Tost Bildirimi
- Form gönderildiğinde, veriler state'e aktarılıyor ve try-catch bloğu ile hata kontrolü yapılıyor.
- Form gönderildiğinde, kullanıcı list sayfasına yönlendiriliyor.
- Form başarılı bir şekilde oluşturulduğunda, Vuex'in toast özelliği kullanılarak kullanıcıya bildirim gösteriliyor.
- 28:50Form Gönderme ve Hata Mesajı
- Form oluşturulurken veya gönderilirken oluşan hatalar için "error" mesajı gösteriliyor.
- Form başarılı bir şekilde gönderildiğinde "form başarılı bir şekilde gönderilmiştir" mesajı görüntüleniyor.
- Hata mesajı on saniye boyunca ekranda kalıyor ve sonra kendi kendine gidiyor.
- 29:49Router Kullanımı
- Router push fonksiyonu kullanılarak kullanıcı listeye yönlendiriliyor.
- Form gönderildiğinde network'te istek atıldığı görülebiliyor.
- Form gönderildiğinde "cand propert land of undefined" hatası alınıyor.
- 31:40Hata Çözümü ve Test
- Hata, sayfa oluşturulduğunda get items fonksiyonunun çağrılmamasından kaynaklanıyor.
- Get items fonksiyonu sayfa oluşturulduğunda çağrıldığında iki adet ürün döndürüyor.
- Form başarıyla gönderildiğinde kullanıcıya bildirim gösteriliyor ve router listeye yönlendiriyor.
- 33:38Video Özeti ve Kitap Önerisi
- Video boyunca formun bazı kısımları düzeltildi ve gönder butonunda listeye gitme özelliği eklendi.
- Kullanıcıya bildirim gönderme özelliği gösterildi.
- Bir sonraki videoda listeye bastıktan sonra işin biteceği belirtildi.
- "Simyacı" kitabı önerildi ve kitaptan "çünkü hayat senin kişisel menkıbeni yaşamanı istiyor" cümlesi paylaşıldı.