Скриншот архива с проектом
Структура проектов
Задание
Разработать веб-приложение на Django для ведения онлайн-журнала успеваемости учеников: веб-приложение должно предоставлять педагогам возможность добавления оценок, отметок о посещаемости и отслеживания успеваемости каждого ученика
Функционал программы
- форма авторизации;
- вывод всех данных, хранящихся на сервере;
- добавление новых данных о успеваемости и посещаемости;
- редактирование данных;
- удаление данных;
- поиск по фамилии студента;
- построение графиков – два общих графика успеваемости строятся по датам выставления и редактирования оценки соответственно и два графика для каждого студента в отдельности, которые строятся по тому же принципу, что и первые два.
Содержание отчета к программе
Фрагмент программного кода (код модели Statement)
from django.db import models
# Create your models here.
class Statement(models.Model):
objects = models.Manager()
student = models.CharField(max_length=100, help_text='Введите студента', verbose_name='Студент')
subject = models.CharField(max_length=100, help_text='Введите предмет', verbose_name='Предмет')
estimation = models.IntegerField(help_text='Введите оценку', verbose_name='Оценка')
ATTENDANCE_CHOICES = [
('Высокая', 'Высокая'),
('Средняя', 'Средняя'),
('Низкая', 'Низкая'),
]
attendance = models.CharField(max_length=50, choices=ATTENDANCE_CHOICES, verbose_name='Посещаемость')
GRADE_CHOICES = [
('Высокая', 'Высокая'),
('Средняя', 'Средняя'),
('Низкая', 'Низкая'),
]
grade = models.CharField(max_length=50, choices=GRADE_CHOICES, verbose_name='Успеваемость')
date_of_rating = models.DateField(auto_now_add=True, verbose_name='Дата выставления оценки')
date_of_change = models.DateField(null=True, blank=True, verbose_name='Дата изменения оценки')
def __str__(self):
return f'{self.student} - {self.subject}: {self.estimation}, Посещаемость: {self.attendance}'
class Meta:
verbose_name = 'Ведомость'
verbose_name_plural = 'Ведомость'
Фрагмент программного кода (код компонента ShowStatement.jsx)
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
function ShowStatement() {
const [statements, setStatements] = useState([]);
const [searchTerm, setSearchTerm] = useState(''); // 🔍 состояние для поиска
useEffect(() => {
const fetchStatements = async () => {
try {
const response = await axios.get('http://127.0.0.1:8000/api/students/');
setStatements(response.data);
} catch (error) {
console.error('Ошибка при загрузке данных:', error);
}
};
fetchStatements();
}, []);
// 🔍 Фильтрация по имени студента (без учета регистра)
const filteredStatements = statements.filter((item) =>
item.student.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div className="container">
<h2>Ведомость студентов</h2>
<div className="mb-3">
<input
type="text"
className="form-control"
placeholder="Поиск по имени студента..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
{/* 🔹 Оригинальные оценки */}
<h4>📘 Оригинальные оценки</h4>
<table className="statement-table table table-hover table-striped table-bordered text-start">
<thead>
<tr>
<th className="text-center">Студент</th>
<th className="text-center">Предмет</th>
<th className="text-center">Оценка</th>
<th className="text-center">Посещаемость</th>
<th className="text-center">Успеваемость</th>
<th className="text-center">Дата выставления</th>
<th className="text-center">Детали</th>
</tr>
</thead>
<tbody>
{filteredStatements
.filter(item => item.date_of_change === null)
.map(item => (
<tr key={`original-${item.id}`}>
<td className="text-center">{item.student}</td>
<td className="text-center">{item.subject}</td>
<td className="text-center">{item.estimation}</td>
<td className="text-center">{item.attendance}</td>
<td className="text-center">{item.grade}</td>
<td className="text-center">{item.date_of_rating}</td>
<td>
<Link to={`/student/${item.id}`}>
<button className="btn btn-primary">Детали</button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
{/* 🔸 Отредактированные оценки */}
<h4>✏️ Отредактированные оценки</h4>
<table className="statement-table table table-hover table-striped table-bordered text-start">
<thead>
<tr>
<th className="text-center">Студент</th>
<th className="text-center">Предмет</th>
<th className="text-center">Оценка</th>
<th className="text-center">Посещаемость</th>
<th className="text-center">Успеваемость</th>
<th className="text-center">Дата изменения</th>
<th className="text-center">Детали</th>
</tr>
</thead>
<tbody>
{filteredStatements
.filter(item => item.date_of_change !== null)
.map(item => (
<tr key={`edited-${item.id}`}>
<td className="text-center">{item.student}</td>
<td className="text-center">{item.subject}</td>
<td className="text-center">{item.estimation}</td>
<td className="text-center">{item.attendance}</td>
<td className="text-center">{item.grade}</td>
<td className="text-center">{item.date_of_change}</td>
<td>
<Link to={`/student/${item.id}`}>
<button className="btn btn-primary">Детали</button>
</Link>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default ShowStatement;
Пояснения по запуску программы
Node.js - https://nodejs.org/en - скачиваем и устанавливаемPython - https://www.python.org/Visual Studio Code - https://code.visualstudio.com/ - скачиваем и устанавливаем. Настраиваем редактор для работы с React и Python Запускаем сервер, проверяем работу api. в случае необходимости устанавливаем все необходимые библиотеки. Запускаем клиента. Радуемся успеху и пользуемся приложением. Приятного вам пользования.
Телеграм
-