Artikel ini menerangkan pembangunan web dengan mengkaji permulaan dan evolusinya. Ia bukan kronik tentang evolusi web tetapi lebih kepada sejarah keperluan yang membawa kepada evolusi web, untuk lebih memahami teknologi ini.
Semuanya bermula dengan maklumat. Manusia sentiasa perlu mencari cara untuk berkongsi maklumat. Seperti yang anda tahu, sebelum Internet, maklumat telah bertukar melalui surat, surat khabar, radio dan televisyen.
Cara komunikasi ini mempunyai banyak kelemahan: inilah yang telah membolehkan Internet memaksakan dirinya.

Artikel itu akan diterbitkan dalam dua bahagian :

1. Bahagian pelanggan: seni bina halaman dan gaya
2. Bahagian pelayan: borang dan pangkalan data

Mari kita mulakan dengan apa yang berlaku di pihak pelanggan.
 

Bahagian I

Bahagian pelanggan: seni bina halaman dan gaya 

 

1. Apakah web itu?

Bayangkan anda boleh menerbitkan maklumat yang boleh diakses oleh semua orang dan boleh dibaca oleh sesiapa yang berminat dengan maklumat ini? Inilah yang dibenarkan oleh web. Maklumat ini disimpan pada pelayan web, dan orang ramai boleh membaca maklumat ini menggunakan klien (pelayar web). Ini dipanggil "seni bina pelayan-klien". 
Mengapa HTTP?
Anda mungkin pernah melihat empat huruf ini dalam bar URL penyemak imbas anda. Mereka maksudkan Protokol Pemindahan Hiperteks. Secara harfiah: "protokol pemindahan hiperteks". Oleh itu HTTP ialah protokol komunikasi pelanggan-pelayan yang digunakan khusus untuk web.
Pada mulanya, maklumat itu direkodkan hanya dalam format teks — inilah sebabnya namanya Protokol Pemindahan Hiperteks kekal walaupun, kini, format maklumat yang berbeza (teks, media, fail, dll.) ditukar melalui protokol ini.
HTTPS, Protokol Pemindahan Hyper-Teks Dijamin, ialah versi selamat HTTP.
 

2. Bagaimanakah maklumat disimpan, diperoleh dan disandarkan?

HTML
Fail HTML ialah cara paling mudah dan tahan lama untuk menyimpan maklumat di web. Untuk lebih memahami, mari kita ambil contoh syarikat menerbitkan harganya dalam bentuk senarai produk (dengan harga dan tarikh sah), supaya pembekalnya boleh memuat turun dan/atau melihatnya. Senarai ini disimpan dalam fail HTML, diletakkan pada pelayan, dan ia boleh dilihat menggunakan pelayar web. Penyemak imbas meminta fail ini daripada pelayan (permintaan), pelayan menyediakannya dan menutup sambungan.
HTML ialah bahasa markup standard yang digunakan untuk membuat halaman web. Secara konkrit, ia adalah fail teks ringkas, dengan suar (tag) yang membantu penyemak imbas memahami cara memaparkan maklumat.
 

 

 
CSS
CSS (Cascading Style Sheets) ialah bahasa gaya yang digunakan untuk menerangkan pembentangan dokumen yang ditulis dalam bahasa penanda. HTML membolehkan anda melakukan reka letak asas, tetapi lebih baik menggunakan CSS untuk menggunakan gaya yang lebih kompleks dan canggih. 
Aplikasi web mengandungi banyak halaman, dinamik atau statik. Jika kami menggunakan teg HTML untuk menggayakan maklumat, kami perlu mengulanginya pada semua halaman. Bayangkan bahawa kami ingin menukar warna latar belakang: kami kemudiannya perlu mengedit HTML setiap halaman tapak.
Sebaliknya, kami boleh menggunakan CSS untuk menyimpan takrif gaya kami di satu tempat, dan merujuknya dalam setiap halaman HTML. Dengan mengedit fail CSS, kami akan menukar warna latar belakang pada semua halaman yang menghala ke helaian gaya ini.
Sudah tentu, CSS membolehkan anda melakukan lebih daripada memberi warna latar belakang: ia membolehkan anda menukar warna semua jenis elemen, fon, susun atur... Dan banyak lagi!
Kami meletakkan gaya CSS pada contoh kami yang terdahulu. Katakan kita menggunakan jadual pada halaman yang berbeza, tetapi kesemuanya menggunakan gaya CSS yang sama. Oleh itu, kita boleh memindahkan semua definisi gaya ini ke dalam fail yang berasingan.
Gaya CSS sentiasa dipanggil di bahagian atas dokumen HTML, antara tag <kepala>.
 

 

 

 
Di bawah ialah contoh senarai produk di tapak fnac.com.
CSS membolehkan anda mengubah sepenuhnya HTML asas dan membuat reka letak yang kompleks: di sini, jadual produk mengandungi imej berpusat; tajuk dan maklumat lain komik mempunyai gaya yang berbeza yang membolehkan mereka dihierarki; harga berwarna merah dll.
 

 

JavaScript

JavaScript ialah tiang ketiga web bersama HTML dan CSS. Ia digunakan untuk menjadikan laman web interaktif. Untuk memahami JavaScript (JS), anda perlu bermula dengan mengetahui apa itu DOM.
Le Model Objek Dokumen (DOM) ialah antara muka pengaturcaraan piawai yang mengubah dokumen HTML menjadi struktur pokok. Nod setiap dokumen disusun dalam pepohon ini — dipanggil "pokok DOM" (pokok DOM) — yang nod tertingginya dipanggil Objek Dokumen.
 

Petikan daripada pokok DOM (Sumber: Wikimedia Commons)

 
Apabila halaman HTML dipaparkan dalam penyemak imbas, penyemak imbas memuat turun kod HTML ke memori setempat dan mencipta pepohon DOM untuk memaparkan halaman pada skrin.
 Menggunakan JS, kita boleh memanipulasi pokok DOM dalam beberapa cara:

• ubah suai pepohon DOM dengan menambah, mengubah suai dan memadam semua elemen HTML dan atribut halaman;
• tukar semua gaya CSS pada halaman;
• bertindak balas kepada semua acara sedia ada pada halaman;
• buat acara baharu dalam halaman (dan bertindak balas kepada semua acara baharu ini).

Mari teruskan dengan contoh senarai harga kami, menambah lajur lain — Harga Istimewa — yang kandungannya disembunyikan secara lalai. Kami akan menunjukkannya selepas pengguna mengklik butang. Secara teknikal, kami akan menggunakan acara klik (acara klik) dilekatkan pada elemen penambat (tanda sauh) dan tukar teks sedia ada bagi elemen web. Dalam erti kata lain, kita akan memanipulasi DOM. Untuk melakukan ini, kita perlu menggunakan bahasa skrip yang diterima oleh penyemak imbas, iaitu… sentiasa JavaScript.
Untuk maklumat: JavaScript biasanya diletakkan di hujung fail HTML, sejurus sebelum penutupan teg </badan>.
 

 

 

 

 
Di laman web ini fnac.com, butang "Tambah ke troli" muncul apabila melayang di atas produk.
Itu selesai dengan CSS.
Apabila butang diklik, pop masuk muncul (tanpa memuatkan semula halaman):
 

 
Dan itu dilakukan terima kasih kepada JavaScript: acara "klik" telah diletakkan pada butang dan, apabila acara ini dilaksanakan, fungsi yang bertanggungjawab untuk membuka pop-masuk dipanggil.
Mekanisme tambah pada troli diuruskan di bahagian pelayan.
 
# Terjemahan artikel Fahami Pembangunan Web Dalam Kurang 1 JamOleh Shaik Ismail
 
 
 
 

Audrey Guénée, DEV-FRONT @UX-Republic