Membuat Web Marketing untuk Full

Stack Engineer

Pengenalan Pemrograman Web

Mentor:
Iin Solihin

Halaman 1 dari 10
1. Pendahuluan

1.1. Apa itu pemrograman web?

Bayangkan sebuah rumah. Rumah ini tidak seperti rumah biasa

yang SobatLS lihat di sekitar, melainkan rumah digital yang bisa dikunjungi
oleh siapa saja dari seluruh dunia. Rumah digital ini adalah sebuah
website. Pemrograman web adalah proses pembuatan rumah digital ini,
dari menentukan desain, membangun struktur, hingga memastikan
semua orang bisa mengaksesnya dengan mudah.

Dalam dunia nyata, kita membutuhkan arsitek dan tukang untuk

membangun rumah. Dalam pemrograman web, 'arsitek' dan 'tukang' ini
adalah para web developer. Mereka menggunakan berbagai 'alat' berupa
kode-kode pemrograman untuk membuat, mendesain, dan mengelola
website agar berfungsi dengan baik.

1.2. Mengapa Pemrograman Web Penting?

Pemrograman web merupakan keterampilan kunci dalam era

digital ini. Berikut adalah beberapa poin utama yang menjelaskan
pentingnya pemrograman web:

● Kehadiran Online adalah Keharusan: Di zaman serba online ini,

hampir setiap bisnis atau organisasi membutuhkan website untuk
meningkatkan visibilitas dan kredibilitasnya. Tanpa website, mereka
seperti toko tanpa papan nama.
● Pusat Informasi dan Komunikasi: Website berfungsi sebagai pusat
informasi di mana orang dapat belajar tentang produk, layanan,
atau misi sebuah organisasi. Ini juga menjadi saluran komunikasi
utama antara pemilik website dan pengunjungnya.
● Transaksi Elektronik: Dengan berkembangnya e-commerce,
pemrograman web menjadi sangat penting dalam membangun
platform yang aman dan efisien untuk transaksi online, dari belanja
hingga perbankan.
● Interaktivitas dan Keterlibatan Pengguna: Website yang dirancang
dengan baik tidak hanya menyampaikan informasi tetapi juga
melibatkan pengunjung dengan interaktivitas, seperti form interaktif,
chat, dan fitur lainnya.

Halaman 2 dari 10
 ● Mendukung Era Mobile: Pemrograman web tidak hanya tentang
membuat website yang bagus di komputer, tetapi juga memastikan
bahwa situs tersebut berfungsi dengan baik di perangkat mobile,
yang semakin dominan digunakan.
● Pengoptimalan Mesin Pencari (SEO): Dalam pemrograman web,
penting untuk mengoptimalkan website agar mudah ditemukan di
mesin pencari. Ini membantu meningkatkan trafik dan, pada
akhirnya, keberhasilan bisnis atau tujuan website.
● Adaptasi dengan Perubahan Teknologi: Dunia teknologi terus
berkembang. Pemrograman web memungkinkan website untuk
beradaptasi dengan tren dan teknologi terbaru, menjaga relevansi
dan efektivitasnya.

2. Sejarah Pemrograman Web

2.1. Awal Mula: Kelahiran World Wide Web

Cerita dimulai pada tahun 1989, ketika seorang ilmuwan bernama

Tim Berners-Lee yang bekerja di CERN (Organisasi Eropa untuk Penelitian
Nuklir) di Swiss, mencetuskan ide tentang World Wide Web. Idenya
sederhana tapi revolusioner: menciptakan cara bagi para ilmuwan di
seluruh dunia untuk berbagi informasi melalui komputer.

Tim Berners-Lee kemudian mengembangkan tiga teknologi dasar

yang masih kita gunakan hingga hari ini:
● HTML (HyperText Markup Language): Bahasa dasar untuk membuat
halaman web.
● URL (Uniform Resource Locator): Alamat unik untuk setiap halaman
web.
● HTTP (HyperText Transfer Protocol): Cara komputer mengirimkan dan
menerima informasi di web.

2.2. Era Browser dan Perkembangan Web

Pada awal 1990-an, muncullah browser pertama yang disebut

WorldWideWeb (kemudian dinamai Nexus). Browser ini memungkinkan
orang biasa untuk menjelajah web dengan lebih mudah. Tidak lama
kemudian, browser lain seperti Mosaic dan Netscape Navigator muncul,
membawa web ke audiens yang lebih luas.

Halaman 3 dari 10
 Tahun 1995 menjadi tonggak penting dengan munculnya JavaScript
oleh Netscape. Ini memungkinkan halaman web menjadi lebih interaktif
dan dinamis. Bukan lagi sekadar teks dan gambar yang statis, tapi bisa
bereaksi terhadap aksi pengguna.

2.3. Era Modern: Web Dinamis dan Responsif

Memasuki abad ke-21, web terus berkembang dengan kecepatan

luar biasa. Munculnya CSS (Cascading Style Sheets) memberikan
kemampuan untuk mendesain halaman web yang lebih menarik dan unik.
Lalu ada AJAX (Asynchronous JavaScript and XML), yang memungkinkan
halaman web memuat informasi baru tanpa harus memuat ulang
halaman sepenuhnya.

Di era ini, kita juga menyaksikan munculnya HTML5, CSS3, dan

berbagai framework JavaScript seperti React, Angular, dan Vue.js, yang
membuat pembuatan website menjadi lebih cepat, efisien, dan responsif
terhadap berbagai ukuran layar.

3. Konsep Pemrograman Web

Setelah mengetahui sejarahnya, saatnya kita menyelami

konsep-konsep dasar pemrograman web. Pemrograman web seperti
membangun rumah; ada bagian yang terlihat oleh orang yang lewat
(front-end), dan ada bagian yang tersembunyi di dalam rumah, tetapi
penting untuk menjalankan segala fungsi (back-end).

3.1. Front-End VS Back-End

Front-end adalah bagian web yang SobatLs lihat dan berinteraksi

langsung di browser. Mirip dengan dekorasi rumah yang bisa kita lihat dan
nikmati. Front-end melibatkan tiga bahan utama:

● HTML (HyperText Markup Language): Ini adalah kerangka dasar

dari setiap halaman web. Bayangkan HTML sebagai kerangka
rumah; menentukan struktur dan menyusun bagian-bagian seperti
judul, paragraf, dan gambar.

Halaman 4 dari 10
 ● CSS (Cascading Style Sheets): Jika HTML adalah kerangka, maka
CSS adalah cat dan dekorasi interior. CSS menentukan tampilan
website, termasuk warna, font, dan layout.
● JavaScript: Ini adalah sistem listrik yang membawa kehidupan ke
dalam rumah. JavaScript membuat website bisa "beraksi", seperti
mengubah konten saat tombol diklik.

Sedangkan back-end merupakan bagian ini tidak terlihat langsung

oleh pengunjung, tetapi sangat penting. Back-end adalah tempat di mana
data diproses dan disimpan. Seperti dapur dan ruang mesin di sebuah
rumah, di mana semua kerja keras terjadi untuk memastikan rumah
berfungsi. Dalam web, back-end melibatkan:

● Server, Aplikasi, dan Database: Ketiganya bekerja sama di

belakang layar. Server adalah komputer yang menyimpan dan
menjalankan website, aplikasi adalah program yang berjalan di
server dan berkomunikasi dengan database untuk mengambil,
menyimpan, atau mengubah data.
● Bahasa Pemrograman dan Framework: Ada banyak bahasa
pemrograman untuk back-end, seperti PHP, Python, Ruby, dan
JavaScript (Node.js). Masing-masing dengan frameworknya yang
membantu dalam pembuatan aplikasi web, seperti Django untuk
Python atau Express untuk Node.js.

3.2. Bahasa Pemrograman dan Teknologi Web

Selain HTML, CSS, dan JavaScript, ada banyak teknologi lain yang
mendukung pemrograman web. Misalnya, AJAX memungkinkan update
halaman tanpa perlu memuat ulang, dan JSON (JavaScript Object
Notation) digunakan untuk pertukaran data.

Pemrograman web terus berkembang, dengan teknologi baru yang

muncul untuk memenuhi kebutuhan yang berubah. Sebagai pemula,
mengenal konsep-konsep dasar ini adalah langkah pertama yang
penting. Di bab selanjutnya, kita akan menjelajahi lebih dalam tentang
bahasa pemrograman front-end, dimulai dengan HTML, CSS, dan
JavaScript.

Halaman 5 dari 10
4. Bahasa Pemrograman Front-End

4.1. HTML: Struktur Web sebagai Pondasi

HTML adalah seperti fondasi dan kerangka sebuah rumah. Ini adalah
bahasa yang digunakan untuk membuat struktur dasar setiap halaman
web. Dengan HTML, kita bisa menentukan judul, paragraf, gambar, dan
elemen lainnya. Contoh: <h1>Ini Judul</h1> akan menampilkan judul utama
di halaman web.

4.2. CSS: Seni Mendesain Web

CSS adalah seperti cat dan dekorasi rumah yang membuat

tampilan menjadi lebih menarik. CSS mengatur tampilan elemen HTML
seperti warna, ukuran font, dan layout. Contoh: body { color: blue; } akan
membuat teks di seluruh halaman menjadi berwarna biru.

4.3. JavaScript: Membuat Web Interaktif

JavaScript adalah seperti sistem elektrik rumah yang

memungkinkan segala sesuatu berfungsi dan bergerak. JavaScript
membuat halaman web bisa merespon aksi pengguna, seperti klik tombol
atau memasukkan data. Contoh: Sebuah script JavaScript dapat
membuat pop-up muncul ketika pengguna mengklik tombol.

5. Bahasa Pemrograman Back-End

5.1. PHP: Skrip Server yang Populer

PHP bekerja di server, mengelola data dan interaksi dengan

database. PHP seperti dapur di restoran, di mana semua makanan
dipersiapkan sebelum disajikan. Contoh: PHP sering digunakan untuk
membuat formulir web yang memproses data pengguna.

5.2. Python dan Framework Django

Python adalah bahasa yang mudah dibaca dan Django adalah

toolkit yang membuat pembuatan aplikasi web menjadi lebih cepat dan
terstruktur. Contoh: Django digunakan untuk membuat aplikasi web yang
kompleks dengan lebih efisien.

Halaman 6 dari 10
 5.3. Node.js: JavaScript di Server

Node.js memungkinkan penggunaan JavaScript di server,

menyatukan bahasa pemrograman front-end dan back-end. Contoh:
Node.js sering digunakan untuk aplikasi yang membutuhkan pemrosesan
data real-time.

6. Database untuk Web

6.1. Pengenalan SQL dan NoSQL

Bayangkan database sebagai lemari arsip besar di sebuah

perusahaan. Di dalamnya, berbagai berkas dan informasi disimpan
dengan rapi. Di dunia web, database adalah tempat di mana semua data
website disimpan, mulai dari informasi pengguna hingga konten yang
ditampilkan di halaman web.

● SQL (Structured Query Language):

SQL digunakan untuk berinteraksi dengan database yang terstruktur.
Bayangkan SQL seperti sistem pengarsipan tradisional di
perpustakaan, di mana buku-buku dikelompokkan dan diberi label
secara jelas.
Contoh Database SQL: MySQL, PostgreSQL.
Contoh Penggunaan: Mengambil data pengguna dari database
untuk ditampilkan di halaman profil.
● NoSQL (Not Only SQL):
NoSQL adalah pendekatan yang lebih fleksibel dalam manajemen
database. Ibarat kotak mainan anak-anak di mana berbagai jenis
mainan bisa disimpan tanpa pengelompokan khusus. Cocok untuk
data yang tidak terlalu terstruktur dan berubah-ubah.
Contoh Database NoSQL: MongoDB, Cassandra.
Contoh Penggunaan: Menyimpan data dari media sosial dengan
berbagai format se perti teks, gambar, dan video.

6.2. Menghubungkan Database dengan Back-End

Menghubungkan database dengan back-end adalah proses vital

dalam pemrograman web. Back-end berfungsi seperti dapur di restoran, di

Halaman 7 dari 10
 mana data 'dimasak' atau diproses, dan kemudian dikirim ke front-end,
seperti ruang makan, di mana data disajikan kepada pengguna.

● APIs (Application Programming Interfaces):

APIs berperan sebagai pelayan yang membawa pesanan antara
dapur (back-end) dan ruang makan (front-end).
Contoh: Sebuah API yang mengambil data pengguna dari database
untuk ditampilkan di sebuah aplikasi mobile.
● Bahasa Pemrograman Back-End:
Bahasa pemrograman seperti PHP, Python, atau Node.js digunakan
untuk mengambil, memodifikasi, dan mengelola data dari
database.
Contoh: Skrip PHP yang mengambil data pengguna berdasarkan ID
mereka untuk ditampilkan di website.
● Keamanan Data:
Keamanan dalam mengelola database sangat penting untuk
melindungi informasi sensitif.
Contoh: Menggunakan enkripsi dan metode autentikasi yang aman
saat mengakses data di database.

7. Web Development Tools

Dalam dunia pemrograman web, memiliki alat yang tepat sangat

penting. Bayangkan Anda sedang membangun rumah; tanpa palu,
gergaji, dan meteran, pekerjaan itu akan menjadi sangat sulit. Dalam
pembuatan website, kita juga memerlukan berbagai alat untuk membantu
kita dalam prosesnya. Mari kita lihat beberapa alat penting dalam
pengembangan web:

7.1. Editor Teks dan IDE (Integrated Development Environment)

● Editor Teks:
Editor teks untuk pengembangan web seperti blok catatan
yang digunakan oleh arsitek untuk merancang bangunan. Ini
tempat kita menulis kode.
Contoh populer: Visual Studio Code, Sublime Text, Atom.
Fitur: Highlight sintaks, otomatisasi kode, dan ekstensi khusus
untuk meningkatkan produktivitas.

Halaman 8 dari 10
 ● IDE:
IDE adalah seperti kotak alat lengkap yang tidak hanya untuk
menulis kode, tapi juga memiliki alat untuk menguji dan
memperbaiki kode (debugging).
Contoh: IntelliJ IDEA, Eclipse, dan PyCharm.
Fitur: Manajemen proyek, debugging tools, integrasi database.

7.2. Version Control dengan Git

● Version Control:
Version control seperti buku catatan proyek yang mencatat
setiap perubahan. Ini memungkinkan kita untuk melihat
perubahan yang dibuat sepanjang waktu dan kembali ke
versi sebelumnya jika perlu. Git adalah sistem version control
yang paling populer.
Fitur: Melacak perubahan, kolaborasi dengan pengembang
lain, dan mem-backup kode.
● GitHub dan GitLab:
GitHub dan GitLab seperti album foto yang menyimpan
semua catatan proyek. Kita bisa berbagi proyek kita dengan
orang lain atau berkolaborasi dalam proyek bersama. Mereka
adalah platform online yang menggunakan Git untuk
mengelola proyek-proyek pengembangan software.

7.3. Alat Pengujian dan Debugging

● Alat Pengujian:
Alat pengujian digunakan untuk memeriksa apakah semua
bagian website berjalan dengan benar.
Contoh: Jasmine untuk JavaScript, Selenium untuk pengujian
browser otomatis.
Fungsi: Memastikan website bekerja sesuai harapan di
berbagai kondisi dan browser.
● Alat Debugging:
Alat debugging adalah seperti detektif yang membantu kita
menemukan dan memperbaiki kesalahan dalam kode.
Browser modern seperti Chrome dan Firefox memiliki built-in
developer tools untuk debugging.

Halaman 9 dari 10
7.4. Frameworks dan Libraries

Frameworks dan libraries adalah seperti katalog desain yang

memberikan kita komponen dan pola desain siap pakai.
Frameworks memberikan struktur dan pola untuk membangun
aplikasi, sementara libraries menyediakan kumpulan fungsi spesifik.
Contoh Frameworks: React, Angular, dan Bootstrap untuk front-end,
Express.js untuk Node.js.
Contoh Libraries: jQuery, Lodash.

Halaman 10 dari 10