MODUL PRAKTIKUM

WEB PROGRAMMING

Disusun Oleh :
Muhammad Fahmi

UNIVERSITAS NUSA MANDIRI

Jakarta
2023
 Web Programming I
Universitas Nusa Mandiri
DAFTAR ISI

MINGGU KE I KONSEP DASAR WEB ....................................................................1

MINGGU KE 2 PENGENALAN HTML .....................................................................7
MINGGU KE 3 PENGENALAN PHP ........................................................................22
MINGGU KE 4 OPERATOR ......................................................................................30
MINGGU KE 5 FORM ...............................................................................................36
MINGGU KE 6 FORM LANJUTAN ..........................................................................41
MINGGU KE 7 PERCABANGAN .............................................................................47
MINGGU KE 9 PERULANGAN ................................................................................52
MINGGU KE 10 JAVASCRIPT..................................................................................56
MINGGU KE 11 CSS..................................................................................................60
MINGGU KE 12 MEMBUAT WEB DINAMIS ..........................................................70
MINGGU KE 13 – 16 PRESENTASI PROJECT............................................................71

ii
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE I
KONSEP DASAR WEB

Deskripsi
Konsep dasar dalam pemrograman web melibatkan sejumlah elemen dan prinsip dasar yang
membentuk dasar pengembangan situs web. Berikut adalah beberapa konsep dasar dalam
pemrograman web:
HTML (Hypertext Markup Language)
HTML adalah bahasa markah yang digunakan untuk membuat struktur dasar halaman web. Ini
terdiri dari elemen-elemen seperti judul, paragraf, gambar, tautan, dan lainnya.
CSS (Cascading Style Sheets)
CSS digunakan untuk mengatur tampilan dan gaya halaman web. Ini mencakup warna, jenis
huruf, tata letak, dan elemen desain visual lainnya.
JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaktivitas dalam
halaman web. Ini memungkinkan Anda untuk menambahkan fungsi, validasi formulir, animasi, dan
banyak lagi.
Responsif dan Mobile-Friendly
Konsep responsif mengacu pada desain web yang dapat menyesuaikan diri dengan berbagai
perangkat dan ukuran layar. Ini penting karena pengguna mengakses situs web dari berbagai
perangkat, seperti ponsel cerdas, tablet, dan komputer.
Pengoptimalan Gambar dan Kinerja
Mengoptimalkan gambar dan kinerja situs web adalah konsep penting dalam pemrograman
web. Ini termasuk kompresi gambar, caching, dan praktik terbaik untuk mempercepat waktu muat
halaman.
Memahami konsep-konsep dasar ini adalah langkah pertama yang penting dalam membangun
situs web yang efektif dan berkinerja tinggi.
Tujuan Pembelajaran :
1. Mampu memahami konsep dasar Pemrograman Web
2. Mampu memahami istilah-istilah yang ada dalam pemrograman web

3
 Web Programming I
Universitas Nusa Mandiri
3. Mampu menggunakan text editor
4. Mampu mengimplementasikan Struktur Navigasi

1.1. Dasar-Dasar Website

1.1.1. Internet
Internet adalah singkatan dari 'internetwork', yang mengacu pada jaringan komputer yang
saling terhubung membentuk sistem global dengan penggunaan protokol TCP/IP. Dalam istilah
umum, internet dapat dianggap sebagai medium pertukaran informasi dan komunikasi, di mana
informasi dapat diakses secara bebas tanpa hambatan.
Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan internet diantaranya
yaitu:
1. World Wide Web (WWW)
WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan data
dan informasi untuk dapat digunakan secara massal.
2. Website
Website atau situs web merupakan sebuah alamat tertentu di WWW yang menyediakan
informasi tertentu. Untuk membuka sebuah situs web, anda dapat menggunakan
browser.
3. Web Pages (Halaman Web)
Web pages atau halaman web merupakan bagian dari situs web, apabila situs web
diumpamakan merupakan sebuah buku, maka halaman web merupakan lembaran-
lembaran kertas penyusun buku tersebut.
4. Home Page (Halaman Muka)
Homepage merupakan halaman muka dari sebuah situs web, atau ibarat cover muka
sebuah buku. Homepage biasanya berupa outline dari isi situs web yang bersangkutan.
5. Browser
Browser adalah aplikasi yang digunakan untuk berselancar didunia internet. Browser
dapat memandu pengguna internet untuk berpindah antar situs web dengan mudah.
6. URL (Universal Resource Locator)
URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu
internet. Contoh URL adalah: http://www.google.com

4
 Web Programming I
Universitas Nusa Mandiri
7. HTTP (Hypertext Transfer Protocol)
HTTP adalah bagian dari sebuah URL yang mengidentifikasikan lokasi web, dan
digunakan dalam protokol HTML.
8. DNS (Domain Name System)
DNS merupakan sistem database terdistribusi yang tidak banyak dipengaruhi oleh
bertambanhnya database. DNS menjamin informasi host terbaru akan disebarkan ke
jaringan bila diperlukan.
9. TCP/IP (Transmission Control Protocol / Internet Protocol)
TCP/IP (Transmission Control Protocol/Internet Protocol) merupakan metode-
metode yang digunakan untuk menghubungi server. TCP/IP merupakan bahasa
standarisasi untuk internet.
10. IP (Internet Protocol)
IP (Internet Protocol) merupakan protokol yang digunakan dalam internet, secara
teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi
yang akan dikirim melalui internet.
11. Hyperlink
Hyperlink atau disebut link saja merupakan sebuah fasilitas yang sangat berperan
mempopulerkan pengguna internet, karena mampu mereferensikan sebuah teks atau
gambar ke alamat lain di internet.
12. Web Browser
Menggunakan web browser mudah, yang diperlukan hanyalah Anda harus memiliki
alamat web yang akan dibuka. Alamat ini biasa disebut dengan Uniform Resource
Locator (URL). Di dalam sistem operasi Windows Anda juga terdapat program web
browser sertaan, yaitu Internet Explorer. Namun demikian diluar terdapat banyak
program alternative web browser yang sebagian besar bersifat gratis, seperti Netscape,
Firefox, Opera, Avant Browser, dan seterusnya.

1.1.2. Perangkat Lunak Web Server

Web Server adalah sebuah perangkat lunak server yang berfungsi menerima
permintaan HTTP atau HTTPS dari Client yang dikenal dengan web browser dan

5
 Web Programming I
Universitas Nusa Mandiri
mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya
berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah:
a. Apache, web server antar platform
1) XAMPP
2) PHPTriad; discontinued
3) Apache2Triad
b. Internet Information Service (IIS), hanya dapat berjalan di sistem operasi MS Windows

1.2. Struktur Navigasi

Struktur Navigasi adalah susunan menu atau hierarki dalam suatu situs web yang
menggambarkan isi setiap halaman serta tautan atau navigasi yang menghubungkan setiap halaman
dalam situs web tersebut. Struktur Navigasi dapat dianggap sebagai representasi visual dari
hubungan dan aliran kerja seluruh elemen yang akan digunakan dalam aplikasi.
Struktur Navigasi dapat dikelompokkan berdasarkan berbagai faktor seperti kebutuhan objek,
kemudahan penggunaan, tingkat interaktivitas, dan kesederhanaan dalam pembuatannya, yang
semuanya dapat memengaruhi waktu pembuatan situs web. Dalam penggambarannya, Struktur
Navigasi umumnya terbagi menjadi empat jenis berbeda, yaitu Linier, Non Linier, Hirarkis, dan
Campuran (Composit).
Ada empat bentuk dasar dari peta navigasi yang sering digunakan dalam proses pembuatan
aplikasi web, meliputi:
a. Struktur Navigasi Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang
menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan
yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu
halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya.

Gambar 1.1. Struktur Navigasi Linier

6
 Web Programming I
Universitas Nusa Mandiri
Contoh :

Gambar 1.2 Contoh Struktur Navigasi Linier

b. Struktur Navigasi Hirarki

Struktur navigasi hirarki sering disebut sebagai struktur bercabang, yang bergantung pada
percabangan untuk menampilkan data berdasarkan kriteria tertentu. Menu awal dalam struktur ini
disebut sebagai Halaman Utama (Master Page), yang memiliki halaman-halaman cabang yang
dikenal sebagai Halaman Pendukung (Slave Page). Ketika salah satu Halaman Pendukung dipilih
atau diaktifkan, tampilan akan beralih ke Halaman Utama yang baru (Halaman Utama kedua), dan
seterusnya. Dalam struktur navigasi ini, tampilan linier tidak diperbolehkan.

Gambar 1.3. Struktur Navigasi Hirarki

Contoh :

Gambar 1.4 Contoh Struktur Navigasi Hirark

7
 Web Programming I
Universitas Nusa Mandiri
c. Struktur Navigasi Non-Linier
Struktur navigasi non-linier atau struktur tidak berurut merupakan pengembangan
dari struktur navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang.
Percabangan yang dibuat pada struktur nonlinier ini berbeda dengan percabangan pada
struktur hirarki, karena pada percabangan nonlinier ini walaupun terdapat percabangan,
tetapi tiap-tiap tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan
Slave Page.

Gambar 1.5. Struktur Navigasi Non-Linier

Contoh :

Gambar 1.6. Contoh Struktur Navigasi Non-Linier

d. Struktur Navigasi Campuran

Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya
yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur
navigasi bebas. Struktur navigasi ini banyak digunakan dalam pembuatan website karena
struktur ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-
interaksian yang lebih tinggi.

Gambar 1.7. Struktur Navigasi Campuran

8
 Web Programming I
Universitas Nusa Mandiri
Contoh :

Gambar 1.8. Contoh Struktur Navigasi Campuran

Tugas 01
Amatilah sebuah halaman website, kemudian buatkan struktur navigasi dari halamanweb
tersebut

9
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 2
PENGENALAN HTML

Deskripsi :
HTML, atau Hypertext Markup Language, adalah bahasa markah yang digunakan untuk
membuat dan mengatur struktur dasar halaman web. HTML digunakan untuk menentukan elemen-
elemen dan konten dalam sebuah dokumen web, yang kemudian ditampilkan dalam bentuk halaman
web ketika diakses melalui peramban web (browser). Berikut adalah deskripsi lebih rinci tentang
HTML:
Hypertext Markup Language (HTML)
HTML adalah standar yang digunakan untuk membuat dokumen web. Ini adalah bahasa dasar
yang digunakan untuk menggambarkan struktur dokumen dan menyediakan petunjuk tentang
bagaimana halaman web harus ditampilkan.
Elemen HTML
Dokumen HTML terdiri dari elemen-elemen HTML, seperti judul, paragraf, tautan
(hyperlink), gambar, formulir, dan banyak lainnya. Setiap elemen HTML ditandai dengan tag
HTML khusus, yang menggambarkan jenis elemen dan bagaimana elemen tersebut harus
ditampilkan.
Tag HTML
Tag HTML adalah komponen utama dalam dokumen HTML. Mereka digunakan untuk
mengelilingi konten atau elemen dan memberikan petunjuk tentang cara menampilkan elemen
tersebut. Contoh tag HTML termasuk <p> untuk paragraf, <a> untuk tautan, dan <img> untuk
gambar.
Struktur Dokumen
HTML mengatur dokumen dalam struktur hierarkis yang terdiri dari elemen-elemen
bersarang. Dokumen dimulai dengan tag <html> dan terdiri dari dua bagian utama: <head> (bagian
kepala) yang berisi informasi metadata seperti judul halaman, dan <body> (badan) yang berisi
konten yang akan ditampilkan di halaman web.
Atribut HTML
Beberapa tag HTML dapat memiliki atribut yang memberikan informasi tambahan tentang

10
 Web Programming I
Universitas Nusa Mandiri
elemen tersebut. Misalnya, tag gambar <img> dapat memiliki atribut src untuk menentukan sumber
gambar yang akan ditampilkan.
Hyperlink
HTML memungkinkan pembuatan tautan antara halaman web yang berbeda. Tautan ini
memungkinkan pengguna untuk menavigasi melalui berbagai halaman web dengan mengklik tautan.
Gaya dan Format
Meskipun HTML digunakan untuk mengatur struktur dokumen, tampilan dan format halaman
web sering ditingkatkan dengan menggunakan CSS (Cascading Style Sheets) untuk mengatur
tampilan dan gaya halaman.
Pengembangan Web
HTML adalah bagian integral dari pengembangan web. Dalam kombinasi dengan CSS dan
JavaScript, pengembang web menggunakan HTML untuk membuat halaman web yang beragam dan
interaktif.
HTML adalah bahasa dasar dalam pengembangan web dan merupakan fondasi dari hampir
semua halaman web yang Anda lihat secara online. Dengan memahami konsep dan cara kerja
HTML, Anda dapat membuat dan mengelola halaman web dengan efektif.
Tujuan Pembelajaran :
1. Memahami skrip html
2. Mampu menggunakan skrip html
3. Mampu menggunakan tag dalam penulisan skrip html
4. Mampu menggunakan tabel, penggunaan cell padding, dan cell span

2.1. Pengertian HTML (Hypertext Markup Language)

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di
web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapapun,
pengembangannya dilakukan oleh banyak orang di banyak Negara dan bias dikatakan sebagai
sebuah bahasa yang dikembangkan bersama-sama secara global.
Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks
apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag- teks yang dimulai
dengan symbol < dan berakhir dengan sebuah symbol >.

11
 Web Programming I
Universitas Nusa Mandiri
Editor teks yang digunakan oleh penyusun adalah menggunakan Notepad dan XAMPP Versi
1.8.1 untuk web servernya dengan bahasa pemrograman PHP Versi 5.

2.2. Struktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag
berakhir termasuksimbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen HTML
dapat bersarang di dalam elemen lainnya. Sebuah dokumen HTML standar terlihat seperti ini :

Keterangan :
1. Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
2. Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini akan terlebih
dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag <META> dan <TITLE>. Tag
<META> merupakan informasi atau header suatu dokumen HTML. Atribut yang dimiliki oleh tag ini
antara lain:
a. HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara otomatis
dalam jangka waktu tertentu.
b. CONTENT, atribut ini berisi informasi tentang isi document HTML yang akandipanggil.
c. NAME, atribut ini merupakan identifikasi dari meta itu sendiri. Tag <META> dalam suatu
document HTML boleh ada maupun tidak.
3. Tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman web memiliki
judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>. Judul ini akan
muncul dalam titlebar dari browser.
4. Tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman web.

12
 Web Programming I
Universitas Nusa Mandiri
Contoh penggunaan script HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpan dengan nama
Contoh01.php

Judul Web

Perintah dibuat di antara

<body> dan <body>

Kemudian simpan file di atas di dalam folder c:\XAMPP\htdocs\ buat folder baru untuk
menyimpan file di dalam folder htdocs. Simpan file dengan nama contoh01.html. Pembuatan nama
file pada saat penyimpanan harus diakhiri dengan extention “.html”.

Cara penyimpanan dengan Notepad, perhatikan cara berikut :

Sertakan
extension .html
pada nama
filenya contoh :
contoh01.html

Pastikan memilih
All Files pada
Save as Type

Untuk melihat hasil dari file di atas dapat menggunakan browser Mozilla, google chrome,
internet explorer atau jenis browser lain. Ketikkan pada address bar “Localhost\Nama Folder

13
 Web Programming I
Universitas Nusa Mandiri
Penyimpanan\”, kemudian pilih file contoh01.html
Sebelum di ketikkan alamat file tersebut, pastikan anda telah menjalankan Module Apache
pada Xampp Control Panel.
Lihat gambar di bawah ini :

Ketikkan localhost
kemudian nama folder
penyimpanan file

Klik di contoh01.html

Hasilnya :

Kode-kode dalam HTML biasanya disebut TAG. Tag adalah sesuatu yang digunakan untuk
menandai elemen-elemen dalam suatu dokumen HTML. Tag dalam HTML terdiri dari tanda lebih

14
 Web Programming I
Universitas Nusa Mandiri
kecil ( < ), tanda lebih besar ( > ), dan garismiring ( / ). Biasanya Tag dituliskan secara berpasangan,
misanya <h1> dan </h1>. Tag yang tidak menggunakan garis miring ( / ) adalah Tag pembuka
atau awal elemen. Sedangkan yang Tag yang mengandung garis miring ( / ) adalah penutup elemen
atau akhir elemen. Namun, ada juga Tag yang dalam pemakaiannya tidak berpasangan, diantaranya
adalah :
1. Tag untuk ganti paragraph yaitu <p>
2. Tag untuk ganti baris atau line break yaitu <br>
3. Tag untuk garis datar yaitu <hr>
4. Tag list item yaitu <li>
Untuk tag yang tidak berpasangan diatas, sebaiknya tetap ditulis menggunakan
pasangannya. Hal ini dilakukan untuk mengantisipasi standar rekomendasi HTML
kedepannya. Penulisan untuk semua Tag bebas, maksudnya kita bisa menggunakan huruf
besar, huruf kecil, bahkan dicampur ( tidak case sensitive ). Tapi untuk mengantisipasi
standar penulisan Tag, sebaiknya kita menggunakan huruf kecil semua.
Jenis – jenis tag dalam HTML :

15
Web Programming I
Universitas Nusa Mandiri

16
 Web Programming I
Universitas Nusa Mandiri
Contoh script penggunaan Tag HTML
Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpandengan
nama Contoh02.html

Hasil Tampilan

Tugas 02 :
Buatlah script html sehingga menghasilkan tampilan berikut ini :

17
 Web Programming I
Universitas Nusa Mandiri
2.3. Pembuatan Tabel Menggunakan HTML
Tabel penting peranannya dalam halaman Web, selain untuk menampilkan teks atau gambar
dalam format lajur dan kolom bias juga menggunakan tabel untuk membantu me-layout tampilan
halaman.
Tabel merupakan sebuah kotak yang terdiri atas baris/row dan kolom.column. Untuk
membuat tabel, anda menggunakan tag <table> dan menutupnya dengan tag </table>. Anda bisa
juga menambahkan atribut lain di tag <table> pembuka. Misalnya menentukan warna, border, dan
sebagainya.
Di dalam tag <table> ada beberapa tag lain yang perlu dipahami, yaitu :
a. Tag <tr>
Artinya tag untuk menuliskan baris biasa di tabel. TR singkatan dari Table Row.
b. Tag <td>
Artinya tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalamtag
<tr>. TD singkatan dari Table Data.
c. Tag <th>
Artinya tag untuk menuliskan kotak biasa seperti <td>, namun untuk header tabel. TH
singkatan dari Table Header.

2.4 Menggabungkan sel

Sel-sel tabel secara normal memiliki lebar dan tinggi yang sama. Jika kita ingin membuat
sebuah sel memiliki lebar atau tinggi yang berbeda dari sel-sel lainnya, maka satu-satunya cara yang
bisa kita lakukan adalah dengan menggabungkan beberapa sel menjadi satu. Cara ini disebut merge
atau penggabungan sel.
Untuk menggabungkan sel-sel tabel ini diperlukan atribut rowspan atau colspan. Atribut
rowspan digunakan untuk menggabungkan sel-sel tabel pada kolom yang sama. Atribut colspan untuk
menggabungkan sel-sel tabel pada baris yang sama. Berikut contoh penggabungan kedua jenis :
1. Secara Vertikal (Rowspan)
Tabel dengan kode HTML dibawah ini sel-sel kolom pertama akan digabung:

18
 Web Programming I
Universitas Nusa Mandiri

2. Secara Horisontal (Colspan)

Tabel dengan kode HTML dibawah ini sel-sel baris pertama akan digabung:

19
 Web Programming I
Universitas Nusa Mandiri

Contoh script pembuatan tabel

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpandengan
nama Contoh03.html

20
 Web Programming I
Universitas Nusa Mandiri

Jika dilihat di browser, maka terlihat sebagai berikut :

21
 Web Programming I
Universitas Nusa Mandiri

2.5 Penggunaan Cellpadding dan cellspacing

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpandengan
nama tabelcell.html

Hasil di browser

22
 Web Programming I
Universitas Nusa Mandiri

2.6. Penggunaan Rowspan dan colspan

Buat lembar baru pada Notepad, kemudian ketikkan perintah di bawah ini. Simpandengan
nama tabelspan.html

Hasil di browser :

23
 Web Programming I
Universitas Nusa Mandiri

Tugas 03:
Buat script HTML untuk bentuk tampilan di bawah ini :

24
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 3
PENGENALAN PHP

Deskripsi :
PHP (Hypertext Preprocessor) adalah bahasa pemrograman yang sangat populer dalam
pengembangan aplikasi web. PHP dirancang khusus untuk mengembangkan aplikasi web yang
dinamis dan interaktif. Berikut adalah deskripsi lebih rinci tentang PHP:
Bahasa Pemrograman Web
PHP adalah bahasa pemrograman yang dikhususkan untuk pengembangan aplikasi web. Ini
digunakan untuk membuat skrip yang dijalankan di sisi server web, sehingga memungkinkan
pengembang untuk menghasilkan halaman web yang dapat berinteraksi dengan pengguna.
Skrip Sisi Server
PHP berfungsi di sisi server, yang berarti bahwa skrip PHP dieksekusi di server web sebelum
hasilnya dikirim ke peramban pengguna. Ini berbeda dengan HTML, yang diinterpretasikan di sisi
klien (di peramban).
Kemampuan Dinamis
PHP memungkinkan pembangunan situs web yang dinamis, di mana konten dapat berubah
sesuai dengan input pengguna atau variabel lainnya. Ini memungkinkan pengembang untuk
membuat situs web yang responsif dan dapat beradaptasi dengan permintaan pengguna.
Integrasi dengan Database
PHP sangat cocok untuk menghubungkan aplikasi web dengan database. Ini memungkinkan
pengembang untuk mengambil, menyimpan, dan memanipulasi data dari dan ke database, sehingga
data dapat disajikan kepada pengguna dalam berbagai cara.
Mudah Dipelajari dan Digunakan
PHP adalah bahasa yang relatif mudah dipelajari, terutama bagi pengembang pemula.
Syntaxnya mirip dengan bahasa pemrograman lain seperti C dan Perl, dan banyak sumber daya
belajar dan dokumentasi yang tersedia.
Sintaksis PHP
PHP menggunakan sintaksis yang terintegrasi dengan HTML. Ini memungkinkan
pengembang untuk menanamkan skrip PHP di dalam dokumen HTML, yang disebut "code

25
 Web Programming I
Universitas Nusa Mandiri

embedding." Skrip PHP dimulai dengan <?php dan diakhiri dengan ?>.
Komunitas Besar
PHP memiliki komunitas pengembang yang besar dan aktif. Ada banyak sumber daya, forum,
dan perpustakaan yang tersedia untuk membantu pengembang dalam mengatasi tantangan dan
memecahkan masalah dalam pengembangan aplikasi web.
Sistem Manajemen Konten (CMS)
Banyak CMS terkenal seperti WordPress, Drupal, dan Joomla! dibangun dengan
menggunakan PHP. Ini memungkinkan pengguna yang tidak memiliki latar belakang pemrograman
untuk membuat dan mengelola situs web dengan mudah.
Kinerja yang Baik
PHP memiliki kinerja yang baik dalam mengolah permintaan web karena prosesnya dilakukan
di sisi server. Ini membuatnya cocok untuk mengembangkan situs web yang dapat menangani
banyak pengguna secara bersamaan.
PHP digunakan secara luas dalam pengembangan web dan menjadi salah satu bahasa
pemrograman yang paling penting dalam ekosistem internet. Ia memungkinkan pengembang untuk
membuat berbagai jenis situs web, mulai dari situs pribadi hingga aplikasi web kompleks dan
berbasis data.
Tujuan Pembelajaran :
1. Mampu memahami pengenalan bahasa script PHP
2. Mampu memahami deklarasi variabel, konstanta, tipe data dan komentar dalamPHP
3. Mampu membedakan penggunaan PHP dan HTML
4. Mampu menuliskan sintaks dalam bahasa script PHP

3.1. Pengertian PHP Hypertext Preprocessor (PHP)

PHP atau PHP Hypertext Prepocessor adalah sebuah bahasa script berbasis server (server-
side) yang mampu mem-parsing kode php dari kode web dengan ekstensi .php, sehingga
menghasilkan tampilan website yang dinamis di sisi client (browser). Dengan PHP, anda bisa
menjadikan halaman HTML menjadi lebih powerful dan bisa dipakai sebagai aplikasi lengkap,
misalnya untuk beragam aplikasi cloud computing.
PHP adalah bahasa script yang sangat cocok untuk pengembangan web dan dapat dimasukkan
ke dalam HTML. PHP awalnya dikembangkan oleh seorang programmer bernama Rasmus Lerdrof

26
 Web Programming I
Universitas Nusa Mandiri

pada tahun 1995, namun semenjak itu selalu dikembangkan oleh kelompokindependen yang disebut
Group PHP dan Kelompok ini juga yang mendefinisikan standar de facto untuk PHP karena tidak
ada spesifikasi formal. Saat ini pengembangannya dipimpin oleh duo maut, Andi Gutmans dan
Zeev Suraski.
Yang menyebabkan PHP banyak dipakai oleh banyak orang adalah karena PHP adalah
perangkat lunak bebas (Open Source) yang dirilis di bawah lisensi PHP. Artinya untuk menggunakan
bahasa pemrograman ini gratis, bebas, dan tidak terbuka.

3.2. Memasukkan Kode PHP

Tidak seperti halaman HTML biasa, kode PHP tidak akan diberikan oleh serversecara langsung
ketika ada permintaan dari client (browser), namun melalui pemrosesan dari sisi server, makanya
PHP disebut skrip server-side.
Kode PHP dimasukkan ke dalam kode HTML dengan cara menyelipkannya di dalam kode
HTML. Untuk membedakan kode PHP dengan kode HTML, di depan kode PHP tersebut diberi tag
pembuka dan diakhir kode PHP diberi tag penutup.
Dengan adanya kode PHP, sebuah halaman web bisa melakukan banyak hal yang dinamis,
seperti mengakses database, membuat gambar, membaca dan menulis file, dan sebagainya. Hasil
akhir pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode HTML untuk ditampilkan di
browser. Ada 4 jenis tag yang bisa digunakanuntuk memasukkan kode PHP.
Tabel III.1 Jenis-jenis Tag PHP

Jenis Tag Tag Pembuka Tag Penutup

Tag Standar < ? php ?>
Tag Pendek <? ?>
Tag ASP <% %>
Tag Script <script language = “php”> </script>

Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag script. Di dalam
modul ini bahasa pemrograman yang digunakan adalah PHP Versi 5 sehingga jenis tag yang harus
digunakan adalah tag standar. Untuk tag lainnya perlu penyetingan di server oleh administrator
server.

27
 Web Programming I
Universitas Nusa Mandiri

Contoh Script PHP

Buka file baru di Notepad. Kemudian ketikkan script seperti di bawah ini :

Simpan file dengan nama contoh04.php

Untuk melihat hasilnya buka browser masuk ke dalam localhost dan folder penyimpanan.
Pilih file contoh04.php maka akan tampil hasilnya :

Contoh04.php merupakan contoh script php yang berdiri sendiri tanpa ada tambahan script
yang lain. Perintah echo merupakan perintah yang digunakan untuk mencetak. Script PHP bisa juga
digabung dalam tag HTML.

3.3 Perbedaan HTML dengan PHP

a. HTML dapat diakses langsung tanpa melalui akses server saat ada permintaandari
client(browser)
b. PHP harus di akses melalui server saat ada permintaan dari client(browser)

28
 Web Programming I
Universitas Nusa Mandiri

Dari 2 gambar di atas dapatkah anda melihat perbedaannya, tanpa melihat extension nama
filenya?
Ya, untuk file dengan extension html, kita dapat melihat hasilnya langsung di browser, tanpa
harus menjalankan akses server. Namun, untuk file dengan extension php, kita harus
menjalankannya melalui akses server, yaitu localhost, dan penyimpanan filenya pun, disimpan pada
htdocs yang ada di folder xampp

3.4 Variabel
Variabel merupakan sebuah istilah yang menyatakan sebuah tempat yang menampung nilai-
nilai tertentu di mana nilai di dalamnya bisa diubah-ubah. Variable penting karena tanpa adanya
variable tidak bisa menyimpan nilai tertentu untuk diolah. Variabel ditandai dengan adanya tanda
dolar ($) yang kemudian bisa diikuti dengan angka, huruf, dan underscore. Namun variable
tidak bisa mengandung spasi.
Berikut ini contoh pendefinisian variable. Untuk mendefinisikan variable, hanya perlu
menuliskannya maka otomatis variable dikenali oleh PHP.
$nama
$no_telp
$_pekerjaan
Variable merupakan tempat untuk menyimpan data dalam tipe tertentu, variable bisa berupa
null (belum ada isinya), angka, string, objek, array, Boolean, dan isinya bisa diubah-ubah nantinya.

29
 Web Programming I
Universitas Nusa Mandiri

Contoh05.php:

Hasil :

3.5 Tipe Data

Berbeda dengan bahasa pemrograman lain, variable di PHP lebih fleksibel. Kita tidak perlu
mendefinisikan jenisnya ketika mendefinisikan pertama kali. Ada 6 Tipe data dasar yang dapat
diakomodasi di PHP, seperti terlihat di tabel.
Tabel III.2. Jenis-jenis tipe data

Tipe Contoh Penjelasan

Integer 134 Semua angka bukan pecahan

Double 5.1234 Nilai pecahan

String “asep” Kumpulan karakter

Boolean False Salah satu nilai True atau False

Object Sebuah instance dari class

Array Larik

30
 Web Programming I
Universitas Nusa Mandiri

Untuk mengetahui tipe data sebuah variable, kita bisa menggunakan perintah gettype,
misalnya :
Print gettype ($nama_variabel);

Anda juga bisa mengubah jenis variable tertentu dengan perintah :

(jenis_variabel) $nama_variabel;

Misalnya untuk mengubah variable menjadi string, kita dapat menggunakan perintah:
$var_string = (string) $angka;

Contoh06.php:

Hasil Tampilan :

31
 Web Programming I
Universitas Nusa Mandiri

Tugas 04 :
Buat script php untuk tampilan di bawah ini. Tentukan variablenya :

3.6 Konstanta
Selain variable, sebuah program umumnya juga memungkinkan adanya konstanta. Konstanta
fungsinya sama seperti variable namun nilainya statis/konstan dan tidak bisa berubah. Cara untuk
mendefinisikan konstanta adalah :
Define (“NAMA_KONSTANTA”, nilai_konstanta);
Setelah didefinisikan, kita dapat langsung menggunakannya dengan mengetikkan nama
konstanta tersebut. Nama konstanta umumnya diketik menggunakan huruf besar.

3.7 Komentar
Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin. Walaupun
bahasa yang digunakan adalah bahasa tingkat tinggi, namun tent masih tidak semudah dipahami oleh
bahasa biasa. Untuk itu kita bisa menggunakan komentar. Berikut ini contoh pembuatan komentar
di php.
//komentar satu baris
#ini juga komentar satu baris
/*komentar
Banyak baris
Kode di sini tidak
Dieksekus oleh parser */

32
 Web Programming I
Universitas Nusa Mandiri

Contoh script konstanta & komentar.

Contoh07.php

Deklarasi komentar

Deklarasi konstanta

Hasil :

33
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 4
OPERATOR

Deskripsi:
Operator dalam pemrograman adalah simbol atau kata kunci yang digunakan untuk
melakukan operasi atau manipulasi pada data. Operator digunakan untuk melakukan perhitungan
matematika, perbandingan, logika, dan operasi lainnya pada nilai-nilai atau variabel dalam program
komputer. Berikut adalah beberapa jenis operator yang umum digunakan dalam pemrograman:
Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika seperti penjumlahan (+),
pengurangan (-), perkalian (*), pembagian (/), dan modulo (%).
Operator Perbandingan
Operator ini digunakan untuk membandingkan dua nilai dan menghasilkan hasil berupa nilai
kebenaran (true atau false). Contohnya, operator sama dengan (==), tidak sama dengan (!=), lebih
besar dari (>), lebih kecil dari (<), lebih besar atau sama dengan (>=), dan lebih kecil atau sama
dengan (<=).
Operator Logika
Operator ini digunakan untuk menggabungkan dan memanipulasi nilai-nilai kebenaran.
Contohnya, operator AND (&&), OR (||), dan NOT (!).
Operator Penugasan
Operator ini digunakan untuk menetapkan nilai ke dalam variabel. Contohnya, operator
penugasan sederhana (=), operator penugasan penjumlahan (+=), operator penugasan pengurangan
(-=), dan lain-lain.
Operator Increment dan Decrement
Operator ini digunakan untuk menambah atau mengurangi nilai variabel. Contohnya, operator
peningkatan (++) dan operator pengurangan (--).
Operator Bitwise
Operator ini digunakan untuk melakukan operasi bit pada angka biner. Contohnya, operator
AND bitwise (&), OR bitwise (|), XOR bitwise (^), dan pergeseran bit (<< dan >>).
Operator Ternary (Conditional)

34
 Web Programming I
Universitas Nusa Mandiri

Operator ini digunakan untuk membuat ekspresi bersyarat. Contohnya, operator ternary (?:)
yang memungkinkan Anda memilih satu dari dua nilai berdasarkan kondisi tertentu.
Operator String
Operator ini digunakan untuk menggabungkan (concatenate) string atau memeriksa kesamaan
string. Contohnya, operator penggabung string (.) dan operator kesamaan string (===).
Operator Indeks (Array)
Operator ini digunakan untuk mengakses elemen-elemen dalam array atau objek. Contohnya,
operator indeks ([]) dan operator panah (->) untuk objek.
Operator sangat penting dalam pemrograman karena mereka memungkinkan pengembang
untuk melakukan berbagai operasi yang diperlukan untuk memproses data, membuat keputusan,
dan mengontrol alur program. Kombinasi operator-operator ini membantu dalam penulisan kode
yang efisien dan efektif dalam pemrograman.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Mengenal jenis-jenis operator
2. Mengimplementasikan masing-masing operator tersebut dalam bahasa
pemrograman web

4.1 Mengenal Operator

Sebuah bahasa pemrograman juga wajib untuk mampu mengolah nilai operand (variable atau
konstanta yang dioperasikan) menggunakan operator, seperti menjumlah, membagi, dan
sebagainya.
Operator merupakan symbol yang berfungsi untuk melakukan aksi / operasi tertentu terhadap
nilai operand yang pada umumnya dari hasil operasi tersebut menghasilkan nilai baru. Sementara
operand adalah nilai yang dilibatkan dalam operasioleh operator.

35
 Web Programming I
Universitas Nusa Mandiri

4.2 Jenis-Jenis Operator

1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika, sebagianberikut :
Operator Nama Contoh Hasil
+ Penambahan 1+4 5
- Pengurangan 1-4 -3
/ Pembagian ¼ 0.25
* Perkalian 1*4 4
% Sisa Pembagian 5%2 1
++ Inkremen X=5; X++ X=6
- Dekremen X=5; X- X=4
Contoh script :
Operatoraritmatika.php

Hasil :

36
 Web Programming I
Universitas Nusa Mandiri

2. Operator Perbandingan
Operator perbandingan digunakan untuk menghasilkan 2 nilai yang hasil akhirnya adalah nilai
Boolean true dan false. Operator ini sangat berguna dalam pemrograman karena bisa menentukan
arah pemrograman. Operator perbandingan di PHP adalah :
Operator Nama Contoh Hasil
== Sama dengan 6==6 False
!= Tidak sama dengan 3!=3 False
> Lebih besar 1>5 False
>= Lebih besar atau sama 3>=4 False
dengan
< Lebih kecil 2<4 True
<= Lebih kecil atau sams dengan 5<=4 False

Opertorperbandingan.php

37
 Web Programming I
Universitas Nusa Mandiri

Hasil :

3. Operator Logika
Operator untuk menyusun kalimat ekspresi/ungkapan logika. Hasil operasi ini akan
didapatkan nilai satu jika benar dan nol jika salah.
Operator Fungsi
AND atau && Operasi logika AND
OR atau || Operasi logika OR
XOR Operasi logika eksklusife OR
! Ingkaran/negasi

Operatorlogika.php

38
 Web Programming I
Universitas Nusa Mandiri

Hasilnya :

4. Operator String
Dalam PHP juga tersedia operator string, yaitu digunakan untuk operasipenggabungan teks.
Adapun symbol yang digunakan yaitu berupa karakter titik (.).
Operatorstring.php

Hasilnya :

Tugas 05
1. Buat script menggunakan bahasa pemrograman PHP untuk menghitung volume Kubus
menggunakan fungsi operator aritmatika dan operator string dengan ketentuan sebagai berikut :
Panjang sisi kubus = 15cm
Hitung volume balok dengan rumus = sisi x sisi x sisi
Buat variable teks1 yang berisi = “Belajar Menghitung” dan teks2 yang berisi = “Volume
Kubus”. Buat perintah untuk menggabungkan nilai dari variable teks1 dan teks2 menggunakan

39
 Web Programming I
Universitas Nusa Mandiri

operator string.
Outputnya sebagai berikut :

40
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 5
PENGENALAN FORM

Deskripsi:
Membahas komponen form, pengolahan data dari form yang ada dalam bahasa pemrograman
web, mempraktikkan penggunaan HTTP SERVER dengan metode GETdan POST.
Sebuah "form" dalam pemrograman web adalah elemen yang digunakan untuk
mengumpulkan data dari pengguna melalui halaman web. Form memungkinkan pengguna untuk
memasukkan informasi, memilih pilihan, dan mengirimkan data ke server untuk diproses lebih
lanjut. Berikut adalah deskripsi lebih rinci tentang elemen form dalam konteks pengembangan web:
Elemen Form
Form adalah elemen HTML yang digunakan untuk membuat area input di dalam halaman
web. Tag HTML yang digunakan untuk menggambarkan form adalah <form>.
Input Fields
Dalam sebuah form, terdapat berbagai jenis "input fields" yang memungkinkan pengguna
untuk memasukkan data. Beberapa jenis input fields termasuk "text input" (untuk memasukkan
teks), "password input" (untuk kata sandi), "radio buttons" (untuk pemilihan eksklusif),
"checkboxes" (untuk pemilihan berganda), "textarea" (untuk teks yang lebih panjang), dan lain-lain.
Label
Setiap input field biasanya disertai dengan label yang menjelaskan apa yang diharapkan dari
pengguna. Label ini membantu pengguna memahami jenis data yang diharapkan.
Button
Form biasanya juga berisi tombol yang memungkinkan pengguna untuk mengirimkan data
setelah mengisinya. Ini bisa berupa tombol "Submit" untuk mengirimkan data atau tombol "Reset"
untuk menghapus data yang telah dimasukkan.
Action URL
Saat sebuah form diisi dan pengguna mengklik tombol "Submit", data dari form tersebut
dikirim ke URL yang ditentukan dalam atribut "action" dalam elemen form. URL ini adalah tempat
server web akan memproses data tersebut.
HTTP Method

41
 Web Programming I
Universitas Nusa Mandiri

Form juga menggunakan metode HTTP (biasanya "GET" atau "POST") untuk mengirimkan
data ke server. Metode "GET" mengirimkan data melalui URL, sementara metode "POST"
mengirimkan data melalui permintaan HTTP yang lebih tersembunyi.
Validasi Form
Validasi form adalah proses memeriksa data yang dimasukkan oleh pengguna untuk
memastikan bahwa data tersebut sesuai dengan aturan yang telah ditetapkan. Validasi biasanya
dilakukan menggunakan JavaScript di sisi klien dan juga di sisi server untuk mencegah data yang
tidak valid.
Server-Side Processing
Setelah data form dikirim, server web menerima data tersebut, memprosesnya, dan
memberikan respons sesuai. Data form dapat digunakan untuk mengirim pesan, mengirimkan
pesanan, membuat akun, mencari informasi, dan berbagai tugas lainnya.
Keamanan
Pengembang web perlu memperhatikan keamanan form, terutama jika data yang dikumpulkan
sensitif. Perlindungan terhadap serangan seperti Cross-Site Scripting (XSS) dan SQL Injection
adalah penting.
Form adalah komponen penting dalam pengembangan web yang memungkinkan interaksi
antara pengguna dan situs web. Dengan form, pengguna dapat memberikan masukan, membuat
pilihan, dan berpartisipasi dalam berbagai jenis transaksi online.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Membuat tampilan form dalam bahasa pemrograman web
2. Menggunakan methode get dan post dalam mengirim data.

5.1 Komponen Form

Sebuah website dinamis seringkali memerlukan interaksi antara browser client dan server bisa
berupa pemasukan data teks, angka, atau upload file untuk diproses oleh server. Untuk mewadahi
suatu data yang dikirimkan oleh browser client, dibutuhkan adanya FORM HTML. Penggunaan
form misalnya untuk pendaftaran keanggotaan, pemasukan kode kartu kredit, login user, transaksi
perbelanjaan, dan upload file.
Dalam FORM HTML terdapat beberapa komponen yang bisa digunakan, antara lain :

42
 Web Programming I
Universitas Nusa Mandiri

a. Form
<FORM ACTION=action METHOD=method ENCTYPE=media type> </FORM>

b. Text Box

Text box : untuk menginput data string ataupun angka.

< INPUT TYPE=TEXT NAME=”nama_variabel” VALUE=”value”>

c. Text Area

Text area : untuk menginput string ataupun angka yang terdiri atas banyak baris.

<textarea rows=” ” cols=” ” name=”nama_variabel”> </textarea>

d. Radio buton

Radio buton : untuk memilih satu pernyataan dari beberapa pernyataan yang
disediakan.
<input type=”radio” name=”nama_variabel” value=” ”>Isi_Radio

e. Combo Box
Combo box untuk menampilkan daftar data.
<select name=”nama_variabel” value=” “>
<option>Combo1</option>
<option>Combo2</option></select>

f. Check Box
Check box untuk memilih satu atau lebih pernyataan dari beberapa pernyataan yang
disediakan.

<input type=”checkbox” name=”nama_variabel” value=”ON” checked>

g. Submit
Submit untuk mengirimkan semua variable data pada komponen-komponen form
yang ada.
<input type=”submit” name=”submit” value=”submit”>

43
 Web Programming I
Universitas Nusa Mandiri

h. Reset
Reset untuk membatalkan semua penginputan yang telah dituliskan.

<input type=”reset” name=”reset” value=”reset”>

5.2 Pengolahan Data Dari Form

Form di HTML dikenal dengan adanya tag <FORM> dan ditutup dengan tag
</FORM>. Di dalam tag pembuka <FORM> diikuti dengan atribut action dan method. Action
menjelaskan ke h alaman yang digunakan untuk memproses input, sementara method digunakan
untuk mengatur cara mem-parsing konten
Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET
akan mengirimkan data bersama dengan URL, sedangkan POST akan mengirimkannya secara
terpisah. User mengirimkan data input dengan mengisi teks atau pilihan pada attibut form html.
Proses Form menggunakan Metode GET.
File metodeget.php

Hasilnya :

44
 Web Programming I
Universitas Nusa Mandiri
Buat file untuk memproses variable yang diberikan oleh file metodeget.php, beri nama
filenya : metodegetproses.php

Hasilnya :
Karena menggunakan metode GET, data dikirmkanbersama dengan URL

Proses Form menggunakan metode : POST

Untuk membuat inputan, dan beri nama file : metodepost.php

Hasilnya :

45
 Web Programming I
Universitas Nusa Mandiri

Buat file untuk memproses variable yang diberikan oleh file metodepost.php beri nama
filenya : metodepostproses.php

Hasilnya :
Karena menggunakan metode POST, data tidak dikirimkan bersama dengan URL

46
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 6
FORM LANJUTAN

Deskripsi:
Membahas latihan penggunaan FORM dan pengiriman data

Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu: Mengerjakan
soal latihan yang mempergunakan penggunaan FORM dan proses pengiriman data dalam tampilan
output.
LATIHAN Penggunaan Form :
Form input :

47
 Web Programming I
Universitas Nusa Mandiri

Form Output :

Jawaban latihan
1. forminputmahasiswa.php

<html>
<head>
<title>Input Data Mahasiswa</title>
</head>
<body bgcolor="green">
<form action="tampilmahasiswa.php" method="post">
<b>Pengelolaan Data Mahasiswa</b>
<br>
<pre>
Nama : <input type="text" name="nama" size="25" maxlength="50">
Alamat : <input type="text" name="alamat" size="25" maxlength="50">
</pre>
Jenis Kelamin :
<input type="radio" name="jeniskel" value="Laki-Laki"> Laki - Laki
<input type="radio" name="jeniskel" value="Perempuan"> Perempuan
<p>
Pekerjaan :
<select name="pekerjaan">
<option value="-Pilih-">
<option value="Pelajar">Pelajar
<option value="Karyawan">Karyawan
<option value="Wirausaha">Wirausaha
<option value="Lain-lain">Lain-lain
</select>
<p>

48
 Web Programming I
Universitas Nusa Mandiri

Hobi :
<input type="checkbox" name="hobi1" value="Olahraga">Olahraga
<input type="checkbox" name="hobi2" value="Musik">Musik
<input type="checkbox" name="hobi3" value="Jalan-Jalan">Jalan-Jalan
<p>
<input type="submit" value="Kirim"><input type="reset" value="Batal">
</form>
</body>
</html>

Script tampilmahasiswa.php

<html>
<head>
<title> Data Mahasiswa </title>
</head>
<body>
<?php
$nama =$_POST['nama'];
$alamat =$_POST['alamat'];
$jeniskel =$_POST['jeniskel'];
$pekerjaan =$_POST['pekerjaan'];
$hobi1=$_POST['hobi1'];
$hobi2=$_POST['hobi2'];
$hobi3=$_POST['hobi3'];
?>
<table border=1 bgcolor="Cyan">
<tr>
<td colspan=2 align="center"><b>Data Mahasiswa</b></td>
</tr>
<tr>
<td>Nama</td><td><?php echo $nama; ?></td>
</tr>
<td>Alamat</td><td><?php echo $alamat; ?></td>
</tr>
<td>Jenis Kelamin</td><td><?php echo $jeniskel; ?></td>
</tr>
<td>Pekerjaan</td><td><?php echo $pekerjaan; ?></td>
</tr>
<td>Hobi</td><td><?php echo $hobi1,",",$hobi2,",",$hobi3; ?></td>
</tr></table>
<a href="forminputmahasiswa.php">INPUT DATA LAGI</a>
</body>
</html>

49
 Web Programming I
Universitas Nusa Mandiri

Contoh Pembuatan Form dengan Input, Proses, dan Output Dalam Satu File
Untuk membuat form input dan halaman untuk menampilkan dalam satu file,
kita bisa menggunakan statement :
If (!Empty (nama_variabel))
Artinya jika variable yang dicari tidak kosong (alias ada) maka baru
ditampilkan, sementara jika tidak ada maka tidak akan ditampilkan.
Yang perlu diketahui adalah digunakannya alamat action :
$_server [‘php_self’]
Artinya alamat action akan mengacu ke halaman itu sendiri dan bukan di
halaman yang lain. Dengan demikian, jika form di submit, maka halaman yang
dipanggil tetap halaman yang sama.
Contoh formdatadiri.php

50
 Web Programming I
Universitas Nusa Mandiri

Hasil :

Inputkan datanya :

KLIK Tombol Tampil, maka akan tampil kiriman datanya.

51
 Web Programming I
Universitas Nusa Mandiri

Tugas 06 : Pembuatan dan Pemanggilan Form :

1. Buat script program untuk membuat form input dengan data sbb :

2. Buat script program untuk memanggil data dari form input dengan bentuk sbb :

52
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 7
PERCABANGAN

Deskripsi:
Membahas konsep percabangan dalam bahasa pemrograman web
Percabangan (atau conditional branching) dalam pemrograman adalah konsep yang memungkinkan
program untuk membuat keputusan berdasarkan kondisi tertentu. Dengan menggunakan struktur
percabangan, program dapat memilih jalur eksekusi yang berbeda tergantung pada apakah suatu
kondisi benar atau salah. Berikut adalah deskripsi lebih rinci tentang percabangan dalam
pemrograman:
Kondisi
Percabangan bergantung pada kondisi atau ekspresi logika yang dinilai sebagai benar (true) atau
salah (false). Contoh kondisi bisa berupa perbandingan dua nilai, hasil dari operasi matematika,
atau pengecekan variabel.
Instruksi Blok
Ketika kondisi dalam percabangan benar, maka sekelompok instruksi atau pernyataan akan
dieksekusi. Ini disebut sebagai "blok instruksi benar." Ketika kondisi salah, program akan
menjalankan sekelompok instruksi yang berbeda, yang disebut "blok instruksi salah."
Statement IF
Statement if adalah salah satu bentuk percabangan yang paling dasar. Jika kondisi dalam
pernyataan if adalah benar, maka blok instruksi yang berada di dalam if
Statement IF-ELSE
Statement if-else memungkinkan program untuk menjalankan blok instruksi yang berbeda jika
kondisi benar dan salah.
Statement IF-ELSE IF-ELSE
Statement ini memungkinkan program untuk menguji sejumlah kondisi berbeda secara berurutan
dan menjalankan blok instruksi yang sesuai dengan kondisi pertama yang benar. Jika tidak ada
kondisi yang benar, maka blok instruksi di dalam else akan dieksekusi.
Percabangan memungkinkan program untuk menjalankan perintah yang berbeda berdasarkan
situasi atau kondisi yang ada. Ini adalah konsep fundamental dalam pemrograman yang digunakan

53
 Web Programming I
Universitas Nusa Mandiri

untuk membuat program lebih fleksibel dan mampu mengatasi berbagai situasi yang mungkin
muncul selama eksekusi.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Menggunakan perintah percabangan if tunggal
2. Menggunakan perintah percabangan if dan else
3. Menggunakan perintah percabangan if majemuk
4. Menggunakan perintah switch

7.1 Pernyataan Seleksi

Sebagian besar bahasa pemrograman mengandung pernyataan seleksi. Pada dasarnya
pernyataan seleksi adalah suatu mekanisme yang menjelaskan apakah pernyataan akan dikerjakan
atau tidak, hal ini tergantung kondisi yang dirumuskan. Dalam bahasa pemrograman PHP
pernyataan seleksi diterapkan dengan menggunakanstatement IF dan Switch Case.
1. Statement IF
a. If Tunggal
Statement IF merupakan statement yang penting dan pasti terdapat di semua bahasa
pemrograman. Statement ini berguna untuk membuat percabangan berdasarkankondisi tertentu yang
harus dipenuhi.
Bentuk umun Statement IF adalah sebagai berikut :

Prinsip kerjanya adalah perintah di atas akan dikerjakan apabila kondisi bernilai TRUE atau
benar, sedangkan jika kondisi salah / FALSE maka statement di atas tidak akan dikerjakan
b. Pernyataan IF dan Else
Pernyataan ELSE merupakan bagian dari pernyataan if. Else digunakan untuk memberikan
alternative perintah apabila kondisi bernilai salah / FALSE.

54
 Web Programming I
Universitas Nusa Mandiri

Bentuk umum :

Contoh : contohpercanganifelse.php

Hasilnya :

c. Pernyataan IF Majemuk
Jika pernyataan else memberikan alternative pilihan kedua, maka untuk pernyataan ElseIf
dapat digunakan untuk meumuskan banyak alternative pilihan (lebihdari dua pilihan).
Bentuk umum :
if ( kondisi_1 )
{
Statement_1;
}
elseif ( kondis_2)
{
Statement_2;
}
elseif ( kondisi_3)
{

55
 Web Programming I
Universitas Nusa Mandiri
Statement_3;
}
else
{
Statement_3;
}

Contoh : contohpercabanganifmajemuk.php

Hasilnya :

56
 Web Programming I
Universitas Nusa Mandiri

7.2 Statement Switch

Statement untuk pengatur alur program berikutnya adalah switch. Salah satu
keuntungan switch adalah ada bisa langsung mengevaluasi satu statement dan
memerintahkan aksi dalam jumlah yang lebih banyak.
Bentuk umum :
Switch ( nilai_ekspresi ){
Case nilai_1 : statement_1; break;
Case nilai_2 : statement_2; brea;
Default: statement_n;}
Contoh :

57
 Web Programming I
Universitas Nusa Mandiri

Hasil:

Tugas 07 : Percabangan 1. Buatlah script sehingga mendapatkan tampilan

sebagai berikut :
Tampilan Input

Tampilan Output

Ketentuan Soal :
 Jika Nilai 1 dan 2 = 0 maka tidak ada hasil perhitungan
 Jika Nilai 1 dan 2 terisi nilai maka
 Jika memilih perhitungan rumus Segitiga (1/2*(nilai 1*nilai2))
 Jika memilih perhitungan rumus Persegi Panjang (nilai 1*nilai2)

58
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 9
LOOPING / PERULANGAN

Deskripsi:
Looping (perulangan) adalah konsep dalam pemrograman yang memungkinkan eksekusi
sekelompok instruksi berulang kali berdasarkan kondisi tertentu atau selama jangka waktu yang
ditentukan. Ini adalah salah satu aspek penting dalam pemrograman yang memungkinkan Anda
mengotomatisasi tugas-tugas yang perlu diulang. Ada beberapa jenis loop yang umum digunakan
dalam pemrograman, dan berikut adalah deskripsi lebih rinci tentang looping:
Perulangan dengan While
a. Loop while digunakan untuk menjalankan sekelompok instruksi selama kondisi yang
ditentukan benar.
b. Instruksi akan diulang terus menerus hingga kondisi menjadi salah.
Perulangan dengan For:
a. Loop for adalah jenis loop yang digunakan untuk menentukan jumlah iterasi yang akan
dilakukan.
b. Anda mendefinisikan kondisi awal, kondisi penghentian, dan perubahan yang terjadi setiap
iterasi.
Perulangan dengan Do-While:
a. Loop do-while adalah loop yang mirip dengan while, tetapi berbeda dalam urutan eksekusi.
b. Dalam loop do-while, instruksi akan dijalankan setidaknya satu kali sebelum kondisi
diperiksa.
Perulangan Bersyarat (Conditional Looping):
1. Dalam beberapa situasi, Anda mungkin perlu melakukan looping berdasarkan kondisi yang
diberikan atau sampai kondisi tertentu terpenuhi.
2. Ini dapat dilakukan dengan menggunakan loop while, for, atau do-while dengan kondisi
yang sesuai.
Perulangan dengan Break dan Continue:
a. Dalam looping, Anda dapat menggunakan pernyataan break untuk keluar dari loop dan
pernyataan continue untuk melanjutkan iterasi berikutnya.

59
 Web Programming I
Universitas Nusa Mandiri

b. break akan menghentikan looping secara keseluruhan, sedangkan continue hanya akan
melompati satu iterasi.
Looping dalam Array dan Struktur Data:
a. Looping sering digunakan untuk mengakses elemen-elemen dalam array, daftar, atau
struktur data lainnya.
b. Anda dapat menggunakan loop for atau foreach (tergantung pada bahasa pemrograman)
untuk mengakses dan memanipulasi elemen-elemen tersebut.

Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Memahami pengertian dasar perulangan
2. Mengenal jenis jenis perulangan dalam pemprograman
3. Mengimplementasikan jenis jenis perulangan tersebut dalam bahasa
pemrograman web.
Perulangan / looping (kadang juga disebut iterasi) adalah sebuah instruksi program yang
memerintahkan suatu tugas diulang – ulang berdasarkan kondisi tertentu.
1. Perulangan FOR
Merupakan bentuk perulangan yang sangat sederhana, dengan menggunakan fungsi ini,
anda dapat melakukan pengulangan data sampai melampaui batas yang diinginkan.
2. Perulangan WHILE

Pada bentuk perulangan ini, pernyataan akan terus dikerjakan apabila masih belum mencapai
batas perulangan.

60
 Web Programming I
Universitas Nusa Mandiri

3. Perulangan DO – WHILE
pernyataan akan dikerjakan terlebih dahulu sebelum melakukan pengecekan batas perulangan.
Apabila masih belum mencapai batas perulangan maka pengulangan akan terus dilakukan.
4. Pernyataan foreach –

perulangan yang dilakukan untuk blok kode dari setiap elemen yang ada di array.

Contoh :
1. Perulangan FOR = contohfor.php

2. Perulangan FOR dalam FORM = contohfor_form.php

61
 Web Programming I
Universitas Nusa Mandiri

3. Perulangan WHILE = contohwhile.php

4. Perulangan DO – WHILE= contohdowhile.php

62
 Web Programming I
Universitas Nusa Mandiri

5. Perulangan Foreach = contoforeach.php

63
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 10
JAVASCRIPT

Deskripsi:
JavaScript adalah bahasa yang sangat populer dan kuat dalam pengembangan web. Dengan
JavaScript, pengembang dapat menciptakan beragam aplikasi web, dari situs web sederhana hingga
aplikasi web yang kompleks dan dinamis. Ini juga merupakan bahasa yang terus berkembang,
dengan standar baru dan fitur-fitur yang terus ditambahkan untuk memenuhi kebutuhan
pengembangan web yang semakin canggih.
Kecanggihan Visualisasi
Dengan menggunakan JavaScript, Anda dapat membuat visualisasi data yang interaktif,
seperti grafik, peta, dan animasi, yang memperkaya pengalaman pengguna.
Keamanan
Keamanan adalah isu penting dalam pengembangan web. JavaScript memiliki fitur-fitur
keamanan, seperti Same-Origin Policy, untuk melindungi situs web dari potensi ancaman
keamanan.
Membahas pengertian dasar dan penulisan script sederhana menggunakan Javascript,
membahas tentang bagaimana step by step pembuatan dan penyimpanan file Javascript.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Memahami pengertian dasar javascript
2. Membuat tampilan website dengan penggunaan koding javascript sederhana
Javascript adalah bahasa script yang populer di internet dan dapat bekerja di sebagian besar
penjelajah web browser seperti Internet Explorer (IE), Mozilla Firefox, Netscape, opera dan web
browser lainnya. Kode javascript biasa dituliskan dalam bentuk fungsi (Function) yang ditaruh di
bagian dalam tag <head> yang dibuka dengantag <script language =” javascript”>
Isi dari script javascript sama dengan konsep yang sudah dipelajari dalam materi PHP, yakni
ada deklarasi variabel, penggunaan operator, percabangan, looping, dan fungsi. Di dalam java script
juga sebuah komponen Alert yang digunakan untuk menampilkan kotak pesan pada browser ketika
fungsinya di jalankan.

64
 Web Programming I
Universitas Nusa Mandiri

Untuk berlatih deklarasi script pada javascript, salin contoh-contoh berikut ini pada editor
anda. Dan jalankan pada browser, amati tampilannya.
Latihan Javacsript :
1. Menuliskan teks = contohjs1.html

2. Memformat teks dengan tag HTML = contohjs2.html

3. JavaScript yang diletakkan pada bagian HEAD = contohjs3.html

65
 Web Programming I
Universitas Nusa Mandiri

4. JavaScript yang diletakkan pada bagian BODY = contohjs4.html

5. Fungsi = contohjs5.html

6. Fungsi dengan argumen = contohjs6.html

66
 Web Programming I
Universitas Nusa Mandiri

7. Memunculkan tanggal lengkap = contohjs7.html

67
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 11
CSS
Deskripsi:
CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis
dalam bahasa markup / markup language. apabila kita membahasnya dalam konteks web, bisa di
artikan sebagai bahasa yang digunakan untuk mengatur tampilan / desain sebuah halaman HTML.
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Memahami pengertian dasar tentang CSS
2. Memahami Kegunaan dari CSS
3. Mengimplementasikan penerapan CSS pada sebuah web.
4. Mempelajari padding, margin dan border pada CSS .

11.1 PENGERTIAN CSS

CSS = Cascading Style Sheets ( Bahasa lembar Gaya ). CSS merupakan bahasa yang digunakan
untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika
kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa
yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
Beberapa hal yang dapat dilakukan dengan CSS.
1. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna),
margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-
elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga
“styles”.
2. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan)
yang berbeda.
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
1. External Style Sheet
Aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML. Kemudian
tambahkan kode pemanggilan file CSS dalam dokumen HTML. Akhiranfile CSS adalah .css

68
 Web Programming I
Universitas Nusa Mandiri

2. Internal Style Sheet

Aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag <style>

3. Inline Style Sheet

Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya menggunakan
atribut style:

11.2 SATUAN DALAM CSS

1. Statik
* in -- satuan inchi
* cm -- satuan centimeter
* mm -- satuan milimeter
* pt -- satuan point (1point = 1/72 inchi)
* pc -- satuan pica (1pica = 12 point)
* px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)

69
 Web Programming I
Universitas Nusa Mandiri

2. Relatif
* % -- satuan persen
* em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
* ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

11.3 MENULIS CSS

Sintaks penulisan CSS sebagai berikut:

Penjelasan:
Aturan CSS terdiri 2 bagian:
1. Selector
Biasanya berupa tag HTML, id, class
id menggunakan tanda # didepan nama selector
class menggunakan tanda titik didepan nama selector
contoh :
h1 { color : blue ; }  tag html h1#teks
{ color :green; }  id
.warna { color : red; }  class
2. Declaration
Berisi aturan-aturan css yang terdiri dari properti dan nilainya yang dipisahkan oleh tanda titik
dua. Setiap aturan css harus diakhiri dengan tanda titik koma.
Selector ID dan Class pada CSS
Untuk selector id pada css ditandai dengan tanda #(pagar) contoh penulisan seperti
berikut :
Penggunaanya dalam script HTML ::

70
 Web Programming I
Universitas Nusa Mandiri

Yang perlu di perhatikan jika menggunakan selector id :

1. Sebuah elemen HTML hanya boleh memiliki 1 id
2. Setiap halaman hanya boleh memiliki 1 elemen dengan id tersebut
3. Dapat di gunakan sebagai penanda halaman untuk link
4. Digunakan juga untuk javascript
5. Sebaiknya tidak digunakan untuk css ( lebih baik gunakan class)

Untuk selector class pada css ditandai dengan tanda .(titik) contoh penulisan seperti
berikut :

Penggunaanya dalam script HTML :

71
 Web Programming I
Universitas Nusa Mandiri

Properti-properti CSS
Properti CSS jumlahnya sangat banyak, berikut beberapa diantaranya:

Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang membuat kita dapat
mendefinisikan style pada keadaan tertentu dari elemen tersebut. Pseduo-class terbagi menjadi
beberapa type, sebagai berikut :
1. Yang berhubungan dengan link
a. : link
Style default pada sebuah link (a yang memiliki href)
b. : hover
Style ketika kursor mouse berada diatas sebuah link / elemen
c. : active
Style ketika sebuah link di klik (keadaan aktif)
d. : visisted
Style ketika sebuah link sudah pernah di kunjungi sebelumnya (menggunakan
browser yang sama)

72
 Web Programming I
Universitas Nusa Mandiri

2. Yang berhubungan dengan posisi elemen (ada pada css 3)

a. : first-child
Memilih elemen pertama dari sebuah parent (elemen pembungkusnya )
b. : last-child
Memilih elemen terakhir dari sebuah parent (elemen pembungkusnya )
c. : nth-child(n)
Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya )
n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan genap,
even & odd
d. : first-of-type
Memilih elemen pertama dari sebuah jenis / tipe tag
e. : last-of-type
Memilih elemen terakhir dari sebuah jenis / tipe tag

11.4PADDING, MARGIN DAN BORDER

Dalam CSS dikenal istilah ‘Box Model’. Perhatikan gambar berikut ini:

Padding : Menentukan jarak komponen body ke border atau Ukuran jarak bagian dalam
Border : Adalah garis tepi dari komponen
Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border

CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada gambar, bayangkan
area ‘Content’ misalnya adalah sebuah paragraph. Obyek paragraph ini akan dianggap CSS

73
 Web Programming I
Universitas Nusa Mandiri

memiliki area padding, border, dan margin disekitarnya. Keberadaan area-area ini berguna untuk
pengaturan tata letak. Misalnya ingin diatur agar 2 buah gambar yang terletak berdampingan tidak
terlalu rapat, maka kita dapat memperbesar lebar dari area margin agar jarak antara gambar lebih
lebar.
Padding
ditulis dengan CSS padding:5px 5px 5px 5px; urutan nilai angkanya adalah atas,
kanan, bawah dan kiri, atau Anda bisa menggunakan
padding-left:5px; ini adalah untuk pengaturan padding bagian kiri
padding-right:5px;  ini adalah untuk pengaturan padding kanan
padding-top:5px;  untuk bagian atas dan
padding-bottom:5px;  untuk bagian bawah, Ingat satuan px(pixels) bisa kamu ganti
sesuai satuan yang lain yang sesuai
Border
Ditulis dengan CSS border:1px dotted #000000;  urutan penggunaanya adalah
ukran border, style border dan warna border, atau bisa menggunakan
border-width:1px;  ini adalah ketebalan border
border-style:dotted;  ini adalah jenis bordernya bisa kamu ganti dengan dashed,
solid, double, groove, ridge, inset, outset dan lainya
border-color:#FFFFFF;  ini adalah warna dari border.. kamu bisa mengganti code
warnanya (www.colorschemer.com/online)
Margin
Ditulis dengan CSS margin:5px 5px 5px 5px;  urutanya atas, kanan, bawah dan kiri,
atau bisa menngunakan seperti padding diatas
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
keterangan lainya bisa mengikuti keterangan padding diatas

74
 Web Programming I
Universitas Nusa Mandiri

Latihan CSS :
- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama
style_css.css

75
 Web Programming I
Universitas Nusa Mandiri

- Salin script berikut ini, lalu simpan di folder modul_web1 dengan nama
latihan_css.html

Hasil di web browser :

76
 Web Programming I
Universitas Nusa Mandiri

PERTEMUAN KE 12
Membuat Design Web Responsive Menggunakan CSS

Deskripsi:
Membahas Pembuatan sebuah halaman web sederhana dan dinamis
Tujuan Pembelajaran:
Setelah memahami pokok bahasan pada bab ini diharapkan mahasiswa mampu:
1. Membuat halaman website yang dinamis dengan menggunakan penggunaan script html, php, css
dan javascript dengan benar.
Pada pembahasan materi kali ini kita akan membuat Design Web Responsive. Design Web
Responsive adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan
pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun
komputer. Dengan metode ini. Berikut kita akan membuat form responsive. Langkah-langkah
yang perlu di gunakan dalampembuatan web ini adalah :
1. Tentukan tema website
- Tema web perpustakaan
2. Membuat sketsa / blueprint / rancangan dari halaman web yang akan di buat Seperti contoh
berikut ini :

3. Web responsive berarti web yang tampilannya mengikuti ukuran layar gadget yang di gunakan
untuk akses web tersebut

77
 Web Programming I
Universitas Nusa Mandiri

– Buat folder di xampp/htdocs dengan nama : perpus

– Didalam folder perpus, siapkan 2 buah folder :
• images  untuk simpan gambar
• css  untuk simpan file css
– Buka editor, salin script css berikut : simpan di folder css dengan
nama style.css
*{
padding : 0;
margin : 0;
box-sizing : border-box;
}
body{
backgroud : #dedede;
font-family : 'Verdana',arial,sans-serif;
font-size : 15px;

}
p{

h3{

a{

}
margin-bottom : 20px;line-
height : 1.5em;

78
 Web Programming I
Universitas Nusa Mandiri
margin-bottom : 20px;
border-bottom : 1px solid #aaa;

text-decoration : none;color :
#333;
a:hover{
color : #666;
}

.container{
max-width : 1080px;
margin : 20px auto;
background : #fff;
overflow : hidden;
padding : 10px;
}

.header{
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
background : #9E9AFB;
}

/* main */
.left{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.left ul{
list-style-type : none;
}

.left ul li{

79
Web Programming I
Universitas Nusa Mandiri
display : block;
}

.left ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
font-color : #D3D2ED;
}

.left ul li a:hover{
color:#461AF3;
}

.middle{
width : 500px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;
}
.middle img{
max-width : 100%;
height : auto;
}

.middle a{
font-wight:bold;
}

.right{
width : 250px;
border : 1px solid #dedede;
padding : 10px;
margin : 10px;
float : left;

80
 Web Programming I
Universitas Nusa Mandiri
}

.right ul{
list-style-type : none;
}

.right ul li{
display : block;
}

.right ul li a{
display :block;
border-bottom : 1px solid #dedede;
margin-bottom : 10px;
padding : 10px 5px;
}

.right ul li a:hover{
color:#461AF3;
}

.footer{
clear : both;
border : 1px solid #dedede;
padding : 15px;
margin : 10px;
background : #9E9AFB;
}

@media screen and (max-width:959px){

#container{
width : 100%;
}
#left-column{
width : 70%;
}

81
 Web Programming I
Universitas Nusa Mandiri
#right-column{
width : 30%;
}

img{

}
}

width : 100%;
/*MEDIA QUERIES ( Responsive )
*******************************************/
@media screen and (max-width:1080px)
{
.container{
width : 100%;
}
.left{
width : 25%;
background : #D6CCFE;
}
.middle{
width : 68%;
float : right;

}
.right{
clear : both;
padding : 1% 4%;
width : auto;
float : none;
background : #D6CCFE;
}
}

/* untuk ukuran layar 700px kebawah */

@media screen and (max-width: 780px)

82
 Web Programming I
Universitas Nusa Mandiri
{
.header,
.footer{
text-align : center;
}
.left {
width : auto;
float : none;
}

.middle {
width : auto;
float : none;
}

.right {
width : auto;
float : none;
}

83
 Web Programming I
Universitas Nusa Mandiri

Buatlah script untuk tampilan berikut : index.html simpan di dalam folder perpus

Tampilan diatas ini kodenya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="header">
<h1 align="center"> Selamat Datang DI Pepustakaan XYZ

</h1>

84
 Web Programming I
Universitas Nusa Mandiri
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>

</div>
<div class="middle">
<h3 align="center">Berita</h3>
<p align="center"><strong><a href="#" >Membuat
Design Web Responsive</a></strong></p>
<p><img src="images/gambar.jpg" alt=""></p>
<p><a href="#">Baca Selengkapnya >> </a>
</div>

<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<p>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Pemrograman</a></li>
<li><a href="#">Database</a></li>
</ul>
</p>
</div>
</div>

<div class="footer">
<p align="center">Coppright &copy; 2018 Belajar CSS
Responsive </a></p>
</div>
</div>
</body>

85
 Web Programming I
Universitas Nusa Mandiri
</html>

Penjelasan Source Code

<meta name="viewport" content="width=device-width, initial-scale=1.0">

merupakan syntax yang berfungsi untuk menampilkan web sesuai dengan layar.
<link rel="stylesheet" href="css/main.css">

merupakan External Style sheet yang digunakan untuk mengload file css .
Pada Struktur HTML berikut terdapat 3 class utama yaitu header , main dan footer . Yaitu :

<div class="container">
<div class="header">digunakan untuk bagian header</div>
<div class="main">
<div class="left">Digunakan kolom bagian Kiri...</div>
<div class="middle">Digunakan kolom bagian tengah...</div>
<div class="right">Digunakan kolom bagian kanan...</div>
</div>
<div class="footer">Digunakan bagian footer...</div>
</div>

86