Jumat, 30 Desember 2011

Membuat Editor Dengan TinyMCE

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 :P 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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 :D




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">
<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 ^_^

Untuk source code lengkapnya silahkan download disini

Selasa, 06 Desember 2011

Cara Membersihkan Cache dan Cookies Browser Komputer

Jika situs tampak aneh atau jika sesuatu tidak berfungsi sebagaimana mestinya, kemungkinan besar masalah nya ada di cache dan cookies browser kita, dengan membersihkan cache browser dan menghapus cookie browser Komputer kita, mudah-mudahan masalah bisa teratasi.
Sebelum melangkah lebih lanjut , mungkin ada diantara kita ada yang bertanya :
Apa yang dimaksud ‘Cache’ dan ‘cookies’ ?
Cache browser adalah sebagian memori yang disediakan untuk mengingat halaman yang pernah dikunjungi. Dengan Menggunakan cache, browser dapat membuka halaman yang pernah kita lihat sebelumnya menjadi lebih cepat. Jika ada yang tidak beres dalam cache, atau jika halaman telah berubah sejak terakhir kita melihatnya, hal itu dapat mempengaruhi bagaimana halaman ditampilkan.
Sedangkan Cookie adalah file kecil yang disimpan oleh browser yang gunanya adalah untuk mengingat pengaturan pribadi kita. Ketika kita pergi ke situs yang sudah pernah dikunjungi sebelumnya, maka cookie situs akan mengingatkan kita, seperti misalnya info tentang topik yang pernah kita lihat yang akan ditampilkan kembali . Cookie akan mengingat, misalnya, pengaturan SafeSearch kita, dan apa pandangan kita seperti misalnya di Google Maps. Meskipun Kadang-kadang tidak selalu begitu dan juga mungkin tampilan halaman akan tampak aneh.
Hal umum dalam kaitannya membersihkan cookies dan cache :
1. Pertama coba bersihkan cache browser untuk versi yang kita gunakan:
2. Jika setelah membersihkan cache tidak mengatasi masalah, selanjutnya kita
bisa mencoba membersihkan cookie browser.
3. Meskipun menghapus cookie browser dapat mengatasi masalah, Namun hal itu juga akan menghapus pengaturan yang tersimpan untuk situs yang sebelumnya kita kunjungi.
4. menghapus cache hystory Akan memakan waktu beberapa menit .

Chrome

Cara membersihkan Cache di browser Chrome :
1. Klik menu Tools.
2. Pilih “Clear browsing data”..
3. Pastikan “Empty the cache’. dipilih.
4. Klik Clear Browsing Data.

Cara membersihkan Cookies di browser Chrome :
1. Klik menu Tools menu alat.
2. Pilih “Clear browsing data”..
3. Pastikan “Empty the cache’. “dipilih.
4. Klik Clear Browsing Data.

Microsoft Internet Explorer

Cara mengetahui versi browser Internet Explorer, klik tab “Help,” dan kemudian klik “About Internet Explorer.” Jika kita tidak melihat menu “Help”, tekan “Alt” untuk menampilkan menu.
Cara membersihkan Cache di browser Microsoft Internet Explorer :

Internet Explorer 7.x

1. Di Internet Explorer, klik menu Tools. Atau Tekan Alt untuk menampilkan menu.
2. Klik Internet Options
3. Klik tab General.
4. Klik tombol Delete.
5. Pada bagian ‘Temporary Internet Files’, klik Delete Files.
6. Klik OK untuk konfirmasi.
7. Klik OK sekali lagi untuk menutup ‘Internet Options. ”
Internet Explorer 6.x
1. Di Internet Explorer, klik menu Tools.
2. Klik Internet Options
3. Klik tab General.
4. Pada bagian ‘Temporary Internet Files’, klik Delete Files
5. Klik OK untuk konfirmasi.
6. Klik OK sekali lagi untuk menutup ‘Internet Options. ”

Cara membersihkan Cookie di browser Microsoft Internet Explorer :
Internet Explorer 7.x
1. Di Internet Explorer, klik menu Tools. Atau Tekan Alt untuk menampilkan menu.
2. Klik Internet Options
3. Klik tab General.
4. Klik tombol Delete.
5. Dalam ‘Cookies’, klik Hapus Cookie.
6. Klik OK untuk konfirmasi.
7. Klik OK sekali lagi untuk menutup ‘Internet Options. ”
Internet Explorer 6.x
1. Di Internet Explorer, klik menu Tools.
2. Klik Internet Options
3. Klik tab General.
4. Pada bagian ‘Temporary Internet Files’, klik Hapus Cookie.
5. Klik OK untuk konfirmasi.
6. Klik OK sekali lagi untuk menutup ‘Internet Options. ”

Mozilla Firefox

Tip Untuk menemukan versi Firefox: Pada Windows, klik tab “Help,” dan kemudian klik “About Mozilla Firefox.” Untuk Max OS X, klik “Firefox,” dan kemudian klik “About Mozilla Firefox.”
Caramembersihkan Cache di browser Mozilla Firefox :

Membersihkan Cache Firefox 3.5x dan Firefox 3.6x untuk Windows

1. Klikmenu Tools.
2. klik Options … Preferences ….
3. Pilih Advanced panel.
4. Klik pada tab Networks
5. Klik Tombol “Clear Now”
Firefox 3.x untuk Windows
1. Klikmenu Tools.
2. Klik Clear Private Data.
3. Pastikan ‘Cache’ dipilih.
4. Klik Clear Private Data Now

Firefox 3.x untuk Mac OS X
1. Klikmenu Tools.
2. Klik Clear Private Data.
3. Pastikan ‘Cache’ dipilih.
4. Klik Clear Private Data Now


Firefox 2.x untuk Windows
1. Klik menu Tools.
2. Klik Opsi
3. Pilih ‘Advanced’ tab.
4. Pada tab Advanced, pilih ‘Network’ tab.
5. Pada bagian Cache, klik Clear Now.
6. Klik OK.

Firefox 2.x untuk Mac OS X
1. Klik menu Firefox.
2. Klik Preferences.
3. Pilih ‘Advanced’ tab.
4. Pada ‘Advanced’ tab, pilih ‘Network’ tab.
5. Dalam ‘Cache’, klik Clear Now.
6. Klik OK.

Cara membersihkan Cookies di browser Mozilla Firefox :

Membersihkan Cookies Firefox 3.5x dan Firefox 3.6x untuk Windows

Untuk menghapus single Cookies :
1. Klikmenu Tools.
2.klik Options
3. Pilih “Privacy”.
4. Pada bagian ”Firefox will: ” pilih pada “Use custom settings for history”.
5. klick “Show Cookies”…. Cookies window akan muncul
6. Di kotak “Search”, ketik nama cookie situs yang ingin kita hapus. cookie yang
cocok dengan pencarian kita akan ditampilkan.
7. Pilih cookie dalam daftar yang muncul untuk dihapus lalu klik Remove Cookie
8. Klik “Close” Untuk menutup jendela cookies .

Firefox 3.x untuk Windows
1. Klik menu Tools.
2. Klik Clear Private Data.
3. Pastikan ‘Cache’ dipilih.
4. Klik Clear Private Data Now.

Firefox 3.x untuk Mac OS X
1. Klik menu Tools.
2. Klik Clear Private Data.
3. Pastikan ‘Cache’ dipilih.
4. Klik Clear Private Data Now

Firefox 2.x untuk Windows
1. Klik menu Tools.
2. Klik Options.
3. Pilih ‘Privacy’ tab.
4. Dalam ‘Cookies’, klik Show Cookies.
5. Klik Remove All Cookies.
6. Klik OK untuk konfirmasi.
7. Klik OK sekali lagi untuk menutup ‘Options. ”

Firefox 2.x untuk Mac OS X
1. Klik menu Firefox.
2. Klik Preferences.
3. Pilih ‘Privacy’ tab.
4. Dalam ‘Cookies’, klik Show Cookies.
5. Klik Remove All Cookies.
6. Klik OK untuk konfirmasi.
7. Klik OK sekali lagi untuk menutup ‘Preferences. ”

Langkah Advanced : Dalam beberapa kasus, langkah tersebut selain untuk menghapus cookie kita, juga bermanfaat untuk menghapus file yang sebenarnya di Firefox yang menyimpan cookie kita.
Apple Safari
Cara mengetahui versi browser Safari: Pada Mac OS X, klik “Safari,” dan kemudian klik “About Safari.” Pada Windows, klik tab “Help,” dan kemudian klik “About Safari.”

Cara membersihkan Cache di browser Apple Safari :
Safari 3.x untuk Mac OS X
1. Klik menu Safari.
2. Klik Empty Cache.
3. Klik Kosong untuk konfirmasi.
Safari 3.x untuk Windows
1. Klik menu Edit.
2. Klik Empty Cache.
3. Klik Kosong untuk konfirmasi.

Cara membersihkan Cookies di browser Safari:
Safari 3.x untuk Windows
1. Klik menu Edit.
2. Pilih ‘Security’ tab.
3. Klik Show Cookies.
4. Klik Hapus Semua.
5. Klik Selesai untuk menutup daftar Cookies.
6. Tutup ‘Preferences. ”

Safari 3.x untuk Mac OS X
1. Klik menu Safari.
2. Klik Preferences.
3. Pilih ‘Security’ tab.
4. Klik Show Cookies.
5. Klik Hapus Semua.
6. Klik Selesai untuk menutup daftar Cookies.
7. Tutup ‘Preferences. ”

Opera
Cara mengetahui versi browser Opera: Pada Windows, klik tab “Help,” dan kemudian klik “About Opera.” Di Mac OS X, klik “Opera,” dan kemudian klik “About Opera.”

Cara membersihkan Cache di browser Opera :
Opera 9.x untuk Windows
1. Pada Opera, klik menu “Tools”.
2. Klik “Preferences.”
3. Klik tab “Advanced”.
4. Di kolom sebelah kiri, klik “History.”
5. Pada bagian Disk cache, klik “Empty Now.”
6. Klik “OK” untuk menutup “Preferences.”

Opera 9.x untuk Mac OS X
1. Pada Opera, klik “Opera” menu.
2. Klik “Preferences.”

3. Klik tab “Advanced”.
4. Di kolom sebelah kiri, klik “History.”
5. Pada bagian Disk cache, klik “Empty Now.”
6. Klik “OK” untuk menutup “Preferences.”

Cara membersihkan Cookies di browser Opera :

Opera 9.x untuk Windows
1. Pada Opera, klik menu “Tools”.
2. Klik “Clear Private Data”
3. Klik “Detailed Options.”
4. Pilih “Delete all Cookies”
5. Kosongkan kotak centang untuk tiap pilihan Private Data lainnya yang tidak ingin dihapus.
6. Klik “Delete”

Opera 9.x untuk Mac OS X

1. Pada Opera, klik “Opera” menu.
2. Klik “Clear Private Data”
3. Klik “Detailed Options.”
4. Pilih “Delete all Cookies”
5. Kosongkan kotak centang untuk tiap pilihan Private Data lainnya yang tidak ingin dihapus.
6. Klik “Delete”
Catatan
:
Jika browser atau versi yang kita gunakan tidak tercantum di sini, silakan klik pada tab “HELP” atau Bantuan browser untuk mendapatkan petunjuknya.

Sumber Artikel : http://support.google.com ; http://support.mozilla.com/