Membuat Web Serive Dengan Slim Framework part 1


gambar dari :slimframework.com

jumpa lagi sobat..

Artikel kali ini saya akan menulis tentang web service dengan Slim framework,
apa itu web service bisa dibaca pada wiki. secara singkatnya web service merupakan yang memberi jembatan agar semua platform dapat berkomunikasi,
keuntungan lain dari web service adalah seorang programmer tidak perlu membuat database untuk semua platform yang sedang di kerjakan, jadi cukup membuat web service untuk mengakses database dan web service memberikan layanan agar semua platform mengaksesnya, kebanyakan web service menampikan data berupa json.

untuk membuat web service saya akan menggunakan slim framework yang kebanyakan digunakan untuk membangun web service.

ok.. ok.. sudah selelai basa basinya..
sebulum memulai pastikan dikomputer kalian sudah terinstall web serve.. kalian bisa menggunakan xampp ataupun wamp

berikut langkah - langkahnya:

Install Slim framework
untuk bisa menginstalnya kali butuh composer, composer merupakan dependency manager php, kalian mengunjungi web-nya composer untuk cara install composernya,
bila sudah selesai installnya silahkan menuju ke folder htdoc/www pada web service lalu buat folder web_service selanjutnya buat file composer.json dan tuliskan berikut :

{
    "require": {
        "slim/slim": "2.*"
    }
} 

silakan buka terminal/cmd setelah berada pada path htdoc/www ketikan 

composer install

setelah selesai menginstall saatnya koding..

Membuat web service

berikut struktur project setelah terinstall slim :
buat file index.php dan .htaccess sebagai file utama seperti pada gambar diatas...


RewriteEngine On



RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^ index.php [QSA,L]


kegunaan file file .htaccess adalah untuk konfigurasi web server apache, dimana slimframework menggunakan rewrite engine untuk memanggil endpoint-endpoint yang ada, maka dari itu perlu ditambahkan htaccess..

lakukan percobaan mengunakan slim untuk mamangil string.. tulis script dibawah ini pada index.php dan panggil pada browser...


<?php

require 'vendor/autoload.php';
$app = new \Slim\Slim();

$app->get('/', function(){
    echo "tes_semua";

});


$app->run();

script diatas akan menghasilkan seperti pada gambar dibawah ini..
sekarang coba dengan menggunakan parameter.. seperti script dibawah ini..

<?php



require 'vendor/autoload.php';

$app = new \Slim\Slim();



$app->get('/hello/:name', function($name){

    echo "hello, $name";

});



$app->run();


script diatas akan menguhasilkan seperti berikut


bersambung.... (kayak sinetron aja)
Sekian dulu artikel kali ini semoga bermanfaat.. apabila ada pertanyaan maupun saran bisa ditulis pada komentar...

 


Menggunakan Recyclerview untuk membuat list


jumpa lagi sobat...

Artikel kali ini saya akan membahas mengenai Recyclerview, Recyclerview digunakan untuk membuat list.. Sebulum adanya recyclerview kalau menbuat list menggunakan listview, menurut dokumentasi dari google recyclerview lebih fleksibel daripada listview. untuk perbandinganya bisa dibaca pada link ini 

Ok.. langsung saja kita buat list dengan recyclerview...
agar bisa membuat list dengan recyclerview kita harus menambahkan depencey recyclerview pada app->build.gradle seperti berikut :

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
    compile 'com.android.support:recyclerview-v7:23.1.1'
}


setalah itu sync gradle dulu sebelum menggunakanya, seteah sync selesai berarti kalian bisa menggunaknya.. selanjut nya buat class model untuk list --> model.java

public class Model {
    String nama, alamat;

    public Model(String nama, String alamat) {
        this.nama = nama;
        this.alamat = alamat;
    }

    public String getNama() {
        return nama;
    }

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

    public String getAlamat() {
        return alamat;
    }

    public void setAlamat(String alamat) {
        this.alamat = alamat;
    }
}


setelah itu kita buat layout dari item list --> layout->item_list.xml seperti dibawah ini :


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:clickable="true"
    android:background="?android:attr/selectableItemBackground">

    <TextView
        android:id="@+id/nameList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"
        android:layout_marginStart="20dp"/>
    <TextView
        android:id="@+id/alamatList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_below="@+id/nameList"
        android:layout_marginStart="20dp"/>

</RelativeLayout>


berikutnya letakan recyclerview pada layout yang akan kalian, saya meletakanya pada activity_main.xml bagian content :


<android.support.v7.widget.RecyclerView
            android:id="@+id/recyler"
            android:layout_marginTop="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
selanjutnya buat adapter untuk penempatan list_item pada recyclerview --> java->RecyclerviewAdapter.java seperti berikut :


import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

/**
 * Created by ahmad on 1/23/16.
 */
public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {
    private List<Model> modelList;

    public RecyclerAdapter(List<Model> modelList) {
        this.modelList = modelList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.item_list, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Model model = modelList.get(position);
        holder.nama.setText(model.getNama());
        holder.alamat.setText(model.getAlamat());
    }

    @Override
    public int getItemCount() {
        return modelList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        final TextView nama, alamat;

        public ViewHolder(View itemView) {
            super(itemView);
            nama = (TextView) itemView.findViewById(R.id.nameList);
            alamat = (TextView) itemView.findViewById(R.id.alamatList);
        }
    }
}


berikutnya deklarasikan Adapter dan Recyclerview pada class MainActivity.java seperti berikut pada method onCreate :


recyclerView = (RecyclerView) findViewById(R.id.recyler);
        recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        recyclerView.setHasFixedSize(true);
        adapter = new RecyclerAdapter(modelList);
        recyclerView.setAdapter(adapter); 
kita memerlukan data untuk mengisi recyclerview... buat method method list model pada class mainActivity.java  seperti berikut :


private void listModel(){
        Model model;
        model = new Model("ali", "banyuwangi");
        modelList.add(model);
        model = new Model("budi", "blitar");
        modelList.add(model);
        model = new Model("wawan", "jember");
        modelList.add(model);
        model = new Model("riski", "ngawi");
        modelList.add(model);
        model = new Model("alfin", "malang");
        modelList.add(model);
        model = new Model("feri", "kudus");
        modelList.add(model);

        adapter.notifyDataSetChanged();
    }


setelah itu panggil method listMode pada method onCreate agar data bisa muncul....  seperti pada gambar dibawah ini:


Sekian artikel ini semoga bermanfaat.. Apabila ada pertanyaan ataupu saran tulis pada komentar

Material Desain Android sesi-3 ( FAB dan Snackbar )



jumpa lagi sobat...

Artikel kali ini adalah artikel terakhir yang membahas tentang material desain, video diatas adalah rangkuman pembahasan tentang material desain yang telah saya buat....

Lanjutan artikel kali ini saya akan melanjutkan menulis mengenai material desain pada aplikasi android, untuk yang beru pertama mengikuti bisa membaca-baca dulu pada artikel yang sudah saya tulis sebelumnya.. oke..

Artikel kali ini saya akan menbahas mengenai floating button dan snackbar keduanya merupakan bagian dari material desain, Floating button.. ya floating button merupakan tombol yang mengambang, mungkin pada artikel material desain yang kedua sudah saya tampilkan tapi kurang detail..

Sedangkan Snackbar bisa digunakan untuk menampilkan dialog pesan yang terletak dibawah layout, dialog dari snackbar bis berupa pesan tulisan saja ataupun juga bisa ditambahkan tombol...

ok langsung ke project...

berikut script xml untuk Floating action bar (fab) :

<android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_dialog_email" />


agar script xml ddiatas berfungsi maka harus di panggil pada file java, berikut script java untuk pemanggilan dan actionya..

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Ini FAB", Snackbar.LENGTH_LONG)
                        .setAction("Pencet", new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                Snackbar.make(v, "FAB KE 2",Snackbar.LENGTH_LONG).show();
                            }
                        }).show();
            }
        });


bila tidak ada error... langsung coba aplikasinya, pencet Floating action button (fab) yang telah kita buat diatas, maka akan muncul Dialog dibawah layout yang ada tulisan "Ini FAB" dan Tombol "Pencet", bila kalian klik "Pencet" maka akan muncul snackbar baru. kalian bisa juga bisa melakukan custom pada dialog snackbar sesuka hati tapi jangan lupa menutup menampilkan snackbar dengan .show(), bila .show() tidak kalian tulis makan tidak akan ada action dari snaackbar..

Sekian semoga bermanfaat... apabila ada pertanyaan maupun saran silakan tulis pada komentar

Material Desain Android sesi -2 ( Floating Label )


kembali jumpa sobat... meneruskan artikel sebelumnya mengenai material desain.. kali saya akan menulis mengenai Floating label untuk edittext untuk penjelasanya mengenai Floating label dilihat pada web android developer

Untuk teman2 yang telah mengikuti artikel mengenai material desain bisa membuka kembali projectnya.

setelah project yang ada pada android studio telah terbuka ikuti langkah2 berikut :

buat Floating label pada file yang kalian inginkan berikut scriptnya:

<LinearLayout
            android:layout_marginTop="?attr/actionBarSize"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:text="Material Design EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                style="@style/Base.TextAppearance.AppCompat.Title"
                android:layout_margin="20dp"/>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp">
                <EditText
                    android:id="@+id/input_email"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint_email" />
            </android.support.design.widget.TextInputLayout>

            <android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="20dp">
                <EditText
                    android:id="@+id/input_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/hint_password" />
            </android.support.design.widget.TextInputLayout>

            <Button
                android:id="@+id/btn_send"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/btn_send"
                android:layout_margin="20dp"/>

        </LinearLayout>



untuk memanggil pemanggilan layout floating dilakukan pada file java di method onCreate berikut scriptnya :

        TextInputLayout layoutEmail = (TextInputLayout) findViewById(R.id.input_layout_email);
        TextInputLayout layoutPassword = (TextInputLayout) findViewById(R.id.input_layout_password);
        EditText inputEmail = (EditText) findViewById(R.id.input_email);
        EditText inputPassword = (EditText) findViewById(R.id.input_password);
        Button btnSend = (Button) findViewById(R.id.btn_send);


bila tidak ada yang error makan hasilnya akan seperti dibawah

Material Desain Android sesi - 1 ( Navigation Drawer )


gambar dari : google material design

ketemu lagi sobat..
pada artikel sebelumnya saya telah menulis tentang material desain secara umum sedangkan pada artikel kali ini saya akan menerapkan material desain pada aplikasi android..  yeah...


untuk membuat aplikasi android silakan buka android studio kalian.. apabila belum menginstallnya silakan download pada web android developer dan menginstallnya.... lalu membukanya..

berikut langkah2 pembuatan aplikasi android

1. Buat project Baru pada android studio
untuk yang pertama kali membuat project pada android studio bisa membuka artikel saya sebelumnya yang berjudul "membuat project dengan android studio"
2.  memulai ngoding pada android studio
pertama kalian harus membuat file menu pada res->menu-> drawer_menu.xml
salin file berikut ke dalam drawer_menu.xml




    
        
        
        
        
    

    
        
            
            
        
    


berikutnya buat file nav_header.xml pada res->layout kopikan file berikut:



    

    

    

berikutnya buka file activity_main.xml pada res->layout dan kopikan file dibawah ini :



    

        

            

        

        

        

    

    





file main activity merupakan file untuk kerangka tampilan awal pada aplikasi android... perhatikan pada 2 baris yang paling bawah diatas yaitu app:menu="@menu/drawer_menu" --> digunakan untuk memanggil file drawer_menu.xml yang telah dibuat diatas, gunanya untuk membuat navigation menu.
sedangkan

app:headerLayout="@layout/nav_header" --> digunakan untuk memanggil file nav_header.xml yang telah kita buat diatas, aplikasi ini untuk header dari navigation menu.
berikutnya silakan edit file activitymain.java pada app->java->nama_paket. berikut kodingan untuk activitymain.jav..

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_gallery) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_slideshow) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_manage) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_share) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        } else if (id == R.id.nav_send) {
            Toast.makeText(MainActivity.this, "ini " + item.getTitle() , Toast.LENGTH_SHORT).show();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}


bila tidak ada error maka akan seperti dibawah ini


semoga artikel ini bermanfaat.. apabila ada pertanyaan, saran silakan tulis dikomentar...









Pengenalan Material Desain



gambar dari : https://design.google.com/

Sudah Lama Sekali tidak menulis blog karena kemalasan dan juga kesibukan di dunia nyata yang menyita banyak waktu sehingga blog ini terabaikan..
kali ini saya akan membahas mengenai material desain.. Apa itu material desain apakah makanan, minuman atau bahkan material bangunan???? anda benar... 



                              gambar dari : https://design.google.com/

Material desain merupakan standar desain yang diperkenalkan oleh google untuk pembuatan aplikasi agar lebih terlihat enak digunakan.. Google memberikan panduan dalam pengaplikasian material desain pada link berikut, berikut video tentang pengenalan material desain.

 video diupload oleh : Google Developer
                        
material desain sebenarnya dibuat agar sebuah baik itu aplikasi mobile maupun web bisa terlihat bagus saat digunakan oleh user saat menggunakan smartphone ataupun tablet..

Saat ini semua aplikasi mobile android buatan google seperti gmail, youtube, calender dan lainya, kalau tidak percaya bisa cek di play store sudah mengaplikasikan  material desain sebagai panduan dalam pembuatan aplikasinya, bahkan google juga membuat sebuah framework web yang didedikasikan untuk pembuatan aplikasi web yang menggunakan material desain yaitu polymer yang membuat web terlihat seperti aplikasi mobile...

Sekian dulu.. pembahasan tentang material desain akan ada pada artikel2 berikutnya..

semoga artikel ini bermanfaat apabila ada pertanyaan ataupun saran.. mohon tulis pada kolom komentar

Membuat Toolbar ( ActionBar ) pada Android


Toolbar diperkenalkan sebagai fitur baru pada android 5 (lolipop),sebelumnya toolbar dikenal dengan actionbar. tentunya dengan bergantinya nama tersebut dibarengi dengan beberapa perubahan diantaranya toolbar dibuat pada file  tersendiri pada folder (app-src-main-res-layout) sehingga para developer dapat membuat beberapa toolbar untuk satu aplikasi. cara pemanggilanya tinggal include pada layout yang inggin kita pasang toolbar tersebut.

Berikut langkah-langkahnya :


1. buat project pada android studio

2. buka  build build.gradle (app-src-main) periksa pada dependencies apakah sudah ada
compile 'com.android.support:appcompat-v7:21.0.3'
bila belum tambahkan dependencies tersebut.

3. buat file ke color.xml pada (app-src-main-res-values) lalu tambahkan beberapa warna seperti      berikut:

 <resources>

    <color name="primaryColor">#3f51b5</color>

    <color name="primaryColorDark">#303f9f</color>

</resources>
4. setelah itu masuk ke style.xml (app-src-main-res-values) tambahkan kode berikut :

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/primaryColor</item>

        <item name="colorPrimaryDark">@color/primaryColorDark</item>

        <item name="android:windowNoTitle">true</item>

    </style>

</resources>
5. lalu buat file Toolbar untuk namanya terserah temen2. pada contoh ini saya menamainya dengan toolbar.xml (app-src-main-res-layout) kodenya seperti berikut :
<android.support.v7.widget.Toolbar

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/toolbar"

    android:layout_height="?actionBarSize"

    android:layout_width="match_parent"

    android:background="?attr/colorPrimary"/>


6. tambahkan toolbar pada layout activity pada contoh saya menambahkanya pada activity_main.xml.

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">


    <include

        android:id="@+id/toolbar"

        layout="@layout/toolbar"/>

    <TextView

        android:text="@string/hello_world"

        android:layout_below="@+id/toolbar"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" />

</RelativeLayout>

7. untuk bisa tampil pada aplikasi pada saat aplikasi dijalankan temen2 harus menambahkan toolbar pada file java. pada kali ini saya menambahkan pada file MainActivity.java (app-src-main-java), berikut kodenya:
protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);

    }


8. lalu jalankan aplikasi bila bila berhasil akan tampil seperti gambar dibawah ini.



9. bila temen2 ingin menambahkan beberapa menu pada toolbar. temen2 dapat menambahkanbeberapa kode pada file menu_main.xml (app-src-main-res-menu)

<menu

    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"

    tools:context=".MainActivity">



    <item

        android:id="@+id/action_settings"

        android:title="@string/action_settings"

        android:orderInCategory="100"

        app:showAsAction="never" />


    <item

        android:id="@+id/action_search"

        android:title="@string/action_search"

        android:icon="@drawable/ic_action_search"

        android:orderInCategory="1"

        app:showAsAction="always"

        app:actionViewClass="android.support.v7.widget.SearchView"/>

</menu>

pada file tersebut saya menambahkan menu action search sedangkan menu "action_settings" default.
bila temen2 membuat aplikasi dengan banyak activity. temen2 bisa juga membuat file menu yang berbeda untuk tiap activity. untuk pemanggilanya temen2 pada file java pada method onCreateptionMenu, berikut kodenya :

public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.

        getMenuInflater().inflate(R.menu.menu_main, menu);

        return true;

    }


 sekian
 semoga artikel ini berguna. bila ada pertanyaan silakan isi pada komentar..