Yaxshi ishlab chiqilgan filtr kuchli vosita foydalanuvchilar foydalanishi mumkin. Agar veb-saytingizda (onlayn do'kon) turli toifalarga bo'lingan mahsulotlar ko'p bo'lsa, bu aslida muhim xususiyatdir.

MANBALAR

Elektron tijorat uchun bu foydalanuvchi qidirayotgan narsani topish vaqtini qisqartirish orqali konversiya stavkalarini oshirish usulidir.

Bunday funksionallikni yaratish hech qachon oson emas: filtrlar veb-sayt mazmuniga juda bog'liq; Bundan tashqari, filtr paneli chalg'itmasligi kerak, asosiy e'tibor kontent/mahsulotlarga qaratilishi kerak. Shuning uchun biz siz uchun osongina sozlanishi va integratsiyalashuvi oson CSS filtr panelini qurish orqali hayotingizni biroz osonlashtirishga harakat qildik.

U kerak bo'lganda muammosiz o'tish uchun CSS Transitions, CSS Transformations va jQuery-dan foydalanadi.

Strukturani yaratish

HTML tuzilishi odatdagidan biroz murakkabroq. Avvalo, ikkita asosiy tarkib bloklari mavjud: sarlavha va asosiy elementlar, ikkinchisi ham .cd-gallery, ham .cd-filtrni o'rash uchun ishlatiladi. Bunga qo'shimcha ravishda, bizda ichki navigatsiya mavjud (2 div elementi ichiga joylashtirilgan, ochiladigan menyuda ko'rinadigan effekt tufayli mobil qurilmalar) va filtr trigger.cd-filter-trigger.

Bundan tashqari, siz ko'plab sinf nomlarini (masalan, galereya ro'yxati elementlarida) va ma'lumotlar filtrlarini ko'rishingiz mumkin: ular uslubni emas, balki tarkibni filtrlash uchun ishlatiladi.

Eslatma. .cd-gallery> li.gap elementining maqsadi matn bilan birgalikda ishlashdan iborat: justify; Galereya toʻplamini yaratish uchun xususiyat .cd-gallery uchun qoʻllaniladi. Qancha ko'p .gap elementlarini yaratishingiz kerak maksimal miqdor-1 qatoridagi elementlar.

Kontent filtri

• 
  Hammasi
  


• Hammasi


• Rang 1


• Rang 2

• 


• 

Hech qanday natija topilmadi

Blok sarlavhasi

Yopish

Filtrlar

Uslub qo'shish

CSS-ning aksariyati shakl elementlarini va boshqa asosiy bezaklarni shakllantirishga qaratilgan. Qizig'i shundaki, biz jQuery bilan birgalikda ba'zi bir sinflarni qanday qilib aniqladik va ishlatdik - ba'zi hodisalarga asoslangan ba'zi elementlarning xatti-harakatlarini o'zgartirish uchun.

Masalan: barcha qurilmalarda filtr paneli ko'rish oynasining yuqori qismiga yetganda muzlab qoladi. Ushbu effektga erishish uchun biz asosiy elementga (.cd-main-content) qo'llaniladigan .is-fixed sinfidan foydalandik, shunda biz uning ba'zi bolalarini yo'naltira olamiz. Xususan: .cd-tab-filter-wrapper statik holatda, .cd-filter va .cd-filter-trigger esa mutlaq holatda (.cd-main-contentga nisbatan). .is-fixed sinfini .cd-main-contentga qo'llaganimizda, biz ushbu elementlarning barchasini o'rnini Fixed-ga o'tkazamiz.

Cd-tab-filtr-oʻrash (fon rangi: #ffffff; z-indeks: 1;).Cd-filtr (joylashuv: mutlaq; tepa: 0; chap: 0; kenglik: 280px; balandlik: 100%; fon: #ffffff;z-indeks: 2; transform: translateX (-100%); o'tish: transform 0,3s, quti soyasi 0,3s;) .cd-filtr-trigger (pozitsiya: mutlaq; tepa: 0; chap: 0; balandlik: 50px; kenglik: 60px; z-indeks: 3;) .cd-main-content.is-fikslangan .cd-tab-filtr-oʻrash (joylashuv: qattiq; tepa: 0; chap: 0; kenglik: 100% ;) .cd-main-content.fikslangan .cd-filtr (joylashuvi: belgilangan; balandlik: 100vh; toshib ketish: yashirin;) .cd-asosiy-kontent.tugallangan .cd-filtr-trigger (joylashuvi: qattiq ;)

Yana bir narsani eslatib o'tish joizki, .filter-is-visible sinfidir. Foydalanuvchi filtr panelini ishga tushirganda, u bir nechta elementlarga qo'llaniladi. Barcha qurilmalarda u .cd-filtr elementining translateX qiymatini o'zgartirish uchun ishlatiladi (-100% dan 0 gacha). Katta qurilmalarda (> 1170px) biz .cd-gallery va .cd-tab-filtrni ham maqsad qilib olamiz va ularning kengligini kamaytiramiz: shu tariqa panel kontent bilan bir-biriga yopishmaydi va foydalanuvchi undan foydalanadi. qo'shimcha funktsiyalar Panelni yopmasdan, bir vaqtning o'zida filtrlarni qo'llash va o'zgarishlarni ko'rish uchun bo'sh joy.

Tadbirni boshqarish

Kontent filtri funksiyasini amalga oshirish uchun biz MixItUp jQuery plaginini birlashtirdik. Plaginni galereya konteynerida ishga tushirish uchun biz mixItUp () funksiyasidan foydalanamiz va barcha maxsus sozlamalarni o'z ichiga olgan tugma Filter o'zgaruvchisini e'lon qilamiz. funksionallik filtr. Bundan tashqari, biz jQuery-dan filtr panelini ochish/yopish va uni tuzatish uchun (yorliqli navigatsiya bilan birga) foydalanamiz, shunda u galereya bo'ylab aylanayotganda ham ko'rinadi.

Qanday ishlatish

Birinchidan, plagin arxivini ishlab chiquvchi sahifasidan yuklab olishingiz va uni saytingizdagi katalogga ochishingiz kerak. Ikkita versiya mavjud - minimallashtirilgan (ishlab chiqarish versiyasi) va ishlab chiquvchilar uchun (ishlab chiqish versiyasi). Ishlab chiquvchilar uchun versiyada plagin matni sharhlar bilan tuzilgan shaklda taqdim etiladi, bu uning qanday ishlashini tushunish uchun qulaydir (dars uchun manba kodi tarjima qilingan sharhlar bilan ishlab chiquvchilar uchun plagin versiyasini o'z ichiga oladi).

Keyin bo'limga filtrlashdan foydalanishni rejalashtirgan sahifada plaginga ulanish kodini kiritishingiz kerak:

O'zgartirish kerak " / path_to_plugin /"Plagin joylashgan yo'lga liveFilter avvalroq ochganingiz. Siz ham o'zgartirishingiz kerak " element_to_filtrate” CSS selektori bu siz xohlagan elementga mos keladi.

Plagin parametri "variant" filtrlash paytida elementlarni yashirish va ko'rsatishda animatsiyadan foydalanishni nazorat qiladi. Quyidagi qiymatlar mavjud: Asosiy- elementlar shunchaki animatsiyasiz o'chiriladi / yoqiladi, slayd- filtrlangan elementlar qulab tushadi / kengayadi, so'nish - filtrlanadigan elementlar asta-sekin yoqiladi / o'chiriladi.

Masalan:

$ (ul # filter_me "). liveFilter ("slayd");

Yuqoridagi kod LiveFilter plaginiga filtrlashni aytadi tartibsiz ro'yxat id bilan " filter_me"Va animatsiyadan foydalaning" slayd”.

Plagin tartibsiz va tartiblangan roʻyxatlar va jadvallar uchun ishlatilishi mumkin. Plaginni chaqirishda kerakli selektorni ko'rsatishingiz kerak.

Muhim! Plagin ishlashi uchun sinf bilan matn kiritish maydonini qo'shishingiz kerak "Filtr"... Ushbu maydon filtrlash matnini kiritish uchun ishlatiladi:

Filtrdan foydalanadigan sahifaga misol:

• Element raqami 1.
• Element raqami 2.
• 3-modda.
• 4-modda.
• № 5-modda.
• 6-modda.
• № 7-modda.
• 8-modda raqami.
• № 9-modda.
• Element raqami 10.

Plagin kodi

(funktsiya ($) ($ .fn.liveFilter = funktsiya (aType) (// Filtrlanishini aniqlang. var filterTarget = $ (bu); var bola; if ($ (bu) .is ("ul")) (child = "li";) else if ($ (bu) .is ("ol")) (child = "li";) else if ($ (bu) .is ("stol")) (child = " tbody tr ";) // O'zgaruvchilarni aniqlang var hide; var show; var filter; // $ kiritish elementi uchun hodisa (" input.filter "). keyup (funktsiya () (// Filtr qiymati filtrini oling = $ ( this) .val (); // Nimani yashirish va nimani ko'rsatishni oling yashirish = $ (filterTarget) .find (child + ": emas (: O'z ichiga oladi (" "+ filtr +" ")"); ko'rsatish = $ (filterTarget) .find (child + ": O'z ichiga oladi (" "+ filter +" "")") // Yashirish va ko'rsatish uchun elementlarni jonlantiring (aType == "basic") (hide.hide () ; show.show ();) else if (aType == "slide") (hide.slideUp (500); show.slideDown (500);) other if (aType == "fade") (hide.fadeOut (400 ); show. fadeIn (400);))); // katta-kichik harflarni sezmaydigan matn uchun maxsus ifoda funksiyalar () jQuery.expr [":"] ni o'z ichiga oladi. O'z ichiga = funktsiya (a, i, m) (jQuery (a) .text (). toLowerCase (). indexOf (m.toLowerCase ())> = 0; ); ))) (jQuery);

Biz mijoz haqida ma'lumot to'plash va uni serverga yuborishni o'rgandik. Va serverda ular kiritilgan parametrlar bo'yicha filtrlangan mahsulotlar qaytarilishi kerak bo'lgan joyga stub yozdilar. Endi biz stubdan xalos bo'lamiz va kerakli mahsulotlarni ma'lumotlar bazasidan tortib, mijozga qaytaradigan bir nechta usul va so'rovlarni yozamiz. Dars yetarlicha qisqa. Qani boshladik

Nima qilamiz?

Biz faqat 3 ballni to'ldirishimiz kerak:

• 1. Mijozdan ma'lumotlarni qabul qilish va uni server ehtiyojlari uchun qayta ishlash. Masalan, standart parametrlarni o'rnating
• 2. Aslida, ma'lumotlar bazasidan tovarlarni chiqarish uchun kodning o'zini yozing. Avvalo, sql so'rovini tayyorlang
• 3. Qabul qilingan ma'lumotlarni mijozga qaytaring

Mijozdan ma'lumotlarni qabul qilish

Siz so'rashingiz mumkin: agar biz $ _GET massividan barcha ma'lumotlarni osongina ajratib olsak, nima uchun bu oddiy operatsiyani alohida ajratishimiz kerak?

Birinchidan, standart qiymatlarni qo'yish uchun. Buni hal qilishda siz mijozga ishona olmaysiz.

Ikkinchidan, barcha ma'lumotlar foydalanish mumkin bo'lgan shaklda $ _GET da mavjud emas. Masalan, mijozdan tartiblashni field_direction shaklida bitta parametr sifatida o'tkazish biz uchun qulayroq, masalan, price_asc. Lekin sql so'rovida bu alohida ob'ektlar, shuning uchun ularni oldindan qayta ishlash kerak.

Vaziyat brendlar bilan o'xshash. Mijozda biz ularni massiv, brendlar sifatida yuboramiz va PHP ularni massiv sifatida ham qabul qiladi. Lekin sql-query uchun sizga satr kerak - vergul bilan ajratilgan brendlar ro'yxati. Shuning uchun brendlar ham qo'shimcha ishlov berishlari kerak.

Shunday qilib, keling, $ _GET dan ma'lumotlarni tortib oladigan va uni biz uchun qulay shaklga aylantiradigan getOptions () funksiyasini yozamiz. Men deyarli barcha kirish ma'lumotlarini berdim, shuning uchun biz darhol tayyor kodni ko'rib chiqamiz.

// _GET massivi funksiyasidan ma'lumotlarni olish getOptions () (// Turkum va narxlar $categoryId = (isset ($ _ GET ["category"]))? (Int) $ _ GET ["category"]: 0; $ minPrice = ( isset ($ _ GET ["min_price"]))? (int) $ _ GET ["min_price"]: 0; $ maxPrice = (isset ($ _ GET ["max_price"]))? (int) $ _ GET ["maksimal_narx" ]: 1000000; // Brendlar $ brendlar = (isset ($ _ GET ["brendlar"]))? Implode ($ _ GET ["brendlar"], ","): null; / / Saralash $ sort = (isset ($ _GET ["sort"]))? $ _GET ["sort"]: "price_asc"; $ sort = portlash ("_", $ sort); $ sortBy = $ sort; $ sortDir = $ sort; qaytish massivi (" brendlar "=> $ brendlar," category_id "=> $ categoryId," min_price "=> $ minPrice," max_price "=> $ maxPrice," sort_by "=> $ sortBy," sort_dir "=> $ sortDir);)

Bu erda biz birinchi navbatda toifaning identifikatorini olishimizni ko'rishimiz mumkin. Agar toifadan o'tmagan bo'lsa, biz kategoriya_id = 0 deb hisoblaymiz. Minimal narx 0, maksimal narx 1 million bo'ladi. Agar sizning onlayn-do'koningiz plutoniyni sotsa (xitoylarga moy, chumolilar bo'laklari), unda siz har doim kerakli chiziqqa nol qo'shishingiz yoki eng yomoni, evroda to'lovlarni amalga oshirishingiz mumkin.

Biz saralashni boshqacha tarzda o'zgartiramiz. Alohida, biz saralash maydonini va parametrni chiqaramiz: asc yoki desc.

Shuni esda tutingki, barcha holatlarda, agar talab qilingan parametr mijozdan kelmagan bo'lsa, biz standart qiymatni almashtirishni unutmaymiz. Va endi barcha ma'lumotlar o'zgartirilgandan so'ng, uni faqat assotsiativ massivdagi funktsiyadan qaytish massivi orqali qaytarish qoladi (...)

SQL so'rovini tayyorlash va ma'lumotlar bazasidan ma'lumotlarni olish

Barcha ma'lumotlar bizga kerakli shaklda tayyorlangan, endi biz so'rov yozamiz va uni bajaramiz. Bu getGoods ($ options, $ conn) funksiyasi tomonidan amalga oshiriladi. Parametrlar sifatida u $ variantlarini - oldingi funksiya tomonidan tayyorlangan ma'lumotlarni va $ conn - biz oldingi darsda yaratgan ma'lumotlar bazasiga ulanish ob'ektini qabul qiladi. Bizning vazifamiz sql so'rovini yozishdir. Umuman olganda, u quyidagicha ko'rinadi:

g.idni yaxshi_id sifatida, g.yaxshi deb, brend sifatida b.brendni, narx sifatida g.narxni, reyting sifatida g.reytingni, g sifatida tovarlardan fotosurat sifatida g.fotoni, b sifatida brendlarni tanlang, bunda g.category_id = tanlangan_toifa va g.brand_id (brand_list_ajratilgan_vergul) va g.brand_id = b.id va (past_narx va yuqori_narx o'rtasidagi g.narx) sort_field_sort_direction bo'yicha tartiblash

Biz bir qator qaerda bandlarini qo'llash va kerakli tartibni belgilash orqali kerakli maydonlarni olamiz. Narxlar va saralash bo'yicha hech qanday savol yo'q, biz so'rovning tegishli joylariga kerakli qiymatlarni almashtiramiz. Lekin siz toifa va brendlar bilan ehtiyot bo'lishingiz kerak va buning sababi.

Bizda mavjud bo'lgan har bir mahsulot har doim toifaga ega. Bizning ma'lumotlar bazasida nol toifasi tushunchasi yo'q - biz buni o'zimizga qulaylik uchun qildik, chunki brauzerda foydalanuvchi hech qanday toifani tanlamagan (yoki hamma narsani tanlagan - biz uchun bu bir xil). Va bu holda, biz so'rovga qatorni kiritmasligimiz kerak
g.category_id = tanlangan_toifa va
Brendlar bilan ham xuddi shunday, agar ular tanlanmagan bo'lsa, biz tegishli qatorni o'tkazib yuboramiz. Bu kodda shunday ko'rinadi.

// Tovarlarni olish funksiyasi getGoods ($ variantlari, $ conn) (// Kerakli parametrlar $ minPrice = $ variantlari ["min_narx"]; $ maxPrice = $ variantlari ["maksimal_narx"]; $ sortBy = $ parametrlari ["sort_by"] ; $ sortDir = $ variantlari ["sort_dir"]; // Ixtiyoriy parametrlar$ categoryId = $ variantlari ["category_id"]; $ categoryQaerda = ($ kategoriya Id! == 0)? "g.category_id = $ categoryId va": ""; $ brendlar = $ variantlari ["brendlar"]; $ brendlarQaerda = ($ brendlar! == null)? "g.brand_id in ($ brendlar) va": ""; $ query = "g.idni yaxshi_id sifatida, g.yaxshi deb, brend sifatida b.brendni, narx sifatida g.narxni, reyting sifatida g.reytingni, g sifatida tovarlardan olingan fotosuratni, b sifatida brendlarni tanlang. categoryWhere $ brandsWhere g.brand_id = b.id va (g.narx $ minPrice va $ maxPrice oralig'ida) $ sortBy $ sortDir bo'yicha buyurtma "; $ data = $ conn-> so'rov ($ so'rov); $ data-> fetch_all (MYSQLI_ASSOC); )

Birinchidan, biz $ variantlari massividan narx va tartib o'zgaruvchilarni olamiz - ular shunchaki so'rovga o'zgarmagan holda kiritiladi. Kategoriya va brendlar uchun esa printsip bo'yicha $categoryWhere va $ brandsWhere qatorlarini shakllantiramiz: agar ma'lumotlar mavjud bo'lsa, qaerda bo'limi uchun zarur shart va ma'lumotlar bo'lmasa, bo'sh qator. Shunday qilib, biz barcha istaklarimizni inobatga oladigan juda oqilona SQL so'roviga ega bo'ldik. Oxirgi ikkita satr ushbu so'rovni bajaradi va funktsiyadan kerakli maydonlarga ega ob'ektlar majmuasini qaytaradi. Hamma narsani yig'ish va olingan tovarlarni allaqachon kutilayotgan mijoz / brauzerga yuborish qoladi.

Biz tovarni mijozga qaytaramiz

Bu darslikning eng oson qismi. Keling, oldingi o'quv qo'llanmadagi stubni ko'rib chiqaylik.

// Ma'lumotlar bazasiga ulanish $ conn = connectDB (); // Mijoz echo json_encode ga muvaffaqiyatli javob qaytaring (massiv ("kod" => "muvaffaqiyat", "ma'lumotlar" => $ _GET));

Keling, ushbu kodni bilan almashtiramiz

// Ma'lumotlar bazasiga ulanish $ conn = connectDB (); // Mijozdan ma'lumotlarni olish $ options = getOptions (); // Tovarni oling $ goods = getGoods ($ variantlari, $ conn); // Mijoz echo json_encode (massiv ("kod" => "muvaffaqiyat", "variantlar" => $ variantlari, "tovar" => $ mol) ga muvaffaqiyatli javob qaytaring;

Biz bir nechta qatorlarni qo'shdik: getOptions funksiyasidan foydalanib, biz $ parametrlari o'zgaruvchisiga ma'lumotlarni oldik. Biz darhol uni getGoods tovarlarini olish uchun ishlatdik, natijalar $ tovarda saqlandi. Va mijozga javobni kengaytirdi. Ma'lumotlar parametri parametrlarga qayta nomlandi va $ _GET tarkibini emas, balki allaqachon aylantirilgan qiymatlarni qaytardi. Va tovar parametrida olingan tovarlarning bir qatori qaytarildi.

Bu darsni yakunlaydi. Ushbu ma'lumotni mijozda ishlata olmasak-da, uni brauzerda ko'rsating - biz keyingi darsda bu bilan shug'ullanamiz. Lekin biz har doim konsolni ochishimiz, tugmachalarni va tasdiq belgilarini ochishimiz va server bizga to'g'ri mahsulotlarni qaytarishiga ishonch hosil qilishimiz mumkin.

Ish natijalarini tekshirish

Keling, smartfonlar toifasini tanlaymiz va Apple va Samsung brendlarini belgilaymiz. Javobda biz server narxning o'sish tartibida tartiblangan 3 ta mahsulotni qaytarib berganini ko'ramiz.

Endi minimal narxni 20 ming qilib qo'yib, saralashni pasayuvchi narxlarga o'zgartiramiz
Ko'rib turganingizdek, hozir bor-yo'g'i 2 ta mahsulot bor - bitta Samsung filtrlar bo'yicha 17 ming noo'rin narx tufayli tushib ketgan. Tovar esa aksincha saralanadi. Agar siz hamma narsani to'g'ri bajargan bo'lsangiz, xuddi shu rasmni ko'rasiz.

Siz konsol bilan yana bir oz o'ynashingiz va ma'lumotlarning to'g'ri qaytarilganligiga ishonch hosil qilishingiz mumkin. Oxir-oqibat, eng muhimi, filtrlarning to'g'ri ishlashiga erishish, mahsulotlarning to'g'ri ro'yxatini qaytarishdir. Qabul qilingan ma'lumotlarni sahifa bo'ylab tarqatish, tayyor tartibni hisobga olgan holda, tashqi tomondan eng qiziqarli narsa, ammo rivojlanish nuqtai nazaridan bu juda oddiy. Ammo men o'zimdan oldinga chiqmayman - tafsilotlar keyingi darsda.

Material asosan boshlang'ich veb-dasturchilar uchun mo'ljallangan.

Kirish.

Menga tez-tez o'z-o'zidan yozilgan CMS yoki yangi veb-dasturchilar tomonidan yozilgan modullar o'rnatilgan mijozlar murojaat qilishadi, ular ma'lumotlarni himoya qilish uchun nima kerakligini tushunmaydilar va ko'pincha filtrlash funktsiyalarini qanday ishlashi va ular bilan nima qilish kerakligi haqida o'ylamasdan nusxa ko'chirishadi. .

Bu erda men ma'lumotlarni filtrlashda keng tarqalgan xatolarni iloji boricha batafsil tavsiflashga harakat qilaman PHP skripti va bering oddiy maslahatlar ma'lumotlarni qanday qilib to'g'ri filtrlash kerak.

Internetda ma'lumotlarni filtrlash haqida ko'plab maqolalar mavjud, ammo ular to'liq emas va batafsil misollarsiz.

Debrifing.

Filtrlash. №1 xato

Raqamli o'zgaruvchilar uchun quyidagi tekshirish qo'llaniladi:
$ raqam = $ _GET ["kiritish_raqami"]; if (intval ($ raqam)) (... SQL so'rovini bajarish ...)
Nima uchun bu SQL in'ektsiyasiga olib keladi? Gap shundaki, foydalanuvchi o'zgaruvchida ko'rsatishi mumkin kiritish_raqami ma'nosi:
1 "+ UNION + SELECT
Bunday holda, tekshirish muvaffaqiyatli o'tadi. intval funktsiyasi o'zgaruvchining butun qiymatini oladi, ya'ni. 1, lekin o'zgaruvchining o'zida $ raqami hech narsa o'zgarmadi, shuning uchun barcha zararli kodlar SQL so'roviga o'tkaziladi.
To'g'ri filtrlash:
$ raqam = intval ($ _ GET ["kiritish_raqami"]); agar ($ raqami) (... SQL so'rovini bajaring ...)
Albatta, shart o'zgarishi mumkin, masalan, faqat ma'lum bir diapazonni olishingiz kerak bo'lsa:
agar ($ raqami> = 32 VA $ raqami<= 65)

Agar siz raqamli qiymatlar bilan belgilash katakchalari yoki ko'p tanlovlardan foydalanayotgan bo'lsangiz, buni belgilang:
$ checkbox_arr = massiv_xaritasi ("intval", $ _POST ["tasdiqlash qutisi"]);
massiv_xaritasi
Filtrni ham quyidagi shaklda uchrataman:
$ raqam = htmlspecialchars (intval ($ _ GET ["kiritish_raqami"]));
htmlspecialchars
Yoki:
$ raqam = mysql_escape_string (intval ($ _ GET ["kiritish_raqami"]));
mysql_escape_string

Bu tabassumdan boshqa hech narsa keltira olmaydi :)

Filtrlash. №2 xato.

Satr o'zgaruvchilari uchun quyidagi filtrlash qo'llaniladi:
$ input_text = qo'shimcha qirralar ($ _ GET ["kiritish_matn"]);
Addslashes funksiyasi maxsuslardan qochadi. belgilar, lekin ma'lumotlar bazasini kodlash va filtrlashni chetlab o'tishni hisobga olmaydi. Men ushbu zaiflikni ta'riflagan muallifning matnini ko'chirmayman va shunchaki Kris Shiflettga havola bermayman (tarjimani rus Internetida izlashingiz mumkin).

mysql_escape_string yoki mysql_real_escape_string funksiyasidan foydalaning, masalan:
$ input_text = mysql_escape_string ($ _ GET ["input_text"]);
Agar kirish niyatingiz bo'lmasa html teglari, keyin quyidagi filtrlashni amalga oshirish yaxshidir:
$ input_text = strip_tags ($ _ GET ["kiritish_matn"]); $ input_text = htmlspecialchars ($ input_text); $ input_text = mysql_escape_string ($ input_text);
strip_tags - html teglarini olib tashlash.
htmlspecialchars - maxsus o'zgartiradi. html ob'ektidagi belgilar.
Bu o'zingizni SQL in'ektsiyasidan tashqari XSS hujumlaridan himoya qiladi.
Agar sizga html teglari kerak bo'lsa, lekin faqat manba kodini ko'rsatish uchun bo'lsa, unda quyidagilardan foydalanish kifoya:
$ input_text = htmlspecialchars ($ _ GET ["kiritish_matn"]); $ input_text = mysql_escape_string ($ input_text);

Agar o'zgaruvchining qiymati bo'sh emasligi siz uchun muhim bo'lsa, trim funktsiyasidan foydalaning, masalan:
$ input_text = trim ($ _ GET ["kiritish_matn"]); $ input_text = htmlspecialchars ($ input_text); $ input_text = mysql_escape_string ($ input_text);

Filtrlash. Xato raqami 3.

Bu ma'lumotlar bazasini qidirishga tegishli.
Raqamlar bo'yicha qidirish uchun birinchi xatoda tasvirlangan filtrlashdan foydalaning.
Matn bo'yicha qidirish uchun ikkinchi xatoda tasvirlangan filtrlashdan foydalaning, lekin ogohlantirishlar bilan.
Foydalanuvchining mantiqiy xatoni amalga oshira olmasligi uchun maxsusni o'chirish yoki ekranga tushirish kerak. SQL belgilari.
Qo'shimchasiz misol. qatorni qayta ishlash:
$ input_text = htmlspecialchars ($ _ GET ["kiritish_matn"]); // Qidiruv: "%" $ input_text = mysql_escape_string ($ input_text);
Chiqishda biz forma so'rovini olamiz:
... QAYERDA matn_qatori "%" kabi. $ Kiritilgan_matn. "%" ... // QAYERDA matn_qatori "%%%" kabi
Bu bazaga yukni sezilarli darajada oshiradi.
Skriptimda men qidiruvdan kiruvchi belgilarni olib tashlaydigan funksiyadan foydalanaman:
strip_data funksiyasi ($ matn) ($ tirnoq = massiv ("\ x27", "\ x22", "\ x60", "\ t", "\ n", "\ r", "*", "%", "<", ">","? ","! "); $ goodquotes = massiv (" - "," + "," # "); $ repquotes = massiv (" \ - "," \ + "," \ # "); $ text = trim (strip_tags ($ text)); $ text = str_place ($ qo'shtirnoq, "", $ text); $ text = str_replace ($ goodquotes, $ repquotes, $ text); $ text = ereg_replace ("+" , "", $ matn); $ matnni qaytarish;)
Albatta, yuqoridagi belgilarning hammasi ham xavfli emas, lekin mening holimda ular kerak emas, shuning uchun men qidiruvni amalga oshiraman va almashtiraman.
Filtrdan foydalanishga misol:
$ input_text = strip_data ($ _ GET ["kiritish_matn"]); $ input_text = htmlspecialchars ($ input_text); $ input_text = mysql_escape_string ($ input_text);
Bundan tashqari, qidiruvdagi belgilar sonini cheklashni maslahat beraman, hech bo'lmaganda 3 dan kam bo'lmasligi kerak, chunki agar sizda ma'lumotlar bazasida ko'p sonli yozuvlar mavjud bo'lsa, unda 1-2 belgidan iborat qidiruv ma'lumotlar bazasidagi yukni sezilarli darajada oshiradi.

Filtrlash. №4 xato.

O'zgaruvchidagi qiymatlar filtrlanmaydi $ _COOKIE... Ba'zi odamlar, bu o'zgaruvchini forma orqali o'tkazib bo'lmasligi sababli, bu xavfsizlik kafolati deb o'ylashadi.
Ushbu o'zgaruvchini saytning cookie fayllarini tahrirlash orqali har qanday brauzer tomonidan aldash juda oson.
Masalan, bitta taniqli CMS-da ishlatilgan sayt shablonini tekshirish mavjud edi:
agar (@is_dir (MAIN_DIR. "/ shablon /". $ _COOKIE ["skin"])) ($ config ["skin"] = $ _COOKIE ["skin"];) $ tpl-> dir = MAIN_DIR. "/ shablon /". $ konfiguratsiya ["skin"];
V bu holat o'zgaruvchining qiymatini o'zgartirishingiz mumkin $ _COOKIE ["teri"] va xatoga sabab bo'ladi, buning natijasida siz sayt papkasiga mutlaq yo'lni ko'rasiz.
Agar siz ma'lumotlar bazasiga saqlash uchun cookie-fayllar qiymatidan foydalansangiz, yuqorida tavsiflangan filtrlardan birini ishlating, bu o'zgaruvchiga ham tegishli $ _SERVER.

Filtrlash. №5 xato.

Kiritilgan direktiv register_globals... Agar u yoqilgan bo'lsa, uni o'chirishni unutmang.
Ba'zi holatlarda siz o'tkazilmasligi kerak bo'lgan o'zgaruvchining qiymatini o'tkazishingiz mumkin, masalan, agar saytda guruhlar mavjud bo'lsa, $ guruhi o'zgaruvchisi bo'sh bo'lishi yoki 2-guruh uchun 0 ga teng bo'lishi kerak, ammo bu etarli. kodni qo'shish orqali shaklni soxtalashtirish uchun:

PHP skriptida o'zgaruvchi $ guruhi skriptda standart qiymat bilan e'lon qilinmagan bo'lsa, 5 ga teng bo'ladi.

Filtrlash. №6 xato.

Yuklab olishlaringizni tekshiring.
Quyidagi fikrlarni tekshiring:

1. Fayl kengaytmasi. Kengaytmali fayllarni yuklab olishni taqiqlash tavsiya etiladi: php, php3, php4, php5 va boshqalar.
2. Fayl serverga yuklangan move_uploaded_file
3. fayl hajmi

Imtihon. №1 xato.

Men AJAX so'rovi uchun (masalan: obro'sini oshirish) foydalanuvchi nomi yoki uning identifikatori (obro'si oshadigan) berilgan holatlarga duch keldim, lekin PHP-ning o'zida bunday foydalanuvchi mavjudligini tekshirish yo'q edi.
Masalan:
$ user_id = intval ($ _ REQUEST ["user_id"]); ... INSERT INTO REPLOG SET uid = "($ user_id)", plus = "1" ... ... YANGILANISh Foydalanuvchilar SET reputation = reputation + 1 WHERE user_id = "($ user_id)" ...
Ma'lum bo'lishicha, biz bazada rekord yaratamiz, bu biz uchun mutlaqo keraksiz.

Imtihon. №2 xato.

Ma'lumotlar bilan har xil turdagi harakatlarni (qo'shish, tahrirlash, o'chirish) amalga oshirayotganda, foydalanuvchining ushbu funktsiyaga kirish huquqlarini va qo'shimcha funktsiyalarni (html teglari yoki tekshirmasdan materialni nashr qilish qobiliyatidan foydalanish) tekshirishni unutmang.

Uzoq vaqt davomida har qanday foydalanuvchi ma'muriyat xabarini tahrirlashi mumkin bo'lgan forumning bir modulida shunga o'xshash xatoni tuzatdim.

Imtihon. Xato raqami 3.

Bir nechta ishlatganda php fayllari oddiy tekshirishni amalga oshiring.
Fayl ichida index.php(yoki boshqa har qanday asosiy faylda) boshqa PHP fayllarini qo'shishdan oldin ushbu qatorni yozing:
aniqlash ("READFILE", rost);
Boshqa PHP fayllarining boshida quyidagilarni yozing:
agar (! aniqlangan ("READFILE")) (chiqish ("Xato, noto'g'ri fayl usuli.
Asosiyga o'ting."); }
Bu fayllarga kirishni cheklaydi.

Imtihon. №4 xato.

Foydalanuvchilar uchun xeshlardan foydalaning. Bu XSS ning ma'lum bir funktsiyani chaqirishining oldini olishga yordam beradi.
Foydalanuvchilar uchun xeshni yaratishga misol:
$ secret_key = md5 (strtolower ("http://site.ru/". $ a'zosi ["ism"]. sha1 ($ parol). sana ("Ymd")))); // $ secret_key bizning xeshimizdir
Keyinchalik, barcha muhim shakllarda kirishni foydalanuvchining joriy xesh qiymati bilan almashtiring:

Skriptni bajarishda quyidagilarni tekshiring:
agar ($ _POST ["maxfiy_kalit"]! == $ maxfiy_kalit) (chiqish ("Xato: maxfiy_kalit!");)

Imtihon. №5 xato.

SQL xatolarini ko'rsatishda ma'lumotlarga kirishni oddiy cheklash. Masalan, GET o'zgaruvchisi uchun parol o'rnating:
agar ($ _GET ["passsql"] == "parol") (... SQL xatosi chiqishi ...) boshqacha (... Faqat xato haqida ma'lumot, tafsilotlar yo'q ...)
Bu xakerdan saytni buzishda yordam berishi mumkin bo'lgan ma'lumotlarni yashiradi.

Imtihon. №5 xato.

Fayl nomlarini tashqaridan olish orqali fayllarni qo'shmaslikka harakat qiling.
Masalan:
agar (isset ($ _ GET ["fayl_nomi"])) (o'z ichiga $ _GET ["fayl_nomi"]. ". php";)
Kalitdan foydalaning

CSS3 filtrlari brauzerda takrorlash vizual effektlar Photoshop filtrlariga o'xshash. Filtrlar nafaqat tasvirlarga, balki har qanday bo'sh bo'lmagan elementlarga ham qo'shilishi mumkin.

Filtrlar to'plami brauzerda oldindan o'rnatilganlar bilan cheklanmaydi. Shuningdek, siz SVG filtrlarini svg elementi bilan birga havoladan yuklab olib foydalanishingiz mumkin.

Filtrlar dastlab SVG spetsifikatsiyasining bir qismi sifatida yaratilgan. Ularning vazifasi vektor grafikasiga pikselli gridga asoslangan effektlarni qo'llash edi. Qo'llab-quvvatlash bilan SVG brauzerlari ushbu effektlarni to'g'ridan-to'g'ri brauzerlarda ishlatish mumkin bo'ldi.

Brauzerlar sahifani belgilangan effektlar bilan piksel-piksel ko'rsatadi va natijani asl nusxada ko'rsatadi. Shunday qilib, bir nechta filtrlarni qo'llash orqali siz turli effektlarga erishishingiz mumkin, ular bir-birining ustiga qo'yilganga o'xshaydi. Qanchalik ko'p filtrlar mavjud bo'lsa, brauzer sahifani ko'rsatish uchun shuncha ko'p vaqt talab etadi.

Siz bir vaqtning o'zida bir nechta filtrlarni qo'llashingiz mumkin. Ushbu effektlarni qo'llashning klassik usuli - kursorni: kursor elementi ustiga olib borganingizda.

Brauzerni qo'llab-quvvatlash

IE: qo'llab-quvvatlamang
Chet: url () dan boshqa 13.0
Firefox: 35.0
Chrome: 18.0 -veb-kit-
Safari: 9.1, 6.0 -veb-kit-
Opera: 40.0, 15.0 -veb-kit-
iOS Safari: 9.3, 6.1 -veb-kit-
Android brauzeri: 53.0, 4.4 -veb-kit-
Android uchun Chrome: 55.0, 47.0 -veb-kit-

filtr
xiralashtirish ()	Qiymat uzunlik birliklarida ko'rsatilgan, masalan, px, em. Asl tasvirga Gauss xiraligini qo'llaydi. Radius qiymati qanchalik katta bo'lsa, xiralik shunchalik katta bo'ladi. Agar radius qiymati ko'rsatilmagan bo'lsa, u sukut bo'yicha 0 ga teng bo'ladi.
yorqinlik ()	Qiymat% yoki o'nli kasrlarda ko'rsatilgan. Tasvirning yorqinligini o'zgartiradi. Qiymat qanchalik baland bo'lsa, tasvir yorqinroq bo'ladi. Standart 1.
kontrast ()	Qiymat% yoki o'nli kasrlarda ko'rsatilgan. Tasvirning kontrastini sozlaydi, ya'ni. tasvir / fonning eng qorong'i va eng yorug' qismlari o'rtasidagi farq. Standart 100%. Nol qiymati asl tasvirni quyuq kulrang fon ostida yashiradi. 0 dan 100% gacha yoki 0 dan 1 gacha ko'tarilgan qiymatlar asta-sekin asl tasvirni asl displeyga ochadi, yuqoridagi qiymatlar esa yorug'lik va qorong'i o'rtasidagi kontrastni oshiradi.
soya ()	Filtr quti-soya va matn-soya xossalari kabi ishlaydi. Quyidagi qiymatlardan foydalanadi: X ofset Y ofset xiralashgan Cho‘zilgan soya rangi. Filtrning o'ziga xos xususiyati shundaki, soya elementlarga va uning tarkibiga ularning shaffofligini hisobga olgan holda qo'shiladi, ya'ni. agar element ichida matn bo'lsa, filtr bir vaqtning o'zida matn uchun soya qo'shadi va ko'rinadigan chegaralar blok. Boshqa filtrlardan farqli o'laroq, bu filtr parametrlarni ko'rsatishni talab qiladi (minimal - ofset qiymati).
kul rang ()	Rasmdan barcha ranglarni ajratib chiqaradi, natijani qora va oq rangda beradi. Qiymat% yoki o'nli kasrlarda ko'rsatilgan. Qiymat qanchalik baland bo'lsa, ta'sir kuchliroq bo'ladi.
rangni aylantirish ()	Rang g'ildiragida belgilangan burilish burchagi asosida tasvir ranglarini o'zgartiradi. Qiymat 0deg dan 360deg gacha bo'lgan darajalarda o'rnatiladi. 0deg - standart qiymat hech qanday ta'sir qilmaydi.
invert ()	Filtr tasvirni salbiy qiladi. Qiymat% da o'rnatiladi. 0% filtrni qo'llamaydi, 100% ranglarni to'liq o'zgartiradi.
shaffoflik ()	Filtr xuddi shu tarzda ishlaydi shaffoflik elementga shaffoflikni qo'shish orqali. O'ziga xos xususiyat shundaki, brauzerlar filtr uchun apparat tezlashuvini ta'minlaydi, bu esa ishlashni yaxshilaydi. Qo'shimcha bonus shundaki, filtr bir vaqtning o'zida boshqa filtrlar bilan birlashtirilib, qiziqarli effektlarni yaratadi. Qiymat faqat% da o'rnatiladi, 0% elementni butunlay shaffof qiladi va 100% hech qanday ta'sir qilmaydi.
to'yingan ()	Ranglarning to'yinganligini nazorat qiladi, kontrastli filtr kabi ishlaydi. 0% qiymati rangni o'chiradi va 100% ta'sir qilmaydi. 0% dan 100% gacha bo'lgan qiymatlar ranglarning to'yinganligini pasaytiradi, 100% dan yuqori ranglarning to'yinganligini oshiradi. Qiymat% yoki butun son sifatida ko'rsatilishi mumkin, 1 100% ga teng.
sepiya ()	Antik va retro effekt. 0% qiymati o'zgarmaydi tashqi ko'rinish element va 100% sepiya effektini to'liq takrorlaydi.
url ()	Funktsiya tashqi XML faylining joylashuvini svg filtri yoki joriy hujjatdagi filtrga langarni qabul qiladi.
yo'q	Standart qiymat. Hech qanday ta'sir ko'rsatmaydi.
boshlang'ich	Ushbu xususiyatni standart qiymatiga o'rnatadi.
meros	Asosiy elementdan xususiyat qiymatini meros qilib oladi.