Cara Menambahkan Edit dikomentar dengan jQuery Dialogify part 2

Pembahasan kali ini saya masih membahas tentang Cara Menambahkan Edit dikomentar dengan jQuery Dialogify lanjutan dari part 1. Kalau sebelumnya saya baru sebatas Tampilan HTML List AddÂ dengan Opsi edit Komentar sekarang kita akan membuat prosesnya, silahkan simak penjelasan berikut.

Menambahkan Edit KomentarÂ untuk Dialogifikasi Inisialisasi

Di bagian ini, tambahkan edit komentar dari HTML. Saya telah menggunakan metode inisialisasi library Dialogify memuat sumber eksternal. Dengan menentukan sumber file eksternal, konten HTML akan dimuat ke jendela modal yang ditunjukkan oleh plugin Dialogify.

add-form.php

File add-form.php ditulis untuk menampilkan form add komentar di jendela Dialog.Â form HTML akan berisi nama, situs web, dan bidang pesan komentar untuk mendapatkan input dari pengguna. Dengan mengklik tombol Oke, bidang ini dimuat ke objek lokal dan dikirim ke skrip sisi server untuk memproses aksi tambahan.

<input type="text" class="text-field form-control" id="username" placeholder="Name"/>
<input type="text" class="text-field form-control" id="website" placeholder="Website"/>
<textarea type="text" class="text-field form-control" id="new_content" placeholder="content"></textarea>

edit-form.php

File edit-form.php juga berisi tiga bidang yang sama seperti dalam form add-komentar. Namun, data komentar akan ditambahkan ke bidang form edit. Proses ini dilakukan secara programatik melalui jQuery. Nama, situs web, dan data konten komentar didapat dari objek lokal yang dipakai sebelumnya.

<input type="text" class="text-field form-control" id="username"
placeholder="Name" />
<input type="text" class="text-field form-control" id="website"
placeholder="link" />
<textarea type="text" class="text-field form-control" id="edit_content"
placeholder="content"></textarea>

<script>
$(document).ready(function () {
var name = localStorage.getItem('name');
var website = localStorage.getItem('website');
var content = localStorage.getItem('content');
$('#username').val(name);
$('#website').val(website);
$('#edit_content').val(content);
});
</script>

<input type="text" class="text-field form-control" id="username"

placeholder="Name" />

<input type="text" class="text-field form-control" id="website"

placeholder="link" />

<textarea type="text" class="text-field form-control" id="edit_content"

placeholder="content"></textarea>

$(document).ready(function () {

var name = localStorage.getItem('name');

var website = localStorage.getItem('website');

var content = localStorage.getItem('content');

$('#username').val(name);

$('#website').val(website);

$('#edit_content').val(content);

});

</script>

Kode PHP untuk Menambahkan Edit Komentar dengan Database

Di PHP proses menambahkan permintaan edit dan parameter diterima dari panggilan AJAX. Berdasarkan jenis permintaan, kueri akan dibuat untuk melakukan tindakan menambah atau mengedit pada basis data komentar. Script berikut menunjukkan bagaimana aksi add edit komentar dilakukan dan diperbarui ke database.

kita terhubung ke database dan menggunakan pernyataan yang disiapkan MySQLi untuk kueri INSERT atau UPDATE untuk melakukan aksi yang diminta pada entitas komentar. Data yang diposting dan tipenya masing-masing digunakan untuk membangun nilai param query dan array tipe param.

comment-add.php

<?php
require_once('db.php');

if (isset($_POST['insert_row'])) {
$sql = $conn->prepare("INSERT INTO tbl_comments (name,website,content) VALUES (?, ?, ?)");
$name = $_POST['name'];
$website = $_POST['website'];
$content = $_POST['content'];
$sql->bind_param("sss", $name, $website, $content);
if ($sql->execute()) {
$success_message = "Added Successfully";
} else {
$error_message = "Problem in Adding New Record";
}
$sql->close();
$conn->close();
exit();
}
?>

<?php

require_once('db.php');

if (isset($_POST['insert_row'])) {

$sql = $conn->prepare("INSERT INTO tbl_comments (name,website,content) VALUES (?, ?, ?)");

$name = $_POST['name'];

$website = $_POST['website'];

$content = $_POST['content'];

$sql->bind_param("sss", $name, $website, $content);

if ($sql->execute()) {

$success_message = "Added Successfully";

} else {

$error_message = "Problem in Adding New Record";

}

$sql->close();

$conn->close();

exit();

}

comment-edit.php

<?php
require_once('db.php');

if (isset($_POST['edit_row'])) {
    $sql = $conn->prepare("UPDATE tbl_comments SET name=? , website=? , content=?  WHERE id=?");
    $id = $_POST['id'];
    $name = $_POST['name'];
    $website = $_POST['website'];
    $content = $_POST['content'];

    $sql->bind_param("sssi", $name, $website, $content, $id);
    if ($sql->execute()) {
        print "success";
    } else {
        $error_message = "Problem in Editing Record";
    }
}
?>

<?php

require_once('db.php');

if (isset($_POST['edit_row'])) {

$sql = $conn->prepare("UPDATE tbl_comments SET name=? , website=? , content=? WHERE id=?");

$id = $_POST['id'];

$name = $_POST['name'];

$website = $_POST['website'];

$content = $_POST['content'];

$sql->bind_param("sssi", $name, $website, $content, $id);

if ($sql->execute()) {

print "success";

} else {

$error_message = "Problem in Editing Record";

}

Database Script

tabel tbl_comments digunakan untuk membuat daftarÂ edit komentar.Script DatabaseÂ di bawah ini diperlukan untuk menjalankan contoh di atas.

--
-- Table structure for table `tbl_comments`
--

CREATE TABLE `tbl_comments` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `website` varchar(255) NOT NULL,
  `content` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_comments`
--
ALTER TABLE `tbl_comments`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_comments`
--
ALTER TABLE `tbl_comments`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

-- Table structure for table `tbl_comments`

CREATE TABLE `tbl_comments` (

`id` int(11) NOT NULL,

`name` varchar(100) NOT NULL,

`website` varchar(255) NOT NULL,

`content` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Indexes for dumped tables

-- Indexes for table `tbl_comments`

ALTER TABLE `tbl_comments`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `tbl_comments`

ALTER TABLE `tbl_comments`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

COMMIT;

Berikut hasil dari Cara Menambahkan Edit dikomentar dengan jQuery Dialogify,

Output proses edit

Oke itulah tadi pembahasan saya tentang Cara Menambahkan Edit dikomentar dengan jQuery Dialogify, semoga bermanfaat.

Cara Menambahkan Edit dikomentar dengan jQuery Dialogify part 2

Facebook DUMET School

Konsultasi Gratis

Categories