Lompat ke konten Lompat ke sidebar Lompat ke footer

Pengantar Web Programming | Cara Internet Bekerja | Website dan Halaman Web

Pengantar Web Programming

Internet, website, halaman web, dan browser. Apakah Anda memahami keempat istilah tersebut? Bagi Anda yang sering berselancar di browser (peramban), tentu tidak asing lagi dengan keempat istilah tersebut. Dalam pekerjaan di bidang apa pun, termasuk pelajar, mencari informasi di internet (web) merupakan hal yang sangat mudah dan efektif. Bahkan, saat ini banyak website yang sangat membantu pekerjaan manusia agar semakin produktif. Contoh yang sangat dekat dengan kita adalah aplikasi penyusun jadwal acara dengan Google Calendar. Sudahkah Anda mencobanya?

Pernahkah Anda bertanya-tanya berapa jumlah angka pengguna internet di Indonesia? Berdasarkan laporan dari Simon Kemp di datareportal.com, angka yang menunjukkan jumlah pengguna internet di Indonesia mencapai 212,9 juta dari total populasi sebesar 276,4 juta di bulan Januari 2023. Ini merupakan angka yang sangat tinggi dan kebutuhan akan internet pun semakin meningkat dari waktu ke waktu.

dos:7d47e1f00887f10ed71a960dbb6cf27e20230612141700.jpeg

Bagi Anda yang sedang memasuki dunia web development, tentu levelnya sudah bukan user biasa lagi. Derajat Anda akan meningkat dan memiliki kemampuan untuk mengembangkan website yang andal. Website memiliki peran yang sangat tinggi bagi banyak sektor dalam kehidupan manusia. Misalnya, dalam sektor bisnis, website dapat meningkatkan angka konsumen dengan mempromosikan produk atau jasa yang ditawarkan.

Pada beberapa materi berikutnya, Anda akan berkenalan dan memahami cara internet bekerja, pengertian website dan halaman web, web browser beserta cara kerjanya, web server, dan anatomi halaman website. Ini merupakan hal yang penting untuk diketahui oleh para web developer. Jika tidak demikian, rasanya kurang pas, bukan?

Cara Internet Bekerja

Apakah Anda tahu bagaimana website dapat diakses dan ditampilkan dengan baik pada user? Sebagian dari Anda pasti memiliki jawaban bahwa website akan tampil jika kita memiliki alamat website, browser, dan yang tidak kalah penting adalah koneksi internet. Yap, hal tersebut tidaklah salah. Jika berpikir lebih dalam, kita akan mengira bahwa ada sesuatu yang terjadi di belakang dan tidak terlihat secara kasat mata manusia. Bagi yang belum paham pengertian browser dan website, kita akan mengulasnya pada materi berikutnya.

orang berjalan menyeberangi jalan melalui zebra cross

Bayangkan bahwa internet merupakan sebuah jalan yang menghubungkan diri kita pada suatu tujuan untuk mendapatkan sesuatu yang diincar. Contohnya, jika Anda seorang pelajar yang ingin mendapatkan banyak ilmu, sekolah adalah jalan untuk mencapai tujuannya. Anda dapat masuk ke kelas dan diizinkan oleh pihak sekolah untuk menimba ilmu dari seorang guru.

Analogi di atas mirip seperti website. Internet akan memberikan kemampuan pada user untuk mengirimkan permintaan dan menerima hasil permintaan (data) pada website. Hal ini terjadi juga pada Anda ketika mengakses website dicoding.com. Namun, apakah Anda tahu ke mana website mengirimkan permintaan dan dari mana data dapat diperoleh?

Sebenarnya, hal di atas terjadi karena komputer milik user terhubung dengan komputer lain yang biasa disebut dengan server. Kedua komputer ini berkomunikasi melalui sebuah jaringan, baik dengan kabel atau nirkabel. Server menerima permintaan yang dikirimkan dan menanggapi hasil permintaannya sehingga website dapat ditampilkan di komputer user.

Dengan konsep yang sederhana, bayangkanlah gambar di bawah merupakan bagan terhubungnya dua buah komputer untuk berkomunikasi.

dos:a360f6f6c815d283d34b07d3f99c179820230615104345.jpeg

Lalu, bagaimana cara satu komputer dapat terhubung pada lebih dari satu komputer lainnya? Jawabannya, Anda perlu terhubung dengan sejumlah komputer agar dapat berkomunikasi.

dos:9275472d2774c15db5e6e2bf9e23d91220230615104444.jpeg

Apakah Anda sudah memahami maksud dari bagan di atas? Satu komputer yang ingin melakukan koneksi ke banyak komputer perlu menyediakan koneksi ke sejumlah komputer tersebut. Pada akhirnya, Anda akan menemui banyak garis-garis yang terhubung dari satu komputer ke komputer lainnya. Hal yang sama dilakukan juga ketika komputer lain ingin terhubung.

Bagan di atas memang bukanlah cara yang efektif karena perlu mengatur koneksi untuk masing-masing komputer. Hal ini dapat diselesaikan dengan sebuah alat yang menghubungkan banyak komputer sekaligus. Perkenalkan, alat bernama network switch.

dos:6e51f4c8303c7f632346931445423e6320230615104451.jpeg

Tidak hanya menghubungkan banyak komputer sekaligus, network switch juga dapat terhubung dengan network switch lain sehingga jaringan yang terbentuk makin besar.

 

Interconnection Network

Semakin besar jaringan yang diciptakan, semakin banyak komputer yang akan terhubung dan berkomunikasi. Komputer Anda dapat terhubung dengan komputer keluarga, teman, bahkan hingga tetangga-tetangga. Masih banyak pula saudara-saudara kita di belahan bumi lainnya untuk bisa saling terkoneksi. Namun, bukankah itu merupakan cara yang tidak efektif, bahkan benar-benar mustahil jika masih menggunakan koneksi kabel atau nirkabel bagi user? Oleh karena itu, perkenalkanlah jaringan yang bernama Interconnection Network atau yang biasa dikenal dengan Internet.

Untuk terhubung dengan semua orang di dunia, kita dapat memanfaatkan infrastruktur telepon yang biasanya sudah terhubung di rumah-rumah.

dos:fb5dff3f967d8e687a0eafe167191aae20230612142702.jpeg

Kita perlu menghubungkan komputer dengan infrastruktur telepon menggunakan alat yang dinamakan modem. Nah, apakah kita sudah dapat berkirim pesan dengan saudara jauh sekarang? Jawabannya, masih ada satu langkah lagi, yaitu jaringan kita perlu terhubung ke Internet Service Provider (ISP).

ISP adalah sebuah perusahaan yang mengelola beberapa router khusus yang saling terhubung dengan router ISP lainnya. Dengan inilah kita bisa berkomunikasi, bahkan dengan orang di benua lainnya.

dos:3be181a8e5ba7b0e2e0d26114bb5d08020230615104510.jpeg

Begitulah cara internet bekerja sehingga kita bisa terhubung dengan orang lain meskipun dalam kontinen yang berbeda. Dengan ini, Anda sudah memiliki modal untuk memahami cara website dapat sampai pada perangkat user.

Berikut adalah beberapa referensi lain yang dapat menambah pengetahuan Anda.

Pada materi berikutnya, kita akan berkenalan dengan website. Sudah tidak sabar, kan? Langsung saja beranjak ke materi selanjutnya.

Website dan Halaman Web

Adakah di antara Anda yang masih awam tentang website? Saya jamin Anda semua sudah mengetahuinya, baik secara sadar maupun tidak sadar. Buktinya, saat ini Anda sedang mengakses website milik Dicoding untuk menimba ilmu dalam bidang web development. Meskipun demikian, kita akan menggali memahami tentang website dan halaman web. Bahkan, kita akan mengenal perbedaan antara keduanya.

Halaman Web

dos:c6893908bc56e13469f511702a72a32320230615104554.jpeg

Halaman web merupakan halaman tunggal yang menampilkan informasi, baik berupa teks, gambar, maupun media lainnya. Tidak hanya media yang ditampilkan, halaman web yang dibangun dapat ditambahkan interaktivitas menggunakan kode (JavaScript).

Berikut adalah contoh salah satu halaman web yang dapat Anda akses.

dos:01534503eeb7bfc20b9ae9741e43e70120230612143110.jpeg

Halaman web di atas berisi banyak media yang disajikan hingga interaktivitas pengguna yang banyak. Halaman web yang diakses akan ditampilkan oleh browser menggunakan beberapa komponen pembangunnya. Kita akan membahas komponen-komponen ini pada materi Anatomi Website.

Website

dos:1755e6190df1a5dcfba9ed78f9b2094520230615104610.jpeg

Jika sebelumnya Anda belajar halaman web berupa halaman tunggal, website adalah sekumpulan halaman web yang saling terhubung. Website bersifat unik karena setiap halaman dapat saling terhubung dengan menggunakan hipertaut (hyperlink), baik dalam domain yang sama maupun berbeda.

Umumnya website memuat informasi yang disediakan secara perorangan, kelompok, atau organisasi. Semua informasi yang tersedia pada halaman website disimpan pada server. Kita akan membahas mengenai server pada materi berikutnya.

Perkembangan Aplikasi Web

Website merupakan teknologi yang sudah ada sejak 30 tahun silam. Tim Berners-Lee, seorang ilmuwan Inggris menemukan World Wide Web atau disingkat WWW pada tahun 1989 ketika ia bekerja di CERN (Conseil Européen pour la Recherche Nucléaire). Awalnya, web dibuat dan dikembangkan untuk memenuhi permintaan dalam berbagi informasi secara otomatis antar ilmuwan di universitas dan lembaga di seluruh dunia.

Web pertama di CERN didedikasikan sebagai web pertama di dunia. Selain itu, pada tahun 2013, CERN merilis “a project to restore this first ever websiteinfo.cern.ch” untuk mengabadikan website pertama di dunia. Berterimakasihlah pada CERN dan Tim Berners-Lee!

dos:27897e90cbbe64df7dab770d8f9d19d820230612143237.jpeg

Gambar di atas adalah website pertama yang dibuat, kita bisa menjelajahinya di info.cern.ch.

Website sudah berkembang sangat pesat. Sekarang, website tidak hanya digunakan untuk platform berbagi informasi atau berita. Layaknya aplikasi pada komputer dan telepon genggam, website dapat digunakan untuk komunikasi secara real-time, menyetel sebuah rekaman audio, hingga mengedit foto atau video.

Salah satu aplikasi berbasis web untuk melakukan pengeditan foto, adalah pixlr.com. Tampilannya seperti gambar berikut.

dos:991490ac25926780e9ac904980b1a27220230612143238.jpeg

 

Web Server

Ketika Anda mencari sesuatu dalam internet, katakanlah search engine seperti google.com, ada data yang ditampilkan pada Anda berdasarkan hasil pencariannya. Contoh lain, Anda sedang membeli suatu produk di e-commerce. Anda perlu mencarinya dalam kolom pencarian pada platform tersebut dan daftar produk yang relevan akan disajikan untuk Anda.

Namun, tahukah Anda apa yang terjadi di belakang? Bagaimana data dapat diperoleh dan ditampilkan dalam website? Hal ini termasuk pada halaman web yang sedang Anda akses. Kita akan membahasnya dalam materi ini.

Siklus Request dan Response

Tahukah Anda bahwa browser dapat menampilkan website dengan baik karena mendapatkan data dari komputer lain yang biasa disebut dengan server. Bagi komputer yang mengakses website, kita disebut sebagai client, atau dalam hal ini adalah browser yang melakukan permintaan data.

Browser akan mengirimkan sesuatu yang bernama request pada server dan menerima data dalam sesuatu yang bernama response sebagai hasil tanggapan dari server. Data-data tersebut dapat berupa berkas HTML, CSS, JavaScript, dan aset-aset lain yang dibutuhkan untuk menampilkan website.

dos:4a1c793bf59bbf3b5f649e9743a3c2a320230615104719.jpeg

Proses di atas dapat direpresentasikan dalam proses pemesanan makanan di suatu restoran. Untuk mendapatkan sajian makanan dan minuman (website), Anda (client/user) perlu melakukan pesanan kepada pelayan restoran. Pelayan tersebut dapat diwakili sebagai browser yang akan membuat pesanan (request) dan meneruskannya kepada seorang koki (server). Hal ini seperti browser membuat request ke server saat user menggunakan URL pada address bar browser. Koki akan memproses pesanan tersebut dan segera menyediakan hasilnya (response). Dalam waktu ini, Anda harus menunggu beberapa saat–biasanya tidak lama–untuk mendapatkan hasilnya. Setelah itu, koki memberikan hasil pesanan kepada pelayan dan menyajikannya kepada Anda. Sekarang, Anda dapat menikmati hasil hidangan tersebut (website).

Peranan Web Server

Tidak sedikit orang mengira bahwa server adalah sebuah komputer dengan performa tinggi dan berukuran besar. Hal tersebut tidak sepenuhnya salah karena komputer server umumnya seperti demikian. Pengertian dari web server sebenarnya lebih merujuk pada sebuah software yang dapat menghubungkan sebuah komputer dengan komputer lain. Jadi, peranan server mengacu pada fungsi dari sebuah komputer tersebut.

Berbicara mengenai web server, ia dapat terbagi menjadi dua hal, yaitu hardware dan software. Bukan berarti kedua hal tersebut bekerja secara terpisah, tetapi saling melengkapi dan bekerja sama.

Dari sisi hardware, web server merupakan komputer dengan spesifikasi yang disesuaikan berdasarkan layanannya. Contohnya, kapasitas hard drive yang besar akan dibutuhkan jika Anda memiliki website yang menyimpan banyak gambar, processor bertenaga tinggi akan diperlukan ketika Anda ingin membuat website yang memiliki proses kalkulasi kompleks, dan sebagainya.

Dari sisi software, web server merupakan komputer yang menjalankan sebuah program agar dapat melayani (menerima atau mengirim) data melalui jenis protokol bernama HTTP. Ini merupakan protokol standar dalam melakukan transaksi data oleh browser. Ada banyak program agar komputer kita dapat berkomunikasi dengan HTTP, yakni NGINX, Apache, ataupun membuatnya sendiri dengan menggunakan bahasa pemrograman server-side.

dos:e848988c38c1089f54418cebbe066fdf20230615104733.jpeg

DNS Server

Setiap perangkat, baik komputer, smartphone, modem, maupun router yang terkoneksi internet akan memiliki IP Address. Contohnya, komputer yang menjadi server dari dicoding.com memiliki alamat IP sendiri. Jika menggunakan IP tersebut untuk mengakses halaman Dicoding, tentu kita akan sulit mengingat dan mungkin akan berubah dari waktu ke waktu. Mengingat beberapa alamat IP mungkin masih mampu dilakukan. Namun, bagaimana jika harus mengingat 10 alamat IP? Untuk mengatasinya, kita menggunakan alamat yang mudah dibaca oleh manusia dan disebut domain name.

Sebenarnya, nama domain tidak akan menggantikan peran dari IP address. Komputer tetap menggunakan alamat IP untuk mengakses website. Namun, bagaimana caranya nama domain dapat diterjemahkan menjadi alamat IP? Berikut jawabannya.

Ketika user membuka website Dicoding menggunakan domain dicoding.com, browser akan menanyakan pada komputer, apakah ia mengenali dan dapat memberikan IP address-nya berdasarkan nama domain tersebut? Dia akan memeriksa berdasarkan DNS cache yang ada. Jika ada, browser akan diberikan alamat IP-nya dan menampilkan website yang diminta.

Jika komputer tidak mengenali nama domain tersebut, dia akan menanyakan pada DNS server yang secara singkat bertugas untuk memberi tahu alamat IP yang sesuai dari nama domain yang terdaftar padanya. Jika sudah, browser akan diberikan alamat IP-nya dan meneruskan permintaan konten halaman web ke web server.

dos:07dc0129fb041724a645102e876d855520230615104748.jpeg

Berikut adalah beberapa referensi lainnya untuk menambah wawasan Anda.

Web Browser

Dalam situasi bepergian menggunakan transportasi kapal, kita perlu memasuki awak kapal melalui pelabuhan kapal. Bagaimana jika Anda naik kapal melalui terminal bus atau stasiun? Hal tersebut tidak akan bisa, bukan? Hal ini karena pelabuhan kapal merupakan akses satu-satunya untuk menaiki dan melakukan perjalanan dengan kapal.

Sebagaimana website, kita memerlukan software sebagai kapal untuk menjelajahi beragam destinasi pulau. Tidak lupa juga dengan nama domain sebagai tiket untuk mengaksesnya.

DgJCT_37TthxdquI75r5uxb8zGEL70Ln9JBcj3-W1w1oJoc2tZbPD2luAL6-MOCZBVzCt3GOC3mt3trSyHL0ybOQcCr8kAQ3d-67JaMvAqz0tpYevKS1vRTcGHAZnMZrsLUPY8evOMRCUDOQhFKoDSU

Web browser atau disingkat browser merupakan sebuah program yang menampilkan halaman web. Tidak hanya satu halaman web, tetapi banyak website yang aktif di dunia ini dapat diakses oleh browser. Bahkan, halaman web yang saling terhubung dalam satu domain yang sama juga dapat diakses.

Ada banyak vendor-vendor browser yang dapat digunakan.

1.   Mozilla Firefox

2.   Google Chrome

3.   Microsoft Edge

4.   Opera Browser

Saat ini, Anda mungkin mengakses website ini menggunakan browser selain yang kami sebutkan. Hal tersebut juga merupakan salah satu software pengakses website. Jadi, silakan gunakan browser pilihan Anda.

 

Cara Browser Bekerja

Ketika user mengakses website dengan URL, browser akan membuat sebuah request yang akan dikirimkan ke web server. Kemudian, web server akan mengirimkan response berisi konten-konten yang dibutuhkan oleh website dan browser akan memprosesnya hingga tampil website pada perangkat user.

Browser memiliki address bar yang merupakan sebuah input bagi user untuk menuliskan alamat website atau yang biasa disebut Uniform Resource Locator (URL). Ada tiga bagian pada URL, yaitu protocol (https), domain name (dicoding.com), dan file path (alamat halaman web yang sedang ditampilkan).

dos:c5e8668c6e9bc1de6154ca79ca0d413f20230612145116.jpeg

Client dan web server berkomunikasi dengan protokol yang bernama HyperText Transfer Protocol (HTTP). Ketika user membuka website dengan URL, browser akan membuat dan mengirimkan HTTP request ke web server, serta menerima HTTP response yang dikirimkan oleh web server sebagai hasil request. Lalu, browser akan menampilkan halaman web berdasarkan konten-konten yang dikirimkan (HTML, CSS, JavaScript, dsb.). Proses ini juga bisa disebut sebagai request-response cycle.

 

 

📣Beasiswa Coding Online DBS Foundation Coding Camp 2024 RESMI Dibuka Kembali! 📣 DBS Foundation Coding Camp merupakan program beasiswa belajar coding online yang bertujuan untuk meningkatkan kompetensi masyarakat Indonesia di bidang teknologi informasi dengan 2 alur belajar baru sesuai dengan permintaan industri yaitu Front-End Web Developer dan Machine Learning Developer mulai dari level dasar (basic) hingga mahir (expert). 

Program ini terbuka untuk seluruh Warga Negara Indonesia dan 100% GRATIS! 🤩

Gabung Grup/Channel👇🏽 https://t.me/+8eDTskfCrRVkMzI1 

Keren banget bukan! Tunggu apalagi? Yuk daftar beasiswa DBS Foundation Coding Camp se📣Beasiswa Coding Online DBS Foundation Coding Camp 2024 RESMI Dibuka Kembali! 📣

DBS Foundation Coding Camp merupakan program beasiswa belajar coding online yang bertujuan untuk meningkatkan kompetensi masyarakat Indonesia di bidang teknologi informasi dengan 2 alur belajar baru sesuai dengan permintaan industri yaitu Front-End Web Developer dan Machine Learning Developer mulai dari level dasar (basic) hingga mahir (expert). 

Program ini terbuka untuk seluruh Warga Negara Indonesia dan 100% GRATIS! 🤩

Gabung Grup/Channel👇🏽
https://t.me/+8eDTskfCrRVkMzI1

Keren banget bukan! Tunggu apalagi?
Yuk daftar beasiswa DBS Foundation Coding Camp sekarang juga melalui: 

1. Pastikan mempunyai/daftar di https://www.dicoding.com/registration  terlebih dahulu, setelah register akun, langsung daftar link dibawah ini

2. Register👇
https://bit.ly/dbsf-codingcamp-2024

SEKALI LAGI FOKUS DI NOMOR 1 DAN 2 KARNA DSINI 2X REGIST BAGI YG BLM MEMPUNYAI AKUN DICODING

Periode pendaftaran: 23 Januari - 31 Mei 2024✍️karang juga melalui: 

1. Pastikan mempunyai/daftar di https://www.dicoding.com/registration terlebih dahulu, setelah register akun, langsung daftar link dibawah ini 

2. Register👇 https://bit.ly/dbsf-codingcamp-2024 


SEKALI LAGI FOKUS DI NOMOR 1 DAN 2 KARNA DSINI 2X REGIST BAGI YG BLM MEMPUNYAI AKUN DICODING Periode

pendaftaran: 23 Januari - 31 Mei 2024✍️

Posting Komentar untuk "Pengantar Web Programming | Cara Internet Bekerja | Website dan Halaman Web"