Visualisasi Tiga Dimensi (3D) Penyusunan Barang Pada Gudang Menggunakan Algoritma Steepest Ascent Hill Climbing

(1)

VISUALISASI TIGA DIMENSI (3D) PENYUSUNAN BARANG

PADA GUDANG MENGGUNAKAN ALGORITMA

STEEPEST ASCENT HILL CLIMBING

SKRIPSI

STELA MARIS HAREFA 091402058

PROGRAM STUDI S1 TEKNOLOGI INFORMASI

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA

MEDAN 2014


(2)

VISUALISASI TIGA DIMENSI (3D) PENYUSUNAN BARANG

PADA GUDANG MENGGUNAKAN ALGORITMA

STEEPEST ASCENT HILL CLIMBING

SKRIPSI

Diajukan untuk melengkapi tugas dan memenuhi syarat memperoleh ijazah Sarjana Teknologi Informasi

STELA MARIS HAREFA 091402058

PROGRAM STUDI S1 TEKNOLOGI INFORMASI

FAKULTAS ILMU KOMPUTER DAN TEKNOLOGI INFORMASI UNIVERSITAS SUMATERA UTARA

MEDAN 2014


(3)

PERSETUJUAN

Judul : VISUALISASI TIGA DIMENSI (3D)

PENYUSUNAN BARANG PADA GUDANG

MENGGUNAKAN ALGORITMA STEEPEST

ASCENT HILL CLIMBING

Kategori : SKRIPSI

Nama : STELA MARIS HAREFA

Nomor Induk Mahasiswa : 091402058

Program Studi : SARJANA (S1) TEKNOLOGI INFORMASI

Departemen : TEKNOLOGI INFORMASI

Fakultas : ILMU KOMPUTER DAN TEKNOLOGI

INFORMASI (FASILKOM-TI) UNIVERSITAS SUMATERA UTARA

Diluluskan di

Medan, 29 Agustus 2014

Komisi Pembimbing :

Pembimbing 2 Pembimbing 1

Syahril Efendi, S.Si,M.I.T. M. Andri Budiman, S.T.,M.Comp.Sc,M.E.M.

NIP 19671110 199602 1 001 NIP 19751008 200801 1 011

Diketahui/Disetujui oleh

Program Studi S1 Teknologi Informasi Ketua,

M. Anggia Muchtar, S.T., MM.IT. NIP 19800110 200801 1 010


(4)

iii

PERNYATAAN

VISUALISASI TIGA DIMENSI (3D) PENYUSUNAN BARANG PADA GUDANG

MENGGUNAKAN ALGORITMA STEEPEST ASCENT HILL CLIMBING

SKRIPSI

Saya mengakui bahwa skripsi ini adalah hasil karya saya sendiri, kecuali beberapa kutipan dan ringkasan yang masing-masing telah disebutkan sumbernya.

Medan, 29 Agustus 2014

Stela Maris Harefa 091402058


(5)

UCAPAN TERIMA KASIH

Segala puji dan syukur penulis sampaikan kepada Tuhan Yesus yang telah memberikan berkat-Nya yang melimpah sehingga penulis dapat menyelesaikan skripsi ini dengan baik untuk memperoleh gelar Sarjana Teknologi Informasi, Program Studi S1 Teknologi Informasi Universitas Sumatera Utara.

Dengan segala kerendahan hati penulis ucapkan terima kasih kepada:

1. Ayah penulis, Drs. Nehemia Harefa M.BA, ibu penulis, Sari Isa Harefa, S.E.,

dan kakak penulis Ribka Sola Gratia Harefa, S.E., adik penulis Norman Chris Lalasaro Harefa yang telah memberikan doa dan dukungan moral kepada penulis untuk menyelesaikan skripsi ini beserta keluarga besar yang telah turut mendoakan penulis.

2. Bapak M. Andri Budiman, S.T.,M.Comp.Sc,M.E.M. dan Bapak Syahril

Efendi, S.Si,M.I.T. selaku dosen pembimbing penulis yang telah meluangkan waktu, pikiran, saran, dan kritiknya untuk penulis dalam menyelesaikan skripsi ini.

3. Ibu Sarah Purnamawati, S.T., M.Sc dan Bapak Dani Gunawan, S.T., M.T.

yang telah bersedia menjadi dosen penguji dan memberikan saran dan kritik yang membangun dalam penyelesaian skripsi ini.

4. Ketua dan Sekretaris Program Studi S1 Teknologi Informasi, Bapak M.

Anggia Muchtar, S.T., MM.IT. dan Bapak Mohammad Fadly Syahputra, B.Sc., M.Sc.IT.

5. Seluruh dosen yang mengajar serta Ibu Delima dan Bang Faisal, sebagai staf Tata Usaha Program Studi Teknologi Informasi Universitas Sumatera Utara.

6. Sahabat-sahabat yang selalu mendukung dan memberi semangat kepada

penulis, Fida Elvi Anderia Sebayang, S.TI, Ade Chania Sion Sagala, S.TI, Cynthia Arilla Sembiring, S.TI, Riska Vinesia Butarbutar, S.TI, Jihan Meutia Fauzen, S.TI, Annifa Iqramitha, S.TI, Anggreiny WAF Br. Ginting dan semua teman angkatan 2009, Jhohanes Purba, Josua Sinaga.

7. Sahabat penulis Melva Vicensia Gulo, S.E., Albenia Gulo, S.Pd. dan Belina Lis Wardani Zebua, S.Ked. yang selalu mendoakan dan memberi semangat.

8. Seluruh rekan kuliah sejawat yang tidak dapat disebutkan satu persatu.

Penulis menyadari bahwa masih banyak kekurangan dalam skripsi ini, untuk itu penulis mengharapkan saran dan kritik yang bersifat membangun dari semua pihak demi kesempuranaan skripsi ini. Akhir kata penulis ucapkan terima kasih.


(6)

v

ABSTRAK

Dewasa ini penyusunan barang pada gudang masih sering dilakukan secara manual dan sembarangan sehingga dapat menyebabkan penggunaan ruang tambahan serta dapat mengakibatkan rusaknya barang-barang yang ditumpuk karena tidak memperhatikan daya tampung masing-masing barang serta tidak mengetahui tata letak barang yang telah berada dalam ruangan. Dengan adanya perkembangan teknologi saat ini dapat memudahkan manusia untuk menyelesaikan permasalahan tersebut. Oleh karena itu dibuatlah sebuah aplikasi yang berfungsi untuk menampilkan penyusunan barang pada gudang. Aplikasi ini menampilkan barang yang disusun dengan menggunakan parameter berat dan volume barang. Penelitian ini

menggunakan teknologi WebGL untuk membangun objek 3D (tiga dimensi) pada web

browser serta algoritma Steepest Ascent Hill Climbing untuk menentukan urutan

barang yang akan disusun dalam gudang. Hasil pengujian menyimpulkan bahwa algoritma Steepest Ascent Hill Climbing dapat menentukan urutan barang yang akan disusun dalam gudang berdasarkan parameter berat barang. Selain menampilkan barang yang telah disusun dalam gudang secara tiga dimensi (3D) aplikasi ini juga dapat menentukan tata letak barang yang akan disusun dalam gudang dengan membandingkan parameter panjang, tinggi dan lebar barang kepada panjang, tinggi dan lebar ruangan. Aplikasi ini juga menampilkan data barang yang telah diinputkan user, data barang yang tidak dapat masuk ke dalam gudang serta menampilkan data kapasitas maksimal tumpukan masing-masing barang.

Kata kunci: steepest ascent hill climbing, visualisasi tiga dimensi (3D), penyusunan barang


(7)

VISUALIZATION OF THREE DIMENSIONAL (3D) PACKING GOODS IN WAREHOUSE USING STEEPEST ASCENT HILL

CLIMBING ALGORITHM

ABSTRACT

Nowdays of goods in the warehouse is still done manually and carelessly that can cause ineffective spacing and cause additional space and alsodamage to the goods stacked for not paying capacity of each item and knowing the layout of the items are already in the room. By the current technology developments makes the people to solve these problems. Therefore we need an application that serves us to show the preparation goods in the warehouse. This application displays the prepared items by the parameters of the weight and the volume of goods. This research uses the technology WebGL to build 3D (three dimensional) object and Steepest Ascent Hill Climbing Algorithm to determine the order of the goods which will be arraged in the warehouse. The results concluded that the Steepest Ascent Hill Climbing Algorithm can determine the order of goods which will be arranged in the warehouse based on the weight of the item parameters. In addition to display the goods in three dimensions (3D) this application also determine the layout of items that will be arranged in the warehouse and displays the input data items, items that can not fit into the data warehouse and displays the maximum capacity of each pile of stuff.

Keywords: steepest ascent hill climbing algorithm, visualization of three dimensional (3D), preparation goods, warehouse.


(8)

vii

DAFTAR ISI

Halaman

PERSETUJUAN ii

PERNYATAAN iii

UCAPAN TERIMA KASIH iv

ABSTRAK v

ABSTRACT vi

DAFTAR ISI vii

DAFTAR TABEL ix

DAFTAR GAMBAR x

BAB 1 PENDAHULUAN 1

1.1. Latar Belakang 1

1.2. Rumusan Masalah 2

1.3. Batasan Masalah 2

1.4. Tujuan Penelitian 2

1.5. Manfaat Penelitian 3

1.6. Metodologi Penelitian 3

1.7. Sistematika Penulisan 4

BAB 2 LANDASAN TEORI 5

2.1. Visualisasi 5

2.2. Gudang 5

2.3. Grafika Komputer 5

2.3.1. Grafik 3 dimensi (3D) 6

2.4. Penyusunan Barang menggunakan Block Stacking 6

2.5. Teori Dasar Algoritma Hill Climbing 6

2.5.1. Algoritma simple hill climbing 7

2.5.2. Algoritma steepest ascent hill climbing 7

2.6. Relevansi Steepest Ascent Hill Climbing Algorithm

Pada Pola Penyusunan Barang 11

2.7. Teknologi WebGL 11

2.8. HTML5 12

2.9. Javascript 12

2.9.1. Library 13

2.10. Penelitian Terdahulu 13

BAB 3 ANALISIS DAN PERANCANGAN SISTEM 17

3.1. Perancangan Objek 3D (tiga dimensi) 17

3.2. Perancangan Database 20

3.2.1. Data barang 23

a. Tabel barang 23

b. Tabel barang sisa 24


(9)

d. Tabel hc barang 26

e. Tabel user 26

3.2.2. Data ruangan 26

3.3. Analisis Sistem 27

3.3.1. Proses user 27

3.3.2. Analisis algoritma steepest ascent hill climbing pada

Aplikasi penyusunan barang pada gudang 3D (tiga dimensi) 28

3.3.3.Penentuan barang yang masuk pada gudang

visualisasi 3D (tiga dimensi) 32

3.4. Perancangan Sistem 34

3.4.1. Arsitektur umum (general architecture) 34

3.4.2. Diagram use case 34

3.4.3. Realisasi definisi use case 35

3.5. Perancangan Tampilan Antarmuka 36

3.5.1. Rancangan halaman login user 38

3.5.2. Rancangan halaman registrasi user 37

3.5.3. Rancangan halaman konfigurasi 37

3.5.4. Rancangan halaman utama user 38

3.5.5. Rancangan halaman hasil proses pengurutan

algoritma steepest ascent hill climbing 39

3.5.6. Rancangan halaman visualisasi 3D 40

BAB 4 IMPLEMENTASI DAN PENGUJIAN 41

4.1. Implementasi Sistem 41

4.1.1. Spesifikasi perangkat keras dan

perangkat lunak yang digunakan 41

4.1.2. Implementasi Perancangan Antarmuka 41

a. Tampilan halaman konfigurasi 42

b. Tampilan halaman utama user 43

c. Tampilan halaman proses algoritma

steepest ascent hill climbing 42

d. Tampilan halaman visualisasi 3D 43

4.2. Pengujian Sistem 46

4.2.1. Pengujian pada proses yang dilakukan user 47

4.2.2. Pengujian pada proses yang dilakukan sistem 47

4.2.3. Pengujian kinerja sistem 48

BAB 5 KESIMPULAN DAN SARAN 49

5.1. Kesimpulan 49

5.2. Saran 49

DAFTAR PUSTAKA 50


(10)

ix

DAFTAR TABEL

Halaman

Tabel 2.1. Penelitian Terdahulu 15

Tabel 3.1. Rancangan Tabel Ukuran Ruangan 21

Tabel 3.2. Rancangan Tabel Barang 21

Tabel 3.3. Rancangan Tabel Barang Sisa 21

Tabel 3.4. Rancangan Tabel User 22

Tabel 3.5. Rancangan Tabel Temp Barang 22

Tabel 3.6. Rancangan Tabel hc_berat 23

Tabel 3.7. Tabel Barang 24

Tabel 3.8. Tabel Barang Sisa 24

Tabel 3.9. Tabel Temp Barang 25

Tabel 3.10. Tabel HC Berat 26

Tabel 3.11. Tabel User 26

Tabel 3.12. Tabel Ukuran Ruangan 27

Tabel 3.13. Tabel Successor 1 28

Tabel 3.14. Tabel Successor SUCC 1 29

Tabel 3.15. Tabel Successor 2 30


(11)

DAFTAR GAMBAR

Halaman

Gambar 2.1. Graf TSP (Traveling Salesman Problem) 8

Gambar 2.2. Flowchart Algoritma Steepest Ascent Hill Climbing 10

Gambar 3.1. Sistem Koordinat 17

Gambar 3.2. Perspective Camera 18

Gambar 3.3. Ruangan 19

Gambar 3.4. Letak Barang Pertama 19

Gambar 3.5. Letak Barang Kedua 20

Gambar 3.6. Letak Barang Berikutnya 20

Gambar 3.7. Flowchart Proses User 29

Gambar 3.8. Flowchart Penentuan Barang Yang Masuk Pada Gudang 33

Gambar 3.9. General Architecture 34

Gambar 3.10. Diagram Use case 35

Gambar 3.11. Rancangan Halaman Login User 37

Gambar 3.12. Rancangan Halaman Registrasi User 37

Gambar 3.13. Rancangan Halaman Konfigurasi 38

Gambar 3.14. Rancangan Halamn Utama User 39

Gambar 3.15. Rancangan Halaman Proses User 39

Gambar 3.16. Rancangan Halaman Visualisasi 3D 40

Gambar 4.1. Tampilan Halaman Konfigurasi 42

Gambar 4.2. Tampilan Halaman Utama User 43

Gambar 4.3. Tampilan Halaman Proses 43

Gambar 4.4. Tampilan Halaman Visualisasi 3D 44

Gambar 4.5. Tampilan Halaman Visualisasi 3D(dari depan) 44

Gambar 4.6. Tampilan Halaman Visualisasi 3D(dari kanan) 45

Gambar 4.7. Tampilan Halaman Visualisasi 3D(dari kiri) 45

Gambar 4.8. Tampilan Halaman Visualisasi 3D(dari atas) 46

Gambar 4.9. Tampilan Halaman Visualisasi 3D(dari bawah) 46

Gambar 4.10. Database Tabel hc_berat

(algoritma Steepest Ascent Hill Climbing) 47


(12)

v

ABSTRAK

Dewasa ini penyusunan barang pada gudang masih sering dilakukan secara manual dan sembarangan sehingga dapat menyebabkan penggunaan ruang tambahan serta dapat mengakibatkan rusaknya barang-barang yang ditumpuk karena tidak memperhatikan daya tampung masing-masing barang serta tidak mengetahui tata letak barang yang telah berada dalam ruangan. Dengan adanya perkembangan teknologi saat ini dapat memudahkan manusia untuk menyelesaikan permasalahan tersebut. Oleh karena itu dibuatlah sebuah aplikasi yang berfungsi untuk menampilkan penyusunan barang pada gudang. Aplikasi ini menampilkan barang yang disusun dengan menggunakan parameter berat dan volume barang. Penelitian ini

menggunakan teknologi WebGL untuk membangun objek 3D (tiga dimensi) pada web

browser serta algoritma Steepest Ascent Hill Climbing untuk menentukan urutan

barang yang akan disusun dalam gudang. Hasil pengujian menyimpulkan bahwa algoritma Steepest Ascent Hill Climbing dapat menentukan urutan barang yang akan disusun dalam gudang berdasarkan parameter berat barang. Selain menampilkan barang yang telah disusun dalam gudang secara tiga dimensi (3D) aplikasi ini juga dapat menentukan tata letak barang yang akan disusun dalam gudang dengan membandingkan parameter panjang, tinggi dan lebar barang kepada panjang, tinggi dan lebar ruangan. Aplikasi ini juga menampilkan data barang yang telah diinputkan user, data barang yang tidak dapat masuk ke dalam gudang serta menampilkan data kapasitas maksimal tumpukan masing-masing barang.

Kata kunci: steepest ascent hill climbing, visualisasi tiga dimensi (3D), penyusunan barang


(13)

VISUALIZATION OF THREE DIMENSIONAL (3D) PACKING GOODS IN WAREHOUSE USING STEEPEST ASCENT HILL

CLIMBING ALGORITHM

ABSTRACT

Nowdays of goods in the warehouse is still done manually and carelessly that can cause ineffective spacing and cause additional space and alsodamage to the goods stacked for not paying capacity of each item and knowing the layout of the items are already in the room. By the current technology developments makes the people to solve these problems. Therefore we need an application that serves us to show the preparation goods in the warehouse. This application displays the prepared items by the parameters of the weight and the volume of goods. This research uses the technology WebGL to build 3D (three dimensional) object and Steepest Ascent Hill Climbing Algorithm to determine the order of the goods which will be arraged in the warehouse. The results concluded that the Steepest Ascent Hill Climbing Algorithm can determine the order of goods which will be arranged in the warehouse based on the weight of the item parameters. In addition to display the goods in three dimensions (3D) this application also determine the layout of items that will be arranged in the warehouse and displays the input data items, items that can not fit into the data warehouse and displays the maximum capacity of each pile of stuff.

Keywords: steepest ascent hill climbing algorithm, visualization of three dimensional (3D), preparation goods, warehouse.


(14)

BAB 1 PENDAHULUAN

1.1. Latar Belakang

Proses kerja sebuah pabrik atau perusahaan saat ini tidak terlepas dari penggunaan fungsi gudang sebagai tempat penyimpanan barang-barang. Karena tingginya tingkat penggunaan gudang sebagai tempat penyimpanan barang maka efisiensi peletakan (tata letak) barang pada ruang gudang sangat dibutuhkan.

Pada proses penyusunan barang dalam gudang, sering sekali tidak dipertimbangkan aturan peletakan atau penyusunan barang yang dapat mengakibatkan penggunaan gudang tambahan serta rusaknya barang karena ditumpuk tanpa memperhitungkan batas maksimal tumpukan barang-barang. Salah satu penyebab penyusunan barang yang sembarangan adalah karena kurangnya informasi tentang tata letak barang yang telah tersimpan dalam gudang. Oleh karena itu dibutuhkan visualisasi untuk penyusunan barang-barang yang akan dimasukkan ke dalam gudang saat proses penyimpan barang di dalam gudang.

Pesatnya perkembangan teknologi saat ini khususnya pada bidang komputer grafik memampukan pembuatan visualisasi yang semakin baik. Visualisasi adalah rekayasa dalam pembuatan gambar, diagram serta animasi untuk menampilkan suatu informasi. Perkembangan animasi juga telah banyak membantu dalam bidang visualisasi yang lebih kompleks dan canggih. Visualisasi juga merupakan konversi data relasi diantara item data atau atribut yang dapat dianalisis atau dilaporkan (Mardhoko, 2011).

Kemajuan teknologi saat ini membuat banyak aplikasi yang dapat memudahkan aktivitas manusia dalam pekerjaan sehari-hari. Salah satunya yaitu aplikasi web yang merupakan aplikasi yang dapat diakses melalui jaringan internet

menggunakan teknologi web browser. Pada tugas akhir ini akan dibuat sebuah aplikasi

visualisasi tiga dimensi (3D) untuk penyusunan barang pada gudang yang berbasiskan


(15)

Aplikasi ini dapat membantu penyusunan barang dalam gudang dengan

menampilkan penyusunan barang secara tiga dimensi (3D) menggunakan PHP dan

MySql, JavaScript, HTML5 dan WebGL. Dalam pembuatan aplikasi ini penulis

menggunakan algoritma Steepest Ascent Hill Climbing.

Beberapa penelitian sebelumnya mengenai aplikasi penyusunan barang serta visualisasi tiga dimensi (3D) yaitu: Optimasi Pola Penyusunan Barang dalam Ruang

Tiga Dimensi menggunakan Metode Genetic Algorithms (Gunadi, Julistiono &

Hariyanto, 2003), Pengembangan Algoritma Bee Swarm Optimization untuk

Penyelesaian Container Stowage Problem (Putmawa & Santosa, 2011),

Pengembangan Algoritma Greedy untuk Optimalisasi Penataan Peti Kemas pada

Kapal Pengangkut(Angga & Munir, 2012), Sistem Alokasi Penyimpanan Barang pada Gudang(Hambali, 2011), Optimasi Pengambilan dan Penataan Ulang Barang di

Gudang dengan Penerapan Stack menggunakan Metode Genetic Algorithm(Lim,

Gunadi & Gang), Penerapan Teknologi WebGL pada Virtual Aquarium Berbasis Tiga

Dimensi (3D) (Hendry, 2011), dan Pembuatan Simulasi Pergerakan Objek 3D (Tiga

Dimensi) Menggunakan OpenGL (Suhardiman, D., et al. 2012).

1.2. Rumusan Masalah

Penyusunan barang dalam gudang yang sering dilakukan sembarangan sehingga dapat menyebabkan rusaknya barang yang ditumpuk. Berdasarkan latar belakag di atas maka rumusan masalah pada tugas akhir ini yaitu bagaimana mengetahui tata letak barang yang disusun dalam gudang.

1.3. Batasan Masalah

Adapun batasan masalah dalam penelitian ini adalah:

1. Input yang dimasukkan adalah ukuran ruangan, ukuran barang, berat barang.

2. Jenis barang yang digunakan berbentuk kubus dan balok.

3. Diasumsikan barang masuk dari atas ruangan.

4. Tidak memperhatikan jenis barang serta cara keluar dan masuknya barang.

1.4. Tujuan Penelitian

Tujuan dari penelitian ini adalah untuk menampilkan dalam bentuk visual penyusunan barang yang disimpan pada gudang secara tiga dimensi (3D) sehingga dapat


(16)

3

mengetahui tata letak barang yang disusun di dalam gudang berdasarkan algoritma

Steepest Ascent Hill Climbing.

1.5. Manfaat Penelitian

Manfaat dari penelitian ini yaitu:

1. Pengguna dapat mengetahui tata letak barang yang telah dimasukkan ke dalam gudang melalui visualisasi 3D.

2. Sarana pembelajaran mengenai konsep algoritma Steepest Ascent Hill Climbing pada proses penyusunan barang pada gudang dan penerapannya pada lingkungan

web browser.

3. Sarana pembelajaran mengenai pengembangan aplikasi tiga dimensi (3D)

berbasis web browser.

1.6. Metodologi Penelitian

Adapun metodologi yang digunakan pada penelitian ini adalah: 1. Studi Literatur

Pada tahap ini peneliti mencari algoritma yang berbeda dari yang telah digunakan sebelumnya untuk penyusunan barang pada gudang. Memahami lebih dalam mengenai penyusunan barang pada gudang serta pembuatan visualisasi 3D (tiga dimensi) melalui referensi-referensi dari buku maupun melalui situs internet.

2. Desain Sistem

Pada tahap ini, peneliti membuat flowchart system, use case, dan arsitektur umum dari sistem yang akan dibuat.

4. Pembuatan Sistem

Pada tahap ini peneliti memulai mengkodekan sistem dengan menggunakan

bahasa pemrograman PHP, JavaScript, dengan database MySQL pada

HTML5 dan WebGL.

5. Pengujian Sistem

Pada tahap ini, peneliti melakukan pengujian dari sistem yang telah dibuat. Pengujian akan menampilkan gambar visual tiga dimensi (3D) barang yang telah disusun dalam gudang dengan algoritma.


(17)

6. Dokumentasi

Pada tahap ini peneliti menyusun laporan terhadap sistem yang telah dibuat.

1.7. Sistematika Penulisan

Adapun bagian utama dari sistematika penulisan skripsi ini, yaitu:

BAB 1. PENDAHULUAN

Bab ini berisikan latar belakang diangkatnya judul skripsi, perumusan masalah yang diambil, batasan-batasan masalahnya, tujuan, dan manfaat penelitian, metodologi penulisan, serta sistematika penulisan dari penyusunan skripsi ini.

BAB 2. TINJAUAN PUSTAKA

Bab ini menjelaskan mengenai landasan teori dan penelitian terdahulu.

BAB 3. ANALISIS DAN PERANCANGAN SISTEM

Bab ini menjelaskan analisis dari metode/algoritma yang akan digunakan yaitu algoritma Steepest Ascent Hill Climbing dan perancangan aplikasi yang akan dibuat yaitu aplikasi visualisasi tiga dimensi (3D) penyusunan barang pada gudang berbasis web.

BAB 4. IMPLEMENTASI DAN PENGUJIAN

Bab ini menjelaskan implementasi dari analisis yang dilakukan dan pengujian terhadap sistem.

BAB 5. KESIMPULAN DAN SARAN

Bab ini menguraikan rangkuman dari masing-masing subbab yang ada serta memberikan saran agar bermanfaat untuk pengembangan sistem selanjutnya.


(18)

BAB 2

LANDASAN TEORI

Pada bab ini akan dijelaskan tentang landasan dari konsep dan teori yang digunakan untuk mendukung pembuatan aplikasi yang dibuat. Landasan teori serta konsep yang akan dijelaskan meliputi penjelasan mengenai grafika komputer, algoritma Steepest

Ascent Hill Climbing, WebGL dan Three.js.

2.1. Visualisasi

Visualisasi merupakan pengungkapan suatu gagasan atau perasaan dengan menggunakan bentuk gambar, tulisan (kata dan angka), peta, grafik dan lain sebagainya (KBBI, 2012).

2.2. Gudang

Menurut Kamus Besar Bahasa Indonesia (KBBI), gudang merupakan sebuah rumah atau bangsal tempat untuk menyimpan barang-barang, baik itu berupa barang-barang kimia, kumpulan surat/arsip-arsip, sesuatu yang mudah dibekukan, tempat menyimpan senjata, dan lain-lain. Menurut Oxford Dictionaries, Warehouse merupakan sebuah bangunan besar tempat penyimpanan bahan-bahan mentah ataupun barang-barang manufaktur yang akan didistribusikan untuk dijual.

2.3. Grafika Komputer

Grafika komputer sering dikenal dengan istilah visualisasi data. Grafika komputer merupakan bagian dari ilmu komputer yang berkaitan dengan pembuatan serta manipulasi gambar (visual) secara digital. Awalnya grafika komputer memiliki bentuk yang masih sederhana yaitu dua dimensi (2D), kemudian berkembang menjadi tiga dimensi (3D), pemrosesan citra (image processing) dan pengenalan pola (pattern

recognition). Menurut Hudjuli (2012) bagian dari grafika komputer meliputi:


(19)

(2) Animasi: mempelajari tentang cara menggambarkan dan memanipulasi gerakan.

(3) Rendering: mempelajari tentang algoritma untuk menampilkan efek cahaya.

(4) Citra (Imaging): mempelajari tentang cara mengambil dan menyunting

gambar.

2.3.1. Grafik 3 dimensi (3d)

Menurut Basuki dan Nana (2009) objek tiga dimensi (3D) merupakan kumpulan

titik-titik 3D (x, y, z) yang kemudian membentuk luasan-luasan (face) yang digabungakan

menjadi satu kesatuan. Face merupakan gabungan titik-titik yang membentuk luasan tertentu atau sering dinamakan dengan sisi.

2.4. Penyusunan Barang menggunakan metode Block Stacking

Pada aplikasi ini penyusunan barang menggunakan metode block stacking, dimana penyusunan barang mengacu pada penyusunan barang yang ditumpuk ke arah atas dengan ketinggian tertentu (Yahya, 2013). Oleh karena itu penyusunan barang dimulai dari sebelah kiri ruangan kemudian disusun ke atas dengan syarat barang yang disusun di atas memiliki bobot/berat lebih kecil atau sama dengan bobot/berat barang yang berada di bawah serta memiliki panjang dan lebar yang lebih kecil atau sama dengan barang yang berada di bawahnya. Apabila barang yang telah ditumpuk telah mencapai batas maksimal tumpukan (total berat barang yang ditumpuk kecil atau sama dengan barang dibawahnya) maka barang akan disusun ke samping kanan. Jika barang yang telah disusun tidak dimungkinkan lagi untuk disusun ke samping maka barang berikutnya akan disusun di depan barang yang sebelumnya telah disusun, susunan dimulai dari sebelah kiri ruangan dan begitu seterusnya.

2.5. Teori Dasar Algoritma Hill Climbing

Algoritma Hill Climbing merupakan salah satu algoritma pencarian lokal. Algoritma

hill climbing dimulai dengan memilih sembarang lintasan dan membuat iterasi

perubahan kecil pada solusi, setiap langkah mencari solusi yang terbaik, ketika algoritma tidak dapat melihat perbaikan lagi maka berhenti. Pada saat itulah ditemukan solusi tebaik. Kelebihan algoritma hill climbing yaitu algoritma ini dapat menentukan beberapa kemungkinan solusi yang terjadi sehigga dapat dicari kemungkinan solusi yang terbaik dari beberapa kemungkinan tersebut, sedangkan


(20)

7

kelemahannya yaitu algoritma ini membutuhkan waktu yang relatif lama karena harus

menghitung kemungkinan solusi yang banyak. Algoritma hill climbing dibedakan

menjadi dua, yaitu : algoritma Simple Hill Climbing dan algoritma Steepest Hill

Climbing (Mufarricha, 2010).

2.5.1. Algoritma simple hill climbing

Algoritma Simple Hill Climbing melakukan proses pengujian dengan menggunakan

fungsi heuristik. Pembangkitan keadaan berikutnya sangat bergantung terhadap

feedback dari prosedur pengetesan. Proses kerja algoritma simple hill climbing adalah

sebagai berikut (Kusumadewi & Purnomo, 2005) :

1. Dimulai dari keadaan awal, dilakukan pengujian. Jika merupakan tujuan maka

berhenti, jika tidak maka lanjutkan dengan keadaan sekarang sebagai keadaan awal.

2. Lanjutkan langkah-langkah berikut hingga tujuan tercapai atau hingga iterasi tidak memberikan perubahan pada keadaan sekarang:

a. Cari operator yang belum pernah digunakan; gunakan operator ini

untuk mendapatkan keadaan baru.

b. Evaluasi keadaan baru tersebut.

i. Jika keadaan baru tersebut merupakan tujuan, keluar.

ii. Jika bukan tujuan, namun nilainya lebih baik daripada keadaan sekarang, maka jadikan keadaan baru tersebut menjadi keadaan sekarang.

iii.Jika keadaan baru tersebut tidak lebih baik daripada keadaan sekarang, maka lanjutkan iterasi.

2.5.2. Algoritma Steepest Ascent Hill Climbing

Algoritma Steppest Ascent Hill Climbing hampir sama dengan algoritma Simple Hill

Climbing, perbedaannya terdapat pada pencarian yang dilakukan algoritma Steepest

Ascent Hill Climbing tidak dimulai dari posisi paling kiri, melainkan gerakan

selanjutnya dicari berdasarkan nilai heuristic terbaik. Dalam hal ini urutan dari penggunaan operator tidak menentukan penemuan solusi. Cara kerja algoritma

Steepest Ascent Hill Climbing adalah sebagai berikut sekarang (Kusumadewi &


(21)

1. Dimulai dari keadaan awal, dilakukan pengujian. Jika merupakan tujuan maka berhenti, jika tidak maka lanjutkan dengan keadaan sekarang sebagai keadaan awal.

2. Lanjutkan langkah-langkah berikut hingga tujuan tercapai atau hingga iterasi tidak memberikan perubahan pada keadaan sekarang:

a. Tentukan SUCC sebagai nilai heuristik terbaik dari

successor-successor.

b. Kerjakan untuk tiap operator yang digunakan oleh keadaan sekarang.

i. Gunakan operator tersebut dan bentuk keadaan baru.

ii. Evaluasi keadaan baru tersebut. Jika merupakan tujuan maka

keluar, jika bukan maka bandingkan nilai heuristiknya dengan SUCC. Jika nilai heuristiknya lebih baik dari nilai SUCC, maka jadikan nilai heuristik tersebut sebagai SUCC, namun jika nilai heuristik tidak lebih baik dari nilai SUCC maka nilai SUCC tidak berubah.

c. Jika SUCC lebih baik daripada nilai heuristik keadaan sekarang, ubah

node SUCC menjadi keadaan sekarang.

Keterangan: SUCC adalah nilai heuristik terbaik dari successor-successor.

Contoh implementasi Algoritma Steepest Ascent Hill Climbing pada persoalan TSP (Traveling Salesman Problem):

Seorang tourist ingin mengunjungi n kota. Jarak antar tiap-tiap kota sudah diketahui. Yang ingin dicari adalah jarak terpendek dimana setiap kota hanya boleh dikunjungi tepat 1 kali. Misalkan terdapat 4 kota dengan jarak tiap-tiap kota sebagai berikut:

9

4 5

8 6

7

Gambar 2.1. Graf TSP(Traveling Salesman Problem)

C

A B


(22)

9

Solusi-solusi yang mungkin dengan menyusun kota-kota dalam urutan abjad, misalkan:

A – B – C – D : dengan panjang lintasan = 9+6+7 = 22. B – A – C – D : dengan panjang lintasan = 9+4+7 = 20. C – B – A – D : dengan panjang lintasan = 6+9+8 = 23. D – B – C – A : dengan panjang lintasan = 5+6+4 = 15.

(1) Algoritma Simple Hill Climbing

Operator digunakan untuk menukar posisi kota yang bersebelahan. Fungsi heuristik yang digunakan adalah panjang lintasan yang terjadi. Maka penggunaan operator pada lintasan adalah sebagai berikut:

Tukar 1,2  tukar urutan posisi kota ke-1 dengan kota ke-2 Tukar 2,3  tukar urutan posisi kota ke-2 dengan kota ke-3 Tukar 3,4  tukar urutan posisi kota ke-3 dengan kota ke-4 Tukar 4,1  tukar urutan posisi kota ke-4 dengan kota ke-1 Tukar 2,4  tukar urutan posisi kota ke-2 dengan kota ke-4 Tukar 1,3  tukar urutan posisi kota ke-1 dengan kota ke-3

Algoritma Steepest Ascent Hill Climbing hampir sama dengan Simple Hill

Climbing, hanya saja gerakan pencarian tidak dimulai dari kiri melainkan

berdasarkan nilai heuristik terbaik. Keadaan awal lintasan ABCD (22).

Tukar 1, 2 BACD = 9 + 4 + 7 = 20.

Tukar 2, 3 ACBD = 4 + 6 + 5 = 15.

Tukar 3, 4 ABDC = 9 + 5 + 7 = 21.

Tukar 4, 1 DBCA = 5 + 6 + 4 = 15.

Tukar 2, 4 ADCB = 8 + 7 + 6 = 21.

Tukar 1, 3 CBAD = 6 + 9 + 8 = 23.

Dipilih nilai terkecil dari graf tersebut. Karena nilai yang terkecil pertama adalah ACBD(15), maka langkah selanjutnya dimulai dari ACBD(15).

Tukar 1, 2 CABD = 4 + 9 + 5 = 18.

Tukar 2, 3 ABCD = 9 + 6 + 7 = 22.

Tukar 3, 4 ACDB = 4 + 7 + 5 = 16.


(23)

Tukar 2, 4 ADBC = 8 + 5 + 6 = 19.

Tukar 1, 3 BCAD = 6 + 4 + 8 = 18.

Karena tidak terdapat nilai yang lebih kecil dari ACBD(15), maka solusi akhir yang di dapat adalah ACBD(15).

(Sumber:http://www.slideshare.net/ceezabramovic/metode-pencarian-heuristik).

Flowchart algoritma Steepest Ascent Hill Climbing dapat dilihat pada Gambar 2.1.

Inisialisasi Awal Mulai

Tujuan

Keadaan Awal -> Keadaan Sekarang Tidak

Tentukan SUCC

Bentuk Keadaan Baru

Tujuan Tidak

Ya Keadaan Baru ->

SUCC

SUCC > Keadaan Sekarang

Ya Keadaan Sekarang -> SUCC

Selesai

Ya

Keadaan Baru > SUCC

Ya

Tidak

SUCC = SUCC Tidak


(24)

11

2.6. Relevansi Steepest Ascent Hill Climbing Algorithm Pada Pola Penyusunan Barang

Algoritma Steepest Ascent Hill Climbing digunakan untuk menyelesaikan

permasalahan tata letak penyusunan barang pada ruang tiga dimensi dengan tujuan mendapatkan pola penyusunan barang yang terbaik. Parameter optimal atau tidaknya penyusunan barang pada gudang diukur berdasarkan sisa ruang kosong yang tersisa ketika masih terdapat barang yang tidak dapat lagi dimuat/dimasukkan dalam ruangan tersebut. Semakin sedikit ruang kosong yang terdapat pada suatu pola penyusunan barang maka pola penyusunan tersebut merupakan solusi terbaik.

Pada proses penyusunan barang pada gudang 3D (tiga dimensi), salah satu parameter yang menentukan pola penyusunan barang adalah berat barang. Barang yang memiliki berat paling besar akan disusun pertama, kemudian diikuti dengan barang yang memiliki berat lebih kecil dari barang sebelumnya tersebut.

2.7. Teknologi WebGL

Beberapa teknologi selain WebGL yang dapat membangun objek 3D (tiga dimensi),

yaitu: Unity 3D, Flash Stage 3D, Silverlight 3D, Direct 3D, OpenGL dan OpenGL ES

(Boesch, F. 2013). Kelebihan dari WebGL yaitu WebGL dapat berjalan di banyak

browser, seperti: Chrome, Firefox, Safari dan Opera. Selain itu untuk dapat

membangun sebuah objek 3D (tiga dimensi) pada WebGL, user tidak perlu menginstal

plug-in terlebih dahulu.

Teknologi WebGL berawal dari pengembangan OpenGL ES 2.0. Beberapa

contoh pengembangan OpenGL antara lain berbasis web, real-time rendering yang memungkinkan pembuatan tiga dimensi (3D) di web, visualisasi scientific dan medical

imaging. Pembuatan rendering grafik komputer pada WebGL dapat dibuat dengan

hanya menggunakan javascript, web browser, serta HTML5 canvas. WebGL

merupakan library grafis yang merupakan standar untuk grafik tiga dimensi (3D) di

web browser yang memungkinkan browser untuk membuat adegan tiga dimensi (3D).

Elemen yang menyusun bagian dari adegan tiga dimensi (3D) didownload dari server,

akan tetapi semua proses untuk mendapatkan gambar dilakukan secara lokal

menggunakan hardware grafis client. Beberapa komponen aplikasi WebGL yaitu


(25)

- Canvas : tempat komponen objek yang akan diletakkan dan merupakan elemen standar HTML5 yang dapat diakses menggunakan Document

Object Model (DOM) melalui JavaScript.

- Object : entitas 3D yang membentuk bagian dari adegan itu.

- Lights : pencahayaan dalam 3D.

- Camera : berfungsi sebagai viewport (untuk melihat dan mengeksplorasi adegan 3D dalam canvas)

Menurut Demeuse, J. (2013), dalam WebGL terdapat : mesh, camera, dan lighting.

2.8. HTML5

HTML5 adalah iterasi dari HTML(HyperText Markup Language). HTML pertama kali

distandarisasi tahun 1993 dan digunakan pada World Wide Web. HTML digunakan untuk menentukan isi dari suatu halaman web dengan menggunakan tag “< >”.

HTML5 Canvas adalah sebuah area bitmap pada layar yang dapat dimanipulasi

menggunakan JavaScript dengan cara me-render pixel pada canvas di layar. Dasar

HTML5 Canvas API (Application Program Interface) mencakup konteks 2D (dua

dimensi) yang memungkinkan programmer menggambar berbagai bentuk, text render,

dan menampilkan gambar langsung ke area tertentu dari jendela browser serta dapat

menerapkan warna, rotasi, transparansi alpha, manipulasi pixel dan berbagai jenis garis, kurva, dan kotak untuk mendapatkan bentuk, teks dan gambar yang ditempatkan

ke canvas (Fulton, S & Fulton, J. 2011).

2.9. JavaScript

JavaScript pertama kali muncul pada tahun 1995. Tujuan utamanya adalah untuk

menangani beberapa validasi input yang sebelumnya pernah diserahkan kepada bahasa server-side seperti Pearl. Pada saat itu sebuah round-trip ke server diperlukan untuk menentukan apakah sebuah field yang diperlukan memang berisi kosong atau nilai yang dimasukkan ke dalam field tidak valid. Netscape Navigator berusaha untuk

mengubahnya dengan pengenalan JavaSript. Kemampuan untuk mengatasi beberapa

validasi dasar pada client merupakan fitur baru yang menarik pada saat penggunaan modem telepon telah meluas. Sejak saat itu JavaScript berkembang menjadi sebuah fitur yang penting dari setiap web browser di market. Tidak hanya terikat untuk


(26)

13

validasi data sederhana, JavaScript saat ini telah berinteraksi dengan hampir semua

window browser dan isinya (Zakas, N.C. 2012).

2.9.1. Library

Beberapa library yang dapat digunakan pada WebGL yaitu : O3D, GLGE, Three.js, Curve3D, CubicVR, CopperLicht, Kuda, OSGJS, PhiloGL, SceneJS, SpiderGL dan TDL (Diggins, C. 2011). Dari antara beberapa library tersebut, penulis memilih untuk menggunakan Three.js. Three.js adalah sebuah library JavaScript API (Application

Program Interface) yang digunakan untuk membuat dan menampilkan animasi

komputer grafis tiga dimensi (3D) pada sebuah web browser. Skrip Three.js dapat

digunakan bersama dengan HTML5 canvas, SVG atau WebGL.

2.10. Penelitian Terdahulu

Beberapa penelitian terdahulu tentang penyusunan barang, yaitu dapat dilihat pada tabel 2.1.

Tabel 2.1. Penelitian Terdahulu

Peneliti (Tahun) Judul Penelitian Keterangan

Gunadi, K., Julistiono, I.K. & Hariyanto, B. (2003)

Optimasi Pola Penyusunan Barang dalam Ruang Tiga Dimensi menggunakan

Metode Genetic

Algorithms

 bertujuan untuk mendapatkan solusi

yang optimal pada pola penyusunan barang dalam kontainer dengan input spesifikasi ruang dan barang serta probabilitas ketiga operator algoritma genetik (operator reproduksi, pindah silang dan mutasi).

 Dalam penelitian ini suatu pola

dikatakan optimal ketika semakin sedikit ruang kosong yang tersisa.


(27)

Tabel 2.1. Penelitian Terdahulu (lanjutan) Peneliti (Tahun) Judul Penelitian Keterangan

Putmawa, F. & Santosa, B. (2011)

Pengembangan Algoritma Bee Swarm Optimization untuk Penyelesaian Container Stowage Problem

 menyelesaikan masalah penyusunan

kontainer dalam kapal dengan aturan penyusunan: kontainer yang berat diletakkan di bawah kontainer yang ringan dan penyusunan kontainer harus sesuai (sama) tipe dan ukurannnya dengan

mempertimbangkan keseimbangan kapal.

 penelitian ini menghasilkan waktu

pembongkaran (penyusunan ulang barang) yang lebih minimum. Angga, C. &

Munir, R. (2012)

Pengembangan

Algoritma Greedy

untuk Optimalisasi Penataan Peti Kemas pada Kapal

Pengangkut

 membantu pembuatan stowage plan

atau penataan peti kemas pada suatu kapal pengangkut didasari algoritma

greedy agar proses bongkar muat

dapat dilakukan dengan efisien serta tidak mengganggu stabilitas kapal pengangkut. Data yang digunakan

merupakan berat dan ukuran

standard peti kemas sesuai dengan

stardard ISO (International

Organization for Standarization).

output dari aplikasi ini akan

menampilkan tabel data letak barang serta tujuan barang yang akan dikirim.


(28)

15

Tabel 2.1. Penelitian Terdahulu (lanjutan) Peneliti (Tahun) Judul Penelitian Keterangan

Hambali, A. (2011)

Sistem Alokasi Penyimpanan

Barang Pada Gudang

 membuat sebuah sistem yang dapat

mengalokasikan urutan barang yang masuk ke dalam gudang secara optimal sehingga dapat menghemat

ruang dengan menggunakan

algoritma semut.

 menggunakan parameter panjang,

lebar, tinggi serta panjang line

gudang. Hasil dari penelitian

tersebut berupa blok diagram dengan

nilai β = 2 (performa hasil yang terbaik) dan nilai β = 0,5 (performa

hasil paling buruk). Lim, R., Gunadi,

K & Gang, O.W. (2004)

Optimasi

Pengambilan dan Penataan Ulang Barang di Gudang dengan Penerapan

Stack menggunakan

Metode Genetic

Algorithm

 membuat aplikasi untuk

menampilkan tata letak barang yang disimpan dalam palet-palet pada rak di gudang secara 2 dimensi dan 3

dimensi dengan menggunakan

OpenGL serta algoritma genetik.

 parameter yang digunakan yaitu

batas minimum dan maksimum ukuran gudang, ukuran dan jumlah rak, ukuran dan jumlah palet serta ukuran barang. Hasil uji penelitian tersebut menunjukkan nilai rata-rata fitness cost diatas 90%.


(29)

Tabel 2.1. Penelitian Terdahulu (lanjutan) Peneliti (Tahun) Judul Penelitian Keterangan

Henry (2011) Penerapan Teknologi

WebGL pada Virtual

Aquarium Berbasis Tiga Dimensi (3D)

 membuat web penjualan ikan yang

dibuat dalam objek 3D dengan memanfaatkan animasi.

 dalam pembuatan aplikasi ini penulis

menggunaan HTML5 dan WebGL.

Hasil dari penelitian ini yaitu menampilkan gambar serta bentuk ikan 3D serta dapat menampilkan

format audio dan video pada

halaman web tanpa menggunakan

plug-in.

Suhardi, D., et al (2012)

Pembuatan Simulasi

Pergerakan Objek

3D (Tiga Dimensi) Menggunakan

OpenGL.

 membuat sebuah simulasi

pergerakan objek 3D (tiga dimensi)

menggunakan OpenGL yang di

compile menggunakan C++.

 hasil dari aplikasi ini berupa


(30)

BAB 3

ANALISIS DAN PERANCANGAN SISTEM

3.1.Perancangan Objek 3D (Tiga Dimensi)

Pada perancangan objek 3D (tiga dimensi) dengan WebGL, library Three.js

menggunakan sistem koordinat tangan kanan.

Gambar 3.1. Sistem Koordinat

Pada gambar 3.1, layar komputer bertepatan dengan bidang xy dan berpusat di titik asal (0, 0, 0). Sumbu z merupakan poin positif dari layar terhadap mata pengamat.


(31)

Gambar 3.2. Perspective Camera

Pada penentuan perspektif pemandangan (gambar 3.2) 3D menggunakan Three.js,

penulis menggunakan parameter sebagai berikut: “ camera = new

THREE.PerpectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);

”, dalam script tersebut terdapat empat parameter, yaitu:

1. Parameter pertama (60) mendefinisikan bidang vertikal sudut pandang camera

dalam derajat (dari bawah ke atas pandangan). Inilah bagian yang dapat

terlihat di layar. FOV(Field of View) horizontal dihitung dengan menggunakan

FOV vertical.

2. Parameter kedua (window.innerWidth / windowHeight) mendefinisikan aspek

rasio camera, lebar elemen dibagi dengan tingginya.

3. Parameter ketiga (1) mendefinisikan pesawat camerafrustum (area pandangan

mata) yang dekat (“Near” pada gambar 3.2).

4. Parameter keempat (1000) mendefinisikan pesawat camera frutum yang jauh

(“Far” pada gambar 3.2). Dalam hal ini ketika sebuah objek bergerak melewati lebih kurang 1.000 unit, maka dianggap di luar dunia Three.js sehinngga akan terpotong dari pandangan.

Dalam pembuatan objek 3D (tiga dimensi) pada aplikasi ini, perhitungan koordinat ruang dimulai dari sudut paling kiri ruangan sebagai titik (x, y, z dengan nilai 0, 0, 0) yang dapat dilihat pada gambar 3.3.


(32)

19

X, Y, Z (0,0,0)

Gambar 3.3. Ruangan

Karena proses penyusunan barang dimulai dari paling sebelah kiri ruangan, maka peletakan barang pertama dapat dilihat pada gambar 3.4.

A

Gambar 3.4. Letak Barang Pertama

Kemudian barang kedua akan disusun dengan metode block stacking, maka barang

akan disusun diatas barang sebelumnya dengan syarat barang yang akan ditumpuk sesuai dengan parameter yang telah ditentukan. Bentuk penyusunan berikutnya dapat dilihat pada gambar 3.5.


(33)

A B

Gambar 3.5. Letak Barang Kedua

Setelah itu barang berikutnya akan disusun diatas barang sebelumnya jika syarat tinggi dan maksimal tumpukan terpenuhi, jika tidak, maka barang akan disusun di sampingnya, begitu seterusnya. Letak barang berikutnya dapat dilihat pada gambar 3.6.

A

B

C

Gambar 3.6. Letak Barang Berikutnya 3.2.Perancangan Database

Pada aplikasi ini database yang digunakan adalah MySQL, berikut spesifikasi tabel-tabel yang dibuat:


(34)

21

- Tabel_ukuran_ruangan  menyimpan data panjang, lebar, tinggi ruang serta

kapasitas / daya tampung maksimal total berat barang. Struktur tabel ruangan dapat dapat dilihat pada Tabel 3.1.

Tabel 3.1. Rancangan Tabel Ukuran Ruangan

Nama_Field Tipe_Data Ukuran_Field

id integer 11

id_user integer 11

panjang integer 11

tinggi integer 11

lebar integer 11

- Tabel_barang  menyimpan data panjang, lebar, tinggi serta bobot/berat barang. Struktur tabel barang dapat dilihat pada Tabel 3.2.

Tabel 3.2. Rancangan Tabel Barang

Nama_Field Tipe_Data Ukuran_Field

id integer 11

id_user integer 11

panjang integer 11

tinggi integer 11

lebar integer 11

berat integer 11

- Tabel_barang_sisa  menyimpan data barang yang tidak dapat masuk ke dalam

gudang. Struktur tabel_barang_sisa dapat dilihat pada Tabel 3.3.

Tabel 3.3 Rancangan Tabel Barang Sisa

Nama_Field Tipe_Data Ukuran_Field

id int 11

id_user int 11

id_barang int 11

panjang int 11

tinggi int 11

lebar int 11


(35)

- Tabel_user  menyimpan data user dan password. Struktur tabel user dapat dapat dilihat pada tabel 3.4.

Tabel 3.4. Rancangan Tabel User

Nama_Field Tipe_Data Ukuran_Field

id_user integer 11

username varchar 50

password varchar 25

confirm varchar 25

- Tabel_temp_barang menyimpan data koordinat-koordinat serta letak sementara

barang dalam ruangan. Struktur tabel_temp_barang dapat dilihat pada Tabel 3.5.

Tabel 3.5. Rancangan Tabel Temp Barang

Nama_Field Tipe_Data Ukuran_Field Keterangan

id integer 11 Id

id_user integer 11 Id User

id_barang integer 11 Id Barang

x double Koordinat x barang

y double Koordinat y barang

z double Koordinat z barang

panjang double Ukuran x (panjang) barang

tinggi double Ukuran y (tinggi) barang

lebar double Ukuran z (lebar) barang

berat int 11 Ukuran berat (bobot) barang

atas varchar 5 Barang yang ditumpuk ke atas

kanan varchar 5 Barang yang disusun ke samping

dalam varchar 5 Barang yang disusun ke depan

index_x integer 11 Posisi x barang

index_y integer 11 Posisi y barang

index_z integer 11 Posisi z barang


(36)

23

- Tabel_hc_berat  menyimpan data temporary urutan berat barang berdasarkan

algoritma Steepest Ascent Hill Climbing. Struktur hc_barang dapat dilihat pada Tabel 3.6.

Tabel 3.6. Rancangan Tabel hc_berat

Nama_Field Tipe_Data Ukuran_Field Keterangan

id integer 11 Id

index1 integer 11 Indeks barang iterasi pertama urutan

pertama

index2 integer 11 Indeks barang iterasi pertama urutan

kedua

index3 integer 11 Indeks barang iterasi pertama urutan

ketiga

index4 integer 11 Indeks barang iterasi pertama urutan

keempat

index5 integer 11 Indeks barang iterasi pertama urutan

kelima

3.2.1. Data barang

Data barang dalam penelitian ini merupakan data yang diinputkan user. Data yang diinputkan oleh user berupa ukuran panjang, tinggi lebar dan berat barang, sedangkan untuk ukuran ruangan defaultnya adalah 100. Untuk ukuran barang serta ukuran

ruangan user dapat mengedit / menggantinya dengan munggunakan tombol update. Isi

dari database untuk data barang, yaitu:

a. Tabel barang

Barang yang datanya diinputkan oleh user akan tersimpan dalam database barang yang dapat dilihat pada Tabel 3.7.

Tabel 3.7. Tabel Barang

id_barang id_user panjang tinggi lebar berat

2 1 25 30 25 60


(37)

Tabel 3.7. Tabel Barang (lanjutan)

id_barang id_user panjang tinggi lebar berat

6 1 25 35 25 60

7 1 25 30 25 30

8 1 23 15 20 10

9 1 25 30 25 30

10 1 25 20 25 20

11 1 25 20 25 20

12 1 23 15 25 5

b. Tabel barang sisa

Tabel barang sisa berisi daftar barang yang tidak dapat masuk ke dalam gudang. Rancangan tabel dapat dilihat pada Tabel 3.8.

Tabel 3.8. Tabel Barang Sisa

id_barang id_user panjang tinggi lebar berat

9 1 25 30 25 30

c. Tabel temp barang

Tabel temp barang berisi data letak/posisi barang serta maksimal tumpukan barang sementara. Rancangan tabel dapat dilihat pada Tabel 3.9.


(38)

Tabel 3.9. Tabel Temp Barang

id_brg id_user x y z pjg tgg lbr brt atas kanan dalam idx_x idx_y idx_z max_tpkn

2 1 12.5 -10 -12.5 25 30 25 60 F T F 1 0 0 60

3 1 -12.5 -12.5 12.5 25 25 25 60 F F T 1 0 1 60

6 1 -12.5 -7.5 -12.5 25 35 25 60 F F F 0 0 0 60

7 1 12.5 -10 12.5 25 30 25 30 F F T 2 0 1 30

8 1 -12.5 17.5 -12.5 23 15 20 10 T F F 0 1 0 50

10 1 12.5 15 -12.5 25 20 25 20 T F F 1 1 0 40

11 1 -12.5 10 12.5 25 20 25 20 T F F 1 1 1 40

12 1 12.5 -12.5 12.5 23 15 25 5 T F F 2 1 1 25

Keterangan: id_brg = id_barang pjg = panjang lbr = lebar brt = berat

idx_x, idx_y, idx_z = index_x, index_y, index_z max_tpkn = max_tumpukan


(39)

d. Tabel hc berat

Tabel hc_berat berisi data temporary hasil pengurutan barang berdasarkan berat

menggunakan algoritma Steepest Ascent Hill Climbing. Rancangan tabel dapat dilihat

pada Tabel 3.10.

Tabel 3.10. Tabel HC Berat

id index1 index2 iindex3 index4 index5 index6 index7 index8 index9

1 6 2 3 7 9 10 11 8 12

2 2 3 6 7 9 10 11 8 12

3 2 6 7 3 9 10 11 8 12

4 2 6 3 9 7 10 11 8 12

5 2 6 3 7 10 9 11 8 12

6 2 6 3 7 9 11 10 8 12

7 2 6 3 7 9 10 8 11 12

8 2 6 3 7 9 10 11 12 8

9 12 6 3 7 9 10 11 8 2

e. Tabel user

Tabel User berisi tentang data user yang berupa id_user, username dan password. Rancangan tabel dapat dilihat pada Tabel 3.11.

Tabel 3.11. Tabel User

id_user username password confirm

1 stella stella stella

2 test123 test123 test123

3.2.2.Data ruangan

Data ruangan dalam penelitian ini merupakan data default yaitu 100 dengan satuan m.

(meter), akan tetapi user juga dapat mengganti ukuran ruangan menggunakan tombol

edit ukuran ruangan. Data yang diinputkan oleh user berupa ukuran panjang, tinggi dan lebar ruangan. Isi dari database untuk data ruangan yaitu:

a. Tabel Ukuran Ruangan

Tabel ukuran barang berisi data ukuran ruangan . Rancangan tabel dapat dilihat pada Tabel 3.12.


(40)

27

Tabel 3.12. Tabel Ukuran Ruangan

id id_user panjang lebar tinggi

1 1 50 50 50

2 2 10 10 10

3.3.Analisis Sistem

Proses analisis sistem diperlukan sebagai dasar perancangan sistem. Analisis sistem bertujuan untuk mengidentifikasi sistem yang akan dibuat. Pada penelitian ini, yang akan diidentifikasi adalah proses yang akan dilakukan oleh user.

3.3.1. Proses user

Tahapan proses yang dilakukan user adalah sebagai berikut:

1. Masukkan data panjang, tinggi, lebar dalam satuan meter(m) dan berat barang dalam satuan kilogram(kg).

2. Kemudian sistem akan menyimpan data barang (panjang, tinggi, lebar dan

berat) ke dalam database sesuai dengan id user yang menginputkan data. 3. Ukuran ruangan diset default 100 X 100 X 100. User dapat mengedit

ukuran barang menggunakan tombol “Ganti Ukuran Ruangan”.

4. Setelah itu sistem melakukan proses penyusunan dengan algoritma

Steepest Ascent Hill Climbing, dimana barang yang diinputkan akan

diurutkan mulai dari barang yang memiliki berat/massa tertinggi.

5. Setelah diurutkan dengan algoritma Steepest Ascent Hill Climbing, maka sistem akan menampilkan hasil barang beserta id dari masing-masing barang yang akan dimasukkan.

6. Setelah selesai tahapan pengurutan dengan algoritma, berikutnya sistem akan memilah barang yang dapat masuk ke dalam gudang dengan cara membandingkan ukuran gudang dengan ukuran barang yang masuk. Kemudian sistem akan menampilkan data tabel barang-barang yang masuk dan data barang-barang yang tidak dapat masuk. Selain itu sistem juga akan menampilkan data posisi/letak barang yang disusun.

7. Kemudian pada tabel data masuk user dapat mengedit ataupun menghapus

data barang yang telah diinputkan. Setelah proses pengeditan juga penghapusan data barang, aplikasi akan kembali mengurutkan barang yang


(41)

8. Selanjutnya sistem akan menampilkan Visualisasi 3D beserta dengan

informasi barang yang telah diurutkan tadi. Adapun bentuk flowchart dari

tahapan yang dilakukan user dapat dilihat pada Gambar 3.7.

3.3.2. Analisis algoritma steepest ascent hill climbing pada aplikasi penyusunan barang pada gudang 3D (tiga dimensi)

Pada proses algoritma Steepest Ascent Hill Climbing, data berat/massa barang dari database diurutkan dengan cara:

1. Inisialisasi state/keadaan awal. Pada proses ini data berat/massa barang diurutkan sesuai dengan id barang yang masuk terlebih dahulu:

id_barang: 2 | berat: 60 id_barang: 3 | berat: 60 id_barang: 6 | berat: 60 id_barang: 7 | berat: 30 id_barang: 8 | berat: 10 id_barang: 9 | berat: 30 id_barang: 10 | berat: 20 id_barang: 11 | berat: 20 id_barang: 12 | berat: 5

- Maka urutan awal / Keadaan Sekarang, yaitu: 60, 60, 60, 30, 10, 30, 20, 20, 5,

dengan urutan id_barang: 2, 3, 6, 7, 8, 9, 10, 11, 12.

- Dilakukan pengujian. Karena urutan tersebut bukan merupakan tujuan maka

keadaan sekarang dijadikan sebagai keadaan awal.

2. a. Tentukan SUCC sebagai nilai terbaik dari successor-successor.

Keadaan sekarang = 60, 60, 60, 30, 10, 30, 20, 20, 5, dengan id_barang = 2, 3, 6, 7, 8, 9, 10, 11, 12. Maka, SUCC merupakan nilai terbaik dari successor-successor pada Tabel 3.13.

Tabel 3.13. Tabel Successor 1

Operator Urutan Berat/Massa Barang Urutan ID Barang

Tukar 1 dengan 2 60-60-60-30-10-30-20-20-5 3-2-6-7-8-9-10-11-12


(42)

29

Tabel 3.13. Tabel Successor 1 (lanjutan)

Operator Urutan Berat/Massa Barang Urutan ID Barang

Tukar 3 dengan 4 60-60-30-60-10-30-20-20-5 2-3-7-6-8-9-10-11-12

Tukar 4 dengan 5 60-60-60-10-30-30-20-20-5 2-3-6-8-7-9-10-11-12

Tukar 5 dengan 6 60-60-60-30-30-10-20-20-5 2-3-6-7-9-8-10-11-12

Tukar 6 dengan 7 60-60-60-30-10-20-30-20-5 2-3-6-7-8-10-9-11-12

Tukar 7 dengan 8 60-60-60-30-10-30-20-20-5 2-3-6-7-8-9-11-10-12

Tukar 8 dengan 9 60-60-60-30-10-30-20-5-20 2-3-6-7-8-9-10-12-11

Tukar 9 dengan 1 5-60-60-30-10-30-20-20-60 12-3-6-7-8-9-10-11-2

SUCC = 60-60-60-30-30-10-20-20-5, dengan id_barang = 2-3-6-7-9-8-10-11-12. b. Operator: Tukar 1  2

Tukar 2  3 Tukar 3  4 Tukar 4  5 Tukar 5  6 Tukar 6  7 Tukar 7  8 Tukar 8  9 Tukar 9  1

c. Operator tersebut digunakan untuk membentuk keadaan baru. Kedaan baru merupakan nilai terbaik dari successor-successor SUCC (60-60-60-30-30-10-20-20-5) dengan id_barang (2-3-6-7-9-8-10-11-12) yang dapat dilihat pada Tabel 3.14.

Tabel 3.14. Tabel Successor SUCC 1

Operator Urutan Berat/Massa Barang Urutan ID Barang

Tukar 1 dengan 2 60-60-60-30-30-10-20-20-5 3-2-6-7-9-8-10-11-12

Tukar 2 dengan 3 60-60-60-30-30-10-20-20-5 2-6-3-7-9-8-10-11-12

Tukar 3 dengan 4 60-60-30-60-30-10-20-20-5 2-3-7-6-9-8-10-11-12

Tukar 4 dengan 5 60-60-60-30-30-10-20-20-5 2-3-6-9-7-8-10-11-12

Tukar 5 dengan 6 60-60-60-30-10-30-20-20-5 2-3-6-7-8-9-10-11-12


(43)

Tabel 3.14. Tabel Successor SUCC 1(lanjutan)

Operator Urutan Berat/Massa Barang Urutan ID Barang

Tukar 7 dengan 8 60-60-60-30-30-10-20-20-5 2-3-6-7-9-8-11-10-12

Tukar 8 dengan 9 60-60-60-30-30-10-20-5-20 2-3-6-7-9-8-10-12-11

Tukar 9 dengan 1 5-60-60-30-30-10-20-20-60 12-3-6-7-9-8-10-11-2

Keadaan baru = 60-60-60-30-30-20-10-20-5 dengan id_barang = 2-3-6-7-9-10-8-11-12. Akan tetapi Keadaan Baru tersebut masih bukan merupakan tujuan, maka nilai Keadaan Baru(60-60-60-30-30-20-10-20-5) dibandingkan dengan nilai SUCC(60-60-60-30-30-10-20-20-5). Karena nilai Keadaan Baru lebih baik dari pada nilai SUCC, maka nilai Keadaan Baru menjadi nilai SUCC, SUCC = 60-60-60-30-30-20-10-20-5 dengan urutan id_barang = 2-3-6-7-9-10-8-11-12.

Kemudian nilai SUCC(60-60-60-30-30-20-10-20-5) dibandingkan dengan nilai Keadaan Sekarang(60, 60, 60, 30, 10, 30, 20, 20, 5). Karena nilai SUCC lebih baik, maka nilai Keadaan Sekarang diganti menjadi nilai SUCC, Keadaan Sekarang = 60-60-60-30-30-20-10-20-5 dengan id_barang = 2-3-6-7-9-10-8-11-12.

Karena Keadaan Sekarang bukan merupakan tujuan, maka tentukan kembali SUCC. Tabel SUCC berikutnya dapat dilihat pada Tabel 3.15

Tabel 3.15. Tabel Successor 2

Operator Urutan Berat/Massa Barang Urutan ID Barang

Tukar 1 dengan 2 60-60-60-30-30-20-10-20-5 3-2-6-7-9-10-8-11-12

Tukar 2 dengan 3 60-60-60-30-30-20-10-20-5 2-6-3-7-9-10-8-11-12

Tukar 3 dengan 4 60-60-30-60-30-20-10-20-5 2-3-7-6-9-10-8-11-12

Tukar 4 dengan 5 60-60-60-30-30-20-10-20-5 2-3-6-9-7-10-8-11-12

Tukar 5 dengan 6 60-60-60-30-20-30-10-20-5 2-3-6-7-10-9-8-11-12

Tukar 6 dengan 7 60-60-60-30-30-10-20-20-5 2-3-6-7-9-8-10-11-12

Tukar 7 dengan 8 60-60-60-30-30-20-20-10-5 2-3-6-7-9-10-11-8-12

Tukar 8 dengan 9 60-60-60-30-30-20-10-5-20 2-3-6-7-9-10-8-12-11

Tukar 9 dengan 1 5-60-60-30-30-20-10-20-60 12-3-6-7-9-10-8-11-2

SUCC = 60-60-60-30-30-20-20-10-5 dengan id_barang = 2-3-6-7-9-10-11-8-12 merupakan tujuan, maka proses berhenti. Maka, urutan barang yang disusun dimulai dari id_barang : 2-3-6-7-9-10-11-8-12 dengan berat barang : 60-60-60-30-30-20-20-10-5.


(44)

31

Mulai

Input panjang, tinggi, lebar(m) dan

berat(kg) barang

Urutkan barang berdasarkan berat/

massa tertinggi dengan algoritma

steepest ascent hill climbing

Edit Data Barang

Update Data Barang Ganti Ukuran

Ruangan

Update Ukuran Ruangan

Ya

Tidak

Ya

Hapus Data Barang

Ya

Tidak Menentukan barang yang dapat

masuk dan tidak dapat masuk ke dalam gudang

Tampilkan Visualisasi 3D Tidak

Selesai


(45)

3.3.3. Penentuan barang yang masuk pada gudang visualisasi 3D (tiga dimensi)

Proses penentuan barang yang masuk pada visualisasi 3D adalah sebagai berikut: 1. Dari data yang diinput oleh user, cek panjang, tinggi serta lebar barang.

2. Jika panjang barang, tinggi barang dan lebar barang lebih kecil atau sama

dengan panjang ruangan, tinggi ruangan dan lebar ruangan, maka barang akan dikenali sebagai index_x awal (panjang barang), index_y (tinggi barang), index_z (lebar barang), dan langsung masuk ke dalam tabel data barang yang masuk ke ruangan. Jika tidak maka barang akan masuk ke dalam tabel data barang yang tidak dapat masuk.

3. Kemudian jika ada barang yang akan diinputkan oleh user lagi, maka sistem akan mengecek, apakah panjang barang berikutnya lebih kecil atau sama dengan panjang ruangan dikurang total panjang barang dan tinggi barang berikutnya lebih kecil atau sama dengan tinggi ruangan-total tinggi barang dan lebar barang berikutnya lebih kecil atau sama dengan lebar ruagan dikurang total lebar barang.

4. Jika ya, maka barang akan disusun ke atas barang sebelumnya dan akan langsung masuk ke dalam tabel data barang yang dapat masuk.

5. Jika tidak maka sistem akan mengecek apakah panjang barang berikutnya

tersebut lebih kecil atau sama dengan panjang ruangan dikurang panjang barang sebelumnya.

6. Jika ya, maka barang akan disusun ke samping barang yang sebelumnya dan barang akan masuk ke dalam tabel data barang yang masuk.

7. Jika tidak maka sistem akan mengecek panjang barang berikutnya tersebut,

apakah panjang barang berikutnya tersebut lebih kecil atau sama dengan panjang barang index_x. Jika ya, maka barang akan disusun ke depan barang sebelumnya dan barang akan masuk ke dalam tabel data barang yang dapat masuk.

8. Jika tidak maka barang akan dimasukan ke dalam tabel data barang yang tidak dapat masuk.

Proses penentuan barang yang masuk dalam gudang dapat juga dilihat pada flowchart


(46)

Mulai

Panjang, tinggi dan lebar barang(m), index_x, index_y,

index_z

Panjang barang <= Panjang ruangan && Tinggi barang <= tinggi ruangan && lebar barang <= lebar ruangan

Ya

Barang masuk ke dalam data barang masuk Tidak

Barang masuk ke dalam data barang yang tidak

dapat masuk Barang yang akan masuk

lagi

Tidak

Selesai

Ya panjang barang && tinggi barang berikutnya <= tinggi Panjang barang berikutnya <= panjang ruangan-total ruangan-total tinggi barang && lebar barang berikutnya

<= lebar ruangan-total lebar barang

Barang disusun ke atas Index_y++

Ya

Panjang barang berikutnya <= panjang maksimal ruangan-panjang barang sebelumnya Tidak

Barang disusun ke samping Index_x++

Tidak

Panjang barang berikutnya <= panjang [index_x]

Barang disusun ke depan Index_z++ Ya Index_x=0 index_y=0 index_z=0 Tidak Ya


(47)

3.4.Perancangan Sistem

3.4.1. Arsitektur umum (general architecture)

Arsitektur umum merupakan desain arsitektur kasar dari sebuah sistem. Pada desain ini digambarkan bagaimana setiap proses berlangsung sehingga terbentuk sebuah sistem yang terorganisasi dengan baik. Rancangan arsitektur umum dari sistem dapat dilihat pada Gambar 3.4.

Urutkan barang berdasarkan berat/

massa tertinggi dengan algoritma steepest ascent hill

climbing

Menentukan barang yang dapat

masuk dan tidak dapat masuk ke dalam gudang

Tampilkan Visualisasi 3D Input ukuran

barang(m) dan berat(kg) barang

Input ukuran ruangan(m)

User

Gambar 3.9. General Architecture

3.4.2. Diagram use case

Use case merupakan sebuah model pergerakan suatu sistem perangkat lunak secara

fungsional (Simarmata, 2010). Dengan adanya use case diharapkan pengguna atau peneliti selanjutnya dapat mengerti alur kerja sistem sehingga sistem dapat digunakan sebaik mungkin. Sistem yang dibangun peneliti menggunakan 1 aktor yang berperan yaitu sebagai user. Rancangan use case sistem dapat dilihat pada Gambar 3.5.


(48)

35

Login

Home

Proses

Tabel Barang Yang Telah Dimasukkan

Input Ukuran dan Berat Barang

Input Ukuran Ruangan

Tabel Barang Yang Telah Dimasukkan

Tabel Barang Yang Tidak Masuk Tabel Posisi dan Maksimal Tumpukan

Barang

Data Proses Penyusunan Barang Dengan Algoritma

Steepest Ascent Hil Climbing Edit, Tambah, Hapus <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<include>> <<extend>> <<extend>> <<extend>> <<extend>> Logout <<extend>>

Tabel Posisi dan Batas Maksimal Tumpukan <<include>> Konfigurasi <<extend>> Visualisasi 3D <<include>> User

Gambar 3.10. Diagram Use case

3.4.3. Realisasi definisi use case

Realisasi definisi use case dimaksudkan untuk menjelaskan setiap kegiatan yang dilakukan aktor dalam use case. Terdapat kegiatan use case include yang berarti aktor

dapat melakukan kegiatan yang dituju arah panah. Dan kegiatan use case extend yang

berarti aktor dapat melakukan kegiatan jika kondisi kegiatan sebelumnya sudah terpenuhi, dapat dilihat pada Tabel 3.16.

Tabel 3.16. Realisasi Definisi Use case

No Use case Deskripsi

1 Halaman Utama Menampilkan halaman utama dari sistem,


(49)

Tabel 3.16. Realisasi Definisi Use case (lanjutan)

No Use Case Deskripsi

2 Login Proses masuk ke dalam sistem, digunakan oleh user

3 Tabel Barang yang

Telah Masuk

Menampilkan tabel data barang yang telah

diinputkan oleh user

4 Tabel Posisi dan Batas

Maksimal Tumpukan

Menampilkan tabel data posisi dan batas maksimal tumpukan masing-masing barang

5 Input Ukuran dan Berat

Barang

Menampilkan input box yang digunakan oleh user

untuk meng-input data ukuran dan berat barang

6 Input Ukuran Ruangan Menampilkan input box yang digunakan oleh user

untuk meng-input data ukuran ruangan

7 Tabel Barang yang

Tidak Masuk

Menampilkan tabel data barang yang tidak dapat masuk ke dalam ruangan

8 Visualisasi 3D Menampilkan halaman tampilan animasi

penyusunan barang dalam ruang (dalam bentuk 3D/tiga dimensi)

9 Logout Proses keluar dari sistem hanya jika sudah login

10 Proses Melakukan proses pengurutan barang menggunakan

algoritma

11 Data Proses

Penyusunan Barang Menggunakan Algoritma Steepest Ascent Hill Climbing

Menampilkan proses pengurutan barang

menggunakan algoritma Steepest Ascent Hill

Climbing

12 Edit, Tambah, Hapus Proses edit, tambah, dan hapus untuk setiap isi tabel

3.5. Perancangan Tampilan Antarmuka

Tampilan antarmuka dari sistem yang akan dirancang adalah desain awal dari

interface sistem.

3.5.1. Rancangan halaman login user

Pada halaman login, user harus mengisikan username dan password yang sesuai agar dapat mengakses sistem dari aplikasi ini. Rancangan halaman login dapat dilihat pada Gambar 3.11


(50)

37

Footer

Footer

PENYUSUNAN BARANG PADA GUDANG 3D PENYUSUNAN BARANG PADA GUDANG 3D

Username :

Password:

Login

Gambar 3.11. Rancangan Halaman LoginUser

3.5.2. Rancangan halaman registrasi user

Pada halaman registrasi, user dapat mendaftarkan diri dengan mengisi username dan

password serta confirm password untuk dapat mengakses sistem dari aplikasi ini.

Rancangan halaman registrasi dapat dilihat pada Gambar 3.12.

Footer Footer

PENYUSUNAN BARANG PADA GUDANG 3D

PENYUSUNAN BARANG PADA GUDANG 3D

Username :

Password:

Confirm Password:

Register Reset

Gambar 3.12. Rancangan Halaman Registrasi User

3.5.3. Rancangan halaman konfigurasi

Pada halaman konfigurasi, user dapat menginput ukuran panjang, tinggi, lebar serta berat barang. User juga dapat menginput panjang, tinggi, lebar ruangan. Kemudian user dapat mengedit serta menghapus data barang yang telah dimasukkan. Pada


(51)

halamn ini user juga dapat melihat tabel data barang yang telah dimasukkan serta tabel data posisi dan batas maksimal tumpukan masing-masing barang. Rancangan dapat dilihat pada Gambar 3.13.

Footer

Footer

PENYUSUNAN BARANG PADA GUDANG 3D PENYUSUNAN BARANG PADA GUDANG 3D

HOME PROSES LOGOUT

Panjang Ruangan : Lebar Ruangan : Tinggi Ruangan :

Panjang Barang : Lebar Barang : Tinggi Barang :

Berat Barang :

Ganti Ukuran Ruangan Masukkan Barang

Visualisasi 3D

Tabel Data Panjang, Tinggi, Lebar dan Berat Barang

Tabel Data Panjang, Tinggi, Lebar dan Berat Barang

Barang Yang Telah Dimasukan

Posisi dan Batas Maksimal Tumpukan

Tabel Data Posisi dan Batas Maksimal Tumpukan masing-masing Barang

Tabel Data Posisi dan Batas Maksimal Tumpukan masing-masing Barang

Tabel data barang yang tidak masuk

Tabel data barang yang tidak masuk

Barang Yang Tidak Masuk

EDIT HAPUS

Gambar 3.13. Rancangan Halaman Konfigurasi

3.5.4. Rancangan halaman utama user

Pada halaman utama user akan ditampilkan tabel data barang yang telah dimasukkan

user serta tabel data posisi dan batas maksimal tumpukan masing-masing barang.Pada

halaman utama juga terdapat tombol “Konfigurasi”, tombol ini akan mengarahkan

user ke halaman konfigurasi dimana user dapat meng-input data barang dan ruangan.


(52)

39

Footer

Footer

PENYUSUNAN BARANG PADA GUDANG 3D PENYUSUNAN BARANG PADA GUDANG 3D

Konfigurasi

Tabel Data Panjang, Tinggi, Lebar dan Berat Barang

Tabel Data Panjang, Tinggi, Lebar dan Berat Barang

HOME

KONFIGURASI

PROSES

LOGOUT

Barang Yang Telah Dimasukan

Posisi dan Batas Maksimal Tumpukan

Tabel Data Posisi dan Batas Maksimal Tumpukan masing-masing Barang

Tabel Data Posisi dan Batas Maksimal Tumpukan masing-masing Barang

Gambar 3.14. Rancangan Halaman Utama User

3.5.5. Rancangan halaman hasil proses pengurutan dengan algoritma steepest ascent hill climbing

Halaman Proses berisi tentang data hasil pengurutan barang berdasarkan barang yang

memiliki berat/massa terbesar menggunakan algoritma Steepest Ascent Hill Climbing.

Rancangan dapat dilihat pada Gambar 3.15.

Footer

Footer

PENYUSUNAN BARANG PADA GUDANG 3D PENYUSUNAN BARANG PADA GUDANG 3D

HOME

KONFIGURASI

LOGOUT PROSES

PENYUSUNAN BARANG DENGAN ALGORITMA STEEPEST ASCENT HILL CLIMBING

PENYUSUNAN BARANG DENGAN ALGORITMA STEEPEST ASCENT HILL CLIMBING

Data Pengurutan Berat Barang Menggunakan Algoritma

Data Pengurutan Berat Barang Menggunakan Algoritma


(53)

3.5.6. Rancangan halaman visualisasi 3D

Pada halaman visualisasi, aplikasi akan menampilkan hasil visual penyusunan barang dalam bentuk 3D (tiga dimensi), selain itu aplikasi juga menampilkan data id_barang berdasarkan urutan barang yang pertama kali disusun. Rancangan dapat dilihat pada Gambar 3.16.

Data Id Barang

Gambar Barang Visualisasi 3D

Gambar Barang Visualisasi 3D 1 : 10 x 10 x 10

15 : 20 x 5 x 15 5 : 6 x 6 x 10 10 : 7 x 7 x 4


(1)

LAMPIRAN KODE PROGRAM

1. proses.php

function rotasi_operator($array_nilai) { $temp = 0;

$counter_index = 0;

for ($i = 0; $i < count($array_nilai); $i++) { $array_nilai_temp = $array_nilai;

if (($counter_index) < count($array_nilai) - 1) { $temp = $array_nilai_temp[$counter_index];

$array_nilai_temp[$counter_index] = $array_nilai_temp[$counter_index + 1];

$array_nilai_temp[$counter_index + 1] = $temp; $hasil[] = $array_nilai_temp;

} else {

$temp = $array_nilai_temp[0];

$array_nilai_temp[0] = $array_nilai_temp[count($array_nilai) - 1];

$array_nilai_temp[count($array_nilai) - 1] = $temp; $hasil[] = $array_nilai_temp;

}

$counter_index++; }

return $hasil; }

2. database.php

function konfigurasi_item($id_user) {

//kosongkan tabel_temp_barang, karena isinya harus dinamis mysql_query("DELETE FROM tabel_temp_barang WHERE

id_user=$id_user") or die("Kosongkan tabel_temp_barang : " . mysql_error());

mysql_query("DELETE FROM tabel_barang_sisa WHERE

id_user=$id_user") or die("Kosongkan tabel_temp_barang : " . mysql_error());

// mysql_query(" TRUNCATE TABLE tabel_temp_barang") or die("Kosongkan Temp : " . mysql_error());

//untuk ruangan

$q_ruangan = mysql_query("SELECT * FROM tabel_ukuran_ruangan WHERE id_user=$id_user") or die(mysql_error());

$row_ruangan = mysql_fetch_array($q_ruangan); $panjang_ruangan = $row_ruangan ['panjang']; $tinggi_ruangan = $row_ruangan ['tinggi']; $lebar_ruangan = $row_ruangan ['lebar']; $x_nol_ruangan = -$panjang_ruangan / 2; $y_nol_ruangan = -$tinggi_ruangan / 2; $z_nol_ruangan = -$lebar_ruangan / 2; $x_max_ruangan = $panjang_ruangan / 2; $y_max_ruangan = $tinggi_ruangan / 2; $z_max_ruangan = $lebar_ruangan / 2; @$x_sekarang = $x_nol_ruangan;


(2)

@$z_sekarang = $z_nol_ruangan; $hc = hill_climbing($id_user); // print_r($hc);

for ($i = 0; $i < count($hc); $i++) { $id = $hc[$i][0];

$q_kotak = mysql_query("SELECT * FROM tabel_barang WHERE id_barang=$id") or die("tampil tabel_barang : " .

mysql_error());

while ($row = mysql_fetch_array($q_kotak)) { $id_barang = $row['id_barang'];

$panjang = $row['panjang']; $tinggi = $row['tinggi']; $lebar = $row['lebar']; $berat = $row['berat'];

$id_kotak = $row['id_barang']; //informasi barang saat ini yang diproses

$informasi_barang = pengaturan_barang($id_user, $panjang, $tinggi, $lebar, $berat, $id_kotak);

if ($informasi_barang != 0) { @$kotak[] = array(

id => $id_barang,

sp_size => $panjang . " x " . $tinggi . " x " . $lebar, sp_size_1 => $panjang,

sp_size_2 => $tinggi, sp_size_3 => $lebar,

x_origin_in_bin => $informasi_barang[0], y_origin_in_bin => $informasi_barang[1], z_origin_in_bin => $informasi_barang[2], constraints => 0

); } }

}

// echo json_encode(@$kotak); return json_encode(@$kotak); }

function konfigurasi_ruangan($id_user) {

$q_ruangan = mysql_query("SELECT * FROM tabel_ukuran_ruangan WHERE id_user=$id_user") or die(mysql_error());

$row_ruangan = mysql_fetch_array($q_ruangan); return json_encode(array($row_ruangan['panjang'], $row_ruangan['tinggi'], $row_ruangan['lebar'])); }

function pengaturan_barang($id_user, $panjang, $tinggi, $lebar, $berat, $id_kotak) {

$q_ruangan = mysql_query("SELECT * FROM tabel_ukuran_ruangan WHERE id_user=$id_user") or die(mysql_error());

$row_ruangan = mysql_fetch_array($q_ruangan);

$panjang_ruangan_min = -$row_ruangan ['panjang'] / 2; $tinggi_ruangan_min = -$row_ruangan ['tinggi'] / 2;


(3)

$lebar_ruangan_min = -$row_ruangan ['lebar'] / 2; $panjang_ruangan_max = $row_ruangan ['panjang'] / 2; $tinggi_ruangan_max = $row_ruangan ['tinggi'] / 2; $lebar_ruangan_max = $row_ruangan ['lebar'] / 2;

if ($panjang <= $panjang_ruangan_max - ($panjang_ruangan_min) && $tinggi <= ($tinggi_ruangan_max - ($tinggi_ruangan_min)) && $lebar <= ($lebar_ruangan_max - ($lebar_ruangan_min))) {

$q_cek_temp = mysql_query("SELECT * FROM tabel_temp_barang WHERE id_user=$id_user") or die("cek temp kotak : " .

mysql_error());

if (mysql_num_rows($q_cek_temp) > 0) {

$hasil = keatas($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak);

if (is_array($hasil)) {

$x = $hasil[0]; $y = $hasil[1]; $z = $hasil[2];

} else {

$hasil = kesamping($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak);

if (is_array($hasil)) { $x = $hasil[0]; $y = $hasil[1]; $z = $hasil[2]; } else {

$hasil = kedalam($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak);

if (is_array($hasil)) { $x = $hasil[0]; $y = $hasil[1]; $z = $hasil[2]; } else {

//jika sudah penuh

mysql_query("INSERT INTO tabel_barang_sisa(id_barang, id_user, panjang, tinggi, lebar, berat) VALUES($id_kotak, $id_user, $panjang, $tinggi, $lebar, $berat)") or die("Error Insert Kotak sisa :" . mysql_error());

// break; }

} } } else {

$hasil = kotak_pertama($id_user, $panjang, $tinggi, $lebar, $panjang_ruangan_min, $tinggi_ruangan_min, $lebar_ruangan_min, $berat, $id_kotak);

$x = $hasil[0]; $y = $hasil[1]; $z = $hasil[2]; }

if (isset($x) && isset($y) && isset($z)) { return Array($x, $y, $z);

} else {

//kembalikan 0 untuk dicek, agara tidak ditambah pada array posisi kotak

return 0; }


(4)

} else {

mysql_query("INSERT INTO tabel_barang_sisa(id_user, panjang, tinggi, lebar, berat) VALUES($id_user, $panjang, $tinggi, $lebar, $berat)") or die("Error Insert Kotak sisa :" . mysql_error()); }

} /*

* panjang <= panjang sebelumnya * lebar <= lebar sebelumnya * total panjang <= l

* total tinggi <= tinggi ruang * total lebar <= lebar ruang *

* update atas sebelumnya F * y tambah

* x tetap * z tetap */

function keatas($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak) {

$q_cek_atas = mysql_query("SELECT * FROM tabel_temp_barang WHERE id_user=$id_user AND $panjang<=panjang AND $lebar<=lebar AND $berat<=max_tumpukan AND atas='T' ORDER BY id_barang ASC") or die("Tampil 1: " . mysql_error());

while ($temp = mysql_fetch_array($q_cek_atas)) { $id_temp = $temp['id_barang'];

$x_temp = $temp['x']; $y_temp = $temp['y']; $z_temp = $temp['z'];

$panjang_temp = $temp['panjang']; $tinggi_temp = $temp['tinggi']; $lebar_temp = $temp['lebar']; $berat_temp = $temp['berat']; $index_x = $temp['index_x']; $index_y = $temp['index_y']; $index_z = $temp['index_z'];

$max_tumpukan = $berat_temp - $berat;

if ($y_temp + $tinggi_temp / 2 + $tinggi <= $tinggi_ruangan_max) {

$x = $x_temp;

$y = $y_temp + $tinggi_temp / 2 + $tinggi / 2;

$z = $z_temp;

mysql_query("UPDATE tabel_temp_barang SET atas='F' WHEREid_barang=$id_temp") or die("Update 1" . mysql_error());

mysql_query("INSERT INTO tabel_temp_barang

(id_user, id_barang, x,y,z,panjang,tinggi,lebar, berat, atas,kanan,dalam, index_x, index_y, index_z, max_tumpukan) VALUES($id_user, $id_kotak, $x,$y,$z, $panjang,$tinggi,$lebar, $berat, 'T', 'F', 'F', $index_x, $index_y+1, $index_z,$max_tumpukan)") or die("Insert 1" . mysql_error());

return Array($x, $y, $z); break;


(5)

} else { continue; }

} }

function kesamping($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak) {

// $q_cek_atas = mysql_query("SELECT * FROM tabel_temp_barang WHERE id_user=$id_user AND $panjang<=panjang AND $lebar<=lebar AND $berat<=max_tumpukan

//AND kanan='T' ORDER BY id_barang ASC ") or die("Tampil 1: " . mysql_error()); $q_cek_atas = mysql_query("SELECT * FROM

tabel_temp_barang WHERE id_user=$id_user AND $lebar<=lebar AND $berat<=max_tumpukan AND kanan='T' ORDER BY id_barang ASC ") or die("Tampil 1: " . mysql_error());

while ($temp = mysql_fetch_array($q_cek_atas)) { $id_temp = $temp['id_barang'];

$x_temp = $temp['x']; $y_temp = $temp['y']; $z_temp = $temp['z'];

$panjang_temp = $temp['panjang']; $tinggi_temp = $temp['tinggi']; $lebar_temp = $temp['lebar']; $index_x = $temp['index_x']; $index_y = $temp['index_y']; $index_z = $temp['index_z']; $max_tumpukan = $berat;

if ($x_temp + $panjang_temp / 2 + $panjang <= $panjang_ruangan_max) {

$x = $x_temp + $panjang_temp / 2 + $panjang / 2; $y = $y_temp - $tinggi_temp / 2 + $tinggi / 2; $z = $z_temp - $lebar_temp / 2 + $lebar / 2;

mysql_query("UPDATE tabel_temp_barang SET kanan='F' WHERE id_barang=$id_temp") or die("Update 1" . mysql_error()); mysql_query("INSERT INTO tabel_temp_barang (id_user, id_barang,x,y,z,panjang,tinggi,lebar, berat,

atas,kanan,dalam, index_x, index_y, index_z, max_tumpukan) VALUES($id_user, $id_kotak,$x,$y,$z, $panjang,$tinggi,$lebar, $berat, 'T', 'T', 'T', $index_x+1, $index_y, $index_z,

$max_tumpukan)") or die("Insert 1" . mysql_error()); return Array($x, $y, $z);

} else { continue; }

} }

function kedalam($id_user, $panjang, $tinggi, $lebar, $berat, $panjang_ruangan_max, $tinggi_ruangan_max, $lebar_ruangan_max, $id_kotak) {

$q_cek_atas = mysql_query("SELECT * FROM tabel_temp_barang WHERE id_user=$id_user AND $panjang<=panjang AND $lebar<=lebar AND


(6)

$berat<=max_tumpukan AND dalam='T' ORDER BY index_x ASC, id_barang ASC LIMIT 1") or die("Tampil 1: " . mysql_error()); while ($temp = mysql_fetch_array($q_cek_atas)) {

$id_temp = $temp['id_barang']; $x_temp = $temp['x'];

$y_temp = $temp['y']; $z_temp = $temp['z'];

$panjang_temp = $temp['panjang']; $tinggi_temp = $temp['tinggi']; $lebar_temp = $temp['lebar']; $index_x = $temp['index_x']; $index_y = $temp['index_y']; $index_z = $temp['index_z']; $max_tumpukan = $berat;

if ($z_temp + $lebar_temp / 2 + $lebar <= $lebar_ruangan_max && $panjang <=$panjang_temp) {

$x = $x_temp - $panjang_temp / 2 + $panjang / 2; $y = $y_temp - $tinggi_temp / 2 + $tinggi / 2; $z = $z_temp + $lebar_temp / 2 + $lebar / 2;

mysql_query("UPDATE tabel_temp_barang SET dalam='F' WHERE id_barang=$id_temp") or die("Update 1" . mysql_error()); mysql_query("INSERT INTO tabel_temp_barang (id_user, id_barang, x,y,z,panjang,tinggi,lebar, berat,

atas,kanan,dalam, index_x, index_y, index_z, max_tumpukan) VALUES($id_user, $id_kotak,$x,$y,$z, $panjang,$tinggi,$lebar, $berat, 'T', 'F', 'T', $index_x+1, $index_y, $index_z+1, $max_tumpukan)") or die("Insert 1" . mysql_error()); return Array($x, $y, $z);

} else { continue; }

} }

//jika tabel_temp_barang masih kosong

function kotak_pertama($id_user, $panjang, $tinggi, $lebar, $panjang_ruangan_min, $tinggi_ruangan_min, $lebar_ruangan_min, $berat, $id_kotak) {

$x = $panjang_ruangan_min + $panjang / 2; $y = $tinggi_ruangan_min + $tinggi / 2; $z = $lebar_ruangan_min + $lebar / 2; $max_tumpukan = $berat;

mysql_query("INSERT INTO tabel_temp_barang (id_user, id_barang, x,y,z,panjang,tinggi,lebar, berat, atas,kanan,dalam, index_x, index_y, index_z, max_tumpukan) VALUES($id_user, $id_kotak, $x,$y,$z, $panjang,$tinggi,$lebar, $berat, 'T', 'T', 'T', 0,0,0, $max_tumpukan)") or die("Insert 1" . mysql_error());

return Array($x, $y, $z); }