Modul HTML Php

download Modul HTML Php

of 57

Transcript of Modul HTML Php

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 1 Mengenal HTMLTujuan : Peserta mengenal struktur dasar dokumen HTML dan memahami bahwa situs-situs dibangun oleh tag-tag HTML. Peserta mengetahui aplikasi yang dapat digunakan untuk membuat file HTML. Membuat sebuah homepage sederhana.

Struktur Dokumen HTMLHypertext Markup Language (HTML) merupakan bahasa pengkodean yang digunakan untuk menuliskan halaman web. Dengan menggunakan bahasa HTML ini, sebuah browser (contoh : Netscape, Internet Explorer) akan mengubah isi file (yang ditulis dengan HTML) menjadi sebuah halaman web. Dokumen HTML diawali dengan tag dan diakhiri dengan tag. Dokumen HTML ini mempunyai 2 bagian utama yaitu, bagian head dan Body. Bagian Head berisikan informasi tentang dokumen yang tidak akan ditampilkan pada browser. Sedangkan pada bagian body, berisikan tentang semua informasi yang akan ditampilkan pada browser. Struktur dasar setiap dokumen HTML adalah sbb: Judul web

keterangan: tag :menyatakan suatu komentar yang tidak akan diproses oleh browser.

1

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Apa yang dibutuhkan ?Untuk membuat homepage, kita dapat menggunakan sebuah editor teks yaitu notepad (yang ada di setiap sistem operasi Windows) atau teks editor lainnya . Selain itu juga dapat juga digunakan editor-editor yang sudah dibuat khusus untuk membuat homepage seperti frontpage, macromedia dreamweaver, edit plus, ultra edit, macromedia flash. Untuk melihat hasil dalam bentuk halaman web, diperlukan browser. Browser yang digunakan antara lain : Netscape, Internet Explorer, Mozilla, opera. Selain itu, ada beberapa editor seperti frontpage, edit plus sudah menyediakan fasilitas preview suatu file HTML menjadi sebuah halaman web. Contoh : Gunakan editor NOTEPAD lalu buatlah sebuah file dengan isi seperti di bawah ini : homepage pertama halo !!!! Kemudian simpan dengan nama halo.htm atau halo.html. Kemudian gunakan browser atau fasilitas preview yang ada pada editor yang digunakan. Pada penulisan tag-tag HTML tidak dipengaruhi oleh aturan case sensitive. Jadi penulisan sama dengan atau .

LATIHAN MODUL 1Kerjakan latihan berikut ini (dengan menggunakan editor notepad) : latihan 1

2

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Sulitkah belajar linux? Apa benar linux itu tidak usah bayar untuk mendapatkannya? Apa ada distribusi linux yang bersifat komersial? Temukan jawabannya pada seminar oleh pinguin Kemudian simpan dengan nama latihan1.htm Pada saat anda lihat di browser, ternyata hasilnya tidak sesuai dengan yang kita ketik. Pada layar browser akan terlihat seperti :

Ternyata penekanan tombol enter atau spasi hanya berpengaruh di editor teks saja dan tidak berpengaruh pada saat ditampilkan di layar browser.

3

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 2 Membuat Kumpulan TeksTujuan : Peserta mengenal perintah-perintah untuk melakukan pembuatan teks, seperti cara pembuatan paragraf, kutipan teks, teks preformatted dan teks address Peserta dapat membuat situs berbasiskan teks sesuai dengan format yang diinginkan.

ParagrafUntuk membuat paragraf dalam HTML ditandai dengan dan diakhiri dengan . Sintaks: isi paragraph Hubungan antar baris dalam paragraf akan diatur secara otomatis sehingga akan tampak lebih teratur.

BRTag Line break digunakan untuk menuliskan teks pada baris berikutnya. Sintaks:
isi teks atau isi teks yang ditulis

Preformatted TextJika kita menuliskan suatu kalimat dalam file HTML dan ingin menampilkan apa adanya maka kita menggunakan tag . Sintaks : isi teks yang ditampilkan apa adanya

AddressBila kita ingin memberikan informasi tentang pengarang, diri kita sendiri, alamat kantor maka daapt digunakan tag Sintaks : isi alamat

4

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Menyisipkan kutipan Teks (BLOCKQUOTE)Bila kita ingin menuliskan suatu kutipan kalimat seseorang atau suatu buku dalam halaman web bisa digunakan fasilitas blockquote. Sintaks : ..

Menengahkan teks dengan Pada aplikasi pengolah kata, fasilitas menengahkan teks selalu kita gunakan untuk membuat judul atau untuk kepentingan lainnya. Pada halaman web kita dapat melakukan dengan menggunakan tag . Sintaks : isi teks ini di tengah

Membuat Garis HorisontalHTML menyediakan fasilitas untuk membuat garis horisontal . Sintaks : Tag ternyata tidak berdiri sendiri, tag mempunyai empat buah atribut yaitu size, width, align dan noshade. Berikut ini adalah keterangan pemakaian keempat atribut tag : Atribut Keterangan Menentukan Tebal garis Menentukan lebar garis dalam ukuran pixel Menentukan lebar garis sebesar x% dari lebar layar monitor Menentukan posisi garis. Nilai align adalah right, left, atau center Menghilangkan bentuk 3D dari garis.

Atribut tag dapat digunakan bersama-sama. Contoh :

Latihan modul 2

5

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan latihan paragraf dan garis dewasa ini homepage telah menjadi media alternatif bagi media promosi. Karena dengan menggunakan homepage cakupan pangsa pasar tidak berlaku regional saja, tetapi internasional. Dan lagi sebuah perusahaan atau perorangan dapat menampilkan jenis usahanya selama 24 jam penuh dan orang dapat mengkasesnya dari mana dan kapan saja. Kalimat ini ada di baris pertama. Kalimat ini seharusnya berada di bawah baris pertama.
Kalimat ini berada di bawah baris pertama.
seharusnya terdapat jarak antara kedua kata berikut ini Jakarta Sekarang terdapat jarak antara kedua kata berikut ini Jakarta Blockqoute akan meformat teks ke dalam kutipan teksdgn indentasi kiri dan kanan margin Bandung Bandung

6

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Toko sagala aya Menyediakan semua kebutuhan anda Jl.Kinabalu-Timbuktu 2222 Telepon :0220

7

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 3 Memformat TeksTujuan : Peserta dapat memakai fasilitas format teks yang disediakan oleh HTML sesuai dengan kebutuhan.

HeadingPerintah Heading digunakan untuk menuliskan judul atau subjudul dalam suatu dokumen HTML. Sintaks: Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6

Memberikan format khusus pada textHTML menyediakan fasilitas untuk membuat teks menjadi tebal, miring maupun mempunyai garis bawah seperti yang dipunyai oleh aplikasi pengolah kata. Adapun penggunaan fasilitas di atas sbb: Tag Keterangan . Menebalkan Teks . Membuat Teks miring . Teks bergaris bawah Selain ketiga fasilitas format teks di atas, masih ada beberapa tag lain untuk memformat teks yaitu :

8

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Tag . . .. . ..

Keterangan Menebalkan teks Membuat teks miring Membuat teks miring Membuat teks monospace Membuat tulisan lebih tinggi dari isi teks lainnya Membuat tulisan lebih rendah dari isi teks lainnya

FontUntuk mengatur bentuk huruf, HTML menyediakan fasilitas Tag . Tag font ini memiliki beberapa atribut untuk mengatur ukuran, jenis dan warna font.

Ukuran fontMemiliki aturan dari ukuran font dengan nilai 1 sampai dengan nilai 7. Sintaks : isi teks Contoh : teks teks teks teks teks teks teks

Jenis FontDigunakan bila kita ingin memakai jenis font tertentu dalam tulisan di dokumen HTML. Misalnya kita ingin menggunakan font ARIAL. Sintaks: isi teks Contoh : Bandung Raya,Peri Sandria (dengan jenis font arial)

9

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Bandung Raya,Peri Sandria (dengan jenis font times)

Warna FontSintaks : isi teks Warna yang bisa digunakan a.l : Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Silver Teal Yellow White

Contoh : isi teks isi teks Penggunaan tag font dapat digabungkan, lihat contoh berikut : isi teks

Menampilkan Karakter KhususAda kalanya kita ingin menampilkan karakter > atau < pada dokumen HTML. Sayangnya karakter tersebut tidak dapat digunakan secara langsung. Untuk itu diperlukan suatu perintah untuk menampilkannya. Untuk menampilkannya diperlukan suatu referensi nama atau bilangan yang mewakili karakter yang akan ditampilkan. Berikut ini akan diberikan tabel referensi nama atau bilangan untuk menampilkan karakter khusus. Karakter < > & Referensi Nama < &gt &amp &qout Referensi Bilangan < > &38 "

10

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

&reg &copy

11

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan Modul 3 latihan memformat teks Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 tulisan ini akan tercetak tebal
tulisan ini akan tercetak miring
tulisan ini akan mempunyai garis bawah
tulisan ini juga akan tercetak tebal
tulisan ini juga akan tercetak miring

teks dgn size 1
teks dgn size 2
teks dgn size 3
teks dgn size 4
teks dgn size 5
teks dgn size 6
teks dgn size 7
Contoh Penggunaan jenis font :
Bandung Raya,Peri Sandria (dengan jenis font arial)
Bandung Raya,Peri Sandria (dengan jenis font times)
Contoh penggunaan warna pada font :

12

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

isi teks dengan warna merah
isi teks warna abu-abu
Contoh penggunaan gabungan perintah pada tag font :
Apa benar linux itu tidak usah bayar untuk mendapatkannya?
Contoh penggunaan karakter khusus :
Tampilan menggunakan referensi nama : < body >
Tampilan menggunakan referensi angka : < body >
Contoh Penggunaan sub dan sup :
Rumus kimia air adalah H2O
Persamaan kuadrat : y = 2x 2

13

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 4 Menambahkan Gambar Pada Halaman WebTujuan : Peserta dapat menambahkan gambar dan melakukan manipulasi gambar pada halaman web Peserta mengetahui format gambar yang didukung oleh HTML

Format Gambar pada Web PageFormat gambar yang dapat ditampilkan pada ke dalam HTML adalah yang bertipe jpeg (.jpg, .jpeg), GIF( .gif), bitmap (.bmp) . Contoh : garpu.jpeg, garpu.jpg, cincin.gif, mobil.bmp Jadi kalau ada gambar dengan format selain di atas harus dikonversikan menjadi salah satu tipe di atas sesuai dengan kebutuhan.

Memasukkan Gambar pada Web pageUntuk memasukkan gambar dalam web page digunakan perintah dengan sintaks : contoh :

Mengatur Letak Teks terhadap GambarGambar yang disisipkan pada web page dapat diatur letaknya terhadap teks supaya letak teks proporsional terhadap gbr. Perintah untuk mengatur letak teks terhadap gambar adalah : Untuk posisi lainnya bisa dimasukkan nilai align = baseline|absmiddle|absbottom|tekstop Contoh :

14

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Mengubah Ukuran gambarAda kalanya, gambar yang kita masukkan terlalu besar ukurannya. Untuk itu ada perintah dalam HTML yang memungkinkan kita untuk mengubah ukuran gambar sesuai dengan keinginan kita . Perintah untuk mengubah ukuran gambar adalah : Sintaks : Contoh :

Menampilkan Teks Pengganti GambarAda kalanya, browser yang kita gunakan tidak bisa menampilkan gambar yang ada di suatu situs. Supaya kita bisa mengetahui gambar apa yang tidak ditampilkan maka pembuat situs mencantumkan sebuah keterangan sebagai pengganti gambar yang tidak muncul. Perintah yang digunakan adalah : Sintaks : Contoh :

Menggabungkan Gambar dengan Tag lainPerintah menampilkan gambar dapat digabungkan dengan tag-tag lain . Contoh :

15

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan Modul 4 Manipulasi gambar Manipulasi gambar Anda dapat memasukkan gambar dalam halaman web. Gambar akan terletak di sebelah kiri dan kanan teks yang anda tulis.
Gambar akan terletak di sebelah kiri teks yang anda tulis.
Gambar akan terletak di sebelah kanan teks yang anda tulis.
teks akan rata dengan bagian atas gambar yang anda sisipkan.
teks akan rata dengan bagian bawah gambar yang anda sisipkan.
teks akan rata dengan bagian tengah gambar yang anda sisipkan.

mengubah ukuran gambar
gambar dengan lebar :
width=100

height=50

16

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 5 Hubungan Antar bagian (LINK)Tujuan : Peserta dapat memahami proses hubungan antar bagian yang dimiliki oleh HTML Peserta dapat membuat suatu situs yang terdiri dari beberapa halaman web yang saling berkaitan.

LINKHTML menyediakan fasilitas hubungan antar satu bagian ke bagian lainnya dalam halaman web, baik dalam satu halaman web sama ataupun dalam halaman web yang berbeda. Fasilitas hubungan itu merupakan suatu tag yang dinamakan LINK. Sintaks : isi teks Link dalam HTML dibagi menjadi 2 bagian yaitu : a) link Lnternal, digunakan untuk memanggil bagian lain yang masih ada dalam satu halaman web. b) link Eksternal, berlaku untuk melakukan pemanggilan kebagian lain pada halaman yang berbeda. Pada latihan berikut ini, kita akan mempelajari bagaimana link ke email, link ke bagian tertentu dari suatu halaman web, link ke sumber lain di internet, link dengan menggunakan gambar.

Latihan Modul 517

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Kerjakan latihan berikut ini : Latihan 1 Menu Penggunaan Link
Penggunaan link internal
1. link ke bagian satu
2. link ke bagian dua
3. link ke bagian tiga

Penggunaan link eksternal 1. link ke file hello.html
2. situs yahoo
3. mengirim surat
4. link ke suatu halaman dengan menggunakan gambar
















bagian ke satu
sekarang sedang berada di bagian 1
kembali ke atas















bagian ke dua
sekarang sedang berada di bagian 2

18

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

kembali ke atas















bagian ke tiga
sekarang sedang berada di bagian 3
kembali ke atas
Kemudian, simpan dengan nama link.htm Catatan : nama-nama yang digunakan untuk link harus dibuat dulu dan untuk gambar bisa diganti dengan file gambar lainnya. Latihan 2 Pada latihan 2 ini, kita akan membuat link terhadap suatu direktori/folder . Misalkan kita mempunyai folder dengan strukur seperti gbr.berikut ini :

Ikuti langkah berikut ini : Langkah 1 : ketiklah file berikut ini : link ke file isi1 link ke file isi1.htm di folder 11htm link ke file isi2.htm difolder 12 htm

19

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Kemudian simpan file di atas dengan nama index.htm di folder 1htm Langkah 2 Ketiklah file berikut ini : New Page 1 link kembali ke index.htm Kemudian simpan file di atas dengan nama isi1.htm di folder 11htm Langkah 3 Ketiklah file berikut ini : New Page 1 link kembali ke index.htm Kemudian simpan file di atas dengan nama isi2.htm di folder 12htm Latihan 3 Ketiklah file berikut ini: link ke situs yahoo Simpanlah file latihan dengan nama linknogaris.htm

20

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 6 TabelTujuan : Peserta dapat memahami proses pembuatan tabel dalam HTML Peserta dapat membuat tabel untuk keperluan penulisan teks dengan menggunakan tabel dan melakukan manipulasi tata letak situs dengan menggunakan fasilitas tabel. Peserta dapat memanipulasi prinsip frame supaya dapat dibaca oleh browser yang tidak mendukung fasilitas frame.

PendahuluanPembuatan tabel dalam HTML ditandai dengan tag dan diakhiri dengan tag. Tabel ini banyak digunakan untuk menampilkan data sehingga mudah dibaca, untuk memanipulasi tampilan situs, dan manipulasi prinsip frame. Sintaks: isi tabel Untuk membuat baris dalam tabel digunakan perintah: . Untuk membuat kolom dalam tabel digunakan perintah: Untuk membuat judul dalam tabel digunakan perintah:

Mengatur Lebar TabelUntuk mengatur lebar tabel kita gunakan perintah width. Sintaks : ..

Menambahkan Border Pada TabelUntuk menampilkan border pada tabel kita gunakan perintah di bawah ini : (misalkan kita menginginkan border=1)

21

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Menggabungkan cell pada tabelPada aplikasi excel,word kita mengenal istilah merge cell. Di dalam HTML terdapat fasilitas untuk menggabungkan cell yaitu dengan menggunakan perintah rowspan dan colspan. Sintaks penggabungan baris : isi teks Sintaks penggabungan kolom : isi teks Dimana x adalah banyaknya baris atau kolom yang akan digabung. Contoh : Kita ingin menggabungkan 2 baris : isi Kita ingin menggabungkan 2 kolom: isi Kita ingin menggabungkan 2 baris dan 2 kolom : isi

Perataan Pada TabelPerataan horisontal tabel menggunakan atribut align yang mempunyai tiga nilai yaitu left, right, center dan untuk perataan vertikal tabel menggunakan atribut Valign yang mempunyai tiga nilai top (perataaan atas), middle(tengah) dan bottom (bawah). Sedangkan untuk mengatur lebar tabel digunakan atribut WIDTH. Contoh: lihat posisi isi tabel ini
baris berikut Yaris Riyadi pindah ke Pelita KS 22

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Simpan dengan nama cobatabel00.htm

CellSpacing dan CellPadding dan Warna pada TabelAtribut Cellspacing digunakan untuk menentukan spasi yang terdapat diantara dua buah sel. Cellpadding digunakan untuk mengatur spasi di antara batas/border dengan isi dalam sel suatu tabel. Untuk pewarnaan latar belakang dalam tabel digunakan perintah BGCOLOR. Sedangkan untuk mewarnai border digunakan perintah bordercolor. Contoh penggunaan cellpadding dan cellspacing : 11 12 yaris pindah ka Pelita KS 22 Kemudian simpan dengan nama cobatabel.htm

23

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan Modul 6Kerjakan latihan berikut ini : baris 1 kolom 1 baris 2 kolom 2 baris 3 kolom 3 baris 1 kolom 1 baris 2 kolom 2 baris 3 kolom 3 Kemudian simpan dengan nama latihantabel.htm Berikut ini adalah latihan pembuatan tabel dengan penggabungan kolom dan baris : No. Nama Propinsi Ibukota 1.

24

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Jawa Barat Bandung 2. Jawa Tengah Semarang 3. Jawa Timur Surabaya Geografi Sepak bola Jawa Barat Persib DKI Persija Kemudian simpan dengan nama gabung.htm

25

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 7 FORMTujuan : Peserta dapat memahami proses pembuatan form Peserta dapat merancang dan membuat form dalam format HTML

PendahuluanForm merupakan media interaksi antara user dan aplikasi dalam web. Dengan menggunakan form, user dapat memberi masukan, memasukkan informasi-informasi tertentu yang berguna bagi pemilik situs. Dengan demikian pemilik situs akan mengetahui keinginan atau keluhan dari user . Untuk pembuatan form digunakan tag . Sintaks : ........ Contoh: masukkan data Atribut method mempunyai dua nilai yaitu get dan post. Get mengirimkan data ke server dengan cara meletakkan data pada bagian akhir URL. Post mengirimkan data ke server secara terpisah. Gunakan metode post bila data dikirimkan lebih dari satu. Input type adalah text box yang berguna untuk memasukkan data.

26

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Tag Tag Input terdiri dari beberapa jenis : Text Password Radio Check Box Submit Reset : untuk menerima masukan berupa teks . : untuk memasukkan pasword : untuk menentukan satu dari beberapa pilihan yang tersedia. : memungkinkan pembaca untuk memasukkan lebih dari satu pilihan. : untuk mengirimkan data form ke server. : untuk membatalkan data-data yang sudah diketikkan.

Tentu timbul pertanyaan bagaimana jika data yang ingin dimasukkan bukan berupa teks tetapi berupa suatu data numerik. Nah, di PHP hal itu tidak menjadi masalah karena PHP akan secara otomatis mengubah data tersebut menjadi data numerik. Contoh: misalnya kita msukkan angka 10. Pada form angka 10 ini dianggap sebagai data text. Sedangkan pada script PHP variabel angka adalah data numerik. Jadi pada saat data dikrimkan ke server secara otomatis PHP akan membaca angka 10 sebagai data numerik.

Memasukkan banyak teksPerintah ini diawali oleh tag dan diakhiri oleh tag

Memilih dari suatu daftarRadio dan Checkbox mungkin baik digunakan pada daftar pilihan yang tidak terlalu banyak. Tetapi kalau daftar pilihan yang kita akan buat itu ternyata banyak sekali maka sebaiknya digunakan perintah .. Untuk meletakkan pilihan-pilihan yang dibuat digunakan perintah .

27

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan Modul 7Kerjakan latihan berikut ini : form Form Nama :
Alamat:
Password:
Kelamin: pria wanita
Jenis komputer: ATHLON XP Duron morgan
windows98 linux mandrake tulis komentar di sini
Kemudian simpan dengan nama form.htm

28

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 8 FrameTujuan : Peserta dapat memahami proses pembuatan frame Peserta dapat merancang dan membuat frame

PendahuluanFrame merupakan salah satu cara untuk membagi widows menjadi beberapa bagian. Setiap bagian kita isikan dengan halaman web yang sesuai. Keuntungan menggunakan frame adalah kita dapat mengatur hubungan antar halaman dan user dapat menjelajahi isi situs tanpa harus berganti windows. Untuk membuat sebuah frame dibutuhkan : 1. Sebuah file pendefinisi yang berfungsi untuk mendefinisikan bentuk frame yang akan digunakan. 2. file pengisi frame yang berfungsi untuk mengisi bagian-bagian dari frame yan gtelah didefinisikan.

Struktur Dasar FrameStruktur dasar frame sbb: .

29

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Misalkan kita ingin membuat frame dengan bentuk :

Maka kita harus mendefiniskan dengan cara : keterangan : border : untuk menentukan tebal garis pemisah antar frame rows : menentukan berapa baris bagian yang akan dibentuk. Pada contoh di atas kita membuat dua baris dengan lebar 25% dan sisanya 75% (di atas digunakan * karena kita hanya membagi menjadi 2 bagian). Jika kita ingin menjadi 3 baris maka pada atribut rows akan ditulis atau . cols name : prinsipnya sama dengan rows. : untuk memberikan identitas pada frame tersebut. Nama frame bersifat case

sensitive ( fungsinya adalah pada saat nama frame tsb. dijadikan target untuk menampilkan suatu halaman). src : menunjukkan file yang akan mengisi frame tsb. scrolling : untuk menunjukkan apakah kita akan menggunakan scrolling bar di samping dan bawah halaman. Pilihannya adalah yes, no, atau auto.

30

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Latihan modul 8Untuk latihan Frame ini, kita akan membuat empat buah file yang terdiri dari index.htm (merupakan frame utama ), logo.htm(isi frame), menu.htm (isi frame) dan welcome.htm (isi frame). Dan Simpan keempat file tersebut dalam satu folder. Pertama , Akan buat frame utama : simpan dengan nama : index.htm Berikut ini akan dibuat tiga buah pengisi frame utama : Ketik file berikut ini : halo ini situs saya Kemudian, simpan file di atas dengan nama : logo.html Ketik file berikut ini : isi link ke file halo.htm

31

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

link ke file tabel.htm Kemudian, simpan file di atas dengan nama: menu.html Ketik file berikut ini : selamat datang di Situs saya Kemudian simpan file di atas dengan nama : welcome.html

32

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

MODUL 9 Membuat DaftarTujuan : Peserta dapat memahami proses pembuatan daftar. Baik menggunakan fasilitas yang disediakan oleh HTML maupun membuat kreasi sendiri. Peserta dapat merancang dan membuat daftar dengan fasilitas yang disediakan oleh HTML. Peserta dapat merancang dan membuat daftar dengan fasilitas yang disediakan oleh HTML

PendahuluanPada saat melakukan pengetikan (dengan menggunakan aplikasi pengolah kata), kita sering membuat teks dalam bentuk daftar. HTML menyediakan fasilitas pembuatan daftar seperti yang biasa kita lakukan pada aplikasi pengolah kata. Adapun fasilitas yang disediakan adalah daftar bernomor, daftar berurut, daftar tak bernomor, daftar tak berurut, daftar direktori, daftar menu, dan daftar definisi. Bentuk-bentuk daftar yang telah disebutkan di atas akan kita pelajari dan akan langsung dipraktikan untuk melihat perbedaannya.

Daftar Berurut /Daftar BernomorPada bagian ini, kita akan mempelajari bentuk pembuatan daftar baik dengan huruf maupun angka secara berurut. Untuk membuat daftar ini digunakan tag . Sintaks : isi daftar Contoh daftar berurut :

33

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

barang tipe 1 barang tipe 2 barang tipe 3

barang tipe 4

Mengubah Tipe Penomoran Untuk Daftar Berurut /Daftar BernomorPada contoh di atas, HTML langsung memberikan penomoran mulai dari no 1 s/d 4. Untuk mengubah tipe penomoran, kita dapat melakukannya dengan menambahkan atribut TYPE. Sintaks : isi daftar Dimana x adalah tipe yang diinginkan. Berikut ini adalah daftar tipe yang dapat digunakan : Tipe 1 I i A a Contoh :

barang tipe 1 barang tipe 2 barang tipe 3

barang tipe 4 Keterangan Bilangan Bilangan Romawi Bilangan Romawi kecil Huruf besar Huruf kecil Contoh 1, 2, 3, . I, II, III, . I, ii, iii, . A, B, C, a, b, c,

34

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Untuk tipe lainnya diserahkan kepada peserta sebagai latihan. Ada satu fasilitas lagi untuk menampilkan data berurut, yaitu kita dapat menentukan mulai dari nomor berapa atau huruf apa urutan dimulai. Lihat contoh berikut ini :

barang tipe 1 barang tipe 2 barang tipe 3 barang tipe 4 Hasil yang tampak di layar adalah nomor urut dimulai dari angka 5. barang tipe 1 barang tipe 2 barang tipe 3

barang tipe 4 Hasil yang tampak di layar adalah urutan huruf dimulai dari huruf e.

Daftar Tak Berurut

35

Modul Praktikum Dasar-Dasar Pemrograman Web

Bambang Pudjoatmodjo.,SSi.,MT

Daftar tak berurut adalah daftar yang dibentuk tanpa memperhatikan urutan atau penomoran dari item-item yang kita buat. Untuk pembuatan daftar tak berurut digunakan tag

  • Sintaks :
    • .
    Kerjakan contoh berikut ini :
    • barang tipe 1
    • barang tipe 2
    • barang tipe 3
    • barang tipe 4
    Daftar DirektoriUntuk membuat daftar direktori digunakan tag Sintaks : Contoh :
  • auto.bat
  • cong.sis

    Daftar Definisi36

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    Pembuatan daftar definisi terdiri dari dua bagian yaitu : 1. bagian istilah dengan mengunakan tag 2. bagian definisi dengan menggunakan tag Kedua bagian di atas terletak di antara tag .. Contoh: olahraga menggerakan anggota badan dengan gerakan tertentu Sepakbola permainan bola dengan menggunakan kaki

    Membuat Daftar dengan Menggunakan GambarKita bisa membuat daftar dengan menggunakan gambar/image sehinga mempunyai tampilan yang menarik. Untuk jelasnya lihat contoh berikut ini : item1
    item 2
    item 3
    item 4

    37

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    Dasar-Dasar Pemrograman PHP Web Database dengan PHP-MySQL Web template dengan PHP

    38

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    Modul Dasar-dasar Pemrograman PHPTujuan : Peserta mengenal struktur dasar bahasa pemrograman PHP Peserta memahami cara penulisan PHP Peserta mengenal tipe-tipe variable dalam bahasa pemrograman PHP Peserta mengenal pencabangan dalam PHP Peserta mengenal pengulangan dalam PHP Peserta mengenal subrutin dalam PHP

    Pendahuluan PHP adalah bahasa pemrograman yang embedded dengan dengan HTML, maksudnya adalalah perintah-perintah dalam PHP daapt menyatu dengan tag-tag html dalam sebuah file. Agar PHP dapat dikenali oleh web server maka PHP mempunyai ekstensi file .php cotohnya index.php, menu.php. Struktur Program PHP Pada uraian di atas, dikatakan bahwa PHP adalah bahasa yang HTML-embedded, sehingga harus ada sebuah cara penulisan yang membedakan bagaian mana dari sebuah file yang merupakan script PHP. Berikut ini ada 3 buah cara untuk menuliskan script PHP dalam struktur dokumen HTML: Cara 1 Cara 2 Cara 3 Dimana titik-titik adalah tempat kita mengisi perintah-perintah PHP. Berikut ini adalah ilustrasi dari penempatan perintah PHP dalam struktur HTML

    39

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    Dari contoh di atas didapat bahwa :

    Perintah php dibuka dengan tag Setiap baris perintah diakhiri oleh tanda titik koma ; (bagi yang pernah belajar bahasa pascal tentunya sudah familiar dengan hal ini) Baris komentar untuk lebih dari 1 baris diawali oleh tag */ dan diakhiri oleh tag /* Baris komentar satu baris diawali dengan // dan tidak ada tag penutup

    Variabel Dalam setiap bahasa pemrograman, akan menemui konsep variable. Variabel adalah sebuah tempat untuk data yang nilainya dapat berubah-ubah. Setiap variabel dalam PHP diawali dengan karakter $, contohnya $a. Penamaan varibel dalam PHP bersifat case sensitive, artinnya penulisan huruf besar dan huruf kecil mempunyai arti yang berbeda. Contohnya penulisan $a dan $A adalah variabel yang berbeda. Tetapi, patut diingat bahwa perintah-perintah lain dalam PHP bersifat tidak case sensitive misalnya penulisan fungsi, perintah-perintah kunci.Dan dalam PHP anda tidak perlu mendeklarasikan variabel terlebih dahulu. Kita cukup mengisi variabel dengan sebuah nilai tertentu yang diinginkan. Tipe dari suatu varibael dalam PHP secara otomatis akan ditentukan sesuai dengan nilai yang diisikan ketika membuat variabel tersebut. Selain itu juga, kita dapat memaksa sebuah variabel agar bertipe tertentu denagn menggunakan casting.

    40

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    Berikut ini adalah contoh pemakaian varaibel dalam PHP Pencabangan Pencabangan if

    41

    Modul Praktikum Dasar-Dasar Pemrograman Web

    Bambang Pudjoatmodjo.,SSi.,MT

    $suhu=25; if($suhu File : input.php Untitled Document