Scribd
Unggah
2 tayangan46 halaman

Modul Praktikum Pemrograman Web

Dokumen ini adalah modul pemrograman web yang mencakup pengenalan HTML, client-side scripting, dan PHP. Terdapat berbagai latihan praktis untuk membuat dokumen HTML, termasuk penggunaan elemen dasar, daftar, tabel, dan formulir. Modul ini bertujuan untuk memberikan pemahaman dasar tentang pemrograman berbasis web.

Diunggah oleh

budilintasarta
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
2 tayangan46 halaman

Modul Praktikum Pemrograman Web

Dokumen ini adalah modul pemrograman web yang mencakup pengenalan HTML, client-side scripting, dan PHP. Terdapat berbagai latihan praktis untuk membuat dokumen HTML, termasuk penggunaan elemen dasar, daftar, tabel, dan formulir. Modul ini bertujuan untuk memberikan pemahaman dasar tentang pemrograman berbasis web.

Diunggah oleh

budilintasarta
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 46

MODUL PEMROGRAMAN WEB

2022
i
HALAMAN SAMPUL...........................................................................................................................i
KATA PENGANTAR..........................................................................................................................iii
DAFTAR ISI.........................................................................................................................................iv
BAB I PEMROGRAMAN BERBASIS WEB HTML..........................................................................1
BAB II PEMROGRAMAN BERBASIS WEB CLIENT SIDE SCRIPTING.....................................16
BAB III PHP CODE............................................................................................................................25
DAFTAR PUSTAKA..........................................................................................................................36

ii
BAB I
PEMROGRAMAN BERBASIS WEB HTML

A. HTML Dasar
Latihan 1.1.1
1. Di bawah ini adalah struktur dari dokumen HTML, buka Notepad
kemudian ketikkanteks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan1.htm</TITLE>
</HEAD>
<BODY>
KEPALA SURAT / KEPALA DOKUMEN
<p>
Isi dokumen
</BODY>
</HTML>

2. Setelah selesai klik menu "File" menu dan pilih "Save As" . Akan muncul kotak Save
yang akan menyimpan dokumen Anda. Lalu ketikkan contoh1.htm . Pada kotak yang
paling bawah Anda dapat elihat "Save file as Type" or "Save as Type". Defaultnya
adalah txt, jadi Anda harus mengubahnya e All Files(*).L.*alu Anda dapat mengklik
Save.
3. Buka Microsoft Internet Explorer dengan mengklik Start, Program lalu pilih Internet
Explorer. Internet Explorer akan terbuka lalu Anda dapat memilih menu File, Open
lalu cari lokasi file di disket Anda.
Latihan 1.1.2.
Berikut ini adalah contoh penulisan atribut align pada tag
heading.Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan2.htm</TITLE>
</HEAD>
<BODY>
<H1 Align="Left"> Heading rata kiri
</H1><BR> <H2 Align="Right"> Heading
rata kanan </H2><BR> <H4
Align="Center"> Heading rata tengah </H4>
</BODY>
</HTML>

1
Latihan 1.1.3
Berikut ini adalah contoh Unordered List.
Buka Notepad kemudian ketikkan teks di bawah ini:

. <HTML>
<HEAD>
<TITLE> Latihan3.htm</TITLE>
</HEAD>
<BODY>
<UL> <LI>MS-Word
<LI>MS-Excel
<LI>MS-Access
<LI>MS-PowerPoint
</UL>

</BODY>

Latihan 1.1.4
Berikut ini adalah contoh Unordered List dengan
menggunakan TYPE. Buka Notepad kemudian ketikkan teks di
<HTML>
<HEAD>
<TITLE>Latihan4.htm</TITLE>
</HEAD>
<BODY>
<UL>
<LI> MS-Word(TYPE=square)
<LI> MS-Excel(TYPE=disk)
<LI> MS-Access(TYPE=circle)
<LI> MS-PowerPoint
</UL>
</BODY>
</HTML>

bawah ini:
Latihan 1.1.5.
Berikut ini adalah contoh Ordered List.
Buka Notepad kemudian ketikkan teks di bawah ini:
<HTML>
<HEAD>
<TITLE>Latihan5.htm</TITLE>
</HEAD>
<BODY>
<OL TYPE=I START=3>
<LI TYPE=1>MS-Word
<LI TYPE=A>MS-
Excel <LI>MS-Access
<LI TYPE=i>MS-PowerPoint
<LI>MS-PhotoDraw
</OL>
</BODY>
</HTML>
2
Latihan 1.1.6.
Berikut ini adalah contoh Definition List.
Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan6.htm</TITLE>
</HEAD>
<BODY>
<DL>
<DT>MS-PowerPoint<DD>Merupakan
program pengolah kata
dari Microsoft. <DT>MS-
Excel<DD>Merupakan
program Spreadsheet.
<DT>MS-Access<DD>Merupakan
program Database. </DL>
</BODY>
</HTML>

Latihan 1.1.7.
Berikut ini adalah contoh Menu List.
Buka Notepad kemudian ketikkan teks di bawah ini:
<HTML>
<HEAD>
<TITLE>Latihan7.htm</TITLE>
</HEAD>
<BODY>
<MENU>
<LI>MS-Word
<LI>MS-Excel
<LI>MS-Access
</MENU>
</BODY>
</HTML>

3
KASUS

1. Buatkanlah Program HTML-nya dengan tampilan sbb :

LATIHAN 1.1 HTML

NAMA : NAMA MAHASISWA


NIM : NIM MAHASISWA

================================ NO MATA KULIAHSKS


================================
Pemrograman WEB3 sks
Sistem Operasi3 sks
Database3 sks
================================

2. Buatkanlah Program HTML –nya dengan tampilan sbb :

LATIHAN 1.2 HTML

Seri Operating System


• MS – Windows 2000 Profesional
• MS – Windows XP
• MS – Windows 98

Seri Programming Language


1. Pemrograman Visual Basic
2. Pemrograman Java
3. Pemrograman C ++

4
B. HTML Lanjut
Latihan 1.2.1

Berikut ini adalah contoh paragraph pada HTML.


Buka Notepad kemudian ketikkan teks di bawah
ini:

<HTML>
HEAD>
<TITLE>Latihan201.htm</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">
Keberhasilan Microsoft dalam memasarkan
produknya dapat diacungkan jempol,
dibuktikan dengan banyak
perusahaan yang menggunakan
produknya.
<P ALIGN="right">
Salah satunya adalah Microsoft Word yang
menjadi standar pengolah kata di
banyak perusahaan.
<P ALIGN="left">
Microsoft Word dilengkapi dengan banyak
feature untuk memudahkan penggunanya.
</P>
</BODY>
</HTML>

5
Latihan 1.2.2

Berikut ini adalah contoh menampilkan tulisan dalam berbagai


ukuran. Buka Notepad kemudian ketikkan teks di bawah ini:
<HTML>
<HEAD>
<TITLE>Latihan202.htm</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1> Font Size 1</FONT><BR>
<FONT SIZE=2> Font Size 2</FONT><BR>
<FONT SIZE=3> Font Size 3</FONT><BR>
<FONT SIZE=4> Font Size 4</FONT><BR>
<FONT SIZE=5> Font Size 5</FONT><BR>
<FONT SIZE=6> Font Size 6</FONT><BR>
<FONT SIZE=7> Font Size 7</FONT>
</BODY>
</HTML>

Latihan 1.2.3

Berikut ini adalah contoh menampilkan gambar, align untuk gambar adalah tengah.
Anda dapat mencobanya untuk align dan align bottom untuk membandingkannya.
Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan203.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG
SRC="sample.gif" ALIGN="MIDDLE"> <A
HREF="www.pelatihan.com">Pelatihan
Situs Web Bisnis</A>
</BODY>
</HTML>

6
Latihan 1.2.4.

Berikut ini adalah contoh mengatur frame yang mengelilingi gambar dengan menggunakan atribut
HSPACE dan VSPACE.
Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latiha204.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG
SRC="sample.gif" ALIGN="MIDDLE"
HSPACE=13
VSPACE=13> <A
HREF="www.pelatihan.com">Pelatihan Situs Web
Bisnis</A>
</BODY>

Latihan 1.2.5.

Berikut ini adalah contoh menentukan sendiri lebar dan panjang gambar mengatur property
WIDTH dan HEIGHT pada tag <IMG>.
Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan205.htm</TITLE>
</HEAD>
<BODY>
<H1>Pelatihan Situs Web Bisnis</H1>
<BR>Pergi ke web site <IMG
SRC="sample.gif" ALIGN="MIDDLE"
WIDTG=50
HEIGHT=50> <A
HREF="www.Pelatihan.com">Pelatihan
Situs Web Bisnis</A>
</BODY>
</HTML>

7
Latihan 1.2.6.

Berikut ini adalah contoh membuat tabel.


Buka Notepad kemudian ketikkan teks di bawah ini:
<HEAD>
<TITLE>Latihan206.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD>Sel 1,1</TD>
<TD>Sel 1,2</TD>
</TR>
<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Latihan 1.2.7.

Berikut ini adalah contoh membuat mengatur lebar untuk tabel dan juga masing-
masing kolomnya dengan menggunakan atribut WIDTH.
Buka Notepad kemudian ketikkan teks di bawah ini:
</HTML>
<HEAD>
<TITLE>Latihan207.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 WIDTH="80%">
<TR>
<TD WIDTH="70%">Sel 1,1</TD>
<TD WIDTH="30%">Sel 1,2</TD>
</TR>
<TR>
<TD>Sel 2,1</TD>
<TD>Sel 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>

8
Latihan 1.2.8.

Berikut ini adalah contoh penggunaan atribut cellspacing dan cellpading.


Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan208.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1
WIDTH="80%"
CELLSPACING=10
CELLPADDING=20>
<TR>
<TD WIDTH="85%">Penggunaan Internet
menjadi utama dalam kegiatan
perusahaan</TD>
<TD WIDTH="15%">-</TD>
</TR>
<TR>
<TD>Perusahaan banyak memanfaatkan
e-mail sebagai komunikasi mereka.</TD>
<TD>-
</TD>
</TR>
</TABLE>
</BODY>

9
Latihan 1.2.9

Berikut ini adalah contoh penggunaan atribut cellspacing dan cellpading.


Buka Notepad kemudian ketikkan teks di bawah ini:

<HTML>
<HEAD>
<TITLE>Latihan209.htm</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Sel
1,1</TD> TD>Sel 1,2</TD>
<TD>Sel 1,3</TD>
</TR>
<TR>
<TD ROWSPAN=3>Sel 2,1</TD>
<TD>Sel 2,1</TD>
<TD>Sel 2,2</TD>
<TD>Sel 2,3</TD>
</TR>
<TR>
<TD>Sel 3,1</TD>
<TD>Sel 3,2</TD>
<TD>Sel 3,3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

10
Latihan 1.2.10.

Berikut ini adalah contoh penggunaan input box. Buka


Notepad kemudian ketikkan teks di bawah ini:
<HTML>
<HEAD>
<TITLE>Latihan2010.htm</TITLE>
</HEAD>
<BODY>
<FORM>
<TABLE>
<TR>
<TD>Nama :</TD>
<TD><INPUT TYPE="Text"
NAME="varNama"
VALUE="Andy
Kurniawan"
SIZE="15"></TD>
</TR>
<TR>
<TD>Alamat :</TD>
<TD><INPUT TYPE="Text"
NAME="varAlamat" SIZE="30"></TD>
</TR>
<TR>
<TD>Password :</TD>
<TD><INPUT
TYPE="Password"
NAME="varKota"
SIZE="10"></TD>

Latihan 1.2.11.

Tambahkan baris berikut ini di Latihan2010.htm

Jenis Kelamin:
<INPUT CHECKED TYPE=”Radio” NAME=”Kelamin” VALUE=”Pria”>Pria
<INPUT TYPE=”Radio” NAME=”Kelamin” VALUE=”Wanita”>Wanita

Latihan 1.2.12.

Tambahkan baris berikut ini di Latihan2010.htm

<Input Type=”Submit” Value=”Send Info”>


<Input Type=”Reset” Value=”Clear form”>

11
Latihan 1.2.13
Berikut ini adalah contoh form secara lengkap.
Buka Notepad kemudian ketikkan teks di bawah ini:
<HTML>
<HEAD>
<TITLE>Latihan2011.htm</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST"
ACTION="contoh18.htm"> <TABLE>
<TR>
<TD>Nama :</TD>
<TD><INPUT TYPE="Text" NAME="varNama"
VALUE="Andy Kurniawan" SIZE="15"></TD>
</TR>
<TR>
<TD>Alamat :</TD>
<TD><INPUT TYPE="Text"
NAME="varAlamat" SIZE="30"></TD>
</TR>
<TR>
<TD>Password :</TD>
<TD><INPUT TYPE="Password"
NAME="varPassword
" SIZE="10"></TD>
</TR>
</TABLE>
Jenis kelamin:
<INPUT CHECKED TYPE="Radio" NAME="Kelamin"
VALUE="Pria">Pria
<INPUT TYPE="Radio"
NAME="Kelamin"
VALUE="Wanita">Wanita
<BR><BR>
Hobi:<BR>
<INPUT TYPE="Checkbox"
NAME="Kelamin"
VALUE="Soccer">Sepakbola
<INPUT CHECKED TYPE="Checkbox"
NAME="Hobi" VALUE="Badminton">Bulutangkis
<INPUT TYPE="Checkbox"
NAME="Hobi"
VALUE="Computer">Komputer
<BR>
<INPUT TYPE="Checkbox"
NAME="Hobi"
VALUE="Game">Permainan video
<INPUT CHECKED TYPE="Checkbox"
NAME="Hobi" VALUE="Internet">Internet
<INPUT TYPE="Submit" VALUE="Send info">
KASUS
1. Buatkanlah Iklan Produk untuk sebuah perusahaan yang akan di
publikasikan lewat internet. :
Ada informasi keterangan Tentang
Perusahaannya Ada informasi keterangan
Produknya Lengkap Ada informasi keterangan
yang dapat dihubungi
12
C. HTML Lengkap

Latihan 1.3.1
Berikut ini Contoh Hyperlink

<p>The <a href=”http://www.w3.org” target=”_blank”>World Wide Web Consortium</a>


is the standards body that oversees the ongoing development of the XHTML
specification.</p>

Latihan 1.3.2
Berikut ini Contoh Intradocument Hyperlinks

<html>
<head>
<title>Intradocument hyperlinks at work</title>
</head>
<body>
<h1><a name=”top”></a>Web-Based Training</h1>
<p>Given the importance of the Web to businesses
and other organizations, individuals who seek to
improve job skills, or fulfill essential job functions, are
turning to HTML and XML for training. We
believe this provides an outstanding opportunity
for participation in an active and lucrative adult
and continuing education market.</p>
<p><a href=”#top”>Back to top</a></p>
</body>
</html>

Latihan 1.3.3
Berikut ini Contoh untuk Link ke File

<h1>Download the new version of our software</h1>


<p> <a href=”software.zip”>Software</a> <br />
<b>Note:</b>
You need a zip utility such as
<a href=”http://www.winzip.com”>WinZip</a> or
<a href=”http://www.maczipit.com”>ZipIt</a>
to open this file.</p>
<p><a href=”doc.pdf”>Documentation</a> <br />
<b>Note:</b>You need the free
<a href=”http://www.adobe.com/products/
acrobat/readstep2.html”>Acrobat Reader</a>
to view this file.</p>

Latihan 1.3.4
Berikut ini Contoh untuk Link ke E-Mail
<p>Send us your
<a href=”mailto:[email protected]”>comments</a>.</p>

13
Latihan 1.3.5
Berikut ini Contoh untuk Menampilkan Gambar diantara 2 Paragraph

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<title>CDs at Work</title>
</head>
<body>
<h1>CD as a Storage Media</h1>
<p>CD-ROMs have become a standard storage option in today’s computing world
because they are an inexpensive and easy to use media.</p>
<img src=”07fg02-cd.jpg” />
<p>To read from a CD, you only need a standard CD-ROM drive, but to create
CDs, you need either a CD-R or a CD-R/W drive.</p>
</body>
</html>

Latihan 1.3.6
Berikut ini Contoh untuk Menampilkan Text sebagai Alternatif jika Gambar Belum
Muncul

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<title>Inside the Orchestra</title>
</head>
<body>
<p>Among the different sections of the orchestra you will find:</p>
<p><img src=”07fg03-violin.jpg” alt=”violin “ /> Strings</p>
<p><img src=”07fg03-trumpet.jpg” alt=”trumpet” /> Brass</p>
<p><img src=”07fg03-woodwinds.jpg” alt=”clarinet and saxophone” />
Woodwinds</p>
</body>
</html>

Latihan 1.3.7
Berikut ini Contoh untuk Mengatur Letak Gambar di Layar

<p> <img src=”07fg09-mouse.jpg” alt=”mouse with top-aligned text”


height=”105” width=”65” align=”top” />
This text is aligned with the top of the image.
</p>
<p> <img src=”07fg09-mouse.jpg” alt=”mouse with middle-aligned text”
height=”105” width=”65” align=”middle” />
This text is aligned with the middle of the image.
</p>
<p> <img src=”07fg09-mouse.jpg” alt=”mouse with bottom-aligned text”
height=”105” width=”65” align=”bottom” />
This text is aligned with the bottom of the image.
</p>
<p> <img src=”07fg09-mouse.jpg” alt=”mouse with left-aligned
text” height=”105” width=”65” align=”left” />

14
This image floats to the left of the text.
</p>
<p> <img src=”07fg09-mouse.jpg” alt=”mouse with right-aligned text”
height=”105” width=”65” align=”right” />
This image floats to the right of the text, and overlaps with
the image to the left.
</p>

Latihan 1.3.8
Berikut ini Contoh untuk Mengatur Links dari Gambar dengan memetakanya terlebih
dahulu

<map name=”NavMap” />


<area shape=”rect” coords=”0,0,99,30” href=”home.html” alt=”Home” />
<area shape=”rect” coords=”102,0,202,30” href=”about.html” alt=”About” />
<area shape=”rect” coords=”202,0,301,30” href=”products.html”
alt=”Products” />
</map>

KASUS

Buatlah sebuah halaman katalog dari berbagai macam lokasi parawisata di Indonesia,
buatlah semenarik mungkin menggunakan semua HTML Code yang telah dipelajari, silahkan
menggunakan gambar dari website yang sudah ada dan buat lah hyperlink ke website
sumber / propinsi tempat parawisata itu ada.

15
BAB II
PEMROGRAMAN BERBASIS WEB CLIENT SIDE
SCRIPTING

A. Format Penulisan dan Perintah Dasar CSS


Latihan 2.1.1
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<HTML>
<HEAD>
<TITLE>FASILKOM</TITLE>
<LINK REL="STYLESHEET"
TYPE="text/css" HREF="efek.css">
</HEAD>
<BODY>
<H1>UNIVERSITAS </H1>
<P> FASILKOM adalah salah satu fakultas di UIEU
</BODY>

Latihan 2.1.2
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE>FASILKOM</TITLE>
<STYLE type="text/css">
body {
color: white;
background: green;
font-family : arial;
}
</STYLE>
</HEAD>
<BODY>
<H1>LINUX</H1>
<P>Linux adalah salah satu sistem operasi
</BODY>
</HTML>

16
Latihan 2.1.3
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE>centranet</TITLE>
</HEAD>
<BODY style="color:
white; background:
green; font-family :
arial;“ >
<H1>LINUX</H1>
<P>Linux adalah salah satu sistem operasi
</BODY>
</HTML>
Latihan 2.1.4.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE> Selector
</TITLE> <style
type="text/css"> body
{
FONT-FAMILY: Geneva,
Arial; FONT-SIZE: 20px;
color: red;
BACKGROUND- COLOR:
green;
}
</style>
</HEAD>
<BODY> Halaman
efect CSS
</BODY>
</HTML>
Latihan 2.1.5.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
<style type="text/css">
gbawah{TEXT-DECORATION: underline;}
</style>
17
</HEAD>
<BODY>
<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah>
</BODY>
</HTML>

18
Latihan 2.1.6.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
<style type="text/css">
.right { text-align : right }
</style>
</HEAD>
<BODY>
<h2 class="right">Class Heading 2 </h2>
<p class="right"> Class Paragraf</p>
</BODY>
</HTML>

Latihan 2.1.7.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>
<TITLE> Selector </TITLE>
<style type="text/css">
#BODY_115 {
FONT-SIZE: 20px;
TEXT-DECORATION: underline;
COLOR: blue; FONT-
FAMILY:Comic Sans MS;
}
</style>
</HEAD>
<BODY id="BODY_115">
Menggunakan ID Selector
</BODY>
</HTML>

Latihan 2.1.8.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<HTML>
<HEAD>

19
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">

20
BODY
{
margin-top : 1cm;
margin-right : 2cm;
margin-bottom :
1cm; margin-left :
2cm;
}
</STYLE>
</HEAD>
<BODY>
Pengaturan Margin Halaman
(1cm,2cm,1cm,2cm) </BODY>
</HTML>

Latihan 2.1.9.
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<HTML>
<HEAD>
<TITLE>Pengaturan Margin</TITLE>
<STYLE ="text/css">
BODY { padding-top
: 10%; padding-
right : 20%;
padding-bottom : 40%;
padding-left: 20%; }
</STYLE>
</HEAD>
<BODY>
Text ini berada di tengah halaman , karna di lakukan pengaturan
halaman dengan menggunakan padding atas 10%, kanan 20%,bawah
40%,dan kiri 20%. </BODY>
</HTML>

Latihan 2.1.10
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE> <STYLE
type="text/css"> BODY { background-

21
color : yellow}
</STYLE>
</HEAD>

22
<BODY>
Halaman ini di buat Berwarna Kuning
</BODY>
</HTML>

Latihan 2.1.11
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini:
HTML>
<HEAD>
<TITLE>Menggunakan Background
Warna</TITLE> <STYLE
="text/css"> body {background-
color : #99CCFF} h2 {background :
green}
h3 {background-color :
transparent} p {background :
rgb(240,248,255)}
</STYLE>
</HEAD>
<BODY>
<h2>Header 2,Background Hijao</h2>
<h3>Header 3 , Bakground
Transparan</h3> <p>Background
pada paragraph</p> </BODY>
</HTML>

Latihan 2.1.12
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah
ini

<HTML>
<HEAD>
<TITLE>Menggunakan Background Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:
url("drums.jpg");
background-repeat: repeat-x;
}
</STYLE>
</HEAD>
<BODY>
Background Berulang pada Sumbu X
23
</BODY>
</HTML>

24
Latihan 2.1.13
Berikut ini adalah contoh paragraph pada HTML.
Buka Notepad kemudian ketikkan teks di bawah ini
:

<HTML>
<HEAD>
<TITLE>Menggunakan Background Gambar</TITLE>
<STYLE ="text/css">
BODY
{
background-image:url ("motor.jpg");
background-repeat: no-repeat;
background-position: center center;
}
</STYLE>
</HEAD>
<BODY>
Background di
Pusat Halaman
</BODY>
</HTML>

TUGAS :

Buatlah web pribadi anda, lengkapi dengan pembuatan tombol link menggunakan
css. FASILITAS MENU :
3. HOME : Informasi sekilas tentang diri anda.
4. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training
yang pernah diikuti.
5. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas.
6. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di
luar.
7. Tambahkan informasi lain, untuk menambah nilai an

25
B. Pengaplikasian Client Side Scripting (CSS)
Latihan 2.2.1
Berikut ini Contoh Rollover Page menggunakan Java Script

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>JavaScript Image Rollover</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<script type=”text/javascript” language=”javascript”>
function chgImg(imgField,imgState) {
document[imgField].src = “images/” + imgField + imgState + “.gif”
}
</script>
</head>
<body>
<a href=”index.html” onmouseover=”chgImg(‘homeButton’,’On’)”
onmouseout=”chgImg(‘homeButton’,’Off’)”>
<img src=”images/homeButtonOff.gif” width=”65” height=”15”
border=”0” alt=”Go Home” name=”homeButton” /></a>
</body>
</html>

Latihan 2.2.2
Berikut ini Contoh Jam JavaScript dan HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>HTML Clock</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<script type=”text/javascript” language=”javascript”>
window.onload = theClock

function theClock() {
now = new Date;

theTime = ((now.getHours() > 0 && now.getHours()


< 13)) ? now.getHours() : (now.getHours() == 0)
? 12 : now.getHours()-12;
theTime += (now.getMinutes() > 9) ? “:” + now.getMinutes() : “:0”
+ now.getMinutes();
theTime += (now.getSeconds() > 9) ? “:” + now.getSeconds() : “:0”
+ now.getSeconds();
theTime += (now.getHours() < 12) ? “ am” : “ pm”;

document.myForm.myClock.value = theTime;
setTimeout(“theClock()”,1000);
}
</script>

26
</head>
<body>
<form action=”#” name=”myForm”>
The current time is
<input type=”text” name=”myClock” readonly=”readonly” size=”11” />
</form>
</body>
</html>

Latihan 2.2.3
Berikut ini Contoh Cookie Handling Script

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”


“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Cookie Demo</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” />
<script type=”text/javascript” language=”javascript”>
now = new Date
expireDate = new Date
expireDate.setMonth(expireDate.getMonth()+6)
hitCt = parseInt(cookieVal(“pageHit”))
hitCt++
lastVisit = cookieVal(“pageVisit”)
if (lastVisit == 0) {
lastVisit = “”
}

document.cookie = “pageHit=”+hitCt+”;expires=” + expireDate.toGMTString()


document.cookie = “pageVisit=”+now+”;expires=” + expireDate.toGMTString()
function cookieVal(cookieName) {
thisCookie = document.cookie.split(“; “)
for (i=0; i<thisCookie.length; i++) {
if (cookieName == thisCookie[i].split(“=”)[0]) {
return thisCookie[i].split(“=”)[1]
}
}
return 0
}
</script>
</head>
<body>
<h2>
<script type=”text/javascript” language=”javascript”>
document.write(“You have visited this page “ + hitCt + “ times.”)
if (lastVisit != “”) {
document.write(“<br />Your last visit was “ + lastVisit)
}
</script>
</h2>
</body>
</html>

KASUS

Buatlah sebuah halaman sesuai dengan proyek yang Anda kerjakan menggunakan Client
Side Scripting (Java Script) untuk membuat website lebih interactive dan bisa digunakan
untuk menyimpan cookie.

27
C. Pengaplikasian Server Side Scripting (SSS)

Latihan 2.3.1
Berikut ini Contoh Tampilan String

<?php
echo “Nama saya Apampam”;
?>

Latihan 2.3.2
Berikut ini Contoh Variabel pada PHP

<?php
$nama = “Apampam”;
echo “Nama saya $nama”;
?>

Latihan 2.3.3
Berikut ini Contoh Script Lengkap Internal Server Scripting

<html>
<head>
<title>
</head>
<body>
<?php
echo “Halo Dunia<p>”;
?>
</body>
</html>

KASUS

Buatlah sebuah halaman sesuai dengan proyek yang Anda kerjakan menggunakan
Server Side Scripting (PHP) untuk membuat website lebih interactive dan bisa digunakan
untuk menyimpan variabel.

28
BAB III
PHP
CODE

A. Input dan Output


Latihan 3.1.1

Berikut ini adalah contoh paragraph pada


PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<HTML>
<HEAD>
<TITLE> Contoh Skrip PHP </TITLE>
<BODY>
<?
$nama = "Michele Flanouski";
echo "$nama berkata \"Katakan namamu!\"";
?>
</BODY>
</HTML>

Latihan 3.1.2

Berikut ini adalah contoh paragraph pada


PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$a = 3;
$b = 7;
$a += 5;
$b = ($c = 11) + 3;
echo "Nilai variabel a adalah =
$a"; echo "<BR>";
echo "Nilai variabel b adalah =
$b"; echo "<BR>";
echo "Nilai variabel c adalah = $c";
?>

29
Latihan 3. 1.3
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$a=10;
$b=3;
echo "\$a = $a
<BR>"; echo "\$b =
$b <BR>"; echo '$a
+ $b = ';
print $a+$b;
echo "<BR>";
echo '$a - $b
= '; print $a-
$b; echo
"<BR>"; echo
'$a * $b = ';
print $a*$b;
echo "<BR>";
echo '$a / $b
= '; print
$a/$b; echo
"<BR>";
echo '$a % $b
= '; print $a%
$b;
?>

Latihan 3.1.4
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$b = 4!=4;
$c = 3+7 == 10;
$a = ($b and $c);
echo "\$a=$a
<BR>";
$a = ($b or $c);
echo "\$a=$a <BR>";
$a = ($b xor $c);
echo "\$a=$a
<BR>";
$a = (!$b or $c);
30
echo "\$a=$a
<BR>";
$a = $b && $c;
echo "\$a=$a <BR>";
$a = $b || $c;
echo "\$a=$a <BR>";
?>

31
Latihan 3.1.5
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:
<?
$x = 4;
$a = ($x == 4);
echo "\$a = $a <BR>";
$b = ($x === "4");
echo "\$b = $b <BR>";
$c = ($x != 4);
echo "\$c = $c <BR>";
$d = ($x !== "4");
echo "\$d = $d <BR>";
$e = ($x < 5);
echo "\$e = $e <BR>";
$f = ($x > 5);
echo "\$f = $f <BR>";
$g = ($x <= 4);
echo "\$g = $g <BR>";
$h = ($x >= 5);
echo "\$h = $h <BR>";
?>

B. Struktur Kontrol
Latihan 3.2.1
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
$a = 5;
$b = 7;
if ($a < $b)
{
echo "\$a lebih kecil daripada \$b";
}
?>

32
Latihan 3.2.2
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
$a = 5;
$b = 3;
echo "\$a = $a <BR>";
echo "\$b = $b <BR>";
if ($a < $b)
{
echo '$a lebih kecil daripada $b';
}
else
{
echo '$a lebih besar daripada $b';
}
?>

Latihan 3.2.3
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<?
$a = 5;
$b = 7;
echo "\$a = $a <BR>";
echo "\$b = $b <BR>";
if ($a == $b):
echo '$s sama dengan $b';
elseif ($a > $b):
echo '$a lebih besar daripada $b';
else:
echo '$a lebih kecil daripada $b';
endif;
?>

33
Latihan 3.2.4
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
$a = 5;
switch ($a) {
case 0:
echo '$a sama dengan 0';
break;
case 1:
echo '$a sama dengan 1';
break;
case 2:
echo '$a sama dengan 2';
break;
default:
echo '$a tidak sama dengan 0, 1, atau 2';
}
?>

Latihan 3.2.5
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
echo "<H3> Cara 1 </H3>";
$i = 1;
while ($i <= 10)
{
print $i++;
}
echo "<BR>";
echo "<H3> Cara 2 </H3>";
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
?>

34
Latihan 3.2.6
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
$i = 2;
do
{
echo "\$i = $i <BR>";
$i++;
}
while ($i < 5);
?>

Latihan 3.2.7
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<?
for ($i=1;$i<=10;$i++) {
print $i;
}
?>

Latihan 3.2.8
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:
<?
for ($i = 1; $i <= 10; $i++)
{ if ($i == 6) {
break;
}
echo "\$i = $i <BR>";
}
?>

Latihan 3.2.9
Berikut ini adalah contoh paragraph pada PHP.
Buka Notepad kemudian ketikkan teks di bawah
ini:

<?
for ($i = 1;$i <= 10;$i++)
{ if (!($i%2)) {
continue;
}
echo "\$i = $i <BR>";
35
}
?>

36
C. Database Component(Array, Function)

Latihan 3.3.1.
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$anak[0] = "Faruq";
$anak[1] = "Alya";
$anak[2] = "Zahro";
echo "Isi array \$anak[0] adalah
$anak[0]"; echo "<br>";
echo "Isi array \$anak[1] adalah
$anak[1]"; echo "<br>";
echo "Isi array \$anak[2] adalah
$anak[2]"; echo "<br>";
?>

Latihan 3.3.2
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$nama[] = "Muhammad";
$nama[] = "Faruq";
$nama[] =
"Zakiuddin"; echo
"Hallo";
echo "Isi array \$anak[0] adalah
$nama[0]"; echo "<br>";
echo "Isi array \$anak[1] adalah
$nama[1]"; echo "<br>";
echo "Isi array \$anak[2] adalah
$nama[2]"; echo "<br>";
?>
Latihan 3.3.3
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$anak[0] = "Faruq";
$anak[1] = "Alya";
$anak[2] = "Zahro";
foreach ($anak as
37
$value) { echo "Nama
anak : $value"; echo
"<br>";
}
?>

38
Latihan 3.3.4
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$telpon["Farid"] = "5982345";
$telpon["Fikri"] = "7782345";
$telpon["Nida"] = "4562345";
echo "Telpon Farid : ".$telpon
['Farid']; echo "<br>";
echo "Telpon Fikri : ".$telpon
['Fikri']; echo "<br>";
echo "Telpon Nida : ".$telpon
['Nida']; echo "<br>";
?>

Latihan 3.3.5
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$a = pow(2,10); //Fungsi perpangkatan
$b = sqrt(100); //Fungsi akar
$c = ceil(4.25); //Pembulatan keatas
$d = floor(4.25); //Pembulatan kebawah

echo "2 pangkat 10 = $a


<br>"; echo "akar 100 =
$b <br>"; echo "ceil(4.25)
= $c <br>"; echo
"floor(4.25) = $d <br>";
?>

Latihan 3.3.6
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$skr = date("d/m/Y");
echo "Sekarang adalah $skr <br>";
$waktu = date("h:i:s A"); //A menunjukkan AM
atau PM echo "Jam menunjukkan pukul :
$waktu";
?>
39
Latihan 3.3.7
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
$str = "Belajar PHP ternyata
Menyenangkan"; echo
strtolower(s$tr);//Ubah huruf ke kecil
semua echo "<br>";
echo strtoupper($str);//Ubah huruf ke besar
semua echo "<br>";
echo str_replace("Menyenangkan","mudah lho",$str);//Mengganti string
?>

Latihan 3.3.8
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
function psgpjg ($pjg, $lbr) {
$luas = $pjg *
$lbr; echo
"$luas <br>";
}

$bil1 = 5;
$bil2 = 3;

echo "Luas persegi panjang dengan pjg 5 dan lebar 3 =";


psgpjg($bil1,$bil2);
?>

Latihan 3.3.9
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
function psgpjg ($pjg, $lbr) {
$luas = $pjg *
$lbr; return
$luas;
}

$bil1 = 5;
40
$bil2 = 3;

echo "Luas persegi panjang dengan pjg 5 dan lebar 3


="; echo psgpjg($bil1,$bil2);
?>

41
Latihan 3.3.10
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

<?
function garis() {
echo "<hr>";
}
echo "Ini contoh fungsi yang tanpa parameter
<br>"; garis();
echo "Lihat perbedaan dengan fungsi yang dengan parameter
<br>"; garis();
?>

Latihan 3.3.11
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

Simpan file berikut dengan nama : contoh_require.php

<?php
$a="Saya sedang belajar
PHP"; function
tulistebal($teks)
{
echo "<b>$teks</b>";
}
?>

Latihan 3.3.12
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

Buat file untuk memanggil file php diatas.

<?php
require("contoh_require.php"); //Akan dipanggil 1x saja
//dalam file php ini
tulistebal("Ini adalah tulisan
tebal"); echo "<br>";
echo $a; //Mengambil nilai dari require
?>
42
Latihan 3.3.13
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

Simpan file berikut dengan nama : contoh_include.php

<?php
echo(" <br>");
echo("Lab. Komunikasi Digital PENS ITS
<br>"); echo(" <br>");
echo("<br>");
?>

Latihan 3.3.14
Berikut ini adalah contoh paragraph pada
PHP. Buka Notepad kemudian ketikkan teks
di bawah ini:

Buat file untuk memanggil file php diatas.


<?php
for ($b=1; $b<5; $b++)
{
include("contoh_include.php");
//Include bisa dipanggil lbh dari 1x
}
?>

43
DAFTAR PUSTAKA

Abdulloh, R. (2018). 7 in 1 Pemrograman web untuk pemula. Elex Media Komputindo.


Marisa, F. (2017). Web Programming (Client Side and Server Side). Deepublish.
Mustika, N., & Web, P. (2015). HTML (Hypertext Markup Language).
Rerung, R. R. (2018). Pemrograman Web Dasar. Deepublish.
Setiawan, D. (2017). Buku sakti pemrograman web: html, css, php, mysql & javascript. Anak
Hebat Indonesia.
Solichin, A. (2016). Pemrograman web dengan PHP dan MySQL. Penerbit Budi Luhur.

36

Anda mungkin juga menyukai