Skip to content

Commit 6445390

Browse files
rohinsoodrohinsood
committed
frontend crud lesson
1 parent 55c147a commit 6445390

File tree

1 file changed

+136
-11
lines changed

1 file changed

+136
-11
lines changed

‎_notebooks/2024-01-22-User-Profile-Lesson.ipynb

+136-11
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,139 @@
1515
"---"
1616
]
1717
},
18+
{
19+
"attachments": {},
20+
"cell_type": "markdown",
21+
"metadata": {},
22+
"source": [
23+
"# Understanding Sign-Up Code in the Frontend\n",
24+
"\n",
25+
"## HTML Structure\n",
26+
"```html\n",
27+
"<div id=\"signup-tab-content\" class=\"tab-content\">\n",
28+
" <h2 style=\"text-align: center;\">Sign Up</h2>\n",
29+
" <form>\n",
30+
" <input type=\"text\" id=\"new-name\" name=\"name\" placeholder=\"name\" required>\n",
31+
" <br>\n",
32+
" <input type=\"text\" id=\"new-email\" name=\"email\" placeholder=\"email\" required>\n",
33+
" <br>\n",
34+
" <input type=\"password\" id=\"new-password\" name=\"password\" placeholder=\"password\" required>\n",
35+
" <br>\n",
36+
" <input type=\"date\" id=\"new-dob\" name=\"dob\" required>\n",
37+
" <br>\n",
38+
" <button id=\"signUpButton\" class=\"login-button\" onclick=\"signUp()\">Sign Up</button>\n",
39+
" </form>\n",
40+
"</div>\n",
41+
"```\n",
42+
"\n",
43+
"## JavaScript Functions\n",
44+
"```javascript\n",
45+
"const signup_url = 'http://localhost:8085/api/person/post?';\n",
46+
"const login_url = 'http://localhost:8085/authenticate';\n",
47+
"\n",
48+
"function signUp() {\n",
49+
" // Extract user input values\n",
50+
" let email = document.getElementById(\"new-email\").value;\n",
51+
" let password = document.getElementById(\"new-password\").value;\n",
52+
" let name = document.getElementById(\"new-name\").value;\n",
53+
" let dob = document.getElementById(\"new-dob\").value;\n",
54+
"\n",
55+
" // Construct parameters for the sign-up API\n",
56+
" const params = {\n",
57+
" \"email\": email,\n",
58+
" \"password\": encodeURIComponent(password),\n",
59+
" \"name\": encodeURIComponent(name),\n",
60+
" \"dob\": encodeURIComponent(dob)\n",
61+
" };\n",
62+
"\n",
63+
" // Log sign-up fetch URL and make a POST request\n",
64+
" console.log(\"sign up fetch url: \" + signup_url + new URLSearchParams(params));\n",
65+
"\n",
66+
" fetch(signup_url + new URLSearchParams(params), {\n",
67+
" method: 'POST',\n",
68+
" })\n",
69+
" .then(response => response.json())\n",
70+
" .then(data => console.log(data))\n",
71+
" .catch(error => console.error('Error:', error));\n",
72+
"}\n",
73+
"\n",
74+
"// Additional logIn() function not used in the provided HTML structure\n",
75+
"```\n",
76+
"\n",
77+
"## API Requests Made\n",
78+
"1. **Sign-Up Request:**\n",
79+
" - Endpoint: `http://localhost:8085/api/person/post`\n",
80+
" - Method: POST\n",
81+
" - Parameters: email, password, name, dob\n",
82+
"\n",
83+
"2. **Login Request:**\n",
84+
" - Endpoint: `http://localhost:8085/authenticate`\n",
85+
" - Method: POST\n",
86+
" - Parameters: email, password\n",
87+
"\n",
88+
"## Interaction with HTML/CSS\n",
89+
"- The JavaScript functions interact with the HTML elements using `getElementById` to extract user input.\n",
90+
"- The `signUp` function constructs a parameter object based on user input and sends a POST request to the sign-up API endpoint.\n",
91+
"- The `logIn` function is defined but not used in the provided HTML structure.\n",
92+
"\n",
93+
"This code assumes a local development environment and does not consider security measures for production."
94+
]
95+
},
96+
{
97+
"attachments": {},
98+
"cell_type": "markdown",
99+
"metadata": {},
100+
"source": [
101+
"# Understanding Profile Management Frontend Code\n",
102+
"\n",
103+
"## JavaScript Functions\n",
104+
"```javascript\n",
105+
"// Function to decode JWT token and retrieve user email and ID\n",
106+
"const decode = token => decodeURIComponent(atob(token.split('.')[1].replace('-', '+').replace('_', '/')).split('').map(c => `%${('00' + c.charCodeAt(0).toString(16)).slice(-2)}`).join(''));\n",
107+
"\n",
108+
"// Function to retrieve a cookie value by name\n",
109+
"function getCookie(name) { /* ... */ }\n",
110+
"\n",
111+
"// Function to update user profile data from the backend\n",
112+
"function update() { /* ... */}\n",
113+
"\n",
114+
"// Function to edit user statistics\n",
115+
"function edit() { /* ... */}\n",
116+
"\n",
117+
"// Function to post user statistics to the backend\n",
118+
"function post() { /* ...*/ }\n",
119+
"\n",
120+
"// Function to delete user account\n",
121+
"function delUser() { /* ...*/ }\n",
122+
"\n",
123+
"// Function to sign out and clear the token cookie\n",
124+
"function signOut() { /* ...*/ }\n",
125+
"```\n",
126+
"\n",
127+
"## Requests Made\n",
128+
"1. **Profile Update Request:**\n",
129+
" - Endpoint: `http://localhost:8085/api/person/:id`\n",
130+
" - Method: GET\n",
131+
"\n",
132+
"2. **User Statistics Update Request:**\n",
133+
" - Endpoint: `http://localhost:8085/api/person/setStats`\n",
134+
" - Method: POST\n",
135+
" - Parameters: id, date, steps, calories\n",
136+
"\n",
137+
"3. **User Deletion Request:**\n",
138+
" - Endpoint: `http://localhost:8085/api/person/delete?email=:email`\n",
139+
" - Method: DELETE\n",
140+
"\n",
141+
"## Interaction with HTML/CSS\n",
142+
"- JavaScript functions interact with HTML elements using `getElementById` to manipulate content dynamically.\n",
143+
"- The `update` function fetches user statistics from the backend and updates HTML elements with the retrieved data.\n",
144+
"- Buttons like \"Refresh,\" \"Edit,\" \"Update,\" \"Sign Out,\" and \"Delete user\" trigger corresponding JavaScript functions.\n",
145+
"- CSS styles define the layout and appearance of the profile display.\n",
146+
"\n",
147+
"This code assumes a local development environment and lacks certain security considerations for a production setting.\n",
148+
"```"
149+
]
150+
},
18151
{
19152
"cell_type": "markdown",
20153
"metadata": {},
@@ -78,11 +211,7 @@
78211
{
79212
"cell_type": "code",
80213
"execution_count": null,
81-
"metadata": {
82-
"vscode": {
83-
"languageId": "python"
84-
}
85-
},
214+
"metadata": {},
86215
"outputs": [],
87216
"source": [
88217
"%%html\n",
@@ -214,11 +343,7 @@
214343
{
215344
"cell_type": "code",
216345
"execution_count": null,
217-
"metadata": {
218-
"vscode": {
219-
"languageId": "python"
220-
}
221-
},
346+
"metadata": {},
222347
"outputs": [],
223348
"source": [
224349
"%%html\n",
@@ -304,7 +429,7 @@
304429
],
305430
"metadata": {
306431
"kernelspec": {
307-
"display_name": "java",
432+
"display_name": "Java",
308433
"language": "java",
309434
"name": "java"
310435
},

0 commit comments

Comments
 (0)