Pemrograman Web

Zaenal Alim Prayoga

Daftar Isi
1. Pendahuluan
2. Pengertian Pemrograman Web
3. Bahasa Pemrograman Web Utama
4. HTML (Hypertext Markup Language)
5. CSS (Cascading Style Sheets)
6. JavaScript
7. Framework dan Library JavaScript
8. PHP (Hypertext Preprocessor)
9. Framework PHP
10. Keamanan Web
11. Tantangan dalam Pemrograman Web
12. Penutup
01
Pengertian
Pemrograman Web
- Pemrograman web adalah proses pembuatan aplikasi atau situs web yang dapat diakses melalui

internet. Ini melibatkan penggunaan berbagai bahasa pemrograman, alat, dan teknologi untuk

membuat halaman web interaktif, dinamis, dan fungsional.

- Pemrograman web mencakup pembuatan elemen-elemen seperti tata letak, fungsionalitas, dan

interaksi antarmuka pengguna (UI), serta pengelolaan data dan interaksi dengan server.

- Tujuan dari pemrograman web adalah untuk membuat pengalaman pengguna yang baik dan

efisien saat berinteraksi dengan aplikasi atau situs web melalui berbagai perangkat dan

platform.
02
Peran Pemrograman
Web dalam Pembuatan
Situs dan Aplikasi Web
Pemrograman web memainkan peran kunci dalam pembuatan situs dan aplikasi
web dengan memungkinkan pengembang untuk:

1. Membuat Tata Letak dan Desain.

2. Menambahkan Interaktivitas.
3. Mengelola Data.
4. Mengembangkan Fungsionalitas.
5. Optimasi Kinerja.
6. Memastikan Keamanan.
7. Mengintegrasikan API.
03
Bahasa Pemrograman
Web Utama
Bahasa pemrograman web utama yang paling
umum digunakan diantaranya:
1. HTML (Hypertext Markup Language)
2. CSS (Cascading Style Sheets)
3. JavaScript
4. PHP
5. Python.
6. Ruby.
7. DLL. (ASP.NET, Node.js, dll.)
 HTML (Hypertext Markup Language)
HTML (Hypertext Markup Language) adalah bahasa markup
yang digunakan untuk membuat struktur dasar dari halaman
web. HTML menggambarkan elemen-elemen yang terdapat di
halaman web, seperti teks, gambar, link, tabel, dan formulir,
dengan menggunakan tag dan atribut.

Peran HTML dalam pembuatan halaman web sangat penting

karena:

1. Menentukan Struktur
2. Membuat Konten
3. Menghubungkan Halaman
4. Menyediakan Informasi Dasar
5. Basis untuk Gaya (Styling) dan Interaktivitas
 Struktur Dasar HTML
Struktur dasar HTML terdiri dari beberapa elemen utama
yang membentuk kerangka kerja dasar dari setiap halaman
web. Berikut adalah struktur dasar HTML yang umum
digunakan:
Dalam HTML, terdapat konsep dasar yang penting untuk dipahami, yaitu tag, elemen, dan atribut.

1. Tag: Tag adalah bagian yang diletakkan di antara tanda kurung sudut (<>). Tag ini digunakan
untuk memberikan instruksi atau perintah kepada browser tentang bagaimana cara menampilkan
konten. Contohnya adalah <h1>, <p>, <div>, <img>, dan lain-lain. Beberapa tag memiliki tag
penutup, seperti <p> untuk paragraf, sementara yang lainnya tidak, seperti <img> untuk gambar.
2. Elemen: Elemen adalah kombinasi dari tag pembuka, konten, dan tag penutup (jika ada). Misalnya,
<p> merupakan tag pembuka dan </p> merupakan tag penutup yang membentuk sebuah elemen
paragraf. Konten di antara tag pembuka dan penutup, seperti teks atau elemen lain, merupakan
bagian dari elemen tersebut.
3. Atribut: Atribut memberikan informasi tambahan tentang elemen, dan biasanya diletakkan di
dalam tag pembuka. Mereka memberikan detail tambahan tentang bagaimana elemen tersebut
harus ditampilkan atau diperlakukan. Contoh atribut adalah src untuk menentukan sumber
gambar pada tag <img>, href untuk menentukan URL pada tag <a>, dan class untuk memberikan
kelas CSS pada elemen tertentu.
Berikut adalah contoh tag, elemen, dan atribut dalam HTML:
Berikut adalah contoh kode HTML sederhana yang menampilkan halaman web
dengan judul dan sebuah paragraf:
CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk

mengatur tampilan dan gaya visual dari halaman web yang ditulis
dalam HTML. CSS memungkinkan pengembang web untuk
mengontrol presentasi dan format dari elemen-elemen HTML,
seperti warna, font, ukuran, tata letak, dan animasi.

Peran CSS dalam pengembangan web sangat penting karena:

1. Memisahkan Struktur dan Gaya.

2. Konsistensi Tampilan.
3. Responsif dan Fleksibel.
4. Kustomisasi yang Luas.
5. Animasi dan Efek Visual.
6. Optimasi Kinerja.
 Selector CSS
Selector CSS adalah pola yang digunakan untuk memilih elemen atau kelompok elemen dalam halaman web yang akan
diberikan gaya atau properti tertentu. Selector CSS memungkinkan pengembang untuk menargetkan elemen HTML yang
spesifik atau berbagai elemen berdasarkan kriteria tertentu.

Berikut adalah beberapa contoh selector CSS yang umum digunakan:

1. Selektor Elemen: Memilih semua elemen dengan tag yang sesuai.

2. Selektor Kelas: Memilih semua elemen dengan kelas yang sesuai.

3. Selektor ID: Memilih elemen dengan ID yang sesuai.

4. Selektor Grup: Memilih beberapa selector sekaligus.

5. Selektor Anak: Memilih elemen yang menjadi anak langsung dari elemen lain.
6. Selektor Turunan: Memilih elemen yang menjadi turunan dari elemen lain, tidak hanya anak langsung.

7. Selektor Atribut: Memilih elemen berdasarkan atribut mereka.

8. Selektor Universal: Memilih semua elemen dalam dokumen.

 Properti dan Nilai CSS
Properti CSS adalah atribut yang menentukan bagaimana suatu elemen HTML akan ditampilkan di halaman web.
Properti tersebut kemudian diikuti oleh nilai yang menggambarkan cara properti tersebut diterapkan pada elemen
tersebut. Kombinasi properti dan nilai ini membentuk aturan gaya CSS yang mengatur tampilan dan perilaku elemen
HTML.

Berikut adalah beberapa contoh properti CSS beserta nilai yang umum digunakan:

1. Properti color: Mengatur warna teks.

2. Properti font-size: Mengatur ukuran teks.

3. Properti background-color: Mengatur warna latar belakang elemen.

 Berikut adalah contoh kode CSS yang dapat digunakan untuk mempercantik tampilan web
dengan mengatur gaya elemen-elemen HTML

Penjelasan kode di atas:

1. Pengaturan Umum: Mengatur warna latar belakang

halaman (body) dan pengaturan font serta ukuran
teks untuk paragraf (p).
2. Elemen Heading: Mengatur warna teks untuk
elemen h1.
3. Element paragraf:
4. Tombol: Mengatur tampilan tombol dengan
memberikan warna latar belakang, warna teks,
padding, dan menghilangkan garis tepi (border).
Properti border-radius memberikan sudut yang
melengkung pada tombol. Properti cursor: pointer
membuat kursor berubah menjadi tanda tangan saat
diarahkan ke tombol.
5. Efek Hover: Memberikan efek saat kursor
diarahkan ke tombol dengan mengubah warna latar
belakang.
 JavaScript
JavaScript adalah bahasa pemrograman yang digunakan untuk membuat situs
web menjadi interaktif dan dinamis. Berbeda dengan HTML dan CSS yang fokus
pada struktur dan tampilan halaman, JavaScript memberikan kemampuan untuk
mengontrol perilaku halaman web, merespons tindakan pengguna, memanipulasi
elemen HTML, serta berinteraksi dengan server dan sumber daya eksternal.

Peran JavaScript dalam pengembangan web sangat penting karena:

1. Interaktivitas.
2. Validasi Formulir.
3. Dinamisme.
4. AJAX (Asynchronous JavaScript and XML).
5. Kontrol Perilaku Halaman.
6. Interaksi dengan Browser.
7. Pengembangan Aplikasi Web Lanjutan.
 Manipulasi DOM (Document Object Model) JavaScript.
Manipulasi DOM (Document Object Model) JavaScript adalah proses mengubah struktur, konten, atau gaya dari
halaman web menggunakan JavaScript. DOM merupakan representasi dari struktur halaman web sebagai pohon
objek, yang memungkinkan JavaScript untuk mengakses dan memanipulasi elemen HTML, atribut, dan konten
secara dinamis.
Berikut adalah beberapa metode umum yang digunakan untuk melakukan manipulasi DOM menggunakan
JavaScript:
1. Memilih Elemen: Menggunakan metode document.querySelector() atau
document.getElementById() untuk memilih elemen tertentu berdasarkan id, kelas, atau selector CSS.
Contoh:
2. Menambah atau Menghapus Elemen: Menggunakan metode appendChild() atau
removeChild() untuk menambah atau menghapus elemen dari DOM.Contoh:

3. Memodifikasi Atribut: Menggunakan properti getAttribute(),

setAttribute(), atau langsung mengubah nilai atribut elemen. Contoh:
4. Memodifikasi Konten: Menggunakan properti textContent atau innerHTML untuk mengatur
teks atau HTML konten dari elemen.Contoh:

5. Manipulasi Gaya (CSS): Menggunakan properti style untuk mengubah gaya elemen secara
langsung.Contoh:
Event Handling
Event handling dalam JavaScript mengacu pada kemampuan JavaScript untuk merespons
aksi atau peristiwa yang terjadi di dalam browser, seperti klik mouse, menekan tombol
keyboard, atau mengubah ukuran jendela. Berikut adalah contoh umum untuk menangani
event dalam JavaScript

Berikut adalah langkah-langkah umum untuk menangani event dalam JavaScript:

1. Memilih Elemen: Pertama, Anda perlu memilih elemen HTML yang ingin Anda beri event handler. Anda bisa
menggunakan document.getElementById(), document.querySelector(), atau cara lain untuk
memilih elemen. Contoh:
2. Menambahkan Event Listener: Kemudian, Anda menambahkan event listener ke elemen yang dipilih menggunakan
metode addEventListener(). Anda menentukan jenis peristiwa yang ingin Anda tangani (seperti 'click' atau
'mouseover') dan fungsi yang akan dijalankan saat peristiwa tersebut terjadi.Contoh:

3. Mendefinisikan Fungsi Handler: Anda mendefinisikan fungsi yang akan dijalankan ketika peristiwa terjadi.
Fungsi ini dapat melakukan berbagai tindakan, seperti mengubah konten halaman, memperbarui data, atau
melakukan penghitungan.Contoh:
Berikut adalah contoh kode JavaScript sederhana yang menambahkan interaktivitas ke halaman web dengan menangani
klik tombol untuk mengubah teks:
Framework dan Library JavaScript

Framework dan library JavaScript adalah kumpulan alat-alat yang digunakan

untuk mempercepat pengembangan aplikasi web dengan menyediakan
struktur, komponen, dan fungsionalitas yang sudah jadi. Meskipun keduanya
memiliki fungsi yang serupa dalam membantu pengembangan web, terdapat
perbedaan mendasar antara keduanya:
1. Framework JavaScript: Framework adalah kumpulan aturan, pedoman, dan alat
bantu yang membantu dalam pengembangan aplikasi web. Framework
menyediakan struktur dasar untuk aplikasi web dengan menentukan cara kerja
aplikasi, arsitektur, dan aliran kerja. Pengembang biasanya harus mengikuti pola
yang telah ditetapkan oleh framework tersebut. Contoh framework JavaScript
populer termasuk Angular, React, dan Vue.js.

● Angular: Framework JavaScript yang dikembangkan oleh Google. Angular

menyediakan struktur dan alat untuk membangun aplikasi web single-page
(SPAs) dengan komponen yang dapat digunakan kembali.
● React: Library JavaScript yang dikembangkan oleh Facebook. React fokus
pada pembuatan antarmuka pengguna (UI) dan memungkinkan
pengembang untuk membuat komponen UI yang dapat diatur ulang dengan
mudah.
● Vue.js: Framework JavaScript yang ringan dan mudah dipelajari. Vue.js
memberikan kemampuan untuk membuat aplikasi web yang interaktif dan
responsif dengan mudah, serta memiliki fleksibilitas yang tinggi.
2. Library JavaScript: Library adalah kumpulan fungsi-fungsi dan komponen-komponen yang dapat digunakan
kembali untuk memperluas kemampuan bahasa JavaScript. Library tidak memiliki struktur atau aturan baku seperti
framework, dan pengembang bebas menggunakan fungsionalitas library sesuai dengan kebutuhan aplikasi mereka.
Contoh library JavaScript populer termasuk jQuery, Lodash, dan moment.js.

● jQuery: Library JavaScript yang fokus pada manipulasi DOM, animasi, dan interaksi pengguna. jQuery
menyederhanakan penulisan kode JavaScript dan mempercepat pengembangan aplikasi web dengan
menyediakan metode pendekatan yang mudah digunakan untuk tugas-tugas umum.
● Lodash: Library JavaScript yang menyediakan berbagai fungsi utilitas untuk memanipulasi data, manipulasi
array, dan melakukan operasi lainnya. Lodash membantu pengembang untuk menulis kode yang lebih bersih
dan efisien.
● moment.js: Library JavaScript yang digunakan untuk memanipulasi, menampilkan, dan memformat tanggal
dan waktu. Moment.js menyediakan berbagai metode yang memudahkan manipulasi dan representasi data
tanggal dan waktu dalam JavaScript.
PHP (Hypertext Preprocessor)

PHP (Hypertext Preprocessor) adalah bahasa pemrograman yang banyak

digunakan untuk pengembangan web dinamis dan pembuatan aplikasi web. PHP
digunakan untuk menghasilkan konten dinamis pada halaman web dengan
menghubungkan server dengan basis data, memproses formulir, menghasilkan
konten yang berubah secara dinamis, dan melakukan berbagai tugas lainnya
terkait pemrosesan dan manajemen data.

Peran PHP dalam pengembangan web sangat penting karena:

1. Pembuatan Halaman Web Dinamis.

2. Manajemen Formulir.
3. Akses Basis Data.
4. Pengelolaan Sesi.
5. Pembuatan Aplikasi Web Berbasis Server.
6. Fleksibilitas dan Kemudahan Penggunaan.
PHP digunakan secara luas dalam pembuatan situs web dinamis karena kemampuannya untuk
memproses data secara server-side dan menghasilkan konten web yang berubah-ubah sesuai dengan
permintaan pengguna. Berikut adalah beberapa cara umum di mana PHP digunakan dalam pembuatan
situs web dinamis:

1. Pengolahan Formulir.
2. Akses Basis Data.
3. Manajemen Sesi.
4. Pembuatan Konten Dinamis.
5. Interaksi dengan Pengguna.
6. Integrasi dengan Layanan Eksternal.
Berikut adalah contoh kode PHP sederhana yang mengolah data dari formulir HTML dan berinteraksi dengan
database MySQL untuk menyimpan dan menampilkan informasi:

1. Formulir HTML (index.html):

2. Proses Formulir PHP (process.php):
3. Menampilkan Data dari Database PHP
(display.php):
 Framework PHP
Berikut adalah beberapa framework PHP populer yang digunakan oleh para pengembang untuk mempercepat
pengembangan aplikasi web:

1. Laravel: Laravel adalah salah satu framework PHP paling populer dan kuat. Ini menawarkan sintaks yang ekspresif
dan elegan yang memungkinkan pengembang untuk membuat aplikasi web dengan cepat dan efisien. Laravel
menyediakan berbagai fitur termasuk routing yang kuat, ORM (Object-Relational Mapping) yang disebut Eloquent,
autentikasi pengguna, sistem templating Blade, dan banyak lagi.
2. Symfony: Symfony adalah kerangka kerja PHP yang kuat dan stabil yang digunakan untuk membangun aplikasi web
skala besar. Ini menyediakan berbagai komponen dan paket yang dapat digunakan secara independen atau bersama-
sama untuk membangun aplikasi web yang kompleks. Symfony menawarkan fitur-fitur seperti routing, manajemen
formulir, autentikasi, dan banyak lagi.
3. CodeIgniter: CodeIgniter adalah framework PHP yang ringan dan mudah dipelajari yang cocok untuk
pengembangan aplikasi web kecil hingga menengah. Meskipun lebih ringan daripada beberapa framework lainnya,
CodeIgniter menyediakan berbagai fitur termasuk sistem templating, model-view-controller (MVC), dan pengelolaan
basis data yang efisien.
 Framework PHP
3. Yii: Yii adalah kerangka kerja PHP yang kuat dan efisien yang cocok untuk membangun aplikasi web yang cepat
dan scalable. Yii menawarkan berbagai fitur termasuk pembuatan kode yang cepat, sistem caching yang kuat, sistem
autentikasi, dan banyak lagi.
4. CakePHP: CakePHP adalah framework PHP yang menawarkan solusi lengkap untuk pengembangan aplikasi web.
Ini menyediakan berbagai fitur termasuk ORM yang kuat, sistem caching, routing, dan banyak lagi. CakePHP juga
dikenal dengan konvensi lebih konfigurasi, yang berarti bahwa pengembang dapat membangun aplikasi dengan
cepat tanpa harus menulis banyak kode.
5. Slim: Slim adalah framework PHP yang ringan dan fleksibel yang digunakan untuk membangun aplikasi web API
dan mikroservis. Ini menyediakan fitur-fitur dasar seperti routing, penanganan middleware, dan pengelolaan sesi,
sambil mempertahankan kerangka kerja yang kecil dan mudah dipahami.
04
Keamanan
Web
Keamanan web merupakan aspek yang sangat penting dalam pengembangan aplikasi
dan situs web, mengingat sensitivitas data yang disimpan dan ditransfer melalui internet.
Berikut adalah beberapa praktik umum yang dapat membantu meningkatkan
keamanan web:

● Perlindungan Terhadap Serangan XSS (Cross-Site Scripting) dan SQL Injection

● Penggunaan HTTPS (Hypertext Transfer Protocol Secure)
Perlindungan Terhadap XSS (Cross-Site Scripting):

1. Validasi Input: Validasi input pengguna secara ketat untuk memastikan bahwa data yang dimasukkan tidak
mengandung kode berbahaya atau skrip JavaScript yang tidak aman.
2. Escape HTML: Escape atau bersihkan semua input pengguna yang di-render di halaman HTML untuk
menghindari eksekusi skrip yang tidak aman. Gunakan fungsi seperti htmlspecialchars() untuk mengubah
karakter khusus HTML menjadi entitas HTML.
3. Content Security Policy (CSP): Terapkan kebijakan keamanan konten (CSP) untuk membatasi sumber yang
dapat dimuat oleh halaman web Anda dan memitigasi risiko XSS dengan memblokir atau mengurangi efek
dari skrip yang tidak diinginkan.
4. Input Sanitization: Lakukan sanitasi input dengan menghapus atau menonaktifkan tag HTML, atribut, dan
karakter khusus lainnya yang tidak diizinkan, dan hanya memungkinkan input yang diperlukan untuk
memastikan keamanan.
5. HttpOnly Cookies: Gunakan atribut HttpOnly untuk cookie sesi Anda untuk mencegah JavaScript dari
mengakses cookie yang sensitif, sehingga mengurangi kemungkinan pencurian token otentikasi.
Perlindungan Terhadap SQL Injection:
1. Penggunaan Parameterized Statements: Gunakan parameterized statements atau prepared statements
ketika berinteraksi dengan database untuk memastikan bahwa input pengguna tidak dieksekusi sebagai
pernyataan SQL. Ini membantu mencegah SQL Injection dengan memisahkan data dari perintah SQL.
2. Escape Input: Jika parameterized statements tidak dapat digunakan, pastikan untuk membersihkan dan
melarang karakter khusus seperti tanda kutip dan karakter escape () dari input pengguna sebelum
dijalankan di pernyataan SQL.
3. Penggunaan ORM (Object-Relational Mapping): Gunakan ORM atau framework database yang
menyediakan lapisan abstraksi database untuk mengelola interaksi dengan database. ORM secara
otomatis menangani pembentukan pernyataan SQL dan memastikan keamanan dari serangan SQL
Injection.
4. Prinsip Least Privilege: Berikan akses database yang minimal yang dibutuhkan untuk pengguna aplikasi
dan gunakan prinsip least privilege untuk mengurangi risiko eksploitasi oleh serangan SQL Injection.
5. Pemindaian Keamanan: Lakukan pemindaian keamanan secara teratur untuk menemukan dan
memperbaiki kerentanan SQL Injection dalam kode dan konfigurasi aplikasi Anda.
 Penggunaan HTTPS (Hypertext Transfer Protocol Secure)
HTTPS (Hypertext Transfer Protocol Secure) adalah protokol komunikasi yang digunakan untuk transfer data
melalui internet dengan aman. Ini adalah versi aman dari HTTP, yang menggunakan enkripsi SSL/TLS untuk
melindungi integritas dan kerahasiaan data yang ditransfer antara browser pengguna dan server web

Keuntungan Penggunaan HTTPS:

1. Keamanan Data: HTTPS mengenkripsi data yang ditransfer antara browser pengguna dan server web, sehingga
melindungi kerahasiaan dan integritas informasi pribadi, seperti informasi login, kartu kredit, dan data sensitif
lainnya.
2. Kepercayaan Pengguna: Pengguna sering mengasosiasikan HTTPS dengan situs web yang aman dan dapat dipercaya.
Implementasi HTTPS dapat meningkatkan kepercayaan pengguna terhadap situs web Anda dan memberikan rasa
aman saat berinteraksi dengan situs tersebut.
3. Perlindungan Terhadap Serangan Man-in-the-Middle: HTTPS mencegah serangan man-in-the-middle dengan
mengenkripsi data yang ditransfer antara pengguna dan server, sehingga mencegah pihak yang tidak sah dari
mengakses atau memodifikasi informasi yang ditransfer.
4. Keamanan SEO: Mesin pencari seperti Google memberikan peringkat lebih tinggi pada situs web yang menggunakan
HTTPS dalam hasil pencarian mereka. Implementasi HTTPS dapat membantu meningkatkan visibilitas dan peringkat
SEO situs web Anda.
Cara Penggunaan HTTPS:
1. Pemilihan Sertifikat SSL/TLS: Dapatkan sertifikat SSL/TLS dari otoritas sertifikat terpercaya (Certificate Authority -
CA) untuk mengenkripsi koneksi HTTPS. Anda dapat memperoleh sertifikat gratis dari penyedia seperti Let's Encrypt
atau membeli sertifikat dari penyedia sertifikat SSL/TLS.
2. Instalasi Sertifikat di Server: Instal sertifikat SSL/TLS yang diperoleh di server web Anda. Hal ini dapat dilakukan
melalui panel kontrol hosting Anda atau melalui proses konfigurasi server yang sesuai dengan jenis server yang Anda
gunakan (misalnya, Apache, Nginx, atau Microsoft IIS).
3. Konfigurasi Server Web: Konfigurasikan server web Anda untuk menggunakan HTTPS sebagai protokol standar. Ini
melibatkan penyesuaian konfigurasi server dan virtual host untuk mendukung koneksi HTTPS dan pengalihan lalu
lintas HTTP ke HTTPS.
4. Pengalihan URL: Atur pengalihan URL dari versi HTTP ke HTTPS untuk memastikan bahwa pengguna selalu
diarahkan ke versi aman dari situs web Anda. Ini dapat dilakukan dengan mengonfigurasi aturan pengalihan pada
server web Anda.
5. Pembaruan Tautan dan Sumber Daya: Perbarui semua tautan dan sumber daya di situs web Anda agar menggunakan
protokol HTTPS. Ini termasuk gambar, script JavaScript, dan tautan internal dan eksternal.
Terima Kasih

27 April 2024