jQuery, PHP ve MySQL ile Dinamik Tabbed Content

Bu yazımda jQuery ve PHP ile verilerin dinamik olarak MySQL veritabanımızdan geldiği bir Tabbed Content yapacağız.

Öncelikli olarak yapacağımız uygulamanın demosu : DEMO

Şimdi adım adım uygulamamıza geçelim.

1.Adım : Veritabanımız üzerinde örnek tablomuzu oluşturuyoruz :

CREATE TABLE IF NOT EXISTS `wwphpjQueryTabs` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `TabName` varchar(16) COLLATE utf8_bin NOT NULL,
  `TabContent` varchar(512) COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=3 ;

CREATE TABLE IF NOT EXISTS `wwphpjQueryTabs` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`TabName` varchar(16) COLLATE utf8_bin NOT NULL,

`TabContent` varchar(512) COLLATE utf8_bin NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=3 ;

2.Adım : Tablomuza örnek verileri ekliyoruz :

INSERT INTO `wwphpjQueryTabs` (`id`, `TabName`, `TabContent`) VALUES
(1, 'Sekme 1', '<h1>Sekme 1</h1><br /><p>Icerik 1 </p>'),
(2, 'Sekme 2', '<h1>Sekme 2</h1><br />\r\n<h3>Sekme 2</h3><br />\r\n<h6>Sekme 2</h6>');

INSERT INTO `wwphpjQueryTabs` (`id`, `TabName`, `TabContent`) VALUES

(1, 'Sekme 1', '<h1>Sekme 1</h1><br /><p>Icerik 1 </p>'),

(2, 'Sekme 2', '<h1>Sekme 2</h1><br />\r\n<h3>Sekme 2</h3><br />\r\n<h6>Sekme 2</h6>');

3.Adım : index.php dosyamızı oluşturuyoruz :

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>wwPHP.com jQuery Tabs Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  #loader
  {
		top: 200px;
		z-index: 100;
		padding-top: 50px;
		text-align: center;
   }
   </style>
<body>
<?php
$db 		= new PDO("mysql:dbname=DB_NAME;host=localhost","DB_USERNAME","DB_PASS");

$SqlSorgusu = "SELECT `id`, `TabName`, `TabContent` FROM `wwphpjQueryTabs`";

$st 		= $db->prepare($SqlSorgusu);

$st->execute();

$Veriler 	= $st->fetchAll(PDO::FETCH_ASSOC);
?>
<div class="container">
	<h2>wwPHP jQuery Tab Demosu</h2>
	<p>Aşağıda bulunan tabların içerikleri php aracılığı ile mysql veritabanından dinamik olarak gelmektedir..</p>

	<ul class="nav nav-tabs">
	<?php
	foreach($Veriler as $Veri)
	{
			ECHO'<li id="litab'.$Veri["id"].'"><a id="tab'.$Veri["id"].'" href="tabs.php?id='.$Veri["id"].'">'.$Veri["TabName"].'</a></li>';
	}
	?>
	</ul>
	<div id="loader"><img src="img/load.gif"> İçerik Yükleniyor...</div>
	<div id="tcontent" class="tab-content"></div>
</div>

</body>
<script>
	function loadTabContent(tabUrl){ // Tab contentimizi çağırdığımız fonksiyon.
		jQuery("#tcontent").empty();
		$("#loader").show(); // İşleme başladğında Load.gif resmimizi gösteriyoruz.
		jQuery.ajax({
			url: tabUrl, // Fonksiyonumuza yolladığımız URL'i çağırıyoruz.
			cache: false,
			success: function(message) {
				jQuery("#tcontent").append(message); // Çağırdığımız sayfadan dönen içeriği gösteriyoruz.
				$("#loader").hide(); // Load.gif resmimizi gizliyoruz.
			}
		});
	}
	
	jQuery(document).ready(function(){
		$("#loader").hide(); 
		// Load.gif resmimizi ilk açılışta gizliyoruz.
		jQuery("[id^=tab]").click(function(){ 
		// id'si içerisinde tab geçen nesnelerden herhangi birine tıklanmasını yakalıyoruz biz linklere tab geçen id ler verdiğimiz için,
		// linklere tıklanma olayını yakalacaktır.
			tabId = $(this).attr("id"); // Tıklanılan nesnenin tam id sini alıyoruz.
			tabUrl = jQuery("#"+tabId).attr("href"); // Href değerinin altındaki URL i alıyoruz.
			jQuery("[id^=litab]").removeClass("active"); // Bir önceki tıklanılan nesneye tanımlanan active class ımızı kaldırıyoruz.
			jQuery("#li"+tabId).addClass("active"); // Tıklanılan nesnemize active class ımızı tanımlıyoruz.
			loadTabContent(tabUrl); // Yukarıda tıkladığımız nesneden aldığımız URL'i fonksiyonumuza yolluyoruz.
			return false; // Bu işlem sonucunda gelen url'e yönelendirilmemesi için false değerini döndürüyoruz.
		});
	});
</script>
</html>

<!doctype html>

<head>

<title>wwPHP.com jQuery Tabs Demo</title>

<style>

#loader

{

top: 200px;

z-index: 100;

padding-top: 50px;

text-align: center;

}

</style>

<body>

<?php

$db = new PDO("mysql:dbname=DB_NAME;host=localhost","DB_USERNAME","DB_PASS");

$SqlSorgusu = "SELECT `id`, `TabName`, `TabContent` FROM `wwphpjQueryTabs`";

$st = $db->prepare($SqlSorgusu);

$st->execute();

$Veriler = $st->fetchAll(PDO::FETCH_ASSOC);

<h2>wwPHP jQuery Tab Demosu</h2>

<p>Aşağıda bulunan tabların içerikleri php aracılığı ile mysql veritabanından dinamik olarak gelmektedir..</p>

<?php

foreach($Veriler as $Veri)

{

ECHO'<li id="litab'.$Veri["id"].'"><a id="tab'.$Veri["id"].'" href="tabs.php?id='.$Veri["id"].'">'.$Veri["TabName"].'</a></li>';

}

</ul>

<div id="loader"><img src="img/load.gif"> İçerik Yükleniyor...</div>

</div>

</body>

function loadTabContent(tabUrl){ // Tab contentimizi çağırdığımız fonksiyon.

jQuery("#tcontent").empty();

$("#loader").show(); // İşleme başladğında Load.gif resmimizi gösteriyoruz.

jQuery.ajax({

url: tabUrl, // Fonksiyonumuza yolladığımız URL'i çağırıyoruz.

cache: false,

success: function(message) {

jQuery("#tcontent").append(message); // Çağırdığımız sayfadan dönen içeriği gösteriyoruz.

$("#loader").hide(); // Load.gif resmimizi gizliyoruz.

}

});

}

jQuery(document).ready(function(){

$("#loader").hide();

// Load.gif resmimizi ilk açılışta gizliyoruz.

jQuery("[id^=tab]").click(function(){

// id'si içerisinde tab geçen nesnelerden herhangi birine tıklanmasını yakalıyoruz biz linklere tab geçen id ler verdiğimiz için,

// linklere tıklanma olayını yakalacaktır.

tabId = $(this).attr("id"); // Tıklanılan nesnenin tam id sini alıyoruz.

tabUrl = jQuery("#"+tabId).attr("href"); // Href değerinin altındaki URL i alıyoruz.

jQuery("[id^=litab]").removeClass("active"); // Bir önceki tıklanılan nesneye tanımlanan active class ımızı kaldırıyoruz.

jQuery("#li"+tabId).addClass("active"); // Tıklanılan nesnemize active class ımızı tanımlıyoruz.

loadTabContent(tabUrl); // Yukarıda tıkladığımız nesneden aldığımız URL'i fonksiyonumuza yolluyoruz.

return false; // Bu işlem sonucunda gelen url'e yönelendirilmemesi için false değerini döndürüyoruz.

});

</script>

</html>

4.Adım : tabs.php dosyamızı oluşturuyoruz :

<?php
sleep(1);
$db 		= new PDO("mysql:dbname=DB_NAME;host=localhost","DB_USERNAME","DB_PASS");

$SqlSorgusu = "SELECT `id`, `TabName`, `TabContent` FROM `wwphpjQueryTabs` WHERE `id` = :id";

$st 		= $db->prepare($SqlSorgusu);

$st->bindParam(':id', $_GET["id"]);

$st->execute();

$Veriler 	= $st->fetchAll(PDO::FETCH_ASSOC);

ECHO $Veriler[0]["TabContent"];

?>

<?php

sleep(1);

$db = new PDO("mysql:dbname=DB_NAME;host=localhost","DB_USERNAME","DB_PASS");

$SqlSorgusu = "SELECT `id`, `TabName`, `TabContent` FROM `wwphpjQueryTabs` WHERE `id` = :id";

$st = $db->prepare($SqlSorgusu);

$st->bindParam(':id', $_GET["id"]);

$st->execute();

$Veriler = $st->fetchAll(PDO::FETCH_ASSOC);

ECHO $Veriler[0]["TabContent"];

5.Adım : Load.gif dosyamız :

jQuery, PHP ve MySQL ile Dinamik Tabbed Content

Bu Kategorideki Diğer Yazılar

Leave a Comment Yanıtı iptal et

Bu Kategorideki Diğer Yazılar

Python, PyGame ve PyTorch ile Yapay Zekalı Yılan Oyunu Yapımı

Mikrotik İlk Yapılandırma ve Güvenlik

Python ile Transparan Proxy Sunucu Yapımı

Leave a Comment Yanıtı iptal et