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.
273 lines
23 KiB
273 lines
23 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "8da1b5e2c63f749808858c53f37b8ce7",
|
|
"translation_date": "2025-08-26T00:34:45+00:00",
|
|
"source_file": "7-bank-project/1-template-route/README.md",
|
|
"language_code": "pa"
|
|
}
|
|
-->
|
|
# ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 1: ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਸ
|
|
|
|
## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼
|
|
|
|
[ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/41)
|
|
|
|
### ਪਰਿਚਯ
|
|
|
|
ਜਦੋਂ ਤੋਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਇਆ ਹੈ, ਵੈੱਬਸਾਈਟਾਂ ਪਹਿਲਾਂ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਜਟਿਲ ਹੋ ਗਈਆਂ ਹਨ। ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਹੁਣ ਆਮ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਗਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਸਿੱਧੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਦੀਆਂ ਹਨ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ [ਵੈੱਬ ਐਪ](https://en.wikipedia.org/wiki/Web_application) ਕਹਿੰਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਵੈੱਬ ਐਪਸ ਬਹੁਤ ਇੰਟਰਐਕਟਿਵ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਯੂਜ਼ਰ ਹਰ ਵਾਰ ਪੂਰੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਦੇ। ਇਸੇ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ DOM ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਨੂੰ ਸਿੱਧੇ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਸਹੀ ਯੂਜ਼ਰ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
|
|
|
|
ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਬੈਂਕ ਵੈੱਬ ਐਪ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦ ਰੱਖਾਂਗੇ, HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣ ਲਈ ਜੋ ਪੂਰੇ HTML ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਦਿਖਾਈ ਅਤੇ ਅਪਡੇਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।
|
|
|
|
### ਪੂਰਵ ਸ਼ਰਤ
|
|
|
|
ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਵਿੱਚ ਬਣਾਈ ਜਾਣ ਵਾਲੀ ਵੈੱਬ ਐਪ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਲੋਕਲ ਵੈੱਬ ਸਰਵਰ ਦੀ ਲੋੜ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਨਹੀਂ ਹੈ, ਤਾਂ ਤੁਸੀਂ [Node.js](https://nodejs.org) ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੋਂ ਕਮਾਂਡ `npx lite-server` ਚਲਾ ਸਕਦੇ ਹੋ। ਇਹ ਇੱਕ ਲੋਕਲ ਵੈੱਬ ਸਰਵਰ ਬਣਾਏਗਾ ਅਤੇ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੇਗਾ।
|
|
|
|
### ਤਿਆਰੀ
|
|
|
|
ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ, `bank` ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ ਜਿਸ ਵਿੱਚ `index.html` ਨਾਮਕ ਇੱਕ ਫਾਈਲ ਹੋਵੇ। ਅਸੀਂ ਇਸ HTML [ਬੋਇਲਰਪਲੇਟ](https://en.wikipedia.org/wiki/Boilerplate_code) ਤੋਂ ਸ਼ੁਰੂ ਕਰਾਂਗੇ:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bank App</title>
|
|
</head>
|
|
<body>
|
|
<!-- This is where you'll work -->
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
---
|
|
|
|
## HTML ਟੈਂਪਲੇਟ
|
|
|
|
ਜੇ ਤੁਸੀਂ ਵੈੱਬ ਪੇਜ ਲਈ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇੱਕ ਹੱਲ ਇਹ ਹੋਵੇਗਾ ਕਿ ਤੁਸੀਂ ਹਰ ਸਕ੍ਰੀਨ ਲਈ ਇੱਕ HTML ਫਾਈਲ ਬਣਾਓ। ਹਾਲਾਂਕਿ, ਇਸ ਹੱਲ ਨਾਲ ਕੁਝ ਅਸੁਵਿਧਾਵਾਂ ਹਨ:
|
|
|
|
- ਸਕ੍ਰੀਨ ਬਦਲਣ ਸਮੇਂ ਤੁਹਾਨੂੰ ਪੂਰੇ HTML ਨੂੰ ਰੀਲੋਡ ਕਰਨਾ ਪਵੇਗਾ, ਜੋ ਕਿ ਹੌਲੀ ਹੋ ਸਕਦਾ ਹੈ।
|
|
- ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਵਿੱਚ ਡਾਟਾ ਸਾਂਝਾ ਕਰਨਾ ਮੁਸ਼ਕਲ ਹੈ।
|
|
|
|
ਇੱਕ ਹੋਰ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਸਿਰਫ ਇੱਕ HTML ਫਾਈਲ ਹੋਵੇ, ਅਤੇ `<template>` ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ [HTML ਟੈਂਪਲੇਟ](https://developer.mozilla.org/docs/Web/HTML/Element/template) ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਜਾਣ। ਇੱਕ ਟੈਂਪਲੇਟ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ HTML ਬਲਾਕ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਂਦਾ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਨਟਾਈਮ 'ਤੇ ਇਸਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
|
|
|
|
### ਕੰਮ
|
|
|
|
ਅਸੀਂ ਇੱਕ ਬੈਂਕ ਐਪ ਬਣਾਵਾਂਗੇ ਜਿਸ ਵਿੱਚ ਦੋ ਸਕ੍ਰੀਨ ਹੋਣਗੇ: ਲੌਗਿਨ ਪੇਜ ਅਤੇ ਡੈਸ਼ਬੋਰਡ। ਪਹਿਲਾਂ, ਆਓ HTML ਬਾਡੀ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰੀਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਲਈ ਕਰਾਂਗੇ:
|
|
|
|
```html
|
|
<div id="app">Loading...</div>
|
|
```
|
|
|
|
ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ `id` ਦੇ ਰਹੇ ਹਾਂ ਤਾਂ ਜੋ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਲੱਭਣਾ ਆਸਾਨ ਹੋਵੇ।
|
|
|
|
> ਟਿੱਪ: ਕਿਉਂਕਿ ਇਸ ਐਲੀਮੈਂਟ ਦੀ ਸਮੱਗਰੀ ਬਦਲੀ ਜਾਵੇਗੀ, ਅਸੀਂ ਇਸ ਵਿੱਚ ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਾਂ ਸੰਕੇਤਕ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੋ ਐਪ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।
|
|
|
|
ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਆਓ ਲੌਗਿਨ ਪੇਜ ਲਈ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰੀਏ। ਇਸ ਵਿੱਚ ਅਸੀਂ ਫਿਲਹਾਲ ਸਿਰਫ ਇੱਕ ਸਿਰਲੇਖ ਅਤੇ ਇੱਕ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਹੋਵੇਗਾ ਜੋ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ।
|
|
|
|
```html
|
|
<template id="login">
|
|
<h1>Bank App</h1>
|
|
<section>
|
|
<a href="/dashboard">Login</a>
|
|
</section>
|
|
</template>
|
|
```
|
|
|
|
ਫਿਰ ਅਸੀਂ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਲਈ ਇੱਕ ਹੋਰ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰਾਂਗੇ। ਇਸ ਪੇਜ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਸੈਕਸ਼ਨ ਹੋਣਗੇ:
|
|
|
|
- ਇੱਕ ਹੈਡਰ ਜਿਸ ਵਿੱਚ ਸਿਰਲੇਖ ਅਤੇ ਲੌਗਆਉਟ ਲਿੰਕ ਹੋਵੇਗਾ
|
|
- ਬੈਂਕ ਖਾਤੇ ਦੀ ਮੌਜੂਦਾ ਬੈਲੈਂਸ
|
|
- ਲੈਣ-ਦੇਣ ਦੀ ਸੂਚੀ, ਜੋ ਇੱਕ ਟੇਬਲ ਵਿੱਚ ਦਿਖਾਈ ਜਾਵੇਗੀ
|
|
|
|
```html
|
|
<template id="dashboard">
|
|
<header>
|
|
<h1>Bank App</h1>
|
|
<a href="/login">Logout</a>
|
|
</header>
|
|
<section>
|
|
Balance: 100$
|
|
</section>
|
|
<section>
|
|
<h2>Transactions</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Object</th>
|
|
<th>Amount</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</section>
|
|
</template>
|
|
```
|
|
|
|
> ਟਿੱਪ: ਜਦੋਂ ਤੁਸੀਂ HTML ਟੈਂਪਲੇਟ ਬਣਾਉਂਦੇ ਹੋ, ਜੇ ਤੁਸੀਂ ਦੇਖਣਾ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਇਹ ਕਿਵੇਂ ਲੱਗੇਗਾ, ਤਾਂ ਤੁਸੀਂ `<template>` ਅਤੇ `</template>` ਲਾਈਨਾਂ ਨੂੰ `<!-- -->` ਨਾਲ ਘੇਰ ਕੇ ਕਾਮੈਂਟ ਕਰ ਸਕਦੇ ਹੋ।
|
|
|
|
✅ ਤੁਹਾਡੇ ਖਿਆਲ ਵਿੱਚ ਅਸੀਂ ਟੈਂਪਲੇਟਸ 'ਤੇ `id` ਐਟ੍ਰਿਬਿਊਟ ਕਿਉਂ ਵਰਤਦੇ ਹਾਂ? ਕੀ ਅਸੀਂ ਇਸਦੀ ਜਗ੍ਹਾ ਕੁਝ ਹੋਰ ਵਰਤ ਸਕਦੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਕਲਾਸ?
|
|
|
|
## ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਟੈਂਪਲੇਟ ਦਿਖਾਉਣਾ
|
|
|
|
ਜੇ ਤੁਸੀਂ ਆਪਣੀ ਮੌਜੂਦਾ HTML ਫਾਈਲ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਾਉਂਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ `Loading...` ਦਿਖਾਉਣ 'ਤੇ ਅਟਕ ਜਾਂਦੀ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਸਾਨੂੰ ਕੁਝ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ ਜੋ HTML ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਅਤੇ ਦਿਖਾ ਸਕੇ।
|
|
|
|
ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੇ ਤਿੰਨ ਕਦਮ ਹੁੰਦੇ ਹਨ:
|
|
|
|
1. DOM ਵਿੱਚ ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਲੱਭੋ, ਉਦਾਹਰਣ ਲਈ [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById) ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
|
|
2. ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਕਲੋਨ ਕਰੋ, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
|
|
3. ਇਸਨੂੰ ਇੱਕ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਹੇਠਾਂ DOM ਵਿੱਚ ਜੋੜੋ, ਉਦਾਹਰਣ ਲਈ [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
|
|
|
|
✅ ਸਾਨੂੰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਕਲੋਨ ਕਰਨ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ? ਤੁਹਾਡੇ ਖਿਆਲ ਵਿੱਚ ਕੀ ਹੋਵੇਗਾ ਜੇ ਅਸੀਂ ਇਹ ਕਦਮ ਛੱਡ ਦਈਏ?
|
|
|
|
### ਕੰਮ
|
|
|
|
ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ `app.js` ਨਾਮਕ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ HTML ਦੇ `<head>` ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:
|
|
|
|
```html
|
|
<script src="app.js" defer></script>
|
|
```
|
|
|
|
ਹੁਣ `app.js` ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ `updateRoute` ਬਣਾਵਾਂਗੇ:
|
|
|
|
```js
|
|
function updateRoute(templateId) {
|
|
const template = document.getElementById(templateId);
|
|
const view = template.content.cloneNode(true);
|
|
const app = document.getElementById('app');
|
|
app.innerHTML = '';
|
|
app.appendChild(view);
|
|
}
|
|
```
|
|
|
|
ਇੱਥੇ ਅਸੀਂ ਉਪਰੋਕਤ ਤਿੰਨ ਕਦਮ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ `templateId` ਵਾਲੇ ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਦੇ ਹਾਂ, ਅਤੇ ਇਸਦੀ ਕਲੋਨ ਕੀਤੀ ਸਮੱਗਰੀ ਨੂੰ ਆਪਣੇ ਐਪ ਪਲੇਸਹੋਲਡਰ ਵਿੱਚ ਰੱਖਦੇ ਹਾਂ। ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ `cloneNode(true)` ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਟੈਂਪਲੇਟ ਦੇ ਪੂਰੇ ਸਬਟ੍ਰੀ ਨੂੰ ਕਾਪੀ ਕੀਤਾ ਜਾ ਸਕੇ।
|
|
|
|
ਹੁਣ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਸੇ ਇੱਕ ਟੈਂਪਲੇਟ ਨਾਲ ਕਾਲ ਕਰੋ ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਦੇਖੋ।
|
|
|
|
```js
|
|
updateRoute('login');
|
|
```
|
|
|
|
✅ ਇਸ ਕੋਡ `app.innerHTML = '';` ਦਾ ਕੀ ਉਦੇਸ਼ ਹੈ? ਇਸ ਦੇ ਬਗੈਰ ਕੀ ਹੁੰਦਾ ਹੈ?
|
|
|
|
## ਰੂਟਸ ਬਣਾਉਣਾ
|
|
|
|
ਜਦੋਂ ਅਸੀਂ ਵੈੱਬ ਐਪ ਦੀ ਗੱਲ ਕਰਦੇ ਹਾਂ, ਤਾਂ ਅਸੀਂ *ਰੂਟਿੰਗ* ਨੂੰ URL ਨੂੰ ਖਾਸ ਸਕ੍ਰੀਨਾਂ ਨਾਲ ਨਕਸ਼ਾ ਬਣਾਉਣ ਦੀ ਪ੍ਰਕਿਰਿਆ ਕਹਿੰਦੇ ਹਾਂ ਜੋ ਦਿਖਾਈ ਜਾਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਕਈ HTML ਫਾਈਲਾਂ ਵਾਲੀ ਵੈੱਬਸਾਈਟ 'ਤੇ, ਇਹ ਆਪਣੇ ਆਪ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਫਾਈਲ ਪਾਥ URL 'ਤੇ ਦਰਸਾਏ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਣ ਲਈ, ਜੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ ਇਹ ਫਾਈਲਾਂ ਹਨ:
|
|
|
|
```
|
|
mywebsite/index.html
|
|
mywebsite/login.html
|
|
mywebsite/admin/index.html
|
|
```
|
|
|
|
ਜੇ ਤੁਸੀਂ `mywebsite` ਨੂੰ ਰੂਟ ਵਜੋਂ ਵਰਤਦੇ ਹੋ, ਤਾਂ URL ਮੈਪਿੰਗ ਇਹ ਹੋਵੇਗੀ:
|
|
|
|
```
|
|
https://site.com --> mywebsite/index.html
|
|
https://site.com/login.html --> mywebsite/login.html
|
|
https://site.com/admin/ --> mywebsite/admin/index.html
|
|
```
|
|
|
|
ਹਾਲਾਂਕਿ, ਸਾਡੀ ਵੈੱਬ ਐਪ ਲਈ ਅਸੀਂ ਇੱਕ ਸਿੰਗਲ HTML ਫਾਈਲ ਵਰਤ ਰਹੇ ਹਾਂ ਜਿਸ ਵਿੱਚ ਸਾਰੀਆਂ ਸਕ੍ਰੀਨ ਹਨ, ਇਸ ਲਈ ਇਹ ਡਿਫਾਲਟ ਵਿਹਾਰ ਸਾਡੀ ਮਦਦ ਨਹੀਂ ਕਰੇਗਾ। ਸਾਨੂੰ ਇਸ ਮੈਪ ਨੂੰ ਮੈਨੂਅਲੀ ਬਣਾਉਣਾ ਪਵੇਗਾ ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ ਪਵੇਗਾ।
|
|
|
|
### ਕੰਮ
|
|
|
|
ਅਸੀਂ ਇੱਕ ਸਧਾਰਣ ਆਬਜੈਕਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜੋ URL ਪਾਥ ਅਤੇ ਸਾਡੇ ਟੈਂਪਲੇਟਸ ਦੇ ਵਿਚਕਾਰ ਇੱਕ [ਮੈਪ](https://en.wikipedia.org/wiki/Associative_array) ਨੂੰ ਲਾਗੂ ਕਰੇਗਾ। ਇਸ ਆਬਜੈਕਟ ਨੂੰ ਆਪਣੇ `app.js` ਫਾਈਲ ਦੇ ਸਿਰੇ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ।
|
|
|
|
```js
|
|
const routes = {
|
|
'/login': { templateId: 'login' },
|
|
'/dashboard': { templateId: 'dashboard' },
|
|
};
|
|
```
|
|
|
|
ਹੁਣ ਆਓ `updateRoute` ਫੰਕਸ਼ਨ ਨੂੰ ਥੋੜ੍ਹਾ ਸੋਧੀਏ। ਸਿੱਧੇ `templateId` ਨੂੰ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਪਹਿਲਾਂ ਮੌਜੂਦਾ URL ਨੂੰ ਵੇਖਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਆਪਣੇ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਬੰਧਤ ਟੈਂਪਲੇਟ ID ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) ਦੀ ਵਰਤੋਂ ਕਰਕੇ URL ਤੋਂ ਸਿਰਫ ਪਾਥ ਸੈਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।
|
|
|
|
```js
|
|
function updateRoute() {
|
|
const path = window.location.pathname;
|
|
const route = routes[path];
|
|
|
|
const template = document.getElementById(route.templateId);
|
|
const view = template.content.cloneNode(true);
|
|
const app = document.getElementById('app');
|
|
app.innerHTML = '';
|
|
app.appendChild(view);
|
|
}
|
|
```
|
|
|
|
ਇੱਥੇ ਅਸੀਂ ਆਪਣੇ ਘੋਸ਼ਿਤ ਰੂਟਸ ਨੂੰ ਸੰਬੰਧਤ ਟੈਂਪਲੇਟ ਨਾਲ ਨਕਸ਼ਾ ਬਣਾਇਆ। ਤੁਸੀਂ ਇਸਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਹੋਏ ਦੇਖ ਸਕਦੇ ਹੋ ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਮੈਨੂਅਲੀ URL ਬਦਲਦੇ ਹੋ।
|
|
|
|
✅ ਜੇ ਤੁਸੀਂ URL ਵਿੱਚ ਕੋਈ ਅਣਜਾਣ ਪਾਥ ਦਰਜ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਅਸੀਂ ਇਸਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰ ਸਕਦੇ ਹਾਂ?
|
|
|
|
## ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਕਰਨਾ
|
|
|
|
ਸਾਡੀ ਐਪ ਲਈ ਅਗਲਾ ਕਦਮ ਇਹ ਹੈ ਕਿ ਪੇਜਾਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੀ ਸੰਭਾਵਨਾ ਸ਼ਾਮਲ ਕੀਤੀ ਜਾਵੇ ਬਿਨਾਂ URL ਨੂੰ ਮੈਨੂਅਲੀ ਬਦਲਣ ਦੀ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਦੋ ਗੱਲਾਂ ਹਨ:
|
|
|
|
1. ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
|
|
2. ਨਵੇਂ URL ਦੇ ਆਧਾਰ 'ਤੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
|
|
|
|
ਦੂਜੇ ਹਿੱਸੇ ਦੀ ਦੇਖਭਾਲ ਅਸੀਂ `updateRoute` ਫੰਕਸ਼ਨ ਨਾਲ ਪਹਿਲਾਂ ਹੀ ਕਰ ਚੁੱਕੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਨੂੰ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭਣਾ ਪਵੇਗਾ।
|
|
|
|
ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਖਾਸ ਤੌਰ 'ਤੇ [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜੋ ਕਿ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਇਤਿਹਾਸ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬਣਾਉਂਦਾ ਹੈ, ਬਿਨਾਂ HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ।
|
|
|
|
> ਨੋਟ: ਜਦੋਂ ਕਿ HTML ਐਂਕਰ ਐਲੀਮੈਂਟ [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਵੱਖ-ਵੱਖ URL ਲਈ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਇਹ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ HTML ਰੀਲੋਡ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ। ਜਦੋਂ ਰੂਟਿੰਗ ਨੂੰ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾ ਰਿਹਾ ਹੋਵੇ, ਤਾਂ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ `preventDefault()` ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਜ਼ਰੂਰੀ ਹੈ।
|
|
|
|
### ਕੰਮ
|
|
|
|
ਆਓ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹਾਂ:
|
|
|
|
```js
|
|
function navigate(path) {
|
|
window.history.pushState({}, path, path);
|
|
updateRoute();
|
|
}
|
|
```
|
|
|
|
ਇਹ ਵਿਧੀ ਪਹਿਲਾਂ ਦਿੱਤੇ ਪਾਥ ਦੇ ਆਧਾਰ 'ਤੇ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਫਿਰ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ਪ੍ਰਾਪਰਟੀ `window.location.origin` URL ਰੂਟ ਨੂੰ ਵਾਪਸ ਕਰਦੀ ਹੈ, ਜੋ ਸਾਨੂੰ ਦਿੱਤੇ ਪਾਥ ਤੋਂ ਇੱਕ ਪੂਰਾ URL ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।
|
|
|
|
ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਉਸ ਸਮੱਸਿਆ ਦੀ ਦੇਖਭਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੇਕਰ ਕੋਈ ਪਾਥ ਕਿਸੇ ਵੀ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਅਸੀਂ `updateRoute` ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧਾਂਗੇ ਅਤੇ ਜੇਕਰ ਅਸੀਂ ਕੋਈ ਮੇਲ ਨਹੀਂ ਲੱਭਦੇ, ਤਾਂ ਮੌਜੂਦਾ ਰੂਟ ਨੂੰ ਮੌਜੂਦਾ ਰੂਟ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਤੇ ਡਿਫਾਲਟ ਕਰਾਂਗੇ।
|
|
|
|
```js
|
|
function updateRoute() {
|
|
const path = window.location.pathname;
|
|
const route = routes[path];
|
|
|
|
if (!route) {
|
|
return navigate('/login');
|
|
}
|
|
|
|
...
|
|
```
|
|
|
|
ਜੇਕਰ ਕੋਈ ਰੂਟ ਨਹੀਂ ਮਿਲਦਾ, ਤਾਂ ਅਸੀਂ ਹੁਣ `login` ਪੇਜ ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਾਂਗੇ।
|
|
|
|
ਹੁਣ ਆਓ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ URL ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ:
|
|
|
|
```js
|
|
function onLinkClick(event) {
|
|
event.preventDefault();
|
|
navigate(event.target.href);
|
|
}
|
|
```
|
|
|
|
ਆਓ ਆਪਣੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਨੂੰ ਪੂਰਾ ਕਰੀਏ ਅਤੇ ਆਪਣੇ HTML ਵਿੱਚ *Login* ਅਤੇ *Logout* ਲਿੰਕਸ ਲਈ ਬਾਈਂਡਿੰਗ ਸ਼ਾਮਲ ਕਰੀਏ।
|
|
|
|
```html
|
|
<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
|
|
...
|
|
<a href="/login" onclick="onLinkClick(event)">Logout</a>
|
|
```
|
|
|
|
ਉਪਰੋਕਤ `event` ਆਬਜੈਕਟ `click` ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਾਡੇ `onLinkClick` ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ।
|
|
|
|
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ `click` ਇਵੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ ਬਾਈਂਡ ਕਰੋ, ਇੱਥੇ `navigate()` ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ।
|
|
|
|
ਇਨ੍ਹਾਂ ਲਿੰਕਸ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਹੁਣ ਤੁਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।
|
|
|
|
✅ `history.pushState` ਵਿਧੀ HTML5 ਮਿਆਰ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ [ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ](https://caniuse.com/?search=pushState) ਵਿੱਚ ਲਾਗੂ ਕੀਤੀ
|
|
|
|
**ਅਸਵੀਕਾਰਨਾ**:
|
|
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਣੀਕਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ। |