En este artículo, vamos a construir un sistema de educación en línea United School para todos los estudiantes donde puedan estudiar en línea y obtener un título equivalente afiliado a una organización conocida. Muchas de las escuelas cerraron y muchas enfrentan problemas para enseñar en línea a través de cualquier plataforma. Aquí, en este proyecto, se proporcionará una plataforma de aprendizaje en línea bien organizada tanto para las escuelas como para los estudiantes con la que pueden administrar fácilmente los estudios en línea. Esta plataforma incluye todas las funciones, desde la realización de exámenes en línea para los estudiantes, así como para fines de contratación de profesores, hasta la asistencia de los estudiantes fácilmente. Puede consultar la demostración en el enlace proporcionado unitedschool.herokuapp.com .
Herramientas y Tecnologías Utilizadas en el Proyecto:
- Tecnología web: HTML, CSS
- Base de datos: POSTGRES
- Editor: VSCODE
Habilidad requerida para construir el proyecto:
- Interfaz: HTML, CSS, BOOTSTRAP, JAVASCRIPT.
- BackEnd: Frasco, Postgresql, SqlAlchemy, Python, AJAX.
Implementación paso a paso
Paso 1: Primero decidimos toda la arquitectura de nuestra idea. Recopilamos toda la información necesaria para implementar este proyecto. Aprendimos FLASK, SQLAlchemy, etc. para hacer que el proyecto sea dinámico.
Paso 2: Después de decidir toda la arquitectura, comenzamos a trabajar en el FrontEnd del proyecto. En primer lugar, diseñamos la página de destino de nuestro sitio web. Que se parece a esto.
A continuación se muestra el fragmento de código para la página de inicio de la barra de navegación
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>
Paso 3: ahora usaremos Flask para convertirlo en una aplicación web y conectar todas las páginas html. Usamos POSTGRESQL para la base de datos.
Paso 4: Ahora escribimos la ruta de la aplicación para cada página HTML. Como se muestra en el siguiente ejemplo:
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)
Paso 5: Luego de esto, creamos tablas en POSTGRES usando SQLAlchemy Code. A continuación se muestra el fragmento de código para crear la tabla estudiante.
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
Paso 6: Después de esto, implementamos funciones como EXAMEN, inicio de sesión de estudiantes, inicio de sesión de maestros, Biblioteca. Aquí implementamos una función de Detección de trampas a través de la cual una persona puede ser atrapada si hace trampa .
Así es como se ve la estructura completa del proyecto:
Producción:
Vista del estudiante: los estudiantes pueden iniciar sesión a través del correo proporcionado por el administrador. Puede usar el portal para enviar tarifas, tareas, dar exámenes, obtener resultados, descargar libros en PDF, puede publicar cualquier aviso en el portal del estudiante.
Vista del maestro: los maestros pueden iniciar sesión y usar el portal para tomar clases en vivo, evaluar a los estudiantes, proporcionar tareas, tomar asistencia.
Vista de administrador: el administrador puede administrar estudiantes, maestros, nuevo formulario de solicitud de admisión, imágenes de carrusel, anuncios, etc.
Vista en tercera persona: sección de anuncios, información sobre las escuelas, servicios de la escuela, consultar al administrador para obtener más información y solicitar la admisión también.
El video de salida para la demostración se muestra a continuación:
ER-diagrama:
Aplicación del proyecto en la vida real:
Proporciona un medio para administrar eficientemente el sistema escolar. Ayudará a todos los estudiantes, así como a las escuelas que enfrentan problemas para enseñar en línea, y también ayudará a las personas que migran de un lugar a otro para realizar estudios superiores. Con la ayuda de este proyecto, uno puede completar fácilmente su título desde donde quiera. Además, este proyecto garantizará que los exámenes se realicen sin hacer trampa y, si alguien hace trampa, se detectará automáticamente y será descalificado.
Publicación traducida automáticamente
Artículo escrito por sakshamagrawal703 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA