History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

ਬੈਂਕਿੰਗ ਐਪ ਬਣਾਓ ਭਾਗ 1: ਵੈੱਬ ਐਪ ਵਿੱਚ HTML ਟੈਂਪਲੇਟ ਅਤੇ ਰੂਟਸ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਪਰਿਚਯ

ਜਦੋਂ ਤੋਂ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਇਆ ਹੈ, ਵੈੱਬਸਾਈਟਾਂ ਪਹਿਲਾਂ ਨਾਲੋਂ ਜ਼ਿਆਦਾ ਇੰਟਰਐਕਟਿਵ ਅਤੇ ਜਟਿਲ ਹੋ ਗਈਆਂ ਹਨ। ਵੈੱਬ ਤਕਨਾਲੋਜੀਆਂ ਹੁਣ ਆਮ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਗਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵਰਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ ਜੋ ਸਿੱਧੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚਲਦੀਆਂ ਹਨ, ਜਿਨ੍ਹਾਂ ਨੂੰ ਅਸੀਂ ਵੈੱਬ ਐਪ ਕਹਿੰਦੇ ਹਾਂ। ਕਿਉਂਕਿ ਵੈੱਬ ਐਪਸ ਬਹੁਤ ਇੰਟਰਐਕਟਿਵ ਹੁੰਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਯੂਜ਼ਰ ਹਰ ਵਾਰ ਪੂਰੇ ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕਰਨ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਦੇ। ਇਸੇ ਲਈ ਜਾਵਾਸਕ੍ਰਿਪਟ DOM ਦੀ ਵਰਤੋਂ ਕਰਕੇ HTML ਨੂੰ ਸਿੱਧੇ ਅਪਡੇਟ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਇੱਕ ਸਹੀ ਯੂਜ਼ਰ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਬੈਂਕ ਵੈੱਬ ਐਪ ਬਣਾਉਣ ਲਈ ਬੁਨਿਆਦ ਰੱਖਾਂਗੇ, HTML ਟੈਂਪਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਈ ਸਕ੍ਰੀਨ ਬਣਾਉਣ ਲਈ ਜੋ ਪੂਰੇ HTML ਪੇਜ ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ ਬਿਨਾਂ ਦਿਖਾਈ ਅਤੇ ਅਪਡੇਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

ਪੂਰਵ ਸ਼ਰਤ

ਤੁਹਾਨੂੰ ਇਸ ਪਾਠ ਵਿੱਚ ਬਣਾਈ ਜਾਣ ਵਾਲੀ ਵੈੱਬ ਐਪ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਇੱਕ ਲੋਕਲ ਵੈੱਬ ਸਰਵਰ ਦੀ ਲੋੜ ਹੈ। ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਨਹੀਂ ਹੈ, ਤਾਂ ਤੁਸੀਂ Node.js ਇੰਸਟਾਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਤੋਂ ਕਮਾਂਡ npx lite-server ਚਲਾ ਸਕਦੇ ਹੋ। ਇਹ ਇੱਕ ਲੋਕਲ ਵੈੱਬ ਸਰਵਰ ਬਣਾਏਗਾ ਅਤੇ ਤੁਹਾਡੀ ਐਪ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੇਗਾ।

ਤਿਆਰੀ

ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ, bank ਨਾਮਕ ਇੱਕ ਫੋਲਡਰ ਬਣਾਓ ਜਿਸ ਵਿੱਚ index.html ਨਾਮਕ ਇੱਕ ਫਾਈਲ ਹੋਵੇ। ਅਸੀਂ ਇਸ 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 ਟੈਂਪਲੇਟ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤੇ ਜਾਣ। ਇੱਕ ਟੈਂਪਲੇਟ ਇੱਕ ਦੁਬਾਰਾ ਵਰਤਣਯੋਗ HTML ਬਲਾਕ ਹੈ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਦੁਆਰਾ ਦਿਖਾਇਆ ਨਹੀਂ ਜਾਂਦਾ, ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰਨਟਾਈਮ 'ਤੇ ਇਸਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

ਕੰਮ

ਅਸੀਂ ਇੱਕ ਬੈਂਕ ਐਪ ਬਣਾਵਾਂਗੇ ਜਿਸ ਵਿੱਚ ਦੋ ਸਕ੍ਰੀਨ ਹੋਣਗੇ: ਲੌਗਿਨ ਪੇਜ ਅਤੇ ਡੈਸ਼ਬੋਰਡ। ਪਹਿਲਾਂ, ਆਓ HTML ਬਾਡੀ ਵਿੱਚ ਇੱਕ ਪਲੇਸਹੋਲਡਰ ਐਲੀਮੈਂਟ ਸ਼ਾਮਲ ਕਰੀਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਲਈ ਕਰਾਂਗੇ:

<div id="app">Loading...</div>

ਅਸੀਂ ਇਸਨੂੰ ਇੱਕ id ਦੇ ਰਹੇ ਹਾਂ ਤਾਂ ਜੋ ਇਸਨੂੰ ਬਾਅਦ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਲੱਭਣਾ ਆਸਾਨ ਹੋਵੇ।

ਟਿੱਪ: ਕਿਉਂਕਿ ਇਸ ਐਲੀਮੈਂਟ ਦੀ ਸਮੱਗਰੀ ਬਦਲੀ ਜਾਵੇਗੀ, ਅਸੀਂ ਇਸ ਵਿੱਚ ਇੱਕ ਲੋਡਿੰਗ ਸੁਨੇਹਾ ਜਾਂ ਸੰਕੇਤਕ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੋ ਐਪ ਲੋਡ ਹੋਣ ਦੌਰਾਨ ਦਿਖਾਇਆ ਜਾਵੇਗਾ।

ਅਗਲੇ ਕਦਮ ਵਿੱਚ, ਆਓ ਲੌਗਿਨ ਪੇਜ ਲਈ HTML ਟੈਂਪਲੇਟ ਸ਼ਾਮਲ ਕਰੀਏ। ਇਸ ਵਿੱਚ ਅਸੀਂ ਫਿਲਹਾਲ ਸਿਰਫ ਇੱਕ ਸਿਰਲੇਖ ਅਤੇ ਇੱਕ ਸੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰਾਂਗੇ ਜਿਸ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਹੋਵੇਗਾ ਜੋ ਨੈਵੀਗੇਸ਼ਨ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਵੇਗਾ।

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

ਫਿਰ ਅਸੀਂ ਡੈਸ਼ਬੋਰਡ ਪੇਜ ਲਈ ਇੱਕ ਹੋਰ 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 ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਅਤੇ ਦਿਖਾ ਸਕੇ।

ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਦੇ ਤਿੰਨ ਕਦਮ ਹੁੰਦੇ ਹਨ:

DOM ਵਿੱਚ ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਲੱਭੋ, ਉਦਾਹਰਣ ਲਈ document.getElementById ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
ਟੈਂਪਲੇਟ ਐਲੀਮੈਂਟ ਨੂੰ ਕਲੋਨ ਕਰੋ, cloneNode ਦੀ ਵਰਤੋਂ ਕਰਕੇ।
ਇਸਨੂੰ ਇੱਕ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਐਲੀਮੈਂਟ ਦੇ ਹੇਠਾਂ DOM ਵਿੱਚ ਜੋੜੋ, ਉਦਾਹਰਣ ਲਈ appendChild ਦੀ ਵਰਤੋਂ ਕਰਕੇ।

✅ ਸਾਨੂੰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਕਲੋਨ ਕਰਨ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ? ਤੁਹਾਡੇ ਖਿਆਲ ਵਿੱਚ ਕੀ ਹੋਵੇਗਾ ਜੇ ਅਸੀਂ ਇਹ ਕਦਮ ਛੱਡ ਦਈਏ?

ਕੰਮ

ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਵਿੱਚ app.js ਨਾਮਕ ਇੱਕ ਨਵੀਂ ਫਾਈਲ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਆਪਣੇ HTML ਦੇ <head> ਸੈਕਸ਼ਨ ਵਿੱਚ ਇੰਪੋਰਟ ਕਰੋ:

<script src="app.js" defer></script>

ਹੁਣ app.js ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ updateRoute ਬਣਾਵਾਂਗੇ:

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) ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ ਤਾਂ ਜੋ ਟੈਂਪਲੇਟ ਦੇ ਪੂਰੇ ਸਬਟ੍ਰੀ ਨੂੰ ਕਾਪੀ ਕੀਤਾ ਜਾ ਸਕੇ।

ਹੁਣ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਕਿਸੇ ਇੱਕ ਟੈਂਪਲੇਟ ਨਾਲ ਕਾਲ ਕਰੋ ਅਤੇ ਨਤੀਜੇ ਨੂੰ ਦੇਖੋ।

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 ਪਾਥ ਅਤੇ ਸਾਡੇ ਟੈਂਪਲੇਟਸ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਮੈਪ ਨੂੰ ਲਾਗੂ ਕਰੇਗਾ। ਇਸ ਆਬਜੈਕਟ ਨੂੰ ਆਪਣੇ app.js ਫਾਈਲ ਦੇ ਸਿਰੇ 'ਤੇ ਸ਼ਾਮਲ ਕਰੋ।

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

ਹੁਣ ਆਓ updateRoute ਫੰਕਸ਼ਨ ਨੂੰ ਥੋੜ੍ਹਾ ਸੋਧੀਏ। ਸਿੱਧੇ templateId ਨੂੰ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਪਹਿਲਾਂ ਮੌਜੂਦਾ URL ਨੂੰ ਵੇਖਣਾ ਚਾਹੁੰਦੇ ਹਾਂ, ਅਤੇ ਫਿਰ ਆਪਣੇ ਮੈਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਬੰਧਤ ਟੈਂਪਲੇਟ ID ਮੁੱਲ ਪ੍ਰਾਪਤ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ window.location.pathname ਦੀ ਵਰਤੋਂ ਕਰਕੇ URL ਤੋਂ ਸਿਰਫ ਪਾਥ ਸੈਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਾਂ।

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 ਨੂੰ ਮੈਨੂਅਲੀ ਬਦਲਣ ਦੀ ਲੋੜ। ਇਸਦਾ ਮਤਲਬ ਦੋ ਗੱਲਾਂ ਹਨ:

ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ
ਨਵੇਂ URL ਦੇ ਆਧਾਰ 'ਤੇ ਦਿਖਾਈ ਗਈ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਨਾ

ਦੂਜੇ ਹਿੱਸੇ ਦੀ ਦੇਖਭਾਲ ਅਸੀਂ updateRoute ਫੰਕਸ਼ਨ ਨਾਲ ਪਹਿਲਾਂ ਹੀ ਕਰ ਚੁੱਕੇ ਹਾਂ, ਇਸ ਲਈ ਸਾਨੂੰ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਨ ਦਾ ਤਰੀਕਾ ਲੱਭਣਾ ਪਵੇਗਾ।

ਅਸੀਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਖਾਸ ਤੌਰ 'ਤੇ history.pushState ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ, ਜੋ ਕਿ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਅਤੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਇਤਿਹਾਸ ਵਿੱਚ ਇੱਕ ਨਵਾਂ ਐਂਟਰੀ ਬਣਾਉਂਦਾ ਹੈ, ਬਿਨਾਂ HTML ਨੂੰ ਰੀਲੋਡ ਕੀਤੇ।

ਨੋਟ: ਜਦੋਂ ਕਿ HTML ਐਂਕਰ ਐਲੀਮੈਂਟ <a href> ਨੂੰ ਆਪਣੇ ਆਪ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਵੱਖ-ਵੱਖ URL ਲਈ ਹਾਈਪਰਲਿੰਕ ਬਣਾਉਣ ਲਈ, ਇਹ ਡਿਫਾਲਟ ਤੌਰ 'ਤੇ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ HTML ਰੀਲੋਡ ਕਰਨ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ। ਜਦੋਂ ਰੂਟਿੰਗ ਨੂੰ ਕਸਟਮ ਜਾਵਾਸਕ੍ਰਿਪਟ ਨਾਲ ਸੰਭਾਲਿਆ ਜਾ ਰਿਹਾ ਹੋਵੇ, ਤਾਂ ਇਸ ਵਿਹਾਰ ਨੂੰ ਰੋਕਣ ਲਈ preventDefault() ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਜ਼ਰੂਰੀ ਹੈ।

ਕੰਮ

ਆਓ ਇੱਕ ਨਵਾਂ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜਿਸਦੀ ਵਰਤੋਂ ਅਸੀਂ ਆਪਣੀ ਐਪ ਵਿੱਚ ਨੈਵੀਗੇਟ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹਾਂ:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

ਇਹ ਵਿਧੀ ਪਹਿਲਾਂ ਦਿੱਤੇ ਪਾਥ ਦੇ ਆਧਾਰ 'ਤੇ ਮੌਜੂਦਾ URL ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ, ਫਿਰ ਟੈਂਪਲੇਟ ਨੂੰ ਅਪਡੇਟ ਕਰਦੀ ਹੈ। ਪ੍ਰਾਪਰਟੀ window.location.origin URL ਰੂਟ ਨੂੰ ਵਾਪਸ ਕਰਦੀ ਹੈ, ਜੋ ਸਾਨੂੰ ਦਿੱਤੇ ਪਾਥ ਤੋਂ ਇੱਕ ਪੂਰਾ URL ਦੁਬਾਰਾ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।

ਹੁਣ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਇਹ ਫੰਕਸ਼ਨ ਹੈ, ਅਸੀਂ ਉਸ ਸਮੱਸਿਆ ਦੀ ਦੇਖਭਾਲ ਕਰ ਸਕਦੇ ਹਾਂ ਜੇਕਰ ਕੋਈ ਪਾਥ ਕਿਸੇ ਵੀ ਪਰਿਭਾਸ਼ਿਤ ਰੂਟ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਅਸੀਂ updateRoute ਫੰਕਸ਼ਨ ਨੂੰ ਸੋਧਾਂਗੇ ਅਤੇ ਜੇਕਰ ਅਸੀਂ ਕੋਈ ਮੇਲ ਨਹੀਂ ਲੱਭਦੇ, ਤਾਂ ਮੌਜੂਦਾ ਰੂਟ ਨੂੰ ਮੌਜੂਦਾ ਰੂਟ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਤੇ ਡਿਫਾਲਟ ਕਰਾਂਗੇ।

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  ...

ਜੇਕਰ ਕੋਈ ਰੂਟ ਨਹੀਂ ਮਿਲਦਾ, ਤਾਂ ਅਸੀਂ ਹੁਣ login ਪੇਜ ਤੇ ਰੀਡਾਇਰੈਕਟ ਕਰਾਂਗੇ।

ਹੁਣ ਆਓ ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਈਏ ਜੋ ਲਿੰਕ 'ਤੇ ਕਲਿੱਕ ਕਰਨ 'ਤੇ URL ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਫਾਲਟ ਲਿੰਕ ਵਿਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

ਆਓ ਆਪਣੇ ਨੈਵੀਗੇਸ਼ਨ ਸਿਸਟਮ ਨੂੰ ਪੂਰਾ ਕਰੀਏ ਅਤੇ ਆਪਣੇ HTML ਵਿੱਚ Login ਅਤੇ Logout ਲਿੰਕਸ ਲਈ ਬਾਈਂਡਿੰਗ ਸ਼ਾਮਲ ਕਰੀਏ।

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

ਉਪਰੋਕਤ event ਆਬਜੈਕਟ click ਇਵੈਂਟ ਨੂੰ ਕੈਪਚਰ ਕਰਦਾ ਹੈ ਅਤੇ ਇਸਨੂੰ ਸਾਡੇ onLinkClick ਫੰਕਸ਼ਨ ਨੂੰ ਪਾਸ ਕਰਦਾ ਹੈ।

onclick ਐਟ੍ਰਿਬਿਊਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ click ਇਵੈਂਟ ਨੂੰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਕੋਡ ਨਾਲ ਬਾਈਂਡ ਕਰੋ, ਇੱਥੇ navigate() ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰੋ।

ਇਨ੍ਹਾਂ ਲਿੰਕਸ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਹੁਣ ਤੁਸੀਂ ਆਪਣੀ ਐਪ ਦੀਆਂ ਵੱਖ-ਵੱਖ ਸਕ੍ਰੀਨਾਂ ਦੇ ਵਿਚਕਾਰ ਨੈਵੀਗੇਟ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

✅ history.pushState ਵਿਧੀ HTML5 ਮਿਆਰ ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਲਾਗੂ ਕੀਤੀ

ਅਸਵੀਕਾਰਨਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਣੀਕਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।