PEMPROGRAMAN WEB

KONSEP DASAR WEB

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 siapapun yang
memiliki jaringan internet.
 KONSEP DASAR WEB
2. Kategori Website
a) Web Statis, merupakan website yang mempunyai halaman yang tidak berubah.
Perubahan suatu halaman dilakukan secara manual dengan mengedit code yang
menjadi struktur dari website tersebut.
b) Web Dinamis, merupakan website yang secara terstruktur diperuntukan untuk
diupdate sesering mungkin. Biasanya disediakan halaman backend(admin) untuk
melakukan perubahan konten dari website tersebut
c) Web Interaktif, merupakan website yang berinteraksi antara setiap penggunanya.
Biasanya berupa forum diskusi maupun blog.
 KONSEP DASAR WEB
3. Pemprograman Web
Pemprograman web merupakan pembuatan aplikasi program dengan Bahasa
skrip yang akan menghasilkan sebuag aplikasi yang dapat diakses pada web browser.
 KONSEP DASAR WEB
4. Bahasa Skrip Pemprograman Web
a) HTML
b) CSS
c) Javascript
d) PHP
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
a) Internet
Merupakan jaringan yang
berfungsi untuk menghubungkan
antara satu media elektronik/perangkat
dengan perangkat lainnya.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
b) World Wide Web (WWW)
Merupakan Kumpulan web
server diseluruh dunia yang dapat
menyediakan data dan informasi untuk
dapat digunakan secara
massal/besar/global.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
c) Web Server
Merupakan perangkat lunak
(software) yang digunakan untuk
menerima permintaan (request)
melalui protocol HTTP atau HTTPS dari
client, kemudian dikirimkan Kembali
dalam bentuk halaman-halaman web
(response).
Contoh web server : Xampp
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
d) URL (Universal Resource Locator)
Merupakan suatu Alamat yang
menunjukkan sebuah halaman tertentu
internet.
Contoh URL :
http://www.google.com
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
e) HTTP (Hypertext Transfer Protocol)
HTTP adalah sebuah protocol jaringan aplikasi yang digunakan untuk
mendistribusikan informasi antara server dan client.
HTTP merupakan bagian dari URL yang digunakan untuk mengidentifikasi
Lokasi web.
Sedangkan Hypertext Transfer Protocol Secure (HTTPS) merupakan
hasil pengembangan dari versi HTTP sebelumnya, HTTPS memiliki fungsi
keamanan yang lebih ketat sehingga membuat client merasa aman dalam
mengakses berbagai konten web.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
f) DNS (Domain Name System)
Merupakan komponen protokol
standar internet yang bertanggung
jawab untuk mengubah nama
domain yang mudah dipahami manusia
menjadi alamat Internet Protocol
(IP) yang digunakan komputer untuk
mengidentifikasi satu sama lain di
jaringan.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
g) IP ( Internet Protocol)
Merupakan protocol yang digunakan dalam internet, secara teknis bermakna
suatu bentuk pengisian dan pengalamatan data-data dan informasi yang akan dikirim
melalui internet.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
h) Hyperlink
Hyperlink atau link merupakan
sebuah teks yang akan
menghubungkan antar halaman situs
internet.
 KONSEP DASAR WEB
5. Istilah-istilah dalam Pemprograman Web
i) Web Browser
Merupakan perangkat lunak (software) aplikasi yang digunakan untuk
mencari, mengakses, dan menampilkan website.
Contohnya :
Google chrome
Microsoft Edge
Opera Mini
Mozilla Firefox
Safari
 KONSEP DASAR WEB
6. 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
Dalam penggambarannya Struktur Navigasi terbagi kedalam 4 Struktur
yang berbeda yaitu:
a) Linier,
b) Non Linier,
c) Hierarchical (Hirarki), dan
d) Composit (Campuran)
 KONSEP DASAR WEB
6. Struktur Navigasi
a) Linier
Struktur navigasi linier hanya mempunyai satu rangkaian cerita
yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut
menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah
satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman
sebelumnya atau dua halaman sesudahnya.

Struktur Navigasi Linier

 KONSEP DASAR WEB
6. Struktur Navigasi
a) Linier

Input Data Siswa Data Siswa

Form Data Siswa Unggah Foto Siswa
Nama Nama Siswa

Nama
Alamat Alamat Siswa
Password
Tempat Lahir Tempat Lahir Siswa

Login Unggah
Tanggal Lahir Tanggal Lahir Siswa

Simpan Logout
 KONSEP DASAR WEB
6. Struktur Navigasi
b) Non Linier
Struktur navigasi non atau struktur tidak berurut merupakan
pengembangan dari struktur navigasi linier. Pada struktur ini
diperkenankan/dibolehkan membuat navigasi bercabang.

Struktur Navigasi Non Linier

 KONSEP DASAR WEB Buat Akun

Nama

6. Struktur Navigasi Email

b) Non Linier
Password

Daftar

Input Data Siswa Data Siswa

Form Data Siswa Unggah Foto Siswa
Nama Nama Siswa

Nama
Alamat Alamat Siswa
Password
Tempat Lahir Tempat Lahir Siswa

Login Unggah
Tanggal Lahir Tanggal Lahir Siswa
Belum punya akun?
Register disini Logout
Simpan
 KONSEP DASAR WEB
6. Struktur Navigasi
c) Hierarchical (Hirarki)
Struktur navigasi hirarki biasa disebut
struktur bercabang, merupakan suatu struktur
yang mengandalkan percabangan untuk
menampilkan data berdasarkan kriteria tertentu.
Tampilan pada menu pertama akan disebut
sebagai Master Page (halaman utama pertama),
halaman utama ini mempunyai halaman
percabangan yang disebut Slave Page (halaman
pendukung).
Struktur Navigasi Hirarki
 KONSEP DASAR WEB
6. Struktur Navigasi
d) Composit (Campuran)
Struktur navigasi campuran
merupakan gabungan dari ketiga struktur
sebelumnya yaitu linier, non-linier dan
hirarki. Struktur navigasi ini juga biasa
disebut dengan struktur navigasi bebas.

Struktur Navigasi Campuran

 KONSEP DASAR WEB
7. Text Editor
a) Notepad
Notepad adalah aplikasi text
editor yang sudah ada didalam instalasi
os windows. Yang perlu diperhatikan jika
menggunakan notepad sebagai text
editor, yakni extension type file dituliskan
langsung dan pemilihan save as type
adalah All Files.
 KONSEP DASAR WEB
7. Text Editor
b) Notepad++
Notepad++ adalah aplikasi teks
editor yang memiliki fitur jauh lebih
lengkap daripada Notepad. Aplikasi
Notepad++ merupakan aplikasi yang
disediakan oleh pihak ketiga yang dapat
didownload dan digunakan secara gratis
 KONSEP DASAR WEB
7. Text Editor
c) Sublime Text
Sublime merupakan salah satu
text editor yang paling banyak digunakan
oleh programmer karena editor ini
menawarkan berbagai fitur canggih untuk
meningkatkan produktivitas dan efisiensi
saat bekerja.
 KONSEP DASAR WEB
7. Text Editor
d) Visual Studio Code
VS Code adalah editor source
code buatan Microsoft yang beroperasi
pada komputer desktop dan kompatibel
dengan sistem operasi Windows, macOS,
dan Linux.
VS Code cocok untuk JavaScript,
TypeScript, dan Node.js. Selain itu, editor
ini memiliki ekosistem extension yang
luas yang dapat mendukung berbagai
bahasa pemrograman