3 · Web viewPenulis membagi struktur navigasi menjadi dua bagian yaitu untuk user dan...

3. ANALISA DAN PEMBAHASAN

3.1 Gambaran Umum

Istilah Interaksi Manusia dan Komputer (IMK – Human Computer

Interaction / HCI) baru digunakan secara luas beberapa waktu belakangan ini,

namun mengakar dari bidang yang telah mapan sebelumnya. Studi ini telah

dimulai dari saat perang dunia kedua dengan munculnya keperluan untuk

menghasilkan sistem persenjataan yang efektif sehingga di pelajari interaksi

antara manusia dengan mesin. Hal ini kemudian mendorong munculnya

ketertarikkan para peneliti di bidang ini dan membentuk suatu perkumpulan

peneliti bidang ergonomi (Ergonomic Research Society).

Ergonomi menitikberatkan pada karakteristik fisik mesin dan sistem, dan

bagaimana hal tersebut mempengaruhi kinerja user. Human factor (faktor

manusia) meliputi studi tentang manusia dan tingkah lakunya dalam

menggunakan mesin, alat-alat teknologi dan sistem dalam menyelesaikan tugas.

Kedua bidang ini memperhatikan kinerja user dalam konteks di semua jenis

sistem, apakah itu computer, mekanik, atau manual. Bidang lain yang juga

mempengaruhi studi interaksi manusia dan computer adalah ilmu dan teknoloi

informasi, yang membahas teknologi dan memperhatikan manajemen dan

manipulasi informasi dalam suatu organisasi.

Interaksi informasi dan interaksi

+ =

Manusia - mesin teknologi Manusia - Komputer

IMK merupakan subyek multi disiplin yang melibatkan berbagai bidang

ilmu. Desainer sistem interaktif yang ideal harus memiliki keahlian di berbagai

bidang seperti :

1

o Psikologi dan ilmu kognitif yang memberikan dasar pengetahuan

mengenai persepsi user, kognitif, kemampuan memecahkan

masalah.

o Ergonomic yang memberikan dasar pengetahuan mengenai

kemampuan/karakteristik fisik user.

o Sosiologi yang membantu pemahaman mengenai konsep interaksi

secara luas.

o Ilmu komputer dan teknik rekayasa untuk membangun teknologi

yang di butuhkan.

o Bisnis yang memberikan pengetahuan agar mampu memasarkan

hasil.

o Desain grafis agar mampu untuk menghasilkan presentasi yang

efektif mengenai interface.

o Technical writing agar mampu membuat manual.

3.2 Perancangan Struktur Navigasi

Pembuatan struktur navigasi sangat diperlukan karena memberikan

kemampuan bagi user untuk mengakses semua halaman dengan cepat misalnya

dari halaman detail materi dapat langsung mengakses halaman home. Penulis

membagi struktur navigasi menjadi dua bagian yaitu untuk user dan

administrator. Berikut adalah rancangan tampilan struktur navigasi user dan

administrator.

Gambar 3.1 struktur navigasi e-learning

Halaman awal(e-l.php)

HalamanWelcome

admin(welcome.

PHP)

HalamanHow to use

(how to use.PHP)

HalamanFAQ

(FAQ.PHP)

HalamanPengumuman(Pngmn.PHP)

HalamanDownload

(Download.PHP)

HalamanContact us(Contact us.PHP)

Komentar(delete_koment

ar.php)

User(aksi_user.

php)

HalamanCek Login

(Cek login.php)

Section(aksi_section.

php)

HalamanAdmin

(ADMIN.PHP)

Content((aksi_content.p

hp)

Tambah user(mod_user.PH

P)

HalamanLogin

(Login.php)

HalamanQuiz

(Quiz.php)

Q dan A(aksi_Q n A.php)

Hasil(aksi_hasil

.php)

LOGOUT(Logout.p

hp)

TambahMata kuliah

(mod_section.php

UbahContent

(mod_content.php)

Tambah Q n A

(Mod_Qna)

Tambah Jadwal

(mod_hasil.php)

3.3 Perancangan Halaman Website

Untuk membuat website ini agar terlihat menarik dan mudah dimengerti oleh

user diperlukan desain antarmuka ( Interface). Desain antar muka harus

dilakukan karena mempunyai bagian yang berhubungan langsung dengan user,

yaitu semua hal yang dilihat oleh user ( yang muncul dilayar monitor ). Dalam

membuat rancangan antar-muka diperlukan stroryboard. Adapun rancangan

tampilan dari setiap halaman website ini adalah sebagai berikut:

3.3.1 Tampilan User

Terdiri dari tampilan dan menu index, materi, latihan, dan about

me. Untuk lebih jelas dapat dilihat pada rancangan tampilan berikut ini:

1. Rancangan Tampilan Home

Gambar 3.2 Rancangan Tampilan Home

Keterangan Gambar 3.2

a.) Teks

Berisikan Teks Welcome dari situs aplikasi e-learning

b.) Home

Berisikan link ke halaman depan (index_awal.php).

c.) How to use

Berisikan link ke halaman how to use (how to use.php).

1. FAQ

Gambar 3.2 Rancangan Tampilan Menu Home

Keterangan gambar 3.2

a.) Home

Berisikan Menu Utama

b.) How to use

Berisikan Petunjuk user menggunakan e-learning

e-learning.com LOGO

Home How to use

FAQ

pengumuman download contact

us

RegisterTEKS Username :

Password :

c.) FAQ

Berisikan link ke halaman FAQ yaitu keluhan user lupa akan password

(FAQ.php).

e.) Pengumuman

Berisikan link ke halaman pengumuman yang paling terbaru dari admin

(Pngmn.php).

f.) Contact us

Berisikan link ke halaman Contact us (Contact_us.php).

g.) Login

Berisikan link ke halaman Login (Login.php).

2. Rancangan Tampilan Menu How To Use

Gambar 3.3 Rancangan Menu How To Use


a.) Teks

Berisikan Teks dari menu How To Use

b.) Menu

Berisikan Menu-menu awal

c.) Login

e-learning.com LOGO

TEKS Menu

LOGIN

Copyright @ 2009 by ullya chaerunnisa


3. Rancangan Tampilan Menu FAQ

Gambar 3.4 Rancangan Tampilan Menu FAQ


a.) Teks

Berisikan Teks dari menu FAQ

b.) Menu


c.) Login


e-learning.com LOGO

TEKS Menu

LOGIN


4. Rancangan Tampilan Menu Pengumuman

Gambar 3.5 Rancangan Tampilan Menu Pengumuman


a.) Teks

Berisikan Teks dari menu Pengumuman

b.) Menu


c.) Login


5. Rancangan Tampilan Menu Download

e-learning.com LOGO

TEKS Menu

LOGIN


e-learning.com LOGO

Download

Menu

Login


Gambar 3.6 Rancangan Tampilan Menu Download


a.) Teks

Berisikan Materi yang ingin user Download

b.) Menu


c.) Login


6. Rancangan Tampilan Menu Contact us

Gambar 3.7 Rancangan Tampilan Menu Contact us


a.) Contact us

Berisikan Nama, Email, Subject, Pesan

b.) Menu


c.) Login


e-learning.com LOGO

Contact us

Nama : Menu

Email anda :

Subject : LOGIN

Pesan :


3.3.2 Tampilan Admin

1. Rancangan Tampilan Halaman Login Administrator

Gambar 3.8 Rancangan Tampilan Halaman Administrator


a.) Teks login

Berisikan Teks login

b.) Image

Berisikan gambar si admin

c.) Login

Berisikan link ke halaman Login admin (admin.php).

2. Rancangan Tampilan Halaman Login

Gambar 3.9 Rancangan Tampilan Halaman Login Administrator

e-learning.com

Teks Login

Teks Password

Image Link Login

Copyriht @ 2009 by Ullya chaerunnisa

Home Search Logout E-learning

User | Komentar | Section | Content | Quiz | Nilai | Upload

TEKS

3. Rancangan Tampilan Menu User

3. Rancangan Tampilan Menu Quiz

Gambar 3.10 Rancangan Tampilan Menu User

4. Rancangan Tampilan Menu Komentar

Gambar 3.11 Rancangan Tampilan Menu Komentar

5. Rancangan Tampilan Menu Section

Gambar 3.12 Rancangan Tampilan Menu Section



USER

Tambah User

NO USERNAME NAMA LENGKAP AKSI



PESAN

NO NAMA EMAIL SUBYEK PESAN AKSI



SECTION

Tambah Mata Kuliah

No Nama Mata Kuliah Jumlah Soal Aksi

6. Rancangan Tampilan Menu Content

Gambar 3.13 Rancangan Tampilan Menu Content

7. Rancangan Tampilan Menu Quiz

Gambar 3.14 Rancangan Tampilan Menu Quiz

Home Search Logout e-learningPertanyaan dan Jawaban

1. Pertanyaan…-Pilihan a

- Pilihan b-Pilihan c-Pilihan d

2. Pertanyaan…-Pilihan a-Pilihan b-Pilihan c-Pilihan d

3. Pertanyaan…-Pilihan a-Pilihan b-Pilihan co Pilihan d



Home How to use FAQ Pengumuman

8. Rancangan Tampilan Menu Nilai

Gambar 3.15 Rancangan Tampilan Menu Nilai

9. Rancangan Tampilan Menu Upload

Gambar 3.16 Rancangan Tampilan Menu Upload

3.4 Langkah Pembuatan Halaman Home

Setelah mengetahui gambaran umum, alur struktur navigasi, dan

rancangan tampilan dari aplikasi yang akan dibuat, maka bagian selanjutnya

adalah bagaimana mewujudkan pemahaman tersebut menjadi aplikasi yang sesuai

dengan gambaran umum dan desain alur tersebut.

3.4.1 Membuat Label

Label dibuat sesuai rancangan menggunakan aplikasi design yaitu photoshop

CS3, kemudian desain dipotong menjadi beberapa file gambar, dan disimpan



Tambah Jadwal

No Pengguna Mata Kuliah Nilai Aktif Aksi



Tambah Download

No Judul Nama File Aksi

dengan format gif no diffter 128 dan JPEG Medium. Untuk halaman home

menggunakan fasilitas CSS Rule pada dreamweaver.

Dengan pengaturan Type: Absolute , agar apabila mengubah ukuran

ukuran resolusi monitor posisi tampilan web tidak akan berubah.width :

800 px, height :135 px, top :50 px, left :50 px dan Z-Index: 1..

Pada panel properties, atur property untuk baris pertama tabel sebagai

berikut Vertical: Top, Heigth : 135 dan Bg: browse gambar header.gif

dan baru_01.gif

Posisikan kursor pada baris kedua dari tabel, kemudian pilih menu Table

– Insert dan mengubah pengaturan propertiesya yaitu Heigth:20 dan

warna latar ( Bg) merah muda agak keunguan, kemudian insert- image-

browse gambar header.gif.

Gambar 3.17 Mengambil gambar

Selanjutnya, insert - image- browse gambar header.gif, baru_01.JPEG ,

footer.gif untuk mengisi header dan content pada tampilan label web.

Gambar 3.18 Tampilan Label

3.4.2 Membuat Common Button

Untuk membuat Common Button masih menggunakan fasilitas CSS Rule.

Maka perlu membuat CSS Rule baru yang proses pembuatannya telah dijelaskan

pada bagian sebelumnya hanya berbeda pada pengaturan yang digunakan. Berikut

adalah langkah-langkah dalam pembuatan button.

Pada menu navigasi pengaturannya adalah Selector: #nav-menu, Define

in : This document only.

Pilih kategori Positioning kemudian atur pengaturan Type : absolute,

width: auto, height: auto.

Buat sebuah CCS Rule baru, atur pada bagian Selector:class, kemudian

beri nama .right_content. Akan tampil kotak dialog CSS Rule #wrap-

per#right_content.

Pilih kategori Positioning dengan pengaturan Type: absolute, Width :

auto, Heigth: auto dan pada bagian Placement atur float : left, width :

200px, padding- right: 5 px, padding-left: 10px. klik Apply.

Pilih kategori Type atur pengaturannya dengan memilih jenis font :

Tahoma, Size: 14, Line height :18px. Klik Ok.

Gambar 3.19 Tampilan Button

3.4.3 Membuat Footer

Posisikan kursor pada baris ketiga tabel dan ubah properties Heigth: 24px,

Width : 800px dan warna latar (Bg) pink ungu #FFFFFF

Untuk membuat foother harus membuat Class CSS baru yaitu, pilih Se-

lector type : Class, Name: .footer dan Define in: This Document Only.

Pada tampilan CSS Rule definition. Pilih category Type, pilih jenis Font:

Courier new, courier, monospace, Text-align : center

Posisikan kursor pada baris ketiga tabel. Dari panel properties pilih style:

footer, tuliskan “Copyright @ 2009 By Ullya Chaerunnisa All Right Re-

served

Gambar 3.20 Membuat Footer

3.4.4 Membuat Teks

Pada tampilan home terdapat teks, yang berisi salam pembuka. Berikut

adalah langkah-langkah dalam pembuatan teks.

Buka Halaman Admin

Pilih Menu Content - Home

Ketikan teks yang ingin ditulis

Lalu Klik Update

Gambar 3.21 Membuat Teks

3.5 Struktur Database

Pada pembuatan website ini penulis menggunakan database sebagai media

penyimpanan data dan Database yang penulis gunakan adalah MySQL.

Sebelum database dibuat dibutuhkan perancangan atau permodelan data

yang akan digunakan dalam database. Berikut merupakan perancangan database

dan perintah – perintah yang akan digunakan dalam pembuatan database beserta

table dan field – fieldnya:

CREATE DATABASE `e-learning

Perintah diatas digunakan untuk membuat database dengan nama ‘e-learning’

Dalam merancang database aplikasi e-learning, penulis membagi database

menjadi tujuh tabel.

1. Tabel User

2. Tabel Komentar

3. Tabel Section

4. Tabel Content

5. Tabel Quiz

6. Tabel Nilai

7. Tabel Download

Tabel 3.1 Tabel User

Field Type Null Key Type Extra

Id_user Varchar (4) no primary auto_increment

pass Varchar (50) no

Nama_lengkap Varchar (100) no

Level_user Varchar(7) no

Email Varchar (100) no

Alamat Text no

Tabel 3.2 Tabel Komentar

Tabel 3.3 Tabel Section

Field Type Null Extra Key Type

ID_Section Int ( 4) no Auto_Incerment Primary Key

Nama_section Varchar(100) no

Keterangan Varchar (100) no

Jml_soal Int (3) no

Tabel 3.4 Tabel Content


Id_content Int (4) No Auto_Incerment Primary key

Nama_content Varchar (50) No

Isi Text no

Tabel 3.5 Tabel Quiz


Id_tanya Int (4) No Auto_Incerment Primary key

Id_section Varchar(5) No

Pertanyaan Varchar (100) No

Jawab_a Varchar (100) No

Bobot_a Int (2) No

Jawab_b Varchar (100) No

Bobot_b Int (2) No

Field Type Null Key Extra

Id_Komen int(4) no primary auto_increment

nama varchar(50) no

email varchar(100) no

subyek varchar(100) no

Pesan text no

Jawab_c Varchar (100) No

Bobot_c Int (2) No

Jawab_d Varchar(100) No

Bobot_d Int (2) no

Tabel 3.6 Tabel nilai


Id_hasil Int (4) No Auto_Incerment Primary key

Id_user Varchar (5) No

Id_section Varchar (5) No

Nilai Int(3) No

aktif Varchar(3) No

Tabel 3.7 Tabel Download


Id_download Int (4) No Auto_Incerment Primary key

Id_section Varchar(5) No

Judul Varchar(100) No

Nama_file Varchar(100) No

Tgl_posting date No

3.6 Impelementasi

Tahap terakhir yang penulis lakukan dalam membuat website system

requirement adalah mengimplementasikan rencana dan rancangan yang penulis

buat ke dalam program aplikasi berbasiskan web dengan meng-gunakan beberapa

program seperti Dreamweaver 8, Apache, PHP dan MySQL. Langkah awal dalam

mengimplementasikannya ialah dengan menginstal program-program di atas.

3.6.1 Instalasi Dreamweaver 8

Langkah – langkah untuk menginstal Dreamweaver 8 dapat dilakukan

dengan cara sebagai berikut:

Gambar 3.22 Tampilan awal instalasi Dreamweaver 8

Setelah tampil seperti gambar diatas, klik next untuk melanjutkan instalasi

ke tahap berikutnya sampai tahap memilih jenis-jenis bahasa pemrograman yang

akan digunkan . Seperti gambar dibawah ini.

Gambar 3.23 Tampilan pemilihan bahasa pemrograman yang akan dipakai

Setelah memilih bahasa pemrograman yang akan digunakan di

Dreamweaver 8. Selanjutnya ke tahap proses instalasi. Setelah proses instalsi

selesai, maka akan tampil gambar seperti dibawah ini.

Gambar 3.24 Tampilan akhir proses instalasi dreamweaver 8

3.6.2 Menjalankan Dreamweaver 8

Setelah editor Dreamweaver 8 terinstal pada computer. Maka

Dreamweaver 8 dapat langsung dijalankan dengan langkah-langkah sebagai

berikut:

1. Klik Start, pilih program, pilih Macromedia kemudian pilih

Dreamweaver 8.

2. Setelah itu akan tampil dua bentuk pilihan tampilan.

Gambar 3.25 Tampilan pilihan

Apabila memilih bagian designer maka akan masuk ke tampilan interface

(antar muka). Sedangkan bagian yang sebelah kanan hanya akan

menampilkan bagian coder.

3.6.3 Menggunakan skrip PHP di Dreamweaver 8

Untuk menggunakan skrip PHP pada Dreamweaver 8. Pada saat tampilan

pemilihan bahasa pemrograman kita memlih bahasa PHP. Seperti yang dapat

dilihat pada gambar dibawah ini.

Gambar 3.26 Tampilan pemilihan bahasa pemrograman

Setelah anda pilih PHP akan masuk ke tampilan coder seperti gambar

dibawah ini.

Gambar 3.27 Tampilan Halaman coder pada Dreamweaver 8

Setelah selesai, kita dapat simpan hasil kerja kita dengan format file .php.

seperti gambar dibawah ini.

Gambar 3.28 Tampilan Halaman Penyimpanan File pada Dreamweaver 8

3.6.4 Instalasi Xampp

Langkah – langkah untuk menginstal Xampp dapat dilakukan dengan cara

sebagai berikut:

1. Pilih bahasa yang akan digunakan

Gambar 3.29 Tampilan pilihan bahasa pada Xampp

2. Tampilan pemilihan program yang akan di instal

Gambar 3.30 Tampilan pemilihan program yang akan di instal

3. Proses instalasi

Gambar 3.31 Proses instalasi Xampp

3 setelah itu akan tampil

Gambar 3.32 Tampilan instalasi berhasil

3.6.5 Menjalankan Apache

Menjalankan apache dengan cara memilih tombol start apache pada

XAMPP control panel.

Gambar 3.33 Tampilan menjalankan Apache

3.6.6 Menjalankan MySQL

Menjalankan apache dengan cara memilih tombol start MySQL

pada XAMPP control panel.

Gambar 3.34 Tampilan menjalankan MySQL

3.6.7 Membuat Database

Membuat database pada phpmyadmin dengan cara create new database

(nama database) lalu pilih tombol create.

Gambar 3.35 Tampilan pembuatan SQL di phpMyAdmin

a) Melakukan koneksi ke database

Untuk melakukan koneksi ke database melalui web dapat dilakukan

dengan cara menyisipkan script seperti berikut:

<?

$konek=mysql_connect("localhost","root","")

or die("failed".mysql_error());

?>

b) Melakukan query

Untuk melakukan query database di web dapat dilakukan dengan

menggunakan fungsi mysql_query();. Dalam pembuatan situs system requirement

tidak banyak statement sql yang digunakan. Setidaknya ada tiga sql statement

yang

digunakan, yaitu: select, insert dan delete. Untuk penggunaannya dapat dilihat dari

contoh di bawah ini.

1. Select

Statement select digunakan untuk memilih data yang ingin ditampilkan. Misalnya:

<?

$qry_cari=mysql_query($sql_cari,$konek)

$sql_cari="SELECT * FROM search_aplikasi

WHERE UPPER(nama_aplikasi) LIKE '%$trimm%'

OR UPPER(ram) LIKE '%$trimm%'

OR UPPER(vga) LIKE '%$trimm%'

OR UPPER(sistem_operasi) LIKE '%$trimm%'

OR UPPER(keterangan) LIKE '%$trimm%'

ORDER BY id_aplikasi ASC";

?>

2. Insert

Statement insert digunakan untuk memasukan data ke dalam database. Misalnya:

<?

mysql_query($sql_simpan,$konek)

$sql_simpan="INSERT INTO search_aplikasi SET

id_aplikasi='',

nama_aplikasi='$txtnmaplikasi',

ram='$txtram',

vga='$txtvga',

sistem_operasi='$txtsistemoperasi',

keterangan='$txtketerangan'";

?>

3. Delete

Statement delete digunakan untuk menghapus data yang diinginkan. Misalnya:

<?

mysql_query($sql_hapus,$konek)

$sql_hapus="DELETE FROM news WHERE id_news='$idhapus'";

?>

3.6.8 Hasil Tampilan halaman website

Implementasi lainnya adalah tampilan halaman web sesuai dengan

rancangan yang sudah dibuat oleh penulis. Dalam mendesain halaman web

penulis menggunakan software Macromedia Dreamweaver 8. Di bawah ini adalah

hasil rancangan web yang penulis buat.

a) Tampilan Halaman Web Untuk User

Hasil pada halaman user.

Gambar 3.36 Tampilan Halaman index_awal.php

b) Tampilan Halaman Web Untuk Admin

Hasil pada halaman admin.

Gambar 3.37 Tampilan Halaman admin.php

3.6.9 Upload

Tahap terakhir dari implementasi adalah meng-upload file-file ke

webserver. Upload adalah proses menyimpan file-file ke suatu webserver. Pada

penulisan ilmiah ini penulis menyimpan file-file PHP di webhosting yang penulis

beli di Universitas Gunadarma. Langkah-langkah yang penulis lakukan dalam

meng-upload adalah:

1.Buka browser dan masukan alamat http://www.ullya-connecthost.web.id/cpanel

2.Tahap berikutnya adalah melakukan login di cpanel dengan mengisikan

username dan password. Lihat gambar 3.46

Gambar 3.38 Tampilan Login cpanel

3.Setelah login, akan masuk ke tampilan control panel.

4.Langkah berikutnya adalah mengklik file manager pada control panel

5.Pilih file-file yang akan di upload

6.Setelah di upload akan tampil file-file yang sudah di upload. Lihat gambar 3.56

Gambar 3.39 Tampilan Halaman file manager

Setelah file-file diupload langkah berikutnya adalah meng-upload database yang

sudah dibuat, caranya adalah:

1.Klik PHPMyAdmin di control panel

2.Untuk masuk ke PHPMyAdmin, klik manage database

3.Untuk membuat tabel di PhpMyAdmin, dapat dilakukan dengan 2 cara:

a. Masukan perintah sql di ruang yang disediakan, lalu klik Go.

b. Memilih file SQL yang sudah dibuat (dalam penulisan ilmiah ini penulis

membuatnya dengan nama system.sql), lalu klik Go. Lihat gambar 3.57

Gambar 3.40 Tampilan PhpMyAdmin

Hasil dari pembuatan aplikasi e-learning ini dapat dilihat di website

http://www.ullya-connecthost.web.id.

3 · Web viewPenulis membagi struktur navigasi menjadi dua bagian yaitu untuk user dan...

Documents

Transcript of 3 · Web viewPenulis membagi struktur navigasi menjadi dua bagian yaitu untuk user dan...