Node.js ওয়েবপেজ পার্ট 2: 7 ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

পার্ট 2 এ স্বাগতম !!

এটি আমার Node.js ওয়েবসাইট অ্যাপ্লিকেশন টিউটোরিয়ালের দ্বিতীয় অংশ। আমি এই টিউটোরিয়ালটিকে দুটি ভাগে ভাগ করেছি কারণ এটি তাদের আলাদা করে দেয় যাদের একটি সংক্ষিপ্ত পরিচিতি প্রয়োজন এবং যারা একটি ওয়েবপৃষ্ঠায় একটি সম্পূর্ণ টিউটোরিয়াল চান।

আমি আমার সাইট তৈরির মধ্য দিয়ে যাচ্ছি। আপনার ভিন্ন হতে পারে, তাই আমার অনুসরণ করুন এবং ব্যবহৃত কৌশলগুলি শিখুন। একবার আপনি একটি ভিন্ন HTML টেমপ্লেট চয়ন করলে প্রবাহটি কিছুটা ভিন্ন হবে। এটা মাথায় রাখুন।

ধাপ 1: অ্যাপ স্ট্রাকচার

তাই আমার সাইট এক্সপ্রেস জেনারেটর অনুসরণ করে, তবে আমি জেডের পরিবর্তে হ্যান্ডেলবার ব্যবহার করেছি। আপনি যদি জেড পছন্দ করেন তবে এটির জন্য যান! Jade হল সব বন্ধনী এবং div এর ছাড়া শর্ট হ্যান্ড HTML। যদি আপনি বুঝতে না পারেন যে আপনি হয়তো ইউটিউব ভিজিট করতে চান এবং কিছু HTML টিউটোরিয়াল দেখতে চান।

আমি পছন্দ করি এবং এইচটিএমএল এবং হ্যান্ডেলবারের সাথে আরও আরামদায়ক তাই আমি যা ব্যবহার করেছি। হ্যান্ডেলবার দিয়ে একটি এক্সপ্রেস প্রকল্প তৈরি করতে এক্সপ্রেস কমান্ডটি চালান।

express --hbs nameofmyapp

তারপর সমস্ত মিডল-ওয়্যার ইনস্টল করার জন্য পার্ট 1 এর ধাপটি অনুসরণ করতে থাকুন।

এক্সপ্রেস একটি খুব সুনির্দিষ্ট অ্যাপ স্ট্রাকচার তৈরি করে এবং একটি খুব দরকারী এক node.js অ্যাপ্লিকেশনগুলি কিছু ভিন্নতার সাথে এই ফর্মটি অনুসরণ করে।

সংযুক্ত ছবিতে আপনি বিভিন্ন ফোল্ডার এবং ফাইল দেখতে পারেন, নীচে আমি এই সব ব্যাখ্যা করার চেষ্টা করি।

বিন

এই ফোল্ডারটি প্রথমে চালানো হয় যখন node.js আপনার সার্ভার শুরু করে। এটি www ফাইলের দিকে তাকিয়ে আছে এবং এই ফাইলটি এক্সিকিউশনের জন্য অনুসরণ করে। Www ফাইল node.js কে পোর্ট 3000 এ একটি সার্ভার চালু করতে বলে (এটি প্রায় যেকোনো কিছুতে পরিবর্তিত হতে পারে) এবং ইভেন্ট শ্রোতা এবং অন্যান্য কিছু কাজ করতে পারে। প্রধান গুরুত্বপূর্ণ বিষয় হল পোর্ট যেখানে আপনার অ্যাপ সেট আপ করা হয়েছে।

node_modules

এই ফোল্ডারে যাকে বলা হয় মিডল-ওয়েয়ার। মিডল-ওয়েয়ার আমি আপনার জন্য কোডগুলি সহজ করার জন্য অতিরিক্ত সফ্টওয়্যার হিসাবে ব্যাখ্যা করতে পছন্দ করি। থিয়া মূলত অন্যান্য লাইব্রেরি যা আপনার ব্যবহারের জন্য পূর্ব থেকে তৈরি করা হয়েছে। এই প্রকল্পের জন্য আমি ব্যবহার করা কিছু অতিরিক্ত মিডল-ওয়েয়ার ছিল নোডমেলার, পাসপোর্ট, নডেমোন, বাইক্রিপ্ট এবং অন্যান্য।

জনসাধারণ

আপনার ওয়েবসাইটের জন্য আপনার সমস্ত চিত্র, CSS এবং জাভাস্ক্রিপ্ট এখানেই যাবে। এগুলি সরাসরি ওয়েবপেজগুলি ব্যবহার করে।

রুট

এগুলি আপনার সাইটের রুট নির্ধারণ করে। যেমন একটি হোমপেজ, লগইন পৃষ্ঠা এবং অন্যান্য।

দর্শন

যেমন আপনি দেখতে পারেন.hbs ফাইল বা.handlebars, হয় কাজ করবে এটি শুধু app.js ফাইলের কিছু হেরফের লাগে। এগুলি আপনার হ্যান্ডেলবার এইচটিএমএল পৃষ্ঠা যা ব্রাউজারে প্রদর্শিত হবে। লেআউট আপনার প্রধান লেআউট ফাইল এবং কখনও কখনও তার নিজস্ব লেআউট সাব ফোল্ডারে থাকে। প্রধান লেআউট ফাইলটি আপনার অন্যান্য হ্যান্ডেলবার ফাইলগুলিতে কল করে এবং সেগুলি প্রদর্শন করে, যখন আমরা কোডটিতে ডুব দেব তখন এটি আরও বোধগম্য হবে।

app.js

এটি আপনার প্রধান অ্যাপ ফাইল, কখনও কখনও এটিকে সার্ভার বলা হয়, এটি কেবল সেটআপের উপর নির্ভর করে। এই ফাইলটিতে সার্ভারের সমস্ত কনফিগারেশন এবং এমনকি কিছু বিশেষ ফাংশন রয়েছে। এটি একটি ত্রুটি হ্যান্ডলারও হবে।

package.json

এই ফাইলটি এক্সপ্রেস দ্বারা তৈরি করা হয়েছে এবং আপনি আপনার প্রকল্পে যে সমস্ত মিডলওয়্যার ব্যবহার করতে চান তা npm কে বলে। একবার আপনি npm ইন্সটল চালালে, এই ফাইলে বলা সমস্ত মিডল-ওয়েয়ার, node_modules ফোল্ডারে ইনস্টল করা হবে।

ধাপ 2: আপনার টেমপ্লেট লেআউট করুন

আপনি স্ক্র্যাচ থেকে আপনার সমস্ত HTML তৈরি করতে পারেন অথবা আপনি একটি টেমপ্লেট ব্যবহার করতে পারেন। আমি এই সাইটের জন্য একটি টেমপ্লেট ব্যবহার করেছি। অন্যান্য সাইট যা আমি বিকাশ করতে সাহায্য করেছি আমি স্ক্র্যাচ থেকে কোডেড করেছি। পছন্দ আপনার, এই ধাপ টেমপ্লেট বিন্যাস ব্যাখ্যা করে।

আমার ওয়েব অ্যাপ্লিকেশনটি একটি বুটস্ট্র্যাপ টেমপ্লেট ব্যবহার করে যা আশ্চর্যজনক CSS তৈরিতে দুর্দান্ত। টেমপ্লেট খুঁজে পেতে এই সাইটে যান। পূর্ববর্তী ধাপে যেমন উল্লেখ করা হয়েছে, সমস্ত প্রয়োজনীয় css, js এবং img ফাইলগুলি পাবলিক ফোল্ডারের অধীনে রয়েছে। এই ফাইলগুলি সাইটটিকে প্লেইন টেক্সটের চেয়ে ভাল দেখায় এবং সাইটে কীভাবে ছবিগুলি ব্যবহার করা হয়।

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

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

এক্সপ্রেস জেনারেট করা layout.handlebars ফাইল

{{title}} {{{body}}}

সত্যিকারের হ্যান্ডেলবার জাদু হ্যান্ডেলবারে আছে {{title}} এবং {{{body}}}। সুতরাং এই দুটি ভিন্নভাবে কাজ করে {{title}} হল একটি পরিবর্তনশীল যা index.js ফাইল থেকে রুটগুলিতে পাস করা হয়, একবার টেমপ্লেটে প্রেরণ করা হলে এটি প্রদর্শিত হয়। {{{Body}}} ট্যাগটি আপনার রুট js ফাইলে রেন্ডার ফাংশনে যা বলা হয় তা নেয়। আমাদের ক্ষেত্রে index.js এই লাইন আছে:

res.render ('index', {title: 'Express', count: userCount});

এটি আপনার ইন্ডেক্স, জেড, হ্যান্ডেলবার ইত্যাদি ব্যবহার করে 'ইন্ডেক্স' ফাইলকে কল করে, তাই আমাদের ক্ষেত্রে index.handlebars।

এক্সপ্রেস উৎপন্ন index.handlebars

{{শিরোনাম}}

{{Title}} এ স্বাগতম

Index.handlebars ফাইলটি একটি ভেরিয়েবলের মত {{{body}}} ট্যাগের মাধ্যমে পাস করা হয় এবং আপনার ওয়েবপেজে প্রদর্শিত হয়।

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

ধাপ 3: যোগাযোগ ফর্ম

আমি আমার ওয়েব পেজে একটি পরিচিতি ফর্ম অন্তর্ভুক্ত করেছি যাতে কেউ আমার সাইটের ইমেইল পাঠাতে পারে, প্রশ্ন বা মন্তব্য সহ।

এই পরিচিতি ফর্মটি একটি npm মধ্য-গুদাম ব্যবহার করেছে যাকে নোড মেইলার বলা হয়।

নোড মেইলার সেট আপ করা হচ্ছে

নোড-মেইলার ইনস্টল করার জন্য আপনাকে শুধু আপনার উপরের স্তরের ফাইলে নীচের কোডটি চালাতে হবে, আমাদের ক্ষেত্রে, myapp।

sudo npm nodemailer ইনস্টল করুন

একবার ইনস্টল করার পরে আপনাকে আপনার app.js ফাইলে কয়েকটি জিনিস সেট করতে হবে।

প্রথমটি কেবল নির্ভরতা, এটি নোডকে বলে যে আমরা এই মিডলওয়্যারটি ব্যবহার করার পরিকল্পনা করছি।

var nodemailer = প্রয়োজন ('nodemailer');

দ্বিতীয়টি হল আমাদের ট্রান্সপোর্টার, ট্রান্সপোর্টারটি আপনার মেইল সার্ভারের সাথে সংযোগ করতে ব্যবহৃত হয়, আমার ক্ষেত্রে জিমেইল।

// ট্রান্সপোর্টার জিমেইল অ্যাকাউন্ট পেতে ব্যবহৃত হয়

var transporter = nodemailer.createTransport ({service: 'gmail', auth: {type: 'OAuth2', user: '[email protected]', clientId: '139955258255-a3c6ilqu6rtocigde7cbrusicg7j00eh.google.com: 'Q775xefdHA_BGu3ZnY9-6sP-', refreshToken: '1 / 0HfdzyzW3FmnDPqeYkv19_py6zWgMCOqI9DSZ9kQWfc', accessToken: 'ya29. GlvDBGA2Z_coEKjQOnXAnBLbTB0wQmS-sARqNGC3V2UATiywNb34IhFq4d7UQvhTobE6pi83-FB2-OvMWjC-MK-EKPMYmwxFe9AOZ7mY6kurYyQ7e1Mu8m8INxg7'}})

যদি একটি ভিন্ন মেইল সার্ভারের সাথে নোডমেলার ব্যবহার করে দয়া করে ডকুমেন্টেশন এবং সাহায্যের জন্য এখানে দেখুন।

কিছু জিনিস ব্যক্তি থেকে ব্যক্তি পরিবর্তন হবে: ব্যবহারকারী, clientId, clientSecret। রিফ্রেশ টোকেন, এবং অ্যাক্সেস টোকেন।

আপনার ইউজারআইডি হল সেই ইমেইল যেখানে আপনি ব্যবহার করতে চান, আমি আমার সাইটের মতো একটি নতুন একটি ইমেল তৈরি করেছি।

ক্লায়েন্টআইডি, ক্লায়েন্টসেক্রেট, রিফ্রেশ টোকেন এবং অ্যাক্সেস টোকেনকে আপনার গুগল অ্যাকাউন্টের মাধ্যমে খুঁজে বের করতে হবে।

আপনার যদি আরও সাহায্যের প্রয়োজন হয় তবে আপনি এই ভিডিওটি এখানে অনুসরণ করতে পারেন।

একবার সেই সমস্ত ক্ষেত্রগুলি পূরণ হয়ে গেলে আমরা আমাদের বার্তার বিবরণ যুক্ত করব।

এরপরে আমাদের যাচাই করতে হবে যে আমাদের ফর্মের সমস্ত ক্ষেত্র প্রবেশ করা হয়েছে এবং বৈধ প্রতিক্রিয়া।

// Express Validatorapp.use (expressValidator ({errorFormatter: function (param, msg, value) {var namespace = param.split ('।'), Root = namespace.shift (), formParam = root; while (namespace.length) {formParam + = '[' + 'namespace.shift () +'] ''}} ফেরত {param: formParam, msg: msg, value: value};}}));

আমাদের এখন আমাদের ওয়েবপেজে আমাদের যোগাযোগ ফর্ম থেকে তথ্য পেতে হবে এবং একটি বার্তা পাঠাতে হবে।

// কন্টাক্ট সাবমিট বাটন থেকে পোস্ট করুন, জমা দেওয়া ফর্ম অ্যাপসপোস্ট ('/contact_Form', ফাংশন (req, res) {// যোগাযোগ ফর্ম থেকে তথ্য পান, হোমপেজ থেকে তথ্য পান। = req.body.name; var email = req.body.email; var phone = req.body.phone; var message = req.body.message; var mailOptions = {// একটি বার্তা পাঠানোর সময় ব্যবহৃত তথ্য তৈরি করে: ' স্বয়ংক্রিয় ইমেল ', থেকে:' [email protected] ', বিষয়:' ওয়েবসাইট যোগাযোগ ফর্ম: ' + নাম, পাঠ্য:' আপনি আপনার ওয়েবসাইটের যোগাযোগ ফর্ম থেকে একটি নতুন বার্তা পেয়েছেন। Here n / n ' +' এখানে বিস্তারিত হল: + n / n নাম: ' + নাম +' / n / n ইমেল: ' + ইমেল +' / n hone n ফোন: ' + ফোন +' / n / n বার্তা: / n ' + বার্তা} transporter.sendMail (mailOptions ফাংশন নতুন হোমপেজ, দেখুন কিভাবে সাফল্যের বার্তা দিয়ে এটি করা যায়, যেমন লগআউট পৃষ্ঠা})

ফ্ল্যাশ

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

অন্যান্য এনপিএম মিডলওয়্যারের মতো ফ্ল্যাশ ইনস্টল করুন।

sudo npm সংযোগ-ফ্ল্যাশ ইনস্টল করুন

var ফ্ল্যাশ = প্রয়োজন ('সংযোগ-ফ্ল্যাশ'); // স্ক্রিন বার্তায় দেখানোর জন্য ফ্ল্যাশ কার্যকারিতা ছিল

// Flashapp.use (flash ()) সংযোগ করুন;

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

// গ্লোবাল ভার্স

app.use (ফাংশন (req, res, next) {res.locals.success_msg = req.flash ('success_msg'); res.locals.error_msg = req.flash ('error_msg'); res.locals.error = req.flash ('ত্রুটি'); res.locals.user = req.user || null; next ();});

কিছু ফ্ল্যাশ সঙ্গে যুক্ত ভেরিয়েবল প্রয়োজন।

সেখানে আপনি একটি তৈরি যোগাযোগ ফর্ম যান।

ধাপ 4: লগইন পৃষ্ঠা

এটি এমন কিছু ছিল যা আমি দেখতে চেয়েছিলাম যদি আমি করতে পারি এবং ভবিষ্যতে আমি এটি ব্যবহার করতে পারি। আমি শুধু কোডটি ব্যাখ্যা করতে চেয়েছিলাম কারণ এটি আমার গিট রিপোজিটরিতে রয়েছে।

তাই এই অংশটি আরও কিছু npm মিডল-ওয়েয়ার ব্যবহার করে। নীচের কমান্ডগুলি ব্যবহার করে নিম্নলিখিতগুলি ইনস্টল করুন।

npm ইন্সটল পাসপোর্ট && npm ইন্সটল পাসপোর্ট-লোকাল && npm ইন্সটল bcryptjs

&& আপনাকে এক লাইন দিয়ে একাধিক কমান্ড চালানোর অনুমতি দেয়।

লগইন এবং ব্যবহারকারীরা

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

user.js

var এক্সপ্রেস = প্রয়োজন ('এক্সপ্রেস'); var রাউটার = এক্সপ্রেস। রাউটার (); var পাসপোর্ট = প্রয়োজন ('পাসপোর্ট'); var LocalStrategy = প্রয়োজন ('পাসপোর্ট-স্থানীয়')। কৌশল; var ব্যবহারকারী = প্রয়োজন ('../ মডেল/ব্যবহারকারী'); // নিবন্ধন router.get ('/register', function (req, res) {res.render ('register');}); // ব্যবহারকারীর রাউটার.পোস্ট নিবন্ধন করুন req.body.password; var password2 = req.body.password2; // যাচাইকরণ req.checkBody ('নাম', 'নাম আবশ্যক')। notEmpty (); req.checkBody ('ইমেল', 'ইমেল প্রয়োজন').notEmpty (); req.checkBody ('ইমেল', 'ইমেল বৈধ নয়')। isEmail (); পাসওয়ার্ড ',' পাসওয়ার্ড প্রয়োজন ')। notEmpty (); req.checkBody (' password2 ',' পাসওয়ার্ড মিলছে না ')। ত্রুটি) {res.render ('নিবন্ধন', {ত্রুটি: ত্রুটি});} অন্য {var newUser = নতুন ব্যবহারকারী ({name: name, email: email, username: username, password: password}); User.createUser (newUser, function (err, user) {if (err) throw err; console.log (user);}); req.flash ('success_msg', 'আপনি নিবন্ধিত এবং এখন লগইন করতে পারেন'); res.redirect (' /প্রবেশ করুন'); } });

এই টুকরো টুকরো করে ভেঙে ফেলুন

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

login.js

var এক্সপ্রেস = প্রয়োজন ('এক্সপ্রেস');

var রাউটার = এক্সপ্রেস। রাউটার (); var পাসপোর্ট = প্রয়োজন ('পাসপোর্ট'); var LocalStrategy = প্রয়োজন ('পাসপোর্ট-স্থানীয়')। কৌশল; var ব্যবহারকারী = প্রয়োজন ('../ মডেল/ব্যবহারকারী'); /* ব্যবহারকারীদের তালিকা পান। */// হোমপেজ router.get ('/', ফাংশন (req, res) {res.render ('login');}); পাসপোর্ট.উজ (নতুন লোকাল স্ট্র্যাটেজি (ফাংশন (ব্যবহারকারীর নাম, পাসওয়ার্ড, সম্পন্ন)) {User.getUserByUsername (ব্যবহারকারীর নাম, ফাংশন (ভুল, ব্যবহারকারী)) বার্তা: 'অজানা ব্যবহারকারী'});} User.comparePassword (পাসওয়ার্ড, ব্যবহারকারী পাসওয়ার্ড, ফাংশন (ভুল, isMatch) {যদি (ভুল) ভুল ত্রুটি; যদি (isMatch) {রিটার্ন সম্পন্ন (নাল, ব্যবহারকারী);} অন্য { ফেরত দেওয়া হয়েছে (শূন্য, মিথ্যা, {বার্তা: 'অবৈধ পাসওয়ার্ড'});}});});})); পাসপোর্ট। পাসপোর্ট। router.post ('/login', password.authenticate ('local', {successRedirect: '/', failRedirect: '/login', failFlash: true}), ফাংশন (req, res) {res.redirect ('/ ড্যাশবোর্ড ');}); router.get ('/logout', function (req, res) {req.logout (); req.flash ('success_msg', 'আপনি লগ আউট'); res.redirect ('/হোমপেজ');});

module.exports = রাউটার;

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

যেমন আমি পূর্বে উল্লেখ করেছি আমাদের ডাটাবেস চেক করার জন্য একটি মডেল তৈরি করতে হবে।

মডেল নামক আপনার প্রধান অ্যাপ্লিকেশন ফোল্ডারের অধীনে একটি ফোল্ডার তৈরি করে এটি করা হয়। এই ফোল্ডারে একটি user.js ফাইলও প্রয়োজন।

মডেল/ইউজার.জেএস

var mongoose = প্রয়োজন ('mongoose');

var bcrypt = প্রয়োজন ('bcryptjs'); // User Schema var UserSchema = mongoose. Schema ({username: {type: String, index: true}, password: {type: String}, email: {type: String}, name: {type: String}}); var User = module.exports = mongoose.model ('User', UserSchema);

module.exports.createUser = ফাংশন (newUser, callback) {

bcrypt.genSalt (10, ফাংশন (ভুল, লবণ) {bcrypt.hash (newUser.password, salt, function (err, hash) {newUser.password = hash; newUser.save (callback);});}); } module.exports.getUserByUsername = function (username, callback) {var query = {username: username}; User.findOne (প্রশ্ন, কলব্যাক); } module.exports.getUserById = ফাংশন (id, callback) {User.findById (id, callback); } module.exports.comparePassword = function (CandidPassword, hash, callback) {bcrypt.compare (CandidPassword, hash, function (err, isMatch) {if (err) throw err; callback (null, isMatch);}); }

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

ধাপ 5: ট্রাফিক কাউন্টার

আমি দেখতে চেয়েছিলাম কতজন অনন্য ব্যবহারকারী আমার ওয়েব পেজ পরিদর্শন করেছেন এবং "হিট" সংখ্যা গণনা করেছেন। এটি করার অনেকগুলি উপায় রয়েছে, আমি ব্যাখ্যা করব যে আমি কীভাবে এটি নিয়ে গিয়েছিলাম।

এটি কতগুলি ব্যবহারকারী আমার পৃষ্ঠা পরিদর্শন করেছে এবং প্রতিটি অনন্য দর্শনার্থী কতবার পরিদর্শন করেছে তা ট্র্যাক করতে এটি একটি মংডব সংগ্রহ ব্যবহার করে।

যেহেতু আমরা ইতিমধ্যে একটি মঙ্গোডিবি স্থাপনের বিষয়ে কথা বলেছি, আমি আর এটির মধ্য দিয়ে যাব না।

কম্পাইল করার জন্য আপনাকে আপনার ডাটাবেসে দুটি সংগ্রহ যোগ করতে হতে পারে। এটি করার জন্য আপনি একটি UI ব্যবহার করে RoboMongo ইনস্টল করতে পারেন, তবে আপনি যদি আমার মত হেডলেস রাস্পবেরি পাই ব্যবহার করেন তবে আপনি নিম্নলিখিত কমান্ডগুলি মজা পাবেন।

মঙ্গো খোল

একটি ডিবি সম্পাদনা করতে, তথ্য পেতে, অথবা একটি সংগ্রহ তৈরি করতে আপনার হেডলেস ইউনিটে মঙ্গো শেলের প্রয়োজন হবে।

দৌড়

মঙ্গো

এটি শেল খুলবে।

একটি সংগ্রহ যোগ করুন

আমার ক্ষেত্রে, ডাটাবেসকে লজিন্যাপ বলা হয়, আপনি যা চান তার নাম দিতে পারেন।

nameofyourdb ব্যবহার করুন

আমাদের সাইট পরিদর্শনকারী ব্যবহারকারীদের আমাদের সমস্ত আইপি ঠিকানা রাখার জন্য আমাদের একটি সংগ্রহ প্রয়োজন।

db.creatCollection ("ip")

পরবর্তী আমরা আমাদের সাইটে অনন্য হিট গণনা করার জন্য একটি সংগ্রহ তৈরি করি। এটি একটি আইডি দিয়ে শুরু হয় এবং 0 থেকে শুরু হয়।

db.createCollection ("count", {id: "hit counter", count: 0})

ট্র্যাক আইপি ঠিকানা

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

আমাদের মঙ্গুজ স্কিমা সংরক্ষণ করার জন্য আমাদের কিছু মডেল তৈরি করতে হবে এবং আমাদের হোমপেজ.জেএস ফাইলে কিছু কোড যুক্ত করতে হবে।

আমরা count.js এবং ip.js তৈরি করি এবং সেগুলি আমাদের মডেল ফোল্ডারে সংরক্ষণ করি।

Ip.js ফাইলটি আমাদের আইপি ঠিকানার জন্য একটি স্কিমা মাত্র

var mongoose = প্রয়োজন ('mongoose'); // মঙ্গোর জন্য প্যাকেজ হ্যান্ডলার

// কাউন্ট স্কিমা var IpSchema = mongoose. Schema ({ip: {type: String,}, count: {type: Number,}}); var Ip = module.exports = mongoose.model ('Ip', IpSchema);

count.js হিট ট্র্যাকিং শুরু করার জন্য আমাদের হোমপেজ দ্বারা কল করা হবে। এটি নিচের মতো করা হয়েছে।

//Homepagerouter.get('/ ', function (req, res) {publicIp.v4 ()। তারপর (ip => {Public_ip = ip; console.log ("ipv4:"+ public_ip); // =>'.5.৫.২১.১২23}); });

Count.getCount (সংগ্রহ, ipc, Public_ip, ফাংশন (গণনা) {

}); count = db.collection ('count')। findOne ({id: "hit counter"}, function (err, count) {userCount = count.count; res.render ('homepage', {count: userCount}); }); });

প্রতিবার কেউ আমাদের হোমপেজে গেলে, এই ক্ষেত্রে theinternet.onthewifi.com/homepage এ ঘটে।

এটি ব্যবহারকারীর IP, ip4 বা ip6 চেক করে, এবং তারপর সেই মান সংরক্ষণ করে যেখানে এটি count.get.collection- এ পাঠায় যা আমাদের count.js ফাইলে সংরক্ষিত একটি ফাংশন।

ব্যবহারকারীর স্বতন্ত্রতা যাচাই করার পর এটি হ্যান্ডলবার ভেরিয়েবল হিসেবে হোমপেজে কাউন্ট ভ্যালু ফেরত দেয় এবং পোস্ট করে।

Count.js ফাইলটি নিম্নরূপ।

//count.jsvar mongo = প্রয়োজন ('mongodb'); // ডাটাবেস var mongoose = প্রয়োজন ('mongoose') সমর্থন করে; // mongo mongoose.connect এর জন্য প্যাকেজ হ্যান্ডলার ('mongodb: // localhost/loginapp'); var db = mongoose.connection; var আইপি = প্রয়োজন ('../ মডেল/আইপি'); // কাউন্ট স্কিমা var CountSchema = mongoose. Schema ({id: {type: String,}, count: {type: Number,}}); var Count = module.exports = mongoose.model ('Count', CountSchema); module.exports.getCount = function (count, ipc, Public_ip, callback) {// count is test, callback isfunction ipc.findOne ({ip: Public_ip}, function (err, iptest) {if (! iptest) // add ডাটাবেসে না থাকলে একটি নতুন আইপি, এবং কাউন্টার আপডেট করুন {var new_ip = new Ip ({ip: Public_ip, count: 1}); ডাটাবেস count.update (// আপডেট হিট কাউন্টার {id: "hit counter"}, {$ inc: {count: 1}})} // // নির্দিষ্ট আইপি কাউন্টার আপডেট করুন, কে সবচেয়ে বেশি পরিদর্শন করে তা দেখতে {ipc.update ({ip: Public_ip}, {$ inc: {count: 1}})}}); }

এটি গণনা স্কিমা, এবং আমাদের.getCount ফাংশন তৈরি করে।. GetCount ফাংশন ব্যবহারকারীদের আইপি এর জন্য DB চেক করে এবং যদি এটি খুঁজে পায়, ফাংশন সেই ব্যবহারকারীর সংখ্যা বৃদ্ধি করে, হিট কাউন্টার নয়। তবে যদি ব্যবহারকারীদের আইপি না পাওয়া যায় তবে এটি ব্যবহারকারীদের আইপি দিয়ে একটি নতুন সংগ্রহ বস্তু তৈরি করবে এবং হিট কাউন্টারটি 1 দ্বারা বৃদ্ধি করবে।

এটি তারপর ফেরত দেওয়া হয় এবং ওয়েবপেজে প্রদর্শিত হয়।

সেখানে আপনার কাছে এটি একটি আইপি ট্র্যাকিং হিট কাউন্টার।

ধাপ 6: ব্লগ

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

ধাপ 7: সমাপ্ত

সেখানে আপনি আমার node.js ওয়েবসাইটে আমার রাস্পবেরি পাইতে স্থানীয়ভাবে হোস্ট করা একটি গভীরতা টিউটোরিয়াল যান। যদি আপনার কোন প্রশ্ন বা মন্তব্য থাকে তাহলে অনুগ্রহ করে তাদের নীচে ছেড়ে দিন।

আমি আশা করি এটি অন্যদের সাহায্য করবে।

হুগো ব্যবহার করে এই সাইটে একটি ভিন্ন পদ্ধতির জন্য, একটি স্ট্যাটিক ওয়েব পেজ জেনারেটর আমার অন্যান্য টিউটোরিয়াল দেখুন (শীঘ্রই আসছে)।