Alfyan Sore: CodeIgniter

Tampilkan postingan dengan label CodeIgniter. Tampilkan semua postingan

Tutorial CodeIgniter 3 : Langkah Mudah Mengintegrasikan TinyMCE Dengan CodeIgniter

Bagi kalangan Developer Web istilah TinyMCE sudah tidak asing lagi. TinyMCE merupakan open source teks editor untuk web.

Fungsi TinyMCE ini yaitu mengubah form text area menjadi menjadi text editor dengan berbagai fitur. Fiturnya antara lain menebalkan huruf, membuat huruf miring (italic) , menggaris bawahi teks dan format format teks lainnya.

Kali ini cumacoder.com akan memberikan tutorial sederhana untuk mengintegrasikan CodeIgniter dengan TinyMCE.

Langkah Pertama : Siapkan CodeIgniter Dan TinyMCE

Ya yang pastinya kita harus lebih dahulu mendownload CodeIgniter di http://www.codeigniter.com dan TinyMCE di https://tinymce.com . Setelah mendownloadnya silahkan ekstrak file yang telah di untudh tadi. Biasanya file yang didownload berupa Copressed File atau ZIP.

Jika selesai mati ke langkah selanjutnya.

Langkah Kedua : Menempatkan Folder TinyMCE ke Dalam Folder CodeIgniter

Sebelum menempatkan Folder TinyMCE ke dalam Folder Codeigniter. Kita buat terlebih dahulu folder assets di dalam folder CodeIgniter . Fungsi folder assets ini adalah untuk meletakan file file open source yang akan di integrasikan dengan codeIgniter seperti Bootstrap, Responsive File Manager , atau TinyMCE.

Jika sudah dibuat folder assets nya. Sekarang letakan folder TinyMCE ke dalam folder asstets tadi. Penampakannya seperti ini.

Sampai langkah ini kita sudah menyatukan TinyMCE dan CodeIgniter. Mari Kita ke langkah ketiga Untuk coding TinyMCE agar bisa digunakan.

Langkah Ketiga : Coding Untuk Viewnya.

Jika anda membaca artikel ini, saya yakin anda sudah mengerti dengan controller dan view pada CodeIgniter. Dan mengubah pengaturan base_url pada file /application/config/config.php. Atau baca artikel berikut untuk menghilangkan index.php pada codeigniter :

Menghilangkan Index.php Pada CodeIgniter (Mempercantik Url Pada Codeigniter)

Untuk codingan file viewnya bisa lihat di bawah ini :

Pada baris ketiga merupakan coding untuk memanggil TinyMCE. Pada baris keempat sampai kesembilan, kita gunakan fungsi tinymce.init untuk menginisialisasi/mengenerate form textarea menjadi teks editor TinyMCE berdasarkan id form textarea.

Pada codeingan diatas saya memberikan id mytextarea pada form textarea. Hasilnya seperti berikut.

Baca selengkapnya »

10 Ebook Gratis Untuk Belajar WEB, PHP, Javascript , HTML5, CSS3, Mobile Web, Wordpress

Cumacoder kali ini akan share ebook gratis. Ebook ini merupakan ebook gratis yang bisa di download di web https://www.sitepoint.com . 10 Ebook gratis ini masing masing bukunya ada yang membahas tentang WEB, PHP, Javascript , HTML5, CSS3, Mobile Web, Wordpress. Oke untuk penjelasan masing masing isi bukunya kami jelaskan dibawah ya. Dan kami tidak lupa untuk menyertakan file downloadnya.

1. Build Mobile Websites and Apps for Smart Devices

Buku ini merupakan panduan praktis bagi anda yang tertarik dalam mengambil bagian dalam salah satu perkembangan yang paling menarik dalam komputasi sejak internet itu sendiri: web mobile. Dengan yang diharapkan penggunaan web mobile untuk menyalip browser desktop di tahun depan, Anda akan sempurna ditempatkan untuk mengambil keuntungan! Membangun Mobile adalah pendekatan yang menyenangkan dan dapat diakses oleh pengembangan mobile - dan intro sempurna untuk pemula.

DOWNLOAD

2. PHP Master: Write Cutting-edge Code

PHP Master: Write Cutting-edge Code dibuat khusus untuk pengembang PHP yang serius tentang memperbaiki aplikasi server-side mereka. Buku ini akan membantu Anda untuk menggunakan pendekatan pemrograman berorientasi objek yang paling efektif, bungkus proyek di lapisan keamanan, dan memastikan kode Anda melakukan tugasnya dengan sempurna.

DOWNLOAD

3. CSS Master

CSS telah berkembang dari bahasa untuk memformat dokumen ke dalam bahasa yang kuat untuk merancang aplikasi web. Kesederhanaan adalah menipu, namun. Ini memungkiri kompleksitas model kotak, konteks susun, spesifisitas, dan cascade. Sangat sulit untuk mengembangkan antarmuka yang bekerja di berbagai ukuran layar dan dengan bermacam-macam mekanisme masukan. CSS penguasaan terletak pada pemahaman konsep-konsep ini dan bagaimana menanggulanginya, serta memahami dan menggunakan alat-alat baru seperti Linter, pengoptimalan, dan preprosesor.

DOWNLOAD

4. The Principles of Beautiful Web Design, 3rd Edition

Boros diilustrasikan dengan contoh-contoh rinci, Prinsip-prinsip Desain Web Indah adalah panduan mudah berikut yang akan membawa Anda melalui proses menciptakan desain besar dari awal sampai akhir. Tidak ada sebelum pengalaman desain web diperlukan.

DOWNLOAD

5. Full Stack JavaScript Development with MEAN

Dengan alat-alat modern, adalah mungkin untuk membuat aplikasi produksi kelas hanya menggunakan JavaScript, HTML, dan CSS. Kombinasi MongoDB, Express, AngularJS, dan Node.js, semua teknologi JavaScript, telah menjadi sangat populer sehingga itu sudah dijuluki tumpukan MEAN. Buku ini akan mengeksplorasi tumpukan MEAN secara rinci.

DOWNLOAD

6. The WordPress Anthology

WordPress Anthology menempatkan Anda di kursi pengemudi ini kuat & fleksibel open source CMS, menawarkan array yang luas dari solusi untuk proyek-proyek Anda. Penuh sesak dengan terbukti tips & teknik untuk pengembang web, Anda akan menemukan cara efektif menggunakan WordPress untuk lebih memenuhi kebutuhan Anda. Singkatnya, itu akan membuat paling serbaguna di dunia kerja CMS untuk Anda!

DOWNLOAD

br />

7. HTML5 & CSS3 for the Real World: 2nd Edition

HTML5 & CSS3 untuk Real World adalah pengenalan yang sempurna untuk generasi terbaru dari teknologi pengembangan web. panduan-to-follow mudah ini mencakup segala sesuatu yang Anda butuhkan untuk memulai. Anda akan menguasai markup semantik tersedia di HTML5, dan menemukan cara untuk menggunakan CSS3 untuk membuat website yang menakjubkan yang tampak tanpa menggunakan workarounds kompleks.

DOWNLOAD

8. JavaScript: Novice to Ninja

JavaScript telah menjadi keterampilan yang harus dimiliki untuk semua pengembang web. JavaScript: Novice untuk Ninja adalah menyenangkan, praktis, dan panduan komprehensif untuk penggunaan modern bahasa menipu kuat ini.

Dalam pengantar langkah-demi-langkah untuk coding di JavaScript Anda akan belajar bagaimana memecahkan masalah di dunia nyata, event lintasan, desain eye-catching animasi, membangun bentuk cerdas, dan mengembangkan aplikasi yang lebih kaya. Sepanjang jalan, Anda akan belajar untuk mengembangkan sesuai dengan praktik terbaik, termasuk Object Oriented Programming dan Test Driven Development.

DOWNLOAD

9. Jump Start HTML5

Semua yang anda perlu tahu tentang HTML5 di satu tempat! Jika Anda apapun pengembang web maka Anda perlu tahu HTML. Bahasa ini telah mengalami beberapa perubahan dramatis dalam beberapa tahun terakhir: HTML5 telah datang ke tempat kejadian, menawarkan banyak fitur baru yang menarik, seperti audio asli dan video, grafik vektor, aplikasi offline, dan banyak lagi. Buku ini adalah primer yang sempurna untuk mendapatkan untuk mengatasi dengan HTML5, dan mulai untuk mengambil keuntungan dari daya dalam proyek Anda.

DOWNLOAD

10. Outsourcing Web Projects

Apakah Anda berharap bahwa Anda bisa mengambil lebih besar, pekerjaan yang lebih menguntungkan, tetapi tidak merasa bahwa Anda memiliki waktu, sumber daya, atau kemampuan teknis untuk melakukannya? Buku ini akan memberikan Anda dengan mencoba dan menguji teknik yang akan memastikan bahwa Anda dapat memberikan kompleks, proyek-proyek web berkualitas tinggi dengan menggunakan sumber daya pembangunan outsourcing, baik di waktu dan anggaran! Dalam buku ini, Dave Hecker, seorang spesialis Outsourcing yang berkonsultasi ke Fortune 50 perusahaan, mengungkapkan rahasia di balik mencapai proyek pengembangan web outsourcing sukses. Dave membawa Anda melalui proses menulis spesifikasi proyek besar untuk mengiklankan pekerjaan Anda secara efektif, memilih mitra outsourcing terbaik, dan mengelola proyek sampai selesai sukses. Sepanjang jalan, Anda akan mengambil banyak berguna petunjuk-seperti metode sederhana untuk menentukan yang melakukan outsourcing mitra yang tepat bagi Anda dan tips manajemen proyek sederhana yang akan membantu menjaga proyek Anda di jalur.

DOWNLOAD

Baca selengkapnya »

Tutorial CodeIgniter 3 : Mengganti Tampilan Halaman Error 404 Page Not Found Di CodeIgniter

Unknown 23.40 CodeIgniter , Tutorial

Pada tutorial kali ini, Cuma coder akan membahas bagaimana cara mengganti tampilan halaman error 404 Page Not Found di codeigniter. defaultnya tampilan halaman error 404 di codeigniter bisa kita lihat seperti gambar dibawah ini.

Ya tampilan defaultnya agak kurang menarik. Nah untuk mengganti tampilannya agar lebih menarik. Kita hanya membuat sebuah controller yang mengarahkannya ke file view yang akan menjadi tampilan halaman error 404. untuk lebih jelasnya silahkan ikuti tutorial dibawah ini.

Lahkah pertama adalah membuat file notfound.php pada folder controllers (nama file bisa disesuaikan keinginan anda).
Kemudian buat file notfoundview.php pada folder views (File ini akan menjadi tampilan untuk halaman error 404) .
Buka File notfound.php dan tulis source code dibawah ini.
Buka juga file notfoundview.php dan tulis source code sesuai tampilan yang di inginkan.
Sekarang buka file routes.php yang berada pada folder config.
Cari $route['404_override'] = ''; ubah menjadi $route['404_override'] = 'notfound'; . Untuk lebih jelas perhatikan gambar dibawah ini.
Langkah terakhir silahkan di test dengan memasukan url yang menampilkan halaman eror 404.

Sekian tutorial singkat dari cuma coder. Silahkan baca tutorial lainnya tentang Tutorial CodeIgniter 3 dari cuma coder.

Baca selengkapnya »

Tutorial CodeIgniter 3 : Membuat Tampilan Codeigniter Dengan Bootstrap

Unknown 08.32 CodeIgniter , Tutorial

Kali ini Cuma Coder akan membahasa tutorial Membuat Tampilan Codeigniter Dengan Bootstrap . Untuk yang belum tahu apa itu Bootstap, Bootstrap adalah front-end framework yang bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.

Dengan bootstap kita dapan membangun web dengan tampilan responsif. Sehingga web yang kita buat dengan bootstap bisa menyesuaikan secara otomatis dengan layar gadget. Untuk membuat tampilan codeigniter dengan bootstap sangatlah mudah. Yang kita butuhkan hanyalah CSS dan Jquery Bootstap yang dapat didownload langsung di web resminya Bootstrap .

Dalam tutorial ini kita sebaiknya mengatur url codeigniter seperti yang ada di artikel cuma coder yang berjudul Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3) .

Untuk membuat tampilan codeigniter dengan bootstap kita hanya meload css beserta javascript bootstrap yang telah kita download. Untuk peletakan file css dan javascript bootstrap bisa kita buat didalam folder assets pada folder project codeigniter kita. contohnya seperti skema dibawah ini.

ci_bootstrap/
|-- application/ 
|-- assets/ 
|---- css/ 
|------ bootstrap.min.css 
|------ style.css 
|---- js/ 
|------ bootstrap.min.js 
|------ jquery.min.js 
|---- fonts/ 
|------ glyphicons-halflings-regular.eot 
|------ glyphicons-halflings-regular.svg 
|------ glyphicons-halflings-regular.ttf 
|------ glyphicons-halflings-regular.woff
|------ glyphicons-halflings-regular.woff2 
|-- system/ 
|-- index.php 
|-- .htaccess

Untuk template bisa kita gunakan contoh yang ada di http://getbootstrap.com/getting-started/#examples . Untuk tampilan bootstrap kita akan membuat tiga buah file view yaitu

1. home.php ( Tampilan untuk isi konten )

2. header.php ( Tampilan untuk header dan juga untuk meload css beserta javascript bootstrap)

3. footer.php ( Tampilan footer)

Silahkan buat juga controller home dengan source code seperti dibawah ini :


<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Home extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
 
 
    /**
     * Cotoh penggunaan bootstrap pada codeigniter::index()
     */
    public function index()
    {
        $this->load->view('home');
    }
}
 
# nama file home.php
# folder apllication/controller/

Source code home.php :


<? $this->load->view('header');?>
 
    <div class="container">
 
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Membuat Tampilan CodeIgniter Dengan Bootstrap</h1>
        <p></p>
        <p></p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
 
    </div> <!-- /container -->
<? $this->load->view('footer');?>

Source code header.php :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="FaberNainggolan">
    <title>CodeIgniter dengan Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet">
  </head>
 
  <body>
    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Cuma Coder</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
            <li><a href="#about"><i class="glyphicon glyphicon-info-sign"></i> About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li class="active"><a href="./">Static top <span class="sr-only">(current)</span></a></li>
            <li><a href="../navbar-fixed-top/">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

Source code footer.php :


    <!-- Bootstrap core and JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="<?=base_url()?>assets/js/jquery.min.js"></script>
    <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script>
  </body>
</html>

Jadi kesimpulannya kita hanya meload css dan javascript bootstrap untuk membuat tampilan codeigniter dengan bootstrap. Semoga tutorial ini bermanfaat.

Baca selengkapnya »

Tutorial CodeIgniter 3 : Upload Gambar (Image), Rename dan Resize dengan MySQLi + Bootstrap Full Source Code

Unknown 23.11 CodeIgniter , Mysqli , Source Code , Tutorial

Halo ! Cuma Coder kali ini akan membagikan tutorial mengenai Upload Gambar (Image) pada framework CodeIgniter 3. Tutorial ini selain membahas tentang Upload Gambar kita akan sekaligus membahas mengenai fungsi rename (mengubah nama file gambar) dan resize (merubah ukuran gambar ) setelah kira melakukan upload.

Di dalam framework CodeIgniter sendiri juga sudah disediakan library upload dan image_lib (library untuk manipulasi gambar) . Pastikan kedua library tersebut sudah ada pada folder library CodeIgniter 3. Biasanya sih sudah ada kalau kita mendownload CodeIgniter dari web resminya.

Oke langsung saja kira masuk ke Tutorial CodeIgniter 3 : Upload Image, Rename dan Resize.

1 . Setting Dan Database

Karena kita menggunakan Bootstrap silahkan Download Bootstrap dan letakan di folder assets
Setting default controller menjadi upload di config/routes.php
Karena kita menggunakan library upload dan library image_lib serta penyimpanan data kedatabase. maka kita load libray tersebut secara otomatis di config/autoload.php
Sebaiknya kita menghilangkan index.php pada url untuk mepercantik url. Silahkan Baca Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3)

Dalam tutorial kali ini kita menggunakan database driver MySQLi jadi kita set dulu database driver nya di file database.php yang berada pafa folder /application/config/ . Untuk pengaturannya bisa di sesuaikan.


$db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'img_db',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
);

Selanjutnya kita buat database dan tabelnya . Untuk tabelnya bisa dengan menjalankan script dibawah ini di comand console.

CREATE TABLE `upload_img` (
  `id` int(3) NOT NULL AUTO_INCREMENT,
  `namafile` varchar(35) DEFAULT NULL,
  `type` varchar(10) DEFAULT NULL,
  `keterangan` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

2. Controller
Untuk controllernya kita menggunakan satu controller yang memiliki beberapa fungsi antara lain :

Function Index (Fungsi untuk menampilkan halaman home yang berisi file yang telah di upload)
Function Add ( Fungsi untuk menampilkan form upload gambar)
Function Insert ( Fungsi untuk upload gambar , rename , dan resize. Serta menyimpan ke database )

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller {

  var $limit=10;
  var $offset=10;

    public function __construct() {
        parent::__construct();
        $this->load->model('model_upldgbr'); //load model model_upldgbr yang berada di folder model
        $this->load->helper(array('url')); //load helper url 
    }

    public function index($page=NULL,$offset='',$key=NULL)
    {        
        $data['query'] = $this->model_upldgbr->get_allimage(); //query dari model
        
        $this->load->view('home',$data); //tampilan awal ketika controller upload di akses
    }

    public function add() {
        //view yang tampil jika fungsi add diakses pada url
        $this->load->view('fupload');
       
    }
    public function insert(){
        $this->load->library('upload');
        $nmfile = "file_".time(); //nama file + fungsi time
        $config['upload_path'] = './assets/uploads/'; //Folder untuk menyimpan hasil upload
        $config['allowed_types'] = 'gif|jpg|png|jpeg|bmp'; //type yang dapat diakses bisa anda sesuaikan
        $config['max_size'] = '3072'; //maksimum besar file 3M
        $config['max_width']  = '5000'; //lebar maksimum 5000 px
        $config['max_height']  = '5000'; //tinggi maksimu 5000 px
        $config['file_name'] = $nmfile; //nama yang terupload nantinya

        $this->upload->initialize($config);
        
        if($_FILES['filefoto']['name'])
        {
            if ($this->upload->do_upload('filefoto'))
            {
                $gbr = $this->upload->data();
                $data = array(
                  'namafile' =>$gbr['file_name'],
                  'type' =>$gbr['file_type'],
                  'keterangan' =>$this->input->post('textket')
                  
                );

                $this->model_upldgbr->get_insert($data); //akses model untuk menyimpan ke database
                //dibawah ini merupakan code untuk resize
                $config2['image_library'] = 'gd2'; 
                $config2['source_image'] = $this->upload->upload_path.$this->upload->file_name;
                $config2['new_image'] = './assets/hasil_resize/'; // folder tempat menyimpan hasil resize
                $config2['maintain_ratio'] = TRUE;
                $config2['width'] = 100; //lebar setelah resize menjadi 100 px
                $config2['height'] = 100; //lebar setelah resize menjadi 100 px
                $this->load->library('image_lib',$config2); 

                //pesan yang muncul jika resize error dimasukkan pada session flashdata
                if ( !$this->image_lib->resize()){
                $this->session->set_flashdata('errors', $this->image_lib->display_errors('', ''));   
              }
                //pesan yang muncul jika berhasil diupload pada session flashdata
                $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-success\" id=\"alert\">Upload gambar berhasil !!</div></div>");
                redirect('upload'); //jika berhasil maka akan ditampilkan view upload
            }else{
                //pesan yang muncul jika terdapat error dimasukkan pada session flashdata
                $this->session->set_flashdata("pesan", "<div class=\"col-md-12\"><div class=\"alert alert-danger\" id=\"alert\">Gagal upload gambar !!</div></div>");
                redirect('upload/add'); //jika gagal maka akan ditampilkan form upload
            }
        }
    }
}

3. Views
Dalam tutorial ini kita akan membuat 2 view . View yang pertama yang berfungsi untuk menampilkan daftar gambar yang telah di upload. View pertama kita beri nama home.php . File home,php ini akan menampilkan berupa gambar yang ada di folder /assets/hasil_resize yaitu gambar yang hasil upload yang telah di resize sebagai thumbnailnya. Untuk tampilan dan source code home.php bisa anda tiru source code dibawah ini.

<head>
    <title>Upload Gambar (Image), Rename dan Resize</title> <!-- variabel diambil dari controller -->
    
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>

    body{
        margin:20px 10%;
    }
</style>
</head>

<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
<div class="panel panel-default">
  <div class="panel-heading"><b> Daftar File IMage</b></div>
  <div class="panel-body">
    
    <?=$this->session->flashdata('pesan')?>
    <p>
        <a href="<?=base_url()?>upload/add" class="btn btn-success">Tambah</a>
    </p>
  <table class="table table-bordered table-striped">
    <tr>
      <th>Nama File</th>
      <th>Tipe File</th>
      <th>Gambar File</th>
      <th>Keterangan</th>
    </tr>
  <? foreach ($query as $row)
{
  ?>
    <tr>
      <td><?=$row->namafile;?></td>
      <td><?=$row->type;?></td>
      <td><img  src="<?=base_url()?>assets/hasil_resize/<?=$row->namafile;?>"></td>
      <td><?=$row->keterangan;?></td>
    </tr>
<?php } ?>
  </table>

</div>
</div>
</div>

Tampilan view home dengan source code seperti diatas akan menampilakan seperti gambar dibawah ini.

Selanjutnya view kedua merupakan tampilan untuk form upload yang berfungsi sebagai input gambar yang akan di upload. View kedua ini kita beri nama fupload.php. Untuk source code nya seperti dibawah ini.


<head>
    <title>Upload Gambar (Image), Rename dan Resize</title>
    
    <link href="<?=base_url()?>assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Bootstrap core CSS -->
    <link href="<?=base_url()?>assets/css/style.css" rel="stylesheet"> <!-- Custom styles for this template -->
<style>

    body{
        margin:20px 10%;
    }
</style>
</head>

<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
<div class="panel panel-default">
  <div class="panel-heading"><b>Form Upload Image</b></div>
  <div class="panel-body">
  <?=$this->session->flashdata('pesan')?>
     <form action="<?=base_url()?>upload/insert" method="post" enctype="multipart/form-data">
       <table class="table table-striped">

         <tr>
          <td style="width:15%;">File Foto</td>
          <td>
            <div class="col-sm-6">
                <input type="file" name="filefoto" class="form-control">
            </div>
            </td>
         </tr>
                    <tr>
          <td style="width:15%;">Keterangan Foto</td>
          <td>
            <div class="col-sm-10">
                <textarea name="textket" class="form-control"></textarea>
            </div>
            </td>
         </tr>
         <tr>
          <td colspan="2">
            <input type="submit" class="btn btn-success" value="Simpan">
            <button type="reset" class="btn btn-default">Batal</button>
          </td>
         </tr>
       </table>
     </form>
        </div>
    </div>    <!-- /panel -->

    </div> <!-- /container -->

4. Modal
Untuk menghubungkan kedatabase tentunya kita menggunakan modal. untuk modalnya kita beri nama model_upldgbr.php . Dalam modal ini terdapat 2 query , antara lain :

function get_allimage ( fungsi untuk menampilkan semua data dari tabel)
function get_insert ( fungsi untuk menyimpan data gambar ke database pada saat proses upload)

Source code model_upldgbr.php seperti dibawah ini :


<?php
class model_upldgbr extends CI_Model {

    var $tabel = 'upload_img';

    function __construct() {
        parent::__construct();
    }
    
    //fungsi untuk menampilkan semua data dari tabel database
 function get_allimage() {
        $this->db->from($this->tabel);
  $query = $this->db->get();
        return $query->result();
 }

    //fungsi insert ke database
    function get_insert($data){
       $this->db->insert($this->tabel, $data);
       return TRUE;
    }

}

?>

Untuk contoh source code yang sudah jadi silahkan anda download source code dan database dibawah ini. Semoga tutorial ini bisa bermanfaat. Untuk pertanyaan, kritik dan saran. silahkan dituangkan di form komentar di akhir poStingan ini .

Baca selengkapnya »

Tutorial CodeIgniter 3 : Menghilangkan Index.php Pada URL (Mempercantik URL Pada CodeIgniter 3)

Unknown 10.18 CodeIgniter , Tutorial

Menghilangkan Index.php Pda URL CodeIgniter

Saat kita mengakses url/project CodeIgniter kita ,pasti kita melihat index.php seperti pada url http://localhost/project/index.php/home/. index.php pada codeigniter dapat kita hilangkan dengan mudah sehingga kita tidak perlu lagi menggunakan index.php pada url project codeigniter kita. Jika index.php di hilangkan maka hasilnya akan seperti url berikut ini http://localhost/project/home/ . Jadi url codeigniter kita terlihat rapi dan cantik.

Jadi untuk menghilangkan index.php pada Codeigniter kita ikuti tutorial dibawah ini :

Menghilangkan index.php

Kita hanya mengedit sedikit file /application/config/condig.php. Buka file tersebut, dan cari index_page seperti dibawah ini :


$config['index_page'] = 'index.php';

Dan edit menjadi seperti dibawah ini, atau lebih tepatnya hapus index.php


$config['index_page'] = '';

Setelah melakukan langkah diatas. Sekarang kita buat file .htaccess pada direktori root project CodeIgniter kita. Untuk isi file .htaccess nya seperti dibawah ini.


RewriteEngine On
RewriteCond %{REQUEST_URI} ^/system.*
RewriteRule ^(.*)$ index.php?/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?/$1 [L]

Untuk mencoba hasil dari menghilangkan index.php pada codeigniter silahkan akses url pada project codeigniter tanpa index.php . Biasanya kita mengakses dengan url http://localhost/project/index.php/home/ maka silahkan akses dengan url http://localhost/project/home/ . Jika hasil yang ditampilkan dari kedua url tersebut sama maka anda berhasil Mempercantik URL dengan menghilangkan index.php pada CodeIgniter.

Baca selengkapnya »

Sistem Informasi Akademik SMA/SMK Kurikulum 2013

Unknown 19.38 CodeIgniter , Portofolio , Yii 2

Sistem Informasi Akademik SMA/SMK ini dibuat untuk memenuhi kebutuhan pengolahan nilai khusus sekolah yang menggunakan kurikulum 2013 dengan Panduan Penilaian TERBARU dari KEMENDIKNAS DESEMBER 2015, terdiri dari 3 Modul Utama:

1. Berbasis Web

A. GURU : Entri nilai (PENGETAHUAN HARIAN, MID, SEMESTER, KETERAMPILAN, Entri Deskripsi Capaian Hasil Belajar, Dowload Nilai) .
B. Wali Kelas : Biodata , Lihat/Download Leger, Entri Raport Sikap, Kehadiran, dan keterangan lain sesuai format baku raport

2. Berbasis Desktop
Untuk Admin, Cetak Raport, Entri data Master, Buat Leger, dll .

3. Absensi Harian Siswa dan Guru, Jadwal Guru, SMS kehadiran, SMS autorespon.

A. Orang tua bisa cek kehadiran anaknya dengan mengirim SMS dan akan dijawab secara otomatis oleh server .

B. Notifikasi SMS untuk guru apabila guru yang bersangkutan terlambat .

C. Rekapitulasi kehadiran siswa.

D. Rekapitulasi kehadiran guru.

Keterangan tambahan:
1. Database : MySQL.

2. Script PHP, Entri Nilai Guru, dan Walikelas berbasis web dibuat dengan YII2 Framework

3. Desktop dibuat dengan VB.Net .
4. Absensi : Dibuat dengan CI Framework .
Client tidak terbatas, Server windows dengan Xampp, atau Linux (direkomendasikan Linux).
Dibantu instalasi aplikasi dengan remote SSH atau teamviewer khusus sekolah yang SERIUS memakainya.

Sistem Informasi Akademik SMA/SMK Kurikulum 2013 ini sudah digunakan dan berjalan 2 tahun di salah satu Sekolah Negeri Kabupaten Lahat, Sumatera Selatan.

Tampilan Entri Nilai Sistem Informasi Akademik SMA/SMK Kurikulum 2013

Tampilan Admin Untuk Cetak Rapot Berbasis Desktop

Sistem Informasi Ini bisa Anda miliki dengan membelinya melalui TOKOPEDIA. Atau bisa dengan donasi. Bagi Anda yang ingin memiliki Sistem Informasi Akademik ini dengan cara berdonasi. Atau untuk informasi lebih lengkap Silahkan hubungi :

082280602016 / erasusanti23@gmail.com

BELI

Baca selengkapnya »

Aplikasi Penerimaan Siswa Baru Online Dengan Sistem Ranking Otomatis

Unknown 19.14 CodeIgniter , Portofolio , Source Code

Aplikasi Penerimaan Siswa Baru Online Dengan Sistem Ranking Otomatia

Aplikasi Penerimaan Siswa Baru Online Dengan Sistem Rangking Otomatis ini merupakan sebuah aplikasi berbasis web yang dibuat dengan framework code igniter. Aplikasi Penerimaan Siswa Baru Online ini memiliki fitur yang sangat menarik . Yaitu fitur Meranking otomatis para pendaftar. Jadi admin pihak sekolah tidak perlu susah susah lagi dalam menentukan siswa yang lulus.

Fitur Aplikasi :