Didalam sebuah project terkadang kita membuat halaman yang didalamnya itu akan menampilkan struktur organisasi. kali ini sesaui dengan judul kita akan membuat strutkur organisasi dengan menggunakan laravel.
Pertama, mari membuat dulu project terlebih dahulu dengan mengetikan perintah.
composer create-project laravel/laravel struktrur-organisasi-app
Kemudian, teman-teman membuat 3 migration yaitu. tbl_pegawai, tbl_jabatan, tbl_struktur_organisasi. dengan struktur tabel seperti berikut:
- tbl_jabatan
- id bigint autoincrement
- jabatan varchar(191)
tbl_pegawai
- id bigint autoincrement
- nama_pengawai varchar(191)
- nip varchar(191)
- jabatan_id bigint
tbl_struktur_organisasi
- id bigint autoincrement
- pegawai_id bigint
- root_id int comment 'ID yang akan dijadikan parent struktur organisasi'
Setelah itu teman-teman membuat masing-masing model dan relasi dari ke 3 tabel diatas(JabatanModel, PegawaiModel, StrukturOrganisasiModel).
Kita anggap semua table telah dibuatkan operasi CRUD(Create, Read,Update, Delete) dan memiliki data masing masing.
Pada tahapan kali ini, saya akan memfokuskan dalam menampilkan struktur organisasi dari data yang ada pada model struktur_organisasi :
Ada library d3.OrgChart yang kita tambahkan, yaitu:
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@3.0.1"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>
kita akan membuat kode javascript untuk menyediakan data yang akan kita implementasikan ke struktur.
`<script>
const data = [
@foreach($data as $item)
{
id: {{$item->id}},
parentId: @if($item->root_id==0) null
@else {{$item->root_id}} @endif,
name: '{{ $item->getPegawai->nama_pegawai }}',
nip: '{{ $item->getPegawai->nip }}',
jabatan: '{{ $item->getJabatan->jabatan }}',
image: @if(!empty($item->getPegawai->foto_formal))'{{ asset('storage/upload/foto_formal_pegawai/'.$item->getPegawai->foto_formal) }}' @else '{{ asset('images/icon_users.png') }}' @endif
},
@endforeach
];
....
</script>`
- setelah itu, kita akan menggunakan data diatas kedalam d3.orgDiagram. Dengan kode sebagai berikut:
<script>
new d3.OrgChart()
.nodeId((dataItem) => dataItem.id)
.parentNodeId((dataItem) => dataItem.parentId)
.nodeWidth((node) => 300)
.nodeHeight((node) => 150)
.nodeContent(function (d, i, arr, state) {
const color = '#FFFFFF';
const imageDiffVert = 25 + 2;
return
<div style='width:${
d.width
}px;height:${d.height}px;padding-top:${imageDiffVert - 2}px;padding-left:1px;padding-right:1px'>
<div style="font-family: 'Inter', sans-serif;background-color:${color}; margin-left:-1px;width:${d.width - 2}px;height:${d.height - imageDiffVert}px;border-radius:10px;border: 1px solid #E4E2E9">
<div style="display:flex;justify-content:flex-end;margin-top:5px;margin-right:8px">#${
d.data.id
}</div>
<div style="background-color:${color};margin-top:${-imageDiffVert - 20}px;margin-left:${15}px;border-radius:100px;width:50px;height:50px;" ></div>
<div style="margin-top:${
-imageDiffVert - 20
}px;"> <img src=" ${d.data.image}" style="margin-left:${20}px;border-radius:100px;width:40px;height:40px;" /></div>
<div style="font-size:15px;color:#08011E;margin-left:20px;margin-top:10px"> ${
d.data.name
} </div>
<div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
d.data.nip
} </div>
<div style="color:#716E7B;margin-left:20px;margin-top:3px;font-size:10px;"> ${
d.data.jabatan
} </div>
</div>
</div>
`;
}).container('.chart-container').data(data).render();
</script>
`
Selamat mencoba, salam satu keyboard
