آموزش AJAX مقدماتی قسمت پنجم

آموزش AJAX مقدماتی قسمت پنجم

حال زمان آن است که داده ها را از دیتابیس بگیریم ، برای این کار کویری می نویسم که تمام اطلاعات جدول employee را بگیرد سپس آنها را با یک حلقه while در جایگاه های خود برای نمایش قرار می دهم ، اگر به یاد داشته باشید وقتی جدول را ساختیم من فردی به نام Pouria را داخل آن ایجاد کردم .
Employee.php

<?php
include('dbConnection.php');

$query = "SELECT * FROM employee";
$run = mysqli_query($connection, $query);


$counter = 1;

while ($row = mysqli_fetch_assoc($run)) {
 ?>
 <tr>
 <td><?php echo $counter; ?></td>
 <td><?php echo $row['employeeName']; ?></td>
 <td><?php echo $row['employeeWork']; ?></td>
 <td><?php echo $row['employeeWages']; ?></td>
 <td>
 <div class="dropdown">
 <button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="#">Edit</a></li>
 <li><a href="#">Delete</a></li>
 </ul>
 </div>
 </td>
 </tr>

 <?php
 $counter++;
}
?>

خوب صفحه را رفرش کنید باید اطلاعات جدول برای شما به نمایش درآید ، من فعلا فقط یک داده به نام پوریا دارم .

نوبت نوشتن insert,update,delete است ، ابتدا نیاز داریم بدانیم کدام دکمه کلیک شده است دکمه ای که کار آن اضافه کردن حذف کردن و یا ویرایش کردن است ، سپس باید بدانیم اگر حذف یا ویرایش کلیک شده است کدام id باید حذف یا ویرایش شود ، هم چنین برای ویرایش من فایلی به نام employee.php ایجاد کردن که در آن یک فرم دیگر ساختم برای استفاده از این فرم نیز دو فانکشن ایجاد کردم یکی برای فرم دیفالت و دیگری برای فرم ویرایش .
برای انجام کارهای بالا فانکشن ajaxRequest باید سه پارامتر دریافت کند یکی id و دیگری یک رشته تا بدانیم کدام دکمه کلیک شده است و فانکشن مورد نظر ما.
من نام این سه را getValue و getId وwhichFuntion می گذارم ، و در دکمه add new record رویداد onclick را ایجاد کرده فانکشن ajaxRequest(‘insert’,null,defualtFunction) را فراخوانی می کنم .
حال باید درون فانکشن مقادیر input ها را بگیرم ، چک کنم اگر مقدار getValue برابر insert بود مقادیر input ها را چک کن تا خالی نباشند ، سپس اگر خالی بودند پیغام خطا و اگر پر بودند داده ها را به employeeData.php ارسال کن ، هم چنین باید چک کنم مقدار getValue اگر delete بود شماره id و اگر update بود شماره id و مقادیر جدید را به employeeData.php بفرست ، در employeeData.php نیز ابتدا چک می کنم اگر value مقدار داشت و مقدار آن delete update یا insert بود کارهای مربوط به هر کدام را انجام بده .
خوب متوجه شدید روند کار به چه صورت است بیاید کدها را ببینیم.
Index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>School record whit Ajax</title>
 <link rel="stylesheet" href="css/bootstrap.css">
 <script src="js/jquery-3.1.1.min.js"></script>
 <script src="js/bootstrap.js"></script>

 <script>
 var xmlHttpRequest = new XMLHttpRequest();

 var empName = document.getElementById("emName").value,
 empWork = document.getElementById("emWork").value,
 empWages = document.getElementById("emWages").value,
 url = "";

 function ajaxRequest(getValue, getId, whichFunction) {

 if (getValue == "insert") {

 if (empName == "" || empWork == "" || empWork == "select any" || empWages == "") {

 url = "employeeData.php";
 alert("some thing wrong");

 } else {
 url = "employeeData.php?value=" + getValue + "&name=" + empName + "&work=" + empWork + "&wages=" + empWages;
 }
 } else if (getValue == "delete") {

 url = "employeeData.php?value=" + getValue + "&id=" + getId;

 } else if (getValue == "edit") {

 url = "employeeEdit.php?value=" + getValue + "&id=" + getId;

 } else if (getValue == "editDone") {

 var empEdName = document.getElementById("emEdName").value,
 empEdWork = document.getElementById("emEdWork").value,
 empEdWages = document.getElementById("emEdWages").value;
 if (empEdName == "" || empEdWork == "" || empEdWork == "select any" || empEdWages == "") {

 url = "employeeEdit.php?value=" + getValue + "&id=" + getId;
 alert("some thing wrong");

 } else {

 url = "employeeEdit.php?value=" + getValue + "&edId=" + getId + "&edName=" + empEdName + "&edWork=" + empEdWork + "&edWages=" + empEdWages;

 }

 } else {
 url = "employeeData.php";
 }

 xmlHttpRequest.onreadystatechange = function () {

 if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
 whichFunction();
 }

 };

 xmlHttpRequest.open("GET", url, true);
 xmlHttpRequest.send();
 }

 function defaultFunction() {

 document.getElementById("test").innerHTML = xmlHttpRequest.responseText;

 }

 function editFunction() {

 document.getElementById("myFrom").innerHTML = xmlHttpRequest.responseText;

 }


 </script>

</head>
<body onload="ajaxRequest(null,null,defaultFunction);">

<div class="container">
 <div class="jumbotron">
 <h1>Darkoobweb employee</h1>
 </div>
 <!--Start form-->
 <div class="form-horizontal" id="myFrom">

 <div class="form-group">
 <label class="control-label col-md-2">Employee Name</label>
 <div class="col-md-8">
 <input type="text" id="emName" class="form-control">
 </div>
 </div>

 <div class="form-group">
 <label class="control-label col-md-2">Employee Work</label>
 <div class="col-md-3">
 <select class="form-control" id="emWork">
 <option value="select any" selected>Select Work</option>
 <option value="web designer">Web Designer</option>
 <option value="programmer">Programmer</option>
 <option value="manager">Manager</option>
 <option value="accountants">Accountants</option>
 </select>
 </div>
 <label class="control-label col-md-2">Employee wages</label>
 <div class="col-md-3">
 <input type="number" class="form-control" id="emWages">
 </div>
 </div>

 <div class="form-group">
 <div class="col-md-8 col-md-offset-2">
 <button class="btn btn-danger btn-block" onclick="ajaxRequest('insert',null,defaultFunction);">Add new
 record
 </button>
 </div>
 </div>

 </div>
 <!--End of from-->

 <!--Start table-->

 <table class="table table-striped">
 <thead>
 <tr class="success">
 <th>id</th>
 <th>Employee Name</th>
 <th>Employee Work</th>
 <th>Employee Wages</th>
 <th>Actions</th>
 </tr>
 </thead>

 <tbody id="test">

 </tbody>

 </table>

 <!--End of table-->

</div>

</body>
</html>

employeeData.php

<?php
include('dbConnection.php');


if (isset($_REQUEST['value']) && $_REQUEST['value'] == 'insert') {

 $name = $_REQUEST['name'];
 $work = $_REQUEST['work'];
 $wages = $_REQUEST['wages'];

 $query = "INSERT INTO employee (employeeName,employeeWork,employeeWages) VALUE ('{$name}','{$work}',{$wages})";
 $run = mysqli_query($connection, $query);

} elseif (isset($_REQUEST['value']) && $_REQUEST['value'] == 'delete') {

 $id = $_REQUEST['id'];
 $query = "DELETE FROM employee WHERE id = {$id}";

 $run = mysqli_query($connection, $query);

}

$query = "SELECT * FROM employee";
$run = mysqli_query($connection, $query);


$counter = 1;

while ($row = mysqli_fetch_assoc($run)) {
 ?>
 <tr>
 <td><?php echo $counter; ?></td>
 <td><?php echo $row['employeeName']; ?></td>
 <td><?php echo $row['employeeWork']; ?></td>
 <td><?php echo $row['employeeWages']; ?></td>
 <td>
 <div class="dropdown">
 <button class="btn btn-primary" data-toggle="dropdown">Actions<span class="caret"></span></button>
 <ul class="dropdown-menu">
 <li><a href="javascript:void(0)" onclick="ajaxRequest('edit',<?php echo $row['id']; ?>,editFunction);">Edit</a></li>
 <li><a href="javascript:void(0)" onclick="ajaxRequest('delete',<?php echo $row['id']; ?>,defaultFunction);">Delete</a></li>
 </ul>
 </div>
 </td>
 </tr>

 <?php
 $counter++;
}

 

درباره نویسنده

پوریا

سلام ، من پوریا هستم با جاوا آشنایی دارم به هوش مصنوعی و امنیت علاقه مندم و امید وارم آموزش هایی که در وب سایت قرار می دم برای شما مفید باشه ، موفق باشید {^}

نظر دهید

Click here to post a comment

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *