Menghitung Total dan Subtotal dengan Jquery

Menghitung Total dan Subtotal dengan JQUERY - Perhitungan semacam ini biasanya terdapat pada kasus pembuatan invoice atau aplikasi point of sales (aplikasi penjualan) dimana terdapat produk yang memiliki harga dan jumlah harga yang dibeli, sehingga akan menghitung kalkulasi angka berupa penjumlahan harga dikali jumlah beli menjadi subtotal, dan subtotal di jumlahkan menjadi grandtotal atau total keseluruhan, berikut script untuk menghitung secara dinamis total dan subtotal dengan jquery:

Preview Hasil Akhir: Penjumlahan Total & Subtotal Dinamis:

Kode HTML untuk Membuat Layout Seperti Diatas:
<table id="penjualan" class="table table-responsive table-hover">
    <thead>
        <tr><th>Produk</th><th>Jumlah</th><th>Harga</th>
            <th align="center"><span id="amount" class="amount">Subtotal</span> </th></tr>
        </thead>
        <tfoot>
            <tr><td colspan="2"></td>
                <td align="right">
                    <h3><span id="total" class="total text-success">Grand Total</span></h3>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr><td>Baju</td>
                <td>
                    <select value="" name="qty" class="qty form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <input type="text" value="2500" class="price form-control" disabled="true">
                </td>
                <td align="center">
                    <h4><span id="amount" class="amount">Rp. 0</span></h4>
                </td>
            </tr>
            <tr><td>Sepatu</td>
                <td>
                    <select value="" name="qty" class="qty form-control">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <input type="text" value="750" class="price form-control" disabled="true">
                </td>
                <td align="center">
                    <h4><span id="amount" class="amount">Rp. 0</span></h4>
                </td>
            </tr>

        </tbody>
        </table>
Kode Javascript untuk menghitung Harga * Jumlah Beli, dan Total Pembelian
        <SCRIPT>
            $(document).ready(function(){
                total();
                $('.qty').change(function() {
                    total();
                });
                $('.amount').change(function() {
                    total();
                });               
            });

            function total()
            {
                var sum = 0;
                $('#penjualan > tbody  > tr').each(function() {
                    var qty = $(this).find('option:selected').val();
                    var price = $(this).find('.price').val();
                    var amount = (qty*price)
                    sum+=amount;
                    $(this).find('.amount').text(''+amount);
                });
                $('.total').text(sum);
            }
        </SCRIPT>
 
Agar terlihat seperti hasil akhir diatas disini menggunakan bootsrap untuk tampilan tabelnya, dan untuk proses dari kode diatas adalah tabel yang dibuat memiliki id dengan nama #penjualan, kemudian untuk pemilihan jumlah beli memiliki class qty dan harga memiliki class price, dimana apabila qty berubah maka akan terjadi perubahan di subtotal dan grandtotal.
Read more

Cara Membuat Fungsi Multiple Insert di YII

Cara Membuat Fungsi Multiple Insert di YII - Multiple Insert merupakan salahsatu cara / metode untuk menyimpan data banyak dalam hanya dalam 1 kali proses, dimana kita bisa input data-data hanya 1 kali klik ini ditujukan untuk membuat fungsionalitas agar efektif dan efisien.
Salahsatu cara yang bisa digunakan untuk membuat fungsi multipe insert ini adalah sebagai berikut, salahsatu contoh study kasus disini akan menyimpan 2 data aktivitas saya dalam waktu yang bersamaan ke dalam 1 tabel bernama activity:

Pertama
Membuat Fungsi tambahan di dalam folder component yang ada di YII, dan beri nama multiplemugi.php
<?php
class Multiplemugi
{
    public static function insert($table, $array_columns)
    {
        $connection = Yii::app()->db;
        $sql = '';
        $params = array();
        $i = 0;
        foreach ($array_columns as $columns) {
            $names = array();
            $placeholders = array();
            foreach ($columns as $name => $value) {
                if (!$i) {
                    $names[] = $connection->quoteColumnName($name);
                }
                if ($value instanceof CDbExpression) {
                    $placeholders[] = $value->expression;
                    foreach ($value->params as $n => $v)
                        $params[$n] = $v;
                } else {
                    $placeholders[] = ':' . $name . $i;
                    $params[':' . $name . $i] = $value;
                }
            }
            if (!$i) {
                $sql = 'INSERT INTO ' . $connection->quoteTableName($table)
                . ' (' . implode(', ', $names) . ') VALUES ('
                . implode(', ', $placeholders) . ')';
            } else {
                $sql .= ',(' . implode(', ', $placeholders) . ')';
            }
            $i++;
        }
        $command = Yii::app()->db->createCommand($sql);
        return $command->execute($params);
    }
}
Kedua
Membuat Fungsi di Controller / Model, sebagai contoh disini saya akan membuat function di model untuk menyimpan banyak data hanya dengan 1 kali panggil:
public function actionTesting(){
$rows = array(
    array(
        'created_date' => date('Y-m-d h:i:s'),
        'type' => '1',
        'description' => 'Sip',
        'activity_id' => '1',
        'user_id' => '1',
        'point' => '1',
        'status' => '1',
        ),
    array(
        'created_date' => date('Y-m-d h:i:s'),
        'type' => '2',
        'description' => 'Ok',
        'activity_id' => '2',
        'user_id' => '2',
        'point' => '2',
        'status' => '2',
        ),
    );

Multiplemugi::insert(Activities::model()->tableName(), $rows);
}

Penjelasan: 
Terdapat fungsi yang bernama actionTesting() didalam fungsi ini terdapat aksi untuk menyimpan data berupa array yang dimana fungsi Multiplemugi::insert() memanggil class Multiplemugi dengan method insert() yang berada di folder component tadi.
Kemudian Activities::model()->tableName() merupakan fungsi untuk memanggil nama tabel yang akan disimpan yang cukup memanggil nama modelnya saja. Pada model activity terdapat struktur tabel seperti berikut:

Struktur Tabel Activities

2 Data Masuk ke Database Bersamaan dengan Berbeda ID
Read more

Membuat dan Memanggil Fungsi Query SQL di YII

3 Langkah Membuat dan Memanggil Fungsi Query SQL di YII - Structure Query Language atau SQL fungsionalitas khusus yang dirancang untuk mengakses data di dalam database yang berelasional. YII telah menyediakan fungsi untuk dapat menggunakan / memanggil query sql yang dapat di simpan di controller / model / views sesuai kebutuhan, untuk penggunaan query SQL ini sangat sederhana seperti berikut, sebagai sample saya menyimpan fungsi ini di model dan menampilkannya di views.

Pertama
Buat Fungsi baru khusus untuk menampilkan data sebagai contoh disini saya berencana menampilkan posting terbaru dan posting terpopuler:

Contoh Query 1: Menampilkan Postingan Terakhir menjadi Terbaru
public static function getLastPost(){
$sql = "SELECT * FROM post ORDER BY created_date DESC LIMIT 3";
$command = YII::app()->db->createCommand($sql);
return $command->queryAll();
}

Contoh Query 2: Menampilkan Postingan Terpopuler berdasarkan Views
public static function getPopular(){
$sql = "SELECT * FROM post ORDER BY views DESC LIMIT 3";
$command = YII::app()->db->createCommand($sql);
return $command->queryAll();
}
Kedua
Anda cukup memanggil fungsi tempat dimana function itu disimpan, untuk contoh fungsi ini saya simpan di model Post, sehingga pemanggilan fungsinya menjadi Post::getLastPost() atau Post::getPopular()

Contoh Pemanggilan Fungsi Query dari Model ke Views
<?php
foreach (Post::getLastPost() as $data) {
$data['title'];
}
?>
<?php
foreach (Post::getPopular() as $data) {
$data['title'];
}
?>

Ketiga
Tinggal tambahkan CSS / template html agar tampilan lebih tampan dan enak dilihat, berikut sample hasil akhir penggunaan fungsi yang di simpan di model dan ditampilkan di views.

Read more

Modifikasi Pagination pada CActiveDataProvider YII

Cara Modifikasi Pagination pada CActiveDataProvider YII - Pagination merupakan salahsatu hal penting apabila kita mempunyai banyak data, dan ingin membatasi jumlah data yang tampil pada halaman ini, jadi dengan menggunakan Pagination anda bisa menampilkan sebagian atau beberapa data yang dapat di tampilkan pada widget ClistView dan CGridView.

Penerapan Pagination pada yii bisa diimplementasikan pada widget tabel atau list view, dan apabila anda menggunakan CActiveDataProvider untuk menampilkan data dengan widget tersebut anda bisa memberikan ukuran berapa jumlah data yang akan muncul

Secara default, CActiveDataProvider membatasi jumlah data yang tampil sebanyak 10 records, bagaimana jika anda ingin menampilkan 4 data atau bahkan 2000 data per Pagination, berikut ini adalah script function default CActiveDataProvider tanpa modifikasi Pagination

public function actionIndex()
{
$dataProvider=new CActiveDataProvider('Users');
$this->render('index',array(
'dataProvider'=>$dataProvider,
));
}

Berikut script yang sudah dimodifikasi, jadi kita hanya menampilkan 4 records saja per halaman, perhatikan tanda yang berwarna merah dibawah ini:
public function actionIndex()
{
$dataProvider=new CActiveDataProvider('Users',array('pagination'=>array(
'pageSize'=>'4',
))
);
$this->render('index',array(
'dataProvider'=>$dataProvider,
));
}

Untuk implemtasinya cukup memanggil fungsi pagination dan pagesize dan berikut screenshot sebelum menggunakan pagiation yang belum dimodifikasi
Default, Menampilkan 10 Data per Halaman


Screenshot setelah menggunakan pagiation yang telah dimodifikasi
Hanya menampilkan 4 data per halaman

Read more

Mengambil Data Ketinggian Gelombang Laut dari BMKG dengan PHP

Cara Mengambil Data Ketinggian Gelombang Laut dari BMKG dengan PHP - Seperti yang telah diketahui pada postingan sebelumnya tentang informasi bagaimana cara mengambil data-data perkiraan cuaca dari BMKG untuk daerah di indonesia.

Pada postingan kali ini akan mempublikasikan script untuk menampilkan data ketinggian gelombang laut yang bersumber dari BMKG. Dimana informasi ini sangat bermanfaat untuk masyarakat yang merencanakan liburan atau sedang berdekatan dengan beberapa perairan dekat pulau.

Untuk menampilkan data ketinggian gelombang yang bersumber dari BMKG, caranya cukup copy paste script berikut, maka otomatis data akan muncul berdasarkan data yang diolah oleh BMKG.GO.ID

 <?php
// LOAD XML DATA GELOMBANG TINGGI
$list_cuaca = new SimpleXMLElement('http://data.bmkg.go.id/daerah_gelombang_tinggi.xml', null, true);
$mulai = $list_cuaca->Tanggal->Mulai;
$berakhir = $list_cuaca->Tanggal->Sampai;
?>
<h3>Data Ketinggian Gelombang Laut</h3>
<h5>Tanggal <?php echo $mulai; ?> sampai <?php echo $berakhir; ?></h5>
<table class="table table-hover">
<thead>
<tr style="background-color:#ffd740; color: #000; font-size:16px;">
<th>KETINGGIAN GELOMBANG</th>
<th>LOKASI DAERAH</th>
</tr>
</thead>
<tbody>
<?php foreach($list_cuaca->Isi->Row as $cuaca){ ?>
<tr>
<td><strong><?php echo $cuaca->Tinggi; ?></strong></td>
<td><strong><?php echo strtoupper($cuaca->Daerah); ?></strong></td>
</tr>
<?php } ?>
</tbody>
</table>
Read more