TINYMCE DENGAN DATABASE

yuk baca…

Pagi-pagi udah ujan aja ni
Daripada gue bengong mendingan ngerjain tugas pemrograman web kemaren yaitu bikin input data dengan tinymce. TinyMce adalah salah satu text editor yang mudah penggunaannya..
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.Sebenernya adayang lebih lengakap dari tinymce yaitu tinymcpuk. Tetapi tinymcpuk lebih sulit konfigurasinya. Mungkin lain kali akan kita bahas. ^_^ 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
atau silahkan download ditempat lain..

2.Kemdudian extract 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 “tugas web” atau terserah keinginan anda.

itu langkah2 basa-basinya, ok dah sekarang kita lanjut ke TKP—>>>

untuk menghubungkan tinymce ke database maka kita perlu membuat database terlebi dahulu…

Pengertiannya kita buat database dengan nama “tugasweb”. Setelah kita sukses buat database kemudian kita membuat tabelnya. Misal kita buat nama tabelnya “inputdata” dengan jumlah fieldnya “3” yang isinya adalah:

Setelah kita berhasil membuat tabel , maka selanjutnya kita akan memasukkan nama dalam field/tabel input data sbb:

Ok dah.
Setelah kita selesai dengan urus mengurus database kita langsung menuju ke TKP php sekarang. Dalam pembuatan aplikasi web dengan database maka hal yang wajib ada adalah file config.php. Yaitu file yang berfungsi untuk menghungkan aplikasi web/file-file php ke database . Ok langsung aja kita buat file config.php.

1. Simpan File dengan nama config.php

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

untuk pengertian dari source code diatas, yang perlu kita ganti hanyalah $database, diganti sesuai nama database yang kalian bikin. Disini nama databasenya adalah “tugasweb”.

Setelah kita selesai membuat file config.php selanjutnya kita buat file form.php

Simpan dengan nama form.php

<?php
include “config.php”;

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

//insert ke table
$post = “insert into inputdata values(”,’$judul’,’$isi’)”;
$postsukses = mysql_query($post) or die (“shit”.mysql_error());
if ($postsukses){
echo “<h2><font color = ‘green’>esa.inc🙂 </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”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>esa dwi suryanta</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>esa dwi suryanta</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>&nbsp;</td>
<td><input type=”submit” name=”input” value=”Submit” /></td>
</tr>
</table>
</form>
</body>
</html>

Setelah selesai dengan urusan php dkk kemudian kita taruh folder tinymce ke htdoc dan simpan file form.php & config.php ke folder tinymce sbb:

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

Kalu input database udah sukses maka akan nambil tulisan kayak gini…

dan di datase tampilannye kayak gini:

udah selesai,, mudah bukan??
hehe

tapi tugasnya belum selesai, yaitu membuat file untuk menampilkan input yang telah dimasukka dary tinymce tadi. Ok langsung aja kita buat file dengan nama lihat.php

Simpan dengan nama lihat.php

<?php
include “config.php”;

// jumlah data yang akan ditampilkan per halaman

$dataPerPage = 1;

// apabila $_GET[‘page’] sudah didefinisikan, gunakan nomor halaman tersebut,
// sedangkan apabila belum, nomor halamannya 1.

if(isset($_GET[‘page’]))
{
$noPage = $_GET[‘page’];
}
else $noPage = 1;

// perhitungan offset

$offset = ($noPage – 1) * $dataPerPage;

// query SQL untuk menampilkan data perhalaman sesuai offset

$query = “SELECT * FROM inputdata LIMIT $offset, $dataPerPage”;

$result = mysql_query($query) or die(‘Error’);

// menampilkan data

echo “<table border=’1′>”;

while($data = mysql_fetch_array($result))
{
echo “<tr>”.$data[‘judul’].”</tr><tr>”.$data[‘isi’].”</tr>”;
}

echo “</table>”;

// mencari jumlah semua data dalam tabel inputdata

$query = “SELECT COUNT(*) AS jumData FROM inputdata”;
$hasil = mysql_query($query);
$data = mysql_fetch_array($hasil);

$jumData = $data[‘jumData’];

// menentukan jumlah halaman yang muncul berdasarkan jumlah semua data

$jumPage = ceil($jumData/$dataPerPage);

// menampilkan link previous

if ($noPage > 1) echo “<a href='”.$_SERVER[‘PHP_SELF’].”?page=”.($noPage-1).”‘>&lt;&lt; Prev</a>”;

// memunculkan nomor halaman dan linknya

for($page = 1; $page <= $jumPage; $page++)
{
if ((($page >= $noPage – 3) && ($page <= $noPage + 3)) || ($page == 1) || ($page == $jumPage))
{
if (($showPage == 1) && ($page != 2)) echo “…”;
if (($showPage != ($jumPage – 1)) && ($page == $jumPage)) echo “…”;
if ($page == $noPage) echo ” <b>”.$page.”</b> “;
else echo ” <a href='”.$_SERVER[‘PHP_SELF’].”?page=”.$page.”‘>”.$page.”</a> “;
$showPage = $page;
}
}

// menampilkan link next

if ($noPage < $jumPage) echo “<a href='”.$_SERVER[‘PHP_SELF’].”?page=”.($noPage+1).”‘>Next &gt;&gt;</a>”;

?><html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

hasilnnya:

nah kali ini udah kelar, tapi contoh diatas simple aja, untuk design tampilanya silahkan buat sendiri..
hehe
buat latihan juga ^_^

About irfanstmik

KEJUJURAN ADALAH MODAL UTAMA UNTUK MEMPEROLEH KEPERCAYAAN

Posted on January 28, 2013, in Uncategorized. Bookmark the permalink. Leave a comment.

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

%d bloggers like this: