jQuery, PHP ve MySQL ile Nesne Seçimi (Selectable)

Bu yazımda jQuery kullanarak nesne seçimi yapacağız ve yaptığımız seçimi PHP aracılığı ile MySQL veritabanımıza kayıt edeceğiz.

Yapacağımız uygulamanın demosu : DEMO

Şimdi adım adım işlemlerimizi uygulayalım :

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

CREATE TABLE IF NOT EXISTS `wwphpjQuerySelectable` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `selectedindex` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=2;

CREATE TABLE IF NOT EXISTS `wwphpjQuerySelectable` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`selectedindex` int(11) NOT NULL,

PRIMARY KEY (`id`)

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

2.Adım Örnek verilerimizi tablomuza ekliyoruz :

INSERT INTO `wwphpjQuerySelectable` (`id`, `selectedindex`) VALUES
(1, 2);

1 2	INSERT INTO `wwphpjQuerySelectable` (`id`, `selectedindex`) VALUES (1, 2);

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

<!DOCTYPE html>
<html lang="en">
<head>
	<title>jQuery Selectable Örneği</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<style>
		#feedback { font-size: 1.4em; }
		#selectable .ui-selecting { background: #FECA40; }
		#selectable .ui-selected { background: #F39814; color: white; }
		#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
		#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 55px; }
	</style>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

	<div class="container">
	  <h2>wwPHP.com jQuery Selectable Örneği</h2>
	  <p>Aşağıda listede bulunan nesneleri seçerek seçimi anlık olarak veri tabanına kayıt ettirebilirsiniz. <br> Sayfayı yenilediğinizde seçiminiz aynı kalır.</p>
	</div>
	  
	<div class="container">
		<pre> 
			<div id="Bilgi"></div> 
		</pre> 
		<ul id="selectable" >
			<li id="Item_1" class="ui-widget-content">Item 1</li>
			<li id="Item_2" class="ui-widget-content">Item 2</li>
			<li id="Item_3" class="ui-widget-content">Item 3</li>
			<li id="Item_4" class="ui-widget-content">Item 4</li>
			<li id="Item_5" class="ui-widget-content">Item 5</li>
			<li id="Item_6" class="ui-widget-content">Item 6</li>
		</<>
	</div>

</body>
  <script>
    $(function() {
        $.get("get.php", function (data) {
            $("#Item_"+data+"").addClass("ui-selected");
        });        
        $( "#selectable" ).selectable({
            stop: function() {
                $( ".ui-selected", this ).each(function() {
                    var index = $( "#selectable li" ).index( this );
					$("#Bilgi").html("<img src='img/load.gif' alt='uygulanıyor...' />");
                    $("#Bilgi").load("set.php?index="+index); 
                });
            }
        });
    });
  </script>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Selectable Örneği</title>

<style>

#feedback { font-size: 1.4em; }

#selectable .ui-selecting { background: #FECA40; }

#selectable .ui-selected { background: #F39814; color: white; }

#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 55px; }

</style>

</head>

<body>

<h2>wwPHP.com jQuery Selectable Örneği</h2>

<p>Aşağıda listede bulunan nesneleri seçerek seçimi anlık olarak veri tabanına kayıt ettirebilirsiniz. <br> Sayfayı yenilediğinizde seçiminiz aynı kalır.</p>

</div>

<pre>

</pre>

</<>

</div>

</body>

$(function() {

$.get("get.php", function (data) {

$("#Item_"+data+"").addClass("ui-selected");

});

$( "#selectable" ).selectable({

stop: function() {

$( ".ui-selected", this ).each(function() {

var index = $( "#selectable li" ).index( this );

$("#Bilgi").html("<img src='img/load.gif' alt='uygulanıyor...' />");

$("#Bilgi").load("set.php?index="+index);

});

}

});

</script>

</html>

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

<?php
sleep(1);
$db 		= new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
try{
	$db->beginTransaction();
	
	$SqlSorgusu = "UPDATE `wwphpjQuerySelectable` SET `selectedindex` = :selectedindex WHERE `id` = 1";

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

	$st->bindParam(':selectedindex', $_GET["index"]);
		
	$st->execute();

	$db->commit();
	
	ECHO "<div style='color:green; font-size:20px;'>Seçim Başarılı ! </div>";
}
catch (Exception $e){
	
    if ($db->inTransaction()) {
		
        $db->rollback();
		
    }
	
    ECHO "<div style='color:red; font-size:20px;'>HATA MEYDANA GELDİ ! </div>";
	
}

?>

<?php

sleep(1);

$db = new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE", array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));

try{

$db->beginTransaction();

$SqlSorgusu = "UPDATE `wwphpjQuerySelectable` SET `selectedindex` = :selectedindex WHERE `id` = 1";

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

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

$st->execute();

$db->commit();

ECHO "<div style='color:green; font-size:20px;'>Seçim Başarılı ! </div>";

}

catch (Exception $e){

if ($db->inTransaction()) {

$db->rollback();

}

ECHO "<div style='color:red; font-size:20px;'>HATA MEYDANA GELDİ ! </div>";

}

5.Adım get.php dosyamızı oluşturuyoruz :

<?php
$db 		= new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE");

$SqlSorgusu  = "SELECT * FROM wwphpjQuerySelectable";

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

$st->execute();

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

ECHO $Veriler[0]["selectedindex"]+1;

?>

<?php

$db = new PDO("mysql:dbname=VT_ADI;host=localhost","VT_KULLANICIADI","VT_ŞİFRE");

$SqlSorgusu = "SELECT * FROM wwphpjQuerySelectable";

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

$st->execute();

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

ECHO $Veriler[0]["selectedindex"]+1;

6.Adım kullanılan resimler :

load.gif :

jQuery, PHP ve MySQL ile Nesne Seçimi (Selectable)

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