Publication Search

This research aims to design and build a web-based interactive photo booth application with layout, filter, and frame features using object-oriented programming concepts. The application was developed as an alternative solution to digital photo booths that can be accessed directly through a web browser without the need for additional installation. The system development method used is the Waterfall method which includes the stages of needs analysis, system design, implementation, and testing. The technology used in application development includes HTML, CSS, JavaScript, and the use of Web APIs to access the device's camera and process images in real-time. The results of the study show that this web-based photo booth application is able to run well on modern browsers, providing photo capture features, layout settings, filter application, and interactive frame addition. The implementation of object-oriented programming results in a more modular code structure, is easy to understand, and facilitates the development and maintenance of future systems. Thus, the developed application can become a practical, flexible, and easy-to-use digital photography medium.

The SIAP Application is an innovation developed as a solution to support the archiving business process in the Planning Bureau. Currently, most employees still use computers and a web-based cloud system developed by Pusdatin using the PHP programming language as a storage medium for files that are no longer actively used and are categorized as dynamic archives. However, the cloud system does not have a well-structured archive management system, which often causes difficulties when employees need to retrieve archived files. As a result, employees must search for files manually by checking archived documents one by one in the cloud. This process is time-consuming and may lead to problems such as difficulties in finding files and the risk of data loss. Based on these conditions, the SIAP Application was developed to improve the effectiveness and efficiency of archive management in the Planning Bureau.The SIAP Application has an advantage in the archiving process, where employees can easily search for archives using the letter number or subject that has been entered into the system. The system will automatically display the required archive, making the retrieval process faster, more accurate, and more organized compared to the previous cloud system.The development of the SIAP Application uses PHP and HTML as the programming languages, with Bootstrap and Tailwind CSS as the user interface frameworks, and MySQL as the database. The system development method used is the Waterfall model, problem analysis is carried out using the PIECES method, and system testing is conducted through black-box testing and the System Usability Scale (SUS) to measure system usability.

This community service activity aims to enhance participants' digital competency through responsive web design training conducted using integrated webinar and workshop methods. The background of this activity is based on the increasing need for adaptive web development skills across various devices to support digital personal branding. This activity involves university students and the general public and is conducted online utilizing modern communication platforms. The implementation method consists of preparation, implementation, and evaluation stages. In the implementation stage, participants attend webinar sessions to strengthen conceptual understanding of responsive web design principles, followed by workshop sessions that emphasize hands-on practice in website creation using HTML, CSS, and JavaScript. Evaluation is conducted through pre-tests and post-tests to measure program effectiveness. The results show a significant increase in participants' digital competency with an average score increase of 55.8%. These findings indicate that the integration of webinar and workshop methods is effective in improving participants' conceptual understanding and technical skills. This activity is expected to serve as a model for community service based on applicable and sustainable digital competency development.

This community service activity was carried out to overcome the problem of open and uncontrolled internet networks at SMK Islamiyah Serua. This condition poses security risks as well as inefficient bandwidth usage. The solution offered is the implementation of a network gateway system with a user-friendly web-based login portal, so that internet access can be limited only to educators through an authentication mechanism. The implementation method includes needs analysis, system design, implementation using MikroTik RouterOS and HTML/CSS/JavaScript-based web portals, system trials, and socialization to schools. The results showed a significant improvement in network security, bandwidth usage efficiency, and ease of access for teachers. In addition, this activity also increases educators' understanding of the importance of network security in supporting the learning process. The implementation of this system provides sustainable benefits for schools, both from a technical and educational perspective, because it is able to create a safer and more controlled digital environment. Thus, this community service activity not only solves technical problems, but also contributes to improving the quality of educational services at SMK Islamiyah Serua.

The rapid development of the sea transportation industry produces a massive and complex volume of transaction data, requiring strategic management to support managerial decision-making. This research aims to implement the Executive Information System on SeaPass in order to evaluate the performance of ship ticket sales. The research method uses data visualization with a two-level drill-down mechanism, which allows the presentation of information hierarchically from general summaries to specific details. The methodological stages include needs analysis, user interface (UI) design using Figma, front-end implementation with HTML, CSS, and JavaScript, database integration, and system testing through Black Box Testing. The results showed that the SIE implementation successfully integrated operational data, including schedules, ships, and manifests, into an interactive dashboard. The two-level drill-down feature provides the ability for executives to identify operational anomalies and market fluctuations in real-time. In conclusion, the system significantly enhances executive data analysis capabilities, transforming complex transaction data into accurate strategic information, thereby supporting more precise business decision-making and adaptive to the dynamics of the marine transportation market.

Flooding is one of the most recurrent natural disasters in Central Java Province, particularly during the rainy season. Diverse geographical characteristics, high rainfall intensity, and rapid urban development contribute to the region’s high vulnerability to flood hazards. According to the Central Java Statistics Agency, a total of 414 flood events and 407,784 affected victims were recorded between 2019 and 2021. This study aims to develop a web-based Geographic Information System (GIS) capable of mapping the spatial distribution and impact levels of floods across Central Java. The methodology includes collecting flood event data from the Central Java Statistics Agency, processing spatial data such as administrative boundary shapefiles, performing attribute integration between spatial and non-spatial datasets, and creating thematic maps using QGIS. The visualization outputs were exported into an interactive web format using the qgis2web plugin and subsequently integrated into a website developed with HTML, CSS, and JavaScript. The results show that the GIS system successfully visualizes flood-prone areas, identifies regions with high flood intensity, and enables users to explore detailed information through interactive digital maps. Additional website features—such as historical flood data, statistical summaries, and descriptive impact indicators—enhance the system's usefulness for disaster analysis. This study demonstrates the crucial role of GIS in supporting disaster mitigation, spatial planning, and policy evaluation related to flood management. Future research is recommended to incorporate more recent datasets and additional non-spatial variables such as rainfall intensity and floodwater depth to improve the system’s analytical accuracy and comprehensiveness.

The rapid development of the sea transportation industry produces a massive and complex volume of transaction data, requiring strategic management to support managerial decision-making. This research aims to implement the Executive Information System on SeaPass in order to evaluate the performance of ship ticket sales. The research method uses data visualization with a two-level drill-down mechanism, which allows the presentation of information hierarchically from general summaries to specific details. The methodological stages include needs analysis, user interface (UI) design using Figma, front-end implementation with HTML, CSS, and JavaScript, database integration, and system testing through Black Box Testing. The results showed that the SIE implementation successfully integrated operational data, including schedules, ships, and manifests, into an interactive dashboard. The two-level drill-down feature provides the ability for executives to identify operational anomalies and market fluctuations in real-time. In conclusion, the system significantly enhances executive data analysis capabilities, transforming complex transaction data into accurate strategic information, thereby supporting more precise business decision-making and adaptive to the dynamics of the marine transportation market.

The rapid development of information technology has encouraged organizations to implement computerized systems to improve document management efficiency and security. At PT Petrokimia Gresik, import document archiving was previously conducted using Google Drive and physical storage, which caused issues such as limited access control, risk of data loss, and slow document retrieval during audits. This study aims to design and develop a web-based Import Document Archiving Information System using the waterfall development method. The system was built using HTML, CSS, JavaScript, PHP, and MySQL. The results indicate that the system improves archiving efficiency, enhances data security, accelerates document search, and supports structured monitoring and validation processes.  

As one of the graduation criteria at Nahdlatul Ulama University Lampung, student activity point management requires a reliable system. Currently, the manual mechanism implemented still encounters obstacles in the form of data inaccuracy and a lengthy verification process. This research aims to build a website-based Student Activity Point Information System to improve the quality of data management. Software development was carried out using the Waterfall model, starting from the analysis stage, design using UML, technical implementation (HTML, CSS, PHP, MySQL), to the functional testing stage. Through this system, students can submit activities online, while the administrator can validate and print point reports automatically. Based on the results of the Black Box test, all features in the system operate as designed. The presence of this system provides a more accurate and efficient solution, making it a credible support tool for the student affairs department. This system is expected to provide a more efficient and accurate solution in student activity point management, as well as support smooth administration and improve the quality of student affairs department services.

This research aims to design and build a letter archive information system at the KOFIPINDO Law Office to improve the effectiveness and efficiency of document management. The manual filing system that has been used so far poses various obstacles, such as search delays, the risk of losing documents, and low storage accuracy. To overcome these problems, this study applies the Waterfall System Development Life Cycle (SDLC) model in the process of designing and building the system. Web-based technologies used include PHP, HTML, CSS, Bootstrap, and MySQL. The results of the study show that the developed letter archive information system is able to simplify the process of storing, searching, and managing incoming and outgoing letters in a faster, structured, and safer manner. The implementation of this system not only improves administrative performance, but also strengthens accountability and supports the need for professional legal documentation within the KOFIPINDO Law Office. Thus, this web-based mail archive information system can be a strategic solution in modernizing legal document management.

The rapid development of information technology has encouraged various educational institutions, including non-formal education providers, to utilize digital media as an effective means of information dissemination and communication with the wider community. Taman Pendidikan Al-Qur’an (TPQ) Jabal Annur, located in Tambun Selatan, Bekasi Regency, still experiences limitations in delivering information to the public due to the absence of a website-based information medium. Currently, information related to the institutional profile, learning activities, schedules, and official announcements is conveyed through conventional methods, which are less effective and have limited reach. Therefore, this community service activity aims to assist TPQ Jabal Annur in developing a simple, functional, and accessible information website using HTML and CSS, as well as deploying it through the GitHub Pages platform. The implementation method consists of several stages, including initial observation to identify partner needs, website interface and content design, website development, and implementation and deployment. The result of this activity is an official TPQ website that can be accessed online and functions as a centralized information medium for students, parents, and the surrounding community. The availability of this website is expected to enhance the effectiveness, accuracy, and accessibility of information delivery, as well as to support the digital transformation process in non-formal religious education institutions in adapting to the demands of the digital era.

Kadi Pada Village is one of the villages that still manages population data manually, which often causes difficulties in recording, searching, and reporting population data. The manual process is also prone to input errors, data duplication, and lost documents. Therefore, a web-based information system is needed that can help village officials manage population data more effectively and efficiently. This study aims to design and build a web-based population data processing system that can be used by village officials to record, update, and present population data digitally. The methodology used in developing this system is the waterfall method, which includes the stages of needs analysis, system design, implementation, and testing. The technologies used include HTML, CSS, PHP, and MySQL as databases. The result of this design is an information system that has main features such as population data management, family data management (Family Card), recording population mutations (birth, moving, death), and making reports in digital format. With this system, it is hoped that the population administration process in Kadi Village will be faster, more accurate, and more organized.

This study designs and implements Bank Jali, a web-based bank queue system that applies a queue data structure with the First In First Out (FIFO) principle to improve service efficiency. The research and development method includes requirement analysis, design, implementation, testing, and evaluation. The application is built with HTML, CSS, and JavaScript, storing queue data temporarily through localStorage so the entire process runs client-side without a dedicated server. Key features include online queue registration, digital ticket generation, real-time status monitoring with waiting-time estimation, and an admin dashboard for managing teller and customer service queues. Testing shows the system operates reliably, processes queues according to FIFO, and provides a practical, lightweight user experience across devices.

The current advancements in information technology have brought significant benefits to the industrial world, particularly in the automotive sector. Website development in business and computer- based academic information system development are among the utilization of information technology. With information technology, Carsentro dealer data can be processed quickly and easily, enabling the presentation of accurate, fast, transparent, and efficient administrative information reports. The purpose of developing this system is to address existing issues in the old system by creating an administration information system for Carsentro dealer rental payment data. The implementation of a new system for Carsentro dealer data can improve record-keeping accountability, thus avoiding manual input recording errors that cannot be monitored by dealers renting space at Carsentro. In the development of this administrative information system, the data to be inputted includes information on when dealers joined the Carsentro ecosystem, the amount of monthly rental fee invoices, payment data, and dealer debt or receivables data. The software used is DBMS (Database Management System) MySql as the data storage medium, while programming languages such as PHP, CSS, JavaScript, and HTML are used for interface development. This aims to facilitate both users and administrators in managing data.

The development of digital technology has had a significant impact on the health sector, including eye examination services. This study discusses the development and implementation of a Digital Optoscope-based Eye Diagnostic application designed using a web platform (HTML). This application provides two main features: visual acuity testing and astigmatism testing, which can be accessed independently by users through digital devices such as laptops, tablets, or mobile phones. Users only need to follow the visual instructions presented interactively on the screen, then perform the test according to the procedure. The testing method is carried out by displaying font size settings according to the Snellen chart standard and radial astigmatism patterns. The results of each test session are automatically recorded and can be saved for further analysis. In addition, users can perform repeated tests to improve the accuracy of self-diagnosis, and the system will provide lens type recommendations based on the measurement results obtained. The trial results show that this application is able to provide convenience, efficiency, and initial accuracy in the process of examining vision disorders. This is very useful, especially for people in remote areas or with limited access to professional eye health services. Thus, the Digital Optoscope-based Eye Diagnostic application has the potential to be an innovative solution for the early digital detection of vision disorders. This study recommends further development, particularly in clinical validation, testing on a wider sample size, and integration with electronic medical record systems to enhance its benefits in comprehensive public health services. Furthermore, collaboration with medical professionals is crucial to ensure diagnostic accuracy. With this approach, the app is expected to become a reliable tool for continuous eye health monitoring.

This study focuses on the development of an interactive web-based learning platform for Proportional-Integral-Derivative (PID) control systems, aimed at addressing the conceptual challenges faced by electrical engineering students when learning PID through conventional teaching methods. Despite its foundational role in control theory, PID remains difficult to grasp without practical visualization and hands-on experimentation. To bridge this gap, the research introduces a practical and accessible platform that enhances conceptual understanding through real-time simulations and physical interaction. The proposed system integrates key hardware components including an ESP-32 microcontroller, DC motor, rotary encoder, BTS 7960 motor driver, and I2C LCD. The platform’s web interface is built using HTML, Tailwind CSS, and JavaScript, enabling intuitive user interaction. Motor response data is captured via the ESP-32 and transmitted to the web interface using the WebSocket protocol, allowing users to instantly visualize system behavior as PID parameters (Kp, Ki, Kd) are adjusted. This dynamic feedback mechanism enables students to observe changes in system characteristics such as rise time, overshoot, and settling time in real time. To evaluate the platform’s feasibility, practicality, and educational effectiveness, beta testing was conducted among electrical engineering students using Likert-scale questionnaires. The results demonstrated that users were able to successfully interpret the impact of PID tuning on system performance. The average evaluation score reached 75.13%, indicating strong agreement regarding the platform’s educational value and its effectiveness in enhancing learning outcomes. In conclusion, the study affirms that the developed web-based platform offers a feasible, engaging, and pedagogically effective alternative to traditional learning approaches. By combining interactive simulations with physical experimentation, the platform significantly improves students’ understanding of PID control systems.

We designed and implemented a web-based inventory system to address challenges in managing inventory and financial data at Toko bangunan Mutiara. With high daily transaction volumes and a wide variety of products, manual recording often leads to errors, inaccuracies in inventory data, and difficulties in monitoring cash flow. To address this, we developed the system using the Agile/Scrum development model, which allows for flexibility and adaptation to user needs through the stages of Requirements, Design, Development, Testing, Deployment, and Review. The system was developed using web technology, including PHP and JavaScript for the backend, HTML and CSS for the frontend, and MySQL as the database system. The main features we implemented include two integration options: barcodes and unique product codes to simplify recording, automatic notifications when stock reaches the minimum level set by the system, and the ability to generate accurate reports. It is hoped that this research, which was designed to enhance operational efficiency in recording incoming and outgoing goods, provide flexible and accurate access to inventory data, and minimize errors in recording and inaccurate data, will be successful. The implementation of this system contributes to more accurate inventory management and supports better financial decision-making for Toko bangunan Mutiara.

 In today's digital era, efficient and accurate inventory management is crucial to support operational effectiveness in business sectors, including retail optics stores. Optik Retna, a retail optical business, previously utilized Microsoft Excel for stock management, which led to various limitations such as restricted multi-user access, risk of data loss, and lack of real-time reporting. To address these challenges, a web-based inventory system was designed and implemented using the Agile methodology. The system was developed using HTML, CSS, JavaScript, PHP, and MySQL, and includes key features such as inventory tracking, expense and return management, transaction recording, sales reporting, and user administration. The implementation results demonstrate that the system enhances work efficiency, simplifies the recording of incoming and outgoing goods, and supports faster and more accurate decision-making at Optik Retna. Therefore, this system provides a practical contribution to the digital transformation of small and medium-sized enterprises in the optical sector.

This research aims to develop an interactive web dashboard to support data analysis for vending machine sales. The dashboard is designed to facilitate the management of large datasets through intuitive visualizations and interactive features such as filtering, searching, and pagination. The development process involves several stages, including data collection, data cleaning, analysis, visualization, web design, implementation, and deployment using GitHub Pages. Technologies like HTML, CSS, JavaScript, Chart.js, and Grid.js are utilized to ensure efficiency and accessibility. The results of the research show that the dashboard effectively presents key information, such as sales trends, best-selling products, and payment method preferences, thereby supporting more accurate and data-driven strategic decision-making. However, the research has limitations in integrating predictive analytics. Future development is recommended to include predictive algorithms and test system performance on large-scale data. This solution is expected to contribute significantly to optimizing vending machine management and serve as a development model for similar applications in other business sectors.

The compulsive impact of human-caused climate change is now considered more of an environmental issue than a national security threat. The latest 2030 Agenda, the Sustainable Development Goals (SDGs), has a transformational vision to achieve universal literacy worldwide, including Indonesia. Addressing climate change is Goal 13 of 17 SDGs. This study uses a qualitative research method with a linear research strategy to develop hybrid-education media in the form of printed pamphlet media with Augmented Reality (AR) technology applications that run on the Web platform, namely WebAR. The procedure is triggered by the target image of the pamphlet, and the basic HTML structure uses the A-Frame 3D framework. This framework allows for 3D modeling and animation to be loaded into WebAR. This study shows that WebAR-based hybrid-education media can be used as an interactive means to study climate change issues and increase awareness and understanding of climate actions relevant to Goal 13 of the SDGs. The results also show that this media can increase public engagement in combating climate change issues.