Thread by @codeTOPP

[Web Development]

First Tweet!
Yaaayyy!
Kita mulai ya untuk bahas semua seputar koding.
Mungkin bisa kita mulai dari Web Development dulu kali ya?
Karena sekarang kan lagi ngetren soal Web Development.
Nantikan update berikutnya.

#codeTOPP
#webdevelopment
#belajarCoding

Sebelum kita berangkat lebih jauh ke teknis terkait web development. kita harus tau apa itu web.
Web adalah kependekan dari website. yang merupakan kumpulan halaman yang dapat di akses dari aplikasi browser.

Browser yang sering kita temui diantaranya : google chrome, mozilla firefox, internet explorer dan safari.
Bayangkan ada kumpulan halaman dan untuk bisa melihat/mengakses nya kita harus menggunakan aplikasi browser.

Halaman pada web dapat berisi Text, gambar, input, tombol, dll. Berbeda dengan halaman buku, yang hanya dapat dibaca. Halaman web dapat memiliki fungsi tertentu ketika kita berinteraksi dengan isinya (dari sini kita sebut element ya).

Karena kita dapat memberikan fungsi pada element dalam halaman web. Banyak yang memanfaatkan web sebagai aplikasi untuk memenuhi berbagai macam kebutuhan. web tersebut bisa kita sebut dengan aplikasi Web (Web App).

Web dipilih sebagai alternatif untuk aplikasi, karena dapat digunakan pada berbagai platform seperti windows, linux, android, dll melalui browser. Selain itu, web sendiri memiliki kelebihan untuk bisa langsung digunakan tanpa perlu melakukan instalasi terlebih dahulu.

Berbeda dengan aplikasi yg biasa kita temui, misal aplikasi desktop untuk komputer windows dan linux. Aplikasi windows tidak bisa diinstall pada linux, dan sebaliknya. Itu mengapa saat kita akan download aplikasi, akan ada pilihan installer yang digunakan apakah windows/linux.

Begitu juga dengan aplikasi untuk smartphone, aplikasi pada Android (Google) memiliki installer APK. sedangkan pada iOS (Apple) memiliki installer IPA. APK tidak bisa di install di iOS, dan sebaliknya. IPA tidak bisa di install di Android. Meskipun aplikasi yang digunakan sama.

Itulah kenapa sekarang ini, banyak yang memanfaatkan web sebagai aplikasi. karena apapun platformnya, baik desktop (windows, linux, macOS), smartphone (Android, iOS), dll. dapat dengan mudah menggunakan aplikasi tersebut melalui browser dan tanpa perlu instalasi terlebih dahulu.

Di dunia ini, selalu ada positif dan negatif. yang sebelumnya telah dijelaskan merupakan sisi positif dari aplikasi web. lalu apa ada negatifnya? jawabannya, Ya! pasti ada tentunya.

Karena web merupakan sebuah halaman yang di akses melalui browser. Tentu browser butuh sesuatu untuk menemukan web tersebut dan menampilkannya. Saat kita mencari seseorang dan ingin menemuinya disuatu lokasi, maka kita pasti akan bertanya "dimana alamat nya?".

Karena saat mendengar kata "alamat" maka yang ada dipikiran kita pasti suatu tempat/lokasi. Tepat sekali! alamat web merupakan tempat/lokasi dimana halaman web itu di simpan. Browser membutuhkan alamat web atau yang biasa kita sebut dengan URL untuk dapat membuka halaman web.

Karena web merupakan sebuah software, maka pastinya akan disimpan dalam suatu komputer yang biasa kita kenal dengan sebutan Server. Browser dapat menemukan server tempat suatu halaman web disimpan berdasarkan URL dan kemudian membuka / menampilkan halaman web tersebut.

Ayo kita bahas sedikit mengenai URL. kalian pasti tidak asing dengan google.com, facebook.com, atau yang saat ini kalian gunakan twitter.com yang merupakan URL untuk browser dapat membuka aplikasi google, facebook, ataupun twitter.

URL ini salah satu fungsinya digunakan untuk mempermudah kita untuk mengingat / menemukan server aplikasi. dibalik URL ini, yang sebenarnya menjadi alamat dari suatu server adalah IP address atau alamat IP. mungkin diantara kalian ada yang pernah mengetahui tentang alamat IP ini.

Saat ini ada 2 jenis standard alamat IP yaitu IPv4 dan IPv6. kita tidak akan membahas lebih jauh terkait IP ini, tp sebagai contoh IPv4 mungkin kalian pernah melihat/mendengar 192.168.1.1 atau 10.1.5.1 dll itu merupakan contoh dari alamat IPv4.

IPv6 merupakan standard baru dalam alamat IP yang saat ini mulai digunakan. contoh alamat IPv6 sebagai berikut :
2001:0db8:0000:0000:0000:8a2e:0370:7334

keunggulan dari IPv6, alamat tersebut dapat disingkat menjadi
2001:db8:0:0:0:8a2e:370:7334
atau
2001:db8::::8a2e:370:7334

Oke kembali ke bahasan kita, dengan URL kita dapat memerintahkan browser untuk membuka suatu halaman web. Browser akan berkomunikasi dengan server untuk memberikan data terkait halaman web pada server tersebut. Komunikasi antara browser dan server dilakukan melalui suatu port.

Apa itu port? Kalian bisa bayangkan terminal listrik? Ya! bayangkan port itu seperti terminal listrik. Dalam komputer server terdapat beberapa port yg aktif. Saat browser (komputer kita) berkomunikasi ke server, komunikasi tersebut akan mengarah pada salah satu port server.

Port pada suatu komputer itu secara teknis di representasikan dengan angka, misal 8080, 465, 22, dll. Pada suatu komputer dapat memiliki beberapa port yang aktif. Kombinasi dari IP & Port biasa disebut Socket. Misalkan Socket 192.168.1.1:8080 artinya IP 192.168.1.1 Port 8080.

Dibalik suatu Socket pasti akan ada Service yang berjalan untuk memproses komunikasi pada Socket tersebut.
Apa itu Service?
Service adalah suatu proses yang selalu berjalan dibelakang layar dan dapat dijalankan manual atau diatur untuk otomatis berjalan saat komputer dihidupkan.

Pernah mendengar Apache? nginx? Yup! 2 hal tersebut adalah contoh dari Web Service. Umumnya 1 Server Web akan mempunyai 1 Web Service yang berjalan, bisa Apache atau nginx. Web Service inilah yang akan memproses komunikasi dari browser kita disisi server.

Secara default Web Service akan berjalan pada Port 80 untuk HTTP dan Port 443 untuk HTTPS. "Wah apalagi HTTP dan HTTPS?" Pasti kalian yang belum pernah tau akan bertanya seperti itu. Tenang akan kita bahas garis besarnya. Karena di sini kita akan fokus pada Web Development.

HTTP (Hypertext Transfer Protocol) merupakan protocol untuk pengiriman data/resource metode kerja dari protocol ini berupa Request dan Response yang merupakan komunikasi antara browser kita dan server. Sedangkan HTTPS merupakan HTTP yang lebih aman (Secure).

Kembali lg pada Web Service. Web Service ini lah yang bertanggung jawab untuk berkomunikasi dengan browser. Komunikasinya dengan cara menerima request lalu mengirimkan kembali response ke browser tersebut. Apa saja yang dikirim saat Request dan Response?

Yang membedakan Request dan Reponse adalah arah data yang dikirim. Request dikirim dari browser ke server, dan Response dikirim dari server ke browser. Keduanya memiliki bagian yang sama. Mari kita bahas bagian yang sering digunakan, yaitu header dan body.

Secara umum yang paling sering diperhatikan untuk komunikasi (Request & Response) adalah bagian body. Body berisi data utama yang dikirim dari browser ke server maupun sebaliknya. Lalu? apa fungsinya header?

Pada surat, header berisi informasi tentang siapa yang mengirim, judul, alamat, dll. Begitu pula header pada Request dan Response. di dalamnya terdapat informasi dari IP & Port (Socket), Content yang terkandung di body berjenis apa, Panjang content pada body berapa karakter, dll.

Pada implementasinya, header sering digunakan terkait dengan security, token (penanda sesi/user), dll.
Karena umumnya Request dan Response Web dikirim melalui jaringan. Bukan tidak mungkin ada kendala pada jaringan ketika sedang melakukan komunikasi baik Request maupun Response.

Lalu apa yang terjadi ketika ada kendala pada jaringan? Padahal komunikasi sedang berlangsung. Pernah melakukan klik tombol di Web lalu tidak terjadi apapun? atau muncul pesan error? terlepas dari kesalahan sistem, bisa jadi ada masalah pada jaringan.

Bagaimana kita bisa mengetahui masalah jaringan atau kesalahan sistem? Pernah tau tentang HTTP code?
HTTP code akan dihasilkan dari setiap komunikasi Web yang terjadi. HTTP code akan menjelaskan apa status komunikasi tersebut. Jika sukses maka HTTP code akan menampilkan 200 (OK).

Selain HTTP code 200 (OK) ada banyak HTTP code lainya misal 404 (Not Found), 403 (Forbidden), 301 (Moved Permanently), dll. Untuk list lengkap terkait HTTP code dan penjelasan dari masing-masing code bisa dilihat pada link berikut : en.wikipedia.org/wiki/List_of_H…

Oh iya, hampir lupa. Tentang Request dan Response dalam Web yang umum digunakan dalam Request ada 2 jenis, diantaranya GET dan POST. Apa perbedaan antara Request GET dan Request POST? Ayo kita bahas satu persatu.

Request GET :
Di bagian sebelumnya, kita sudah membahas tentang URL bukan? apakah kalian pernah melihat URL seperti berikut ini?
Mari kita bahas lebih rinci mengenai URL ini.

URL
https:// > protokol yang digunakan adalah https
youtube.com > domain dari web yang pernah kita bahas akan diterjemakan menjadi IP server
/watch > disebut URI yang merupakan identifikasi letak resource
?v=UObINRj2EGY > data dari Request GET

Ya ada URL dan URI, mudahnya URL adalah alamat lengkap termasuk URI di dalamnya. Sedangkan URI merupakan bagian setelah nama domain. Biasanya URI ini juga merupakan nama dari folder/file di Server.
Pada Request GET data dikirim ke server diletakan pada URL setelah URI dan tanda ?

Mari kita lihat contoh kita tadi ?v=UObINRj2EGY setelah tanda ? dapat kalian lihat ada v=UObINRj2EGY maksudnya adalah ada variable data yaitu v dengan nilai UObINRj2EGY. untuk apa variable data tersebut? itu tergantung dari aplikasi yang kalian buat. Nama variable data pun bebas.

Variable data dapat kalian beri nama sesuai keinginan kalian. tetapi karakter yang baik digunakan biasanya adalah huruf dan tanda _ selain itu jarang digunakan atau bahkan ada yang tidak bisa menggunakan selain itu.
Oke, sudah jelas terkait Request GET?
Mari kita lanjutkan.

Request POST :
Jika pada Request GET data diletakan pada URL sehingga terlihat pada URL di browser. Berbeda dengan Request POST, data dikirimkan pada body Request (lihat kembali terkait header dan body pada Request dan Response). Sehingga isi data tidak terlihat secara langsung.

Request POST dianggap lebih aman untuk pengiriman data ke server yang bersifat sensitif karena tidak mudah untuk terlihat. Akan tetapi bukan berarti data pada Request POST tidak bisa diintip / dilihat tetapi hanya lebih sulit terlihat. lalu bagaimana jika ingin lebih aman?

Jika ingin lebih aman, terutama data sensitif yang rawan terjadi pencurian. Untuk itu biasanya request POST akan dipadukan dengan proses yang bernama enkripsi (encrypt) untuk pengamanan data yang dikirim.

Enkripsi merupakan metode untuk mengunci data agar yang terlihat bukan isi data sebenarnya. Tetapi menjadi tulisan tidak beraturan seperti
4O6JaBxo5lxtUlOT141nkfZF57NjGQ6Dkv1iV8MYVas=
padahal isi datanya adalah
Test Encrypt
Lalu bagaimana server bisa mengetahui isi data aslinya?

Agar server melihat data yang telah di enkripsi tersebut, ada proses yang disebut dengan dekripsi (decrypt). Yaitu proses yang akan merubah kembali data yang telah di enkripsi menjadi data sebenarnya. ada banyak metode untuk enkripsi data, tapi kita tidak akan bahas lebih lanjut.

Oke mari kita kembali lagi. Jadi, sekarang sudah paham kan perbedaan antara Request GET dan Request POST. Lalu kapan kita gunakan Request GET dan kapan Request POST?
Secara default saat browser memuat halaman Web, yang berjalan adalah Request GET.

Request POST secara default digunakan dalam proses mengirim (submit) formulir data ke server. Sehingga data yang dikirim tidak terlihat di URL tetapi dapat diterima oleh server. Karena biasanya data formulir bersifat sensitif, misalnya alamat, nomor telepon, dll.

Oke selanjutnya, setelah kita mengetahui apa itu Web dan bagaimana proses komunikasi dari browser ke server. Mari kita lanjut membahas tentang struktur dasar dari Web. Website secara umum memiliki 3 bagian utama. Yaitu HTML, CSS, dan JavaScript yang memiliki peran nya masing2.

#HTML (HyperText Markup Language)
Adalah bahasa standard untuk Markup Web. maksudnya, HTML merupakan kerangka dasar dari struktur Web. Pembuatan element seperti Judul Halaman, Body Halaman, Tombol (Button), Input Box, dll di definisikan (dibuat) oleh HTML.

Berikut adalah contoh HTML dasar :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halman</title>
</head>
<body>

<h1>Header</h1>
<p>Paragraph</p>

</body>
</html>

<!DOCTYPE html> Mendeklarasikan HTML5
<html> element awal dari HTML
<head> element yang berisi meta data dari halaman Web
<title> element judul halaman web
<body> element bagian yang terlihat dari halaman web
<h1> element yang merupakan header
<p> element yang merupakan paragraf

HTML5?
Berarti ada HTML1, HTML2, HTML3, dst?
Ya, HTML5 adalah generasi baru dari HTML yang merupakan pengembangan dari tiap2 elemen dari HTML. Diantaranya adalah elemen video, canvas, audio dll. yang dapat membantu dalam membuat kerangka Web lebih mudah dan lebih baik.

Berikut adalah hasil dari contoh HTML yang kita buat sebelumnya. HTML hanyalah sebuah kerangka dasar dari Web. Tampilannya tidak menarik dan hanya seperti struktur kasar dari sebuah Web.
Untuk itu tercipta lah CSS (Cascading Style Sheets) yaitu design tampilan dari HTML.

#CSS (Cascading Style Sheets)
Dengan CSS kita dapat membuat tampilan HTML lebih nyaman untuk dilihat. Tidak cuma sekedar nyaman, bahkan bisa cantik dan menarik. CSS memiliki element sendiri pada struktur HTML yaitu element <style></style>. CSS di jabarkan dalam element tersebut.

Berikut adalah contoh dari CSS dalam element <style></style>. bisa kita lihat di dalamnya dijabarkan hal2 terkait dengan tampilan, seperti body yang memiliki background-color lightblue, h1 header yang memiliki warna text putih dan berada ditengah, dll.

Seperti yang telah dijelaskan sebelumnya, <body></body> pada HTML merupakan bagian yang terlihat pada browser kita. Untuk itu umumnya CSS akan melakukan dekorasi tampilan (styling) terhadap element2 yang ada didalam <body></body>.

Selain dengan cara menjabakan dalam <style></style> CSS juga dapat kita masukan (load) ke HTML dengan membuat file terpisah dan kita berikan extensi .css dibelakangnya.

Misal kita buat dalam folder stylefolder sebuah file stylefile.css yang dapat di load ke halaman Web kita dengan cara memasukan baris berikut :
<link rel="stylesheet" href="/stylefolder/stylefile.css">

Pada bagian <head></head>.

#Javascript
Setelah mengetahui apa itu HTML, CSS. Sebuah web rasanya kurang lengkap tanpa yang satu ini. Yup! Javascript.
Apa sih Javascript itu? apa sama dengan pemrograman JAVA yang sering kita dengar? lalu bagaimana cara menggunakannya?
Tenang-tenang, kita bahas satu persatu.