Tambah, Edit, Delete berita menggunakan TinyMCE

Duh ngak terasa neh kayaknya ane dah lama banget kagak ngeblog😀, kira2 udah berapa bulan ya ?😀 Padahal seh ane udah agak malas neh ngeblog soalnya banyak tugas sekolah, maklum anak sekolahan😀 tapi karena ane terinspirasi dari seorang teman ane yang baru belajar ngeblog ane jadi semangat lagi neh ngeblog hehehe😀 Kayaknya ngak penting banget ya bahas ini😉 Ya udah langsung aja deh kita masuk ke postingan ane kali ini ya😀

Karena banyak yang request tutorial tentang menambah, mengedit, dan menghapus berita dengan TinyMCE makanya ane posting neh tutorial, sorry buat yg udah lama request tapi tutornya baru keluar sekarang. Ok langsung aja ya, untuk membuat aplikasi ini, sebaiknya baca dulu postingan ane yg sebelumnya tentang https://postinganane.wordpress.com/2011/02/04/membuat-aplikasi-berita-menggunakan-tinymce/ ya brotha ;D Ya udah yuk mulai aja tutornya, cekicroot langsung ya😀

Bahan2 yang akan kita butuhkan dan yang akan kita buat :

1. TinyMCE >> download >> lalu ekstrak ke base directory web server ente kalau ane pake xampp versi windows jadi base directorynya ada di C:\xampp\htdocs, nah kalau udah diekstrak nanti ada direktori baru C:\xampp\htdocs\tinymce, tempatkan file2 dibawah ini di direktori ini

2 . File config.php >> file konfigurasi database

3. index.php >> berfungsi untuk menampilkan postingan yg sudah ada

4. post.php >> berfungsi untuk mengedit dan menambah berita

5. post_action.php >> berfungsi untuk melakukan proses pengolahan data dari file post.php

Ok sekarang kita udah pada tau bahan2nya, langsung aja ke bagian actionnya😀

1. Pertama2 kita buat dulu databasenya, kasih nama databasenya tinymce atau whateverlah😛

2. Setelah itu kita buat table berita di database tinymce

CREATE TABLE `tinymce`.`berita` (`id` INT(5) NOT NULL AUTO_INCREMENT PRIMARY KEY, `judul` VARCHAR(100) NOT NULL, `isi_berita` TEXT NOT NULL) ENGINE = InnoDB;

3. Kemudian buat file konfigurasi databasenya, atur sesuai settingan masing ya😀

<?php
$host = "localhost";
$user = "username_ente";
$pass = "password_db_ente";
$database = "tinymce";
$koneksi = mysql_connect ($host,$user,$pass);
mysql_select_db($database) or die ("Gagal Koneksi bos !!!");
?>

4. Setelah itu buat file index.php, neh scriptnya tinggal di copas aja ya, di dalam script ini juga ada penjelasannya jadi tenang aja ;D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplikasi Tambah Edit Delete Berita dengan TinyMCE</title>
<style>
table{
width:600px;
border:1px outset #000;
border-collapse:collapse;
}
</style>
</head>

<body>
<?php
error_reporting(0);
require "config.php";

echo "<table border=\"1px\">
<tr>
<td width=\"5%\">No</td>
<td width=\"75%\">Judul</td>
<td width=\"20%\">Aksi</td>
</tr>";

$no = 1;
$get = "select * from berita order by id desc"; // ambil berita dari table berita dan diurutkan dari berita terbaru
$exe = mysql_query($get); // jalankan perintah $get

// looping data berita kemudian ditampilkan
while($show = mysql_fetch_array($exe)){
echo "<tr>
<td>$no</td>
<td width=\"200px\">$show[judul]</td>
<td>
<a href=post.php?action=edit&id=$show[id]>Edit</a> |
<a href=post.php?action=delete&id=$show[id]>Hapus</a>
</td>
</tr>";
$no++;
}
echo " <tr>
<td width=\"5%\"></td>
<td width=\"75%\"><a href=\"post.php?action=newpost\">Tambah Berita</a></td>
<td width=\"20%\"></td>
</tr>
</table>";
?>

<br />
&copy; CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="https://postinganane.wordpress.com">https://postinganane.wordpress.com</a>]
</body>
</html>

Tampilan kasarnya kira2 seperti ini :

5. Kemudian kita buat file post.php yang berfungsi untuk menambahkan dan mengedit berita

<?php
error_reporting(0);
require "config.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplikasi Tambah Edit Delete Berita dengan TinyMCE</title>

<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<!-- Masukkan TinyMCE ke TextArea -->
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/content.css",

// Drop lists for link/image/media/template dialogs
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js",

// Style formats
style_formats : [
{title : 'Bold text', inline : 'b'},
{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
{title : 'Example 1', inline : 'span', classes : 'example1'},
{title : 'Example 2', inline : 'span', classes : 'example2'},
{title : 'Table styles'},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>
</head>

<body>
<?php
switch($_GET[action]){
case "newpost": // apabila post.php?action=newpost maka tampilkan textarea untuk membuat berita baru
echo "<h2>Tambah Berita</h2>
<form method=\"POST\" action=\"post_action.php?action=input\">
<table>
<tr>
<td width=70>Judul</td>
<td><input type=\"text\" name=\"judul\" size=\"60\"></td>
</tr>";

echo "<tr>
<td>Isi Berita</td>
<td><textarea name=\"isi_berita\" style=\"width: 600px; height: 350px;\"></textarea></td>
</tr>";

echo "<tr>
<td></td>
<td><input type=\"submit\" value=\"Simpan\"><input type=\"button\" value=\"Batal\" onclick=\"self.history.back()\"></td>
</tr>
</table>
</form>";
break;

case "edit": // apabila post.php?action=edit maka tampilkan textarea untuk mengedit berita
$get = "select * from berita WHERE id = '$_GET[id]'"; // ambil data dari table berita
$exe = mysql_query($get); // jalankan perintah $get
$show = mysql_fetch_array($exe); // tampilkan hasil data dari $exe

echo "<h2>Edit Berita</h2>
<form method=\"POST\" action=\"post_action.php?action=update\">
<input type=\"hidden\" name=\"id\" value=\"$show[id]\">
<table>
<tr>
<td width=70>Judul</td>
<td><input type=\"text\" name=\"judul\" value=\"$show[judul]\" size=\"60\"></td>
</tr>";

echo "<tr>
<td>Isi Berita</td>
<td><textarea name=\"isi_berita\" style=\"width: 600px; height: 350px;\">$show[isi_berita]</textarea></td>
</tr>";

echo "<tr>
<td></td>
<td><input type=\"submit\" value=\"Update!\"><input type=\"button\" value=\"Batal\" onclick=\"self.history.back()\"></td>
</tr>
</table>
</form>";
break;

case "delete": // apabila post.php?action=delete maka berita akan dihapus
$get = "delete from berita where id = '$_GET[id]'"; // hapus data dari table berita
$del = mysql_query($get); // jalankan perintah $get

// tampilkan pesan ketika $del telah dijalankan
if($del){
echo "Berita berhasil dihapus !!!<br /><a href=\"index.php\">Kembali</a>";
}
else{
echo "Berita gagal dihapus !!!<br /><a href=\"index.php\">Kembali</a>";
}
break;
}
?>
<br /><br />&copy; CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="https://postinganane.wordpress.com">https://postinganane.wordpress.com</a>]
</body>
</html>

Neh tampilan jika kita membuat berita baru :


Tampilan ketika mengedit berita :


6. Kemudian kita buat file yang terakhir yaitu post_action.php yang berfungsi untuk melakukan proses pengolahan data dari file post.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplikasi Tambah Edit Delete Berita dengan TinyMCE</title>
</head>

<body>
<?php
error_reporting(0);
require "config.php";

$id = $_POST['id'];
$judul = $_POST['judul'];
$isi_berita = $_POST['isi_berita'];

switch($_GET[action]){
case "input": // jika post_action.php?action=input >> form action dari tambah berita
$ins = "insert into berita(judul , isi_berita) values('$judul' , '$isi_berita')"; // input data ke table berita
$exe = mysql_query($ins); // jalankan perintah $ins

// tampilkan pesan ketika $exe telah dijalankan
if($exe){
echo "Penambahan berita berhasil !!!<br /><a href=\"index.php\">Kembali</a>";
}
else{
echo "Penambahan berita gagal !!!<br /><a href=\"index.php\">Kembali</a>";
}
break;

case "update": // jika post_action.php?action=update >> form action dari edit berita
$update = "update berita set judul = '$judul' , isi_berita = '$isi_berita' where id = '$id'"; // update data yang ada di table berita
$exe = mysql_query($update);

// tampilkan pesan ketika $del telah dijalankan
if($exe){
echo "Berita berhasil diupdate !!!<br /><a href=\"index.php\">Kembali</a>";
}
else{
echo "Berita gagal diupdate !!!<br /><a href=\"index.php\">Kembali</a>";
}
break;
}
?>
<br /><br />&copy; CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="https://postinganane.wordpress.com">https://postinganane.wordpress.com</a>]
</body>
</html>

7. Akhirnya selesai juga ya😀 Tutorial ini merupakan contoh penggunaan TinyMCE yang sangat sederhana jadi jangan diejek ya😛 Silahkan dikembangkan dengan selera masing2

Oh iya kalau yg pusing baca tutor ane silahkan aja download file jadinya disini

16 comments on “Tambah, Edit, Delete berita menggunakan TinyMCE

  1. mas bro…mau naya nih…kalo di jadikan tinymcenya jd template…dan pemanggilannya ke index…scriptnya gimana bro,,,
    aku udah coba..
    echo “Edit Berita

    hasilnya error bro…

    tlng saranya bror? thanks

  2. Om, gimana caranya menampilkan blog yg telah ditulis menggunakan tinymce dengan cara memotong kalimat spy gak terlalu panjang tampil di halaman depan. Saya udah coba dan berhasil tapi kalau gak pake tinymce. Kalau dengan tinymce, pas yang kepotong kalimat miring, semua tampilan jadi miring. Saya pikir mungkin tags html untuk menutup perintah miring ikut terpotong (gak ada) sehingga mempengaruhi seluruh tampilan website. Dan yang lebih parah lagi, kalau ada dan penutupnya hilang, tampilan website langsung jadi amburadul.

    Nah, jadi gimana caranya spy tampilan website tetap bagus walau kalimat terpotong dibagian yang kena tags perintah html spt bold, miring, teks warna, dll

    thanks

  3. boleh gag mas di posting lagi yang kayag gini… cuman
    di tambahin satu lagi fieldnya… buat gambar…
    trus ada halaman buat nampilin beritanya beserta gambarx… thank’s

  4. mas bro mw nanya nich, tutorial ni udah bisa buat nyisipin gambar pa belum?masalahya sy belum sempet nyoba, ane pernah nyoba pake text editor lain tp g bisa buat nyisipin gambar.thank’s

  5. Pingback: Membuat Fasilitas Posting pada PHP memanfaatkan TinyMCE |

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s