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);".

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 :





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 :





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.





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.

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

Cara Membuat Login Google dengan Codeigniter

 


Seperti judul postingan Cara Membuat Login Google dengan Codeigniter, kita akan membuat sebuah metode login dengan menggunakan akun google. Framework yang digunakan pada tutorial kali ini adalah Codeigniter 3. Untuk versi lainnya dapat disesuaikan.

Sebelum memulai mengikuti tutorial di bawah ini pastikan anda sudah menginstall Composer sebab dependency manager ini nantinya diperlukan untuk menginstall library google apiclient. Baca Mengenal dan Menginstall Composer.

Daftar isi
1. Membuat Apikey Google
2. Memasang Codeigniter dan Menginstall Library
3. Membuat Kode

1. Membuat Apikey Google


Tahap pertama yang harus anda lalui adalah membuat api key google sehingga nantinya website anda dapat mengakses akun google yang di inginkan. Untuk mendapatkan apikey ini caranya sangat mudah anda hanya memerlukan akun email google kemudian masuk ke alamat https://console.developers.google.com/. Selanjutnya ikuti langkah-langkah di bawah ini.

1) Buat project baru dengan mengklik new project pada jendela select a project





2) Isi project name sesuai keinginan anda, contohnya disini saya menggunakan nama Login Google. Kemudian klik Create





3) Setelah project baru berhasil dibuat klik menu OAuth consent screen





4) Pilih external lalu klik create





5) Isi App Name, User support email dan Email address pada developer contact information kemudian klik Save and continue





Catatan : pada tahapan nomor 5 anda juga bisa menambahkan logo aplikasi.

6) Selanjutnya klik Save and continue





7) Biarkan kosong lalu klik Save and continue





8) Jika sudah muncul tampilan seperti pada gambar dibawah silahkan lanjut dengan mengklik menu Credential





9) Klik Create Credential kemudian pilih OAuth client ID





10) Aplication Type pilih web aplication kemudian add uri pada bagian Authorized redirect URIs kemudian isi dengan halaman aksi login google anda. Misalnya alamat yang akan mengakses login google saya adalah http://localhost/google/login





11) Simpan kode yang muncul untuk nantinya dipasang pada kode website.





2. Memasang Codeigniter dan Menginstall Library

Langkah selanjutnya adalah memasang Codeigniter pada folder root website anda. Untuk cara pemasangan silahkan baca Cara Pemasangan Codeigniter untuk Pemulan. Pada tutorial ini saya memberi nama "google". Sehingga ketika di akses pada browser adalah "http://localhost/google".





Masuk ke folder root website kemudian install library google apiclient dengan memasukkan perintah dibawah pada CMD.


composer require google/apiclient:"^2.0"





Catatan : Apabila muncul error "require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead." silahkan baca Cara Mengatasi require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead.

Terakhir jangan lupa untuk membuat Url project codeigniter dapat diakses tanpa embel-embel index.php misalnya http://localhost/google/index.php/login sebab nantinya akan berpengaruh ketika melakukan redirect url. Baca Menghilangkan Index.php pada url Codeigniter

.

3. Membuat Kode

1) Buat Contoller "Login.php" , isi dengan kode dibawah ini.

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

class Login extends CI_Controller {

public function index()
{
include_once APPPATH . "../vendor/autoload.php";
$google_client = new Google_Client();
$google_client->setClientId(''); //masukkan ClientID anda
$google_client->setClientSecret(''); //masukkan Client Secret Key anda
$google_client->setRedirectUri('http://localhost/google/login'); //Masukkan Redirect Uri anda
$google_client->addScope('email');
$google_client->addScope('profile');

if(isset($_GET["code"]))
{
$token = $google_client->fetchAccessTokenWithAuthCode($_GET["code"]);
if(!isset($token["error"]))
{
$google_client->setAccessToken($token['access_token']);
$this->session->set_userdata('access_token', $token['access_token']);
$google_service = new Google_Service_Oauth2($google_client);
$data = $google_service->userinfo->get();
$current_datetime = date('Y-m-d H:i:s');
$user_data = array(
'first_name' => $data['given_name'],
'last_name' => $data['family_name'],
'email_address' => $data['email'],
'profile_picture'=> $data['picture'],
'updated_at' => $current_datetime
);
$this->session->set_userdata('user_data', $data);
}
}
$login_button = '';
if(!$this->session->userdata('access_token'))
{

$login_button = '<a href="'.$google_client->createAuthUrl().'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3XOQ8RZ9pER6GC4pSBjcbMnPIG0miCKdFAutUgtfqaXGEpxOavDF5GYE_c0Xd2XpvUQzY3bqCn1H4ZUOb0GJNR1nYECyKwJpzNBLJiRPiNAMeGyO7CIlsivTjw_JntFEzGamGLJbvpds/s320/google_logo.png" /></a>';
$data['login_button'] = $login_button;
$this->load->view('google_login', $data);
}
else
{
// uncomentar kode dibawah untuk melihat data session email
// echo json_encode($this->session->userdata('access_token'));
// echo json_encode($this->session->userdata('user_data'));
echo "Login success";
}
}
public function logout()
{
$this->session->unset_userdata('access_token');

$this->session->unset_userdata('user_data');
echo "Logout berhasil";
}
}




Jangan lupa isi setClientId dan setClientSecret sesuai dengan apikey yang telah dibuat sebelumnya. Serta setRedirectUri sesuaikan dengan url yang di daftarkan sebelumnya yaitu "http://localhost/google/login".

2) Buat view "google_login" , isi dengan kode dibawah ini.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login with Google in Codeigniter</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
<div class="container">
<br />
<h2 align="center">Login using Google Account with Codeigniter</h2>
<br />
<div class="panel panel-default">
<?php
if(!isset($login_button))
{

$user_data = $this->session->userdata('user_data');
echo '<div class="panel-heading">Welcome User</div><div class="panel-body">';
echo '<img src="'.$user_data['profile_picture'].'" class="img-responsive img-circle img-thumbnail" />';
echo '<h3><b>Name : </b>'.$user_data["first_name"].' '.$user_data['last_name']. '</h3>';
echo '<h3><b>Email :</b> '.$user_data['email_address'].'</h3>';
echo '<h3><a href="http://localhost/login_google/google/logout">Logout</h3></div>';
}
else
{
echo '<div align="center">'.$login_button . '</div>';
}
?>
</div>
</div>
</body>
</html>





3) Aktifkan library Session, buka application/config/autoload.php, ubah kode "$autoload['libraries'] = array('');" menjadi "$autoload['libraries'] = array('session');" kemudian save.

4) Buka application/config/routes.php, lalu ubah "$route['default_controller'] = 'welcome';" menjadi "$route['default_controller'] = 'login';".

Terakhir silahkan lakukan pengetesan, apabila berhasil akan tampil pilihan akun google yang akan digunakan untuk login setelah memilih akun, akan diredirect ke halaman dengan menampilkan tulisan "Login success".