POLITEKNIK NEGERI JAKARTA

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


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


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


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


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


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


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


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


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

.,

di

mana

mengindentifikasikan jaringan di mana sebuah komputer berada, dan 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


•

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


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


•

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


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)


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


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


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.


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


•

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


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


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


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


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


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,


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


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.


I- 41

I- 42


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


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


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).


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


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.


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 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
Bagian ini adalah Kepala Dokumen Utama

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.

Bagian ini adalah sub judul

III- 2


Banyak artikel memiliki sub judul untuk membantu pembaca struktur tulisan yang sedang dibaca. Ada beberapa macam sub-sub judul lain yang levelnya lebih rendah.

Bagian ini adalah sub judul yang lain

Paragraf ini menjelaskan sub judul lain di atas.
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

Kurung sebelah kiri (seperti tanda kurang dari)

Kurung sebelah kanan (seperti tanda lebih dari) Tag pembuka


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

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

Paragraph in English
Nilai atribut III- 4


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 Segala sesuatu yang diapit oleh tag ini akan muncul di dalam halaman utama sebuah browser. Contoh : Bagian ini adalah Judul Halaman
Bagian ini adalah Tubuh/body dari Halaman web

Segala sesuatu yang berada di sini akan ditampilkan pada main browser window.
dan 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<br /> <br /> Segala yang tertulis pada tag body akan muncul di sini<br /> <br /> Bab 3 Perintah/Tag HTML Dasar<br /> <br /> III- 5<br /> <br /> Gambar 3.1 Contoh Tampilan di web Browser untuk tag body Praktik Untuk lebih memahami tentang struktur HTML, lakukan praktik berikut: 1<br /> <br /> Buka aplikasi pengolah kata, misalkan notepad<br /> <br /> 2<br /> <br /> Tuliskan kode HTML berikut pada notepad<br /> <br /> 3<br /> <br /> <html> <head> <title>Bagian ini adalah Judul Halaman
Bagian ini adalah Tubuh/body dari Halaman web

Segala sesuatu yang berada di sini akan ditampilkan pada main browser window.
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
untuk heading utama dan
adalah untuk sub heading. Apabila ada sub heading yang lebih kecil lagi dapat menggunakan
dan seterusnya sampai yang paling kecil
. Praktikan contoh berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut III- 6


Bagian ini adalah Judul Halaman
Heading Utama

Sub Heading

Sub Heading

Sub Heading

Sub Heading

Sub Heading
3. Simpan dengan nama file misalnya heading.html 4. Buka file heading.html dengan web browser yang anda miliki 5. Perhatikan perbedaan antara
sampai dengan <6>

Paragraf Untuk membuat sebuah paragraf, batasi kalimat yang akan dijadikan paragraf dengan tag
dan ditutup dengan
. 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
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.

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.
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 .... dan untuk cetak miring menggunakan .... Untuk lebih jelasnya lakukan praktik berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut ini
This is how we make a word appear bold.

Inside a product description you might see some key features in bold.

This is how we make a word appear italic.

It's a potato Solanum teberosum.

Captain Cook sailed to Australia on the Endeavour.
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


•

Definition List,

yaitu suatu list yang biasanya digunakan untuk

mendefinisikan sebuah istilah. Ordered List Ordered list dibuat dengan menggunakan tag pembuka
dan penutup
. Sedangkan untuk item di dalam list menggunakan tag pembuka
dan penutup
. Agar lebih memahaminya, lakukan langkah berikut, 1. Buka Notepad 2. Ketikan kode HTML berikut ini

Masukan kopi ke dalam gelas

Tambahkan gula secukupnya atau sesuai selera

Tambahkan creamer yang diinginkan

Masukan air panas ke dalam campuran kopi, gula dan creamer

Aduk-aduk sampai semua larut

Kopi hangat siap dihidangkan

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
dan
. Setiap item di dalam list diapit oleh
dan
. Untuk lebih jelas, lakukan langkah berikut, 1. Buka Notepad 2. Tuliskan kode HTML berikut

1 kg kentang

100 ml susu segar

50g roti tawar

Mentega secukupnya

Garam dan lada secukupnya


III- 9

3. Simpan dengan nama file unordered-list.html 4. Buka di web browser. Definition List Untuk membuat definition list digunakan tag
yang diikuti oleh serangkaian istilah dan definisinya. Di dalam elemen
terbagi lagi atas elemen
dan
. Elemen
untuk istilah yang akan dijabarkan definisinya dalam elemen
. Untuk lebih memahaminya, lakukan praktik berikut 1. Buka Notepad 2. Tulis kode HTML berikut

Sashimi

Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce

Scale

A device used to accurately measure the weight of ingredients

A technique by which the scales are removed from the skin of a fish

Scamorze

Scamorzo

An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk)

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 . Pengguna dapat mengklik tautan yang III- 10


terletak antara dan . 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

PNJ Tag tautan/link pembuka

Tag tautan/link penutup

Tautan ke Situs Lain Link yang dibuat menggunakan elemen 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 dan penutup tag 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
Jurusan Teknik di PNJ:

Teknik Elektro

Teknik Mesin

Teknik Sipil

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

Home

About

Movies

Contact

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


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 elemen: Bab 3 Perintah/Tag HTML Dasar

III- 13

[email protected] 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 dapat pula berupa link yang akan ditampilkan dalam browser seperti berikut, E-mail kami

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 Cafe Mbal-Mbul - community cafe in Depok, West Java, Indonesia <meta http-equiv=”Content-Type” content=”text/html; charset=iso-88591”/>
MBAL-MBUL CAFE

HOME MENU RECIPES

Contact

G Building Politeknik Negeri Jakarta

href="http://maps.google.com/maps?q=politeknik

negeri

jakarta">Find us on Google Maps III- 14


Mail Mbal-Mbul Cafe
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 . 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 Internet Movie Database (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
dan
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 tapi nilai atribut href dimulai dengan simbol #, diikuti oleh nilai atribut id dari elemen yang ingin di-lin. Di contoh ini, link ke elemen
di bagian atas halaman yang id atribut memiliki nilai top. Berikut praktik yang harus dilakukan 1. Buka notepad 2. Tulis kode berikut
Film-Making Terms
Arc Shot
Interlude
Prologue

Arc Shot

A shot in which the subject is photographed by an encircling or moving camera

Interlude

A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film

Prologue

A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to epilogue

Top
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


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 . Contoh penulisan kode programnya: 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 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
src="D:/Bahan

Ajar

Multimedia/Gambar/Rhoma_Irama.png"

alt="Bang Haji" width="100" height="100" />
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.

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

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. 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.
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
untuk memberi keterangan gambar sehingga keduanya terkait. Anda dapat memiliki lebih dari satu gambar di dalam elemen
selama mereka semua berbagi judul yang sama. Berikut contohnya: III- 18


1. Buka Notepad 2. Tulis kode HTML berikut

Berang-berang berpegangan tangan pada saat mereka tidur sehingga mereke tidak terpisah satu sama lain.

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 digunakan untuk membuat tabel. Isi dari tabel ditulis baris demi baris. Untuk mengawali baris dari setiap tabel, digunakan elemen untuk membuat baris diikuti oleh , hanya berisi tiga elemen meskipun ada empat kolom dalam tabel. Hal ini karena film di elemen 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
untuk kolom-kolom yang ada pada baris tersebut. Untuk lebih jelasnya silakan praktikan kode berikut 1. Buka notepad 2. Tuliskan kode HTML berikut Bab 3 Perintah/Tag HTML Dasar

III- 19

15 15 30

45 60 45

60 90 90

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 yang merupakan kepanjangan dari table heading. Bahkan jika sel tidak memiliki konten, Anda masih harus menggunakan atau 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 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 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 III- 20


Sabtu Minggu

Tiket terjual: 120 135

Total penjualan: Rp. 600.000 Rp. 675.000

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 atau 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 dari kolom yang ada. Hal ini karena, ketika sel meluas di lebih dari satu kolom,


III- 21

atau 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

9am 10am 11am 12am

Monday Geography Math Art

Tuesday Gym Home Ec

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 atau 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


durasi 06:00-08:00 atau dua jam, sedangkan saluran BBC dan CNN masingmasing dengan durasi satu jam. Jika Anda melihat elemen terakhir

ABC BBC CNN

6pm - 7pm Movie Comedy News

7pm - 8pm Sport Current Affairs

3. Simpan dengan nama file spanning-row.html 4. Buka di web browser dan perhatikan penggabungan tabelnya

Tabel Panjang


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 , isi tabel harus berada dalam tag dan footer tabel berada dalam tag . Untuk lebih memahaminya, lakukan contoh berikut 1. Buka notepad 2. Tulis kode HTML berikut III- 24


Tanggal Pemasukan Pengeluaran

1 Januari 2015 250 36

2 January 2015 285 48

31 Januari 2015 129 64

7824 1241

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.


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
. 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 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
Username: III- 28


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

Username:

Password:

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 . Berikut kode HTML yang harus dipraktikan: Bab 3 Perintah/Tag HTML Dasar<br /> <br /> III- 29<br /> <br /> 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... 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 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

Silakan tentukan pilihan:
Rock Pop Jazz

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


Checkbox Untuk melakukan pilihan menggunakan checkbox, atribut type diisi checkbox. Berikut contoh yang dapat dipraktikan, 1. Buka Notepad 2. Tulis kode HTML berikut

Silakan pilih musik favorit anda (boleh lebih dari satu):
Pop Dangdut Keroncong

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

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

Apa buah-buahan favorit Anda?
<select name="buah">
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

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.)
III- 32


<select name="instruments" size="3" multiple="multiple">
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

Unggah lagu anda dalam format MP3:

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

Subscribe to our email list:

III- 33

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,

Subscribe to our email list:

2. Simpan dengan nama file sumbit-image.html dan buka di web browser

Button dan Hidden Control Elemen . 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
. Berikut contohnya, sebelumnya

sudah

disediakan

gambar

di

folder

d:/Bahan

Ajar

Multimedia/Gambar/add.png, 1. Tulis kode HTML berikut di notepad

III- 34


2. Simpan dengan nama file hiddenform.html dan buka di web browser.

Elemen Form Pengelompokan Kita dapat mengelompokan kontrol yang berkaitan bersama dalam elemen
. Kebanyakan browser akan menampilkan fieldset dengan garis di sekitar tepi untuk menunjukkan bagaimana mereka terkait. Munculnya ini baris dapat disesuaikan dengan menggunakan CSS. Elemen dapat disertakan setelah pembukaan tag
dan berisi caption yang membantu mengidentifikasi maksud dari pengelompokkan form tersebut. Lakukan praktik berikut 1. Buka notepad dan tulis kode HTML berikut
Contact details Email:

Mobile:

Telephone:

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
Username:
type="text"

name="username"

required="required"

/>
Password: 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 kita isi kolom type dengan date. Berikut contoh kode HTML nya: 1. Buka notepad dan tuliskan kode HTML berikut
Tanggal Keberangkatan:
2. Simpan dengan nama file form-tanggal.html 3. Buka di web browser

HTML 5 : Input email dan URL III- 36


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 kolom type diisi email, 1. Buka notepad dan tuliskan kode HTML berikut

Please enter your email address:

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 kolom type diisi dengan url. Berikut contoh kode program untuk dipraktikkan, 1. Buka notepad dan tuliskan kode HTML berikut

Please enter your website address:

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

Cari:

2. Simpan dengan nama file pencarian.html 3. Buka pada web browser 4. Tambahkan kode berikut

Cari:

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 4 CASCADING STYLE SHEET(CSS)


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 Foreground Color <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);}
Marine Biology

The Composition of Seawater

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.

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:

Text <style type="text/css"> IV- 4


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;}
Briards

A Heart wrapped in fur

The briard, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.

Breed History

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.

by Ivy Duckett

IV- 5

4.4. Boxes CSS juga dapat diimplementasikan untuk membuat kotak pada halaman web, seperti kode berikut

Boxes <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


background-color: #ffffff;}

Home

For Sale

Repairs

About

Contact

We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.

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. Boxes <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;}

Home

For Sale

Repairs

About

Contact

We specialize in the sale and repair of classic keyboards, in particular the Fender Rhodes, Wurlitzer EP200, and Hohner Clavinet.
IV- 8


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.

Layout <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


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;}

home / news / archives / about / contact

Fixed Gear Forever

16 APRIL 2011

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.

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. Continue reading...


IV- 11

More Articles

On the Road: From the fixed gear fanatic's point of view

Brand History: Pashley Cycles - hand-built in England

Frame Wars: Innovations in cycle manufacture and repair

Touring Diary: A sketchbook in your basket

Top Ten Newcomers for 2012: A peek at what's to come

InnerTube: The best cycling videos on the web

Product Review: All baskets were not created equal

Going Public: Out & about with the founder of Public

Cycle Lane Defence: Know your rights

Bicycle Hall of Fame: The 1958 Schwinn Spitfire

Reader Survey: Share your thoughts with us!

Chain Gang: The evolution of the humble bike chain

Legal Information | Privacy Policy | Copyright © Pedal Faster 2011

IV- 12


4.7. Image Mengendalikan ukuran dan tataletak gambar/image pada halaman web akan lebih mudah apabila kita menggunakan CSS. Berikut contoh kode HTML nya,

Images <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;} Bab 4 Cascading Style Sheet (CSS)

IV- 13

Here is a selection of antique botanical prints held in our collection.

Helianthus

Passiflora

Nyctocalos

Polianthes

Ficus

Dendrobium

IV- 14


4.8. HTML 5 Layout HTML 5 memperkenalkan sekumpulan elemen baru dalam rangka mempermudah pengaturan/tata letak pada halaman web yang dibuat, berikut contohnya

HTML5 Layout <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;}

Yoko's Kitchen

home

classes

catering

about

contact

<section class="courses"> <article>

Bok Choi

Japanese Vegetarian

Five week course in London

A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.
<article>

Teriyaki Sauce

Sauces Masterclass

One day workshop

An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.

IV- 17

<section class="popular-recipes">
Popular Recipes
Yakitori (grilled chicken) Tsukune (minced chicken patties) Okonomiyaki (savory pancakes) Mizutaki (chicken stew) <section class="contact-details">
Contact

Yoko's Kitchen
27 Redchurch Street
Shoreditch
London E2 7DP

© 2011 Yoko's Kitchen

Latihan Perhatikan kode XML/HTML berikut Font test IV- 18


Buatlah Style sheet dengan nama table-style.css sehingga tampilan tabel akan seperti gambar berikut


IV- 19

IV- 20


BAB 5 PENGENALAN PHP


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


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.


V- 3

5.3. Sintaks Dasar Sebuah script bahasa pemrograman PHP didahului oleh tags : 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 : V- 4


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Halaman PHP Dasar
Ini halaman Standar HTML.

4. Pada bagian setelah tag paragraf
, tambahkan script seperti tampak berikut(cetak tebal) <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Halaman PHP Dasar
Ini halaman standar 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.


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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Halaman PHP Dasar
Ini halaman standar 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
sehingga tampak seperti : V- 6


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 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Contoh Format Komentar Program
V- 7

# Script ini tidak melakukan apa-apa. echo '
Ini sebuah baris text.
Ini baris teks yang lain.
'; /* echo 'baris ini tidak akan dieksekusi.'; */ echo "
Sekarang saya sudah selesai.
"; // akhir kode PHP. ?>

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:

V- 8


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Variable bertipe Bilangan Anda membeli barang sebanyak '.$jumlah . ' item seharga $' . $harga . ' per barang. Ditambah pajak, totalnya menjadi: $' . $total . '.
'; ?>

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 : <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Strings Buku berjudul <em>$buku ditulis oleh $nama_depan $nama_belakang.
"; ?>

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


echo "
Buku berjudul <em>$buku ditulis oleh $pengarang.
";

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 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> Konstanta Hari ini ' .HARI_INI. '.
Server ini menjalankan PHP versi ' . PHP_VERSION . ' pada ' . PHP_OS . ' sistem operasi.
'; ?>

V- 12


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 .


V- 13

V- 14


BAB 6 PEMROGRAMAN PHP


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.
Toko Alat Tulis Amalia
<select name="barangpesanan"> Jumlah pesanan: 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

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.


echo "Anda memesan ". $jumlah . " " . $barangpesanan . ".
"; echo "Terima kasih atas kesediaan Anda memesan barang dari kami!"; ?> 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.
Toko Alat Tulis Amalia

<select name="barangpesanan"> Jumlah pesanan: dan isi proses.php nya adalah "; echo "Terima kasih atas kesediaan Anda memesan barang dari kami!"; ?> 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


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: "; echo"Menampilkan pengurangan: 6 - 2 = ".$pengurangan."
"; echo "Menampilkan perkalian: 5 * 3 = ".$perkalian."
"; echo "Menampilkan pembagian: 15 / 3 = ".$pembagian."
"; 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


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:

$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:
VI- 7

{ echo "Your name is ".$my_name."!"
"; } echo "Welcome to my homepage!"; ?> Contoh

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


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 CARIKODE

Form Registrasi

Quantity Ingredient

3 Eggs

100ml Milk

200g Spinach

1 pinch Cinnamon

VI- 10


Nama

Email

Username

Password

ID User
Nama Lengkap	Bab 9 Akses Basis Data MySQL dengan PHP maxlength=”25” size=”25” /
Password

ID	:	<strong>
Nama Lengkap	:	<strong>
Password	:	<strong>

POLITEKNIK NEGERI JAKARTA

MBAL-MBUL CAFE

Contact

dan

di bagian atas halaman yang id atribut memiliki nilai top. Berikut praktik yang harus dilakukan 1. Buka notepad 2. Tulis kode berikut

Film-Making Terms

Arc Shot

Interlude

Prologue

Marine Biology

The Composition of Seawater

Briards

A Heart wrapped in fur

Breed History

Fixed Gear Forever

More Articles

Yoko's Kitchen

Japanese Vegetarian

Five week course in London

Sauces Masterclass

One day workshop

Toko Alat Tulis Amalia

Toko Alat Tulis Amalia

Form Registrasi

Contact Me

Form Mengunggah File

Proses unggah berhasil dilakukan

Upload Gagal

Form Registrasi User

Status Registrasi

Form Login

Secret Area

Buku Tamu

Tanggal	Pemasukan	Pengeluaran
1 Januari 2015	250	36
2 January 2015	285	48
31 Januari 2015	129	64
	7824	1241

POLITEKNIK NEGERI JAKARTA

Recommend Documents

Bagian ini adalah Kepala Dokumen Utama

Bagian ini adalah sub judul

Bagian ini adalah sub judul yang lain

Bagian ini adalah Tubuh/body dari Halaman web

Bagian ini adalah Tubuh/body dari Halaman web

untuk heading utama dan

adalah untuk sub heading. Apabila ada sub heading yang lebih kecil lagi dapat menggunakan

dan seterusnya sampai yang paling kecil

. Praktikan contoh berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut III- 6 Bab 3 Perintah/Tag HTML Dasar Bagian ini adalah Judul Halaman

Heading Utama

Sub Heading

Sub Heading

Sub Heading

Sub Heading

Sub Heading

MBAL-MBUL CAFE

Contact

dan

di bagian atas halaman yang id atribut memiliki nilai top. Berikut praktik yang harus dilakukan 1. Buka notepad 2. Tulis kode berikut

Film-Making Terms

Arc Shot

Interlude

Prologue

Marine Biology

The Composition of Seawater

Briards

A Heart wrapped in fur

Breed History

Fixed Gear Forever

More Articles

Japanese Vegetarian

Five week course in London

Sauces Masterclass

One day workshop

Toko Alat Tulis Amalia

Toko Alat Tulis Amalia

Form Registrasi

Contact Me

Form Mengunggah File

Proses unggah berhasil dilakukan

Upload Gagal

Form Registrasi User

Status Registrasi

Form Login

Secret Area

Buku Tamu

. Praktikan contoh berikut: 1. Buka notepad 2. Tuliskan kode HTML berikut III- 6

Bab 3 Perintah/Tag HTML Dasar

Bagian ini adalah Judul Halaman