CODING RAKITAN | INSPIRASI CODING TERUPDATE | android studio | laravel

Tuesday, January 19, 2021

Mengenal Sejarah JavaScript

Para programer berbasis web tentunya sangat ingin mengetehui lebih dalam tentang JavaScript. Hal ini tidak lepas dari fitur yang disediakan oleh JavaScript yang memudahkan dalam mengontrol, memanipulasi sebuah website. Selain itu bahasa pemrograman ini juga digunakan di hampir 90% web diseluruh dunia.

Sejarah Bahasa Pemrograman JavaScript

JavaScript merupakan salah satu bahasa pemrograman berbasis website yang dikembangkan oleh Netscape, sebuah perusahaan telekomunikasi yang juga mengembangkan browser Netscape Navigator. JavaScript sendiri mulai dibuat pada tahun 1995 yang mana ditangani oleh programer Netscape bernama Brendan Eich.

Pada awal kemunculannya bahasa pemrograman ini bernama LiveScript. Nama ini kemudian dirubah menjadi JavaScript dikarenakan pada saat itu Java yang dirilis oleh Sun Microsystem (sekarang Oracle)sedang menjadi sorotan. Bisa dikatakan bahwa tujuan penamaan JavaScript tidak lain untuk menarik perhatian para programan pada waktu itu, jadi JavaScript tidak ada kaitannya dengan Java.

JavaScript kemudian mengalami banyak lika-liku sebelum akhirnya kuat seperti sekarang. Dimulai ketika pada tahun 1996 dimana Microsoft merilis Internet Explorer 3.0. Ketika itu Microsoft ingin menggunakan JavaScript akan tetapi Netscape tidak memberikan izin. Hal ini berujung pada Microsoft yang mengembangkan bahasa script sendiri yang diberi nama JScript.

Pada tahun 1997 kemudian Organisasi Standardisasi International ECMA memecahkan masalah ketidakcocokan antara JavaScript dengan JScript hasilnya adalah ECMAScript. Ditahun yang sama persaingan antara Netscape Navigater dan Internet Explorer terus berlanjut dimana persaingan ini kemudian dikatakan sebagai "Perang Browser Pertama".

Faktor penentu kemenangan Internet Explorer adalah ketika Windows 98 dirilis kepublik, dimana Internet Explorer di pasang sebagai standar pada sistem operasi ini. Hal ini berdampak pada jumlah pengguna dan pangsa pasar yang meningkat.

Setelah kalah pada perang browser pertama, JavaScript kian terpuruk dikarenakan banyaknya keluhan dari komunitas engineering mengenai keamanan JavaScript. Masalah ini berujung pada banyaknya pengguna yang memilih mematikan fungsi JavaScript itu sendiri.

Belum sampai disitu saja, munculnya Flash yang menyelipkan Action Script berdasarkan ECMA. Hal ini membuat orang beranggapan Saya tidak membutuhkan JavaScript lagi.

JavaScript akhirnya menemui titik balik pada tahun 2005 ketika Google Maps diperkenalkan, yang mengadopsi teknologi JavaScript "A-Jax". Google membuka jalan bagi JavaScript untuk dihidupkan kembali. Ditandai dengan munculnya berbagai pustaka lain seperti "jQuery" atau "prototype.js". Lahirnya jQuery membuat penulisan yang awalnya panjang, menjadi lebih ringkas.

JavaScript semakin kuat dengan munculnya Node js pada tahun 2008. Bahasa pemrograman JavaScript yang awalnya hanya bisa berjalan sebagai Front End kini juga bisa di sisi server atau Back End.

Paling terbaru di era ini muncul pesaing baru dengan nama TypeScript, yang memiliki keunggulan type-safe (fitur yang memberitahu kesalahan saat mengonversi JavaScript ), dan mampu bekerja di browser manapun. Kelebihan ini membuat TypeScript banyak di gunakan programer dalam menulis program. Namun pada akhirnya node.js dan TypeScript akhirnya berjalan sebagai JavaScript.

Baca Juga :

Pengertian Node Js Beserta Kelebihannya
Belajar Fungsi Dasar Java Script
Contoh Program Menggunakan Javascript Sederhana
Cara Membuat Slide Dengan JavaScript Biasa Tanpa Jquery

Mengenal Sejarah Bahasa Pemrograman C++

C++ merupakan bahasa pemrograman tingkat menengah yang banyak dijadikan sebagai dasar pembelajaran dalam dunia pemrograman. Bahasa ini bisa dibilang mudah dipelajari sebab sudah menggunakan bahasa yang mirip dengan bahasa manusia dibandingkan dengan bahasa Assemble yang merupakan bahasa tingkat rendah.

Salah satu keunggulan dari bahasa ini adalah kecepatannya dalam melakukan kompilasi kedalam bahasa mesin, selain itu bahasa c++ banyak dijadikan sebagai acuan untuk bahasa-bahasa pemrograman baru.

Sejarah Awal Pembuatan Bahasa Pemrograman C++

Bahasa C++ dibuat oleh Bjarne Stroustrup yaitu seorang ilmuwan komputer dan profesor di bidang ilmu komputer di Texas A&M University. Profesor yang berasal dari Denmark ini dulunya tergabung dalam Computer Research Institute of Cambridge University dimana dia menghabiskan hari-harinya mengabdikan diri untuk meneliti perangkat lunak yang berjalan pada sistem terdistribusi.

Sistem terdistribusi merupakan sistem dimana banyak komputer yang terhubung satu sama lain melalui jaringan dan beroperasi sambil berbagi pekerjaan.

Bjarne Stroustrup pertama kali mengembangkan C++ pada tahun 1980, dimana bahasa ini dibuat atau diturunkan dari bahasa sebelumnya yaitu bahasa C. Sebelum Bjarne Stroustrup mulai membuat C++ awalnya ia dihadapkan pada suatu situasi dimana dia harus menulis simulasi berskala besar yang mereproduksi komunikasi yang kompleks antar komputer. Ia kemudian menulisnya dalam bahasa pemrograman Simula yaitu sebuah bahasa pemrograman yang dikatakan sebagai bahasa pemrograman berorientasi objek pertama.

Akhirnya Bjarne memutuskan untuk menghentikan penelitiannya dengan Simula. Hal ini dikarenakan ketika menggunakan simula membutuhkan waktu untuk menyusun program berskala besar dan operasi simula yang berat. Sebagai gantinya Bjarne memperkenalkan bahasa baru yaitu BCPL yaitu sebuah bahasa pemrograman yang berakar dari bahasa C. Namun dia masih belum puas dengan hasilnya.

Setelah lulus dari Universitas Cambridge, Bjarne kemudian memutuskan untuk membuat bahasa pemrograman sendiri. Dia kemudian berhasil mengembangkan alat yang mampu memberi bahas C kelas dari Simula (membuat bahasa C dengan Kelas). C++ kemudian menjadi nama dari bahasa C dengan Kelas ini setelah melakukan beberapa kali perbaikan. Dari namaya, menggambarkan bahwa bahas C++ selanghkah lebih maju dari bahasa C.

Sama halnya seperti bahasa-bahasa pemrograman baru, c++ hadir dengan menawarkan konsep yang tidak dimiliki bahasa pemrograman sebelumnya. Konsep baru yang di hadirkan c++ pada saat itu seperti class dengan sifat-sifatnya seperti inheritance dan overloading.

Pada tahun 1998, C++ diakui dan diterima secara internasional, ditandai dengan disertifikasinya oleh standar ISO. Bahasa ini kemudian menjadi dasar dari C# yaitu bahasa pemrograman yang dikembangkan oleh google pada tahun 2002.

Seiring dengan perkembangan dunia komputer, bahasa C++ kemudian banyak digunakan untuk membangun software server, middleware, dan OS. C++ telah menghasilkan banyak aplikasi populer yang biasa kita jumpai seperti Adobe System, Google Aplication, Mozilla Firefox, Thunderbird, MYSQL Server, Autodesk Maya, WINAMP Media Player, Blommberg RDBMS, Callas Software. Sedangkan untuk operasi system seperti Microsoft Operating System, Apple (OS X Operating System), dan Symbian Operating System. (Sumber : https://www.mycplus.com/ ).

Baca Juga :

Inilah Kelebihan dan Kekurangan C++
C++ | Macam-macam Bentuk Program Perulangan Pada C++
Apa Perbedaan Bahasa C dengan C++ ?
BELAJAR BAHASA PROGRAM C++, INI DASAR YANG HARUS ANDA TAHU

Menghilangkan Index.php pada url Codeigniter

Bagi anda pengguna baru Codeigniter mungkin risih dengan adanya embel-embel index.php pada url ketika hendak mengakses controller lain. Misalnya url yang di inginkan adalah http://localhost/webku/auth/login namun yang dapat di akses adalah http://localhost/webku/index.php/auth/login.

Untuk menghilangkan embel-embel index.php ini sangat mudah anda bisa menggunakan bantuan .htaccess, untuk caranya silahkan ikuti langkah-langkah di bawah :

Langkah pertama buka dan edit file config.php pada directory application/config/config.php kemudian cari "$config['index_page'] = 'index.php';" dan hilangkan index.php sehingga menjadi "$config['index_page'] = '';".

Langkah kedua buat file baru dengan nama .htaccess di directory utama project anda, kemudian isi file tersebut dengan kode dibawah :


RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

Langkah ketiga , silahkan tes dengan mengakses url yang awalnya terdapat embel-embel index.php, sekarang hapus index.php tersebut pada url. Jika berhasil maka website akan menampilkan sesuai dengan yang di inginkan.

CARA IMPORT DATA DARI EXCEL KE DATABASE MENGGUNAKAN CODEIGNITER

Menginput satu persatu data kedalam database merupakan hal yang melelahkan apalagi ketika data yang di input berjumlah ratusan atau bahkan ribuan. Untuk mengatasi hal ini bisa menggunakan file excel, dimana terlebih dahulu data di buat dalam bentuk excel kemudian di upload ke WEB yang nantinya akan otomatis di masukkan kedalam database.

Pada postingan kali ini menggunakan framework Codeigniter dan menggunakan library PhpSpreadsheet. Jadi sebelum memulai bergelut dengan pembuatan, silahkan download terlebih dahulu library PhpSpreadsheet dengan menggunakan bantuan composer. Ketikkan perintah dibawah untuk mendownlaod


composer require phpoffice/phpspreadsheet

Berikut adalah contoh penggunaan Import Data Dari Excel Ke Database Menggunakan Codeigniter, dimana pada contoh ini menggunakan struktur database seperti pada gamabar.


<?php
defined('BASEPATH') OR exit('No direct script access allowed');
require 'vendor/autoload.php';
 
use PhpOffice\PhpSpreadsheet\Spreadsheet;
use PhpOffice\PhpSpreadsheet\Reader\Csv;
use PhpOffice\PhpSpreadsheet\Reader\Xlsx;

class Contoller extends CI_Controller {
	
	public function aksi()
	{
		$file_mimes = array('application/octet-stream', 'application/vnd.ms-excel', 'application/x-csv', 'text/x-csv', 'text/csv', 'application/csv', 'application/excel', 'application/vnd.msexcel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');

			if(isset($_FILES['file']['name']) && in_array($_FILES['file']['type'], $file_mimes)) {
			 
			    $arr_file = explode('.', $_FILES['file']['name']);
			    $extension = end($arr_file);
			 
			    if('csv' == $extension) {
			        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Csv();
			    } else {
			        $reader = new \PhpOffice\PhpSpreadsheet\Reader\Xlsx();
			    }
			 
			    $spreadsheet = $reader->load($_FILES['file']['tmp_name']);
			     
			    $sheetData = $spreadsheet->getActiveSheet()->toArray();

			    for($i = 1;$i < count($sheetData);$i++)
			    {
			        $nama = $sheetData[$i]['0'];
				    $username = $sheetData[$i]['1'];
				    $password = $sheetData[$i]['2'];

				    $nra_fix = str_replace(' ', '', $nra);


				    $ar = array(							
							'nama' => $nama,
							'username' => $username,
							'password' => $password
				    	);
				   
				    $a = $this->Modelku->get('user', "username='$username'")->result_array();
				    if (count($a)==0) {				    	
				  		$this->Modelku->insert('user', $ar);
				    }
			    }
			  
			}
	}
}

Perlu diperhatikan kode di atas menggunakan sebuah model dengan nama "Modelku", jadi silahkan buat model dengan nama yang sama terlebih dahulu kemudian tambahkan fungsi berikut.


function insert($table, $data)
{
	$this->db->insert($table,$data);
	return $this->db->insert_id();
}
function get($tabel, $where)
{
	$this->db->select("*");
	$this->db->from($tabel);
	$this->db->where($where);
	return $this->db->get();

}

Membuat Background Tools Auto Show Ketika ScrollView di Scroll

Pada postingan kali akan membahas bagaimana caranya membuat tools ataupun menu atas transparant yang mana apabila di scroll akan kembali memberikan background yang sudah di tentukan sebelumnya. Kurang lebih aplikasi akan tampak seperti pada gambar dibawah.

Penggunaan menu seperti ini akan memberikan tampilan yang menarik pada aplikasi. Tampilan yang menarik akan membuat pengguna aplikasi menjadi betah menggunakan aplikasi.

Langsung saja untuk cara pembuatannya silahkan ikuti langkah di bawah ini.

Tambahkan Gambar dan Icon ke Drawable

Untuk melengkapi tampilan layout yang akan dibuat, silahkan tambahkan 3 gambar format jpg dan 3 gambar icon ke res -> drawable. Gambar jpg bebas seusai keinginan. Untuk iconnya bisa di ambil melalui vector asset, baca Cara Menggunakan Icon Vector Asset bawahan Android Studio. Nantinya drawabel akan terisi beberapa file seperti berikut.

color.xml

Buka file color.xml di folder res -> values -> colors.xml kemudian buat edit kode menjadi seperti berikut :

	
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="transparan">#6D000000</color>
    <color name="abu_abu">#D6D6D6</color>
    <color name="putih">#FFFFFF</color>
    <color name="biru_tua">#0770cc</color>
    <color name="hijau">#00a651</color>
    <color name="biru">#00BCD4</color>
</resources>

activity_main.xml

Salin dan paste kode dibawah ke 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">

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

        <ScrollView
            android:id="@+id/scrll_post"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

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

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

                    <ImageView
                        android:id="@+id/imageView34"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:adjustViewBounds="true"
                        android:foreground="@color/transparan"
                        android:scaleType="centerCrop"
                        app:srcCompat="@drawable/img" />
                </LinearLayout>

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_marginTop="1dp"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView38"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView37"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_marginRight="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/imageView36"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_weight="1"
                                android:adjustViewBounds="true"
                                android:scaleType="fitXY"
                                app:srcCompat="@drawable/bc" />
                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="70dp"
                            android:layout_marginLeft="0.5dp"
                            android:layout_weight="1"
                            android:orientation="vertical">

                            <FrameLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent">

                                <ImageView
                                    android:id="@+id/imageView35"
                                    android:layout_width="match_parent"
                                    android:layout_height="match_parent"
                                    android:layout_gravity="center"
                                    android:layout_weight="1"
                                    android:adjustViewBounds="true"
                                    android:foreground="@color/transparan"
                                    android:scaleType="fitXY"
                                    app:srcCompat="@drawable/bc" />

                                <TextView
                                    android:id="@+id/textView37"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_gravity="center"
                                    android:gravity="center"
                                    android:maxWidth="50dp"
                                    android:text="Lihat Semua"
                                    android:textColor="@android:color/white" />
                            </FrameLayout>

                        </LinearLayout>

                    </LinearLayout>
                </LinearLayout>

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@color/putih"
                        android:orientation="vertical"
                        android:padding="20dp">

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

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



                                <TextView
                                    android:id="@+id/textView39"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginTop="5dp"
                                    android:layout_marginBottom="5dp"
                                    android:text="Tiket Aquaria KLCC"
                                    android:textColor="@android:color/black"
                                    android:textSize="18sp"
                                    android:textStyle="bold" />

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


                                    <TextView
                                        android:id="@+id/textView40"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="10dp"
                                        android:text="8.3 Baik"
                                        android:textColor="@color/biru_tua"
                                        android:textSize="10sp" />

                                    <TextView
                                        android:id="@+id/textView41"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="5dp"
                                        android:text="( dari 8632 review )"
                                        android:textSize="10sp"
                                        android:textStyle="bold" />
                                </LinearLayout>
                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>

                </LinearLayout>

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@color/putih"
                        android:orientation="vertical"
                        android:padding="20dp">

                        <TextView
                            android:id="@+id/textView43"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="5dp"
                            android:layout_marginBottom="5dp"
                            android:text="Fitur"
                            android:textColor="@android:color/black"
                            android:textSize="14sp"
                            android:textStyle="bold" />

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_marginTop="5dp"
                            android:layout_marginBottom="5dp"
                            android:orientation="horizontal">

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

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


                                    <TextView
                                        android:id="@+id/textView42"
                                        android:layout_width="wrap_content"
                                        android:layout_height="wrap_content"
                                        android:text="Konfirmasi Instan"
                                        android:textColor="@color/hijau"
                                        android:textSize="12sp" />
                                </LinearLayout>
                            </LinearLayout>

                        </LinearLayout>

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

                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </ScrollView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tlbar4"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="@color/biru"
        android:orientation="vertical">

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

            <ImageView
                android:id="@+id/back"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="10dp"
                android:src="@drawable/ic_arrow_back_black"
                android:tint="@color/putih" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="7dp"
                android:layout_marginTop="7dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="7dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical" />

            <ImageView
                android:id="@+id/imageView15"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:tint="@color/putih"
                app:srcCompat="@drawable/ic_bookmark_border_black"
                tools:ignore="VectorDrawableCompat" />

            <ImageView
                android:id="@+id/imageView33"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:tint="@color/putih"
                app:srcCompat="@drawable/ic_more_vert_black"
                tools:ignore="VectorDrawableCompat" />

        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

MainActivity.java

Salin dan paste kode dibawah ke MainActivity.java.


package id.kanre.toolbartransparent;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

public class MainActivity extends AppCompatActivity {

    private ImageView back;
    private ScrollView scrll;
    private LinearLayout tol;
    private int nl = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getSupportActionBar().hide();
        setContentView(R.layout.activity_main);

        back = findViewById(R.id.back);
        scrll = findViewById(R.id.scrll_post);
        tol = findViewById(R.id.tlbar4);
        tol.getBackground().setAlpha(0);

        AksiScroll();
    }
    private void AksiScroll() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    int op = NilaiAksiScroll(scrollY, 500);
                    tol.getBackground().setAlpha(op);
                }
            });
        }
    }

    public int Bulatkan(double f) {
        int c = (int) ((f) + 0.5f);
        double n = f + 0.5f;
        return (n - c) % 2 == 0 ? (int) f : c;
    }
    public double CariPersen(double b, double a) {
        double hasil = (a/b)*100;
        return hasil;

    }

    public int NilaiAksiScroll(int scrollY, double batas){
        if (scrollY> 0&&scrollY<batas) {
            double c = CariPersen(batas, scrollY);
            int aa = Bulatkan(c);
            double y = (aa/100.0) * 255.0;
            int op = Bulatkan(y);
            nl = op;
        }else if (scrollY>batas){
            nl = 255;
        }else{
            nl = 0;
        }
        return nl;
    }

}

Jalankan Aplikasi

Jalankan dan lihat bagaimana tampilan aplikasi akan tampak seperti pada gambar di bawah.

Penjelasan Kode


private void AksiScroll() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            scrll.setOnScrollChangeListener(new View.OnScrollChangeListener() {
                @Override
                public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                    int op = NilaiAksiScroll(scrollY, 500);
                    tol.getBackground().setAlpha(op);
                }
            });
        }
    }

Kode di atas akan berfungsi ketika aplikasi menjalankan class MainActivity.java, dimana dalam kode tersebut menginstruksikan program apabila scrll melakukan aksi scroll maka ambil nilai scroll dari scrollY dan tentukan kemudia masukkan kedalam method "NilaiAksiScroll()" ditambah batas dari scroll view akan mencapai nilai 100% dalam hal ini "500" sehingga menjadi NilaiAksiScroll(scrollY, 500);. Method "NilaiAksiScroll" kemudian mengembalikan nilai yang di masukkan kedalam variabel op (dalam hal ini tingkat transparansi).

Variabel op inilah yang kemudian digunakan untuk mengatur tingkat transparansi dari tool atau menu, dengan code tol.getBackground().setAlpha(op);. Perlu diperhatikan bahwa sebelumnya tool telah dibuat menjadi transparan dengan menggunakan kode "tol.getBackground().setAlpha(0);".

Perhatian

Kode if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { menandakan bahwa fungsi tersebut hanya bisa berjalan di android Marshmallow (6.0) atau yang paling terbaru.

Cara Merubah Integer Menjadi Angka Romawi di PHP

Angka romawi kerap kali digunakan pada saat membuat website. Angka romawi ini bisa di tuliskan secara manual, hanya saja yang menjadi masalah ketika yang ditampilkan nantinya menggunakan perulangan atau memiliki banyak data yang mana datanya hanya berupa tipe data integer. Untuk mengakali hal ini bisa dilakukan dengan membuat function yang dapat merubah tipe data integer menjadi angka romawi.

Berikut fungsi untuk Merubah Integer Menjadi Angka Romawi di PHP.


function figureRomawi($angka)
    {
     $angka = intval($angka);
     $result = '';
     
     $array = array('M' => 1000,
     'CM' => 900,
     'D' => 500,
     'CD' => 400,
     'C' => 100,
     'XC' => 90,
     'L' => 50,
     'XL' => 40,
     'X' => 10,
     'IX' => 9,
     'V' => 5,
     'IV' => 4,
     'I' => 1);
     
     foreach($arrat as $roman => $value){
      $matches = intval($angka/$value);
     
      $result .= str_repeat($roman,$matches);
     
      $angka = $angka % $value;
     }

     return $result;
    }

Contoh penggunaannya seperti berikut :


<?php
function angkaRomawi($angka)
{
	 $angka = intval($angka);
	 $result = '';
	 
	 $array = array('M' => 1000,
	 'CM' => 900,
	 'D' => 500,
	 'CD' => 400,
	 'C' => 100,
	 'XC' => 90,
	 'L' => 50,
	 'XL' => 40,
	 'X' => 10,
	 'IX' => 9,
	 'V' => 5,
	 'IV' => 4,
	 'I' => 1);
	 
	 foreach($array as $roman => $value){
	  $matches = intval($angka/$value);
	 
	  $result .= str_repeat($roman,$matches);
	 
	  $angka = $angka % $value;
	 }
	 
	 return $result;
}

$no = 0;
for ($i=0; $i < 100; $i++) { 
	$no++;
	echo "angka romawi dari $no = ".angkaRomawi($no)."<br>";
}
?>

Hasil dari kode contoh di atas akan tampak seperti pada gambar di bawah :

REACTJS #2 MEMBUAT COMPONENT

Component dalam dunia pemrograman bisa di artikan sebagai bagian-bagian yang tersusun satu kesatuan dengan fungsi teretentu. ReactJS sebagai front end dari website mengadopsi sistem component, dimana website di bagi menjadi beberapa component kemudian digabungkan dalam satu frame. Component ini seperti navigasi, header, footer, content, dan lain sebagainya.

Menariknya component yang dibuat pada ReactJS dapat digunakan berulang kali di tempat manapun. Contohnya ketika membuat sebuah card view , programer hanya perlu membuat satu component card view kemudian memanggilnya berulang kali sesuai yang di inginkan.

Lalu bagaimana cara memulai membuat componetn di ReactJS ?
Mari simak langkah-langkah di bawah ini.

1. Buka project yang telah di buat

Bagi yang belum tahu cara membuat project baru ReactJS silahkan ikuti tutorial dari awal Cara Install ReactJs dengan Mudah.

2. Buat folder component

Buka project baru yang telah dibuat lalu buat folder baru dengan nama component pada directory src.

3. Buat file component baru

Pada folder component buat file baru dengan nama Component1.js. Isi file ini dengan kode berikut :



import React, {Component} from 'react';



class Component1 extends Component {
    
    render(){
   
        return(
            <div>
                <h1>Mencoba membuat Component</h1>
                <p>Ini adalah contoh pembuatan Component</p>
            </div>           
        );
    }
    
}
export default Component1;

4. Panggil component ke App.js

App.js merupakan file utama yang akan tampil saat aplikasi dijalanka. Tambahkan component yang telah dibuat dengan terlebih dahulu melakukan import dengan code "import Component1 from './component/Component1';". Nama "Component1" harus sesuai dengan nama kelas dari component. Kode lengkap App.js seperti berikut.



import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
 render(){
  return (
    <component1/>
  );
 }
  
}

export default App;

Hasilnya akan tampak seperti berikut :

Component ini dapat dipanggil berulang kali tanpa menuliskan ulang code html pad component, cukup dengan memanggil tag Component1 contohnya kode App.js seperti berikut:


import React, {Component} from 'react';

import Component1 from './component/Component1';



class App extends Component {
 render(){
  return (
    <div>
  	<component1/>
  	<component1/>
  	<component1/>    </div>
  );
 }
  
}

export default App;

Maka hasilnya seperti berikut :

Kemudian muncul pertanyaan bagaimana ketika bila ingin mengganti data di setiap component ?
Pertanyaan ini akan di jawab pada postingan selanjutnya di REACTJS #3 MENGIRIM DAN MENAMPILKAN DATA KE COMPONENT.