MODUL PEMROGRAMAN WEB MANAGEMEN INFORMATIKA STMIK AMIKOM Yogyakarta www.amikom.ac.id
Modul Pengantar Pemrograman Web
BAGIAN 1 : PENDAHULUAN 1. INTERNET Internet berasal dari kata interconnection networking yang mempunyai arti hubungan berbagai komputer dengan berbagai tipe yang membentuk sistem jaringan yang mencakup seluruh dunia (jaringan komputer global) dengan melalui jalur telekomunikasi seperti telepon, wireles, dan sebagainya. Jaringan komputer ini diintegrasikan oleh protokol-protokol yang umum disebut TCP/IP. TCP (Transmission Control Protocol) memastikan bahwa semua hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) mentransmisikan data dari satu komputer ke komputer lain. TCP/IP secara umum berfungsi untuk memilih rute terbaik transmisi data, memilih rute alternatif jika suatu rute tidak dapat digunakan, mengatur dan mengirimkan paket-paket data, dan lain-lain. Untuk dapat menggunakan fasilitas internet, biasanya Anda harus berlangganan ke salah satu ISP (Internet Service Provider). Dengan memanfaatkan internet, pemakai komputer di seluruh dunia dimungkinkan untuk mencari berbagai informasi yang dibutuhkan, memakai data bersama-sama, berkomunikasi dengan cara saling kirim email atau menggunakan fasilitas chatting, membahas topik tertentu pada news group, dan lain-lain.
2. WEB SERVER DAN WEB BROWSER WWW (World Wide Web) merupakan jaringan beribu-ribu komputer yang dikategorikan menjadi dua: client dan server dengan menggunakan software khusus membentuk sebuah jaringan yang disebut jaringan client-server. Dalam cara kerja WWW ada dua hal yang terpenting yaitu software web server dan software web browser. Web server menyimpan/menyediakan informasi dan memproses permintaan dari client, apabila ada client yang meminta informasi maka server mengirimkannya. Informasi yang diakses dapat berupa teks, gambar, suara, maupun animasi. Server juga mengirimkan perintah-perintah ke client bagaimana cara menampilkan semua informasi tersebut dalam bentuk HTML (Hypertext Markup Language). Client membuat permintaan informasi dan kemudian menangani pengaksesan informasi kepada end user. Web browser merupakan suatu software yang dirancang untuk mengambil informasiinformasi dari suatu server komputer pada jaringan internet. Software web browser ini juga biasa disebut dengan browser saja. Beberapa contoh browser yang banyak digunakan antara lain: 1 2 3 4 5
Internet Explorer dari Microsoft Corporation Netscape Navigator dari Netscape Communication OPERA dari Opera Software ASA Mosaic buatan NCSA Lynx, browser teks pada sistem Unix
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
2
Modul Pengantar Pemrograman Web
3. WEBSITE Website (situs web) merupakan alamat URL (Uniform Resource Locator) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan topik tertentu. Suatu situs web terdiri atas: 1 Web page (halaman web), merupakan halaman khusus dari website tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik dalam web page yang sama maupun web page yang lain pada website yang berbeda. 2 Homepage (halaman utama) merupakan halaman pertama atau sampul dari suatu website yang biasanya digunakan untuk memberikan informasi singkat mengenai isi dari website tersebut dan siapa pemiliknya. Website yang ada di internet dapat dikategorikan menjadi: 1 Web statis, yaitu web berisi/menampilkan informasi-informasi yang sifatnya statis (tetap). 2
Web dinamis dan interaktif, merupakan web yang dapat menampilkan informasi secara dinamis dan up-to-date serta dapat melakukan interaksi dengan user. Agar dapat memberikan informasi yang relevan, website dinamis biasanya terhubung dengan database sehingga informasi yang ditampilkan pada website sesuai dengan data yang ada pada database. Untuk membuat website yang bersifat dinamis dan interaktif diperlukan bahasa pemrograman khusus.
4. PEMROGRAMAN WEB Teknologi pemrograman web dibedakan menjadi dua: 1 Client-side programming. Client-side programming merupakan teknik pemrograman web dimana perintah program dijalankan di web browser, sehingga ketika client meminta dokumen yang mengandung script, maka script tersebut akan didownload dari servernya kemudian dieksekusi pada browser yang bersangkutan. Pemrograman web yang tergolong client-side programming: JavaScript, VbScript, HTML. 2 Server-side programming. Pada server-side programming, perintah-perintah program (script) terlebih dahulu dieksekusi di web server, kemudian hasilnya dikirimkan ke browser dalam bentuk HTML biasa. Pemrograman web yang tergolong server-side programming: CGI/Perl, ASP, JSP, PHP, ColdFussion, dan sebagainya.
Tim Penyusun : 1. Barka Satya,S.Kom , STMIK AMIKOM Yogyakarta 2. Team Rumpun Mata Kuliah Pemrograman Web STMIK AMIKOM 3. Edison.P.Lase, STMIK AMIKOM Yogyakarta
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
3
Modul Pengantar Pemrograman Web
BAGIAN 2 : HTML (HYPERTEXT MARKUP LANGUAGE) HTML (hypertext markup language) merupakan suatu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah suatu dokumen teks biasa dan disebut markup language karena menggunakan tanda-tanda tertentu yang disebut tag untuk mengatur bagaimana suatu dokumen ditampilkan pada browser. Pada mulanya HTML didesain untuk menjadi sebuah bahasa yang menggambarkan suatu struktur dokumen yang tidak terikat pada perangkat keras dan perangkat lunak tertentu. Tetapi dalam penggunaannya, HTML menjadi semacam bahasa untuk mengatur format tampilan dokumen saja. HTML dirasakan sangat terbatas untuk mendukung pembuatan aplikasi-aplikasi rumit pada website. Untuk membuat program aplikasi yang berjalan di atas web, Anda harus terlebih dahulu menguasai HTML. Saat ini telah banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia DreamWeaver, Netscape Composer dan sebagainya, yang memudahkan Anda untuk merancang suatu halaman web tanpa harus menguasai tag-tag HTML. Akan tetapi untuk menjadikan halaman web Anda lebih dinamis dan lebih interaktif, penguasaan terhadap terhadap tag-tag HTML akan sangat diperlukan. Untuk membuat situs web yang dinamis dan interaktif, tidak cukup dengan mengandalkan HTML saja, terlebih lagi dalam membangun suatu web database. Anda akan melibatkan bahasa scripting seperti PHP, ASP, JavaScript, dan sebagainya. Dalam bahasa scripting, script diletakkan di antara tag-tag HTML, sehingga tanpa penguasaan terhadap tag-tag HTML tentu saja Anda tidak akan tahu dimana akan meletakkan suatu script di dalam suatu dokumen HTML. Sebaliknya banyak tag HTML yang dimasukkan di dalam suatu script, misalnya untuk pindah baris, membuat tabel, memasukkan gambar, link, dan untuk keperluan lainnya. Tentu saja Anda harus mengetahui tag apa saja yang diperlukan untuk keperluan tersebut.
STRUKTUR DASAR HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML. Dikatakan markup language karena HTML berfungsi untuk memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser sesuai keinginan. Hal tersebut dapat dilakukan dengan menambahkan elemen atau sering disebut sebagai tag. Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan simbol “<” dan “>”. Pasangan dari sebuah tag ditandai dengan simbol ” / “. Misalnya pasangan dari tag adalah . Dalam hal ini disebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen bila ditulis dengan atributnya adalah sebagai berikut: Dalam penulisan tag HTML tidak bersifat case sensitive, artinya penggunaan huruf kecil ataupun kapital tidak menjadi masalah. Script HTML dapat dituliskan dalam text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. Untuk mengeksekusi file HTML dapat dilakukan dengan menggunakan browser seperti Internet Explorer atau Netscape Navigator melalui menu File|Open, kemudian browse ke lokasi dan nama file dimana file HTML disimpan.
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
4
Modul Pengantar Pemrograman Web Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut: berisi teks yang akan muncul pada title bar browser berisi teks, gambar, atau apapun yang ingin ditampilkan pada halaman web ada pada bagian ini. Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag . Di dalam tag ini terdapat dua bagian besar, yaitu bagian yang diapit oleh tag ..... dan tag ...... Bagian yang diapit oleh tag ..... merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti ..... yang berfungsi untuk menampilkan judul pada title bar window web browser dan tag lain misalnya <meta>. Bagian yang diapit oleh tag ..... merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan kepada pengguna nantinya.
KODE WARNA Sebelum mempelajari lebih jauh tentang tag-tag HTML alangkah baiknya terlebih mengetahui kode warna yang akan sering digunakan dalam penulisan tag-tag HTML. Pengaturan warna untuk halaman HTML menggunakan kode warna RGB (red, green, blue) yang mana setiap warna ditampilkan dalam dua digit nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau, dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah, dan seterusnya. Berikut ini adalah contoh beberapa kode warna standar: Warna Aqua = Cyan (biru air) Aquamarine (biru kehijauan) Black (hitam) Blue (biru) Brass (kuning tua) Chocolate (cokelat) Copper (keunguan) Fuchsia (merah keunguan) Gray (abu-abu) Green (hijau) Lime (hijau terang) Magenta
BAGIAN HEAD Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini menyimpan informasi yang berguna mengenai dokumen. Isi bagian head tidak ditampilkan ketika dokumen HTML diakses melalui browser,
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
5
Modul Pengantar Pemrograman Web kecuali bagian title yang merupakan judul dokumen. Elemen-elemen yang terdapat pada bagian head antara lain:
Tag Tag ini digunakan untuk memberi judul dokumen. Judul dokumen sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen. <title>judul dokumen
2.1.1. Tag Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini berguna bila dalam dokumen tersebut terdapat link-link yang bersifat relatif, agar link tersebut tetap bekerja meskipun dokumen dipindahkan ke direktori lain atu ke komputer lain. Elemen mempunyai sebuah atribut, yaitu href yang menunjukkan sebuah alamat URL.
2.1.2. Tag Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya:
2.1.3. Tag <meta> Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen HTML, seperti refresh, description, author (pengarang), keyword (kata kunci), dan lain-lain. Properti description dan keyword merupakan properti yang penting dan dijadikan referensi bagi kebanyakan program search engine yang ada di internet untuk menemukan suatu situs. <meta name=”keywords” content=”asyik, lucu,humor”>
BAGIAN BODY Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen . Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link, dan lain-lain.
Atribut elemen body background bgcolor text link vlink alink bgproperties topmargin leftmargin
= lokasi dan nama file latar belakang image dokumen = warna latar belakang dokumen, default putih = warna teks dokumen, default hitam = warna link dokumen, default biru = warna visited link dokumen, default ungu = warna active link dokumen, default merah = [fixed|none] (mengatur properti gambar latar belakang) = batas atas dokumen (pixel) = batas kiri dokumen (pixel)
PENGATURAN FORMAT DOKUMEN HTML 2.1.4. Heading Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal di HTML, yaitu dari
sampai
.
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
6
Modul Pengantar Pemrograman Web
Latihan01.html Latihan-1: Heading
TOKO BUKU SERBA MURAH
Toko kami menyediakan
Alat Tulis
Pensil, Ballpoint, Penggaris, Dll.
Buku-buku Pelajaran
Ilmu pasti, Ilmu bumi, Sejarah, Dll.
Peralatan Kantor
Meja, Kursi, File manager, Dll.
2.1.5. Paragraph
Tag paragraph
berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web Anda. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left | center | right], sebagai defaultnya adalah left.
2.1.6. Break Tag break berfungsi untuk memberikan baris baru dalam halaman web Anda. Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun browser akan membacanya sebagai satu baris apabila tidak terdapat tag .Tag break tidak memerlukan tag penutup .
2.1.7. Horizontal Rule
Tag horizontal rule berfungsi untuk menampilkan garis horisontal di halaman web Anda. Tag ini sekaligus akan membuat baris baru. Tag tidak memerlukan elemen penutup . Atribut elemen horizontal rule align
= [ left | center | right ] (perataan horisontal, default center)
size
= tebal garis, pixel, default 2
width = lebar garis, pixel atau persen, default 100%) color
= warna garis batas
noshade (garis solid)
Latihan02.html Latihan-2: Paragraf dan Break
TOKO BUKU SERBA MURAH
Toko kami menyediakan
Alat Tulis
Pensil Ballpoint Penggaris Dll.
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
7
Modul Pengantar Pemrograman Web
Buku-buku Pelajaran
Ilmu pasti Ilmu bumi Sejarah Dll.
Peralatan Kantor
Meja Kursi File manager Dll.
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
8
Modul Pengantar Pemrograman Web
2.1.8. Preformatted <pre> Tag <pre> digunakan untuk membuat tampilan dokumen pada browser sama dengan tampilan pada text editor (preformatted). Dengan menggunakan tag <pre> maka tag
dan tag tidak diperlukan lagi.
Latihan03.html
Latihan-3: Penggunaan Tag PRE Tag pre dapat digunakan untuk membuat tampilan seperti ini: <pre> Tabel Mahasiswa: ====================================================== |Id | Nama Mahasiswa | No. Mhs | Jurusan | Sem. | ====================================================== | 1 | Budi S. | 02.01.2109 | Teknik | 4 | | 2 | Yulia Prastica | 02.02.2233 | Manajemen | 4 | | 3 | Andi Mulyana | 01.02.1234 | Manajemen | 6 | | 4 | Leni Susanti | 00.01.0909 | Teknik | 8 | ====================================================== Script program: for($id = 1; $id <= 4; $id++) { if($nama != “”) print($nama); else print(“Kosong”); }
PEMFORMATAN KARAKTER Font pada halaman HTML dapat diformat sesuai dengan desain yang Anda tentukan, baik ukuran, jenis maupun warna dengan menggunakan tag . Atribut elemen font size
= ukuran huruf, default 3
color
= warna huruf, default black
face
= nama_huruf
Elemen ragam karakter teks bold
: menghasilkan teks tebal (bold)
teks italic
: menghasilkan teks miring (italic)
teks underline
: menghasilkan teks bergaris bawah (underline)
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
9
Modul Pengantar Pemrograman Web
Latihan04.html Latihan-4: Format Karakter
TOKO BUKU SERBA MURAH
Toko kami menyediakan
Alat Tulis
Pensil Ballpoint Penggaris Dll.
Buku-buku Pelajaran
Ilmu pasti Ilmu bumi Sejarah Dll.
Peralatan Kantor
Meja Kursi File manager Dll.
ELEMEN LIST Properti
digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list
) dan dalam bentuk nomor (ordered list ).
Atribut elemen list Ordered list
type=tipe_list>
type = [ 1 | a | A | i | I ] (tipe penomoran, default 1) Unordered list
type=tipe_list>
type = [ disc | square | circle ] (tipe bullet, default disc) Latihan05.html Latihan-5: Menggunakan List
TOKO BUKU SERBA MURAH
Toko kami menyediakan
Alat Tulis
Pensil
Ballpoint
Penggaris
Dll.
Buku-buku Pelajaran
Ilmu pasti
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
10
Modul Pengantar Pemrograman Web
Fisika
Kimiya
Biologi
Ilmu bumi
Sejarah
Dll.
Peralatan Kantor
Meja
Kursi
Kursi lipat
Kursi plastik
Kursi-kursian
File manager
Dll.
MENAMPILKAN IMAGE Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkannya digunakan tag .
Atribut elemen image src
= lokasi dan nama gambar
alt
= teks alternatif, tex yang ditampilkan ketika gambar disorot dengan mouse
width
= lebar gambar, pixel
height
= tinggi gambar, pixel
align
= [ top | middle | bottom | left | right ] (perataan gambar)
MEMBUAT TABEL Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Didalam membuat tampilan website yang menarik, para programmer sering menggunakan tabel untuk mempermudah penempatan objek pada dokumen HTML. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag
.....
. Elemen tabel berisi properti
.....
untuk menentukan baris (table row) yang di dalamnya terdapat properti
.....
untuk menampilkan data pada setiap sel tabel (table data). Struktur lengkap dari elemen tabel adalah sebagai berikut:
data baris 1 kolom 1
data baris 1 kolom 2
data baris 2 kolom 1
data baris 2 kolom 2
Latihan07.html Latihan-7: Membuat tabel sederhana Berikut contoh tabel dengan rowspan dan colspan:
baris 1 kolom 1
baris 1 kolom 2
baris 2 kolom 1
baris 3 kolom 1
baris 3 kolom 2
baris 4 kolom 2
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
12
Modul Pengantar Pemrograman Web Atribut elemen tabel width
= lebar tabel, pixel atau persen
height
= tinggi tabel, pixel atau persen
border
= tebal garis tepi, pixel
cellspacing
= spasi antar sel, pixel
cellpadding
= spasi di dalam sel, pixel
align
= [ left | center | right ] (perataan tabel)
bgcolor
= warna latar belakang tabel
Atribut table row
align
= [ left | center | right ] (perataan sebaris sel secara horisontal)
valign
= [ top | middle | bottom ] (perataan sebaris sel secara vertikal)
bgcolor
= warna latar belakang baris
Atribut table data
rowspan
= jumlah baris yang dispan oleh sel (penggabungan baris)
colspan
= jumlah kolom yang dispan oleh sel (penggabungan kolom)
align
= [ left | center | right ] (perataan horisontal)
valign
= [ top | middle | bottom ] (perataan vertikal)
width
= lebar sel, pixel atau persen
height
= tinggi sel, pixel atau persen
bgcolor
= warna latar belakang tabel
Latihan08.html Latihan-8: Mengatur bentuk tabel
Latihan menampilkan gambar dan link dalam tabel
Kolom sebelah kiri untuk menampilkan gambar, sedangkan baris paling bawah untuk menempatkan link
MEMBUAT FORM Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox, checkbox, radio button, dan button. Untuk mendeklarasikan sebuah form digunakan tag . Di dalam tag ini akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen, form juga dapat menuliskan sembarang teks, tag, image.
Untuk pengembangan materi web (CSS,HTML 5,Javaskrip dll) silahkan akses di www.w3schools.com
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
14
Modul Pengantar Pemrograman Web Atribut elemen form action
= lokasi dan nama file (file yang menangani form)
method = [ get | post ] (metode HTTP untuk men-submit form) 2.1.9. Properti Masukan Pada Elemen Form 1. Text box Digunakan untuk memasukkan input berupa text. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi value = akan menampilkan isinya sebagai nilai default
2. Password Digunakan untuk memasukkan password. size = ukuran dari textbox dalam karakter, default 20 maxsize = maksimal banyaknya karakter yang dapat diterima name = nama dari variabel yang dikirim ke suatu aplikasi
3. Hidden
4.
Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel Check box Check box digunakan untuk dapat memilih lebih dari satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel checked (checkbox yang ditandai)
5. Radio button Radio button digunakan untuk dapat memilih hanya salah satu pilihan. name = nama dari variabel yang dikirim ke suatu aplikasi value = nilai dari variabel checked (radio button yang ditandai) 6. Push button Elemen ini biasanya digunakan untuk JavaScript, VBScript, atau script lain untuk menghasilkan suatu aksi. name = nama dari variabel yang dikirim ke suatu aplikasi value = label teks di atas tombol 7. Submit Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama variabel dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM. name = nama dari variabel yang dikirim ke suatu aplikasi value = label teks di atas tombol 8. Image submit button Digunakan untuk menggantikan tombol standar submit dengan image. name = nama dari variabel yang dikirim ke suatu aplikasi
STMIK AMIKOM Yogyakarta
www.amikom.ac.id
15
Modul Pengantar Pemrograman Web 9. Reset Digunakan untuk mereset (menghapus) semua masukan dalam form dengan cepat. value = label teks di atas tombol. 10. Text area Elemen untuk memasukkan teks secara leluasa seperti pada notepad. name = nama dari variabel yang dikirim ke suatu aplikasi rows = panjang baris dalam karakter cols = tinggi (jumlah baris) 11. Select <select> . . . Daftar isi dalam properti select menggunakan tag
