modul

FMIPA UNLAM Ilmu Komputer [Type the document title]MODUL PRAKTIKUM PEMPROGRAMAN WEB

PRAKTIKUM PEMPROGRAMAN WEB

MODUL 1 HTML1.1 TUJUAN

1. Mengenalkan kepada mahasiswa tentang HTML 2. Mahasiswa dapat membuat halaman web dengan menggunakan HTML3. Mahasiswa dapat membuat halaman web dengan menggunakan script HTML dan

PHP1.2 DASAR TEORI

HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser.Protokol ini mentransfer dokumendokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk memperindah file teks

biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut. Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol lebih besar (). Pasangan dari sebuah tag ditandai dengan simbol garis miring (/). Misalnya pasangan dari tag adalah . Dalam hal ini kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atributatribut untuk mengatur elemen itu. Jadi misalnya elemen bila ditulis dengan atributnya adalah sebagai berikut: . Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah. Struktur dasar HTML teks pada title bar web browser Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.

Seperti terlihat, struktur file HTML diawali dengan sebuah tag dan ditutup dengan tag . Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag ... dan tag ... . Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti ... yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.1.3 PELAKSANAAN PRAKTIKUM Praktikum 1.1 Ordered_Unordered.html Sebentuk list unordered:

Teh Susu
Sebentuk list ordered: Kopi Teh Susu Sebuah list bersarang:

Teh hitam

Teh Hijau

Praktikum 1.2Tabel.html Setiap tabel dimulai dengan tag table. Setiap baris tabel dimulai dengan tag tr.

PRAKTIKUM PEMPROGRAMAN WEBSetiap data dalam tabel dimulai dengan tag td. Satu baris satu kolom dengan border normal:

Satu baris dan tiga kolom dengan border tebal: 100 200 300 Dua baris dan tiga kolom dengan border sangat tebal: 100 200 300 400 500 600 Tabel ini tidak memiliki border: 100 200 300 400 Tabel ini di Merge teks teks teks teks teks teks

PRAKTIKUM PEMPROGRAMAN WEB Praktikum 1.3 forming.html

Ketikkan script berikut ini untuk mengkonversi tipe data. Textbox Textarea Checkbox Laki-Laki Perempuan Radio button Laki-Laki Perempuan Select Laki-laki Perempuan File field

PRAKTIKUM PEMPROGRAMAN WEB 1.4 LATIHAN

Buatkan kode HTML dari halaman web dibawah

1.5 TUGAS

Carilah sebanyak-banyaknya di berbagai referensi mengenai tag-tag html beserta kegunaannya. Contoh penulisan:No 1 2 Tag
Fungsi Menampilkan fungsi enter di halaman Menampilkan teks dengan format heading 1

MODUL 2 CSS2.1 TUJUAN

1. Mahasiswa dapat memahami konsep CSS2. Mahasiswa dapat men-costumize HTML dengan CSS

2.2 DASAR TEORI

1. PENGERTIAN CSS Cascading Style Sheet adalah suatu teknologi yang digunakan untuk memperindah tampilan halaman website (situs). Dengan Metode CSS keseluruhan warna dan tampilan yang ada di situs web dapat dirubah/diformat ulang dengan cepat. CSS juga telah di standartkan oleh World Wide Web Consortium (W3C) untuk di gunakan di web browser. Penulisan CSS ... css... Contoh : merah, meriah euy... 2. ISTILAH-ISTILAH DALAM STYLE SHEET a. Style rule Cascading style sheet merupakan kumpulan aturan yangmendefinisikan style dari document. Sebagai contoh kita bias membuat aturan style yang menentukan bahwa semua ditampilkan dengan warna orange. b. Style sheet Style sheet dapat di-embedded ke HTML document. Atau disebutembedded style sheet. Style sheet juga bisa dibuat sebagai externalfile dan di link ke document HTML. Style role bisa di kenakan padabagian tertentu dari web page. Sebagai contoh anda bisa menentukanparagraph tertentu di tampilkan dengan style bold dan italicsementara yang lain tetap seperti biasa. c. Selector selector { property1: value; property2:value, . . .} h1{ color:green; background-color:orange} Style sheets terdiri dari dua bagian:

-Selector ,Bagian pertama sebelum tanda {} disebut selector - Declaration,Terdiri dari properti dan nilainya.2.3 PELAKSANAAN PRAKTIKUM Praktikum 2.1 font-css.html p.normal {font-weight: normal} p.tebal {font-weight: bold} p.teballl {font-weight: 900} p.lengkap { font: italic small-caps 900 12px arial } Perhatikan paragraf ini Bandingkan dengan paragraf diatasnya Bandingkan yang ini juga Paragraf dengan semua atribut font dimasukkan

Praktikum 2.2 border-css.html p.borderous { border-style: double; border-width: 5px 10px 1px medium; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } Catatan: Properti "border-color" dan "border-width" tidak dikenali oleh browser Internet Explorer bila digunakan secara langsung. Gunakan properti "border-style" untuk menyiapkan border dalam Internet Explorer.
Internet Explorer 5.5 mendukung semua border style. Internet Explorer 4.0 5.0 tidak mendukung nilai "dotted" dan "dashed"

PRAKTIKUM PEMPROGRAMAN WEB Praktikum 2.3 margin-css.html p.margin {margin: 2cm 4cm 3cm 80px} Yang ini adalah paragraf biasa tanpa pengaturan margin, sepertinya biasa saja. Bandingkan dengan tampilan paragraf ini.Coba Anda kecilkan ukuran window browser agar terlihat lebih jelas perbedaannya. This is a paragraph

Praktikum 2.4 padding-css.html td {padding: 1.5cm} td.value2 {padding: 0.5cm 2.5cm} Ini adalah tabel dengan sel yang menggunakan padding sama pada setiap sisinya (1,5cm).
Bandingkan dengan tampilan tabel ini.Padding atas dan bawah memiliki nilai 0,5cm, sedangkan padding kanan dan kiri nilainya 2,5cm.

Buatlah table pada HTML kemudian masukkan CSS sehingga menjadi tampilan seperti dibawah:

2.5 TUGAS

Coba observasi css yang digunakan oleh website-website besar seperti facebook.com, google.com atau youtube.com kemudian pilih dua objek yang menjadi ciri khas web site tersebut (misalnya: button login & textbox register pada facebook.com). Tugas anda adalah MENIRU css objek tersebut.

MODUL 3 JAVASCRIPT3.1 TUJUAN

1. Mahasiswa dapat memahami konsep Javascript2. Mahasiswa dapat menggunakan kode-kode javascript ke dalam sebuah halaman

web3.2 DASAR TEORI

JavaScript adalah sebuah bahasa script yang dicantumkan pada sebuah halaman web dan dijalankan pada browser web. JavaScript adalah namaimplementasi Netscape Communications Corporation untuk ECMAScriptstandar, suatu bahasa skrip yang didasarkan pada konsep pemrogramanberbasis prototipe. Bahasa ini terutama terkenal karena penggunaannyadi situs web (sebagai JavaScript sisi klien ) dan juga digunakan untukmenyediakan akses skrip untuk objek yang dibenamkan (embedded ) diaplikasi lain. Walaupun memiliki nama serupa, JavaScript hanya sedikitberhubungan dengan bahasa pemrograman Java , dengan kesamaanutamanya adalah penggunaan sintaks C. Secara semantik, JavaScriptmemiliki lebih banyak kesamaan dengan bahasa pemrograman Self . SkripJavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harusdimasukkan di antara tag....Operator Aritmetika Operator + * / % Description Addition Subtraction Multiplication Division Modulus (division remainder) Example x=2 x+2 x=2 5-x x=4 x*5 15/5 5/2 5%2 10%8 10%2 x=5 x++ x=5 x-Result 4 3 20 3 2.5 1 2 0 x=6 x=4

Increment Decrement

PRAKTIKUM PEMPROGRAMAN WEB Operator Penunjukan Operator = += -= *= /= %= Example x=y x+=y x-=y x*=y x/=y x%=y Is The Same As x=y x=x+y x=x-y x=x*y x=x/y x=x%y

Operator Perbandingan Operator == != > < >= 8 returns false 5=8 returns false 5 1) returns true x=6 y=3 (x==5 || y==5) returns false x=6 y=3 x != y returns true 3.3 PELAKSANAAN PRAKTIKUM Praktikum 3.1 operator.html varbil1=3; var bil2=5; var hasil=bil1+bil2; document.write(Penambahan = +hasil+
); document.write("Perkalian = "+ hasil)

PRAKTIKUM PEMPROGRAMAN WEB Praktikum 3.2 percabangan.html var r=Math.random() if (r>0.5) { document.write("Visit UNLAM Official Website") } else { document.write("Visit UNLAM Official Website") }

Praktikum 3.3 pengulangan.html for (i = 0; i PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL, PostgreSQL,, Oracle, dan lainnya. Beberapa script dasar PHP : 1. Menampilkan textecho "..text .
"
: ganti baris

2. Variabel Untuk membuat variabel diberi tanda dollar ($).Variabel berfungsi untuk menyimpan suatu nilai dan dapat berubah-ubah. Penulisan variable yang benar adalah : Karakter pertama tidak boleh berupa angka (harus berupa huruf atau garis bawah) Tidak mengandung spasi Pemakaian huruf kapital dan huruf kecil dibedakan

Contoh penulisan variable : $data, $data1, $data_ku

3. Array Array merupakan suatu variabel yang dapat berisi banyak data dalam waktu yang sama. Pendefinisian Array dapat dibentuk dengan format berikut : $nama_array = array(elemen_1, , elemen_n); Untuk menghitung jumlah elemen array digunakan fungsi count(), dengan format count($nama_array).

4. Operator Dalam PHP juga dapat melakukan proses operasi, baik itu penjumlahan, operasi logika, ataupun operasi pembanding. Operator Matematika yang digunakan dalam PHP yaitu : Operator + * % Fungsi Penjumlahan Perkalian Sisa pembagian Operator / ++, -Fungsi Pengurangan Pembagian Penaikan, Penurunan

Operator Pembanding yang digunakan dalam PHP yaitu : Operator == = Lebih dari sama dengan !=, Tidak sama dengan Operator < > Fungsi Kurang dari Lebih dari

Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and (&&), or (||), xor, dan !.

5. Penulisan tanda khusus dengan tanda / Karakter yang ditulis dengan diawali tanda (\) yaitu: Operator \ \$ \t Fungsi Tanda petik ganda Tanda $ Tab Operator \\ \n \x00 s.d \xFF Fungsi Tanda backslash Pindah baris Heksadesimal

6. Tipe data Tipe data yang dikenal pada pemrograman PHP yaitu : OperatorInteger Double String

FungsiTipe data bilangan bulat Tipe data bilangan real Tipe data teks

7. Konversi tipe data Fungsi-fungsi yang digunakan dalam PHP untuk mengkonversikan tipe data ke tipe data yang lain yaitu dengan memberikan fungsi intval, doubleval, dan strval. Atau dengan menggunakan teknik cast, yaitu dengan mengubah tipe ekspresi yang akan dikonversi.

8. Menampilkan tanggal dan waktu Untuk menampilkan tanggal dan waktu secara update, dapat menggunakan perintah date dengan format-format berikut : Operatora,A d,D F g,G Z y,Y h,H

Fungsiam atau pm, AM atau PM hari/tanggal dalam 2 digit, hari (Sun..Sat) nama bulan (January..December) jam (1..12), jam (0..23) hari dari tahun (0..365) tahun dalam 2 digit, tahun dalam 4 digit jam (01..12), (00..23)

PRAKTIKUM PEMPROGRAMAN WEB I m,M S W a,A d,D menit (00..59) Nama bulan (01..12), nama bulan (Jan..Dec) Detik (00..59) hari (0=Sunday..6=Saturday) am atau pm, AM atau PM hari/tanggal dalam 2 digit, hari (Sun..Sat)

4.3 PELAKSANAAN PRAKTIKUM Praktikum 4.1

1. Ketikkan program berikut ini : Variabel

2. Simpan dengan menggunakan ekstensi php (misalnya latihan41.php) di folder htdocs/modul4 dan jalankan di web browser.Praktikum 4.2

1. Ketikkan program berikut : Pemrograman PHP dengan Array

2. Simpan script (latihan42.php) diatas lalu lihat hasilnya di web browser. Perhatikan urutan nama-nama yang tampil dari perintah echo $nama[1] . $nama[2] . $nama[0]; 3. Tambahkan fungsi count untuk menghitung jumlah elemen array $nama dengan menambahkan script berikut ://menghitung jumlah elemen array $jum_array = count($nama); echo "jumlah elemen array = ". $jum_array;

Praktikum 4.3

Ketikkan script berikut ini untuk mengkonversi tipe data. Konversi Tipe

Praktikum 4.4

Ketikkan script berikut untuk menampilkan tanggal dengan mengambil tanggal di server. Tanggalan

Buatlah aplikasi sederhana untuk memghitung luas segi empat, luas segitiga, luas trapezium, dan luas balok4.5 TUGAS

Modifikasi masing-masing aplikasi sederhana dari sub bab Latihan yaitu dengan membuat inputan variabel menggunakan form. Misal Aplikasi menghitung luas segi empat

Submit ditekann

MODUL 5 STRUKTUR KONTROL DAN FUNGSI5.1 TUJUAN

1. Mahasiswa dapat menggunakan struktur kontrol untuk kasus tertentu2. Mahasiswa dapat membuat pemrograman PHP yang melibatkan pernyataan

percabangan dan Perulangan3. Mahasiswa dapat menggunakan fungsi di PHP

5.2 DASAR TEORI

1. Percabangan a. Bentuk IF Perintah IF ini akan menjalankan statement jika kondisinya bernilai benar (True).if (expr) { Statement }

b. Bentuk IF ELSE Dalam bentuk ini jika ekpresi bernilai benar maka statement_1 akan dijalankan, tetapi jika salah maka statement_2 yang akan dijalankanIf (expr) Statement_1 Else Statement_2 If (expr) { Statement_1a; Statement_1b; } Else { Statement_2a; Statement_2b; }

c. Bentuk IF ELSE IF Bentuk if-elseif ini cocok untuk melakukan pengambilan keputusan yang melibatkan banyak alternative. PHP dapat mengetahui bentuk elseif dan else if.If (expr) Statement_1; Else if (expr) Statement_2; Else Statement_3;

d. Bentuk SWITCH Pada prinsipnya penggunaan switch hampir sama dengan pengunaan kondisi if elseif. Dalam pengunaan switch juga disertakan perintah break. Tanpa perintah break semua peryataan akan dijalankan. Bentuk pernyataan switch yaitu :Switch (ekspresi) { case ekspresi_case_1: pernyataan; break; case ekspresi_case_n : pernyataan_n; break; default: pernyataan_default; }

2. Pengulangan a. Bentuk WHILE Perulangan mengunakan while mempunyai bentuk yang mudah untuk

digunakan. Perintah while akan terus diulang selama kondisi berisi TRUE dan akan berhenti jika kondisi berisi FALSEwhile (expr) statement

b. Bentuk FOR Perulangan mengunakan for mempunyai 3 ekpresi: o Expr1 adalah ekpresi untuk memberikan nilai awal yang akan digunakan untuk perulangan. o Expr2 adalah ekpresi untuk memberikan kondisi dalam perulangan. Jika kondisi tersebut bernilai TRUE maka perulangan akan dilanjutkan. Jika kondisi tersebut bernilai FALSE makan perulangan akan berhenti. o Expr3 digunakan untuk mengatur nilai variabel yang digunakan pada expr1for (expr1; expr2; expr3) statement

c. Bentuk DO WHILE Perulangan mengunakan do while ini akan berakhir jika ekpresi bernilai FALSE21

PRAKTIKUM PEMPROGRAMAN WEBDo { Statement } While (expr)

3. Fungsi Fungsi (function) merupakan serangkaian script/kode yang mempunyai kegunaan khusus dan tertentu, merupakan seurutan atau serangkaian kode yang sering dipakai.Dengan adanya fungsi ini pemrograman dapat dipermudah karena tidak harus menulis berulang-ulang rangkaian kode script ini. Sintaks: function nama_fungsi(argumen) { kodeperintah } Contoh : function kali( $bil1 ,$bil2 ) { $hasil = $bil1 * $bil2; return $hasil; } Dalam pemberian sebuah nama fungsi, maka nama fungsi itu tidak boleh samadengan nama fungsi yang telah disediakan oleh PHP contohnya fungsi echo, print danlain-lain. Fungsi dapat dibedakan menjadi beberapa macam yaitu: a. Fungsi tanpa parameter input Fungsi ini hanya memiliki nama fungsi saja. Ciri utama dari fungsi jenis ini adalah nilai statement yang ada dalam lingkup fungsi bersifat statis karena tidak ada parameter inputan. Contoh:

b. Fungsi dengan parameter input Fungsi jenis ini memungkinkan untuk menghasilkan nilai statement yang dinamis karena adanya parameter inputan yang dapat dimasukkan dari luar fungsi. Parameter input pada sebuah fungsi biasanya sama seperti penentuan nama variabel di PHP. Contoh:

c. Fungsi dengan return value Fungsi jenis ini dapat mengembalikan sebuah nilai.Pada umumnya, hasil kembalian dari return value dapat disimpan kembali ke dalam sebuah variabel atau langsung diproses untuk dilakukan perhitungan kembali. Ciri utama fungsi ini adalah adanya statement return diakhir fungsi. Contoh:

5.3 PELAKSANAAN PRAKTIKUM Praktikum 5.1

1. Ketikkan program berikut ini : Struktur Control IF

2. Simpan dengan menggunakan ekstensi php (misalnya latihan51.php) di folder htdocs/modul5 dan jalankan di web browser.Praktikum 5.2

1. Ketikkan program berikut : Struktur Control IF ELSE

2. Simpan script (latihan52.php) diatas lalu lihat hasilnya di web browser

Praktikum 5.3

Ketikkan script berikut ini untuk mengetahui penggunaan switch dan simpan dengan nama latihan53.php. Pernyataan SWITCH

PRAKTIKUM PEMPROGRAMAN WEB Praktikum 5.4

Ketikkan script berikut untuk mengetahui penggunaan perulangan while dan simpan dengan nama latihan54.php Perulangan dengan While

Praktikum 5.5

Ketikkan script berikut untuk mengetahui penggunaan fungsi dengan parameter dan simpan dengan nama latihan55.php Parameter

modul

Documents