Hôm nay 21:08
 bị mất góc dưới và bên phải
Chỉnh sửa
bị mất góc logo 
 đây là giao diện tôi muốn chỉnh index  bỏ chữ DUYPHONG WORK và bỏ DUYPHONG
 
Hệ thống làm việc nội bộ mục đích app thực dụng không màu mè
Văn bản đã dán (1)(20260911-151735).txt
Tài liệu
Văn bản đã dán (1)(20260911-153106).txt
Tài liệu
Văn bản đã dán (1)(20260911-153248).txt
Tài liệu
Văn bản đã dán (1)(20260911-170909).txt
Tài liệu
 hay ta lấy danh sach o đây
Đã dán markdown (1)(5).md
Tệp
ok rồi
test_zkbio_credential_employee_v2(1).php
Tệp
dựa theo file này ta lấy danh sách để đăng nhập mk mặc định 123456 khi có nhân viên mới từ zkbio thì sẽ tự cập nhật néu tôi đổi mk không ảnh hưởng
Văn bản đã dán (1)(20260911-174420).txt
Tài liệu
Văn bản đã dán (1)(20260911-175106).txt
Tài liệu
Đã dán markdown (1)(6).md
Tệp
Đã dán markdown (1)(7).md
Tệp

Có. Nếu DP025 là employeeCode ổn định của nhân viên trên ZKBio, thì dùng DP025 làm khóa tham chiếu thực tế còn thuận tiện hơn ID nội bộ dài của ZKBio.

Tôi đề xuất:

NGUOIDUNG
├── ma_nhan_vien      ← DP025  ← KHÓA THAM CHIẾU
├── ten_dang_nhap     ← DP025
├── ho_ten            ← Điểu Ma Rôn
├── mat_khau          ← 123456
├── vai_tro           ← CONGNHAN
└── trang_thai        ← 1

Khi ZKBio trả về:

employeeCode = DP025
firstName = Điểu Ma Rôn

thì hệ thống tìm:

WHERE ma_nhan_vien = 'DP025'
Tuy nhiên có một điểm rất quan trọng

Anh vừa nói “ZKBio không đổi ID được”. Nếu DP025 cũng được ZKBio đảm bảo không thay đổi, thì dùng DP025 làm khóa là rất hợp lý.

Nhưng nếu sau này có khả năng đổi mã từ:

DP025 → DP125

thì DP025 không còn là khóa bất biến. Khi đó tốt nhất vẫn lưu thêm ID ZKBio gốc.

Thiết kế an toàn nhất:

zkbio_employee_id  ← ID bất biến của ZKBio
ma_nhan_vien        ← DP025

Trong đó:

zkbio_employee_id = khóa nhận diện tuyệt đối.
ma_nhan_vien = mã dùng để đăng nhập và hiển thị.
ho_ten = tên có thể thay đổi.

Nếu anh xác nhận DP025 chắc chắn không bao giờ đổi, chúng ta có thể đơn giản hóa và dùng ma_nhan_vien (DP025) làm khóa UNIQUE, không cần thêm zkbio_employee_id.

Tôi nghiêng về phương án này vì hệ thống của anh sẽ đơn giản hơn rất nhiều.

khi o man hình đang nhập cho phép chon họ tên thay vì ID

Được. Và tôi nghĩ cách này thân thiện hơn cho công nhân.

Ta có thể giữ bên trong hệ thống:

Khóa tham chiếu: DP025

nhưng trên màn hình đăng nhập không bắt người dùng nhập DP025.

Màn hình đăng nhập

Thay vì:

Mã nhân viên: [ DP025        ]
Mật khẩu:     [ ******      ]
              [ ĐĂNG NHẬP ]

sẽ thành:

Họ tên nhân viên
[ ▼ Điểu Ma Rôn          ]

Mật khẩu
[ ******                ]

[      ĐĂNG NHẬP        ]

Khi công nhân chọn Điểu Ma Rôn, frontend thực tế gửi:

ma_nhan_vien = DP025

đến login.php.

Như vậy:

Người dùng nhìn thấy → Họ tên

Hệ thống xử lý → DP025

Cơ sở dữ liệu tham chiếu → DP025

Có một điểm tôi đề xuất

Nếu có hai người trùng tên, danh sách nên hiển thị:

▼ Điểu Ma Rôn — DP025
▼ Điểu Ma Rôn — DP031

nhưng nếu tên không trùng thì chỉ cần:

Điểu Ma Rôn
Điểu Lá
Điểu Hùng
...
Quan trọng

Chúng ta chưa sửa login.php lúc này.

Theo nguyên tắc anh đã thống nhất, tôi đề nghị thứ tự:

Xác định NGUOIDUNG dùng ma_nhan_vien = DP025 làm khóa/UNIQUE.
Tạo 30 tài khoản từ ZKBio.
Kiểm tra dữ liệu.
Sau đó mới sửa màn hình đăng nhập để chọn họ tên.

Như vậy nếu có lỗi, chúng ta biết chính xác lỗi nằm ở bước nào, không sửa nhiều phần cùng lúc.

hãy làm ngay

Đã làm ngay đúng 1 phần: màn hình đăng nhập. Tôi giữ nguyên các phần khác của login.html, chỉ thay ô Tài khoản thành danh sách Họ tên nhân viên và khi chọn tên, hệ thống gửi ma_nhan_vien (ví dụ DP025) vào login.php.

Backend hiện tại đã có endpoint login.php?action=list_users, trả danh sách nhân viên đang hoạt động và không trả mật khẩu.

Giao diện mới
DUYPHONG
ĐĂNG NHẬP

Họ tên nhân viên
[ ▼ -- Chọn họ tên nhân viên -- ]

Mật khẩu
[ *************** ]

[       ĐĂNG NHẬP       ]

Khi chọn:

Điểu Ma Rôn

thì phía sau sẽ gửi:

ma_nhan_vien = DP025
mat_khau = ******

Như vậy người dùng không cần biết mã DP025, nhưng hệ thống vẫn tham chiếu bằng mã nhân viên.

File đã hoàn chỉnh

Tải login.html đã sửa

Anh hãy upload đè file login.html hiện tại trên /home/duyphong/app/, sau đó mở lại trang đăng nhập bằng Ctrl + F5.

Lưu ý: nếu NGUOIDUNG hiện đang trống thì danh sách sẽ trống — điều đó là đúng, vì danh sách đăng nhập hiện được lấy từ NGUOIDUNG. Bước tạo 30 tài khoản từ ZKBio sẽ làm ở bước kế tiếp, không trộn vào thay đổi này.

<!DOCTYPE html>
<html lang="vi">

<head>

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>DUYPHONG - Đăng nhập</title>


<style>

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        Arial,
        sans-serif;

    background: #f1f3f6;

    display: flex;

    justify-content: center;

    align-items: center;
}


/* =========================================
   KHUNG CHÍNH
========================================= */

.login-box {

    width: 360px;

    max-width:
        calc(100% - 30px);

    background: white;

    padding: 30px;

    border-radius: 16px;

    box-shadow:
        0 5px 25px
        rgba(0,0,0,.10);
}


/* =========================================
   LOGO
========================================= */

.logo {

    text-align: center;

    font-size: 30px;

    font-weight: bold;

    color: #2878ee;

    margin-bottom: 8px;
}


/* =========================================
   TIÊU ĐỀ
========================================= */

.title {

    text-align: center;

    font-size: 21px;

    font-weight: bold;

    margin-bottom: 28px;
}


/* =========================================
   LABEL
========================================= */

label {

    display: block;

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 7px;
}


/* =========================================
   INPUT
========================================= */

input {

    width: 100%;

    padding: 12px;

    border:
        1px solid #d5d9de;

    border-radius: 8px;

    font-size: 16px;

    margin-bottom: 18px;

    outline: none;
}


input:focus {

    border-color:
        #2878ee;
}


/* =========================================
   BUTTON
========================================= */

button {

    width: 100%;

    padding: 13px;

    border: 0;

    border-radius: 8px;

    background:
        #2878ee;

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition:
        opacity .2s;
}


button:hover {

    opacity: .9;
}


button:disabled {

    opacity: .6;

    cursor: wait;
}


/* =========================================
   THÔNG BÁO
========================================= */

.message {

    display: none;

    margin-top: 16px;

    padding: 10px;

    border-radius: 8px;

    text-align: center;

    font-size: 14px;
}


.message.error {

    display: block;

    background:
        #ffe8e8;

    color:
        #c62828;
}


.message.success {

    display: block;

    background:
        #e8f7ec;

    color:
        #218838;
}


/* =========================================
   KHU VỰC USER
========================================= */

#userInfo {

    display: none;
}


.user-name {

    text-align: center;

    font-size: 21px;

    font-weight: bold;

    margin-bottom: 15px;
}


.info {

    background:
        #f5f6f7;

    padding: 15px;

    border-radius: 10px;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* =========================================
   NÚT CHỨC NĂNG
========================================= */

.function-button {

    margin-top: 10px;
}


/* =========================================
   NÚT ĐĂNG XUẤT
========================================= */

.logout-button {

    margin-top: 10px;

    background: #777;
}

</style>

</head>


<body>


<div class="login-box">


    <!-- =================================================
         KHU VỰC ĐĂNG NHẬP
    ================================================== -->

    <div id="loginArea">


        <div class="logo">
            DUYPHONG
        </div>


        <div class="title">
            ĐĂNG NHẬP
        </div>


        <form id="loginForm">


            <label>
                Họ tên nhân viên
            </label>

            <select
                id="username"
                required
                style="width:100%; padding:12px; border:1px solid #d5d9de; border-radius:8px; font-size:16px; margin-bottom:18px; outline:none; background:white;"
            >
                <option value="">Đang tải danh sách nhân viên...</option>
            </select>


            <label>
                Mật khẩu
            </label>


            <input
                type="password"
                id="password"
                placeholder="Nhập mật khẩu"
                autocomplete="current-password"
                required
            >


            <button
                type="submit"
                id="loginButton"
            >
                ĐĂNG NHẬP
            </button>


        </form>


        <div
            id="message"
            class="message"
        ></div>


    </div>



    <!-- =================================================
         SAU KHI ĐĂNG NHẬP
    ================================================== -->

    <div id="userInfo">


        <div class="logo">
            DUYPHONG
        </div>


        <div
            id="welcome"
            class="user-name"
        ></div>


        <div
            id="info"
            class="info"
        ></div>



        <!-- =============================================
             XEM LƯƠNG
        ============================================== -->

        <button
            type="button"
            class="function-button"
            onclick="goSalary()"
        >
            XEM LƯƠNG
        </button>



        <!-- =============================================
             CHẤM CÔNG

             Chỉ hiện với:
             QUANLY
             KETOAN
             ADMIN
        ============================================== -->

        <button
            type="button"
            id="attendanceButton"
            class="function-button"
            onclick="goAttendance()"
            style="display:none;"
        >
            CHẤM CÔNG
        </button>



        <!-- =============================================
             ĐĂNG XUẤT
        ============================================== -->

        <button
            type="button"
            class="logout-button"
            onclick="logout()"
        >
            ĐĂNG XUẤT
        </button>


    </div>


</div>



<script>


/*
 * =========================================================
 * CẤU HÌNH API
 * =========================================================
 */

const LOGIN_API =
    'login.php';


/*
 * =========================================================
 * TẢI DANH SÁCH NHÂN VIÊN
 * =========================================================
 */

async function loadUsers() {

    const select =
        document.getElementById('username');

    try {

        const response =
            await fetch(
                LOGIN_API + '?action=list_users',
                {
                    method: 'GET',
                    credentials: 'include',
                    headers: {
                        'Accept': 'application/json'
                    }
                }
            );

        const text = await response.text();
        const result = JSON.parse(text);

        if (!result.success || !Array.isArray(result.users)) {
            throw new Error(
                result.message ||
                'Không lấy được danh sách nhân viên.'
            );
        }

        select.innerHTML = '';

        const firstOption =
            document.createElement('option');
        firstOption.value = '';
        firstOption.textContent =
            '-- Chọn họ tên nhân viên --';
        select.appendChild(firstOption);

        result.users.forEach(function(user) {

            const option =
                document.createElement('option');

            option.value =
                user.ten_dang_nhap ||
                user.ma_nhan_vien ||
                '';

            option.textContent =
                user.ho_ten ||
                user.ma_nhan_vien ||
                'Không có tên';

            select.appendChild(option);
        });

    } catch (error) {

        console.error(
            'LOAD USERS ERROR:',
            error
        );

        select.innerHTML = '';

        const option =
            document.createElement('option');

        option.value = '';
        option.textContent =
            'Không tải được danh sách nhân viên';

        select.appendChild(option);
    }
}

loadUsers();



/*
 * =========================================================
 * FORM ĐĂNG NHẬP
 * =========================================================
 */

document
    .getElementById('loginForm')
    .addEventListener(
        'submit',
        async function(event) {


            event.preventDefault();


            /*
             * Lấy tài khoản
             */

            const username =
                document
                    .getElementById(
                        'username'
                    )
                    .value
                    .trim();


            /*
             * Lấy mật khẩu
             */

            const password =
                document
                    .getElementById(
                        'password'
                    )
                    .value;


            /*
             * Các thành phần giao diện
             */

            const loginButton =
                document
                    .getElementById(
                        'loginButton'
                    );


            const message =
                document
                    .getElementById(
                        'message'
                    );



            /*
             * Kiểm tra rỗng
             */

            if (
                username === ''
            ) {

                showError(
                    'Vui lòng chọn họ tên nhân viên.'
                );

                return;
            }


            if (
                password === ''
            ) {

                showError(
                    'Vui lòng nhập mật khẩu.'
                );

                return;
            }



            /*
             * Trạng thái đang đăng nhập
             */

            loginButton.disabled =
                true;

            loginButton.innerText =
                'ĐANG KIỂM TRA...';

            message.style.display =
                'none';



            try {


                /*
                 * Gửi yêu cầu tới login.php
                 */

                const response =
                    await fetch(
                        LOGIN_API,
                        {

                            method:
                                'POST',

                            credentials:
                                'include',

                            headers: {

                                'Content-Type':
                                    'application/json',

                                'Accept':
                                    'application/json'

                            },

                            body:
                                JSON.stringify({

                                    ten_dang_nhap:
                                        username,

                                    mat_khau:
                                        password

                                })

                        }
                    );



                /*
                 * Đọc dữ liệu trả về
                 */

                const text =
                    await response.text();


                console.log(
                    'LOGIN HTTP:',
                    response.status
                );


                console.log(
                    'LOGIN RESPONSE:',
                    text
                );



                /*
                 * Chuyển sang JSON
                 */

                let result;


                try {

                    result =
                        JSON.parse(text);

                } catch (error) {

                    showError(
                        'Máy chủ trả về dữ liệu không hợp lệ.'
                    );

                    return;
                }



                /*
                 * Kiểm tra đăng nhập
                 */

                if (
                    !result.success
                ) {

                    showError(
                        result.message ||
                        'Đăng nhập thất bại.'
                    );

                    return;
                }



                /*
                 * Đăng nhập thành công
                 */

                showUser(
                    result.user
                );


            } catch (error) {


                console.error(
                    'LOGIN ERROR:',
                    error
                );


                showError(
                    'Không thể kết nối máy chủ.'
                );


            } finally {


                loginButton.disabled =
                    false;

                loginButton.innerText =
                    'ĐĂNG NHẬP';

            }

        }
    );



/*
 * =========================================================
 * HIỂN THỊ LỖI
 * =========================================================
 */

function showError(
    text
) {

    const message =
        document
            .getElementById(
                'message'
            );


    message.innerText =
        text;


    message.className =
        'message error';


    message.style.display =
        'block';
}



/*
 * =========================================================
 * HIỂN THỊ THÔNG TIN USER
 * =========================================================
 */

function showUser(
    user
) {


    /*
     * Ẩn form đăng nhập
     */

    document
        .getElementById(
            'loginArea'
        )
        .style.display =
            'none';



    /*
     * Hiện khu vực user
     */

    document
        .getElementById(
            'userInfo'
        )
        .style.display =
            'block';



    /*
     * Tên nhân viên
     */

    document
        .getElementById(
            'welcome'
        )
        .innerText =
            'Xin chào ' +
            (
                user.ho_ten ||
                user.ten_dang_nhap
            );



    /*
     * Thông tin
     */

    document
        .getElementById(
            'info'
        )
        .innerHTML =

            '<b>Mã nhân viên:</b> ' +

            escapeHtml(
                user.ma_nhan_vien
            ) +

            '<br>' +

            '<b>Tài khoản:</b> ' +

            escapeHtml(
                user.ten_dang_nhap
            ) +

            '<br>' +

            '<b>Vai trò:</b> ' +

            escapeHtml(
                user.vai_tro
            );



    /*
     * =====================================================
     * PHÂN QUYỀN NÚT CHẤM CÔNG
     * =====================================================
     */

    const role =
        String(
            user.vai_tro || ''
        )
        .trim()
        .toUpperCase();


    const attendanceButton =
        document
            .getElementById(
                'attendanceButton'
            );


    /*
     * Mặc định ẩn
     */

    attendanceButton.style.display =
        'none';



    /*
     * QUẢN LÝ
     */

    if (
        role === 'QUANLY'
    ) {

        attendanceButton.style.display =
            'block';
    }


    /*
     * KẾ TOÁN
     */

    else if (
        role === 'KETOAN'
    ) {

        attendanceButton.style.display =
            'block';
    }


    /*
     * ADMIN
     */

    else if (
        role === 'ADMIN'
    ) {

        attendanceButton.style.display =
            'block';
    }

}



/*
 * =========================================================
 * XEM LƯƠNG
 * =========================================================
 */

function goSalary() {

    window.location.href =
        'salary.html';
}



/*
 * =========================================================
 * CHẤM CÔNG
 * =========================================================
 */

function goAttendance() {

    window.location.href =
        'quanly.html';
}



/*
 * =========================================================
 * ĐĂNG XUẤT
 * =========================================================
 */

function logout() {

    /*
     * Giai đoạn hiện tại:
     * quay lại màn hình đăng nhập.
     *
     * Sau này ta sẽ tạo logout.php
     * để hủy PHP Session thật sự.
     */

    window.location.href =
        'login.html';
}



/*
 * =========================================================
 * CHỐNG HTML INJECTION
 * =========================================================
 */

function escapeHtml(
    value
) {

    const div =
        document.createElement(
            'div'
        );


    div.textContent =
        value ?? '';


    return div.innerHTML;
}

</script>

</body>

</html>
login.html
HTML