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	3 weeks ago

README.md

Bina Aplikasi Perbankan Bahagian 1: Templat HTML dan Laluan dalam Aplikasi Web

Kuiz Pra-Kuliah

Kuiz pra-kuliah

Pengenalan

Sejak kemunculan JavaScript dalam pelayar, laman web menjadi lebih interaktif dan kompleks berbanding sebelumnya. Teknologi web kini sering digunakan untuk mencipta aplikasi yang berfungsi sepenuhnya dan berjalan terus dalam pelayar, yang kita panggil aplikasi web. Oleh kerana aplikasi web sangat interaktif, pengguna tidak mahu menunggu keseluruhan halaman dimuat semula setiap kali tindakan dilakukan. Oleh itu, JavaScript digunakan untuk mengemas kini HTML secara langsung menggunakan DOM, bagi memberikan pengalaman pengguna yang lebih lancar.

Dalam pelajaran ini, kita akan membina asas untuk mencipta aplikasi perbankan web, menggunakan templat HTML untuk mencipta pelbagai skrin yang boleh dipaparkan dan dikemas kini tanpa perlu memuat semula keseluruhan halaman HTML.

Prasyarat

Anda memerlukan pelayan web tempatan untuk menguji aplikasi web yang akan kita bina dalam pelajaran ini. Jika anda belum memilikinya, anda boleh memasang Node.js dan gunakan arahan npx lite-server dari folder projek anda. Ia akan mencipta pelayan web tempatan dan membuka aplikasi anda dalam pelayar.

Persediaan

Pada komputer anda, cipta folder bernama bank dengan fail bernama index.html di dalamnya. Kita akan bermula dengan boilerplate HTML ini:

<!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>

Templat HTML

Jika anda ingin mencipta pelbagai skrin untuk satu halaman web, satu penyelesaian adalah dengan mencipta satu fail HTML untuk setiap skrin yang ingin dipaparkan. Walau bagaimanapun, penyelesaian ini mempunyai beberapa kelemahan:

Anda perlu memuat semula keseluruhan HTML apabila menukar skrin, yang boleh menjadi perlahan.
Sukar untuk berkongsi data antara skrin yang berbeza.

Pendekatan lain adalah dengan hanya mempunyai satu fail HTML, dan mendefinisikan pelbagai templat HTML menggunakan elemen <template>. Templat adalah blok HTML yang boleh digunakan semula, tidak dipaparkan oleh pelayar, dan perlu diaktifkan semasa runtime menggunakan JavaScript.

Tugasan

Kita akan mencipta aplikasi bank dengan dua skrin: halaman log masuk dan papan pemuka. Pertama, tambahkan elemen pemegang tempat dalam badan HTML yang akan kita gunakan untuk mengaktifkan pelbagai skrin aplikasi kita:

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

Kita memberikan id untuk memudahkan pencarian dengan JavaScript nanti.

Tip: kerana kandungan elemen ini akan digantikan, kita boleh meletakkan mesej atau penunjuk pemuatan yang akan dipaparkan semasa aplikasi sedang dimuat.

Seterusnya, tambahkan templat HTML untuk halaman log masuk di bawahnya. Buat masa ini, kita hanya akan meletakkan tajuk dan bahagian yang mengandungi pautan yang akan kita gunakan untuk navigasi.

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

Kemudian tambahkan satu lagi templat HTML untuk halaman papan pemuka. Halaman ini akan mengandungi pelbagai bahagian:

Tajuk dengan tajuk utama dan pautan log keluar
Baki semasa akaun bank
Senarai transaksi, dipaparkan dalam jadual

<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>

Tip: semasa mencipta templat HTML, jika anda ingin melihat bagaimana rupanya, anda boleh mengulas baris <template> dan </template> dengan menyelubunginya menggunakan .

✅ Mengapa anda fikir kita menggunakan atribut id pada templat? Bolehkah kita menggunakan sesuatu yang lain seperti kelas?

Memaparkan templat dengan JavaScript

Jika anda mencuba fail HTML semasa anda dalam pelayar, anda akan melihat bahawa ia terhenti pada paparan Loading.... Ini kerana kita perlu menambah kod JavaScript untuk mengaktifkan dan memaparkan templat HTML.

Mengaktifkan templat biasanya dilakukan dalam 3 langkah:

Dapatkan elemen templat dalam DOM, contohnya menggunakan document.getElementById.
Klon elemen templat, menggunakan cloneNode.
Lampirkan ia ke DOM di bawah elemen yang kelihatan, contohnya menggunakan appendChild.

✅ Mengapa kita perlu mengklon templat sebelum melampirkannya ke DOM? Apa yang anda fikir akan berlaku jika kita melangkau langkah ini?

Tugasan

Cipta fail baru bernama app.js dalam folder projek anda dan import fail tersebut dalam bahagian <head> HTML anda:

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

Sekarang dalam app.js, kita akan mencipta fungsi baru 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);
}

Apa yang kita lakukan di sini adalah tepat seperti 3 langkah yang diterangkan di atas. Kita mengaktifkan templat dengan id templateId, dan meletakkan kandungan yang telah diklon dalam pemegang tempat aplikasi kita. Perhatikan bahawa kita perlu menggunakan cloneNode(true) untuk menyalin keseluruhan subpokok templat.

Sekarang panggil fungsi ini dengan salah satu templat dan lihat hasilnya.

updateRoute('login');

✅ Apakah tujuan kod ini app.innerHTML = '';? Apa yang berlaku tanpanya?

Mencipta laluan

Apabila bercakap tentang aplikasi web, kita memanggil Routing sebagai niat untuk memetakan URL kepada skrin tertentu yang sepatutnya dipaparkan. Pada laman web dengan pelbagai fail HTML, ini dilakukan secara automatik kerana laluan fail dicerminkan pada URL. Sebagai contoh, dengan fail-fail ini dalam folder projek anda:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

Jika anda mencipta pelayan web dengan mywebsite sebagai akar, pemetaan URL akan menjadi:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

Walau bagaimanapun, untuk aplikasi web kita yang menggunakan satu fail HTML yang mengandungi semua skrin, tingkah laku lalai ini tidak akan membantu kita. Kita perlu mencipta peta ini secara manual dan mengemas kini templat yang dipaparkan menggunakan JavaScript.

Tugasan

Kita akan menggunakan objek mudah untuk melaksanakan peta antara laluan URL dan templat kita. Tambahkan objek ini di bahagian atas fail app.js anda.

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

Sekarang mari kita ubah sedikit fungsi updateRoute. Daripada terus menghantar templateId sebagai argumen, kita ingin mendapatkannya dengan terlebih dahulu melihat URL semasa, dan kemudian menggunakan peta kita untuk mendapatkan nilai ID templat yang sepadan. Kita boleh menggunakan window.location.pathname untuk mendapatkan hanya bahagian laluan dari 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);
}

Di sini kita memetakan laluan yang kita nyatakan kepada templat yang sepadan. Anda boleh mencuba bahawa ia berfungsi dengan betul dengan menukar URL secara manual dalam pelayar anda.

✅ Apa yang berlaku jika anda memasukkan laluan yang tidak dikenali dalam URL? Bagaimana kita boleh menyelesaikan ini?

Menambah navigasi

Langkah seterusnya untuk aplikasi kita adalah menambah kemungkinan untuk menavigasi antara halaman tanpa perlu menukar URL secara manual. Ini melibatkan dua perkara:

Mengemas kini URL semasa
Mengemas kini templat yang dipaparkan berdasarkan URL baru

Kita sudah menyelesaikan bahagian kedua dengan fungsi updateRoute, jadi kita perlu memikirkan cara untuk mengemas kini URL semasa.

Kita perlu menggunakan JavaScript dan lebih khusus lagi history.pushState yang membolehkan kita mengemas kini URL dan mencipta entri baru dalam sejarah pelayaran, tanpa memuat semula HTML.

Nota: Walaupun elemen sauh HTML <a href> boleh digunakan sendiri untuk mencipta pautan hiper ke URL yang berbeza, ia akan membuat pelayar memuat semula HTML secara lalai. Adalah perlu untuk menghalang tingkah laku ini apabila mengendalikan laluan dengan JavaScript tersuai, menggunakan fungsi preventDefault() pada acara klik.

Tugasan

Mari kita cipta fungsi baru yang boleh kita gunakan untuk menavigasi dalam aplikasi kita:

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

Kaedah ini pertama-tama mengemas kini URL semasa berdasarkan laluan yang diberikan, kemudian mengemas kini templat. Sifat window.location.origin mengembalikan akar URL, membolehkan kita membina semula URL lengkap dari laluan yang diberikan.

Sekarang kita mempunyai fungsi ini, kita boleh menyelesaikan masalah yang kita hadapi jika laluan tidak sepadan dengan mana-mana laluan yang ditentukan. Kita akan mengubah fungsi updateRoute dengan menambah laluan lalai kepada salah satu laluan yang sedia ada jika kita tidak dapat mencari padanan.

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

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

  ...

Jika laluan tidak dapat ditemui, kita kini akan mengarahkan semula ke halaman login.

Sekarang mari kita cipta fungsi untuk mendapatkan URL apabila pautan diklik, dan untuk menghalang tingkah laku lalai pautan pelayar:

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

Mari kita lengkapi sistem navigasi dengan menambah pengikatan kepada pautan Login dan Logout dalam HTML.

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

Objek event di atas menangkap acara click dan menghantarnya ke fungsi onLinkClick kita.

Menggunakan atribut onclick, ikat acara click kepada kod JavaScript, di sini panggilan kepada fungsi navigate().

Cuba klik pada pautan ini, anda sepatutnya kini boleh menavigasi antara pelbagai skrin aplikasi anda.

✅ Kaedah history.pushState adalah sebahagian daripada standard HTML5 dan dilaksanakan dalam semua pelayar moden. Jika anda membina aplikasi web untuk pelayar lama, terdapat helah yang boleh anda gunakan sebagai ganti API ini: menggunakan hash (#) sebelum laluan, anda boleh melaksanakan laluan yang berfungsi dengan navigasi sauh biasa dan tidak memuat semula halaman, kerana tujuannya adalah untuk mencipta pautan dalaman dalam halaman.

Mengendalikan butang kembali dan maju pelayar

Menggunakan history.pushState mencipta entri baru dalam sejarah navigasi pelayar. Anda boleh memeriksanya dengan menahan butang kembali pelayar anda, ia sepatutnya memaparkan sesuatu seperti ini:

Jika anda cuba klik pada butang kembali beberapa kali, anda akan melihat bahawa URL semasa berubah dan sejarah dikemas kini, tetapi templat yang sama terus dipaparkan.

Ini kerana aplikasi tidak tahu bahawa kita perlu memanggil updateRoute() setiap kali sejarah berubah. Jika anda melihat dokumentasi history.pushState, anda boleh melihat bahawa jika keadaan berubah - bermakna kita berpindah ke URL yang berbeza - acara popstate dicetuskan. Kita akan menggunakan itu untuk menyelesaikan masalah ini.

Tugasan

Untuk memastikan templat yang dipaparkan dikemas kini apabila sejarah pelayar berubah, kita akan melampirkan fungsi baru yang memanggil updateRoute(). Kita akan melakukannya di bahagian bawah fail app.js kita:

window.onpopstate = () => updateRoute();
updateRoute();

Nota: kita menggunakan fungsi anak panah di sini untuk mengisytiharkan pengendali acara popstate kita untuk ringkas, tetapi fungsi biasa juga akan berfungsi sama.

Berikut adalah video penyegaran tentang fungsi anak panah:

🎥 Klik imej di atas untuk video tentang fungsi anak panah.

Sekarang cuba gunakan butang kembali dan maju pelayar anda, dan periksa bahawa laluan yang dipaparkan dikemas kini dengan betul kali ini.

🚀 Cabaran

Tambahkan templat dan laluan baru untuk halaman ketiga yang menunjukkan kredit untuk aplikasi ini.

Kuiz Pasca-Kuliah

Kuiz pasca-kuliah

Ulasan & Kajian Kendiri

Routing adalah salah satu bahagian yang mengejutkan sukar dalam pembangunan web, terutamanya apabila web bergerak dari tingkah laku penyegaran halaman kepada penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit tentang bagaimana perkhidmatan Azure Static Web App mengendalikan routing. Bolehkah anda terangkan mengapa beberapa keputusan yang diterangkan dalam dokumen itu diperlukan?

Tugasan

Perbaiki routing

Penafian:
Dokumen ini telah diterjemahkan menggunakan perkhidmatan terjemahan AI Co-op Translator. Walaupun kami berusaha untuk memastikan ketepatan, sila ambil perhatian bahawa terjemahan automatik mungkin mengandungi kesilapan atau ketidaktepatan. Dokumen asal dalam bahasa asalnya harus dianggap sebagai sumber yang berwibawa. Untuk maklumat yang kritikal, terjemahan manusia profesional adalah disyorkan. Kami tidak bertanggungjawab atas sebarang salah faham atau salah tafsir yang timbul daripada penggunaan terjemahan ini.