div'leri yukarı yazmayın.
Buraya sonuç döndüğünde ne istiyorsak o içerik gelecek. kutucuk, küçük, div'ler vs her ne istersek buraya...
yazdığım yere yazın.
else içindeki stilleri kaldırın. Ona gerek yok. Sonuç dönmediğinde görünecek html verisini oraya yazın.
div'lerinizi nereye yazıyorsunuz?
çalışınca ne hata veriyor?
Bi'yeri yanlış yazmışım. Önceki mesajımı güncelledim. Tekrar deneyin.
Belirttiğim yerlere istediğiniz html içeriği ekleyebilirsiniz...
<?php
$language = isset($_GET['language']) ? $_GET['language'] : 'en';
$userAgent = isset($_GET['userAgent']) ? $_GET['userAgent'] : 'WikiBot/1.0 (+http://'.$_SERVER['SERVER_NAME'].'/)';
$betterResults = !( isset($_GET['betterResults']) && ($_GET['betterResults'] == 'false' || $_GET['betterResults'] == 0));
$proxy = isset($_GET['proxy']) ? $_GET['proxy'] : null;
$imageProxy = !(isset($_GET['imageProxy']) && ($_GET['imageProxy'] == 'false' || $_GET['imageProxy']== 0));
$DEBUG = isset($_GET['DEBUG']) ? $_GET['DEBUG'] : null;
// Set the Parameter
$options = array(
'language' => $language,
'userAgent' => $userAgent,
'betterResults' => $betterResults,
'proxy' => $proxy,
'imageProxy' => $imageProxy,
'DEBUG' => $DEBUG,
);
require_once __DIR__.'/ciktisi.php';
// Start the Wikipedia API Class
$wiki = new wiki($options);
// Output the API Response
$apiResult = $wiki->api($_GET['q']);
if($apiResult) { echo $apiResult; ?>
<div>Buraya sonuç döndüğünde ne istiyorsak o içerik gelecek. kutucuk, küçük, div'ler vs her ne istersek buraya...</div>
<?php exit(); }
else { ?>
<div>Buraya da sonuç dönmediğinde görüntülenecek içerik gelecek</div>
<?php }
// Print the Script Runtime in DEBUG Mode
if ( isset($DEBUG) ) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
exit();
}
Tamam zaten sonuç dönmeyince div'leri geçersiz saymasını istedim.
Bu durumda şunu yapabilirsiniz:
<?php
//... önceki kodlarınız...
$apiResult = $wiki->api($_GET['q']);
if(!$apiResult) {
?>
<div>Buraya sonuç dönmediğinde görüntülenecek içerik gelecek...</div>
<?php
exit();
}
echo $apiResult;
if (isset($DEBUG)) {
echo "<pre>\n\n\tRuntime: ".number_format((microtime(true)-$_SERVER['REQUEST_TIME_FLOAT']),3);
exit();
}
?>
<div class="kutucugumuz"></div>
Benim deneme şansım yok ne yazık ki.
belki şunu deneyebilirsiniz:
echo $wiki->api($_GET['q']);
yazan satırı silip yerine şunu yazın:
$apiResult = $wiki->api($_GET['q']);
if(!$apiResult) {
echo "Sonuç dönmedi";
exit();
}
echo $apiResult;
Bu arada div'iniz yine aşağıda olacak.
Peki sonuç olmadığında nasıl bir sonuç dönüyor?
Dönen sonuca göre işlem yapmak lazım.
echo $wiki->api($_GET['q']);
yerine
var_dump($wiki->api($_GET['q'])); exit();
yazınca gelen çıktıyı görmem lazım.
Şöyle bir yol izleyebilirsiniz:
function Listening() {
const [elapsedTime, setElapsedTime] = useState(null);
useEffect(()=>{
setTimeout(()=>{
if(activity?.timestamps?.start) {
setElapsedTime(getElapsedTime(activity.timestamps.start));
}
},1000);
},[elapsedTime];
return ettiğiniz bileşende geçen {getElapsedTime(activity.timestamps.start)} kısmında direkt elapsedTime state'ini yazarsınız.
Denemek lazım...
Ama aslında çok daha güzeli, eğer bu bölüm diğer bölümlerin değişmesine neden olmuyorsa bu bölümü kendi component'ine ayırmak daha uygun olur. Böylece her değişimde tüm bileşenin render edilmesi yerine sadece bu bileşen render edilmiş olur.
const ElapsedTime = ({start}) => {
const [elapsedTime, setElapsedTime] = useState(null);
useEffect(()=>{
setTimeout(()=>{
if(start) {
setElapsedTime(getElapsedTime(start));
}
},1000);
},[elapsedTime];
return (
<span className="text-sm text-gray-300 opacity-50">
{elapsedTime}
</span>
)
}
Kodunuzdaki ilgili yere bu bileşeni yerleştirirseniz, bu bileşenin state değişimi üst bileşenin yeniden render edilmesini gerektirmeyecektir.
<div className="flex flex-col">
<h5 className="font-bold leading-4 mb-1">{activity.name}</h5>
<span className="text-sm text-gray-300 opacity-50">{activity.state}</span>
{activity.details && (
<span className="text-sm text-gray-300 opacity-50">{activity.details}</span>
)}
{activity.timestamps && (
<span className="text-sm text-gray-300 opacity-50">
<ElapsedTime start={activity.timestamps?.start} />
</span>
)}
</div>
Fake API'lerden bahsediyorsanız şu siteler işinizi görebilir:
Sanırım sizin aradığınız bu:
https://picsum.photos
URL'mizden sonra istediğiniz resim boyutunu (genişlik ve yükseklik) ekleyin ve rastgele bir resim elde edeceksiniz.
Örn: https://picsum.photos/200/300
Kare bir görüntü elde etmek için boyutu eklemeniz yeterlidir.
Örn: https://picsum.photos/200
Böyle bir kullanım yok. Tarayıcı, tırnaklar arasına işlenmebilecek bir veri (class adı) girmenizi bekler.
Eğer sayfanız PHP ise şunu yapmanız mümkün:
<div class="<?php /* Buraya yorum yazılabilir */ ?>"></div>
Aynı mantıkla diğer back-end dillerde de bu şekilde yorum satırı ekleyebilirsiniz. Bu yazdıklarınız front-end'te görüntülenmez. Örneğin üstte verdiğim kodu tarayıcınızda incelerseniz şunu görürsünüz:
<div class=""></div>