Ko‘rgazmalar markazi web-saytini yaratish - Информатика и ИТ - Курсовые работы

Информация о документе

Цена	10000UZS
Размер	1.2MB
Покупки	0
Дата загрузки	06 Ноябрь 2026
Расширение	pdf
Раздел	Курсовые работы
Предмет	Информатика и ИТ

Ko‘rgazmalar markazi web-saytini yaratish

Купить

O ‘ZBEKISTON RESPUBLIKASI
OLIY VA O ‘RTA-MAXSUS TA ’LIM VAZIRLIGI
SHAROF RASHIDOV NOMIDAGI
SAMARQAND DAVLAT UNIVERSITETI
MATEMATIKA FAKULTETI
AMALIY MATEMATIKA YO ‘NALISHI
405-GURUH TALABASI
TOSHBEKOV ZARIFJON NING
KOMPYUTER GRAFIKASI VA WEB DIZAYN
FANIDAN
KURS ISHI
Mavzu: Ko ’rgazmalar markazi web- saytini yaratish
Bajardi: Toshbekov Z.Z
Qabul qildi: Ulug ’murodov Sh
Samarqand- 202 5

2
K O ’RGAZMALAR MARKAZI WEB- SAYTINI YARATISH
KURS ISHI MUNDARIJASI
1. Kirish …………………………………………………………… 3
Mavzuning dolzarbligi …………………………………………… 4
Kurs ishi maqsadi va vazifalari ………………………………… ..6
Tadqiqotning predmeti va obyekti ……………………………… .7
2. Nazariy va tahliliy qism ………………………………… ... … ....9
2.1 Ko ’rgazmalar markazi uchun web saytlarning
ahamiyati … ... ……………………………………………………… 9
2.2 Veb dasturlash texnologiyalari: tanlov va taqqoslash ... …… 11
2.3 Frontend va Backend haqida umumiy tushunchalar … ... … .15
3. Loyihalash ……………………………………………… ... …… .18
3.1 Dastlabki loyiha maketi (wireframe) va dizaynni ishlab
chiqish ………………………………………………………… ..… .18
4. Amaliy qism ………………………………………………… .… 21
4.1 Frontend qismini ishlab chiqish (HTML, CSS) …………… ..21
4.2 Backend qismini ishlab chiqish (ma'lumotlar bazasi
Bilan ishlash,serverqismi) ………………………………… ... …… 27
4.3 Saytni integratsiya qilish va test qilish ……………………… .29
4.4 Foydalanuvchi interfeysini optimallashtirish …………… ..… 36
5. Xulosa ……………………………………………………… ..… .40
6. Foydalanilgan adabiyotlar ro'yxati ………………………… ....42

3
Kirish
Bugungi kunda Internet olamiga faqatgina kompyuterlar bilan emas, balki
uyali telefon aloqa texnologiyalari yordamida ham kirish oddiy holga aylandi.
Shuningdek, hozirgi globallashgan davrda har tomonlama takomillashtirilgan
vositalar va kashfiyotlar ham sinovdan o‘tkazilmoqda. Global kompyuter tarmog ‘i
bugungi kungacha ma ’lum bo ‘lgan barcha axborot manbalaridan (telefon, pochta,
televidenie, radio, matbuot nashrlari va boshqalar) farqli holda, o‘z
foydalanuvchilariga har qanday ma ’lumotni istalgan shakl va ko ‘rinishda, ularning
qiziqish va xohishlariga qarab, alohida tanlov asosida uzatish va olish uchun qulay
imkoniyat yaratib kelmoqda.
Web dizayn fanining vazifasi:
-Web texnologiyalar asoslari bilan tanishtirish;
-zamonaviy axborot texnologiyalari orqali olinayotgan ma ’lumotlarning qanday
hosil qilinishi va ulardan foydalanish haqida ma ’lumotlarni berish;
-Web saytlarni hosil qiluvchi dasturlar va dasturlash tillari bilimlari bilan
tanishtirish:
- Flash muhitida oddiy va interfaol animasiyalar, flash saylar yaratishga
o‘rgatishdan iborat.
Web-texnologiyalar bu kabi dinamik web-saytlarni yaratish uchun bir-biri bilan
birgalikda ishlatiladigan ko ‘plab tillar va multimedia paketlarini nazarda tutadigan
umumiy atama. Har bir alohida texnologiya o‘z-o ‘zidan ancha cheklangan va hech
bo ‘lmaganda boshqa bitta texnologiyadan ikki tomonlama foydalanishni talab
qiladi. Shuning uchun biz saytni tashkil etuvchi barcha tarkibiy qismlar bir-biriga
bog ‘liqdir degan xulosaga kelishimiz mumkin.biz web-saytlarni yaratish
uchun ishlatiladigan individual web-ishlab chiqish texnologiyalari va vositalarini
muhokama qilamiz. Ammo bundan oldin, biz web-saytning ikkita alohida qismini
aniq bilib olishimiz kerak: old (Frontend) va orqa (Backend) qism.

4
Mavzuning dolzarbligi
Zamonaviy raqamli davrda har qanday tashkilot yoki muassasa uchun internetdagi
mavjudligi muhim ahamiyat kasb etadi. Ko ‘rgazmalar markazi kabi madaniy va
ijtimoiy faoliyatni amalga oshiruvchi tashkilotlar uchun web-sayt yaratish quyidagi
jihatlar bilan dolzarb hisoblanadi:
Axborot yetkazishning tezkorligi va qulayligi
Ko ‘rgazmalar markazi odatda keng ko ‘lamdagi tadbirlarni tashkil qiladi. Web-sayt
orqali foydalanuvchilarga bu tadbirlar haqida to ‘liq va aniq ma'lumot berish
mumkin. Masalan, tadbir vaqti, joylashuvi, mavzusi kabi ma ’lumotlar web-sayt
orqali osongina tarqatiladi. Bu esa tashrif buyuruvchilar sonining oshishiga yordam
beradi.
Online xizmatlardan foydalanish imkoniyati
Web-sayt foydalanuvchilarga bir qancha interaktiv xizmatlarni taqdim etadi.
Masalan:
Tadbirga oldindan ro ‘yxatdan o‘tish;
Chiptalarni onlayn sotib olish;
Tashkilotchilar bilan bog ‘lanish;
Ko ‘rgazma uchun joy band qilish va boshqalar.
Bu xizmatlar tashrif buyuruvchilar uchun vaqt va qulaylikni ta'minlaydi.
Marketing va brendni rivojlantirish
Bugungi kunda web-saytlar tashkilotning brendi va obro ‘sini mustahkamlash
vositasiga aylangan. Ko ‘rgazmalar markazi uchun veb-sayt:
Mahalliy va xalqaro auditoriyaga ko ‘rgazmalar haqida ma'lumot tarqatadi;
Ko ‘rgazmalar markazining raqobatbardoshligini oshiradi;

5
Internet orqali reklama va marketing kampaniyalarini olib borish imkoniyatini
beradi.
Global qamrov va 24/7 ishlash imkoniyati
An'anaviy reklama vositalaridan farqli ravishda, web-sayt global miqyosda
ishlaydi va 24/7 ma ’lumot tarqatadi. Tashrif buyuruvchilar dunyoning istalgan
nuqtasidan o‘zvaqtida ma ’lumot olishi mumkin.
Raqamli transformatsiya va innovatsiyalarni qo ‘llab-quvvatlash
Axborot texnologiyalarining rivojlanishi bilan tashkilotlar faoliyatini
raqamlashtirish ehtiyoji ortmoqda. Web-saytlar orqali raqamli transformatsiya
amalga oshirilib, foydalanuvchilarga yanada ilg ‘or xizmatlar ko ‘rsatish mumkin.
Misol uchun, foydalanuvchilarning qiziqishlariga qarab moslashtirilgan tavsiyalar,
sun ’iy intellekt asosidagi xizmatlar va boshqalar.
COVID-19 pandemiyasi va yangi ish formatlari
Pandemiya davrida ko ‘rgazma va tadbirlar ko ‘pincha onlayn shaklda o‘tkazilgan.
Shuning uchun, web-saytlar nafaqat oflayn tadbirlarni targ ‘ib qilish, balki onlayn
tadbirlarni tashkil qilish uchun ham muhim vositaga aylandi.
Foydalanuvchi tajribasini yaxshilash
Raqamli platforma foydalanuvchilarni ko ‘rgazmalar haqida to ‘liqroq ma ’lumot
bilan ta ’minlab, ularga qulay navigatsiya va tezkor xizmat ko ‘rsatishni ta ’minlaydi.
Foydalanuvchi qanchalik qulay sharoitda ma ’lumot olsa, u shunchalik ko ‘proq
qoniqish hosil qiladi.

6
Kurs ishi maqsadi va vazifalari
Kurs ishining maqsadi:
Ko ‘rgazmalar markazi uchun zamonaviy, interaktiv va qulay web-sayt yaratish
orqali uning faoliyatini raqamli platformaga ko ‘chirish va foydalanuvchilar bilan
o‘zaro samarali muloqot o‘rnatish. Shuningdek, mazkur web-sayt orqali
markazning brendini rivojlantirish va tashrif buyuruvchilar uchun qulay xizmatlar
ko ‘rsatishni ta ’minlash.
Ko ‘rgazmalar markazi faoliyatining tahlili
Ko ‘rgazmalar markazi faoliyatini chuqur o‘rganish va uning ehtiyojlarini aniqlash.
Mazkur markaz foydalanuvchilari uchun qanday xizmatlar muhimligini belgilash.
Zamonaviy veb-dasturlash texnologiyalarini tanlash
Frontend (HTML, CSS, JavaScript) va backend (PHP, Python, yoki boshqa
texnologiyalar) dasturlash tillari va platformalarini tahlil qilish va tanlash.
Ma'lumotlar bazasi boshqaruv tizimini (MySQL, PostgreSQL yoki boshqalar)
belgilash.
Web-saytning dizayn va funksional imkoniyatlarini loyihalash
Foydalanuvchi uchun qulay interfeys yaratish (UX/UI dizayn).
Saytning asosiy bo ‘limlarini belgilash: bosh sahifa, tadbirlar jadvali, ro ‘yxatdan
o‘tish, bog ‘lanish va boshqalar.
Dastlabki loyiha maketini ishlab chiqish (Wireframe)
Saytning umumiy tuzilmasini chizish va sahifalararo navigatsiyani loyihalash.
Saytni ishlab chiqish
Frontend qismini yaratish: HTML va CSS yordamida dizaynni tayyorlash.
Backend qismini ishlab chiqish: server qismni yaratish va ma'lumotlar bazasi bilan
ishlash.
Ma'lumotlarni saqlash va boshqarish uchun ma'lumotlar bazasini loyihalash.

7
Saytni test qilish va integratsiya qilish
Web-saytni turli qurilmalar va brauzerlarda test qilish.
Server va foydalanuvchi interfeysi o‘rtasidagi aloqalarni sinovdan o‘tkazish.
Xatoliklarni aniqlash va ularni bartaraf etish.
Foydalanuvchi interfeysini optimallashtirish
Saytni yuklash tezligini oshirish.
Sayt navigatsiyasini qulaylashtirish va mobil qurilmalar uchun
moslashuvchanligini ta ’minlash (responsive dizayn).
Xavfsizlikni ta'minlash
Sayt foydalanuvchi ma'lumotlarini himoya qilish (shifrlash va autentifikatsiya).
Server va ma'lumotlar bazasi xavfsizligini ta'minlash choralarini ko ‘rish.
Natijalar tahlili va xulosa chiqarish
Yaratilgan web-saytning asosiy ko ‘rsatkichlari bo ‘yicha samaradorligini tahlil
qilish.
Kurs ishining yutuqlari va imkoniyatlarini tahlil qilib, taklif va tavsiyalarni
shakllantirish.
Tadqiqotning predmeti va obyekti
Tadqiqotning predmeti:
Tadqiqot predmeti sifatida ko ‘rgazmalar markazi uchun web-sayt yaratishda
qo ‘llaniladigan zamonaviy veb-dasturlash texnologiyalari, ma'lumotlar bazasi
boshqaruvi, foydalanuvchi interfeysini loyihalash prinsiplari va ularning
integratsiyasi tanlanadi. Shuningdek, foydalanuvchi tajribasini (UX) yaxshilashga
xizmat qiladigan texnologiyalar va uslublar tahlil qilinadi.

8
Tadqiqotning obyekti:
Ushbu kurs ishining obyekti ko ‘rgazmalar markazining raqamli platformadagi
faoliyatini ta'minlash uchun mo ‘ljallangan web-sayt va uning asosiy elementlaridir.
Bu quyidagilarni o‘zichiga oladi:
Ko ‘rgazmalar markazining tashkiliy faoliyati
Ko ‘rgazmalar haqida foydalanuvchilarni xabardor qilish.
Markazda o‘tkaziladigan tadbirlar jadvali va ularga ro ‘yxatdan o‘tish imkoniyati.
Bog ‘lanish shakli va mijozlar bilan o‘zaro muloqotning boshqa shakllarini
ta'minlash.
Web-sayt infratuzilmasi va funksionalligi
Frontend : foydalanuvchi interfeysi (HTML, CSS, JavaScript) orqali saytning
tashqi ko ‘rinishini va navigatsiyasini ta'minlash.
Backend : ma'lumotlarni qayta ishlash, saqlash va server qismi orqali
foydalanuvchilar uchun xizmat ko ‘rsatish jarayonlarini boshqarish.
Ma'lumotlar bazasi boshqaruvi : foydalanuvchilar, tadbirlar, va boshqa
ma'lumotlarni to ‘plash va boshqarish.
Sayt foydalanuvchilarining ehtiyojlari
Ko ‘rgazmalar markazi mijozlari, tashrifchilari va hamkorlari uchun qulay va
foydali xizmatlarni ta'minlash.
Mobil va ish stoli qurilmalaridan saytga kirishda qulay navigatsiyani ta'minlash.

9
2. Nazariy va tahliliy qism
2.1. Ko ’rgazmalar markazi uchun web-saytlarning ahamiyati
Zamonaviy dunyoda internet texnologiyalari kundalik hayotning ajralmas qismiga
aylandi. Ko ‘rgazmalar markazlari faoliyatining samaradorligini oshirish, ularning
mijozlar va tashrif buyuruvchilar bilan samarali aloqa o‘rnatishi uchun web-saytlar
muhim vosita hisoblanadi.
Ko ‘rgazmalar markazi uchun web-saytlarning ahamiyati quyidagi jihatlarda
namoyon bo ‘ladi:
Axborotni yetkazib berish vositasi sifatida
Ko ‘rgazmalar markazi o‘zida turli tadbirlar, ko ‘rgazmalar va seminarlarni o‘z
ichiga oladi. Web-sayt orqali ushbu tadbirlar haqida real vaqt rejimida ma ’lumot
berish mumkin:
Tadbir sanalari va joylashuvi.
Qatnashuvchilar ro ‘yxati va dasturlar.
Biletlar yoki ishtirok etish uchun ro ‘yxatdan o‘tish bo ‘limi.
Foydalanuvchilar bilan samarali muloqot o‘rnatish
Web-sayt tashrif buyuruvchilarga ko ‘rgazmalar markazi bilan to ‘g‘ridan-to ‘g‘ri
bog ‘lanish imkonini beradi. Misol uchun:
Savollar uchun aloqa shakli yoki chat funksiyasi.
Ro ‘yxatdan o‘tish va xizmatlardan foydalanish uchun shaxsiy kabinet funksiyasi.
Reklama va marketing platformasi sifatida

10
Ko ‘rgazmalar markazining faoliyatini keng ommaga tanitish.
Hamkorlar va homiylarni jalb qilish.
Reklama uchun interaktiv bannerlar yoki yangiliklar bo ‘limi.
Interaktivlikni ta ’minlash
Onlayn rejalashtirish va bron qilish tizimini joriy qilish.
Virtual ekskursiyalar yoki onlayn ko ‘rgazmalarni tashkil etish.
Tashrif buyuruvchilar tomonidan qoldirilgan fikr-mulohazalar va baholar orqali
sifatni oshirish.
Brend imidjini shakllantirish va mustahkamlash
Zamonaviy va intuitiv dizaynli web-sayt ko ‘rgazmalar markazining ishonchliligi
va nufuzini oshiradi. Yaxshi rivojlangan brend imidji esa yangi mijozlarni jalb
qilishda muhim o‘rin tutadi.
Mobil moslashuvchanlik va global yetib borish imkoniyati
Mobil qurilmalar orqali saytdan foydalanish imkoniyati (responsiv dizayn).
Butun dunyodan kirish imkonini beruvchi ko ‘p tilda ishlovchi interfeys.
Ma ’lumotlarni boshqarish va tahlil qilish imkoniyati
Web-sayt foydalanuvchilar faoliyatini kuzatish va tahlil qilish imkonini beradi:
Tashriflar statistikasi.
Mijozlar ehtiyojlari va xatti-harakatlarini tahlil qilish orqali xizmatlarni
optimallashtirish.

11
Ko ‘rgazmalar markazi uchun web-sayt zamonaviy marketing strategiyasining
ajralmas qismi hisoblanadi. U mijozlar va markaz o‘rtasida bog ‘lovchi vosita
bo ‘lib xizmat qilib, markazning samaradorligini oshirishga xizmat qiladi.
Shuningdek, sayt orqali markaz o‘z faoliyatini global darajada kengaytirishi va
mijozlar uchun qulayliklar yaratishi mumkin. Shu sababli, web-saytni rivojlantirish
va uni doimiy yangilab turish ko ‘rgazmalar markazlari uchun dolzarb masalalardan
biridir .
2.2 Veb dasturlash texnologiyalari: tanlov va taqqoslash
Veb-dasturlash, internet orqali foydalanuvchilar bilan o‘zaro aloqada bo ‘lish,
ma'lumotlarni almashish va interaktiv xizmatlar yaratish uchun zarur bo ‘lgan
texnologiyalarni o‘z ichiga oladi. Veb-saytlar va web-ilovalar yaratish uchun
ishlatiladigan turli texnologiyalarni tanlashda, bir qancha omillarni hisobga olish
kerak: loyiha maqsadi, foydalanuvchi ehtiyojlari, texnik ko ‘nikmalar va arxitektura
talablari. Quyida veb dasturlashning eng keng tarqalgan texnologiyalari va
ularning taqqoslanishi keltirilgan.
1. Frontend texnologiyalari
Frontend, ya'ni veb-saytning foydalanuvchi interfeysi, foydalanuvchi bilan
bevosita aloqada bo ‘ladi. Frontend ishlab chiqishda ishlatiladigan asosiy
texnologiyalar quyidagilardir:
HTML (HyperText Markup Language) : HTML veb-sahifalarning tuzilishini
belgilovchi markirovka tilidir. HTML yordamida sahifaning tarkibi, masalan, matn,
rasmlar, videolar va boshqa kontentlar joylashtiriladi.
CSS (Cascading Style Sheets) :CSS veb-sahifalarga dizayn va stil qo ‘shish uchun
ishlatiladi. Bu yordamida ranglar, shriftlar, joylashuvlar va boshqa ko ‘plab dizayn

12
elementlari aniqlanadi. CSS orqali veb-sahifalar responsiv bo ‘lishi, ya'ni mobil va
kompyuter ekranlarida yaxshi ko ‘rinishi mumkin.
JavaScript :JavaScript – interaktivlikni yaratish uchun ishlatiladigan dasturlash tili
bo ‘lib, foydalanuvchi bilan veb-sahifa o‘rtasida interaktiv o‘zaro aloqani amalga
oshirishda asosiy rolni o‘ynaydi. Misol uchun, tugmalarni bosganda sahifada
o‘zgarishlar yuz berishi, animatsiyalar, dinamik kontentlarni yuklash kabi
funksiyalarni bajaradi.
Frontend kutubxonalar va freymvorklar:
React : Facebook tomonidan yaratilgan JavaScript kutubxonasi, foydalanuvchi
interfeyslarini qurish uchun ishlatiladi. React komponentlar asosida ishlaydi, ya'ni
sahifadagi har bir element alohida komponent sifatida tashkil etiladi. React yuqori
darajadagi ishlash tezligi va qayta ishlash imkoniyatlari bilan mashhur.
Vue.js : Vue.js ham React kabi JavaScript kutubxonasi bo ‘lib, juda oson
o‘rganiladi va kichikdan katta loyihalargacha qo ‘llanilishi mumkin. Vue.js,
shuningdek, an'anaviy va dinamik veb-saytlarni yaratishda keng qo ‘llaniladi.
Angular : Google tomonidan ishlab chiqilgan Angular freymvorki, yirik va
murakkab veb-ilovalarni yaratishda ishlatiladi. Angular TypeScript asosida ishlab
chiqilgan va uni o‘rganish va ishlatish ko ‘proq vaqt talab qiladi, ammo yirik
loyihalar uchun ideal tanlov hisoblanadi.
2. Backend texnologiyalari
Backend, ya'ni server tomonidagi texnologiyalar, veb-saytning asosiy
funksiyalarini bajaradi: ma'lumotlar bazasi bilan ishlash, foydalanuvchi
so ‘rovlarini qayta ishlash va natijalarni foydalanuvchiga yuborish. Backend uchun
keng tarqalgan texnologiyalar quyidagilardir:

13
Node.js : JavaScript asosida ishlaydigan server tarafidan ishlovchi muhit bo ‘lib,
tezkor va samarali backendni yaratish uchun ishlatiladi. Node.js asosan asinxron va
voqeaga asoslangan kodni qo ‘llaydi, bu esa yuqori ish faoliyatini ta'minlaydi.
PHP : PHP server tomoni uchun ishlatiladigan dasturlash tilidir va veb-
dasturlashda uzoq yillik tajribaga ega. PHP dinamik veb-saytlar yaratish uchun
juda mashhur va keng qo ‘llaniladi. WordPress kabi eng ommabop veb-
platformalar PHP bilan yozilgan.
Python :Python backendda ishlatish uchun juda qulay dasturlash tili hisoblanadi.
Django va Flask kabi freymvorklar orqali server tomonida turli veb-ilovalar
yaratish mumkin. Python oson o‘rganilishi va yirik va kichik loyihalarda
ishlatilishi bilan mashhurdir.
Ruby on Rails :Ruby dasturlash tili va Ruby on Rails freymvorki orqali backend
ishlab chiqish samarali va tez bo ‘ladi. Rails freymvorki ko ‘p sonli ma'lumotlar
bilan ishlashga qaratilgan va juda oson o‘rganiladi.
3. Ma'lumotlar bazasi texnologiyalari
Ma'lumotlar bazalari veb-saytlar va web-ilovalarning ma'lumotlarni saqlash va
boshqarishda muhim rol o‘ynaydi. Har bir veb-sayt uchun ma'lumotlar bazasi
yaratish zarur:
SQL (Structured Query Language) :SQL – ma'lumotlar bazalari bilan ishlash
uchun ishlatiladigan dasturlash tili bo ‘lib, relatsion ma'lumotlar bazalarini
boshqarish uchun qo ‘llaniladi. Masalan, MySQL, PostgreSQL, Microsoft SQL
Server kabi ma'lumotlar bazalari SQL asosida ishlaydi.
NoSQL : NoSQL – an'anaviy SQL ma'lumotlar bazalariga qaraganda katta
hajmdagi, tezkor va murakkab ma'lumotlarni saqlash va qayta ishlash uchun

14
ishlatiladi. MongoDB, Cassandra, CouchDB kabi NoSQL ma'lumotlar bazalari
malakali dasturchilar tomonidan keng qo ‘llaniladi.
4. Web-dasturlash texnologiyalarini tanlashda hisobga olinadigan omillar:
Loyihaning o‘lchami va murakkabligi : Kichik va o‘rta o‘lchamdagi loyihalar
uchun Node.js yoki PHP kabi texnologiyalar juda yaxshi tanlovdir. Katta va
murakkab tizimlar uchun esa Angular, Django yoki Ruby on Rails kabi
freymvorklar mos keladi.
Ishlash tezligi va samaradorlik : Tez ishlash va yuqori samaradorlik talab
etiladigan loyihalar uchun Node.js va Go kabi texnologiyalar yaxshi variant
hisoblanadi.
Jamoaning tajribasi : Agar jamoada muayyan texnologiyalar bo ‘yicha
ko ‘nikmalar mavjud bo ‘lsa, ushbu texnologiyalarni tanlash yanada osonroq bo ‘ladi.
Masalan, Python va Django bilan ishlaydigan jamoalar Python dasturlash tilini
tanlashni afzal ko ‘rishadi.
Kengaytirish va qo ‘llab-quvvatlash :Katta hajmdagi ilovalar uchun ko ‘p qo ‘llab-
quvvatlanadigan va kengaytiriladigan texnologiyalarni tanlash maqsadga muvofiq.
Masalan, JavaScript asosidagi texnologiyalar (React, Angular, Node.js) keng
qo ‘llaniladi va ularga doimo yangilanishlar va qo ‘llab-quvvatlashlar taqdim etiladi.
5. Texnologiyalarni tanlashda asosiy tanlovlar:
Veb-dasturlash texnologiyalarini tanlashda jamoaning tajribasi, loyiha maqsadi,
dasturlash tili va freymvorkning o‘xshashligi, ishlash tezligi, va kengaytirish
imkoniyatlari muhim omillardir. Frontend va backend texnologiyalarining
kombinatsiyasi loyiha talablariga qarab optimallashtiriladi.

15
2.3 Frontend va Backend haqida umumiy tushunchalar
Veb-dasturlashda frontend va backend tushunchalari, veb-sayt yoki web-ilovalar
yaratishda ikki asosiy qismini ifodalaydi. Har bir qism o‘zining alohida vazifalari
va roliga ega bo ‘lib, ular birgalikda veb-sayt yoki ilovaning to ‘liq ishlashini
ta'minlaydi.
Frontend :
Frontend, foydalanuvchi bilan to ‘g‘ridan-to ‘g‘ri aloqada bo ‘lgan va veb-sayt yoki
ilovaning tashqi qismiga javob beradigan qismdir. Frontend asosan foydalanuvchi
interfeysi (UI) va uning funksionalligi bilan bog ‘liq bo ‘ladi. Frontend veb-saytning
qanday ko ‘rinishini va foydalanuvchining u bilan qanday o‘zaro aloqada bo ‘lishini
belgilaydi.
Frontendning vazifalari:
Dizayn va ko ‘rinish : Frontend foydalanuvchiga qanday sahifa ko ‘rinishini,
ranglar, shriftlar, joylashuvlar, animatsiyalarni taqdim etadi. Ushbu qismlar
HTML, CSS, va JavaScript orqali yaratiladi.
Foydalanuvchi interaktivligi : Foydalanuvchining kiritgan ma'lumotlari,
tugmalarni bosishi, formalarni yuborishi kabi harakatlariga javob beruvchi
interaktivlikni yaratish. Misol uchun, sahifalar o‘zgartirilishi, yangi ma'lumotlar
ko ‘rsatilishi yoki animatsiyalarni amalga oshirish uchun JavaScript ishlatiladi.
Responziv dizayn : Frontendning yana bir muhim qismi, saytni mobil
qurilmalarda va turli o‘lchamdagi ekranlarda optimallashtirishdir. Bu CSS
media queries va boshqa texnologiyalar yordamida amalga oshiriladi.
Frontend texnologiyalari:

16
HTML : Veb-sahifalar va ilovalar uchun asosiy tuzilma (markup) yaratadi.
HTML yordamida matnlar, rasm va video fayllar, linklar va boshqa tarkibni
veb-saytga joylashtirish mumkin.
CSS : HTML sahifalariga stil berish uchun ishlatiladi. Bu yordamida veb-
sahifalarning ranglari, shriftlari, o‘lchamlarini, joylashuvlarini, va boshqa
ko ‘plab elementlarni belgilash mumkin.
JavaScript : Frontenddagi interaktivlikni qo ‘llab-quvvatlaydi. JavaScript
yordamida sahifada foydalanuvchi harakatlariga asoslangan o‘zgarishlarni
yaratish mumkin. Shuningdek, AJAX texnologiyasi yordamida sahifani
yangilamasdan serverga so ‘rovlar yuborish mumkin.
Backend (server tomon):
Backend, veb-sayt yoki web-ilovaning serverda ishlaydigan va foydalanuvchining
talablarini bajaradigan qismidir. Backend tizimi foydalanuvchi tomonidan
yuborilgan so ‘rovlarni qayta ishlaydi, ma'lumotlar bazasi bilan aloqada bo ‘lib,
kerakli ma'lumotlarni taqdim etadi va foydalanuvchiga natijalarni yuboradi.
Backendda ko ‘proq server tomonidagi dasturlash, ma'lumotlar bazasi va API
(Application Programming Interface) ishlashiga e'tibor qaratiladi.
Backendning vazifalari:
Ma'lumotlar bazasiga ishlov berish : Backendda ma'lumotlar bazasidan
ma'lumotlarni o‘qish, yozish, o‘zgartirish va o‘chirish amalga oshiriladi.
Masalan, foydalanuvchining ro ‘yxatdan o‘tish yoki buyurtma berish jarayoni.
Server tomoni dasturlash : Backendda serverda ishlov beruvchi dasturlash
tillari yordamida dastur logikasi, ma'lumotlarni qayta ishlash va foydalanuvchi
so ‘rovlariga javoblar yaratish amalga oshiriladi.

17
Foydalanuvchi autentifikatsiyasi va xavfsizlik :Backend foydalanuvchining
autentifikatsiyasi va avtorizatsiyasi (masalan, login va parol bilan kirish)ni
boshqaradi, shuningdek, veb-sayt xavfsizligini ta'minlash uchun kerakli
mexanizmlar yaratadi.
API yaratish : Backend tizimi, frontend va boshqa xizmatlar bilan o‘zaro
aloqada bo ‘lish uchun API (Application Programming Interface) yaratadi. API
foydalanuvchi so ‘rovlariga xizmat qilib, kerakli ma'lumotlarni qaytaradi.
Backend texnologiyalari:
Dasturlash tillari : Backend uchun ko ‘plab dasturlash tillari ishlatiladi. Eng
keng tarqalgan tillar: Python (Django, Flask), JavaScript (Node.js), Ruby (Ruby
on Rails), PHP (Laravel), Java (Spring).
Ma'lumotlar bazalari : Backendda ma'lumotlar bazalari bilan ishlash uchun
SQL va NoSQL texnologiyalari qo ‘llaniladi. Misollar: MySQL, PostgreSQL,
MongoDB, Redis.
Serverlar va hosting :Backendda web-sayt yoki ilova ishlashi uchun serverlar
va hosting xizmatlari zarur. Masalan, Apache, Nginx kabi server dasturlari va
bulutli hosting xizmatlari (AWS, Azure, Google Cloud) qo ‘llaniladi.
Frontend va Backendning farqlari:
Xususiyat Frontend Backend
Tavsif Foydalanuvchi bilan bevosita aloqada
bo ‘lgan qism.
Foydalanuvchi so‘rovlariga javob beradigan
server qismi.
Texnologiyalar HTML, CSS, JavaScript, React, Vue.js,
Angular
Python, PHP, Ruby, Node.js, Java, C#,
MySQL, MongoDB

18
3. Loyihalash
3.1 Dastlabki loyiha maketi (wireframe) va dizaynni ishlab chiqish
Dastlabki loyiha maketi (wireframe) va dizaynni ishlab chiqish, veb-saytni
yaratishda eng muhim bosqichlardan biridir. Bu bosqichda saytning umumiy
ko ‘rinishi, foydalanuvchi interfeysi va strukturasini aniqlash orqali, barcha
interaktiv elementlar va ma'lumotlar o‘zaro qanday aloqada bo ‘lishini ko ‘rsatish
maqsad qilingan. Wireframe va dizaynni ishlab chiqish saytning tashqi ko ‘rinishi
va foydalanuvchi tajribasining asosiy asoslarini belgilab beradi.
1. Dastlabki Maket (Wireframe) Nima?
Wireframe - bu saytning tashqi ko ‘rinishi, strukturasini va asosiy funksiyalarini
ta'riflovchi oddiy, ko ‘pincha chizilgan yoki raqamli shakldagi tasvirdir. U
dizaynerlar va dasturchilar uchun saytni yaratishning dastlabki bosqichi bo ‘lib,
uning asosiy elementlari va foydalanuvchi interfeysi haqida tasavvur hosil qilish
imkonini beradi. Wireframe foydalanuvchi tajribasini boshqarish va saytning
faoliyatini rejalashtirish uchun muhim.
Wireframe quyidagi elementlarni o‘zichiga oladi:
Saytning umumiy tuzilishi :Qaysi bo ‘limlar mavjudligini, har bir bo ‘limning
joylashishini va ularning o‘zaro aloqasini belgilash.
Navigatsiya : Foydalanuvchiga saytni qanday navigatsiya qilish imkoniyatini
beradi. Misol uchun, menyular, links va sahifalar o‘rtasidagi aloqalar.
Kontent joylashuvi :Sayt sahifalaridagi matn, rasmlar, video, to ‘lov tizimlari,
mahsulotlar, sharhlar va boshqa elementlar qanday joylashtirilishini belgilash.
Interaktiv elementlar :Tugmalar, qidiruv maydonlari, ro ‘yxatlarni tanlash va
boshqa interaktiv elementlar.

19
2. Dastlabki Maketni Ishlab Chiqish Bosqichlari
Wireframe yaratishda quyidagi bosqichlarni bajarish kerak:
Saytning asosiy tuzilishini aniqlash
Saytning asosiy bo ‘limlari va sahifalarini belgilash: Bosh sahifa, mahsulotlar
ro ‘yxati, mahsulot sahifasi, savat va buyurtma, to ‘lov va so ‘nggi tasdiqlash sahifasi.
Navigatsiya tizimini rejalashtirish: Eng muhim bo ‘limlarga oson kirish
imkoniyatlarini yaratish.
Kontentning joylashishini rejalashtirish
Har bir sahifada qaysi elementlar bo ‘lishini va ularning qanday joylashishini
aniqlash. Masalan, mahsulotlar sahifasida mahsulotlar, filtrlar, tavsiyalar va
sharhlar qanday joylashadi.
Foydalanuvchi interfe ýsini rejalashtiris h
Foydalanuvchiga kerakli funksiyalarni qanday taqdim etishni belgilash. Masalan,
foydalanuvchi mahsulotlarni qidirish, savatga qo ‘shish, buyurtma qilish va to ‘lovni
amalga oshirish uchun qanday tugmalar yoki shakllardan foydalanadi
Simmetriya va vizual bog ‘lanishlarni yaratish
Saytning vizual jihatlarini ta'minlash va foydalanuvchi uchun qulay va intuitiv
interfeys yaratish. Buning uchun asosiy bloklar va ularning o‘zaro aloqalarini
tasvirlash kerak.
3. Dizaynni Ishlab Chiqish

20
Wireframe ni ishlab chiqishdan so ‘ng, saytning dizaynini yaratish bosqichi
boshlanadi. Dizayn esa saytning vizual ko ‘rinishi, ranglar, shriflar, grafika va
boshqa elementlarni o‘zichiga oladi.
Dizayn ishlab chiqishda quyidagi jihatlar muhim:
Ranglar palitrasi :Saytning ranglarini tanlash, brend imidji bilan mos ravishda
foydalanuvchiga estetik va qulay tajriba taqdim etadi. Supermarketlar uchun
odatda oson va jozibali ranglar palitrasi tanlanadi (masalan, yashil, qizil, sariq
ranglar).
Shriftlar :Saytning matnini o'qish oson va foydalanuvchilar uchun qulay shriftlar
bilan ta'minlash. Boshqacha qilib aytganda, shriftlar kontrastli, aniq va yengil
o‘qilishi kerak.
Kontekstual va vizual ko ‘rsatmalar :Mahsulotlarning rasm va tasvirlarini aniq
va sifatli ko ‘rsatish. Har bir mahsulotni foydalanuvchi qulay tarzda ko ‘rishi uchun
kattalashtirish va zoom funksiyasi qo ‘shilishi mumkin.
Foydalanuvchi tajribasi (UX) : Sayt foydalanuvchilari uchun intuitiv va oson
ishlatiladigan bo ‘lishi kerak. Dizayn foydalanuvchilarni jalb qilish uchun yengil va
ko ‘zga oson tushadigan bo ‘lishi zarur.
Mobilga mos dizayn :Saytning mobil qurilmalarda ham samarali ishlashi uchun
responsiv dizaynni yaratish kerak. Saytning barcha elementlari har qanday
qurilmada to ‘g‘ri ko ‘rinishi va ishlashini ta'minlash.
4. Foydalaniladigan Asboblar va Texnologiyalar
Dastlabki maket va dizaynni yaratish uchun bir qator asboblar va texnologiyalarni
ishlatish mumkin:
Wireframe Yaratish Asboblari :

21
4.AMALIY QISM.
4.1. Frontend qismini ishlab chiqish (HTML, CSS, JavaScript) .
Dasturlash juda qiziqarli va har tomonlama foydali mashg ‘ulot. Dasturlashni
o‘rganish juda oson. Qiziqish va yangi bilimlarni o‘zlashtirishga bo ‘lgan yuqori
darajadagi istak bilan bir necha oylik mehnat orqali har kim malakali dasturchiga
aylanishi mumkin. Web dasturlash mening sevimli mashg ‘ulotlarimdan biri.
Web dasturlash brauzeringiz orqali ko ‘rishingiz va foydalanishingiz mumkin
bo ‘lgan barcha web dasturlarni tayyorlash jarayonini o‘z ichiga oladi. Web
dasturlash ham juda qiziqarli va katta daromad keltiradigan soha hisoblanadi.
Malakali dasturchilarga bo ‘lgan talab bugungi kunda har doimgidan ham yuqori.
Agar qachondir web dasturlashni o‘rganish haqida o‘ylab ko ‘rgan bo ‘lsangiz, hozir
bu niyatingizni amalga oshirish uchun kirishishning ayni vaqti!
Frontend bu – web-saytning foydalanuvchi o‘zekranida ko ‘rishi va o‘zaro
aloqada bo ‘lishi mumkin bo ‘lgan barcha qismlarini anglatadi.
Backend esa Frontedga qarama-qarshi tomonga ishora qiladi. Bu web-sahifa
funktsiyasini bajaradigan maxfiy mexanizmlarni o‘z ichiga oladi. Oddiy
foydalanuvchi odatda orqa tomonda nima sodir bo ‘lishini bilmaydi
Avvalo “frontend ” va “backend ” so ‘zlarining o‘zbek tilidagi ma ’nolari bilan
tanishib chiqaylik. “Frontend ”(front end, front-end) o‘zbek tilida “Oldindagi (ustki)
tomon ” degan ma ’noni anglatadi. Biz bu so ‘z bilan u yoki bu narsaning tashqi,
hammaga ko ‘rinib turadigan qismini nazarda tutamiz. Backend (back end, back-
end) esa Frontendning aksi hisoblanib, qaysidir narsaning ichki, yoki orqa tomoni
degan ma ’noni anglatadi. Bu bilan biz qaysidir narsaning hammaga
ko ‘rinmaydigan, yashiring, ichki yoki orqa tomonini nazarda tutgan bo ‘lamiz.
Frontend - Bu o‘zi nima va yuqoridagi gaplarga buning nima bog ‘liqligi
bor? » dersiz, bu savolingizga ushbu maqolada javob topasiz degan umiddamiz.

22
Frontend -«tashqi interfeys degan ma ’noni bildirib, veb texnologiyalarning biridir.
Bu texnologiya yordamida veb sahifalarning insonga ko ‘rinib turuvchi, ma ’lumot
beruvchi vizual qismi yaratiladi. Frontend texnologiyalarini o‘rgangan inson o‘z
ijodkorligi, kretiv yondoshuvi orqali turli g‘oyalarini veb sahifalar, dasturlar
shaklida ro ‘yobga chiqarishi mumkin bo ‘ladi.
Bugungi kunda shaxsiy veb sahifaga ega bo ‘lish o‘ziga xos elektron vizitka,
passport vazifasini bajaribgina qolmay, balki sayt orqali ko ‘plab foydali ishlarni
amalga oshirish mumkin bo ‘lib qoldi. Masalan, jurnalist, shoir, yozuvchi o‘z ijodi
va izlanishlarinini veb sahifasi orqali yoritib borishi mumkin. Tadbirkor o‘z
sahifasida mahsulot va xizmatlarini keng targ ‘ib qilishi va daromadini oshirishi
mumkin.
Umumiy qilib aytadigan bo ‘lsak Frontend texnologiyalarini o‘rganish -
internet xazinasining kalitini qo ‘lga kiritish demakdir, bu xazinadan xohlagan
narsangizni olishingiz, foydalnishingiz, boshqarishingiz mumkin.
Web sayt haqida
Web-ishlab chiqish deganda web-saytlarni yaratish jarayoni tushuniladi.
Ushbu jarayon bir qator bosqichlarga asoslangan bo ‘lib, biz har bir jarayonda
ishtirok etadigan vositalarni o‘rganib chiqishda batafsilroq ko ‘rib chiqamiz.
Odatda web-saytning ikkita qismi Oldinga borganimizda, biz web-saytlarni
yaratish uchun ishlatiladigan individual web-ishlab chiqish texnologiyalari va
vositalarini muhokama qilamiz. Ammo bundan oldin, biz web-saytning ikkita
alohida qismini aniq bilib olishimiz kerak: old (Frontend) va orqa (Backend) qism.
Frontend bu – web-saytning foydalanuvchi o‘z ekranida ko ‘rishi va o‘zaro aloqada
bo ‘lishi mumkin bo ‘lgan barcha qismlarini anglatadi. Backend esa Frontedga
qarama-qarshi tomonga ishora qiladi. Bu websahifa funktsiyasini bajaradigan
maxfiy mexanizmlarni o‘zichiga oladi. Oddiy foydalanuvchi odatda orqa tomonda
nima sodir bo ‘lishini bilmaydi

23
Web-saytni rivojlantirishning navbatdagi bosqichi: texnik tavsiflarni
shakllantirish Texnik topshiriq - bu mijoz bilan tuzilgan hujjat. U manbaning
batafsil tavsiflarini o‘z ichiga oladi: Dizayn bo ‘yicha takliflar (rangli dizayn,
korporativ identifikatsiyani qo ‘llash yoki uning rivojlanishi, grafik elementlarning
matnga nisbati); o Semantik yadro; o Sayt tuzilishi, sahifalar, toifalar, bloklar soni;
o Saytning faoliyati (faqat standart yoki qo ‘shimcha modullarni ishlab chiqish,
ularning batafsil tavsifi va maqsadlari); o Amaliy texnologiyalar; o Resursga
texnik talablar. Texnik topshiriqlar ishlab chiqishda ishtirok etadigan har bir ishlab
chiquvchi ishonadigan asosdir. Shuning uchun buyurtmachining texnik
spetsifikatsiyani 11 tayyorlashda ishtirok etishi zarur. Mijoz hujjatni imzolaguncha
u muzokara qilinadi va tahrir qilinadi. Shundan keyingina loyiha yaratilish
bosqichiga o‘tadi. TKni shakllantirish va muhokama qilish bosqichida saytning
tuzilishi, uning navigatsiyasi, toifalar va kichik toifalar soni, ularni joylashtirish
ketma-ketligi va boshqalar ham ishlab chiqiladi. Barcha ma ’lumotlar, shuningdek,
mijoz tomonidan imzolangan hujjatga kiritilgan.
Web-sayt dizayni maketini yaratish Resursning sifatli ishlashi uchun web-
saytlarni yaratishning barcha bosqichlari muhim, ammo dizaynni ishlab chiqish
asosiylaridan biri hisoblanadi. Axir, dizayn bu birinchi navbatda mehmonni ko ‘radi,
uni baholaydi va sahifada qolishga yoki brauzer yorlig ‘ini yopishga qaror qiladi.
Dizayner texnik topshiriq asosida ishlaydi, tugmalar, bannerlar va boshqa grafik
elementlarni chizadi. Boshqacha qilib aytganda, web-saytni rivojlantirishning
birinchi bosqichida yaratilgan protetib estetik ko ‘rinishga ega bo ‘lib, mijoz

24
tomonidan tanlangan ranglarda ishlab chiqariladi. Agar kompaniya korporativ
uslubga ega bo ‘lsa, unda dizayn unga mos ravishda ishlab chiqilgan. Shu bilan bir
qatorda, avval korporativ identifikatorni, so ‘ngra unga asoslangan dizaynni ishlab
chiqish mumkin. Shuni ta ’kidlash kerakki, dizayner har bir sahifaning dizaynini
emas, balki web-dizayn tendentsiyalaridan foydalangan holda bir nechta asosiy
sahifalarning shablonlarini chizadi. Tayyorlangan tartib mijozga topshiriladi va
uning roziligini kutadi. Agar takomillashtirish kerak bo ‘lsa, dizayner ularni amalga
oshiradi va xaridorga takomillashtirilgan varyantda taqdim etadi.
Maket dizayneri tayyor dizaynni ishchi loyihaga aylantirish uchun HTML
dan foydalanadi. Resurs hayotga ega bo ‘ladi, dinamik bo ‘ladi, barcha tugmalar
ishlaydi. Resurs o‘zaro faoliyat brauzerga aylanadi va mavjud bo ‘lgan barcha
Internetbrauzerlarda to ‘g‘ri ko ‘rsatiladi. Xuddi shu bosqichda CSS uslublari
yaratiladi Bundan tashqari, resurs boshqaruv tizimiga ulangan. Uning yordami
bilan loyihaning sahifalari, toifalari va kichik toifalari yaratiladi, menyu
yorlig ‘ining ishlash tartibi aniqlanadi, bog ‘lash qismlari joylashtiriladi. Resurs
tashrif buyuruvchilarga taqdim etiladigan yakuniy tuzilmani oladi. Ba ’zan
saytlardan CMS holda foydalanish mumkin (masalan, ochilish sahifalari), shuning
uchun sayt HTML va CSS-da asosiy bazaga ulanmasdan joylashtirilgan. Xuddi shu
bosqichda toifalar va pastki toifalar sahifada joylashtiriladigan tarkib, tarkibdir.
Maket dizayneri onlayn-do ‘kon uchun mahsulot kartasining tartibiga katta
e’tibor beradi, u texnik va foydalanuvchi talablariga javob berishi kerak.
Joylashtirishning yakuniy bosqichida saytning moslashuvchan versiyasi ishlab
chiqilgan. Bu ixtiyoriy, ammo mobil trafikka erishmoqchi bo ‘lgan mijozlarga

25
tavsiya etiladi. Web-saytlarni dasturlash Oddiy saytni yaratish bosqichlarida
dasturlashning hojati yo ‘q (masalan, bitta sahifalisahifa). Agar katta va murakkab
loyiha ishlab chiqilayotgan bo ‘lsa, dasturchi ishga qo ‘shiladi. Mutaxassisning
vazifasi murakkab funktsiyalarni ishlab chiqishdir, masalan: kalkulyator, bank
kartalaridan foydalangan holda to ‘lov tizimi, valyuta konvertori, ya ’ni barcha
funktsiyalarning standart paketiga kiritilmagan barcha funktsiyalardir. Tarkibni
to ‘ldirish Web-saytni yaratilishning oldingi bosqichi sahifalarni grafik va axborot
mazmuni bilan to ‘ldirishdir. Ro ‘yxatdan o‘tmasdan yoki o‘qishi mumkin bo ‘lgan
videolar, fotosuratlar, matnlar va boshqa ma ’lumotlar joylashtirilgan. 13 Semantik
yadro asosida SEO kontentlari yoziladi (agar resurs SEO usuli bilan targ ‘ib
qilinadigan bo ‘lsa), kontent menejeri grafik elementlarni mantiqiy tuzilishga
joylashtiradi va sahifalar ichki optimallashtirilib boriladi. 3-rasm. Loyihani
sinovdan o‘tkazish Web-sayt yaratish jarayonida test sinovlari eng muhim rol
o‘ynaydi. Ishni bir qator mezonlarga muvofiq resursning ishlashini nazorat
qiluvchi va yo ‘q qilinishi kerak bo ‘lgan xatolarni aniqlaydigan sinovchi amalga
oshiradi (3-rasm). Biz alohida bosqich sifatida domen va xostingni tanlamadik. Bu
kerak, lekin uni resurs yaratish jarayonining istalgan nuqtasida qilish mumkin. Ish
tugagandan so ‘ng, tugallangan loyiha mijozga login va parollar bilan birga
boshqaruv tizimiga o‘tkaziladi.
Loyiha topshirilgandan so ‘ng, mijoz o‘z narxini to ‘lash orqali loyihani targ ‘ib
qilish va qo ‘llab-quvvatlash xizmatiga buyurtma berishi mumkin.
Maket dizayneri tayyor dizaynni ishchi loyihaga aylantirish uchun HTML
dan foydalanadi. Resurs hayotga ega bo ‘ladi, dinamik bo ‘ladi, barcha tugmalar
ishlaydi. Resurs o‘zaro faoliyat brauzerga aylanadi va mavjud bo ‘lgan barcha
Internetbrauzerlarda to ‘g‘ri ko ‘rsatiladi. Xuddi shu bosqichda CSS uslublari
yaratiladi. Bundan tashqari, resurs boshqaruv tizimiga ulangan. Uning yordami
bilan loyihaning sahifalari, toifalari va kichik toifalari yaratiladi, menyu
yorlig ‘ining ishlash tartibi aniqlanadi, bog ‘lash qismlari joylashtiriladi. Resurs
tashrif buyuruvchilarga taqdim etiladigan yakuniy tuzilmani oladi. Ba ’zan

26
saytlardan CMS holda foydalanish mumkin (masalan, ochilish sahifalari), shuning
uchun sayt HTML va CSS-da asosiy bazaga ulanmasdan joylashtirilgan. Xuddi shu
bosqichda toifalar va pastki toifalar sahifada joylashtiriladigan tarkib, tarkibdir.
Maket dizayneri onlayn-do ‘kon uchun mahsulot kartasining tartibiga katta e’tibor
beradi, u texnik va foydalanuvchi talablariga javob berishi kerak. Joylashtirishning
yakuniy bosqichida saytning moslashuvchan versiyasi ishlab chiqilgan. Bu
ixtiyoriy, ammo mobil trafikka erishmoqchi bo ‘lgan mijozlarga tavsiya etiladi.
Web-saytlarni dasturlash Oddiy saytni yaratish bosqichlarida dasturlashning hojati
yo ‘q (masalan, bitta sahifalisahifa). Agar katta va murakkab loyiha ishlab
chiqilayotgan bo ‘lsa, dasturchi ishga qo ‘shiladi. Mutaxassisning vazifasi murakkab
funktsiyalarni ishlab chiqishdir, masalan: kalkulyator, bank kartalaridan
foydalangan holda to ‘lov tizimi, valyuta konvertori, ya ’ni barcha funktsiyalarning
standart paketiga kiritilmagan barcha funktsiyalardir. Tarkibni to ‘ldirish Web-
saytni yaratilishning oldingi bosqichi sahifalarni grafik va axborot mazmuni bilan
to ‘ldirishdir. Ro ‘yxatdan o‘tmasdan yoki o‘qishi mumkin bo ‘lgan videolar,
fotosuratlar, matnlar va boshqa ma ’lumotlar joylashtirilgan. 13 Semantik yadro
asosida SEO kontentlari yoziladi (agar resurs SEO usuli bilan targ ‘ib qilinadigan
bo ‘lsa), kontent menejeri grafik elementlarni mantiqiy tuzilishga joylashtiradi va
sahifalar ichki optimallashtirilib boriladi. Loyihani sinovdan o‘tkazish Web-sayt
yaratish jarayonida test sinovlari eng muhim rol o‘ynaydi. Ishni bir qator
mezonlarga muvofiq resursning ishlashini nazorat qiluvchi va yo ‘q qilinishi kerak
bo ‘lgan xatolarni aniqlaydigan sinovchi amalga oshiradi . Biz alohida bosqich
sifatida domen va xostingni tanlamadik. Bu kerak, lekin uni resurs yaratish
jarayonining istalgan nuqtasida qilish mumkin. Ish tugagandan so ‘ng, tugallangan
loyiha mijozga login va parollar bilan birga boshqaruv tizimiga o‘tkaziladi. Loyiha
topshirilgandan so ‘ng, mijoz o‘z narxini to ‘lash orqali loyihani targ ‘ib qilish va
qo ‘llab-quvvatlash xizmatiga buyurtma berishi mumkin .

27
4.2 Backend qismini ishlab chiqish (Ma'lumotlar bazasi bilan ishlash, server
qismi)
Backend qismi veb-saytning server tomonidagi ishlashini boshqaradi. Ushbu qism
foydalanuvchilar kiritgan ma'lumotlarni qayta ishlash, ma'lumotlar bazasi bilan
aloqa qilish, xavfsizlikni ta'minlash va boshqa funksional talablarni bajaradi.
Quyida backendni ishlab chiqish jarayonining asosiy bosqichlari haqida batafsil
ma ’lumot keltiriladi.
1. Ma'lumotlar bazasi tuzilmasini loyihalash
Ma'lumotlar bazasi turi: Relatsion ma'lumotlar bazasi tanlanadi (masalan,
MySQL yoki PostgreSQL).
Jadvallarni aniqlash:
Mahsulotlar jadvali: mahsulot nomi, narxi, tavsifi, miqdori, kategoriya
ID kabi maydonlarni o‘zichiga oladi.
Foydalanuvchilar jadvali: foydalanuvchi ismi, email, parol (shifrlangan
holda), va rol (admin yoki oddiy foydalanuvchi).
Buyurtmalar jadvali: buyurtma ID, foydalanuvchi ID, mahsulotlar
ro ‘yxati, umumiy narx, va buyurtma sanasi.
Kategoriyalar jadvali: mahsulot kategoriyalari uchun nom va ID
saqlanadi.
ER-diagramma yaratish: Ma'lumotlar bazasidagi jadvallar va ularning o‘zaro
bog ‘lanishini ko ‘rsatuvchi diagramma tuziladi.
2. Server tomoni dasturlash
Tanlangan dasturlash tili va ramka (framework):

28
Backend dasturlash uchun Python (Django yoki Flask) yoki Node.js (Express.js)
ishlatiladi.
Asosiy funksionallarni ishlab chiqish:
Foydalanuvchi autentifikatsiyasi va avtorizatsiyasi:
Foydalanuvchilarni ro ‘yxatdan o‘tkazish (signup) va tizimga kirish (login)
imkoniyati.
JWT (JSON Web Token) yordamida foydalanuvchi sessiyalarini boshqarish.
Ma'lumotlarni CRUD operatsiyalari:
Create: Mahsulotlar, kategoriyalar yoki foydalanuvchi ma'lumotlarini qo ‘shish.
Read: Mahsulotlar va foydalanuvchi buyurtmalari haqidagi ma'lumotlarni o‘qish.
Update: Mahsulot ma'lumotlarini yangilash yoki foydalanuvchi profilini tahrirlash.
Delete: Mahsulot yoki buyurtmani o‘chirish imkoniyati.
RESTful API yaratish:
Frontend bilan aloqani ta'minlash uchun barcha ma'lumotlar API orqali uzatiladi.
Masalan: /products ,/orders ,/users kabi yo ‘llar.
3. Xavfsizlikni ta'minlash
Parolni shifrlash: Foydalanuvchilarning parollari bcrypt yoki hashlib
yordamida shifrlanadi.
SQL Injection hujumlariga qarshi choralar: Dasturda
parametrizatsiyalangan so ‘rovlar ishlatiladi.

29
Ma'lumotlarni himoya qilish: HTTPS ulanishi va xavfsiz cookie'larni ishlatish.
4.3. Saytni integratsiya qilish va test qilis h
Integratsiya qismida frontend va backend birlashtiriladi. Ushbu bosqichda
quyidagilar amalga oshiriladi:
Frontend va backend ulanishi: JavaScript orqali API so ‘rovlarini amalga
oshirish va ma'lumotlarni foydalanuvchiga ko ‘rsatish.
Test qilish: Saytning barcha sahifalari va funksiyalari sinovdan o‘tkaziladi.
Sinov turlari:
Funksional testlar (barcha funksiyalar to ‘g‘ri ishlayotganini tekshirish)
Stress-testlar (sayt yuqori yuklamada qanday ishlashini tekshirish)
Xavfsizlik testlari (ma'lumotlar himoyalanganligini tekshirish)
Xatolarni bartaraf etish: Testlar davomida topilgan xatolar to ‘g‘irlanadi.
HTML kodlari :Index.php
1-sahifa
Ko ’rgazma web saytining HTML QISMI:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ko'rgazmalar Markazi</title>
<link rel="stylesheet" href="style.css">

30
</head>
<body>
<header>
<div class="container">
<h1>Ko'rgazmalar Markazi</h1>
<nav>
<ul>
<li><a href="#about">Biz haqimizda</a></li>
<li><a href="#services">Xizmatlar</a></li>
<li><a href="#contact">Aloqa</a></li>
</ul>
</nav>
</div>
</header>
<section id="hero">
<div class="container">
<h2>Bizning ko'rgazmalar markaziga xush kelibsiz!</h2>
<p>Yangi innovatsiyalar va kreativ g'oyalar maydoni</p>
<a href="#services" class="btn">Xizmatlarni ko'rish</a>
</div>
</section>
<section id="about">
<div class="container">
<h2>Biz haqimizda</h2>
<p>Ko'rgazmalar markazi tadbirkorlar, ijodkorlar va mutaxassislar uchun
maxsus yaratilgan joydir. Biz yangi texnologiyalar va yangiliklarni ommaga
taqdim etamiz.</p>
</div>
</section>

31
<section id="services">
<div class="container">
<h2>Xizmatlarimiz</h2>
<ul class="services-list">
<li>Ko'rgazmalar tashkil qilish</li>
<li>Tadbirkorlik treninglari</li>
<li>Yangi texnologiyalarni tanishtirish</li>
</ul>
</div>
</section>
<section id="contact">
<div class="container">
<h2>Aloqa</h2>
<form action="#">
<label for="name">Ism:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Xabar:</label>
<textarea id="message" name="message" rows="5"
required></textarea>
<button type="submit">Yuborish</button>
</form>
</div>
</section>
<footer>

32
<div class="container">
<p>© 2025 Ko'rgazmalar Markazi. Barcha huquqlar
himoyalangan.</p>
</div>
</footer>
</body>
</html>
Ko ’rgazma web saytining CSS kodlari
Sahifa
CSS QISMI
/* Umumiy sozlamalar */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
color: #333;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
}

33
header h1 {
text-align: center;
margin: 0;
}
nav ul {
display: flex;
justify-content: center;
list-style: none;
padding: 0;
}
nav ul li {
margin: 0 15px;
}
nav ul li a{
color: #fff;
text-decoration: none;
}
#hero {
background: url('https://via.placeholder.com/1500x500') no-repeat center
center/cover;
color: #fff;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
#hero h2 {
font-size: 2.5rem;

34
margin: 0;
}
#hero .btn {
display: inline-block;
margin-top: 15px;
padding: 10px 20px;
background: #ff6f61;
color: #fff;
text-decoration: none;
border-radius: 5px;
}
#hero .btn:hover {
background: #ff4b33;
}
section {
padding: 20px 0;
}
#services .services-list {
list-style: none;
padding: 0;
display: flex;
justify-content: space-around;
}
#services .services-list li {
background: #f4f4f4;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;

35
}
form {
max-width: 500px;
margin: auto;
}
form label {
display: block;
margin-top: 10px;
}
form input, form textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}
form button {
margin-top: 10px;
padding: 10px 20px;
background: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
form button:hover {
background: #555;
}

36
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
4.4 Foydalanuvchi interfeysini optimallashtirish
Foydalanuvchi interfeysini optimallashtirish quyidagi qadamlarni o‘zichiga oladi:
Navigatsiyani yaxshilash: Menyular va qidiruv funksiyalari oson
tushuniladigan va qulay bo ‘lishi kerak.
Sayt tezligini oshirish: Keraksiz JavaScript kodlarini minimallashtirish,
rasmlarni siqish va kechikishlarni kamaytirish orqali sayt tezligi oshiriladi.
Mobil moslashuvchanlik: Sayt barcha qurilmalarda, jumladan smartfon va
planshetlarda qulay ishlashini ta'minlash.
Foydalanuvchi tajribasini kuzatish: Foydalanuvchilarning sayt bilan
o‘zaro aloqasini kuzatib, kerakli yaxshilashlar kiritis h.
1-sahifa

37
2-sahifa
3-sahifa

38
4-sahifa
5-sahifa

39
6-sahif a
7-sahifa

40
Xulosa
Vebsaytni tuzishda asosan HTML, CSS va PHP foydalandim. Saytni
tuzishda quyidagi HTML semantik elementlaridan foydalanildi: <header>, <nav>,
<section> hamda <footer> lardan foydalangan holda tuzildi. Hamda asosan <div>,
<h2>, <h3>, <h4>, <h5>, <p>, <img>, <li>, <ul>, <a>, <i>, <span>, <br>,
<button> va boshqa HTML teglari orqali veb sayt tuzildi. Shuningdek, asosan
classlar orqali saytga style (dizayn) berildi. Css fayllarda saytni bezash uchun turli
kodlar yozildi. OS panel orqali bazaga bog ’langan. Saytga endigina tashrif
buyurgan uchun ro ’yxatdan o’tish orqali bazaga ma ’lumotlar yig ’ilib boradi. Men
bilan hamkorlikda ishlamoqchi bo ’lganlar uchun bog ’lanish imkoni
mavjudSaytning asosiy maqsadi o’zim haqimda qisqacha rezume tuzish, ishga
kirishda va o’z qobiliyatlarim haqida boshqalarga tushuncha berish maqsad
qilingan.
 Sayt uchun domen nomi (domen): Sayt yaratish uchun texnik
topshiriqlarni tayyorlash bosqichida ham sayt uchun domen nomi to ‘g‘risida qaror
qabul qilish maqsadga muvofiqdir. Agar domen oldindan ro ‘yxatdan o‘tmagan
bo ‘lsa, unda siz mos bo ‘lgan bepul domen nomini tanlashingiz va uni ro ‘yxatdan
o‘tkazishingiz kerak.
 Saytning tuzilishi: Saytni ishlab chiqish bo ‘yicha texnik topshiriq
doirasida saytning kelajakdagi tuzilishini (saytning asosiy bo ‘limlari, bo ‘limlari va
sarlavhalari, ularning mazmuni, xizmatlari) aniqlash kerak, shu bilan birga resursni
yanada rivojlantirish imkoniyatlari.
 Sayt navigatsiyasi: Saytning navigatsiya menyusini tashkil qilishning
oqilona shaklini aniqlash, saytning qulayligini yaxshilashga yordam beradigan
ba ’zi parametrlarni hisobga olish kerak.
 Web-sayt dizayni: Saytni yaratish bo ‘yicha texnik topshiriqda saytni
loyihalash uchun barcha asosiy talablar belgilanadi: optimal o‘lchamlari,

41
brauzerlararo muvofiqligi va boshqalar. Agar sayt etarlicha murakkab bo ‘lsa, sayt
sahifalarining prototiplari yaratiladi (sahifa sxemasining sxematik versiyasi).
 Saytning funktsionalligi: TOR-saytga tashrif buyuruvchilar uchun samarali
ishlash uchun zarur bo ‘lgan barcha xizmatlarni tavsiflaydi va nostandart dasturlar
uchun ularning ish algoritmini tavsiflaydi
Saytni bosqichma-bosqich yaratish mijoz tomonidan nazorat qilinadi. Har
bir bosqich oxirida tugallangan natija mijozga namoyish etiladi va u bilan
kelishiladi. Bu buyurtmachiga pudratchining ishini boshqarishda, pudratchida esa
mijoz o‘z ishining natijalaridan qoniqadimi yoki yo ‘qligini tushunishga yordam
beradi. Sayt yaratish uchun texnik topshiriqni ishlab chiqish sayt yaratish bo ‘yicha
mavjud marketing topshirig ‘ini har tomonlama baholash bilan boshlanadi.

42
Foydalanilgan adabiyotlar
1. John F. Hughes, Andries van Dam, Morgan McGuire "Computer Graphics:
Principles and Practice", Addison-Wesley Professional. 2014, p.1264.
2. Steve Marschner, Peter Shirley "Fundamentals of Computer Graphics", A K
Peters/CRC Press. 2018, p.734.
3. Isaac V. Kerlow "The Art of 3D Computer Animation and Effects", Wiley.
2020, p.512.
4. Sergei Savchenko "3D Graphics Programming: Games and Beyond", CRC
Press. 2019, p.480.
5. Toshio Iijima "Digital Design and Computer Graphics with Adobe Creative
Suite", Springer. 2021, p. 300.
6. Jon Duckett "HTML and CSS: Design and Build Websites", Wiley. 2011, p.512
7. Steve Krug "Don't Make Me Think: A Common Sense Approach to Web
Usability", New Riders. 2014 (3- нашр ), p.216.
8. O'Reilly Media "Learning Web Design: A Beginner's Guide to HTML, CSS,
JavaScript, and Web Graphics", Jennifer Niederst Robbins. 2018, p.808.
9. Ben Frain "Responsive Web Design with HTML5 and CSS", Packt Publishing.
2022, p.480.
10. Jon Duckett "JavaScript and JQuery: Interactive Front-End Web
Development", Wiley. 2014, p.640.
11 .Yuldashev ulmasbek Abdubanapovich.Web Dizayndan O ’quv Qo ’llanma.
Guliston-2022
12 .M.Aripov, Yu.Pudovchenko, K.Aripov. «Osnovi Internet » T.: O ‘zMU 2002.
13 .M. Aripov. «Informatika va hisoblash texnikasi asoslari ».Toshkent,2001 .
14 .https://www.nuu.uz -Informatika o‘qitish metodikasi kursidan distantsion kurs.
O ‘zbekiston Milliy universiteti.

Ko‘rgazmalar markazi web-saytini yaratish

Купить

Похожие документы
3d-max dasturida obektlarni yaratish
Algoritm va ma’lumotlar strukturasi
3D-MAX dasturi haqida
3D Studio MAX dasturiga kirish. 3D Studio MAX dasturi haqida tushuncha
Adobe photoshop dasturida tasvirlarda ishlov berish,taqdimot yaratish