# To'liq web mini-loyiha rejasi
> HTML, CSS, JavaScript, API, autentifikatsiya, baza, test va deployni bitta vazifalar ilovasi rejasida bog'lang; tayyorlik mezonlari bilan yakunlang.
Manba: https://learncode.uz/web-dasturlash/toliq-web-loyiha/
Sana: 2026-05-14
*To'liq loyiha alohida texnologiyalar yig'indisi emas, talabdan deploygacha tekshiriladigan bitta ish oqimidir.*
[Takrorlash darsi](https://learncode.uz/web-dasturlash/takrorlash) tizim qismlarini tanishtirdi.
Bu dars esa uni amalda qurish tartibini beradi.
Maqsad: foydalanuvchi ro'yxatdan o'tib, faqat **o'z** vazifalarini
boshqaradigan sodda ilova. Bu vazifa ataylab kichik tanlangan — u yerda web
dasturlashning deyarli barcha asosiy tushunchasi uchraydi, lekin oylab vaqt
olmaydi. Katta g'oya bilan boshlangan birinchi loyiha ko'pincha yarim yo'lda
qoladi; kichik, lekin oxiriga yetkazilgan ish esa ancha ko'p narsa o'rgatadi.
## Avval talabni yozing
Kod yozishdan oldin bir varaqda javob bering: ilova kim uchun, u qanday
muammoni hal qiladi va "tayyor" degani nima?
Birinchi versiya uchun minimal talab shunday bo'lishi mumkin:
- Foydalanuvchi ro'yxatdan o'tadi va tizimga kiradi.
- Vazifa qo'shadi, uni bajarilgan deb belgilaydi va o'chiradi.
- Faqat o'zining vazifalarini ko'radi.
- Bo'sh ro'yxat, xato va yuklanish holatlari tushunarli ko'rsatiladi.
Bu ro'yxatga kirmagan hamma narsa — kategoriya, muddat, izoh, hamkorlik —
alohida ro'yxatga yoziladi va **birinchi versiyani to'xtatmaydi**. Bu odat
loyihani oxiriga yetkazishning eng muhim sharti.
## Loyihani qurish
### Bosqichlar
| Bosqich | Natija | Tekshiruv |
|---|---|---|
| 1. HTML/CSS | Semantik, responsive vazifalar ekrani | Klaviatura, fokus, mobil ekran |
| 2. JavaScript | Forma holati, loading va xato xabari | Bo'sh va noto'g'ri kiritish |
| 3. API | `GET`, `POST`, `PATCH`, `DELETE` endpointlar | Networkdagi status, JSON, xato kontrakti |
| 4. Baza | Foydalanuvchi va vazifa modeli | Egasi bilan bog'lanish, validatsiya |
| 5. Auth | Login hamda ruxsat tekshiruvi | Boshqaning vazifasi o'zgarmaydi |
| 6. Sifat | Unit/integration/E2E asoslari | Asosiy foydalanuvchi oqimi |
| 7. Deploy | Production release | Smoke test, log, monitoring |
Tartib muhim: har bosqich oldingisiga tayanadi. Auth'ni bazadan oldin yozish
yoki testni deploydan keyin qoldirish ishni murakkablashtiradi.
### Ma'lumot modeli
Ikki jadval yetarli. Eng muhim qism — ular orasidagi bog'lanish:
| Jadval | Maydonlar |
|---|---|
| `users` | `id`, `email`, `parol_xesh`, `yaratilgan_vaqt` |
| `tasks` | `id`, `user_id`, `matn`, `bajarildi`, `yaratilgan_vaqt` |
`tasks.user_id` — butun xavfsizlik modelining tayanchi. Har so'rovda server
"bu vazifa shu foydalanuvchinikimi?" degan savolga javob berishi kerak.
> **Eng ko'p uchraydigan xato**
>
> `GET /api/vazifalar/15` so'rovida faqat `id` bo'yicha qidirib, natijani
> qaytarish — jiddiy zaiflik. Foydalanuvchi raqamni almashtirib boshqaning
> ma'lumotini ko'radi. So'rov har doim `id` **va** `user_id` bo'yicha
> cheklanishi kerak. Batafsil:
> [web xavfsizligi](https://learncode.uz/web-dasturlash/amaliy-web-xavfsizligi).
### API shartnomasi
```text
GET /api/vazifalar
POST /api/vazifalar
PATCH /api/vazifalar/:id
DELETE /api/vazifalar/:id
```
Har endpoint uchun muvaffaqiyatli natija bilan birga xato holatlarini ham
oldindan belgilang:
| Kod | Qachon | Javob |
|---|---|---|
| `200` / `201` | Amal bajarildi | Vazifa yoki ro'yxat |
| `400` | Matn bo'sh yoki juda uzun | Qaysi maydon xato ekani |
| `401` | Login qilinmagan | Umumiy xabar |
| `403` | Begona vazifa | Umumiy xabar |
| `404` | Bunday vazifa yo'q | Umumiy xabar |
Xato javobining shakli ham bir xil bo'lsin — masalan, doim `{ "xato": "..." }`.
Shunda frontend har endpoint uchun alohida mantiq yozmaydi.
*Bitta "vazifa qo'shish" amali butun zanjirdan o'tadi — shuning uchun u
yaxshi o'quv misoli.*
### Texnologiya tanlash
Bu loyihani deyarli har qanday backend tili bilan qurish mumkin. Tanlovda
uchta savol yordam beradi: qaysi tilda o'zingizni erkin his qilasiz, uning
hujjatlari va misollari yetarlimi, va bepul hostingda ishga tushirish osonmi?
Boshlovchi uchun keng tarqalgan uch yo'l bor. Python bilan dastur mantig'i
sodda va o'qilishi oson. JavaScript frontend bilan bir tilda ishlash imkonini
beradi. PHP esa arzon hostingda tez ishga tushadi.
Ma'lumotlar bazasida ham murakkablik qidirmang. Kichik loyiha uchun SQLite
yetarli: alohida server talab qilmaydi, bitta fayl sifatida saqlanadi va
keyinchalik PostgreSQL'ga o'tish qiyin emas, chunki
[SQL](https://learncode.uz/sql/sql-nima) tili asosan bir xil qoladi.
Muhimi — texnologiya tanlashga bir haftadan ko'p vaqt sarflamaslik. Ishlaydigan
loyiha "eng to'g'ri" texnologiyadan ko'ra ko'proq narsa o'rgatadi.
### Frontend holatlarini unutmang
Interfeys faqat muvaffaqiyatni ko'rsatsa, u tayyor emas. Kamida to'rt holat
kerak:
- **Yuklanmoqda** — so'rov ketdi, javob kutilmoqda.
- **Bo'sh** — ro'yxat bo'sh; "hali vazifa yo'q, birinchisini qo'shing".
- **Xato** — nima bo'ldi va endi nima qilish kerak.
- **Muvaffaqiyat** — ma'lumot ko'rsatildi.
Bo'sh holat ayniqsa muhim: yangi foydalanuvchi ilovani birinchi marta aynan
shunday ko'radi.
Yana bir tafsilot — amal bajarilgandan keyin javob berish. Foydalanuvchi
"qo'shish" tugmasini bosgach, natijani darhol ko'rishi kerak. Server javobini
kutib turgan bo'sh ekran ilova qotib qolgandek taassurot qoldiradi. Eng sodda
yechim: tugmani vaqtincha o'chirib qo'yish va "qo'shilmoqda..." yozuvini
ko'rsatish.
## Ishni kichik qismlarga bo'ling
Loyihani ettita kichik sessiyaga bo'lish mumkin. Har sessiya oxirida
**ishlaydigan** natija bo'lsin:
1. Statik HTML/CSS ekrani, ma'lumot qo'lda yozilgan.
2. JavaScript bilan vazifa qo'shish (hozircha faqat brauzer xotirasida).
3. `GET` va `POST` endpointlari, baza bilan ulash.
4. `PATCH` va `DELETE`, xato holatlari.
5. Ro'yxatdan o'tish va login.
6. Ruxsat tekshiruvi va asosiy testlar.
7. Deploy, smoke test va log.
Bu tartibning afzalligi — har kuni ko'rinadigan natija olasiz. Bir kunda
butun tizimni yozishga urinish odatda yarim tayyor loyiha bilan tugaydi.
### Testni qayerdan boshlash
To'liq test qamrovi bu loyihaning maqsadi emas. Lekin bir nechta test
o'zgarish kiritganingizda ishonch beradi.
Uch darajadan bittadan boshlang. **Unit test** eng kichik mantiqni tekshiradi:
masalan, vazifa matni bo'sh yoki juda uzun bo'lsa validatsiya rad etadimi.
**Integration test** API va bazani birga sinaydi: `POST` yuborilganda yozuv
haqiqatan qo'shildimi va u to'g'ri foydalanuvchiga bog'landimi. **E2E test**
esa brauzerda asosiy yo'lni bosib o'tadi: login, vazifa qo'shish, belgilash,
chiqish.
Eng qimmatli birinchi test — ruxsat tekshiruvi. Ikkinchi foydalanuvchi begona
vazifani o'zgartira olmasligini avtomatik sinang. Bu xato eng xavflisi va uni
qo'lda har safar tekshirish oson unutiladi.
Batafsil yondashuv [web testing](https://learncode.uz/web-dasturlash/web-testing) darsida.
## Yakunlash
### Tayyorlik mezoni
> **Definition of done**
>
> Funksiya "ko'rinishi" yetarli emas. U talabga mos, klaviatura bilan
> ishlaydigan, serverda tekshirilgan, xato holati tushunarli, testdan o'tgan va
> deploydan keyin smoke test qilingan bo'lishi kerak.
Loyihani yakunlashdan oldin quyidagilarni o'zingiz tekshiring:
- Faqat klaviatura bilan vazifa qo'shib, belgilab va o'chira olasizmi?
- Ikkinchi foydalanuvchi yaratib, birinchisining vazifasini ko'ra olmasligiga
ishonch hosil qildingizmi?
- Internetni uzib, ilova qanday xabar berishini ko'rdingizmi?
- Juda uzun matn va bo'sh matn kiritganda nima bo'ladi?
- Sahifani yangilaganda holat saqlanadimi?
### Loyihani ko'rsatishga tayyorlash
Bu loyiha portfolio uchun ham foydali. Buning uchun kodning o'zi yetarli emas —
uni boshqa odam tushunishi kerak.
Omborga qisqa `README` qo'shing va unda to'rt savolga javob bering: ilova
qanday muammoni hal qiladi, qanday ishga tushiriladi, qaysi texnologiyalar
tanlangan va nega, hamda qaysi chekka holatlar tekshirilgan. Bir-ikki
skrinshot yoki qisqa yozuv ham qiymatni tez ko'rsatadi.
Commit tarixi ham hikoya qiladi. Bitta ulkan "loyiha qo'shildi" commit'i
o'rniga bosqichma-bosqich, izohli commitlar ish uslubingizni ko'rsatadi.
`.env` faylini esa hech qachon omborga qo'shmang — buni
[Git workflow](https://learncode.uz/web-dasturlash/git-github-workflow) darsida ko'rgan edik.
## Keyingi qadam
Birinchi versiya ishlagach, ro'yxatga yozib qo'ygan g'oyalardan **bittasini**
tanlang: kategoriya, muddat yoki qidiruv. Uni ham talab, API shartnomasi va
test bilan birga qo'shing — xuddi birinchi versiyadagidek tartibda.
Bu loyihani tanlangan backend tili bilan qurishingiz mumkin. Frontendga yangi
bo'lsangiz avval [HTML/CSS](https://learncode.uz/html-css/html-nima), dastur mantig'i uchun esa
[Python](https://learncode.uz/python/python-nima) bilan mustahkam poydevor yarating.
## Qisqacha xulosa
- Avval talabni bir varaqda yozing; qolgan g'oyalar alohida ro'yxatga.
- `tasks.user_id` — butun xavfsizlik modelining tayanchi.
- Har endpoint uchun xato holatlarini oldindan belgilang.
- Interfeys to'rt holatni ko'rsatsin: yuklanmoqda, bo'sh, xato, muvaffaqiyat.
- Ettita kichik sessiya — har birida ishlaydigan natija.
- "Tayyor" degani ko'rinishi emas: test, ruxsat va smoke testdan o'tgani.
Keyingi darsda [web yo'nalishlari](https://learncode.uz/web-dasturlash/web-yonalishlari) — barcha
tushunchalarni kasbiy yo'nalishlar va o'rganish tartibi bilan bog'laymiz.