Pengantar Praktikum HTML Buku (Revisi 2017)

Kata Pengantar
Puji syukur penulis panjatkan kehadirat Allah SWT, karena

berkat rahmat dan karunia-NYA penulis dapat menyelesaikan buku
praktikum Sistem Informasi Manajemen yang dikhususkan untuk
digunakan pada pelaksanaan praktikum bagi mahasiswa.
Buku ini berisi tentang pembuatan website yang membahas
tentang bahasa pemrograman html dan membahas tentang
pengolahan data base dengan Microsoft Access.
Pada kesempatan ini penulis mengucapkan terima kasih
kepada Bapak Drs. M. Erwin Siregar, MBA, selaku Ketua Yayasan
Pendidikan Haji Agus Salim yang selalu mengingatkan kepada setiap
orang, khususnya penulis untuk terus berinovasi terhadap hal-hal
yang positif juga bermanfaat. Ucapan terima kasih ini juga kami
sampaikan kepada seluruh staf Pusat Komputer Universitas Medan
Area, yang telah banyak membantu penulis dalam menyusun buku
ini.
Penulis menyadari bahwa buku ini masih belum sempurna,
oleh karena itu saran dan kritik sangat diharapkan untuk
kesempurnaan buku praktikum ini. Semoga buku ini bermanfaat
bagi para pembacanya.
Medan, November 2017
Penulis,
i
Daftar Isi
Kata Pengantar ...........................................................................................................i
Daftar Isi .................................................................................................................... ii
Dasar – Dasar HTML5 .......................................................................................... 1
Hyperlinks .............................................................................................................. 20
Images ...................................................................................................................... 23
Background ............................................................................................................ 27
Tabel ......................................................................................................................... 31
Form .......................................................................................................................... 44
Javascript ................................................................................................................ 50
Cascading Style Sheets ....................................................................................... 54
Pengenalan Microsoft Access 2010 .............................................................. 61
Operasi Tabel ........................................................................................................ 76
Membuat dan Mengatur Query ..................................................................... 88
Mengolah Query .................................................................................................. 97
Form Design......................................................................................................... 114
Control dan Command Button ..................................................................... 120
Form, Relationship Table dan Rumus ......................................................... 126
Report ..................................................................................................................... 132
ii
Pengantar Praktikum
HTML
Javascript
CSS (Cascading Style Sheets )
Pengantar Praktikum Web Design

1 Dasar – Dasar HTML5
HTML (HyperText Markup Language) merupakan bahasa
pemrograman untuk menyusun halaman web yang diletakkan pada
sebuah web server. HTML bisa terdiri dari beberapa file yang
mendukung terbentuknya sebuah halaman web seperti pada gambar 1.
Gambar 1. Ilustrasi web page
Format penulisan sintak HTML5 secara umum masih seperti format

HTML versi sebelumnya. HTML5 menggunakan encoding (charset)
UTH-8 yang didefenisikan pada setiap halaman html. Format sintak
HTML5 Seperti dibawah ini:
Tag-Tag Dasar HTML

Ada beberapa elemen baru yang disediakan di HTML5 untuk
mendukung pembuatan halaman website modern seperti: header,
Pengantar Praktikum Web Design 1

footer, navigasi bars, sedebars, dan sebagainya. Beberapa elemen
baru HTML5 seperti terlihat pada tebel 1.
Elemen form juga mengalami pengembangan pada HTML5. Elemen-

elemen baru pada form seperti tabel 2.
Untuk mendukung fasilitas gambar dan media HTML5 menyediakan

beberapa elemen seperti pada tabel 3 dan 4.

Untuk elemen lain dari HTML5 seperti pada tabel 5.
Tabel 5. Elemen pada HTML5
Nama Tag Keterangan / Kegunaan

Basic
<!DOCTYPE> Tag untuk menentukan tipe dokumen
<html> Tag untuk membuat sebuah dokumen HTML

<title> Tag untuk membuat judul dari sebuah halaman
<body> Tag untuk membuat tubuh dari sebuah halaman
<h1> to
Tag untuk membuat heading
<h6>
<p> Tag untuk membuat paragraf

<br> Memasukan satu baris putus
<hr> Tag untuk membuat perubahan dasar kata didalam isi
 Tag untuk membuat komentar
Formatting
Tag untuk membuat sebuah akronim (tidak disupport
<acronym>
lagi di HTML5)
<abbr> Tag untuk membuat sebuah singkatan
<address> Tag untuk membuat kontak alamat
<b> Tag untuk membuat huruf bercetak tebal
Mengisolasi bagian dari teks yang dapat diformat
<bdi> dalam arah yang berbeda dari teks lain di luarnya
(tag baru HTML5)

<bdo> Mengganti arah teks
Tag untuk membuat text berhuruf besar (tidak
<big>
disupport lagi di HTML5)
Tag untuk membuat sebuah bagian text yang dikutip
<blockquote>
dari sumber lain
Tag untuk membuat jajaran teks menjadi ditengah
<center>
(tidak disupport lagi di HTML5)
<cite> Tag untuk membuat judul karya
Tag untuk membuat potongan kode komputer di
<code>
antara text
Tag untuk membuat teks yang telah dihapus dari
<del>
dokumen
<dfn> Tag untuk membuat sebuah istilah definisi
Tag untuk membuat penekanan teks (tidak disupport
<em>
lagi di HTML5)
Tag untuk membuat font, warna, dan ukuran untuk
<font>
teks (tidak disupport lagi di HTML5)
Tag untuk membuat sebuah bagian dari teks yang
<i>
disesuaikan dengan mood
Tag untuk membuat teks yang telah dimasukkan ke
<ins>
dalam dokumen
<kbd> Tag untuk membuat input keyboard
Tag untuk membuat teks yang disorot / ditandai (tag
<mark>
baru HTML5)
<meter> Tag untuk membuat pengukuran skalar
<pre> Tag untuk membuat teks terformat

<progress> Memperlihatkan kemajuan tugas (tag baru HTML5)
<q> Tag untuk membuat kutipan pendek

Tag untuk membuat apa yang harus ditampilkan di
<rp> browser yang tidak mendukung penjelasan ruby (tag
baru HTML5)
Tag untuk membuat sebuah anotasi / pengucapan
<rt>
karakter (untuk tipografi Asia Timur)
Tag untuk membuat sebuah anotasi ruby (untuk
<ruby>
tipografi Asia Timur) (tag baru HTML5)
<s> Tag untuk membuat teks yang tidak lagi benar
Tag untuk membuat contoh keluaran dari program
<samp>
komputer
<small> Tag untuk membuat teks kecil
Tag untuk membuat teks yang di coret tengah (tidak
<strike>
<strong> Tag untuk membuat teks penting
Tag untuk membuat teks subskrip (seperti dalam
<sub>
penulisan Jat Kimia)
Tag untuk membuat teks superscripted (seperti dalam
<sup>
penulisan akar kuadrat)
Tag untuk membuat tanggal / waktu (tag baru
<time>
HTML5)
Tag untuk membuat teks teletype (tidak disupport
<tt>
lagi di HTML5)
Tag untuk membuat teks yang memiliki Gaya yang
<u>
berbeda dari teks biasa lainnya

<var> Tag untuk membuat sebuah variabel
<wbr> Tag untuk membuat kemungkinan garis-putus
Forms
Tag untuk membuat sebuah form HTML untuk input
<form>
pengguna
<input> Tag untuk membuat sebuah kontrol input
Tag untuk membuat sebuah kontrol input multibaris
<textarea>
(text area)
<button> Tag untuk membuat sebuah tombol yang dapat diklik
<select> Tag untuk membuat sebuah daftar drop-down
Tag untuk membuat sebuah kelompok pilihan yang
<optgroup>
terkait dalam daftar drop-down
<option> Tag untuk membuat pilihan dalam daftar drop-down
Tag untuk membuat sebuah label untuk sebuah
<label>
elemen <input>
<fieldset> Grup unsur terkait dalam bentuk
Tag untuk membuat sebuah caption untuk sebuah
<legend>
elemen <fieldset>, < figure>, atau <details>
Menentukan daftar pilihan yang telah ditetapkan
<datalist>
untuk kontrol input (tag baru HTML5)
Tag untuk membuat key-pair generator kolom input
<keygen>
(tag baru HTML5)
Tag untuk membuat hasil penghitungan (tag baru
<output>
HTML5)
Frames

Tag untuk membuat sebuah window (bingkai) dalam
<frame>
sebuah frameset (tidak disupport lagi di HTML5)
Tag untuk membuat satu set bingkai (tidak disupport
<frameset>
lagi di HTML5)
Tag untuk membuat sebuah konten alternatif untuk
<noframes> pengguna yang tidak mendukung frame (tidak
<iframe> Tag untuk membuat sebuah bingkai
Images
<img> Tag untuk membuat gambar

<map> Tag untuk membuat gambar-peta
<area> Tag untuk membuat area dalam gambar-peta
Digunakan untuk menggambar grafik, melalui
<canvas>
scripting (JavaScript ) (tag baru HTML5)
Tag untuk membuat sebuah caption untuk elemen
<figcaption>
<figure> (tag baru HTML5)
<figure> Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio> Tag untuk membuat isi suara (tag baru HTML5)

Tag untuk membuat sumber beberapa media untuk
<source> elemen media (<video> dan <audio>) (tag baru
HTML5)
Tag untuk membuat trek teks untuk elemen media
<track>
(<video> dan <audio>) (tag baru HTML5)
Tag untuk membuat sebuah video atau film (tag baru
<video>
HTML5)
Links
<a> Tag untuk membuat hyperlink

Tag untuk membuat hubungan antara dokumen dan
<link> sumber daya eksternal (paling sering digunakan
untuk link ke style sheet)
<nav> Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul> Tag untuk membuat daftar dengan selain nomor

<ol> Tag untuk membuat daftar dengan nomor
<li> Tag untuk membuat sebuah item daftar
Tag untuk membuat sebuah daftar direktori (tidak
<dir>
<dl> Tag untuk membuat sebuah daftar definisi
Tag untuk membuat istilah (item) dalam daftar
<dt>
definisi
<dd> Defines a description of an item in a definition list
Tag untuk membuat deskripsi dari item dalam daftar
<menu>
definisi
Tag untuk membuat sebuah tombol perintah bahwa
<command>
seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table> Tag untuk membuat tabel

<caption> Tag untuk membuat sebuah caption tabel
<th> Tag untuk membuat sebuah sel header tabel
<tr> Tag untuk membuat baris dalam sebuah tabel
<td> Tag untuk membuat sel dalam sebuah tabel
<thead> Mengelompokan isi header dalam sebuah tabel
<tbody> Mengelompokanisi tubuh dalam sebuah tabel
<tfoot> Mengelompokan isi footer dalam sebuah tabel
Menentukan properti kolom untuk setiap kolom
<col>
dalam elemen <colgroup>
Menentukan kelompok dari satu atau lebih kolom
<colgroup>
dalam sebuah tabel untuk diformat
Style/Sections
<style> Tag untuk membuat informasi style untuk dokumen

<div> Tag untuk membuat sebuah bagian dalam dokumen
<span> Tag untuk membuat sebuah bagian dalam dokumen
Tag untuk membuat sebuah header untuk dokumen
<header>
atau bagian (tag baru HTML5)
Tag untuk membuat footer untuk dokumen atau
<footer>
bagian (tag baru HTML5)
Pengelompokan elemen heading (<h1> sampai
<hgroup>
<h6>) (tag baru HTML5)
Tag untuk membuat bagian dalam dokumen (tag baru
<section>
HTML5)
Tag untuk membuat sebuah artikel (tag baru
<article>
HTML5)
Tag untuk membuat konten lain selain dari konten
<aside>
halaman (tag baru HTML5)

Tag untuk membuat rincian tambahan yang
<details> pengguna dapat lihat atau sembunyikan (tag baru
HTML5)
Tag untuk membuat sebuah kotak dialog atau jendela
<dialog>
(tag baru HTML5)
Tag untuk membuat sebuah judul terlihat untuk
<summary>
elemen <detil> (tag baru HTML5)
Meta Info
<head> Tag untuk membuat informasi tentang dokumen

Tag untuk membuat metadata tentang dokumen
<meta>
HTML
Menentukan URL dasar / target untuk semua URL
<base>
relatif dalam dokumen
Menentukan standar warna, ukuran, dan font untuk
<basefont> semua teks dalam dokumen (tidak disupport lagi di
HTML5)
Programming
<script> Tag untuk membuat script di sisi klien

Tag untuk membuat sebuah konten alternatif bagi
<noscript>
pengguna yang tidak mendukung script di sisi klien
Tag untuk membuat sebuah java applet yang ditanam
<applet>
(tidak disupport lagi di HTML5)
Tag untuk membuat sebuah wadah untuk aplikasi
<embed>
eksternal (non-HTML) (tag baru HTML5)
<object> Tag untuk membuat sebuah objek yang ditanam
<param> Tag untuk membuat sebuah parameter untuk objek

Latihan 1. Mengenal HTML
Buat sebuah folder baru dengan nama folder NPM pada drive D:\ di
komputer. Pada latihan 1 ini menggunakan Tag dasar html.
1. Jalankan Notepad atau teks editor lain.

2. Ketikan baris-baris kode berikut. (ketik persis seperti yang terlihat
di buku ini).
<!DOCTYPE html>
<html>
<head>
<title>Latihan 1</title>
</head>
<body>
Latihan pertama, dasar-dasar html
</body>
</html>
3. Kemudian klik menu File > Save atau Save As pada menu bar
Notepad.

4. Lalu ketika muncul jendela Save As seperti di bawah ini, pada
kotak isian File name ketiklah “latihan_1.html” (ketik teks persis
tanpa tanda petik), kemudian di bagian Save as type ganti menjadi
“All Files (*.*)”.
5. Kemudian klik tombol Save.

6. Pada Windows Explorer, browser folder NPM yang sudah dibuat
sebelumnya. Kemudian klik ganda file latihan_1.html untuk
menjalankannya. Lihat apa yang terjadi.
7. Akan tampil di aplikasi browser tampilan web seperti berikut.

Latihan 2. Mengatur Heading dan Paragraf
<hr> menunjukkan sebuah horizontal rule atau garis horizontal, yaitu

garis yang mendatar dari kiri ke kanan atau dari kanan ke kiri.
Ketikan baris-baris kode berikut, menggunakan aplikasi Adobe

Dreamweaver CS6, kemudian simpan dengan file name
“latihan_2.html”.
Latihan 3. Mengatur List dan Penomoran
Ol menunjukkan sebuah ordered list, yaitu daftar (list) beberapa item

yang terstruktur atau berurutan. Sehingga, apabila item-item tersebut
diubah urutannya, maka makna yang tersirat dalam dokumen tersebut
pun ikut berubah.

Item-item daftar tersebut, ditulis di dalam element <li> yang
menunjukkan list item. Kemudian, <li> ditulis didalam elemen <ol>.
<ol> di bagi atas beberapa macam yaitu dengan tipe angka, abjad,
angka romawi. Macam-macam type ordered list :
Jika type = "1" maka akan menampilkan 1, 2, 3,....
Jika type = "a" maka akan menampilkan a, b, c,....
Jika type = "A" maka akan menampilkan A, B, C,....
Jika type = "i" maka akan menampilkan i, ii, iii,....
Jika type = "I" maka akan menampilkan I, II, III,....
Ketikan baris-baris kode berikut, kemudian simpan dengan file name

<ul> menunjukkan sebuah Unordered List atau Daftar Acak. HTML

<ul> element digunakan untuk merepresentasikan sebuah daftar item
atau koleksi beberapa item yang dapat disusun kembali secara acak
tanpa penomoran. Artinya, apabila item-item tersebut diubah
urutannya, tidak akan berpengaruh pada dokumen.

“latihan_ul.html”.
Latihan 4. Mengatur Format Text dan Warna Latar Text
HTML <p> element menunjukkan sebuah Paragraph, atau paragraf

sebuah teks.
HTML <sup> element merepresentasikan superscript text, yaitu teks

yang biasanya ditulis agak keatas setengah bagian dari teks normal
dan memiliki ukuran lebih kecil. Kebalikan dari element <sup> ini
adalah element <sub> yang menunjukkan subscript yang ditulis agak
kebawah dari teks normal.

HTML <style> element digunakan untuk menyisipkan kode style atau
CSS ke dalam sebuah dokumen web (HTML).

Latihan 5. Mengatur Font, <br>, <span> dan Perataan Text
HTML element br menunjukkan sebuah line break (garis baru).

Elemen br sebaiknya digunakan hanya untuk garis baru yang benar-
benar merupakan bagian dari sebuah konten, seperti digunakan pada
baris syair, puisi dan alamat.
HTML <span> element merupakan element inline (elemen yang tidak

membentuk garis baru) yang digunakan untuk mengelompokkan
beberapa element yang dimaksudkan untuk memudahkan dalam
pemberian style (dengan CSS). Misalnya, memudahkan untuk men-
style element ketika digunakan bersama dengan global attributes,
contohnya: attribute class, lang atau dir.




KUIS/TUGAS.
1. Buatlah koding pemrograman dengan menggunakan syntak
HTML untuk menghasilkan tampilan seperti berikut ini:
2. Buatlah koding pemrograman dengan menggunakan syntak

HTML untuk menghasilkan tampilan seperti berikut ini:

2 Hyperlinks
Hyperlinks dari HTML adalah membuat sebuah text, gambar maupun

animasi yang ketika di-klik akan pindah ke halaman lainnya. HTML
menggunakan tag <a>, yang merupakan singkatan cari anchor
(jangkar). Setiap tag <a> memiliki sebuah atribut href. Dimana href
berisi alamat yang dituju (href adalah singkatan dari hypertext
reference).
Latihan 1. Link href

“latihan_link_1.html”.
Latihan 2. Link image dan colors
HTML <img> element memiliki beragam attribute yang dapat ditulis

sesuai kebutuhan. Akan tetapi, hanya dua attribute yang wajib ditulis
pada setiap <img /> element, yaitu src dan alt attribute. src
attribute menujukkan sumber file tersebut berada, sedangkan alt
menujukkan alternatif text yang akan muncul sebagai pengganti
apabila gambar tersebut tidak dapat ditampilkan.

Latihan 3. Link target attribut

HTML Link Target yaitu dengan menyisipkan perintah dibelakang url

tujuan. Ada beberapa tipe untuk jenis link ini, diantaranya:
1. Membuka Tab baru (target=”_blank” )
2. Membuka Jendela baru (target=”new” )
3. Membuka halaman baru ke halaman baru pada jendela aktif
(target=”_self” )
4. Membuka halaman baru ke dalam suatu bingkai yang lebih unggul
dimana link berada (target=”_parent”)
5. Membuka halaman baru ke dalam jendela browser saat ini,
membatalkan semua frame (target=”_top” )
Latihan 4. Link bookmark


3 Images
Untuk memasukkan gambar ke dalam dokumen HTML digunakan

elemen img di ikuti dengan src (source) sebagai sumber atau lokasi
dari gambar.
<img src="lokasi gambar" />
Ketika memasukkan gambar ke dalam dokumen HTML ada tiga

atribut yang sangat penting harus selalu disertakan dengan elemen
img yaitu alt, width dan height. Alt (alternate) adalah sebagai teks
alternatif yang ditampilkan oleh browser ketika gambar tidak dapat
ditampilkan atau ditemukan sedangkan width dan height adalah
ukuran lebar dan tinggi gambar dalam satuan pixel(px).
<img src="lokasi gambar" alt="teks

alternatif" width="lebar" height="tinggi" />
Latihan 1. Memasukkan gambar

“latihan_gambar_1.html”.
Gambar diambil dari folder di komputer (Penguins), copy dan paste
ke folder NPM.
C:\Users\Public\Pictures\Sample Pictures.

Latihan 2. Memposisikan gambar
Untuk memposisikan gambar ke kiri dan ke kanan digunakan atribut

style dengan properti float di ikuti dengan nilai (value) left (kiri) atau
right (kanan) atau menggunakan align pada tag <img>.



Untuk membuat gambar berada ditengah dokumen HTML, harus
memasukkan gambar tersebut di dalam blok elemen seperti p, div,
table dsb. Kemudian kita masukkan atribut style dengan properti text-
align kedalam elemen blok tersebut, dalam contoh kita akan
menggunakan elemen div.

Latihan 3. Membuat border gambar
Untuk membuat border pada gambar dapat menambahkan atribut style

dengan properti border dengan nilai dalam px atau jika ingin
menghilangkan border anda cukup menuliskan style="border:none".


KUIS/TUGAS.
Buatlah sebuah kode pemrograman menggunakan syntak HTML
untuk menghasilkan tampilan seperti berikut ini:
L atar belakang mendirikan Universitas Medan Area, adalah

sebagai salah satu wujud penjabaran UUD 1945
yaitu turut serta mencerdaskan kehidupan
bangsa serta merupakan wadah
penampungan aspirasi dan hasrat masyarakat yang
terus berkembang untuk menikmati pendidikan
tinggi.
Pada tahun 2015 Universitas Medan Area resmi mendapat
Akreditasi secara Institusi dengan nilai B dengan nomor SK :
767/SK/BAN-PT/Akred/PT/VII/2015, Tanggal SK: 10 Juli 2015
dan berlaku sampai dengan 10 Juli 2020.
Sampai saat ini Universitas Medan Area telah memiliki tujuh
Fakultas dengan 19 program studi untuk Strata 1 (S1) dan 4
program studi untuk Strata 2 (S2). Ketujuh Fakultas
tersebut yaitu Fakultas Teknik, Fakultas Pertanian,
Fakultas Ekonomi, Fakultas Hukum, Fakultas Ilmu
Sosial dan Ilmu Politik, Fakultas Psikologi serta
Fakultas Biologi telah memiliki status TERAKREDITASI untuk
semua program studi yang diselenggarakannya dengan grade
rata-rata “B“.

4 Background
Untuk membuat background dengan warna di gunakan properti

background-color.
<body style="background color:warna">...</body>
Latihan 1. Background HTML

“latihan_background_1.html.
Latihan 2. Background Text
Untuk nilai dari properti background-color bisa menggunakan kode

RGB, Hexadecimal maupun Nama Warna.
Beberapa tag attribut html yang dapat menggunakan style css antara
lain: <span>, <p> dan <div>. Sedangkan untuk mengubah warna text
dapat menggunakkan <font color=”kode warna”> dan untuk
mengubah jenis huruf dapat menambahkan <font face=”jenis font”>.

latihan_background_2.html.
Latihan 3. Background Gambar
Untuk membuat background dengan gambar di gunakan properti

background-image.
<body style="background-image:url(lokasi dan

nama gambar)">...</body>
Gunakan logo Universitas Medan Area yang berwarna biru.

latihan_background_3.html

Maka secara otomatis browser akan mengisi penuh halaman website
dengan gambar tersebut secara berulang (repeat) baik secara vertikal
maupun horizontal.
Latihan 4. Repeat Background
Untuk pengaturan pengulangan dapat menggunakan properti

background-repeat dengan nilai atau value: no-repeat, repeat, repeat-
x dan repeat-y.

latihan_background_4a.html

latihan_background_4b.html

Latihan 5. Posisi Background
Untuk memposisikan background digunakan properti background-

position dengan value top=atas, right=kanan, bottom=bawah left=kiri
dan center=tengah atau dengan nilai x dan y.

latihan_background_5.html
Membuat agar gambar tersebut berada tepat ditengah dokumen

dengan pengulangan (repeated) secara vertikal.

5 Tabel
Untuk membuat table yang sederhana ada 3 elemen utama yaitu table,
tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti
dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel
kemudian tag <td> (table data) adalah untuk membuat kolom pada
tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell
yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di
tampilkan.
Latihan 1. Membuat Tabel HTML

latihan_tabel_1.html

Latihan 2. Mengatur Lebar dan Tinggi Tabel
Untuk mengatur lebar table digunakan atribut width atau bisa juga
dengan style CSS dengan properti width. Untuk lebar dan tinggi dari
td kita gunakan atribut style dengan properti width dan height.

Latihan 3. Menggabungkan Kolom pada Tabel
Cell maupun baris dan kolom dari tabel dapat kita gabungkan dengan
menggunakan atribut colspan untuk menggabungkan kolom dan
atribut rowspan untuk menggabungkan baris dalam tabel.

latihan_tabel_3a.html

latihan_tabel_3b.html

Latihan 4. Mengatur Jarak Kolom pada Tabel
Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding

dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell,

sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

latihan_tabel_4a.html

latihan_tabel_4b.html
Latihan 5. Membuat Title dan Caption pada Tabel
Dalam pembuatan tabel juga dapat menambahkan title dengan

menggunakan tag <caption> tepat setelah tag <table> dan juga bisa
mengganti td dengan th (table heading) sebagai title dari baris
maupun kolom. Caption dan th akan secara otomatis berada pada
posisi tengah dan th akan menghasilkan tulisan tebal.

Latihan 6. Membuat Background Tabel
HTML telah menyediakan atribut untuk mengatur dan memberi

warna pada tabel, yaitu dengan menggunkan atribut bgcolor. Atribut
bgcolor dapat digunakan untuk tag tabel (tag table) maupun untuk tag
kolom (tag th, tag td, maupun tag col).
Apabila atribut bgcolor dipasang pada tag <table>, maka atribut ini
berfungsi untuk memberikan warna keseluruhan tabel tersebut. Jika
atribut ini dipasang pada tag <th> atau <td> maka akan berfungsi
untuk memberi warna pada kolom. Untuk membuat background pada

tabel juga dapat menggunakan atribut style dengan properti
background.

Latihan 7. Image dalam Cell

Berikut ini tampilan hasilnya dari browser:

Latihan 8. Membuat Laporan


Latihan 9. Membuat Layout
Untuk membuat sebuah layout web dapat juga menggunakan element

tabel sebagai bagiannya. Ada beberapa bagian yang umum dari
sebuah layout web, bagian-bagian tersebut terdiri dari, header, menu,
content, sidebar, dan footer.


Berikut ini tampilan yang dihasilkan dari script diatas.

KUIS/TUGAS.
Buatlah menggunakan kode pemrograman HTML dengan syntak
table dan image untuk menghasilkan tampilan seperti berikut ini:
Isian menggunakan data dan foto pribadi anda.

6 Form
Form merupakan salah satu elemen dalam HTML yang digunakan

untuk menerima input dari pengunjung. Melalui form pengunjung
sebuah halaman web dapat melakukan interaksi dengan web.
Pengunjung dapat memasukan data melalui elemen-elemen input
seperti textfield, checkbox, radio button, textarea, submit button,
dropdown dan lain-lain. Selain itu pengunjung juga dapat melakukan
pemilihan data mengunakan elemen select list atau dengan istilah lain
combo box atau drop-down list. Form membuat sebuah halaman web
menjadi web interaktif dan dinamis, karena form merupakan satu-
satunya sarana bagi pengembang website untuk mendapatkan
informasi dari pengguna.
Elemen-elemen input pada form.

a. Text Box <input type=”text”/>
Digunakan untuk memasukkan input berupa text.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
name = nama dari variabel yang dikirim ke suatu aplikasi
value = akan menampilkan isinya sebagai nilai default
b. Password <input type=”password”/>

Digunakan untuk memasukkan password.
size = ukuran dari textbox dalam karakter, default 20
maxsize = maksimal banyaknya karakter yang dapat diterima
c. Hidden <input type=”hidden”/>

Digunakan untuk mengirim data ke suatu aplikasi yang tidak
diinginkan untuk dilihat oleh browser.

value = nilai dari variabel
d. Check Box <input type=”checkbox”/>

Check box digunakan untuk dapat memilih lebih dari satu pilihan.
value = nilai dari variable
checked = ( checkbox yang sudah ditandai )
e. Radio Button <input type=”radio”/>

Radio Button digunakan untuk dapat memilih hanya satu pilihan.
value = nilai dari variabel
checked = ( checkbox yang sudah ditandai )
f. Push Button <input type=”button”/>

Elemen ini biasanya digunakan dengan JavaScript atau VBScript
untuk menghasilkan suatu aksi.
value = label teks diatas tombol
g. Submit <input type=”submit”/>

Setiap elemen form membutuhkan tombol submit untuk
mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan
dalam atribut ACTION dalam elemen FORM.
name = nama dari variabel yang dikirim ke suatu aplikasi.
value = label teks diatas tombol
h. Image Submit Button <input type=”image”

src=”url”/>
Digunakan untuk menggantikan tombol standar submit dengan
image.

i. Reset <input type=”reset” />
Digunakan untuk mereset semua masukan form.
value = text label on the button
j. Text Area <textarea>…</textarea>

Elemen untuk memasukkan teks secara leluasa seperti notepad.
name = nama dari varibel yang dikirim ke suatu aplikasi
rows = panjang baris dalam karakter
cols = tinggi dalam karakter
k. Select <select>…</select>
Daftar isi dalam property select menggunakan tag <option>
size = jumlah pilihan yang dapat terlihat
name = nama dari suatu variabel yang terkirim ke suatu aplikasi
Latihan 1. Membuat Form Pesan

latihan_form_1.html

Latihan 2. Membuat Form Login

latihan_form_2.html
Latihan 3. Membuat Form Registrasi

latihan_form_3.html

KUIS/TUGAS.
Buatlah kode pemrograman menggunakan syntak yang ada dalam
form dan table untuk menghasilkan tampilan sebagai berikut:

7 Javascript
JavaScript adalah bahasa pemrograman web yang bersifat Client Side

Programming Language. Client Side Programming Language adalah
tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client.
Aplikasi client yang dimaksud merujuk kepada web browser seperti
Google Chrome dan Mozilla Firefox.
Latihan 1. Javascript Date and Time

latihan_javascript.html
Latihan 2. Message Box
Message Box pada Javascript sering juga disebut sebagai Popup Box.
Message Box biasanya digunakan untuk membuat sebuah konfirmasi
atau pemberitahuan yang penting. Message Box atau Popup Box
terdiri dari 3 jenis, yaitu Alert Box, Confirm Box dan Prompt Box.
1. Alert Box
Alert Box biasanya digunakan memberitahu suatu informasi ke user.
Ketika Popup Alert muncul, user hanya dapat mengklik tombol "OK"
Syntax:
window.alert("Teks yang ingin
ditampilkan");
atau
alert("Teks yang ingin ditampilkan");

“latihan_javascript_alertbox.html”
2. Prompt Box
Prompt Box biasanya digunakan jika kamu menginginkan user untuk
menginputkan value sebelum melakukan sebuah proses. Ketika popup
Prompt Box muncul, user harus mengklik tombol "OK" atau "Cancel"
untuk melakukan proses inputan yang telah dimasukkan. Jika
mengklik OK maka value inputan akan diproses, jika "Cancel" maka
akan return Null.
Syntax:
window.prompt("Teks yang ingin
ditampilkan","defaultText");

“latihan_javascript_promptbox.html”
3. Confirm Box
Confirm Box biasanya digunakan jika diperlukan user untuk
melakukan verifikasi atau melakukan konfirmasi sesuatu. Ketika
confirm box muncul maka user dapat meng-klik "OK" atau "Cancel".
Jika user meng-klik "OK" maka akan bernilai true, jika meng-klik
"Cancel" maka akan bernilai false.
Syntax:
window.confirm("Teks yang ingin
ditampilkan");

“latihan_javascript_confirmbox.html”

8 Cascading Style Sheets
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian
instruksi yang menentukan bagiamana suatu text akan tertampil di
halaman web.
Layout web dasar yang sering kita temukan adalah seperti yang ada
pada gambar Elemen-elemen Layout pada Dokumen Web.
Elemen-elemen Layout pada Dokumen Web
Elemen Header
Seperti namanya, merupakan elemen yang berisi judul dan
penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo
website, menu-menu global (seperti login dan logout), maupun nama
halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-
halaman lain dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi
konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau
menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau

bahkan di kiri dan kanan konten, sesuai dengan kreatifitas
perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web
untuk melihat teks yang berada pada bagian ini.
Elemen Footer
Bagian penutup dari website, yang dapat saja berisi informasi lain
tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke
website lain.
Latihan 1. Membuat Tampilan Layout Sederhana dengan HTML

dan CSS
“index.html”

“style.css”

Pengantar Praktikum
Microsoft Access 2010
Pengantar Praktikum Microsoft Access

2010
1 Pengenalan Microsoft Access 2010
A. Pengertian Microsoft Access

Microsoft Access adalah suatu program aplikasi basis data komputer
relasional yang digunakan untuk merancang, membuat dan mengolah
berbagai jenis data dengan kapasitas yang besar.
B. Pengertian Database
Database atau biasa disebut basis data adalah sekumpulan data atau
informasi yang terdiri atas satu atau lebih tabel yang saling
berhubungan antara satu dengan yang lain, di mana Anda mempunyai
wewenang untuk mengakses data tersebut, baik untuk menambah,
mengganti, mengedit, menghapus data dalam tabel-tabel tersebut.
Lebih sederhananya pengertian Database merupakan kumpulan dari

informasi yang disimpan dalam komputer dan saling berhubungan
satu sama lain secara siste-matik. Database ini dikelola dan dapat
digunakan untuk keperluan tertentu.
C. Tingkatan Database
Ada beberapa tingkatan Database yang perlu diketahui pada saat
nanti Anda bekerja di dalam program Access, antara lain :
Pengantar Praktikum Microsoft Access 61

2010
1. File terdiri dari record-record yang menggambarkan satu kesatuan
data yang sejenis.
2. Record merupakan kumpulan dari beberapa field yang saling
berhubungan ter-simpan dalam bentuk baris pada tabel. Satu tabel
bisa terdiri dari beberapa record sekaligus.
3. Field merupakan temapat data atau informasi dalam kelompok
sejenis yang dimasukkan atau diinputkan pada bagian kolom tabel.
4. Character merupakan bagian data terkecil yang berjenis huruf,
angka (numeric) atau karakter khusus yang membentuk sutau item
data/field.
D. Tampilan Microsoft Access 2010
Gambar 1. Tampilan Microsoft Access 2010

2010
Dengan Microsoft Access, penggun dapat membuat dan memodifikasi
tabel, formulir entri data, query, laporan dan mengelola database
dengan cara mudah dan cepat. Pada saat membuka maupun membuat
database baru, maka akan tampak tampilan Microsoft Access 2010
seperti gambar 1.
E. Fitur-Fitur Microsoft Access 2010

Pada Microsoft 2010, di mana terdapat fitur-fitur baru yang tidak
terdapat pada versi Microsoft Access sebelumnya, antara lain :
a. Calculated untuk jenis data (Data Type) pada Table Design.

Pada saat pembuatan tabel, Anda dapat memasukkan rumus
(expression) yang pada versi sebelumnya tidak dapat membuat
atau menambahkan rumus dan hanya bisa dilakukan pada Query,
Control, Macro maupun Code VBA misalkan field TOTAL =
UNIT * HARGA
b. Navigation Control. Access 2010 memiliki fitur kontrol navigasi

baru, yang memungkinkan Anda dengan cepat menambahkan
navigasi dasar untuk aplikasi database, dan ini sangat membantu
jika Anda membuat database Web. Dengan menambahkan kontrol
Navigasi ke halaman "Home" dari aplikasi Anda, pengguna dapat
dengan cepat beralih antara form dan laporan dengan

2010
menggunakan antarmuka, intuitif tab, seperti yang ditunjukkan
pada gambar berikut:
c. Web Database Access 2010 memiliki cara baru untuk

menggunakan aplikasi database ke server SharePoint sebagai
database Web. Hal ini memungkinkan Anda dan rekan kerja Anda
untuk menggunakan database dalam browser Web, atau dengan
menggunakan Access 2010 untuk membukanya dari situs
SharePoint. Jika Anda merancang database untuk web-kompatibel,
dan memiliki akses ke server yang menjalankan SharePoint
Layanan Access, Anda dapat mengambil keuntungan dari metode
penyebaran baru.
d. Data Macros. Mirip dengan "pemicu" dalam Microsoft SQL

Server, macro Data memungkinkan Anda untuk melaksanakan
tugas pemrograman setiap kali data yang diubah dalam sebuah
tabel. Anda dapat melampirkan macro langsung ke event tertentu,
seperti After Insert, After Update, atau Before Change, atau Anda
dapat membuat macro mandiri data yang disebut dari Event.
e. Dan fitur-fitur lainnya.
F. Object Database Access

Terdapat beberapa objek database yang terdapat pada Microsoft
Access 2010, antara lain :

2010
a. Tables, adalah objek database yang digunakan sebagai sarana
untuk menyimpan data yang telah diolah.
Table terdiri atas :
1. Field Name : atribut dari sebuah table yang menempati bagian
kolom.
2. Record : Isi dari field atau atribut yang saling berhubungan yang
menempati bagian baris.
b. Queries, adalah objek database yang berfungsi untuk

menampilkan, menyunting dan menyaring suatu data sesuai
dengan kriteria yang diinginkan serta dapat memasukkan suatu
expresi.
Query dibedakan menjadi 2, yaitu :
1. DDL (Data Definition Language) digunakan untuk membuat
atau mendefinisikan obyek-obyek database seperti membuat
tabel, relasi antar tabel dan sebagainya.
2. DML (Data Manipulation Language) digunakan untuk
manipulasi database, seperti: menambah, mengubah atau
menghapus data serta mengambil informasi yang diperlukan
dari database.
c. Form, adalah objek database yang digunakan untuk memasukkan

dan mengedit data atau informasi yang ada dalam suatu database
dengan menggunakan bentuk tampilan formulir.
d. Report, adalah objek database yang digunakan untuk

menampilkan data atau informasi dalam bentuk laporan.
e. Macros, adalah rangkaian perintah yang dapat disimpan dan

dijalankan secara otomatis, misalnya membuka form, mencetak
laporan di layar, dan lain-lain.

2010
f. Moduls, adalah program kecil atau procedur yang kegunaannya
adalah untuk perancangan modul aplikasi pengolahan database
tingkat lanjut.
G. Menjalankan Program Microsoft Access 2010

Untuk menjalankan atau mengaktifkan progam Microsoft Access
2010, dapat dilakukan dengan beberapa cara :
a. Klik tombol Start - All Programs - Microsoft Office - Microsoft

Access 2010
b. Atau klik dua kali icon Microsoft Access pada jendela desktop,
sehingga muncul tampilan jendela Microsoft Access 2010.

2010
H. Membuat File Database
Untuk membuat file database baru, dapat dilakukan dengan langkah
langkah sebagai berikut :
a. Pilih Blank Database
b. Klik tombol Browse, hingga muncul jendela File New
Database

2010
c. Pindahkan letak direktori atau drive-nya ke data kerja Anda di
Data D: atau Data E:, lalu buat folder NPM dan Nama Anda.
d. Pada File Name, ketik db_test, higga kembali ke tampilan
semula
e. Klik tombol Create
I. Membuat Tabel
Setelah membuat file Database, tahapan berikutnya adalah membuat
file tabel. Ada 2 (dua) cara untuk membuat file Tabel, antara lain :
1. Membuat Tabel dengan Datasheet View

Dalam keadaan standar, setelah membuat file database, maka yang
muncul pertama kali yang aktif adalah objek tabel sudah tampil
dalam jendela Datasheet View berikut :
Ada beberapa tahapan jika ingin mengisi data pada jendela datasheet
view seperti di atas, yaitu :
a. Membuat Nama & Tipe Data Field: Klik judul kolom Clik to
Add, kemudian pilih Tipe Data yang akan digunakan, misalnya
diisi dengan tipe data Number, sehingga judul kolom Click to
Add berubah menjadi Field1 selanjutnya tinggal menganti
(rename) judul kolom atau Field1 tadi menjadi NIP.
b. Memasukkan Data: Klik di kolom yang akan di isi datanya,
misalnya data 12345 di Field NIP.

2010
c. Menyimpan Tabel: Klik Icon Save atau (Ctr + S), kemudian isi
dalam kotak dialog Save As dan ketik di bagian Tabel Name nama
filenya, misal tbl_datapegawai kemudian klik tombol OK
2. Membuat Tabel dengan Design View

Untuk membuat Tabel dengan menggunakan Design View, dapat
dilakukan dengan langkah sebagai berikut :
a. Klik tombol View – Design View, kemudian

muncul kotak dialog Save As dan Ketikan judul tabel yang akan
dibuat.

2010
b. Atau klik tab Create – Table Design, hingga muncul jendela
desain tabel (struktur tabel) berikut:
c. Kemudian isikan data seperti File Name, Data Type dan

Description.
d. Setelah diisi, klik tombl Save (Ctrl + S), muncul kotak dialog Save
As simpan dengan nama tabel tbl_datapegawai
e. Klik OK
J. Mengolah Desain Tabel

Pada jendela Design View, terdapat beberapa item untuk membuat
nama field (Field Name), memilih jenis data (Data Type), mengisi
keterangan (Description), menetapkan field kunci pengurutan data
(Primary Key) dan mengatur data dengan Field Properties.
2010
1. Nama Field (Field Name)
Field Name digunakan untuk memasukkan nama field yang akan
dibuat. Syarat pembuatan Nama Field (Field Name) :
a. Nama field tidak boleh ada yang sama dalam satu tabel.
b. Maksimum nama field 64 karakter, dapat berupa kombinanasi
huruf, angka, spasi atau karakter khusus, kecuali tanda titik (.),
tanda seru (!), tanda petik atas („) dan tanda kurung siku ([ ]).
2. Tipe Data (Data Type)

Data Type untuk menentukan jenis data. Anda dapat memilih salah
satu jenis data yang mana pilihannya tergantung dari isi data tersebut.
Ada beberapa jenis data (Data Type) pada Access 2010 :
Tipe Ketarangan
Text Jenis data yang berisi teks atau angka atau karakter lainnya
yang tidak digunakan untuk operasi logika dan matematika.
Jenis data ini dapat menampung data sampai 255 karakter.
Memo Jenis data yang berisi teks atau angka atau karakter lainnya
dan dapat menampung data sampai 65,536 karakter.
Number Jenis data berupa angka yang dapat digunakan untuk
operasi logika dan matematika. Ada beberapa pilihan
ukuran bilangan dan jumlah digit tertentu.
Date/Time Jenis data yang dapat menyimpan format tanggal dan waktu
Currency Jenis data yang dapat menyimpan format mata uang dan
tingkat ketelitiannya mencapai 4 decimal
AutoNumber Jenis data yang dapat membuat penomoran secara
otomatis, dengan syarat field tersebut harus menggunakan
Primary Key
Yes/No Jenis data yang dapat menampung salah satu data dari dua
pilihan yaitu Yes/No, True/False atau On/Off
OLE Object Jenis data yang dapat menampung objek berupa gambar,
grafik, suara, video atau data yang dapat diambol dari
aplikasi lain. Ukuran maksimum adalah 2 GB
Hyperlink Jenis data yang berisi khusus untuk mengkoneksikan antar
data dengan interface luar. Anda dapat koneksi sesuai
dengan alamat yang dituju, seperti alamat email, website,
dan lain sebagainya

2010
Tipe Ketarangan
Attachment Jenis data yang dapat menyimpan objek attachment, misal
file Word, Excel, MP3, Zip dan lainnya. Anda dapat
mengedit maupun menyimpannya kembali ke bentuk
semula
Calculated Jenis data ini terdapat pada versi Access 2010 (versi
sebelumnya tidak ada), tujuannya Anda dapat menghitung
operasi matematika, misal TOTAL sama dengan GAJI POKOK
ditambah TUNJANGAN, maka pada field TOTAL dan pada
jendela Expression Builder diisi [GAJI
POKOK]+[TUNJANGAN]
Lookup Wizard Jenis data yang digunakan untuk membuat sebuah daftar
pilihan dalam bentuk list box atau combo box.
3. Keterangan (Description)
Description untuk menampilkan teks keterangan pada bagian status
bar dalam jendela datasheet sebuah tabel atau query. Dalam hal ini,
Anda boleh dikosongkan atau diisi keterangannya. Jumlah teks yang
dapat diisi maksimum 255 karakter.
4. Primary Key
Primary Key adalah field yang digunakan sebagai field indeks utama
atau field kunci pengurutan data dari sebuah tabel.
Untuk menetapkan field misal ID dibuatkan Primary Key, maka

lakukan langkah berikut ini :
a. Aktifkan jendela Design View
b. Pilih field yang akan dijadikan sebagai Primary Key
c. Lalu klik tombol Primary Key pada group Tools
Apabila field ID ditetapkan sebagai menggunakan Primary Key,

maka secara otomatis pada Jendela Field Properties, baris Indexed
yang semula No akan berubah menjadi Yes (No Duplicate). Ada 3
pilihan pada baris Indexed di jendela Field Properties:
 No artinya field tersebut tidak di indeks (diurutkan)

2010
 Yes (Duplicate OK) artinya field tersebut secara otomatis di
indeks (di-urutkan), dan membolehkan Anda memasukkan data
yang sama.
 Yes (No Duplicate) artinya field tersebut secara otomatis di
indeks (di-urutkan), namun tidak diperbolehkan memasukkan
data yang sama.

2010
Latihan 1. Membuat File Database
1. Buat database dengan “db_kantor”, simpan dalam Folder Anda

masing-masing
2. Buat sebuah tabel dengan nama “tbl_datapegawai”, kemudian
isikan field name dan data sesuai gambar berikut.
KUIS / TUGAS
1. Buat tabel baru dengan mengguakan Table Design dengan
struktur tabel sebagai berikut:
Field Name Data Type Description
NPM Number Nomor Pokok Mahasiswa
Nama_Lengkap Text Nama Mahasiswa
Tmpt_Lahir Text Tempat Lahir Mahasiswa
Tgl_Lahir Date/Time Tanggal Lahir Mahasiswa
Jen_Kel Text Jenis Kelamin Mahasiswa
Alamat_Mhs Memo Alamat Mahasiswa
Telp_HP Text Nomor Telpon
2. Gunakan ketentuan berikut ini:

a. NPM sebagai Primary Key

2010
b. Simpan dengan nama “tbl_datamahasiswa” di dalam database
“db_kampus”
c. Isikan data sesuai tabel berikut ini.

2010
2 Operasi Tabel
Banyak hal yang dapat dilakukan dalam pengaturan field yang
terdapat pada tabel, misalnya mengganti field, menambah atau
menyisipkan field, memindahkan field, menghapus field dan lain-lain.
A. Membuat Lookup
Misal: membuat tombol pilihan list untuk field unit dengan Type
Data Lookup Wizard, ditempatkan setelah field Nama_Pegawai di
database sebelumnya yaitu db_kantor.
1. Aktifkan tabel yang akan di buat tombo, misal tbl_datapegawai
2. Masuk ke Mode Design View, sehingga muncul jendela Table
Design
3. Blok atau seleksi field Jabatan
4. Klik Insert Rows atau klik mouse kanan, lalu pilih Insert Rows
5. Pada Field Name, ketik Unit
6. Pada Data Type, pilih Lookup Wizard, hingga muncul jendela

Lookup Wizard dengan 2 opsi pilihan yaitu:
1. Opsi 1 “I want the lookup field to get the values from another
table or query” artinya mengambil atau memakai data dari
tabel atau dari perintah query.

2010
2. Opsi 2 “I will type in the values that I want” artinya mengisi
dan masukkan sendiri nilai-nilai yang diinginkan.
7. Dari ke dua opsi diatas, dipilih ops ke-2 dengan data yang baru
akan dibuat, kemudian klik Next.
8. Pada Number of colums, akan terisi default 1 (tidak perlu diisi),

kemudian dibagian field Col1 isikan data berikut ini:

2010
9. Klik Next – Finish. Akan terlihat di tampilan field properties
data lookup yang diisikan sebelumnya akan terlihat dibagian
Row Source.
10. Klik tombol View, untuk ke mode Datasheet View, lalu

muncul pesan konfirmasi jawab Yes.
11. Perhatikan, apa yang terjadi pada tampilan Datasheet pada
saat akan mengisi data Unit, maka akan muncul tombol pilihan
(combo box).

2010
B. Field Properties pada Table Design
Field Properties yang terdapat pada desain tabel (table design)
digunakan untuk mengatur format tampilan, seperti format angka,
tanggal, lebar field (kolom), pemasuk-an data (input mask),
membatasi atau mengontrol pemasukan data (validation rule), pesan
kesalahan (validation text), pengaturan indeks (index), dan lain
sebagainya.
1. Properti Field Size
Field size digunakan untuk menentukan berapa jumlah karakter
maksimum pada saat data dimasukkan. Dalam keadaan standar,
lebar field yaitu 255. Umumnya field size jenis datanya (data type)
berbentuk Text.
2. Properti Format
Properti format digunakan untuk mengubah tampilan data dalam
format yang tetap pada saat memasukkan data. Misal jenis data
Number (Angka) dan Date/Time.
Bila pilihan type data Angka (Number) dan Date Time maka akan
muncul tampilan berikut:
3. Properti Decimal Place

2010
Untuk mengatur tampilan angka dengan format desimal yang
diinginkan. Dalam keadaan standar, tampilan angka tanpa desimal
(auto). Pengaturnya pada field yang berjenis data Number maupun
Currency, dengan maksimal tingkat ketelitiannya mencapai 15
digit.
4. Properti Input Mask

Input Mask digunakan untuk menentukan tampilan pada saat
memasukkan data di layar. Namun jika menginginkan data
ditampilkan apa adanya saat di-masukkan, jangan menggunakan
dan mengatur properti ini.
Misal : ingin memasukkan data GA-001-0 pada kolom atau field

KODE, maka penulisan pada properti Input Mask :
LL-999-9 atau LL-000-0 | xx-000-00
Artinya data yang dapat Anda masukkan adalah :

LL : dua karakter pertama harus berbentuk Label
999 atau 000 : tiga karakter kedua, harus berbentuk Angka
9 atau 0 : satu karakter terakhir, harus berbentuk Anga.
5. Properti Caption
Properti Caption digunakan untuk menempatkan keterangan
sebagai judul kolom, form atau laporan.
6. Properti Default Value

Default Value adalah nilai yang pertama kali muncul pada saat
ingin menambah-kan/memasukkan data record ke field tersebut
agar selalu ditampilkan lagi pada pengisian record berikutnya.
Pengisian default value umumnya untuk pengisian data yang sama.

2010
Misal : semua nilai UAS untuk semester sekarang nilai ujiannya
kebanyakan 80
7. Properti Validation Rule

Validation rule digunakan untuk membatasi atau mengontrol
pemasukan data pada field tertentu.
Kasus-1 : Misal Anda ingin membatasi field UNIT maksimum

paling tinggi adalah 10, bilamana pada saat Anda memasukkan
data lebih dari angka tersebut, maka pada program Access akan
menolak dan muncul pesan kesalahan.

2010
Masukkan perintah pada baris Validation Rule yaitu <=10 artinya
pada saat Anda memasukkan angka pada field UNIT harus di
bawah angka 10, bilamana lebih dari 10, maka akan ditolak.
Kasus-2 : Anda juga dapat memasukkan kriteria yang lainnya

seperti misalnya NILAI UAS antara 0 sampai dengan 100, maka
penulisannya pada baris Validation Ruler diketik :
Between 0 And 100
Kasus-3 : Data yang dapat dimasukkan pada field SKS adalah 2, 3,

4 atau 6. Maka penulisannya pada baris Validation Ruler diketik :
2 or 3 or 4 or 6
Kasus-4 : Pada field KODE berikan validasi, di mana KODE

harus di awali dengan karakter AA/AB/AC dan 4 digit terakhir
harus berupa Angka. Terlebih dulu aktifkan field KODE, lalu
isilah pada :
 Input Mask : LL-9999
 Validation Rule : LEFT([KODE],2)=”AA” or
LEFT([KODE],2)=”AA” or LEFT([KODE],2)=”AA”
Pada validation ruler, Anda dapat menggunakan fungsi-fungsi
STRING seperti fungsi LEFT, RIGHT dan MID tergantung dari
kasusnya.
8. Properti Validation Text

Validation Text digunakan untuk memberikan pesan kesalahan
pada validation rule pada saat Anda memasukkan atau
menambahkan data yang tidak sesuai dengan batasan yang telah
dibuat pada validation rule.
Misal :
 Nilai UAS yang boleh dimasukkan antara 0 sampai dengan 100

2010
 Jika Anda memasukkan angka di luar batas tersebut, berikan
pesan kesalahan :
“Anda salah memasukkan data, silakan ulangi lagi !!!!”
Penyelasainnya :
 Aktifkan field NILAI UAS
 Pada baris Validation Rule, ketik : <=100 atau boleh Between 0
And 100
 Pada baris Validation Text, ketik : Anda salah memasukkan
data, silakan ulangi lagi !!!
9. Properti Required
Properti Required digunakan untuk mengatur apakah field ini
boleh dikosongkan atau tidak pada saat pengisian record baru.
10. Properti Indexed

Properti Indexed digunakan untuk membuat indeks pada field ini.
Ada tiga pilihan pada Indexed, yaitu :
 Indexed → No artinya field tersebut tidak di indeks (diurutkan)

 Indexed →Yes (Duplicate OK) artinya field tersebut secara
otomatis di indeks (di-urutkan), dan membolehkan Anda
memasukkan data yang sama.
 Indexed → Yes (No Duplicate) artinya field tersebut secara
otomatis di indeks (diurutkan), namun tidak diperbolehkan
memasukkan data yang sama.

2010
Latihan 1. Modifikasi Tabel
a. Aktifkan atau buka file table tbl_datapegawai
b. Dalam keadaan jendela Design View, lakukan perubahan berikut
pada struktur tabel, antara lain.
 Tambahkan Field Name baru yaitu Status dengan Type Data
“Yes/No” setelah field Jenis_Kelamin
 Ubah pada kolom Field Name yaitu Nip menjadi NIP
 Tambahkan field baru setelah field Nama_Pegawai yaitu Unit
dengan data type Lookup Wizard. Pilih opsi ke-2 yaitu “I will
type in the value that I want”, klik tombol Next, lalu diisikan
datanya:
 Klik tombol Finish, kemudian kembali ke Datasheet View,

kemudian isikan data Status dan Unit
 Jika muncul konfirmasi, jawab Yes beberapa kali.

2010
c. Lakukan operasi berikut ini pada tabel tbl_datapegawai
 Pindahkan Field Jenis_Kelamin dan tempatkan di sebelah
Field Nama_Pegawai
 Lakukan pencarian data pegawai dengan field Golongan = “II-
A”
 Lakukan pencarian dan penggantian data dengan field
Nama_Pegawai = “Putri” ganti menjadi “Silvi”
 Lakukan pengurutan data pegawai berdasarkan field
Nama_Pegawai secara Ascending (A-Z)
 Lakukan pengurutan data pegawai berdasarkan field NIP
secara Descending (terbesar ke terkecil)
 Lakukan Data Filter di field Golongan dengan kriteria “III-
A”
KUIS / TUGAS
1. Buat file tabel baru dengan nama tbl_barang dengan struktur
tabel sebagai berikut:
Field Name Data Type Description

Kode Text Kode Barang
Nama_Barang Text Nama Barang
Unit Number Unit dari Barang
Harga_Satuan Number Tanggal Lahir Mahasiswa
Total_Harga Calculated Total harga Barang

2010
Ketentuan:
a. Gunakan field Kode sebagai Primary Key dengan Field Size 6
dengan ketentuan 2 karakter pertama huruf (KE) dan 4 karakter
berikutnya penghubung dan angka (-001)
b. Pada field Kode berikan validasi di mana Kode harus berawalan
KE/SE/TA/JE dan tiga karakter terakhir berupa Angka.
c. Bila data yang dimasukkan selain di atas, berikan peringatan:
“Anda salah memasukkan KODE, silakan isikan 2 karakter
pertama KE/SE/TA/JE”
d. Pada field Nama_Barang, gunakan Lookup Wizard lalu diisi
datanya KEMEJA, SEPATU, TAS dan JEANS
e. Unit menggunakan format Curency Rupiah tanpa Decimal dan
Unit tidak boleh lebih dari 100
f. Harga_Satuan menggunakan format Curency Rupiah tanpa
Decimal
g. Pada field Total_Harga diisi bagian Expression rumus
[Unit]*[Harga_Satuan] lalu format Curency Rupiah
2. Kemudian isikan datanya seperti berikut:

2010
Petunjuk:
Kolom Total_Harga, tidak perlu diisikan datanya karena secara

otomatis muncul dengan sendirinya.
3. Mencopy File Tabel

Kasus: Copy file tabel tbl_barang sebanyak 3 kali, lalu ubah
nama filenya menjadi tbl_barang_1, tbl_barang_2 dan
tbl_barang_3 dengan cara:
a. Klik mouse kanan pada file tabel tbl_barang
b. Pilih dan klik Copy
c. Letakkan di di bawah file tabel (di tempat yang kosong), klik
mouse kanan lalu klik Paste.
d. Pada Table Name, ganti nama filenya menjadi tbl_barang_1
e. Klik tombol OK, silakan ulangi kembali untuk file yang lainnya.
4. Mengurutkan Data (Data Sort)

Kasus: Urutkan data berdasarkan Total_Harga secara Descending
pada file tbl_barang_1
5. Menyaring Data (Filter Data)

Kasus-1: Filter data berdasarkan Unit di bawah sama dengan 25
pada file tbl_barang_2 (jika berhasil, akan muncul 6 record).
Kasus-2: Filter data berdasarkan Total_Harga antara 1,500,000

sampai dengan 5,000,000 pada file tbl_barang_3 (jika berhasil,
akan muncul 6 record).

2010
3 Membuat dan Mengatur Query
Query adalah sarana untuk mengatur data yang disimpan dalam tabel,
sehingga hanya data-data tertentu yang akan dimunculkan dalam
tabel. Secara fisik, query berupa tabel juga, jadi query adalah tabel
yang dibuat dari beberapa tabel lainnya dengan tujuan untuk
mengelompokkan data baru berupa tabel, dengan sumber dari tabel-
tabel yang telah ada.
Dengan query, Anda dapat menyortir data atau untuk menampilkan

data-data yang memenuhi kriteria tertentu, atau juga dapat berupa
suatu ekspresi (formula).
A. Membuat Query
Ada beberapa cara dalam membuat query pada tabel salah satu nya
dengan menggunakan Query Design, adapun langkah-langkahnya
sebagai berikut:
a. Klik tab Create

b. Pada group Queries, pilih dan klik Query Design, hingga muncul
jendela Show Table berikut:

2010
c. Pada jendela Show Table, pilih dan klik tabel atau query yang
akan di tampilkan, lalu klik tombol Add, atau klik dua kali nama
file nya. Misalnya pilih kedua file tersebut.
d. Klik tombol Close untuk keluar dari jendela Show Table, hingga
tampilan akan muncul seperti berikut.
Design Grid atau

QBE (Query By
Example) Grid
e. Pada jendela kerja Query diata, letakkan field-field yang

diinginkan pada kolom yang telah disediakan (QBE). Untuk u=itu
ada 3 (tiga) cara untuk menempatkan atau meletakkan field-field
tersebut, diantaranya:
 Pada kolom pertama baris Field, klik tombol pilihan lalu pilih
nama fieldnya, misal tbl_jual.No_Urut, ulangi langkah ini
untuk mengisi kolom berikutnya.
 Pada jendela Query di atas, pilih nama field yang akan
ditempatkan pada kolom pertama, lalu tarik (drag) ke kolom
pertama baris Field.
 Pada jendela Query di atas, klik dua kali nama field yang akan
ditempatkan pada jendela QBE.
Setelah menggunakan salah satu cara diatas dalam menempatkan

field-field tersebut, maka akan tampak hasilnya seperti berikut ini.

2010
B. Parameter Query
Parameter Query adalah query yang jika dijalankan akan

menampilkan sebuah kotak dialog yang meminta pemakai
memasukkan suatu informasi, seperti kriteria untuk memperoleh
sejumlah record atau suatu nilai yang ingin kita sisipkan dalam
sebuah field.
Parameter query juga merupakan alat bantu yang praktis jika

digunakan sebagai dasar untuk form atau report. Misal, Kita ingin
menampilkan laporan pendapatan atau pengeluaran Bulanan
berdasarkan parameter query. Anda harus mengisi pada kotak dialog
bulan laporan yang akan dicetak pada laporan, dan Microsoft Access
akan mencetak data sesuai dengan kriteria pada saat pemasukan data
yang dibuat oleh parameter query tadi.

2010
1. Membuat Parameter Query
Sebagai contoh dalam membuat sebuah parameter query untuk
menampilkan kotak dialog sesuai dengan kriteria nanti pada saat
pemasukan data.
a. Jendela harus dalam keadaan Design View.
b. Pada baris Criteria dan kolom Nama_Mobil, Ketikan sama
persis seperti berikut:
c. Langkah berikutnya adalah menentukan tipe data dari

parameter. Pada group Show/Hide, pilih dan klik Parameters,
hingga muncul jendela query parameters :
d. Pada kolom Parameter, ketik teks berikut : Ketikan Nama

Mobil dan pada kolom tombol pilihan Data Type, pilih Text

2010
e. Klik tombol OK, untuk keluar dari jendela Query Parameter.
2. Menjalankan Parameter Query

a. Jendela dalam keadaan Design View
b. Klik tombol View atau Run, hingga muncul kotak dialog
berikut:
c. Ketikan nama mobil yang ingin Kita tampilkan recordnya, misal

AVANZA, klik tombol OK, maka hasilnya akan muncul nama
mobil sesuai dengan kriteria yang Kita masukkan pada kotak
dialog Parameter.
Catatan :
Anda dapat mengoptimalkan parameter query dengan menggunakan
operator pada kriteria.

2010
Latihan 1. Query
1. Buat file Database baru dengan nama db_showroom pada folder

Anda.
2. Buat 2 (dua) file Tabel, antara lain:
a. File kesatu: tbl_mobil
Lalu isikan datanya seperti berikut:
b. File kedua: tbl_jual
Kemudian isikan datanya seperti berikut:

2010
3. Buat file Query dengan nama file Query Kendaraan
mengunakan Query Design.
Untuk tbl_jual.No._Urut, tbl_mobil.Kode,
tbl_mobil.Nama_Mobil, tbl_jula.Pembeli, tbl_mobil.Harga,
tbl_jula.Unit, tbl_jual.Tgl_Faktur. Kemudian tampilkan
dengan menggunakan tombol View atau Run.
4. Tampilkan data-data berikut menggunakan Criteria, antara lain:

a. Tampilkan semua data untuk field Nama_Mobil yang nama
mobilnya adalah AVANZA (jika berhasil, simpan File, Save
Object As : QUERY-1).
b. Tampilkan semua data untuk field Harga yang harga

mobilnya di atas sama dengan Rp. 170,000,000 (jika berhasil,
simpan File, Save Object As : QUERY-2)

2010
c. Tampilkan semua data untuk field Unit yang unit mobilnya
antara 5 sampai dengan 10 (jika berhasil, simpan File, Save
Object As : QUERY-3). Misal “>= 5 And <= 10” atau
“Between 5 And 10”.
d. Tampilkan semua data untuk field Kode yang kode mobilnya

A-001-TY atau X-004-DH (jika berhasil, simpan File, Save
Object As : QUERY-4). Misal “A-001-TY Or X-004-DH”.
e. Tampilkan semua data untuk field Nama_Mobil = JAZZ

atau HARGA di bawah Rp. 150,000,000 (jika berhasil,
simpan File, Save Object As : QUERY-5).
f. Tampilkan semua data untuk field Nama_Mobil = JAZZ dan

HARGA di bawah Rp. 150,000,000 (jika berhasil, simpan
File, Save Object As : QUERY-6).
g. Tampilkan semua data untuk field Nama_Mobil yang huruf

pertamanya A atau hurufnya terakhirnya Z. (jika berhasil,
simpan File, Save Object As : QUERY-7). Misal Like “A*”
Or Like “*A”.
h. Tampilkan semua data untuk field Nama_Mobil yang huruf

ketiganya N. (jika berhasil, simpan File, Save Object As :
QUERY-8). Misal Like “??N*”
i. Tampilkan semua data untuk field Tgl_Faktur untuk

Tanggal Faktur sebelum tanggal 15 Januari 2016 (jika
berhasil, simpan File, Save Object As : QUERY-9). Misal
<#15/01/2012#

2010
KUIS/TUGAS
1. Urutkan data berdasarkan field Unit secara Descending. Jika Anda

berhasil, maka akan diurutkan berdasarkan Unit dari yang terbesar
hingga terkecil. (Simpan dengan nama file: QUERY-10).
2. Tampilkan data berdasarkan field Pembeli yang namanya diawali

dengan huruf “A” dan “P”. Jika Anda berhasil, maka akan muncul
7 record. (Simpan dengan nama file: QUERY-11).
3. Tampilkan data berdasarkan field Pembeli yang huruf ketujuhnya

adalah huruf “T”. Jika Anda berhasil, maka akan muncul 2
record. (Simpan dengan nama file: QUERY-12).
4. Tampilkan data berdasarkan Tgl_Faktur antara tanggal

10/01/2016 sampai dengan 20/01/2016. Jika Anda berhasil, maka
akan muncul 7 record. (Simpan dengan nama file: QUERY-13).
5. Tampilkan data berdasarkan field Nama_Mobil = XENIA atau

Harga di bawah sama dengan Rp. 150.000.000 dan Unit di atas
sama dengan 10. Jika Anda berhasil, maka akan muncul 2 record.
(Simpan dengan nama file: QUERY-14).
6. Buat kotak dialog dengan menggunakan Parameter

berdasarkanTgl_Faktur. Masukkan teksnya pada baris Creteria
[Ketikan Tgl Faktur]. Simpan dengan nama file: QUERY-15.

2010
4 Mengolah Query
Dengan query, selain dapat menggabungkan beberapa tabel ke dalam

suatu query, mengurut data, menyaring (filter) data sesuai dengan
kriteria yang diingin-kan, juga dapat menambahkan field dengan
rumus (formula) baik perhitungan matematika maupun dengan
menggunakan fungsi-fungsi dalam Microsoft Excel, seperti fungsi
logika IF dan String.
A. Menambah Field dengan Rumus (Formula)
Di dalam query, Kita dapat menambahkan field baru dengan rumus

atau fungsi-fungsi untuk menghitung suatu nilai dalam database.
Sebagai contoh, kita menambahkan field baru Total_Harga yaitu
perkalian antara Harga dikalikan Unit.
Maka pada jendela desain query, kita tambahkan field baru di kolom
terakhir yaitu dengan mengetikkan rumus Total_Harga:
[Harga]*[Unit] seperti yang tampak di bawah ini :
Jika ditampilkan, maka akan muncul hasilnya seperti berikut:

2010
Catatan :
 Jika yang muncul hasilnya berupa simbol # pada field

Total_Harga, artinya lebar kolomnya tidak mencukupi, silakan
atur dan ubah lebar kolomnya.
 Kita dapat memasukkan field baru misalnya Discount yaitu 5%
dikalikan Total_Harga.
B. Fungsi Logika
Di dalam dunia kerja, sering kita jumpai permasalahan yang tidak

dapat diselesaikan hanya dengan menggunakan perumusan sederhana.
Bahkan sering terjadi suatu permasalahan dengan menawarkan
beberapa alternatif pemecahan tergantung pada ketentuan yang
berlaku untuk masing-masing pemecahan. Permasalahan semacam ini
di dalam Microsoft Access dapat diselesaikan dengan menggunakan
fungsi Logika.
Salah satu fungsi yang sering digunakan untuk memecahkan

permasalahan yang menyangkut peristiwa-peristiwa logika yaitu
dengan fungsi IIF. Sedangkan fungsi-fungsi yang lain dimanfaatkan
untuk membantu mengoptimalkan kegunaan fungsi IIF ini.
Dengan operasi logika ini, Microsoft Access dapat melakukan

penilaian apakah suatu pernyataan itu Benar (True) atau Salah
(False).
1. Ekspresi atau Pernyataan Logika
Jika Anda menggunakan operasi logika, biasanya diperlukan adanya

ekspresi atau pernyataan logika. Untuk menggunakan ekspresi atau
pernyataan logika, diperlukan salah satu operator relasi (operator
pembanding).

2010
2. Operator Relasi
Yang termasuk operator relasi yang sering digunakan di dalam

pernyataan logika, diantaranya adalah sebagai berikut:
Operator Relasi Artinya

= Sama dengan
< Lebih kecil
> Lebih besar
<= Lebih kecil atau sama dengan
>= Lebih besar atau sama dengan
<> Tidak sama dengan
Selain pengujian fungsi-fungsi logikan dengan menggunakan operator
relasi, Kita juga dapat memanfaatkan operator logika, di mana
operator ini akan menentukan hubungan antara elemen-elemen yang
diuji. Di dalam penggunaannya, fungsi logika sering digunakan
bersamaan dengan fungsi yang lainnya.
3. Fungsi Logika AND
Fungsi AND akan akan menghasilkan TRUE, apabila argumennya

BENAR, dan akan menghasilkan FALSE jika salah satu atau
beberapa argumennya SALAH.
Contoh Operator Logika AND :
Discount : IIf([Nama_Mobil]="AVANZA" And

[Unit]>=10,0.05,0)*Total_Harga
4. Fungsi Logika OR
Fungsi OR akan menghasilkan TRUE (atau menjalankan pilihan) bila

hasilnya BENAR, sebaliknya akan menghasilkan FALSE (atau tidak
menjalankan pilihan) bila hasilnya SALAH.
Contoh Operator Logika OR :

2010
Harga_Satuan: IIf([Nama_Mobil]="AVANZA" Or
[Nama_Mobil]="JAZZ",150000000,200000000)
5. Fungsi Logik IIF
Fungsi logika IIF yang sering digunakan di dalam pengambilan

keputusan ada 2 (dua) fungsi, yaitu fungsi logika IIF Tunggal dan
IIF Majemuk.
a. Fungsi Logika IIF Tunggal
Fungsi logika IIF Tunggal digunakan untuk menyelesaikan suatu

ekspresi logika yang mengandung beberapa perintah.
Bentuk umum penulisan Fungsi Logika IIF Tunggal
IIF(Ekspresi Logika, Perintah-1,Perintah-2)
Artinya jika ekspresi logika bernilai BENAR, maka Perintah-1 yang

akan dilaksanakan. Namun jika ekspresi logika bernilai SALAH,
maka Perintah-2 yang akan dilaksanakan.
Contoh Kasus Fungsi Logika IF Tunggal :
Tambahkan field Bonus, jika jumlah Unit>=15, maka Bonus =

Honda Vario, sedangkan jika jumlah Unit<15, maka Bonus =
Sepeda Gunung
Rumusnya adalah :
Bonus : IIF([Unit]>=15,”Honda Vario”,”Sepeda Gunung”)
atau rumusnya terbalik yang lebih kecil yang diuji.
Bonus : IIF([Unit]<15,”Sepeda Gunung”,”Honda Vario”)

2010
b. Fungsi Logika IIF Majemuk (IIF Nested)
Fungsi logika IIF Majemuk artinya di dalam fungsi logika IIF

dimungkinkan untuk memasukkan fungsi logika IIF lagi. Hal ini bisa
terjadi apabila alternatif pemecahan yang ditawarkan lebih dari dua.
Bentuk umum penulisan Fungsi Logika IIF Majemuk
IIF(Ekspresi Logika-1, Perintah-1,IIF(Ekspresi Logika-

2,Perintah-2, … …… ,IIF(Ekspresi Logika-n, Perintah-xn,yn)))
Contoh kasus Fungsi IIF Majemuk:
Isilah kolom Discount dengan ketentuan sebagai berikut :
 Jika Total_Harga >=2.500.000.000 (di atas = 2.5 M), maka

Discount = 20% dari Total_Harga
 Jika Total_Harga >= 2.000.000.000 (di atas = 2 M), maka
Discount = 15% dari Total_Harga.
 Jika Total_Harga >= 1.500.000.000 (di atas 1.5 M), maka
Discount = 10% dari Total_Harga.
 Jika Total_Harga >= 1.000.000.000 (di atas 1 M), maka Discount
= 5% dari Total_Harga.
 Jika Total_Harga < 1.000.000.000 (di bawah 1 M), maka
Discount = 0
Rumusnya adalah :
Discount : IIf([Total_Harga]>=2500000000,0.2,
IIf([Total_Harga]>=2000000000,0.15,
IIf([Total_Harga]>=1500000000,0.1,
IIf([Total_Harga]>=1000000000,0.05,0))))*[Total_Harga]

2010
C. Fungsi String
Fungsi Teks (String) yang sering disebut sebagai fungsi karakter

memuat fungsi-fungsi yang dapat digunakan untuk mengoperasikan
data yang berjenis karakter. Teks dapat berupa huruf (alphabetic),
angka (numeric), gabungan antara huruf dan angka (alphanumeric),
serta karakter-karakter khusus.
Di dalam penulisan formula, setiap data yang berupa teks, harus diapit
dengan tanda petik (“). Pada umumnya fungsi string/teks digunakan
untuk melengkapi fungsi-fungsi lain seperti fungsi logika (kombinasi
fungsi logika IIF dengan string). Sebenarnya fungsi-fungsi string
banyak sekali, namun yang sering digunakan pada Microsoft Access
di antaranya yaitu fungsi Left, Right dan Mid.
1. Fungsi Left
Fungsi Left digunakan untuk mengambil sebagian data berjenis teks

dari sebelah kiri sebanyak karakter yang diinginkan.
Bentuk umum penulisan Fungsi Left :
LEFT([Nama_Field],Jumlah karakter)
Contoh rumus:
LEFT([Nama_Mobil],3)
Tampak hasilnya di layar akan muncul 3 karakter pertama yang

diambil pada field Nama Mobil.
2. Fungsi Right
Fungsi Right digunakan untuk mengambil sebagian data berjenis teks

dari sebelah kanan sebanyak karakter yang diinginkan.
Bentuk umum penulisan Fungsi Right :

2010
RIGHT([Nama_Field],Jumlah karakter)
Contoh rumus:
RIGHT([Nama_Mobil],3)
Tampak hasilnya di layar akan muncul 3 karakter terakhir yang

diambil pada field Nama Mobil.
3. Fungsi Mid
Fungsi MID digunakan untuk mengambil sebagian data berjenis teks

mulai dari kedudukan tertentu sebanyak karakter yang diinginkan.
Bentuk umum penulisan Fungsi Mid:
MID([Nama_Field],Kedudukan_Mulai,Jumlah karakter)
Contoh rumus:
MID([Nama_Mobil],3,1)
Tampak hasilnya di layar akan muncul satu karakter pada posisi

karakter ketiga diambil dari field Nama Mobil.
D. Kombinasi fungsi Logika IF dengan fungsi String (Left, Right,

Mid)
Pemanfaatan fungsi String/Teks adalah fungsi Logika IF dan fungsi

String. Artinya untuk memecahkan permasalahan diperlukan
kombinasi atau gabungan antara fungsi logika IF dengan fungsi
lainnya, misal fungsi string/teks.
Contoh kombinasi fungsi logika IF dengan Teks (LEFT, RIGHT,

dan MID)

2010
Tambahkan Input Mask
seperti ini:
99\-L\-999\-L
Kemudian isikan datanya seperti berikut :
Buat File Query dengan nama QUERY RENTAL, seperti berikut :

2010
Ketentuan:
a. Tambahkan field JENIS FILM pada kolom ketiga dengan

ketentuan, diambil karakter terakhir dari Kode, jika:
 Kode = D, maka Jenis Film = DVD
 Kode = V, maka Jenis Film = VCD
b. Tambahkan field KATEGORI FILM pada kolom ketiga dengan

ketentuan, diambil 1 karakter dari Kode, jika:
 Kode = A, maka Kategori Film = ACTION
 Kode = C, maka Kategori Film = CARTOON
 Kode = D, maka Kategori Film = DRAMA
 Kode = K, maka Kategori Film = KOMEDI
c. Tambahkan field TAHUN BELI pada kolom kelima dengan

 Kode = 10, maka Tahun Beli = 2010

2010
Rumusnya adalah sebagai berikut:
JENIS FILM : IIf(Right([KODE],1)="V","VCD","DVD")

KATEGORI FILM : IIf(Mid([KODE],3,1)="A","ACTION",
IIf(Mid([KODE],3,1)="C","CARTOON",
IIf(Mid([KODE],3,1)="D","DRAMA","KOMEDI")))
TAHUN BELI : IIf(Left([KODE],2)="10",2010,

IIf(Left([KODE],2)="11",2011,2012))
Sehingga hasil akhirnya seperti berikut :
E. Menghitung Total dalam Query
Salah satu kelebihan Access, adalah pada objek query Anda dapat
menghitung Total (Sum, Avg, Max, Min, dan lain sebagainya),
dengan langkah sebagai berikut:
a. Tampilan harus dalam keadaan Datasheet View
b. Pada group Records, klik Totals, hingga muncul di

bawah baris New, muncul Totals.

2010
c. Pilih field mana yang akan jumlahkan, misal HARGA.
d. Pada tombol pilihan muncul fungsi yang ingin di hitung, misal
SUM. Maka secara otomatis field HARGA akan dijumlahkan.
Untuk menjumlahkan field-field yang lainnya, klik tombol pilihan
lalu pilih fungsi Sum.
F. Membuat Kriteria pada Kalkulasi Total
Anda dapat membuat kalkulasi Total sesuai dengan kriteria yang

diinginkan, dengan syarat Total-nya masih aktif.
Misal: Jumlahkan semua kendaraan yang NAMA MOBIL-nya adalah

AVANZA atau XENIA Caranya adalah sebagai berikut:
a. Tampilan harus dalam keadaan Design View

b. Pada baris Criteria, kolom field Nama_Mobil, Ketikan
AVANZA, sedangkan pada baris Or, kolom field Nama_Mobil,
Ketikan XENIA.

2010
c. Jika ditampilkan, maka hasilnya akan tampak seperti berikut:

2010
KUIS/TUGAS
1. Buat file Table baru dengan nama RENTAL, di mana struktur

tabelnya sebagai berikut:
Field Name Data Type Keterangan

KODE Text Primary Key
Input Mask : 99\-L\-999\-L
JUDUL FILM Text
Kemudian isikan datanya seperti berikut:
2. Buat File Query dengan nama QUERY RENTAL, kemudian

tampilkan semua field pada jendela QBE.
Ketentuan:
a. Tambahkan field JENIS FILM pada kolom ketiga dengan

ketentuan, diambil karakter terakhir dari Kode, jika:
 Kode = D, maka Jenis Film = DVD
 Kode = V, maka Jenis Film = VCD
b. Tambahkan field KATEGORI FILM pada kolom ketiga dengan

 Kode = A, maka Kategori Film = ACTION

2010
 Kode = C, maka Kategori Film = CARTOON
 Kode = D, maka Kategori Film = DRAMA
 Kode = K, maka Kategori Film = KOMEDI
c. Tambahkan field TAHUN BELI pada kolom kelima dengan

Sehingga hasil akhirnya seperti berikut:
d. Tambahkan field baru di kolom terakhir yaitu HARGA SEWA,

dengan ketentuan sebagai berikut :
 Jika Kode = V, maka Harga Sewa = 1000
 Jika Kode = D, maka Harga Sewa = 2000

2010
5 Relationship dan Operation Action Query
A. Pegertian Relationship
Database Relasional adalah suatu database yang di dalamnya terdapat

tabel-tabel yang saling berelasi satu sama lain. Relasi atau
keterhubungan antara satu tabel dengan tabel yang lainnya ditentukan
berdasarkan aturan-aturan tertentu. Relasi antar tabel ini sering
disebut dengan istilah Relationship.
B. Jenis-jenis Relationship
Ada 3 (tiga) jenis Relationship, antara lain :
a. One-to-one → Relasi 1 ke 1 (relasi satu ke satu) atau One to one

b. One-to-many → Relasi 1 ke n atau n ke 1 (relasi satu ke banyak
atau banyak ke satu)
c. Many-to-many → Relasi n ke n (relasi banyak ke banyak).
Relasi ini digambarkan dengan suatu garis lurus yang

menghubungkan antara dua tabel. Untuk lebih mudah mencerna,
berikut di bawah ini contoh relationship

2010
Relasi antar tabel pada database relasional ini dihubungkan oleh
sebuah Key. Dikenal ada 2 macam key, yaitu Primary Key dan
Foreign Key.
Penjelasan Ilustrasi Relationship:
Jika di dalam suatu database terdapat dua tabel, yaitu Tabel Anggota
dan Tabel Buku yang saling berelasi. Relasi antara kedua tabel ini
adalah Many-to-many (Banyak ke banyak), maka secara teoritis akan
muncul Tabel Buku baru yang menghubungkan kedua tabel tersebut,
sebut tabel penghubung ini adalah Tabel Transaksi. Selanjutnya
Tabel Transaksi disebut sebagai Tabel Relasi (yaitu tabel yang
merelasikan atau menghubungkan Tabel Anggota dan Tabel Buku).
Tabel yang dihubungkan oleh tabel relasi bisa disebut Tabel Acuan
atau Tabel Referensi (dalam kasus ini adalah Tabel Anggota dan
Tabel Buku).
Pada Tabel Anggota terdapat primary key begitu pula dengan Tabel
Buku. Primary key pada Tabel Anggota dan Tabel Buku akan
dijadikan sebagai Foreign Key pada Tabel Transaksi. Antara Primary
Key di Tabel Anggota maupun Primary Key di Tabel Buku akan
membentuk relasi dengan Foreign Key yang ada pada Tabel
Transaksi. Relasi yang dibentuk oleh Tabel Anggota dan Tabel
Transaksi adalah satu ke banyak atau One-to-many, begitupun relasi
antara Tabel Buku dan Tabel Transaksi.
Dari contoh ketiga tabel tersebut, maka dapat ditarik kesimpulan

bahwa Tabel Anggota dan Tabel Buku adalah Tabel Acuan,
sedangkan Tabel Transaksi adalah Tabel Relasi. Pada Tabel Anggota
dan Tabel Buku terdapat Primary Key, selanjutnya primary key
tersebut dijadikan Foreign Key pada Tabel Transaksi. Relasi yang
dibentuk oleh Tabel Anggota dan Tabel Transaksi adalah relasi One-
to-many atau Satu ke banyak, demikian pula halnya relasi yang
dibentuk antara Tabel Buku dan Tabel Transaksi Sedangkan relasi
2010
antara Tabel Anggotadan Tabel Buku adalah May-to-many (Banyak
ke banyak).
C. Pengoperasian Action Query
Action query adalah query yang melakukan sesuatu terhadap record

dalam satu atau beberapa tabel hanya dalam satu operasi. Ada 4
(empat) jenis action query yaitu : make table, append query, update
query dan delete query.

2010
6 Form Design
A. Pengertian Form
Form digunakan untuk merepresentasikan ke user atau menerima

inputan dari user data-data dalam tabel/query dalam bentuk interface
grid, tombol dan lain-lain. Form dalam Access dapat dimasukkan ke
dalam form lain sebagai control sub form, biasanya jika kita bekerja
dalam transaksi master detail. Salah satu interface yang disediakan
oleh Microsoft untuk mempercantik tampilan Microsoft Access
adalah dengan menggunakan Form.
B. Membuat Form
Untuk membuat form bisa dilakukan dari menu Forms diantaranya

Form, Form Design, Blank Form, Form Wizard, dan More Forms.
Langkah-langkah membuat form mengunakan menu Form.
1. Klik tabel yang sudah jadi, misal tbl_barang seperti tampilan

berikut ini:
2. Klik tab Create, pilih Form.

2010
3. Hasilnya akan tampil seperti berikut ini:
4. Kemudian ganti judul dan Simpan dengan nama Form Barang.
Langkah-langkah membuat form menggunakan Form Wizard.

1. Pilih tabel yang sudah ada, misal tbl_barang
2. Kemudian klik menu Createl, pilih Form Wizard.
3. Pilih Semua field masukkan ke kolom Selected Fields dengan

menekan tombol >>.

2010
4. Klik tombol Next, akan tampil pilihan Layout untuk form. Misal
pilih model Columnar.
5. Kemudian pilih Next, lalu ganti dalam kotak text “What title do
you want for your form” menjadi Form Barang kemudian klik
Finish.
6. Untuk merubah dan mengelola tampilan bisa dilakukan di menu

Design View. Sehingga tampilan tampak sebagai berikut:

2010
2010
KUIS/TUGAS
1. Buat database db_hotel dan tabel tbl_kamar dengan ketentuan

sebagai berikut:
Field Name Data Ketentuan
Type
Kode_Kamar Text Field Size = 6
Input Mask = LL\-000
Validation Rule =
Left([Kode_Kamar];2)="EC" Or
Left([Kode_Kamar];2)="DE"
Validation Text = "Kode Salah,
Masukkan EC atau DE"
Tipe Text Combo Box =
"VIP";"SINGLE";"DOUBLE";"FAMILY"
Status Text Combo Box = "BERISI";"KOSONG"
Harga Number Format = Currency
Fasilitas Memo
2. Kemudian isikan datanya seperti dibawah ini:
3. Kemudian buat Form sehingga akan tampak tampilannya sebagai

berikut:

2010
2010
7 Control dan Command Button
Control-control yang terdapat dalam Access merupakan tools yang di

desain sebagai tools tambahan untuk menjalankan aplikasi database.
Diantaranya Text Box, Label, Button, Tab Control, dll.
Control Button digunakan untuk mengatur dan menampilkan baik

form maupun data-data tertentu yang terdapat dalam form database.
Langkah-langkah menggunakan control button sebagai berikut:
1. Buka form yang telah ada, misal Form Kamar, kemudian aktifkan
ke tampilan Design View.
2. Kemudian klik icon Button. Nanti akan tampil kotak dialog

Command Button Wizard.

2010
3. Misal tambahkan sebuah tombol untuk membuat ombol entri baru
dengan memilih categories = Record Operation dan Action =
Add New Record.
4. Klik Next, kemudian ada pilihan untuk tampilan di button apakah

menggunakan Text atau gambar. Misal gunakan Picture untuk
button.
5. Kemudian klik Next, isikan di name button menjadi cmd_baru

2010
6. Kemudian klik Finish. Maka akan tampil tombol entri baru dengan
tampilan button icon.

2010
Berikut ini adalah beberapa pilihan perintah yang dapat digunakan
pada Command Button
o Kategori Record Navigation

Menu Fungsi
Find Next Untuk pencarian berikutnya
Find Record Untuk pencarian record
Go To First Record Menuju ke record awal
Go To Last Record Menuju ke record akhir
Go To Next Record Menuju record berikutnya
Go To Previous Menuju record sebelumnya
Record
o Kategori Record Operations

Menu Fungsi
Add New Record Menambah record baru
Delete Record Menghapus record
Duplicate Record Menggandakan record
Print Reccord Mencetak record
Save Record Menyimpan record
Undo Record Membatalkan perintah record
o Kategori Form Operations

Menu Fungsi
Apply Form Filter Menampilkan hasil penyaaringan record
Close Form Menutup tampilan form
Open Form Membuka form
Open Page Membuka halaman
Print a Form Mencetak form terpilih
Print Current Form Mencetak form aktif
Refresh From Data Menyegarkan data
o Kategori Report Operations

Menu Fungsi
Mail Report Mengirim form melalui E-mail
Open Report Membuka report
Preview Report Menampilkan report sementara

2010
Menu Fungsi
Print Report Mencetak report
Send Rreport To File Mengirim report
o Kategori Application
Menu Fungsi
Quit Application Keluar dari program aktif
o Kategori Miscellaneous
Menu Fungsi
Auto Dialer Menghubungkan jalur internet melalui
sambungan telepon
Print Table Mencetak tabel terpilih
Run Macro Membuka objek Macro terpilih
Run Query Membuka query terpilih

2010
KUIS/TUGAS
1. Gunakan tbl_kamar, kemudian buat sebuah form menggunakan
Form Wizard.
2. Kemudian tambahkan Command Button seperti tombol
operation baru, simpan, hapus, refresh, lalu tombol navigation
awal, akhir, berikutnya, dan sebelumnya, kemudian tambahkan
tombol form untuk menutup form. Hasilnya akan tampak sebagai
berikut:

2010
8 Form, Relationship Table dan Rumus
Dalam membuat aplikasi menggunakan database, biasanya

melibatkan lebih dari satu hubungan (Relationship) tabel untuk saling
berkaitan dalam menggunakan nilai atau data dari tabel lain, hal ini
digunakan agar data lebih akurat dan tidak terjadi duplikasi data.
LATIHAN.
1. Buat table baru dengan nama tbl_pesan di database db_hotel,
kemudian buat strukturnya sebagai berikut:
2. Kemudian buat Query menggunakan (QBE) dari menu Create -

Query Wizard, kemudian buat sebagai berikut:
3. Kemudian simpan dengan nama Query Pesan.

2010
4. Buat sebuah Form menggunakan Form Wizard dari hasil Query
Query Pesan.
5. Kemudian desain tampilan sehingga tampak seperti berikut ini:
6. Selanjutnya tambahkan tombol baru dan simpan.

2010
KUIS/TUGAS
1. Buat database baru dengan nama db_kelas, kemudian buat 5 tabel
sebagai berikut:
a. tbl_dosen
b. tbl_fakultas
c. tbl_mahasiswa
d. tbl_matkul

2010
e. tbl_nilai
2. Kemudian isikan data pada masing-masing tabel sebagai berikut:

a. tbl_dosen
b. tbl_fakultas
c. tbl_mahasiswa
d. tbl_matkul
3. Buat Query menggunakan Query Wizard, sehingga akan tampak

tampilan sebagai berikut, simpan dengan nama Query Nilai:

2010
Beberapa field yang akan ditampilkan sebagai berikut:
Untuk rata-rata dan nilai huruf menggunakan formula (Expression

Builder) sebagai berikut:
Untuk Rata_Rata:
Round(((([Absensi]/14)*0,1)*100)+([Rata_Tugas]*0,2)+([Nilai_
Uts]*0,3)+([Nilai_Uas]*0,4);1)
Untuk Nilai_Huruf:
IIf([Rata_Rata]>=80;"A";IIf([Rata_Rata]>=75;"B+";IIf([Rat
a_Rata]>=70;"B";IIf([Rata_Rata]>=65;"C+";IIf([Rata_Rata]
>=50;"C";IIf([Rata_Rata]>=40;"D";"E"))))))
2010
4. Hasil dari Query (QBE) akan digunakan dalam pembuatan form
sehingga akan menghasilkan tampilan sebagai berikut, simpan
dengan nama Form Daftar Nilai:
5. Tambahkan sebuah Command Button, Subform untuk tbl_nilai

dan format properties text agar tidak dapat di ubah dibagian
Enable = No sehingga akan tampak sebagai berikut:

2010
9 Report
Report pada Microsoft Access berguna dalam membantu menyajikan

dan membuat laporan mengenai data-data yang ada dalam
database.sebgai contoh report digunakan untuk membuatan laporan
transaksi peminjaman buku pada sebuah perpustakaan, laporan data
buku, laporan data anggota dan lain sebagainya:
LATIHAN.
1. Gunakan Query sebelumya dari db_hotel yaitu Query Pesan.

2. Klik nama Query Pesan, klik menu Create – pilih Report
Wizard, pindahkan semua field ke kolom Selected Fields,
kemudian Next.
3. Klik Next pada pilihan Grouping, kemudian klik Next pada Sort
Order.
4. Kemudian ubah layout laporan menjadi Tabular dan Orientation =
Landscape, kemudian klik Next.

2010
5. Kemudian ganti title menjadi Laporan Pemesanan, klik Finsih.
6. Untuk mengatur dan mengelola report dibagian Design View, dan

hasilnya akan tampak sebagai berikut:

2010
KUIS/TUGAS
Buat laporan dari Query database db_kelas, yaitu Query Nilai yang
sebelumnya sudah dibuat. Kemudian desain laporan seperti gambar
dibawah ini:

2010

Pengantar Praktikum HTML Buku (Revisi 2017)

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pengantar Praktikum HTML Buku (Revisi 2017)

Diunggah oleh

Hak Cipta:

Format Tersedia

Kata Pengantar

Puji syukur penulis panjatkan kehadirat Allah SWT, karena

Medan, November 2017

Kata Pengantar ...........................................................................................................i

Daftar Isi .................................................................................................................... ii

Dasar – Dasar HTML5 .......................................................................................... 1

Cascading Style Sheets ....................................................................................... 54

Pengenalan Microsoft Access 2010 .............................................................. 61

Operasi Tabel ........................................................................................................ 76

Membuat dan Mengatur Query ..................................................................... 88

Mengolah Query .................................................................................................. 97

Form Design......................................................................................................... 114

Control dan Command Button ..................................................................... 120

Form, Relationship Table dan Rumus ......................................................... 126

Report ..................................................................................................................... 132

Pengantar Praktikum Web Design

Gambar 1. Ilustrasi web page

Format penulisan sintak HTML5 secara umum masih seperti format

Tag-Tag Dasar HTML

Pengantar Praktikum Web Design 1

Elemen form juga mengalami pengembangan pada HTML5. Elemen-

Untuk mendukung fasilitas gambar dan media HTML5 menyediakan

Pengantar Praktikum Web Design 2

Nama Tag Keterangan / Kegunaan

<!DOCTYPE> Tag untuk menentukan tipe dokumen

<html> Tag untuk membuat sebuah dokumen HTML

<p> Tag untuk membuat paragraf

Pengantar Praktikum Web Design 3

Pengantar Praktikum Web Design 4

<q> Tag untuk membuat kutipan pendek

Pengantar Praktikum Web Design 5

Pengantar Praktikum Web Design 6

<img> Tag untuk membuat gambar

<audio> Tag untuk membuat isi suara (tag baru HTML5)

<a> Tag untuk membuat hyperlink

<ul> Tag untuk membuat daftar dengan selain nomor

<table> Tag untuk membuat tabel

<style> Tag untuk membuat informasi style untuk dokumen

Pengantar Praktikum Web Design 9

<head> Tag untuk membuat informasi tentang dokumen

<script> Tag untuk membuat script di sisi klien

Pengantar Praktikum Web Design 10

1. Jalankan Notepad atau teks editor lain.

Latihan pertama, dasar-dasar html

Pengantar Praktikum Web Design 11

5. Kemudian klik tombol Save.

Pengantar Praktikum Web Design 12

<hr> menunjukkan sebuah horizontal rule atau garis horizontal, yaitu

Ketikan baris-baris kode berikut, menggunakan aplikasi Adobe

Latihan 3. Mengatur List dan Penomoran

Ol menunjukkan sebuah ordered list, yaitu daftar (list) beberapa item

Pengantar Praktikum Web Design 13

Ketikan baris-baris kode berikut, kemudian simpan dengan file name

<ul> menunjukkan sebuah Unordered List atau Daftar Acak. HTML

Ketikan baris-baris kode berikut, kemudian simpan dengan file name

Latihan 4. Mengatur Format Text dan Warna Latar Text

HTML <p> element menunjukkan sebuah Paragraph, atau paragraf

HTML <sup> element merepresentasikan superscript text, yaitu teks

Pengantar Praktikum Web Design 15

Ketikan baris-baris kode berikut, kemudian simpan dengan file name

Latihan 5. Mengatur Font, <br>, <span> dan Perataan Text

HTML element br menunjukkan sebuah line break (garis baru).

HTML <span> element merupakan element inline (elemen yang tidak

Pengantar Praktikum Web Design 16