Membuat Aplikasi Login Dengan Google Account – Part 2

Pada tutorial sebelumnya tentang Membuat Aplikasi Login Dengan Google Account telah kita pelajari bersama-sama cara setting google api console untuk kebutuhan aplikasi dan menggunakan Google APIs Client Library PHP dalam rangka membuat aplikasi login yang dapat menggunakan google account untuk login.

Pada part 2 ini, akan diteruskan kembali pembuatan aplikasinya supaya lebih bagus. Berikut poin-poin yang akan kita bahas:

1. Integrasi dengan framework Codeigniter.
2. Menyimpan profil pengguna ke dalam database Mysql.
3. Mempercantik tampilan login dengan Materialize Css.

Integrasi dengan framework Codeigniter

Kenapa Codeigniter?
Codeigniter mudah untuk dipelajari bagi pemula, dokumentasinya lengkap, sudah banyak yang membahas, jadi banyak yang ngasih solusi jika mengalami masalah. Rekomended deh bagi yang sedang belajar OOP.

Ok kita mulai ya…

#1. Download Codeigniter dan extract ke dalam folder htdocs Anda. Sebagai contoh rename folder codeigniter menjadi ci_login_app, sehingga struktur folder projek kita seperti berikut:

/path/to/htdocs/ci_login_app
—–application
—–system
—–user_guide
—–index.php

Pada contoh ini, saya menggunakan Codeigniter versi 3.1.2. usahakan sama ya…

#2. Buka file application/config/config.php kemudian sesuaikan pengaturan berikut:

$config['base_url'] = 'http://localhost/ci_login_app/';
$config['encryption_key'] = '5a865c0a9862b8244a3d813253d79dd3'; // ini dapat diisi
$config['composer_autoload'] = TRUE;
$config['sess_save_path'] = sys_get_temp_dir();

#3. Buka file application/config/autoload.php kemudian sesuaikan pengaturan berikut:

$autoload['libraries'] = array('session', 'form_validation');
$autoload['helper'] = array('url');

#3. Copy folder vendor hasil dari tutorial Membuat Aplikasi Login Dengan Google Account dan letakkan didalam folder application/. Copy juga file client_secret.json ke application/.

#4. Buat file controller application/controllers/Auth.php, Kemudian ini isi file Auth.php nya:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class Auth extends CI_Controller 
{
    function __construct()
    {
        parent::__construct();
    }
 
    public function index()
    {
        echo anchor('auth/log_with_google', 'Login dengan Google Account');
    }
 
    public function hai()
    {
        print_r($this->session->userdata('login'));
    }
 
    public function log_with_google()
    {
        # cek sudah login belum
        if (!empty($this->session->userdata('login'))) {
            redirect('auth/hai');
        }
 
        # redirect ke auth url google
        $client = $this->get_google_client();
        $auth_url = $client->createAuthUrl();
        redirect($auth_url);
    }

    public function logout()
    {
        $this->session->set_userdata('login', null);

        redirect('auth');
    }
 
    public function google()
    {
        # kalo sudah login atau tidak ada get code, redirect
        if (!empty($this->session->userdata('login')) OR empty($_GET['code'])) {
            redirect('auth/hai');
        }
 
        $client = $this->get_google_client();
        $client->authenticate($_GET['code']);
 
        # ambil profilenya
        $plus = new Google_Service_Plus($client);
        $profile = $plus->people->get("me");
 
        $this->session->set_userdata('login', $profile);
 
        redirect('auth/hai');
    }
 
    private function get_google_client()
    {
        $client = new Google_Client();
        $client->setAuthConfigFile(APPPATH . 'client_secret.json'); //rename file ini supaya lebih aman nanti
        $client->setRedirectUri("http://localhost/ci_login_app/index.php/auth/google");
        $client->setScopes(array(
            "https://www.googleapis.com/auth/plus.login",
            "https://www.googleapis.com/auth/userinfo.email",
            "https://www.googleapis.com/auth/userinfo.profile",
            "https://www.googleapis.com/auth/plus.me",
        ));
 
        return $client;
    }
}

Sekarang boleh dicoba-coba terlebih dahulu, silakan akses http://localhost/ci_login_app/index.php/auth, Harusnya sudah berjalan dengan baik. Lanjut ke poin berikutnya

Menyimpan profile pengguna ke dalam database Mysql

Poin ini kita akan menyimpan profile yang telah melakukan login dengan google akun ke database Mysql. Pertama kita siapkan dulu tabelnya, berikut SQL untuk membuat tabelnya:

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `nama` varchar(255) NOT NULL,
  `foto` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

#1. Konfigurasi koneksi database.
Buka file application/config/database.php, kemudian atur bagian berikut:

'hostname' => 'localhost',
'username' => 'root',
'password' => 'root',
'database' => 'ci_login_app',
'dbdriver' => 'mysqli',

#2. Edit application/config/autoload.php, tambahkan database pada load libraries
$autoload[‘libraries’] = array(‘session’, ‘form_validation’, ‘database’);

#3. Buat file model application/models/AuthModel.php, dan ini isinya:

<?php
class AuthModel extends CI_Model
{
    public function retrieve($id = "", $username = "")
    {
        if (!empty($id)) {
            $this->db->where('id', $id);
        }
        if (!empty($username)) {
            $this->db->where('username', $username);
        }

        $result = $this->db->get('users');
        return $result->row_array();
    }

    public function create(
        $username = "",
        $password = "",
        $nama     = "",
        $foto     = ""
    ) {
        $this->db->insert('users', array(
            'username' => $username,
            'password' => $password,
            'nama'     => $nama,
            'foto'     => $foto
        ));

        return $this->db->insert_id();
    }
}

Tambahkan autoload model di application/config/autoload.php
$autoload[‘model’] = array(‘AuthModel’);

#4. Edit file application/controllers/Auth.php

public function google()
{
    # kalo sudah login atau tidak ada get code, redirect
    if (!empty($this->session->userdata('login')) OR empty($_GET['code'])) {
        redirect('auth/hai');
    }

    $client = $this->get_google_client();
    $client->authenticate($_GET['code']);

    # ambil profilenya
    $plus = new Google_Service_Plus($client);
    $profile = $plus->people->get("me");
    
    # cek dulu sudah ada belum
    $user = $this->AuthModel->retrieve("", $profile['emails'][0]['value']);
    # jika belum ada, simpan
    if (empty($user)) {
        $user_id = $this->AuthModel->create(
            $profile['emails'][0]['value'],
            "",
            $profile['name']['familyName'],
            $profile['image']['url']
        );

        $user = $this->AuthModel->retrieve($user_id);
    }

    $this->session->set_userdata('login', $user);

    redirect('auth/hai');
}

Sekarang silakan dicoba lagi aplikasinya, harusnya data profile pengguna sudah tersimpan ke dalam database pada tabel users.

Mempercantik tampilan login dengan Materialize Css

Materialize CSS merupakan framework CSS seperti Bootstrap css namun mengusung style dan nuansa berbeda. Materialize menerapkan Material Design yang dibuat oleh google, jadi ketika menggunakan framework css ini, nuansanya seperti menggunakan produk-produk google.

#1. Buat folder baru bernama assets sejajar dengan folder application
#2. Download materialize css di http://materializecss.com/, kemudian letakkan di dalam folder assets
#3. Download button login with google di http://www.dokumenary.net/wp-content/uploads/2016/12/btn-login-with-google.png, dan letakkan di assets/images/
#4. Buat file baru di application/views/login.php, dan ini isinya:

<!DOCTYPE html>
<html>
<head>
    <title>Signin</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="<?php echo base_url('assets/materialize/css/materialize.min.css'); ?>" media="screen,projection" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body class="grey lighten-4">
    <div class="container">
        <div class="row">
            <div class="col s12 m5 offset-m3">
                <h4 class="center">Please sign in...</h4>
                <a href="<?php echo site_url('auth/log_with_google') ?>"><img src="<?php echo base_url('assets/images/btn-login-with-google.png') ?>" width="100%"></a>
                <p class="center">Or<br>Sign with existing account</p>

                <div class="card-panel">
                Ops akun tidak ditemukan
                </div>

                <div class="card">
                    <div class="card-content">
                        <div class="row">
                            <form class="col s12">
                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="email" type="email" class="validate">
                                        <label for="email" data-error="wrong" data-success="right">Email</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="input-field col s12">
                                        <input id="password" type="password" class="validate">
                                        <label for="password">Password</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col s12">
                                        <button class="btn waves-effect waves-light btn-large" type="submit">Login</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/materialize/js/materialize.min.js') ?>"></script>
</body>
</html>

#5. Edit file application/controllers/Auth.php, sesuaikan function index() menjadi seperti berikut:

public function index()
{
    $this->load->view("login.php");
}

Maka akan dijumpai tampilan login seperti berikut:

Cukup keren bukan…

#6. Edit file application/controllers/Auth.php, sesuaikan function hai() menjadi seperti berikut:

public function hai()
{
    $profile = $this->session->userdata('login');
    $this->load->view("profile.php", $profile);
}

#7. Buat file application/views/profile.php, kemudian ini isi filenya:

<!DOCTYPE html>
<html>
<head>
    <title>Hai</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="<?php echo base_url('assets/materialize/css/materialize.min.css'); ?>" media="screen,projection" />
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
 
<body class="grey lighten-4">
    <div class="container">
        <div class="row">
            <div class="col s12 m6 offset-m3">
                <br>
                <div class="card-panel teal">
                    <a href="<?php echo site_url('auth/logout') ?>" title="Logout" class="right"><i class="material-icons white-text">power_settings_new</i></a>
                    <span class="white-text">Hai <?php echo $nama ?> (<?php echo $username; ?>)</span>
                </div>
                
                <script src="https://apis.google.com/js/plusone.js"></script>
                <div id="comments"></div>
                <script>
                gapi.comments.render('comments', {
                    href: window.location,
                    width: '630',
                    first_party_property: 'BLOGGER',
                    view_type: 'FILTERED_POSTMOD'
                });
                </script>
            </div>
        </div>
    </div>
    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url('assets/materialize/js/materialize.min.js') ?>"></script>
</body>
</html>

Maka setelah login, akan dijumpai tampillan seperti berikut:

Ok sudah selesai pembahasan untuk poin kali ini, jika ada yang pelu kita diskusikan silakan berkomentar ya…

Oh ya, jangan lupa subscribe atau like facebook page DokumenAry ya 🙂

Terimakasih

DEMO APLIKASI

Category: Uncategorized

Tags: aplikasi login google, aplikasi login google dengan CI, aplikasi login google dengan codeigniter, halaman login dengan materialze css, login dengan gmail akun, login google, materialzecss