Winda: 2016

Senin, 13 Juni 2016

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

<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"> </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"> </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

Senin, 13 Juni 2016

Desain dan Notasi IMK

Contoh kasus “sistem informasi pengelolahan data nilai siswa”

Lanjutan: Desain form input data siswa

Rabu, 08 Juni 2016

Lanjutan:

Desain form input data siswa