DPPL WEBTIIK

REKAYASA PERANGKAT LUNAK IF - DDOKUMEN PERANCANGAN PERANGKAT LUNAK

WEBTIIK

UNTUK :PRAKTIKAN DI PTIIK

Dipersiapkan oleh:Kelompok 6

Andriansyah Yusuf Rizal (135150201111122)Muhja Mufidah Afaf Amirah (135150207111120)

Mochamad Imam Sya’roni (125150201111066)Fadhel Suryana Putra (125150207111070)Regina Anky Chandra (135150207111067)

Laboratorium

RekayasaPerangkat LunakProgram Teknologi Informasi dan Ilmu Komputer

Nomor Dokumen Halaman

SEL01-Sxx <xx:no grp> #/jml #Revisi : 3 Tanggal:

30 Oktober 2014

DOKUMEN PERANCANGAN PERANGKAT LUNAK

Nomor DokumenRevisi : x

DAFTAR PERUBAHAN

Revisi Deskripsi

A

B

C

D

F

G

INDEX

TGL

A

10/10/14

B

24/10/14

C

31/10/14D E F G H

Ditulis

Oleh

Kelompokx Kelompox Kelompokx

Diperiksa

Oleh

Asprak Asprak Asprak

Disetujui

Oleh

ii



DAFTAR HALAMAN PERUBAHAN

Halaman Revisi Halaman Revisi

iii



DAFTAR ISI

WEBTIIK................................................................................................................... i

DAFTAR PERUBAHAN..............................................................................................ii

DAFTAR HALAMAN PERUBAHAN........................................................................... iii

DAFTAR ISI............................................................................................................. iv

DAFTAR TABEL.......................................................................................................vi

DAFTAR DIAGRAM................................................................................................vii

DAFTAR GAMBAR.................................................................................................viii

BAB 1 PENDAHULUAN............................................................................................1

1.1 Deskripsi Umum Dokumen....................................................................1

1.2 Tujuan Penulisan Dokumen...................................................................1

1.3 Lingkup Masalah....................................................................................1

1.4 Definisi, Istilah, dan Singkatan...............................................................2

1.5 Referensi...............................................................................................3

BAB 2 DESKRIPSI PERANCANGAN GLOBAL.............................................................4

2.1 Perancangan Arsitektur.........................................................................4

2.1.1 Data Flow Diagram........................................................................4

2.1.2 Fungsi Tambahan........................................................................11

2.2 Perancangan Data...............................................................................11

2.3 Perancangan Antarmuka.....................................................................11

2.3.1 Perancangan Antarmuka.............................................................11

2.3.2 Deskripsi Pertukaran Data...........................................................12

2.4 Lingkungan Pengembangan Sistem.....................................................12

2.4.1 Software......................................................................................12

2.4.2 Sistem Operasi............................................................................12

2.4.3 Hardware.....................................................................................12

2.4.4 Arsitektur Sistem.........................................................................12

BAB 3 DESKRIPSI PERANCANGAN RINCI...............................................................14

3.1 Perancanan Komponen.......................................................................14

3.1.1 Modul Administrator...................................................................14

3.1.2 Modul User (Asisten)...................................................................14

3.1.3 Modul User (Praktikan)...............................................................15

iv



3.2 Perancangan Data...............................................................................16

3.3 Perancangan Antarmuka.....................................................................16

3.3.1 Antarmuka Pengguna .................................................................16

3.3.2 Mekanisme Pertukaran Data.......................................................18

v



DAFTAR TABEL

No table of figures entries found.This is an automatic table of contents. To use it, apply heading styles (on the Home tab) to the text that goes in your table of contents, and then update this table. If you want to type your own entries, use a manual table of contents (in the same menu as the automatic one).

vi



DAFTAR DIAGRAM

vii



DAFTAR GAMBAR

viii



BAB 1 PENDAHULUAN

1.1 Deskripsi Umum DokumenDokumen Perancangan Perangkat Lunak (DPPL) ini dibagi menjadi 3 bagian

utama. Bagian pertama yaitu pendahuluan. Bagian ini mencakup tentang deskripsi umum dokumen, tujuan dari penulisan dokumen, lingkup masalah dari perangkat lunak yang dikembangkan, definisi serta istilah dan singkatan yang digunakan dalam dokumen ini, serta referensi yang digunakan dalam pemmbuatan dokumen.

Pada bagian kedua yaitu deskripsi perancangan global. Pada bagian ini akan berisikan tentang perancangan arsitektur yangmana DFD diterjemahkan menjadi transform dan transaction mapping, perancangan data yang akan menjelaskan proses normalisasi diagram ERD yang telah ada di dalam dokumen kebutuhan sebelumnya, perancangan antarmuka berdasarkan fungsi yang ada di dalam sistem, serta menjelaskan lingkungan yang termasuk ke dalam pengembangan sistem.

Bagian terakhir, bagian ketiga , yaitu desjripsi perancangan rinci. Pada bab ini berisikan perancangan komponen yang menjelaskan 3 modul utama dan algoritma 3 method utama yang ada di dalamnya, perancangan data tentang database yang sudah ternormalisasi, dan perancangan antarmuka berdasarkan fungsi dan unsur-unsur tertentu.

1.2 Tujuan Penulisan DokumenDokumen ini berisi Deskripsi Perancangan Perangkat Lunak (DPPL) perangkat

lunak WEBTIIK (Website Praktikum PTIIK). Tujuan dari penulisan dokumen ini adalah untuk memberikan penjelasan mengenai perangkat lunak yang akan dibangun baik berupaa gambaran umum maupun penjelasan detail dan menyeluruh. Dokumen ini juga bertujuan untuk merancang perangkat lunak yang sesuai dengan spesifikasi kebutuhan perangkat lunak dan sebagai dokumen sebelum perangkat lunak diimplementasikan oleh pengembang.

Pengguna dari dokumen adalah pengembang perangkat lunak WEBTIIK (Website Praktikum PTIIK). Dokumen ini akan digunakan sebagai acuan dalam proses pengembangan dan sebagai bahan evaluasi pada saat proses pengembangan perangkat lunak berlangsung ataupun pada tahap akhir pengembangan. Dengan adanya dokumen DPPL ini diharapkan pengembangan perangkat lunakakan lebih terarah dan terfokus serta tidak menimbulkan ambiguitas bagi pengembang.

1.3 Lingkup MasalahPerangkat lunak yang akan dikembangkan adalah WEBTIIK (Website

Praktikum PTIIK), yaitu perangkat lunak yang berjalan pada platform website

1



yang berfungsi sebagai media pendukung serta penyampaian dan penerimaan informasi interaktif untuk praktikum laboratorium komputer dasar di PTIIK. Pengguna dari WEBTIIK ini adalah asisten praktikum dan praktikan. Dengan adanya perangkat, akan memudahkan pengguna tentang informasi seputar kegiatan praktikum seperti pengumuman, penilaian, dan sebagainya. Untuk merealisasikannya, perangkat akan dirancang untuk berjalan dari dua sisi, sisi server yaitu Localhost/Hosting, sedangkan dari sisi client yaitu Web Browser yang diakses oleh pengguna seperti Mozilla Firefox, Chrome, Safari, dan sebagainya. Data-data di dalam perangkat akan disimpan di dalam database yang akan dibuat dengan DBMS berupa Heidi SQP dan DBDesigner.

Untuk memenuhi kebutuhan pengguna seperti yang telah dispesifikasikan sebelumnya, maka fungsi-fungsi yang disediakan diantaranya yaitu :

Fungsi pengumuman : untuk melihat dan memasang pengumuman seputar kegiatan praktikum

Fungsi upload soal : untuk mengunggah soal dari challange, UTS, dan UAP oleh asisten

Fungsi nilai : untuk melihat nilai yang didapat oleh praktikan

Fungsi forum : untuk menuliskan pertanyaan dan jawaban atau komentar

Fungsi home : sebagai halaman utama dari website setelah pengguna login

1.4 Definisi, Istilah, dan SingkatanDefinisi, Istilah, dan Singkatan Keterangan

WEBTIIK Website Praktikum PTIIKMerupakan aplikasi penunjang untuk kegiatan praktikum laboratorium komputer dasar, khususnya Pemrograman Dasar

DPPL Dokumen Perancangan Perangkat LunakMerupakan dokumen yang berisi deskripsi perancangan perangkat lunak

SKPL Spesifikasi Kebutuhan Perangkat LunakDokumen hasil analisis yang berisi spesifikasi kebutuhan user

IEEE Institute of Electrical and Electronics EngineeringMerupakan standar internasional untuk pengembangan dan perancangan perangkat lunak

User Orang yang menggunakan sistem WEBTIIKAdministrator Orang yang bertugas mengelola data dan sistemDCD Data Context Diagram

Merupakan diagaram yang menggambarkan hubungan sistem dengan lingkungannya

DFD Data Flow DiagramDiagram yang menggambarkan aliran data dalam sistem

ERD Entitiy Relationship DiagramDiagram yang menggambarkan relasi antara entitas dan atribut dari masing-masing entitas

SQL Structured Query Language

2



DBMS Database Management SystemTCP/IP Standar komunikasi data yang digunakan oleh komunitas internet dalam

proses tukar-menukar data dari satu komputer ke komputer lain dalam jaringan internet.

Tabel 1 Definisi, Singkatan, dan Akronim

1.5 ReferensiDokumen-dokumen yang digunakan sebagai referensi dalam pembuatan

DPPL ini adalah sebagai berikut :

1. IEEE Std. 830-1993, IEEE Recommended Practice for Software Requirement Specification.

2. Jurusan Teknik Informatika – Institut Teknologi Bandung Panduan GL01, Panduan Penggunaan dan Pengisian Spesifikasi Kebutuhan Perangkat Lunak (SKPL).

3. Direktorat Teknologi Informasi dan Komunikasi – Universitas Pendidikan Indonesia, Spesifikasi Kebutuhan Perangkat Lunak (Template).

4. Spesifikasi Kebutuhan Perangkat Lunak (SKPL) WEBTIIK (Website Praktikum PTIIK).

3



BAB 2 DESKRIPSI PERANCANGAN GLOBAL

2.1 Perancangan Arsitektur

2.1.1 Data Flow Diagram

1. DFD Memproses Seleksi Asisten

Diagram 1 DFD Memproses Seleksi Asisten

Dalam DFD Memproses Seleksi Asisten terdapat satu jenis pemetaan aliran data, yaitu transaction mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

Transaction : soal_seleksi

Transaction Center : Memperoleh Soal

Action Path : Memperoleh Jawaban, Memproses Seleksi Asisten

- Refactor

4



Diagram 2 Refactoring DFD Memproses Seleksi Asisten

2. DFD Memperoleh Praktikum

Diagram 3 DFD Memperoleh Praktikum

Dalam DFD Memperoleh Praktikum terdapat satu jenis pemetaan aliran data, yaitu transform mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

Incoming flow : Memperoleh Soal

5



Transform center : Memperoleh Praktikum

Outgoing flow : Memperoleh Pengumuman, Memperoleh Komentar

- Refactor

Diagram 4 Refactoring DFD Memperoleh Praktikum

3. DFD Forum

Diagram 5 DFD Forum

Dalam DFD Forum terdapat satu jenis pemetaan aliran data, yaitu transform mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

Incoming flow : seleksi, tanya_jawab

Transform center : Forum

6



Outgoing flow : Memperoleh Komentar

- Refactor

Diagram 6 DFD Refactor Forum

4. DFD Menghitung Nilai

Diagram 7 DFD Menghitung Nilai

Dalam DFD Menghitung Nilai terdapat satu jenis pemetaan aliran data, yaitu transform mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

Incoming flow : Memperoleh Soal, Menghitung Nilai

7



Transform center : Memperoleh Jawab

Outgoing flow : Menghitung Nilai Akhir

- Refactor First Iteration

Diagram 8 Refactoring First-Iteration DFD Menghitung Nilai

- Refactor Second Iteration

Diagram 9 Refactoring Second-Iteration DFD Menghitung Nilai

8



5. DFD Memperoleh Kelas

Diagram 10 DFD Meperoleh Kelas

Dalam DFD Memproses Seleksi Asisten terdapat satu jenis pemetaan aliran data, yaitu transaction mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

Transaction : kelas

Transaction Center : Memproses Permintaan Kelas

Action Path : Melakukan Update Kelas, Menerima Kelas

- Refactor

9



Diagram 11 Refactoring DFD Memperoleh Kelas

6. DFD WEBTIIK

Diagram 12 DFD WEBTIIK (1 Sistem Keseluruhan)

Dalam DFD WEBTIIK terdapat satu jenis pemetaan aliran data, yaitu transform mapping. Maka dari itu proses-proses dipisahkan sebagai berikut:

10



Incoming flow : Melakukan Update Kelas, Menerima Kelas, Memvalidasi Kelas, Memperoleh Soal

Transform center : Memproses Seleksi Asisten

Outgoing flow : Memproses Permintaan Kelas, Menerima Asisten, Memperoleh Pengumuman, Memperoleh Komentar, Memperoleh Praktikum, Forum, Menghitung Nilai, Menghitung Nilai Akhir, Mengerjakan Tugas

- Refactor First Iteration

Diagram 13 Refactoring First-Iteration DFD WEBTIIK

- Refactor Second Iteration

Diagram 14 Refactoring First-Iteration DFD WEBTIIK

11



2.1.2 Fungsi Tambahan

WEBTIIK menggunakan web service Apache.

2.2 Perancangan Data

Diagram 15 ER Diagram WEBTIIK

Pada diagram ERD kami semua proses sudah dirasa normal oleh karena itu bila dipaksakan normalisasi akan terjadi ketidaksinkronan pada database kami.

2.3 Perancangan Antarmuka

2.3.1 Perancangan Antarmuka

User Familiarity : User familiarity dalam sistem WEBTIIK menggunakan tombol button yang biasa digunakan oleh user seperti home, pengumuman dan lain-lain.

Konsistensi : Konsistensi diterapkan pada warna tampilan WEBTIIK, dari tampilan home, pengumuman dan fitur-fitur lain menggunakan warna yang sama.

Minimal Surprise : Prinsip minimal surprise yang diterapkan pada sistem ini adalah tidak menggunakan banyak pop up dan java script. Sehingga user sudah terbiasa dan tidak akan terkejut ketika ada response dari sistem yang berbeda.

Recoverability : Pada sistem juga terdapat tombol back atau undo yang mengijinkan user untuk recovery.

12



User Guidance : Apabila terjadi error atau kesalahan maka akan muncul feedback atau pemberitahuan dari sistem bahwa aktivitas yang baru saja dilakukan sistem tidak tercatat dan user dapat merefresh ulang laman.

User Diversity : Antarmuka dan fasilitas interaksi yang disediakan oleh sistem akan berbeda untuk masing-masing user, yaitu berbeda antara praktikan dan asisten.

2.3.2 Deskripsi Pertukaran Data

Apache adalah web service yang kami gunakan dalam pengembangan perangkat lunak ini. Apache adalah sebuah nama web server yang bertangguna jawab pada request-response HTTP dan logging informasi secara detail. Selain itu, Apache juga diartikan sebagai suatu web server yang kompak, modular, mengikuti standar protokol HTTP, dan tentu saja sangat digemari.

Web server apache bekerja dengan model thread based. Web server ini menggunakan proses (thread) untuk menerima dan merespon permintaan.

2.4 Lingkungan Pengembangan Sistem

2.4.1 Software

DBMS : Heidi SQP, DBDesigner

Text Editor: Sublime Text

Web Service : Apache

2.4.2 Sistem Operasi

Windows 10

2.4.3 Hardware

Processor Intel(R) Core(TM) i5-4200U CPU @1.60GHz 2.30 GHz, RAM 4.00 GB Hard Disk 500GB

13



2.4.4 Arsitektur Sistem

Gambar 1 Arsitektur Sistem

Sistem kami menggunakan arsitektur 3 tier, yang terdiri dari client, dan 2 buah database server. Client berupa asisten, praktikan, dan admnistrator server berupa Heidi SQP dan DBDesigner.

14



BAB 3 DESKRIPSI PERANCANGAN RINCI

3.1 Perancanan Komponen

3.1.1 Modul Administrator

1) Algoritma Autentifikasi Asisten Dan Praktikan

if (username, email, and password = true) then

berhasil login

else

gagal login (login lagi)

Tabel 1 Algoritma Autentifikasi Asisten Dan Praktikan

2) Algoritma Menyetujui Request Kelas Asisten

requestKelas (admin)

input (kelas)

if kelas (asisten) tersedia then

kelas berhasil diinputkan

else

kelas tidak berhasil diinputkan

Tabel 2 Algoritma Menyetujui Request Kelas Asisten

3) Algoritma Tambah Jadwal

tambahJadwal (admin)

input (jadwal)

if jadwal (asisten) tersedia then

jadwal berhasil diinputkan

else

jadwal tidak berhasil diinputkan

Tabel 3 Algoritma Tambah Jadwal

3.1.2 Modul User (Asisten)

1) Algoritma Upload Jawaban

uploadJawaban (asisten)

15



input (jawaban)

if jawaban (asisten) benar then

jawaban berhasil di upload

else

jawaban tidak berhasil di upload

Tabel 4 Algoritma Upload Jawaban

2) Algoritma Input Nilai Praktikan

nilaiPraktikan (asisten)

input (nilai)

if nilai (asisten) benar then

nilai berhasil diinputkan

else

nilai tidak berhasil diinputkan

Tabel 5 Algoritma Input Nilai Praktikan

3) Algoritma Memilih Kelas

dataJadwal (admin)

pilihan memilih_kelas (asisten)

if tersedia (ya) then

memilih_kelas berhasil

else

memilih_kelas tidak berhasil

Tabel 6 Algoritma Memilih Kelas

3.1.3 Modul User (Praktikan)

1) Algoritma Jawab Soal

jawabSoal (praktikan)

input (jawaban)

if jawaban (praktikan) yakin then

jawaban berhasil dijawab

else

jawaban tidak berhasil dijawab

16



Tabel 7 Algoritma Jawab Soal

2) Algoritma Tanya Asisten

inboxPertanyaan (asisten)

input (pertanyaan)

if pertanyaan (praktikan) yakin then

pertanyaan berhasil dikirim

else

pertanyaan tidak berhasil dikirim

Tabel 8 Algoritma Tanya Asisten

3) Algoritma Lihat Nilai

tampilNilai

if (nilai = true ) then

nilai berhasil dilihat

else

nilai tidak berhasil dilihat

Tabel 9 Algoritma Lihat Nilai

3.2 Perancangan Data

Diagram 16 Physical Data Model

17



3.3 Perancangan Antarmuka

3.3.1 Antarmuka Pengguna

1) Halaman Login

No Nama objek Tipe Keterangan

1 Enter Email ID Text Field Mengisi email user yang ingin didaftarkan

2 Enter Password Text Field Mengisi password untuk akun user

3 Tombol Login Button Masuk ke sistem

4 Register Button Mendaftarkan user

2) Halaman Home

18




1 Pengumuman Read Melihat pengumuman yang telah di-post

2 Data Asisten Read Melihat daftar/data asisten

3 More Pengumuman Button Melihat pengumuman yang di post administrator

3) Halaman Pengumuman


1 Pengumuman Read Melihat pengumuman yang telah di-post

19



2 Read More Button Melihat pengumuman yang di post administrator

4) Halaman Forum Tanya Jawab


1 Judul Text Masuk ke dalam forum diskusi sesuai judul

2 Enter Subject Text Field Menuliskan mata kuliah

3 Enter Message Text Field Menuliskan pertanyaan kepada asisten

4 Post Thread Button Memposting pertanyaan

5) Melihat dan Memposting Komentar

20




1 Leave a Comment Text Field Memberikan komentar

2 Komentar Text Melihat komentar yang telah di post oleh user lain

3 Submit Button Memposting komentar

6) Halaman Data Asisten


1 Nama Read Melihat daftar nama asisten

2 Kelas Read Melihat kelas asisten

3 Kontak Read Melihat kontak asisten

21



7) Halaman Lihat Soal


1 Kode Soal Read Melihat kode soal

2 Judul Soal Read Melihat judul soal

3 Lihat soal/challenge Text Praktikan memilih soal untuk dilihat

8) Halaman Pengumpulan Tugas


1 Pilih ID Tugas Dropdown Memilih ID tugas

2 Choose file Button Memilih file yang akan diupload

3 File Name Read Melihat nama file yang akan diupload

4 Input jawaban Button Mengunggah

22



jawaban

9) Halaman Lihat Nilai


1 Nama Read Melihat nama praktikan

2 NIM Read Melihat nim praktikan

3 Nilai Read Melihat nilai yang ditulis oleh asisten

10) Halaman Log Out


1 Photo profile Photo Menampilkan foto profil user

2 ID Read Menampilkan ID user

3 Tombol Logout Button Keluar dari sistem

23

212

3212



3.3.2 Mekanisme Pertukaran Data

Pertukaran data tidak menggunakan Framework tertentu. Ketika user menekan tombol pada user interface maka akan langsung di redirect ke halaman yang diinginkan dan mengirim perintah supaya menampilkan ke user interface, database mengirim data yang dibutuhkan oleh halaman sehingga ditampilkan p ada user interface.

24

DPPL WEBTIIK

Documents