Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Menjumlahkan Nilai di Kolom Baru di Aplikasi Web dari PHPMaker

Mudahnya Menjumlahkan Nilai di Kolom Baru di Aplikasi Web dari PHPMaker

oleh 47 Komentar

Sering kali seorang Web Developer dihadapkan kepada situasi di mana dia harus menambahkan kolom baru pada tabel yang terdapat di halaman List. Kolom baru ini berisi nilai yang tidak diambil dari dalam Database, tetapi (misalnya) dari hasil perhitungan kolom lain. Jadi, nilainya akan dibangkitkan bersamaan dengan saat tabel tersebut diproses oleh sistem lalu ditampilkan ke browser Pengguna.

Tidak terkecuali juga dengan Aplikasi Web yang dihasilkan oleh PHPMaker, pasti pernah mengalami tantangan ini. Yang menarik adalah, business-logic tersebut ternyata sangat mudah sekali diimplementasikan pada Aplikasi Web yang dihasilkan oleh PHPMaker, dibandingkan dengan Aplikasi Web yang dibuat secara manual ataupun dengan metode pengembangan lainnya. Mengapa? Karena Web Developer cukup hanya menambahkan sedikit kode saja dari bagian Server Events dan Client Scripts.

Tentu Anda penasaran ingin mengetahui caranya bukan? Jangan khawatir, karena di artikel ini kita akan mengupas tuntas langkah-langkahnya secara detail, bagaimana mengimplementasikan kebutuhan ini melalui sebuah project PHPMaker yang sangat sederhana menggunakan sebuah contoh Database MySQL dengan sebuah tabel saja di dalamnya.

Dalam contoh ini, katakanlah kita akan menampilkan nilai pada kolom yang baru tersebut berdasarkan hasil perhitungan dari kolom yang sudah ada sebelumnya. Selanjutnya, kita akan menampilkan hasil penjumlahan (TOTAL) nilai pada kolom baru tadi di bagian bawah tabel pada halaman List.

Silahkan ikuti langkah-langkah berikut dengan teliti!

  1. Pertama sekali, buatlah sebuah database MySQL, misalkan beri nama dengan customcolumn.
  2. Jalankan script SQL berikut dalam database yang baru saja dibuat tadi untuk menghasilkan sebuah tabel bernama table1 dan beberapa Record di dalamnya:

    -- ----------------------------
-- Table structure for table1
-- ----------------------------
DROP TABLE IF EXISTS `table1`;
CREATE TABLE `table1` (
  `Kode` int(255) NOT NULL AUTO_INCREMENT,
  `Description` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`Kode`)
) ENGINE=MyISAM AUTO_INCREMENT=8 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of table1
-- ----------------------------
INSERT INTO `table1` VALUES ('1', 'One');
INSERT INTO `table1` VALUES ('2', 'Two');
INSERT INTO `table1` VALUES ('3', 'Three');
INSERT INTO `table1` VALUES ('4', 'Four');
INSERT INTO `table1` VALUES ('5', 'Five');
INSERT INTO `table1` VALUES ('6', 'Six');
INSERT INTO `table1` VALUES ('7', 'Seven');
  3. Seperti biasa, buat sebuah project PHPMaker baru, lalu hubungkan ke Database customcolumn tadi.
  4. Pastikan di panel Database sebelah kiri, Anda sudah memberi tanda centang pada satu-satunya tabel yang ada di sana.
  5. Sekarang klik tab Fields, lalu klik field Description. Pilih COUNT dari kolom List Page -> Aggregate. Tujuannya, untuk membuat fungsi perhitungan jumlah Record pada kolom Description di halaman List.

    Langkah ini sebenarnya hanya trik untuk menampilkan baris di bagian bawah tabel. Jadi, baris tersebut merupakan tempat untuk meletakkan hasil perhitungan jumlah pada kolom baru yang akan kita buat di langkah selanjutnya. Oleh karena itu, pastikan Anda sudah melakukan langkah ini dengan benar.

  6. Sampai di sini, kita sudah selesai melakukan pengaturan yang diperlukan pada sisi Field. Selanjutnya, kita melangkah ke bagian yang paling mengasyikkan, yaitu menambahkan hanya sedikit kode saja di bagian Server Events dan Client Scripts.

    Lebih tepatnya, hanya pada dua buah server event dan sebuah client script. Kodenya pun hanya beberapa baris saja. Lagi-lagi, semoga Anda tidak kaget dengan kemampuan PHPMaker ini! Betapa simpel sekaligus dahsyatnya!

  7. Sekarang, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode ini ke dalam server event ListOptions_Load yang terdapat di bawah Server Events -> Table-Specific -> List Page, sehingga kode selengkapnya seperti ini:

    // ListOptions Load event
function ListOptions_Load() {
	$opt = &$this->ListOptions->Add("new");
	$opt->Header = "New";
	$opt->OnLeft = FALSE; // Link on right
	$GLOBALS["Custom_Total"] = 0;
}

    Fungsi dari kode ini adalah untuk mempersiapkan sebuah kolom baru dengan ID kolom bernama new dan tulisan di bagian atas (header) kolom bernama New dan posisinya di sebelah kanan. Sedangkan di baris terakhir, kita juga mendeklarasikan sebuah variabel global yang akan digunakan untuk menghitung nilai di kolom yang baru ini nantinya.

  8. Sekarang, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode ini ke dalam server event ListOptions_Rendered yang terdapat di bawah Server Events -> Table-Specific -> List Page, sehingga kode selengkapnya seperti ini:

    // ListOptions Rendered event
function ListOptions_Rendered() {
	if ($this->RowType <> EW_ROWTYPE_AGGREGATE) {
		$this->ListOptions->Items["new"]->Body = ($this->Kode->CurrentValue * 2);
		$GLOBALS["Custom_Total"] = $GLOBALS["Custom_Total"] + $this->ListOptions->Items["new"]->Body; 
	}
}

    Ini merupakan kode utama dari yang sedang kita bahas di artikel ini. Fungsi dari kode ini adalah untuk menampilkan data di kolom baru dengan ID kolom new. Nilainya merupakan hasil perhitungan dari kolom atau field Kode dikalikan dengan 2. Ini hanya contoh sederhana saja.

    Sedangkan di baris terakhir, kita menggunakan variabel global yang sebelumnya sudah dideklarasikan pada server event ListOptions_Load untuk menampung hasil perhitungan nilai di setiap baris.

    Jadi, server event ListOptions_Rendered merupakan server event yang disediakan oleh PHPMaker untuk memudahkan Web Developer memproses nilai di baris pada kolom baru yang dibuat dengan menggunakan server event ListOptions_Load. Kedua server event ini sangat berkaitan erat.

  9. Langkah selanjutnya, kita akan menambahkan hanya tiga baris kode jQuery berikut ke dalam Startup Script yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> List Page:

    $(document).ready(function() {
    $("#elf_table1_new").html("<?php echo $GLOBALS["Custom_Total"]; ?>");
});

    Fungsi dari kode ini untuk menampilkan hasil perhitungan total nilai pada kolom yang baru tadi.

  10. Sekarang pastikan Anda sudah menyimpan hasil pekerjaan Anda pada project PHPMaker tersebut, lalu generate semua file script seperti biasa dengan menggunakan PHPMaker.

Setelah Anda selesai men-generate file-file script, maka silahkan jalankan Aplikasi Web tersebut melalui browser. Klik satu-satunya menu yang ada, yaitu table1, maka seharusnya sekarang Anda melihat ada sebuah kolom baru di bagian paling kanan yang bernama New. Nilai di kolom baru ini merupakan hasil perkalian nilai di kolom Kode dengan nilai 2.

Di bagian paling bawah tabel tersebut Anda akan melihat baris yang menampilkan hasil perhitungan, masing-masing di bawah kolom Description yang menunjukkan banyaknya Record, dan di bawah kolom New yang menunjukkan total nilai di kolom New tersebut. Tentu saja Anda dapat menambahkan Record baru untuk melihat perubahan pada baris TOTAL tersebut.

Lagi-lagi, untuk kesekian kalinya, dapat disimpulkan bahwa PHPMaker bukanlah hanya sekedar Tools PHP Code Generator yang selama ini masih banyak dianggap remeh atau sebelah mata oleh Web Developer. PHPMaker justru dapat membantu Anda untuk mengimplementasikan business-logic maupun business-process tertentu dengan sangat mudah, cepat, dan lagi-lagi menyenangkan! PHPMaker merupakan partner setia Anda yang sangat diandalkan kemampuan dan kefleksibelitasannya.

Satu lagi dari sekian banyaknya bukti yang meyakinkan kita bahwa PHPMaker sudah merupakan andalan Web Developer untuk saat ini dan trend di masa yang akan datang. 🙂

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com dan ilovephpmaker.com.

Comments

  1. Bang Masino…
    saya coba mengimplementasikan artikel yg ini http://www.masinosinaga.com/phpmaker/mudahnya-mengelola-data-yang-melibatkan-lebih-satu-table-melalui-phpmaker/
    dgn tutorial diatas.

    jadi beg-gini :
    sy akan menambahkan kolom baru pd List Barang yaitu : (Jumlah) Barang yang ada pada tabel jual_barang / jumlah barang yg laku terjual.
    sy sdh coba merubah kode pd tutorial di atas jadi sperti ini :

    function ListOptions_Rendered() {
	// Example: 
	//$this->ListOptions->Items["new"]->Body = "xxx";
$value = ew_ExecuteScalar("SELECT Count(jual_barang.kode_barang)
FROM barang INNER JOIN jual_barang ON barang.Kode_Barang = jual_barang.kode_barang
WHERE barang.Kode_Barang=($this->Kode_Barang->CurrentValue) 
GROUP BY barang.Kode_Barang;

	 if ($this->RowType <> EW_ROWTYPE_AGGREGATE) {
		$this->ListOptions->Items["new"]->Body = ($this->$value);
		$GLOBALS["Custom_Total"] = $GLOBALS["Custom_Total"] + $this->ListOptions->Items["new"]->Body;
	}
}

    namun malah muncul pesan error sperti ini : Catchable fatal error: Object of class cField could not be converted to string …

    kira2 apa penyebabnya ?
    trimakasih.

    Balas

    • Penyebabnya karena kode yang ini:

      $value = ew_ExecuteScalar("SELECT Count(jual_barang.kode_barang)
FROM barang INNER JOIN jual_barang ON barang.Kode_Barang = jual_barang.kode_barang
WHERE barang.Kode_Barang=($this->Kode_Barang->CurrentValue)
GROUP BY barang.Kode_Barang;

      Seharusnya seperti ini (diasumsikan nama field yang valid adalah Kode_Barang dan bukan kode_barang):

      $value = ew_ExecuteScalar("SELECT Count(jual_barang.Kode_Barang)
FROM barang INNER JOIN jual_barang ON barang.Kode_Barang = jual_barang.Kode_Barang
WHERE barang.Kode_Barang='".$this->Kode_Barang->CurrentValue."' GROUP BY barang.Kode_Barang");

      Tolong Anda perhatikan penulisan sintaks nama field, meskipun Anda menggunakan sistem operasi Windows, selalulah disiplin menuliskan nama field (perhatikan huruf besar dan kecilnya!).

      Balas

    • Lebih tepatnya bukan memanggil table, tapi untuk mengakses id dari elemen field yang menyertakan nama table dan field-nya. Prefix “elf” merupakan singkatan dari “elemen field”, sedangkan dua parameter berikutnya masing-masing merupakan nama table dan field-nya. Itu format standar yang ditetapkan oleh PHPMaker.

      Balas

        • setelah saya terapkan ternyata muncul error “Notice: Undefined index: Custom_Total in C:\xampp\htdocs\sbms11\namalist.php on line 1677” setelah sy cek ternyata line tsb adalah “$GLOBALS[“Custom_Total”] = $GLOBALS[“Custom_Total”] + $this->ListOptions->Items[“new”]->Body;” salahnya dmn ya?
          nama database = test
          nama tabel = nama
          field = namaid, nama

          Balas

            • sy menggunakan tips dari “http://www.masinosinaga.com/phpmaker/mudahnya-menampilkan-total-di-kolom-baru-pada-aplikasi-web-dari-phpmaker/”

              	function ListOptions_Load() {
		// Example:
		//$opt = &$this->ListOptions->Add("new");
		//$opt->Header = "xxx";
		//$opt->OnLeft = TRUE; // Link on left
		//$opt->MoveTo(0); // Move to first column
		//hns-totalwaktu

		$opt = &$this->ListOptions->Add("new");
		$opt->Header = "New";
		$opt->OnLeft = FALSE; // Link on right
		$GLOBALS["Custom_Total"] = 0;
	}	

	// ListOptions Rendered event
	function ListOptions_Rendered() {

		// Example: 
		//$this->ListOptions->Items["new"]->Body = "xxx";

		if ($this->RowType <> EW_ROWTYPE_AGGREGATE) {
			$this->ListOptions->Items["new"]->Body = ($this->userid->CurrentValue * 4);
			$GLOBALS["Custom_Total"] = $GLOBALS["Custom_Total"] + $this->ListOptions->Items["new"]->Body;
		}
		$this->ListOptions->Items["new"]->Footer = $GLOBALS["Custom_Total"];
	}
              Balas

              • Itu sebenarnya bukan pesan error, tapi hanya notice (pemberitahuan) saja.

                Ubah kode ini:

                $GLOBALS["Custom_Total"] = $GLOBALS["Custom_Total"] + $this->ListOptions->Items["new"]->Body;

                menjadi:

                @$GLOBALS["Custom_Total"] = @$GLOBALS["Custom_Total"] + $this->ListOptions->Items["new"]->Body;

                atau Anda bisa juga Google “how to fix noticed undefined index in php”.

                Balas

  5. maaf Bang Masino..
    sy sudah coba dengan
    error_reporting(E_ALL ^ E_NOTICE); dan error_reporting(0); di akhir kode
    dan sy juga sudah coba dgn function isset() tp notice msh muncul
    mohon petunjuk
    atau sy yg salah dlm penulisan?

    Balas

  6. pagi pak, saya ingin tanya..
    kalau misalkan ada data:
    table pendapatan, dengan field id, uang_masuk, tabungan, uang_parttime, tgl, totalmasukan
    data kedua:
    table pembelian, dengan field id, namabeli_barang, jumlahbrg, harga, tgl, totaluang_pembelian, sisa_uangtabungan
    – bagaimana cara menambahkan table 1 yaitu uang_masuk, tabungan, uang_parttime masuk kedalam field totalmasukan
    – bagaimana cara menambahkan table 2 yaitu namabeli_barang, jumlahbrg, harga, masuk kedalam field totaluang_pembelian
    – bagaimana cara pengurangan totalmasukan – totaluangbeli masuk kedalam sisa_uangtabungan

    terimakasih.

    Balas

  8. bang, kalo di database, gimana cara menggabungkan isi dari 2 kolom yang berada dalam 1 tabel?? misalkan saya membuat tabel barang, di tabel barang ada 2 kolom jumlah barang dan biaya. gimana cara menjumlahkan data di 2 kolom tsb??

    Mohon penjelasannya.
    Makasih.

    Balas

  9. pagi bang

    sudah ane coba scriptnya, work bang :D, tapi bang ane khan coba2 ngga dikalikan, tapi ane bagi 2
    hasilnya ada koma bang, :D, spt ini xxx.xxxxx
    gimana cara ngilangin koma nya bang

    makasih ye bang

    Balas

  10. pak tanya lagi 🙂 saya mengambil contoh output dari sini http://www.masinosinaga.com/phpmaker/mudahnya-menghitung-saldo-per-transaksi-di-aplikasi-web-dari-phpmaker/ saya modifikasi dikit
    +—-+———————-+——————
    | ID | Tanggal | A | B | C |
    +—————————+——————-
    | 1 | 2014-12 | 100 | 0 | 100 |
    | 2 | 2014-12 | 250 | 0 | 350 |
    | 3 | 2014-12 | 0 | 40 | 310 |
    +—-+———————-+——————
    | | 350 | 40 | 460 | total
    +—————————+——————-
    | | 116 | 13 | 153 | rata-rata
    ————————————————

    kalau dari contoh diatas itukan menambah kolom pak , tapi bagaimana cara menambah footer table kebawah untuk hasil nilai rata-rata itu pak.

    makasih pak

    Balas

Trackbacks

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.