Front-End ve Back-End nasıl birleştirilir?

Merhaba başlıkta olduğu üzere bu iki bağlantı nasıl yapılır? Mesela ben front end ile bir web site yaptım. Ve kendime bir e-posta yeri oluşturdum. E-posta yerini backende bağlamak istiyorum. Yani kısacası bu ikisi nasıl bağlanır?

Front-end ile site yaptim derken? Olayi biraz yanlis anlamissiniz. Normalde veriyi back-end isler ve tarayicinizin yorumlayacagi bir HTML dondurur. Fakat siz aradaki back-end'in islevini cikarmissiniz ve statik bir dosya servis ediyorsunuz.

Siteyi duz HTML, CSS dosyalari ile mi yaptiniz yoksa Angular, React, VueJS gibi framework mu kullandiniz. Lutfen daha fazla bilgi verin.

pottie4r dedi:

Front-End ile site yaptim derken? Olayi biraz yanlış anlamissiniz. Normalde veriyi Back-End isler ve tarayicinizin yorumlayacagi bir HTML dondurur. Fakat siz aradaki Back-End'in islevini cikarmissiniz ve statik bir dosya servis ediyorsunuz.

Siteyi duz HTML, CSS dosyalari ile mi yaptiniz yoksa Angular, React, VueJS gibi Framework mu kullandiniz. Lutfen daha fazla bilgi verin.

Genişletmek için tıkla...

Siteyi HTML-CSS ile yaptım ve bunu da bir veritabanına aktarmak istemiştim

Istediginiz db operasyonlarini gerceklestirecek bir back-end yazmaniz gerekiyor. Sonrasinda eger isterseniz bu back-end ile db'den veri alir ve HTML dondurursunuz isterseniz de API olarak birakir istek atarak veri cekersiniz.

Back-end isi yapan gerekirse sonuc donduren katmandir.

pottie4r dedi:

Istediginiz dB operasyonlarini gerceklestirecek bir Back-End yazmaniz gerekiyor. Sonrasinda eger isterseniz bu Back-End ile DB'den veri alir ve HTML dondurursunuz isterseniz de API olarak birakir istek atarak veri cekersiniz.

Back-End isi yapan gerekirse sonuç donduren katmandir.

Genişletmek için tıkla...

Peki backend HTML bağlantısını falan nasıl yapacağız(sorularım biraz saçma olabilir bu işte yeniyim birazcık ).Yani backendi yazdım mesela bunu HTML koduna nasıl aktaracağım

TeknoEmir dedi:

Peki backend HTML bağlantısını falan nasıl yapacağız(sorularım biraz saçma olabilir bu işte yeniyim birazcık ).Yani backendi yazdım mesela bunu HTML koduna nasıl aktaracağım

Genişletmek için tıkla...

Oncelikle bazi seylerden bahsetmemiz gerekiyor.

HTML ile baslayalim. Örnek veriyorum, sizin bir receiver(uydu alıcısı) cihazınız var ve bu receiver'a uydudan sinyal geliyor. Receiver cihazınız ise gelen bu sinyali yorumlayarak televizyonda görüntünün oluşmasını sağlıyor. HTML'i buradaki gelen sinyal olarak düşünmenizi istiyorum. HTML bir amaç değil sonuçtur.

Bir de şöyle bir örnek vereyim. Patronunuz sizden yeni gelen bir çalışanı kaydetmenizi istedi. Siz de kaydettiniz ve o çalışanla beraber bütün çalışanların tablosunu patronun önüne koydunuz. Buradaki patrona verdiğiniz tablo, web'deki HTML'in karşılığıdır. Yine söylüyorum HTML amaç değil sonuçtur.

Back-end bir iş yapıyor ve olumlu/olumsuz bir sonuca ulaşıyor. Ulaştığı sonuca göre de size bir HTML veriyor. Siz de tarayıcı ile, gelen HTML verisine bir görüntü katıyorsunuz.

Buraya kadar iyice anladıysanız artık HTML'in içine nasıl back-end koyacağım diye sormazsınız. Siz artık "İşi yapıp sonucunda HTML döndürmem gerekiyor." düşüncesine sahipsiniz. Yani ufkunuz açıldı ve artık doğru bir bakış açısına sahipsiniz.

İşi nasıl yapacağınız ise yazacağınız back-end'e göre şekillenir. Siz bu back-end ile sonuç döndüreceksiniz.

Eskiden HTML, CSS ile yapılan sitelerin kodlarının arasına sunucu taraflı çalışacak kod yazarak bu bağlantılar yapılıyordu. Yaygın yöntem buydu. PHP mesela doğrudan HTML kodunun içine yazılarak kullanılabiliyor. Hala bu şekilde çalışabilirsiniz. En kolay yöntem budur. Tabi böyle çalışınca frontend-backend ayrımı kalmıyor. Her şeyi tek yerde yapmış oluyorsunuz. Bu da büyük projelerde çalışmayı zorlaştırıyor her şey birbirine giriyor.

Frontend-Backend ayrımı başladıktan sonra şöyle bir mantık oluştu. Backend komple Web API olarak geliştiriliyor. Frontend ise Vue, React, Next, Nuxt gibi frontend teknolojileri ile geliştiriliyor. Bu frontend kısmından normal web istekleri atarak kendi geliştirdiğiniz backend webapi'a bağlanıyorsunuz. Yani frontend backend iletişimi web istekleri ile yapılıyor. Herhangi bir React, Vue anlatım videosundan bu mantığa bakabilirsiniz.

Siteyi HTML, CSS ile yaptıysanız Vue, React vs. kullanmadıysanız en kolay yöntem PHP ile doğrudan veritabanına bağlanmak, çektiğiniz verileri php göstererek kullanmak olur. Buna bakabilirsiniz. PHP veritabanı bağlantısı diye bakabilirsiniz. HTML, CSS bilginiz varsa temel mantığı çok çabuk çözersiniz.

TeknoEmir dedi:

Merhaba başlıkta olduğu üzere bu iki bağlantı nasıl yapılır? Mesela ben front end ile bir web site yaptım. Ve kendime bir e-posta yeri oluşturdum. E-posta yerini backende bağlamak istiyorum. Yani kısacası bu ikisi nasıl bağlanır?

Genişletmek için tıkla...

Basit bir şekilde anlatırsak 2 adet katman var. Frontend, backend. Burada backend 2'ye ayrılır: Web service, database. Web service Frontend ile database arasındaki bağlantıyı sağlar. Web servise olarak REST API araştırmanı öneririm. Database olarak MySql, PostgreSql, MongoDB bakabilirsin.

Nullo dedi:

Basit bir şekilde anlatırsak 2 adet katman var. Frontend, backend. Burada backend 2'ye ayrılır: Web service, database. Web service Frontend ile database arasındaki bağlantıyı sağlar. Web servise olarak REST API araştırmanı öneririm. Database olarak MySQL, PostgreSql, MongoDB bakabilirsin.

Genişletmek için tıkla...

Cevabınız için teşekkür ederim. Herhalde sorumun cevabı rest API. Bu kategoriye ne deniyor. Mesela Google'a web service yazınca karşıma tam bir kategori çıkmıyor. Nasıl daha fazla detaylı öğrenebilirim. Veya bana önereceğiniz bir site falan var mı?

TeknoEmir dedi:

Cevabınız için teşekkür ederim. Herhalde sorumun cevabı rest API. Bu kategoriye ne deniyor. Mesela Google'a web service yazınca karşıma tam bir kategori çıkmıyor. Nasıl daha fazla detaylı öğrenebilirim. Veya bana önereceğiniz bir site falan var mı?

Genişletmek için tıkla...

Web service çok genel bir kategori. Rest API olarak aratırsan birçok kaynak bulabilirsin.
Restful aslında bir mimari. Global kuralları vardır. Sen de bu kurallara göre bir API yazarsın. Buna da Restful API veya Rest API denir.