0% menganggap dokumen ini bermanfaat (0 suara)
3 tayangan3 halaman

Blog Dinamis dengan Fitur Komentar

Dokumen ini menjelaskan tentang pembuatan halaman blog dinamis dan responsif dengan fitur komentar menggunakan HTML5, CSS3, dan JavaScript. Pengguna harus memasukkan nama mereka saat pertama kali mengakses halaman, dan komentar disimpan di localStorage untuk mempertahankan data setelah refresh. Fitur yang harus ada termasuk form komentar, opsi edit dan hapus, serta tampilan komentar yang mencakup nama pengguna dan konten.

Diunggah oleh

hasan ahmad badar
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
3 tayangan3 halaman

Blog Dinamis dengan Fitur Komentar

Dokumen ini menjelaskan tentang pembuatan halaman blog dinamis dan responsif dengan fitur komentar menggunakan HTML5, CSS3, dan JavaScript. Pengguna harus memasukkan nama mereka saat pertama kali mengakses halaman, dan komentar disimpan di localStorage untuk mempertahankan data setelah refresh. Fitur yang harus ada termasuk form komentar, opsi edit dan hapus, serta tampilan komentar yang mencakup nama pengguna dan konten.

Diunggah oleh

hasan ahmad badar
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Website Blog

Introduksi
Buatlah halaman blog yang dinamis dan responsif dengan bagian
komentar yang memungkinkan pengguna untuk menambahkan, mengedit,
dan menghapus komentar. Ketika pengguna pertama kali masuk ke
halaman, mereka harus memasukkan nama. Komentar harus tersimpan
harus disimpan di localStorage agar tidak hilang saat halaman di refresh.

Deskripsi Projek dan Tugas


Gunakan HTML5, CSS3, dan Javascript untuk membuat website ini. Anda
diperbolehkan untuk menggunakan framework JavaScript React/Vue. Anda
bebas menggunakan library apapun. Penyimpanan data harus
menggunakan localStorage. Anda bebas mendesain website, asalkan
mengikuti persyaratannya.
Website harus memenuhi persyaratan dibawah ini:
1. Desain Blog Statis
2. Submit Username
3. Form Komentar
4. Tampilan Komentar (Nama Pengguna, Konten)
5. Edit dan Hapus Komentar
6. Penyimpanan Data (localStorage)

Desain
Desain halaman blog yang mencakup:
1. Header statis dengan judul blog.
2. Area konten utama dengan blog statis.
3. Bagian komentar di bawah postingan blog.

Fungsionalitas
1. Tampilkan form isi username saat pertama masuk website.
Tunjukkan tombol “Masuk”. Pengguna tidak boleh masuk sebelum
mengisi nama. Apabila ada nama yang disimpan di localStorage,
maka gunakan data tersebut (pengguna tetap harus menekan
tombol “Masuk”).
2. Setelah tombol “Masuk” ditekan, nama akan disimpan, dan
pengguna akan diarahkan ke halaman blog.
3. Tampilkan header dengan judul blog dan sedikit konten blog tersebut.
4. Tampilkan bagian komentar dengan seluruh isi komentar yang
diambil dari localStorage.
5. Setiap komentar harus menampilkan nama pengguna dan isi
komentar.
6. Tampilkan opsi untuk edit dan hapus komentar.
7. Tampilkan form untuk mengirim komentar di bagian bawah blog.
Tersedia input untuk isi komentar dan tombol untuk mengirim
komentar.
8. Form otomatis menggunakan nama yang disimpan.
9. Pengguna tidak bisa mengirim komentar tanpa mengisi isi komentar.
10. Setelah komentar dikirim, komentar baru akan langsung
muncul di area komentar tanpa memuat ulang halaman.
11. Pengguna dapat mengedit komentar yang telah mereka kirim.
12. Sediakan tombol simpan saat sedang mengedit.
13. Pastikan komentar tersebut adalah milik mereka sebelum diedit.
14. Setelah pengguna menekan tombol simpan, data akan disimpan,
dan komentar akan langsung ditampilkan sesuai dengan data.
15. Pengguna dapat menghapus komentar yang telah mereka kirim.
16. Setelah tombol hapus diklik, komentar akan langsung hilang, dan data
dihapus.
17. Pastikan komentar tersebut adalah milik pengguna sebelum dihapus.
18. Gunakan (localStorage) untuk memastikan komentar tersimpan
setelah halaman di muat ulang (reload).

Contoh

Anda mungkin juga menyukai