Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology

ISSN No:-2456-2165

Web-Based Student Identification Card System:

An Alternative for School On-site Processing
Gabriel E. Casiño, MSIT Kent Russell N. Casiño
Tagoloan Community College Tagoloan Community College
College of Information Technology College of Information Technology
Philippines Philippines

Abstract:- Identification or ID cards are used by many II. FRAMEWORK OF THE STUDY
organizations nowadays to prove the person’s identity.
Educational institution provides ID cards to their students, Figure 1 illustrates the framework of the study. It
faculty, and staff to shows their connections to the describes how information is processed to achieve the desired
institution. Several educational institutions have offices output of the system. The proposed system is intended to
that will process the student’s ID cards. In this study, the improve traditional ID card processing, from on-site processing
researchers developed a web-based application that to web-based processing.
addressed the problem of restraining the students to on-site
process their ID cards. This application allowed the
student to process their ID cards thru the use of the online
application. Using this application students will no longer
go to the office of the school site to process their ID cards.
The application also helped the students to save their time
and effort in processing their ID. The newly developed
system will be deployed on the web and it can access by
many devices with the internet browser and connected to
the world-wide-web.

Keywords:- Web-based Application, Online ID Card

Processing, and Online Transaction System.

I. INTRODUCTION Fig 1. The Framework of the Study.

Identification (ID) cards are used by many establishments III. RESEARCH OBJECTIVES
nowadays to prove the person’s identity. Educational institution
provides ID cards to their students, faculty, and staff to show This study aimed to develop a Web-based ID card
their connections to the institution. Student ID card may have processing system. The system allowed the students to process
the summary of student information [1]. ID cards are useful to their ID cards via web-based technology. Specifically, this
the students, it can be used by the students to avail discounts on study aims:
their fare. It can also use as for identity verification for their 1. To identify the tools and resources in the development of the
purpose for such as for claiming money remittances and other system.
purposes. Several educational institutions have offices that will 2. To design and develop a Web-based ID card processing
process the student’s ID cards. The students will go directly to system.
that office to request and process their ID cards. In some 3. To evaluate the newly developed system in terms of
institution, there is a specific office or department that services functionality, reliability, usability, efficiency, and
provide ID cards to the students. The processing of ID took portability.
place in that particular office and done it manually [2]. The
student will directly request to the office. But due to the IV. TECHNICAL BACKGROUD
COVID-19 pandemic, students were restricted inside the
school. This a measure to ensure the student’s safety and to This section provides different literature and studies from
prevent the spread of the COVID-19 virus. In this study, the previous researchers. It introduces the available resources and
researchers developed a web-based application that addressed framework for the development of the entire study.
the problem of restricting the students to process their ID cards.
This application allowed the student to process their ID cards A. Web-based Application System
thru the use of the online application. Using this application An online or web-based application can deliver
students will no longer go to the office of the student affairs and information and services to users or other information systems
services to process their ID cards. This application also helped using internet web technologies. Nowadays, a lot of firms
the students to save their time and effort in processing their ID. employ web-based application systems. Firms can extend their
geographic reach beyond their current physical location thanks

IJISRT22AUG332 www.ijisrt.com 234

Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
to Web-based apps [3]. It can reduce the time and effort of an C. Requirements Analysis
individual who will use an online or web-based application. The first phase includes the gathering of data from
Some Web-based applications must be used to fully available resources and understanding the things needed in
comprehend their utility. This type of application should be designing. This also includes the function, and purpose of the
user-friendly, interactive, and responsive [4]. newly developed system. The Algorithm used in the system
was also identified and studied during this phase and the
B. Web Tools and Application . specifications of the input and output or the final product, are
Hypertext Preprocessor or PHP and MySQL studied and marked. In gathering the data, the overall objective
Technologies were used in the development of this project. can be drawn based on the data gathered. The researcher
PHP is a programming language used to design a webpage conducted intensive research on what are the available tools in
PHP was a server-side scripting language designed specifically the open-source community for the development of the web-
for the web. Within an HTML page, PHP was an embedded based ID card processing system. Data gathered from this
code that will be executed each time the page is visited [5]. On phase will be used as the basis for designing the system in the
the other hand, MySQL is a database used for storing data and next phase.
information. MySQL is a very fast, robust, Relational. The
web-based application system is continuously improving. This D. System Design
may give a lot of opportunities for researchers. Based on the The requirement specifications from the first phase are
data gathered from the reviewed literature and studies, the being studied in this phase. This is where the designs of the
researchers used information in the development of web-based system are prepared. The direction of System Design helps in
ID card processing. identifying the hardware specification, and system
requirements and also helps in defining the overall system
V. RESEARCH METHOD architecture. After all the designs are ready, the coding of the
software will be followed. In designing the system, the first
In this chapter, the setting and design of the study were objective of this study is initially achieved. The results are
presented in this section. based on an interview being used in developing the system. In
this phase, the researcher prepared some diagrams to visualize
A. Research Setting the development of the system. Programming tools were
This study took place at Tagoloan Community College determined in this phase in the development of the Web-based
(TCC) during the Academic Year 2020-2021. TCC is a ID card processing system.
community-based institution established in July 2003 at the
Municipality of Tagoloan, Misamis Oriental. At present, has E. Implementation
a population of 5,330 active students. Based on the system design, the system is initially
developed in small programs called units, and all the units were
B. Research Design integrated into the next phase. Every unit is developed and
Software Development Life Cycle (SDLC) is a tested for its functionality before it was implemented and
methodology for planning, designing, building, and tested as a whole system. In this phase, the researcher coded
maintaining information systems. There is a lot of SDLC the system in the local machine and continued debugging the
model proposed by different researchers [6]. The waterfall system. The application system was based on the proposed
model is an SDLC sequential model that comprises five design as presented in the system design phase of the Web-
phases. Figure 2 shows the Waterfall model which starts from based ID card processing system. In this phase, the first
analysis down to the maintenance phases. It allows returning objective of this study will also be achieved.
to the previous stage when the need arises but this provision
should be used with care. F. Integration and Testing
In the integrating and testing phase, all the units
developed in the implementation phase are integrated into a
system after testing each unit. The designed system needs to
go through a series of software testing to find out flaws or
errors. A web-based application was deployed in a cloud server
and ready for initial use. The system was first tested on a
limited number of users to determine the errors in the system.
Once the system was free from errors after the initial
deployment, then officially launching was done. This phase
also included the briefing and orientation of the software
system to the actual pilot users. The pilot users were oriented
on how to use the system and learn about the benefits of using
the system.
Fig 2. The Waterfall Model

IJISRT22AUG332 www.ijisrt.com 235

Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
G. Maintenance administrator can print the ID card and it will be ready for
In the maintenance phase, the system was monitored and release.
supervised. It involved making modifications to the system or c) ID Card notification for release. In this phase, the student
an individual component to alter attributes or improve will notify (via email) that their requested ID is ready to be
performance. released.

H. System Evaluation Procedures A. To identify the tools and resources in the development of the
The researchers conducted a survey from 30 randomly system.
selected students that served as pilot users. Using International Some tools and resources were needed in the
Standard Organization (ISO) 9126 questionnaire. ISO 9126 development of the system. Some of this was considered open-
determines the functionality, reliability, usability, efficiency, source. These includes the following:
and portability of the newly developed system [7]. The Software :
questionnaire contains 4-way Likert scale to denote the degree  Apache 2.4.28 (PHP 7.1.14)
of agreement (e.g., 4 = strongly agree, 3 = agree, 2= disagree,  MySql 5.3
1= strongly disagree). A simple mathematical computation  CodeIgniter 3.1.7
was used to find the mean as shown in figure 3.  Bootstrap 3.3.75

Hardware:
 Any CPU (Intel i5/ i7/ Xeon recommended for web-
hosting)
 1 GB of RAM (at least 8GB for recommended for web-
hosting)
 40 GB HDD Free Space

B. To design and develop a Web-based ID card processing

system.
Designing a database for an application is important. This
Fig 3. Weighted Mean Formula utilized the storage of data to store more information and it will
be available for future use. In this study, the researchers used
VI. RESULT AND DISCUSSION an Entity Relationship Diagram (ERD) to illustrate the
database design used in this study. Figure 5 illustrates the
The researchers used the Online Transaction Processing database of the system.
(OTP) model. Figure 4 shows that students used their personal
owned or borrowed devices that have an access to the internet
browser and the world-wide-web. The role system
administrator is to monitor the flow of the transaction.

Fig 4. Online Transaction Processing of ID Card Processing

The process includes three (3) phases. These phases

are the following:
a) Student ID Card Application. In this phase, the student was
required to log into the Student Portal to apply for an ID
card.
b) ID Card Approval. In this phase, the system administrator
monitored and approved those students that have Fig 5. Web-based ID card processing system ERD
completed the application. Additionally, the system

IJISRT22AUG332 www.ijisrt.com 236

Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
 Objective 3: To design a friendly user-interface for the
system.
User-interface is an important component of a computer
application. It allows the end-user to interact act with the
computer system. In this study, the researchers developed a
friendly web-based user interface using HTML, CSS, and
JavaScript technology.

Figure 6 shows the log-in pages of the system. This

allows the students to log into their accounts.

Fig 8. Student ID card Application

Using JavaScript technology, the system can accept the

digital signature of the student. Figure 9 shows a signature
panel. This panel allows the students to attached their
signatures. The attached signature will be converted into an
image file and it will securely stored in a web hosting server.

Fig 6. Log-in page of the system

Figure 7 shows the terms and agreements of the system.

This page allows the students to read the terms, agreements,
and rules in using the newly developed system.

Fig 9. Student’s Signature Attachment form.

After the submission of the required information, a status
preview page will be displayed. Figure 10 shows a page of the
student ID. This allowed the students to review their
information.

Fig 7. Terms and agreement form.

Figure 8 shows the student ID card application. On this

page, the student will update their information such as the
latest ID photo, contact person in case of emergency, and other
important information.

Fig 10. Status Preview form.

IJISRT22AUG332 www.ijisrt.com 237

Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
C. To evaluate the newly developed system in terms of The data gathered from the group of students were
functionality, reliability, usability, efficiency, and portability. interpreted according to the hypothetical measures in table 2.
Using ISO 9126, the researchers float a set of
questionnaires to a group of students. Table 1 shows that the Table 2. Data of the result of usability testing in terms of
majority of the students are male. functionality.
Range Indicator
Table 1. Data of the result of usability testing in terms of 3.50 - 4.00 Strongly Agree
functionality. Agree
2.50 - 3.49
Category Frequency Percentage 1.50 - 2.49 Disagree
Female 12 40% Strongly Disagree
1.00 - 1.49
Male 18 60%
Total 30 100%

Table 3. Data of the result of usability testing in terms of functionality.

Specifications Mean Indicator
The system can produce expected results. 3.87 Strongly Agree
The system can interact with other system. 3.80 Strongly Agree
The system equipped with acceptable security measure. 3.70 Strongly Agree
The system can meet existing requirements. 3.80 Strongly Agree
Weighted Mean 3.79 Strongly Agree

Table 3 shows that the functionally with a weighted mean of 3.79 which indicate that the system is functional as reviewed by
a group of students.

Table 4. Data of the result of usability testing in terms of reliability.

Specifications Mean Indicator
Most of faults can be eliminated over time. 3.67 Strongly Agree
The system can handle errors. 3.77 Strongly Agree
The system can resume working and restore data. 3.70 Strongly Agree
The system can meet existing reliability standards. 3.90 Strongly Agree
Weighted Mean 3.76 Strongly Agree
Table 4 shows the reliability with a weighted mean of 3.76 which indicate that the system is reliable as reviewed by a group of
students.

Table 5. Data of the result of usability testing in terms of usability.

Specifications Mean Indicator
The system can be understood easily. 3.70 Strongly Agree
The user can learn to use the system easily 3.83 Strongly Agree
The system can be operated with minimal effort. 3.77 Strongly Agree
The interface of the system is attractive. 3.80 Strongly Agree
The system can meet existing usability standards. 3.77 Strongly Agree
Weighted Mean 3.77 Strongly Agree

Table 5 shows the usability with a weighted mean of 3.77 which indicate that the system is usable as reviewed by a group of
students.

Table 6. Data of the result of usability testing in terms of efficiency.

Specifications Mean Indicator
The system can behave in a timely manner 3.80 Strongly Agree
The system can meet existing efficiency standards 3.77 Strongly Agree
The system can be adapted easily. 3.87 Strongly Agree
Weighted Mean 3.81 Strongly Agree

Table 6 shows the efficiency with a weighted mean of 3.81 which indicate that the system is as reviewed by a group of students.

IJISRT22AUG332 www.ijisrt.com 238

Volume 7, Issue 8, August – 2022 International Journal of Innovative Science and Research Technology
ISSN No:-2456-2165
Table 7. Data of the result of usability testing in terms of portability.
Specifications Mean Indicator
The system can be installed easily. 3.77 Strongly Agree
The system can work with existing system/software 3.73 Strongly Agree
The system can be replaced with a similar product. 3.70 Strongly Agree
The system can meet existing portability standards. 3.83 Strongly Agree
Weighted Mean 3.75 Strongly Agree

Table 7 shows the functionality with a weighted mean of

3.75 which indicates that the system is portable as reviewed by REFERENCES
a group of students.
[1]. Md. Sanaul Haque and Richard Dybowski. 2014.
VII. SUMMARY Advanced QR Code Based Identity Card: A New Era for
Generating Student ID Card in Developing Countries. In
This study aimed to develop a system application that Proceedings of the 2014 First International Conference
allows student to process their ID cards using a web-based on Systems Informatics, Modelling and Simulation
application. The newly developed system served as an (SIMS '14). IEEE Computer Society, USA, 97–103.
alternative way to request and process a student ID card in a [2]. H. Baban and S. Mokhtar, "Online Document
school. Using this application students will no longer go to the Management System for Academic Institutes," 2010 3rd
office of the school site to process their ID cards. The International Conference on Information Management,
application also helped the students to save time and effort in Innovation Management and Industrial Engineering,
processing their ID. The newly developed system is deployed 2010, pp. 315-319, doi:
on the web and it can access by many devices with the internet 10.1109/ICIII.2010.555,(references)
browser and connected to the world-wide-web. [3]. Solanki K.N., & Parekh V.H. (2019), Web Based Claim
Processing System, Retrieved from:
VIII. CONCLUSIONS https://www.slideshare.net/KavankumarSolanki/web-
based-claim-processing-system, July 5, 2022
This research developed a system that can be an [4]. Hawker J.S., & Smith R. (2015), A Web-based process
alternative way of processing School ID cards. This will allow and process models to find and deliver information to
the students to process their ID cards using Internet improve the quality of flight software, Retrieved from :
Technology. The system can be used by the students to lessen https://www.researchgate.net/profile/John-
their time and effort in requesting their ID cards. This System Hawker/publication/4043804_A_Web-
can be used not only during the COVID-19 pandemic. This based_process_and_process_models_to_find_and_deliv
system can save time and resources for an institution. er_information_to_improve_the_quality_of_flight_soft
ware/links/565352a308aefe619b1939ec/A-Web-based-
RECOMMENDATIONS process-and-process-models-to-find-and-deliver-
information-to-improve-the-quality-of-flight-
There were challenges that the researchers encountered software.pdf, July 5, 2022
during the development of the system. Based on the findings
the following recommendations were presented: [5]. Cabuenos Q., (2017), Webpage Development: Tools and
a) The study suggests that a Web-Based Student ID card Frameworks, Retrieved from:
Processing Application may be considered as an alternative https://www.academia.edu/27141888/Webpage_Develo
for on-site ID card processing. pment, Feb. 5, 2021
b) Researchers suggest a series of system evaluations before [6]. Bassil, Y., (2012). A Simulation Model for the Waterfall
the implementation of the system to minimize or even Software Development Life Cycle. International Journal
eliminate all the system errors. of Engineering & Technology (iJET), Vol. 2, Retrieved
c) The study also suggests the development of a native from https://arxiv.org/pdf/1205.6904
version of a mobile application and the integration of SMS [7]. D. Rachida and B. Moncef. (2016). An ISO 9126 Based
technology for notification. Quality Model for the e-Learning Systems. International
d) The security mechanism of the system may be improved to Journal of Information and Education Technology. 6.
protect the privacy of the users. 370-375. 10.7763/IJIET.2016.V6.716. (references)
e) Further research may be conducted in terms of feedback on
the developed system.
f) Finally, future research may be conducted to make use of
the results of this study for a deeper analysis of issues and
concerns involving the maintainability and sustainability of
the system.

IJISRT22AUG332 www.ijisrt.com 239