X

Sunday, June 30, 2019

Membuat Tampilan Seperti WhatsApp Web dengan HTML dan CSS


WhatsApp merupakan salah satu aplikasi chat yang sngat populer di Indonesia. Selain bisa digunakan di Smartphone, WhatsApp juga dapat dinikmati via WEB. Alamat resminya adalah https://web.whatsapp.com/.

Pada postingan kali ini saya akan membagikan tutorial tentang cara membuat tampilan web seperti pada halaman WhatsApp Web. Disini saya hanya akan membuat tampilan saja, untuk web dengan aksinya akan saya ajarkan pada postingan selanjutnya. Hasilnya nanti akan tampak seperti gambar dibawah :


Langsung saja dua code yang harus anda perhatikan adalah "index.html" dan "css.css" yang ada pada folder "asset/css/css.css".

index.html



<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat QR Code</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="co">
<div class="content">
<div class="bc">
<div class="kiri">
<div class="title">Untuk menggunakan CodingRakitan di komputer Anda:</div>
<ol class="_1TxZR"><li class="_1Fl07">Buka CodingRakitan di telepon Anda</li><li class="_1Fl07"><span dir="ltr" class="selectable-text invisible-space copyable-text">Ketuk <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Menu <span class="_3PxOr"><svg height="24px" viewBox="0 0 24 24" width="24px"><rect fill="#f2f2f2" height="24" rx="3" width="24"></rect><path d="m12 15.5c.825 0 1.5.675 1.5 1.5s-.675 1.5-1.5 1.5-1.5-.675-1.5-1.5.675-1.5 1.5-1.5zm0-2c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5zm0-5c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5z" fill="#818b90"></path></svg></span></span></strong> atau <strong><span dir="ltr" class="selectable-text invisible-space copyable-text">Pengaturan <span class="_3PxOr"><svg width="24" height="24" viewBox="0 0 24 24"><rect fill="#F2F2F2" width="24" height="24" rx="3"></rect><path d="M9.34 8.694a4.164 4.164 0 0 0-1.606 3.289c0 1.338.63 2.528 1.61 3.292l-1.46 2.527a7.065 7.065 0 0 1-3.052-5.82c0-2.41 1.206-4.54 3.048-5.816l1.46 2.528zm6.713 2.859c-.217-2.079-1.992-3.739-4.148-3.739-.578 0-1.128.116-1.628.329L8.819 5.617a7.042 7.042 0 0 1 3.086-.704c3.76 0 6.834 2.958 7.059 6.64h-2.91zm-1.065.43a3.083 3.083 0 1 1-6.166 0 3.083 3.083 0 0 1 6.166 0zm-6.164 6.364l1.458-2.523a4.153 4.153 0 0 0 1.623.322 4.154 4.154 0 0 0 4.12-3.524h2.922a7.062 7.062 0 0 1-7.042 6.426c-1.105 0-2.15-.25-3.081-.7zm11.197-7.21a7.88 7.88 0 0 0-.404-1.824l.286-.12a.527.527 0 0 0-.403-.973l-.29.12a8.176 8.176 0 0 0-1.197-1.77l.231-.23a.526.526 0 1 0-.744-.744l-.234.234a8.17 8.17 0 0 0-1.775-1.18l.13-.31a.526.526 0 1 0-.972-.403l-.12.313a8.463 8.463 0 0 0-1.995-.405v-.35A.533.533 0 0 0 12 2.97a.533.533 0 0 0-.535.526v.338a8.02 8.02 0 0 0-2.173.416l-.13-.313a.526.526 0 0 0-.972.402l.129.311a8.171 8.171 0 0 0-1.775 1.18l-.235-.235a.526.526 0 0 0-.743.744l.23.231A8.175 8.175 0 0 0 4.6 8.34l-.29-.12a.526.526 0 0 0-.403.971l.285.122a7.882 7.882 0 0 0-.404 1.824h-.322a.533.533 0 0 0-.526.534c0 .29.235.535.526.535h.28c.02.831.166 1.624.418 2.378l-.257.1a.523.523 0 1 0 .402.968l.252-.105a8.17 8.17 0 0 0 1.191 1.797l-.187.187a.526.526 0 1 0 .744.743l.184-.183a8.173 8.173 0 0 0 1.792 1.208l-.096.231a.526.526 0 1 0 .972.403l.096-.23c.698.24 1.436.387 2.208.428v.243c0 .29.244.526.535.526.29 0 .534-.235.534-.526v-.253a8.012 8.012 0 0 0 2.03-.417l.09.229a.523.523 0 1 0 .967-.403l-.096-.231a8.172 8.172 0 0 0 1.792-1.208l.184.183a.526.526 0 1 0 .743-.744l-.187-.186a8.174 8.174 0 0 0 1.191-1.798l.252.104a.526.526 0 1 0 .403-.971l-.257-.095a8.074 8.074 0 0 0 .417-2.378h.281c.29 0 .526-.244.526-.535a.533.533 0 0 0-.526-.534h-.323z" fill="#818B90"></path></svg></span></span></strong> dan pilih <strong>CodingRakitan Web</strong></span></li><li class="_1Fl07">Arahkan telepon Anda ke layar ini untuk memindai kode tersebut</li></ol>
</div>
<div class="kanan">
<img src="asset/gambar_kode/qrkode.png">
</div>
</div>

</div>
</div>
<div class="back">
<div class="logo">
<div class="l">
<img src="asset/icon/logo.png">
</div>
<div class="j">
<a href="">CODINGRAKITAN.BLOGSPOT.COM</a>
</div>


</div>
</div>


</body>
</html>

Kode di atas berfungsi sebagai kerangka.

css.css

body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.content{
margin: auto;
width: 65%;
text-align: center;
background: white;
margin-top: 100px;
padding: 64px 60px 110px;
box-shadow: 0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
border-radius: 4px;
}.content img{
width: 100%;
/*box-shadow: 2px 1px 4px 1px;*/

}.back{
background: #bd1e1e;
width: 100%;
height: 222px;
}.co{
width: 100%;
position: absolute;
}.bc{
display: flex;
}
.kiri{
max-width: 556px;
/*float: left;*/
}.kanan{
max-width: 264px;
margin-left: 60px;
/*float: left;*/
}.title{
color: #55636b;
font-size: 28px;
font-weight: 300;
line-height: normal;
vertical-align: baseline;
text-align: left;
margin-bottom: 52px;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}._1TxZR{
text-align: left;
padding: 0 0 0 24px;
margin: 0;

list-style: none;
list-style-type: decimal;
font: inherit;
    font-size: inherit;
font-size: 100%;
vertical-align: baseline;
outline: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: #4b4b4b;
text-rendering: optimizeLegibility;
font-size: 18px;
line-height: 28px;

}li{
margin-top: 18px;
}.logo img{
width: 50px;
height: 50px;

}.logo{
width: 78%;
margin: auto;
padding-top: 25px;
}.logo a{
text-decoration: none;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
color: white;
font-size: 12px;
}.l{
float: left;
}.j{
float: left;
padding: 13px;
}
File ini berfungsi untuk mengatur tampilan kerangka yang telah dibuat, seperti warna, ukuran, font, dll.

Silahkan download project file disini.
Read More

Cara Membuat Output C++ Menggunakan Fungsi Cout


C++ merupakan salah satu bahasa pemrograman yang cocok bagi teman-teman yang baru meluncur dalam dunia pemrograman. Fungsi paling dasar yang harus teman-teman ketahui adalah fungsi Output atau menampilkan. Dalam C++ digunakan cout untuk menampilkan kata, kalimat, huruf, dll.

Cara penggunaan cout sendiri sangat sederhana teman-teman hanya tinggal menuliskan kode seperti berikut :

cout<<"Saya belajar bahasa pemrograman";

Pada kode diatas kata yang berada dalam tanda petik yaitu "Saya belajar bahasa pemrograman" akan ditampilkan ketika program di jalankan. Hasil dari kode di atas akan nampak seperti gambar di bawah ketika di jalankan menggunakan aplikasi Dev-C++.



Agar cout dalam C++ kita perlu memanggil file header c++ yaitu "iostream". Sehingga untuk menjalankan program di atas kode lengkapnya akan menjadi seperti ini :



        #include <iostream>

using namespace std;
main(){
cout<<"Saya belajar bahasa pemrograman";
}

Sekian postingan kali ini mengenai Cara Membuat Output C++ Menggunakan Fungsi Cout semoga bermanfaat.

Read More

Cara Membuat Tampilan Login Seperti Facebook Lite di Android Studio



Facebook merupakan salah satu sosial media paling banyak digunakan di Indonesia. Facebook kini memiliki aplikasi mobile yang diberi nama facebook lite, aplikasi ini dikhususkan untuk pengguna yang menginginkan performa cepat dengan ukuran ringan.

Pada postingan kali ini saya ingin membagikan desain tampilan login dari Facebook lite yang telah saya buat. Berikut bentuk tampilan yang telah saya buat :



Untuk membuat tampilan seperti di atas anda hanya perlu mengedit layout teman-teman dengan kode seperti berikut :



<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/biru"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Coding Rakitan"
                android:textColor="@android:color/white" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:text="Nomor Ponsel atau Email" />

            <EditText
                android:id="@+id/editText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:background="@android:drawable/editbox_background"
                android:ems="10"
                android:padding="10dp"
                android:inputType="textPersonName"
                android:text="" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:text="Kata Sandi" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:background="@android:drawable/editbox_background"
                android:ems="10"
                android:padding="10dp"
                android:inputType="textPassword" />

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/biru_button"
                android:textColor="@android:color/white"
                android:text="Masuk" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:textColor="@color/biru_button"
                android:text="Lupa kata sandi Anda ?" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/abu_abu"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:padding="10dp">

                <TextView
                    android:id="@+id/textView5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="atau" />

                <Button
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="25dp"
                    android:background="@color/hijau"
                    android:padding="10dp"
                    android:text="Buat Akun Baru"
                    android:textColor="@android:color/white" />

                <TextView
                    android:id="@+id/textView6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:paddingLeft="5dp"
                    android:text="Bahasa Indonesia" />

                <TextView
                    android:id="@+id/textView7"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:paddingLeft="5dp"
                    android:text="Bahasa Jawa"
                    android:textColor="@color/biru_button" />

                <TextView
                    android:id="@+id/textView8"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:paddingLeft="5dp"
                    android:text="English"
                    android:textColor="@color/biru_button" />

                <TextView
                    android:id="@+id/textView9"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:text="Bahasa Lainnya"
                    android:textColor="@color/biru_button" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:background="@color/biru"
                android:layout_gravity="bottom"
                android:orientation="horizontal">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="left"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/textView10"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Bantuan"
                        android:textColor="@android:color/white" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="right"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/textView11"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:gravity="right"
                        android:text="Keluar"
                        android:textColor="@android:color/white" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Sekian untuk postingan kali ini semoga bermanfaat.


Read More

Saturday, June 29, 2019

Membuat Aplikasi untuk Membuka USB Debug Menggunakan Android Studio


USB Debug diperlukan ketika developer atau pengembang ingin menjadikan HP smartphone sebagai media uji coba aplikasi yang sedang dibuat. Hanya dengan mengaktifkan fitur ini kemudian menyambungkan kabel USB ke pc atau laptop, teman-teman sudah bisa build aplikasi langsung kedalam smartphone teman-teman. Permasalahan yang biasa di hadapi adalah letak menu USB Debug ini yang tidak banyak diketahui. Untuk itu kali ini saya akan berbagi sebuah tutorial membuat sebuah aplikasi untuk membuka USB Debug menggunakan bantuan aplikasi Android Studio.

Langsung saja langkah pertama silahkan buka aplikasi Android Studio teman-teman dan buat project baru dengan nama "USB Debug". Berikut konfigurasi pada project baru yang saya buat :

  • Chose your project : Empty Activity
  • Name : USB Debug
  • Package Name : com.codingrakitan.usbdebug
  • Minimum API Level : API 17

Setelah project baru selesai dibuat sekarang saatnya teman-teman melakukan proses ngoding pada file "MainActivity.java" serta "activity_main.xml".

MainActivity.java



package com.codingrakitan.usbdebug;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button open;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        open = findViewById(R.id.open);
        open.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openUsbDebug();
            }
        });


    }

    @SuppressLint("WrongConstant")
    private void openUsbDebug() {
        Intent intent = new Intent();
        intent.setFlags(536870912);
        try {
            intent.setAction("com.android.settings.APPLICATION_DEVELOPMENT_SETTINGS");
            startActivity(intent);
        }catch (Exception e){
            try {
                intent.setAction("android.settings.APPLICATION_DEVELOPMENT_SETTINGS");
                startActivity(intent);
            }catch (Exception ex){
                try {
                    intent.setAction("Settings.ACTION_APPLICATION_SETTINGS");
                    startActivity(intent);
                }catch (Exception exx){
                    try {
                        intent.setAction("android.provider.settings.APPLICATION_DEVELOPMENT_SETTINGS");
                        startActivity(intent);
                    } catch (Exception i) {
                        Log.d("allfailed", "all failed to launch");
                    }
                }
            }
        }
        finish();
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/open"
        android:background="@color/colorPrimary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Open USB Debug"
        android:padding="20dp"
        android:textColor="@android:color/white"/>
</RelativeLayout>

Copi dan pastekan kode diatas didalam file project teman-teman. Setelah itu silahkan run menggunakan emulator dengan minimum api 17 atau android versi 4.2. Silahkan lihat hasilnya, selamat mencoba.


Read More

Friday, June 28, 2019

Cara Membuat Menu Seperti Facebook dengan CSS, Jquery, dan HTML


Hai teman-teman kali ini saya akan berbagi mengenai bagaimana cara membuat menu yang mirip dengan menu milik sosial media terkenal. Apalagi kalau bukan Facebook, saya akan membagikan project yang telah saya buat di akhir postingan. Hasil tampilan nantinya akan nampak seperti gambar berikut.



File utama yang harus anda perhatikan, ada pada file index.php dan css.css dalam folder "asset/css/". Untuk anda yang sudah terbiasa dengan dunia pemrograman web tentunya sudah paham dengan kode-kode yang akan saya bagikan. Bagi yag baru belajar silahkan dalami dulu tentang HTML dan juga CSS.

Index.php



<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/js.js"></script>
</head>
<body>
<div class="menu_atas">
<div class="kiri">
<div class="logo">
<img src="asset/icon/logo.png">
</div>
<div class="cari">
<div class="input">
<input type="text" name="cari" placeholder="Cari">
<div class="cr">
<img src="asset/icon/cari.png">
</div>
</div>
</div>
</div>
<div class="kanan">
<div class="menu">
<div class="m">
<div class="ic_prof">

</div>
<div class="nama">
<a href="#">Coding</a>
</div>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Beranda</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m">
<a href="#">Buat</a>
</div>
<div class="mn">
<div class="g">

</div>
</div>
<div class="m2">
<div class="ic">

</div>
</div>
<div class="m2">
<div class="ic2">

</div>
</div>
<div class="m2">
<div class="ic3">

</div>
</div>
<div class="m2">
<div class="ic4">

</div>
</div>
<div class="m2">
<div class="ic5" id="drop">

</div>
<div class="ii" style="display: none;">

</div>
<div class="menu_drop" style="display: none;">
<div class="menud">
<a>Grup</a>
</div>
<div class="menud">
<a>Halaman</a>
</div>
<div class="menud">
<a>Aktivitas</a>
</div>
<div class="menud">
<a>Pengaturan</a>
</div>
<div class="menud">
<a>Keluar</a>
</div>
</div>
</div>

</div>
</div>
</div>
<div class="content">

</div>
<script type="text/javascript">
$('#drop').click(function () {
var clas = $(this).attr('class');
if (clas=="ic5_putih") {
$(this).attr('class', 'ic5');
$('.menu_drop').attr('style','display: none;');
$('.ii').attr('style','display: none;');
}
if (clas=="ic5") {
$(this).attr('class', 'ic5_putih');
$('.menu_drop').attr('style','display: block;');
$('.ii').attr('style','display: block;');
}
})
</script>
</body>
</html>


Css.css

body{
margin: unset;
background: #dedede;
}
.menu_atas{
width: 100%;
height: 43px;
background: #ea4335;
border-bottom: 1px solid #7d2929;
}.kiri{
margin-left: 5%;
width: 50%;
height: 100%;
float: left;
}
.kanan{
width: 35%;
height: 100%;
float: left;
}.logo{
padding: 10px;
width: 50px;
float: left;
padding-right: 0px;
}.logo img{
width: 50%;
}.cari{
padding: 10px;
padding-left: 0px;
float: left;
width: 70%;
}.cari input{
width: 90%;
padding: 3px;
float: left;
font-size: 100%;
border:unset;

}.input{
background: white;
border-radius: 2px;
overflow: hidden;
display: flex;

}.cr{
float: left;
padding-top: 5px;
width: 9%;
text-align: center;
cursor: pointer;
}.cr img{
width: 15px;
}.cr:hover{
background: #ebedf0;
}.cr:active{
background: unset;
}.menu{
padding: 7px;
display: flex;
font-family: calibri;

}.menu a{
color: white;
text-decoration: none;
font-size: 12px;
font-weight: bold;
}.m{
padding: 5px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}.m2{
padding: 3px;
padding-right: 10px;
padding-left: 10px;
cursor: pointer;
}
.m:hover{
background: #7d2929;
border-radius: 4px;
}.mn{
padding: 5px;
padding-right: unset;
padding-left: unset;


}.g{
border-right:1px solid #ce3232;
height: 100%;
}.ic_prof{
width: 20px;
height: 20px;
background-image: url('../icon/a.jpg');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
border-radius: 100%;
float: left;

}.nama{
margin-left: 7px;
float: left;
}.ic{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -25px -319px;
}.ic2{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -75px -319px;
}
.ic3{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -50px -294px;
}
.ic4 {
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: 0 -344px;
}.ic5{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -101px -294px;
}.ic5_putih{
width: 24px;
height: 24px;
background-image: url('../icon/ic.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -76px -294px;
}
.menu_drop{
width: 150px;
background: white;
position: absolute;
box-shadow: 0px 0px 8px -2px;
border-radius: 2px;
top: 48px;
right: 192px;
border: 1px solid #b6b2b2;
overflow: hidden;
}.ii{
width: 16px;
height: 8px;
background-image: url('../icon/ic2.png');
background-repeat: no-repeat;
background-size: auto;
background-position: -401px -245px;
position: absolute;
top: 36px;
right: 215px;
}.menud{
padding: 5px;
padding-left: 30px;
}.menud a{
color: black;
font-family: roboto;
font-weight: 300;
font-size: 12px;
}.menud:hover{
background: red;
}.menud:hover a{
color: white;
}


Untuk folder dan atribut lengkap silahkan download file projectnya disini.

Read More

Cara Membuat Scroll Auto Load More Data dengan Menggunakan Php, dan Jquery


Halo teman-teman sekarang saya akan membagikan sebuah cara membuat auto load more ketika scroll halaman mencapai batas bawahnya. Untuk lebih mengetahui bagaimana Scroll Auto Load ini anda bisa melihat contohnya seperti di bawah ini.



Pada pembuatan tampilan seperti di atas kita hanya akan menggunakan data manual bukan dari database. Untuk membuat scroll auto load ini kita juga membutuhkan jquery, serta jquery inview yang dapat anda download melalui tautan di bawah.



Setelah selesai mendownload file di atas sekarang buatlah sebuah folder baru di localhost anda dan pastikan XAMP anda telah di aktifkan. Lanjut buat folder dengan nama disesuaikan dengan keinginan teman-teman saya sendiri memberi nama folder dengan "coba". Setelah itu buat direktori dengan susunan seperti berikut :



Untuk file-file tambahan nantinya akan saya sertakan pada link download project di bawah. Yang perlu teman-teman ketahui disini adalah file "index.php", dan "data.php". Isi dari kedua file tersebut seperti berikut :

Index.php



<!DOCTYPE html>
<html>
<head>
<title>WHM</title>
<link rel="stylesheet" type="text/css" href="asset/css.css">
<script type="text/javascript" src="asset/js/jq.js"></script>
<script type="text/javascript" src="asset/js/jq.inview.js"></script>
</head>
<body>
<div class="atas">
<div class="menu_atas">
            <div class="logo">
                <h3>Aplikasi Percobaan</h3>
            </div>
            <div class="search">
                <input type="text" name="cari" id="input" placeholder="Masukkan Kata Kunci">
            </div>
            <div class="menu">
                <h3>Kategori</h3>
            </div>
        </div>
</div>
    <div class="tengah">
   
    </div>
<div class="bawah" id="bawah">
        <div class="loader">
            <img src="asset/gambar/loading.gif" class="load" id="load" style="visibility: hidden;">
        </div>
</div>
<script type="text/javascript">
  $(document).ready(function(){
             $('#bawah').on('inview', function(event, isInView) {
              $('#load').attr('style', 'visibility:visible');
                 if (isInView) {                 
                   
                     $.ajax({
                         type: 'POST',
                         url: 'data.php',
                         data: { page: 3 },
                         success: function(data){
                             if(data != ''){
                                 $('.tengah').append(data);
                                 // $('#load').attr('style', 'visibility:hidden');
                             } else {
                                 $("#loader").hide();
                             }
                         }
                     });
                 }
             });
         });
</script>
</body>
</html>

Hal yang perlu anda garis bawahi atau pahamai terdapat pada code javascript. Pada kode tersebut di setel bahwa ketika "$("#bawah")" tampil atau inview maka data.php akan di muat kedalam div yang memiliki nama class "tengah" menggunakan bantuan ajax.

Data.php

<?php
for ($i=0; $i < 5 ; $i++) {
?>
    <div class="card">
        <div class="gambar">
            <img src="asset/gambar/1.png">
        </div>
        <div class="atribut">
            <div class="nama">
                <a>SAMSUNG Galaxy Tab S4 2018</a>
            </div>
            <div class="harga">
                <h2>Rp 30.000</h2>
            </div>
            <div class="deskripsi">

            </div>
        </div>

    </div>

<?php } ?>

Kode di atas kita menampilkan card view yang berjumlah 5, dengan menggunakan proses perulangan. Teman-teman bisa memodifikasi file ini untuk menampilkan data dari database.

Untuk file projectnya bisa teman-teman download disini


Read More

Thursday, June 27, 2019

Cara Membuat Swipe Refresh di Android Studio



Pernahkah sobat mendapati ada aplikasi yang ketika kita tarik layar kebawah maka akan muncul widget refresh seperti gambar di bawah ini. Jika sobat tertarik untuk membuat aplikasi dengan tambahan fitur tersebut teman-teman bisa mengikuti tutorial yang akan saya berikan.



Pertama tama silahkan buat sebuah project baru dengan nama "SwipeRefresh" atau anda ganti sesuai dengan keinginan anda. Detail lainnya seperti berikut :

  • Empty Activity
  • Language Java
  • Minimum API Level : API 17


Setelah selesai membuat prohect baru silahkan edit file "MainActivity.java" serta "activity_main.xml" seperti di bawah :

1. activity_main.xml

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Silahkan masukkan layout atau widget disini -->
   
</android.support.v4.widget.SwipeRefreshLayout>


Pada koment anda bisa memasukkan wdget ataupun layout sesuai keinginan anda.

2. MainActivity.java

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener {

    SwipeRefreshLayout swipeRefreshLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        swipeRefreshLayout = findViewById(R.id.swipe);

        swipeRefreshLayout.setOnRefreshListener(this);

        swipeRefreshLayout.post(new Runnable() {
            @Override
            public void run() {
                swipeRefreshLayout.setRefreshing(true);
                aksiRefresh();
            }
        });
    }

    @Override
    public void onRefresh() {
        swipeRefreshLayout.setRefreshing(true);
        aksiRefresh();
    }

    private void aksiRefresh() {
        <!-- isi dengan kode yang akan dijalnkan bila refresh berjalan -->
         swipeRefreshLayout.setRefreshing(false);
    }
}


Pada method aksiRefresh() silahkan anda masukkan kode anda yang akan dijalankan apabila refresh dilakukan. Jangan lupa di akhir aksi refresh harus ada "swipeRefreshLayout.setRefreshing(false);" sehingga ketika aksi selesai maka swipe refresh akan otomatis tersembunyi atau hilang di layar.


Read More