Şu örneği inceleyebilirsiniz: https://codepen.io/ebykdrms/pen/ZEPgxmo
<div id="yenieklenensliderbuyukresim"></div>
<div class="yenieklenenslider">
<div><img class="yenieklenenresim" src='https://picsum.photos/400'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/401'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/402'></div>
<div><img class="yenieklenenresim" src='https://picsum.photos/403'></div>
</div>
#yenieklenensliderbuyukresim { height:400px; width:400px; border:1px solid #ccc; margin:20px auto; }
#yenieklenensliderbuyukresim > img { width:100%; height:100%; object-fit:cover; }
.yenieklenenslider { display:flex; flex-direction:row; align-items:center; justify-content:center; }
.yenieklenenresim { width:100px; height:100px; object-fit:cover; cursor:pointer; }
const $bigImage = document.getElementById("yenieklenensliderbuyukresim");
const $images = document.querySelector(".yenieklenenresim");
document.addEventListener("click", function(e){
const target = e.target.closest(".yenieklenenresim");
if(!target) return;
const src = target.getAttribute("src");
$bigImage.innerHTML = target.outerHTML;
});
API olarak kullanmak için PHP tek başına yeterlidir.
Ama bazı işler var ki PHP'de yapması fazla emek istiyor. Mesela websocket bağlantısı kurmak...
Ama sadece PHP üzerine inşa edilen büyük projeler de var ve PHP taleplerini gayet güzel karşılıyor.
Ben Node.js tavsiye ederim. İmkân oldukça Node.js kullanırım.
Express.js ile API'ınızı kolayca ayağa kaldırabilirsiniz.
Node.js imkânım yoksa (mesela Türkiye'den alınmış bir shared hosting üzerinde çalışmak zorundaysam) ikinci tercihim PHP olur.
Web sitesini PHP ile hazırlıyorsam servis olarak da, aynı projede farklı diller görmek istemediğimden yine PHP kullanmayı tercih ederim. Ama PHP ile karmaşık olabilecek işlere gireceksem PHP'yi çok da zorlamadan Node.js desteği almayı tercih ederim.
Sanırım bu eğitimde kullanılan sunucu ayarlarıyla ilgili bir durum.
Tüm isteklerin (eğer bir karşılığı yoksa) kök klasördeki index.php dosyasını çalıştırması sağlanmış.
Bunun için sunucu üzerinde düzenleme yaptığı bir yer göremedim. Bir .htaccess dosyası da kullanmıyor.
Muhtemelen kullandığı sunucunun varsayılan ayarı bu şekilde.
Bu sorunu aşmak için projenizin kök klasörüne .htaccess adlı bir dosya oluşturun ve içine şunları yazın:
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]
Bu sayede sunucu, dosya karşılığını bulamadığı istekleri index.php dosyasına yönlendirecektir.
index.php dosyası da url'ye bakıp hangi dosyayı çağırması gerektiğini bulacaktır.
Başka yanıt gelmediği için bazı linkler bırakıyorum...
https://nextjs.org/docs
https://redux.js.org/usage/nextjs
https://redux-toolkit.js.org/rtk-query/usage/server-side-rendering
https://www.linkedin.com/pulse/nextjs-redux-powerful-combination-building-web-bard-aman-singh-jaswal/
https://medium.com/@ybsweb/react-query-nedir-nasıl-kullanılır-71d933859d89#:~:text=React Query, bir React uygulamasında,birçok işlemi otomatik olarak gerçekleştirir.
https://blog.atolyedijital.com.tr/react-query-ile-server-state-yönetimi-507c85be073a
https://next-auth.js.org/getting-started/introduction
https://nextjs.org/learn/dashboard-app/getting-started
Bir kullanıcının bulunmaması gereken bir sayfada bulunması ve "no redirect" ile başka sayfaya yönlendirilmekten kurtulması...
Eğer kullanıcıyı başka sayfaya yönlendiremiyorsak, en azından bu sayfanın içeriğini görmesini engelleyebiliriz.
Mesela kullanıcı login olduktan sonra /admin/dashboard url'sine yönlendiriliyor olsun.
Ama kullanıcı login ekranını geçip direkt url üzerinden /admin/dashboard diyerek bu ekrana girmiş olsun.
Biz bu sayfada kullanıcının yetkisi olup olmadığını kontrol ediyoruz ve eğer yetkisi yoksa /login ekranına redirect ediyoruz.
Ama kullanıcının tarayıcısında bir eklenti var ve redirect işlemlerini engelliyor.
- Haliyle /login ekranına yönlendirilemiyor.
- Haliyle /admin/dashboard ekranında kalıyor.
- Haliyle /admin/dashboard ekranının içeriğini de görebiliyor veya en azından session'ı/token'ı olmadığından oluşan hata mesajlarını görebiliyor.
Bu durumda redirect komutunu verdiğimiz yerde kodların çalışmasını da durdurmak için bir komut kullanmalıyız.
Bahsettiğimiz dil php ise:
if(!$hasAccess) {
// Kullanıcının yetkisinin olmadığını anlamışız ve login ekranına yönlendiriyoruz.
header("Location:login");
// Eğer bir şekilde yönlendirme komutu engellenirse bile exit komutu sayesinde sayfa içeriğinin görünmesini engelliyoruz.
exit("Bu sayfayı görüntülemek için oturum açmanız gerekiyor. Lütfen giriş ekranına gidiniz...");
}
// Bu if bloğundan sorunsuzca geçebilirse sayfa içeriğini gösteriyoruz.
// Sayfanın içerikleri...
Tek satırlık basit bir çözüm ama yazılımcılar bunu unutabiliyorlar...
echo attığınızda else bloğuna giriyorsanız -ki aldığınız hata da bunu destekliyor- şu anlama gelir:
'Admin' adlı class'ınızın içinde 'Listele' adlı bir fonksiyona ulaşılamıyor.
O zaman düzgün bir şekilde *Admin isimli sınıfta Listele methodu bulunamadı!* yazmasını bekliyorsunuz ama hata mesajı dönüyor.
Hata mesajı: Object of class Admin could not be converted string.
Yani: Admin class'ının objesi string'e dönüştürülemedi.
$ClassName değişkeninizde Admin class'ından türetilen obje var.
'<b>' . $ClassName . '</b> isimli sınıfta <b>' . $Method . '</b> methodu bulunamadı!' şeklinde bir string birleştirme işlemi yapıyorsunuz ama string'in içine object'i yerleştiremiyor.
Bu karışıklık, değişken adınızın yanıltıcı olmasından kaynaklanıyor. Değişken adınız $ClassName sanki içinde bir string ifade barındırıyormuş gibi düşündürüyor.
Bu isim yerine yerine $ClassObject ismi verilebilir. Böylece değişkenin adı bile yanlış kullandığınız yerde sorunu fark etmenize yardımcı olur.
Yani öncelikle $ClassName değişkeninizin adını $ClassObject olarak güncellemelisiniz.
Sorunu çözmek için de, $ClassObjecti tanımladığınız satırın hemen altına bir $ClassName değişkeni tanımlayın ve sınıfın adını (string olarak) buraya atayın.
$ClassObject = new $Controller();
$ClassName = get_class($ClassObject); // Objenin türetildiği sınıfın adını string olarak verir.
if (method_exists($ClassObject, $Method)) {
call_user_func_array([$ClassObject, $Method], $Parameters);
} else {
exit("<b>$ClassName</b> isimli sınıfta <b>$Method</b> fonksiyonu bulunamadı!");
}
Gözüme çarptığı kadarıyla şu satırda da henüz karşılaşmadığınız bir sorun var:
exit('<b>' . $ControllerFile . '</b> isimli controller dosyasında <b>' . $ClassName . '</b> sınıfı bulunamadı!');
Burada kullandığınız $ClassName değişkeni hiç oluşturulmamış bir değişken. Yani bu değişken yalnızca if bloğunda oluşturuluyor. Bu yüzden else bloğunda bu değişkene erişemezsiniz. Yani PHP belki bir esneklik sunuyordur ama en iyi ihtimalle hata almak yerine boş string elde edersiniz.
Bu satırı da şu şekilde düzeltebilirsiniz:
exit("<b>$ControllerFile</b> isimli controller dosyasında <b>$Controller</b> sınıfı bulunamadı!");
/lib/view.class.php dosyasındaki render() fonksiyonu:
public function render(){
$data = $this->data;
ob_start();
include($this->path);
$content = ob_get_clean();
return $content;
}
ob_start();ile tamponlama işlemlerinin başlayacağı belirtiliyor.include($this->path);ile ilgili view dosyasının içeriği buraya yazılıyor. Yani aslında html dosyası olsa da, dosyada yazan veriler bu php dosyasına alınmış oluyor. Bu php dosyası, içindeki php komutlarını işleyebilir.$content = ob_get_clean();ile tamponlama işlemi sonlanıyor ve işlenmiş içerik$contentdeğişkenine aktarılıyor.return $content;ile bu fonksiyon, içeriğin işlenmiş halini (yani php kodlarının işlenip html içine yazılmış, yani php kodları barındırmayan halini) döndürüyor.
Yani regex ile arayıp bulup işlem yapmasına gerek kalmadan ob_get_clean() ile php kodunu işlemiş.
Sanırım şu site tam istediğiniz işi yapıyor:
https://mocki.io/fake-json-api
- Nasıl bir json çıktısı almak istediğinizi yazıyorsunuz.
- Create API diyorsunuz.
- Size bir endpoint veriyor.
- Endpoint'e istek attığınızda, oluşturduğunuz json'u response olarak alabiliyorsunuz.
Kayıt olunduğunda daha detaylı özellikler sunuyordur muhtemelen. Ücretsiz deneme için kayıt olmadım.
Bu tip size özel endpoint'lere çokça ihtiyacınız oluyorsa aylık 10$ uygun bir fiyat gibi.
Özellikle username, avatar ve email key'lerine ihtiyacınız varsa şurası da iş görür sanıyorum:
https://fakeapi.platzi.com
Burada ücretle ilgili bi'şey belirtmemişler.
Normalde çalışmaz. Sonradan html uzantısını değiştirip php'ye çeviriyorlardır. Videonun ilerleyen zamanlarında hatayı fark edip düzeltirler.
Veya "Bakın html sayfasına PHP kodu yazdım ama çalışmadı. Çünkü html sayfada php kodu çalışmaz." demek için yazdıkları bir an da olabilir bu.
Yok eğer bile isteye bu şekilde yazıyorlarsa bambaşka bir mantık kurmuşlardır.
Diğer açık sekmelerden anladığım kadarıyla burada bir framework geliştiriliyor.
Bu framework'ün çalışma mantığında bu kullanımın bir anlamı olabilir ama bunu bilemeyiz.
Örneğin bir php sayfası, bu default.html sayfasını okuyordur ve regex ile içinde php'ye ait bir kısım varsa bunu replace ediyordur.
Yani aslında php kodunu yine bir php sayfası çalıştırıyordur. Bu html, yalnızca başka bir php sayfasından okunmak ve değiştirilmek üzere yazılıyordur.
Burada ne yapılmak istendiği eğitim programında anlatılıyor olsa gerek.
1) Sunucuya Sahte GET İsteği Atmak
Stackoverflow'da 2012 yılından şöyle bir bilgiye rastladım:
Android uygulamam sunucuya POST istekleri gönderdi ve beklendiği gibi çalışıyordu ancak yaklaşık 30 dakika sonra 408 İstek zaman aşımı hataları yaşamaya başladım.
Ayrıca bir PC'den veya Android cihazdan bir tarayıcı açıp ana sayfamı (PHP Wordpress sitesi) açtığımda sorunun ortadan kalktığını fark ettim.
Web sitesi testte olduğundan web trafiği minimum düzeydeydi ve bu davranışı sunucu günlüklerinde oldukça kolay bir şekilde doğrulayabildim.
POST isteğimden önce sahte bir GET isteği yürüterek bu soruna geçici bir çözüm bulmayı başardım ve bu, web sunucusunu 'uyandırdı' ve sonraki tüm POST isteklerine yanıt verdi.
Buna 2015'te gelen bir yanıtta da şu bilgi veriliyor:
Bağlantıları sıfırlayarak müdahale eden bazı trafik izleme aracıları için tüm POST'lar ve otuz dakika boyunca hiçbir GET'in olmaması şüpheli görünüyor.
Trafiğin kötü niyetli olduğunu düşündükleri takdirde her iki uca da sahte sıfırlamalar gönderen ürünler var.
Bu daha sonra bağlantıyı keserek zaman aşımına neden olur.
2016'da da aynı yanıta söyle bir yorum eklenmiş:
Bana öyle geliyor ki, en azından bazı durumlarda bu sorunlar oturum zaman aşımlarından da kaynaklanıyor olabilir.
Oturum yenilemeleri GET istekleri için gerçekleştiriliyor ancak POST istekleri için gerçekleştirilmiyor olabilir; bu da 'uyanma' davranışını açıklayabilir.
Buna göre, siz de arada bir sunucuya sahte GET istekleri atarak sunucuyu 'uyandırmayı' deneyebilirsiniz.
Kaynak: https://stackoverflow.com/questions/1667720/http-408-request-timeout
2) response.end() Kullanılmamış Olabilir
Postman'dan yanıt alabiliyorsanız sorun bu değildir muhtemelen.
Ama endpoint'inizde veya bir middleware'ınızda response.end() (veya .send() gibi bir istek sonlandırıcı sonlandırıcı fonksiyon) komutuna ulaşılmasını önleyen bir koşul oluşuyor olabilir.
Mesela header'ları kontrol ettiğiniz bir aşamada bir return ifadesi kullanmışsınızdır ve response.end() komutuna ulaşılmasını önlemişsinizdir veya bir if-else yapınız response.end() komutunu atlamanıza neden oluyor olabilir.
Sunucunuza bir console.log() ekleyip gelen header'ı terminale basın.
Sonra siteden ve Postman'dan ayrı ayrı istek atın ve header'lar arasındaki farklara bakın.
Fark yoksa, bir isteğin geçtiği tüm aşamaları takip edip response.end() komutunun çalışmadan işlemlerin bittiği bir durum var mı diye inceleyin.
Kaynak: https://stackoverflow.com/questions/22773927/408-timeout-in-nodejs-app-requesting-github-api
3) İstemci, İsteği Yarıda Kesmiş Olabilir
İsteği gönderiyorsunuzdur ama hemen sonra (belki bir state değişimi yüzünden) isteği iptal ediyorsunuzdur.
Aslında yukarıdaki gibi bir sorun ama bu sefer istemci tarafında...
Çözüm olarak yine sunucuya console.log() atıp gelen isteğin body ve header'larını terminale basın. Sonra postman ve site isteklerinin arasındaki farkları bulmaya çalışın.
Kaynak: https://docs.aws.amazon.com/en_en/elasticloadbalancing/latest/classic/ts-elb-error-message.html#ts-elb-errorcodes-http408
Daha farklı nedenler de olabilir tabi sunucunun zaman aşımı süresini uzatmak gerekiyor olabilir vs. ama sorun orada olsa Postman da yanıt alamazdı.