Hdeya team blog » PHP Tips http://www.hdeya.com/blog We can make IT Sun, 28 Mar 2010 11:28:27 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Sorting items on the fly (AJAX) using jQuery UI Sortable, PHP & MySQL. http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/ http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/#comments Sun, 03 May 2009 17:50:32 +0000 Mahmoud M. Abdel-Fattah http://www.hdeya.com/blog/?p=162 While we were working on http://www.duettographics.com Administration control panel, they required the ability to sort their images in easy way, so after some googeling we find many separate tutorials for this. So, we decided to write one simple tutorial that can describe the whole thing.

In this tutorial, we’ll work on sorting menu items.

Requirements : sortable jQuery UI, PHP & MySQL server support.

  1. Create a new MySQL Database called `test_db` and a new table called `menu 
    CREATE TABLE IF NOT EXISTS `menu` (
  `id` int(11) NOT NULL auto_increment,
  `title` int(11) NOT NULL,
  `sort` int(2) NOT NULL,
  PRIMARY KEY  (`id`)
)
  2. Create new php file called “menu_list.php”, this file will be our main file to sort the menu items . 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sorting Items on the fly using jQuery UI, PHP & MySQL</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(
function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);
</script>
</head>
<body>
<h1>Menu List</h1>

<ul id="sortme">
<?php
// Connecting to Database
mysql_connect($hostname, $user_name, $password) or die ('Cant Connceto to MySQL');

// Selecting Database
mysql_select_db($db_name) or die ('Cant select Database');

// Getting menu items from DB
$result = mysql_query("SELECT * FROM `menu` ORDER BY `sort` ASC") or die(mysql_error());
while($row = mysql_fetch_array($result)) {
echo '<li id="menu_' . $row['id'] . '">' . $row['title_en'] . "</li>\n";
}
?>
</ul>
</body>
</html>
  3. Create a new file for AJAX purpose to update sorting called “sort_menu.php” 
    <?php
// Connecting to Database
mysql_connect($hostname, $user_name, $password) or die ('Cant Connceto to MySQL');

// Selecting Database
mysql_select_db($db_name) or die ('Cant select Database');

$menu = $_POST['menu'];
for ($i = 0; $i < count($menu); $i++) {
mysql_query("UPDATE `menu` SET `sort`=" . $i . " WHERE `id`='" . $menu[$i] . "'") or die(mysql_error());
}
?>

Finally, this should works fine with you, but If you faced any problem, leave ur comment !

]]> http://www.hdeya.com/blog/2009/05/sorting-items-on-the-fly-ajax-using-jquery-ui-sortable-php-mysql/feed/ 18 Generate thumbnails automatically for uploaded images on OpenWYSIWYG http://www.hdeya.com/blog/2009/05/generate-thumbnails-automatically-for-uploaded-images-on-openwysiwyg/ http://www.hdeya.com/blog/2009/05/generate-thumbnails-automatically-for-uploaded-images-on-openwysiwyg/#comments Sat, 02 May 2009 17:18:56 +0000 Mahmoud M. Abdel-Fattah http://www.hdeya.com/blog/?p=154 http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/ OpenWYSIWYG is a free & Open source WYSIWYG “rich text editor”, and it has a php add-on for images upload. In this post we’ll describe how to generate thumbnails automatically on images [...]]]> We wrote this post specially to integrate openWYSIWYG with jQuery Lightbox, so we recommend you to read this article too http://www.hdeya.com/blog/2009/05/generates-lightbox-on-the-fly-using-jquery/

OpenWYSIWYG is a free & Open source WYSIWYG “rich text editor”, and it has a php add-on for images upload. In this post we’ll describe how to generate thumbnails automatically on images upload.

1. Download OpenWYSIWYG, and create a new folder called thumbs inside your uploads folder.

2. Edit /addons/imagelibrary/insert_image.php, add the following code after line 44 :

function createThumbnail($imageDirectory, $imageName, $thumbDirectory, $thumbWidth)
   {
      $srcImg = imagecreatefromjpeg("$imageDirectory/$imageName");
      $origWidth = imagesx($srcImg);
      $origHeight = imagesy($srcImg);
      $ratio = $thumbWidth/$origWidth;
      $thumbHeight = $origHeight * $ratio;
 
      $thumbImg = ImageCreateTrueColor($thumbWidth, $thumbHeight);
      imagecopyresized($thumbImg, $srcImg, 0, 0, 0, 0, $thumbWidth, $thumbHeight, $origWidth, $origHeight);
      $temp_file_name = explode(".", $imageName);
      array_pop($temp_file_name);
      $temp_file_name = implode("", $temp_file_name);
      $thumbImgName = $temp_file_name. "_thumb.jpg";
 
      imagejpeg($thumbImg, "$thumbDirectory/$thumbImgName");
      imagedestroy($thumbImg);
   }

3. search for :

if($upload) {
	move_uploaded_file($_FILES['file']['tmp_name'], $leadon . $_FILES['file']['name']);
	$thumbs_directory = $leadon . "thumbs/";

then add the following code after :

	createThumbnail($leadon, $_FILES['file']['name'], $thumbs_directory, '120');

Finally, open your browser, and try to insert-image through your OpenWYSIWYG, you’ll find your image uploaded successfully & a generated thumbnail for it found on /thumbs folder.

]]> http://www.hdeya.com/blog/2009/05/generate-thumbnails-automatically-for-uploaded-images-on-openwysiwyg/feed/ 1