add course register and update BE

login-frontend/src/App.js

@@ -5,10 +5,11 @@ import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
 import FirstPage from './pages/FirstPage';
 import AuthPage from './pages/authPage';
-import StudentDashBoard from './pages/StudentDashboard';
-import Course from './components/coursePage/Course';
-import Course1 from './components/coursePage/Course1';
-import TeacherDashBoard from './pages/TeacherDashBoard';
+import StudentDashBoard from './pages/dashboardPage/StudentDashboard';
+import Course from './pages/coursePage/Course';
+import Course1 from './pages/coursePage/Course1';
+import CourseRegistration from './pages/coursePage/CourseRegistration';
+import TeacherDashBoard from './pages/dashboardPage/TeacherDashBoard';
 
 function App() {
   const [username, setUsername] = useState('');
@@ -43,6 +44,7 @@ function App() {
         <Route path='/admin/dashboard' element={< StudentDashBoard/>} />
         <Route path='/course' element={<Course />} />
         <Route path='/course1' element={<Course1 />} />
+        <Route path='/courseRegistration' element={<CourseRegistration />} />
       </Routes>
     </Router>
   );

login-frontend/src/components/header_footer/FirstFooter.js

@@ -6,7 +6,7 @@ import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 function FirstFooter() {
   return (
     <>
-    <div style={{ marginTop: '0%', height: '100%', backgroundColor: '#0b3942', display: 'flex', textAlign: 'center' }}>
+    <footer style={{ marginTop: '0%', height: '100%', backgroundColor: '#0b3942', display: 'flex', textAlign: 'center' }}>
         <div style={{ marginLeft: '8%', width: '12%' }}>
           <div style={{ marginTop: '30%', marginRight: '30%', marginLeft: '30%', width: '40%', height: '40%', backgroundColor: 'blueviolet', borderRadius: '50%' }}>
             <i class="fas fa-solid fa-phone fa-2x" style={{ marginTop: '25%', color: 'white' }}></i>
@@ -59,7 +59,7 @@ function FirstFooter() {
             Copyright &copy; 2024
           </p>
         </div>
-    </div>
+    </footer>
     </>
   );
 }

login-frontend/src/components/header_footer/FirstHeader.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import axios from 'axios';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import { Navbar, Nav, Form, Button, Row, Col } from "react-bootstrap";
 import Dropdown from "react-bootstrap/Dropdown";
@@ -22,16 +23,16 @@ function FirstHeader() {
       <Navbar style={{ display: 'flex' }}>
         <img style={{ width: '20vh', marginLeft: '3vh' }} src={'https://i.ibb.co/CMwkBmw/lSgDz8N.png'} alt="logo" />
         <Link to={'/teacher/login'} style={{ marginLeft: '5vh', color: 'black', textDecorationLine: 'none' }}>
-          <h4 style={{width:'15vh'}}>GIẢNG VIÊN</h4>
+          <h4 style={{marginLeft: '5vh', marginRight: '5vh', width:'15vh', textAlign: 'center' }}>TEACHER</h4>
         </Link>
         <Link to={'/student/login'} style={{ color: 'black', textDecorationLine: 'none' }}>
-          <h4 style={{width:'15vh'}}>SINH VIÊN</h4>
+          <h4 style={{marginLeft: '5vh', marginRight: '5vh', width:'15vh', textAlign: 'center' }}>STUDENT</h4>
         </Link>
         <Link to={'/admin/login'} style={{ color: 'black', textDecorationLine: 'none' }}>
-          <h4 style={{width:'15vh'}}>QUẢN LÝ</h4>
+          <h4 style={{marginLeft: '5vh', marginRight: '5vh', width:'15vh', textAlign: 'center' }}>ADMIN</h4>
         </Link>
-        <div style={{ marginLeft: '40vh', width: '10%' }}>
-          <Dropdown className="ms-2 me-2">
+        <div style={{ marginLeft: '35%', width: '10%' }}>
+          <Dropdown>
             <Dropdown.Toggle
               variant="light"
               id="dropdown-notifications"
@@ -48,24 +49,19 @@ function FirstHeader() {
                   alignItems: "center"
                 }}
               >
-                <StyledBadge className="me-2" badgeContent={notifications.length} color="primary">
+                <StyledBadge className="me-3" badgeContent={notifications.length} color="primary">
                   <NotificationsIcon color="action" />
                 </StyledBadge>
-                Thông báo
+                Notifications
               </span>
             </Dropdown.Toggle>
             <Dropdown.Menu className="py-0" align="end" style={{ color: 'black', fontSize: 16, fontFamily: 'Inter', fontWeight: '400', wordWrap: 'break-word', right: 'auto' }}>
-              {/* <Dropdown.Header>Notifications</Dropdown.Header> */}
               {notifications.map((notification, index) => (
                 <Dropdown.Item key={index}>{notification}</Dropdown.Item>
               ))}
               {notifications.length === 0 && (
                 <Dropdown.Item disabled>No notifications</Dropdown.Item>
               )}
-              {/* <Dropdown.Divider />
-              <Dropdown.Item onClick={handleClearNotifications}>
-                Clear Notifications
-              </Dropdown.Item> */}
             </Dropdown.Menu>
           </Dropdown>
         </div>

login-frontend/src/components/header_footer/Footer.js

@@ -5,14 +5,14 @@ import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 function Footer() {
   return (
     <>
-      <div className="text-center foot">
+      <footer className="text-center foot">
         <p style={{ paddingTop: '2vh', margin: 0 }}>
           Copyright &copy; 2024 | All rights reserved
         </p>
         <p style={{ padding: '1vh', margin: 0 }}>
           Mọi thắc mắc vui lòng liên hệ email: [email protected]
         </p>
-      </div>
+      </footer>
     </>
   );
 }

login-frontend/src/components/header_footer/Header.js → login-frontend/src/components/header_footer/StudentHeader.js

@@ -4,18 +4,18 @@ import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import { Navbar, Nav, Form, Button, Row, Col } from "react-bootstrap";
 import NavDropdown from 'react-bootstrap/NavDropdown';
 
-function Header() {
+function StudentHeader() {
   return (
     <>
-      <Navbar expand="lg">
+      <Navbar expand="lg" style={{ borderBlockEnd: '1px solid' }}>
         <img style={{ width: '15%' }} src={'https://i.ibb.co/CMwkBmw/lSgDz8N.png'} alt="logo" />
         {/*<Navbar.Toggle aria-controls="basic-navbar-nav" />*/}
         <Navbar.Collapse id="basic-navbar-nav" style={{ marginLeft: '5%' }}>
           <Nav className="me-auto">
             <NavDropdown title="Các khóa học" id="basic-nav-dropdown" style={{ fontSize: '1.5em' }}>
               <NavDropdown.Item href="/course1">Khóa học của tôi</NavDropdown.Item>
             </NavDropdown>
-            <Nav.Link href="/course3" style={{ fontSize: '1.5em' }}>Đăng ký môn học</Nav.Link>
+            <Nav.Link href="/courseRegistration" style={{ fontSize: '1.5em' }}>Đăng ký môn học</Nav.Link>
           </Nav>
         </Navbar.Collapse>
         <div>
@@ -34,4 +34,4 @@ function Header() {
   );
 }
 
-export default Header;
+export default StudentHeader;

login-frontend/src/components/header_footer/TeacherHeader.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { Navbar, Nav, Form, Button, Row, Col } from "react-bootstrap";
+import NavDropdown from 'react-bootstrap/NavDropdown';
+
+function TeacherHeader() {
+  return (
+    <>
+      <Navbar expand="lg" style={{ borderBlockEnd: '1px solid' }}>
+        <img style={{ width: '15%' }} src={'https://i.ibb.co/CMwkBmw/lSgDz8N.png'} alt="logo" />
+        <div style={{ marginLeft: '55%' }}>
+          <h4 style={{ marginTop: '0.5rem' }}>NGUYEN VAN B - MSGV</h4>
+        </div>
+        <Button style={{ marginLeft: '3%', color: 'black', backgroundColor: 'white', border: 'none' }}>
+          <div style={{ marginLeft: '30%', marginRight: '30%', backgroundColor: 'blue', borderRadius: '50%' }}>
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14 5L12.59 6.41L14.17 8H6V10H14.17L12.59 11.58L14 13L18 9L14 5ZM2 2H9V0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H9V16H2V2Z" fill="white" />
+            </svg>
+          </div>
+          <h6>Đăng xuất</h6>
+        </Button>
+      </Navbar>
+    </>
+  );
+}
+
+export default TeacherHeader;

login-frontend/src/pages/StudentDashboard.js → login-frontend/src/pages/dashboardPage/StudentDashboard.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import StudentInfo from './../components/DashBoard/studentInfo';
-import Training from './../components/DashBoard/studentTraining';
-import Footer from './../components/header_footer/Footer';
-import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import StudentInfo from '../../components/dashboard/studentInfo';
+import Training from '../../components/dashboard/studentTraining';
+import Footer from '../../components/header_footer/Footer';
+import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 import './Dashboard.css';
 
@@ -15,7 +15,7 @@ function DataTable() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="student-dashboard">
+    <div>
       <nav className="navbar navbar-expand-lg navbar-light bg-light">
         <a className="navbar-brand" href="#">
           <img className="logo" src="https://i.ibb.co/CMwkBmw/lSgDz8N.png" alt="logo" />
@@ -48,8 +48,12 @@ function DataTable() {
                 <i class="fa-solid fa-angles-down"></i>
                 {isOpen && (
                   <ul>                    
-                    <li className="nav-item" style={{ marginTop: '2rem'}}><Link to={'/course'} style={{color: 'white', padding: '0'}}>Course</Link></li>
-                    <li className="nav-item" style={{ marginTop: '2rem' }}><Link to={'/course1'} style={{color: 'white', padding: '0'}}>Course registration</Link></li>
+                    <li className="nav-item" style={{ paddingTop: '2rem' }}>
+                      <Link to={'/course'} style={{ color: 'white', padding: '0' }}>Course</Link>
+                    </li>
+                    <li className="nav-item" style={{ paddingTop: '2rem' }}>
+                      <Link to={'/courseRegistration'} style={{ color: 'white', padding: '0' }}>Course registration</Link>
+                    </li>
                   </ul>
                 )}
               </li>

login-frontend/src/pages/TeacherDashBoard.js → login-frontend/src/pages/dashboardPage/TeacherDashBoard.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import TeacherInfo from './../components/DashBoard/teacherInfo';
-import Footer from './../components/header_footer/Footer';
-import SubjectSchedule from './../components/DashBoard/subjectSchedule';
-import LessonPlan from './../components/DashBoard/lessonPlan';
-import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
+import TeacherInfo from './../../components/dashboard/teacherInfo';
+import Footer from '../../components/header_footer/Footer';
+import SubjectSchedule from './../../components/dashboard/subjectSchedule';
+import LessonPlan from './../../components/dashboard/lessonPlan';
+import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
 // import './StudentDashboard.css';
 
@@ -16,7 +16,7 @@ function DataTable() {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="student-dashboard">
+    <div>
       <nav className="navbar navbar-expand-lg navbar-light bg-light">
         <a className="navbar-brand" href="#">
           <img className="logo" src="https://i.ibb.co/CMwkBmw/lSgDz8N.png" alt="logo" />