Sebelumnya IT Sasak sudah memposting Artikel yang berjudul Integrasi Text Editor TinyMCE di Codeigniter .
Kali ini, IT Sasak akan menshare tentang cara membuat Aplikasi Sederhana dengan TinyMCE di PHP...
Langsung saja,, buat yang belum punya TinyMCE silahkan download dulu disini
Berikut yang perlu sobat persiapkan sebelum membuat aplikasi:
- Ekstrak TinyMCE yang sobat download ke base directory web server sobat disini saya 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 file-file dibawah ini di direktori tersebut.
Buat file config.php >> file konfigurasi database - index.php >> berfungsi untuk menampilkan postingan yg sudah ada
- post.php >> berfungsi untuk mengedit dan menambah berita
- post_action.php >> berfungsi untuk melakukan proses pengolahan data dari file post.php
Berikut langkah-langkahnya:
1. Buat databasenya terlebih dahulu, namanya terserah sobat. disini saya kasi nama tinymce
2. Selanjutnya buat table 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 configurasinya, silahkan sobat atur sesuai settingan masing-masing.
4.Setelah itu buat file index.php, berikut scriptnya:
Selesai juga tutorialnya...hehehe
Semoga membantu...^_^
Buat sobat yang kebingungan dengan tutorial diatas, silahkan download file jadinya dibawah ini
<?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, berikut scriptnya:
<!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 />
© CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="http://postinganane.wordpress.com">http://postinganane.wordpress.com</a>]
</body>
</html>
5. Buat file post.php yang berfungsi untuk menambah 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 />© CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="http://postinganane.wordpress.com">http://postinganane.wordpress.com</a>]
</body>
</html>
6. Kemudian yang terakhir buat file post_action.php-nya: <!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 />© CopyLeft 2011 by David [davidz.myfreed0m@gmail.com] [<a href="http://postinganane.wordpress.com">http://postinganane.wordpress.com</a>]
</body>
</html>
Akhirnya,,,Selesai juga tutorialnya...hehehe
Semoga membantu...^_^
Buat sobat yang kebingungan dengan tutorial diatas, silahkan download file jadinya dibawah ini
Source: postinganane.wordpress.com
