Please check this code
its little modification in jquery Drag and Drop DEMO
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Droppable - Simple photo manager</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
#trash2 { float: left; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash2 h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash2 h4 .ui-icon { float: left; }
#trash2 .gallery h5 { display: none; }
# </style>
# <script type="text/javascript">
$(function() {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash'), $trash2 = $('#trash2');
// let the gallery items be draggable
$('li',$gallery).draggable({
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteImage(ui.draggable);
}
});
// let the trash2 be droppable, accepting the gallery items
$trash2.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteImage1(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash2 li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
function deleteImage($item) {
$item.fadeOut(function() {
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
});
}
//// 2ND IMAGE FUNCTION /////
function deleteImage1($item) {
$item.fadeOut(function() {
var $list = $('ul',$trash2).length ? $('ul',$trash2) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash2);
$item.find('a.ui-icon-trash').remove();
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
});
}
/////////////////////////////////////
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
function recycleImage($item) {
$item.fadeOut(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="'+src+'"]');
if ($modal.length) {
$modal.dialog('open')
} else {
var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
.attr('src',src).appendTo('body');
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-trash')) {
deleteImage($item);
} else if ($target.is('a.ui-icon-zoomin')) {
viewLargerImage($target);
} else if ($target.is('a.ui-icon-refresh')) {
recycleImage($item);
}
return false;
});
});
</script>
</head>
<body>
<div class="demo ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" /> <a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="inessa_avatar.jpg" alt="On top of Kozi kopka" width="96" height="72" />
<a href="inessa_avatar.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 2</h5>
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
<div id="trash2" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"> Album</h4>
</div>
</div><!-- End demo -->
<!-- End demo-description -->
</body>
</html>
Monday 14 September 2009
Sunday 13 September 2009
Preventing SQL Injection with PHP
SQL injection refers to the act of someone inserting a MySQL statement to be run on your database without your knowledge. Injection usually occurs when you ask a user for input, like their name, and instead of a name they give you a MySQL statement that you will unknowingly run on your database.
From Wikiedpia.com:
SQL injection is a technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed. It is in fact an instance of a more general class of vulnerabilities that can occur whenever one programming or scripting language is embedded inside another.
Example
< FORM NAME="frm1" METHOD="POST" ACTION="process.php >
NAME: <INPUT NAME="name"><BR> "
" PASSWORD: <INPUT NAME="pwd">
" <INPUT TYPE="SUBMIT" VALUE="LOGIN">
</FORM>
process.php
The normal query is no problem.
However, the injection attack has actually made our query behave differently than we intended. By using a single quote (') they have ended the string part of our MySQL query
* usr_pwd = ' '
and then added on to our WHERE statement with an OR clause of 1 (always true).
* usr_pwd = ' ' OR 1
This OR clause of 1 will always be true!
HOW DO I PREVENT A SQL INJECTION
use mysql_real_escape_string()
so our form will be now
Hope This will help you.
From Wikiedpia.com:
SQL injection is a technique that exploits a security vulnerability occurring in the database layer of an application. The vulnerability is present when user input is either incorrectly filtered for string literal escape characters embedded in SQL statements or user input is not strongly typed and thereby unexpectedly executed. It is in fact an instance of a more general class of vulnerabilities that can occur whenever one programming or scripting language is embedded inside another.
Example
< FORM NAME="frm1" METHOD="POST" ACTION="process.php >
NAME: <INPUT NAME="name"><BR> "
" PASSWORD: <INPUT NAME="pwd">
" <INPUT TYPE="SUBMIT" VALUE="LOGIN">
</FORM>
process.php
$name = $_POST[‘name’];
$pwd = $_POST[‘pwd’];
$str_sql = "SELECT * from `tbl_users` WHERE " .
"usr_name=’" . $name . "’ AND " .
"usr_pwd=’" . $pwd . "’";
$result = mysql_query( $str_sql ) or die ( mysql_error() );
?>
The normal query is no problem.
However, the injection attack has actually made our query behave differently than we intended. By using a single quote (') they have ended the string part of our MySQL query
* usr_pwd = ' '
and then added on to our WHERE statement with an OR clause of 1 (always true).
* usr_pwd = ' ' OR 1
This OR clause of 1 will always be true!
HOW DO I PREVENT A SQL INJECTION
use mysql_real_escape_string()
so our form will be now
$name = mysql_real_escape_string( $_POST[‘name’] );
$pwd = mysql_real_escape_string( $_POST[‘pwd’] );
....................
....................
Hope This will help you.
Subscribe to:
Posts (Atom)
