Pada HTML5 terdapat sebuah atribut contentEditable. Atribut ini berfungsi untuk mengedit halaman/konten langsung di jendela browser (live editing). Anda dapat menentukan bagian-bagian tertentu dari halaman yang harus diedit dengan cara yang sangat mudah. Pada dasarnya, yang harus Anda lakukan adalah menambahkan atribut tag contentEditable ke elemen. Atribut contentEditable dapat diterapkan untuk setiap elemen HTML, misalnya gambar, list, dan bahkan konten video.
Namun, salah satu keterbatasan dari contentEditable ialah atribut ini tidak menyediakan sarana bagi pengguna untuk menyimpan konten yang diedit ke database. Jadi, untuk menyimpan konten yang diedit, kita akan menggunakan jQuery dan PHP untuk menyimpan konten ke dalam database MySQL.
Pada tutorial ini, kita akan membuat sebuah elemen untuk mengedit dan menyimpan teks saja menggunakan HTML5. Sebagai gambaran, Anda dapat mencoba demo dibawah.
Langkah 1
Siapkan database terlebih dahulu, pada contoh berikut terdapat 2 field yang digunakan yaitu :
CREATE TABLE konten (
id_konten INT(3) AUTO_INCREMENT PRIMARY KEY,
isi_konten TEXT
);
Baca Juga : Cara Membuat Database MySQL
Langkah 2
Mulailah dengan membuat elemen HTML.
<div id="status"></div>
<div id="konten">
<div id="edit" contentEditable="true">
Bagian untuk menampilkan teks
</div>
<button id="simpan">Simpan</button>
</div>
Keterangan
- #edit : digunakan untuk isian teks yang dapat diedit.
- #status : untuk menampilkan pesan ketika isian berhasil disimpan atau gagal disimpan.
- contentEditable=”true” : mengaktifkan fitur contentEditable.
Ketika dijalankan, kita akan menyembunyikan tombol Simpan. Nantinya tombol Simpan akan tampil ketika div #edit diklik. Begitu juga dengan pesan pada div #status akan kosong (tidak tampil) pada awalnya, namun pesan akan tampil ketika proses simpan berhasil atau gagal.
Langkah 3
Berikan style CSS pada elemen yang telah dibuat. Anda bisa menambahkan style CSS sesuai dengan yang Anda inginkan.
#status {
display:none;
margin-bottom:15px;
padding:5px 10px;
border-radius:5px;
}
#simpan {
display: none;
margin: 5px 10px 10px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:700;
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #606060;
border: solid 1px #b7b7b7;
background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
}
#simpan:hover {
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
}
Langkah 4
Sekarang, tambahkan syntax jQuery.
$("#simpan").click(function (e) {
var konten = $(‘#edit’).html();
$.ajax({
url: ‘save.php’,//Ketika terjadi perubahan di #edit maka data akan diproses ke file save.php
type: ‘POST’,//Metode pengiriman data POST
data: {
konten: konten // Isian teks diambil dari elemen konten
},
success:function (data) {
if (data == ’1?)//Jika data berhasil disimpan tampilkan pesan sukses di div #status
{
$("#status")
.addClass("sukses")
.html("Data berhasil disimpan")
.fadeIn(‘fast’)
.delay(3000)
.fadeOut(‘slow’);
}
else //Jika data gagal disimpan tampilkan pesan gagal di div #status
{
$("#status")
.addClass("error")
.html("Data tidak berhasil disimpan")
.fadeIn(‘fast’)
.delay(3000)
.fadeOut(‘slow’);
}
}
});
});
$("#edit").click(function (e) {
$("#simpan").show();//Menampilkan tombol simpan ketika div #edit diklik
e.stopPropagation();
});
$(document).click(function() {
$("#simpan").hide();//Menyembunyikan tombol simpan ketika div #edit tidak diklik (dipilih)
});
Langkah 5
Tampilkan isian teks dengan PHP di div #edit.
<div id="edit" contentEditable="true">
<?php
//Mengambil data dari database
include("db.php");
$sql = mysql_query("select isi_konten from konten where id_konten=’1?");
$row = mysql_fetch_array($sql);
echo $row['isi_konten'];
?>
</div>
Langkah 6
Terakhir, buatlah file save.php untuk menyimpan perubahan data ke database.
<?php
include("db.php");
$konten = $_POST['konten']; //ambil data yang di post
$konten = mysql_real_escape_string($konten); //escape string
$sql = "UPDATE konten SET isi_konten = ‘$konten’ WHERE id_konten = ’1? ";
if (mysql_query($sql))
{
echo 1;
}
?>
