Modul Web Programing
Modul Web Programing
KATA PENGANTAR
Penyusun
PERISTILAHAN/GLOSSARY
Animation : Animasi dari beberapa gambar diam dibuat seperti hidup tanpa
ada patah-patah dalam pergerakannya.
Banner : Merupakan kepala atau bagian atas dari sebuah web site.
Download : Proses pengambilan file atau mengcopy file.
Effect : Tindakan yang dikerjakan untuk menghaluskan atau
memperindah animasi pada obyek.
Event : Tindakan yang dilakukan setelah adanya action.
Export : Merubah jenis format ke bentuk yang lain.
Format : Bentuk ektensi dari jenis file.
Frame : Bagian dari Timeline.
Grouping : Mengumpulkan beberapa obyek untuk dijadikan satu.
HTML : Hypertext Markup Language, bahasa penanda hipertext
Insert : Memasukkan jenis file kedalam bidang kerja SWiSHmax.
Installation manual : Petunjuk Instalasi
Keyframe : Pada dasarnya hampir sama dengan frame. Hanya saja untuk
Key frame lebih menunjukkan untuk satu frame.
License Agreement : Persetujuan lisensi penggunaan suatu software tertentu
Movie : File yang dibuat dalam SWiSHmax.
Object : Benda yang sedang dikerjakan dalam bidang kerja SWiSHmax.
Operand : data yang dioperasikan atau dimanipulasi.
Operator : simbol/tanda yang digunakan untuk melakukan operasi-operasi
matematis atau operasi string.
Player : Untuk memainkan animasi yang telah dibuat.
Preview : Melihat hasil yang telah dikerjakan.
Scane : Satu movie merupakan satu Scane.
Search Engine : Mesin bantu pencarian data.
Server : Pelayan, Komputer induk yang bertugas untuk melayani
komputer-komputer klien.
Software : Perangkat lunak, program yang berjalan di komputer.
Source Code : Kode asli suatu program
Time Line : Garis waktu atau pewaktuan yang terdapat dalam SwiSHmax.
Web design : Pembuatan/desain halaman-halaman web.
A. Rencana Pemelajaran
Tempa Tanda
Tangga Wakt Alasan
Jenis Kegiatan t Tanga
l u Perubahan
Belajar n Guru
Membuat struktur
dokumen dengan bahasa
HTML
membuat, membuka,
menyimpan file halaman
web. Serta merangkaikan
tag-tag HTML dan
memadukan objek web
lainnya sehingga menjadi
halaman web yang
menarik.
Merangkaikan perintah-
perintah bahasa pemro-
graman, basis data dan
bahasa pemrograman
berbasis web
Melakukan pembuatan
halaman Web dengan
bahasa pemrograman
berbasis web dan basis
data.
Mempersiapkan software
bantu dalam pembuatan
halaman web.
By yuanthy 2019 3
Tempa Tanda
Tangga Wakt Alasan
Jenis Kegiatan t Tanga
l u Perubahan
Belajar n Guru
Melakukan pembuatan
halaman web dengan
software bantu.
B. Kegiatan Belajar
1. Kegiatan Belajar 1:
Memahami dasar-dasar pemrograman berbasis web
b. Uraian Materi
By yuanthy 2019 4
Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi
teks editor biasa. Namun sekarang ini di pasaran terdapat banyak
sekali HTML authoring (software yang digunakan untuk membuat
atau mendesain halaman web). Macromedia Dreamweaver, Adobe
GoLive, MS FrontPage sekedar contohnya. Tetapi tanpa mengetahui
dasar-dasarnya Anda tidak akan memperoleh hasil yang maksimal.
Mengapa? Karena walaupun software-software tersebut semakin
menawarkan kemudahan dalam membuat halaman web, tetapi
biasanya seseorang masih perlu untuk mengedit halaman web
tersebut secara manual. Terutama untuk halaman web yang sangat
komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-
dasar dari desain web. Yang dibutuhkan hanya sebuah word
processor. Anda bisa menggunakan Notepad, WordPad, MS Word
atau yang lainnya. Tapi yang paling mudah adalah menggunakan
Notepad. Setelah anda memahami betul semua tag-tag dasar html,
diakhir nanti kita akan belajar membuat halaman web dengan
menggunakan web tool.
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
By yuanthy 2019 5
<title> .. </title> Sebagai titel atau judul halaman/form. Kalimat
yang terletak di dalam tag ini akan muncul
pada bagian paling atas browser Anda (pada
title bar).
By yuanthy 2019 6
6. Selanjutnya pilih direktori latihan yang tadi kita buat.
7. Pada box File name, isikan nama filenya dengan index.html
8. Pada drop down list di Save as type, pilih All Files. Sehingga
tampilannya seperti berikut:
By yuanthy 2019 7
Tip: Jika anda menggunakan Netscape Navigator, klik Open
Page kemudian Choose File
3. Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file
index.html.
By yuanthy 2019 8
4. Klik tombol Open lalu tekan tombol Ok, halaman web yang
ditampilkan dalam browser adalah seperti berikut:
Catatan:
Kode Warna
By yuanthy 2019 9
Pengaturan warna dalam dokumen HTML menggunakan mode
kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam
dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit
kode menunjukkan banyaknya intensitas dari kombinasi warna
merah, hijau dan biru.Misalnya untuk warna kuning, dibuat dengan
pencampuran warna sebagai berikut:
Red Gree Blue
n
FF FF 00
By yuanthy 2019 10
ini bisa diletakkan berbagai page attribute seperti bgcolor,
background, text, link, vlink, alink, leftmargin dan topmargin .
contoh1_1.html
<html>
<head>
<title>::: Heading Dokumen HTML:::</title>
</head>
<body bgcolor=#ffffcc text=#003399>
<h1>Headng Tingkat 1 </h1>
<h2>Headng Tingkat 2 </h2>
<h3>Headng Tingkat 3 </h3>
<h4>Headng Tingkat 4 </h4>
<h5>Headng Tingkat 5 </h5>
<h6>Headng Tingkat 6 </h6>
</body>
</html>
By yuanthy 2019 11
c. Paragraph Baru: <P> Digunakan untuk pindah alinea atau
membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi
juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk
mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu
dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT,
RIGHT, CENTER dan JUSTIFY.
By yuanthy 2019 12
pengguna yang lain (pengakses web kita). Pendeknya kita
tidak usah menggunakan font-font yang bentuknya aneh-
aneh, gunakan saja font standar. Tapi bila Anda ingin
menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.
contoh1_2.html
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color=green>Ukuran font 2 </font><br>
<font size=3 Face=arial color=blue>Ukuran font 3 </font><br>
<font size=4 Face=verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face=verdana color=blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color=green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>
Contoh lainnya:
By yuanthy 2019 13
<font size=2 face="times_new_roman" color="#0066cc">
Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang
berhubungan dengan pengaturan teks, yaitu:
By yuanthy 2019 14
h. <HR>, digunakan untuk membuat garis horisontal. Tag ini
mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
Atribut SIZE digunakan untuk menentukan panjang garis dalam
satuan pixel. Atribut WIDTH digunakan untuk menentukan
ketebalan garis. Atribut NOSHADE akan menyatakan bahwa
garis tersebut ditampilkan tanpa bayang-bayang 3-D.
contoh1_3.html
<html>
<head>
<title>::: Membuat Garis Horisontal:::</title>
</head>
<body bgcolor=#ffffcc background=saya.jpg>
<font size=1 Face=tahoma color=blue>Selamat Datang</font>
<hr size=1 width=150 align=left>
<h1><center>www.smkpgri3-mlg.sch.id</h1>
<hr size=5 align=center noshade>
</body>
</html>
i. LISTS
By yuanthy 2019 15
didefinisikan dengan tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data.
Bentuk item tanda pada Unordered List dapat diubah
dengan menggunakan atribut TYPE kedalam tag <UL>
dengan nilai “circle” untuk bentuk lingkaran tengahnya
putih, “square” untuk bentuk kotak padat hitam dan
“disc” bentuk lingkaran pada warna hitam.
contoh1_4.html
<html>
<head>
<title>::: Undordered List:::</title>
</head>
<body>
<b><font size=3 Face=tahoma color=blue>
Hobi saya adalah: </b>
<hr size=2 width=150 align=left>
<ul type=circle>
<li>Olahraga
</ul>
<ul type=square>
<li>Shurfing
</ul>
<ul type=disc>
<li>Makan Bakso
</ul>
</font>
</body>
</html>
By yuanthy 2019 16
Ordered Lists: <OL> Juga digunakan untuk membuat
daftar item bernomor, dengan tiap item dapat
menggunakan angka arab atau romawi. List entries juga
didefinisikan dengan <LI> tag. Atribut yang ada pada
Ordered List adalah TYPE dan START.
contoh1_5.html
<html>
<head>
<title>::: Ordered List:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
Pendidikan saya adalah: </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas PGRI Malang
</ol>
</font>
</body>
</html>
By yuanthy 2019 17
Hasil dari kode di atas adalah:
contoh1_6.html
<html>
<head>
<title>::: definition List:::</title>
</head>
<body>
<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
</body>
</html>
By yuanthy 2019 18
Preformatted Text: <PRE>. Digunakan untuk mengatur
format tampilan agar sesuai dengan aslinya.
contoh1_7.html
<html>
<head>
<title>the <pre> tag</title>
</head>
<body>
<h3>without the <pre> tag:</h3>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
<p><h3>with the <pre> tag:</h3>
<pre>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
</pre>
</body>
</html>
By yuanthy 2019 19
Extended Quotations: <BLOCKQUOTE>, digunakan
untuk membuat kutipan panjang, sehingga hasilnya
menjorok ke dalam.
contoh1_8.html
<html>
<head> <title>::: Blockquote:::</title> </head>
<body>
<h3>2. Pengaturan Teks</h3>
<blockqoute>
Untuk mendapatkan halaman web yang baik Anda harus melakukan
pengaturan terhadap teks seperti memilih jenis dan ukuran huruf,
perataan, dll.
</blockqoute>
</body>
</html>
3. Hypertext Link
By yuanthy 2019 20
Digunakan untuk membuat link/penghubung antara suatu halaman
dengan halaman lain, ke URL lain, juga digunakan dalam satu
halaman untuk berpindah ke sub judul yang lain atau ke lokasi
tertentu dalam satu halaman yang sama.
Sintak tag link adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>
By yuanthy 2019 21
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p><font face=verdana size=4 color=blue>
Program Keahlian:<br>
<font size=1>
<ul type=circle><li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las</ul>
</body>
</html>
Untuk melengkapi latihan kali ini, buat juga file berikut dan beri
nama ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. <br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
| <a href=link_dokumen_lain.html>H o m e</a>
| <a href=proli.html>Program Keahlian</a>
| <a href=ekstra.html>Ekstra Kurikuler</a> |
<hr><p>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
By yuanthy 2019 22
</body>
</html>
By yuanthy 2019 23
Link ke bagian tertentu dalam dokumen yang sama
http://nama_URL.
Contoh:
<a href=”http://www.dikti.org”>www.dikti.org</a>
Link email adalah membuat link pada teks, jika teks tersebut diklik
maka akan menampilkan program pengiriman email yang terdapat
pada komputer yang dipakai untuk mengakses data atau teks
tersebut secara otomatis.
Misalnya:
By yuanthy 2019 24
Link file dalam hal ini adalah apabila dikik pada teks tersebut maka
proses selanjutnya adalah mendownload file yang tercantum pada
dokumen
4. Menyisipkan Gambar/Images
contoh1_9.html
<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color=black>
<img src="gedung.jpg" alt="Halaman SMK PGRI 3 Malang">
<img src="ekstra.jpg" hspace=10 vspace=5 width=200 height =254
align="right" border=2>
</font>
</body>
</html>
By yuanthy 2019 25
5. Layout Halaman Web dengan Tabel (Table)
By yuanthy 2019 26
Tabel dan Layout Halaman Web
By yuanthy 2019 27
Membuat Tabel
<TABLE>
Digunakan untuk mendefinisikan pembuatan tabel. Memiliki
attribut:
align - perataan: rata kiri (left), tengah (center) atau kanan
(right).
valign – mengatur bentuk perataan secara vertikal
bgcolor – mengatur warna latar belakang (background) dari
tabel.
background – menentukan gambar yang digunakan sebagai
background tabel
color – Untuk mengatur warna suatu sel dalam tabel
border – menentukan ukuran border tabel (dalam pixel).
rowspan – menggabungkan beberapa baris
colspan – menggabungkan beberapa kolom
cellpadding - jarak antara isi cell dengan batas cell (dalam
pixel).
cellspacing – mengatur spasi/jarak antar cell (dalam pixel).
width – menentukan lebar tabel dalam pixel atau percent.
height – Menentukan tinggi tabel
<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel).
Terdiri dari atribut:
align - perataan: rata kiri (left), tengah (center) atau kanan
(right).
bgcolor - warna latar belakang dari baris.
valign - perataan vertikal: top, middle atau bottom.
<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
Attributnya adalah:
align – untuk menentukan perataan kolom
By yuanthy 2019 28
background – untuk menentukan image yang digunakan
sebagai latar belakang dari kolom.
bgcolor – untuk menentukan warna latar belakang
colspan - lihat gambar contoh
height – untuk mengatur ukuran tinggi cell dalam pixels.
nowrap – untuk membuat supaya isi dari kolom tetap berada
pada satu baris.
rowspan - lihat gambar contoh
valign – untuk mengatur perataan vertikal: top, middle atau
bottom.
width – untuk menentukan lebar kolom dalam pixel atau
percen.
contoh1_10.html
<html>
<head>
<title>::: Pembuatan Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam 'Iyatul Khoir</td>
<td>Bulubrangsi
Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom
By yuanthy 2019 29
Gresik</td>
</tr>
</table>
</body>
</html>
By yuanthy 2019 30
contoh1_11.html
<html>
<head>
<title>.::: Belajar Membuat Tabel:::.</title>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="100%" height="115">
<tr>
<td width="100%" height="115" bordercolor="#C0C0C0"
bgcolor="#BDCED9"> </td>
</tr>
</table>
<font size="1"> </font>
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#111111"
width="100%" height="431">
<tr>
<td width="23%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="245">
<tr>
<td width="100%" height="244"
bordercolor="#C0C0C0" bgcolor="#BDCED9"> </td>
</tr>
</table>
<font size="1"> </font>
<table border="1" cellpadding="0" cellspacing="0"
bordercolor="#BDCED9" width="94%" height="152">
<tr>
<td width="100%" height="19" bgcolor="#BDCED9"
bordercolor="#C0C0C0"> </td>
</tr>
<tr>
<td width="100%" height="132" bordercolor="#C0C0C0">
</td>
</tr>
</table>
</td>
<td width="77%" height="307" valign="top">
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#ffffff"
width="97%" height="411">
<tr>
<td width="64%" height="109"> </td>
<td width="36%" height="109"> </td>
</tr>
<tr>
<td width="64%" height="301" rowspan="2"> </td>
<td width="36%" height="24" bgcolor="#BDCED9"
bordercolor="#C0C0C0">
<font size="1"> </font></td>
</tr>
By yuanthy 2019 31
<tr>
<td width="36%" height="277" bordercolor="#C0C0C0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hasilnya adalah:
Judul dalam tabel dibedakan menjadi tiga macam, yaitu judul tabel,
judul kolom table dan judul baris tabel. Judul tabel atau biasa
disebut CAPTION terletak dibagian luar tabel yang bisa berada
dibawah atau diatas tabel. Secara default caption diletakkan
dibagian atas suatu tabel, tetapi juga dapat diletakkan dibawah
suatu tabel dengan menambahkan atribut ALIGN=BOTTOM pada
elemen caption tersebut.
By yuanthy 2019 32
Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu
elemen TABLE HEADER <TH>. Judul kolom terletak pada sel
disebelah kiri atau kolom pertama suatu tabel, sedangkan judul
baris terletak pada baris pertama suatu tabel. Judul baris atau judul
kolom akan tercetak tebal.
contoh1_12.html
<html>
<head>
<title>::: Pembuatan Judul Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td>Jam ‘Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>
By yuanthy 2019 33
contoh1_13.html
<html>
<head>
<title>::: Pembuatan Judul Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1>
<caption align=bottom><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=60 align=left>No.</td>
<td width=150>1.</td>
<td width=200>2.</td>
</tr>
<tr>
<th align=left>Nama</td>
<td>Jam ‘Iyatul Khoir</td>
<td>Ari Mulyaningsih</td>
</tr>
<tr>
<th align=left>Alamat</td>
<td>Bulubrangsi Lamongan</td>
<td>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>
By yuanthy 2019 34
lebar dan tinggi tabel terhadap BROWSER sedangkan jika digunakan
pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari
suatu tabel. Nilai atribut mengunakan ukuran % (max 100%) dan
ukuran pixel.
contoh1_14.html
<html>
<head>
<title>::: Mengatur Lebar dan Tinggi Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1 width=100%>
<caption align=top><b><u>Daftar Alamat</u></b></caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td height=50>Jam ‘Iyatul Khoir</td>
<td height=50>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td height=30>Ari Mulyaningsih</td>
<td height=30>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>
By yuanthy 2019 35
Perataan dalam Tabel
contoh1_15.html
<html>
<head>
<title>::: Membuat Perataan Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table border=1 align=center>
<caption align=top>
<b>Daftar Alamat</b>
<hr width=110>
</caption>
<tr>
<th width=40>No.</td>
<th width=150>Nama</td>
<th width=200>Alamat</td>
</tr>
<tr>
<td align=center>1.</td>
<td align=center valign=middle height=50>Jam ‘Iyatul Khoir</td>
<td align=right valign=top height=50>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td align=center>2.</td>
<td align=left valign=baseline height=50>Ari Mulyaningsih</td>
<td align=left valign=bottom height=50>Wringin Anom Gresik</td>
</tr>
</table>
</body>
</html>
By yuanthy 2019 36
Membuat Warna Pada Tabel
Didalam pewarnaan tabel kita dapat mengatur warna latar belakang dan
teks serta warna bordernya. Untuk menentukan warna latar belakang
pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna
border dapat menggunakan beberapa atribut sbb:
Atribut Fungsi
BORDERCOLOR Mengubah warna keseluruhan border
BORDERCOLORLIG Mengubah warna border bagian atas dan kiri
HT
BORDERCOLORDA Mengubah warna border bagian bawah dan
RK kanan
Penggabungan Baris/Kolom
contoh1_16.html
<html>
<head>
<title>::: Contoh Merge, Cell dan Pedd:::</title>
By yuanthy 2019 37
</head>
<body>
<table border=2 align=center bordercolor=#EFFBFC bgcolor=#cc3300
cellspacing=4 cellpadding=8 width=100%>
<font face=arial size=2 color=white>
<tr>
<td bgcolor=#DFF9F9 colspan=2 align=center>Kelas</td>
<td bgcolor=#DFF9F9 align=center rowspan=2>Keterangan</td>
</tr>
<tr>
<td width=200 bgcolor=#DFF9F9 align=center>I</td>
<td width=200 bgcolor=#DFF9F9 align=center>II</td>
</tr>
<tr>
<td>Ratna Budi Setyorini</td>
<td>Wilujeng Handayani</td>
<td align=center>Lunas</td>
</tr>
</table>
</body>
</head>
</html>
Hasilnya adalah sebagai berikut:
6. Membuat Frames
By yuanthy 2019 38
</head>
<frameset>
<frame src>
</frameset>
</html>
<frameset rows=”tinggi_baris,tinggi_baris,…”>
<frameset cols=”lebar_kolom, lebar_kolom,…”>
Atribut Fungsi
FRAMESET COLS Membuat frame vertikal dengan lebar
kolom tertentu
FRAMESET ROWS Membuat frame horizontal dengan tinggi
baris tertentu
FRAME SRC Memasukkan dokumen HTML ke dalam
FRAME
NOFRAME Memasukkan body teks untuk browser
yang tidak dapat menampilkan frame
1 2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
2 3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3 <FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
4
By yuanthy 2019 39
5
<FRAMESET rows="*,60">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
5 </FRAMESET>
</FRAMESET>
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
7
<FRAMESET cols="50%,50%">
<FRAMESET rows="50%,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAME SRC="homepage2.htm" NAME="Frame2">
</FRAMESET>
7 <FRAMESET rows="50%,50%">
<FRAME SRC="menu.htm" NAME="Frame3">
<FRAME SRC="menu2.htm" NAME="Frame4">
</FRAMESET>
</FRAMESET>
8
<FRAMESET rows="15%,70%,15%">
<FRAME SRC="homepage.htm" NAME="Frame1">
<FRAMESET cols="15%,70%,15%">
8 <FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.htm" NAME="Frame4">
</FRAMESET>
<FRAME SRC="homepage.htm" NAME="BIG">
</FRAMESET>
</FRAMESET>
By yuanthy 2019 40
Buat file baru dengan nama latihan6.html, header.html, kiri.html,
kanan.html, bab1.html dan bab2.html dengan isi masing-masing
sebagai berikut:
File latihan6.html
<html>
<head>
<title>.:: Latihan Membuat Frame::.</title>
</head>
<frameset rows=20%,* framespacing="0" border="0" frameborder="0">
<frame name=atas src=header.html scrolling="no" noresize>
<frameset cols=25%,* framespacing="0" border="0" frameborder="0">
<frame name=kiri src=kiri.html scrolling="no" noresize>
<frame name=kanan src=kanan.html scrolling="no" noresize>
</frameset>
</frameset>
</html>
By yuanthy 2019 41
Tampilan tersebut dikarenakan file-file yang dibutuhkan oleh frame
belum dibuat atau tidak ditemukan. Oleh karena itu lengkapi file-file
sebagai berikut:
File header.html
<html>
<head>
<title>.:: Latihan Membuat Frame::.</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.::: SMK PGRI 3 Malang:::. </b><br>
<font face=arial size=4 color=blue>
<i>Success By Discipline</i>
</body>
</html>
File kiri.html
<html>
<head>
<title>::: Latihan Membuat Frame:::</title>
</head>
<body bgcolor=#ffffff>
By yuanthy 2019 42
<table border=1 width="228" height="28" cellspacing=0>
<tr>
<td width="218" height="22" bordercolor="#800080" bgcolor="#BDCED9">
<b><font face="Tahoma" size="2"> M e n u</font></b>
</td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">
<a href=kanan.html target=kanan>H o m e</a></font></b></td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">
<a href=proli.html target=kanan>Program Keahlian</a>
</font></b></td>
</tr>
<tr>
<td width="218" height="22" bordercolor="#800080">
<b><font face="Tahoma" size="2">
<a href=ekstra.html target=kanan>Ekstra Kurikuler</a>
</font></b></td>
</tr>
</table>
</body>
</html>
File kanan.html
<html>
<head>
<title>::: Latihan Membuat Link Ke Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Selamat datang di web kami ...
</td>
</tr>
</body>
</html>
File proli.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
By yuanthy 2019 43
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Program Keahlian:<br>
<font size=1>
<ul type=circle>
<li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tenaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las
</ul>
</td>
</tr>
</body>
</html>
File ekstra.html
<html>
<head>
<title>::: Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor="#800080"
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan
<li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
</td>
</tr>
</body>
</html>
By yuanthy 2019 44
7. Form Html
Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode
GET mengirimkan data pada server dengan cara meletakkan data
pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan
datanya secara terpisah. Jika data masukan banyak, lebih
disarankan untuk menggunakan metode post. Atribut ACTION berisi
URL dari program yang dipanggil oleh form tersebut.
TextBOX
By yuanthy 2019 45
Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT
(textbox), NAME adalah identifikasi/penamaan elemen ini untuk
dibaca oleh program pemroses nantinya. Atribut VALUE untuk
memberi nilai suatu masukan. Sedangkan atribut SIZE digunakan
untuk menentukan panjang atau banyaknya karakter sebuah
masukan. Untuk menyembunyikan masukan yang ditulis user dalam
textbox, dapat menggunakan atribut TYPE=”PASSWORD”, sehingga
tampilan dalam textbox menjadi karakter “*”.
contoh1_17.html
<html>
<head>
<title>::: Form Input dengan TEXTBOX:::</title>
</head>
<body>
<h3>Rancangan awal BUKU TAMU</h3>
<form method=post>
<table border=0>
<tr>
<td width=70>Nama</td>
<td width=10>:</td>
<td width=30><input type=text name=nama size=30></td>
</tr>
<tr>
<td width=70>Alamat</td>
<td width=10>:</td>
<td width=30>
<input type=text value=Jl. name=alamat size=30></td>
</tr>
<tr>
<td width=70>Homepage</td>
<td width=10>:</td>
<td width=30>
<input type=text value=http:// name=page size=30></td>
</tr>
</table>
</form>
</body>
</html>
By yuanthy 2019 46
CHECKBOX
contoh1_18.html
<html>
<head>
<title>::: Form Input dengan CHECKBOX:::</title>
</head>
<body>
<form method=post>
Pilih Program Keahlian Anda<br>
<h3>Daftar Program Keahlian SMK PGRI 3 Malang</h3>
<p>
<input type=checkbox name=c1 checked>Rekayasa Perangkat Lunak<br>
<input type=checkbox name=c2>Teknik Elektronika Industri<br>
<input type=checkbox name=c3>Teknik Pembangkit Tenaga Listrik<br>
<input type=checkbox name=c4>Teknik Otomotive<br>
</form>
</body>
</html>
By yuanthy 2019 47
RADIO Button
contoh1_19.html
<html>
<head>
<title>::: Form Input dengan RADIO Button:::</title>
</head>
<body>
<form method=post>
<h3>Pilih Salah satu<br>
Pendidikan Terakhir Anda: </h3>
<input type=radio value="SD" checked name=sekolah>SD<br>
<input type=radio value="SLTP" name=sekolah>SLTP<br>
<input type=radio value="SMU" name=sekolah>SMU<br>
<input type=radio value="S1" name= sekolah >S1<br>
<input type=radio value="S2" name= sekolah >S2<br>
</form>
</body>
</html>
DROP-DOWN Menu
By yuanthy 2019 48
<option value-pilihan3>Pilihan 3
dst …
</select>
contoh1_20.html
<html>
<head>
<title>::: Form Input dengan DROP-DOWN Menu:::</title>
</head>
<body>
<form method=post>
<h3>Pilih Salah satu<br>
Jurusan: </h3>
<select name=jurusan>
<option value=TI selected>Teknik Informatika</option>
<option value=EI>Elektronika Industri</option>
<option value=MO>Mesin Otomotive</option>
<option value=BO>Bodi Otomotive</option>
<option value=MP>Mesin Perkakas</option>
<option value=ML>Mesin Las</option>
</select>
</form>
</body>
</html>
TEXT Area
By yuanthy 2019 49
<textarea name=textbox1 rows=xx cols=xx>Isi Awal
</textarea>
contoh1_21.html
<html>
<head>
<title>::: Form Input dengan Text Area:::</title>
</head>
<body>
<form method=post>
<h5>Isikan Pesan dan kesan</h5>
<textarea name=textbox1 rows=5 cols=40>Pesan Anda:
</textarea>
</form>
</body>
</html>
Elemen Tombol
By yuanthy 2019 50
contoh1_22.html
<html>
<head>
<title>::: Buku Tamu:::</title>
</head>
<body>
<h3><p align=center>BUKU TAMU</p></h3>
<form method=post>
<table border=0 align=center width=500>
<tr>
<td width=11%>Nama</td>
<td width=3%>:</td>
<td width=86%><input type=text name=nama size=20></td>
</tr>
<tr>
<td width=11%>Alamat</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=Jl. name=alamat size=30></td>
</tr>
<tr>
<td width=11%>Email</td>
<td width=3%>:</td>
<td width=86%><input type=text name=email size=20></td>
</tr>
<tr>
<td width=11%>Website</td>
<td width=3%>:</td>
<td width=86%>
<input type=text value=http:// name=pg size=30></td>
</tr>
<tr>
<td width=11% valign=top>Homepageku</td>
<td width=3% valign=top>:</td>
<td width=86%>
<input type=radio value=hebat name=saran checked>
Bagus Sekali<br>
<input type=radio value=bagus name=saran>
Bagus<br>
<input type=radio value=biasa name=saran>
Biasa Aja<br></td>
</tr>
</table>
<p align=center>
<input type=submit value=kirim name=b1>
<input type=reset value=batal name=b2>
<hr>
</form>
</body>
By yuanthy 2019 51
</html>
Hasilnya adalah:
c. Rangkuman
d. Tugas
By yuanthy 2019 52
Seberapa besar daya tarik dan unsur seni dari web yang anda
amati.
Bagaimana model layout web tersebut, berbentuk tabel atau
frame?
b. Content/Isi, Apa saja isi dari web tersebut.
Silahkan catat hasil pengamatan anda.
2. Teliti profil sebuah organisasi/lembaga (misal: KUD, Pemerintah
Kota, Sekolah dan lain-lain). Catat semua hasil penelitian anda. Dari
hasil penelitian anda, silahkan buat website statis yang isinya
adalah profile dari yang anda teliti. Bila perlu tawarkan website
buatan anda kepada organisasi/lembaga tersebut.
3. Silahkan cari dan download tutorial berbahasa Inggris di Internet
yang berhubungan dengan web programming, (misalnya PHP, ASP
dan lain-lain).
e. Tes Formatif
By yuanthy 2019 53
f. Kunci Jawaban Formatif 1
By yuanthy 2019 54
4. Checkbox dan radio button memiliki fungsi yang sama yaitu untuk
menentukan pilihan dari suatu daftar pilihan. Perbedaanya terletak
pada jumlah pilihan yang dapat dipilih. Pada checkbox, pengunjung
halaman web dapat memilih beberapa dari daftar pilihan, namun
dengan radio button, pengunjung hanya berhak menentukan satu
pilihan saja.
5. Tombol submit berfungsi untuk mengirimkan data yang telah
dimasukkan dalam form untuk selanjutnya diolah oleh server. Dan
tombol reset berfungsi untuk mengosongkan dan atau
mengembalikan ke nilai default data yang ada dalam form.
6. Kode untuk halaman web tersebut adalah:
<html>
<head>
<title>::: Form Order:::</title>
</head>
<body>
<font face=verdana>
<h3 align=center>FORM ORDER BARANG
<form action="mailto:[email protected]" method=post>
<table border=2 cellpadding=1>
<tr>
<td rowspan=2><font size=2>Isikan Data-data Anda</td>
<td><input type=text name="NamaDepan" size=20></td>
<td><input type=text name="NamaBelakang" size=20></td>
<td><input type=text name="Usia" size=3></td>
</tr>
<tr>
<td><font size="-2">Nama Depan</font></td>
<td><font size="-2">Nama Akhir</font></td>
<td><font size="-2">Umur</font></td>
</tr>
<tr>
<td rowspan=3><font size=2>Bagaimana Menghubungi Anda?</td>
<td colspan=4 valign=top><font size=2>Alamat Rumah:
<textarea name="Jalan" rows=2 cols=30></textarea></td>
</tr>
<tr>
<td colspan=2><font size=2>Kota:
<input type=text name="kota" size=20></td>
<td colspan=2><font size=2>Negara:
<input type=text name="negara" size=25></td>
</tr>
<tr>
<td colspan=2><font size=2>Kode Pos:
<input type=text name="kodepos" size=10></td>
<td colspan=2><font size=2>Nomor Telepon
<input type=text name="telp1" size=4> -
<input type=text name="telp2" size=11></td>
By yuanthy 2019 55
</tr>
<tr>
<td><font size=2>Credit Card
<input type=radio name=CC value=Visa checked>Visa
<input type=radio name=CC value=MasterCard checked>M/C</td>
<td colspan=2 align=center>
<input type=text name=nomorCC1 size=4>
<input type=text name=nomorCC2 size=4>
<input type=text name=nomorCC3 size=4>
<input type=text name=nomorCC4 size=4></td>
<td colspan=2 align=center><font size=2>Tanggal Berakhir:
<input type=text name=blnakhir size=2>
<input type=text name=thnakhir size=2></td>
</tr>
<tr>
<td><font size=2>Jenis Barang </td>
<td colspan=4><font size=2>
<select multiple name=Merchandise size=1>
<option selected>Pentium IV
<option>Pentium III
<option>Monitor
<option>CD-ROM
<option>Kamera Digital
<option>Printer
<option>Mouse
<option>Scanner
</select></td>
</tr>
<tr>
<td align=center colspan=5>
<h1>Terimakasih Atas Order Anda!</h1>
</td>
</tr>
</table><p>
<center>
<input type="submit" value="Kirim">
<input type="Reset" value="Hapus Isian">
</center>
</form>
</body>
</html>
g. Lembar Kerja 1
By yuanthy 2019 56
Kesehatan dan Keselamatan Kerja
Langkah Kerja
By yuanthy 2019 57
Kegiatan Belajar 2:
b. Uraian Materi
1. Pendahuluan
Website dapat dibedakan menjadi dua yaitu Web Statis dan Web
Dinamis. Web Statis adalah web yang berisi informasi-informasi
yang bersifat statis (tetap), sedangkan Web Dinamis adalah web
yang menampilkan informasi yang bersifat dinamis (berubah-ubah)
dan dapat saling berinteraksi dengan user.
Biasanya untuk web statis yang ditonjolkan adalah sisi tampilan
yang banyak mengandung grafis sehingga untuk merancang web
statis tidak diperlukan kemampuan pemrograman yang handal.
Yang dibutuhkan hanya kemampuan design grafis/web dan cita rasa
seni belaka. Sedangkan untuk web dinamis yang banyak ditonjolkan
adalah pengolahan data sehingga dibutuhkan kemampuan dalam
pemrograman web.
Ada dua jenis pemrograman web, yaitu Server Side Programming
dan Client Side Programming. Pada Server Side Programming,
semua sintaks dan perintah program yang diberikan akan
dijalankan/diproses di Web Server, kemudian hasilnya dikirimkan ke
browser pengguna dalam bentuk HTML biasa. Sehingga pengguna
tidak dapat melihat kode asli yang ditulis dalam bentuk server side
programming tersebut. Yang tergolong dalam server side
2. Pengenalan PHP
Pastikan web server dan skrip PHP anda telah berjalan dengan baik
sebelum anda memulai pemrograman PHP. Untuk membuat web
dengan script PHP, cukup anda persiapkan editor teks.
Fungsi-fungsi yang ada di PHP uncase sensitive, tetapi
variabelnya case sensitive (membedakan huruf besar dan kecil).
Script PHP diawali dengan tanda lebih kecil ( < ) dan diakhiri dengan
tanda lebih besar ( > ). Ada tiga cara untuk menuliskan script PHP
yaitu:
<?
Script PHP
?>
<?php
Script PHP
?>
<script language=”php”>
Script PHP
</script>
/* komentar */
// komentar
5. Variable
contoh2_1.php
<html>
<head>
<title>Variabel dalam PHP</title>
<body>
<?php
//variabel bertipe integer
$a="5";
6. Konstanta
7. Type Data
PHP mengenal 4 tipe data skalar dan 2 tipe data compound. Tipe
data skalar adalah tipe data integer, floating point, string dan
boolean. Sedangkan 2 tipe data compound adalah array dan object.
yaitu:
a. Integer, tipe data yang menyatakan bilangan bulat.
b. Floating point/double, tipe data yang menyatakan bilangan
real/pecahan
c. String, menyatakan tipe data teks yang berisi kumpulan
beberapa karakter
d. Boolean, tipe data logika yang memiliki nilai true dan false.
e. Array adalah tipe data terstruktur yang berguna untuk
menyimpan sejumlah data yang bertipe sama.
f. Objek, merupakan instansiasi dari suatu class.
8. Konversi Type Data
settype(value,datatype)
dimana:
- value adalah nilai yang akan dikonversikan
- datatype adalah tipe data yang dikonversikan
contoh2_2.php
<html>
<head>
<title>.:: Konversi Type Data::.</title>
</head>
<body>
<font face=tahoma size=2>
<?php
$bayar="500.77 Rupiah";
print ("Tipe Data String: $bayar <br> \n");
settype($bayar,"double");
print ("Tipe Data Double: $bayar <br> \n");
settype($bayar,"integer");
print ("Tipe Data Integer: $bayar <br> \n");
?>
</body>
</html>
9. Operator
Operato Contoh
Fungsi
r
$a==$b;
== Sama Dengan true, jika $a sama
dengan $b
$a===$b;
true, jika $a sama
=== Identik dengan $b, dan keduanya
mempunyai tipe data
yang sama;
$a!=$b; atau
!= atau $a<>$b;
Tidak Sama Dengan
<> true, jika $a tidak sama
dengan $b;
$a!==$b;
true, jika $a tidak sama
!== Tidak Identik dengan $b, atau
keduanya tidak memiliki
tipe data yang sama;
$a<$b;
< Kurang Dari true, jika $a kurang dari
$b;
$a>$b;
> Lebih Dari true, jika $a lebih besar
dari $b;
$a<=$b;
<= Kurang Dari atau Sama Dengan true, jika $a kurang dari
atau sama dengan $b;
>= Lebih Dari atau Sama Dengan $a>=$b;
Operato Contoh
Fungsi
r
&& atau $a && $b;
Operasi Logika AND
AND true, jika $a dan $b bernilai true
$a || $b; atau
$a or $b;
|| atau OR Operasi Logika OR
true, jika $a atau $b, salah satunya
bernilai true;
$a xor $b;
XOR Operasi Logika XOR true, jika $a atau $b bernilai true dan
salah satunya bernilai false;
!$a;
! Operasi Logika NOT
true, jika $a tidak benilai true;
Operator Bitwise
Operator bitwise digunakan untuk operasi bilangan biner.
Operator-operator yang termasuk operator bitwise adalah:
Operato
Arti
r
& Operator AND
| Operator OR
^ Operator XOR
~ Operator NOT
<< Operator Shift Left (geser kiri)
>> Operator Shift Right (geser kanan)
Operator Increment/Decrement
Pre/Post increment dan decrement masing-masing adalah penambahan dan
pengurangan satu. Apabila operator diletakkan sebelum variabel, misal ++$i
atau --i maka nilai $i akan ditambahkan atau dikurangkan 1 sebelum
keseluruhan operasi dalam ekspresi dikerjakan dan sebaliknya apabila
operator diletakkan setelah variabel, misal $i++ atau $i-- maka nilai $i akan
ditambah atau dikurangi 1 setelah operasi dalam ekspresi dikerjakan.
Operator Operasi Penggunaan
Pre/Post
++ ++$a atau $a++
Increment
Pre/Post
-- --$b atau $b--
Decrement
Kedudukan Operator
Setiap operator mempunyai kedudukan (operator precedence) dan
prioritas masing-masing yang digunakan untuk menentukan
operator manakah yang akan dieksekusi terlebih dahulu bila dalam
sebuah pernyataan terdapat dua atau lebih operator. Contoh,
misalnya ada persamaan matematika x=2+5*7. Maka nilai x adalah
37 bukan 49. Hal ini karena kedudukan operator perkalian lebih
tinggi dari pada operator penjumlahan sehingga 5 harus dikalikan
terlebih dahulu dengan 7, baru dijumlah dengan 2; bukan 2
ditambah 5 baru dikali 7. Kedudukan operator-operator tersebut
seperti terlihat pada tabel berikut:
Priorita
Operator
s
Tertinggi (), {}
~, !, ++, --, $, &
*, ?, %
+, -
<>, <=, >=
==, ===, !=, !==
&
^
!
&&
||
=, +=, -=, *=, /=, &=, |=, ^=, .=
AND (&&)
XOR (||)
Terendah OR
contoh2_3.php Mulai
<html>
<head>
Input
<title>.:: Latihan membuat input Alas
Output::.</title>
</head> Input Tinggi
<body>
<font face=verdana size=2>
<? Output
//Mendeklarasikan data input Cetak Luas
$alas=20;
$tinggi=5;
Proses Hitung Luas Segitiga
//Proses hitung luas segitiga
$luassegitiga=0.5*$alas*Luas=0,5 * Alas * Tinggi
$tinggi;
//Cetak hasil
echo "Besar Alas = $alas Selesai
<br>";
echo "Besar Tinggi = $tinggi
<br>";
echo "Luas Segi Tiga Adalah = $luassegitiga<br>";
?>
</body>
</html>
contoh2_4.php
<html>
<head>
<title>.:: Menghitung Luas Segi Tiga::.</title>
</head>
<body>
<font face=verdana>
<center><h3><u>Menghitung Luas Segitiga</u></h3></center>
<form action=luassegitiga.php method=post>
<table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellspacing=5>
<tr>
<td>Masukkan Alas</td>
<td>:</td>
<td><input type=text name=alassegitiga size=10></td>
</tr>
<tr>
<td>Masukkan Tinggi</td>
<td>:</td>
<td><input type=text name=tinggi size=10></td>
</tr>
<tr>
<td colspan=3 align=center><input type=submit value=hitung></td>
</tr>
</table>
</form>
</body>
</html>
File luassegitiga.php
<html>
<head>
<title>.:: Hasil Perhitungan Luas Segi Tiga::.</title>
</head>
<body>
<font face=verdana>
<center>
<h3><u>Luas Segitiga</u></h3>
</center>
Hasilnya adalah:
Statement IF
Konstruksi IF digunakan untuk melakukan eksekusi suatu statement
secara bersyarat atau sesuai dengan kondisi tertentu. Statement IF
dibagi dua, statement IF tunggal dan statement IF majemuk. Cara
penulisan statement IF tunggal adalah sebagai berikut:
if (kondisi)
{
statement;
}
Contoh: Mulai
Input Nilai
T
Apakah nilai
> 70
Y
Kompeten
Selesai
if (syarat)
{
statement
}
else
{
statement lain
}
atau:
if (syarat pertama)
{
statement pertama
}
Mulai
Input Nilai
Y T
Apakah nilai <
Tidak Lulus 70
Y
Lulus dan Lulus dan
Tidak Kompeten
Kompeten
Selesai
Sebagai contoh, kita modifikasi file nilai.php pada contoh 2_5 dan
simpan dengan nama nilai2.php
contoh2_6.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<form action=nilai2.php
method=post>
Masukkan Nilai:
<input type=text name=nilai
size=2><p>
<input type=submit
value=Proses>
</form>
File nilai2.php:
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Nilai Ujian anda: $nilai<br>";
if ($nilai<50)
{
echo "Anda Tidak Lulus<br>";
}
elseif ($nilai<70)
{
echo "Anda Lulus Tapi Tidak Kompeten<br>";
}
else
{
echo "Selamat Anda Lulus
dan Kompeten";
}
?>
</body>
</html>
Statement SWITCH
contoh2_7.php
<html>
<head>
<title>.:: Struktur Kendali Switch::.</title>
</head>
<body>
<font face=verdana size=2>
<?
$dino=date("l");
switch($dino)
{
case "Monday":
$hari="Senin";break;
case "Tuesday":
$hari="Selasa";
break;
case "Wednesday":
$hari="Rabu";
break;
case "Thursday":
$hari="Kamis";
break;
case "Friday":
$hari="Jumat";
break;
case "Saturday":
$hari="Sabtu";
break;
default:
$hari="Minggu";
}
echo "<h3>Hari Mulai
ini adalah hari <u>$hari</u></h3>";
?>
</body>
</html> Masukkan
Jumlah
Latihan-latihan Bayar
1. Membuat program penghitung discount
ProgramJumlahBaya T untuk mengetahui apakah pembeli dapat
ini digunakan
r 500000
diskon atau tidak. Besar diskon tersebut mengikuti aturan
sebagai berikut:
Y Jika jumlah bayar 50.000 dapat diskon 5%, jika
jumlah bayar 100.000 dapat diskon
Diskon=0.5 T 10%, dan jika jumlah bayar
JumlahBaya
*JumlahBay
500.000 dapat diskonr
50%. Selain kreteria tersebut, diskonnya
100000
ar
adalah 0%.
Y
Untuk mengerjakan program tersebut, perhatikan flowchart
Diskon=0.1 JumlahBaya
T
berikut: *JumlahBay r 50000
ar
Y
Diskon=0.0 Diskon=0
5*JumlahBa
yar
Selesai
Dari flowchart tersebut dapat kita buat script programnya,
sebagai berikut:
contoh2_8.php
<html>
<head>
<title>.:: Program Menghitung Discount::.</title>
</head>
<body>
<font face=verdana size=2>
<form>Jumlah Bayar
<input type=text name=totalbeli><br><br>
<input type=submit value="Hitung Diskon">
</form>
<?php
if (isset($totalbeli))
{
$toyar=intval($totalbeli);
$diskon=0;
if ($toyar>=500000)
$diskon=(0.5*$toyar);
else
if ($toyar>=100000)
$diskon=(0.1*$toyar);
else
if ($toyar>=50000)
Mulai
Y
C=A-B Pilihan=
T
Kali
Y
C=A*B C=A/B
Selesai
Dari flowchart tersebut, dapat kita buat programmnya sebagai
berikut:
contoh2_9.php
<html>
<head>
<title>::: Operasi Aritmatika:::</title>
</head>
<body>
<form action=operasi.php method=post>
<center><h3>Operasi Aritmatik A dan B</h3></center>
<table align=center bgcolor=#cedadc bordercolor=#cfdbdd>
<tr>
<td>Masukkan Nilai A </td>
<td><input type=text name=a size=10></td>
</tr>
<tr>
<td>Masukkan Nilai B </td>
<td><input type=text name=b size=10></td>
</tr>
<tr>
<td>Operasi</td>
<td>
<select name=operasi>
<option value=1>Penjumlahan [a+b]</option>
File operasi.php
<html>
<head>
<title>Hasil Operasi Aritmatika</title>
</head>
<body>
<?
if ($operasi==1)
{
$c=$a+$b;
$oper='[a + b]';
}
elseif ($operasi==2)
{
$c=$a-$b;
$oper='[a - b]';
}
elseif ($operasi==3)
{
$c=$a*$b;
$oper='[a * b]';
}
else
{
$c=$a/$b;
$oper='[a / b]';
}
echo "Nilai A adalah = $a dan Nilai B adalah = $b<br>";
Statement WHILE
Mulai
Masukkan
Batasnya?
$genap=0;
$genap <
T
$batas
Y
Selesai
$genap=$genap
+2
contoh2_10.php
<html>
<head>
<title>.:: Program Mencari Bilangan Genap::.</title>
Statement FOR
Keterangan:
contoh2_11.php
<html>
Hasilnya adalah:
break(n)
contoh:
function operasi_jumlah($x,$y)
{
z=x+y;
echo (z);
}
contoh2_12.php
<html>
<head>
<title>.:: Latihan Membuat Fungsi::.</title>
</head>
<body>
<font face=tahoma size=2>
<?
//Fungsi yg dipanggil
function operasi_jumlah($a,$b)
{
$c=$a+$b;
echo ("Hasil $a + $b = $c");
}
//Program Utama
//Untuk Memanggil Fungsi
operasi_jumlah(6,3);
require(namafile);
contoh2_13.php
<?php
$a=”Saya sedang belajar PHP”;
function tulistebal($teks)
{
echo(“<b>$teks</b>”);
}
?>
contoh2_14.php
<?php
require(“contoh2_13.php”);
tulistebal(“Ini adalah tulisan
tebal”);
echo(“<br>”);
echo($a);
?>
12.b. INCLUDE
contoh2_15.php
<?
echo("--------------------------------------<br>");
echo("PHP adalah bahasa scripting<br>");
echo("--------------------------------------<br>");
echo("<br>");
?>
contoh2_16.php
AddSlashes
StripSlashes
Edit By SMK Taruna Bhakti /WP/2010
86
Digunakan untuk menghilangkan karakter backslash ( \ ) pada suatu
string.
Sintaks:
string stripslashes(string)
Crypt
crypt(string [ , salt ] )
Explode
Contoh:
$namahari = “minggu senin selasa rabu kamis jumat sabtu”;
$hari = explode(“ ”, $namahari);
Implode
Kegunaan fungsi ini adalah kebalikan daripada fungsi explode.
Fungsi implode digunakan untuk menghasilkan suatu string dari
masing-masing elemen suatu array. String yang dihasilkan tersebut
dipisahkan oleh suatu string telah yang ditentukan sebelumnya.
Sintaks:
Karakter Keterangan
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
B
angka biner
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
C
karakter dengan nilai ASCII-nya
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
d
angka desimal
Argumen diperlakukan sebagai double dan ditampilkan sebagai
f
angka floating point
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
o
bilangan oktal
s Argumen diperlakukan dan ditampilkan sebagai string
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
x
angka heksadesimal (dengan huruf kecil)
Argumen diperlakukan sebagai integer dan ditampilkan sebagai
X
angka heksadesimal (dengan huruf besar)
contoh2_17.php
<html>
<head>
<title>.:: Latihan Format String::.</title>
</head>
<body>
<font face=verdana size=2>
<?
$angka1=78.79;
$angka2=23.31;
$angka=$angka1+$angka2;
echo ($angka);
echo ("<br>");
$format=printf("%01.2f",
$angka);
echo("$format<br>");
$year=1972;
$month=11;
$day=9;
StripTags
Digunakan untuk menghilangkan kode-kode tag HTML pada suatu
string.
Sintaks:
StrLen
Digunakan untuk menghitung jumlah karakter suatu string.
Sintaks:
strlen(string)
StrPos
Digunakan untuk mencari posisi suatu sub string pada suatu string.
Fungsi ini biasanya digunakan untuk mencari suatu sub string
didalam suatu string.
Sintaks:
Str_Repeat
Digunakan untuk mengulang isi suatu string.
Sintaks:
Str_Replace
Digunakan untuk mengganti suatu string dengan string yang lain.
Sintaks:
Str_replace(tercari,pencari,subyek)
StrToLower
Digunakan untuk merubah suatu string menjadi huruf kecil
(lowercase).
Sintaks:
strtolower(string)
StrToUpper
Digunakan untuk merubah suatu string menjadi huruf besar
(uppercase)
Sintaks:
strtoupper(string)
SubStr
Digunakan untuk mengambil suatu sub string dengan panjang
tertentu dari suatu string pada posisi tertentu pula.
Sintaks:
Contoh:
substr(“abcdefg”,0,3); // mengasilkan string “abc”
substr(“abcdefg”,3,2); // menghasilkan string “de”
SubStr_Count
Digunakan untuk menghitung jumlah sub string dalam suatu string
Sintaks:
Contoh:
substr_count(“This is a test”,”is”); // menghasilkan nilai 2
UCFirst
ucfirst(string)
UCWords
Digunakan untuk mengganti karakter pertama pada setiap kata
dalam suatu string menjadi huruf besar.
Sintaks:
ucwords(string)
Fungsi Trigonometri
Fungsi trigonometri adalah fungsi-fungsi yang berhubungan dengan
ilmu trigonometri, yaitu antara lain:
sin(sudut), mencari nilai sinus sebuah sudut
cos(sudut), mencari nilai cosinus sebuah sudut
tan(sudut), mencari nilai tangen sebuah sudut
asin(sudut), mencari nilai arcus sinus sebuah sudut
acos(sudut), mencari nilai arcus cosinus sebuah sudut
atan(sudut), mencari nilai arcus tangen sebuah sudut
deg2rad(a), merubah besaran derajat menjadi radian
rad2deg(a), merubah besaran radian menjadi derajat
contoh2_18.php
<html>
<head>
<title>.:: Fungsi-fungsi Trigonometri::.</title>
</head>
<body>
<h3><u>Fungsi-fungsi Trigonometri</u></h3><p>
<font face=verdana size=2>
<form>Masukkan sudut yg dicari:
<input type=text name=sdt><br><br>
<input type=submit value="Hitung">
</form>
<?php
if (isset($sdt))
{
$sudut=intval($sdt);
$sudrad=deg2rad($sudut);
$sin=sin($sudrad);
$cos=cos($sudrad);
$tan=tan($sudrad);
$arcsin=asin($sudrad);
$arccos=acos($sudrad);
$arctan=atan($sudrad);
echo "Sudut $sudut sama
dengan $sudrad radian<br>";
printf("sin($sudut) =
%01.4f<br>",$sin);
printf("cos($sudut) =
%01.4f<br>",$cos);
printf("tan($sudut) =
%01.4f<br>",$tan);
printf("arc sin($sudut) = %01.4f<br>",$arcsin);
printf("arc cos($sudut) = %01.4f<br>",$arccos);
printf("arc tan($sudut) = %01.4f<br>",$arctan);
}
?>
</body></html>
Fungsi Base n
Fungsi yang digunakan untuk konversi suatu bilangan ke bilangan
berbasis n.
base_convert(x,y,z), mengubah bilangan x dari basis y menjadi basis z.
decbin(x), mengubah bilangan desimal ke bilangan biner
dechex(x), mengubah bilangan desimal ke bilangan heksadesimal
decoct(x), mengubah bilangan desimal ke bilangan oktal
bindec(x), mengubah bilangan biner ke bilangan desimal
hexdec(x), mengubah bilangan heksadesimal ke bilangan desimal
octdec(x), mengubah bilangan oktal ke bilangan desimal
contoh2_19.php
<html>
<head>
<title>.:: Fungsi-fungsi Trigonometri::.</title>
</head>
<body>
<h3><u>Konversi Bilangan
</ u></h3><p>
<font
face=verdana
size=2>
<form>
Masukkan
bilangan yg dicari:
<input type=text
name=bil>
<br><br>
<input
type=submit
value="Convert"
>
</form>
<?php
if (isset($bil))
{
$bilangan=intval($bil);
$baseconvert=base_convert($bilangan,10,3);
$desbin=decbin($bilangan);
$deshex=dechex($bilangan);
$desoct=decoct($bilangan);
printf("Desimal $bilangan dalam basis 3 adalah = $baseconvert<br>");
Format yang dikenal dalam fungsi date ini adalah sebagai berikut:
Karakter Keterangan
a am / pm
A AM / PM
B Swatch Internet time
d day of the month, 2 digits with leading zeros; i.e. "01" to "31"
D day of the week, textual, 3 letters; i.e. "Fri", “Sun”
F month, textual, long; i.e. "January",”November”
g hour, 12-hour format without leading zeros; i.e. "1" to "12"
G hour, 24-hour format without leading zeros; i.e. "0" to "23"
h hour, 12-hour format; i.e. "01" to "12"
H hour, 24-hour format; i.e. "00" to "23"
i minutes; i.e. "00" to "59"
I (capital i) "1" if Daylight Savings Time, "0" otherwise.
j day of the month without leading zeros; i.e. "1" to "31"
l (lowercase L) day of the week, textual, long; i.e. "Friday"
L boolean for whether it is a leap year; i.e. "0" or "1"
m month; i.e. "01" to "12"
M month, textual, 3 letters; i.e. "Jan", “Mar”
n month without leading zeros; i.e. "1" to "12"
s seconds; i.e. "00" to "59"
S English ordinal suffix, textual, 2 characters; i.e. "th", "nd"
t number of days in the given month; i.e. "28" to "31"
Fungsi checkdate()
Digunakan untuk memeriksa apakah format penulisan tanggal
sudah benar. Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)
contoh2_20.php
<html>
<head>
<title>.:: Fungsi Time dan Date::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Sekarang....<br>";
echo "Hari: ",date(l),"<br>";
echo "Tanggal: ",date('d F Y'),"<br>";
echo "Jam: ",date('h:i:s A');
echo "<hr>";
$hari=30;
$bulan=2;
$tahun=2005;
$validasi=checkdate($bulan,$hari,$tahun);
echo "Tanggal yang dipilih: $hari - $bulan - $tahun <br>";
echo "Penulisan tanggal -
<b><U>";
if ($validasi)
{
echo "benar";
} else
{
echo "salah";
}
echo "</b></u><br>";
echo "Silahkan dibetulkan
kembali";
?>
</body>
</html>
Fungsi getdate()
Digunakan untuk menghasilkan waktu dengan keluaran bertipe
array. Sintaksnya adalah:
checkdate($bulan,$hari,$tahun)
Karakter Keterangan
hours Jam
mday Hari
contoh2_21.php
<html>
<head>
<title>.:: Fungsi getdate::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Sekarang Jam: ",date('h:i:s A');
echo "<hr>";
$jam=getdate();
echo "Selamat <b><u>";
if($jam[hours]<=9)
echo "Pagi";
else
if($jam[hours]<=14)
echo "Siang";
else
if($jam[hours]<=19)
echo "Sore";
else
echo "Malam";
Contoh:
$pengirim = “From: [email protected]”;
$tujuan = “[email protected]”;
$subject = “Pemberitahuan”;
$isi = “Ini adalah percobaan pengiriman e-mail dengan menggunakan PHP”;
mail($to,$subject,$isi,$pengirim);
contoh2_22.php
<html>
<head>
<title>.:: Mengelola Fungsi File::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "<b><u>Menampilkan isi file datasiswa.dat</b></u><br><br>";
if ($file=fopen("datasiswa.dat","r"))
{
contoh2_23.php
<html>
<head>
<title>.:: Mengelola File::.</title>
</head>
<body>
<h3><u>Mengelola File Teks</u></h3><p>
<font face=verdana size=2>
<form>
Masukkan Nama Siswa:
<input type=text name=isi><br><br>
<input type=submit value="proses">
</form>
<?
//validasi isi
if (isset($isi))
if (empty($isi))
echo "Data harus terisi";
else
{
if($berkas=fopen("datasiswa.dat","r"))
{
//Memasukkan Data
$berkas=fopen("datasiswa.dat","a+");
fputs($berkas,$isi);
fputs($berkas,"<br>");
fclose($berkas);
//menampilkan
$berkas=fopen("datasiswa.dat","r");
while(!feof($berkas))
{
$teks=fgets($berkas,255);
echo ($teks);
}
fclose($berkas);
}
else
{
echo("File gagal dibuka");
}
}
Isikan data pada form input, kemudian klik tombol proses, maka
akan muncul gambar sebagai berikut:
Tipe data numerik dibedakan menjadi dua, tipe data integer dan
tipe data floating point. Tipe data integer untuk bilangan bulat
sedangkan tipe data floating point digunakan untuk bilangan
desimal. Tipe data numerik seperti dalam table di bawah ini:
Yang termasuk dalam tipe data string adalah tipe-tipe data berikut:
MEDIUMBLOB,
1 – 16777215 karakter
MEDIUMTEXT
Yang termasuk dalam tipe data tanggal dan waktu adalah sebagai
berikut:
C:\WINDOWS>cd\apache\mysql\bin
C:\apache\mysql\bin>mysql
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>
Contoh:
mysql> _
use namadatabase;
Contoh:
mysql> use alamat;
Database changed
Contoh:
Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama,
email, alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:
Kolom/ Tipe Data Keterangan
Field
nomor int(6), not null, Angka dengan panjang maksimal 6,
primary key sebagai primary key, dan tidak boleh
kosong.
nama char(40), not null Teks dengan panjang maksimal 40
karakter dan tidak boleh kosong
email char(25), not null Teks dengan panjang maksimal 25
karakter dan tidak boleh kosong
alamat char(255), not null Teks dengan panjang maksimal 255
karakter dan tidak boleh kosong
kota char(20), not null Teks dengan panjang maksimal 20
karakter dan tidak boleh kosong
Sedangkan data yang akan diisikan dalam tabel anggota adalah sebagai
berikut:
No Nama E-Mail Alamat Kota
1. Wilujeng Handayani [email protected] Jl. Janti Barat 60 Malang
2. Remy Dianning [email protected] Jl. Dermo 7 Malang
3. Ratna Budi S. [email protected] Jl. Probolinggo 78 Lamongan
4. Avicenna Arya [email protected] Jl. Durian No. 10 Malang
5. Bayu [email protected] Jl. Candi II/23 Semarang
6. Yusuf [email protected] Jl. Rajawali 78 Mojokerto
7. Ari Mulyaningsih [email protected] Jl. Lebani Waras 100 Gresik
8. Latief latief@hotmail Jl. Pakis 172 Surabaya
9. Ajie [email protected] Jl. Kali Utik 99 Surabaya
10. Jam ‘Iyatul Khoir [email protected] Jl. Agus Salim 33 Lamongan
11. Sandra [email protected] Jl. Adelaide 22 Malang
12. Paul [email protected] Jl. Mertojoyo 88 Malang
Contoh:
mysql> _
Contoh:
Contoh:
Contoh:
Merubah e-mail dari anggota yang bernomor 2 menjadi
‘[email protected]’.
Fungsi mysql_connect()
Fungsi ini digunakan untuk menghubungkan PHP dengan MySql.
Sintaksnya adalah:
$koneksi=mysql_connect(host,user,password)
Fungsi mysql_select_db()
Fungsi ini digunakan untuk memilih database yang akan digunakan.
Nama database dapat disesuaikan dengan setting pada MySql
server yang ada. Sintaksnya adalah:
mysql_select_db(namadatabase[,koneksi])
Fungsi mysql_query()
Digunakan untuk melakukan perintah query dalam sebuah
database. Sintaksnya sebagai berikut:
$sql=mysql_query(perintah_sql[,koneksi])
Fungsi mysql_fetch_array()
Fungsi ini digunakan untuk mengambil record dalam database dan
memasukkannya kedalam array assosiatif, array numeris atau
keduanya. Sintaksnya adalah:
$baris=mysql_fetch_array($sql)
Fungsi mysql_fetch_assoc()
Kegunaannya hampir sama dengan mysql_fetch_array, yang
membedakan adalah array yang dihasilkan hanya array assosiatif.
Sintaksnya adalah:
$baris=mysql_fetch_assoc($sql)
Fungsi mysql_fetch_row()
Kegunaannya hampir sama dengan mysql_fetch_array, yang
membedakan adalah array yang dihasilkan hanya array numeris.
Sintaksnya adalah:
Edit By SMK Taruna Bhakti /WP/2010
106
$baris=mysql_fetch_row($sql)
Fungsi mysql_num_fields()
Fungsi ini digunakan untuk menghitung jumlah field dalam sebuah
database. Sintaksnya adalah:
$jum_field=mysql_num_fields($sql)
Fungsi mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record dalam
database. Sintaksnya adalah:
$jum_row=mysql_num_rows($sql)
Fungsi mysql_close()
Fungsi ini digunakan untuk memutus hubungan dengan sebuah
database yang telah dilakukan. Sintaksnya adalah:
mysql_close([koneksi])
Fungsi mysql_create_db()
Fungsi ini digunakan untuk membuat database dengan script php.
Sintaksnya adalah:
mysql_create_db(nama_database)
contoh2_24.php
<html>
<head>
<title>.:: tes koneksi dengan server database::.</title>
</head>
<body>
<font face=verdana size=2>
<h3>Tes koneksi dg mysql database server...</h3><p>
<form>
<input type=radio name=tombol Value=1>Sambung
<input type=radio name=tombol Value=0>Putus
<br><br>
<input type=submit Value=" OK ">
</form>
<?
require("koneksi.php");
$hub=open_connection();
$databasename="alamat";
if (isset($tombol))
{
if ($tombol==1)
{
if ($hub)
{
echo ("Koneksi dg Server Database <b><u>SUKSES</b></u><br>");
contoh2_25.php
<html>
<head>
<title>.:: Menampilkan Data::.</title>
</head>
<body>
<font face=arial size=2>
<center><h3>DAFTAR ANGGOTA</h3></center>
contoh2_26.html
<html>
<head>
<title>.:: Tambah Anggota::.</title>
</head>
<body bgcolor="#FFFFFF">
<form action=simpan_anggota.php method=POST>
<font face=verdana size=2 color="#000000">
<h3 align=left>
TAMBAH DATA ANGGOTA
</h3>
</font>
<table border=0>
<tr>
<td width=15%>Nama</td>
<td width=3%>: </td>
<td width=82%><input type=text name=nama size=15></td>
</tr>
<tr>
<td width=15%>Email</td>
<td width=3%>: </td>
<td width=82%><input type=text name=email size=25></td>
</tr>
<tr>
<td width=15%>Alamat</td>
File login.php
<?
session_start();
if (empty($user))
echo "Nama User Belum Di Isi";
elseif (empty($password))
echo "Password Belum Di Isi";
elseif ($user=="jack" &
$password=="onlyme")
{
$master=$user;
session_register("master");
header("location:halaman_utama.php");
exit();
}
else echo "Anda Tidak Terdaftar";
?>
File halaman_utama.php
<?
session_start();
?>
<html>
<head>
<title>.:: Halaman Utama::.</title>
</head>
<body>
<font face=tahoma size=2>
<?
if(!session_is_registered("master"))
echo "<h3>Akses Ditolak...
</h3>";
else
{
echo "Welcome <b>
$master ... </b><br>";
echo "<h3>HALAMAN
ADMINISTRATOR</h3>";
echo "| <a href=hal1.php>
PAGE 1</a>";
echo "| <a href=hal2.php>
PAGE 2</a>";
echo "| <a href=logout.php>
logout</a> |";
echo "<hr>";
}
?>
File hal1.php
<?
session_start();
?>
<html>
<head>
<title>.::
Halaman 1::.
</title></head>
<body>
<font face=tahoma
size=2>
<?
if(!
session_is_registered
("master"))
echo "<h3>Akses
Ditolak...
</h3>";
else
{
echo "<font face=
tahoma size=2>";
echo "<h3>PAGE 1</h3>";
echo "<p align=right>
| <a href=logout.php>logout</a> |";
echo "<hr>";
echo "Nama User <b><u>$master</b></u>";
}
?>
</body>
</html>
File hal2.php
<?
session_start();
?>
<html>
<head>
<title>.:: Halaman 2::.
</title></head>
<body>
<font face=tahoma size=2>
<?
if(!session_is_registered
("master"))
echo "<h3>Akses Ditolak...
</h3>";
else
{
echo "<font face=
tahoma size=2>";
echo "<h3>PAGE
2</h3>";
echo "<p align=right> | <a href=logout.php>logout</a> |";
echo "<hr>";echo "Nama User <b><u>$master</b></u>";
}
?>
</body>
</html>
Setelah itu klik create. Database baru sudah terbentuk, sekarang kita tinggal
membuat tabelnya. Contoh pertama kita buat tabel sederhana yaitu tabel
pengunjung pada sebuah halaman web.
Karena kita akan membuat tabel dengan nama pengunjung yang mempunyai
field sejumlah 4 yaitu : id, nama, email dan situs. Maka masukkan pengunjung
pada dan 4 pada fields. Klik Go.
Jangan lupa bahwa php case sensitif jadi sebaiknya isikan semua field dengan
huruf kecil termasuk id. Pada gambar 4 id di setting auto_increement dan
Primary. Auto_increement artinya setiap pengisian record (data ) otomatis
nilai id akan di naikkan . Primary artinya memberi kunci yang unik yang dapat
di jadikan pengenal dalam tabel (dalam hal ini tabel pengunjung). Angka lebih
baik di jadikan kunci utama dari sebuah tabel. Karena angka itu unik dan
penggunaannya pun bisa di urutkan sehingga tidak akan ada duplikasi data.
Dengan kata lain hanya dengan id kita nantinya akan dapat melakukan
editing, deleteing, update pada record.
Isi database tersebut dengan beberapa records, klik Insert untuk mengisinya :
Karena id auto_increement maka id tidak perlu diisi. Jika sudah kli Save. Untuk
melihat record klik Browse :
View
1. Php selalu di awali oleh tag <? Dan di akhiri tag ?>.
Seperti pada baris ke 1 dan baris ke 32.
$koneksi = mysql_connect("localhost","root","");
$baris[0] artinya menampilkan isi field id. Cara ini sama dengan
$baris[“id”]. Dan seterusnya. Urutan pertama dimulai dengan angka 0
(nol).
Di browser hasilnya :
Kesimpulan :
Insert
Gambar 9. input.html
Pada source code input.htm terdapat 3 variabel yaitu nama, email dan situs.
Ketiga variable tersebut nantinya akan diproses dalam file input.php. Cara
pemrosesan atau pemasukan data dalam database mysql ialah menggunakan
perintah mysql yaitu perintah insert.
Sintak tersebut memasukkan data yang terdapat pada variable nama, variable
email, variable situs untuk di masukkan ke dalam tabel pengunjung dengan
urutan field nya nama, email dan situs. Id tidak dimasukkan karena sudah
auto_increement. Memasukkan dalam database harus urut dengan fieldnya.
Pada tabel pengunjung urutannya id, nama, email, situs. Maka pada
pengisiannya harus di urutkan.
Baris 2 akan menyeleksi jika variable nama, email, situs tidak kosong maka
masukkan data (jalankan baris 4-9) namun jika kosong maka jalankan baris
11.
Sebuah database tentunya terdapat revisi-revisi atau perubahan isi tabel atau
record. Maka harusnya terdapat sebuah form yang mampu mengedit isi yang
terdapat dalam database. Jika pada file input.php kita sudah dapat
memasukkan data ke dalam database maka kali ini kita akan mengedit data
yang telah di masukkan. Langkah pertama kita harus memodifikasi file
view.php agar dapat mempunyai link untuk menuju sebuah form peng-editan
yang selanjutnya dengan form tersebut akan di proses dan di update ke dalam
database.
Script view.php mendapat tambahan pada baris 28. Dimana dibuat sebuah
link yang memanfaatkan variable id untuk di proses pada tahap selanjutnya.
Jika cursor diarahkan pada link edit maka link tersebut akan menggunakan id
dari record untuk dijadikan sebagai variable pemroses di file edit.php.
Ketika cursor diarahkan pada record pertama maka link mempunyai nilai id=1.
Nilai 1 diambil dari hasil query dari $baris[0]. Begitu seterusnya. Sehingga
dengan mengambil nilai dari id maka pada file edit.php nilai id tersebut akan
di jadikan alat bantu untuk editing. Kenapa harus menggunakan id ? karena id
telah di set primary yang artinya tidak ada redundancy id. File edit.php
membawa sebuah variable id. Dengan variable ini akan di lakukan query yaitu
memilih semua field yang mempunyai id = 1 (nilai 1 diambil dari edit.php?
id=1); dalam hal ini di contohkan id=1.
Inti dari edit.php yaitu dia membawa sebuah variable id yang nilainya diambil
dair view.php. Variable tersebut ditampung dalam variable $id diambil dari
edit.php?id=1. Pada baris 6 dilakukan query untuk mengambil seluruh record
yang id-nya sama dengan $id (dalam contoh id=1) .
Baris 18 digunakan sebagai pengendali proses agar jika form diatas di submit
maka variable id tetap dapat digunakan pada file update.php atau jika ingin
sebuah variable dapat di ‘tangkap’ untuk diproses maka ketikkan perintah
seperti pada baris 18 dan yang penting harus tetap di antara tag <form> dan
</form>
Penjelasan :
Proses update telah selesai. Anda bisa meliha isi data pada file view.php.
Record tidak selamanya akan disimpan jika database yang digunakan bersifat
dinamis. Dimana setiap waktu atau detik database akan di perbaharui dan
data-data lama juga nantinya akan di hapus jikalau sudah tidak sesuai dengan
fakta yang ada. Memang seharusnya data-data lama menjadi arsip tapi data-
data lama yang ternyata sudah tidak sesuai dengan kebijakan yang baru inilah
yang akan di hapus.
Kiranya tidak perlu di jelaskan lagi, cara kerjanya sama dengan update.php.
Searching
Penjelasan :
Baris 8-11 menyatakan variable untuk masing-masing field yang
terdapat dalam tabel pengunjung.
Baris 13 menyatakan kata / keyword yang di cari.
• Inti dari script.php ialah pada baris 7. Secara umum query akan melakukan
pencarian kata ($cari) dalam sebuah field ($kolom) jika cocok akan
ditampilkan. Penggunakan like di maksudkan untuk mengambil kata / keyword
yang terdapat dalam field yang sepenggal katanya atau huruf sama dengan
keyword yang di masukkan. Contoh mencari pengunjung dengan nama syafii
maka jika menggunakan like akan di tampilkan data M Syafii, Syafii Maarif,
dll. Sepanjangan kata atau kalimat cocok dengan keyword meskipun satu
huruf .
Pada contoh diatas mencari pada kolom (field) id dengan keyword 3. Hasilnya
ditampilkan id : 13, 3 .
c. Tugas
1. Buatlah aplikasi web dengan program PHP untuk menghitung jumlah
pengunjung yang telah mengunjungi halaman web kita. Counter
yang kita buat ini adalah untuk menghitung berapa kali suatu
halaman situs web telah ditampilkan. Untuk menyederhanakannya
maka counter ditampilkan dalam bentuk teks bukan grafik.
Algoritma:
a. Bila suatu halaman web ditampilkan maka terlebih dulu dibaca isi
file tertentu dan dibaca nilainya.
b. Tampilkan nilainya di layar browser
c. Tambahkan nilainya dengan 1
d. Simpan nilainya yang baru di file
e. Selesai
PENDAFTARAN
ANGGOTA
User Name
Password
Nama
Alamat
Level User
Administrator Biasa
Simpan Reset
File faktorial.php
File hasil.php
<html>
<head>
<title>::: Program Faktorial:::</title>
</head>
<body>
<center>
<table border=1 width=400>
<tr>
<td><font face=tahoma size=2>
<h3><u>
<center>
<br>Mencari Faktorial</u></h3>
<form action=faktorial.php method=post>
<?
$c=1;
if ($a<1)
{
$a=0;
$c=0;
};
echo "Faktorial $a adalah: ";
for ($b=1;$b<$a+1;$b++)
{
$c=$c*$b;
}
echo("= $c");
?>
<p>
<input type=submit value="Hitung Lagi">
</form>
<br>
</td>
</table>
</body>
</html>
f. Lembar Kerja 2
Langkah Kerja
b. Uraian Materi 3
1. Software Web Design
3. Workspace Dreamweaver MX
Keterangan Gambar:
.
6. Klik OK.
7. Klik Create ketika ditanya apakah Anda akan membuat sebuah
cache file untuk situs ini.
Cache file adalah sebuah catatan file-file yang ada sehingga
Dreamweaver dapat dengan mudah meng-update link ketika Anda
memindahkan, merubah, atau menghapus sebuah file.
Jendela Site menampilkan sebuah daftar yang berisi semua folder-
folder dan file-file di dalam situs lokal my_tutorial. Daftar ini juga
bertindak sebagai sebuah file manager, yang memperbolehkan
Anda untuk mengcopy, paste, menghapus, memindahkan, dan
membuka file seperti pada windows explorer.
3. Klik OK
Judul muncul pada baris judul dari jendela dokumen Dreamweaver.
2. Untuk mengubah ukuran layer, klik salah satu handles, dan geser
handles hingga sesuai dengan ukuran yang diinginkan.
3. Untuk menggerakkan sebuah layer, lakukan satu dari beberapa
langkah di bawah ini :
Gunakan tombol panah di keyboard.
Tekan tombol Shift dan gunakan tombol panah untuk
mengerakkan sebuah layer 5 pixel ke arah panah.
Klik tab yang terletak di sudut kiri atas dari layer dan geser
layer ke posisi yang diinginkan.
5. Pada Object palette, klik tombol Insert Image, dan pada kotak
dialog yang muncul pilih btn_products_up.gif, dan kemudian klik
Select.
Format Teks
Edit By SMK Taruna Bhakti /WP/2010
155
Anda dapat mengformat teks dengan mengubah setting properties
pada Property inspector. Pertama, sorot teks yang Anda akan format,
dan kemudian lakukan perubahan. Anda dapat mengubah jenis huruf
dan ukuran dari teks.
Sebelum Anda meng-format teks, Anda akan menambahkan
paragraph return setelah kalimat pertama dan setelah kalimat
kedua.
1. Jika property inspector belum terbuka, pilih Window | Properties.
2. Dengan posisi kursor di mana saja dalam layer tsb., tekan Control
+ A untuk menyorot seluruh text di dalam layer.
3. Dalam menu Format pop-up kedua dari property inspector, yang
tertulis Default Font, pilih Arial, Helvetica, sans-serif.
4. Pada menu pop-up Size, pilih 3.
Text pada dokumen Anda secara otomatis akan ter-update sesuai
dengan perubahanperubahan yang Anda buat.
3. Pada menu pop-up Events For, harus tampak 3.0 and Later
Browsers. Jika tidak tampak, lakukan pemilihan.
4. Untuk menambahkan sebuah tindakan klik tombol plus (+) dan
pilih Swap Image. Kotak dialog Swap Image muncul. Pada daftar
Images, Anda akan melihat sebuah daftar yang berisi semua
gambar dalam sebuah halaman, dengan gambar Our Story tersorot.
Ini adalah gambar original, dimana akan diganti dengan gambar
lain ketika mouse pointer melewatinya.
4. Klik OK.
MEMBUAT LINK
Ada beberapa cara untuk membuat link dengan menggunakan
Dreamweaver. Pertama, Anda akan membuat link dari gambar Our
Story ke halaman Our Story dengan menggunakan Property inspector.
1. Pada jendela situs, klik ganda icon DW3_scaal_home.html. File
DW3_scaal_home.html akan terbuka.
2. Pada jendela dokumen, klik gambar Our Story untuk menyorotnya.
Janganmelakukan klik ganda karena Anda akan membuka kotak
dialog Select ImageSource.
3. Pilih Window | Properties untuk membuka property inspector bila
belum terbuka. Image Property inspector menampilkan informasi
tentang gambar yang tersorot.
Membuat Template
Anda akan membuat sebuah template dari versi latihan halaman
produk Scaal compact disk. Kemudian Anda akan menggunakan
template ini untuk membuat tambahan halaman produk yang lain.
1. Pada jendela situs, dalam daftar Local Folder, klik ganda icon
DW3_products_cd.html untuk membuka file tersebut.
2. Pilih File | Save as Template.
Kotak dialog Save As Template muncul.
Merubah template
Sampai di sini, template baru Anda sama dengan apa yang telah
Anda simpan. Tata letak beberapa area tertentu sama untuk setiap
jenis produk : foto produk, nama produk, penjelasan produk, dan
harga produk.
Setiap template terdiri dari bagian yang di kunci dan bagian yang
dapat diedit. Bagian yang dikunci hanya dapat diedit pada template
itu sendiri; mereka tampak dengan warna yang lebih terang pada
setiap halaman tempat template diaplikasikan. Bagian yang dapat
diedit berisi sesuatu yang unik pada setiap halaman di mana
template diaplikasikan. Pada sebuah template yang diaplikasikan,
bagian yang diedit berwarna terang.
1. Pada template my_product_page.dwt di jendela dokumen, pilih
dan hapus gambar compact disc; dan kemudian ketik Insert
image here pada sel tabel tersebut.
2. Sorot teks yang baru Anda ketik.
5. Klik OK.
Perhatikan bahwa teks sekarang berwarna terang, yang
menandakan bahwa ini adalah bagian yang dapat diedit.
6. Pada jendela dokumen, pilih “Scaal Sound,” kemudian pilih
Modify | Templates | New Editable Region untuk membuat
bagian ini menjadi bagian yang dapat diedit.
7. Pada field Name di kotak dialog New Editable Region, ketik
Name dan klik OK. Pada jendela dokumen, bagian ini berwarna
terang dan diidentifikasikan dengan nama yang Anda berikan.
8. Pada jendela dokumen, sorot teks deskripsi, dan pilih Modify |
Templates | New Editable Region untuk membuat bagian ini
menjadi bagian yang dapat diedit.
9. Pada field Name di kotak dialog New Editable Region, ketik
Description dan klik OK. Pada jendela dokumen, bagian ini
berwarna terang dan diidentifikasikan dengan nama yang Anda
berikan.
10. Pilih File | Save untuk menyimpan template Anda.
Kotak dialog Update Pages muncul, menanyakan apakah Anda
ingin mengupdate semua dokumen di situs lokal Anda. Memilih
Yes berati melakukan perubahan pada halaman-halaman di
situs Scaal yang sudah lengkap, dimana Anda tidak mau
melakukan hal itu.
11. Klik No, dan kemudian klik Close untuk menutup kotak dialog
Update Pages.
12. Tutup template tersebut.
Bagian yang lebih gelap dari dokumen adalah bagian yang dapat
diedit; bagian lainnya adalah bagian yang dikunci dan tidak dapat
diedit.
3. Simpanlah dokumen Anda, dan beri nama
my_products_mug.html.
Mengedit Dokumen.
1. Tempatkan kursor pada bagian gambar.
2. Pilih Insert | Image, dan pada kotak dialog yang muncul pilih
mug.jpg. Kemudian klik Select.
3. Hapus teks “Insert image here”.
4. Pada jendela dokumen, di bagian Name, ketik sebuah nama untuk
produk, seperti Commuter Mug, dan hapus tulisan yang lain.
Edit By SMK Taruna Bhakti /WP/2010
170
5. Pada jendela dokumen, di bagian Description, ketik teks yang
berisi penjelasan tentang mug dan hapus tulisan yang lain.
6. Simpan dokumen Anda.
7. Tutup dokumen tersebut.
c. Rangkuman 3
d. Tugas 3
1. Pelajarilah setiap fungsi dari panel-panel dalam window
Dreamweaver MX!
2. Cari dan pelajari sumber bacaan atau buku refensi yang
menjelaskan secara detail tentang pengenalan tool-tool dalam
Macromedia Dreamweaver MX .
e. Tes Formatif 3
g. Lembar Kerja 3
Langkah Kerja
1. Siapkanlah semua peralatan yang dibutuhkan!
2. Periksa semua kabel penghubung pada komputer.
3. Nyalakan komputer dan pastikan komputer tersebut telah
terkoneksi internet dengan baik.
4. Pastikan PC yang anda pakai sudah memiliki software Web design,
jika belum lakukanlah instalasi software yang dibutuhkan, yaitu:
Macromedia Dreamweaver MX .
5. Jalankan Macromedia Dreamweaver MX, amati dan catat bagian-
bagian pada window Dreamweaver MX. Jika mengalami kesulitan,
tanyakan pada instruktur.
6. Setelah selesai, laporkan hasil kerja Anda kepada instruktur.
7. Setelah diteliti matikan komputer dan rapikan seperti semula.
A. Tes Tulis
B. Tes Praktek
Buatlah halaman web dengan content yang lengkap. Web yang anda buat
digunakan untuk mengelola Sistem Administrasi Siswa sekolah anda.
Sebelum membuat halaman web tersebut terlebih dahulu anda harus
merencanakan disain dan layout halaman web, struktur data dan
algoritma program, serta menentukan model dan skema data base (terdiri
dari tabel dan field apa saja, relasi dan query-nya). Setelah proyek anda
selesai, silahkan membuat laporan dan serahkan ke guru pembimbing
anda masing-masing.
Ketentuan minimal dari program yang akan anda buat adalah bahwa
program anda nantinya minimal akan dibuka/diakses oleh Administrator,
Guru/karyawan, Siswa dan Orang Tua/wali Siswa.
Administrator
Memiliki hak akses tertinggi dalam program tersebut. Data-data yang
dapat dimasukkan dan diubah oleh administrator adalah:
1. Data Profile Sekolah
2. Data Guru/Karyawan
3. Data Siswa
4. Data Orang Tua/Wali Siswa
5. Data Jurusan
6. Data Kelas
PEDOMAN PENILAIAN
Nama Peserta :
No. Induk :
Teknik Komputer dan
Program Keahlian : Jaringan
Nama Jenis Pekerjaan : Web Programing
Skor Skor
No
Aspek Penilaian Mak Peroleha Ket.
.
s n
1 2 3 4 5
I Perencanaan
1.1. Persiapan Hardware dan Software 5
1.2. Menganalisa jenis desain 5
Sub Total 10
II Membuat Layout
2.1. Penyiapan Layout 5
2.2. Menentukan warna dan gambar 5
Sub Total 10
III Proses (Sistematika & Cara Kerja)
3.1. Cara Instalasi program aplikasi 5
3.2. Cara menyiapkan struktur data dan
5
algoritma program
3.3. Cara menyiapkan Database 5
3.4. Cara koding program 5
3.5. Cara melakukan layout 5
3.6. Cara menetapkan warna 5
Sub Total 30
IV Kualitas Produk Kerja
4.1. Halaman Web
Layut halaman web 2,5
Komposisi warna dan gambar 2,5
4.2. Data Base
Desain model database 2,5
Relation 2,5
Query 2,5
1. Bimo Sunarfrihantono, ST, PHP dan MySQL Untuk WEB, Andi 2003
2. Bunafit Nugroho, PHP & MySQL Dengan Editor Dreamweaver MX,
Andi, 2004
3. Mico Pardosi, Bahasa Pemrograman Internet, HTML dan Javascript,
Indah, 2001
4. MADCOMS, Aplikasi Manajemen Database Pendidikan Berbasis Web
Dengan PHP dan MySQL, Andi, 2005
5. Sutarman, S.Kom, Membangun Aplikasi Web Dengan PHP dan
MySQL, Graha Ilmu, 2003
6. Teguh Wahyono, PHP TRIAD Fundamental (Memahami Pemrograman
Web Dengan PHP dan MySQL dalam 24 Jam), Gava Media, 2005
7. Visibooks, HTML and JavaScript for Visual Learners,
8. Yahya Kurniawan, ST, Aplikasi Web Database dengan PHP dan
MySQL, Elex Media Komputendo, 2003.
9. http://www.ilmukomputer.com
10. http://www.klik-kanan.com