Modul Pemrograman Web I

PEMROGRAMAN WEB I
Tim Penyusun:
Husnul Khair, M.Kom
Siswan Syahputra, M.Kom
STMIK Kaputama
Binjai
2021
Pengenalan Dasar Web

Materi Pembahasan :
1. Internet
2. WWW
3. Protokol
4. HTTP (Hypertext Transfer Protocol)
5. URL (Uniform Resource Locator)
6. Protokol Transfer
7. DNS (Domain Name System)
8. Homepage
9. Web Browser
10. Web Server
11. Web Programming
Tujuan Pembelajaran :
 Mahasiswa mampu memahami perkembangan teknologi internet dan website
Pemrograman Web 1 | Husnul Khair. M.Kom

A. Internet
Internet (interconnection-network) adalah seluruh jaringan

komputer yang saling terhubung menggunakan standar sistem
global Transmission Control/Internet Protocol Suite (TCP/IP)
sebagai protokol pertukaran paket (packet switching
communication protocol) untuk melayani miliaran pengguna di
seluruh dunia. Rangkaian internet yang terbesar dinamakan
Internet. Cara menghubungkan rangkaian dengan kaidah ini dinamakan internetworking
(“antar jaringan”).
B. World Wide Web (WWW)
WWW (World Wide Web) adalah suatu ruang informasi yang

dipakai oleh pengenal global yang disebut Pengidentifikasi Sumber
Seragam untuk mengenal pasti sumber daya berguna. WWW sering
dianggap sama dengan internet secara keseluruhan, walaupun
sebenarnya ia hanyalah bagian dari internet
C. HTTP (Hypertext Transfer Protocol)
Adalah protokol yang menentukan aturan yang perlu diikuti oleh

web browser dalam meminta dan mengambil suatu dokumen dan
oleh web server dalam menyediakan dokumen yang diminta web
browser. Protokol ini merupakan protokol standar yang digunakan
untuk mengakses dokumen HTML.
D. URL (Uniform Resource Locator)

1. Digunakan untuk menentukan lokasi informasi pada suatu web
server.
2. Dapat diibaratkan sebagai suatu alamat, yang terdiri dari:

a. Protokol yang digunakan oleh suatu browser untuk mengambil informasi
b. Nama komputer (server) dimana informasi tersebut berada
c. Jalur/path serta nama file dari suatu informasi
Format umum URL:
• Protokol_transfer://nama_host/path/nama_file
Contoh:
 http://kaputama.ac.id/profil /index.html
Keterangan:
 http  protokol yang digunakan
 www.kaputama.ac.id  nama host atau server komputer
 profil  jalur/path dari informasi yang dicari
 index.html  nama file
E. Protokol Transfer
Protokol transfer adalah protokol yang digunakan untuk pengiriman informasi di internet.
Beberapa protokol transfer:
a. HTTP  protokol standar untuk suatu dokumen web
b. FTP (File Transfer Protocol)  digunakan untuk mentransfer file dalam format text
atau binary dalam suatu server komputer diinternet.
c. News NNTP (Network News Transfer Protocol)  digunakan untuk mendistribusikan

berita di USENet. USENet adalah suatu sistem yang dirancang sebagai forum diskusi
dengan berdasarkan pada topik-topik yang disebut news-group.
d. Telnet  digunakan untuk login ke suatu server komputer.

F. DNS (Domain Name System)
DNS (Domain Name System) adalah suatu sistem penamaan standar komputer-komputer
di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet.
Merupakan suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer
yang terhubung ke internet.
G. Homepage
 Website (situs web)  merupakan alamat (URL) yang berfungsi sebagai tempat
penyimpanan data dan informasi dengan berdasarkan topik tertentu.
 Web Page (halaman web)  merupakan halaman khusus dari situs web tertentu yang
tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link
yang menghubungkan suatu informasi ke informasi lain baik itu dalam page yang
sama ataupun web page lain pada website yang berbeda.
 Home page  merupakan sarana dasar untuk memperkenalkan secara singkat tentang
apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau pribadi.
H. Server and Client
Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu:
1. Server  penyedia berbagai layanan termasuk web. Layanan web ditangani oleh
sebuah aplikasi bernama web server.
2. Client  bertugas mengakses informasi yang disediakan oleh server. Pada layanan
web, client dapat berupa web browser.

I. Web Browser
• Berjalan pada komputer user
• Merupakan tool untuk melakukan navigasi di web
• Menampilkan dokumen web
• Contoh-contoh:
 MS Internet Explorer
 Netscape Navigator/Communicator
 Opera
 Mozilla
 Conqueror
 Lynx
 Dll
J. Web Server
Server web adalah sebuah perangkat lunak server yang berfungsi menerima permintaan
HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali
hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML.
Contoh :
- Apache : server web antar-platform

- IIS (Microsoft Internet Information Service ) hanya dapat beroperasi di sistem
operasi Windows.
K. Web Programming
Web dapat dikategorikan menjadi dua, yaitu

1. Web Statis
Web yang menampilkan informasi-informasi yang sifatnya statis (tetap)
2. Web dinamis atau interaktif.
Web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya
dinamis. Sehingga untuk membuat web dinamis dibutuhkan kemampuan
pemrograman web.
Dua kategori web programming:
» Server Side Programming
» Client Side Programming
L. Server-Side Programming
Server Side Programming  web server melakukan parse dan eksekusi sehingga script
embedded dalam halaman web
Contoh: CGI/Perl, ASP, JSP, PHP, CFM
M. Client-Side Programming
Client Side Programming  web browser melakukan parse dan eksekusi sehingga script
embedded dalam halaman web
Contoh: JavaScript, HTML, VBScript


HTML (Format text, Image, Link)

Materi Pembahasan :
1. HTML (HyperText Markup Language)

2. Istilah – Istilah dalam HTML
3. Tag Utama dalam Struktur Dokumen HTML
4. Penggunaan Komentar
5. Elemen Body
6. Membuat Latar Belakang
7. Heading, Paragraf, Preformatted Text, Blockquote, Break, Font
8. Format Dokumen
9. Garis Horizontal
10. List/Daftar
11. Memuat Gambar
12. Hypertext Link
 Mahasiswa Mampu menggunakan tag HTML

A. HTML (HyperText Markup Language)
• Bahasa yang digunakan untuk menampilkan informasi pd halaman web.
• bahasa ini menggunakan tanda (markup) untuk menandai perintah-perintahnya
• menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam
suatu dokumen.
Software yang diperlukan:
• Text editor sederhana.
Contoh:
Windows: Notepad++
Linux: gEdit, mcedit
• Web browser untuk menampilkan dokumen web yang dibuat.
Contoh:
Windows: Internet Explorer, dan Firefox
Linux: Firefox dan Conqueror.
B. Istilah – Istilah dalam HTML

 Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan
tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).
<namatag> ..... </namatag>
 Element – Jenis-jenis dari tag. Element terdiri atas tiga bagian, yaitu tag pembuka, isi,
dan tag penutup.
Contoh :
<title>

Disini Judul Dokumen HTML
</title> 

 Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen
biasanya akan mempunyai banyak atribut.
C. Tag Utama dalam Struktur Dokumen HTML

1. <html>
2. <!– untuk menyatakan suatu dokumen HTML -->
3. <head>
4. 
5. </head>
6. <body>
7. 
Fungsi:
• Mendiskripsikan tujuan pengkodean tertentu dalam dokumen HTML
Contoh Penggunaan Komentar
1. <html>
2. <head>
3. 
4. <title>Pemrograman Web I</title>
5. </head>
6. 
10. <body>
11. 
12. Ini Web Pertama Saya Lo...
13. </body>
14. </html>
E. Elemen Body
1. <body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
2. ..............
3. </body>
 Attribute text memberikan warna pada teks,
 bgcolor memberikan warna pada latarbelakang dokumen HTML, - background
memberikan latarbelakang dokumen HTML dalam bentuk gambar
 link memberikan nilai warna untuk link,
 alink memberikan warna untuk link yang sedang aktif,
 vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute

background yang akan digunakan, akan tetapi jika nilai attribute background (gambar)
tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
F. Membuat Latar Belakang

1. Menggunakan latar belakang warna

<body text = #nnnnnn bgcolor=#nnnnnn> . . . </body>
Contoh:
1. <html>
2. <head>
3. <title> Penggunaan Latar Belakang Warna </title>
4. </head>
5. <body text="red" bgcolor="cyan">
6. Kami sedang mulai belajar Pemrograman Web Di STMIK KAPUTAMA
7. </body>
8. </html>
2. Menggunakan latar belakang gambar
<body background=“nama_file_gambar”> . . . </body>
Contoh:
1. <html>
2. <head>
3. <title> Penggunaan Latar Belakang Warna </title>
4. </head>
5. <body background="gambar/bg.jpg">
6. Kami sedang mulai belajar Pemrograman Web Di STMIK KAPUTAMA
7. </body>
8. </html>

G. Heading, Paragraf, Preformatted Text, Blockquote, Break, Font

1. Heading
Untuk judul atau sub judul dalam dokumen HTML
1. <h1 [align=”left”|”center”|”right”]> . . . </h1>

3. .
4. .
1. <html>
2. <head>
3. <title> Heading </title>
4. </head>
5. <body>
6. <h1 align="center"> Heading 1: STMIK KAPUTAMA </h1>
12. </body>
13. </html>

2. Paragraf
Paragraf yang bisa diatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
1. <html>
2. <head>
3. <title> Paragraf </title>
4. </head>
5. <body>
6. <h2 align="center"> STMIK KAPUTAMA </h2>
7. <p align="right">
8. Merupakan kampus ilmu komputer pertama di kota binjai
9. </p>
10. <p align="left">
11. Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA, Diploma 3 (D3)
dan Sarjan (S1)
12. </p>
13. </body>
14. </html>

3. Preformatted Text
Untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>
1. <html>
2. <head>
3. <title> Paragraf </title>
4. </head>
5. <body>
6. <pre>
7. STMIK KAPUTAMA
1. Merupakan kampus ilmu komputer pertama di kota binjai
8. Saat ini terdapat 2 jenjang pendidikan di STMIK KAPUTAMA,
1. Diploma 3 (D3) dan
2. Sarjan (S1)
9. </pre>
10. </body>
11. </html>

4. Blockquote
Untuk menulis kutipan teks:
<blockquote> . . . </ blockquote >
1. <HTML>
2. <HEAD>
3. <TITLE>Blockquote</TITLE>
4. </HEAD>
5. <BODY>
6. Ini berada di luar tag blockquote
7. <BLOCKQUOTE>
8. <P>Ini paragraf berada di dalam blockquote dan sedikit masuk kedalam.</P>
9. <P align="justify">Ini juga contoh paragraf yang sedikit masuk kedalam.
Dengan kalimat yang cukup panjang, kita lihat bahwa semua baris dalam paragraf
ini letaknya sedikit masuk ke dalam. Sama rata sama jauhnya.</P>
10. </BLOCKQUOTE>
11. <P>Nah, paragraf ini kembali normal, karena tag blockquote sudah berakhir atau
sudah ditutup di atas.<P>
12. </BODY>
13. </HTML>

5. Break
Untuk menulis teks pada baris berikutnya:
<br>
1. <html>
2. <head>
3. <title> Break </title>
4. </head>
5. <body>
6. Baris pertama
7. Baris kedua
8. Baris ketiga
9. Baris keempat
10. Baris kelima<br>
11. Baris pertama<br>
12. Baris kedua<br>
13. Baris ketiga<br>
14. Baris keempat<br>
15. Baris kelima
16. </body>
17. </html>

6. Font
Ukuran font
<font size=“n”> . . . </font>
Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
- Georgia, Times New Roman, Times, serif
- Verdana, Geneva, sans-serif
- Courier New, Courier, monospace
- Courier New, Courier, monospace
- Arial, Helvetica, sans-serif
- Tahoma, Geneva, sans-serif
- Trebuchet MS, Arial, Helvetica, sans-serif
- Arial Black, Gadget, sans-serif
- Times New Roman, Times, serif
- Palatino Linotype, Book Antiqua, Palatino, serif

- Lucida Sans Unicode, Lucida Grande, sans-serif
- MS Serif, New York, serif
- Lucida Console, Monaco, monospace
- Comic Sans MS, cursive
Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . . </font>
1. <html>
2. <head>
3. <title> Break </title>
4. </head>
5. <body>
6. <font size="12">Belajar Pemrograman Web Menyenangkan</font>
7. <font size="9" face="Arial Black, Gadget, sans-serif">Karena Bisa Membuat
Tampilan Web yang Keren</font>
8. <font size="10" face="Georgia, Times New Roman, Times, serif"
color="#0099CC">Dan warna tulisan nya bisa diatur</font>
9. </body>
10. </html>
H. Format Dokumen
Bold:
<b> . . .</b>
Italic:
<i> . . . </i>
Superscript:
<sup> . . .</sup>
Subscripted:

<sub> . . . </sub>
Struck trough:
<del> . . . </del>
1. <html>
2. <head>
3. <title> Format Dokumen </title>
4. </head>
5. <body>
6. <b>kalimat ini akan terlihat tebal</b><br>
7. <i>untuk membuat teks miring/italic gunakan tag i</i><br>
8. perhatikan teks berikut H<sub>2</sub>O<br>
9. perhatikan juga teks ini CO<sup>2</sup>
10. </body>
11. </html>
I. Garis Horizontal
Garis horisontal untuk memisahkan teks dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]> </hr>
1. <html>
2. <head>
3. <title>Garis Horizontal</title>
4. </head>
5. <body>
6. <font size="14" face="Georgia, Times New Roman, Times, serif">
7. <b>STMIK KAPUTAMA</b>
8. </font><br/>

9. SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

KAPUTAMA<br/>
10. Jln. Veteran No.4A-9A Binjai, 20714, Sumatera Utara, Telp. (061)8828840, Hp.
082366304242, Fax. 8875534
11. <hr align="left" size="2" width="800"> </hr>
12. </body>
13. </html>
J. List/Daftar
Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
1. <html>
2. <head>
3. <title>List/Daftar</title>
4. </head>
5. <body>
6. Program Pendidikan
7. <ul type="disc">
8. <li>Strata 1 (Sarjana)</li>
9. <li>Diploma 3 (Ahlimadya)</li>
10. </ul>
11. <hr />
12. Progam Studi
13. <ol type="1" start="1">
14. <li>Teknik Informatika</li>
15. <li>Sistem Informasi</li>
16. <li>Komputerisasi Akuntansi</li>
17. <li>Manajemen Informatika</li>
18. </ol>
19. </body>
20. </html>

K. Memuat Gambar
Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
1. <html>
2. <head>
3. <title>Insert Gambar</title>
4. </head>
5. <body>
6. Ini adalah logo STMIK KAPUTAMA<br />
7. <img src="images/Logo.jpg" height="150" width="150" align="top" />
8. </body>
9. </html>

L. Hypertext Link
Format:
<a href=”address” > . . . </a>
Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
Link File yang akan didownload
<a href=”nama_file” > . . . </a>
1. <html>
2. <head>
3. <title>Hypertext Link</title>
4. </head>
5. <body>
6. Untuk infomasi tentang STMIK KAPUTAMA dapat diakses melalui link berikut:
7. <a href="http://kaputama.ac.id/"> www.kaputama.ac.id</a>
8. </body>
9. </html>

HTML (Table, Form)

Materi Pembahasan :
1. Membuat Table Sederhana

2. Membuat Form
 Mahasiswa Mampu Membuat Table Sederhana

 Mahasiswa Mampu Menggunakan Form

A. Membuat Table Sederhana

Fungsi
• Menampilkan informasi secara terstruktur, ringkas dan mudah dibaca
• Mengatur tampilan homepage agar lebih menarik
Atribut Fungsi
Border Menentukan ukuran border/garis tabel
Width Menentukan lebar tabel
Height Menentukan tinggi tabel
Bgcolor Menentukan background color tabel
Menentukan gambar yang digunakan untuk
Background
background tabel
Untuk mengatur warna suatu sel dalam
Color
tabel
Align Mengatur bentuk perataan horizontal
Valign Mengatur bentuk perataan vertikal
Rowspan Menggabungkan beberapa baris
Colspan Menggabungkan beberapa kolom
Cellspacing dan Mengatur spasi antar sel dan spasi dalam
cellpadding sel
Tag yang dibutuhkan
• Membuat baris : <tr> (table row)
• Membuat kolom : <td> (table data)
1. <html>
2. <head>
3. <title>Belajar Membuat Table</title>
4. </head>
5. <body>
6. <table border=“1”>
7. <tr>
8. <td>Baris 1 Sel 1</td>
10. </tr>
11. <tr>


14. </tr>
15. </table>
16. </body>
17. </html>
1. Menambah Judul Tabel
Tag yang dibutuhkan
• Judul tabel : <caption>

• Judul baris/kolom : <th> (table header)
1. <html>
2. <head>
3. <title> Belajar Membuat Tabel </title>
4. </head>
5. <body>
6. <table border="1">
7. <caption align="top"><b> DAFTAR MAHASISWA </b></caption>
8. <tr>
9. <th>No</th>
10. <th>NPM</th>
11. <th>Nama</th>
12. </tr>
13. <tr>
14. <td>1</td>
15. <td>16451090</td>
16. <td>Samura Hayati</td>
17. </tr>
18. <tr>
19. <td>2</td>

20. <td>16451091</td>
21. <td>Dedi Subadiyo</td>
22. </tr>
23. </table>
24. </body>
25. </html>
2. Penggabungan Baris/Kolom
Atribut yang dibutuhkan
• Untuk menggabungkan beberapa kolom menjadi 1 : atribut colspan
• Untuk menggabungkan beberapa baris menjadi 1 : atribut rowspan
1. <html>
2. <head>
3. <title> Belajar Membuat Tabel </title>
4. </head>
5. <body>
6. <table border="1" align="center">
7. <caption align="top">
8. <b> DAFTAR NILAI MAHASISWA </b>
9. </caption>
10. <tr>
11. <th rowspan="2">No</th>
12. <th rowspan="2">NPM</th>
13. <th rowspan="2">Nama</th>
14. <th colspan="2">Nilai</th>
15. </tr>
16. <tr>
17. <th>UTS</th>
18. <th>UAS</th>

19. </tr>
20. <tr>
21. <td>1.</td>
22. <td>16451090</td>
23. <td>Samura Hayati</td>
24. <td>90</td>
25. <td>95</td>
26. </tr>
27. <tr>
28. <td>2.</td>
29. <td>16451091</td>
30. <td>Dedi Subadiyo</td>
31. <td>95</td>
32. <td>95</td>
33. </tr>
34. <tr>
35. </table>
36. </body>
37. </html>
B. Membuat Form
Fungsi Form adalah menerima informasi atau meminta umpan balik dari user dan
memproses informasi tersebut ke server
Standar penulisan
1. <form method=“post/get” action=“...”>

2. ......
3. </form>
Atribut Fungsi

Metode pengiriman data ke file tujuan (POST dan

Method
GET)
Aksi yang akan dilakukan jika user menekan tombol
Action
Submit
Name Memberikan nama tiap masukan
Value Memberikan nilai suatu masukan
Type Tipe form yang akan digunakan
• Metode POST dan GET memiliki kegunaan yang sama yaitu untuk mengirimkan value
variable ke halaman lain atau mengirimkan ke database
• Perbedaan Method GET ketika mengirimkan data akan menambahkan pada URL,
sedangkan method POST dikirim ke server dengan diincludekan pada sebuah
permintaan (body of request)
1. Textbox
Tag yang digunakan : <input>
Atribut Fungsi
Menentukan jenis field masukkan Text,
type=[“text”|”submit”|”password”]
submit, password”
Menentukan nama untuk field sehingga dapat
name
dirujuk nantinya
value Memberi nilai suatu input
Mengatur lebar field secara horizontal, berapa
size
huruf maksimal yang dapat ditampilkan
Menentukan jumlah maksimum huruf
maxlength
(karakter) yang dapat dimasukkan
2. Submit dan Reset

 Tombol submit digunakan ketika user mengisi form dan ingin mengirimkan ke
server
 Tombol reset digunakan ketika user ingin menghapus/mengkosongkan semua
masukkan yang ditulis dalam form
1. <html>

2. <head>
3. <title> Login System </title>
4. </head>
5. <body>
6. <b>Form Login: <b> <br>
7. <form method="post" action="home.html">
8. <table>
9. <tr>
10. <td>Username:</td>
11. <td><input type="text" name="username" size="20"></td>
12. </tr>
13. <tr>
14. <td>Password:</td>
15. <td><input type="password" name="password"
size="20"></td>
16. </tr>
17. </table>
18. <input type="submit" value="Login" name="login">
19. <input type="reset" value="Reset" name="reset">
20. </form>
21. </body>
22. </html>
3. Checkbox, Radio Button, Drop Down dan Text Area

 Fungsi checkbox adalah untuk memilih beberapa pilihan kepada user
 Fungsi radion button adalah untuk memberi (hanya) satu pilihan kepada user
 Fungsi Drop Down adalah memberikan menu pilihan kepada user (dengan cara
kerja sama sepertiradio button) yang hanya mengijinkan user untuk memilih 1
pilihan saja

 Fungsi Text Area adalah sebagai field masukkan untuk pengunjung (dapat
menerima lebih dari satu baris teks). Biasa digunakan sebagai kotak komentar.
1. <html>
2. <head>
3. <title> Formulir Pendaftaran </title>
4. </head>
5. <body>
6. <form method="post">
7. <h1>Formulir Pendaftaran</h1><hr />
8. <table>
9. <tr>
10. <td valign="top">Pilih Jenjang Pendidikan</td>
11. <td>
12. 
13. <input type="radio" name="jen_pend"
value="D3">Diploma 3<br />
14. <input type="radio" name="jen_pend"
value="S1">Strata 1
15. </td>
16. </tr>
17. <tr>
18. <td>Pilih Program Studi</td>
19. <td>
20. 
21. <select name="prodi">
22. <option value="TI">
23. Teknik Informatika
24. </option>
25. <option value="SI">
26. Sistem Informasi
27. </option>
28. <option value="KA">
29. Komputerisasi Akuntansi
30. </option>
31. <option value="MI">
32. Manajemen Informatika
33. </option>
34. </select>
35. </td>
36. </tr>
37. <tr>
38. <td valign="top">Pilih Hobby</td>
39. <td>
40. 
41. <input type="checkbox" name="hobby"
value="baca">Membaca<br />
value="raga">Olahraga<br />


value="nyanyi">Menyanyi<br />
value="nulis">Menulis<br />
value="dll">Dan lain-lain<br />
46. </td>
47. </tr>
48. <tr>
49. <td valign="top">Alasan memilih kaputama</td>
50. 
51. <td>
52. <textarea name="alasan"></textarea>
53. </td>
54. </tr>
55. <tr>
56. <td colspan="2" align="right">
57. <input type="submit" name="simpan"
value="Simpan">
58. <input type="reset" name="reset"
value="Reset">
59. </td>
60. </tr>
61. </table>
62. </form>
63. </body>
64. </html>

CSS (Cascading Style Sheet)

Materi Pembahasan :
1. CSS (Cascading Style Sheet)

2. Selector (HTML, Class, ID)
3. CSS Background Color
4. CSS Background Image
5. Layout
 Mahasiswa Mengenal Penggunaan CSS (Cascading Style Sheet)

 Mahasiswa Mampu Menggunakan Selector
 Mahasiswa Mampu Menggunakan CSS Background
 Mahasiswa Mampu Membuat Layout

A. Apa Itu CSS?

Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi lebih
menarik dan mudah dikelola.
CSS dapa dituliskan pada bagian <body> dan <head> suatu dokumen HTML atau
diletakkan disebuah dokumen eksternal.
Perintah-perintah CSS di dibatasi oleh tag <style> dan </style>
B. CSS Syntax
Aturan CSS mempunyai dua bagian utama : Selector dan Declaration.
Selector Declaration Declaration
h1 {color:blue; font-size:12px;}
Property Value Property Value
 Selector biasanya adalah HTML element yang ingin dibuat style-nya.

 Declaration merupakan isi dari property dan nilai dari CSS
 Pemberian nilai dari property digunakan tanda titik dua ( : ), akhir dari property
digunakan tanda smicolon ( ; ).
C. Cara Penggunaan
External Style Sheet
<link rel=“stylesheet” type=“text/css” href=“css_file.css”>
<link, merupakan tag pembuka diakhiri dengan tanda “>”

rel=“stylesheet”, menerangkan halaman ini akan dikenai efek sheet
type=“text/css”, file yang dipanggil berupa css
href=“css_file.css”, alamat dokumen stylesheet yang dipanggil

D. SPAN dan DIV

Tag <SPAN> dan <DIV> adalah tag yang sering dikombinasikan dengan selector class
Tag <SPAN> adalah “inline-tag” dalam HTML, berarti tidak ada pergantian baris (line
break) yang disisipkan sebelum atau setelah penulisannya
Tag <DIV> adalah “block tag” dalam HTML, berarti pergantian baris secara otomatis
disisipkan untuk memberikan jarak antara blok yang dibuat dengan teks atau blok lain
sebelum dan sesudahnya (seperti tag <p> atau <table>)
Tag <DIV> sering digunakan untuk implementasi layer karena layer merupakan blok-
blok informasi terpisah
Tag <DIV> merupakan pilihan yang tepat saat membuat layer pada halaman web
E. Selector
Selector adalah nama yang diberikan untuk setiap style berbeda yang dibuat. Di dalam
style didefinisikan bagaiman setiap selector akan bekerja (font, color dan lain-lain).
Kemudian di dalam bagian body halaman web, selector tersebut dipanggil untuk
mengaktifkan style yang telah di definisikan.
Jenis-jenis Selector:
 Selector HTML
 Selector Class
 Selector ID
1. Selector HTML
Selector HTML digunakan untuk mendifiniskan style yang berhubungan dengan tag
HTML, melakukan redefinisi tag normal HTML
Syntax:
SelectorHTML {Properti:Nilai;}

1. <html>
2. <head>
3. <title>Latihan CSS</title>
4. <style type="text/css">
5. h1{
6. font-family:Arial;
7. color:red;
8. text-align:center;
9. font-style:italic;
10. }
11. </style>
12. </head>
13. <body>
14. <h1>STMIK KAPUTAMA</h1>
15. </body>
16. </html>
2. Selector Class
Selector Class digunakan untuk mendefinisikan style yang dapat dipakai tanpa
melakukan redefinisi tag HTML
Syntax:
ClassSelector{Properti:Nilai;}
1. <html>
2. <head>
5. .header {
6. font-family:arial;
7. font-size:14px;
8. color:red

9. }
10. </style>
11. </head>
12. <body>
13. <b class="header">
14. STMIK KAPUTAMA
15. </b><br>
16. <i class="header">
KAPUTAMA
18. </i>
19. </body>
20. </html>
3. Selector ID
Selector ID digunakan untuk mendefinisikan style yang berhubungan dengan suatu
object memanfaatkan ID unik, biasa digunakan saat bekerja dengan layer
Syntax:
#IDSelector{Properti:Nilai;}
1. <html>
2. <head>
5. #layer1 {
6. position:absolute;
7. background-color:#8FBC8B;
8. left:100;
9. top:75;
10. padding:10px;
11. z-index:1
12. }

13. #layer2 {
14. position:absolute;
15. background-color:#2F4F4F;
16. color:#ffffff;
17. left:140;
18. top:125;
19. padding:10px;
20. z-index:2
21. }
22. </style>
23. </head>
24. <body>
25. <div id="layer1">
26. Ini adalah layer 1<br>Berada di z-index:1, left:100, top:75 dengan padding:
10px
27. </div>
28. <div id="layer2">
29. Ini adalah layer 1<br>Berada di z-index:2, left:140, top:125 dengan padding:
10px
30. </div>
31. </body>
32. </html>
Pengelompokkan Selector
Sebelum pengelompokan:
1. .headlines{
3. color:black;
4. background:yellow;
5. font-size:14pt;
6. }
7. .sublines {

9. color:black;
11. font-size:12pt;
12. }
13. .infotext {
15. color:black;
17. font-size:10pt;
18. }
Setelah pengelompokan:
1. .headlines, .sublines, .infotext {

3. color:black;
5. }
6. .headlines {
7. font-size:14pt;
8. }
9. .sublines {
10. font-size:12pt;
11. }
12. .infotext {
13. font-size: 10pt;
14. }
F. CSS Background Color
Properti background-color menentukan warna latar belakang suatu elemen. Warna latar
belakang halaman didefinisikan dalam pemilih body:
body{background-color:#56f710;}
Buatlah dokumen baru dengan nama style_color.css
1. body{
2. background-color:#56f710;
3. }
4. .title{
5. color:#c42304;
6. font-size:54px;
7. }
8. .sub-title{
9. color:#090909;
10. font-size:20px;
11. }
12. .des{
13. color:#090909;
14. font-size:16px;

15. }
Buatlah dokumen baru dengan nama index.html
1. <html>
2. <head>
3. <title>Membuat Background</title>
4. <link rel="stylesheet" type="text/css" href="style_color.css">
5. </head>
6. <body>
7. <div class="title">
8. STMIK KAPUTAMA
9. </div>
10. <div class="sub-title">
KAPUTAMA
12. </div>
13. <div class="des">
14. Alamat : Jln. Veteran No. 4A-9A Binjai, 20714, Sumatera Utara, Telp. 061-
8828840,
15. Website: www.kaputama.ac.id
16. </div>
17. </body>
18. </html>
G. CSS Background Image

Properti background-image menentukan gambar untuk digunakan sebagai latar
belakang suatu elemen. Format image yang didukung oleh css antara lain : JPEG, GIF
dan PNG. Secara default, gambar diulang sehingga mencakup seluruh elemen. Gambar
latar belakang untuk halaman bisa di set seperti berikut:

body{background-image:url(‘bg.jpeg’);}
Buatlah dokumen baru dengan nama style_img.css

1. body{
2. background-image:url('Images/bg.jpg');
3. }
4. .title{
5. color:#c42304;
6. font-size:54px;
7. }
8. .sub-title{
9. color:#090909;
10. font-size:20px;
11. }
12. .des{
13. color:#090909;
14. font-size:16px;
15. }
H. Background Repeat
background-repeat  mengulang gambar background, property: repeat, repeat-x,
repeat-y, no-repeat.
background-repeat: no-repeat;
background-attachment  menentukan apakah gambar latar belakang tetap scroll
dengan sisa halaman, property : scroll, fixed, inherit.
background-attachment:inherit;
background-position  mengatur posisi awal dari background image

background-position:center;
 Repeat
Melakukan pengulangan image, baik secara horizontal ataupun vertical. Dengan
nilai ini, maka halaman web akan terisi keseluruhan oleh background.
 Repeat-x
Melakukan pengulangan image dengan posisi horizontal
 Repeat-y
Melakukan pengulangan image dengan posisi vertikal atau lurus ke atas
 No-repeat
Tidak akan melakukan pengulangan pada image, image akan ditampilkan biasa
sesuai ukurannya
Buatlah dokumen baru dengan nama style_repeat.css
1. body{
2. background-image:url('Images/bg.jpg');
3. background-repeat:no-repeat;
4. background-attachment:inherit;
5. background-position:center;
6. }
7. .title{
8. color:#c42304;
9. font-size:54px;
10. }
11. .sub-title{
12. color:#090909;
13. font-size:20px;
14. }
15. .des{
16. color:#090909;
17. font-size:16px;
18. }

I. Layout
 Content
Elemen teks & halaman web pada container
 Padding
Area antara konten dan border
 Border
Antara padding dan margin
 Margin
Menentukan ruang kosong antara elemen dan unsur-unsur yang berdekatan
1. Float Property
 float : right

Menekan bidang keatas, maksud dari float right adalah menekan ke atas kanan
 float : left
Menekan bidang keatas, maksud dari float right adalah menekan ke atas kiri
 float : none
Nilai defaultnya, float none berarti tidak memiliki value
 float : inherit
Fungsi value ini adalah mengikuti nilai (value) bidang sebelumnya
Buatlah dokumen baru dengan nama style_float.css

1. h1 {
2. background-color:#cccccc;
3. padding:5px;
4. color: #000000;
5. }
6. p {
7. font-family:Arial,sans-serif;
8. text-align:justify;
9. }
10. #logo {
11. float:left;
12. width:100px;
13. margin: 5px 5px 5px 5px;
14. border: solid;
15. }
Buatlah dokumen baru dengan nama Latihan_float.html
1. <html>
2. <head>
3. <title>Latihan Float</title>
4. <link rel="stylesheet" type="text/css" href="style_float.css">
5. </head>
6. <body>
7. <h1>STMIK KAPUTAMA</h1>
8. <img id="logo" src="Images/logo.gif" />
9. <p>Cikal bakal berdirinya STMIK Kaputama yaitu melalui Pusat Pendidikan
Pelatihan Informatika Komputer dan Kewirausahaan (P3IK) Kaputama yang
merupakan sebuah lembaga pendidikan, didirikan pada tanggal 21 Maret 2002
oleh Bapak Parlindungan Purba, SH., MM., dan berada dibawah naungan
Yayasan Pendidikan Teknologi Informasi Mutiara. STMIK Kaputama
merupakan perguruan tinggi pertama dalam bidang informatika komputer di
Kota Binjai. Kaputama merupakan singkatan dari Karya Putra Utama.
Penyelenggaraan pendidikan STMIK Kaputama berdasarkan Surat Keputusan
Menteri Pendidikan Nasional Republik Indonesia No. 09/D/O/2003, tanggal

31 Januari 2003 untuk mengelola program pendidikan Diploma 3 (D3) dan

Strata 1 (S1) dengan jumlah program studi sebanyak 5 (lima) yaitu; Diploma
3: Manajemen Informatika, Komputerisasi Akuntansi dan Teknik Informatika,
Strata 1: Sistem Informasi dan Teknik Informatika.</p>
10. </body>
11. </html>
2. Layout Dua Kolom
Buatlah dokumen baru dengan nama style_layout.css
1. body{
2. background-color:#CCC;
3. }
4. .layout-left{
5. float:left;
6. background-color:#FF0;
7. width:500px;
8. height:500px;
9. margin-right:5px;
10. }
11. .layout-right{
12. float:left;
13. background-color:#0F3;
14. width:500px;
15. height:500px;
16. }
Buatlah dokumen baru dengan nama Latihan_layout.html
1. <html>
2. <head>

3. <title>Latihan Layout</title>
4. <link rel="stylesheet" type="text/css" href="style_layout.css">
5. </head>
6. <body>
7. <div class="layout-left">Ini layout kiri</div>
8. <div class="layout-right">Ini layout kanan</div>
9. </body>
10. </html>

CSS (Navigasi)
Materi Pembahasan :
1. Shadow
2. Navigasi Vertikal
3. Navigasi Horizontal
4. Navigasi Dropdown
 Mahasiswa Mengenal Penggunaan CSS (Navigasi)

 Mahasiswa Mampu Membuat Navigasi Vertikal
 Mahasiswa Mampu Membuat Navigasi Horizontal
 Mahasiswa Mampu Membuat Navigasi Dropdown

A. Shadow
1. .classshadow{
2. text-shadow: 1px 2px 3px blue;
3. }
 1px adalah tebal bayang secara horizontal, kekanan untuk nilai (+) dan kekiri untuk
nilai (-), misal -1px;
 2px adalah tebal bayangan secara vertikal, kebawah untuk nilai (+) dan keatas untuk
nilai (-), misal -2px;
 3px adalah tingkat keburaman, semakin tinggi nilainya maka semakin buram pula
bayanganya
 Blue adalah warana bayangan.
Bisa juga menambah value, misal:
1. text-shadow{
2. 1px 2px 3px blue,
3. 2px 3px 2px red;
4. }
Setiap value dipisahkan dengan , (koma)dan maksud dari kedua value ini adalah
menambah efek dengan dua value tersebut.
1. <html>
2. <head>
3. <title>Contoh Text Shadow</title>
4. <style>
5. body{
6. width:80%;
7. margin:30px auto;
8. }
9. p{
10. color:#888888;
11. font:bold 40px arial;
12. text-transform:uppercase;
13. }
14. .text-shadow1{
15. text-shadow:
16. 1px 2px 3px blue;
17. }
18. .text-shadow2{
19. text-shadow:
20. 1px 1px 0 #444444,
21. 2px 2px 0 #444444,
22. 3px 3px 0 #444444,

23. 4px 4px 0 #444444;

24. }
25. .text-shadow3{
26. text-shadow:
27. 1px 1px 0 red,
28. 2px 2px 0 pink,
29. 3px 3px 0 yellow,
30. 4px 4px 0 blue,
31. 5px 5px 0 green;
32. }
33. .text-shadow4{
34. text-shadow:
35. -1px -2px 2px black,
36. 1px 2px 2px black;
37. }
38. .text-shadow5{
39. text-shadow:
40. -1px -2px 0 black,
41. 1px 2px 20px black;
42. }
43. </style>
44. </head>
45. <body>
46. <p class='text-shadow1'>STMIK KAPUTAMA</p>
51. </body>
52. </html>
B. Navigasi
 Navigasi pada dasarnya adalah daftar link.

 Navigasi akan menggunakan tag <ul> dan <li>
Contoh:
1. <ul>
2. <li><a href=“home.html”>Home</li>
3. <li><a href=“profil.html”>Profile</li>
4. <li><a href=“info.html”>Info</li>
5. <li><a href=“contact.html”>Contact</li>
6. </ul>
1. Navigasi Vertikal
Buatlah dokumen baru dengan nama style_vertical.css kemudian simpan ke dalam
folder css
1. ul {
2. list-style-type: none;
3. margin: 0;
4. padding: 0;
5. width: 200px;
6. background-color: #f1f1f1;
7. }
8. li a {
9. display: block;
10. color: #000;
11. padding: 8px 16px;
12. text-decoration: none;
13. }
14. li a.active {
15. background-color: #4CAF50;
16. color: white;
17. }
18. li a:hover:not(.active) {
19. background-color: #555;
20. color: white;
21. }
Buatlah dokumen baru dengan nama navigasi_vertical.html
1. <html>
2. <head>
3. <title>Navigasi</title>
4. <link rel="stylesheet" type="text/css" href="css/style_vertical.css">
5. </head>
6. <body>
7. <ul>
8. <li><a class=“active” href="home.html">Home</li>

9. <li><a href="profil.html">Profile</li>
10. <li><a href="info.html">Info</li>
11. <li><a href="contact.html">Contact</li>
12. </ul>
13. </body>
14. </html>
2. Navigasi Horizontal
Buatlah dokumen baru dengan nama style_horizontal.css kemudian simpan kedalam
folder css
1. ul {
3. margin: 0;
4. padding: 0;
5. overflow: hidden;
7. }
8. li {
9. float: left;
10. }
11. li a {
12. display: block;
13. color: white;
14. text-align: center;


17. }
18. li a:hover:not(.active) {
20. }
21. .active {
22. background-color: #4CAF50;
23. }
Buatlah dokumen baru dengan nama navigasi_horizontal.html

1. <html>
2. <head>
3. <title>Navigasi</title>
4. <link rel="stylesheet" type="text/css" href="css/style_vertical.css">
5. </head>
6. <body>
7. <ul>
8. <li><a class=“active” href="home.html">Home</li>
9. <li><a href="profil.html">Profile</li>
10. <li><a href="info.html">Info</li>
11. <li><a href="contact.html">Contact</li>
12. </ul>
13. </body>
14. </html>
3. Navigasi Dropdown
Buatlah dokumen baru dengan nama style_dropdown.css kemudian simpan kedalam
folder css
1. ul {
3. margin: 0;
4. padding: 0;
5. overflow: hidden;

7. }
8. li {
9. float: left;
10. }
11. li a, .dropbtn {
12. display: inline-block;
13. color: white;
14. text-align: center;
17. }
18. li a:hover, .dropdown:hover .dropbtn {
19. background-color: red;
20. }
21. li.dropdown {
22. display: inline-block;
23. }
24. .dropdown-content {
25. display: none;
26. position: absolute;
27. background-color: #f9f9f9;
28. min-width: 160px;
29. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
30. z-index: 1;
31. }
32. .dropdown-content a {
33. color: black;
36. display: block;
37. text-align: left;
38. }
39. .dropdown-content a:hover {
40. background-color: #f1f1f1}
41. .dropdown:hover .dropdown-content {
42. display: block;
43. }
Buatlah dokumen baru dengan nama dropdown.html

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <link rel="stylesheet" type="text/css" href="css/style.css">
5. </head>
6. <body>
7. <ul>
8. <li><a href="#">Home</a></li>
9. <li><a href="#">Profile</a></li>

10. <li class="dropdown">

11. <a href="#" class="dropbtn">Menu 1</a>
12. <div class="dropdown-content">
13. <a href="#">Sub Menu 1</a>
16. </div>
17. </li>
18. <li class="dropdown">
19. <a href="#" class="dropbtn">Menu 2</a>
20. <div class="dropdown-content">
24. </div>
25. </li>
26. </ul>
27. <h3>Menu Dropdown di dalam Navigation Bar</h3>
28. <p>Arahkan kursor ke link "Dropdown" untuk melihat menu dropdown.</p>
29. </body>
30. </html>

JavaScript
Materi Pembahasan :
1. Pengenalan Javascript
2. Script Umum
3. Javascript Dalam HTML
4. Properti
5. Metode
6. Pemasukkan Data
7. Jendela Peringatan dan Konfirmasi
8. Variable
9. Mendeklarasikan Variable
10. Peletakan Variable (Lokal dan Global)
11. Konversi Tipe Data
12. Operator Aritmatika
13. Operator Perbandingan dan Logika
 Mahasiswa Mengenal Penggunaan Javascript

 Mahasiswa Mengetahui Penggunaan Properti, Metode dan Pemasukkan Data
 Mahasiswa Mampu Membuat Jendela Peringatan dan Jendela Konfirmasi
 Mahasiswa Memahami Penggunaan Variable
 Mahasiswa Mampu Melakukan Konversi Tipe Data
 Mahasiswa Mengetahu Penggunaan Operator

A. Pengenalan Javascript
JavaScript dikembangkan pertama kali pada tahun 1995 di Netscape Communications
dengan nama LiveScript. Hasil kolaborasi antar Netscape dan Sun (pengembang bahasa
pemrograman “Java”) memberikan nama baru “JavaScript” pada tanggal 4 desember 1995.
 JavaScript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses pada
sisi klien, sehingga kemampuan dokumen HTML menjadi lebih luas.
 JavaScript memungkinkan untuk mem-validasi masukkan-masukkan pada formulir
sebelum dikirim ke server
 JavaScript dapat mengimplementasi permainan intraktif
 JavaScript tidak memerlukan kompilator atau penerjemah khusus untuk
menjalankannya
 JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan
variable dan fungsi yang menggunakan huruf besar dan huruf kecil
 Seperti bahasa Java ataupun C, setiap instruksi dalam JavaScript diakhiri dengan
karakter titik koma( ; )
 Untuk menulis komentar dalam satu baris dapat menggunakan karakter dobel slash (
// )
 Untuk menulis komentar yang terdiri dari beberapa baris dapat menggunakan karakter
/* dan diakhiri */
1. Script Umum
1. <SCRIPT language=“Javascript”>
2. ..............
3. letakkan script anda disini
4. </SCRIPT>
2. Javascript dalam HTML

Menggunakan tag <SCRIPT>
Tag <SCRIPT> diletakkan diantara bagian kepala dari dokumen HTML, yaitu bagian
antara <HEAD> dan </HEAD>. Pemanggilan fungsi JavaScript (disebut juga event)
diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <BODY>
dan </BODY>
Contoh :

1. <HTML>
2. <HEAD>
3. <TITLE>Belajar Pemrograman JavaScript</TITLE>
4. </HEAD>
5. <BODY>
7. ......
8. ......
9. </SCRIPT>
10. </BODY>
11. </HTML>
Menggunakan file ekstern

Menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang
berisi kode JavaScript di panggil dari dalam dokumen HTML
<SCRIPT language=“Javascript” src=“url/file.js”></SCRIPT>
url/file.js adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah
tambahan src tidak disertakan maka tag Script akan mencari kode yang terletak dalam
tag SCRIPT
Melalui event tertentu

Event adalah sebutan dari satu action yang dilakukan oleh user, contohnya seperti klik
tombol mouse
<tag eventHandler=“kode JavaScript yang akan dimasukkan”>
eventHandler adalah nama dari event tersebut.
B. Properti
Properti adalah atribut dari sebuah objek, penulisannya (dipisahkan dengan tanda “ . ”)
nama_objek.nama_properti
Properti dapat diberi nilai, penulisannya :

objek.properti = nilai
Contoh :
1. <HTML>
2. <HEAD>
3. <TITLE>Properti defaultStatus</TITLE>
4. </HEAD>
5. <BODY>

6. <h1>Tes DefaultStatus</h1>
8. 
11. </SCRIPT>
12. </BODY>
13. </HTML>
C. Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan
terhadap objek. Penulisannya (dipisahkan dengan tanda “ . “)
nama_objek.nama _metode(“parameter”)
Contoh :
1. <HTML>
2. <HEAD>
3. <TITLE>Belajar Metode JavaScript</TITLE>
4. </HEAD>
5. <BODY>
6. <SCRIPT language="Javascript">
7. document.write("Selamat Mencoba JavaScript <br />");
8. document.write("Semoga Sukses");
9. </SCRIPT>
10. </BODY>
11. </HTML>
D. Pemasukkan Data
JavaScript memiliki mekanisme yang memungkinkan pemakai ditampilkan jendela untuk
memasukkan sederetan masukkan setelah pemakai mengklik tombol OK, maka kode
dalam JavaScript akan melakukan serangkaian proses.
Contoh:
1. <HTML>
2. <HEAD>
3. <TITLE>Pemasukkan Data</TITLE>
4. </HEAD>
5. <BODY>
7. var nama = prompt("Siapa nama Anda?");
8. document.write("Hai "+nama);
9. </SCRIPT>
10. </BODY>
11. </HTML>

E. Jendela Peringatan dan Konfirmasi

Jendela Peringatan
1. <HTML>
2. <HEAD>
3. <TITLE>Alert BOX</TITLE>
4. </HEAD>
5. <BODY>
7. window.alert("Ini adalah pesan untuk Anda");
8. </SCRIPT>
9. </BODY>
10. </HTML>
Jendela Konfirmasi
1. <HTML>
2. <HEAD>
3. <TITLE>Konfirmasi</TITLE>
4. </HEAD>
5. <BODY>
7. var jawaban = window.confirm("Anda ingin meneruskan?");
8. document.write("Jawaban Anda :"+ jawaban);
9. </SCRIPT>
10. </BODY>
11. </HTML>
F. Variable
Variable adalah suatu objek yang berisi data-data yang dapat dimodifikasi selama
pengeksekusian program. Aturan pemberian nama variable :
 Nama variable harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu
karakter “ _“
 Nama variable bisa terdiri dari huruf, angka atau karakter _ dan & (spasi kosong tidak
diperbolehkan)
 Nama variable tidak boleh memakai nama yang digunakan dalam reserved program,
seperti : abstract, boolean, break, byte, if, implements, import, in, infinity, instanceof,
int, interface, dll
Nama variable yang benar Nama variable yang salah

- VariableBaru - Nama Dari Variable
- Nama_Dari_Variable - 123Nama_Dari_Variable

- Nama_dari_variable - siswan@gmail.com
- Nama_dari_variable_123 - Nama-Dari-Variable
- _123 - interface
1. Mendeklarasikan Variable
Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variable
dan nilai dari variable : var test = “halo”
Implisit : dengan menuliskan secara langsung nama dari variable dan diikuti nilai dari
variable : test = “halo”
2. var VariabelKu;
3. var VariabelKu2 = 3;
4. VariabelKu = 2;
5. document.write(VariabelKu*VariabelKu2);
6. </SCRIPT>
2. Peletakan Variable (Global dan Lokal)

Jika dideklarasikan dibagian awal dari skrip program, yang artinya sebelum
pendeklarasian semua fungsi, maka semua fungsi di dalam progam bisa mengakses
variable ini, dan variable ini menjadi variable global
Jika dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu,
maka variable itu hanya bisa di akses dari dalam fungsi tersebut, dan artinya variable
ini tidak berguna bagi fungsi yang lain, dan kita sebut variable ini menjadi variable
lokal
2. var a = 12;
3. var b = 4;
4. function PerkalianDengan2(b){
5. var a = b*2;
6. return a;
7. }
8. document.write("Dua kali ",b," adalah ",PerkalianDengan2(b),"<br />");
9. document.write("nilai dari a adalah",a);
10. </SCRIPT>
G. Konversi Tipe Data

Mengubah bentuk string menjadi bentuk bilangan bulat :

parseInt()
Mengkonversikan bentuk string menjadi bilangan real :
parseFloat()
Contoh:
1. <HTML>
2. <HEAD>
3. <TITLE>Konversi Bilangan</TITLE>
4. </HEAD>
5. <BODY>
6. <SCRIPT LANGUAGE = "JavaScript">
7. 
27. </SCRIPT>
28. </BODY>
29. </HTML>
H. Operator
1. Operator Aritmatika
Operator Kegunaan
+ Penjumlahan
- Pengurangan
* Perkalian

/ Pembagian
% Sisa Pembagian (Modulus)
++ Penaikan
-- Penurunan
1. <HTML>
2. <HEAD>
3. <TITLE>Operasi Matematika</TITLE>
4. </HEAD>
5. <BODY>
7. 
19. </SCRIPT>
20. </BODY>
21. </HTML>
2. Operator Pembandingan dan Logika
Operator Kegunaan Kategori
== Kesamaan Pembanding
!= Ketidaksamaan Pembanding
< Kurang dari Pembanding
<= Kurang dari atau sama dengan Pembanding
> Lebih dari Pembanding
>= Lebih dari atau sama dengan Pembanding

! Bukan Logika
&& Dan Logika
|| Atau Logika
? Kodisi ? Nilai Benar : Nilai Pembanding

Salah
1. <HTML>
2. <HEAD>
3. <TITLE>Operator ?</TITLE>
4. </HEAD>
5. <BODY>
7. var nilai = prompt("Nilai (0-100): ", 0);
8. var hasil = (nilai >= 60) ? "Lulus" : "Tidak Lulus";
9. document.write("Hasil: " + hasil);
10. </SCRIPT>
11. </BODY>
12. </HTML>

Javascript (Kondisi dan Pengulangan)

Materi Pembahasan :
1. Kondisi
2. Pengulangan
 Mahasiswa Mengetahui Penggunaan Kondisi

 Mahasiswa Mengetahui Penggunaan Pengulangan

A. Kondisi
1. Pernyataan if tanpa else
1. if(kondisi){
2. //blok pernyataan yang dijalankan
3. //jika kondisi bernilai benar
4. }
1. <html>
2. <head>
3. <title>Belajar Kondisi If</title>
4. </head>
5. <body>
6. <script language="JavaScript">
7. var nilai = prompt("Nilai (0-100):",0);
8. var hasil = "Tidak Lulus";
9. if(nilai>60){
10. hasil = "Lulus";
11. }
12. document.write("Hasil :"+hasil);
13. </script>
14. </body>
15. </html>
2. Pernyataan if dengan else

1. if(kondisi){
3. //jika kondisi bernilai benar
4. }else{
6. //jika kondisi bernilai salah
7. }
1. <html>
2. <head>
3. <title>Belajar Kondisi If</title>
4. </head>
5. <body>
7. var nilai = prompt("Nilai (0-100):",0);
8. var hasil = "";
9. if(nilai>60){
10. hasil = "Lulus";
11. }else{
12. hasil = "Tidak Lulus";
13. }

14. document.write("Hasil :"+hasil);

15. </script>
16. </body>
3. Kondisi (Pernyataan if bersarang)

1. <html>
2. <head>
3. <title>Latihan If Bersarang</title>
4. </head>
5. <body>
7. var tanggal = new Date();
8. var kode_hari = tanggal.getDay();
9. var nama_hari = "";
10. if(kode_hari== 0){
11. nama_hari = "Minggu";
12. }else if(kode_hari == 1){
13. nama_hari = "Senin";
15. nama_hari = "Selasa";
17. nama_hari = "Rabu";
18. }
19. else if(kode_hari == 4){
20. nama_hari = "Kamis";
22. nama_hari = "Jumat";
24. nama_hari = "Sabtu";
25. }
26. document.write("Sekarang adalah hari "+nama_hari+", tanggal
"+tanggal.getDate()+"/"+(tanggal.getMonth()+1)+"/"+tanggal.getYear());
27. </script>
28. </body>
29. </html>
5. Kondisi (Pernyataan Switch)

Bentuk umum:
1. switch(variabel){
2. case nilai1:
3. perintah1;
4. break;
5. case nilai2:
6. perintah2;
7. break;
8. default

9. perintahN;
10. break;
11. }
1. <html>
2. <head>
3. <title>Latihan Switch</title>
4. </head>
5. <body>
7. var tanggal = new Date();
8. var kode_hari = tanggal.getDay();
9. var nama_hari = "";
10. switch(kode_hari){
11. case 0:
12. nama_hari = "Minggu";
13. break;
14. case 1:
15. nama_hari = "Senin";
16. break;
17. case 2:
18. nama_hari = "Selasa";
19. break;
20. case 3:
21. nama_hari = "Rabu";
22. break;
23. case 4:
24. nama_hari = "Kamis";
25. break;
26. case 5:
27. nama_hari = "Jumat";
28. break;
29. case 6:
30. nama_hari = "Sabtu";
31. break;
32. }
33. document.write("Sekarang adalah hari "+nama_hari+", tanggal
"+tanggal.getDate()+"/"+(tanggal.getMonth()+1)+"/"+tanggal.getYear());
34. </script>
35. </body>
36. </html>
B. Pengulangan
1. Pernyataan While
Bentuk umum:
1. while (kondisi){
2. pernyataan

3. }
1. <html>
2. <head>
3. <title>Belajar Pengulangan While</title>
4. </head>
5. <body>
7. var bil = 0;
8. while(bil < 5){
9. document.write("STMIK KAPUTAMA <br/>");
10. bil++;
11. }
12. </script>
13. </body>
14. </html>
2. Pernyataan Do While
Bentuk umum:
1. do{
2. pernyataan
3. } while (kondisi);
1. <html>
2. <head>
3. <title>Belajar Pengulangan Do While</title>
4. </head>
5. <body>
7. var bil = 0;
8. do{
10. bil++;
11. }while(bil < 5);
12. </script>
13. </body>
14. </html>
3. Pernyataan For
Bentuk umum:
1. for(inisialisasi; kondisi; penaikan_penurunan){
2. pernyataan
3. }
1. <html>

2. <head>
3. <title>Belajar Pengulangan For</title>
4. </head>
5. <body>
7. var bil = 0;
8. for(bil=1;bil<5;bil++){
10. }
11. </script>
12. </body>
13. </html>
4. Pengulangan dalam Pengulangan

1. <html>
2. <head>
3. <title>Belajar Pengulangan For</title>
4. </head>
5. <body>
7. var baris, i = 0;
8. var nilai = prompt("masukkan tinggi :",5);
9. var tinggi = parseInt(nilai);
10. for(baris=1;baris<=tinggi;baris++){
11. for(i=1;i<=baris;i++){
12. document.write("*");
13. }
14. document.write(" <br />");
15. }
16. </script>
17. </body>

Javascript (Validasi)
Materi Pembahasan :
1. Objek
2. Validasi Javascript
 Mahasiswa Mengetahui Penggunaan Objek

 Mahasiswa Mampu Membuat Validasi Form

A. Objek
Objek dari navigator (browser)
Javascript membagi satu halaman Navigator dalam berbagai objek dengan tujuan untuk
memudahkan akses salah satu dari mereka dan memanipulasinya dengan cara merubah
sifat/kondisi (porperti) mereka.
Dimulai dari objek yang paling besar diantara semuanya, kemudian turun berdasarkan
tingkatan sampai kepada objek yang diinginkan .
 Objek paling besar adalah objek window dari navigator
 Di dalam objek window, ada satu objek yang ditampilkan dalam bentuk halaman,
kita sebut objek dokumen.
 Halaman itu berisi banyak objek seperti : formula, text, image dan lain-lain.
B. Validasi Javascript
 Validasi adalah proses yang dilakukan untuk mengecek kebenaran (valid tidaknya)
sebuah masukan data pada sebuah halaman form tertentu (textbox, radiobox,
combobox, dll)
 Pembuatan program validasi menggunakan javascript untuk kecepatan disisi
komputer client (bukan sisi web server).
1. Membuat Focus Elemen

 Dengan bantuan method focus() kita bisa membuat form sedikit lebih user-
friendly
 Kita bisa membuat elemen mana yang difokuskan pada saat pertama atau yang di
input salah
 Fokus itu artinya mengeset kursor pada form-elemen tertentu sehingga user tidak
harus lagi meng-click elemen yang bersangkutan sebelum memasukan sesuatu
Kita bisa melakukan hal tersebut dengan script yang sederhana berikut ini :
function setfocus(){
document.first.text1.focus();

Jika akan membuat focus pada elemen ini saat halaman di-load kita bisa
menambahkan pada property onLoad di tag <body> seperti berikut :
<body onLoad=“setFocus()”>
Lebih lanjut kita dapat melakukan hal sebagai berikut, yang akan mengeset focus dan
juga men-select input :
1. function setfocus(){
2. document.first.text1.focus();
3. document.first.test1.select();
4. }
1. <html>
2. <head>
3. <title>Form Validasi</title>
4. </head>
6. function cekNama(form){
7. if(form.elements[0].value == ""){
8. alert("Nama harus dimasukkan");
9. form.nama.focus();
10. form.nama.select();
11. return (false);
12. }
13. alert("Terima kasih,"+form.elements[0].value);
14. return (true);
15. }
16. </script>
17. <body>
18. <form name="form">
19. Nama : <input type="text" name="nama"><br />
20. <input type="button" value="Kirim" onClick="cekNama(this.form)"><br />
21. </form>
22. </body>
23. </html>
2. Objek Password
1. <html>
2. <head>
3. <title>Objek Password</title>
4. <head>
5. <body>
6. <form name="form1" action="tesform.html" method="post">
7. Password baru : <input type="password" name="password_1"><br />
8. Ulang Password : <input type="password" name="password_2"><br />

9. <input type="button" name="btnProses" value="Proses"

onClick="cekPassword()">
10. </form>
11. </body>
13. function cekPassword(){
14. if(document.form1.password_1.value !=
document.form1.password_2.value){
15. alert("Dua password yang anda masukkan tidak sama");
16. }else{
17. window.location.href = "testform.html"
18. }
19. }
20. </script>

PHP
Materi Pembahasan :
1. Model Penulisan Tag PHP

2. Variabel
3. Tipe Data
4. Konstanta
5. Operator
 Mahasiswa Mengenal Penulisan Tag PHP

 Mahasiswa Dapat Menggunakan Variabel
 Mahasiswa Mengetahui Tipe Data
 Mahasiswa Dapat menggunakan Konstanta
 Mahasiswa Dapat Menggunakan Operator

A. Model Penulisan Tag PHP

PHP merupakan bahasa pemrograman yang disebut sebagai bahasa scripting, dalam arti
PHP merupakan bahasa pemrograman yang ditempelkan/embeded pada bahasa atau
aplikasi lain. Sebagai contoh, PHP ditempelkan ke dalam script HTML, yang merupakan
bahasa ibu untuk world wide web. Berikut model penulisan tag PHP :
Cara pertama di dalam menuliskan script PHP dan yang banyak dipakai pada proses
pemrograman yaitu :
1. <?php
2. .... isi dari statement yang anda buat
3. ?>
Output :
[No Output File]
Selain contoh diatas terdapat model penulisan seperti berikut:
1. <?
2. .... isi dari statement yang anda buat
3. ?>
Output :
[No Output File]
B. Variabel
Salah satu keunggulan PHP dibandingkan bahasa pemrograman lain adalah PHP hanya
memiliki satu cara mendefinisikan variabel. Untuk mendefinisikan variabel baik itu
bertipe string, karakter, integer, float dan lainnya, hanya menggunakan simbol dollar ($)
yang diikuti nama variabel. Penamaan varibel mengikuti aturan case-sensitive, dinama
huruf kapital akan dibedakan oleh PHP.
Sebagai contoh kita akan membuat sebuah variabel yang benar dan salah :
Benar Salah
- $_nama - $2nama
- $nama_lengkap - $nama?
- $nama2 - $nama+lengkap
- $nama_2 - $nama lengkap
Berikut ini contoh penggunaan variabel:

1. <?php
2. $npm = "08451021";
3. $nama = "Siswan Syahputra";
4. echo "Npm : ".$npm."<br>";
5. echo "Nama : ".$nama;
6. ?>
Output :
C. Tipe Data
PHP secara umum mendukung empat tipe data primitive, yaitu tipe data scalar (tipe
boolean, integer, float dan string), tipe data gabungan/compound (tipe data array dan
obyek), tipe data resources dan tipe data mixed. Namun pada pembahasan kali ini kita akan
membahas 2 tipe data penting, yaitu tipe data scalar dan tipe data gabungan/compound.
1. Tipe Data Scalar
Tipe data ini secara prinsip dimiliki oleh seluruh model bahasa pemrograman baik
yang medium maupun yang high level.
2. Tipe Data Boolean
Tipe data boolean merupakan tipe data yang merepresentasikan suatu kondisi benar
(true) dan salah (false). Berikut ini contoh penggunaan tipe data boolean :
1. <?php
2. $status = true;
3. if($status == true){
4. echo "Status Benar";
5. }
6. echo "<hr>";

7. var_dump($status);
8. ?>
Output
Penjelasan : Pada kode porgram diatas didefinisikan sebuah variabel $status yang diisi
dengan nilai true. Dan dilakukan pemeriksaan padavariabel $status dengan
menggunakan sintaks var_dump($status).
3. Tipe Data Integer
Integer merupakan bilangan bulat yang yang digunakan di dalam program dan terdiri
atas angka [...,5,4,3,2,1,0,1,2,3,4,5,...].
Berikut ini contoh penggunaan tipe data integer:
1. <?php
2. $nilai1 = 80;
3. $nilai2 = 90;
4. $hasil = $nilai1 + $nilai2;
5. echo "Hasil penjumlahan ".$nilai1." + ".$nilai2." adalah ".$hasil;
6. echo "<hr>";
7. var_dump($hasil)
8. ?>
Ouput

4. Tipe Data Float
Tipe data float merupakan data pecahan, yang dikenal juga dengan nama double atau
real number.
Berikut ini contoh penggunaan tipe data float :
1. <?php
2. $nilai1 = 80;
3. $nilai2 = 90;
4. $hasil = $nilai1 / $nilai2;
5. echo "Hasil pembagian ".$nilai1." + ".$nilai2." adalah ".$hasil;
6. echo "<hr>";
7. var_dump($hasil)
8. ?>
Output
5. Tipe Data String
Tipe data string merupakan istilah untuk data yang tersusun dari beberapa karakter.
Tipe data string harus menggunakan tanda kutip ganda (“) atau tanda kutip tunggal
(‘). Tidak ada perbedaan diantara kedua tanda tersebut.
Berikut ini contoh penggunaan tipe data string :
1. <?php
2. $npm = "08451021";
3. $nama = 'Siswan Syahputra';
4. $jenpend = "Strata 1";
5. $prodi = "Teknik Informatika";
6. echo "Npm :".$npm."<br>";
7. echo "Nama :".$nama."<br>";
8. echo "Jenjang Pendidikan :".$jenpend."<br>";

9. echo "Program Studi :".$prodi."<hr>";

10. var_dump($npm);
11. echo "<br>";
12. var_dump($nama);
13. echo "<br>";
14. var_dump($jenpend);
15. echo "<br>";
16. var_dump($prodi);
17. ?>
Output
6. Tipe Data Compound (Array dan Objek)
Tipe data compound yaitu array dan objek akan kita bahas pada bab selanjutnya,
karena kedua tipe data tersebut cukup banyak digunakan pada berbagai aplikasi yang
berhubungan dengan tipe data menggunakan teknik objek oriented.
7. Konstanta
Konstanta atau tetapan merupakan nilai yang tidak dapat diubah selama proses
eksekusi program, hal ini berbeda dengan variabel yang dapat diubah pada saat
aplikasi di eksekusi. Untuk mendefiniskan konstanta dapat menggunakan fungsi
define().
Berikut ini contoh penggunaan konstanta :
1. <?php
2. define("PI",3.14);
3. define("proses","Perhitungan luas lingkaran");
4. $r = 15;
5. $luas = PI * ($r * $r);

6. echo proses;
7. echo "<br>";
8. echo "Luas lingkaran = ".$luas;
9. echo "<hr>";
10. var_dump(PI);
11. echo "<br>";
12. var_dump(proses);
13. ?>
Output
D. Operator
Operator berfugsi untuk melakukan proses manipulasi dari dua atau lebih data. Terdapat
beberapa tipe operator yaitu :
- Operator Matematika (Arithmetic Operator)

- Operator Kenaikan/Penurunan (Increment/Decrement Operator)
- Operator Penugasan (Assigment Operator)
- Operator Pembandingan (Comaprison Operator)
- Operator Logika (Logical Oeprator)
- Operator String (String Operator)
1. Operator Matematika (Arithmetic Oeprator)
Operator ini berfungsi untuk melakukan proses matematika, berikut tabel daftar
operator matematika
Operator Nama Contoh Hasil

+ Penjumlahan $a + $b Menjumlahkan $a dengan $b
- Pengurangan $a - $b Selisih dari $a dengan $b

* Perkalian $a * $b Perkalian antara $a dengan $b

/ Pembagian $a / $b Proses pembagian antara $a dengan $b
% Modulus $a % $b Sisa pembagian dari $a dengan $b
Contoh-contoh penggunaan operator aritmatika dapat dilihat pada pembahasan

sebelumnya.
2. Operator Penugasan (Assigment Operator)
Operator ini menggunakan tanda ‘ = ‘, hal ini bukan berarti variabel sebelah kiri sama
dengan variabel sebelah kanan, akan tetapi lebih spesifik lagi yaitu operand sebelah
kiri akan berisi dengan nilai yang ada pada operand sebelah kanan. Sehingga jika
didefinisikan akan seperti berikut :
$nilaix = 10, ini berarti masukkan $nilaix dengan 10
Contoh-contoh penggunaan operator penugasan dapat dilihat pada pembahasan

sebelumnya.
3. Operator Kenaikan/Penurunan (Increment/Decrement Operator)
PHP mendukung gaya penulisan dari C/C++ untuk operator kenaikan (increment) atau
penurunan (decrement),berikut daftar tabel operator increment/decrement:

+ +$a Naikkan nilai $a dengan 1, kemudian
kembalikan nilai $a
++ Increment
$a+ + Kembalikan nilai $a, kemudian
naikkan $a dengan nilai 1
- -$a Turunkan nilai $a dengan 1,
kemudian kembalikan nilai $a
-- Decrement
$a- - Kembalikan nilai $a, kemudian
turunkan $a dengan nilai 1
Berikut ini contoh penggunaan operator increment/decrement:
1. <?php
2. $x = 10;

3. echo "Nilai \$x = $x";

4. echo "<br>";
5. ++$x;
6. echo "Lakukan ++\$x = $x";
7. echo "<br>";
8. $x++;
9. echo "Lakukan \$x++ = $x";
10. ?>
Output
4. Operator Pembandingan (Comparison Oeprator)
Operator pembandingan berfungsi sesuai dengan namanya yaitu untuk

membandingkan dua angka, berikut tabel daftar operator pembandingan :

== Sama $a == $b Benar, jika $a sama dengan $b
dengan
=== Identik $a= = Benar, jika $a sama dengan $b dan
=$b keduanya mempunyai tipe data yang
sama
!= Tidak sama $a != $b Benar, jika $a tidak sama dengan $b
dengan
!== Tidak $a != = Benar, jika $a tidak sama dengan $b
identik $b dan keduanya tidak memiliki tipe
data yang sama
< Lebih kecil $a < $b Benar, Jika $a lebih kecil dari $b

> Lebih besar $a > $b Benar, Jika $a lebih besar dari $b

<= Lebih kecil $a <= $b Benar, jika $a lebih kecil atau sama
atau sama dengan $b
dengan
>= Lebih besar $a >= $b Benar, jika $a lebih besar atau sama
atau sama dengan $b
dengan
Berikut ini contoh penggunaan operator perbandingan :
1. <?php
2. $a = 70;
3. $b = 80;
4. $c = 70.3;
5. $hasil = $a < $b;
6. $uji = $a !== $c;
7. echo "Apakah $a lebih kecil dari $b ? <br>";
8. var_dump($hasil);
9. echo "<br>";
10. echo "Apakah $a tidak sama dengan $c ? <br>";
11. var_dump($uji);
12. echo "<br>";
13. echo "Apakah $a sama dengan $b ? <br>";
14. var_dump($a === $b);
15. ?>
Output
5. Operator Logika (Logical Operator)
Operator logika digunakan untuk menentukan kondisi kebenaran dari dua operand.
Berikut tabel daftar operator logika :


$a and $b
and
And (dan) $a && Benar, jika $a dan $b bernilai benar
(&&)
$b
$a or $b
or ( || ) Or (atau) Benar, jika $a atau $b bernilai benar
$a || $b
xor XOR $a xor $b Benar, jika salah satu dari keduanya
bernilai benar, akan tetapi tidak
kedua-duanya
! NOT !$a Benar, jika $a tidak benar
Contoh-contoh penggunaan operator logika akan dibahas di pembahasan berikutnya

pada struktur kontrol.
6. Operator String (String Operator)
PHP mengenal dua model operator yaitu tanda titik “ . “ yang disebut Concatenation
Operator atau operator peyambung string dan “ .= “ sebagai operator penugasan
penyambungan string (Concatenation Assigment Oeprator). Operator ini sama
perilakukanya dengan $x = $x .$y atau $x.=$y
Berikut ini contoh penggunaan oeprator string :
1. <?php
2. $nmDepan = "Siswan";
3. $nmBelakang = "Syahputra";
4. //Operator concatenation
5. $nmLengkap = $nmDepan." ".$nmBelakang;
6. echo $nmLengkap;
7. echo "<hr>";
8. //Operator assigment
9. $nmLengkap .= "<br>Memiliki hobi ";
10. $nmLengkap .= "belajar pemrograman web";
11. echo $nmLengkap;
12. ?>
Output


PHP Lanjut (Struktur Control dan Teknik

Modulasi)
Materi Pembahasan :
13. Struktur Percabangan
14. Struktur Perulangan
15. Teknik Modulasi
 Mahasiswa Mampu Mengetahui Penggunaan Struktur Control
 Mahasiswa Mampu Menggunakan Struktur Percanganan
 Mahasiswa Mampu Menggunakan Struktur Perulangan
 Mahasiswa Mampu Menggunakan Teknik Modulasi

A. Struktur Control
Struktur kontrol atau yang disebut juga statement merupakan bagian penting dalam suatu
bahasa pemrograman yang digunakan untuk mengatur jalur eksekusi suatu program.
Dalam bahasa pemrograman PHP ada 4 jenis statement, yaitu IF, switch, while dan for.
Statement adalah suatu kondisi atau perintah tunggal yang akan dikerjakan apabila kondisi
bernilai true. Jika bernilai false, maka operasi tidak dilaksanakan.
1. Struktur Percabangan
Struktur percabangan adalah proses pengalihan progam untuk mengeksekusi blok
program lainnya. Berdasarkan pemeriksaan suatu kondisi/expresi. Percabangan terdiri
atas fungsi if, else, elseif, switch dan lain-lain.
Fungsi IF
Fungsi logika if digunakan sebagai pernyataan dalam memilih salah satu operasi yang
akan dilaksanakan sesuai syarat atau kondisi tertentu yang telah ditetapkan. Adapun
penulisan sintaksnya sebagai berikut :
Cara 1 :
1. if (kondisi)
2. statement yang akan dilaksanakan
Atau, dengan cara berikut :

Cara 2 :
1. if (kondisi){
3. }
Cara pertama penulisannya lebih ringkan akan tetapi memiliki kesulitan saat membaca
struktur program secara keseluruhan, sedangkan cara kedua lebih mudah dimengerti
pada saat melakukan pemeriksaan kesalahan program karena terdapat blok { awal dan
akhir } sebagai batasan fungsi kondisi if.
Berikut ini contoh penggunaan fungsi if :
1. <?php
2. $user = "siswan";
3. $password = "123";

4. if($user == "siswan" && $password == "123"){

5. echo "User anda adalah $user dan password anda adalah $password";
6. }
7. ?>
Output
Fungsi Else
Fungsi else merupakan kelanjutan dari fungsi if, dimana jika kondisi benar maka
statement pertama yang akan dilaksanakan, tetapi jika kondisi salah maka statement
yang ada pada blok else yang akan dieksekusi. Adapun penulisan sintaksnya sebagai
berikut :
1. if (kondisi){
2. statement 1 yang akan dijalankan
3. }else{
4. statement 2 yang akan dijalankan
5. }
Berikut ini contoh penggunaan fungsi else :
1. <?php
3. $password = "123";
4. if($user == "siswan" && $password == "123"){
5. echo "User dan password yang anda masukkan benar";
6. }else{
7. echo "User atau password anda salah!!!";
8. }
9. ?>
Output

Fungsi ElseIf
Fungsi logika if ini digunakan untuk menjalankan salah satu operasi berdasarkan
kondisi tertentu dari beberapa pilihan kondisi dan operasi tertentu. Bentuk penulisan
fungsi elseif adalah sebagai berikut :
1. if(kondisi 1){
2. statement 1 yang akan dilaksanakan
3. }elseif(kondisi 2){
4. statement 2 yang akan dilaksanakan
5. }else{
6. statement terakhir yang akan dilaksanakan
7. }
Berikut ini contoh penggunaan fungsi elseif :

1. <?php
3. $password = "123";
4. $level = "admin";
5. if($user == "siswan" && $password == "123" && $level == "admin"){
6. echo "Anda login sebagai administrator";
7. }elseif($user == "andi" && $password == "321" && $level == "penulis" ){
8. echo "Anda login sebagai penulis";
9. }else{
10. echo "User atau password yang anda input salah";
11. }
12. ?>
Output

Fungsi Switch....Case
Fungsi switch....case digunakan untuk membandingkan variabel yang memiliki
beberapa nilai berbeda. Fungsi itu hampir sama dengan fungsi if hanya saja kondisinya
dituliskan berulang-ulang. Berikut bentuk penulisan sintkas fungsi switch...case :
1. switch(kondisi){
2. case “nilai 1”:
3. statement 1;
4. break;
5. case “nilai 2”:
6. statement 2;
7. break;
8. case “.....”:
9. }
Berikut ini contoh penggunaan fungsi switch....case :
1. <?php
2. $hari = date("D");
3. switch($hari){
4. case "Sun":
5. $nama_hari = "Minggu";
6. break;
7. case "Mon":
8. $nama_hari = "Senin";
9. break;
10. case "Tue":
11. $nama_hari = "Selasa";
12. break;
13. case "Wed":
14. $nama_hari = "Rabu";
15. break;
16. case "Thu":
17. $nama_hari = "Kamis";
18. break;
19. case "Fri":
20. $nama_hari = "Jum'at";
21. break;
22. case "Sat":
23. $nama_hari = "Sabtu";
24. break;
25. }
26. echo "Sekarang adalah hari ".$nama_hari;
27. ?>
Output

2. Struktur Perulangan
Struktur perulangan (looping) berfungsi untuk mengontrol suatu proses yang dilakukan
secara berulang-ulang di dalam program. ada 3 kondisi yang harus dipenuhi untuk
menggunakan struktu perulangan, yaitu :
- Pengulangan harus memiliki nilai awal

- Pengulangan harus memiliki batasan
- Pengulangan harus memiliki proses increment/decrement
Fungsi For
Pada fungsi for kita dapat menentukan jumlah pengulangan dan kelipatan pengulangan.
Maka dari itu kita hanya perlu menuliskan nilai awal pengulangan dan nilai batas
pengulangannya. Nilai variabel secara otomatis akan bertambah atau berkurang setiap
kali proses pengulangan dilakukan. Berikut bentuk penulisan sintaks fungsi for :
1. for (nilai_awal; nilai_akhir; increment/decrement){

2. statement yang akan dilakukan
3. }
Berikut ini contoh penggunaan fungsi for :
1. <?php
2. echo "Contoh pengulangan dengan for";
3. echo "<hr>";
4. for($i=1; $i<=10; $i++){
5. echo "Nilai ke - $i<br>";
6. }
7. ?>
Output

Fungsi While
Fungsi pengulangan while digunakan untuk menjalankan operasi secara berulang-ulang

hingga ditemukan kondisi untuk menghentikannya. Berikut penulisan sintaks fungsi
while :
1. while (kondisi){
2. statement yang akan dijalankan
3. }
Berikut ini contoh penggunaan fungsi while :
Contoh 1:
1. <?php
2. $i=1;
3. while($i<6){
4. echo "<h$i>Heading $i</h$i>";
5. $i++;
6. }
7. ?>
Output
Contoh 2:

1. <?php
2. $bil = 1;
3. while($bil < 20){
4. if(!($bil % 2)){
5. echo "$bil adalah bilangan genap";
6. echo "<br>";
7. }
8. $bil++;
9. }
10. ?>
Output 2
Fungsi Do While
Fungsi do while akan menjalankan operasi terlebih dahulu, selanjutnya akan dilakukan
pengujian apakah pernyataan tersebut terpenuhi atau tidak. Berikut penulisan sintaks
fungsi do while :
1. do{
3. }while(kondisi)
Berikut ini contoh penggunaan fungsi do while :
Contoh 1:
1. <?php
2. $no = 1;
3. do{
4. echo "No Urut ".$no;
5. echo "<br>";
6. $no++;
7. }while($no <= 10);

8. ?>
Output 1
Contoh 2:
1. <?php
2. $bil = 0;
3. do{
4. if($bil % 2){
5. echo "$bil adalah bilangan ganjil";
6. echo "<br>";
7. }
8. $bil++;
9. }while($bil < 20);
10. ?>
Output 2
3. Teknik Modulasi
Teknik modulasi merupakan proses pemisahan sebuah aplikasi menjadi bagian per
bagian agar lebih mudah dalam proses pengembangan ataupun perawatan, dengan

demikian proses pemeriksaan kesalahan atau debug akan lebih mudah dan cepat.
Setelah program di-breakdown atau dipisahkan, selanjutnya kita akan menyatukan
kembali di dalam program utama. Proses ini membutuhkan fungsi built-in yang telah
disediakan oleh PHP untuk menyatukan modul-modul tersebut agar dapat digunakan
secara bersamaan. Fungsi-fungsi tersebut, yaitu include( ), include_one( ), require( )
dan require_once( ).
Fungsi include( )
Fungsi include( ) digunakan untuk mengikutsertakan file lain ke dalam halaman yang
sedang kita buat. Berikut penulisan sintaks fungsi include( ) :
include “filephp.php”;
Berikut ini contoh penggunaan fungsi include( ) :
1. Buatlah dokumen php dengan nama “profil.php”
1. <?php
2. echo "
3. <h2>Tentang Saya</h2>
4. <table>
5. <tr>
6. <td>Nama</td>
7. <td>:</td>
8. <td>Siswan Syahputra</td>
9. </tr>
10. <tr>
11. <td>Lulusan S1</td>
12. <td>:</td>
13. <td>STMIK KAPUTAMA</td>
14. </tr>
15. <tr>
16. <td>Lulusan S2</td>
17. <td>:</td>
18. <td>Universitas Putra Indonesia 'YPTK'
Padang</td>
19. </tr>
20. <tr>
21. <td>Status</td>
22. <td>:</td>
23. <td>Menikah</td>
24. </tr>
25. </table>";
26. ?>
2. Buatlah dokumen php dengan nama “footer.php”

1. <?php

2. echo "<hr>";
3. echo "Copyright © by Siswan Syahputra | 2018 - All right
reserved";
4. ?>
3. Selanjutnya buatlah dokumen php untuk menampilkan informasi selengkapnya

dengan nama “index.php”
1. <html>
2. <head>
3. <title>My Website</title>
4. </head>
5. <body>
6. <h1>Selamat datang di website saya</h1>
7. Semoga artikel-artikel pada website ini dapat menambah wawasan anda di
bidang pemrograman web dengan PHP dan MySQL untuk pemula
8. <hr>
9. <?php
10. include "profil.php";
11. include "footer.php";
12. ?>
13. </body>
14. </html>
Output
Fungsi include_once( )
Fungsi include_once( ) hampir sama dengan fungsi include( ), namun sedikit perbedaan
diantaranya, yaitu jika menggunakan fungsi include( ) berapa kali pun fungsi ini
digunakan dengan memanggil dokumen php yang sama, maka dokumen php tersebut

tetap di panggil sebanyak perintah tersebut di tulis. Berbeda dengan fungsi

include_once( ), walaupun berkali-kali dilakukan pemanggilan dokumen php yang
sama namun tetap hanya sekali saja dokumen php tersebut dipanggil.
Fungsi require( )
Secara prinsip fungsi require( ) sama dengan fungsi include( ), hanya saja jika
menggunakan fungsi ini jika dokumen php yang dipanggil tidak ada atau salah, maka
akan muncul pesan error fatal yang mengkibatkan baris kode program selanjutnya tidak
akan di eksekusi.
Fungsi require_once( )
Secara prinsip fungsi require_once( ) sama dengan fungsi include_once( ), hanya saja
jika terjadi kesalahan dalam pemanggilan dokumen php, maka akan menampilkan
pesan error fatal sama seperti fungsi

Penanganan Form dan Array

Materi Pembahasan :
16. Elemen Form
17. Parameter POST dan GET
18. Menggunakan Array
19. Array Multidimensi
20. Manipulasi Elemen Array
 Mahasiswa Mengetahui Elemen-lemen Form
 Mahasiswa Mampu Menggunakan Parameter POST dan GET
 Mahasiswa Dapat Menggunakan Arrat
 Mahasiswa Dapat Menggunakan Arrar Multidimensi
 Mahasiswa Dapat Melakukan Manipulasi Elemen Array

M. Form
Pada pembahasan kali ini kita akan belajar bagaiman menggunakan form yang merupakan
bagian mutlak untuk dipelajari agar kita dapat membuat interaksi antara user dan aplikasi
dengan lebih mudah.. Form inputan dibuat menggunakan tag-tag HTML, sehingga jika di
dalam halaman tersebut tidak terdapat sintaks php maka di harus disimpan dalam bentuk
php, cukup dengan bentuk html juga bisa. Berikut penulisan sintaks form :
1. <form id=”form1” name=”form1” method=”post” action=” ”>

2. ...... elemen – elemen form
3. </form>
1. Elemen Form
Berikut elemen-elemen form yang sering digunakan :
Elemen TextField
Elemen ini digunakan untuk menerima input dari user, berikut penulisan sintaks
elemen TextField :
<input type=”text” id=”nama” name=”nama” />

Elemen TextField juga dapat digunakan untuk meneriman inputan dari user
berbentuk password, berikut penulisan sintaks elemen TextField untuk inputan
password :
<input type=”password” id=”password” nama=”password” />
Elemen HiddenField
Elemen ini digunakan untuk mengirimkan informasi secara tersembunyi, berikut

penulisan sintaks elemen HiddenField :
<input type=”hidden” id=”nilai” nama=”nilai” value=”90” />
Elemen Textarea
Elemen ini digunakan untuk menerima input dari user dalam bentuk beberapa baris,
berikut penulisan sintaks elemen Textarea :
<textarea id=”alamat” name=”alamat” cols=”50” row=”6”></textarea>
Elemen Checkbox

Elemen ini digunakan untuk memilih data lebih dari satu pilihan berdasarkan daftar
pilihan checkbox tersebut, berikut penulisan sintaks elemen checkbox :
<input type”checkbox” id=”hobi” nama=”hobi” value=”menulis” />
Elemen Radio Button
Elemen ini digunakan untuk melakukan pemilihan data dengan hanya memilih satu
pilihan saja, berikut penulisan sintaks elemen radio button :
<input type=”radio” id=”kelas” nama=”kelas” value=”pagi” />
Elemen List
Elemen ini digunakan untuk memilih salah satu item yang disediakan, berikut penulisan
sintaks elemen list :
1. <select name=”prodi” id=”prodi”>

2. <option value=”teknik informatika”>Teknik Informatika</option>
3. <option value=”sistem informasi”>Sistem Informasi</option>
4. <option value=”manajemen informatika”>Manajemen Informatika</option>
5. <option value=”komputerisasi akuntansi”>Komputerisasi Akuntansi</option>
6. </select>
Elemen File Field
Elemen ini digunakan untuk mengambil data dari klien untuk dikirim ke server(upload
data), berikut penulisan sintaks elemen file field :
<input type=”file” id=”foto” name=”foto” />

Elemen Button
Elemen ini digunakan untuk melakukan proses data yang ada di dalam form untuk
diolah pada script PHP, berikut penulisan sintaks elemen button :
<input type=”submit” id=”proses” name=”proses” value=”Proses” />
2. Parameter POST dan GET
Fungsi paramater POST dan GET adalah untuk mengirim data dari elemen-elemen
form ke halaman pengolah data sehingga informasi yang dikirim dari setiap elemen
form tersebut dapat dikenali oleh PHP. Walaupun kedua parameter ini memiliki fungsi
yang sama, namun terdapat perbedaan di anatar keduanya, yaitu :

- Parameter POST mengambil informasi yang dikirim melalui elemen-elemen form

sebagai parameter POSTING. Berikut penulisan sintaks parameter POST :
$nama = $_POST[“nama”];
- Parameter GET mengambil informasi yang dikirim melalui URL parameter.

Berikut penulisan sintaks parameter GET :
$nama = $_GET[“nama”];
Berikut ini contoh penggunaan paramater POST :
1. <html>
2. <head>
3. <title>Belajar Web</title>
4. </head>
5. <body>
6. <form name="form1" method="post" action="<?php echo
$_SERVER['PHP_SELF'];?>">
7. <table>
8. <tr>
9. <td>NPM</td>
10. <td>:</td>
11. <td><input type="text" id="npm" name="npm"/></td>
12. </tr>
13. <tr>
14. <td>Nama</td>
15. <td>:</td>
16. <td><input type="text" id="nama"
name="nama"/></td>
17. </tr>
18. <tr>
19. <td>Alamat</td>
20. <td>:</td>
21. <td><textarea name="alamat"></textarea></td>
22. </tr>
23. <tr>
24. <td><input type="submit" name="kirim" value="Kirim"
/></td>
25. </tr>
26. </table>
27. </form>
28. <?php
29. if(isset($_POST["kirim"])){
30. $npm = $_POST["npm"];
31. $nama = $_POST["nama"];
32. $alamat = $_POST["alamat"];
33. echo "
34. <h2>Biodata Anda</h2>

35. <table>
36. <tr>
37. <td>NPM</td>
38. <td>:</td>
39. <td>$npm</td>
40. </tr>
41. <tr>
42. <td>Nama</td>
43. <td>:</td>
44. <td>$nama</td>
45. </tr>
46. <tr>
47. <td>Alamat</td>
48. <td>:</td>
49. <td>$alamat</td>
50. </tr>
51. </table>
52. ";
53. }
54. ?>
55. </body>
56. </html>
Output :
Berikut ini contoh penggunaan parameter GET :
1. <html>
2. <head>
3. <title>Belajar Web</title>
4. </head>
5. <body>
6. <form name="form1" method="get" action="<?php echo
$_SERVER['PHP_SELF'];?>">

7. <table>
8. <tr>
9. <td>NPM</td>
10. <td>:</td>
11. <td><input type="text" id="npm" name="npm"/></td>
12. </tr>
13. <tr>
14. <td>Nama</td>
15. <td>:</td>
16. <td><input type="text" id="nama"
name="nama"/></td>
17. </tr>
18. <tr>
19. <td>Alamat</td>
20. <td>:</td>
21. <td><textarea name="alamat"></textarea></td>
22. </tr>
23. <tr>
24. <td><input type="submit" name="kirim"
value="Kirim" /></td>
25. </tr>
26. </table>
27. </form>
28. <?php
29. if(isset($_GET["kirim"])){
30. $npm = $_GET["npm"];
31. $nama = $_GET["nama"];
32. $alamat = $_GET["alamat"];
33. echo "
34. <h2>Biodata Anda</h2>
35. <table>
36. <tr>
37. <td>NPM</td>
38. <td>:</td>
39. <td>$npm</td>
40. </tr>
41. <tr>
42. <td>Nama</td>
43. <td>:</td>
44. <td>$nama</td>
45. </tr>
46. <tr>
47. <td>Alamat</td>
48. <td>:</td>
49. <td>$alamat</td>
50. </tr>
51. </table>
52. ";
53. }
54. ?>

55. </body>
56. </html>
Output :
Penjelasan : Dari 2 contoh program diatas terlihat pada output yang ditampilkan tidak
ada perbedaannya, namun jika kita perhatikan pada URL jelas terlihat ada perbedaan
diantara kedua nya. Jika menggunakan parameter POST data yang dikirim melalui
elemen-elemen form, data tersebut tidak akan terlihat di URL, namun jika
menggunakan parameter GET maka data yang dikirim akan ditampilkan di URL.
N. Array
Array memiliki kegunaan yaitu, untuk mengidentifikasi variabel yang memiliki data yang
lebih dari satu dan memiliki nama variabel yang sama. Data-data yang ada pada array
disebut dengan elemen array yang terdiri dari Keys dan Values Keys. Berikut penulisan
sintaks array :
$variabelArray = array($key => $value);

Dalam pembuatan array gunakan kata kunci array dilanjutkan dengan buka kurung “(“
kemudian gunakan tanda koma “ , ” untuk memisahkan data yang ada didalam nya dan
diakhiri dengan tutup kurung “)”.
Untuk dapat mengakses data yang ada pada sebuah variabel array gunakan nama variabel
yang akan diakses datanya dengan dilanjutnya kurung siku “[ ]”, yang didalam nya
terdapat nomor dari elemen yang akan diakses. Berikut contoh penulisannya :
$variabelArray[0], $variabelArray[1], $variabelArray[2],.... dst.

Didalam array, elemen yang ada didalamnya dimulai dari 0 sampai jumlah data yang ada
dikurang 1.
1. Menggunakan Array
Berikut ini contoh penggunaan array dan menampilkan nya menggunakan perulangan
for:
1. <?php
2. $prodi = array(
3. "Teknik Informatika",
4. "Sistem Informasi",
5. "Manajemen Informatika",
6. "Komputerisasi Akuntansi"
7. );
8. echo "<h2>Program Studi di STMIK KAPUTAMA</h2>";
9. for($a=0;$a<=3;$a++){
10. echo "
11. <ul>
12. <li>$prodi[$a]</li>
13. </ul>";
14. };
15. ?>
Berikut ini contoh penggunaan array dan menampilkan nya menggunakan foreach:
1. <?php
2. $prodi = array(
3. "Teknik Informatika",
4. "Sistem Informasi",
5. "Manajemen Informatika",
6. "Komputerisasi Akuntansi"
7. );
9. foreach($prodi as $prodi){
10. echo "
11. <ul>
12. <li>$prodi</li>
13. </ul>";
14. };
15. ?>
Output

2. Array Multidimensi
Secara prinsip array multidimensi adalah array yang didalamnya terdapat arra lainnya.
Berikut penulisan sintaks array multidimensi:
$variabelArray = @array(“array1” => array($key => $value), “array2” => array($key
=> $value));
Berikut ini contoh penggunaan array multidimensi :
1. <?php
2. $prodi = @array(
3. array(
4. "Prodi" => "Teknik Informatika",
5. "Jenpend" => "Strata 1(S1)",
6. ),
7. array(
8. "Prodi" => "Sistem Informasi",
9. "Jenpend" => "Strata 1(S1)",
10. ),
11. array(
12. "Prodi" => "Manajemen Informatikan",
13. "Jenpend" => "Diploma 3 (D3)",
14. ),
15. array(
16. "Prodi" => "Komputerisasi Akuntansi",
17. "Jenpend" => "Diploma 3 (D3)",
18. ),
19. );
21. foreach($prodi as $prodi){
22. foreach($prodi as $key => $data){
23. echo "$key : $data";
24. echo "<br>";
25. }
26. echo "<hr>";

27. }
28. ?>
Output

MySQL
Materi Pembahasan :
1. Koneksi Database
2. Membuat Tabel
3. Menambah Data Record dengan Insert
4. Menampilkan Data Record dengan Select
5. Mengubah Data Record
6. Menghapus Data Record
 Mahasiswa Mampu Membuat Koneksi Database

 Mahasiswa Mampu Membuat Tabel
 Mahasiswa Mampu Menambah Data Record dengan Insert
 Mahasiswa Mampu Menampilkan Data Record dengan Select
 Mahasiswa Mampu Mengubah Data Record
 Mahasiswa Mampu Menghapus Data Record

A. Koneksi Database
MySQL merupakan perangkat lunak sistem mananjemen basis data (Database Manajemen
System) yang fleksibel dan dapat di akses cepat. Hal ini sangat cocok untuk memenuhi
kebutuhan sebuah website yang interaktif dan dinamis. MySQL menggunakan SQL dan
bersifat gratis serta dapat berjalan diberbagai platform antara lain Linux, Windows dan
sebagainya.
Pada pembahasan kali ini kita akan mempelajari bagaimana PHP dapat mengkases
MySQL dan fungsi-fungsi PHP yang dapat digunakan untuk mengakses databases
MySQL. Ada beberapa tahapan dalam mengkases database yaitu koneksi database, query
ke database dan pemutusan koneksi database.
Untuk melakukan koneksi database agar dapat mengakses data pada database MySQL,
kita harus memahami terlebih dahulu fungsi yang dapat digunakan untuk melakukan
koneksi tersebut. Berikut fungsi yang dapat digunakan :
 mysql_connect(nama_host, nama_user, password);
nama_host  lokasi MySQL dipublikasikan
nama_user  nama user yang terdaftar dalam MySQL yang digunakan untuk
mengkases data pada MySQL
password  password yang digunakan untuk mengakses data pada MySQL
 mysql_select_db( database);
database  nama database pada MySQL yang akan diakses
Berikut ini contoh koneksi PHP dengan database MySQL :

Pada pembahasan ini dianggap anda telah memahami penggunaan MySQL seperti
membuat database, membuat tabel, menghapus tabel, dan sebagainya.
a) Buatlah database baru pada MySQL dengan nama db_berita
b) Kemudian buat dokumen php baru dengan nama koneksi.php pada folder
app_database, ketikan kode program berikut :
1. <?php
2. $host = "localhost";
3. $user = "root";
4. $pass = "";
5. $db = "db_berita";
6. $koneksi = mysql_connect($host,$user,$pass);

7. $select_db = mysql_select_db($db,$koneksi);
8. if($koneksi){
9. if($select_db){
10. echo "Database ditemukan";
11. }else{
12. echo "Database tidak ditemukan";
13. }
14. }else{
15. echo "Koneksi database gagal dilakukan";
16. }
17. ?>
c) Selanjutnya akses menggunakan browser alamat berikut
http://localhost/app_database/koneksi.php, jika koneksi berhasil maka akan
muncul pesan “Database ditemukan”, jika koneksi gagal maka akan muncul pesan
“Database tidak ditemukan” karena database “db_berita” tidak ada atau akan
muncul pesan “Koneksi database gagal dilakukan”
B. Membuat Tabel
Bentuk umum SQL untuk membuat suatu tabel adalah sebagai berikut :
1. CREATE TABLE nama_tabel (

2. field1 tipe(panjang),
3. field2 tipe(panjang),
4. ........
5. fieldn tipe(panjang),
6. PRIMARY KEY(field_key)
7. );
Sebuah tabel terdiri dari beberapa field yang berisi data-data informasi dari sebuah tabel
tersebut. Isi dari field-field tabel memiliki tipe-tipe data tersendiri. Berikut ini beberapa
tipe data yang dikenal dalam database MySQL :
1. Tipe Data Numerik

Tipe data numerik dibedakan menjadi dua macam kelompok yaitu tipe data integer dan
tipe data floating point. Tipe data integer untuk data bilangan bulat sedangkan tipe data
floating point untuk data bilangan desimal.
Tipe Data Kisaran Nilai

TINYINT (-128) – 127 atau 0-255

SMALLINT (-32768) – 32767 atau 0 – 65535
MEDIUMINT (3888608) – 8388607 atau 0 – 16777215
INT (-2147683648) – (21447683647) atau 0 – 4294967295
BEGINT (-922337203685775808) – 9223372036854775807 atau 0 –
184467440737099551615
FLOAT (-3.402823466E+38) – (-1.1775494351E-38), 0, dan
1.1759431E-38 – 3.4028223466E+38
DOUBLE (-1.797691348623157E+308) – (-2.2250738585072014E-08),
0, dan 2.2250738585072014E – 1.7976913486231E+308
2. Tipe Data String

Data-data yang termasuk kedalam tipe data string adalah sebagai berikut :
CHAR 1 – 255 karakter
VARCHAR 1 - 255 karakter
TINYBLOB, TINYTEXT 1 – 255 karakter
BLOB, TEXT 1 – 6555 karakter
MEDIUMBLOB, MEDIUMTEXT 1 – 1677215 karakter
LONGBLOB, LONGTEXT 1 – 4294967295 karakter
ENUM(‘elemen1’,’elemen2’,...) Maksimum 65535
SET(‘elemen1’,’elemen2’,....) Maksimum 64 elemen
3. Tipe Data Tanggal

Untuk tipe tanggal dan waktu (jam) tersedia tipe-tipe data field sebagai berikut :
DATETIME ‘1000-01-01 00:00’ to ‘999-12-31 23:59:59
DATE ‘1000-01-01’ to ‘999-12-31’
TIMESTAMP ‘1970-01-01 00:00:00 – 2037
TIME ‘-838:59:59’ to ‘838:59:59’
YEAR 1901 – 2155
Berikut ini contoh pembuatan tabel dengan struktur sebagai berikut :

Nama tabel : tbl_artikel
No Field Type Key Extra

1 id_artikel Int(10) PRI auto increment
2 judul_artikel Text
3 isi_artikel Text
4 Penulis Varchar(50)
5 Aktif Enum(“y”,”n”)
Untuk membuat tabel tersebut, berikut contoh program untuk membuat tabel dengan
fungsi mysql_db_query( )
a) Buatlah dokumen php dengan nama tbl_artikel.php pada folder app_database,

ketikan kode program berikut :
1. <?php
2. include "koneksi.php";
3. $query = "create table tbl_artikel(
4. id_artikel int(10)auto_increment,
5. judul_artikel text not null,
6. isi_artikel text not null,
7. penulis varchar(50) not null,
8. aktif enum('y','n') not null,
9. primary key(id_artikel)
10. )";
11. $create_table = mysql_db_query($db,$query);
12. if($create_table){
13. echo "<br>Tabel tbl_berita berhasil dibuat";
14. }else{
15. echo "<br>Tabel tbl_berita gagal dibuat";
16. }
17. ?>
b) Pada baris ke-2 terdapat sintaks program untuk memanggil dokumen koneksi.php
yang sebelumnya sudah kita buat pada pembahasan sebelumnya.
http://localhost/app_database/tbl_artikel.php, Jika tabel tbl_artikel berhasil dibuat
maka akan muncul pesan “Tabel tbl_artikel berhasil dibuat”, tetapi jika tabel
tbl_artikel gagal dibuat atau sudah ada maka akan muncul pesan “Tabel tbl_artikel
gagal dibuat”.
C. Menambah Data Record dengan Insert

Fungsi untuk menambah data record pada sebuah tabel yaitu dapat menggunakan fungsi
insert into, berikut bentuk penulisan sintaks fungsi insert into :
insert into nama_tabel(field1, field2,.....) values(‘data1’,’data2’,....)
Keterangan:
- nama_tabel nama tabel yang akan diakses dan ditambah datanya

- field1, field2, .... nama field atau kolom yang ada pada tabel dan dapat diisikan pada
tiap-tiap fieldnya.
- data1, data2, .... data yang akan dimasukkan ke dalam field-field tertentu
Berikut ini contoh program untuk menambah data record ke dalam tabel :
a) Buatlah doumen php dengan nama artikel-baru.php pada folder app_database,

1. <?php
3. $query = "insert into tbl_artikel(
4. id_artikel,
5. judul_artikel,
6. isi_artikel,
7. penulis,
8. aktif
9. )
10. values(
11. '',
12. 'Akreditasi Program Studi di STMIK KAPUTAMA Binjai Sangat Memuaskan',
13. 'STMIK KAPUTAMA Binjai memiliki 4 program studi yang seluruhnya telah
terakreditasi dengan peringkat B',
14. 'Siswan Syahputra',
15. 'y'
16. )";
17. $insert_data = mysql_db_query($db,$query);
18. if($insert_data){
19. echo "<br>Data berhasil ditambah";
20. }else{
21. echo "<br>Data gagal ditambah";
22. }
23. ?>
b) Selanjutnya akses menggunakan browser alamat berikut
http://localhost/app_database/tambah_artikel.php, Jika data berhasil ditambah maka
akan muncul pesan “Data berhasil ditambah”, tetapi jika data gagal ditambah maka akan
muncul pesan “Data gagal ditambah”.

Agar program lebih interaktif dalam pengisian data record yang dibutuhkan, maka dapat
dibuat halaman pengisian data menggunakan tag-tag HTML berupa form, kemudian data
yang ditampung pada form tersebut dimasukkan ke database.
Berikut ini contoh program untuk membuat halaman interaktif pengisian data :
a) Buatlah dokumen php dengan nama form-artikel.phppada folder app_database,

1. <html>
2. <head>
3. <title>Form Artikel</title>
4. </head>
5. <body>
6. <form method="post" name="form1" action="tambah-artikel.php">
7. <table>
8. <thead><h3>Form Artikel Baru</h3></thead>
9. <tr>
10. <td>Judul</td>
11. <td>:</td>
12. <td>
13. <input type="text" name="txtjudul" size="100"
placeholder="Masukkan judul artikel" />
14. </td>
15. </tr>
16. <tr>
17. <td>Isi Artikel</td>
18. <td>:</td>
19. <td>
20. <textarea name="txtisi_artikel" cols="75"></textarea>
21. </td>
22. </tr>
23. <tr>
24. <td>Penulis</td>
25. <td>:</td>
26. <td>
27. <input type="text" name="txtpenulis" size="100"
placeholder="Masukkan penulis" />
28. </td>
29. </tr>
30. <tr>
31. <td>Aktif</td>
32. <td>:</td>
33. <td>
34. <input type="radio" name="aktif" value="y" />Ya
35. <input type="radio" name="aktif" value="n" />Tidak
36. </td>
37. </tr>
38. <tr>


40. <input type="submit" name="btnsimpan"
value="Simpan" />
41. </td>
42. </tr>
43. </form>
44. </body>
45. </html>
b) Kemudian buatlah dokumen php dengan nama tambah-artikel.php pada folder
app_database, dokumen php tersebut berfungsi untuk proses simpan data yang dikirim
dari halaman form-artikel.php. Ketikan kode program berikut :
1. <?php
3. if(isset($_POST['btnsimpan'])){
4. $judul = $_POST['txtjudul'];
5. $isi_artikel = $_POST['txtisi_artikel'];
6. $penulis = $_POST['txtpenulis'];
7. $aktif = $_POST['aktif'];
8. $query = "insert into tbl_artikel(
9. id_artikel,
10. judul_artikel,
11. isi_artikel,
12. penulis,
13. aktif
14. )
15. values(
16. '',
17. '$judul',
18. '$isi_artikel',
19. '$penulis',
20. '$aktif'
21. )";
22. $insert_data = mysql_db_query($db,$query);
23. if($insert_data){
24. echo "<br>Data berhasil ditambah <a href='form-artikel.php'>kembali</a>";
25. }else{
26. echo "<br>Data gagal ditambah <a href='form-artikel.php'>kembali</a>";
27. }
28. }else{
29. header('location:form-artikel.php');
30. }
31. ?>
http://localhost/app_database/form-artikel.php, kemudian isi data pada inputan yang
tersedia sesuai dengan kebutuhan. Jika data berhasil disimpan akan muncul pesan “Data
berhasil ditambah”, jika data gagal disimpan maka akan muncul pesan “Data gagal
ditambah”

D. Menampilkan Data Record dengan Select

Berikut ini penulisan sintaks untuk menampilkan seluruh data record pada suatu tabel:
select * from nama_tabel where syarat1, syarat2,.... order by nama_field asc/desc
- nama_tabel nama tabel yang akan diakses datanya

- syarat1,syarat2,... syarat mengenai data apa yang akan diakses
- order by nama_field asc/descuntuk mengurutkan berdasarkan nama field yang
ditentukan, gunakan asc jika ingin mengurutkan data dari terkecil ke kebesar (urutan
angka), dari A-Z (urutan huruf). Dan untuk kebalikkan nya gunakan desc.
Jika hanya ingin menampilkan data record berdasarkan field tertentu, maka gunakan
sintaks berikut :
select field1, field2,... from nama_tabel where syarat1, syarat2,.... order by nama_field
asc/desc
- field1,field2,....  nama field yang data nya akan dibaca
Berikut ini contoh program untuk menampilkan seluruh data record pada suatu tabel :
a) Buatlah dokumen php dengan nama tampil-artikel.php pada folder app_database,

1. <?php
3. ?>
4. <html>
5. <head>
6. <title>Tampil Artikel</title>
7. </head>
8. <body>
9. <table border="1" width="100%" cellpadding="0" cellspacing="0">
10. <thead><h3>Daftar Artikel</h3></thead>
11. <tr>
12. <th>No</th>
13. <th width="20">ID</th>
14. <th width="400">Judul</th>
15. <th width="480">Isi Artikel</th>
16. <th width="150">Penulis</th>
17. <th>Aktif</th>
18. <th>Aksi</th>
19. </tr>
20. <?php

21. $sql = "select * from tbl_artikel order by id_artikel desc";

22. $query = mysql_query($sql);
23. $no = 0;
24. while($data = mysql_fetch_array($query)){
25. $no++;
26. echo "<tr>
27. <td align='center'>".$no."</td>
28. <td align='center'>".$data['id_artikel']."</td>
29. <td>".$data['judul_artikel']."</td>
30. <td>".$data['isi_artikel']."</td>
31. <td align='center'>".$data['penulis']."</td>
32. <td align='center'>".$data['aktif']."</td>
33. <td align='center'>
34. <a href='form-edit-artikel.php?id=$data[id_artikel]'>Ubah</a> |
35. <a href='hapus-artikel.php?id=$data[id_artikel]'>Hapus</a>
36. </td>
37. </tr>
38. ";
39. }
40. ?>
41. </table>
42. </body>
43. </html>
http://localhost/app_database/tampil-artikel.php, maka akan menampilkan data
record pada tabel tbl_artikel.
E. Mengubah Data Record

Untuk mengubah data record pada suatu tabel dapat menggunakan fungsi UPDATE.
Berikut ini penulisan sintaks fungsi UPDATE
UPDATE nama_tabel SET field1 = nilai_baru, field2 = nilai_baru2, ..... where syarat1,
syarat2, ....
Keterangan
- nama_tabel nama tabel yang data record nya akan diubah

- fieldnama field atau kolom yang datanya record akan diubah
- nilai_barudata nilai baru yang akan dimasukkan ke dalam kolom tabel

- syarat  ketentuan yang harus dipenuhi untuk mengubah data
Berikut ini contoh program untuk mengubah data :
a) Buatlah dokumen php dengan nama form-edit-artikel.php pada folder app_database,

1. <?php
3. if(empty($_GET['id'])){
4. header('location:tampil-artikel.php');
5. }else{
6. $id = $_GET['id'];
7. $sql = "select * from tbl_artikel where id_artikel='$id'";
9. $data = mysql_fetch_array($query);
10. ?>
11. <html>
12. <head>
13. <title>Form Edit Artikel</title>
14. </head>
15. <body>
16. <form method="post" name="form1" action="<?php echo 'ubah-
artikel.php?id='.$data['id_artikel'];?>">
17. <table>
18. <thead><h3>Form Edit Artikel</h3></thead>
19. <tr>
20. <td>Judul</td>
21. <td>:</td>
22. <td>
23. <input type="text" name="txtjudul" size="100"
value="<?php echo $data['judul_artikel'];?>" />
24. </td>
25. </tr>
26. <tr>
27. <td>Isi Artikel</td>
28. <td>:</td>
29. <td>
30. <textarea name="txtisi_artikel" cols="75"><?php echo
$data['isi_artikel'];?></textarea>
31. </td>
32. </tr>
33. <tr>
34. <td>Penulis</td>
35. <td>:</td>
36. <td>
37. <input type="text" name="txtpenulis" size="100"
value="<?php echo $data['penulis'];?>" />
38. </td>
39. </tr>

40. <tr>
41. <td>Aktif</td>
42. <td>:</td>
43. <td>
44. <?php
45. if($data['aktif'] == 'y'){
46. $cek_y = "checked";
47. $cek_n = "";
48. }else{
49. $cek_y = "";
50. $cek_n = "checked";
51. }
52. ?>
53. <input type="radio" name="aktif" value="y" <?php echo
$cek_y;?> />Ya
54. <input type="radio" name="aktif" value="n" <?php echo
$cek_n;?> />Tidak
55. </td>
56. </tr>
57. <tr>
59. <input type="submit" name="btnupdate"
value="Update" />
60. </td>
61. </tr>
62. </table>
63. </form>
64. </body>
65. </html>
66. <?php
67. }
68. ?>
b) Kemudian buatlah dokumen php dengan nama ubah-artikel.php pada folder
app_database, ketikan kode program berikut :
1. <?php
5. }else{
6. $id = $_GET['id'];
7. $judul = $_POST['txtjudul'];
8. $isi = $_POST['txtisi_artikel'];
9. $penulis = $_POST['txtpenulis'];
10. $aktif = $_POST['aktif'];
11. $sql = "update tbl_artikel set judul_artikel='$judul', isi_artikel='$isi',
penulis='$penulis', aktif='$aktif' where id_artikel='$id'";
13. if($query){

15. }else{
16. echo "Artikel gagal diupdate <a href='tampil-
artikel.php'>kembali</a>";
17. }
18. }
19. ?>
http://localhost/app_database/tampil-artikel.php, kemudian klik ubah pada artikel yang
akan anda ubah, maka akan muncul halaman form-edit-artikel.php seperti contoh
tampilan berikut ini :
d) Kemudian ubahlah data sesuai dengan kebutuhan, selanjutnya klik tombol Update.Jika
proses update berhasil maka akan dialihkan kembali ke halaman tampil-artikel.php,
tetapi jika proses update gagal maka akan muncul pesan “Artikel gagal diupdate”.
F. Menghapus Data Record

Fungsi untuk menghapus data record pada suatu tabel yaitu DELETE, berikut ini
penulisan sintaks fungsi DELETE :
DELETE FROM nama_tabel where syarat1, syarat2, ...
Berikut ini contoh penggunaan fungsi DELETE :
a) Buatlah dokumen php dengan nama hapus-artikel.php pada folder app_database,

1. <?php
5. }else{
6. $id = $_GET['id'];
7. $sql = "delete from tbl_artikel where id_artikel='$id'";
9. if($query){

11. }else{
12. echo "Artikel gagal dihapus <a href='tampil-artikel.php'>kembali</a>";
13. }
14. }
15. ?>
http://localhost/app_database/tampil-artikel.php, kemudian klik hapus pada artikel
yang akan dihapus, jika proses hapus berhasil maka data artikel tersebut akan hilang,
tetapi jika proses hapus gagal maka akan muncul pesan “Artikel gagal dihapus”.

Modul Pemrograman Web I

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Pemrograman Web I

Diunggah oleh

Hak Cipta:

Format Tersedia

PEMROGRAMAN WEB I

Pengenalan Dasar Web

 Mahasiswa mampu memahami perkembangan teknologi internet dan website

Pemrograman Web 1 | Husnul Khair. M.Kom

Internet (interconnection-network) adalah seluruh jaringan

B. World Wide Web (WWW)

WWW (World Wide Web) adalah suatu ruang informasi yang

C. HTTP (Hypertext Transfer Protocol)

Adalah protokol yang menentukan aturan yang perlu diikuti oleh

D. URL (Uniform Resource Locator)

2. Dapat diibaratkan sebagai suatu alamat, yang terdiri dari:

Pemrograman Web 1 | Husnul Khair. M.Kom

a. Protokol yang digunakan oleh suatu browser untuk mengambil informasi

b. Nama komputer (server) dimana informasi tersebut berada

c. Jalur/path serta nama file dari suatu informasi

Format umum URL:

 http  protokol yang digunakan

 www.kaputama.ac.id  nama host atau server komputer

 profil  jalur/path dari informasi yang dicari

 index.html  nama file

a. HTTP  protokol standar untuk suatu dokumen web

c. News NNTP (Network News Transfer Protocol)  digunakan untuk mendistribusikan

d. Telnet  digunakan untuk login ke suatu server komputer.

Pemrograman Web 1 | Husnul Khair. M.Kom

F. DNS (Domain Name System)

H. Server and Client

Pemrograman Web 1 | Husnul Khair. M.Kom

• Berjalan pada komputer user

• Merupakan tool untuk melakukan navigasi di web

• Menampilkan dokumen web

- Apache : server web antar-platform

Web dapat dikategorikan menjadi dua, yaitu

Pemrograman Web 1 | Husnul Khair. M.Kom

Web yang menampilkan informasi-informasi yang sifatnya statis (tetap)

2. Web dinamis atau interaktif.

Dua kategori web programming:

» Server Side Programming

» Client Side Programming

Contoh: CGI/Perl, ASP, JSP, PHP, CFM

Contoh: JavaScript, HTML, VBScript

Pemrograman Web 1 | Husnul Khair. M.Kom

Pemrograman Web 1 | Husnul Khair. M.Kom

HTML (Format text, Image, Link)

1. HTML (HyperText Markup Language)

 Mahasiswa Mampu menggunakan tag HTML

Pemrograman Web 1 | Husnul Khair. M.Kom

A. HTML (HyperText Markup Language)

• Bahasa yang digunakan untuk menampilkan informasi pd halaman web.

• bahasa ini menggunakan tanda (markup) untuk menandai perintah-perintahnya

Software yang diperlukan:

• Text editor sederhana.

Linux: gEdit, mcedit

• Web browser untuk menampilkan dokumen web yang dibuat.

Windows: Internet Explorer, dan Firefox

Linux: Firefox dan Conqueror.

B. Istilah – Istilah dalam HTML

<namatag> ..... </namatag>

<title>

Pemrograman Web 1 | Husnul Khair. M.Kom

C. Tag Utama dalam Struktur Dokumen HTML

Pemrograman Web 1 | Husnul Khair. M.Kom

• Mendiskripsikan tujuan pengkodean tertentu dalam dokumen HTML

Contoh Penggunaan Komentar

Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute