Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Mudahnya Membuat Form Layout 2 Kolom dari PHPMaker 2022
PHPMaker, dari Masa ke Masa
Mudahnya Mengubah Data yang Diekspor di Aplikasi Web dari PHPMaker 2022

Mudahnya Membuat Form Layout 2 Kolom dari PHPMaker 2022

Sab, 27 Agustus 2022 oleh Masino Sinaga 6 Komentar

Salah satu fitur unggulan di PHPMaker adalah Custom Templates. Melalui fitur ini, kita dapat mengubah layout di suatu halaman tertentu sesuai dengan keinginan.

Hal ini sekaligus menjawab pertanyaan atau anggapan sebagian besar orang yang menganggap tools code generator seperti PHPMaker sifatnya kaku atau tidak fleksibel jika ingin mengubah layout di suatu halaman.

Katakanlah kita ingin mengubah layout form di halaman Add dan Edit dari yang selama ini hanya terdiri dari 1 kolom menjadi 2 kolom pada table orderdetails di project demo2022.

Cukup dengan memasukkan kode ini ke bagian CustomTemplate di bawah lokasi Custom Templates -> Table-Specific -> Add Page dan Custom Templates -> Table-Specific -> Edit Page.

<div class="row">
 
  <div class="col-md-6">

    <div id="r_OrderID" class="row">
      <label id="elh_orderdetails_OrderID" for="x_OrderID" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption OrderID}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
      <div class="col-md-9 col-sm-9">{{{value OrderID}}}</div>
    </div>
 
    <div id="r_ProductID" class="row">
      <label id="elh_orderdetails_ProductID" for="x_ProductID" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption ProductID}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
      <div class="col-md-9 col-sm-9">{{{value ProductID}}}</div>
    </div>
 
    <div id="r_UnitPrice" class="row">
      <label id="elh_orderdetails_UnitPrice" for="x_UnitPrice" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption UnitPrice}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
      <div class="col-md-9 col-sm-9">{{{value UnitPrice}}}</div>
    </div>
    
  </div>
 
  <div class="col-md-6">

    <div id="r_Quantity" class="row">
      <label id="elh_orderdetails_Quantity" for="x_Quantity" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption Quantity}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
      <div class="col-md-9 col-sm-9">{{{value Quantity}}}</div>
    </div>
 
    <div id="r_Discount" class="row">
      <label id="elh_orderdetails_Discount" for="x_Discount" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption Discount}}} <?php echo Language()->phrase("FieldRequiredIndicator"); ?></label>
      <div class="col-md-9 col-sm-9">{{{value Discount}}}</div>
    </div>

    <div id="r_SubTotal" class="row">
      <label id="elh_orderdetails_Discount" for="x_SubTotal" class="col-md-3 col-sm-3 col-form-label ew-label">
      {{{caption SubTotal}}}</label>
      <div class="col-md-9 col-sm-9">{{{value SubTotal}}}</div>
    </div>

  </div>

</div>

Kode di atas artinya kita membuat 3 field di kolom pertama (OrderID, ProductID, dan UnitPrice), dan 3 field selanjutnya di kolom kedua (Quantity, Discount, dan SubTotal).

Kita menggunakan class row untuk membuat baris baru, dan class col-md-6 untuk masing-masing kolom pertama dan kedua.

Dengan kode di atas, maka urutan entri data dimulai dari field teratas sampai terbawah pada kolom pertama, dilanjutkan dengan field teratas sampai terbawah pada kolom kedua.

Hanya dengan sedikit kode itu saja, kita sudah dapat mengubah layout di halaman Add dan Edit dari Aplikasi Web yang dihasilkan oleh PHPMaker 2022.

Tidak perlu menulis kode sampai beratus-ratus baris untuk membuat fungsi CRUD di halaman Add dan Edit, karena selain kode di atas tadi, sudah ditangani oleh PHPMaker 2022. Cukup generate ulang semua file script, lalu nikmati hasilnya dari browser.

Kurang apalagi coba kerennya PHPMaker itu? Hohoho… 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Custom Templates, PHPMaker 2022, PHPMaker Indonesia, 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.

PHPMaker, dari Masa ke Masa
Mudahnya Mengubah Data yang Diekspor di Aplikasi Web dari PHPMaker 2022

Komentar

  1. Bayu mengatakan

    Sen, 14 November 2022 pada 9:06 am

    Horas Bang Naga.

    Ya emang keren PHPMaker.
    Mau nanya Bang, saya mau bikin jarak antar field saat Edit, tidak terlalu jauh.
    Saya coba cari style class div di edit styles theme template, tidak ketemu.
    Itu ada di bagian mana ya Bang?

    Btw, saya mau coba yang 2 kolom 1 page, tapi nanti di mobile browser gimana Bang?

    Terima kasih banyak Bang.

    Balas
    • Masino Sinaga mengatakan

      Sen, 14 November 2022 pada 3:04 pm

      Tinggal sesuaikan kolom kiri dari 3 ke 4, dan kolom kanan dari 9 ke 8, misalnya.

      Kalau ditampilkan di mobile browser, seharusnya otomatis menjadi satu kolom semuanya.

      Balas
      • Bayu mengatakan

        Rab, 16 November 2022 pada 7:46 am

        Maksih Bang.

        Untuk yang div style gimana Bang?

        Balas
        • Masino Sinaga mengatakan

          Rab, 16 November 2022 pada 8:24 am

          Maksudnya div style apa ya? Kode di atas kan sudah pakai div, tapi tanpa style. Dia memanfaatkan css class yang sudah tersedia di Bootstrap 5.

          Balas
  2. Bayu mengatakan

    Kam, 17 November 2022 pada 4:44 am

    Jadi gini Bang.
    Ketika mode Edit, muncul field-field tersusun ke bawah.
    Antar field itu ada jarak. Kalau diinspect, mereka dipisah menggunakan div.
    Yang ingin saya tanyakan, adakah cara mengatur jarak field tersebut di template style?

    Terima kasih.

    Balas
    • Masino Sinaga mengatakan

      Kam, 17 November 2022 pada 3:57 pm

      Sepertinya ada, tapi saya belum eksplorasi sampai sejauh itu. Dicoba sendiri saja mas, semoga berhasil.

      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 for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

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