Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
Memastikan Checkbox Sudah Dipilih di Extended Search dari PHPMaker 2021

Auto Fill yang Fleksibel di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021

Sab, 12 Juni 2021 oleh Masino Sinaga 7 Komentar

Kadang-kadang, kita ingin mengakses Lookup Table menggunakan Ajax. Sebagai contoh, setelah Pengguna Akhir memasukkan data ke sebuah field, kita ingin mengotomatiskan field lain terisi datanya. Untuk itu, maka kita dapat menggunakan API dan Client Scripts untuk mengimplementasikannya.

Supaya Auto fill bisa dijalankan lewat kode yang kita tulis, maka pastikan untuk tidak mengaktifkan fitur built-in Auto-Fill di table Lookup Table.

Katakanlah, jika kita ingin memasukkan Product Price ketika kita memilih sebuah ProductID (dengan menggunakan table products sebagai lookup table) ketika sedang mengisi record baru, Anda dapat mengotomatiskan pengisian ProductPrice di table orderdetails, apakah secara asynchronous atau synchronous dengan kode.

Contoh pertama, kita bisa menggunakan Auto-Fill asynchronously dengan action API view.

Cukup dengan menulis kode Javascript di bagian Startup Script dari halaman Add milik table orderdetails, untuk melampirkan event onchange dan mendapatkan data dari table lain (dalam hal ini products) dengan action API yang bernama “view”.

$("#x_ProductID").change(function() { 
    $.get(ew.getApiUrl(["view", "products", $(this).val()]), function(res) { // Get response from API
        if (res && res.success) {
            var row = res["products"];
            $("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
        } else {
            ew.alert(res.failureMessage);
        }
    });
}); 

Dalam contoh ini, kita menggunakan Lookup API, sehingga tidak perlu menulis kode di sisi server.

Jika action = view, kita akan mendapatkan sebuah record dengan melewatkan Primary Key di URL. Jika Primary Key lebih dari satu, maka pisahkan dengan karakter pemisah composite key (nilai default-nya adalah karakter koma). Hasilnya adalah satu record.

Sedangkan jika action = list, kita akan mendapatkan beberapa record (object array), dengan melewatkan parameter pencarian di URL. Contohnya bisa dilihat dari URL di halaman List setelah melakukan proses pencarian. Hasilnya adalah array record.

Jika User ID dan/atau User Level diaktifkan, record-record dan/atau halaman akan tetap diproteksi. Jadi, jika misalnya Pengguna tidak memiliki hak akses ke halaman View, maka action view tadi (misalnya) tidak diijinkan.

Nilai yang dikembalikan adalah nilai asli dari Database. Tentu saja kita bisa mem-format-nya terlebih dulu sesuai dengan kebutuhan, sebelum ditampilkan ke field target.

Contoh kedua, kita bisa menggunakan Auto-Fill synchronously lewat ew.ajax().

Cukup dengan menuliskan kode Javascript ke bagian Startup Script milik halaman Add, untuk melampirkan event onchange.

$("#x_ProductID").change(function() { 
    var object = "products", data = { "action": "view", "object": object, "ProductID": encodeURIComponent($(this).val()) };
    var res = ew.ajax(data);
    if (res && res.success) {
        var row = res[object];
        $("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
    }
});  

Perlu diingat bahwa fungsi built-in ew.ajax() menggunakan API halaman View. Jadi, dalam hal ini kita tidak perlu menentukan URL.

Contoh ketiga, kita menggunakan Auto-Fill asynchronously melalui ew.ajax().

Cukup dengan menulis kode Javascript di bagian Startup Script milik halaman Add, dengan melampirkan event onchange. Sama seperti contoh 2 di atas.

$("#x_ProductID").change(function() { 
    var object = "products", data = { "action": "view", "object": object, "ProductID": encodeURIComponent($(this).val()) };
    ew.ajax(data, function(res) { // Lewatkan fungsi callback sebagai parameter kedua ew.ajax()
        if (res && res.success) {
            var row = res[object];
            $("#x_UnitPrice").val(row["UnitPrice"]); // isi hasil ke field target
        }
    });
}); 

Contoh keempat, kita menggunakan Auto-Fill asynchronously lewat custom API action dan Client Script.

Pastikan untuk menulis API handler terlebih dulu, katakanlah “getUnitPriceByProductID”, dan tempatkan di bagian Global Code untuk mengembalikan nilai yang dibutuhkan. Dalam contoh ini, hanya nilai tunggal yang dibutuhkan, jadi ExecuteScalar() yang kita gunakan.

$API_ACTIONS["getUnitPriceByProductID"] = function(Request $request, Response $response) {
    $productId = Param("ProductID"); // Get the input value from $_GET or $_POST
    if ($productId !== NULL) 
        Write(ExecuteScalar("SELECT UnitPrice FROM products WHERE ProductID = " . AdjustSql($productId))); // Output field value as string
};

Jika kita ingin mengembalikan seluruh baris dengan JSON, maka kita dapat menggunakan WriteJson() yang dikombinasikan dengan ExecuteRow().

WriteJson(ExecuteRow("SELECT * FROM products WHERE ProductID = " . AdjustSql($productId))); // Output the row (array) as JSON

Selanjutnya tulis kode Javascript di bagian Startup Script milik halaman Add untuk melampirkan event onchange:

$("#x_ProductID").change(function() { 
    var url = ew.API_URL, action = "getUnitPriceByProductID", id = encodeURIComponent($(this).val());
    //$.get(url + "/" + action + "?ProductID=" + id, function(res) { // URL format if URL Rewrite enabled
    $.get(url + "?action=" + action + "&ProductID=" + id, function(res) { // Get response from custom API action
        if (res)
            $("#x_UnitPrice").val(res); // isi hasil ke field target
    });
});

Betapa mudahnya, bukan?

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, PHPMaker 2021, 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, ilovephpmaker.com, dan phpmakerprojects.com.

Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
Memastikan Checkbox Sudah Dipilih di Extended Search dari PHPMaker 2021

Komentar

  1. Dendi mengatakan

    Sel, 21 September 2021 pada 5:24 pm

    Bang Masino, apakah AutoFill dengan metode ini bisa untuk menampilkan Field dalam bentuk gambar ?

    Mengingat secara default dari dalam project PHPMaker belum bisa (sejauh yang saya tau)

    Jadi misal AutoFill Input NIM, bisa muncul Nama, Alamat , foto (dalam bentuk gambar)

    Balas
    • Masino Sinaga mengatakan

      Rab, 22 September 2021 pada 12:48 pm

      Tidak bisa.

      Balas
  2. Omar Noboa mengatakan

    Kam, 23 September 2021 pada 11:44 pm

    Hi Massino,

    I have used the example to be able to dynamically fill a combobox when selecting an employee from a lookup but I get the following error in the browser:

    api/?action=cPeriodoVacacionPendiente&emplecodigo=EMP00186:1 Failed to load resource: the server responded with a status of 401 (Unauthorized)

    This is my code in Client Script->Table-Specific->Add/Copy Page->Startup Script

    $(document).ready(function() {
       $("#x_emplecodigo").change(function() { 
        	var url = ew.API_URL, action = "cPeriodoVacacionPendiente", emplecodigo = 
            encodeURIComponent($(this).val());
        	//$.get(url + "/" + action + "?ProductID=" + id, function(res) { // URL format if URL Rewrite enabled
        	$.get(url + "?action=" + action + "&emplecodigo=" + emplecodigo, function(res) { // Get response from custom API action
            	if (res)
                	$("#x_periodo").val(res); // isi hasil ke field target
            });
        }); 
    }); 
    

    This is my code in Global Code :

    //Ejemplo Autofill Periodo
    $API_ACTIONS["cPeriodoVacacionPendiente"] = function(Request $request, Response $response) {
        $codigo = Param("emplecodigo"); // Get the input value from $_GET or $_POST
        alert($codigo);
        if ($codigo !== NULL) 
            WriteJson(ExecuteRow("SELECT * FROM vvacacion_dias_periodo WHERE emplecodigo = " . AdjustSql($codigo))); // Output field value as string
    };    
    

    Could you tell me what I have to do for it to function?

    In the first execution the combo loads correctly, but if I change the employee code, the Client Script is executed but it does not load the combo again, it stays with the same data.

    Thanks and regards.

    Balas
    • Masino Sinaga mengatakan

      Jum, 24 September 2021 pada 6:54 am

      For such case, then you should use Dynamic Selection List. Please read Tutorial – Dynamic Selection List.

      Balas
  3. Roy mengatakan

    Rab, 5 April 2023 pada 9:34 am

    Hii Pak Masino..
    Bagaimana menggunakan auto fill untuk case realisasi produk di penjualan dari produk yang ada order penjualan?

    Tabel info
    Order :
    Order_id

    Order_detail :
    Order_id
    Produk_id

    Sales :
    Sales_id
    ORDER_ID => COMBO BOX (ORDER TABLE)

    Sales_detail :
    Sales_id
    Produk_id

    * pada saat di sales (master detail), setelah order id dipilih, maka produk id terisi otomatis dari order_detail dengan nomor order yang sama

    Salam

    Balas
    • Masino Sinaga mengatakan

      Rab, 5 April 2023 pada 10:44 am

      Sudah coba fitur Auto Fill di PHPMaker?

      Balas
      • Royni Lim mengatakan

        Kam, 6 April 2023 pada 8:12 am

        sudah dan berhasil kalo untuk satu tabel.
        saya coba dengan case, pilih id_barang, auto fill untuk nama dan harga (sperti di demo produk).

        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

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024
  • Mudahnya Mengunci Record dengan Javascript Count Down di PHPMaker 2023
  • Ini Alasan Kenapa Kalian Harus Beralih ke PHP 8

Menu

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

Komentar Terbaru

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download! – Masino Sinaga pada Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Custom Domain URL di Masino Extensions untuk PHPMaker 2020
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Membatasi Akses Versi Live dan Versi Development Aplikasi Web dari PHPMaker
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Nomor Urut Record di Export Data pada PHPMaker 2020 dan PHPMaker 2021
  • Masino Sinaga pada Review PHPMaker 2024

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. 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 - 2023 | WordPress | Catat masuk | Kembali ke atas