Integrasi CodeIgniter Dan Bootstrap

Mei 06, 2018 deifa satrio 1 Comments


Halo halo, salam sejahtera buat kawan-kawan semua, gimana kabar kalian ? sehat kan. Harus sehat ya, soal nya di artikel kali ini saya akan membahas tentang bagaimana cara menambahkan bootstrap di project Codeingniter kalian. Kalo kemaren kemaren kita sibuk di script sistem, kali ini kita akan beranjak 1 level lebih tinggi, yaitu ke tampilan website.

Ok, langsung saja kita lanjut, sebelumnya untuk kawan-kawan yang belum membaca artikel sebelumnya yaitu : mengedit data gambar menggunakan codeigniter harap dibaca dulu ya untuk menghindari kebingungan. nah sebelum kita melangkah lebih jauh, pastikan kawan-kawan mendownload file-file yang di butuhkan disini. kalo sudah, sekarang ikuti langkah-langkah di bawah ini dengan teliti dan hati-hati :

1. Exstrack file "assets.rar" yang barusan kawan-kawan download, maka kalian akan menemukan 3 folder dan 1 file di dalamnya yaitu :












kemudian buatlah folder bernama "assets" di dalam folder "belajarci" dan copy 3 folder dan 1 file tadi ke dalam nya.

2. Kemudian kita tinggal dulu folder assets tadi, buka project kalian di texteditor lalu edit "main.php" yang berada di "belajarci/application/views/main.php" seperti berikut :

Penjelasan Script :
Sebenarnya di penjelasan kali ini gak terlalu berubah banyak sih untuk script, hanya sicrpt html nya jadi saya akan menjelaskan perubahan-perubahan penting saja. 

 - script <link href="<?php echo base_url(); ?>assets/css/bootstrap.min.css" rel="stylesheet"> berfungsi untuk memanggil file bootstrap.min.css yang berada di lokasi "belajarci1/assets/css/bootstrap.min.css" nah kalo temen-temen bingung apasih arti dari "<?php echo base_url(); ?>" arti script ini adalah "https//127.0.0.1/namafolderkalian/" coba kalian tulis alamat ini di browser "127.0.0.1/namafolder/assets/css/bootstrap.min.css" maka akan muncul script css yang sangat banyak di browser kalian. 

 nah sekarang apa sih css itu bang ? hehehe css adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda. Jadi gampangnya css adalah sebuah bahasa khusus yang membuat tampilan website lebih menarik.

- scirpt "<script src="<?php echo base_url(); ?>assets/jquery-3.3.1.min.js"></script>" berfungsi untuk memanggil file javasacript atau ".js" yang bernama "jquery-3.3.1" di folder "belajarci1/assets/jquery-3.3.1.min.js".

 kawan-kawan pasti bertanya-tanya apasih jquery itu ???

  jQuery adalah sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi ‘siap pakai’ untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.  Nah dalam kasus kita disini adalah, paket bootstrap itu membutuhkan jquery.

 - script "<script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>" memiliki fungsi yang sama, yaitu memanggil file "bootstrap.min.js" di folder "belajarci1/assets/js/bootstrap.min.js"  

 - Terakhir untuk kawan-kawan yang bingung dengan tambahan script html lainya kalian bisa lihat langsung di website resmi bootstrap , kemudian untuk script di bawah nya egak saya jelaskan karena memang sama langkah-langkah dan penjelasan script nya
 

3. jangan lupa kita edit juga file "input.php" yang berada di "belajarci/application/views/input.php" seperti berikut :


4. Terakhir jangan lupa edit juga file "edit.php" yang berada di "belajarci/application/views/edit.php" seperti berikut :

5. Selanjut nya silahkah kawan-kawan coba buka "127.0.0.1/belajarci" kenapa kog pake "127.0.0.1" bukan "localhost", alasanya karena kadang kalo pake "localhost" icon-icon yang telah kita pasang di project kita tidak muncul.

Ok sekian dulu tutorial singkat kali ini, kalo kawan-kawan masih banyak yang bingung silahkan coret-coret tab komentar di bawah ini atau download source code nya disini. sampai ketemu di artikel selanjutnya dan salam sejahtera untuk kawan-kawan semua.

1 komentar:

Mengedit Data & Gambar Menggunakan Codeigniter

Mei 01, 2018 deifa satrio 15 Comments


halo halo gimana kabar nya kawan ? baik kan ? kali ini seperti biasa saya akan melanjutkan artikel sebelumnya yaitu membuat input data beserta gambar, jadi untuk yang belum baca artikel-artikel yang sebelumnya silahkan baca terlebih dahulu supaya gak bingung ya kawan. Ok sesuai judul, artikel kali ini saya akan menjelaskan edit data sekaligus gambar.

Sebelum kita beranjak ke coding, kita harus tau dulu alur dari edit data sekaligus gambar seperti berikut :
1. user mengedit data.
2. jika user hanya mengedit data saja tanpa mengedit gambar, maka gambar tidak berubah.
3. jika user mengedit data sekaligus foto maka data akan berubah dan foto akan berganti.
4. eksekusi aksi user.


Setelah faham dengan alurnya sekarang kita lanjut ke coding. Ikuti langkah di bawah ini dengan teliti dan hati-hati:

1. Ubah file "edit.php" yang berada di "belajarci/application/views/edit.php" seperti berikut.


Penjelasan Script :  

 - Script "form_open_multipart" memiliki fungsi untuk membolehkan form    mengupload file. 

 - Untuk script 
" <?php if($row->gambar==''){ ?>

 <label>Belum Ada Gambar</label><br>

 <?php }else{ ?>

<img src="<?php echo base_url('uploads/thumbnail/'.$row->gambar)?>"><br>


 <?php }?> " berfungsi untuk memperindah tampilan aja, hehehe. jadi bila misal data buku itu sudah memiliki gambar, maka akan di tampilkan gambar tersebut, dan apabila tidak memiliki gambar maka akan muncul tulisan "Belum ada gambar".

 - kemudian untuk script " <input type="file" name="gambar"> " berfungsi untuk membuat form inputan untuk file atau foto yang akan di tambahkan.



2. Jika sudah Edit fungsi "edit()" di controller "C_buku.php" yang berada di folder "belajarci/application/controllers/C_buku.php" menjadi seperti berikut.


Penjelasan Script :

 - Script " $config = array(......); " berfungsi untuk membuat setelah upload file seperti lokasi, format file yang di ijinkan dan ukuran maksimal sebuah file.

 - Lalu script  
              " $id = $this->input->post('id');
$judul = $this->input->post('judul');
$tebal = $this->input->post('tebal');
$penerbit = $this->input->post('penerbit'); " 
berfungsi untuk mengambil data berupa text yang telah di postkan atau di kirim dari form edit.

 -  Selanjutnya untuk script 
"  if($foto->num_rows()>0){
      $pros=$foto->row();
      $name=$pros->gambar;
      
      if(file_exists($lok=FCPATH.'/uploads/'.$name)){
        unlink($lok);
      }
      if(file_exists($lok=FCPATH.'/uploads/thumbnail/'.$name)){
        unlink($lok);
      }} "

 berfungsi untuk meng unlink atau menghapus file foto yang tersimpan pada folder uploads dan thumbnail, bingung kan ? hehehehe. saya jelasin pelan-pelan, jadi misal kalian udah input data dan gambarnya ya kawan, kan pasti foto nya itu di taruh di suatu folder penyimpanan kan, nah unlink itu berfungsi untuk menghapus foto yang tersimpan di folder penyimpanan tersebut. 

 Dalam kasus ini saya gunakan untuk menghindari apabila data telah memiliki gambar, kemudian di edit gambar nya, jika tidak kita unlink nanti file fotonya akan menumpuk.

 - Selanjutnya script " $this->load->library('upload',$config); " memiliki fungsi untuk menset library upload file sesuai setelan yang kitu sudah buat di variable array " $config ".

 - Dan yang terakhir adalah script berikut
" if($this->upload->do_upload('gambar')){

 $finfo = $this->upload->data();
$nama_foto = $finfo['file_name'];

 $data_buku = array(
'judul'=>$judul,
'tebal'=>$tebal,
'penerbit'=>$penerbit,
'gambar'=>$nama_foto
);

 $config2 = array(
'source_image'=>'uploads/'.$nama_foto,
'image_library'=>'gd2',
'new_image'=>'uploads/thumbnail',
'maintain_ratio'=>true,
'width'=>150,
'height'=>200
);

$this->load->library('image_lib',$config2);
$this->image_lib->resize();

}else{
$data_buku = array(
'judul'=>$judul,
'tebal'=>$tebal,
'penerbit'=>$penerbit
);

 } "
nah jadi saya akan jelasin secara singkat ya, sebelumnya kalo temen-temen bingung harap pelajari dulu materi "if else php" jadi script panjang tersebut berfungsi mendeteksi apakah ada foto atau file yang di upload.

 Apabila ada file yang di upload maka script diatas akan melakukan aksi mengambil nama file, menyimpan data ke variable array dan membuat thumbnail dari foto yang telah di upload.

 Dan jika tidak ada foto atau file yang di upload maka script tersebut hanya akan membuat variable array yang nantinya akan di simpan di database.


3. Coba script baru kalian dengan membuka browser dan mengetik alamat "localhost/belajarci", dan jangan lupa nyalakan xampp kalian terlebih dahulu.

Ok saya kira sekian tutorial pendek kali ini, semoga bermanfaat dan berguna. Kalo kawan-kawan masih bingung silahkan coret-coret tab komentar yang berada di bawah ini dan bila kawan-kawan kurang jelas dengan potongan script di atas kalian bisa download source code nya disini, sampai ketemu di artikel selanjutnya dan salam sejahtera untuk kawan-kawan semua.

15 komentar:

Langganan: Postingan (Atom)