PEMODELAN 3D JEMBATAN CABLE STAYED DAN SUSPENSION
advertisement
PEMODELAN 3D JEMBATAN CABLE STAYED DAN SUSPENSION MENGGUNAKAN WEB HTML 5 SKRIPSI Oleh : Emyka 1200998593 Adrianita Fauziah 1200998870 Simon Ardhi Yudanto 1200999803 Universitas Bina Nusantara Jakarta 2012 PEMODELAN 3D JEMBATAN CABLE STAYED DAN SUSPENSION MENGGUNAKAN WEB HTML 5 SKRIPSI Diajukan sebagai salah satu syarat untuk gelar kesarjanaan pada School of Computer Science Jenjang Pendidikan Strata-1 Oleh : Emyka 1200998593 Adrianita Fauziah 1200998870 Simon Ardhi Yudanto 1200999803 Universitas Bina Nusantara Jakarta 2012 ii PERNYATAAN Dengan ini kami, Nama : Emyka NIM : 1200998593 Nama : Adrianita Fauziah NIM : 1200998870 Nama : Simon Ardhi Yudanto NIM : 1200999803 Judul skripsi : Pemodelan 3D Jembatan Cable Stayed dan Suspension Menggunakan Web HTML 5 Memberikan kepada Universitas Bina Nusantara hak non-eksklusif untuk menyimpan, memperbanyak, dan menyebarluaskan skripsi karya kami, secara keseluruhan atau hanya sebagian atau hanya ringkasannya saja, dalam bentuk format tercetak dan atau elektronik. Menyatakan bahwa kami, akan mempertahankan hak exclusive kami, untuk menggunakan seluruh atau sebagian isi skripsi kami, guna pengembangan karya di masa depan, misalnya bentuk artikel, buku, perangkat lunak, ataupun sistem informasi. Jakarta, 01 Maret 2012 Emyka Adrianita Fauziah v Simon Ardhi Yudanto PEMODELAN 3D JEMBATAN CABLE STAYED DAN SUSPENSION MENGGUNAKAN WEB HTML 5 SKRIPSI Disusun oleh : Emyka 1200998593 Adrianita Fauziah 1200998870 Simon Ardhi Yudanto 1200999803 Disetujui oleh : Pembimbing Samuel Mahatmaputra Tedjojuwono, S.Kom., M.Info.Tech Kddsn : D2131 Universitas Bina Nusantara Jakarta 2012 iii PRAKATA Puji syukur kami panjatkan kepada Tuhan Yang Maha Esa atas berkat dan rahmat-Nya, sehingga penulis dapat menyelesaikan penyusunan skripsi dengan judul “Pemodelan 3D Jembatan Cable Stayed dan Suspension Menggunakan Web HTML 5”. Skripsi ini disusun untuk memenuhi salah satu syarat kelulusan dalam jenjang pendidikan strata-1 (S1) jurusan Computer Science pada School of Computer Science di Universitas Bina Nusantara, Jakarta. Pada kesempatan ini, penulis ingin menyampaikan rasa terima kasih kepada semua pihak yang telah memberikan bantuan baik nasihat, petunjuk maupun dorongan kepada kami. Ucapan terima kasih ini kami tujukan kepada : 1. Orang tua dan saudara-saudara yang telah memberikan bimbingan, dukungan dan bantuan secara moril maupun material. 2. Bapak Prof. Dr. Ir,. Harjanto Prabowo, MM, selaku Rektor Universitas Bina Nusantara. 3. Bapak Fredy Purnomo, S.Kom., M.Kom selaku Head of School of Computer Science dan Head of Computer Science Department. 4. Ibu Yen Lina Prasetio, S.Kom., M.CompSc selaku Deputy Head of Computer Science School – Academic & Operation. 5. Bapak Samuel Mahatmaputra Tedjojuwono, S.Kom., M.Info.Tech selaku dosen pembimbing yang telah memberikan petunjuk, saran dan bimbingan kepada kami sehingga skripsi ini dapat terselesaikan dengan baik. vii 6. Seluruh dosen Universitas Bina Nusantara yang telah mendidik dan membimbing penulis selama masa perkuliahan hingga akhir penulisan skripsi ini. 7. Teman-teman yang telah memberikan dukungan dan saran-saran berharga kepada penulis dari awal hingga akhir penulisan skripsi ini. 8. Semua pihak yang penulis tidak dapat disebutkan satu persatu yang telah membantu dalam penulisan skripsi ini. Akhir kata, penulis berharap agar penulisan skripsi ini bermanfaat bagi para pembaca. Penulis menyadari bahwa masih ada kekurangan di dalam penulisan skripsi ini yang diakibatkan oleh keterbatasan waktu, pengalaman, serta pengetahuan penulis. Oleh karena itulah, penulis sangat menghargai masukan, saran, serta kritik yang diberikan oleh para pembaca. Semoga kritik dan saran yang diberikan bisa menjadi modal kami agar bisa memperbaiki penulisan kami di masa yang akan datang. Jakarta, Januari 2012 Penulis viii PERNYATAAN Dengan ini kami, Nama : Emyka NIM : 1200998593 Nama : Adrianita Fauziah NIM : 1200998870 Nama : Simon Ardhi Yudanto NIM : 1200999803 Judul skripsi : Pemodelan 3D Jembatan Cable Stayed dan Suspension Menggunakan Web HTML 5 Memberikan kepada Universitas Bina Nusantara hak non-eksklusif untuk menyimpan, memperbanyak, dan menyebarluaskan skripsi karya kami, secara keseluruhan atau hanya sebagian atau hanya ringkasannya saja, dalam bentuk format tercetak dan atau elektronik. Menyatakan bahwa kami, akan mempertahankan hak exclusive kami, untuk menggunakan seluruh atau sebagian isi skripsi kami, guna pengembangan karya di masa depan, misalnya bentuk artikel, buku, perangkat lunak, ataupun sistem informasi. Jakarta, 01 Maret 2012 Emyka Adrianita Fauziah v Simon Ardhi Yudanto PEMODELAN 3D JEMBATAN CABLE STAYED DAN SUSPENSION MENGGUNAKAN WEB HTML 5 SKRIPSI Disusun oleh : Emyka 1200998593 Adrianita Fauziah 1200998870 Simon Ardhi Yudanto 1200999803 Disetujui oleh : Pembimbing Samuel Mahatmaputra Tedjojuwono, S.Kom., M.Info.Tech Kddsn : D2131 Universitas Bina Nusantara Jakarta 2012 iii DAFTAR ISI Halaman Halaman Judul Luar ............................................................................................................ i Halaman Judul Dalam ........................................................................................................ ii Halaman Persetujuan Hard Cover ....................................................................................iii Halaman Pernyataan Dewan Penguji ................................................................................ iv Halaman Pemberian Hak Cipta Non Eksklusif dari Mahasiswa ke Universitas Bina Nusantara ........................................................................................................................... v Abstrak .............................................................................................................................. vi Prakata .............................................................................................................................. vii Daftar Isi .......................................................................................................................... ix Daftar Tabel ....................................................................................................................xiii Daftar Gambar ................................................................................................................. xiv BAB 1 PENDAHULUAN.............................................................................................. 1 1.1 Latar Belakang ........................................................................................... 1 1.2 Ruang Lingkup ........................................................................................... 2 1.3 Tujuan dan Manfaat ................................................................................... 3 1.4 Metodologi Penelitian ................................................................................ 3 1.5 Sistematika Penulisan ................................................................................ 5 BAB 2 LANDASAN TEORI......................................................................................... 6 2.1 Teori-teori Dasar / Umum ......................................................................... 6 ix 2.1.1 Rekayasa Perangkat Lunak ............................................................ 6 2.1.1.1 Pengertian Perangkat Lunak ........................................... 6 2.1.1.2 Karakteristik Perangkat Lunak........................................ 7 2.1.1.3 2.1.2 Paradigma Perangkat Lunak Waterfall Model ................ 7 Unified Modeling Language (UML) .............................................. 9 2.1.2.1 Use Case Diagram .......................................................... 9 2.1.2.2 Sequence Diagram......................................................... 11 2.1.2.3 Activity Diagram............................................................ 12 2.1.3 World Wide Web ........................................................................... 14 2.1.4 Web Application ........................................................................... 14 2.2 Teori Khusus.............................................................................................. 15 2.2.1 2.2.2 Jembatan....................................................................................... 15 2.2.1.1 Jembatan Cable Stayed ................................................. 15 2.2.1.2 Jembatan Suspension..................................................... 17 Grafika Komputer ........................................................................ 19 2.2.2.1 Pengertian Grafika Komputer ....................................... 19 2.2.2.2 Peranan dan Penggunaan Grafika Komputer ................ 19 2.2.2.3 Pemodelan Objek 3D .................................................... 21 2.2.2.4 3D Objek dan Komponen ............................................. 22 2.2.3 2.2.2.5 Tipe 3D Modeling ......................................................... 23 2.2.2.6 Transformasi padaObjek 3D ......................................... 23 HTML ( Hypertext Markup Language ) ...................................... 32 x 2.2.3.1 HTML 5 ........................................................................ 32 2.2.3.2 HMTL 5 Canvas ........................................................... 32 2.2.4 JavaScript..................................................................................... 33 2.2.5 Document Object Model (DOM) dan Canvas.............................. 33 2.2.6 Sistem Pembanding ...................................................................... 34 BAB 3 ANALISIS DAN PERANCANGAN SISTEM .............................................. 38 3.1 3.2 Analisis pada Sistem pembanding ........................................................... 38 3.1.1 Identifikasi Masalah ..................................................................... 38 3.1.2 Usulan Pemecahan Masalah......................................................... 39 Perancangan Sistem ................................................................................. 39 3.2.1 Struktur Menu ............................................................................. 39 3.2.1.1 Struktur Menu Aplikasi web pemodelan 3D jembatan .... 40 3.2.2 Perancangan Spesifikasi Proses Sistem pemodelan 3D Object ... 41 3.2.3 Use Case Diagram ....................................................................... 47 3.2.4 Sequence Diagram........................................................................ 49 3.2.5 3.2.4.1 Sequence Diagram Rotasi dan Scale Object ................. 49 3.2.4.2 Sequence Diagram Menu Tutorial ................................ 50 Activity Diagram........................................................................... 50 3.2.5.1 Activity Diagram Halaman Home ................................. 51 3.2.5.2 Activity Diagram Menu Tutorial ................................... 52 3.2.5.3 Activity Diagram Menu View Cable Stayed ................. 53 xi 3.2.5.4 3.2.6 Activity Diagram Menu View Suspension..................... 54 Rncangan Layar ........................................................................... 55 3.2.6.1 Rancangan Layar halaman Home ................................. 55 3.2.6.2 Rancangan Layar halaman Menu View Cable Stayed .. 56 3.2.6.3 Rancangan Layar halaman Menu View Suspension ..... 57 3.2.6.4 Rancangan Layar halaman Tutorial .............................. 58 BAB 4 IMPLEMENTASI DAN EVALUASI ............................................................ 59 4.1 4.2 Rencana Implementasi ............................................................................. 59 4.1.1 Spesifikasi Software ..................................................................... 59 4.1.2 Spesifikasi Hardware ................................................................... 59 Prosedur Operasional ............................................................................... 60 4.2.1 4.3 Cara penggunaan Sistem .............................................................. 60 Evaluasi .................................................................................................... 70 4.3.1 Performance fungsi-fungsi pada sistem ....................................... 70 4.3.2 Testing Bandwidth ....................................................................... 71 BAB 5 SIMPULAN DAN SARAN ............................................................................. 72 5.1 Simpulan .................................................................................................. 72 5.2 Saran......................................................................................................... 72 DAFTAR PUSTAKA RIWAYAT HIDUP SURAT SURVEI xii DAFTAR GAMBAR Halaman Gambar 2.1 Pemodelan Waterfall ............................................................................ 8 Gambar 2.2 Simbol actor dalam use case diagram ............................................... 10 Gambar 2.3 Simbol Use Case dalam Use Case Diagram ...................................... 10 Gambar 2.4 Simbol Association dalam Use case Diagram ................................... 10 Gambar 2.5 Simbol Extend dalam Use Case Diagram .......................................... 10 Gambar 2.6 Simbol system boundary dalam use case diagram ............................. 11 Gambar 2.7 Simbol actor dalam sequence diagram .............................................. 11 Gambar 2.8 Simbol object lifeline dalam sequence diagram ................................. 12 Gambar 2.9 Simbol activation dalam sequence diagram....................................... 12 Gambar 2.10 Simbol message, return, callback message dalam sequence diagram ............................................................................................................ 12 Gambar 2.11 Simbol initial state dalam activity diagram ....................................... 13 Gambar 2.12 Simbol final state dalam activity diagram ......................................... 13 Gambar 2.13 Simbol decision dalam activity diagram ........................................... 13 Gambar 2.14 Simbol action state dalam activity diagram ...................................... 14 Gambar 2.15 Simbol control flow dalam activity diagram ..................................... 14 Gambar 2.16 Dua desain utama jembatan cable-stayed ......................................... 16 Gambar 2.17 Desain struktur jembatan suspension ................................................. 18 Gambar 2.18 Bentuk-bentuk objek 3D .................................................................... 21 Gambar 2.19 Translasi pada objek 2D ..................................................................... 24 Gambar 2.20 Translasi pada objek 3D ..................................................................... 25 xiv Gambar 2.21 Skala objek 2Ddengan nilai skala 3untuk x dan y ............................. 26 Gambar 2.22 Skala pada objek ................................................................................ 27 Gambar 2.23 Hubungan antara sudut dan koordinat pada rotasi ............................. 28 Gambar 2.24 Rotasi objek 3D .................................................................................. 31 Gambar 3.1 Perancangan spesifiakasi proses sistem ............................................. 41 Gambar 3.2 Use case Diagram Pemodelan 3D Jembatan ..................................... 48 Gambar 3.3 Sequence Diagram Rotating_dan_Scalling_Object .......................... 49 Gambar 3.4 Sequence Diagram Menu _Tutorial .................................................. 50 Gambar 3.5 Activity Diagram Halaman Home .................................................... 51 Gambar 3.6 Activity Diagram Menu Tutorial ........................................................ 52 Gambar 3.7 Activity Diagram Menu View pada Submenu Cable Stayed Bridge 53 Gambar 3.8 Activity Diagram Menu View pada Submenu Suspension Bridge ... 54 Gambar 3.9 Rancangan layar halaman utama (home) ........................................... 55 Gambar 3.10 Rancangan Layar Halaman Menu View- Cable Stayed Bridge ....... 56 Gambar 3.11 Rancangan Layar Halaman Menu View-Suspension Bridge ........... 57 Gambar 3.12 Rancangan Layar Halaman Tutorial ................................................. 58 Gambar 4.1 Tampilan layar halaman Home ......................................................... 60 Gambar 4.2 Tampilan Layar View Jembatan Cable Stayed .................................. 61 Gambar 4.3 Tampilan Layar Rotasi kiri-kanan Jembatan Cable Stayed .............. 61 Gambar 4.4 Tampilan Layar Rotasi atas-bawah Jembatan Cable Stayed ............. 62 Gambar 4.5 Tampilan Layar Scale perkecil Jembatan Cable Stayed ................... 63 Gambar 4.6 Tampilan Layar Scale Perbesar Jembatan Cable Stayed .................. 63 Gambar 4.7 Tampilan Layar View Jembatan Suspension .................................... 64 Gambar 4.8 Tampilan Layar Rotasi kiri-kanan Jembatan Suspension ................. 65 xv Gambar 4.9 Tampilan Layar atas-bawah Jembatan Suspension ........................... 65 Gambar 4.10 Tampilan Layar Scale Jembatan Suspension .................................... 66 Gambar 4.11 About Application ............................................................................. 67 Gambar 4.12 Tutorial Cable Stayed Bridge ............................................................ 67 Gambar 4.13 Tutorial Rotate Cable Stayed Bridge ................................................ 68 Gambar 4.14 Tutorial Scaling Cable Stayed Bridge ............................................... 68 Gambar 4.15 Tutorial Suspension Bridge ............................................................... 69 Gambar 4.16 Tutorial Rotate Suspension Bridge .................................................... 69 Gambar 4.17 Tutorial Scale Suspension Bridge ..................................................... 70 Gambar 4.18 Grafik Kecepatan 57,6 Kbps ............................................................. 71 Gambar 4.19 Grafik Kecepatan 1 Mbps ................................................................. 71 xvi DAFTAR TABEL Halaman Tabel 3.1 Struktur Menu Aplikasi web pemodelan 3D jembatan ............................ 40 Tabel 3.2 Deskripsi Use Case Diagram User pada pemakaian aplikasi web permodelan 3D jembatan ......................................................................... 48 Tabel 4.1 Keyboard Event Rotasi dan Scale pada jembatan .................................... 66 Tabel 4.2 Performance Fungsi-fungsi pada Sistem.................................................. 70 xiii
