#ckicompetition2018 Cara Membuat Form One2many Cakephp Dengan jQuery Multifield Untuk Memasukan Data Ke Postgresql

Hallo Guys...

Setelah kita berjalan-jalan melintasi dunia Coding yang sangat luas, tiba saat nya kita mampir di salah satu Framework PHP yang Lezat Yaitu CakePHP, Ya... betul sekali Cake adalah kue, maka CakePHP adalah PHP sambil makan kue (?)

Kita sudahi saja pembuka yang unfaedah ini, mari langsung kita to the tutorial Bagaimana Cara Membuat Form One2many yang mana akan ada inputan sebagai Header(One) dan juga Inputan sebagai Detail(Many)

Sebelum anda mengetahui lebih dalam, ada baiknya anda mengetahui mengapa saya membuat Tutorial Ini..

Pertama, Dikarenakan Adanya salah satu Lomba dari Event Stikom CKI Jakarta yaitu lomba Blog :) #ckicompetition2018

Yang Kedua, Dikarenakan Belum ditemukannya tutorial ini baik di blog maupun di youtube baik referensi bahasa inggris maupun bahasa indonesia ya... Bisa silahkan dicari tau dan di infokan bila menemukan :p

Let's Do This...

Form yang akan kita buat sederhana, yaitu seperti gambar ini

Untuk Database Kita Menggunakan Postgresql, jadi buat saja dahulu database di postgresql, nama database bebas, kalau saya nama database nya "my_project"

dan pengaturan app.php menjadi seperti ini

'Datasources' => [
'default' => [
'className' => 'Cake\Database\Connection',
'driver' => 'Cake\Database\Driver\Postgres',
'persistent' => false,
'host' => 'localhost',
'port' => '5432',
/*
* CakePHP will use the default DB port based on the driver selected
* MySQL on MAMP uses port 8889, MAMP users will want to uncomment
* the following line and set the port accordingly
*/
//'port' => 'non_standard_port_number',
'username' => 'openpg',
'password' => '12345678',
'database' => 'my_project',
/*
* You do not need to set this flag to use full utf-8 encoding (internal default since CakePHP 3.6).
*/
//'encoding' => 'utf8mb4',
'timezone' => 'UTC',
'flags' => [],
'cacheMetadata' => true,
'log' => false,

/**
* Set identifier quoting to true if you are using reserved words or
* special characters in your table or column names. Enabling this
* setting will result in queries built using the Query Builder having
* identifiers quoted when creating SQL. It should be noted that this
* decreases performance because each query needs to be traversed and
* manipulated before being executed.
*/
'quoteIdentifiers' => false,

/**
* During development, if using MySQL < 5.6, uncommenting the
* following line could boost the speed at which schema metadata is
* fetched from the database. It can also be set directly with the
* mysql configuration directive 'innodb_stats_on_metadata = 0'
* which is the recommended value in production environments
*/
//'init' => ['SET GLOBAL innodb_stats_on_metadata = 0'],

'url' => env('DATABASE_URL', null),
],

Mari Kita mulai bermain di Cakephp nya

[LANGKAH 1] : Pastikan Cakephp telah terinstall di komputer masing-masing

Dalam Tutorial Ini saya menggunakan Cakephp yang versi terakhir ya, yaitu versi 3, tepatnya 3.6.0 RC2

[LANGKAH 2] :
Siapkan Library-Library yang dibutuhkan

Download jQuery di link ini Download jQuery
Download jQuery multifield di link ini Download jQuery multifield
Download Bootstrap minimal di link ini Download Bootstrap Minimal

[LANGKAH 3]:
Letakan Library-Library yang sudah di download [LANGKAH 2] ke webroot

[LANGKAH 4]:
Load Library-Library yang telah di letakan ke webroot [LANGKAH 2] di default.ctp

[LANGKAH 5]:
Buat sebuah form cakephp dengan file .ctp dengan code seperti ini

<?php
/**
* @var \App\View\AppView $this
* @var \App\Model\Entity\TKpim $tKpim
*/
?>

<?= $this->Html->css('bootstrap.min.css') ?>

<div class="tKpim form large-12 medium-12 columns content">
<?= $this->Form->create($tKpim) ?>
<fieldset>
<legend><?= __('Add Kpim') ?></legend>
<?php
echo $this->Form->control('name');
?>
</fieldset>
<fieldset>
<legend><?= __('Add Kpim Detail') ?></legend>
<div id="KpimDetail">
<div class="row">
<div class="col-md-12" style="padding-top: 5px; padding-bottom: 5px;">
<button type="button" id="btnAdd-1" class="btn btn-primary">Add More</button>
</div>
</div>
<div class="row group">
<div class="col-md-3">
<label>Detail Name</label>
<input class="form-control" type="text" name="TKpimDetail['DetName'][]">
</div>
<div class="col-md-3">
<label>Coeg Name</label>
<input class="form-control" type="text" name="TKpimDetail['DetCoeg'][] ">
</div>
<div class="col-md-3">
<label>Coag Name</label>
<input class="form-control" type="text" name="TKpimDetail['DetCoag'][]">
</div>
<div class="col-md-3">
<label>Remove</label><br/>
<button type="button" class="btn btn-danger btnRemove">X</button>
</div>
</div>
</div>
</fieldset>
<?= $this->Form->button(__('Submit')) ?>
<?= $this->Form->end() ?>
</div>
<script>
$('#KpimDetail').multifield({
section: '.group',
btnAdd:'#btnAdd-1',
btnRemove:'.btnRemove',
});
</script>

[LANGKAH 6]:
Buat Fungsi Untuk mengolah dan memasukan data Form Ke Database dengan codingan Controller.php seperti ini

<?php
namespace App\Controller;

use App\Controller\AppController;

class TKpimController extends AppController
{

/**
* Add method
*
* @return \Cake\Http\Response|null Redirects on successful add, renders view otherwise.
*/
public function add()
{
$tKpim = $this->TKpim->newEntity();
if ($this->request->is('post')) {
$tKpim = $this->TKpim->patchEntity($tKpim, $this->request->getData());

if ($saveHeader = $this->TKpim->save($tKpim)) {
if (!empty($this->request->getData()['TKpimDetail'])){
$kpimDetail = $this->request->getData()['TKpimDetail'];
foreach($kpimDetail as $key => $value){
$dataDetail = [
'name' => $value['name'],
'id_kpim' => $saveHeader->id

];
$tKpimDetail = $this->TKpim->TKpimDetail->newEntity();
$this->TKpim->TKpimDetail->patchEntity($tKpimDetail, $dataDetail);
$this->TKpim->TKpimDetail->save($tKpimDetail);
}
}

$this->Flash->success(__('The t kpim has been saved.'));

return $this->redirect(['action' => 'index']);
}
$this->Flash->error(__('The t kpim could not be saved. Please, try again.'));
}
$Users = $this->TKpim->Users->find('list', ['limit' => 200]);
$Users = $this->TKpim->Users->find('list', ['limit' => 200]);
$this->set(compact('tKpim', 'Users', 'Users'));
}
}

[LANGKAH 7]:

Buat Table di database (dalam hal ini database nya adalah postgresql) dengan query seperti ini

CREATE TABLE public.t_kpim

(

id integer NOT NULL DEFAULT nextval('t_kpim_id_seq'::regclass),

name character varying(30),

CONSTRAINT t_kpim_pk_id PRIMARY KEY (id)

)

WITH (

OIDS=FALSE

);

CREATE TABLE public.t_kpim_detail

(

id integer NOT NULL DEFAULT nextval('t_kpim_detail_id_seq'::regclass),

id_kpim integer,

name character varying(50),

CONSTRAINT t_kpim_detail_pk_id PRIMARY KEY (id)

)

WITH (

OIDS=FALSE

);

Maka Saat Kita Submit data kita database akan terisi menjadi seperti ini datanya

table header

table detail

Nah Seperti itulah cara membuat sebuah form dengan konsep One2many di cakephp, dengan menggunakan jQuery sebagai Client Side nya, Postgresql Sebagai Database nya, dan Cakephp sebagai Server side nya

Anda dapat mengembangkannya, atau mengambil konsep nya untuk anda terapkan ke PHP Native maupun PHP Framework yang lainnya

Sekian Tutorial Kali Ini

Semoga Bermanfaat...

~Salam Coding, Jari Pusing, Otak Keriting~

~Salam Pusing, Otak Coding, Jari Keriting~

~Salam Keriting, Jari Coding, Otak Pusing~

GodBless ~