Project Design
The project design will be developed using web technologies, such as PHP, My
SQL, and Bootstrap. The web application will be developed under Internet
development, and Xampp will be used as a database development application.
User Interface Design
Figure 3. When using the Tibao Elementary Web Based Student Result
System, it displays the login. To access the system, the administrator must enter the
correct username and password in this form. In order to log in to the system, the
administrator will need to enter the correct username and password combination. In
order to access the system's data and functions, the user will create their own
usernames and passwords.
Fig. 3. The Login Form.
Figure 4. The dashboard is the homepage of the system administrator’s
Administrator. The admin can access and manage records found in the dashboard.
The dashboard mainly displays the following information: Total Students, Total
Classes, and Total Subjects.
Fig. 4. Dashboard.
Figure 5. A simple interface for viewing class records, though with a few flukes like
displaying 10 to 100 entries and pagination showing 1 out of 4 entries. The search
filters include Level, Section, and an Action option. Basic navigation (Previous/Next)
with visible page number, a feature user frequently requested during testing.
Fig. 5. Student’s Classes form design.
Figure 6. Displays the subjects and its description.
Fig. 6. Student’s Subjects form design.
Figure 7. Shows the design of the new student registration form.
Fig. 7. New Student Registration Form
Figure 8. This cleanly designed interface displays student records in a structured
format, including Student ID, Name, and Class, with an Action column. The sample
data shows two entries Fatima D. Villanueva (Grade 2-B) and Ivan G. Palma (Grade
3-A) with pagination confirming all entries are visible ("Showing 1 to 2 of 2").
Fig. 8. New Student Registration Form
Figure 9. Shows a functional interface for viewing student academic performance,
displaying key details like Student Code, Name, Class, Subjects Count, and Average
Score in a clean layout. The current view lists two Grade 3-A students Fatima D.
Villanueva (87.67 avg) and Ivan G. Palma (90.33 avg) with accurate pagination ("1 to
2 of 2 entries").
Fig. 9. Students’ results form design.
Figure10. This screen serves as a detailed academic record viewer, displaying
individual student results with subject-wise marks and calculated averages. There is
also an included print button option.
Fig. 10. Result Display Interface
Figure 11. Provides a streamlined form for educators to input new academic results.
Fig. 11. New Result Entry Interface
Figure 12. Shows a design form for educators to input new subjects.
Fig. 12. New Subject Entry Interface
Figure 13. Shows a design form for educators to input new class.
Fig. 13. New class Entry Interface
Figure 14. Provides administrators with a straightforward interface to update their
account details such as First Name, Last Name, and Username while preventing
accidental password changes.
Fig. 14. Account Management Interface
Figure 15. Shows a minimal interface for student result inquiries using identification
numbers.
Fig. 15. Student ID Lookup Interface
Figure 16. Shows a functional table interface displaying one specific student
academic records with clear column headers such as Student Code, Name, Class,
Subjects, and Average, then shows the use of pagination and view result action
button.
Fig. 16. Individual student results summary record form design.
Figure 17. Student transcript presents a complete student profile including ID, name,
class, and gender. The well-organized subject table clearly displays marks for Math,
English, and Science with the correctly calculated average prominently shown.
Standard print and close option provide necessary functionality.
Fig. 17. Individual student results formatted design.
Figure 18. The browser's print dialog displays student results alongside printer
configuration settings. While it shows standard options for selecting printers (EPSON
L3110 Series), copies, and layout.
Fig. 18. Print Preview Interface
