Insert ، Update و Delete کردن داده در HTML۵

در این مقاله نشان می دهیم که چگونه داده را درinsert ,Update ، database و Delete کنیم.

Insert ، Update و Delete کردن داده در HTML۵

ابتدا یک table ایجاد می‌کنیم و داده‌هایی‌ را در آن وارد می‌کنیم.داده به عنوان خروجی نشان داده خواهد شد و سپس با استفاده از دکمه‌های edit و delete ، داده را edit و delete می‌کنیم،همانند زیر:

حالا کد را به صورت زیر می‌نویسیم،برای ایجاد form از روش زیر استفاده می‌کنیم.
مرحله ۱: ابتدا control‌ها را ایجاد می‌کنیم(یعنی‌ همان textbox‌ها و button‌ها برای  insert کردن داده )
 

<div>
    <h1>Insert Data, Update Data and Delete Data In HTML5</h1>
    <input type="hidden" id="id" />
    <b>First name:</b><input type="text" id="firstName" /><br />
    <b>Last name:</b><input type="text" id="lastName" /><br />
    <b>City:</b><input type="text" id="city" /><br />
    <b>State:</b><input type="text" id="state" /><br />
    <b>Phone:</b>
    <input type="text" id="phone" /><br />
    <b>Email:</b><input type="text" id="email" /><br />
    <button onclick="InsertData()">Insert Data</button>
    <button onclick="UpdateData()">Update Data</button>
    <button onclick="ClearData()">Clear</button>
    <br />
    <br />
    <br />
    <div id="details"></div>
</div>

 

در اینجا فیلد id را به عنوان hidden field در نظر می‌‌گیریم،چون در این مثال id به صورت اتوماتیک افزایش پیدا می‌کند.
مرحله۲: حالا کد زیر را در تگ  <script> می‌نویسیم:

<script>
    var id = document.getElementById('id');
    var firstName = document.getElementById('firstName');
    var city = document.getElementById('city');
    var state = document.getElementById('state');
    var email = document.getElementById('email');
    var lastName = document.getElementById('lastName');
    var phone = document.getElementById('phone');
    var results = document.getElementById('details');
</script>

در این کد برای هر فیلد یک متغیر تعریف می‌‌شود.
حالا database را به صورت زیر ایجاد می‌کنیم:
 

var db = openDatabase("MYDATABASE", "1.0", "MYDB", 4 * 1024 * 1024);
var mydata;
CreateTable();
function CreateTable() {
      db.transaction(function (tx) {
          tx.executeSql("create table if not exists Emp (id INTEGER PRIMARY KEY AUTOINCREMENT, firstName TEXT, lastName TEXT,city TEXT,state TEXT, phone TEXT,email TEXT)");
      });
}

در کد بالا ما یک table به نام Emp ایجاد کردیم که در آن id را به عنوان کلید اصلی‌ گرفته ایم ،این کار برای delete و update کردن داده در databse قابل استفاده است.
حالا متد ()ShowData را می‌نویسیم که به وسیله آن داده‌ها را نشان می‌‌دهیم:

 

function ShowData() {
        results.innerHTML = '';
        db.transaction(function (tx) {
            tx.executeSql("SELECT * FROM Emp", [], function (tx, result) {
                mydata = result.rows;
                for (var i = 0, item = null; i < mydata.length; i++) {
                    item = mydata.item(i);
                    results.innerHTML +=
                    '<b>First Name : </b>' + item['firstName'] + ' , ' + '<b>Last Name :</b> ' + item['lastName'] + ' , ' + '<b>City : </b>' + item['city'] + ' , ' + '<b>State :</b>' + item['state'] + ' , ' + '<b>Phone: </b>' + item['phone'] + ' , ' + '<b>Email : </b>' + item['email'] + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img height="20" width="20" src="Edit.jpg" onclick="LoadMyData(' + i +
')" />' +
                    '<img height="20" width="20" src="delete.jpg" onclick="deleteRecord(' + item['id'] + ')" /><br/>';
                }
            });
        });
    }

 

در کد بالا ابتدا داده را از جدول Emp می گیریم و سپس آن را نشان می دهیم.در اینجا از دو عکس استفاده می‌کنیم ،یکی‌ برای edit و دیگری برای delete.
سپس دو متد می‌نویسیم ،یکی‌ از آنها ()LoadMyData و دیگری ()deleteData است.
ابتدا با متد ()LoadMyData شروع می‌کنیم که برای load شدن داده در textbox‌ها مورد استفاده قرار می‌گیرد:

function LoadMyData(i) {
     var item = mydata.item(i);
     firstName.value = item['firstName'];
     lastName.value = item['lastName'];
     city.value = item['city'];
     state.value = item['state'];
     phone.value = item['phone'];
     email.value = item['email'];
     id.value = item['id'];
 }

سپس متد ()deleteData را می‌نویسیم ،با این کار وقتی‌ روی delete کلیک کنیم ، همان رکورد مورد نظر از database حذف میشود:

function deleteData(id) {
      var deleteStatement = "delete from Emp where id=?";
      db.transaction(function (tx) {
          tx.executeSql(deleteStatement, [id], ShowData(), ShowErrorMessage);
      });
     ClearData();
} 
function ClearData() {
     firstName.value = '';
     lastName.value = '';
     city.value = '';
     state.value = '';
     email.value = '';
     phone.value = '';
     id.value = '';
}

مرحله ۳: حالا کدد insert به database را می‌نویسیم:

<button onClick="InsertData()">Insert Data</button>

function InsertData() {
      var insertStatement = "insert into Emp (firstName, lastName,city,state,phone,email) values (?, ?, ?,?,?,?)";
      db.transaction(function (tx) { 
          tx.executeSql(insertStatement, [firstName.value, lastName.value, city.value, state.value, phone.value, email.value], showdatacleardata, ShowErrorMessage);
     });
}

با این روش داده را به insert  ، database می‌کنیم.


مرحله۴ : حالا کدی می‌نویسیم که داده Update شود:

function UpdateData() {
      var updateStatement = "UPDATE Emp SET firstName = ?, lastName = ?,city=?,state=? ,phone = ?,email=? WHERE id = ?";
      db.transaction(function (tx) { 
          tx.executeSql(updateStatement, [firstName.value, lastName.value, city.value, state.value, phone.value, email.value, id.value], showdatacleardata, ShowErrorMessage);
      });
}

 

توسط این کود به راحتی‌ می‌‌توانیم داده را در  update ، database کنیم.پس هنگامی که روی دکمهٔ Edit کلیک کنیم ،داده‌ها درون textbox‌ها نمایان میشوند ،بعد از اینکه edit را انجام دادیم با زدن دکمهٔ update ،داده‌های ما update میشوند.

 


 

فایل های ضمیمه