Jurnal E-Komtek Vol. No. https://jurnal. politeknik-kebumen. id/index. php/E-KOMTEK p-ISSN : 2580-3719 e-ISSN : 2622-3066 Design and Implementation of a Website-Based Information System at SMK TI XYZ Miftahul Huda . Nanang Pradita. Rahmat Hidayat Department of Communication Science. Putra Bangsa of University. Indonesia, 54361 hudablue11@gmail. https://doi. org/10. 37339/e-komtek. Published by Politeknik Piksi Ganesha Indonesia Artikel Info Submitted: 29-05-2023 Revised: 15-06-2023 Accepted: 22-06-2023 Online first : 28-06-2023 Abstract The website is one of the information systems that must exist in the education The website is designed and built to be one of the means of delivering practical information and as a means of promotion for schools. This research uses the Waterfall method, which is included in the SDLC (Software Development Life Cycl. method category. The SDLC method refers to developing software systems using models based on well-tested methods. The waterfall method is generally used in software development, which begins with analyzing, designing, coding, testing, and maintenance. The result of designing the SMK website is implementing a website all users can access to get the information. In addition, the website is expected to help schools as an effective promotional media. Keywords: Vocational High School. Website. Waterfall Abstrak Salah satu system informasi yang harus ada dalam penyelenggaraan pendidikan yaitu Website dirancang dan dibangun dengan tujuan sebagai salah satu sarana penyampaian informasi yang efektif dan sebagai sarana promosi bagi sekolah. Metode dalam penelitian ini yaitu menggunakan yaitu metode Waterfall yang termasuk dalam kategori metode SDLC (Software Development Life Cycl. Metode SDLC mengacu pada proses pengembangan sistem perangkat lunak menggunakan model berdasarkan metode yang telah teruji dengan baik. Metode waterfall digunakan secara umum dalam pengembangan perangkat lunak yang secara runtut diawali dengan menganalisis, mendesain, pengkodean, pengujian, dan pemeliharaan. Hasil perancangan website SMK adalah implementasi website yang bisa di akses semua pengguna untuk mendapatkan informasi yang ada Selain itu website diharapkan membantu sekolah sebagai media promosi yang Kata-kata kunci: Sekolah Menengah Kejuruan. Website. Waterfall This work is licensed under a Creative Commons Attribution-NonCommercial 4. International License. A Miftahul Huda. Nanang Pradita. Rahmat Hidayat Introduction Information technology and the internet have brought significant changes in various aspects of life, including in the world of education. The purpose of information technology is to process information to help work by providing information and performing multiple tasks . Vocational High School is one of the spheres of education that requires an information system to support several activities, including information management. Vocational High School is a formal education unit that organizes vocational education. With the rapid development of technology today, one of the efforts in developing education is the Information Technology Vocational High School (SMK TI). Information Technology Vocational High School (SMK TI) is a secondary education level where students are prepared to be able to work or work directly in the field of information technology. The challenges and opportunities from this Vocational High School (SMK TI) development certainly require an information system. Information Systems are one of the tools to process data into information, then disseminate information to users quickly and precisely, and are used as a basis for decisionmaking . A website is one of the information systems that must exist in organizing education. Today computer and internet software application has increased, as well as web applications, internet browsers, and intranets . To disseminate information, companies use websites, the wider community and the world of education as a medium for carrying out various tasks or activities such as elearning, e-commerce, online transactions and others . A website is a domain with several pages of information that can be accessed . Website is one of the most effective means of delivering information today. Data dissemination using a website is needed to convey information widely and well . Websites can contain information, images, video, audio, and interaction between users and the website. Some information in an educational institution is essential to inform the entire academic community so that every process can run as planned. Website is one form of utilization of information technology that is very relevant and effective in disseminating information, promoting products or services, and facilitating interactions and transactions in the digital era. The website can also be used as a medium to build the branding and image of an organization or individual. A website is a promotional media in the form of several pages used to disseminate information that can be accessed as long as it is connected to the internet network in the world . A Miftahul Huda. Nanang Pradita. Rahmat Hidayat Interactions and transactions on a website will provide their own experience for users so that users will feel interested in accessing some of the information on it. An attractive website will undoubtedly have a positive value on an organization or individual so that people will know it better. A website as a system that has high usability will be used for a long time. Meanwhile, a website as a system with low usability will eventually be ignored by users because users do not feel the system's benefits . Websites in education have an essential role in disseminating information to all relevant stakeholders, such as students, parents, teachers, staff, and the wider community, in the form of information on activity programs, school achievements, regulatory policies, etc. From the importance of websites in education, one that requires a website is SMK TI XYZ. Currently, information and branding facilities to improve the institution's image and implemented by SMK TI XZY have not been maximally carried out using web-based services. SMK TI XZY provides several services to existing stakeholders using makeshift facilities. Information is not maximized. A website is essential so that this educational organization can maximally carry out several activities with information easily obtained through the website. The existence of website needs at SMK TI XYZ requires website development to provide information and services optimally to all existing stakeholders. This research is titled "Design and Implementation of Website-Based Information Systems at SMK TI XZY. " SMK TI XZY, as an educational organization, can maximize the website to improve the organization's brand or image and provide information services that all users quickly access. Method This research uses qualitative methods. The qualitative approach is a research method focusing on measuring quantity and relationships between attributes using strict procedures, or process flows . This research uses the Waterfall method, which is included in the SDLC (Software Development Life Cycl. method category . The SDLC method refers to developing software systems using models based on well-tested methods . SDLC is the process of understanding how an information system can support a business by designing, building, and delivering it to users . The waterfall method is generally used in software development, which begins with analyzing, designing, coding, testing, and maintenance. The waterfall method is linear from the A Miftahul Huda. Nanang Pradita. Rahmat Hidayat initial process of system development from the planning stage to the maintenance stage, which is the final stage of system development . The Waterfall method can be classified into several stages based on the previous explanation, namely: Needs Analysis and Definition At this stage, an analysis of system needs is carried out based on problems and an analysis of current opportunities. Other needs analysis based on data collection through literature study, interviews, observation and documentation. This stage will produce documents according to the user needs to be a reference in system development . System Design This stage is carried out system design by determining the input and output processes at the system level and in subsystems based on the analysis that has been done. System design is carried out based on needs analysis with system architecture design. UML (Unified Modeling Languag. design in the form of Use Case Diagrams and interface design. System Development At this stage, the process of making a system is carried out based on predetermined design results. The pre-made system design is translated into HTML. CSS, and Javascript programming languages and PHP and MySql programming languages. The translation is implemented to produce a system that users can use with an attractive and easy-to-use appearance, and data can be appropriately managed using database processing using MySql. System Integration and Testing At this stage, system testing is carried out at the implementation stage and integrated into the system as a whole. System testing is carried out as a whole system to assess or recognize the possibility of failure in the system. Testing in this study used the Blackbox testing method. Blackbox testing is software testing, a test of a system's functionality that does not refer to the internal structure or does not require special knowledge of program code or user knowledge . Maintenance This stage is the final stage, where users can implement and use the system. Maintenance is carried out by ensuring the system can run properly and continuous monitoring. Waterfall method in developing the SMK TI XYZ website is presented on Figure 1. A Miftahul Huda. Nanang Pradita. Rahmat Hidayat Figure 1. Waterfall Model This research is divided into three stages: pre-development data collection, development and implementation, and post-development data collection . Results and Discussion Needs Analysis At the needs analysis stage, researchers identify problems and create a system design from the data obtained. Data collection is done by observation, interviews, literature studies and The design is to fulfill the solution to the existing problems. The needs analysis obtained the need for a user or admin who can access and manage existing data and information. While the needs of users or ordinary users such as teachers, students, student guardians, and the general public can only access the website to get information. 2 Desain System At this stage, design a website using a system architecture. UML (Unified Modeling Languag. design in Use Case Diagrams and interface design. The following is the website design for SMKTI XYZ: Website Architecture Figure 2. Website Architecture A Miftahul Huda. Nanang Pradita. Rahmat Hidayat Figure 2 shows the needs analysis of the website architecture that will be created. Users access the website using the HTTPS (HyperText Transfer Protocol Secur. Users request data or information by accessing a website connected to the internet to get data or information from the server. The request is then responded to until the user gets the expected information. Use Case Diagram Figure 3. Use Case Diagram Based Figure 3, it can be explained that there are two main actors, namely the user and the admin. Users here are ordinary users who are only limited to access to information on the website but cannot manage it. At the same time, the admin is an actor who can access all the data on the website and can handle it. Interface Design The following is the interface design of the SMK TI XYZ website using the Balsamiq application on each page of the website to be built is Figure 4. Figure 4. The Interface Design of the Website: Home A Miftahul Huda. Nanang Pradita. Rahmat Hidayat The Home page illustrates that the main page contains the latest information, and there are slides of images that are constantly changing. The home page also includes the main page that contains menus of options that users can access to get the information they need. Figure 5. The Interface Design of the Website: Profile The profile page is designed by providing several sub-menu options: the School Profile sub-menu, the Teachers and Employees sub-menu, and the Organizational Structure sub-menu. This page contains information related to the school in general. Figure 6. The Interface Design of the Website: Student Affairs The Student Affairs page is designed by providing several sub-menu options, namely the PSB Info sub-menu and the Extracurricular sub-menu. This page contains information related to new student admission information and student extracurricular activities. Figure 7. Website Interface Design: Information A Miftahul Huda. Nanang Pradita. Rahmat Hidayat The Information page is designed by providing several sub-menu options, namely the School Agenda sub-menu and the Student Materials and Assignments submenu. This page contains information related to the school agenda and student activities in the form of materials and assignments. The interface design of the website: expertise competency is presented Figure 8. Figure 8. The Interface Design of The Website: Expertise Competency The Expertise Competency page is designed by providing several sub-menu options, namely the sub-menu Teknik Komputer Jaringan (TKJ), sub-menu Multimedia, sub-menu Teknik Kendaraan Ringan (TKR). This page contains information related to the Study Program at SMK. The interface design of the website: contact us is presented on Figure 9. Figure 9. The Interface Design of the Website: Contact Us A Miftahul Huda. Nanang Pradita. Rahmat Hidayat The Contact Us page is designed to provide School Address information, and users can send a 3 System Development The website is built using the PHP programming language at the stage of making this The following are the results of creating a website SMK TI XYZ. Main page is presented in Figure 10. Figure 10. Main Page The main page contains the primary information of the website. This page displays banner slides and news options. Profile page is presented in Figure 11. Figure 11. Profile Page The Profile page contains information on the school profile, teachers and employees, and the organizational structure. Student affairs is presented on Figure 12. Figure 12. Student Affairs Page A Miftahul Huda. Nanang Pradita. Rahmat Hidayat The Student Affairs page contains information on new student admissions and student extracurricular activities. Information page is presented on Figure 13. Figure 13. Information Page The Information page contains several school agendas and learning activities, such as material information and student assignments. Information page is presented on Figure 14. Figure 14. Information Page The Expertise Competency page contains information on the study programs offered by the Study program Teknik Komputer Jaringan. Multimedia And Teknik Kendaraan Ringan. Contact us page is presented on Figure 15. Figure 15. Contact Us page A Miftahul Huda. Nanang Pradita. Rahmat Hidayat The Contact Us page contains the school address information page, and visitors can interact by sending a message to the manager. 4 System Integration and Testing The system integration and testing process in this research is in the form of website system integration with the database server. System testing is done with black box testing. This stage is carried out to find deficiencies or errors in the system. Black box testing is a process of testing software in terms of functional specifications without testing an application's design or program code. The black box method is done to ensure bug-free on the system. Tests are performed to find inappropriate functions, interfaces, data structures, and performance errors . Black box testing results as a user or website user is presented on Table 1. Table 1. Black Box Testing Results as a User or Website User Test Conclusion Menu Home Valid Menu Profil Valid Menu Kesiswaan Valid Menu Informasi Valid Menu Kompetensi Keahlian Valid Menu Hubungi Kami Valid Black box testing results as admin is presented on Table 2. Table 2. Black Box Testing Results as Admin Test Conclusion Menu Login Valid Menu Pengelolaan Valid Menu Mengubah Sistem Valid Menu Mengelola Password Valid Menu Tambah User Valid Logout Valid 5 Maintenance At this stage the system after all methods or stages of development have been carried out, it is necessary to manage or maintain the system that has been developed. A Miftahul Huda. Nanang Pradita. Rahmat Hidayat Conclusion Based on the analysis process of the development and implementation of the SMK TI XYZ website, it can be concluded that: SMK TI XYZ uses the website to provide information to the entire academic community and the general public and as a promotional medium. The website was developed using the waterfall method SMK TI XYZ website can be used according to the needs References