Membuat Hello World Menggunakan VUE JS

Assalamualaikum Wr. Wb.

Man teman, kali ini kita akan belajar Vue JS. Salah satu framework dari Javascript.

Vue JS merupakan framework yang digunakan untuk membangun antarmuka pengguna. Yang mana Vue JS ini lebih ringan, mudah dipelajari, dan cepat kinerjanya.

Selain itu, Vue JS memiliki dokumentasi yang mudah diikuti dan source codenya yang mudah untuk dibaca. Dan untuk dokumentasinya, man teman bisa kunjungi (https://vuejs.org/v2/guide/).

Continue reading

Tutorial Membuat Tombol Click Atau Click Button Menggunakan Onclick Listener Pada Android Studio Java

Halo sahabat webhozz, bagaimana kabar kalian ? semoga saja tetap semangat untuk terus belajar ya :D.

Ya pada tutorial kali ini kita akan membahas mengenai bagaimana caranya membuat sebuah tombol yang dapat di click menggunakan onclick listener pada button di aplikasi android. Nah Dalam pembahasan kali ini kita akan menggunakan android studio dan menggunakan bahasa java dalam proses pengerjaannya.. yuk langsung aja!

Continue reading

Membuat Tabel Motif Zebra Dengan CSS

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini kita akan belajar tentang table zebra. Kenapa disebut Zebra???

Hal ini dikarenakan warna backround tiap baris pada tabel memiliki corak warna selang seling. Maka dari itu disebut dengan Tabel Zebra.

Oke, langsung aja ya kita mulai. Continue reading

Membuat Full Page Background Website dengan HTML dan CSS

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin. To the point aja, ya…

Alhamdulillah kali ini kita akan belajar membuat background website full satu halaman. Jadi, di halaman website yang kita buat akan penuh dengan gambar di latar belakangnya.

Oke, langsung aja kita mulai ya…

1. Buat file HTML baru, dan siapkan satu buah gambar. Sangat disarankan gambarnya dengan format landscape. Karena mengikuti format web browsernya. Continue reading

Membuat Menu Navigasi Vertikal Sederhana

Assalamualaikum Wr. Wb.

Sahabat Webhozz dimanapun berada, kali ini kita akan bahas sedikit mengenai dasar dalam CSS. Disini kita akan membuat menu navigasi sederhana. Sebuah web tentunya pasti punya menu navigasi, yang memiliki kesan akan konten apa saja yang dimuat dalam sebuah web. Biasanya masing-masing konten tersebut bisa memberikan pesan informasi juga kepada pengunjung web, hingga mudah untuk dimengerti oleh pengunjung web.

Pada kesempatan kali ini, kita akan membuat menu navigasi vertikal. Yang mana navigasi ini berisi menu pilihan yang berada di samping dalam sebuah halaman website. Oke, langsung aja kita persiapan untuk memulai. Continue reading

Memasukkan video youtube dalam html

 

 

Assalamualaikum. Wr. Wb.

Pada kesempatan kali ini, Webhozz akan berbagi ilmu lagi lewat postingan. Sebelumnya tentunya kita pernah melihat blog atau website yang memiliki video youtube di postingan atau bahkan di sisi blognya.

Siapa sih yang gak tau youtube? Sebuah media sosial via internet dimana semua orang bisa mengunggah video sesuka hati. Baik video tutorial, promosi, pendidikan, dan lain lain bahkan untuk menjadi seorang artis juga bisa dari Youtube. Jadi tidak heran, jika banyak yang menggunakan youtube untuk upload video.

Biasanya penggunaan video tersebut, sering digunakan untuk self branding sebagai pertegasan dari artikel-artikel dalam sebuah web. Continue reading

Membuat Foto Gallery pada Website dengan FancyBox

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Pada kesempatan kali ini, kita akan belajar Fancybox, salah satu librari dari JQuery.

Tapi kali ini kita akan coba versi terbaru dari fancybox. Mungkin dulunya kita bisa pelajari di http://fancybox.net/, dan sekarang versi terbarunya bisa kita kunjungi disini https://fancyapps.com/fancybox/3/.

Kali ini yang membedakan fitur dari fancybox yang terbaru ini adalah menyajikan berbagai jenis media baik itu foto maupun gambar, responsive, dapat disentuh alias discroll atau perbesar saat di hp smarthphone atau tablet, jadi dapat disesuaikan.

Oke langsung aja kita praktekkan. Continue reading

Belajar jQuery Focus dan Blur

Halo Sobat Webhozz, Kali ini kita akan mempelajari Efek Jquery Focus & Blur. Berikut langkahnya.

Pertama kita membuat koneksi html ke jquery, seperti ini

<!DOCTYPE html>
<html>
<head>
<title>Latihan jquery</title>
<script src="jquery-3.3.1.min.js"></script>

Lalu langkah kedua kita kasih perintah jquery berubah warna di form kita, seperti ini.

<script>
$(document).ready(function(){
    $("input").focus(function(){
        $(this).css("background-color", "#cccccc");
    });
    <!--$("input") itu berhubungan dengan input yang ada di body untuk merubah warna form dan focus dan blur perintah mewarnai formnya.-->
    $("input").blur(function(){
        $(this).css("background-color", "#ffffff");
    });
});
</script>
</head>

Continue reading

Belajar JSON menyimpan data ke LocalStorage

Ketika melakukan proses penyimpanan data, format data yang sering dipakai adalah teks. JSON memungkinkan kita untuk menyimpan objek JavaScript sebagai teks.
Berikut contohnya

myObj = {"name":"John", "age":31, "city":"New York"};
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

//Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

Anda dapat mengecek localstorage di browser Chrome, dengan menjalankan Inspect, lalu pilih Application. Mudah bukan ? Silahkan dicoba 😀