Web Based Application on Notes Making App

 Department of Artificial Intelligence & Data Science 

PES Modern College of Engineering, Pune

Developers

Shankar Karande 
Sainath Kolpe
Onkar Komatwar 

Abstract

                   As the world is being created with the modern technologies, finding and controlling modern thoughts and ideas of taking everything online are quickly changing. Notes Making app give a straightforward approach for students create and circulate the notes whether of any kind like address notes, task questions, address papers and all the vital archives. Student Can add, delete or update their own notes any time in this app. Also, we provide security for the app no one can see notes of another user (Registration/ Login). Application available 24x7, N number of records and notes you can enter and saves it in your private account. 

Introduction

We developed web-based application on notes making app. The notes making app can create easy notes or you can give title to that note. In this web app first user can create their own account by through signup activity page. After creating account user will create their own notes and save it on app. Also, users can perform some operations on it like create, delete, modify and show. 

After completion of creating notes successfully user can logout from app. Also, if user want to delete account from the app it will easily delete their account using login credentials. User can see the about and information document about this web app using about activity page. If you are student, then this web app is best for you to store notes in real-time in the database.

Problem Definition

The main objective of the note’s making app is to create their own notes and perform some DML operation on it.

 Project Objective

·      By using Html, CSS, JavaScript, Bootstrap, Python, Flask, Jinja Templates and SQLite database we built this project.

·      We developed the UI and frontend using Html, CSS, JavaScript and Bootstrap also we used jinja template extension for declare or access python variables in html to perform some operation.

·      Python and Python framework flask used to run this project on server.

·      SQLite database is also used to store, update and delete the notes in the app.

·    Also, this web app is more user friendly and easy to use to all users. Users can easily create their own account and creating notes on it.




Graphical User Interface

1.     Login Activity Page



·   This is first page of our web app. If user is already having an account in our web app, then login first and use app.

· You can see there are two fields for login. First is ‘emai_id’ and second is ‘Password’, You should enter correct password for login.

·    If you forget your password there is no such option to change your password so remember your password.

·   In future we will be add this such type of options for the user to forget their own password and get their notes back.


2.    Registration Activity Page



  •   You are first time in our web app then your first task is to create your account in web app then      you directly going to home activity page create your own notes and stored in other activity page.
  • You should enter the same password for confirm password field then your account will be created successfully.


3.     Home Activity Page



  •  This is our home activity page. By using this page user can only perform two simple operations create notes and show(view).
  • There are two sections for creating notes first is title and second is brief notes there is no size limit for note section you can write anything you want.
  • After complete writing title and note you can just click on ‘Add note’ button your note will successfully added and saved in show activity page.
  • SQLite database is used to store and add notes in another activity for finding note and easy to see


 4.     Notes Show Activity Page



·    After successfully performed creation of notes operation user will be able to see their own notes privately & other users can’t see these notes because every user has unique id.

·       In this activity user can see their notes serial number, title, note, date/time and also see their two-modification option.

·       First option is to ‘modify’, or ‘update’ current note or changes note, or title name user can easily update their note.

·    Last option is ‘deleted’ when user don’t want to store and see their stored notes, you can perform delete operation easily on that note.


5.     Logout & About Activity page



·     In this page you can see after exploring the overall structure of the web app user will a ‘More’ option or dropdown menu.

·       Their three options in dropdown Menu:

First option is ‘About’, In this about activity you will see overall info about project & Members.

Second option is ‘Delete’, User will delete their own account by using delete option.

Third option is ‘Logout’, User will logout from web app whenever he/she want

   

 

6.     Database Structure



  • First table for users. All user's info like email, password, id or first name is stored in the form of columns or rows.
  •  Second table for storing user notes. There are five columns in the table note id, note, title, data, date/time or user_id. Also, these will store in the form of columns or rows.

GitHub Code Link: - Click Here


Conclusion

We successfully implemented a web-based application on notes taking app. We learned so many things or technology from this project such as python, Flask web framework, SQLite database also learned implement frontend, backend and how to connect with each other. Also, we use jinja web templates extension to use python variables in html or base file. 

Reference

Credits - Shankar Karande

Comments

Popular posts from this blog

Covid Face Mask Detection.

Realtime Chatting Application.