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>
JavaScript Nedir?
Javascript yakın zamana kadar sadece tarayıcının programlama dili olarak biliniyordu. Son zamanlarda tarayıcı penceresinin yanı sıra sunucu taraflı kodda da kullanımı popülerleşti.
İstemci taraflı programlama dili olarak JavaScript, bir web sayfasına kullanıcı girdisine tepki verebilecek internaktif ve dinamik öğelerden sorumludur.
jQuery Nedir?
jQuery bir JavaScript kütüphanesidir. Temel olarak paketlenmiş bir JavaScript koleksiyonudur ve çok daha basit bir kod satırıyla ulaşılabilir. Böylelikle geliştiriciler karmaşık JavaScript kodları yazmadan, jQueryde önceden yazılmış ve paketlenmiş kod sayesinde işlerini çok daha kolay bir şekilde halledebiliyor.
jQuery JavaScript’tir
jQuery ve JavaScript arasındaki fark kulağa iki rakip teknoloji arasında savaşa sebep oluyor gibi gelse de aslında tüm olay jQuery’nin JavaScript kullanmanın farklı bir yolu olması.
Bootstrap’le önceden ilgilendiyseniz CSS ve Bootstrap arasındaki ilişki iyi bir benzetme olacaktır.
Birçok web geliştirici web geliştirme alanına jQuery öğrenerek giriyor. Temel JavaScript bilgilerini öğrenmek iyi bir Front-End Geliştirici olmanın çok önemli taraflarından biri olsa da eğitiminizde birkaç hızlı başarıya da imza atmanız önemli. jQuery de buna ulaşmanın hızlı bir yolu.
Daha fazlası için kaynak: https://tr.bitdegree.org/tutorial/jquery-ve-javascript-arasindaki-fark/
input'lara requied attribute'si eklerseniz form'lar bu input boşken submit yapmazlar.
const $packetFrom = $('#packetFrom');
let counter = 1;
function addPacket() {
$packetFrom.append(`
<div class="row hidden_envelope" id="newPacket${counter}">
<input type="text" name="kullanici_id[]" required>
</div>
`);
counter++;
}