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 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

Membuat Splashscreen Aplikasi Android

Splash screen adalah tampilan pertama program yang muncul sementara sebelum masuk ke menu atau halaman utama sebuah aplikasi. Biasanya berupa gambar atau logo aplikasi tersebut.

Berikut ini adalah contoh kode membuat Splashscreen Aplikasi Android dengan Android Studio

 

Pada file xml Anda, tulislah kode berikut

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_splash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.webhozz.android.splash.Splash">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/splash" />

</RelativeLayout>


Continue reading

Upload File dengan PHP

Bagaiamana membuat fungsi Upload File dengan PHP ? Berikut contoh kodenya

Pertama buatlah sebuah file formupload.php

<form method='POST' enctype="multipart/form-data" action="prosesupload.php">

<input type="file" name="nama_file">
<button type="submit" > Upload </button>

</form>

Lalu buatlah file prosesupload.php

echo $_FILES['nama_file']['tmp_name']; 
echo "<br>";
echo $_FILES['nama_file']['name'];
echo "<br>";
echo $_FILES['nama_file']['type'];
echo "<br>";
echo $_FILES['nama_file']['size'];
echo "<br>";
echo $_FILES['nama_file']['error'];

$lokasi_file = $_FILES['nama_file']['tmp_name'];
$nama_file = $_FILES['nama_file']['name'];

 $nama_baru	= preg_replace("/\s+/","_",$nama_file);

$direktori	= "foto/$nama_baru";

move_uploaded_file($lokasi_file, $direktori);

Pada folder kerja anda, buatlah folder “foto” untuk menampung file yang akan diupload.

Semoga bermanfaat 🙂