Universitas Bina Nusantara
Jurusan Teknik Informatika Skripsi Sarjana Komputer Semester Ganjil tahun 2006/2007
ANALISIS DAN PERANCANGAN SISTEM E-BINUS PADA UNIVERSITAS BINA NUSANTARA
Jeffry Tambari Ricky Lomanta Wely
0700687766 0700688573 0700725663
Abstrak: Universitas Bina Nusantara adalah universitas yang cukup terkenal terutama di bidang teknologi dan informasi. Divisi dari Universitas Bina Nusantara yang akan khusus menjalankan e-learning adalah E-BiNus. Alasan dan tujuan skripsi ini adalah untuk menyediakan sebuah aplikasi yang mendukung kegiatan e-learning. Metodologi pengembangan perangkat lunak yang digunakan adalah waterfall yang secara singkat memiliki tahap analisi, desain, implementasi, dan testing. Aplikasi yang dihasilkan berupa aplikasi front-end (www.ebinus.com) dan back-end. Front-end adalah aplikasi yang dipublish ke internet, yang boleh diakses oleh siapa saja. Pengunjung dapat melihat informasi dan modul pelajaran yang ditawarkan di aplikasi front-end. Pengunjung (registrant) yang berminat dengan modul pelajaran tertentu dapat langsung mendaftar melalui pendaftaran online. Siswa yang telah mendaftar dapat mengakses aplikasi student services, Learning Management System (LMS), dan Forum. Aplikasi back-end hanya boleh digunakan oleh administrator tertentu untuk mengatur segala kegiatan akademis maupun isi (content) dari LMS. Masalah perlunya sebuah aplikasi yang mendukung kegiatan e-learning telah dapat dipecahkan oleh aplikasi yang dibuat pada skripsi ini. Saran yang telah diperoleh adalah penambahan fitur-fitur lain seperti live chatting.
Kata Kunci : e-learning, waterfall, front-end, back-end, student services, learning management system
PRAKATA
Puji syukur kepada Tuhan Yang Maha Esa, atas rahmat dan berkat-Nya, kami dapat menyelesaikan laporan skripsi ini. Tanpa penyertaan dan bantuan dari-Nya, maka semua usaha dan kerja keras ini tidak akan ada hasilnya. Penulisan skripsi dengan judul “Analisis dan Perancangan Sistem E-BiNus pada Universitas Bina Nusantara” ini disusun sebagai salah satu persyaratan akademik untuk menyelesaikan jenjang studi Strata 1 Jurusan Teknik Informatika di Universitas Bina Nusantara. Penulis menyadari sepenuhnya dalam penulisan skripsi ini masih terdapat kekurangan dan kelemahan. Untuk itu, penulis mengharapkan kritik, saran, masukan, dan tanggapan dari para pembaca. Tidak lupa penulis ingin mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak atas segala bantuan dan dorongan yang telah diberikan. Adapun ucapan terima kasih ini penulis berikan kepada: 1. Bapak Prof. Dr. Gerardus Polla, M.App.Sc., selaku Rektor Universitas Bina Nusantara yang telah memberikan kesempatan kepada kami untuk membuat penulisan laporan skripsi ini. 2. Bapak Ir. Sablin Yusuf, M.Sc, M.Comp.Sc., selaku Dekan Fakultas Ilmu Komputer. 3. Bapak Mohammad Subekti, BE., M.Sc., selaku Ketua Jurusan Teknik Informatika. 4. Bapak Fredy Purnomo, S.Kom., M.Kom., selaku Sekretaris Jurusan Teknik Informatika.
5. Bapak Soni, S.Kom.,MM., selaku dosen pembimbing kami yang telah dengan sabar dan tulus memberikan bimbingan, masukan, pedoman dan nasehat-nasehat yang berguna dalam penyusunan skripsi ini. 6. Bapak Hanny Santoso, S.Kom., M.Sc., selaku penanggung jawab organisasi EBiNus yang telah memberikan saran dan masukan terhadap sistem E-BiNus ini 7. Bapak Wawan Saputra, S.Kom., selaku administrator E-BiNus yang telah meluangkan waktunya untuk memberikan informasi yang dibutuhkan dalam penulisan skripsi ini. 8. Segenap staf pengajar Universitas Bina Nusantara yang telah memberikan bantuannya demi kelancaran penulisan skripsi ini. 9. Serta pihak-pihak lain yang tidak dapat penulis sebutkan sata-persatu yang telah memberikan nasehat, bantuan, dan dukungan dalam menyelesaikan skripsi ini.
Akhir kata, penulis berharap semoga skripsi ini dapat berguna dan bermanfaat bagi semua pihak yang bersangkutan, khususnya pihak E-BiNus.
Jakarata, Januari 2007
Penulis
Daftar Isi
Halaman Judul Luar ································································································ i Halaman Judul Dalam······························································································ ii Halaman Persetujuan Softcover ··············································································· iii Abstrak ···················································································································· iv Prakata ····················································································································· v Daftar Isi ·················································································································· vii Daftar Tabel ············································································································· xiii Daftar Gambar ········································································································· xiv Daftar Lampiran······································································································· xxix
BAB 1 PENDAHULUAN ······················································································· 1 1.1
Latar Belakang ····························································································· 1
1.2
Ruang Lingkup ···························································································· 5
1.3
Tujuan dan Manfaat ····················································································· 6
1.4
Metodologi Pengembangan Aplikasi···························································· 6
1.5
Sistematika Penulisan··················································································· 8
BAB 2 LANDASAN TEORI··················································································· 11 2.1
Distance Learing ·························································································· 11
2.2
E-Learning (Electronic Learing) ·································································· 11
2.3
Sistem Informasi ·························································································· 12
2.3.1
Pengertian Sistem ·········································································· 12
2.3.2
Informasi ······················································································· 12
2.3.3
Pengertian Sistem Informasi·························································· 13
2.4
Teknologi Informasi····················································································· 14
2.5
Software (Perangkat Lunak)········································································· 16
2.6
2.5.1
Pengertian Software ······································································ 16
2.5.2
Jenis Software Komputer······························································· 17
2.5.3
Bahasa Pemrograman (Programming Language) ·························· 17
Software Engineering··················································································· 19 2.6.1
Pengertian Software Engineering ·················································· 19
2.6.2
Fase Sofware Engineering ····························································· 21
2.6.3
Pengertian Model Proses Software ················································ 22
2.6.4
Model Proses Waterfall Software Engineering······························ 22
2.7
Object-Oriented Programming (Pemrogramanan Berorientasi Objek) ········· 25
2.8
Bahasa Pemrograman UML (Unified Modelling Language)························ 27
2.9
Database (Basis Data) ·················································································· 31
2.10
2.9.1
Data ······························································································· 31
2.9.2
Pengertian Database ······································································ 31
2.9.3
Database Relasional ······································································ 33
Internet········································································································· 34 2.10.1
Pengertian Internet ········································································ 34
2.10.2
World Wide Web (WWW)···························································· 35
2.10.3
Web Site ························································································ 35
2.11
2.10.4
IP Address (Internet Protocol Address) ········································· 36
2.10.5
Browser ························································································· 36
Server··········································································································· 36 2.11.1
Pengertian Server ·········································································· 36
2.11.2
Web Server···················································································· 37
2.11.3
Database Server············································································· 37
2.12
DBMS (Database Management System) ······················································ 37
2.13
RDBMS (Relational DBMS)········································································ 38
2.14
SQL (Structured Query Language)······························································· 39
2.15
Microsoft SQL Server 2000 ········································································· 40
2.16
Stored Procedure ·························································································· 40
2.17
Internet Information Service ········································································ 41
2.18
.NET Framework ························································································· 41
2.19
Visual Studio .NET ······················································································ 43
2.20
Bahasa Pemrograman C# ············································································· 43
2.21
ASP .NET (Active Server Page .NET)························································· 44
2.22
R.a.d. Control – Telerik················································································ 44
2.23
N-Tier Solution ···························································································· 44
2.24
Terminologi Sistem E-BiNus ······································································· 47
BAB 3 ANALISIS DAN DESAIN ·········································································· 48 3.1
Latar Belakang Universitas Bina Nusantara ················································· 48 3.1.1
Sejarah··························································································· 48
3.1.2
Program Studi················································································ 50
3.1.3
Semboyan······················································································ 50
3.1.4
Visi································································································ 51
3.1.5
Misi ······························································································· 51
3.2
Struktur Organisasi Universitas Bina Nusantara ·········································· 52
3.3
Sistem yang sedang Berjalan di Universitas Bina Nusantara························ 52 3.3.1
Sistem Perkuliahan ········································································ 52
3.3.2
Infrastruktur IT·············································································· 55
3.4
Analisis Permasalahan dan Kebutuhan························································· 59
3.5
Kebutuhan (Requirement) Sistem E-BiNus·················································· 61
3.6
Aplikasi yang Akan Dibuat ·········································································· 67 3.6.1
Tinjauan Aplikasi Secara Umum··················································· 61
3.6.2
Arsitektur Abstrak Aplikasi E-BiNus ············································ 69
3.6.3
Skenario Proses Registrasi····························································· 71
3.6.4
UML······························································································ 79
3.6.5
3.6.4.1
UML untuk Front End ···················································· 83
3.6.4.2
UML untuk Back End····················································· 105
3.6.4.3
UML untuk Payment Agent System ······························· 131
Desain Tampilan ··········································································· 138 3.6.5.1
Conceptual Site Map Front End······································ 138
3.6.5.2
Conceptual Site Map Back End ······································ 142
3.6.5.3
Desain Front End ···························································· 143
3.6.5.4
Desain Back End ···························································· 160
3.6.5.4.1
Login dan Main Menu··································· 160
3.6.5.4.2
Lecturer Module Assignment························ 164
3.6.5.4.3
Module Category Management ····················· 167
3.6.5.4.4
Module Management ···································· 169
3.6.5.4.5
Lecturer Personal Info Management ············· 174
3.6.5.4.6
Student Personal Info Management··············· 181
3.6.5.4.7
User Management ········································· 184
3.6.5.4.8
Announcement Management························· 188
3.6.5.4.9
Event Management ······································· 191
3.6.5.4.10 News Management········································ 196 3.6.5.5
Payment Agent ······························································· 200
BAB 4 IMPLEMENTASI DAN EVALUASI·························································· 202 4.1
Deployment Diagram ··················································································· 202
4.2
Kebutuhan Sistem ························································································ 204 4.2.1
4.2.2
4.2.3
Web Server E-BiNus ····································································· 204 4.2.1.1
Kebutuhan Software ······················································· 204
4.2.1.2
Kebutuhan Hardware ······················································ 204
Database Server E-BiNus ······························································ 204 4.2.2.1
Kebutuhan Software ······················································· 204
4.2.2.2
Kebutuhan Hardware ······················································ 204
Content (File) Server E-BiNus ······················································ 205 4.2.3.1
Kebutuhan Software ······················································· 205
4.2.3.2 4.3
4.4
Kebutuhan Hardware ······················································ 205
Hasil Tampilan Layar··················································································· 205 4.3.1
E-BiNus Front End Public····························································· 205
4.3.2
E-BiNus Front End Student ··························································· 218
4.3.3
E-BiNus Back End ······································································· 235
Evaluasi········································································································ 271 4.4.1
Evaluasi Aplikasi E-BiNus Front End ··········································· 271
4.4.2
Evaluasi Aplikasi E-BiNus Back End············································ 274
BAB 5 KESIMPULAN DAN SARAN···································································· 275 5.1
Kesimpulan ·································································································· 275
5.2
Saran ············································································································ 276
Daftar Tabel
2.25
Program Studi E-BiNus··········································································50
Tabel 4.1 Hasil Evaluasi Kuisioner ········································································271
Daftar Gambar
2.26
Perangkat Dari Teknologi Informasi ················································16
2.27
Software Engineering Layers ···························································21
2.28
Model Proses Waterfall ····································································24
2.29
Class dan Instance dari Class····························································27
2.30
Simbol-simbol Class Diagram dalam UML······································29
2.31
Simbol-simbol Use Case dalam UML ··············································30
2.32
Simbol-simbol Sequence Diagram dalam UML ·······························30
2.33
Jenjang Data ·····················································································32
2.34
World Wide Web Page Structure······················································34
2.35
DBMS ······························································································38
2.36
NET Framework···············································································42
2.37
N-Tier Solution Framework ·····························································46
Gambar 3.1
Struktur Organisasi Universitas Bina Nusantara·······························52
Gambar 3.2
Rich Picture Analisis Permasalahan dan Kebutuhan ························59
Gambar 3.3
Rich Picture Sistem E-BiNus ···························································62
Gambar 3.4
Arsitektur Abastrak Aplikasi E-BiNus ·············································69
Gambar 3.5
Format TransactionId dari Data Pembayaran ···································73
Gambar 3.6
Aktor yang Terlibat dalam Proses Registrasi····································73
Gambar 3.7
Langkah-langkah Proses Registrasi ··················································74
Gambar 3.8
Proses Registrasi ··············································································75
Gambar 3.9
Tanda Akhir dari Proses Registrasi untuk Tiap Jenis User ···············75
Gambar 3.10 Contoh Isi Email Meminta Konfirmasi Registrasi····························76 Gambar 3.11 Contoh Isi Email Setelah Konfirmasi ···············································77 Gambar 3.12 Contoh Isi Email Setelah Pembayaran··············································78 Gambar 3.13 Class Diagram E-BiNus ···································································80 Gambar 3.14 Use Case E-BiNus Front End ···························································84 Gambar 3.15 Sequence View Event List (View All)··············································86 Gambar 3.16 Sequence View Event List (Go To HOME Page)·····························86 Gambar 3.17 Sequence View Event Detail Sequence View···································87 Gambar 3.18 Sequence View News List (View All)··············································87 Gambar 3.19 Sequence View News List (Go To HOME Page) ·····························88 Gambar 3.20 Sequence View News Detail ····························································88 Gambar 3.21 Sequence Cek BiNusianId (Siswa) ···················································89 Gambar 3.22 Sequence Cek BiNusianId (BiNusian Bukan Siswa) ························90 Gambar 3.23 Data Class yang Digunakan Dalam Sequence Register ····················90 Gambar 3.24 Sequence Registrasi Pertama Kali (Module dan Diri) NonBiNusian/ Umum
·········································································································92
Gambar 3.25 Sequence Registrasi Pertama Kali (Module dan Diri) BiNusian·······94 Gambar 3.26 Sequence Registration Confirmation (Setelah Email1 Dikirim) ·······94 Gambar 3.27 Sequence View Module (Available Module List)·····························95 Gambar 3.28 Sequence View Module Detail ·························································96 Gambar 3.29 Sequence View Student Personal Information··································96 Gambar 3.30 Sequence Edit Student Personal Information····································97 Gambar 3.31 Data Class yang Digunakan dalam Student Personal Information ····97
Gambar 3.32 Sequence Edit (Change) Password ···················································98 Gambar 3.33 Sequence Upload Photo····································································98 Gambar 3.34 Sequence View Score History (Studies) ···········································99 Gambar 3.35 Sequence Registrasi Ulang (Siswa) ··················································101 Gambar 3.36 Sequence View Announcement List·················································101 Gambar 3.37 Sequence View Announcement Detail ·············································102 Gambar 3.38 Sequence View Payment History (Financial) ···································102 Gambar 3.39 Sequence View Payment Detail························································103 Gambar 3.40 Sequence Logout ··············································································103 Gambar 3.41 Sequence Login ················································································104 Gambar 3.42 Sequence Edit (Forget) Password ·····················································105 Gambar 3.43 Use Case Lecturer Module Assignment System ·······························106 Gambar 3.44 Sequence Search Module List ··························································106 Gambar 3.45 Sequence Search Lecturer List To Be Assigned ·······························107 Gambar 3.46 Sequence View Lecturer Assignment Detail ····································107 Gambar 3.47 Sequence Edit Lecturer Assignment·················································108 Gambar 3.48 Use Case Module Category Management System ····························108 Gambar 3.49 Sequence Create Module Category···················································109 Gambar 3.50 Sequence View/Search Module Category List (Searching) ··············109 Gambar 3.51 Sequence Edit Module Category ·····················································110 Gambar 3.52 Use Case Module Management System ··········································110 Gambar 3.53 Sequence Create Module ·································································111 Gambar 3.54 Sequence Search Module List ·························································111
Gambar 3.55 Sequence View Module Detail ························································112 Gambar 3.56 Sequence Module Edit······································································112 Gambar 3.57 Sequence Module Edit With New Revision ····································113 Gambar 3.58 Use Case Lecturer Personal Info Management System ···················113 Gambar 3.59 Sequence Create Lecturer·································································114 Gambar 3.60 Sequence View/Search Lecturer List (Go To Lecturer Personal Info Management Page)·····························································································114 Gambar 3.61 Sequence View/Search Lecturer List (Searching) ····························115 Gambar 3.62 Sequence View Lecturer Detail ························································115 Gambar 3.63 Sequence Edit Lecturer·····································································116 Gambar 3.64 Use Case Student Personal Info System ···········································116 Gambar 3.65 Sequence Search Student List···························································117 Gambar 3.66 Sequence View Student Detail ·························································117 Gambar 3.67 Sequence Student Edit······································································118 Gambar 3.68 Use Case User Management System ················································118 Gambar 3.69 Sequence Create User·······································································119 Gambar 3.70 Sequence View/Search User List······················································119 Gambar 3.71 Sequence View User Detail······························································120 Gambar 3.72 Sequence Edit User ··········································································120 Gambar 3.73 Use Case Announcement Management System································121 Gambar 3.74 AnnouncementData ··········································································121 Gambar 3.75 Sequence Create Announcement ······················································121
Gambar 3.76 Sequence View/Search Announcement List (Go To Announcement Management System Page) ················································································122 Gambar 3.77 Sequence View/Search Announcement List (Seaching) ···················122 Gambar 3.78 Sequence View Announcement Detail ·············································123 Gambar 3.79 Sequence Edit Announcement··························································123 Gambar 3.80 Use Case Event Management ···························································124 Gambar 3.81 EventData dan Komponen Event······················································124 Gambar 3.82 Sequence Create Event ·····································································125 Gambar 3.83 Sequence View/Search Event List (By Go To EventManagement Page)
·········································································································125
Gambar 3.84 Sequence View/Search Event List (By Searching) ···························126 Gambar 3.85 Sequence View Event Detail ····························································126 Gambar 3.86 Sequence Edit Event·········································································127 Gambar 3.87 Use Case News Management System···············································128 Gambar 3.88 NewsData dan Komponen News ······················································128 Gambar 3.89 Sequence Create News ·····································································129 Gambar 3.90 Sequence View/Search News List (By Go To NewsManagementSystem Page)
·········································································································129
Gambar 3.91 Sequence View/Search News List (By Searching) ···························130 Gambar 3.92 Sequence View News Detail ····························································130 Gambar 3.93 Sequence Edit News·········································································131 Gambar 3.94 Use Case Payment Agent System·····················································132 Gambar 3.95 Aktivitas dari Payment Agent···························································132
Gambar 3.96 Data-data yang dipergunakan dalam Payment Agent ·······················133 Gambar 3.97 Database yang digunakan Payment Agent········································133 Gambar 3.98 Sequence Processing Payment Data untuk Registrant pengunjung···134 Gambar 3.99 Sequence Processing Payment Data untuk Registrant BiNusian ······135 Gambar 3.100 Sequence Processing Payment Data untuk Registrant Student ·········136 Gambar 3.101 Sequence Processing Payment Data untuk Registrant pengunjung Bila Belum Lunas ······································································································131 Gambar 3.102 Conceptual Site Map Sebelum Login ···············································139 Gambar 3.103 Conceptual Site Map Setelah Login ·················································140 Gambar 3.104 Conceptual Site Map Back End Setelah Login ·································142 Gambar 3.105 Tata Letak Halaman FrontEnd··························································144 Gambar 3.106 Pembagian Daerah yang Mengalami Perubahan·······························144 Gambar 3.107 Tata Letak Halaman Registered User (siswa)···································145 Gambar 3.108 Content Halaman HOME ·································································146 Gambar 3.109 View All News & View All Event ···················································147 Gambar 3.110 View News Detail & View Event Detail ··········································147 Gambar 3.111 Halaman PROFILE ··········································································148 Gambar 3.112 Halaman CONTACT US··································································148 Gambar 3.113 Halaman FORGET PASSWORD·····················································149 Gambar 3.114 Halaman PRODUCT CATALOG (bagi pengunjung)/Halaman MODULE (bagi siswa) ······················································································149 Gambar 3.115 Pop Up Page ModuleDetail ······························································150 Gambar 3.116 Halaman ModuleRegistrationConfirmation······································150
Gambar 3.117 Proses CheckBiNusianID ·································································151 Gambar 3.118 Halaman StudentRegistration ···························································152 Gambar 3.119 Halaman StudentRegistrationConfirmation ······································153 Gambar 3.120 Halaman RegistrationResult ·····························································153 Gambar 3.121 Halaman RegistrationConfirmation Setelah Email ···························154 Gambar 3.122 Halaman HOME siswa ·····································································154 Gambar 3.123 Halaman AnnouncementList siswa ··················································155 Gambar 3.124 Pop Up Page AnnouncementDetail ··················································155 Gambar 3.125 Halaman MY MODULE ··································································155 Gambar 3.126 Bagian LMS pada Halaman Halaman Registered User (siswa) ········156 Gambar 3.127 Halaman MY PROFILE ···································································156 Gambar 3.128 Halaman ViewMyProfile··································································157 Gambar 3.129 Halaman EditMyProfile····································································157 Gambar 3.130 Halaman UploadPhoto······································································158 Gambar 3.131 Halaman ChangePassword ·······························································158 Gambar 3.132 Halaman FINANCIAL ·····································································158 Gambar 3.133 Halaman PaymentHistory·································································159 Gambar 3.134 Halaman PaymentDetail···································································159 Gambar 3.135 Halaman STUDIES ··········································································159 Gambar 3.136 Halaman ViewAllStudentScoreHistory ············································160 Gambar 3.137 Tombol Logout·················································································160 Gambar 3.138 Halaman Login E-BiNus Back End (Default) ··································160 Gambar 3.139 Tata Letak Halaman E-BiNus Back End (Setelah Login)·················161
Gambar 3.140 Tata Letak Halaman E-BiNus Back End 2 ·······································161 Gambar 3.141 Privilege Logic ·················································································163 Gambar 3.142 Menu Navigasi E-BiNus Back End ··················································164 Gambar 3.143 Halaman ViewLecturerModuleAssignment ·····································165 Gambar 3.144 Halaman EditLecturerModuleAssignment ·······································166 Gambar 3.145 Format Penulisan List Box ·······························································166 Gambar 3.146 Halaman EditLecturerModuleAssignmentConfirmation ··················167 Gambar 3.147 Desain Halaman MODULE CATEGORY MANAGEMENT (View Module Category) ······························································································167 Gambar 3.148 Halaman CreateModuleCategory, CreateModuleCategoryConfirmation dan CreateModuleCategoryResult ·····································································168 Gambar 3.149 Halaman EditModuleCategory, EditModuleCategoryConfirmation dan EditModuleCategoryResult················································································169 Gambar 3.150 Halaman MODULE MANAGEMENT (View Module)···················170 Gambar 3.151 Halaman CreateModule 1·································································170 Gambar 3.152 Halaman CreateModule 2 (Create Module Detail) ···························172 Gambar 3.153 Aturan Pengisian Grading Policy ·····················································173 Gambar 3.154 Halaman View Module·····································································173 Gambar 3.155 Halaman Edit Module ······································································174 Gambar 3.156 Halaman LECTURE PERSONAL INFO MANAGEMENT (View Lecturer List) ·····································································································175 Gambar 3.157 Halaman Pop Up ViewLecturerDetail ··············································176 Gambar 3.158 Halaman CreateLecturer Bagian Personal Info·································177
Gambar 3.159 Halaman CreateLecturer Bagian Email ············································177 Gambar 3.160 Halaman CreateLecturer Bagian Formal Education ·························178 Gambar 3.161 Bagian Add New Formal Education·················································178 Gambar 3.162 Bagian Formal Education Setelah tombol “Edit These Data” diklik·maka Formal Education Data Bisa Diedit (Edit Formal Education Data ·····················179 Gambar 3.163 Halaman EditLecturer Bagian Personal Info ····································180 Gambar 3.164 Halaman EditLecturer Bagian Email ················································180 Gambar 3.165 Halaman EditLecturer Bagian Formal Education ·····························181 Gambar 3.166 Halaman STUDENT PERSONAL INFO MANAGEMENT (View dan Search)
·········································································································182
Gambar 3.167 Halaman ViewStudentPersonalInfo··················································182 Gambar 3.168 Halaman EditStudentPersonalInfo····················································183 Gambar 3.169 Halaman USER MANAGEMENT (View User List) ······················184 Gambar 3.170 Halaman Pop Up View User ····························································184 Gambar 3.171 Halaman CreateUser·········································································185 Gambar 3.172 Halaman CreateUserConfirmation ···················································186 Gambar 3.173 Halaman CreateUserResult·······························································186 Gambar 3.174 Halaman EditUser ············································································187 Gambar 3.175 Halaman EditUserConfirmation ·······················································187 Gambar 3.176 Halaman EditUserResult ··································································188 Gambar 3.177 Halaman ANNOUCEMENT MANAGEMENT (ViewAnnouncement List)
·········································································································188
Gambar 3.178 Komponen Telerik r.a.d. date picker ················································189
Gambar 3.179 Halaman Pop Up ViewAnnouncementDetail ···································189 Gambar 3.180 Halaman Proses Create Announcement············································190 Gambar 3.181 Halaman Proses Edit Announcement················································191 Gambar 3.182 Halaman EVENT MANAGEMENT (View Event List)··················192 Gambar 3.183 Halaman Pop Up EventDetail···························································192 Gambar 3.184 Halaman Proses Create Event Bagian 1············································193 Gambar 3.185 Halaman Proses Create Event Bagian 2············································194 Gambar 3.186 Halaman EditEvent···········································································194 Gambar 3.187 Halaman UploadEvent untuk Edit ····················································195 Gambar 3.188 Halaman EditEventConfirmation ·····················································195 Gambar 3.189 Halaman EditEventResult ································································195 Gambar 3.190 Halaman NEWS MANAGEMENT (View News List)····················196 Gambar 3.191 Halaman Pop Up News Detail··························································197 Gambar 3.192 Halaman Proses Create News Bagian 1············································197 Gambar 3.193 Halaman Proses Create News Bagian 2············································198 Gambar 3.194 Halaman EditNews···········································································199 Gambar 3.195 Halaman UploadNews······································································199 Gambar 3.196 Halaman EditNewsConfrimation······················································200 Gambar 3.197 Halaman EditNewsResult·································································200 Gambar 3.198 Tampilan Console (Command Prompt) Payment Agent···················201 Gambar 3.199 Tampilan log file yang dihasilkan oleh Payment Agent ···················201 Gambar 4.1
Deployment Diagram E-BiNus·························································202
Gambar 4.2
Site Link ··························································································206
Gambar 4.3
Header pada E-BiNus Front End ······················································206
Gambar 4.4
Login Box ·······················································································207
Gambar 4.5
Navigasi Untuk Pengunjung ····························································207
Gambar 4.6
Link Anchor ····················································································207
Gambar 4.7
Halaman Home ················································································208
Gambar 4.8
Paging Facility ·················································································209
Gambar 4.9
Halaman News List (View All) ························································210
Gambar 4.10 Halaman News Detail·······································································211 Gambar 4.11 Halaman Event List (View All)························································212 Gambar 4.12 Halaman Event Detail ······································································213 Gambar 4.13 Halaman Profile················································································214 Gambar 4.14 Halaman Module List ·······································································214 Gambar 4.15 Halaman ModuleRegistrationConfirmation······································215 Gambar 4.16 Halaman FormRegistration.······························································216 Gambar 4.17 Halaman Contact ··············································································217 Gambar 4.18 Waktu dan Navigasi Umum Siswa ···················································220 Gambar 4.19 Student Navigation ···········································································221 Gambar 4.20 Photo, UserName, BinusianID, tombol Change Password dan LogOut
·········································································································221
Gambar 4.21 My Module Navigation ····································································221 Gambar 4.22 Halaman Home (News – Event – Announcement List) ···················221 Gambar 4.23 Halaman Announcement List (View All) ·········································222 Gambar 4.24 Halaman Announcement List (View By Category) ··························222
Gambar 4.25 Halaman AnnouncementDetail ························································223 Gambar 4.26 Halaman Profile E-BiNus·································································224 Gambar 4.27 Halaman Contact Us ········································································224 Gambar 4.28 Halaman My Profile ·········································································225 Gambar 4.29 Halaman View My Profile································································225 Gambar 4.30 Halaman Edit My Profile··································································226 Gambar 4.31 Halaman Upload Photo·····································································227 Gambar 4.32 Dialog Box untuk Browsing foto yang akan di-upload·····················227 Gambar 4.33 Halaman Change Password ······························································228 Gambar 4.34 Halaman Academic Record ······························································229 Gambar 4.35 Halaman Student Score History························································230 Gambar 4.36 Halaman Financial············································································230 Gambar 4.37 Halaman Payment History································································231 Gambar 4.38 Halaman Pop Up Window Payment Detail/Transaction Detail ·······231 Gambar 4.39 Halaman Modules ············································································232 Gambar 4.40 Halaman My Module Taken·····························································233 Gambar 4.41 Halaman View Module Available ····················································233 Gambar 4.42 Halaman Module Detail ···································································234 Gambar 4.43 Halaman Module Registration··························································234 Gambar 4.44 Login Box Back End ········································································235 Gambar 4.45 Halaman Main Menu admin ·····························································236 Gambar 4.46 Halaman Change Password admin ···················································237 Gambar 4.47 Halaman LecturerModuleAssignment_MainMenu admin················237
Gambar 4.48 Halaman LecturerModuleAssignment_ViewLecturerAssignment admin
·········································································································238
Gambar 4.49 Halaman LecturerModuleAssignment_EditLecturerAssignment 1 admin
·········································································································239
Gambar 4.50 Halaman LecturerModuleAssignment_EditLecturerAssignment 2 admin
·········································································································240
Gambar 4.51 Halaman ModuleCategoryManagement_MainMenu admin ·············241 Gambar 4.52 Module Category Management ketika link “Edit” diklik··················242 Gambar 4.53 Halaman ModuleManagement_MainMenu admin ···························243 Gambar 4.54 Halaman ModuleManagement_ViewModuleDetail admin ··············244 Gambar 4.55 Halaman ModuleManagement_EditModule 1 admin ·······················245 Gambar 4.56 Halaman ModuleManagement_EditModule 2 admin ·······················245 Gambar 4.57 Halaman ModuleManagement_CreateModule admin ······················246 Gambar 4.58 Halaman ModuleManagement_CreateModuleDetail 1 admin··········247 Gambar 4.59 Halaman ModuleManagement_CreateModuleDetail 2 admin··········247 Gambar 4.60 Halaman LecturerPersonalInformationManagement_MainMenu admin
·········································································································248
Gambar 4.61 Halaman LecturerPIManagement_ViewLecturerDetail admin·········249 Gambar 4.62 Halaman LecturerPIManagement_EditLecturer 1 admin ·················250 Gambar 4.63 Halaman LecturerPIManagement_EditLecturer 2 admin ·················250 Gambar 4.64 Formal Education Lecturer ketika Tombol “Edit These Data” Diklik
·········································································································252
Gambar 4.65 Formal Education Lecturer ketika Baru Ditambahkan······················252
Gambar 4.66 Halaman LecturerPIManagement_CreateLecturer 1 admin··············253 Gambar 4.67 Halaman LecturerPIManagement_CreateLecturer 2 admin··············254 Gambar 4.68 Halaman StudentPIManagement_MainMenu admin ························254 Gambar 4.69 Halaman StudentPIManagement_ViewStudentDetail admin ···········255 Gambar 4.70 Halaman StudentPIManagement_EditStudent admin ·······················256 Gambar 4.71 Halaman UserManagement_MainMenu admin ································257 Gambar 4.72 Halaman UserManagement_ViewUserDetail admin ························257 Gambar 4.73 Halaman UserManagement_EditUser admin····································258 Gambar 4.74 Halaman UserManagement_CreateUser admin ································259 Gambar 4.75 Halaman AnnouncementManagement_MainMenu admin················260 Gambar 4.76 Halaman AnnouncementManagement_ViewAnnouncement admin
·········································································································261
Gambar 4.77 Halaman AnnouncementManagement_ EditAnnouncement admin
·········································································································261
Gambar 4.78 Halaman AnnouncementManagement_CreateAnnouncement admin
·········································································································262
Gambar 4.79 Halaman EventManagement_MainMenu admin ······························263 Gambar 4.80 Halaman EventManagement_ViewEvent admin ······························264 Gambar 4.81 Halaman EventManagement_EditEvent admin ································265 Gambar 4.82 Halaman EventManagement_CreateEvent admin ····························266 Gambar 4.83 Halaman EventManagement_UploadEvent admin ···························266 Gambar 4.84 Halaman NewsManagement_MainMenu admin·······························267 Gambar 4.85 Halaman NewsManagement_ViewNews admin·······························268
Gambar 4.86 Halaman NewsManagement_EditNews admin·································269 Gambar 4.87 Halaman NewsManagement_CreateNews admin·····························270 Gambar 4.88 Halaman NewsManagement_UploadNews admin····························270
Daftar Lampiran
2.38
Kuesioner Aplikasi E-BiNus Front End ··············································L01
2.39
Wawancara dengan Administrator E-BiNus tentang Aplikasi Back End ············································································································L03
2.40
Surat Keterangan Survey·····································································L04
