untuk membuat halaman html seperti di bawah ini :

4. Masing-masing dari halaman Ht ml diatas Buatkan Background gambar yang sesuai 5. Pada semua doku men 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 Ko mputer” di link ke www.ilmu ko mputer.co m. 4. “Email” di link ke aplikasi email dengan tujuan [email protected] m

6

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

7

MODUL 2 HTML Lanjut (Table, Form, Frame, Hype rlink) Tujuan : Mampu menjelaskan table, frame, form, image, hyperlink pada HTM L Lanjut dan membuat aplikasinya

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

1. Dasar Teori 1.1. Tabel a. Atri but ROWSPAN Atribut ini d igunakan untuk menggabungkan beberapa baris dalam satu kolo m menjadi satu baris (merge cell) b. Atri but 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 ROWSPA N c. Atri but 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 dilaku kan BGCOLOR=”BLUE”, atau latar belakang diisi dengan gambar maka dapat dilakukan dengan BACKGROUND=”namafile.jpg”, file yang

8

d.

dapat digunakan untuk latar belakang adalah *.JPG, *.GIF, *.BM P dan *.PNG. Atri but 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 diju mpai 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 didalam tag 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 komb inasi dari vertical dan horizontal. Script HTM L yang digunakan untuk pengaturan frame maka tidak dapat digunakan untuk membuat halaman tamp ilan web, untuk itu diperlukan file yang berisi script HTM L lain dan disisipkan kedalam script frame tesebut. Jadi bila ada dua frame maka diperlu kan dua file HTM L. Untuk dapat menyisipkan ketiga file HTM L tesebut kedalam frame, diperlukan nama yang jelas dan benar serta dimana letak folder/ direktorinya, karena informasi tersebut digunakna didalam tag . 1.4. Form Di gunakan untuk menerima informasi atau meminta umpan balik dari user dan memp roses informasi tersebut di server Standar penulisan:

. . . a. Elemen Form Tag d igunakan untuk membuat form dalam document HTM L Atri but

Fungsi

9

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 HTM L 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 tapi anda juga bias meletakkan control diluar tag tersebut. Untuk menambahkan control gunakan tag . Berikut macam-macam co mponent input: 1. Textbox Untuk membuat sigle line text control. Attribute size digunakan untuk menentukan ju mlah character yang bisa ditampilkan, sementara maxlength attribute digunakan untuk menentukan maximu m character yang bisa di masukkan. Contoh Penulisan syntax textbo x : 2.

Submi t 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.

Radi o 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.

10

5.

6.

Text Area Fungsi: Sebagai field masukan untuk pengunjung (dapat menerima lebih dari satu baris teks). Biasa disebut sebagai kotak ko mentar Untuk membuat textarea gunakan tag </TEXTA REA> Daftar Drop Down Fungsi: Memberikan menu pilihan kepada user (cara kerjanya seperti radio button yang hanya mengijin kan user untuk memilih 1 p ilihan saja)<br /> <br /> 1.5. Hyperlink Fasilitas hyperlin k dipergunakan untuk menghubungkan atau membuat suatu lin k 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 doku men lain · Link ke bagian tertantu dalam doku men · Link ke bagian tertentu pada dokumen lain 2.<br /> <br /> Kegiatan Praktikum : 1. Ketiklah kodi ng di bawah ini simpan dengan nama tabel1.html<br /> <br /> 2.<br /> <br /> Ketiklah koding di bawah in i dan simpan dengan nama nestedtabel.html<br /> <br /> 11<br /> <br /> 3.<br /> <br /> Gabungkan antara no 1 dengan nomor 2 dal am satu halaman menggunakan frame<br /> <br /> 12<br /> <br /> 4.<br /> <br /> Ketiklah kodi ng di bawah ini<br /> <br /> 5.<br /> <br /> Buat tampilan html seperti di bawah ini<br /> <br /> 13<br /> <br /> 3.<br /> <br /> Tug as Praktikum Buatlah suatu halaman web d imana didalamnya terdapat tabel, fo rm,<br /> <br /> frame dan hyperlink yang menampilkan daftar harga suatu barang (misalnya buku, peralatan musik, alat elektronik, VCD, ko mputer,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.<br /> <br /> Catatan Praktikum<br /> <br /> 14<br /> <br /> MODUL 3 CSS (Font, Text, color)<br /> <br /> (Cascading Style Sheet) Tujuan : Mampu menjelaskan mekanis me,<br /> <br /> mengenai pengenalan CSS, selector, ko mentar,<br /> <br /> membuat<br /> <br /> aplikasi<br /> <br /> perintah-perintah<br /> <br /> CSS<br /> <br /> dan<br /> <br /> menggabungkannya dengan HTML.<br /> <br /> Tug as Pendahuluan 1. Apa kelebihan menggunakan CSS pada HTM L! 2.<br /> <br /> Apa yang dimaksud dengan pengelompokan selector? Bagaimana caranya.<br /> <br /> 3.<br /> <br /> Pada mekanisme pengaplikasian CSS terdapat Style yang didefinisikan di file eksternal, apa maksudnya, beri contoh programnya.<br /> <br /> 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 HTM L, melakukan redefin isi tag normal HTM L Syntax: SelectorHTM L {Properti:Nilai;} b. Selector Class Digunakan untuk mendefin isikan style yang dapat dipakai tanpa melakukan redefinisi tag HTM L.<br /> <br /> 15<br /> <br /> c.<br /> <br /> Syntax: ClassSelector {Properti:Nilai;} 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;}<br /> <br /> 1.2. Mekanis me Mengaplikasikan CSS 1. Style didefinisikan dalam tag HTM L (tag tunggal) 2. Style didefinisikan d i dalam bagian <head> dan diap likasikan untuk seluruh dokumen HTM L tersebut. 3. Style didefinisikan d i file eksternal yang selanjutnya dapat digunakan oleh dokumen HTM L manapun dengan memasukkan CSS tersebut dalam dokumen yang diingin kan 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.<br /> <br /> 2.<br /> <br /> Text Element text akan membuat tampilan teks menjadi leb ih menarik<br /> <br /> 16<br /> <br /> 3.<br /> <br /> Color Elemen color yang digunakan untuk mengatur warna teks dan background halaman web<br /> <br /> 4.<br /> <br /> 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 lin k.<br /> <br /> 17<br /> <br /> 2. Kegiatan Praktikum :<br /> <br /> Ketiklah lah script di atas di text-editor, kemud ian 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 tamp ilannya!<br /> <br /> 18<br /> <br /> 3. Tugas Pertanyaan. 1.<br /> <br /> Modifikasilah script di atas sehingga link-nya dapat berubah warna pada saat mouseover.<br /> <br /> 2.<br /> <br /> modifikasilah CSS pada soal no.1 shg tampak spt gbr berikut :<br /> <br /> 4. Catatan Praktikum<br /> <br /> 19<br /> <br /> MODUL 4 CSS<br /> <br /> (CSS Image) Tujuan : Peserta Praktiku m dapat menggunakan CSS-Images untuk memformat atau membuat halaman web tampil lebih menarik.<br /> <br /> Tug as Pendahuluan 1. Jelaskan deskripsi dari masing-masing atribut pada tabel di bawah! 2. Berikan contoh i mplementasi sederhana untuk membuat tampilan dari salah satu attri but dari tabel tersebut (kode ditulis tangan). 3. Apa yang di maksud deng an CSS Image?<br /> <br /> 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 Attri bute background<br /> <br /> Values Color size percentage pos-key-term url repeat repeat-x repeat-y no-repeat fixed<br /> <br /> 20<br /> <br /> scroll background-attachment background-color background-image background-position<br /> <br /> background-repeat<br /> <br /> border<br /> <br /> border-bottom<br /> <br /> border-bottom-color border-bottom-style<br /> <br /> Fixed scroll Color none url Size percentage pos-key-term repeat repeat-x repeat-y no-repeat Solid double groove dotted dashed inset outset ridge hidden four-sides width-key -term size color width-key -term color solid double groove dotted dashed inset outset ridge hidden<br /> <br /> 21<br /> <br /> border-bottom-width border-color border-left<br /> <br /> border-left-co lor border-left-style<br /> <br /> border-left-width border-right<br /> <br /> border-right-color border-right-style<br /> <br /> border-right-width border-style<br /> <br /> size width-key -term color size color width-key -term color solid double groove dotted dashed inset outset ridge hidden size width-key -term size color width-key -term Color solid double groove dotted dashed inset outset ridge hidden size width-key -term solid double groove dotted dashed<br /> <br /> 22<br /> <br /> border-top<br /> <br /> border-top-color border-top-style<br /> <br /> border-top-width border-width clear<br /> <br /> color display float<br /> <br /> inset outset ridge hidden four-sides width-key -term size color width-key -term color solid double groove dotted dashed inset outset ridge hidden size width-key -term size width-key -term left right both color block inline left right<br /> <br /> 2. Kegiatan praktikum 1. Ketiklah script menurut Gambar 4.1 pada program ed itor standar (spt. Notepad, dll), lalu simpan lah dg nama css_image.html. 2. Tamp ilkan file css_image.html pada browser. Perhatikanlah tamp ilanya.<br /> <br /> 23<br /> <br /> 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(i mages/bg-body.gif); Perhatikan apa yang terjad i! 6. Pada baris 20, ubahlah val ue float menjad i right. Lalu pada baris 26, ubahlah menjad i: margin: 0 5 px 5 px 15 px; 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!<br /> <br /> 24<br /> <br /> Gambar 4.1. Script Percobaan 4<br /> <br /> 3. Tugas 1. Apa yang terjadi pada percobaan no.3? Jelaskan! 2. Apa yang terjadi pada percobaan no.4 dan 5? Jelaskan! 3. Apa yang terjadi pada percobaan no.6? Jelaskan!<br /> <br /> 25<br /> <br /> 4. Jelaskan apa yang dapat Anda simpulkan dari percobaan no.7! 5. Buatlah halaman html yang serupa dengan tampilan berikut<br /> <br /> 26<br /> <br /> MODUL 5 CSS (Navigasi dan l ayout CSS)<br /> <br /> Tujuan : 1. Peserta Praktiku m dapat menggunakan CSS-Layout untuk memformat atau mendesain halaman web lebih dinamis tanpa menggunakan table sebagai layoutnya 2. Peserta Prakt iku m dapat mendesain menu navigasi menggunakan CSS pada halaman web agar tampil lebih menarik.<br /> <br /> Tug as 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!<br /> <br /> 1. Dasar Teori Tabel 5.1. Property dan value CSS yang mendukung format Menu Navig asi Attri bute<br /> <br /> Value<br /> <br /> list-style<br /> <br /> circle square disc upper-alpha lower-alpha upper-roman lower-ro man decimal inside outside url none url<br /> <br /> list-style-image<br /> <br /> 27<br /> <br /> list-style-position<br /> <br /> inside outside circle square disc upper-alpha lower-alpha upper-roman lower-ro man decimal<br /> <br /> list-style-type<br /> <br /> Tabel 5.2. Property dan value CSS yang mendukung format Layout Hal aman Web Property<br /> <br /> Value<br /> <br /> Clear<br /> <br /> Left right both none<br /> <br /> Cursor<br /> <br /> 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<br /> <br /> Display<br /> <br /> None inline block<br /> <br /> 28<br /> <br /> list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-colu mn-group table-colu mn table-cell table-caption Float<br /> <br /> Left right none<br /> <br /> Position<br /> <br /> Static relative absolute fixed<br /> <br /> Visib ility<br /> <br /> Visib le hiodden collapse<br /> <br /> Kegiatan praktikum : Untuk Navig asi CSS 1. Ketiklah script sesuai Gambar 5.1 pada program editor standar (spt. Notepad, dll), lalu simpan lah dg nama css_navigasi.html. 2. Tamp ilkan file css_navigasi .html pada browser. Perhatikanlah tampilanya! 3. Pada baris 16, ubahlah value display menjadi inline. Perhatikan perubahannya!<br /> <br /> 29<br /> <br /> Gambar 5.1 Script Percobaan 5<br /> <br /> 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 :<br /> <br /> 30<br /> <br /> text-decoration: line-through; 7. Ubah-ubahlah ketebalan border, jenis dan warnanya pada baris 13, 18, dan<br /> <br /> 19, demikian juga margin dan paddingnya pada baris 9 dan 10. Perhatikan perubahannya!<br /> <br /> Untuk CSS Layout 1. Ketiklah script sesuai Gambar 6.1 pada program editor standar (spt. Notepad, dll), lalu simpan lah dg nama css_layout.html. 2. Tamp ilkan file css_layout .html pada browser. Perhatikanlah tamp ilanya! 3. Tambahkan script css berikut : Perhatikan perbedaan tampilannya! 4. Tambahkan script css berikut : Perhatikan perbedaan tampilannya! 5. Tambahkan script css berikut :<br /> <br /> 31<br /> <br /> Perhatikan perbedaan tampilannya!<br /> <br /> Gambar 6.1. Script Percobaan 6<br /> <br /> 32<br /> <br /> 6. Tambahkan script css berikut :<br /> <br /> Perhatikan perbedaan tampilannya! 7. Tambahkan script css berikut : Perhatikan perbedaan tampilannya!<br /> <br /> 8. Tambahkan script css berikut :<br /> <br /> 33<br /> <br /> Perhatikan perbedaan tampilannya! Tug as Buatlah halaman ht ml yang serupa dengan tampilan berikut (navigator dan subnavigator) :<br /> <br /> Buatlah css layout dg 3 kolom, spt gambar berikut :<br /> <br /> 34<br /> <br /> MODUL 6 CSS Menu Drop Down<br /> <br /> Tujuan : Peserta Prakt iku m dapat mendesain menu drop-down dengan hanya menggunakan CSS agar tampil lebih menarik<br /> <br /> Tug as Pendahuluan 1. Jelaskan tentang nested-list pada HTM L! 2.<br /> <br /> Apa yang Anda ketahui tentang -moz-border-radi us ?<br /> <br /> 1. Teo ri Tabel 7.1. Property dan value CSS yang mendukung format menu drop-down Attri bute<br /> <br /> Value<br /> <br /> list-style<br /> <br /> circle square disc upper-alpha lower-alpha upper-roman lower-ro man decimal inside outside url none url<br /> <br /> list-style-image list-style-position<br /> <br /> inside outside<br /> <br /> 35<br /> <br /> list-style-type<br /> <br /> -moz-border-radius Position<br /> <br /> circle square disc upper-alpha lower-alpha upper-roman lower-ro man decimal Static relative absolute fixed<br /> <br /> 2. Kegiatan praktikum 1. Ketiklah script sesuai Gambar 7.1 pada program editor standar (spt. Notepad, dll), lalu simpan lah dg nama css_menu.html. 2. Tamp ilkan file css_menu .ht ml pada browser. Perhatikanlah tamp ilanya!<br /> <br /> 36<br /> <br /> Gambar 7.1. Script Percobaan 7<br /> <br /> 3. Tambahkan script css berikut :<br /> <br /> 37<br /> <br /> Perhatikan perbedaan tampilannya! 4. Tambahkan script css berikut :<br /> <br /> 38<br /> <br /> Perhatikan perbedaan tampilannya! 5. Tambahkan script css berikut :<br /> <br /> Perhatikan perbedaan tampilannya! 6. Pada style-script pada poin no.3, antara baris 10 dan 11, tambahkan sript berikut : -moz-border-radius: 25 px; Perhatikan perbedaan tampilannya! 7. ada style-script pada poin no.4, antara baris 14 dan 15, tambahkan sript berikut :<br /> <br /> 39<br /> <br /> -moz-border-radius: 25 px; Perhatikan perbedaan tampilannya!<br /> <br /> 3.<br /> <br /> Tug as 1.<br /> <br /> Apa yang terjadi pada percobaan no.3? Jelaskan!<br /> <br /> 2.<br /> <br /> Apa yang terjadi pada percobaan no.4? Jelaskan!<br /> <br /> 3.<br /> <br /> Apa yang terjadi pada percobaan no.5? Jelaskan!<br /> <br /> 4.<br /> <br /> Apa yang terjadi pada percobaan no.6? Jelaskan!<br /> <br /> 5.<br /> <br /> Apa yang terjadi pada percobaan no.7? Jelaskan!<br /> <br /> 6.<br /> <br /> Jelaskan apa yang dapat Anda simpulkan dari seluruh rangkaian percobaan di atas!<br /> <br /> 40<br /> <br /> MODUL 7 Java Script (Dialog Box) Tujuan : Peserta Praktiku m dapat menggunakan Dialog-Box dalam Javascript untuk membuat tampilan web tamp il leb ih interaktif.<br /> <br /> .<br /> <br /> Tug as Pendahuluan 4. Jelaskan apa yang dimaksud dengan metode, apa bedanya metode write dan writeln. 5.<br /> <br /> Sebutkan perbedaan antara java script dengan HTML dan CSS<br /> <br /> 6.<br /> <br /> Buat program java script sederhana untuk menghitung luas dan keliling bujur sangkar (gunakan fungsi dan kotak dialog pada java script)<br /> <br /> 1. Dasar Teori 1.1. Pengertian JavaScri pt Javascript adalah bahasa yang berbentuk kumpulan skrip berjalan pada suatu dokumen HTM L. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijin kan 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 ko ma (; ). 1.2. Bentuk skrip Skrip dari JavaScript terletak d i dalam doku men HTM L. Kode tersebut tidak akan terlihat dari dalam jendela navigator . Contoh skrip dari JavaScript adalah sebagai berikut :<br /> <br /> 41<br /> <br /> <script type=“txt/javascript"> <!-Kode-kode JavaScript // --> </script><br /> <br /> 1.3. Meletakkan JavaScri pt dalam dokumen HTML Ada beberapa cara untuk meletakkan kode JavaScript d i dalam doku men/halaman HTM L : · 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: · Nu meric · String · Boolean · Null<br /> <br /> 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 memungkin kan 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 :<br /> <br /> 42<br /> <br /> <a href ="onEvenement ='Aksi_Javascript_atau_Fungsi();' rel="nofollow">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 memungkin kan juga terjadinya proses interaksi di dalam skrip yang kita buat<br /> <br /> 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 HTM L, yang terdiri dari obyek yang bernama document, obyek ini mempunyai metoda yang bernama write() yang berguna untuk memodifikasi isi dari doku men HTM L dengan menamp ilkan teks tertentu 1.5. Kotak Dial og 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: wi ndow.alert(‘text’) 2. Prompt, digunakan untuk menampilkan sebuah prompt yang juga mempunyai kotak isian yang dapat menerima sesuai informasi dari pengunjung. Syntax: wi ndow.prompt(‘text’,’defaultval ue’) 3. Confirm, Digunakan untuk memperingatkan pengunjung agar menguji atau menerima sesuatu dengan memilih to mbol OK atau Cancel untuk konfirmasi. Syntax: wi ndow.confirm(‘text’) 2. Kegiatan Praktikum : 1.<br /> <br /> Ketiklah script berikut, lalu jalan kan :<br /> <br /> 43<br /> <br /> Apakah yang terjadi?<br /> <br /> 2. Ketiklah script berikut, lalu jalankan :<br /> <br /> 44<br /> <br /> Apakah yang terjadi? 3. Buat Tugas tambahan (sesuai tugas dari asisten lab.) 3. Tugas 1. Ubahlah<br /> <br /> kode<br /> <br /> program Javascript<br /> <br /> untuk perhitungan<br /> <br /> Luas, dengan<br /> <br /> 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 Ju mlah<br /> <br /> 45<br /> <br /> Hasil perhitungan akan menamp ilkan tabel seperti tampak di bawah in i:<br /> <br /> 46<br /> <br /> MODUL 8 Java Script (Fungsi)<br /> <br /> Tujuan : Peserta Prakt iku m dapat menggunakan fungsi pada javascript untuk memudahkan pembuatan client-side program.<br /> <br /> . Tug as Pendahuluan 1. Sebutkan fungsi-fungsi built-in Javascript yang berkaitan dengan tanggal, matematika dan<br /> <br /> string!<br /> <br /> 1. Dasar Teori a. Fungsi Fungsi adalah subprogram yang memungkin kan 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 Sebelu m 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, argu mennya, dan instruksi di dalamnya. Pendefin isian satu fungsi dinamakan deklarasi. Sintaks pendeklarasian suatu fungsi adalah sebagai berikut : function Nama_dari_Fungsi(argu men1, argu men2, ...) { daftar instruksi atau blok instruksi }<br /> <br /> 47<br /> <br /> c. Pemanggilan fungsi Untuk mengeksekusi satu fungsi, kita cukup memanggil nama dari fungsi tersebut yang diikuti dengan kurung buka, argu men(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 : <HTM L> <HEA D> <SCRIPT language="Javascript"> <!-function Tamp ilkan1() { alert('Teks 1'); } function Tamp ilkan2() { alert('Teks 2'); } //--> </SCRIPT> </HEAD> <BODY> <A href=" javascript:;" onClick="Tampilkan 1();" rel="nofollow">Teks1</A> <A href=" javascript:;" onClick="Tampilkan 2();" rel="nofollow">Teks2</A> </BODY> </HTM L> atau cara kedua berikut akan memberikan hasil yang sama : <HTM L> <HEA D> <SCRIPT language="Javascript"> <!-function Tamp ilkan(Teks) { alert(Teks); } //--> </SCRIPT> </HEAD><br /> <br /> 48<br /> <br /> <BODY> <A href=" javascript:;" onClick="Tampilkan('Teks1');" rel="nofollow">Teks1</A> <A href=" javascript:;" onClick="Tampilkan('Teks2');" rel="nofollow">Teks2</A> </BODY> </HTM L> Hasil akh ir dari kedua program itu sama saja, akan tetapi program kedua lebih fleksibel karena kita hanya punya satu fungsi yang bisa menamp ilkan sembarang teks.<br /> <br /> 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. Tamp ilkan 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 men jadi :<br /> <br /> 49<br /> <br /> Perhatikan perbedaannya! Tug as 1.<br /> <br /> Apa yang terjadi pada percobaan no.3? Jelaskan!<br /> <br /> 2.<br /> <br /> Apa yang terjadi pada percobaan no.4? Jelaskan!<br /> <br /> 3.<br /> <br /> Jelaskan apa yang dapat Anda simpulkan dari seluruh rangkaian percobaan di atas!<br /> <br /> 50<br /> <br /> 4.<br /> <br /> Bubatlah script pengecekan bilangan ganjil/genap!<br /> <br /> 5.<br /> <br /> 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.<br /> <br /> 6.<br /> <br /> Buatlah sebuah fungsi yang akan menggambar tabel sesuai dengan parameter baris x kolo m. contoh: tabel(2,2) maka akan menggambar tabel sebagai berikut:<br /> <br /> 51<br /> <br /> MODUL 9 Java Script (Form Validation)<br /> <br /> Tujuan : Peserta Praktiku m dapat mengaplikasikan Java script yang digunakan untuk melaku kan validasi pada form masukan HTM L sehingga mampu menghadirkan interaksi antara halaman web dan user. .<br /> <br /> Tug as Pendahuluan 1. Jelaskan apa yang dimaksud Object pada Java Script 2.<br /> <br /> Sebutkan apa saja Object standart yang ada di java script.<br /> <br /> 3.<br /> <br /> Jelaskan apa yang dimaksud dengan Event pada java Script<br /> <br /> 4.<br /> <br /> Sebutkan event-event yang ada pada java script kemudian jelaskan fungsi dan penggunaannya masing-masing.<br /> <br /> 1. Dasar Teori<br /> <br /> A. Kegiatan Praktikum.<br /> <br /> 52<br /> <br /> 1.<br /> <br /> Ketiklah script di atas. Lalu jalan kan!<br /> <br /> 2.<br /> <br /> Cobalah isi field nama, lalu Submi t. Apa yang terjadi?<br /> <br /> 3.<br /> <br /> Cobalah isi field email, lalu Submit. Apa yang terjadi?<br /> <br /> 4.<br /> <br /> Cobalah isi field nama dan email, lalu Submit. Apa yang terjadi?<br /> <br /> 5.<br /> <br /> Cobalah isi semua isian form, lalu Submit. Apa yang terjadi? ? Apa perbedaannya dengan percobaan No.4?<br /> <br /> B. Tug as Pertanyaan. 1.<br /> <br /> Apa perbedaan hasil percobaan No.2 dan No.3? Jelaskan jawaban mu!<br /> <br /> 2.<br /> <br /> Apa perbedaan hasil percobaan No.4 dan No.5? Jelaskan jawaban mu!<br /> <br /> 3.<br /> <br /> Modifikasilah script di atas, sehingga bisa mengantisipasi field list/dropdown pada form!<br /> <br /> 4.<br /> <br /> Buatlah validator untuk mendeteksi nomor/angka!<br /> <br /> 53<br /> <br /> MODUL 10 DASAR PHP (Variabel, Operator, struktur control)<br /> <br /> Tujuan : Mampu men jelaskan perintah-perintah dasar-dasar PHP (Variabel , Operator, struktur control) dan membuat aplikasi dengan perintahperintah PHP.<br /> <br /> Tug as Pendahuluan 1. Apa yang anda ketahui tentang PHP, mu lai dari asal usulnya sampai dengan keleb ihan dan keku rangan 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<br /> <br /> 1. Dasar Teori 1.1. Memulai PHP PHP (Personal Ho me 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 HTM L, sehingga suatu halaman web tidak lagi bersifat statis, namun bersifat dinamis. Sifat server side berart i pengerjaan skrip PHP dilaku kan 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<br /> <br /> 54<br /> <br /> XAMPP versi 1.4.6. Dengan Menginstal XAMPP, kita tidak perlu lag i melaku kan 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-win 32-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 to mbol OK.<br /> <br /> 3.<br /> <br /> 4. 5. 6. 7.<br /> <br /> Gambar 1.1 Memilih bahasa instalasi XAMPP Ketika muncul jendela seperti gambar 1.2, klik to mbol next.<br /> <br /> Gambar 1.2 Memulai Setup XAMPP Pada jendela instalasi selanjutnya, bacalah persetujuan lisensi XAMPP, kemudian klik to mbol I gree. Kemudian ketika muncul jendela untuk mengisi destination folder dengan c:\apachefriends, lalu klik to mbol install Ketika muncul jendela proses instalasi, tunggulah beberapa saat hingga proses isntalasi selesai. Klik to mbol fin ish. XAMPP telah berhasil anda install dalam folder c:\apachefriends, sesuai dengan yang anda isikan pada langkah ke-5.<br /> <br /> 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<br /> <br /> 55<br /> <br /> : Hypertext Preprosessor) adalah skrip bersifat server-side yan ditambahkan kedalam HTM L. PHP sendiri merupakan singkatan dari Personal Home Page Tools. Skrip in i akan membuat suatu aplikasi dapat diintegrasikan kedalam HTM L 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 :<br /> <br /> 1.4. Vari abel, Ti pe 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 melaku kan perhitungan-perhitungan matematis, memberi nilai kedalam variabel tertentu dan membandingkan dua nilai variabel. a. Vari abel 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 dimu lai 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. Ti pe Data Variable PHP mempunyai beberapa tipe data, yaitu: § Integer (bilangan bulat) § Floating Po int § String c. Operator Operator adalah suatu simbol yang dipakai untuk meman ipulasi nilai suatu variabel. Variabel yang nilainya dimodifikasi oleh moderator disebut operand. Misalnya 3-2, 3 dan 2 adalah operand dan – adalah operator<br /> <br /> 56<br /> <br /> Macam-macam operator adalah : · Operator Arit matika · Operator Co mparison · 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"); ?><br /> <br /> Pada contoh diatas, operator “=” digunakan untuk memberi nilai “mahasiswa Un ijoyo” 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 $kampus=”uni $kampus = suatu variable joyo”; ”unijoyo”; += Menambahkan nilai $data+=4; $data=$data+4; ke suatu variabel -= Mengurangi nilai $data -=2; $data = $data-2; suatu variabel *= Mengalikan variabel $data*=3; $data=$data*3; dengan nilai tertentu /= Membagi variabel $data/=3 $data=$data/3; dengan nilai tertentu %= Mencari sisa hasil $data%=10; $data=$data % 10;<br /> <br /> 57<br /> <br /> .=<br /> <br /> ++ --<br /> <br /> bagi variabel dengan nilai tertentu Melakukan operasi penambahan string pada operand Menambah nilai satu pada suatu variabel Mengurangi nilai satu pada suatu variabel<br /> <br /> $data ”unijoyo”;<br /> <br /> .=<br /> <br /> $data=$data.”unijo yo”;<br /> <br /> $data++;<br /> <br /> $data=$data+1;<br /> <br /> $data--;<br /> <br /> $data=$data-1;<br /> <br /> 1.5. Struktur Kontrol Seju mlah 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, memungkin kan 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 dijalan kan jika kondisi (syarat) terpenuhi atau bernilai benar dan alternative kedua akan dijalan kan jika kondisi (syarat) tidak terpenuhi atau bernilai salah.<br /> <br /> 58<br /> <br /> Syntax: <?php if (kondisi) { pernyataan_1; }else { pernyataan_2; } ?> 3. IF-ELSEIE Sedangkan untuk pernyataan ini sangat bermanfaat untuk melaku kan 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 dijalan kan, jika kondisi 2 tidak terpenuhi maka pernyataan 3 akan dijalankan. Syntax: <?php if (kondisi 1) { Pernyataan 1; elseif (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;<br /> <br /> 59<br /> <br /> case 2 : pernyataan 2; break; case 3 : ….. defau lt: pernyataan n; } 2. Kegiatan Praktikum : 1. Ketiklah coding di bawah ini dan jal ankan hasilnya<br /> <br /> 60<br /> <br /> 2. 3.<br /> <br /> 4.<br /> <br /> Modifikasi program d iatas dengan menambahkan 2 operator lag i untuk pembagian dan pengurangan Ketik koding di bawah dan jalankan<br /> <br /> Modifikasi program no mor 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 %<br /> <br /> 3. Tug as Praktikum 1.<br /> <br /> Lengkapi koding ini dengan perintah switch dan lihat hasilnya seperti di bawah .<br /> <br /> 61<br /> <br /> 4. Catatan Praktikum 62<br /> <br /> MODUL 11 PHP Lanjut (Struktur control, Fungsi)<br /> <br /> Tujuan : Mampu menjelaskan perintah-perintah PHP (Struktur control, Fungsi,) dan membuat aplikasi dengan perintah-perintah PHP.<br /> <br /> Tug as 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<br /> <br /> 1. Dasar Teori 7.4.2. Struktur Pengul angan 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 melaku kan perhitungan pengulangan. § Kondisi 2 menunjukkan kondisi untuk menentukan pengulangan terhadap pernyataan yang ada didalam kurung kurawal akan d ilakukan atau tidak.<br /> <br /> 63<br /> <br /> §<br /> <br /> Kondisi 3 menunjukkan kondisi untuk mengatur nilai varibel yang digunakan dalam kondisi 1 2. WHILE Pengulangan WHILE disebut dengan istilah indeterminate loop adalah ju mlah 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 sebelu m dilakukan. Selama kondisi berhenti mempunyai nilai true, maka perintah dalam kondisi proses akan dilaku kan terus. §<br /> <br /> 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 hamp ir 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.<br /> <br /> Break, Continue dan Exit Dalam peru langan dapat dilakukan lo mpatan. 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:<br /> <br /> 64<br /> <br /> <?PHP for($bilangan=1; $bilangan<=10; $bilangan++){ print("$b ilangan"); if($bilangan==7){ print("break"); break; } } ?><br /> <br /> 2.<br /> <br /> 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>"); } ?><br /> <br /> 3.<br /> <br /> EXIT Exit tidak sama dengan break maupun continue. Break berfungsi untuk menghentikan eksekusi file PHP dimanapun letak perintah break.<br /> <br /> 7.5.<br /> <br /> 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<br /> <br /> 65<br /> <br /> 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<br /> <br /> 1. 2. 3. 4. 5.<br /> <br /> Ketiklah script di atas. Lalu jalan kanlah di browser. Pada field Angka, ket ikkan 8, lalu perhatikan hasilnya! Pada field Angka, ket ikkan 246, lalu perhatikan hasilnya! Pada field Angka, ket ikkan 2150, lalu perhatikan hasilnya! Ketikkan baris berikut pada fungsi Terbilang di baris ke-11 : elseif ($x < 1000000) return Terbilang($x / 1000) . " ribu" . Terbilang($x % 1000);<br /> <br /> lalu cobalah kembali Langkah pada percobaan 4. Perhatikan hasilnya! 6. 7.<br /> <br /> Pada field Angka, ket ikkan 17, lalu perhatikan hasilnya! Pada field Angka, ket ikkan 113, lalu perhatikan hasilnya!<br /> <br /> 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!<br /> <br /> 66<br /> <br /> 4. 5.<br /> <br /> Bagiamana dengan percobaan ke-6 dan 7? Mengapa terjadi seperti itu? Jelaskan! Cobalah perbaiki script tersebut sehingga program bisa berjalan dengan lancar untuk semua kondisi hingga bilangan jutaan!<br /> <br /> 67<br /> <br /> MODUL 12 PHP (Array, file handling)<br /> <br /> Tujuan : Mampu menjelaskan perintah-perintah PHP (Array, file handling) dan membuat aplikasi dengan perintah-perintah PHP.<br /> <br /> Tug as 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<br /> <br /> 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.<br /> <br /> File Handli ng 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 ”mu ltipart/ fo rm-data”.<br /> <br /> 68<br /> <br /> Dan ketika dilaku kan klik pada form maka server akan menerima kiriman variabel dari form browser. Khusus untuk variabel dari ko mponen 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’][’t mp_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.<br /> <br /> 2. Kegiatan Praktikum 1. Desain dialog dibawah ini untuk memberikan pilihan menamp ilkan kalimat berapa kali, pada hitungan ke berapa akan dihentikan atau dibypass atau juga eksekusi file d ihentikan:<br /> <br /> 69<br /> <br /> 70<br /> <br /> 2.<br /> <br /> Perlu diperhatikan bahwa variabel akan dikirimkan pada file itu sendiri. Untuk melakukannya dapat dilaku kan dengan melaku kan pemeriksaan apakah telah didapatkan variabel $proses yang diambil dari nilai to mbol SUBMIT. Maka tambahkan program pada baris ke-42 berikut ini:<br /> <br /> 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:<br /> <br /> Tamp ilan:<br /> <br /> 71<br /> <br /> 3. Tugas. 1. Amatilah apa yang terjadi pada kegiatan prakt iku m ke-2! 2. Buatlah program yang mendefinisikan fungsi Sort dan amatilah apa yang terjadi: Digunakan untuk mengurutkan elemen-elemen array. Hanya elemenelemennya saja yang diurutkan dengan pola ascending, sedangkan indeks tidak ada perubahan. Contoh:<br /> <br /> 72<br /> <br /> 3.<br /> <br /> <?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>"); } ?> 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>"); }<br /> <br /> 73<br /> <br /> 4.<br /> <br /> ?> 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:<b r>"); ksort($buah); fo reach($buah as $indeks => $nilai){ print("[$indeks] adalah $nilai <br>"); } ?><br /> <br /> 74<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-i-html-tujuan-mampu-menjelaskan-pengertian-struktur-da" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MODUL I HTML. Tujuan : Mampu Menjelaskan pengertian, struktur dasar, tag-tag HTML dan membuat aplikasi dengan perintah-perintah HTM L"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

Close Send

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close