Skip to content
Related Articles

Related Articles

Improve Article

Online Schooling System – Python Project

  • Last Updated : 18 Aug, 2021

In this article, we are going to build an Online schooling system United School for all students where they can study online and get an equivalent degree affiliated with a well-known organization. Many of the schools were shut and many are facing problems in teaching online through any platform. Here in this project, a well-organized Online learning platform will be provided to both schools as well as the students with which they can easily manage online studies. This platform includes all the features from taking online exams for students as well as for recruitment purposes of teachers, to taking attendance of the students easily. You can check demo on the link given unitedschool.herokuapp.com.

Tools and Technologies Used in the Project: 

  • Web Technology: HTML, CSS
  • Database: POSTGRES
  • Editor: VSCODE

Required Skillset to Build the Project:

  • FrontEnd : HTML, CSS, BOOTSTRAP, JAVASCRIPT .
  • BackEnd: Flask, Postgresql, SqlAlchemy, Python, AJAX.

Step-by-Step Implementation

Step 1: Firstly we decided the whole architecture of our idea. We collected all the information needed to implement this project.We learnt FLASK , SQLAlchemy etc. to make project Dynamic.

Step 2: After deciding the whole architecture, we started working on the FrontEnd of the project. Firstly we designed the landing page of our website. Which looks like this. 

Below is the code snippet for nav bar home page



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>

Step 3: Now We will use Flask to make it a webapp and connect all the html pages. We used POSTGRESQL for the database. 

Step 4: Now we write the app route for each HTML page. As shown in the example below:

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)

Step 5: After this, we create tables in POSTGRES using SQLAlchemy Code. Below is the code snippet for creating the table 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))
    classs=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,classs,Contactno,Add,ema,res,fees):
        self.eno=eno
        self.passw=passw
        self.Name=Name
        self.classs=classs
        self.ContactNo=Contactno  
        self.Address=Add
        self.Emailid=ema
        self.result=res
        self.fees =fees

Step 6: After this, we implement features like EXAM , student login, teacher login, Library. Here we implemented a feature of Cheating Detection through which a person can be get caught if he cheats.

This is how the complete project structure looks like:



Output:

Student View: Students can login through the mail provide by admin. He can use the portal for submitting fees, assignments, Giving exams, Getting Results, Download books PDF, Can post any notice on student portal.

Teacher View: Teachers can login and use the portal for taking live classes, Evaluating Students, Providing Assignments, Take Attendance.

Admin View: Admin can manage students, teachers, new admission application Form, Carousel images, Announcements etc.

Third Person View: Announcement section, Information about schools, Services of school, Enquire admin for more information, and apply for admission as well.

The output video for the demo is shown below:

ER-diagram:

Project Application in Real-Life:

It provides a media to efficiently manage the schooling system. It will help all the students as well as schools which are facing issues in teaching online also will help the people who migrate from one place to another place for higher studies. With the help of this project one can easily complete his degree from wherever he wants. Also this project will ensure that exams are taken without any cheating and if anyone does cheating will automatically be detected and will get disqualified.




My Personal Notes arrow_drop_up
Recommended Articles
Page :