Web Based Application on Notes Making App
Department of Artificial Intelligence & Data Science
PES Modern College of Engineering, Pune
·
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.
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
- flask.pocoo.org, Flask home
- flask.pocoo.org, Welcome to
Flask (Docs):
- Full Stack
Python, Flask development
Comments
Post a Comment