Pengenalan Web Development: Markup dan Programming Language
Proses pengembangan Web (Web Development) tidak terlepas dari penggunaan teknologi HTML, CSS, dan JavaScript, jika dilihat dari sisi client-side atau era sekarang ini disebut sebagai Front-end developer. Dilain hal, mengetahui teknologi dari sisi client-side saja tidak cukup untuk membangun Web yang profesional atau dinamis. Oleh karena itu perlu mempelajari bahasa pemrograman server-side serperti PHP, NodeJS, dan lain sebagainya termasuk database dan hal ini dikerjakan oleh Back-end developer. Oleh karena itu, Web Developer dapat diartikan sebagai, bagaimana menyajikan/menampilkan data (text, dokumen, audio, video, dsb) melalui Web Browser.
Berikut ini perbedaan Font-end dan Back-end Web Developer berdasarkan keahlian yang dibutuhkan serta tanggung jawabnya secara sederhana.
| # | Front-end Developer | Back-end Developer |
|---|---|---|
| Keahlian | Mendesain tampilan visual (UI) Website seperti desain layout/tata letak/navigasi, pemilihan warna, font, button, form, dan grafik menggunakan HTML, CSS, dan JavaScript. |
Membuat struktur serta fungsi dari aplikasi website yang dibangun, seperti mendefenisikan database untuk mendukung fungsi operasi CRUD (Create, Read, Update, dan Delete). Contoh bahasa pemrograman server-side seperti PHP, NodeJS, Ruby on Rails (RoR), serta program database management untuk query database (berbasis sql/MySQL dan No-SQL/MongoDB). |
| Fokus | Memastikan bahwa aplikasi Web yang dibangun dapat diakses dan mudah digunakan oleh setiap pengguna baik melalui perangkat berbasis desktop, tablet, dan ponsel (responsive desain). | Memastikan aplikasi web yang dibangun berjalan dengan baik dan meminimalisir kesalahan (error), seperti dapat menampilkan kesesuaian data yang diminta pengguna (user) berdasarkan otoritas yang diberikan. |
Mana yang harus dipelajari terlebih dahulu? Hal ini dikembalikan sesuai dengan tujuan masing-masing. Memulai sebagai Front-end developer artinya berfokus pada pembuatan visualisasi aplikasi Web yang dibangun. Sebaliknya memulai sebgai Back-end developer berfokus pada fungsionalitas dan logic dari aplikasi Web yang dibangun. Saat memutuskan untuk menjadi kedua-duanya, artinya menjadi seorang Full-stack Web Developer.
Cara Kerja Aplikasi Berbasis Web
Agar halaman Website statis ataupun dinamis dapat diakses oleh publik/pengguna baik dari jaringan Intranet (local) maupun Internet, memerlukan komputer yang berfungsi sebagai server tempat dimana sumber kode (source code) disimpan yang disebut dengan Web Server.
Web server adalah sebuah program komputer yang berfungsi untuk melayani permintaan dari client atau user melalui protokol HTTP atau HTTPS dalam bentuk halaman web baik menggunakan Web Browser/berbasis GUI (Chrome, Firefox, dan Opera) mapun menggunakan perintah/berbasis Text (command-line/terminal) seperti cURL (Client for URLs). Contoh aplikasi Web server yang cukup populer seperti Apache, Nginx, IIS (Internet Information Services) dari Windows Server, Lighttpd, dsb.
Gambar Struktur HTTP URLs.(Sumber: https://www.codingninjas.com/studio/library/uniform-resource-locator-urls-in-html)
Perlu diketahui bahwa HTML (Hypertext Markup Language) bukan bahasa pemrograman, melainkan sebuah markup languange untuk memformat dokumen berbasis Web, karena tidak dapat menerima logika seperti operasi matematika. Demikian juga dengan CSS (Cascading Style Sheet) merupakan bagian dari markup languange sebagai bahasa untuk mendesain dengan gaya berjenjang (bertingkat beraturan) berdasarkan markup/selector (tag atau attribute): seperti untuk mewarnai, memperbesar/mengecilkan font, memberikan garis (border), dsb.
Berikut ini visualisasi bagaimana Web server memproses halaman Web secara statik dan dinamis.
Gambar Cara Kerja Web Page Static & Dynamic.(Sumber: https://www.hostinger.com/tutorials/what-is-a-web-server
| Static Web Page | Dynamic Web Page |
|---|---|
Dibentuk hanya dengan bahasa berbasis client-side, seperti HTML, CSS, dan JavaScript yang disimpan kedalam ektensi seperti .htm atau .html. |
Dibentuk menggunakan bahasa berbasis client-side serta berbasis server-side. Misal ketika menggunakan PHP, maka file halaman disimpan kedalam ekstensi .php. |
| Tidak menggunakan database, karena informasi disimpan kedalam satu file untuk satu halaman. Oleh karena itu diperlukan beberapa file jika ingin menampilkan beberapa halaman. | Menggunakan database, sehingga ketika ingin menampilkan informasi yang masih dalam satu kategori, cukup menggunakan satu halaman yang sama dan menggunakan teknik paging/pagination. |
| Contoh penggunaan Web Statik seperti landing-page, website company profile, atau untuk menampilkan informasi yang bersifat tidak untuk diperbaharui. | Contoh penggunakan Web Dinamis seperti e-commerce, web blog, berita/news, e-learning, perpustakaan online, dsb yang perlu diperbaharui. |
Pada dasarnya halaman web statis atau dinamis sendiri dapat dilihat dari bagaimana data/informasi pada halaman website tersebut dibentuk, apakah hanya menggunakan pendekatan bahasa client-side saja atau menggabungkannya dengan bahasa pemrograman server-side.
Interpreter Vs. Compiler
Salah satu hal penting untuk diketahui saat mempelajari bahasa pemrograman yaitu mengenai interperter dan compiler--termasuk saat membangun aplikasi berbasis Web. Baik compiler maupun interperter sendiri adalah program penerjemah (translator program, disebut juga dengan language processors) untuk mengkonversi high-level language (bahasa yang mudah difahami manusia, seperti ditulis kedalam bahasa inggris) kedalam low level-language (bahasa mesin, sistem binari atau instruksi 0 atau 1).
Gambar Perbedaan Interpreter dengan Compiler(Sumber: https://ecomputernotes.com/what-is-c/difference-between-compiler-and-interpreter)
Untuk memudahkan memahami perbedaan compiler dan interpreter, anggap terdapat program komputer sederhana yang dituliskan menggunakan hight-level languange sebagai source code yang disebut dengan Plain-Text.
| Plain-Text | Compiler | Intepreter |
|---|---|---|
| Keluaran | Menghasilkan program luaran atau berkas executable (binary file) seperti berekstensi .exe pada windows, atau .deb pada Linux Debian. |
Tidak menghasilkan berkas executable, melainkan hanya berupa output yang diminta. |
| Efektifitas | Saat proses kompilasi atau merubah plain-text menjadi binary/executable file memerlukan waktu yang lama. Namun untuk mengeksekusi file executable yang dihasilkan menjadi cepat. |
Tidak memerlukan waktu compiling (merubah dari plain-text menjadi file binary), namun waktu eksekusi aplikasi menjadi lambat. |
| Alur Eksekusi | Pada saat proses compiling seluruh penulisan kode program pada plain-text akan dibaca. Jika terjadi kesalahan penulisan kode program, maka compiler akan menampilkan pesan error dan tidak menghasilkan file binary. |
Membaca kode program pada plain-text satu persatu, jika terdapat kesalahan, maka interpreter akan menampilkan pesan error dan harus diperbaiki untuk melanjutkan |
| Bahasa Pemrograman | Bahasa C/C++, C#, Java, NodeJS dengan V8 Engine menggunakan JIT (Just-in-Time) compiling untuk menjalankan Javascript code. |
Bahasa PHP, JavaScript, Python, RoR, dsb. Bersifat cross platform, asal memiliki interpreter yang sama. |
Secara umum pada arsitektur komputer modern dapat menjalankan aplikasi lainnya karena terdapat program yang ditanamkan pada komputer itu sendiri baik pada tingkatan hardware maupun sistem operasi (kernel).
- Compiler menerima source-code dan merubahnya kedalam bahasa tingkat rendah (assembly).
- Assembler menerima keluaran compiler dan menghasilkan berkas objek dalam bahasa mesin.
- Linker menerima berkas objek keluaran assembler untuk kemudian digabungkan dengan pustaka-pustaka/library yang diperlukan sehingga menghasilkan program yang dapat dieksekusi (executable).
Meskipun tahapan preprocessing opsional, biasanya diintegrasikan dengan compiler yang berfungsi untuk mengorganisasi atau merestrukturisasi source code agar memudahkan/mempercepat proses kompilasi (compiling), seperti pembacaan file header atau library.
Warning!
We are not responsible for any loss whatsoever due to this site, also if you want to take this article please read terms of use or touch us via contact page.
If there is question, please discuss below. Very welcome and expected to provide corrections, criticisms, and suggestions.
Be the first :D
