Laravel + Vue Practical
Laravel + Vue Practical
• Admin Role: Can manage students, input results, and generate reports.
• Student Role: Can view their own results and grades.
• Use Laravel's authentication to differentiate roles and provide permissions.
• Create: Admins can create new student records by entering information such as
name, registration number, department, etc.
• Read: Admins can view a list of all students and search/filter by different criteria.
• Update: Admins can update student details such as name, registration number, or
department.
• Delete: Admins can delete student records.
• Input Results: Admins can input marks for students in various subjects. The
system should calculate the total and grade automatically (e.g., GPA or letter
grade).
• View Results: Students can view their own results in a table format with subjects,
marks, total marks, and grade.
• Grade Calculation: Based on input marks, the system should calculate the grade
(e.g., using a simple grading scale).
o Example:
▪ A+: 90% - 100%
▪ A: 80% - 89%
▪ B: 70% - 79%
▪ C: 60% - 69%
▪ F: Below 60%
4. Backend (Laravel):
• Models:
o Student model with fields such as name, registration_number,
department, etc.
o Result model with fields like student_id, subject_name,
marks_obtained, total_marks, and grade.
• Controllers:
o A StudentController for handling CRUD operations on student records.
o A ResultController for inputting and retrieving results.
• Database:
o A students table for storing student information.
o A results table for storing marks and grades.
o Establish relationships between the Student and Result models (e.g., one-
to-many).
5. Frontend (Vue.js):
• Admin Panel:
o Student List: A table showing all students with options to add, update, and
delete students.
o Result Input Form: A form where admins can input marks for students,
select subjects, and calculate grades automatically.
• Student Panel:
o Result View: A student should be able to view their own results, which
should be displayed in a table format (subject, marks, grade).
• Vue Router:
o Use Vue Router to manage routes (e.g., separate routes for admin and
student dashboards).
• Axios:
o Use Axios for communicating with the Laravel backend (API routes to create,
update, fetch, and delete student data and results).