Dasar Pemrograman

Web
Pendahuluan

Fakultas : FTI
Program Studi : TEKNIK INFORMATIKA

Tatap Muka

01
Kode Matakuliah : H423A
Disusun oleh : Dea Andini Andriati, S.Kom.,
M.M.S.I
 DESKRIPSI MATERI PERTEMUAN 1

Materi Pertemuan 1 Pendahuluan

Deskripsi Materi Pengenalan Website
Server dan Client
Anatomi Website
Sub Capaian Mahasiswa diharapkan mampu menganalisa masalah dan kebutuhan
Pembelajaran Mata sehingga dapat merancang dan membuat sebuah web sederhana
Kuliah (Sub CPMK) menggunakan HTML dan CSS

Deskrispsi Tugas -

Kontrak Perkuliahan Kehadiran

- Jadwal perkuliahan dilakukan setiap hari Selasa, pukul 13.00 –
15.30 WIB
- Wajib hadir,paling lambar 15 menit dari perkuliahan dimulai
- Maksimal ketidakhadiran sebanyak 3x
- Apabila berhalangan untuk hadir, harap inf ormasikan ke grup
Whatsapp
Bobot Nilai
- 10 % Kehadiran
- 25 % UTS
- 25 % UAS
- 40 % Tugas, Kuis, Keaktif an

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

2 Nama Dosen – No Telp http://www.undira.ac.id
 Pengenalan Website

Apa itu Website ?

Website adalah kumpulan halaman web yang terhubung dan dapat diakses melalui internet. Secara
umum, website adalah tempat di mana inf ormasi disajikan secara elektronik. Setiap halaman web
dalam sebuah website biasanya berisi teks, gambar, video, atau elemen multimedia lainnya yang
membentuk konten. Konten-konten ini dapat diakses oleh pengguna melalui perangkat yang terhubung
ke internet, seperti komputer, smartphone, atau tablet.

Website dapat memiliki berbagai jenis, mulai dari website pribadi yang berisi portof olio atau blog
individu, hingga website bisnis yang digunakan untuk mempromosikan produk atau layanan. Selain itu,
ada juga website organisasi, pemerintah, pendidikan, hiburan, dan banyak lagi, yang masing -masing
memiliki tujuan dan konten yang spesif ik sesuai dengan kebutuhan dan tujuannya.

Perkembangan teknologi internet telah memungkinkan website untuk menjadi salah satu alat
komunikasi dan penyebaran inf ormasi yang paling ef ektif di era digital ini. Melalui website, inf ormasi
dapat diakses oleh pengguna dari berbagai belahan dunia secara cepat dan mudah. Dengan demikian,
website memainkan peran penting dalam memf asilitasi komunikasi, pembelajaran, bisnis, hiburan, dan
berbagai aktivitas lainnya di dunia maya.

Perbedaan Antara Frontend dan Backend dalam Pembuatan Website

Frontend dan backend adalah dua komponen penting dalam pembuatan sebuah website. Keduanya
memiliki peran yang berbeda namun saling melengkapi untuk membuat website berf ungsi dengan baik.
Berikut adalah penjelasan tentang perbedaan antara f rontend (bagian yang terlihat oleh pengguna) dan
backend (bagian yang tersembunyi dan mengatur f ungsionalit as) dalam pembuatan website:

Frontend:
Frontend adalah bagian dari sebuah website yang terlihat dan diakses langsung oleh pengguna.
Ini mencakup segala hal yang pengguna lihat dan interaksi mereka dengan website, seperti tata letak,
desain, teks, gambar, tombol, f ormulir, dan animasi.

Teknologi:
Frontend umumnya dibangun dengan menggunakan bahasa pemrograman web seperti HTML
(HyperText Markup Language) untuk struktur, CSS (Cascading Style Sheets) untuk gaya dan tata letak,
serta JavaScript untuk interaktivitas.

Fungsi Utama:
Frontend bertanggung jawab untuk menyajikan konten website secara visual kepada pengguna dengan
cara yang menarik dan mudah dimengerti. Halaman web yang dibangun dengan f rontend harus
responsif , artinya mereka harus dapat menyesuaikan tampilan mereka dengan berbagai perangkat dan
ukuran layar.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

3 Nama Dosen – No Telp http://www.undira.ac.id
Contoh:
Ketika seorang pengguna membuka sebuah halaman web, mereka melihat desain, warna, teks,
gambar, dan elemen visual lainnya yang ditampilkan di browser mereka. Semua ini merupakan bagi an
dari f rontend.
Backend:
Backend adalah bagian dari sebuah website yang tersembunyi dari pengguna dan berada di belakang
layar. Ini mencakup server, database, logika aplikasi, dan semua proses yang terjadi di sisi server.

Teknologi:
Backend sering kali menggunakan bahasa pemrograman seperti PHP, Python, Ruby, atau JavaScript
(dengan Node.js) untuk mengembangkan logika bisnis dan mengelola data di server.
Sistem manajemen basis data (Database Management System, DBMS) seperti MySQL, PostgreSQL,
atau MongoDB digunakan untuk menyimpan dan mengelola data.

Fungsi Utama:
Backend bertanggung jawab untuk mengatur f ungsionalitas website, seperti pengolahan f ormulir,
otentikasi pengguna, pengolahan pembayaran, dan akses ke data dari database. Ini juga menangani
permintaan dari f rontend dan menghasilkan respons yang diperlukan untuk ditampilkan kepada
pengguna.

Contoh:
Ketika seorang pengguna mengirimkan f ormulir kontak di sebuah situs web, backend akan memproses
data yang dikirimkan, menyimpannya ke dalam database, dan mengirimkan respons kepada pengguna
(misalnya, pesan konf irmasi).

Istilah-Istilah Website

Terdapat beberapa istilah terkait website dan internet yang kadang kala terdengar sebagai istilah asing
di telinga bagi pengguna awam. Namun, beberapa sudah umum digunakan. Istilah, seperti download
(unduh) atau upload (unggah), merupakan contoh istilah umum yang sering digunakan; sedangkan
beberapa istilah, seperti webpage, web crawler, atau address bar, mungkin merupakan istilah yang
jarang dikenal. Berikut adalah beberapa istilah dalam teknologi website dan internet yang harus
diketahui.
1. Web browser (perambah) lebih dikenal juga dengan browser adalah suatu sof tware untuk
membuka halaman web. Halaman web tidak akan dapat dibuka tanpa browser.
Contoh browser adalah Mozilla Firef ox, Google Chrome, Microsof t Edge, Opera, dan
sebagainya.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

4 Nama Dosen – No Telp http://www.undira.ac.id
 2. WWW merupakan singkatan dari world wide web yang dikenal juga dengan sebutan website
atau web, yaitu sistem inf ormasi yang sumber-sumber web diidentif ikasi oleh URL.
Penggunaan www biasa ditemukan pada saat mengetikkan alamat website, seperti saat
mengakses situs Google yang beralamat www.google.com yang berarti mengakses web
bernama google.com
3. URL merupakan singkatan dari unif orm resource locators. URL adalah alamat dari website,
contoh HTTPs://www.google.com atau HTTPs://en.wikipedia.org/.
4. Web address merupakan alamat web yang kita ketikkan. Contoh, jika kita akan mengakses
situs Google, kita mengetikkan www.google.com. Sintaks yang kita ketik tersebut merupakan
web address dari situs milik Google. Web address dapat berupa kata-kata seperti contoh tadi,
dapat juga berupa angka-angka yang merupakan alamat IP (Internet Protocol) dari website
tersebut.
5. Webpage merupakan halaman web yang tampil dan dapat dibaca di hadapan kita. Contoh, jika
kita membuka www.google.com akan tampil logo Google, kolom pencarian, tombol pencarian,
dan tulisan-tulisan yang ada di situs tersebut ditampilkan di halaman web.
6. HomePage memiliki beberapa nama atau istilah lain, yakni home screen, main page, atau start
page. Ini merupakan tampilan def ault dari sebuah website. HomePage dapat terdiri atas satu
atau lebih halaman yang selalu tampil saat browser diaktif kan.
7. Landing page juga dikenal dengan istilah static page, destination page, atau lead capture page.
Ini merupakan halaman web yang dioptimasi untuk penggunaan SEO, marketing, dan
advertising. Landing page dirancang secara lebih sederhana.
8. Hyperlink dikenal juga dengan link atau hypertext. Ini merupakan tautan yang terdapat pada
halaman web yang berguna untuk mengantarkan aktivitas browsing k e halaman yang lain.
9. Browsing dikenal juga dengan istilah searching (pencarian) atau surf ing (berselancar) di dunia
internet. Kegiatan ini merupakan aktivitas mencari dan melihat -lihat halaman web tertentu
untuk mencari inf ormasi yang diinginkan
10. HTTP, HTTPS, FTP merupakan IP. IP maksudnya adalah sekumpulan aturan untuk
berkomunikasi. HTTP merupakan singkatan dari hyper text transf er protocol. HTTP S
merupakan singkatan dari hypertext transf er protocol secure, sedangkan FTP merupakan
singkatan dari f ile transf er protocol. HTTP dan juga HTTPS dapat digunakan untuk halaman
web, sedangkan FTP untuk transf er f ile. Selain HTTP, HTTPS, dan FTP masih terdapat banyak
protocol lainnya, seperti UDP, ICMP, TCP, dan sebagainya, sebagaimana yang telah Anda
pelajari pada BMP Jaringan Komputer.
11. DNS (domain name system) adalah alamat web yang didef inisikan dengan katakata atau dapat
disebut juga sebagai nama website, contohnya google.com, facebook.com, dan sebagainya.
12. IP address yang dikenal juga dengan alamat IP adalah sebuah sistem alamat unik untuk setiap
host yang terkoneksi dalam jaringan dengan menggunakan protocol TCP/IP. IP address terdiri
atas empat kelompok angka yang dipisahkan dengan tanda titik. Contoh IP address adalah
216.239.38.120 atau misalkan alamat lokal 127.0.0.1 atau yang lain misalkan 192.168.1.1 dan
sebagainya
13. Web hosting atau dikenal dengan hosting merupakan layanan yang mengizinkan seseorang
secara pribadi atau organisasi untuk membuat website agar inf ormasi mereka dapat dibaca via
internet. Contoh penyedia layanan hosting adalah hostinger, niagahoster, rumahweb, dan
sebagainya.
14. Web server atau yang dikenal dengan server merupakan sof tware dan hardware yang
digunakan untuk menjalankan, menyimpan, dan mentransf er web page data. Beberapa
sof tware web server yang lazim digunakan pada saat ini antara lain Apache, Nginx, dan IIS.
15. Upload/unggah merupakan istilah yang digunakan untuk mengirimkan f ile atau berkas ke
server atau internet.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

5 Nama Dosen – No Telp http://www.undira.ac.id
 16. Download/unduh merupakan istilah yang digunakan untuk mengamb il f ile atau berkas dari
server atau internet.
17. Cloud merupakan istilah lain dari internet.
18. Web programming merupakan sebuah kegiatan untuk membuat suatu website.
19. Web application merupakan aplikasi atau sof tware yang dibuat dengan basis web.
20. HTML merupakan singkatan dari hypertext markup language adalah bahasa yang digunakan
untuk membuat tampilan web. Suatu halaman website yang terlihat indah dengan berbagai
gambar, tulisan, suara/lagu, video, dan sebagainya, sebenarnya merupakan kumpulan dari
kode-kode program HTML.

21. CSS (cascading style sheet) adalah perintah-perintah atau aturan-aturan yang digunakan
untuk mengatur bagaimana elemen HTML dapat ditampilkan. CSS membuat tampilan HTML
menjadi lebih menarik.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

6 Nama Dosen – No Telp http://www.undira.ac.id
Client dan Server dalam Pemrograman Web
Dalam pemrograman web, terdapat dua komponen utama yang berinteraksi satu sama lain, yaitu client
dan server. Kedua komponen ini memiliki peran yang berbeda dan bekerja bersama untuk menyajikan
konten web kepada pengguna. Client bertindak sebagai antarmuka pengguna yang menampilkan dan
mengelola interaksi pengguna, sedangkan server menyediakan konten dan layanan yang diminta oleh
client. Kerjasama antara client dan server memungkinkan terciptanya pengalaman web yang interaktif,
dinamis, dan responsif bagi pengguna.

Berikut adalah penjelasan tentang client dan server dalam konteks pemrograman web:

1. Client:
Client adalah perangkat atau aplikasi yang digunakan oleh pengguna untuk mengakses dan
menampilkan konten web. Ini dapat berupa browser web seperti Google Chrome, Mozilla Firef ox,
Saf ari, atau perangkat lunak khusus seperti aplikasi mobile atau desktop.

Fungsi Utama:
Client bertanggung jawab untuk menampilkan halaman web kepada pengguna. Ini juga menangani
interaksi pengguna dengan halaman web, seperti mengklik tautan, mengisi f ormulir, dan meminta
konten tambahan.

Interaksi dengan Server:

Client mengirimkan permintaan (request) ke server untuk mendapatkan data atau konten yang diminta.
Setelah menerima respons (response) dari server, client akan menampilkan konten tersebut kepada
pengguna.

2. Server
Server adalah komputer atau sistem perangkat lunak yang menyediakan layanan atau sumber daya
kepada client melalui jaringan, seperti internet. Dalam konteks pemrograman web, server menyimpan,
mengelola, dan menyajikan konten web kepada client.

Fungsi Utama:
Server bertanggung jawab untuk memproses permintaan dari client dan memberikan respons yang
sesuai. Ini juga menangani penyimpanan data, pengolahan bisnis, dan logika aplikasi di sisi server.

Interaksi dengan Client:

Server menerima permintaan (request) dari client, misalnya permintaan untuk mengakses halaman
web atau mengirim data f ormulir. Setelah memproses permintaan tersebut, server akan mengirim
respons (response) kembali kepada client, yang berisi konten atau data yang diminta.

Gambar 3. Interkasi Client Server

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

7 Nama Dosen – No Telp http://www.undira.ac.id
Anatomi Web

Bagaimana caranya website itu bisa tampil sedemikian rupa?

Anatomi website mengacu pada struktur dan komponen-komponen dasar yang membentuk sebuah
halaman web. Dengan memahami anatomi website, seseorang dapat lebih mudah merancang,
mengembangkan, dan mengelola halaman web dengan ef ektif .

Gambar 4. Anatomi Web

Berikut adalah penjelasan tentang anatomi website:

Header: Bagian atas halaman web yang biasanya berisi logo, judul halaman, menu navigasi utama,
dan mungkin inf ormasi kontak atau tautan penting lainnya. Header adalah area pertama yang terlihat
oleh pengguna ketika mereka mengunjungi sebuah halaman web dan sering kali berf ungsi sebagai titik
awal navigasi.

Navigation Bar: Bagian dari header atau mungkin terpisah yang berisi tautan menu untuk
mengarahkan pengguna ke berbagai bagian atau halaman dalam website. Navigation bar
memungkinkan pengguna untuk dengan mudah menavigasi antara halaman-halaman utama atau
kategori-kategori yang relevan.

Content Area: Area utama dari halaman web di mana konten sebenarnya ditampilkan. Ini bisa berupa
teks, gambar, video, tabel, f ormulir, atau elemen-elemen multimedia lainnya yang dirancang untuk
memberikan inf ormasi atau pengalaman kepada pengguna. Konten area biasanya merupakan f okus
utama dari sebuah halaman web.

Sidebar: Area samping yang biasanya berada di sebelah kiri atau kanan konten utama. Sidebar sering
digunakan untuk menampilkan tautan menu tambahan, widget, atau inf ormasi lainnya yang mungkin
relevan dengan konten utama. Beberapa website mungkin tidak memiliki sidebar, tergantung pada
desain dan struktur halaman web.

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

8 Nama Dosen – No Telp http://www.undira.ac.id
Footer: Bagian bawah halaman web yang berisi inf ormasi tambahan seperti tautan ke halaman -
halaman penting, inf ormasi kontak, kebijakan privasi, tautan sosial media, dan hak cipta. Footer adalah
tempat di mana pengguna dapat menemukan inf ormasi terperinci tentang website atau organisasi yang
terkait dengan halaman web tersebut.

Responsive Design Elements: Dalam desain modern, website sering dirancang untuk responsif,
artinya mereka dapat menyesuaikan tampilan dan tata letak mereka untuk berbagai ukuran layar dan
perangkat. Beberapa elemen desain responsif termasuk tata letak f leksibel, gambar yang responsif,
dan menu navigasi yang tersembunyi untuk perangkat mobile.

Call-to-Action (CTA): Elemen-elemen yang dirancang untuk mendorong pengguna untuk melakukan
tindakan tertentu, seperti mengisi f ormulir, mengklik tautan, atau membeli produk. CTA biasanya
ditempatkan secara strategis di seluruh halaman web untuk mengarahkan pengguna ke tujuan tertentu,
seperti mengonversi pengunjung menjadi pelanggan.

Dengan memahami anatomi website dan f ungsinya masing-masing, pengembang dan desainer web
dapat membuat halaman web yang ef ektif dan mudah digunakan bagi pengguna

Gambar 5. Anatomi Website

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

9 Nama Dosen – No Telp http://www.undira.ac.id
DAFTAR PUSTAKA

Abadi Friska, Faisal M Reza. 2020. Pemrograman Web Dasar 1. Scripta Cendekia

Limbong Tonni, Sriadhi. 2021.Pemrograman Web Dasar. Yayasan Kita Menulis.

Nurjamiyah et al. 2022. Pemrograman Web Untuk Pemula Hingga Mahir. Tahta Media Group

Nofira Andri et al. 2023. Praktik Pemrograman Web. CV Kireinara

2020 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

10 Nama Dosen – No Telp http://www.undira.ac.id