23 KiB

Raw Blame History

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

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

ਤਾਰੁਫ਼

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

ਇਸ ਪਾਠ ਵਿੱਚ, ਅਸੀਂ ਬੈਂਕ ਵੈੱਬ ਐਪ ਬਣਾਉਣ ਲਈ ਨੀਂਹ ਰੱਖਣ ਜਾ ਰਹੇ ਹਾਂ, 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 ਟੈਂਪਲੇਟਾਂ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਅਤੇ ਦਿਖਾਉਂਦਾ ਹੈ।

ਟੈਂਪਲੇਟ ਨੂੰ ਇੰਸਟੈਂਸ਼ੀਏਟ ਕਰਨ ਲਈ ਆਮ ਤੌਰ 'ਤੇ 3 ਕਦਮਾਂ ਵਿੱਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

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);
}

ਇੱਥੇ ਅਸੀਂ ਉਪਰੋਕਤ 3 ਕਦਮਾਂ ਨੂੰ ਹੀ ਕਰਦੇ ਹਾਂ। ਅਸੀਂ 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 ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦਾ ਯਤਨ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ ਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਅਸੀਂ ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤ ਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।

23 KiB Raw Blame History