Web Developer Bootcamp

PT. Lawencon Internasional

 ● Introduction Internet and Web
● Introduction HTTP
● Introduction Frontend and
Outlines Backend
● How HTML, CSS, and
Javascript works
● Editor
INTERNET
Internet (Interconnected Network) adalah sebuah sistem jaringan komputer yang
saling terhubung satu sama lain secara global di seluruh dunia dengan
menggunakan protocal TCP/IP.

Jenis-jenis Jaringan Komputer :

● LAN (Local Access Network)
● MAN (Metropolitan Access Network)
● WAN (Wide Access Network)

Media Penghantar Jaringan Komputer :

● Wired (Kabel)
Contoh : Kabel Twisted Pair, Kabel Coaxial, Fiber Optic
● Wireless (Nirkabel)
Contoh : Wifi, Bluetooth
WORLD WIDE WEB (WWW)
World Wide Web (WWW) adalah suatu sistem informasi dimana dokumen dan
resource lainnya tersedia di dalam internet. Resource ini dapat kita akses melalui
web browser dan di alirkan melalui Hyper Text Transfer Protocol (HTTP).

Tiga Komponen dalam www :

● HTML (Hypertext Markup Language)
HTML adalah bahasa yang digunakan untuk memformat suatu dokumen
terdiri dari beberapa tag-tag sehingga tampil di halaman web browser.
● Web Browser
Web browser adalah aplikasi untuk mengakses suatu dokumen di internet
● HTTP (Hypertext Transfer Protocol)
HTTP adalah suatu protocol atau jalur untuk melakukan transfer (request
dan response) antara client dan server.
Hypertext Transfer Protocol (HTTP)
HTTP (Hypertext Transfer Protocol) adalah suatu protocol atau jalur untuk
melakukan transfer (request dan response) antara client dan server.

Http Request merupakan proses suatu client melakukan permintaan data

terhadap server. Sedangkan Http Response merupakan proses ketika server
meresponse atau memberikan data ke client.
 Http Request

Ketika suatu client melakukan request maka client mengirimkan url, http method,
dan data.

Contoh di bawah adalah jika suatu client misal ingin mencari mobil di situs
google.com maka detailnya sebagai berikut :

Url = http://www.google.com/search
Http Method = GET
Data = mobil

Jika dirangkai secara lengkap dalam proses http request akan menjadi :
GET : http://www.google.com/search?q=mobil
 Http Response

Ketika suatu server meresponse atau memberikan data ke client.

Contoh di bawah adalah jika server google memberikan data ke client berupa
daftar list mobile serta response codenya dan detailnya sebagai berikut :

response code = 200 (OK)

data = [ ‘mobil inova’, ‘mobil avanza’, ‘mobil bmw’ ]
FRONT-END AND BACK-END
 FRONT-END

Front-end merupakan segala sesuatu yang bisa dilihat oleh pengguna (client).
Teknologi front-end ini meliputi HTML, CSS dan Javascript.
 BACK-END

Back-end merupakan segala sesuatu yang berhubungan dengan server dan

database. Teknologi back-end sangat banyak dan beragam jenisnya contohnya
Spring Boot, ASP.NET, django, laravel dan sebagainya.
Back-end akan memberikan data yang di request oleh front-end sehingga proses
yang berada di suatu website dapat berjalan dengan baik.

BACK-END

FRONT-END
How HTML, CSS, and Javascript works
HTML merupakan objek yang bisa kita beri sifat, dalam hal ini dino merupakan
objek yang diberi warna purple dengan CSS. Kemudian dino bisa menari dengan
bantuan Javascript. Ketiga komponen berjalan dan saling melengkapi untuk
menciptakan suatu tampilan website yang lebih menarik.

HTML
<div class=”red”>
<h1> The purple dino danced </h1>
</div>

CSS Javascript
.red { function dance() {
background-color : red; say(‘lalala… laaaa’)
} }
EDITOR
 INSTALLATION

Untuk melakukan development HTML, CSS dan Javascript kita akan

menggunakan Editor Visual Studio Code.

● Dowload aplikasi VS Code di https://code.visualstudio.com/download

● Pilih sesuai sistem operasi yang digunakan (Windows, MAC atau Linux)
● Lakukan instalasi VS Code