Pembuatan Forum Untuk Akademi Militer Magelang dengan Menggunakan Teknologi Silverlight dan ASP .NET.

(1)

vi

Universitas Kristen Maranatha

ABSTRAK

Akademi Militer (Akmil) adalah penyelenggara Pendidikan Pembentukan Perwira

TNI AD yang bertempat di Magelang, Jawa Tengah. Selama ini Akmil tidak memiliki

sarana komunikasi untuk para alumni dan siswa (taruna) Akmil. Oleh karena itu

Akmil membutuhkan sebuah forum yang hanya dapat diakses oleh para alumni dan

taruna saja. Forum ini bertujuan untuk mengatasi keterbatasan komunikasi yang

terjadi dan pada forum tersebut para alumni dan taruna dapat saling bertukar pikiran

ataupun saling berbagi pengetahuan. Teknologi yang dipakai dalam pembuatan

aplikasi ini adalah ASP .NET yang merupakan salah satu bahasa pemrograman web untuk menciptakan halaman web yang dinamis dan Silverlight yang memiliki

kemampuan untuk membuat dan mengintegrasikan multimedia, animasi, vektor

grafik, dan video playback secara interaktif.

(2)

vii

ABSTRACT

Military Academy (Akmil) is the organizer of the education for the young soldier

before they joined the army which is located in Magelang, Central Java. Akmil do not have the means of communication for Akmil’s graduated students and students (taruna). Therefore, Akmil need a forum that can only be accessed by the graduated

students and taruna. Forum aims to overcome the limitations of communication that

occurred and in the forum the graduated students and taruna can exchange ideas

and share knowledge. The technology used in the making of this application is ASP.

NET which is one of the programming language to create web pages that are

dynamic and Silverlight which is have the ability to create and integrate multimedia,

animation, vector graphics, and an interactive video playback.

(3)

viii

DAFTAR ISI

LEMBAR PENGESAHAN ... i

PERNYATAAN ORISINALITAS LAPORAN PENELITIAN... ii

PERNYATAAN PUBLIKASI LAPORAN PENELITIAN ... iii

PRAKATA ... iv

ABSTRAK ... vi

ABSTRACT ... vii

DAFTAR ISI ... viii

DAFTAR GAMBAR ... xii

DAFTAR TABEL ... xv

DAFTAR LAMPIRAN ... xviii

BAB I ... 1

1.1. Latar Belakang Masalah ... 1

1.2. Rumusan Masalah ... 2

1.3. Tujuan Penelitian ... 2

1.4. Batasan Masalah ... 2

1.5. Sistematika Pembahasan ... 3

1.6. Time Schedule ... 5

BAB II ... 6

2.1. ASP.NET ... 6

2.1.1. Membuat Website Sederhana ... 7

2.2. Microsoft SQL Server 2005 ... 8

2.2.1. Tabel ... 8

2.2.2. DDL (Data Definition Language) ... 9

2.3. ERD (Entity Relationship Diagram) ... 11

(4)

ix

2.4 UML (Unified Modeling Language) ... 14

2.4.1. Use Case Diagram ... 15

2.5.3. Membuat Aplikasi Sederhana ... 23

2.6 Silverlight ... 26

2.6.1. Alasan Menggunakan Silverlight... 26

2.6.2. XAML (Extensible Application Markup Language) ... 26

2.6.3. Contoh Sintaks XAML ... 27

BAB III ... 29

3.1. Arsitektur Aplikasi/Sistem ... 29

3.1.1. Use Case Diagram ... 29

3.1.2. Activity Diagram ... 30

3.1.3. Activity Diagram dengan Swimlanes ... 35

3.1.4. Class Diagram ... 42

3.2. ERD (Entity Relationship Diagram) ... 43

3.3. Web Map dan Layout ... 45

3.3.1. Web Map ... 45

3.3.2. Layout ... 46

3.4. Perancangan User Interface ... 46

BAB IV ... 55

4.1. Tampilan Antarmuka Dengan Pengguna ... 55

4.2. Implementasi Microsoft Silverlight Dengan ASP .NET ... 63

(5)

x

5.2.8. Test Case Hapus Thread... 86

5.2.9. Test Case Lihat Reply ... 86

5.2.10. Test Case Tambah Reply ... 86

(6)

xi

5.2.12. Test Case Hapus Reply ... 87

5.2.13. Test Case Ubah Password ... 87

5.2.14. Test Case Cari User ... 88

5.2.15. Test Case Ubah Email ... 88

5.2.16. Test Case Tambah User... 89

5.2.17. Test Case Logout ... 89

5.3. Hasil Kuesioner ... 89

BAB VI ... 92

6.1. Simpulan ... 92

6.2. Saran ... 92

DAFTAR PUSTAKA... 93

LAMPIRAN ... 94

(7)

xii

Gambar 4 Contoh Create Table... 10

Gambar 5 Contoh Query Drop ... 11

Gambar 6 Contoh Query Alter ... 11

Gambar 7 Contoh Kardinalitas Relasi One to One ... 13

Gambar 8 Contoh Kardinalitas Relasi One to Many-1 ... 13

Gambar 9 Kardinalitas Relasi One to Many-2 ... 13

Gambar 10 Kardinalitas Relasi Many to Many ... 14

Gambar 11 Contoh ERD ... 14

Gambar 12 Contoh Use Case Diagram ... 16

Gambar 13 Contoh Include Relationship ... 17

Gambar 14 Contoh Extend Relationship... 17

Gambar 15 Contoh Activity Diagram ... 19

Gambar 16 Class Diagram - Class ... 20

Gambar 17 Class Diagram - Relationship ... 20

Gambar 18 Class Diagram - Multiplicity ... 20

Gambar 19 Class Diagram - Peran ... 21

Gambar 20 Contoh C# - Default.aspx (Source) ... 23

Gambar 21 Contoh C# - Default.aspx (Design)... 24

Gambar 23 Contoh C# - Tampilan Browser ... 24

Gambar 22 Contoh C# - Default.aspx.cs ... 24

Gambar 24 Contoh XAML - Page.xaml ... 27

Gambar 25 Contoh XAML – Hasil ... 28

(8)

xiii

Gambar 27 Activity Diagram Topik ... 30

Gambar 28 Activity Diagram Thread ... 31

Gambar 29 Activity Diagram Reply ... 32

Gambar 30 Activity Diagram User ... 33

Gambar 31 Activity Diagram Chat ... 34

Gambar 32 Swimlanes Topik ... 35

Gambar 33 Swimlanes Thread ... 37

Gambar 34 Swimlanes Reply ... 38

Gambar 35 Swimlanes User ... 40

Gambar 36 Swimlanes Chat ... 41

Gambar 37 Class Diagram ... 42

Gambar 38 Entity Relationship Diagram (ERD) ... 44

Gambar 39 Web Map... 45

Gambar 40 Layout ... 46

Gambar 41 Tampilan Login ... 47

Gambar 42 Tampilan Awal ... 47

Gambar 43 Tampilan Tambah Topik ... 48

Gambar 44 Tampilan Ubah Topik... 48

Gambar 45 Tampilan Daftar Thread... 49

Gambar 46 Tampilan Tambah Thread ... 49

Gambar 47 Tampilan Ubah Thread ... 50

Gambar 48 Tampilan Isi Thread ... 51

Gambar 49 Tampilan Tambah Reply ... 51

Gambar 50 Tampilan Ubah Reply ... 52

Gambar 51 Tampilan Menu User CP ... 52

Gambar 52 Tampilan Reset Password ... 53

Gambar 53 Tampilan Cari User ... 53

(9)

xiv

Gambar 55 Tampilan Upload File User ... 54

Gambar 56 Tampilan Halaman Login ... 55

Gambar 57 Tampilan Halaman Awal – Atas ... 56

Gambar 58 Tampilan Halaman Awal - Bawah ... 56

Gambar 59 Tampilan Tambah Topik ... 57

Gambar 60 Tampilan Ubah Topik... 57

Gambar 61 Tampilan Daftar Thread... 58

Gambar 62 Tampilan Tambah Thread ... 58

Gambar 63 Tampilah Ubah Thread ... 59

Gambar 64 Tampilan Isi Thread dan Reply ... 59

Gambar 65 Tampilan Tambah Reply ... 60

Gambar 66 Tampilan Ubah Reply ... 60

Gambar 67 Tampilan Menu User CP (Control Panel) ... 61

Gambar 68 Tampilan Ubah Password ... 61

Gambar 69 Tampilan Cari User ... 62

Gambar 70 Tampilan Ubah Email ... 62

Gambar 71 Tampilan Tambah User ... 63

Gambar 72 Sintaks Masuk ke Halaman .aspx ... 63

Gambar 73 Sintaks Kembali ke Halaman .xaml ... 64

Gambar 74 Sintaks Expression Blend Tombol Tambah ... 64

Gambar 75 Sintaks Expression Blend Transisi ... 65

(10)

xv

DAFTAR TABEL

Tabel 1 Time Schedule ... 5

Tabel 2 Tipe data Microsoft SQL Server - Integer ... 8

Tabel 3 Tipe data Microsoft SQL Server - String ... 9

Tabel 4 Tipe data Microsoft SQL Server - Unicode String ... 9

Tabel 5 Tipe data Microsoft SQL Server - Binary String ... 9

Tabel 6 Notasi ERD ... 12

Tabel 7 Notasi Use Case Diagram ... 15

Tabel 8 Komponen Activity Diagram ... 18

Tabel 9 Keyword C# ... 25

Tabel 10 Whitebox Testing Login Kondisi Benar ... 66

Tabel 11 Whitebox Testing Login Kondisi Salah ... 67

Tabel 12 Whitebox Testing Tambah Topik Kondisi Benar ... 67

Tabel 13 Whitebox Testing Tambah Topik Kondisi Salah ... 68

Tabel 14 Whitebox Testing Ubah Topik Kondisi Benar ... 69

Tabel 15 Whitebox Testing Ubah Topik Kondisi Salah... 69

Tabel 16 Whitebox Testing Hapus Topik Kondisi Benar ... 70

Tabel 17 Whitebox Testing Hapus Topik Kondisi Salah ... 70

Tabel 18 Whitebox Testing Tambah Thread Kondisi Benar ... 71

Tabel 19 Whitebox Testing Tambah Thread Kondisi Salah... 72

Tabel 20 Whitebox Testing Ubah Thread Kondisi Benar ... 73

Tabel 21 Whitebox Testing Ubah Thread Kondisi Salah ... 74

Tabel 22 Whitebox Testing Hapus Thread Kondisi Benar ... 74

Tabel 23 Whitebox Testing Hapus Thread Kondisi Salah ... 75

Tabel 24 Whitebox Testing Tambah Reply Kondisi Benar ... 75

Tabel 25 Whitebox Testing Tambah Reply Kondisi Salah ... 76

(11)

xvi

Tabel 27 Whitebox Testing Ubah Reply Kondisi Salah ... 77

Tabel 28 Whitebox Testing Hapus Reply Kondisi Benar ... 77

Tabel 29 Whitebox Testing Hapus Reply KondisiSalah ... 78

Tabel 30 Whitebox Testing Ubah Password Kondisi Benar ... 78

Tabel 31 Whitebox Testing Ubah Password Kondisi Salah ... 79

Tabel 32 Whitebox Testing Cari User Kondisi Benar ... 80

Tabel 33 Whitebox Testing Cari User Kondisi Salah ... 80

Tabel 34 Whitebox Testing Ubah Email Kondisi Benar ... 80

Tabel 34 Whitebox Testing Ubah Email Kondisi Benar ... 81

Tabel 35 Whitebox Testing Ubah Email Kondisi Salah ... 82

Tabel 36 Test Case Login ... 82

Tabel 37 Test Case Lihat Isi Topik ... 83

Tabel 38 Test Case Tambah Topik ... 83

Tabel 39 Test Case Ubah Topik ... 84

Tabel 40 Test Case Hapus Topik... 84

Tabel 41 Test Case Chatting ... 85

Tabel 42 Test Case Tambah Thread ... 85

Tabel 43 Test Case Ubah Thread ... 85

Tabel 44 Test Case Hapus Thread ... 86

Tabel 45 Test Case Lihat Reply ... 86

Tabel 46 Test Case Tambah Reply ... 86

Tabel 47 Test Case Ubah Reply ... 87

Tabel 48 Test Case Hapus Reply ... 87

Tabel 49 Test Case Ubah Password ... 87

Tabel 50 Test Case Cari User ... 88

Tabel 51 Test Case Ubah Email ... 88

(12)

xvii

Tabel 53 Test Case Logout... 89

Tabel 54 Hasil Kuesioner Batasan Pengguna ... 89

Tabel 55 Hasil Kuesioner Pengetahuan Mengenai Forum ... 90

Tabel 56 Hasil Kuesioner Tampilan Forum ... 90

Tabel 57 Hasil Kuesioner Kemudahan Penggunaan dan Pemahaman ... 90

Tabel 58 Hasil Kuesioner Fungsionalitas Forum ... 91

(13)

xviii

DAFTAR LAMPIRAN

(14)

1

Universitas Kristen Maranatha

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Seiring dengan perkembangan teknologi yang semakin pesat, internet pun

mulai dikenal oleh masyarakat. Internet digunakan sebagai salah satu sarana

komunikasi dan bertukar pikiran, misalnya messenger, forum, dan sebagainya.

Salah satu contoh sarana komunikasi yang sering digunakan adalah forum.

Forum adalah tempat diskusi di mana para member-nya dapat saling berbagi ilmu,

bertukar pendapat, menunjukkan hasil karya mereka, dan berkomunikasi dengan

member lain yang memiliki ketertarikan pada bidang yang sama.

Akademi Militer (Akmil) yang bertempat di Magelang, Jawa Tengah adalah

Badan Pelaksana Pusat di tingkat Mabes TNI AD, yang berkedudukan langsung di

bawah Kasad, Akademi Milter mempunyai tugas pokok menyelenggarakan

Pendidikan Pembentukan Perwira TNI AD tingkat Akademi. Di samping itu, Akademi

Militer juga melaksanakan Pendidikan Dasar Keprajuritan Chandradimuka bagi

Calon Prajurit Taruna Akademi TNI dan menyelenggarakan Pendidikan Sekolah

Pertama Perwira Prajurit Karier TNI bagi para Sarjana dan Sarjana Muda.

Tidak adanya sarana komunikasi bagi para alumni Akmil dan para siswa

Akmil yang masih menjalani pendidikan (taruna) membuat Akmil ingin memiliki

sebuah forum yang hanya bisa diakses oleh para alumni dan para taruna. Forum

tersebut diharapkan memiliki tampilan yang familiar dan mudah dimengerti oleh

penggunanya (user friendly).

Forum ini akan dibuat menggunakan teknologi Silverlight. Silverlight adalah

salah satu teknologi yang dibuat oleh Microsoft dengan tujuan untuk membuat dan

mengintegrasikan multimedia, animasi, vektor grafik dan video playback secara

interaktif. Aplikasi Silverlight dapat dibuat menggunakan semua bahasa yang

(15)

2

1.2. Rumusan Masalah

Berdasarkan latar belakang yang telah diuraikan di atas, berikut ini

dipaparkan pokok-pokok persoalan yang akan dibahas dan dijawab dalam

penelitian yaitu sebagai berikut:

1. Bagaimana mengatasi keterbatasan komunikasi antara para alumni

Akmil dengan para taruna?

2. Bagaimana membuat aplikasi tersebut dengan menggunakan teknologi

Silverlight?

1.3. Tujuan Penelitian

Tujuan dari penelitian ini adalah:

1. Adanya forum yang dapat mengatasi keterbatasan komunikasi dan juga

menjadi sebuah sarana bertukar pikiran bagi para alumni Akmil dengan

para taruna.

2. Penggunaan teknologi Silverlight dalam aplikasi tersebut.

1.4. Batasan Masalah

Berikut adalah fitur–fitur yang ingin dicapai :

 Staff:

 Membuat, melihat, mengubah, dan menghapus topik.

 Membuat, melihat, mengubah, dan menghapus thread.

 Membuat, mengubah, dan menghapus reply.

 Membuat, mencari dan melihat data user.

 Mengubah password dan email.

 Mengirim pesan chat.

 Men-download template data user.

(16)

3

 Melihat isi topik.

 Membuat, melihat dan mengubah thread. Untuk ubah thread,

user hanya dapat mengubah thread yang dia buat.

 Membuat, mengubah, dan menghapus reply. Untuk ubah reply,

user hanya dapat mengubah reply yang dia buat.

 Mencari dan melihat data user.

 Mengubah password dan email.

 Mengirim pesan chat.

1.5. Sistematika Pembahasan

Organisasi penulisan laporan pembuatan aplikasi ini per-bab adalah sebagai

berikut:

1. BAB I PENDAHULUAN

a. Latar Belakang Masalah

Cerita singkat mengenai mengapa mengambil topik/judul ini.

b. Rumusan Masalah

Intisari masalah yang ingin dipecahkan/pelajari. Masalah didapat dari

latar belakang.

c. Tujuan Penelitian

Tujuan pembuatan karya ilmiah. Tujuan merupakan solusi yang

dapat menjawab masalah yang dihadapi.

d. Batasan Masalah

Batasan masalah berisi hal-hal yang akan dibuat (diimplementasi).

e. Sistematika Pembahasan

Sistematika pembahasan berisi garis-garis besar (outline) dari setiap

bab.

f. Time Schedule

(17)

4

Universitas Kristen Maranatha 2. BAB II DASAR TEORI

Bab ini berisi teori atau algoritma atau metode penunjang yang

digunakan ketika mengerjakan karya ilmiah.

3. BAB III ANALISA DAN PEMODELAN

a. Arsitektur Aplikasi/SIstem.

Sub bab ini berisi Use Case Diagram + Class Diagram +

Activity/State Diagram + Sequence Diagram (bilamana menggunakan

UML) atau Flowchart + DFD.

b. Table/ER-Diagram

Sub-bab ini berisi relasi antar tabel yang digunakan beserta

penjelasan singkat dari desain (ER-Diagram) yang dibuat.

c. Web Map dan Layout

Web map dan layout dari aplikasi web yang dibuat.

d. Perancangan User Interface

Penjelasan (analisa) dari layout aplikasi yang dibuat.

4. BAB IV PERANCANGAN DAN IMPLEMENTASI

Kumpulan screenshot dari proyek yang dibuat beserta penjelasan dari

tiap fungsi (metode) utama yang dibuat. Gunakan notasi

algoritmik/pseudocode + flowchart untuk menjelaskan cara kerja dari tiap

fungsi (metode) tersebut.

5. BAB V PENGUJIAN

Bab ini berisi laporan pengujian terhadap setiap class/method/fungsi

yang dibuat (white box testing) dan laporan dari kuesioner yang diberikan

(18)

5

Universitas Kristen Maranatha 6. BAB VI SIMPULAN DAN SARAN

a. Simpulan

Pengetahuan apa saja yang didapat setelah mengerjakan karya

ilmiah ini, baik berupa penegasan/pembuktian ataupun pengetahuan

yang baru.

b. Saran

Hal baru apa saja yang dapat digunakan untuk mengembangkan

karya ilmiah selanjutnya.

1.6. Time Schedule

Berikut adalah jadwal perencanaan pembuatan forum mulai dari pembuatan

laporan sampai dengan pembuatan aplikasi secara utuh.

Tabel 1 Time Schedule

Feb Mar Okt Nov Des Jan

Perancangan

Pencarian bahan

Desain

Coding

Testing

(19)

92

BAB VI

SIMPULAN DAN SARAN

6.1. Simpulan

Selama proses pembuatan aplikasi dan pembuatan laporan, dapat

ditarik kesimpulan sebagai berikut:

1.

Adanya sarana komunikasi bagi para alumni dan siswa (taruna)

Akademi Militer, sehingga mereka dapat saling berbagi

pengetahuan dan bertukar pikiran melalui forum ini.

2.

Berdasarkan hasil kuesioner, forum ini memiliki tampilan yang

menarik, sudah berjalan dengan baik, dan pengguna tidak

mengalami kesulitan dalam menggunakan forum ini.

3.

Adanya error handling setiap ada kesalahan dapat membantu

pengguna dalam menggunakan forum ini.

6.2. Saran

(20)

93

DAFTAR PUSTAKA

[1] Amri, M.Choirul. (2005). Pengantar ASP .NET. Retrieved May 14, 2005. [2] C Sharp - Wikipedia bahasa Indonesia, ensiklopedia bebas: Electronic

references. Retrieved March 22, 2009, from

http://id.wikipedia.org/wiki/C_sharp.

[3] C# Part 1 - Pengenalan Logika Basic: Electronic references. Retrieved March 23, 2009, from http://suryodesign.wordpress.com/2009/01/07/c-part-1-%E2%80%93-pengenalan-logika-basic/.

[4] Cepat Mahir ASP - IlmuKomputer.Com: Electronic references. Retrieved March 11, 2009, from http://ilmukomputer.org/2008/11/25/cepat-mahir-asp/. [5] Dharwiyanti, Sri. (2004). Pengantar Unified Modelling Language (UML).

Retrieved March 22, 2009.

[6] Extensible Application Markup Language - Wikipedia bahasa Indonesia, ensiklopedia bebas: Electronic references. Retrieved April 7, 2009 from http://id.wikipedia.org/wiki/Extensible_Application_Markup_Language#cite_ note-1.

[7] Hartini. (2006). Analisis dengan Diagram Keterhubungan Entitas (Entity Relationship Diagram/ERD). Retrieved March 22, 2009.

[8] Kurniawan, Erick. Pengenalan Komputer dan C# 2.0. Retrieved March 22, 2009.

[9] News Article Lebih Jauh Tentang Silverlight - Berita IT dan Artikel: Electronic references. Retrieved April 7, 2009 from

http://www.beritanet.com/Hardware/Software/lebih-jauh-tentang-silverlight.html.

[10] Rosma Hidayat, Fuady & Sildeyna, Nikolas. (2008). Jazz Up Your Web with ASP .NET. Retrieved July 22, 2008.

[11] Setiawan, D.,ST (2007). Materi OOTD. Universitas Kristen Maranatha. [12] Silverlight Saingan Baru Flash: Electronic references. Retrieved March 2,

2009, from http://actualtraining.wordpress.com/2008/04/27/silverlight-saingan-baru-flash/.

[13] SQL - Wikipedia bahasa Indonesia, ensiklopedia bebas : Electronic references. Retrieved March 12, 2009, from http://id.wikipedia.org/wiki/SQL. [14] Tutang. (2007). Microsoft SQL Server 2000 Bagi Pemula. Retrieved March