HAUS Connect – Proyecto Python

Posted on by Rudeus Greyrat

Uno de los problemas más comunes que enfrentan los estudiantes universitarios es que tenemos horarios muy erráticos y es una tarea engorrosa mantenerse al día con ellos, estos problemas se han amplificado enormemente durante estos tiempos de pandemia donde cada uno está solo. El propósito de esta aplicación es ayudar a los estudiantes a realizar un seguimiento de sus clases, exámenes y tareas, así como ayudar a optimizar la comunicación entre profesores y estudiantes. HAUS-Connect es una plataforma donde los profesores de la universidad pueden programar o reprogramar las reuniones o conferencias, también pueden configurar recordatorios para las pruebas y cargar material de estudio. Un chatbot ayudará a buscar material de estudio. Básicamente, queremos asegurarnos de que ninguno de nosotros pierda ningún plazo. De momento esto es para universitarios pero su versatilidad es inmensa,

Características

  • El profesorado puede cargar el enlace de las conferencias grabadas, el archivo .ppt y el pdf del libro de referencia.
  • El acceso a la modificación de horarios se facilitará únicamente al profesorado.
  • Se habilitará una sección de dudas donde el alumno deberá subir una foto de su duda y seleccionar el tema, aparecerá un mensaje en la pantalla del docente y podrá enviar la solución de la misma.
  • Un chatbot ayudará a buscar material de estudio
  • Se enviará un mensaje de texto y un correo electrónico directamente a todos los estudiantes si un profesor reprograma una reunión en particular.

Herramientas utilizadas:

Lado del cliente :

  • html
  • CSS
  • javascript

Lado del servidor :

  • base de datos mysql
  • Python
  • API de SMS
  • Django

Diagrama explicativo

Diagrama explicativo

Diagrama de inicio de sesión

Diagrama de inicio de sesión

Flujo de código

Flujo de código

Implementación paso a paso

Broadcaster: Esta es la carpeta que contiene los archivos para el proyecto principal.

Configuración.py

Este archivo declara todas las dependencias y otras configuraciones.

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 

Este archivo vincula URL de diferentes dependencias y otras aplicaciones al proyecto principal.

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")),
  
]

Ahora vamos a crear las aplicaciones necesarias para nuestro proyecto.

Registrar aplicación

Esta aplicación maneja el inicio de sesión y el registro de los usuarios.

Jerarquía de registro

Nota: la carpeta estática contiene todos los archivos estáticos, como archivos JavaScript, archivos CSS e imágenes.

Carpeta de plantillas

Puede ver que hay una carpeta de plantilla que contiene dos archivos HTML. El primer archivo es register.html y el segundo archivo es 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 %}

aplicaciones.py

Esto registra la aplicación ya que utilizará la base de datos.

Python3

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

formularios.py

Aquí se crea un formulario de registro personalizado.

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"]

vistas.py

Este archivo nos permite administrar cómo se mostrará la página y quién podrá verla.

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})

Aplicación para estudiantes

Esta aplicación maneja el lado del estudiante del proyecto.

Jerarquía de estudiantes

Plantillas:

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

Estas páginas no son visibles para nadie que no haya iniciado sesión.

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 %}

vistas.py

Este archivo nos permite administrar cómo se mostrará la página y quién podrá verla.

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

Aquí establecemos rutas para nuestras plantillas.

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")
]

Aplicación para maestros

Esta aplicación maneja el lado de los maestros del proyecto.

Plantillas:

Todas estas páginas no son visibles para nadie que no haya iniciado sesión y las cuentas con el estado de ‘estudiante’ no pueden usarlas.

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 %}

administrador.py

Esto se usa para registrar los modelos que usarán la base de datos.

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)

aplicaciones.py

registrar la aplicación

Python3

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

decorador.py

Este archivo nos permite restringir el acceso a las páginas.

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'

formularios.py

Creación de formularios

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)

modelos.py

Esto configura bases de datos para que los formularios guarden datos en

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

enviando_mensajes.py

Este archivo se encarga de enviar mensajes a los números proporcionados.

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

Vincula plantillas a direcciones

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"),
  
  
]

vistas.py

Este archivo nos permite administrar cómo se mostrará la página y quién podrá verla. También aquí es donde usamos decorator.py para restringir el acceso.

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})

Producción

Página de inicio de sesión:

PÁGINA DE INICIO DE SESIÓN

Perspectivas del portal del profesor:

Portal del profesor – PÁGINA DE INICIO

Portal del maestro-AVISO / PESTAÑA DE ANUNCIO

También hay otras pestañas como examen y clase en las que el profesorado puede programar un examen y una clase.

Información del portal del estudiante:

Portal del Estudiante-PÁGINA DE INICIO

Portal del estudiante-PESTAÑA HORARIO

Portal del Estudiante – PESTAÑA DE RESULTADOS

Portal del estudiante – PESTAÑA SOBRE NOSOTROS Y PREGUNTAS FRECUENTES

También existen otras pestañas como chatbot y notas.

Opción de cierre de sesión:

PÁGINA DE SALIDA

Enlace de GitHub – HAUS-Connect

Miembros del equipo

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

Publicación traducida automáticamente

Artículo escrito por ahmedmce20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *