Nama : Rangga Ramadhan Ezwar

NIM : 212102423

Ringkasan Web Development Basics

Generasi teknologi web saat ini dibangun di sekitar konten dinamis.

Arsitektur aplikasi Web khas digambarkan pada Gambar 7.1.

Browser web di sisi klien menyediakan antarmuka pengguna grafis bagi pengguna untuk
berinteraksi dengan aplikasi web. Server web adalah server tempat situs web dihosting. Server
web menerima permintaan dokumen dan pengiriman data dari browser web melalui protokol
HTTP di atas lapisan TCP/IP Internet.

Server aplikasi menyediakan akses ke logika bisnis untuk digunakan oleh program aplikasi klien.
Server data (sistem manajemen basis data) menghosting satu atau lebih basis data, seperti Oracle,
SQL Server, atau MySQL untuk menyediakan persistensi data. Meskipun banyak alamat situs
web dimulai dengan "www", tidak ada persyaratan bahwa mereka memulai dengan cara ini. Itu
hanya konvensi awal untuk membantu orang mengenali bahwa seseorang menjalankan server
web.

7.1 Elemen Pengembangan Web

Pengembangan web itu sendiri kompleks, karena melibatkan lebih banyak dalam hal konsep,
alat, dan teknologi. Ada alat dan teknologi penting yang harus diketahui oleh setiap pengembang
web: Browser: Sebagai penafsir Web, browser meminta informasi dan saat menerima respons,
menampilkan halaman web dalam format yang dapat dibaca manusia.

• Google Chrome (saat ini, browser paling populer)

• Safari (peramban web Apple)
• Firefox (peramban sumber terbuka yang didukung oleh Mozilla Foundation)
• Internet Explorer (peramban Microsoft)
HTML: Hypertext Markup Language menyediakan struktur untuk halaman web dan situs web

CSS: Cascading Style Sheets memungkinkan desainer web untuk mengontrol warna, font,
animasi, dan transisi di web.

Bahasa pemrograman: Bahasa pemrograman memungkinkan Anda berkomunikasi dengan

komputer dan memberi tahu mereka apa yang harus dilakukan. Yang menonjol adalah:

• JavaScript: Didukung oleh semua browser web.

• Python: Digunakan oleh kerangka kerja Django.
• Ruby: Digunakan oleh kerangka kerja Ruby on Rails.
• PHP: Digunakan oleh WordPress, Sistem Manajemen Konten Joomla.
• Objective-C: Dipimpin oleh Apple, ini adalah bahasa pemrograman di balik iOS.
• Swift: Bahasa pemrograman terbaru Apple.
• Java: Digunakan oleh Android (Google) dan banyak aplikasi desktop.

Framework: Framework dibuat untuk membuat pembangunan dan bekerja dengan bahasa
pemrograman menjadi lebih mudah. Contohnya meliputi:

• Meteor: Framework JavaScript full-stack (depan dan belakang).

• Node.js: Framework JavaScript sisi server.
• Ruby on Rails: Framework full-stack yang dibuat menggunakan ruby.
• Django: Framework tumpukan penuh yang dibangun menggunakan python.
• Ionic: Framework seluler.
• Bootstrap: Framework UI (antarmuka pengguna) untuk membangun dengan HTML,
CSS, dan JavaScript.
• Sistem manajemen konten (CMS): WordPress, Joomla, dan Drupal adalah solusi populer
yang mendukung pembuatan dan modifikasi konten digital.
• .NET: Framework tumpukan penuh yang dibangun oleh Microsoft.
• Angular.js: Framework JavaScript front-end.

Libraries: Libraries adalah kumpulan cuplikan kode yang memungkinkan sejumlah besar
fungsionalitas tanpa Anda harus menulis semuanya.

Database: Database adalah tempat Anda menyimpan data.

• SQL menyediakan lebih banyak struktur, yang membantu memastikan semua data benar
dan divalidasi.
• NoSQL menyediakan banyak fleksibilitas untuk membangun dan memelihara aplikasi.
Contohnya meliputi: MongoDB, Redis, PostgreSQL, MySQL, Oracle, SQL Server dan
Neo4j

Klien (atau sisi klien): Klien adalah salah satu pengguna aplikasi.
Server (atau sisi server): Server adalah tempat kode aplikasi web biasanya disimpan.

• Beberapa server umum meliputi: server web, server aplikasi, server FTP, server obrolan,
server game online, server IRC, dan server surat. Contoh server web populer termasuk
Apache dan IIS.

Front-end: Front-end terdiri dari HTML, CSS, dan JavaScript. Ini adalah bagaimana dan di mana
situs web ditampilkan kepada pengguna.

Back-end: Back-end terdiri dari server dan database Anda.

Protokol: Protokol adalah instruksi standar tentang cara meneruskan informasi bolak-balik antara
komputer dan perangkat.

• HTTP: Hypertext Transfer Protocol adalah bagaimana data dari situs web sampai ke
browser Anda.
• DDP: Protokol data terdistribusi adalah protokol baru yang dibuat sehubungan dengan
Meteor.
• REST: Transfer status representasional adalah protokol yang terutama digunakan untuk
API

API: Antarmuka pemrograman aplikasi dibuat oleh pengembang aplikasi untuk memungkinkan
pengembang lain menggunakan beberapa fungsi aplikasi tanpa berbagi kode.

• Akses API dapat dikontrol dengan kunci API.

• Contoh API yang baik adalah yang dibuat oleh Facebook, Twitter, dan Google untuk
layanan web mereka.

Format data: Format data adalah struktur bagaimana data disimpan. Contoh umum meliputi:

• JSON: Notasi Objek JavaScript dengan cepat menjadi format data paling populer.
• XML: Format data utama pada hari-hari awal Web.
• CSV: Nilai yang Dipisahkan Koma adalah data yang diformat dengan koma.

GitHub: Disebut sebagai platform kolaboratif pengembang.

• GitHub sendiri hanyalah jejaring sosial seperti Facebook atau Instagram.

• GitHub adalah antarmuka grafis, yang mengelola perubahan pada proyek tanpa menimpa
bagian mana pun dari proyek itu.

Hosting web: Hosting situs web Anda sendiri tidak memerlukan biaya bulanan atau memerlukan
banyak pengetahuan teknis untuk penyiapan.

• WAMP (Windows, Apache, MySQL, dan PHP)

• LAMP (Linux, Apache, MySQL, dan PHP)
7.2 Skrip Sisi Klien dan Sisi Server

Bahasa markup: Bahasa markup adalah blok bangunan Web dan pada awalnya merupakan
kumpulan teks dan beberapa instruksi.

• Kode yang digunakan untuk menentukan pemformatan disebut sebagai tag.

• HTML adalah contoh bahasa markup yang dikenal dan digunakan secara luas.
• Web dinamis generasi saat ini dan masih digunakan untuk mengontrol penyajian data.

Bahasa Pemrograman: Bahasa pemrograman adalah notasi untuk menulis program, yang
merupakan spesifikasi komputasi atau algoritma.

Bahasa skrip: Bahasa skrip adalah bahasa pemrograman, tetapi mereka masuk ke dalam kategori
yang disebut bahasa yang ditafsirkan (yaitu, Python, Ruby, PHP).

• Gunakan juru bahasa atau beberapa aplikasi yang sedang berjalan untuk mengambil
perintah pemrograman dan mengubahnya menjadi instruksi untuk dieksekusi.
• Bahasa scripting adalah bahasa pemrograman.

Agar aplikasi web berfungsi, dua program dijalankan secara bersamaan:

• Kode yang hidup di server dan merespons permintaan HTTP, disebut sebagai kode sisi
server.
• Kode yang hidup di browser dan merespons masukan pengguna, disebut sebagai kode sisi
klien.

Pengembangan web berkisar dari membuat halaman teks biasa hingga yang kompleks (jejaring
sosial, dan aplikasi bisnis).
7.3 Arsitektur Model-View-Controller untuk Pengembangan Aplikasi Web

Model-View-Controller adalah pola desain perangkat lunak untuk mengembangkan aplikasi

berbasis web, desktop, dan seluler. Pisahkan logika bisnis, akses database, dan lapisan presentasi,
sehingga memisahkan input, pemrosesan, dan output aplikasi. Kerangka kerja memiliki tiga
komponen yang saling berhubungan: model, tampilan, dan pengontrol. Kontroler menerima
semua permintaan untuk aplikasi dan kemudian bekerja dengan model untuk menyiapkan data
apa pun yang dibutuhkan oleh tampilan. Tampilan kemudian menggunakan data yang disiapkan
oleh pengontrol untuk menghasilkan respons akhir yang dapat disajikan (Gambar 7.2).

Model: Tingkat terendah dari pola, yang bertanggung jawab untuk memelihara data.

Lihat: Ini tentang "apa yang dilihat pengguna." Ini bertanggung jawab untuk menampilkan
semua atau sebagian data kepada pengguna.

GAMBAR 7.2

arsitektur MVC.

Controller: Kode yang mengontrol interaksi antara model dan tampilan. Controller bertanggung
jawab untuk merespon input pengguna dan melakukan interaksi pada objek model data.

MVC telah diadopsi dan ditetapkan sebagai arsitektur yang hebat untuk pengembangan aplikasi,
apa pun bahasa yang Anda gunakan untuk pengembangan. Pada dasarnya, ini memungkinkan
pemrogram untuk mengisolasi potongan kode yang sangat terpisah ini. MVC mendukung
pengembangan yang cepat dan paralel dengan manfaat biaya dan waktu yang telah terbukti.
Kelebihan dan kekurangan menggunakan framework MVC adalah sebagai berikut.

Keuntungan:

• Pengembangan simultan: Beberapa pengembang dapat bekerja secara bersamaan pada

model, pengontrol, dan tampilan.
• Kohesi tinggi: MVC memungkinkan pengelompokan logis dari tindakan terkait pada
pengontrol. Tampilan untuk model tertentu juga dikelompokkan bersama.
• Kopling rendah: Sifat kerangka kerja MVC adalah sedemikian rupa sehingga ada kopling
rendah di antara model, tampilan, atau pengontrol.
 • Kemudahan modifikasi: Karena pemisahan tanggung jawab, pengembangan atau
modifikasi di masa depan menjadi lebih mudah.
• Beberapa tampilan untuk sebuah model: Model dapat memiliki beberapa tampilan.

Kekurangan:

• Navigasi kode: Navigasi kerangka kerja bisa rumit karena memperkenalkan lapisan
abstraksi baru dan mengharuskan pengguna untuk beradaptasi dengan kriteria
dekomposisi MVC.
• Konsistensi multi-artefak: Mengurai fitur menjadi tiga artefak menyebabkan hamburan.
Dengan demikian, mengharuskan pengembang untuk menjaga konsistensi beberapa
representasi sekaligus.
• Kurva pembelajaran yang diucapkan: Pengetahuan tentang berbagai teknologi menjadi
norma. Pengembang yang menggunakan MVC harus terampil dalam berbagai teknologi.