Web dasturlash nima: frontend va backend

Har kuni ochadigan saytlaringiz — internet-do’kon, ijtimoiy tarmoq, bu darslik — kimdir tomonidan yozilgan. Web dasturlash — internetda ishlaydigan sayt va ilovalar yaratish. U ikki katta qismga bo’linadi: frontend (siz ko’radigan qism) va backend (parda ortidagi qism). Bu darsda ularning farqini ko’ramiz.

Ikki tomon: frontend va backend

Frontend — siz ko’radigan qism

Frontend — saytning brauzeringizda ko’rinadigan qismi: tugmalar, rasmlar, matn, ranglar, menyu. Foydalanuvchi bevosita shu bilan ishlaydi.

Frontend uchta til bilan quriladi:

• HTML — sahifaning tuzilishi (sarlavha, paragraf, tugma).
• CSS — ko’rinishi (rang, o’lcham, joylashuv).
• JavaScript — harakati (tugma bosilganda nima bo’lishi).

Restoran bilan solishtirsak, frontend — zal: stollar, menyu, mijoz ko’radigan hamma narsa.

Backend — parda ortidagi qism

Backend — serverda ishlaydigan, foydalanuvchi ko’rmaydigan qism. U ma’lumotni saqlaydi, hisoblaydi va frontendga uzatadi. Masalan siz parol kiritganda, uni tekshiradigan — backend.

Backend ma’lumotlar bazasi bilan ishlaydi va Python, PHP, Java kabi tillarda yoziladi. Restoran misolida backend — oshxona: mijoz ko’rmaydi, lekin barcha asosiy ish shu yerda bajariladi.

Ular qanday gaplashadi

Frontend va backend so’rov–javob orqali muloqot qiladi:

1. Siz “Kirish” tugmasini bosasiz (frontend).
2. Frontend backendga so’rov yuboradi: “shu login va parol to’g’rimi?”
3. Backend bazadan tekshiradi va javob qaytaradi.
4. Frontend javobga qarab sahifani yangilaydi.

Bu almashinuv har saytda, har soniyada takrorlanadi.

Yo’nalishga kirish

Nimadan boshlash kerak

Web dasturlashni odatda frontenddan boshlashadi, chunki natija ko’zga darrov ko’rinadi — yozgan kodingiz brauzerda shu zahoti aks etadi. HTML va CSS bilan tanishib, keyin JavaScript’ga o’tiladi. Backendni esa Python kabi bir tilni bilib olgach o’rganish qulay.

Frontend va backend o’rtasidagi kelishuv

Frontend hamda backend alohida yozilishi mumkin, ammo ular bir xil ma’lumot qoidasi bo’yicha ishlashi shart. Bu kelishuv API orqali ifodalanadi: frontend qaysi URLga, qaysi metod bilan va qanday ma’lumot yuborishini; backend qanday holat kodi va qanday JSON qaytarishini biladi. Masalan, yangi vazifa qo’shish uchun frontend sarlavhani yuboradi, backend tekshiradi va yaratilgan vazifaning identifikatori hamda holatini qaytaradi.

Kelishuv faqat muvaffaqiyatli holatni qamramaydi. Bo’sh sarlavha yuborilsa nima bo’ladi, login qilinmagan bo’lsa qaysi javob qaytadi, tarmoq uzilsa interfeys nima ko’rsatadi — bular ham oldindan belgilanadi. Shunda foydalanuvchi “hech narsa bo’lmadi” deb qolmaydi, dasturchi esa xatoni qaysi qatlamda izlashini biladi.

Ma’lumotlar bazasi nima uchun kerak?

Ko’p web ilovada ma’lumot server qayta ishga tushganda yo’qolmasligi kerak. Shu sabab foydalanuvchi, vazifa, buyurtma yoki xabarlar ma’lumotlar bazasida saqlanadi. Backend baza bilan ishlaydi, lekin foydalanuvchi brauzeri odatda unga to’g’ridan-to’g’ri ulanmaydi. Bu xavfsizlik va biznes qoidalarini bitta joyda ushlashga yordam beradi.

Masalan, vazifani o’chirishda server avval foydalanuvchi kimligini, so’ng bu vazifa aynan unga tegishliligini tekshiradi. Frontenddagi tugmani yashirish ruxsat nazorati emas; boshqa odam so’rovni qo’lda yuborishi mumkin. Ruxsatni backend tekshirishi shart.

HTTP so’rovini oddiy misolda ko’rish

Brauzer sahifani ochganda GET so’rovi yuboradi. Forma yuborilganda ko’pincha POST ishlatiladi. Server javobidagi 200 yoki 201 muvaffaqiyatni, 400 noto’g’ri kiritishni, 401 login kerakligini, 403 ruxsat yo’qligini, 404 resurs topilmaganini, 500 esa server ichidagi muammoni bildirishi mumkin. Bu kodlarni yodlashdan ko’ra, ular qaysi qatlamda harakat qilishni aytishini tushuning. Har bir kodning to’liq izohi — MDN HTTP status kodlari.

DevTools’dagi Network paneli orqali real so’rovning URLi, metodi, vaqti, headerlari va javobini ko’rish mumkin. Agar server 200 va JSON qaytarsa, ammo ekran bo’sh bo’lsa, muammo frontenddagi state yoki renderda bo’lishi mumkin. So’rov umuman yuborilmagan bo’lsa, forma hodisasi yoki JavaScript tekshiriladi.

Sifat va xavfsizlik

Xavfsizlikning birinchi qoidalari

HTTPS tarmoqdagi almashinuvni himoya qiladi, ammo u noto’g’ri validatsiya, zaif parol yoki ruxsat xatosini o’zi tuzatmaydi. Server barcha kiritishni tekshiradi, parolni ochiq holda saqlamaydi, maxfiy kalitni Gitga yozmaydi va foydalanuvchiga ichki xato tafsilotini ko’rsatmaydi. Cookie, session, token, CORS va XSS kabi mavzular keyin chuqurlashadi, ammo xavfsizlikni “loyiha tugagach” qo’shiladigan bezak deb ko’rmaslik kerak.

Birinchi web mini-loyiha

Boshlanish uchun kontakt formasi yoki vazifalar ro’yxati yetarli. HTML bilan label, input va buttonni semantik yozing. CSS bilan mobil ekranga moslang. JavaScript bilan bo’sh kiritishni tekshirib, loading va xato xabarini ko’rsating. Keyin serverga yuborish yoki vaqtincha brauzer xotirasida saqlash qadamini qo’shing. Har qadamda klaviatura, tor ekran, bo’sh ma’lumot, sekin tarmoq va noto’g’ri javobni sinang.

Qaysi yo’lni tanlash kerak?

Ko’rinadigan interfeys, accessibility va responsive dizayn sizga qiziq bo’lsa, frontenddan boshlang. Ma’lumot, biznes qoidasi, xavfsizlik va API qiziqtirsa, backend yo’lini tanlang. Fullstack ikkalasining ham poydevorini bilishni talab qiladi; uni birinchi nom sifatida emas, ketma-ket o’rganish natijasi deb ko’ring. Har ikki yo’lda Git, debugging, test va deploy odati umumiy.

Mustaqil mashq

Onlayn do’konning “savatga qo’shish” tugmasini tahlil qiling. Foydalanuvchi tugmani bosgandan keyin frontend, HTTP, backend, baza va natija ekrani qanday qatlamlarda ishlashi mumkinligini yozing. Keyin login qilinmagan, mahsulot qolmagan va internet uzilgan uch holatda foydalanuvchiga qanday javob ko’rsatilishini belgilang.

Ish oqimini kuzatish

Web dasturchi muammoni ko’rganida uni qatlamlarga bo’ladi. Sahifa noto’g’ri ko’rinsa, HTML tuzilmasi va CSS qoidasi tekshiriladi. Tugma bosilmasa, Console va JavaScript hodisasi ko’riladi. So’rov xato bersa, Network panelida URL, metod, body hamda holat kodi ochiladi. Server 500 qaytarsa, server logi va biznes qoidasi tekshiriladi. Ma’lumot noto’g’ri bo’lsa, so’rov va baza yozuvi solishtiriladi. Bu usul vaqtni tasodifiy o’zgartirishga emas, sababni toraytirishga sarflaydi.

Accessibility va performance

Sahifa faqat sichqoncha bilan sinab bo’lmaydi. Tab tugmasi bilan asosiy havola, forma va tugmalar bo’ylab yuring; fokus qayerda ekanini ko’ring. Rasm uchun mazmunli alt, forma uchun ko’rinadigan label, rangdan tashqari xato matni kerak. Bu talablar barcha foydalanuvchi uchun aniq interfeys yaratadi.

Performance ham foydalanuvchi tajribasining qismi. Katta rasm o’lchamini moslang, ekranga darrov kerak bo’lmagan rasmni lazy loading bilan yuklang, keraksiz tarmoq so’rovini kamaytiring. Ammo avval o’lchang: Lighthouse, Network yoki haqiqiy qurilmadagi kuzatuv qaysi resurs muammo berayotganini ko’rsatadi. Taxmin asosida hamma narsani optimallashtirish kodni murakkablashtirishi mumkin.

Keyingi qadam

Bu dars umumiy manzara beradi. Brauzer, HTTP, server, API, ma’lumotlar bazasi, autentifikatsiya, test va deploy mavzularini Web dasturlash bo’limida ketma-ket o’rganing. U yerda har qatlam alohida misol va laboratoriya bilan chuqurlashadi.

Jamoaviy mas’uliyat

Frontend va backend alohida odamlar tomonidan yozilsa ham, sifat hammaning vazifasi. Dizayner bilan label va xato matni, backend bilan API kontrakti, tester bilan chekka holat, DevOps bilan environment va deploy qoidalari kelishiladi. Pull requestdagi review shunchaki imlo tekshiruvi emas: talab, xavfsizlik, test, performance va foydalanuvchi holatini yana bir odam ko’rib chiqadigan nuqta.

Kichik shaxsiy loyihada ham bu odatni mashq qiling. O’zgartirishdan oldin nima uchun kerakligini yozing, keyin uni qanday sinaganingizni qayd qiling. Ishlamasa, o’zgarishni kichraytirib sababni toping. Ishlasa, keyingi vazifaga o’ting. Shu izchillik framework nomidan ko’ra uzoqroq saqlanadigan professional ko’nikmadir.

Qisqacha xulosa

Har qatlamni real qurilmada, sekin tarmoqda va xato holatida tekshiring.

Har yangi funksiya uchun foydalanuvchi nima ko’rishi, server nima tekshirishi, ma’lumot qayerda saqlanishi va xato holati qanday boshqarilishini yozib chiqing. Shu to’rtta savol web tizimini alohida ekranlar emas, bog’langan xizmat sifatida ko’rishga yordam beradi.

• Web dasturlash — internetda ishlaydigan sayt va ilovalar yaratish.
• Frontend — foydalanuvchi ko’radigan qism (HTML, CSS, JavaScript).
• Backend — serverdagi yashirin qism: ma’lumot, hisob, mantiq (Python, PHP, Java).
• Ular so’rov–javob orqali gaplashadi; server so’rovlarga javob beradi.
• Ikkalasini biladigan dasturchi — fullstack; boshlash uchun bittasini tanlang.

Keyingi darsda mobil va desktop dasturlash — telefon ilovalari va kompyuter dasturlari qanday yozilishini ko’ramiz.