Cara Menggunakan CKEditor pada script PHP

Apakah anda tahu CKEditor? CKEditor itu adalah editor web WYSIWYG (What You See Is What You Get). Umumnya anda pasti pernah menggunakan CMS Joomla untuk menginputkan artikel. Nah, bagaimana jika aplikasi PHP anda menggunakan CKEditor mungkin untuk aplikasi web portal ataupun entri data yang banyak.

Mari kita contohkan untuk membuat aplikasi portal berita sederhana :

1. Buat Database portalku pada phpmyadmin

2. Buat Tabel berita , dan ini sql script nya

CREATE TABLE IF NOT EXISTS `berita` (
  `id_berita` int(10) NOT NULL AUTO_INCREMENT,
  `title_berita` varchar(50) NOT NULL,
  `entry_berita` longtext NOT NULL,
  PRIMARY KEY (`id_berita`)
)

3. Buatlah sebuah folder portal pada folder www/htdocs anda (local webserver) , lalu buat koneksi databasenya koneksi.php :

<?php
$con=mysql_connect("localhost","root","");
$rs=mysql_select_db("portalku");
?>

4. Download CKEditor dari webnya , cari yang full package biar komplit deh, release pada artikel ini dibuat versi 4.2


5. Copy Paste pada folder portal ( copas foldernya "ckeditor" bukan semua scriptnya )

6. Buatlah script php buat.php lalu sisipkan kode berikut :

<?php include("koneksi.php"); ?>
<script src="ckeditor/ckeditor.js"></script>

<form action="" method="post">
<label>Judul</label>
<input name="judul" type="text" size="80">
<p></p>
<label>Berita</label>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<p></p>
<input type="submit" name="posting" value="POSTING">
</form>        

<script type="text/javascript">

if ( typeof CKEDITOR == 'undefined' )
{
    document.write(
        'CKEditor not found');
}
else
{
    var editor = CKEDITOR.replace( 'editor1' );   

   
    CKFinder.setupCKEditor( editor, '' ) ;

   
}
</script>

<?php
if(isset($_POST['posting']))
{
    $q=mysql_query("Insert into berita (`title_berita`,`entry_berita`) values
    ('".$_POST['judul']."','".$_POST['editor1']."')") or die(mysql_error());
   
    if($q)
    {
        echo "<script>alert('BERHASIL ditambahkan')</script>";
    }
}
?>

Yuk, mari kita perjelas lagi kode di atas :

1.  <?php include("koneksi.php"); ?>
     Kode di atas digunakan untuk memanggil koneksi database, sebelumnya pada tahap 3, kita membuat koneksinya. lalu kita include-kan atau disisipkan ke script buat.php. Jadi apapun yang dilakukan tentang mysql database dapat dieksekusi

2.  <script src="ckeditor/ckeditor.js"></script>
     Setelah mendowload ckeditor (tahap 4) lalu copas folder ckeditor ke folder aplikasi web. lalu dipanggillah ckeditor.js dengan sisipkan kode javascript. Jadi <script src="ckeditor/ckeditor.js"></script> adalah includenya si javascript

3.  <form action="" method="post">
     <label>Judul</label>
     <input name="judul" type="text" size="80"><p></p>
     <label>Berita</label>
     <textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
     <p></p>
     <input type="submit" name="posting" value="POSTING">
     </form>
     Ini adalah tag HTML yang difungsikan untuk membuat 
- Form (layar eksekusi) label sebagai output keterangan, method post maksudnya dieksekusi dengan menyimpan data temporary ( seperti session )
- Input type text sebagai textbox bernama variable judul 
- Textarea kolom yang digunakan untuk si ckeditor, tapi kenapa namanya editor1 (lihat keterangan 4) ? yah terserah aja mau namanya apa. Dicontohkan aja dulu seperti ini hehehe.
- Input type submit sebagai command button

4. <script type="text/javascript">
    if ( typeof CKEDITOR == 'undefined' ){
    document.write(
        'CKEditor not found');
    }else{
     var editor = CKEDITOR.replace( 'editor1' );       
    CKFinder.setupCKEditor( editor, '' ) ;
    }
    </script>
   Javascript di atas dimaksudkan jika lokasi ckeditor tidak ada atau ada. Misalkan folder ckeditor terhapus atau tidak ada dilokasi berdasarkan include ckeditor.js (keterangan 2 ) dan jika ada, maka set editor1 sebagai si CKEditor

5.  <?php
     if(isset($_POST['posting'])) {
    $q=mysql_query("Insert into berita (`title_berita`,`entry_berita`) values
    ('".$_POST['judul']."','".$_POST['editor1']."')") or die(mysql_error());   
        if($q){
            echo "<script>alert('BERHASIL ditambahkan')</script>";
         }
     }
    ?>
    Script php ini digunakan untuk penambahan data pada tabel berita, kenapa tidak ada id_berita? karena id_berita dijadikan auto_increment atau otomatis penomorannya.
   Sebelum dijalankan query sql yang variabelnya $q, maka direvisi dulu nilai dari command button, apa command button yang bernama posting telah diposting atau belum if(isset($_POST['posting']))
    Kemaren ada yang bertanya kenapa kutip_satu kutip_dua titik variabel titik titik_dua titik_satu ('".$_POST['judul']."') ? Semua orang mempunyai cara penulisan kode yang berbeda-beda, tapi untuk saya, ini lebih rapi, ada juga yang bikin kode langsung variabelnya, jadi terserah anda mau penulisannya gimana.
    Setelah menjalankan eksekusi variabel $q sebagai query mysql, jika tidak ada yang salah
if($q) , lanjut ke javascript pesan BERHASIL ditambahkan. Namun jika ada yang error, ditampilkan seperti apa errornya or die(mysql_error())

Download Contoh script
Tongkrongin terus tutorial PHP Mandiri

Tweet