PAPER TENTANG

WEB PROGRAMMING

SEKOLAH TINGGI TEKNOLOGI INDONESIA

JAKARTA
2022
Disusun Oleh :
Muhammad Ludfi Effendy
 186710651058
ABSTRAK

Web programmer adalah sebuah pekerjaan dalam bidang teknologi informasi

yang mana didalam pekerjaan tersebut seorang web programmer akan melakukan
pengcodingan dan pemrograman sebuah website. Web Programmer akan membuat script
atau coding untuk membuat halaman web akan terlihat lebih dinamis dan menarik.
Sebuah website yang biasa akan terlihat sangat membosankan dengan tampilan yang
standart untuk itu web programmer akan membuat coding agar website yang diciptakan
terlihat lebih dinamis.
 DAFTAR ISI
ABSTRAK.................................................................................................................................................2
DAFTAR ISI..............................................................................................................................................3
BAB I..........................................................................................................................................................4
PENDAHULUAN..................................................................................................................................4
1.1. Latar Belakang.......................................................................................................................4
1.2. Rumusan Masalah.................................................................................................................4
1.3. Tujuan....................................................................................................................................4
BAB II........................................................................................................................................................5
PEMBAHASAN.....................................................................................................................................5
2.1 Konsep Dasar Web................................................................................................................5
2.2 Pengenalan HTML..............................................................................................................11
2.3 PHP.......................................................................................................................................15
2.4 Operator...............................................................................................................................18
2.5 Pengenalan Form.................................................................................................................21
2.6 Percabangan.........................................................................................................................21
2.7 Pengulangan.........................................................................................................................23
2.8 Javascript.............................................................................................................................25
2.9 CSS........................................................................................................................................26
BAB III.....................................................................................................................................................30
KESIMPULAN....................................................................................................................................30
DAFTAR PUSTAKA..............................................................................................................................30
 BAB I
PENDAHULUAN

1.1. Latar Belakang

Di era kemajuan teknologi seperti sekarang ini, Website menjadi hal yang sudah
tidak asing lagi terdengar pada telinga kita, kususnya dalam dunia internet. Meskipun
sudah banyak orang mempunyai homepage di internet baik yang menggunakan ISP
maupun server web gratis, tetapi pada umumnya homepage tersebut bersifat statis dan
tidak dapat berinteraksi dengan pengunjung web.
Website adalah media yang digunakan untuk menampung data teks, gambar,
suara, dan animasi yang dapat ditampilkan di internet dan dapat diakses oleh komputer
yang terhubung dengan internet secara global. Website merupakan media informasi
berbasis jaringan komputer yang dapat diakses dimana saja dengan biaya relatif murah.
Website merupakan bentuk implementasi dari bahasa pemograman web (web
programming). PHP (Hypertext Preprocessor) merupakan bahasa pemograman berbasis
web yang memiliki kemampuan untuk memproses dan mengolah data secara dinamis.
Dalam perkembangan pemrograman internet terdapat banyak jenis bahasa
pemrograman yang pembuat aplikasi kenal baik pemrograman di sisi server maupun
pemrograman di sisi klien. Sebut saja bahasa pemrograman PHP, JSP, ASP, HTML,
XHTML, dan lain sebagainya. Namun tetap saja kode yang diterjemahkan oleh browser
itu berupa halaman HTML (HyperText Markup Language).

1.2. Rumusan Masalah

Adapun rumusan masalahnya yaitu :
1. Apakah itu Web Programming ?
2. Istilah-istilah dalam Pemrograman Web apa saja ?
3. Apa itu HTML ?
4. Apa itu PHP ?
5. Apa itu Pengulangan pada PHP ?
 6. Apa itu CSS ?

1.3. Tujuan
Adapun tujuan menyusun tugas ini Untuk Memperbaiki Nilai Mata kuliah Web
Programming pada Semester 6.
 BAB II
PEMBAHASAN
2.1 Konsep Dasar Web
a. Pengertian Website
Website merupakan kumpulan halaman digital yang berisi informasi berupa teks,
animasi, gambar, suara dan video atau gabungan dari semuanya yang terkoneksi oleh
internet, sehingga dapat dilihat oleh seluruh siapapun yang terkoneksi jaringan
internet. Jenis Kategori Website :
 Web Statis Merupakan website yang mempunyai halaman yang tidak berubah.
Perubahan suatu halaman dilakukan secara manual dengan mengedit code yang
menjadi stuktur dari website tersebut.
 Web Dinamis Merupakan website yang secara terstruktur diperuntukan untuk
diupdate sesering mungkin. Biasanya disediakan halaman backend untuk
melakukan perubahan konten dari website tersebut. Contohnya : web portal, web
berita, dll.
 Web Interaktif Merupakan website yang berinteraksi antara penggunanya.
Biasanya berupa forum diskusi maupun blog. Dimana adanya moderator sebagai
pengatur alur diskusi.

b. Pengertian Pemrograman Web

Pemrograman web diambil dari 2 suku kata yaitu Pemrograman dan Web.
Pemrograman yang dalam bahasa English adalah programming dan diartikan proses,
cara, perbuatan program. Web adalah jaringan komputer yang terdiri dari kumpulan
situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi
melalui protokol transfer hypertext.
Jadi pemrograman web adalah pembuatan aplikasi program dengan bahasa skrip
yang akan menghasilkan sebuah aplikasi yang diakses pada web browser. Dalam
mempelajari pemrograman web, perlu diketahui pemahaman beberapa bahasa skrip
yang dibutuhkan dalam pembuatan 1 halaman website, yaitu :
  HTML
 PHP
 CSS
 JAVASCRIPT

c. Istilah-Istiilah Dalam Pemrograman Web

Ada beberapa istilah yang sering digunakan apabila anda mempelajari
pemrograman web ini diantaranya yaitu :
1) Internet
Internet berarti rangkaian komputer yang terhubung menjadi beberapa rangkaian
jaringan. Sistem komputer terhubung secara global dan menggunakan TCP/IP
sebagai protocol.

2) World Wide Web (WWW)

WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan
data dan informasi untuk dapat digunakan secara massal.

3) Website
Website merupakan istilah yang merujuk kepada suatu nama halaman web yang
dapat diakses jika terkoneksi dengan internet. Untuk mengakses sebuah website,
selain terkoneksi dengan internet, anda pun harus membukanya dalam sebuah
aplikasi web browser.

4) Web Server
Web Server merupakan perangkat lunak yang digunakan untuk menerima
permintaan melalui Protokol HTTP atau HTTPS dari client, kemudian dikirimkan
kembali dalam bentuk halaman-halaman web. Contoh web server : Xampp,
Apache2Triad, dll.

5) URL (Universal Resource Locator)

 URL merupakan suatu alamat yang menunjukkan sebuah halaman tertentu
internet. Contoh URL adalah: http://www.google.com

6) HTTP (Hypertext Transfer Protocol)

HTTP merupakan bagian dari URL digunakan untuk mengidentifikasikan lokasi
web, dan digunakan dalam protokol HTML.

7) 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.

8) 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.

9) Hyperlink
Hyperlink atau disebut link merupakan sebuah tools yang berperan dalam
mempopulerkan penggunaan internet, hyperlink dapat mereferensikan sebuah teks
atau gambar ke alamat lain di internet.

10) 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). Jika menggunakan sistem operasi Windows terdapat
program web browser bawaan, yaitu Internet Explorer. Terdapat banyak program
alternative web browser yang sebagian besar bersifat gratis, seperti Firefox, Opera,
Safari, chrome dan seterusnya.

d. 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).
Ada 4 macam bentuk dasar dari peta navigasi yang biasa digunakan dalam proses
pembuatan aplikasi web, yaitu:

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

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).

Gambar Struktur
Navigasi Hirarki
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

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

e. 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 :
1) Notepad
Notepad adalah aplikasi text editor yang sudah ada didalam instalasi os windows
anda
masing-
masing. Yang
perlu

diperhatikan jika menggunakan notepad sebagai text editor, yakni extension type
file dituliskan langsung dan pemilihan save as type adalah All Files.

2) Notepad++
 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.

3) Sublime Text
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 demonya (meskipun versi demo tapi tidak ada batasan
dalam penggunaannya).

4) Atom
Atom adalah teks editor gratis dan terbuka untuk macOS, Linux, dan Microsoft
Windows dengan dukungan untuk plug-in yang ditulis dalam Node.js, dan
tertanam Kontrol Git, yang dikembangkan oleh GitHub.

2.2 Pengenalan HTML

a. Pengertian Hypertext Markup Language (HTML)
 Hypertext Markup Language (HTML) adalah bahasa pemrograman standar yang
digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk
menampilkan berbagai informasi di dalam sebuah penjelajah web Internet
(Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs
atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan
antar situs dalam dunia internet.

HTML merupakan sebuah bahasa yang bermula bahasa yang sebelumnya banyak

dipakai di dunia percetakan dan penerbirtan yang disebut Standard Generalized

Markup Language (SGML).
Sekarang ini HTML merupakan standar Internet yang dikendalikan dan
didefinisikan pemakaiannya oleh World Wide Web Consortium (W3C). Pada tahun
1989, HTML dibuat oleh kolaborasi Berners-lee Robert dengan Caillau TIM pada saat
mereka bekerja di CERN (CERN merupakan lembaga penelitian fisika energi tinggi di
Jenewa)
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan
untuk mentransfer data atau document yang berformat HTML dari web server ke web
 browser. Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan
melihat halaman web.

b. Fungsi HTML (HyperText Markup Language)

HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan
tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh
browser agar halaman tersebut dapat ditampilkan secara benar.
Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan
informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui
layanan web. Fungsi HTML yang lebih spesifik yaitu :
 Membuat halaman web.
 Menampilkan berbagai informasi di dalam sebuah browser Internet.
 Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

c. 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 . Sebuah
elemen HTML dapat bersarang di dalam elemen lainnya. Sebuah dokumen HTML
standar terlihat seperti ini :

<html>
<head>
<title> Judul Web </title>
</head>
<body>

</body>
</html>

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:
 HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML
secara otomatis dalam jangka waktu tertentu.
 CONTENT, atribut ini berisi informasi tentang isi document HTML yang
akan dipanggil.
 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.

d. 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 :

Tag Kegunaan
<html> Untuk mendefinisikan sebuah
 dokumen HTML
Mendefinisikan body atau isi sebuah
<body>
dokumen
Mendefinisikan heading 1 sampai 6,
<h1>…</h1> s/d <h6>…</h6> ukuran fontsize judul yang besar
sampai yang terkecil
<p>….</p> Mendefinisikan sebuah paragraph
<br> Mendefinisikan break line / baris baru
Mendefinisikan horizontal rule
<hr>
pemisah antar bagian atau paragraph
Mendefinisikan pembuatan order
<ol>…...</ol>
list/penomoran dengan angka/huruf
Mendefinisikan pembuatan unorder
<ul>…....</ul>
list/penomoran dengan bullets
<li>…….</li> Mendefinisikan isi data dalam list
Mendefinisikan format italic/huruf
<i>……..</i>
miring
Mendefinisikan format bold/huruf
<b>……</b>
tebal
Mendefinisikan format
<u>……..</u>
underline/huruf bergaris bawah
_……... Mendefinisikan teks subscript
^……... Mendefinisikan teks superscript
<img>…….</img> Mendefinisikan tampilkan gambar
<marquee>….</marquee> Mendefinisikan tulisan bergerak
<table> ……………</table> Mendefinisikan pembuatan tabel

2.3 PHP
a. Pengertian 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
menambahkan skrip PHP, anda bisa menjadikan halaman HTML menjadi lebih
powerful, dinamis dan bisa dipakai sebagai aplikasi lengkap, misalnya web portal, e-
learning, e-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.
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 pengolahan kode PHP akan dikembalikan lagi dalam bentuk kode
HTML untuk ditampilkan di browser. Ada 4 jenis tag yang bisa digunakan untuk
memasukkan kode PHP yaitu :

Jenis Tag Tag Pembuka Tag Penutup

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

Yang dapat langsung diterapkan disemua platform adalah tag standard dan tag
script.
b. Dasar-dasar PHP
1. Variable
 Variable merupakan sebuah istilah yang menyatakan sebuah tempat yang
menampung nilai-nilai tertentu di mana nilai di dalamnya bisa diubah-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.
Variable 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 : $nama, $no_telp, $_pekerjaan. Untuk
mendefinisikan variable, hanya perlu menuliskannya maka otomatis variable dikenali
oleh PHP.

2. 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 berikut ini :

Tipe Contoh Penjelasan

Interger 134 Semua angka bukan pecahan
Double 5.1234 Nilai Pecahan
String “barang” Kumpulan karakter

Tipe Contoh Penjelasan

Boolean False Salah satu nilai Truue atau False
Object Sebuah instance dari class
Array Larik

3. 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.

4. Komentar
Program merupakan kegiatan menuliskan bahasa yang dipahami oleh mesin.
Walaupun bahasa yang digunakan adalah bahasa tingkat tinggi, namun tentu masih
tidak semudah dipahami oleh bahasa biasa. Untuk itu kita bisa menggunakan komentar.

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

b. Jenis-jenis Operator
1. Operator Aritmatika
Operator ini digunakan untuk melakukan perhitungan matematika, sebagian
berikut :
Simbol Nama Operator
+ Penjumlahan
- Pengurangan
/ Pembagian
* Perkalian
% Sisa Pembagian
 ** Pemangkatan

2. Operator Penugasan (Assignment)

Operator ini adalah operator untuk memberikan tugas kepada variabel. Biasanya
digunakan untuk mengisi nilai. Sama dengan (=) adalah operator penugasan untuk
mengisi nilai. Selain sama dengan, terdapat juga beberapa operator penugasan
seperti:
Simbol Nama Operator
= Pengisian Nilai
+= Pengisian dan Penjumlahan
-= Pengisian dan Pengurangan
*= Pengisian dan Perkalian
** = Pengisian dan Pemangkatan
/= Pengisian dan Pembagian
%= Pengisian dan Sisa bagi
.= Pengisian dan Penggabungan (string)

Bedanya Operator Penugasan dengan operator aritmatika. Operator penugasan

digunakan untuk mengisi nilai dan juga menghitung dengan operasi aritmatika.
Sedangkan operator aritmatika hanya berfungsi untuk menghitung saja.
Opereator penugasan akan sering ditemukan saat membuat program.

3. Operator Increment & Decrement

Operator increment dan decrement merupakan operator yang digunakan untuk
menambah +1 (tambah satu) dan mengurangi -1 (kurangi dengan satu). Opertor
increment menggunakan simbol (++), sedangkan decrement menggunakan
simbol (--).

4. Operator Relasi
 Operator relasi adalah operator untuk membandingkan dua buah nilai. Hasil
operasi dari operator relasi akan menghasilkan nilai dengan tipe data boolean,
yaitu true (benar) dan false (salah). Berikut ini daftar operator relasi:

Simbol Nama Operator

> Lebih Besar
< Lebih Kecil
= = atau = = = Sama dengan
! = atau ! = = Tidak sama dengan
>= Lebih besar atau Sama dengan
<= Lebih kecil atau Sama dengan

5. Operator Logika
Operator logika adalah operator untuk melakukan operasi logika seperti AND,
OR, dan NOT. Operator logika terdiri dari:

Simbol Nama Operator

&& Logika AND
|| Logika OR
! Negasi/ kebalikan/ NOT

6. Operator Bitwise
Operator bitwise merupkan operator yang digunakan untuk operasi bit (biner).
Operator ini terdiri dari:

Simbol di Java Nama

& AND
| OR
^ XOR
~ Negasi/ kebalikan
<< Left Shift
 >> Right Shift

Operator ini berlaku untuk tipe data int, long, short, char, dan byte. Operator ini
akan menghitung dari bit-ke-bit.

7. Operasi Ternary
Operator ternary adalah operator untuk membuat sebuah kondisi. Simbol yang
digunakan adalah tanda tanya (?) dan titik dua (:).

2.5 Pengenalan Form

a. 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.

b. 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.
Pada atribut action menerangkan ke halaman yang akan digunakan pada proses input,
sedangkan method digunakan untuk mengatur cara mem-parsing konten.
Pada halaman web akan menerima inputan dari user atau para pengunjung dengan
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.

2.6 Percabangan
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
menggunakan statement 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 berdasarkan
kondisi tertentu yang harus dipenuhi.
Bentuk umum : if(kondisi)
{
Statement;
}
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 alternatif perintah apabila kondisi bernilai salah / FALSE.
Bentuk umum : if (kondisi)
{
Statement_1;
}
else
{
Statement_2;
}
c) Pernyataan IF Majemuk
 Jika pernyataan else memberikan alternatif pilihan kedua, maka untuk pernyataan
ElseIf dapat digunakan untuk merumuskan banyak alternatif pilihan (lebih dari dua
pilihan).
Bentuk umum : if (kondisi_1)
{
statement_1;
}
elseif (kondisi_2)
{
statement_2;
}
elseif (kondisi_3)
{
statement_3;
}
Else
{
Statement_n;
}

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; break;
default: statement_n; }

2.7 Pengulangan
a. Pengertian Dasar Pengulangan
Pengulangan atau disebut sebagai looping adalah instruksi khusus dalam Bahasa
pemrograman dan algoritma yang digunakan untuk mengulang beberapa perintah sesuai
dengan jumlah yang telah dilakukan. Tujuannya adalah untuk mempermudah
pengerjaan program dan untuk mempersingkat instruksi program. Dengan pengulangan
instruksi program yang seharusnya ditulis dengan jumlah baris yang banyak bisa
dipersingkat.

b. Jenis-jenis Metode Pengulangan pada PHP

Ada beberapa jenis metode pengulangan atau looping yang bisa digunakan dalam
pembuatan prorama menggunakan bahasa PHP diantaranya yaitu: for, while, do while
dan Foreach.
1. Pengulangan FOR
Pengulangan For adalah perulangan yang termasuk dalam counted loop, karena
kita bisa menentukan jumlah perulangannya.
Bentuk dasar pengulangan for : <?php
for ($i = 0; $i < 10; $i++){
// blok kode yang akan diulang di sini!
}
?>
Veriabel $i dalam pengulangan For berfungsi sebagai counter yang menghitung
berapa kali ia akan mengulang. Hitungan akan dimulai dari nol (0), karena kita
memberikan nilai $i = 0. Lalu, pengulangan akan diulang selama nilai $i lebih kecil
dari 10. Artinya, perulangan ini akan mengulang sebanyak 10x.
Maksud dari $i++ adalah nilai $i akan ditambah 1 disetiap kali melakukan
perulangan.

2. Pengulangan While
Pengulangan while adalah pengulangan yang termasuk dalam uncounted loop.
Karena biasanya digunakan untuk mengulang sesuatu yang belum jelas jumlah
pengulangannya.
 Namun, pengulangan while juga bisa digunakan seperti pengulangan for sebagai
counted loop.
Bentuk dasar pengulangan while : <?php
while (<kondisi>){
// blok kode yang akan diulang di sini
}
?>
Pengulangan while akan terus mengulang selama nilai $ulangi lebih kecil dari 10.
Lalu di dalam pengulangan kita melakukan increment nilai $ulangi dengan $ulangi++.
Artinya: Tambah 1 disetiap pengulangan.

3. Pengulangan Do/While
Pengulangan Do/While sama seperti pengulangan while. Ia juga tergolong dalam
uncounted loop. Perbedaan Do/While dengan while terletak pada cara iya memulai
pengulangan. Pengulangan Do/While akan selalu melakukan pengulangan sebanyak 1
kali, kemudian melakukan pengecekan kondisi. Sedangkan perulangan while akan
mengecek kondisi terlebih dahulu, baru melakukan pengulangan.
Bentuk pengulangan do/while : <?php
do {
// blok kode yang akan diulang
} while (<kondisi>);
?>

4. Pengulangan Foreach
Pengulangan Foreach sama seperti pengulangan For. Namun, ia lebih khusus
digunakan untuk mencetak array.
Bentuk pengulangan foreach : <?php
foreach($array as $data){
echo $data;
}
2.8 Javascript
Pengertian Javascript
Javascript merupakan suatu bahasa script yang banyak digunakan dalam dunia
teknologi terutama internet, bahasa ini dapat bekerja di sebagian besar web browser
seperti Internet Explorer (IE), Mozilla Firefox, Netscape, opera dan web browser
lainnya. Bahasa javascript dapat dideskripsikan dalam bentuk fungsi (Function) yang
ditaruh di bagian dalam tag yang dibuka dengan tag <head> yang dibuka dengan tag
<script language =” javascript”>. Isi dari script javascript sama dengan konsep yang
sudah dipelajari dalam materi PHP, yakni ada deklarasi Variable, penggunaan operator,
percabangan, looping, dan fungsi.

2.9 CSS
a. Pengertian CSS
CSS (Cascading Style Sheets) 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.

b. Beberapa hal yang dapat dilakukan CSS

 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”.
 Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada
layers (lapisan) yang berbeda.

c. Jenis-jenis CSS
Dalam proses implementasi penulisan kode CSS, terdapat 3 jenis CSS, yaitu :
1) Internal CSS
Internal CSS adalah kode CSS yang ditulis dalam tag <style> dan lokasinya
berada pada bagian atas header file HTML. Internal CSS digunakan untuk
 membuat custom khusus dalam satu halaman website sehingga halaman lain tidak
terpengaruh.

Kelebihan Internal CSS :

 Mudah dalam melakukan editing tiap halaman website
 Tidak perlu melakukan upload file CSS karena masuk dalam file HTML
 Class dan ID bisa dipakai oleh internal stylesheet
 Mudah saat memperbaiki error CSS website

Kekurangan Internal CSS :

 Kurang efisien untuk penggunaan beberapa halaman website yang sama
karena Anda harus menuliskan ulang.
 Performa website menjadi lebih lambat karena setiap halaman memiliki CSS
sendiri.
 Ukuran file menjadi lebih besar karena setiap halaman memiliki CSS sendiri.

2) External CSS
External CSS adalah kode CSS yang penulisannya dipisah dengan file HTML.
Jadi file CSS ditulis pada file sendiri dengan ekstensi .css. File External CSS biasa
dituliskan pada bagian <head>, jadi setiap halaman website dilakukan
pemanggilan file .css.
Penggunaan External CSS lebih simple dan sederhana karena tidak perlu
menuliskan CSS dalam setiap file HTML.

Kelebihan External CSS :

 Ukuran file HTML menjadi lebih kecil.
 Penulisan kode HTML menjadi lebih rapi.
 Loading website menjadi lebih cepat.
 File CSS bisa digunakan untuk beberapa halaman website berbeda.
 Kekurangan External CSS :

 Tidak cocok untuk halaman website yang membutuhkan halaman custom

 Halaman website rawan berantakan saat file CSS gagal load dengan sempurna
sehingga tampilan website berantakan.

3) Inline CSS
Inline CSS adalah memasukan kode CSS yang ditulis secara langsung pada setiap
atribut HTML. Jadi setiap atribut memiliki style CSS yang berbeda tergantung
kebutuhan .
Inline CSS ini tergolong kurang efisien jika dibandingkan jenis CSS untuk
website lainnya. Karena dalam satu atribut memiliki style tersendiri, jadi inline
cocok untuk website yang tidak membutuhkan banyak baris coding.

Kelebihan Inline CSS :

 Memudahkan dalam perbaikan atribut HTML.
 Membantu saat pengujian dan melihat perubahan pada satu elemen saja.
 Load website menjadi lebih cepat dan HTTP request menjadi lebih kecil.

Kekurangan Inline CSS :

 Kurang efisien dalam penggunaan karena hanya bisa diterapkan pada satu
atribut saja.
 Kurang cocok untuk website dengan baris coding yang banyak.

d. 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)
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)

e. Penulisan CSS
Sintaks
penulisan CSS
sebagai
berikut :

Gambar Susunan Penulisan Sintaks CSS

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.
 BAB III
KESIMPULAN

Berdasarkan dari Bab Pembahasan diatas materi Web Programming ini :

 Pengertian Web Programming adalah pembuatan aplikasi program dengan bahasa
skrip yang akan menghasilkan sebuah aplikasi yang diakses pada web browser.
 Istilah Pemrograman Web yaitu: Internet, World wide web (WWW), Website, Web
server, URL, HTTP, DNS, IP, Hyperlink, Web browser.
 Pengertian HTML adalah bahasa pemrograman standar yang digunakan untuk
membuat sebuah halaman web.
 Pergertian PHP adalah bahasa script berbasis server (server-side) yang mampu
mem-parsing kode php dari kode web dengan ekstensi .php.
 Pengulangan pada PHP adalah instruksi khusus dalam Bahasa pemrograman dan
algoritma yang digunakan untuk mengulang beberapa perintah sesuai dengan
jumlah yang telah dilakukan.
 Pengertian CSS adalah bahasa yang digunakan untuk mengatur tampilan suatu
dokumen yang ditulis dalam bahasa markup / markup language.
 DAFTAR PUSTAKA

Almais, Agung Teguh Wibowo. 2018. Modul Pratikum Web Programming. Malang:
Modul Pratikum.

Choiri, Eril Obeit. 2022. “Perbedaan Internal, External dan Inline CSS Dalam Website”.
https://qwords.com/blog/perbedaan-internal-external-dan-inline-css/. Diakses
pada 18 Maret 2022 pukul 21.48.

Dewaweb Team. 2021. “Belajar CSS: Pengertian Pera, Fungsi, dan Macamnya”.
https://www.dewaweb.com/blog/belajar-css-pengertian-peran-fungsi-dan-
macamnya/. Diakses pada 18 Maret 2022 pukul 21.38.

Nawadwipa. 2020. “Pengertian dan Fungsi HTML (HyperText Markup Language)”.

https://www.nawadwipa.co.id/pengertian-dan-fungsi-html-hypertext-markup-language.
Diakses pada 18 Maret 2022 pukul 19.45.

Muhardian, Ahmad. 2022. “Belajar PHP: 7 Jenis Operator dalam PHP yang Harus
diketahui”. https://www.petanikode.com/php-operator/. Diakses pada 18 Maret
2022 pukul 20.22.

Muhardin, Ahmad. 2022. “Belajar PHP: Memahami 4 Jenis Pengulangan dalam

Pemrograman PHP”. https://www.petanikode.com/php-perulangan/. Diakses pada
18 Maret 2022 pukul 21.15.
Sari, Ani Oktarini, dkk. 2019. Web Programming. Yogyakarta: Graha Ilmu.

Sevima. 2012. “Pengertian dan Pengenalan Pemograman Web”.

https://sevima.com/pengenalan-pemograman-web/. Diakses pada 18 Maret 2022 pukul
19.20.

Teori Komputer. 2016. “Pengertian dan Tugas Sebagai Web Programmer”.

https://www.teorikomputer.com/2016/08/pengertian-dan-tugas-sebagai-web.html.
Diakses pada 18 Maret 2022 pukul 19.16.

Toming Sek. 2020. “Algoritma Pengulangan Looping: (pengertian, contoh kasus, dan
konsep dasar)”. https://www.daftargajipns.com/2020/02/algoritma-pengulangan-
looping.html. Diakses pada 18 maret 2022 pukul 20.56.