Bölge il ilçe seçimi
Turizm ile ilgili bir blog yapmaya çalışıyorum. Türkiye diye bir menü başlığı olacak. 3 menü başlığım var biri bu. Türkiye ye tıklanınca bölgeler açılacak. bir bölgeye tıklayınca da iller açılacak, bir ile tıklayınca o ilin ilçeleri açılacak. ilçeye tıklayınca o ilçenin tanıtımıya ilgili yazdığım yazılar çıkacak. php ve jqury kullanarak yapmak istiyorum yardım edebilecek varsa sevinirim
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (2)
{
"Türkiye": {
"Marmara Bölgesi": {
"İstanbul": {
"Beyoğlu": "Beyoğlu..."
},
"Bursa": {
"Osmangazi": "Osmangazi..."
}
},
"Ege Bölgesi": {
"İzmir": {
"Konak": "Konak..."
},
"Aydın": {
"Efeler": "Efeler..."
}
}
}
}
<?php
$json_data = file_get_contents("veri.json");
$data = json_decode($json_data, true);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Türkiye Turizm Menüsü</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="turkiye-menu">
<?php foreach ($data["Türkiye"] as $bolge => $iller): ?>
<div class="bolge">
<h3><?php echo $bolge; ?></h3>
<ul class="iller">
<?php foreach ($iller as $il => $ilceler): ?>
<li>
<?php echo $il; ?>
<ul class="ilceler">
<?php foreach ($ilceler as $ilce => $yazi): ?>
<li><?php echo $ilce; ?></li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endforeach; ?>
</div>
<script>
$(document).ready(function(){
$(".bolge").hide();
$(".bolge:first").show();
$(".bolge h3").click(function(){
$(this).next(".iller").slideToggle();
});
$(".iller li").click(function(){
$(this).children(".ilceler").slideToggle();
});
});
</script>
</body>
</html>
Başka bir sorunuza dayanarak bunları veritabanında tutmak istediğinizi anlıyorum.
Veritabanınızda 4 adet tablo olmalı:
1) ulkeler (şimdilik tek ülke olacak olsa da...)
id: int & primary key & auto increment
isim: text
2) bolgeler (her bölge/eyalet bir ülkeye ait olmalıdır. ulkeler tablosuyla bire çok ilişki)
id: int & primary key & auto increment
ulke_id: int
isim: text
3) iller (her il, bir bölgeye/eyalete ait olmalı)
id: int & primary key & auto increment
bolge_id: int
isim: text
4) ilceler (her ilçe, bir ile ait olmalı)
id: int & primary key & auto increment
il_id: int
isim: text
Bunlara ek olarak her ilçeye yönelik birkaç blog içeriği olabilir. İlçe seçildiğinde son yazılmış olan içeriği gösterirsiniz ve eski içeriklerin de başlıklarını gösterirsiniz. Kullanıcı tıklayınca o içeriklere de erişebilir.
5) icerikler (her içerik bir ilçeye ait olmalı)
id: int & primary key & auto increment
ilce_id: int
baslik: text
gorsel: text (içerik görselinin link'ini tutacak)
tarih: datetime (oluşturulan içerikler tarihe göre sıralanacak)
icerik: text (içerik metni html formatında burada yer alacak)
goruntulenme_sayisi: int (bunun gibi eklemeler de yapılabilir...)
Veritabanınızdaki bu tablolara manuel olarak örnek birkaç kayıt girmelisiniz. Tabi bu kayıtlar, id'ler eşleşecek şekilde tutarlı olmalı.
Örneğin:
1) ulkeler için 1 kayıt:
id: 1 (otomatik eklenecek)
isim: "Türkiye"
2) bolgeler için 1 kayıt:
id: 1 (otomatik eklenecek)
ulke_id: 1 (Türkiye'nin id'si)
isim: "Ege"
3) iller için 1 kayıt:
id: 1 (otomatik eklenecek)
bolge_id: 1 (Ege'nin id'si)
isim: "Manisa"
4) ilceler için 1 kayıt:
id: 1 (otomatik eklenecek)
il_id: 1 (Manisa'nın id'si)
isim: "Yunusemre"
5) icerikler için 1 kayıt:
id: 1 (otomatik eklenecek)
ilce_id: 1 (Yunusemre'nin id'si)
baslik: "Görülmeye değer yerler"
gorsel: https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Spil_Dağı'ndan_Yunusemre_ilçesi.jpg/500px-Spil_Dağı'ndan_Yunusemre_ilçesi.jpg
tarih: "2024-04-08 15:20:35"
icerik: "12 Kasım 2012'de Manisa il merkezinin ikiye bölünmesiyle..."
goruntulenme_sayisi: 3
Artık sayfa tasarımı başlayabilir.
Sayfada başlangıçta ülke seçimi yapılmalı. Yani ilk olarak ülkelerin veritabanından alınması gerek.
Ama her şeyden önce bazı yardımcı fonksiyonlara ihtiyacımız olacak. Mesela veritabanı bağlantısı için bir yardımcı...
Kök klasörde helpers adlı bir klasör açıp içine *database.php** adlı bir dosya oluşturabiliriz:
<?php
class Database {
private $host = "localhost";
private $dbname = "veritabani_adi";
private $username = "kullanici_adi";
private $password = "sifre";
private $conn;
public function __construct() {
$dsn = "mysql:host={$this->host};dbname={$this->dbname};charset=utf8mb4";
try {
$this->conn = new PDO($dsn, $this->username, $this->password);
$this->conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Bağlantı hatası: " . $e->getMessage());
}
}
public function query($sql) {
return $this->conn->query($sql);
}
public function lastInsertId() {
return $this->conn->lastInsertId();
}
public function close() {
$this->conn = null;
}
}
Artık bu yardımcı sayesinde veritabanına bağlanıp veri çekebiliriz.
Şimdi veritabanımızla iletişim kurup bize istediğimiz verileri sunacak dosyalar oluşturmalıyız.
Kök klasörde models diye bir klasör oluşturup içine ulkeler_model.php adlı bir dosya oluşturalım.
<?php
require_once('../helpers/database.php');
class Ulkeler_Model {
private $db;
public function __construct() {
$this->db = new Database();
}
public function getUlkeler() {
$sql = "SELECT * FROM ulkeler";
$result = $this->db->query($sql);
return $result->fetchAll(PDO::FETCH_ASSOC);
}
}
Şimdi de bu model dosyasıyla iletişime geçip verileri alacak ve bize uygun bir formatta iletecek olan bir dosya oluşturalım.
Kök klasörde controllers adlı bir klasör açıp içine queries.php adlı bir dosya oluşturalım.
Bu dosyaya bazı fonksiyonlar olacak. Jquery'nin ajax'ı ile işimize yarayacak koşullarda istek atacağız ve bu dosya da bize json formatında ülkelerin listesini döndürecek.
<?php
header('Content-Type: application/json');
if(!isset($_POST['query'])) {
echo json_encode(['status'=>false, 'message'=>'Sorgu belirtilmedi.']);
exit();
}
$query = $_POST['query'];
if($query==='Ülke Listesi') {
require_once('../models/ulkeler_model.php');
$ulkeler_model = new Ulkeler_Model();
$ulkeler = $ulkeler_model->getUlkeler();
echo json_encode($ulkeler);
exit();
}
Bu sayfaya query='Ülke Listesi' verisiyle POST isteği atarsak model'imiz yardımıyla bize ülkelerin listesini döndürecek.
Bunu hemen test edebilmek için kök klasörümüze index.html dosyası oluşturabiliriz.
Bu dosyada bir select elementimiz olacak. JQuery'nin ajax'ı yardımıyla az önce oluşturduğumuz sayfaya istek atıp ülke listesini alacağız.
Json formatında aldığımız ülke listesini select elementine option olarak ekleyeceğiz. (Tabi tablomuzda sadece Türkiye olduğu için bize tek bir veri gelecek.)
Stilleri araya karıştırmadan bir örnek veriyorum:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
<select id="ulkeler">
<option value="">Ülke Seçiniz</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Ajax isteği ile ülke listesini al
$.ajax({
type: 'POST',
url: 'controllers/queries.php',
data: {query: 'Ülke Listesi'},
dataType: 'json',
success: function(response){
// Gelen ülke listesini select elementine ekle
response.forEach(function(ulke){
$('#ulkeler').append('<option value="' + ulke.id + '">' + ulke.isim + '</option>');
});
},
error: function(xhr, status, error){
console.error('Ajax hatası:', error);
}
});
});
</script>
</body>
</html>
Projemize localhost üzerinden gidip bu sayfayı açtığımızda controller'daki dosyamıza bir istek atılacak ve ülkeler çekilecek.
Peki seçilen ülkeye göre bölgeleri nasıl alacağız? Bunun için queries.php dosyamıza bölgeleri döndürecek bir koşul eklemeliyiz.
Ama bolgeler tablosuyla iletişim kurmak için de models klasörümüze bolgeler_model.php diye bir dosya da eklemeliyiz.
models klasöründeki bolgeler_model.php
<?php
require_once('../helpers/database.php');
class Bolgeler_Model {
private $db;
public function __construct() {
$this->db = new Database();
}
public function getBolgeler($ulke_id) {
$sql = "SELECT * FROM bolgeler WHERE ulke_id = :ulke_id";
$result = $this->db->prepare($sql);
$result->bindParam(':ulke_id', $ulke_id, PDO::PARAM_INT);
$result->execute();
return $result->fetchAll(PDO::FETCH_ASSOC);
}
}
Veritabanımızla iletişim kuracak model'imizi oluşturduk.
Artık controllers klasöründeki queries.php dosyasına gerekli koşulu ekleyebiliriz:
<?php
header('Content-Type: application/json');
if (!isset($_POST['query'])) {
echo json_encode(['status' => false, 'message' => 'Sorgu belirtilmedi.']);
exit();
}
$query = $_POST['query'];
if ($query === 'Ülke Listesi') {
require_once('../models/ulkeler_model.php');
$ulkeler_model = new Ulkeler_Model();
$ulkeler = $ulkeler_model->getUlkeler();
echo json_encode($ulkeler);
exit();
}
if ($query === 'Bölge Listesi') {
require_once('../models/bolgeler_model.php');
if (!isset($_POST['ulke_id'])) {
echo json_encode(['status' => false, 'message' => 'Ülke id belirtilmedi.']);
exit();
}
$ulke_id = $_POST['ulke_id'];
$bolgeler_model = new Bolgeler_Model();
$bolgeler = $bolgeler_model->getBolgeler($ulke_id);
echo json_encode($bolgeler);
exit();
}
Artık index.html sayfamıza bölgeler için de bir select elementi ekleyebiliriz.
JQuery ile ülke seçimindeki değişikliği algılayıp bölgeler için istek atacağız ve ilgili select'e ekleyeceğiz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog</title>
</head>
<body>
<h1>Blog</h1>
<select id="ulkeler">
<option value="">Ülke Seçiniz</option>
</select>
<select id="bolgeler">
<option value="">Bölge Seçiniz</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// Ülkeleri al
$.ajax({
type: 'POST',
url: 'controllers/queries.php',
data: {query: 'Ülke Listesi'},
dataType: 'json',
success: function(response){
// Gelen ülke listesini select elementine ekle
response.forEach(function(ulke){
$('#ulkeler').append('<option value="' + ulke.id + '">' + ulke.isim + '</option>');
});
},
error: function(xhr, status, error){
console.error('Ajax hatası:', error);
}
});
// Ülke seçildiğinde bölgeleri al
$('#ulkeler').change(function(){
var ulke_id = $(this).val();
$.ajax({
type: 'POST',
url: 'controllers/queries.php',
data: {query: 'Bölge Listesi', ulke_id: ulke_id},
dataType: 'json',
success: function(response){
$('#bolgeler').empty().append('<option value="">Bölge Seçiniz</option>');
// Gelen bölge listesini select elementine ekle
response.forEach(function(bolge){
$('#bolgeler').append('<option value="' + bolge.id + '">' + bolge.isim + '</option>');
});
},
error: function(xhr, status, error){
console.error('Ajax hatası:', error);
}
});
});
});
</script>
</body>
</html>
Böylece sayfa yüklendiğinde önce ülkelerin listesi alınacak ve ilgili select'e eklenecek.
Kullanıcı bir ülke seçtiğinde de bölgelerin listesi alınacak ve ilgili select'e eklenecek.
Sırada bölge seçildiğinde il, il seçildiğinde de ilçe seçimi yapmak var.
Tabi ilçe seçildiğinde de ilçenin içeriklerini alacağız ve tarihe bakarak son girilen içeriği ekranda göstereceğiz.
Sayfanın altında da bu ilçenin daha eski tarihli içeriklerini listeleyeceğiz ve bunlardan birine basıldığında o içeriğin gelmesini sağlayacağız...
...
Biraz zamanım var diye böyle uzun uzun örnekler yazdım ama artık zamanım kalmadı.
Bu noktadan sonra cevabımı olduğu gibi alıp ChatGPT'ye yapıştırarak devam etmesini söylerseniz size yardımcı olacaktır diye düşünüyorum.
Artık GPT'nin mantığı anlayacağı kadar içerik yazdım sanırım. :)