Modul Web Programing PDF
Modul Web Programing PDF
Modul dengan judul WWeb Design & Web Programing merupakan bahan acuan
yang digunakan sebagai panduan dalam proses belajar mengajar peserta diklat
Sekolah Menengah Kejuruan (SMK) untuk membentuk salah satu bagian dari
kompetensi bidang keahlian Teknologi Informasi dan Komunikasi.
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
Tanda
Tempat Alasan
Jenis Kegiatan Tanggal Waktu Tangan
Belajar Perubahan
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.
Melakukan pembuatan
halaman web dengan
software bantu.
1. Kegiatan Belajar 1:
Memahami dasar-dasar pemrograman berbasis web
b. Uraian Materi
1. HTML (Hypertext Markup Language)
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman
web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan
disebut sebagai Markup Language yakni bahasa yang mengandung tanda
(tag) tertentu yang digunakan untuk mengatur format tampilan suatu
dokumen.
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan
untuk mentransfer data atau document yang berformat HTML dari web
server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll).
Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan
melihat halaman web.
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
<html>
<head>
<title>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita
bisa meletakkan tag-tag TITLE, BASE, ISINDEX,
LINK, SCRIPT, STYLE & META.
1. Buat direktori dengan nama latihan di drive C:. Dan selanjutnya dalam
direktori ini kita akan menyimpan semua file-file latihan kita.
2. Buka Browser, misalnya Internet Explorer atau Netscape Navigator.
3. Buka program aplikasi teks editor misalnya dalam latihan ini adalah
Notepad.
4. Mulai baris paling atas, tuliskan:
<html>
<head>
<title>halaman pembuka</title>
</head>
<body>
Proyek latihan pertama saya.
</body>
</html>
3. Ketika jendela baru terbuka, pilih direktori Latihan dan pilih file
index.html.
4. Klik tombol Open lalu tekan tombol Ok, halaman web yang ditampilkan
dalam browser adalah seperti berikut:
Kode Warna
Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping
itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan
nama warna dalam bahasa inggris, misalnya kuning=yellow.
Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.
Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
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>
e. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang
panjang tidak secara otomatis pindah baris bawahnya bila baris pertama
sudah terlalu panjang.
FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa
memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh
koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web
kita nantinya akan terdapat pada komputer pengguna yang lain
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:
<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:
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
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>
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>
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>
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>
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
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan
nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link
atau tombol penghubung. Tulisan yang terletak antara <A> dan </A>
akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag
<body>. Adapun macam-macam link adalah sebagai berikut:
Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus
diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen
adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah
nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama
file/dokumen yang bersangkutan.
Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag
anchor <A> dan untuk membuat link cukup memberikan tanda # setelah
nama file dalam URL. Misal:
<a href=#php> Bab 1 </a>
http://nama_URL.
<a href=http://www.dikti.org>www.dikti.org</a>
<a href=http://www.smkpgri3-mlg.sch.id>www.smkpgri3-mlg.sch.id </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:
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
Digunakan untuk menampilkan image atau animasi gif pada halaman web
Anda. Tag yang digunakan adalah
Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right),
hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak
dituliskan, maka gambar ditampilkan sesuai dengan ukuran asllinya. Untuk
mengatur ukuran gambar, menggunakan attribut width daan height. Attribut
align digunakan untuk perataan posisi gambar. Attribut border, digunakan
untuk memberi bingkai pada gambar. Sedangkan alt, digunakan untuk
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>
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan
table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa
tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> .
<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
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.
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
Gresik</td>
</tr>
</table>
</body>
</html>
contoh1_11.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.
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>
Lebar tabel diatur dengan menggunakan atribut WIDTH dan untuk mengatur
tinggi table dengan atribut HEIGHT. Jika atribut WIDTH dan HEIGHT
digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel
terhadap BROWSER sedangkan jika digunakan pada elemen TH dan TD,
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>
Perataan dalam tabel dikenal dua macam, yaitu perataan secara horizontal
dengan atribut ALIGN dan perataan vertikal dengan atribut VALIGN, serta
untuk membuat suatu tabel posisinya menjadi ditengah-tengah layar browser.
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>
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
BORDERCOLORLIGHT Mengubah warna border bagian atas dan kiri
BORDERCOLORDARK Mengubah warna border bagian bawah dan kanan
Penggabungan Baris/Kolom
contoh1_16.html
<html>
<head>
<title>::: Contoh Merge, Cell dan Pedd:::</title>
</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>
6. Membuat Frames
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang
terbagi-bagi menjadi beberapa dokumen HTML, dimana setiap bagian
merupakan satu halaman HTML terpisah. Sehingga tampilan halaman HTML
yang salah satu atau beberapa bagian berganti-ganti isinya sedangkan bagian
lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat
proses download secara keseluruhan.
Format:
<html>
<head>
</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
2
<FRAMESET cols="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
2 <FRAME SRC="menu.htm" NAME="Frame2">
</FRAMESET>
3
<FRAMESET rows="100,*">
<FRAME SRC="homepage.htm" NAME="Frame1">
4
<FRAMESET rows="*,60">
5
<FRAMESET rows="*,60">
6
<FRAMESET cols="*,50%">
<FRAME SRC="homepage.htm" NAME="Frame1">
6 <FRAMESET rows="15%,15%,70%">
<FRAME SRC="menu.htm" NAME="Frame2">
<FRAME SRC="menu2.htm" NAME="Frame3">
<FRAME SRC="menu3.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>
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>
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>
<html>
<head>
<title>::: Latihan Membuat Frame:::</title>
</head>
<body bgcolor=#ffffff>
<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>
<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>
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>
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
Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara
penulisannya adalah:
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>
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>
Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan
yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu
pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan
tersebut sedang diaktifkan, VALUE adalah harga dari pilihan
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
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
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
Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol
SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk
mengulangi/mengosongkan isian form atau NORMAL yang tidak berfungsi
apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
Format penulisannya adalah:
<input type=submit value=OK name=tombol1>untuk tombol SUBMIT
<input type=reset value=reset name=tombol2>untuk tombol RESET
c. Rangkuman
Setelah kita mempelajari materi pertama ini, kita dapat menarik kesimpulan,
ternyata membuat/membangun halaman web itu mudah sekali. Dengan hanya
bermodalkan editor teks biasa, kita sudah dapat belajar banyak tentang tag-tag
html yang digunakan untuk membuat sebuah halaman web.
Struktur HTML secara garis besar dibagi menjadi <head> dan <body>. Di bagian
<body> kita dapat menuliskan semua kode html yang akan kita gunakan untuk
membangun halaman web, yaitu diantaranya pengaturan teks, pengaturan
image, hyperlink, pembuatan table dan pembuatan frame.
Lanjutkan ke materi berikutnya agar pengetahuan anda dalam membangun
halaman web lebih banyak lagi.
d. Tugas
1. Kunjungi beberapa website (minimal 10 website). Amatilah website yang
telah anda kunjungi. Yang harus anda amati adalah meliputi:
a. Layout,
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.
e. Tes Formatif
<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>
g. Lembar Kerja 1
PC (Personal Computer) yang telah dilengkapi dengan Web browser dan editor
teks Notepad.
Langkah Kerja
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
programming seperti: CGI/Perl, Active Server Pages, Java Server Page, PHP,
Cold Fussion dan lain-lain.
Sebaliknya, pada Client Side Programming semua sintaks dan perintah
program dijalankan di Web browser, sehingga ketika client meminta dokumen
yang mengandung script, script tersebut akan diambil dari web server
2. Pengenalan PHP
PHP adalah bahasa scripting yang menyatu dengan HTML dan dijalankan
pada serverside. Artinya semua sintaks yang kita berikan akan sepenuhnya
dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya
saja. Ketika seorang pengguna internet membuka suatu situs yang
menggunakan fasilitas server side scripting PHP, maka terlebih dahulu server
yang bersangkutan akan memproses semua perintah PHP di server lalu
mengirimkan hasilnya dalam format HTML ke web server pengguna internet
tadi. Sehingga kode asli yang ditulis dengan PHP tidak terlihat di browser
pengguna.
PHP merupakan software yang open source bebas. Jadi anda dapat merubah
source code dan mendistribusikan secara bebas dan gratis. PHP juga dapat
berjalan lintas platform, yaitu dapat digunakan dengan sistem operasi
(Windows dan Linux) dan web server apapun (misalnya: PWS, IIS, Apache
dll).
Adapun kelebihan-kelebihan dari PHP yaitu:
Mudah dibuat dan berkecepatan tinggi
PHP dapat berjalan lintas platform, yaitu dapat berjalan dalam sistem
operasi dan web server apapun.
Dapat digunakan secara gratis.
Termasuk bahasa yang embedded, yakni dapat diletakkan dalam tag
HTML.
Termasuk server side programming, sehingga kode asli/source code PHP
tidak dapat dlihat di browser pengguna, yang terlihat hanya kode dalam
format HTML.
Dapat memanfaatkan sumber-sumber aplikasi yang dimiliki oleh server,
seperti misalnya untuk keperluan database connection. PHP dapat
melakukan koneksi dengan berbagai database seperti MySQL, Oracle,
Sybase, mSQL, Solid, Generic ODBC, Postgres SQL, dBase, Direct MS-
SQL, Velocis, IBM DB2, Interbase, Frontbase, Empress, dan semua
database yang mempunyai profider ODBC seperti misalnya MS Access dan
lain-lain.
PHP dapat melakukan semua aplikasi program CGI, seperti mengambil
nilai form, menghasilkan halaman web yang dinamis, mengirimkan dan
menerima cookies.
PHP juga mendukung komunikasi dengan layanan lain melalui protokol
IMAP, SNMP, NNTP, POP3 dan HTTP dan lainnya.
Setelah anda
mengisinya,
klik ok. Dan
winmysql akan
segera aktif (terlihat di taskbar sebelah kanan dengan icon berwarna
hijau, jika berwarna merah berarti tidak jalan)
i. Ok, proses instalasi semua software yang kita butuhkan sekarang telah
selesai. Dan sekarang mari kita lanjutkan ke materi berikutnya.
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
# komentar
Karakter adalah semua bentuk huruf, angka, spasi, tanda kontrol atau
simbol yang terdapat dalam tombol keyboard.
5. Variable
Benar Salah
$variabel $var!abel
$_pilih $-pilih
$te93 $93te
$ini_itu $ini-itu
contoh2_1.php
<html>
<head>
<title>Variabel dalam PHP</title>
<body>
<?php
//variabel bertipe integer
$a="5";
//variabel bertipe real
$b="2.5";
//variabel bertipe string
$komentar="Selamat Datang di PHP";
echo ("Nilai variabel a adalah = $a <br>"); //variabel bertipe integer
echo ("Nilai variabel b adalah = $b <br>"); //variabel bertipe real
echo ("Nilai variabel komentar adalah = $komentar<br>"); //variabel bertipe string
$hasil=$a+$b;
echo ("Hasil jumlah a dan b adalah = $hasil <br>"); //variabel bertipe double
$tgl = date("d F Y"); //variabel bertipe tanggal
$nama = "SMK PGRI 3 Malang";
$garis= "=====================================";
echo "<p>";
echo $garis."<br>";
echo $komentar. " Di Lab ". $nama. "<br>Belajar dengan giat ya.... <br>";
echo $garis."<br>";
echo "Tanggal ".$tgl;
?>
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.
PHP menyediakan perintah untuk melakukan konversi tipe data ke tipe data
yang lain dengan menggunakan perintah sebagai berikut:
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
Operator Arti
& 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 String
Hanya ada satu operator string, yaitu operator concatenation (.), yakni
menggabungkan dua buah atau lebih string.
Contoh
<?php
$a = Hallo;
$b = $a.Selamat Dtang di PHP;
//$b berisikan Hallo Selamat datang di PHP
?>
Kedudukan Operator
Struktur yang paling dasar dalam sebuah pemrograman adalah struktur input-
output. Input merupakan interface untuk memasukkan data, kemudian data
di olah dan selanjutnya hasil pengolahan ditampilkan pada komponen output.
Input-Output Sederhana
Mulai
Input Alas
Input Tinggi
Output
Cetak Luas
Selesai
Jika program tersebut dijalankan maka akan didapatkan hasil seperti pada
gambar diatas.
Dengan memanfaatkan form yang terdapat dalam HTML, kita dapat membuat
program yang lebih interaktif. Sebagai contoh, program di contoh 2.3 akan
modifikasi sehingga lebih interaktif.
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>
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>
<form action=contoh2_4.php method=post>
<?
$luas=0.5*$alas*$tinggi;
echo "<table align=center bgcolor=#cedadc bordercolor=#cfdbdd cellpadding=0>";
echo "<tr>";
echo "<td>Alas</td>";
echo "<td>:</td>";
echo "<td>$alas</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Tinggi</td>";
echo "<td>:</td>";
echo "<td>$tinggi</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Luas Segi Tiga</td>";
echo "<td>:</td>";
echo "<td>$luas</td>";
echo "</tr>";
echo "<tr>";
echo "<td colspan=3 align=center><input type=submit value=ulang></td>";
echo "</tr>";
echo "</table>";
?>
</form>
</body>
</html>
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;
}
Input Nilai
T
Apakah nilai >
70
Y
Kompeten
Selesai
contoh2_5.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<form action=nilai.php
method=post>Masukkan Nilai:
<input type=text name=nilai
size=2><p>
<input type=submit value=Proses>
</form>
</body>
</html>
Untuk memproses file diatas,
buat script berikut dan simpan dengan nama nilai.php
File nilai.php
<html>
<head>
<title>.:: Contoh Seleksi Kondisi::.</title>
</head>
<body>
<font face=verdana size=2>
<?
echo "Nilai Ujian anda: $nilai<br>";
if ($nilai>70)
{
echo "Anda Kompeten<br>";
}
?>
</body>
</html>
if (syarat)
{
statement
}
else
{
statement lain
}
atau:
if (syarat pertama)
{
statement pertama
}
elseif (syarat kedua)
{
statement kedua
}
else
{
statement lain
}
Mulai
Input Nilai
T
Apakah nilai < 50
Y T
Apakah nilai < 70
Tidak Lulus
Y
Lulus dan Tidak Lulus dan
Kompeten Kompeten
Selesai
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>
</body>
</html>
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>
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 ini adalah hari <u>$hari</u></h3>";
?>
</body>
</html>
Mulai
Masukkan
Jumlah Bayar
T
JumlahBayar
500000
Y
Diskon=0.5* T
JumlahBayar
JumlahBayar 100000
Y
Diskon=0.1*
T
JumlahBayar
JumlahBayar 50000
Y
Diskon=0.05*
Diskon=0
JumlahBayar
TotalBayar=
JumlahBayar-Diskon
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
Mulai
Masukkan
Nilai A dan B
Silahkan Pilih
Operasi Apa?
T
Pilihan=
Jumlah
Y
T
C=A+B Pilihan=
Kurang
Y
T
C=A-B Pilihan=
Kali
C=A*B C=A/B
Hasil Adalah = C
Selesai
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>
Sekarang buat satu lagi program yang digunakan untuk memproses hasil
setelah ada penekenan tombol hitung. File tersebut simpan dengan nama
operasi.php.
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]';
}
Statement WHILE
Mulai
Masukkan
Batasnya?
$genap=0;
T
$genap < $batas
Y
Selesai
$genap=$genap+2
<html>
<head>
<title>.:: Program Mencari Bilangan Genap::.</title>
</head>
<body>
<font face=verdana size=2>
<form>Mencari Bilangan Genap Berapa:
<input type=text name=genap><br><br>
<input type=submit value="Cari Bilangan Genap">
</form>
<?php
if (isset($genap))
{
$bilgen=intval($genap);
echo "Bilangan Genap dari 2 s/d $bilgen adalah: ";
echo "<br>";
$gen=0;
while ($gen<$genap)
{
$gen=$gen+2;
echo "$gen";
echo " ";
}
}
?>
</body>
</html>
Statement FOR
Keterangan:
<html>
<head>
<title>Latihan Perulangan dengan For</title>
</head>
<body>
Tanggal:
<select name=tanggal>
<option value=0 selected>Tanggal
<?php
//Bentuk Pilihan tanggal 1 sampai dengan 31
for ($i=1;$i<32;$i++)
echo "<option value=$i>$i";
?>
</option>
</select>
</body>
</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);
?>
</body>
</html>
require(namafile);
Function Require ini tidak dapat dimasukkan diadalam suatu struktur looping
misalnya while atau for. Karena hanya memperbolehkan pemangggilan file
yang sama tersebut hanya sekali saja.
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
Function Include akan menyertakan isi suatu file tertentu. Include dapat
diletakkan didalam suatu looping misalkan dalam statement for atau while.
contoh2_15.php
<?
echo("--------------------------------------<br>");
echo("PHP adalah bahasa scripting<br>");
echo("--------------------------------------<br>");
echo("<br>");
?>
contoh2_16.php
<?php
for ($b=1; $b<5; $b++)
{
include("contoh2_15.php");
}
?>
Hasilnya adalah:
AddSlashes
StripSlashes
string stripslashes(string)
Digunakan untuk meng-encrypt dengan metode DES suatu string. Fungsi ini
sering digunakan untuk mengacak string password sebelum disimpan dalam
database. Dalam penggunaan fungsi crypt ini dapat ditambahkan parameter
string salt. Parameter salt ini ditambahkan untuk menentukan basis
pengacakan. Salt string terdiri atas 2 karakter. Jika salt string tidak
ditambahkan pada fungsi crypt maka PHP akan menentukan sendiri salt
string tersebut secara acak.
Sintaks:
crypt(string [ , salt ] )
Explode
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 angka
B
biner
Argumen diperlakukan sebagai integer dan ditampilkan sebagai karakter
C
dengan nilai ASCII-nya
Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka
d
desimal
Argumen diperlakukan sebagai double dan ditampilkan sebagai angka
f
floating point
Argumen diperlakukan sebagai integer dan ditampilkan sebagai bilangan
o
oktal
s Argumen diperlakukan dan ditampilkan sebagai string
Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka
x
heksadesimal (dengan huruf kecil)
Argumen diperlakukan sebagai integer dan ditampilkan sebagai angka
X
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;
$tanggal=sprintf("%02d-
%02d-%04d",$day,$month,
$year);
echo ($tanggal);
?>
</body>
</html>
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)
StrRev
Digunakan untuk membalik urutan suatu string.
Sintaks:
strrev(string)
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
Digunakan untuk mengganti karakter pertama pada suatu string menjadi
huruf besar.
Sintaks:
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>");
printf("Desimal $bilangan dalam basis 2 adalah = $desbin<br>");
printf("Desimal $bilangan dalam basis 16 adalah = $deshex<br>");
printf("Desimal $bilangan dalam basis 8 adalah = $desoct<br>");
}
?>
</body>
</html>
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"
T Timezone setting of this machine; i.e. "MDT"
U seconds since the epoch
w day of the week, numeric, i.e. "0" (Sunday) to "6" (Saturday)
Y year, 4 digits; i.e. "1999"
y year, 2 digits; i.e. "99"
z day of the year; i.e. "0" to "365"
Z timezone offset in seconds (i.e. "-43200" to "43200")
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
minutes Menit
mon Bulan dalam digit
month Bulan
seconds Detik
wday Hari dalam digit
weekday Hari
yday Hari ke- dari tahun
year Tahun
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"))
{
while (!feof($file))
{
$string=fgets($file,255);
echo($string);
}
fclose($file);
}
else
{
echo "File gagal dibuka";
}
?>
</body>
</html>
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>
<?
//menampilkan
$berkas=fopen("datasiswa.dat","r");
while(!feof($berkas))
{
$teks=fgets($berkas,255);
echo ($teks);
}
fclose($berkas);
}
else
{
echo("File gagal dibuka");
}
}
?>
</body>
</html>
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:
Yang termasuk dalam tipe data tanggal dan waktu adalah sebagai berikut :
C:\WINDOWS>cd\apache\mysql\bin
C:\apache\mysql\bin>mysql
Kemudian akan masuk kedalam Prompt MySQL seperti tampilan dibawah ini:
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
mysql>
Contoh:
mysql> _
use namadatabase;
Contoh:
Setelah database aktif, sebuah tabel baru dapat dibuat. Perintah untuk
membuat tabel baru adalah:
Contoh:
Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email,
alamat, kota. Sedangkan strukturnya seperti tabel dibawah ini:
Kolom/Field Tipe Data Keterangan
nomor int(6), not null, Angka dengan panjang maksimal 6, sebagai
primary key 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
Contoh:
mysql> _
Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota
select nomor, nama from anggota;
Untuk menampilkan semua kolom pada tabel anggota yang berada pada
kota Surabaya
Untuk menampilkan semua kolom pada tabel anggota dengan urut nama
select * from anggota order by nama;
Untuk menampilkan kota dengan tidak menampikan kota yang sama pada
tabel anggota
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)
Isi dari variabel $host, $username, $password dapat disesuaikan sesuai dengan
setting pada MySQL server yang ada.
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)
$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:
$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>
Agar script diatas dapat dijalankan, silahkan buat juga script koneksi.php
berikut ini:
<?php
function open_connection()
{
$host="localhost";
$username="root";
$password="";
$databasename="alamat";
$koneksi=@mysql_connect
($host,$username,
$password);
if ($koneksi)
$db=@mysql_select_db
($databasename,$koneksi)
or die ("Database
<b>$databasename</b>
Tidak Ditemukan");
return $koneksi;
}
?>
Jika script diatas dijalankan dan koneksi dengan server database sukses
dilaku-kan serta data-base alamat sudah dibuat, maka hasilnya seperti
gambar diatas.
contoh2_25.php
<html>
<head>
<title>.:: Menampilkan Data::.</title>
</head>
<body>
<font face=arial size=2>
<center><h3>DAFTAR ANGGOTA</h3></center>
<?php
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>
Sebelum script diatas dijalankan, jangan lupa untuk membuat juga script
simpan_anggota.php
<html>
<head>
<title>.:: Simpan Data::.</title>
</head>
<body>
<font face=arial size=2>
<center><h5>DATA BERHASIL DITAMBAHKAN KE TABEL ANGGOTA</h5></center>
<hr>
<?php
// ----- ambil isi dari file koneksi.php
require("koneksi.php");
Digunakan untuk mengambil atau menentukan path dari direktori yang digunakan
untuk menyimpan data-data sebuah session. Sintaksnya adalah sebagai berikut:
session_save_path([path])
Untuk memahami session, kita akan latihan membuat session dengan aplikasi
login. Yang perlu dbuat pertama kali adalah file admin.html.
File admin.html
<html>
<head> <title>.:: Login Administrator::.</title></head>
<body bgcolor="#FFFFFF">
<form name="form1" action=login.php method=POST>
<table width="62%" border=1 align=center
cellpadding=0 cellspacing=0 bgcolor=#ffffff bordercolor=purple>
<td>
<table width="100%" border=0 align=center cellpadding=1 cellspacing=1
bgcolor=#ffffff >
<tr bgcolor=magenta>
<td colspan=2><div align=center><strong>Login Admin</strong></div></td>
</tr>
<tr bgcolor=#ffffff>
<td width=31%>User ID</td>
<td width=69%><input type=text name=user id=admin size=25
maxlength=25></td>
</tr>
<tr bgcolor=#ffffff>
<td width=31%>Password</td>
<td width=69%><input type=password name=password
id=pass size=25 maxlength=25></td>
</tr>
<tr>
<td width=15% colspan=2 align=center><hr></td>
</tr>
<tr>
<td colspan=2 align=right><input type=submit value="Login">
<input type=reset value="Reset"></td>
</tr>
</table>
</td>
</table>
</form>
</body>
</html>
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>";
}
?>
</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>
File hal2.php
<?
session_start();
session_destroy();
header("location:admin.html");
?>
Pertama kita akan membuat database di mysql dan menampilkannya di browser tentunya
masih menggunakan Php. Untuk membuat database di mysql sebaiknya gunakan
PhpMyadmin. Jika anda menggunakan phptriad untuk mengakses phpmyadmin, pada
browser ketikkan http://localhost/phpmyadmin/. Penulis menggunakan phpMyAdmin
2.2.0rc4. Penulis tidak menggunakan phptriad tapi easyphp (http://www.easyphp.org)
jadi untuk masalah url di localhost dapat disesuaikan.
Pertama kali buat database mysql dengan phpmyadmin. Beri nama databasenya ikc.
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
Database sudah terbentuk, sekarang kita akan mulai bagaimana caranya menampilkan isi
tabel tersebut pada browser yang tentunya menggunakan Php. Pertama jangan lupa
start dulu apache dan mysql anda (jika anda menggunakan PhpTriad).
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","");
3. Setelah terhubung dengan mysql langkah selanjutnya ialah memilih database yang
akan digunakan. Pada contoh ini database yang digunakan bernama ikc. Baris 9
merupakan sintak bagaimana memilih database.
4. Setelah memilih database ikc, maka kita dapat melakukan query. Dengan sintak
seperti baris 11 maka kita akan mengambil semua record yang terdapat pada tabel
pengunjung.
5. Setelah melakukan query maka kita perlu juga menghitung banyaknya record yang
terdapat pada tabel. Baris 13 adalah cara untuk menghitung seluruh isi tabel.
6. Langkah utama ialah bagaimana menampilkan isi tabel ke dalam browser. Baris 17
memasukkan semua isi hasil dari query ke dalam variable $baris. Di dalam $baris
inilah semua isi tabel (record) di tampung. Pada contoh diatas untuk menampilkan
setiap urutannya menggunakan urutan dari field yang ada di tabel.
$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
File view.php tidak memungkinkan untuk seseorang memasukkan record dikarenakan file
tersebut hanya menampilkan record. Untuk dapat membuat sebuah halaman yang dapat
memasukkan sebuah inputan maka perlu dibentuk sebuah form. Form tersebut memuat
variabel-variabel yang dibutuhkan yang kemudian setelah di submit akan di proses dan
dimasukkan dalam database. Maka dibutuhkanlah dua file yaitu input.htm dan file
pemroses input.php
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 :
Baris 6 mengupdate record dimana id yang ingin diupdate sama dengan variable id yang
di bawa oleh file update.php. Jika pada file edit.php baris 18 di hapus maka query tidak
dapat dilaksanakan karena nilai variable id tidak dapat di akses.
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.
Menghapus database MySql dengan php tentunya sangat mudah. Logika bekerjanya
sama dengan edit.php dimana mengambil variable id dan di proses di file delete.php.
Perintah yang digunakan untuk menghapus adalah perintah MySql yaitu delete. File
view.php harus kita modifikasi terlebih dahulu.
Kiranya tidak perlu di jelaskan lagi, cara kerjanya sama dengan update.php.
Database yang besar yang tentunya mempunyai record ribuan atau bahkan ratusan ribu
yang seharusnya mempunyai fasilitas pencarian data atau searching. Pencarian ini
bersifat fleksibel dimana dapat mencari berdasarkan field yang ada dalam tabel. Pada
contoh tabel pengunjung, pencarian dapat di customize-kan berdasarkan id, nama, email
dan situs. Untuk membuat form pencarian menggunakan html sedangkan pemrosesan
variable menggunakan php.
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
Simpan Reset
File faktorial.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=faktor.php method=post>
Masukkan Nilai Faktorial:<br>
<input type=text name=a size=10><p>
<input type=submit value="Hitung">
</form>
<br>
</td>
</tr>
</table>
</body>
</html>
f. Lembar Kerja 2
Langkah Kerja
b. Uraian Materi 3
1. Software Web Design
Pertama kali dijalankan setelah proses instalasi selesai, user akan diberikan
pilihan Workspace Setup. Workspace Setup berfungsi untuk menentukan
workspace yang akan kita pakai selanjutnya, apakah Workspace
Dreamweaver MX apakah Workspace Dreamweaver 4. Di sini kita gunakan
Workspace Dreamweaver MX, apabila dikemudian hari kita ingin
menggunakan workspace Dreamweaver 4, kita dapat merubahnya melalui
Menu Edit Preferences.
Menyimpan dokumen
Simpanlah dokumen kosong yang Anda buat ketika Anda membuka
Dreamweaver.
1. Pilih File | Save.
2. Dalam kotak dialog Save As, pilih folder Sites/Scall_site untuk menyimpan
file ini.
3. Dalam field Name, ketik my_scall_home.html.
4. Klik Save.
5. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog
yang muncul pilih btn_products_up.gif, dan kemudian klik Select.
6. Tempatkan kursor setelah gambar, dan tekan Enter.
7. Pada Object palette, klik tombol Insert Image, dan pada kotak dialog
yang muncul pilih btn_thisweek_up.gif, dan kemudian klik Select.
Tata letak dokumen Anda akan terlihat sama seperti di bawah ini :
Format Teks
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.
Catatan : Dreamweaver mengatur spasi antara kolom tabel dan baris tabel
dengan menggunakan transparent GIFs. Setelah mengkonversi layer-layer
menjadi sebuah tabel, Anda akan melihat file transparent.gif pada root level
dari situs folder Anda.
Jangan memindahkan file ini; jika Anda lakukan, Anda akan melihat icon
gambar silang ketika Anda melihat halaman tersebut pada sebuah browser.
5. Tutup Layer palette.
6. Simpan dokumen Anda.
4. Klik OK.
6. Klik OK.
7. Pilih File | Save As untuk menyimpan dokumen Our Story; beri nama
my_ourstory.
2. Pastikan bahwa pilihan Apply dalam keadaan tercentang pada pojok kiri
bawah.
3. Pada dokumen my_ourstory, tempatkan kursor pada paragraf pertama. Anda
dapat menempatkan kursor di mana saja pada suatu paragraf untuk
menerapkan suatu style pada sebuah paragraf.
4. Pada HTML Style palette, klik style Body.
Teks pada paragraf pertama di format ulang oleh style yang baru.
5. Pasanglah style Body pada paragraf-paragraf lain dalam dokumen ini.
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.
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
Macromedia Dreamweaver yang telah sampai pada versi 2004 (MX) merupakan
software Web design yang telah memiliki banyak dukungan terhadap banyak
bahasa pemrograman web. Panel-panel pada window Dreamweaver MX memiliki
peran masing-masing dalam membangun sebuah halaman web yang cantik,
sesuai dengan jiwa seni si pemakai.
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
1. Apakah yang anda ketahui tentang software Web design?
2. Apa yang anda ketahui tentang pemrograman Web?
3. Sebutkan beberapa software Web design yang anda ketahui!
g. Lembar Kerja 3
Alat dan Bahan
Personal Computer (PC).
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
7. Data Pelajaran
PEDOMAN PENILAIAN
Nama Peserta :
No. Induk :
Program Keahlian : Teknik Komputer dan Jaringan
Skor Skor
No. Aspek Penilaian Ket.
Maks Perolehan
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
Setelah menyelesaikan modul ini dan mengerjakan semua tugas serta evaluasi maka
berdasarkan kriteria penilaian, peserta diklat peserta diklat dapat dinyatakan lulus/tidak
lulus. Apabila dinyatakan lulus maka dapat melanjutkan ke modul berikutnya sesuai
dengan alur peta kududukan modul, sedangkan apabila dinyatakan tidak lulus maka
peserta diklat harus mengulang modul ini dan tidak diperkenankan mengambil modul
selanjutnya.
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