X

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.


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.

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


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.


Monday, April 8, 2019

Cara Merubah Angka Kedalam Bentuk Mata Uang di PHP


Language :
Hai sobat sekalian kali ini kita akan belajar bagaimana caranya membuat sebuah angka atau bilangan menjadi bentuk mata uang. Kita misalkan memiliki sebuah angka integer "200000" yang tidak memiliki titik sebagai pemisah untuk menandakan ribuan, ratusan, bahkan jutaan.

Berikut adalah kode untuk mengubah bilangan ke nominal mata uang.



function ubahnominal($angka){
$hasil = number_format($angka,0,',','.');
return $hasil;
}

Untuk menggunakannnya anda tinggal memanggil klassnya dengan cara :

$nominal = 200000;
$newNominal = ubahnominal($nominal);
echo $newNominal;
// hasil tampilan 200.000
Hi, friends, this time we will learn how to make a number or number into a currency. We suppose that it has an integer number "200000" which has no point as a divider to signify thousands, hundreds, even millions.



function ubahnominal($angka){
$hasil = number_format($angka,0,',','.');
return $hasil;
}

To use it, you can simply call the class by:

$nominal = 200000;
$newNominal = ubahnominal($nominal);
echo $newNominal;
// 200.000 display results

Sunday, April 7, 2019

Cara Merubah, Membuat, dan Menampilkan Halaman dengan Codeigniter


Setelah kita melakukan pemasangan pada postingan sebelumnya Cara Pemasangan Codeigniter untuk Pemulan, mari kita mulai bekerja dengan Codeigniter. Agar anda semakin paham saya akan menggambarkan sebenarnya bagaimana alur Codeigniter untuk menampilkan sebuah halaman.



Pada gambar di atas kita bisa lihat controller adalah bagian yang akan berfungsi untuk mengatur view apa yang akan di tampilkan. Misalnya jika anda ingin menampilkan halaman 'home.html' maka anda perlu mengaturnya di file Controller.

Untuk mengatur controller apa yang pertama kali dijalankan ketika web di muat anda bisa mengaturnya di "application/config/routes.php" silahkan cari $route['default_controller'] = 'welcome';. Silahkan rubah yang berwarna merah dengan Class anda sendiri.

Itu adalah format awal ketika anda memasang Codeigniter dimana web akan otomatis memuat class 'Welcome' yang ada di folder 'application/controllers/Welcome.php' dimana dalam file ini berisi perintah seperti ini :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {
public function index()
{
$this->load->view('welcome_message');
}
}

Pada kondisi di atas memerintahkan untuk menampilkan view pada folder 'application/views/welcome.php'. Sebagai contoh disini saya akan menampilkan class Home dengan view home.php sebagai class yang default akan dimuat web ketika pertama kali dibuka maka langkahnya akan seperti berikut.

1. Buat foder baru dengan nama BelajarCodeigniter

Pertama buat dulu projet baru di folder Htdoccs XAMP dengan nama BelajarCodeigniter kemudian pindahkan folder root Codeigniter kedalamnya. Silahkan baca : Cara Pemasangan Codeigniter untuk Pemulan.

2. Merubah Default Controller

Silahkan buka "application/config/routes.php" dan cari $route['default_controller'] = 'welcome'; Rubah yang berwarna merah dengan home.

3. Buat class Home di Controllers

Buka folder "application/controllers/" dan buat file baru dengan nama Home.php, Silahkan isi dengan kode seperti berikut :




<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends CI_Controller {
public function index()
{
$this->load->view('home');
}
}

Dua hal utama yang harus diperhatikan dalam pembuatan class adalah :

  • class Home extends CI_Controller
  • . Bertanda merah harus sama dengan nama filenya.
  • $this->load->view('home');. Ini adalah perintah untuk menampilkan view home pada folder "application/views/home.php".

4. Buat View

Buka folder "application/views/" dan silahkan buat file "home.php". Isi file sesuai keinginan anda misalnya disini kita isi :

<!DOCTYPE html>
<html>
<head>
<title>Belajar Codeigniter</title>
</head>
<body>
Saya sedang belajar Codeigniter di <a href="http://codingrakitan.blogspot.com/">codingrakitan.blogspot.com</a>
</body>
</html>

Setelah ketiga langkah di atas selesai saatnya anda melihat tampilan web melalui browser web anda dengan menuliskan alamat localhost/BelajarCodeigniter. Jika sukses maka anda akan mendapatkan tampilan seperti berikut :


Thursday, April 4, 2019

Cara Pemasangan Codeigniter untuk Pemulan


Hai sobat sekalian kali ini saya akan berbagi seputar framework PHP yang sudah tidak asing lagi. Codeigniter adalah framework PHP yang akan kita bahas dalam postingan ini. Penjelasan tentang Codeigniter telah saya bahas dalam postingan sebelumnya Mengenal Apa itu Codeigniter (CI) beserta Sejarahnya.

Untuk anda para pemula yang baru memulai dari awal belajar menggunakan Codeigniter ada beberapa langkah yang harus anda lakukan di antaranya yaitu :

  • Melakukan penginstalan XAMP yaitu sebuah aplikasi yang akan menjadi server. Klik disini untuk download
  • Download Codeigniter disini.
Tentunya anda sudah tahu bukan cara penginstalan XAMP jadi tidak perlu saya terangkan lagi. Jika di perangkat anda sudah ada XAMPP selanjutnya silahkan download file Codeigniter melalui link yang saya sematkan di atas. File hasil downloatan nantinya akan berupa extensi ".zip". Silahkan extract file tersebut ke dalam directory XAMP yaitu "C:\xampp\htdocs", itu adalah direktori default dari XAMP. Silahkan sesuaikan direktori dengan penyimpanan anda.

Bila anda telah selesai mengextract Codeigniter ke dalam folder XAMP anda selanjutnya silahkan ganti nama foldernya sesuai keinginan anda misalnya "BelajarCodeigniter".



Kurang lebih anda akan mendapatkan tampak folder seperti di atas. Selanjutnya mari kita test untuk menjalankan melalui browser. Sebelumnya silahkan aktifkan Apache dan Mysql pada aplikasi XAMP anda.

Silahkan buka browser anda bisa Mozilla Firefox, Chrome , atau Opera.

Pada address bar silahkan ketikkan "localhost/BelajarCodeigniter", jika sukses maka anda akan mendapatkan tampilan seperti pada gambara di bawah.



Itu pertanda pemasangan Codeigniter telah berhasil dan siap untuk digunakan. Untuk langkah selanjutnya silahkan anda ikuti : Cara Merubah, Membuat, dan Menampilkan Halaman dengan Codeigniter.