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> </td>
<td><textarea id="elm1" name="isi" rows="15" cols="60" ></textarea></td>
</tr>
<tr>
<td> </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)."'><< 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 >></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
Tidak ada komentar:
Posting Komentar