Mundarija kirish 2 I web ilovalarni yaratish tamoyillari 4



Download 3,83 Mb.
bet4/6
Sana05.04.2022
Hajmi3,83 Mb.
#529230
1   2   3   4   5   6
Bog'liq
hisobot

2.1 Web saytning strukturasi

Cooking.uz web saytida Bosh sahifa, kontakt va forum bo’limlari mavjud. Bu bo’limlarga kirib siz turli xildagi salatlar, taomlar, pishiriqlar, desertlar va non va sut mahsulotlarini retseptini va tayyorlanish jarayonlarini ko’rishingiz mumkin. Cooking.uz web saytning strukturasi quyidagi rasmda keltirilgan:



Pazandachilik forum





Bosh sahifa

kontaktimiz

forum



yangiliklar

Sayt administratori bilan bog’lanish

Turli maqolalar



Oshpaz maslahatlari

Ro’yxatdan o’tish

Xatdan o’tish


2-rasm. Pazandachilik forumi Web sayti strukturasi.


Web sayt dinamik bo’lishi uchun bosh sahifasini ma’lumotlar bazasi bilan bog’ladim. Ya’ni yangiliklar va o’zgartirishlarni saytning bosh sahifasiga joylashtirib borish mumkin. Yuqoridagi strukturada saytning ma’lumotlar bazasi bilan bog’langan qismi alohida belgilab ko’rsatilgan.
2.2 Web sahifani yaratish

Birinchi navbatda biz index.php php sahifasini yaratib olamiz. Bu bizda bosh sahifa hisoblanadi index.php yaratib bo’lingach biz dizayn uchun alohida style.css faylini yaratib olamiz va biz bunga o’zimizga kerakli parametrlarni, shriftlarni, fon va boshqa narsalarni kiritib chiqamiz. php fayliga o’zgartrish va kodlarni kiritshimiz uchun biz NotePad ++ dasturidan foydalandik. Uning boshqa dasturlardan farqi va yaxshi tarafi siz agar html kodini kiritayotgn vaqtda xatolik bo’lsa, qizil bilan belgilab beradi va html teg va kodlari dastur ichiga kiritlgan.


XAMPP dasturini o’rnatib oldik. Yaratilgan web saytimiz shu diskda quyidagicha joylashgan:
C:\xampp\htdocs\cooking\
Dinamik web sayt yaratish maqsadida php kodlaridan foydalanib phpMyadminda hosil qilingan bazani php dokument bilan bog’ladim. Dastlabki bosh sahifani BOSH SAHIFA qismini statik sahifa ko’rinishida yaratdik. Qolganlari malumotlar bazasi bilan bog’langan holda yaratildi :




3-rasm. Pazandachilik forumining ma’umotlari bazasi ko’rinishi.
Quyidagi kodlar orqali web sahifaga chaqirib oldim:
$connect = mysql_connect("localhost","root","") or die("serverga ulanishda xatolik!");
mysql_select_db("cooking") or die("bazaga ulanishda xatolik!");
?>
Index.php: include('theme/header.php');
$page = (isset($_GET['p'])&&$_GET['p']!='')?$_GET['p']:'home';
$page = "pages/".$page.".php";
#fayl mavjudligini tekshiradi
if(file_exists($page)){
include($page);}else{
include('pages/404.php');
}
include('theme/footer.php');
?>

Brauzerda ko’rinishi quyidagicha:



4-rasm. Bosh sahifaning ko’rinishi.
Qolgan barcha web sahifalarni yaratishda php va css dokumentlar hamda html, css kodlaridan foydalandim.



5-rasm. CSS va PHP dokumentlarni bog’lash.
Style.css bu biz yaratib olgan css dokumentdir. Bu yerdan OK tugmasini bosamiz va php bilan css dokument bog’lanadi. Buni php dokumenting teglari orasidagi kodlar yozilishidan bilib olsa bo’ladi.

Sayt navigatsiyasiga quyidagicha still berildi:



6-rasm. Navigatsiya panelining ko’rinishi.
CSS kodi quyidagicha:

Kursor navigatsiya paneliga borganda quyidagicha o’zgaradi:

7-rasm. Novigatsiya panelining kursor borgandagi ko’rinishi.
CSS kodi quyidagicha:
.navigation:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
font-style:normal;
font-weight:bold;
text-decoration:none;
background-color:YELLOW;
padding:8px;
color:#FFFFFF;
}
Sayt yuqori qismida joylashgan “cooking.uz-pazandachilik forum” logotip qismi quyidagicha:

8-rasm. “cooking.uz-pazandachilik forumi” qismi.

CSS kodi esa quyidagicha:



Cooking.Uz

-pazandachilik forumi


Sahifalardagi oddiy tekst matnlariga dizayn berish uchun class selektoridan foydalandik. Classimizni block-1-title deb nomladik.
CSS kodi quyidagicha:
.block-1-title {height:81px; white-space:nowrap;}
.block-1-title>span {display:block; font-size:18px; line-height:24px; font-style:italic; font-weight:bold; color:#b4b4b4; width:23px; float:left; margin-top:40px;}
.block-1-title>div.text-1 {font-family: 'Great Vibes', cursive; font-size:36px; line-height:45px; color:#131313; text-shadow:#a7a7a7 0 0 5px; display:inline-block; }
.block-1-title>div.text-1>strong {display:block; font-size:56px; line-height:70px; font-weight:normal; margin-top:-34px;}
.block-1-title>div.text-2 {font-family: 'Great Vibes', cursive; font-size:53px; line-height:65px; color:#131313; overflow:hidden; text-shadow:#a7a7a7 0 0 5px; padding-left:12px; padding-right:10px; display:inline-block; margin-top:-7px;}
.block-1-title>div.text-2>strong {display:block; font-size:44px; line-height:55px; font-weight:normal; margin-top:-36px; text-align:right;}
.block-1-title>div.text-3 {font-family: 'Great Vibes', cursive; font-size:33px; line-height:40px; color:#131313; overflow:hidden; text-shadow:#a7a7a7 0 0 5px; padding-left:6px; padding-right:10px; display:inline-block; margin-top:1px;}
.block-1-title>div.text-3>strong {display:block; font-size:62px; line-height:80px; font-weight:normal; margin-top:-36px; text-align:right; padding-left:18px;}
.block-1-title>div.text-4 {font-family: 'Great Vibes', cursive; font-size:36px; line-height:45px; color:#131313; text-shadow:#a7a7a7 0 0 5px; padding-left:5px; display:inline-block; }
.block-1-title>div.text-4>strong {display:block; font-size:61px; line-height:75px; font-weight:normal; margin-top:-38px;}
Web saytning o’rta qismida joylashgan kontakt bo`limini yaratish uchun quyidagi koddan foydalandik.


Download 3,83 Mb.

Do'stlaringiz bilan baham:
1   2   3   4   5   6




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish