To help you complete the assignment, I'll break down the tasks based on the instructions in the

`FER202_Assignment.docx` file and the data in `database.json`. I will write JavaScript/React code
snippets that will work with Node.js and Visual Studio Code. You can copy the necessary parts for each
section.

---

### **Màn 1 - Component `<Home />`**

#### **Câu 1 - Design layout (0.5 điểm)**

In the `Home` component, create a basic layout. I'll assume a simple layout with a list of students and
their majors.

```jsx

import React, { useState, useEffect } from 'react';

const Home = () => {

const [students, setStudents] = useState([]);

const [majors, setMajors] = useState([]);

useEffect(() => {

// Load student data from the database.json (simulating an API call)

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const studentData = data.students;

const uniqueMajors = [...new Set(studentData.map((student) => student.major))];

setStudents(studentData);

setMajors(uniqueMajors);
 });

}, []);

return (

<div className="home">

<h1>Student List</h1>

<div>

<h2>Majors</h2>

<ul>

{majors.map((major, index) => (

<li key={index}>{major}</li>

))}

</ul>

</div>

<div>

<h2>Total Students: {students.length}</h2>

<ul>

{students.map((student) => (

<li key={student.id}>

{student.fullName} - {student.major}

</li>

))}

</ul>

</div>

</div>

);

};

export default Home;

#### **Câu 2 - Load majors without duplicates (1 điểm)**

The code above ensures no duplicate majors by using `Set` to filter unique majors.

---

#### **Câu 3 - Load student list (1 điểm)**

This is handled by the `students.map()` method, which displays all students in the list.

---

#### **Câu 4 - Display total students (0.5 điểm)**

The total number of students is shown in the `h2` tag as `students.length`.

---

#### **Câu 5 - Filter students by selected major (1.5 điểm)**

Add an event handler to filter students by major when clicking on a major from the list.

```jsx

const handleMajorClick = (major) => {

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {
 const filteredStudents = data.students.filter((student) => student.major === major);

setStudents(filteredStudents);

});

};

```

Update the major list to handle clicks:

```jsx

<ul>

{majors.map((major, index) => (

<li key={index} onClick={() => handleMajorClick(major)}>

{major}

</li>

))}

</ul>

```

---

### **Màn 2 - Student Details**

#### **Câu 6 - Route to student details page (0.5 điểm)**

In `App.js` or your main component, add a route for student details:

```jsx

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';

function App() {

return (

<Router>

<Switch>

<Route path="/" exact component={Home} />

<Route path="/student/:code" component={StudentDetail} />

</Switch>

</Router>

);

export default App;

```

Add a "Detail" button in the student list to navigate to the student’s details page:

```jsx

import { Link } from 'react-router-dom';

// Inside the students.map() in Home component:

<li key={student.id}>

{student.fullName} - {student.major}

<Link to={`/student/${student.code}`}>Detail</Link>

</li>

```

---
#### **Câu 7, 8 - Design student detail page, show CPA (1 điểm)**

Create a `StudentDetail` component:

```jsx

import React, { useState, useEffect } from 'react';

import { useParams } from 'react-router-dom';

const StudentDetail = () => {

const { code } = useParams();

const [student, setStudent] = useState(null);

useEffect(() => {

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const studentDetail = data.students.find((student) => student.code === code);

setStudent(studentDetail);

});

}, [code]);

if (!student) return <div>Loading...</div>;

return (

<div>

<h1>{student.fullName}</h1>

<h2>CPA: {student.cpa}</h2>

</div>
 );

};

export default StudentDetail;

```

---

#### **Câu 9 - Show student’s subjects (1.5 điểm)**

To display the subjects for the student:

```jsx

const [subjects, setSubjects] = useState([]);

useEffect(() => {

fetch('/path/to/database.json')

.then((response) => response.json())

.then((data) => {

const studentDetail = data.student_details.find((detail) => detail.studentCode === code);

if (studentDetail) {

const subjectNames = studentDetail.subjects.map((subjectCode) => {

const subject = data.subjects.find((sub) => sub.subjectCode === subjectCode);

return subject ? subject.subjectName : '';

});

setSubjects(subjectNames);

});

}, [code]);
// In JSX:

<ul>

{subjects.map((subject, index) => (

<li key={index}>{subject}</li>

))}

</ul>

```

---

#### **Câu 10 - Subject search (1.5 điểm)**

Add a search function to filter subjects:

```jsx

const [searchTerm, setSearchTerm] = useState('');

// Inside JSX:

<input

type="text"

placeholder="Search subjects"

onChange={(e) => setSearchTerm(e.target.value.toLowerCase())}

/>

<ul>

{subjects

.filter((subject) => subject.toLowerCase().startsWith(searchTerm))

.map((subject, index) => (

))}

</ul>

```

---

#### **Câu 11 - Add new subject (1 điểm)**

Add a form to input new subject details and add them to the database (this would typically require
backend work, but here is the frontend part):

```jsx

const [newSubject, setNewSubject] = useState('');

const handleAddNewSubject = () => {

// Simulate adding to database

setSubjects((prevSubjects) => [...prevSubjects, newSubject]);

};

// JSX:

<input

type="text"

placeholder="New Subject"

value={newSubject}

onChange={(e) => setNewSubject(e.target.value)}

/>

<button onClick={handleAddNewSubject}>Add New</button>

```
---

These code snippets should help you complete the assignment step-by-step. Let me know if you need
any further adjustments!