HAUS Connect – Python Project

One of the most common problems faced by college students is that we have very erratic timetables and it is a cumbersome task to keep up with them, these issues have been amplified enormously during these pandemic times where everyone is on their own. The purpose of this application is to help students keep track of their classes, tests, and assignments as well as assist in streamlining communication between faculty and students. HAUS-Connect is a platform where faculty of college can schedule or reschedule the meetings or lectures, they also can set reminders for tests and upload study material too. A chatbot will help look for study material. Basically, we want to make sure that none of us miss any deadlines. At the moment this is for college students but its versatility is immense, it can be used on a large scale for communications throughout an enterprise, a single system that manages leaves granted, leave balance, pending work, etc.

Features

• Recorded lectures link, .ppt file, reference book pdf can be uploaded by the faculty.
• Time-Table modification access will be provided only to the faculty.
• A doubt section will be provided where a student has to upload a picture of his doubt and select the subject, a message on the faculty’s screen will pop and he further can send the solution of it.
• A chatbot will help look for study material
• A text message and email will be sent directly to all students if a faculty reschedules a particular meeting.

Tools Used:

Client-Side :

• Html
• CSS
• javascript

Server Side :

• MySQL database
• Python
• Sms API
• Django

Explanatory Diagram

Explanatory Diagram

Login Diagram

Login Diagram

Code flow

Code flow

Step by Step Implementation

Broadcaster: This is the folder that contains the files for the main project.

Settings.py

This file declares all the dependencies and other settings.

Python3

from pathlib import Path
import os

# Build paths inside the project like this:
# BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

# SECURITY WARNING: keep the secret key used in
# production secret!
SECRET_KEY = 'django-insecure-lzy=xp#!(0e-h9+%u!dsj$m4-2+=j7r$5hsb((@7ziv2g=dgbt'

# SECURITY WARNING: don't run with debug turned
# on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'Teacher.apps.TeacherConfig',
    'Student.apps.StudentConfig',
    'Register.apps.RegisterConfig',
    'crispy_forms',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'broadcaster.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'broadcaster.wsgi.application'


# Database
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.\
        UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.\
        MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.\
        CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.\
        NumericPasswordValidator',
    },
]


# Internationalization
LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

CRISPY_TEMPLATE_PACK = "bootstrap4"

LOGIN_REDIRECT_URL = "/"


# Default primary key field type
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

urls.py

This file links URLs from different dependencies and other apps to the main project.

Python3

from django.contrib import admin
from django.urls import path, include
from Register import views as v

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("Teacher.urls")),
    path('', include("Student.urls")),
    path('register/', v.register, name="register"),
    path("", include("django.contrib.auth.urls")),

]

Now let’s create the apps required for our project.

Register App

This app handles the login and signup of users.

Register hierarchy

Note: Static folder contains all the static files like JavaScript files, CSS files, and images

Templates Folder

You can see there is a template folder that contains two HTML files. The first file is register.html  and the second file is login.html

HTML

<!-- Register -->
{%load static%}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
<head>
    <title>Login/SignUp</title>
    <link rel="stylesheet" type="text/css" href="{% static 'Register/css/Login.css' %}">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>

    <body>
    <div class="main">
    <input type="checkbox" id="chk" aria-hidden="true">

        <div class="signup">

        <form method="post" class="form-group">
            {% csrf_token %}
            <label for="chk" aria-hidden="true">Sign up</label>
                    <div class="input">
                        {{form.username}}
                    </div>
                    <div class="input">
                        {{form.email}}
                    </div>
                    <div class="input">
                        {{form.password1}}
                    </div>
                    <div class="input">
                        {{form.password2}}
                    </div>

            <button type="submit" class="btn btn-success"> Register </button>
        </form>
        <div class="error">
            {{form.errors}}
        </div>

        </div>
        <style>
            .main{
        width: 350px;
        height: 500px;
        background:red;
        overflow: hidden;
        background: url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
        border-radius: 10px;
        box-shadow: 5px 20px 50px #000;
    }
    .error{
        color:#ffffff;
        align-items: center;
    }
        </style>

        <script>

            var form_fields = document.getElementsByTagName('input')
            form_fields[2].placeholder='Username..';
            form_fields[3].placeholder='Email..';
            form_fields[4].placeholder='Enter password...';
            form_fields[5].placeholder='Re-enter Password...';

        </script>
      </div>
    </body>
</html>

HTML

<!-- Login -->
{%load static%}
{% if user.is_authenticated %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
      <p style="color:#f2f2f4">You are already logged in</p>


      </center>
      <h2 style="color:#f2f2f4"><a href="/" style="color:#f2f2f4">Click here</a> if you are a professor</h2>
      <center>
      <h2 style="color:#f2f2f4"><a href="/student_home" style="color:#f2f2f4">Click here</a> if you are a student</h2>
     </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% else %}
{% load crispy_forms_tags %}
<!DOCTYPE html>
<html>
   <head>
      <title>Login/SignUp</title>
      <link rel="stylesheet" type="text/css" href="{% static 'Register/css/Login.css' %}">
      <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
   </head>
   <body>
      <div class="main">
      <input type="checkbox" id="chk" aria-hidden="true">
      <div class="signup">
         <form method="post" class="form-group">
            {% csrf_token %}
            <label for="chk" aria-hidden="true">Login</label>
            <div class="input">
               {{form.username}}
            </div>
            <div class="input">
               {{form.password}}
            </div>
            <button type="submit" class="btn btn-success"> Login </button>
         </form>
         <div class="error">
            {{form.errors}}
            <center>


<p>Dont have an account? create one <a href="{% url 'register'%}" style="color:white">here</a></p>


           </center>
         </div>
      </div>
      <style>
         .main{
         width: 350px;
         height: 500px;
         background:red;
         overflow: hidden;
         background: url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
         border-radius: 10px;
         box-shadow: 5px 20px 50px #000;
         }
         .error{
         color:#ffffff;
         align-items: center;
         }
      </style>
      <script>
         var form_fields = document.getElementsByTagName('input')
         form_fields[].placeholder='Username..';
         form_fields[].placeholder='Enter password...';

         }
      </script>
        </div>
   </body>
</html>
{% endif %}

apps.py

This registers the app since it will be using database.

Python3

from django.apps import AppConfig


class RegisterConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'Register'

forms.py

Here a custom signup form is created.

Python3

from django import forms
from django.contrib.auth import login, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User


class RegistrationForm(UserCreationForm):
    email = forms.EmailField()

    class Meta:
        model = User

        # order in which the fields show up
        fields = ["email", "username", "password1", "password2"]

views.py

This file lets us manage how the page will be displayed and who will be able to see the page.

Python3

from django.shortcuts import render,redirect
from django.contrib.auth import login,authenticate,logout
from .forms import RegistrationForm

# Create your views here.
def register(request):
    if request.user.is_authenticated:
         return redirect("/")


    if request.method == 'POST':
        form=RegistrationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login')
    else:
        form=RegistrationForm()
    return render(request,"Register/register.html",{"form":form})

Student App

This app handles the student side of the project.

Student Hierarchy

Templates:

About.html, ChatBot.html, faq.html, student_home.html and TimeTable.html

These pages are not visible to anyone that isn’t logged in.

HTML

<!-- about -->
{% load static %}
{% if user.is_authenticated %}
<!DOCTYPE html>
<html>
   <head>
      <title>About Us</title>
      <link
         href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap"
         rel="stylesheet"
         />
   </head>
   <style>
      body{
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      font-family: 'Jost', sans-serif;
      background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
      }
      .main{
      width: 350px;
      height: 500px;
      background: red;
      overflow: hidden;
      background: url("{% static 'image/1.jpg' %}") no-repeat center/ cover;
      border-radius: 10px;
      box-shadow: 5px 20px 50px #000;
      }
      label{
      color: #fff;
      font-size: 2.3em;
      justify-content: center;
      display: flex;
      margin: 60px;
      font-weight: bold;
      transition: .5s ease-in-out;
      }
      p{
      color: #fff;
      font-size: 1.3em;
      justify-content:flex-start;
      display: flex;
      margin: 20px;
      font-weight: bold;
      cursor: pointer;
      transition: .5s ease-in-out;
      }
      .chk{
      position: absolute;
      top: 440px;
      left: 250px;
      }
      h2{
      margin: 2rem;
      text-decoration-line:underline;
      color:white;
      }
      li{
      font-size: larger;
      color:white;
      }
   </style>
   <body>
      <div class="main">
         <div class="aanounce">
            <label for="chk" aria-hidden="true">About</label>
            <h2>HAUS Developers</h2>
            <ul>
               <li>Hardeep</li>
               <li>Ahmed</li>
               <li>Utsav</li>
               <li>Sarthak</li>
            </ul>
         </div>
      </div>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

HTML

<!-- Chat bot-->
{% load static %}
{% if user.is_authenticated %}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>ChatBot</title>
      <link rel="stylesheet" href="{% static 'css/ChatBot.css' %}">
      <link
         href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i"
         rel="stylesheet"
         />
   </head>
   <body>
      <main>
         <section>
            <br /><br /><br />
            <h1>ChatBot</h1>
            <small>Hi I am Era</small>
            <br />


<p>
               Under Construction
            </p>


         </section>
      </main>
      <style>
         main{
         background-image: url("{% static 'image/1.jpg' %}");
         }
      </style>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

HTML

<!-- faq-->
{% load static %}
{% if user.is_authenticated %}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
         href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i"
         rel="stylesheet"
         />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
      <link rel="stylesheet" href="{% static 'css/faq.css' %}" />
      <title>FAQ</title>
   </head>
   <body>
      <h1>Frequently Asked Questions</h1>
      <div class="faq-container">
         <div class="faq active">
            <h3 class="faq-title">
               Why shouldn't we trust atoms?
            </h3>
            <p class="faq-text">
               They make up everything
            </p>


            <button class="faq-toggle">
            <i class="fas fa-chevron-down"></i>
            <i class="fas fa-times"></i>
            </button>
         </div>
         <div class="faq">
            <h3 class="faq-title">
               What do you call someone with no body and no nose?
            </h3>
            <p class="faq-text">
               Nobody knows.
            </p>


            <button class="faq-toggle">
            <i class="fas fa-chevron-down"></i>
            <i class="fas fa-times"></i>
            </button>
         </div>
         <div class="faq">
            <h3 class="faq-title">
               What's the object-oriented way to become wealthy?
            </h3>
            <p class="faq-text">
               Inheritance.
            </p>


            <button class="faq-toggle">
            <i class="fas fa-chevron-down"></i>
            <i class="fas fa-times"></i>
            </button>
         </div>
         <div class="faq">
            <h3 class="faq-title">
               How many tickles does it take to tickle an octopus?
            </h3>
            <p class="faq-text">
               Ten-tickles!
            </p>


            <button class="faq-toggle">
            <i class="fas fa-chevron-down"></i>
            <i class="fas fa-times"></i>
            </button>
         </div>
         <div class="faq">
            <h3 class="faq-title">
               What is: 1 + 1?
            </h3>
            <p class="faq-text">
               Depends on who are you asking.
            </p>


            <button class="faq-toggle">
            <i class="fas fa-chevron-down"></i>
            <i class="fas fa-times"></i>
            </button>
         </div>
      </div>
      <script src="{% static 'js/faq.js' %}"></script>
      <style>
         body{
         background:  url("{%static 'image/1.jpg'%}") no-repeat center/ cover;}
      </style>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

HTML

<!-- student_home -->
{% load static %}
{% if user.is_authenticated %}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <title>Student's Portal</title>
      <link
         href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i"
         rel="stylesheet"
         />
      <link
         rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
         integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
         crossorigin="anonymous"
         />
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <style>
         html,
         body {
         height: 100%;
         }
         * {
         box-sizing: border-box;
         margin: 0;
         padding: 0;
         }
         body {
         font-family: "Roboto Condensed", sans-serif;
         line-height: 1.7;
         perspective-origin: 0% 50%;
         perspective: 800px;
         background: #21212d;
         }
         nav,
         main {
         transition: transform 150ms ease-out;
         }
         nav {
         z-index: 100;
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         width: 16em;
         background-color: #353441;
         transform: translateX(-16em);
         }
         nav.menu-active {
         transform: translateX(0);
         }
         nav.menu-hover {
         transform: translateX(-15em);
         }
         nav h1 {
         z-index: 100;
         display: block;
         position: absolute;
         top: 0;
         right: -65px;
         height: 60px;
         width: 65px;
         line-height: 60px;
         font-size: 0.8em;
         font-weight: 300;
         letter-spacing: 1px;
         color: #fff;
         text-transform: uppercase;
         text-align: center;
         background-color: #353441;
         cursor: pointer;
         }
         nav h1:hover {
         color: #353441;
         background: #fff;
         }
         nav ul {
         margin: 0;
         padding: 0;
         }
         nav li {
         display: inline-block;
         padding: 0 1em;
         width: 100%;
         height: 60px;
         color: #9dc6d1;
         line-height: 60px;
         background-color: #353441;
         transition: all 0.5s ease-in;
         }
         nav li:nth-of-type(2n) {
         background-color: #3a3947;
         }
         nav li:hover {
         background: #6d44b8;
         color: rgb(255, 255, 255);
         }
         main {
         z-index: 0;
         position: absolute;
         top: 0;
         left: 0%;
         bottom: 0;
         right: 0;
         display: flex;
         align-items: center;
         overflow: hidden;
         background-image: url("{% static 'image/1.jpg' %}");
         transform-origin: 0% 50%;
         background-size: 35%;
         width: 100%;
         }
         main:after {
         content: "";
         display: block;
         position: absolute;
         z-index: 1;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background: linear-gradient(
         to right,
         transparent,
         rgba(33, 33, 45, 0.5)
         );
         visibility: hidden;
         opacity: 0;
         transition: opacity 150ms ease-out, visibility 0s 150ms;
         }
         main.menu-active {
         border-radius: 0.001px;
         transform: translateX(16em) rotateY(15deg);
         }
         main.menu-active:after {
         visibility: visible;
         opacity: 1;
         transition: opacity 150ms ease-out, visibility 0s;
         }
         main.menu-hover {
         border-radius: 0.001px;
         transform: translateX(1em) rotateY(1deg);
         }
         main section {
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         margin: auto;
         padding: 1em 4em;
         max-width: 680px;
         overflow: auto;
         background-color: rgba(255, 255, 255, 0.753);
         }
         section h1 {
         font-weight: 800;
         font-size: 2em;
         }
         section p {
         display: inline-block;
         margin: 16px 0;
         }
         nav h1 button {
         cursor: pointer;
         position: absolute;
         top: -17px;
         left: 30%;
         height: 100px;
         background-color: transparent;
         border: 0;
         font-size: 26px;
         color: #fff;
         }
         nav h1 button:hover {
         color: #353441;
         }
         .logo {
         z-index: 1;
         position: absolute;
         width: 150px;
         top: 0;
         left: 82%;
         }
         .box {
         display: flex;
         border: 2px solid black;
         height: 50vh;
         border-radius: 5px;
         box-shadow: 5px 20px 50px #000;
         padding-bottom: 2rem;
         }
         h3 {
         margin: 15px;
         padding-top: 1rem;
         }
         .copyright{
         margin-top: 2rem;
         font-family: sans-serif;
         text-align: center;
         }
         .copyright hr{
         background-color: black;
         }
      </style>
   </head>
   <body>
      <nav class="menu-activea">
         <h1 class="hamb">
            <button id="open">
            <i class="fas fa-bars"></i>
            </button>
         </h1>
         <ul>
            <a href="{% url 'ChatBot'%}" rel="noopener noreferrer" style="text-decoration:none ;color: #fff; " >
               <li  style="cursor: pointer">
                  CHATBOT
               </li>
            </a>
            <li
               onclick="location.href=' https://drive.google.com/drive/folders/13aPy9KoDX3AWbkeech2AK-EBitiXEcNT';"
               style="cursor: pointer">
               NOTES
            </li>
            <a  href="{% url 'TimeTable'%}" rel="noopener noreferrer" style="text-decoration:none;color: #fff; ">
               <li style="cursor: pointer">
                  TIMETABLE
               </li>
            </a>
            <a  href="{% url 'Result'%}" rel="noopener noreferrer" style="text-decoration:none ;color: #fff; ">
               <li  style="cursor: pointer">
                  RESULT
               </li>
            </a>
            <a href="{% url 'About'%}" rel="noopener noreferrer" style="text-decoration:none ;color: #fff; ">
               <li>
                  ABOUT
               </li>
            </a>
            <a  href="{% url 'FAQ'%}" rel="noopener noreferrer" style="text-decoration:none ;color: #fff; ">
               <li style="cursor: pointer">
                  FAQ
               </li>
            </a>
            <a  href="{% url 'logout'%}" rel="noopener noreferrer" style="text-decoration:none ;color: #fff;">
               <li style="cursor: pointer">
                  LOGOUT
               </li>
            </a>
         </ul>
      </nav>
      <main>
         <img class="logo" src="{% static 'image/HAUS.png' %}" >
         <section>
            <br /><br /><br />
            <h1>HAUS-Connect</h1>
            <small>Student's Portal</small>
            <br />
            <div class="container">


<p>
                  HAUS-Connect is  platform where all the faculties can send notice,Schedule Exam and Schedule Lectures. Any action performed by faculty will send a text message to all the students informing them about any upcoming events. HAUS-Connect aims to decrease the ridge between Student and Faculty.It is a firm of the Students,by the Students, for the Students.
               </p>


            </div>
            <div class="container">
               <h3>Announcement </h3>
               <div class="box">
                  <center>
                     {% for t in t1 %}
                     {{ t }}<br>
                     {% endfor %}
                  </center>
               </div>
            </div>
            <div class="container">
               <h3>Lectures</h3>
               <div class="box">
                  {% for t in t2 %}
                  You have a {{t.subject}}
                  extra class on {{t.date}}
                  from {{t.time_start}}
                  to {{t.time_end}}
                  <br>
                  {% endfor %}
               </div>
            </div>
            <div class="container">
               <h3>Exam</h3>
               <div class="box">
                  {% for t in t3 %}
                  You have a {{t.subject}}
                  extra class on {{t.date}}
                  from {{t.time_start}}
                  to {{t.time_end}}
                  <br>
                  {% endfor %}
               </div>
            </div>
            <div class="copyright">
               <hr>
               <h3>
                  © 2021 HAUS - All Rights Reserved
               </h3>
            </div>
         </section>
      </main>
      <script>
         (function () {
           var nav = $("nav"),
             menu = $("nav h1"),
             main = $("main"),
             open = false,
             hover = false;

           menu.on("click", function () {
             open = !open ? true : false;
             nav.toggleClass("menu-active");
             main.toggleClass("menu-active");
             nav.removeClass("menu-hover");
             main.removeClass("menu-hover");
             console.log(open);
           });
           menu.hover(
             function () {
               if (!open) {
                 nav.addClass("menu-hover");
                 main.addClass("menu-hover");
               }
             },
             function () {
               nav.removeClass("menu-hover");
               main.removeClass("menu-hover");
             }
           );
         })();
      </script>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

HTML

<!-- Time Table  -->
{% load static %}
{% if user.is_authenticated %}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>TIMETABLE</title>
      <link rel="stylesheet" type="text/css" href="{% static 'css/Timetable.css' %}" />
   </head>
   <body>
      <div class="limiter">
         <div class="container-table100" >
            <div class="wrap-table100">
               <div class="table100 ver3">
                  <table data-vertable="ver3">
                     <thead>
                        <tr class="row100 head">
                           <th class="column100 column1" data-column="column1"></th>
                           <th class="column100 column2" data-column="column2">
                              Sunday
                           </th>
                           <th class="column100 column3" data-column="column3">
                              Monday
                           </th>
                           <th class="column100 column4" data-column="column4">
                              Tuesday
                           </th>
                           <th class="column100 column5" data-column="column5">
                              Wednesday
                           </th>
                           <th class="column100 column6" data-column="column6">
                              Thursday
                           </th>
                           <th class="column100 column7" data-column="column7">
                              Friday
                           </th>
                           <th class="column100 column8" data-column="column8">
                              Saturday
                           </th>
                        </tr>
                     </thead>
                     <tbody>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              8:00 AM - 9:00 AM
                           </td>
                           <td class="column100 column2" data-column="column2">
                              --
                           </td>
                           <td class="column100 column3" data-column="column3">Data Structures</td>
                           <td class="column100 column4" data-column="column4">Digital Electronics</td>
                           <td class="column100 column5" data-column="column5">Microprocessor Programming</td>
                           <td class="column100 column6" data-column="column6">OOPS With Java</td>
                           <td class="column100 column7" data-column="column7">
                              Open Elective
                           </td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              9:00 AM - 10:00 AM
                           </td>
                           <td class="column100 column2" data-column="column2">--</td>
                           <td class="column100 column3" data-column="column3">
                              Discrete Math
                           </td>
                           <td class="column100 column4" data-column="column4">
                              Discrete Math
                           </td>
                           <td class="column100 column5" data-column="column5">OOPS With Java</td>
                           <td class="column100 column6" data-column="column6">
                              Data Structures
                           </td>
                           <td class="column100 column7" data-column="column7">Data Structures - Lab</td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              10:00 AM - 11:00 AM
                           </td>
                           <td class="column100 column2" data-column="column2">
                              --
                           </td>
                           <td class="column100 column3" data-column="column3">Open Elective</td>
                           <td class="column100 column4" data-column="column4">Data Structures - Lab</td>
                           <td class="column100 column5" data-column="column5">Data Structures</td>
                           <td class="column100 column6" data-column="column6">Discrete Math</td>
                           <td class="column100 column7" data-column="column7">
                              OOPS With Java
                           </td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              11:00 AM - 12:00 PM
                           </td>
                           <td class="column100 column2" data-column="column2">--</td>
                           <td class="column100 column3" data-column="column3">
                              Microprocessor Programming - Lab
                           </td>
                           <td class="column100 column4" data-column="column4">
                              OOPS With Java
                           </td>
                           <td class="column100 column5" data-column="column5">Open Elective</td>
                           <td class="column100 column6" data-column="column6">
                              Digital Electronics - Lab
                           </td>
                           <td class="column100 column7" data-column="column7">Microprocessor Programming</td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              12:00 PM - 1:00 PM
                           </td>
                           <td class="column100 column2" data-column="column2">
                              --
                           </td>
                           <td class="column100 column3" data-column="column3">Digital Electronics</td>
                           <td class="column100 column4" data-column="column4">Microprocessor Programming</td>
                           <td class="column100 column5" data-column="column5">
                              Discrete Math - Tutorial
                           </td>
                           <td class="column100 column6" data-column="column6">Microprocessor Programming - Lab</td>
                           <td class="column100 column7" data-column="column7">
                              OOPS With Java - Lab
                           </td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              1:00 PM - 2:00 PM
                           </td>
                           <td class="column100 column2" data-column="column2">--</td>
                           <td class="column100 column3" data-column="column3">
                              Discrete Math
                           </td>
                           <td class="column100 column4" data-column="column4">
                              OOPS With Java - Lab
                           </td>
                           <td class="column100 column5" data-column="column5">Data Structures</td>
                           <td class="column100 column6" data-column="column6">Digital Electronics</td>
                           <td class="column100 column7" data-column="column7">Discrete Math</td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              2:00 PM - 3:00 PM
                           </td>
                           <td class="column100 column2" data-column="column2">
                              --
                           </td>
                           <td class="column100 column3" data-column="column3">--</td>
                           <td class="column100 column4" data-column="column4">--</td>
                           <td class="column100 column5" data-column="column5">--</td>
                           <td class="column100 column6" data-column="column6">--</td>
                           <td class="column100 column7" data-column="column7">
                              --
                           </td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                        <tr class="row100">
                           <td class="column100 column1" data-column="column1">
                              3:00 PM - 4:00 PM
                           </td>
                           <td class="column100 column2" data-column="column2">--</td>
                           <td class="column100 column3" data-column="column3">--</td>
                           <td class="column100 column4" data-column="column4">--</td>
                           <td class="column100 column5" data-column="column5">--</td>
                           <td class="column100 column6" data-column="column6">--</td>
                           <td class="column100 column7" data-column="column7">--</td>
                           <td class="column100 column8" data-column="column8">--</td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      </div>
      <!--===============================================================================================-->
      <script src="{% static 'js/jquery.js' %}"></script>
      <!--===============================================================================================-->
      <script src="{% static 'js/TimeTable.js' %}"></script>
      <style>
         .container-table100{
         background:  url("{%static 'image/1.jpg'%}") no-repeat center/ cover;}
      </style>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

views.py

This file lets us manage how the page will be displayed and who will be able to see the page.

Python3

from Teacher.models import Announcements, Exam, Class
from django.shortcuts import render
from django.contrib.auth import logout
from django.http import HttpResponse, HttpResponseRedirect

# Create your views here.
def home(response):
    t1 = Announcements.objects.all()
    t2 = Class.objects.all()
    t3 = Exam.objects.all()
    return render(response, "Student/student_home.html",
                  {"t1": t1, "t2": t2, "t3": t3})


def chatbot(response):
    return render(response, "Student/ChatBot.html")

def timetable(response):
    return render(response, "Student/TimeTable.html")


def result(response):
    return render(response, "Student/Result.html")

def faq(response):
    return render(response, "Student/faq.html")


def logout_request(request):
    logout(request)
    return render(request, "Student/student_home.html", {})

def about(request):
    return render(request, "Student/About.html", {})

urls.py

Here we set paths for our templates.

Python3

from django.urls import path
from . import views

urlpatterns = [
    path("student_home/", views.home, name="Home"),
    path("chatbot/", views.chatbot, name="ChatBot"),
    path("FAQ/", views.faq, name="FAQ"),
    path("Result/", views.result, name="Result"),
    path("TimeTable/", views.timetable, name="TimeTable"),
    path("logout/", views.logout_request, name="logout"),
    path("about/", views.about, name="About")
]

Teachers App

This app handles the teachers side of the project.

Templates:

All these pages are not visible to anyone that is not logged in and the accounts with ‘student’ status are not allowed to use them.

HTML

<!-- Announcement.html-->
{% load static %}
<!DOCTYPE html>
<html>
   {% if user.is_authenticated %}
   <head>
      <title>Create Announcement</title>
      <link rel="stylesheet" type="text/css" href="{% static 'Teacher/css/announcement.css' %}">
      <link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
   </head>
   <body>
      <div class="main">
         <div class="aanounce">
            <label for="chk" aria-hidden="true">Announcement</label>
            <form method="POST" action="/announcement/">
               {% csrf_token %}
               <div class="input">
                  {{form.text}}
               </div>
               <br>


<p>Tick this to send message
                  {{form.check}}
               </p>


               <br>
               <br>
               <button type="submit",name="save"> Send </button>
            </form>
         </div>
      </div>
      <style>
         .main{
         width: 350px;
         height: 500px;
         background: red;
         overflow: hidden;
         background: url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
         border-radius: 10px;
         box-shadow: 5px 20px 50px #000;
         }
      </style>
      <script>
         var form_fields = document.getElementsByTagName('input')
         form_fields[1].placeholder='Write your announcement';

      </script>
   </body>
   {% else %}
   <html>
      <head>
         <title>
            {% block title %}Please Login {% endblock %}
         </title>
      </head>
      <body class="main">
         <h1 class="ml5">
            <span class="text-wrapper">
            <span class="line line1"></span>
            <span class="letters letters-left">HAUS</span>
            <span class="letters ampersand">~</span>
            <span class="letters letters-right">Connect</span>
            <span class="line line2"></span>
            </span>
         </h1>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
         <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


           </center>
         <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
           </center>
      </body>
      <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
      <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
      <style>
         .main{
         background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
         }
      </style>
   </html>
   {% endif %}
</html>

HTML

<!-- Base.html-->
{% load static %}
<html>
    <head>
        <title>
            {% block title %}Please Login {% endblock %}
        </title>
    </head>

    <body class="main">
        <h1 class="ml5">
            <span class="text-wrapper">
              <span class="line line1"></span>
              <span class="letters letters-left">HAUS</span>
              <span class="letters ampersand">~</span>
              <span class="letters letters-right">Connect</span>
              <span class="line line2"></span>
            </span>
          </h1>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

        <center><p style="color:#f2f2f4">You dont have authorization to access this page. </p>

  </center>
        <center><p style="color:#f2f2f4">If you are a professor contact administrator. </p>

  </center>
        <center>  <h2 style="color:#f2f2f4"><a href="/student_home" style="color:#f2f2f4">Click here</a> if you are a student</h2></center>


    </body>
    <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
    <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
    <style>
        .main{
  background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
            }
    </style>
</html>

HTML

<!-- Class.html-->
{% load static %}
<!DOCTYPE html>
<html>
    {% if user.is_authenticated %}

<head>
    <title>Schedule Class</title>
    <link rel="stylesheet" type="text/css" href="{% static 'Teacher/css/class.css' %}">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="main">


        <form method="POST" action="/class/">
            <br>
            <br>
            <label for="chk" aria-hidden="true">Class</label>
            {% csrf_token %}
            <br>


<p>
            {{form.subject.label}}
            {{form.subject}}
            </p>





<p>
                {{form.date.label}}
                {{form.date}}
            </p>





<p>
            {{form.time_start.label}}
            {{form.time_start}}
        </p>




<p>
            {{form.time_end.label}}
            {{form.time_end}}
        </p>





<p>
            {{form.check.label}}
            {{form.check}}
        </p>



            <button type="submit",name="save"> Schedule Class </button>

        </form>

    </div>

    <style>
        .main{
    width: 350px;
    height: 590px;
    background: red;
    overflow: hidden;
    background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
    border-radius: 10px;
    box-shadow: 5px 20px 50px #000;
}
    </style>
    <script>

        var form_fields = document.getElementsByTagName('input')
        form_fields[1].placeholder='Subjcet';
        form_fields[2].placeholder='DD/MM/YY';
        form_fields[3].placeholder='HH:MM AM/PM';
        form_fields[4].placeholder='HH:MM AM/PM';

    </script>
</body>
{% else %}
<html>
    <head>
        <title>
            {% block title %}Please Login {% endblock %}
        </title>
    </head>

    <body class="main">
        <h1 class="ml5">
            <span class="text-wrapper">
              <span class="line line1"></span>
              <span class="letters letters-left">HAUS</span>
              <span class="letters ampersand">~</span>
              <span class="letters letters-right">Connect</span>
              <span class="line line2"></span>
            </span>
          </h1>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

        <center><p style="color:#f2f2f4">Sadly you are not logged in</p>

  </center>
        <center>  <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2></center>

    </body>
    <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
    <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
    <style>
        .main{
  background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
            }
    </style>
</html>

{% endif %}
</html>

HTML

<!-- Exam.html -->
{% load static %}
<!DOCTYPE html>
<html>
    {% if user.is_authenticated %}

<head>
    <title>Schedule Exam</title>
    <link rel="stylesheet" type="text/css" href="{% static 'Teacher/css/exam.css' %}">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="main">


    <form method="POST" action="/exam/">
        <br>
        <label for="chk" aria-hidden="true">Exam</label>
        {% csrf_token %}
        <br>


<p>
        {{form.subject.label}}
        {{form.subject}}
        </p>





<p>
            {{form.date.label}}
            {{form.date}}
        </p>





<p>
        {{form.time_start.label}}
        {{form.time_start}}
    </p>




<p>
        {{form.time_end.label}}
        {{form.time_end}}
    </p>





<p>
        {{form.check.label}}
        {{form.check}}
    </p>


    <br>
        <button type="submit",name="save"> Schedule Exam </button>

    </form>


    </div>
</body>

<style>
    .main{
    width: 350px;
    height: 590px;
    background: red;
    overflow: hidden;
    background: url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
    border-radius: 10px;
    box-shadow: 5px 20px 50px #000;
}
</style>
{% else %}
      <html>
        <head>
            <title>
                {% block title %}Please Login {% endblock %}
            </title>
        </head>

        <body class="main">
            <h1 class="ml5">
                <span class="text-wrapper">
                  <span class="line line1"></span>
                  <span class="letters letters-left">HAUS</span>
                  <span class="letters ampersand">~</span>
                  <span class="letters letters-right">Connect</span>
                  <span class="line line2"></span>
                </span>
              </h1>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

            <center><p style="color:#f2f2f4">Sadly you are not logged in</p>

  </center>
            <center>  <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2></center>

        </body>
        <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
        <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
        <style>
            .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
                }
        </style>
    </html>

  {% endif %}
</html>

HTML

<!-- home.html -->
{% load static %}
<!DOCTYPE html>
<html lang="en">
   {% if user.is_authenticated %}
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
         rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
         integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
         crossorigin="anonymous"
         />
      <link rel="stylesheet" href="{% static 'Teacher/css/style.css' %}" />
      <title>Teacher's Portal</title>
      <img class="pdeu" src="{% static 'Teacher/images/h1.png' %}" alt="PDEU">
   </head>
   <body>
      <!------------------------------------------------------>
      {% include 'Teacher/messages.html' %}
      <!------------------------------------------------------>
      <div class="container">
         <div class="content">
            <h1>HAUS-Connect</h1>
            <small>Teacher's Portal</small>


<p>
               Basically, here all Faculty's can send notice , Schedule Exam and Schedule Lectures. Any action performed by Faculty will send a text message to all students informing them about any upcoming events. HAUS-Connect aims to decrease the ridge between Student and Faculty.It is a firm of the Students,by the Students, for the Students.
            </p>


            <h2>TimeTable</h2>
            <small>*Note this is fixed timetable provided by the institution </small>
            <div class="container1">
               <div
                  class="panel active"
                  style="
                  background-image: url(https://drive.google.com/uc?export=view&id=1EYoNIJNZe7s7cFA3rBvNxesi-TZONIoe);
                  "
                  >
               </div>
               <div
                  class="panel"
                  style="
                  background-image: url(https://drive.google.com/uc?export=view&id=1MKpz6fFHogku_2f-9JUOkqBwT36VgITb);
                  "
                  >
               </div>
               <div
                  class="panel"
                  style="
                  background-image: url(https://drive.google.com/uc?export=view&id=1Jytl4YnqtN5-hVqmciOVy-WQc5UfUuyB);
                  "
                  >
               </div>
               <div
                  class="panel"
                  style="
                  background-image: url(https://drive.google.com/uc?export=view&id=1KB4D5-qJUelFc_Xa6ZmfTmKdM_zD6f52);
                  "
                  >
               </div>
               <div
                  class="panel"
                  style="
                  background-image: url(https://drive.google.com/uc?export=view&id=1-VDdpedgkyjlYWMrraIcafjC-YTduY0O);
                  "
                  >
               </div>
            </div>


<p>
               We the students of PDEU CE`20 batch, appreciate you for putting all your efforts  and helping us throughout the day from solving our 'silly' doubts to help us in any problem which we faced during college.
            </p>


            <small>-Thanking You.</small>
            <div class="copyright">
               <hr>
               <h3>
                  © 2021 HAUS - All Rights Reserved
               </h3>
            </div>
         </div>
      </div>
      <div class="circle-container">
         <div class="circle">
            <button id="close">
            <i class="fas fa-times"></i>
            </button>
            <button id="open">
            <i class="fas fa-bars"></i>
            </button>
         </div>
      </div>
      <nav>
         <ul>
            <li>
               <a href="{% url 'Announcement'%}" title=""  rel="noopener noreferrer"><i class="fas fa-bullhorn"></i>Notice</a>
            </li>
            <li>
               <a href="{% url 'Extra Class'%}"  rel="noopener noreferrer"><i class="fas fa-book"></i>Class</a>
            </li>
            <li>
               <a href="{% url 'Exams'%}"  rel="noopener noreferrer"><i class="fas  fa-graduation-cap"></i>Exam</a>
            </li>
            <li >
               <a href="{% url 'logout'%}"  rel="noopener noreferrer"><i class="fas fa-sign-out-alt" aria-hidden="true"></i>Logout</a>
            </li>
         </ul>
      </nav>
      <script src="{% static 'Teacher/js/app.js' %}"></script>
      <script src="{% static 'Teacher/js/app1.js' %}"></script>
   </body>
</html>
{% else %}
<html>
   <head>
      <title>
         {% block title %}Please Login {% endblock %}
      </title>
   </head>
   <body class="main">
      <h1 class="ml5">
         <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters letters-left">HAUS</span>
         <span class="letters ampersand">~</span>
         <span class="letters letters-right">Connect</span>
         <span class="line line2"></span>
         </span>
      </h1>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
      <center>
         <p style="color:#f2f2f4">Sadly you are not logged in</p>


      </center>
      <center>
         <h2><a href="/login" style="color:#f2f2f4"> Login Here</a></h2>
      </center>
   </body>
   <link rel="stylesheet" href="{% static 'Teacher/css/base.css' %}">
   <script type="text/javascript" src="{% static 'Teacher/js/base.js' %}"></script>
   <style>
      .main{
      background:  url("{%static 'Register/images/1.jpg'%}") no-repeat center/ cover;
      }
   </style>
</html>
{% endif %}

HTML

<!--Logout.html-->
<html>
    <head>
        <title>
            Login here
        </title>
    </head>
{% load crispy_forms_tags %}

    <body>
        <h1>Register Here</h1>

        <form method="post" class="form-group">
            {% csrf_token %}
            {{ form|crispy }}
            <button type="submit" class="btn btn-success"> Log in </button>



<p>Dont have an account? Create one <a href="/register">here </a></p>


        </form>
    </body>
</html>

HTML

<!-- message.html-->
{% if messages %}
    {% for message in messages %}
    <div class="alert alert-{{ message.tags }} m-2" id='msg' role='alert'>
       <center>{{message}}</center>
    </div>
    <script>
        setTimeout(function(){
          if ($('#msg').length>0){
            $('#msg').remove();
          }
        },2000)
      </script>
    {% endfor %}
{% endif %}

admin.py

This is used to register the models which will use database

Python3

from django.contrib import admin
from .models import *
# Register your models here.

admin.site.register(Announcements)
admin.site.register(Class)
admin.site.register(Exam)

apps.py

Register the app

Python3

from django.apps import AppConfig

class TeacherConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'Teacher'

decorator.py

This file enables us to restrict access to pages.

Python3

from django.http import HttpResponse
from django.shortcuts import redirect, render


def allowed_users(allowed_roles=[]):
    def decorator(view_func):
        def wrapper_func(request, *args, **kwargs):
            group = None

            if request.user.groups.exists():
                group = request.user.groups.all()[0].name
            if group in allowed_roles:
                return view_func(request, *args, **kwargs)
            else:
                return render(request, "Teacher/base.html", {})

        return wrapper_func
    return decorator'

forms.py

Creation of forms

Python3

from django import forms


class createnewannouncement(forms.Form):
    text = forms.CharField(label="Announcement", max_length=1000)
    check = forms.BooleanField(label="Send message", required=False)


class schedule_extra_class(forms.Form):
    subject = forms.CharField(label="Subject", max_length=20)
    date = forms.CharField(label="Date", max_length=20)
    time_start = forms.CharField(label="Starting Time", max_length=20)
    time_end = forms.CharField(label="Ending Time", max_length=20)
    check = forms.BooleanField(label="Send message", required=False)


class schedule_exam(forms.Form):
    subject = forms.CharField(label="Subject ", max_length=20)
    date = forms.CharField(label="Date", max_length=20)
    time_start = forms.CharField(label="Starting Time", max_length=20)
    time_end = forms.CharField(label="Ending Time", max_length=20)
    check = forms.BooleanField(label="Send message", required=False)

models.py

This sets up databases for the forms to save data in

Python3

from django.db import models

class Announcements(models.Model):
    text = models.TextField(max_length=500)

    def __str__(self):
        return self.text


class Class(models.Model):
    subject = models.TextField(max_length=50)
    date = models.TextField(max_length=50)
    time_start = models.TextField(max_length=5)
    time_end = models.TextField(max_length=5)
    message = "You have a {0} extra class on {1} from {2} to {3}".format(
        str(subject), str(date), str(time_start), str(time_end))

    def __str__(self):
        message = "You have a {0} extra class on {1} from {2} to {3}".format(
            str(self.subject), str(self.date), str(self.time_start), str(self.time_end))
        return self.message


class Exam(models.Model):
    subject = models.TextField(max_length=50)
    date = models.TextField(max_length=50)
    time_start = models.TextField(max_length=5)
    time_end = models.TextField(max_length=5)
    message = "You have a {0} exam on {1} from {2} to {3}".format(
        str(subject), str(date), str(time_start), str(time_end))

    def __str__(self):
        message = "You have a {0} exam on {1} from {2} to {3}".format(
            str(self.subject), str(self.date), str(self.time_start), str(self.time_end))
        return self.message

sending_messages.py

This file is responsible for sending messages to the provided numbers

Python3

def send_message(message):
    from twilio.rest import Client

    client = Client("Account SId", "Auth token")

    numbers = ["+916351816925", "+91xxxxxxxxxx",
               "+91xxxxxxxxxx", "+91xxxxxxxxxx"]
    names = ["Sarthak", "Hardeep", "Utsav", "Ahmed"]

    for i in range(4):
        m = ("Hello {} ".format(names[i]))+message
        client.messages.create(to=numbers[i],
                               from_="number provided by the api",
                               body=(m))

urls.py

Links templates to addresses

Python3

from django.urls import path
from . import views

urlpatterns = [
    path("", views.home, name="Home"),
    path("<int:id>", views.index, name="index"),
    path("announcement/", views.create_announcement, name="Announcement"),
    path("class/", views.create_class, name="Extra Class"),
    path("exam/", views.create_exam, name="Exams"),
    path("logout/", views.logout_request, name="logout"),
    path("base/", views.base, name="Base"),


]

views.py

This file lets us manage how the page will be displayed and who will be able to see the page. Also this is where we use the decorator.py to restrict access.

Python3

from datetime import date
from django.shortcuts import render
from django.contrib.auth import logout
from django.http import HttpResponse, HttpResponseRedirect
from django.contrib import messages
from .decorator import allowed_users

from .models import *
from .forms import *
from .Sending_messages import *


def base(request):
    return render(request, "Teacher/base.html")


@allowed_users(allowed_roles=['admin', 'Professor'])
def home(response):
    return render(response, "Teacher/home.html")


def logout_request(request):
    logout(request)
    return render(request, "Teacher/home.html", {})


@allowed_users(allowed_roles=['admin', 'Professor'])
def index(response, id):
    a = Announcements.objects.get(id=id)
    return render(response, "Teacher/home.html", {})


@allowed_users(allowed_roles=['admin', 'Professor'])
def create_announcement(response):
    if response.method == "POST":
        form = createnewannouncement(response.POST)

        if form.is_valid():
            t = form.cleaned_data["text"]
            a = Announcements(text=t)
            a.save()

            if form.cleaned_data["check"] == True:
                send_message(t)
                messages.success(
                    response, 'Announcement was saved and messages are sent')
            else:
                messages.success(response, 'Announcement was saved')
            return render(response, "Teacher/home.html", {})
    else:
        form = createnewannouncement()
        return render(response, "Teacher/announcement.html", {"form": form})


@allowed_users(allowed_roles=['admin', 'Professor'])
def create_class(response):
    if response.method == "POST":
        form = schedule_extra_class(response.POST)

        if form.is_valid():
            c1 = form.cleaned_data["subject"]
            c2 = form.cleaned_data["date"]
            c3 = form.cleaned_data["time_start"]
            c4 = form.cleaned_data["time_end"]
            c = Class(subject=c1, date=c2, time_start=c3, time_end=c4)
            c.save()
            t = "You have a {0} extra class on {1} from {2} to {3}".format(
                str(c1), str(c2), str(c3), str(c4))
            if form.cleaned_data["check"] == True:
                send_message(t)
                messages.success(
                    response, 'Class is scheduled and messages are sent')
            else:
                messages.success(response, 'Class is scheduled')
            return render(response, "Teacher/home.html", {"text": t})
    else:
        form = schedule_extra_class()
        return render(response, "Teacher/class.html", {"form": form})


@allowed_users(allowed_roles=['admin', 'Professor'])
def create_exam(response):
    if response.method == "POST":
        form = schedule_exam(response.POST)

        if form.is_valid():
            e1 = form.cleaned_data["subject"]
            e2 = form.cleaned_data["date"]
            e3 = form.cleaned_data["time_start"]
            e4 = form.cleaned_data["time_end"]
            e = Exam(subject=e1, date=e2, time_start=e3, time_end=e4)
            e.save()
            t = "You have a {0} exam on {1} from {2} to {3}".format(
                str(e1), str(e2), str(e3), str(e4))
            if form.cleaned_data["check"] == True:
                send_message(t)
                messages.success(
                    response, 'Exam is scheduled and messages are sent')
            else:
                messages.success(response, 'Exam is scheduled')
            return render(response, "Teacher/home.html", {"text": t})
    else:
        form = schedule_exam()
        return render(response, "Teacher/exam.html", {"form": form})

Output

Login Page:

LOGIN PAGE

Insights from Teacher’s portal:

Teacher’s Portal – HOMEPAGE

Teacher’s Portal-NOTICE / ANNOUNCEMENT TAB

There are also other tabs like exam and class in which faculty can schedule an exam and class.

Insight from Student’s portal:

Student’s Portal-HOME PAGE

Student’s Portal-TIMETABLE TAB

Student’s Portal – RESULT TAB

Student’s portal – ABOUT US & FAQ TAB

There also exist other tabs like chatbot and notes.

Logout Option:

LOGOUT PAGE

GitHub Link – HAUS-Connect

Team members

• Hardeep Patel
• Ahmed Mulla
• Utsav Mehta
• Sarthak Kapaliya