Shaxsiy web sayt tayorlash va uni shakllantirish. Shakllantirgan web saytimiz imkoniyatlarini JavaScript yordamida oshirish

Shaxsiy   web   sayt   tayorlash   va   uni   shakllantirish.   Shakllantirgan
web saytimiz imkoniyatlarini JavaScript yordamida oshirish .
Reja :
A) JavaScript haqida umumiy ma’lumot 
B) Ishning maqsadi; 
D) Masalani yechish qadamlari; 
E) Xulosa.   A) JavaScript haqida umumiy ma’lumot  
JavaScript   -   bu   veb-ishlab   chiqish   uchun   ishlatiladigan   dasturlash   tili   va
odatda   brauzer   tomonida   ishlaydi.   Bu   yerda   JavaScript   haqida   ba'zi   asosiy
ma'lumotlar:
1.   Brauzer   tili:   JavaScript   brauzerlar   tomonidan   qo‘llab-quvvatlanadigan
dasturlash tilidir. Brauzerda ishlaydigan JavaScript kodlari veb-sahifalarning xatti-
harakatlarini   o'zgartirish   va   foydalanuvchi   o'zaro   ta'siri   bilan   birga   dinamik
tarkibni yaratish uchun ishlatiladi.
2. Obyektga yo'naltirilgan: JavaScript - bu obyektga yo'naltirilgan dasturlash
tili.   Obyektlar   -   bu   xususiyatlar   va   usullarni   o'z   ichiga   olgan   ma'lumotlar
tuzilmalari   va   obyektga   yo'naltirilgan   dasturlash   tushunchalari   JavaScript-da
muhim ahamiyatga ega.
3.   Dinamik   va   moslashuvchan:   JavaScript   dinamik   va   moslashuvchan   til
sifatida  tanilgan.   O'zgaruvchilar   turlari   avtomatik   ravishda   aniqlanadi   va   dinamik
ravishda   o'zgarishi   mumkin.   Bu   kod   yozishni   osonlashtiradi,   lekin   ehtiyotkorlik
bilan foydalanishni talab qiladi.
4.   Multi-Platform:   JavaScript   brauzerlar   bilan   cheklanmaydi;   Node.js   kabi
platformalar   tufayli  server  tomonidagi  ilovalar   ham   ishlab  chiqilishi   mumkin.  Bu
JavaScript-ni ko'p qirrali tilga aylantiradi.
5.   Keng   foydalanish   doirasi:   JavaScript   zamonaviy   veb-ishlab   chiqish
jarayonlarining   ajralmas   qismiga   aylandi.   U   veb-sahifalarga   interaktiv   elementlar
qo'shish, shakllarni tekshirishni amalga oshirish va AJAX orqali server bilan aloqa
qilish kabi ko'plab vazifalarda qo'llaniladi.
6.   ECMAScript   standartlari:   JavaScript   standartlarini   belgilaydigan   rasmiy
hujjat   ECMAScript   hisoblanadi.   Turli   xil   brauzerlar   ECMAScript-ning   turli
versiyalarini qo'llab-quvvatlaydi, bu muvofiqlikning muhim omilidir.
7. Kutubxonalar va ramkalar: JavaScript-dan foydalanishni yanada qulayroq
qilish   uchun   ko'plab   kutubxonalar   va   ramkalar   ishlab   chiqilgan.   Masalan,   React,
Vue.js,   Angular   kabi   zamonaviy   veb-ilovalarni   ishlab   chiqish   ramkalari
JavaScript-ga asoslangan.
JavaScript-ning   ushbu   xususiyatlari   uni   veb-ishlab   chiqishda   keng   qo'llash
imkonini  beradi. Yangi  boshlanuvchilar  uchun JavaScript-ning asosiy tuzilmalari,
o'zgaruvchilari, funktsiyalari va obyektga yo'naltirilgan dasturlash tushunchalarini
o'zlashtirish muhimdir. B)  Ishning maqsadi:   Web sahifaga elementlarni JavaScript orqali animatsiya
yoki   qo’shimcha   imkoniyatlarni   yaratish.   Web   sahifada   Hamburger   Menu
qo’shish va uni JavaScript yordamida ishlatish.
C)  Masalani yechish qadamlari:
1.  HTML strukturasini ishlab chiqish va undagi kerakli bo’lgan blok va strukturani
to’g’ri     tuzish.   Berilgan   kodda   keyinchalik   web   saytimizning   asosiy   sahifasida
ko’rinishi kerak bo’lgan blog-postlarni ishlab chiqish uchun qo’llaniladigan qismi
ya’ni   /new/index.php   orqali   blog-postni   tashkil   qiluvchi   tarkibiy   qismlarni
foydalanuvchidan   olib,   ‘E`lon   qilish’   tugmasi   bosilganida   ushbularni   post   metodi
yordamida /new/insert/index.php fayliga yo’lladik.
<! DOCTYPE   html >
< html   lang = "en" >
< head >
        < meta   charset = "UTF-8" >
        < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >
        < link   rel = "icon"   href = "assets/head/favicon.ico"   type = "image/x-icon" >
        < link   href = "../css/bootstrap.min.css"   rel = "stylesheet" >
        < script   src = "../js/bootstrap.bundle.min.js" ></ script >
        < link   rel = "stylesheet"   type = "text/css"   href = "assets/body/style.css" >
        < title > Yangi post </ title >
< style >
        header  {
                background-color :  #333 ;
                color :  #fff ;
                padding :  10px   0 ;
                text-align :  center ;
                margin-bottom :  20px ;
       }
        h1  {
                margin :  0 ;
       }         p  {
                margin-top :  0 ;
       }
        .content  {
                background-color :  #fff ;
                padding :  20px ;
                border-radius :  5px ;
                box-shadow :  0   2px   5px   rgba ( 0 ,  0 ,  0 ,  0.1 );
       }
</ style >
</ head >
< body >
        < div   class = "container" >
                < header >
                        < img   id = "logo"   src = "assets/head/favicon.ico"     alt = ""   style = " max-
width: 120px; max-height: 120px;" >
                        < h6 >< br ></ h6 >< h1   style = "font-style: bold;font-family: 'Yataghan', 
monospace;" > FIKRIYOT </ h1 >
                        < p > Nodavlat internet-nashr </ p >
                </ header >
        </ div >
        < div   class = "container" >
                < h2   style  =  "text-align :center" > Yangi blog-post </ h2 >
                < form   method = "post"   action = "insert/index.php"   enctype = "multipart/form-
data" >
                        < label   for = "Title" > Sarlavha: </ label >
                        < input   type = "text"   id = "title"   name = "title"   required   maxlength = "50"
placeholder = "Sarlavha kiritish uchun..." >< br >
                        < label   for = "type" > Toifa: </ label >
                        < select   id = "type"   name = "type"   class = "form-select"   required  
minlength  =  '1' >
                                < option   value = ""   disabled   selected > Tanlang </ option >                                 < option   value = "quote" > Iqtibos </ option >
                                < option   value = "politic" > Siyosiy </ option >
                                < option   value = "economic" > Iqtisodiy </ option >
                                < option   value = "social" > Ijtimoiy </ option >
                                < option   value = "literal" > Adabiy </ option >
                        </ select >
                        < label   for = "fulltext" > Matn: </ label >
                        < textarea   name = "text"   id = "fulltext"   class = "form-control"  
placeholder = "Matn kiritish uchun..." ></ textarea >
                        < label   for = "rasm-input" > Rasm: </ label >
                        < div   class = "input-group mb-3" >
                        < input   type = "file"   class = "form-control"   id = "post_pic"   name = "rasm"  
accept = ".png,.jpg,.jpeg,.gif,.svg"   onchange = " rasmKorsat ( event )" >
                        </ div >
                        < h6 >< br ></ h6 >
                        < div   class = "container-img" >
                                < div   class = "image-container"   >                                                                
                                        < img   id = "tanlangan-rasm"   src = "#"   alt = ""   style = "max-width: 
600px; max-height: 600px;" >
                                </ div >
                        </ div >
                < script >
                        function   rasmKorsat ( event ) {
                                const   input  =  event . target ;
                                if  ( input . files  &&  input . files [ 0 ]) {
                                        const   rasm  =  document . getElementById ( 'tanlangan-rasm' );
                                        rasm . src  =  URL . createObjectURL ( input . files [ 0 ]);
                                        rasm . onload  =  function () {
                                                URL . revokeObjectURL ( rasm . src );
                                       }
                               }                        }
        </ script >
                < div   class = "sub" >
                        < input   type = "submit"   name = "submit"   value = "E'lon qilish" >
                </ div >
                </ form >
        </ div >
</ body >
</ html >
Shu   yerda   bir   narsani   aytib   ketish   joizki,   yuqoridagi   kodda   ichki   js
qo’llanilgan.   Bunda,   formaning   fayl   tanlash   bo’limi   yordamida   faqat   rasm
fayllarini   tanlanadigan   qilingan   hamda   rasm   tanlangani   zahoti   javascript
yordamida uni ushbu sahifaning o’zida oldindan ko’rish imkoniyati hosil qilingan.
Quyidagi   kodda   esa   /new/insert/index.php   faylining   ichi   keltirilgan   bo’lib,
ushbu fayl /new/index.php faylidan yuborilgan ma’lumotlarni $_POST superglobal
o’zgaruvchisi   yordamida   olmoqda   va   ularni   boshqa   o’zgaruvchilarga   ta’minlab
olyapti.   So’ngra,   uning   ichidagi   MB   ga   yozish   murakkablik   tug’dirishi   mumkin
bo’lgan   va   yoki   SQL   bilan   ishlashda   xatolik   hosil   qilayotgan   belgi   soddaroq   va
xatolik   hosil   qilmaydigan   belgi   bilan   almashtirmoqda.   So’ngra,   ularni   MB   ga
yozmoqda. Biz ichki js ni ayni shu joyda qo’lladik. Ya’ni, agar ma’lumotlarni MB
ga yozish muvaffaqiyatli kechsa, sahifada “ Post muvaffaqiyatli  joylandi! ”
yozuvi tushirilgan alert oynasi chiqadi hamda, toki yopish tugmasi bosilmagunicha
sahifa   yuklanishi   to’xtaydi.   Yopish   tugmasi   bosilishi   bilan   foydalanuvchi   yana
/new/index.php sahifasiga yo’naltiriladi hamda yangi blog post tayorlash mumkin
bo’ladi. Agar mabodi nimadir sabab tufayli ma’lumotlar MB ga yozilmasa sahifada
“ Xatolik: ”   yozuvi   va   ushbu   xatolik   nomi   va   kodi   alertda   chiqdi   va   bunda   ham
yopish tugmasi chiqadi. Yopish tugmasi bosilganida foydalanuvchi /new/index.php
sahifasiga yo’naltiriladi hamda yangi blog post tayorlash yoki avvalgisini qaytadan
kiritishga   k=harakat   qilishi   mumkin   bo’ladi.   Ushbu   alertlarni   hosil   qilishda   ichki
jsdan foydalandim.
<?php
require  ( "../../assets/config.php" );
?>
<! DOCTYPE   html >
< html   lang = "en" > < head >
        < meta   charset = "UTF-8" >
        < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >
        < link   href = "css/bootstrap.min.css"   rel = "stylesheet" >
        < script   src = "js/bootstrap.bundle.min.js" ></ script >
        < link   rel = "icon"   href = "../../assets/head/favicon.svg"   type = "image/x-icon" >
        < link   rel = "stylesheet"   type = "text/css"   href = "../../assets/body/style.css" >
        < title > Yangi post </ title >
        < style >
                header  {
                        background-color :  #333 ;
                        color :  #fff ;
                        padding :  10px   0 ;
                        text-align :  center ;
                        margin-bottom :  20px ;
               }
                h1  {
                        margin :  0 ;
               }
                p  {
                        margin-top :  0 ;
               }
                .content  {
                        text-align :  center ;
                        background-color :  #fff ;
                        padding :  20px ;
                        border-radius :  5px ;
                        box-shadow :  0   2px   5px   rgba ( 0 ,  0 ,  0 ,  0.1 );
               }                 div  {
                        text-align :  center ;
               }
        </ style >
</ head >
< body >
        < br >
        < div   class = "container" >
                < header >
                        < img   id = "logo"   src = "assets/head/favicon.ico"   alt = ""   style = " max-
width: 120px; max-height: 120px;" >
                        < h1   style = "font-style: bold;font-family: 'Yataghan', 
monospace;" > FIKRIYOT </ h1 >
                        < p > Nodavlat internet-nashr </ p >
                </ header >
        </ div >
        <?php
                if  (! empty ( $_POST [ 'title' ]) and ! empty ( $_POST [ 'type' ]) and !
empty ( $_POST [ 'text' ])) {
                        // Formadan kelgan ma'lumotlarni olish
                        $title  =  $_POST [ 'title' ];
                        $type  =  $_POST [ 'type' ];
                        $text  =  $_POST [ 'text' ];
                        $author  =  $_POST [ 'author' ];
                        //replacing
                        $title  =  str_replace ( "'" ,  "`" ,  $title );       
                        $text  =  str_replace ( "'" ,  "`" ,  $text );       
                        $author  =  str_replace ( "'" ,  "`" ,  $author );     
                        //bazaga yozish
                        $sql  =  " INSERT INTO  post (title, type , text ,author)  VALUES  
(' $title ', ' $type ', ' $text ', ' $author ')" ;                         //post joylanganligi yoki yo'qligi haqida ma'lumot berish
                        if  ( $conn -> query ( $sql ) ===  TRUE ) {
                                echo   "<script>alert('Post muvaffaqiyatli joylandi!'); 
window.location.href = '../';</script>" ;
                       }  else  {
                                echo   "<script>alert('Xatolik: "  .  $sql  .  " \\ n"  .  $conn -
> error  .  "'); window.location.href = '../';</script>" ;
                       }
                        // Bog'lanishni yopish
                        $conn -> close ();
               }
        ?>
</ body >
</ html > Ushbu alert oynasi yuqoridagi ichki js yordamida hosil qilindi.
Bu /new/index.php sahifasi ko’rinishi.