1 Bab I. Pengantar Pemrograman Web 1 I.1. Pendahuluan Pemrograman Web digunakan untuk membangun aplikasi web, dimana aplikasi web ini dapat dibedakan ...
Bab I. Pengantar Pemrograman Web I.1. Pendahuluan Pemrograman Web digunakan untuk membangun aplikasi web, dimana aplikasi web ini dapat dibedakan menjadi : I.1.1 Web Statis Berisi atau menampilkan informasi yang bersifat tetap, dibentuk dengan menggunakan HTML (Hypertext Markup Languange) saja. Kelemahannya, setiap menginginkan perubahan harus dilakukan oleh pemrogramnya (orang yang mengerti bahasa HTML). I.1.2 Web Dinamis Berisi atau menampilkan informasi serta dapat berinteraksi dengan user yang bersifat dinamis, dibentuk dengan menggunakan bahasa HTML, Skrip (PHP, ASP, JSP, CGI) dan dikoneksikan ke basisdata (MySQL, PostgreSQL, Oracle, Microsoft Access). Perubahan informasi dalam halaman web didapat melalui perubahan data pada basisdata dan tidak harus melalui perubahan programnya, sehingga perubahan informasi dapat dilakukan oleh operator dan tidak lagi menjadi tanggungjawab programmer. Pada matakuliah ini, akan dipelajari cara membuat web dinamis. Berikut ini akan ditunjukkan mekanisme pembangkitan web secara dinamis. Browser mengirimkan permintaan HTTP
Dikirim ke Web Browser
Kode HTML
Aplikasi Web (HTML & PHP)
Web Browser (Internet Explorer & Netscape Communicator) Web Server (Apache & Xitami) Gambar 1.1 Proses pengakesan web dinamis
Proses pengakesan web dinamis adalah sebagai berikut : 1.
Web Browser (software pada komputer klien yang berfungsi menerjemahkan kode HTML menjadi halaman web), meminta halaman web (skrip PHP) menggunakan protokol HTTP.
2.
Permintaan ini akan di tanggapi oleh Web Server (server yang melayani permintaan halaman web).
2 3.
Jika halaman web yang diminta melakukan manipulasi terhadap Database Server, maka Aplikasi Web terlebih dahulu koneksi dengan Database Server, dan tentunya Database Server akan melayani permintaan dari Aplikasi Web tersebut.
4.
Jika halaman web yang diminta masih berupa skrip PHP, maka skrip ini terlebih dahulu dirubah/diterjemahkan ke dalam Kode HTML oleh mesin PHP-nya.
5.
Kemudian Kode HTML tersebut akan dikirimkan ke Web Browser (komputer klien), oleh Web Browser akan dirubah menjadi halaman web sesuai Kode HTML-nya.
Catatan : Untuk mempermudah atau memperlancar dalam mempelajari pemrograman web ini, mahasiswa diberi tugas menginstal software untuk sarana simulasi misalnya PHP Triad. I.2 HTML (HyperText Markup Language) Merupakan bahasa standard yang digunakan untuk membuat dokumen yang bisa diakses melalui web browser atau untuk menulis halaman web. Untuk menuliskan kode-kode HTML diperlukan Editor (Notepad, PHPEditor, EditPlus dan lain-lain). Kegunaan HTML : 1. Mempublikasikan dokumen secara online, sehingga bisa diakses dari seluruh dunia. 2. Mengatur tampilan dari halaman web dan isinya. 3. Membuat Form, yang digunakan untuk menangani pendaftaran atau transaksi secara online. 4. Menambahkan objek-objek seperti image, audio dan video. Command HTML biasanya disebut Tag, digunakan untuk menentukan tampilan dari dokumen HTML, dengan format : … . Tag tidak case sensitive, jadi penulisannya dapat menggunakan huruf besar maupun kecil, misalnya : atau keduanya menghasil output yang sama. Berikut ini adalah struktur dokumen HTML : <TITLE> ………
Kepala dokumen HTML ditandai dengan tag HEAD. Pada bagian kepala, untuk membuat judul halaman web dengan menambahkan tag TITLE didalamnya.
Tag HTML, untuk mengawali dan mengakhiri setiap dokumen HTML.
Bagian badan/body dokumen HTML biasa digunakan untuk menampilkan text, image link dan semua yang ditampilkan pada halaman web ditandai dengan tag BODY, biasanya juga disertai dengan atribut diikuti nilai atributnya. Contoh : artinya backgroud bagian body menjadi berwarna ungu/purple.
………
3 Contoh sederhana dokumen HTML : (WebPertamaku.html) <TITLE> Halaman Web Pertamaku Bagian badan halaman web pertamaku
TITLE
Nama berkas ( WebPertamaku.html ) BODY Gambar 1.2 Tampilan program sederhana dokumen HTML
Aturan dalam menuliskan tag-tag HTML yaitu : -
Tag ditulis dengan format diawali tanda < dan diakhiri tanda >, misalnya : .
-
Tidak boleh ada spasi kosong setelah tanda <, misalnya : <TITLE> tidak boleh dituliskan dengan < TITLE>.
-
Tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi keduanya.
I.2.1 Elemen-elemen dasar HTML. I.2.1.1 Heading (
sampai
) Untuk menentukan ukuran dari suatu berkas atau teks. Contoh programnya : (UkuranHeading.html) <TITLE>Tampilan Ukuran Heading
Heading Satu
Heading Dua
Heading Tiga
Heading Empat
Heading Lima
Heading Enam
Heading Dua
4
Gambar 1.3 Tampilan program ukuran Heading
I.2.1.2 Paragraf (
) Digunakan membentuk suatu paragraf. Contoh programnya : (Paragraf.html)
<TITLE>Penggunaan Tag Paragraf
Definisi Web Browser dan Web Server
Web Browser adalah software yang diinstal di komputer klien yang berfungsi untuk menterjemahkan kode HTML halaman web.
Web Server adalah server yang melayani akan permintaan halaman web.
Gambar 1.4 Tampilan penggunaan tag paragraf
5 I.2.1.3 List Item (
) Untuk mengelompokan data atau daftar, baik yang berurutan ( ordered list) maupun yang tidak berurutan (
unordered list). Tabel 1.1 Arti atribut pada list item, ordered list dan unordered list
Tag
Atribut
Nilai
Type
Start Type
I i A a n squre disc circle
Keterangan Digunakan untuk mengelompokan data baik yang berurutan maupun yang tidak berurutan Angka romawi besar Angka romawi kecil Huruf besar Huruf kecil Angka pertama Bullet Kotak Bullet Titik Bullet Lingkaran
<TITLE> Jadwal Praktikum
Jadwal Praktikum Di Lab. Pemrograman STMIK Akakom
SENIN
Pemrograman Visual MI_1
Struktur Data SI_1
Grafika Komputer MI_1
SELASA
Pemrograman Visual MI_2
Pemrograman Web TI_1
Pemrograman Web MI_2
RABU
Pemrograman Berorientasi Objek TI_2
Pemrograman Web TI_4
Algoritma Pemrograman TI_2
KAMIS
Pemrograman Berorientasi Objek MI_3
Algoritma Pemrograman TI_3
Pemrograman Berorientasi Objek MI_1
JUMAT
6
Pemrograman Visual MI_4
Struktur Data SI_1
Pemrograman Basisdata MI_1
SABTU
Pemrograman Basisdata MI_2
Struktur Data TI_1
Pemrograman Basisdata MI_3
Gambar 1.5 Tampilan program pengelompokan data
I.2.1.4 Pemformatan teks pada halaman (page) Tabel 1.2 Arti atribut pada pemformatan halaman
Tag
Atribut color size face
Keterangan Digunakan untuk memulai baris baru pada dokumen HTML. Menentukan warna font, dapat menggunakan nama warna (green, blue) atau dalam format bilangan hexadesimal (#000000 - #ffffff) Menentukan ukuran font dari 1 –7 . Menentukan jenis font (Courier New, Mono). Mengatur posisi teks agar berada ditengah Mengatur posisi teks agar rata kanan.
7 <sup> <sub> <small> <marquee>
Mengatur posisi teks agar rata kanan. Menebalkan cetakan teks Menampilkan teks dengan bentuk tulisan miring Menambahkan garis bawah pada teks Textnya di tulis diatas. Textnya dibawah garis. Menampilkan teks lebih kecil daripada ukuran normal Menampilkan teks lebih besar daripada ukuran normal Menampilkan teks seperti ketikan menggunakan mesin ketik Membuat teks bergerak
Contoh programnya : (PemformatanTeks.html) <TITLE>Pemformatan Text
Konsep Basis Data
Adalah suatu koleksi data komputer yang terintegrasi, diorganisasikan dan disimpan dalam suatu cara yang memudahkan pengambilan kembali. Penggunaan basis data ini dimaksudkan untuk mengatasi problem pada sistem yang memakai pendekatan berbasis berkas.
<marquee>Perangkat Lunak Basis Data
Adalah perangkat lunak sistem yang memungkinkan para pemakai membuat, memelihara, mengontrol dan mengakses basis data dengan cara yang praktis dan efisien. DBMS dapat digunakan untuk mengakomodasikan berbagai macam pemakai yang memiliki kebutuhan akses yang berbeda-beda. Menampilkan teks seperti ketika menggunakan mesin ketik....
Gambar 1.6 Tampilan program pemformatan teks
8 Pemberian warna pada atribut color, bgcolor, dan text dapat mengikuti aturan berikut : ⇒
Menggunakan nama warna.
⇒
Menggunakan nilai RGB (Red-Green-Blue), dengan format “#RRGGBB”. Tabel 1.3 Tabel nilai warna
Warna
RGB
Warna
RGB
Warna
RGB
Warna
RGB
aqua black blue fuchsia
00FFFF 000000 0000FF FF00FF
gray green lime maroon
808080 008000 00FF00 800000
silver teal yellow white
C0C0C0 8080 FFFF00 FFFFFF
navy olive purple red
80 808000 800080 FF0000
I.2.1.5 Membuat Tabel Untuk membuat tabel pada halaman HTML, menggunakan tag berikut : Tabel 1.4 Tabel tag untuk membuat tabel pada halaman HTML
Tag
Keterangan
…
…
…
…
…
Membuat table dan sebagai tanda awal dan akhir table Membuat baris dalam table Membuat kolom (sel) Membuat judul kolom Membuat judul pada table
Tabel 1.5 Tabel atribut-atribut yang ada dalam tag
Menampilkan garis table dengan memberikan nilai untuk BORDER Membuat warna latar belakang table Mengatur tinggi table (tinggi sel) Mengatur lebar sel Mengatur jarak bagian sel terhadap tepi dalam bingkai table Mengatur jarak teks terhadap tepi kiri Tabel 1.6 Tabel atribut-atribut yang digunakan dalam
,
, dan
Atribut
Fungsi
rowspan colspan align valign
digunakan dalam
. atribut ini digunakan untuk menggabungkan beberapa baris sel digunakan dalam
atau
. berfungsi menggabungkan beberapa sel dalam satu baris mengatur peletakan dengan memberikan nilai justify, left, center, atau right mengatur teks menurut posisi vertikal dengan memberikan nilai baseline, top, middle, atau bottom
Contoh programnya : (Tabel.html) <TITLE>Penggunaan Tabel Text
Daftar Penerimaan Mahasiswa STMIK AKakom Yogyakarta
9
Tahun Akademik
Jurusan
Teknik Informatika
Sistem Informasi
Manajemen Informatika
Teknik Komputer
Komputer Akuntansi
2000/2001
300
100
400
75
80
2001/2002
325
75
375
100
75
2002/2003
350
80
375
75
80
2003/2004
500
100
450
100
80
2004/2005
550
100
450
125
80
10
Gambar 1.7 Tampilan contoh program tag tabel
I.2.1.6 Membuat Hyperlink Anchor tag … , digunakan untuk menentukan hyperlink dalam dokumen HTML. Properti href, untuk menentukan tujuan dari hyperlink tersebut. 1. Link Address. -
Absolute Address, merupakan full internet address (URL) yang meliputi protocol, network location, path dan nama file, misalnya : Informasi lain .
11 3. Mengubah gambar menjadi Hyperlink, misalnya : Contoh programnya : (Hyperlink1.html dan Hyperlink2.html) 1. Hyperlink1.html
Pengantar Pemrograman Web
Pemrograman Web digunakan untuk membangun aplikasi web, dimana aplikasi web ini dapat dibedakan menjadi : 1. Web Statis, dibentuk dengan menggunakan HTML (Hypertext Markup Languange) saja.Web statis ini mempunyai kelemahan, setiap menginginkan perubahan harus dilakukan oleh pemrogramnya (dalam hal ini adalah orang yang mengerti bahasa HTML). 2. Web Dinamis, dibentuk dengan menggunakan bahasa HTML, Skrip (PHP, ASP) dan dikoneksikan ke basisdata (MySQL, PostgreSQL). Dalam web dinamis ini perubahan informasi dalam halaman web dapat ditangani melalui perubahan data yang berasal dari basisdata dan tidak harus melalui perubahan programnya. Maka perubahan informasi dapat dilakukan oleh operator dan tidak lagi menjadi tanggungjawab programmer.
Dalam matakuliah ini, kita akan mempelajari cara membuat web dinamis. Berikut ini akan ditunjukkan mekanisme pembangkitan web secara dinamis. Proses pengakesan web dinamis adalah sebagai berikut : 1. Web Browser (software yang diinstal di komputer klien yang berfungsi untuk menterjemahkan kode HTML menjadi halaman web), meminta sebuah halaman berupa skrip PHP) suatu situs web. 2. Permintaan ini akan di tanggapi oleh Web Server (server yang melayani akan permintaan halaman web). Karena yang diminta masih berupa skrip PHP, maka skrip ini terlebih dahulu dirubah/diterjemahkan ke dalam kode HTML oleh mesin PHP-nya. 3. Setelah dirubah ke dalam kode HTML, Web server akan segera mengirim kode HTML tersebut ke komputer klien. 4. Setelah sampai pada komputer klien, maka kode HTML tersebut oleh web browser akan dirubah menjadi halaman web sesuai kode-kode HTML-nya.
Untuk mempermudah atau memperlancar dalam mempelajari pemrograman web ini alangkah baiknya anda menginstal PHP Triad sebagai sarana simulasi. PHP Triad adalah software installer PHP secara instant, yang berjalan pada lingkungan windows, dimana setelah PHP Triad selesai diinstal secara otomatis kita telah menginstal Web server (Apache) dan database MySQL. Langkah-langkahnya :
2. Hyperlink2.html 1. Siapkan master PHPTriad yang dapat diperoleh dengan download di www.download.com atau mengcopy masternya di Lab. Terpadu. 2. Klik 2 kali pada file phptriad.exe, maka secara otomatis program akan menampilkan tampilan PHPTriad 2.11 Setup : Licence Agreement. 3. Kemudian klik Next, maka installer akan mengekstrak semua file PHPTriad dan installer secara otomatis akan membentuk direktori C:\Apache.
12 4. Tunggu sampai prosesnya selesai dan pastikan pada waktu menginstal tidak terjadi error dan anda tidak sedang menjalankan program-program lain. Sampai disini telah menunjukkan bahwa proses instalasi telah selesai. 5. Tahap berikutnya adalah untuk mengetes apakah PHPTriadnya telah berjalan dengan baik.
Caranya : 1. Jalankan Web Server Apache dengan klik tombol Start, pilih menu Programs, pilih menu PHPTriad lalu klik Start Apache. 2. Maka akan muncul jendela Start Apache dan biarkan saja selama kita menjalankan skrip-skrip PHP. 3. Jalankan web browser (internet explorer), lalu isi address-nya dengan : http://localhost 4. Apabila tampilan web browser-nya, berupa ucapan Selamat (Welcome to PHPTriad for Windows v2.11.) hal ini menunjukkan bahwa instalasi yang telah anda lakukan sukses. 5. Langkah berikutnya mencoba untuk menjalankan skrip (HTML atau PHP) sederhana buatan kita sendiri. 6. Buatlah skrip HTML seperti dibawah ini, untuk sementara menggunakan editor Notepad untuk mengetikan skrip HTMLnya.
13 I.2.1.7 Format image Dari beberapa format image, ada 3 jenis format image yang umum digunakan : -
JPG (Joint Photographic Expert Image), nama file.jpg
-
GIF (Graphical Interchange Format), nama file.gif
-
PNG (Portable Network Graphics), nama file.png
Untuk menginsertkan image ke dokumen HTML digunakan tag image , dengan format , misalnya : . Atribut yang digunakan : Tabel 1.7 Tabel atribut-atribut yang digunakan dalam tag image
Atribut Align
Nilai
Keterangan
Top, Bottom, Middle
Digunakan untuk menentukan posisi image terhadap text. Digunakan untuk menetukan posisi image di dokumennya. Hspace digunakan untuk menentukan berapa banyak ruang kosong (pixel) yang dimiliki sebuah image pada sisi kiri dan kanannya, sedangkan Vspace pada sisi atas dan bawah.
Left, Right, Center Hspace, Vspace
Contoh programnya : (Image.html)
Satu Cinta Dua Jiwa Oleh : Siti Nurhaliza
Seharusnya kau lebih mengerti Seandainya kau selami ke dasar Tak perlu lagi dikau meragui Pada dasarnya bercinta
Renungkanlah dimana asalnya Lahirnya cinta mu yang tulus Jangan dikau hanya merasai Sentuhan dari zahirnya
Kini pastinya kau kan bertemu
Kala cinta dari mu mula berseri
Satu cinta dua jiwa Indahnya rasa bagai pelangi Satu cinta seribu rasa Bersemi kasih di dua hati
Resah rasa bila tak bersama Berbisiklah naluri cinta mu Emosinya tiada berarah Tiap minit kau curiga Selamanya kau kan percaya Dan naluri dan emosi Andai cinta mu teguh berdiri Pasti bahagia
14
Gambar 1.10 Tampilan 1 halaman image
Gambar 1.11 Tampilan 2 halaman image
15 I.2.1.8 Form Beberapa kegunaan form dalam aplikasi web : -
Memperoleh data-data user untuk mendaftar pada service yang di sediakan.
-
Memperoleh informasi pembelian secara online.
-
Memperoleh feedback dari user mengenai website yang kita buat.
Tag untuk membuat form dalam dokumen HTML adalah tag
Gambar 1.12 Tampilan form input text
16 I.2.1.8.2 Password Untuk menangani password atau data rahasia lain, sehingga pada waktu mengisi input yang bertipe password yang muncul dilayar adalah tanda asteris (*), atribut yang digunakan : Tabel 1.10 Tabel atribut-atribut yang digunakan dalam tag password
Atribut Name Value Size Maxlength Tabindex
Keterangan Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Untuk menentukan sebuah nilai defaultnya. Menentukan seberapa lebar kotak textnya. Jumlah maksimum karakter yang dapat dimasukkan. Mengontrol urutan tab kotak input, yang akan dimasukin pada saat menekan tombol Tab.
I.2.1.8.3 Checkbox Digunakan untuk membuat kotak cex (checkbox). Tabel 1.11 Tabel atribut-atribut yang digunakan dalam tag
Atribut Name Value Size Checked
checkbox
Keterangan Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih.
I.2.1.8.4 Radio Digunakan untuk membuat tombol radio (radio botton), dimana disini hanya dapat memilih satu pilihan dari seluruh group tombol radio dan nama yang diberikan harus sama semua. Tabel 1.12 Tabel atribut-atribut yang digunakan dalam tag radio
Atribut Name Value Size Checked
Keterangan Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Nilai data yang akan diberikan kepada script yang dituju. Menentukan ukuran kontrolnya. Menunjukkan bahwa kotak ceknya telah dipilih.
Contoh programnya : (InputRadioButton.html) Contoh Input Tombol Radio
18
Gambar 1.15 Tampilan form input radio button
I.2.1.8.5 Text Area Untuk membuat textarea, dimana disini kita dapat menuliskan text mencakup sejumlah baris dan kolom. Tag yang digunakan adalah . Tabel 1.13 Tabel atribut-atribut yang digunakan dalam tag textarea
Atribut Name Cols Rows
Keterangan Untuk menamai nilai data sehingga scriptnya bisa memisah data dari field yang lain. Menentukan jumlah kolom layar yang disediakan bagi area teks. Menentukan jumlah baris layar yang disediakan bagi area teks.
I.2.1.8.6 Menu Pop-Up Digunakan untuk memberikan menu pilihan kepada para pembaca. Menu ini mirip dengan radio button, dimana kita hanya dapat memilih satu pilihan dari berbagai nilai yang ada dalam menu tersebut. Dalam menu pop-up ini jumlah pilihan yang ada dapat lebih banyak. Tag yang digunakan adalah <select> … .
19 Tabel 1.14 Tabel atribut-atribut yang digunakan dalam tag MenuPopUp