X

Wednesday, November 17, 2021

Dasar PHP - Sintaks Dasar PHP untuk Programer Pemula


 

Sebelumnya kami sudah memabahas mengenai Mengenal Apa itu PHP Dalam Bahasa Pemrograman, maka kali ini kita akan membahas lebih jauh mengenai Sintaks Dasar PHP untuk Programer Pemula.

Sama halnya seperti bahahasa pemrograman lainnya PHP juga memiliki cara penulisan, struktur, dan sintaksnya sendiri. Namun apabila anda tidak akan sulit mempelajari bahasa pemrograman yang satu ini.

Berikut beberapa Sintaks Dasar PHP untuk Programer Pemula.

Pembuka dan Penutup

Agar kode kode php dapat terbaca maka kode harus selalu dimulai dengan pembuka "", namun dalam kasus tertentu seperti ingin menampilkan tulisan bisa menggunakan "".

Menampilkan Tulisan

Untuk menampilkan tulisan pada PHP digunakan perintah echo di lanjutkan dengan kata yang ingin di tampilkan. Contohnya :

<?php
echo "Coding Rakitan";
?>
Code 1.1 Contoh menampilkan kata dengan echo
Selain menggunakan perintah echo kita juga bisa menggunakan perintah print_r. Contohnya seperti berikut :

<?php
print_r("Belajar PHP");
?>
Code 1.2 Pengguanaan print_r pada PHP

Membuat Variabel

Data berupa angka, tulisan, array, dan lain sebagainya dapat di inisialkan atau dimasukkan kedalam variabel tertentu untuk nantinya di olah. Variabel bisa di artikan seperti kotak yang dapat menampung data dan disimpan kedalam memori komputer. Data yang di simpan dapat diambil dan diubah kapan saja.

Variabel pada bahsa PHP didefinisikan dengan menggunakan tanda "$" (dollar) sebelum nama variabel. Berikut contoh pembuatan variabel dalam PHP

<?php
$a = "Coding Rakitan";
$b = 123;
$c = ['coding rakitan', 123];
$d = true;
?>
Code 1.3 Pembuatan Variabel pada PHP
Variabel $a menampung data tulisan atau string, $b menampung data angka atau int, $c menampung data array, dan $d menampung data berupa boolean.

Terdapat beberapa aturan yang perlu diperhatikan dalam penulisan Variabel :
  • Variabel di awali dengan tanda $
  • Variabel dalam PHP bersifat sensitif case sehingga penulisan besar kecil perlu di perhatikan (contoh variabel $coding tidak sama dengan $Coding) $
  • Pemberian nilai atau data pada variabel menggunakan tanda =
  • Tidak memerlukan deklarasi variabel terlebih dahulu.
Ket : Deklarasi variabel yaitu memberikan inisial tipe data pada variabel contohnya pada C++ (string nama; int umur; char jenis_kelamin, dll).

Konstanta pada PHP

Konstanta pada PHP hampir sama dengan Variabel bedanya pada konstanta nilai atau data yang sudah di definisikan tidak bisa diubah lagi. Contoh penulisan konstanta sebagai berikut :

<?php
const nama = "Coding Rakitan";
echo nama; // menampilkan tulisan Coding Rakitan
?>
Code 1.4 Pembuatan Konstanta pada PHP
Selain menggunakan format di atas penulisan lain konstanta bisa ditulis seperti berikut :

<?php
define("nama", "Coding Rakitan");
echo nama; // menampilkan tulisan Coding Rakitan
?>
Code 1.5 Pembuatan Konstanta pada PHP

Komentar

Terkadang kita perlu menandai baris tertentu dengan komentar agar, ketika kode sudah membengkak terlalu banyak, kita bisa tahu maksud dan tujuan bagian tersebut di buat. Untuk menambahkan komentar ada 2 cara yaitu :

<?php
// komentar satu baris
echo "Belajar Sintaks PHP";
?>
Code 1.6 Komentar satu baris

<?php
/*ini adalah contoh
komentar lebih dari
satu baris */
echo "Belajar Sintaks PHP";
?>
Code 1.7 Membuat komentar dari beberapa baris pada PHP

Untuk menampilkan komentar datu baris anda cukup menambahkan "//" pada awal baris, sedangkan untuk membuat komentar yang panjang atau lebih dari satu baris silahkan buka dengan kode "/*" kemudian tutup komentar dengan kode "*/".

Wednesday, November 10, 2021

Dasar PHP - Mengenal Apa itu PHP Dalam Bahasa Pemrograman



 

Di dalam dunia Website kita mengenal banyak sekali bahasa pemrograman mulai dari bahasa pemrograman yang berjalan di sisi Front End hingga Back End. Kali ini kita akan membahas salah satu bahasa pemrograman yang paling banyak digunakan sebagai Back End Website yaitu PHP atau (PHP: Hypertext Preprocessor).

Back end yang satu ini paling banyak digunakan terlihat dari kepopuleran dan pemakai Frameworknya sebut saja Laravel dan Codeigniter yang tidak perlu di pertanyakan lagi.

Tentunya kalian sudah tidak sabar untuk memulai project pertama dengan PHP tapi alangkah baiknya kalian mengenal PHP terlebih dahulu.

Daftar Isi


1. Pengertian PHP
2. Sejarah PHP
3. Fungsi PHP
4. Kelebihan PHP
5. Kekurangan PHP
6. Mengapa Harus Menggunakan PHP ?
7. Contoh Kode PHP

1. Pengertian PHP

PHP:Hypertext Preprocessor atau yang lebih dikenal PHP merupakan salah satu bahasa pemrograman Back End (Server Side) yang hadir secara Open Source.

PHP termasuk kedalam bahasa script yang dijalankan pada sisi server. Dimana PHP memungkinkan pembuatan website yang lebih dinamis dan memungkinkan untuk melakukan interaksi dengan Database. Beberapa database yang didukung oleh PHP diantaranya : MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, serta Generic ODBC.

Sama halnya seperti bahasa Back End website lainnya, PHP membutuhkan Aplikasi WebServer agar website bisa berjalan. Aplikasi WebServer yang biasa digunakan seperti : Apache, Nginx, IIS.

PHP dapat ditanamkan langsung kedalam Script Html dengan syarat format extensi file harus ".php". Berikut contoh kode php yang ditanamkan langsung kedalam script html.


<?php
$nama_web = "CODING RAKITAN";
?>
<!DOCTYPE html>
<html>
<head>
<title>https://codingrakitan.blogspot.com/</title>
</head>
<body>
<h1><?=$nama_web?></h1>
</body>
</html>
Code 1.1 Contoh penerapan PHP kedalam kode HTML

2. Sejarah PHP

PHP pertama kali dibuat oleh Rasmus Lerdrof, seorang programmer dari Denmark/Greenland pada tahun 1995. Awal kemunculannya PHP dikenal dengan nama Form Interpreted (FI), dimana skripnya digunakan untuk pengelolaan data formulir dari web.

Perkembangan selanjutnya Rasmus merilis kode sumber FI secara Open Source serta mengganti namanya menjadi PHP/FI. Hal ini menimbulkan dampak positif bagi perkembangan PHP sebab banya programer yang tertarik untuk mengembangkan Bahasa Tersebut.

Dua tahun kemudian tepatnya di tahun 1997, PHP/FI 2.0 dirilis. Salah satu perubahan adalah pada Interpreter PHP yang sudah diimplementasikan dalam program C. Ketersediaan modul-modul dalam rilisin ini juga membuat kemampuan PHP/FI meningkat secara signifikan.

Kemudian di Tahun 1998 sebuah perusahaan bernama Zend menulis ulang interpreter PHP dengan membuatnya menjadi lebih baik dan cepat dari sebelumnya. Rilisan itu kemudian diresmikan sebagai PHP 3.0 sekaligus mengganti nama PHP/FI menjadi PHP : Hypertext Preprocessing.

Pertengahan tahun 1999, Zend kembali merilis Interpreter PHP baru yang kemudian menjadi PHP 4.0. Versi inilah yang kemudian banyak di kenal dan dipakai pada awal abad ke-21 dikarenakan mampu membuat website yang kompleks dengan kecepatan yang relatif tinggi.

Pertengahan tahun 2004, Zend kembali merilis versi terbaru PHP yaitu versi 5.0. Pada versid terbaru ini mengalami perubahan besar, versi ini membawa konsep OOP atau pemrograman berorientasi objek yang banyak di guanakan bahasa pemrograman baru.

Hingga tulisan ini dibuat Versi php sudah mencapai 8.1.0 yang dapat dilihat di halaman resminya https://www.php.net/.

3. Fungsi PHP

Secara garis besarnya PHP di fungsikan untuk berjalan di sisi server, dan berikut beberapa fungsi utama PHP untuk anda ketahui :

  • Untuk pembuatan skrip yang berjalan di sisi server, dimana PHP melayani manajemen web hingga manajemen database untuk di tampilkan pada front end website.
  • Mengumpulkan data formulir
  • Memungkinkan untuk mengirim dan menerima cookie
  • Mengontrol apa saja yang dapat diakses pengguna.
  • Mengamankan data pada website

4. Kelebihan PHP

Berikut beberapa kelebihan yang dimiliki PHP :

  • Dapat berjalan hampir disemua sistem operasi, terutama sistem operasi seperti Linux, Windows, dan macOS
  • PHP dapat ditanamkan langsung kedalam kode script html, dapat dilihat pada contoh 1.1
  • Memiliki sintaks yang mudah sederhana dan mudah dipahami
  • Banyak di install pada bawahan hosting berbayar.
  • Memiliki banyak peminat dan referensi di internet yang sangat memudahkan pemula dalam belajar PHP
  • Memiliki banyak tawaran pekerjaan.

5. Kekurangan PHP

Dibalik kelebihan pasti terdapat kekurangan, berikut beberapa kekurangan bahasa pemrograman PHP :

  • Bersifat Open Source yang membuat banyak orang dapat membongkar dan mencari titik lemah dari PHP.
  • Tidak dapat digunakan banyak kecuali pengembangan aplikasi/layanan WEB

6. Mengapa Harus Menggunakan PHP ?

Selain dari kelebihan PHP yang sudah di sebutkan pada point 4 ada beberapa alasan mengapa harus menggunakan PHP.

PHP bisa dikatakan memiliki masa depan cerah dikarenakan bersifat Open Source yang mendorong banyak programer dapat meningkatkan, memperbarui, dan memperbaiki kekurangan sebelumnya.

7. Contoh Kode PHP

Sama halnya seperti kode program pada umumnya PHP juga memiliki tag tersendiri, Kode PHP selalu di awali dengan kode :

<?php ?>

Code 1.2 Contoh kode PHP

Dimana tanda "" merupakan kode penutup.

Untuk menampilkan sebuah tulisan misalnya "Hello World" dapat dilakukan dengan menuliskan kode seperti berikut :

<?php
echo "Hello World";
?>
Code 1.3 Menampilkan Kata Hello World

"echo" merupakan perintah untuk menampilkan sedangkan "Hello World" merupakan kata yang di tampilkan. Pastikan untuk menutup baris kode dengan tanda ";" atau tidak kode anda tidak dapat berjalan (error).
Untuk mempelajari sintax lainnya pada PHP silahkan baca Dasar PHP - Sintaks Dasar PHP untuk Programer Pemula

Wednesday, October 6, 2021

Belajar Perulangan For PHP Sangat Mudah

Pada postingan sebelumnya kita pernah membahas mengenai for pada bahasa pemrograman C++ dalam postingan C++ | Macam-macam Bentuk Program Perulangan Pada C++ . Kali ini yang akan dibahas mengenai penggunaan perulangan for PHP.
Selain digunakan pada C++ dan PHP for juga digunakan hampir pada semua bahasa pemrograman dengan struktur yang tidak jauh beda. Misalkan struktur penggunaan perulangan for pada c++ adalah seperti berikut :

	
		for (awal; operator pembanding; ulang){

		} 
	


Sedangkan struktur perulangan for php juga seperti berikut :

for (awal; operator pembanding; ulang){

} 



Sehingga bisa dikatakan dengan mempelajari penggunaan for pada satu bahasa pemrograman, akan membuat kita mudah untuk mengaplikasikannya pada bahasa pemrograman lainnya.

Selain perulangan for bisa seperti di atas, kita juga dapat membuat bentuk perulangan dalam perulangan (for dalam for) atau biasa disebut Nested For :

Berikut Contoh Penggunaan Nested For pada bahasa pemrograman PHP:

<?php
for($i=0;$i<10;$i++){
for($j=0;$j<5;$j++){
echo "$j";
}
echo "<br>";
}
?>


Hasilnya akan menampilkan "01234" sebanyak sepuluh kali. Lebih jelasnya seperti pada gambar di bawah: 



Tuesday, August 17, 2021

Mengubah Nominal Uang Menjadi Terbilang di PHP

Angka nominal uang dapat dirubah menjadi terbilang atau huruf pada PHP dengan menggunakan kodisi. Berikut function untuk mengubah nominal menjadi terbilang pada PHP.

function penyebut($nilai) {
$nilai = abs($nilai);
$huruf = array("", "satu", "dua", "tiga", "empat", "lima", "enam", "tujuh", "delapan", "sembilan", "sepuluh", "sebelas");
$temp = "";
if ($nilai < 12) {
$temp = " ". $huruf[$nilai];
} else if ($nilai <20) {
$temp = penyebut($nilai - 10). " belas";
} else if ($nilai < 100) {
$temp = penyebut($nilai/10)." puluh". penyebut($nilai % 10);
} else if ($nilai < 200) {
$temp = " seratus" . penyebut($nilai - 100);
} else if ($nilai < 1000) {
$temp = penyebut($nilai/100) . " ratus" . penyebut($nilai % 100);
} else if ($nilai < 2000) {
$temp = " seribu" . penyebut($nilai - 1000);
} else if ($nilai < 1000000) {
$temp = penyebut($nilai/1000) . " ribu" . penyebut($nilai % 1000);
} else if ($nilai < 1000000000) {
$temp = penyebut($nilai/1000000) . " juta" . penyebut($nilai % 1000000);
} else if ($nilai < 1000000000000) {
$temp = penyebut($nilai/1000000000) . " milyar" . penyebut(fmod($nilai,1000000000));
} else if ($nilai < 1000000000000000) {
$temp = penyebut($nilai/1000000000000) . " trilyun" . penyebut(fmod($nilai,1000000000000));
}
return $temp;
}

function terbilang($nilai) {
if($nilai<0) {
$hasil = "minus ". trim(penyebut($nilai));
} else {
$hasil = trim(penyebut($nilai));
}
return $hasil;
}
Untuk menggunakan function di atas anda hanya perlu memanggil function "terbilang", contohnya seperti berikut :

$a = terbilang(50000);
echo $a;

Hasilnya akan menampilkan terbilang "lima puluh ribu".

Merubah Angka Menjadi Nama Bulan di PHP

Dengan menggunakan function anda dapat merubah bulan yang sebelumnya berbentuk angka menjadi nama bulan misalnya angka 1 menjadi Januari, 2 menjadi Februari, dan seterusnya.
Berikut function yang dapat anda gunakan :


function  getBulan($bln){
        switch  ($bln){
            case  1:
            return  "Januari";
            break;
            case  2:
            return  "Februari";
            break;
            case  3:
            return  "Maret";
            break;
            case  4:
            return  "April";
            break;
            case  5:
            return  "Mei";
            break;
            case  6:
            return  "Juni";
            break;
            case  7:
            return  "Juli";
            break;
            case  8:
            return  "Agustus";
            break;
            case  9:
            return  "September";
            break;
            case  10:
            return  "Oktober";
            break;
            case  11:
            return  "November";
            break;
            case  12:
            return  "Desember";
            break;
        }
    }



Contoh penggunaan :

$bulan = getBulan(8);
echo "sekarang bulan ".$bulan;


Hasilnya akan menampilkan kalimat "sekarang bulan Agustus".

Function Merubah Angka Biasa Menjadi Angka Romawi di PHP

Berikut adalah function untuk merubah angka bisa menjadi angka romawi pada bahasa pemrograman PHP.
	
		 function numberToRomanRepresentation($number) {
		    $map = 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);
		    $returnValue = '';
		    while ($number > 0) {
		        foreach ($map as $roman => $int) {
		            if($number >= $int) {
		                $number -= $int;
		                $returnValue .= $roman;
		                break;
		            }
		        }
		    }
		    return $returnValue;
		}
	

Berikut contoh cara penggunaannya :

$romawi = numberToRomanRepresentation(20);
echo $romawi;

Monday, May 10, 2021

Keunggulan dan Kekurangan Android Studio yang Perlu Dipahami

Bagi seorang programmer pasti sudah tidak asing dengan yang namanya Android Studio. Bahkan bisa saja mereka juga paham betul dengan keunggulan dan kekurangan Android Studio tersebut. Masyarakat awam juga perlu mengenal apa itu Android Studio.


Sebagian besar pengguna ponsel pintar di dunia menggunakan sistem operasi Android pada ponsel mereka. Masyarakat sudah tidak asing lagi dengan istilah Android, hanya saja mereka mungkin tidak tahu apa itu Android Studio.


Secara sederhananya Android Studio tersebut merupakan software yang digunakan untuk membuat aplikasi smartphone. Jadi aplikasi yang anda pakai di ponsel, dibuat dan dikembangkan pada Android Studio ini. oleh karena itu perannya sebenarnya sangat penting.


Mengenal Lebih Dekat Android Studio


Sebelum kita melihat apa saja keunggulan dan kekurangan Android Studio ada baiknya kita pahami terlebih dahulu bagimana cara kerja Android Studio tersebut. Android Studio ini diperkenalkan pada tahun 2013 lalu saat acara Google I/o Conference.


Android Studio ini sepenuhnya sudah diakusisi oleh Google, sehingga perkembangannya semakin pesat. Sosok dibalik pembuatan Android Studio ini adalah Jet Brains. Android Studio ini tersedia untuk beberapa platform seperti Windows, desktop Mac, dan juga Linux. 


Fungsi utama dari software ini adalah membuat, merancang, dan mengambangkan aplikasi Android. Semua aplikasi yang anda temukan di Play Store misalnya dibuat melalui Android Studio ini. Jadi jika anda ingin belajar pemrograman, maka harus paham cara menggunakan Android Studio. 


Apa Saja Keunggulan Android Studio


Saat ini memang sudah banyak bermunculan software pembuat aplikasi. Meskipun demikian tetap saja kebanyakan programmer lebih memilih menggunakan Android Studio tersebut dalam membuat aplikasi. Alasannya tentu saja karena Android Studio memiliki banyak keunggulan.


  • Terdapat Banyak Fitur Pada Emulatornya


Salah satu alasan mengapa para programmer menyukai Android Studio ini karena pada emulatornya banyak disediakan fitur yang bisa dimanfaatkan. Bisa dibilang bahwa Android Studio ini merupakan yang terbaik dalam hal emulator.


Lewat banyaknya fitur emulator ini, anda nantinya bisa melakukan uji langsung aplikasi yang dibuat pada ponsel atau juga pada smartv. Dengan demikian dapat diketahui letak kekurangan atau hal lainnya.
Menariknya lagi adalah lewat adanya emulator tersebut, anda bisa langsung membuat simulasi di perangkat keras lainnya, misalnya pada baterai, pada sensor, gps, dan yang lain. Bisa dibilang bahwa dengan kehadiran Android Studio proses kerja jadi lebih efektif. 

 

  • Bisa Digunakan Secara Tim


Membuat suatu aplikasi tentu bukan pekerjaan mudah. Dibutuhkan kreativitas , ketelitian, dan pengetahuan luas untuk membuat aplikasi yang sempurna. Oleh karena itu kebanyakan orang membuat aplikasi secara tim, sehingga hasil kerja lebih cepat dan lebih efektif.


Dengan menggunakan Android Studio, maka anda bisa mengembangkan aplikasi tersebut secara tim. Pada Android Studio terdapat layanan Github dan Subversion. Layanan ini memungkinkan anda berkolaborasi dengan orang lain dalam mengembangkan aplikasi Android tersebut.


Bisa dipastikan bahwa hasil kerja jauh lebih baik bila dikerjakan bersama orang – orang ahli. Bisa saja ada kesalahan yang luput dari perhatian anda, tetapi ditemukan oleh anggota tim. Proses kerja semakin cepat dan hasilnya juga pasti semakin maksimal. 

  • Memiliki Sistem yang Sangat Fleksibel


Di balik  keunggulan dan kekurangan Android Studio jelas software ini sangat bermanfaat. Android Studio memiliki sistem yang sangat fleksibel. Fleksibel artinya otomatisasi, manejemen dependensi, dan konfigurasi versinya dapat disesuaikan dengan keperluan anda.


Pada sistem ini, setiap varian versi nantinya disertakan juga dengan kode yang berbeda. Jadi sangat tepat digunakan untuk membuat beragam aplikasi, yang sesuai dengan kebutuhan anda. Keunggulan ini sulit ditemukan pada software pengembang lainnya. 

  • Adanya Fitur Layout Editor


Fitur layout editor juga menjadi salah satu keunggulan yang ditawarkan oleh Android Studio ini. Fitur ini membuat proses pembuatan layout jadi lebih efisien. Anda nantinya cukup melaukan drag elemen UI tersebut ke desain editor. Jadi tidak perlu lagi membuat layout XML nya.


Dengan adanya layout editor, anda bisa langsung melihat desain yang anda buat, baik dari versinya, ukuran layarnya, atau juga perangkat Android yang berbeda. Dengan kata lain, proses pembuatan aplikasi jadi semakin praktis. 

  • Cocok Digunakan Pada Semua Perangkat Android


Saat ini kebanyakan prangkat elektronik menggunakan sistem operasi Android. Google sendiri masih menjadi raja mesin pencarian, sehingga kebanyakan orang lebih menyukai perangkat Android. Ini juga lah yang menjadi salah satu alasan mengapa Android Studio lebih diminati.


Jika anda mengembangkan aplikasi lewat Android Studio, maka aplikasi tersebut nantinya bisa digunakan pada semua perangkat Android. Jika anda menggunakan software pengembang lain, belum tentu bisa dioperasikan pada perangkat Android.


Aplikasi yang dibuat lewat Android Studio ini, pasti bisa dijalankan dengan mudah pada semua perangkat Android, karena memang masih selaras. Anda bisa menerapkan di smart tv, smart watch dan perangkat lainnya. 


  • Memiliki Fitur Intelligence Code Editor


Intelligence code editor pada Android Studio merupakan salah satu fitur yang sangat bermanfaat. Lewat fitur ini, maka penulisan kode tidak lagi rumit. Intelligence code ini akan memberikan saran kode untuk anda, jadi prosesnya jadi lebih praktis.


Fitur ini juga mampu menganalisis kesalahan kode, memperkirakan kode yang akan dibuat, dan yang lainnya. Jadi kode yang dibuat pada aplikasi tersebut bisa terhindar dari kesalahan, proses penulisannya semakin cepat dan juga efektif. 


Kekurangan Software Android Studio


Terlepas dari segala kelebihan yang dimilikinya tetap saja Android Studio masih menyimpan beberapa kekurangan. Kekurangan ini sebenarnya tidak terlalu besar, karena tetap Android Studio menjadi yang terbaik dalam pembuatan aplikasi. Beberapa kekurangannya adalah sebagai berikut.


  • Proses Implementasi Cukup Panjang


Salah satu kekurangan dari Android Studio ini adalah proses implementasinya masih tergolong panjang dan sedikit rumit. Jadi pemula yang ingin menggunakannya harus belajar ekstra dan sabar dalam melakukannya. 


Walaupun anda misalnya membuat aplikasi yang sederhana, masih perlu melalui proses implementasi yang panjang. Jadi jika ingin membuat aplikasi, dibutuhkan kesungguhan saat menggunakan software Android Studio tersebut. 


  • Sulit Mendeteksi Error

Kekurangan lain dari Android Studio adalah jika saat proses pembuatan aplikasi terdapat kesalahan, maka relative sulit mendeteksi kesalahan tersebut. Saat anda sistem yang error misalnya, anda tidak langsung tahu di mana letak error tersebut.
Jadi programmer harus memeriksa secara perlahan penulisan dan kesalahan yang mereka buat. Dalam membuat aplikasi memang dibutuhkan ketelitian, jadi jika ada sistem error, maka anda harus segera memperbaikinya.


Saat ini hampir semua hal sudah memiliki aplikasi, karena aplikasi tersebut membuat kehidupan manusia jadi lebih mudah. Tidak ada salahnya belajar membuat aplikasi, karena hal ini bisa menjadi peluang bisnis untuk anda.


Android Studio merupakan salah satu software pengembang aplikasi terbaik saat ini, yang akan memudahkan segala pekerjaan anda. itu lah informasi terkait keunggulan dan kekurangan Android Studio.

Monday, May 3, 2021

Segala Sesuatu tentang Bootstrap 4 yang Perlu Front-end Developer Tahu

 

Bootstrap 4 adalah versi terbaru dari kerangka kerja front-end yang sangat populer, Bootstrap. Sebagai versi terbaru salam sebuah framework, Bootstrap 4 menawarkan berbagai kemudahan untuk pembuat desain. Apalagi mengingat perlu berulang kali menulis CSS, Bootsrap ini bisa membantu memudahkan. 

Mungkin Anda pernah mendengar tentang Bulma atau Materialize yang membuat penulisan prototipe yang sama cepat dengan Bootstrap 4. Namun keunggulan dari Bootstrap adalah, Anda bisa memilih sendiri modul yang akan digunakan. 

Ada berbagai situs web terkenal yang menjadikan Bootstrap sebagai kerangka. Sebut saja twitter yang memiliki tampilan sederhana tapi modern sehingga semakin hari semakin diminati. Begitu juga tema pada Joomla, Wordpress, dan CMS yang menggunakan Bootstrap. 

Bagi developer anyar, desain web yang responsif adalah hal sulit untuk digunakan walau memang bagi yang berpengalaman, ini bisa dengan mudah dikerjakan. Bootsrap hadir memudahkan pekerjaan para developer baru ini. Apalagi Bootstrap 4 dibangun di atas Flexbox yang membuatnya jadi lebih cerdas. 

Perbedaan Bootstrap 3 dengan Bootstrap 4: 

Terus melakukan pembaharuan, ternyata perbedaan Bootstrap terbaru dengan versi lama cukup signifikan. Mulai dari perubahan font, warna, dan lain sebagainya. Untuk lebih jelasnya, berikut ini ulasan lengkapnya: 

  • Menggunakan font default, Bootstrap 3 menggunakan ukuran 14px yang kemudian diperbaharui menjadi 16px. Dengan perubahan ini, Anda yang menggunakan Bootstrap harus segera menyesuaikan ukuran pixelnya.
  • Tidak lagi menggunakan font jenis Helvetica Neue, Helvetica, Sans-Serif, dan Arial. Yang terbaru menggunkan jenis font Sans-Serif, Arial, dan Helvetica Neue.
  • Pada Bootstrap 3, setiap class grid membutuhkan ‘col-‘ pada bagian depan. Namun untuk versi Bootrstap 4 tidak lagi membutuhkannya. Selain itu versi terbaru menambahkan satu sistem grid menjadi col-md, col-lg, col-sm, col-xl, dan col-*.
  • Ada perubahan besar yang paea Bootstrap tidak menggunakan header, kini ada pada versi terbaru ini. Selain itu, header tabel juga bisa diberi warna jadi terang (.thead-light) atau nuansa gelap (.thead-dark).

 

Kelebihan dari Bootstrap 4:

  1. Bootstrap yang lama menggunakan cara border-box ke content-box. Untuk sebagian developer, ini memang menjengkelkan karena lebih sulit dipahami dan memakan waktu yang lama. Namun dengan kerangka terbaru, yaitu border-box, ini lebih mudah digunakan.
  2. Reset CSS selama ini sudah berkembang pesat. Dalam versi Bootstrap disebut dengan Reboot. Penggunaan Reboot berbeda karena didasarkan dengan normalisasi. Ini supaya menghindari margin-top, menggunakan banyak rem unit, dan native font rendering yang lebih optimal.

Cara instal Bootstrap 4:

Tahukah Anda bahwa Bootstrap 4 bisa diunduh secara online dan juga offline? Selain itu juga bisa menggunakan bower, npm, dan composer. Namun yang perlu Anda ingat jika instal project Bootstrap 4 tergantung dengan development yang digunakan. 


Ambil contoh jika Anda ingin mengembangkan website menggunakan NodeJs, maka yang paling tepat adalah instao menggunakan bower dan npm. Nah, berikut ini langkah menambahkan Bootstrap 4 dalam pekerjaan Anda:

  1. Pastikan Anda sudah membuat direktori terbaru dan mengunduh Bootrstap dari website resminya. Setelah sudah selesai diunduh, Anda akan mendapatkan versi zip yang di dalamnya terdiri dari banyak folder. Nah, file inilah yang nantinya perlu Anda ekstrak ke dalam folder project supaya bisa digunakan.
  2. Pastikan semua folder zip sudah diekstrak sehingga nantinya akan mendapat susunan direktori yang lengkap.
  3. Buka teks editor dan buat file index.html dan diisikan beberapa kode. Jangan lupa, gunakan juga file Bootstrap dan library yang lainnya.
  4. Dengan begitu, Bootstrap sudah bisa digunakan untuk mengembangkan website.

Cara instal secara online:

Sebelum Anda menginstal Bootstrap 4 secara online, Anda perlu tahu bahwa dengan cara ini mempengaruhi kecepatan website. Jika tidak masalah, Anda bisa menggunakan CDN jika berminat instal secara online. 


Buka perintah: 


<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>


Dan nantinya file Bootstrap 4 akan tersalin dalam website untuk bisa digunakan oleh class dan fungsi yang lainnya.

Langkah-langkah menggunakan Bootstrap:

Yang terbaik dari menggunakan Bootstrap adalah waktu menjadi lebih singkat dan tidak perlu kesulitan mengetik banyak kode program. Selain itu, Anda hanya perlu menggunakan class-class  yang terletak dalam file Bootstrap. 


Apabila Anda ingin menggabungkan class dengan class lainnya, hanya perlu menambahkan class tabel yang dikombinasikan oleh class lainnya. Anda tidak perlu khawatir karena sudah tersedia beberapa class yang dipersiapkan untuk membuat tabel. Berikut selengkapnya:

  • ‘.table’ untuk menjelaskan atau membuat tabel yang biasa. Hasilnya hanya akan berupa lapisan kecil dan pembatas secara mendatar. Kodenya adalah <table class=”table”>.
  • ‘.table-bordered’ adalah class yang digunakan untuk memasukkan border dalam table. Untuk mencobanya, Anda bisa membuat kode <table class=”table table-bordered”>.
  • ‘.table-stripped’ adalah class yang akan membuat table jadi warna yang berbeda di setiap baris. Kode untuk yang satu ini adalah  <table class=”table table-sripped”>.
  • ‘.table-hover’ adalah class yang memanfaatkan hover pada table. Namun efek ini baru terlihat saat mouse diletakkan pada class. Kode untuk yang satu ini adalah <table class=”table table-hover”>.

Mengatur tampilan gambar dengan Bootstrap:

Dengan framework ini, Anda jadi bisa membuat gambar yang responsif atau thumbnail. Class yang digunakan pada Bootstrap 4 adalah ‘.img-circle’, ‘.img-responsive’, ‘.img-rounded’, ‘.img-thumbnail’. Dengan adanya gambar, website Anda akan jauh lebih menarik. 

  • ‘.img-circle’ adalah class yang digunakan untuk menambahkan gambar yang berbentuk lingkaran.
  • ‘.img-responsive’ adalah class yang memungkinkan untuk membuat gambar jadi bisa dibuka dalam berbagai jenis resolusi layar.
  • ‘.img-rounder’ adalah class yang digunakan untuk membuat efek melingkar atau melengkung pada gambar.
  • ‘.img-thumbnail’ adalah class yang digunakan untuk menambahkan gambar thumbnail melalui Bootstrap.

Cara membuat tombol dengan Bootstrap

Karena tombol adalah komponen penting dalam sebuah website, maka Bootstrap juga menyediakan class untuk menambah tombol yang berfungsi sekaligus menarik. Ada berbagai variasi tombol yang bisa dipilih, tapi awalnya Anda hanya perlu menggunakan class ‘btn’.
Berikut adalah variasi class tombol yang ada pada Bootstrap:

  • ’.btn-default’ adalah class yang menjadikan tombol default berwarna abu-abu.
  • ‘.btn-sucsess’ adalah class yang dibuat untuk pemberitahuan setelah selesai memasukkan atau memproses suatu program.
  • ‘.btn-primary’ adalah class yang digunakan untuk menjadikan tombol berwarna biru. Umumnya terjadi pada tombol untuk login
  • ‘.btn-warning’ adalah class yang digunakan untuk membuat tombol yang memperingati jika terjadi sesuatu. Umumnya, tombol berwarna kuning.
  • ‘.btn-info’ adalah class yang membuat tombol jadi warna biru muda
  • ‘.btn-danger’ adalah class yang membuat tombol jadi terlihat warna merah.
  • ‘.btn’ adalah class yang digunakan untuk membuat tombol secara standar dengan warna abu-abu kehitaman.

 

Selain bisa digunakan untuk membuat tombol dan menambah gambar, Bootstrap 4 juga bisa diandalkan untuk membuat class panel, class peringatan, dan lain sebagainya. Karena banyaknya class yang ada, tidak heran jika Bootstrap  4 banyak diminati dan ditunggu.

Saturday, March 20, 2021

Cara Menghubungkan Database Firebase dengan Codeigniter

 


Sebelumnya pada postingan Cara Membuat dan Menghubungkan Firebase dengan Project Android Studio telah dijelaskan cara membuat project firebase dan menghubungkannya dengan Android Studio.

Sekarang yang akan dibahas adalah Cara Menghubungkan Database Firebase dengan Project Codeigniter. Sebelum itu silahkan buat project firebase terlebih dahulu, caranya bisa di lihat pada postingan Cara Membuat dan Menghubungkan Firebase dengan Project Android Studio.

Jika sudah punya project firebase di akun google kalian, silahkan tambahkan library firebase di project Codeigniter kalian, dengan menggunakan Composer.


composer require eelkevdbos/firebase-php dev-master



Untuk controller silahkan buat seperti berikut :
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

use Firebase\Firebase;

class CFirebase extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('Mdata');

}
public function index()
{
$this->load->view('firebase');

}
public function add_data()
{
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "0",
"tipe" => "0",
];
$a = $fb->push('/data', $d);
echo json_encode($a);

}
public function get_data()
{
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$a = $fb->get('/data');
echo json_encode($a);

}
public function update_data()
{
$key = $this->input->get("key");
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "1",
"tipe" => "0",
];
$a = $fb->update('/data/'.$key, $d);
echo json_encode($a);

}
public function delete_data()
{
$key = $this->input->get("key");
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "1",
"tipe" => "0",
];
$a = $fb->delete('/data/'.$key, $d);
echo json_encode($a);

}
}

Jangan lupa untuk mengganti "YOUR_FIREBASE_URL" dan "YOUR_FIREBASE_SECRET", sesuai dengan firebase kalian.

Penjelasan Kode

Add Data

Kode untuk menambah data terletak pada method :
public function add_data(){
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "0",
"tipe" => "0",
];
$a = $fb->push('/data', $d);
echo json_encode($a);
 }
Pada kode di atas program akan menambahkan data kedalam database firebase menggunakan fungsi "push" dimana data yang ditambahkan berupa data array dengan nama variabel "$d". Nantinya data yang ditambahkan akan memiliki key tersendiri.





Get Data

public function get_data()
{
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$a = $fb->get('/data');
echo json_encode($a);

}


Kode di atas menginstruksikan untuk mengambil semua data yang ada pa Path "/data" sehingga nantinya akan mengembalikana data berupa JSON.





Update Data

public function update_data()
{
$key = $this->input->get("key");
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "1",
"tipe" => "0",
];
$a = $fb->update('/data/'.$key, $d);
echo json_encode($a);

}


Kode di atas menginstruksikan untuk mengupdate data menggunakan perintah update. Dimana terdapat variabel "$key" yang berfungsi untuk menentukan data mana yang akan diubah.

Delete Data

public function delete_data()
{
$key = $this->input->get("key");
$fb = Firebase::initialize('YOUR_FIREBASE_URL', 'YOUR_FIREBASE_SECRET');
$d = [
"notif" => "1",
"tipe" => "0",
];
$a = $fb->delete('/data/'.$key, $d);
echo json_encode($a);

}


Sama halnya seperti update data, kode di atas juga menggunakan "$key" untuk menentukan data tertentu yang ingin di hapus. Jika ingin menghapus semua data dalam path silahkan ganti kode menjadi "$a = $fb->delete('/data/', $d);".

Friday, March 19, 2021

CARA MUDAH UPLOAD FILE DI CODEIGNITER

 


Proses upload seringkali dibutuhkan dalam pengelolaan website, seperti upload file berupa gambar user, kelengkapan berkas, file postingan dan lain sebagainya. Framework tidak lupa memberikan fungsi atau library yang memudahkan development dalam mengupload file.

Berikut akan kita buat sebuah web sederhana untuk mengupload file menggunakan Codeigniter.

1. Buat folder baru di folder root dengan nama asset.





2. Buat sebuah view dengan nama upload.php isi dengan kode di bawah ini.

<!DOCTYPE html>
<html>
<head>
<title>Upload file</title>
</head>
<body>
<form method="post" action="upload/aksi" enctype="multipart/form-data">
<input type="file" name="file">
<br>
<button>upload</button>
</form>
</body>
</html>


3. Buat sebuah Controller baru dengan nama Upload.php isi dengan kode di bawah ini.

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

class Upload extends CI_Controller {


public function index()
{
$this->load->view("upload");
}
public function aksi()
{
$config['upload_path'] = './asset/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 2024;
$config['encrypt_name'] = TRUE;
$config['file_name'] = "sembarang";

$this->load->library('upload');
$this->upload->initialize($config);

if (!$this->upload->do_upload('file')) {
$error = array('error' => $this->upload->display_errors());
$ar = array('result'=>'error', 'data'=>$error);
echo json_encode($ar);
} else {
$data = array('image_metadata' => $this->upload->data());
$nama = $data['image_metadata']['file_name'];
$tipe = explode('.', $nama);
$ret = array(
'nama_file'=> $nama,
'tipe_file'=>$tipe[1]
);
$ar = array('result'=>'success', 'file'=>$ret);
echo json_encode($ar);
}
}
}


4. Silahkan jalankan aplikasi dan lihat hasilnya.

Penjelasan kode


$config['upload_path'] = './asset/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = 2024;
$config['encrypt_name'] = TRUE;


Kode di atas merupakan konfigurasi dari file yang akan di upload.

  • upload_path adalah lokasi atau folder dimana file upload akan di tempatkan.
  • Pada bagian "allowed_types" merupakan jenis file yang dapat di upload, untuk mengizinkan semua jenis file silahkan isi dengan '*'.
  • max_size, batas maksimal ukuran file yang di upload.
  • encrypt_name, membuat nama file otomatis dengan menggunakan kode unik



Baca Juga : Menampilkan Gambar Sebelum di Upload dengan Javascript 

 

 

 

Menampilkan Data dari Database Kedalam DataTables di Codeigniter

 


DataTables merupakan sebuah library javascript yang mempermudah kita dalam menampilkan data kedalam bentuk table. Penggunaannya yang sangat simple dan memiliki banyak fitur membuat datatables banyak digunakan.

Pada postingan kali ini kita akan mencoba menampilkan data dari database kedalam table menggunakan DataTables dan framework Codeigniter 3. Langsung saja ikuti langkah-langkah di bawah.

1. Buat struktur database yang akan ditampilkan.





2. Hubungkan Codeigniter dengan database yang akan ditampilkan, caranya masuk ke application -> config -> database.php lalu masukkan atur sesuai database kalian contohnya seperti dibawah.

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

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'cmsku',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);


3. Buat view dengan nama coba.php kemudian isi dengan kode di bawah :

<!DOCTYPE html>
<html>
<head>
<title>Coba Data Tables</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">

<!--Import jQuery before export.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<!--Data Table-->
<script type="text/javascript" src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="tabelku" class="display" style="width:100%">
<thead>
<tr>
<th>No</th>
<th>Judul</th>
<th>Isi</th>
<th>Status</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>


</tbody>
</table>

<script type="text/javascript">
$(document).ready(function(){
let RefTable = {
init() {
RefTable.table=$('#tabelku').DataTable({

bSort : true,
destroy : true,
iDisplayLength : 10,
processing : true,
serverSide : true,
order : [],
ajax : {
"url" : "<?php echo base_url()?>Coba/load",
"type" : "POST",
},

});

$("body").on("click", "[data-action]", function(e) {
e.preventDefault();

let action = $(this).data("action");
if (action === "edit") {
//aksi edit disini
}
});
}

}
RefTable.init();

});

</script>





</body>
</html>


4. Buat Model dengan nama DataModel.php lalu isi dengan kode dibawah

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

class DataModel extends CI_Model {

var $table = 'postingan a';//nama tabel

var $column_order = array(null,'a.tanggal',null); //order berdasarkan

var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

var $select_column = array('a.*'); //select all
var $order = array('a.tanggal' => 'desc'); // default order


public function __construct()
{
parent::__construct();
$this->load->database();
}

private function _get_datatables_query()
{
$this->db->select($this->select_column);
$this->db->from($this->table);
$i = 0;

foreach ($this->column_search as $item) // loop column
{
if($_POST['search']['value']) // if datatable send POST for search
{

if($i===0) // first loop
{
$this->db->group_start(); // open bracket. query Where with OR clause better with bracket. because maybe can combine with other WHERE with AND.
$this->db->like($item, $_POST['search']['value']);
}
else
{
$this->db->or_like($item, $_POST['search']['value']);
}

if(count($this->column_search) - 1 == $i) //last loop
$this->db->group_end(); //close bracket
}
$i++;
}

if(isset($_POST['order'])) // here order processing
{
$this->db->order_by($this->column_order[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
}
else if(isset($this->order))
{
$order = $this->order;
$this->db->order_by(key($order), $order[key($order)]);
}
}

function get_datatables()
{

$this->_get_datatables_query();
if($_POST['length'] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
}

function count_filtered()
{
$this->_get_datatables_query();
$query = $this->db->get();
return $query->num_rows();
}

public function count_all()
{
$this->db->from($this->table);
return $this->db->count_all_results();
}
}



Silahkan sesuaikan baris berikut sesuai dengan database kalian.

var $table = 'postingan a';//nama tabel

var $column_order = array(null,'a.tanggal',null); //order berdasarkan

var $column_search = array('a.judul_postingan, a.tanggal', 'a.isi'); //cari berdasarkan

var $select_column = array('a.*'); //select all
var $order = array('a.tanggal' => 'desc'); // default order


5. Buat Controller dengan nama Coba.php lalu isi dengan kode dibawah

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

class Coba extends CI_Controller {

public function __construct()
{
parent::__construct();
$this->load->model('DataModel');

}

public function index()
{
$this->load->view('coba');
}

public function load()
{

$data = array();

$tampil = $this->DataModel->get_datatables();

$no = $_POST['start'];

foreach ($tampil as $key => $r) {
$no++;
$row = array();
$row[] = $no;
$row[] = $r->judul_postingan;
$row[] = $r->isi;
$row[] = $r->status;
$row[] = '<a href="javascript:; type="button" class="btn btn-xs yellow btn-outline btn-edit tooltips " title="Edit" data-action="edit" data-id="'.$r->id_postingan.'"><i class="fa fa-edit"></i> Edit</a>
';
$data[] = $row;
}

$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->DataModel->count_all(),
"recordsFiltered" => $this->DataModel->count_filtered(),
"data" => $data,
);

echo json_encode($output);
}
}


6. Hasil running akan tampak seperti gambar dibawah ini :





Thursday, March 18, 2021

REST API CLIENT DENGAN RETROFIT 2 ANDROID STUDIO

 


Jika sebelumnya saya lebih banyak menggunakan volley untuk rest api client, maka kali ini kita akan menggunakan library berbeda yaitu Retrofit 2.

Pada tutorial kita akan mencoba mengambil data berformat JSON dengan menggunakan retrofit.

Silahkan ikuti langkah-langkah di bawah ini :

1. Persiapkan data yang akan di ambil contohnya disini saya menggunakan data biasa yang saya tulis sendiri dalam format JSON.


{
	"id" : 123456,
	"nama" : "coding rakitan",
	"umur" : 23,
	"username" : "coding_rakitan"
}




2. Buka project yang ini di implementasikan penggunaan retrofit 2.

3. Buka build.gradle (Module: app) kemudian tambahkan dependencies berikut kemudian klik sync now.

// Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.1.0'

// JSON Parsing
implementation 'com.google.code.gson:gson:2.6.1'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'


4. Tambahkan izin penggunaan internet pada AndroidManifest.xml

...
<uses-permission android:name="android.permission.INTERNET"/>
...


Dan tambahkan pula code android:usesCleartextTraffic="true" kedalam tag aplication di AndroidManifest.xml.

...
<application
...
android:usesCleartextTraffic="true"
>
...

5. Buat sebuah package baru dengan nama "data" yang akan menampung 3 calass seperti DataModel, RetrofitClient, dan APIService.





6. Isi DataModel seperti berikut :

public class DataModel {
@SerializedName("id")
@Expose
private Integer id;

@SerializedName("nama")
@Expose
private String nama;

@SerializedName("umur")
@Expose
private Integer umur;

@SerializedName("username")
@Expose
private String username;



public Integer getId() {
return id;
}

public void setId(Integer id) {
this.id = id;
}

public String getNama() {
return nama;
}

public void setNama(String nama) {
this.nama = nama;
}

public Integer getUmur() {
return umur;
}

public void setUmur(Integer umur) {
this.umur = umur;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}
}


7. Isi RetrofitClient seperti berikut :

public class RetrofitClient {
private static Retrofit retrofit = null;
private static final String IP = "192.168.43.140";
public static final String BASE_URL = "http://" +IP + "/retrofit/";

public static Retrofit getClient() {
if (retrofit==null) {
retrofit = new Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
}
return retrofit;
}
}

Catatan : Ganti ip dengan ip atau domain server kalian.

8. Isi APIService seperti berikut :

public interface APIService {
@GET("data.json")
Call<DataModel> getData();
}


9. Sekarang kode sudah bisa dijalankan pada activity ataupun class lain untuk mengambil data json. Sebagai contoh penggunaan pada MainActivity seperti berikut :

public class MainActivity extends AppCompatActivity {

Call<DataModel> data;
APIService apiService;

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

apiService = RetrofitClient.getClient().create(APIService.class);


data = apiService.getData();
data.enqueue(new Callback<DataModel>() {
@Override
public void onResponse(Call<DataModel> call, Response<DataModel> response) {
Log.d("DataModel", ""+new Gson().toJson(response.body()));
if (response.isSuccessful()){

Toast.makeText(MainActivity.this, "success", Toast.LENGTH_SHORT).show();
}else{
Log.d("errt", ""+response.errorBody());
Toast.makeText(MainActivity.this, ""+response.errorBody(), Toast.LENGTH_SHORT).show();
}
}

@Override
public void onFailure(Call<DataModel> call, Throwable t) {
Log.d("DataModel", ""+t.getMessage());
Toast.makeText(getApplicationContext(), "Error : " + t.getMessage(), Toast.LENGTH_LONG).show();
}
});

}
}

Pada kode di atas menginstruksikan program untuk menampilkan respon JSON pada log maka anda bisa melihat hasilnya pada logchat seperti berikut :





Wednesday, March 17, 2021

Inilah Cara Login ke Server dengan Putty

 


Putty merupakan aplikasi opern-sorce yang berguna untuk melakukan remote access, seperti RLogin, SSH dan Telnet. Salah satu keunggulan menggunakan putty kita dapat menjalankan command ke server.

Berikut Cara Login ke Server dengan Putty

1. Buka aplikasi Putty





2. Isi Host Name (or IP address) dengan ip hosting kalian, sedangkan port isi 22, conection type pilih SSH





3. Selanjutnya akan tampil seperti gambar berikut, isi login as dengan username hosting kemudian masukkan juga password.





Catatan : Selama mengisi password tidak akan ada karakter yang muncul. 

4. Apabila muncul tampilan seperti gambar dibawah menandakan aplikasi sudah siap digunakan untuk mengirm perintah command ke server.





Catatan : Putty dapat digunakan bersama WinSCP yaitu aplikasi management file yang mirip dengan FileZilla.

Membuat Aplikasi Pertama dengan Flutter di Android Studio

 


Pada tutorial Flutter kali ini kita akan membuat aplikasi pertama dengan menggunakan editor Android Studio.

Langsung saja tanpa basa basi silahkan ikuti langkah dibawah ini :

1. Pilih Start a new Flutter project pada jendela awal Android Studio.





2. Pada jendela selanjutnya pilih Flutter Application





3. Isi Project name dengan "hello_world" (nama project tidak boleh menggunakan spasi dan huruf capital), serta jangan lupa atur Flutter SDK path berdasarkan folder tempat sdk flutter kalian berada, terakhir atur Project location yaitu lokasi untuk menyimpan project.





4. Atur Company domain kemudian klik finish





Tunggu beberapa saat, project flutter akan di buat. 


5. Apabila telah muncul tampilan seperti gambar di bawah dan tidak ada notifikasi eror maka project berhasil dibuat.





6. Klik icon Run untuk menjalankan aplikasi di emulator atau langsung ke hp.





Tuesday, March 16, 2021

Membuat CRUD SQLite di Android Studio


 

SQLite merupakan sebuah database yang dapat dipasang pada Aplikasi Android Studio. Buat yang sering menggunakan database MYSQL tidak akan sulit beradaptasi dengan database SQLite sebab keduanya memiliki query yang sama.

Pada postingan ini kita akan membuat CRUD SQLite di Android Studio. Saya tidak akan memberikan kode berupa satu aplikasi full, hanya berupa code CRUD saja jadi sisanya tinggal teman-teman sesuaikan dengan aplikasi sendiri.

Sebagai contoh pembuatan database CODING_RAKITAN dengan tabel artikel. langkah yang harus dilakukan adalah :

1. Buat class baru dengan nama DBHistori kemudian isi dengan kode dibawah :


...

import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.provider.BaseColumns;

import java.util.ArrayList;
import java.util.HashMap;

public class DBArtikel extends SQLiteOpenHelper {

public static final int DATABASE_VERSION = 1;
public static final String DATABASE_NAME = "CODING_RAKITAN.db";

public DBArtikel(Context context) {
super(context, DATABASE_NAME, null, DATABASE_VERSION);
}


public static class FeedEntry implements BaseColumns {
public static final String TABLE_NAME = "artikel_tersimpan";
public static final String TITLE = "title";
public static final String URL = "url";
public static final String CONTENT = "content";
public static final String PUBLISHED = "published";
public static final String AUTHOR = "author";
public static final String DISPLAY_NAME = "displayName";
public static final String TANGGAL_SIMPAN = "tanggal_simpan";
public static final String GAMBAR_UTAMA = "gambar_utama";
}


@Override
public void onCreate(SQLiteDatabase db) {
String TABEL =
"CREATE TABLE " + DBArtikel.FeedEntry.TABLE_NAME + " (" +
DBArtikel.FeedEntry._ID + " INTEGER PRIMARY KEY," +
DBArtikel.FeedEntry.TITLE + " TEXT," +
DBArtikel.FeedEntry.URL+ " TEXT,"+
DBArtikel.FeedEntry.CONTENT+ " TEXT,"+
DBArtikel.FeedEntry.PUBLISHED+ " TEXT,"+
DBArtikel.FeedEntry.AUTHOR+ " TEXT,"+
DBArtikel.FeedEntry.DISPLAY_NAME+ " TEXT,"+
DBArtikel.FeedEntry.GAMBAR_UTAMA+ " TEXT,"+
DBArtikel.FeedEntry.TANGGAL_SIMPAN+" DATETIME DEFAULT CURRENT_TIMESTAMP)";

db.execSQL(TABEL);
}

@Override
public void onUpgrade(SQLiteDatabase db, int i, int i1) {
String SQL_DELETE_ENTRIES =
"DROP TABLE IF EXISTS " + DBHistori.FeedEntry.TABLE_NAME;
String SQL_DELETE_ENTRIES_2 =
"DROP TABLE IF EXISTS " + DBArtikel.FeedEntry.TABLE_NAME;
db.execSQL(SQL_DELETE_ENTRIES);
db.execSQL(SQL_DELETE_ENTRIES_2);
onCreate(db);
}
public void insert_satu(String title, String url, String content, String publish, String author, String display_name, String gambar){
SQLiteDatabase db = this.getWritableDatabase();
String query = "INSERT INTO "+ FeedEntry.TABLE_NAME+ "("+
FeedEntry.TITLE +","+
FeedEntry.URL+","+
FeedEntry.CONTENT+","+
FeedEntry.PUBLISHED+","+
FeedEntry.AUTHOR+","+
FeedEntry.DISPLAY_NAME+","+
FeedEntry.GAMBAR_UTAMA+")"+
"VALUES ('"+title+"', '"+
url+"', '"+
content+"','"+
publish+"', '"+
author+"', '"+
display_name+"', '"+
gambar+"')";
db.execSQL(query);
db.close();
}
public void insert_dua(ContentValues values){

SQLiteDatabase db = this.getWritableDatabase();
db.insert(FeedEntry.TABLE_NAME, null, values);
}
public ArrayList<HashMap<String, String>> select_all(){
ArrayList<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
String query = "SELECT * FROM "+ FeedEntry.TABLE_NAME+" ORDER BY "+ FeedEntry.TANGGAL_SIMPAN+" desc";
SQLiteDatabase db = this.getWritableDatabase();
Cursor cursor = db.rawQuery(query, null);
if (cursor.moveToFirst()){
do {
HashMap<String, String> map = new HashMap<String, String>();
map.put(FeedEntry._ID, cursor.getString(0));
map.put(FeedEntry.TITLE, cursor.getString(1));
map.put(FeedEntry.URL, cursor.getString(2));
map.put(FeedEntry.CONTENT, cursor.getString(3));
map.put(FeedEntry.PUBLISHED, cursor.getString(4));
map.put(FeedEntry.AUTHOR, cursor.getString(5));
map.put(FeedEntry.DISPLAY_NAME, cursor.getString(6));
map.put(FeedEntry.GAMBAR_UTAMA, cursor.getString(7));
map.put(FeedEntry.TANGGAL_SIMPAN, cursor.getString(8));
list.add(map);

}while (cursor.moveToNext());
}
db.close();
return list;
}
public ArrayList<HashMap<String, String>> select_where(String where){
ArrayList<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>();
String query = "SELECT * FROM "+ FeedEntry.TABLE_NAME+" WHERE "+where+" ORDER BY "+ FeedEntry.TANGGAL_SIMPAN+" desc";
SQLiteDatabase db = this.getWritableDatabase();
Cursor cursor = db.rawQuery(query, null);
if (cursor.moveToFirst()){
do {
HashMap<String, String> map = new HashMap<String, String>();
map.put(FeedEntry._ID, cursor.getString(0));
map.put(FeedEntry.TITLE, cursor.getString(1));
map.put(FeedEntry.URL, cursor.getString(2));
map.put(FeedEntry.CONTENT, cursor.getString(3));
map.put(FeedEntry.PUBLISHED, cursor.getString(4));
map.put(FeedEntry.AUTHOR, cursor.getString(5));
map.put(FeedEntry.DISPLAY_NAME, cursor.getString(6));
map.put(FeedEntry.GAMBAR_UTAMA, cursor.getString(7));
map.put(FeedEntry.TANGGAL_SIMPAN, cursor.getString(8));
list.add(map);

}while (cursor.moveToNext());
}
db.close();
return list;
}
public void update(String title, String url, String content, String publish,
String author, String display_name, String gambar, String id) {
SQLiteDatabase database = this.getWritableDatabase();

String query = "UPDATE " + FeedEntry.TABLE_NAME + " SET "
+ FeedEntry.TITLE + "='" + title + "', "
+ FeedEntry.URL + "='" + url + "', "
+ FeedEntry.CONTENT + "='" + content + "', "
+ FeedEntry.PUBLISHED + "='" + publish + "', "
+ FeedEntry.AUTHOR + "='" + author + "', "
+ FeedEntry.DISPLAY_NAME + "='" + author + "', "
+ FeedEntry.GAMBAR_UTAMA + "='" + display_name + "'"
+ " WHERE " + FeedEntry._ID + "=" + "'" + id + "'";
database.execSQL(query);
database.close();
}

public void delete_where(int id) {
SQLiteDatabase database = this.getWritableDatabase();
String updateQuery = "DELETE FROM " + FeedEntry.TABLE_NAME + " WHERE " + FeedEntry._ID + "=" + "'" + id + "'";
database.execSQL(updateQuery);
database.close();
}

public void delete() {
SQLiteDatabase database = this.getWritableDatabase();
String updateQuery = "DELETE FROM " + FeedEntry.TABLE_NAME;
database.execSQL(updateQuery);
database.close();
}
}
2. Definisikan class pada Activity ataupun fragment dengan code :

...
private DBArtikel dbArtikel;
...
dbArtikel = new DBArtikel(context);
...


3. Insert data ke SQLite menggunakan metode 1

dbArtikel.insert_satu("isi_title", "isi content", "isi publish", "isi author", "isi display_name", "isi" gambar");


4. Insert data ke SQLite menggunakan metode 2

ContentValues values = new ContentValues();
values.put("title", "");
values.put("url", "");
values.put("content", "");
values.put("published", "");
values.put("author", "");
values.put("displayName", "");
values.put("gambar_utama", "");
dbArtikel.Insert(values);


Catatan isi tanda "" sesuai dengan data yang ingin disimpan contohnya values.put("gambar_utama", "data gambarku");.

5. Select data

ArrayList> a = dbArtikel.select_all();


Selain kode di atas bisa juga melakukan select berdasarkan field :

ArrayList> a = dbArtikel.select_where("query");


6. Update data

...
dbArtikel.update("", "", "", "", "", "", "", "");
...


Silahkan isi "" sesuai dengan field pada code

public void update(String title, String url, String content, String publish,
                       String author, String display_name, String gambar, String id) {
        SQLiteDatabase database = this.getWritableDatabase();

        String query = "UPDATE " + FeedEntry.TABLE_NAME + " SET "
                + FeedEntry.TITLE + "='" + title + "', "
                + FeedEntry.URL + "='" + url + "', "
                + FeedEntry.CONTENT + "='" + content + "', "
                + FeedEntry.PUBLISHED + "='" + publish + "', "
                + FeedEntry.AUTHOR + "='" + author + "', "
                + FeedEntry.DISPLAY_NAME + "='" + author + "', "
                + FeedEntry.GAMBAR_UTAMA + "='" + display_name + "'"
                + " WHERE " + FeedEntry._ID + "=" + "'" + id + "'";
        database.execSQL(query);
        database.close();
    }


7. Delete data

...
dbArtikel.delete();
...


Untuk menghapus data tertentu gunakan perintah

...
dbArtikel.delete_where(id);
...


Ganti id berdasarkan id data yang ingin dihapus dimana id merupakan tipe data int.

Friday, March 12, 2021

Membuat Aplikasi Pesan Chat di Android Studio Bagian 1

 


Aplikasi pesan merupakan salah satu aplikasi wajib di install di perangkat Smartphone Android. Banyak aplikasi pesan chat yang dapat ditemukan di playstore, beberapa aplikasi yang terkenal seperti WhatsApp, Line, Telegram, KakaoTalk, dan masih banyak lagi.

Pada postingan kali ini kita akan membuat aplikasi pesan chat sama seperti WhatsApp ataupun Telegram. Agar mudah untuk dipahami, pembuatan aplikasi ini akan dibagi menjadi beberapa bagian dimana pada bagian pertama ini berfokus pada tampilan aplikasi.

Tampilan aplikasi pada bagian pertama nantinya akan tampak seperti gambar dibawah :

Langsung saja ikuti langkah-langkah berikut :

1. Buat Project baru dengan nama Pesan Kilat
2. Buat beberapa class dan folder seperti pada gambar.




Bisa di lihat pada gambar diatas terdapat 2 class activity yaitu MainActivity, dan TampilPesan, serta terdapat satu class fragment yang berada dalam package fregment dengan nama FragmentChat. Berikut kode dari ketiga class tersebut :

MainActivity

package com.codingrakitan.pesankilat;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;

import com.codingrakitan.pesankilat.fragment.FragmentChat;

public class MainActivity extends AppCompatActivity {

private FragmentTransaction ft;
private FragmentManager fm;
private FragmentChat fragmentChat;
private AppCompatActivity activity;
private Context context;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
setContentView(R.layout.activity_main);

context=this;
activity = this;

fm = getSupportFragmentManager();
ft = fm.beginTransaction();

BuatFragment();
}

private void BuatFragment() {
fragmentChat = new FragmentChat(activity, context);

ft.add(R.id.konten, fragmentChat);
ft.commit();
}

public void TampilPesan() {
Intent i = new Intent(MainActivity.this, TampilPesan.class);
startActivity(i);
onPause();
}
}

TampilPesan

package com.codingrakitan.pesankilat;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TampilPesan extends AppCompatActivity {

private LinearLayout pesan;
private Context context;
private LinearLayout send;
private EditText text;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getSupportActionBar().hide();
setContentView(R.layout.activity_tampil_pesan);

context = this;
pesan = findViewById(R.id.pesan);
send = findViewById(R.id.send);
text = findViewById(R.id.editText);

send.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String s = text.getText().toString();
CardMyPesan(s);
}
});

Kontent();
}

private void CardMyPesan(String s) {
View v = getLayoutInflater().inflate(R.layout.card_pesan_b, null);
LinearLayout konten_pesan = v.findViewById(R.id.konten_pesan);
TextView textView = new TextView(context);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textView.setLayoutParams(lp);

textView.setText(""+s);
textView.setTextSize(14);
textView.setTextColor(getResources().getColor(R.color.hitam));
konten_pesan.addView(textView);

pesan.addView(v);
text.setText("");

}

private void Kontent() {
View v = getLayoutInflater().inflate(R.layout.card_pesan_a, null);
LinearLayout konten_pesan = v.findViewById(R.id.konten_pesan);
TextView textView = new TextView(context);
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textView.setLayoutParams(lp);

textView.setText("selamat datang !");
textView.setTextSize(14);
textView.setTextColor(getResources().getColor(R.color.hitam));
konten_pesan.addView(textView);

pesan.addView(v);
}
}

FragmentChat

package com.codingrakitan.pesankilat.fragment;

import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Build;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import com.codingrakitan.pesankilat.MainActivity;
import com.codingrakitan.pesankilat.R;


@SuppressLint("ValidFragment")
public class FragmentChat extends Fragment {

private AppCompatActivity activity;
private Context context;
private LinearLayout isi;
private LayoutInflater inf;

public FragmentChat(AppCompatActivity activity, Context context) {
this.context = context;
this.activity = activity;
}

@RequiresApi(api = Build.VERSION_CODES.M)
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View view = inflater.inflate(R.layout.fragment_chat, container, false);
isi = view.findViewById(R.id.isi);
inf = inflater;
for (int i=0;i<10;i++){
BuatCard();
}
return view;
}

private void BuatCard() {
View v = inf.inflate(R.layout.card_chat, null);
isi.addView(v);
v.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
((MainActivity) getActivity()).TampilPesan();
}
});
}
}
Catatan : Jangan lupa untuk mengganti "package com.codingrakitan.pesankilat;" yang berada pada baris atas sesuai dengan package kalian.

3. Masukkan 2 drawabel baru dengan nama "ic_arrow_back_black.xml" dan "ic_send_black.xml".





Gambar drawable ini bisa anda buat sendiri ataupun menggunakan asset yang telah disediakan AndroidStudio. Baca Cara Menggunakan Icon Vector Asset bawahan Android Studio, Cara Menggunakan Icon Sendiri di Android Studio.

4. Buka colors.xml yang berada pada res -> values -> colors.xml, kemudian isi dengan kode 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="biru">#0073A0</color>
<color name="abu_abu">#8A8A8A</color>
<color name="hijau">#00D423</color>
<color name="abu_abu_dua">#E3E3E3</color>
<color name="hitam">#000000</color>
<color name="putih">#FFFFFF</color>
<color name="hijau_pesan">#e2ffc7</color>
<color name="waktu">#869b72</color>

</resources>


5. Buat layout seperti pada gambar dibawah :





Adapun kode dari layout-layout tersebut :

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"
tools:context=".MainActivity" >

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

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

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PesanKilat"
android:textColor="@android:color/white"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>

<LinearLayout
android:id="@+id/konten"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"></LinearLayout>

</LinearLayout>

</RelativeLayout>


activity_tampil_pesan.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:background="@color/abu_abu_dua"
android:orientation="vertical"
tools:context=".TampilPesan">

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

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:scrollbars="none">

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

<LinearLayout
android:id="@+id/pesan"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingTop="50dp"></LinearLayout>
</LinearLayout>
</ScrollView>

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

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="1"
android:background="@android:color/white"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="10dp">

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:ems="10"
android:hint="Tulis pesan"
android:inputType="textPersonName"
android:textSize="14sp" />
</LinearLayout>

<LinearLayout
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:background="@color/biru"
android:orientation="vertical"
android:padding="20dp">

<ImageView
android:id="@+id/imageView4"
android:layout_width="20dp"
android:layout_height="20dp"
android:adjustViewBounds="true"
android:tint="@android:color/white"
app:srcCompat="@drawable/ic_send_black"
tools:ignore="VectorDrawableCompat" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/biru"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp">

<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:tint="@android:color/white"
app:srcCompat="@drawable/ic_arrow_back_black"
tools:ignore="VectorDrawableCompat" />

<ImageView
android:id="@+id/imageView3"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
app:srcCompat="@mipmap/ic_launcher_round" />

<TextView
android:id="@+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Nama Kontak"
android:textColor="@android:color/white"
android:textStyle="bold" />
</LinearLayout>

</RelativeLayout>


card_chat.xml

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

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

<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:adjustViewBounds="true"
app:srcCompat="@mipmap/ic_launcher" />

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

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp"
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/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:text="Nama Kontak"
android:textColor="@android:color/black"
android:textStyle="bold" />

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>

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

<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="15:00"
android:textColor="@color/hijau"
android:textSize="10sp"
app:fontFamily="serif" />

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/hijau"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="9"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>

</LinearLayout>

</LinearLayout>

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


card_pesan_a.xml

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

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="30dp"
android:background="@android:color/white"
android:minWidth="70dp"
android:minHeight="30dp"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:visibility="gone">

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0852512161"
android:textColor="@android:color/black"
android:textSize="12sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:orientation="horizontal"></LinearLayout>

<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama kontak"
android:textSize="10sp" />
</LinearLayout>

<LinearLayout
android:id="@+id/konten_pesan"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"></LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">

<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09:00"
android:textColor="@color/waktu"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>


card_pesan_b.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:padding="10dp">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:background="@color/hijau_pesan"
android:minWidth="70dp"
android:minHeight="30dp"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:visibility="gone">

<TextView
android:id="@+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0852512161"
android:textColor="@android:color/black"
android:textSize="12sp" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:minWidth="50dp"
android:orientation="horizontal"></LinearLayout>

<TextView
android:id="@+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama kontak"
android:textSize="10sp" />
</LinearLayout>

<LinearLayout
android:id="@+id/konten_pesan"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp"></LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingBottom="10dp">

<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="09:00"
android:textColor="@color/waktu"
android:textSize="10sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>


fragment_chat.xml

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

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">

<LinearLayout
android:id="@+id/isi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
</LinearLayout>


6. Terakhir buka AndroidManifest.xml dan tambahkan android:windowSoftInputMode="adjustResize" pada activity "TampilPesan" sehingga menjadi seperti berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.codingrakitan.pesankilat">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".TampilPesan"
android:windowSoftInputMode="adjustResize"></activity>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Jika kalian mengkopi paste kode di atas, silahkan sesuaikan package="com.codingrakitan.pesankilat" dengan nama package kalian. 


Catatan : Kode android:windowSoftInputMode="adjustResize" berfungsi untuk menyesuaikan tampilan ketika keyboard muncul.





Lanjut ke Membuat Aplikasi Pesan Chat di Android Studio Bagian 2