modul i html€¦ · 4. menambahkan obyek-obyek seperti image, audio, video dan juga java applet...

1

MODUL I HTML

1. Dasar Teori

1. Teori 1.1. Pengertian HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file text murn i yang dapat dibuat dengan editor teks sembarang. Dokumen ini dikenal sebagai web page. File-file HTML in i berisi instruksi-instruksi yang kemudian diterjemahkan o leh browser yang ada dikomputer client (user) sehingga isi informasinya dapat ditampilkan secara visual dikomputer pengguna (user).

HTML dikenal sebagai standar bahasa yang digunakan untuk menampilkan dokumen web. Yang bisa dilakukan dengan HTML yaitu : 1. Mengontrol tampilan dari web page dan contentnya 2. Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh

dunia. 3. Membuat online form yang bisa digunakan untuk menangani pendaftaran,

transaksi secara online. 4. Menambahkan obyek-obyek seperti image, audio, video dan juga java applet

dalam dokumen HTML.

Tujuan : Mampu Menjelaskan pengertian, struktur dasar, tag-tag HTML dan membuat aplikasi dengan perintah-perintah HTML

Tugas Pendahuluan 1. Apakah yang anda ketahui tentang World Wide Web (WWW) ? 2. Sebutkan tiga komponen pokok yang menjadi tulang punggung

keberadaan sebuah web dan jelaskan masing-masing komponen tersebut?

3. Apa yang anda ketahui tentang URL (Uniform Resource Locator) ?

4. Apa yang anda ketahui tentang HTTP dan sebutkan macam-macam protocol web?

5. Dalam struktur HTML dokumen terdapat tiga tag penting yaitu HTML, HEAD dan BODY. Apa yang dimaksud dari tiga tag tersebut dan bagaimana cara penggunaannya?

2

1.2. Browser dan Editor

Ada dua cara untuk membuat sebuah web page yaitu dengan HTML editor atau dengan editor text b iasa (misalnya notepad atau editplus). Untuk latihan atau mencoba materi sebaiknya menggunakan notepad, setelah itu pada bagian mendekat i akh ir dapat menggunakan editor HTML, hal ini d imaksudkan agar mudah memahami dan terbiasa secara primitif membuat dokumen web. Sedangkan HTML editor dapat menggunakan software DreamWeaver. Software ini merupakan salah satu software untuk mendesain website atau homepage, selain software front page yang sering kita dengar.

Untuk melakukan penamaan dokumen maka p ilih suatu nama, sembarang nama kemudian tambahkan sebuah ekstensi ”.htm” atau ”.html” (tanda kutip tidak perlu dituliskan karena digunakan sebagai penjelas saja). Dan dokumen HTML disusun oleh elemen-elemen. ”Elemen” merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Beberapa Contoh elemen adalah: head, body, table, paragraf, dan list. Elemen dapat berupa teks murni, atau bukan teks atau keduanya. Untuk itu komponen-komponen yang diperlukan dalam mendesain web adalah: 1. Sebuah komputer yang siap web. Komputer dengan windows 95/98/NT,

Mac atau Unix. 2. Ed itor text, notepad atau yang lainnya. 3. Koneksi ke server web (kalau mungkin koneksi ke internet) 4. Browser web, d irekomendasi Internet Explorer atau Netscape Navigator. 5. Langkah berikutnya adalah surfing Internet, melihat-lihat website untuk

mendapatkan dan membangun ide dari apa yang dilihat.

1.3. Struktur dasar HTML Elemen yang dibutuhkan untuk membuat suatu dokumen HTML,

dinyatakan dengan tag-tag sebagai berikut: § HTML

Setiap dokumen HTML selalu d iawali dan ditutup dengan tag HTML. § HEAD

Bagian head biasanya berisikan tag TITLE, meta tag dan semua script java atau yang lain yang akan dieksekusi di browser. Dibagian inilah kita memberikan bookmark untuk keperluan pencarian (searching) dengan keyword.

§ BODY Bagian body digunakan untuk emnampilkan text, image link dan semua yang akan ditampilkan pada web page. Semua umum dokumen web dibagi menjadi dua section (bagian), yaitu section head dan section body. Sehingga setiap dokumen html harus mempunyai pola dasar sebagai berikut:

3

<html> <head> <title> Selamat Datang di Dunia Internet </tit le> </head> <body> <p> Dokumen HTML yang pertama </p> </body> </html>

Setiap dokumen HTML harus diawali dengan menuliskan tag <html> dan </html> diakhir dokumen. Tag ini menandai elemen HTML, yang berarti dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada satu elemen HTML.

Section atau elemen head dimulai dengan tag <head> diawal, dan tag </head> diakhir. Sect ion ini berisi informasi tentang dokumen htmlnya. Minimal informasi yang dituliskan dalam elemen ini adalah judul dari dokumen, judul ini akan ditampilkan pada caption bar dari window browser, d itandai dengan menggunakan tag <title> dan diakhiri </title>. Sehingga bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Sedangkan tag TITLE yang berfungsi untuk mengeluarkan judul pada title bar window web browser.

Section atau elemen body ditandai dengan tag <body> diawal dan tag </body> diakhir. Section body merupakan elemen terbesar didalam dokumen HTML. Pada bagian ini anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin disampaikan pada pengguna nantinya.

1.4. Tag-tag dalam <body>:

1. Warna latar belakang Menggunakan warna <body bgcolor=#nnnnnn> . . . </body> 2. Menggunakan gambar <body background=“nama_file_gambar”> . . . </body> 3. Heading Untuk judul atau sub judul dalam dokumen HTML <h1 [align=”left”|”center”|”right”]> . . . </h1> <h2 [align=”left”|”center”|”right”]> . . . </h2> <h6 [align=”left”|”center”|”right”]> . . . </h6> 4. Paragraph Untuk mengatur perataannya (kiri, tengah, kanan): <p [align=”left”|”center”|”right”]> . . . </p> 5. preformatted text Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:

4

<pre> . . . </pre> 6. blockquote Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML: < blockquote> . . . </ blockquote> 7. Break Untuk menulis teks pada baris berikutnya: <br> 8. Font Ukuran font <font size=“n”> . . . </font> Jenis font <font size=“n” face=“jenis_font”> . . . </font> Warna font <font size=“n” face=“jenis_font” color=“warna”> . . . </font> 9. Untuk format dokumen Bold: <b> . . .</b> Emphasized: <em> . . . </em> Italic: <i> . . . </i> Superscript: <sup> . . .</sup> Subscripted: <sub> . . . </sub> Struck trough: <del> . . . </del>

10. Gambar Untuk Memuat gambar ke dalam halaman Web <img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] /> 11. Untuk hypertext link Format: <a href=”address” > . . . </a> Link ke dokumen lain <a href=”nama_dokumen” > . . . </a> Link ke bagian tertentu dalam dokumen yang sama <a href=”#target” > . . . </a> <a href=”target” > . . . </a> Link ke alamat URL atau WebSite <a href=”alamat_URL” > . . . </a> Link ke alamat Email

5

<a href=”mailto:alamat_email” > . . . </a> Link File yang akan didownload <a href=”nama_file” > . . . </a>

2. Praktikum : 1. Ketik koding di bawah in i dan amati hasilnya :

2. Ketiklah koding di bawah ini untuk penggunaan tag paragraph <p>, tag ganti baris <br>, tag preformatted <pre>, tag indentasi <blockquote>, tag tebal <b> atau <strong>, tag subscript <sub>, tag superscript <sup>, tag miring <i>, tag kecil <small>, tag besar <big> dan tag emphasize <em> untuk membuat dokumen di bawah ini.

6

3. Penggunaan Tag <blockquote> untuk membuat halaman html seperti di bawah ini :

4. Masing-masing dari halaman Html diatas Buatkan Background gambar yang sesuai 5. Pada semua dokumen html diatas gabungkan semuanya (link kan antar

halaman dokuman) dan Tambahkan daftar website favorite yang dapat dilink ke alamat aslinya yaitu: 1. ”Trunojoyo” di link ke www.t runojoyo.ac.id, 2. ”Jawa Pos” di link ke www.jawapos.co.id, 3. ”Ilmu Komputer” di link ke www.ilmukomputer.com. 4. “Email” di link ke aplikasi email dengan tujuan [email protected]

http://www.trunojoyo.ac.id/

http://www.jawapos.co.id/

http://www.ilmukomputer.com/

mailto:[email protected]

7

3. Tugas Buatlah halaman web sebagai homepage pribadi, yang berisi tentang data pribadi misalkan nama, NRP, alamat rumah, tempat & tanggal lahir, riwayat pendidikan, email, hobby, karya-karya penelitian/ program yang pernah dibuat, pengalaman kerja, kesan pertama masuk Universitas Trunojoyo, citacita, pengalaman suka-duka, bahasa program yang dikuasai, programprogram komputer (software) yang pernah dicoba, system operasi yang dikuasai dan lain-lain. Gunakan semua tag-tag yang telah dipelajari d iatas. 4.Catatan Praktikum

8

MODUL 2 HTML Lanjut

(Table, Form, Frame, Hyperlink)

1. Dasar Teori 1.1. Tabel

a. Atribut ROWSPAN Atribut ini d igunakan untuk menggabungkan beberapa baris dalam satu kolom menjadi satu baris (merge cell)

b. Atribut COLSPAN Atribut ini d igunakan untuk menggabungkan beberapa kolom dalam satu baris menjad i satu kolom (merge cell), dimana atribut ini juga dapat digabungkan dengan atribut sebelumnya yaitu ROWSPAN

c. Atribut Latar Belak ang Tabel Untuk memberikan warna latar belakang didalam table maka dapat digunakan atribut bgcolor disertai dengan latar yang diinginkan, misalkan latar belakang table akan diisi dengan warna biru, maka dapat dilakukan BGCOLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat dilakukan dengan BACKGROUND=”namafile.jpg”, file yang

Tujuan : Mampu menjelaskan table, frame, form, image, hyperlink pada HTML Lanjut dan membuat aplikasinya

Tugas Pendahuluan 4. Apa yang anda ketahui tentang tabel, frame dan form dalam

html? 5. Jelaskan atrribut yang terdapat pada tabel selain atribut rowspan,

colspan, align, dan jelaskan juga fungsinya masing-masing 6. Pada Form terdapat 2 metode untuk pengiriman data ke file

tujuan yaitu dengan metod GET dan POST. Jelaskan perbedaan keduanya.

7. Apakah yang dimaksud dengan frame set, bagaimana menaplikasikan dalam halaman web/html

9

dapat digunakan untuk latar belakang adalah *.JPG, *.GIF, *.BMP dan *.PNG.

d. Atribut Align Atribut ini d igunakan untuk pengaturan pelurusan dari suatu cell, adapun macam pelurusan ini ada t iga yaitu LEFT, CENTER, dan RIGHT. Pelurusan cell ini diperlukan terutama untuk informasi data mengenai mata uang, atau yang berhubungan dengan nilai uang misalkan daftar harga. Bila ada daftar harga maka sebaiknya digunakan align RIGHT, sehingga akan memudahkan pembacaan.

1.2 Tabel Bersarang (Nested Table) Kata bersarang (nested) sering digunakan pada istilah-istilah pemrograman dan sering dijumpai dalam setiap pemrograman. Demikian pula dalam pembuatan script HTML yaitu table bersarang, yang artinya adalah didalam suatu table terdapat table yang lain, kemungkin ini bias saja terjadi dengan meletakkan tag <table> didalam tag <table> lainnya, sehingga didapatkan table yang bersarang didalam table lainnya. 1.3. Tag FrameSet

Sesuai dengan namanya frame yang berarti bingkai, adalah berhubungan dengan pengaturan bingkai sebagai pembentuk jendela tampilan pada browser. Sehingga dapatlah jendela browser dibagi menjadi beberapa frame. Ada tiga pengaturan frame, yaitu secara vertical, horizontal dan kombinasi dari vertical dan horizontal. Script HTML yang digunakan untuk pengaturan frame maka tidak dapat digunakan untuk membuat halaman tampilan web, untuk itu diperlukan file yang berisi script HTML lain dan disisipkan kedalam script frame tesebut. Jadi bila ada dua frame maka diperlukan dua file HTML. Untuk dapat menyisipkan ketiga file HTML tesebut kedalam frame, diperlukan nama yang jelas dan benar serta dimana letak folder/ direktorinya, karena informasi tersebut digunakna didalam tag <frameset>. 1.4. Form Di gunakan untuk menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan: a. Elemen Form Tag <FORM> d igunakan untuk membuat form dalam document HTML

Atribut Fungsi

<form method=“post/get” action=“. . .”> . . . </form>

10

Method Metode pengiriman data ke file tujuan (POST atau GET)

Action Aksi yang akan dilakukan jika user menekan tombol Submit

Name Memerikan nama tiap masukan

Value Memberikan nilai suatu masukan

Type Tipe form yang akan digunakan

Tabel 3.5. Attribut untuk membuat form dalam document HTML b. HTML Input Elemen

Pada saat membuat form anda bisa meletakkan control-control pada form untuk memperbolehkan inputan dari user . semua control biasanya di letakkan di antara tag <FORM></FORM> tapi anda juga bias meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag <input>. Berikut macam-macam component input: 1. Textbox

Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan jumlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximum character yang bisa di masukkan. Contoh Penulisan syntax textbox :

2. Submit dan Reset

Tombol Submit: digunakan ketika user mengisi form dan ingin mengirimkan ke server, sedangkan Tombol Reset: digunakan ketika user ingin menghapus/mengosongkan semua masukan yang ditulis dalam form

3. Checkbox digunakan Untuk memberi beberapa pilihan kepada user 4. Radio button

Fungsi: Untuk memberi (hanya) satu pilihan kepada user, Set iap radio button control harus memiliki nama yang sama, sehingga user hanya bisa memilih satu option saja. Radio button juga harus secara exp lisit memberikan n ilai ke atribut value.

<INPUT TYPE=”TEXT” NAME=”textbox” VALUE=”” SIZE=”20”>

11

5. Text Area Fungsi: Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak komentar Untuk membuat textarea gunakan tag <TEXTAREA></TEXTAREA>

6. Daftar Drop Down

Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijinkan user untuk memilih 1 p ilihan saja)

1.5. Hyperlink Fasilitas hyperlink dipergunakan untuk menghubungkan atau membuat suatu link didalam sebuah dokumen maupun alamat URL. Ada beberapa hal yang perlu diketahui tentang model model dari hyperlink d iantaranya yaitu : · Link Address

· Anchor · Link Ke dokumen lain · Link ke bagian tertantu dalam dokumen · Link ke bagian tertentu pada dokumen lain

2. Kegiatan Praktikum :

1. Ketiklah koding dibawah ini simpan dengan nama tabel1.html

2. Ketiklah koding di bawah in i dan simpan dengan nama nestedtabel.html

12

3. Gabungkan antara no 1 dengan nomor 2 dalam satu halaman

menggunakan frame

13

4. Ketiklah koding di bawah ini

5. Buat tampilan html seperti di bawah ini

14

3. Tugas Praktikum

Buatlah suatu halaman web d imana didalamnya terdapat tabel, fo rm,

frame dan hyperlink yang menampilkan daftar harga suatu barang (misalnya buku,

peralatan musik, alat elektronik, VCD, komputer,dan sebagainya) dimana berisi

nomor, nama (t ipe), spesifikasi (keterangan), dan data lain yang berkaitan dengan

barang tersebut. Gunakan tag-tag yang telah dipelajari diatas.

4. Catatan Praktikum

15

MODUL 3 CSS (Font, Text, color)

(Cascading Style Sheet)

1. Dasar Teori 1.1. Selector Adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam style didefinisikan bagaimana setiap selector akan bekerja (font, color dan lain-lain.). Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk mengakt ifkan style yang telah didefinisikan. Jenis-jenis Selector:

a. Selector HTML Digunakan untuk mendefin isikan style yang berhubungan dengan tag HTML, melakukan redefin isi tag normal HTML Syntax: SelectorHTML {Properti:Nilai;}

b. Selector Class Digunakan untuk mendefin isikan style yang dapat dipakai tanpa melakukan redefinisi tag HTML.

Tujuan : Mampu menjelaskan mengenai pengenalan CSS, selector, komentar,

mekanis me, membuat aplikasi perintah-perintah CSS dan

menggabungkannya dengan HTML.

Tugas Pendahuluan 1. Apa kelebihan menggunakan CSS pada HTML!

2. Apa yang dimaksud dengan pengelompokan selector?

Bagaimana caranya.

3. Pada mekanisme pengaplikasian CSS terdapat Style yang

didefinisikan di file eksternal, apa maksudnya, beri contoh

programnya.

16

Syntax: ClassSelector {Properti:Nilai;} c. Selector ID

Digunakan untuk mendefin isikan style yang berhubungan dengan suatu object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer Syntax: #IDSelector {Properti:Nilai;}

1.2. Mekanis me Mengaplikasikan CSS 1. Style didefinisikan dalam tag HTML (tag tunggal) 2. Style didefinisikan d i dalam bagian <head> dan diap likasikan untuk

seluruh dokumen HTML tersebut. 3. Style didefinisikan d i file eksternal yang selanjutnya dapat digunakan oleh

dokumen HTML manapun dengan memasukkan CSS tersebut dalam dokumen yang diinginkan melalu i URI.

1.3. Elemen-elemen CSS

1. Font Digunakan untuk mengatur tingkah-laku huruf (font). Elemen ini mempunyai beberapa properti. Satu properti dapat mempunyai beberapa nilai.

2. Text

Element text akan membuat tampilan teks menjadi leb ih menarik

17

3. Color

Elemen color yang digunakan untuk mengatur warna teks dan background halaman web

4. Link

Digunakan sebagai penghubung sehingga dapat digunakan untuk berpindah dari satu bagian ke bagian lain, dari satu halaman ke halaman lain bahkan dari satu situs ke situs lainnya. CSS menyediakan elemen link yang dapat digunakan untuk mengatur perilaku link.

18

2. Kegiatan Praktikum :

Ketiklah lah script di atas di text-editor, kemudian simpanlah. Lalu bukalah d

browser. Perhatikanlah hasilnya!

Hapuslah tanda komentar pada baris ke-6. Perhatikanlah hasilnya! Bandingkan

dengan sebelumnya!

Pada baris ke-6, ubahlah kata underline menjadi none, lalu perhatikan

perubahannya!

Tambahkan script berikut pada baris ke-8 :

h3 { background-color : #073; color : #f00; }

Perhatikan tampilannya!

19

3. Tugas Pertanyaan.

1. Modifikasilah script di atas sehingga link-nya dapat berubah warna pada

saat mouseover.

2. modifikasilah CSS pada soal no.1 shg tampak spt gbr berikut :


20

MODUL 4 CSS

(CSS Image) 1. Dasar Teori CSS Image digunakan untuk mengatur tampilan dari gambar (image) pada html. Elemen ini mempunyai beberapa attribut. Satu properti dapat mempunyai beberapa nilai. Tabel 4.1. Property dan value CSS yang mendukung format Gambar

Attribute Values

background Color size percentage pos-key-term url repeat repeat-x repeat-y no-repeat fixed

Tujuan : Peserta Praktikum dapat menggunakan CSS-Images untuk memformat atau

membuat halaman web tampil lebih menarik.

Tugas Pendahuluan 1. Jelaskan deskripsi dari masing-masing atribut pada tabel di bawah! 2. Berikan contoh implementasi sederhana untuk membuat tampilan

dari salah satu attribut dari tabel tersebut (kode ditulis tangan). 3. Apa yang dimaksud dengan CSS Image?

21

scroll

background-attachment Fixed scroll

background-color Color none

background-image url

background-position Size percentage pos-key-term

background-repeat repeat repeat-x repeat-y no-repeat

border Solid double groove dotted dashed inset outset ridge hidden four-sides width-key-term

border-bottom size color width-key-term

border-bottom-color color

border-bottom-style solid double groove dotted dashed inset outset ridge hidden

22

border-bottom-width size width-key-term

border-color color

border-left size color width-key-term

border-left-co lor color

border-left-style solid double groove dotted dashed inset outset ridge hidden

border-left-width size width-key-term

border-right size color width-key-term

border-right-color Color

border-right-style solid double groove dotted dashed inset outset ridge hidden

border-right-width size width-key-term

border-style solid double groove dotted dashed

23

inset outset ridge hidden four-sides width-key-term

border-top size color width-key-term

border-top-color color

border-top-style solid double groove dotted dashed inset outset ridge hidden

border-top-width size width-key-term

border-width size width-key-term

clear left right both

color color

display block inline

float left right

2. Kegiatan praktikum 1. Ketiklah script menurut Gambar 4.1 pada program ed itor standar (spt.

Notepad, dll), lalu simpanlah dg nama css_image.html.

2. Tampilkan file css_image.html pada browser. Perhatikanlah tampilanya.

24

3. Pada baris 8, ubahlah value background menjadi #fff. Perhatikan

perbedaan tampilannya.

4. Sisipkan script berikut di antara baris 16 dan 17 :

background: #fff;

Perhatikan apa yang terjad i!

5. Ubahlah lag i script di atas (pada poin no.4) menajd i

background: url(images/bg-body.gif);

Perhatikan apa yang terjad i!

6. Pada baris 20, ubahlah value float menjad i right. Lalu pada baris 26,

ubahlah menjad i:

margin: 0 5px 5px 15px;

Perhatikan perbedaan tampilannya.

7. Ubah-ubahlah lebar dan tinggi gambar pada baris 21 dan 22; ketebalan

dan warna border gambar pada baris 23; lebar padding pada baris 24.

Perhatikan masing-masing perubahan tampilannya!

25

Gambar 4.1. Script Percobaan 4

3. Tugas

1. Apa yang terjadi pada percobaan no.3? Jelaskan!

2. Apa yang terjadi pada percobaan no.4 dan 5? Jelaskan!


26

4. Jelaskan apa yang dapat Anda simpulkan dari percobaan

no.7!

5. Buatlah halaman html yang serupa dengan tampilan berikut

27

MODUL 5 CSS (Navigasi dan layout CSS)

1. Dasar Teori Tabel 5.1. Property dan value CSS yang mendukung format Menu Navigasi

Attribute Value

list-style circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal inside outside url none

list-style-image url

Tujuan : 1. Peserta Praktikum dapat menggunakan CSS-Layout untuk memformat

atau mendesain halaman web lebih dinamis tanpa menggunakan table sebagai layoutnya

2. Peserta Prakt ikum dapat mendesain menu navigasi menggunakan CSS pada halaman web agar tampil lebih menarik.

Tugas Pendahuluan 3. Jelaskan deskripsi dari masing-masing atribut pada tabel navigasi! 4. Jelaskan tentang Order-List dan UnOrder-List! 5. Jelaskan deskripsi dari masing-masing atribut pada tabel CSS layout! 6. Apa yang Anda ketahui tentang CSS Layout? Jelaskan!

28

list-style-position inside outside

list-style-type circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal

Tabel 5.2. Property dan value CSS yang mendukung format Layout Halaman

Web

Property Value

Clear Left right both none

Cursor Url auto crosshair default pointer move e-rezise ne-rezise nw-rezise n-rezise se-rezise sw-rezise s-rezise w-rezise text wait help

Display None inline block

29

list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption

Float Left right none

Position Static relative absolute fixed

Visib ility Visib le hiodden collapse

Kegiatan praktikum : Untuk Navigasi CSS

1. Ketiklah script sesuai Gambar 5.1 pada program editor standar (spt.

Notepad, dll), lalu simpanlah dg nama css_navigasi.html.

2. Tampilkan file css_navigasi .html pada browser. Perhatikanlah

tampilanya!

3. Pada baris 16, ubahlah value display menjadi inline. Perhatikan

perubahannya!

30

Gambar 5.1 Script Percobaan 5

4. Pada baris 16, ubahlah value display menjadi none. Perhatikan

perubahannya!

5. Pada baris 26, ubahlah value color menjad i yellow. Perhatikan

perubahannya!

6. Tambahkan baris berikut diantara baris ke-26 dan 27 :

31

text-decoration: line-through;

7. Ubah-ubahlah ketebalan border, jenis dan warnanya pada baris 13, 18, dan

19, demikian juga margin dan paddingnya pada baris 9 dan 10.

Perhatikan perubahannya!

Untuk CSS Layout


Notepad, dll), lalu simpanlah dg nama css_layout.html.

2. Tampilkan file css_layout .html pada browser. Perhatikanlah tampilanya!

3. Tambahkan script css berikut :

Perhatikan perbedaan tampilannya!




32



33






34


Tugas

Buatlah halaman html yang serupa dengan tampilan berikut (navigator dan sub-

navigator) :

Buatlah css layout dg 3 kolom, spt gambar berikut :

35

MODUL 6 CSS Menu Drop Down

1. Teori Tabel 7.1. Property dan value CSS yang mendukung format menu drop-down

Attribute Value

list-style circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal inside outside url none

list-style-image url

list-style-position inside outside

Tujuan : Peserta Prakt ikum dapat mendesain menu drop-down dengan hanya

menggunakan CSS agar tampil lebih menarik

Tugas Pendahuluan 1. Jelaskan tentang nested-list pada HTML!

2. Apa yang Anda ketahui tentang -moz-border-radius ?

36

list-style-type circle square disc upper-alpha lower-alpha upper-roman lower-roman decimal

-moz-border-radius -

Position Static relative absolute fixed

2. Kegiatan praktikum


Notepad, dll), lalu simpanlah dg nama css_menu.html.

2. Tampilkan file css_menu .html pada browser. Perhatikanlah tampilanya!

37



38



39




6. Pada style-script pada poin no.3, antara baris 10 dan 11, tambahkan sript

berikut :

-moz-border-radius: 25px;


7. ada style-script pada poin no.4, antara baris 14 dan 15, tambahkan sript

berikut :

40

-moz-border-radius: 25px;


3. Tugas






6. Jelaskan apa yang dapat Anda simpulkan dari seluruh rangkaian

percobaan di atas!

41

MODUL 7 Java Script (Dialog Box)

1. Dasar Teori 1.1. Pengertian JavaScript

Javascript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu dokumen HTML. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user artinya di sisi browser bukan di sisi server web. JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test dan setiap instruksi diakh iri dengan karakter t itik koma (; ).

1.2. Bentuk skrip Skrip dari JavaScript terletak d i dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator . Contoh skrip dari JavaScript adalah sebagai berikut :

Tujuan : Peserta Praktikum dapat menggunakan Dialog-Box dalam Javascript

untuk membuat tampilan web tampil leb ih interaktif.

.

Tugas Pendahuluan

4. Jelaskan apa yang dimaksud dengan metode, apa bedanya metode

write dan writeln.

5. Sebutkan perbedaan antara java script dengan HTML dan CSS

6. Buat program java script sederhana untuk menghitung luas dan

keliling bujur sangkar (gunakan fungsi dan kotak dialog pada java

script)

42

<script type=“txt/javascript">



</script>

1.3. Meletakkan JavaScript dalam dokumen HTML Ada beberapa cara untuk meletakkan kode JavaScript d i dalam dokumen/halaman HTML :

· Menggunakan tag <SCRIPT> · Menggunakan file ekstern · Melalui event tertentu

1.4. Variable a. Konsep Variabel

Variable adalah suatu obyek yang berisi data-data, yang mana dapat di modifikasi selama pengeksekusian program. Di JavaScript kita bisa memberikan nama variabel sepanjang yang kita suka, akan tetapi harus memenuhi kriteria berikut ini .

· Nama variabel adalah case-sensitive (a dan A adalah 2 contoh variabel yang berbeda)

· Nama variabel harus dimulai dengan suatu huruf atau oleh karakter garis bawah (underscore)

Tipe data: · Numeric

· String · Boolean · Null

b. Event

Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event didalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai, dan lain sebagainya. Event administrator memperbolehkan kita untuk mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event administrator tersebut adalah sebagai berikut : OnEvenement = "Aksi_Javascript_atau_Fungsi();" Untuk penggunaan link hiperteks, maka sintaksnya adalah sebagai berikut :

43

<a href ="onEvenement ='Aksi_Javascript_atau_Fungsi();'>Link</a>

c. Operator Operator adalah simbol yang memungkinkan kita untuk memanipulasi

variabel, dengan kata lain melakukan operasi operasi , mengevaluasi, dan lain lain d. Struktur Kondisional

Struktur kondisional adalah instruksi yang memungkinkan untuk melakukan test apakah satu kondisi adalah benar atau tidak, dan memungkinkan juga terjadinya proses interaksi di dalam skrip yang kita buat

e. Metode

Metode adalah suatu fungsi yang diasosiasikan dengan satu obyek , satu aksi yang bisa kita eksekusi pada satu obyek. Metoda pada obyek dari navigator adalah fungsi fungsi yang sudah di definisikan sebelumnya (predefined) berdasarkan aturan aturan HTML dan kita tidak bisa memodifikasinya. Akan tetapi bisa membuat metoda yang personalisasikan sendiri untuk setiap obyek yang kita buat. Mari kita lihat contoh tentang dokumen HTML, yang terdiri dari obyek yang bernama document, obyek ini mempunyai metoda yang bernama write() yang berguna untuk memodifikasi isi dari dokumen HTML dengan menampilkan teks tertentu 1.5. Kotak Dialog

Kotak dialog adalah satu jendela yang tampil d i bagian depan (layer paling atas) menyusul satu event yang di jalankan. Ada 3 kotak d ialog : 1. Alert : digunakan untuk memperingatkan pengunjung hal-hal atau dalam kasus

tertentu memberikan instruksi. Syntax:

window.alert(‘text’) 2. Prompt, digunakan untuk menampilkan sebuah prompt yang juga mempunyai

kotak isian yang dapat menerima sesuai informasi dari pengunjung. Syntax:

window.prompt(‘text’,’defaultvalue’) 3. Confirm, Digunakan untuk memperingatkan pengunjung agar menguji atau

menerima sesuatu dengan memilih tombol OK atau Cancel untuk konfirmasi. Syntax:

window.confirm(‘text’) 2. Kegiatan Praktikum :

1. Ketiklah script berikut, lalu jalankan :

44

Apakah yang terjadi?

2. Ketiklah script berikut, lalu jalankan :

45

Apakah yang terjadi?

3. Buat Tugas tambahan (sesuai tugas dari asisten lab.) 3. Tugas

1. Ubahlah kode program Javascript untuk perhitungan Luas, dengan

menggunakan kotak dialog untuk memasukkan nilai Panjang dan Lebar, serta

menggunakan kotak d ialog untuk menampilkan hasil perhitungan Luas.

2. Buatlah kode program Javascript yang pada saat dijalankan akan menanyakan

Nama Barang, Harga Barang, dan Jumlah Barang untuk 3 barang yang

berbeda dan akan menampilkan hasil penjumlahan dari total harga yang harus

dibayar dari ke-3 barang tersebut, seperti tampak d i bawah ini. Program akan

menanyakan Nama Barang, Harga Barang dan Jumlah

46

Hasil perhitungan akan menampilkan tabel seperti tampak di bawah in i:

47

MODUL 8 Java Script (Fungsi)

1. Dasar Teori a. Fungsi Fungsi adalah subprogram yang memungkinkan kita untuk menjalankan sekelompok instruksi dengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalam badan suatu program. Suatu fungsi, juga bisa memanggil d irinya sendiri, ini kita sebut dengan fungsi rekursif (akan tetapi jangan lupa untuk meletakkan kondisi khusus supaya fungsi bisa berhenti, kalau tidak bisa membahayakan kelangsungan program secara global). JavaScript sendiri mempunyai fungsi native (predefined) yang dapat diaplikasikan untuk satu atau banyak jenis obyek spesifik, kita sebut fungsi ini sebagai metoda b. Deklarasi fungsi

Sebelum digunakan, suatu fungsi harus di definisikan terlebih dahulu karena untuk memanggil fungsi tersebut dari dalam program, navigator harus mengenalinya terlebih dahulu, dalam art ian mengenali namanya, argumennya, dan instruksi di dalamnya. Pendefin isian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut : function Nama_dari_Fungsi(argumen1, argumen2, ...) { daftar instruksi atau blok instruksi }

Tujuan : Peserta Prakt ikum dapat menggunakan fungsi pada javascript untuk

memudahkan pembuatan client-side program.

.

Tugas Pendahuluan

1. Sebutkan fungsi-fungsi built-in Javascript yang berkaitan

dengan tanggal, matematika dan string!

48

c. Pemanggilan fungsi Untuk mengeksekusi satu fungsi, kita cukup memanggil nama dari fungsi

tersebut yang diikuti dengan kurung buka, argumen(jika ada) dan di tutup dengan kurung tutup. Nama_dari_Fungsi() ; d. Parameter dari fungsi

Kita bisa melewatkan parameter di dalam suatu fungsi, dalam artian kita berikan nilai atau nama variabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kita melewatkan beberapa parameter ke dalam fungsi, parameter tersebut dipisahkan oleh tanda koma, baik pada saat deklarasi ataupun pada saat pemanggilan. Contoh program JavaScript untuk menampilkan kotak dialog : <HTML> <HEAD> <SCRIPT language="Javascript">  </SCRIPT> </HEAD> <BODY> <A href=" javascript:;" onClick="Tampilkan1();">Teks1</A> <A href=" javascript:;" onClick="Tampilkan2();">Teks2</A> </BODY> </HTML> atau cara kedua berikut akan memberikan hasil yang sama : <HTML> <HEAD> <SCRIPT language="Javascript">  </SCRIPT> </HEAD>

49

<BODY> <A href=" javascript:;" onClick="Tampilkan('Teks1');">Teks1</A> <A href=" javascript:;" onClick="Tampilkan('Teks2');">Teks2</A> </BODY> </HTML> Hasil akh ir dari kedua program itu sama saja, akan tetapi program kedua lebih fleksibel karena kita hanya punya satu fungsi yang bisa menampilkan sembarang teks.

Gambar 5.1. Fungsi yang menampilkan sembarang teks

Kegiatan Praktikum :

1. Ketiklah script di bawah ini pada program editor standar (spt. Notepad,

dll), lalu simpanlah dg nama js_fungsi.html.

2. Tampilkan file js_fungsi .html pada browser. Perhatikan lah tampilanya!

3. Hilangkan script pada baris 19, lalu perhatikan perbedaan tampilannya!

Kembalikan perubahan poin no.3 spt semula, lalu ubahlah baris 13 dan 14

menjadi :

50

Perhatikan perbedaannya!

Tugas



3. Jelaskan apa yang dapat Anda simpulkan dari seluruh rangkaian percobaan

di atas!

51

4. Bubatlah script pengecekan bilangan ganjil/genap!

5. Buatlah sebuah fungsi dengan kemampuan sebagai berikut:

· apabila parameter (“luas”,10,20) maka akan mengembalikan nilai luas.

· apabila parameter (“keliling”,10,20) maka akan mengembalikan nilai

keliling.

6. Buatlah sebuah fungsi yang akan menggambar tabel sesuai dengan

parameter baris x kolom. contoh: tabel(2,2) maka akan menggambar tabel

sebagai berikut:

52

MODUL 9 Java Script (Form Validation)

1. Dasar Teori

A. Kegiatan Praktikum.

Tujuan : Peserta Praktikum dapat mengaplikasikan Java script yang digunakan untuk melakukan validasi pada form masukan HTML sehingga mampu menghadirkan interaksi antara halaman web dan user.

.

Tugas Pendahuluan

1. Jelaskan apa yang dimaksud Object pada Java Script

2. Sebutkan apa saja Object standart yang ada di java script.

3. Jelaskan apa yang dimaksud dengan Event pada java Script

4. Sebutkan event-event yang ada pada java script kemudian jelaskan

fungsi dan penggunaannya masing-masing.

53

1. Ketiklah script di atas. Lalu jalankan!

2. Cobalah isi field nama, lalu Submit. Apa yang terjadi?

3. Cobalah isi field email, lalu Submit. Apa yang terjadi?

4. Cobalah isi field nama dan email, lalu Submit. Apa yang terjadi?

5. Cobalah isi semua isian form, lalu Submit. Apa yang terjadi? ? Apa

perbedaannya dengan percobaan No.4?

B. Tugas Pertanyaan.

1. Apa perbedaan hasil percobaan No.2 dan No.3? Jelaskan jawabanmu!

2. Apa perbedaan hasil percobaan No.4 dan No.5? Jelaskan jawabanmu!

3. Modifikasilah script di atas, sehingga bisa mengantisipasi field list/drop-

down pada form!

4. Buatlah validator untuk mendeteksi nomor/angka!

54

MODUL 10 DASAR PHP

(Variabel, Operator, struktur control)

1. Dasar Teori 1.1. Memulai PHP PHP (Personal Home Page Tools) merupakan bahasa skrip yang digunakan untuk membuat halaman web yang dinamis. PHP bersifat open source product. Pengguna dapat mengubah source code dan mendistribusikannya secara bebas serta diedarkan secara gratis. PHP bersifat server side scripting yang dapat ditambahkan kedalam HTML, sehingga suatu halaman web tidak lagi bersifat statis, namun bersifat dinamis. Sifat server side berart i pengerjaan skrip PHP dilakukan di web server kemudian hasilnya dikirimkan ke browser. 1.2. Mengenal XAMPP

XAMPP merupakan sebuah tool yang menyediakan beberapa paket perangkat lunak kedalam satu buah paket. Dalam buku ini, penulis menggunakan

Tujuan : Mampu menjelaskan perintah-perintah dasar-dasar PHP (Variabel , Operator, struktur control) dan membuat aplikasi dengan perintah-perintah PHP.

Tugas Pendahuluan 1. Apa yang anda ketahui tentang PHP, mulai dari asal usulnya

sampai dengan keleb ihan dan kekurangan penggunaan pemrograman dengan PHP?

2. Bagaimana aturan-aturan dalam: a. Skrip PHP dan cara pemodelannya b. Nama variabel PHP

3. Jelaskan yang anda ketahui tentang: a. Variabel g lobal b. Variabel Session c. Operator d. Struktur Percabangan If dan switch, Berikan contoh

programnya

55

XAMPP versi 1.4.6. Dengan Menginstal XAMPP, kita tidak perlu lag i melakukan isntalasi dan konfigurasi web server apache dan MySQL secara manual. Karena XAMPP akan menginstalasi dan mengkonfigurasinya secara otomatis. Untuk menginstal XAMPP, lakukanlah langkah-langkah berikut:

1. Jalankan file xampp-win32-1.4.6-installer.exe 2. Ketika muncul jendela seperti gambar 1.1, pilih lah bahasa dalam proses

instalasi yang ingin anda gunakan, kemudian klik tombol OK.

Gambar 1.1 Memilih bahasa instalasi XAMPP

3. Ketika muncul jendela seperti gambar 1.2, klik tombol next.

Gambar 1.2 Memulai Setup XAMPP

4. Pada jendela instalasi selanjutnya, bacalah persetujuan lisensi XAMPP, kemudian klik tombol I gree.

5. Kemudian ketika muncul jendela untuk mengisi destination folder dengan c:\apachefriends, lalu klik tombol install

6. Ketika muncul jendela proses instalasi, tunggulah beberapa saat hingga proses isntalasi selesai.

7. Klik tombol fin ish. XAMPP telah berhasil anda install dalam folder c:\apachefriends, sesuai dengan yang anda isikan pada langkah ke-5.

1.3. Skrip Dasar PHP

PHP sebagai alternatif lain memberikan soulsi sangat murah (karena gratis digunakan) dan dapat berjalan diberbagai jenis platform. PHP (atau resminya PHP

56

: Hypertext Preprosessor) adalah skrip bersifat server-side yan ditambahkan kedalam HTML. PHP sendiri merupakan singkatan dari Personal Home Page Tools. Skrip in i akan membuat suatu aplikasi dapat diintegrasikan kedalam HTML sehingga suatu halaman web tidak lagi bersifat statis, namun menjad i bersifat dinamis. Sifat server side berarti pengerjaan skrip dilakukan diserver, baru kemudian hasilnya dikirmkan ke browser.

Cara Penulisan skrip PHP ada dua macam, yaitu Embedded Script dan Non Embedded Script. Contoh dari jenis skrip PHP diatas ditunjukkan dalam gambar 7.1 berikut :

1.4. Variabel, Tipe Data dan Operator

PHP mengenal adanya variable dan operator sama seperti bahasa perograman lainnya. Variabel diperlukan untuk mendeklarasikan dan menganalisis suatu nilai. Adapun operator diperlukan untuk melakukan perhitungan-perhitungan matematis, memberi nilai kedalam variabel tertentu dan membandingkan dua nilai variabel.

a. Variabel Variabel d igunakan untuk menyimpan data sementara dan nilainya bisa berubah-ubah setiap kali program dijalankan. Data yang disimpan dalam variabel akan hilang setelah program selesai dieksekusi. Variabel dimulai dengan tanda ’$’ dan diikuti dengan nama variabelnya, tanpa memandang apakah data tersebut integer, real maupun string. PHP akan secara otomatis mengkonversi data menurut tipenya. Untuk dapat menggunakan variabel, perlu d ilakukan dua hal yaitu: § Deklarasi § Inisialisasi

b. Tipe Data Variable PHP mempunyai beberapa tipe data, yaitu: § Integer (bilangan bulat) § Floating Po int § String

c. Operator Operator adalah suatu simbol yang dipakai untuk memanipulasi nilai suatu variabel. Variabel yang nilainya dimodifikasi oleh moderator disebut operand. Misalnya 3-2, 3 dan 2 adalah operand dan – adalah operator

57

Macam-macam operator adalah : · Operator Aritmatika

· Operator Comparison · Operator Logika · Operator in i digunakan untuk membandingkan dua nilai variabel yang

bertipe boolean. Hasil yang didapat dari penggunaan logical operator adalah boolea\

· Operator Assigment digunakan untuk memberikan/mengisi nilai ke dalam variabel tertentu. Operator yang digunakan adalah “=” yang berarti operand kiri d iberi nilai sama seperti operand kanan.

Contoh:

<?PHP $kata=" Mahasiswa Unijoyo"; $kata.=" Mari Belajar PHP"; print("$kata");

?>

Pada contoh diatas, operator “=” digunakan untuk memberi nilai “mahasiswa Unijoyo” kepada variabel nama. Beberapa operator assignment yang lain dapat dilihat tabel 1 d ibawah ini:

Tabel 1. Operator Assigment

Operator Keterangan Contoh Operasi yang setara = Mengisi niali ke

suatu variable $kampus=”unijoyo”;

$kampus = ”unijoyo”;

+= Menambahkan nilai ke suatu variabel

$data+=4; $data=$data+4;

-= Mengurangi nilai suatu variabel

$data -=2; $data = $data-2;

*= Mengalikan variabel dengan nilai tertentu

$data*=3; $data=$data*3;

/= Membagi variabel dengan nilai tertentu

$data/=3 $data=$data/3;

%= Mencari sisa hasil $data%=10; $data=$data % 10;

58

bagi variabel dengan nilai tertentu

.= Melakukan operasi penambahan string pada operand

$data .= ”unijoyo”;

$data=$data.”unijoyo”;

++ Menambah nilai satu pada suatu variabel

$data++; $data=$data+1;

-- Mengurangi nilai satu pada suatu variabel

$data--; $data=$data-1;

1.5. Struktur Kontrol

Sejumlah pernyataan yang terkait dengan pengambilan keputusan atau suatu percabangan (if dan switch) dimana function ini akan menghasilkan nilai truejika variabel tersebut telah ada dan menghasilkan nilai false jika variabel tersebut belum ada. Function yang lainnya adalah perulangan (while, do-while, for) serta pernyataan break, continue dan exit.

a. Struktur Percabangan Percabangan sering disebut juga dengan decision-making, memungkinkan

aplikasi untuk memeriksa isi suatu variabel atau hasil perhitungan ekspresi dan mengambil t indakan yang sesuai. Ada 2 bentuk percabangan yang disediakan dalam PHP yaitu pernyataan IF dan pernyataan SWITCH. Masing-masing mempunyai prinsip yang sama tetapi pada beberapa sisi mempunyai kegunaan sendiri-sendiri.

Pernyataan IF Pernyataan IF dpakai untuk mengambil keputusan berdasarkan suatu kondisi. Ada 3 macam pernyataan IF yaitu : 1. IF Dalam pernyataan ini jika kondisi (syarat) akan terpenuhi atau bernilai benar maka ada satu atau lebih operasi (pernyataan) yang akan dilaksanakan, dan tidak ada alternative satu atau lebih operasi (pernyataan) yang akan dilaksanakan jika kondisi tidak terpenuhi. Syntax:

<?php if (kondisi) { pernyataan; } ?>

2. IF-ELSE Dalam pernyataan ini, terdapat dua macam alternative pilihan dari suatu kondisi yang diperiksa. Jadi alternative pertama akan dijalankan jika kondisi (syarat) terpenuhi atau bernilai benar dan alternative kedua akan dijalankan jika kondisi (syarat) tidak terpenuhi atau bernilai salah.

59

Syntax: <?php if (kondisi) { pernyataan_1; }else { pernyataan_2; } ?>

3. IF-ELSEIE Sedangkan untuk pernyataan ini sangat bermanfaat untuk melakukan pengambilan keputusan yang melibatkan banyak alternative. Sehingga jika kondisi 1 terpenuhi maka pernyataan 1 saja yang akan dijalankan, jika kondisi 1 tidak terpenuhi maka program akan memeriksa kondisi 2 dan jika terpeuhi maka pernyataan 2 dijalankan, jika kondisi 2 tidak terpenuhi maka pernyataan 3 akan dijalankan.

Syntax:

<?php if (kondisi 1) { Pernyataan 1; e lseif (kondsi 2) { Pernyataan 2; else { Pernyataan 3; } ?>

Pernyataan SWITCH

Pernyataan dengan switch biasanya digunakan untuk membandingkan satu variabel dengan (atau ekspresi) beberapa nilai dan mengeksekusi kode-kode tertentu jika n ilai variabel sama dengan nilai yang dibandingkan. Sehingga pada pernyataan switch, yang pertama kali dilakukan adalah pemeriksaan suatu case awal dengan kondisi dan jika benar atau terpenuhi maka pernyataan ke-1 akan dijalankan dan jika case awal tidak benar maka melakukan pembanding antara kondisi dan case ke-2 dan jika nilai terpenuhi maka pernyataan 2 akan dilaksanakan. Syntax:

<?php switch(kondisi) { case 1 : pernyataan 1; break;

60

case 2 : pernyataan 2; break; case 3 : ….. defau lt: pernyataan n; }

2. Kegiatan Praktikum : 1. Ketiklah coding di bawah ini dan jalankan hasilnya

61

2. Modifikasi program d iatas dengan menambahkan 2 operator lag i untuk pembagian dan pengurangan

3. Ketik koding di bawah dan jalankan

4. Modifikasi program nomor 3 dengan mengubah diskon, jika

· Rp. 100.000 > = Pembelian <= Rp. 300.000 : mendapat diskon 5 %

· Rp. 300.000 > Pembelian <= Rp. 600.000 : mendapat diskon 10 % · Rp. 600.000 > Pembelian <= Rp. 900.000 : mendapat diskon 15 %

Pembelian > 900.000 : mendapat diskon 20 %

3. Tugas Praktikum 1. Lengkapi koding ini dengan perintah switch dan lihat hasilnya seperti di

bawah .

62


63

MODUL 11 PHP Lanjut

(Struktur control, Fungsi)

1. Dasar Teori 7.4.2. Struktur Pengulangan

Pernyataan perulangan berguna untuk melakukan pengulangan statemen/kode program yang dieksekusi oleh webserver lebih dari sekali sesuai dengan kondisi yang diisyaratkan. Ada tiga macam pengulangan dalam PHP yaitu: 1. FOR

Pengulangan dengan FOR disebut dengan determinate loop, yang berarti looping yang jumlah pengulangannya telah ditentukan diawal looping. Syntax:

<?php fo r ( Kondisi 1 ; Kondisi 2 ; Kondisi 3 ){ pernyataan-pernyataan; }

Jadi dari syntax diatas, dapat dijelaskan: § Kondisi 1 menunjukkan kondisi untuk memberikan nilai awal terhadap

variabel yang akan digunakan untuk melakukan perhitungan pengulangan. § Kondisi 2 menunjukkan kondisi untuk menentukan pengulangan terhadap

pernyataan yang ada didalam kurung kurawal akan d ilakukan atau tidak.

Tujuan : Mampu menjelaskan perintah-perintah PHP (Struktur control, Fungsi,) dan membuat aplikasi dengan perintah-perintah PHP.

Tugas Pendahuluan 7. Jelaskan yang anda ketahui tentang fungsi : 8. Jelaskan apa kegunaan dari:

a. Fungsi String e. Fungsi fclose b. Fungsi Date f. Fungsi fgets c. Fungsi Mail g. Fungsi fputs d. Fungsi fopen h. Fungsi feof

64

§ Kondisi 3 menunjukkan kondisi untuk mengatur nilai varibel yang digunakan dalam kondisi 1

2. WHILE Pengulangan WHILE disebut dengan istilah indeterminate loop adalah

jumlah loopingnya tidak ditentukan pada awal looping. Dalam statemen ini leb ih sederhana dibandingkan dengan pengulangan FOR karena hanya memiliki dua kondisi yaitu : § Kondisi berhenti

Kondisi ini akan diperiksa ketika tiap iterasi sebelum dilakukan. Selama kondisi berhenti mempunyai nilai true, maka perintah dalam kondisi proses akan dilakukan terus.

§ Kondisi proses (Pernyataan) Semua pernyataan yag diletakkan didalam kondisi proses akan dilaksanakan satu kali pada setiap pengulangan.

Syntax : while (kondisi) { pernyataan-pernyataan; }

Sehingga dapat disimpulkan bahwa pernyataan while akan memeriksa nilai kondisi terlebih dahalu. Jika bernilai true maka pernyataan-pernyataan yang terdapat dalam kurung kurawal {} akan dijalankan dan kondisi selalu dievalusi lagi. Proses akan dilakukan beru lang-ulang selama kondisi bern ilai t rue. 3. DO WHILE

Pengulangan untuk DO WHILE hampir sama dengan WHILE hanya saja kondisi proses akan dilaksanakan dulu setelah itu kondisi diperiksa. Dan selama kondisi bernilai true maka kondisi proses (pernyataan) tetap dilaksanakan. Syntax :

do { pernyataan-pernyataan; }while (kondisi);

7.4.3. Break, Continue dan Exit

Dalam peru langan dapat dilakukan lompatan. Ada beberapa macam fungsi untuk melewat i proses yang sedang berjalan yaitu: 1. BREAK

Break berfungsi memaksakan aliran eksekusi untuk keluar dari blok pengulangan tersebut. Contoh:

65

<?PHP for($bilangan=1; $bilangan<=10; $bilangan++){ print("$b ilangan"); if($bilangan==7){ print("break"); break; } } ?>

2. CONTINUE Continue berfungsi hampir sama dengan break hanya saja continue tidak memaksakan pengulangan untuk berhenti tetapi melan jutkan pada pengulangan untuk nilai perh itungan berikutnya. Contoh:

<?PHP for($bilangan=1; $bilangan<=10; $bilangan++){ if($bilangan==7){ print("continue<br>"); continue; } print("$b ilangan<br>"); } ?>

3. EXIT Exit tidak sama dengan break maupun continue. Break berfungsi untuk menghentikan eksekusi file PHP dimanapun letak perintah break.

7.5. Fungsi Fungsi dimanfaatkan untuk menyederhanakan penulisan kode program yang

sama dengan cara menyimpan kode tersebut dalam sebuah nama fungsi. Sehingga Fungsi sebenarnya adalah sebuah bagian kode program yang ditujukan untuk

66

melaksanakan suatu tugas tertentu. Keuntungan menggunakan fungsi diantaranya jika ada perubahan proses pengolahan data maka cukup mengganti dibagian fungsi saja, hanya cukup mengetik kode program sekali saja untuk skrip yang smaa dan memudahkan pembaca untuk membaca program karena fungsi memiliki skrip kode program yang pendek. 2. Kegiatan Praktikum

1. Ketiklah script di atas. Lalu jalankanlah di browser. 2. Pada field Angka, ket ikkan 8, lalu perhatikan hasilnya! 3. Pada field Angka, ket ikkan 246, lalu perhatikan hasilnya! 4. Pada field Angka, ket ikkan 2150, lalu perhatikan hasilnya! 5. Ketikkan baris berikut pada fungsi Terbilang di baris ke-11 :

elseif ($x < 1000000) return Terbilang($x / 1000) . " ribu" . Terbilang($x % 1000);

lalu cobalah kembali Langkah pada percobaan 4. Perhatikan hasilnya!

6. Pada field Angka, ket ikkan 17, lalu perhatikan hasilnya! 7. Pada field Angka, ket ikkan 113, lalu perhatikan hasilnya!

3. Tugas. 1. Apa yang terjadi pada langkah percobaan ke-2 dan 3? Mengapa?

Jelaskan! 2. Apa yang terjadi pada langkah percobaan ke-4? Mengapa? Jelaskan! 3. Apa pula yang terjadi pada langkah percobaan ke-5? Mengapa? Jelaskan!

67

4. Bagiamana dengan percobaan ke-6 dan 7? Mengapa terjadi seperti itu? Jelaskan!

5. Cobalah perbaiki script tersebut sehingga program bisa berjalan dengan lancar untuk semua kondisi hingga bilangan jutaan!

68

MODUL 12 PHP

(Array, file handling) 1. Dasar Teori 7.6. Array

Array dalam PHP berbeda dengan array yang ada dalam bahasa pemrograman lain seperti Pascal atau C, karena array dalam bahasa pemrograman lain memiliki fungsi hanya sebagai penampung nilai dan indeks dalam t ipe yang sama sedangkan array dalam PHP sebagai penampung nilai dan indeks dalam t ipe yang bergantung pada pendeklasian oleh programmer. INIS IALISAS I ARRAY :

$nama_array = array (“data _0”,”nilai_1”,….,”n ilai_n”); Atau :

$nama_array = array (indeks_0 => ”data_0”, indeks_1 => “data_1”, …. , “indeks_n => “data_n”);

7.7. File Handling

PHP juga dapat berinteraksi dengan file yang memungkinkan pengguna melakukan upload file dari browsernya. Ketika melakukan interaksi dengan file yang dikirim dari browser, ada perlakuan khusus dari PHP terhadap kiriman tersebut sebelum akh irnya disimpankan kedalam fo lder server. Sehingga yang perlu diperhatikan dalam membuat form dialog untuk pengiriman file ke server maka n ilai properti enctype dari tag form harus bernilai ”multipart/ fo rm-data”.

Tujuan : Mampu menjelaskan perintah-perintah PHP (Array, file handling) dan membuat aplikasi dengan perintah-perintah PHP.

Tugas Pendahuluan 1. Apa yang dimaksud dengan array dalam PHP 2. Sebutkan dan jelaskan operasi dan fungsi array 3. Apa yang dimaksud dengan file handling 4. Fungsi-fungsi apa yang terdapat dalam file handling

69

Dan ketika dilakukan klik pada form maka server akan menerima kiriman variabel dari form browser. Khusus untuk variabel dari komponen file dalam form maka d iserver akan dimunculkan manejadi bentuk array dengan lima elemen diantaranya: § $_FILES[’userfile’][’name’]

Menunjukkan nama asli dari file yang tersimpan di client. § $_FILES[’userfile’][’type’]

Menunjukkan tipe file , jika browser menerima informasi seperti ”image/gif”.

§ $_FILES[’userfile’][’size’] Menunjukkan ukuran dalam bytes.

§ $_FILES[’userfile’][’tmp_name’] Menunjukkan nama temporare (sementara) dari file yang menyimpan file yang diupload secara sementara didalam cache server.

§ $_FILES[’userfile’][’error’] Menunjukkan kode error yang berelasi dengan file upload.

2. Kegiatan Praktikum 1. Desain dialog dibawah ini untuk memberikan pilihan menampilkan kalimat

berapa kali, pada hitungan ke berapa akan dihentikan atau dibypass atau juga eksekusi file d ihentikan:

71

2. Perlu diperhatikan bahwa variabel akan dikirimkan pada file itu sendiri. Untuk melakukannya dapat dilakukan dengan melakukan pemeriksaan apakah telah didapatkan variabel $proses yang diambil dari nilai tombol SUBMIT. Maka tambahkan program pada baris ke-42 berikut ini:

Catatan: PHP menyediakan environmet variabel array yaitu $_SERVER [‘PHP_SELF’] untuk mendapatkan nama file yang sedang dieksekusi. Maka ketiklah pada baris ke-4 berikut in i:

Tampilan:

72

3. Tugas. 1. Amatilah apa yang terjadi pada kegiatan prakt ikum ke-2! 2. Buatlah program yang mendefinisikan fungsi Sort dan amatilah apa yang

terjadi: Digunakan untuk mengurutkan elemen-elemen array. Hanya elemen-elemennya saja yang diurutkan dengan pola ascending, sedangkan indeks tidak ada perubahan. Contoh:

73

<?php $buah=array ("A" => "Nanas", " E" => "Pepaya", " C" => "Mangga", "F" => "Apel"); print("Data asli:<br>"); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } print("Hasil sort:<br>"); sort($buah); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } ?>

3. Buatlah program yang mendefinisikan fungsi Asort dan amatilah apa yang terjadi:

Digunakan untuk mengurut array berdasarkan isinya dengan pola ascending dan mempertahankan indeksnya. Contoh:

<?php $buah=array ("A" => "Nanas", " E" => "Pepaya", " C" => "Mangga", "F" => "Apel"); print("Data asli:<br>"); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } print("Hasil asort:<br>"); asort($buah); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); }

74

?> 4. Buatlah program yang mendefinisikan fungsi Ksort dan amatilah apa yang

terjadi: Digunakan untuk menurutkan elemen-elemen array dengan pola descending berdasarkan indeksnya. Contoh:

<?php $buah=array ("A" => "Nanas", " E" => "Pepaya", " C" => "Mangga", "F" => "Apel"); print("Data asli:<br>"); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } print("Hasil ksort:<br>"); ksort($buah); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } ?>

modul i html€¦ · 4. menambahkan obyek-obyek seperti image, audio, video dan juga java applet...

Documents