Pemrograman

WEB 1
PROGRAM STUDI ILMU KOMPUTER

UNIVERSITAS PANCASAKTI MAKASSAR

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Syahrul Usman, S.Kom., M.T

WPS
syahrul.usman@unpacti.ac.id
MATERI PEMBELAJARAN

01 05
PENGENALAN KONSEP DASAR WEB FUNGSI

02 06
PENGENALAN HTML ARRAY

03 07
PENGENALAN PHP BASIC PEMROGRAMAN JAVASCRIPT

04 08
PERULANGAN (LOOPING) PENGENALAN CSS
DESKRIPSI MATA KULIAH PENILAIAN

Mata kuliah ini diajarkan untuk mencapai kompetensi pembuatan Bobot

No Jenis
(%)
dan pengembangan aplikasi berbasis web melalui pemahaman
terhadap www, internet, bahasa pemrograman HTML, CSS, JS, 1 Kehadiran dan partisipasi kuliah 10
PHP dan berbagai kolaborasi teknologi sehingga mahasiswa akan 2 Presentasi/diskusi 10
mampu menciptakan/membuat dan mengembangkan aplikasi 3 25
Tugas
berbasis web yang bermanfaat di berbagai bidang dengan
4 Ujian Tengah Semester 25
teknologi terkini, memiliki Bobot 2 SKS
5 Ujian Akhir Semester 30

CAPAIAN PEMBELAJARAN MATA KULIAH Total 100%

No Capaian BOBOT SKS : 2

1 Kesamaan persepsi materi kuliah, metode dan sistem penilaian
2 Mahasiswa mampu menjelaskan latar belakang teknologi internet dan teknologi website
3 Mahasiswa mampu medesain tampilan website dengan CSS
4 Mahasiswa mampu membuat website sederhana dengan menggunakan tag HTML
5 Mahasiswa mampu memahami,menjelaskan fungsi dan kegunaan dasar dari bahasa pemrograman javascript
6 Mahasiswa Mampu memahami, menjelaskan bahasa pemrograman PHP
 PERTEMUAN 1 : KONSEP DASAR WEB 1
A. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan pengenalan web, proses kerja web, struktur penulisan HTML. Setelah
menyelesaikan materi pada pertemuan ini, mahasiswa mampu Mahasiswa mampu menjelaskan World wide
web, proses kerja web, pengantar HTML dan mempraktikkan penulisan Struktur HTML.

B. Uraian Materi
World Wide Web (disingkat WWW) adalah sistem informasi yang memungkinkan pengguna untuk
mengakses dokumen yang terhubung di seluruh dunia melalui internet. Web berfungsi sebagai platform
untuk menyajikan informasi dalam bentuk halaman web, yang dapat diakses melalui browser web seperti
Google Chrome, Mozilla Firefox, atau Safari.

Web dibangun di atas infrastruktur internet dan menggunakan protokol HTTP (Hypertext Transfer Protocol)
untuk mentransfer data antara server web dan browser. Halaman web biasanya terdiri dari teks, gambar,
audio, dan video, yang diatur dalam format HTML (Hypertext Markup Language). Selain itu, halaman web
dapat mengandung tautan ke halaman web lain dan media sosial, serta dapat memberikan interaktivitas
melalui elemen seperti formulir dan tombol.
Berikut adalah mekanisme kerja dasar dari WWW:
1. Klien dan server: WWW bekerja berdasarkan model klien-server, dimana pengguna menggunakan klien (yaitu browser web) untuk mengirim
permintaan kepada server untuk mendapatkan dokumen web tertentu.
2. Protokol HTTP: Ketika pengguna mengakses halaman web, browser mengirim permintaan HTTP ke server. Protokol HTTP memungkinkan
browser dan server untuk berkomunikasi dan mentransfer data antara mereka.
3. DNS: Domain Name System (DNS) adalah sistem yang digunakan untuk mengonversi alamat IP (numerik) menjadi nama domain (mudah dibaca).
Ketika pengguna memasukkan nama domain di browser, DNS mencari alamat IP yang sesuai dengan nama domain dan mengirimkannya ke
browser.
4. Markup language: Halaman web biasanya ditulis dalam format HTML (Hypertext Markup Language), yang digunakan untuk menentukan struktur,
tata letak, dan konten dari halaman web.
5. CSS dan JavaScript: Cascading Style Sheets (CSS) digunakan untuk mengatur tampilan visual halaman web, sedangkan JavaScript digunakan
untuk membuat interaktifitas pada halaman web.
6. Server-side scripting: Beberapa halaman web memerlukan pemrosesan server-side, seperti melakukan validasi data dan mengambil data dari
database. Server-side scripting seperti PHP dan ASP digunakan untuk melakukan tugas ini.
7. Tautan dan URL: Halaman web biasanya mengandung tautan ke halaman web lain, yang ditentukan oleh URL (Uniform Resource Locator). URL
menyediakan alamat web yang unik untuk setiap halaman web.
8. Responsif: Web yang responsif dirancang agar dapat diakses dan ditampilkan dengan baik pada berbagai perangkat, termasuk komputer desktop,
tablet, dan ponsel.

Gambar Mekanisme kerja World Wide Web >>

a. Struktur Navigasi
Struktur Navigasi adalah bagan hirarki dari suatu website yang menggambarkan isi dari setiap
halaman dan link. Struktur Navigasi dapat dikatakan sebagai gambaran dari hubungan atau rantai kerja dari
seluruh elemen yang akan digunakan dalam aplikasi.

Kriteria-kriteria yang digunakan dalam pengelompokan dari struktur navigasi adalah sebagai berikut:
kebutuhan akan objek, kemudahan pemakaian, interaktif, dan kemudahan membuatnya yang berpengaruh
terhadap waktu pembuatan suatu websites. Dalam penggambarannya Struktur Navigasi terbagi kedalam 4
Struktur yang berbeda yaitu: Linier, Non Linier, Hierarchical (Hirarki) dan Composit (Campuran).

a.1 Struktur Navigasi Linier

Pada Struktur navigasi linier merupakan rangkaian urutan tampilan dari sebuah halaman website
yang ditampilkan secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini
adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau
dua halaman sesudahnya.

Gambar Struktur Navigasi Linier Gambar Contoh Struktur Navigasi Linier

a.2. Struktur Navigasi Hirarki
Pada Struktur navigasi hirarki merupakan suatu struktur yang mengandalkan percabangan untuk
menampilkan data berdasarkan kriteria tertentu. Jika digambarkan, maka struktur navigasi hirarki ada
halaman web yang disebut sebagai Master Page (halaman utama pertama). Pada halaman utama ini
mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung). Dan jika halaman
pendukung diklik, maka dia akan berubah menjadi Master Page dan kemudian memiliki percabangan
halaman pendukung lainnya, dan seterusnya. Dalam struktur navigasi ini tidak diperbolehkan adanya
tampilan secara linier.

Gambar Struktur Navigasi Hirarki Gambar Contoh Struktur Navigasi Hirarki

a.3. 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 ada
pada struktur nonlinier ini berbeda dengan percabangan yang ada pada struktur hirarki, karena pada
percabangan nonlinier ini walaupun terdapat percabangan, tetapi tiap-tiap tampilan mempunyai tingkatan
yang sama yaitu tidak ada Master Page(halaman utama website) dan Slave Page(halaman pendukung
website).

Gambar Struktur Navigasi Non Linier Gambar Contoh Struktur Navigasi Non Linier
a.4. Struktur Navigasi Campuran
Struktur navigasi campuran disebut struktur navigasi bebas. Dimana didalamnya terdapat beberapa
gabungan dari struktur navigasi lainnya. Struktur navigasi campuran ini banyak digunakan dalam membuat
website, karena struktur ini dapat memberikan tingkat interaksi yang lebih tinggi. Dan keterikatan dalam
halaman website dapat dibuat lebih efisien dan menarik.

Gambar Struktur Navigasi Campuran Gambar Contoh Struktur Navigasi Campuran

b. Text Editor
Dalam membuat sebuah halaman web dibutuhkan text editor. Text editor yang dapat dipergunakan
dalam pembelajaran pemrograman web ini dapat menggunakan pilihan sebagai berikut :
• Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan di sistem operasi
Windows. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks
dan berkas kode sumber berbagai bahasa pemrograman
• Visual Studio Code (VS Code) adalah salah satu text editor yang populer digunakan oleh para
pengembang perangkat lunak. VS Code dikembangkan oleh Microsoft dan tersedia secara gratis untuk
diunduh dan digunakan pada berbagai sistem operasi seperti Windows, macOS, dan Linux
• Sublime Text adalah Text editor yang terbilang masih baru yang sangat mudah digunakan, penampilan
simple namun enak dipandang. Sublime text adalah aplikasi berbayar tapi anda dapat mendownload versi
demo_x0002_nya (meskipun versi demo tapi tidak ada batasan dalam penggunaannya).
• Atom: Atom adalah editor teks yang dikembangkan oleh GitHub, dengan fitur-fitur seperti penyorotan
sintaksis, manajemen proyek, dan integrasi Git.
• Emacs: Emacs adalah editor teks open-source yang dikembangkan oleh Free Software Foundation.
Editor ini memiliki banyak fitur seperti penyorotan sintaksis, pengeditan banyak jendela, dan integrasi
dengan berbagai bahasa pemrograman.
• TextMate: TextMate adalah editor teks yang hanya tersedia untuk sistem operasi macOS. Editor ini
menyediakan fitur seperti pemformatan kode, penyorotan sintaksis, dan pengeditan banyak jendela.
 PERTEMUAN 2 : PENGENALAN HTML
A. 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

B. Uraian Materi
Mampu mengenal skrip html, menggunakan ragam tag dan pendeklarasian tabel beserta atributnya, mampu
menuliskan skrip dalam html

HTML atau Hypertext Markup Language adalah bahasa markah atau markup language yang digunakan
untuk membuat dan memformat halaman web. HTML digunakan untuk menentukan struktur dan isi dari
sebuah halaman web, dan seringkali digunakan bersama dengan bahasa pemrograman lain seperti CSS dan
JavaScript.

HTML terdiri dari serangkaian tag atau elemen, yang digunakan untuk menentukan tampilan dan fungsi dari
sebuah halaman web. Setiap tag HTML memiliki sintaks dan atribut yang spesifik, dan tag tersebut dapat
berisi teks, gambar, link, dan elemen lainnya.
a. Konsep Dasar HTML
HTML digunakan bersama dengan bahasa pemrograman lain seperti CSS dan JavaScript untuk
membuat tampilan halaman web yang lebih menarik dan interaktif. CSS digunakan untuk mengatur tampilan
dan gaya dari halaman web, sementara JavaScript digunakan untuk membuat efek dan interaksi dinamis
antara elemen halaman web dan pengguna.
Konsep HTML yang penting untuk diperhatikan antara lain:
1. Struktur halaman web: HTML digunakan untuk menentukan struktur dari halaman web, seperti bagian
header, menu navigasi, isi konten, dan footer. Hal ini memungkinkan pengguna untuk dengan mudah
membaca dan memahami informasi yang terdapat pada halaman web.
2. Penggunaan tag atau elemen: Setiap elemen dalam HTML memiliki tag khusus yang menentukan
tampilan dan fungsi dari elemen tersebut. Sebagai contoh, tag p digunakan untuk membuat paragraf, tag
img digunakan untuk menyisipkan gambar, dan tag a digunakan untuk membuat link.
3. Penggunaan atribut: Setiap tag HTML juga dapat memiliki atribut yang menentukan properti atau
informasi tambahan tentang elemen tersebut. Sebagai contoh, atribut src digunakan pada tag img untuk
menentukan sumber gambar yang akan ditampilkan, dan atribut href digunakan pada tag a untuk
menentukan tautan URL yang akan dibuka.
4. Penggunaan nesting: Elemen-elemen HTML dapat ditempatkan di dalam elemen lainnya, dan hal ini
dikenal sebagai nesting. Sebagai contoh, tag ul digunakan untuk membuat daftar tak-terurut, dan setiap
item dalam daftar tersebut ditempatkan dalam tag li.
5. Penggunaan komentar: Anda dapat menambahkan komentar pada kode HTML untuk menjelaskan fungsi
atau tujuan dari kode tertentu. Komentar dalam HTML diawali dengan tanda <!-- dan diakhiri dengan
tanda -->.
b. Struktur Dasar HTML
Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir
termasuk simbol / diikuti oleh tipe elemen, misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di
dalam elemen lainnya. Sebuah dokumen HTML standar terlihat seperti ini :

Penjelasan struktur dasar HTML:

<!DOCTYPE html>: Mendefinisikan tipe dokumen HTML yang akan digunakan.

<html>: Menandakan awal dan akhir dari dokumen HTML.
<head>: Berisi metadata dokumen, seperti judul halaman, informasi tentang karakter set, stylesheet, dan
lainnya. Tidak akan ditampilkan pada tampilan halaman web, melainkan hanya digunakan untuk
memperkenalkan dokumen pada browser.
<title>: Menentukan judul halaman yang akan ditampilkan pada browser dan dapat ditemukan pada tag
head.
<body>: Menentukan isi dari halaman web yang akan ditampilkan pada browser. Semua elemen yang
terkait dengan tampilan halaman web harus ditempatkan dalam tag body.
 PERTEMUAN 3 : TAG HTML
A. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan tag dasar struktur HTML dan tag format dokumen HTML. Setelah
menyelesaikan materi pada pertemuan ini, mahasiswa mampu mempraktikkan tag dasar html dan tag
format dokumen html.
B. Uraian Materi
Mahasiswa mampu menjelaskan konsep TAG HTML, Pembuatan Tabel Menggunakan HTML

Script mendasar untuk membangun halaman web adalah HTML. HTML merupakan bahasa penanda
(markup) pada dokumen teks. Penandaan (markup) dalam HTML menggunakan ‘ < ‘ tanda lebih kecil dan
‘ > ‘ tanda lebih besar, perintah dalam HTML disebut dengan tag
Tag atau perintah dalam HTML menggunakan perintah yang berpasangan, ditandai dengan <..> dan diakhiri
</..>. Bentuk umum penulisan Tag diawali <nama_elemen> dan bentuk umum tag diakhiri </nama_elemen>.
Bentuk tag dalam HTML terdiri dari beberapa macam, yaitu :
a. Tag berpasangan
Format : <nama elemen> teks </nama elemen>
b. Tag tunggal
Format : <nama elemen>
c. Tag dengan attribut
Format : <nama elemen attribut1 = nilai1 attribut2 = nilai 2....> teks </nama elemen>
Attribut : property
a. Struktur TAG
Kode-kode dalam HTML biasanya disebut TAG. Tag dalam HTML dituliskan diapit oleh tanda lebih
kecil ( < ), tanda lebih besar ( > ), dan garis miring ( / ). Tag dituliskan berpasangan, jika tidak
menggunakan tanda garis miring( / ) setelah penulisan namanya, disebut sebagai tag pembuka. Namun, jika
menggunakan tanda garis miring ( / ) sebelum nama tag, maka disebut sebagai tag penutup. Tag bersifat
incasesensitiv yang dimana penulisan dengan huruf besar, huruf kecil dan campuran tidak masalah. Namun,
untuk standarisasinya tag di tuliskan dalam huruf kecil.
Jenis – jenis tag dalam HTML :
Beberapa jenis tag yang dapat di pergunakan dalam penulisan skrip
html, antara lain sebagai berikut :
 PERTEMUAN 4 : TABEL HTML
A. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan penggunaan table untuk mengatur tataletak tampilan. Setelah
menyelesaikan materi pada pertemuan ini, mahasiswa mampu mempraktikkan penggunaan table untuk
mengatur tata letak tampilan
B. Uraian Materi
1. Tabel
Perintah HTML untuk membuat tabel menggunakan Tag <table>. Tabel terdiri dari baris dan kolom, yang
desebut setiap kolom disebut sel. Struktur tabel terdiri dari:
a. Bentuk Tabel
<table border=”n” cellpadding=”n” cellspacing=”n“>
Border : garis pada tabel ; n=0, 1, 2, .. dst
Cellpadding : spasi antar sel dan border, Cellspacing : jarak antar sel
b. Judul tabel, dalam keadaan awal ditampilkan ditengah atas tabel
<caption align=”…”> … </caption>
c. Baris
<tr align=”…”> … </tr>
d. Table Header
<th> … </th>
e. Kolom atau Sel data
<td> … </td>
2. Atribut tabel :
• border: atribut untuk menentukan lebar border tabel.
Contoh: <table border="1">
• cellpadding: atribut untuk menentukan jarak antara konten sel dan batas sel.
Contoh: <table cellpadding="5">
• cellspacing: atribut untuk menentukan jarak antara sel-sel dalam tabel.
Contoh: <table cellspacing="10">
• width: atribut untuk menentukan lebar tabel.
Contoh: <table width="80%">
• height: atribut untuk menentukan tinggi tabel.
Contoh: <table height="500">
• align: atribut untuk menentukan alignment tabel.
Contoh: <table align="center">
• bgcolor: atribut untuk menentukan warna background tabel.
Contoh: <table bgcolor="#f5f5f5">
• colspan: atribut untuk menggabungkan beberapa kolom dalam satu sel.
Contoh: <td colspan="2">
• rowspan: atribut untuk menggabungkan beberapa baris dalam satu sel.
Contoh: <td rowspan="3">
• scope: atribut untuk memberikan ruang lingkup pada header sel.
Contoh: <th scope="row">
Berikut adalah contoh sederhana membuat tabel HTML dengan 2 baris
dan 2 kolom

Penjelasan kode di samping:

<!DOCTYPE html>: deklarasi tipe dokumen HTML
<html>: elemen pembuka untuk dokumen HTML
<head>: elemen untuk menyertakan informasi tentang dokumen, seperti
judul halaman (title)
<title>: elemen untuk memberikan judul pada halaman
<body>: elemen untuk menempatkan konten halaman
<table>: elemen untuk membuat tabel
<tr>: elemen untuk membuat baris pada tabel
<th>: elemen untuk membuat sel header pada tabel
<td>: elemen untuk membuat sel pada tabel
</table>, </tr>, </th>, </td>, </body>, </html>: elemen penutup untuk
dokumen HTML.
 PERTEMUAN 5 : FORM
A. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan langkah-langkah prosedur pembuatan Form dan jenis-jenis input dalam
Form. Setelah menyelesaikan materi pada pertemuan ini, mahasiswa mampu mempraktikkan penggunaan
table untuk mengatur tata letak tampilan
B. Uraian Materi
1. Form
Elemen HTML Form digunakan untuk :
a. Mendapatkan umpan balik dari user lain
b. Mendapatkan informasi transaksi pembelian secara online
c. Mendapat biodata custumer
<form action=”url” method=”get | post”>
………
………
</form>
url : nama file atau lokasi file yang akan melakukan proses selanjutnya setelah menekan tombol submit
method : metode yang digunakan pada saat proses pengiriman data yang berasal dari form kepada
program CGI
2. Jenis input pada Form
a. Text : input data dapat berupa angka atau teks

n pada size menunjukkan ukuran text box

maxlength menunjukkan jumlah karakter maksimum yang dapat ditampung.
Value merupakan nilai yang ditampung pada variabel yang didefinisikan name
b. Radio : menampilkan hanya satu pilihan yang dapat dipilih

c. Checkbox : menampilkan pilihan, dapat lebih dari satu pilihan

2. Jenis input pada Form
d. List atau Dropdown box : menyediakan pilihan dalam bentuk list.

e. Textarea : input data lebih dari 1 baris

Cols : jumlah karakter (besar kolom)

Rows : banyak baris
f. Untuk melanjutkan proses setelah selesai tekan tombol submit. Dengan menekan tombol submit maka
komputer akan membaca action yang terdapat pada Form dan melakukan proses selanjutnya sesuai
dengan perintah Action. Dalam Form terdapat tombol submit dan tombol reset.
 PERTEMUAN 6 : FRAME
A. Tujuan Pembelajaran
Pada pertemuan ini akan dijelaskan prosedur mengatur tataletak tampilan menggunakan FRAME.
Setelah menyelesaikan materi pada pertemuan ini, mahasiswa mampu membuat FRAME sesuai dengan
prosedur.

B. Uraian Materi
1. Frame
Elemen Frame dapat mengatur tataletak tampilan dengan layar menjadi beberapa bagian berdasarkan
baris dan kolom.
 HTML yang sudah menggunakan elemen Frame tidak perlu menggunakan perintah body, karena
perintah body sudah diganti dengan FRAMESET dimana setiap bagian berisi dokumen yang dipanggil
menggunakan Frame. Struktur penulisan Frameset dalam HTML :

FRAMESET memiliki atribut rows dan cols, ROWS (berisi beberapa baris frame pada tampilan layar
browser) dan COLS (berisi beberapa baris kolom frame pada tampilan layar browser). Sebagai contoh akan
membagi layar tampilan menjadi 3 baris frame di mana tinggi tiap frame 75, 120, dan 225 pixel, penulisan
script frame dalam HTML: <FRAMESET ROWS = “75, 120, 225”>. Baris dan kolom dalam frame dapat
dituliskan dengan cara lain dengan tanda % dan nilai relatif.
Berikut ini adalah contoh sederhana penggunaan frame di HTML:

Pada contoh di atas, terdapat dua frame dengan ukuran kolom masing-masing 25% dan 75% dari lebar
halaman. Frame pertama memuat halaman menu.html dengan nama frame "menu", sedangkan frame kedua
memuat halaman konten.html dengan nama frame "konten".
Jika browser pengguna tidak mendukung frame, maka pesan yang berada di dalam elemen body akan
ditampilkan sebagai gantinya. Namun, penggunaan frame sekarang sudah tidak direkomendasikan lagi
karena kurang fleksibel dan sulit dikembangkan. Lebih baik gunakan teknologi modern seperti Grid atau
Flexbox di CSS untuk membuat layout halaman web yang lebih fleksibel.
 Berikut contoh lain penggunaan frame di HTML:

Pada contoh ini, terdapat tiga frame. Frame

pertama (dalam bentuk baris) memuat halaman
header.html dengan nama frame "header". Frame kedua
(dalam bentuk kolom) terbagi lagi menjadi dua frame
dengan ukuran masing-masing 25% dan 75% dari lebar
frame kedua. Frame pertama dari frame kedua memuat
halaman menu.html dengan nama frame "menu",
sedangkan frame kedua dari frame kedua memuat
halaman konten.html dengan nama frame "konten".
Jika browser pengguna tidak mendukung frame, maka
pesan yang berada di dalam elemen body akan ditampilkan
sebagai gantinya. Namun, perlu diperhatikan lagi bahwa
penggunaan frame sudah tidak direkomendasikan lagi dan
lebih baik gunakan teknologi modern seperti Grid atau
Flexbox di CSS untuk membuat layout halaman web yang
lebih fleksibel.
 PERTEMUAN 7 : Dasar PHP
A. Tujuan Pembelajaran
Mahasiswa mampu menjelaskan konsep penggunaan PHP, Perbedaan HTML dengan PHP
B. Uraian Materi
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 menambahkan skrip PHP, anda bisa menjadikan
halaman HTML menjadi lebih powerful, dinamis dan bisa dipakai sebagai aplikasi lengkap, misalnya web
portal, e-learning, e_x0002_library, dll.
PHP pertama kali dikembangkan oleh seorang programmer bernama Rasmus Lerdrof pada tahun
1995. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakan PHP/FI sehingga
banyak pemrograman yang tertarik untuk ikut mengembangkan PHP. Dan selanjutnya pada tahun 1997
perusahaan bernama Zend, mengembangkan intrepreter PHP tersebut menjadi lebih baik.

Ada 4 jenis tag yang bisa digunakan untuk memasukkan kode PHP.
PHP (Hypertext Preprocessor) adalah bahasa pemrograman server-side yang digunakan untuk
mengembangkan aplikasi web. Konsep dasar PHP meliputi:
• Variabel: Variabel adalah tempat untuk menyimpan nilai atau informasi dalam program PHP. Variabel
dapat dideklarasikan dengan menggunakan tanda $ diikuti dengan nama variabel, kemudian diikuti
dengan nilai yang ingin disimpan.
• Tipe data: PHP memiliki beberapa tipe data yang digunakan untuk menyimpan nilai, antara lain: string
(teks), integer (bilangan bulat), float (bilangan desimal), boolean (true atau false), dan array (kumpulan
nilai).
• Fungsi: Fungsi adalah blok kode yang dapat digunakan kembali di dalam program. Fungsi biasanya
digunakan untuk melakukan tugas tertentu dan mengembalikan nilai ke program utama. Fungsi pada
PHP dapat didefinisikan dengan menggunakan kata kunci function.
• Kontrol alur: Kontrol alur adalah konsep untuk mengatur urutan eksekusi program. PHP memiliki struktur
kontrol seperti if-else, switch-case, dan loop seperti for, while, dan do-while.
• Operator: Operator pada PHP digunakan untuk melakukan operasi pada nilai seperti penjumlahan,
pengurangan, perkalian, dan lain sebagainya. PHP juga memiliki operator logika seperti AND, OR, dan
NOT yang digunakan untuk mengevaluasi kondisi logika.
• Penggunaan Form: PHP juga digunakan untuk mengolah data yang dikirimkan melalui form HTML. Data
yang dikirimkan melalui form dapat diolah dengan menggunakan metode POST atau GET yang tersedia
pada PHP.
contoh sederhana program PHP untuk menampilkan teks "Hello World"

Penjelasan:
• Baris pertama <!DOCTYPE html> merupakan deklarasi tipe dokumen HTML yang digunakan pada
halaman web.
• Baris kedua <html> menandakan awal dari sebuah dokumen HTML.
• Baris ketiga <body> menandakan awal dari bagian body (isi) dari halaman web.
• Baris keempat <?php menandakan awal dari blok kode PHP.
• Baris kelima echo "Hello World!"; adalah kode PHP yang akan menampilkan teks "Hello World!" pada
halaman web.
• Baris keenam ?> menandakan akhir dari blok kode PHP.
• Baris ketujuh </body> menandakan akhir dari bagian body (isi) dari halaman web.
• Baris kedelapan </html> menandakan akhir dari dokumen HTML.
Perbedaan HTML dengan PHP
HTML dan PHP adalah dua hal yang berbeda dan memiliki fungsi yang berbeda dalam pengembangan web.
Berikut adalah perbedaan antara HTML dengan PHP:
• Fungsi: HTML adalah bahasa markup yang digunakan untuk membuat tampilan halaman web. HTML
hanya dapat menampilkan informasi dan tidak dapat melakukan pemrosesan data. Sedangkan PHP
adalah bahasa pemrograman server-side yang digunakan untuk mengembangkan aplikasi web. PHP
dapat digunakan untuk memproses data dan menghasilkan output dinamis.
• Struktur: HTML terdiri dari tag dan atribut yang digunakan untuk membuat struktur dan tampilan
halaman web. Sedangkan PHP terdiri dari kode-kode pemrograman yang digunakan untuk memproses
data dan menghasilkan output dinamis.
• Penulisan: HTML ditulis menggunakan tag dan atribut yang ditulis dalam file dengan ekstensi .html
atau .htm. Sedangkan PHP ditulis menggunakan kode pemrograman yang disisipkan ke dalam file HTML
dengan ekstensi .php.
• Ketergantungan: HTML tidak memerlukan server atau lingkungan pengembangan web khusus untuk
dapat dijalankan. Sedangkan PHP harus dijalankan pada server yang memiliki lingkungan pengembangan
web seperti XAMPP atau Apache.
• Interaksi dengan pengguna: HTML hanya dapat menampilkan informasi pada halaman web tanpa
interaksi dengan pengguna. Sedangkan PHP dapat berinteraksi dengan pengguna melalui form HTML
atau dengan memproses data yang dikirimkan oleh pengguna.
Variabel PHP
Variable merupakan sebuah istilah yang menyatakan sebuah tempat yang menampung nilai-nilai tertentu di
mana nilai di dalamnya bisa diubah_x0002_ubah. 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. Variable penting karena tanpa adanya variable tidak bisa menyimpan nilai
tertentu untuk diolah.
Berikut adalah contoh penggunaan variabel pada PHP:
Dalam contoh di atas, pertama-tama kita
mendeklarasikan dua variabel yaitu $nama dan
$umur. Variabel $nama diisi dengan nilai string
"John Doe", sedangkan variabel $umur diisi
dengan nilai integer 25. Kemudian, kita
menampilkan nilai dari kedua variabel tersebut
dengan menggunakan fungsi echo. Berikut
Output dari contoh code disamping:
Variabel di PHP juga dapat diubah nilainya kapan saja selama proses eksekusi program. Berikut adalah
contoh penggunaan variabel yang diubah nilainya:

Output dari kode di di samping adalah sebagai

berikut:
 PERTEMUAN 9 : Perulangan/loop PHP
Loop pada PHP adalah sebuah struktur kendali yang digunakan untuk melakukan perulangan pada
blok kode tertentu. Dengan menggunakan loop, kita dapat melakukan tugas yang sama secara berulang-
ulang tanpa harus menulis kode yang sama berulang kali
Di PHP, terdapat dua jenis loop yaitu for loop dan while loop.

Berikut adalah contoh penggunaan for loop pada PHP:

Pada contoh di atas, kita menggunakan for loop untuk mencetak angka dari 1 hingga 10. Pada awalnya,
variabel $i diinisialisasi dengan nilai 1. Kemudian, kondisi $i <= 10 diuji setiap kali perulangan dilakukan.
Selama kondisi tersebut benar, blok kode yang terdapat dalam for loop akan dijalankan dan variabel $i
akan ditingkatkan nilainya sebanyak 1 setiap kali perulangan selesai dieksekusi.

Output dari kode di di samping adalah sebagai berikut:

Berikut adalah contoh penggunaan while loop pada PHP:

Output >>

Pada contoh di atas, kita menggunakan while loop untuk mencetak angka dari 1 hingga 10. Pada
awalnya, variabel $i diinisialisasi dengan nilai 1. Kemudian, kondisi $i <= 10 diuji setiap kali perulangan
dilakukan. Selama kondisi tersebut benar, blok kode yang terdapat dalam while loop akan dijalankan dan
variabel $i akan ditingkatkan nilainya sebanyak 1 setiap kali perulangan selesai dieksekusi.
 PERTEMUAN 10-11 : Perulangan/loop PHP - Lanjutan
for loop dengan kondisi if-else
Loop pada PHP dapat digabungkan dengan struktur kendali lain seperti if-else untuk melakukan
perulangan dengan kondisi tertentu. Dalam kasus ini, loop akan terus berjalan selama kondisi pada if-else
terpenuhi.

Berikut adalah contoh penggunaan for loop dengan kondisi if-else pada PHP:
Pada contoh di atas, kita menggunakan for loop dengan kondisi if-else untuk mencetak angka ganjil dari 1
hingga 10. Pada setiap perulangan, kondisi $i % 2 != 0 akan diuji. Jika kondisi tersebut benar (artinya $i
adalah bilangan ganjil), maka angka tersebut akan dicetak menggunakan fungsi echo.

Output dari kode di atas adalah sebagai berikut:

Berikut adalah contoh penggunaan while loop dengan kondisi if-else pada PHP:

Output >>

Pada contoh di atas, kita menggunakan while loop dengan kondisi if-else untuk mencetak angka
genap dari 1 hingga 10. Pada setiap perulangan, kondisi $i % 2 == 0 akan diuji. Jika kondisi tersebut
benar (artinya $i adalah bilangan genap), maka angka tersebut akan dicetak menggunakan fungsi
echo.
For-Range
Loop pada PHP dapat digunakan dengan kondisi for-range untuk melakukan perulangan dengan rentang
nilai tertentu. Dalam kasus ini, loop akan melakukan perulangan sebanyak rentang nilai yang telah
ditentukan.
Berikut adalah contoh penggunaan for loop dengan kondisi for-range pada PHP:

Output >>

Pada contoh di atas, kita menggunakan for loop dengan kondisi for-range untuk mencetak angka
dari 1 hingga 10. Kita menggunakan sintaks for ($i = 1; $i <= 10; $i++) yang artinya variabel $i akan
dimulai dari nilai 1, melakukan perulangan selama nilai variabel $i kurang dari atau sama dengan 10,
dan menambahkan nilai variabel $i sebanyak 1 setiap kali perulangan selesai dieksekusi.
Berikut adalah contoh penggunaan foreach loop dengan kondisi for-range pada PHP:

Output >>

Pada contoh di atas, kita menggunakan foreach loop dengan kondisi for-range untuk mencetak
angka dari 1 hingga 10. Kita menggunakan fungsi range(1, 10) untuk membuat sebuah array yang
berisi rentang nilai dari 1 hingga 10. Selanjutnya, kita menggunakan foreach loop untuk melakukan
perulangan pada setiap nilai dalam array tersebut dan mencetak nilai tersebut menggunakan fungsi
echo.
For Bersarang
Loop pada PHP dapat digunakan dengan for bersarang untuk melakukan perulangan di dalam perulangan.
Dalam kasus ini, loop pertama akan mengeksekusi loop kedua sebanyak jumlah perulangan yang telah
ditentukan.
Berikut adalah contoh penggunaan for loop bersarang pada PHP:

Output >>

Pada contoh di atas, kita menggunakan for loop bersarang untuk membuat tabel perkalian 10x10. Kita
menggunakan dua variabel, $i dan $j, yang masing-masing mewakili nilai baris dan kolom dalam
tabel. Loop pertama (for ($i = 1; $i <= 10; $i++)) akan mengeksekusi loop kedua (for ($j = 1; $j <= 10;
$j++)) sebanyak 10 kali untuk setiap nilai $i. Pada setiap perulangan, kita mencetak hasil perkalian
antara nilai $i dan $j dalam bentuk tabel menggunakan fungsi echo.
 PERTEMUAN 12 : Opertor Pada PHP
Operator PHP
Operator pada PHP adalah simbol yang digunakan untuk melakukan operasi pada data seperti
variabel, konstanta, dan nilai literal. Berikut ini adalah jenis-jenis operator yang tersedia pada PHP beserta
contohnya:
1. Operator Aritmatika
Operator aritmatika digunakan untuk melakukan operasi
matematika seperti penjumlahan, pengurangan, perkalian,
pembagian, modulus, dan perpangkatan. Contoh:
2. Operator Assignment
Operator assignment digunakan untuk memberikan nilai pada variabel. Contoh:
3. Operator Pembanding
Operator pembanding digunakan untuk membandingkan dua nilai. Hasil dari operasi pembanding adalah
boolean (true atau false). Contoh:
4. Operator Logika
Operator logika digunakan untuk menggabungkan dua atau lebih kondisi dalam satu statement. Contoh:
5. Operator Increment dan Decrement
Operator Increment dan Decrement: Digunakan untuk menambah atau mengurangi nilai variabel sebesar 1.
Berikut adalah contoh penggunaannya:

6. Operator Concatenation
Operator Concatenation: Digunakan untuk menggabungkan dua atau lebih string. Berikut adalah contoh
penggunaannya:
 PERTEMUAN 13 : Javascript
JavaScript adalah bahasa pemrograman yang digunakan untuk mengembangkan aplikasi web.
JavaScript biasanya digunakan untuk membuat interaksi pengguna yang dinamis, validasi formulir,
manipulasi DOM, dan lain-lain.
Berikut adalah beberapa dasar-dasar pemrograman JavaScript yang perlu dipahami:

1. Variabel
Variabel digunakan untuk menyimpan nilai atau data dalam program. Variabel dalam JavaScript
dideklarasikan dengan menggunakan kata kunci var, let, atau const. Berikut adalah contoh penggunaan
variabel dalam JavaScript:
2. Tipe Data
Tipe data dalam JavaScript dapat berupa angka, string, boolean, null, atau undefined. JavaScript juga
mendukung tipe data objek dan array. Berikut adalah contoh tipe data dalam JavaScript:

3. Operasi Aritmatika:
Operasi aritmatika digunakan untuk melakukan perhitungan matematika dalam program. Operasi
aritmatika dalam JavaScript meliputi penjumlahan, pengurangan, perkalian, pembagian, dan modulus.
Berikut adalah contoh penggunaan operasi aritmatika dalam JavaScript:
4. Kondisi
Kondisi digunakan untuk memeriksa suatu kondisi dalam program dan melakukan tindakan yang sesuai
berdasarkan kondisi tersebut. Kondisi dalam JavaScript meliputi if, else if, dan else. Berikut adalah contoh
penggunaan kondisi dalam JavaScript:

5. Loop
Loop: Loop digunakan untuk mengulang suatu tindakan
dalam program berulang kali. Loop dalam JavaScript
meliputi for, while, dan do-while. Berikut adalah contoh
penggunaan loop dalam JavaScript:
Struktur pemrograman JavaScript
1. Statement
Statement adalah instruksi yang diberikan pada program untuk melakukan tindakan tertentu. Statement
dalam JavaScript diakhiri dengan tanda titik koma (;). Beberapa jenis statement dalam JavaScript antara
lain: if, for, while, do-while, switch, try-catch, dan sebagainya. Berikut adalah contoh penggunaan
statement dalam JavaScript:

2. Ekspresi
Ekspresi adalah kode yang menghasilkan nilai atau data.
Ekspresi dapat berupa variabel, konstanta, operator,
atau fungsi. Berikut adalah contoh penggunaan ekspresi
dalam JavaScript:
3. Komentar
Komentar digunakan untuk menambahkan catatan atau penjelasan pada kode program. Komentar dalam
JavaScript dapat berupa komentar satu baris (//) atau komentar multi baris (/.../). Berikut adalah contoh
penggunaan komentar dalam JavaScript:
 PERTEMUAN 14,15 : CSS
CSS (Cascading Style Sheets) adalah salah satu bahasa pemrograman web yang digunakan untuk
mengatur tampilan atau style dari halaman web. CSS digunakan untuk memisahkan antara struktur HTML
dan tampilan atau style dari halaman web. Berikut ini adalah dasar-dasar CSS yang perlu dipahami:

1. Selektor
Selektor adalah elemen HTML atau kelompok elemen HTML yang akan diberikan style. Ada beberapa jenis
selektor dalam CSS, antara lain:
• Selektor elemen: menggunakan nama elemen HTML sebagai selektor, misalnya p, h1, atau div.
• Selektor kelas: menggunakan nama kelas HTML sebagai selektor, diawali dengan tanda titik (.),
misalnya .header, .nav, atau .footer.
• Selektor ID: menggunakan ID HTML sebagai selektor, diawali dengan tanda pagar (#), misalnya #banner,
#content, atau #sidebar.
• Selektor atribut: menggunakan atribut HTML sebagai selektor, misalnya [type="text"] untuk memilih
elemen input dengan tipe teks.
2. Properti
Properti adalah gaya atau style yang akan diberikan pada selektor. Beberapa contoh properti CSS antara
lain:
• color: untuk mengubah warna teks.
• font-family: untuk mengubah jenis font.
• font-size: untuk mengubah ukuran font.
• background-color: untuk mengubah warna latar belakang.
• border: untuk membuat border pada elemen.
3. Nilai
Nilai: Nilai adalah nilai dari properti CSS yang akan diberikan pada selektor. Beberapa contoh nilai CSS
antara lain:
• Warna: menggunakan nama warna, kode hex, atau rgb, misalnya red, #00ff00, atau rgb(255, 0, 0).
• Font: menggunakan jenis font, misalnya Arial, Verdana, atau Helvetica.
• Ukuran: menggunakan ukuran dalam px, em, atau rem, misalnya 12px, 1.2em, atau 1.5rem.
• Gambar: menggunakan url gambar, misalnya url("gambar.jpg")
4. Komentar
Komentar: Komentar digunakan untuk menambahkan catatan atau penjelasan pada kode CSS. Komentar
dalam CSS dimulai dengan /* dan diakhiri dengan */. Berikut adalah contoh penggunaan komentar dalam
CSS:
5. Cascading
Cascading dalam CSS merujuk pada cara CSS mengatasi konflik antara beberapa aturan CSS yang
berbeda. Cascading mengikuti prinsip spesifitas, yaitu semakin spesifik suatu aturan CSS, maka semakin
kuat pula pengaruhnya. Selain itu, CSS juga mengikuti prinsip warisan, yaitu suatu aturan CSS dapat
diwarisi oleh elemen HTML yang lebih dalam di dalamnya.
 REFERENSI

1.Ani Oktarini Sar, Ari Abdilah, & Sunarti, 2019. WEB Programming. Graha Ilmu, Yogyakarta.
2.Endar Nirmala, 2019. Pemrograman WEB. Unpam Press, Banten.
TERIMA KASIH

syahrul.usman@unpacti.ac.id.com
08114701727