blogrora: Pemrograman 3D

Assalamualaikum...

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.

<?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 />
&copy; 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 />&copy; 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 />&copy; 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

DOWNLOAD

Source: postinganane.wordpress.com

Text Editor merupakan salah satu fitur penting yang wajib Anda buat ketika berhubungan dengan pembuatan aplikasi web. Jika Anda sudah terbiasa dengan CMS Joomla atau Blog, ketika kita hendak menulis artikel akan disertai fitur text editor untuk mempermudah user melakukan styling terhadap teks yang akan ditulis. Bayangkan saja, jika Anda hanya dihadapkan dengan form textarea untuk menuliskan suatu artikel yang tentu saja akan erat kaitannya dengan penambahan link, gambar, video, flash atau lainnya.

Sebenarnya, ada bermacam-macam texteditor WYSIWYG(What You See Is What You Get) sebagai plugin dalam aplikasi web. Untuk postingan kali ini, saya hendak mencoba berbagi pengalaman dalam integrasi texteditor TinyMCE ke dalam framework favorit saya, yaitu Codeigniter. Andai saja Anda pernah melakukan integrasi TinyMCE ke dalam aplikasi web tanpa framework, pengaturan-pengaturannya tidak terlalu berbeda ketika hendak kita integrasikan dengan Codeigniter.

Pertama, tentu saja harus download terlebih dahulu plugin TinyMCE-nya di sini. Pilih versi stable saja. Pastikan Anda sudah memiliki project Codeigniter di dalam server lokal. Buat folder ‘js’ di dalam root aplikasi. Extract tinyMCE hasil download terlebih dahulu. Copy-kan folder tiny_mce dari folder tinymce/jscripts/ ke dalam folder js yang telah dibuat sebelumnya.

Buat sebuah file view di dalam folder views, misalkan editor_view.php. Ketikkan script berikut ini.



    
    
    Tiny MCE

Simpan, dan buat file controller untuk memanggil view di atas. Misalkan saya membuat controller dengan nama post.php. Pastikan Anda membuat aturan-aturan penulisan controller sesuai aturan yang ada di codeigniter. Buat fungsi index dan isikan kode di bawah ini:



    class Post extends Controller {
 
    function Post()
    {
        parent::Controller();
    }
 
    function index()
    {
        $this->load->view('editor_view');
    }
}

Semoga bermanfaat ... ^_^

Sumber : http://www.catatankaki.com

http://muhammadfarid.net

blogrora

Selasa, 30 Oktober 2012

Form Entry, Edit, Hapus Dan Laporan PHP Menggunakan Grid Extjs Json

Kamis, 27 September 2012

Membuat Aplikasi Sederhana dengan TinyMCE di PHP

Download TinyMCE Plugin

Integrasi Text Editor TinyMCE di Codeigniter

thank you so much for visiting.

Labels

Blog Archive

Mengenai Saya