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

Membuat Efek Hide dan Show dengan JQuery

Assalamualaikum Wr. Wb

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

Oke, pada kesempatan kali ini kita akan belajar tentang JQuery. Kita akan membuat objek dari tag HTML bisa menghilang dan muncul kembali.

Kita akan membuat beberapa tag HTML yang dibutuhkan, yaitu div, tombol submit dan sentuhan sedikit css.

Jadi, ceritanya, kita akan membuat tag

ini akan dibuat dengan bentuk kotak berwarna merah lalu hilang atau muncul lagi saat kita tekan tombol submit. Oke…langsung aja kita mulai.

1. Tulis script html awal.

<!DOCTYPE html>
<html>
<head>
	<title>Efek Hilang</title>
</head>
<body>

</body>
</html> 

Continue reading

Belajar Web Design : Membuat Scrollspy menggunakan Bootstrap 4

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 Scrollspy menggunakan Bootstrap 4. Sebelum mulai, apa sih itu Scrollspy???

Jadi Scrollspy itu biasanya digunakan untuk memperbarui tautan secara otomatis dalam daftar navigasi berdasarkan posisi scroll pada suatu halaman.

Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan benar:

1. Harus digunakan pada komponen Navbar Bootstrap atau List group.

2. Scrollspy membutuhkan position: relative; pada elemen HTML yang biasanya dijadikan target, biasanya tag .

3. Tag “a” diperlukan dan harus menunjuk ke elemen dengan id=”” itu.
Ketika berhasil diterapkan, Navbar atau List group akan berubah, memindahkan kelas .active dari satu item menu ke item menu lainnya berdasarkan target yang terkait. Continue reading

Membuat Halaman Profil sederhana dengan HTML5

Haloo Sobat Webhozz, kali ini kita akan mempelajari bagaimana cara membuat biografi di dalam html.
begini caranya.



<!DOCTYPE html>
<html>
<head><!--Tag head ini gunanya untuk penamaan tab pada browser.-->
	<title>BIOGRAPHY</title>
</head>
<body><!-- Tag body ini gunanya untuk mengisikan semua konten yang ada di dalam web-->
	<h1 align="center">BIOGRAPHY</h1><!--Judul Halaman Web-->
	<hr align="center" width="100%" color="#3a3634" size="2"><!--Untuk Membuat Garis-->
	<center><!--Tag untuk ke tengah gambarnya-->
		<img src="gambar.png" width="300" height="300" alt="image in here"><!--tag img src itu sesuaikan nama file di dalam folder dan file gambar harus di dalam folder yang sama dengan file web kita-->
	</center>
	<h1 align="center" size="36"> BINGO </h1>
<p align="center"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). <a href="http://www.bingo.com/" target="_blank">Read More </a> <br><!--ini untuk link ke halaman selanjutnya --> </p>

<p align="left"><!-- Ini untuk penulisan list -->
	Hobbies:
	<ul>
		<li>Traveling</li>
		<li>Playing</li>
	</ul>
	<hr align="center" width="100%" color="#3a3634" size="2">
<p align="center"> Copyright 2018 </p>
</body>
</html>

Berikut hasilnya

Gimana? mudah kan sobat Webhozz, dan kamu juga bisa mengubah sesuai keinginanmu.
Sekian dulu, pembelajaran dari saya. semoga bermanfaat untuk kalian. selamat mencoba.

Kursus Android Studio & Java di Jakarta Bandung Surabaya

kursus android studio

kursus android studio jakarta bandung surabaya

Kursus Android Studio – Bagi kamu yang ingin belajar membuat Aplikasi Android dengan software Android Studio & bahasa pemrograman Java, kamu bisa mendaftarkan diri kamu di WebHozz. di Kursus ini kamu akan belajar bagaimana membuat aplikasi Android menggunakan Android Studio dan bahasa Pemrograman Java, atau bisa disebut Android Native Programming.  Continue reading

Belajar teknik AJAX dengan jQuery


Dikutip dari Wikipedia, Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability. Ajax merupakan kombinasi dari: 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

Insert Multiple Data dengan MySQLi dan PHP PDO

Untuk menjalankan Multiple SQL Statement, kita harus menggunakan query mysqli_multi_query().

Berikut ini beberapa contoh insert 3 baris data ke table “myguests”

Contoh dengan MySQLi Object-oriented

<?php $servername = "localhost"; $username = "username"; $password = "password"; $dbname = "myDB"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
} 

$sql = "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('John', 'Doe', 'john@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Mary', 'Moe', 'mary@example.com');";
$sql .= "INSERT INTO MyGuests (firstname, lastname, email)
VALUES ('Julie', 'Dooley', 'julie@example.com')";

if ($conn->multi_query($sql) === TRUE) {
    echo "New records created successfully";
} else {
    echo "Error: " . $sql . "
" . $conn->error;
}

$conn->close();
?>

Continue reading