Masino Sinaga

Web Development, PHPMaker, & PHP Report Maker

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

September 12, 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

Comments

  1. alfa mengatakan

    Maret 24, 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

      Maret 26, 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

    Februari 8, 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

      Februari 8, 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

        Februari 9, 2021 pada 10:44 am

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

        Balas
        • Masino Sinaga mengatakan

          Februari 10, 2021 pada 3:15 pm

          Sama-sama.

          Balas

Tinggalkan Balasan Batalkan balasan

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pos-pos Terbaru

  • Betapa Mudahnya Mengubah Link atau URL Export to PDF dari PHPMaker 2021
  • Nomor Urut Record di Export Data pada PHPMaker 2020 dan PHPMaker 2021
  • Hati-hati Menggunakan Setting Lookup Cache di PHPMaker 2021
  • Menampilkan Halaman Default untuk Pengunjung dan Pengguna dari PHPMaker 2021
  • Server Event Page_Render dan Page_Rendering di PHPMaker, Apa Sih Bedanya?

Menu

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

Komentar Terbaru

  • Betapa Mudahnya Mengubah Link atau URL Export to PDF dari PHPMaker 2021 – Masino Sinaga pada Mudahnya Mengubah URL Export Data di Aplikasi Web dari PHPMaker
  • Masino Sinaga pada Awas Menyesal Lho, Kalau Belum Pakai PHPMaker 2021!
  • nur syamsu pada Cihuuuyyyy … PHPMaker 2021 Sudah Dirilis
  • nur syamsu pada Cihuuuyyyy … PHPMaker 2021 Sudah Dirilis
  • nur syamsu pada Awas Menyesal Lho, Kalau Belum Pakai PHPMaker 2021!

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 - 2019 | WordPress | Catat masuk | Kembali ke atas