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 Part2

सबसे पहले हम समझते हैं की Node JS क्या है? जब हम Node JS को अपने सिस्टम में install करते हैं तो इसके द्वारा हम क्या कर सकते हैं? सबसे पहले इस पर विचार करते हैं

node command

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

जब आप Node JS को अपने सिस्टम में install करते हैं तब क्या होता है? तब आप node command की मदद से किसी JavaScript file को Run कर सकते हैं

C:\Users\shribodh>node --help

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

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

उपर के node command से स्पष्ट है कि हम किसी JavaScript स्क्रिप्ट को run कर सकते हैं

Develop Server Side App

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

REST API based Applications

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

NPM और Node

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

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

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 के नाम के अनुरूप होना चाहिए । फोल्डर की भीतर जाकर राइट क्लिक करके आप अपने विजुअल स्टूडियो कोड एडिटर को ओपन कर लीजिए । विजुअल स्टूडियो कोड एडिटर के खुलने के बाद आप विजुअल स्टूडियो कोड एडिटर के टर्मिनल को ओपन कीजिए । टर्मिनल के भीतर आप निम्नलिखित command को टाइप कीजिए । इस command को टाइप करने के बाद जब आप ENTER key प्रेस करते हैं तो आपके सिस्टम में एक package.json फाइल फोल्डर के भीतर बन जाता है जब पहली बार आप ENTER press करते हैं तो वह आपसे कई तरह के इनपुट के लिए आग्रह करता है आप जितने भी इनपुट के लिए आग्रह हो उन सबके लिए इनपुट की जगह इंटर को प्रेस करते जाइए अंत में आपका फाइल जिसका जैसन पैकेज नाम है आपकी रूट फोल्डर अर्थात जो फोल्डर अपने डेस्कटॉप पर बनाया है उसके भीतर बन जाएगा इस पैकेज का उपयोग पैकेज के भीतर application के भीतर पैकेज के मैनेजमेंट के लिए किया जाता है याद रखें की Node JS का application पैकेज पर आधारित होता है Node JS के application में कई सारे पैकेज होते हैं अतः उन पैकेज का मैनेजमेंट करना आवश्यक होता है इन सब कार्यों के लिए package.json फाइल का उपयोग किया जाता है।

जब आपका package पहली बार बनता है तो उसे package के भीतर जब आप खोलकर देखेंगे तो आपकी application का नाम उसकी व्याख्या डिस्क्रिप्शन और अन्य कई प्रकार की जानकारी उपलब्ध होती है जिसके बारे में हम धीरे-धीरे आगे सीखेंगे जिस नाम का अपने फ़ोल्डर बनाया उसी नाम को application का नाम मानकर package फाइल के भीतर application का नाम दे दिया जाता है और डिस्क्रिप्शन के भीतर आपको कुछ नहीं दिखता है क्योंकि आपने इंटर प्रेस कर दिया था कुछ इनपुट नहीं किया था अभी तक आपने अपने application के भीतर कोई भी package install नहीं किया है इसलिए आपकी application के भीतर package फाइल के अलावा अभी कुछ नहीं है तो सबसे पहले हम अपने application में एक package install करेंगे जब हम कोई भी package अपने सिस्टम में install करेंगे तो इनस्टॉल करते ही आपकी application के रूट फोल्डर के भीतर NodeModule नाम का एक फोल्डर बन जाएगा यह nodemodules फोल्डर उन सारे package को अपने भीतर रखेगा जब-जब आप अपना कोई नया package अपने application के भीतर install करेंगे साथ ही साथ package नामक फाइल के भीतर भी जो जो package आप install करेंगे उसकी जानकारी जैसे package का नाम उसका version इत्यादि लिखा जाएगा जैसे ही आप कोई package अपने application में बनाते हैं तो Node मॉड्यूल नामक फोल्डर बना साथ ही साथ package.lock नाम का भी एक नया फाइल बन जाता है जहां package फाइल का काम जो जो package आप install करते हैं उसके बारे में सामान्य जानकारी उपलब्ध कराना है वहीं दूसरी ओर package.lock का कार्य प्रत्येक package किस सूत्र से किस यूआरएल से प्राप्त किया गया है इन सब बातों की जानकारी उसमें होती है याद रखें कि आपकी application का सबसे महत्वपूर्ण फाइल package.json होता है जिसको पढ़कर आप या कोई भी अन्य व्यक्ति या अंदाज लगा सकता है की किन-किन package का उपयोग करके आपका application विकसित किया गया है।

Node JS Introduction

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

Node JS को कैसे इनस्टॉल करते हैं
Node JS क्या है
Node JS project मे किसी module को कैसे क्रिएट करते हैं
Node JS की सहायता से आप http वेब सर्वर को कैसे क्रिएट करते हैं
Node JS कमांड की मदद से किस प्रकार आप किसी भी JavaScript के code को अपने लोकल सिस्टम अर्थात डेस्कटॉप पर रन कर सकते हैं
Node JS की सहायता से आप कैसे किसी फाइल को read कर सकते हैं उसे delete कर सकते हैं अपडेट कर सकते हैं rename कर सकते हैं इत्यादि

How to run JS code on local server

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

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

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

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

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

node index.js

Node command के बगल में index.js फाइल के नाम लिख दीजिए और ENTER key प्रेस कीजिए तो 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 file होता है जिसमें डिफाइन किए गए functions और variables को हम किसी दूसरे JavaScript फाइल के भीतर यूज कर सकते हैं।

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

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

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

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

How to create HTTP server

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

एचटीटीपी ऑब्जेक्ट के createServer मेथड की मदद से हम सर्वर क्रिएट करेंगे createServer एक कॉल बैक function लेता है यह कॉल बैक function दो पैरामीटर को लेता है एक request पैरामीटर दूसरा response पैरामीटर।

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

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

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

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

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

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

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

इसको समझने का जो स्टेप बाय स्टेप प्रक्रिया है उसको नीचे व्यक्त करते हैं मान लेते हैं अपने जावास्क्रिप्ट में कुछ कोड लिखा है और उसको आप सर्वर साइड रन करना चाहते हैं तो इसके लिए आप Node JS का उपयोग करेंगे अब अगर आपके सिस्टम पर विजुअल स्टूडियो कोड नहीं हो या कोई और टेक्स्ट एडिटर नहीं हो तो आप कैसे इसे रन करेंगे इसके लिए सबसे पहले अपने Windows डेस्कटॉप के command prompt को ओपन करेंगे और अपने command prompt को उस फाइल के path तक जाएंगे जहां पर आपका जावास्क्रिप्ट का फाइल पड़ा हुआ है यहां तक जाने के बाद आप अपने Node command को टाइप करेंगे और उसके बगल में उस फाइल का नाम लिखेंगे तो Node उस जावास्क्रिप्ट फाइल को रन कर देगा Node JS जब उसे जावास्क्रिप्ट फाइल को रन करेगा तो यह एक तरह से सर्वर साइड स्क्रिप्ट का एग्जीक्यूशन हो गया सर्वर साइड जब स्क्रिप्ट का एग्जीक्यूशन हो गया तो सर्वर उस कोड को रन करने के बाद रिस्पांस के रूप में क्लाइंट को कुछ भेजेगा अगर इस बात का पता लगाना हो तो हमें अपने किसी ब्राउज़र को ओपन करना होगा अब आप अपना क्रोम ब्राउजर ओपन कीजिए और लोकल होस्ट के बाद कलम के बाद आप इस पोर्ट का उपयोग कीजिये जी पोर्ट पर आपका सर्वर नॉट का सर्वर रन हो रहा है ऐसा करने के बाद आप इंटरप्रेस करेंगे तो रिस्पांस में अगर कोई मैसेज आया होगा तो वह मैसेज आपके ब्राउज़र में प्रकट होगा।

Node Interactive Mode

Node command को आप अपने command prompt पर जब use करते हैं तो आप command prompt के भीतर भी अपने किसी जावास्क्रिप्ट के स्टेटमेंट को रन कर सकते हैं उदाहरण के लिए अगर आप किसी वेरिएबल को assign करना हो तो assign कर सकते हैं दो एक्सप्रेशन को जोड़ना हो एक्सप्रेशन की वैल्यू को रन करना हो यह सारे काम आप अपने command prompt में कर सकते हैं लेकिन पहली बार जवाब command लिखना शुरू करेंगे तो Node इंटर करके Node लिखकर प्रेस कर दें इससे वह इंटरएक्टिव मोड में आ जाएगा Node JS जब इंटरएक्टिव मोड में आ जाता है तो उसके बाद आप अपने जावास्क्रिप्ट के स्टेटमेंट को लिख सकते हैं और इंटरएक्टिव मोड़ से बाहर जाने के लिए आप CTRL+C को प्रेस कर दीजिए

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

हम समझेंगे की Node.JS और NPM में क्या अंतर है। देखिए Node.JS एक तरह का प्लेटफार्म प्रदान करता है जिसके द्वारा आप किसी भी तरह का सर्वर साइड एप्लीकेशन बना सकते है। Node.JS की मदद से आप अपने सर्वर साइड एप्लीकेशन को बनाते है जो विंडोज, मैक और Linux तीनों ही प्लेटफार्म पर चलते है।

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

Package.json file

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

Node JS के मुख्य पैकेज या माड्यूल

इस पोस्ट में हम देखेंगे की Node JS कौन-कौन से पैकेज मुख्य हैं और उनका किस लिए उपयोग किया जाता है कुछ प्रमुख मॉड्यूल इस प्रकार है । console module का उपयोग डेवलपर के द्वारा किया जाता है और यह डेवलपमेंट के दौरान debugging में बहुत ही ज्यादा सहायता करता है । दूसरा मॉड्यूल http module है जिसका उपयोग करके एचटीटीपी सर्वर का निर्माण किया जाता है और विभिन्न प्रकार के एचटीटीपी रिक्वेस्ट और रिस्पांस से जुड़े कार्यों को संपादित किया जाता है । तीसरा process मॉड्यूल है । प्रक्रिया मॉड्यूल का उपयोग करके हम प्रक्रिया से संबंधित कई प्रकार की जानकारियां जो जान सकते हैं । एक अन्य मॉड्यूल जिसका नाम os है इसका उपयोग करके हम ऑपरेटिंग सिस्टम के बारे में विभिन्न प्रकार की जानकारियां प्राप्त कर सकते हैं और उसको मैनेज या नियंत्रित कर सकते हैं सच तो यह है कि Node JS के अंतर्गत हमें कई तरह के पैकेज उपलब्ध है एक अच्छे डेवलपर बनने के लिए हमें इन विभिन्न प्रकार के पैकेज किया फंक्शनैलिटी की जानकारी होनी आवश्यक है ।

Node Buffer

नोट के अंतर्गत बफर एक महत्वपूर्ण ऑब्जेक्ट है । बफर चाहिए प्राइस ऐसे उत्तर से है जो नेटवर्क के बीच में ट्रैवल करते हैं और उसको किसी भी स्टोरेज मीडिया में स्टोर करके रखा भी जा सकता है चाहे वह इमेज फाइल हो या कोई ऑडियो हो या वीडियो हो बफर हम किसी भी तरह के दाता का क्रिएट कर सकते हैं । Node JS के भीतर बफर नाम का एक ग्लोबल ऑब्जेक्ट प्रदान किया गया है जिसकी सहायता से आप बफर से जुड़े कई तरह के कार्य कर सकते हैं आपको बफर ऑब्जेक्ट के अलग-अलग तरह के methods को याद रखना है समझना है कि उनके कार्य क्या है।

Buffer के अंतर्गत हम बाइनरी फॉर्म के डाटा को मैनेज करते हैं जो टेक्स्ट फॉर्म के दाता होते हैं उसके लिए buffer का इस्तेमाल मुख्य नहीं है।

बफर ऑब्जेक्ट के साइज को allocateकरने के बाद हम बफर में डाटा स्टोर कर सकते हैं इसके लिए हम write और fill नमक मेथड का प्रयोग करते हैं

उदाहरण के लिए आपको जानना है कि बफर कैसे क्रिएट करते हैं बफर आप किसी स्ट्रिंग से भी क्रिएट कर सकते हैं । किसी बाइनरी डाटा से भी क्रिएट कर सकते हैं । इसके लिए आपको alloc नाम का फंक्शन है या from नाम का फंक्शन है।

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

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 के फोल्डर को कॉपी करके रखना पड़ता है

Applied Knowledge

Home

Thursday, October 31, 2024

JavaScript Callback function and Promise in JavaScript in Hindi

JavaScript Click event Handling in Hindi

Other Techniques

Friday, June 21, 2024

Node JS Introduction Part2

Node JS Introduction

Express JS Routing

Express JS First Application

Express JS Project Setup

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

VS Code Snippets

Sunday, May 21, 2023

Consolidate CSV files in Hindi

Consolidate CSV files in Hindi

Friday, May 19, 2023

History of JavaScript and its of Development in Hindi

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

Tuesday, April 25, 2023

JSON Web Token in Hindi

JSON Web Token in Hindi

Generating JWT

Saturday, April 22, 2023

Sample Database

Tuesday, March 14, 2023

ASP.NET Theme in Hindi

Hot Topics