Membuat Entri Posting Artikel PHP dengan TinyMCE
Kamis, 26 Mei 2016
Edit
Membuat Entri Posting Artikel PHP dengan TinyMCE: Rumah-Pemrograman.blogspot.com: Selamat malam sahabat pemrograman, pada malam ini admin ingin berbagi tutorial, sebenarnya sih bukan berbagi cuma sebagai catatan admin jika admin lupa cara membuat Halaman postingan dengan tinymce ini. hehehe. Sebenarnya banyak sih plug in yang tersedia selain TinyMCE seperti Post Editor dsb, cuma yang lebih mudah diaplikasi di Pemrograman PHP sih ini menurut admin. setiap website pasti memiliki halaman posting artikel, kebayangkan kalo kita tidak menggunakan plug in yang satu ini. betapa ribetnya kita melakukan posting artikel di website. dengan tinyMCE kita bisa lebih mudah melakukan posting artikel seperti layaknya kita mengetik di Word Processing, artikel yang kita posting akan lebih rapi dan mudah dibaca guys.
Pemrograman PHP: sebenarnya sih admin juga masih newbie dalam hal ini guys. sebelumnya admin menekuni dunia pemrograman berbasis Dekstop seperti Visual Foxpro, Visual Basic 6.0, Java Netbeans dsb. dan sekarang admin ingin mendalami Pemrograman berbasis web guys, karena banyak sekali perusahaan yang sudah beralih pada dunia website. banyak faktor guys, karena memang pemrograman web tidak perlu instalasi hanya butuh pendukung saja yaitu web browser.
Membuat Halaman Posting: sebenarnya admin terinspirasi dari blog waktu pembelajaran di kelas. dan akhirnya admin browsing dan mencari tutorial di web dan akhirnya ketemu plugin yang sangat usefull yaitu TinyMCE dan admin coba sangat amazing lah. langkah-langkahnya juga mudah kok guys. bagi kalian yang masih belajar pemrograman website dasar seperti saya, saya kasih langkah-langkahnya. yang pasti diblog ini admin akan membuat langkah-langkahnya terstruktur biar kalian lebih mudah mempraktekkannya guys. yuk simak caranya berikut:
- Buat Database dari Xampp/Mysql (Nama bebas) admin memberikan nama database disini yaitu DbEditor.
- Setelah membuat database buatlah table dengan nama tbberita, struktur tabel bisa kalian liat disini guys.
- setelah itu bukalah web editor: dalam hal ini admin menggunakan notepad ++ guys. jika belum punya kalian bisa download disini
- Buatlah tampilan halaman posting berikut dan simpan dengan nama index.php pada folder htdoc kalian
- Tampilan dari Index.php jika dijalankan pada browser akan seperti berikut:
- Jika sudah maka langkah selanjutnya adalah meletakkan source TinyMce pada halaman php yang sudah kalian buat tadi. kalian bisa mendownload tinyMce disini.
- Letakkan tinymce bersama folder tempat kalian menyimpan file Index.php kalian sehingga tampilan folder menjadi seperti berikut: (Extract terlebih dahulu tinymce yang kalian download) sehingga folder anda terdapat file seperti gambar berikut:
- setelah itu letakkan perintah ini di bawah </head> pada file index.php kalian
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "autolink,lists,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,visualblocks",
// 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,visualblocks",
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>
- Jika kalian ingin mencoba script model tinymce yang lain, kalian bisa mendapatkannya difolder tinymce yang sudah kalian download seperti berikut:
Anda bisa membukanya menggunakan web editor kemudian paste scriptnya tepat dibawah </head>
- Setelah itu lihat pada browser anda (Panggil dari localhost/namafolder/namafile.php) jika berhasil maka akan tampil seperti berikut:
Bagaimana guys. sangat mudah bukan? sekarang kalian tinggal buat Koneksi dan perintah untuk menyimpan postingan kalian kedalam database, berikut screenshot koneksi dan perintah simpan tersebut.
Simpan dengan nama SimpanBerita.php pada folder anda. Selamat mencoba semoga bermanfaat. thanks for visiting here guys.