E-Komtek Journal Vol.
No.
https://jurnal.
politeknik-kebumen.
id/index.
php/E-KOMTEK p-ISSN : 2580-3719 e-ISSN : 2622-3066 Implementation of WYSIWYG in the Development of ITCC ITPLN Letter Management Information System Herman Bedi Agtriadi1 .
Hendra Jatnika2.
Yessy Fitriani3.
Zakiya Viantika Sihabudin4.
Muhammad Nur Khanib5.
David Gabriel Sembiring6.
Ocha Nia Martcya Situmorang7 Department of Technical Information.
Institute Teknologi PLN.
Jakarta.
Indonesia, 11750 hermanbedi@itpln.
https://doi.
org/10.
37339/e-komtek.
Published by Piksi Ganesha Polytechnic Indonesia Info Articles Submitted:
11-10-2021
Revised:
03-11-2021
Accepted:
08-12-2021
Online first :
Abstract Information Technology Certification Center (ITCC) is a laboratory focused on Certification activities in Information and Technology.
Currently.
ITCC uses a manual system with Microsoft Excel for creating letter numbers, which is time-consuming and prone to data loss due to unintegrated storage.
To solve this, the author developed a letter archive application using the Rapid Application Development (RAD) model, which accelerates the development process by producing incremental software versions.
This application improves the efficiency of numbering and securely storing mail archives while providing a WYSIWYG editor for easy document editing.
30-12-2021
Keywords: Rapid Application Development (RAD) Model.
Mail Archive.
What You See Is What You Get (WYSIWYG) Abstract Information Technology Certification Center (ITCC) adalah laboratorium yang fokus pada kegiatan sertifikasi di bidang Informasi dan Teknologi.
Saat ini.
ITCC masih menggunakan sistem manual dengan Microsoft Excel untuk pembuatan nomor surat, yang memakan waktu lama dan rentan terhadap kehilangan data karena penyimpanan yang tidak terintegrasi.
Untuk mengatasi masalah ini, peneliti mengembangkan aplikasi arsip surat menggunakan model Rapid Application Development (RAD), yang mempercepat proses pengembangan dengan menghasilkan versi perangkat lunak secara bertahap.
Aplikasi ini meningkatkan efisiensi penomoran dan penyimpanan arsip surat secara lebih aman, serta menyediakan editor WYSIWYG untuk memudahkan pengeditan Kata-kata kunci: Model Rapid Application Development (RAD).
Arsip Surat.
What You See Is WhatYou Get (WYSIWYG) This work is licensed under a Creative Commons Attribution-NonCommercial 4.
International License.
AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang Introduction Technological advances make every individual motivated to always find new things in providing information according to what is needed .
The use of computers is one of the tools to achieve greater ease of work.
The use of computers as a tool in the business world covers various aspects such as data processing .
At ITCC (Information Technology Certification Cente.
there are assistants who process data that has not been integrated with the database.
In addition, obstacles were found such as the same letter number in two events, document searches that took longer and the vulnerability of document storage on the personal assistant's laptop.
ITCC needs a website-based letter management system to help in creating letter numbers, editing and searching for documents and even storing them .
The method used to realize this system is Rapid Application Development (RAD), which is software development and is based on the same principles in a short time and fast adaptation .
In addition, this system uses the Froala library which implements What You See Is What You Get (WYSIWYG) to facilitate users in editing .
Method 1 Rapid Application Development (RAD) Method This research uses the RAD method which focuses on users and provides development facilities and can be completed more quickly with quality results .
Figure 1.
Concept The stages that must be passed in the RAD method are Requirements Planning.
RAD Workshop.
Implementation .
2 Requirements Planning The needs analysis conducted was observation, interview and document study.
The researcher conducted direct discussions with the Head and Assistant of ITCC to analyze data AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang related to the system.
3 RAD Workshop In the RAD Workshop, researchers held discussions with related parties to determine the functionality of the system.
The results of the discussion were: .
Table 1.
System Functionality Users Super admin User Required functions Login View user reports Manage registration data View document report Document management Document verification Search and view documents Document revision/validation Logout Login View document reports Document management Search and view documents Document revision/validation Logout Use casediagram Use case The diagram illustrates developers and users in understanding the flow of the system being built.
Figure 2.
Use Case Diagram AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang Classdiagram The following is a class diagram in the system created in the letter archive system.
Figure 3.
Class Diagram Activitiesdiagram Used to illustrate each stage built into the system to be created.
Figure 4.
Login Activity Diagram Sequencediagram Illustrates the relationships between objects arranged chronologically and shows the respective procedures.
Figure 5.
Admin Login Sequence Diagram AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang Results and Discussion Following are the results of the application design that has been created.
Figure 6.
Applicaton login page view Figure 6, is the initial login display of the ITCC letter archive system.
Users are asked to input the username and password that has been created by the Super Admin.
This system can be accessed if the device used is connected to the internet.
Figure 7.
User Dashboard The display that appears after the super admin and admin have successfully logged in is as shown in Figure 7.
Admins or regular users cannot create account registrations.
Figure 8.
List of outgoing mail tables In the outgoing mail type menu.
Users can perform actions such as adding, editing and Super admin can validate documents that have been created by Users so that it can be known whether the document needs to be revised or not.
Figure 9.
Outgoing letter numbering form AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang In creating outgoing letters, the User will be asked to enter the required data.
The display of the required data is as in Figure 9.
Figure 10 Wysiwyg outgoing mail The display of what you see is what you get on outgoing mail is as shown in Figure 10.
This display will also appear when the user makes an edit.
Figure 11.
Delete outgoing mail The view of deleting outgoing mail in Figure 11 contains code, id and description, after the User deletes the data, the row number in the data will also be deleted.
System testing was carried out using the blackbox method with the following results.
Table 3.
System testing No.
Use case Use caseTest: Login Description:
Perform account validation against registered users Test case Username:zakiyaviantika@gmail.
Password: zakiya Desired result:
If successful, the user will enter the dashboard home page.
Results Test Name Tester* Succeed Lilies Succeed Jatnika If it fails, the user will return to the login Use Casetest: Document management Description:
Perform ITCC letter data processing Outgoing mail July 12 July 15 Date Testing Add: itcc testing Edit: testing itcc Delete: testing itcc Succeed Lilies July 12 Incoming mail Add: itcc testing Download: testing itcc Delete: testing itcc AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang No.
Results Test Use case Edit: testing itcc Delete: testing itcc Succeed Jatnika July 15 Succeed Jatnika July 12 Succeed Jatnika July 12 Succeed Jatnika July 12 Succeed Jatnika July 12 Add: itcc testing Edit: testing itcc Delete: testing itcc Memo Add: itcc testing News Date Testing Socialization Name Tester* Add: itcc testing Edit: testing itcc Delete: testing itcc Minutes Add: itcc testing Edit: testing itcc Delete: testing itcc Expected If the whole management is successful and carries out orders as expected If document management fails then a message will appear that the data entered is Use CaseTest: Change password Description:
Change User password.
Test Case:
Username:zakiyaviantika@gmail.
Password: zakiya New Password:
viantika Desired result:
- If the password change fails, the display will reload.
Use CaseTest: Add User Description:
Adding Users Test cases:
Username:liliescahyanti@gmail.
Password: lilies Expected results:
If the password change is successful, the system will replace the password data in the database.
the database - If it fails, the display will reload.
Use CaseTest: Document revision/validation Description:
Perform document revisions/validation for each type of Test cases:
Username:hendrajatnika@gmail.
Password:hendra Desired result:
If successfully validated, it will appear check the checkbox If it fails, no check mark will appear in the Use CaseTest: Delete User Description:
Perform User deletion Test cases:
Username:liliescahyanti@gmail.
Password: lilies AHerman Bedi Agtriadi.
Hendra Jatnika.
Yessy Fitriani.
Zakiya Viantika Sihabudin.
Muhammad Nur Khanib.
David Gabriel Sembiring.
Ocha Nia Martcya Situmorang No.
Use case Results Test Name Tester* Expected results:
Date Testing If successfully deleted, it will go to databaseand failed to login If the deletion is unsuccessful, the display will Use CaseTest: Logout Description:
Perform User logout Test cases:
Username:zakiyaviantika@gmail.
Password: zakiya Expected results:
Succeed Jatnika July 12 Succeed Lilies July 12 Succeed Jatnika If successful, you will be taken to the login page.
If it is not successful, the display will reload.
Use CaseTest: Table Description:
Displays the number of letters that have been created by ITCC.
Expected results:
The graph will display the total of all types of letters that have been created.
July 15 Conclusion Implementation What You See Is What You Get(WYSIWYG) on ITCC letter archives with the Rapid Application Development (RAD) model makes it easier to create letter numbers and edit documents.
The RAD method has special advantages, namely faster and more effective process integration and can reuse previously existing components .
eusable object.
so that there is no need to start from scratch again.
References .
Subarjo.
AuPerkembangan teknologi dan pentingnya literasi informasi untuk mendukung ketahanan nasional,Ay Angkasa: Jurnal Ilmiah Bidang Teknologi, vol.
9, no.
2, pp.
1Ae8, 2017.
Bodnar and W.
Hopwood.
AuSistem informasi akuntansi,Ay in ANDI, 9th ed.
, 2006.
AuSistem teknologi informasi,Ay in Andi Offset.
Yogyakarta, 2008.
Chusyairi.
Rudiawan, and E.
Sasongko.
AuLayanan Laporan Kehilangan (E-Repor.
Dengan Metode Rapid Application Development,Ay Jurnal Telematika Vol, vol.
11, no.
Indawati.
Mayangsari.
Maulani, and N.
Azlina Aprilia.
AuSISTEM INFORMASI DATA WEB PADA DRUPAL DENGAN WYSIWYG WEB BUILDER.
Ay Irnawati.
Bayu.
Listianto.
Informatika, and A.
Bsi Bekasi.
AuMetode Rapid Application Development (RAD) pada Perancangan Website Inventory PT.
SARANA