Merhaba
Daha esnek ve doğru bir çözüm isterseniz aşağıdakileri uygulayın:
Cors politikalarına takılmamak için proxy sayfa oluşturalım:
<?php
// proxy.php
$url = 'https://www.buski.gov.tr/ArizaBakim/Calismalar';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>
Şimdi de proxy sayfamız ile aldığımız verileri ekrana yazdıracak olan widget.php kodumuzu yazalım:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Su Kesintisi Bilgileri</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #dddddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Su Kesintisi Bilgileri</h1>
<div id="table" class="d-lg-flex flex-grow-1">
<table>
<tbody>
<tr>
<th>İLÇE</th>
<th>AÇIKLAMA</th>
</tr>
</tbody>
</table>
</div>
<script>
async function fetchData() {
const url = 'proxy.php';
try {
const response = await fetch(url);
const text = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(text, 'text/html');
const tableData = doc.querySelector("#table tbody").innerHTML;
document.querySelector("#table tbody").innerHTML = tableData;
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
</script>
</body>
</html>Bu şekilde yaparsanız daha esnek kod yapısı olur ve dilediğiniz gibi ilave CSS ile de süsler, modül, widget gibi kullanabiilirsiniz.