Bootstrap

Berikut adalah Step by Step cara pembuatan development dengan Master Template Bezframe

Step 1 Pastikan anda sudah mendownload source BezFrame dan sudah terinstallasi dengan baik.

Step 2 Dikomputer anda sudah terinstall Local Server (Apache) dan Database MYSQL.
Jika belum anda bisa mendownload Download XAMPP Pilih versi terbaru. Atas bisa juga menggunakan Download AppServ.
Keduanya adalah Tool untuk menginstall Local Server (Apache) sekaligus Database MYSQL.

Step 3 Tahap Development.

Tahap Persiapan

Disini kita akan mencoba membuat sebuah Master Employee dengan Role Sebagai Berikut :

1. Pembuatan Table "Master Karyawan"
2. Membuat Front End Layout Data Karyawan
3. Layout awal akan menampilkan Daftar Karyawan yang bisa di Filter berdasarkan Pekerjaan atau Departemen masing2
4. Proses bisa melakukan input data baru, Ubah Data & Hapus Data
5. Di berikan Flag untuk Karyawan Aktif/NonAktif

Tahap 1 Pembuatan Table "Master Karyawan"

Contoh sederhana kita membuat Table Master Karyawan seperti dibawah ini :

CREATE TABLE `emp_master` (
`id` int(11) NOT NULL,
`emp_nik` varchar(5) NOT NULL,
`emp_name` varchar(50) NOT NULL,
`emp_address` varchar(199) DEFAULT NULL,
`emp_tmp_lahir` varchar(50) NOT NULL,
`emp_gender` varchar(1) NOT NULL DEFAULT 'L',
`emp_tgl_lahir` date NOT NULL DEFAULT '0000-00-00',
`emp_email` varchar(50) DEFAULT NULL,
`emp_telp` varchar(50) DEFAULT NULL,
`emp_job` int(11) NOT NULL DEFAULT 0,
`emp_dept` int(11) NOT NULL DEFAULT 0,
`emp_salary` decimal(24,2) NOT NULL DEFAULT 0.00,
`emp_status` varchar(1) NOT NULL DEFAULT 'Y',
`input_by` varchar(100) DEFAULT NULL,
`input_dt` timestamp NULL DEFAULT current_timestamp(),
`update_by` varchar(100) DEFAULT NULL,
`update_dt` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci;


ALTER TABLE `emp_master`
ADD PRIMARY KEY (`id`);

ALTER TABLE `emp_master`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Ada sedikit aturan untuk pembuatan table agar bisa bekerja pada Template Bezframe yaitu :

CREATE TABLE `emp_master` (
`id` int(11) NOT NULL,
...
...
...
`input_by` varchar(100) DEFAULT NULL,
`input_dt` timestamp NULL DEFAULT current_timestamp(),
`update_by` varchar(100) DEFAULT NULL,
`update_dt` datetime DEFAULT NULL
);

Data Field diatas harus ada pada setiap table yang dibuat.
id = Primary Key atau Uniqe Key. Digunakan sebagai relation table dan dibuat Auto Increment
input_by = Default user saat data pertama kali di simpan
input_dt = Default Tanggal System saat data pertama kali di simpan
update_by = Ketika dalam proses update, maka update_by akan terisi oleh user yang melakukan update
update_dt = Tanggal System ketika data diupdate

Tahap 2 Ambil Sample Module Master di "mod/sample/master_01"

1. Copy & Rename Folder mod/sample/master_01 dengan Folder project yang akan dibuat
Misalkan : mod/production/mst_karyawan

2. Daftarkan menu di module Management & User Management

Tahap Development

Jika tahapan diatas sudah berhasil, selanjutnya kita tinggal membedah module yang di copy tadi, untuk disesuaikan dengan project yang akan dibuat

Tahap 1 Buka File mod/production/[folder Project Anda]/mainform.php

1. Hapus Pada bagian dibawah ini, Karena ini digunakan untuk Contoh Dokumentasi
/* Remak DOKUMENTASI jika untuk pembuatan asli */ $title_documentasi ="</br> <h5>Contoh Development Single Table menggunakan <span class='text-primary'><b>BezFrame</b></span>Template</h5> <blockquote> <h2>Ilustrasi</h2> Membuat Master Karyawan dengan menggunakan 1 (satu) table, lengkap dengan Input, Edit, Hapus dan juga validasi-validasi lainnya.</br> Source Code, bisa dilihat di folder <span class='text-primary'>mod/master_01</span>. Lihat Dokumentasi untuk cara pengerjaaannya. </blockquote>"; /******************************************************** END DOKUMENTASI *********************************************************/
2. Sesuaikan pada Parameter dbawah ini, dengan project yang anda buat :
$paramitem_form = array ( "title_name"=>"Master Karyawan", "prm_modulname"=>"master_01", "prm_modalform"=>"modallg", "prm_reload"=>"Y", "insert_st"=>"Y", "update_st"=>"Y", "delete_st"=>"Y", "paramitem_show"=>"N", "paramitem_title"=>"SEARCH", "paramitem_min"=>"N", "paramitem_row"=>2 );
No Nama Parameter Value Keterangan
1 title_name "title_name"=>"Master Karyawan", Judul Project Anda
2 prm_modulname "prm_modulname"=>"mst_karyawan", Sesuaikan dengan nama Folder project yang di buat
3 prm_modalform "prm_modalform"=>"modallg", Nama Modal Form yang digunakan untuk proses input & Update. Ada beberapa tipe Ukuran seperti dibawah ini :
==================== modalxs = kecil modalmd = sedang modallg = besar modalxl = extra besar =====================
4 prm_reload "prm_reload"=>"Y", Tombol Reload/Refresh akan ditampilkan
5 insert_st "insert_st"=>"Y", isi {Y|N}. Y=User bisa melakukan Insert/Penambahan Data
6 update_st "update_st"=>"Y", isi {Y|N}. Y=User bisa melakukan Perubahan Data
7 delete_st "delete_st"=>"Y", isi {Y|N}. Y=User bisa melakukan Penghapusan Data
8 paramitem_show "paramitem_show"=>"N", Jika ingin menampilkan Pencarian/Filter diawal maka input dengan 'Y'
9 paramitem_title "paramitem_title"=>"SEARCH", Title Pencarian. paramitem_show='Y' (Required)
10 paramitem_min "paramitem_min"=>"Y", isi {Y|N}. Y=Parameter Pencarian memiliki Colapse untuk buka dan tutup
11 paramitem_row "paramitem_row"=>"2", Jumlah parameter yang digunakan. paramitem_show='Y' (Required)

Untuk kasus yang akan dibuat sekarang ini, parameter akan menjadi seperti dbawah ini :

$paramitem_form = array ( "title_name"=>"Master Karyawan", "prm_modulname"=>"mst_karyawan", "prm_modalform"=>"modallg", "prm_reload"=>"Y", "insert_st"=>"Y", "update_st"=>"Y", "delete_st"=>"Y", "paramitem_show"=>"N", "paramitem_title"=>"SEARCH", "paramitem_min"=>"N", "paramitem_row"=>2 );
3. Membuat Parameter pencarian (Ini akan dibahas diakhir sesi ini) :

Tahap 2 Buka File mod/production/[folder Project Anda]/datatable.php

Pada bagian ini kita akan mendefinisikan untuk data yang akan ditampilkan dalam bentuk Table

1. Ubahlah pada bagian ini sesuai dengan kebutuhan anda

/*Ubah bagian ini sesuai dengan table yang akan dibuat */ $prm_tablename = "$dbname1.emp_master"; $mythead="<th class='bg-gray elevation-2'>No</th> <th class='bg-gray elevation-2'>NIK</th> <th class='bg-gray elevation-2'>Nama Employee</th> <th class='bg-gray elevation-2'>Alamat</th> <th class='bg-gray elevation-2'>Action</th> ";

2. Buat Query untuk menampilkan data seperti dbawah ini

$STD = $DBH->query("SELECT * FROM $dbname1.emp_master a $pwhere_cond ORDER BY a.emp_nik"); $STD->setFetchMode(PDO::FETCH_ASSOC); $mytbody=""; $no=0; while($rowd = $STD->fetch()) { $no++; $mytbody.="<tr>"; $hid= $rowd['id']; $emp_nik= $rowd['emp_nik']; $emp_name= $rowd['emp_name']; $emp_address= $rowd['emp_address']; #Action Button for insert $bbtn_insert=""; if ($insert_st =='Y') { $bbtn_insert="<button type='button' class='btn btn-primary btn-sm' onclick=masteraction('','insert','$prm_modulname','$prm_modalform');>Insert</button>"; } #Action Button for Update $bbtn_update=""; if ($update_st =='Y') { $bbtn_update="<button type='button' class='btn btn-secondary btn-sm' onclick=masteraction('$hid','update','$prm_modulname','$prm_modalform');>Edit</button>"; }else { $bbtn_update="<button type='button' class='btn btn-secondary btn-sm' onclick=masteraction('$hid','view','$prm_modulname','$prm_modalform');>View</button>"; } #Action Button for Delete $bbtn_delete=""; if ($delete_st =='Y') { $bbtn_delete="<button type='button' class='btn btn-danger btn-sm' onclick=showdelete('$hid');>Del</button>"; } $mytbody.="<td class='text-left'>$no</td>"; $mytbody.="<td class='text-left'>$emp_nik</td>"; $mytbody.="<td class='text-left'>$emp_name</td>"; $mytbody.="<td class='text-left'>$emp_address</td>"; $mytbody.="<td class='text-center' width=60px><div class='btn-group'>$bbtn_update $bbtn_delete</div></td>"; $mytbody.="</tr>"; } $myshowtfoot ='N';

3. Testing Jalankan untuk sementara

Jika anda melihal hasil seperti dibawah ini, maka tinggal selangkah lagi development anda telah selesai.



Tahap 3 Buka File mod/production/[folder Project Anda]/dataform.php

Pada bagian ini kita akan membuat layout untuk proses input & edit data karyawan

1. Sesuaikan Initial database & Table yang digunakan

/* Initial Table for query form */ $frm_tab ="$dbname1.emp_master"; $frm_tabview ="$dbname1.emp_master"; $frm_query =""; $frm_key ="id"; $frm_grouptab =1;//Jumlah Group Layout

Untuk MODE Edit, disediakan 3 pilihan untuk penampilan data. Urutannya akan terbagi seperti :
$frm_query => $frm_tabview => $frm_tab

Contoh penggunaan :

$frm_query ="Select * from $dbname1.emp_master"; Anda bisa menggunakan Join jika ada Reference Table yang akan digunakan.
$frm_tabview ="[jika menggunakan table view]";

2. Ubah Array Form seperti dibawah ini
Penjelasan mengenai penggunaan Komponen Array bisa dilihat di BezFrame Array Komponen

/*=============COLUMN GROUP 1====================*/ /* Untuk Query LookUp Select,Select2 atau LOV */ /* 1. sample Lookup Value Item "Pekerjaan" dengan menggunakan type data "select" yang diambil dari table "mst_jobs" */ $lov_jobs="SELECT a.lovcode,a.lovname FROM ( SELECT a.id as lovcode,a.job_name as lovname FROM $dbname1.mst_jobs a ) a ORDER BY a.lovcode"; /* 2. sample Lookup Value Item "Departemen" dengan menggunakan type data "select2" yang diambil dari table "mst_dept" */ $lov_dept="SELECT a.lovcode,a.lovname FROM ( SELECT a.id as lovcode,a.dept_name as lovname FROM $dbname1.mst_dept a ) a ORDER BY a.lovcode"; /***********************************************/ $frmitem_col_1="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"; $frmitem_title_1="MASTER EMPLOYEE"; $frmitem_title_color_1="bg-gray"; $frmitem_min_1="N"; $frmitem_row_1=10; //Nilai harus sama dengan jumlah array jumlah "Array" $frmitem_data_1 = array ( array("prm_title"=>"NIK", "prm_itemfield"=>"emp_nik", "prm_itemtype"=>"text", "prm_itemreq"=>"required", "prm_itemlength"=>"5", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_nik", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Nama Karyawan", "prm_itemfield"=>"emp_name", "prm_itemtype"=>"text", "prm_itemreq"=>"required", "prm_itemlength"=>"100", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_name", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Alamat", "prm_itemfield"=>"emp_address", "prm_itemtype"=>"textarea", "prm_itemreq"=>"required", "prm_itemlength"=>"500", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_address", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Jenis Kelamin", "prm_itemfield"=>"emp_gender", "prm_itemtype"=>"radio", "prm_itemreq"=>"required", "prm_itemlength"=>"5", "prm_defaval"=>"L", "prm_itemdb"=>"Y", "prm_itemval"=>"LAKI-LAKI=L|PEREMPUAN=P", "prm_itemid"=>"emp_gender", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Tempat Lahir", "prm_itemfield"=>"emp_tmp_lahir", "prm_itemtype"=>"text", "prm_itemreq"=>"", "prm_itemlength"=>"100", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_tmp_lahir", "prm_col"=>"col-xl-8 col-lg-8 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Tanggal Lahir", "prm_itemfield"=>"emp_tgl_lahir", "prm_itemtype"=>"date", "prm_itemlength"=>"20", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_tgl_lahir", "prm_col"=>"col-xl-4 col-lg-4 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Pekerjaan", "prm_itemfield"=>"emp_job", "prm_itemtype"=>"select", "prm_itemreq"=>"required", "prm_itemlength"=>"100", "prm_sqlval"=>"$lov_jobs", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_job", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Departemen", "prm_itemfield"=>"emp_dept", "prm_itemtype"=>"select2", "prm_itemreq"=>"required", "prm_itemlength"=>"100", "prm_sqlval"=>"$lov_dept", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_dept", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Salary", "prm_itemfield"=>"emp_salary", "prm_itemtype"=>"number", "prm_itemreq"=>"required", "prm_itemlength"=>"100", "prm_itemdb"=>"Y", "prm_itemid"=>"emp_salary", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12"), array("prm_title"=>"Karyawan Aktif", "prm_itemfield"=>"emp_status", "prm_itemtype"=>"switch", "prm_itemreq"=>"", "prm_itemlength"=>"50", "prm_defaval"=>"Y", "prm_itemdb"=>"Y", "prm_itemval"=>"Y|N", "prm_itemid"=>"emp_status", "prm_col"=>"col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12") ); /*=============END COLUMN GROUP 1====================*/

3. Testing kembali Project Anda

Jika anda berhasil maka proses sudah bisa melakukan Input Data Baru, Ubah data & juga Hapus data.



SELESAI, SIMPLE KAN ?

Cobalah untuk membuat beberapa transaksi baru, ubah data & hapus data..Untuk meyakinkan proses telah berjalan dengan baik

Copyright © 2023-2024 BezSoft
Powered by Bootstrap’s CSS, PHP, MYSQL and JavaScript