Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker
Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker
Mudahnya Mengambil Frase Bahasa Tertentu di Aplikasi Web dari PHPMaker

Mudahnya Membatasi Jumlah Karakter di TextArea Aplikasi Web dari PHPMaker

Jum, 12 September 2014 oleh Masino Sinaga 6 Komentar

Sebagai Web Developer, Anda mungkin pernah mengalami kesulitan ketika ingin membatasi jumlah karakter yang boleh dimasukkan oleh Pengguna ke sebuah elemen TextArea di Aplikasi Web yang Anda bangun. Biasanya hal ini terjadi saat Pengguna sedang menambah data baru atau mengubah data yang sudah ada.

Untuk mengatasi ini tentu saja kita langsung terbayang untuk menggunakan kode jQuery karena lebih simpel tapi cukup dahsyat hasilnya dibandingkan dengan kode Javascript. Sayangnya, banyak kode jQuery yang bertebaran di Internet hanya menangani saat Pengguna mengetikkan karakter saja. Ketika Pengguna memasukkan dengan cara copy and paste, maka akan tetap lolos juga seluruh karakter yang dimasukkan melebihi jumlah batas maksimal. Tentu kita tidak menginginkan kondisi yang terakhir terjadi.

Kabar baik jika Anda menggunakan PHPMaker dalam membangun Aplikasi Web tersebut. PHPMaker telah menyediakan framework yang bagus untuk menempatkan kode jQuery dari bagian Startup Script di bawah bagian Client Scripts. Kode jQuery yang akan kita gunakan di bawah ini pun sudah mengatasi jika Pengguna mencoba curang dengan menggunakan copy and paste.

Katakanlah nama Field yang menggunakan control TextArea tersebut adalah Comments, dan jumlah karakter yang ingin kita batasi hanya maksimal 30 karakter saja.

Untuk mengimplementasikan hal ini, maka cukup tambahkan kode ini ke bagian Startup Script yang masing-masing terdapat di bawah Client Scripts -> Table-Specific -> Add/Copy Page dan juga di bawah Client Scripts -> Table-Specific -> Edit Page dari project PHPMaker Anda.

// Pemanggilan plugin
$(document).ready(function() {
	$("#x_Comments").LimitCharacters({
		limit: 30,
		id_result: "counter",
		alertClass: "alert"
	});
});

// Plugin
(function($){  
 $.fn.LimitCharacters = function(options) {  
 	var defaults = {
		limit: 200,
		id_result: false,
		alertClass: false
	}
 	var options = $.extend(defaults, options);
	return this.each(function() {  
	var characters = options.limit;
	if (options.id_result != false) {
		$("#"+options.id_result).append("You have <strong>"+ characters+"</strong> characters");
	}
	$(this).keyup(function() {
		if($(this).val().length > characters) {
		$(this).val($(this).val().substr(0, characters));
		}	
		if (options.id_result != false) {
			var remaining = characters - $(this).val().length;
			$("#"+options.id_result).html("You have <strong>"+remaining+"</strong> characters");
			if(remaining <= 10) {
				$("#"+options.id_result).addClass(options.alertClass);
			} else {
				$("#"+options.id_result).removeClass(options.alertClass);
			}
		}
	});
	});  
 };  
})(jQuery);

Perhatikan bahwa PHPMaker akan selalu menambahkan prefix atau awalan x_ yang diikuti dengan nama Field untuk setiap ID, pada elemen yang terdapat di sebuah Form. Itulah mengapa di bagian pertama Anda melihat selector yang bernama x_Comments (bukan Comments saja).

Perlu untuk Anda ketahui juga, bahwa kode jQuery di atas terdiri dari dua bagian. Bagian paling atas atau Pemanggilan plugin merupakan kode utama yang menghubungkan dengan elemen TextArea yang dalam hal ini memiliki ID sebagai x_Comments. Sedangkan kode di bagian bawah atau Plugin merupakan fungsi atau istilah di jQuery disebut dengan plugin yang akan memeriksa karakter yang dimasukkan ke elemen TextArea.

Perhatikan juga bahwa di bagian kode Plugin tersebut, secara standar sudah membatasi jumlah maksimal sebanyak 200 karakter. Nilai ini adalah nilai default, jika misalnya Anda tidak mendefinisikan secara eksplisit ketika memanggil plugin tadi. Tapi dalam contoh di atas, karena kita membatasi hanya maksimal sampai 30 karakter, maka kita harus mendefinisikannya secara eksplisit dengan kode:

limit: 30

Menariknya lagi adalah, plugin jQuery yang kita gunakan tersebut sudah menangani kemungkinan jika Pengguna melakukan copy and paste data yang jumlah karakternya melebihi dari 30 karakter. Jika ini terjadi, maka sistem akan mendeteksinya dan langsung otomatis memotong hanya sampai karakter ke-30 saja yang bisa masuk ke TextArea. Karakter ke-31 dan seterusnya akan diabaikan atau dihapus dari TextArea tersebut.

Tidak hanya itu saja, plugin ini juga bahkan sudah menyediakan pilihan kepada Anda sebagai Web Developer untuk menampilkan informasi yang memberitahukan jumlah karakter yang sudah dimasukkan, melalui parameter id_result, yang dalam contoh di atas menggunakan nama selector counter.

Plugin tersebut juga dilengkapi dengan nama class yang digunakan untuk menampilkan pesan peringatan jika melebihi karakter maksimal, yang dalam contoh di atas menggunakan nama class alert.

Plugin ini saya peroleh dari website: http://www.yourinspirationweb.com/en/jquery-tips-tricks-how-to-limit-characters-inside-a-textarea/, kredit buat om Maurizio Tarchini.

Wow, keren sekali, ‘kan? 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:Client Scripts, jQuery, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker

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.

Tabel yang Selalu Muat dengan Lebar Layar di Aplikasi Web dari PHPMaker
Mudahnya Mengambil Frase Bahasa Tertentu di Aplikasi Web dari PHPMaker

Komentar

  1. alfa mengatakan

    Kam, 24 Maret 2016 pada 9:49 pm

    Malam pak masino…..bila menampilkan peringatan jumlah pesanan melebihi jumlah stok tersedia dari kolom stok dan kolom pesanan tabel order gmana caranya pak…..mohon bantuanya….trima kasih

    Balas
    • Masino Sinaga mengatakan

      Sab, 26 Maret 2016 pada 6:38 pm

      Caranya, Anda bisa menggunakan server event Row_Inserting dan/atau Row_Updating. Silahkan baca topik Server Events and Client Scripts dari menu Help PHPMaker.

      Balas
  2. buzbuz mengatakan

    Sen, 8 Februari 2021 pada 6:47 pm

    Selamat Malam pak Masino,… ada yg ingin saya tanyakan, mungkin pernah mengalami perihal yg sama, saya menggunakan phpmaker 2019, dan yg ingin saya tanyakan adlah penggunaan tinymce pada textarea,.. tinymce bisa muncul, hanya jika ingin attach picture, button utk selext source file tidak muncul.. mungkin ada solusinya memunculkan button file.. atau memang secara default textarea tidak diperkenankan utk insert picture..

    Balas
    • Masino Sinaga mengatakan

      Sen, 8 Februari 2021 pada 7:28 pm

      Benar. Untuk menampilkan gambar atau picture di TextArea yang menggunakan HTML Editor seperti CKEditor (saya tidak tahu apakah support TinyMCE), maka harus menggunakan extension tambahan yang bernama FileManager (hanya untuk registered users dari PHPMaker).

      Keterangan singkatnya seperti ini:

      RichFileManager for CKEditor
      Developer Website: https://github.com/servocoder/RichFilemanager
      RichFileManager is released under MIT license.

      Berikut ini sekilas highlight fitur-nya:

      Advanced Settings:
      – “UserFilesPath” is a folder under the global upload folder (under PHP -> General Options -> File Upload tab, see PHP Settings in the help file), e.g. if the global upload folder is “uploads/” (relative to project folder) and “UserFilesPath” is “userfiles”, then the user file folder is “uploads/userfiles” (relative to project folder). If “UserFilesPath” not specified, the global upload folder will be used. Make sure you have setup write permssions for the upload folder properly.
      – “UserConfig” (JSON object) is user configuration options to override the default options, see: https://github.com/servocoder/RichFilemanager/wiki/Configuration-options#configuration-file
      – “PluginParameters” (JSON object) is for the RichFileManager jQuery plugin initialization step and callback functions, see: https://github.com/servocoder/RichFilemanager/wiki/Configuration-options#plugin-parameters.

      Balas
      • buzbuz mengatakan

        Sel, 9 Februari 2021 pada 10:44 am

        Terima kasih informasinya pak Masino, bisa digunakan untuk CK editornya.

        Balas
        • Masino Sinaga mengatakan

          Rab, 10 Februari 2021 pada 3:15 pm

          Sama-sama.

          Balas

Tinggalkan Balasan Batalkan balasan

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

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

Pos-pos Terbaru

  • Item Menu Tetap Aktif Meskipun Sedang Menampilkan Halaman Tambah, Ubah, Tampilkan, Cari di PHPMaker 2022
  • Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Alasan AlwaysUseEnglishUSLocale Sebaiknya Aktif di Masino Extensions untuk PHPMaker 2022
  • MasinoInputMask18 Extension, Autoformat Angka dengan Fitur Lebih Kaya di PHPMaker 2022
  • MasinoSignature18 Extension, Mudahnya Mengelola Tanda Tangan di PHPMaker 2022

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Ini Dia Fitur-Fitur yang Terdapat di Masino Extensions untuk PHPMaker 2022
  • muslih pada Ini Dia Fitur-Fitur yang Terdapat di Masino Extensions untuk PHPMaker 2022
  • Masino Sinaga pada PHPMaker 2021 Menggunakan DBAL Menggantikan ADOdb
  • Bayu pada PHPMaker 2021 Menggunakan DBAL Menggantikan ADOdb
  • Masino Sinaga pada PHPMaker 2021 Menggunakan DBAL Menggantikan ADOdb

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2021 | WordPress | Catat masuk | Kembali ke atas