Photo by Taras Shypka on Unsplash

Mungkin kita tidak asing dengan web hampir setiap hari kita berurusan denganya termasuk tulisan yang kamu lihat ini.

Tulisan ini ditujukan untuk memberikan alur belajar untuk pemrograman Web dan tentunya pengantar dasar teori teknologi web.

Daftar Isi

1. Pengenalan Web
   1. Asal Mula
   2. Konsep Protokol HTTP
   3. Ragam Jenisnya
2. Mulai Belajar
   1. Bahasa Markah
   2. Bahasa Pemrograman
   3. Desain
3. Penutup
   1. State-of-the-art Web Programing
   2. Referensi
   3. Kesimpulan

Pengenalan Web

Esensni dari web merupakan kumupulan text, gambar dan media yang di susun dalam bahasa markah hipertext (HTML) menjadi tampilan yang kalian lihat sekarang ini (tulisan ini), dan hanya berjalan didalam browser kita. Bila kita melakukan inspeksi elemen, kita akan melihat bahasa markah penyusun web tersebut dan diubah menjadi tampilan yang kamu lihat sekarang oleh browser.

Asal Mula

Web bukanlah teknologi baru, teknologi ini tercetus pada akhir 1989 oleh Tim-Berners Lee yang dulu membuat HTTP server . HTTP merupakan protokol jaringan untuk mengakses Web dan singakatan dari Hypertext Transfer Protocol.

Ini alasan mengapa setiap kita ingin membuat web harus ada tulisan http:// atau https:// pada alamatnya. Selain itu browser juga dibuat untuk menampilkan dan melakukan audit halaman web, jadi kita bisa membuat dokumen dibrowser tanpa membuat teks editor.

Konsep HTTP

Bicara mengenai protokol kita tidak bisa lepas dari jaringan komputer, HTTP merupakan salah satunya. HTTP berjalan diatas socket jaringan dengan nomor port bawaan 80 atau 443, Jaringan memfasilitasi untuk sesama komputer bisa saling berhubungan dan bertukar informasi melalui porta soket.

HTTP bersifat client-server, client-server berarti untuk akses terdapat dua pihak yang sepakat untuk koneksi. Server ialah tempat kita menjalankan aplikasi web kita untuk menerima kunjungan, Client adalah kita yang mengunjungi web tersebut.

Image by High-Tech Tube

Client-Server memberikan kemudahan untuk mengunakan Web kita tidak perlu membangun web server dari web yang ingin kita kunjungi, cukup kunjungi alamant dimana server berjalan dan membuka bagian yang kita butuhkan.

Berikut ini arti dari alamat URL yang kita tulis:

https://lokakode.my.id:433/index

1. https:// merupakan protokol web tersebut.
2. lokakode.my.id alamat situs.
3. :443 nomor porta soket (biasanya disembunyikan browser).
4. index ini halaman apa yang akan dibuka.

FYI: alamat situs bisa saja berupa alamat IP (10.xx.xx) untuk merubahnya kealamat yang manusia diperlukan DNS.

Secara tidak langsung, web programming merupakan pemrograman yang memanfaatkan soket ini untuk serah terima bahasa markah hipertext (HTML) ke komputer lain dan dikonsumsi oleh browser untuk menjadi tampilan.

Untuk membuat web online kita perlu menghosting (menjalankan komputer yang menjadi server) aplikasi web kita.

Ragam Jenis

Web memiliki ragam jenisnya, mulai dari web statis, dinamis bahkan sampai hanya API. Setiapnya memiliki kegunaanya masing, berikut pembahasanya:

Web dinamis

Web dinamis merupakan web yang isinya berubah dengan mengunakan dukungan database dan pemrosesan oleh server. Web seperti ini menampilkan data yang disimpan dari database dan menyediakan fitur menambah data ke database.

Web seperti ini cocok untuk membuat aplikasi web yang akan digunakan oleh orang awam dan biasanya perlu banyak mengunakan database. Database ialah program untuk mengolah dan menyimpan data secara terstruktur dan mudah untuk di ubah secara remote.

Database berdiri sendiri dengan soket jaringanya jadi perlu bahasa pemrograman untuk menghubungkan dengan HTTP server kita dan menyusun bahasa markah berdasarkan data yang diterima dari database.

Kasus web seperti : Toko online, Sistem Informasi Akademik.

Web statis

Web statis merupakan web yang terdiri dari kumpulan berkas markah hiperteks yang nantinya akan disedia oleh HTTP server. Bedanya dengan web dinamis, web statis tidak memerlukan database saat berjalan karena berkas ditulis langsung dengan HTML tanpa bahasa pemrograman.

Namun web statis bisa di bangun dengan cepat mengunakan SSG(static site generator) dengan memanfaatkan data dari database atau sumber data lain (seperti API, Markdown). SSG berkerja menghasilkan berkas html statis dari tampilan data yang diterima dari sumber data.

Berkas HTML hasil SSG ini yang akan dihosting di HTTP Server dan tanpa memerlukan bahasa pemrograman di Server untuk berjalan. Situs Baru Ngoding menerapkan prinsip ini, mengunakan SSG 11ty.

Web statis cocok untuk web dengan data yang tidak terlalu banyak perubahan, web statis cocok untuk menjadi blog atau halaman dokumentasi.

Web API

Web API(Application Programming Interface) mungkin lebih bisa disebut sebuah layanan, API merupakan soket untuk menjalankan operasi fungsi pada suatu program yang akan membalas hasil dalam bentuk format data serial seperti: JSON,XML. Karena API tidak memiliki tampilan dari bahasa markah maka hasil API akan diolah menjadi tampilan oleh aplikasi lain.

Web API biasa digunakan untuk suatu aplikasi sebagai sumber data, ini karena aplikasi hanya menampilkan data dan tidak menyimpan data diaplikasi keseluruhan. Ini juga merupakan komponen penting untuk mendukung AJAX, Salah satu kegunaan dari ajax membuat web kita bisa memperbaharui data tanpa perlu refresh.

Selain pernerapan untuk Web, bisa API bisa digunakan oleh aplikasi dekstop dan mobile karena Web API juga bisa bergunaan untuk menjadi sumber data meringkas fungsi database untuk pengolahan dan penyimpanan data. Jadi tidak perlu menginstall database besar disisi aplikasi.

Web SPA

SPA merupakan singkatan dari Single-Page Application atau Aplikasi Halaman Tunggal, merupakan Web halaman tunggal yang bergantung dengan API untuk perubahaan data dan semua proses penyajian halaman ada dibrowser kita yang artinya proses aplikasi terjadi dibrowser dengan bergantung dari API.

Ini disebut dengan Client-side Rendering, karena penyajian halaman ada dibrowser maka halaman tidak perlu refresh untuk memperbaharui data. Ini yang membedakan dengan Web Dinamis yang dipenyajian halaman dan data di sisi server disebut (Server-side Rendering).

Mulai Belajar

Pemrograman Web memerlukan kita menguasi 3 bahasa : bahasa markah (HTML dan CSS), bahasa pemrograman dan bahasa kueri SQL. Bahasa markah akan berperan dalam membentuk tampilan web yang diinginkan sedangkan bahasa pemrograman digunakan untuk menyediakan dan memproses data serta alur web tersebut, bahasa kueri digunakan untuk menyimpan data.

Bahasa Markah Hipertext

Bahasa markah akan dibaca dan diubah menjadi tampilan oleh browser. Berikut contoh bahasa markah:

<html>
   <head>
      <title>Situs</title>
   </head>
   <body>
      <p>Isi Situs</p>
   </body>
</html>

Bahasa markah memiliki kaidah untuk dalam bentuknya, Berikut pemaparanya

Image by MDN Contrbutors

1. Opening Tag (Tag Pembuka), Menandakan awal sebuah elemen (dalam contoh ini elemen p). Nama elemen dikurung mengunakan kurung sudut.
2. Closing Tag (Tag Penutup), Menandakan akhir dari sebuah elemen , sebelum nama elemen diberi / menandakan bahwa tag tersebut sebagai penuntup elemen (dalam contoh ini p).
3. Content (Isi), Merupakan isi dari elemen. Ini yang akan ditampilkan.
4. Element (Elemen), Keseluruhan dari Tag dan Isi.

Image by MDN Contrbutors

5. Attribut (Atribut), Menjadi pengubah elemen, pada contoh ini class yang menghubungkan dengan block css.

Bahasa markah hipertext memerlukan CSS untuk bisa memberi penwarnaan dan modifikasi yang lebih baik.

Bahasa Pemrograman

Sempat dibahas dari berperan untuk menyajikan data dan mengolah alur aplikasi, untuk membuat web kita perlu juga mengetahui bagaimana melakukan bahasa kueri SQL untuk menyimpanan data. aplikasi bertugas mengolah dan memproses data dan setelahnya data disimpan ke database mengunakan kueri SQL.

Banyak bahasa pemrograman yang bisa digunakan untuk membangun web : Javascript, PHP, Python, Ruby, Go dan lainya. Untuk database Postgres dan MySQL, pilih salah satu bahasa dan database mana kamu pilih.

Pendekatan sekarang banyak memisahkan tampilan (Frontend) dan alur data (Backend) yang dihubungkan dengan API : Pendekatan SPA. Untuk belajar penulis menyarankan Javascript dan PHP, alasanya tutorialnya banyak terutama Javascript. Namun saran ini tidak selamanya valid dan cocok , bisa saja Python dan Go lebih prominent.

Sangat disarankan untuk tidak mengunakan framework siap lengkap, lebih disarankan mengunakan tanpa framework atau mengunakan microframework agar mengenal prinsip kerja HTTP baik diserver dan efeknya dibrowser (seperti: Cookies, LocalStorage dan lainya).

Desain

Web yang bagus bukan perihal tampilanya saja yang cantik tapi kegunaanya ada dan itu mudah digunakan. Desain ini perlu sebagai wajah web yang akan kita buat dan dihantarkan kepengguna mengunakan HTML dan CSS.

Banyak yang salah kaprah bahwa Desain mengikuti HTML dan CSS, Desain disusun terlebih dahulu agar mudah saat implementasinya : tidak memikirkan menambah bagian yang tidak perlu dan sudah terukur kegunaanya.

Proses konversi desain ke html dan css ini disebut sebagai slicing. Tool untuk biasa penulis gunakan : Figma, dan mencari inspirasi dari Theme Forest atau Tema di Gohugo.io.

Penutup

State of The Art

Setelah kita mencoba memrogram web secara native / microframework dengan assumsi kita sudah mendapat konsep dan bisa menulis kode sesuai kemauan kita. Saat kita berkenala dengan framework baik dari bahasa pemrograman atau CSS, ini untuk mempercepat waktu pembuatan web kita.

Semakin cepat selesai, maka semakin banyak yang bisa kita tambahkan dan meningkat fungsionalitas.

Framework dalam bahasa pemrograman untuk bagian Backend seperti Nest.js (Javascript), Laravel (PHP),Echo (Go), Flask (Python) dan bagian Frontend React, Svelte (recommended bagi penulis) dan Vue.

Untuk framework CSS ada banyak varian seperti Bootstrap, Bulma, Tailwind dan semacamnya. untuk memberikan komponen siap pakai pada situs kita. Situs Baru Ngoding mengunakan Tailwind contohnya.

Kesimpulan

Web programming memang memerlukan banyak komponen untuk bisa dikuasai, namun bukan berarti itu mustahil dan yang terpenting kita sudah tahu banyak komponen maka akan terarah saat melakukanya. Tidak perlu tegesa-gesa fokus pada yang termudah dan bertahap, cara tau mana yang termudah ialah dengan mencoba.

Terima Kasih sudah membaca.

Referensi

• HTML Basic | Mozilla
• What is Cilent-Server