JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)

Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)

DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

IMPLEMENTATION OF ANGULAR JS FRAMEWORK IN DESIGN

WEB-BASED ADMISSION SYSTEM APPLICATION

Eka Lia Febrianti 1 *, Ilwan Syafrinal 1 , Agus Suryadi 2

1
Software Engineering , Universal University
2
Informatics Engineering , Ibnu Sina University
email : [email protected]

Abstract: Technology is able to digitize human work that was originally manual to become au-
tomatic and of course takes less time and better accuracy compared to results done by humans.
But there are still many companies that have not implemented this technology. The use of the
AngularJS framework in web application development has proven to be effective in enhancing
the user experience and ease of development. In addition, the application of Agile methods in
the application development process can provide the flexibility and adaptability needed to deal
with frequent changes in requirements. This study aims to investigate the implementation of the
AngularJS framework in the design of a web-based acceptance system application using the Ag-
ile method. The results of the study show that the implementation of the AngularJS framework
in the design of web-based acceptance system applications provides significant benefits. In con-
clusion, the implementation of the AngularJS framework in the design of web-based acceptance
system applications using Agile methods can improve efficiency, quality, and user experience.
Using AngularJS enables the development of responsive and interactive applications, while the
Agile method facilitates adaptation to changing customer needs. Therefore, the use of Angu-
larJS with an Agile approach should be carefully considered by organizations wishing to devel-
op successful web-based acceptance system applications.

Keyword s: Admissions, Agile, AngularJS, Web

Abstract: Teknologi mampu mendigitalisasi pekerjaan manusia yang awalnya manual menjadi
otomatis dan tentunya memakan waktu yang lebih singkat dan akurasi yang lebih baik
dibandingkan dengan hasil yang dikerjakan oleh manusia. Tetapi masih banyak perusahaan pe-
rusahaan yang belum menerapkan teknologi ini. Penggunaan framework AngularJS dalam
pengembangan aplikasi web telah terbukti efektif dalam meningkatkan pengalaman pengguna
dan kemudahan pengembangan. Selain itu, penerapan metode Agile dalam proses pengem-
bangan aplikasi dapat memberikan fleksibilitas dan adaptabilitas yang diperlukan untuk
menghadapi perubahan persyaratan yang sering terjadi. Penelitian ini bertujuan untuk
menginvestigasi implementasi framework AngularJS dalam desain aplikasi sistem penerimaan
berbasis web menggunakan metode Agile. Hasil penelitian menunjukkan bahwa implementasi
framework AngularJS dalam desain aplikasi sistem penerimaan berbasis web memberikan
manfaat yang signifikan. Dalam kesimpulannya, implementasi framework AngularJS dalam
desain aplikasi sistem penerimaan berbasis web menggunakan metode Agile dapat meningkat-
kan efisiensi, kualitas, dan pengalaman pengguna. Penggunaan AngularJS memungkinkan
pengembangan aplikasi yang responsif dan interaktif, sementara metode Agile memfasilitasi
adaptasi terhadap perubahan kebutuhan pelanggan. Oleh karena itu, penggunaan AngularJS
dengan pendekatan Agile harus dipertimbangkan secara cermat oleh organisasi yang ingin
mengembangkan aplikasi sistem penerimaan berbasis web yang sukses.

Keywords: Admisi, Agile, AngularJS, Web

495
JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)
Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)
DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

INTRODUCTION So in order to improve business perfor-

mance and company productivity, the
The current technological devel- Wings company cooperates with PT.
opments are so rapid that the digital revo- Intek Karya to build web-based applica-
lution occurs where changes from analog tions used for Wings company manage-
mechanical and electronic technology to ment.
digital technology[1]. The impact of the The usability of a web is the main factor
digital revolution can be seen in the easy that determines whether a web is success-
and fast dissemination of information, ful or fails to be made [6]. Usability here
increasing business productivity and per- is defined as the extent to which a prod-
formance, changing the way individuals uct can be used by certain users to
and companies interact, and creating a achieve specific goals with effectiveness,
revolutionary business world[2]. efficiency and satisfaction in the context
The creation of a revolutionary of certain uses [7]. To meet the require-
business world because it is easy, cheap, ments for successful web-based applica-
practical, dynamic in communicating and tions created using the Angular JS
obtaining information, and the large framework[8].
number of internet users. Based on the AngularJS makes it possible to
results of a survey from the Association create easy-to-maintain and standardized
of Indonesian Internet Service Providers web applications that make models use
(APJII) there were 171,176,716.8 internet the same component [9]. Besides that,
users in 2018 where the growth of inter- AngularJS can also synchronize data with
net users increased by 27,916,716 which HTML in real time or what is known as
can be seen in[3] Image 1. data binding, namely synchronization
between models and views [10]. And
most importantly, AngularJS can im-
prove the User Interface, interactivity,
usability, and user experience [11].

METHOD

Image 1. Survey results from the The method for developing appli-
Association of Indonesian Internet cation designs with Angular JS uses ag-
Service Providers (APJII) ile, seen from
https://www.replicon.com/polaris-
Increased internet users make dis- psa/what-is-agile-project-management/
semination of information faster and eas- where the system design process will be
ier. Business people see that as an oppor- carried out in several stages. The design
tunity because they can advertise their stages of the admissions application for
company quickly[4]. In addition to fast the application of the Agile method are
advertising, technology is also able to shown in Image 2 [12].
digitize human work that was originally
manual to be automated and of course
takes less time and better accuracy com-
pared to results done by humans[5].
496
JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)
Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)
DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

At this testing stage is the process

of executing all parts of the soft-
ware with the intention of finding
errors. This stage is a critical ele-
ment in the software development
series, because from this testing
the features and tasks have been
developed and are as expected.
Image 2. Agile Stages
 Deployments
At this stage, it is the stage where
From Image 2 above the first step is [13]:
activities occur that aim to deploy
 Planning (Plan) :
applications that have been
Identification of needs:
worked on by the developer. De-
Identification and in-depth
ployment can be done in various
understanding of the needs of
ways depending on the type of
users and stakeholders regarding
application.
the admissions application .
 Reviews
Product backlog creation: Create
The complete process of examin-
a list of features and
ing software products, this pro-
functionalities required in the
cess will produce a good product,
application, based on identified
this stage will also determine the
needs. Arrange the product
positive and negative aspects of
backlog in order of priority.
the program.
 Design and Prototyping:
Create intuitive and responsive
user interface (UI/UX) designs.
RESULTS AND DISCUSSION
Create interactive prototypes to
validate designs and get feedback Home view
from users. The Home display does not con-
 Development tain much information, on the home page
At this Development stage or also there are only pictures of activities car-
called the software development ried out by the Wings company. For
stage is a series process of more details, it can be seen in Image 5.
developing software. Software
development requires the
precautionary principle both at
the design stage, as well as the
execution stage according to the
objectives to be achieved . The
development process is not just
writing program code, but it
certainly includes the stages of
preparing software requirements,
the software design stage, and the Image 5. Home view
software testing stage.
 testing Registration View
497
JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)
Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)
DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

In this view the user is asked to enter

their personal data. In this view, users
can choose whether they want to use their
email or cellphone number as their
username. And also users can create their
own passwords or generated by the sys-
tem. Can be seen in Image 6.

Image 8. Display Transactions

Display Transactions Details

This page details the selected transaction.
These details are in the form of programs
that have been registered along with pric-
es and time. The results can be seen in
Image 9.

Image 6. Registration Display

User Profile View

Users can view their information on this
page and they can also change that in-
formation. Here users can also change
their username. This display can be seen
in Image 7. Image 9. Display Transactions Details.

Program View
The program display is a display
that contains the programs in Wings.
Starting from those that have not started
to those that have been completed. The
information displayed includes the start
time of the program, registration time,
the name of the trainne, and the registra-
tion price. Can be seen in Image 10
Image 7. Display User Profile

Transaction view
This view contains transaction infor-
mation that has been carried out by the
user. The information is displayed in tab-
ular form and details can be seen. This
display can be seen in Image 8.
Image 10. Display Program
Program Details View

498
JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)
Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)
DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

This display contains more detailed pro- formation about the topic selected by the
gram information. Starting from the de- user. Here is explained in detail how to
scription, to the sessions available in the solve the problem or the steps for use.
program. Can be seen in Image 11. The appearance of this page can be seen
in Image 14.

Image 11. Program detail display

Frequently Asked Question (FAQ)

display Image 14. FAQ Detail Display
This is a display that contains in-
formation that can help the user if they
have difficulty using this application. CONCLUSION
Can be seen in Image 12.
Based on the results of the research that
has been done, it is concluded that the
design of a web-based admissions appli-
cation made using the AngularJS frame-
work with the application development
used is the agile method proven to pro-
Image 12. Frequently Asked Question duce applications that look more attrac-
(FAQ) dis-play tive, easy to use and help better digitize
the admissions system. In addition, the
FAQ list view system that has been built is also proven
In this view, information is dis- to be able to help companies increase
played per category and is more com- productivity, business performace and
plete. so users can more easily find the simplify data collection.
information they need. The appearance of
this page can be seen in Image 13.
BIBLIOGRAPHY

[1] Adinegoro, A. L. T., Rokhmawati,

R. I., & Az-Zahra, H. M. (2018).
Analisis Pengalaman Pengguna pada
Website E-commerce Dengan
Menggunakan Usability Testing dan
User Experience Questionnaire
Image 13. FAQ list display (UEQ)(Studi pada Lazada. co. id,
Blibli. com dan JD. id). Jurnal
FAQ Detail View Pengembangan Teknologi Informasi
This view contains complete in-
499
JURTEKSI (Jurnal Teknologi dan Sistem Informasi) ISSN 2407-1811 (Print)
Vol. IX No 3, June 2023, hlm. 495 - 500 ISSN 2550-0201 (Online)
DOI: https://doi.org/10.33330/jurteksi.v9i3.2493
Available online at http://jurnal.stmikroyal.ac.id/index.php/jurteksi

dan Ilmu Komputer e-ISSN, 2548, man, Y. (2017). Pengembangan ap-

964X. likasi chat messenger dengan metode
[2] Sulistianingrum, EW, Rusdianto, advanced encryption standard (aes)
DS, & Wihandika, RC (2021). De- pada smartphone. Coding Jurnal
velopment of an Order Management Komputer dan Aplikasi, 5(2).
System and Delivery of Goods for a [10] N. Nurwati, "Noise Level
Web-based Trading Company (Case Detector and Rating in Arduino-
Study: PT Arista Semesta Alam). Based Libraries," in Royal National
Journal of Development of Infor- Seminar (SENAR) , 2018, pp. 295–
mation Technology and Computer 298.
Science e-ISSN , 2548, 964X. [11] J. Hutahaean, Concept of
[3] Rahmidani, R. (2015). Penggunaan Information Systems . Yogyakarta:
e-commerce dalam bisnis sebagai Deepublish, 2015.
sumber keunggulan bersaing perus- [12] D. Sutrisno, SN Gill, and S.
ahaan. Pengguna. E-Commerce da- Suseno, "The development of spatial
lam bisnis sebagai sumber keunggu- decision support system tools for
lan bersaing Perusah., no. c, 345- marine spatial planning," Int. J.
352. Digits. Earth , vol. 11, no. 9, pp.
[4] Juairiyah, O. (2020). Analisis 863–879, 2018.
Mengenai Alasan Penggunaan Inter- [13] Km. Syarif Haryana, "
net Masyarakat Sumatera Selatan. Application of Agile Development
Multitek Indonesia, 13(2), 81-85. Methods With the Scrum Framework
[5] Kamelta, E. (2013). Pemanfaatan in the Design of Qr-Code Based
internet oleh mahasiswa jurusan General Meeting Attendance
teknik sipil fakultas teknik universi- Software "Journal of Computech &
tas negeri padang. Jurnal CIVED Bisnis, Vol. 13, No. 2, December
ISSN 2302, 3341(1), 2. 2019, 70-79
[6] SE Rosenbaum, “Passage of drugs [14] Burhan, MI, Nawir, F., & Salam,
through membranes,” in Basic KN (2022). Development of a Tracer
Pharmacokinetics and Study System Using Agile Devel-
Pharmacodynamics: An Integrated opment Methods on Ibk Nitro.
Textbook and Computer Simulations JURSIMA (Journal of Information
, John Wiley & Sons, 2016. and Management Systems) , 10 (3),
[7] EL Febrianti and T. Christi, 160-170.
"Implementation of Forward [15] Muliadi, M., Andriani, M., &
Chaining for Diagnosing Malaria Irawan, H. (2020). Website-Based
and Web-Based Prevention," (Web) Hotel Room Booking Infor-
Jurteksi , vol. 4, no. 1, pp. 93–100, mation System Design Using Data
2017. Flow Diagrams (Dfd). JISI: Journal
[8] Firda, R. A. (2018). KUB of Industrial System Integration , 7
Perancangan Sistem Administrasi (2), 111-122.
Pada Kelompok Usaha Bersama
Berbasis Web Menggunakan
Framework AngularJS. Jurnal Ilmi-
ah Informatika, 6(01), 49-53.
[9] Suryanto, I., Suhery, C., & Brianor-
500