X

Saturday, March 16, 2019

Cara Membuat Fitur Login Menggunakan Akun Google pada Website


Hai teman-teman codrat semua semoga kalian sehat selalu. Kali ini saya ingin berbagi tentang cara membuat login menggunakan akun google pada website yang kita miliki. Dengan adanya fitur ini pengunjung web tidak akan susah untuk mendaftar dan akan membuat orang yang tadinya malas mendafatar jadi turut mendaftar karena kemudahannya.

Google Sign api yang akan kita gunakan agar nantinya calon pendaftar hanya tinggal memasukkan akun google mereka. Anda sebagai pemilik web bisa menyimpan data mereka kedalam database atau tidak. Adapun data yang bisa anda simpan adalah email, nama lengakp, nama depan, nama belakang, id, hingga gambar thumb.


Jangan berharap yah untuk bisa mendapatkan password mereka karena pihak google sendiri membatasinya. Selain tidak dapat password pengunjung salah satu hal yang susah dalam pembuatan login goole ini, anda harus memiliki hosting dan domain.

Susah jika anda hanya ingin menggunakan localhost, sebab biasnya aplikasi akan error. Tapi teman-teman tidak perlu khawatir, beacause kita bisa menggunakan penyedia hosting gratis seperti 000webhost.com.

Jika anda belum memiliki akun di 000webhost.com, silahkan buat terlebih dahulu. Jika sudah punya silahkan anda lanjutkan untuk membuat api Google Sign.

Membuat Hosting dan domain di 000webhost.com

1. Buka halaman https://id.000webhost.com/ dan silahkan login.

2. Setelah anda berhasil login silahkan cari tanda tambah seperti pada gambar kemudian klik.



3. Isi pertanyaan kemudian klik next atau selanjutnya

4. Isi nama website (jangan ada spasi karena nanti akan eror), pilih password default atau buat sendiri. Setelah itu klik Buat.



5. Jika website anda sudah di buat maka akan tampil alamat web anda. Sekarang anda punya domain dan hosting secara gratis (ingat karena ini gratis dia memiliki jangka waktu tertentu). Silahkan catat alamat domain gratis anda ini.

Mendaftarkan Aplikasi kedalam Google Sign

Sebelum kita membuat koding login menggunakan google sebelumnya kita perlu mendapatkan Client Id dengan cara sebagai berikut :

1. Buka halaman https://console.cloud.google.com/ dan login menggunakan akun google anda.

2. Klik buat pada menu Kredensial.

3. Masukkan nama project dan lokasi (biarkan default saja) selanjutnya klik buat.



4. Selanjutnya akan muncul beberapa menu di halaman utama, klik Layar persetujuan OAuth.



5. Isi nama aplikasi sesuai keinginan anda dan jangan lupa isi gambar. Untuk form lainnya silahkan isi sesuai domain yang telah di daftarkan tadi, seperti gambar di bawah kemudian klik simpan.



6. Kembali ke menu Kredensial silahkan klik button biru yaitu Buat kredensial dan pilih ID Klien OAuth.



7. Silahkan pilih aplikasi web dan isi Asal JavaScript yang sah : nama_domain dan URI pengalihan yang sah : nama_domain/login.php lalu klik buat.

8. Anda akan mendapatkan kode ID Klien dan klien, silahkan disimpan baik-baik kalau bisa simpan menggunakan aplikasi notepad atau sebangsanya.

Tahap pengkoden

Ada 3 file yang harus anda buat yaitu :

  • index.php
  • login.php
  • home.php


index.php



<!DOCTYPE html>

<html>

<head>

    <title>Login Menggunakan Google</title>

    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="https://apis.google.com/js/platform.js" async defer></script>

    <meta name="google-signin-client_id" content="PASTE_Clien_ID_disini" >

</head>

<body>


<div class="container">

    <div class="row">

        <div class="col-md-4 col-md-offset-4">

            <div class="account-box">

                <div class="logo">

                    <center>codingrakitan.blogspot.com</center>

                </div>

                <form class="form-signin" action="#">

                <div class="form-group">

                    <input type="text" class="form-control" placeholder="Email" required autofocus />

                </div>

                <div class="form-group">

                    <input type="password" class="form-control" placeholder="Password" required />

                </div>

                <label class="checkbox">

                    <input type="checkbox" value="remember-me" />

                    Keep me signed in

                </label>

                <button class="btn btn-lg btn-block purple-bg" type="submit">

                    Sign in</button>

                </form>

                <a class="forgotLnk" href="http://www.jquery2dotnet.com">I can't access my account</a>

                <div class="or-box">

                    <span class="or">OR</span>

                    <div class="row">

                        <div class="col-md-12">

                            <center><div class="g-signin2" data-onsuccess="onSignIn"></div></center><br>

                        </div>

                    </div>

                </div>

                <div class="or-box row-block">

                    <div class="row">

                        <div class="col-md-12 row-block">

                            <a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-block">Create New Account</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>


<script type="text/javascript">

    function onSignIn(googleUser) {

      var profile = googleUser.getBasicProfile();


      if(profile){

          $.ajax({

                type: 'POST',

                url: 'login.php',

                data: {id:profile.getId(), name:profile.getName(), email:profile.getEmail(), image:profile.getImageUrl()}

            }).done(function(data){

                console.log(data);

                window.location.href = 'home.php';

            }).fail(function() {

                alert( "Posting failed." );

            });

      }


    }

</script>


</body>

</html>


login.php

<?php


    session_start();


    $_SESSION["id"] = $_POST["id"];

    $_SESSION["name"] = $_POST["name"];

    $_SESSION["email"] = $_POST["email"];
    $_SESSION["image"] = $_POST["image"];


    echo "Updated Successful";

?>


home.php



<?php
session_start();
?>
<!DOCTYPE html>

<html>

<head>

    <title>Welcome to ItSolutionStuff.com</title>
    <style type="text/css">
        body{
            text-align: center;
        }
    </style>
</head>

<body>

<h1>Website Home Page</h1>
<img src="<?php echo $_SESSION['image'];  ?>">
<p><strong>Id: </strong> <?php echo $_SESSION['id'];  ?> </p>

<p><strong>Name: </strong><?php echo $_SESSION['name'];  ?></p>

<p><strong>Email: </strong><?php echo $_SESSION['email'];  ?></p>
<a href="https://www.google.com/accounts/Logout?continue=https://appengine.google.com/_ah/logout?continue=http://codingrakitan.000webhostapp.com/" >Sign out</a>

</body>

</html>


Tahap upload

Setelah semua selesai di buat sekarang saatnya mangapload file kedalam hosting gratis kita yang sudah di buat tadi seperti berikut :

1. Buka halaman https://id.000webhost.com/members/website/list dan klik website manager lalu file manager.



2. Pilih uggah file sekarang maka anda akan di arahkan masuk kedalam file manager.



3. Silahkan klik ikon upload files kemudian select files. Ketika jendela baru terbuka silahkan cari 3 file yang telah dibuat tadi kemudian tekan ok dan selanjutnya tekan upload. Tunggu hingga proses upload selesai.



4. Buka halaman web anda dan lihat hasilnya ketika sign google di klik akan seperti berikut. Serta ketika sukses melakukan login.



Sekarang aplikasi yang anda buat telah berhasil, tinggal anda terapkan pada hosting/domain berbayar anda. Jika ada pertanyaan silahkan kirimkan melalui kolom komentar di bawah. Terima Kasih.

Cara Menyimpan dan Menjalankan Perintah CMD


Hai sobat sekalian kali ini saya ingin berbagi bagaimana caranya menyimpan perintah cmd, dan menjalankan perintah tersebut dengan cara di klik. Konsepnya sama seperti membuka aplikasi.

Saya mencari cara ini dikarenakan saya sering menggunakan bantuan emulator Nox untuk running aplikasi Android Studio. Jika kalian juga pengguna android studio pastinya sudah tahu untuk menjalankan aplikasi buatan kita ke dalam emulator Nox diperlukan konfigurasi melalui cmd dengan perintah "nox_adb.exe connect 127.0.0.1:5037" atau "nox_adb.exe connect 127.0.0.1:62001". Akan sangat menyita waktu apa bila ingin run aplikasi, makanya saya berinisiatif menyimpan perintah CMD ini dan bila ingin digunakan tinggal di klik.

Cara pembuatannya sangat mudah silahkan ikuti langkah berikut :

1. Buka aplikasi notepad


2. Ketikkan "cd C:\Program Files (x86)\Nox\bin" kemudian di baris baru ketikkan nox_adb.exe connect 127.0.0.1:5037 dan baris terakhir dengan cmd.exe

3. Kurang lebih yang harus anda ketikkan pada notepad seperti pada gambar :



4. Selanjutnya silahkan simpan file dengan extensi "bat" contoh Run.bat dan simpan di folder yang anda inginkan.

5. Terakhir silahkan test dengan cara klik 2x pada file, bila cmd berjalan maka selamat anda berhasil menyimpan perintah CMD.



Anda jngan lupa menyesuaikan folder nox anda dengan perintah yang berwarnah merah di atas karena jika salah, maka hasilnya akan percuma. Jika anda ingin agar cmd otomatis ditutup setelah perintah dijalankan maka silahkan hapus cmd.exe.

Thursday, March 14, 2019

Cara Membuka Aplikasi WhatsApp Melalui Aplikasi Buatan di Android Studio


Tahukah kalian para programer Android bahwasahnya aplikasi yang kita buat di Android Studio bisa digunakan untuk membuka aplikasi lain. Aplikasi bawahan seperti kamera, browser internet, pesan, dan lain-lain.
Pada kesempatan kali ini saya akan membagikana kepada teman-teman bagaimana caranya membuka aplikasi WA melalui aplikasi yang telah kita buat di Android Studio.
Cara kerjanya sangat simple, begitupula dengan kodingnya. Nantinya teman-teman tinggal edit sesuai dengan keinginan teman-teman.

Skema Flowchartnya seperti ini :
Aplikasi ini terdiri dari satu class utama dan satu layout untuk memberikan tampilan ketika aplikasi di buka. Untuk pembuatannya silahkan ikuti langkha-langkah di bawah ini :

1. Buat project baru dengan nama "Send WA" dengan format seperti berikut :
  • Name : Send WA
  • Package Name : com.s.sendwa
  • Language : Java
  • Minimum API Level : API 17:Android 4.2(Jelly Bean)
2. Setelah Project baru selesai di buat sekarang waktunya untuk tahapan inti yaitu mengedit class dan tampilan aplikasi. File yang harus di edit adalah MainActivity.java dan activity_main.xml.

MainActivity.java


Silahkan edit isi dari file java ini seperti berikut :
public class MainActivity extends AppCompatActivity {

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

    }
    public void bukaWA(View v) {
        Intent i = getPackageManager().getLaunchIntentForPackage("com.whatsapp");
        startActivity(i);
    }

}


activity_main.xml

Untuk tampilannya sendiri silahkan edit file activity_main.xml dengan kode seperti di bawah ini :

<?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:padding="20dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#2A5FFF"
        android:onClick="bukaWA"
        android:text="Buka WA"
        android:textColor="@android:color/white" />
</RelativeLayout>


Terakhir silahkan ru aplikasi anda di emulator atau langsung kedalam smartphone android anda. Tapi sebelumnya pastikan aplikasi Whatsapp sudah terinstal, jika sudah maka silahkan run. Hasil run akan seperti dibawah ini :