BAB I

KONSEP DASAR PEMROGRAMAN WEB

CAPAIAN PEMBELAJARAN.
1. Capaian Pembelajaran Umum :
Mahasiswa dapat mengetahui dan memahami konsep dasar pemrograman berbasis web.
2. Capaian Pembelajaran Khusus :
1. Mahasiswa dapat menjelaskan istilah-istilah yang ada pada pemrograman web.
2. Mahasiswa mampu menggunakan text editor
3. Mahasiswa mampu mengimplementasikan Struktur Navigasi
A. PENDAHULUAN/DESKRIPSI SINGKAT.
Pada bab ini akan dijelaskan mengenai konsep dasar pemrograman web, istilah-istilah
dalam pemrograman web, menggunakan text editor, mengenal dan mengimplementasikan
struktur navigasi.

B. POKOK-POKOK ISI.
1.1 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 semua orang yang terkoneksi jaringan internet.

1.2 Jenis-jenis Website

Secara umum website dibagi menjadi 3 jenis yaitu website statis, website dinamis dan
website interaktif.
a. 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. Website jenis ini biasanya hanya digunakan untuk menampilkan profil
dari pemilik website seperti profil perusahaan atau organisasi.
b. Web DinamisMerupakan website yang secara terstruktur diperuntukan untuk diupdate
sesering mungkin oleh pengelola web. Biasanya disediakan halaman backend untuk
 melakukan perubahan konten dari website tersebut. Sebagai contohnya : web portal,
web berita, dll.
c. Web Interaktif
Merupakan website yang berinteraksi antara penggunanya. Isi informasi tidak hanya
dapat diubah oleh pengelola saja tapi lebih banyak dilakukan oleh pengguna website itu
sendiri. Seperti contoh website jejaring social dan website marketplace.

1.3 Pengertian Pemrograman Web

Pemrograman web (web programming) adalah pembuatan program atau aplikasi
berbasis web menggunakan bahasa pemrograman tertentu sehingga dapat memproses dan
menghasilkan data yang bisa diakses melalui web browser.

1.4 Bahasa Skrip Pemrograman Web

Dalam mempelajari pemrograman web, perlu diketahui pemahaman beberapa bahasa
skrip dalam pembuatan halaman website.
1. HTML (Hyper Text Markup Languange), berperan sebagai pembuat struktur halaman
website yang menempatkan setiap elemen website sesuai layout yang diinginkan.
2. CSS (Cascading Style Sheets), berperan sebagai pembentuk desain website dengan
mengatur setiap elemen HTML agar tampil menarik pada browser.
3. Javascript, berperan sebagai bahasa yang memproses data pada sisi client serta dapat
memanipulasi HTML dan CSS secara dinamis.
4. PHP (Hypertext Preprocessor), berperan untuk memproses data pada sisi server sesuai
yang diminta oleh client menjadi informasi yang siap ditampilkan, juga sebagai
penghubung aplikasi web dengan database. Selain PHP dapat juga menggunakan bahasa
pemrograman lain seperti ASP, Java, Python dan lain sebagainya.
5. SQL (Structured Query Language), berperan sebagai bahasa yang mengatur transaksi
antara aplikasi dengan database sebagai tempat penyimpanan data. Database yang biasa
digunakan diantarananya MySQL, Oracle, SQL Server dan sebagainya.

1.5 Aplikasi Pengembang Web

Untuk pengembangan aplikasi web dibutuhkan berbagai aplikasi yang dapat
membantu web programmer dalam merancang, menuliskan skrip program maupun
menampilkan hasil program. Beberapa aplikasi yang digunakan dalam pengembangan web
adalah sebagai berikut :
1. Web Authoring
Merupakan software yang bersifat “WYSIWYG” (What You See Is What You Get)
yaitu apa yang dilihat merupakan apa yang dihasilkan. Aplikasi jenis ini memudahkan
bagi pemula, karena setiap pengetikan skrip program langsung terlihat hasilnya. Bahkan
biasanya tersedia juga tool drag & drop yang memudahkan web designer dalam
membuat elemen website. Diantara contoh aplikasinya adalah adobe dreamweaver,
Microsoft Expression Web, Nvu dan sebagainya.

2. Text Editor
Memiliki fungsi yang sama dengan web authoring untuk pengetikan program, tapi tidak
bersifat WYSIWYG sehingga untuk menampilkankan hasilnya memerlukan web
browser namun softwarenya lebih ringan dan kebanyan open source. Contoh aplikasi
text editor diantaranya adalah notepad, notepad++, sublime text, atom, visual studio
code dan lain sebagainya.

3. Web Browser
Digunakan untuk menampilkan hasil program. Beberapa skrip CSS3 dan HTML5 ada
yang hanya support pada web browser tertentu dan tidak supportnpada yang lain
sehingga menggunakan lebih dari satu web browser akan lebih baik. Walaupun untuk
kebanyakan web browser versi terbaru sudah support hampir semua fitur CSS3 dan
HTML5.

4. Web Server
Merupakan software yang berfungsi untuk menerima permintaan (request) melalui
protocol HTTP atau HTTPS dar client kemudian mengirim kembali dalam bentuk
halaman-halaman web. Salah satu contoh web server adalah Apache.

1.6 Istilah Pada Pemrograman Web

Beberapa istilah pada pemrograman web yang sering digunakan diantaranya :
1. Server, merupakan komputer khusus dengan kecepatan dan kapasitas penyimpanan
diatas komputer biasayang digunakan sebagai tempat pemrosesan data dan juga sebagai
tempat penyimpanan file-file website.
2. Client, merupakan perangkat komputer biasa baik berupa komputer personal, laptop,
perangkat mobile atau lainnya yang dapat mengakses halaman website.
3. Domain, merupakan nama unik yang mewakili alamat IP dari server website berupa
kata yang mudah diingat sehingga lebih mudah dalam memanggil alamat sebuah wesite
di internet.
4. Hosting, merupakan tempat penyimpanan file-file website pada sebuah server di
internet sehingga website dapat diakses darimana saja melalui perangkat komputer atau
mobile yang terhubung ke internet.
5. URL (Uniform Resources Locator), merupakan nama unik yang mengidentifikasikan
letak sumberdaya website berupa file HTML, gambar, video dan sebagainya yang akan
tampil pada address bar browser ketika sumber daya tersebut diakses.
6. HTTP (Hypertext Transfer Protocol), merupakan protokol yang mengatur pengiriman
data dari client ke server atau sebaliknya dan menterjemahkanya menjadi innformasi
yang dapat dibaca oleh pengguna website.

1.7 Cara Kerja Website

Pada saat kita mengetikkan sesuatu alamat pada browser maka data akan dilewatkan
oleh suatu protocol HTTP melewati port 80 pada server. Alamat ini adalah URL dari suatu
situs yang mempunyai alamat yang unik di Internet. Web Browser akan mengirimkan suatu
aturan yang telah disepakati sebelumnya, aturan ini biasa disebut sebagai protocol, standar
protocol menggunakan TCP/IP, proses ini dimulai dengan melakukan 3 way handshakes
antara sumber dan tujuan.
Web browser, suatu aplikasi pada client yang akan menampilkan halaman web sites
dari internet. Web browser di install di sisi user (OS) menampilkan informasi ke komputer
dengan interpreting bahasa pengkodean HTML, dimana homepage berisi gambar, suara,
multimedia, dan resources lainnya yang dapat diakases. Files Coding pada HTML
memberikan datanya ke browser apa yang akan ditampilkan ke sisi client. Isi HTML yang
akan ditampilkan bukan dari browsernya tetapi dari web servernya dan browser akan
menginterpretasikan tag HTML untuk link ke halaman berikutnya. Cara kerja website
terlihat seperti gambar 1.1.
 Gambar 1.1 Cara kerja website

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

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. Contoh
struktur navigasi linier terlihat seperti gambar 1.2.
 Gambar 1.2 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). 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. Contoh struktur navigasi hirarki terlihat
seperti gambar 1.3.

Gambar 1.3 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).
Contoh struktur navigasi non-linier terlihat seperti gambar 1.4.
 Gambar 1.4 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. Contoh struktur navigasi campuran terlihat seperti gambar
1.5.

Gambar 1.5 Struktur navigasi campuran

D. SOAL LATIHAN/TUGAS.
1. Jelaska pengertian website dan jenis-jenis website!
2. Jelaskan aplikasi-aplikasi yang digunakan dalam pengembangan website!
3. Jelaskan struktur navigasi pada website!
E. RUJUKAN.
Rohi Abdulloh, 7 In 1 Pemrograman Web Untuk Pemula, 2019, Elex Media
Komputindo, Jakarta

F. BACAAN YANG DISARANKAN.

Ani Oktarini Sari, Ari Abdillah & Sunarti, Web Programming,2019, Kerjasama
Universitas BSI & Graha Ilmu,