Content uploaded by Faizah Miserom
Author content
All content in this area was uploaded by Faizah Miserom on Nov 14, 2024
Content may be subject to copyright.
Semarak International Journal of Applied Sciences and Engineering Technology 3, Issue 1 (2024) 7-17
7
Semarak International Journal of Applied
Sciences and Engineering Technology
Journal homepage:
https://semarakilmu.com.my/journals/index.php/sijaset/index
ISSN: 3030-5314
Responsive Web Design for Educational Institution: A Case of
ALUMNIApps
Nor Hafiza Haron1,*, Nor Hafiza Abd Samad1, Jihadah Ahmad1, Siti Faizah Miserom1, Michael
Nebeling2
1
Faculty of Computing and Multimedia, Universiti Poly Tech Malaysia 56100 Cheras Kuala Lumpur, Malaysia
2
Institute of Information Systems, ETH Zurich, CH-8092 Zurich, Switzerland
ARTICLE INFO
ABSTRACT
Article history:
Received 12 June 2024
Received in revised form 12 July 2024
Accepted 12 August 2024
Available online 19 September 2024
Alumni means those who have graduated from the university. In order to stay
relevant to the university, the university or institution must establish a platform for
accessing and retrieving alumni data. The purpose of creating the platform or known
as a system is to reduce barriers in terms of data access, especially information
regardless of their university, career opportunities and programs developed to
strengthen the skills of graduates. This research aims to examine the evolution of
the alumni system utilized in higher education institutions. This will incorporate the
web development framework that has been employed in the system at one of the
private universities in the Klang Valley. This study also examines the system
requirements for the alumni of the university. Responsive web has been explored
and implemented with aesthetic features, regardless of system requirements.
Therefore, the Alumni Portal is developed and is also known as ALUMNIApps. Future
studies will utilize dashboard analytics to analyze alumni data, which will be utilized
by managers to make significant decisions at the university management level.
Keywords:
Alumni; system requirement; responsive
web; educational institution
1. Introduction
Alumni was an important element to the institution. According to Bista et al., [1] alumni
associations play an essential role in higher education institutions, as they provide networking
opportunities and contact between the university and the alumni or among the alumni. They are a
person who graduated from her or his institution which is completed the requirement set from the
programme that they enrolled. Alumni plays a vital role in Higher Education Institution (HEI), because
it gives the HEI support in terms of giving feedback on the programme of the university regarding the
improvements of the course, supporting the university in most of the activities that require alumni’s
participation [2].
According to [2] one of the criteria in quality assurance for higher education is the connection of
the HEI to its alumni and tracer study of its graduates once you have these data, you can manage and
* Corresponding author.
E-mail address: afieza@uptm.edu.my
https://doi.org/10.37934/sijaset.3.1.717
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
8
analyse these kinds of information and it will serve also as a very important parameters of improving
the quality in higher education, specifically the programs being offered by the HEI. In order to
improve the quality of programs, there should be continuous feedback from the alumni who are
working particularly in the industry. Their feedback is very important inputs to the curriculum and
activities of every HEI [3].
Most of institution take the opportunity to provide a platform in order to get along with their
alumni. Communication between graduates or alumni and university can be suitable for both sides
the faculty also wants to keep in touch with its graduates using web application, providing a channel
for professional and social communication between graduates themselves and the faculty [4].
Furthermore, with the rising of technological advancement it’s easier to provide a system so that the
institution can get alumni data and they may keep it in their database of the system.
In fact, the industrial revolution 4.0 became the current paradigm discussed both in industry and
also in education. The Ministry of Research Technology and Higher Education encourages all
universities follows technological developments including the application of the revolution paradigm
industry 4.0 to education [5]. Beside that the emergence of the internet has created a massive
opportunity for businesses to expand their reach and engage with global audience [6,7].
Websites are the primary platform for showcasing products and services, providing information,
and interacting with customers. However, building a successful website is not as simple as just putting
together some images and text. Two critical processes, web designing and web development, are
required to create an effective online presence. According to [8], web designing involves creating the
visual aspects of a website, including layout, colour schemes, typography, and graphics. It aims to
create an aesthetically pleasing and user-friendly website that attracts visitors and keeps them
engaged [8].
The website can be utilized for business and institution in order to engage with the graduate and
alumni. These would include the utilization of e-learning technology such as learning management
system (LMS), mobile learning and application development [9]. The significant of using these
platform and technological advancement can help the institution to boost their business strategy and
met the requirement setting as well.
Thus, the objective of this paper is that to explore the development framework of the alumni web
site in term of requirements needed in order to produce the portal. The study would also incorporate
the aesthetic features of responsive web in the development process which is has been explored
together with the system requirement. As for the implementation the alumni portal as long as
ALUMNIApps has been develop for University Poly Tech Malaysia UPTM as one of the platforms
within alumni and the university.
2. Methodology
The methodology used in this research is a qualitative technique. The technique focuses on the
development framework used in this research which follows the system life development cycle for a
common website creation. For the past few decades, the software development methodologies have
been evolving intensively [10]. According to [11], the best methodology for a particular project will
depend on factors such as the size and complexity of the project, the availability of resources, and
the preferences of the project team. Phase one is a planning stage and proposal of the development
strategy. This is the basic stage of common development framework. In general Figure 1 exemplify
the whole picture of the framework of the alumni portal. The analysis phase sets the stage for the
subsequent phases of the software development life cycle, guiding the development team toward a
clear understanding of what needs to be built and how it will address the identified business problem.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
9
A well-executed analysis phase contributes to the overall success of the project by minimizing
misunderstandings, reducing rework, and ensuring that the final system meets stakeholder
expectations.
Fig. 1. Web Design Developmental Framework
The second phase of the framework is that to gather a requirement need especially by the client
or user of the portal or website. In this phase a few requirements have been proposed in order to
develop the portal [12]. The phase is known as analysis. Next phase will be the design of all the
requirement needed. The fourth stage is implemented and followed by testing and maintenance
phase of the phase five and six of the developmental framework.
The important stage of the development process would be the design phase [13].These would
include a few diagrams such as use case (US) and entity relationship diagram (ERD) of the alumni
portal. Figure 2 on the next page, display the use case of the system or portal. The use case diagram
is a model of how different types of users interact with the system to solve a problem. As such, it
describes the goals of the users, the interactions between the users and the system, and the required
behaviour of the system in satisfying these goals.
In this case, we have two categories of user of the portal which are alumni itself and alumni
administrator. In term of software and hardware requirement of the portal, this alumni portal has
been developed by using Google Site as a wireframe and phpMyAdmin as their database.
PhpMyAdmin is a free and open-source administration tool for MySQL and MariaDB. As a portable
web application written primarily in PHP, it has become one of the most popular MySQL
administration tools, especially for web hosting services. Besides that, phpMyAdmin offers a range
of features that simplify database management tasks, enhance accessibility, and provide a user-
friendly interface for both beginners and experienced database administrators.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
10
Fig. 2. Use Case Diagram
Figure 3 demonstrates the entity relationship diagram which is another requirement necessary for
the alumni portal. Entity relationship diagrams (ERD) provide a visual starting point for database
design that can also be used to help determine information system requirements throughout the
development framework. It includes a conceptual data model, which lacks specific detail but provides
an overview of the scope of the project and how the data sets relate to one another.
Nonetheless, a logical data model, which is more elaborate than a conceptual data model, reveals
specific attributes and connections among data points. While a conceptual data model does not need
to be designed before a logical data model, a physical data model is based on a logical data model.
The implementation phase is where the portal or website been developed based on the
requirement and design from the previous step. This phase is a crucial stage in the software
development life cycle where the actual system is developed based on the requirements gathered
during the analysis phase. It involves the translation of design specifications into a functional and
operational system. Next will be the testing and integration phase which is the action taken where
all the function in the portal has been tested such as button, linkage and text or image display. The
maintenance phase is a last activity and vital process in most development framework where it is a
challenge for the developer in term of to handle all sorts of things.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
11
Fig. 3. Entity Relationship Diagram (ERD)
Apart from that, the research also explores the aesthetic features of responsive web design for
the portal. According to [14] responsive design allows software developers to build a Web page that
can dynamically adapt to the size of the devices. This development philosophy enables the rendering
of Web pages in a fast and optimized way, ensuring a good user experience on mobile devices, tablet
and desktop [14]. Thus, one of the most popular techniques is the responsive Web design, which is a
technique that allows a website to adapt to the device where a page is being accessed (e.g., desktop,
laptop, tablet or a smartphone). According to [15], the responsive web design solves the compatibility
problems of web pages displayed at different resolutions, different platforms, and different screen
sizes, and also brings high-quality experience to users.
Moreover, responsive configuration implies keeping up the same look and feel of site for various
gadgets with no real distinction [16]. This could help the client to effectively get to the information
from various gadgets with no many-sided quality to comprehend the stream of data and yield of the
data. Clients need not pick a specific gadget to get to the data from the site. According to [17] the
benefits of responsive web design include it can easily adapt to the display on any device, the content
accessibility, visibility and readability and no need to resize website pages on the used devices
horizontally or vertically. Besides that, it can provide necessary savings without no need for creating
a separate website for mobile devices. That sound good. A design is considered to be responsive if it
uses these three points which is flexible grid, flexible images and media, and also media queries [18].
Hence, responsive design promotes a specific way of implementing interfaces that is however
difficult to apply to existing web sites without major reengineering [19,20].
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
12
3. Results
This section will deliberate the result from the developmental framework that has been discussed
in the previous part. It then follows a screenshot of a responsive web for the portal. The finding of
this research is that when the testing phase has been completed in the development framework.
Figure 4 portrays the main page of the alumni portal. Meanwhile Figure 5 depicts the interface for
the alumni (user) to register into the portal.
Fig. 4. Main page of Alumni Portal
Fig. 5. Alumni (User) Registration page
Once the alumni (user) enrol into the portal, they will receive a notification through email
immediately upon registration completed. This will ensure that the user acknowledges that the
session has been done.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
13
Figure 6 and Figure 7 illustrates some of another interface of the Alumni Portal which is About Us
and Graduate Employability page. They were also a linkage to other website such as SKPG system for
the page.
Fig. 6. About Us page
Fig. 7. Graduate Employability page
In addition to the user, the administrator also plays a significant role in the Alumni Portal. Figure
8 depicts the interface of admin in the portal. Admin is a person who can manage the alumni (user)
data in the portal. A few tasks can be handled by an administrator of the portal such as to add, delete
and edit alumni data in the system.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
14
Fig. 8. Administrator page
Figure 9 show the interface where the administrator of the portal can view, edit, add or delete the
alumni data in the database. These could give the admin of the system a priority towards the Alumni
Portal.
Fig. 9. Administrator view
The benefits of a responsive web design are numerous and contribute to an enhanced user
experience across various devices. A responsive web design is essential for delivering a consistent
and optimal user experience. It will also be improving reach, reducing costs, and adapting to the ever-
evolving landscape of digital devices. The responsive web design in this study is to certify that the
website can adapt with the cross-browser compatibility approach. This is to ensure the compatibility
with major web browsers such as Chrome, Firefox, Safari, Edge, etc. to provide a consistent
experience for all users. For clarification Figure 10 depicts the view of the portal via another device
such as tablet PCs and smart phone. Figure 11 also depicts on how the menu in the portal can be
viewed and select by the users.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
15
(a) (b)
Fig. 10. Figure (a) Tablet view and (b) Phone view
(a) (b)
Fig. 11. Figure (a) Tablet - Menu view and (b) Phone - Menu view
4. Conclusions
As a conclusion, the finding of this research is that the implementation of an Alumni Portal for
University Poly Tech Malaysia was successful. The development framework that has been explored
in order to proceed with the implementation of the portal thoroughly gives an impact on this research
outcome. The development is a crucial and strategic initiative for fostering a strong and engaged
community of graduates. Through this digital platform, alumni can seamlessly connect, collaborate,
and contribute to the growth and success of both the institution and its graduates. The benefits of
such a portal are manifold, ranging from networking opportunities and knowledge sharing to
mentorship programs and professional development resources.
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
16
By providing a centralized hub for alumni activities, the portal facilitates communication,
encourages collaboration, and strengthens the bond between the institution and its graduates. This,
in turn, can lead to increased support for the alma mater in terms of financial contributions, industry
partnerships, and recruitment opportunities.
Additionally, the Alumni Portal serves as a valuable tool for the institution to stay connected with
its graduates, gather feedback, and enhance the overall educational experience. It becomes a
dynamic platform that evolves with the changing needs of the alumni community, ensuring its
relevance and effectiveness over time. Nevertheless, more explorations are needed in order to help
with successful implementation of the portal in term of new software and platform and also skill and
training involved.
Other than that, implementing a responsive web design for an Alumni Portal is a strategic and
imperative decision in today's digital landscape. The adaptability of such a design ensures a seamless
and user-friendly experience across various devices, catering to the diverse preferences and lifestyles
of alumni members. By embracing responsiveness, the alumni portal becomes more accessible,
enhancing user engagement, satisfaction, and retention.
The benefits of a responsive web design extend beyond mere aesthetics. It fosters a sense of
inclusivity, allowing alumni to connect with their alma mater effortlessly, regardless of the device
they choose. This adaptability is particularly crucial as users increasingly access online platforms
through smartphones, tablets, and various screen sizes.
Moreover, a responsive Alumni Portal positively impacts the institution's image by showcasing a
commitment to technological advancements and user-centricity. It reflects a forward-thinking
approach that aligns with the evolving expectations of alumni, reinforcing the institution's dedication
to staying connected with its graduates.
Acknowledgement
This research was funded by an internal grant. We would like to thank the University Poly Tech
Malaysia UPTM for the funding and support throughout the research.
References
[1] Bista, Baibhav, Aman Shakya, Basanta Joshi, Anusandhan Pokhrel, Lumanti Dangol, Mohit Kedia, and Daya Sagar
Baral. "An Alumni Portal and Tracking System." Journal of the Institute of Engineering 16, no. 1 (2021).
https://doi.org/10.3126/jie.v16i1.36529
[2] Cordova, R., R. L. Maata, and F. E. R. D. I. N. A. N. D. Epoc. "A model and framework for alumni tracking and
information system." International Journal of Engineering Research and Technology (IJERT) 8 (2020): 2321-2063.
[3] Khan, Nayyar Ahmed, Ahmed Masih Uddin Siddiqi, and Mohammad Ahmad. "Development of Intelligent Alumni
Management System for Universities." Asian Journal of Basic Science & Research 3, no. 2 (2021): 51-60.
https://doi.org/10.38177/AJBSR.2021.3206
[4] Jaafar, Nurulaini, Siti Rohani Mohd Nor, Siti Mariam Norrulashikin, Nur Arina Bazilah Kamisan, and Ahmad Qushairi
Mohamad. "Increase students’ understanding of mathematics learning using the technology-based
learning." International Journal of Advanced Research in Future Ready Learning and Education 28, no. 1 (2022): 24-
29. https://doi.org/10.37934/frle.28.1.2429
[5] Sadi, Sadi, Dyah Rachmawati Lucitasari, and Muhammad Shoqid Abdul Khannan. "Designing Mobile Alumni Tracer
Study System Using Waterfall Method: an Android Based." International Journal of Computer Networks and
Communications Security 7, no. 1 (2015): 17-26.
[6] Masrom, Maslin, Mohd Nazry Ali, Wahyunah Ghani, and Amirul Haiman Abdul Rahman. "The ICT implementation
in the TVET teaching and learning environment during the COVID-19 pandemic." International Journal of Advanced
Research in Future Ready Learning and Education 28, no. 1 (2022): 43-49. https://doi.org/10.37934/frle.28.1.4349
[7] Zainon, Zainatul Fakih, and Sharifah Juliana Yaakub. "Keberkesanan Penggunaan Alat Bantu Mengajar 4U Plexiglass
Rack Server di dalam Pengajaran dan Pembelajaran bagi Pelajar Sistem Komputer dan Rangkaian, Kolej Komuniti
Jelebu: The Effectiveness of using 4U Plexiglass Rack Server Teaching Aids in Teaching and Learning for Computer
Semarak International Journal of Applied Sciences and Engineering Technology
Volume 3, Issue 1 (2024) 7-17
17
Systems and Networking Students, Jelebu Community College." International Journal of Advanced Research in
Future Ready Learning and Education 28, no. 1 (2022): 9-16. https://doi.org/10.37934/frle.28.1.916
[8] Elakiya K. "A Comprehensive Review of Web Designing and Web Development: Concepts, Practices and Trends."
International Journal of Research Publication and Reviews 4, no. 4 (2023): 2180-2182.
https://doi.org/10.55248/gengpi.4.423.36019
[9] West, Adrian W. Practical Web Design for Absolute Beginners. Colyton: Apress, 2016. https://doi.org/10.1007/978-
1-4842-1993-5
[10] Ergasheva, Shokhista, and Artem Kruglov. "Software development life cycle early phases and quality metrics: a
systematic literature review." In Journal of Physics: Conference Series, vol. 1694, no. 1, p. 012007. IOP Publishing,
2020. https://doi.org/10.1088/1742-6596/1694/1/012007
[11] Hossain, Mohammad Ikbal. "Software Development Life Cycle (SDLC) Methodologies for Information Systems
Project Management." International Journal For Multidisciplinary Research 5, no. 5 (2023): 1-36.
https://doi.org/10.36948/ijfmr.2023.v05i05.6223
[12] Flavian, Carlos, Raquel Gurrea, and Carlos Orus. "Web design: a key factor for the website success." Journal of
Systems and Information Technology 11, no. 2 (2009): 168-184. https://doi.org/10.1108/13287260910955129
[13] Kuzic, Joze, George Giannatos, and Tanja Vignjevic. "Web design and company image." Issues in Informing Science
and Information Technology 7, no. 1 (2010): 99-108. https://doi.org/10.28945/1195
[14] Almeida, Fernando, and José Monteiro. "The Role of Responsive Design in Web Development." Webology 14, no.
2 (2017).
[15] Li, Nian, and Bo Zhang. "The design and implementation of responsive web page based on HTML5 and CSS3."
In 2019 International Conference on Machine Learning, Big Data and Business Intelligence (MLBDBI), pp. 373-376.
IEEE, 2019. https://doi.org/10.1109/MLBDBI48998.2019.00084
[16] Dhobale, Shubhangi, Bhagyashri Wakade, and Vaibhav Ghanode. "A Review Paper on Implementation of Website
Using Responsive Web Design for Resolution of Civilians Complaints."
[17] Baturay, Meltem Huri, and Murat Birtane. "Responsive web design: a new type of design for web-based
instructional content." Procedia-Social and Behavioral Sciences 106 (2013): 2275-2279.
https://doi.org/10.1016/j.sbspro.2013.12.259
[18] Nebeling, Michael, and Moira C. Norrie. "Responsive design and development: methods, technologies and current
issues." In Web Engineering: 13th International Conference, ICWE 2013, Aalborg, Denmark, July 8-12, 2013.
Proceedings 13, pp. 510-513. Springer Berlin Heidelberg, 2013. https://doi.org/10.1007/978-3-642-39200-9_47
[19] Parlakkiliç, Alaattin. "Evaluating the effects of responsive design on the usability of academic websites in the
pandemic." Education and Information Technologies 27, no. 1 (2022): 1307-1322. https://doi.org/10.1007/s10639-
021-10650-9
[20] Babu, M., K. Sandhiya, and V. Preetha. "Design of Alumni Portal with Data Security." In 2021 Second International
Conference on Electronics and Sustainable Communication Systems (ICESC), pp. 1-7. IEEE, 2021.
https://doi.org/10.1109/ICESC51422.2021.9532986
