Home » PHP » PANDUAN MEMBUAT SHOPPING CART SEDERHANA DI CODEIGNITER 2.1.3

PANDUAN MEMBUAT SHOPPING CART SEDERHANA DI CODEIGNITER 2.1.3

Rasanya sudah lama ga nulis di blog, hehehehe (walaupun cuma 2 minggu). Ok sobat kali ini saya akan membagikan tutorial membuat shopping cart sederhana di CodeIgniter yang membutuhkan library Cart bawaan CI. Dan untuk diketahui library cart mendukung penggunaan library session, cart akan disimpan dalam session, jadi sobat harus menset dulu encryption_key dalam config.php. Tenang saja nanti saya jelaskan.

STEP 1 : Membuat Controller
Dengan menggunakan editor teks, buatlah file shop.php dan tulis kode dibawah ini lalu simpan dalam folder application/controllers :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
class Shop extends CI_Controller {
  
 function index() {
   
  $this->load->model('Products_model');
   
  $data['products'] = $this->Products_model->get_all();
   
  $this->load->view('products', $data);
 }
  
 function add() {
   
  $this->load->model('Products_model');
   
  $product = $this->Products_model->get($this->input->post('id'));
   
  $insert = array(
   'id' => $this->input->post('id'),
   'qty' => 1,
   'price' => $product->harga,
   'name' => $product->nama
  );
  if ($product->nama_pilihan) {
   $insert['options'] = array(
    $product->nama_pilihan=> $product->nilai_pilihan[$this->input->post($product->nama_pilihan)]
   );
  }
   
  $this->cart->insert($insert);
  
  redirect('shop');
   
 }
  
 function remove($rowid) {
   
  $this->cart->update(array(
   'rowid' => $rowid,
   'qty' => 0
  ));
   
  redirect('shop');
   
 }
  
}

STEP 2 : Membuat Model
Dengan menggunakan editor teks, buatlah file products_model.php dan tulis kode dibawah ini lalu simpan dalam folder application/models :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
class Products_model extends CI_Model {
  
 function get_all() {
   
  $results = $this->db->get('produk')->result();
   
  foreach ($results as &$result) {
    
   if ($result->nilai_pilihan) {
    $result->nilai_pilihan = explode(',',$result->nilai_pilihan);
   }
    
  }
   
  return $results;
   
 }
  
 function get($id) {
   
  $results = $this->db->get_where('produk', array('id' => $id))->result();
  $result = $results[0];
   
  if ($result->nilai_pilihan) {
   $result->nilai_pilihan = explode(',',$result->nilai_pilihan);
  }
   
  return $result;
 }
  
}

STEP 3 : Membuat View
Dengan menggunakan editor teks, buatlah file products.php dan tulis kode dibawah ini lalu simpan dalam folder application/views :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <title>Shop</title>
 <meta charset="UTF-8">
 <link href="<?php echo base_url();?>/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
 <div id="products">
 <ul>
  <?php foreach ($products as $product): ?>
  <li>
   <?php echo form_open('shop/add'); ?>
   <div class="name"><?php echo $product->nama; ?></div>
   <div class="thumb">
   <?php echo img(array(
    'src' => 'images/' . $product->gambar,
    'class' => 'thumb',
    'alt' => $product->nama,
    'width'=>100
   )); ?>   
   </div>
   <div class="price">Rp <?php echo $product->harga; ?></div>
   <div class="option">
    <?php if ($product->nama_pilihan): ?>
     <?php echo form_label($product->nama_pilihan, 'pilihan_'. $product->id); ?>
     <?php echo form_dropdown(
      $product->nama_pilihan,
      $product->nilai_pilihan,
      NULL,
      'id="option_'. $product->id.'"'
     ); ?>
    <?php endif; ?>
   </div>
    
   <?php echo form_hidden('id', $product->id); ?>
   <?php echo form_submit('action', 'Tambah ke Keranjang'); ?>
   <?php echo form_close(); ?>
  </li>
  <?php endforeach; ?>
 </ul>
 </div>
  
 <?php if ($cart = $this->cart->contents()): ?>
 <div id="cart">
  <table>
  <caption>Shopping Cart</caption>
  <thead>
   <tr>
    <th>Nama Item</th>
    <th>Pilihan</th>
    <th>Harga</th>
    <th></th>
   </tr>
  </thead>
  <?php foreach ($cart as $item): ?>
   <tr>
    <td><?php echo $item['name']; ?></td>
    <td>
     <?php if ($this->cart->has_options($item['rowid'])) {
      foreach ($this->cart->product_options($item['rowid']) as $option => $value) {
       echo $option . ": <em>" . $value . "</em>";
      }
       
     } ?>
    </td>
    <td>Rp <?php
    $harga=number_format($item['subtotal'],2,",",".");
    echo $harga;
     
    ?></td>
    <td class="remove">
     <?php echo anchor('shop/remove/'.$item['rowid'],'X'); ?>
    </td>
   </tr>
  <?php endforeach; ?>
  <tr class="total">
   <td colspan="2"><strong>Total</strong></td>
   <td>Rp <?php
   $harga_tot=number_format($this->cart->total(),2,",",".");
   echo $harga_tot;
    
   ?></td>
  </tr>
  </table> 
 </div>
 <?php endif; ?>
</body>
</html>
Note : $harga_tot=number_format($this->cart->total(),2,",","."); berfungsi untuk memformat number dan disini saya format dengan dikasih "." per ribunya dan saya kasih 0 di akhirnya dengan dipisahkan tanda ",".

STEP 4 : Membuat CSS
Untuk mempercantik tampilan tambahkan file css di folder root. Dengan menggunakan editor teks, buatlah file style.css dan tulis kode dibawah ini lalu simpan dalam folder css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
 font: 13px Arial;
     }
#products {
        text-align: center; float: left;
 }
#products ul {
        list-style-type: none; margin: 0px;
 }
#products li {
        width: 150px; padding: 4px; margin: 8px;
        border: 1px solid #ddd; background-color: #eee;
 -moz-border-radius: 4px; -webkit-border-radius: 4px;
        }
#products .name {
 font-size: 15px; margin: 5px;
    }
#products .price {
 margin: 5px;
 }
#products .option {
 margin: 5px;
 }
#cart {
 padding: 4px; margin: 8px; float: left;
 border: 1px solid #ddd; background-color: #eee;
 -moz-border-radius: 4px; -webkit-border-radius: 4px;
 }
#cart table {
 width: 320px; border-collapse: collapse;
 text-align: left;
}
#cart th {
 border-bottom: 1px solid #aaa;  
}
#cart caption {
 font-size: 15px; height: 30px; text-align: left;
}
#cart .total {
 height: 40px;
}
#cart .remove a {
 color: red;
}

STEP 5 : Membuat Database
Jangan lupa untuk membuat database dengan detail sebagai berikut : 
  • nama database ci_series
  • nama table produk
  • nama-nama field table produk
    • id
    • nama
    • harga
    • gambar
    • nama_pilihan
    • nilai_pilihan

STEP 6 : Konfigurasi CodeIgniter
Sebenarnya ini harus di konfigurasi terlebih dahulu, maaf sobat. Konfigurasi terdiri dari sebagai berikut :

  1. Konfigurasi file config.php dalam folder application/config :

    1
    2
    3
    4
    5
    $config['base_url'] = 'http://localhost/ci_zone/ci_day12/';
    $config['index_page'] = '';
    $config['encryption_key'] = 'dat';
  2. Konfigurasi file database.php dalam folder application/config :

    1
    2
    3
    4
    5
    $db['default']['hostname'] = 'localhost';
    $db['default']['username'] = 'root';
    $db['default']['password'] = 'root';//isikan sesuai password sobat
    $db['default']['database'] = 'ci_series';
    $db['default']['dbdriver'] = 'mysql';
  3. Konfigurasi file autoload.php dalam folder application/config :

    1
    2
    3
    $autoload['libraries'] = array('database','cart');
    $autoload['helper'] = array('url','html','form');
  4. Konfigurasi file routes.php dalam folder application/config :

    1
    $route['default_controller'] = "shop";
Juga tambahi file ".htaccess" dalam folder root, untuk mempercantik tampilan url. Yang belum bisa buatnya bisa kunjungi cara membuat .htaccess di codeigniter 2.1.3
PANDUAN MEMBUAT SHOPPING CART SEDERHANA DI CODEIGNITER 2.1.3 Reviewed by Mas Bro on Rating: 4.5
Labels: ,

0 comments:

Post a Comment

Please Enable JavaScript!
Mohon Aktifkan Javascript![ Enable JavaScript ]
close
iklan 120 x 600 kanan
close