Kodunuz localhost'ta çalışıp uzak sunucuda çalışmıyorsa aklıma gelen 3-4 ihtimal var:
- Kodunuzda localhost'ta çalışmaya uygun yollar/değerler bulunuyordur. Mesela veritabanı şifresi, .htaccess dosyasında belirtilen yollar, include yolları...
- Sunucuda oluşturduğunuz veritabanına bağlandığınız kullanıcı adına, veritabanına yazma yetkisi verilmemiş olabilir.
- Excel dosyasının boyutu çok büyükse ve sunucuda belirlenmiş maksimum upload sınırını aşıyorsa hataya düşüyor olabilirsiniz.
- Sunucudaki PHP ayarlarıyla sizin PHP ayarlarınız farklıdır. Sunucudaki PHP versiyonunu değiştirmeniz veya sunucudaki bazı PHP özelliklerini aktif etmeniz gerekiyor olabilir.
Paylaşımlı sunucular genelde PHP'nin hata gösterme özelliğini kapalı tutarlar. Eğer sunucya attığınızda boş beyaz sayfa görüyorsanız veya istediğiniz bir PHP değerinin olması gereken yerde sadece boşluk varsa muhtemelen orada bir hata vardır ama sunucu bunu göstermiyordur. Hatayı anlamak için bu ayarı açmanız gerekir.
Bir ihtimal de sunucuda hata oluştuğunda kök dizininizde otomatik olarak hataları belirten dosya oluşturuluyor olabilir. FTP'den error_logs.txt, error.log vb bir dosya oluşturulmuş mu diye bakıp oluşan hataları oradan inceleyebilirsiniz.
Hatayı bilmeden yorum yapmak zor.
Merhaba. stackoverflow'da sizinkine benzer bir soru sorulmuş:
Çıktısı link olan JQuery autocomplete
Otomatik tamamlama için, çıktıları link olan (Facebook veya Quora'daki gibi) bir otomatik tamamlama kutusu oluşturmaya çalışıyorum. Basitçe, otomatik tamamlama sonuçları listesinin açılmasını ve insanlar tıkladığında başka sayfalara gitmelerini istiyorum.
Doğru cevap olarak kabul edilen cevapta şöyle yazılmış:
Kolayca yapılabilir. source kısmını aşağıdaki gibi bir objeler dizisiyle değiştirin:
Yönlendirme yapmak için de select fonksiyonu kullanın:
$("#term").autocomplete({
source: [
{ value: "www.foo.com", label: "Spencer Kline" },
{ value: "www.example.com", label: "James Bond" },
//...
],
select: function( event, ui ) {
window.location.href = ui.item.value;
}
});
Test etmedim ama örnek olarak inceleyip kendinize uyarlayabilirsiniz.
Bu cevap altında da şöyle bir alt mesajlaşma yapılmış:
- Spencer: JQuery'de yeniyim. Yönlendirme işlemini kodda nereye yerleştireyim?
- karim79: Bir fiddle ekledim. Daha açıklayıcı olur.
- Spencer: Teşekkür ederim. Gerçekten minnettarım. Ama o kadar acemiyim ki yapamıyorum. JQuery öğelerini
<head>içine, html öğelerini<body>içine yerleştiriyorum. Yapmam gereken başka bi'şey var mı? - Spencer: Ayrıca, bu kod benim localhost'umda da link vermeme izin verecek mi?
- karim79: Evet verecek. Test sitenizin link'i var mı? Bu kodları nasıl çalıştıracağınızı kendi başınıza öğrenmenizi tavsiye ederim (yani zor yoldan :)) Ayrıca, JQuery UI'nin autocomplete'inden bahsediyoruz değil mi? (Spencer bu soruya cevap vermemiş)
- Henry: Tam aradığım şey!
sourceyi değiştirmedim veselecti şu şekilde değiştirdim:window.location.href = "/search.php?keyword="+ui.item.value; - Henry: Hatta sayfaya autocomplete kullanarak mı gelinmiş diye anlamak için de url'nin sonuna da suggest key'i ekledim:
?keyword="+ui.item.value+"&suggest="+ui.item.index. Belki ilerde sunucu log'larında suggest ile arama yapılabilir.
Öncelikle kafa karışıklığını önlemek için js dizisine aktaracağınız php değişkenini farklı bir yerde hazırlamanızı öneririm.
<?php
// js dizisine aktarılacak verileri tutacak bir php dizisi oluşturuyoruz:
$autocompleteArray = [];
// Bu php dizisine tek tek değerleri aktarıyoruz:
foreach($blogcek as $key=>$value) $autocompleteArray[] = '"'.$value['urun_baslik'].'"';
// Dizide toplanan tüm değerleri "," karakteriyle birleştirip bir string elde ediyoruz:
$autocompleteArrayString = implode(",", $autocompleteArray);
?>
<script>
var veriler = [<?=$autocompleteArrayString?>];
</script>
Merhaba. Diyelim ki sayfa.php dosyasında navbar.php dosyasını include ediyorsunuz. Bu durumda sayfa.php sayfasında bir değişken oluşturursunuz ve navbar.php sayfasında bu değişkenin varlığını kontrol edersiniz. Şöyle ki:
sayfa.php
<?php
define("CONTROL", true); // CONTROL adında bir sabit değişken oluşturduk.
?>
<html>
<head>
<title>Sayfa</title>
</head>
<body>
<?php include("navbar.php"); ?>
<div>Sayfa içeriği</div>
</body>
</html>
Şimdi de navbar.php sayfanızın başında, CONTROL adlı bir değişkenin oluşturulup oluşturulmadığını kontrol edebiliriz.
navbar.php
<?php if(!isset(CONTROL)) { echo "Bu sayfaya doğrudan erişemezsiniz!"; exit(); ?>
<nav>
navbar içeriğim
</nav>
Bu şekilde, navbar.php dosyasının sadece CONTROL adlı bir sabit değişken oluşturulmuş sayfalardan erişilebilmesini sağlamış olursunuz.
Bu yöntem PHP'nin Codeigniter framework'ünde kullanılıyor. Muhtemelen diğer framework'lerde de kullanılıyordur.
Infinite scroll, hangi front-end javascript teknolojisini kullandığınıza göre farklı şekillerde yapılabilir. React, Vue veya Svelte kullanıyorsanız yeniden oluşturmanıza gerek kalmadan bunlara uygun bileşenler kullanabilirsiniz.
Diyelim ki JQuery kullanıyorsunuz. O zaman kendi yolunuzu kendiniz geliştirmelisiniz. Örnek olarak şöyle bir kod yazalım:
index.html
<html>
<head>
<title>Infinite Scroll</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="content">
<div class="page" style="background-color:red;">Sayfa 1</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Örnek bir sayfa oluşturduk. Bu sayfaya index.css ve index.js dosyalarını da dahil ettik. Ayrıca CDN üzerinden jquery de çağırdık.
Bir adet div#content elementimizin içine bir adet div.page elementi ekledik ve içine de Sayfa 1 yazdık.
Sonradan div#content elementine eklenecek sayfalarla karışmasın diye div.page elementine kırmızı bir arkaplan verdik. Buraya eklenecek diğer sayfalara da farklı arkaplan renkleri vereceğiz ve böylece sayfa geçişlerini görebilmiş olacağız.
index.css
* { margin: 0; padding:0; box-sizing: border-box; }
html, body { width:100vw; height:100vh; }
#content { width: 100vw; height: 100vh; overflow-y: scroll; }
#content .page { width: 100vw; height: 150vh; display: flex; align-items: center; justify-content:center; font-size:72px; }
html ve body elementlerinin ekranın tamamını kaplamasını sağladık.
div#content elementimizin de aynı şekilde ekranın tamamını kaplamasını sağladık ve Y yönünde scroll özelliği olmasını istedik.
div.page elementimize de ekranın %150'si kadar yükseklik verdik ve içindeki yazıyı ortaladık. HTML içinde inline olarak da zaten kırmızı renk vermiştik.
Şimdi amacımız, div#content elementinde scroll olayı gerçekleştiğinde bu olayı dinlemek ve scroll eğer sayfanın sonuna gelmişse otomatik olarak yeni bir sayfa eklemek...
index.js
var bgColors = ["green","blue","yellow","red"];
var $content = $("#content");
$content.on("scroll", function(e) {
var contentScrollTop = $content.scrollTop() + $content.height();
var pageCount = $content.find(".page").length;
var contentHeight = $content.find(".page").height() * pageCount;
if(contentScrollTop - contentHeight < 100) {
$content.append("<div class='page' style='background-color:"+bgColors[pageCount%4]+"'>Sayfa "+pageCount+"</div>");
}
});
Kodları test edemedim ama aşağı yukarı böyle bir algoritma kullanabilirsiniz...
DÜZELTME
Yukarıdaki javascript kodlarında var $content = $(".content"); yazmışım.
var $content = $("#content"); olarak düzelttim.
O an hangi sayfayı görüntülediğimizin URL'ye yazılması konusu biraz daha detaylı bir konu. O an hangi sayfanın görüntülendiğini tespit edecek hesaplamalar yapmak veya inview gibi JQuery eklentileri kullanmak mümkün. Bu sorunun kapsamı dışında olduğu için bu konuya girmiyorum. Inview kullanımını araştırabilirsiniz.
Anladığım kadarıyla size görselde paylaştığınız gibi bir veri geliyor:
response = {
Beden: [
{attributeId: "1", atrName: "Small"},
{attributeId: "2", atrName: "Medium"},
{attributeId: "7", atrName: "X-Large"},
],
Renk: [
{attributeId: "4", atrName: "Mavi"},
{attributeId: "6", atrName: "Sarı"},
{attributeId: "3", atrName: "Yeşil"},
]
}
Siz bunu kendi objenizde birleştirmek istiyorsunuz. İç içe for kullanarak şu şekilde yapabilirsiniz:
const varyant = [];
for(let bedenIndex=0; bedenIndex < response.Beden.length; bedenIndex++) {
for(let renkIndex=0; renkIndex < response.Renk.length; renkIndex++) {
const bedenName = response.Beden[bedenIndex].atrName;
const bedenId = response.Beden[bedenIndex].attributeId;
const renkName = response.Renk[renkIndex].atrName;
const renkId = response.Renk[renkIndex].attributeId;
varyant.push({
varyantName: bedenName + "/" + renkName,
id: bedenId + "-" + renkId
});
}
}
Eğer PHP çalıştıran bir server'iniz varsa aşağıdaki örneği inceleyebilirsiniz.
Basit bir örnek ama sorunuza tam olarak cevap veriyor.
Server'inizde index.html, kaydet.php dosyaları ve görseller adında da bir klasör var diyelim.
index.html dosyanız şu şekilde olsun:
<html>
<head>
<title>Görsel Yükle</title>
</head>
<form method="post" action="kaydet.php" enctype="multipart/form-data">
<input type="file" name="gorsel" />
<button type="submit">Kaydet</button>
</form>
</html>
Bu sayfada görsel seçimi için "gorsel" adında bir input ve bir de "kaydet" yazılı buton içeren form elementimiz var. Butona basıldığında POST metoduyla kaydet.php sayfasına seçili görseli iletecektir.
kaydet.php sayfanız da aşağıdaki gibi olsun:
<?php
if(!isset($_FILES['gorsel'])) { echo "Dosya seçilmemiş"; exit(); }
$dosyaAdi = $_FILES['gorsel']['name'];
$dosyaBoyutu = $_FILES['gorsel']['size'];
$dosyaKopyasininYolu = $_FILES['gorsel']['tmp_name'];
$dosyaUzantisi = explode('.',$dosyaAdi);
$dosyaUzantisi = end($dosyaUzantisi);
$dosyaUzantisi = strtolower($dosyaUzantisi);
if (!in_array($dosyaUzantisi, ['jpeg','jpg','png'])) {
echo 'Dosya uzantısı geçersiz. Lütfen jpg veya png dosya seçin';
exit();
}
if ($dosyaBoyutu > 4 * 1024 * 1024) {
echo 'Dosya boyutu 4 mb üzerinde olamaz.';
exit();
}
$dosyaYolu = 'gorseller/'.$dosyaAdi; // Bu php dosyasının olduğu aynı yerde gorseller klasörü de olmalı.
$uploadEdildi = move_uploaded_file($dosyaKopyasininYolu, $dosyaYolu);
if(!$uploadEdildi) { echo "Dosya upload edilemedi..."; exit(); }
echo "Dosya images klasörüne upload edildi.";
Buradaki kodları anladıktan sonra daha detaylı bir sorunuz varsa takıldığınız yerle ilgili yeni bir soru oluşturabilirsiniz.
Merhaba. Bir PDOStatement objesini dizi gibi okumaya çalışıyorsunuz.
$usernameCek->fetch(PDO::FETCH_ASSOC);
yerine
$usernameCek = $usernameCek->fetch(PDO::FETCH_ASSOC);
yazdığınızda, PDOStatement objesini taşıyan $usernameCek değişkeninin değerini fetch() fonksiyonundan dönen array ile değiştirmiş olacaksınız.
Ajax ile post etmekten bahsediyorsanız şöyle bir örnek vereyim:
<form id="userForm">
<input id="username" type="text" value="mek" />
<button>Gönder</button>
</form>
İçinde sadece 1 input olan formumuzu ajax ile post etmek istiyoruz.
var $userForm = $("#userForm");
var $usernameInput = $userForm.find("#username");
$userForm.on("submit", function(e) {
e.preventDefault(); // formun direkt gönderilmesini engelliyoruz.
if($userForm.hasClass("waiting")) return; // Eğer formda "waiting" adında bir class varsa hiçbir işlem yapılmasın.
if($usernameInput.val().trim()==="") { alert("Kullanıcı adı zorunludur!"); return; } // Kullanıcı adı boş gönderilemesin.
$userForm.addClass("waiting"); // artık ajax isteğinden sonuç bekleyeceğimiz için forma "waiting" class'ını ekleyebiliriz.
var username = $usernameInput.val().trim();
$.ajax({
url: "add_user.php",
type:"post",
data: { username: username },
success:function(response) {
// Örnek olarak gelen yanıta göre işlemler yapıyorum:
if(response.type==="error") alert(response.errorMessage);
else if(response.type==="success") {
alert(username+" adlı kullanıcı başarıyla eklendi.");
$usernameInput.val("");
}
else alert("Bilinmeyen bir sonuç döndü.");
// Artık yanıttan cevap döndüğüne göre formu "waiting" class'ından arındıralım.
$userForm.removeClass("waiting");
},
error: function() {
alert("Bir sorunla karşılaşıldı.");
$userForm.removeClass("waiting");
}
});
});
Böylece, form ajax ile submit edilirken yanıt dönene kadar form'a "waiting" class'ı atamış olduk. Butona tıklandığında da eğer formda "waiting" class'ı varsa işlem yapmamasını söyledik. Artık kullanıcı firebug üzerinden kodla müdahale etmediği sürece tekrar tekrar butona tıklanmasının bir anlamı olmayacak. Biz yine de CSS yardımıyla da butona basılmasını önleyelim.
* { margin:0; padding:0; box-sizing:border-box; outline:none; }
#userForm { display:flex; flex-direction:row; align-items:center; justify-content:center; }
#userForm #username { width:100px; height:30px; text-indent:10px; border:1px solid #777; border-radius:5px 0 0 5px; }
#userForm button { width:80px; height:30px; border:1px solid #777; background-color:#ccc; border-radius:0 5px 5px 0; border-left:none; transition:color ease .3s, background-color ease .3s; }
/* #userForm eğer .waiting class'ına sahipse butona tıklanamasın: */
#userForm.waiting button { pointer-events: none; background-color:#eee; color:#aaa; }
Yine waiting class'ının varlığına göre farklı stiller (loading gif'i göstermek gibi) yapılabilir.
Buton yerine span kullanıp yazıyı span içinde kullanırsanız yazıları da ortalamış olursunuz. Belki bir ihtimal ortalanmazsa span'a display:inline-block stili vermeniz gerekebilir.