Focus mode

Node.js

Fotoğraf Bilgisi Güncellemek

Fotoğraf Bilgilerini Güncellemek


Bu bölümde yüklediğimiz fotoğraflara ait bilgileri nasıl güncelleyeceğimiz üzerine konuşacağız. Senaryomuz şu şekilde Update Details butonuna tıklandığında bir GET reguest sonucunda edit sayfası açılacak bu sayfada bulunan formda formlara ait olan önceki bilgiler bulunacak, bilgilerde bir değişiklik yaptığımızda sonrasında POST request yardımıyla güncellenmiş bilgilerle tekil fotoğraf sayfasına yöneleceğiz.


Update butonuna tıkladığımız zaman açılacak edit.ejs template'i add.ejs den faydalanarak oluşturacağız. Güncellenek Fotoğraf bilgisine ait olan _id yi de photo.ejs deki Update Details linkine href="/photos/edit/<%= post._id %>" de yakalıyoruz. İlgili yönlendirme de aşağıdaki gibi olacaktır.


app.get('/photos/edit/:id', async (req, res) => {
  const photo = await Photo.findOne({ _id: req.params.id });
  res.render('edit', {
    photo,
  });
});


Edit template sayfasına ulaştığımızda ise ilgili photo bilgisinin hali hazırda görünmesini istiyoruz. Bunun için form alanlarındaki value değerlerini görmemiz gerekir. Bunun için aşağıdaki kodları yazacağız edit template içerisindeki ilgili form alanlarına.


<%= photo.title %>
<%= photo.description %>


Böylelikle "GET" request aşaması tamamlanmış oldu. Şimdi ise yapmamız gereken değişen bu bilgileri "POST" request ile göndemek ancak değişen bilgileri göndermek için biz http PUT request kullanacağız. Tarayıcılar bu PUT requesti desteklemedikleri için yapacağımız PUT requesti tarayıcının anlayacağı POST request şeklinde simüle edeceğiz. Bunun için ise method-override modülünü kullanacağız.


npm i method-override


Bu metodu çağıracağız ve middleware olarak kayıt edeceğiz.


const methodOverride = require('method-override');
-----
app.use(methodOverride('_method'));


edit template içerisindeki formumuzda POST requesti PUT requeste dönüştürmek için aşağıdaki düzenlemeyi yapacağız.


form method="POST" action="/photos/<%= photo._id %>?_method=PUT"


Şimdi app.js içerisindeki bu PUT request yönlendirmesini yapacağız.


app.put('/photos/:id', async (req, res) => {
  const photo = await Photo.findOne({ _id: req.params.id });
  photo.title = req.body.title
  photo.description = req.body.description
  photo.save()

  res.redirect(`/photos/${req.params.id}`)
});


Patika Plus Banner

Yazılım Kariyerinde İlerlemeni Hızlandıracak Eğitimler

Kendi kendine yazılım öğrenirken zorlanıyor, takıldığın noktalarda bir mentore mi ihtiyaç duyuyorsun? Patika+ programlarımız ile 4-8 aylık yoğun eğitim kamplarına katıl, proje tabanlı canlı dersler ve sana özel hazırlanmış eğitimlerle gereken tüm yetenekleri kazan, iş hayatına başla!

Comments

You need to enroll in the course to be able to comment!