Bagaimana memulai belajar Javascript?

Sebelum saya share tentang bagaimana memulai mempelajari javascript secara praktis, kita coba pahami dulu kenapa kita harus mempelajari bahasa pemrograman ini. JavaScript adalah salah satu bahasa pemrograman web yang paling kuat dan fleksibel. Apalagi bagi anda yang ingin berkarir sebagai web-developer, kemampuan yang baik dalam menggunakan bahasa ini mutlak diperlukan. Atau para mahasiswa yang mengambil tema web dalam skripsinya jangan sampai tidak paham dengan javascript, dosen pembimbing atau dosen penguji siap meberondong pertanyaan2 ke anda.

Perangkat komputer/laptop yang anda gunakan untuk menggunakan javascript tidak membutuhkan spesifikasi yang besar, kita hanya memerlukan web browser dan text editor yang sangat ringan digunakan seperti: Notepad++, Sublime atau Atom. Klopun anda memiliki spesifikasi laptop yang gahar/super bisa menggunakan PHPStorm atau Visual Studio Code.

PHPStorm ini adalah IDE dari Jetbrains yang berbayar dan anda bisa menggunakan trial 30 hari. Atau jika anda sebagai mahasiswa dosen, atau tenaga pendidik dan memiliki email resmi dari kampus, anda bisa mendaftarkan lisensi pendidikan gratis. Saya sudah menggunakan selama 3 tahun versi free educational licenses ini, dimana setiap tahun perlu mengisi form untuk extends masa aktif. Dengan satu aktivasi tersebut kita bisa mendapatkan free produk Jetbrains yang lain, seperti: Datagrip, WebStorm, AppCode, RubyMine, dll. Untuk detail free lisensinya anda bisa menuju ke link ini. 

Jetbrains Free Educational Licenses 

Ohh maaf, jadi pembahasan Jetbrains inih 😂😁

Untuk mempelajari javascript, paling tidak anda sudah paham dengan HTML dan CSS sebagai bahasa markup dan style untuk membangun sebuah website. Javascript sangat erat berkaitan dengan HTML dan CSS. Dimana javascript ini bertugas membuat tampilan website menjadi lebih interaktif dan dinamis.

Perlu diketahui bahwa jascript ini berbeda dengan Java, tidak ada kaitan dan hubungan antara bahasa pemrograman javascript dan Java. Java merupakan bahasa pemrograman berorientasi Objek yang di kembangkan oleh Sun dan saat ini sudah diambil alih oleh Oracle. Sedangkan javascript dikembangkan oleh Brendan Eich yang saat itu bekerja untuk Netscape dimana awalnya bernama Live Script. Kemungkinan untuk alasan marketing dan popularitas, Netscape mengubah namanya menjadi Javascript.

Konsep tentang algoritma pemrograman merupakan nilai plus untuk menguasai javascript. Meskipun anda belum pernah mempelajari algoritma pemrograman anda bisa mempelajarinya bersamaan dengan belajar javascript. Modal untuk bisa menguasai javascript adalah koneksi, konsisten dan komintmen. Yaa.. anda harus mempunyai koneksi internet yang oke dan komitmen untuk meluangkan waktu mempelajarinya. 

Berikut ini tahapan untuk memulai mempelajarinya:

1. Pelajari blog di malasngoding.com tentang javascript. Artikel ini berbahasa indonesia dan cukup lengkap tahap-tahap untuk dasar teori dan best-practise javascript. Terdapat 13 bagian dan kurang lebih diperlukan waktu sekitar 10 jam untuk menyelesaikannya. Berikut alamat webnya: https://www.malasngoding.com/belajar-javascript-pengertian-dan-pengenalan-javascript/


2. Ikuti e-course gratis di dicoding.com pada materi Web Fundamental. Disini selain mempelajari javascript, juga terdapat materi HTML dan CSS. Anda harus registrasi dulu untuk bisa bergabung di course ini. Dari pengalaman saya sebelumnya e-course dicoding ini terstruktur dalam menyusun materi dan memudahkan dalam memahami konsep pemrograman yang kita pelajari. Batas waktu menyelesaikan e-course ini adalah 30 hari, maka anda harus mengatur waktu sebaik mungkin dan konsisten menyelesaikannya. Langsung saja menuju link berikut: https://www.dicoding.com/academies/123

Menurut saya dari blog dan e-course diatas sangat efektif untuk membangun dasar skill pemrograman javascript. Selain mempelajari dari 2 materi tersebut bisa juga dicoba beberapa blog atau e-course berikut ini:

• W3Schools, https://www.w3schools.com/js/default.asp
• Learn JS, https://www.learn-js.org/
• Tutorialpoint, https://www.tutorialspoint.com/javascript/
• Petanikode, https://www.petanikode.com/tutorial/javascript/

Selamat belajar javacript yaa, semoga 1-2 bulan kedepan setelah membaca artikel ini anda bisa menguasai pemrograman javascript dan bisa bermanfaat untuk kehidupan anda atau orang-orang disekitar, hehee...

InshaAllah selanjutnya saya akan share artikel best-practise dalam mengembangkan web menggunakan javascript

Read More

Membangun REST API dengan Laravel dalam 5 menit

Beneran 5 menit bisa jadi? Serius bisa koq 😉 Hehe.. 

Saya mulai mengenal laravel setelah mendapatkan kerjaan dari salah satu vendor telekomunikasi terbesar di Indonesia untuk memaintenance sistem yang sudah ada sekitar 2 tahun yang lalu. Selain itu beberapa programmer web jaman now ga keren klo belum menggunakan laravel untuk mengembangkan web di PHP. 

Dan semester ini saya diberi amanah untuk mengajar matakuliah Hybrid Web Development, dimana mahasiswa nantinya akan membuat suatu aplikasi back-end menggunakan REST API dan front-end menggunakan javascript, dan di bagian back-end akan digunakan framework laravel untuk membangun REST API tersebut.

Laravel dengan fitur Migration dan Eloquent-nya memungkinkan kita dengan cepat membangun aplikasi berbasis web. Masalah waktu 5 menit ini sebenarnya banyak faktor yang mempengaruhi, mungkin bisa lebih cepat lagi atau malah jauh lebih lama. Saya sendiri merasakan kemudahan dan kecepatan dalam membangun aplikasi menggunakan laravel dibanding beberapa framework yang lain. Jadi 5 menit ini sebenarnya hanya kiasan saja 👌

Untuk laravel bisa didownload menggunakan composer, saat artikel ini ditulis versi laravel yang digunakan adalah 5.8.3.

Bagi yang belum tau composer, bisa menuju ke artikel ini untuk penjelasannya. Berikut perintah untuk membuat project baru laravel dengan composer. Tuliskan pada command atau terminal.

$ composer create-project laravel/laravel laravel-api --prefer-dist

Silahkan menunggu proses download file-file laravel, lama tidaknya tergantung koneksi internet anda ya.. Selanjutnya kita akan membuat file Model Mhs beserta migration-nya, silahkan dilanjutkan dengan menulis perintah ini di command atau terminal.

$ php artisan make:model Mhs -m

Pada perintah diatas, selain membuat model, kita gunakan tambahan parameter -m yang berfungsi untuk membuat file migration. Buka file migration pada direktori database/migrations/2019_04_02_22551_create_mhs_table.php, kemudian tambahkan code berikut ini pada method up():

Schema::create('mhs', function (Blueprint $table) {
 $table->bigIncrements('id');
 $table->string('nim');
 $table->string('nama');
 $table->string('email');
 $table->string('hp');
 $table->timestamps();
});

Pada tutorial ini akan digunakan 1 tabel mhs dengan field seperti pada code diatas, yaitu: id, nim, nama, email, hp. Fungsi timestamp() disini otomatis akan men-generate field created_at dan updated_at pada tabel. Selanjutnya buka file app/Mhs.php dan lengkapi code untuk model Mhs seperti dibawah ini:

class Mhs extends Model{
    protected $fillable = ['nim', 'nama', 'email', 'hp'];
}

Variabel $fillable yang digunakan diatas merupakan salah satu variabel spesial pada Eloquent di laravel yang burfungsi untuk mendaftarkan field/kolom pada tabel yang dapat digunakan untuk insert atau update data. Selain itu terdapat juga variabel $hidden, $visible, $appends, dll. Lebih detailnya bisa menuju ke artikel id-laravel.com berikut ini.

Setelah melengkapi kedua code diatas, selanjutnya jalankan perintah migrasi di command atau terminal sebagai berikut:
$ php artisan migrate

Seeding pada laravel adalah fitur untuk melakukan pengisian data pada tabel di database. Disini akan digunakan library Faker yang dapat melakukan insert ke tabel menggunakan data testing, jadi mempermudah programmer tentunya dalam melakukan pengembangan sistem.

Untuk men-generate code Seeder tersebut silahkan tuliskan perintah berikut ini di command atau terminal:

$ php artisan make:seeder MhsTableSeeder

Dari hasil execute perintah diatas akan ter-generate file di /database/seeds/MhsTableSeeder.php. Pada function run() tambahkan code berikut ini untuk melakukan insert data menggunakan Faker.

$faker = Faker::create();
 foreach(range(0,10) as $i){
  DB::table('mhs')->insert([
  'nim' => $faker->randomNumber(8),
  'nama' => $faker->name,
  'email' => $faker->email,
  'hp' => $faker->phoneNumber
 ]);
}

Untuk menjalankan proses insert data testing ke dalam tabel gunakan perintah dibawah ini pada command atau terminal

$ php artisan db:seed --class=MhsTableSeeder

Dan cek menggunakan db manager untuk memastikan bahwa data-data tersebut telah ter-create

10 data telah ditambahkan melalui seeder

Tahap selanjutnya adalah membuat file controller untuk API dan memetakan end-point dengan menggunakan route di laravel. Pertama jalankan perintah untuk membuat file controller di command atau terminal.
$ php artisan make:controller MhsController

Berikutnya buka file routes/api.php dan tambahkan code dibawah ini untuk memetakan end-pont yang akan digunakan.

Route::get('mhs', 'MhsController@index');
Route::get('mhs/{id}', 'MhsController@show');
Route::post('mhs', 'MhsController@store');
Route::put('mhs/{id}', 'MhsController@update');
Route::delete('mhs/{id}', 'MhsController@delete');

Dan terakhir, buka file app/Http/Controllers/MhsController.php. Sesuaikan dengan code berikut ini:

use Illuminate\Http\Request;
use App\Mhs;

class MhsController extends Controller
{
    public function index(){
        return Mhs::all();
    }
 
    public function show($id){
        return Mhs::find($id);
    }

    public function store(Request $request){
        return Mhs::create($request->all());
    }

    public function update(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->update($request->all());

        return $article;
    }

    public function delete(Request $request, $id){
        $mhs = Mhs::findOrFail($id);
        $mhs->delete();

        return 204;
    }
}

Tahap ini telah berhasil dibuat 5 buah end-point. InshaAllah pada artikel berikutnya akan saya bahas pengujian tiap-tiap end-point menggunakan tools postman.

Selamat mencoba, Semoga bermanfaat..

Read More

Yuk berkenalan dengan Nasi berserat

Sejak 2 tahun terakhir ini saya sudah mengikuti channel telegram dan instagram Jurus Sehat Rasulullah, sudah sering kopdar juga sih dengan pemilik akunnya dok Zaidul Akbar, diskusi masalah bisnis 😋😉.

Nah.. sering juga saya share info dari akun tersebut ke istri yg mana seprofesi dengan dok Zaidul, ternyata si doi sepakat juga dengan beliau.. hehe

Kali ini pembahasan di https://t.me/JurusSehatRasulullah tentang nasi. Nasi memang selalu menjadi trending topik dalam pembahasan karbohidrat, kita di Indonesia belum lengkap klo makan tanpa nasi pastinya. Ternyata menurut dok Zee, nasi putih saat ini memang sudah tidak lagi mengandung serat dan mineral penting lainnya. Oleh karena itu ketika makan nasi putih saja maka otomatis gula darah jelas akan naek karena tinggiya gula di nasi putih. 

Disuruh stop makan nasi putih..? Berat deh kayaknya 😏

Beliau memberi tips sederhana agar nasi putih kita tetep ada seratnya bahkan tinggi serat. Salah satunya adalah dengan menambahkan produk topingan serat buat nasi putih. Tampilannya setelah dimasak kira-kira seperti gambar dibawah ini..

Sarapan saya pagi ini

Nama produk tersebut adalah Kongbap, teman-teman bisa mencari di supermarket atau toko-toko online. Ternyataa.. setelah ditambahkan topping tersebut, nasinya jadi enaaaak banget, dan saya cocok (ga tau juga selera teman2 yg lain). 

Cara masaknya juga gampang koq, tinggal campur aja beras dengan 1 sachet Kongbap dan masak seperti biasa. Menurut panduan di bungkusnya 1 sachet bisa digunakan untuk 2 cup nasi putih (2 liter nasi mungkin ya). Klo saya, sekali masak nasi 2 liter ditambahkan 1 sachet, gitu ajaa.  

Ini penampakan 1 sachet Kongbap

Sekitar 4-6 bulan terakhir ini saya dan keluarga sering konsumsi nasi + kongbap, ga setiap hari juga siih.. paling ga 2/3 kali seminggu. Semoga istri saya konsisten pas belanja bulanan beli kongbap sekalian..

Selamat mencoba yaaa 😉

Read More

Kembali ke Pebble watch

Pebble adalah smartwatch yang mulai muncul sekitar April 2012 dan support untuk OS Android dan iOS. Pada saat itu, Pebble merupakan satu-satunya smartwatch yang ada, belum ada saingan dari Samsung Gear, Garmin atau iWatch. Pebble Classic adalah smartwatch seri pertama yang diluncurkan oleh Pebble Techology Corporation dan pada bulan Mei 2012 berhasil memperoleh keutungan US$10,3 juta.

Saat itu harga Pebble Classic sekitar $99 dan pada periode promo bisa diorder dengan harga $70-an. Akhir tahun 2013 saya sukses mendapatkan pebble dari searching di Olx dan COD-an di TVRI Jogja dengan harga klo ga salah 800 ribu sekian.

Alasan memiliki Pebble ketika itu adalah: (1)Ga pernah punya jam tangan, (2)Smartwatch yang mendukung notifikasi di Android, (3)Terdapat berbagai macam apps dan watchface yang ada di Pebble Store/Play (Ga tau namanya), (4)Menyediakan Pebble SDK dimana kita dapat mendevelop app atau watcface (Belum kesampaian 😅)

Ternyata seri Pebble Classic ini terdapat kelemahannya, setelah menggunakan sekitar 2 tahun muncul maslaah yaitu layar pada Pebble sering blur/pecah. Setelah mencoba googling, banyak juga yang mengalami masalah ini, istilahnya "pebble screen tearing". Akhirnya saya coba untuk email ke support Pebble dan Alhamdulillah saya akan mendapatkan 1 set Pebble sebagai pengantinya. 💪

Inilah tampilan screen tearing..

Dan sekitar bulan Juli 2015 saya mendapatkan paketnya yang dikirim melalui DHL dan harus menebus sekitar Rp150,000 di Kantorpos. Hmm... seharusnya penerima ga dikenankan biaya lagi, karena ini bukan pembelian barang baru, tapi return dari perusahaan Pebble. Tapi yaa sudahlah.. susah menjelaskan ke pihak yang bersangkutan dan tidak perlu berdebat, banyak-banyak berdoa saja, InshaAllah akan lebih banyak rejeki dari berbagai arah yang tak terduga. 😁😇

Sekitar satu tahun terakhir masalah screen tearing muncul lagi, terakhir kali saya gunakan adalah bulan November 2017 saat trip ke Japan, tapi setelah itu sudah tidak tertolong lagi karena semakin parah. Berhubung perusahaan Pebble sudah  tutup sejak tahun 2016 dan di-informasikan tidak lagi ada supportnya (FYI: Pebble dibeli perusahaan Fitbit dan harga smartwatch-nya mahal-mahal 😑) maka saya pasrahkan saja untuk menyimpan rapat-rapat di kotaknya kembali.

Tetapi 2 hari kemarin koq tiba-tiba di youtube muncul recommended video dengan judul "[GUIDE] Pebble Screen Tearing Fix", penasaran khaan.. dilanjut menyimak dan melihat video-video lainnya. Selanjutnya coba degh buka kembali kotak Pebble dan setelah 1/2 jam bongkar-bongkar berhasil juga fixing Pebble.

Setelah Pebble bisa digunakan kembali rencana meminang Fitbit dibatalkan dulu, karena dari sisi kegunaan smartwatch ini sudah mencukupi. Dan untuk setup kembali ternyata harus install aplikasi rebble sebagai gateway untuk menghubungkan ke aplikasi resmi Pebble. Selanjutnya penggunaan seperti biasa, pilih-pilih watchface, pilih-pilih aplikasi dan nikmati jaman-jaman kejayaan pebble dahulu kala.. ✌😉

Kembali menemani hari-hari yang menyenangkan 😉

Read More

Alasan kenapa update ke Android 9

Setelah dipastikan rilis Android versi 9 atau P dengan codename "Pie" pada tanggal 6 Agustus 2018 kemarin, akhirnya di penghujung tahun 2018 ini kebagian juga update di Mi A1. Seperti pada update-update Android OS sebelumnya, saya tidak begitu tertarik dengan fitur-fitur baru yang ditawarkan. Selama masih oke untuk produktifitas kerjaan dan hoby, fitur-fitur tersebut bagi saya sebagai tambahan saja.

Pada Xiaomi Mi A1, ukuran file update Android P sekitar 1074 MB atau 1GB lebih sedikit. Setelah berhasil update ke Android P, saya coba explore fitur-fitur terbarunya, seperti adaptive battery, adaptive display dan digital wellbeing.

Tetapi pada update Android versi ini, saya tertarik untuk mempelajari aplikasi Digital Wellbeing dari Google. Aplikasi ini dapat meng-identifikasi pengguna ketika melakukan aktivitas di smartphone. Bahkan bisa detail sampai ke setiap aplikasi yang ada. Misal dalam sehari kita menggunakan Whatsapp selama berapa jam, berapa kali membukanya dan berapa jumlah notifikasinya.

Aplikasi Digital Wellbeing

Screen time dan timer limit setiap aplikasi

Bahkan kita bisa mengatur limit dari setiap aplikasi dalam sehari, contohnya Whatsapp bisa kita set sehari maksimal 30 menit, maka setelah lewat dari 30 menit kita tidak dapat membuka aplikasi Whatsapp dan icon menjadi disable. Bagi yang peduli dengan produktivitas aplikasi ini sangat berguna, dengan mempelajari history statistik penggunaan smartphone bisa menjadikan motivasi untuk meningkatkan produktivitas.

Saya sendiri memanfaatkan aplikasi ini untuk mengurangi penggunaan Whatsapp dan meningkatkan penggunaan beHafizh pada beberapa minggu ini, semoga bisa menjadi lebih baik dalam meningkatkan produktifitas dan kebermanfaat banyak orang.

Selamat mencoba untuk mencicipi Pie dari Android 9

Read More

Kapan waktu efektif "coding"?

“Coding” istilah populernya.. dimana saat kita fokus mengerjakan modul, mencari solusi algoritma atau tracking error di suatu program biasanya membutuhkan waktu yang tidak sebentar. Kebanyakan programmer malam hari adalah waktu yang nyaman untuk melakukan aktivitas coding, ditemani dengan secangkir kopi panas dan camilan..  PERFECT! pastinya

Selama bertahun-tahun saya juga menikmati aktivitas coding di malam hari sampai dengan pagi. Setelah saya sadari ternyata saya banyak melewatkan hal-hal istimewa di saat pagi, yaitu tidak bisa shalat subuh berjamaah di masjid, karena sering ketiduran pas adzan, melakukan aktivitas seharian tidak fokus, karena masih kurang jatah tidurnya.

Akhirnya saya berusaha untuk merubah pola aktivitas tersebut supaya bisa mendapatkan keistimewaan dan keberlimpahan rejeki di pagi hari. Sekitar jam 8 malam, saya coba untuk mulai istirahat tidur, dan pasang alarm jam 2 atau 3 pagi. Saat bangun cobalah berwudhu dan lanjut shalat tahajud, inshaAllah hilang semua rasa kantuknya, selanjutnya mulailah aktivitas coding + kopi panas.

Alhamdulillah kebiasaan tersebut sudah terpola sejak 2-3 tahun yang lalu.

BangunAwal itu mengundang keberkahan dan keberlimpahan. "Ya Allah, berkahilah umatku di waktu pagi,” inilah doa Nabi Muhammad.

Di kesempatan lain, beliau bersabda, “Berpagi-pagilah dalam mencari rezeki, karena sesungguhnya berpagi-pagi itu membawa keberkahan dan mengantarkan pada kemenangan.”

Itulah salah satu rahasia sukses orang-orang beriman dalam melakukan penaklukan-penaklukan. Mereka melakukannya di waktu pagi. Bahkan hijrah Sang Nabi pun dilakukan di waktu pagi.

Silahkan bagi teman-teman yang ingin merubah pola waktu coding-nya bisa seperti yang saya lakukan, atau masih nyaman dengan menghabiskan waktu malam, silahkan sajaa.. 

Semoga bermanfaat..

Read More

Membuat ListView dan CustomListView di Android

Penggunaan komponen ListView sangat sering kita jumpai pada aplikasi Android, seperti pada aplikasi yang menampilkan kontak phonebook, menampilkan data report atau yang lainnya. ListView berguna menampilkan data dalam bentuk vertical/horizontal yang bisa kita scroll keatas dan kebawah.

ListView dapat berjalan menggunakan Adapter yang berfungsi mem-binding data yang akan kita tampilkan. Data-data tersebut bisa dari variabel array, file json yang di dapat dari akses ke API atau data-data dari database local seperti SQLite.

Berikut contoh membuat ListView  sederhana menggunakan ArrayAdapter untuk menampilkan data dari variabel array.

1. ListView Sederhana

Pertama siapkan komponen ListView pada file layout xml yang akan anda gunakan untuk menampilkan data

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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:padding="8dp"
    tools:context=".MyListActivity">

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="8dp" />

</android.support.constraint.ConstraintLayout>

Selanjutnya buatlah variabel ListView dan variabel String array untuk menyiapkan data-data yang akan ditampilkan melalui adapter.

private ListView lvItem;
private String[] players = new String[]{
   "Cristiano Ronaldo", "Paulo Dybala", "Mario Mandžukić",
      "Miralem Pjanić", "Sami Khedira", "Emre Can", "Claudio Marchisio",
      "Medhi Benatia", "Giorgio Chiellini", "Leonardo Bonuci",
      "Wojciech Szczęsny"
};

Dan yang terakhir, pada methode onCreate tambahkan Adapter dan  panggil dari lvItem menggunakan method setAdapter( ), berikut kodenya:

lvItem = (ListView) findViewById(R.id.list_view);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(MyListActivity.this,
     android.R.layout.simple_list_item_1, android.R.id.text1, players);

lvItem.setAdapter(adapter);

2. Custom ListView

Custom ListView adalah suatu list dari beberapa item dengan tampilan content yang bisa kita sesuaikan dan mendukung multi-content. Misalkan kita ingin menampilkan data dengan beberapa tipe content, kita bisa menggunakan Custom ListView ini.

Pada tutorial ini kita akan coba menambahkan tampilan data position dan number dari data players yang sudah kita buat pada listView sebelumnya. Anda bisa buat Activity baru lagi dan tambahkan variabel array lagi seperti dibawah ini:

private ListView lvCustom;
private String[] players = new String[]{
    "Cristiano Ronaldo", "Paulo Dybala", "Mario Mandžukić",
    "Miralem Pjanić", "Sami Khedira", "Emre Can", "Claudio Marchisio",
    "Medhi Benatia", "Giorgio Chiellini", "Leonardo Bonuci",
    "Wojciech Szczęsny"
};

private String[] pos = new String[]{
    "Forward", "Forward", "Forward",
    "Midfilder", "Midfilder", "Midfilder", "Midfilder",
    "Defender", "Defender", "Defender",
    "Goal Keeper"
};

private int[] num = {7,10,17,5,6,23,8,4,3,19,1};

Untuk Adapter Custom ini, kita perlu siapkan file xml untuk membuat tampilan view yang kita inginkan. Selain itu kita juga perlu membuat Class di java yang merupakan extends/turunan dari BaseAdapter. Untuk layout xml utama masih sama seperti pada point 1 ListView Sederhana, kita harus menambahkan komponen ListView pada layout tersebut. Berikut contoh kode xml yang anda simpan pada file /res/layout/list_players.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="fill_vertical"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/ic_data"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tv_player"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:textColor="#000000"
                android:text="Paulo Dybala"
                android:textSize="16sp" />

            <TextView
                android:id="@+id/tv_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="16dp"
                android:text="10"
                android:textAlignment="viewEnd"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="18sp" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/tv_pos"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="5dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:text="Forward"
                android:textColor="@color/colorPrimaryDark" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Dan berikut ini adalah kode dari Custom Adapter yang kita siapkan untuk mengatur data dari variabel-variabel array sebeumnya. Kita simpan dengan nama JuveAdapter.java

public class JuveAdapter extends BaseAdapter {

    Context context;
    String[] players;
    String[] positions;
    int[] number;
    LayoutInflater inflater;

    public JuveAdapter(Context context, String[] players, String[] positions,
                       int[] number) {
        this.context = context;
        this.players = players;
        this.positions = positions;
        this.number = number;
        this.inflater = (LayoutInflater.from(context));
    }

    @Override
    public int getCount() {
        return players.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        view = inflater.inflate(R.layout.list_players, null);
        TextView tvPlayers = (TextView) view.findViewById(R.id.tv_player);
        TextView tvPositions = (TextView) view.findViewById(R.id.tv_pos);
        TextView tvNumbers = (TextView) view.findViewById(R.id.tv_number);

        tvPlayers.setText(players[i]);
        tvPositions.setText(positions[i]);
        tvNumbers.setText(number[i]+"");

        return view;
    }
}

Dan terakhir kita perlu menambahkan kode berikut di method onCreate untuk men-set Custom Adapter yang telah kita buat pada slistview.

lvCustom = findViewById(R.id.list_view);
JuveAdapter adapter = new JuveAdapter(this, players, pos, num);
lvCustom.setAdapter(adapter);

Tampilan ListView dan Custom ListView sebagai berikut:


Jika ada pertanyaan dari kode tutorial kode diatas, silahkan tinggal pesan pada kolom komentar, Semoga bermanfaat

Read More

Deploy Aplikasi menggunakan PHPloy

Bagi pengembang aplikasi web saat ini, baik back-end, front-end ataupun fullstack, seharusnya sudah tidak menggunakan tools FTP Client untuk deploy aplikasi ke server. Sudah tidak lazim drap and drop file dari window satu ke window yang lainnya. Atau tidak perlu lagi menggunakan lagi cpanel file manager untuk upload file zip untuk membuat aplikasinya live di server.

Hehe.. ini menurut pendapat saya looh dan mungkin juga banyak yang setuju koq.. ✌😉

Pengertian deployment di web adalah proses memindahkan kode (terupdate) ke live server. Dan menurut Baki Goxhaj dalam blognya di wplancer.com, banyak developer paham tentang proses ini dan ternyata hanya sedikit orang saja yang melakukanya dengan cara yang professional.

Sudah ada beberapa tools untuk memudahkan proses deployment tersebut, seperti menggunakan Jenkins atau Capistrano. Sebelumnya saya juga menggunakan tools online seperti FTPloy dan Deploybot, tapi disini ada kelemahan yaitu hanya menyediakan 1 project saja untuk deployment, lebih dari itu maka silahkan menyesuaikan dengan tarif yang ada 😅

Untuk menggunakan PHPloy ini pastikan project anda sudah menggunakan Git sebagai code collaboration. Konsep kerja PHPloy ini adalah melakukan perubahan(upload/delete) file-file yang telah ter commit pada git ke server, sangat simple dan mudah digunakan. Proses deployment PHPloy menggunakan command pada terminal dengan perintah-perintah yang telah didefinisikan.

Untuk memulai menggunakan PHPloy anda bisa mengikuti langkah-langkah berikut ini:

1. Gunakan composer dengan menambah paket di file composer.json. Belum tau apa itu composer? silahkan pelajari artikel di link berikut ini.
   

   {
       "require": {
           "banago/phploy":"4.8.5"
       }
   }
   

2. Selanjutnya dari terminal jalankan perintah:
   

   composer update
   

3. Copykan file /vendor/banago/phploy/bin/phploy ke root project anda
4. Buat file baru dengan nama phploy.ini, yang berisi kode konfigurasi berikut
   

   [production]
   user = username
   pass = s0m3p455w0rd
   host = yourdomain.com
   path = /public_html/folder
   exclude[] = 'phploy'
   exclude[] = 'phploy.ini'
   exclude[] = 'composer.json'
   exclude[] = 'composer.lock'
   port = 21
   passive = true
   

5. Setelah itu cek apakah phploy dan konfigurasinya sudah sesuai dengan menjalankan perintah di terminal
   

   [unix/mac]
   ./phploy -v
   
   [windows]
   php phploy -v
   
   [akan menampilkan seperti dibawah ini]
   C:\Users\Arif Laksito\www>php phploy -v
   -------------------------------------------------
   |                     PHPloy                    |
   -------------------------------------------------
   PHPloy v4.8.5

6. Setelah melakukan perubahan kode-kode program, jalankan perintah git add dan git commit.
7. Untuk melihat file-file apa saja yang akan di deploy, gunakan perintah berikut di terminal
   

   ./phploy -l
   

8. Dan terakhir untuk proses deploy ketikan perintah phploy. Selanjutnya akan muncul proses deploy di terminal, silahkan menunggu proses tersebut.
   

   ./phploy
   

9. Jika dirasa ingin membatalkan proses deployment tersebut bisa dilakukan rollback dengan perintah:
   

   ./phploy –rollback
   

Menurut saya tools ini sangat simple dan mudah sekali dalam penggunaan atau konfigurasinya. Bahkan PHPloy ini bisa juga digunakan untuk deployment ke beberapa server sekaligus.

Read More

Membuat Splash Screen di Android

Pada beberapa aplikasi Android, terdapat splash screen yang akan tampil saat aplikasi pertama di jalankan. Fungsi dari splash screen tersebut bermacam-macam, ada yang digunakan untuk load data, untuk menjalankan file konfigurasi, atau untuk proses suatu algoritma tertentu.

Ada juga splash screen yang tidak ada fungsinya sama sekali, khusus digunakan untuk tampilan awal saja. Pada artikel ini akan saya bahas pembuatan splash screen yang digunakan untuk tampilan saja, tidak ada fungsi khusus di dalamnya. 

Setelah membuat project baru dari AndroidStudio, buat activity baru dengan nama SplashActivity. jadikan activity tersebut sebagai launcher dan tambahkan code untuk file manifests/AndroidManifest.xml sebagai berikut:

<activity android:name=".MainActivity"></activity>
<activity android:configchanges="orientation|keyboardHidden|screenSize" 
    android:name=".SplashActivity" 
    android:theme="@style/AppTheme.Fullscreen">
     <intent-filter>
          <action android:name="android.intent.action.MAIN">
          <category android:name="android.intent.category.LAUNCHER">
     </category></action></intent-filter>
</activity>

Pada code diatas masih muncul error di editor, karena tema yang digunakan SplashActivity tidak ditemukan, selanjutnya tambahkan code berikut di file /res/values/styles.xml:

<style name="AppTheme.Fullscreen">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
</style>

Untuk tampilan layout-nya, kita bisa sesuaikan file /res/layout/activity_splash.xml dengan code dibawah ini:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimaryDark"
    android:orientation="vertical"
    tools:context=".SplashActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content"
        android:contentDescription="Logo"
        app:srcCompat="@drawable/logo_movie" />
</RelativeLayout>

Dalam pembuatan logo contoh aplikasi ini saya gunakan web online https://logomakr.com/, dimana kita tinggal sesuaikan saja dengan icon dan font yang bisa kita butuhkan dan edit secara online. File logo dalam format png silahkan di-copy pada folder /res/drawable dan di panggil sesuai namanya seperti pada code diatas.

Terakhir, pada file SplashActivity tambahkan code berikut pada fungsi onCreate( ). Code tersebut berfungsi mengarahkan ke MainActivity setelah delay waktu 2 detik.

new Handler().postDelayed(new Runnable() {
    @Override
    public void run() {
        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}, 2000);

Dan tampilan akhirnya kurang lebih seperti pada gambar dibawah ini:


Silahkan untuk dicoba code diatas untuk membuat splash screen di Android, jika ada yang ingin ditanyakan bisa tinggalkan di kolom pesan yaa

Read More

Bagaimana menyimpan API KEY di Android?

Sebelumnya saya selalu menyimpan API Key dalam suatu class di android pada field tertentu. Ternyata hal ini sangat tidak dianjurkan dalam best practice pengembangan aplikasi Android. Kenapa? 

Karena saat kita menaruh code program kita di suatu repository, misal Github, maka orang lain akan bisa mengakses API Key milik kita, dimana jika ada orang yang menyalahgunakan akan berakibat kerugian dari kita sendiri.

Berikut ini caranya supaya API Key kita tetap aman meskipun code kita dishare melalui repository:

1. Setelah membuat project dan diintegrasikan dengan version control, misalnya git. Tambahkan file /gradle.properties pada gitignore dari project tersebut. Seperti pada baris ke-11 file .gitignore dibawah ini:

   *.iml
   .gradle
   /local.properties
   /.idea/libraries
   /.idea/modules.xml
   /.idea/workspace.xml
   .DS_Store
   /build
   /captures
   .externalNativeBuild
   /gradle.properties
   

2. Tambahkan baris kode API berikut pada file project:gradle.properties. Pada contoh berikut saya gunakan 2 API Key dari TheMovieDB dan OpenWeather:

   #API KEY
   TheMovieDBApi = 4b5017168cac6677269cxxxxxx
   TheOpenWeatherApi = 4de4dd041e499ca8axxxxxx
   

3. Selanjutnya buka file app: build.gradle, tambahkan code seperti pada baris ke-3 sampai dengan baris ke-6 dan code pada baris ke-17 sampai dengan baris ke-20 seperti dibawah ini:

   apply plugin: 'com.android.application'
   
   // Define Variable API Key
   def STRING = 'String'
   def THEMOVIEDB_API_KEY = '"' + TheMovieDBApi + '"' ?: '"Define your The Movie DB API Key!"'
   def OPENWEATHER_API_KEY = '"' + TheOpenWeatherApi + '"' ?: '"Define your The Openweather API Key!"'
   
   android {
       compileSdkVersion 28
       defaultConfig {
           applicationId "net.ariflaksito.katalogfilm"
           minSdkVersion 15
           targetSdkVersion 28
           versionCode 1
           versionName "1.0"
           testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
           each { type ->
               type.buildConfigField STRING, 'TheMovieDBApi', THEMOVIEDB_API_KEY
               type.buildConfigField STRING, 'TheOpenWeatherApi', OPENWEATHER_API_KEY
           }
       }
       buildTypes {
           release {
               minifyEnabled false
               proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
           }
       }
   }
   
   dependencies {
       implementation fileTree(dir: 'libs', include: ['*.jar'])
       implementation 'com.android.support:appcompat-v7:28.+'
       implementation 'com.android.support.constraint:constraint-layout:1.0.2'
       testImplementation 'junit:junit:4.12'
       androidTestImplementation 'com.android.support.test:runner:1.0.1'
       androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
   }
   

4. Setelah itu anda bisa memanggil API Key tersebut melalui class di Android.
   

   static String MOVIE_API = BuildConfig.TheMovieDBApi;
   static String WEATHER_API = BuildConfig.TheMovieDBApi;

Alhamdulillah mendapatkan ilmu ini dari masukan reviewer di submission pertama pada project kelas MADE di dicoding, yang belum tau dicoding bisa menuju ke artikel saya yang ini.

Semoga bermanfaat yaa.. 

Read More