Sabtu, 13 Agustus 2022

MATERI PWPB XIIRPL_3

Kompetensi Dasar:

3.20     Mengevaluasi pengamanan data pada aplikasi web

4.20   Merevisi pengamanan data pada aplikasi web

PENGAMANAN DATA PADA APLIKASI WEB

Membangun sistem keamanan website cukup penting dilakukan agar meminimalkan resiko serangan terhadap server atau bahkan dapat dicegah. Faktor yang perlu diperhatikan dalam mencegah serangan serangan melalui web diantaranya perangkat keras, system operasi, aplikasi berbasis web, dan fisik tempat penyimpanan server. Hal ini dapat mencegah adanya cyberchrime(kejahatan dunia maya) seperti pencurian data atau informasi dari server data melalui aplikasi berbasis web. Contoh pencurian username dan password, nomor kartu kredit, atau perusakan database server dengan serangan Denial of Service.

Pengamanan pada aplikasi web merupakan hal mutlak yang harus diperhatikan dalam pembuatan aplikasi. Menurut Open Web Application Security Project(OWASP) ada beberapa celah keamanan aplikasi web dan rekomendasi penanganannya seperti injection, referensi objek secara langsung yang tidak aman, kerusakan manajemen autentikasidan sesi, Cross Site Scripting(XSS), pembeberan data sensitive, hilangnya fungsi level access control, penyimpanan yang tidak aman, manajemen konfigurasi yang tidak aman, dan tidak tervalidasinya proses redirect dan forwards.

Kriptografi  merupakan ilmu dan seni penyimpanan pesan, data, atau informasi secara aman. Criptoanalysis adalah aksi untuk memecahkan mekanisme kriptografi dengan cara mendapatkan plaintext atau kunci dari chipertext.

6 Fungsi Enkripsi di PHP untuk Mengamankan Data

Enkripsi adalah teknik untuk mengamankan data-data tersebut agar isinya tidak diketahui orang lain. Enkripsi biasanya dilakukan terhadap data -data sensitif seperti password.

1. Fungsi password_hash()

Fungsi  password_hash() ini  akan  menghasilkan  sebuah  kode hash baru  dengan  metode one-way hashing. one-way hasing artinya, hasil enkripsinya tidak bisa dikembalikan seperti semula (decrypt/decode). Fungsi ini sangat disarankan untuk mengenkripsi password, karena sulit didekripsi atau di-crack.

Contoh penggunaan:

Sebelum menyimpan password ke database, sebaiknya dienkripsi terlebih dahulu:

<?php

$username = $_POST['username'];

// enkripsi dulu...

$password = password_hash($_POST['username'], PASSWORD_DEFAULT);

// query simpan

mysqli_query("INSERT INTO user (username, password) VALUE ('$username','$password')");

?>

Fungsi passowrd_hash() ini   tidak   bisa   bekerja   sendirian,   dia   memiliki   teman bernama password_verify().Fungsi password_verify(),   biasanya   digunakaan   saat membuat login untuk membandingkan password yang dikirim user dengan password yang tersimpan pada database.

Contoh:

<?php

// ambil data dari form login

 $username = $_POST['username']; //<-- ini belum aman dari sql injection :D

// ambil data dari database

$query = mysqli_query("SELECT * FROM user WHERE username='$username'");

$user = mysqli_fetch_assoc($query);

// bandingkan password yang dikirim dari form login dengan password

// yang ada di database

if( password_verify($_POST['password'], $user['password']) ) {

// login berhasil

} else {

// login gagal

}

?>

Tips: bila ingin menyimpan hasil dari fungsi password_hash() di database, pastikan bertipe VARCHAR dengan panjang 255 karakter.

2. Fungsi crypt()

Fungsi ini menghasilkan kode hash dengan menggunakan algoritma DES, Blowfish, dan MD5.

Contoh:

<?php echo crypt("petanikode", "garam"); ?> Hasilnya: gabeK4a28MgJs

Bila diperhatikan, susuan karakter yang dihasilkan mirip seperti karakter yang digunakan pada alamat URL video youtube.Mungkin saja youtube juga menggunakan algoritma yang sama dengan fungsi ini. Pada contoh diatas, diberikan dua parameter kepada fungsinya. Parameter pertama adalah teks yang akan dienkripsi. Sementara, parameter   kedua   adalah salt (garam).   Garam adalah   sebuah   data   acak   yang dimasukkan ke dalam fungsi enkripsi.

Fungsi ini juga dapat digunakan untuk mengamankan password, karen a sulit di- decode.

3. Fungsi md5()

Fungsi ini akan menghasilkan kode hash sepanjang 32 karakter.

<?php echo md5("petanikode"); ?> Hasilnya:

37ebda33c177743169404948552319df

Bila ditambahkan garam, hasilnya akan berubah. Contoh:

<?php echo md5("petanikode", "g4r4m"); ?> Hasilnya: 7��3�wt1i@IHU#�

Fungsi ini juga dapat digunakan untuk mengamankan password. Akan tetapi, kalau kita perhatikan kecepatan komputer zaman sekarang… Sangat mungkin untuk melakukan decrypt.

4. Fungsi hash()

Fungsi ini akan menciptkan sebuah kode hash dengan algoritma tertentu.

 Contoh:

<?php echo hash("md5", "petanikode"); ?> Hasilnya: 37ebda33c177743169404948552319df

Pada contoh di atas, parameter "md5" adalah nama algortima yang akan digunakan untuk mengenkripsi. Parameter "petanikode" adalah teks yang akan dienkripsi.

Bila ingin mengetahui nama-nama algoritma yang bisa digunakan, silahkan coba eksekusi kode ini:

<?php

$data = "hello";

foreach (hash_algos() as $v) {

$r = hash($v, $data, false);

printf("%-12s %3d %s\n", $v, strlen($r), $r);

}

?>

5. Fungsi sha1()

Fungsi  ini  akan  menghasilkan  kode hash sepanjang  40  karakter.  Mirip  seperti fungsi md5().

Contoh:

<?php echo sha1("petanikode"); ?> Hasilnya: 2e71f75dee7cb3e4b8e2e6ef8b8b5e0eab8f78a2

Seperti halnya fungsi md5(), fungsi ini juga akan menciptakan karakter aneh, bila ditambahkan garam.

Contoh:

<?php echo sha1("petanikode", "ga12am"); ?> Hasilnya: .q�]�|�����  ^��

6. Fungsi base64_encode()

Fungsi  ini  akan  menghasilkan  kode hash dari  teks  yang  diinputkan  dan  bisa dikembalikan ke bentuk semula dengan fungsi base64_decode().

Metode ini disebut two-way hasing. Contoh:

<?php echo base64_encode("Petani kode"); ?> Hasilnya: UGV0YW5pIGtvZGU=

Sementara  itu,  untuk  mengembalikan (decrypt) atau decode dapat   menggunakan fungsi base64_decode().

Contoh:

 <?php echo base64_decode("UGV0YW5pIGtvZGU="); ?> Hasilnya: Petani kode

Enkripsi dengan base64 tidak cocok digunakan untuk mengenkripsi password, karena sangat mudah di-decode.

Dari keenam fungsi enkripsi di PHP untuk mengamankan data di atas setiap fungsi memiliki   algoritmanya   masing-masing.   Gunakan   fungsi   yang   menggunakan metode one-way   hasing untuk   melindungi   password.   Tapi,   perlu   diselidiki dulu…apakah fungsi tersebut masih aman atau tidak?

Sedangkan  untuk  fungsi  yang  menggunakan  metode two-way  hasing,  sangat  tidak disarankan  untuk  melindungi  password,  karena  memiliki  fungsi  untuk decode atau mengembalikannya dari bentuk hash menjadi plain text.

CONTOH PENERAPAN PENGAMANAN DATA PADA APLIKASI WEB

Buat file index.php, kemudian isikan sintaks berikut:








Kegiatan Belajar:

1. Buatlah minimal 3 contoh penerapan pengamanan data pada aplikasi web!

2. Masukkan hasil pekerjaan ke dalam Laporan Kegiatan Belajar (sintaks dan output) kemudian unggah ke assignment pada Ms. Teams!


Sumber:

Wijayanti Hanifah. 2019. Pemrograman Web Dan Perangkat Bergerak XII. Surakarta: Putra

Nugraha

Muhardian   Ahmad.   2015.   6   Fungsi   Enkripsi   di   PHP Untuk   Mengamankan   Data.

Petanikode.com

 

MATERI PWPB XIIRPL_2

Kompetensi Dasar:

3.19    Menerapkan aplikasi web statefull

4.19  Membuat aplikasi web statefull

      

APLIKASI WEB STATEFULL

PENGERTIAN

Stateless: dimana satu permintaan saling independen terhadap permintaan lainnya, tidak ada state(keadaan) yang dipertahankan.

Statefull: kemampuan situs untuk mempertahankan state.

Aplikasi web statefull: aplikasi dimana informasi yang diberikan sebelumnya disimpan dan mempengaruhi konten/informasi/data yang akan diberikan setelahnya.

Website biasanya menggunakan protokol HTTP yang bersifat stateless, interaksi antara request-response satu dengan request-response lainnya bersifat independent/tidak saling berkaitan. Server HTTP tidak mengingat apa yang terjadi pada interaksi request-response yang terjadi, tidak menyimpan state yang berhubungan dengan client. Sistem memberikan respon kepada user dengan langsung memberikan halaman baru.

Dengan interaksi statefull, sebuah website dapat menyimpan keadaan user walaupun komunikasi data pada jaringan tetap menggunakan HTTP.

CIRI-CIRI WEB STATEFULL

  1. Cookies Data yang menyimpan informasi.
  2. Session Menyimpan informasi tentang preferensi yang kita berikan, membuat suatu sesi yang unik untuk kita.
  3. Cache Suatu mekanisme dimana web document seperti HTML dan gambar disimpan sementara untuk mengurangi
  4. pemakaian bandwitd dan mempercepat loading.

 SESSION

Session merupakan hal yang cukup penting dalam aplikasi berbasis web. Dengan session memungkinkan programmer menyimpan informasi user secara semi-permanen, artinya selama masa tertentu informasi akan tersimpan. Penyimpanan isi variabel session berada di server, jadi tidak bisa diakses secara langsung oleh client.

Dalam aplikasi berbasis web, session banyak digunakan sebagai autentifikasi login. Dengan session memungkinkan programmer mengatur siapa saja yang bisa mengakses suatu halaman. Misalnya saja, untuk melihat halaman kotak surat pada email, kita harus login terlebih dahulu. Dalam proses login antara lain akan terjadi pembuatan suatu session yang akan dibawa oleh user di setiap halaman. Di halaman kotak surat, session tersebut akan diperiksa. Jika session benar maka user dipersilahkan membuka halaman kotak surat, namun jika salah maka user tidak bisa membuka halaman kotak surat dan biasanya akan diminta untuk login terlebih dahulu. Itulah sebabnya, user tidak bisa mengakses
halaman kotak surat secara langsung tanpa melakukan login.

Dalam penanganan session terdapat beberapa proses yang perlu diperhatikan :

  • Proses pembuatan session
  • Proses pemeriksaan session
  • Proses penghapusan session

Bagaimana session itu sendiri dijalankan? Agar proses penyimpanan dalam session berjalan, PHP melakukan beberapa hal berikut ini :

  • PHP meng-generate (membentuk) sebuah ID session.
  • ID session ini merupakan sejumlah deret angka random yang unik untuk  setiap user dan hampir tidak mungkin bisa ditebak. ID session disimpan oleh PHP di dalam variabel sistem PHP dengan nama PHPSESSID
  • PHP menyimpan nilai yang akan Anda simpan dalam session di dalam file
  • yang berada di server.
  • Nama file tempat penyimpanan session tersebut sesuai (sama) dengan ID session. File disimpan dalam suatu direktori yang ditunjukkan oleh session.save_path dalam file konfigurasi php.ini.
  • PHP melempar ID session ke setiap halaman.
  • PHP mengambil nilai session dari file session untuk setiap halaman session.

. Fungsi-fungsi dalam membangun session:

  1. session_start( ), untuk memulai session
  2. session_destroy( ), untuk mengakhiri session
  3. session_id( ), untuk mengambil atau menentukan identitas dari sebuah session
  4. session_register( ), untuk mendaftarkan variabel ke sebuah session

Contoh Penerapan Session

1. Buat file s1.php, s2.php, dan s3.php

2. Tulis sintaks berikut:



















3. Akses file melalui localhost sehingga menghasilkan tampilan seperti gambar-gambar berikut:





 





 















CookieS

Merupakan sepotong data yang disimpan pada hardisk lokal milik pengunjung dan digunakan oleh halaman web dalam mengingat sesuatu informasi.

Cookies dapat digunakan untuk:

  • Menyimpan nama pengunjung
  • Merekam daftar barang yang ingin dibeli pengunjung
  • Menimpan pilihan-pilihan yang diatur oleh pengunjung
  • Menciptakan suatu sesi yang memungkinkan seseorang dapat masuk ke halaman-halaman lain tanpa perlu login kembali

JENIS COOKIES

  • Session Cookies
         Jenis cookies ini berlangsung selama sementara. Hal ini berarti cookies akan terhapus setelah kamu menutup suatu situs
  • Persistent Cookies
         cookies yang disimpan pada harddrive secara permanen hingga kamu perlu menghapusnya secara manual
  • Third-Party Cookies
          ada pihak ketiga yang menempatkan cookie di suatu situs untuk tujuan tertentu. Biasanya 
         hal ini demi kebutuhan iklan.

cara kerja

Web server mengirim cookies ke client melalui judul HTTP, yang dikirim sebelum teks HTML. Melalui judul inilah klien bisa mengetahui apakah ia perlu mengirim cookies yang ada pada hardisk local ke web server atau tidak. Seperti halnya web server, klien mengirim balik cookie ke web server melalui judul HTTP.

Di dalam judul HTTP cookie diatur melalui set-cookie( ) yang di dalamnya terdapat informasi nama cookie dan nilainya, batas kadaluarsa, path, domain, dan parameter keamanan. Informasi nama variabel dan nilai:

Informasi

Keterangan

Path

Digabungkan dengan domain, nilai path menentukan folder pada web server yang dapat menggunakan cookie. Jika informasi path dan URL yang diminta tidak cocok maka klien  tidak akan mengirim cookie. Nilai bawaan path berupa “/” yang berarti bahwa cookie valid untuk semua folder pada web server

Domain

Menyatakan domain(alamat) server yang mendefinisikan cookie. Klien tidak akan mengirimkan cookie kalua tidak cocok dengan domain ini. Salah satu pemanfaatannya adalah untuk berbagi cookie pada beberapa server. Misalnya bila domain berisi “*situs.com” maka cookie akan dikenali baik pada situs www1.situs.com maupun www2.situs.com

Expires

Menyatakan batas waktu kadaluarsa. Bawaanya cookie hanya berlaku sampai browser tertutup

Secure

Untuk menentukan pengiriman cookie ahnya kalua protocol HTTPS(HTTP yang aman) digunakan

 Contoh Penerapan Cookie

1. Buat file c1.php, c2.php, dan c3.php

2. Tulis sintaks berikut:







Pada sintaks program di atas terdapat 2 buah cookie yang diciptakan yaitu cookie dengan nama “namapengguna” dan “namalengkap”. Pada baris ke 6 dan 7, untuk menciptakan cookie baru, digunakan fungsi setcookie(). Parameter pertama fungsi adalah nama cookie dan parameter kedua adalah nilainya. Kita juga dapat menambahkan parameter waktu cookie akan expired atau terhapus.










Pada sintaks program di atas merupakan contoh program pemeriksaan keberadaan cookie. Cookie di PHP tersimpan dalam predefined variabel $_COOKIE. untuk memeriksa keberadaannya, dapat digunakan fungsi isset()






Pada sintaks program di atas merupakan contoh program sederhana untuk menghapus variabel cookie. Pada dasarnya untuk menghapus cookie, dilakukan dengan membuat cookie tersebut expired.

3. Akses file melalui localhost sehingga menghasilkan tampilan seperti gambar-gambar berikut:















Kegiatan Belajar:

1. Praktikan contoh penerapan session dan cookie di atas!

2. Buat Laporan Kegiatan Belajar (sintaks dan output) kemudian unggah ke assignment pada Ms. teams!


Sumber:

Wijayanti Hanifah. 2019. Pemrograman Web Dan Perangkat Bergerak XII. Surakarta: Putra

Nugraha


Selasa, 12 Juli 2022

MATERI PWPB XIIRPL_1

 Kompetensi Dasar:

3.18 Menerapkan user interface basis data pada halaman web

4.18 Membuat user interface basis data pada halaman  web

PENGERTIAN USER INTERFACE(UI) Dan USER EXPERIENCE(UX)

Menurut Wilbert O. Galitz, user interface adalah bagian dari komputer dan perangkat lunak yang dapat dilihat, didengar, disentuh, diajak bicara, dan yang dapat dimengerti secara langsung oleh manusia. Merupakan teknik dan mekanisme dari tampilan antarmuka untuk berinteraksi dengan pengguna

User interface adalah bagian dari komputer dan perangkat lunak yang mengatur tampilan antarmuka untuk pengguna dan memfasilitasi interaksi yang menyenangkan antara pengguna dengan sistem. User interface (UI) juga bisa diartikan sebagai hasil akhir dari user experience (UX) yang dapat dilihat . 

User Experience merupakan bagaimana pengalaman pengguna saat memakai atau berinterkasi menggunakan sebuah produk digital. Pengalaman tersebut bisa dilihat dari kemudahan pengguna dalam memperoleh apa yang mereka butuhkan dari produk digital tersebut secara lebih menarik dan menyenangkan.

Fungsi dari UX diantaranya memudahkan pengguna, menarik minat pengguna,  menghasilkan UI yang bagus, meningkatkan kesuksesan, memenangkan persaingan.

Cara kerja UX: research, analisa, mulai membangun UX design, Tahap pengembangan, dan Evaluasi.

PRINSIP UMUM DESAIN USER INTERFACE

Deborah J. Mayhew, dengan General Principles Of UI Design, atau Prinsip Umum Desain User Interface. Ada 17 prinsip yang harus dipahami para perancang sistem, terutama untuk mendapatkan hasil maksimal dari tampilan yang dibuat.

1.    User Compatibility, yang bisa berarti kesesuaian tampilan dengan tipikal dari user. karena berbeda user bisa jadi kebutuhan tampilannya berbeda. misalnya, jika aplikasi diperuntukkan bagi anak-anak, maka jangan menggunakan istilah atau tampilan orang dewasa.

2.    Product Compatibilityistilah ini mengartikan bahwa produk aplikasi yang dihasilkan juga harus sesuai. memiliki tampilan yang sama/serupa. baik untuk user yang awam maupun yang ahli.\

3.  Task Compatibility, berarti fungsional dari task/tugas yang ada harus sesuai dengan tampilannya. misal untuk pilihan report, orang akan langsung mengartikan akan ditampilkan laporan. sehingga tampilan yang ada bukanlah tipe data (dari sisi pemrogram).

4.    Work Flow Compatibility, aplikasi bisa dalam satu tampilan untuk berbagai pekerjaan..  jika  tampilan  yang  ada  hanya  untuk  satu  pekerjaan  saja.  misal untuk kirim mail, maka kita harus membuka tampilan tersendiri untuk daftar alamat.

5.    Consistency.  Konsisten.  Contohnya,  jika  anda  menggunakan  istilah  save yang berarti simpan, maka gunakan terus istilah tersebut.

6.      Familiarity, Icon disket akan lebih familiar jika digunakan untuk perintah menyimpan.

7.      Simplicity, aplikasi harus menyediakan pilihan default untuk suatu pekerjaan.

8.   Direct    Manipulation,    manipulasi    secara    langsung.    misalnya    untuk mempertebal huruf, cukup dengan ctrl+B

9.    Control,  berikan  kontrol  penuh  pada  usertipikal  user biasanya  tidak mau terlalu banyak aturan.

10.  WYSIWYG, What You See Is What You Get, buatlah tampilan mirip seperti kehidupan  nyata  user. dan pastikan  fungsionalitas  yang ada berjalan  sesuai tujuan.

11.  Flexibility,  tool/alat  yang  bisa  digunakan  user. jangan  hanya  terpaku  pada keyboard atau mouse saja.

12.  Responsiveness,  tampilan  yang  dibuat  harus  ada  responnya.  misal,  yang sering kita lihat ketika ada tampilan please wait... 68%...

13. Invisible Technology. user tidak penting mengetahui algoritma apa yang digunakan. Contohnya untuk mengurutkan pengguna tidak perlu mengetahui algoritma yang digunakan programmer (max sort, bubble sort, quick sort, dst)

14. Robustness, handal. Dapat mengakomodir kesalahan user. jangan malah error, apalagi sampai crash.

15.  Protection, melindungi user dari kesalahan yang umum dilakukan. misalnya dengan memberikan fitur back atau undo.

16.  Ease of Learning. aplikasi. mudah dipelajar

17.  Ease of use, aplikasi harus mudah digunakan



 Perancangan User Interface/User Interface Design

 Tujuan dari UID adalah merancang interface yang efektif untuk sistem perangkat lunak. Efektif artinya siap digunakan, dan hasilnya sesuai dengan kebutuhan. Kebutuhan disini adalah kebutuhan penggunanya.

Pengguna sering menilai sistem dari interface, bukan dari fungsinya melainkan dari user interfacenya. Jika desain user interfacenya yang buruk, maka itu sering jadi alasan untuk tidak menggunakan software. Selain itu interface yang buruk sebabkan pengguna membuat kesalahan fatal.

Saat ini interface yang banyak digunakan dalam software adalah GUI (Graphical User Interface). GUI memberikan keuntungan seperti:

1.     mudah dipelajari oleh pengguna yang pengalaman menggunakan komputernya masih minim

2.     berpindah dari satu layar ke layar yang lain tanpa  kehilangan informasi

3.     akses penuh pada layar untuk beberapa macam tugas/keperluan

 

Karakteristik GUI

 

Karakteristik

Keterangan

Window

Beberapa window bisa tampilkan informasi-informasi berbeda sekaligus pada layar

Icon

Mewakili informasi yang berbeda seperti icon  untuk file, icon  folder atau icon  untuk program tertentu

Menu

Menawarkan perintah-perintah yang disusun dalam menu tanpa harus mengetik

Pointing

Alat penunjuk seperti mouse untuk memilih pilihan pada layar

Graphic

Gambar yang bisa dicampur dengan teks pada display yang sama untuk menyajikan informasi

 

Prinsip-prinsip UID:

User familiarity / Mudah dikenali : gunakan istilah, konsep dan kebiasaan user bukan computer (misal: sistem perkantoran gunakan istilah letters, documents, folders bukan directories, file, identifiers. -- jenis document open office

Consistency/ selalu begitu : Konsisten dalam operasi dan istilah di seluruh sistem sehingga tidak membingungkan. -- layout menu di open office mirip dgn layout menu di MS office.

Minimal surprise / Tidak buat kaget user : Operasi bisa diduga prosesnya berdasarkan perintah yang disediakan.

Recoverability/pemulihan : Recoverability ada dua macam: Confirmation of destructive action (konfirmasi terhadap aksi yang merusak) dan ketersediaan fasilitas pembatalan (undo)

User guidance/ bantuan : Sistem manual online, menu help, caption pada icon khusus tersedia

User diversity/keberagaman : Fasilitas interaksi untuk tipe user yang berbeda disediakan. Misalnya ukuran huruf bisa diperbesar


5 tipe utama interaksi untuk user interaction:

1.    Direct manipulation pengoperasian   secara langsung: interaksi langsung dengan objek pada layar. Misalnya delete file dengan memasukkannya ke trash. Contoh: Video games. Kelebihan: Waktu pembelajaran user sangat singkat, feedback langsung diberikan pada tiap aksi sehingga kesalahan terdeteksi dan diperbaiki dengan cepat

Kekurangan : Interface tipe ini rumit dan memerlukan banyak fasilitas pada sistem komputer, cocok untuk penggambaran secara visual untuk satu operasi atau objek

2.    Menu selection pilihan berbentuk menu: Memilih perintah dari daftar yang disediakan. Misalnyasaat click  kanan dan memilih aksi yang dikehendaki.

Kelebihan : User tidak perlu ingat nama perintah. Pengetikan minimal. Kesalahan rendah

Kekurangan :Tidak ada logika AND atau OR. Perlu ada struktur menu jika banyak pilihan. Menu dianggap lambat oleh expert user dibanding command language.

3.    Form fill-in pengisian form : Mengisi area-area pada form. Contoh: Stock control.

Kelebihan : Masukan data yang sederhana. Mudah dipelajari

Kekurangan : Memerlukan banyak tempat di  layar. Harus menyesuaikan dengan form manual dan kebiasaan user.

4.    Command language    perintah tertulis: Menuliskan perintah yang sudah ditentukan pada program. Contoh: operating system.

Kelebihan : Perintah diketikan langsung pada system. Misal UNIX, DOS command. Bisa diterapkan pada terminal yang murah.Kombinasi perintah bisa dilakukan. Misal copy file dan rename nama file.

Kekurangan:Perintah harus dipelajari dan diingat cara penggunaannya,

tidak cocok untuk user biasa, Kesalahan pakai perintah sering terjadi, Perlu ada sistem pemulihan kesalahan.Kemampuan mengetik perlu.

5.    Natural language    perintah dengan bahasa alami: Gunakan bahasa alami untuk mendapatkan hasil. Contoh: search engine di Internet.

Kelebihan: Perintah dalam bentuk bahasa alami, dengan kosa kata yang terbatas (singkat) misalnya kata kunci yang kita tentukan untuk dicari oleh search engine. Ada kebebasan menggunakan kata-kata.

Kekurangan: Tidak semua  sistem cocok gunakan  ini. Jika digunakan maka akan memerlukan banyak pengetikan.

 Penyajian Informasi (Information Presentation)

Sistem yang interaktif pasti menyediakan cara untuk menyajikan informasi untuk pengguna. Penyajian informasi bisa berupa penyajian langsung dari input yang diberikan (seperti teks pada word processing) atau disajikan dengan grafik. Beberapa faktor berikut adalah hal yang perlu diperhatikan sebelum menentukan bentuk penyajian informasi:

ü  Apakah pengguna perlu informasi dengan ketepatan tinggi atau data yang saling berhubungan?

ü  Seberapa cepat nilai informasi berubah?

ü  Apakah pengguna harus memberi respon pada perubahan?

ü  Apakah pengguna perlu melakukan perubahan pada informasi yang disajikan?

ü  Apakah informasi berupa teks atau numerik?

ü  Nilai relatif perlu atau tidak?

ü  Informasi bisa bersifat statis atau dinamis ketika disajikan,  masing-masing baik dengan karakteristik yang berbeda dan kebutuhan yang berbeda pula:

1.   Static information:

      Ditentukan saat awal sesi. Tidak berubah selama sesi berjalan.

      Bisa berupa  informasi   numeris atau teks Chart di MS-Excel

     Disajikan dengan jenis huruf khusus yang mudah dibaca atau diberi highlight dengan warna tertentu.

2. Dynamic  information:

     Perubahan  terjadi selama sesi berlangsung dan perubahan harus dikomunikasikan/ditunjukkan ke user. Bisa berupa  informasi numeric atau teks. Contoh : Defragmentation, scanning virus, downloa. Informasi dalam bentuk teks bersifat tepat dan berubah secara lambat sedangkan informasi dengan gambar/grafik mampu menjelaskan hubungan antar gambar, data bisa berubah dengan cepat.

Penggunaan Warna pada desain Interface

Warna menambah dimensi ekstra pada suatu interface dan membantu user memahami struktur yang kompleks. Bisa dipakai untuk mewarnai-terang (higlight) hal-hal khusus.

Kesalahan umum dalam penggunaan warna pada desain UI:

ü  Menggunakan warna untuk mengkomunikasikan arti-- merah bisa jadi peringatan atau ada kesalahan

ü  Terlalu banyak gunakan  macam  warna

Dalam menggunakan warna pada desain interface ada beberapa petunjuk yang dapat  diikuti seperti berikut ini:

1.        Hindari penggunaan terlalu banyak warna

2.        Gunakan kode warna untuk mendukung operasi

3.        Pengguna bisa kendalikan warna untuk kode

4.        Desain monochrome kemudian tambahkan warna

5.        Gunakan warna kode secara konsisten

6.        Hindari pasangan warna yang tidak cocok/norak

7.        Gunakan warna untuk menunjukkan perubahan status

 User Support

User guidance meliputi semua fasilitas sistem untuk mendukung user termasuk on-line help, error messages, user manual. User guidance   perlu disatukan dengan UI untuk bantu user saat membutuhkan informasi tentang sistem atau saat ada kesalahan. Help System  dan sistem message (pesan kesalahan) adalah bentuk dari user guidance.

Error Messages   sangat penting, karena error message yang buruk cenderung ditolak oleh user dan error message sebaiknya berpedoman pada faktor-faktor berikut:

 

Context

User guidance memberikan pesan sesuai konteks yang dialami ole pengguna

Experience

Pesan yang panjang mengganggu bagi yang sudah biasa, tapi bagi pengguna baru pesan yang pendek membingunkan. User guidance perlu menjawab kebutuhan ini.

Skill  level

Pesan dibuat sesuai dengan kemampuan pengguna dan pengalamannya.

Style

Harus bersifat positif. Lebih baik bersifat aktif dari pada pasif. Harus sopan, tidak menghina atau bergurau

Culture

Jika mungkin, pesan disesuaikan dengan budaya. Mungkin kata atau warna yang digunakan disesuaikan dengan budaya setempat.

 

 

Diadaptasi dari:

1.  Sommerville, Ian. "Software Engineering" .6th . Addison Wesley. 2001

 


 Contoh penerapan user interface dengan PHP native :

§  Penerapan user interface basis data pada halaman  web




 



















§  Penerapan user interface form biodata(php native)








































Contoh penerapan userinterface  dengan bootstrap