beautiful flask tables

Meja Labu Cantik dan Fungsional

Saya cukup khawatir tentang bagaimana saya bisa membuat tabel di blog pribadi saya dan menambahkan fungsi tabel yang memungkinkan saya mengakses data tertentu dengan cepat. Jika data dalam tabel terlalu besar, penambahan pagination sangat diperlukan. Selain itu, memuat data dalam tabel seefisien mungkin akan membantu meningkatkan pengalaman bekerja dengan aplikasi blog saya.

Fitur

• Paginasi data dalam baris
  • Pilih jumlah baris yang akan ditampilkan dalam tabel
• Mencari data di seluruh tabel
  • Aplikasi dapat mencari seluruh tabel untuk kata atau frasa tertentu (lambat dan tidak efisien seperti yang terlihat pada contoh Tabel Dasar)
  • Aplikasi dapat mencari kata atau frasa tertentu per data yang diberi nomor halaman (cepat dan efisien seperti yang terlihat pada contoh Tabel Ajax)
• Menyortir data di seluruh tabel
  • Aplikasi dapat mengurutkan seluruh tabel berdasarkan kolom tertentu (Anda dapat memilih kolom mana yang akan diurutkan selama pengembangan)

Teknologi yang Digunakan

• Kerangka labu
• Python untuk pemrograman (front-end dan back-end)
• SQLAlchemy untuk database
• Bootstrap untuk meja yang indah
• jQuery untuk front-end
• perpustakaan dataTables.js untuk menyempurnakan tabel
• Faker untuk menghasilkan data pengguna palsu
• AJAX untuk front-end
• Heroku untuk Penerapan
• Docker untuk Penerapan

Jenis Tabel yang Dipajang

1. Tabel Bootstrap
2. Tabel Dasar
3. Tabel Ajax
4. Tabel sisi server

Tabel Bootstrap

Membuat tabel di flask sangatlah mudah. Yang perlu Anda lakukan hanyalah menentukan struktur tabel dan menampilkan semua pengguna dalam tabel.

Tabel Dasar

Tabel dasar adalah tabel yang menampilkan seluruh data dalam database, sama seperti tabel bootstrap. Saya menyebutnya basic dalam artian cukup baik untuk keperluan menampilkan data singkat. Namun, ini tidak terlalu efisien dalam menampilkan data berukuran besar.

Kekurangan terbesar dari tabel dasar, yang hanya menampilkan semua data pengguna di database kita, adalah, selama beberapa detik saat halaman dimuat, tabel ini akan menampilkan seluruh tabel sebelum penomoran halaman dimulai. Jika datanya juga besar, pengguna harus sabar menunggu saat rute 'melakukan tugasnya' sebelum tabel akhir sebenarnya ditampilkan.

Tabel saat halaman dimuat selama beberapa detik pertama

Tabel saat halaman dimuat penuh

Tabel Ajax

Penggunaan Ajax membantu memecahkan masalah yang dihadapi tabel dasar. Di sini, tabel pertama kali dimuat dalam keadaan kosong ketika permintaan untuk mengakses tabel ajax dibuat. Titik akhir kedua digunakan untuk menampilkan data dalam tabel. Namun masih ada sedikit masalah pada tabel ini. Jika datanya terlalu besar, tabel akan kosong selama beberapa detik sebelum data sebenarnya ditampilkan. Ini karena seluruh tabel harus dimuat terlebih dahulu, dan ini mungkin memerlukan waktu tergantung pada ukuran datanya.

Tabel Ajax saat halaman dimuat selama beberapa detik pertama

Tabel Ajax saat halaman dimuat penuh

Tabel sisi server

Dengan tabel sisi server, semua fitur seperti pagingaion, pencarian, dan pengurutan diimplementasikan di sisi server. Ini adalah cara yang sangat efisien untuk menampilkan data besar. Ketika permintaan untuk tabel sisi server yang diberi nomor halaman dibuat, hanya data yang ditemukan di halaman tertentu yang akan ditampilkan. Jika pengguna membuka halaman lain, maka permintaan baru untuk data di halaman berikutnya akan dibuat. Dengan demikian, hanya data yang diperlukan yang dimuat dan ditampilkan. Ini adalah solusi yang lebih baik tetapi penerapannya sedikit lebih rumit. Fitur seperti pencarian dan pengurutan harus dipindahkan dari sisi klien ke sisi server.

Aplikasi yang Dikerahkan

• Aplikasi Tabel Flask di Heroku
• Aplikasi Tabel Flask di Docker

CATATAN: Jika Anda menguji aplikasi di server Heroku, Anda mungkin menemukan "Kesalahan Tak Terduga". Ini karena Heroku menyediakan penyimpanan database dalam jumlah terbatas. Aplikasi saat ini menghasilkan ratusan pengguna secara otomatis yang, pada saat Anda mengakses aplikasi, Heroku mungkin telah menonaktifkan databasenya karena melebihi batas penyimpanan pada versi tingkat gratis.

Pengujian

Jika Anda tertarik untuk menguji aplikasinya, Anda dapat menggunakan perintah berikut untuk menjalankan aplikasi:

1. Kloning repositori ini:

   $ git clone [email protected]:GitauHarrison/beautiful-flask-tables.git
   

2. Ubah direktori untuk mengakses aplikasi:

   $ cd beautiful-flask-tables
   

3. Membuat dan mengaktifkan lingkungan virtual:

   $ mkvirtualenv flask-tables
   

4. Instal dependensi:

   $ pip3 install -r requirements.txt
   

5. Jalankan aplikasi:

   $ flask run
   

6. Buka aplikasi di browser Anda yang berjalan pada port lokal 5000:

   • krom
   • Firefox
   • Safari

Referensi

• Templat Labu Interaktif - Miguel Grinberg
• Meja Labu Cantik - saya

Melangkah Lebih Jauh

Penggunaan JQuery saat ini sudah usang. Hal ini membuat DataTables.js ketinggalan jaman karena bergantung pada JQuery. Lihat versi terbaru dari proyek ini di sini di mana saya menunjukkan cara bekerja dengan Grid.js.