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 darihttp://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 :
1
2
3
4
5
6
7
8
| <?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
| <?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> </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> </td> <td><input type= "submit" name= "input" value= "Submit" /></td> </tr> </table> </form> </body> </html> |
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
0 comments: