Jumat, 22 Maret 2013

Sebelum tidur saya akan memberikan sedikit cara agar Redactor dapat menyimpan gamber yang di upload agar dapat dijadikan galeri, sehingga Anda tidak perlu melakukan upload ulang. Penyimpanan informasi gambar dilakukan menggunakan database, berikut contoh structur tabelnya.

create table tbl_imagemanager(
    id int(5) auto_increment,
    foto varchar(255) not null,
    primary key(id)
)

Pada contoh ini, saya memakai controller welcome.php bawaan codeigniter. Untuk scriptnya sebagai berikut.

public function __construct()
{
    parent::__construct();
    $this->load->helper('url');
    $this->load->database();
}
    
public function index()
{
    $this->load->view('welcome_message');
}
    
public function upload()
{
       if(!empty($_FILES['file']['name']))
    {
        $config['upload_path'] = './img';
        $config['allowed_types'] = 'gif|jpg|png';
        $this->load->library('upload', $config);
        if($this->upload->do_upload('file'))
        {
            $image_data = $this->upload->data(); 
            
            // database
            $this->db->insert('tbl_imagemanager',array(
                'foto'=>$image_data['file_name']
            )); 
            
            $json = array(
                'filelink' => base_url("img/{$image_data['file_name']}")
            );
            echo stripslashes(json_encode($json));
        }
    }
}
    
public function galeri()
{
    $return=array();
    $all_data = $this->db->get('tbl_imagemanager');
    foreach($all_data->result_array() as $row)
    {
        $return[]=array(
            'thumb'=>base_url('img/'.$row['foto']),
            'image'=>base_url('img/'.$row['foto']),
            'title'=>$row['foto'],
        );
    }
    echo json_encode($return);
}

dan pada view

<script type="text/javascript" src="<?php echo base_url('assets/jquery-1.7.min.js'); ?>"></script>
<link rel="stylesheet" href="<?php echo base_url('assets/redactor.css'); ?>" />
<script src="<?php echo base_url('assets/redactor.min.js'); ?>"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#redactor_content').redactor({
        imageUpload: '<?php echo site_url('welcome/upload'); ?>',
        imageGetJson: '<?php echo site_url('welcome/galeri'); ?>',
    });
});
</script>
</head>
<body>

<div id="container">
 <h1>Redactor + Image Manager<span style="float:right">Dida Nurwanda</span></h1>

 <div id="body">
  <textarea id="redactor_content" name="content">
  </textarea> 
 </div>

 <p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
</div>

</body>
</html>


Disitu terdapat function upload, itu berfungsi untuk mengupload gamber, menyimpan informasi gamber ke database dan mengembalikan gambar beserta pathnya dalam bentuk json. Pada function galeri, itu berfungsi untuk mengambil informasi gamber dari database dan dikembalikan dalam bentuk json.

berikut penampakannya.




Download
password : didanurwanda.blogspot.com

15 komentar:

  1. Makasi gan sharingnya, ternyata ada juga pengguna redactor di forum fb CodeIgniter Indonesia..
    ijin buat pelajarin lebih lanjut :)
    keep writing gan :D

    BalasHapus
  2. makasih sob atas tutorial + source code nya.

    BalasHapus
    Balasan
    1. sama2 bro, silahkan di kembangkan

      Hapus
  3. thanks yaa kaka .
    langsung dicoba nih . sukses terus ^^/

    BalasHapus
  4. bisa buat setingan size ndak gan ?
    :d



    BalasHapus
  5. mantap mas, tapi kok belum di insert udah muncul aja yaa gambarnya ??

    BalasHapus
    Balasan
    1. maksudnya?
      yang muncul itu mungkin contoh yang sudah di simpan sebelumnya oleh saya

      Hapus
  6. di insert kok ngga muncul yach

    BalasHapus
  7. di insert kok ngga muncul yach

    BalasHapus
  8. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.