ای‌جکس‌بازی » حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری

بعضی‌ها فکر می‌کنند که مثلاً جی‌کوئری فقط برای درست‌کردن ِ افکت‌ها و این‌چیزهاست، درصورتی که اصل ِ جی‌کوئری، ماجرای فرستادن درخواست و گرفتن پاسخ از سمت آقای سرور به‌صورت ای‌جکس می‌باشد که الان می‌خواهیم به یک مورد کوچکی از آن اشاره کنیم. این‌که چه‌طور یک رکورد از بانک‌اطلاعاتی‌مان را بدون بارگذاری‌شدن ِ هیچ صفحه‌ای حذف کنیم. این‌کار را بر پایه‌ی پی‌اچ‌پی انجام می‌دهیم.

اتصال به بانک‌اطلاعاتی

برای وصل‌شدن به بانک‌اطلاعاتی، قبل از هرکاری، یک فایل با نام config.php می‌سازیم و آن را با ادیتورمان باز می‌کنیم و کد زیر را در آن می‌نویسیم:

<?php
$db_host = 'localhost';
$db_name = 'your database name';
$db_user = 'your username';
$db_pass = 'your password';
?>

کار خاصی نکردیم، فقط چند متغیر به‌نام‌های db_host، db_name، db_user و db_pass تعریف کردیم که مقادیر آن‌ها را به‌ترتیب، نوع هاست (که اصولا همان localhost می‌باشد)، نام بانک‌اطلاعاتی، نام‌کاربری‌ای که با آن به بانک اطلاعاتی دسترسی پیدا می‌کنیم و در آخر هم رمزعبور را دادیم.

حالا دیگر هرجایی که خواستیم به بانک‌اطلاعاتی وصل بشویم، کافی است این فایل را فراخوانی کنیم.

حذف رکورد

ابتدا باید یک صفحه‌ای برای نمایش رکوردها داشته باشیم. پس یک فایل با نام index.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<html>
<head>
<title>حذف رکورد از بانک‌اطلاعاتی با جی‌کوئری</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/delete.js" type="text/javascript"></script>
</head>
<body>
<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Database Connection Error!');
@mysql_select_db($db_name);

$query = "SELECT * FROM my_tbl ORDER BY id DESC";
$result = @mysql_query($query) or die(mysql_error());
while($row = @mysql_fetch_array($result))
{
?>
<div class="record">
<div class="content"><?php echo($row[content]); ?></div>
<div class="date"><?php echo($row[content_date]); ?></div>
<div class="tools"><a class="delete" id="<?php echo($row[id]); ?>" href="#">حذف</a></div>
</div>
<?php
}
mysql_close($connect);
?>
</body>
</html>

در خط نهم، فایل کانفیگ که حاوی مشخصات بانک‌اطلاعاتی‌مان بود را فراخوانی کردیم. در خط یازدهم و دوازدهم، به بانک‌اطلاعاتی وصل شدیم. در خط‌های چهاردهم و پانزدهم هم تیبل ِ موردنظرمان را انتخاب کردیم و از خط شانزدهم تا بیست‌وسوم هم یک حلقه برای نمایش رکوردهایی که در تیبل ِ انتخاب‌شده‌مان قرار دارد ایجاد کردیم.
در خط بیست‌وششم، اتصال به بانک‌اطلاعاتی را بستیم که البته این دستور فقط جنبه‌ی امنیتی دارد و کاری به عمل‌کرد ِ کدمان ندارد.

حالا دیگر فقط دو مرحله پیش ِ رو داریم. اولی نوشتن اسکریپت ِ حذف رکورد با پی‌اچ‌پی و دومی نوشتن کد جی‌کوئری‌ای که درخواست ِ ما (همان حذف رکورد) را بفرستد به اسکریپتی که در مرحله‌ی اول نوشتیم و آن را اجرا کند.

پس اول یک فایل با نام delete.php می‌سازیم و کدهای زیر را در آن می‌نویسیم:

<?php
include("config.php");

$connect = @mysql_connect($db_host, $db_user, $db_pass) or die('Connection Error');
@mysql_select_db($db_name);

$id = $_GET['id'];

$query = "DELETE FROM my_tbl WHERE id = '$id'";
mysql_query($query);

mysql_close($connect);
?>

باز هم در ابتدا فایل کانفیگ را فراخوانی کردیم و بعد از آن هم به بانک‌اطلاعاتی وصل شدیم. در خط هفتم یک متغیر با نام id تعریف کردیم که جلوتر در مورد ماهیتش توضیح می‌دهم. در خط نهم و دهم هم کد مربوط به حذف رکورد را نوشتیم و در پایان اتصال به بانک‌اطلاعاتی را بستیم.

حالا می‌رویم سراغ کد جی‌کوئری‌مان. یک فایل با نام delete.js می‌سازیم و آن را با ادیتورمان باز می‌کنیم. کدهای زیر را در آن می‌نویسیم:

$(function() {
$(".delete").click(function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
 if(confirm("مطمئنید که قصد حذف این رکورد را دارید؟ این غیرقابل‌بازگشت خواهد بود!"))
		  {
 $.ajax({
   type: "GET",
   url: "delete.php",
   data: info,
   success: function(){
   }
 });
	$(this).parents(".record").css({ backgroundColor: "red" }, "fast")
	.animate({ opacity: "hide" }, "slow");
 }

return false;
});
});

اگر دقت کرده باشید، در صفحه‌ای که رکوردهای‌مان نمایش داده می‌شوند یک دکمه‌ای قرار دادیم که کلاس ِ آن delete هست. به همین خاطر در کد بالا، قبل از هرچیز می‌گوییم که وقتی روی دکمه‌ی حذف کلیک شد، آن‌وقت اتفاقاتی که در ادامه می‌گویم، بی‌اُفتند.

اولین‌کاری که باید بکنیم این هست که شناسه‌ی رکوردی که دکمه‌ی حذف ِ آن را زده‌ایم، مشخص شود. برای این‌کار، در صفحه‌ای که رکوردها نمایش داده می‌شوند، در آی‌دی ِ هر رکورد، شناسه‌ی آن را برمی‌گرداندیم. حالا دیگر کارمان راحت شد و در کد بالا می‌بینید که شناسه‌ی رکورد را خیلی راحت در می‌آوریم (خط‌های 3 تا 5). یادتان هست که در فایل delete.php، متغیر ِ $id را ایجاد کرده بودیم؟ مقدار آن برابر با شناسه‌ی رکورد که در کد بالا مشخصش می‌کنیم می‌شود. حالا باید یک پیغام به کاربر بدهیم که اگر آن را تایید کند، آن‌وقت عملیات ِ حذف ِ رکورد انجام بشود.

اصل ماجرا این‌جاست. ما از تابع $.ajax() برای ارسال اطلاعات به اسکریپتی که برای حذف رکورد نوشته بودیم استفاده می‌کنیم. مقدار ِ متد ِ url، را برابر با آدرس فایل delete.php قرار می‌دهیم. این تابع یک متدی دارد به‌نام success. کار اصلی این متد این است که وقتی عملیات با موفقیت انجام شد، یک رویدادی انجام گیرد. مثلاً یک پیغام نمایش داده شود و بگوید که رکورد حذف شد یا یک همچین‌چیزی.
یک افکتی هم در آخر درست می‌کنیم که وقتی رکورد حذف شد، از دید‌مان پنهان شود که در خط‌های پانزده و شانزده، کد ِ مربوط به افکت را می‌بینید. ابتدا رنگ‌زمینه‌ی رکورد را قرمز و بعد از آن، مخفی‌اش می‌کنیم. همین!

این‌جا دمو را ببینید و این نمونه را دریافت کنید:

دیدگاه‌ها (18)

  • صالح

    در 10/04/15 گفت:

    ساده ، کامل و بسیار کاربردی بود
    ممنون

  • مرتضا

    در 10/04/15 گفت:

    سلام
    واقعا مطلب مفیدی بود .
    بعد از یه وقفه توی نوشتن مطلب خوبی نوشتی .
    دستت درست – خسته نباشی .

  • پیام

    در 10/04/15 گفت:

    عالی بود
    ممنون

  • hadi

    در 10/04/17 گفت:

    بسیار عالی بود.
    همین دیروز بود فکر کنم چند ساعت وقتم صرف پیدا کردن همین متد ajax() شد توی گوگل تا پیداش کردم و فهمیدمش

  • Ali

    در 10/04/20 گفت:

    سلام. عزيز خسته نباشيد. من كه زياد از اين چيزا سر در نميارم. ميخواستم بپرسم كه شما برنامه سرچ رو طراحي كرديد؟؟؟

  • حسن

    در 10/04/21 گفت:

    خوب بود .

  • محسن

    در 10/04/21 گفت:

    سلام
    4 ماهه که بخاطر سربازی نتونستم مطالبتو دتبال کنم . و این وضعبت تا 12 ماه دیگه ادامه داره … :) خوش باشی … به جای ما هم با اینترنت و ای دی اس ال و اینا حال کنید تا من بیام

  • محمد

    در 10/04/25 گفت:

    آقا مطلب خیلی باحالی بود
    با اجازه‏ت یه کپی‏ش رو روی سایتم گذاشتم [البته با ذکر منبع]

  • اللهیار

    در 10/05/01 گفت:

    مرسی از زحمتی که کشیدی

  • مسعود

    در 10/05/02 گفت:

    سلام علی عزیز….خوشحال میشم اگه با هم صحبتی در رابطه با وب داشته باشیم.

    masoodi153
    این ایدیه منه.هر وقت تونستی اد کن.ممنون

  • مسعود

    در 10/05/15 گفت:

    خوشم میاد سال به سال به نظرات سر نمیزنی :دی
    من همچنان منتظرم

  • علیها

    در 10/05/15 گفت:

    @مسعود
    سلام رفیق
    من تو جی‌تاک هستم فقط.

  • مسعود

    در 10/05/20 گفت:

    پس این ای دی رو اد کن….masoodyazdi
    بای

  • فاطمه

    در 10/05/22 گفت:

    سلام من این کدو تست کردم خیلی عالی بود و تشکر
    اما واقعا از دیتابس چیزی حذف نکرد ظاهرا از صفحه ایندکس حذف میشد اما در دیتابس رکوردها همچنان بودند

  • علی

    در 10/06/13 گفت:

    سلام دوست عزیز ، آموزش خوبی بود من از این آموزش استفاده کردم.

    خواهشی داشتم در صورت امکان روشی به همین سادگی ( راحتی ) برای ویرایش مطالب و درج مطالب هم قرار دهید . ( مخصوصا ویرایش ) .

    واقعا عالی بود .
    با سپاس
    یا علی

  • احمد

    در 10/06/25 گفت:

    سلام من تو را با نام يك طراح وب ثبت كردم اگر مي شود لطف كنيد من را با نام فناوري و اطلاعات جهان ثبت كنيد . از سايت خوبتون هم ممنونم

  • h

    در 10/07/25 گفت:

    سلام چرا یک خبرنامه درست نمیکنید مثل سایتهای دیگه
    اگه درست کردی ایمیل منم لطفا بزارید توش
    ممکنه دیگه پیداتون نکنم
    با این کار با خبر میشم

  • voltan

    در 10/08/12 گفت:

    سلام بسیار عالی بود . دستت درد نکنه .


© کاپی‌راست 2010؛ به‌قدرت وردپرس؛ رادیو علیها؛ روزانه‌ها.