jQuery, PHP ve MySQL ile Dinamik Nesne Boyutlandırma (Resizable)

Bu yazımda jQuery kullanarak dinamik nesne boyutlandırma uygulaması yapacağız ve nesnemizin boyutunu PHP aracılığı ile MySQL veritabanımıza kayıt edeceğiz.

Daha sonra da kayıt ettiğimiz boyut bilgilerini PHP aracılığı ile MySQL veritabanımızdan çekip jQuery ile sayfa ilk açılırken nesnemize tanımlayacağız.

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 `wwphpjQueryResizable` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `width` int(4) NOT NULL,
  `height` int(4) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=2 ;

CREATE TABLE IF NOT EXISTS `wwphpjQueryResizable` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`width` int(4) NOT NULL,

`height` int(4) 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 `wwphpjQueryResizable` (`id`, `width`, `height`) VALUES
(1, 634, 347);

1 2	INSERT INTO `wwphpjQueryResizable` (`id`, `width`, `height`) VALUES (1, 634, 347);

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

<!DOCTYPE html>
<html lang="en">
<head>
	<title>wwPHP.com jQuery Nesne Yeniden Boyutlandırma (resizable) Ö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="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css" type="text/css" media="all" />

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<style>
		#resizable { width: 150px; height: 150px; padding: 0.5em; }
		#resizable h3 { text-align: center; margin: 0; }
	    .ui-resizable-helper { border: 2px dotted #00F; }
	</style>
</head>

<body>
	<div class="container">
	  <h2>wwPHP.com jQuery ile Nesne Yeniden Boyutlandırma Örneği.<br /> jQuery-UI Resizable.</h2>
	  <p>Aşağıda bulunan kutuyu yeniden boyutlayabilirsiniz.Yeniden boyutladıktan sonra kutunun genişlik ve yüksekliği veritabanına kayıt edilir.</p>
	</div>
	<div class="container">
		<pre> 
			<div id="Bilgi"></div> 
		</pre> 
		<div class="ui-widget-content ui-resizable" id="resizable">
			<h3 class="ui-widget-header">Boyutumu Değiştir (:</h3>
		</div>
	</div>
</body>
<script type="text/javascript"> 
$(document).ready(function() { 
    $.get("get.php", function (data) {
        var SplitData = data.split("-");
		$("#resizable").width(SplitData[0]);
		$("#resizable").height(SplitData[1]);
    });     
	$("#resizable").resizable({
		animate: false,
		helper: "ui-resizable-helper",
		stop: function (event, ui) {
			height = $("#resizable").height(); 
			width = $("#resizable").width();
			$("#Bilgi").html("<img src='img/load.gif' alt='uygulanıyor...' />");
			$("#Bilgi").load("set.php?width="+width+"&height="+height); 
		}
	});
}); 
</script>
</html>

<!DOCTYPE html>

<head>

<title>wwPHP.com jQuery Nesne Yeniden Boyutlandırma (resizable) Örneği</title>

<style>

#resizable { width: 150px; height: 150px; padding: 0.5em; }

#resizable h3 { text-align: center; margin: 0; }

.ui-resizable-helper { border: 2px dotted #00F; }

</style>

</head>

<body>

<h2>wwPHP.com jQuery ile Nesne Yeniden Boyutlandırma Örneği.<br /> jQuery-UI Resizable.</h2>

<p>Aşağıda bulunan kutuyu yeniden boyutlayabilirsiniz.Yeniden boyutladıktan sonra kutunun genişlik ve yüksekliği veritabanına kayıt edilir.</p>

</div>

<pre>

</pre>

<h3 class="ui-widget-header">Boyutumu Değiştir (:</h3>

</div>

</body>

$(document).ready(function() {

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

var SplitData = data.split("-");

$("#resizable").width(SplitData[0]);

$("#resizable").height(SplitData[1]);

});

$("#resizable").resizable({

animate: false,

helper: "ui-resizable-helper",

stop: function (event, ui) {

height = $("#resizable").height();

width = $("#resizable").width();

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

$("#Bilgi").load("set.php?width="+width+"&height="+height);

}

});

</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 `wwphpjQueryResizable` SET `width` = :width, `height` = :height WHERE `id` = 1";

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

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

	$db->commit();
	
	ECHO "<div style='color:green; font-size:20px;'>Boyutlandırma 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 `wwphpjQueryResizable` SET `width` = :width, `height` = :height WHERE `id` = 1";

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

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

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

$st->execute();

$db->commit();

ECHO "<div style='color:green; font-size:20px;'>Boyutlandırma 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 wwphpjQueryResizable WHERE `id` = 1";

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

$st->execute();

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

ECHO $Veriler[0]["width"]."-".$Veriler[0]["height"];

?>

<?php

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

$SqlSorgusu = "SELECT * FROM wwphpjQueryResizable WHERE `id` = 1";

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

$st->execute();

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

ECHO $Veriler[0]["width"]."-".$Veriler[0]["height"];

6.Adım : Kullanılan resimler :

load.gif :

jQuery, PHP ve MySQL ile Dinamik Nesne Boyutlandırma (Resizable)

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