Belajar Dasar Pemrogaman Web Secara Terstrukur (Modul 1 : Pengenalan Kelas)

Hai teman-temen, sudah lama saya tidak menulis di blog. Anyway ini blog baru setelah blog-blog aku yang sebelumnya hilang entah kemana. Tapi yang jelas sekarang aku cuman organizer 3 blog saja yah, idea, learning & satunya blog pribadi.

Okay, kali ini aku mau berbagi tentang "Belajar Dasar Pemrogaman Web". Sebenarnya dari dulu aku pengen banget belajar tentang materi ini, tapi tidak tahu kenapa susah sekali untuk menentukan materinya. Darimana aku mau mulai, dan alhamdulillah sekarang aku dikasih kesempatan untuk belajar tentang pemrogaman web sekarang dan ini dari "DICODING". Oke tanpa basa basi, aku mau kasih tahu dulu tentang silabusnya, berikut silabus dari Dasar Pemrogaman Web.

Modul 1: Pengenalan Kelas

1. Apa itu Website?
2. Server dan Client
3. Anatomi Website
4. Apa yang Akan Kita Pelajari?
5. Requirement Tools

Modul 2: Introduction HTML

1. Membuat berkas HTML Pertama
2. Struktur Dasar HTML
3. Identifikasi Elemen pada Halaman Website

Modul 3: More About HTML

1. Atribut HTML
2. Paragraf
3. Heading
4. List
5. Menambahkan List pada Halaman Profil
6. Gambar
7. Menambahkan Gambar pada Halaman Profil
8. Teks Terformat
9. Inline Formatting Text - Bagian 1
10. Inline Formatting Text - Bagian 2
11. Menerapkan Anchor pada Navigasi Halaman Profil
12. Semantic HTML - Mengorganisasikan Halaman Konten
13. Header, Footer, dan Nav
14. Articles, Aside, dan Section
15. Generic Element
16. Mengorganisasikan Konten pada Halaman Profil
17. Menetapkan Elemen Header, Main, dan Footer
18. Menggunakan Div, Aside, Article, dan Section pada Konten
19. Table
20. Struktur Dasar Sebuah Tabel
21. Spanning Cell
22. Elemen dan Atribut pada Tabel
23. Menerapkan Elemen Tabel pada Halaman Profil
24. Special Character

Modul 4: Introduction to Styling

1. Keuntungan dan Cara Kerja CSS
2. Memberikan Markup pada Dokumen
3. Menuliskan Aturan Styling
4. Melampirkan Styling pada Dokumen HTML
5. Menerapkan Styling Dasar pada Halaman Profil
6. Membuat Berkas CSS
7. Menulis Rules pada Berkas CSS
8. Menghubungkan Berkas CSS dengan HTML
9. CSS Conception

Modul 5: More About Styling

1. More about Selector: Selector Basic - Bagian 1
2. Selector Basic - Bagian 2
3. Combinators - Bagian 1
4. Combinators - Bagian 2
5. Pseudo Selector
6. Formatting Text (Text and Font Styling)
7. Font Styling - Bagian 1
8. Font Styling - Bagian 2
9. Text Styling - Bagian 1
10. Text Styling - Bagian 2
11. Menerapkan Font Styling pada Halaman Profil
12. Menggunakan Font dari Google Font
13. Menetapkan Ukuran, Ketebalan, dan Perataan Teks pada Halaman Profil
14. Color
15. Menetapkan Nilai Warna
16. Text dan Background Color
17. Box Model
18. Box Element
19. Box Dimensions
20. Border
21. Padding
22. Margin
23. Centering Content
24. Display Roles
25. Box Shadow
26. Rounded Corner
27. Menerapkan Box Model pada Halaman Profil
28. Menetapkan ukuran pada gambar
29. Menerapkan Card Style pada Elemen Article
30. Menerapkan Jumbotron dan Navigasi pada Header
31. Menyesuaikan Padding dan Margin pada Body dan Elemen Main
32. Positioning
33. Perbedaan Static Flow dan Non-Static Flow
34. Normal Flow
35. Relative Positioning
36. Absolute Positioning
37. Fixed Positioning
38. Floating
39. Permasalahan Penerapan Float
40. Clear Property
41. Teknik Overflow  
42. Menerapkan Positioning dan Float pada Halaman Profil  
43. Menetapkan Float pada Content dan Aside
44. Menambahkan meta tag viewport
45. Media Query
46. Membuat Sticky Navigation

Modul 6: Responsive Layout menggunakan Flexbox

1. Flexible Box Model
2. Flex Container
3. Flex Grow
4. Flex Direction
5. Flexible Basis
6. Membuat Layout Kalkulator : Membuat Struktur HTML kalkulator
7. Menerapkan Flexbox pada Halaman Kalkulator
8. Mempercantik tampilan kalkulator
9. Responsibilitas pada Tampilan Mobile

Modul 7: JavaScript And DOM

1. Menuliskan Syntax Javascript pada HTML
2. Membuat Berkas JavaScript Pertama
3. Dasar JavaScript
4. Statement
5. Comment
6. Variabel
7. Tipe Data
8. Arrays dan Objek
9. Operator Penugasan
10. Operator Komparasi
11. If/Else Statement
12. Loop
13. Function
14. Variabel Scope
15. Browser Object
16. Manipulasi DOM
17. Mendapatkan Elemen
18. Memanipulasi Element - Bagian 1
19. Memanipulasi Element - Bagian 2
20. Memanipulasi Element - Bagian 3
21. Memanipulasi Element - Bagian 4
22. Menerapkan JavaScript pada Web Kalkulator

Modul 8: Web Storage

1. Tipe Web Storage
2. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 1
3. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 2
4. Menambahkan Riwayat Kalkulasi pada Web Kalkulator - Bagian 3

Oke guys, itulah silabus dari 8 modul. Dan sekarang mari kita belajar mulai dari modul pertama.

Modul 1: Pengenalan Kelas

1. Apa itu Website?

Website adalah sebuah halaman yang menampilkan informasi melalui teks atau gambar. Website dapat diakses melalui internet menggunakan browser. Website ini unik karena tiap halaman dapat saling terhubung dengan menggunakan hypertext links. Umumnya sebuah website memuat informasi yang disediakan secara perorangan, kelompok, atau organisasi. Semua informasi yang tersedia pada halaman website disimpan pada server.

Website sudah berkembang sangat pesat. Sekarang, website digunakan tidak hanya untuk media berbagi informasi atau berita. Layaknya sebuah aplikasi pada komputer dan handphone kita, website dapat digunakan untuk komunikasi secara real-time, mendengarkan sebuah lagu, bahkan photo editing sekarang dapat dilakukan pada sebuah website.

Memanfaatkan website sebagai alat editing photo. https://pixlr.com/

Website sendiri merupakan teknologi yang sudah ada sejak 30 tahun silam. Tim Berners-Lee seorang ilmuwan Inggris menemukan World Wide Web (WWW) pada tahun 1989 ketika ia bekerja di CERN (Conseil Européen pour la Recherche Nucléaire). Web awalnya 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 website: info.cern.ch” untuk mengabadikan website pertama di dunia. Thank you CERN! Thank you Tim Berners-Lee!

Website pertama yang dibuat, kita bisa mengeksplor nya di http://info.cern.ch

2. Server dan Client

Web Server
Seperti yang sudah disebutkan sebelumnya, informasi pada sebuah website disimpan pada server. Lantas apa itu server? Banyak yang mengira bahwa server adalah sebuah komputer dengan performa tinggi dan berukuran besar. Hal tersebut tidak salah karena biasanya komputer yang dijadikan server memang harus memiliki performa yang tinggi. Selain untuk menyimpan data (HTML, CSS, dan JS disimpan di sini), server juga harus melakukan pekerjaan yang cukup berat, yaitu menanggapi, menyediakan, dan mengelola data yang diminta oleh client. Tidak hanya satu client, namun bisa ratusan bahkan ribuan.

Tetapi pengertian server sebenarnya lebih merujuk pada sebuah software yang dapat menghubungkan sebuah komputer dengan komputer lain. Jadi penekanan sebuah server bukan pada sebuah komputernya, melainkan pada rule atau fungsi dari sebuah komputer tersebut.

HTTP Server
HTTP Server merupakan sebuah software yang dapat menerima transaksi dari HyperText Transfer Protocol dalam suatu website atau biasa disebut dengan “HTTP Server”. Banyak software yang dapat melakukan tugas tersebut. Apache adalah salah satunya yang cukup friendly, gratis, dan tersedia untuk seluruh komputer dengan basis UNIX (termasuk MacOS) dan juga Windows.

DNS Server
Setiap perangkat baik komputer, smartphone, modem, maupun router yang terkoneksi internet akan memiliki IP Address. Contohnya, komputer yang menjadi host dari dicoding.com memiliki IP 104.28.20.105, Jika kita menggunakan IP tersebut untuk mengakses sebuah website, tentu akan repot. Mengingat kumpulan angka memang dapat seorang manusia lakukan, tapi bagaimana jika harus mengingat 10 IP? Untuk mengatasinya, dibuatlah Domain Name System (DNS) yang dapat mengubah/mengarahkan website melalui sebuah nama domain (“dicoding.com”).

Client
Jika ada penyedia (server) tentu ada pengguna bukan? Perangkat yang meminta (request) suatu layanan tertentu ke suatu server disebut dengan client. Browser merupakan salah satu client yang memanfaatkan HTTP Server dalam transaksi datanya. Jelas, tujuannya adalah untuk mengolah, menampilkan, dan melakukan interaksi dengan dokumen yang disediakan oleh web server. Layaknya sebuah pelukis, browser mampu menyajikan informasi dalam bentuk visual yang indah bersumber dari data mentah yang diperoleh dari server.

Server-side dan Client-side
Dalam pengembangan web, terdapat istilah “Client-Side” atau “Server-side”. Hal ini merujuk pada sebuah proses yang dilakukan pada sisi client atau di sisi server. Untuk client side, semua proses terjadi di sisi pengguna, client meminta data ke server di mana data yang dikirimkan nanti diolah di sisi client. Biasanya data yang diolah dalam bentuk HTML, CSS, dan JavaScript.

Sedangkan untuk server side, semua proses yang terjadi dilakukan di sisi server. Server side bertanggung jawab untuk merespon data yang diminta oleh client side. Biasanya server side merupakan tempat di mana terjadinya interaksi pada database, sehingga sisi client tidak mengetahui prosesnya dan memang tidak boleh tahu. Client hanya diberikan sebuah data hasil olahan dari sisi server.

3. Anatomi Website

Kita terbiasa dengan tampilan website yang nampak pada browser, tetapi apakah kalian tahu bagaimana website dapat tampil demikian? Terdapat 3 (tiga) fondasi penting dalam membuat website. Pertama adalah HTML, salah satu markup language yang digunakan untuk membuat struktur dan menampilkan konten pada World Wide Web (Website). CSS dan JavaScript merupakan fondasi lainnya yang digunakan untuk mempercantik dan menjadikan website lebih dinamis dan interaktif.

Main idea: https://www.freecodecamp.org/news/learn-html-in-5-minutes-ccd378d2ab72/

Sama seperti halnya tubuh manusia yang disusun dari kerangka tulang, HTML pada website berperan sebagai kerangka dasar yang digunakan dalam menampilkan visual pada website. Tapi jika hanya sebatas kerangka, seorang manusia akan terlihat menyeramkan dan aneh bukan? Maka dari itu untuk mempercantik tampilannya kita membutuhkan sebuah kulit. Di sinilah peran CSS. Setelah memiliki kulit dan nampak cantik, selanjutnya kita membutuhkan sebuah otak dan otot agar seorang manusia dapat dinamis dan berinteraksi. Dalam website JavaScript-lah yang berperan dalam membuat website yang dinamis dan interaktif.

Bagaimana Website bekerja?
Ketika kita mengunjungi dicoding.com, tentu kita membutuhkan sebuah koneksi internet, karena website memerlukan sebuah web server hosting yang dapat diakses di mana saja. Ketika kita menuliskan “dicoding.com” dan menekan enter pada browser, hal yang pertama dilakukan browser adalah menghubungi Domain Name System (DNS) server untuk mengarahkan ke alamat server. Kemudian browser mengirimkan sebuah permintaan (request) agar server mengirimkan salinan dari informasi yang nantinya ditampilkan pada client (browser). Jika request tersebut berhasil, maka server menanggapi (response) permintaan tersebut dan mulai mengirimkan salinan yang dibutuhkan secara berangsur. Browser menggabungkan bagian-bagian informasi yang diperoleh untuk kemudian tampil di jendela browser.


Untuk menampilkan informasi pada jendela, browser menggunakan HTML dan CSS yang dikirimkan dari server. Dengan begitu, informasi dalam bentuk HTML dan CSS-lah yang dikirimkan server untuk client (browser). Beberapa halaman website juga membutuhkan informasi ekstra seperti berkas gambar, suara atau video, tetapi berkas tersebut sebenarnya hanya ditanamkan (embed) pada HTML. Dan beberapa halaman website sebenarnya juga membutuhkan JavaScript untuk me-render HTML atau CSS agar dapat menampilkan informasi secara dinamis.

4. Apa yang Akan Kita Pelajari?

Setelah mengetahui tentang anatomi dan bagaimana website bekerja, pada kelas ini kita akan banyak mempelajari dasar HTML, CSS, dan JavaScript yang menjadi inti dari pengembangan website.

Pada modul 2 dan 3 kita akan mempelajari rangkaian penggunaan HTML pada website. Mulai dari pembuatan berkas HTML, mengenal dan menggunakan elemen, serta menampilkan gambar dan penyusunan layout. Kemudian pada modul 4 dan 5 kita akan mempelajari penerapan styling pada website untuk mempercantik dan membantu dalam penyusunan website. Sampai modul ini, kita akan membuat sebuah halaman website yang menarik.


Pada modul 6, kita akan belajar bagaimana cara menyusun layout yang responsif menggunakan flexbox. Selain itu juga terdapat praktik membuat sebuah layout dasar kalkulator pada website.

Sedangkan JavaScript akan dibahas pada modul 7. Di  sana kita akan belajar dasar-dasar dari bahasa pemrograman JavaScript, pengenalan syntax, penggunaan variabel, tipe data yang ada, iterator, dll. Selain itu kita juga akan belajar bagaimana cara memanipulasi “DOM” dengan menggunakan JavaScript sehingga dapat membuat website yang interaktif.

Pada modul 8, kita akan mempelajari cara mengelola sebuah data atau objek pada local storage ataupun session storage dengan memanfaatkan Web Storage. Sampai modul ini, kita akan membuat sebuah proyek kalkulator sederhana dengan memanfaatkan Web Storage untuk menyimpan histori perhitungannya.

calc

Dan pada akhir pembelajaran, untuk lulus dari kelas ini, terdapat submission alias proyek akhir yang harus Anda kirimkan. Proyek tersebut akan kemudian kami review guna menentukan kelulusan Anda.

Sudah siap belajar dasar pemrograman website? Sebelum memulainya mari kita persiapkan beberapa tools yang akan digunakan pada kelas ini.

5. Requirement Tools

erdapat tools yang harus kita siapkan sebelumnya untuk mengikuti kelas ini, yaitu Text Editors dan Browser.

Text Editors
Dalam mengembangkan sebuah website, tentu kita akan banyak menuliskan sebuah kode HTML, CSS, maupun JavaScript. Maka dari itu, langkah awal yang harus kita siapkan adalah sebuah text editor. Beberapa sistem operasi sebenarnya sudah menyediakan text editor usungannya sendiri. Contohnya Windows memiliki Notepad, Linux memiliki Text Editors dan Macintosh memiliki TextEdit. Ketiga aplikasi tersebut bisa kita gunakan untuk belajar membuat sebuah website, meskipun masih banyak alternatif text editor lainnya selama masih dapat menyimpan sebuah plain text dengan format .html.

Perlu diperhatikan bahwa kode yang kita tuliskan merupakan sebuah plain text. Pastikan kita menggunakan text editor yang tepat. Jangan pernah menggunakan Microsoft Word untuk menuliskan sebuah kode, karena aplikasi tersebut menampilkan teks yang telah diformat atau biasa disebut dengan rich text.

Selain text editors usungan sistem operasi yang kita gunakan, berikut tiga text editor lainnya yang bisa kita gunakan untuk membuat sebuah website.

a. Visual Studio Code

Visual Studio Code

Visual Studio Editor merupakan sebuah text editor yang dikembangkan oleh Microsoft. Dalam text editor ini terdapat fitur debugging, Git control, syntax highlighting, code completion, snippets, dan code refactoring. Visual Studio Code tersedia untuk sistem operasi Windows, Mac maupun Linux, dan tentunya text editor ini bisa kita gunakan secara gratis. Untuk mengunduhnya silakan kunjungi website berikut: https://code.visualstudio.com/

b. Atom Editor

Atom Editor

Atom merupakan text editor gratis dan juga open source untuk Windows, Linux, dan MacOS. Sama seperti Visual Studio Editor, kedua text editor ini merupakan editor yang populer digunakan oleh web developer. Untuk mengunduhnya, silakan kunjungi website berikut: https://atom.io/

c. EMACS

emac

Editor ini mungkin tidak secanggih opsi-opsi sebelumnya dalam menuliskan kode HTML, CSS, dan JavaScript. Namun, jika kalian tertarik belajar melalui proses tanpa fitur yang mempermudah kita dalam menuliskan sebuah kode, maka text editor ini cocok untuk dicoba. Emacs memiliki fitur yang tidak disangka-sangka untuk sebuah text editor, seperti news reader, kalkulator, dan fitur untuk enkripsi/dekripsi file. Emacs tersedia untuk Windows, Macs, maupun Linux secara gratis. Untuk mencobanya, kalian bisa mengunjungi halaman website berikut: https://www.gnu.org/software/emacs/

Browser

Seperti yang sudah kita ketahui, untuk mengakses website membutuhkan sebuah browser. Tentu untuk mengembangkan website juga diperlukan sebuah browser untuk melihat seperti apa tampak website yang sedang kita kembangkan. Kita bisa menggunakan browser apa pun untuk mengunjungi sebuah website, tetapi hasil yang ditampilkan mungkin dapat berbeda pada di setiap browser. Walaupun tampilan pada setiap browser berbeda, pada kelas ini kalian tidak perlu mencobanya satu per satu untuk melihatnya pada masing - masing browser. Kami sarankan Anda untuk menggunakan browser yang populer yaitu Google Chrome atau Mozilla Firefox. 

Seperti text editor, sebenarnya sistem operasi sudah mempunyai browser usungannya masing-masing, misal Microsoft Edge di Windows dan Safari di MacOS. Akan tetapi kedua browser tersebut tidak memiliki fitur developer tools atau Dev Tools seperti yang dimiliki oleh Google Chrome dan Mozilla Firefox.

Developer Tools atau Dev Tools merupakan alat yang dapat digunakan untuk melakukan debugging pada sebuah website. Dev Tools ini merupakan tools yang andal dalam mencari suatu bugs dan memperbaikinya. Bahkan kita dapat mensimulasikan tampilan website pada sebuah layar smartphone, sehingga tak perlu repot-repot memakai smartphone untuk melihat responsibilitas website yang kita kembangkan.