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 😀

Belajar AngularJS menampilkan hasil input form

Angular adalah Framework JavaScript dengan konsep MVC. Angular menjadi salah satu Framework JavaScript yang populer saat ini. Disamping ada ReactJS & VueJS yang juga sedang trend. Angular didevelop oleh tim dari Google Developer. Berikut adalah contoh sederhana menggunakan Angular.


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>

</div>

</body>
</html>


Sangat mudah bukan ? Silahkan dicoba 🙂

Insert Select Update Delete Data pada CodeIgniter dengan Query Builder

Query Builder adalah class pada CodeIgniter untuk bekerja dengan Database. Dengan Query Builder, kita dapat melakukan perintah Insert, Select, Update & Delete dengan query yang minimal.

Berikut adalah beberapa contoh penggunaan Query Builder :

Select

$query = $this->db->get('mytable');  // Produces: SELECT * FROM mytable

$query = $this->db->get('mytable', 10, 20);

// Executes: SELECT * FROM mytable LIMIT 20, 10
// (in MySQL. Other databases have slightly different syntax)

$query = $this->db->get('mytable');
foreach ($query->result() as $row)
{
        echo $row->title;
}

Continue reading