Tugas Web Programing Pertemuan 7 MVC Codeigniter Toko Sepatu

By
Ilham Bintang
-
0
3508
Tugas Web Programing Pertemuan 7 MVC Codeigniter Toko Sepatu
Tugas Web Programing Pertemuan 7 MVC Codeigniter Toko Sepatu

Di artikel ini saya mau sharing tentang pembahasan tugas web programing 2 quiz review pertemuan ke 7, di sini akan ada studi kasus yang memerintahkan untuk membuat konsep MVC (Model View Controller) di codeigniter, yang dimana mahasiswa akan diperintahkan untuk membuat input transaksi, menampilkan hasil, dan membuat perhitungan penjumlahan untuk total jumlah dengan parameter merk transaksi dari studi kasus toko sepatu.

Saya akan melampirkan pembahasan studi kasus toko sepatu, source code atau kode program, dan screen shoot hasil

Studi Kasus

Kode Program

Karena akan membuat dengan menggunkan konsep mvc codeigniter disini akan bermain di di bagian directory aplication view, controller dan model

Tapi sebelum itu harus ada yang di konfigurasi dulu dibagian codeigniternya

Edit Config Codeigniter

1. Pertama masuk ke aplication/config/autoload.php, di file autoload ini ada yang perlu di tambahkan seperti kode diabawah ini

1
2
3
4
5
$autoload['libraries'] = array('form_validation', 'database', 'session');
 
$autoload['helper'] = array('url', 'file');
 
$autoload['model'] = array('PriceModel','ModelUser', 'ModelBuku');

2. Masih di derektori config lanjut ke file config.php, disini ada beberapa bagian yang perlu di tambahkan ikuti dan perhatikan kode berikut

1
2
3
4
5
$config['base_url'] = 'http://localhost:8080/aplikasi/';
/* sesuaikan base urlnya */
 
$config['index_page'] = '';
/* perhatikan index nya juga */

Langkah Pertama

Settings Template Di Codeigniter

Disini saya menggunakan template sb admin 2 dari bootstrap untuk membuat view nya jika kalian belum punya templatenya download dulu disini, nah jika kalian sudah berhasil mendownload nya bisa lanjut ke templating nya untuk dipisahkan antara header, sidebar, konten, dan footer

1. Pertama dari template sb admin yang tadi baru di download select folder css, img, js, vendor kemudian copy

2. Ke project codeigniternya buat folder di luar beri nama assets, di dalam folder ini isi dengan folder yang tadi di copy

Tugas Web Programing Pertemuan 7 MVC Codeigniter Toko Sepatu

3. Lanjut pindahkan di folder view ci nya buat folder baru themes, kemudian di dalam folder themes buat file header.php, sidebar.php, dan footer.php

Tugas Web Programing Pertemuan 7 MVC Codeigniter Toko Sepatu

4. Dibagian file header.php isi dengan kodingan berikut

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
<!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, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
 
    <title><?= $title; ?></title>
 
    <!-- Custom fonts for this template-->
    <link href="<?= base_url('assets/'); ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 
    <!-- Custom styles for this template-->
    <link href="<?= base_url('assets/'); ?>css/sb-admin-2.min.css" rel="stylesheet">
 
</head>
 
<body id="page-top">
 
    <!-- Page Wrapper -->
    <div id="wrapper">
 
        <!-- Sidebar -->
        <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
            <!-- Sidebar - Brand -->
            <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                <div class="sidebar-brand-icon rotate-n-15">
                    <i class="fas fa-laugh-wink"></i>
                </div>
                <div class="sidebar-brand-text mx-3">Identity</div>
            </a>
 
            <!-- Divider -->
            <hr class="sidebar-divider my-0">

5. Di bagian file sidebar.php isi dengan kodingan berikut

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
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
    <a class="nav-link" href="<?= base_url('dashboard'); ?>">
        <i class="fas fa-fw fa-tachometer-alt"></i>
        <span>Dashboard</span></a>
    <a class="nav-link" href="<?= base_url('matakuliah'); ?>">
        <i class="fas fa-book-reader"></i>
        <span>Matakuliah</span></a>
    <a class="nav-link" href="<?= base_url('web'); ?>">
        <i class="far fa-newspaper"></i>
        <span>Artikel</span></a>
    <a class="nav-link" href="<?= base_url('sepatu'); ?>">
        <i class="fas fa-shoe-prints"></i>
        <span>Sepatu</span></a>
</li>
 
 
</ul>
<!-- End of Sidebar -->
 
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
 
    <!-- Main Content -->
    <div id="content">
 
        <!-- Topbar -->
        <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
 
            <!-- Sidebar Toggle (Topbar) -->
            <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                <i class="fa fa-bars"></i>
            </button>
 
            <ul class="navbar-nav ml-auto">
            </ul>
 
        </nav>
        <!-- End of Topbar -->
 
        <!-- Begin Page Content -->
        <div class="container-fluid">
 
            <!-- Page Heading -->
            <div class="d-sm-flex align-items-center justify-content-between mb-4">
                <h1 class="h3 mb-0 text-gray-800"><?= $title_konten; ?></h1>
            </div>

6. Lanjut di bagian footer.php

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
</div>
<!-- /.container-fluid -->
 
</div>
<!-- End of Main Content -->
 
<!-- Footer -->
<footer class="sticky-footer bg-white">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>Copyright &copy; Ilham Bintang</span>
        </div>
    </div>
</footer>
<!-- End of Footer -->
 
</div>
<!-- End of Content Wrapper -->
 
</div>
<!-- End of Page Wrapper -->
 
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>
 
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url('assets/'); ?>vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
<!-- Core plugin JavaScript-->
<script src="<?= base_url('assets/'); ?>vendor/jquery-easing/jquery.easing.min.js"></script>
 
<!-- Custom scripts for all pages-->
<script src="<?= base_url('assets/'); ?>js/sb-admin-2.min.js"></script>
 
<!-- Page level plugins -->
<script src="<?= base_url('assets/'); ?>vendor/chart.js/Chart.min.js"></script>
 
<!-- Page level custom scripts -->
<script src="<?= base_url('assets/'); ?>js/demo/chart-area-demo.js"></script>
<script src="<?= base_url('assets/'); ?>js/demo/chart-pie-demo.js"></script>
 
</body>
 
</html>

View

1. Buat folder di view dengan nama folder sepatu, di dalam folder sepatu buat file index.php dan view.php

index.php

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
<?php
include_once(dirname(__FILE__) . '/../themes/header.php');
include_once(dirname(__FILE__) . '/../themes/sidebar.php');
?>
<div class="row">
    <div class="col-md-12">
        <div class="card border-0 shadow p-3 mb-2 rounded mb-4">
            <div class="card-header border-0 shadow p-3 mb-1 rounded mb-4">
                Input Data Transaksi
            </div>
            <div class="card-body">
                <?= form_error('nama_pembeli'); ?>
                <?= form_error('no_hp'); ?>
                <?= form_error('jumlah'); ?>
                <form action="<?= base_url('sepatu/view'); ?>" method="POST">
                    <div class="form-group">
                        <label for="nama_pembeli">Nama Pembeli</label>
                        <input type="text" name="nama_pembeli" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="no_hp">Nomor Handphone</label>
                        <input type="text" name="no_hp" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="merk">Merk Sepatu</label>
                        <select name="merk" id="" class="form-control">
                            <option value="">Pilih Merk</option>
                            <option value="Nike">Nike</option>
                            <option value="Adidas">Adidas</option>
                            <option value="Kickers">Kickers</option>
                            <option value="Eiger">Eiger</option>
                            <option value="Bucherri">Bucherri</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="ukuran">Ukuran Sepatu</label>
                        <select name="ukuran" id="" class="form-control">
                            <option value="0">Pilih Ukuran</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                            <option value="41">41</option>
                            <option value="42">42</option>
                            <option value="33">33</option>
                            <option value="44">44</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Jumlah</label>
                        <input type="number" name="jumlah" class="form-control">
                    </div>
                    <br />
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
<?php include_once(dirname(__FILE__) . '/../themes/footer.php'); ?>

view.php

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
<?php
include_once(dirname(__FILE__) . '/../themes/header.php');
include_once(dirname(__FILE__) . '/../themes/sidebar.php');
?>
<div class="row">
    <div class="col-md-12">
        <div class="card border-0 shadow p-3 mb-2 rounded mb-4">
            <div class="card-header border-0 shadow p-3 mb-2 rounded mb-4">
                View Data Transaksi
            </div>
            <div class="card-body">
                <?= $berhasil; ?>
                <table class="table table-striped">
                    <tbody>
                        <tr>
                            <th>Nama Pembeli</th>
                            <td>:</td>
                            <td><?= $nama_pembeli; ?></td>
                        </tr>
                        <tr>
                            <th>Nomor HP</th>
                            <td>:</td>
                            <td><?= $no_hp; ?></td>
                        </tr>
                        <tr>
                            <th>Merk Sepatu</th>
                            <td>:</td>
                            <td><?= $merk; ?></td>
                        </tr>
                        <tr>
                            <th>Ukuran Sepatu</th>
                            <td>:</td>
                            <td><?= $ukuran; ?></td>
                        </tr>
                        <tr>
                            <th>Jumlah</th>
                            <td>:</td>
                            <td><?= $jumlah; ?></td>
                        </tr>
                        <tr>
                            <th>Harga</th>
                            <td>:</td>
                            <td><?= Rupiah($harga); ?></td>
                        </tr>
                        <tr>
                            <th>Total Harga</th>
                            <td>:</td>
                            <td><?= Rupiah($harga * $jumlah); ?></td>
                        </tr>
                    </tbody>
                </table>
                <br />
                <a href="<?= base_url('sepatu'); ?>" class="btn btn-primary">Kembali</a>
            </div>
        </div>
    </div>
</div>
<?php include_once(dirname(__FILE__) . '/../themes/footer.php'); ?>

Langkah Kedua

Di langkah kedua ini akan membuat controller dan model nya

1. Buat Model

Masuk ke folder model buat file baru dengan nama PriceModel.php kemudian masukkan kode program berikut

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
<?php
defined('BASEPATH') or exit('No direct script access allowed');
 
class PriceModel extends CI_Model
{
    public function price()
    {
        if ($this->input->post('merk') == "Nike") {
            $data = 375000;
            return $data;
        }
        if ($this->input->post('merk') == "Adidas") {
            $data = 300000;
            return $data;
        }
        if ($this->input->post('merk') == "Kickers") {
            $data = 250000;
            return $data;
        }
        if ($this->input->post('merk') == "Eiger") {
            $data = 275000;
            return $data;
        }
        if ($this->input->post('merk') == "Bucherri") {
            $data = 400000;
            return $data;
        }
    }
}

2. Buat Controller

Masuk ke folder controller buat file baru Sepatu.php kemudian isi dengan kode berikut

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
<?php
defined('BASEPATH') or exit('No direct script access allowed');
 
class Sepatu extends CI_Controller
{
    public function index()
    {
        $data = [
            'title' => "Data Transaksi Sepatu",
            'title_konten' => "Form Pembelian Sepatu"
        ];
        $this->load->view('sepatu/index', $data);
    }
 
    public function view()
    {
        $this->form_validation->set_rules(
            'nama_pembeli',
            'Nama Pembeli',
            'required|min_length[3]',
            [
                'required' => "<div class='alert alert-danger' role='alert'>Nama Pembeli Tidak Boleh Kosong</div>",
                'min_length' => "<div class='alert alert-danger' role='alert'>Nama Pembeli Minimal 3 Karakter</div>"
            ]
        );
 
        $this->form_validation->set_rules(
            'no_hp',
            'Nomor Handphone',
            'required|min_length[9]',
            [
                'required' => "<div class='alert alert-danger' role='alert'>Nomor Handphone Harus di Isi</div>",
                'min_length' => "<div class='alert alert-danger' role='alert'>Nomor Handphone Terlalu Pendek</div>"
            ]
        );
        $this->form_validation->set_rules(
            'jumlah',
            'Jumlah',
            'required|min_length[1]',
            [
                'required' => "<div class='alert alert-danger' role='alert'>Jumlah Harus di Isi</div>",
                'min_length' => "<div class='alert alert-danger' role='alert'>Jumlah minimal 1 digit</div>",
            ]
        );
        if ($this->form_validation->run() != true) {
 
            $data = [
                'title_konten'  => "Data Transaksi Sepatu",
                'title'         => "Form Pembelian Sepatu",
            ];
 
            $this->load->view('sepatu/index', $data);
        } else {
            $this->load->model('PriceModel');
            $price = $this->PriceModel->price();
            $data = [
                'nama_pembeli'  => $this->input->post('nama_pembeli'),
                'no_hp'         => $this->input->post('no_hp'),
                'merk'          => $this->input->post('merk'),
                'ukuran'        => $this->input->post('ukuran'),
                'jumlah'        => $this->input->post('jumlah'),
                'title_konten'  => "Data Transaksi Sepatu",
                'title'         => "Data Transaksi",
                'berhasil'      => "<div class='alert alert-success' role='alert'>Data berhasil ditambahkan</div>",
                'harga'         => $price,
            ];
 
 
 
            function Rupiah($angka)
            {
                $data = "Rp " . number_format($angka, 2, ',', '.');
                return $data;
            }
 
            $this->load->view('sepatu/view', $data);
        }
    }
}

Tampilan Hasil Transaksi Sepatu

1. Input Proses

Buatlah tampilan form input transaksi di point 1 meliputi input nama pembeli menggunakan text,

2. View Transaksi

Ada sebuah toko sepatu yang ingin dibuatkan program untuk menghitung otomatis dari transaksi penjualan sepatunya yang mana harga sepatu ditentukan berdasarkan merk dari sepatu tersebut.

3. Validation

web programing II membuat input toko sepatu di codeigniter 3

Untuk detail lengkap dari kode program nya kalian bisa liat disini, jika dalam penulisan pembahasan tugas web programing 2 pertemuan 7 ini kurang atau ada yang tidak jelas silahkan tinggalkan jejak komentar ya, semoga bermanfaat.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here