“Notes” is my cs50x final project Web Application. It is a basic web app that resembles a bit like 'Notes' from iCloud, and where you can create an account, sign in and start creating, updating, and deleting your notes, plus search for specific ones given their content.
Project Presentation (Video Demo): https://youtu.be/UJucGYwoDCA
- HTML - HTML5
- CSS - CSS3
- JavaScript
- Python 3
- Flask
- cs50 for SQL
- sqlite
It is the engine of the website, where all the data manipulation, queries to the database and the rendering of each webpage happens.
-
index
-
login
-
logout
-
register
-
add_new_note
-
update_note
-
delete_note
-
search_notes
index will only be executed as long as @helpers.login_required has return correctly. This function routes you to the main/home/index webpage which only you (the user, if and only if has been successfully logged in) can access. And where through a SQL query the function will render the said main/home/index webpage with the user's data (name, notes).
The login function, makes sure to first clean the current session and then process the data provided through the POST method to validate it. Login makes sure the 'user' enters valid data, such as username and password. It checks whether it's not empty if it is correct, and if it matches the data in the database or not. Again this last one uses an SQLite query.
When a validation error occurs, the function will return by rendering the webpage again, keeping the 'user's input values in place and showing to the user, what's wrong with the input value.
If the 'user' has successfully logged in, then the index.html webpage will be rendered and a -flash- message will be shown to the 'user'.
The logout function just clear the current 'user' session and return by rendering to index, which in consequence, will redirect to login.
register, as the word says, will 'register' the new user. It again will process the data provided through the POST method to validate it. register will make sure the 'user' enters valid data, such as username, password, and password confirmation. It checks whether it's not empty if it is correct, and in the case of the password, if both the password and the confirmation match. Then it will insert all the validated data into the -'users'- database (see notes.db *Understanding section). next it will query all data from the 'user', and store it in a variable to SET the current -session- with the 'user''s id afterwards will return by rendering index (/) and flash the user a "successfully register" message with the 'user''s name.
This function when the request method is POST will first store the current session id in a variable, then validate the new note content (if it is empty or not) and will insert into the user_notes table in the database (see notes.db *Understanding section) the note content where the 'user''s id matches. then will return by redirecting to index (/).
update_note behaves like add_new_note, except that this function will query to update the column note_content if the note_id matches. The function will store the note content into a variable as well as the note's id and then proceeds to query the update. Finally, the function will return by redirecting to index (/).
The delete_note function when the request method is POST, will store the selected note's id and query the deletion to the note that matches the given id. Finally, the function will return by redirecting to index (/).
If the request method is POST, the function will store the current session id, and it will get the value from the input to be searched. This value (value_searched) will be concatenated with two % (percentage symbols) to insert it into the later query. Then the function will query for a list of all the notes found that match the current user id and the value_searched. Later it will store the length of that list (as the number of notes found, AKA results) and lastly, it will return by rendering search-results.html and passing results and the list (notes_found) to the html file.
This file contains all the sub-functions used in app.py such as login_required and check_username.
f (the parameter passed to login_required) will be the function to be wrapped. login_required returns the wrapped function. This is done by creating an inner function and returning it. Note that the first two returns are part of decorated_function (the inner function, not invoked in this code, just defined), while the third one is part of > login_required. decorated_function is a function returned by login_required (it's another function object every time login_required is called). That function will be used instead of the one passed for f. So every time one would call index function, the call would go to the function returned by login_required(index) instead. And here is the documentation on @wraps => credits to Blauelf.
This function will query the users table in the notes database to retrieve the username that matches the username passed as a parameter then it will check whether the query successfully retrieves any data or not, and return said result as a boolean (true/false).
notes database is the main database, which holds four tables:
- 1: users, Which itself holds three columns => id (primary-key), username, hash. The last one is used as the password.
- 2: user_notes, which holds five columns => id (primary-key), user_id, note_content, date_time, and a reference to foreign key.
- 3: sqlite_sequence, the table automatically created by app.config.
- 4: and a UNIQUE INDEX table for username on users (1:).
for a more graphical peek, have a look at the => notes-db-template.db -file-.
The variable -noteTextarea- gets the element that has the data attribute indicated within [] square-brackets. then within a loop it listen for a click and as a result of it, this toggles two classes:
- 1: large => that apply a specific (height) to the element targeted, see folder animations/expand-note.css.
- 2: hidden => this last one is apply to the two times sibling's element, and it toggles the property (display) and (visibility).
see folder animations/toggle-visibility.css.
There are two variables, -newNoteForm- and -toggleNewNoteFormBtn-, each gets the element that has the data attribute indicated within [] square-brackets.
-toggleNewNoteFormBtn- is a collection of HTML elements, and on line 13 is associated with a forEach loop method that for each element it listens for a click (through an event listener) and calls the function -toggleHiddenClass()- (described next) passing as parameters the variable -newNoteForm- and -toggleNewNoteFormBtn- itself.
>> toggleHiddenClass(elements, element):
This function takes -elements- (a collection of HTML elements) and -element- (a single HTML element) as parameters. Within the function, it loops through -elements- with the "forEach" method, and for each element it toggles the element's class -hidden-. Finally, -element- also gets its class toggled.
- register
- add_new_note
- update_note
- delete_note
- search_notes
- login
- logout
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent