Skip to main content

Posts

Showing posts with the label IT Corner - Rabu

Color | HTML, CSS

Halo! IT Corner hari ini kita akan mempelajari tentang warna dalam HTML. Untuk hari ini, saya bertugas sebagai pemateri. Materi ini sebenarnya bukan sepenuhnya HTML, tapi lebih mengarah pada CSS. Warna yang bisa digunakan ada beberapa, yaitu warna yang sudah di tentukan (red, blue, salmon), RGB, HEX, HSL, RGBA, HSLA. Berikut penjelasan singkatnya RGB - Artinya Red, Green, Blue. Warna ini menggunakan merah, hijau, dan biru yang masing-masing bernilai dari 0-255. HEX - Kependekan dari warna heksadesimal. Warna ini menggunakan kode 6 digit alfanumerik. HSL - Artinya Hue, Saturation, Lightness. Warna ini menggunakan hue sebagai warna dasar dan menggunakan intensitas serta kecerahan. RGBA - Artinya Red, Green, Blue, Alpha. Sama dengan RGB, namun terdapat nilai alfa yaitu nilai transparansi. HSLA - Artinya Hue, Saturation, Lightness, Alpha. Sama dengan HSL, namun perbedaannya adalah nilai alfa yaitu nilai transparansi. Nah, dalam HTML ini ada berbagai objek yang bisa diberi warna, misalnya s...

Form Element | HTML

Halo! Corner hari ini, materinya adalah tentang form elements dalam HTML. Form elemen itu ada banyak, namun kita hanya akan membahas beberapa saja. Jadi beberapa elemen yang kita akan bahas dan penjelasannya secara singkat adalah berikut. Input - Elemen ini digunakan untuk mendapatkan data dari user. Label - Elemen ini biasanya digunakan bersama elemen input dan berfungsi untuk mempermudahkan user dalam mengklik input. Textarea - Elemen ini seperti elemen input, tapi perbedaannya yaitu elemen ini bisa memiliki banyak baris. Button - Elemen ini digunakan untuk menjalankan sesuatu dengan JavaScript ketika diklik. Select - Elemen ini digunakan untuk membuat drop-down list yang mengandung satu atau lebih nilai. Option - Elemen ini digunakan bersama elemen select dan juga mengandung nilai tersebut. Sampai sini dulu untuk materi form elemen. Jumpa lahi di blog selanjutnya!

Form Attribute | HTML

Halo! Seperti yang kalian tau, hari ini adalah waktunya IT Corner. Materi kali ini yaitu tentang atribut form dalam HTML. Seperti elemen lainnya, form juga memiliki atribut. Mari kita bahas satu per satu secara singkat. Action - Menentukan apa yang akan dilakukan oleh form ketika disubmit. Target - Menentukan di mana akan menampil respons setelah formnya disubmit. Method - Menentukan metode HTTP ketika mensubmit form. Terdapat dua metode yang biasa digunakan yaitu GET dan POST. Perbedaan utama yang bisa dilihat yaitu GET menambahkan parameter pada url, sedangkan POST mengirimkan data pada dalam HTTP request. Autocomplete - Menentukan apakah sebuah form bisa diautocomplete dengan input yang sebelumnya sudah dimasukkan. Novalidate - Membuat form untuk tidak mevalidasi sebelum mengirimkan form. Itu saja untuk materi form atribut. Sampai jumpa di blog selanjutnya!

Form Input | HTML

Halo guys! Hari ini saya sebagai pemateri mengajari tentang elemen input yang bisa digunakan dalam elemen form. Langsung saja kita membahas materinya. Jadi elemen input itu memiliki beberapa jenis berdasarkan typenya. Jenisnya itu ada banyak, namun saya akan membahas yang text, radio, checkbox, submit, dan button saja. Elemen input yang typenya text digunakan untuk mengisi data dalam bentuk teks. Jenis ini hanya ada satu baris untuk mengisi data, namun bisa overflow untuk mengakomodasi text yang panjang. Input yang typenya radio hanya membolehkan user untuk memilih satu jawaban dari beberapa opsi pilihan. Jadi, jenis ini sama dengan pilihan ganda. Seterusnya, elemen input yang typenya checkbox membolehkan user memilih lebih dari satu opsi dari beberapa opsi pilihan. Jenis ini sama dengan pilihan ganda kompleks. Selanjutnya input yang typenya submit biasa digunakan untuk mengirimkan data yang telah diisi ke server. Jenis ini seringkali ditemui dalam elemen form. Terakhir yang typenya bu...

Marquee | HTML

Halo! Kalian tau kan hari ini ada apa? Ya, seperti biasanya pada hari rabu ada IT Corner. Untuk corner hari ini, saya bertugas untuk membuat artikel. Hari ini, kami berlajar cara membuat teks bisa bergerak. Jadi, caranya yaitu dengan menggunakan <marquee>. Syntax dasarnya itu seperti ini: <marquee>Text</marquee> Selain itu, juga ada atribut-atribut yang bisa digunakan seperti direction , width , height , dan lain-lain. Atribut direction bisa membuat teks masuk dari kiri, kanan, atas, atau bawah. Atribut width dan height mengatur lebar dan tinggi batas marquee. Itu saja untuk materi marquee. Sampai jumpa di blog selanjutnya!

Hyperlink & Image | HTML

Halo! Seperti biasanya, hari ini adalah IT Corner, yaitu corner yang Rabu. Untuk hari ini, saya bertugas sebagai pematerinya. Jadi saya mengajari tentang cara membuat hyperlink menggunakan <a> atau anchor. Elemen ini bersama atribut href  memungkinkan untuk membuat hyperlink. Setelah itu, saya mengajari cara memasukkan gambar ke dalam website menggunakan <img> serta atribut dasarnya seperti width dan height . Itu saja untuk materi hyperlink dan image. Sampai jumpa di blog selanjutnya!

Pengenalan HTML

Halo! IT Corner hari Rabu ini adalah corner pertama untuk calon Gen 15 bagi yang memilih untuk corner hari Rabu. Jadi, mulai dari blog ini, saya dan semua Gen 14 bertugas untuk mengajari adik kelas. Nah, kita buat apa saja tadi? Sesuai judulnya, teman-teman saya dari Gen 14 dan beberapa dari Gen 13 mengenalkan program kepada adik-adik. Mereka mengenalkan tentang HTML seperti struktur-strukturnya dan lain-lain. Selain itu, mereka juga mengenalkan sedikit tentang CSS, JavaScript serta belajar sedikit tentang heading <h1> dan paragraf <p>. Oh iya, hari ini saya bertugas untuk mendokumentasi kegiatan IT Corner hari ini. Sampai sini dulu untuk pengenalan HTML. Sampai jumpa di blog selanjutnya!

Classes | JavaScript

Halo! IT Corner Rabu ini materinya adalah classes dalam JavaScript. Class itu adalah sebuah template atau blueprint untuk membuat objek. Class ini mendefinisikan struktur, data, dan sifat objek. Class menggunakan keyword 'class' untuk membuatnya. Di dalam class tersebut, terdapat keyword 'constructor' yang meninitialisasikan properti atau variabel class tersebut. Selain itu, juga ada method atau function di dalam class itu. Seterusnya, ada keyword 'new' untuk membuat instansi baru dari sebuah class. Salah satu contohnya adalah penulisan blogger saya. Kalau kalian perhatian cara penulisannya, pasti pembukaan dan penutupan hampir selalu sama. Nah, kita pakai ilustrasi ini dan menjadikannya sebuah class. Berikut contohnya: class Blogger {   constructor(isi) {     this.pembukaan = "Halo";     this.isi = isi;     this.penutup = "Selamat jumpa";   }   tulis() {     console.log(this.pembukaan);     console.log(this.isi);   ...

IT Corner | 4 Juni 2025

Halo! IT Corner minggu ini adalah lanjut melengkapi blogger lagi. Nah, dari kalimat pertama tadi sudah tahu kan? Intinya yang belum melengkapi blogger itu ya tugasnya melengkapi bloggernya. Kalau bloggernya sudah lengkap, tinggal santai saja. Tapi kali ini saya tidak hanya melengkapi blogger, tapi saya juga mendokumentasi kegiatan cornernya. Jadi, saya mengambil beberapa foto sebagai dokumentasi kegiatan corner. Sampai ini saja untuk blog hari ini. Jumpa lagi di blog selanjutnya!

IT Corner | 28 Mei 2025

Halo! IT Corner Rabu ini kita cuman ditugaskan untuk melengkapi blogger kita. Ya corner hari ini cuman itu saja. Nah, kebetulan blogger saya sudah cukup lengkap saat dicek sama yang lain. Jadi setelah itu tinggal santai saja. Sampai ini dulu untuk blog hari ini. Jumpa lagi di blog selanjutnya!

Keys & Values | JSON

Halo! IT Corner Rabu ini tentang keys dan values yang ada di JSON. Keys dan values ini intinya sama dengan objek JavaScript. Keys ini merujuk pada nama yang akan mengandung valuenya. Value tersebut itulah yang dimasukkan pada keys. Contoh minggu lalu dalam bentuk objek JavaScript: const obj = {   nama: "Jamal Sulaiman bin Omar Nabil",   umur: 20,   kota: "Surabaya" } Di sini, nama, umur, dan kota adalah keynya, sedangkan "Jamal Sulaiman bin Omar Nabil", 20, dan "Surabaya" adalah valuenya. Sampai ini saja untuk materi key dan value. Jumpa lagi di blog selanjutnya!

Pengenalan JSON

Halo! IT Corner Rabu untuk minggu ini, saya belajar tentang pengenalan JSON. Tidak perlu lama-lama, kita langsung saja ke materinya. Arti JSON yaitu JavaScript Object Notation. JSON ini bukan bahasa pemrograman, tapi suatu format file untuk menyimpan data. Walaupun namanya ada JavaScript, format ini cuman sintaksnya berasal dari sintaks objek dalam JavaScript. Format ini biasa digunakan untuk mengirim data antara komputer satu dengan komputer lain karena tidak tergantung pada satu bahasa. Di JavaScript, misal suatu situs web ingin mengirim informasi ke server. Di situ dapat menggunakan JSON. Contoh sederhananya seperti ini: const obj = {   nama: "Jamal Sulaiman bin Omar Nabil",   umur: 20,   kota: "Surabaya" } const stringify = JSON.stringify(obj); Untuk kebalikannya yaitu menerima data dari server ke situs web, misalnya data yang diterima bernama "data", contoh sederhananya seperti berikut: const parsed = JSON.parse(data); Sampai ini saja untuk pengenalan...

Array | JavaScript

Halo! Untuk IT Corner hari Rabu ini, materinya tentang array dalam JavaScript. Apa itu array? Array ini suatu variabel yang bisa menyimpan banyak nilai. Array ini digunakan bila ada banyak nilai yang ingin disimpan dalamnya, misalnya jenis-jenis mobil. Sekarang bagaimana membuat arraynya? Nah caranya dengan menggunakan "[]" atau dengan keyword Array(). Contohnya seperti ini: const myArray = []; atau const myArray = new Array(); Seterusnya cara mengakses dan merubah nilai dalam array yaitu dengan menggunakan indeksnya. Ingat, dalam pemrograman, indeks dimulai dari 0. Contoh sebuah array memiliki 5 nilai. Cara mengakses dan sekaligus merubahnya sebagai berikut: myArray[2]; Ini untuk mengaksesnya myArray[1] = 10; Ini untuk merubahnya Itu saja untuk materi array. Jumpa lagi di blog selanjutnya!

Input Attribute Email & Date | HTML

Halo! IT Corner hari ini saya belajar tentang input type email dan date di HTML. Di blog ini akan membahas tentang atribut type pada input, khususnya email dan date. Input tipe email digunakan untuk mengisi email. Tipe ini mempunyai peraturan yang membedakannya dari input tipe teks. Nah, bedanya yaitu nilai di dalam input harus ada simbol '@', dan dua huruf di depan dan belakangnya. Kalau tidak, formnya tidak akan bisa disubmit. Selanjutnya input tipe date. Input tipe ini dipakai untuk mengambil tanggal. Kalau di dalam inputnya sudah diisikan nilai, akan mengembalikan tanggal dalam bentuk yyyy-mm-dd. Sampai sini saja untuk materi input atribut email dan date. Sampai jumpa lagi di blog berikutnya!

Validasi Input | JavaScript

Halo! IT Corner Rabu saya belajar tentang cara melakukan validasi input di JavaScript. Kalian sudah tahu kan cara mengambil input, baik dari element input ataupun menggunakan prompt dalam JavaScript. Nah, input yang diterima itu kadang-kadang tidak sesuai dengan program yang telah dibuat. Contohnya input yang meminta password 8 karakter, tetapi yang diterima adalah password 6 karakter. Caranya supaya input tersebut tidak diterima supaya nanti programnya tidak error yaitu menggunakan validasi. Cara validasi yang dapat digunakan untuk yang ini dapat menggunakan metode length. Misalkan, jika ingin membuat kondisi di mana passwordnya minimal 8 karakter, jadi dapat menggunakan metode tadi dalam perintah if. Contohnya di bawah ini. let input = document.getElementById("t1").value;   if (input.length < 8) {     return; } Di situ akan mengambil nilai dari elemen input, kemudian akan dicek apakah panjang input kurang dari lapan. Jika iya, akan keluar dari function, dan jika tida...

Input | JavaScript

Halo! IT Corner hari ini saya belajar tentang input di JavaScript. Input di JavaScript sebenarnya ada dua cara yang saya ketahui, yaitu dengan menggunakan elemen <input> dari HTML atau menggunakan prompt() dari JavaScript. Elemen <input> ini cukup jelas ya, tinggal pilih jenisnya pakai atribut type  terus diberi id. Setelah itu nilainya dapat diambil dengan menggunakan document.getElementById().value . Kondisi yang digunakan untuk menjalankan itu bisa berupa tombol. Cara satu lagi adalah dengan menggunakan prompt(). Prompt ini akan mengeluarkan suatu notifikasi yang akan meminta pengguna untuk memasukkan input. Setelah memdapat input, informasi tersebut akan dimasukkan dalam variabel yang sudah di ditentukan. Itu saja untuk materi input. Sampai jumpa lagi di blog selanjutnya!

Alert | JavaScript

Halo! IT Corner hari ini saya belajar tentang alert di JavaScript. Alert ini bentuknya seperti notifikasi. Bila alert dipanggil, akan mengeluarkan sebuah kotak dengan teks dan tombol OK. Gunanya ini untuk memberi tau kepada pengguna. Alert ini bersifat blocking, yaitu memberhentikan program yang lain sampai pengguna menekan tombol OK. Itu saja untuk materi alert. Sampai jumpa lagi di blog selanjutnya!

Pengenalan JavaScript

Halo! IT Corner hari ini saya mulai memasuki JavaScript. Kebetulan IT Corner hari ini itu belajar di lab komputer, jadi pemrogramannya lebih mudah karena bisa pakai VSCode. Baiklah, kembali ke topik JavaScript. JavaScript ini suatu bahasa pemrograman untuk front-end atau client-side. JavaScript ini biasanya digunakan untuk mengatur bagaimana suatu website berfungsi dalam sisi klientnya. Bahasa JavaScript bisa ditulis langsung dalam file HTML-nya atau bisa ditulis dalam file dengan extensi ".js" dan menggabungnya. Salah satu contoh penggunaan JavaScript itu adalah mengganti background menjadi light mode atau dark mode. Selain itu, JavaScript bisa digunakan untuk membuat suatu website lebih interaktif. Itu saja untuk pengenalan JavaScript. Sampai jumpa lagi di blog selanjutnya! Project Source Code View Code Project Name: Background Changer Demo Language(s): HTML, CSS, JavaScript Source Code Copy Code Background Changer Change Backg...

Login & Registration Form | Project

Halo! Hari ini saya membuat project tentang form login dan registrasi. Sebenarnya ini sama saja dengan yang blog materi HTML Form itu, tapi yang ini lebih lengkap dengan tambahan form login. Versi yang baru ini lebih bagus dari versi yang lama dengan UI-nya yang lebih elegen serta fitur redirect untuk login di bagian kanan atas. Versi ini mengurangi tujuh jenis input menjadi tiga, yaitu hanya email, username, dan password. Untuk password-nya sendiri, akan dicek apakah password-nya minimal 8 karakter. Untuk bagian login-nya, terdapat redirect untuk registrasi di kanan atas juga serta di bawah tombol "Masuk". Di sini juga terdapat link jika pengguna lupa password-nya. Untuk inputnya sendiri hanya ada dua, yaitu yang atas untuk email atau username, dan yang bawah untuk password. Tidak lupa juga, UI kedua form ini saya mengambil inspirasi dari beberapa website seperti Roblox, Pixiv, Twitter (X), dan Github. Itu saja untuk blog ini tentang project login dan registration form. Samp...

Web Storage API | JavaScript

Halo! Materi untuk hari ini saya mempelajari tentang web storage API dalam HTML. Web storage itu suatu API yang menyimpan data atau informasi di browser client menggunakan JavaScript. Web storage ini ada dua jenis, yaitu local storage dan session storage. Local storage itu bisa menyimpan data di browser dan akan ada seterusnya, sedangkan session storage itu sama dengan local storage, tapi akan menghapuskan data ketika tab atau browser-nya di tutup. Di sini akan menjelaskan tentang local storage, untuk session storage ganti localStorage dengan sessionStorage. Baiklah, kita langsung saja ke JavaScript-nya. Di fungsi pertama ini, ada sebuah kode yang berfungsi untuk memasukkan data ke web storage. Fungsi ini pertama akan membuat variabel set dan key yang didapatkan dari input teks. Trim itu digunakan untuk membuang spasi di depan dan belakang. Kemudian akan dicek apa kedua variabel itu ada nilainya. Lalu, dimasukkan ke web storage dengan localStorage.setItem(). Kemudian, nilai input teksn...