article

Tuesday, September 20, 2022

Python Desktop App Fetch All Records sqlite3 using python eel

Python Desktop App Fetch All Records sqlite3 using python eel

Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.
https://github.com/ChrisKnott/Eel

Install
pip install eel
C:\python_dev\table>pip install eel

Install PyAutoGUI
https://pypi.org/project/PyAutoGUI/
pip install PyAutoGUI
C:\python_dev\table>pip install PyAutoGUI

Create Database sqlite3 using python

createdb.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#createdb.py
import sqlite3
from sqlite3 import Error
  
def create_connection(db_file):
    """ create a database connection to a SQLite database """
    conn = None
    try:
        conn = sqlite3.connect(db_file)
        print(sqlite3.version)
    except Error as e:
        print(e)
    finally:
        if conn:
            conn.close()
  
  
if __name__ == '__main__':
    create_connection(r"C:\python_dev\table\views\database\storage.db")
run
C:\python_dev\table>python createdb.py
main.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#main.py
import eel
from views.models.fetchdata import showallrecords
import pyautogui #https://pypi.org/project/PyAutoGUI/
 
eel.init('views')
  
@eel.expose
def get_registers():
    select_reg = showallrecords()
    eel.action_out(select_reg)
     
eel.start(
    'index.html',
    size=pyautogui.size()
)
Create Table

CREATE TABLE tblemployee (

id INTEGER PRIMARY KEY AUTOINCREMENT,

name VARCHAR (150),

position VARCHAR (150),

office VARCHAR (150)

);


table\views\models\fetchdata.py
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#table\views\models\fetchdata.py
import sqlite3
 
def showallrecords():
    try:
        connect = sqlite3.connect("views/database/storage.db")
        cursor = connect.cursor()
        cursor.execute("SELECT * FROM tblemployee")
        registers = []
        for item in cursor.fetchall():
            #test = item[1]
            #print(test)
            registers.append(item)
        return registers
    except Exception as error:
        print(error)
        msg = "Error"
        return msg
Make your Front-end HTML CSS and Javascript
table\views\index.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
//table\views\index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="/eel.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="icon" href="img/myglogo.png">
    <title>Python Registration</title>
</head>
<body>
<div class="container">
<p style="text-align:center;"><h2>Python Desktop App Fetch All Records sqlite3 using python eel</h2></p>
<p style="text-align:right;"><button type="button" class="btn">Add New</button></p>
<table id="employeedatatable" class="styled-table">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Action</th>
    </tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        eel.get_registers()
    })
         
    eel.expose(action_out)
    function action_out(registers){
        //alert("Show Table");
        registers.forEach(showdata)
    }
         
    function showdata(item, index){
        var get_table = document.getElementById("employeedatatable");
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");
        var td5 = document.createElement("td");
 
        td.innerText = item[0]
        td2.innerText = item[1]
        td3.innerText = item[2]
        td4.innerText = item[3]
                 
        td5.innerHTML = '<button type="button" class="btn" onclick="buttonedit()">Edit</button> | <button type="button" class="btndelete" onclick="buttondelete()">Delete</button>'
        //td5.className = "acoes"
        //td5.setAttribute("onclick","actions(this, 'documents');")
                 
        get_table.appendChild(tr)
        tr.appendChild(td)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tr.appendChild(td4)
        tr.appendChild(td5)
    }
    function buttonedit()
    {
      alert("Edit Records")
    }  
    function buttondelete()
    {
        if(confirm("Are you sure you want to delete this?")) {
            alert("Successfully Deleted");
        }else{
            return false;
        }
    }
 
</script>
</body>
</html>
table\views\css\index.css
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//table\views\css\index.css
.container {margin:30px;}
.styled-table {
    border-collapse: collapse;width:100%;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
.styled-table tr {
    border-bottom: 1px solid #dddddd;
}
.styled-table tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.styled-table tr:last-of-type {
    border-bottom: 2px solid #009879;
}
.btn {
    background-color: #04AA6D!important;
    border-radius: 5px;color:#ffffff;
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
}
.btndelete {
    background-color: #cf2e2e!important;
    border-radius: 5px;color:#ffffff;
    font-size: 17px;
    font-family: 'Source Sans Pro', sans-serif;
    padding: 6px 18px;
}
Run C:\python_dev\table>python main.py
Posted by ednalan at 8:11 PM . Under , .

Related Post