UI/UX Specialist in Industry 4.0 for Manufacturing Industry: 4. HTML Javascript

4. HTML Javascript - Browser Debugging.html

Bagaimana Cara Menuliskan Javascript Pada HTML?

Kita dapat menggunakan 4 cara

Menulis Javascript di Dalam Tag <script>

Tag <script> dapat kita letakkan di dalam tag <head> atau <body>

Disarankan dalam penulisan javascript di akhir tag <body> karena dapat meningkatkan kecepatan display.

Jika di dalam tag <head> konten akan ditampilkan setelah script.

Menulis Javascript Pada File Eksternal

Kali ini kita akan menggunakan dua file yang berekstensi .html dan .js

Bagaimana jika file eksternal kita berbeda folder?

Kita hanya perlu memasukkan alamat file, seperti

Menulis Javascript Pada Atribut

Kita akan menulis kode javascript di dalam atribut html

Setelah kita klik, akan muncul alert tersebut

Menulis Javascript pada URL

Kita akan menulis javascript di dalam tag <a>

Apa itu Debugging?

Kita pasti pernah merasakan ketika kode kita ada yang error, agar kode kita dapat dijalankan kita harus menemukan masalah tersebut dan menyelesaikannya. Nah kegiatan tersebut dinamakan debugging, dimana kita mengidentifikasi dan menghapus bug atau error dari kode.

Bagaimana Cara Kerja Debugging?

1. Mentranskripsikan kesalahan dengan dokumentasi

2. Selanjutnya kita harus mengidentifikasi bug dengan cara mengumpulkan pesan error dan bug program

3. Setelah menemukan kesalahan, kita akan menemukan lokasi bug. Misalnya ada pada tombol perintah dsb

4. Kita harus melakukan analisis untuk menghilangkan bug tersebut, kita dapat menggunakan teknik atau analisis bottom-up, dari kode bug minimum hingga penyatuan kode di sekitarnya.

5. Sebelum memperbaikinya kita dapat menggunakan kerangka pengujian untuk membuat pengujian otomatis untuk lokalisasi bug. Jika kita menguji skrip dan tidak menemukan potensi masalah atau bug, kita bisa melanjutkan fase berikutnya.

6. Jika terdapat bug lebih dari satu, kita harus mengumpulkannya pada unit test yang ingin kerjakan. Kemudian kita lakukan uji coba untuk menghilangkan bug

7. Terakhir kita bisa memodifikasi dan validasi script

Tips Debugging

Pada materi selanjutnya kita akan belajar wordpress, oleh karena itu kita akan menggunakan tips ini

1. Mengaktifkan WP_Debug

Merupakan fitur mode debug dari WordPress, cara kerjanya sistem wajib menampilkan pesan yang berisi kesalahan pada WordPress dan wajib memberi peringatan jika terdapat kesalahan.

Untuk mengaktifkannya, kita harus mencari file wp-config.php

Setelah membuka file tersebut, waktunya kita mencari define (WP-DEBUG,False). Kemudian ubah nilainya menjadi True

Note: Jika kita menemukan bug dan memperbaikinya, kita WAJIB langsung mengubah nilainya menjadi false

2. Mengaktifkan WPDB Error Reporting

Dengan mengaktifkan WPDB Error Reporting kita dapat menampilkan bug SQL dalam query WordPress. Seperti ini cara mengaktifkannya

Pertama, kita ke file manager dn mencari file public_html/wp-includes/wp-db.php

Kemudian carilah class wpdb dan ubah nilai dari $show_errors menjadi true

Note: ketika website aktif, kita tidak boleh melakukan debugging karena pengunjung akan mendapat pesan error. Lebih baik kita menggunakan website dummy

Tugas

Pada pertemuan sebelumnya kalian telah membuat website yang menampilkan CV, sekarang kembangkan website tersebut menggunakan Javascript di dalam HTML ini.

Referensi

1. https://www.petanikode.com/javascript-dalam-html/

2. https://idmetafora.com/id/blog/read/768/Apa-Itu-Debugging-Mengapa-Perlu-Dilakukan-Pada-Sebuah-Aplikasi.html

3. https://www.niagahoster.co.id/blog/debugging-adalah/

Last modified: Monday, 7 August 2023, 10:13 AM