Waliwis Technologies | Web & Software Agency

Jasa pembuatan website & Software Aplikasi

Showing posts with label artikel it. Show all posts
Showing posts with label artikel it. Show all posts

Sistem Informasi Management Absensi Berbasis WEB

By on in , , ,
Bismillah, apa kabar?
Alhamdulilah bisa share lagi lewat blog ini, pada kesempatan ini saya akan share proyek SIM Absensi berbasis web menggunakan database MySQL dan bahasa pemrograman PHP 7 OOP di updetan selanjutnya saya akan menambahkan fiture SMS Gateway. Untuk proyek bisa di unduh disini : DOWNLOAD HERE

Continue Reading

Pembuatan Website Menggunakan Framework PHP Laravel

By on in , , ,
Hello apa kabar? semoga kabar nya dalam keadaan baik semua ya...
Pada kesempatan kali ini saya akan menjelaskan tentang Framework PHP Laravel, sebelum saya jelaskan tentang teknis mari kita pelajari sejarah nya terlebih dahulu.

"Jangan sekali-kali meninggalkan sejarah (JASMERAH)" [Bung Karno, Pidato HUT Proklamasi, 1966]

Pertama Kali Dibuat

Agustus 2009 PHP 5.3 dirilis, salah satu fitur baru yang dikenalkan pada PHP versi tersebut yaitu Anonymous Function atau disebut Closures (Untuk seterusnya hanya akan disebut Closures saja) tampil sebagai fitur yang penting dalam masa depan pengembangan bahasa pemrograman PHP termasuk Framework PHP. Setelah PHP versi 5.3 populer, sayangnya beberapa framework hanya mementingkan kompatibilitas dari Frameworknya dengan PHP versi lama sehingga tidak memanfaatkan fitur Closures tersebut. Nah ini menjadikan Taylor Otwell (Pencipta framework laravel) membuat framework laravel yang menggunakan fitur Closures tersebut. Akhirnya Laravel pertama kali dibuat pada tanggal 9 Juni 2011 dengan mengeluarkan versi beta.

Laravel Versi 1

Juni, 2011. Di awal rilis, sebagai framework MVC (Model View Controller) Laravel memasukkan fitur otentikasi bawaan (Built-in Authentication), Eloquent ORM sebagai pengelola database, model dengan relasi, routing, caching, session, views, penambahan library dan modules, form dan HTML helpers sebagai pembangun tampilan dengan HTML, serta beberapa fitur dasar lainnya. Dengan versi tersebut framework ini sudah dapat digunakan sebagaimana framework mestinya.

Sebenarnya Laravel versi 1 ini belum bisa disebut sebagai framework MVC. Kenapa ? Karena dalam framework MVC terdiri dari M yaitu Model (Pengelola database), V yaitu Views (Pengelola antarmuka), dan C yaitu Controller (Pengelola logika, bisa disebut inti). Sayangnya dalam Laravel versi 1 ini belum ada Controller, walaupun fungsi controller dapat dimasukkan ke dalam routing namun cara tersebut kurang efektif apalagi jika aplikasi web yang dibuat menjadi semakin besar. Aneh kan jika file routing memiliki ukuran lebih dari 1 MB, ini juga akan menyulitkan para programmer yang menggunakannya karena kode tidak tertata rapih.

Dalam versi 1 ini ada beberapa versi minor yang dirilis dengan menambahkan banyak fitur seperti method dan validation.

Laravel Versi 2

November, 2011. Karena programmer lebih suka dengan penulisan syntax yang rapih, akhirnya Laravel versi 2 sudah mendukung controller. Semua itu bisa dicapai oleh Otwell dan komunitas Laravel dalam waktu beberapa bulan. Akhirnya Laravel dapat memenuhi syarat sebagai framework MVC.

Dalam Laravel versi 2 terdapat fitur Templating Engine bernama “Blade” guna mempermudah proses developing pada sisi front-end atau view. Fitur ini sangat membantu serta mempercepat proses pembuatan website.

Laravel Versi 3

Februari, 2012. Laravel versi 3 dirilis dengan fitur pengetesan, fitur command line bernama “artisan”, database migration, serta banyak fitur lain. Laravel versi 3 menjadi lebih stabil dan juga sudah bisa dibandingkan dengan framework php lain yang sudah lama lahir. 

Banyak programmer yang tertarik dengan laravel dikarenakan perkembangannya yang cukup cepat. Bahkan forum-forum laravel mendapat banyak pengguna baru saat itu. Ini merupakan titik paling penting dalam pengembangan framework tersebut untuk kedepannya.

Laravel Versi 4

Mei, 2013. Laravel versi 4 melakukan perombakan hampir pada semua kodenya. Semua itu dilakukan demi menjaga stabilitas dari framework tersebut. Kode-kode laravel ditulis ulang dalam bentuk package yang lebih rapih dan mudah untuk dikonfigurasi. Penulisan ulang tersebut juga membuat komponen-komponen dapat dengan mudah terintegrasi dengan framework termasuk framework lain.

Laravel 5 (terbaru)

Saatnya Mengenal Laravel 5, dengan berbagai fitur baru maka aplikasi yang kamu buat sebelumnya di Laravel versi 4 tidak bisa langsung di upgrade ke Laravel 5 dikarenakan ada perubahan beberapa struktur dari framework tersebut.

Berikut beberapa pembaharuan di Laravel 5:
  • Struktur folder baru, folder yang ada pada direktori root akan lebih sedikit dibandingkan dengan Laravel 4. Sturktur folder yang berubah mungkin akan membuat kamu bingung saat migrasi ke laravel 5 ini.
  • Laravel Blades, laravel Blades yang tadinya seperti ini {{ untuk escape html dan {{{ tanpa escape html. Nah di laravel 5 yang seperti ini {{ digunakan untuk meng-echo data tanpa escape html dan yang ini {!! untuk escape html.
  • Contracts.
  • Route Cache, Kamu dapat menggunakan syntax route::cache untuk mencache route yang sudah kamu buat agar lebih cepat.
  • Facades and Helpers, fungsi Facades yang sering digunakan diganti dengan Helpers agar penggunaan lebih efisien. Seperti menggunakan facades View::make() bisa langsung dipanggil dengan helpers view() saja.
  • Middlewares, jika sebelumnya di laravel 4 kamu menggunakan filter, di laravel 5 ini fungsi filter digantikan oleh middlewares.
  • Controller Method Injection.
  • Socialite, memudahkan integrasi aplikasi laravel kamu dengan social media lain seperti facebook, twitter, serta social media lain.
  • dotEnv detection.
  • Laravel Elixir.
  • Laravel Scheduler, berfungsi mengatur cron job.
  • New dd(), diklaim lebih baik daripada var_dump bawaan PHP sendiri.
  • Eloquent Attribute Casting.
  • Integrasi dengan lebih banyak database.
  • Menghapus fitur error handles bernama Whoops.
  • Tambahan artisan command.
Intinya, dengan menggunakan framework Laravel 5 aplikasi yang kamu buat akan lebih cepat selesai. Sebenarnya ada satu lagi framework yang sedang tenar setelah Laravel. Sayangnya framework tersebut muncul didahului oleh Laravel dan karena Laravel terlalu populer hingga framework tersebut menjadi seperti tidak ada. Kejam sekali yah wkwkwk, padahal dia adalah framework tercepat karena tidak lagi menggunakan interpreter seperti PHP melainkan bahasa C yang sudah di compile. Apa??? Cepat dong berarti, yaiyalah jelas cepat karena itu dia dijuluki framework PHP tercepat hahaha. oh ya lain kali akan saya bahas tentang framework yang dijuluki framework PHP tercepat itu.
Continue Reading

Membuat Form CRUD PHP database MySQL

By on in , , , ,

Pada kesempatan kali ini saya akan berbagi tutorial membuat form CRUD menggunakan bahasa pemrograman PHP dan database MySQL, silahkan di download tutorial melalu link berikut :

DOWNLOAD 

Continue Reading

Aplikasi CRUD Android Menggunakan Database SQLite

By on in , , ,
Salah satu fitur yang ditawarkan oleh OS Android adalah kita dapat membuat database di Android yaitu SQLite. Jadi kita bisa membuat aplikasi seperti yang ada di komputer walaupun tidak persis sama karena komputer memiliki resource yang lebih besar.

SQLite

Seperti telah dijelaskan diatas database local pada android menggunakan SQLite. Dengan SQLite kita dapat membuat perintah SQL seperti insert, update dan query data tentunya menggunakan perintah syntak SQL.

Untuk itu sebelum membuat aplikasi Android yang memanfatkan firtur database SQlite, kita harus menguasai cara menggunakan SQLite terlebih dahulu.

Sama seperti database lainnya, syntak SQL nya terbagi 2 kategori yaitu syntak untuk Data Definition Language (DDL) dan Data Manipulation Language (DML). Bagi yang pernah belajar database pasti tidak asing dengan kedua istilah tersebut.

Sekarang ada pertanyaan nih apa beda DDL  dan DML ?

Biar mudah dipahami, kalau database itu kita ibaratkan sebuah rumah, maka DDL itu adalah syntax untuk membuat rumah, menambah kamar, merubah bangunan rumah, makanya yang termasuk syntak-syantak DDL adalah create table, alter table, drop table.

Sedangkan DML adalah syntax untuk mengetahui isi rumah, siapa saja penghuninya, berapa jumlahnya, ada berapa yang pria dan yang wanita, adalah anak-anak dirumah itu. Makanya yang termasuk syntak-syntak DML adalah insert, update, delete, select.

Sekarang saatnya kita buat project menggunakan database SQLite di Android. Untuk study kasusnya kita akan membuat aplikasi sederhana yaitu Biodata Mahasiswa, yang mempunyai atribut Kode, Nama, No Hp, Jenis Kelamin dan Alamat.

Ok, langsung saja ikuti step pembuatan aplikasi nya.

Langkah 1 : Buat project baru dengan nama Aplikasi Biodata, untuk Class nya beri nama MainActivity.java, sedangkan untuk layout nya beri nama activity_main.xml. Setelah selesai kita akan mendesain layout nya terlebih dahulu. Silahkan buka file res/layout/activity_main.xml lalu ketikan script berikut :



<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

     <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Exit" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

     <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/button1"
        android:background="@android:color/holo_green_light"
        android:text="Tambah"
        android:textColor="#FFF" />

     <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:layout_marginTop="16dp" >
    </ListView>

 </RelativeLayout>

 Langkah 2 : Buat file XML baru, caranya klik kanan di folder layout -> new -> other -> Android -> Android XML Layout File. Beri nama activity_baru.xml lalu masukan script berikut :


<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".BaruActivity" >

     <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1" 
        android:inputType="number">

         <requestFocus />
    </EditText>

     <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Kode" />

     <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="10dp"
        android:text="Nama" />

     <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2" />

     <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText2"
        android:layout_below="@+id/editText2"
        android:layout_marginTop="10dp"
        android:text="No Hp" />

     <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3" 
        android:inputType="number"/>

     <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText3"
        android:layout_below="@+id/editText3"
        android:layout_marginTop="10dp"
        android:text="Jenis Kelamin" />

     <EditText
        android:id="@+id/editText4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView4"
        android:layout_below="@+id/textView4" />

     <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText4"
        android:layout_below="@+id/editText4"
        android:layout_marginTop="10dp"
        android:text="Alamat" />

     <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView5"
        android:layout_below="@+id/textView5" />

     <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText5"
        android:layout_alignParentBottom="true"
        android:text="Simpan" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

     <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/textView4"
        android:text="Back" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

 </RelativeLayout>

Langkah 3 : buat file XML baru beri nama activity_lihat.xml langkah membuat file nya seperti di langkah 2, lalu masukan script berikut :

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LihatActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="104dp"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView4"
        android:layout_below="@+id/textView4"
        android:layout_marginTop="20dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/TextView05"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView5"
        android:layout_alignBottom="@+id/textView5"
        android:layout_alignLeft="@+id/TextView03"
        android:text="Alamat" />

    <TextView
        android:id="@+id/TextView03"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView4"
        android:layout_alignBottom="@+id/textView4"
        android:layout_alignLeft="@+id/TextView04"
        android:text="JK" />

    <TextView
        android:id="@+id/TextView04"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView3"
        android:layout_alignBottom="@+id/textView3"
        android:layout_alignLeft="@+id/TextView02"
        android:text="No Hp" />

    <TextView
        android:id="@+id/TextView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView2"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignLeft="@+id/TextView01"
        android:text="Nama" />

    <TextView
        android:id="@+id/TextView01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:text="Kode" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/TextView05"
        android:layout_below="@+id/TextView05"
        android:layout_marginTop="34dp"
        android:text="Back" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

</RelativeLayout>

Langkah 4 : buat file XML baru, beri nama activity_ubah.xml lalu masukan script berikut :


<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".UbahActivity" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1" 
        android:inputType="number">

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Kode" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText1"
        android:layout_below="@+id/editText1"
        android:layout_marginTop="10dp"
        android:text="Nama" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView2"
        android:layout_below="@+id/textView2" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText2"
        android:layout_below="@+id/editText2"
        android:layout_marginTop="10dp"
        android:text="No Hp" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView3"
        android:layout_below="@+id/textView3" 
        android:inputType="number"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText3"
        android:layout_below="@+id/editText3"
        android:layout_marginTop="10dp"
        android:text="Jenis Kelamin" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView4"
        android:layout_below="@+id/textView4" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText4"
        android:layout_below="@+id/editText4"
        android:layout_marginTop="10dp"
        android:text="Alamat" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView5"
        android:layout_below="@+id/textView5" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/editText5"
        android:layout_alignParentBottom="true"
        android:text="Update" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/textView4"
        android:text="Back" 
        android:background="@android:color/holo_green_light"
        android:textColor="#FFF"/>

</RelativeLayout>

Langkah 5 : Setelah selesai mendesain layout-nya, giliran membuat programnya. Untuk bisa memanfaatkan SQLite, anda perlu membuat sebuah class yang menurunkan (extends) object SQLiteOpenHelper. Pada contoh ini, saya membuat class dengan nama DataCenter.java langkah pembuatan class baru yaitu klik kanan di folder package (com.fandy.aplikasibiodata) -> new -> class.  Source Code nya seperti berikut :

package com.fandy.aplikasibiodata;

import android.content.Context;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;
import android.util.Log;

public class DataCenter extends SQLiteOpenHelper {
private static final String DATABASE_NAME = "crud.db";
private static final int DATABASE_VERSION = 1;
public DataCenter(Context context) {
super(context, DATABASE_NAME, null, DATABASE_VERSION);
// TODO Auto-generated constructor stub
}

@Override
public void onCreate(SQLiteDatabase db) {
// TODO Auto-generated method stub
String sql = "create table biodata(kode integer primary key, nama text null, phone text null, jk text null, alamat text null);";
Log.d("Data", "onCreate: " + sql);
db.execSQL(sql);
}

@Override
public void onUpgrade(SQLiteDatabase arg0, int arg1, int arg2) {
// TODO Auto-generated method stub
}

}

Langkah 6 : buka class MainActivity.java dan masukan script berikut :

package com.fandy.aplikasibiodata;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;

import com.example.aplikasicrud.R;

public class MainActivity extends Activity {
String[] daftar; 
ListView ListView01;
Menu menu;
protected Cursor cursor;
DataCenter dbcenter;
public static MainActivity ma;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button ton=(Button)findViewById(R.id.button2);
Button back=(Button)findViewById(R.id.button1);
ton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
Intent inte = new Intent(MainActivity.this, BaruActivity.class);
startActivity(inte);
}
});
back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
finish();
}
});
ma = this;
        dbcenter = new DataCenter(this);
        RefreshList();
}
public void RefreshList(){
    SQLiteDatabase db = dbcenter.getReadableDatabase();
    cursor = db.rawQuery("SELECT * FROM biodata",null);
    daftar = new String[cursor.getCount()];
    cursor.moveToFirst();
    for (int cc=0; cc < cursor.getCount(); cc++){
    cursor.moveToPosition(cc);
    daftar[cc] = cursor.getString(1).toString();
    }
    ListView01 = (ListView)findViewById(R.id.listView1);
    ListView01.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, daftar));
    ListView01.setSelected(true);
    ListView01.setOnItemClickListener(new OnItemClickListener() {
    
   
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
    final String selection = daftar[arg2]; //.getItemAtPosition(arg2).toString();
    final CharSequence[] dialogitem = {"View", "Edit", "Delete"};
    AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
    builder.setTitle("Pilih Menu");
    builder.setItems(dialogitem, new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int item) {
    switch(item){
    case 0 :
    Intent i = new Intent(getApplicationContext(), LihatActivity.class);
    i.putExtra("nama", selection);
    startActivity(i);
    break;
    case 1 :
    Intent in = new Intent(getApplicationContext(), UbahActivity.class);
    in.putExtra("nama", selection);
    startActivity(in);
    break;
    case 2 :
    SQLiteDatabase db = dbcenter.getWritableDatabase();
    db.execSQL("delete from biodata where nama = '"+selection+"'");
    RefreshList();
    break;
    }
    }
    });
    builder.create().show();
    }});
    ((ArrayAdapter)ListView01.getAdapter()).notifyDataSetInvalidated();
    }

@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;
}

}

Langkah 7 : buat class baru beri nama BaruActivity.java lalu masukan script berikut :

package com.fandy.aplikasibiodata;

import com.example.aplikasicrud.R;

import android.os.Bundle;
import android.app.Activity;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class BaruActivity extends Activity {
protected Cursor cursor;
DataCenter dbHelper;
Button ton1, ton2;
EditText text1, text2, text3, text4, text5;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_baru);
dbHelper = new DataCenter(this);
text1 = (EditText) findViewById(R.id.editText1);
text2 = (EditText) findViewById(R.id.editText2);
text3 = (EditText) findViewById(R.id.editText3);
text4 = (EditText) findViewById(R.id.editText4);
text5 = (EditText) findViewById(R.id.editText5);
ton1 = (Button) findViewById(R.id.button1);
ton2 = (Button) findViewById(R.id.button2);
// daftarkan even onClick pada btnSimpan
ton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
SQLiteDatabase db = dbHelper.getWritableDatabase();
db.execSQL("insert into biodata(kode, nama, phone, jk, alamat) values('" +
text1.getText().toString()+"','"+
text2.getText().toString() +"','" +
text3.getText().toString()+"','"+
text4.getText().toString() +"','" +
text5.getText().toString() + "')");
Toast.makeText(getApplicationContext(), "Berhasil", Toast.LENGTH_LONG).show();
MainActivity.ma.RefreshList();
finish();
}
});
ton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
finish();
}
});
}

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

}

Langkah 8 : buat class baru beri nama LihatActivity.java source code nya seperti berikut :

package com.fandy.aplikasibiodata;

import android.app.Activity;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import com.example.aplikasicrud.R;

public class LihatActivity extends Activity {
protected Cursor cursor;
DataCenter dbHelper;
Button ton2;
TextView text1, text2, text3, text4, text5;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lihat);
dbHelper = new DataCenter(this);
text1 = (TextView) findViewById(R.id.textView1);
text2 = (TextView) findViewById(R.id.textView2);
text3 = (TextView) findViewById(R.id.textView3);
text4 = (TextView) findViewById(R.id.textView4);
text5 = (TextView) findViewById(R.id.textView5);
SQLiteDatabase db = dbHelper.getReadableDatabase();
cursor = db.rawQuery("SELECT * FROM biodata WHERE nama = '" +
getIntent().getStringExtra("nama") + "'",null);
cursor.moveToFirst();
if (cursor.getCount()>0)
{
cursor.moveToPosition(0);
text1.setText(cursor.getString(0).toString());
text2.setText(cursor.getString(1).toString());
text3.setText(cursor.getString(2).toString());
text4.setText(cursor.getString(3).toString());
text5.setText(cursor.getString(4).toString());
}
ton2 = (Button) findViewById(R.id.button1);
ton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
finish();
}
});
}

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

}

Langkah 9 : buat class baru beri nama UbahActivity.java dan masukan script berikut :

package com.fandy.aplikasibiodata;

import com.example.aplikasicrud.R;

import android.os.Bundle;
import android.app.Activity;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class UbahActivity extends Activity {
protected Cursor cursor;
DataCenter dbHelper;
Button ton1, ton2;
EditText text1, text2, text3, text4, text5;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ubah);
dbHelper = new DataCenter(this);
text1 = (EditText) findViewById(R.id.editText1);
text2 = (EditText) findViewById(R.id.editText2);
text3 = (EditText) findViewById(R.id.editText3);
text4 = (EditText) findViewById(R.id.editText4);
text5 = (EditText) findViewById(R.id.editText5);
SQLiteDatabase db = dbHelper.getReadableDatabase();
cursor = db.rawQuery("SELECT * FROM biodata WHERE nama = '" +
getIntent().getStringExtra("nama") + "'",null);
cursor.moveToFirst();
if (cursor.getCount()>0)
{
cursor.moveToPosition(0);
text1.setText(cursor.getString(0).toString());
text2.setText(cursor.getString(1).toString());
text3.setText(cursor.getString(2).toString());
text4.setText(cursor.getString(3).toString());
text5.setText(cursor.getString(4).toString());
}
ton1 = (Button) findViewById(R.id.button1);
ton2 = (Button) findViewById(R.id.button2);
// daftarkan even onClick pada btnSimpan
ton1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
SQLiteDatabase db = dbHelper.getWritableDatabase();
db.execSQL("update biodata set nama='"+
text2.getText().toString() +"', phone='" +
text3.getText().toString()+"', jk='"+
text4.getText().toString() +"', alamat='" +
text5.getText().toString() + "' where kode='" +
text1.getText().toString()+"'");
Toast.makeText(getApplicationContext(), "Berhasil", Toast.LENGTH_LONG).show();
MainActivity.ma.RefreshList();
finish();
}
});
ton2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
finish();
}
});
}

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

}

Langkah 10 : Kita akan mengenalkan setiap Activity yang telah kita buat. Caranya buka file AndroidManifest.xml pilih tab AndroidManifest.xml


Lalu masukan script berikut :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.aplikasicrud"
    android:versionCode="1"
    android:versionName="1.0" >

     <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

     <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.fandy.aplikasibiodata.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                 <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="com.fandy.aplikasibiodata.BaruActivity"
            android:label="@string/title_activity_baru" >
        </activity>
        <activity
            android:name="com.fandy.aplikasibiodata.LihatActivity"
            android:label="@string/title_activity_lihat" >
        </activity>
        <activity
            android:name="com.fandy.aplikasibiodata.UbahActivity"
            android:label="@string/title_activity_ubah" >
        </activity>
    </application>

 </manifest>

Alhamdulillah selesai, Aplikasi siap untuk di hidangkan :) Cara menghidangkannya yaitu : klik kanan di project (AplikasiBiodata) -> Run As -> 1 Android Application. dan selamat menikmati.

Download Project 
Continue Reading

Membuat Desain Web Responsive

By on in , , , ,

Desain web adalah bagian yang penting dalam sebuah proyek pengembangan website. Klien pada saat ini menuntut sebuah website yang responsive (menyesuaikan diberbagai ukuran device) untuk dibuat.

Dengan menggunakan HTML5 dan CSS3, hal tersebut tentu menjadi cukup mudah untuk para developer. Developer bisa lebih fokus pada desain web, user experience dibandingkan kode back-end.

Terdapat banyak framework yang tersedia secara online yang dapat dimanfaatkan untuk mendesain web. Ada grid yang fleksibel, gambar dan layout yang bisa digunakan developer.

Pada kesempatan kali ini saya akan memberitahu beberapa tools yang bisa digunakan untuk mempermudah pekerjaan Anda dalam membuat desain web responsive.

1. Froont

Froont merupakan alat berbasis web yang efektif dan bisa berjalan di jendela browser Anda. Bisa digunakan untuk merancang desain front-end dari situs website. Alat ini termasuk mudah untuk digunakan, karena anda hanya perlu melakukan drag and drop elemen yang disediakan dan nanti akan terbentuk sendiri kode HTML dan CSS nya.

2. Screenqueri.es

 Screenqueri.es adalah alat yang berbasiskan pixel yang menarik untuk membuat web responsif. Anda bisa menguji tempilan web responsif Anda dengan menggunakan 30 perangkat yang berbeda menggunakan screenqueri.es.

3. Viewport Resizer

Viewport Resizer ialah alat untuk merancang berbasis browser. Anda bisa mengetes website responsive apapun menggunakan ini. Anda juga bisa membuat bookmark dari alat ini di browser Anda. Anda bisa menguji kompatibilitas layar dengan mudah dengan alat ini.

 4. Opera Mobile Classic Emulator

Masih banyak sekali pengguna yang menggunakan Opera Mini di ponselnya. Oleh karena itu developer juga perlu untuk memeriksa apakah website nya sudah bagus jika dibuka dengan Opera atau belum dengan menggunakan Opera Mobile Classic Emulator ini.

5. Review.js

Review.js ini dikembangkan dengan Javascript murni ini bisa digunakan untuk menguji efisiensi desain web Anda. Alat ini mengikuti prinsip “progresive enhancement”.

6. Jetstrap

Jetstrap merupakan alat untuk membangun antarmuka visual. Alat ini menyediakan cara untuk membuat prototipe dengan capat di browser. Desainer yang biasa bekerja dengan Bootstrap bisa memilih tools ini. Cukup drag and drop dalam menggunakan alat ini.

7. Adobe Edge Inspect CC

Ini termasuk alat yang cukup ringan untuk memeriksa desain web. Anda dapat mendownload toolbar dan plug-in dan uji coba desain pada perangkat yang berbeda. Adobe Edge Inspect CC ini mengikuti pendekatan minimalis saat merancang.

 8. The Responsive Calculator

The Responsive Calculator adalah sebuah alat untuk desainer web untuk mengkonversi pixel PSD ke persen. Alat ini sangat berguna untuk digunakan selama awal pengembangan website responsive Anda.
Continue Reading

Sistem Jaringan Komputer

By on in , , ,

Sistem jaringan komputer merupakan sistem yang terdapat dalam sebuah jaringan komputer. Sistem ini memiliki peran yang cukup vital. Dalam mengembangkan jaringan komputer, dibutuhkan sebuah sistem yang solid. Untuk itu, pengetahuan tentang sistem jaringan komputer dari masing-masing pengguna sangat diperlukan. Nah, bagi Anda yang ingin mengenal secara umum apa itu sistem jaringan komputer, maka ulasan dalam tulisan kali ini dapat membantu Anda menambah wawasan dan pengetahuan. 

Berikut ini adalah informasi tentang sistem jaringan komputer:

Pengertian Sistem Jaringan Komputer
Sistem jaringan komputer adalah sistem untuk membentuk sebuah jaringan komputer. Sistem tersebut merupakan sekumpulan perangkat komputer yang saling terhubung satu sama lain. Informasi serta data yang ada dalam sistem jaringan komputer dapat ditransfer menggunakan kabel dan tanpa kabel. Dengan demikian, pengguna komputer dapat membuat dokumen yang sama, saling bertukar informasi dan data, mencetak pada printer yang sama, serta menggunakan hardware ataupun software yang tersambung dalam jaringan komputer.

Komponen Dasar Sistem Jaringan Komputer
Dalam sebuah sistem jaringan komputer, setidaknya ada tiga macam komponen dasar yang harus disiapkan. 
Tiga komponen dasar tersebut antara lain:

Host atau Node (Simpul)
Node adalah sistem komputer yang utama dalam jaringan komputer. Node ini berupa komputer yang bisa dioperasikan oleh pengguna. Supaya komputer bisa tersambung dalam jaringan, maka pengguna harus memasangkan peralatan tambahan yakni NIC (Network Interface Card) / LAN Card. Perangkat tambahan tersebut dikenal dengan Ethernet, yang harus dipasang pada CPU masing-masing komputer.

Link (Saluran)
Link adalah sebuah media yang dapat menghubungkan komputer satu dengan yang lainnya. Media penghubung ini biasanya digunakan pada sebuah jaringan untuk menghubungkan komputer server dan client. Selain antarkomputer, link juga berfungsi menghubungkan komputer dengan perangkat keras (hardware) serta perangkat lunak (software). Sebagai contoh, media penghubung atau link yang biasa digunakan dalam jaringan skala kecil adalah kabel LAN.

Software (Perangkat Lunak)
Software merupakan perangkat lunak yang wujudnya tidak berupa fisik, tetapi berupa program komputer. Software berfungsi untuk menjalankan program dalam komputer. Jenis-jenis software antara satu komputer dengan komputer lain dalam sebuah jaringan adalah sama. Tetapi juga ada yang berbeda, tergantung kebutuhan. Pada dasarnya, fungsi software adalah untuk mengelola node jaringan. Selain itu, struktur jaringan komputer juga disesuaikan dengan software. Otomatis jumlah komputer dan jenis topologi yang dipakai juga akan berpengaruh.
Continue Reading

5 Alasan Memilih Sistem Operasi Android

By on in , , ,

Alasan Memilih Sistem Operasi Android – Smartphone saat ini yaitu hp yang mempunyai banyak pengagum serta juga pemakai yang menyebar di semua dunia. Smartphone sendiri mempunyai banyak type dilihat dari sistem operasinya. Sekarang ini, smartphone mempunyai banyak type sistem operasi. Seperti BlackBerry, Android, iOS, Mozilla OS, Windows Phone, dan masih banyak sistem operasi lain.

Tetapi, saat ini smartphone yang mempunyai market share terbesar serta juga popular yaitu android. Android sendiri, keluar di tahun 2007 yang lalu serta sekarang ini android telah sampai pada versi ke 5.0. Android sendiri saat ini telah jauh mengungguli Windows Phone, Blackberry, juga iOS. Oleh karenanya, banyak vendor yang meningkatkan sistem operasi ini.

Berikut 5 alasan anda harus memilih sistem operasi android 

1. Keseriusan Developer dan Google

Google sebagai pengembang sistem operasi android, benar-benar serius untuk menggarap OS ini. Ini dapat dibuktikan dengan versi-versi android serta perbaikan yang dikerjakan Google. Selain itu juga, mempunyai fitur-fitur paling baru pada sistem operasinya. Bukan sekedar itu, Developer juga kerap melakukan pengembangan serta pembaruan pada aplikasinya. Ini juga sebagai keunggulan Android daripada sistem operasi lain.

2. Harga Murah dan Berkualitas

Telah tak bisa dipungkiri bila ponsel android memiliki harga yang murah. Cobalah bandingkan dengan smartphone dengan sistem operasi lain. Kemungkinan kecil bila smartphone lain mempunyai harga di bawah 1 juta. Selain itu juga, android memiliki banyak varian yang dapat anda pilih.

3. Integrasi Google

Tak bisa disangkal bila Google saat ini adalah salah satu perusahaan internet paling besar. Google sendiri, sebagai pengembang android pastinya mempermudah penggunanya untuk terhubung ke akun google mereka. Oleh sebab itu, Google memberikan integrasi yang mudah dengan hanya sekali click pada aplikasi yang ada.

4. Aplikasi yang Berkualitas

Aplikasi yang open source, pastinya bikin pengembang makin antusias untuk meningkatkan aplikasi mereka. Beberapa developer sendiri dapat dengan mudah mempromosikan aplikasi mereka ke Google play (toko aplikasi android) dengan mudah. Aplikasi mereka dapat juga didistribusikan dengan label open source, freeware, shareware, atau juga komersil.

5. Open Source

Open Source atau yang artinya dapat anda oprek sendiri, bikin hp ini berkembang dengan cepat. Juga, beberapa vendor bikin modifikasi dari OS ini untuk memberikan keunikan serta perbedaan dari ponsel yang lain. Ini juga salah satu alasan kenapa android berkembang cepat dengan aplikasi-aplikasinya.

Continue Reading

Tren Terbaru Web Design 2015

By on in , , , , ,
Assalamualaikum. Pada kesempatan kali ini saya akan berbagi tentang web desain yang ngetren di tahun 2015. Ketika akan mendesain sebuah web, kita juga harus mempertimbangkan tren yang sedang berkembang. Berikut beberapa web yang desain nya banyak digunakan di tahun 2015.

#1 Tren Layar Penuh


Terinspirasi dari film dan TV. Website via bellroy

Tren website yang pertama ini terinspirasi dari tampilan film atau tepatnya sebuah TV, dengan background penuh atau hampir penuh dengan sedikit tulisan atau elemen yang berada di atas background nya.


Website via Born

Tren layar penuh ini seakan menjadi tren utama yang paling banyak berpengaruh pada tahun 2015 ini. Terkadang menu navigasinya juga dihilangkan atau diganti dengan menu humberger (icon 3 garis horizontal) seperti yang ada di pojok kanan atas dari web Born.

#2 Tren Efek Parallax

Parallax has evolved into many different mutations that have one thing in common: designers use page scrolling or mouse movement to animate elements or properties of the page. If you look carefully, most of the websites showcased in this article use this logic. Here are some additional examples.

Parallax telah mengembangkan beberapa efek gerakan yang berbeda-beda, dan yang paling umum digunakan adalah page scrolling atau mouse hover untuk menimbulkan animasi pada sebuah  elemen di sebuah halaman web. Berikut adalah contoh web yang menggunakan efek parallax.

Scroll event dan amimasi lukisan tangan


Website via Mint Design Company

Silahkan dibuka! bagaimana menurut kalian? Website ini menjadi lebih menaraik dan unik

Innovative scrolling


Website via QUO+

Laman web QUO+ ini akan membuat kita amaze, karena efek scrolling vertikal dan horizontalnya yang sangat sedikit ribet, Juga bagian menarik lainnya yaitu saat kita melakukan scroll pada warna produk-produk mereka.

#3 Tren Multimedia Experience


Jack Daniel's membuat contoh yang bagus dari peran multimedia ini

Web Jack Daniel’s adalah salah satu contoh web yang menggunakan tren ini. Tren ini menggunakan HTML5 <canvas> yang memampukan kita untuk membuat visual efek pada sebuah website. HTML5 ini mampu menyingkirkan peran Flash yang dahulu sempat merajalela di dunia web.


Website via The DNA project by j.viewz

Contoh keren lainnya yang dibangun dengan HTML Canvas adalah DNA Project oleh Musisi Jonthan Dagan yang bermarkas di Brooklyn (aka j.viewz). Website ini dibuka dengan visual background video, j.viewz ingin memberitahu si viewer bagaimana dia merencanakan album musik barunya melalui experimen pribadinya (yang dapat di download oleh public) dan di web ini juga ada video dari rekan-rekan kolaborasinya.

#4 Tren Animasi Buku Cerita


Website via Boldking

Pada contoh kali ini, sebenarnya hampir sama dengan contoh web yang sebelumnya, serangkaian animasi akan dimulai ketika si user mencapai posisi scroll tertentu. Web Boldking di atas menggunakan lightweight SVG dan Javascript untuk memperkenalkan perubahan bagaimana produk mereke bekerja.


Website via Colin and Dewi

Website Colin and Dewi ini sangatlah simpel namun sangat efektif untuk menaga user tetap fokus ketika membaca cerita mereka. Kita akan disuguhkan sebuah penggalan cerita pada saat melihat web mereka. Untuk melihat bagian lain, kita harus melakukan scroll ke bawah atau atas.

#5 Tren Flat Design


Website via Colin and Dewi

Selama 3 tahun ini, flat design seakan menjadi “raja”. Semakin marak dan tampaknya tren positif dari flat design ini akan terus berlanjut – secara terkhusus untuk elemen kecil seperti icon, menu, dan ilustrasi. Silakan melihat penjelasan lebih detail tentang Apa itu Flat Design .

#6 Tren Unboxes

Layar Monitor yang kita ketahui adalah berbentuk persegi/kotak, yang akan menjadi bingkai dari setiap web design yang kita buat. Setiap elemen HTML pada sebuah laman web juga mempunyai bentuk persegi. Sehingga pada tren ini, kita harus mencoba membuat elemen yang tidak berbentuk persegi, baik itu bulat, hexagon, ataupun bentuk tidak beraturan.


Website via DAN Paris.

Menu yang dibuat berbentuk lingkaran sebagai navigasi terhadap foto-foto instagram Dan.


Website via Lorenzo Bocchi

Menjadikan sebuah objek miring horizontal, dan menjadikan layout website kita dalam bentuk axonometric seperti website Lorenzo Bocchi diatas, akan memberikan kesan tidak terbatas dan tidak kaku.

#7 Tren Tiles


Namun jika kamu sebagai designer, sangat suka dengan tampilan kotak atau persegi, cara untuk mensiasatinya supaya terlihat modern adalah dengan memberikan layout Tiles. Tren Tiles ini terlihat sangat keren dan juga akan pas dengan metode responsive website yang akan kita pakai dalam mengembangkan sebuah web.

#8 Integrasi dengan Google Maps


Pengintegrasian dengan Google Maps mulai ramai digunakan pada saat ini. Bukan hanya integrasinya saja yang membuat ini keren, namun juga Google telah menyediakan pilihan kustomisasi tampilan visual Google Maps, sehingga memungkinkan kita untuk membuat tampilan yang lebih menarik dan pastinya keren. Seperti gambar di atas.

#9 Minimize


Website via Maemo

Mungkin kita pernah dengar istilah KISS (“Keep It Simple, Stupid!” atau “Keep It Short and Simple“). Istilah ini sudah sejak lama digunakan. Dan tampaknya ini masih dan terus berlaku untuk web design. Kita harus berusaha lebih keras untuk membuat desain kita sesimpel mungkin.

Kesimpulan

Ke 9 tren web design ini telah ada sejak tahun-tahun sebelumnya, namun akan diprediksi semakin marak dan berkembang di tahun 2015 ini. Namun yang terpenting, bila kita menyimpulkan dan mengambil garis besar dari semua tren yang ada di atas, yang terpenting dalam mendesain sebuah web adalh “Content First”. Utamakan konten. Sebisa mungkin kita membawa fokus user kepada konten, animasi dan efek-efek yang tadi kita bahas hanyalah sebagai pendukung untuk mengarahkan perhatian si user ke konten kita.

Sekian semoga bermanfaat.
Continue Reading
Subscribe to: Posts (Atom)