Anda di halaman 1dari 55

BAB I

HTML (Hyper Text Markup Language)

I.1 Pengenalan HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks
murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen
HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat
web page, denghan HTML editor atau editor text biasa (misal : notepad). Untuk latihan buku ini
kita menggunakan Macromedia Dreamweaver.

I.2 Elemen HTML yang diperlukan

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag
<html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemn Head berisi
informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di
browser.
Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section
body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

<html>
<head>
<title>Judul Disini </title>
</head>
<body>
Bagian isi disini
</body>
</html>

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di
akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam
satu dokumen hanya ada satu elemen html.
Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir.
Section ini beiris informasi tentang dokumen HTML, mislnya informasi judul html yang ditandai

Halaman 1
dengan tag <title> dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body>
dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan
ditampilakn pada browser.

contoh1.html

<html>
<head>
<title>Belajar Web Design</title>
</head>
<body>
Semua data berupa teks, gambar, suara ditampilkan disini
</body>
</html>

Gambar 2.1. Contoh hasil di browser

a. Penjelasan Contoh
Tag pertama pada dokumen html anda adalah <html>,. Tag ini memberi tahu bahwa ini
adalah awal dari dokumen HTML. Tag terakhir pada dokumen anda adalah </html>. Tag ini
memberi tahu browser bahwa ini adalah akhir dari dokuemn HTML. Teks antara <head> dan
</head> adalah informasi header. Informasi header tidak ditampilkan pada window browser.
Hanya teks yang berada diantara <body> dan </body> yang akan ditampilakan pada browser.
Teks diantara <title> dan </title> adalah judul dokumen yang akan ditampilakn pada window
caption.

Halaman 2
Latihan judul.html

I.3 <BR>

Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan diabaikan.

Contoh2.html

<html>
<head>
<title>Break</title>
</head>
<body>
Aku ada di baris 1 <br>
Aku ada di baris 2
</body>
</html>

Latihan Baris.html

Halaman 3
I.4 <P></P>
Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti menggunakan 2 kali <br>.
Atribut :
● Align

Contoh3.html

<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p align=”left”> Rata Kiri</p>
<p align=”right”> Rata Kanan</p>
<p align=”center”> Rata Tengah</p>
<p align=”justify”> Rata Kiri dan Kanan</p>
</body>
</html>

Latihan Paragrap.html

Halaman 4
<html>
<head>
<title> Perataan Text </title>
</head>
<body>

Halaman 5
<p align="left"> Ini Adalah teks yang secara default akan dianggap
sebagai rata kiri.
Mengapa demikian? Karena HTML akan menganggap nilai Atribut Align yang
tidak dituliskan secara eksplisit dengan nilai LEFT.</p>

<P align="right">Ini adalah teks yang diatur dengan format rata kanan.
Teks seperti ini jarang digunakan atau jarang dijumpai dalam dokumen-
dokumen HTML.</P>

<p align="justify"> Ini adalah teks yang diatur dengan format rata
kiri - kanan, yaitu dengan memasukkan nilai Justify pada atribut
ALIGN. Teks dengan format seperti ini cocok sekali digunakan untuk
dokumen HTML yang sifatnya formal. </p>

<p align="center"> Ini adalah teks yang diatur dengan format CENTER.
Dengan memilih format ini, teks akan berada tepat di tengah-tengah
layar browser (secara horisontal). </p>

</body>
</html>

I.5 <HR>
Horizontal Line (Garis Horizontal)
Atribut :
● Width
● Align

Contoh4.html

<html>
<head>
<title>Horizontal Line</title>
</head>
<body>
Atas
<hr>
Bawah
</body>

Halaman 6
</html>

Latihan Horizontal.html

I.6 <FONT></FONT>
Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf.
Atribut :
● Size
● Color
● Face
Contoh4.html

<html>
<head>
<title>Font</title>
</head>
<body>
<font size=”1”> ukuran 1 </font><br>
<font size=”2”> ukuran 2 </font><br>
<font size=”3”> ukuran 3 </font><br>
<font size=”4”> ukuran 4 </font><br>
<font size=”5”> ukuran 5 </font><br>
<font size=”6”> ukuran 6 </font><br>
<font size=”7”> ukuran 7 </font>
</body>
</html>

Halaman 7
Contoh5.html

<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face=”Arial”> Arial </font><br>
<font face=”Tahoma”> Tahoma </font><br>
<font face=”Courier New”> Courier New </font>
</body>
</html>

Contoh6.html

<html>
<head>
<title>Font Face</title>
</head>
<body>
<font color=”blue”> Warna Biru </font><br>
<font color=”red”> Warna merah </font><br>
<font color =”#ff0000”> Warna merah juga </font>
</body>
</html>

Latihan font.html

Halaman 8
I.6 <H1></H1>..... <H6></H6>
Membuat Heading yg memberikan baris baru

Contoh7.html

<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
</body>
</html>

Latihan Heading.html

Halaman 9
I.7 <B></B>..... <STRONG></STRONG>
Membuat Huruf tebal

Contoh8.html

<html>
<head>
<title>Huruf Tebal</title>
</head>
<body>
Huruf Normal <br>
<b>Huruf tebal </b>
<strong> Huruf tebal Juga </strong>
</body>
</html>

I.8 <I></I>..... <EM></EM>


Membuat Huruf Miring

Contoh9.html

<html>
<head>

Halaman 10
<title>Huruf Miring</title>
</head>
<body>
Huruf Normal <br>
<i> Huruf Miring </i>
<em> Huruf Miring juga </em>
</body>
</html>

Latihan huruf_miring.html

I.9 <U></U>
Membuat Huruf dengan garis bawah

Contoh10.html

<html>
<head>
<title>Garis Bawah</title>
</head>
<body>
<u>Garis Bawah </u>
</body>
</html>

Halaman 11
Latihan garis_bawah.html

I.10 <IMG>
Menampilkan gambar
Atribut :
● Src (letak file gambar)
● Align (perataan gambar)
● Width (Lebar gambar dalam persen atau pixel)
● Height (Tinggi gambar dalam persen atau pixel)
● Alt (Keterangan Gambar)

Contoh11.html

<html>
<head>
<title> Gambar </title>
</head>
<body>
<img src=”computer.jpg” align=”left” alt=”Logo Pauline”>
</body>
</html>

Halaman 12
Latihan Gambar.html

TUGAS
Buatlah Surat Undangan tentang Pelatihan E-Learning di STMIK Mardira Indonesia

I.11 <TABLE> </TABLE>


Membuat Tabel
Atribut pada <table></table> :
● Border
● Align
● Width
● Height
● bgcolor

Atribut pada <tr></tr> :


● Align
● Bgcolor
● Width
● Height

Halaman 13
Atribut pada <td></td>
● Align
● Bgcolor
● Width
● height

Contoh12.html

<html>
<head>
<title> Tabel </title>
</head>
<body>
<table border=”1”
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</body>
</html>

Halaman 14
I.12 <A> </A>
Membuat Link
Atribut:
● href
● name

Contoh13.html

<html>
<head>
<title> Link </title>
</head>
<body>
<a href=”halaman2.html”> Halaman 2 </a> <br>
<a href=”halaman3.html”> Halaman 3 </a>
</body>
</html>

Contoh14.html

<html>
<head>
<title> Mail to </title>
</head>
<body>
<a href=”mailto:herypoenya22@gmail.com”> Kirim email ke Hery </a>
</body>
</html>

I.13 <DIV> </DIV>


Membuat blok paragrap dengan baris baru pada akhir paragrap (pengganti <p>)
Atribut:
● align

Contoh15.html

<html>
<head>
<title> DIV </title>
</head>

Halaman 15
<body>
<div align=”justify”>
LPK Pauline adalah lembaga pendidikan nonformal yang bernaung di
bawah Dinas Pendidikan. Lembaga kursus bertujuan mencetak tenaga
terampil dengan keahlian spesifik sesuai kebutuhan dunia kerja.
</div>
</body>
</html>
I.14 <OL> </OL>
Order List atau biasa dikenal dengan penomoran
Atribut:
● Type (jenis numbering), nilai: 1, A, a, I, i

Contoh16.html

<html>
<head>
<title> Order List </title>
</head>
<body>
<ol type=”I”>
<li> Urutan 1 </li>
<li> Urutan 2 </li>
<li> Urutan 3 </li>
</ol>
</body>
</html>

I.15 <UL> </UL>


Unorder List atau biasa dikenal dengan Bullet
Atribut:
● Type (jenis bullet), nilai: disc, square, circle

Contoh16.html

<html>
<head>
<title> Unorder List </title>
</head>
<body>
<ul type=”disc”>
<li> Urutan 1 </li>
<li> Urutan 2 </li>
<li> Urutan 3 </li>

Halaman 16
</ol>
</body>
</html>

Halaman 17
Latihan

I.15 <FRAMESET> </ FRAMESET >


Membagi satu halaman web menjadi beberapa halaman, halaman dibagi masih bisa dibagi lagi.

Frameset.html

<html>
<head>
<title> Frame Set </title>
</head>
<frameset cols=”25%”,”75%”>
<frame src=”halaman1.html”>
<frame src=”halaman2.html”>
</frameset>
<body>
</body>
</html>

Halaman1.html

<html>
<head>
<title> Halaman 1 </title>
</head>
<body>
Ini adalah Halaman 1
</body>
</html>

Halaman 18
Halaman2.html

<html>
<head>
<title> Halaman 2 </title>
</head>
<body>
Ini adalah Halaman 2
</body>
</html>

I.16 <FORM> </FORM>


Digunakan sebagai blok dari elemen-elemen form seperti textfield, textarea.
Atribut :
- Name ( Nama Form )
- Action ( File tujuan dimana form dikirim, digunakan pada server side )
- Method ( Metode pengiriman, digunakan pada server side yg mempunyai nilai Post
atau Get)

I.17 ELEMEN PADA FORM


Tag ini terletak di dalam blok tag form.
Atribut :
- Type ( Jenis input seperti text, checkox, radio, hidden, button, submit, reset, file,
image)
- Name ( Nama Elemen )
- Value (Nilai isian)

Contoh17.html

<html>
<head>
<title> Input Text </title>
</head>
<body>
<form>
Nama : <input type=”text” name=”nama”>
</form>
</body>
</html>

Halaman 19
Contoh18.html

<html>
<head>
<title> Input Textarea </title>
</head>
<body>
<form>
Alamat : <textarea name=”alamat” rows=”4” cols=”20”></textarea>
</form>
</body>
</html>

Contoh19.html

<html>
<head>
<title> Input Radio </title>
</head>
<body>
<form>
Laki-laki : <input type=”radio” name=”j_kelamin” value=”Laki”>
Perempuan : <input type=”radio” name=”j_kelamin” value=”Perempuan”>
</form>
</body>
</html>

Contoh20.html

<html>
<head>
<title> Input Checkbox </title>
</head>
<body>
<form>
Hobi : <br>
Sepakbola : <input type=”checkbox” name=”hobi” value=”sepakbola”>
Bulutangkis:<input type=”checkbox” name=”hobi” value=”bulutangkis”>
Volley : <input type=”checkbox” name=”hobi” value=”volley”>
</form>
</body>
</html>

Contoh21.html

<html>
<head>
<title> Select </title>
</head>

Halaman 20
<body>
<form>
Agama :
<select name=”agama”>
<option value=”Islam”>
<option value=”Kristen”>
<option value=”Hindu”>
<option value=”Budha”>
</select>
</form>
</body>
</html>

Contoh22.html

<html>
<head>
<title> Tombol </title>
</head>
<body>
<form>
<input type=”submit” value=”Submit”>
<input type=”reset” value=”Reset”>
</form>
</body>
</html>

Halaman 21
PENDAHULUAN PHP

Sebuah File PHP dapat terdiri dari teks, tag dan skrip HTML. Skrip dalam sebuah file
PHP akan di eksekusi di server.

Dasar-dasar yang sudah harus diketahui


Sebelum kita melanjutkan ke materi berikutnya, mahasiswa harus sudah mempelajari
tentang materi-materi berikut ini:
● HTML
● Pengetahuan tentang dasar-dasar algoritma dan pemrograman serta internet.

Pengertian PHP
● PHP merupakan singkatan dari PHP: Hypertext Preprocessor .
● PHP merupakan server-side scripting language, seperti ASP.
● Skrip PHP dieksekusi di server dan hasilnya dikirimkan ke client (browser).
● PHP mendukung berbagai jenis database (contoh : MySQL, Informix, Oracle,
Sybase, Solid, PostgreSQL, Generic ODBC, dll.)
● PHP merupakan perangkat lunak open source.
● PHP dapat di-download dan digunakan secara gratis.

Apakah file PHP itu?


● File PHP dapat terdiri dari teks, tag dan skrip HTML.
● File PHP akan dikirimkan ke browser sebagai plain HTML. 
● File PHP dapat berektensi ".php", ".php3", or ".phtml"

Apakah MySQL itu?


● MySQL merupakan server database yang ringkas.
● MySQL sangat ideal untuk digunakan sebagai aplikasi yang kecil dan menengah.
● MySQL mendukung bahasa SQL standard.

Halaman 22
● MySQL dapat dijalankan pada bermacam platforms.
● MySQL dapat di-download dan digunakan secara gratis.

PHP + MySQL
● PHP dikombinasikan dengan MySQL akan menghasilkan aplikasi yang cross-
platform (artinya kita dapat mengembangkan aplikasi di Windows dan dijalankan di
server Unix).

Mengapa PHP?
● PHP dapat berjalan pada bermacam platforms (Windows, Linux, Unix, dll.).
● PHP kompatibel dengan hampir semua server web yang ada (Apache, IIS, etc.).
● PHP dapat di-download secara gratis dari situs resminya: http://www.php.net/
● PHP mudah dipelajari dan berjalan secara efisien di server web.

Bagaimana cara memulai PHP


● Install server Apache pada Windows atau Linux.
● Install PHP pada Windows atau Linux.
● Install MySQL pada Windows atau Linux.

CARA MENGINSTALL PHP:


● Beberapa paket PHP (server, database mySQL dan modul PHP) dapat di download
secara gratis (www.php.net; www.apache.com danwww.mysql.com)
● Beberapa paket terpadu antara lain XAMPP dan WAMP
● Berikut ini adalah cara mengintall XAMPP (berikut ini adalah logo (icon) XAMPP

Halaman 23
CARA MENJALANKAN :

● Setelah paket PHP XAMPP (atau yang lain) diinstall maka server (apache)
diaktifkan, database (mySql) diaktifkan
● Konfigurasi program adalah berada pada C:\Program Files\XAMPP
● Kode PHP kita letakan pada folderC:\ProgramFiles\xampp\htdocs
● Program yang dieksekusi dengan browser adalah pada alamat :
http://localhost/namafile.php

Contoh:
❖ Buat file coba.php dengan isi kode seperti dalam kotak berikut :
⮚ Simpan dalam folder c:/program files/xampp/htdocs
⮚ Dalam keadaan server apache siap jalankanlah melalui browser dengan menulis
alamat :http://localhost/coba.php

Contoh Siklus Penggunaan Web Programming

Halaman 24
PHP SYNTAX

Kita tidak dapat melihat source code PHP pada browser - kita hanya akan melihat
output dari file PHP yaitu file HTML. Hal ini dikarenakan skrip PHP dieksekusi di server
sebelum hasilnya dikirimkan ke browser.

Syntax dasar PHP


Skrip PHP selalu ditulis pada pasangan tag <?php dan ?>. sebuah blok skrip PHP
dapat diletakan dimana saja pada file HTML.

Skrip PHP dapat juga ditulis pada pasangan tag <?dan ?>.

<?php

Script Program diisi disini

?>

Program3-1.php
<html>
<body>
<?php

//echo berfungsi untuk menampilkan nilai


echo "Selamat Belajar PHP";

//print berfungsi untuk menampilkan dan mengembalikan nilai True or False


Print "Selamat Belajar PHP";

//Perbedaan tanda (") dan tanda (') terdapat pada penggunaan variabelnya

?>
</body>
</html>

Halaman 25
Program 3.2

<html>
<head>
<title> Contoh Halaman PHP </title>
</head>
<body>
<font color="blue">Kode saya akan membuat halaman ini
menampilkan:</font>
<p>
<?php
print ("Anda berada di situs Prothelon!");
?>
</body>
</html>

Komentar pada PHP


dalam PHP, kita menggunakan // untuk komentar satu baris, dan pasangan /* dan */
komentar yang lebih dari satu baris

program3-2.php.
<html>
<body>
<?php
//Keterangan untuk satu baris

?>
</body>
</html>

program3-3.php.
<html>
<body>
<?php
/*Keterangan yang lebih dari satu baris
Komentar
Komentar
Komentar
*/
?>
</body>
</html>

Halaman 26
PENGGUNAAN VARIABEL

Variabel digunakan untuk menyimpan suatu nilai, seperti angka, string atau hasil dari
suatu fungsi, sehingga dapat digunakan berulangkali pada program.

Variabel di PHP
Semua variabel di PHP selalu diawali dengan symbol $. Variabel dapat terdiri dari
string, number, atau array.
Konvensi Penamaan Variabel
● Variabel harus diawali oleh huruf atau garis bawah “_”.
● Variabel hanya dapat terdiri dari angka, huruf dan garis bawah (a-Z, 0-9, and _ ).
● Nama variabel diawali dengan tanda $
● Variabel tidak boleh menggandung spasi. Jika variabel akan ditulis sebagai dua
kata, maka dapat menggunakan garis bawah untuk memisahkannya (contoh:
$my_string), atau menggunakan huruf kapital (contoh: $myString).
● Digunakan untuk menyimpan sebuah value, data atau informasi.
● Panjang tidak terbatas

Catatan.
Perintah-perintah PHP dapat disisipkan dibagian manapun dalam dokumen html

Program3-3.php.
<html>
<body>
<?php
$txt="Selamat Belajar PHP";
echo $txt;
?>
</body>
</html>

Terdapat 3 jenis variabel dalam PHP


1. Variabel Lokal
Variabel yang didefinisikan dalam sebuah fungsi.

Halaman 27
<html>
<head>
    <?
        function hitung()            //fungsi buatan sendiri untuk tes hitung
        {
            $a=1993;            //nilai awal
            echo "\$a = $a <br>";
            $a++;                //niali akhir berubah sebelum kembali
        }
    ?>
</head>
<body>
    <h1> Belajar PHP
    <br> Bersama Hastomo Network </h1>
    <h3> Variabel lokal : </h3>
    <?
        echo "Pemanggilan fungsi ke 1 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 2 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 3 ... <br>";
        hitung();
    ?>
</body>
</html>

Halaman 28
Dari tampilan tersebut dalam terlihat bahwa program tidak dapat memanggil perintah
pada fungsi sehingga pada saat menampilkan perintah dalam fungsi yang muncul
adalah angka tetap yaitu 1993.

2. Variabel Global
Variabel yang dapat dikenali dan digunakan oleh semua bagian script.

<html>
<head>
    <?
        function hitung()            //fungsi buatan sendiri untuk tes hitung
        {
            global $a;            //fungsi yang akan menggunakan variabel global
            echo "\$a = $a <br>";
            $a++;                //nilai akhir berubah sebelum kembali
        }
    ?>
</head>
<body>
    <h1> Belajar PHP
    <br> Bersama Hastomo Network </h1>
    <h3> Variabel global : </h3>
    <?
        $a=1993;
        echo "Pemanggilan fungsi ke 1 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 2 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 3 ... <br>";
        hitung();
?>
</body>
</html>

Dapat dilihat bahwa nilai yang tampilkan oleh fungsi sudah berubah hal ini dikarenakan
perintah tersebut dapat terbaca oleh tubuh program sehingga dapat dieksekusi.

3. Variabel Statis
Variabel yang memungkinkan untuk mempertahankan nilai terakhir dari sebuah
variabel lokal yang tetap memiliki nilai akhir.

Halaman 29
<html>
<head>
    <?
        function hitung()            //fungsi buatan sendiri untuk tes hitung
        {
            static $a=0;            //fungsi yang akan menggunakan variabel static
                                    //isi variabel tidak akan di reset
            echo "\$a = $a <br>";
            $a++;                    //niali akhir berubah sebelum kembali
        }
    ?>
</head>
<body>
    <h1> Belajar PHP
    <br> Bersama Hastomo Network </h1>
    <h3> Variabel global : </h3>
    <?
        $a=1993;
        echo "Pemanggilan fungsi ke 1 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 2 ... <br>";
        hitung();
        echo "Pemanggilan fungsi ke 3 ... <br>";
        hitung();
 
        echo "<br> Nilai \$a di bagian utama : $a";
    ?>
</body>
</html>

Dari tampilan tersebut sudah terlihat bahwa jika suatu variabel di setel sebagai variabel
statis maka dia hanya akanmengeksekusi dirinya sendiri dan tidak mempengaruhi
variabel lain.

Untuk menggabungkan dua atau lebih variabel, digunakan operator titik (.)

Program 3-3.1.php.
<?php
$txt1="Hello world!";
$txt2="What a nice day!";
echo $txt1 . " " . $txt2;

Halaman 30
?>

Program3-4.php.
<html>
<head>
<title>Menggunakan variabel</title>
<head>
<body>
<?php
$jurusan = "Teknik Informatika";
print("Jurusan : $jurusan <br>");
$jurusan = "Sistem Informasi";
print("Jurusan $jurusan <br>");
?>
</body>
</html>

Program 3-4.1.php.
<html>
<body>
<?php
//Berikut ini adalah inisiasi beberapa variabel (Keterangan)
$objek_wisata1=”Kuta”;
?>
Berikut ini Objek Wisata di Pulau Dewata

<?
Echo “$objek_wisata1”;
?>
</body>
</html>

Program 3-5.php.
<?php
// Berikut ini adalah inisiasi beberapa variabel
$objek_wisata1 = "Kuta";
$objek_wisata2= "Nusa Dua";
$objek_wisata3 = "Sanur";
$objek_wisata4= "Tanah Lot";
$objek_wisata5 = "Ubud";

Halaman 31
$objek_wisata6 = "Senggigi";
$objek_wisata7= "Rinjani";
$objek_wisata8 = "Gili Trawangan";
$objek_wisata9= "Banyumulek";
$objek_wisata10 = "Gili Air";
?>
<?php
// Objek Wisata di Pulau Bali.
echo " $objek_wisata1, $objek_wisata2, $objek_wisata3, $objek_wisata4,
$objek_wisata5";

?>

<?php
// Objek Wisata di Pulau Lombok.
echo " $objek_wisata6, $objek_wisata7, $objek_wisata8, $objek_wisata9,
$objek_wisata10";

?>

Program 3-6.php.
<?
$pulau1="Bali";
$pulau2="Lombok";
$objek_wisata1 = "Kuta";
$objek_wisata2= "Nusa Dua";
$objek_wisata3 = "Sanur";
$objek_wisata4= "Tanah Lot";
$objek_wisata5 = "Ubud";
$objek_wisata6 = "Senggigi";
$objek_wisata7= "Rinjani";
$objek_wisata8 = "Gili Trawangan";
$objek_wisata9= "Banyumulek";
$objek_wisata10 = "Gili Air";
?>

Buatlah Tabel dengan Dreamweaver yang memuat variabel diatas

Pulau Objek Wisata


Bali Kuta, Nusa Dua, Sanur, Tanah Lot, Ubud
Lombok Senggigi, Rinjani, Gili Trawangan, Banyumulek, Gili Air

Untuk memasukkan Variabel, gunakan :


Insert – PHP Object – Code Block – Ketikkan Echo “$namavariabel”;

Halaman 32
Program 3-7.php.
<?php
// inisiasi variable yang digunakan
// nama paket tur
$paket1= "Kuta";
$paket2 = "Sanur";
$paket3 = "Nusa Dua";
$paket4 = "Ubud";

// harga paket
$harga_paket1=20;
$harga_paket2=25;
$harga_paket3=25;
$harga_paket4=30;

$diskon= (10/100); //diskon 10 %


$diskon_paket1= $diskon*$harga_paket1;
$diskon_paket2= $diskon*$harga_paket2;
$diskon_paket3= $diskon*$harga_paket3;
$diskon_paket4= $diskon*$harga_paket4;

//harga promo=harga asli - harga promo


$harga_Promo1=$harga_paket1-$diskon_paket1;
$harga_Promo2=$harga_paket1-$diskon_paket2;
$harga_Promo3=$harga_paket3-$diskon_paket3;
$harga_Promo4=$harga_paket4-$diskon_paket4;

?>

Buatlah Tabelnya dan munculkan Variabelnya


Daftar Harga Paket Tur
Nama Paket Harga Paket Diskon Harga Promo

Halaman 33
TIPE DATA

PHP mengenal beberapa macam tipe data antara lain : integer, floating point, dan

string. Floating point lebih dikenal dengan nama double atau desimal. Penulisan string

selalu diawali dengan tanda petik ganda (“) atau tanda petik

tunggal (‘).

Contoh-contoh penulisan tipe data yaitu sebagai berikut :

Tipe Data Contoh Keterangan


Integer $jumlah = 10; Bilangan bulat
$nilai = -5;
Doble $skor = 90.00; Bilangan real
$bunga = 12.50;
String $kota = “Yogyakarta” Karakter, kalimat
$motto = “Nyaman”

OPERATOR PHP

Operator Aritmetika
Operator Keterangan Contoh Hasil
+ Penambahan x=2 4
x+2
- Pengurangan x=2 3
5-x
* Perkalian x=4 20
x*5
/ Pembagian 15/5 3
5/2 2.5
% Modulus (division remainder) 5%2 1
10%8 2
10%2 0
++ Increment x=5 x=6
x++
-- Decrement x=5 x=4
x--

Halaman 34
Operator Penugasan (Assignment Operators)
Operator Contoh Persamaannya
= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y

Operator Perbandingan (Comparison Operators)


Operator Keterangan Contoh
== sama dengan 5==8 returns false
!= tidak sama dengan 5!=8 returns true
> lebih besar dari 5>8 returns false
< kurang dari 5<8 returns true
>= lebih besar atau sama dengan 5>=8 returns false
<= kurang dari atau sama dengan 5<=8 returns true

Operator Logika (Logical Operators)


Operator Keterangan Contoh
&& and x=6
y=3
(x < 10 && y > 1) returns true
|| or x=6
y=3
(x==5 || y==5) returns false
! not x=6
y=3
!(x==y) returns true

Contoh Operator

<?php
$x=10;
echo $x;
echo "<br>";

$y=20;

Halaman 35
$y += 100;
echo $y;
echo "<br>";

$z=50;
$z -= 25;
echo $z;
echo "<br>";

$i=5;
$i *= 6;
echo $i;
echo "<br>";

$j=10;
$j /= 5;
echo $j;

Program5-1.php. (penjumlahan)

<?php
$var1=10;
$var2=20;
echo $var1 + $var2."<br>";
$Jum=$var1+$var2;
echo $Jum;
?>

Halaman 36
Halaman 37
Latihan

Buat program berikut :


4. Rumus Luas Segitiga ½ a.t dengan a=10 t =10, tentukan Luasnya ?
5. a2 + b2 =cdengan a=5 b=2, tentukan hasil c ?

Halaman 38
1. Penggunaan IF

Statement If-else dalam PHP digunakan untuk melakukan bermacam aksi


berdasarkanpada beragam kondisi pada program.
Statement Pemilihan (Conditional Statements)
● if...else statement digunakan jika kita akan mengeksekusi sebuah perintah jika
kondisi bernilai true dan jika kondisi lainnya bernilai false.
● elseif statementdigunakan bersama dengan if-else untuk mengeksekusi perintah
jika salah satu dari berbagai kondisi bernilai true.

Halaman 39
Halaman 40
Statement If...Else
Syntax
if (condition)
code to be executed if condition is true;
else
code to be executed if condition is false;

Contoh 1.php
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Selamat Menikmati Liburan Panjangnya";
else
echo "Hari yang menyenangkan!";
?>
</body>
</html>

Statemen ElseIf
Syntax
if (condition)
code to be executed if condition is true;
elseif (condition)
code to be executed if condition is true;
else
code to be executed if condition is false;

Halaman 41
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
echo "Selamat Menikmati Libur Panjang!";
elseif ($d=="Sun")
echo "Hari yang sangat menyenangkan!";
else
echo " Hari yang kurang menyenangkan !";
?>
</body>
</html>

Contoh 2.php
<?php
$propinsi = "Bali";

if($propinsi == "Bali")
{
$ibukota = "Denpasar";
}
elseif ($propinsi == "DIY")
{
$ibukota = "Jogjakarta";
}
elseif ($propinsi == "Jawa_timur")
{
$ibukota = "Surabaya";
}
elseif ($propinsi == "Papua")
{
$ibukota = "Jayapura";
}
elseif ($propinsi == "NTB")
{
$ibukota = "Mataram";
}
else
{
$ibukota = "Belum ada di daftar";

Halaman 42
}
?>

Halaman 43
2. Penggunaan Switch

Switch digunakan untuk melakukan suatu aksi dari beberapa aksi yang
berbeda berdasarkan pada satu atau lebih kondisi yang berbeda.

Syntax
switch (expression)
{
case label1:
code to be executed if expression = label1;
break;
case label2:
code to be executed if expression = label2;
break;
default:
code to be executed
if expression is different
from both label1 and label2;
}
<?php
$propinsi="DIY";

switch ($propinsi)
{
// kondisi pertama
case "Bali":
$ibukota = "Denpasar";
break;
Ibukota propinsi <? echo $propinsi; ?>adalah <? echo $ibukota; ?>
// kondisi kedua
case "DIY":
$ibukota = "Jogjakarta";
break;

// kondisi ketiga
case "Jawa_timur":
$ibukota = "Surabaya";
break;

// kondisi keempat
case "NTB":
$ibukota = "Mataram";
break;

Halaman 44
// kondisi kelima
case "Papua":
$ibukota = "Jayapura";
break;

// jika selain kondisi yang di atas


default:
$ibukota = "Tidak Ada Propinsi dimaksud";
break;

}
?>

3. Penggunaan For

Contoh 1
<?php
for ($i = 1; $i <= 10; $i++) {
echo $i;
}
?>

Contoh 2
<html>
<body>
<table border=1>
<?php
// Membuat tabel 5 kolom x 4 Baris
for ($baris=1; $baris<=4; $baris++)
{
// perulangan pertama untuk baris
?>

<tr>

<?php

for ($kolom=1; $kolom<=5; $kolom++)


{
// perulangan kedua untuk kolom
?>

Halaman 45
<td>
<?php
echo "$baris,$kolom";
?>
</td>

<?php
}
?>

</tr>

<?php
}
?>
</body>
</html>

4. Penggunaan While
<?
//while ( kondisi )
//{
//lakukan hal ini!;
//}
$tahun=2002;
$tahun_sekarang=2007;

while ( $tahun <= $tahun_sekarang)


{
echo "tahun : $tahun";
echo "<br>";
$tahun++;
}
?>

ARRAY

Array adalah suatu koleksi nilai yang saling berkaitan.Anda telah mengenal arti variable,
yaitu suatu pengenal yang dapat menyimpan sebuah nilai. Array, fungsinya sama seperti
variabel, hanya saja nilai yang ditampung di dalamnya bisa banyak, tidak hanya satu.

Halaman 46
Untuk membuat array, anda hanya perlu memasukkan nilai ke setiap elemennya. Sebagai
contoh, jika ada ingin membuat array dengan nama $mobil, maka anda dapat menulis kode
berikut:

101 88 100 90 70
$A[0] $A[1] $A[2] $A[3] $A[4]

Contoh :
<?php
$mobil[0] = “Toyota”;
$mobil[1] = “Honda”;
$mobil[2] = “Suzuki”;
$mobil[3] = “Daihatsu”;
$mobil[4] = “Chevrolet”;
$mobil[5] = “Mitsubishi”;

Echo $mobil[0].”<br/>”;
Echo $mobil[1].”<br/>”;
Echo $mobil[2].”<br/>”;
Echo $mobil[3].”<br/>”;
Echo $mobil[4].”<br/>”;
Echo $mobil[5].”<br/>”;

?>

Halaman 47
Tugas:
1. Buatlah 3 kondisi air dengan variabel suhu, jika suhu <0, maka air dalam kondisi
beku, jika suhu <100, maka air dalam kondisi cair dan jika suhu >100, maka air
dalam kondisi gas
2. Buatlah tabel 10 baris dengan menggunakan PHP dan perulangan !
3. Dari tabel diatas, buatlah setiap baris label ganjil berlatar biru, dan setiap baris
genap berlatar merah
4. Buatlah perulangan berikut :
Anak ayam 10 mati 1 tinggal 9
Anak ayam 10 mati 2 tinggal 8
......
Anak ayam 10 mati 9 tinggal 1

Halaman 48
BAB III
JAVASCRIPT

III.1 Pengenalan Javascript


Javasript Adalah bahasa pemrograman sederhana yang dispesifikasikan
untuk memberikan aksi secara dinamis pada halaman web. Kode javascript
memiliki lojik sebagaimana bahasa pemrograman lainnya seperti C atau Java
bahkan dapat mengadopsi konsep pemrograman berorientasi obyek. Seperti halnya
pada CSS, kode java script dapat dituliskan langsung pada
halaman web ataupun direferensikan dari file link diluar file halaman web.
Contoh :
<html>
<head>
<title>Pengenalan Javascript</title>
<script type="text/javascript">
alert("SELAMAT BELAJAR JAVASCRIPT");
</script>
</head>
<body>
</body>
</html>

Contoh2 :
<html>
<head>
<title>Pengunjung Tidak bisa mengcopy halaman web ini</title>
</head>
<body oncontextmenu="return false;">
<p>Text ini tidak bisa di copy </p>
</body>
</html>

Halaman 49
Contoh 3:
<html>
<head>
<title>Contoh Animasi Berjalan</title>
</head>
<body >
<marquee onmouseover="this.stop()" onmouseout="this.start()"
behavior="scroll" direction="left" bgcolor="#0000FF"><img src="
dereded.gif" width="100" height="100"></marquee>
</body>
</html>

III.2 Penulisan dengan TAG

Contoh :
<html>
<head>
<title>Penulisan dengan TAG</title>
</head>
<body>
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
<!--
document.write('Ini Penulisan TAG');
//-->
</SCRIPT>
</body>
</html>

III.3 Tipe Data

Halaman 50
Tipe-tipe data pada javascript yaitu string, number, boolean, null, object dan
function.

III.4 VARIABEL
Dengan variabel kita dapat menyimpan informasi pada memori dan dapat kita
pergunakan berkali-kali. Untuk membuat variabel ketik awalan var atau bisa juga
langsung dengan nama variabel tersebut.

Contoh :
Var namaku=”hery”
Atau
Namaku=”hery”

Contoh :
<html>
<head>
<title>Variabel</title>
</head>
<body>
<SCRIPT LANGUAGE="Javascript" type="text/javascript">
<!--
var
namaku="hery" ;//string
document.write(namaku+"<br>");
usiaku=27;//numbers
document.write(usiaku+"<br>");
//-->
</SCRIPT>
</body>
</html>

Halaman 51
III.5 Operator, IF dan Perulangan
Operator pada javascript mirip dengan operator pada php, lihat pada bagian php
untuk mempelajari operator aritmatika, perbandingan dan logika. Begitu juga dengan
sintak if dan perulangan.

Contoh Operator Aritmatika:


<html>
<head>
<title> Operator Matematika </title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
var
a=5;
b=3;
document.write(a+b);//hasil 8
document.write("<br>");
document.write(a-b);//hasil 2
document.write("<br>");
document.write(a*b);//hasil 15
document.write("<br>");
document.write(a%b);//hasil 2
document.write("<br>");
//-->
</script>
</body>
</html>

Contoh Penggunaan IF:


<html>

Halaman 52
<head>
<title> Penggunaan IF</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
x=10;
y=20;
if(x==y)
document.write(x+”sama dengan ”+y);
else
document.write(x+”tidak sama dengan ”+y);
//-->
</script>
</body>
</html>

Contoh Perulangan For:


<html>
<head>
<title> Perulangan For </title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
For(x=1; x<=10;x++)
{
document.write(x+””);
}
//-->
</script>
</body>

Halaman 53
</html>

Contoh Penulisan Function:


<html>
<head>
<title> Penulisan Fungsi</title>
<script language="javascript" type="text/javascript">
<!--
Function tulis()
{
document.write(”Saya ditulis dari sebuah function”);
}
//-->
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
tulis()
//-->
</SCRIPT>
</body>
</html>

Halaman 54
Halaman 55

Anda mungkin juga menyukai