Senin, 13 Juni 2016

Desain dan Notasi IMK

Desain dan Notasi IMK 



Gambar Notasi Flowchart berdasarkan Desain Halaman 
Utama system:
1.      Menu utama:
2.Menu ” file input”:



Desain dan Notasi IMK

Contoh kasus “sistem informasi pengelolahan data nilai siswa”

Lanjutan:
Desain form input data siswa
 

  3. Menu “process”

4. Menu "report




Notasi Form Input data Siswa


Desain dan Notasi Dialog

Desain dan Notasi Dialog
Desain dialog imk terdiri dari desain :
1.      Penjelasan (window).
2.      Sistem menu.
Notasi dialog imk terdiri dari beberapa jenis diagram diantaranya adalah:
1.      Diagram flowchart.
2.      Diagram entity relationship diagram (ERD).
3.      Data flow diagram (DFD).
Notasi masing-masing diagram :
1.      Diagram flowchart
2.      Entity relationship diagram: diagram ini digunakan untuk menggambarkan desain relasi antara tabel di dalam basis data symbol ERD: 



















3.      Data flow diagram (DFD) : diagram digunakan untuk menggambarkan alur input data output sistem pemberkasaan baik secara tradisional maupun elektronik. 
      Symbol DFD:





















Bentuk Desain Penjendelaan


















Bentuk Desain Menu




Rabu, 08 Juni 2016

template


<html>
<head>
<title> bentuk taplate dinamis </title>
<meta http-equiv="content-type"content="text/html;charset="iso-8859-1">
<link href="style.css"rel="stylesheet" type="text/css">
</head>
<body>
<table width="35%"border="0"align="center"cellpadding="5"
cellspacing="0">
<tr bgcoloe="gray">
<td height="10" colspan="2"></td></tr>
<tr bgcolor="green">
<td colspan="2"><marquee onmouseover="this.stop()"onmouseout="this.start()"
truespeed="true"scrollamout="1"scrolldelay="40" direction="left">
<strong><div id="login"> <h5>selamat datang di website winda sistem informasi SI-P 1502 </div> </h5>
</strong>
</marquee>
</td>
</tr>
<tr>
<td width="200"height="600" valign="top"bgcolor="yellow">
<table width="200" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><form name="form1" method="post"action="cek_login,php">
<table width="200"border="0"cellspacing="0" cellpadding="2">
<tr bgcolor="#003366">
<td height="30" colspan="2">
<div align="center"><div id="login">
<strong>login admin </strong> </div> </div> </td>
</tr>
<tr>
<td width="74" height="30">
<b> username </br></td>
<td width="126">:<input name="username"type="text"id="username"size="10">
</td>
</tr>
<tr>
<td height="30">
<b>password</b></td>
<td>:
<input name="password" type="password"id="password"size="10"></td>
</tr>
<tr>
<td height="30">&nbsp;</td>
<td> <input type="submit" name="submit" value="login"></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td><div id="kiri">
<div id="login">
<p> <center> <b> PROFIL </center> </p>
<p> nama: winda </p>
<p> web:winda068.blogsport.com </p<</b>
</div>
</div>
</td>
</tr>
</tabl
</td>
<td valign="top">&nbsp;</td>
</tr>
<tr bgcolor="blue">
<td height="80" colspan="2"><div id="login"><center>copyright 2016 <br>
09 juni 2016 </div> </td>
</tr>
</table>
</body>
</html>

ragam dialog


Ragam Dialog
Ø  Dialog Berbasis Form (Barang)
Jenis ragam dialog ini sering digunakan manusia pada saat berinteraksi dengan komputer, seperti pada saat menampilkan data, memasukan data, dan memproses data.
Form / barang yang berbasis grafis memiliki beberapa komponen antara lain;
1.     Label : berfungsi untuk memberikan keterangan terhadap beberapa komponen yang ada pada form.
2.     Textbox : komponen ini bisa berfungsi sebagai tempat memasukan data atau menampilkan data.
3.     Combobox : komponen ini berfungsi untuk menampilkan data tunggal dari banyak pilihan data yang ada.
4.     List box : komponen yang digunakan untuk menampilkan sejumlah pilihan yang tersedia  yang dapat dipilih oleh pengguna.
5.     Spin box : komponen yang digunakan untuk menampilkan data bertipe numeric dengan menambahkan dan mengurangkan nilai tertentu.
6.     Check box : komponen ini digunakan untuk jenis data yang  pilihan yang dapat dipilih lebih satu jenis data.
7.     Radio button : komponen ini digunakan untuk jenis data pilihan yang hanya dapat dipilih satu jenis data saja
8.     Scroll bar : Komponen ini digunakan untuk mengeser tampilan form atau data, baik secara vertikal maupun horizontal.
9.     Button : komponen ini berfungsi untuk melaksanakan beberapa perintah proses ataupun satu proses saja.


Combobox

Listbox 

Radio Button

Check box

Label

Text box

Spin box

Buttom

Scrollbar

ragam dialog


Ragam Dialog Antar Berbasis Tunggal dan Alami
1.        Perintah Tunggal

Comman Line untuk aplikasi command prompt (cmd) pada windows.
a.        Mengaktifkan aplikasi command prompt (cmd)
1.     Program Run
2.     Dari tombol start all programs
3.     Dari aplikasi pencarian
b.        Perintah masuk ke direktori / drive
c.         Melihat isi direktori / drive
d.        Menampilkan isi direktori berdasarkan tipe data tertentu
e.        Menghapus file dan folder
f.          Membuat folder baru
g.        Mengubah nama file dan folder
h.        Memindahkan file
i.           Menduplikat file

2.        Perintah Alami

Antar muka perintah alamat pada perintah SQL (Structured Query Language)
Perintah SQL adalah bahasa pemograman untuk mengolah menggunakan natural language.
a.     Perintah membuat database baru
Create Database nama_database;
b.     Memilih database yang digunakan
Use nama_database;
c.      Menampilkan seluruh database yang ada pada server :
Show Database;
d.     Membuat tabel baru
Create  Table nama_table (“kolom 1”,”kolom 2”,”kolom 3”,”kolom n”);
e.     Melihat struktur tabel
Desc nama_table;
        Atau
Describe nama_tabel;
f.       Melihat isi tabel;
Select *from nama_tabel (kolom 1,kolom_n)
Value (“Data 1”,”Data_n”);


1.     A. Klik start    :   RUN  :     Ketik Cmd    :   ok
    Accessories        command prompt
    Ctr + R ketik cmd atau win+R, ketik cmd
B. CD atau cd (masuk atau keluar)
C. Ketik DIR lalu tekan enter
D. Dir *      nama folder *     type file
E. DEL atau RD     :   file & folder
F. Mkdis nama folder     :  MD nama folder;
G. Ken / Rename D:\> Ren nama folder berkas;
H. Move D:\> Move berkas C:\Suka
I. Copy D:\> Copy suka

faktor-faktor imk


Faktor Manusia (Pengguna)

Tiga faktor utama sistem komputer yaitu hardware, software, dan brainware.
Ketiga membagun IMK, aspek manusia harus terpikirkan dengan matang tidak hanya memikirkan aspek teknis dari sistem komputer saja. Namun bagaimana manusia menangkap data / informasi, bagaimana memproses dan mengolah data yang telah ditangkap.
Manusia dipandang sebagai sistem pemprosesan informasi
1.        Informasi / data ditangkap melalui sistem input – output (indra)
2.        Informasi disimpan dalam ingatan (memori)
3.        Informasi diolah dan diaplikasikan dalam berbagai cara
Kapasitas manusia dalam mengolah data / Iformasi memiliki reaksi yang berbeda – beda satu dengan yang lainnya, maka faktor inilah yang harus diperhatikan dalam merancang interface.

Saluran Input dan Output

Indra yang berhubungan dengan IMK  adalah
1.        Indra Penglihatan
2.        Indra Pendengaran
3.        Indra Sentuhan

Faktor Indra Penglihatan

Beberapa hal yang mempengaruhi mata menangkap data / informasi :
1.     Luminas (Luminance)
2.     Kontras
3.     Kecerahan
4.     Sudut dan Ketajaman Penglihatan
5.     Warna (Aspek : psikologi, perceptual, kongnitif)

Faktor Indra Pendengaran

1.        Suara adalah salah satu elemen untuk penyebaran informasi yang secara lengkap lewat proses pendengaran
2.        Manusia mampu mendengar lewat getaran dan gelombang yang dimediasi oleh udara
3.        Batas pendeteksian suara oleh manusia : 20 Hertz sampai dengan 20 kilo Hertz

Faktor Indra Sentuhan

1.        Kulit adalah indra yang dimiliki manusia yang berfungsi untuk mengenal lingkungan dari sentuhan
2.        Sentuhan dikaitkan dalam bentuk media input maupun output
3.        Feedbaek sentuhan tidak dijadikan sebagai aspek penyaji dan pengolah informasi tetapi lebih sebagai perangkat pendukung

Memori Manusia

Digunakan sebagai tempat penyimpanan informasi dan dapat di sajikan dalam bentuk ingatan

Jenis / Fungsi Memori
1.        Tempat penyaringan (sensor)
2.        Tempat memproses ingatan (memori jangka pendek)

3.        Tempat memproses ingatan (memori jangka panjang)

Ket :
1.     Iconic : Menerima rangsangan penglihatan
2.     Echonic : Menerima rangsangan pendengaran
3.     Haptic : Menerima rangsangan sentuhan 

Konsep Interaksi Manusia dan Komputer

Ø  Bidang Ilmu Interaksi Manusia dan Komputer (IMK) adalah bidang Ilmu yang mempelajari tentang mendesain, mengevaluasi dan mengimplementasikan sistem komputer interaktif sehingga dapat digunakan oleh manusia dengan mudah.
Ø  Definisi Interaksi
Interaksi dapat diartikan adalah perilaku atau perbuatan yang dilakukan objek tertentu dengan menjalin hubungan 2 arah dengan objek lainnya.
Ø  Definisi Interaksi Manusia dan Komputer
Hubungan 2 arah yang dilakukan manusia dan komputer untuk pencapaian tertentu dengan statis hubungan dimediasi dengan dialog yang bersifat timbal balik.
Ø  Prinsip Kerja Komputer
Prinsip kerja komputer terdiri dari :
Masukan              Proses               Keluaran
Masukan dilakukan oleh manusia lewat perangkat masukan berupa huruf dan angka, yang kemudian diolah komputer dengan hasil keluaran sesuai dengan keinginan manusia.
Ø Model dan Jenis Interaksi Manusia dan Komputer
1.     Command Line Interfase
Contoh : unix, linux, das
2.     Menu
Contoh : Seluruh menu yang ada pada setiap aplikasi pada komputer.
3.     Natural Language
Contoh : Bahasa pemograman terstruktur
4.     Question and Answer and Query Language
Contoh : Mysql, dbase, interaktif, dll
5.     Form
Contoh : Excel, access, explorel, lotus, dll
6.     Wimp
a.     Windows Icon Menu Pointer
b.     Windows Icon Pulldown Menu
Contoh : Scroll Bar, text box, combobox, listview, table, palletes, etc
Ø  Untuk membuat desain interface, disiplin ilmu dasar yang kita miliki adalah :
1.     Ilmu Komputer dan Teknik Eletronik
2.     Psikologi
3.     Perancangan
4.     Ergonomik
5.     Antropologi
6.     Sosiologi
Ø  Prinsip Utama Mendesain Antar Muka (Interface)
1.     User Compatibility
2.     Product Compatibility
3.     Task Compability
4.     Consistency
5.     Familiarity and Simplicity
6.     Direct Manipulation
7.     Control
8.     WYSIWYG
9.     Responsivences
10. Protection

interaksi manusia


Interaksi Manusia dan Komputer

1.     Dasar – dasar IMK
2.     Faktor – faktor IMK
3.     Ragam dialog IMK
4.     Prinsip dasar desain IMK
5.     Model – model pengguna
6.     Teknik evaluasi IMK