Quantcast
Channel: Masino Sinaga
Viewing all 176 articles
Browse latest View live

Mudahnya Menimpa Pesan Error Duplicate Primary Key dari PHPMaker

$
0
0

Ketika Pengguna sedang menambah data di Aplikasi Web yang Anda hasilkan dengan PHPMaker, apalagi jika menggunakan fitur Copy, maka ada kemungkinan terjadi error duplikat data. Hal ini menyebabkan proses penyimpanan data akan otomatis dibatalkan oleh sistem.

Jika error duplikat data itu terjadi, maka pesan yang ditampilkan sangatlah standar. Bahkan cenderung terlalu teknis sehingga sering membingungkan si Pengguna tadi.

Katakanlah di sebuah table pada database MySQL, Primary Key diset pada field Code, dan nilai data yang disalin pada field ini adalah 003, maka pesan yang ditampilkan seperti ini:

Duplicate primary key: '`Code` = '003''

Jelek sekali pesan tersebut, ya? Apalagi di sana disertakan nama field aslinya. Pasti ada yang bilang “tidak user-friendly“.

Nah, untuk mengganti isi dari pesan tersebut, maka kita bisa melakukannya dengan menaruh dua baris PHP berikut ke dalam server event Page_Load yang terdapat di bawah lokasi Server Events -> Table-Specific -> Add/Copy Page, sehingga selengkapnya menjadi seperti ini:

// Page Load event
function Page_Load() {
	//echo "Page Load";
	global $objForm;
	Language()->setPhrase("DupKey", "Ada nilai yang duplikat coy, ini dia: " . $objForm->GetValue("x_Code"));
}

Mungkin Anda bertanya, mengapa harus ditaruh di server event Page_Load? Jawabannya, karena server event inilah yang dijalankan sebelum seluruh nilai frase untuk halaman tersebut ditampilkan.

Itu artinya, kita sebagai Web Developer masih memiliki kesempatan untuk mengganti nilai frase DupKey yang menghasilkan pesan teknis di atas tadi.

Selain itu, kita ternyata bisa juga menampilkan nilai pada field Code tersebut. Caranya, dengan menggunakan method GetValue milik object Form. Jadi, isi pesan di atas tadi akan berubah menjadi seperti ini:

Ada nilai yang duplikat coy, ini dia: 003

Betapa mudah, cepat, dan menyenangkan sekali, bukan? PHPMaker, gitu lho! 😉


Mudahnya Memvalidasi Data Menggunakan Fields jQuery Plugin dari PHPMaker

$
0
0

Ada yang masih ingat dengan Fields jQuery Plugin di PHPMaker? Fitur ini mulai ada sejak versi 12. Tujuan utamanya untuk memudahkan Web Developer saat mengambil dan/atau memvalidasi data yang diinput oleh Pengguna Akhir Aplikasi Web.

Mungkin ada yang bertanya, apa yang menyebabkan menjadi mudah? Jawabannya, karena Fields jQuery Plugin menyederhanakan cara mengakses nilai dari suatu elemen di form. Tidak seperti jika kita menggunakan kode jQuery Native (asli) yang mengandalkan id dari elemen yang bertalian, maka dengan menggunakan Fields jQuery Plugin, kita tidak perlu lagi mengandalkan id dari elemennya. Kita dapat mengakses nilai dari suatu elemen berdasarkan nama asli Field-nya.

Seperti yang kita ketahui, id dari suatu elemen input di suatu Form yang di-generate oleh PHPMaker selalu diawali dengan prefix x_. Jika menggunakan kode jQuery Native, maka id elemen yang diawali dengan x_ tadi harus selalu kita gunakan. Bagi sebagian Web Developer mungkin hal ini cukup merepotkan, karena harus mengingat-ingat prefix tadi. Bagi sebagian Web Developer mungkin tidak menjadi masalah.

Meskipun demikian, fitur Fields jQuery Plugin ini tentu saja tetap sangat membantu. Sebagai Web Developer kita bahkan bisa menganalog-kan style validasi data menggunakan kode jQuery melalui bagian Client Scripts tadi menjadi hampir sama dengan kode PHP melalui Server Events.

Katakanlah kita ingin menambahkan validasi data terhadap dua Field sekaligus saat Pengguna sedang menambah data. Jika data pada Field_Satu tidak ada nilainya, dan data pada Field_Dua ada nilainya, maka sistem akan menampilkan pesan peringatan kepada Pengguna supaya mengisi data terlebih dulu di Field_Satu. Jika tidak, maka sistem tidak akan pernah menyimpan data tersebut.

Apabila kita menggunakan kode di sisi server, maka kita bisa menggunakan server event Row_Inserting yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode PHP selengkapnya menjadi kira-kira seperti ini:

// Row Inserting event
function Row_Inserting($rsold, &$rsnew) {
    // Enter your code here
    // To cancel, set return value to FALSE
    if ( ($rsnew["Field_Satu"] == "") &&  ($rsnew["Field_Dua"] <> "") ) {
        $this->setFailureMessage("Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
        return FALSE;
    }
    return TRUE;
}

Sekarang mari kita bandingkan dengan kode di sisi client. Cukup tambahkan kode berikut ke dalam Form_CustomValidate yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page, sehingga kode selengkapnya menjadi seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
 	// Your custom validation code here, return false if invalid.
 	var $row = $(this).fields();
	if ($row["Field_Satu"].value() == "" && $row["Field_Dua"].value() != "")
 		return this.OnError($row["Field_Satu"], "Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
 	return true;
}

See? Sudah lihat perbandingan antara kode PHP di sisi server dan kode jQuery di sisi client itu, ‘kan? Sangat mirip style keduanya, khususnya jika menggunakan Fields jQuery Plugin di kode barusan. 🙂

Tidak hanya itu saja. Ternyata dengan menggunakan Fields jQuery Plugin, kita dapat mengabaikan tipe control yang digunakan oleh elemen tersebut. Dari contoh kode barusan, maka kita cukup hanya mengambil nilai dari property value milik Fields jQuery Plugin.

Sekarang bandingkanlah jika menggunakan kode Javascript atau jQuery Native, maka kita harus memperhatikan tipe control-nya. Contoh, jika kedua tipe control tadi adalah CheckBox, maka kode di atas menjadi kira-kira seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
 	// Your custom validation code here, return false if invalid.
  	elm_Field_Satu = this.GetElements("x_Field_Satu[]");
 	elm_Field_Dua = this.GetElements("x_Field_Dua[]");
 	if ( (elm_Field_Satu && !ew_IsHidden(elm_Field_Satu) && !ew_HasValue(elm_Field_Satu)) && (elm_Field_Dua && !ew_IsHidden(elm_Field_Dua) && ew_HasValue(elm_Field_Dua)) )
 		return this.OnError(elm_Field_Satu, "Field Satu tidak boleh kosong jika Field Dua memiliki nilai.");
 	return true;
}

Karena kita menggunakan kode Javascript atau jQuery Native, dan kedua elemen menggunakan control CheckBox dalam contoh di atas misalnya masing-masing tipe-nya enum(‘Y’, ‘N’), maka id elemen di atas memiliki akhiran []. Sedikit agak repot jika menggunakan kode Javascript atau jQuery Native.

O iya, sebagai bocoran saja. Kode validasi Javascript yang terakhir ini sebenarnya saya peroleh dari kode validasi di sisi client yang di-generate oleh PHPMaker. Tentu saja kita harus berpedoman kepada kode yang dihasilkan oleh PHPMaker tadi jika ingin menggunakannya di bagian Form_CustomValidate.

So? Kesimpulannya, usahakanlah untuk selalu menggunakan Fields jQuery Plugin. Karena di samping lebih sederhana dan simpel, kita sebagai Web Developer tidak perlu lagi repot-repot menyesuaikan kode untuk id elemen sesuai dengan tipe control yang digunakan oleh Field tersebut.

Memvalidasi Bulan dan Tahun pada 2 Buah Tanggal Harus Sama dari PHPMaker

$
0
0

Pasti ada begitu banyak business-logic yang bisa terjadi dalam sebuah Aplikasi Web yang terkait dengan data Tanggal. Salah satunya adalah memastikan data Bulan dan Tahun pada dua buah Tanggal harus sama di form Pencarian pada halaman List. Jika tidak, maka sistem tidak dapat melanjutkan proses.

Katakanlah di sebuah table, ada sebuah field bernama Tanggal dengan tipe date (bukan datetime). Sebagai Web Developer, kita ingin ketika Pengguna mencari berdasarkan data Tanggal tadi, nilai Bulan dan Tahun pada range tanggal awal harus sama dengan nilai Bulan dan Tahun pada range tanggal akhir di field tadi.

Untuk itu, ada beberapa langkah yang harus kita lakukan dari dalam project PHPMaker.

Pertama, pastikan kita sudah mengaktifkan extension JSCalendar dari menu/lokasi berikut: Tools -> Extensions -> Type: Popup Calendar, dengan memberikan tanda centang pada kolom Enabled, lalu klik OK.

Kedua, pastikan kita sudah memberi tanda centang pada kolom Ext. Search dari lokasi tab Fields -> kolom List Page untuk field Tanggal tadi. Kemudian, masih pada lokasi yang sama tersebut, pastikan kita sudah memilih BETWEEN dari kolom Advanced Search Page -> Search Opr 1.

Ketiga, masih pada Fields setup tadi, dari panel Edit Tag, pastikan pilih DateTime (yyyy/mm/dd) di bawah lokasi ini: Validation -> Validate, dan beri tanda centang pada Use date/time picker. Lalu dari panel View Tag, pilih DateTime pada item Format, dan pilih yyyy/mm/dd pada bagian Date/Time name format.

Inti dari ketiga pengaturan tadi, supaya kita menampilkan field Tanggal ini pada form Pencarian yang terdapat di halaman List, dan meskipun hanya satu field Tanggal yang kita gunakan, maka PHPMaker nantinya akan men-generate dua textbox yang dilengkapi dengan icon kalender, sehingga ketika Pengguna memilih data tanggal, maka formatnya menjadi yyyy/mm/dd.

Keempat, saat yang ditunggu-ditunggu akhirnya tiba. Kita hanya perlu menambahkan sedikit kode jQuery berikut ke bawah lokasi: Client Scripts -> Table-Specific -> List Page -> Form_CustomValidate, sehingga kode selengkapnya menjadi seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
	// Your custom validation code here, return false if invalid.
	elmTanggal = this.GetElements("y_Tanggal");
  	var Bulan_Tahun_Awal = $("#x_Tanggal").val();
 	Bulan_Tahun_Awal = Bulan_Tahun_Awal.substr(0, 7);
  	var Bulan_Tahun_Akhir = $("#y_Tanggal").val();
  	Bulan_Tahun_Akhir = Bulan_Tahun_Akhir.substr(0, 7);
 	if (Bulan_Tahun_Awal != Bulan_Tahun_Akhir) {
  		return this.OnError(elmTanggal, "Bulan dan Tahun di Tanggal awal harus sama dengan Tanggal akhir.");
  	}
	return true;
}

Perhatikan kode di atas. Karena format Tanggal sudah kita sepakati yyyy/mm/dd, maka kita cukup mengambil 7 karakter pertama dari nilai Tanggal, yaitu dalam hal ini: yyyy/mm. Jika nilai Bulan dan Tahun di Tanggal range awal tidak sama dengan Bulan dan Tahun di Tanggal range akhir, maka tampilkan pesan error kepada Pengguna.

Setelah Anda men-generate semua file script dengan PHPMaker seperti biasa, saatnya menjalankan Aplikasi Web dari browser. Di halaman List, pastikan panel Pencarian sudah terbuka (expanded). Sekarang cobalah memilih data Tanggal yang nilai Bulan dan Tahun di range Tanggal awal tidak sama dengan nilai Bulan dan Tahun di range Tanggal akhir, lalu klik tombol Search atau Cari.

Sistem akan menampilkan pesan error kepada Pengguna tanpa melakukan HTTP Request. Setelah Pengguna mengklik tombol OK pada pesan tersebut, maka kursor akan fokus ke textbox Tanggal pada range akhir, sehingga Pengguna disarankan untuk memperbaiki data Tanggal pada range akhir.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂

Menghitung Tanggal Baru dari Periode Terpilih dengan Javascript dari PHPMaker

$
0
0

Sebagai Web Developer kita harus selalu siap mengimplementasikan business-logic yang terkait dengan perhitungan data Tanggal. Tidak hanya menggunakan kode PHP di sisi server saja, bahkan kita juga harus bisa menerapkannya lewat kode Javascript di sisi browser Client.

Katakanlah di Aplikasi Web yang dibuat dengan PHPMaker, Pengguna memilih data Tanggal Awal kemudian memilih salah satu dari tiga periode (bulanan, triwulanan, atau tahunan), maka data di Tanggal Akhir akan otomatis terisi. Jadi nilai Tanggal Akhir tadi akan otomatis terisi berdasarkan nilai periode yang dipilih oleh Pengguna tadi.

Pernah mengalami kesulitan ketika ingin menerapkan contoh seperti itu? Kini Anda tidak perlu khawatir lagi, karena jika Anda membangun Aplikasi Web dengan PHPMaker, hal itu bisa dihasilkan dengan sangat mudah, cepat dan menyenangkan.

Silahkan ikuti langkah-langkah berikut:

  1. Buat sebuah database baru di MySQL dengan nama date, lalu jalankan script berikut untuk membuat table baru yang bernama table1:
    CREATE TABLE `table1` (
      `ID` int(11) NOT NULL AUTO_INCREMENT,
      `Begin_Date` date DEFAULT NULL,
      `Periodic` enum('monthly','quarterly','yearly') DEFAULT NULL,
      `End_Date` date DEFAULT NULL,
      `Description` text,
      PRIMARY KEY (`ID`)
    ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
    
  2. Buat sebuah project PHPMaker baru dengan menggunakan database di atas, lalu klik object table1 dari panel Database.
  3. Klik field Begin_Date, lalu beri tanda centang pada item Required dan item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah yyyy/mm/dd dari bagian Validate.
  4. Klik field End_Date, lalu beri tanda centang juga pada item Required dan item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah yyyy/mm/dd dari bagian Validate.
  5. Klik field Periodic, lalu pastikan control Radio sudah terpilih dari panel Edit Tag, dan beri tanda centang pada item Required dari panel Edit Tag.
  6. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled untuk extension yang bernama JSCalendar, lalu klik tombol OK.
  7. Klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode jQuery berikut pada lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:
    $(document).ready(function() {
    	$('input[name=x_Periodic]:radio').click(function(){
    		var date = new Date($("#x_Begin_Date").val());
    		if($(this).attr("value")=="monthly"){
    			var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());			
    		} else if ($(this).attr("value") == "quarterly") {
    			var lastDay = new Date(date.getFullYear(), date.getMonth() + 3, date.getDate());
    		} else if ($(this).attr("value") == "yearly") {
    			var lastDay = new Date(date.getFullYear(), date.getMonth() + 12, date.getDate());
    		}
    		lastMonth = ( (lastDay.getMonth() + 1) < 10) ? '0' + (lastDay.getMonth() + 1) : (lastDay.getMonth() + 1);
    		lastDate = ( lastDay.getDate() < 10 ) ? '0' + lastDay.getDate() : lastDay.getDate();
    		var newDate =  lastDay.getFullYear() + '/' + lastMonth + '/' + lastDate;
    		if (isNaN(lastMonth) == false) $("#x_End_Date").val(newDate);
    	});
    });
    
  8. Terakhir, generate semua file script menggunakan PHPMaker seperti biasa.
  9. Setelah proses generate selesai, jalankan Aplikasi Web dari browser, lalu klik tombol Add (+) pada halaman List dari table1 tadi. Pada form Add, pilih Tanggal yang Anda inginkan dari bagian Begin Date, pilih salah satu Periodic, lalu perhatikan di bagian End Date. Seharusnya sekarang nilai Tanggal pada field End_Date sudah terisi sesuai dengan nilai Periodic yang terpilih.

Dari contoh kode Javascript di atas, ada beberapa hal yang bisa kita pelajari.

Pertama, untuk menghitung atau mendapatkan nilai Tanggal Baru berdasarkan nilai Tanggal Awal dan Periodic tertentu, kita bisa mengoptimalkan object Date Javascript yang terdapat di browser. Selanjutnya kita bisa mengambil nilai komponen Tahun, Bulan, dan Tanggal masing-masing dengan menggunakan method getFullYear, getMonth, dan getDate.

Kedua, nilai balikan dari method getMonth selalu berbasis nol (0). Contoh, jika nilai balikan adalah 0, maka itu artinya bulan 1, jika nilai balikan adalah 4, maka itu artinya bulan 5, dan seterusnya. Oleh karena itu, pastikan kita sudah menambahkan nilai satu sebelum menampilkan atau menggunakan hasilnya.

Ketiga, dengan kode tersebut, maka sistem akan otomatis menghitung nilai Tanggal Baru dengan Tanggal yang valid. Contoh, jika misalnya Tanggal di Begin Date adalah 2016/01/31, maka ketika nilai Periodic yang dipilih adalah monthly, nilai di bagian End Date adalah 2016/03/02, dan bukan 2016/02/31.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂

Menyembunyikan Field di Table Detail pada Halaman Master/Detail dari PHPMaker

$
0
0

Seperti yang kita ketahui, PHPMaker memiliki kemampuan untuk menampilkan data dari table Master dan data dari table Detail dalam satu halaman. Hal ini dikenal dengan istilah Master/Detail List di PHPMaker.

Ketika data Master dan Detail ditampilkan dalam satu halaman, sebenarnya yang ditampilkan saat itu adalah halaman List milik table Detail. Hanya saja, di bagian atas dari halaman List milik table Detail tadi, ditampilkan juga record dari table Master. Di sinilah cerdiknya PHPMaker mengoptimalkan object Master di halaman List milik table Detail.

Biasanya, field yang memiliki relasi antara table Master dan Detail sama-sama diikutsertakan di kedua bagian tersebut. Supaya lebih mudah dipahami, mari ambil contoh table Master orders, dan table Detail orderdetails. Baik di bagian Master maupun Detail, sama-sama menampilkan field OrderID.

Karena field OrderID ini sudah pasti nilainya sama di kedua bagian tadi, maka alangkah baiknya jika field tersebut disembunyikan pada halaman Master/Detail List tadi. Tapi, jika halaman orderdetailslist.php tadi ditampilkan tanpa menyertakan record Master-nya, maka field OrderID tersebut harus tetap ditampilkan.

Ingin tahu caranya? Cukup tambahkan kode PHP berikut ke dalam server event Page_Load yang terdapat di bawah Server Events -> Table-Specific -> List Page milik table orderdetails, sehingga kode selengkapnya menjadi seperti ini:

// Page Load event
function Page_Load() {
	//echo "Page Load";
	if (isset($_GET[EW_TABLE_SHOW_MASTER]) == "orders") {
		$this->OrderID->Visible = FALSE;
	}	
}

Sampai di sini kita sudah berhasil menghilangkan field OrderID di bagian table Detail.

Pertanyaan selanjutnya, bagaimana seandainya kita juga ingin menghilangkan field OrderID ini dari bagian table Master?

Cukup tambahkan kode PHP dan jQuery berikut ke dalam Startup Script yang terdapat di lokasi Client Scripts -> Table-Specific -> List Page milik table orderdetails:

<?php if (isset($_GET[EW_TABLE_SHOW_MASTER]) == "orders") { ?>
$(document).ready(function() {
	$("#r_OrderID").hide();
});
<?php } ?>

Perhatikanlah bahwa kita dapat meng-embed kode PHP ke dalam kode jQuery pada bagian Startup Script tadi. Demikian fleksibelnya PHPMaker menyediakan kerangka kerja yang dapat dioptimalkan oleh Web Developer untuk membangun Aplikasi Web dengan cepat, mudah, dan menyenangkan.

Kapan Harus Menggunakan Object $rsold dan $rsnew dari PHPMaker?

$
0
0

Ada empat server event yang sering digunakan oleh Web Developer untuk mengimplementasikan business-logic saat data sedang atau sudah berhasil ditambah atau diperbarui. Mereka adalah Row_Inserting, Row_Inserted, Row_Updating, dan Row_Updated.

Akhiran ing artinya sedang berlangsung, sedangkan akhiran ed sudah selesai berlangsung. Row_Inserting dan Row_Updating masing-masing artinya saat sistem sedang menambah dan saat sistem sedang memperbarui data ke Database. Sedangkan Row_Inserted dan Row_Updated masing-masing artinya saat sistem sudah selesai menambah dan memperbarui data ke Database.

Di keempat server event tersebut, masing-masing memiliki dua parameter, yaitu $rsold dan $rsnew. Arti dari kata rsold adalah recordset old, sedangkan rsnew adalah recordset new. Gampang kan?

Karena dari namanya demikian informatif, seharusnya kita tidak mengalami kesulitan lagi untuk membedakan keduanya, apalagi untuk menggunakannya. Object $rsold digunakan jika ingin mengambil nilai dari recordset yang lama, sedangkan object $rsnew jika ingin mengambil nilai dari recordset yang baru, atau jika ingin mengubah nilai recordset yang baru tadi.

Di server event Row_Inserting, kita akan lebih sering bermain-main dengan $rsnew. Mengapa? Karena semua data yang sedang ditambah pasti berasal dari recordset yang baru. kita menggunakan $rsold di server event ini saat menambah data dengan menggunakan cara Copy. Jika kita ingin mengetahui data aslinya, gunakan $rsold, karena data yang disalin tersebut disimpan di $rsold.

Contoh, di server event Row_Inserting kita ingin menyesuaikan nilai field Nama_Lengkap supaya saat disimpan ke Database semua karakter berubah menjadi karakter huruf besar semua, maka gunakan object $rsnew:

$rsnew["Nama_Lengkap"] = strtoupper($rsnew["Nama_Lengkap"]);

Di server event Row_Updating, kita harus berhati-hati membedakan antara $rsold dan $rsnew. Jika kita yakin data di suatu field saat Edit data tidak akan diubah (misalnya karena diset ReadOnly dari Fields setup), maka kita cukup menggunakan $rsold untuk mengambil nilai dari field tadi. Tapi jika kita yakin nilai di suatu field pada event ini pasti berubah saat proses Edit data, maka gunakan $rsnew.

Contoh, saat proses Edit data, nilai field Nama_Lengkap harus diubah nilainya berdasarkan gabungan dari Nama_Awal dan Nama_Akhir yang datanya tidak diubah pada server event Row_Updating, maka kodenya menjadi:

$rsnew["Nama_Lengkap"] = $rsold["Nama_Awal"] . " " . $rsold["Nama_Akhir"];

Dari contoh barusan, data pada field Nama_Awal dan Nama_Akhir tidak mengalami perubahan. Kita menggunakan object $rsold, yaitu ambil nilainya dari recordset yang lama.

Kadang-kadang kita tidak bisa memastikan apakah perubahan nilai di suatu field akan disimpan atau tidak, maka cara amannya kita bisa membandingkan antara nilai pada $rsold dan $rsnew, contoh:

$rsnew["Alamat"] = ($rsold["Alamat"] <> $rsnew["Alamat"]) ? $rsnew["Alamat"] : $rsold["Alamat"];

Perhatikanlah dari contoh barusan. Karena kita tidak bisa memastikan apakah field Alamat ini nantinya akan berubah atau tidak, tapi kita ingin saat proses Edit data Alamat harus tetap ikut disimpan, maka bandingkan nilai di recordset lama dan recordset baru. Jika tidak sama, maka itu artinya nilai pada recordset baru sudah berubah, lalu gunakan nilai tersebut. Sedangkan jika sama, maka tetap gunakan nilai pada recordset lama.

Dari penjelasan di kedua server event itu, seharusnya sudah bisa dibedakan $rsold dan $rsnew pada dua server event yang lainnya, yaitu Row_Inserted dan Row_Updated.

Betapa mudahnya, bukan? PHPMaker memang tidak ada lawannya! 😉

Begini Mudahnya Men-Debug Aplikasi Web yang Dihasilkan Oleh PHPMaker

$
0
0

Dalam fase development, Web Developer biasanya sering memeriksa perintah SQL yang dieksekusi saat menambah, mengubah, atau bahkan menghapus data di Aplikasi Web yang dibuatnya. Apalagi jika proses tersebut gagal dan menimbulkan error, maka hal pertama sekali yang dilakukan adalah menampilkan SQL terkait. Dari situ bisa menjadi awal untuk mengetahui penyebab gagalnya proses tadi.

Tidak terkecuali juga bagi Web Developer yang membangun Aplikasi Web dengan PHPMaker. Proses untuk memeriksa perintah SQL yang terjadi di suatu proses untuk mencari solusi terhadap gagalnya proses tadi dikenal dengan istilah Debug. PHPMaker sudah menyediakan pengaturan yang terkait dengan Debug. Kita bisa mengaktifkannya dari menu Tools -> Advanced Settings -> Project -> Debug.

Setelah pilihan Debug diaktifkan, maka pastikan untuk men-generate ulang semua file script. Lalu jalankan kembali Aplikasi Web dari browser seperti biasa. Informasi Debug akan ditampilkan di bagian bawah halaman.

Sekarang cobalah mengakses sebuah halaman List milik salah satu table yang kita inginkan. Di bagian paling bawah halaman, kita seharusnya melihat perintah SQL SELECT yang digunakan untuk mengambil data dari Database, diikuti oleh informasi waktu pemrosesan halaman.

Setelah itu, cobalah juga untuk mengakses halaman View yang menampilkan satu record dalam sebuah halaman. Sama seperti di halaman List, kita juga seharusnya melihat perintah SQL SELECT yang digunakan untuk melakukan query ke Database, beserta informasi waktu pemrosesan halaman.

Lakukan hal yang sama untuk mengakses halaman lainnya, yaitu: Advanced Search.

Sampai di sini, kita sudah berhasil men-debug Aplikasi Web, khususnya saat menampilkan halaman-halaman yang mengambil dan menampilkan data menggunakan SQL SELECT.

Pasti akan timbul pertanyaan, lalu bagaimana cara men-debug proses saat menambah, mengubah, atau menghapus record? Ahaaa! Pertanyaan yang bagus. Mengapa pertanyaan ini timbul? Karena SQL yang dieksekusi saat ketiga proses tadi tidak ditampilkan ketika kita mencoba proses penambahan, pengubahan, dan penghapusan data.

Mengapa tidak ditampilkan? Karena setelah ketiga proses itu terjadi, maka sistem secara standar akan mengarahkan Pengguna kembali ke halaman List yang menampilkan data. Jadi, dalam hal ini seolah-olah perintah SQL ketiga proses tadi langsung ditimpa dengan perintah SQL SELECT untuk menampilkan data terkait.

Pertanyaan selanjutnya, lalu bagaimana cara kita sebagai Web Developer bisa mengetahui perintah SQL untuk ketiga proses tadi? Gampang! Yang jelas, kita harus membatalkan setiap proses tadi dengan mengembalikan nilai FALSE. Sebelum perintah tadi, maka kita harus menampilkan perintah SQL-nya. Bagaimana caranya?

Beruntunglah kita jika membangun Aplikasi Web dengan PHPMaker, karena sudah tersedia method untuk menampilkan SQL yang terkait dengan masing-masing proses tadi. Kita bisa mengoptimalkan server event Row_Inserting, Row_Updating, dan Row_Deleting untuk membatalkan setiap proses tadi.

Untuk men-debug saat menambah data, maka kita cukup menambahkan dua baris kode berikut ke dalam server event Row_Inserting sebelum baris return TRUE:

// Row Inserting event
function Row_Inserting($rsold, &$rsnew) {
	// Enter your code here
	// To cancel, set return value to FALSE
	$this->setMessage($this->InsertSQL($rsnew)); // <-- jangan lupa hapus sebelum upload ke server production!
	return FALSE; // <-- jangan lupa hapus sebelum upload ke server production!
	return TRUE;
}

Untuk men-debug saat mengubah data, maka kita cukup menambahkan dua baris kode berikut ke dalam server event Row_Updating sebelum baris return TRUE:

// Row Updating event
function Row_Updating($rsold, &$rsnew) {
	// Enter your code here
	// To cancel, set return value to FALSE
	$this->setMessage($this->UpdateSQL($rsnew)); // <-- jangan lupa hapus sebelum upload ke server production!
	return FALSE; // <-- jangan lupa hapus sebelum upload ke server production!
	return TRUE;
}	

Untuk men-debug saat menghapus data, maka kita cukup menambahkan dua baris kode berikut ke dalam server event Row_Deleting sebelum baris return TRUE:

// Row Deleting event
function Row_Deleting(&$rs) {
	// Enter your code here
	// To cancel, set return value to False
	$this->setMessage($this->DeleteSQL($rs)); // <-- jangan lupa hapus sebelum upload ke server production!
	return FALSE; // <-- jangan lupa hapus sebelum upload ke server production!
	return TRUE;
}

Dari ketiga server event tadi, kita dapat menyimpulkan bahwa method yang digunakan oleh setiap proses tadi memiliki satu parameter, yaitu Recordset yang terdapat di setiap server event. Row_Inserting dan Row_Updating masing-masing menggunakan object $rsnew, sedangkan Row_Deleting menggunakan object $rs.

Setelah ketiga server event tersebut disesuaikan seperlunya seperti kode di atas, jangan lupa untuk men-generate ulang semua file script seperti biasa. Jalankan kembali Aplikasi Web dari browser, lalu cobalah untuk menambah, mengubah, atau menghapus data.

Ketika setiap proses tadi dilakukan, maka sistem masing-masing akan menampilkan informasi perintah SQL INSERT INTO, UPDATE, dan DELETE. Informasi ini berada di bagian atas form atau table, dan di bawah bagian breadcrumb untuk setiap halaman tadi. Di bawah perintah SQL, terdapat pesan yang menyatakan bahwa ketiga proses tadi masing-masing dibatalkan.

Itu artinya, sistem tidak akan melanjutkan ke proses penambahan, pengubahan, dan penghapusan. Sistem langsung membatalkan masing-masing dari ketiga proses tadi setelah menampilkan perintah SQL. Selanjutnya kita sebagai Web Developer dapat menyalin perintah SQL tadi, lalu mencobanya langsung di Database Manager yang bertalian.

Dari sini seharusnya kita sudah bisa mengetahui penyebab gagalnya dari suatu proses penambahan, pengubahan, atau penghapusan data. Cara ini juga berguna jika kita ingin sekedar memeriksa seperti apa perintah SQL yang dieksekusi di ketiga proses di atas tadi.

O iya, supaya perintah SQL tadi bisa ditampilkan saat Debug, maka ada satu hal yang harus diingat. Kita sebagai Web Developer harus menggunakan method yang sama seperti yang digunakan oleh kode yang dihasilkan oleh PHPMaker. Khususnya saat mengeksekusi SQL yang kita tambahkan sendiri lewat Server Events.

Contoh, untuk mengeksekusi perintah SQL yang kita tambahkan di server event tertentu, maka kita disarankan selalu menggunakan function/method ew_Execute. Jangan menggunakan fungsi buatan sendiri apalagi bawaan Database-nya. Gunakanlah selalu built-in function yang tersedia oleh PHPMaker, sehingga mudah di-debug jika terjadi masalah.

Terakhir, penting untuk dipedomani, bahwa proses Debug ini harus dilakukan saat fase development. Biasanya di komputer Web Developer atau di server development. Jangan sekali-sekali mengaktifkan mode Debug ini di server production atau live.

Di samping karena alasan keamanan, perintah SQL ini haram hukumnya dilihat oleh Pengguna Akhir dari Aplikasi Web kita. Ibarat sebuah rumah, ini adalah dapur yang tidak untuk diperlihatkan kepada Pengguna Aplikasi Web. Mereka tidak perlu tahu hal-hal teknis seperti ini.

Oleh karena itu, sebelum kita meng-upload semua file script ke server production, maka pastikan sudah menonaktifkan mode Debug tadi. Pastikan juga kode di ketiga server event tadi sudah kita hapus, sesuai yang ada komentar peringatan pada dua baris kode di atas. Jadi, berhati-hatilah selalu!

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? 🙂

Memaksa Pengguna Memilih Tanggal 20 s.d. 19 Bulan Berikutnya dari PHPMaker

$
0
0

Pernah mengalami kesulitan untuk memaksa Pengguna di Aplikasi Web yang Anda buat supaya memilih tanggal mulai 20 sampai dengan 19 bulan berikutnya? Yang jelas, jika Anda membangun Aplikasi Web dengan menggunakan PHPMaker, hal ini bisa dilakukan dengan sangat mudah.

Katakanlah nama field yang sedang kita bicarakan ini adalah Tanggal_Masuk. Kita ingin menampilkan field ini pada panel Pencarian di halaman List sebagai Extended Search. Field ini bersifat mandatory. Artinya, jika Pengguna tidak memasukkan tanggal awal dan tanggal akhir, maka proses pencarian tidak dapat dilakukan.

Saat Pengguna memilih tanggal awal, maka otomatis tanggal berubah menjadi 20 sesuai dengan bulan yang dipilih. Di saat yang sama, tanggal akhir otomatis terisi menjadi tanggal 19 bulan berikutnya.

Biasanya business-logic seperti ini cocok untuk menampilkan laporan dengan range tanggal yang bulannya berbeda, tetap harus tetap dalam range satu bulan saja. Sudah ada gambaran sekarang?

  1. Pertama sekali, dari Fields setup, klik field Tanggal_Masuk, lalu beri tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah yyyy/mm/dd dari bagian Validate.
  2. Masih pada Fields setup, pastikan sudah memilih BETWEEN pada kolom Search Opr 1 di bawah kolom Advanced Search Page. Tujuannya supaya di form Pencarian nanti field ini menggunakan dua Textbox, yaitu tanggal awal dan tanggal akhir.
  3. Jangan lupa untuk mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled untuk extension yang bernama JSCalendar, lalu klik tombol OK.
  4. Langkah selanjutnya kita akan menulis kode jQuery untuk memaksa Pengguna memilih tanggal 20 sampai dengan 19 bulan berikutnya. Klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode jQuery berikut pada lokasi Client Scripts -> Table-Specific -> List Page -> Startup Script:
    $(document).ready(function(){
    	$("#x_Tanggal_Masuk").change(function(){
    		var date1 = new Date($("#x_Tanggal_Masuk").val());
    		var lastDay1 = new Date(date1.getFullYear(), date1.getMonth(), 20);
    		lastMonth1 = ( (lastDay1.getMonth() + 1) < 10) ? '0' + (lastDay1.getMonth() + 1) : (lastDay1.getMonth() + 1);
    		var newDate1 =  lastDay1.getFullYear() + '/' + lastMonth1 + '/' + lastDay1.getDate();
    		$("#x_Tanggal_Masuk").val(newDate1);		
    		var lastDay = new Date(date1.getFullYear(), date1.getMonth() + 1, 19);
    		lastMonth = ( (lastDay.getMonth() + 1) < 10) ? '0' + (lastDay.getMonth() + 1) : (lastDay.getMonth() + 1);
    		lastDate = ( lastDay.getDate() < 10 ) ? '0' + lastDay.getDate() : lastDay.getDate();
    		var newDate =  lastDay.getFullYear() + '/' + lastMonth + '/' + lastDate;
    		$("#y_Tanggal_Masuk").val(newDate);
    	});
    });
    
  5. Terakhir, untuk memastikan Pengguna harus memilih tanggal, salin kode Javascript berikut ke dalam lokasi Client Scripts -> Table-Specific -> List Page -> Form_CustomValidate:
    function(fobj) { // DO NOT CHANGE THIS LINE!
    	// Your custom validation code here, return false if invalid.
    	elm = this.GetElements("x_Tanggal_Masuk");
     	if (elm && !ew_IsHidden(elm) && !ew_HasValue(elm))
     		return this.OnError(elm, "<?php echo ew_JsEncode2(str_replace("%s", CurrentPage()->Tanggal_Masuk->FldCaption(), CurrentPage()->Tanggal_Masuk->ReqErrMsg)) ?>");	
    	return true;
    }
    
  6. Terakhir, seperti biasa, generate ulang semua file script seperti biasa dari PHPMaker.
  7. Setelah itu, jalankan Aplikasi Web yang sudah dihasilkan tadi dari browser. Pada halaman List table tersebut, pastikan panel Pencarian sudah terbuka. Klik icon DateTime Picker dari tanggal awal, lalu silahkan pilih sebuah tanggal yang Anda inginkan. Perhatikan bahwa di tanggal awal otomatis terpilih menjadi tanggal 20 sesuai bulan yang sedang terpilih, dan di tanggal akhir otomatis terisi dengan tanggal 19 bulan berikutnya.

Dengan cara di atas, maka sistem juga akan menangani kemungkinan jika tahun di tanggal awal berbeda dengan tahun di tanggal akhir. Contoh, jika Pengguna memilih salah satu tanggal di bulan Desember 2015, maka nilai tanggal awal menjadi 2015/12/20, dan nilai di tanggal akhir otomatis berubah menjadi 2016/01/19.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? Tidak perlu lagi cara-cara manual atau konvensional seperti selama ini mungkin masih Anda lakukan dengan hanya mengubah nilai bulannya saja, tetap tahunnya tidak.

Selamat menikmati PHPMaker yang begitu keren! 🙂


Wow! Requires search criteria Ternyata Bisa Dibuat Dinamis dari PHPMaker

$
0
0

Ada yang masih ingat dengan item pengaturan Requires search criteria yang terdapat di menu Table pada project PHPMaker? Sekedar mengingatkan kembali, ini adalah pengaturan yang jika diaktifkan, maka data pada tabel yang terdapat di halaman List dari Aplikasi Web yang dihasilkan oleh PHPMaker, tidak akan ditampilkan.

Saat halaman List ini dibuka pertama sekali, maka tidak ada data di dalamnya. Di halaman itu akan muncul pesan secara standar Please enter search criteria. Artinya, Pengguna harus menentukan kriteria pencarian terlebih dulu, melalui form di bagian atas halaman List, lalu klik tombol Search, barulah sistem akan menampilkan datanya. Itupun jika kriteria pencarian yang dimasukkan benar, barulah data bisa ditampilkan.

Kondisi seperti ini sangat cocok jika data di suatu table sudah sangat banyak; ribuan atau bahkan jutaan, dan kita tidak ingin menampilkan semua atau bahkan satu record pun di halaman List. Satu-satunya cara dengan mengaktifkan pengaturan di atas tadi, lalu generate ulang semua file script.

Namun, sering kali karena kebutuhan Pengguna, kondisi di atas harus bisa kita terapkan secara dinamis. Artinya, untuk kondisi tertentu, kita mengharuskan Pengguna memasukkan kriteria pencarian data terlebih dulu sebelum dapat menampilkan data di halaman List. Di sisi yang lain, kita harus menerapkan kondisi menampilkan beberapa record saat halaman List pertama kali dimuat.

Sayangnya, yang kita ketahui selama ini, jika ingin mengaktifkan fitur tadi, maka kita harus melakukannya dari dalam project PHPMaker. Setelah itu barulah men-generate ulang semua file script seperti biasa. Demikian pula sebaliknya, jika kita ingin menonaktifkannya, maka kita harus melakukannya kembali dari dalam project PHPMaker tadi. Buka dulu file project-nya, nonaktifkan, simpan project, lalu men-generate ulang semua file script.

Terlepas dari kemampuan PHPMaker yang demikian powerful seperti uraian di atas, dua hari yang lalu saya menemukan satu lagi rahasia fleksibilitas PHPMaker. Berawal dari pertanyaan salah seorang member di forum diskusi PHPMaker, saya pun penasaran apakah pengaturan itu bisa diatur secara dinamis. Artinya, pengaturan ini seharusnya bisa dilakukan dari bagian Server Events.

Setelah melakukan eksperimen beberapa saat (sesuatu yang menantang sekaligus mengasyikkan di PHPMaker), hasilnya luar biasa! Ternyata diam-diam PHPMaker memberikan fleksibilitas yang sangat tinggi kepada Web Developer, untuk menerapkan pengaturan tadi secara dinamis. Dengan kata lain, kita tidak perlu lagi mengesetnya melalui pengaturan Requires search criteria dari Table setup di project PHPMaker.

Kita cukup menambahkan sedikit kode PHP saja ke dalam server event Recordset_Selecting yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode selengkapnya kira-kira menjadi seperti ini:

// Recordset Selecting event
function Recordset_Selecting(&$filter) {
	// Enter your code here
	if ($filter == "") {
		$filter = "0=101";
		$this->SearchWhere = $filter;
		$this->setSessionWhere($filter);
		$this->CurrentFilter = "";
	}
}

Ini adalah contoh kode yang paling sederhana. Artinya, yang tadinya kita harus mengaktifkan terlebih dulu pengaturan Requires search criteria dari dalam project PHPMaker, maka sekarang kita tidak perlu lagi melakukannya. Sebagai gantinya, kita cukup menambahkan sedikit kode PHP tadi ke dalam server event Recordset_Selecting, lalu generate ulang file script kembali dari PHPMaker.

Oke, sampai di sini, seolah tidak ada bedanya, bukan? Antara mengaktifkan pengaturan tadi, dengan menggunakan kode di server event Recordset_Selecting?

Nah, supaya menjadi ada bedanya, maka kita bisa menambahkan kondisi di server event tadi. Kode PHP di atas bisa kita kembangkan sesuai kebutuhan. Katakanlah kita menerapkan business-logic, selain Level Pengguna 1, maka harus memasukkan kriteria pencarian terlebih dulu. Sebaliknya, khusus level Pengguna 1, harus menggunakan kondisi filter yang berbeda. Kode di atas cukup kita ubah menjadi:

// Recordset Selecting event
function Recordset_Selecting(&$filter) {
	// Enter your code here
	if (CurrentUserLevel() == 1) {
		$filter = "OrderID = 1234";
	} else { // default
		if ($filter == "") {
			$filter = "0=101";
			$this->SearchWhere = $filter;
			$this->setSessionWhere($filter);
			$this->CurrentFilter = "";
		}
	}
}

Dengan memungkinkannya kita menaruh kode di server event Recordset_Selecting, maka sekaligus kita dapat mengkolaborasikan dengan business-logic lain yang sesuai dengan karakteristik kode di server event ini. Misalnya, kita ingin menambahkan kondisi yang berbeda untuk Level Pengguna yang lainnya.

Luar biasa! PHPMaker benar-benar memiliki fleksibilitas yang sangat tinggi, dan tidak dimiliki oleh produk sejenis lainnya. Bayangkan! Hanya dengan sedikit kode itu saja, Aplikasi Web yang kita hasilkan memiliki kemampuan yang dinamis sesuai kebutuhan.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂

Mencegah Pengguna Memilih Tanggal yang Sudah Lewat di JSCalendar dari PHPMaker

$
0
0

Seperti yang kita ketahui, PHPMaker menggunakan extension JSCalendar untuk membantu Pengguna memilih data Tanggal. Ketika Pengguna mengklik icon kalender di suatu field, muncul kalender dalam jendela popup kecil. Selanjutnya, Pengguna dapat memilih Tanggal yang diinginkan supaya field tadi terisi.

Kadang-kadang, kita sebagai Web Developer harus membatasi tanggal yang boleh dipilih oleh Pengguna. Contoh, kita membatasi tanggal minimum yang boleh dipilih adalah mulai tanggal hari ini. Tanggal kemarin dan hari-hari sebelumnya tidak boleh dipilih. Itu artinya, kita harus men-disable tanggal kemarin dan tanggal-tanggal sebelumnya pada kalender tersebut.

Pernah kesulitan mengalami hal ini? Apa yang Anda lakukan? Menyerah begitu saja? Hm, sebaiknya jangan. Apalagi jika Anda sudah membangun Aplikasi Web dengan PHPMaker. Mengapa? Karena hal ini bisa diatasi dengan sangat mudah, cepat, dan yang pasti juga menyenangkan. Penasaran ingin tahu caranya?

Katakanlah kita ingin menerapkan kondisi tadi pada field OrderDate di table orders. Kita ingin mencegah Pengguna memilih tanggal kemarin dan hari-hari sebelumnya. Silahkan ikuti langkah-langkah berikut dengan teliti!

Pertama, pastikan Anda sudah mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, beri tanda centang pada kolom Enabled pada extension JSCalendar, lalu klik tombol OK.

Kedua, dari Fields setup milik table orders, klik field OrderDate, lalu pastikan Anda SUDAH MENGHAPUS tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga Anda sudah memilih (None) dari bagian Validate pada panel tadi. Jangan khawatir, kalender akan kita tangani melalui bagian Global Code dan Startup Script pada Client Scripts.

Ketiga, salin kode Javascript/jQuery berikut ke dalam Global Code yang terdapat di bawah Client Scripts -> Global -> Pages with header/footer:

// Create calendar
function ms_CreateCalendar(formid, id, format, disableFunc) {
	if (id.indexOf("$rowindex$") > -1)
		return;
	var $ = jQuery, el = ew_GetElement(id, formid), $el = $(el);
	if ($el.parent().is(".input-group"))
		return;
	var $btn = $('<button type="button"><span class="glyphicon glyphicon-calendar"></span></button>')
		.addClass("btn btn-default btn-sm").css({ "font-size": $el.css("font-size"), "height": $el.outerHeight() })
		.click(function() { $(this).closest(".has-error").removeClass("has-error"); });
	var settings = {
		inputField: el, // input field
		showsTime: / %H:%M(:%S)?$/.test(format), // shows time
		ifFormat: format, // date format
		button: $btn[0], // button
		disableFunc: disableFunc, // function to disable the certain date(s)
		cache: true // reuse the same calendar object, where possible
	};
	var args = {"id": id, "form": formid, "enabled": true, "settings": settings, "language": EW_LANGUAGE_ID};
	$el.wrap('<div class="input-group"></div>').after($('<span class="input-group-btn"></span>').append($btn));	
	$(function() {		
		$(document).trigger("calendar", [args]);
		if (!args.enabled)
			return;
		if (!Calendar._DN) {
			$.getScript(EW_RELATIVE_PATH + "calendar/lang/calendar-" + (args.language || "en") + ".js")
				.fail(function() {
					$.getScript(EW_RELATIVE_PATH + "calendar/lang/calendar-en.js");
				});
		}
		Calendar.setup(args.settings);
	});
}

Keempat, salin kode jQuery berikut ke dalam Startup Script yang terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

$(document).ready(function(){
	ms_CreateCalendar("fordersadd", "x_OrderDate", "%Y/%m/%d", function(date) {
		var now = new Date();
		if (date.getFullYear() < now.getFullYear())
			return true;
		if (date.getFullYear() == now.getFullYear()) {
			if (date.getMonth() < now.getMonth())
				return true;
		}
		if (date.getMonth() == now.getMonth()) {
			if (date.getDate() < now.getDate())
				return true;
		}
	});	
});

Kelima, seperti biasa generate ulang semua file script menggunakan PHPMaker. Selesai! Hanya begitu saja? Ya, hanya begitu saja!

Setelah itu jalankan Aplikasi Web dari browser, lalu cobalah menambah data baru pada table orders tadi, lalu klik icon kalender di sebelah field OrderDate. Anda akan melihat tanggal kemarin dan tanggal hari-hari sebelumnya menjadi tidak aktif atau tidak bisa dipilih.

Kesimpulannya, kita sebagai Web Developer dapat membuat object kalender tidak selalu harus dari pengaturan Fields setup. Kita bisa membuat object kalender dari bagian Client Scripts. Dengan cara ini, maka kita bisa mengkostumais kalender milik JSCalendar tadi.

Satu lagi bukti nyata betapa powerful sekaligus fleksibelnya PHPMaker dalam membangun Aplikasi Web. Dan yang lebih penting lagi, betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker! 🙂

Mudahnya Memvalidasi Format Tanggal Menggunakan Javascript dari PHPMaker

$
0
0

Saya yakin Anda pasti masih ingat dengan artikel saya kemarin, yang membahas tentang mudahnya mencegah Pengguna untuk memilih Tanggal dari hari-hari yang sudah lewat dari PHPMaker. Betapa PHPMaker dapat membantu Web Developer untuk mewujudkan hal tersebut.

Di artikel tadi sudah diuraikan bahwa kita mengkostumais kalender menggunakan kode Javascript/jQuery supaya tanggal tertentu tidak bisa dipilih oleh Pengguna. Supaya kita bisa menggunakan kode tersebut, maka kita tidak menggunakan pengaturan kalender dari Fields setup, seperti yang biasa kita lakukan selama ini.

Itu artinya, kode untuk memvalidasi format data Tanggal menjadi tidak di-generate oleh PHPMaker. Demikian juga kode untuk memvalidasi nilai Tanggal apakah lebih besar atau sama dengan Tanggal hari ini, harus ditangani sendiri oleh Web Developer.

Kondisi ini mengakibatkan format data Tanggal yang diinput oleh Pengguna masih dapat diubah. Katakanlah yang tadinya kita berharap format Tanggal adalah yyyy/mm/dd, maka Pengguna bisa memasukkan Tanggal dengan format dd/mm/yyyy, dan jika ini terjadi maka akan menimbulkan kekacauan. Selain itu, Pengguna juga menjadi bisa mengubah nilai data Tanggal menjadi lebih kecil dari Tanggal hari ini.

Untuk mencegah hal tersebut terjadi, kita harus menangani proses validasi format Tanggal. Kita harus memastikan format Tanggal yang diinput oleh Pengguna adalah yyyy/mm/dd, dan bukan format lainnya. Mengapa hal ini harus kita tangani? Karena jika tidak, maka nilai tanggal yang tersimpan akan menjadi 0000/00/00.

Selain itu, di artikel tadi, kita baru hanya fokus untuk men-disable tanggal tertentu di sisi kalender. Kita belum memvalidasi data Tanggal yang dimasukkan harus minimal dengan Tanggal hari ini atau lebih besar dari Tanggal hari ini. Mengapa ini juga perlu? Untuk mencegah data Tanggal yang lebih kecil dari tanggal hari ini bisa lolos masuk ke Database.

Nah, untuk menambahkan kode validasi format Tanggal tadi, sekaligus untuk memvalidasi bahwa Tanggal yang dimasukkan harus lebih besar atau sama dengan Tanggal hari ini, maka cukup tambahkan kode Javascript berikut ke dalam Form_CustomValidate yang terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page:

function(fobj) { // DO NOT CHANGE THIS LINE!
 	// Your custom validation code here, return false if invalid.
	elm = this.GetElements("x_OrderDate");
	if (elm && !ew_CheckDate(elm.value))
		return this.OnError(elm, "Order Date format must be 'yyyy/mm/dd'"); // Return false if invalid
 	
 	var todayDate = new Date();
 	todayDate.setHours(0,0,0,0);
 	var orderDate = $(this).fields("OrderDate");
 	if (orderDate.toJsDate() < todayDate) 
 		 return this.OnError(orderDate, "The Order Date must be equal to or greater than today's date."); // Return false if invalid
 	return true;
}

Perhatikanlah. Hanya dengan menambahkan sedikit kode Javascript pada bagian Form_CustomValidate dari sisi Client Scripts, maka kita sudah bisa memvalidasi format data Tanggal harus sesuai dengan yyyy/mm/dd. Kita juga sudah bisa memvalidasi bahwa data Tanggal yang dimasukkan harus lebih besar atau sama dengan Tanggal hari ini. Jika kedua kondisi tadi tidak terpenuhi, maka data tidak dapat disimpan.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? 🙂

Menghitung Selisih Hari dari Dua Buah Tanggal dengan Javascript dari PHPMaker

$
0
0

Sungguh sudah tidak terhitung lagi banyaknya keuntungan yang bisa diperoleh oleh Web Developer jika membangun Aplikasi Web dengan PHPMaker. Termasuk salah satu trik berikut, yang akan membuktikan betapa mudah, cepat, dan menyenangkannya menghitung selisih jumlah hari dari dua buah tanggal menggunakan kode Javascript.

Katakanlah dalam suatu table, kita memiliki sedikitnya tiga buah field, yaitu Begin_Date (tipe Date), End_Date (tipe Date), dan Date_Difference (tipe Numeric). Kita sebagai Web Developer ingin setelah Pengguna memilih Tanggal pada field Begin_Date dan End_Date, maka selisih hari dari kedua Tanggal tadi akan otomatis terisi pada field Date_Difference.

Pertama, pastikan kita sudah mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled pada extension JSCalendar, lalu klik tombol OK.

Kedua, dari Fields setup milik table tadi, klik field Begin_Date, lalu pastikan Anda sudah memberikan tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga Anda sudah memilih yyyy/mm/dd dari bagian Validate pada panel tadi.

Ketiga, lakukan hal yang sama seperti uraian pada langkah Kedua tadi, untuk field End_Date.

Keempat, tambahkan sedikit kode jQuery/Javascript berikut pada bagian Startup Script di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page milik table tadi, sehingga kode selengkapnya menjadi seperti ini:

$(document).ready(function() {
	$('#x_Begin_Date, #x_End_Date').on('change textInput input', function () {
		if ( ($("#x_Begin_Date").val() != "") && ($("#x_End_Date").val() != "")) {
			var oneDay = 24*60*60*1000; // hours*minutes*seconds*milliseconds
			var firstDate = new Date($("#x_Begin_Date").val());
			var secondDate = new Date($("#x_End_Date").val());
			var diffDays = Math.round(Math.round((secondDate.getTime() - firstDate.getTime()) / (oneDay)));
			$("#x_Date_Difference").val(diffDays);
		}
	});
});

Dari kode tadi, kita cukup mengoptimalkan object Date yang terdapat di browser. Gunakan function getTime milik object Date untuk mengambil nilai satuan terkecil. Kurangkan antara tanggal akhir dan tanggal awal, lalu hasilnya bagi dengan nilai total waktu dalam satuan hari.

Kelima, atau terakhir, generate ulang semua file script menggunakan PHPMaker, seperti biasa. Biarkan PHPMaker sekarang yang menjadi asisten setia Anda untuk menghasilkan Aplikasi Web selengkapnya.

Setelah itu, jalankan Aplikasi Web dari browser. Cobalah menambah data baru untuk table tadi, lalu pilih Tanggal pada field Begin_Date dan End_Date. Perhatikan sekarang di field Date_Difference, seharusnya terisi dengan nilai selisih jumlah hari dari kedua Tanggal.

Contoh, jika di field Begin_Date Anda masukkan 2016/04/16, dan di field End_Date Anda masukkan 2016/04/21, maka nilai pada field Date_Difference akan otomatis terisi dengan nilai 5.

Jika kita ingin agar semua hari dihitung, termasuk juga dengan tanggal awal maupun tanggal akhirnya, maka tinggal tambahkan saja variable diffDays dengan nilai satu. Jadi, dalam contoh di atas, jumlah selisih hari seharusnya menjadi 6.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? Kita tidak perlu lagi menulis kode dari awal, kita tidak perlu lagi mengutak-atik kode di file script yang sudah di-generate.

Cukup hanya melakukan beberapa pengaturan dari Fields setup, dan menambahkan sedikit kode Javascript/jQuery saja dari sisi project PHPMaker. 🙂

Mudahnya Mengekspor Konten Custom File ke File PDF dari PHPMaker dan FPDF

$
0
0

Seperti yang diketahui, PHPMaker menggunakan extension DOMPDF untuk mengekspor data dari halaman List dan View ke file PDF. Konten data di kedua halaman ini tentu saja layout-nya standar, karena bawaan hasil generate PHPMaker.

Pada halaman List, data dikemas dalam bentuk table, di mana setiap field disusun secara horizontal. Sedangkan pada halaman View, data dikemas secara vertical dalam dua kolom; judul atau label field di sebelah kiri, dan datanya di sebelah kanan.

Kadang-kadang, kita sebagai Web Developer dituntut untuk dapat menghasilkan fitur yang bisa mengekspor data dan layout yang kostum pula ke dalam file PDF. Karena data dan layout bersifat kostum, atau tidak standar dari bawaan PHPMaker, maka kita bisa mengoptimalkan fitur Custom Files. Masih ingat dengan fitur itu di PHPMaker, kan?

Karena adanya keterbatasan pada extension DOMPDF di atas, maka konten atau data pada Custom Files tadi akan kita ekspor ke file PDF menggunakan library FPDF. FPDF adalah sebuah class PHP yang dapat menghasilkan file PDF dengan menggunakan murni kode PHP. Huruf F pada FPDF merupakan singkatan dari Free, yang artinya Anda dapat menggunakannya untuk keperluan apapun dan memodifikasinya bebas sesuai kebutuhan Anda.

Beruntunglah Anda yang membangun Aplikasi Web dengan menggunakan PHPMaker dan Masino Extensions. Mengapa? Karena dengan menggunakan PHPMaker, kita bisa mengoptimalkan fitur Custom Files. Dengan menggunakan Masino Extensions, maka kita tidak perlu lagi men-download library FPDF tadi, karena Masino Extensions sudah menyertakan FPDF di dalamnya.

Berikut ini saya akan menunjukkan kepada Anda sebuah contoh yang paling sederhana untuk mengekspor sebuah tulisan atau kalimat ke file PDF. Konten tulisan ini kita buat melalui fitur Custom Files di PHPMaker.

Pertama, kita harus menambahkan sebuah Custom File baru. Klik kanan pada tulisan Custom Files yang terdapat di panel Database, lalu klik menu Add File.

Kedua, di jendela Custom File berikutnya, masukkan nama file (misalnya) custom1.php di bagian File Name. Di bagian Caption, masukkan judulnya (misalnya) Custom One. Pastikan Anda TIDAK MENCENTANG item Include common files, lalu klik tombol OK untuk menyimpan perubahan tersebut.

Ketiga, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu lompat ke lokasi Custom Templates -> Table-Specific -> Custom File -> Content, lalu copy-kan kode PHP berikut ke dalam editor teks di sebelah kanannya:

<?php
	require('fpdf/fpdf.php');
	ob_end_clean();
	$pdf = new FPDF();

	// Add first page
	$pdf->AddPage();

	// Set initial x and y position per page
	$y_axis_initial = 15;
	$x_axis_initial = 25;

	// Set Font Name and Size
	$pdf->SetFont('Arial','',9);

	// Set Y and X initial position
	$pdf->SetY($y_axis_initial);
	$pdf->SetX($x_axis_initial);

	// Print it out now ...
	$pdf->Cell(170, 4, "Halo, ini untuk mencoba FPDF di Custom File...", 0, 0, 'L', 0); // left-align, width: 170
	$pdf->Output("CustomFile2.pdf", "D");
?>

Keempat, simpan project PHPMaker Anda, lalu generate ulang semua file script seperti biasa menggunakan PHPMaker.

Setelah itu, jalankan Aplikasi Web dari browser, lalu klik menu Custom One, maka seharusnya sekarang sistem akan mengekspor tulisan Halo, ini untuk mencoba FPDF di Custom File… ke dalam file PDF.

Itu adalah contoh yang paling sederhana. Tentu saja Anda dapat mengembangkannya sesuai kebutuhan. Misalkan, Anda dapat mengambil datanya terlebih dulu dari Database sebelum diekspor ke file PDF, atau melempar variabel POST atau GET dari halaman yang dihasilkan oleh PHPMaker ke Custom File tadi, lalu tangkap nilainya di dalam Custom File.

Anda juga dapat menambahkan table dan border supaya lebih rapi, memformat teks menjadi tebal, mengubah jenis dan ukuran huruf tertentu, membagi ke dalam beberapa halaman di file PDF, dan seterusnya.

Pastikan juga Anda sudah membaca dan mempelajari Manual dan Tutorials dari situs fpdf.org di atas tadi. Saya yakin Anda dapat menghasilkan layout serumit apapun berdasarkan contoh-contoh pada Tutorials dan Manual di situs fpdf.org.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂

Wow! Aplikasi Web dengan Database SQL Server Sekarang Bisa Hosting di Linux!

$
0
0

Pernahkah mengalami kesulitan supaya Aplikasi Web yang dihasilkan oleh PHPMaker dan menggunakan Database Microsoft SQL Server, dapat di-hosting di web server yang dijalankan pada sistem operasi Linux? Seperti yang kita ketahui bersama, berdasarkan requirement PHPMaker, Aplikasi Web dengan kondisi tadi hanya dapat di-hosting di web server pada sistem operasi Windows.

Itu artinya, secara standar, Aplikasi Web dengan Database SQL Server yang dihasilkan oleh PHPMaker memiliki keterbatasan pada Sistem Operasi tempat web server-nya berada. Dia hanya baru bisa ditaruh di web server yang berjalan pada Sistem Operasi Windows. Aplikasi Web tersebut belum bisa ditaruh di web server pada Sistem Operasi selain Windows, seperti Linux, misalnya.

Salah satu Client terbesar saya sudah lama menginginkan agar Aplikasi Web yang dihasilkan dengan PHPMaker dapat ditaruh di web server pada Sistem Operasi Linux. Tentu saja ada alasan mengapa Client saya tersebut membutuhkan perubahan tadi.

Jika menggunakan Sistem Operasi Windows, maka Aplikasi Web akan terasa lebih lambat saat diakses oleh ratusan atau ribuan Pengguna sekaligus. Sementara jika menggunakan web server pada Sistem Operasi Linux, maka Aplikasi Web dapat diakses relatif lebih cepat.

Jelas, ini merupakan tantangan terbesar saya untuk mewujudkan hal tersebut. Bayangkan! Sesuatu yang bersifat fundamental pada Aplikasi Web yang sudah dihasilkan oleh PHPMaker, dan sudah berlaku sejak lama, harus bisa disesuaikan sesegera mungkin.

Ada beberapa hal yang secara prinsip harus diubah, baik dari sisi Aplikasi Web, maupun dari sisi file template yang digunakan oleh PHPMaker.

Pertama, kode yang terkait dengan koneksi ke Database harus disesuaikan. Meskipun tidak terlalu banyak perubahan yang dilakukan, namun jika tidak tahu celah perubahan itu berada di mana saja, tentu hal ini bukanlah hal yang mudah.

Kedua, batasan Windows sebagai satu-satunya Sistem Operasi yang bisa digunakan oleh Aplikasi Web dengan Database Microsoft SQL Server harus dihilangkan. Jika poin Pertama di atas sudah bisa diatasi, maka batasan Windows ini tinggal diesuaikan dengan menambahkan kondisi baru untuk Sistem Operasi Linux.

Ketiga, membungkus semua perubahan tadi ke dalam pemakaian Extensions untuk PHPMaker, daripada mengubah file template secara total. Beruntunglah Anda jika menggunakan Masino Extensions, karena kerumitan di atas bisa disederhanakan cukup dari dalam Masino Extensions.

Ada sebuah pilihan baru yang bernama UseMSDBLIBForSQLServerDatabase pada extension MasinoHeaderFooter12. Secara standar, pilihan ini tidak aktif atau masih disabled. Jika Anda ingin supaya Aplikasi Web yang dihasilkan oleh PHPMaker dan menggunakan Database Microsoft SQL Server dapat di-hosting di Sistem Operasi Linux, maka aktifkan pilihan ini, lalu generate ulang semua file script dengan PHPMaker, seperti biasa.

Sesuai dengan namanya tadi, dalam hal ini kita menggunakan MSDBLIB yang disediakan oleh ADODB.

Sampai saat artikel ini saya tulis, beberapa Aplikasi Web yang saya hasilkan dengan PHPMaker v12.0.7 bisa berjalan mulus pada Sistem Operasi Linux. Web server yang digunakan adalah LiteSpeed, dan database library-nya adalah FreeTDS. Semua fungsi dan fitur Aplikasi Web bisa berjalan dengan baik dan normal.

Berterima kasihlah kepada ADODB, LiteSpeed, dan FreeTDS, yang sudah menyediakan kemudahan buat PHPMaker untuk mewujudkan semua ini. Tanpa dukungan mereka, maka Aplikasi Web dengan Database Microsoft SQL Server yang dihasilkan oleh PHPMaker tidak bisa di-hosting pada sistem operasi Linux.

Ini merupakan lompatan yang sangat luar biasa untuk Aplikasi Web yang dihasilkan oleh PHPMaker. Mengapa? Karena PHPMaker sendiri sampai saat ini belum menyediakan fitur yang memungkinkan supaya Aplikasi Web dengan Database Microsoft SQL Server tersebut bisa dijalankan di Sistem Operasi selain Windows. Tapi dengan menggunakan Masino Extensions, semua kerumitan di atas bisa disederhanakan.

Dan ini jugalah alasan utama mengapa sebaiknya Anda sudah saatnya menggunakan Masino Extensions pada project PHPMaker Anda. 🙂

Template Super Keren untuk PHPMaker: Sebuah Konsep Baru bagi Aplikasi Web

$
0
0

Selama dua minggu terakhir, saya bersemangat sekali melakukan eksperimen untuk mengubah Template asli yang digunakan oleh PHPMaker. Apakah karena bosan melihat tampilan Aplikasi Web yang itu-itu saja, atau karena pernah melihat tampilan template Aplikasi Web yang “wah” dari Internet, atau bahkan apakah karena merasa tertantang untuk menerapkan tampilan yang “wah” tadi ke Aplikasi Web yang dihasilkan oleh PHPMaker.

Entahlah. Bisa jadi memang karena ketiga faktor tadi. Yang jelas, hal inilah yang membuat saya selalu semangat bereksperimen dalam menggunakan PHPMaker. Semata-mata bukan untuk menghasilkan Aplikasi Web saja, tapi bagaimana supaya PHPMaker dapat digunakan dengan lebih menyenangkan. Buktinya, bisa membuat hidup seorang Web Developer menjadi lebih bergairah dan semangat, hehehe…

Seperti yang kita ketahui, tampilan Aplikasi Web asli yang dihasilkan oleh PHPMaker sangatlah standar. Sebagian besar masih menggunakan komponen asli bawaan framework Twitter Bootstrap. Tampilan menu pun standar. Kalau tidak Vertical, ya Horizontal. Itu pun untuk menghasilkan menu Horizontal, maka kita harus menggunakan extension HorizontalMenu atau MasinoHorizontalVertical.

Dulu alasan saya membuat Masino Extensions adalah untuk menambahkan fitur-fitur baru, sekaligus mengubah fitur yang sudah ada. Selain itu, juga karena ingin mengubah tampilan asli Aplikasi Web yang dihasilkan oleh PHPMaker.

Seiring berjalannya waktu, banyak sekali fitur yang sudah ditambahkan ke dalam Masino Extensions. Akibatnya, Aplikasi Web yang dihasilkan menjadi lebih powerful. Itu sudah jelas. Tapi, yang tidak dapat dipungkiri adalah, untuk mengubah pengaturan atau setting Aplikasi Web, seperti misalnya tema/warna, posisi menu, gaya lebar tabel, dan sebagainya, jumlah item pengaturan menjadi semakin banyak.

Kondisi ini jugalah yang mengakibatkan di beberapa Aplikasi Web yang saya buat dengan PHPMaker menjadi kurang begitu bagus performansinya. Mengapa? Karena jika Aplikasi Web tersebut diakses oleh ratusan atau ribuan user pada waktu relatif bersamaan, maka akibatnya menjadi terasa lambat. Setelah dianalisis ulang, ternyata karena sebagian besar item pengaturan tadi disimpan ke variabel session.

Selain itu, di Masino Extensions tersedia juga pilihan untuk menyimpan nilai dari item pengaturan tadi ke dalam Database. Ini juga yang menyebabkan akses ke Database menjadi relatif besar. Berangkat dari kondisi inilah, membuat saya berpikir untuk mengubah konsep Aplikasi Web yang dihasilkan oleh PHPMaker. Dari yang tadinya terlalu banyak menggunakan variabel session, menjadi menggunakan sebagian besar Cookies di sisi browser Client.

Tidak itu saja. Ternyata perubahan ini pun membawa dampak baik yang sangat signifikan. Selain karena mengurangi pemakaian variabel session, tampilan Aplikasi Web-nya pun menjadi semakin bagus, modern, dan lebih eye-catching. Seperti keuntungan yang saling melengkapi. Sudah ringan, cantik pula tampilannya. Wah!

Pasti Anda penasaran kan? Oke kita mulai saja. Untuk pilihan Layout di konsep yang baru, sekarang lebih disederhanakan menjadi hanya 2; yaitu apakah Fluid (layout dengan lebar layar penuh, di mana sisi-sisinya lengket ke paling kiri dan kanan layar), atau Boxed (layout yang mengecil dan fokus ke tengah layar). Jika di konsep yang lama, Fluid sama artinya dengan Auto dan 100%, sedangkan Boxed sama dengan Scrolling Table.

Selanjutnya, di bagian layout Sidebar Menu, Header, dan Footer juga terjadi perubahan. Di konsep yang baru ini, semua item menu yang dihasilkan atau di-generate oleh PHPMaker akan selalu berada di posisi Sidebar. Bisa di sebelah kiri atau sebelah kanan (bisa dipindahkan dengan mudah).

Di konsep yang lama, meskipun posisi menu bisa dipindahkan ke atas (Horizontal) atau samping kiri/kanan (Vertical), tapi konsep ini belakangan tidaklah begitu menarik. Mengapa? Karena kita hanya bisa memilih salah satu posisi saja. Jika tidak di atas, ya di samping. Harus pilih salah satu. Tidak bisa menggunakan kedua posisi sekaligus.

Nah, di konsep yang baru ini, menu Vertical dan Horizontal bisa sama-sama digunakan dalam satu kesempatan. Artinya, semua Item Menu yang dihasilkan oleh PHPMaker, akan selalu berada di samping kiri ATAU kanan. Tergantung pengaturan yang dilakukan oleh End-User nantinya. Bahkan, Sidebar Menu bisa diperkecil lebarnya, sampai hanya menampilkan icon-nya saja. Mirip seperti Sidebar pada WordPress, atau persis seperti gaya Sidebar pada Visual Studio yang bisa di-pin atau unpin… Wow, keren kan? 🙂

Selain itu, posisi Menu di Sidebar atas atau tepat di bawah Header, di konsep yang baru ini sekarang bisa diisi dengan menu yang dapat dikostumisasi sendiri oleh Web Developer. Contoh, kita bisa menampilkan icon foto End-User yang berhasil login, dan juga menampilkan sub-menu dropdown yang berisi link ke halaman Profil Pengguna dan link Logout. Itu artinya, optimalisasi Menu di konsep yang baru ini kita bisa menggunakan menu Horizontal dan Vertical sekaligus. Wow, mantap sekali, kan?

Khusus untuk Sidebar, di konsep yang baru ini tersedia beberapa item pengaturan. Pertama adalah Sidebar Mode, apakah Fixed atau Default. Lalu ada lagi Sidebar Menu, apakah ingin bergaya Hover atau Accordion. Selanjutnya, Sidebar Style, apakah Default atau Light, dan terakhir Sidebar Position, apakah ingin di sebelah kiri atau kanan.

Selain itu, di konsep yang baru ini, End-User bisa mengatur atau menghasilkan Layout sesuai yang dia inginkan. Cukup dengan menggunakan beberapa kombinasi item setting yang melibatkan Header dengan nilai pengaturan Fixed atau Default, Footer dengan nilai Fixed atau Default, lalu dikombinasikan lagi dengan Sidebar Mode, Sidebar Menu, Sidebar Style, dan Sidebar Position.

Yang dimaksud dengan Header dan Footer Fixed maksudnya adalah, mereka bisa lengket di posisi mereka masing-masing. Kalau di konsep yang lama, hal ini dikenal masing-masing dengan Sticky Header dan Sticky Footer. Sebaliknya, jika pengaturan tersebut bernilai Default, maka Layout-nya tidak lengket di posisi atas dan bawah.

Untuk Theme/Warna di konsep yang baru, meskipun pilihannya tidak sebanyak di konsep yang lama, tapi sudah cukup mewakili selera End-User. Tersedia 6 (Enam) pilihan; dengan perbandingan 50:50 masing-masing untuk warna yang mewakili gelap dan terang. Setiap kali Pengguna Aplikasi Web memilih salah satu tema/warna, maka perubahan itu langsung diterapkan tanpa harus menghubungi server terlebih dulu.

Tidak hanya berhenti di situ saja, tersedia juga pilihan untuk mengubah tampilan sudut elemen. Mirip dengan konsep yang lama; yaitu apakah ingin menggunakan Rounded (Bootstrap Normal) atau Square (Bootstrap Flat). Cukup sekali klik, maka semua perubahan elemen langsung terjadi, lagi-lagi tanpa harus menghubungi server.

Kesimpulannya, semua perubahan setting tadi bisa dilakukan on-the-fly. Hasilnya pun akan langsung kelihatan seketika itu juga. Tanpa harus menghubungi server. Hal ini bisa terjadi, karena di konsep yang baru ini semua nilai item pengaturan disimpan ke dalam Cookies pada sisi browser Client. Inilah alasan utama yang menyebabkan Aplikasi Web bisa menjadi lebih ringan dan terlihat menjadi lebih profesional.

Akhirnya, semua konsep baru ini saya bungkus ke dalam sebuah file Template PHPMaker yang super keren. Saya namakan dengan MasinoTemplate. Itu artinya, konsep pengembangan Aplikasi Web yang sebelumnya mengandalkan Masino Extensions, kini menjadi beralih dengan menggunakan hanya sebuah file Template PHPMaker. Di dalam Template ini sudah menyertakan hampir semua fitur-fitur yang terdapat pada Masino Extensions.

Sampai sejauh ini, Masino Extensions yang sudah saya coba kompatibel untuk Template PHPMaker baru ada dua, yaitu MasinoPreviewRow12 dan MasinoCatcha12. Artinya, Anda tidak perlu menggunakan Masino Extensions yang lainnya jika menggunakan MasinoTemplate untuk PHPMaker ini, karena selebihnya sudah dimasukkan ke dalam Template yang saya buat tersebut.

Anda juga tidak perlu lagi menggunakan extension ScrollingTable, CAPTCHA, HorizontalMenu, karena semua fitur yang terdapat di Extensions ini sudah saya masukkan secara standar ke dalam Template tadi.

Untuk extension bawaan PHPMaker lainnya yang masih bisa Anda gunakan bersama dengan Template ini adalah JSCalendar, DHTML Editor, PDF Export, Time Picker, PHPExcel, dan PHPWord.

Bayangkanlah sekarang konsep yang baru ini akan Anda gunakan untuk Aplikasi Web yang dihasilkan oleh PHPMaker. Di samping bisa membuat performansi Aplikasi Web menjadi lebih ringan, cepat, juga bisa mempercantik tampilan Aplikasi Web, sehingga tidak membosankan bagi Pengguna Akhir. Dan yang paling penting dari semuanya itu, proses pengembangan Aplikasi Web pun menjadi semakin lebih sederhana, mudah, cepat, dan menyenangkan lagi.

Terakhir, Template PHPMaker yang super keren ini tidak saya share secara gratis kepada Anda. Ada begitu banyak pengorbanan waktu, tenaga, dan juga materi di dalamnya, ehm.

Bagaimana saya harus mengintegrasikan menu yang dihasilkan oleh PHPMaker supaya dapat ditampilkan sebagaimana mestinya di Template ini. Bagaimana saya harus memindahkan sedemikian banyaknya fitur-fitur dari Masino Extensions ke dalam Masino Template. Bagaimana saya harus mencoba dan memastikan segala sesuatunya berjalan dengan lancar.

Sebagai bocoran, Template PHPMaker ini akan saya jual hanya kepada Anda yang berminat saja. Cukup dengan USD 450, Anda bisa memiliki Template PHPMaker ini. Jangan katakan harga ini terlalu mahal kalau Anda sendiri tidak bisa membuatnya. Jadi, harap maklum saja ya. Bersiap-siaplah menabung dari sekarang jika Anda benar-benar serius dan berminat menggunakannya.

Penasaran ingin lihat demo Aplikasi Web yang dihasilkan olehnya? Sabar, ya. Dalam beberapa hari ke depan, Anda pasti akan menikmatinya. 🙂


Tidak ada PHPMaker versi 13, Selamat Datang PHPMaker versi 2017!

$
0
0

Begitulah yang terjadi. Mungkin karena angka 13 sering dikaitkan dengan angka sial, akhirnya PHPMaker versi 13 yang selama ini saya tunggu-tunggu tidak juga dirilis. Yang ada ternyata PHPMaker versi 2017. Siang ini saya klik website resminya, dan muncul infonya di sana. Sedikit kaget memang, tapi sekaligus senang.

Hal pertama yang saya lakukan adalah mengecek fitur terbarunya. Ahaa! Ternyata, ada dua fitur yang selama ini sudah ditunggu-tunggu oleh Web Developer, seperti yang disampaikan melalui dua topik berikut pada forum diskusi PHPMaker, sekarang sudah ditambahkan di versi major terbaru ini.
Pop-Up Lookup
Open Record for View/Add/Edit in Modal Instead of New Page

Jadi, di versi terbaru ini, PHPMaker dapat men-generate halaman Add, Edit, dan Copy dalam jendela Modal yang muncul secara popup. Selain itu, PHPMaker juga dapat men-generate kode untuk menampilkan data pada field Lookup Table dalam jendela Modal popup.

Langsung purchase versi upgrade-nya, tapi respon License Key-nya lama diterima. Sudah lebih dari satu jam, belum juga ada respon. Akhirnya saya download versi trial-nya dari halaman Download, lalu install. Selanjutnya mencoba generate file script menggunakan file project demo versi 12.

Hal yang paling terasa bedanya adalah saat proses generate file script. Sesuai dengan salah satu janjinya yang menyatakan Faster script generation, waktu yang dibutuhkan untuk men-generate semua file script memang sangat super cepat. Ternyata, karena PHPMaker sekarang menggunakan Node.js. Well done, and good job!

Fitur menarik lainnya adalah extension Field Visibility. Karena extension ini hanya untuk mereka yang sudah mem-purchase, maka saya belum bisa mencobanya sekarang. Tapi dari keterangannya, PHPMaker sekarang dapat mengeset property Visible dari object field untuk halaman dan aksi yang berbeda. Fitur ini mendukung ekspresi boolean, User ID, User Level atau kombinasi dari ketiganya. Wow, keren!

Tidak sampai di situ saja. PHPMaker versi 2017 juga mendukung auto-update file template. Artinya, jika author PHPMaker merilis template yang terbaru, maka PHPMaker dapat mendeteksinya, sekaligus mendownload-nya ke dalam PHPMaker. Lagi-lagi, karena fitur ini hanya untuk mereka yang sudah membeli PHPMaker secara resmi, saya belum bisa mencobanya.

Selanjutnya, fitur baru lainnya adalah detail grid di halaman Master/Detail View dapat menyertakan link/tombol Add, Copy, Edit, Delete, dan View. Mantap sekali!

Fitur utama lainnya yang berubah adalah pemisahan data locale ke file yang terpisah dari file .xml language. Itu artinya, data locale tidak lagi disimpan di dalam file .xml language. Tersedia 70 file yang terdapat di sub-direktori locales. Hal ini sangat bermanfaat, karena data locale tidak lagi tergantung kepada file .xml language tadi.

Demikian sekilas review untuk PHPMaker versi 2017, atau setara dengan PHPMaker versi 13. Agak sedikit rancu dan lucu memang, karena beberapa file script yang di-generate di versi ini masih menggunakan sufix (akhiran) 13, seperti ewcfg13.php, ewshared13.php, phpfn13.php, dan seterusnya, tapi versi PHPMaker-nya sendiri adalah 2017, hehehe…

Tapi meskipun demikian, perubahan di versi major yang satu ini sudah cukup lumayanlah. Selanjutnya tinggal memperbarui file-file MasinoExtensions dan MasinoTemplate yang saya buat, supaya kompatibel dengan versi 2017. Mohon bersabar ya. Mudah-mudahan dalam waktu seminggu ke depan, semuanya sudah selesai saya mutahirkan mengikuti versi 13, eh… versi 2017 ding… 😛

Masino Extensions dan Masino Template untuk PHPMaker 2017 Sudah Tersedia

$
0
0

Kemarin, hari Senin tanggal 1 Agustus 2016, saya merilis Masino Extensions untuk PHPMaker versi 2017 melalui website I Love PHPMaker. Pada hari yang sama, saya juga merilis file demo project dan file project baru untuk membantu Web Developer membuat Aplikasi Web dengan PHPMaker dan Masino Extensions menjadi lebih cepat.

Demo Aplikasi Web yang dihasilkan oleh {PHPMaker 2017 + Masino Extensions} bisa Anda lihat dengan mengklik link ini.

Selain itu, saya juga berhasil memutahirkan Masino Template yang awalnya sudah berhasil saya buat untuk PHPMaker 12, sekarang menjadi bisa digunakan juga untuk PHPMaker 2017. Demo Aplikasi Web yang dihasilkan oleh {PHPMaker 2017 + Masino Template} bisa Anda lihat di sini.

Itu artinya, sejak PHPMaker 2017 dirilis, saya berhasil memutahirkan 15 file Extensions (Masino Extensions) dari yang sebelumnya untuk PHPMaker 12, menjadi dapat digunakan di PHPMaker 2017, dan juga berhasil memutahirkan file Masino Template dari yang sebelumnya untuk PHPMaker 12, menjadi dapat digunakan di PHPMaker 2017, hanya dalam waktu kurang dari satu minggu.

Inilah bukti bahwa Masino Extensions dan juga Masino Template selalu diperbarui agar kompatibel selalu dengan PHPMaker versi terakhir. Jadi, tidak ada lagi keraguan sedikitpun untuk tidak lagi menggunakan PHPMaker bersama Masino Extensions dan/atau Masino Template.

Masih membangun Aplikasi Web dengan cara-cara kuno dan mempersulit hidup Anda sendiri, atau mulai sekarang beralih menggunakan cara cepat, mudah, dan menyenangkan? Semua itu kembali kepada Anda. Tidak ada yang memaksa, karena pilihan ada di tangan Anda masing-masing.

Jika Anda sudah menjadi member di situs I Love PHPMaker, silahkan login dan download Masino Extensions tersebut. Di sana juga tersedia file demo project dan file project untuk membuat Aplikasi Web dari awal sehingga bisa menjadi lebih cepat lagi.

Sedangkan jika Anda ingin menggunakan file Masino Template, Anda dapat membelinya melalui Paypal: masino.sinaga@gmail.com. Harga file Masino Template ini masih tetap, yaitu USD 450.

Happy coding! 🙂

Cara Mengatur Default Format Tanggal yang Baru di PHPMaker 2017

$
0
0

Salah satu perubahan yang langsung terlihat di PHPMaker 2017 adalah dihilangkannya pengaturan Default date format. Pengaturan ini berada di PHP -> General Options pada PHPMaker 12. Sesuai namanya, pengaturan ini untuk menentukan default format tanggal secara global.

Karena pengaturan ini sudah tidak ada lagi di PHPMaker 2017, pasti timbul pertanyaan, lalu bagaimana cara kita menentukan default format tanggal tersebut? Jangan khawatir, karena PHPMaker sudah menyediakan solusinya melalui 70 file locale berekstensi .json. File-file ini berada dalam sub-direktori locale di bawah direktori utama tempat PHPMaker diinstal.

Karena secara standar PHPMaker selalu menggunakan pengaturan English (en), maka file yang akan digunakan terkait pengaturan default format tanggal tersebut adalah en.json. Jika file ini kita buka dengan editor teks seperti Notepad++ misalnya, maka isinya seperti ini:

{
    "date": "2016-07-25",
    "version": "13.0.0",
    "id": "en",
    "locale": "en_US",
    "name": "English (United States)",
    "desc": "English (United States, EN_US)",
    "author": "e.World",
    "decimal_point": ".",
    "thousands_sep": ",",
    "mon_decimal_point": ".",
    "mon_thousands_sep": ",",
    "currency_symbol": "$",
    "positive_sign": "",
    "negative_sign": "-",
    "frac_digits": 2,
    "p_cs_precedes": 1,
    "p_sep_by_space": 0,
    "n_cs_precedes": 1,
    "n_sep_by_space": 0,
    "p_sign_posn": 1,
    "n_sign_posn": 1,
    "date_sep": "\/",
    "time_sep": ":",
    "date_format": "mdY",
    "time_zone": ""
}

Perhatikanlah item pengaturan yang bernama date_format. Nilainya adalah mdY. Itu artinya, default format tanggal yang digunakan oleh field bertipe Date atau DateTime memiliki urutan: bulan, tanggal, dan tahun. Sedangkan karakter pemisah default-nya adalah slash atau garis miring (/), seperti yang kita lihat pada item pengaturan date_sep.

Katakanlah di suatu table ada field bertipe Date atau DateTime yang bernama Tanggal_Lahir. Jika kita sebagai Web Developer tidak mengubah pengaturan Format yang terdapat pada panel View Tag dari Fields setup, maka default format tanggal yang digunakan pada pengaturan di bawahnya yang bernama Date/time named format adalah Default.

Itu artinya, Aplikasi Web yang dihasilkan oleh PHPMaker 2017 ini akan menggunakan nilai dari date_format pada file .json di atas. File .json ini akan ditempatkan oleh PHPMaker pada sub-direktori phplocale dari direktori utama Aplikasi Web. Tentu saja, nilai default format tanggal ini akan menyesuaikan dengan bahasa yang sedang digunakan oleh Aplikasi Web pada saat itu.

Jika kita bandingkan kode yang terdapat di dalam file en.json tadi, sebagian besar item pengaturan locale itu sama dengan pengaturan localeconv PHP pada http://php.net/localeconv. Ini salah satu fakta lagi yang membuktikan bahwa PHPMaker selalu menggunakan teknologi PHP yang terbaru.

Sedangkan perbedaannya adalah, PHPMaker menambahkan item pengaturan yang bernama date_format di dalam file .json tadi. Di sinilah cerdiknya PHPMaker 2017. Dia memisahkan pengaturan localeconv dari file .xml language seperti yang masih digunakan oleh PHPMaker versi 12. Dengan cara ini, maka banyak Web Developer dari hampir 70 negara yang menggunakan PHPMaker terbantu, karena sudah memiliki pengaturan yang terkait dengan format data angka, tanggal, dan waktu di setiap negaranya.

Sekarang mari kita ambil contoh kasus untuk mengubah nilai pada date_format tadi. Katakanlah kita ingin supaya setiap field yang bertipe Data atau DateTime secara standar akan menggunakan format tanggal dengan urutan: Tanggal, Bulan, Tahun, Jam, Menit, dan Detik, maka nilai pengaturan date_format itu kita ganti menjadi dmYHis.

Meskipun kita bisa menggunakan nilai default format tanggal dari file .json tadi secara global, tentu kita sebagai Web Developer masih tetap bisa mengubah format tanggal untuk field tertentu. Caranya, dari Fields setup -> panel View Tag, pilih salah satu nilai yang kita inginkan dari item pengaturan Date/Time named format.

O iya, satu lagi. Di contoh tadi, kita menggunakan nilai default format tanggal dmYHis. Jika hari ini tanggal 6 Agustus 2016 pukul 9 lewat 8 menit 32 detik, maka nilai tanggal ini akan dikonversi pada Aplikasi Web menjadi 06/08/2016 21:08:32

Huruf Y (kapital) di pengaturan date_format tadi artinya nilai Tahun dalam 4 digit. Jika kita ingin menggunakan tahun dalam dua digit, maka gunakan huruf y (kecil). Sedangkan untuk nilai Jam, harus menggunakan huruf H (besar). Jika nilai date_format tadi tidak valid, maka Aplikasi Web akan otomatis mengambil nilai pada file .json yang bertalian.

Betapa mudah dan fleksibel sekali, bukan? 🙂

Cara Mengatur Default Time Zone yang Baru di PHPMaker 2017

$
0
0

Setelah di artikel sebelumnya kita sudah membahas mengenai perubahan default format tanggal di PHPMaker versi 2017, di artikel ini kita akan membahas perubahan lainnya, yaitu dihilangkannya item pengaturan Default time zone atau standar zona waktu.

Pengaturan yang dihilangkan ini berada di menu Tools -> Advanced Settings pada PHPMaker versi 12. Karena item-item pengaturan yang berhubungan dengan locale sudah disimpan ke file berekstensi .json, maka pengaturan default time zone tadi pun bisa kita lihat di file tersebut.

Ini salah satu contoh file yang bernama en.json, di mana PHPMaker secara standar menggunakan zona waktu file locale English – Amerika:

{
    "date": "2016-07-25",
    "version": "13.0.0",
    "id": "en",
    "locale": "en_US",
    "name": "English (United States)",
    "desc": "English (United States, EN_US)",
    "author": "e.World",
    "decimal_point": ".",
    "thousands_sep": ",",
    "mon_decimal_point": ".",
    "mon_thousands_sep": ",",
    "currency_symbol": "$",
    "positive_sign": "",
    "negative_sign": "-",
    "frac_digits": 2,
    "p_cs_precedes": 1,
    "p_sep_by_space": 0,
    "n_cs_precedes": 1,
    "n_sep_by_space": 0,
    "p_sign_posn": 1,
    "n_sign_posn": 1,
    "date_sep": "\/",
    "time_sep": ":",
    "date_format": "mdY",
    "time_zone": ""
}

Secara standar, nilai pengaturan zona waktu tadi bisa diatur dari time_zone, seperti yang kita lihat pada file en.json di atas. Nilai standarnya masih kosong.

Jika seandainya kita ingin mengubah nilai itu supaya sesuai dengan standar zona waktu Indonesia, maka kita bisa mengaturnya melalui file id.json. Cukup dengan mengisikan nilai Asia/Jakarta ke dalam item pengaturan time_zone, seperti yang dapat kita lihat di bawah ini:

{
    "date": "2016-07-25",
    "version": "13.0.0",
    "id": "id",
    "locale": "id_ID",
    "name": "Indonesian (Indonesia)",
    "desc": "Indonesian (Indonesia)",
    "author": "e.World",
    "decimal_point": ",",
    "thousands_sep": ".",
    "mon_decimal_point": ",",
    "mon_thousands_sep": ".",
    "currency_symbol": "Rp ",
    "positive_sign": "",
    "negative_sign": "-",
    "frac_digits": 0,
    "p_cs_precedes": 1,
    "p_sep_by_space": 0,
    "n_cs_precedes": 1,
    "n_sep_by_space": 0,
    "p_sign_posn": 1,
    "n_sign_posn": 1,
    "date_sep": "\/",
    "time_sep": ":",
    "date_format": "dmY",
    "time_zone": "Asia/Jakarta"
}

Jika kita ingin mengetahui nilai-nilai zona waktu lainnya, khususnya yang terkait dengan negara lain, silahkan langsung ke http://www.php.net/timezones.

Mudahnya Menambahkan Pesan Konfirmasi Sebelum Data Disimpan dari PHPMaker

$
0
0

Ketika Pengguna (End-User) Aplikasi Web mengklik tombol untuk menyimpan data yang baru saja ditambah atau diubah, maka sebaiknya sistem harus bisa menampilkan pesan konfirmasi, apakah data ingin disimpan atau tidak. Hal ini penting, guna memberi kesempatan kepada Pengguna untuk memeriksa ulang, sebelum akhirnya data tadi benar-benar disimpan ke Database.

Sebagai Web Developer, pernahkah Anda mengalami kesulitan ketika ingin menambahkan pesan konfirmasi sebelum data disimpan melalui Aplikasi Web? Jika Anda membangun Aplikasi Web masih dengan cara-cara kuno atau konvensional, yaitu menulis kode baris per baris, kemungkinan besar jawaban Anda adalah: Ya! Bayangkan saja, Anda harus menggabungkan kode entah menggunakan PHP, Javascript, jQuery atau kombinasi ketiganya, supaya dapat menghasilkan fitur tadi.

Sebenarnya PHPMaker sudah memiliki fitur ini, meskipun tidak 100% sesuai yang diinginkan. Kita bisa mengaktifkan fitur Confirm dari pengaturan level Table. Pengaturan ini tersedia untuk halaman Add, Edit, dan Multi-Update. Setelah diaktifkan, lalu tinggal generate ulang semua file script seperti biasa dengan PHPMaker.

Hasilnya, setelah Pengguna menambah atau mengubah data di Aplikasi Web, lalu menekan tombol Save, maka sistem akan menampilkan halaman yang berisi data tadi dalam mode Read-Only. Di halaman konfirmasi ini, Pengguna masih memiliki kesempatan untuk memeriksa data tersebut. Jika menurutnya data sudah benar, maka dia tinggal menekan tombol Confirm yang berada di bawah halaman konfirmasi itu, supaya data disimpan ke Database.

Pertanyaannya adalah, bagaimana jika kita ingin menampilkan pesan tertentu yang menjelaskan data pada field tertentu di halaman konfirmasi tadi? Katakanlah saat Pengguna mengubah data, kita ingin membandingkan data pada field Quantity di table orderdetails. Tentu saja dalam hal ini kita menggunakan file project demo yang disediakan oleh PHPMaker.

Jika data Quantity ini tidak diubah, maka tampilkan pesan kepada Pengguna di halaman konfirmasi tadi. Dengan cara ini, maka Pengguna diingatkan sekali lagi sebelum menyimpan data tersebut, bahwa data Quantity tidak mengalami perubahan.

Pengguna masih bisa membatalkan dengan menekan tombol Cancel, lalu sistem kembali menampilkan form Edit tadi. Atau, jika Pengguna sudah merasa yakin dengan data itu, dia bisa melanjutkan dengan menekan tombol Confirm untuk mengkonfirmasikan ke sistem, sekaligus menyimpan data ke Database.

Penasaran ingin tahu caranya? Oke, silahkan ikuti langkah-langkah berikut.

Pertama, pastikan file project demo sudah dibuka dengan menggunakan aplikasi PHPMaker.

Kedua, klik table orderdetails dari panel Database, lalu di bagian kanan klik tab Table, lalu aktifkan item pengaturan Confirm yang terdapat di bagian Edit Page.

Ketiga, salin kode PHP berikut ke dalam server event Row_Rendered milik table orderdetails tadi, sehingga kode selengkapnya menjadi seperti ini:

// Row Rendered event
function Row_Rendered() {
	// To view properties of field class, use:
	//var_dump($this-><FieldName>);
	if (CurrentPageID() == "edit" && $this->CurrentAction != "F") {
		$_SESSION["old_data"] = $this->Quantity->EditValue;
	}
	if (CurrentPageID() == "edit" && $this->CurrentAction == "F") {
		$_SESSION["new_data"] = $this->Quantity->ViewValue;
		if ($_SESSION["old_data"] == $_SESSION["new_data"]) {
			$this->setMessage("Data Quantity tidak mengalami perubahan. Yakin untuk disimpan?");
		}
	}
}

Perhatikanlah kode di atas. Untuk membandingkan data yang lama dan yang baru pada field Quantity, kita menggunakan bantuan variabel session. Kedua data masing-masing kita simpan ke variabel session dengan nama old_data dan new_data.

Data yang lama kita ambil dari property EditValue milik field Quantity hanya pada saat ID halaman bernilai edit dan property CurrentAction tidak bernilai F. Artinya, itu adalah saat form Edit pertama kali terbuka atau dimuat oleh sistem.

Sedangkan data yang baru kita ambil dari property ViewValue milik field Quantity hanya pada saat ID halaman bernilai edit dan property CurrentAction bernilai F. Artinya, itu saat halaman konfirmasi sedang ditampilkan.

Jadi, untuk memeriksa kondisi apakah data lama dan baru tidak mengalami perubahan, kita cukup membandingkan nilai keduanya pada saat halaman konfirmasi tadi ditampilkan. Jika data lama sama dengan data baru, maka tampilkan pesan di halaman tersebut, bahwa data Quantity tidak mengalami perubahan, disertai pertanyaan apakah yakin data ingin disimpan.

Selanjutnya, jika Pengguna mengklik tombol Cancel, maka sistem akan kembali ke form Edit. Sedangkan jika Pengguna menekan tombol Confirm, maka data akan disimpan ke Database.

Keempat, atau yang terakhir, pastikan kita sudah men-generate ulang semua file script dengan menggunakan PHPMaker, seperti biasa.

Setelah itu, jalankan Aplikasi Web dari browser. Klik menu Order Details untuk menampilkan halaman List yang menampilkan data tersebut. Lalu klik menu Edit di salah satu record yang kita inginkan. Sistem akan menampilkan form Edit. Cobalah untuk tidak mengubah data apapun, lalu klik tombol Save, maka di halaman yang muncul selanjutnya, akan terdapat pesan konfirmasi seperti yang terdapat di kode tadi.

Cobalah untuk menekan tombol Cancel, maka sistem akan menampilkan kembali form Edit tadi. Sekarang ubahlah data pada field Quantity. Setelah itu tekan lagi tombol Save, maka di halaman selanjutnya, pesan konfirmasi tadi sudah tidak ada lagi. Artinya, data Quantity sudah diubah oleh si Pengguna tadi.

Sampai di sini kita sudah berhasil menerapkan kebutuhan tadi. Tentu saja, fitur ini masih memiliki sedikit keterbatasan. Apa itu? Untuk menampilkan halaman konfirmasi tadi, sistem tetap membutuhkan satu HTTP Request ke server. Tentu saja hal ini membutuhkan waktu sedikit lama, dibandingkan jika seandainya kita bisa menampikan kotak dialog yang muncul secara popup.

Sayangnya, framework yang digunakan oleh PHPMaker belum sepenuhnya mendukung ini. Saya katakan belum sepenuhnya, karena sebenarnya PHPMaker sudah menyediakan Javascript function untuk menampilkan kotak dialog konfirmasi yang dilengkapi tombol OK dan Cancel. Tapi, untuk menggunakan fungsi ini, tentu kita harus berpikir lagi untuk menambahkan kode yang memanggil fungsi tadi di bagian Client Scripts. Selain itu, kita juga harus menangani kemungkinan jika si Pengguna membatalkan atau melanjutkan ke proses penyimpanan.

Nah, kabar baik buat Anda yang sudah menggunakan Masino Extensions maupun Masino Template. Anda tidak perlu lagi bersusah payah untuk menambahkan kode di server event Row_Rendered tadi. Anda juga tidak perlu repot-repot menambahkan kode di bagian Client Scripts pada project PHPMaker Anda.

Mengapa? Karena pesan konfirmasi menggunakan kotak dialog itu bisa Anda aktifkan cukup dari level Table melalui extension MasinoFixedWidthSite13 (jika menggunakan Masino Extensions). Atau, jika Anda menggunakan Masino Template, maka cukup aktifkan dari level Table melalui extension MasinoTemplateSettings13. Secara standar (default), fitur ini sudah dalam keadaan aktif. Jadi, Anda tinggal generate saja semua file script seperti biasa.

Jika Anda mengaktifkan item pengaturan Modal dialog dari level Table PHPMaker untuk halaman Add dan/atau Edit, maka fitur kotak dialog konfirmasi ini selalu digunakan. Dengan kata lain, fitur ini tidak bisa dinonaktifkan. Alasannya? Adalah wajar ketika Pengguna ingin menyimpan data dari form Add maupun Edit melalui kotak Modal dialog, maka Pengguna harus diberi kesempatan untuk memeriksa ulang data sebelum benar-benar yakin ingin disimpan ke Database.

Yang menariknya lagi adalah, kotak dialog yang muncul secara popup tadi bisa digeser oleh Pengguna ke posisi yang diinginkan. Hal ini sangat berguna, jika Pengguna ingin melihat data yang ditutupi oleh kotak pesan tadi. Selain itu, Aplikasi Web yang kita bangun pun akan semakin terlihat profesional.

Betapa PHPMaker sudah terbukti dan teruji untuk membantu tugas Web Developer dalam membangun Aplikasi Web. Dengan menggunakan PHPMaker ditambah lagi dengan Masino Extensions atau Masino Template, maka Aplikasi Web dapat dikerjakan dengan mudah, cepat, dan menyenangkan tentunya.

Viewing all 176 articles
Browse latest View live