स्क्रैच से पायथन फ्लास्क और MySQL का उपयोग करके एक वेब ऐप बनाना:भाग 5

इस श्रृंखला के पिछले भाग में, हमने देखा कि Edit . को कैसे कार्यान्वित किया जाता है और Delete हमारे बाल्टी सूची आवेदन के लिए कार्यक्षमता चाहते हैं। इस भाग में हम अपने उपयोगकर्ता होम सूची के लिए पेजिंग कार्यक्षमता को लागू करेंगे।

आरंभ करना

आइए GitHub से ट्यूटोरियल के पिछले भाग को क्लोन करके शुरू करें।

git clone https://github.com/jay3dec/PythonFlaskMySQLApp_Part4.git

एक बार सोर्स कोड क्लोन हो जाने के बाद, प्रोजेक्ट डायरेक्टरी में नेविगेट करें और वेब सर्वर शुरू करें।

cd PythonFlaskMySQLApp_Part4
python app.py

अपने ब्राउज़र को http://localhost:5002/ पर इंगित करें और आपके पास एप्लिकेशन चलना चाहिए।

पेजिनेशन लागू करना

जैसे-जैसे उपयोगकर्ता के होम पेज पर इच्छाओं की सूची बढ़ती जाती है, यह पेज पर नीचे की ओर स्क्रॉल होता जाता है। इसलिए पेजिनेशन लागू करना महत्वपूर्ण है। हम किसी पृष्ठ पर दिखाए गए आइटम की संख्या को एक निश्चित संख्या तक सीमित कर देंगे।

विश पाने की प्रक्रिया में बदलाव करें

हम sp_GetWishByUser . को संशोधित करके प्रारंभ करेंगे limit . के आधार पर परिणाम लौटाने की प्रक्रिया और offset मूल्य। इस बार हम सीमा और ऑफ़सेट मान के आधार पर परिणाम सेट को वापस करने के लिए गतिशील रूप से अपना संग्रहीत कार्यविधि विवरण तैयार करेंगे। यहां संशोधित sp_GetWishByUser है MySQL संग्रहीत कार्यविधि।

USE `BucketList`;
DROP procedure IF EXISTS `sp_GetWishByUser`;

DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishByUser`(
IN p_user_id bigint,
IN p_limit int,
IN p_offset int
)
BEGIN
    SET @t1 = CONCAT( 'select * from tbl_wish where wish_user_id = ', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset);
	PREPARE stmt FROM @t1;
	EXECUTE stmt;
	DEALLOCATE PREPARE stmt1;
END$$

DELIMITER ;

जैसा कि ऊपर संग्रहीत प्रक्रिया में देखा गया है, हमने अपनी गतिशील SQL क्वेरी बनाई और offset के आधार पर इच्छा सूची प्राप्त करने के लिए इसे निष्पादित किया। और limit पैरामीटर।

यूआई में पेजिनेशन जोड़ना

सबसे पहले, आइए कुछ डिफ़ॉल्ट सेटिंग्स को परिभाषित करें। app.py . में पृष्ठ सीमा के लिए एक चर जोड़ें।

# Default setting
pageLimit = 2

getWish बनाएं पायथन विधि POST अनुरोध स्वीकार करती है।

@app.route('/getWish',methods=['POST'])

पढ़ें offset और limit getWish . के अंदर विधि और MySQL संग्रहीत कार्यविधि को कॉल करते समय इसे पास करें sp_GetWishByUser .

 _limit = pageLimit
 _offset = request.form['offset']


con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset))
wishes = cursor.fetchall()

GetWishes को संशोधित करें userHome.html में JavaScript कार्य करता है इसे एक POST अनुरोध करने के लिए और offset . पास करने के लिए मूल्य।

function GetWishes() {
    $.ajax({
        url: '/getWish',
        type: 'POST',
        data: {
            offset: 0
        },
        success: function(res) {

            var wishObj = JSON.parse(res);
            $('#ulist').empty();
            $('#listTemplate').tmpl(wishObj).appendTo('#ulist');

        },
        error: function(error) {
            console.log(error);
        }
    });
}

सभी परिवर्तन सहेजें और सर्वर को पुनरारंभ करें। वैध ईमेल पते और पासवर्ड का उपयोग करके साइन इन करें और आपके पास स्क्रीन पर केवल दो रिकॉर्ड प्रदर्शित होने चाहिए।

तो डेटाबेस भाग अच्छी तरह से काम कर रहा है। इसके बाद, हमें उपयोगकर्ता के होम पेज पर पेजिनेशन UI जोड़ना होगा, जो उपयोगकर्ता को डेटा पर नेविगेट करने में सक्षम बनाएगा।

हम बूटस्ट्रैप पेजिनेशन घटक का उपयोग करेंगे। userHome.htmlखोलें और #ulist . के बाद निम्न HTML कोड जोड़ें उल.

<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
        <li><a href="#">5</a>
        </li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

परिवर्तनों को सहेजें और सर्वर को पुनरारंभ करें। सफलतापूर्वक साइन इन करने के बाद, आपको इच्छा सूची के अंतर्गत पेजिनेशन देखने में सक्षम होना चाहिए।

पेजिनेशन को गतिशील बनाना

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

अपना पेजिनेशन बनाने के लिए, हमें डेटाबेस में उपलब्ध रिकॉर्ड्स की कुल संख्या की आवश्यकता होगी। तो चलिए MySQL की संग्रहित प्रक्रिया को संशोधित करते हैं sp_GetWishByUser आउट पैरामीटर के रूप में उपलब्ध रिकॉर्ड की कुल संख्या वापस करने के लिए।

USE `BucketList`;
DROP procedure IF EXISTS `sp_GetWishByUser`;

DELIMITER $$
USE `BucketList`$$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_GetWishByUser`(
IN p_user_id bigint,
IN p_limit int,
IN p_offset int,
out p_total bigint
)
BEGIN
    
	select count(*) into p_total from tbl_wish where wish_user_id = p_user_id;

	SET @t1 = CONCAT( 'select * from tbl_wish where wish_user_id = ', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset);
	PREPARE stmt FROM @t1;
	EXECUTE stmt;
	DEALLOCATE PREPARE stmt;
END$$

DELIMITER ;

जैसा कि ऊपर संशोधित संग्रहीत कार्यविधि में देखा गया है, हमने p_total . नामक एक नया आउटपुट पैरामीटर जोड़ा है और यूजर आईडी के आधार पर इच्छाओं की कुल संख्या का चयन किया।

getWish में भी बदलाव करें आउटपुट पैरामीटर पास करने के लिए पायथन विधि।

 _limit = pageLimit
 _offset = request.form['offset']
 _total_records = 0


con = mysql.connect()
cursor = con.cursor()
cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset,_total_records))
wishes = cursor.fetchall()

cursor.close()

cursor = con.cursor()
cursor.execute('SELECT @_sp_GetWishByUser_3');

outParam = cursor.fetchall()

जैसा कि आप उपरोक्त कोड में देख सकते हैं, एक बार जब हम संग्रहित प्रक्रिया को कॉल कर लेते हैं तो हम कर्सर को बंद कर देते हैं और रिटर्न आउट पैरामीटर का चयन करने के लिए एक नया कर्सर खोलते हैं।

इससे पहले, हम पायथन विधि से इच्छाओं की एक सूची लौटा रहे थे। अब, हमें लौटाए गए JSON में कुल रिकॉर्ड गिनती भी शामिल करनी होगी। तो हम इच्छा सूची शब्दकोश को दूसरी सूची में बनाएंगे और फिर इच्छा सूची और रिकॉर्ड गिनती को मुख्य सूची में जोड़ देंगे। यहाँ getWish . का संशोधित कोड दिया गया है पायथन विधि।

response = []
wishes_dict = []

for wish in wishes:
    wish_dict = {
        'Id': wish[0],
        'Title': wish[1],
        'Description': wish[2],
        'Date': wish[4]}
    wishes_dict.append(wish_dict)
    
response.append(wishes_dict)
response.append({'total':outParam[0][0]}) 

return json.dumps(response)

GetWishes . में जावास्क्रिप्ट फ़ंक्शन, सफलता कॉलबैक के अंदर एक कंसोल लॉग जोड़ें।

console.log(res);

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

[
    [{
        "Date": "Sun, 15 Feb 2015 15:10:45 GMT",
        "Description": "wwe",
        "Id": 5,
        "Title": "wwe"
    }, {
        "Date": "Sat, 24 Jan 2015 00:13:50 GMT",
        "Description": "Travel to Spain",
        "Id": 4,
        "Title": "Spain"
    }], {
        "total": 5
    }
]

प्रतिक्रिया से प्राप्त कुल संख्या का उपयोग करके, हम पृष्ठों की कुल संख्या प्राप्त कर सकते हैं।

var total = wishObj[1]['total'];
var pageCount = total/itemsPerPage;

कुल आइटम को itemsPerPage . से विभाजित करना गिनती हमें आवश्यक पृष्ठों की संख्या देती है। लेकिन यह तभी सही होता है जब कुल itemsPerPage . का गुणज हो . अगर ऐसा नहीं है, तो हमें इसकी जांच करनी होगी और उसी के अनुसार पेज काउंट को हैंडल करना होगा।

var pageRem = total%itemsPerPage;
if(pageRem !=0 ){
	pageCount = Math.floor(pageCount)+1;
}

ताकि हमें सही पृष्ठ संख्या मिल सके।

अब चूंकि हमारे पास पृष्ठों की कुल संख्या है, इसलिए हम गतिशील रूप से पेजिनेशन HTML बनाएंगे। LI हटाएं पेजिनेशन HTML से तत्व जिसे हमने पहले जोड़ा था।

<nav>
    <ul class="pagination">
        // li we'll create dynamically
    </ul>
</nav>

GetWishes . में सफलता कॉलबैक, चलिए पिछले लिंक को गतिशील रूप से jQuery का उपयोग करके बनाते हैं।

var prevLink = $('<li/>').append($('<a/>').attr({
        'href': '#'
    }, {
        'aria-label': 'Previous'
    })
    .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;')));

$('.pagination').append(prevLink);

उपरोक्त कोड में, हमने अभी पिछला बटन लिंक बनाया है और इसे पेजिनेशन UL में जोड़ दिया है।

उपरोक्त परिवर्तनों को सहेजें और सर्वर को पुनरारंभ करें। सफल साइन-इन पर आपको सूची के अंतर्गत पिछला लिंक देखने में सक्षम होना चाहिए।

इसी तरह, पेज की संख्या के आधार पर पेजों को पेजिनेशन में जोड़ें।

for (var i = 0; i < pageCount; i++) {
    var page = $('<li/>').append($('<a/>').attr('href', '#').text(i + 1));
    $('.pagination').append(page);
}

आइए पेज लिंक जोड़ने के बाद अगला लिंक भी जोड़ें।

var nextLink = $('<li/>').append($('<a/>').attr({
        'href': '#'
    }, {
        'aria-label': 'Next'
    })
    .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;')));

$('.pagination').append(nextLink);

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

क्लिक इवेंट को पेज नंबर से अटैच करना

अब मुख्य तर्क आता है जो हमारे पेजिनेशन को कार्यात्मक बना देगा। हम GetWishes को कॉल करने के लिए प्रत्येक पृष्ठ अनुक्रमणिका पर एक क्लिक ईवेंट कॉल संलग्न करने जा रहे हैं जावास्क्रिप्ट फ़ंक्शन। आइए पहले एक क्लिक इवेंट को पेज नंबर प्रदर्शित करने वाले एंकर एलिमेंट में संलग्न करें।

for (var i = 0; i < pageCount; i++) {

    var aPage = $('<a/>').attr('href', '#').text(i + 1);
  
    $(aPage).click(function() {
        
    });
  
    var page = $('<li/>').append(aPage);
    $('.pagination').append(page);

}

इसलिए हमने पेज एंकर के लिए सिर्फ एक ऑनक्लिक घटना संलग्न की है। प्रत्येक क्लिक पर हम GetWishes . को कॉल करेंगे कार्य करें और offset . पास करें . तो offset घोषित करें लूप के बाहर।

var offset = 0;

GetWishes पर कॉल करें क्लिक इवेंट कॉल के अंदर कार्य करें।

GetWishes(offset);

offset में भी वृद्धि करें दिखाए गए रिकॉर्ड की संख्या के आधार पर।

offset = offset + 2;

लेकिन हर बार GetWishes फ़ंक्शन को कहा जाता है, offset . का मान हमेशा अंतिम एक सेट होगा। इसलिए हम GetWishes को सही ऑफ़सेट पास करने के लिए JavaScript क्लोजर का उपयोग करेंगे समारोह।

var offset = 0;

for (var i = 0; i < pageCount; i++) {

    var aPage = $('<a/>').attr('href', '#').text(i + 1);
  
    $(aPage).click(function(offset) {
        return function() {
            GetWishes(offset);
        }
    }(offset));
  
    var page = $('<li/>').append(aPage);
    $('.pagination').append(page);
    offset = offset + itemsPerPage;

}

उपरोक्त सभी परिवर्तनों को सहेजें और सर्वर को पुनरारंभ करें। मान्य क्रेडेंशियल का उपयोग करके साइन इन करें और एक बार उपयोगकर्ता होम पेज पर, पेजिनेशन UL में पेज पर क्लिक करने का प्रयास करें।

इसके बाद, हम पिछले और अगले पेज के लिंक को लागू करेंगे। यह थोड़ा जटिल लग सकता है, इसलिए इसे लागू करने से पहले मैं इसे थोड़ा समझाता हूं।

हम एक बार में पाँच पृष्ठ प्रदर्शित करेंगे। अगले और पिछले लिंक का उपयोग करके उपयोगकर्ता क्रमशः अगले पांच और पिछले पांच पृष्ठों पर नेविगेट कर सकता है। हम स्टार्ट पेज और एंड पेज के मूल्यों को स्टोर करेंगे और अगले और पिछले बटन क्लिक दोनों पर अपडेट करते रहेंगे। तो चलिए userHome.html . में दो हिडन फील्ड्स जोड़कर शुरू करते हैं पेज.

<input type="hidden" id="hdnStart" value="1" />
<input type="hidden" id="hdnEnd" value="5"/>

GetWishes . में सफलता कॉलबैक, हमारे द्वारा .pagination . खाली करने के बाद उल, नवीनतम प्रारंभ पृष्ठ और अंतिम पृष्ठ प्राप्त करने के लिए कोड की निम्न पंक्ति जोड़ें।

$('.pagination').empty();

var pageStart = $('#hdnStart').val();
var pageEnd = $('#hdnEnd').val();

पृष्ठ 1 से 5 प्रदर्शित करते समय कोई पिछला बटन लिंक नहीं दिखाया जाएगा। यदि प्रदर्शित पृष्ठ 5 से अधिक हैं तो हम पिछला बटन लिंक प्रदर्शित करेंगे।

if (pageStart > 5) {
    var aPrev = $('<a/>').attr({
            'href': '#'
        }, {
            'aria-label': 'Previous'
        })
        .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;'));

    $(aPrev).click(function() {
        // Previous button logic
    });

    var prevLink = $('<li/>').append(aPrev);
    $('.pagination').append(prevLink);
}

जब उपयोगकर्ता पिछले बटन पर क्लिक करता है, तो हम hdnStart . को रीसेट कर देंगे और hdnEnd मान और कॉल करें GetWishes जावास्क्रिप्ट फ़ंक्शन।

$(aPrev).click(function() {
    $('#hdnStart').val(Number(pageStart) - 5);
    $('#hdnEnd').val(Number(pageStart) - 5 + 4);
    GetWishes(Number(pageStart) - 5);
});

अगला, प्रारंभ पृष्ठ और अंतिम पृष्ठ के आधार पर हम लूप करेंगे और पृष्ठ लिंक बनाएंगे और .pagination जोड़ेंगे। उल.

for (var i = Number(pageStart); i <= Number(pageEnd); i++) {

    if (i > pageCount) {
        break;
    }


    var aPage = $('<a/>').attr('href', '#').text(i);
    
    // Attach the page click event
    $(aPage).click(function(i) {
        return function() {
            GetWishes(i);
        }
    }(i));
    
    var page = $('<li/>').append(aPage);

    // Attach the active page class
    if ((_page) == i) {
        $(page).attr('class', 'active');
    }

    $('.pagination').append(page);


}

कुल पृष्ठ संख्या और पृष्ठ प्रारंभ मान की तुलना करके, हम अगले बटन लिंक का प्रदर्शन तय करेंगे।

if ((Number(pageStart) + 5) <= pageCount) {
    var nextLink = $('<li/>').append($('<a/>').attr({
            'href': '#'
        }, {
            'aria-label': 'Next'
        })
        .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;').click(function() {
            $('#hdnStart').val(Number(pageStart) + 5);
            $('#hdnEnd').val(Number(pageStart) + 5 + 4);
            GetWishes(Number(pageStart) + 5);

        })));
    $('.pagination').append(nextLink);
}

जैसा कि ऊपर दिए गए कोड में देखा गया है, अगले बटन पर क्लिक करने पर हम hdnStart को रीसेट कर रहे हैं और hdnEnd बटन मान और कॉल करना GetWishes जावास्क्रिप्ट फ़ंक्शन।

तो यह रहा अंतिम GetWishes जावास्क्रिप्ट फ़ंक्शन।

function GetWishes(_page) {

    var _offset = (_page - 1) * 2;
  
    $.ajax({
        url: '/getWish',
        type: 'POST',
        data: {
            offset: _offset
        },
        success: function(res) {

            var itemsPerPage = 2;

            var wishObj = JSON.parse(res);

            $('#ulist').empty();
            $('#listTemplate').tmpl(wishObj[0]).appendTo('#ulist');

            var total = wishObj[1]['total'];
            var pageCount = total / itemsPerPage;
            var pageRem = total % itemsPerPage;
            if (pageRem != 0) {
                pageCount = Math.floor(pageCount) + 1;
            }


            $('.pagination').empty();

            var pageStart = $('#hdnStart').val();
            var pageEnd = $('#hdnEnd').val();




            if (pageStart > 5) {
                var aPrev = $('<a/>').attr({
                        'href': '#'
                    }, {
                        'aria-label': 'Previous'
                    })
                    .append($('<span/>').attr('aria-hidden', 'true').html('&laquo;'));

                $(aPrev).click(function() {
                    $('#hdnStart').val(Number(pageStart) - 5);
                    $('#hdnEnd').val(Number(pageStart) - 5 + 4);
                    GetWishes(Number(pageStart) - 5);
                });

                var prevLink = $('<li/>').append(aPrev);
                $('.pagination').append(prevLink);
            }



            for (var i = Number(pageStart); i <= Number(pageEnd); i++) {

                if (i > pageCount) {
                    break;
                }


                var aPage = $('<a/>').attr('href', '#').text(i);

                $(aPage).click(function(i) {
                    return function() {
                        GetWishes(i);
                    }
                }(i));
                var page = $('<li/>').append(aPage);

                if ((_page) == i) {
                    $(page).attr('class', 'active');
                }

                $('.pagination').append(page);


            }
            if ((Number(pageStart) + 5) <= pageCount) {
                var nextLink = $('<li/>').append($('<a/>').attr({
                        'href': '#'
                    }, {
                        'aria-label': 'Next'
                    })
                    .append($('<span/>').attr('aria-hidden', 'true').html('&raquo;').click(function() {
                        $('#hdnStart').val(Number(pageStart) + 5);
                        $('#hdnEnd').val(Number(pageStart) + 5 + 4);
                        GetWishes(Number(pageStart) + 5);

                    })));
                $('.pagination').append(nextLink);
            }




        },
        error: function(error) {
            console.log(error);
        }
    });
}

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