Membuat Aplikasi Web Dari Awal Menggunakan Python Flask dan MySQL:Bagian 5

Di bagian sebelumnya dari seri ini, kita melihat bagaimana menerapkan Edit dan Delete ingin fungsionalitas untuk Aplikasi Daftar Bucket kami. Di bagian ini kita akan mengimplementasikan fungsionalitas paging untuk daftar beranda pengguna kita.

Memulai

Mari kita mulai dengan mengkloning bagian tutorial sebelumnya dari GitHub.

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

Setelah kode sumber dikloning, navigasikan ke direktori proyek dan mulai server web.

cd PythonFlaskMySQLApp_Part4python app.py

Arahkan browser Anda ke http://localhost:5002/ dan Anda akan menjalankan aplikasi tersebut.

Menerapkan Pagination

Saat daftar keinginan di halaman beranda pengguna meningkat, itu akan digulir ke bawah halaman. Jadi, penting untuk mengimplementasikan pagination. Kami akan membatasi jumlah item yang ditampilkan pada halaman hingga jumlah tertentu.

Ubah Prosedur Get Wish

Kita akan mulai dengan memodifikasi sp_GetWishByUser prosedur untuk mengembalikan hasil berdasarkan limit dan offset nilai. Kali ini kita akan membuat pernyataan prosedur tersimpan secara dinamis untuk mengembalikan set hasil berdasarkan nilai limit dan offset. Berikut adalah sp_GetWishByUser yang dimodifikasi Prosedur tersimpan MySQL.

GUNAKAN prosedur `BucketList`;DROP JIKA ADA `sp_GetWishByUser`;DELIMITER $$USE `BucketList`$$CREATE DEFINER=`root`@`localhost` PROSEDUR `sp_GetWishByUser`(IN p_user_id bigint,IN p_limit int int)BEGIN SET @t1 =CONCAT( 'pilih * dari tbl_wish di mana wish_user_id =', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset); SIAPKAN stmt DARI @t1; EKSEKUSI stmt; DEALOCATE SIAPKAN stmt1;END$$DELIMITER;

Seperti yang terlihat pada prosedur tersimpan di atas, kami membuat kueri SQL dinamis kami dan menjalankannya untuk mendapatkan daftar keinginan berdasarkan offset dan limit parameter.

Menambahkan Pagination ke UI

Pertama, mari kita tentukan beberapa pengaturan default. Di app.py tambahkan variabel untuk batas halaman.

# Default settingpageLimit =2

Buat getWish metode python menerima permintaan POST.

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

Baca offset dan limit di dalam getWish metode dan meneruskannya saat memanggil prosedur tersimpan MySQL sp_GetWishByUser .

 _limit =pageLimit _offset =request.form['offset']con =mysql.connect()cursor =con.cursor()cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset))wish =kursor. fetchall()

Ubah GetWishes Fungsi JavaScript di userHome.html untuk menjadikannya permintaan POST dan meneruskan offset nilai.

function GetWishes() { $.ajax({ url:'/getWish', ketik:'POST', data:{ offset:0 }, sukses:function(res) { var wishObj =JSON.parse(res); $('#ulist').empty(); $('#listTemplate').tmpl(wishObj).appendTo('#ulist'); }, error:function(error) { console.log(error); } });}

Simpan semua perubahan dan mulai ulang server. Masuk menggunakan alamat email dan kata sandi yang valid dan Anda seharusnya hanya memiliki dua catatan yang ditampilkan di layar.

Jadi bagian database bekerja dengan baik. Selanjutnya, kita perlu menambahkan UI pagination ke halaman beranda pengguna, yang akan memungkinkan pengguna untuk menavigasi seluruh data.

Kami akan menggunakan komponen pagination Bootstrap. Buka userHome.html dan tambahkan kode HTML berikut setelah #ulist UL.

Simpan perubahan dan mulai ulang server. Setelah berhasil masuk, Anda seharusnya dapat melihat pagination di bawah daftar keinginan.

Membuat Pagination Dinamis

Pagination di atas adalah bagaimana pagination kita akan terlihat. Tetapi untuk membuatnya berfungsi, kita perlu membuat pagination kita secara dinamis berdasarkan jumlah record dalam database.

Untuk membuat pagination, kita memerlukan jumlah total record yang tersedia di database. Jadi mari kita ubah prosedur tersimpan MySQL sp_GetWishByUser untuk mengembalikan jumlah total catatan yang tersedia sebagai parameter keluar.

GUNAKAN prosedur `BucketList`;DROP JIKA ADA `sp_GetWishByUser`;DELIMITER $$USE `BucketList`$$CREATE DEFINER=`root`@`localhost` PROSEDUR `sp_GetWishByUser`(IN p_user_id bigint,IN p_limit int int,out p_total bigint)BEGIN pilih count(*) menjadi p_total dari tbl_wish di mana wish_user_id =p_user_id; SET @t1 =CONCAT( 'pilih * dari tbl_wish di mana wish_user_id =', p_user_id, ' order by wish_date desc limit ',p_limit,' offset ',p_offset); SIAPKAN stmt DARI @t1; EKSEKUSI stmt; DEALLOCATE SIAPKAN stmt;END$$DELIMITER;

Seperti yang terlihat pada prosedur tersimpan yang dimodifikasi di atas, kami menambahkan parameter keluaran baru yang disebut p_total dan memilih jumlah total keinginan berdasarkan id pengguna.

Ubah juga getWish python untuk meneruskan parameter keluaran.

 _limit =pageLimit _offset =request.form['offset'] _total_records =0con =mysql.connect()cursor =con.cursor()cursor.callproc('sp_GetWishByUser',(_user,_limit,_offset,_total_records)) keinginan =cursor.fetchall()cursor.close()cursor =con.cursor()cursor.execute('SELECT @_sp_GetWishByUser_3');outParam =cursor.fetchall()

Seperti yang Anda lihat pada kode di atas, setelah kita memanggil prosedur tersimpan, kita menutup kursor dan membuka kursor baru untuk memilih parameter yang dikembalikan.

Sebelumnya, kami mengembalikan daftar keinginan dari metode Python. Sekarang, kita juga perlu memasukkan jumlah catatan total dalam JSON yang dikembalikan. Jadi kita akan membuat kamus daftar keinginan menjadi daftar lain dan kemudian menambahkan daftar keinginan dan jumlah catatan ke daftar utama. Berikut adalah kode yang dimodifikasi dari getWish metode python.

respons =[]wish_dict =[]untuk keinginan dalam keinginan:wish_dict ={ 'Id':wish[0], 'Title':wish[1], 'Description':wish[2], 'Date':wish[4]} wish_dict.append(wish_dict) response.append(wishes_dict)response.append({'total':outParam[0][0]}) return json.dumps(response)

Dalam GetWishes Fungsi JavaScript, di dalam callback sukses tambahkan log konsol.

console.log(res);

Simpan semua perubahan di atas dan mulai ulang server. Masuk menggunakan alamat email dan kata sandi yang valid dan saat berada di beranda pengguna, periksa konsol browser. Anda seharusnya dapat melihat respons yang mirip dengan yang ditampilkan di bawah:

[ [{ "Tanggal":"Minggu, 15 Feb 2015 15:10:45 GMT", "Deskripsi":"wwe", "Id":5, "Judul":"wwe" }, { "Tanggal ":"Sab, 24 Jan 2015 00:13:50 GMT", "Deskripsi":"Perjalanan ke Spanyol", "Id":4, "Judul":"Spanyol" }], { "total":5 }] 

Dengan menggunakan jumlah total yang diterima dari respons, kita bisa mendapatkan jumlah total halaman.

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

Membagi jumlah item total dari itemsPerPage count memberi kita jumlah halaman yang dibutuhkan. Namun ini hanya berlaku jika totalnya adalah kelipatan dari itemsPerPage . Jika bukan itu masalahnya, kami harus memeriksanya dan menangani jumlah halaman yang sesuai.

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

Jadi itu akan memberi kita jumlah halaman yang benar.

Sekarang karena kami memiliki jumlah total halaman, kami akan membuat HTML penomoran halaman secara dinamis. Hapus LI elemen dari HTML pagination yang kita tambahkan sebelumnya.

Dalam GetWishes sukses callback, mari buat link sebelumnya secara dinamis menggunakan jQuery.

var prevLink =$('
').append($('').attr({ 'href':'#' }, { 'aria-label':'Sebelumnya' }) .append($('').attr('aria-hidden', 'true').html('«')));$('.pagination').append(prevLink);

Pada kode di atas, kita baru saja membuat tautan tombol sebelumnya dan menambahkannya ke UL pagination.

Simpan perubahan di atas dan mulai ulang server. Saat berhasil masuk, Anda seharusnya dapat melihat tautan sebelumnya di bawah daftar.

Demikian pula, mari tambahkan halaman di pagination berdasarkan jumlah halaman.

for (var i =0; i ').append($('').attr('href', '# ').teks(i + 1)); $('.pagination').append(page);}

var nextLink =$('
').append($('').attr({ 'href':'#' }, { 'aria-label':'Next' }) .append($('').attr('aria-hidden', 'true').html('»')));$('.pagination').append(nextLink);

Simpan perubahan dan mulai ulang server. Masuk menggunakan alamat email dan kata sandi yang valid, dan setelah berada di beranda pengguna, Anda seharusnya dapat melihat pagination.

Melampirkan Peristiwa Klik ke Nomor Halaman

Sekarang muncul logika utama yang akan membuat pagination kita berfungsi. Yang akan kita lakukan adalah melampirkan panggilan acara klik pada setiap indeks halaman untuk memanggil GetWishes fungsi JavaScript. Mari kita lampirkan event klik terlebih dahulu ke elemen anchor yang menampilkan nomor halaman.

for (var i =0; i ').attr('href', '#').text(i + 1); $(halaman).klik(fungsi() { }); var halaman =$('
').append(aPage); $('.pagination').append(page);}

Jadi kami baru saja melampirkan acara onclick ke jangkar halaman. Pada setiap klik, kami akan memanggil GetWishes fungsi dan berikan offset . Jadi nyatakan offset di luar perulangan for.

var offset =0;

Hubungi GetWishes fungsi di dalam panggilan acara klik.

GetWishes(offset);

Tambahkan juga offset berdasarkan jumlah record yang ditampilkan.

offset =offset + 2;

Tapi setiap kali GetWishes fungsi dipanggil, nilai offset akan selalu menjadi set terakhir. Jadi kami akan menggunakan Penutupan JavaScript untuk meneruskan offset yang benar ke GetWishes fungsi.

var offset =0;for (var i =0; i ').attr('href', '#').text(i + 1); $(Halaman).klik(fungsi(offset) { kembali fungsi() { GetWishes(offset); } }(offset)); var halaman =$('
').append(aPage); $('.pagination').append(halaman); offset =offset + itemsPerPage;}

Simpan semua perubahan di atas dan mulai ulang server. Login menggunakan kredensial yang valid dan setelah berada di halaman beranda pengguna, coba klik halaman di UL pagination.

Selanjutnya, kami akan menerapkan tautan halaman sebelumnya dan berikutnya. Ini mungkin terlihat agak rumit, jadi izinkan saya menjelaskannya sedikit sebelum kita mulai dengan implementasinya.

Kami akan menampilkan lima halaman sekaligus. Dengan menggunakan tautan berikutnya dan sebelumnya, pengguna dapat menavigasi ke lima halaman berikutnya dan lima halaman sebelumnya. Kami akan menyimpan nilai halaman awal dan halaman akhir dan terus memperbarui baik pada klik tombol berikutnya dan sebelumnya. Jadi mari kita mulai dengan menambahkan dua bidang tersembunyi ke userHome.html halaman.

                
            

            

                

                    
                    Buat Metode Pengiriman Kustom di OpenCart:Bagian Kedua          
                
                

                    Membuat Aplikasi Web Dari Awal Menggunakan Python Flask dan MySQL:Bagian 4