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

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

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/AVvXsEg3H7pNb5IuOT4E9D0cXk2nCPJNiQgWjYSzO0looKmhNtzB-omS5Ls6MAL8kxJ0ocykJ5e18ocTetH6QuyP2cwwcF5tGqzC7KogR4yoz0aoLrsj4MPbaouoQ-lllICroJEAcdVixvCaZ38/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".

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

Cara Mengatasi require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead

Apakah anda sedang mengalami masalah ketika menginstall library menggunakan Composer dimana muncul tampilan error "require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead". Tenang bukan hanya anda yang pernah mengalami masalah demikian.

Singkat cerita waktu itu saya hendak menginstall library google apiclient, sebelum menginstall library saya mengupgrade composer dari versi 1 ke versi 2.0. Permasalahan kemudian muncul ketika saya mulai menjalankan perintah composer require google/apiclient:"^2.0", yang muncul adalah tulisan require-dev.mikey179/vfsStream is invalid, it should not contain uppercase characters. Please use mikey179/vfsstream instead.
 

 

Setelah mencari di google akhirnya ketemu juga solusinya. Caranya dengan membuka file composer.json yang ada di folder root website.
 

 

Ubah baris "mikey179/vfsStream": "1.1.*", hingga semua menjadi huruf kecil "mikey179/vfsstream": "1.1.*", kemudian save. Kemudian coba untuk menginstall ulang library yang hendak dipasang dan lihat hasilnya.

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

Sejarah Komputer Generasi 1, 2, 3, 4, 5 Beserta Ciri-cirinya

Komputer merupakan alat serbaguna yang tidak bisa di pisahkan dari kehidupan manusia di zaman modern ini. Penggunaan komputer hampir merata disetiap bidang mulai dari bidang pendidikan, hingga bidang kesehatan tidak luput dari yang namanya komputerisasi.

Namun tahukah kalian sebelum menjadi seperti sekarang ini, komputer mengalami revolusi dari generasi ke generasi. Tercatat ada 5 generasi komputer yang penting untuk diketahui. Setiap generasi memiliki ciri dan tentunya meningkatkan kinerja ataupun kualitas dari komputer generasi sebelumnya. 

 

Daftar Isi : 

1. Komputer Generasi Pertama

2. Komputer Generasi Kedua

3. Komputer Generasi Ketiga

4. Komputer Generasi Keempat

5. Komputer Generasi Kelima

Berikut penjelasan komputer dari generasi pertama hingga kelima beserta ciri-cirinya :

1. Komputer Generasi Pertama

Tahun 1941, seorang insinyur asal Jerman yang bernama Konrad Zuse membangun sebuah komputer, Z3, untuk mendisain pesawat terbang dan juga peluru kendali. Komputer pada Generasi pertama ini dapat dikarakteristikan dengan fakta bahwa instruksi operasi dibuat secara spesifik untuk tugas tertentu. Setiap komputer memiliki program kode-biner yang berbeda yang disebut dengan “bahasa mesin” dalam bahasa inggrisnya adalah “machine language”. Hal ini menjadikan komputer sulit untuk diprogram dan membatasi kecepatannya. Ciri lain komputer generasi pertama adalah pemakaian tube vakum (yang menjadikan komputer pada masa itu tampak berukuran sangat besar) dan silinder magnetik yang berfungi untuk sebagai penyimpan data.

Ciri-ciri komputer generasi pertama :

• Silinder magnetik untuk menyimpan data
• Komponen yang dipergunakannya adalah tabung hampa udara (Vacum tube) untuk sirkuitnya.
• Kapasitas penyimpanan kecil.
• Program cuma bisa dibuat dengan bahasa mesin : Assembler.
• Ukuran fisik komputer besar, memerlukan ruangan yang luas.
• Cepat panas.
• Proses kurang cepat.
• Memerlukan dya listrik yang besar.
• Orientasi pada aplikasi bisnis.

2. Komputer Generasi Kedua

Tahun 1948,ada 3 orang fisikawan Amerika (Walter Houser Brattain, Jhone Barden, William Brandford penemu transistor sangat berpengaruh terhadap perkembangan komputer masa itu. Transistor menggantikan tube vakum di televisi, radio, dan komputer. sehingga mengakibatkan, berubahnya ukuran mesin-mesin elektrik yang tadinya berukuran besar menjadi ukuran yang lebih kecil. generasi kedua, yaitu komputer yang menggunakan Transistor sebagai Processornya (1956 - 1958 M). Transistor mulai digunakan di dalam komputer mulai pada tahun 1956.

Beberapa bahasa pemrograman mulai bermunculan pada saat itu. Bahasa pemrograman Common Business-Oriented Language (COBOL) dan Formula Translator (FORTRAN) mulai umum digunakan
Berbagai macam karir baru bermunculan (programmer, analyst, dan ahli sistem komputer). Industri piranti lunak juga mulai bermunculan dan berkembang pada masa itu.


Ciri-ciri komputer generasi kedua :

• Ukuran fisik lebih kecil dibanding komputer generasi pertama karena telah menggunakan transistor pada sirkuitnya
• Menggunakan memori yang cukup besar
• Telah menggunakan media penyimpanan luar berbentuk removable disk seperti megnetic disk dan magnetic tape
• Penggunaan aplikasinya lebih luar
• Proses operasinya lebih cepat
• Penggunaan daya lebih kecil
• Program yang dibuat dapat menggunakan bahasa tingkat tinggi seperti FORTAN, COBOL, dan ALGOL.

Beberapa contoh dari komputer generasi kedua adalah IBM 7080, IBM 1400, UNIVAC SS90, UNIVAC III, PDP-1, PDP-8, Burroghts 200,dan lain sebagainya

3. Komputer Generasi Ketiga

Walaupun transistor dalam banyak hal mengungguli tube vakum, namun transistormenghasilkan panas yang cukup besar, yang dapat berpotensi merusak bagian-bagian internalkomputer. Batu kuarsa (quartz rock) menghilangkan masalah ini. Jack Kilby, seoranginsinyur di Texas Instrument, mengembangkan sirkuit terintegrasi (IC : integrated circuit pada tahun 1958.

IC mengkombinasikan tiga komponen elektronik dalam sebuah piringansilikon kecil yang terbuat dari pasir kuarsa. Pada ilmuwan kemudian berhasil memasukkanlebih banyak komponen-komponen ke dalam suatu chip tunggal yang disebut semikonduktor.Hasilnya, komputer menjadi semakin kecil karena komponen-komponen dapat dipadatkandalam chip. Kemajuan komputer generasi ketiga lainnya adalah penggunaan sistem operasi(operating system) yang memungkinkan mesin untuk menjalankan berbagai program yang  berbeda secara serentak dengan sebuah program utama yang memonitor dan mengkoordinasimemori komputer. 

Ciri-ciri komputer generasi ketiga:

 

• Penggunaan IC membuat kinerja komputer menjadi lebih cepat dan tepat.
• Kapasitas memori lebih besar, dan dapat menyimpan ratusan ribu karakter (sebelumnya hanya puluhan ribu).
• Menggunakan media penyimpanan luar disket magnetik (external disk) yang sifat pengaksesan datanya secara acak (random access) dengan kapasitas besar (jutaan karakter).
• Penggunaan listrik lebih hemat.
• Kemampuan melakukan multiprocessing dan multitasking.
• Telah menggunakan terminal visual display dan dapat mengeluarkan suara.
• Kemampuan melakukan komunikasi dengan komputer lain.

4. Komputer Generasi Keempat

Setelah IC, tujuan pengembangan menjadi lebih jelas: mengecilkan ukuran sirkuit dankomponen-komponen elektrik. Large Scale Integration (LSI) dapat memuat ratusankomponen dalam sebuah chip. Pada tahun 1980-an, Very Large Scale Integration (VLSI)memuat ribuan komponen dalam sebuah chip tunggal.Ultra-Large Scale Integration (ULSI) meningkatkan jumlah tersebut menjadi jutaan.

Kemampuan untuk memasang sedemikian banyak komponen dalam suatu keping yang berukurang setengah keping uang logam mendorong turunnya harga dan ukuran komputer.Hal tersebut juga meningkatkan daya kerja, efisiensi dan keterandalan komputer.

Chip Intel4004 yang dibuat pada tahun 1971membawa kemajuan pada IC dengan meletakkan seluruhkomponen dari sebuah komputer (central processing unit, memori, dan kendali input/output)dalam sebuah chip yang sangat kecil. Sebelumnya, IC dibuat untuk mengerjakan suatu tugastertentu yang spesifik. Sekarang, sebuah mikroprosesor dapat diproduksi dan kemudiandiprogram untuk memenuhi seluruh kebutuhan yang diinginkan.

Tidak lama kemudian, setiap piranti rumah tangga seperti microwave, oven, televisi, dan mobil dengan electronic fuelinjection (EFI) dilengkapi dengan mikroprosesor. 

Ciri-ciri komputer generasi keempat :

• Menggunakan LSI atau large scale integration
• Pengembangannya merambah ke dalam dunia kompter micro / micro computer
• Bentuknya atau ukurannya lebih kecil dibandingkan dengan generasi sebelumnya

5. Komputer Generasi Kelima

"Komputer generasi kelima" adalah kata kunci yang ditetapkan oleh ICOT (Institute for new generation COmputer Technology, 1982-1994), sebuah proyek penelitian untuk komputer generasi mendatang yang dilakukan oleh Kementerian Perindustrian dan Perdagangan Internasional (saat itu) . ICOT mengklasifikasikan evolusi komputer menjadi generasi pertama (tabung vakum), generasi kedua (transistor), generasi ketiga (IC: sirkuit terintegrasi), dan generasi keempat (LSI: sirkuit terintegrasi skala besar), dan harus datang berikutnya. Komputer generasi kelima didefinisikan sebagai realisasi kecerdasan buatan (AI).

Ciri-ciri komputer generasi kelima :

• Ukuran komputer yang semakin kecil dan minimalis
• Menggunakan teknologi LSI, yang tentu saja memiliki banyak pengembangan
• Kemampuan multimedia jauh lebih baik dibandingkan dengan generasi keempat
• Pemrosesan informasi yang jauh lebih cepat

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

Pengertian PHP, Kelebihan, Kekurangan, Serta Contoh Penggunaannya

Pada proses back-end developer seorang web developer harus memahami beberapa bahasa pemrograman seperti PHP, SQL, Java, dan lain-lain. Pada bagian back-end developer bahasa pemrograman yang paling banyak digunakan adalah PHP (Hypertext Preprocessor).

Kemampuan yang dimiliki PHP mampu membuat sebuah web menjadi Dinamis, selain itu PHP merupakan Open source dan mampu dijalankan disemua system operasi. Bahkan pada HP yang memiliki web Browser  dapat menggunakan program PHP. Kelebihan lainnya dari PHP adalah lebih cepat dibandingkan dengan ASP maupun Java, mendukung banyak paket database seperti MySQL, Oracle, PostgrSQL, dan lain-lain. Serta yang paling menguntungkan dalam penggunaan PHP adalah banyaknya dokumentasi, referensi dan developer yang membantu dalam mengembangkannya.

A.    Pengertian dan sejarah PHP (Hypertext Preprocessor)

PHP adalah singkatan dari Hypertext Preprocessor yang merupakan bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak digunakan untuk memprogramkan situs web dinamis. PHP juga dapat digunakan untuk membangun sebuah CMS.
PHP pertama kali dibuat oleh Rasmus Lerdroft, seorang programmer C. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web. Jadi semula PHP digunakannya untuk menghitung jumlah pengunjung di dalam webnya.

Kemudian ia mengeluarkan Hypertext Preprocessor Tools versi 1.0 secara gratis. Versi ini pertama kali keluar pada tahun 1995. Isinya adalah sekumpulan script PERL yang dibuatnya untuk membuat halaman webnya menjadi dinamis. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI, kependekan dari Hypertext Preprocessing’/Form Interpreter.
Dengan perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut mengembangkan PHP.Kemudian pada tahun 1996 ia mengeluarkan PHP versi 2.0 yang kemampuannya telah dapat mengakses database dan dapat terintegrasi dengan HTML. Pada rilis ini interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.Pada tahun 1998 tepatnya pada tanggal 6 Juni 1998 keluarlah PHP versi 3.0 yang dikeluarkan oleh Rasmus sendiri bersama kelompok pengembang softwarenya.

PHP versi 4.0 keluar pada tanggal 22 Mei 2000 merupakan versi yang lebih lengkap lagi dibandingkan dengan versi sebelumnya. Perubahan yang paling mendasar pada PHP 4.0 adalah terintegrasinya Zend Engine yang dibuat oleh Zend Suraski dan Andi Gutmans yang merupakan penyempurnaan dari PHP scripting engine. Yang lainnya adalah build in HTTP session, tidak lagi menggunakan library tambahan seperti pada PHP. Tujuan dari bahasa scripting ini adalah untuk membuat aplikasi-aplikasi yang dijalankan di atas teknologi web. Dalam hal ini, aplikasi pada umumnya akan memberikan hasil pada web browser, tetapi prosesnya secara keseluruhan dijalankan web server.

PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.  Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan besar. Versi ini juga memasukkan model pemrograman berorientasi objek ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek.

B. Kelebihan PHP

Banyak sekali kelebihan yang dimiliki PHP dibandingkan dengan bahasa pemrograman yang lain, Diantaranya :

1. Bisa membuat Web menjadi Dinamis.
2. PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.
3. Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Operasi bahkan HP yang mempunyai Web Browser dapat menggunakan program PHP.
4. Aplikasi PHP lebih cepat dibandingkan dengan ASP maupun Java.
5. Mendukung banyak paket Database seperti MySQL, Oracle, PostgrSQL, dan lain-lain.
6. Bahasa pemrograman PHP tidak memerlukan Kompilasi / Compile dalam penggunaannya.
7. Banyak Web Server yang mendukung PHP seperti Apache, Lighttpd, IIS dan lain-lain.
8. Pengembangan Aplikasi PHP mudah karena banyak Dokumentasi, Refrensi & Developer yang membantu dalam pengembangannya.
9. Banyak bertebaran Aplikasi & Program PHP yang Gratis & Siap pakai seperti WordPress, PrestaShop, dan lain-lain.

C. Kekurangan PHP

Selain kelebihan PHP, PHP juga mempunyai kekurangan. Namun masalah kekurangannya sangat sedikit. Diantaranya :

1. PHP Tidak mengenal Package.
2. Jika tidak di encoding, maka kode PHP dabat dibaca semua orang & untuk meng encodingnya dibutuhkan tool dari Zend yang mahal sekali biayanya.
3. PHP memiliki kelemahan keamanan. Jadi Programmer harus jeli & berhati-hati dalam melakukan pemrograman & Konfigurasi PHP.

D. Contoh penggunaan PHP

Berikut adalah format dasar pemanggilan, dan pengembalian nilai fungsi:

$varibel_hasil_fungsi = nama_fungsi(argumen1, argumen2, argumen3)

• $varibel_hasil_fungsi adalah variabel yang akan menampung hasil pemrosesan fungsi. Tergantung fungsinya, hasil dari sebuah fungsi bisa berupa angka, string, array, bahkan objek.
• Nama_fungsi adalah nama dari fungsi yang akan dipanggil
• argumen1, argumen2 adalah nilai inputan fungsi. Banyaknya argumen yang dibutuhkan, tergantung kepada fungsi tersebut. Jika sebuah fungsi membutuhkan argumen 2 buah angka, maka kita harus menginputnya sesuai dengan aturan tersebut, atau jika tidak, PHP akan mengeluarkan error.

Sebagai contoh, PHP menyediakan fungsi akar kuadrat, yakni sqrt(), berikut adalah cara penggunaannya:

	
<?php
$akar_kuadrat = sqrt(49);
echo "Akar kuadrat dari 49 adalah $akar_kuadrat";
// Akar kuadrat dari 49 adalah 7
?>	
	

Dalam contoh diatas, fungsi sqrt() akan menghitung akar kuadrat dari nilai argumen yang diinput. Saya menambahkan argumen 49 sebagai inputan. Nilai hasil dari fungsi sqrt(49), selanjutnya di tampung dalam variabel $akan_kuadrat, yang kemudian ditampilkan ke dalam web browser.

Selain ditampung di dalam variabel, kita bisa menampilkan hasil fungsi langsung ke web browser, seperti contoh berikut:

	
<?php
echo "12 pangkat 2 adalah: ".pow(12,2);
// 12 pangkat 2 adalah: 144
?>
	

Fungsi pow() adalah fungsi pemangkatan matematika bawaan PHP. Fungsi ini membutuhkan 2 argumen, argumen pertama adalah nilai awal yang ingin dihitung, dan argumen kedua adalah nilai pangkat. Pow(12,2) sama dengan 12 kuadrat.

Perlu juga diperhatikan adalah tipe parameter yang dibutuhkan oleh sebuah fungsi. Seperti 2 contoh kita diatas, fungsi sqrt() dan pow() adalah fungsi matematika. Kedua fungsi ini hanya bisa memproses parameter dengan tipe angka (interger dan float). Jika anda memasukkan parameter jenis string, maka PHP akan mengeluarkan error.

Jumlah dan urutan argumen juga harus sesuai dengan yang dibutuhkan oleh fungsi. Jika sebuah fungsi hanya membutuhkan 1 argumen, maka kita tidak bisa menambahkan argumen kedua, kecuali ada argumen yang bersifat opsional (dapat diabaikan).

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

Ketahui Pengertian Flip-flop dan Jenis-jenisnya

Flip-Flop atau latch merupakan sirkuit elektronik yang memiliki dua arus stabil dan dapat digunakan untuk menyimpan informasi. Sebuah flip-flop merupakan multivibrator-dwistabil. Sirkuit dapat dibuat untuk mengubah arus dengan sinyal yang dimasukkan pada satu atau lebih input kontrol dan akan memiliki satu atau dua output. Ini merupakan elemen penyimpanan dasar pada Logika Sekuensial. Flip-flop dan latch merupakan bangunan penting dalam sistem elektronik digital yang digunakan pada komputer, komunikasi dan tipe lain dari sistem.

Daftar Isi :

Jenis-jenis Flip Flop

1. Jk Flip-flop

2. Rs Flip-flop

3. D Flip-flop

4. CRS Flip-flop

5. T Flip-flop
 

Jenis-jenis Flip-Flop 

1. JK Flip-Flop

Flip-Flop yang satu ini mempunyai 3 inputan yaitu terdiri dari :

- J
- K
- dan Clock

Kelebihan JK Flip-flop adalah tidak adanya kondisi terlarang atau yang berarti di beri berapapun inputan asalkan terdapat clock maka akan terjadi perubahan pada keluarannya / outputnya

2. RS Flip - flop

RS FF ini adalah dasar dari semua Flip-flop yang memiliki 2 gerbang inputan / masukan yaitu R dan S.  R artinya "RESET" dan S artinya "SET".  Flip-flop yang satu ini mempunyai 2 keluaran / outputyaitu Q dan Q`.


Bila S diberi logika 1 dan R diberi logika 0, maka output Q akan berada pada logika 0 dan Q not pada logika 1. Bila R diberi logika 1 dan S diberi logika 0 maka keadaan output akan berubah menjadi Q berada pada logik 1 dan Q not pada logika 0. Sifat paling penting dari Flip-Flop adalah bahwa sistem ini dapat menempati salah satu dari dua keadaan stabil yaitu stabil I diperoleh saat Q =1 dan Q not = 0, stabil ke II diperoleh saat Q=0 dan Q not = 1.

3. D FLIP - FLOP

D Flip-flop merupakan salah satu jenis Flip-flop yang dibangun dengan menggunakan Flip-flop RS. Perbedaan dengan Flip-flop RS terletak pada inputan R, pada D Flip-flop inputan R terlebih dahulu diberi gerbang NOT. maka setiap masukan ke D FF ini akan memberi keadaan yang berbeda pada input RS, dengan demikian hanya terdapat 2 keadaan "SET" dan "RESET"  S=0 dan R=1 atau S=1 dan R=0, jadi dapat disi.

4. CRS FLIP - FLOP

Crs Flip-flop adalah clocked RS-FF yang dilengkapi dengan sebuah terminal pulsa clock. Pulsa clock ini berfungsi mengatur keadaan Set dan Reset. Bila pulsa clock berlogik 0, maka perubahan logik pada input R dan S tidak akan mengakibatkan perubahan pada output Q dan Qnot. Akan tetapi apabila pulsa clock berlogik 1, maka perubahan pada input R dan S dapat mengakibatkan perubahan pada output Q dan Q not.

5. T FLIP - FLOP

T Flip-flop merupakan rangkaian flip-flop yang telah di buat  dengan menggunakan flip-flop J-K yang kedua inputnya dihubungkan menjadi satu maka akan diperoleh flip-flop yang memiliki watak membalik output sebelumnya jika inputannya tinggi dan outputnya akan tetap jika inputnya rendah.

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More

Berikut Contoh Perangkat Lunak Bahasa Pemrograman Berupa IDE

IDE atau Integrated Development Environment merupakan perangkat lunak komputer yang memiliki fasilitas (tools) yang dapat digunakan untuk membangun perangkat lunak. Secara simpelnya IDE aplikasi yang dapat membuat aplikasi lainnya.

Perangkat lunak IDE mencakup beberapa aspek seperti berikut : 

1. Editor 

Editor merupakan fasilitas yang akan membantu pengguna dalam menuliskan kode pemrograman. 

2. Compiler 

Compiler merupakan fasilitas pengecekan sintaks yang telah di tuliskan serta merubah kode yang ditulis menjadi bahasa mesin yang dapat dipahami oleh komputer.

3. Linker

Linker merupakan fasilitas yang berguna untuk menyatukan data binari dari kode sumber yang telah dihasilkan pada tahap compiler sehingga menjadi satu kesatuan program yang dapat di eksekusi.

4. Debuger 

Debuger merupakan fasilitas untuk mengetes jalannya program yang telah dibuat. Dengan debuger programer dapat melihat bug ataupun kesalahan apa saja yang ada ketika program berjalan.

Berikut beberapa contoh IDE yang dapat digunakan untuk membangun aplikasi lainnya. 

1. Borland C++

Borland C++ merupakan aplikasi pemrograman C++ yang dibuat oleh Borland Internasional dan digunakan untuk menulis program dengan bahasa pemrograman C++.

2. Android Studio

Seperti namanya android studio merupakan IDE yang digunakan untuk membangun aplikasi Mobile. Meskipun namanya Android Studio, aplikasi ini tidak hanya dapat digunakan untuk membangun aplikasi Android, sebab dengan kemunculan flutter yang dapat di kombinasikan, Android Studio juga akhirnya bisa digunakan untuk membangun aplikasi iOS. 

Bahasa utama yang digunakan dalam Android Studio adalah Java dan Kotlin.

3. Eclipse

Eclipse merupakan IDE serbaguna yang dapat digunakan untuk membangun aplikasi mulai dari desktop, android, hingga Web. Bahasa pemrograman utama yang digunakan dalam Eclipse adalah Java. Sebelum kemunculan Android Studio, aplikasi ini sempat menjadi primadona dalam pembuatan aplikasi Android dikarenakan banyaknya documentasi yang bertebaran di Internet terutama YouTube.

4. Xcode

Xcode merupakan IDE yang disediakan oleh Apple secara gratus untuk membuat dan mengembangkan aplikasi untuk iOS, OS X, dan watchOS. Namun sayangnya aplikasi ini hanya untuk pengguna Mac. Pengguna dapat mengunduh Xcode melalui MacApp Store.

Adapun bahasa pemrograman yang digunaka dalam IDE ini adalah Objective-C atau Swift. Baca juga Mengenal Bahasa Pemrograman Objective-C.

5. Visual Studio 

Visual Studio merupakan aplikasi IDE yang dirilis oleh Microsoft untuk pengembangan aplikasi Windows. Aplikasi ini dapat dikembangkan dalam bahasa pemrograman Visual Basic, C++, dan C#.

6. Unity

Unity merupakan IDE yang sangat terkenal untuk mengembangkan aplikasi maupun game untuk android, iOS, hingga desktop. Unity memungkinkan developer untuk membuat game 3D, ataupun 2D. Terdapat 3 bahasa pemrograman utama yang digunakan dalam unity yaitu C#, JavaScript, dan BOO.

7. Qt Creator

Qt Creator merupakan kerangka kerja lintas platform yang dapat berjalan di Windows, MacOS, dan Linux. Didalam aplikasi ini developer dapat menggunakan pustaka Qt dalam mengembangkan aplikasi. Aplikasi ini dapat digunakan secara gratis karena bersifat open source.

Itulah beberapa contoh perangkat lunak bahasa pemrograman berupa IDE yang berhasil kami rangkum.

https://codingrakitan.blogspot.com/search?updated-max=2021-03-16T00:15:00-07:00&max-results=7&reverse-paginate=true

Read More