Membuat aplikasi berita menggunakan TinyMCE

Web designer mana yang tak kenal dengan TinyMCE ??? Menurut saya pasti hampir semua web designer menggunakan TinyMCE untuk aplikasi webnya, baik itu aplikasi berita, komentar dll. Nah bagi yang belum tau tentang TinyMCE, mari kita lihat pengertiannya dari situs resminya. Neh sekilas tentang TinyMCE dari situs resminya :

TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems. ( http://tinymce.moxiecode.com/ )

Kira – kira artinya seperti ini :

TinyMCE adalah sebuah platform web editor yang dibuat berdasarkan Javascript HTML WYSIWYG (What You See Is What You Get)  yang dikeluarkan sebagai open source dibawah lisensi LGPL oleh Moxiecode Systems AB. TinyMCE mempunyai kemampuan untuk mengkonversi TextArea HTML atau Elemen HTML lainnya menjadi tampilan teks penyunting. TinyMCE sangat mudah untuk berintergrasi dengan CMS lainnya. Untuk sekedar informasi aja, TinyMCE telah dipakai oleh Facebook, Microsoft, Apple, WordPress, Joomla, Oracle dan untuk CMS Indonesia yang menggunakannya adalah AuraCMS. Saya juga menggunakan TinyMCE untuk web sederhana yang saya buat😛 Oke dah kita dah membahas sekilas tentang TinyMCE, yuk sekarang kita bahas cara menggunakan / menginstallnya.

1.Pertama – tama download dulu TinyMCEnya dari http://cloud.github.com/downloads/tinymce/tinymce/tinymce_3_3_9_3.zip, atau kalau mau lihat koleksi TinyMCEnya silahkan http://tinymce.moxiecode.com/download/download.php

2.Kalau udah didownload langsung diekstrak ke C:\xampp\htdocs\, nanti hasil ekstraknya akan menghasilkan direktori baru di C:\xampp\htdocs\tinymce.

3.Sebenarnya contoh penggunaan TinyMCE ini udah ada di folder hasil ekstrakan tadi tepatnya di folder example, silahkan di buka sendiri kalau mau melihatnya.

4. Nah kalau dipostingan ini saya akan mensharing cara membuat aplikasi berita admin, yuk kita lanjutkan langkahnya. Kemudian database baru bernama “tinymce” atau terserah keinginan anda.

5. Setelah itu buat table baru bernama artikel dengan jumlah field sebanyak 4, atur fieldnya seperti gambar berikut !

6. Ok deh masalah databasenya udah selesai, sekarang lanjut ke pemograman phpnya, buat file config.php seperti ini :

<?php
$host = "localhost";
$user = "root";
$pass = "";
$database = "tinymce";
$koneksi = mysql_connect ($host,$user,$pass);
mysql_select_db($database) or die ("error");
?>

8. Kalau udah jadi, lanjut ke langkah berikutnya membuat file form.php untuk TinyMCE, langsung aja copas scriptnya😛

<?php
include "config.php";

//proses input berita ke database
if(isset($_POST['input'])){
$judul = $_POST['judul'];
$isi = $_POST['isi'];
$penulis = $_POST['penulis'];

//insert ke table
$post = "insert into artikel values('','$judul','$isi','$penulis')";
$postsukses = mysql_query($post) or die ("shit".mysql_error());
if ($postsukses){
echo "<h2><font color = 'green'>Input berita berhasil :)</font></h2>";
}
else{
echo "<h2><font color = 'red'>Input berita gagal T_T</font></h2>";
}
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Input Berita Admin</title>

<!-- TinyMCE -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<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>
<!-- /TinyMCE -->

</head>
<body>

<form method="post" name="formberita">
 <h3>Aplikasi berita dengan TinyMCE</h3>
 <table width="500" border="0">
 <tr>
 <td width="80">Judul :</td>
 <td width="410"><input name="judul" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><textarea id="elm1" name="isi" rows="15" cols="60" ></textarea></td>
 </tr>
 <tr>
 <td>Penulis:</td>
 <td><input name="penulis" type="text" size="40" /></td>
 </tr>
 <tr>
 <td>&nbsp;</td>
 <td><input type="submit" name="input" value="Submit" /></td>
 </tr>
 </table>
</form>
</body>
</html>

9. Jadi tampilan semua filenya kira – kira seperti ini :

10. Setelah itu jalankan filenya melalui url berikut http://localhost/tinymce/form.php, langsung aja tes untuk ngepost ya😀

11. Nanti kalau berhasil posting akan muncul pesan “Input berita berhasil :)” dan datanya akan masuk ke database.

Oke saya rasa udah selesai tutornya, semoga tutor saya kali ini dapat dimengerti ya😛, bye🙂

59 comments on “Membuat aplikasi berita menggunakan TinyMCE

  1. waw… ini tutorial yang paling lengkap dan yang saya cari-cari selama beberapa hari. hehe…
    Terimakasih Banyak mass…. sangat membantu…
    tapi mungkin judulnya tambahin kata-kata “textarea yang ada tombol bold italic”… hehe, jd biar gampang ktemu.

  2. Pingback: Tambah, Edit, Delete berita menggunakan TinyMCE « My Life is My Freedom

    • itu baris yang buat pesan sukses atau gagal dihapus aja kan ntr bisa jalan programnya…
      yang bagian ini dihilangkan coba :
      if ($postsukses){
      echo “Input berita berhasil “;
      }
      else{
      echo “Input berita gagal T_T”;
      }

  3. Parse error: syntax error, unexpected T_STRING, expecting ‘,’ or ‘;’ in C:\xampp\htdocs\tinymce\form.php on line 14

    apa yang salah??

  4. waaaaaaaaahhh..ini diaaa ketemuuuuuuuuuuu..mantap sekali agann..

    klo biar muncul di update artikel pegimana agan?? mohon belimbingnyaa…

  5. halo, di localhost ajaxpluginsmanager berjalan seperti diatas (tanpa masalah), sedangkan masalah terjadi ketika saya meng-onlinekan web tersebut pada hosting, muncul “Fatal error: Class ‘SessionAction’ not found in /home/a5********/public_html/admin/tinymce/jscripts/tiny_mce/plugins/ajaxfilemanager/ajaxfilemanager.php on line 12” ada yang bisa membantu?

  6. gan, waktu di post submit, yang muncul ini

    shitYou have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘alaikum, wr, wb

    mohon dibantu? makasih gan.,.,

  7. semuanya telah berhasil..
    saat saya tampilkan kenapa tag html muncul juga ya..?? please…
    saya menampilkan tidak di text area..
    karena saya menampilkan langsung dari database dengan echo..
    tlg balas ke email donk…

  8. Gan..ane ud sukses input ke DB-nya, tapi napa syntax phpnya ikutan yaa ke tabel DB-nya (ex : You can easily c…)..
    btw..tks banget Gan..amat sangat membantu tutornya😀..

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