Skip to main content

Posts

Showing posts from December, 2024

Geolocation API | JavaScript

Halo! IT Corner hari ini saya belajar tentang geolocation API. API itu bukan "api" ya, tapi singkatan dari Application Programming Interface. API ini bisa menambahkan banyak fungsi dan kemudahan pada website, seperti mengintegrasi cuaca ataupun mendapatkan geolokasi. Lantas, bagaimana cara mengintegrasi API itu? Untuk project ini, saya menggunakan API geolocation. API ini nanti akan mendapatkan garis lintang dan garis bujur pengguna setelah mendapatkan perizinan. Untuk HTML-nya itu menggunakan iframe untuk menampilkan Google Maps. Selanjutnya ada tombol Get Location untuk mendapatkan lokasi yang akan ditampilkan pada iframe. Bawahnya itu ada area teks yang akan menampilkan hasilnya dan juga memasukkan koordinat sendiri. Akhirnya, tombol Find Coordinates akan mencari koordinat dan menampilkannya pada iframe setelah dua teks area terisi. Selanjutnya adalah bagian JavaScript-nya. Dalam fungsi getLocation(), kita melihat apakah sudah mendapat izin, jika sukses akan memanggil fung...

Forms | HTML

Halo! Ini saya belajar sesuatu lagi nih, yaitu forms. Kalian mesti berpikir, apa itu forma dan bagaimana bisa buat form registrasi dengannya? Caranya dengan menggunakan elemen <form>. Elemen ini bisa digunakan untuk membuat form sama seperti google forms. Hasil yang diperoleh dari form biasanya dikirimkan ke suatu server untuk diproses. Supaya kita dapat jawaban dari orang yang mengisinya, maka kita harus menggunakan elemen <input>. Input itu bisa dijadikan berbagai jenis input berdasarkan atribut type -nya. Beberapa atribut type untuk input beserta fungsinya adalah berikut: text - diisi dengan teks radio - pilih satu diantara beberapa checkbox - pilih satu atau lebih submit - tombol untuk submit form Seterusnya, ada juga elemen <label>. Elemen ini digunakan untuk memudahkan dalam memilih jawaban pada input radio, checkbox, dan lain-lain. Jika orangnya klik pada teks yang ada di dalam label, maka jawaban yang berkaitan dengan label akan dipilih. Elemen ini harus ada ...

SVG | HTML

Halo! IT Corner hari ini saya mempelajari tentang SVG dalam HTML. Apa itu SVG? Nah, SVG itu sebuah grafik yang scalable, artinya jika diperbesar atau diubah ukurannya tidak akan hilang kualitas gambarnya. SVG dibuat dengan menggunakan elemen <svg>. Elemen ini digunakan sebagai wadah untuk grafik-grafiknya. Setelah itu, diberi ukuran, misalnya 500px × 500px. Untuk grafiknya sendiri ada beberapa jenis sebagai berikut. Grafik yang pertama adalah lingkaran yang dibuat dengan elemen <circle>. Untuk atributnya ada cx , cy , r , fill , stroke , dan  stroke-width . Atribut cx dan cy adalah posisi koordinatnya. Atribut r adalah radiusnya. Atribut fill adalah warna dalamnya. Atribut stroke adalah warna bordernya, dan stroke-width adalah ketebalan bordernya. Grafik kedua adalah persegi panjang yang dibuat dengan elemen <rect>. Untuk atributnya ada  x ,  y ,  width , height ,  fill ,  stroke , dan  stroke-width . Atribut  x  dan...

Borders | CSS

Halo! IT hari ini saya mempelajari tentang CSS, lebih spesifiknya tentang borders. Mesti kalian berpikir nih, apa itu CSS? CSS atau Cascading Style Sheet itu digunakan bersama HTML untuk membuat websitenya lebih menarik. Border itu ada banyak jenisnya, berikut ini jenis-jenis border beserta pengertiannya: Dotted - Menentukan batas putus-putus pendek. Dashed - Menentukan batas putus-putus panjang. Solid - Menentukan batas solid. Double - Menentukan batas ganda. Groove - Menentukan batas beralur 3D. Efeknya tergantung pada nilai border-color. Ridge - Menentukan batas bergelombang 3D. Efeknya tergantung pada nilai border-color. Inset - Menentukan batas sisipan 3D. Efeknya tergantung pada nilai border-color. Outset - Menentukan batas awal 3D. Efeknya tergantung pada nilai border-color. None - Tidak menentukan batas. Hidden - Menentukan batas yang tersembunyi. Selain itu, juga bisa mencampur-campurkan berbagai jenis border untuk membuat border lebih unik. S...

Tables | HTML

Halo! Ini saya sudah belajar tentang sesuatu nih, namanya tables. Sebenarnya materi ini sudah lama sekali. Tapi selain itu, mesti penasaran, apa itu tables dan bagaimana bisa buat biodata yang seperti yang digambar dengannya? Caranya adalah dengan menggunakan elemen <table>. Table itu terdiri atas baris dan kolom, sama seperti excel. Terus, table ini bisa diisi dengan data, seperti teks atau gambar. Kan sudah membuat elemen <table> nih, terus bagaimana bisa buat seperti itu? Caranya dengan menambahkan baris dalam table dengan elemen <tr> yang berarti table row. Seterusnya, dalam baris itu bisa ditambahkan elemen <td> (table data) atau <th> (table header). Lantas, apa perbedaan elemen <td> dengan elemen <th>? Table data itu teksnya tidak ditebalkan dan alignment teksnya di kiri. Sedangkan table header itu teksnya ditebalkan dan alignment teksnya di tengah. Table header itu digunakan ketika ingin membuat judul atau header, contohnya "NAMA...