Система онлайн-обучения — проект Python
В этой статье мы собираемся создать систему онлайн-обучения United School для всех студентов, где они смогут учиться онлайн и получить эквивалентную степень, связанную с известной организацией. Многие школы были закрыты, и многие сталкиваются с проблемами онлайн-обучения на любой платформе. Здесь, в этом проекте, обеим школам, а также учащимся будет предоставлена хорошо организованная платформа онлайн-обучения, с помощью которой они могут легко управлять онлайн-обучением. Эта платформа включает в себя все функции от сдачи онлайн-экзаменов для студентов, а также для найма учителей до простого учета посещаемости студентов. Вы можете проверить демо по ссылке, указанной на unitedschool.herokuapp.com.
Инструменты и технологии, используемые в проекте:
- Веб-технологии: HTML, CSS
- База данных: ПОСТГРЕС
- Редактор: VSCODE
Необходимый набор навыков для создания проекта:
- Внешний интерфейс: HTML, CSS, BOOTSTRAP, JAVASCRIPT.
- Серверная часть : Flask, Postgresql, SqlAlchemy, Python, AJAX.
Пошаговая реализация
Шаг 1: Сначала мы определились со всей архитектурой нашей идеи. Мы собрали всю информацию, необходимую для реализации этого проекта. Мы изучили FLASK, SQLAlchemy и т. д., чтобы сделать проект динамичным.
Шаг 2: Определившись со всей архитектурой, мы начали работать над FrontEnd проекта. Сначала мы разработали целевую страницу нашего сайта. Который выглядит так.
Ниже приведен фрагмент кода домашней страницы панели навигации.
HTML
<!DOCTYPE html><html><head><title>Page Title</title></head> <body> <header> <div class="container-fluid bg-light p-0 " style="width: 100%; height: 100px;"> <div class="row"> <div class="col-lg-3 col-md-2"> <img src="../static/images/logo.png" class="img-fluid ml-5" style="height: 50%;"> </div> <div class="col-lg-9 col-md-8 col-12"> <h1 class="text-left ml-5 pt-4" style="height: 80%; width: 100%; font-size: 4.5em; font-family: "Cinzel", serif; color: #ff9900;"> UNITED SCHOOL </h1> </div> </div> </div> </header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav text-center"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link active" href="#about_us">About</a> <a class="nav-item nav-link active" href="#admissions">Admissions</a> <a class="nav-item nav-link active" href="#">Academics</a> <a class="nav-item nav-link active" id="announcements">Annoucements</a> <a class="nav-item nav-link active" href="#services">Services</a> <a class="nav-item nav-link active" href="#">Facilites</a> <a class="nav-item nav-link active" href="#contact_us">Contact Us</a> </div> </div></nav> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img src="../static/images/img3.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="../static/images/img4.jpg" class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="../static/images/img5.jpg" class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></div> </body></html> |
Шаг 3: Теперь мы будем использовать Flask, чтобы сделать его веб-приложением и подключить все html-страницы. Мы использовали POSTGRESQL для базы данных.
Шаг 4: Теперь мы пишем маршрут приложения для каждой HTML-страницы. Как показано в примере ниже:
Python3
@app.route("/",methods=["GET", "POST"])def index(): if request.method=="POST": data=request.form["Message"] name=request.form["name"] em=request.form["email"] phno=request.form["phno"] send_email(em,name,data,phno) flash("MESSAGE sUBMITTED TO THE ADMIN WAIT FOR REPLY ON PHONE!!!") return redirect("/") else: subjectExam=db.session.query(Data3).all() x=db.session.query(announcement.ann).all() caru=db.session.query(carou).order_by(carou.ids).all() return render_template("index.html",x=x,a=caru,sub=subjectExam) |
Шаг 5: После этого мы создаем таблицы в POSTGRES, используя код SQLAlchemy. Ниже приведен фрагмент кода для создания таблицы student.
Python3
db=SQLAlchemy(app) class Data(db.Model): __tablename__="student" eno=db.Column(db.String(120),primary_key=True, unique=True) passw=db.Column(db.String(120)) Name=db.Column(db.String(120)) class=db.Column(db.String(120)) ContactNo=db.Column(db.String(120)) Address=db.Column(db.String(120)) Emailid=db.Column(db.String(120)) result=db.Column(db.String(120)) fees=db.Column(db.String(120)) gives = db.relationship("Data3", secondary="sqrel", lazy="dynamic", backref=db.backref("takenby", lazy="dynamic")) def __init__(self, eno, passw,Name,class,Contactno,Add,ema,res,fees): self.eno=eno self.passw=passw self.Name=Name self.class=class self.ContactNo=Contactno self.Address=Add self.Emailid=ema self.result=res self.fees =fees |
Шаг 6: После этого мы реализуем такие функции, как ЭКЗАМЕН, вход для учащихся, вход для учителей, библиотека. Здесь мы реализовали функцию обнаружения читерства, благодаря которой человека можно поймать, если он жульничает .
Вот как выглядит полная структура проекта:
Выход:
Представление для учащихся: учащиеся могут войти в систему через почту, предоставленную администратором. Он может использовать портал для отправки сборов, заданий, сдачи экзаменов, получения результатов, загрузки книг в формате PDF, может размещать любые уведомления на студенческом портале.
Представление учителя: учителя могут войти в систему и использовать портал для проведения занятий в режиме реального времени, оценки учащихся, предоставления заданий и учета посещаемости.
Представление администратора: администратор может управлять студентами, учителями, новой формой заявки на поступление, карусельными изображениями, объявлениями и т. д.
Вид от третьего лица: раздел объявлений, информация о школах, услуги школы, запросить дополнительную информацию у администратора, а также подать заявку на поступление.
Выходное видео для демонстрации показано ниже:
ER-диаграмма:
Применение проекта в реальной жизни:
Он предоставляет средства массовой информации для эффективного управления системой школьного образования. Это поможет всем учащимся, а также школам, которые сталкиваются с проблемами в онлайн-обучении, а также поможет людям, которые мигрируют из одного места в другое для получения высшего образования. С помощью этого проекта можно легко получить степень из любого места. Также этот проект гарантирует, что экзамены будут сдаваться без списывания, и если кто-то будет списывать, он будет автоматически обнаружен и будет дисквалифицирован.