Rekayasa Web 2
Transcript of Rekayasa Web 2
![Page 1: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/1.jpg)
Rekayasa WebMetodologi pembuatan Aplikasi Web
![Page 2: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/2.jpg)
Rekayasa Web
Rekayasa Web bagian dari Rekayasa Perangkat lunak.
RPL : Bisnis Proses, Flowchart, UML dan DFD.
Basis Data: ERD & TabelIMK : Navigation Tree (SiteMap) & Storyboard
![Page 3: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/3.jpg)
Keahlian bidang Rekayasa Web
Keahlian Prasyarat:
- Pemograman dan Pemodelan berorientasi objek atau Pemodelan berorientasi Struktur dengan UML dan DFD
- Basis Data dgn JDBC, MySQL, dan Java Servlets, atau bahasa lain yg serupa.
- Pemograman Web dengan HTML, JavaScripts, CGI Scripts, dan PHP, atau bahasa lain.
- Web Editor, Frontpage, Abode Dreamweaver atau s/w desain web lainnya.
![Page 4: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/4.jpg)
Metodologi Rekayasa Web
1. Web Site Design Method (WSDM).
2. Scenario-Based Object-Oriented Hypermedia Design Methodology (SOHDM).
3. Relationship-Navigational Analysis (RNA).
4. Object-Oriented Hypermedia Design Model (OOHDM).
5. UML-based Web Engineering (UWE).
6. Hypermedia Flexible Process Modeling (HFPM)
7. W2000
8. Navigational Development Techniques (NDT)
Sumber: Rekayasa Web, Simarmata Janner
![Page 5: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/5.jpg)
![Page 6: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/6.jpg)
UML-based Web Engineering (UWE)
• UWE adalah salah satu metode rekayasa perancangan Website.
• Karakter utamanya adalah pengunaaan UML untuk semua model dan tahapan perancangannya.
![Page 7: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/7.jpg)
UML-based Web Engineering (UWE)
![Page 8: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/8.jpg)
UML-based Web Engineering (UWE)
1. Requirements Model (Use Case Model).
2. Content Model (Conceptual Model).
3. Navigation Model.
4. Presentation Model.
![Page 9: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/9.jpg)
UML-based Web Engineering (UWE)
Requirements Model (Use Case Model).• Use case diagram digunakan untuk
mengambarkan fungsi-fungsi didalam web.• Definisi Aktor dan Definisi Use case.• Activity diagram digunakan untuk
mengambarkan aliran kerja (Workflow) didalam web.
![Page 10: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/10.jpg)
UML-based Web Engineering (UWE)
Content Model/Conceptual Model• Membuat konten web berdasarkan kegiatan aktor
(use case).• Class diagram untuk mengambarkan struktur
web, hubungan kegiatan aktor dan database.• Sequence diagram & State Chart diagram
untuk mengambarkan interaksi dan sifat web.
![Page 11: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/11.jpg)
UML-based Web Engineering (UWE)
Navigation Model• Mendesain alur Navigasi didalam Web.• Mempresentasikan Nodes dan Link didalam
struktur web.• Mencegah disorientasi didalam Web.
![Page 12: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/12.jpg)
UML-based Web Engineering (UWE)
![Page 13: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/13.jpg)
UML-based Web Engineering (UWE)
Presentation Model• Representasi struktur web kedalam
sebuah user interface.• Desain Halaman Web
![Page 14: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/14.jpg)
UML-based Web Engineering (UWE)
Presentation Element didalam UWE•<<page>> Merepresentaikan sebuah halaman web.•<<presentation class>> Group user interface didalam halaman web.•User interface elements
- <<anchor>>- <<Text>>- <<Image>>- <<button>>
![Page 15: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/15.jpg)
![Page 16: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/16.jpg)
WSDM – Web Site Design Method
![Page 17: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/17.jpg)
WSDM – Web Site Design Method
1. Mission Statement Specification.
Membuat spesifiksi Web yang akan dibuat.-Purpose : Goal atau sasaran yang ingin dicapai oleh web yang akan dibuat.-Subject : Informasi atau data yang diolah didalam web.-Target User : Sasaran penguna.
![Page 18: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/18.jpg)
WSDM – Web Site Design Method
2. Audience Modeling
1. Audience Clasification
+ Identifikasi user yang terlibat didalam sistem.
+ Identifikasi kegiatan user didalam sistem.
+ Pembagian user sesuai kegiatan, informasi dan fungsi
+ Bisnis Proses
2. Audience Characterictic.
+ Identifikasi karakter user didalam sistem
+ Definisi Aktor & Use Case, Use Case dan Activity Diagram
![Page 19: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/19.jpg)
WSDM – Web Site Design Method
3. Conceptual Design
1. Task & Information Modeling
+ Desain Struktur dan Interaksi sistem.
+ Class diagram & Sequen diagram.
2. Navigational Design.
+ Desain Navigasi
![Page 20: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/20.jpg)
WSDM – Web Site Design Method
4. Implementation Design
1. Site Structure Design
+ Membuat Site Map
2. Presentation Design.
+ Membuat template halaman web
3. Logical Data Design
+ ERD
![Page 21: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/21.jpg)
WSDM – Web Site Design Method
![Page 22: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/22.jpg)
WSDM – Web Site Design Method
![Page 23: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/23.jpg)
WSDM – Web Site Design Method
5. Implementation
Implementasi dan Testing
![Page 24: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/24.jpg)
WebML – Web Modelling Language
![Page 25: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/25.jpg)
WebML – Web Modelling Language
1. Requirment Specification
+ Analisa kebutuhan (Analisa penguna, Analisa Informasi dan Analisa Teknologi).
+ Bisnis Proses (Deskripsi dan Flowchart).
2. Data Design
+ Desain data dan aliran data User
+ DFD (Diagram konteks, DPF level, Kamus data)
![Page 26: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/26.jpg)
WebML – Web Modelling Language
3. Hypertext Design.
+ Desain halaman web
+ Desain Navigational, Desain Site map, Storyboard.
4. Archiceture Design.
+ Desain arsitektur sistem, relasi user dengan tabel.
+ ER-Diagram & Tabel.
![Page 27: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/27.jpg)
WebML – Web Modelling Language
5. Implementation
+ Pembuatan web
+ Coding
6. Testing & Evalutation
+ Pengujian dan evaluasi terhadap web.
+ Pengujian Tautan (Blackbox testing).
+ Pengujian Coding (Whitebox testing)
+ Pengujian Device+ Pengujian Browser
![Page 28: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/28.jpg)
WebML – Web Modelling Language
7. Deployment
+ Hosting web
8. Maintanance & Evolution
+ Pemeliharaan.
![Page 29: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/29.jpg)
WEB2000
![Page 30: Rekayasa Web 2](https://reader030.fdokumen.com/reader030/viewer/2022020919/55cf9919550346d0339b8a4f/html5/thumbnails/30.jpg)
WEB2000
1 Analisa Kebutuhan
a. Analisa Kebutuhan Fungsional
+ Definisi Use case, Use Case
b. Analisa Kebutuhan Navigational
+ Activity Diagram, Sequen Diagram.
2. Desain Hypermedia
+ Sitemap & Storyboard
3. Desain Fungsional
+ Database
+ Class diagram