Skip to content

valigatotuS/Database-Driven-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Database Management: Project

Author: valigatotuS
Created: 09/12/2021

Table of Contents
  1. About This Project
  2. Web-app
  3. Deploy project
  4. Credits

About this project

Context

The purpose of this project is to learn developping simple database driven web-sites.

Built with

  • python [flask, sqlalchemy, jinja] python
  • SQL
  • html
  • css
  • javascript (little)

Description

The website must serve to log the attendances at school. The users involved are: students, teachers & administrators.

Requirements

  • Users are e.g. students who log in and join classes
  • Teachers can organize classes for a course
  • Administartors can create new courses and assign teachers and users to these courses

Roadmap

This project went through several stages...

  • Understanding the app requirements
  • Database design
  • Front-end design
  • REST-API design
  • Website testing
  • API-documentation
  • Project review

Folder Structure

src
├── app
│   ├── blueprints          => sub-apps (each contains routes, forms, static-files, templates)
│   ├── database            => database & management    (db, queries, models:tables)
│   ├── __init__.py         => app initialiser
│   ├── static              => global static assets (css, js, img)
│   └── templates           => global templates (html, jinja)
├── config.py               => app configuration file
├── Makefile                => script automating app launching and cleaning via console
└── run.py                  => app run-file

Web-app

Database

Following picture represent the Entity Relationship Diagram, describing the design of my database.
The entities are: User, UCourse, Course, Class and Attendance.
ER-diagram

We are using the python module "SQLAlchemy" for the database managament part of this project
SQLAlchemy is great for quick designing the entities and querying the tables safely, however I also tried SQL-like based queries to get a grasp of it
The database will be stored in an sqlite-file.

Front end

For the front-end of the website I designed multiples templates but I was never convinced of the result. I decided to recreate our University web-site with the requirements add-ons in order to get a good grasp of how html & css works.
VUB-dashboard first attempt
VUB-dashboard second attempt
VUB-dashboard VUB-dashboard-copy
The two first images represent my early prototypes of the website.
The third one represent ours University dashboard.
The last one is my recreation of it.

REST API

REST APIs communicate via HTTP requests to perform standard database functions like creating, reading, updating, and deleting records (also known as CRUD) within a resource. For example, a REST API would use a GET request to retrieve a record, a POST request to create one, a PUT request to update a record, and a DELETE request to delete one.

API-documentation

  • all inputs are checked and verified against improper format and sql-injections (regex-verif)
  • all routes require authentification through a session cookie

Deploy project

  1. Clone this project
    git clone ...
  2. Go to src/ directory
    cd src/
  3. Install the needed requirements
  4. Run the app
    $ make run

Have fun on my website!

Credits

This project is part of the course "Database Management" at the VUB for 3BA Industrial Sciences ELO-ICT students given by the instructors Ann Braeken & Tom Godden.

Sources

  • Miguel Grinberg's Flask tuto
  • Hackersandlackers Flask tuto