BAB 9 AKSES BASIS DATA MySQL DENGAN PHP

POLITEKNIK NEGERI JAKARTA
ii
KATA PENGANTAR
Dengan mengucap syukur alhamdulillah kepada Allah Subhanahuwata’ala,
akhirnya Buku Pemrograman Web dan Basis Data ini dapat diselesaikan dan
menjadi salah satu acuan dalam proses perkuliahan pada mata kuliah
Pemrograman Web dan Basis Data pada Program Studi Teknik Telekomunikasi
Semester 4 Jurusan Teknik Elektro Politeknik Negeri Jakarta.
Sebagai mata kuliah yang meliputi teori dan praktik, maka pada perkuliahan ini
mahasiswa diwajibkan untuk menghasilkan sebuah aplikasi berbasis web yang
meliputi dua unsur yakni aplikasi berbasis web yang statis dan aplikasi berbasis
web yang bersifat dinamis. Oleh karena itu, penyusunan buku ini juga didasarkan
pada hal tersebut sehingga secara garis besar susunanya meliputi dua bagian yakni
•
Bagian I : Dengan tujuan Akhir agar mahasiswa dapat menghasilkan
aplikasi berbasis web yang sifatnya statis, maka mereka harus menguasai
dan kompeten pada Bab 1, Bab 2, Bab 3 dan Bab 4. Yang pada intinya
adalah mempelajari teknik dasar pemrograman Web dengan HTML dan
juga menguasai CSS.
•
Bagian II : Dengan tujuan akhir agar mahasiswa dapat menghasilkan
aplikasi berbasis web yang dinamis dimana sangat diperlukan penguasaan
basis data dalam hal desain dan pengaplikasiannya (Bab 7 dan Bab 8) dan
juga bagaimana menguasai pemrograman di sisi server yang digunakan
untuk membuat interface antara basis data data di sisi server dan pengguna
di sisi client. Bahasa pemrograman yang harus dikuasai adalah PHP(Bab 5
dan Bab 6). Dan agar dapat menunjang kompetensi yang dibutuhkan,
mahasiswa harus menguasai bagaimana mengakses basis data MySQL
menggunakan PHP dengan penekanan pada contoh-contoh kasus yang
sering ditemui(Bab 9).
Dengan bekal seperti tersebut di atas, diharapkan setelah mengikuti perkuliahan
ini mahasiswa memiliki bekal dasar dan kompeten dalam pembuatan aplikasi
berbasis web.
iii
Tak ada gading yang tak retak, penulis sadar sepenuhnya bahwa buku ini jauh dari
sempurna, sehingga kritik dan saran yang membangun sangat penulis harapkan
demi perbaikan di masa yang akan datang. Kritik dan saran dapat disampaikan
melalui alamat email [email protected].
Dengan tidak mengurangi rasa hormat, penulis mengucapkan banyak terima kasih
dan penghargaan yang setinggi-tingginya kepada semua pihak yang telah banyak
membantu dalam penyusunan buku ini. Terima kasih.
Hormat kami,
Penulis
iv
DAFTAR ISI
Halaman Judul
i
Kata Pengantar
iii
Daftar Isi
v
BAB 1 PENGANTAR TEKNOLOGI WEB DAN INTERNET
1.1
1.2
1.3
Pengantar Teknologi Web dan Internet
I-2
1.1.1
Pendahuluan
I-2
1.1.2
Sejarah dan Perkembangan Internet
I-2
1.1.3
Protokol
I-5
1.1.4
TCP/IP
I-12
1.1.5
Domain Name Server(DNS)
I-19
Web Master dan Pemrograman Web
I-31
1.2.1 Pengertian Web Master
I-31
1.2.2 Penjelasan Tugas Web Master
I-32
1.2.3 Tahap Pembangunan Situs
I-33
1.2.4 Web Hosting
I-36
1.2.5 Pemrograman
I-36
1.2.6 Pemrograman Berbasis Web
I-37
1.2.7 Komponen Pemrograman Berbasis Web
I-38
1.2.8 Keuntungan mengembangkan Aplikasi Berbasis Web
I-39
Latihan
I-41
BAB 2 INSTALASI PERANGKAT LUNAK APLIKASI BERBASIS WEB
2.1
Persiapan dan Instalasi Sistem Web Server APACHE
II-2
2.2
Instalasi dan Konfigurasi MySQL
II-2
2.3
Instalasi APACHE dan PHP
II-8
BAB 3 PERINTAH/TAG HTML DASAR
3.1
Pendahuluan HTML
III-2
3.2
Struktur
III-2
3.3
Text
III-6
3.4
List
III-8
v
3.5
Tautan/link
III-10
3.6
Gambar
III-16
3.7
Tabel
III-19
3.8
Form
III-25
BAB 4 CASCADING STYLE SHEET (CSS)
4.1
Pengantar CSS
IV-2
4.2
Color
IV-3
4.3
Text
IV-4
4.4
Boxes
IV-6
4.5
List, Table dan Form
IV-7
4.6
Layout
IV-9
4.7
Image
IV-13
4.8
HTML 5 Layout
IV-15
BAB 5 PENGENALAN PHP
5.1
Tujuan
V-2
5.2
Pemrograman Sisi Server
V-2
5.3
Sintaks Dasar
V-5
5.4
Mengirim data ke Web Browser
V-6
5.5
Komentar
V-7
5.6
Variable
V-8
5.7
String
V-9
5.8
Number
V-11
5.9
Konstanta
V-12
BAB 6 PEMROGRAMAN PHP
6.1
Membuat Form HTML
VI-2
6.2
Menangani Form HTML
VI-3
6.3
Kondisional dan Operator
VI-4
6.4
Validasi Form
VI-9
6.5
Array
VI-13
vi
6.6
Perulangan for dan while
VI-14
BAB 7 MERANCANG BASIS DATA
7.1
Pentingnya Perancangan Basis Data yang Baik
VII-2
7.2
Macam-macam Relasi Tabel
VII-3
7.3
Memahami Normalisasi
VII-4
7.4
Latihan Merancang Basis Data
VII-7
BAB 8 MEMBUAT BASIS DATA DENGAN MySQL
8.1
Pengenalan MySQL
VIII-2
8.2
Bahasa Pemrograman SQL
VIII-2
8.3
Pemrograman SQL Lanjut dengan MySQL
VIII-3
BAB 9 AKSES BASIS DATA MySQL DENGAN PHP
9.1
Mengakses Basis Data MySQL
IX-2
9.2
Mengirim Email
IX-10
9.3
Mengunggah File
IX-12
9.4
Membuat Otentifikasi User
IX-15
9.5
Membuat Buku Tamu
IX-20
Lampiran
vii
BAB I
PENGANTAR TEKNOLOGI WEB DAN
INTERNET
Tujuan Pembelajaran :
Menjelaskan teori teknologi internet dan Web
Bab 1 Pengantar Teknologi Web dan Internet
I- 1
1.1. Pengantar Teknologi Web dan Internet
1.1.1. Pendahuluan
Saat ini teknologi internet telah merambah ke dalam segala aspek kehidupan.
Dimanapun kita berada, asal ada koneksi ke jaringan, maka segala informasi yang
ada di dunia maya dapat kita akses dengan mudah. Paling tidak ada dua hal yang
berperan sehingga akses informasi ini dengan mudah di dapat. Pertama adalah
adanya akses ke jaringan atau sering disebut jaringan internet. Jaringan ini ada
berbagai macam bentuk dan topologi serta jangkauan aksesnya. Melalui
infrastruktur jaringan internet yang dibangun, kita dapat mengakses berbagai
informasi yang tersedia dari belahan bumi manapun. Kedua adalah adanya
teknologi web sebagai sarana untuk menampilkan informasi yang ingin kita dapat.
Dengan beragamnya jenis dan tipe pengakses, maka teknologi web ini harus dapat
ditampilkan di segala macam platform maupun perangkat sehingga si pengakses
dapat menggunakan beragam aplikasi web dan berbagai macam perangkat
pengakses.
1.1.2. Sejarah dan Perkembangan Internet
Sejarah internet dimulai pada Agustus 1962 dan penciptaan internet pertama kali
dikemukakan oleh J.C.R Licklider dari MIT Massachutts Institute of Technology.
Konsep awal dinamakan “Galactic Network”. ia mengemukakan tentang jaringan
global yang memungkinkan orang dapat mengakses data dan program dari mana
saja. Oktober 1962 beliau mengepalai program penelitian komputer di ARPA
yang merupakan bagian dari Departmenet Pertahanan Amerika Serikat.
Pada 1965 peneliti dari MIT bernama Lawrence G. Roberts sering juga disebut
Larry Roberts dan Thomas Merill melakukan koneksi komputer TX-2 di MIT
dengan komputer Q-32 di California menggunakan jalur telpon berkecepatan
rendah untuk menciptakan jaringan berskala luas untuk pertama kalinya.
Pada tahun 1966 Larry Roberts mengembangkan konsep jaringan komputer/
Kemudian beliau merencanakan jaringan yang disebut ARPANET yang
dipublikasikan pada tahun 1967. Pada tahun 1969 ARPANET telah melibatkan
I- 2
Bab 1 Pengantar Teknologi Web dan Internet
empat buah komputer yang terkoneksi. Komputer pertama berada di University of
California Los Angeles, komputer ke dua berada di Stanford Research Institute,
komputer ketiga berada di University of California di Santa Barbara dan komputer
keempat berada di University of Utah.
Pada tahun 1971 jumlah komputer yang terhubung ke ARPANET mencapai 14
buah. Pada tahun ini pulalah protokol Telnet dan FTP berhasil dibangun. Pada
tahun 1972 Larry Roberts dan Bob Kahn mengenalkan ARPANET pada
konferensi ICCC yang diselenggarakan di Washington.
Pada tahun 1972 Ray Tomliinson menulis program yang memungkinkan surat
elektronik dikirimkan ke jaringan ARPNET. Beliaulah yang merancang konversi
“user@host.” Pada tahun ini pula ARPANET menggunakan NCP untuk
menstransfer data. Pada tahun yang sama ARPA beruah nama menjadi DARPA.
Tambahan huruf D berasal dari kata Defense. Pada tahun ini ARPANET
melakukan koneksi international yang pertama dengan University College of
London dan Royal Establishment di Norwegia.
Pada tahun 1978 Unix to Copy Protocol ditemukan di Labolatorium Bell. Program
ini berguna untuk melakukan file transfer.
Pada tahun 1979 news group yang diberi nama USENET beroperasi dengan dasar
UUCP. Penciptanya adalah Tom Truscott dan Jim Ellis (kedua mahasiswa di
Duke University) dan Steven Bellovin (dari Universitas North Carolina). Pemakai
dari seluruh dunia bergabung ke grup diskusi ini membicarakan masalah jaringan,
politik, agama dan berbagai topik lainnya,
Pada tahun 1982 DCA atau Defense Communication Agency dan DARPA
membentuk protokol yang disebut TCP/IP untuk ARPANET. Selanjutnya,
Departemen Pertahanan Amerika Serikat menyatakan TCP/IP sebagai sebuah
standar. Saat itulah internet didefinisikan sebagai sekumpulan jaringan yang
terhubung yang menggunakan TCP/IP sebagai protokol.
Pada tahun 1983 John Postel dan Paul Mockapetris dan Craig Partidge
mengembangkan Domain Name System (DNS) dan mengusulkan sistem
Bab 1 Pengantar Teknologi Web dan Internet
I- 3
pengamatan berbentuk [email protected]. Pada tahun 1984 DNS diperkenalkan
di internet dengan menyebutkan nama-nama jenis domain seperti .gov, .mil,.org,
.net dan .com.
Pada tahun 1986 TCP/IP mulai tersedia pada workstaiton dan PC. Tahun ini pula
National Science Foundation mendanai NSFNET sebagai tulang punggung
internet berkapasitas 56 kbps dan mengatur internet hanya ditujukan untuk
kepentingan riset dan pemerintah yang bersifat tidak komersial.
Pada tahun 1988 Internet Relay Chat disingkat IRC dibuat oleh Jarkko Oikarinen
yang berguna untuk melakukan chatting secara online melalui komputer
Pada tahun 1989 Australia, Jerman, Israel, Italia, Jepang, Mexico, Belanda,
Selandia Baru dan Inggris bergabung ke internet. Jaringan bernama JUNET di
Jepang mulai berhubungan dengan NSFnet.
Pada tahun 1989, TIM Berners Lee periset dari Inggris yang bekerja di CERN,
Swiss, mengajukan konsep yang disebut sistem hypertext. Sistem ini mungkinkan
melihat dokumen secara melompat-lompat dan bisa berjalan dalam sistem operasi
yang berbeda-beda. Konsep inilah yang disebut World Wide Web atau dikenal
dengan nama Web.
Pada tahun 1990 Departemen Pertahanan Amerika membubarkan ARPANET.
Saat itu jaringan tersebut berkembang dari 4 buah host menjadi 300.000 host. Saat
itu Singapura membangun jaringan TECHNET dan ikut bergabung di internet.
Pada tahun ini pula beberapa perangkat lunak seperti Archie, Gopher dan WAIS
mulai dipakai.
Pada tahun 1990 World Wide Web (WWW) diluncurkan oleh CERN di Jenewa,
Swis. Tim Berner Lee menciptakan Hypertext Markup Language atau disingkat
html yang menggunakan URL untuk pengalamatan Web. HTML adalah suatu
bahasa yang digunakan untuk menyusun tampilan WEB.
Pada tahun 1991 tulang punggung NSFNET diperbaharui dengan kecepatan
44Mbps. Koneksi mencakup 100 negara dan melibatkan lebih dari 600.000 host
dan kira-kira 5.000 jaringan. Namun, pada tahun ini NSF sebagai pendananya
I- 4
Bab 1 Pengantar Teknologi Web dan Internet
mencabut larangan komersial untuk internet sehingga membuka peluang
perdagangan elektronis.
Pada tahun 1992 jumlah jaringan sudah melampaui 7.500 buah dan jumlah
komputer yang terkoneksi sebanyak 1.000.000. Saat itu, audio dan video mulai
ada di internet.Pada tahun itu pula, Veronica, sebuah perangkat pencarian teks,
dikeluarkan di Universitas Nevada dan Mozaic lahir. Mozaic adalah browser yang
pertama diciptakan. Software ini memadukan texts dan gambar. Penciptanya Marc
Andresen dan Eric Bina. Selain itu, tercatat bahwa perusahaan Delphi di Amerika
Serikat mulai membuka layanan internet kepada para pelanggannya.
Pada Tahun 1994 Yahoo! yang kepanjangannya adalah Yet Another Hierarchical
Officious Oracle didirikan oleh dua orang mahasiswa Universitas Stanford yaitu
Jerry Yan dan David Filo. Yahoo! terkenal sebagai portal yang menyediakan
email gratis dan mesin pencari informasi. Pada tahun ini pula Amazon.com
didirikan oleh Jeff Bezos.
Pada tahun 1996 perusahaan komputer Dell mulai menjual komputer melalui
internet. Pembeli bisa memilih komputer dan perangkat keras yang sesuai dengan
keinginan mereka sendiri.
Mesin pencari terkenal yang lain adalah Google. Mesin pencari ini diluncurkan
pada tahun 1998 oleh Larry Page dan Sergey Brin. Saat itu mereka berdua adalah
mahasiswa Universitas Stanford.
1.1.3. Protokol
Protokol Internet (Inggris Internet Protocol disingkat IP) adalah protokol lapisan
jaringan (network layer dalam OSI Reference Model) atau protokol lapisan
internetwork (internetwork layer dalam DARPA Reference Model) yang
digunakan oleh protokol TCP/IP untuk melakukan pengalamatan dan routing
paket data antar host-host di jaringan komputer berbasis TCP/IP. Versi IP yang
banyak digunakan adalah IP versi 4 (IPv4) yang didefinisikan pada RFC 791 dan
dipublikasikan pada tahun 1981, tetapi akan digantikan oleh IP versi 6 pada
beberapa waktu yang akan datang.
Bab 1 Pengantar Teknologi Web dan Internet
I- 5
Internet Protocol(IP)
Protokol IP merupakan salah satu protokol kunci di dalam kumpulan protokol
TCP/IP. Sebuah paket IP akan membawa data aktual yang dikirimkan melalui
jaringan dari satu titik ke titik lainnya. Metode yang digunakannya adalah
connectionless yang berarti ia tidak perlu membuat dan memelihara sebuah sesi
koneksi. Selain itu, protokol ini juga tidak menjamin penyampaian data, tapi hal
ini diserahkan kepada protokol pada lapisan yang lebih tinggi (lapisan transport
dalam OSI Reference Model atau lapisan antar host dalam DARPA Reference
Model), yakni protokol Transmission Control Protocol (TCP).
IP menawarkan layanan sebagai protokol antar jaringan (inter-network), karena
itulah IP juga sering disebut sebagai protokol yang bersifat routable. Header IP
mengandung informasi yang dibutuhkan untuk menentukan rute paket, yang
mencakup alamat IP sumber (source IP address) dan alamat IP tujuan (destination
IP address). Anatomi alamat IP terbagi menjadi dua bagian, yakni alamat jaringan
(network address) dan alamat node (node address/host address). Penyampaian
paket antar jaringan (umumnya disebut sebagai proses routing), dimungkinkan
karena adanya alamat jaringan tujuan dalam alamat IP. Selain itu, IP juga
mengizinkan pembuatan sebuah jaringan yang cukup besar, yang disebut sebagai
IP internetwork, yang terdiri atas dua atau lebih jaringan yang dihubungkan
dengan menggunakan router berbasis IP.
IP mendukung banyak protokol klien, karena memang IP merupakan "kurir"
pembawa data yang dikirimkan oleh protokol-protokol lapisan yang lebih tinggi
dibandingkan dengannya. Protokol IP dapat membawa beberapa protokol lapisan
tinggi yang berbeda-beda, tapi setiap paket IP hanya dapat mengandung data dari
satu buah protokol dari banyak protokol tersebut dalam satu waktu. Karena setiap
paket dapat membawa satu buah paket dari beberapa paket data, maka harus ada
cara yang digunakan untuk mengidikasikan protokol lapisan tinggi dari paket data
yang dikirimkan sehingga dapat diteruskan kepada protokol lapisan tinggi yang
sesuai pada sisi penerima. Mengingat klien dan server selalu menggunakan
protokol yang sama untuk sebuah data yang saling dipertukarkan, maka setiap
paket tidak harus mengindikasikan sumber dan tujuan yang terpisah. Contoh dari
I- 6
Bab 1 Pengantar Teknologi Web dan Internet
protokol-protokol lapisan yang lebih tinggi dibandingkan IP adalah Internet
Control Management Protocol (ICMP), Internet Group Management Protocol
(IGMP), User Datagram Protocol (UDP), dan Transmission Control Protocol
(TCP).
IP mengirimkan data dalam bentuk datagram, karena memang IP hanya
menyediakan layanan pengiriman data secara connectionless serta tidak andal
(unreliable) kepada protokol-protokol yang berada lebih tinggi dibandingkan
dengan protokol IP. Pengirimkan connectionless, berarti tidak perlu ada negosiasi
koneksi (handshaking) sebelum mengirimkan data dan tidak ada koneksi yang
harus dibuat atau dipelihara dalam lapisan ini. Unreliable, berarti IP akan
mengirimkan paket tanpa proses pengurutan dan tanpa acknowledgment ketika
pihak yang dituju telah dapat diraih. IP hanya akan melakukan pengiriman sekali
kirim saja untuk menyampaikan paket-paket kepada hop selanjutnya atau tujuan
akhir (teknik seperti ini disebut sebagai "best effort delivery"). Keandalan data
bukan merupakan tugas dari protokol IP, tapi merupakan protokol yang berada
pada lapisan yang lebih tinggi, seperti halnya protokol TCP.
Bersifat independen dari lapisan antarmuka jaringan (lapisan pertama dalam
DARPA Reference Model), karena memang IP didesain agar mendukung banyak
komputer dan antarmuka jaringan. IP bersifat independen terhadap atribut lapisan
fisik, seperti halnya pengabelan, pensinyalan, dan bit rate. Selain itu, IP juga
bersifat independen terhadap atribut lapisan data link seperti halnya mekanisme
Media access control (MAC), pengalamatan MAC, serta ukuran frame terbesar.
IP menggunakan skema pengalamatannya sendiri, yang disebut sebagai "IP
address", yang merupakan bilangan 32-bit dan independen terhadap skema
pengalamatan yang digunakan dalam lapisan antarmuka jaringan.
Untuk mendukung ukuran frame terbesar yang dimiliki oleh teknologi lapisan
antarmuka jaringan yang berbeda-beda, IP dapat melakukan pemecahan terhadap
paket data ke dalam beberapa fragmen sebelum diletakkan di atas sebuah saluran
jaringan. Paket data tersebut akan dipecah ke dalam fragmen-fragmen yang
memiliki ukuran maximum transmission unit (MTU) yang lebih rendah
dibandingkan dengan ukuran datagram IP. Proses ini dinamakan dengan
Bab 1 Pengantar Teknologi Web dan Internet
I- 7
fragmentasi (Fragmentasi paket jaringan|fragmentation). Router atau host yang
mengirimkan data akan memecah data yang hendak ditransmisikan, dan proses
fragmentasi dapat berlangsung beberapa kali. Selanjutnya host yang dituju akan
menyatukan kembali fragmen-fragmen tersebut menjadi paket data utuh, seperti
halnya sebelum dipecah.
Dapat diperluas dengan menggunakan fitur IP Options dalam header IP. Fitur
yang dapat ditambahkan contohnya adalah kemampuan untuk menentukan jalur
yang harus diikuti oleh datagram IP melalui sebuah internetwork IP.
Datagram IP
Paket-paket data dalam protokol IP dikirimkan dalam bentuk datagram. Sebuah
datagram IP terdiri atas header IP dan muatan IP (payload), sebagai berikut:
Header IP: Ukuran header IP bervariasi, yakni berukuran 20 hingga 60 byte,
dalam penambahan 4-byte. Header IP menyediakan dukungan untuk memetakan
jaringan (routing), identifikasi muatan IP, ukuran header IP dan datagram IP,
dukungan fragmentasi, dan juga IP Options.
Muatan IP: Ukuran muatan IP juga bervariasi, yang berkisar dari 8 byte hingga
65515 byte.
Sebelum dikirimkan di dalam saluran jaringan, datagram IP akan "dibungkus"
dengan header protokol lapisan antarmuka jaringan dan trailer-nya, untuk
membuat sebuah frame jaringan. Format datagram IP ditunjukan pada Gambar 1.1
berikut
Gambar 1.1 Format Datagram IP
I- 8
Bab 1 Pengantar Teknologi Web dan Internet
Header IP
Header IP terdiri atas beberapa field sebagai berikut:
Tabel 1.1 Header IP
Field
Panjang Keterangan
Digunakan untuk mengindikasikan versi dari header
IP yang digunakan. Karena memiliki panjang 4 bit, maka
terdapat 24=16 buah jenis nilai yang berbeda-beda, yang
berkisar antara 0 hingga 15. Meskipun begitu hanya ada
Version
4 bit
dua nilai yang bisa digunakan, yakni 4 dan 6, mengingat
versi IP standar yang digunakan saat ini dalam jaringan
dan Internet adalah versi 4 dan 6 merupakan singkatan
dari versi selanjutnya (IPv6). Lihat situs web IANA untuk
informasi mengenai field ini lebih lanjut.
Digunakan untuk mengindikasikan ukuran header IP.
Karena memiliki panjang 4 bit, maka terdapat 24=16 buah
jenis nilai yang berbeda-beda. Field header length ini
mengindikasikan bilangan double-word 32-bit (blok 4-
Header
4 bit
length
byte) di dalam header IP. Ukuran terkecilnya adalah 5
(0x05), yang menunjukkan ukuran terkecil dari header IP
yakni 20 byte. Dengan jumlah maksimum dari IP
Options, ukuran header IP maksimum adalah 60 byte,
yang diindikasikan dengan nilai 15 (0x0F).
Type
Service
Field ini digunakan untuk menentukan kualitas transmisi
of
8 bit
(TOS)
Total
Length
dari sebuah datagram IP. Ada dua jenis TOS yang
didefinisikan, yakni pada RFC 791 dan RFC 2474. Hal
ini akan dibahas pada seksi berikutnya.
Merupakan panjang total dari datagram IP,
16 bit
mencakup
header
IP
dan
muatannya.
yang
Dengan
menggunakan angka 16 bit, nilai maksimum yang dapat
Bab 1 Pengantar Teknologi Web dan Internet
I- 9
Field
Panjang Keterangan
ditampung adalah 65535 byte. Untuk datagram IP yang
memiliki ukuran maksimum, field ini memiliki nilai yang
sama dengan nilai maximum transmission unit yang
dimiliki oleh teknologi protokol lapisan antarmuka
jaringan.
Digunakan untuk mengidentifikasikan sebuah paket IP
tertentu
Identifier
16 bit
yang
dikirimkan
antara
node
sumber
dan node tujuan. Host pengirim akan mengeset nilai
dari field ini, dan field ini akan bertambah nilainya untuk
datagram IP selanjutnya. Field ini digunakan untuk
mengenali fragmen-fragmen sebuah datagram IP.
Berisi dua buah flag yang berisi apakah sebuah datagram
IP mengalami fragmentasi atau tidak. Meski berisi
Flag
3 bit
tiga bit, ada dua jenis nilai yang mungkin, yakni apakah
hendak
memecah datagram
IP ke
dalam
beberapa
fragmen atau tidak.
Fragment
Offset
Digunakan
13 bit
untuk
mengidentifikasikan ofset di
mana
fragmen yang bersangkutan dimulai, dihitung dari
permulaan muatan IP yang belum dipecah.
Digunakan untuk mengidentifikasikan berapa banyak
saluran jaringan di mana sebuah datagram IP dapat
berjalan-jalan
Time-toLive (TTL)
sebelum
sebuah router mengabaikan datagram tersebut. Field ini
8 bit
pada awalnya ditujukan sebagai penghitung waktu, untuk
mengidentifikasikan
berapa
lama
(dalam
detik)
sebuah datagram IP boleh terdapat di dalam jaringan.
Adalah router IP yang memantau nilai ini, yang akan
berkurang setiap kali hinggap dalam router.
Protocol
I- 10
8 bit
Digunakan untuk mengidentifikasikan jenis protokol
Bab 1 Pengantar Teknologi Web dan Internet
Field
Panjang Keterangan
lapisan yang lebih tinggi yang dikandung oleh muatan
IP. Field ini merupakan tanda eksplisit untuk protokol
klien. Terdapat beberapa nilai dari field ini, seperti halnya
nilai 1 (0x01) untuk ICMP, 6 (0x06) untuk TCP, dan 17
(0x11)
untuk
UDP
(selengkapnya
lihat
di
bawah). Field ini bertindak sebagai penanda multipleks
(multiplex identifier), sehingga muatan IP pun dapat
diteruskan ke protokol lapisan yang lebih tinggi saat
diterima oleh node yang dituju.
Field ini berguna hanya untuk melakukan pengecekan
integritas terhadap header IP, sementara muatan IP
sendiri tidak dimasukkan ke dalamnya, sehingga muatan
IP
harus
melakukan
memiliki checksum mereka
pengecekan
integritas
IP. Host pengirim
sendiri
terhadap
akan
untuk
muatan
melakukan
pengecekan checksum terhadap datagram
IP yang
dikirimkan. Setiap routeryang berada di dalam jalur
transmisi antara sumber dan tujuan akan melakukan
Header
Checksum
16 bit
verifikasi terhadap field ini sebelum memproses paket.
Jika
verifikasi
dianggap
gagal, router pun
mengabaikan datagram
akan
IP tersebut.
Karena setiap router yang berada di dalam jalur transmisi
antara sumber dan tujuan akan mengurangi nilai TTL,
maka header
checksum pun
akan
berubah
setiap
kali datagram tersebut hinggap di setiap router yang
dilewati.
Pada saat menghitung checksum terhadap semua field di
dalam header IP, nilai header checksum akan diset ke
nilai 0.
Source IP 32 bit
Mengandung alamat
Bab 1 Pengantar Teknologi Web dan Internet
IP dari
sumber host yang
I- 11
Field
Panjang Keterangan
Address
mengirimkan datagram IP
tersebut,
atau
alamat
IP
dari Network Address Translator(NAT).
Destination
IP Address
Mengandung alamat
32 bit
IP tujuan
ke
mana datagram
IP tersebut akan disampaikan, atau yang dapat berupa
alamat dari host atau NAT.
IP Options
and
32 bit
[place holder]
Padding
Type of Service (ToS)
Field Type of Service (ToS) adalah sebuah field dalam header IPv4 yang memiliki
panjang 8 bit dan digunakan untuk menandakan jenis Quality of Service (QoS)
yang digunakan oleh datagram yang bersangkutan untuk disampaikan ke routerrouter internetwork. ToS didefinisikan di dalam dua buah standar, yakni RFC 791
dan RFC 2474.
1.1.4. TCP/IP
TCP/IP (singkatan dari Transmission Control Protocol/Internet Protocol) jika
diterjemahkan adalah Protokol Kendali Transmisi/Protokol Internet, adalah
gabungan dari protokol TCP (Transmission Control Protocol) dan IP (Internet
Protocol) sebagai sekelompok protokol yang mengatur komunikasi data dalam
proses tukar-menukar data dari satu komputer ke komputer lain di dalam jaringan
internet yang akan memastikan pengiriman data sampai ke alamat yang dituju.
Protokol ini tidaklah dapat berdiri sendiri, karena memang protokol ini berupa
kumpulan protokol (protocol suite). Protokol ini juga merupakan protokol yang
paling banyak digunakan saat ini, karena protokol ini mampu bekerja dan
I- 12
Bab 1 Pengantar Teknologi Web dan Internet
diimplementasikan pada lintas perangkat lunak (software) di berbagai sistem
operasi. Istilah yang diberikan kepada perangkat lunak ini adalah TCP/IP stack.
Protokol TCP/IP dikembangkan pada akhir dekade 1970-an hingga awal 1980-an
sebagai sebuah protokol standar untuk menghubungkan komputer-komputer dan
jaringan untuk membentuk sebuah jaringan yang luas (WAN). TCP/IP merupakan
sebuah standar jaringan terbuka yang bersifat independen terhadap mekanisme
transport jaringan fisik yang digunakan, sehingga dapat digunakan di mana saja.
Protokol ini menggunakan skema pengalamatan yang sederhana yang disebut
sebagai alamat IP (IP Address) yang mengizinkan hingga beberapa ratus juta
komputer untuk dapat saling berhubungan satu sama lainnya di Internet. Protokol
ini juga bersifat routable yang berarti protokol ini cocok untuk menghubungkan
sistem-sistem berbeda (seperti Microsoft Windows dan keluarga UNIX) untuk
membentuk jaringan yang heterogen.
Protokol TCP/IP selalu berevolusi seiring dengan waktu, mengingat semakin
banyaknya kebutuhan terhadap jaringan komputer dan Internet. Pengembangan ini
dilakukan oleh beberapa badan, seperti halnya Internet Society (ISOC), Internet
Architecture Board (IAB), dan Internet Engineering Task Force (IETF). Macammacam protokol yang berjalan di atas TCP/IP, skema pengalamatan, dan konsep
TCP/IP didefinisikan dalam dokumen yang disebut sebagai Request for Comments
(RFC) yang dikeluarkan oleh IETF.
Arsitektur
Arsitektur TCP/IP tidaklah berbasis model referensi tujuh lapis OSI, tetapi
menggunakan model referensi DARPA. Seperti diperlihatkan dalam diagram pada
Gambar 1.2, TCP/IP merngimplemenasikan arsitektur berlapis yang terdiri atas
empat lapis. Empat lapis ini, dapat dipetakan (meski tidak secara langsung)
terhadap model referensi OSI. Empat lapis ini, kadang-kadang disebut sebagai
DARPA Model, Internet Model, atau DoD Model, mengingat TCP/IP merupakan
Bab 1 Pengantar Teknologi Web dan Internet
I- 13
protokol yang awalnya dikembangkan dari proyek ARPANET yang dimulai oleh
Departemen Pertahanan Amerika Serikat.
Gambar 1.2 Arsitektur TCP/IP dibandingkan dengan DARPA dan OSI Layer
Setiap lapisan yang dimiliki oleh kumpulan protokol (protocol suite) TCP/IP
diasosiasikan dengan protokolnya masing-masing. Protokol utama dalam protokol
TCP/IP adalah sebagai berikut:
Protokol lapisan aplikasi: bertanggung jawab untuk menyediakan akses kepada
aplikasi terhadap layanan jaringan TCP/IP. Protokol ini mencakup protokol
Dynamic Host Configuration Protocol (DHCP), Domain Name System (DNS),
Hypertext Transfer Protocol (HTTP), File Transfer Protocol (FTP), Telnet,
Simple Mail Transfer Protocol (SMTP), Simple Network Management Protocol
(SNMP), dan masih banyak protokol lainnya. Dalam beberapa implementasi stack
protokol, seperti halnya Microsoft TCP/IP, protokol-protokol lapisan aplikasi
berinteraksi dengan menggunakan antarmuka Windows Sockets (Winsock) atau
NetBIOS over TCP/IP (NetBT).
Protokol lapisan antar-host: berguna untuk membuat komunikasi menggunakan
sesi koneksi yang bersifat connection-oriented atau broadcast yang bersifat
I- 14
Bab 1 Pengantar Teknologi Web dan Internet
connectionless. Protokol dalam lapisan ini adalah Transmission Control Protocol
(TCP) dan User Datagram Protocol (UDP).
Protokol lapisan internetwork: bertanggung jawab untuk melakukan pemetaan
(routing) dan enkapsulasi paket-paket data jaringan menjadi paket-paket IP.
Protokol yang bekerja dalam lapisan ini adalah Internet Protocol (IP), Address
Resolution Protocol (ARP), Internet Control Message Protocol (ICMP), dan
Internet Group Management Protocol (IGMP).
Protokol lapisan antarmuka jaringan: bertanggung jawab untuk meletakkan frameframe jaringan di atas media jaringan yang digunakan. TCP/IP dapat bekerja
dengan banyak teknologi transport, mulai dari teknologi transport dalam LAN
(seperti halnya Ethernet dan Token Ring), MAN dan WAN (seperti halnya dial-up
modem yang berjalan di atas Public Switched Telephone Network (PSTN),
Integrated Services Digital Network (ISDN), serta Asynchronous Transfer Mode
(ATM)).
Pengalamatan
Protokol TCP/IP menggunakan dua buah skema pengalamatan yang dapat
digunakan untuk mengidentifikasikan sebuah komputer dalam sebuah jaringan
atau jaringan dalam sebuah internetwork, yakni sebagai berikut:
•
Pengalamatan IP: yang berupa alamat logis yang terdiri atas 32-bit (empat
oktet
berukuran
8-bit)
yang
umumnya
ditulis
dalam
format
www.xxx.yyy.zzz. Dengan menggunakan subnet mask yang diasosiasikan
dengannya, sebuah alamat IP pun dapat dibagi menjadi dua bagian, yakni
Network Identifier (NetID) yang dapat mengidentifikasikan jaringan lokal
dalam sebuah internetwork dan Host identifier (HostID) yang dapat
mengidentifikasikan host dalam jaringan tersebut. Sebagai contoh, alamat
205.116.008.044 dapat dibagi dengan menggunakan subnet mask
255.255.255.000 ke dalam Network ID 205.116.008.000 dan Host ID 44.
Alamat IP merupakan kewajiban yang harus ditetapkan untuk sebuah host,
yang dapat dilakukan secara manual (statis) atau menggunakan Dynamic
Host Configuration Protocol (DHCP) (dinamis).
Bab 1 Pengantar Teknologi Web dan Internet
I- 15
•
Fully qualified domain name (FQDN): Alamat ini merupakan alamat yang
direpresentasikan dalam nama alfanumerik yang diekspresikan dalam
bentuk
<nama_host>.<nama_domain>,
di
mana
<nama_domain>
mengindentifikasikan jaringan di mana sebuah komputer berada, dan
<nama_host> mengidentifikasikan sebuah komputer dalam jaringan.
Pengalamatan FQDN digunakan oleh skema penamaan domain Domain
Name System (DNS). Sebagai contoh, alamat FQDN id.wikipedia.org
merepresentasikan sebuah host dengan nama "id" yang terdapat di dalam
domain jaringan "wikipedia.org". Nama domain wikipedia.org merupakan
second-level domain yang terdaftar di dalam top-level domain .org, yang
terdaftar dalam root DNS, yang memiliki nama "." (titik). Penggunaan
FQDN lebih bersahabat dan lebih mudah diingat ketimbang dengan
menggunakan alamat IP. Akan tetapi, dalam TCP/IP, agar komunikasi
dapat berjalan, FQDN harus diterjemahkan terlebih dahulu (proses
penerjemahan ini disebut sebagai resolusi nama) ke dalam alamat IP
dengan menggunakan server yang menjalankan DNS, yang disebut dengan
Name Server atau dengan menggunakan berkas hosts (/etc/hosts atau
%systemroot%\system32\drivers\etc\hosts) yang disimpan di dalam mesin
yang bersangkutan.
Konsep dasar
Layanan
Berikut ini merupakan layanan tradisional yang dapat berjalan di atas protokol
TCP/IP:
•
Pengiriman berkas (file
transfer).
File
Transfer
Protocol (FTP)
memungkinkan pengguna komputer yang satu untuk dapat mengirim
ataupun menerima berkas ke sebuah host di dalam jaringan. Metode
otentikasi yang digunakannya adalah penggunaan nama pengguna (user
name) dan password'', meskipun banyak juga FTP yang dapat diakses
secara anonim (anonymous), alias tidak berpassword. (Keterangan lebih
lanjut mengenai FTP dapat dilihat pada RFC 959.)
I- 16
Bab 1 Pengantar Teknologi Web dan Internet
•
Remote
login. Network
terminal
Protocol (telnet)
memungkinkan
pengguna komputer dapat melakukan log in ke dalam suatu komputer di
dalam suatu jaringan secara jarak jauh. Jadi hal ini berarti bahwa pengguna
menggunakan komputernya sebagai perpanjangan tangan dari komputer
jaringan tersebut. (Keterangan lebih lanjut mengenai Telnet dapat dilihat
pada RFC 854 dan RFC 855.)
•
Computer mail. Digunakan untuk menerapkan sistem surat elektronik.
(Keterangan lebih lanjut mengenai e-mail dapat dilihat pada RFC 821 RFC
822.)
•
Network File System (NFS). Pelayanan akses berkas-berkas yang dapat
diakses dari jarak jauh yang memungkinkan klien-klien untuk mengakses
berkas pada komputer jaringan, seolah-olah berkas tersebut disimpan
secara lokal. (Keterangan lebih lanjut mengenai NFS dapat dilihat RFC
1001 dan RFC 1002.)
•
Remote
execution. Memungkinkan
pengguna
komputer
untuk
menjalankan suatu program tertentu di dalam komputer yang berbeda.
Biasanya berguna jika pengguna menggunakan komputer yang terbatas,
sedangkan ia memerlukan sumber yg banyak dalam suatu sistem
komputer.
Ada beberapa jenis remote execution, ada yang berupa perintah-perintah
dasar saja, yaitu yang dapat dijalankan dalam system komputer yang sama
dan ada pula yg menggunakan sistem Remote Procedure Call (RPC), yang
memungkinkan program untuk memanggil subrutin yang akan dijalankan
di sistem komputer yg berbeda. (sebagai contoh dalam Berkeley
UNIX ada perintah rsh dan rexec.)
•
Name
server yang
berguna
sebagai
penyimpanan basis
data nama host yang digunakan pada Internet (Keterangan lebih lanjut
dapat dilihat pada RFC 822 dan RFC 823 yang menjelaskan mengenai
penggunaan protokol name server yang bertujuan untuk menentukan
nama host di Internet.)
Bab 1 Pengantar Teknologi Web dan Internet
I- 17
Bentuk arsitektur
Dikarenakan TCP/IP adalah serangkaian protokol di mana setiap protokol
melakukan sebagian dari keseluruhan tugas komunikasi jaringan, maka tentulah
implementasinya tak lepas dari arsitektur jaringan itu sendiri. Arsitektur rangkaian
protokol TCP/IP mendifinisikan berbagai cara agar TCP/IP dapat saling
menyesuaikan.
Karena TCP/IP merupakan salah satu lapisan protokol Model OSI, berarti bahwa
hierarki TCP/IP merujuk kepada 7 lapisan OSI tersebut. Tiga lapisan teratas biasa
dikenal sebagai "upper level protocol" sedangkan empat lapisan terbawah dikenal
sebagai "lower level protocol". Tiap lapisan berdiri sendiri tetapi fungsi dari
masing-masing lapisan bergantung dari keberhasilan operasi layer sebelumnya.
Sebuah lapisan pengirim hanya perlu berhubungan dengan lapisan yang sama di
penerima (jadi misalnya lapisan data link penerima hanya berhubungan dengan
lapisan data link pengirim) selain dengan satu layer di atas atau di bawahnya
(misalnya lapisan network berhubungan dengan lapisan transport di atasnya atau
dengan lapisan data link di bawahnya).
Model dengan menggunakan lapisan ini merupakan sebuah konsep yang penting
karena suatu fungsi yang rumit yang berkaitan dengan komunikasi dapat
dipecahkan menjadi sejumlah unit yang lebih kecil. Tiap lapisan bertugas
memberikan layanan tertentu pada lapisan diatasnya dan juga melindungi lapisan
diatasnya dari rincian cara pemberian layanan tersebut. Tiap lapisan harus
transparan sehingga modifikasi yang dilakukan atasnya tidak akan menyebabkan
perubahan pada lapisan yang lain. Lapisan menjalankan perannya dalam
pengalihan data dengan mengikuti peraturan yang berlaku untuknya dan hanya
berkomunikasi dengan lapisan yang setingkat. Akibatnya sebuah layer pada satu
sistem tertentu hanya akan berhubungan dengan lapisan yang sama dari sistem
yang lain. Proses ini dikenal sebagai Peer process. Dalam keadaan sebenarnya
tidak ada data yang langsung dialihkan antar lapisan yang sama dari dua sistem
I- 18
Bab 1 Pengantar Teknologi Web dan Internet
yang berbeda ini. Lapisan atas akan memberikan data dan kendali ke lapisan
dibawahnya sampai lapisan yang terendah dicapai. Antara dua lapisan yang
berdekatan terdapat interface (antarmuka). Interface ini mendifinisikan operasi
dan layanan yang diberikan olehnya ke lapisan lebih atas. Tiap lapisan harus
melaksanakan sekumpulan fungsi khusus yang dipahami dengan sempurna.
Himpunan lapisan dan protokol dikenal sebagai "arsitektur jaringan".
1.1.5. Domain Name Server(Sistem Penamaan Domain)
Sistem Penamaan Domain ; SNR (bahasa Inggris: (Domain Name System; DNS)
adalah sebuah sistem yang menyimpan informasi tentang nama host ataupun nama
domain dalam bentuk basis data tersebar (distributed database) di dalam jaringan
komputer, misalkan: Internet. DNS menyediakan alamat IP untuk setiap nama
host dan mendata setiap server transmisi surat (mail exchange server) yang
menerima surel (email) untuk setiap domain. Menurut browser Google Chrome,
DNS adalah layanan jaringan yang menerjemahkan nama situs web menjadi
alamat internet.
DNS menyediakan pelayanan yang cukup penting untuk Internet, ketika perangkat
keras komputer dan jaringan bekerja dengan alamat IP untuk mengerjakan tugas
seperti pengalamatan dan penjaluran (routing), manusia pada umumnya lebih
memilih untuk menggunakan nama host dan nama domain, contohnya adalah
penunjukan sumber universal (URL) dan alamat surel. Analogi yang umum
digunakan untuk menjelaskan fungsinya adalah DNS bisa dianggap seperti buku
telepon internet dimana saat pengguna mengetikkan www.indosat.net.id di
peramban web maka pengguna akan diarahkan ke alamat IP 124.81.92.144 (IPv4)
dan 2001:e00:d:10:3:140::83 (IPv6).
Sejarah singkat DNS
Penggunaan nama sebagai pengabstraksi alamat mesin di sebuah jaringan
komputer yang lebih dikenal oleh manusia mengalahkan TCP/IP, dan kembali ke
Bab 1 Pengantar Teknologi Web dan Internet
I- 19
zaman ARPAnet. Dahulu, seluruh komputer di jaringan komputer menggunakan
file HOSTS.TXT dari SRI (sekarang SIR International), yang memetakan sebuah
alamat ke sebuah nama (secara teknis, file ini masih ada - sebagian besar sistem
operasi modern menggunakannya dengan baik secara baku maupun melalui cara
konfigurasi, dapat melihat Hosts file untuk menyamakan sebuah nama host
menjadi sebuah alamat IP sebelum melakukan pencarian via DNS). Namun,
sistem tersebut di atas mewarisi beberapa keterbatasan yang mencolok dari sisi
prasyarat, setiap saat sebuah alamat komputer berubah, setiap sistem yang hendak
berhubungan dengan komputer tersebut harus melakukan update terhadap file
Hosts.
Dengan berkembangnya jaringan komputer, membutuhkan sistem yang bisa
dikembangkan: sebuah sistem yang bisa mengganti alamat host hanya di satu
tempat, host lain akan mempelajari perubaha tersebut secara dinamis. Inilah DNS.
Paul Mockapetris menemukan DNS pada tahun 1983; spesifikasi asli muncul di
RFC 882 dan 883. Tahun 1987, penerbitan RFC 1034 dan RFC 1035 membuat
update terhadap spesifikasi DNS. Hal ini membuat RFC 882 dan RFC 883 tidak
berlaku lagi. Beberapa RFC terkini telah memproposikan beberapa tambahan dari
protokol inti DNS.
Teori bekerja DNS
Para Pemain Inti
Pengelola dari sistem DNS terdiri dari tiga komponen:
•
DNS resolver, sebuah program klien yang berjalan di komputer pengguna,
yang membuat permintaan DNS dari program aplikasi.
•
recursive DNS server, yang melakukan pencarian melalui DNS sebagai
tanggapan permintaan dari resolver, dan mengembalikan jawaban kepada
para resolver tersebut;
I- 20
Bab 1 Pengantar Teknologi Web dan Internet
•
authoritative DNS server yang memberikan jawaban terhadap permintaan
dari recursor, baik dalam bentuk sebuah jawaban, maupun dalam bentuk
delegasi (misalkan: mereferensikan ke authoritative DNS server lainnya).
Pengertian beberapa bagian dari nama domain
Sebuah nama domain biasanya terdiri dari dua bagian atau lebih (secara teknis
disebut label), dipisahkan dengan titik.
Label paling kanan menyatakan top-level domain - domain tingkat atas/tinggi
(misalkan, alamat www.wikipedia.org memiliki top-level domain org).
Setiap label di sebelah kirinya menyatakan sebuah sub-divisi atau subdomain dari
domain yang lebih tinggi. Catatan: "subdomain" menyatakan ketergantungan
relatif, bukan absolut. Contoh: wikipedia.org merupakan subdomain dari domain
org, dan id.wikipedia.org dapat membentuk subdomain dari domain wikipedia.org
(pada praktiknya, id.wikipedia.org sesungguhnya mewakili sebuah nama host lihat dibawah). Secara teori, pembagian seperti ini dapat mencapai kedalaman 127
level, dan setiap label dapat terbentuk sampai dengan 63 karakter, selama total
nama domain tidak melebihi panjang 255 karakter. Tetapi secara praktik,
beberapa pendaftar nama domain (domain name registry) memiliki batas yang
lebih sedikit.
Terakhir, bagian paling kiri dari bagian nama domain (biasanya) menyatakan
nama host. Sisa dari nama domain menyatakan cara untuk membangun jalur logis
untuk informasi yang dibutuhkan; nama host adalah tujuan sebenarnya dari nama
sistem yang dicari alamat IP-nya. Contoh: nama domain www.wikipedia.org
memiliki nama host "www".
DNS memiliki kumpulan hierarki dari DNS servers. Setiap domain atau
subdomain memiliki satu atau lebih authoritative DNS Servers (server DNS
otorisatif) yang mempublikasikan informasi tentang domain tersebut dan namanama server dari setiap domain di-"bawah"-nya. Pada puncak hirarki, terdapat
root servers- induk server nama: server yang ditanyakan ketika mencari
(menyelesaikan/resolving) dari sebuah nama domain tertinggi (top-level domain).
Bab 1 Pengantar Teknologi Web dan Internet
I- 21
Sebuah contoh dari teori rekursif DNS
Sebuah contoh mungkin dapat memperjelas proses ini. Andaikan ada aplikasi
yang memerlukan pencarian alamat IP dari www.wikipedia.org. Aplikasi tersebut
bertanya ke DNS recursor lokal.
•
Sebelum dimulai, recursor harus mengetahui dimana dapat menemukan
root nameserver; administrator dari recursive DNS server secara manual
mengatur (dan melakukan update secara berkala) sebuah file dengan nama
root hints zone (panduan akar DNS) yang menyatakan alamat-alamt IP
dari para server tersebut.
•
Proses dimulai oleh recursor yang bertanya kepada para root server
tersebut- misalkan: server dengan alamat IP "198.41.0.4" - pertanyaan
"apakah alamat IP dari www.wikipedia.org?"
•
Root server menjawab dengan sebuah delegasi, arti kasarnya: "Saya tidak
tahu alamat IP dari www.wikipedia.org, tapi saya "tahu" bahwa server
DNS di 204.74.112.1 memiliki informasi tentang domain org."
•
Recursor DNS lokal kemudian bertanya kepada server DNS (yaitu:
204.74.112.1) pertanyaan yang sama seperti yang diberikan kepada root
server. "apa alamat IP dari www.wikipedia.org?". (umumnya) akan
didapatkan jawaban yang sejenis, "saya tidak tahu alamat dari
www.wikipedia.org, tapi saya "tahu" bahwa server 207.142.131.234
memiliki informasi dari domain wikipedia.org."
•
Akhirnya,
pertanyaan
beralih
kepada
server
DNS
ketiga
(207.142.131.234), yang menjawab dengan alamat IP yang dibutuhkan.
Proses ini menggunakan pencarian rekursif (recursion/recursive searching).
Pengertian pendaftaran domain dan glue records
Membaca contoh di atas, Anda mungkin bertanya: "bagaimana caranya DNS
server 204.74.112.1 tahu alamat IP mana yang diberikan untuk domain
I- 22
Bab 1 Pengantar Teknologi Web dan Internet
wikipedia.org?" Pada awal proses, kita mencatat bahwa sebuah DNS recursor
memiliki alamat IP dari para root server yang (kurang-lebih) didata secara
eksplisit (hard coded). Mirip dengan hal tersebut, server nama (name server) yang
otoritatif untuk top-level domain mengalami perubahan yang jarang.
Namun, server nama yang memberikan jawaban otorisatif bagi nama domain yang
umum mengalami perubahan yang cukup sering. Sebagai bagian dari proses
pendaftaran sebuah nama domain (dan beberapa waktu sesudahnya), pendaftar
memberikan pendaftaran dengan server nama yang akan mengotorisasikan nama
domain tersebut; maka ketika mendaftar wikipedia.org, domain tersebut
terhubung dengan server nama gunther.bomis.com dan zwinger.wikipedia.org di
pendaftar .org. Kemudian, dari contoh di atas, ketika server dikenali sebagai
204.74.112.1 menerima sebuah permintaan, DNS server memindai daftar domain
yang ada, mencari wikipedia.org, dan mengembalikan server nama yang
terhubung dengan domain tersebut.
Biasanya, server nama muncul berdasarkan urutan nama, selain berdasarkan
alamat IP. Hal ini menimbulkan string lain dari permintaan DNS untuk
menyelesaikan nama dari server nama; ketika sebuah alamat IP dari server nama
mendapatkan sebuah pendaftaran di zona induk, para programmer jaringan
komputer menamakannya sebuah glue record.
DNS dalam Praktik
Ketika sebuah aplikasi (misalkan web broswer), hendak mencari alamat IP dari
sebuah nama domain, aplikasi tersebut tidak harus mengikuti seluruh langkah
yang disebutkan dalam teori di atas. Kita akan melihat dulu konsep caching, lalu
mengartikan operasi DNS di "dunia nyata".
Caching dan masa hidup (caching and time to live)
Bab 1 Pengantar Teknologi Web dan Internet
I- 23
Karena jumlah permintaan yang besar dari sistem seperti DNS, perancang DNS
menginginkan penyediaan mekanisme yang bisa mengurangi beban dari masingmasing server DNS. Rencana mekanisnya menyarankan bahwa ketika
sebuah DNS resolver (klien) menerima sebuah jawaban DNS, informasi tersebut
akan di cache untuk jangka waktu tertentu. Sebuah nilai (yang di-set oleh
administrator dari server DNS yang memberikan jawaban) menyebutnya
sebagai time to live (masa hidup), atau TTL yang mendefinisikan periode tersebut.
Saat jawaban masuk ke dalam cache, resolver akan mengacu kepada jawaban
yang disimpan di cache tersebut; hanya ketika TTL usai (atau saat administrator
mengosongkan
jawaban
dari
memori resolver secara
manual)
maka resolver menghubungi server DNS untuk informasi yang sama.
Waktu propagasi (propagation time)
Satu akibat penting dari arsitektur tersebar dan cache adalah perubahan kepada
suatu DNS terkadang efektif secara langsung dalam skala besar/global. Contoh
berikut mungkin akan menjelaskannya: Jika seorang administrator telah
mengatur TTL selama 6 jam untuk host www.wikipedia.org, kemudian mengganti
alamat
IP
dari www.wikipedia.orgpada
mempertimbangkan
bahwa
ada
pk
(paling
12:01,
tidak)
administrator
satu
individu
harus
yang
menyimpan cache jawaban dengan nilai lama pada pk 12:00 yang tidak akan
menghubungi server DNS sampai dengan pk 18:00. Periode antara pk 12:00 dan
pk 18:00 dalam contoh ini disebut sebagai waktu propagasi (propagation time),
yang bisa didefiniskan sebagai periode waktu yang berawal antara saat terjadi
perubahan dari data DNS, dan berakhir sesudah waktu maksimum yang telah
ditentukan oleh TTL berlalu. Ini akan mengarahkan kepada pertimbangan logis
yang penting ketika membuat perubahan kepada DNS: tidak semua akan melihat
hal yang sama seperti yang Anda lihat. RFC1537 dapat membantu penjelasan ini.
DNS di dunia Nyata
Di dunia nyata, user tidak berhadapan langsung dengan DNS resolver - mereka
berhadapan
dengan
program
seperti web
brower (Mozilla
Firefox, Safari, Opera, Internet Explorer, Netscape, Konqueror dan lain-lain dan
I- 24
Bab 1 Pengantar Teknologi Web dan Internet
klien mail (Outlook Express, Mozilla Thunderbird dan lain-lain). Ketika user
melakukan aktivitas yang meminta pencarian DNS (umumnya, nyaris semua
aktivitas yang menggunakan Internet), program tersebut mengirimkan permintaan
ke DNS Resolver yang ada di dalam sistem operasi.
DNS resolver akan selalu memiliki cache (lihat di atas) yang memiliki isi
pencarian terakhir. Jika cache dapat memberikan jawaban kepada permintaan
DNS, resolver akan menggunakan nilai yang ada di dalam cache kepada program
yang
memerlukan.
Kalau cache tidak
memiliki
jawabannya, resolver akan
mengirimkan permintaan ke server DNS tertentu. Untuk kebanyakan pengguna di
rumah, Internet Service Provider(ISP) yang menghubungkan komputer tersebut
biasanya akan menyediakan server DNS: pengguna tersebut akan mendata alamat
server secara manual atau menggunakan DHCP untuk melakukan pendataan
tersebut. Namun jika administrator sistem / pengguna telah mengkonfigurasi
sistem untuk menggunakan server DNS selain yang diberikan secara default oleh
ISP
misalnya
seperti Google
Public
DNS ataupun OpenDNS, maka DNS
resolver akan mengacu ke DNS server yang sudah ditentukan. Server nama ini
akan mengikuti proses yang disebutkan di Teori DNS, baik mereka menemukan
jawabannya maupun tidak. Hasil pencarian akan diberikan kepada DNS resolver;
diasumsikan telah ditemukan jawaban, resolver akan menyimpan hasilnya
di cache untuk penggunaan berikutnya, dan memberikan hasilnya kepada software
yang meminta pencarian DNS tersebut.
Sebagai bagian akhir dari kerumitan ini, beberapa aplikasi seperti web
browser juga memiliki DNS cache mereka sendiri, tujuannya adalah untuk
mengurangi penggunaan referensi DNS resolver, yang akan meningkatkan
kesulitan untuk melakukan debug DNS, yang menimbulkan kerancuan data yang
lebih akurat. Cache seperti ini umumnya memiliki masa yang singkat dalam
hitungan 1 menit.
Penerapan DNS lainnya
Sistem yang dijabarkan di atas memberikan skenario yang disederhanakan. DNS
meliputi beberapa fungsi lainnya:
Bab 1 Pengantar Teknologi Web dan Internet
I- 25
•
Nama host dan alamat IP tidak berarti terhubung secara satu-banding-satu.
Banyak nama host yang diwakili melalui alamat IP tunggal: gabungan
dengan pengasuhan maya(virtual hosting), hal ini memungkinkan satu
komputer untuk malayani beberapa situs web. Selain itu, sebuah nama host
dapat mewakili beberapa alamat IP: ini akan membantu toleransi
kesalahan (fault tolerance dan penyebaran beban (load distribution), juga
membantu suatu situs berpindah dari satu lokasi fisik ke lokasi fisik
lainnya secara mudah.
•
Ada cukup banyak kegunaan DNS selain menerjemahkan nama ke alamat
IP.
Contoh:,
agen
pemindahan
surat Mail
transfer
agents(MTA) menggunakan DNS untuk mencari tujuan pengiriman Email untuk
alamat
tertentu.
Domain
yang
menginformasikan
pemetaan exchange disediakan melalui rekod MX (MX record) yang
meningkatkan lapisan tambahan untuk toleransi kesalahan dan penyebaran
beban selain dari fungsi pemetaan nama ke alamat IP.
•
Kerangka Peraturan Pengiriman (Sender Policy Framework) secara
kontroversi menggunakan keuntungan jenis rekod DNS, dikenal sebagai
rekod TXT.
•
Menyediakan keluwesan untuk kegagalan komputer, beberapa server DNS
memberikan perlindungan untuk setiap domain. Tepatnya, tigabelas server
akar (root servers) digunakan oleh seluruh dunia. Program DNS maupun
sistem operasi memiliki alamat IP dari seluruh server ini. Amerika Serikat
memiliki, secara angka, semua kecuali tiga dari server akar tersebut.
Namun, dikarenakan banyak server akar menerapkan anycast, yang
memungkinkan beberapa komputer yang berbeda dapat berbagi alamat IP
yang sama untuk mengirimkan satu jenis services melalui area geografis
yang luas, banyak server yang secara fisik (bukan sekedar angka) terletak
di luar Amerika Serikat.
DNS
menggunakan TCP dan UDP di port
komputer 53
untuk
melayani
permintaan DNS. Nyaris semua permintaan DNS berisi permintaan UDP tunggal
I- 26
Bab 1 Pengantar Teknologi Web dan Internet
dari klien yang dikuti oleh jawaban UDP tunggal dari server. Umumnya TCP ikut
terlibat hanya ketika ukuran data jawaban melebihi 512 byte, atau untuk
pertukaaran zona DNS zone transfer
Jenis-jenis catatan DNS
Beberapa kelompok penting dari data yang disimpan di dalam DNS adalah
sebagai berikut:
•
A record atau catatan alamat memetakan sebuah nama host ke alamat IP
32-bit (untuk IPv4).
•
AAAA record atau catatan alamat IPv6 memetakan sebuah nama host
ke alamat IP 128-bit (untuk IPv6).
•
CNAME record atau catatan nama kanonik membuat alias untuk nama
domain. Domain yang di-alias-kan memiliki seluruh subdomain dan rekod
DNS seperti aslinya.
•
[MX record]]' atau catatan pertukaran surat memetakan sebuah nama
domain ke dalam daftar mail exchange server untuk domain tersebut.
•
PTR record atau catatan penunjuk memetakan sebuah nama host ke
nama kanonik untuk host tersebut. Pembuatan rekod PTR untuk sebuah
nama host di dalam domainin-addr.arpa yang mewakili sebuah alamat IP
menerapkan pencarian balik DNS (reverse DNS lookup) untuk alamat
tersebut.
Contohnya
(saat
penulisan
/
penerjemahan
artikel
ini), www.icann.net memiliki alamat IP 192.0.34.164, tetapi sebuah rekod
PTR
memetakan
,,164.34.0.192.in-addr.arpa
ke
nama
kanoniknya: referrals.icann.org.
•
NS record atau catatan server nama memetakan sebuah nama domain ke
dalam satu daftar dari server DNS untuk domain tersebut. Pewakilan
bergantung kepada rekod NS.
Bab 1 Pengantar Teknologi Web dan Internet
I- 27
•
SOA record atau catatan otoritas awal (Start of Authority) mengacu
server DNS yang mengediakan otorisasi informasi tentang sebuah domain
Internet.
•
SRV record adalah catatan lokasi secara umum.
•
Catatan TXT mengijinkan administrator untuk memasukan data acak ke
dalam catatan DNS; catatan ini juga digunakan di spesifikasi Sender
Policy Framework.
Jenis catatan lainnya semata-mata untuk penyediaan informasi (contohnya,
catatan LOC memberikan letak lokasi fisik dari sebuah host, atau data ujicoba
(misalkan, catatanWKS memberikan sebuah daftar dari server yang memberikan
servis yang dikenal (well-known service) seperti HTTP atau POP3 untuk sebuah
domain.
Nama Domain yang Diinternasionalkan
Nama domain harus menggunakan satu sub-kumpulan dari karakter ASCII, hal ini
mencegah beberapa bahasa untuk menggunakan nama maupun kata lokal
mereka. ICANN telah menyetujui Punycode yang berbasiskan sistem IDNA, yang
memetakan string Unicode ke karakter set yang valid untuk DNS, sebagai bentuk
penyelesaian untuk masalah ini, dan beberapa registries sudah mengadopsi
metode IDNS ini.
Perangkat lunak DNS
Beberapa jenis perangkat lunak yang menerapkan metode DNS, di antaranya:
•
BIND (Berkeley Internet Name Domain)
•
djbdns (Daniel J. Bernstein's DNS)
•
MaraDNS
•
QIP (Lucent Technologies)
•
NSD (Name Server Daemon)
I- 28
Bab 1 Pengantar Teknologi Web dan Internet
•
Unbound
•
PowerDNS
•
Microsoft DNS (untuk edisi server dari Windows 2000 dan Windows
2003)
Utiliti berorientasi DNS termasuk:
•
dig (domain information groper)
Pengguna Legal dari Domain
Pendaftar (registrant)
Tidak satupun individu di dunia yang "memiliki" nama domain kecuali Network
Information Centre (NIC), atau pendaftar nama domain (domain name registry).
Sebagian besar dari NIC di dunia menerima biaya tahunan dari para pengguna
legal dengan tujuan bagi si pengguna legal menggunakan nama domain tersebut.
Jadi sejenis perjanjian sewa-menyewa terjadi, bergantung kepada syarat dan
ketentuan pendaftar. Bergantung kepada beberpa peraturan penamaan dari para
pendaftar, pengguna legal dikenal sebagai "pendaftar" (registrants) atau sebagai
"pemegang domain" (domain holders)
ICANN memegang daftar lengkap untuk pendaftar domain di seluruh dunia.
Siapapun dapat menemukan pengguna legal dari sebuah domain dengan mencari
melalui basis data WHOIS yang disimpan oleh beberpa pendaftar domain.
Di (lebih kurang) 240 country code top-level domains (ccTLDs), pendaftar
domain memegang sebuah acuan WHOIS (pendaftar dan nama server).
Contohnya, IDNIC, NIC Indonesia, memegang informasi otorisatif WHOIS untuk
nama domain .ID.
Namun, beberapa pendaftar domain, seperti VeriSign, menggunakan model
pendaftar-pengguna. Untuk nama domain .COM dan .NET, pendaftar domain,
VeriSign memegang informasi dasar WHOIS (pemegang domain dan server
Bab 1 Pengantar Teknologi Web dan Internet
I- 29
nama). Siapapun dapat mencari detail WHOIS (Pemegang domain, server nama,
tanggal berlaku, dan lain sebagainya) melalui pendaftar.
Sejak sekitar 2001, kebanyakan pendaftar gTLD (.ORG, .BIZ, .INFO) telah
mengadopsi metode pendaftar "tebal", menyimpan otoritatif WHOIS di beberapa
pendaftar dan bukan pendaftar itu saja.
Kontak Administratif (Administrative Contact)
Satu pemegang domain biasanya menunjuk kontak administratif untuk menangani
nama domain. Fungsi manajemen didelegasikan ke kontak administratif yang
mencakup (diantaranya):
•
keharusan untuk mengikuti syarat dari pendaftar domain dengan tujuan
memiliki hak untuk menggunakan nama domain
•
otorisasi untuk melakukan pemutakhiran ke alamat fisik, alamat surel dan
nomor telepon dan lain sebagainya via WHOIS
Kontak Teknis (Technical Contact)
Satu kontak teknis menangani server nama dari sebuah nama domain. Beberapa
dari banyak fungsi kontak teknis termasuk:
•
memastikan bahwa konfigurasi dari nama domain mengikuti syarat dari
pendaftar domain
•
pemutakhiran zona domain
•
menyediakan fungsi 24x7 untuk ke server nama (yang membuat nama
domain bisa diakses)
Kontak Pembayaran (Billing Contact)
Tidak perlu dijelaskan, pihak ini adalah yang menerima tagihan dari NIC.
Server Nama (Name Servers)
I- 30
Bab 1 Pengantar Teknologi Web dan Internet
Disebut sebagai server nama otoritatif yang mengasuh zona nama domain dari
sebuah nama domain.
Politik
Banyak penyelidikan telah menyuarakan kritik dari metode yang digunakan
sekarang untuk mengatur kepemilikan domain. Umumnya, kritik mengklaim
penyalahgunaan dengan monopoli, seperti VeriSign Inc dan masalah-masalah
dengan
penunjukkan
dari
top-level
domain (TLD).
Lembaga
international ICANN (Internet Corporation for Assigned Names and Numbers)
memelihara industri nama domain.
1.2
Web Master dan Pemrograman Web
1.2.1 Pengertian Web Master
Pada dunia Teknologi Informasi (TI), banyak istilah profesi khususnya yang
berhubungan dengan web. Beberapa diantaranya adalah web designer, web
programer, web administrator dan, web animator. Secara umum, webmaster
mancangkup semua profesi tersebut. Webmaster adalah sebutan untuk orang
yang ahli dalam dunia web sehingga seorang webmaster tidak hanya dapat
mendesain halaman web saja, tetapi juga harus dapat membuat sistemnya dan
merawat website tersebut hingga tetap ada dan mencegahnya dari kerusakan yang
dapat terjadi.
Seorang webmaster adalah seorang yang melakukan hal sebagai berikut :
-
Membuat materi atau isi situs web (Content Creation)
-
Mendesain arsitektur situs web (Architectural Design)
-
Menerapkan aplikasi situs web (Implemetation)
-
Membuat tampilan situs web (Visual Design)
-
Mengelola situs web (Management)
Sacara garis besar dapat disimpulkan tugas seorang webmaster bertanggung jawab
untuk merencanakan, merancang, mengelola dan memelihara situs web agar tetap
berjalan dengan baik. Membuat situs web dapat dinikmati pengunjung
menjaganya dari kerusakan dan pelangaran yang datang dari dalam maupun dari
luar yang dapat disebabkan oleh ulah manusia maupun perangkat lunak.
Bab 1 Pengantar Teknologi Web dan Internet
I- 31
1.2.2. Penjelasan Tugas Web Master
Berikut dapat dijelaskan secara rinci tugas dari masing-masing profesi yang
dicakup oleh webmaster.
• Web Designer.
Web designer adalah orang yang tugasnya mendesain halaman web. Sebagai
seorang desainer harus mempunyai jiwa seni dan terampil dalam menggambar.
Pemilihan bentuk desain, pemilihan warna yang akan digunakan merupakan
penentu akhir desain yang dapat membuat pengunjung tertarik melihat halaman
web yang dirancangnya. Beberapa hal yang penting bagi seorang web designer
dalam merancang halaman web adalah sebagai berikut:
-
Dalam mendesain dan merancang halaman web, perhatikan kompatibilitas
resolusi monitor pengunjung.
-
Desain harus dirancang semenarik mungkin dan sesuai dengan tujuan
situs.
-
Desain yang dirancang harus mengikuti trend yang ada.
-
Penggunakan warna tidak terlalu terang ataupun terlalu gelap.
-
Desain yang durancang harus ditujukan dengan kepuasan pengunjung atau
orang banyak.
Beberapa software bantu yang dapat digunakan oleh web Designer untuk
mendesain halaman web adalah Adobe Phostoshop, Adobe Illustrator, Fireworks,
dsb.
•
Web Programmer.
Web Programmer sebenarnya sama dengan Web Developer. Web Progammer
harus menguasai beberapa bahasa pemograman web seperti HTML, DHTML,
Javascript, VBscript, Applet, ASP, PHP, ColdFusion, WML, XML dan masih
banyak lagi.
Tugas seorang Web Programmer adalah sebagai berikut :
-
Membuat coding agar dapat di-compile oleh browser.
-
Membuat sistem berjalan dengan baik.
-
Membuat, merancang dan mengelola basis data yang digunakan dari
sistem yang telah direncanakan.
I- 32
Menggabungkan antara desain dan program berjalan menjadi satu.
Bab 1 Pengantar Teknologi Web dan Internet
Beberapa software bantu yang dapat digunakan yaitu Macromedia Dreamweaver,
Microsoft FrontPage, Macromedia Homesite, Notepad, PHP Editor, dan masih
banyak lagi.
•
Web Animator.
Sesuai dengan namanya, tugas seorang Web Animator hanya membuat animasi
yang dapat menarik perhatian dan dinikmati oleh pengunjung. Dalam membuat
animasi, Web Animator harus memperhatikan rancangan website yang ada
sehingga animasi yang dihasilkan tidak akan merusak atau memperburuk desain
website yang ada. Beberapa software bantu yang dapat digunakan untuk membuat
animasi yaitu Macromedia Flash, SWISH, Gif animator, Swift 3D, LiveMotion
dan lain-lain.
•
Web Administrator.
Web Administrator bertanggung jawab atas berjalanya sebuah situs ketika sudah
selesai dibuat. Seorang Web Administrator harus mengetahui dan menguasai
perbedaan web server yang ada. Baik itu dari segi kelebihan maupun
kekurangannya.
Tugas Web administrator adalah sebagai berikut :
-
Melakukan instalasi, mengatur konfigurasi server, dan merawatnya agar
dapat digunakan dengan baik.
-
Memelihara server agar dapat digunakan selama 24 jam penuh.
-
Menjaga keutuhan data yang ada di dalam server.
-
Mengatur domain-domain (DNS) yang digunakan.
-
Mengatur account dan password yang digunakan baik untuk admin
maupun user.
-
Mengatur konfigurasi keamanan server dan firewall.
Seorang web administrator setidaknya dia harus menguasai IIS, Apache Server,
Telnet, Windows NT/2000, Linux, Solaris.
1.2.3 Tahap Pembangunan Situs
Seorang Web Master professional merancang suatu situs sama seperti merancang
suatu aplikasi perangkat lunak (Software). Ada tahapan-tahapan yang harus
dilakukan untuk membuat suatu sistem situs. Setiap tahapan yang telah selesai
Bab 1 Pengantar Teknologi Web dan Internet
I- 33
dilakukan, harus dilakukan analisa apakah sistem yang sedang dibangun sudah
berjalan dengan baik. Secara garis besar tahapan dalam pembangunan situs
sebagai berikut :
Website
System
Planning
Designing
Scripting
Testing
Promotion
Maintenance
Gambar 1.3 Tahapan pembangunan Situs
Gambar anak panah menunjukan jika terjadi kesalahan atau masalah pada sistem
maka tidak perlu mengulang dari tahapan awal, tetapi hanya mengulang pada
tahapan yang ingin diperbaiki saja.
 Planning (Perencanaan)
Proses pembuatan sistem situs dimulai dengan proses perencanaan. Pada tahap ini
berfungsi menentukan tujuan dari situs yang akan dibuat.
Kegiatan yang
dilakukan ialah analisa dan pengumpulan data yang diperlukan oleh situs,
kemudian menempatkan beberapa kebutuhan tersebut ke dalam situs yang akan
dikembangkan .
 Design (Desain)
I- 34
Bab 1 Pengantar Teknologi Web dan Internet
Dari informasi dan data yang dikumpulkan pada tahap perencanaan, tahap
berikutnya adalah melakukan desain terhadap tampilan halaman depan dan
halaman dalam situs. Desain diperlukan dalam masalah keindahan situs. Hal ini
dapat berupa kombinasi warna- warni unik, tata letak, jenis huruf yang membuat
isi situs memikat dan mudah untuk dibaca. Desain situs juga harus memberikan
‘imej’ yang tak terlupakan yang akan membedakan situs untuk saingan-saingan
lainnya. Keputusan tentang bagaimana situs harus berinteraksi dengan para
pengunjung sehingga memudahkan mereka bernavigasi di situs dan bagaimana
informasi dikategorikan sehingga para pengunjung dapat mengakses informasi
yang mereka kehendaki, secepat mungkin ditentukan dalam tahap ini.
 Scripting (Pemrograman)
Tahap ini merelisasikan ide – ide dari tahap-tahap sebelumnya ke situs dalam
sebuah situs. Produksi meliputi teknologi yang digunakan untuk menjadikan ideide dalam tahap desain, selanjutnya melakukan scripting
dari hasil desain
tersebut ke dalam bahasa web.
 Testing (Uji coba)
Pengujian dilakukan untuk menyakinkan jikalau semua halaman situs telah
terhubung dengan benar dan semua link eksternal situs web terjaga. Tahap ini
menguji fungsionalitas dari fomulir-fomulir interaktif dan validasi penginputan
data oleh pengunjung. Tahap ini dapat dikatakan sebagai kotrol pengujian
kualitas, bila di server local maupun di server hosting terhadap file-file yang
sudah di-upload.
 Promotion (Promosi)
Setelah melakukan tahap uji coba, saatnya untuk meluncurkan situs web ke
internet untuk mendeklarasi keberadaannya kepada dunia. Promosi merupakan
tahap yang sangat penting untuk membuat situs dikenal, baik melalui media
offline maupun online.
 Maintenance (Pemeliharan)
Setelah situs diluncurkan, maka diperlukan tahap pemeliharaan terhadap situs
tersebut. Pemeliharaan menjaga kesegaran situs dengan isi-isi yang terbaru.
Server yang digunakan juga harus terus dipelihara agar keamanan situs terjga
dari serangan-serangan hacker. Pada tahap ini juga meliputi pengubahan struktur
Bab 1 Pengantar Teknologi Web dan Internet
I- 35
situs yang ada atau penambahan fitur-fitur baru sesuai dengan perkembangan
teknologi untuk menambah ketertarikan para pengunjung terhadap situs.
Pembangunan dan pengembangan sebuah situs yang sukses tidak pernah bisa
selesai.
1.2.4 Web Hosting
Web hosting adalah salah satu bentuk layanan jasa penyewaan tempat
penyimpanan data / file yang berkapasitas Megabytes (Mb) hingga Terabytes (Tb)
di internet yang memungkinkan perorangan atau organisasi menampilkan jasa
atau produknya di web / situs internet. Layanan jasa ini terkoneksi ke internet
selama 24 jam sehingga data tersebut dapat direquest atau diakses oleh user dari
semua tempat secara simultan. Hal inilah yang menyebabkan sebuah website
dapat dikases bersamaan dalam satu waktu oleh multi user.
Kecepatan menyebarkan informasi tentang jasa, produk layanan publik dan lainya
merupakan salah satu tolak ukur keberhasilan bisnis perorangan atau perusahaan.
Contoh pertama: di Indonesia dengan sekitar 100 juta pengguna telepon genggam
yang tentu saja dapat tersambung ke internet melalui gprs, tidak ada alasan lagi
untuk tidak tersambung ke dunia maya, bahkan didaerah terpencil sekalipun.
1.2.5 Pemrograman
Pemrograman (programming) merupakan suatu metode untuk membuat suatu
aplikasi menggunakan bahasa pemograman. Bahasa pemrograman adalah bahasa
yang dapat dimengerti oleh komputer untuk mengolah sesuatu, yang berasal dari
masukan (input) user. Dalam pemograman dibutuhkan pemikiran dan logika
yang sangat kuat untuk membuat suatu algoritma yang dapat menghasilkan suatu
aplikasi yang baik, karena banyak perhitungan matematis didalamnya.
Untuk memahami suatu bahasa pemograman, maka tidak harus mempelajari
semuanya. Setidaknya yang harus dimengerti adalah dasar pemograman seperti
memahami apa itu variabel, konsep bahasa pemograman, alur logika dan lainnya.
Mempelajari suatu bahasa pemograman tidak terlalu sulit karena dapat dimulai
I- 36
Bab 1 Pengantar Teknologi Web dan Internet
dengan mempelajari sintaks dan memperbanyak latihan menulis kodenya. Dalam
dunia pemograman terdapat beberapa istilah yang dibagi menurut hasil atau media
aplikasinya, yaitu :
-
Desktop Programming.
Pada desktop programming, hasil aplikasinya berjalan pada sistem operasi dan
berdiri sendiri. Beberapa contoh aplikasinya adalah aplikasi basis data, aplikasi
multimedia,aplikasi visual, aplikasi word processor dan sebagainya.
-
Web Programming
Aplikasi yang dihasilkan pada web programming digunakan pada media web dan
membutuhkan browser sebagai tool untuk melihat hasilnya.
-
Mobile Programming
Mobile programming termasuk pemograman yang baru, karena pada mobile
programming beberapa tahun ini digunakan secara besar-besaran untuk
menghasilkan aplikasi yang dapat berjalan pada media mobile (ponsel dan PDA).
1.2.6 Pemrograman Berbasis Web
Pemrograman berbasis web adalah salah satu penerapan multi tier application.
Multi tier application adalah aplikasi yang dibagi menjadi beberapa bagian yang
menjalankan fungsi masing-masing. Secara umum, ada tiga bagian utama dari
multi tier application:
Client side presentation
Server side business logic
Backend storage
1.
Client Side Presentation
Client side presentation mengatur bagaimana aplikasi berinteraksi dengan user.
Yang dimaksud dengan interaksi antara lain adalah bagaimana data ditampilkan,
bagaimana fungsi dan fitur aplikasi ditampilkan. Dalam aplikasi berbasis web,
client side presentation dibuat dengan bahasa HTML, CSS, dan JavaScript.
Beberapa tool yang digunakan untuk membuat client side presentation
diantaranya Microsoft Frontpage,
Macromedia Dreamweaver, dan sebagainya. Client side presentation berbasis web
contohnya adalah tampilan aplikasi email yang kita buka dengan browser.
Bab 1 Pengantar Teknologi Web dan Internet
I- 37
2.
Server Side Business Logic
Server side business logic, sering disebut juga middle tier, adalah bagian yang
bertanggung jawab atas cara kerja aplikasi. Di dalamnya kita mengatur bagaimana
fungsi dan fitur aplikasi dapat bekerja dengan baik. Dalam aplikasi berbasis web,
ada beberapa alternatif yang dapat digunakan, ditentukan oleh jenis platiform
yang digunakan. Alternatif ini akan dijelaskan lebih detail pada bagian
selanjutnya.
3.
Back End Storage
Bagian ini mengatur cara penyimpanan data. Penyimpanan data merupakan materi
yang cukup kompleks dalam pembangunan aplikasi. Karena kecepatan, keutuhan,
dan keamanan data merupakan faktor kritis dalam aplikasi. Ada banyak solusi
database yang tersedia di pasaran. Pada umumnya, database yang digunakan
bertipe relasional (Relational Database Management System – RDBMS).
Manajemen data dilakukan dengan bahasa SQL (Standard Query Language).
1.2.7 Komponen Pemrograman Berbasis Web
Perangkat lunak berbasis web dibangun atas tiga
komponen yakni
komponen basis data, komponen perangkat tengah dan komponen web server.
Untuk mengaktifkan perangkat lunak berbasis web diperlukan web browser
dengan cara mengakses suatu alamat tertentu. Setiap komponen terdapat
perangkat lunak bantu yang dapat dipergunakan dalam merealisasikan perangkat
lunak berbasis web. Gambar dibawah ini menunjukkan suatu arsitektur sistem
berbasis web yaitu :
I- 38
Bab 1 Pengantar Teknologi Web dan Internet
Gambar 1.3 Arsitektur Sistem Berbasis Web
Sumber :
Greenspan, Jay & Bulger, Brad : “MySQL/PHP Database Applications”.
M&T Books, 2001. http://www.idgbooks.com
1.2.8 Keuntungan Mengembangkan Aplikasi Berbasis Web
Mengembangkan aplikasi dengan menggunakan teknologi Web akan lebih
menguntungan daripada mengembangkan aplikasi sistem informasi tradisional
dan end-user. Tentu saja pernyataan ini benar jika aplikasi dikembangkan untuk
pemakai internal pada intranet atau pemakai luar (eksternal) dengan menggunakan
Web.
 Sudut Pandang Pemakai
Pemakai internal tentunya menginginkan kemudahan dalam akses informasi,
sedangkan pemakai luar menginginkan menggunakan database dan aplikasi yang
disediakan untuk diakses. Oleh karena itu harus dapat mengembangkan suatu
aplikasi
yang
mudah
digunakan,
menarik
serta
handal
bagi
user.
Berikut dibawah hanya beberapa keuntungan bagi pemakai :
•
GUI (Graphical User Interfaces)
•
Aplikasi dan query language bagi user adalah abstrak. User hanya
diperhadapkan pada form saja. Di sini user tidak perlu memiliki
pengetahuan tentang aplikasi ataupun parameter serta input yang valid,
Bab 1 Pengantar Teknologi Web dan Internet
I- 39
apalagi mengenai struktur table (record), user tidak perlu mengetahui hal
tersebut. Form-input digunakan untuk mengkoleksi informasi yang
diperlukan untuk sebuah query database yang disusun oleh aplikasi.
•
Browser Customization.
•
Akses yang mudah dan cepat untuk informasi, database dan aplikasi.
Suatu informasi akan tidak berguna jika pemakai tidak dapat membaca dan
memanfaatkan informasi tersebut. Aplikasi Web menjembatani keadaan
tersebut, dimana jika user tidak mengetahui harus bagaimana mengakses
dokumen dan database yang tersedia.
 Sudut Pandang Pengembang
Dengan adanya teknologi Web ini, pengembang memperoleh beberapa
keuntungan :
•
Teknologi web merupakan teknologi standard. Aplikasi web dibangun
berdasarkan pada protokol standard seperti TCP/IP dan HTTP. Hal
tersebut
mengakibatkan
pengembang
dapat
berkonsentrasi
pada
pengembangan aplikasi, tidak perlu memikirkan bagaimana program
koneksinya. Dalam membangun aplikasi web, tidak mungkin terlepas dari
pemakaian HTML (Hypertext Markup Language). HTML bukanlah suatu
bahasa seperti C/C++, Pascal, Basic. HTML hanyalah merupakan file text
ASCII yang berisi dokumen dengan pemformatannya ditandai dengan
suatu tag-tag (penandaan). Pengembang dapat menggunakan HTML ini
untuk menyatakan suatu aplikasi, image, dan menyediakan akses ke
program (pada server) dengan menggunakan CGI dan Web Server API5
ataupun Java. Selain itu, pada HTML dapat ditambahkan client-side
scripting (menggunakan VBScript, JavaScript, Jscript misalnya) dan
control ActiveX yang dapat membuat suatu halaman HTML menjadi lebih
interaktif.
•
Proses mempelajari lebih mudah dari tool development yang tradisional.
•
Kompatible terhadap segala platform komputer.
•
Mudah untuk melakukan integrasi, oleh karena HTML menyediakan
kemampuan untuk melakukan permintaan server-side program lewat CGI
atau Web Server API. Pengembang hanya cukup mengetahui bagaimana
I- 40
Bab 1 Pengantar Teknologi Web dan Internet
bekerja di dalam lingkungan CGI atau Web Server API dalam rangka
mengintegrasikan program CGI/API dengan aplikasi baru atau yang sudah
ada seperti database atau utiliti graphics-generate.
•
Cepat dalam mengembangkan GUI. Hal ini jelas, dengan HTML maka
dapat dengan segera menghasilkan suatu tampilan dokumen informasi
yang sangat interaktif. Apalagi ditambah kemampuan dari Web server
menangani banyak header MIME dari berbagai macam dokumen dan
aplikasi, demikian juga web browser.
TUGAS
Untuk dapat lebih memahami materi Bab 1, akan diberikan tugas presentasi untuk
setiap sub bab.
Bab 1 Pengantar Teknologi Web dan Internet
I- 41
I- 42
Bab 1 Pengantar Teknologi Web dan Internet
BAB II
INSTALASI APLIKASI PERANGKAT
LUNAK BERBASIS WEB
Tujuan Pembelajaran :
Mengerjakan instalasi perangkat lunak aplikasi web PHP, MYSQL
dan APACHE
Bab 2 Instalasi Perangkat Lunak Berbasis Web
II- 1
2.1 Persiapan dan Instalasi Sistem Web Server APACHE
Perangkat Lunak utama untuk melakukan pemrograman berbasis web yang
dibutuhkan antara lain :
•
Apache Web Server sebagai perangkat lunak web server (yang digunakan
pada bahasan kali ini adalah versi 2.2.4)
•
PHP sebagai perangkat lunak tengah (middleware) (yang digunakan pada
bahasan kali ini menggunakan versi PHP 5.2.2)
•
MySQL sebagai perangkat lunak basis data (yang digunakan pada bahasan
kali ini menggunakan versi MySQL 5.0.41)
Versi perangkat lunak di atas akan selalu mengalami perubahan yang terbaru
sehingga tidak menutup kemungkinan penggunaan versi yang terbaru.
Pemrograman berbasis web dapat lebih mudah dilakukan dibantu dengan
perangkat lunak bantu / tambahan, yakni :
•
MySQL-Front
adalah
perangkat
lunak
bantu
untuk
melakukan
pemrograman basis data pada pemrograman web.
•
Macromedia Dreamweaver
Perangkat lunak di atas dapat digunakan untuk melakukan coding
atau
scripting pada pemrograman berbasis web.
•
Xampp adalah perangkat lunak bantu yang dapat digunakan untuk
melakukan pemrograman berbasis web tanpa harus melakukan instalasi
paket perangkat lunak yang terpisah-pisah. Perangkat lunak web server,
perangkat lunak tengah dan perangkat lunak basis data telah terintegrasi
dalam satu paket perangkat lunak Xampp. Xampp yang digunakan pada
bahasan kali ini adalah Xampp 1.6.2 yang telah mencakup ketiga perangkat
lunak utama di atas (Apache Web Server 2.2.4, PHP 5.2.2, MySQL 5.0.41).
2.2 Instalasi dan Konfigurasi MySQL
Saat ini untuk pembuatan aplikasi berbasis web sudah ada aplikasi terintegrasi
dimana sudah tersedia basis data, aplikasi pemrograman web dan web server.
Aplikasi ini dapat diinstal di komputer lokal. Salah satu aplikasi jenis adalah
II- 2
Bab 2 Instalasi Perangkat Lunak Berbasis Web
XAMPP. XAMPP merupakan singkatan dari Cross-Platform (X), Apache (A),
MySQL (M), PHP (P) dan Perl (P). XAMPP dibuat selengkap itu dengan tujuan
memudahkan bagi para pengembang untuk membuat web server lokal untuk
tujuan pengujian.
XAMPP menyediakan semua yang kita butuhkan untuk membuat sebuah web
server – server aplikasi (Apache), database (MySQL), dan bahasa scripting (PHP).
XAMPP juga cross-platform, yang berarti bisa bekerja sama dengan baik di
Linux, Mac dan Windows.
Karena sebagian besar penyebaran web server yang sebenarnya (secara online)
menggunakan komponen yang sama seperti XAMPP, sehingga membuat transisi
dari server lokal ke server online sangat mudah.
Pada tutorial ini menggunakan XAMPP Windows versi 1.8.2, mungkin sekarang
sudah ada update terbaru dari XAMPP. Jika menemukan XAMPP versi terbaru
dari yang versi yang digunakan pada tutorial ini, masih bisa mengikuti tutorial ini
karena cara install XAMPP dari versi ke versi tidak ada perubahan yang
mencolok.
XAMPP tersedia dalam tiga format file:
EXE , .7z – File 7zip, ZIP – Compressed file zip. Dari ketiga format tersebut,
yang paling mudah untuk diinstall adalah yang format EXE, karena itu dalam
tutorial ini akan menggunakan format EXE.
Jika ingin men-download yang versi 1.8.2, dapat di-download instaler XAMPP
versi tersebut dengan mengunjungi url download dibawah ini (Ukuran 102MB).
“http://download.s32cdn.com/20/198081/858013/xamppwin321.8.20VC9installer.
exe”
Atau ingin men-download yang versi terbaru dengan mengunjungi url halaman:
https://www.apachefriends.org/download.html
Cara Install XAMPP di Windows
Bab 2 Instalasi Perangkat Lunak Berbasis Web
II- 3
Ikuti langkah-langkah untuk menginstall XAMPP dibawah ini:
Langkah 1: Non-aktifkan anti-virus karena dapat menyebabkan beberapa
komponen XAMPP tidak bisa di Install dengan lancar.
Langkah 2: Untuk pengguna Windows 7, Anda akan melihat jendela pop up,
peringatan tentang User Account Control (UAC) yang aktif pada sistem. Klik
“OK” untuk melanjutkan instalasi.
Klik tombol “OK”
Langkah 3: Mulai proses instalasi dengan klik dua kali pada instaler XAMPP.
Klik ‘Next’ setelah splash screen.
Klik “Next”
II- 4
Bab 2 Instalasi Perangkat Lunak Berbasis Web
Langkah 4: Di sini, kita dapat memilih komponen yang ingin kita instal. Pilih
pilihan default dan klik ‘Next’.
Pilih Komponen
Langkah 5: Pilih folder sebagai tempat XAMPP akan diinstal, di folder ini akan
menampung semua file aplikasi web kita, jadi pastikan untuk memilih drive yang
memiliki banyak ruang(space).
Bab 2 Instalasi Perangkat Lunak Berbasis Web
II- 5
Pilih Folder
Langkah 6: Layar berikutnya adalah promo untuk BitNami, sebuah toko aplikasi
untuk server perangkat lunak. Hapus kotak centang ‘Learn more about BitNami
for XAMPP’.
Hapus Centang
II- 6
Bab 2 Instalasi Perangkat Lunak Berbasis Web
Langkah 7: Sekarang Setup sudah siap untuk menginstall XAMPP. Klik Next
dan tunggu instaler untuk membongkar paket-nya dan memasang komponen yang
dipilih. Mungkin memakan waktu beberapa menit. Nanti mungkin kita akan
diminta untuk menyetujui akses Firewall untuk komponen tertentu (seperti
Apache) selama proses instalasi.
Langkah 8: Proses Install sudah selesai! Pilih Kotak centang ‘Do you want to
start the Control Panel now?’ untuk membuka panel kontrol XAMPP.
Centang Untuk Memulai
Cara menggunakan XAMPP Control Panel
XAMPP control panel memberi kita kontrol penuh atas semua komponen
XAMPP yang telah di Install. Kita dapat menggunakan Control Panel untuk
memulai / menghentikan modul yang berbeda, meluncurkan Unix shell, membuka
Windows explorer sampai melihat semua operasi yang sedang berjalan di balik
layar. Berikut ini adalah gambaran singkat dari Control Panel. Untuk saat ini, kita
hanya perlu tahu bagaimana untuk memulai dan menghentikan server Apache.
Bab 2 Instalasi Perangkat Lunak Berbasis Web
II- 7
Untuk melakukan konfigurasi MySQL, dapat dilakukan dengan mengaktifkan
MySQL melalui Xampp Control Panel.
Tugas: Lakukan konfigurasi MySQL sampai dapat difungsikan dengan baik.
2.3 Instalasi APACHE dan PHP
Karena xampp adalah sebuah aplikasi terintegrasi sebuah web server maka
sebagai tugas: lakukan konfigurasi server APACHE dan PHP sehingga dapat
berfungsi dengan baik.
II- 8
Bab 2 Instalasi Perangkat Lunak Berbasis Web
BAB 3
PERINTAH/TAG HTML DASAR
Tujuan Pembelajaran:
Memahami kaidah penulisan dan mempraktikkan tag
dasar
3.1
Pendahuluan HTML
3.2
Struktur
3.3
Text
3.4
List
3.5
Tautan/link
3.6
Gambar
3.7
Tabel
3.8
Form
3.9
Flash, Audio dan Video
Bab 3 Perintah/Tag HTML Dasar
HTML
III- 1
3.1 Pendahuluan HTML
Di kehidupan sehari-hari, kita sudah sangat sering mengakses dokumen tercetak
seperti surat kabar, laporan dan dokumen jenis lain. Halaman web yang sering kita
akses juga sebenarnya ada kumpulan dokumen juga dan memiliki kemiripan
dengan dokumen yang biasa kita akses. Kalau kita ambil surat kabar sebagai salah
satu dokumen catak, bila diperhatikan memiliki struktur seperti : ada beberapa
artikel dalam satu halaman dimana setiap artikel ada judul artikel atau heading
kemudian ada sub judul dan beberapa paragraf serta satu atau beberapa gambar.
Saat ini beberapa surat kabar sudah mulai terbit secara online. Dari strukurnya,
dokumen surat kabar cetak dan online memiliki kemiripan, yakni adanya
heading/judul, sub judul, paragraf dan gambar. Namun tetap ada perbedaan. Pada
surat kabar tercetak, satu halaman memuat beberapa artikel sekaligus. Kalau kita
bandingkan dengan versi online, biasanya versi yang ini hanya memuat beberapa
headline saja dari berita dan untuk lebih detailnya terdapat dalam satu halaman
tersendiri.
3.2 Struktur
Dokumen web memiliki kemiripan dengan dokumen yang biasa kita baca. Namun
tetap ada perbedaan. Di semua jenis dokumen yang kita kenal, struktur dokumen
adalah unsur yang penting bagi pembaca dalam memahami pesan yang
disampaikan dan panduan dalam navigasi dokumen. Untuk membuat halaman
web, sangat penting untuk dapat memahami struktur dokumen.
Sebuah dokumen web ditulis menggunakan HTML (Hyper Text Markup
Language). Sebuah dokumen web yang menggunakan HTML yang memiliki
struktur
<html>
<body>
<h1>Bagian ini adalah Kepala Dokumen Utama</h1>
<p>Bagian ini adalah paragraf yang menjelaskan secara detail judul yang
ada pada Kepala Dokumen. Apabila paragraf ini panjang, maka
biasanya akan dibagi ke dalam sub-sub paragraf atau judul.<p>
<h2>Bagian ini adalah sub judul</h2>
III- 2
Bab 3 Perintah/Tag HTML Dasar
<p>Banyak artikel memiliki sub judul untuk membantu pembaca struktur
tulisan yang sedang dibaca. Ada beberapa macam sub-sub judul lain
yang levelnya lebih rendah.</p>
<h2>Bagian ini adalah sub judul yang lain</h2>
<p>Paragraf ini menjelaskan sub judul lain di atas.</p>
</body>
</html>
Kode HTML (yang dicetak tebal) terdiri atas karakter yang diapit oleh tanda
kurung, yang disebut sebagai elemen HTML. Elemen biasanya terdiri atas dua
buah tag, yaknik tag pembuka dan penutup. Tag penutup memiliki tambahan
simbol slash (/). Setiap elemen HTML akan memberitahu kepada browser tentang
informasi yang berada diantara tag pembuka dan penutup. Dokumen HTML
menggunakan elemen untuk menjelaskan struktur dari dokumen. Tag bertindak
sebagai wadah yang memberi informasi tindakan apa yang harus dilakukan
terhadap dokumen yang berada diantara tag pembuka dan penutup.
Kalau diperhatikan, sebuah tag terdiri atas :
Karakter
<p>
Kurung sebelah kiri
(seperti tanda kurang dari)
Kurung sebelah kanan
(seperti tanda lebih dari)
Tag pembuka
Bab 3 Perintah/Tag HTML Dasar
III- 3
Karakter yang berada di dalam kurung menandakan tujuan dari tag. Misalnya
pada contoh di atas huruf p menandakan bahwa karakter tersebut adalah sebuah
paragraf. Untuk tag penutup ada tambahan simbol garis miring slash.
Karakter
</p>
Simbol garis miring/slash
Kurung sebelah kiri
(seperti tanda kurang dari)
Kurung sebelah kanan
(seperti tanda lebih dari)
Tag penutup
Sering kali sebuah dokumen HTML yang diapit tag ditambahkan atribut sebagai
pelengkap perlakuan dari sebuah dokumen. Atribut memberikan tambahan
informasi tentang konten dari sebuah elemen. Atribut muncul pada tag pembuka
dari elemen dan terdiri atas dua bagian yakni nama dan nilai atribut yang
dipisahkan oleh tanda sama dengan. Struktur atribut adalah sebagai berikut :
Nama atribut
<p lang="en-us">Paragraph in English</p>
Nilai atribut
III- 4
Bab 3 Perintah/Tag HTML Dasar
Nama dari atribut menunjukan informasi tambahan apa yang ada pada konten
elemen dan ditulis menggunakan huruf kecil. Sedangkan value adalah nilai atau
seting dari atribut dan harus ditulis dengan diapit oleh tanda kutip ganda. Atribut
yang berbeda akan memiliki value yang berbeda. Pada contoh di atas, atribut lang
adalah untuk bahasa yang digunakan pada elemen yang dalam hal ini bernilai “enus” yang berarti bahasa Inggris-Amerika.
Body, Head dan Title
<body>
Segala sesuatu yang diapit oleh tag ini akan muncul di dalam halaman utama
sebuah browser. Contoh :
<html>
<head>
<title>Bagian ini adalah Judul Halaman</title>
</head>
<body>
<h1>Bagian ini adalah Tubuh/body dari Halaman web</h1>
<p>Segala sesuatu yang berada di sini akan ditampilkan pada
main browser window.</p>
</body>
</html>
<head> dan <title>
Pada tag ini akan menampilkan judul tab dari sebuah halaman web yang di dalam
tag <head> ini terdapat tag <title>. Apabila kode HTML di atas ditampilkan pada
browser maka tampilannya adalah sebagai berikut
Segala yang tertulis pada
tag title akan muncul di sini
Segala yang tertulis pada
tag body akan muncul di sini
Bab 3 Perintah/Tag HTML Dasar
III- 5
Gambar 3.1 Contoh Tampilan di web Browser untuk tag body
Praktik
Untuk lebih memahami tentang struktur HTML, lakukan praktik berikut:
1
Buka aplikasi pengolah kata, misalkan notepad
2
Tuliskan kode HTML berikut pada notepad
3
<html>
<head>
<title>Bagian ini adalah Judul Halaman</title>
</head>
<body>
<h1>Bagian ini adalah Tubuh/body dari Halaman web</h1>
<p>Segala sesuatu yang berada di sini akan ditampilkan pada
main browser window.</p>
</body>
</html>
Setelah selesai, simpan file di atas dengan format nama_file.html atau
nama_file.htm dan jangan lupa untuk pilihan Save as type pilihlah All files.
4
Buka file yang telah disimpan di atas menggunakan web browser, anda dapat
memilihnya apakah menggunakan Internet Explorer(IE), Mozilla Fire Fox,
Google Chrome atau yang lain.
5
Perhatikan hasil yang muncul dan catat bagian-bagian yang ada untuk setiap
tag body, head dan title.
3.3. Text
Ketika membuat sebuah halaman web, Anda menambahkan tag (dikenal sebagai
markup) untuk isi halaman. Tag ini memberikan makna tambahan dan
memungkinkan browser untuk menunjukkan penggunaan struktur yang tepat
untuk halaman.
Heading
HTML memiliki 6 tingkat untuk heading yakni yang terbesar adalah <h1> untuk
heading utama dan <h2> adalah untuk sub heading. Apabila ada sub heading yang
lebih kecil lagi dapat menggunakan <h3> dan seterusnya sampai yang paling kecil
<h6>. Praktikan contoh berikut:
1. Buka notepad
2. Tuliskan kode HTML berikut
III- 6
Bab 3 Perintah/Tag HTML Dasar
<html>
<head>
<title>Bagian ini adalah Judul Halaman</title>
</head>
<body>
<h1>Heading Utama</h1>
<h2>Sub Heading</h2>
<h3>Sub Heading</h3>
<h4>Sub Heading</h4>
<h5>Sub Heading</h5>
<h6>Sub Heading</h6>
</body>
</html>
3. Simpan dengan nama file misalnya heading.html
4. Buka file heading.html dengan web browser yang anda miliki
5. Perhatikan perbedaan antara <h1> sampai dengan <6>
Paragraf
Untuk membuat sebuah paragraf, batasi kalimat yang akan dijadikan paragraf
dengan tag <p> dan ditutup dengan </p>. Secara default, browser akan
menampilkan setiap paragraf pada baris baru dengan beberapa ruang antara itu
dan setiap paragraf berikutnya. Untuk lebih jelasnya, lakukan praktik berikut:
1. Buka Notepad
2. Tulis kode HTML berikut
<p>A paragraph consists of one or more sentences
that form a self-contained unit of discourse. The
start of a paragraph is indicated by a new
line.</p>
<p>Text is easier to understand when it is split up
into units of text. For example, a book may have
chapters. Chapters can have subheadings. Under
each heading there will be one or more
Bab 3 Perintah/Tag HTML Dasar
III- 7
paragraphs.</p>
3. Simpan kode HTML di atas dengan nama file paragraf.html
4. Buka dengan web browser
5. Perhatikan hasilnya
Bold dan Italic
Sering kali dalam menulis paragraf, kita memerlukan penekanan pada kata-kata
tertentu sebagai kata kunci. Biasanya yang digunakan adalah kata tersebut dicetak
tebal(bold) atau miring(italic). Tag HTML yang dapat digunakan untuk mencetak
kata atau kalimat dengan cetak tebal adalah <b> ....</b> dan untuk cetak miring
menggunakan <i>...</i>. Untuk lebih jelasnya lakukan praktik berikut:
1. Buka notepad
2. Tuliskan kode HTML berikut ini
<p>This is how we make a word appear <b>bold.</b>
</p>
<p>Inside a product description you might see some
<b>key features</b> in bold.</p>
<p>This is how we make a word appear <i>italic</i>.
</p>
<p>It's a potato <i>Solanum teberosum</i>.</p>
<p>Captain Cook sailed to Australia on the
<i>Endeavour</i>.</p>
3. Simpan kode HTML di atas dengan nama file bold-italic.html
4. Buka dengan web browser dan perhatikan bagian mana yang dicetak tebal
dan miring.
3.4. List
Ketika kita akan menuliskan pada halaman web beberapa item dalam daftar, maka
dapat digunakan list. Ada dua macam list yakni :
•
Ordered List, yaitu list dimana setiap item di dalam list diberi nomor urut.
•
Unordered List, yaitu list yang diawali simbol bullet bukan angka atau
karakter terurut,
III- 8
Bab 3 Perintah/Tag HTML Dasar
•
Definition List,
yaitu suatu list yang biasanya digunakan untuk
mendefinisikan sebuah istilah.
Ordered List
Ordered list dibuat dengan menggunakan tag pembuka <ol> dan penutup </ol>.
Sedangkan untuk item di dalam list menggunakan tag pembuka <li> dan penutup
</li>. Agar lebih memahaminya, lakukan langkah berikut,
1. Buka Notepad
2. Ketikan kode HTML berikut ini
<ol>
<li>Masukan kopi ke dalam gelas</li>
<li>Tambahkan gula secukupnya atau sesuai selera</li>
<li>Tambahkan creamer yang diinginkan</li>
<li>Masukan air panas ke dalam campuran kopi, gula dan creamer</li>
<li>Aduk-aduk sampai semua larut</li>
<li>Kopi hangat siap dihidangkan</li>
</ol>
3. Simpan file di atas dengan nama file order-list.htm
4. Buka file order-list.htm di web browser
5. Browser akan mengurutkan order list secara default menggunakan angka
Unordered List
Untuk membuat unordered list, digunakan tag <ul> dan </ul>. Setiap item di
dalam list diapit oleh <li> dan </li>. Untuk lebih jelas, lakukan langkah berikut,
1. Buka Notepad
2. Tuliskan kode HTML berikut
<ul>
<li>1 kg kentang</li>
<li>100 ml susu segar</li>
<li>50g roti tawar</li>
<li>Mentega secukupnya</li>
<li>Garam dan lada secukupnya</li>
</ul>
Bab 3 Perintah/Tag HTML Dasar
III- 9
3. Simpan dengan nama file unordered-list.html
4. Buka di web browser.
Definition List
Untuk membuat definition list digunakan tag <dl> yang diikuti oleh serangkaian
istilah dan definisinya. Di dalam elemen <dl> terbagi lagi atas elemen <dt> dan
<dd>. Elemen <dt> untuk istilah yang akan dijabarkan definisinya dalam elemen
<dd>. Untuk lebih memahaminya, lakukan praktik berikut
1. Buka Notepad
2. Tulis kode HTML berikut
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish that is served with
condiments such as shredded daikon radish or
ginger root, wasabi and soy sauce</dd>
<dt>Scale</dt>
<dd>A device used to accurately measure the
weight of ingredients</dd>
<dd>A technique by which the scales are removed
from the skin of a fish</dd>
<dt>Scamorze</dt>
<dt>Scamorzo</dt>
<dd>An Italian cheese usually made from whole
cow's milk (although it was traditionally made
from buffalo milk)</dd>
</dl>
3. Simpan file dengan nama definition-list.html
4. Buka file tersebut di atas pada web browser dan perhatikan hasilnya
3.5. Tautan/Link
Link adalah fitur web yang memungkinkan Anda untuk berpindah dari satu
halaman web ke halaman yang lain sehingga muncul istilah browsing atau surfing.
Link dibuat menggunakan elemen <a>. Pengguna dapat mengklik tautan yang
III- 10
Bab 3 Perintah/Tag HTML Dasar
terletak antara <a> dan </a>. Untuk menunjukkan ke halaman web mana tautan
tersebut menuju, digunakan atribut href. Berikut formatnya
Ini adalah halaman web yang
dituju oleh link
Ini adalah teks yang akan diklik
oleh pengguna
<a href=http://www.pnj.ac.id>PNJ</a>
Tag tautan/link pembuka
Tag tautan/link penutup
Tautan ke Situs Lain
Link yang dibuat menggunakan elemen <a> dengan memiliki atribut disebut href.
Nilai dari atribut href adalah halaman yang ingin dituju ketika diklik pada link.
Pengguna dapat mengklik apa pun yang muncul antara pembuka tag <a> dan
penutup tag </a> dan akan dibawa ke halaman yang ditentukan dalam atribut href.
Ketika link ke sebuah website berbeda, nilai href atribut akan menjadi web penuh
untuk situs, yang dikenal sebagai URL absolut. Browser menunjukkan link
menggunakan warna biru dengan digarisbawahi secara default. Untuk lebih jelas,
lakukan praktik berikut
1. Buka Notepad
2. Tuliskan kode HTML berikut ini
<p>Jurusan Teknik di PNJ:
<ul>
<li><a href="http://www.elektro.pnj.ac.id">Teknik Elektro</a></li>
<li><a href="http://www.mesin.pnj.ac.id">Teknik Mesin</a></li>
<li><a href="http://www.sipil.pnj.ac.id">Teknik Sipil</a></li>
</ul>
</p>Simpan dengan nama file tautan.html
3. Buka file tautan.html menggunakan web browser
4. Perhatikan hasil yang diperoleh
URL singkatan dari Uniform Resource Locator. Setiap halaman web memiliki
URL sendiri. Ini adalah alamat web yang akan ketik ke browser jika ingin
Bab 3 Perintah/Tag HTML Dasar
III- 11
mengunjungi halaman tertentu. URL absolut dimulai dengan nama domain untuk
situs tersebut, dan dapat diikuti oleh tautan ke halaman tertentu. Jika tidak ada
halaman yang ditentukan, situs akan menampilkan homepage.
Tautan ke Halaman Lain pada Situs yang Sama
Ketika Anda terhubung ke lain halaman dalam situs yang sama, Anda tidak perlu
menentukan nama domain dalam URL. Kamu dapat menggunakan singkatan
dikenal sebagai URL relatif. Jika semua halaman situs yang di folder yang sama,
maka nilai dari atribut href hanyalah nama file. Jika Anda memiliki halaman yang
berbeda dari situs di folder yang berbeda, maka Anda dapat menggunakan sedikit
lebih kompleks sintaks untuk menunjukkan di mana Halaman ini dalam kaitannya
dengan halaman saat ini. Untuk lebih jelas, lakukan praktik berikut
1. Buka notepad
2. Tulis kode HTML berikut
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</p>
3. Simpan dengan nama file link-halaman.html
4. Buka file link-halaman.html pada web browser
Struktur Direktori
Pada situs yang lebih besar, adalah merupakan ide yang baik untuk mengatur
kode Anda dengan menempatkan halaman untuk setiap bagian yang berbeda dari
situs ke folder baru. Folder pada situs kadang-kadang disebut sebagai direktori.
Direktori adalah hanya nama lain untuk folder di situs web; dengan cara yang
sama bahwa hard drive Anda berisi folder yang berbeda, sebuah situs web dapat
dikatakan mengandung direktori. Biasanya Anda akan menemukan bahwa situs
web berisi beberapa direktori, dan bahwa setiap direktori berisi bagian-bagian
III- 12
Bab 3 Perintah/Tag HTML Dasar
yang berbeda dari situs web. Misalnya, situs besar dengan beberapa subbagian
akan memiliki direktori terpisah untuk setiap bagian dari situs tersebut, dan juga
direktori yang berbeda untuk berbagai jenis file (misalnya, gambar dapat berada
dalam satu direktori dan style sheet di lain). Dengan cara yang sama bahwa
mungkin Anda mengatur file pada hard drive Anda ke dalam folder terpisah, itu
adalah penting untuk mengatur file di website Anda ke direktori sehingga Anda
dapat menemukan apa yang Anda cari untuk lebih mudah dan tetap mengontrol
semua file. Seperti yang dapat Anda bayangkan, jika semua file yang digunakan
dalam website berada di direktori yang sama, direktori yang cepat akan menjadi
sangat besar dan rumit. Gambar 3.2 menunjukkan struktur direktori contoh untuk
situs berita, dengan folder terpisah untuk setiap bagian. Perhatikan juga
bagaimana bagian Musik memiliki folder tersendiri bagi subbagian tentang Fitur,
MP3, dan Ulasan. Selain itu, folder utama memiliki folder terpisah untuk berbagai
jenis file yang digunakan di situs: gambar, script, dan style sheet.
Gambar 3.2 Struktur Direktori
Link ke Email
Anda mungkin pernah melihat link yang menunjukkan alamat e-mail, yang ketika
diklik membuka e-mail baru dalam mail program, siap untuk mengirim e-mail ke
alamat tersebut. Untuk membuat link ke alamat e-mail, Anda perlu menggunakan
sintaks berikut dengan <a> elemen:
Bab 3 Perintah/Tag HTML Dasar
III- 13
<a href=”mailto:[email protected]”>[email protected]</a>
Di sini, nilai atribut href dimulai dengan kata kunci mailto, diikuti oleh titik dua,
dan kemudian e-mail yang ingin Anda kirim. Seperti link lain, isi dari elemen <a>
dapat pula berupa link yang akan ditampilkan dalam browser seperti berikut,
<a href=”mailto:[email protected]”>E-mail kami</a>
Ada satu resiko ketika menempatkan alamat e-mail pada halaman web. Orangorang yang tidak bertanggungjawab menggunakan program kecil untuk secara
otomatis mampu mencari situs web yang terdapat alamat e-mail. Setelah mereka
menemukan alamat e-mail di situs web, mereka akan mulai mengirim spam ke
alamat tersebut. Agar lebih dapat memahami, lakukan praktik berikut
1. Buka Notepad
2. Tulis kode HTML berikut
<html>
<head>
<title> Cafe Mbal-Mbul - community cafe in Depok, West Java,
Indonesia </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-88591”/>
</head>
<body>
<h1> MBAL-MBUL CAFE </h1>
<div>
<a href=”index.html”>HOME</a>
<a href=”menu.html”>MENU</a>
<a href=”recipes.html”>RECIPES</a>
</div>
<h2> Contact </h2>
<p><address> G Building Politeknik Negeri Jakarta</address></p>
<p><a
href="http://maps.google.com/maps?q=politeknik
negeri
jakarta">Find us on Google Maps</a>
III- 14
Bab 3 Perintah/Tag HTML Dasar
</p>
<p><a href="mailto:[email protected]"> Mail Mbal-Mbul Cafe
</a></p>
</body>
</html>
3. Simpan dengan nama file link-email.html
4. Buka di web browser
Membuka Link pada Window Baru
Jika Anda ingin link untuk membuka pada window baru, Anda dapat
menggunakan atribut Target pada pembukaan tag <a>. Nilai ini atribut harus diisi
blank. Salah satu alasan yang paling umum kenapa link harus dibuka di jendela
baru adalah jika menunjuk ke website lain. Dalam beberapa kasus, mereka
berharap pengguna akan kembali ke jendela yang berisi Situs mereka setelah
menyelesaikan melihat yang lain. Lakukan praktik berikut
1. Buka notepad
2. Tulis kode HTML berikut
<a href="http://www.imdb.com" target="_blank">
Internet Movie Database</a> (Buka pada Window yang baru)
3. Simpan dengan nama file link-window-baru.html
4. Buka di web browser.
Link ke Lokasi Tertentu pada Halaman Web yang Sama
Di bagian atas dari halaman web yang panjang, kita mungkin ingin menambahkan
daftar isi yang menghubungkan ke bagian lain yang berada jauh di bawah
halaman. Atau Anda mungkin ingin menambahkan link dari bagian paling bawah
halaman untuk kembali ke atas. Sebelum Anda dapat link ke bagian tertentu dari
halaman, Anda perlu mengidentifikasi titik-titik di halaman untuk dijadikan link.
Anda ini menggunakan atribut id (yang dapat digunakan pada setiap HTML
elemen). Dapat dilihat bahwa elemen <h1> dan <h2> dalam contoh ini telah
diberikan atribut id yang mengidentifikasi bagian dari halaman. Nilai atribut id
harus dimulai dengan huruf atau digarisbawahi (bukan angka atau karakter lain)
Bab 3 Perintah/Tag HTML Dasar
III- 15
dan pada halaman, ada dua atribut id yang harus memiliki nilai yang sama. Untuk
link ke sebuah elemen yang menggunakan atribut id Anda menggunakan <a> tapi
nilai atribut href dimulai dengan simbol #, diikuti oleh nilai atribut id dari elemen
yang ingin di-lin. Di contoh ini, <a href="#top"> link ke elemen <h1> di bagian
atas halaman yang id atribut memiliki nilai top. Berikut praktik yang harus
dilakukan
1. Buka notepad
2. Tulis kode berikut
<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
<a href="#prologue">Prologue</a><br /><br />
<h2 id="arc_shot">Arc Shot</h2>
<p>A shot in which the subject is photographed by an
encircling or moving camera</p>
<h2 id="interlude">Interlude</h2>
<p>A brief, intervening film scene or sequence, not
specifically tied to the plot, that appears
within a film</p>
<h2 id="prologue">Prologue</h2>
<p>A speech, preface, introduction, or brief scene
preceding the the main action or plot of a film;
contrast to epilogue</p>
<p><a href="#top">Top</a></p>
3. Simpan dengan nama file link-halaman.html
4. Buka dengan web browser
3.6. Gambar
Banyak alasan mengapa kita ingin menambahkan gambar pada halaman web yang
kita buat. Agar lebih informatif, biasanya sebuah halaman web berisi gambar
berupa logo, diagram blok, foto, ilustrasi atau grafik. Kalau kita membuat web
III- 16
Bab 3 Perintah/Tag HTML Dasar
dari awal, sebaiknya semua gambar yang akan ditampilkan di web diletakkan di
dalam satu folder.
Untuk menambahkan gambar pada halaman web, tag yang digunakan adalah
<img>. Contoh penulisan kode programnya:
<img src="D:/Logo_Politeknik_Negeri_Jakarta.jpg" alt="Logo PNJ"/>
src berisi sumber dimana letak file gambar berada. Alt menjelaskan tentang
deskripsi gambar seandainya gambar tidak muncul. Dapat pula ditambahkan
atribut title untuk memberi penjelasan gambar ketika kursor diletakan pada
gambar. Untuk mengatur tinggi dan lebar gambar pada halaman web, dapat
menggunakan atribut <height> dan <width> dalam satuan piksel.
Tata Letak Gambar
Di mana gambar ditempatkan dalam kode akan mempengaruhi bagaimana ia
ditampilkan. Berikut adalah tiga contoh penempatan gambar yang menghasilkan
hasil yang berbeda:
1. Sebelum Paragraf. Paragraf akan terletak di bawah setelah gambar
2. Di dalam dari awal sebuah paragraf. Gambar akan berada pada baris
pertama dari paragraf
3. Di tengah paragraf. Gambar akan ada di tengah paragraf.
Beriku contoh penempatan ketiga posisi gambar di atas. Terlebih dahulu siapkan
sebuah file gambar dan letakan di sebuah folder tertentu. Sebelumnya telah
disimpan sebuah gambar dengan nama file dengan nama Rhoma_Irama.png di
folder D:/Bahan Ajar Multimedia/Gambar/ Rhoma_Irama.png sebagai letak
dimana gambar berada.
1. Buka notepad
2. Tulis kode HTML berikut
<img
src="D:/Bahan
Ajar
Multimedia/Gambar/Rhoma_Irama.png"
alt="Bang Haji" width="100" height="100" />
<p>Pada tahun tujuh puluhan, Rhoma sudah menjadi penyanyi dan musisi
ternama setelah jatuh bangun dalam mendirikan band musik, mulai dari
band Gayhand tahun 1963. Tak lama kemudian, ia pindah masuk Orkes
Chandra Leka, sampai akhirnya membentuk band sendiri bernama Soneta
Bab 3 Perintah/Tag HTML Dasar
III- 17
yang sejak 13 Oktober 1973 mulai berkibar. Bersama grup Soneta yang
dipimpinnya, Rhoma tercatat pernah memperoleh 11 Golden Record dari
kaset-kasetnya.</p>
<hr />
<p><img src="D:/Bahan Ajar Multimedia/Gambar/Rhoma_Irama.png"
alt="Bang Haji" width="100" height="100" />Berdasarkan data penjualan
kaset, dan jumlah penonton film-film yang dibintanginya, penggemar
Rhoma tidak kurang dari 15 juta atau 10% penduduk Indonesia. Ini catatan
sampai pertengahan 1984. "Tak ada jenis kesenian mutakhir yang
memiliki lingkup sedemikian luas", tulis majalah TEMPO, 30 Juni 1984.
Sementara itu, Rhoma sendiri bilang, "Saya takut publikasi. Ternyata, saya
sudah terseret jauh."</p>
<hr />
<p>Rhoma Irama terhitung sebagai salah satu penghibur yang paling
sukses dalam mengumpulkan massa. Rhoma Irama bukan hanya tampil di
dalam negeri tapi ia juga pernah tampil di Kuala Lumpur, Singapura, dan
Brunei dengan jumlah penonton yang hampir sama ketika ia tampil di
Indonesia. <img src="D:/Bahan Ajar
Multimedia/Gambar/Rhoma_Irama.png" alt="Bang Haji" width="100"
height="100" />Sering dalam konser Rhoma Irama, penonton jatuh
pingsan akibat berdesakan.Orang menyebut musik Rhoma adalah musik
dangdut, sementara ia sendiri lebih suka bila musiknya disebut sebagai
irama Melayu.</p>
3. Simpan file dengan nama file letak-gambar.html
4. Buka file letak-gambar.html pada web browser
5. Perhatikan masing letak gambar yang tampil
HTML 5 : Figure dan Figure Caption
Gambar sering datang dengan keterangan. HTML5 telah memperkenalkan elemen
baru yaitu <figure> untuk memberi keterangan gambar sehingga keduanya terkait.
Anda dapat memiliki lebih dari satu gambar di dalam elemen <figure> selama
mereka semua berbagi judul yang sama. Berikut contohnya:
III- 18
Bab 3 Perintah/Tag HTML Dasar
1. Buka Notepad
2. Tulis kode HTML berikut
<figure>
<img src="D:/Bahan Ajar Multimedia/Gambar/sea-otters.jpg"
alt="Foto dua ekor berang-berang mengambang di air">
<br />
<figcaption>Berang-berang berpegangan tangan
pada saat mereka tidur sehingga mereke tidak
terpisah satu sama lain.</figcaption>
</figure>
3. Simpan dengan nama file keterangan-gambar.html
4. Buka di web browser
3.7. Tabel
Ada beberapa jenis informasi yang perlu ditampilkan dalam bentuk grid atau
tabel. Sebagai contoh: hasil olahraga, saham laporan, jadwal kereta. Grid
memungkinkan kita untuk memahami data yang kompleks dengan referensi
informasi pada dua sumbu. Setiap blok di grid disebut sebagai sel tabel. Dalam
HTML tabel ditulis baris demi baris.
Struktur Dasar Tabel
Elemen <table> digunakan untuk membuat tabel. Isi dari tabel ditulis baris demi
baris. Untuk mengawali baris dari setiap tabel, digunakan elemen <tr> untuk
membuat baris diikuti oleh <td> untuk kolom-kolom yang ada pada baris tersebut.
Untuk lebih jelasnya silakan praktikan kode berikut
1. Buka notepad
2. Tuliskan kode HTML berikut
<table>
<tr>
<td>15</td>
<td>15</td>
<td>30</td>
Bab 3 Perintah/Tag HTML Dasar
III- 19
</tr>
<tr>
<td>45</td>
<td>60</td>
<td>45</td>
</tr>
<tr>
<td>60</td>
<td>90</td>
<td>90</td>
</tr>
</table>
3. Simpan dengan nama file stuktur-tabel.html
4. Buka di web browser dan perhatikan setiap baris dan kolom tabel
Heading Tabel
Pada kolom dari setiap tabel sering kali harus diberi nama. Untuk memberi nama
kolom digunakan tag <th> yang merupakan kepanjangan dari table heading.
Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan <td> atau
<th> elemen untuk mewakili kehadiran sel kosong karena jika tidak, tabel akan
dirender tidak benar. (Sel pertama pada baris pertama dari contoh di bawah
menunjukkan sel kosong.) Menggunakan elemen <th> akan meningkatkan
kemampuan mesin pencari mengindeks halaman Anda, dan juga memungkinkan
Anda untuk mengontrol penampilan tabel yang lebih baik ketika Anda mulai
menggunakan CSS. Anda dapat menggunakan atribut lingkup pada elemen <th>
untuk menunjukkan apakah itu sebuah pos untuk kolom atau baris. Hal ini dapat
dilakukan dengan mengambil nilai-nilai: row untuk menunjukkan judul untuk
baris atau col untuk menunjukkan menuju kolom. Berikut contoh kode program
untuk dipraktikan
1. Buka notepad
2. Tulis kode HTML berikut
<table>
III- 20
Bab 3 Perintah/Tag HTML Dasar
<tr>
<th></th>
<th scope="col">Sabtu</th>
<th scope="col">Minggu</th>
</tr>
<tr>
<th scope="row">Tiket terjual:</th>
<td>120</td>
<td>135</td>
</tr>
<tr>
<th scope="row">Total penjualan:</th>
<td>Rp. 600.000</td>
<td>Rp. 675.000</td>
</tr>
</table>
3. Simpan dengan nama file table-heading.html
4. Buka di web browser dan perhatikan penamaan baris dan kolom serta data di
dalamnya
Menggabungkan Kolom
Kadang-kadang kita mungkin perlu entri dalam tabel untuk menggabungkan lebih
dari satu kolom. The atribut colspan dapat digunakan pada elemen <th> atau <td>
dan menunjukkan berapa banyak sel kolom yang digabungkan. Pada contoh di
sebelah kanan dapat dilihat jadwal dengan lima kolom; kolom pertama berisi
judul untuk baris (hari), sisa empat merupakan salah satu slot waktu jam. Jika
Anda melihat sel tabel yang berisi kata 'Geografi' Anda akan melihat bahwa nilai
atribut colspan adalah 2, yang menunjukkan bahwa sel tersebut adalah gabungan
di dua kolom. Dalam baris ketiga, 'Gym' adalah gabungan dari tiga kolom. Anda
dapat melihat bahwa baris kedua dan ketiga memiliki lebih sedikit elemen <td>
dari kolom yang ada. Hal ini karena, ketika sel meluas di lebih dari satu kolom,
Bab 3 Perintah/Tag HTML Dasar
III- 21
<td> atau <th> sel yang akan ditempat sel yang lebih luas tidak termasuk dalam
kode. Untuk lebih jelasnya silakan praktikan kode HTML berikut,
1. Buka notepad
2. Tulis kode HTML berikut
<table>
<tr>
<th></th>
<th>9am</th>
<th>10am</th>
<th>11am</th>
<th>12am</th>
</tr>
<tr>
<th>Monday</th>
<td colspan="2">Geography</td>
<td>Math</td>
<td>Art</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="3">Gym</td>
<td>Home Ec</td>
</tr>
</table>
3. Simpan dengan nama file spanning-kolom.html
4. Buka di web browser dan perhatikan pada bagian penggabungan kolom
Menggabungkan Baris
Anda juga mungkin perlu entri di tabel untuk menggabungkannya lebih dari satu
baris. Atribut rowspan dapat digunakan pada elemen <th> atau <td> untuk
menunjukkan berapa banyak sel baris yang harus digabunggkan. Dalam contoh di
sebelah kiri Anda dapat melihat bahwa ABC menunjukkan sebuah film dengan
III- 22
Bab 3 Perintah/Tag HTML Dasar
durasi 06:00-08:00 atau dua jam, sedangkan saluran BBC dan CNN masingmasing dengan durasi satu jam. Jika Anda melihat elemen terakhir <tr>, hanya
berisi tiga elemen meskipun ada empat kolom dalam tabel. Hal ini karena film di
elemen <tr> di atasnya menggunakan atribut rowspan untuk menggabungkan
baris tersebut dengan baris di bawahnya. Untuk lebih jelasnya, lakukan praktik
berikut
1. Buka notepad
2. Tulis kode HTML berikut
<table>
<tr>
<th></th>
<th>ABC</th>
<th>BBC</th>
<th>CNN</th>
</tr>
<tr>
<th>6pm - 7pm</th>
<td rowspan="2">Movie</td>
<td>Comedy</td>
<td>News</td>
</tr>
<tr>
<th>7pm - 8pm</th>
<td>Sport</td>
<td>Current Affairs</td>
</tr>
</table>
3. Simpan dengan nama file spanning-row.html
4. Buka di web browser dan perhatikan penggabungan tabelnya
Tabel Panjang
Bab 3 Perintah/Tag HTML Dasar
III- 23
Ada tiga unsur yang membantu membedakan antara konten tabel utama dan baris
pertama dan terakhir (yang bisa berisi konten yang berbeda). Unsur-unsur ini
membantu orang dalam membaca tabel dan juga memungkinkan Anda untuk
membuat tampilan tabel agak sedikit berbeda. Judul tabel harus berada dalam tag
<thead> , isi tabel harus berada dalam tag <tbody> dan footer tabel berada dalam
tag <tfooter>. Untuk lebih memahaminya, lakukan contoh berikut
1. Buka notepad
2. Tulis kode HTML berikut
<table>
<thead>
<tr>
<th>Tanggal</th>
<th>Pemasukan</th>
<th>Pengeluaran</th>
</tr>
</thead>
<tbody>
<tr>
<th>1 Januari 2015</th>
<td>250</td>
<td>36</td>
</tr>
<tr>
<th>2 January 2015</th>
<td>285</td>
<td>48</td>
</tr>
<!—tambahkan baris seperti di atas -->
<tr>
<th>31 Januari 2015</th>
<td>129</td>
<td>64</td>
III- 24
Bab 3 Perintah/Tag HTML Dasar
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>7824</td>
<td>1241</td>
</tr>
</tfoot>
</table>
3. Simpan dengan nama file long-table.html
4. Buka di web browser dan perhatikan letak nama tabel, isi tabel dan footer.
3.8. Form
Secara tradisional, istilah form merujuk pada dokumen cetak yang di dalamnya
terdapat kolom isian. Form dalam HTML memiliki konsep yang sama dengan
dokumen lain. Fungsi dari form adalah mengumpulkan informasi dari pengguna
atau pengunjung web kita. Ada beberapa set elemen yang dapat digunakan pada
HTML untuk membuat form.
Form yang paling kita kenal adalah form pencarian yang terdapat di bagian tengah
dari halaman web google. Gambar 3.2 berikut adalah contoh halaman web google
yang berisi form untuk melakukan pencarian sesuai kata kunci yang dimasukan
pada form.
Bab 3 Perintah/Tag HTML Dasar
III- 25
Gambar 3.2 Form Pencarian pada Halaman Google
Kendali Form
Ada beberapa macam kendali form yang dapat kita gunakan dalam halaman web
yang kita buat yakni:
1. Menambahkan text
•
Input text satu baris, yakni form input untuk teks satu baris seperti
input nama, alamat email dan sebagainya.
•
Input password, sama seperti input satu baris teks, hanya saja karakter
teks yang diinput disamarkan.
•
Text Area, berfungsi untuk input teks yang terdiri atas beberapa baris.
2. Membuat pilihan
III- 26
•
Radio button, membuat pilihan untuk satu pilihan saja
•
Check Box, membuat pilihan lebih dari satu
Bab 3 Perintah/Tag HTML Dasar
•
Drop down box, jika pilihan dibuat dalam bentuk daftar memanjang ke
bawah.
3. Form Pendaftaran (submitting)
•
Submit button, untuk mendaftarkan data dari form ke halaman web
•
Image button, sama seperti submit button namun menggunakan
image/gambar.
4. Mengunggah File
•
Unggah File, mengizinkan kepada pengunjung untuk mengunggah file
ke web.
Sebuah form dapat memiliki beberapa kontrol form, dengan setiap kontrol akan
mengumpulkan informasi yang berbeda. Karena data yang diinput akan dikirim ke
server, maka server perlu mengetahui yang mana diantara data yang diinput yang
berkaitan dengan elemen form. Untuk membedakan diantara data yang diinput
pada form, maka setiap input data diberi nama/value. Jika kontrol form adalah
input berupa teks, maka nama/valuenya adalah teks yang diinput user. Jika kontrol
form memberi pilihan untuk user maka nama/valuenya adalah daftar pilihan.
Struktur Form
Kontrol form berada di dalam elemen/tag <form>. Tag ini harus selalu diikuti
oleh atribut action dan diikuti oleh method dan id atribut. Value dari atribut action
adalah URL dari halaman web di server yang akan menerima data dari form pada
saat di-submit. Form dapat dikirim melalui dua macam method yakni get dan post.
Jika kita menggunakan method get, value dari form akan ditambahkan pada akhir
Bab 3 Perintah/Tag HTML Dasar
III- 27
URL yang telah dinyatakan dalam atribut action. Method get cocok digunakan
untuk :
1. Form pendek, misalnya form pencarian
2. Saat mengambil data dari web server, bukan mengirimkan informasi yang
akan ditambahkan atau diedit di database.
Untuk method post, biasanya digunakan untuk mengirim/menginput informasi
yang memiliki tingkat keamanan dimana dikirim menggunakan header HTTP.
Method post digunakan untuk form :
1. Yang mengizinkan user untuk mengunggah file
2. Karakternya panjang
3. Mengandung data sensitif misalnya password
4. Menambah atau menghapus data ke database
Jika tidak secara spesifik dinyatakan, maka secara default method yang digunakan
adalah get.
Input Teks
Elemen <input> digunakan untuk membuat beberapa form kontrol yang berbeda
kontrol. Nilai/value dari jenis atribut menentukan apa jenis input. Jika value dari
atribut type adalah text, maka inputnya adalah teks pendek. Pada saat user mengisi
informasi pada form, maka server harus mengetahui kontrol form apa yang diisi.
Oleh karena itu setiap setiap kontrol form harus memiliki nama atribut (name
attribute). Isi dari atribut ini akan dikirim ke server bersama informasinya
sehingga server akan mampu mengidentifikasi setiap informasi/data yang
diterima. Atribut size dapat digunakan pada form lama untuk membatasi
ukuran/panjang karakter yang dapat ditampilkan pada form. Atribut maxlength
digunakan untuk menentukan panjang karakter maksimum yang dapat ditampung
oleh form. Berikut langkah untuk dipraktikan agar lebih memahami tentang input
teks pada form.
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/login.php">
<p>Username:
III- 28
Bab 3 Perintah/Tag HTML Dasar
<input type="text" name="username" size="15"
maxlength="30" />
</p>
</form>
3. Simpan dengan nama file teks-input.html
4. Buka dengan web browser
5. Inputkan teks pada form sebanyak 15 karakter dan lebih dari 15
karakter, apa perbedaannya
Input Password
Input password hampir sama dengan input teks hanya saja teks yang diinput harus
di-masking/disamarkan sehingga menjadi lebih aman. Method yang digunakan
adalah post. Untuk lebih memahaminya, lakukan praktik berikut
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/login.php">
<p>Username:
<input type="text" name="username" size="15"
maxlength="30" />
</p>
<p>Password:
<input type="password" name="password" size="15"
maxlength="30" />
</p>
</form>
3. Simpan dengan nama file input-password.html
4. Buka di web browser dan inputkan pada form username dan password
5. Perhatikan perbedaannya.
Text Area
Untuk input teks dengan lebih dari satu baris, maka dapat digunakan form dengan
tag <textarea>. Berikut kode HTML yang harus dipraktikan:
Bab 3 Perintah/Tag HTML Dasar
III- 29
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/comments.php">
<p>Apa Komentar Anda?</p>
<textarea name="comments" cols="20" rows="4">Tulis komentar anda
di sini...</textarea>
</form>
3. Simpan dengan nama file teksarea.html
4. Buka di web browser
5. Berapa karakter dalam satu baris text area ini dapat menampung?
6. Berapa baris text area ini dapat menampung kalimat?
Radio Button
Untuk form dengan pilihan radio button, dapat dilakukan dengan mengisi type
pada tag <input> dengan radio. Pada atribut name, value yang dikirim ke server
adalah hasil pilihan pada radio button dan isi dari atribute name untuk semua
pilihan adalah sama. Perhatikan contoh berikut dan amati hasilnya,
1. Buka Notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/profile.php">
<p>Silakan tentukan pilihan:
<br />
<input type="radio" name="genre" value="rock"
checked="checked" /> Rock
<input type="radio" name="genre" value="pop" />Pop
<input type="radio" name="genre" value="jazz" />Jazz
</p>
</form>
3. Simpan file dengan nama radio.html.
4. Ada berapa jumlah pilihan radio button?
5. Secara default, pilihan mana yang di-check saat halaman dibuka?
6. Apa isi dari atribut name pada pilihan radio button?
III- 30
Bab 3 Perintah/Tag HTML Dasar
Checkbox
Untuk melakukan pilihan menggunakan checkbox, atribut type diisi checkbox.
Berikut contoh yang dapat dipraktikan,
1. Buka Notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/profile.php">
<p>Silakan pilih musik favorit anda (boleh lebih dari satu):
<br />
<input type="checkbox" name="service"
value="pop" checked="checked" /> Pop
<input type="checkbox" name="service"
value="dangdut" /> Dangdut
<input type="checkbox" name="service"
value="keroncong" /> Keroncong
</p>
</form>
3. Simpan dengan nama file checkbox.html
4. Buka dengan web browser
Dropdown List Box
Bentuk pilihan ini dibuat dalam daftar yang akan muncul ketika diklik. Untuk
membuat bentuk pilihan ini
banyaknya
pilihan
atribut yang digunakan adalah <select> dengan
ditentukan
di
atribut
<option>.
Atribute
name
mengindikasikan jenis dari kontrol form yang dikirim ke server bersamaan dengan
value yang telah user pilih.
Elemen <option> digunakan untuk menyatakan pilihan yang dapat user tentukan.
Kata atau kalimat yang diapit oleh <option> dan </option> adalah pilihan yang
akan ditampilkan kepada user dalam bentuk dropdown box. Untuk lebih jelasnya,
silakan praktikan berikut,
1. Buka notepad
Bab 3 Perintah/Tag HTML Dasar
III- 31
2. Tulis kode HTML berikut
<form action="http://www.example.com/profile.php">
<p>Apa buah-buahan favorit Anda?</p>
<select name="buah">
<option value="mangga">Mangga</option>
<option value="apel">Apel</option>
<option value="jeruk">Jeruk</option>
<option value="melon">Melon</option>
<option value="semangka">Semangka</option>
</select>
</form>
3. Simpan dengan nama file dropdown.html dan buka di web browser
Dropdown list sama seperti radio button, jadi hanya satu saja yang dapat dipilih.
Perbedaannya adalah apabila jumlah pilihan ingin ditampilkan semua dan tidak
terlalu banyak maka biasanya menggunakan radio button. Untuk pilihan yang
sangat banyak yang tidak mungkin ditampilkan semua, maka digunakan
dropdown box.
Multiple Select Box
Jika pilihan yang akan ditampilkan lebih dari satu tidak seperti di dropdown box,
maka kita bisa menggunakan Multiple Select Box, dimana pada jenis pilihan ini,
akan ditampilkan daftar pilihan beberapa dari total pilihan. Misalnya ada 10
pilihan, dapat kita atur yang ditampilkan misalnya 3 pilihan pertama. Untuk
membuat pilihan jenis ini digunakan atribut multiple. Untuk lebih jelasnya silakan
praktikan kode berikut
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/profile.php">
<p>Do you play any of the following instruments?
(You can select more than one option by holding
down control on a PC or command key on a Mac
while selecting different options.)</p>
III- 32
Bab 3 Perintah/Tag HTML Dasar
<select name="instruments" size="3" multiple="multiple">
<option value="guitar" selected="selected">Guitar</option>
<option value="drums">Drums</option>
<option value="keyboard" selected="selected">Keyboard</option>
<option value="bass">Bass</option>
</select>
</form>
3. Simpan dengan nama file multiplelist.html
4. Buka di web browser
File Input Box
Input jenis ini memungkinkan user untuk mengupload file seperti gambar, video
dan sebagainya. Untuk melakukan hal ini, value dari atribut type harus diisi
dengan file. Silakan lakukan praktik berikut
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/upload.php"
method="post">
<p>Unggah lagu anda dalam format MP3:</p>
<input type="file" name="user-song" /><br />
<input type="submit" value="Unggah" />
</form>
3. Simpan dengan nama file inputbox.html
4. Buka dengan web browser
Submit Button
Dengan atribut type berisi submit, maka ketika ditekan, submit button akan
mengirim isi form ke server. Berikut contoh untuk dipraktikan
1. Buka notepad
2. Tulis kode HTML berikut
<form action="http://www.example.com/subscribe.php">
<p>Subscribe to our email list:</p>
Bab 3 Perintah/Tag HTML Dasar
III- 33
<input type="text" name="email" />
<input type="submit" name="subscribe"
value="Subscribe" />
</form>
3. Simpan dengan nama file submit.html dan buka di web browser
Untuk jenis buttonnya, kita juga dapat menggunakan image/gambar yang
dijadikan sebagai button. Sebelumnya kita harus menyiapkan gambar yang akan
digunakan
sebagai
button
dan
disimpan
di
folder
D:/Bahan
Ajar
Multimedia/Gambar/subscribe.jpg. Berikut contohnya,
1. Buka notepad dan tuliskan kode HTML berikut,
<form action="http://www.example.org/subscribe.php">
<p>Subscribe to our email list:</p>
<input type="text" name="email" />
<input type="image" src=" D:/Bahan Ajar
Multimedia/Gambar/subscribe.jpg "
width="100" height="20" />
</form>
2. Simpan dengan nama file sumbit-image.html dan buka di web browser
Button dan Hidden Control
Elemen <button> memungkinkan user untuk mengontrol bagiamana button akan
dimunculkan dan memungkinkan untuk elemen lain ada di dalam button. Hal ini
artinya adalah kita dapat menggabungkan text dan gambar pada button antara tag
<button> dengan </button>. Untuk tag input dengan atribut type diisi hidden
artinya adalah bahwa sebenarnya ada form di halaman tersebut namun
disembunyikan. Kalau di web browser kita gunakan option view source, maka
akan tampak bahwa di kode HTML nya terdapat tag <form>. Berikut contohnya,
sebelumnya
sudah
disediakan
gambar
di
folder
d:/Bahan
Ajar
Multimedia/Gambar/add.png,
1. Tulis kode HTML berikut di notepad
<form action="http://www.example.com/add.php">
III- 34
Bab 3 Perintah/Tag HTML Dasar
<button><img
src="D:/Bahan
Ajar
Multimedia/Gambar/add.gif"
alt="add" width="10" height="10" /> Tambah</button>
<input type="hidden" name="bookmark" value="lyrics"/>
</form>
2. Simpan dengan nama file hiddenform.html dan buka di web browser.
Elemen Form Pengelompokan
Kita dapat mengelompokan kontrol yang berkaitan bersama dalam elemen
<fieldset>. Kebanyakan browser akan menampilkan fieldset dengan garis di
sekitar tepi untuk menunjukkan bagaimana mereka terkait. Munculnya ini baris
dapat disesuaikan dengan menggunakan CSS.
Elemen <legend> dapat disertakan setelah pembukaan tag <fieldset> dan berisi
caption yang membantu mengidentifikasi maksud dari pengelompokkan form
tersebut. Lakukan praktik berikut
1. Buka notepad dan tulis kode HTML berikut
<fieldset>
<legend>Contact details</legend>
<label>Email:<br/>
<input type="text" name="email" /></label><br/>
<label>Mobile:<br/>
<input type="text" name="mobile" /></label><br/>
<label>Telephone:<br/>
<input type="text" name="telephone" /></label>
</fieldset>
2. Simpan dengan nama file grouping-form.html
3. Buka di web browser dan perhatikan
HTML 5 : Validasi Form
Sering kali dalam menginput data, user melakukan kesalahan yang bisa jadi
diakibatkan oleh bentuk form yang tidak jelas. Misalnya bahwa form tersebut
harus terisi atau tidak boleh dikosongkan. Mekanisme ini disebut validasi form.
Validasi ini bermanfaat karena,
Bab 3 Perintah/Tag HTML Dasar
III- 35
1. Mengurangi beban kerja server akibat isian yang salah
2. Memberikan pemberitahuan yang cepat kepada user ketika salah
menginput data.
Untuk dapat lebih memahaminya, lakukan praktik berikut
1. Buka Notepad dan tuliskan kode HTML berikut
<form action=http://www.example.com/login/ method="post">
<label for="username">Username:</label>
<input
type="text"
name="username"
required="required"
/></title><br/>
<label for="password">Password:</label>
<input type="password" name="password"
required="required" />
<input type="submit" value="Submit" />
</form>
2. Simpan dengan nama file validasi-form.html
3. Buka di web browser, dan perhatikan jika form password tidak diisi.
HTML 5 : Input Tanggal
Dalam sebuah form, sering kali kita diminta untuk menginput tanggal. Pada
HTML versi 5 ke atas, telah dilengkapi form untuk menginput tanggal sehinggal
formatnya tidak akan salah. Untuk menginput tanggal, pada tag <input> kita isi
kolom type dengan date. Berikut contoh kode HTML nya:
1. Buka notepad dan tuliskan kode HTML berikut
<form action=http://www.example.com/bookings/ method="post">
<label for="username">Tanggal Keberangkatan:</label>
<input type="date" name="depart" />
<input type="submit" value="Submit" />
</form>
2. Simpan dengan nama file form-tanggal.html
3. Buka di web browser
HTML 5 : Input email dan URL
III- 36
Bab 3 Perintah/Tag HTML Dasar
Di dalam form sering juga dijumpai form untuk menginput alamat email atau
URL. Karena kedua jenis input ini memiliki format yang baku, maka pada HTML
5 telah dilengkapi validasi untuk mencegah input email atau URL dengan format
yang salah atau bukan merupakan alamat email atau URL. Berikut contoh kode
program untuk input email dimana pada tag <input> kolom type diisi email,
1. Buka notepad dan tuliskan kode HTML berikut
<form action="http://www.example.org/subscribe.php">
<p>Please enter your email address:</p>
<input type="email" name="email" />
<input type="submit" value="Submit" />
</form>
2. Simpan dengan nama file input-email.html
3. Buka di web browser dan perhatikan apabila diinput alamat email dengan
format bukan format alamat email.
Untuk input jenis URL, hampir sama dengan email, pada tag <input> kolom type
diisi dengan url. Berikut contoh kode program untuk dipraktikkan,
1. Buka notepad dan tuliskan kode HTML berikut
<form action="http://www.example.org/profile.php">
<p>Please enter your website address:</p>
<input type="url" name="website" />
<input type="submit" value="Submit" />
</form>
2. Simpan dengan nama file input-url.html
3. Buka di web browser dan perhatikan apabila form diisi dengan format
yang bukan alamat url.
HTML 5 : Input Pencarian
Terkadang dalam form yang kita buat diperlukan kolom pencarian. Pada tag
<input> untuk melakukan pencarian maka kolom type diisi dengan search.
Berikut contohnya
1. Buka notepad dan tulis kode HTML berikut
Bab 3 Perintah/Tag HTML Dasar
III- 37
<form action="http://www.example.org/search.php">
<p>Cari:</p>
<input type="search" name="search" />
<input type="submit" value="Search" />
</form>
2. Simpan dengan nama file pencarian.html
3. Buka pada web browser
4. Tambahkan kode berikut
<form action="http://www.example.org/search.php">
<p>Cari:</p>
<input type="search" name="search"
placeholder="Masukan Kata Kunci" />
<input type="submit" value="Search" />
</form>
5. Buka pada web browser kembali, perhatikan bedanya dengan penambahan
atribut placeholder.
Latihan
Praktikan semua langkah di setiap subbab dan perhatikan serta tuliskan beberapa
jawaban dari pertanyaan yang ada.
III- 38
Bab 3 Perintah/Tag HTML Dasar
BAB 4
CASCADING STYLE SHEET(CSS)
Tujuan Pembelajaran:
Memahami kaidah Perancangan Web dengan CSS
4.1 Pengantar CSS
4.2 Color
4.3 Text
4.4 Boxes
4.5 List, Table dan Form
4.6 Layout
4.7 Image
4.8 HTML 5 Layout
Bab 4 Cascading Style Sheet (CSS)
IV- 1
4.1. Pengantar CSS
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk
mempercantik penampilan HTML atau menentukan bagaimana elemen HTML
ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan
lain sebagainya. Perhatikan contoh kode CSS berikut :
Gambar 4.1 Contoh Kode CSS
Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Kita dapat menuliskan
langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>.
Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang
terdapat dalam file HTML. Jika tag HTML yang ingin diberi style memiliki
ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda pagar/kres
(#).
#header
Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa
dilakukan dengan tanda titik (.) diikuti dengan nama class.
.artikel
Jika anda hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka
seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama.
Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat
di dalam Class artikel. Maka penulisan selectornya seperti berikut :
IV- 2
Bab 4 Cascading Style Sheet(CSS)
.artikel h1
Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag
h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan child
dari class artikel).
Anda-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS.
Misalnya ketika anda memiliki dua atau lebih tag dengan warna background yang
sama, dari pada menuliskan kode seperti ini :
h1{ background-color: #666666; }
p { background-color: #666666; }
a { background-color: #666666; }
anda dapat menggabungkan selector dengan menambahkan tanda koma pada
nama tag yang ingin diberi style.
h1, p, a { background-color: #66666; }
Property dan Value
Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text,
warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk
memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap
property diakhiri dengan titik koma (;), jika anda tidak mengakhirinya maka
browser tidak akan mengetahui maksud dari property tersebut. Property-property
pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita sehari-hari.
Misalnya untuk merubah warna text kita gunakan property color, untuk merubah
warna background kita gunakan property background-color, untuk merubah
ukuran huruf kita gunakan property font-size.
.artikel h1 {
color:red;
background-color:blue;font-size:20px;
}
4.2. Color
Bab 4 Cascading Style Sheet (CSS)
IV- 3
Tuliskan kode HTML berikut
<!DOCTYPE html>
<html>
<head>
<title>Foreground Color</title>
<style type="text/css">
body {
padding: 20px;
font-family: Arial, Verdana, sansserif;}
/* color name */
h1 {
color: DarkCyan;}
/* hex code */
h2 {
color: #ee3e80;}
/* rgb value */
p {
color: rgb(100,100,90);}
</style>
</head>
<body>
<h1>Marine Biology</h1>
<h2>The Composition of Seawater</h2>
<p>Almost anything can be found in seawater. This
includes dissolved materials from Earth's crust as well as
materials released from organisms. The most important
components of seawater that influence life forms are
salinity, temperature, dissolved gases (mostly oxygen and
carbon dioxide), nutrients, and pH. These elements vary in
their composition as well as in their influence on marine
life.</p>
</body>
</html>
Perhatikan hasilnya pada web browser setelah disimpan dengan nama file
foreground-color.html.
4.3. Text
Untuk aplikasi CSS pada text, lakukan praktik dengan menuliskan kode berikut
pada notepad lalu simpan dengan nama tks-css.html dan buka di web browser:
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
<style type="text/css">
IV- 4
Bab 4 Cascading Style Sheet(CSS)
body {
padding: 20px;}
h1, h2, h3, a {
font-weight: normal;
color: #0088dd;
margin: 0px;}
h1 {
font-family: Georgia, Times, serif;
font-size: 250%;
text-shadow: 2px 2px 3px #666666;
padding-bottom: 10px;}
h2 {
font-family: "Gill Sans", Arial, sansserif;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 0.2em;}
h3 {
font-size: 150%;}
p {
font-family: Arial, Verdana, sansserif;
line-height: 1.4em;
color: #665544;}
p.intro:first-line {
font-weight: bold;}
.credits {
font-style: italic;
text-align: right;}
a {
text-decoration: none;}
a:hover {
text-decoration: underline;}
</style>
</head>
<body>
<h1>Briards</h1>
<h2>A Heart wrapped in fur</h2>
<p class="intro">The <a class="breed"
href="http://en.wikipedia.org/wikiBriard">briard</a>, or
berger de brie, is a large breed of dog traditionally used
as a herder and guardian of sheep.</p>
<h3>Breed History</h3>
<p>The briard, which is believed to have
originated in France, has been bred for centuries to herd
and to protect sheep. The breed was used by the French Army
as sentries, messengers and to search for wounded soldiers
because of its fine sense of hearing. Briards were used in
the First World War almost to the point of extinction.
Currently the population of briards is slowly recovering.
Charlemagne, Napoleon, Thomas Jefferson and Lafayette all
owned briards.</p>
<p class="credits">by Ivy Duckett</p>
Bab 4 Cascading Style Sheet (CSS)
IV- 5
</body>
</html>
4.4. Boxes
CSS juga dapat diimplementasikan untuk membuat kotak pada halaman web,
seperti kode berikut
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<style type="text/css">
body {
font-size: 80%;
font-family: "Courier New", Courier,
monospace;
letter-spacing: 0.15em;
background-color: #efefef;}
#page {
max-width: 940px;
min-width: 720px;
margin: 10px auto 10px auto;
padding: 20px;
border: 4px double #000;
background-color: #ffffff;}
#logo {
width: 150px;
margin: 10px auto 25px auto;}
ul {
width: 570px;
padding: 15px;
margin: 0px auto 0px auto;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
text-align: center;}
li {
display: inline;
margin: 0px 3px;}
p {
text-align: center;
width: 600px;
margin: 20px auto 20px auto;
font-weight: normal;}
a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
padding: 6px 18px 5px 18px;}
a:hover, a.on {
color: #cc3333;
IV- 6
Bab 4 Cascading Style Sheet(CSS)
background-color: #ffffff;}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<img src="images/logo.gif" alt="The
Analog Specialists" />
</div>
<ul id="navigation">
<li><a href="#"
class="on">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>
<img src="images/keys.jpg" alt="Fender
Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
</p>
<p>
We specialize in the sale and repair
of classic keyboards, in particular the Fender Rhodes,
Wurlitzer EP200, and Hohner Clavinet.
</p>
</div>
</body>
</html>
4.5. List, Table dan Form
Ada beberapa properti dari CSS yang dibuat khusus untuk berkaitan dengan
beberapa elemen HTML seperti list, table dan form. Berikut contoh kode nya
untuk ditulis pada notepad dan disimpan dengan nama file list-css.html lalu
perhatikan hasilnya saat dibuka di web browser.
<!DOCTYPE html>
<html>
<head>
<title>Boxes</title>
<style type="text/css">
body {
font-size: 80%;
font-family: "Courier New", Courier,
monospace;
letter-spacing: 0.15em;
background-color: #efefef;}
#page {
max-width: 940px;
min-width: 720px;
Bab 4 Cascading Style Sheet (CSS)
IV- 7
margin: 10px auto 10px auto;
padding: 20px;
border: 4px double #000;
background-color: #ffffff;}
#logo {
width: 150px;
margin: 10px auto 25px auto;}
ul {
width: 570px;
padding: 15px;
margin: 0px auto 0px auto;
border-top: 2px solid #000;
border-bottom: 1px solid #000;
text-align: center;}
li {
display: inline;
margin: 0px 3px;}
p {
text-align: center;
width: 600px;
margin: 20px auto 20px auto;
font-weight: normal;}
a {
color: #000000;
text-transform: uppercase;
text-decoration: none;
padding: 6px 18px 5px 18px;}
a:hover, a.on {
color: #cc3333;
background-color: #ffffff;}
</style>
</head>
<body>
<div id="page">
<div id="logo">
<img src="images/logo.gif" alt="The
Analog Specialists" />
</div>
<ul id="navigation">
<li><a href="#"
class="on">Home</a></li>
<li><a href="#">For Sale</a></li>
<li><a href="#">Repairs</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p><img src="images/keys.jpg" alt="Fender
Rhodes, Hohner Clavinet, and Wurlitzer EP200" />
</p>
<p>We specialize in the sale and repair of
classic keyboards, in particular the Fender Rhodes,
Wurlitzer EP200, and Hohner Clavinet.
</p>
IV- 8
Bab 4 Cascading Style Sheet(CSS)
</div>
</body>
</html>
4.6. Layout
Melalui CSS dengan layout, kita dapat mengendalikan setiap elemen pada
halaman web dan membuat halaman web yang lebih atraktif. Berikut contoh kode
HTML menggunakan CSS dengan layout.
<!DOCTYPE html>
<html>
<head>
<title>Layout</title>
<link rel="stylesheet" type="text/css"
href="css/960_12_col.css" />
<style type="text/css">
@font-face {
font-family: 'QuicksandBook';
src: url('fonts/Quicksand_Bookwebfont.eot');
src: url('fonts/Quicksand_Bookwebfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Quicksand_Bookwebfont.woff') format('woff'),
url('fonts/Quicksand_Bookwebfont.ttf') format('truetype'),
url('fonts/Quicksand_Bookwebfont.svg#QuicksandBook') format('svg');
font-weight: normal;
font-style: normal;}
body {
color: #ffffff;
background: #413f3b
url("images/bg.jpg");
font-family: Georgia, "Times New
Roman", Times, serif;
font-size: 90%;
margin: 0px;
text-align: center;}
a {
color: #b5c1ad;
text-decoration: none;}
a:hover {
color: #ffffff;}
.header {
background-image: url("images/bgheader.jpg");
padding: 0px 0px 0px 0px;
height: 100px;
Bab 4 Cascading Style Sheet (CSS)
IV- 9
position: fixed;
top: 0px;
width: 100%;
z-index: 50;}
.nav {
float: right;
font-family: QuicksandBook, Helvetica,
Arial, sans-serif;
padding: 45px 0px 0px 0px;
text-align: right;}
.wrapper {
width: 960px;
margin: 0px auto;
background-image: url("images/bgtriangle.png");
background-repeat: no-repeat;
background-position: 0px 0px;
text-align: left;}
.logo {
margin-bottom: 20px;}
h1, h2 {
font-family: QuicksandBook, Helvetica,
Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;}
h1 {
font-size: 240%;
margin-top: 140px;}
.date {
font-family: Arial, Helvetica, sansserif;
font-size: 75%;
color: #b5c1ad;}
.intro {
clear: left;
font-size: 90%;
line-height: 1.4em;}
.main-story {
background-image:
url("images/triangles.png");
background-repeat: no-repeat;
background-position: 122px 142px;
height: 570px;}
.more-articles {
border-top: 1px solid #ffffff;
padding: 10px;}
.more-articles p {
border-bottom: 1px solid #807c72;
padding: 5px 0px 15px 0px;
font-size: 80%;}
.more-articles p:last-child {
border-bottom: none;}
.footer {
IV- 10
Bab 4 Cascading Style Sheet(CSS)
clear: both;
background: rgba(0, 0, 0, 0.2);
padding: 5px 10px;}
.footer p {
font-family: Helvetica, Arial, sansserif;
font-size: 75%;
text-align: right;}
.footer a {
color: #807c72;}
</style>
</head>
<body>
<div class="header">
<div class="container_12">
<div class="grid_5">
<img src="images/logo.png"
alt="Pedal Faster - The modern bicycle magazine" width="216"
height="37" class="logo" />
<img src="images/headertriangle.png" alt="" width="116" height="100" />
</div>
<div class="nav grid_7">
<a href="">home</a> / <a
href="">news</a> / <a href="">archives</a> / <a
href="">about</a> / <a href="">contact</a>
</div>
</div>
</div>
<div class="wrapper">
<div class="main-story container_12">
<div class="grid_6 push_6">
<h1><a href="">Fixed Gear
Forever</a></h1>
</div>
<div class="intro grid_3 push_9">
<p class="date">16 APRIL
2011</p>
<p>The veloheld combines
minimalist design with superb quality. Devoid of excessive
graphics and gear shift components, the veloheld product
range delights us with its beauty and simplicity. The black
and white (yin and yang?) bicycles feature a short
wheelbase, a single gear and a narrow handlebar... All you
need to explore the city streets.</p>
<p>For those who want to create
their bike themselves, the veloheld frames come in three
sizes and two colours and are the perfect starting point. <a
href="">Continue reading...</a></p>
</div>
</div><!-- .main-story -->
<div class="more-articles container_12">
Bab 4 Cascading Style Sheet (CSS)
IV- 11
<h2 class="grid_12"><a href="">More
Articles</a></h2>
<div class="grid_3">
<img src="images/more1.jpg"
alt="The road ahead" width="220" height="125" />
<p><a href="">On the Road: From
the fixed gear fanatic's point of view</a></p>
<p><a href="">Brand History:
Pashley Cycles - hand-built in England</a></p>
<p><a href="">Frame Wars:
Innovations in cycle manufacture and repair</a></p>
</div>
<div class="grid_3">
<img src="images/more2.jpg"
alt="Sketchbook" width="220" height="125" />
<p><a href="">Touring Diary: A
sketchbook in your basket</a></p>
<p><a href="">Top Ten Newcomers
for 2012: A peek at what's to come</a></p>
<p><a href="">InnerTube: The
best cycling videos on the web</a></p>
</div>
<div class="grid_3">
<img src="images/more3.jpg"
alt="Repair shop sign" width="220" height="125" />
<p><a href="">Product Review:
All baskets were not created equal</a></p>
<p><a href="">Going Public: Out
& about with the founder of Public</a></p>
<p><a href="">Cycle Lane
Defence: Know your rights</a></p>
</div>
<div class="grid_3">
<img src="images/more4.jpg"
alt="Schwinn Spitfire" width="220" height="125" />
<p><a href="">Bicycle Hall of
Fame: The 1958 Schwinn Spitfire</a></p>
<p><a href="">Reader Survey:
Share your thoughts with us!</a></p>
<p><a href="">Chain Gang: The
evolution of the humble bike chain</a></p>
</div>
</div><!-- .more-articles -->
</div><!-- .wrapper -->
<div class="footer clearfix">
<div class="container_12">
<p class="grid_12"><a href="">Legal
Information</a> | <a href="">Privacy Policy</a> | <a
href="">Copyright © Pedal Faster 2011</a></p>
</div>
</div>
</body>
</html>
IV- 12
Bab 4 Cascading Style Sheet(CSS)
4.7. Image
Mengendalikan ukuran dan tataletak gambar/image pada halaman web akan lebih
mudah apabila kita menggunakan CSS. Berikut contoh kode HTML nya,
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
<style type="text/css">
body {
color: #665544;
background-color: #d4d0c6;
background-image:
url("images/backdrop.gif");
font-family: Georgia, "Times New
Roman", serif;
text-align: center;}
.wrapper {
width: 720px;
margin: 0px auto;}
.header {
margin: 40px 0px 20px 0px;}
.entry {
width: 220px;
float: left;
margin: 10px;
height: 198px;
background-image:
url("images/shadow.png");
background-repeat: no-repeat;
background-position: bottom;}
figure {
display: block;
width: 202px;
height: 170px;
background-color: #e7e3d8;
margin: 0;
padding: 9px;
text-align: left;}
figure img {
width: 200px;
height: 150px;
border: 1px solid #d6d6d6;}
figcaption {
background-image:
url("images/icon.png");
padding-left: 20px;
background-repeat: no-repeat;}
</style>
</head>
Bab 4 Cascading Style Sheet (CSS)
IV- 13
<body>
<div class="wrapper">
<div class="header">
<img src="images/title.gif"
alt="Galerie Botanique" width="456" height="122" />
<p>Here is a selection of antique
botanical prints held in our collection.</p>
</div>
<div class="entry">
<figure><img src="images/print-01.jpg"
alt="Helianthus" />
<figcaption>Helianthus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-02.jpg"
alt="Passiflora" />
<figcaption>Passiflora</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-03.jpg"
alt="Nyctocalos" />
<figcaption>Nyctocalos</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-04.jpg"
alt="Polianthes" />
<figcaption>Polianthes</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-05.jpg"
alt="Ficus" />
<figcaption>Ficus</figcaption>
</figure>
</div>
<div class="entry">
<figure><img src="images/print-06.jpg"
alt="Dendrobium" />
<figcaption>Dendrobium</figcaption>
</figure>
</div>
</div>
</body>
</html>
IV- 14
Bab 4 Cascading Style Sheet(CSS)
4.8. HTML 5 Layout
HTML 5 memperkenalkan sekumpulan elemen baru dalam rangka mempermudah
pengaturan/tata letak pada halaman web yang dibuat, berikut contohnya
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Layout</title>
<style type="text/css">
header, section, footer, aside, nav,
article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/darkwood.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0px;}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000;
background-color: #ffffff;}
header {
height: 160px;
background-image:
url(images/header.jpg);}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;}
nav, footer {
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;}
nav ul {
margin: 0px;
padding: 5px 0px 5px 30px;}
nav li {
display: inline;
margin-right: 40px;}
nav li a {
color: #ffffff;}
nav li a:hover, nav li a.current {
color: #000000;}
Bab 4 Cascading Style Sheet (CSS)
IV- 15
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;}
article {
clear: both;
overflow: auto;
width: 100%;}
hgroup {
margin-top: 40px;}
figure {
float: left;
width: 290px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;}
figcaption {
font-size: 90%;
text-align: left;}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;}
aside section a:hover {
color: #985d6a;
background-color: #efefef;}
a {
color: #de6581;
text-decoration: none;}
h1, h2, h3 {
font-weight: normal;}
h2 {
margin: 10px 0px 5px 0px;
padding: 0px;}
h3 {
margin: 0px 0px 10px 0px;
color: #de6581;}
aside h2 {
padding: 30px 0px 10px 0px;
color: #de6581;}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;}
</style>
<!--[if lt IE 9]>
<script
src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></s
cript>
IV- 16
Bab 4 Cascading Style Sheet(CSS)
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<h1>Yoko's Kitchen</h1>
<nav>
<ul>
<li><a href=""
class="current">home</a></li>
<li><a
href="">classes</a></li>
<li><a
href="">catering</a></li>
<li><a
href="">about</a></li>
<li><a
href="">contact</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="images/bokchoi.jpg" alt="Bok Choi" />
<figcaption>Bok
Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese
Vegetarian</h2>
<h3>Five week course in
London</h3>
</hgroup>
<p>A five week introduction to
traditional Japanese vegetarian meals, teaching you a
selection of rice and noodle dishes.</p>
</article>
<article>
<figure>
<img
src="images/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki
Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course
looking at how to create the most delicious sauces for use
in a range of Japanese cookery.</p>
Bab 4 Cascading Style Sheet (CSS)
IV- 17
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled
chicken)</a>
<a href="">Tsukune (minced
chicken patties)</a>
<a href="">Okonomiyaki (savory
pancakes)</a>
<a href="">Mizutaki (chicken
stew)</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</section>
</aside>
<footer>
© 2011 Yoko's Kitchen
</footer>
</div><!-- .wrapper -->
</body>
</html>
Latihan
Perhatikan kode XML/HTML berikut
<?xml version=”1.0” encoding=”iso-8859-1”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
lang=”en”>
<head>
<title>Font test</title>
<link rel=”stylesheet” type=”text/css”
href=”tableStyles.css” />
</head>
<body>
<table>
<tr>
<th>Quantity</th>
<th>Ingredient</th>
IV- 18
Bab 4 Cascading Style Sheet(CSS)
</tr>
<tr class=”odd”>
<td>3</td>
<td>Eggs</td>
</tr>
<tr>
<td>100ml</td>
<td>Milk</td>
</tr>
<tr class=”odd”>
<td>200g</td>
<td>Spinach</td>
</tr>
<tr>
<td>1 pinch</td>
<td>Cinnamon</td>
</tr>
</tab
le>
</body>
</html>
Buatlah Style sheet dengan nama table-style.css sehingga tampilan tabel akan
seperti gambar berikut
Bab 4 Cascading Style Sheet (CSS)
IV- 19
IV- 20
Bab 4 Cascading Style Sheet(CSS)
BAB 5
PENGENALAN PHP
Tujuan Pembelajaran:
Memahami kaidah Pemrograman dengan PHP
5.1
Sintaks Dasar
5.2
Mengirim Data ke Web Browser
5.3
Memberi Komentar
5.4
Variable
5.5
String
5.6
Number
5.7
Konstanta
Bab 5 Pengenalan PHP
V- 1
5.1. Tujuan
Setelah menyelesaikan bab ini mahasiswa diharapkan memahami kaidah
penulisan dan mempraktikkan Tag PHP dasar serta mengintegrasikan PHP ke
dalam dokumen HTML dan sebaliknya. Adapun yang akan dibahas adalah :
•
Pemrograman sisi Server
•
Sintaks Dasar
•
Mengirim Data ke Web Browser
•
Memberi Komentar
•
Variable
•
String
•
Number
•
Konstanta
5.2. Pemrograman Sisi Server
Aplikasi web adalah aplikasi yang disimpan dan dieksekusi di lingkungan web
server. Setiap ada permintaan user melalui aplikasi di sisi client melalui web
browser akan ditanggapi oleh aplikasi web dan hasilnya akan dikembalikan lagi
ke user.
Hampir sebagian besar aplikasi berbasis web, prosesnya berlangsung di server.
Aplikasi khusus yang disebut web server, akan bertanggungjawab dalam
komunikasi dengan browser. Sebuah basis data relasional menyimpan informasi
apapun yang diperlukan sebuah aplikasi. Pada kondisi seperti ini, seorang client
memerlukan sebuah aplikasi/sarana untuk dapat mengakses informasi yang ada
dan akan digunakan juga sebagai media untuk mengisi informasi baru ke dalam
basis data. Gambar 5.1 berikut menunjukkan bagaimana sistem tersebut bekerja.
Tentu saja hal ini harus berjalan dalam sebuah sistem operasi (OS) sehingga web
server, bahasa pemrograman dan basis data dapat beroperasi dengan baik.
V- 2
Bab 5 Pengenalan PHP
Gambar 5.1 Arsitektur sebuah Web Server
PHP dapat dikatakan sebagai bahasa pemrograman middleware. Bahasa
pemrograman ini bekerja sama dengan web server untuk menterjemahkan
permintaan user melalui World Wide Web, mengolah permintaan ini, berinteraksi
dengan aplikasi lain di server untuk memenuhi permintaan dan menunjukkan apa
yang harus dikerjakan oleh server sebagai balasan dari permintaan client.
Aplikasi middleware inilah yang melakukan peran sangat penting pada server
diantaranya adalah membuat server up dan running tanpa usaha yang terlalu
banyak dari user. Oleh karena PHP ini adalah bahasa pemrograman yang berjalan
di server, maka untuk mengaplikasikannya kita harus mengaktifkan server terlebih
dahulu. Server yang akan digunakan pada praktikum kali ini adalah server
APACHE FRIENDS yang instalasi dan konfigurasinya telah dilakukan pada
pembahasan di Bab 2.
Bab 5 Pengenalan PHP
V- 3
5.3. Sintaks Dasar
Sebuah script bahasa pemrograman PHP didahului oleh tags :
<?php
Statement1;
Statement1;
.................;
?>
5.3.1. Modul 1 : Praktikum Sintaks Dasar
1. Pastikan bahwa server APACHE telah aktif dengan mengaktifkan xampp
Control Panel
Gambar 5.2 Xampp Control Panel dengan Apache dan MySQL running
2. Buat folder LatihanPHP di folder htdocs pada folder xampp di drive C
3. Buka aplikasi teks editor dan ketikan script PHP berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
V- 4
Bab 5 Pengenalan PHP
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Halaman PHP Dasar</title>
</head>
<body>
<!-- Script Pertama.php -->
<p>Ini halaman Standar HTML.</p>
</body>
</html>
4. Pada bagian <body> setelah tag paragraf <p>, tambahkan script seperti
tampak berikut(cetak tebal)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title> Halaman PHP Dasar </title>
</head>
<body>
<!-- Script Pertama.php -->
<p>Ini halaman standar HTML.</p>
<?php
echo “Ini halaman PHP”;
?>
</body>
</html>
5. Simpan file PHP di atas dengan nama file : Pertama.php di folder
LatihanPHP yang ada di htdocs server xampp.
6. Buka file Pertama.php melalui web browser dengan alamat
http://localhost/LatihanPHP/Pertama.php
7. Amati hasil tampilan di web browser.
8. Amati perbedaan apabila file Pertama.php dibuka di web browser seperti
langkah 6 dengan dibuka langsung melalui foldernya
file:///C:/xampp/htdocs/LatihanPHP/first.php
9. Lampirkan perbedaan hasil antara langkah 6 dan 8 pada Laporan dan
jelaskan kenapa terjadi hal demikian.
Bab 5 Pengenalan PHP
V- 5
5.3.2. Modul 2 : Mengirim Data ke Web Browser
Untuk membuat aplikasi web dinamis menggunakan PHP, maka anda harus
tahu bagaimana cara mengirim data ke web browser. PHP memiliki banyak
fungsi yang dapat melakukan hal ini, namun yang paling sering dipakai adalah
echo dan print. Karena PHP bersifat tidak case-sensitive maka penulisannya
scriptnya dapat berupa huruf kecil atau kapital atau juga kombinasi keduanya.
1. Pada text editor, edit file Pertama.php menjadi seperti berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title> Halaman PHP Dasar </title>
</head>
<body>
<!-- Script Pertama.php -->
<p>Ini halaman standar HTML.</p>
<?php
echo “Ini halaman PHP”;
print “Ini untuk menampilkan ke web browser”;
?>
</body>
</html>
2. Jalankan kembali seperti langkah nomor 6 pada Modul 1.
3. Tampilan hasil di web browser :
4. Tampak hasil dari echo dan print, coba perbaiki agar tulisan yang
menggunakan perintah print tertulis di bawah dengan menyisipkan tag
HTML <br/> sehingga tampak seperti :
V- 6
Bab 5 Pengenalan PHP
5.3.3. Modul 3 : Memberi Komentar
Terkadang, script program yang kita buat akan dibaca oleh orang lain dimasa
yang akan datang untuk kepentingan pengembangan. Apabila hanya
mengandung script asli PHP, orang lain agak susah untuk memahaminya.
Oleh karena itu perlu kita beri keterangan pada kode program yang kita buat.
Pada pemrograman web menggunakan PHP, pemberian komentar dapat
dilakukan dengan menggunakan simbol // atau # seperti contoh :
//ini adalah komentar
# ini juga komentar
Atau juga menggunakan /*.....*/ untuk komentar yang panjang
/* ini juga bentuk
Lain dari komentar
Terutama yang lebih dari sebaris */
Komentar ini tidak akan dieksekusi oleh server.
1. Pada text editor ketikan script berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>Contoh Format Komentar Program</title>
</head>
<body>
<?php
# Komentar.php
# Dibuat 16 Maret 2011
# Oleh Larry E. Ullman
Bab 5 Pengenalan PHP
V- 7
# Script ini tidak melakukan apa-apa.
echo '<p>Ini sebuah baris text.<br />Ini baris teks
yang lain.</p>';
/*
echo 'baris ini tidak akan dieksekusi.';
*/
echo "<p>Sekarang saya sudah selesai.</p>";
// akhir kode PHP.
?>
</body>
</html>
2. Simpan dengan nama file Komentar.php
3. Amati hasilnya di web browser dan bedakan mana yang merupakan
komentar, jelaskan pada laporan.
5.3.4. Modul 4: Variable
Seperti pada bahasa pemrograman lainnya, PHP juga mengenal deklarasi
variable. Variable berfungsi untuk menyimpan nilai. Nilai ini dapat berupa
angka, karakter, text atau data yang lebih kompleks. Apapun tipe datanya,
variable pada PHP harus mengikuti aturan sintaks sebagai berikut:
• Nama variable diawali oleh simbol $
• Nama variable dapat berupa kombinasi antara huruf dan
underscore
• Karakter pertama setelah tanda $ harus huruf atau underscore
• Nama variable bersifat case sensitive.
Untuk mencetak isi dari variable dapat dilakukan dengan cara :
print $nama_variable;
print "Hello, $name";
1.
Buka text editor anda dan ketikan script PHP berikut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
V- 8
Bab 5 Pengenalan PHP
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<title>Variable bertipe Bilangan</title>
</head>
<body>
<?php # varBilangan.php
// Mengisi variable:
$jumlah = 30; // jumlah pembelian barang.
$harga = 119.95;
$Potongan_Pajak = .05; // 5% pajak penjualan.
// Menghitung total Pembayaran:
$total = $jumlah * $harga;
$total = $total + ($total * $Potongan_Pajak);
// Menghitung total pembayaran plus pajak.
// Format tampilan total:
$total = number_format ($total, 2);
// Cetak hasil:
echo '<p>Anda membeli barang sebanyak <b>'.$jumlah .
'</b> item seharga <b>$' . $harga . '</b> per
barang. Ditambah pajak, totalnya menjadi: <b>$' .
$total . '</b>.</p>';
?>
</body>
</html>
2. Simpan di folder LatihanPHP dengan nama varBilangan.php
3. Cek hasil tampilannya pada web browser.
5.3.5. Modul 5: String
Salah satu tipe data yang dapat disimpan di variable adalah string. Format
penulisan data bertipe string dapat dilakukan seperti berikut ini :
‘Tobias’
“In watermelon sugar”
‘100’
‘August 2, 2011’
Untuk mendeklarasikan variable bertipe string dapat dilakukan dengan dua
cara yakni :
Bab 5 Pengenalan PHP
V- 9
$nama_depan = 'Tobias';
$hari_ini = “2 Agustus 2015”;
Boleh menggunakan “ ” atau ‘ ‘.
1. Pada text editor anda, tuliskan script berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Strings</title>
</head>
<body>
<?php # strings.php
// membuat variable:
$nama_depan = 'Haruki';
$nama_belakang = 'Murakami';
$buku = 'Kafka on the Shore';
// mencetak nilai variable:
echo "<p>Buku berjudul <em>$buku</em> ditulis oleh
$nama_depan $nama_belakang.</p>";
?>
</body>
</html>
2. Simpan dengan nama file string.php
3. Lihat hasil tampilannya di web browser
4. Lakukan perubahan pada nilai variable dan simpan perubahannya kemudian
tampilkan kembali di web browser.
5. Pada penggunaan string, dikenal istilah concacenating string atau penambahan
string. Buka kembali file string.php di text editor dan tambahkan pada
deklarasi variable menjadi :
$nama_depan = 'Haruki';
$nama_belakang = 'Murakami';
$buku = 'Kafka on the Shore';
$pengarang = $nama_depan.’ ’.$nama_belakang;
6. Pada statement echo ubah dengan menggunakan variable $pengarang
seperti berikut ini:
V- 10
Bab 5 Pengenalan PHP
echo "<p>Buku berjudul <em>$buku</em> ditulis oleh
$pengarang.</p>";
6.3.6. Modul 6 : Number/Bilangan
Format bilangan yang dapat ditampung dalam variable pada PHP meliputi
bilangan bulat dan real dengan format penulisan :
 8
 3.14
 10980843985
 -4.2398508
 4.4e2
Setiap value yang diberikan kepada variable tidak diberi tanda kutip, untuk
koma menggunakan tanda titik dan untuk angka yang besar ditulis apa adanya
tanpa pemisahan untuk ribuan misalnya. Disamping dapat dilakukan operasi
aritmetika pada variable bertipe bilangan, fungsi build-in PHP yang sering
digunakan pada bilangan adalah round() untuk pembulatan dan
number_format()
untuk penulisan bilangan
dalam
format
yang
sebenarnya dan untuk tingkat ketelitian angka di belakang koma. Contohcontoh penggunaanya:
Fungsi round():
$n = 3.14;
$n = round ($n); // 3
$n = 3.142857;
$n = round ($n, 3); // 3.143
Dibulatkan
Fungsi number_format()
$n = 20943;
$n = number_format ($n); // hasil : 20,943
$n = 20943;
Bab 5 Pengenalan PHP
V- 11
$n = number_format ($n, 2); // hasil : 20,943.00
6.3.7. Modul 7: Konstanta
Konstanta sama seperti variable digunakan untuk menyimpan nilai akan tetap
pada konstanta nilai yang tersimpan tidak akan berubah. Format penulisan
konstanta :
define ('NAME', value);
Contoh :
define ('USERNAME', 'troutocity');
define ('PI', 3.14);
Untuk mengakses nilai konstanta, tidak bisa menggunakan tanda kutip seperti
berikut :
echo "Hello, USERNAME"; // akan timbul error
1. Buka text editor anda dan tuliskan kode berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title>Konstanta</title>
</head>
<body>
<?php # konstanta.php
// Set hari ini sebagai konstanta:
define ('HARI_INI', 'Mei 13, 2015');
// cetak pesan, menggunakan konstanta yang telah
//didefiniskan yakni HARI_INI:
echo '<p>Hari ini ' .HARI_INI. '.<br />Server ini
menjalankan PHP versi <b>' . PHP_VERSION . '</b> pada <b>' .
PHP_OS . '</b> sistem operasi.</p>';
?>
</body>
</html>
V- 12
Bab 5 Pengenalan PHP
2.
Simpan dengan nama file konstanta.php di LatihanPHP.
3.
Amati hasilnya di web browser dan perhatikan hasil dari tampilan predefined
function.
TUGAS
Buat Laporan resmi mengenai Bab ini yang berisikan
1. Hasil screenshoot tiap modul
2. Analisa dan jawaban pertanyaan yang ada di tiap modul.
3. Buat contoh penggunaan script PHP untuk Modul 6 .
Bab 5 Pengenalan PHP
V- 13
V- 14
Bab 5 Pengenalan PHP
BAB 6
PEMROGRAMAN PHP
Tujuan Pembelajaran:
Memahami kaidah Pemrograman dengan PHP
6.1 Membuat Form HTML
6.2 Menangani Form HTML
6.3 Kondisional dan Operator
6.4 Validasi Data
6.5 Array
6.6 Perulangan for dan while
Bab 6 Pemrograman PHP
VI- 1
6.1. Membuat Form HTML
Setelah
kita
belajar
dasar-dasar
perintah
PHP,
sekarang
saatnya
mengaplikasikannya padaaplikasi web. Biasanya PHP digunakan sebagai
pengolah data yang diinputkan melalui form yang dibuat dengan HTML. Sebagai
contoh, andaikan Anda memiliki toko virtual dalam web yang menjual alat-alat
tulis seperti pensil, buku tulis, dan ballpoint. Berikut ini adalah salah satu bentuk
kode HTML yang digunakan untuk membuat form pemesanan pembelian barangbarang tersebut.
<html><body>
<h2>Toko Alat Tulis Amalia</h2>
<form action="proses.php" method="post">
<select name="barangpesanan">
<option>Pensil</option>
<option>Buku Tulis</option>
<option>Ballpoint</option>
</select>
Jumlah pesanan: <input name="jumlah" type="text">
<input type="submit" value="Submit">
</form>
</body></html>
Seperti yang Anda lihat pada kode HMTL di atas, perintah action="proses.php"
digunakan untuk mengarahkan ke file PHP yang digunakan untuk memproses
barang pembelian ketika tombol submit ditekan. Dalam form yang dihasilkan
dari kode di atas terdapat 2 buah komponen input yaitu berbentuk combobox dan
textbox. Untuk combobox, diberi nama “barangpesanan” (perhatikan perintah
<select name="barangpesanan">) dan textbox diberi nama “jumlah” (perhatikan
perintah
<input
name="jumlah"
type="text">).
Penjelasan
mengenai
method="post"akan dijelaskan pada bab berikutnya.
Sedangkan berikut ini adalah salah satu contoh kode PHP untuk memproses
input dari form di atas. Kode PHP ini disimpan dengan nama proses.php.
<html><body>
<?php
$jumlah = $_POST['jumlah'];
$barangpesanan = $_POST['barangpesanan'];
VI- 2
Bab 6 Pemrograman PHP
echo "Anda memesan ". $jumlah . " " . $barangpesanan .
".<br>";
echo "Terima kasih atas kesediaan Anda memesan barang
dari kami!";
?>
</body></html>
Kalau Anda perhatikan, terdapat keterkaitan perintah $_POST['xxx']; dengan
"xxx" pada name = "xxx" (nama komponen input).
6.2. Menangani Form HTML
Pada contoh sebelumnya, kita mengirim data input dari form menuju ke file PHP
untuk diproses menggunakan metode post. Selain metode tersebut, terdapat pula
metode get. Lantas perbedaannya apa? Kapan kita gunakan metode post atau
get?.
Untuk melihat perbedaan post dan get, kita akan sedikit mengubah file HTML
form dan file proses.php sebelumnya.
<html><body>
<h2>Toko Alat Tulis Amalia</h2>
<form action="proses.php" method="get">
<select name="barangpesanan">
<option>Pensil</option>
<option>Buku Tulis</option>
<option>Ballpoint</option>
</select>
Jumlah pesanan: <input name="jumlah" type="text">
<input type="submit" value="Submit">
</form>
</body></html>
dan isi proses.php nya adalah
<html><body>
<?php
$jumlah = $_GET['jumlah'];
$barangpesanan = $_GET['barangpesanan'];
echo "Anda memesan ". $jumlah . " " .
$barangpesanan . ".<br>"; echo "Terima kasih atas
kesediaan Anda memesan barang dari kami!";
?>
</body></html>
Bab 6 Pemrograman PHP
VI- 3
Perbedaan kode HTML Perbedaan kode HTML dan PHP di atas dengan
sebelumnya adalah: metode pengiriman data input dari form menggunakan get,
dan dalam proses.php $_POST diganti dengan $_GET.
Apabila aplikasi di atas dijalankan, maka secara sekilas hasil yang tampak sama
dengan ketika digunakan metode post. Namun, coba perhatikan URL yang
tampak ketika proses.php muncul. Pada URL tersebut terdapat tambahan
?barangpesanan=...&jumlah=... setelah nama file Titik-titik tersebut akan diisi
dengan data sesuai dengan yang diinputkan pada form.
Coba bandingkan dengan URL ketika digunakan metode post. Data isian pada
form tidak ditampilkan pada URL. Sehingga inilah perbedaan antara keduanya.
Dengan demikian, hendaknya kita jangan menggunakan metode get ketika akan
memproses data input melalui form. Bayangkan seandainya form tersebut
digunakan untuk login atau untuk keperluan yang menyangkut privasi. Apabila
Anda gunakan metode get, maka semua input data akan ditampilkan pada URL.
Bisa-bisa password Anda akan kelihatan di URL (jika terdapat input password
ketika login). Untuk metode get, biasanya digunakan untuk input data melalui
link (bukan melalui form).
6.3. Kondisional dan Operator
Dalam
bahasa
memanipulasi
pemrograman
secara
umum,
operator
digunakan
untuk
atau melakukan proses perhitungan pada suatu nilai. Sampai saat
ini, Anda telah mengenal operator “.” (menggabungkan string) dan “=” (proses
assignment). Selain dua operator itu masih banyak jenis operator yang lain dalam
PHP yaitu:
•
Operator aritmatik
•
Operator perbandingan
•
Gabungan operator aritmatik dan assignment
VI- 4
Bab 6 Pemrograman PHP
Operator Aritmatik
Operator
Makna
Contoh
+
Penjumlahan
2 + 4
-
Pengurangan
6 - 2
*
Perkalian
5 * 3
/
Pembagian
15 / 3
%
Modulus
43 % 10
Berikut ini adalah tabel operator aritmatik, makna dan contohnya:
Contoh:
<?php
$penjumlahan = 2 + 4;
$pengurangan = 6 - 2;
$perkalian = 5 * 3;
$pembagian = 15 / 3;
$modulus = 5 % 2;
echo"Menampilkan penjumlahan:2+4=
".$penjumlahan."<br>";
echo"Menampilkan pengurangan: 6 - 2 =
".$pengurangan."<br>";
echo "Menampilkan perkalian: 5 * 3 =
".$perkalian."<br>";
echo "Menampilkan pembagian: 15 / 3 =
".$pembagian."<br>";
echo "Menampilkan modulus: 5 % 2 = " . $modulus.";
?>
Operator Perbandingan
Perbandingan digunakan untuk menguji hubungan antara nilai dan atau variabel.
Operator ini digunakan dalam suatu statement bersyarat yang selalu menghasilkan
nilai TRUE atau FALSE.
Misalkan:
$x = 4; $y = 5;
berikut ini adalah beberapa contoh penggunaan operator perbandingan dan
hasilnya.
Operator Makna
Contoh
Hasil
==
Sama dengan
$x == $y
FALSE
!=
Tidak sama dengan
$x != $y
TRUE
Bab 6 Pemrograman PHP
VI- 5
<
Lebih kecil dari
$x < $y
TRUE
>
Lebih besar dari
$x > $y
FALSE
<=
Lebih kecil atau sama dengan dari
$x <= $y
TRUE
>=
Lebih besar atau sama dengan dari
$x >= $y
FALSE
Kombinasi Operator Aritmatik dan Assignment
Dalam pemrograman seringkali dijumpai proses yang melibatkan proses
increment. Misalkan kita menginginkan proses increment dengan tingkat
kenaikan 1, maka perintah yang dituliskan dapat berupa
$counter = $counter + 1;
dalam PHP, perintah di atas dapat ditulis dalam satu perintah singkat sebagai
$counter += 1;
Dari contoh di atas tampak bahwa operator yang digunakan (+=) merupakan
gabungan dari operator aritmatik dan assignment. Berikut ini adalah bentukbentuk operator lain jenis ini.
Operator
+=
-=
*=
/=
%=
.=
Contoh
$x += 2;
$x -= 4;
$x *= 3;
$x /= 2;
$x %= 5;
$my str.="hello";
Operasi yang ekuivalen
$x = $x + 2;
$x = $x - 4;
$x = $x * 3;
$x = $x / 2;
$x = $x % 5;
$my str = $my str . "hello";
Operator Pre/Post Increment dan Decrement
Operator jenis ini merupakan pengembangan dari operator jenis sebelumnya.
Operator ini hanya digunakan pada proses increment maupun decrement dengan
tingkat 1.
Berikut ini adalah operator yang termasuk jenis ini:
•
$x++;ekuivalen dengan $x += 1;atau $x = $x + 1;
•
$x--;ekuivalen dengan $x -= 1;atau $x = $x – 1;
Contoh:
<?php
$x = 4;
VI- 6
Bab 6 Pemrograman PHP
$x++;
echo "$x;
$x = 4;
$x--; echo "$x;
?>
Statement IF
Sintaks dari statement tersebut dalam PHP adalah
if (syarat)
{
statement1;
statement2;
.
.
}
Untuk menyatakan syarat, biasanya digunakan operator perbandingan seperti
yang telah dibahas sebelumnya. Apabila syarat bernilai TRUE maka statementstatement yang diapit dengan tanda kurung kurawal akan dijalankan. Bentuk lain
dari sintaks IF adalah
if (syarat)
{
statement1;
statement2;
.
.
}
else
{
statement3;
statement4;
.
.
}
Untuk sintaks kedua di atas, statement3, statement4, dst akan dijalankan apabila
syarat bernilai FALSE.
Contoh:
<?
$my_name = "nada";
if ($my_name == "nada")
Bab 6 Pemrograman PHP
VI- 7
{
echo "Your name is ".$my_name."!"<br>";
}
echo "Welcome to my homepage!";
?>
Contoh
<?
$number = 3;
if ($number == 4)
{
echo "Benar";
}
else
{
echo "Salah";
}
?>
Terdapat pula bentuk sintaks berikutnya dari IF … yaitu dengan ditambahkan
elseif
if(syarat1)
{
statement11;
statement12;
.
.
}
elseif(syarat2)
{
statement21;
statement22;
.
.
}
else
{
statement1;
statement2;
.
.
}
Switch
VI- 8
Bab 6 Pemrograman PHP
PHP memiliki perintah kondisional lain yaknik switch. Kondisional ini
baik digunakan pada saat kondisi if-elseif-else yang panjang. Sintaks
penulisan switch sebagai berikut
switch ($variable) {
case 'value1':
// Blok yang dikerjakan saat ‘value1’.
break;
case 'value2':
// Blok yang dikerjakan saat ‘value2’.
break;
default:
// Kerjakan blok ini jika tidak dipilih
// value1 dan value2.
break;
}
Kondisional switch akan membandingkan isi peubah $variable untuk berbagai
kasus yang berbeda. Ketika isi peubah $variable sama dengan case yang ada
maka statement yang ada pada case bersangkutan akan dieksekusi sampai
ketemu break. Apabila tidak ada yang cocok dari isi peubah $variable maka yang
dipilih adalah default.
6.4. Validasi Form
Form validation adalah sebuah form yang mampu melakukan validasi pada tiap
inputan pada form, misalnya jika seorang user belum melakukan pengisian
nama dan saat user mengklik tombol sumbit maka akan muncul pemberitahuan
bahwa user belum mengisi nama pada form . Langkah pertama kita akan
membuat sebuah form sederhana di mana user akan menginput data pada form
ini. buat file form.php dan aksi-form.php sebagai pengecek keabsahan masukan
oleh user. Berikut kode php-nya:
Bab 6 Pemrograman PHP
VI- 9
1. Tuliskan kode php berikut pada notepad
<html>
<head>
<title>CARIKODE</title>
<link href="style.css" rel="stylesheet"
type="text/css"></link>
</head>
<body>
<form action="aksi-form.php" method="get">
<div id="lay-form">
<div id="kep-lay-form">
<h1>Form Registrasi</h1>
</div>
<div id="bad-lay-form">
<table>
<tr>
<td class="lbl">Nama</td>
<td><input type="text"
name="nama" placeholder="Masukkan nama .."></td>
</tr>
<tr>
<td class="lbl">Email</td>
<td><input type="text"
name="email" placeholder="Masukkan email .."></td>
</tr>
<tr>
<td class="lbl">Username</td>
<td><input type="text"
name="username" placeholder="Masukkan username .."></td>
</tr>
<tr>
<td class="lbl">Password</td>
<td><input type="password"
name="password" placeholder="Masukkan password .."></td>
VI- 10
Bab 6 Pemrograman PHP
</tr>
<tr>
<td class="lbl"></td>
<td><input id="btn"
type="submit" value="Oke"></td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
2. Simpan pada folder htdocs dan beri nama form.php.
3. Karena file form.php menggunakan css, berikut kode css untuk form tersebut
lalu simpan dengan nama style.css
body{
background:#ECF0F1;
font-family:sans-serif;
font-size:10pt;
color:#232323;
}
#lay-form{
width:500px;
background:#fff;
height:600px;
border-radius:10px 10px 10px 10px;
margin:30px auto;
}
#kep-lay-form{
border-bottom:1px solid #7F8C8D;
height:45px;
}
#kep-lay-form h1{
padding-top:5px;
padding-left:10px;
}
input{
width:300px;
height:30px;
border:1px solid #2ECC71;
margin-bottom:15px;
Bab 6 Pemrograman PHP
VI- 11
padding-left:5px;
}
table{
padding-top:50px;
padding-left:30px;
}
#bad-lay-form{
height:480px;
}
.lbl{
width:125px;
}
#btn{
background:#2ECC71;
margin-top:30px;
}
4. Jika form sudah jadi maka kita akan mulai membuat aksi-form.php untuk
mengecek kevalidan masukannya . Berikut kode php untuk aksi-form.php,
<?php
//menangkap data dari url dan mengubahnya ke variabel
//nama
$nama=$_GET['nama'];
//menangkap data dari url dan mengubahnya ke variabel
//email
$email=$_GET['email'];
//menangkap data dari url dan mengubahnya ke variabel
//username
$username=$_GET['username'];
//menangkap data dari url dan mengubahnya ke variabel
//password
$password=$_GET['password'];
if($_GET['nama']=="" && $_GET['email']=="" &&
$_GET['username']=="" && $_GET['password']==""){
header("location:form.php?kosong=semua");
}else if($_GET['nama']==""){
header("location:form.php?kosong=nama");
}else if($_GET['email']==""){
VI- 12
Bab 6 Pemrograman PHP
header("location:form.php?kosong=email");
}else if($_GET['username']==""){
header("location:form.php?kosong=username");
}else if($_GET['password']==""){
header("location:form.php?kosong=password");
}
?>
5. Coba untuk menginput data pada form tersebut dengan mengosongkan salah
satu data, perhatikan hasilnya
6. Dan bagaimana jika user tidak mengisi apapun? Apa hasilnya
6.5. Array
Dalam PHP, indeks untuk array dapat berupa numerik dan dapat pula berupa
suatu nilai atau yang sering disebut dengan array assosiatif.
Array Berindeks Numerik
Sintaks umum untuk menyatakan suatu array berindeks numerik beserta nilainya
adalah
$nama_array[$key] = value;
Dalam hal ini $key berupa bilangan bulat mulai dari 0, 1, 2, …
Contoh:
$karyawan[0]
$karyawan[1]
$karyawan[2]
$karyawan[3]
=
=
=
=
"Bob";
"Sally";
"Charlie";
"Clare";
Sedangkan berikut ini adalah contoh untuk menampilkan nilai dari suatu array
berindeks numerik.
<?
$karyawan[0] = "Bob";
$karyawan[1] = "Sally";
$karyawan[2] = "Charlie";
$karyawan[3] = "Clare";
echo"Berikut ini adalah 2 orang karyawan saya, yaitu "
.$karyawan[0]."&".$karyawan[1];
echo"<br>Dua orang karyawan saya yang lain adalah "
.$karyawan[2]."&".$karyawan[3];
Bab 6 Pemrograman PHP
VI- 13
Array Assosiatif
Untuk array assosiatif, sintaksnya sama dengan array berindeks numerik namun
perbedaannya adalah pada $key. Pada array assosiatif, $key dapat berupa suatu
string. Berikut ini adalah contohnya.
$gaji["Bob"] = 2000;
$gaji["Sally"] = 4000;
$gaji["Charlie"] = 600;
$gaji["Clare"] = 0;
dan berikut ini adalah contoh kode untuk menampilkan nilai dari array assosiatif
<?
$gaji["Bob"] = 2000;
$gaji["Sally"] = 4000;
$gaji["Charlie"] = 600;
$gaji["Clare"] = 0;
echo "Bob digaji - $" .
$gaji["Bob"] . "<br>"; echo "Sally
digaji - $" . $gaji["Sally"] .
"<br>";
echo "Charlie digaji - $" .
$gaji["Charlie"] . "<br>"; echo "dan Clare
digaji - $" . $gaji["Clare"];
?>
6.6. Perulangan for dan while
Statement WHILE
Statement ini digunakan untuk mengerjakan suatu statement secara berulangulang sampai suatu syarat dipenuhi. Sintaksnya adalah
while (syarat)
{
statement;
statement;
.
.
}
Pada sintaks di atas, selama syarat bernilai TRUE maka statement-statement di
dalam while akan terus dijalankan secara berulang-ulang. Perulangan baru akan
VI- 14
Bab 6 Pemrograman PHP
berhenti apabila syarat bernilai FALSE. Sebelum statement yang diulang-ulang
dilakukan, terlebih dahulu akan dicek syarat nya apakah bernilai TRUE atau
FALSE. Apabila TRUE maka statement akan dijalankan. Sedangkan apabila
FALSE, perulangan akan langsung berhenti. Dengan kata lain, statement dalam
WHILE bisa jadi tidak akan pernah dilakukan, yaitu apabila syaratnya langsung
bernilai FALSE.
Contoh:
<?
$harga_sikat = 1500;
$jumlah_sikat = 10;
echo "<table border=\"1\"
align=\"center\">"; echo
"<tr><td><b>Jumlah
Sikat</b></td>";
echo
"<td><b>Harga</b></tr>
</td>";
while ($jumlah_sikat<= 100 )
{
echo "<tr><td>";
echo $jumlah_sikat; echo "</td><td>";
echo "Rp. ".$harga_sikat*$jumlah_sikat;
echo "</td></tr>";
$jumlah_sikat = $jumlah_sikat + 10;
}
echo "</table>";
?>
Kode di atas akan menampilkan hasil di browser berupa tabel yang berisi jumlah
sikat dan harganya, dengan asumsi harga sebuah sikat adalah Rp. 1.500. Jumlah
sikat yang ditampilkan adalah kelipatan 10 dengan batas sampai 100 buah.
Statement FOR
Statement FOR mirip dengan WHILE yang memiliki sintaks berikut ini
for (inisialisasi counter; syarat; increment/decrement
counter)
{
statement;
.
.
}
Bab 6 Pemrograman PHP
VI- 15
Untuk memperjelas pemahaman tentang FOR, berikut ini adalah contoh kode
dengan for untuk menghasilkan tampilan yang sama dengan contoh while
sebelumnya (tentang jumlah sikat dan harganya). Coba bandingkan dengan kode
contoh while sebelumnya.
Contoh:
<?
$harga_sikat = 1500;
echo "<table border=\"1\" align=\"center\">";
echo "<tr><td><b>Jumlah Sikat</b></td>";
echo "<td><b>Harga</b></td></tr>";
for ($jumlah_sikat = 10; $jumlah_sikat <= 100;
$jumlah_sikat+=10)
{
echo "<tr><td>"; echo $jumlah_sikat;
echo "</td><td>";
echo "Rp. ".$harga_sikat * $jumlah_sikat;
echo "</td></tr>";
}
echo "</table>";
?>
Statement Foreach
Misalkan Anda punya data berupa array assosiatif yang akan diproses secara
berulang-ulang, maka PHP menyediakan statement foreach yang mudah
digunakan.
Sintaksnya adalah:
foreach(variabelarray as kunci => value)
{
statement;
.
.
}
Sebagai contoh, misalkan Anda memiliki 5 orang karyawan dengan usianya
masing-masing yang ditulis dalam kode PHP sebagai berikut
$UsiaKaryawan["Lisa"] =
$UsiaKaryawan["Jack"] =
$UsiaKaryawan["Ryan"] =
$UsiaKaryawan["Rachel"]
VI- 16
"28";
"16";
"35";
= "46";
Bab 6 Pemrograman PHP
$UsiaKaryawan["Grace"] = "34";
Berikut ini adalah contoh kode PHP yang akan menampilkan semua karyawan
beserta usianya dengan menggunakan foreach.
<?
$UsiaKaryawan["Lisa"] = "28";
$UsiaKaryawan["Jack"] = "16";
$UsiaKaryawan["Ryan"] = "35";
$UsiaKaryawan["Rachel"] = "46";
$UsiaKaryawan["Grace"] = "34";
foreach($UsiaKaryawan as $Nama => $umur)
{
echo "Nama Karyawan: $Nama, Usia: $umur"." th <br>";
}
?>
Statement DO WHILE
Statement ini merupakan bentuk modifikasi dari WHILE. Sintaksnya adalah
sebagai berikut
do
{
statement;
.
.
}
while (syarat);
Coba bandingkan dengan sintaks WHILE sebelumnya. Dilihat dari posisi
statement yang diulang,
posisi statement yang diulang pada DO WHILE terletak di atas syarat. Dengan
demikian,
sebelum syarat dicek TRUE atau FALSE nya, statement akan
dikerjakan terlebih dahulu. Sedangkan pada WHILE, sebelum statement yang
diulang dikerjakan, terlebih dahulu syarat akan dicek.
Prinsip kerja DO WHILE sama dengan WHILE yaitu statement akan terus
dikerjakan selama syarat bernilai TRUE dan perulangan akan berhenti apabila
FALSE.
Bab 6 Pemrograman PHP
VI- 17
Perhatikan contoh berikut ini yang membandingkan DO WHILE dengan WHILE
Contoh:
<?
$kue = 0;
while($kue > 1)
{
echo "Mmmmm...Aku suka kue! Nyam..nyam..nyam..";
}
?>
<?
$kue = 0; do
{
echo "Mmmmm... Aku suka kue! Nyam..nyam..nyam..";
} while ($kue > 1);
?>
Pada kode WHILE, teks "Mmmm…. " dan seterusnya tidak akan ditampilkan
karena syaratnya langsung bernilai FALSE (perulangan berhenti). Sedangkan
pada DO WHILE, teks akan ditampilkan
dahulu kemudian perulangan berhenti (syarat bernilai FALSE).
Latihan
Praktikan seluruh kode php yang ada pada Bab 6 ini, dan perhatikan hasilnya dan
catat hal-hal yang baru anda peroleh.
VI- 18
Bab 6 Pemrograman PHP
BAB 7
MERANCANG BASIS DATA
Tujuan Pembelajaran:
Memahami kaidah Perancangan Basis Data
7.1
Pentingnya Perancangan Basis Data yang Baik
7.2
Macam-macam Relasi Tabel
7.3
Memahami Normalisasi
7.4
Latihan Merancang Basis Data
Bab 7 Merancang Basis Data
VII- 1
7.1. Pentingnya Perancangan Basis Data yang Baik
Dalam sebuah aplikasi berbasis web, keberadaan basis data sangatlah penting.
Sebuah situs web akan lebih informatif dan menarik apabila data yang
ditampilkannya selalu diperbeharui. Situs web yang seperti ini biasa disebut situs
yang dinamis. Untuk situs web yang bersifat dinamis, maka diperlukan tempat
penyimpanan data yang disebut dengan basis data(database). Basis Data akan
menyimpan semua data yang diperlukan dalam web dinamis. Data yang tersimpan
ini dapat bertambah, berubah atau dihapus, sesuai kebutuhan. Situs web yang baik
adalah situs yang terpelihara dan data yang ditampilkan selalu diperbaharui.
Dalam proses memperbaharui data, maka diperlukan sebuah basis data yang
dirancang dengan baik sehingga mampu mengikuti perubahan ragam dan metode
penyimpanan data.
Sebuah basis data yang dirancang dengan baik memberikan Anda akses ke up to
date dan informasi yang akurat. Karena desain yang benar sangat penting untuk
mencapai tujuan Anda dalam bekerja dengan database, investasi waktu untuk
mempelajari prinsip-prinsip desain yang baik yang dibutuhkan adalah hal yang
harus dilakukan. Pada akhirnya, Anda akan jauh lebih nyaman dengan database
yang memenuhi kebutuhan Anda dan dapat dengan mudah mengakomodasi
perubahan yang terjadi.
Artikel ini memberikan pedoman untuk perencanaan database. Anda akan belajar
bagaimana untuk memutuskan informasi apa yang Anda butuhkan, bagaimana
membagi informasi itu ke dalam tabel dan kolom yang tepat, dan bagaimana antar
tabel berhubungan satu sama lain. Anda harus membaca artikel ini sebelum Anda
membuat database pertama Anda.
Ada prinsip-prinsip tertentu yang memandu proses desain database. Prinsip
pertama adalah bahwa duplikat informasi (reduncy) adalah buruk, karena akan
boros dalam ruang media penyimpan dan meningkatkan kemungkinan kesalahan
dan inkonsistensi. Prinsip kedua adalah bahwa kebenaran dan kelengkapan
informasi penting. Jika database Anda berisi informasi yang tidak benar, laporan
VII- 2
Bab 7 Merancang Basis Data
yang berasal dari informasi yang berada pada database juga akan berisi informasi
yang salah. Akibatnya, setiap keputusan yang Anda buat yang didasarkan pada
laporan-laporan yang salah.
Sebuah desain database yang baik, harus memiliki syarat:
1. Membagi informasi Anda ke dalam tabel berbasis subjek untuk mengurangi
data yang berlebihan.
2. Memberikan akses informasi yang diperlukan untuk menggabung informasi
dalam tabel bersama-sama sesuai kebutuhan.
3. Membantu dukungan dan memastikan akurasi dan integritas informasi Anda.
4. Mengakomodasi pengolahan data dan kebutuhan pelaporan.
4.1. Macam-macam Relasi Tabel
Dalam sebuah basis data, di dalamnya terdapat tabel-tabel. Satu tabel dengan tabel
yang lainnya dapat saja saling berelasi/berhubungan. Hal ini dilakukan agar
supaya kita dapat mengelompokkan data sesuai dengan karakteristiknya masingmasing dan ketika tabel-tabel ini saling berelasi, kita dapat menarik informasi dari
masing-masing karakter data pada tabelnya masing-masing sehingga informasi
yang tersaji menjadi utuh, menyeluruh dan lengkap.
Perlu kita ketahui sebelumnya untuk pengertian Relasi itu sendiri yaitu adalah
hubungan antara tabel yang mempresentasikan hubungan antar objek di dunia
nyata. Relasi merupakan hubungan yang terjadi pada suatu tabel dengan lainnya
yang mempresentasikan hubungan antar objek di dunia nyata dan berfungsi untuk
mengatur mengatur operasi suatu database. Hubungan yang dapat dibentuk dapat
mencakup 3 macam hubungan
One to One :
Mempunyai pengertian "Setiap baris data pada tabel pertama dihubungkan hanya
ke satu baris data pada tabel ke dua". Contohnya : relasi antara tabel Siswa dan
tabel orang tua. Satu baris siswa hanya berhubungan dengan satu baris orang tua
begitu juga sebaliknya.
One to Many:
Bab 7 Merancang Basis Data
VII- 3
Mempunyai pengertian "Setiap baris data dari tabel pertama dapat dihubungkan
ke satu baris atau lebih data pada tabel ke dua". Contohnya : relasi perwalian
antara tabel guru dan tabel siswa. Satu baris guru atau satu guru bisa berhubungan
dengan satu baris atau lebih mahasiswa
Many to Many:
Mempunyai pengertian "Satu baris atau lebih data pada tabel pertama bisa
dihubugkan ke satu atau lebih baris data pada tabel ke dua". Artinya ada banyak
baris di tabel satu dan tabel dua yang saling berhubungan satu sama lain.
Contohnya : relasi antar tabel siswa dan tabel mata kuliah. Satu baris siswa bisa
berhubungan dengan banyak baris mata pelajaran begitu juga sebaliknya.
7.3. Memahami Normalisasi
Normalisasi adalah Teknik/pendekatan yang digunakan dalam membangun desain
logika database relasional melalui organisasi himpunan data dengan tingkat
ketergantungan fungsional dan keterkaitan yang tinggi sedemikian sehingga
menghasilkan struktur tabel yang normal. Tujuan normalisasi adalah:
1. Minimalisasi redundansi (pengulangan data)
2. Memudahkan identifikasi entitas
3. Mencegah terjadinya anomaly (Mudah berubahnya bentuk form)
Proses normalisasi dilakukan pada tabel yang belum normal, seperti contoh tabel
berikut,
Salah satu dari ketidaknormalan pada tabel di atas adalah ada beberapa kolom
pada baris tertentu datanya tidak lengkap. Kemudian ada beberapa kolom, atau
VII- 4
Bab 7 Merancang Basis Data
dalam basis data disebut atribut, yang sejenis yang dibuat berulang seperti pada
contoh tabel di atas adalah kolom Kerusakan1 sampai Kerusakan 3.
Normalisasi Pertama (1NF/ First Normal Form)
Karena form tersebut tidak normal, maka kita akan menjadikan database tersebut
menjadi INF (First Normal Form) :
Suatu relasi disebut memenuhi bentuk normal pertama (1NF) jika dan hanya jika
setiap atribut dari relasi tersebut hanya memiliki nilai tunggal dan tidak ada
pengulangan grup atribut dalam baris.
Bentuk 1NF tidak boleh mengandung
grup atribut yang berulang.
•
Setiap data dibentuk dalam flat file, data dibentuk dalam satu record demi
satu record nilai dari field berupa “atomic value”.
•
Tidak ada set attribute/kolom yang berulang atau bernilai ganda.
•
Tiap attribute/kolom hanya memiliki satu pengertian.
Bentuk normal pertama dari tabel di atas adalah
Kolom kerusakan1 sampai 3 diganti dengan satu kolom keterangan.
Normalisasi Ke Dua (2 NF /Second Normal Form)
Bentuk normal kedua mempunyai syarat yaitu bentuk data telah memenuhi
kriteria bentuk normal kesatu. Atribute bukan kunci haruslah bergantung secara
fungsi pada kunci utama/primary key. Sehingga untuk membentuk normal kedua
haruslah sudah ditentukan kunci-kunci field. Kunci field haruslah unik dan dapat
mewakili atribute lain yg menjadi anggotanya.
Dari contoh Table Rekapitulasi GIN pada normalisasi pertama terlihat bahwa
kunci utama/ primary key yaitu NO_GIN, dan yang merupakan kunci tamu/
foreign key yaitu ID_Staff, Kode_Unit, dan Kode_barang. Pada normalisasi kedua
Bab 7 Merancang Basis Data
VII- 5
ini semua foreign key pada Table Rekapitulasi GIN dipecah menjadi beberapa 3
table.
Bentuk Second Normal Form / Normalisasi Kedua:
Normalisasi Ketiga (3rd NF/Normal Form)
Untuk mencapai bentuk normal ketiga syaratnya adalah:
• Sudah berada dalam bentuk normal kedua (2NF)
• Tidak ada ketergantungan transitif (dimana atribut bukan kunci tergantung
pada atribut bukan kunci lainnya).
Untuk kasus di atas, normalisasi sudah selesai sampai tahap normal kedua.
Contoh Tabel berikut memenuhi 2NF, tapi tidak memenuhi 3NF:
Tabel: Mahasiswa
NIM
Nama
alm_jalan
alm_kota
Alm_Provinsi Alm_odepos
karena masih terdapat atribut non primary key (yakni alm_kota dan alm_Provinsi)
yang memiliki ketergantungan terhadap atribut non primary key yang lain (yakni
alm_kodepos): alm_kodepos→ {alm_Provinsi, alm_kota} , sehingga tabel
tersebut perlu didekomposisi menjadi:
•
Mahasiswa (Nrp, nama, alm_jalan, alm_kodepos)
•
Kodepos (alm_kodepos, alm_provinsi, alm_kota)
VII- 6
Bab 7 Merancang Basis Data
7.4 Latihan Merancang Basis Data
Rancanglah tabel yang belum normal berikut menggunakan kaidah normalisasi 1
sampai 3.
No_Mhs
2325
Nama_Mhs
Badrun
Jurusan
TE
Kode_MK
BM3301
BM3002
2326
Burhan
TE
Mobile
Application
Pemrograman
Web
Kode_Dosen
Nama_dosen
Nilai
BM221
Ahmad
A
BM301
Ratna
A-
BM3201
Networking
BM210
Darta
B
TT3201
SKSO
TT301
Wahyu
A
TT331
Renny
B
TT221
Ridwan
C
TT3001
TT3102
Bab 7 Merancang Basis Data
Nama_MK
Jaringan
Broadband
Satelit
VII- 7
VII- 8
Bab 7 Merancang Basis Data
BAB 8
MEMBUAT BASIS DATA DENGAN
MySQL
Tujuan Pembelajaran:
Memahami kaidah Pembuatan Basis Data menggunakan MySQL
8.1
Pengenalan MySQL
8.2
Bahasa Pemrograman SQL
8.3
Pemrograman SQL Lanjut dengan MySQL
Bab 8 Membuat Basis Data dengan MySQL
VII- 1
8.1. Pengenalan MySQL
MySQL merupakan salah satu DBMS yang bersifat freeware, sehingga menjadi
popular dikalangan pengguna database. Selain karena Free MySQL juga
merupakan DBMS yang relatif ringan dan mudah digunakan. Ada beberapa
software yang bisa digunakan untuk menjalankan service MySQL, diantaranya
WAMP, PhpTriad dan XAMPP. XAMPP merupakan yang paling popular karena
masih terus dikembangkan sampai saat ini. XAMPP merupakan program paket
yang didalamnya terdapat beberapa software yang digabungkan menjadi satu.
Dalam XAMPP sendiri didalamnya terdapat 5 software yang berbeda (MySql,
Apache, FileZilla, Mercury dan Tomcat). Jadi ketika menginstall XAMPP kita
tidak perlu lagi menginstall Apache dan MySQL secara terpisah.
8.2. Bahasa Pemrograman SQL
Dalam dunia basis data dikenal bahasa pemrograman Structured Query
Languange (SQL). SQL adalah sebuah bahasa yang digunakan untuk mengakses
data dalam basis data relasional. Bahasa ini secara de facto merupakan bahasa
standar yang digunakan dalam manajemen basis data relasional. Saat ini hampir
semua server basis data yang ada mendukung bahasa ini untuk melakukan
manajemen datanya.
Sejarah
Sejarah SQL dimulai dari artikel seorang peneliti dari IBM bernama Jhonny
Oracle yang membahas tentang ide pembuatan basis data relasional pada bulan
Juni 1970. Artikel ini juga membahas kemungkinan pembuatan bahasa standar
untuk mengakses data dalam basis data tersebut. Bahasa tersebut kemudian diberi
nama SEQUEL (Structured English Query Language).
Setelah terbitnya artikel tersebut, IBM mengadakan proyek pembuatan basis data
relasional berbasis bahasa SEQUEL. Akan tetapi, karena permasalahan hukum
mengenai penamaan SEQUEL, IBM pun mengubahnya menjadi SQL.
Implementasi basis data relasional dikenal dengan System/R.
VII- 2
Bab 8 Membuat Basis Data dengan MySQL
Di akhir tahun 1970-an, muncul perusahaan bernama Oracle yang membuat server
basis data populer yang bernama sama dengan nama perusahaannya. Dengan
naiknya kepopuleran John Oracle, maka SQL juga ikut populer sehingga saat ini
menjadi standar de facto bahasa dalam manajemen basis data.
Standarisasi
Standarisasi SQL dimulai pada tahun 1986, ditandai dengan dikeluarkannya
standar SQL oleh ANSI. Standar ini sering disebut dengan SQL86.Standar
tersebut kemudian diperbaiki pada tahun 1989 kemudian diperbaiki lagi pada
tahun 1992. Versi terakhir dikenal dengan SQL92. Pada tahun 1999 dikeluarkan
standar baru yaitu SQL99 atau disebut juga SQL99, akan tetapi kebanyakan
implementasi mereferensi pada SQL92.
Saat ini sebenarnya tidak ada server basis data yang 100% mendukung SQL92.
Hal ini disebabkan masing-masing server memiliki dialek masing-masing.
Pemakaian Dasar
Secara umum, SQL terdiri dari dua bahasa, yaitu Data Definition Language
(DDL) dan Data Manipulation Language (DML). Implementasi DDL dan DML
berbeda untuk tiap sistem manajemen basis data, namun secara umum
implementasi tiap bahasa ini memiliki bentuk standar yang ditetapkan ANSI.
Artikel ini akan menggunakan bentuk paling umum yang dapat digunakan pada
kebanyakan sistem manajemen basis data.
8.3. Pemrograman SQL Lanjut dengan MySQL
MySQL adalah sebuah implementasi dari sistem manajemen basisdata relasional
(RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General
Public License). Setiap pengguna dapat secara bebas menggunakan MySQL,
namun dengan batasan perangkat lunak tersebut tidak boleh dijadikan produk
turunan yang bersifat komersial. MySQL sebenarnya merupakan turunan salah
satu konsep utama dalam basisdata yang telah ada sebelumnya; SQL (Structured
Query Language). SQL adalah sebuah konsep pengoperasian basis data, terutama
Bab 8 Membuat Basis Data dengan MySQL
VII- 3
untuk pemilihan atau seleksi dan pemasukan data, yang memungkinkan
pengoperasian data dikerjakan dengan mudah secara otomatis.
Kehandalan suatu sistem basisdata (DBMS) dapat diketahui dari cara kerja
pengoptimasi-nya dalam melakukan proses perintah-perintah SQL yang dibuat
oleh pengguna maupun program-program aplikasi yang memanfaatkannya.
Sebagai peladen basis data, MySQL mendukung operasi basisdata transaksional
maupun operasi basisdata non-transaksional. Pada modus operasi nontransaksional, MySQL dapat dikatakan unggul dalam hal unjuk kerja
dibandingkan perangkat lunak peladen basisdata kompetitor lainnya. Namun pada
modus non-transaksional tidak ada jaminan atas reliabilitas terhadap data yang
tersimpan, karenanya modus non-transaksional hanya cocok untuk jenis aplikasi
yang tidak membutuhkan reliabilitas data seperti aplikasi blogging berbasis web
(wordpress), CMS, dan sejenisnya. Untuk kebutuhan sistem yang ditujukan untuk
bisnis sangat disarankan untuk menggunakan modus basisdata transaksional,
hanya saja sebagai konsekuensinya unjuk kerja MySQL pada modus transaksional
tidak secepat unjuk kerja pada modus non-transaksional.
MySQL pada awalnya diciptakan pada tahun 1979, oleh Michael "Monty"
Widenius, seorang programmer komputer asal Swedia. Monty mengembangkan
sebuah sistem database sederhana yang dinamakan UNIREG yang menggunakan
koneksi low-level ISAM database engine dengan indexing. Pada saat itu Monty
bekerja pada perusahaan bernama TcX di Swedia.
TcX pada tahun 1994 mulai mengembangkan aplikasi berbasis web, dan
berencana menggunakan UNIREG sebagai sistem database. Namun sayangnya,
UNIREG dianggagap tidak cocok untuk database yang dinamis seperti web.
TcX kemudian mencoba mencari alternatif sistem database lainnya, salah satunya
adalah mSQL (miniSQL). Namun mSQL versi 1 ini juga memiliki kekurangan,
yaitu tidak mendukung indexing, sehingga performanya tidak terlalu bagus.
VII- 4
Bab 8 Membuat Basis Data dengan MySQL
Dengan tujuan memperbaiki performa mSQL, Monty mencoba menghubungi
David Hughes (programmer yang mengembangkan mSQL) untuk menanyakan
apakah ia tertarik mengembangkan sebuah konektor di mSQL yang dapat
dihubungkan dengan UNIREG ISAM sehingga mendukung indexing. Namun saat
itu Hughes menolak, dengan alasan sedang mengembangkan teknologi indexing
yang independen untuk mSQL versi 2.
Dikarenakan penolakan tersebut, David Hughes, TcX (dan juga Monty) akhirnya
memutuskan untuk merancang dan mengembangkan sendiri konsep sistem
database baru. Sistem ini merupakan gabungan dari UNIREG dan mSQL (yang
source codenya dapat bebas digunakan). Sehingga pada May 1995, sebuah
RDBMS baru, yang dinamakan MySQL dirilis.
David Axmark dari Detron HB, rekanan TcX mengusulkan agar MySQL di ‘jual’
dengan model bisnis baru. Ia mengusulkan agar MySQL dikembangkan dan dirilis
dengan gratis. Pendapatan perusahaan selanjutnya di dapat dari menjual jasa
“support” untuk perusahaan yang ingin mengimplementasikan MySQL. Konsep
bisnis ini sekarang dikenal dengan istilah Open Source.
Pada tahun 1995 itu juga, TcX berubah nama menjadi MySQL AB, dengan
Michael Widenius, David Axmark dan Allan Larsson sebagai pendirinya. Titel
“AB” dibelakang MySQL, adalah singkatan dari “Aktiebolag”, istilah PT
(Perseroan Terbatas) bagi perusahaan Swedia.
MySQL memiliki beberapa keistimewaan, antara lain :
•
Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi
seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan
masih banyak lagi.
•
Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai
perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat
digunakan secara gratis.
Bab 8 Membuat Basis Data dengan MySQL
VII- 5
•
Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam
waktu yang bersamaan tanpa mengalami masalah atau konflik.
•
'Performance tuning', MySQL memiliki kecepatan yang menakjubkan
dalam menangani query sederhana, dengan kata lain dapat memproses
lebih banyak SQL per satuan waktu.
•
Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya,
seperti signed / unsigned integer, float, double, char, text, date, timestamp,
dan lain-lain.
•
Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh
yang mendukung perintah Select dan Where dalam perintah (query).
•
Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level
subnetmask, nama host, dan izin akses user dengan sistem perizinan yang
mendetail serta sandi terenkripsi.
•
Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam
skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60
ribu tabel serta 5 miliar baris. Selain itu batas indeks yang dapat
ditampung mencapai 32 indeks pada tiap tabelnya.
•
Konektivitas.
MySQL
dapat
melakukan
koneksi
dengan
klien
menggunakan protokol TCP/IP, Unix soket (UNIX), atau Named Pipes
(NT).
•
Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan
menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa
Indonesia belum termasuk di dalamnya.
•
Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai
aplikasi dan bahasa pemrograman dengan menggunakan fungsi API
(Application Programming Interface).
•
Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool)
yang dapat digunakan untuk administrasi basis data, dan pada setiap
peralatan yang ada disertakan petunjuk online.
•
Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam
menangani ALTER TABLE, dibandingkan basis data lainnya semacam
PostgreSQL ataupun Oracle.
VII- 6
Bab 8 Membuat Basis Data dengan MySQL
Kelebihan Dan kekurangan MySQL dibanding RDBMS Lain
Hal paling mendasar yang menjadikan MySQL pilihan utama sebagai database
yang digunakan adalah karena MySQL menggunakan Lisensi GPL dan
multiplatform, sehingga lebih disukai para mahasiswa karena tidak membutuhkan
biaya besar dalam membuat aplikasi serta tidak harus tergantung pada OS
Windows ataupun Linux karena dapat dijalankan pada kedua OS tersebut dan
beberapa OS lainnya. Tapi alasan tersebut tidaklah cukup untuk menjadikan
MySQL sebagai RDBMS yang akan digunakan. Berikut keunggulan dan
kekurangan
Keunggulan
•
Berlisensi GPL dan Multi Platform.
•
Dapat diintegrasikan dengan beberapa bahasa Pemrograman seperti .Net,
Java, Python, Perl yang merupakan bahasa pemrograman yang paling
dominan di kalangan programmer.
•
Mendukung ODBC untuk sistem operasi Windows sehingga bisa
digunakan aplikasi yang berjalan diwindows.
•
Bisa dijalankan pada spesifikasi hardware yang rendah karena lebih hemat
resource memory (dibandingkan database lain) sehingga mudah digunakan
untuk bahan pembelajaran.
•
MySQL dapat
mendeteksi
pesan
kesalahan
pada
klien
dengan
menggunakan lebih dari 20 bahasa meskipun bahasa indonesia belum
termasuk didalamnya.
Kekurangan
•
Banyak
mengklaim
kurang
support
terhadap
pemrograman
Visual/Desktop, sehingga sedikit yang menggunakan untuk aplikasi visual.
•
Karena berlisensi GPL sehingga sulit mendapatkan update untuk problem
yang urgent, sehingga perusahaan skala menengah keatas lebih memilih
RDBMS berlisensi dan disupport seperti Oracle dan MS SQL Server
•
Sangat diragukan dalam menangani data skala besar, karena ada beberapa
opini yang pro dan kontra terhadap kemampuan MySQL terhadap
pengolahan data yang besar.
Bab 8 Membuat Basis Data dengan MySQL
VII- 7
Kemampuan MySQL
Berikut Kemampuan MySQL yang tidak kalah dengan RDBMS lain seperti
Oracle dan SQL Server
1. Memiliki kecepatan
yang menakjubkan dalam menangani query
sederhana,dengan kata lain dapat memproses lebih banyak SQL per satuan
waktu.
2. Memiliki lebih banyak type data seperti : signed/unsigned integer yang
memiliki panjang data sebesar 1,2,3,4 dan 8 byte, FLOAT, DOUBLE,
CHAR, VARCHAR, TEXT, BLOB, DATE, TIME, DATETIME,
TIMESTAMP, YEAR, SET dan tipe ENUM.
3. Mendukung field yang dijadikan Index, dengan maksimal 32 index dalam
satu tabel. *
4. MYSQL memiliki beberapa lapisan keamanan, seperti subnetmask, nama
host, dan izin akses user dengan system perijinan yang mendetail serta
sandi/password terenkripsi.
5. Konektivitas , MySQL dapat melakukan koneksi dengan klien
menggunakan protokol TCP/IP ,Unix soket (UNIX),atau Named
Pipes(NT).
6. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam
waktu yang bersamaan tanpa mengalami masalah atau konflik
7. Command and function, MySQL memiliki fungsi dan operator secara
penuh yang mendukung perintah select dan where dalam query.
8. Structure Table, MySQL memiliki struktur tabel yang lebih fleksibel
dalam menangani ALTER TABLE dibandingkan DBMS lainnya.
9. Mendukung penuh terhadap kalimat SQL GROUP BY dan ORDER BY.
Mendukung terhadap fungsi penuh ( COUNT(),COUNT(), DISTINCT()
AVG(), STD(), SUM(), MAX() dan MIN() ).
Struktur MySQL
MySQL Sama dengan bahasa pemrogaman lainnya yang juga sama-sama
memiliki tipe data.
Tipe Data String
char, memiliki panjang 255
VII- 8
Bab 8 Membuat Basis Data dengan MySQL
varchar, memiliki panjang 255
tinytext, memiliki panjang 255
text, tidak terbatas
mediumtext, 1 juta
longtext, 4 Milyar
Tipe Data Numerik
int, -2 M sampai dengan 4 M
tinyint, -128 sampai dengan 255
mediumint, -8 Juta sampai dengan 8 Juta
bigint, -92 Triliyun sampai dengan 92 Triliyun
float, bilangan desimal positif, bilangan real
double, bilangan desimal negatif dan positif
Tipe Data Date dan TIme
date, hanya memuat tanggal saja, dengan formatnya seperti ini tahun-bulantanggal
time,
hanya
memuat
waktu
saja,
formatnya
HH:MM:SS
(Jam:Menit:Detik) datetime, memuat tanggal dan waktu, formatnya TahunBulan-Hari Jam:Menit:Detik year.
Tipe Key
Primary Key, Kunci yang menghubungkan antara 1 table dengan table lainnya
Auto Increment
Auto Increment menyebabkan pertambahan nilai urutan secara otomatis, suatu
record memiliki nilai 1, kemudian jika ada record yang lain lagi di insertkan ke
dalam database, maka urutannya akan menjadi 2 dan begitu seterusnya.
Bab 8 Membuat Basis Data dengan MySQL
VII- 9
Syntax MySQL
Perintah-perintah standar dalam SQL dapat diklasifikasikan menjadi empat bagian
yaitu Data Definition Language (DDL), Data Manipulation Language (DML),
Data Query Language (DQL) dan Data Control Language (DCL).
•
Data Definition Language (DDL) adalah perintah-perintah SQL yang
digunakan untuk mendefinisikan struktur dan skema database. Perintahperintah SQL yang masuk klasifikasi ini antara lain adalah CREATE
(membuat obyek di database), ALTER (merubah struktur database),
DROP (menghapus obyek database), TRUNCATE (menghapus semua
record dari sebuah tabel termasuk semua ruang yang dialokasikan),
COMMENT (menambahkan komentar ke kamus data | data dictionary)
dan RENAME (memberi nama ulang sebuah obyek).
•
Data Manipulation Language (DML) adalah perintah-perintah SQL yang
digunakan untuk memanipulasi data di dalam obyek database. Perintahperintah SQL yang masuk klasifikasi ini antara lain adalah SELECT
(mengambil data dari database), INSERT (memasukkan data ke tabel),
UPDATE (memperbarui data yang ada di sebuah tabel), DELETE
(menghapus semua record dari sebuah tabel), MERGE-UPSERT (operasi
insert dan update), CALL (memanggil PL/SQL atau subprogram Java),
EXPLAIN PLAN (menjelaskan jalur akses data) dan LOCK TABLE
(mengontrol konkurensi).
VII- 10
Bab 8 Membuat Basis Data dengan MySQL
•
Data Control Language (DCL) adalah perintah-perintah SQL yang
digunakan untuk mengontrol data dan server database. Perintah-perintah
SQL yang masuk klasifikasi ini antara lain adalah GRANT (memberikan
hak akses pengguna ke database) dan REVOKE (mencabut hak akses yang
diberikan dengan perintah GRANT).
•
Transaction Control Language (TCL) adalah perintah-perintah SQL yang
digunakan untuk mengontrol pemrosesan transaksional di dalam database.
Perintah-perintah SQL yang masuk klasifikasi ini antara lain adalah
COMMIT
(menerapkan
transaksi
dengan
menyimpan
perubahan
database), ROLLBACK (mengembalikan database ke kondisi awal sejak
terakhir COMMIT), SAVEPOINT (mengidentifikasi titik dalam transaksi
yang nanti bisa diputar kembali) dan SET TRANSACTION (Mengubah
opsi transaksi seperti tingkat isolasi dan segmen rollback apa yang
digunakan).
Untuk lebih memahami penggunaan perintah pada MySQL, berikut adalah contoh
aplikasinya yang harus dipraktikan.
PRAKTIKUM DATABASE MYSQL: Mengenal perintah-perintah SQL
1. Buka xampp control panel dan aktifkan MySQL
Bab 8 Membuat Basis Data dengan MySQL
VII- 11
2. Buka command prompt
3. Beri perintah
cd\xampp\mysql\bin lalu tekan enter, maka akan muncul
4. Lalu untuk masuk ke user root, ketikan mysql –u root –p akan muncul
langsung tekan enter karena password root secara default kosong. Maka
akan muncul prompt mysql seperti gambar berikut
5. Masukan perintah berikut
VII- 12
Bab 8 Membuat Basis Data dengan MySQL
Apa hasil ekseskusi perintah di atas?
6. Pembuatan Database. Pada mysql prompt, buat database buku dengan
perintah
mysql>create database buku;
lalu tekan enter
7. Tulis kembali perintah
mysql>show databases;
perhatikan di daftar database yang muncul apakah sudah ada database
buku.
8. Membuat tabel pada database buku. Tulis perintah berikut untuk masuk ke
database buku
mysql>use buku;
maka akan muncul pesan : Database changed
9. Tabel pertama yang akan dibuat adalah Tabel buku_alamat dengan
struktur sebagai berikut :
10.
Field
Type
Length
Keterangan
No
int
3
Primary Key
Nama
varchar
35
Alamat
varchar
60
Email
varchar
40
No_telp
varchar
15
Bab 8 Membuat Basis Data dengan MySQL
VII- 13
Skrip sqlnya adalah sebagai berikut :
Kalau tidak ada penulisan perintah yang salah, maka akan muncul Query
OK, 0 rows affected (0.22 sec)
11. Sekarang, tabel buku_alamat kita isi dengan data berikut
No Nama
Alamat
Email
No_telp
1
Sugeng
Jakarta
[email protected] 087654567876
2
Ridwan
Depok
[email protected] 067898765987
Perintah SQL nya adalah :
mysql>SELECT * FROM buku_alamat;
mysql>LOAD DATA INFILE “data_alamat.sql”
->INTO TABLE buku_alamat;
VII- 14
Bab 8 Membuat Basis Data dengan MySQL
BAB 9
AKSES BASIS DATA MySQL DENGAN
PHP
Tujuan Pembelajaran:
Memahami kaidah Pengaksesan Basis Data MySQL dengan PHP
9.1
Mengakses Basis Data MySQL
9.2
Mengirim Email
9.3
Mengunduh dan Mengunggah File
9.4
Membuat Otentifikasi User
9.5
Membuat Buku Tamu
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 1
9.1. Mengakses Basis Data MySQL
Dalam sebuah web yang dinamis, basis data adalah salah satu komponen yang
paling utama harus ada. Basis data ini terletak di sisi server yang akan diakses
oleh user yang ada di sisi client. Dalam sebuah halaman web, pengaksesan basis
data ini dilakukan oleh script/kode program yang berjalan di sisi server. Salah satu
bahasa pemrograman yang dapat digunakan adalah PHP. Melalui kode program
yang ditulis menggunakan bahasa pemrograman PHP, kita dapat mengakses data
yang ada di dalam server. Setiap kali kita akan mengakses data ke database, maka
script ini akan selalu dipanggil.
Pada saat mengakses database di server, misalnya database MySQL, pada PHP
harus dilakukan tahap-tahap sebagai berikut
1. Membuka koneksi ke server database
2. Bekerja dengan data di dalam server database
3. Tutup koneksi
PHP telah menyediakan fungsi mysqli_connect() untuk membuat koneksi
antara PHP dan MySQL. Format penulisan sintaksnya adalah
mysql_connect(“host”,”user_mysql”,”password_mysql”);
Sintaks di atas dapat dijelaskan sebagai berikut :
hostname : merupakan alamat server yang menyediakan database MySQL Anda.
Alamat ini dapat diisi menggunakan alamat IP ataupun nama komputernya.
Apabila server MySQL diletakan pada komputer local, anda dapat menggunakan
alamat localhost(IP : 127.0.0.1) sebagai alamat pembaca local.
user_mysql : merupakan user pada database MySQL yang anda miliki dalam
database MySQL. MySQL akan selalu menggunakan metode seperti ini karena ia
sendiri merupakan database server yang menuntut keamanan data setiap
penggunanya.
password_mysql : adalah password user MySQL yang anda miliki.
Praktik :
IX- 2
Bab 9 Akses Basis Data MySQL dengan PHP
1. Buka windows explorer dan cari direktori xampp/htdocs
2. Padas folder htdocs, buat folder baru dengan nama Latihan
3. Tuliskan script(pakai Notepad atau word processor lain) koneksi dengan
database MySQL pada komputer local/localhost berikut dan simpan pada
folder Latihan yang telah dibuat di langkah kedua di atas :
<html>
<head>
<title>Database</title>
</head>
<body>
<?
$link = mysql_connect('localhost', 'root', '');
if (!$link) {
die('Gagal Koneksi dengan database:
'.mysql_error());
}
echo Berhasil Koneksi dengan database';
mysql_close($link);
?>
</body>
</html>
4. Simpan script di atas dengan nama file database.php kemudian simpan di
folder Latihan yang telah dibuat di atas.
5. Bila belum diaktifkan, aktifkan terlebih dahulu server melalui xampp control
panel.
6.
Buka web browser anda dan pada address bar ketikan alamat berikut :
http://localhost/Latihan/database.php
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 3
Pertanyaan:
1. Apa
yang
muncul
di
web
browser
setelah
mengakses
alamat
http://localhost/Latihan/database.php
2. Buka kembali xampp control panel, lalu non aktifkan MySQL, lalu buka
kembali http://localhost/Latihan/database.php , apa sekarang yang muncul
di web browser?
3. Berdasarkan script di atas, sebutkan,
a.
Hostnya apa
b.
Usernya siapa
c.
Apa passwordnya
Koneksi ke Database
Untuk contoh di atas, kita baru mengkoneksikan PHP dengan server, sedangkan di
server terdiri atas beberapa database. Setelah berhasil terkoneksi dengan server,
maka langkah selanjutnya adalah koneksi dengan database. Fungsi untuk
melakukan koneksi ke database menggunakan :
mysql_select_db(nama_database)
Berikut adalah contoh script untuk koneksi ke server kemudian ke database
koneksi, dengan terlebih dahulu kita membuat sebuah database dengan nama
koneksi menggunakan fungsi,
mysql_create_db(koneksi)
Praktik:
1. Tulis script berikut menggunakan text editor yang anda miliki(Notepad
misalnya)
1. <?php
2. $user=root;
3. $pass='';
4. $koneksi=mysql_connect("localhost","$user","$pass"
)
IX- 4
Bab 9 Akses Basis Data MySQL dengan PHP
5. or die("Tidak dapat koneksi ke server karena
:".mysql_error());
6. echo "Koneksi ke server berhasil dilakukan<br>";
7.
8. if(mysql_select_db(koneksi))
9. {
10.
echo "Koneksi database berhasil<br>";
11.
}
12.
else if(mysql_create_db(koneksi))
13.
{
14.
echo"Database koneksi berhasil dibuat<br> ";
15.
}
16.
else
17.
{
18.
echo"Database tidak dapat diaktifkan ";
19.
}
20.
mysql_close($koneksi);
21.
?>
2. Setelah selesai, simpan script di atas dengan nama select_db.php dan simpan
di folder Latihan.
3. Buka web browser anda dan ketikan pada address bar alamat :
http://localhost/Latihan/select_db.php
4. Apa pesan yang muncul pada web browser dan jelaskan!!
Tabel pada Database Koneksi
Database koneksi yang akan kita buat, adalah untuk membuat aplikasi web
halaman berita yang biasanya ditampilkan dalam sebuah portal On line, langkah
selanjutnya adalah dengan membuat tabel berita pada database koneksi yang telah
dibuat tadi.
Praktik
1.
Buka command Prompt dan ganti direktori dengan perintah
cd\xampp\mysql\bin
2.
Masuk ke database MySQL dengan login sebagai root
C:\xampp\mysql\bin>mysql –u root –p
Password :
3.
Tuliskan script membuat tabel berita pada prompt mysql berikut
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 5
4. Membuat Form Masukan Berita, tuliskan script php berikut ini,
<html>
<head>
<title>Halaman Input Berita</title>
</head>
<body>
<form name="form1" method="post"
action="fm_simberita.php">
<table width="75%" border="0" cellpadding="0"
cellspacing="0" bgcolor="#FFFFCC">
<tr bgcolor="FFFFCC">
<td width="76%" bgcolor="FFFF66"><strong>Halaman Pemasukan
Isi Berita</strong></td>
</tr>
<tr>
<td>Judul Berita :</td>
</tr>
<tr>
<td><input name="fm_judul" type="text"
id="fm_judul" size="35" maxlength="40"></td>
</tr>
<tr>
<td>Isi Berita :</td>
</tr>
<tr>
<td><textarea name="fm_berita" cols="30" rows="5"
id="fm_berita">
</textarea></td>
</tr>
<tr>
<td><input type="submit" name="Submit"
value="Simpan">
<input type="reset" name="Submit2" value="Baru">
IX- 6
Bab 9 Akses Basis Data MySQL dengan PHP
<input name="Button" type="button"
onClick="parent.location='fm_lihatberita.php'"
value="Lihat ";>
</td>
</tr>
</table>
</form>
</body>
</html>
Membuat Script Simpan Data Berita
Pada praktik sebelumnya, kita sudah membuat halaman input yang terdiri dari dua
buah text field. Setelah halaman tersebut selesai dibuat, tugas anda adalah
membuat sebuah halaman yang menyimpan data yang anda masukan pada form
input data.
Jadi, saat menyimpan, semua data yang masuk pada suatu Form Input akan
ditransfer ke dalam database MySQL menggunakan koneksi sendiri yang
dihubungkan dengan alamat pada form serta dikirimkan dengan metode POST
yang ditandai dengan :
<form name=”form1” method=”post” action=”fm_simberita.php”>
Form akan menyimpan data dalam sebuah variable, yang ditandai dengan script :
<input name="fm_judul" type="text" id="fm_judul" size="35"
maxlength="40">
………………
<textarea name="fm_berita" cols="30" rows="5"
id="fm_berita"> </textarea>
Variable tersebut akan mengantarkannya ke dalam halaman berisi script PHP.
Berikut adalah scriptnya, simpan dengan nama fm_simberita.php.
<?php
include "fm_connect.php";
$fm_tanggal=date('Y-m-d');
$sql="INSERT INTO berita(judul,berita,tanggal)
VALUES('$fm_judul','$fm_berita','$fm_tanggal')";
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 7
if(mysql_query($sql))
{
echo "Data telah masuk dalam tabel";
}
else
{
echo "Data tidak dapat dimasukkan";
}
mysql_close($koneksi);
include "fm_inberita.php";
?>
Pada script di atas kita menggunakan sebuah pemanggilan file bernama
fm_connect.php untuk menghubungkan ke dalam server dan mengaktifkan
database koneksi pada MySQL. Berikut adalah isi file tersebut :
<?php
$user=root;
$pass='';
$koneksi=mysql_connect("localhost","$user","$pass")
or die("Tidak dapat koneksi ke server");
mysql_select_db(koneksi) or die("Database tidak dapat
dibuka");
?>
Simpan script di atas dengan nama file fm_connect.php.
Selain itu, kita menggunakan variable fm_tanggal yang digunakan untuk
menentukan tanggal sekarang. Tanggal ini akan disimpan ke dalam database
setiap memasukan data.
$fm_tanggal=date(‘Y-m-d’);
Inti dari script fm_simberita.php adalah membaca semua data dari halaman
fm_inberita.php yang terdefinisi pada variable. Selanjutnya data pada variable
tersebut dibaca dan dikirim ke server MySQL menggunakan script :
IX- 8
Bab 9 Akses Basis Data MySQL dengan PHP
$sql="INSERT INTO berita(judul,berita,tanggal)
VALUES('$fm_judul','$fm_berita','$fm_tanggal')";
Untuk menghantarkan isi berita yang masuk, kita memerlukan sebuah fungsi PHP
untuk menjalankan query SQL tersebut yaitu mysql_query(). Sintaks
dasarnya adalah :
mysql_query(“perintah_sql”);
Sebagai contoh, fungsi tersebut diimplementasikan dengan melakukan eksekusi
query SQL bervariable sql seperti berikut :
if(mysql_query($sql))
{
echo "Data telah masuk dalam tabel";
}
else
{
echo "Data tidak dapat dimasukkan";
}
Untuk lebih jelasnya jalankan halaman utama (fm_inberita.php) dan lakukan
input berita dan isikan beberapa data sesuai dengan teks isinya.
Setelah berita berhasil diinputkan maka kita perlu halaman untuk menampilkan
dari berita yang telah diinputkan. Halaman ini nantinya akan dibagi dua yaitu
halaman penampil utama dan penampil khusus yang berguna untuk melihat berita
secara lengkap. Berikut script yang harus diketikan, simpan dengan nama file
fm_lihatberita.php.
</head>
<body>
<p align="center"><strong>BERITA TERBARU</strong>
<HR>
<UL type="square">
<?php
include "fm_connect.php";
$sql_berita="SELECT * FROM berita ORDER BY id DESC";
$qr_berita=msql_query("$sql_berita");
while($hs_berita=mysql_fetch_array($qr_berita))
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 9
{
echo "<LI><B>$hs_berita[judul]</B></LI><BR>";
echo substr("$hs_berita[berita]",0,80);
echo "<a
href=fm_detailberita.php?no=$hs_berita[id]>[Detail]</a>";
}
?>
</UL>
</body>
</html>
fm_detailberita.php
<html>
<head>
<title>Menampilkan Berita</title>
</head>
<body>
<p align="center"><strong><BERITA TERBARU</strong>
<HR>
<?php
include "fm_connect.php";
$sql_berita="SELECT * FROM berita WHERE id='$no' ORDER BY id
DESC";
$qr_berita=mysql_query($sql_berita);
while($hs_berita=mysql_fetch_array($qr_berita))
{
echo "<B>$hs_berita[judul]
[$hs_berita[tanggal]]</B><BR>";
echo "$hs_berita[berita]";
}
?>
</body>
</html>
9.2. Mengirim Email
Ketika seorang user melakukan pendaftaran akun pada suatu website, secara
otomatis biasanya website tersebut mengirim email yang memberitahukan jika
user tersebut telah terdaftar, dan perlu dilakukan aktivasi sebelum dapat
digunakan. Begitu juga ketika pemberitahuan akan adanya news update, seorang
admin website secara otomatis mengirimkan berita melalui email secara otomatis.
Dasar Pengiriman Email
IX- 10
Bab 9 Akses Basis Data MySQL dengan PHP
Untuk mengirim email melalui PHP, kita hanya perlu memahami fungsi mail()
yang memiliki tiga parameter inti yakni,
1. Alamat email penerima
2. Judul Email
3. Isi pesan atau badan email
Formatnya adalah,
mail(penerima, judul, pesan);
Judul email(2) dan isi pesan(3) sebenarnya bersifat optional. Kita bisa saja
mengirimkan email tanpa judul dan kosong. Kita dapat menyertakan parameter
keempat yang berisi header tambahan.
Praktik Mengirim Email
1. Buka aplikasi notepad
2. Tuliskan kode PHP berikut
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Contact Me</title>
</head>
<body>
<h1>Contact Me</h1>
<?php # Script 11.1 - email.php
// Check for form submission:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Minimal form validation:
if (!empty($_POST['name']) && !empty($_POST['email'])
&& !empty($_POST['comments']) ) {
// Create the body:
$body = "Name: {$_POST['name']}\n\nComments:
{$_POST['comments']}";
// Make it no longer than 70 characters long:
$body = wordwrap($body, 70);
// Send the email:
mail('[email protected]', 'Contact Form
Submission', $body, "From: {$_POST['email']}");
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 11
// Print a message:
echo '<p><em>Thank you for contacting me. I will
reply some day.</em></p>';
// Clear $_POST (so that the form's not sticky):
$_POST = array();
} else {
echo '<p style="font-weight: bold; color:
#C00">Please fill out the form completely.</p>';
}
} // End of main isset() IF.
// Create the HTML form:
?>
<p>Please fill out this form to contact me.</p>
<form action="email.php" method="post">
<p>Name: <input type="text" name="name" size="30"
maxlength="60" value="<?php if (isset($_POST['name'])) echo
$_POST['name']; ?>" /></p>
<p>Email Address: <input type="text" name="email"
size="30" maxlength="80" value="<?php if
(isset($_POST['email'])) echo $_POST['email']; ?>" /></p>
<p>Comments: <textarea name="comments" rows="5"
cols="30"><?php if (isset($_POST['comments'])) echo
$_POST['comments']; ?></textarea></p>
<p><input type="submit" name="submit" value="Send!"
/></p>
</form>
</body>
</html>
9.3. Mengunggah File
Proses upload/unggah adalah menyalin file dari direktori lokal ke komputer
server. Fasilitas upload sendiri disediakan untuk memudahkan user dalam
melakukan penyalinan file dari komputer lokal ke server melalui user-inteface
yang sangat nyaman.
Untuk melakukan upload file, digunakan elemen kontrol khusus. Elemen ini
sebenarnya hampir sama dengan elemen Textfield, hanya saja ada tambahan
tombol browse yang digunakan untuk memilih lokasi file yang akan diunggah
berada. Elemen kontrol ini dibuat dengan menggunakan tag <input> dengan
atribut type diisi dengan nilai file. Contoh
IX- 12
Bab 9 Akses Basis Data MySQL dengan PHP
<input type=”file” name=”file_user”>
Cara Kerja dalam Proses Upload
Berikut cara kerja proses upload file pada html
1. User mengakses halaman web yang berisi form upload
2. User akan memilih atau menentukan file yang akan diupload
3. Nama file beserta path lengkapnya akan muncul pada elemen TEXTFIELD
4. User menekan tombol SUMBIT
5. File akan ditransfer ke web server dan ditempatkan pada direktori temporary
6. Kode php yang diisi pada bagian action dari form di atas akan memeriksa
apakah file tersebut sudah terkirim ke web server atau belum. Jika sudah kode
tersebut akan mengeksekusi perintah copy() untuk memindahkan file dari
direktori temporary ke direktori sebenarnya
7. Kode php memberikan konfirmasi ke user, apakah file berhasil diupload atau
tidak.
Menentukan Lokasi Upload
Karena dalam praktik ini kita menggunakan komputer lokal sebagai web server
maka perlu melakukan konfigurasi pada file php.ini. Untuk melakukannya ikuti
langkah berikut
1. Buka file php.ini menggunakan text editor
2. Cari baris yang berisi kode berikut
; Temporary directory for HTTP uploaded files (will use
system default if not
; specified).
; http://php.net/upload-tmp-dir
upload_tmp_dir="C:\xampp-2\tmp"
3. Ubah direktori C:\xampp-2\tmp ke lokasi yang ingin anda gunakan untuk
menyimpan file yang di upload.
Menyiapkan Form untuk Proses Upload
Pada saat membuat form untuk menangani proses upload, diperlukan untuk
menyertakan atribut ENCTYPE pada tag <form> dan diisi “multipart/formdata” . Nilai tersebut menunjukan bahwa yang akan dikirim ke server bukan
hanya data text yang tertulis pada elemen kontrol namun beserta filenya.
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 13
Praktik Membuat Form untuk Upload
1. Buka aplikasi teks editor
2. Tulis kode berikut
<html>
<head>
<title>Form Unggah File</title>
</head>
<body>
<h2>Form Mengunggah File </h2>
<ol>
<li>Tulis nama file yang akan diupload atau
gunakan tombol BROWSE untuk memilih file yang akan
diunggah</li>
<li>Ketika
sudah
selesai,
tekan
tombol<strong>Unggah File</strong>>/li>
</ol>
<hr/>
<div align=”center”>
<form action=”UploadFile.php” method=”post”
enctype=”multipart/form-data”>
<input type=”hidden” name=”MAX_FILE_SIZE”
value=”500000”><br/>
<input type=”file” name=”file_user” size=”60”>
<br/><br/>
<input type=”submit” value=”Upload File”>
</form>
</div>
</body>
</html>
3. Simpan file dengan nama upload.html pada direktori C:/xampp/htdocs/bab9
4. Jalankan web browser dan masukan http://localhost/bab9/upload.html.
Kode PHP untuk Proses Upload
Setelah form upload tersedia, langkah berikutnya adalah membuat kode yang
dapat menjalankan prosesnya. Pada form di atas, kita menunjuk ke file
UploadFile.php untuk melaksanakan proses upload. Mari sekarang kita buat file
UploadFile.php sebagai berikut
1. Buka teks editor dan tuliskan kode berikut
<?php
$file_user=$_FILES[‘file_user’][‘tmp_name’];
$namafile=$_FILES[‘file_user’][‘name’];
IX- 14
Bab 9 Akses Basis Data MySQL dengan PHP
$tujuan=”C:\\data\\”.$namafile;
if($file_user !=”none”){
copy($file_user,$tujuan);
echo”<h3>Proses unggah berhasil dilakukan</h3>”;
echo”\$file_user:$file_user<br/>”;
echo”\$tujuan:$tujuan”;
}
else{
echo”<h3>Upload Gagal</h3>”;
echo”Anda belum memilih file yang akan diupload.”;
}
?>
2. Simpan file php di atas dengan nama UploadFile.php di direktori
C:/xampp/htdocs/bab9.
3. Jalan web browser dan isi dengan alamat http://localhost/bab9/upload.html
4. Lakukan proses mengunggah file dan bila sudah tekan tombol Unggah File
9.4. Membuat Otentikasi User
Jika anda membangun sebuah web site, seringkali terdapat proses registrasi user.
Oleh karena itu maka perlu disediakan form login yang digunakan untuk
otentikasi user. Pada sub bab ini akan dibuat sistem sederhana yang akan
menangani proses otentikasi user. User yang sudah terdaftar akan tercatat di
database dimana proses otentikasi berlangsung.
Membuat Tabel
Untuk menyimpan data tentang user yang sudah teregistrasi, dibuatkan tabel pada
database. Database ini dibuat dengan perintah
1. Pada mysql client tulis
create database contohdb;
2. Pilih database contohdb dengan perintah
use contohdb;
3. Buat tabel webuser pada database contohdb:
create table webuser(
id varchar(15) not null,
nama varchar(25),
pwd varchar(40),
constraint pk_webuser primary key(id)
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 15
);
Membuat Kode untuk Koneksi ke Database
Kode yang dibuat berfungsi untuk melakukan koneksi ke database sehingga
aplikasi PHP yang akan dibuat dapat berkomunikasi dengan tabel webuser. File
berikut akan digunakan setiap kali akan koneksi ke database dengan
menggunakan fungsi require().
<?php
//file: connectdb.php
$dbname
$host
$username
$password
=”contohdb”;
=”localhost”;//atau 127.0.0.1
=”root”; //bisa disetting sendiri
=””;//password default root
$conn=mysqli_connect($host,$username,$password,$dbname)
;
if(mysqli_connect_errno()){
echo”Koneksi ke server gagal.”;
exit();
}
?>
Simpan file diatas dengan nama connectdb.php.
Membuat Form Registrasi User
Form ini digunakan oleh user untuk mengisi data ketika ia registrasi pada halaman
web kita. Informasi yang diisi oleh user akan disimpan pada tabel webuser pada
database contohdb. Berikut kode programnya,
<html>
<head>
<title>Membuat Otentikasi User</title>
</head>
<body>
<h2>Form Registrasi User</h2>
<form action=”do_registrasi.php” method=”post”>
<table>
<tr>
<td>ID User</td>
<td><input type=”textfield” name=”id”
maxlength=”15” size=”15” /</td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td><input type=”textfield” name=”nama”
IX- 16
Bab 9 Akses Basis Data MySQL dengan PHP
maxlength=”25” size=”25” /</td>
</tr>
<tr>
<td>Password</td>
<td><input type=”password” name=”pwd”
maxlength=”15” size=”25” /</td>
</tr>
<tr>
<td> </td>
<td><input type=”submit” name=”daftar”
value=”Daftar” /</td>
</tr>
</table>
</form>
</body>
</html>
Simpan
dengan
nama
file
register.php
dan
letakan
pada
direktori
C:/xampp/htdocs/bab9.
Membuat Kode PHP untuk Menangani Proses Registrasi
Sesudah membuat form registrasi, langkah selanjutnya adalah membuat kode PHP
untuk menangani proses registrasi. Kode ini berfungsi untuk memasukan
informasi yang diinput oleh user pada form registrasi ke dalam tabel webuser di
dalam database contohdb. Berikut kode programnya,
<html>
<head>
<title>Membuat Otentikasi User</title>
</head>
<body>
<h2>Status Registrasi</h2>
<?php
if(isset($_POST[‘daftar’])){
$id
=$_POST[‘id’];
$nama =$_POST[‘nama’];
$pwd
=$_POST[‘pwd’];
require(“connectdb.php”);
$sql=”insert into webuser(id,nama,pwd)”.
“value(‘$id’,’$nama’,md5(’$pwd’))”;
mysqli_query($conn,$sql);
$num=mysqli_affected_rows($conn);
if($num>0){
?>
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 17
Selamat, Anda telah terdaftar di website kami.<br/>
[<a href=”login.php”>Login</a>]<br/><br/>
<table>
<tr>
<td>ID</td>
<td>:</td>
<td><strong><?php echo $id; ?></strong></td>
</tr>
<tr>
<td>Nama Lengkap</td>
<td>:</td>
<td><strong><?php echo $nama; ?></strong></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><strong><?php echo $pwd; ?></strong></td>
</tr>
</table>
<?php
} else{
?>
Proses registrasi gagal. Silakan Ulangi lagi!!<br/>
[a href=”register.php”>Kembali ke Form Registrasi</a>]
<?php
}
}
?>
</body>
</html>
Simpan file di atas dengan nama do_register.php di direktori
C:/xampp/htdocs/bab9.
Membuat Form Login
Form ini digunakan oleh user untuk mengirimkan informasi ID dan password.
Jika salah, maka sistem akan menolak dan menampilkan kembali form login.
Berikut kodenya,
<html>
<head>
<title>Membuat Otentikasi User</title>
</head>
<body>
<h2>Form Login</h2>
Anda belum terdaftar sebagai user?
[<a href=”register.php”>Daftar Sekarang</a>]
<br/><br/>
IX- 18
Bab 9 Akses Basis Data MySQL dengan PHP
<form action=”do_login.php” method=post”>
<table>
<tr>
<td>ID User</td>
<td><input type=”textfield” name=”id”
maxlength=”15” size=”25” /></td>
</tr>
<tr>
<td>Password</td>
<td><input type=”password” name=”pwd”
maxlength=”15” size=”25” /></td>
</tr>
<tr>
<td> </td>
<td><input type=”sumbit” name=”login”
value=”Login” /></td>
</tr>
</table>
</form>
</body>
</html>
Simpan dengan nama file login.php dan simpan di folder C:/xampp/htdocs/bab9
Membuat Kode PHP untuk Menangani Proses Login
Setelah form login tersedia, langkah terakhir adalah program yang akan
menangani proses login yang dilakukan oleh user. Berikut kodenya
<html>
<head>
<title>Membuat Otentikasi User</title>
</head>
<body>
<?php
if(isset($_POST[‘login’])){
$id
=$_POST[‘id’];
$pwd
=$_POST[‘pwd’];
require(“connectdb.php”);
$query=”select nama from webuser”.”where id=’$id’ and
pwd=md5(‘$pwd’)”;
$result=mysqli_query($conn,$query);
$num=mysqli_num_rows($result);
if($num==1){
list($nama)=mysqli_fetch_array($result);
?>
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 19
<h2>Secret Area</h2>
Selamat Datang,
<strong><?php echo $nama; ?></strong><br/>
Ini adalah contoh halaman yang hanya dapat diakses
oleh user yang telah terdaftar.
<?php
} else{
header(“Location: “.
“http://localhost/bab9/login.php”);
}
}
?>
</body>
</html>.
9.5. Membuat Buku Tamu
Buku tamu adalah salah satu fasilitas pada web yang disediakan untuk memuat
kesan dan pesan pengunjung terhadap website yang kita buat. Dari masukan
pengunjung tersebut kita dapat mengetahui kelebihan dan kekurangan website kita
untuk perbaikan di masa yang akan datang.
Untuk membuat buku tamu, langkah pertama adalah membuat tabel yang akan
menyimpan kesan dan pesan pengunjung. Tabel yang digunakan hanya satu dan
kita simpan di basis data contohdb. Berikut kode SQL nya dalam MySQL
use contohdb;
CREATE TABLE bukutamu (
id int(11) NOT NULL auto_increment,
tanggal int(11) NOT NULL,
nama varchar(50) NOT NULL,
email varchar(50) NOT NULL,
website varchar(100) NOT NULL,
pesan text NOT NULL,
PRIMARY KEY (`id`)
);
Kemudian buatlah form dengan kode sebagai berikut
<html>
</head>
<title>Buku Tamu</title>
</head>
<body>
IX- 20
Bab 9 Akses Basis Data MySQL dengan PHP
<div id="container">
<h1>Buku Tamu</h1>
<p>Silahkan isi buku tamu di bawah ini untuk
meninggalkan pesan Anda!</p>
<form action="" method="post">
<p><b>Nama
Lengkap
:</b><br><input
type="text" name="nama" placeholder="Nama Leangkap"
required /></p>
<p><b>Email :</b><br><input type="text"
name="email" placeholder="Alamat Email" required /></p>
<p><b>Website
:</b><br><input
type="text"
name="website"
placeholder="http://example.com" /></p>
<p><b>Pesan
:</b><br><textarea
name="pesan" rows="5" cols="50" placeholder="Tuliskan
kesan
dan
pesan
Anda
tentang
web
kami"
required></textarea></p>
<p><input
type="submit"
name="go"
value="Kirim"
/>
<input
type="reset"
name="del"
value="Hapus" /></p>
</form>
</div>
</body>
</html>
Selanjutnya kita akan membuat kode PHP yang digunakan untuk memproses data
yang sudah dimasukkan kedalam database, dan berikut ini kodenya:
<?php
if($_POST['go']){
mysql_connect("localhost", "root", "root");
mysql_select_db("contohdb");
$nama =
htmlentities(mysql_real_escape_string($_POST['nama']));
$email
=
htmlentities(mysql_real_escape_string($_POST['email']));
$web =
htmlentities(mysql_real_escape_string($_POST['website']));
$pesan
=
htmlentities(mysql_real_escape_string($_POST['pesan']));
$tgl = time();
if($nama && $email && $pesan){
if(filter_var($email, FILTER_VALIDATE_EMAIL)){
$in = mysql_query("INSERT INTO bukutamu
VALUES(NULL, '$tgl', '$nama', '$email', '$web', '$pesan')");
if($in){
Bab 9 Akses Basis Data MySQL dengan PHP
IX- 21
echo '<script
language="javascript">alert("Terima kasih, data Anda
berhasil disimpan");
document.location="index.php";</script>';
}else{
echo '<div id="error">Uppsss...! Query
ke database gagal dilakukan!</div>';
}
}else{
echo '<div id="error">Uppsss...! Email Anda
tidak valid!</div>';
}
}else{
echo '<div id="error">Uppsss...! Lengkapi
form!</div>';
}
}
?>
IX- 22
Bab 9 Akses Basis Data MySQL dengan PHP
Kode/No :
Tanggal :
Revisi : 0
POLITEKNIK NEGERI JAKARTA
FORMULIR
SISTEM PENJAMINAN MUTU INTERNAL
(SPMI)
Halaman: 1 dari ...
FORMULIR
RENCANA PEMBELAJARAN SEMESTER
Digunakan untuk melengkapi:
TET5306
STANDAR PROSES PEMBELAJARAN
Penanggung Jawab
Proses
Nama
Jabatan
1. Perumusan
2. Pemeriksaan
3. Persetujuan
4. Penetapan
5. Pengendalian
1
Tanda Tangan
Tanggal
RENCANA PEMBELAJARAN SEMESTER
(RPS)
PROGRAM STUDI
Mata Kuliah
Kode Mata Kuliah
Semester
Dosen Pengampu
SKS
Capaian
Pembelajaran MK
Capaian
Pembelajaran
Khusus
Metode Penilaian
dan Pembobotan
Daftar Referensi
: Teknik Telekomunikasi
: Pemrograman Web dan Basis Data
: TET5306
: V
: Mohamad Fathurahman ST.,MT.
: 2 (2-2)
: Mahasiswa mampu memahami teknologi internet dan mampu
membuat situs web statis dan dinamis dan aplikasi berbasis
web dengan menerapkan penggunaan basis data memanfaatkan
perangkat lunak PHP, MYSQL dan APACHE.
: 1. Mahasiswa mampu menjelaskan teori teknologi internet dan
Web.
2. Mahasiswa mampu mengerjakan instalasi perangkat lunak
aplikasi web PHP, MYSQL dan APACHE.
3. Mahasiswa mampu memahami Kaidah Penulisan dan
Mempraktikkan tag HTML Dasar.
4. Mahasiswa mampu memahami konsep Cascading Style Sheet
(CSS) kemudian menggunakan dan menunjukkan
manfaatnya dalam membuat halaman web.
5. Mahasiswa mampu memahami kaidah penulisan dan
mempraktikkan Tag PHP dasar serta mengintegrasikan PHP
ke dalam dokumen HTML dan sebaliknya.
6. Mahasiswa mampu mempraktikkan penggunaan Tag PHP
untuk aplikasi web dinamis.
7. Mahasiswa mampu memahami metode dan Merancang basis
data dari kasus yang diberikan.
8. Mahasiswa mampu memahami kaidah penulisan dan
mempraktikkan perintah SQL untuk membuat basis data.
9. Mahasiswa mampu mempraktikkan penggunaan basis data
MYSQL untuk aplikasi berbasis web.
: Quiz dan Tugas Terstruktur (20%), UTS-Teori dan Tugas Web Statis
(30%), Presentasi Makalah (10%) dan UAS-Berupa Project Akhir
Semester : Membuat Web Dinamis(40%). Alat bantu yang digunakan
adalah LCD, dengan metode ceramah dan diskusi yang diikuti dengan
praktik pemrograman..
: 1. West Adrian W., Practical HTML Projects, Springer New York
2012.
2. Duckett Jon, HTML and CSS: Design and Build Websites, John
Wiley and Sons Inc., Indianapolis 2011.
3. Ullman Larry, PHP and MySQL for Dynamic Web Sites 4th Edition,
Peachpit Press Berkeley CA 2012
2
3
Minggu
Ke
Waktu
Pembelajaran
1
4x50 menit
2
3
4
Capaian
Pembelajaran
Menjelaskan teori
teknologi internet
dan Web
4x50 menit
4x50 menit
4x50 menit
5
4x50 menit
6
4x50 menit
7
4x50 menit
8
4x50 menit
9
4x50 menit
Bahan Kajian/Pokok
Bahasan
Pengantar Teknologi
Web dan Internet
Web Master dan
Pemrograman Web
Strategi/Metode
Pembelajaran
Indikator
Penilaian
Pembelajaran
Kolaboratif
Partisipasi
Pengalaman
Belajar
Mengetahui
maksud dan
tujuan mata
kuliah,
Memahami
Kontrak
Perkuliahan dan
Menyiapkan
Tema Presentasi
Tugas
Diskusi
Kelompok
Partisipasi
dan Lisan
Presentasi Tugas
Kriteria dan Bobot Penilaian
Pembagian Tema untuk Tugas
Presentasi/Makalah Individu
1&2
Mengumpulkan makalah dan penilaian
hasil presentasi tugas 5%
Mengerjakan
instalasi perangkat
lunak aplikasi web
PHP, MYSQL dan
APACHE
Persiapan dan Instalasi
Sistem Web Server
APACHE
Pembelajaran
Kolaboratif
Partisipasi
dan Unjuk
kerja
Praktikum
Instalasi Sistem
Memahami Kaidah
Penulisan dan
Mempraktikkan tag
HTML Dasar
Perintah/tag HTML
Dasar
Penjelasan
Materi, Diskusi
Kelompok dan
Simulasi
Partisipasi
dan Unjuk
kerja
Praktikum
Modul
Pengenalan
HTML
Observasi keaktifan dan Ketaatan
mengikuti prosedur dan Laporan 5%
Praktikum
Modul
Pembelajaran
HTML dengan
CSS serta mulai
merancang
pembuatan web
statis sebagai
tugas individu
UTS.
Membuat Tugas Mayor UTS :
membuat Web Statis dan Ujian Tengah
Semester(teori) 30%
Praktikum
Modul
Pengenalan PHP
Observasi dan Keaktifan dan Laporan
5%
Memahami konsep
Cascading Style
Sheet (CSS)
kemudian
menggunakan dan
menunjukkan
manfaatnya dalam
membuat halaman
web
Cascading Style Sheet
(CSS)
Penjelasan
Materi, Diskusi
Kelompok dan
Simulasi
Partisipasi
dan Unjuk
kerja dan
Presentasi
Tugas Mayor
UTS:
Membuat
Web Statis
Memahami kaidah
penulisan dan
mempraktikkan Tag
Pengenalan PHP
Penjelasan
Materi, Diskusi
Kelompok dan
Partisipasi
dan Unjuk
kerja
4
Ref.
1&2
Observasi keaktifan dan Ketaatan
mengikuti prosedur dan Laporan 3%
1&2
1&2
3
Minggu
Ke
Waktu
Pembelajaran
Capaian
Pembelajaran
PHP dasar serta
mengintegrasikan
PHP ke dalam
dokumen HTML
dan sebaliknya
10
4x50 menit
Mempraktikkan
penggunaan Tag
PHP untuk aplikasi
web dinamis
11
12
13
4x50 menit
4x50 menit
4x50 menit
14
4x50 menit
15
4x50 menit
16
4x50 menit
Bahan Kajian/Pokok
Bahasan
Pemrograman PHP
Strategi/Metode
Pembelajaran
Simulasi
Penjelasan
Materi, Diskusi
Kelompok dan
Simulasi
Indikator
Penilaian
Partisipasi
dan Unjuk
kerja
Menghasilkan
desain
database yang
efisien
Memahami metode
dan Merancang basis
data dari kasus yang
diberikan
Merancang Basis Data
Memahami kaidah
penulisan dan
mempraktikkan
perintah SQL untuk
membuat basis data
Membuat Basis Data
dengan MySQL
Penjelasan
Materi, Diskusi
Kelompok dan
Simulasi
Partisipasi
dan Unjuk
kerja
Mempraktikkan
penggunaan basis
data MYSQL untuk
aplikasi berbasis
web
Akses Basis Data
MySQL dengan PHP
Penjelasan
Materi, Diskusi
Kelompok dan
Simulasi
Partisipasi
dan Unjuk
kerja
Penjelasan
Materi dan Studi
Kasus
5
Pengalaman
Belajar
Praktikum
Modul
Pemrograman
PHP
Mempraktikan
kaidah-kaidah
dalam
merancang
sebuah basis
data melalui
studi kasus
Memahami dan
mempraktikan
bahasa
pemrograman
SQL untuk
membuat basis
data
Mengkakses
basis data
MySQL
menggunakan
PHP dan
membuat tugas
mayor akhir
semester: Web
Dinamis
Kriteria dan Bobot Penilaian
Ref.
Observasi dan Keaktifan dan Laporan
5%
3
Observasi dan Hasil Perancangan Basis
Data 4%
3
Observasi dan Keaktifan dan Laporan
3%
3
Tugas Kelompok : Membuat dan
Mempresentasikan Pembuatan Web
Dinamis 40%
3
Mengetahui
Ketua Jurusan Teknik Elektro
Iwa Sudradjat, ST.,MT.
NIP.
CATATAN:
Ketua Program Studi
Teknik Telekomunikasi
Toto Supriyanto, ST.,MT.
NIP.
Depok, 18 Desember 2015
Penanggung Jawab Mata Kuliah
Mohamad Fathurahman, ST.,MT.
NIP. 19710824 200312 1 001
1. Proses pembelajaran harus dilaksanakan secara interaktif, inspiratif, menyenangkan, menantang, dan memotivasi mahasiswa
untuk berpartisipasi aktif, serta memberikan kesempatan atas prakarsa, kreativitas, dan kemandirian sesuai dengan bakat,
minat, dan perkembangan fisik serta psikologis mahasiswa, termasuk mahasiswa berkebutuhan khusus.
2. Proses pembelajaran secara umum dilaksanakan dengan urutan:
a. Kegiatan pendahuluan, merupakan pemberian informasi yang komprehensif tentang rencana pembelajaran beserta tahapan
pelaksanaannya, serta informasi hasil asesmen dan umpan balik proses pembelajaran sebelumnya;
b. Kegiatan inti, merupakan kegiatan belajar dengan penggunaan metode pembelajaran yang menjamin tercapainya
kemampuan tertentu yang telah dirancang sesuai dengan kurikulum;
c. Kegiatan penutup,merupakan kegiatan refleksi atas suasana dan capaian pembelajaran yang telah dihasilkan, serta
informasi tahapan pembelajaran berikutnya.
6
PETA KOMPETENSI
BAB I
Pengantar Teknologi Web dan Internet
BAB II
Web Master dan Pemrograman Web
BAB III
Persiapan Instalasi Sistem Web Server
APACHE
BAB IV
Perintah dan Tag HTML Dasar
BAB VI
Pengenalan PHP
BAB VII
Pemrograman PHP
BAB V
Cascading Style Sheets
BAB VIII
Merancang Basis Data
BAB IX
Membuat Basis Data dengan MySQL
BAB X
Akses Basis Data MySQL dengan PHP
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
4 x 50 menit
1
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Menjelaskan teori teknologi internet
dan Web.
: Pengantar Teknologi Web dan Internet
: • Pendahuluan
• Sejarah dan Perkembangan Internet
• Protokol
• TCP/IP
• Domain Name Server(DNS)
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan teori
perkuliahan
teknologi internet dan
Web.
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
alat serta
• Pendahuluan
Melaksanakan
• Sejarah dan
Persiapan Tugas
Perkembangan
Presentasi tentang
Internet
teknologi internet
• Protokol
dan Web yang
• TCP/IP
meliputi:
• Domain Name
Server(DNS)Kons • Sejarah dan
Perkembangan
tanta
Internet
 Uraian verbal dan
• Protokol
non verbal tentang
• TCP/IP
petunjuk
• Domain Name
pelaksanaan
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
Power Point dan
Web Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
praktikum
Server(DNS)Ko
 Memberikan
nstanta
bimbingan dan
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
4 x 50 menit
2
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Menjelaskan teori teknologi internet
dan Web
: Web Master dan Pemrograman Web
: • Pengertian Web Master
• Penjelasan Tugas Web Master
• Tahap Pembangunan Situs
• Web Hosting
• Pemrograman
• Pemrograman Berbasis Web
• Komponen Pemrograman Berbasis
Web
• Keuntungan
Mengembangkan
Aplikasi Berbasis Web
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan Web
perkuliahan
Master dan
Pemrograman Web
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Pengertian Web alat serta
Melaksanakan
Master
Presentasi tentang :
• Penjelasan
• Pengertian Web
Tugas Web
Master
Master
• Penjelasan
• Tahap
Tugas Web
Pembangunan
Master
Situs
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
• Web Hosting
• Tahap
Pembangunan
• Pemrograman
Situs
• Pemrograman
• Web Hosting
Berbasis Web
• Pemrograman
• Komponen
Pemrograman
• Pemrograman
Berbasis Web
Berbasis Web
• Komponen
• Keuntungan
Pemrograman
Mengembangka
Berbasis Web
n Aplikasi
Berbasis Web
• Keuntungan
 Uraian verbal dan
Mengembangka
non verbal tentang
n Aplikasi
petunjuk
Berbasis Web
pelaksanaan
praktikum
 Memberikan
bimbingan dan
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
4 x 50 menit
3
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Mengerjakan instalasi perangkat lunak
aplikasi web PHP, MYSQL dan
APACHE
: Persiapan dan Instalasi Sistem Web
Server APACHE
: • Instalasi dan Konfigurasi MySQL
• Instalasi APACHE dan PHP
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
relevansi dan manfaat
secara mental untuk
materi perkuliahan
menerima materi
Persiapan dan Instalasi perkuliahan
Sistem Web Server
APACHE
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
alat serta
• Instalasi dan
Melaksanakan
Konfigurasi
Praktikum
MySQL
Persiapan dan
• Instalasi
Instalasi Sistem
APACHE dan
Web Server
PHP
APACHE tentang :
 Uraian verbal dan
• Instalasi dan
non verbal tentang
Konfigurasi
petunjuk
MySQL
pelaksanaan
praktikum
• Instalasi
 Memberikan
APACHE dan
bimbingan dan
PHP
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
8 x 50 menit
4 dan 5
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Memahami Kaidah Penulisan dan
Mempraktikkan tag HTML Dasar
: Perintah/tag HTML Dasar
: • Struktur
• Text
• List
• Link
• Gambar
• Tabel
• Form
• Ekstra Mark Up
• Flash, Audio dan Video
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan
perkuliahan
Perintah/tag HTML
Dasar
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
alat serta
• Struktur
Melaksanakan
• Text
Praktikum
• List
Perintah/tag HTML
• Link
Dasar dan membuat
• Gambar
Laporan Sementara
• Tabel
hasil praktikum
• Form
tentang :
• Ekstra Mark Up
• Struktur
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
• Flash, Audio
• Text
dan Video
• List
 Uraian verbal dan
• Link
non verbal tentang
• Gambar
petunjuk
• Tabel
pelaksanaan
• Form
praktikum
• Ekstra Mark Up
 Memberikan
• Flash, Audio
bimbingan dan
dan Video
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
12 x 50 menit
6,7 dan 8
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Memahami konsep Cascading Style
Sheet (CSS) kemudian menggunakan
dan menunjukkan manfaatnya dalam
membuat halaman web
: Cascading Style Sheet (CSS)
: • Pengenalan CSS
• Color
• Text
• Boxes
• List
• Table
• Form
• Image
• Layout
• HTML 5 Layout
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan
perkuliahan
Cascading Style
Sheet(CSS)
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Pengenalan CSS alat serta
Melaksanakan
• Color
Praktikum
• Text
Cascading Style
• Boxes
Sheets(CSS) dan
• List
membuat Laporan
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
Sementara
hasil
• Table
praktikum tentang :
• Form
• Pengenalan CSS
• Image
• Color
• Layout
• HTML 5 Layout • Text
• Boxes
 Uraian verbal dan
non verbal tentang
• List
petunjuk
• Table
pelaksanaan
• Form
praktikum
• Image
 Memberikan
• Layout
bimbingan dan
• HTML 5 Layout
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
4 x 50 menit
9
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Memahami kaidah penulisan dan
mempraktikkan Tag PHP dasar serta
mengintegrasikan PHP ke dalam
dokumen HTML dan sebaliknya
: Pengenalan PHP
: • Sintaks Dasar
• Mengirim Data ke Web Browser
• Memberi Komentar
• Variable
• String
• Number
• Konstanta
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
perkuliahan
materi perkuliahan
Pengenalan PHP
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Pemrograman
alat serta
pada sisi server
Melaksanakan
• Sintaks Dasar
Praktikum
PHP
Pemrograman
Dasar PHP dan
• Mengirim Data
membuat Laporan
ke Web browser
Sementara hasil
• Memberi
praktikum tentang :
komentar pada
• Sintaks Dasar
program
PHP
• Deklarasi
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
Variable
• Mengirim Data
• String
ke Web browser
• Number
• Memberi
komentar pada
• Konstanta
program
 Uraian verbal dan
non verbal tentang
• Deklarasi
Variable
petunjuk
pelaksanaan
• String
praktikum
• Number
 Memberikan
• Konstanta
bimbingan dan
arahan selama
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
8 x 50 menit
10 dan 11
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Mempraktikkan penggunaan Tag PHP
untuk aplikasi web dinamis
: Pemrograman PHP
: • Membuat Form HTML
• Menangani Form HTML
• Kondisional dan Operator
• Validasi Data
• Array
• Perulangan for dan while
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
menerima materi
relevansi dan manfaat
materi perkuliahan
perkuliahan
Pemrograman PHP
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Membuat Form alat serta
HTML
Melaksanakan
Praktikum
• Menangani
Pemrograman
Form HTML
• Kondisional dan Dasar PHP dan
membuat Laporan
Operator
Sementara hasil
• Validasi Data
praktikum tentang :
• Array
• Membuat Form
• Perulangan for
HTML
dan while
• Menangani
 Uraian verbal dan
Form HTML
non verbal tentang
• Kondisional dan
petunjuk
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
pelaksanaan
Operator
praktikum
• Validasi Data
 Memberikan
• Array
bimbingan dan
• Perulangan for
arahan selama
dan while
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
4 x 50 menit
12
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Memahami metode dan Merancang
basis data dari kasus yang diberikan.
: Merancang Basis Data
: • Pentingnya Perancangan Basis Data
yang Baik
• Macam-macam Relasi Tabel
• Memahami Normalisasi
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
menerima materi
relevansi dan manfaat
materi perkuliahan
perkuliahan
Merancang Basis Data
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Membuat Form alat serta
HTML
Melaksanakan
Praktikum
• Menangani
Pemrograman
Form HTML
• Kondisional dan Dasar PHP dan
membuat Laporan
Operator
Sementara hasil
• Validasi Data
praktikum tentang :
• Array
• Membuat Form
• Perulangan for
HTML
dan while
•
Menangani
 Uraian verbal dan
Form HTML
non verbal tentang
•
Kondisional
dan
petunjuk
Operator
pelaksanaan
• Validasi Data
praktikum
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
 Memberikan
• Array
bimbingan dan
• Perulangan for
arahan selama
dan while
pelaksanaan
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
8 x 50 menit
13 dan 14
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Memahami kaidah penulisan dan
mempraktikkan perintah SQL untuk
membuat basis data.
: Membuat Basis Data dengan MySQL
: • Pengenalan MySQL
• Bahasa Pemrograman SQL
• Pemrograman SQL Lanjut dengan
MySQL
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan
perkuliahan
Membuat Basis Data
dengan MySQL
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
alat serta
• Pengenalan
Melaksanakan
MySQL
Praktikum
• Bahasa
Membuat Basis
Pemrograman
Data dengan
SQL
MySQL dan
• Pemrograman
membuat Laporan
SQL Lanjut
dengan MySQL Sementara hasil
praktikum tentang :
 Uraian verbal dan
• Pengenalan
non verbal tentang
MySQL
petunjuk
• Bahasa
pelaksanaan
Pemrograman
praktikum
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
 Memberikan
SQL
bimbingan dan
• Pemrograman
arahan selama
SQL Lanjut
pelaksanaan
dengan MySQL
praktikum
Merangkum pokokMelakukan umpan
pokok materi,
balik terhadap
menerima umpan balik materi perkuliahan
dan tindak lanjutnya
Media dan Alat
Satuan Acara Perkuliahan(SAP)
Mata Kuliah
Kode Mata Kuliah
Dosen Pengampu
SKS/JPM
Waktu Pertemuan
Pertemuan ke
Capaian Pembelajaran Mata Kuliah
Capaian Pembelajaran Khusus
Pokok Bahasan
Sub Pokok Bahasan
Tahap
Pendahuluan
Penyajian
:
:
:
:
:
:
:
Pemrograman Web dan Basis Data
TET5306
Mohamad Fathurahman, ST., MT.
2/4
8 x 50 menit
15 dan 16
Mahasiswa
mampu
memahami
teknologi internet dan mampu membuat
situs web statis dan dinamis dan
aplikasi
berbasis
web
dengan
menerapkan penggunaan basis data
memanfaatkan perangkat lunak PHP,
MYSQL dan APACHE.
: Mempraktikkan penggunaan basis data
MYSQL untuk aplikasi berbasis web.
: Akses Basis Data MySQL dengan PHP
: • Pengenalan MySQL
• Bahasa Pemrograman SQL
• Pemrograman SQL Lanjut dengan
MySQL
Kegiatan Pengajaran
Dosen
Mahasiswa
Menyampaikan
Kompetensi, ruang
Mahasiswa
lingkup/deskripsi
mempersiapkan diri
materi,
secara mental untuk
relevansi dan manfaat
menerima materi
materi perkuliahan
perkuliahan
Akses Basis Data
MySQL dengan PHP
 Uraian verbal
Mempersiapkan
tentang :
semua media dan
• Mengakses
alat serta
Database
Melaksanakan
MySQL
Praktikum Akses
• Mengirim Email Basis Data MySQL
• Mengunduh dan dengan PHP dan
membuat Laporan
Mengunggah
Sementara hasil
File
praktikum tentang :
• Membuat
• Mengakses
Otentifikasi
Database
User
MySQL
• Membuat Buku
•
Mengirim
Tamu
Email
• Cokies dan
•
Mengunduh
Session
Media dan Alat
Modul Ajar,
LCD Projector,
Komputer,
APACHE
Server, Teks
Editor dan Web
Browser
Tahap
Penutup
Kegiatan Pengajaran
Dosen
Mahasiswa
 Uraian verbal dan
dan
non verbal tentang
Mengungga
petunjuk
h File
pelaksanaan
• Membuat
praktikum
Otentifikasi
 Memberikan
User
bimbingan dan
• Membuat
arahan selama
Buku Tamu
pelaksanaan
• Cokies dan
praktikum
Session
Merangkum pokokpokok materi,
menerima umpan balik
dan tindak lanjutnya
Melakukan umpan
balik terhadap
materi perkuliahan
Media dan Alat