You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
24 KiB
195 lines
24 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "89d0df9854ed020f155e94882ae88d4c",
|
|
"translation_date": "2025-08-28T16:51:36+00:00",
|
|
"source_file": "7-bank-project/3-data/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 3: ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਅਤੇ ਵਰਤਣ ਦੇ ਤਰੀਕੇ
|
|
|
|
## ਪੂਰਵ-ਵਿਆਖਿਆਨ ਪ੍ਰਸ਼ਨਾਵਲੀ
|
|
|
|
[ਪੂਰਵ-ਵਿਆਖਿਆਨ ਪ੍ਰਸ਼ਨਾਵਲੀ](https://ff-quizzes.netlify.app/web/quiz/45)
|
|
|
|
### ਪਰਿਚਯ
|
|
|
|
ਹਰ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਕੇਂਦਰ *ਡਾਟਾ* ਹੁੰਦਾ ਹੈ। ਡਾਟਾ ਕਈ ਰੂਪਾਂ ਵਿੱਚ ਹੋ ਸਕਦਾ ਹੈ, ਪਰ ਇਸਦਾ ਮੁੱਖ ਉਦੇਸ਼ ਹਮੇਸ਼ਾ ਉਪਭੋਗਤਾ ਨੂੰ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨਾ ਹੁੰਦਾ ਹੈ। ਜਿਵੇਂ ਜਿਵੇਂ ਵੈੱਬ ਐਪਸ ਹੋਰ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਜਟਿਲ ਬਣ ਰਹੀਆਂ ਹਨ, ਉਪਭੋਗਤਾ ਜਾਣਕਾਰੀ ਤੱਕ ਕਿਵੇਂ ਪਹੁੰਚਦਾ ਹੈ ਅਤੇ ਇਸ ਨਾਲ ਕਿਵੇਂ ਸੰਚਾਰ ਕਰਦਾ ਹੈ, ਇਹ ਵੈੱਬ ਵਿਕਾਸ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਹਿੱਸਾ ਬਣ ਗਿਆ ਹੈ।
|
|
|
|
ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ ਅਤੇ ਇਸ ਡਾਟੇ ਨੂੰ HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਵੈੱਬ ਪੇਜ 'ਤੇ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ।
|
|
|
|
### ਪੂਰਵ ਸ਼ਰਤ
|
|
|
|
ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਲਈ ਵੈੱਬ ਐਪ ਦਾ [ਲੌਗਿਨ ਅਤੇ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ](../2-forms/README.md) ਭਾਗ ਬਣਾਇਆ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ। ਤੁਹਾਨੂੰ [Node.js](https://nodejs.org) ਨੂੰ ਇੰਸਟਾਲ ਕਰਨਾ ਅਤੇ [ਸਰਵਰ API](../api/README.md) ਨੂੰ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਚਲਾਉਣਾ ਵੀ ਲੋੜੀਂਦਾ ਹੈ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਖਾਤੇ ਦਾ ਡਾਟਾ ਮਿਲ ਸਕੇ।
|
|
|
|
ਤੁਸੀਂ ਟਰਮੀਨਲ ਵਿੱਚ ਇਹ ਕਮਾਂਡ ਚਲਾ ਕੇ ਜਾਂਚ ਸਕਦੇ ਹੋ ਕਿ ਸਰਵਰ ਠੀਕ ਤਰ੍ਹਾਂ ਚੱਲ ਰਿਹਾ ਹੈ:
|
|
|
|
```sh
|
|
curl http://localhost:5000/api
|
|
# -> should return "Bank API v1.0.0" as a result
|
|
```
|
|
|
|
---
|
|
|
|
## AJAX ਅਤੇ ਡਾਟਾ ਪ੍ਰਾਪਤੀ
|
|
|
|
ਪ੍ਰੰਪਰਾਗਤ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ, ਜਦੋਂ ਉਪਭੋਗਤਾ ਲਿੰਕ ਚੁਣਦਾ ਹੈ ਜਾਂ ਫਾਰਮ ਦੇ ਰਾਹੀਂ ਡਾਟਾ ਭੇਜਦਾ ਹੈ, ਤਾਂ ਪੂਰਾ HTML ਪੇਜ ਮੁੜ ਲੋਡ ਹੁੰਦਾ ਹੈ। ਹਰ ਵਾਰ ਨਵਾਂ ਡਾਟਾ ਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਪੈਂਦੀ ਹੈ, ਵੈੱਬ ਸਰਵਰ ਇੱਕ ਬਿਲਕੁਲ ਨਵਾਂ HTML ਪੇਜ ਵਾਪਸ ਭੇਜਦਾ ਹੈ, ਜਿਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਪ੍ਰਕਿਰਿਆਸ਼ੀਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਹ ਪ੍ਰਕਿਰਿਆ ਉਪਭੋਗਤਾ ਦੀ ਮੌਜੂਦਾ ਕ੍ਰਿਆਵਾਈ ਨੂੰ ਰੋਕਦੀ ਹੈ ਅਤੇ ਰੀਲੋਡ ਦੌਰਾਨ ਸੰਚਾਰ ਨੂੰ ਸੀਮਿਤ ਕਰਦੀ ਹੈ। ਇਸ ਵਰਕਫਲੋ ਨੂੰ *ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ* ਜਾਂ *MPA* ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
|
|
|
|
|
|
|
|
ਜਦੋਂ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਹੋਰ ਜਟਿਲ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਬਣਨ ਲੱਗੀਆਂ, ਤਾਂ ਇੱਕ ਨਵੀਂ ਤਕਨੀਕ [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) ਉਭਰੀ। ਇਹ ਤਕਨੀਕ ਵੈੱਬ ਐਪਸ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਭੇਜਣ ਅਤੇ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ, HTML ਪੇਜ ਨੂੰ ਮੁੜ ਲੋਡ ਕੀਤੇ ਬਿਨਾਂ। ਇਸ ਨਾਲ ਤੇਜ਼ ਅੱਪਡੇਟ ਅਤੇ ਹੌਲੀਅਤ ਨਾਲ ਉਪਭੋਗਤਾ ਸੰਚਾਰ ਸੰਭਵ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਸਰਵਰ ਤੋਂ ਨਵਾਂ ਡਾਟਾ ਪ੍ਰਾਪਤ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਮੌਜੂਦਾ HTML ਪੇਜ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API ਰਾਹੀਂ ਅੱਪਡੇਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਸਮੇਂ ਦੇ ਨਾਲ, ਇਹ ਤਰੀਕਾ ਵਿਕਸਿਤ ਹੋ ਕੇ [*ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ* ਜਾਂ *SPA*](https://en.wikipedia.org/wiki/Single-page_application) ਬਣ ਗਿਆ।
|
|
|
|
|
|
|
|
ਜਦੋਂ AJAX ਪਹਿਲਾਂ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਸੀ, ਤਾਂ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕੇਵਲ ਇੱਕ API [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ਉਪਲਬਧ ਸੀ। ਪਰ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ ਹੁਣ ਹੋਰ ਸੁਵਿਧਾਜਨਕ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) ਨੂੰ ਵੀ ਲਾਗੂ ਕਰਦੇ ਹਨ, ਜੋ ਪ੍ਰੋਮਿਸਜ਼ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਅਤੇ JSON ਡਾਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਹੋਰ ਉਚਿਤ ਹੈ।
|
|
|
|
> ਹਾਲਾਂਕਿ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰ `Fetch API` ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ, ਜੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੀ ਵੈੱਬ ਐਪਲੀਕੇਸ਼ਨ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ 'ਤੇ ਵੀ ਕੰਮ ਕਰੇ, ਤਾਂ ਪਹਿਲਾਂ [caniuse.com 'ਤੇ ਅਨੁਕੂਲਤਾ ਟੇਬਲ](https://caniuse.com/fetch) ਦੀ ਜਾਂਚ ਕਰਨਾ ਹਮੇਸ਼ਾ ਚੰਗਾ ਵਿਚਾਰ ਹੈ।
|
|
|
|
### ਕੰਮ
|
|
|
|
[ਪਿਛਲੇ ਪਾਠ](../2-forms/README.md) ਵਿੱਚ ਅਸੀਂ ਖਾਤਾ ਬਣਾਉਣ ਲਈ ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਫਾਰਮ ਲਾਗੂ ਕੀਤਾ ਸੀ। ਹੁਣ ਅਸੀਂ ਮੌਜੂਦਾ ਖਾਤੇ ਨਾਲ ਲੌਗਿਨ ਕਰਨ ਅਤੇ ਇਸ ਦਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਕੋਡ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। `app.js` ਫਾਈਲ ਖੋਲ੍ਹੋ ਅਤੇ ਇੱਕ ਨਵਾਂ `login` ਫੰਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ:
|
|
|
|
```js
|
|
async function login() {
|
|
const loginForm = document.getElementById('loginForm')
|
|
const user = loginForm.user.value;
|
|
}
|
|
```
|
|
|
|
ਇੱਥੇ ਅਸੀਂ `getElementById()` ਨਾਲ ਫਾਰਮ ਐਲੀਮੈਂਟ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ `loginForm.user.value` ਨਾਲ ਇਨਪੁਟ ਤੋਂ ਯੂਜ਼ਰਨੇਮ ਲੈਂਦੇ ਹਾਂ। ਹਰ ਫਾਰਮ ਕੰਟਰੋਲ ਨੂੰ ਇਸਦੇ ਨਾਮ (HTML ਵਿੱਚ `name` ਐਟ੍ਰਿਬਿਊਟ ਨਾਲ ਸੈਟ ਕੀਤਾ ਗਿਆ) ਦੁਆਰਾ ਫਾਰਮ ਦੀ ਇੱਕ ਪ੍ਰਾਪਰਟੀ ਵਜੋਂ ਐਕਸੈਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
|
|
|
|
ਰਜਿਸਟ੍ਰੇਸ਼ਨ ਲਈ ਕੀਤੇ ਕੰਮ ਦੇ ਸਮਾਨ, ਅਸੀਂ ਸਰਵਰ ਰਿਕਵੈਸਟ ਕਰਨ ਲਈ ਇੱਕ ਹੋਰ ਫੰਕਸ਼ਨ ਬਣਾਵਾਂਗੇ, ਪਰ ਇਸ ਵਾਰ ਖਾਤੇ ਦਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ:
|
|
|
|
```js
|
|
async function getAccount(user) {
|
|
try {
|
|
const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
|
|
return await response.json();
|
|
} catch (error) {
|
|
return { error: error.message || 'Unknown error' };
|
|
}
|
|
}
|
|
```
|
|
|
|
ਅਸੀਂ `fetch` API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਸਰਵਰ ਤੋਂ ਡਾਟਾ ਅਸਿੰਕ੍ਰੋਨਸ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਾਪਤ ਕੀਤਾ ਜਾ ਸਕੇ। ਇਸ ਵਾਰ ਸਾਨੂੰ URL ਤੋਂ ਇਲਾਵਾ ਹੋਰ ਕੋਈ ਵਾਧੂ ਪੈਰਾਮੀਟਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਅਸੀਂ ਸਿਰਫ ਡਾਟਾ ਪੁੱਛ ਰਹੇ ਹਾਂ। ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ, `fetch` ਇੱਕ [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP ਰਿਕਵੈਸਟ ਬਣਾਉਂਦਾ ਹੈ, ਜੋ ਕਿ ਅਸੀਂ ਇੱਥੇ ਚਾਹੁੰਦੇ ਹਾਂ।
|
|
|
|
✅ `encodeURIComponent()` ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ URL ਲਈ ਵਿਸ਼ੇਸ਼ ਅੱਖਰਾਂ ਨੂੰ ਐਸਕੇਪ ਕਰਦਾ ਹੈ। ਜੇ ਅਸੀਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਨਾ ਕਰੀਏ ਅਤੇ ਸਿੱਧੇ `user` ਮੁੱਲ ਨੂੰ URL ਵਿੱਚ ਵਰਤ ਲਈਏ, ਤਾਂ ਸਾਨੂੰ ਕਿਹੜੀਆਂ ਸਮੱਸਿਆਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ?
|
|
|
|
ਹੁਣ ਅਸੀਂ ਆਪਣੇ `login` ਫੰਕਸ਼ਨ ਨੂੰ `getAccount` ਵਰਤਣ ਲਈ ਅੱਪਡੇਟ ਕਰਦੇ ਹਾਂ:
|
|
|
|
```js
|
|
async function login() {
|
|
const loginForm = document.getElementById('loginForm')
|
|
const user = loginForm.user.value;
|
|
const data = await getAccount(user);
|
|
|
|
if (data.error) {
|
|
return console.log('loginError', data.error);
|
|
}
|
|
|
|
account = data;
|
|
navigate('/dashboard');
|
|
}
|
|
```
|
|
|
|
ਸਭ ਤੋਂ ਪਹਿਲਾਂ, ਕਿਉਂਕਿ `getAccount` ਇੱਕ ਅਸਿੰਕ੍ਰੋਨਸ ਫੰਕਸ਼ਨ ਹੈ, ਸਾਨੂੰ ਸਰਵਰ ਦੇ ਨਤੀਜੇ ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਇਸਨੂੰ `await` ਕੀਵਰਡ ਨਾਲ ਮਿਲਾਉਣਾ ਪਵੇਗਾ। ਕਿਸੇ ਵੀ ਸਰਵਰ ਰਿਕਵੈਸਟ ਦੀ ਤਰ੍ਹਾਂ, ਸਾਨੂੰ ਗਲਤੀ ਦੇ ਮਾਮਲਿਆਂ ਨਾਲ ਵੀ ਨਜਿੱਠਣਾ ਪਵੇਗਾ। ਫਿਲਹਾਲ ਅਸੀਂ ਸਿਰਫ ਗਲਤੀ ਦਿਖਾਉਣ ਲਈ ਇੱਕ ਲੌਗ ਸੁਨੇਹਾ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸ 'ਤੇ ਵਾਪਸ ਆਵਾਂਗੇ।
|
|
|
|
ਫਿਰ ਸਾਨੂੰ ਡਾਟਾ ਨੂੰ ਕਿਤੇ ਸਟੋਰ ਕਰਨਾ ਪਵੇਗਾ ਤਾਂ ਜੋ ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ ਇਸਨੂੰ ਡੈਸ਼ਬੋਰਡ ਜਾਣਕਾਰੀ ਦਿਖਾਉਣ ਲਈ ਵਰਤ ਸਕੀਏ। ਕਿਉਂਕਿ `account` ਵੈਰੀਏਬਲ ਅਜੇ ਤੱਕ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਅਸੀਂ ਇਸ ਲਈ ਫਾਈਲ ਦੇ ਸਿਖਰ 'ਤੇ ਇੱਕ ਗਲੋਬਲ ਵੈਰੀਏਬਲ ਬਣਾਵਾਂਗੇ:
|
|
|
|
```js
|
|
let account = null;
|
|
```
|
|
|
|
ਜਦੋਂ ਉਪਭੋਗਤਾ ਡਾਟਾ ਨੂੰ ਇੱਕ ਵੈਰੀਏਬਲ ਵਿੱਚ ਸਟੋਰ ਕਰ ਲਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਅਸੀਂ `navigate()` ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ *ਲੌਗਿਨ* ਪੇਜ ਤੋਂ *ਡੈਸ਼ਬੋਰਡ* 'ਤੇ ਜਾ ਸਕਦੇ ਹਾਂ।
|
|
|
|
ਅਖੀਰ ਵਿੱਚ, ਜਦੋਂ ਲੌਗਿਨ ਫਾਰਮ ਸਬਮਿਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਸਾਡੇ `login` ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਲਈ HTML ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸੋਧੋ:
|
|
|
|
```html
|
|
<form id="loginForm" action="javascript:login()">
|
|
```
|
|
|
|
ਨਵਾਂ ਖਾਤਾ ਰਜਿਸਟਰ ਕਰਕੇ ਅਤੇ ਉਸੇ ਖਾਤੇ ਨਾਲ ਲੌਗਿਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਕੇ ਜਾਂਚ ਕਰੋ ਕਿ ਸਭ ਕੁਝ ਠੀਕ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ।
|
|
|
|
ਅਗਲੇ ਭਾਗ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਅਸੀਂ `register` ਫੰਕਸ਼ਨ ਨੂੰ ਇਸਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ ਪੂਰਾ ਕਰ ਸਕਦੇ ਹਾਂ:
|
|
|
|
```js
|
|
account = result;
|
|
navigate('/dashboard');
|
|
```
|
|
|
|
✅ ਕੀ ਤੁਸੀਂ ਜਾਣਦੇ ਹੋ ਕਿ ਡਿਫਾਲਟ ਰੂਪ ਵਿੱਚ, ਤੁਸੀਂ ਸਿਰਫ਼ *ਉਸੇ ਡੋਮੇਨ ਅਤੇ ਪੋਰਟ* ਤੋਂ ਸਰਵਰ API ਨੂੰ ਕਾਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਪੇਜ ਨੂੰ ਤੁਸੀਂ ਵੇਖ ਰਹੇ ਹੋ? ਇਹ ਬ੍ਰਾਊਜ਼ਰਾਂ ਦੁਆਰਾ ਲਾਗੂ ਕੀਤੀ ਗਈ ਸੁਰੱਖਿਆ ਪ੍ਰਣਾਲੀ ਹੈ। ਪਰ ਰੁਕੋ, ਸਾਡੀ ਵੈੱਬ ਐਪ `localhost:3000` 'ਤੇ ਚੱਲ ਰਹੀ ਹੈ ਜਦਕਿ ਸਰਵਰ API `localhost:5000` 'ਤੇ ਚੱਲ ਰਿਹਾ ਹੈ, ਫਿਰ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ? [ਕਰਾਸ-ਓਰਿਜਿਨ ਰਿਸੋਰਸ ਸ਼ੇਅਰਿੰਗ (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) ਨਾਮਕ ਤਕਨੀਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਜੇ ਸਰਵਰ ਜਵਾਬ ਵਿੱਚ ਖਾਸ ਹੈਡਰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਸੰਭਵ ਹੈ ਕਿ ਕ੍ਰਾਸ-ਓਰਿਜਿਨ HTTP ਰਿਕਵੈਸਟ ਕੀਤੇ ਜਾ ਸਕਣ।
|
|
|
|
> API ਬਾਰੇ ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਇਹ [ਪਾਠ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) ਲਓ
|
|
|
|
## HTML ਨੂੰ ਡਾਟਾ ਦਿਖਾਉਣ ਲਈ ਅੱਪਡੇਟ ਕਰੋ
|
|
|
|
ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਉਪਭੋਗਤਾ ਡਾਟਾ ਹੈ, ਸਾਨੂੰ ਮੌਜੂਦਾ HTML ਨੂੰ ਇਸਨੂੰ ਦਿਖਾਉਣ ਲਈ ਅੱਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ। ਅਸੀਂ ਪਹਿਲਾਂ ਹੀ ਜਾਣਦੇ ਹਾਂ ਕਿ DOM ਤੋਂ ਇੱਕ ਐਲੀਮੈਂਟ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ, ਉਦਾਹਰਣ ਲਈ `document.getElementById()` ਦੀ ਵਰਤੋਂ ਕਰਕੇ। ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਬੇਸ ਐਲੀਮੈਂਟ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਸੋਧਣ ਜਾਂ ਇਸ ਵਿੱਚ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਕੁਝ API ਹਨ:
|
|
|
|
- [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਇੱਕ ਐਲੀਮੈਂਟ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ। ਧਿਆਨ ਦਿਓ ਕਿ ਇਸ ਮੁੱਲ ਨੂੰ ਬਦਲਣ ਨਾਲ ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ ਚਾਈਲਡ (ਜੇ ਕੋਈ ਹੋਣ) ਹਟ ਜਾਂਦੇ ਹਨ ਅਤੇ ਇਸਨੂੰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ ਟੈਕਸਟ ਨਾਲ ਬਦਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਇਹ ਇੱਕ ਦਿੱਤੇ ਗਏ ਐਲੀਮੈਂਟ ਦੇ ਸਾਰੇ ਚਾਈਲਡ ਨੂੰ ਹਟਾਉਣ ਲਈ ਇੱਕ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਵੀ ਹੈ, ਸਿਰਫ ਇਸਨੂੰ ਖਾਲੀ ਸਤਰ `''` ਨਿਰਧਾਰਿਤ ਕਰਕੇ।
|
|
|
|
- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਤੇ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) ਵਿਧੀ ਨਾਲ ਤੁਸੀਂ ਇੱਕ ਜਾਂ ਹੋਰ ਨਵੇਂ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਬਣਾਉਣ ਅਤੇ ਜੁੜਨ ਕਰ ਸਕਦੇ ਹੋ।
|
|
|
|
✅ ਇੱਕ ਐਲੀਮੈਂਟ ਦੀ [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸਦੇ HTML ਸਮੱਗਰੀ ਨੂੰ ਬਦਲਣਾ ਵੀ ਸੰਭਵ ਹੈ, ਪਰ ਇਸਨੂੰ ਬਚਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿਉਂਕਿ ਇਹ [ਕਰਾਸ-ਸਾਈਟ ਸਕ੍ਰਿਪਟਿੰਗ (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) ਹਮਲਿਆਂ ਲਈ ਸੰਵੇਦਨਸ਼ੀਲ ਹੈ।
|
|
|
|
### ਕੰਮ
|
|
|
|
ਡੈਸ਼ਬੋਰਡ ਸਕ੍ਰੀਨ 'ਤੇ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ, ਸਾਨੂੰ *ਲੌਗਿਨ* ਪੇਜ 'ਤੇ ਇੱਕ ਹੋਰ ਚੀਜ਼ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਇਸ ਸਮੇਂ, ਜੇ ਤੁਸੀਂ ਇੱਕ ਅਜਿਹੇ ਯੂਜ਼ਰਨੇਮ ਨਾਲ ਲੌਗਿਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ ਜੋ ਮੌਜੂਦ ਨਹੀਂ ਹੈ, ਤਾਂ ਕਨਸੋਲ ਵਿੱਚ ਇੱਕ ਸੁਨੇਹਾ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ ਪਰ ਇੱਕ ਆਮ ਉਪਭੋਗਤਾ ਲਈ ਕੁਝ ਨਹੀਂ ਬਦਲਦਾ ਅਤੇ ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਲੱਗਦਾ ਕਿ ਕੀ ਹੋ ਰਿਹਾ ਹੈ।
|
|
|
|
ਆਓ ਲੌਗਿਨ ਫਾਰਮ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰੀਏ ਜਿੱਥੇ ਲੋੜ ਪੈਣ 'ਤੇ ਅਸੀਂ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾ ਸਕੀਏ। ਇੱਕ ਵਧੀਆ ਜਗ੍ਹਾ ਲੌਗਿਨ `<button>` ਤੋਂ ਥੋੜ੍ਹਾ ਪਹਿਲਾਂ ਹੋਵੇਗੀ:
|
|
|
|
```html
|
|
...
|
|
<div id="loginError"></div>
|
|
<button>Login</button>
|
|
...
|
|
```
|
|
|
|
ਇਹ `<div>` ਐਲੀਮੈਂਟ ਖਾਲੀ ਹੈ, ਜਿਸਦਾ ਅਰਥ ਹੈ ਕਿ ਜਦ ਤੱਕ ਅਸੀਂ ਇਸ ਵਿੱਚ ਕੁਝ ਸਮੱਗਰੀ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦੇ, ਤਦ ਤੱਕ ਸਕ੍ਰੀਨ 'ਤੇ ਕੁਝ ਵੀ ਨਹੀਂ ਦਿਖਾਇਆ ਜਾਵੇਗਾ। ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ `id` ਵੀ ਦਿੰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਅਸੀਂ ਇਸਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਆਸਾਨੀ ਨਾਲ ਪ੍ਰਾਪਤ ਕਰ ਸਕੀਏ।
|
|
|
|
ਵਾਪਸ `app.js` ਫਾਈਲ 'ਤੇ ਜਾਓ ਅਤੇ ਇੱਕ ਨਵਾਂ ਹੈਲਪਰ ਫੰਕਸ਼ਨ `updateElement` ਬਣਾਓ:
|
|
|
|
```js
|
|
function updateElement(id, text) {
|
|
const element = document.getElementById(id);
|
|
element.textContent = text;
|
|
}
|
|
```
|
|
|
|
ਇਹ ਬਹੁਤ ਸਧਾਰਨ ਹੈ: ਦਿੱਤੇ ਗਏ ਐਲੀਮੈਂਟ *id* ਅਤੇ *text* ਦੇ ਆਧਾਰ 'ਤੇ, ਇਹ DOM ਐਲੀਮੈਂਟ ਦੇ ਮੈਚਿੰਗ `id` ਦੀ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰੇਗਾ। ਆਓ ਇਸ ਵਿਧੀ ਦੀ ਵਰਤੋਂ `login` ਫੰਕਸ਼ਨ ਵਿੱਚ ਪਿਛਲੇ ਗਲਤੀ ਸੁਨੇਹੇ ਦੀ ਥਾਂ ਕਰੀਏ:
|
|
|
|
```js
|
|
if (data.error) {
|
|
return updateElement('loginError', data.error);
|
|
}
|
|
```
|
|
|
|
ਹੁਣ ਜੇ ਤੁਸੀਂ ਇੱਕ ਗਲਤ ਖਾਤੇ ਨਾਲ ਲੌਗਿਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗਾ:
|
|
|
|
|
|
|
|
ਹੁਣ ਸਾਡੇ ਕੋਲ ਗਲਤੀ ਦਾ ਟੈਕਸਟ ਹੈ ਜੋ ਵਿਜੁਅਲ ਤੌਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ, ਪਰ ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ ਨਾਲ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਪਤਾ ਲੱਗੇਗਾ ਕਿ ਕੁਝ ਵੀ ਐਲਾਨ ਨਹੀਂ ਕੀਤਾ ਗਿਆ। ਇੱਕ ਪੇਜ 'ਤੇ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਟੈਕਸਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰਾਂ ਦੁਆਰਾ ਐਲਾਨਿਤ ਕਰਨ ਲਈ, ਇਸਨੂੰ [ਲਾਈਵ ਰੀਜਨ](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਇੱਥੇ ਅਸੀਂ ਇੱਕ ਖਾਸ ਕਿਸਮ ਦੇ ਲਾਈ
|
|
ਜੇ ਤੁਸੀਂ `test` ਖਾਤੇ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੌਗਇਨ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਹੁਣ ਤੁਹਾਨੂੰ ਡੈਸ਼ਬੋਰਡ 'ਤੇ ਲੈਨ-ਦੇਣ ਦੀ ਸੂਚੀ ਦਿਖਾਈ ਦੇਣੀ ਚਾਹੀਦੀ ਹੈ 🎉।
|
|
|
|
---
|
|
|
|
## 🚀 ਚੁਣੌਤੀ
|
|
|
|
ਇਕੱਠੇ ਕੰਮ ਕਰਕੇ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਨੂੰ ਇੱਕ ਅਸਲੀ ਬੈਂਕਿੰਗ ਐਪ ਵਾਂਗ ਬਣਾਓ। ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਆਪਣੀ ਐਪ ਨੂੰ ਸਜਾਇਆ ਹੈ, ਤਾਂ ਕੋਸ਼ਿਸ਼ ਕਰੋ ਕਿ [ਮੀਡੀਆ ਕਵੈਰੀਜ਼](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ [ਰਿਸਪਾਂਸਿਵ ਡਿਜ਼ਾਈਨ](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) ਬਣਾਓ ਜੋ ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ ਦੋਵਾਂ ਉਪਕਰਣਾਂ 'ਤੇ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰੇ।
|
|
|
|
ਇੱਥੇ ਸਜਾਏ ਹੋਏ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਦਾ ਇੱਕ ਉਦਾਹਰਣ ਦਿੱਤਾ ਗਿਆ ਹੈ:
|
|
|
|
|
|
|
|
## ਲੈਕਚਰ ਬਾਅਦ ਕਵੀਜ਼
|
|
|
|
[ਲੈਕਚਰ ਬਾਅਦ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/46)
|
|
|
|
## ਅਸਾਈਨਮੈਂਟ
|
|
|
|
[ਆਪਣੇ ਕੋਡ ਨੂੰ ਰੀਫੈਕਟਰ ਕਰੋ ਅਤੇ ਟਿੱਪਣੀਆਂ ਸ਼ਾਮਲ ਕਰੋ](assignment.md)
|
|
|
|
---
|
|
|
|
**ਅਸਵੀਕਰਤੀ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |