` ini kosong, artinya tidak ada yang akan ditampilkan di layar sampai kita menambahkan konten ke dalamnya. Kita juga memberikan `id` agar mudah diambil menggunakan JavaScript. Kembali ke file `app.js` dan buat fungsi pembantu baru `updateElement`: ```js function updateElement(id, text) { const element = document.getElementById(id); element.textContent = text; } ``` Fungsi ini cukup sederhana: diberikan *id* elemen dan *teks*, fungsi ini akan memperbarui konten teks dari elemen DOM dengan `id` yang sesuai. Mari kita gunakan metode ini sebagai pengganti pesan kesalahan sebelumnya di fungsi `login`: ```js if (data.error) { return updateElement('loginError', data.error); } ``` Sekarang jika Anda mencoba login dengan akun yang tidak valid, Anda akan melihat sesuatu seperti ini:  Sekarang kita memiliki teks kesalahan yang muncul secara visual, tetapi jika Anda mencobanya dengan pembaca layar, Anda akan melihat bahwa tidak ada yang diumumkan. Agar teks yang ditambahkan secara dinamis ke halaman dapat diumumkan oleh pembaca layar, teks tersebut perlu menggunakan sesuatu yang disebut [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Di sini kita akan menggunakan jenis live region tertentu yang disebut alert: ```html ``` Terapkan perilaku yang sama untuk kesalahan fungsi `register` (jangan lupa untuk memperbarui HTML). ## Menampilkan Informasi di Dashboard Dengan menggunakan teknik yang baru saja kita lihat, kita juga akan menangani penampilan informasi akun di halaman dashboard. Berikut adalah seperti apa objek akun yang diterima dari server: ```json { "user": "test", "currency": "$", "description": "Test account", "balance": 75, "transactions": [ { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } ], } ``` > Catatan: untuk mempermudah pekerjaan Anda, Anda dapat menggunakan akun `test` yang sudah ada dan telah diisi dengan data. ### Tugas Mari kita mulai dengan mengganti bagian "Balance" di HTML untuk menambahkan elemen placeholder: ```html

Balance:

``` Kita juga akan menambahkan bagian baru tepat di bawahnya untuk menampilkan deskripsi akun: ```html

``` ✅ Karena deskripsi akun berfungsi sebagai judul untuk konten di bawahnya, itu ditandai secara semantik sebagai heading. Pelajari lebih lanjut tentang bagaimana [struktur heading](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) penting untuk aksesibilitas, dan lihat secara kritis halaman untuk menentukan apa lagi yang bisa menjadi heading. Selanjutnya, kita akan membuat fungsi baru di `app.js` untuk mengisi placeholder: ```js function updateDashboard() { if (!account) { return navigate('/login'); } updateElement('description', account.description); updateElement('balance', account.balance.toFixed(2)); updateElement('currency', account.currency); } ``` Pertama, kita memeriksa bahwa kita memiliki data akun yang kita butuhkan sebelum melangkah lebih jauh. Kemudian kita menggunakan fungsi `updateElement()` yang kita buat sebelumnya untuk memperbarui HTML. > Untuk membuat tampilan saldo lebih rapi, kita menggunakan metode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) untuk memaksa menampilkan nilai dengan 2 digit setelah titik desimal. Sekarang kita perlu memanggil fungsi `updateDashboard()` kita setiap kali halaman dashboard dimuat. Jika Anda sudah menyelesaikan [tugas pelajaran 1](../1-template-route/assignment.md), ini seharusnya mudah, jika tidak, Anda dapat menggunakan implementasi berikut. Tambahkan kode ini di akhir fungsi `updateRoute()`: ```js if (typeof route.init === 'function') { route.init(); } ``` Dan perbarui definisi rute dengan: ```js const routes = { '/login': { templateId: 'login' }, '/dashboard': { templateId: 'dashboard', init: updateDashboard } }; ``` Dengan perubahan ini, setiap kali halaman dashboard ditampilkan, fungsi `updateDashboard()` dipanggil. Setelah login, Anda seharusnya dapat melihat saldo akun, mata uang, dan deskripsi. ## Membuat Baris Tabel Secara Dinamis dengan Template HTML Dalam [pelajaran pertama](../1-template-route/README.md), kita menggunakan template HTML bersama dengan metode [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) untuk mengimplementasikan navigasi dalam aplikasi kita. Template juga dapat lebih kecil dan digunakan untuk mengisi bagian halaman yang berulang secara dinamis. Kita akan menggunakan pendekatan serupa untuk menampilkan daftar transaksi dalam tabel HTML. ### Tugas Tambahkan template baru di `` HTML: ```html ``` Template ini mewakili satu baris tabel, dengan 3 kolom yang ingin kita isi: *tanggal*, *objek*, dan *jumlah* dari transaksi. Kemudian, tambahkan properti `id` ini ke elemen `` tabel dalam template dashboard untuk mempermudah pencarian menggunakan JavaScript: ```html ``` HTML kita sudah siap, mari kita beralih ke kode JavaScript dan membuat fungsi baru `createTransactionRow`: ```js function createTransactionRow(transaction) { const template = document.getElementById('transaction'); const transactionRow = template.content.cloneNode(true); const tr = transactionRow.querySelector('tr'); tr.children[0].textContent = transaction.date; tr.children[1].textContent = transaction.object; tr.children[2].textContent = transaction.amount.toFixed(2); return transactionRow; } ``` Fungsi ini melakukan persis seperti namanya: menggunakan template yang kita buat sebelumnya, fungsi ini membuat baris tabel baru dan mengisi isinya menggunakan data transaksi. Kita akan menggunakan ini dalam fungsi `updateDashboard()` kita untuk mengisi tabel: ```js const transactionsRows = document.createDocumentFragment(); for (const transaction of account.transactions) { const transactionRow = createTransactionRow(transaction); transactionsRows.appendChild(transactionRow); } updateElement('transactions', transactionsRows); ``` Di sini kita menggunakan metode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) yang membuat fragmen DOM baru yang dapat kita kerjakan, sebelum akhirnya melampirkannya ke tabel HTML kita. Masih ada satu hal lagi yang harus kita lakukan sebelum kode ini dapat bekerja, karena fungsi `updateElement()` kita saat ini hanya mendukung konten teks. Mari kita ubah sedikit kodenya: ```js function updateElement(id, textOrNode) { const element = document.getElementById(id); element.textContent = ''; // Removes all children element.append(textOrNode); } ``` Kita menggunakan metode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) karena memungkinkan untuk melampirkan teks atau [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node) ke elemen induk, yang sempurna untuk semua kasus penggunaan kita. Jika Anda mencoba menggunakan akun `test` untuk login, Anda sekarang seharusnya melihat daftar transaksi di dashboard 🎉. --- ## 🚀 Tantangan Bekerja sama untuk membuat halaman dashboard terlihat seperti aplikasi perbankan yang nyata. Jika Anda sudah menata aplikasi Anda, cobalah menggunakan [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) untuk menciptakan [desain responsif](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) yang berfungsi dengan baik di perangkat desktop maupun mobile. Berikut adalah contoh halaman dashboard yang sudah ditata:  ## Kuis Setelah Kuliah [Kuis setelah kuliah](https://ff-quizzes.netlify.app/web/quiz/46) ## Tugas [Refactor dan beri komentar pada kode Anda](assignment.md) --- **Penafian**: Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan hasil yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi yang bersifat kritis, disarankan menggunakan jasa terjemahan manusia profesional. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.