CSS3 ব্যবহার করে ফর্ম স্টাইল করা

#subscribe, #login( অবস্থান: পরম; শীর্ষ: 0px; প্রস্থ: 88%; প্যাডিং: 18px 6% 60px 6%; মার্জিন: 0 0 35px 0; পটভূমি: rgb(247, 247, 247); সীমানা: 1px কঠিন rgba(147, 184, 189,0.8); বক্স-ছায়া: 0pt 2px rgba(105, 108, 109, 0.7), 0px 5px rgba(208, 223, 240; z-সূচক: 22;

এখানে আমরা হেডারের জন্য বৈশিষ্ট্য বরাদ্দ করব:

/**** পাঠ্য ****/ # wrapper h1( font-size: 48px; রঙ: rgb(6, 106, 117); প্যাডিং: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** বর্তমানে শুধুমাত্র ওয়েবকিট ব্যাকগ্রাউন্ড-ক্লিপ:টেক্সট সমর্থন করে; **/ # wrapper h1( পটভূমি: -webkit-repeating-linar-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -ওয়েবকিট-ব্যাকগ্রাউন্ড-ক্লিপ: টেক্সট; ""; প্রদর্শন: ব্লক প্রস্থ: 10px; রৈখিক-গ্রেডিয়েন্ট (বাম, rgba(147,184,189,0) 20% 147,189,184) rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%);

মনে রাখবেন যে আজ শুধুমাত্র ওয়েবকিট সমর্থন সহ ব্রাউজার background-clip: text, তাই আমরা একটি ওয়েবকিট-শুধু ডোরাকাটা ব্যাকগ্রাউন্ড তৈরি করব এবং এটিকে H1 হেডারে বাঁধব। যেহেতু প্যারামিটার background-clip: textশুধুমাত্র ওয়েবকিট ব্রাউজারগুলিতে কাজ করে, আমি শুধুমাত্র ওয়েবকিট বৈশিষ্ট্যগুলির সাথে কাজ করার সিদ্ধান্ত নিয়েছি। এজন্য আমি CSS কে দুটি ভাগে বিভক্ত করেছি এবং শুধুমাত্র ওয়েবকিট গ্রেডিয়েন্ট ব্যবহার করেছি। যাইহোক, আপনার ওয়েবসাইটগুলিতে ওয়েবকিট ব্যবহার করা উচিত নয়! সুতরাং, উদাহরণস্বরূপ, পরামিতি -ওয়েবকিট-টেক্সট-ফিল-রং: স্বচ্ছআমাদের একটি স্বচ্ছ ব্যাকগ্রাউন্ড থাকার অনুমতি দেয়, কিন্তু শুধুমাত্র ওয়েবকিট ব্রাউজারগুলির জন্য, অন্যান্য সমস্ত ব্রাউজার এই সম্পত্তি উপেক্ষা করবে।

আমরা শিরোনামের নিচে একটি পাতলা লাইন তৈরি করেছি :আফটার সিউডো-ক্লাস এলিমেন্ট ব্যবহার করে। আমরা 2px উচ্চতার একটি গ্রেডিয়েন্ট ব্যবহার করেছি এবং প্রান্তে অস্বচ্ছতা শূন্যে কমিয়েছি।

এখন ইনপুট ক্ষেত্রগুলির যত্ন নেওয়া যাক এবং সেগুলিকে সুন্দর দেখাই৷

/**** উন্নত ইনপুট স্টাইলিং ****/ /* স্থানধারক */ ::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার (রঙ: rgb(190, 188, 188); ফন্ট-স্টাইল: তির্যক; ) ইনপুট:-moz- স্থানধারক, টেক্সটেরিয়া:-moz-প্লেসহোল্ডার (রঙ: rgb(190, 188, 188); ফন্ট-স্টাইল: তির্যক; ) ইনপুট ( রূপরেখা: কিছুই নয়; )

প্রথমে, আমরা মার্জিন স্টাইল করব এবং স্ট্রোকটি সরিয়ে দেব। তবে সতর্ক থাকুন: রূপরেখাটি ব্যবহারকারীকে বুঝতে সাহায্য করে যে তারা কোন ক্ষেত্রে রয়েছে৷ আপনি যদি এটি অপসারণ করেন তবে আপনাকে বৈশিষ্ট্যগুলি প্রয়োগ করতে হবে: সক্রিয় এবং: ফোকাস।

/* সমস্ত ক্ষেত্র জমা এবং চেকবক্স বাদ দেয় */ #wrapper ইনপুট:not())( প্রস্থ: 92%; মার্জিন-টপ: 4px; প্যাডিং: 10px 5px 10px 32px; সীমানা: 1px কঠিন rgb(178, 178, 178); বক্স -সাইজিং: বর্ডার-ব্যাসার্ধ: 0px 1px 0px rgba(168, 168, 0.6) ইনসেট: সমস্ত 0.2s রৈখিক; মনোযোগ

এখানে আমরা ছদ্ম ক্লাস ব্যবহার করেছি: চেকবক্স ব্যতীত সমস্ত ক্ষেত্র স্টাইল করার জন্য নয়। উপরন্তু, আমি স্ট্রোক অপসারণ করার সিদ্ধান্ত নিয়েছি এবং বৈশিষ্ট্য যোগ করেছি:focus এবং:active।

এখন মজা করার সময়: আইকন সহ ফন্ট। যেহেতু আমরা :before এবং :after pseudo-classes ব্যবহার করতে পারি না, তাই আমরা আইকনটিকে লেবেল প্যারামিটারে যোগ করব এবং তারপর এটিকে ক্ষেত্রটিতে রাখব। আমি ফন্টোমাস লাইব্রেরি ব্যবহার করব। আপনি নিজেই সংশ্লিষ্ট চিঠির সাথে আইকনগুলিকে মেলাতে পারেন। বৈশিষ্ট্য মনে রাখবেন ডেটা-আইকন? এখানে আপনাকে চিঠিটি ঢোকাতে হবে। আমি ব্যবহার করেছি ডেটা-আইকন = 'u'লগইন করার জন্য, ইমেইলের জন্য 'e', ​​পাসওয়ার্ডের জন্য 'p'। আমি অক্ষরগুলি নির্বাচন করার পরে, আমি ফন্টটি ডাউনলোড করেছি এবং fontsquirrel ফন্ট জেনারেটর ব্যবহার করে এটিকে @font-face-এর জন্য উপযুক্ত একটি বিন্যাসে রূপান্তর করেছি।

@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") ফরম্যাট("এম্বেডেড- opentype"), url("fonts/fontomas-webfont.woff") ফরম্যাট("woff"), url("fonts/fontomas-webfont.ttf") ফরম্যাট("truetype"), url("fonts/fontomas-webfont") .svg#FontomasCustomRegular") ফরম্যাট("svg"); ফন্ট-ওজন: স্বাভাবিক; ফন্ট-স্টাইল: স্বাভাবিক; ) /** ম্যাজিক ট্রিক! **/ :পরে ( বিষয়বস্তু: attr(ডেটা-আইকন); ফন্ট-পরিবার: "ফন্টোমাস কাস্টমরেগুলার"; রঙ: rgb(106, 159, 171); অবস্থান: পরম; বাম: 10px; শীর্ষ: 35px; প্রস্থ: 30px; )

এতটুকুই। প্রতিটি আইকনের জন্য আপনার আলাদা ক্লাসের প্রয়োজন নেই। আমরা প্যারামিটার ব্যবহার করেছি বিষয়বস্তু: attr(ডেটা-আইকন)ডেটা-আইকন বৈশিষ্ট্য থেকে চিঠি পেতে। সুতরাং, আমাদের শুধুমাত্র একটি ফন্ট বরাদ্দ করতে হবে, একটি রঙ নির্বাচন করতে হবে এবং একটি আইকন রাখতে হবে।

এখন ফর্ম জমা বাটনের জন্য নিয়ম বরাদ্দ করা যাক।

/*শৈলী উভয় বোতাম*/ # wrapper p. বোতাম ইনপুট( প্রস্থ: 30%; কার্সার: পয়েন্টার; ব্যাকগ্রাউন্ড: rgb(61, 157, 179); প্যাডিং: 8px 5px; ফন্ট-পরিবার: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; রঙ: #fff; ফন্ট-আকার: 24px; সীমানা: 1px কঠিন rgb(28, 108, 122); মার্জিন-নিচ: 10px; পাঠ্য-ছায়া: 0 1px 1px rgba(0, 0 , 0, 0.5); সীমানা-ব্যাসার্ধ: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) ইনসেট, 0px 0px 3px rgb(254, 254, 3px3px), (210, 210, 210); রূপান্তর: সমস্ত 0.2s রৈখিক; ) #wrapper p.button input:hover( background: rgb(74, 179, 198); ) #wrapper p.button input:active, #wrapper p. বোতাম ইনপুট: ফোকাস (পটভূমি: rgb(40, 137, 154); অবস্থান: আপেক্ষিক; শীর্ষ: 1px; সীমানা: 1px কঠিন rgb(12, 76, 87); বক্স-ছায়া: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) ইনসেট;

কৌশলটি হল একাধিক ফ্রেম তৈরি করতে বক্স-শ্যাডো ব্যবহার করা। স্বাভাবিকভাবেই, আপনি শুধুমাত্র একটি ফ্রেম ব্যবহার করতে পারেন, তবে আপনি বেশ কয়েকটি ব্যবহার করতে পারেন। আমরা দৈর্ঘ্যের প্যারামিটার ব্যবহার করব একটি "জাল" দ্বিতীয় সাদা সীমানা তৈরি করতে, 3px চওড়া, ঝাপসা ছাড়াই৷

এখন চেকবক্স স্টাইল করা যাক, আমরা এখানে অস্বাভাবিক কিছু করব না:

/* "আমাকে মনে রেখো" চেকবক্সটি স্টাইল করুন*/ .কিপলগইন( মার্জিন-টপ: -5px; ) .কিপলগইন ইনপুট, .কিপলগইন লেবেল (ডিসপ্লে: ইনলাইন-ব্লক; ফন্ট-সাইজ: 12px; ফন্ট-স্টাইল: ইটালিক; )। keeplogin input#loginkeeping( মার্জিন-ডান: 5px; ) .keeplogin লেবেল (প্রস্থ: 80%; )

একটি ডোরাকাটা গ্রেডিয়েন্ট তৈরি করতে একাধিক লিনিয়ার গ্রেডিয়েন্ট ব্যবহার করে ফর্মের ফুটার স্টাইল করা।

P.change_link( অবস্থান: পরম; রঙ: rgb(127, 124, 124); বাম: 0px; উচ্চতা: 20px; প্রস্থ: 440px; প্যাডিং: 17px 30px 20px 30px; ফন্ট-আকার: 16px: ডানদিকের পাঠ্য; ডান বর্ডার-টপ: 1px সলিড rgb(219, 229, 232); বর্ডার-ব্যাসার্ধ: 0 5px পটভূমি: rgb(225, 234, 235 ব্যাকগ্রাউন্ড: রিপিটিং-লিনিয়ার-গ্রেডিয়েন্ট (-45deg, rgb); 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247, 247) লিঙ্ক; প্রদর্শন: হরফ-ওজন: rgb(247, 248, 241); rgb(29, 162, 193); বর্ডার-ব্যাসার্ধ: 1px সলিড rgb(203, 214) পটভূমি: rgb(247, 247); 198) #wrapper p.change_link a:active( অবস্থান: আপেক্ষিক; শীর্ষ: 1px; )

এখন আপনি দেখতে পাচ্ছেন যে আমাদের দুটি সুন্দর আকার রয়েছে, কিন্তু আমরা চাই যে তাদের মধ্যে একটি প্রদর্শন করা হোক। এটা অ্যানিমেশন জন্য সময়!

অ্যানিমেশন তৈরি করা

# নিবন্ধন ( z-সূচক: 21; অস্বচ্ছতা: 0; )

মনে রাখবেন যে লগইন ফর্মের একটি z-সূচক আছে: 22? দ্বিতীয় ফর্মের জন্য আমরা এই প্যারামিটারটিকে 21-এ বরাদ্দ করব যাতে এটি লগইন ফর্মের "নীচ" হয়।

এখন মজার অংশ: আমরা pseudo class:target ব্যবহার করে ফর্মগুলি অদলবদল করি। টার্গেট সম্পর্কে আপনাকে একটি জিনিস বুঝতে হবে: আমরা এটি সরানোর জন্য অ্যাঙ্কর ব্যবহার করব। একটি অ্যাঙ্করের স্বাভাবিক আচরণ হল একটি নির্দিষ্ট পৃষ্ঠা উপাদানে ঝাঁপ দেওয়া। কিন্তু আমরা তা চাই না, আমরা শুধু আকারগুলি অদলবদল করতে চাই। এখানেই পৃষ্ঠার শীর্ষে দুটি লিঙ্ক ব্যবহার করার আমাদের কৌশলটি উদ্ধারে আসে। আমাদের সরাসরি দ্বিতীয় ফর্মে নিয়ে যাওয়ার পরিবর্তে এবং জাম্প প্রভাবের ঝুঁকি নেওয়ার পরিবর্তে, আমরা লিঙ্কগুলিকে একটি প্যারামিটার দেব প্রদর্শন: কোনোটিই নয়. এটি জাম্পিং এড়াতে সাহায্য করবে। আমি সাইটে এই কৌশলটি আবিষ্কার করেছি: CSS3 তৈরি (ফরাসি)।

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( z-index: 22; animation-name: fadeInLeft; অ্যানিমেশন-বিলম্ব: .1s; )

এটি কি ঘটে: যখন আমরা বোতামে ক্লিক করি যোগদান করুন, আমরা #toregister এ যাচ্ছি। তারপর অ্যানিমেশন ঘটে এবং শুধুমাত্র তখনই আমরা #register এলিমেন্টে চলে যাই। আমরা নামক একটি অ্যানিমেশন ব্যবহার করি fadeInLeft. যেহেতু আমরা শূন্য স্বচ্ছতা ব্যবহার করে আকৃতিটি "লুকিয়ে" রাখছি, আমরা একটি অ্যানিমেশন প্রয়োগ করব যা ধীরে ধীরে প্রদর্শিত হবে। আমরা z-সূচক পরিবর্তন করেছি যাতে এটি অন্য আকারের উপরে প্রদর্শিত হয়। অন্য ফর্মের ক্ষেত্রেও একই ঘটনা ঘটে।
এখানে অ্যানিমেশন জন্য কোড. আমরা ড্যান ইডেন থেকে CSS3 অ্যানিমেশন ফ্রেমওয়ার্ক ব্যবহার করেছি এবং আমাদের টিউটোরিয়ালের জন্য এই কাঠামোটিকে অভিযোজিত করেছি।

অ্যানিমেট (অ্যানিমেশন-সময়কাল: 0.5s; অ্যানিমেশন-টাইমিং-ফাংশন: সহজ; অ্যানিমেশন-ফিল-মোড: উভয়; ) @keyframes fadeInLeft ( 0% ( অস্বচ্ছতা: 0; রূপান্তর: translateX(-20px); ) 100% ( অস্বচ্ছতা : 1 রূপান্তর: translateX(0);

যে আকৃতিটি "অদৃশ্য হয়ে যায়" তার বাম দিকে একটি বিবর্ণ অ্যানিমেশন থাকবে:

#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( অ্যানিমেশন-নাম: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( অস্বচ্ছতা: 1; রূপান্তর: translateX(0); ) 100% (opac) : 0; রূপান্তর: translateX(-20px);

আপনি এখন animate.css ফাইল ব্যবহার করে ড্যান ইডেনের অন্যান্য অ্যানিমেশন ব্যবহার করতে পারেন: শুধু .animate ক্লাস এবং অ্যানিমেশনের নাম পরিবর্তন করুন। আপনি animate-custom.css ফাইলের শেষে আরও বেশ কিছু অ্যানিমেশন পাবেন।

এই সব, বন্ধু. আমি আশা করি আপনি এই টিউটোরিয়াল উপভোগ করেছেন!

উল্লেখ্য যে কিছু ব্রাউজারে বিকল্পটি background-clip: textসমর্থিত নয় ইন্টারনেট এক্সপ্লোরার 9 এ অ্যানিমেশন কাজ করে না। ইন্টারনেট এক্সপ্লোরার 8 এবং নীচে, pseudo-class:target pseudo-class সমর্থিত নয়, তাই এই প্রভাবটি সেখানে মোটেও কাজ করবে না।

পি.এস.আমি একটি ব্যক্তিগত বার্তায় অনুবাদ সম্পর্কিত যেকোনো মন্তব্য সানন্দে গ্রহণ করব। ধন্যবাদ!

ট্যাগ: ট্যাগ যোগ করুন

আর্টেমি লেবেদেভ।

কীবোর্ডে একড্যাশ, এটি সাধারণত শূন্যের ডানদিকে এবং "Z" এবং "X" অক্ষরের উপরে থাকে। অজ্ঞাত লোকেরা একে পর্যায়ক্রমে হাইফেন, বিয়োগ বা ড্যাশ বলে। Lebedev এটা কি আমাদের ব্যাখ্যা চার(দুই ধরনের ড্যাশ দেওয়া হয়েছে) বিভিন্ন চিহ্ন। আসলে তাদের অন্তত নয়টি, এবং এই আমি এখন সম্পর্কে আপনাকে বলতে হবে.

সংক্রান্ত বিয়োগ(−), অনেক লোক ইতিমধ্যেই এটি সম্পর্কে সবকিছু জানে: বিয়োগ চিহ্নটি গাণিতিক অভিব্যক্তিতে ব্যবহৃত হয়, যে কোনও সংখ্যার সমান প্রস্থ থাকে, ড্যাশ এবং হাইফেনের বিপরীতে ক্যাপিটাল লেটারের উচ্চতার সাথে সারিবদ্ধ হয় এবং HTML এ লেখা হয় -

এই সময়ে সবাই সাধারণত ড্যাশে চলে যায়। কিন্তু অপেক্ষা করুন, আমরা এখনও তিনটি প্রতীক কভার করিনি!

টেলিফোন নম্বর (555‒41‒72) লিখতে কোন চিহ্ন ব্যবহার করা হয়? হাইফেন, আপনি বলুন; কিন্তু না! এই জন্য একটি পৃথক প্রতীক আছে: ডিজিটাল ড্যাশ(চিত্র ড্যাশ)। এটি দেখতে (‒) প্রায় একটি বিয়োগের মতো, কিন্তু এটি একটি বিয়োগ নয়।

আপনি জিজ্ঞাসা করতে পারেন: তাহলে কেন আপনি একটি বিয়োগ চিহ্ন ব্যবহার করতে পারবেন না, যেহেতু এটি দেখতে ঠিক একই রকম? কারণ একটি বিয়োগ চিহ্ন একটি বিয়োগ চিহ্ন, এবং একটি ফোন নম্বরে কিছু থেকে কিছুই বিয়োগ করা হয় না। একই কারণে আপনি i এর পরিবর্তে টেক্সট হাইলাইট করতে em ব্যবহার করা উচিত। এটি ব্যাখ্যা করা যাবে না, এটি শুধুমাত্র জানা যাবে।

ডিজিটাল ড্যাশটিতে U+2012 কোড রয়েছে এবং এটি HTML-এ লেখা আছে -।

সম্পর্কে হাইফেন প্রতীক, যাকে একটি নরম হাইফেনও বলা হয়, এটি অনেকের কাছে পরিচিত। এই চিহ্নটি, HTML-এ - হিসাবে চিহ্নিত করা হয়েছে, যেখানে হাইফেনেশন তৈরি করা যেতে পারে সেসব জায়গায় সিলেবলের মধ্যে শব্দগুলিতে স্থাপন করা হয়। এটি পর্দায় প্রদর্শিত হয় না, যখন এটি লাইনের শেষে আঘাত করে; এই ক্ষেত্রে, ব্রাউজার (তারা বলে যে ফায়ারফক্সও তৃতীয় সংস্করণ থেকে এটি করতে শিখেছে) পুরো শব্দটি হাইফেন করে না, তবে একটি হাইফেন রাখে এবং বাকি শব্দটি হাইফেন করে।

এটি বিশেষত দীর্ঘ শব্দগুলির সাথে সাহায্য করে, যেখানে হাইফেনেশন স্ক্রিনের ডানদিকে বিশাল খালি জায়গা তৈরি করে। হাইফেনের বিশাল অসুবিধা হল এটি ম্যানুয়ালি স্থাপন করা অসুবিধাজনক (তবে, অটোটাইপিং প্রোগ্রামগুলি এটি পরিচালনা করতে পারে) এবং এটির ব্যবহার বিশৃঙ্খল হয়ে পড়ে এবং পাঠ্যের উত্স কোডটিকে অপঠনযোগ্য করে তোলে (অতএব, হাইফেন বসানো হলে এটি আরও ভাল। ডাটাবেসে সংরক্ষিত টেক্সট থেকে জেনারেশন পর্যায়ে এইচটিএমএল কোড সিএমএস দ্বারা করা হয়)।

আরেকটি হাইফেনের মতো প্রতীক হল ড্যাশ (⁃), তালিকা চিহ্নিতকারী হিসাবে ব্যবহৃত হয় ( ড্যাশ বুলেট) লেবেদেভ স্টুডিও যথাযথভাবে উল্লেখ করেছে যে রাশিয়ান টাইপোগ্রাফিক ঐতিহ্যে বুলেট (যার অর্থ বর্গক্ষেত্র সহ ঐতিহ্যবাহী বৃত্ত) বলে কিছু নেই এবং তারা একটি মার্কার হিসাবে (দীর্ঘ) ড্যাশ ব্যবহার করার পরামর্শ দেয়; আপনি দেখতে পাচ্ছেন, তারা তাদের সাইটে ঠিক যা করে (বা করেছে) এবং এমনকি কীভাবে এটি করতে হয় তার একটি নিবন্ধ রয়েছে।

প্রকৃতপক্ষে, U+2043 কোড সহ তালিকা চিহ্নিতকারীদের জন্য একটি বিশেষ অক্ষর রয়েছে (তবে, লেবেদেভ দাবি করেছেন যে এটি রাশিয়ান টাইপোগ্রাফির ক্ষেত্রে প্রযোজ্য নয়)। এইচটিএমএল-এ, সিএসএস ব্যবহার করে একটি তালিকার জন্য এই জাতীয় মার্কার তৈরি করা বেশ সহজ:

উল( তালিকা-শৈলী: ভিতরে নেই

(অবশ্যই, উপরের কোডটি নিখুঁত নয়, এবং এটি শুধুমাত্র সঠিক ব্রাউজারে কাজ করবে, তবে আমি আশা করি আপনি ধারণাটি পেয়েছেন।)

এখন আমরা অবশেষে ড্যাশে যেতে পারি; এখানে সবকিছু ইতিমধ্যে ভাল জীর্ণ: মধ্যে পার্থক্য en ড্যাশ(-, en ড্যাশ, একটি ড্যাশ অক্ষরের প্রস্থ “n”, -) এবং এম ড্যাশ(—, এম ড্যাশ, একটি ড্যাশ “M” অক্ষরের প্রস্থ, —)। এটা জানা যায় যে রাশিয়ান টাইপোগ্রাফিতে একচেটিয়াভাবে এম ড্যাশ ব্যবহার করা হয় (যদিও সাংখ্যিক পরিসরে এন ড্যাশ ব্যবহার করার সম্ভাবনা নিয়ে বিতর্ক রয়েছে), পশ্চিমে তারা সাধারণত এন ড্যাশ পছন্দ করে।

ইএম ড্যাশটি রাশিয়ান ভাষায় সংলাপেও ব্যবহৃত হয়। পশ্চিমে, একটি পৃথক প্রতীক প্রায়ই এই উদ্দেশ্যে ব্যবহার করা হয় অনুভূমিক রেখা (―):

- Je m'ennuie tellement, dit-elle.

- Cela n'est pas de ma faute, rétorqua-t-il.

সুতরাং, নয়টি ভিন্ন লাইন:

এবং, তুলনা করার জন্য, এক লাইনে:
- ‐
−
‒
­
⁃
-
—

এই নিবন্ধে আপনি শিখতে হবে কিভাবে একটি নিবন্ধন এবং অনুমোদন ফর্ম তৈরি করতে হয় HTML, JavaScript, PHP এবং MySql ব্যবহার করে। এই ধরনের ফর্ম নির্বিশেষে প্রায় প্রতিটি ওয়েবসাইটে ব্যবহার করা হয়। এগুলি একটি ফোরাম, একটি অনলাইন স্টোর, সামাজিক নেটওয়ার্ক (যেমন Facebook, Twitter, Odnoklassniki) এবং অন্যান্য অনেক ধরণের সাইটের জন্য তৈরি করা হয়েছে।

আপনার স্থানীয় কম্পিউটারে যদি আপনার একটি ওয়েবসাইট থাকে, তাহলে আমি আশা করি আপনার ইতিমধ্যেই আছে স্থানীয় সার্ভার ইনস্টল এবং চলমান. এটি ছাড়া, কিছুই কাজ করবে না।

ডাটাবেসে একটি টেবিল তৈরি করা

ব্যবহারকারী নিবন্ধন বাস্তবায়ন করার জন্য, প্রথমে আমাদের একটি ডেটাবেস প্রয়োজন। যদি আপনি ইতিমধ্যে এটি আছে, তারপর মহান, অন্যথায়, আপনি এটি তৈরি করতে হবে. নিবন্ধে, আমি বিস্তারিতভাবে ব্যাখ্যা করব কিভাবে এটি করতে হয়।

এবং তাই, আমাদের একটি ডেটাবেস আছে (সংক্ষেপে ডিবি), এখন আমাদের একটি টেবিল তৈরি করতে হবে ব্যবহারকারীদেরযেটিতে আমরা আমাদের নিবন্ধিত ব্যবহারকারীদের যুক্ত করব।

আমি নিবন্ধে একটি ডাটাবেসে একটি টেবিল তৈরি করার উপায় ব্যাখ্যা করেছি।

একটি টেবিল তৈরি করার আগে, আমাদের নির্ধারণ করতে হবে এতে কী কী ক্ষেত্র থাকবে। এই ক্ষেত্রগুলি নিবন্ধন ফর্ম থেকে ক্ষেত্রগুলির সাথে মিলিত হবে৷ ব্যবহারকারীদেরতাই, আমরা ভাবলাম, আমাদের ফর্মে কী কী ক্ষেত্র থাকবে তা আমরা কল্পনা করেছি এবং একটি টেবিল তৈরি করেছি

• এই ক্ষেত্রগুলির সাথে:আইডি এই ক্ষেত্রগুলির সাথে:- শনাক্তকারী। মাঠ
• ডাটাবেসের প্রতিটি টেবিলে এটি থাকা উচিত।প্রথম_নাম
• - নাম বাঁচাতে।শেষ_নাম
• - উপাধি সংরক্ষণ করতে।- ডাক ঠিকানা সংরক্ষণ করতে. আমরা লগইন হিসাবে ই-মেইল ব্যবহার করব, তাই এই ক্ষেত্রটি অবশ্যই অনন্য হতে হবে, অর্থাৎ অনন্য সূচক থাকতে হবে।
• email_status- মেইল ​​নিশ্চিত করা হয়েছে কিনা তা নির্দেশ করার জন্য ক্ষেত্র। যদি মেইলটি নিশ্চিত করা হয়, তাহলে এর মান 1 হবে, অন্যথায় মান 0 হবে।
• পাসওয়ার্ড- পাসওয়ার্ড সংরক্ষণ করতে।

আপনি যদি আপনার নিবন্ধন ফর্মে অন্য কিছু ক্ষেত্র থাকতে চান তবে আপনি সেগুলি এখানে যোগ করতে পারেন।

এটা, আমাদের টেবিল ব্যবহারকারীদেরপ্রস্তুত চলুন পরবর্তী পর্যায়ে চলুন.

ডাটাবেস সংযোগ

আমরা ডাটাবেস তৈরি করেছি, এখন আমাদের এটির সাথে সংযোগ করতে হবে। আমরা পিএইচপি এক্সটেনশন MySQLi ব্যবহার করে সংযোগ করব।

আমাদের সাইটের ফোল্ডারে নাম দিয়ে একটি ফাইল তৈরি করুন dbconnect.php, এবং এটিতে নিম্নলিখিত স্ক্রিপ্টটি লিখুন:

DB সংযোগ ত্রুটি. ত্রুটি বিবরণ: ".mysqli_connect_error()।"

এই ফাইল dbconnect.phpফর্ম হ্যান্ডলারের সাথে সংযুক্ত হতে হবে।

পরিবর্তনশীল লক্ষ্য করুন $address_site, এখানে আমি আমার পরীক্ষার সাইটের নাম নির্দেশ করেছি যেটিতে আমি কাজ করব। সেই অনুযায়ী আপনার সাইটের নাম নির্দেশ করুন.

সাইটের গঠন

এখন আমাদের সাইটের এইচটিএমএল গঠন দেখুন।

আমরা সাইটের হেডার এবং ফুটার আলাদা ফাইলে স্থানান্তর করব, header.phpএবং footer.php. আমরা তাদের সমস্ত পৃষ্ঠায় অন্তর্ভুক্ত করব। যথা প্রধান পৃষ্ঠায় (ফাইল index.php), নিবন্ধন ফর্ম সহ পৃষ্ঠায় (ফাইল form_register.php) এবং অনুমোদন ফর্ম সহ পৃষ্ঠায় (ফাইল form_auth.php).

আমাদের লিঙ্ক দিয়ে ব্লক করুন, নিবন্ধনএবং অনুমোদন, সেগুলিকে সাইটের শিরোনামে যুক্ত করুন যাতে সেগুলি সমস্ত পৃষ্ঠায় প্রদর্শিত হয়৷ একটি লিঙ্ক এ প্রবেশ করা হবে নিবন্ধন ফর্ম পৃষ্ঠা(ফাইল form_register.php) এবং অন্যটির সাথে পৃষ্ঠায় অনুমোদন ফর্ম(ফাইল form_auth.php).

header.php ফাইলের বিষয়বস্তু:

আমাদের সাইটের নাম

ফলস্বরূপ, আমাদের প্রধান পৃষ্ঠাটি এইরকম দেখায়:

অবশ্যই, আপনার সাইটের সম্পূর্ণ ভিন্ন কাঠামো থাকতে পারে, কিন্তু এটি এখন আমাদের জন্য গুরুত্বপূর্ণ নয়। মূল জিনিসটি নিবন্ধকরণ এবং অনুমোদনের জন্য লিঙ্ক (বোতাম) রয়েছে।

এখন রেজিস্ট্রেশন ফর্মে যাওয়া যাক। আপনি ইতিমধ্যে বুঝতে পেরেছেন, আমাদের কাছে এটি ফাইলে রয়েছে form_register.php.

ডাটাবেসে যান (phpMyAdmin-এ), টেবিলের কাঠামো খুলুন ব্যবহারকারীদেরএবং আমরা কি ক্ষেত্র প্রয়োজন তাকান. এর মানে হল যে আমাদের প্রথম এবং শেষ নাম প্রবেশের জন্য ক্ষেত্র, ডাক ঠিকানা (ইমেল) প্রবেশ করার জন্য একটি ক্ষেত্র এবং পাসওয়ার্ড প্রবেশের জন্য একটি ক্ষেত্র প্রয়োজন। এবং নিরাপত্তার উদ্দেশ্যে, আমরা একটি ক্যাপচা প্রবেশের জন্য একটি ক্ষেত্র যোগ করব।

সার্ভারে, নিবন্ধন ফর্ম প্রক্রিয়াকরণের ফলে, বিভিন্ন ত্রুটি ঘটতে পারে যার কারণে ব্যবহারকারী নিবন্ধন করতে পারবেন না। তাই, রেজিস্ট্রেশন কেন ব্যর্থ হয় তা ব্যবহারকারীকে বোঝার জন্য, এই ত্রুটিগুলি সম্পর্কে বার্তাগুলি প্রদর্শন করা প্রয়োজন৷

ফর্মটি প্রদর্শন করার আগে, সেশন থেকে ত্রুটি বার্তাগুলি প্রদর্শন করতে একটি ব্লক যুক্ত করুন৷

এবং আরও একটি জিনিস, যদি ব্যবহারকারী ইতিমধ্যে অনুমোদিত হয় এবং কৌতূহলের বাইরে তিনি ব্রাউজারের ঠিকানা বারে লিখে সরাসরি নিবন্ধন পৃষ্ঠায় যান site_address/form_register.php, তাহলে এই ক্ষেত্রে, নিবন্ধন ফর্মের পরিবর্তে, আমরা একটি শিরোনাম প্রদর্শন করব যাতে উল্লেখ করে যে তিনি ইতিমধ্যে নিবন্ধিত।

সাধারণভাবে, ফাইল কোড form_register.phpআমরা এটা পেয়েছি:

আপনি ইতিমধ্যে নিবন্ধিত

ব্রাউজারে, নিবন্ধন ফর্ম সহ পৃষ্ঠাটি এইরকম দেখায়:

ব্যবহার করে প্রয়োজনীয় বৈশিষ্ট্য, আমরা সব ক্ষেত্র বাধ্যতামূলক করেছি।

যেখানে রেজিস্ট্রেশন ফর্ম কোড মনোযোগ দিন ক্যাপচা প্রদর্শিত হয়:

আমরা ইমেজের জন্য src অ্যাট্রিবিউটের মান দিয়ে ফাইলের পাথ নির্দিষ্ট করেছি captcha.php, যা এই ক্যাপচা তৈরি করে।

চলুন ফাইল কোড তাকান captcha.php:

কোডটি ভালভাবে মন্তব্য করা হয়েছে, তাই আমি শুধুমাত্র একটি পয়েন্টে ফোকাস করব।

একটি ফাংশনের ভিতরে imageTtfText(), ফন্টের পথ নির্দিষ্ট করা আছে verdana.ttf. তাই ক্যাপচা সঠিকভাবে কাজ করার জন্য, আমাদের অবশ্যই একটি ফোল্ডার তৈরি করতে হবে ফন্ট, এবং সেখানে ফন্ট ফাইল রাখুন verdana.ttf. আপনি এটি ইন্টারনেট থেকে খুঁজে পেতে এবং ডাউনলোড করতে পারেন বা এই নিবন্ধের উপকরণ সহ সংরক্ষণাগার থেকে নিতে পারেন।

আমরা এইচটিএমএল স্ট্রাকচার সম্পন্ন করেছি, এখন এগিয়ে যাওয়ার সময়।

jQuery ব্যবহার করে ইমেলের বৈধতা পরীক্ষা করা হচ্ছে

যেকোনো ফর্মের জন্য ক্লায়েন্ট সাইডে (জাভাস্ক্রিপ্ট, jQuery ব্যবহার করে) এবং সার্ভার সাইডে, প্রবেশ করা ডেটার বৈধতা পরীক্ষা করতে হবে।

আমাদের ইমেল ক্ষেত্রে বিশেষ মনোযোগ দিতে হবে। এটা খুবই গুরুত্বপূর্ণ যে প্রবেশ করা ডাক ঠিকানাটি বৈধ।

এই ইনপুট ক্ষেত্রের জন্য, আমরা ইমেলের ধরন সেট করি (type="email"), এটি আমাদেরকে ভুল বিন্যাসের বিরুদ্ধে সামান্য সতর্ক করে। কিন্তু এটি যথেষ্ট নয়, কারণ ব্রাউজার আমাদের যে কোড ইন্সপেক্টর প্রদান করে তার মাধ্যমে আমরা সহজেই বৈশিষ্ট্যের মান পরিবর্তন করতে পারি টাইপসঙ্গে - উপাধি সংরক্ষণ করতে।অন পাঠ্য, এবং এটাই, আমাদের চেক আর বৈধ হবে না।

এবং এই ক্ষেত্রে, আমরা একটি আরো নির্ভরযোগ্য চেক করতে হবে. এটি করার জন্য, আমরা JavaScript থেকে jQuery লাইব্রেরি ব্যবহার করব।

ফাইলে jQuery লাইব্রেরি সংযোগ করতে header.phpট্যাগের মধ্যে , ক্লোজিং ট্যাগের আগে , এই লাইন যোগ করুন:

এই লাইনের পরপরই, আমরা ইমেল যাচাইকরণ কোড যোগ করব। এখানে আমরা প্রবেশ করা পাসওয়ার্ডের দৈর্ঘ্য পরীক্ষা করার জন্য একটি কোড যোগ করব। এর দৈর্ঘ্য কমপক্ষে 6 অক্ষর হতে হবে।

এই স্ক্রিপ্টটি ব্যবহার করে, আমরা বৈধতার জন্য প্রবেশ করা ইমেল ঠিকানাটি পরীক্ষা করি। যদি ব্যবহারকারী একটি ভুল ইমেল প্রবেশ করে, আমরা এটি সম্পর্কে একটি ত্রুটি বার্তা প্রদর্শন করি এবং ফর্ম জমা দেওয়ার বোতামটি অক্ষম করি৷ যদি সবকিছু ঠিক থাকে, তাহলে আমরা ত্রুটিটি সরিয়ে ফেলি এবং ফর্ম জমা দেওয়ার বোতামটি সক্রিয় করি।

এবং তাই, আমরা ক্লায়েন্ট পক্ষের ফর্ম বৈধতা দিয়ে সম্পন্ন করা হয়. এখন আমরা এটি সার্ভারে পাঠাতে পারি, যেখানে আমরা কয়েকটি চেক করব এবং ডাটাবেসে ডেটা যোগ করব।

ব্যবহারকারী নিবন্ধন

আমরা প্রক্রিয়াকরণের জন্য ফাইলটিতে ফর্মটি পাঠাই register.php, POST পদ্ধতির মাধ্যমে। এই হ্যান্ডলার ফাইলের নাম অ্যাট্রিবিউট ভ্যালুতে নির্দিষ্ট করা আছে কর্ম. এবং পাঠানোর পদ্ধতিটি অ্যাট্রিবিউটের মানটিতে উল্লেখ করা হয়েছে পদ্ধতি.

এই ফাইলটি খুলুন register.phpএবং প্রথমে আমাদের যা করতে হবে তা হল একটি সেশন লঞ্চ ফাংশন লিখুন এবং আমরা আগে যে ফাইলটি তৈরি করেছি তা সংযুক্ত করুন dbconnect.php(এই ফাইলটিতে আমরা ডাটাবেসের সাথে একটি সংযোগ তৈরি করেছি)। এবং এছাড়াও, আসুন অবিলম্বে কোষগুলি ঘোষণা করি ত্রুটি_বার্তাএবং সফলতার_বার্তাগ্লোবাল সেশন অ্যারেতে। IN ত্রুটি_বার্তাআমরা ফর্ম প্রক্রিয়াকরণের সময় ঘটে যাওয়া সমস্ত ত্রুটি বার্তা রেকর্ড করব, এবং succes_messages, আমরা আনন্দের বার্তা রেকর্ড করব।

আমরা চালিয়ে যাওয়ার আগে, আমাদের অবশ্যই পরীক্ষা করতে হবে ফর্ম কি আদৌ জমা হয়েছিল?. একজন আক্রমণকারী বৈশিষ্ট্য মান দেখতে পারেন কর্মফর্ম থেকে, এবং খুঁজে বের করুন কোন ফাইলটি এই ফর্মটি প্রক্রিয়া করছে৷ এবং ব্রাউজারের ঠিকানা বারে নিম্নলিখিত ঠিকানাটি টাইপ করে সরাসরি এই ফাইলটিতে যাওয়ার ধারণা থাকতে পারে: http://site_address/register.php

তাই আমাদের গ্লোবাল POST অ্যারেতে একটি ঘরের জন্য পরীক্ষা করতে হবে যার নাম ফর্ম থেকে আমাদের "রেজিস্টার" বোতামের নামের সাথে মেলে। এইভাবে আমরা পরীক্ষা করি যে "রেজিস্টার" বোতামটি ক্লিক করা হয়েছে কি না।

যদি কোনো আক্রমণকারী সরাসরি এই ফাইলে যাওয়ার চেষ্টা করে, তাহলে তারা একটি ত্রুটির বার্তা পাবে। আমি আপনাকে মনে করিয়ে দিই যে $address_site ভেরিয়েবলটিতে সাইটের নাম রয়েছে এবং এটি ফাইলে ঘোষণা করা হয়েছিল dbconnect.php.

ত্রুটি!প্রধান পৃষ্ঠা।

সেশনের ক্যাপচা মানটি ফাইলে তৈরি করার সময় যোগ করা হয়েছিল captcha.php. একটি অনুস্মারক হিসাবে, আমি আপনাকে ফাইল থেকে কোডের এই অংশটি আবার দেখাব captcha.php, যেখানে ক্যাপচা মান সেশনে যোগ করা হয়:

এখন আসুন যাচাইকরণে এগিয়ে যাই। ফাইলে register.php, if ব্লকের ভিতরে, যেখানে আমরা পরীক্ষা করি যে "রেজিস্টার" বোতামটি ক্লিক করা হয়েছে কিনা, বা বরং, যেখানে মন্তব্য " // (1) কোডের পরবর্তী অংশের জন্য স্থান"আমরা লিখি:

//প্রাপ্ত ক্যাপচা চেক করুন // লাইনের শুরু এবং শেষ থেকে স্পেস ট্রিম করুন $captcha = trim($_POST["captcha"]);

ত্রুটি! if(isset($_POST["captcha"]) && !empty($captcha))( //সেশন থেকে প্রাপ্ত মানের সাথে তুলনা করুন। if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] !=""))( // যদি ক্যাপচা সঠিক না হয়, তাহলে আমরা ব্যবহারকারীকে নিবন্ধন পৃষ্ঠায় ফিরিয়ে দিই, এবং সেখানে আমরা তাকে একটি ত্রুটি বার্তা প্রদর্শন করব যে সে ভুল ক্যাপচা প্রবেশ করেছে৷ $error_message = "

ত্রুটি!"; // সেশনে ত্রুটি বার্তাটি সংরক্ষণ করুন৷ $_SESSION["error_messages"] = $error_message; // ব্যবহারকারীকে নিবন্ধন পৃষ্ঠার শিরোনামে ফিরিয়ে দিন ("HTTP/1.1 301 স্থায়ীভাবে সরানো"); শিরোনাম("অবস্থান: " .$address_site ."/form_register.php"); // স্ক্রিপ্ট প্রস্থান বন্ধ করুন (); "

কোন ভেরিফিকেশন কোড নেই, অর্থাৎ একটি ক্যাপচা কোড। আপনি মূল পৃষ্ঠায় যেতে পারেন.

পরবর্তী, আমাদের POST অ্যারে থেকে প্রাপ্ত ডেটা প্রক্রিয়া করতে হবে। প্রথমত, আমাদের গ্লোবাল POST অ্যারের বিষয়বস্তু পরীক্ষা করতে হবে, অর্থাৎ, সেখানে এমন কোন সেল আছে কি না যাদের নাম আমাদের ফর্ম থেকে ইনপুট ফিল্ডের নামের সাথে মিলে যায়।

যদি সেলটি বিদ্যমান থাকে, তাহলে আমরা এই ঘর থেকে লাইনের শুরু এবং শেষ থেকে স্পেস ট্রিম করি, অন্যথায়, আমরা ব্যবহারকারীকে রেজিস্ট্রেশন ফর্ম সহ পৃষ্ঠায় পুনঃনির্দেশ করি।

এরপরে, আমরা স্পেস ট্রিম করার পর, আমরা ভেরিয়েবলে লাইনটি যোগ করি এবং এই ভেরিয়েবলটি খালি না থাকলে চেক করি, তাহলে আমরা এগিয়ে যাই, অন্যথায় আমরা ব্যবহারকারীকে রেজিস্ট্রেশন ফর্ম সহ পৃষ্ঠায় পুনঃনির্দেশ করি। এই কোডটি নির্দিষ্ট স্থানে পেস্ট করুন"".

// (2) কোডের পরবর্তী অংশের জন্য স্থান

/* গ্লোবাল অ্যারে $_POST-এ ফর্ম থেকে ডেটা পাঠানো হয়েছে কিনা তা পরীক্ষা করুন এবং জমা দেওয়া ডেটা নিয়মিত ভেরিয়েবলে মোড়ানো।*/ if(isset($_POST["first_name"]))( //শুরু থেকে স্পেস ট্রিম করুন এবং স্ট্রিং এর শেষ $first_name = trim($_POST["first_name"]); // শূন্যতার জন্য ভেরিয়েবল চেক করুন if(!empty($first_name))( // নিরাপত্তার জন্য, বিশেষ অক্ষরকে HTML এন্টিটিতে রূপান্তর করুন $first_name = htmlspecialchars($first_name, ENT_QUOTES); )else( // সেশনে ত্রুটি বার্তা সংরক্ষণ করুন। $_SESSION["error_messages"] .= "

আপনার নাম লিখুন

আপনার শেষ নাম লিখুন

পদবি ক্ষেত্র অনুপস্থিত

আপনার ইমেইল লিখুন

আপনার পাসওয়ার্ড লিখুন

বিশেষ গুরুত্ব হল ক্ষেত্র - উপাধি সংরক্ষণ করতে।. আমাদের অবশ্যই প্রাপ্ত ডাক ঠিকানার বিন্যাস এবং ডাটাবেসে এর স্বতন্ত্রতা পরীক্ষা করতে হবে। অর্থাৎ, একই ইমেল ঠিকানায় ইতিমধ্যে নিবন্ধিত কোনো ব্যবহারকারী আছে কি?

নির্দিষ্ট স্থানে" // (3) পোস্টাল ঠিকানার বিন্যাস এবং এর স্বতন্ত্রতা পরীক্ষা করতে কোড অবস্থান" নিম্নলিখিত কোড যোগ করুন:

//রেগুলার এক্সপ্রেশন $reg_email = "/^**@(+(*+)*\.)++/i" ব্যবহার করে প্রাপ্ত ইমেল ঠিকানার বিন্যাস চেক করুন;

//যদি প্রাপ্ত ইমেল ঠিকানার বিন্যাস নিয়মিত অভিব্যক্তির সাথে মেলে না if(!preg_match($reg_email, $email))( // ত্রুটি বার্তাটি সেশনে সংরক্ষণ করুন। $_SESSION["error_messages"] .= "

"; // ব্যবহারকারীকে রেজিস্ট্রেশন পৃষ্ঠার শিরোনামে ফেরত দিন("HTTP/1.1 301 স্থায়ীভাবে সরানো"); শিরোনাম("অবস্থান: ".$address_site."/form_register.php"); // স্ক্রিপ্ট প্রস্থান বন্ধ করুন(); ) // আমরা পরীক্ষা করি যে এই ধরনের একটি ঠিকানা ইতিমধ্যেই ডাটাবেসে আছে কি না $mysqli->ক্যোয়ারী ("ইমেল` থেকে `ইমেল`=""" নির্বাচন করুন); ঠিক একটি সারি, যার মানে এই ইমেল ঠিকানার ব্যবহারকারী ইতিমধ্যেই নিবন্ধিত যদি($result_query->num_rows == 1)( //যদি প্রাপ্ত ফলাফল মিথ্যা না হয় if(($row = $result_query->fetch_assoc() ) != মিথ্যা) ( // সেশনে ত্রুটি বার্তা সংরক্ষণ করুন। $_SESSION["error_messages"] .="

"; // ব্যবহারকারীকে নিবন্ধন পৃষ্ঠার শিরোনামে ফেরত দিন("HTTP/1.1 301 স্থায়ীভাবে সরানো"); শিরোনাম("অবস্থান: ".$address_site."/form_register.php"); )অন্যথায়(// ত্রুটি বার্তাটি সংরক্ষণ করুন অধিবেশনে $_SESSION["error_messages"] .="

"; // ব্যবহারকারীকে নিবন্ধন পৃষ্ঠার শিরোনামে ফেরত দিন ("HTTP/1.1 301 স্থায়ীভাবে সরানো"); শিরোনাম ("অবস্থান: ".$address_site."/form_register.php"); ) /* নির্বাচন বন্ধ করা */ $ result_query-> বন্ধ করুন (); // স্ক্রিপ্ট বন্ধ করুন () /* নির্বাচন বন্ধ করুন */ $result_query->close(); এবং তাই, আমরা সমস্ত চেক সম্পন্ন করেছি, এটি ব্যবহারকারীকে ডাটাবেসে যুক্ত করার সময়। নির্দিষ্ট স্থানে"" নিম্নলিখিত কোড যোগ করুন:

// (4) ডাটাবেসে ব্যবহারকারী যোগ করার জন্য কোডের জন্য জায়গা

//ডাটাবেসে একজন ব্যবহারকারী যোগ করার জন্য প্রশ্ন $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name ." ", "".$ ইমেল।", "".$ পাসওয়ার্ড।"")");

ডাটাবেসে ব্যবহারকারী যোগ করার অনুরোধে ত্রুটি
এখন আপনি আপনার ব্যবহারকারীর নাম এবং পাসওয়ার্ড ব্যবহার করে লগ ইন করতে পারেন।

যদি ডাটাবেসে একজন ব্যবহারকারীকে যুক্ত করার অনুরোধে একটি ত্রুটি ঘটে, আমরা সেশনে এই ত্রুটি সম্পর্কে একটি বার্তা যুক্ত করি এবং ব্যবহারকারীকে নিবন্ধন পৃষ্ঠায় ফিরিয়ে দিই।

অন্যথায়, সবকিছু ঠিকঠাক থাকলে, আমরা সেশনে একটি বার্তাও যোগ করি, কিন্তু এবার এটি আরও আনন্দদায়ক, যেমন আমরা ব্যবহারকারীকে বলি যে নিবন্ধন সফল হয়েছে। এবং আমরা অনুমোদনের ফর্ম সহ এটিকে পৃষ্ঠায় পুনঃনির্দেশ করি৷

ইমেল ঠিকানা বিন্যাস এবং পাসওয়ার্ডের দৈর্ঘ্য পরীক্ষা করার জন্য স্ক্রিপ্ট ফাইলটিতে রয়েছে header.php, তাই এটি এই ফর্ম থেকে ক্ষেত্রগুলিতেও প্রযোজ্য হবে৷

ফাইলে সেশনও শুরু হয় header.php, তাই ফাইলে form_auth.phpএকটি অধিবেশন শুরু করার প্রয়োজন নেই, কারণ আমরা একটি ত্রুটি পেতে হবে.

আমি আগেই বলেছি, ইমেল ঠিকানা বিন্যাস এবং পাসওয়ার্ডের দৈর্ঘ্য পরীক্ষা করার জন্য স্ক্রিপ্ট এখানে কাজ করে। অতএব, যদি ব্যবহারকারী একটি ভুল ইমেল ঠিকানা বা সংক্ষিপ্ত পাসওয়ার্ড প্রবেশ করেন, তিনি অবিলম্বে একটি ত্রুটি বার্তা পাবেন। একটি বোতাম লগইননিষ্ক্রিয় হয়ে যাবে।

ত্রুটিগুলি ঠিক করার পরে, বোতামটি লগইনসক্রিয় হয়ে ওঠে, এবং ব্যবহারকারী ফর্মটি সার্ভারে জমা দিতে সক্ষম হবে, যেখানে এটি প্রক্রিয়া করা হবে।

ব্যবহারকারীর অনুমোদন

মান বৈশিষ্ট্য কর্মঅনুমোদন প্রতিবন্ধকতা একটি নির্দিষ্ট ফাইল আছে auth.php, এর মানে হল যে ফর্মটি এই ফাইলে প্রক্রিয়া করা হবে।

এবং তাই, ফাইল খুলুন auth.phpএবং অনুমোদন ফর্ম প্রক্রিয়া করার জন্য কোড লিখুন। আপনাকে প্রথমে একটি সেশন শুরু করতে হবে এবং ফাইলটি সংযুক্ত করতে হবে dbconnect.phpডাটাবেসের সাথে সংযোগ করতে।

// ফর্মটি প্রক্রিয়া করার সময় যে ত্রুটিগুলি ঘটতে পারে তা যোগ করতে একটি ঘর ঘোষণা করুন৷

$_SESSION["error_messages"] = "";

ত্রুটি!//সফল বার্তা যোগ করার জন্য একটি ঘর ঘোষণা করুন $_SESSION["success_messages"] = "";

//প্রাপ্ত ক্যাপচা চেক করুন if(isset($_POST["captcha"]))( // লাইনের শুরু এবং শেষ থেকে স্পেস ট্রিম করুন $captcha = trim($_POST["captcha"]); if(! empty($captcha ))( //সেশন থেকে প্রাপ্ত মানের সাথে তুলনা করুন। if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != "")) ( // যদি ক্যাপচা ভুল হয়, তাহলে আমরা ব্যবহারকারীকে অনুমোদন পৃষ্ঠায় ফিরিয়ে দিই, এবং সেখানে আমরা তাকে একটি ত্রুটি বার্তা প্রদর্শন করব যে সে ভুল ক্যাপচা $error_message = " প্রবেশ করেছে।

ত্রুটি! if(isset($_POST["captcha"]) && !empty($captcha))( //সেশন থেকে প্রাপ্ত মানের সাথে তুলনা করুন। if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] !=""))( // যদি ক্যাপচা সঠিক না হয়, তাহলে আমরা ব্যবহারকারীকে নিবন্ধন পৃষ্ঠায় ফিরিয়ে দিই, এবং সেখানে আমরা তাকে একটি ত্রুটি বার্তা প্রদর্শন করব যে সে ভুল ক্যাপচা প্রবেশ করেছে৷ $error_message = "

ত্রুটি!ক্যাপচা এন্ট্রি ক্ষেত্রটি অবশ্যই খালি থাকবে না।

ত্রুটি!কোন ভেরিফিকেশন কোড নেই, অর্থাৎ একটি ক্যাপচা কোড। আপনি মূল পৃষ্ঠায় যেতে পারেন.

যদি ব্যবহারকারী সঠিকভাবে যাচাইকরণ কোডটি প্রবেশ করে, তাহলে আমরা এগিয়ে যাই, অন্যথায় আমরা তাকে অনুমোদন পৃষ্ঠায় ফিরিয়ে দিই।

মেইলিং এড্রেস চেক করা হচ্ছে

// লাইনের শুরু এবং শেষ থেকে স্পেস ট্রিম করুন $email = trim($_POST["email"]);

if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); // রেগুলার এক্সপ্রেশন $ ব্যবহার করে প্রাপ্ত ইমেল ঠিকানার বিন্যাস চেক করুন reg_email = "/^**@(+(*+)*\.)++/i"; //যদি প্রাপ্ত ইমেল ঠিকানার বিন্যাস রেগুলার এক্সপ্রেশনের সাথে মেলে না if(!preg_match($reg_email, $email) ))( // সেশন ত্রুটি বার্তা সংরক্ষণ করুন। $_SESSION["error_messages"] .="

"; // ব্যবহারকারীকে অনুমোদন পৃষ্ঠার শিরোনামে ফেরত দিন("HTTP/1.1 301 স্থায়ীভাবে সরানো"); শিরোনাম("অবস্থান: ".$address_site."/form_auth.php"); //স্ক্রিপ্ট প্রস্থান বন্ধ করুন(); ) )অন্যথা ( // সেশনে ত্রুটি বার্তা সংরক্ষণ করুন। $_SESSION["error_messages"] .="

একটি ডাক ঠিকানা (ইমেল) প্রবেশের জন্য ক্ষেত্রটি খালি হওয়া উচিত নয়৷

ব্যবহারকারী যদি ভুল বিন্যাসে একটি ইমেল ঠিকানা প্রবেশ করান বা ইমেল ঠিকানা ক্ষেত্রের মান খালি থাকে, তাহলে আমরা তাকে অনুমোদন পৃষ্ঠায় ফিরিয়ে দিই যেখানে আমরা এই সম্পর্কে একটি বার্তা প্রদর্শন করি।

পাসওয়ার্ড যাচাইকরণ

প্রক্রিয়া করার পরবর্তী ক্ষেত্রটি হল পাসওয়ার্ড ক্ষেত্র। নির্দিষ্ট জায়গায়" //(3) পাসওয়ার্ড প্রক্রিয়াকরণের জন্য জায়গা", আমরা লিখি:

If(isset($_POST["password"]))( //স্ট্রিং এর শুরু এবং শেষ থেকে স্পেস ছাঁটাই $password = htmlspecialchars($password, ENT_QUOTES); //পাসওয়ার্ড এনক্রিপ্ট করুন $password = md5($password."top_secret");অন্যথায়(//ত্রুটি বার্তাটি সেশনে সংরক্ষণ করুন। $_SESSION["error_messages"] .= "

আপনার পাসওয়ার্ড লিখুন

পাসওয়ার্ড ক্ষেত্র অনুপস্থিত

এখানে আমরা md5() ফাংশনটি প্রাপ্ত পাসওয়ার্ড এনক্রিপ্ট করতে ব্যবহার করি, যেহেতু আমাদের পাসওয়ার্ডগুলি ডাটাবেসে এনক্রিপ্ট করা আকারে রয়েছে। এনক্রিপশনে একটি অতিরিক্ত গোপন শব্দ, আমাদের ক্ষেত্রে " শীর্ষ_গোপন" ব্যবহারকারীকে নিবন্ধন করার সময় ব্যবহার করা আবশ্যক।

এখন আপনাকে এমন একটি ব্যবহারকারী নির্বাচন করতে ডাটাবেসে একটি প্রশ্ন করতে হবে যার ইমেল ঠিকানাটি প্রাপ্ত ইমেল ঠিকানার সমান এবং যার পাসওয়ার্ডটি প্রাপ্ত পাসওয়ার্ডের সমান।

// ব্যবহারকারীর নির্বাচনের উপর ভিত্তি করে ডাটাবেসে প্রশ্ন করুন।

$result_query_select = $mysqli->ক্যোয়ারী("নির্বাচন করুন * `ব্যবহারকারী` থেকে কোথায় ইমেল = "".$ ইমেল।"" এবং পাসওয়ার্ড = "".$ পাসওয়ার্ড।""");

ভুল লগইন এবং/অথবা পাসওয়ার্ড

সাইট থেকে প্রস্থান করুন

এবং শেষ জিনিস আমরা বাস্তবায়ন হয় সাইট ছাড়ার পদ্ধতি. এই মুহুর্তে, হেডারে আমরা অনুমোদন পৃষ্ঠা এবং নিবন্ধন পৃষ্ঠার লিঙ্কগুলি প্রদর্শন করি।

সাইটের শিরোনামে (ফাইল header.php), সেশন ব্যবহার করে আমরা পরীক্ষা করি যে ব্যবহারকারী ইতিমধ্যেই অনুমোদিত কিনা। যদি তা না হয়, তবে আমরা নিবন্ধন এবং অনুমোদনের লিঙ্কগুলি প্রদর্শন করি, অন্যথায় (যদি তিনি অনুমোদিত হন), তবে নিবন্ধকরণ এবং অনুমোদনের লিঙ্কগুলির পরিবর্তে আমরা লিঙ্কটি প্রদর্শন করি প্রস্থান করুন.

ফাইল থেকে সংশোধিত কোড টুকরা header.php:

নিবন্ধন

প্রস্থান করুন

আপনি সাইট থেকে প্রস্থান লিঙ্কে ক্লিক করলে, আমরা একটি ফাইলে নিয়ে যাই logout.php, যেখানে আমরা সেশন থেকে ইমেল ঠিকানা এবং পাসওয়ার্ড সহ কোষগুলিকে ধ্বংস করি। এর পরে, আমরা ব্যবহারকারীকে সেই পৃষ্ঠায় ফিরিয়ে দিই যেখানে লিঙ্কটি ক্লিক করা হয়েছিল প্রস্থান.

ফাইল কোড logout.php:

এতটুকুই। এখন আপনি জানেন কিভাবে নিবন্ধন এবং অনুমোদন ফর্ম বাস্তবায়ন এবং প্রক্রিয়াআপনার ওয়েবসাইটে ব্যবহারকারী. এই ফর্মগুলি প্রায় প্রতিটি ওয়েবসাইটে পাওয়া যায়, তাই প্রতিটি প্রোগ্রামারকে সেগুলি কীভাবে তৈরি করতে হয় তা জানা উচিত।

আমরা ক্লায়েন্ট সাইডে (ব্রাউজারে, জাভাস্ক্রিপ্ট, jQuery ব্যবহার করে) এবং সার্ভার সাইডে (PHP ব্যবহার করে) উভয় ক্ষেত্রে ইনপুট ডেটা যাচাই করতে শিখেছি। আমরাও শিখেছি সাইট ছাড়ার জন্য একটি পদ্ধতি প্রয়োগ করুন.

সমস্ত স্ক্রিপ্ট পরীক্ষা করা হয়েছে এবং কাজ করছে. আপনি এই লিঙ্ক থেকে এই ছোট সাইটের ফাইল সহ আর্কাইভ ডাউনলোড করতে পারেন।

ভবিষ্যতে আমি একটি নিবন্ধ লিখব যেখানে আমি বর্ণনা করব। এবং আমি একটি নিবন্ধ লেখার পরিকল্পনা করেছি যেখানে আমি ব্যাখ্যা করব (পৃষ্ঠাটি পুনরায় লোড না করে)। সুতরাং, নতুন নিবন্ধ প্রকাশ সম্পর্কে অবগত থাকার জন্য, আপনি আমার ওয়েবসাইটে সাবস্ক্রাইব করতে পারেন।

যদি আপনার কোন প্রশ্ন থাকে, আমার সাথে যোগাযোগ করুন, এবং আপনি যদি নিবন্ধে কোন ত্রুটি লক্ষ্য করেন, দয়া করে আমাকে জানান।

পাঠ পরিকল্পনা (অংশ 5):

1. অনুমোদন ফর্মের জন্য একটি HTML কাঠামো তৈরি করা
2. আমরা প্রাপ্ত ডেটা প্রক্রিয়া করি
3. আমরা সাইটের হেডারে ব্যবহারকারীর শুভেচ্ছা প্রদর্শন করি

আপনি নিবন্ধটি পছন্দ করেছেন?

আপনি আপনার কীবোর্ডে যে সমস্ত অক্ষর দেখেন তা একটি HTML নথির পাঠ্যে ব্যবহার করার অনুমতি নেই৷ যাইহোক, এটি যৌক্তিক। যদি প্রতিটি ট্যাগ অক্ষর দিয়ে শুরু হয় (<) и заканчивается символом (>), তাহলে এটা বেশ যৌক্তিক যে এই অক্ষরগুলি নিয়মিত পাঠ্যের মধ্যে নির্দিষ্ট করা যাবে না। HTML নথিতে এই অক্ষরগুলির বিশেষ অর্থ রয়েছে। ব্রাউজার যখন সেগুলি দেখে, তখন মনে করে যে সেগুলি HTML ট্যাগ এবং সেগুলিকে এভাবে ব্যাখ্যা করার চেষ্টা করে৷
একটি এইচটিএমএল নথির পাঠ্যে প্রবেশের জন্য নিষিদ্ধ অক্ষরগুলি যোগ করার সমস্যা সমাধানের জন্য, বিশেষ অক্ষরের একটি সেট তৈরি করা হয়েছিল - ক্রমগুলি যা কীবোর্ড থেকে প্রবেশের জন্য নিষিদ্ধ অক্ষরগুলিকে প্রতিস্থাপন করে। আপনার কীবোর্ডে নেই এমন অক্ষরগুলিও বিশেষ অক্ষর দিয়ে প্রতিস্থাপন করা যেতে পারে। এই ধরনের প্রতিটি ক্রম (স্মরণীয় লিঙ্ক) অবশ্যই একটি অ্যাম্পারস্যান্ড অক্ষর (&) দিয়ে শুরু হবে এবং একটি সেমিকোলন (;) দিয়ে শেষ হবে। (&) এবং (;) এর মধ্যে আপনি প্রবেশ করতে পারেন:

• বিশেষ চরিত্রের নাম (&নাম;);
• একটি সাংখ্যিক কোড যা () চিহ্নের পরে প্রবেশ করা হয়, অর্থাৎ, একটি বিশেষ অক্ষর টাইপ করার সময় তার সংখ্যাসূচক কোড উল্লেখ করে, আপনাকে নিম্নলিখিত এন্ট্রি ব্যবহার করতে হবে: (&code;);

নন-ব্রেকিং স্পেস

একটি অ-ব্রেকিং স্থান প্রধান উদ্দেশ্য () (অ-ব্রেকিং স্থান থেকে) — পৃথক শব্দ, কিন্তু এই সময়ে একটি নতুন লাইন নিষিদ্ধ। যেহেতু ব্রাউজার উইন্ডোর আকার ধ্রুবক নয়, একটি অনুচ্ছেদে নতুন লাইন স্বয়ংক্রিয়ভাবে ঘটে। এই ক্ষেত্রে, ব্রাউজার যে কোনও জায়গায় যেখানে একটি স্পেস বা হাইফেন আছে সেখানে লাইনটি ভেঙে দেবে। বানান নিয়ম অনুযায়ী, ভাষা কাঠামো আছে যা ভাঙা যায় না। একটি নন-ব্রেকিং স্পেস সহ নির্মাণ, উদাহরণস্বরূপ, অন্তর্ভুক্ত:

• আদ্যক্ষর সহ উপাধি;
• একটি শব্দের পূর্বে em ড্যাশ;
• একক শব্দের পরে একটি শব্দ;
• পরিমাপের একক দ্বারা অনুসরণ করা সংখ্যা।

• 15 মি/সেকেন্ড
• 100 কিমি/ঘন্টা

আপনি ইতিমধ্যেই জানেন, HTML-এ, একটি একক স্পেস দ্বারা পরপর একাধিক নিয়মিত স্পেস প্রতিস্থাপিত হয়। আপনি যদি টেক্সটে 10টি স্পেস লেখেন, ব্রাউজার তাদের মধ্যে 9টি মুছে ফেলবে। আপনার টেক্সটে প্রকৃত স্পেস যোগ করতে, আপনি একটি নন-ব্রেকিং স্পেস ব্যবহার করতে পারেন () .

উদ্ধৃতি।

মুদ্রণে, তিন ধরনের উদ্ধৃতি চিহ্ন রয়েছে: ডাবল কোণার উদ্ধৃতি চিহ্ন বা "হেরিংবোন" উদ্ধৃতি (“”), টাইপোগ্রাফিক উদ্ধৃতি চিহ্ন (“”) এবং হাতে লেখা “পা” উদ্ধৃতি (“”)। প্রোগ্রাম কোডগুলির সাথে কাজ করার সময়, আপনি ডবল স্ট্রেট কোট (" ") এবং একক সোজা উদ্ধৃতি (" ") ব্যবহার করবেন।
ঐতিহ্য অনুসারে, রাশিয়ান ভাষায় প্রধান ধরণের উদ্ধৃতি চিহ্নগুলি হল "ক্রিসমাস ট্রি"। এইচটিএমএল-এ, ক্রিসমাস ট্রি চিহ্নের সাথে মিলে যায় « এবং » . অনেক প্রকাশনায়, হেরিংবোনের পরিবর্তে টাইপোগ্রাফিক উদ্ধৃতি চিহ্ন এবং ডাবল সোজা উদ্ধৃতি চিহ্ন ব্যবহার করা হয়।
বাম এবং ডান টাইপোগ্রাফিক উদ্ধৃতি চিহ্নগুলি চিহ্নগুলির সাথে মিলে যায় “ এবং ” যথাক্রমে, এবং নীচের বাম উদ্ধৃতি চিহ্ন - „ .
ডাইরেক্ট ডবল উদ্ধৃতি একটি বিশেষ চরিত্রের সাথে মিলে যায় " .

বিশেষ উদ্ধৃতি অক্ষরের ব্যবহার নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

উদাহরণ: উদ্ধৃতি ব্যবহার করা

হাইফেন এবং ড্যাশ।

মুদ্রণে, তিনটি খুব অনুরূপ অক্ষর রয়েছে: এম ড্যাশ, এন ড্যাশ এবং হাইফেন। এর মধ্যে, একটি কম্পিউটার কীবোর্ডে শুধুমাত্র একটি আছে - হাইফেন। এটি সাধারণত সব ক্ষেত্রেই ব্যবহৃত হয় যখন টেক্সটে একটি হাইফেন বা ড্যাশ ঢোকানোর প্রয়োজন হয়। যাইহোক, এই চিহ্নগুলির ব্যবহার সম্পর্কিত কিছু বিরাম চিহ্নের নিয়ম অনুসরণ করা উচিত।
সুতরাং, হাইফেন (-) শুধুমাত্র শব্দের মধ্যে বা সংখ্যার মধ্যে ব্যবহৃত হয়। একটি এম ড্যাশ (—) একটি বাক্যে শব্দগুলির মধ্যে স্থাপন করা হয় এবং এই শব্দগুলি থেকে শূন্যস্থান দ্বারা পৃথক করা হয়। এম ড্যাশ একটি স্মৃতি সংক্রান্ত লিঙ্কের সাথে মিলে যায় — . এন ড্যাশ (-) অক্ষর ছাড়া সংখ্যার মধ্যে বা বড় অক্ষরে থাকা শব্দগুলির মধ্যে ব্যবহৃত হয় এবং গাণিতিক সূত্রগুলিতে একটি বিয়োগ চিহ্ন হিসাবেও ব্যবহৃত হয়। এন ড্যাশ এবং শব্দের মধ্যে কোন স্থান নেই। এন ড্যাশ একটি স্মৃতি সংক্রান্ত লিঙ্কের সাথে মিলে যায় - .

একটি হাইফেন এবং একটি ড্যাশ ব্যবহার নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

উদাহরণ: বিশেষ অক্ষর - এবং -

• নিজে চেষ্টা করে দেখুন »

সময়ই টাকা...

ওয়েব পৃষ্ঠাটি খুলতে খুব বেশি সময় নিচ্ছে৷
এটি 2-4 সেকেন্ডের মধ্যে লোড হওয়া উচিত।
সময়ই টাকা...

কিছু জনপ্রিয় HTML বিশেষ অক্ষরের তালিকা

বিশেষ অক্ষরের প্রকার

একটি নিয়মিত কীবোর্ডে আপনি বেশিরভাগ গাণিতিক, প্রযুক্তিগত, জ্যামিতিক এবং অন্যান্য বিশেষ অক্ষর পাবেন না।
একটি এইচটিএমএল পৃষ্ঠায় এই ধরনের প্রতীক প্রয়োগ করতে, আপনি তাদের সংশ্লিষ্ট স্মৃতির নাম ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একই প্রতীক বিভিন্ন কোড ব্যবহার করে প্রদর্শন করা যেতে পারে।