Showing posts with label तकनीक. Show all posts

Thursday, October 31, 2024

JavaScript Callback function and Promise in JavaScript in Hindi

Question: जावास्क्रिप्ट function के पैरामीटर में कोई दूसरा function हो तो वह function कैसे और कब call होता है?

जावास्क्रिप्ट में, एक फ़ंक्शन के पैरामीटर के रूप में दूसरे फ़ंक्शन को पास करना एक common practice है, जिसे आमतौर पर कॉलबैक फ़ंक्शन कहा जाता है। जब आप एक फ़ंक्शन को कॉल करते हैं, तो आप उसे एक अन्य फ़ंक्शन (कॉलबैक) के रूप में पैरामीटर के रूप में दे सकते हैं, और यह उस फ़ंक्शन के अंदर किसी विशेष समय पर दूसरे फ़ंक्शन को कॉल किया जा सकता है।

उदाहरण

नीचे एक उदाहरण दिया गया है जिसमें एक फ़ंक्शन greet है जो एक कॉलबैक फ़ंक्शन callback को पैरामीटर के रूप में लेता है और इसे कुछ समय बाद कॉल करता है।

// कॉलबैक फ़ंक्शन
function sayHello() {
    console.log("Hello!");
}

// मुख्य फ़ंक्शन जो एक कॉलबैक फ़ंक्शन को पैरामीटर के रूप में लेता है
function greet(callback) {
    console.log("Greeting begins");
    
    // कुछ समय के बाद कॉलबैक फ़ंक्शन को कॉल करें
    setTimeout(function() {
        callback(); // यहाँ कॉलबैक फ़ंक्शन को कॉल किया गया है
    }, 2000); // 2 सेकंड का समय कॉलबैक फ़ंक्शन  call होगा 
}

// greet फ़ंक्शन को sayHello फ़ंक्शन के साथ कॉल करें
greet(sayHello);

कैसे काम करता है:

कॉलबैक फ़ंक्शन (sayHello): यह एक साधारण फ़ंक्शन है जो "Hello!" संदेश को कंसोल में प्रदर्शित करता है।
मुख्य फ़ंक्शन (greet): यह एक फ़ंक्शन है जो एक अन्य फ़ंक्शन को पैरामीटर के रूप में लेता है। यह पहले एक संदेश प्रिंट करता है और फिर setTimeout का उपयोग करते हुए 2 सेकंड बाद कॉलबैक फ़ंक्शन (callback) को कॉल करता है।
greet(sayHello) कॉल: जब आप greet फ़ंक्शन को sayHello फ़ंक्शन के साथ कॉल करते हैं, तो greet फ़ंक्शन sayHello को पैरामीटर के रूप में लेता है। 2 सेकंड के बाद, sayHello फ़ंक्शन को कॉल किया जाता है, और "Hello!" कंसोल में प्रदर्शित होता है।

और उदाहरण:

आप विभिन्न परिदृश्यों में फ़ंक्शन के पैरामीटर के रूप में अन्य फ़ंक्शन का उपयोग कर सकते हैं। यहाँ एक और उदाहरण है जिसमें एक फ़ंक्शन डेटा को फ़िल्टर करता है:


// फ़िल्टर फ़ंक्शन
function filterArray(arr, callback) {
    let result = [];
    for (let item of arr) {
        if (callback(item)) { // कॉलबैक फ़ंक्शन का उपयोग
            result.push(item);
        }
    }
    return result;
}

// कॉलबैक फ़ंक्शन जो चेक करता है कि संख्या सम है या नहीं
function isEven(num) {
    return num % 2 === 0;
}

// एक एरे में से सम संख्याएँ फ़िल्टर करें
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = filterArray(numbers, isEven);
console.log(evenNumbers); // [2, 4, 6]

निष्कर्ष

जावास्क्रिप्ट में फ़ंक्शन के पैरामीटर में किसी दूसरे फ़ंक्शन को पास करना और उसे आवश्यक समय पर कॉल करना एक शक्तिशाली और लचीला तरीका है। इससे आप कोड को अधिक मॉड्यूलर और पुन: प्रयोज्य बना सकते हैं। कॉलबैक फ़ंक्शंस का उपयोग विशेष रूप से असिंक्रोनस प्रोग्रामिंग में, जैसे कि AJAX अनुरोध या टाइमर में, किया जाता है।

JavaScript Click event Handling in Hindi

Question. जावास्क्रिप्ट की मदद से किसी html file के button पर click event से सम्बंधित किसी फंक्शन को कैसे run किया जाता है?

जावास्क्रिप्ट की मदद से किसी HTML फाइल में बटन पर क्लिक इवेंट से संबंधित किसी फंक्शन को रन करने के लिए आप निम्नलिखित Steps का पालन कर सकते हैं:

1. HTML में बटन बनाएं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>
    <script src="script.js"></script> <!-- बाहरी जावास्क्रिप्ट फ़ाइल -->
</body>
</html>

2. जावास्क्रिप्ट में फंक्शन बनाएं

आप जावास्क्रिप्ट फाइल (script.js) में एक फंक्शन बना सकते हैं और उस फंक्शन को बटन के क्लिक इवेंट से जोड़ सकते हैं

// script.js
// फंक्शन जो क्लिक होने पर रन होगा
function myFunction() {
    alert("Button Clicked!");
}

// बटन पर क्लिक इवेंट को जोड़ें
document.getElementById("myButton").addEventListener("click", myFunction);

3. कैसे काम करता है

HTML में बटन: हमने एक बटन बनाया है जिसका ID myButton है।
जावास्क्रिप्ट में फंक्शन: हमने एक फंक्शन myFunction बनाया है, जो बटन क्लिक होने पर एक अलर्ट दिखाएगा।
इवेंट लिसनर जोड़ना: addEventListener का उपयोग करते हुए, हम बटन के लिए एक क्लिक इवेंट लिसनर जोड़ते हैं, जो myFunction को कॉल करेगा जब बटन पर क्लिक किया जाएगा।

4. पूरा उदाहरण

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }

        document.getElementById("myButton").addEventListener("click", myFunction);
    </script>
</body>
</html>

5. निष्कर्ष

इस तरीके से, आप किसी HTML फाइल में बटन पर क्लिक इवेंट के माध्यम से जावास्क्रिप्ट फंक्शन को चला सकते हैं।

Other Techniques

जावास्क्रिप्ट में किसी बटन पर क्लिक इवेंट को हैंडल करने के अन्य कई तरीके हैं। यहाँ कुछ अन्य तरीके दिए गए हैं:

1. इवेंट हैंडलर का उपयोग करते हुए (HTML में)

आप सीधे HTML में onclick एट्रिब्यूट का उपयोग कर सकते हैं, जिससे बटन पर क्लिक होने पर एक फंक्शन कॉल होता है। लेकिन यह तरीका उचित नही हैं क्योंकि यदि कल आप function का नाम एक जगह भी, HTML या script file में बदल देते हैं तो कोड ब्रेक कर जाता हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <button onclick="myFunction()">Click Here!</button>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }
    </script>
</body>
</html>

2. जावास्क्रिप्ट में डायनामिकली बटन बनाना

आप जावास्क्रिप्ट का उपयोग करके बटन बना सकते हैं और फिर उसे क्लिक इवेंट असाइन कर सकते हैं। यह मूलरूप से हमारे द्वारा बताया सर्वप्रथम तरीका है जिसमे हमने एक बटन पहले HTML पेज में बनाया था लेकिन यहाँ बटन स्क्रिप्ट द्वारा डायनामिकली बनाया जा रहा हैं बाकी लॉजिक वही पुराना हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Button Click Example</title>
</head>
<body>
    <div id="buttonContainer"></div>

    <script>
        function myFunction() {
            alert("Button Clicked!");
        }

        // नया बटन बनाना
        const button = document.createElement("button");
        button.textContent = "Click Here!";
        button.addEventListener("click", myFunction);

        // बटन को HTML में जोड़ना
        document.getElementById("buttonContainer").appendChild(button);
    </script>
</body>
</html>

3. jQuery का उपयोग करते हुए

यदि आप jQuery का उपयोग कर रहे हैं, तो इवेंट हैंडलिंग करना और भी आसान हो जाता है। लेकिन इसमें आपको लाइब्रेरी पर निर्भर रहना पड़ता हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Button Click Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        $(document).ready(function() {
            $("#myButton").click(function() {
                alert("Button Clicked!");
            });
        });
    </script>
</body>
</html>

4. एक्सप्रेशन का उपयोग करते हुए

आप जावास्क्रिप्ट के setTimeout या setInterval के साथ भी इवेंट हैंडल कर सकते हैं। यह भी क्लीन कोड है साथ ही किसी निश्चित अंतराल के बाद एक बार या बार बार इवेंट हैंडल कर सकते हैं।

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click with Timeout Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        document.getElementById("myButton").onclick = function() {
            setTimeout(function() {
                alert("Button Clicked!");
            }, 2000); // 2 सेकंड बाद अलर्ट दिखाएँ
        };
    </script>
</body>
</html>

5. फंक्शनल प्रोग्रामिंग स्टाइल

जावास्क्रिप्ट में, आप फंक्शनल प्रोग्रामिंग के तरीके से भी इवेंट हैंडल कर सकते हैं। यहाँ आप पहले function expression को arrow function के रूप में बनाते हैं और फिर इवेंट लिसनर का यूज़ पहले की तरह करते हैं

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Functional Style Button Click Example</title>
</head>
<body>
    <button id="myButton">Click Here!</button>

    <script>
        const handleClick = () => alert("Button Clicked!");
        document.getElementById("myButton").addEventListener("click", handleClick);
    </script>
</body>
</html>

6. निष्कर्ष

इन तरीकों से, आप अपनी आवश्यकता के अनुसार किसी भी बटन पर क्लिक इवेंट को हैंडल कर सकते हैं। आप इन तरीकों में से किसी का भी चुनाव कर सकते हैं, जो आपके प्रोजेक्ट की आवश्यकताओं और जावास्क्रिप्ट के उपयोग पर निर्भर करता है।

Friday, June 21, 2024

Node JS Introduction in Hindi Part2

सबसे पहले हम समझते हैं कि Node.js क्या है? जब हम Node.js को अपने सिस्टम में इंस्टॉल करते हैं, तो इसके द्वारा हम क्या कर सकते हैं? सबसे पहले इस पर विचार करते हैं।

node command

जिस प्रकार आप C# या C++ या C प्रोग्रामिंग लैंग्वेज के सॉफ़्टवेयर को इंस्टॉल करते हैं, तो वह एक compiler प्रदान करता है, जिसकी मदद से आप उस प्रोग्रामिंग लैंग्वेज में जब भी कुछ लिखते हैं, तो उस लैंग्वेज की गलतियों को पकड़ने में मदद मिलती है। साथ ही, लैंग्वेज को compile करने और उस लैंग्वेज के आधार पर जो सॉफ़्टवेयर बनता है, उसका EXE फाइल प्रदान करने में मदद करता है। फिर उस EXE फाइल को हम किसी भी मशीन पर जो मशीन कंपैटिबल हो, उस पर रन कर सकते हैं। इस प्रकार, जब हम प्रोग्रामिंग लैंग्वेज की मदद से कोई एप्लिकेशन विकसित करते हैं, तो हमें सॉफ़्टवेयर द्वारा न केवल compiler प्रदान किया जाता है, बल्कि और भी कई सारे debugging और build से संबंधित tools प्रदान किए जाते हैं।

जब आप Node.js को अपने सिस्टम में इंस्टॉल करते हैं, तब क्या होता है? तब आप node कमांड की मदद से किसी JavaScript फाइल को रन कर सकते हैं।

C:\Users\shribodh>node --help

Usage: node [options] [ script.js ] [arguments]

node inspect [options] [ script.js | host:port ] [arguments]

उपर के node कमांड से स्पष्ट है कि हम किसी JavaScript स्क्रिप्ट को रन कर सकते हैं।

Develop Server Side App

Node को अपने सिस्टम में इंस्टॉल करके हम कोई भी server-side application बना सकते हैं। Server-side application की खासियत यह होती है कि यह database के साथ कनेक्शन स्थापित कर सकता है और मशीन के विभिन्न प्रकार के फाइलों को प्राप्त कर सकता है, उन्हें modify कर सकता है या उन्हें delete कर सकता है। इस तरह की खूबी किसी client-side web application जैसे ब्राउज़र या JavaScript की मदद से जो बनते हैं, उन एप्लिकेशनों में नहीं होती। ऐसा इसलिए होता है ताकि ब्राउज़र या अन्य क्लाइंट एप्लिकेशनों द्वारा मशीन के डेटा को corrupt या नुकसान ना पहुंच सके। इसके विपरीत, server-side application को विकसित करने वाले सॉफ़्टवेयर में database से कनेक्शन करने और database से फाइलों को एक्सेस करने की खासियत होती है।

REST API based Applications

Node.js की मदद से हम ऐसे कई सारे एप्लिकेशन बना सकते हैं, जो server के फाइलों को modify करने से संबंधित हो या database से फाइल प्राप्त करके API डेटा के रूप में परिवर्तित करने की बात हो। इन सभी कार्यों के लिए Node.js सक्षम है। यही कारण है कि Node.js जैसे ज्यादातर सॉफ़्टवेयर RESTful API से संबंधित होते हैं। यहां भी API सर्वर-साइड API के प्रति client request भेजता है और Node.js API database के साथ कनेक्शन स्थापित करके डेटा को JSON के रूप में या plain text के रूप में या XML के रूप में client के पास भेज देता है। आमतौर पर Node.js का उपयोग यूज़र इंटरफेस को डिज़ाइन करने के लिए नहीं किया जाता, बल्कि server-side प्रोग्रामिंग के लिए किया जाता है। Server-side प्रोग्रामिंग का मुख्य कार्य database से कनेक्शन स्थापित करके डेटा को प्राप्त करना और client के पास भेजना है। Database के अलावा, server के मशीन के भीतर जितने भी अलग-अलग तरह के फाइल होते हैं, चाहे वह HTML वेब पेज हो या कोई अन्य प्रकार का static फाइल हो, जैसे इमेज, ऑडियो, वीडियो फाइल आदि, इन सभी फाइलों को client द्वारा request करने पर वेब सर्वर द्वारा भेज दिया जाता है। Node.js का उपयोग server एप्लिकेशन बनाने के रूप में किया जाता है, और विशेष रूप से हम यह कह सकते हैं कि Node.js का उपयोग API आधारित ऐप बनाने में किया जाता है, खासकर RESTful API को, जिसमें URL की uniformity का बहुत ध्यान रखा जाता है। URL की uniformity या सुसंगतता का अभिप्राय है कि client URL के आधार पर अलग-अलग प्रकार की request को server के पास भेजता है। RESTful API की सबसे बड़ी विशेषता उसका URL होता है, जिससे server डेटा को आमतौर पर JSON के रूप में भेजता है। पहले XML टेक्नोलॉजी का उपयोग ज्यादा होता था, लेकिन अब JSON को अधिक प्राथमिकता दी जा रही है, क्योंकि यह lightweight होता है।

NPM और Node

अब तक हमने समझ लिया कि Node.js का उपयोग किसलिए किया जाता है। अब हम देखेंगे कि Node.js का उपयोग अपने सिस्टम पर किस प्रकार कर सकते हैं। जब आप Node.js को इंस्टॉल करते हैं, तो उसके साथ ही एक NPM नाम का पैकेज भी इंस्टॉल होता है। NPM का फुल फॉर्म Node Package Manager होता है। Node पैकेज मैनेजर की मदद से हम Node से संबंधित अलग-अलग प्रकार के पैकेज को विकसित होने वाले एप्लिकेशन में शामिल कर सकते हैं। अलग-अलग तरह के Node पैकेज को एप्लिकेशन में उपयोग करने के लिए NPM की सहायता ली जाती है। जब हम Node.js को इंस्टॉल करते हैं, तो उसके साथ ही NPM, अर्थात Node Package Manager, भी इंस्टॉल हो जाता है।

हमने समझ लिया कि Node पैकेज मैनेजर क्या होता है। Node के भीतर ज्यादातर काम कमांड लाइन पर होता है, अर्थात हम टर्मिनल पर अपने कमांड लिखकर किसी कार्य को संपादित करते हैं। आपको यहां दो बातें ध्यान में रखनी चाहिए। एक, आप Node से संबंधित कमांड लिखते हैं, और दूसरी, आप NPM से संबंधित कमांड लिखते हैं। जो Node से संबंधित कमांड हैं और जो NPM, अर्थात Node पैकेज मैनेजर से संबंधित कमांड हैं, इन दोनों को अच्छे से जानना जरूरी है। आप NPM का उपयोग पैकेज को इंस्टॉल करने के लिए करते हैं, लेकिन यह पैकेज कहां इंस्टॉल होता है? जब आप कोई Node.js आधारित एप्लिकेशन विकसित करते हैं, तो उसके भीतर Node का पैकेज इंस्टॉल होता है।

npm command

C:\Users\shribodh>npm --help

npm <command>

Usage:

npm install install all the dependencies in your project
npm install <foo> add the <foo> dependency to your project
npm test run this project's tests
npm run <foo> run the script named <foo>
npm <command> -h quick help on <command>
npm -l display usage info for all commands
npm help <term> search for help on <term> (in a browser)
npm help npm more involved overview (in a browser)

All commands:

access, adduser, audit, bugs, cache, ci, completion, config, dedupe, deprecate, diff, dist-tag, docs, doctor, edit, exec, explain, explore, find-dupes, fund, get, help, help-search, hook, init, install, install-ci-test, install-test, link, ll, login, logout, ls, org, outdated, owner, pack, ping, pkg, prefix, profile, prune, publish, query, rebuild, repo, restart, root, run-script, sbom, search, set, shrinkwrap, star, stars, start, stop, team, test, token, uninstall, unpublish, unstar, update, version, view, whoami

Develop App based on Node and NPM

आइये हम Node पर आधारित application बनाते हैं और सीखते हैं कि कैसे इन दोनों का उपयोग किया जाता है।

सबसे पहले आप अपने डेस्कटॉप पर एक फ़ोल्डर बनाएँ और उसका एक वांछित नाम दे दीजिए। यह नाम आपकी application के नाम के अनुरूप होना चाहिए। फ़ोल्डर की भीतर जाकर राइट क्लिक करके आप अपने Visual Studio Code editor को ओपन कर लीजिए। Visual Studio Code editor के खुलने के बाद आप इसके टर्मिनल को ओपन कीजिए। टर्मिनल के भीतर आप निम्नलिखित command को टाइप कीजिए:

npm init

इस command को टाइप करने के बाद जब आप ENTER key प्रेस करते हैं तो आपके सिस्टम में एक package.json फाइल फ़ोल्डर के भीतर बन जाएगी। जब पहली बार आप ENTER प्रेस करते हैं, तो यह आपसे कई तरह के इनपुट के लिए आग्रह करेगा। आप जितने भी इनपुट के लिए पूछे जाएं, उन सभी के लिए सिर्फ ENTER प्रेस करते जाइए। अंत में, आपकी package.json फाइल आपके रूट फ़ोल्डर (जैसा कि आपने डेस्कटॉप पर बनाया था) के भीतर बन जाएगी। इस पैकेज का उपयोग एप्लिकेशन के भीतर पैकेज के मैनेजमेंट के लिए किया जाता है।

याद रखें कि Node.js का एप्लिकेशन पैकेज पर आधारित होता है। Node.js एप्लिकेशन में कई सारे पैकेज होते हैं, इसलिए उन पैकेज का मैनेजमेंट करना आवश्यक होता है। इन सभी कार्यों के लिए package.json फाइल का उपयोग किया जाता है।

जब आपका package.json पहली बार बनता है, तो उसे खोलने पर आपको आपकी एप्लिकेशन का नाम, डिस्क्रिप्शन और अन्य जानकारी मिलती है, जिसके बारे में हम धीरे-धीरे आगे सीखेंगे। जिस नाम का आपने फ़ोल्डर बनाया, उसी नाम को एप्लिकेशन का नाम मानकर package.json फाइल के भीतर एप्लिकेशन का नाम दे दिया जाता है, और डिस्क्रिप्शन में कुछ नहीं दिखता क्योंकि आपने ENTER प्रेस करके कोई जानकारी नहीं दी थी।

अभी तक आपने अपने एप्लिकेशन में कोई पैकेज इंस्टॉल नहीं किया है, इसलिए आपकी एप्लिकेशन में सिर्फ package.json फाइल होगी। सबसे पहले हम अपने एप्लिकेशन में एक पैकेज इंस्टॉल करेंगे। जब आप कोई पैकेज अपने सिस्टम में इंस्टॉल करते हैं, तो इंस्टॉल करते ही आपकी एप्लिकेशन के रूट फ़ोल्डर के भीतर node_modules नाम का एक फ़ोल्डर बन जाएगा। यह node_modules फ़ोल्डर उन सारे पैकेज को अपने भीतर रखेगा।

जब-जब आप अपना कोई नया पैकेज अपने एप्लिकेशन में इंस्टॉल करेंगे, साथ ही साथ package.json फाइल के भीतर भी उन पैकेज की जानकारी जैसे पैकेज का नाम, उसका वर्शन आदि लिखा जाएगा। जैसे ही आप कोई पैकेज अपने एप्लिकेशन में इंस्टॉल करते हैं, तो node_modules नामक फ़ोल्डर बनता है, और साथ ही साथ package-lock.json नाम का भी एक नया फाइल बनता है।

package-lock.json का कार्य प्रत्येक पैकेज के स्रोत, URL से लेकर अन्य महत्वपूर्ण जानकारी को संरक्षित करना है। इस प्रकार, package.json और package-lock.json दोनों मिलकर एप्लिकेशन के पैकेज मैनेजमेंट में महत्वपूर्ण भूमिका निभाते हैं।

याद रखें कि आपकी एप्लिकेशन का सबसे महत्वपूर्ण फाइल package.json होता है, जिसे पढ़कर आप या कोई भी अन्य व्यक्ति यह अंदाजा लगा सकता है कि किन-किन पैकेज का उपयोग करके आपका एप्लिकेशन विकसित किया गया है। पैकेज के versions को लॉक कर प्रोजेक्ट के packages को सुरक्षित रखा जाता है

Related Post: Node JS Introduction in Hindi

Node JS Introduction in Hindi

इस पोस्ट में हम Node.js तकनीकी के बारे में आवश्यक जानकारी प्राप्त करेंगे। इस पोस्ट को पढ़ने के बाद आप Node.js से संबंधित जितनी भी प्रारंभिक और आवश्यक जानकारी है, वह प्राप्त कर लेंगे। उदाहरण के लिए:

Node.js क्या है
Node.js को कैसे इंस्टॉल करते हैं
Node.js प्रोजेक्ट में किसी मॉड्यूल को कैसे क्रिएट करते हैं
Node.js की सहायता से आप HTTP वेब सर्वर को कैसे क्रिएट करते हैं
Node.js कमांड की मदद से किस प्रकार आप किसी भी JavaScript के कोड को अपने लोकल सिस्टम अर्थात डेस्कटॉप पर रन कर सकते हैं
Node.js की सहायता से आप कैसे किसी फाइल को रीड कर सकते हैं, उसे डिलीट कर सकते हैं, अपडेट कर सकते हैं, रिनेम कर सकते हैं, इत्यादि

How to run JS code on local server:

सबसे पहले अपने डेस्कटॉप पर एक प्रोजेक्ट फ़ोल्डर बनाइए। उस प्रोजेक्ट फ़ोल्डर के भीतर आप अपने विजुअल स्टूडियो कोड एडिटर को ओपन कीजिए। इसके बाद आप अपनी एक `index.js` JavaScript फाइल बनाइए। इस JavaScript फाइल के भीतर आप निम्नलिखित कोड लिखिए।

console.log('Node JS Tutorial');
console.log('Node is used for ...');

यह सारे कोड console.log से संबंधित हैं।

आप बिना किसी HTML फाइल को बनाए इस JavaScript फाइल के कोड को कैसे रन कर सकते हैं?

NOTE: अगर आप HTML फाइल बनाते हैं, तो वह फाइल ब्राउज़र में रन होगी, लेकिन अगर आप बिना HTML फाइल बनाए अपने JavaScript फाइल को रन करना चाहते हैं, तो इसके लिए आपको Node.js सिस्टम पर इंस्टॉल होना जरूरी है। मेरे सिस्टम पर Node.js इंस्टॉल है। अब मैं अपने विजुअल स्टूडियो कोड के भीतर टर्मिनल को ओपन करूंगा और निम्नलिखित कमांड को टाइप करूंगा:

node index.js

Node.js कमांड के बगल में index.js फाइल का नाम लिखिए और ENTER की प्रेस कीजिए, तो Node.js उस index.js फाइल को रन करेगा।

PS C:\Users\akshr\Desktop\Node Project1> node index.js

Node JS Tutorial

Node is used for ...

PS C:\Users\akshr\Desktop\Node Project1>

इस तरह हमने सीखा कि कैसे हम JavaScript के code को अपने लोकल सिस्टम पर Node JS की सहायता से रन कर सकते हैं ।

What is Module in Node project

अब अगला कार्य हम यह सीखेंगे कि module क्या होता है। Node.js के भीतर module का बहुत ही ज्यादा use होता है और यह सीखना बहुत ही सरल है। किसी भी अन्य प्रोग्रामिंग लैंग्वेज की तरह, मॉड्यूल का उपयोग आप अपने Node.js एप्लिकेशन में करते हैं।

मॉड्यूल एक JavaScript फाइल होती है, जिसमें डिफाइन किए गए functions और variables को public बना कर हम किसी दूसरे JavaScript फाइल के भीतर यूज़ कर सकते हैं।

ऐसा नहीं है कि module के भीतर जितने variables, class और functions हैं, उन सभी को आप दूसरे JavaScript फाइल में use कर सकते हैं। आप केवल उन्हीं variables, class और function को दूसरे JavaScript फाइल के भीतर use कर सकते हैं, जिनके साथ exports कीवर्ड को यूज़ किया गया है। बाकी private होते हैं

जिस variable या function को एक्सपोर्ट करना होता है, उसको एक्सपोर्ट करने के लिए exports कीवर्ड के बाद डॉट ऑपरेटर का उपयोग करते हैं और उस variable और function को डिफाइन करते हैं।

उदाहरण के लिए निम्नलिखित code को देखिए:

// math.js module

exports.add = function(a, b) {

return a + b;

}

जिस JavaScript फाइल में module use करना होता है, उसे JavaScript फाइल के टॉप में सबसे पहले हमें require function का उपयोग करते हुए, सिंगल या डबल कोटेशन के भीतर उस module का नाम लिखना होता है। इस तरीके से JavaScript का require function हमें module को इस नए JavaScript फाइल में उपलब्ध करा देता है। require function एक variable रिटर्न करता है, जिसे हम एक constant variable के रूप में किसी variable में संचित कर सकते हैं। इस variable की मदद से हम module के किसी भी variable और function को एक्सेस कर सकते हैं। Example: const http = require('http');

How to create HTTP server

अगला लर्निंग टिप्स यह है कि हम यह देखेंगे कि Node.js की सहायता से कैसे हम HTTP सर्वर क्रिएट कर सकते हैं। इसे क्रिएट करने के लिए सबसे पहले हमें HTTP पैकेज या module की जरूरत होगी। हम require function का उपयोग करते हुए HTTP module को अपने JavaScript फाइल के भीतर import कर लेते हैं। require function एक variable रिटर्न करता है, जिसमें वह HTTP module को पॉइंट करता हुआ variable प्राप्त होता है। इस variable की मदद से हम HTTP सर्वर को क्रिएट करेंगे।

HTTP ऑब्जेक्ट के createServer method की मदद से हम सर्वर क्रिएट करेंगे। createServer एक callback function लेता है, जो दो parameters को लेता है: एक request पैरामीटर, दूसरा response पैरामीटर।

createServer method के ऊपर हम listen method को apply करते हैं, जिससे वह सर्वर नेटवर्क के साथ जुड़ जाता है और किसी भी request को listen करने के लिए तैयार हो जाता है।

request JavaScript का एक ऑब्जेक्ट है। जब भी कोई request नेटवर्क के द्वारा सर्वर को भेजा जाता है, तो वह request ऑब्जेक्ट के भीतर सारी जानकारी को समाहित करके सर्वर को भेजा जाता है। ठीक इसी तरह, response ऑब्जेक्ट भी JavaScript का एक ऑब्जेक्ट है। जब भी सर्वर क्लाइंट को कोई उत्तर या response भेजता है, तो वह अपनी सारी जानकारी को response ऑब्जेक्ट के भीतर समाहित करके क्लाइंट को भेजता है।

प्रैक्टिस के लिए: आप एक प्रोजेक्ट बनाइए और सर्वर के द्वारा एक-दो संदेश को क्लाइंट के पास भेजिए। इसके लिए आपको request और response ऑब्जेक्ट की जरूरत पड़ेगी, खासकर response ऑब्जेक्ट की। response ऑब्जेक्ट के भीतर write और अन्य कई सारे methods उपलब्ध हैं, जिनका use करके आप अनेक तरह के कार्य कर सकते हैं, जैसे write method की सहायता से आप क्लाइंट को कोई संदेश लिखकर भेज सकते हैं।

सर्वर को क्रिएट करने के बाद उसे किसी port पर listen के लिए तैयार करना होता है। आप अपने लोकल होस्ट को इस पोर्ट पर ओपन करके request को सर्वर को भेज सकते हैं।

Response ऑब्जेक्ट के write method के द्वारा आप plain text को क्लाइंट को भेजते हैं। अगर आपको header भेजना हो, तो response ऑब्जेक्ट के writeHead method का उपयोग करते हैं। writeHead method के द्वारा आप response header की जानकारी को पैरामीटर के रूप में भेजते हैं। इसे आप निम्नलिखित code के रूप में देख सकते हैं।

Example:

const http = require('http');

const server = http.createServer((req, res) => {

res.writeHead(200, { 'Content-Type': 'text/plain' });

res.write('Hello, Client!');

res.end();

});

server.listen(3000, 'localhost', () => {

console.log('Server is listening on port 3000');

});

Node.js कैसे कार्य करता है?

इसको समझने की जो step-by-step प्रक्रिया है, उसे नीचे व्यक्त करते हैं। मान लीजिए आपने अपने JavaScript में कुछ कोड लिखा है और उसे आप सर्वर साइड पर रन करना चाहते हैं, तो इसके लिए आप Node.js का उपयोग करेंगे। अब अगर आपके सिस्टम पर Visual Studio Code या कोई और टेक्स्ट एडिटर नहीं है, तो आप इसे कैसे रन करेंगे? इसके लिए सबसे पहले अपने Windows डेस्कटॉप के command prompt को ओपन करेंगे और अपने command prompt को उस फाइल के path तक जाएंगे, जहां पर आपकी JavaScript फाइल पड़ी हुई है। यहां तक जाने के बाद आप अपने Node command को टाइप करेंगे और उसके बगल में उस फाइल का नाम लिखेंगे। तो Node उस JavaScript फाइल को रन कर देगा।

Node.js जब उस JavaScript फाइल को रन करेगा, तो यह एक तरह से server-side script का execution हो जाएगा। सर्वर साइड जब स्क्रिप्ट का execution हो जाएगा, तो सर्वर उस कोड को रन करने के बाद response के रूप में क्लाइंट को कुछ भेजेगा। अगर इस बात का पता लगाना हो, तो हमें अपने किसी ब्राउज़र को ओपन करना होगा। अब आप अपना Chrome browser ओपन कीजिए और localhost के बाद, कलम के बाद आप इस पोर्ट का उपयोग कीजिए (जैसे localhost:3000)। अगर आपका server सही से रन हो रहा है, तो इंटर प्रेस करने के बाद response में जो भी message भेजा जाएगा, वह आपके browser में दिखेगा।

Node Interactive Mode

Node command को आप अपने command prompt पर जब use करते हैं तो आप command prompt के भीतर भी अपने किसी JavaScript के statement को रन कर सकते हैं। उदाहरण के लिए अगर आप किसी variable को assign करना हो तो assign कर सकते हैं, दो expressions को जोड़ना हो या expression की value को रन करना हो, ये सारे काम आप command prompt में कर सकते हैं। लेकिन पहली बार जब आप command लिखना शुरू करेंगे, तो Node लिखकर enter press कर दें। इससे वो interactive mode में आ जाएगा। Node JS जब interactive mode में आ जाता है, तो उसके बाद आप अपने JavaScript के statement लिख सकते हैं और interactive mode से बाहर जाने के लिए आप CTRL+C press कर सकते हैं।

Node.JS और NPM में अंतर

हम समझेंगे की Node.JS और NPM में क्या अंतर है। देखिए, Node.JS एक तरह का platform provide करता है जिसके through आप किसी भी तरह का server-side application बना सकते हैं। Node.JS की मदद से आप अपने server-side application को बनाते हैं जो Windows, Mac और Linux तीनों platforms पर चल सकता है।

इसके विपरीत, NPM एक package manager है जिसका main काम आपकी application के लिए आवश्यक packages, जिसे हम modules या libraries कहते हैं, को available कराना है। NPM package manager की मदद से हमें modules या libraries मिल जाती हैं। ऐसे लाखों packages या modules available हैं और developer को उनमें से जो भी package या module चाहिए, वो NPM package manager के through install, uninstall या update कर सकते हैं। दूसरे शब्दों में, किसी भी module या package के प्रबंधन के लिए NPM का उपयोग किया जाता है। NPM हमें ऐसे commands provide करता है जिनकी मदद से हम किसी package को install, uninstall या update कर सकते हैं।

Package.json file

NPM की मदद से हम package.json नामक एक JSON file भी बना सकते हैं और उसमें dependencies या developer dependencies को record कर सकते हैं। वास्तव में, package नामक JSON file और NPM के द्वारा ही उसका प्रबंधन किया जाता है।

Node JS के मुख्य Packages या Modules

इस पोस्ट में हम देखेंगे की Node JS के कौन-कौन से important packages हैं और उनका क्या use है। कुछ प्रमुख modules इस प्रकार हैं:

Console module का use developer के द्वारा किया जाता है और यह development के दौरान debugging में बहुत मदद करता है।
HTTP module का use करके HTTP server का निर्माण किया जाता है और विभिन्न प्रकार के HTTP requests और responses से जुड़े काम किए जाते हैं।
Process module का use करके हम process से संबंधित कई प्रकार की जानकारी प्राप्त कर सकते हैं।
OS module का use करके हम operating system से संबंधित जानकारी प्राप्त कर सकते हैं और उसे manage या control कर सकते हैं।

सच तो यह है कि Node JS के अंतर्गत हमें कई तरह के packages मिलते हैं और एक अच्छा developer बनने के लिए हमें इन अलग-अलग packages की functionality का ज्ञान होना चाहिए।

Buffer

Node के अंतर्गत buffer एक महत्वपूर्ण object है। Buffer एक तरह का storage है जिसमें data को store किया जा सकता है, जो network के बीच travel करता है। यह data किसी भी storage media में रखा जा सकता है, जैसे की image files, audio, या video files। Buffer हम किसी भी प्रकार के data का create कर सकते हैं।

Node JS के अंदर Buffer नाम का एक global object provide किया गया है, जिसकी मदद से आप buffer से जुड़े कई काम कर सकते हैं। आपको buffer object के अलग-अलग methods को याद रखना है और समझना है कि उनका क्या काम है।

Buffer के अंतर्गत हम binary form के data को manage करते हैं। अगर आपको text form के data को handle करना हो तो उसके लिए buffer का use जरूरी नहीं है।

Buffer object का size allocate करने के बाद, आप buffer में data store कर सकते हैं। इसके लिए आप write और fill नाम के methods का use करते हैं।

उदाहरण के लिए, अगर आपको buffer कैसे create करना है तो buffer को आप किसी string या binary data से भी create कर सकते हैं। इसके लिए आप alloc या from नाम के functions का use करते हैं।

Buffer के data को copy किया जा सकता है, उसकी length की गणना की जा सकती है और उसे compare भी किया जा सकता है। इसका मतलब है कि buffer data के ऊपर कई प्रकार के operations perform किए जा सकते हैं, और दो buffer data के बीच में comparison भी हो सकता है। इन सभी कामों के लिए अलग-अलग methods दिए गए हैं।

Express JS Routing

जब भी आप कोई वेब एप्लीकेशन डेवलप करते हैं तो आपके सर्वर पर कई तरह के फाइल होते हैं और वह फाइल अलग-अलग फोल्डर में पड़े भी हो सकते हैं उदाहरण के लिए आपके सर्वर पर इमेज फाइल पीडीएफ फाइल म्यूजिक फाइल और भी अन्य तरह के फाइल हो सकते हैं तो सर्वर से उस फाइल को डाउनलोड करने के लिए या read करने के लिए आपको Routing का कॉन्सेप्ट आना चाहिए Express JS के अंतर्गत आप रूटिंग का कार्य सरलता पूर्वक कर सकते हैं इसी बारे में हम इस पोस्ट में देखेंगे।

पिछले पोस्ट में हमने देखा कि कैसे हम एक सरल Express JS का एप्लीकेशन बना सकते हैं जिसमें हमने Hello Express JS को Server की मदद से प्रिंट कराया था आज हम इस कोड में कुछ यूआरएल को डिफाइन करेंगे और उन यूआरएल को हम रूटिंग की मदद से रिसोर्स को प्राप्त करेंगे।

Where is JS code run in Express JS

एक बात ध्यान रखने लायक है कि आप यद्यपि जावास्क्रिप्ट में कोडिंग कर रहे हैं लेकिन यह सारा कोड सर्वर साइड कोडिंग है इसका अर्थ यह है कि यह कोड आपके सर्वर पर Run होगा और सर्वर में ही कहीं ना कहीं यह स्क्रिप्ट पडा हुआ होगा और इस स्क्रिप्ट को JavaScript रनटाइम एनवायरमेंट के सर्वर एनवायरमेंट में Run होगा इसको रन करने के लिए हमें नोड जेएस का एनवायरमेंट चाहिए दोबारा इसलिए रिपीट कर रहा हूं ताकि यह कंफ्यूजन ना रहे की जावास्क्रिप्ट में कोड लिखा हुआ होने के कारण आपके ब्राउज़र में Run होगा ऐसा नहीं होगा ब्राउज़र के द्वारा रिक्वेस्ट सर्वर पर भेजा जाएगा और सर्वर इस जावास्क्रिप्ट के सर्वर साइड कोड को Server के भीतर ही रन करेगा

Express App

जैसा कि हमने देखा कि किस तरह से हम एक app नामक ऑब्जेक्ट या वेरिएबल को एक्सप्रेस फ्रेमवर्क की मदद से बनाते हैं और यह सबसे महत्वपूर्ण ऑब्जेक्ट है इसी की मदद से हम Server के ऊपर गेट रिक्वेस्ट या पोस्ट रिक्वेस्ट भेज सकते हैं app ऑब्जेक्ट के साथ कई सारे मेथड है जैसे गेट पोस्ट इत्यादि इनका उपयोग करके हम सर्वर संबंधित सारी कोडिंग करेंगे।

app.get(url, callback) ;

नेटवर्क संबंधी कार्य के लिए कॉल बैक फंक्शन के भीतर आपको रिक्वेस्ट ऑब्जेक्ट और रिस्पांस ऑब्जेक्ट पैरामीटर के रूप में प्राप्त हो जाते हैं इन ऑब्जेक्ट्स का उपयोग करके आप अपने तट संबंधित कार्य को कर सकते हैं

एप्लीकेशन को हमेशा किसी पोर्ट पर रन कराया जाता है अतः आप अपने कोड में हमेशा यह अंतिम लाइन जरूर लिखें

app.listen(3000);

What is Base URL

रूटिंग को समझने के लिए सबसे पहले आपको बेस यूआरएल के कांसेप्ट को समझना चाहिए base url को हमेशा फारवर्ड सिलेक्ट से दिखाया जाता है अगर आपने केवल '/' लिखा है तो वह आपकी वेबसाइट के बेस यूआरएल को रिप्रेजेंट करेगा। आपके यूआरएल के पोर्ट तक के जितने भी हिस्से हैं उतने हिस्से को बेस यूआरएल रिप्रेजेंट करता है। जब सर्वर फॉरवार्ड स्लैश देखता है तो वह उसक बेस यूआरएल में परिवर्तित कर देता है

Router package in Express

रूटिंग का मूल विषय यूआरएल से जुड़ा हुआ है अलग-अलग तरह के यूआरएल किसी वेबसाइट के अलग-अलग संसाधन या रिसोर्स को प्राप्त करने के लिए माध्यम बनते हैं। स्पष्ट है की रूटिंग का कंसेप्ट और उपयोग महत्वपूर्ण भूमिका निभाते हैं अतः वेब फ्रेमवर्क के भीतर रूटिंग से संबंधित कार्यों को सरल बनाने के लिए राउटर प्रदान किया जाता है एक्सप्रेस जेएस वेब फ्रेमवर्क के भीतर भी router नाम का एक पैकेज उपलब्ध है जिसकी सहायता से हम अपने वेब एप्लीकेशन के भीतर रूटिंग का कार्य सरलता प्रयोग कर सकते हैं इस बात को हम एक उदाहरण से समझते हैं मान लीजिए कि आपने एक वेब एप्लीकेशन बनाया और यह वेबसाइट या वेब एप्लीकेशन किसी शिक्षण संस्था से जुड़ा हुआ है स्पष्ट है की वेबसाइट पर विभिन्न प्रकार के कोर्सेज से जुड़ा हुआ पेज होगा जब कोई यूजर अलग-अलग कोर्स जैसे एंड्राइड रिएक्ट पाइथन माइक्रोसॉफ्ट वर्ड इत्यादि से संबंधित अलग-अलग पेज बनाने होंगे और इन पेज के लिए हमें रूटिंग डिफाइन करना होगा । अभिप्राय है कि अगर हम केवल कोर्स पर विचार करें तो कोर्स से संबंधित कई सारे रूटिंग बनेंगे । इसी तरह अगर शिक्षण संस्थान के एडमिन से जुड़ा पेज पर विचार करें तो उसमें भी कई तरह के पेज बनेंगे । शिक्षकों के संबंध में भी फैकल्टी के लिए अलग-अलग कई तरह के पेज बनाने होंगे । अतः हम अपने वेबसाइट को कई भागों में भी वर्गीकृत कर प्रत्येक वर्ग के अंतर्गत कई सारे पेज बनाते हैं । अतः हमें कई सारे रूटिंग बनाने होंगे । स्पष्ट है कि यह कार्य अगर किया जाए तो बहुत ही जटिल हो इस कार्य को सरल बनाने के लिए राउटर पैकेज को प्रदान किया गया है । अब हम आगे देखेंगे कि कोर्सेज से संबंधित रूटिंग का कार्य कैसे हम किसी राउटर पैकेज से कर सकते हैं । इसके लिए हम अपने प्रोजेक्ट के भीतर कोर्सेज नाम का एक जावास्क्रिप्ट पेज बनाएंगे इस कोर्सेज पेज के भीतर हम राउटर पैकेज को इंक्लूड करेंगे । इसके लिए हम रिक्वायर्ड फंक्शन का उसे करेंगे आप संबंधित कोर्ट को नीचे देख सकते हैं।

एक बार जब हमने राउटर का ऑब्जेक्ट बना लिया तो उसके विभिन्न प्रकार के प्रॉपर्टी और मैथर्ड का उपयोग कर हम अपने रूटिंग कार्य को सरल कर सकते हैं मुख्य रूप से हम GETऔर POST मेथड का use करेंगे।

अब नीचे के स्टेटमेंट को उसे करके इस कोर्सेज पेज को इंडेक्स पेज के साथ जोड़ देंगे ।

exports.module = courses;

दूसरे शब्दों में हम इस पेज को एक्सपोर्ट कर देंगे ताकि यह पेज index.js पेज में use किया जा सके या किसी अन्य पेज में भी उसे यूज किया जा सके ।

इंडेक्स पेज के भीतर जो कोडिंग करनी है उस पर विचार करना है इंडेक्स पेज के भीतर हम उसे Middleware का use करेंगे मिडिल वेयर की सहायता से हम अपने कोर्सेज पेज में उपलब्ध जितने भी रूटिंग है उनको एक्सेस या प्राप्त कर सकते हैं आप नीचे के दिए गए कोड पर विचार करें सबसे पहले हमने कोर्सेज पेज को प्राप्त किया फिर हमने middleware का उपयोग करके Courses पेज के रूट को डिफाइन किया

इसी तरह एडमिन पेज के राउंड को भी हम अपने इंडेक्स पेज में मिडिलवारे की सहायता से जोड़ सकते हैं और एडमिन के लिए एक अलग पेज बनाकर उसमें जितने भी रूटिंग की जरूरत है उसकी कोडिंग हम वहां कर लेंगे ।

Express JS First Application

पिछ्ले पोस्ट में हमने देखा कि Express JS को कैसे हम अपने सिस्टम में सेटअप करते हैं सिस्टम में Express JS को सेटअप करने से अभिप्राय Express JS से संबंधित फ्रेमवर्क को अपने सिस्टम में इंस्टॉल करने से है हमने पिछले पोस्ट में देखा कि कैसे हम अपना एक प्रोजेक्ट फोल्डर बनाते हैं और Express JS फ्रेमवर्क को फोल्डर के भीतर इंस्टॉल किया इंस्टॉल करने पर आपको फोल्डर के भीतर एक दूसरा फोल्डर बना हुआ दिखाई दिया जिसका नाम है node modules है node modules मे वे सारे पैकेज होते हैं जिसका उपयोग आप अपने Express JS एप्लीकेशन में करते हैं सबसे पहले हम एक index.js फाइल बनाते हैं और इसके भीतर निम्नलिखित कोड लिखते हैं

const express = require ('express');

const app = express();

app.get('/', function(request, response)

{

response.send('Welcome ExpressJS');

});

app.listen(3000);

ऊपर के code को हम एक बार दोबारा से समझते हैं सबसे पहले हमने require फंक्शन की सहायता से Express JS फ्रेमवर्क को अपने प्रोजेक्ट में इंपोर्ट किया यह फंक्शन हमें express नामक एक फंक्शन ऑब्जेक्ट रिटर्न करता है इस फंक्शन ऑब्जेक्ट को अगले स्टेटमेंट में हमने executeकिया और उसकी एक app नामक वेरिएबल को assign कर दिया।

यह app वेरिएबल बहुत ही महत्वपूर्ण ऑब्जेक्ट होता है इसके भीतर अलग-अलग तरह के methods है जैसे get post और भी अन्य अन्य जिनकी मदद से हम अपने Server के कई तरह के कार्यों को संपादित करते हैं उदाहरण के लिए हम Server को गेट request भेज सकते हैं पोस्ट request भेज सकते हैं और जैसा कि आप ऊपर के code में देख रहे हैं की गेट request को भेजा गया है और कॉल बैक के भीतर हमेशा दो पैरामीटर हमने पास किया request और response इन दोनों में से आप किसी का उपयोग अपनी जरूरत के हिसाब से कर सकते हैं हमने response ऑब्जेक्ट को यूज करते हुए अपने वेब पेज के ऊपर वेलकम Express JSनामक टेक्स्ट को प्रिंट कराया।

How to run JS code on server and nodemon

JS कोड लिखना काफी नहीं है हमें यह सीखना है कि JavaScript code को सर्वर पर कैसे रन करेंगे जैसा कि हम जानते हैं कि हम सर्वर साइड प्रोग्रामिंग कर रहे हैं तो जो भी जावास्क्रिप्ट का कोड हम लिख रहे हैं वह सारा कोड सर्वर पर Run होगा सर्वर पर रन करने के लिए हम अपने Node JS का भी उपयोग कर सकते हैं लेकिन हम एक यूटिलिटी टूल का उपयोग करेंगे जिसका नाम है nodemonइसको रन करने के लिए हम nodemon अपने टर्मिनल में टाइप करेंगे और उस फाइल का नाम लिखेंगे जिसको रन करना है। उदाहरण के लिए index.js फाइल को रन करने के लिए हम nodemon index.js लिखेंगे एक्सटेंशन के साथ ENTER प्रेस करने पर आपका nodemon Server को स्टार्ट कर देगा और index.js फाइल के code को Server के द्वारा process किया जाएगा।

Cancel Request or Down Server

जब तक आप डेवलपमेंट कर रहे हैं आप अपने nodemon को कैंसल मत कीजिए कैंसिल करने के लिए CTRL +C press करना होता है CTRL +C press करने पर आपका सर्वर डाउन हो जाएगा अतः जब तक आप डेवलपमेंट कार्य कर रहे हैं तब तक आप अपने सर्वर को चालू रखें।

Sending Request

अपने सर्वर को स्टार्ट करने के बाद आप अपने ब्राउज़र को भी ओपन करते हैं और ब्राउज़र में जाकर आप अपने लोकलहोस्ट और पोर्ट संख्या दोनों को यूआरएल में लिखकर इंटर प्रेस करते हैं तो सर्वर आपको response भेजता है।

कहने का अभिप्राय यह है कि Server के चालू होने का अर्थ यह नहीं है कि आपको response मिल जाएगा आपको किसी क्लाइंट ब्राउज़र को ओपन करके उसे सर्वर के यूआरएल को एक्सेस करना होगा जब URL के through सर्वर पर request जाएगा तो सर्वर फिर आपको response के रूप में जो भी भेजना है वह आपको भेजेगा। साथ ही यह भी बहुत महत्वपूर्ण है कि यदि आपका Server GET request को हैंडल कर रहा है तभी वह क्लाइंट ब्राउज़र में response को दिखाएगा यदि POST request है तो वह ब्राउज़र में नहीं दिखाएगा और इसके लिए आपको Postman जैसे टूल का उपयोग करना होगा

Express JS Project Setup

दोस्तों इस पोस्ट में हम समझेंगे कि आप अपने सिस्टम में Express JS वेब फ्रेमवर्क को कैसे इंस्टॉल कर सकते हैं| सबसे पहले आप अपने प्रोजेक्ट फोल्डर को बना लीजिए और इस प्रोजेक्ट फोल्डर के path में अपने Command Prompt को ओपन कीजिए। उदाहरण के लिए हम Express Project1 नाम से project folder बना सकते हैं

Create package.json file

Command Prompt मे NPM की सहायता से आप अपने पैकेज को इंस्टॉल करेंगे। पैकेज को इंस्टॉल करने से पहले package.json नाम का एक फाइल बना लीजिए। इसको बनाने के लिए आपको निम्नलिखित command को Command Prompt की सहायता से Project folder के भीतर रन करना होगा।

npm init -y

हमने Express Project1 नाम से project folder बनाया है|

C:\Users\akshr\Desktop\Express Project1>npm init -y

Wrote to C:\Users\akshr\Desktop\Express Project1\package.json:

{

"name": "express-project1",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC"

}

C:\Users\akshr\Desktop\Express Project1>

NOTE: यदि आप -y Switch का use नहीं करते हैं तो जब आप इस Command को रन करेंगे तो आपको स्क्रीन पर कुछ हेल्प से संबंधित टेक्स्ट नजर आएगा इनको इग्नोर कर दें।अब आपसे पैकेज का नाम पूछेगा आप जो भी डिफॉल्ट नाम है उसी को रहने दे और बार-बार ENTER दबाते जाए कुछ भी परिवर्तन ना करे| अपने सारे डिफॉल्ट ऑप्शन को स्वीकार किया अतः आपका Version एक होगा एंट्री पॉइंट main index.js होगा index.js फाइल सबसे पहले Run होगा इसलिए इसको एंट्री पॉइंट कहते हैं| इसके अतिरिक्त आप अपने ऑथर, लाइसेंस इत्यादि को भी लिख सकते हैं लेकिन इन सब को छोड़ सकते हैं।

आपके प्रोजेक्ट फोल्डर के भीतर package.json नामक फाइल बन जाएगा आप उस फाइल को खोलकर भी देख सकते हैं आपको उस फाइल के भीतर सारे डिस्क्रिप्शन मिल जाएंगे जिसके लिए आपने इनपुट किया|

What does package.json file

package.json नामक फाइल आपके एप्लीकेशन के नाम उसके विभिन्न डिस्क्रिप्शन के बारे में बताता है साथ ही बताता है कि इसका लाइसेंस क्या है और इसका author कौन है लेकिन इतना करना ही काफी नहीं है अभी तक आपने केवल अपने एप्लीकेशन का नाम उसका Version, author और लाइसेंस के बारे में कार्य किया है

Install project dependencies

अब आप अपने पैकेज के भीतर वह उन सारे dependencies का install करेंगे जिसका उपयोग आपकी एप्लीकेशन में होगा उन dependencies को automatically डाउनलोड करके npm इंस्टॉल कर देगा। इस कार्य को संपादित करने के लिए आपको निम्नलिखित Command को रन करना होगा.

npm install --save express

NOTE: ऊपर का Command एक्सप्रेस वेव फ्रेमवर्क को इंस्टॉल करने के लिए आग्रह है इस Command को रन करते समय आपके सिस्टम में इंटरनेट की सुविधा उपलब्ध होनी चाहिए क्योंकि सारे dependencies को इंटरनेट से ही डाउनलोड करके NPM इंस्टॉल करेगा।

आपके सिस्टम में Express JS का कौन सा वर्जन डिपेंडेंसी के रूप में इंस्टॉल हुआ है इसकी जानकारी प्राप्त करने के लिए आप अपने package.json फाइल को दोबारा खोलिए उसमें आपको dependencies करके जो एलिमेंट दिखाई देगा उसमें आपको उसका version भी लिखा हुआ मिल जाएगा।

index.js file

अब आप अपने प्रोजेक्ट के एप्लीकेशन को बनाना शुरू कर सकते हैं आपके प्रोजेक्ट का एंट्री पॉइंट index.js फाइल होता है इसलिए सबसे पहले आप अपने index.js फाइल को बनाएंगे।

जैसा कि आपने अपने सिस्टम में Express JS वेब फ्रेमवर्क को इंस्टॉल कर लिया है तो उस फ्रेमवर्क के अंतर्गत अलग-अलग कार्यों को करने के लिए अलग-अलग पैकेज या लाइब्रेरी उपलब्ध है. सबसे important पैकेज का नाम express है।

What is the meaning of following command in ExpressJS?

const express = require ('express');

Answer: This command in ExpressJS imports the Express framework into your Node.js application. It allows you to use Express's functionalities for creating web applications, handling HTTP requests, routing, etc.

Express JS के अंतर्गत require फंक्शन के द्वारा आप किसी पैकेज को अपने प्रोग्राम में import करते हैं।

const express = require ('express');

const app = express();

What is the meaning of the following statements?

const express = require ('express');

const app = express();

Is it a call to a function called express?

Answer: Yes, the second statement `const app = express();` is indeed a call to a function called `express()` that is exported by the Express module. When you import Express using `require('express')`, it returns a function, and by invoking this function, you create an instance of the Express application, which is commonly referred to as `app` This `app` object is used to configure routes, middleware, and other functionalities in your Express application.

अब app ऑब्जेक्ट का उपयोग करते हुए हम server के पास किसी भी तरह का GET या POST रिक्वेस्ट भेज सकते हैं।

app.get('/', callback);

कॉलबैक फंक्शन दो पैरामीटर लेगा रिक्वेस्ट और रिस्पांस और उनकी मदद से आप रेस्पॉन्स या रिक्वेस्ट को हैंडल कर सकते हैं।

app|listen(3000); //port number

SUMMARY

Create project folder
Create package.json file inside project folder
Install dependencies inside project folder
Create index.js file inside project folder
Create an instance of express application
Use GET or POST method to send a request

React JS और Express JS मे अंतर, MEAN Stack

दोस्तों इस पोस्ट में हम React JS और Express JS इन दोनों टेक्नोलॉजी के बीच के डिफरेंट को समझेंगे और यह भी देखेंगे कि कौन ज्यादा पॉपुलर है React JS का उपयोग मुख्य रूप से फ्रंट एंड यूजर इंटरफेस को बनाने के लिए किया जाता है जबकि Express JS का उपयोग एक सर्वर साइड एप्लीकेशन को डेवलप करने के लिए किया जाता है।

React JS और Express JS दोनों ही वेब टेक्नोलॉजी के फ्रेमवर्क है। React JS लाइब्रेरी का उपयोग वेबसाइट के फ्रंट एंड अर्थात यूआई डिजाइन करने के लिए किया जाता है तो इसके विपरीत Express JS का उपयोग वेब फ्रेमवर्क के रूप में सर्वर साइड एप्लीकेशन को डेवलप करने के लिए किया जाता है।

यहां यह भी बात समझना जरूरी है की Node JS एक रनटाइम एनवायरमेंट है जिसका उपयोग जावास्क्रिप्ट के कोड को सरवर एनवायरमेंट में रन करने के लिए किया जाता है। दूसरे शब्दों में Node JS की सहायता से जावास्क्रिप्ट को सर्वर एप्लीकेशन को रन करने के लिए किया जाता है। उदाहरण के लिए अगर आपने Express JS में किसी एप्लीकेशन को डेवलप किया है तो वह सर्वर साइड एप्लीकेशन होगा और उसको रन करने के लिए आपको सर्वर एनवायरमेंट चाहिए और Node JS उसे सर्वर साइड एनवायरमेंट को उपलब्ध कराता है। जब आप Express JS में कोडिंग करते हैं तो वह कोडिंग जावास्क्रिप्ट में ही कोडिंग होती है लेकिन वह सर्वर साइड Run होगा। सर्वर साइड रन करने के लिए आपको एक एनवायरमेंट चाहिए वह एनवायरमेंट आप Node JS को इंस्टॉल करके उपलब्ध कराते हैं

Express JS के अंतर्गत आपको Routing से संबंधित जितने भी काम करने हैं API से संबंधित जैसे REST API से संबंधित विभिन्न प्रकार के कार्य जैसे अपने यूआरएल को डिफाइन करना, जितने भी अलग-अलग तरह के Endpoint है, या फिर Routing को डिफाइन करना इत्यादि यह सारे कार्य जो सर्वर से संबंधित होते हैं उसको आप Express JS स्कीम मदद से करते हैं। याद रखें कि Express JS एक वेब फ्रेमवर्क है।

Express JS फ्रेमवर्क का उपयोग करते हुए आप किसी डेटाबेस के साथ कनेक्शन स्थापित कर सकते हैं उदाहरण के लिए अगर आप MangoDB डेटाबेस के साथ अपने सर्वर को कनेक्ट करना चाहते हैं तो यह कार्य आप Express JS वेब फ्रेमवर्क की मदद से आसानी से कर सकते हैं।

Express JS वेब फ्रेमवर्क का उपयोग करके आप अलग-अलग तरह के API बना सकते हैं खास करके आप REST API जो की अत्यंत पॉपुलर है उसको भी बना सकते हैं।

आशा है अब तीनों के बीच के अंदर समझ में आ गए होंगे।

इससे संबंधित एक और भी बात हम समझ लेते हैं कि MEAN स्टाक क्या है? MEAN स्टाक चार तरह के अलग-अलग टेक्नालॉजियों का स्टॉक है जिसमें सबसे पहले M का अर्थ है MangoDB और E का अर्थ है Express JS, Aअर्थ है एंगुलर और N का अर्थ है Node JS इस प्रकार इन चारों टेक्नोलॉजी के सम्मिलित करके जो आप स्टॉक तैयार करते हैं उसे स्टॉक को MEAN स्टाक कहते हैं।

हमने समझ लिया कि इन चारों टेक्नोलॉजी का अलग-अलग क्या Use है अब हम इन टेक्नालॉजियों को अपने सिस्टम में इंस्टॉल करेंगे और अपने एप्लीकेशन को डेवलप कर सकते हैं सबसे पहले हमें Node JS को इंस्टॉल करना जरूरी होता है क्योंकि Node JS वह रनटाइम एनवायरमेंट provide करता है जिसके द्वारा आप अपने Express JS के एप्लीकेशन को रन कर सकते हैं बिना Node JS को इंस्टॉल किया आप अपने किसी भी एप्लीकेशन को रन नहीं कर सकते हैं अतः यह अति आवश्यक है कि सबसे पहले आप अपने सिस्टम में Node JS को इंस्टॉल करें उसके बाद आप अपने Express JS को इंस्टॉल करें।

Node JS और Express JS इन दोनों की मदद से आप अपना सर्वर साइड एप्लीकेशन बना सकते हैं यदि आप अपने एप्लीकेशन को डेटाबेस से जोड़ना चाहते हैं तो इसके लिए आप MangoDB को भी इंस्टॉल कर सकते हैं।

VS Code Snippets

विजुअल स्टूडियो कोड के भीतर हम स्वयं का शॉर्टकट्स भी बना सकते हैं। स्वयं का शॉर्टकट्स बनाने के लिए हमें Preferences के भीतर जाना होता है जो सेटिंग्स का एक पार्ट है आप File मेंनू के भीतर भी इसे पा सकते है Preferences की भीतर जाकर आप Keyboard Shortcuts को सर्च कर सकते हैं सर्च करने के बाद आप JavaScript सर्च करेंगे क्योंकि विजुअल स्टूडियो कोड का उपयोग अलग-अलग तरह के प्रोग्रामिंग लैंग्वेज के लिए होता है तो आप किस लैंग्वेज के लिए शॉर्टकट बनाना चाहते हैं यह विजुअल स्टूडियो को पहले बताना होगा जब आपने जावास्क्रिप्ट का चयन कर लिया तो उससे संबंधित शॉर्टकट को आप बना सकते हैं। बने हुए शॉर्टकट्स को भी आप परिवर्तित कर सकते हैं।

विजुअल स्टूडियो कोड के भीतर Keyboard Shortcuts के अलावा आप अपने Snippet को भी तैयार कर सकते हैं Snippet से अभिप्राय:- VS Code Editor के भीतर संक्षिप्त कोड लिखकर Tab दबाने के बाद वह कोड Expand कर जाता है इसे ही Snippet कहते हैं उदाहरण के लिए जावास्क्रिप्ट के कोडिंग के भीतर console.log लिखने के लिए आप एक छोटा सा शब्द clg लिखिए और Tab को प्रेस कीजिए तो वह एक्सपेंड होकर console.log बन जाएगा इसके लिए आपके आपको नीचे दिए गया Snippet कोड लिखना होगा।

"Console Log": {

"prefix": "clg",

"body": [

"console.log($1);"

"description": "Console log with placeholder"

}

ऊपर लिखे गए Snippet के कोड की व्याख्या कुछ इस प्रकार है सबसे पहले हम JSON सिंटेक्स को use करते हुए अपने Snippet को लिखते हैं।

Key और value दोनो को double quotation के भीतर लिखते हैं।

सबसे पहले Snippet का एक मीनिंगफुल नाम देते हैं जैसे कि हमने Console Log लिखा है यह एक मीनिंगफुल नाम है जो बताता है कि यह console.log लिखने के लिए snippet है।

हमें क्या करना होगा इसकी व्याख्या उसके बॉडी के भीतर अर्थात curly braces के भीतर है। बॉडी के भीतर हमें prefix key का जो वैल्यू दिख रहा है वह keys के संजोग को बता रहा है जिसको लिखने के बाद Tab दबाने पर

हमारा कोड एक्सपेंड होकर console.log बन जाएगा। ध्यान दीजिए कि प्रीफिक्स keys के संयोग को बताता है जिसको लिखने के बाद tab प्रेस करना है।

body key के value के द्वारा उस expansion को दिया गया है जो Tab के दबाव के बाद बनेगा। body का value एक array है क्योंकि हम कई सारे statements को एक snippet के द्वारा लिख सकते हैं। उदाहरण के लिए, console.log(); लिखने के लिए हम value के लिए console.log(); लिखेंगे।

अब प्रश्न है कि Tab दबाने पर कर्सर की position कहाँ होगी। इसके लिए $1 का उपयोग किया गया है। चूँकि $1 को () के भीतर लिखा गया है। अतः कर्सर पोजिशन () के भीतर होगा।

NOTE: बस आपको $1 का अर्थ समझना है बाकी जो आप एक्सपेंशन चाहते हैं वह नॉर्मल तरीके से लिखना है। $1 बताता है की कीबोर्ड के Tab को प्रेस करने के बाद कीबोर्ड का कर्सर कहां पर पहुंचेगा। जैसा कि हमने console.log के parentheses के भीतर $1 लिखा है इसका अर्थ यह है कि Tab प्रेस करने पर एक्सपेंशन के बाद पेरैंथेसिस के भीतर cursor blink करेगा।

अब हम एक दूसरी स्थिति को देखते हैं जो नीचे दिए गए परिवर्तित Snippet के code में $2 के साथ है।

"Console Log": {

"prefix": "clg",

"body": [

"console.log($1);$2"

"description": "Console log with placeholder"

}

ऊपर के दिए गए Snippet में $2 का अर्थ यह है कि यदि यूजर दूसरी बार Tab को प्रेस करेगा तो कर्सर कहां पर पहुंचेगा। जैसा कि ऊपर Snippet दिया गया है उसमें $2 सेमीकलन के बाद है इसका अर्थ है कि जब यूजर दूसरी बार Tab प्रेस करेगा तो सेमीकॉलन के बाद कर्सर बिलिंग करेगा

अब हम तीसरी स्थिति को देखते हैं जो कि नीचे दिए गए Snippet में परिवर्तित कोड से स्पष्ट है

"Console Log": {

"prefix": "clg",

"body": [

"console.log('$1');$2"

"description": "Console log with placeholder"

}

इस बार हमने $1 को सिंगल quotation के भीतर लिखा है इसका अर्थ यह है कि जब पहली बार Tab प्रेस होगा तो कर्सर जहां बिलिंग करेगा उसके अराउंड एक सिंगल quotation बन जाएगा और जब यूजर टाइप करेगा तो सिंगल quotation के भीतर टेक्स्ट appear होगा।

आशा है कि आपको यह छोटा सा Tips पसंद आया होगा

Sunday, May 21, 2023

Consolidate CSV files in Hindi

इस वीडियो में टिप्स या तरीका बताऊंगा कैसे हम किसी भी सीएसवी फाइल्स को या टेक्स्ट फाइल्स के डाटा को कंसोलिडेट कर सकते हैं मान लीजिए कि आपके पास एक 100, 200 या हजारों फाइल्स हैं जिनमें डाटा पड़े हुए हैं और उन सब डाटा को आप किसी एक नए फाइल में एकत्र करना चाहते हैं। अलग अलग पड़े डाटा को एकत्र करने के लिए या तो आप प्रत्येक फाइल को ओपन करेंगे उसके डाटा को कॉपी करेंगें और अपने टारगेट फाइल के भीतर पेस्ट करेंगे। फिर दूसरा फाइल ओपन करेंगे उसके डाटा को कॉपी करेंगे टारगेट फ़ाइल में पेस्ट करेंगे।

इस प्रकार अगर फाइल्स की संख्या बहुत ही अधिक हो मान लीजिए कि हजारों फाइल्स के डेटा को एकत्र करना हो तो इसके लिए प्रत्येक फाइल को एक-एक करके ओपन करें उसको डाटा को कॉपी करें फिर उसको पेस्ट टारगेट फ़ाइल में पेस्ट करें फिर दूसरा फाइल ओपन करें फिर उसके डाटा कॉपी करें, टारगेट फाइल में पेस्ट करें तो आपको कितना समय लगेगा सोच सकते हैं।

जो तरीका बताऊंगा इसके लिए आपको किसी प्रकार के थर्ड पार्टी टूल का यूज नहीं करना है। आपके विंडोज के भीतर ही ऐसा टूल है जिसका उपयोग कर आप अपने फाइल्स को कंसोलिडेट कर सकते हैं।

आइए देखते हैं कि कैसे हम अपने डाटा को कंसोलिडेट कुछ पल भर में कर सकते हैं।

सबसे पहले आप अपने विंडोज के command prompt टूल को ओपन करें। इसके लिए अलग अलग तरीके हैं। आप इनमें से किसी भी एक उपाय से cmd exe को run कर सकते हैं।

इस आलेख को उद्धृत करते हुए इस लेख के लिंक का भी विवरण दें। इस आलेख को कॉपीराइट सूचना के साथ यथावत साझा करने की अनुमति है। कृपया इसे ऐसे स्थान पर साझा न करें जहाँ इसे देखने के लिए शुल्क देना पडे।

Friday, May 19, 2023

History of JavaScript and its of Development in Hindi

जावास्क्रिप्ट के उदय और विकास का इतिहास

जावास्क्रिप्ट को 1995 में ब्रेंडन ईच नामक प्रोग्रामर के द्वारा नेटस्केप कम्युनिकेशंस कंपनी के लिए बनाया गया था। ब्रेंडन ईच उसी कंपनी में कार्य करते थे और शुरू में जावास्क्रिप्ट का नाम लाइवस्क्रिप्ट रखा गया था लेकिन बाजार में अपना मार्केट स्थापित करने के लिए उस समय के प्रसिद्ध प्रोग्रामिंग लैंग्वेज जावा के नाम पर इसका नाम जावास्क्रिप्ट कर दिया गया ताकि इसकी मार्केट में वैल्यू बढ़ सकें।

यह बात याद रखना चाहिए कि जावास्क्रिप्ट और जावा दोनों एक ही चीज नहीं है। जावास्क्रिप्ट एक स्क्रिप्टिंग लैंग्वेज है वहीं दूसरी ओर जावा एक full fledged जनरल प्रोग्रामिंग लैंग्वेज है| जावास्क्रिप्ट का उपयोग शुरू में केवल वेब एप्लीकेशन के भीतर किया जाता था जबकि जावा का उपयोग किसी भी प्रकार के एप्लीकेशन के निर्माण में किया जा सकता था। अतः दोनों में किसी प्रकार की समानता नहीं थी। मार्केटिंग में सिद्धि हासिल करने के निमित्त इसका नाम बदल कर जावास्क्रिप्ट कर दिया गया था। याद रखे की वह जमाना १९९५- २००० का ब्राउज़र वॉर के रूप में याद किया जाता है और उस समय की ब्राउज़र डेवेलप करने वाली कंपनियों के द्वारा मार्किट शेयर बढ़ाने के लिए ऐसे सभी प्रयास किए गए ताकि मार्केट में पॉपुलर हो सके। आज भी कुछ सतही समानताओं के अलावा, जावास्क्रिप्ट किसी भी तरह से जावा प्रोग्रामिंग भाषा से संबंधित नहीं है।

जावास्क्रिप्ट के जारी होने के बाद, अधिक से अधिक ब्राउज़रों ने जावास्क्रिप्ट का सपोर्ट जोड़ना शुरू कर दिया। फिर भी, उस जमाने में जावास्क्रिप्ट को एक गंभीर प्रोग्रामिंग लैंग्वेज नहीं माना जाता था। इसके शुरुआती रिलीज़ उल्लेखनीय प्रदर्शन और सुरक्षा मुद्दों से ग्रस्त थे, लेकिन डेवलपर्स के पास कोई विकल्प नहीं था। यदि वे ब्राउज़र में प्रोग्राम चलाना चाहते थे, तो उन्हें जावास्क्रिप्ट का उपयोग करना पड़ता था।

जावास्क्रिप्ट के इतिहास में एक उल्लेखनीय काल २००८ का है। २००८ में, Google के ओपन-सोर्स क्रोम V8, एक उच्च-प्रदर्शन जावास्क्रिप्ट इंजन के निर्माण ने जावास्क्रिप्ट के लिए एक महत्वपूर्ण मोड़ प्रदान किया। तेजी से जावास्क्रिप्ट इंजनों के बाद के प्रसार ने डेवलपर्स के लिए डेस्कटॉप और मोबाइल अनुप्रयोगों के साथ प्रतिस्पर्धा करने वाले प्रदर्शन के साथ परिष्कृत ब्राउज़र-आधारित ऍप्लिकेशन्स का निर्माण करना संभव बना दिया।

इसके तुरंत बाद, Ryan Dahl ने Node.js नामक एक ओपन-सोर्स, क्रॉस-प्लेटफ़ॉर्म वातावरण ecosystem जारी किया। इसने ब्राउज़र के बाहर से जावास्क्रिप्ट कोड चलाने का एक तरीका प्रदान किया। इसने जावास्क्रिप्ट को ब्राउज़र की सीमाओं से मुक्त कर दिया और सीधे जावास्क्रिप्ट की वर्तमान लोकप्रियता की ओर ले गया। आज, आप ब्राउज़र, सर्वर, मोबाइल और डेस्कटॉप एप्लिकेशन सहित सभी प्रकार के एप्लिकेशन लिखने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। फेसबुक, ट्विटर, नेटफ्लिक्स और गूगल सहित अधिकांश प्रमुख ऑनलाइन कंपनियां आज अपने उत्पादों में जावास्क्रिप्ट का उपयोग करती हैं।

मॉडर्न जावास्क्रिप्ट की सहायता से न केवल फ्रंट एन्ड वेब ऍप्लिकेशन्स बनाया जा सकता है अपितु बैकेंड ऍप्लिकेशन्स भी बनाया जा सकता है वेब ऍप्लिकेशन्स के अतिरिक्त डेस्कटॉप भी बनाना सभव है। जावास्क्रिप्ट के Electron फ्रेमवर्क की मदद से डेस्कटॉप ऍप्लिकेशन्स बनाया जाताहै। उदाहरण के लिए Visual Studio Code का निर्माण इसी फ्रेमवर्क की सहायता से किया गया है। २० मई २०२३

Tuesday, April 25, 2023

JSON Web Token in Hindi

इस ट्यूटोरियल में हम एचटीटीपी, रेस्टफूल वेब सर्विसेज के बारे में समझेंगे। एचटीटीपी एक स्टैटलेस प्रोटोकोल है जब भी client और सरवर के बीच में कम्युनिकेशन होता है तो इसी प्रोटोकॉल का पालन करते हुए client के द्वारा रिक्वेस्ट server के पास भेजा जाता है और server के द्वारा रेस्पॉन्स client के पास भेजा जाता है। दोनों ही एचटीटीपी प्रोटोकोल का पालन करते हुए यह कार्य करते हैं।

हमें यह समझना चाहिए कि HTTP एक स्टेटलेस प्रोटोकॉल है। अतः हर बार जब रिक्वेस्ट client के द्वारा server को भेजा जाता है तो वह एक नया रिक्वेस्ट होता है। कहने का अर्थ यह है कि पुराने रिक्वेस्ट के स्टेट को server मेंटेन नहीं करता है।

अब सवाल यह है कि अगर server स्टेट को मेंटेन नहीं करता है तो स्टेट को मेंटेन करने के लिए हमें क्या करना होगा इसके लिए कई तरह के उपाय हैं उदाहरण के रूप में सेशन का उपयोग करके रिक्वेस्ट को स्टेटफूल बनाया जा सकता है।

सबसे पहले एक सेशन आईडी क्रिएट होता है जब यह सेशन आईडी क्रिएट हो जाता है तो हर रिक्वेस्ट और रिस्पांस के दौरान एक सेशन आईडी मेंटेन किया जाता है। स्टेट को cookie के भीतर या query string के भीतर मेंटेन किया जा सकता है।

Cookie की प्रॉब्लम यह है कि एप्लीकेशन को scale करने पर यह समस्या उत्पन्न करता है और दूसरे स्तर पर अगर क्लाइंट ब्राउज़र नहीं हो कर कुछ और तरह का एप्लीकेशन हो जैसे मोबाइल एप्लीकेशन तो ऐसी हालत में cookie को क्रिएट करने में समस्या होती है।

रेस्टफूल वेब सर्विस के बारे में समझेंगे मोबाइल के आने के बाद वेब सर्विस में रेस्टफुल वेब सर्विस का प्रचलन बहुत बढ़ गया है रेस्टफुल वेब सर्विस बहुत ही सरल होता है और इसके अंतर्गत किसी भी सर्विस को विकसित करने के लिए एक निश्चित यूआरएल फॉर्मेट का उपयोग एचटीटीपी प्रोटोकोल के अधीन किया जाता है।

एप्लीकेशन यूआरएल के द्वारा एपीआई सर्विस के लिए रिक्वेस्ट भेजता है। यूआरएल के द्वारा क्लाइंट रिक्वेस्ट सर्वर को भेजता है। यूआरएल के भीतर पैरामीटर भी होता है। रेस्ट सर्विस यूआरएल के आधार पर निर्धारित करता है कि किस तरह के एपीआई सर्विस को रेस्पॉन्स के रूप में भेजना है।

किसी एपीआई के ऊपर ऑथेंटिकेशन का प्रयोग किया जा सकता है ताकि वही यूजर उस एपीआई का उपयोग करे जो ऑथेंटिक हो। इस प्रकार किसी खास प्रकार के यूजर को ही एपीआई उपलब्ध कराते हैं।

अब हम ऑथराइजेशन के बारे में बात करेंगे ऑथराइजेशन को आमतौर पर किसी टोकन के द्वारा हैंडल किया जाता है इसके लिए कई तरह के प्रोटोकॉल उपलब्ध है। आम तौर पर प्रचलित OAuth प्रोटोकॉल है।

हम एक कस्टम टोकन बना सकते हैं अथवा ओ डब्ल्यू आई एन OWIN के आधार पर आधारित टोकन बना सकते हैं या JWT टोकन का उपयोग कर सकते हैं।

सेशन और टोकन के बीच में अंतर है। सेशन को सर्वर के मेमोरी या किसी डेटाबेस के भीतर या REDIS के भीतर स्टोर किया जाता है। टोकन सेल्फ contained होता है उसके भीतर ऑथेंटिकेशन से सम्बंधित सारे आंकड़े सुरक्षित होते हैं। ऑथेंटिकेशन के लिए किसी सर्वर या डाटाबेस पर निर्भर नहीं रहना पड़ता है।

हम ASP.NET Core वेब एप्लीकेशन का टेंपलेट यूज़ करते हुए वेब एपीआई को विकसित करेंगे।

रेस्टफुल वेब सर्विस के भीतर किसी रिसोर्स के लिए ASP डॉट नेट कोर के अंतर्गत कंट्रोलर होता है। प्रत्येक कंट्रोलर किसी रिसोर्स को अभिव्यक्त करता है। उदाहरण के लिए हमारे पास प्रोडक्ट कंट्रोलर, अकाउंट कंट्रोलर इत्यादि हो सकता है।

कंट्रोलर एक विशेष प्रकार का क्लास होता है जो ControllerBase क्लास से इन्हेरीट होता है जब हम किसी सामान्य क्लास को कंट्रोलर में परिवर्तित करना चाहते हैं तो हमें उसे ControllerBase क्लास से इन्हेरीट करना होता है। इसके अलावा हमें दो एट्रिब्यूट डायरेक्टिव का प्रयोग अपने कंट्रोलर क्लास के ऊपर करना होता है। पहला Route एट्रिब्यूट होता है जिसके द्वारा उस रिसोर्स को एक्सेस करने का रूट निर्धारित होता है। इसके बाद हमें उसके ऊपर ApiController नामक एट्रिब्यूट का उपयोग करना होता है जो उसको एपीआई कंट्रोलर में परिवर्तित कर देता है।

हमें यह समझना चाहिए कि Application के अनुसार कंट्रोलर दो प्रकार का होता है

एपीआई कंट्रोलर और एमवीसी कंट्रोलर। एपीआई कंट्रोलर के भीतर एचटीटीपी verb से सम्बंधित चार प्रकार के एक्शन मेथड होते हैं। यह एक्शन मेथड किसी व्यू को रिटर्न नहीं करते हैं बल्कि वे एचटीटीपी स्टेटस कोड इत्यादि को रिटर्न करते हैं जबकि एमवीसी पर आधारित कंट्रोलर किसी व्यू पेज को रिटर्न करते हैं।

जब किसी सामान्य क्लास के द्वारा कंट्रोलरबेस क्लास को इन्हेरीट कर लिया जाता है तो सामान्य क्लास कंट्रोलर बेस क्लास के प्रॉपर्टी ओर मेथड को भी इन्हेरीट कर लेता है। इस प्रकार सामान्य क्लास का बिहेवियर कंट्रोलर्बेस क्लास के बिहेवियर को अंतर्निहित कर लेता है। इसी तरह सामान्य क्लास के बिहेवियर को और भी ज्यादा परिवर्तित करने के लिए हम उसके ऊपर विभिन्न प्रकार के ऐट्रिब्यूट्स का उपयोग करते हैं उदाहरण के लिए जब हम किसी क्लास के ऊपर राउट नामक ऐट्रिब्यूट का उपयोग करते हैं तो वह कंट्रोलर क्लास किस रूट का अनुसरण करते हुए प्राप्त किया जा सकता है यह निर्धारित हो जाता है।

सामान्य कंट्रोलर क्लास के बिहेवियर को और भी ज्यादा परिवर्तित करने के लिए हम ApiController ऐट्रिब्यूट का उपयोग करते हैं।

किसी भी एपीआई कंट्रोलर के भीतर जो एक्शन methods होते हैं उनकी भी कुछ खासियत है। उदाहरण के लिए प्रत्येक एपीआई कंट्रोलर के एक्शन मेथड के उपर कोई न कोई http verb से जुड़े एट्रिब्यूट का उपयोग किया जाता है। इसका अर्थ यह है कि एपीआई एक्शन मेथड को एक्सेस करने के लिए हमें एक निर्धारित http verb एट्रिब्यूट का ही उपयोग करना होता है। http verb एट्रिब्यूट के भीतर हम सम्बंधित action मेथड को एक्सेस करने से सम्बंधित रूट या पैरामीटर को भी दे सकते हैं।

JSON वेब टोकन की संरचना

इस टुटोरिअल में हम समझेंगे कि जैसन वेब टोकन क्या है जेसन वेब टोकन को कैसे जनरेट किया जा सकता है और जेसन वेब टोकन को कैसे वैलिडेट किया जा सकता है और कैसे जेसन वेब टोकन को कोई क्लाइंट एप्लीकेशन यूज़ कर सकता है।

ऑथेंटिकेशन करने के लिए टोकन का उपयोग किया जाता है और टोकन कई प्रकार का होता है उसमें जेसन वेब टोकन एक प्रकार है।

Structure of JSON Token

जेसन वेब टोकन के स्ट्रक्चर को समझना अति आवश्यक है। जेसन वेब टोकन के 3 हिस्से होते हैं सबसे पहले हिस्से में Header होता है दूसरे हिस्से में Payload होता है और तीसरा हिस्सा सिग्नेचर को वेरीफाई करने से संबंधित होता है। इन तीनों हिस्सों को पीरियड से अलग किया जाता है।

Header

हेडर के अंतर्गत किसी टोकन के एल्गोरिथ्म और टोकन के प्रकार का वर्णन होता है। उदाहरण के लिए जेसन वेब टोकन के अंतर्गत एल्गोरिथ्म sha हो सकता है और टोकन का प्रकार jwt

Payload

टोकन के payload के अंतर्गत विभिन्न प्रकार के क्लेम होते हैं। प्रत्येक क्लेम को कीवैल्यू pair के रूप में चिन्हित किया जाता है।

Verify Signature

इसके बाद टोकन के सिग्नेचर को वेरीफाई करने के लिए तीसरा हिस्सा होता है। सिग्नेचर को वेरीफाई करने के लिए JSON ऑब्जेक्ट का उपयोग किया जाता है। इसमें key value pairs के रूप में तीन प्रॉपर्टीज होते हैं।

सबसे पहले हेडर के डाटा को बेस 64 इनकोडिंग के अनुसार इनकोड किया जाता है। इसी तरह पेलोड के डाटा को भी बेस 64 इनकोडिंग के अनुसार इनकोडिंग किया जाता है और अंत में एक सिक्रेट Key होता है जिसके आधार पर अंततोगत्वा इन तीनों को मिलाकर एक निश्चित एल्गोरिथ्म के द्वारा टोकन जनरेट किया जाता है।

Generating JWT

JSON वेब टोकन को जनरेट करने के लिए हमें asp.net कोर के अंतर्गत न्यूगेट पैकेज का उपयोग करना होता है।

अगर हम किसी और टेक्नोलॉजी का उपयोग कर रहे हैं तो हम उसी के अनुसार किसी और पैकेज का उपयोग उस टेक्नोलॉजी में करते हैं। फिलहाल हम asp.net कोर के अंतर्गत देखेंगे कि कैसे JSON वेब टोकन को जनरेट किया जा सकता है।

विचारणीय है कि टोकन के भीतर किस प्रकार का इंफॉर्मेशन संचित करना होगा।

टोकन के भीतर क्लेम से सम्बंधित आंकड़ों को key value के युग्मरूप में प्रदान करना होता है। क्लेम के रूप में यूजर का नाम, ईमेल आईडी, रोल इत्यादि हो सकता है। इसके अलावा टोकन के वेलिडेशन के लिए issuer, audience, secret key, Expiration Time इत्यादि आंकड़ों को देना पड़ता है। issuer से अभिप्राय उस सर्वर से है जिसने टोकन को generate किया है। audience से अभिप्राय उस एपीआई से है जिसको यूजर एक्सेस करना चाहता है। TokenValidationParameters नामक क्लास के ऑब्जेक्ट के भीतर वेलिडेशन से सम्बंधित पैरामीटर्स को व्यक्त करते हैं।

Secret key एक 256 bytes का एन्क्रिप्टेड कोड होता है। इंक्रिप्शन किस अल्गोरिथम का पालन करते हुए होगा यह इंफॉर्मेशन टोकन के header के भीतर दिया हुआ होता है।

Saturday, April 22, 2023

Sample Database

USE [LearnSP]

/****** Object: Table [dbo].[tblStudent] Script Date: 2/11/2023 9:42:30 AM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE TABLE [dbo].[tblStudent](

[StudentId] [int] IDENTITY(1,1) NOT NULL,

[Name] [nvarchar](50) NULL,

[Gender] [nvarchar](50) NULL,

[City] [nvarchar](50) NULL,

[RegularFees] [int] NULL,

[HourlyRate] [int] NULL,

[CourseHours] [int] NULL,

[StudentType] [int] NULL

) ON [PRIMARY]

SET IDENTITY_INSERT [dbo].[tblStudent] ON

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (1, N'Nitu', N'F', N'Agra', 2000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (2, N'Yadu', N'M', N'Gaya', NULL, 10, 200, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (3, N'Aman', N'M', N'Agra', 2000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (4, N'Indu', N'F', N'Delhi', 3000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (5, N'Bhushan', N'M', N'Delhi', NULL, 20, 120, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (6, N'Jaya', N'F', N'Pune', 3000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (7, N'Anand', N'M', N'Agra', 3000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (8, N'AnandiBen', N'F', N'Pune', NULL, 11, 110, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (9, N'Hari', N'M', N'Pune', 4000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (10, N'Mira', N'F', N'Delhi', NULL, 22, 120, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (11, N'Suraj', N'M', N'Mumbai', 60000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (12, N'Sunny', N'M', N'Agra', NULL, 12, 110, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (13, N'Rajan', N'M', N'Patna', 2000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (14, N'Raman', N'M', N'Ara', NULL, 20, 100, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (15, N'Rambha', N'F', N'Nke', 2002, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (16, N'Devi', N'F', N'Siwan', NULL, 10, 111, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (17, N'Tarun', N'M', N'Agra', 20000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (18, N'Dhiraj', N'M', N'Agra', 7222, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (19, N'Raju', N'M', N'Delhi', 2000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (20, N'Reena', N'F', N'Delhi', NULL, 10, 123, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (21, N'Rupa', N'F', N'Patna', 7000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (22, N'Seema', N'F', N'Patna', 6778, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (23, N'Bhuvan', N'M', N'Patna', NULL, 10, 100, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (24, N'Jivan', N'M', N'Agra', 3000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (25, N'Vishesh', N'M', N'Patna', NULL, 11, 120, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (26, N'Top', N'M', N'Nagpur', 8790, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (27, N'Tripti', N'F', N'Nagpur', 8000, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (28, N'Rani', N'F', N'Nagpur', NULL, 11, 100, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (29, N'Garv', N'M', N'Juhu', 7699, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (30, N'Tara', N'F', N'Juhu', 8900, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (31, N'Venu', N'M', N'Juhu', 1888, NULL, NULL, 1)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (32, N'Hans', N'M', N'Juhu', NULL, 12, 120, 2)

INSERT [dbo].[tblStudent] ([StudentId], [Name], [Gender], [City], [RegularFees], [HourlyRate], [CourseHours], [StudentType]) VALUES (33, N'Ajeet', N'M', N'Jaipur', 2000, NULL, NULL, 1)

SET IDENTITY_INSERT [dbo].[tblStudent] OFF

USE [LearnSP]

/****** Object: StoredProcedure [dbo].[usp_getGenderCount] Script Date: 2/11/2023 9:42:30 AM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

create proc [dbo].[usp_getGenderCount]

@sex nvarchar(2)

,@total int output

begin

select count(1) from tblStudent

where Gender =@sex

return @total

end

USE [LearnSP]

/****** Object: StoredProcedure [dbo].[usp_StudentDetails] Script Date: 2/11/2023 9:42:30 AM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE procedure [dbo].[usp_StudentDetails]

begin

select name, gender, City

from tblStudent

where gender='M'

end

USE [LearnSP]

/****** Object: StoredProcedure [dbo].[usp_StudentGenderCityDetails] Script Date: 2/11/2023 9:42:30 AM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

create procedure [dbo].[usp_StudentGenderCityDetails]

@sex nvarchar(2)

,@city nvarchar(20)

begin

select name, gender, City

from tblStudent

where gender=@sex and City=@city

end

USE [LearnSP]

/****** Object: StoredProcedure [dbo].[usp_StudentGenderDetails] Script Date: 2/11/2023 9:42:30 AM ******/

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

create procedure [dbo].[usp_StudentGenderDetails]

@sex nvarchar(2)

begin

select name, gender, City

from tblStudent

where gender=@sex

end

Tuesday, March 14, 2023

ASP.NET Theme in Hindi

इस ट्यूटोरियल में हम ASP.NET Theme के बारे में समझेंगे

Theme और मास्टर पेज में अंतर होता है।

मास्टर पेज की सहायता से जहां एक ओर एक ही तरह के कंटेंट को अनेकानेक वेबपेज पर शेयर/ सांझा किया जाता है वहीं दूसरी ओर थीम का उपयोग करके किसी भी कंटेंट के अपीरियंस को प्रभावित किया जाता है। कंटेंट के अपीरियंस से अभिप्राय उसके फॉन्ट, बैककलर, बॉर्डर कलर, बॉर्डर साइज इत्यादि से है।

माइक्रोसॉफ्ट के अनुसार

ASP.NET themes are a collection of properties that define the appearance of pages and controls in your Web site. A theme can include skin files, which define property settings for ASP.NET Web server controls, and can also include cascading style sheet files (.css files) and graphics. By applying a theme, you can give the pages in your Web site a consistent appearance.

Theme और Skin File

Theme अप्लाई करने के लिए स्किन फाइल को क्रिएट करना पड़ता है। स्किन फाइल का एक्सटेंशन .skin होता है और इसका उपयोग थीम को क्रिएट करने के लिए किया जाता है।

ASP.NET के अंतर्गत Theme का यूज़ किसी भी कंट्रोल के अपीयरेंस को प्रभावित करने के लिए किया जाता है। उदाहरण के लिए, मान लीजिए, किसी फॉर्म में कई सारे टेक्सटबॉक्स है और आप चाहते हैं कि उन सभी टेक्सटबॉक्स के बैककलर पीला रंग का हो और उनका बॉर्डर डॉटेड लाइन का हो तो ऐसा करने के लिए हम Theme का उपयोग कर सकते हैं। ASP.NET के भीतर Theme उस पेज पर उपलब्ध सारे टेक्स्ट बॉक्स का बैककलर पीला कर देगा और उसके बॉर्डर को डॉटेड लाइन का बना देगा।

ध्यातव्य है कि Theme के यूज से कंट्रोल का कॉन्टेंट प्रभावित नहीं होता है।

Creating Theme

अब सवाल है कि ASP.NET के अंतर्गत Theme कैसे बनाते हैं?

ASP.NET के अंतर्गत Theme का अभिप्राय एक स्पेशल फोल्डर से है जिसके भीतर CSS और स्किन फाइल्स रखे जाते हैं। Theme से जुड़े हुए CSS और स्किन फाइल्स को एक स्पेशल फोल्डर के भीतर रखते हैं जिसे App_Theme करते हैं। जिस प्रकार App_Data नाम का एक स्पेशल फोल्डर होता है जिसमें हम डाटाबेस से जुड़े हुए फाइल रखते हैं, ठीक उसी तरह Theme से संबंधित जितने भी फाइल्स होते हैं उन सभी फाइल्स को App_Theme फोल्डर के भीतर रखते हैं। यह फोल्डर एप्लिकेशन के रूट में स्थित होता है। Theme का अभिप्राय वेबपेज के Page डिरेक्टिव के एटट्रिब्यूट से भी है जिसको हम आगे देखेंगे।

ASP.NET के अंतर्गत Theme के लिए एक .skin एक्सटेंशन पेज होता है जिसमें हम जिस कंट्रोल के अपीयरेंस को चेंज करना चाहते हैं उसकी प्रॉपर्टी और वैल्यू को स्किन पेज के भीतर दे देते हैं। बस यह ध्यान रखना है कि हम वहां पर कंट्रोल की आईडी प्रॉपर्टी का यूज नहीं करते हैं। आईडी प्रॉपर्टी के अलावा जो भी अपीरियंस से जुड़े हुए कंट्रोल के प्रॉपर्टीज हैं उन सबको हम उनके वैल्यूज के साथ लिख देते हैं और उस फाइल को सेव कर देते हैं। उदाहरण के लिए, Simple/TextBox.skin फ़ाइल के भीतर की कोडिंग निम्नलिखित है

<asp: TextBox BackColor= "Yellow" BorderStyle= "Dotted" />

Adding Skin to Theme

ASP.NET के किसी वेब फॉर्म के भीतर Theme को यूज करने के लिए हमें उस पेज के Page डायरेक्टिव के भीतर Theme एटट्रिब्यूट देना होता है। उदाहरण के लिए,

<%@ Page Language="VB" Theme="Simple" Runat="server" %>

ध्यातव्य है कि Theme का वैल्यू App_Theme फोल्डर के भीतर स्थित फोल्डर होता है जिसमें स्किन और CSS फाइल्स रखे हुए हैं।

इसके द्वारा यह पता चल जाता है कि किस Theme को वेबपेज पर यूज करना है। थीम को अनुप्रयोग करने के लिए App_Theme फोल्डर के भीतर उस स्किन फाइल का सर्च होता है जिसका रिफरेंस डायरेक्टिव के भीतर कि Theme एट्रिब्यूट के साथ दिया हुआ होता है।

आप चाहे तो एक ही स्किन फाइल बना ले और उसमें जितने भी कंट्रोल की चाहे उनकी प्रॉपर्टीज वैल्यूज को डिफाइन कर दे अथवा ऐसा भी हम कर सकते हैं कि हम अलग-अलग स्किन फाइल बना ले और उन फाइल में हम अलग-अलग कंट्रोल्स के लिए Theme बना ले।

Creating Named Skin

ऊपर जो उदाहरण दिया गया है उसमें स्किन फाइल एक डिफॉल्ट स्किन फाइल है। जब इस फाइल के थीम को किसी वेबपेज पर अप्लाई किया जाता है तो यह वेब पेज के सारे टेक्स्ट बॉक्स को प्रभावित करेगा।

डिफॉल्ट स्किन फाइल में SkinID एटट्रिब्यूट का उपयोग कंट्रोल के साथ नहीं किया जाता है।

ऐसा भी हो सकता है कि आप चाहते हो कि आपके वेबपेज के कुछ ही टेक्सटबॉक्स पर आपका थीम अप्लाई हो तो इसके लिए आपको Named Skin फाइल को बनाना होगा। इस फाइल के भीतर जिस कंट्रोल की भी हम स्किन बना रहे हैं उसके साथ एक SkinID प्रॉपर्टी भी देनी पड़ती है। स्किन आईडी प्रॉपर्टी एक यूनिक वैल्यू एक्सेप्ट करता है और जब आप वेब पेज के भीतर किसी कंट्रोल के ऊपर स्किन अप्लाई करना चाहते हैं तो उस कंट्रोल के स्किन आईडी प्रॉपर्टी में इसी यूनीक वैल्यू को यूज करते हुए आप उस टेक्सटबॉक्स पर या कंट्रोल पर थीम अप्लाई कर सकते हैं।

उदाहरण के लिए, आप स्किन फ़ाइल में टेक्सटबॉक्स के लिए दो तरह का स्किन बनाते हैं १) डिफॉल्ट स्किन २) नेम्ड स्किन

उदाहरण के लिए, Simple2/TextBox.skin फ़ाइल के भीतर की कोडिंग निम्नलिखित है

<asp: TextBox SkinID="DashedTextBox" BackColor= "Yellow" BorderStyle= "Dashed" />

<asp: TextBox BackColor= "Yellow" BorderStyle= "Dotted" />

<%@ Page Language="VB" Theme="Simple2" Runat="server" %>

<head>Learn Theme</head>

<html>

<body>

<asp: TextBox id ="txtBox1" SkinID="DashedTextBox" Runat = "server" />

<asp: TextBox id="txtBox2" Runat = "server" />

</body>

</html>

Theme vs StyleSheetTheme

जैसा कि हमने देखा कि पेज डायरेक्टिव के भीतर Theme एटट्रिब्यूट यूज करके हम किसी भी वेबपेज के भीतर किसी Theme को अप्लाई कर सकते हैं। अगर एक ही तरह के Theme को कई सारे वेब पेज पर अप्लाई करना हो तो यह कठिन कार्य होगा क्योंकि तब प्रत्येक पेज के पेज डायरेक्ट के भीतर Theme को लिखना पड़ेगा और अगर इसमें किसी प्रकार का परिवर्तन करना होगा तो हमें प्रत्येक पेज पर जाकर उस Theme को परिवर्तित करना होगा।

इस तरह की समस्या से बचने के लिए हम ऐसे Theme जिसका यूज़ सारे वेबपेजेस पर करना है, उसको वेब कंफीग्रेशन फाइल के भीतर डिफाइन कर देते हैं।

टैग के भीतर Theme एटट्रिब्यूट यूज किया जाता है और उसमें Theme फाइल का नाम वैल्यू के रूप में दिया जाता है जिसका उपयोग हमें अपने एप्लीकेशन के विभिन्न पेज पर यूज करना है।

Global Theme

ASP.NET के अंतर्गत अगर एक ही वेबसर्वर के भीतर कई सारे वेब एप्लीकेशन रन हो रहे हो और हम चाहते हैं कि उन सभी में पब्लिकेशन के ऊपर एक समान Theme यूज हो तो इसके लिए हमें ग्लोबल Theme का उपयोग करना होता है।

कई बार किसी कंपनी की वेबसाइट के भीतर में समान रूप से एक जैसा थीम प्रदान करना होता है। इसके लिए हम ग्लोबल Theme यूज करते हैं। ग्लोबल Theme का यूज करने के लिए हमें अपने Theme को निम्नलिखित डायरेक्टरी के अंदर रखना पड़ता है

इसी तरह अगर आपका वेबसाइट HTTP आधारित वेब एप्लीकेशन है तो उसके लिए आपको निम्नलिखित डायरेक्टरी के भीतर अपने Theme के फोल्डर को कॉपी करके रखना पड़ता है

Home

Thursday, October 31, 2024

Other Techniques

Friday, June 21, 2024

node command

Develop Server Side App

REST API based Applications

NPM और Node

Develop App based on Node and NPM

How to run JS code on local server:

What is Module in Node project

How to create HTTP server

Node.js कैसे कार्य करता है?

Node Interactive Mode

Node.JS और NPM में अंतर

Package.json file

Node JS के मुख्य Packages या Modules

Buffer

Sunday, May 21, 2023

Consolidate CSV files in Hindi

Friday, May 19, 2023

जावास्क्रिप्ट के उदय और विकास का इतिहास

Tuesday, April 25, 2023

JSON Web Token in Hindi

Generating JWT

Saturday, April 22, 2023

Tuesday, March 14, 2023

Hot Topics