به طور کلی، کراد (CURD) هر حرفش مخفف یک کلمه است.
- C – Create : index.php – برای ورود اطلاعات در دیتابیس (INSERT SQL Query).
- R – Read : view.php – برای خواندن اطلاعات از دیتابیس (SELECT SQL Query).
- U – Update : upate.php – برای بروز کردن اطلاعات در دیتابیس (UPDATE SQL Query).
- D – Delete : delete.php – برای حذف اطلاعات در دیتابیس (DELETE SQL Query).
بد نیست که با استفاده از 4 تا فایل php و دیتابیس mysql یک مکانسیم ساده از کراد رو پیاده سازی کنیم. اون 4 تا فایل php قراره هر کدومشون یک فانکشن برای یکی از عملیات مذکور (create, read, update, delete) داشته باشن.
خب قبل از اینکه بخوایم صفحات اون 4 تا فایل اصلی رو بسازیم، یک سری ملزومات دیگه هم داریم، به عنوان مثال ساختن یک دیتابیس، ساختن یک کانکشن به دیتابیس، ساختن یک نمای کلی از پروژه و ..!
ساختن جدول (در دیتابیس یا همون پایگاه داده):
قبل از ساختن یک جدول در دیتابیس - همانطور که میدونید - لازم هست که خود دیتابیس رو ایجاد بکنید (در بانک اطلاعاتی مای اسکیو ال با دستور CREATE DATABASE <database-name> میتوان دیتابیس را ایجاد کرد) و سپس جدول زیر را بسازید:
CREATE TABLE `crud` (
`id` int(11) NOT NULL,
`first_name` varchar(255) NOT NULL,
`last_name` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`age` varchar(255) NOT NULL,
`email_id` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `crud`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for table `crud`
--
ALTER TABLE `crud`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
ساختن کانکشن یا سیستم ارتباط به دیتابیس (برای ارتباط با جدول مورد نظر)
حال توسط فایل connect.php لازم داریم که یک کانکشن بسازیم به دیتابیس و همون جدولی که ساختیم - برای وارد کردن، بروزرسانی کردن و حذف کردن اطلاعات در جدول؛ که میتوان برای ساختن این کانکشن از کد زیر استفاده کرد:
<?php
$connection = mysqli_connect('localhost', 'root', 'password');
if (!$connection){
die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection, 'project');
if (!$select_db){
die("Database Selection Failed" . mysqli_error($connection));
}
ساختن یک فرم ساده اچ تی ام ال HTML
برای وارد کردن فیلدها - ورود و بروزرسانی اطلاعات موجود - به یک فرم نیاز داریم که باید آن را بسازیم. به شکل زیر:
<!DOCTYPE html>
<html>
<head>
<title>Simple CRUD Application - CREATE</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>Create Operation in CRUD Application</h2>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="fname" class="form-control" id="input1" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" name="lname" class="form-control" id="input1" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="input1" placeholder="E-Mail" />
</div>
</div>
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<label>
<input type="radio" name="gender" id="optionsRadios1" value="male" checked> Male
</label>
<label>
<input type="radio" name="gender" id="optionsRadios1" value="female"> Female
</label>
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<select name="age" class="form-control">
<option>Select Your Age</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
</form>
</div>
</div>
</body>
</html>
وارد کردن اطلاعات در دیتابیس:
خب وقت آن رسیده که اطلاعات را در دیتابیس وارد کنیم (در واقع همان C در CRUD). پس در ابتدای فایل index.php اون کانکشنی رو که ساختیم صدا میزنیم که بتونیم توی همون فایل ازش استفاده کنیم:
equire_once ('connect.php');
سپس در php چک می کنیم که آیا پارامتر ارسالی از طریق اون فرمی که ساختیم ارسال شده یا نه (توسط چک کردن POST super global)؛ و سپس در صورت وجود اطلاعات ارسالی، اونها رو توی متغییر های php نگهداری میکنیم:
if(isset($_POST) & !empty($_POST)){
$fname = mysql_real_escape_string($_POST['fname']);
$lname = mysql_real_escape_string($_POST['lname']);
$email = mysql_real_escape_string($_POST['email']);
$gender = $_POST['gender'];
$age = $_POST['age'];
}
حال نوبت به نوشتن کوئری مورد نیاز برای وارد کردن اطلاعات در دیتابیس رسیده است:
$CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')";
و سپس اجرا کردن کوئری فوق توسط mysqli:
$res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection));
و سپس ساختن یک پیام از نتیجه حاصله فرایند ورود اطلاعات در دیتابیس:
if($res){
$smsg = "Successfully inserted data, Insert New data.";
}else{
$fmsg = "Data not inserted, please try again later.";
}
و به همون نسبت، نیاز داریم که این پیامی رو که در بالا ساختیم، بالای اون فرم htmlی که ساخته بودیم نمایش بدیم، پس این دو خط کد زیر رو بزارید بالای اون فرم html:
<?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
گرفتن اطلاعات از دیتابیس و نمایش آنها
مرحله بعد، نمایش اطلاعاتی هستش که در دیتابیس وارد شده (در واقع همان R در CRUD). به این شکل میتوان عمل کرد:
<!DOCTYPE html>
<html>
<head>
<title>Simple CRUD Application - READ Operation</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h2>Read Operation in CRUD applicaiton</h2>
<table class="table ">
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>E-Mail</th>
<th>Age</th>
<th>Gender</th>
<th>Extras</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Vivek Vengala</td>
<td>[email protected]</td>
<td>Male</td>
<td>28</td>
<td>
<a href="update.php"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
<a href="delete.php"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
خب در بالا صفحه نمایش اطلاعات رو ساختیم و الان وقت این رسیده که یه کوئری به دیتابیس بزنیم و اطلاعات یا همون دیتای مورد نیاز رو ازش بگیریم. در ابتدا باید مجددا اون کانکشن رو به همین صفحه نمایش هم اضافه کنیم:require_once('connect.php');. سپس کوئری مورد نیاز رو مینویسیم تا اطلاعات رو از دیتابیس بگیریم:
$ReadSql = "SELECT * FROM `crud`";
نکته: توی این کوئری بد نیست که از دستور LIMIT هم استفاده بشه که تمام نتایج انتخاب نشن، این نکته وقتی معنی پیدا میکنه که اطالاعات وارد شده زیاد باشند و بخوایم صفحه بندیشون بکنیم. پس LIMIT 10,0 رو به انتهای کوئری بالا اضافه کنیم که فقط 10 تا از نتایج رو برامون انتخاب کنه.
سپس اجرا کردن کوئری:
$res = mysqli_query($connection, $ReadSql);
خب الان دیتای مورد نظر از دیتابیس انتخاب شده و ما نیاز داریم که توی صفحه نشونش بدیم. یک مفهومی اینجا وجود داره به اسم حلقه ها (یا همون loop)، که باید روی چیزی که از دیتابیس انتخاب کردیم لوپ بزنیم که بتونیم تک تک اطلاعات وارد شده رو نمایش بدیم:
<?php
while($r = mysqli_fetch_assoc($res)){
?>
<tr>
<th scope="row"><?php echo $r['id']; ?></th>
<td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td>
<td><?php echo $r['email_id']; ?></td>
<td><?php echo $r['gender']; ?></td>
<td><?php echo $r['age']; ?></td>
<td>
<a href="update.php?id=<?php echo $r['id']; ?>"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a>
<a href="delete.php?id=<?php echo $r['id']; ?>"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
</tr>
<?php } ?>
بروزرسانی کردن (ویرایش کردن) اطلاعات وارد شده در دیتابیس
خب مرحله بعدی، اینه که دیتایی که در دیتابیس وارد شده رو بتونیم ویرایش کنیم. (در واقع همون U در CRUD). خب برای update.php فایل، من قصد دارم اونو از نظر html با index.php یکسان در نظر بگیرم. چون وقتی شما میخوای یک دیتای مشخص رو ویرایش کنی، لازم داری همون یک دونه دیتا رو دقیقا توی یک فرم ببینی با دیتای فعلی که داره. پس از همون html استفاده میکنیم و با این تفاوت که دیتا ثابت نیست و قابلیت ویرایش داره که توسط کاربر اتفاق میوفته.
سپس کاربر ویرایشش رو انجام میده و فرم رو سابمیت میکنه. نکته ای که هست اینه که توی html نمایش (یعنی view.php) ما اومدیم دکمه های ویرایش و حذف رو هم ساختیم برای هر سطر. یعنی روی هر کدوم از اون لینک ها که کلیک کنید، شما به صفحه edit.php یا delete.php هدایت می شید. خب این از htmlی که گفتم مشابه همون index.php هست:
<!DOCTYPE html>
<html>
<head>
<title>Simple CRUD Application - UPDATE Operation</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<link rel="stylesheet" href="styles.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<form method="post" class="form-horizontal col-md-6 col-md-offset-3">
<h2>UPDATE Operation in CRUD Application</h2>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" name="fname" class="form-control" id="input1" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" name="lname" class="form-control" id="input1" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">E-Mail</label>
<div class="col-sm-10">
<input type="email" name="email" class="form-control" id="input1" placeholder="E-Mail" />
</div>
</div>
<div class="form-group" class="radio">
<label for="input1" class="col-sm-2 control-label">Gender</label>
<div class="col-sm-10">
<label>
<input type="radio" name="gender" id="optionsRadios1" value="male" checked> Male
</label>
<label>
<input type="radio" name="gender" id="optionsRadios1" value="female"> Female
</label>
</div>
</div>
<div class="form-group">
<label for="input1" class="col-sm-2 control-label">Age</label>
<div class="col-sm-10">
<select name="age" class="form-control">
<option>Select Your Age</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</div>
</div>
<input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" />
</form>
</div>
</div>
</body>
</html>
خب الان چون این فرم به منزله فرم ویرایش هست، باید دیتای فعلی رو از دیتابیس بگیریم و توی این فرم نشونش بدیم. نکته ای که هست اینه که دیتای چه سطری؟ پس باید اون لینکایی که صحبتشو کردم (که گفتم به صفحه ویرایش و حذف شما رو هدایت میکنن) یک آیدی رو هم به صورت GET ارسال کنن که الان بدونیم باید کدوم پست رو select کنیم:
require_once('connect.php');
$id = $_GET['id'];
$SelSql = "SELECT * FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $SelSql);
$r = mysqli_fetch_assoc($res);
سپس برای نمایش تک تک دیتاها توی فیلد ها باید به این شکل عمل کرد:
<input type="text" name="fname" class="form-control" id="input1" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
<input type="text" name="fname" class="form-control" id="input1" value="<?php echo $r['first_name']; ?>" placeholder="First Name" />
<input type="email" name="email" class="form-control" id="input1" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
<input type="email" name="email" class="form-control" id="input1" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
<input type="email" name="email" class="form-control" id="input1" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" />
<select name="age" class="form-control">
<option>Select Your Age</option>
<option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option>
<option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option>
<option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option>
<option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option>
<option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option>
<option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option>
</select>
خب الان کاربر میتونه تغییرات مورد نظرش رو روی دیتای فعلی بده و مجددا فرم رو سابمیت کنه (یعنی مجددا به سمت سرور ارسال کنه). از اینجا به بعد دوباره به شکلی همون فرایند Create تکرار میشه؛ با این تفاوت که اینبار بجای INSERT باید از UPDATE یک سطر خاص استفاده بشه:
if(isset($_POST) & !empty($_POST)){
$fname = mysql_real_escape_string($_POST['fname']);
$lname = mysql_real_escape_string($_POST['lname']);
$email = mysql_real_escape_string($_POST['email']);
$gender = $_POST['gender'];
$age = $_POST['age'];
}
$UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id";
if($res){
header('location: view.php');
}else{
$fmsg = "Failed to update data.";
}
$res = mysqli_query($connection, $UpdateSql);
همچنین این یک خط کد پایین رو هم بزارید بالای فرم ویرایشتون (بالای تگ <form>) که نتیجه فرایند ویرایش رو نمایش بده:
<?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
افزودن پاپ آپ برای حصول اطمینان کاربر از حذف یک پست
روالی که از نظر UX اثبات شده این هستش که در موارد delete، بهتر هست قبل از شروع فرایند حذف، یک پیامی رو به کاربر نشون بدیم با این مضمون که «آیا از حذف پست اطمینان دارید؟». به منظور پیاده سازی این فرایند قبلا به طور مفصل توضیح داده شده است. و من فقط به طور خلاصه کدش رو میگم؛ قبل از اون هم لازم هست که کتاب خانه جاوااسکریپتی jQuery به پروژه اضافه بشه:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
و همینطور باید کدی که قبلا توی صفحه نمایش زدیم رو هم بهتر بکنیم و این پاپ آپ رو توش تعبیه بکنیم. یعنی آیکون delete باید تبدیل به یک دکمه بشه. پس کد پایین رو در کنار اون loopی که داشتیم، کنار آیکون edit اضافه کنید:
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button>
<!-- Modal -->
<div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete File</h4>
</div>
<div class="modal-body">
<p>Are you sure?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="delete.php?id=<?php echo $r['id']; ?>"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a>
</div>
</div>
</div>
</div>
حذف دیتا (اطلاعات) از دیتابیس (پایگاه داده):
خب نوبت رسید به آخرین مرحله، یعنی همون D از CRUD. اغلب فرایند تکراری هست و با این تفاوت که توی کوئری باید از DELETE استفاده بشه. یعنی اول کانکشن رو به ابتدای فایل delete.php اضافه کنیم. (هدایت شدن به صفحه delete.php
از همون دکمه ای که بالا ساختیم اتفاق میوفته).
معماری کلی هم قراره اینطوری باشه که اگه پست مورد نظر با موفقیت حذف شد، با یک پیام موفقیت آمیز به صفحه view.php هدایت میشیم؛ در غیر این صورت پیام خطا رو به کاربر نمایش میدیم.
پس با فایل delete.php، مرحله آخر رو شروع می کنیم:
require_once('connect.php');
$id = $_GET['id'];
$DelSql = "DELETE FROM `crud` WHERE id=$id";
$res = mysqli_query($connection, $DelSql);
if($res){
header('location: view.php');
}else{
echo "Failed to delete";
}
خب در اینجا ما الان یک سیستم کوچیک «کراد» CRUD داریم که میتونیم ازش استفاده کنیم.
نکته: توی توضیحاتی که گفتم، شاید پیش اومده باشه که گاها از واژه «سطر»، یا گاها از واژه «پست» استفاده کرده باشم که در واقع هردوش یکی هست و داره به مفهوم row در دیتابیس اشاره میکنه. همچنین واژگان «دیتابیس»، «بانک اطلاعاتی» و «پایگاه داده» نیز هر سه یک چیز هستن و دارن به database اشاره می کنن.
