GIAO DIỆN – CÀI ĐẶT

Một phần của tài liệu xây dựng website quản lý việc thu tiền điện phường an hòa, tp cần thơ (Trang 60)

3.2.1 Giao diện khách hàng

3.2.1.1 Trang chủ

Hình 3.32 - Trang chủ phần khách hàng

Khi khách hàng chưa đăng nhập vào hệ thống, khách hàng có thể xem các bài đăng về thông tin của cơ quan, xem thông tin giá điện, thông tin các trạm biến áp, giới thiệu về cơ quan và xem hướng dẫn sử dụng. Phần hướng dẫn sử dụng sẽ hướng dẫn khách hàng các quy trình khi khách hàng đăng nhập vào sử dụng hệ thống. Xem các ý kiến của người dùng phản ánh đến cơ quan và các trả lời từ nhân viên cơ quan.

3.2.1.2 Trang nội dung tin tức

Trang nội dung tin tức thể hiện đầy đủ nội dung tin tức bao gồm tiêu đề, tóm tắc, nội dung, ngày đăng…

Ta có thể tìn kiếm nội dung các bài đăng thông qua ô tìm kiếm trên thanh menu. Nhập từ khóa tìm kiếm và nhấn enter, kết quả sẽ liệt kê các bài đăng phù hợp với từ khoá tìm kiếm của khách hàng nhập vào nếu có.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 51 MSSV: 1111517

Hình 3.33 - Trang nội dung tin tức

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 52 MSSV: 1111517

3.2.1.3 Trang thông tin giá điện

Hình 3.35 - Trang thông tin giá điện

Trang thông tin giá điện liệt kê đầy đủ giá điện theo các hình thức sử dụng và theo các nhóm, hình thức sử dụng nào có tính theo giá bậc thang hay không tính. Nếu tính theo giá bậc thang thì liệt chỉ số các bậc chi tiết.

3.2.1.4 Trang thông tin khách hàng

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 53 MSSV: 1111517

Hệ thống sẽ có thêm một số chức năng khác sau khi khách hàng đăng nhập vào sử dụng như chức năng xem thông tin khách hàng sẽ hiển thị thông tin của khách hàng đang đăng nhập vào hệ thống, chức năng xem thông tin các công tơ điện mà khách hàng đang sử dụng, nhập chỉ số điện năng tiêu thụ, xem và thanh toán hóa đơn, chức năng phản ánh ý kiến của khách hàng đến cơ quan, các ý kiến về cơ quan, nhân viên, ý kiến về quá trình sử dụng hay mọi thắc mắc khác có liên quan.

3.2.1.5 Trang xem thông tin công tơ điện

Hình 3.37 - Trang xem thông tin các công tơ điện

Trang xem thông tin công tơ điện liệt kê tất cả các công tơ điện của khách hàng đăng sử dụng. Các thông tin như mã công tơ, mục đích sử dụng điện của công tơ, công tơ thuộc trạm biến áp nào, trạng thái của công tơ là đang sử dụng hay đã ngừng sử dụng.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 54 MSSV: 1111517

3.2.1.6 Trang nhập chỉ số điện năng tiêu thụ

Hình 3.38 - Trang nhập chỉ số điện năng tiêu thụ

Khi đến thời gian nhập số liệu tiêu thụ khách hàng đăng nhập vào hệ thống để cung cấp chỉ số điện năng của tháng hiện tại tương ứng với các công tơ điện. Hệ thống tự động lưu lại số liệu và xuất hóa đơn báo tiền điện cho khách hàng xem. Khách hàng nhận hóa đơn tiền điện sau khi xác nhận thanh toán hóa đơn và điền đầy đủ thông tin thanh toán.

Số liệu khách hàng nhập vào là chỉ số hiện tại trên công tơ của khách hàng đang sử dụng, được gọi là chỉ số mới, khi nhập vào hệ thống sẽ kiểm tra hợp lệ của chỉ số này, chỉ số này phải lớn hơn không và lớn hơn chỉ số đã nhập của tháng trước. Khi số liệu hợp lệ thì hệ thống mới lưu lại và xuất hóa đơn cho khách hàng và căn cứ vào đó để xuất hóa đơn cho tháng kế tiếp.

3.2.1.7 Trang xem hóa đơn

Trang xem hóa đơn liệt kê tất cả hóa đơn từ khi khách hàng đăng ký sử dụng điện. Khách hàng có thể tìm kiếm hóa đơn theo nhiều tiêu chí như: mã hóa đơn, trạng thái hóa đơn đã thanh toán hay chưa, hay tháng, năm của ngày lập hóa đơn. Khách hàng có thể in hóa đơn để xem, hoặc để đối chứng khi cần thiết.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng (adsbygoogle = window.adsbygoogle || []).push({});

MSCB: 2301 Trang 55 MSSV: 1111517

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 56 MSSV: 1111517

3.2.1.8 Bản in hóa đơn

Trên danh sách các hóa đơn khách hàng đã thanh toán, chọn một hoặc nhiều hóa đơn khách hàng muốn in và nhấn in hóa đơn.

Hình 3.40 - Bản in hóa đơn

Bản in hóa đơn bao gồm nhiều thông tin: ngày bắt đầu và kết thúc của kỳ thu tiền điện, địa chỉ và số điện thoại của khách hàng, mã công tơ điện của hóa đơn tương ứng, chỉ số mới, chỉ số cũ và điện năng tiêu thụ trong tháng, các chi tiết thanh toán như thuế, tổng tiền trước thuế và tổng tiền sau thuế.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 57 MSSV: 1111517

3.2.2 Giao diện nhân viên

3.2.2.1 Trang quản lý nhân viên

Hình 3.41 - Trang quản lý nhân viên

Trang quản lý nhân viên có chức năng quản lý toàn thể nhân viên trong cơ quan, có thể thêm nhân viên mới vào, sử thông tin nhân viên và xóa nhân viên, phân quyền sử dụng của nhân viên khi đăng nhập vào hệ thống.

3.2.2.2 Trang quản lý khách hàng

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 58 MSSV: 1111517

Trang quản lý khách hàng có thể thêm khách hàng mới vào hệ thống, sửa, xóa thông tin khách hàng và tìm kiếm khách hàng.

3.2.2.3 Trang quản lý công tơ điện

Hình 3.43 - Trang quản lý công tơ điện

Trang quản lý công tơ điện có chức năng thêm công tơ điện mới vào hệ thống, sửa thông tin công tơ điện và xóa các công tơ điện không còn sử dụng. Ngoài ra còn có thể tìm tiếm công tơ điện theo nhiều điều kiện tìm kiếm khác nhau.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 59 MSSV: 1111517

3.2.2.4 Trang nhập số liệu điện năng tiêu thụ

Hình 3.44 - Trang nhập chỉ số điện năng tiêu thụ

Ngoài việc khách hàng đã nhập số liệu điện năng tiêu thụ của mình, bên cạnh đó nhân viên cũng có thể nhập số liệu tiêu thụ của khách hàng đối với các trường hợp khách hàng chưa hoặc không nhập được số liệu của mình.

3.2.2.5 Trang xem thông tin hóa đơn

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 60 MSSV: 1111517

Trang xem thông tin hóa đơn của nhân viên liệt kê tất cả các hóa đơn của tất cả khách hàng, có thể tìm kiếm hóa đơn theo mã hóa đơn, họ tên khách hàng, mã công tơ điện, trạng thái hóa đơn.

3.2.2.6 Trang lập báo cáo thống kê (adsbygoogle = window.adsbygoogle || []).push({});

Trang lập báo cáo thống kê sẽ thống kê lại tất cả lượng điện năng tiêu thụ và doanh thu trong suốt quá trình cung cấp điện cho khách hàng. Thống kê được phân theo nhóm mục đích sử dụng và mục đích sử dụng.

Có thể lọc ra để xem lượng điện và doanh thu chi tiết theo từng tháng, năm và tổng lượng điện, doanh thu của tháng, năm đó.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 61 MSSV: 1111517

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

1 KẾT QUẢ ĐẠT ĐƯỢC

Một phần do tiếp xúc được các hình thức hoạt động bên ngoài của việc thu tiền điện như nhân viên ghi chỉ số điện, thanh toán hóa đơn giúp cho việc phát triển đề tài có phần thuận lợi.

Về phần phân tích và thiết kế

Phần phân tích đề tài tương đối đầy đủ, thu thập nhiều thông tin liên quan đến hoạt động của hệ thống.

Thiết kế cơ sở dữ liệu rõ ràng nên quá trình cài đặt (lập trình) không gặp lỗi.

Về phần lập cài đặt lập trình hệ thống

Quá tình tìm hiểu lý thuyết để áp dụng vào xử lý bài toán nhanh chóng, tìm hiểu đầy đủ các loại lỗi trong quá trình cài đặt và hướng giải quyết.

Thiết kế, lập trình tốt, đầy đủ chức năng các trang quan trọng như trang dành cho khách hàng, các thông, chức năng tin liên quan đến khách hàng. Giao diện nhân viên quản lý với các chức năng hoạt động tốt và dễ dàng sử dụng

Thiết kế được hóa đơn thanh toán tiền điện tương đối đầy đủ thông tin, hóa đơn thanh toán được tính theo giá bậc thang, lập được các báo cáo về lượng điện tiêu thụ và doanh thu tiền điện hằng năm, phân theo tháng, mục đích sử dụng của công tơ điện.

Thêm được thông tin khách hàng, nhân viên, công tơ điện, mục đích sử dụng điện với một hay nhiều mức giá, tối đa là sáu mức.

2 HẠN CHẾ

Mặc khác, hoạt động của cơ quan về việc thu tiền điện được bảo mật nên việc tìm hiểu thông tin tường tận bị hạn chế, gặp nhiều khó khăn, việc thiết kế phần mềm có phần dựa trên ý tưởng các nhân hoặc tham khảo sơ qua các đề tài cùng nội dung trên internet, phần giao diện không được hoàn thiện.

Quá trình tìm hiểu, phát triển đề tài không tập trung được hoàn toàn thời gian do nhiều công việc cá nhân.

Trong quá trình học tập chưa tích lũy được nhiều kinh nghiệm do chưa được tiếp xúc với môi trường ngoài thực tế mà chủ yếu là kinh nghiệm của các thầy cô giảng dạy, tuy nhiên qua thời gian tìm hiểu và phát triển đề tài cũng tích lũy được nhiều kinh nghiệm qua đó có thể tham gia vào các dự án lớn hơn.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 62 MSSV: 1111517

3 HƯỚNG PHÁT TRIỂN

Hoàn thiện thêm các chức năng hoạt động chưa được tốt và mở rộng thêm các chức năng khác như gửi hóa đơn, xác nhận thanh toán qua email, để đáp ứng tất cả nhu cầu của người sử dụng qua đó có thể triển khai sử dụng hệ thống trên các điểm quản lý thu tiền điện.

Hướng phát triển:

 Khắc phục các nhược điểm, các chức năng chưa thực hiện được, hoàn thiện chương trình tốt hơn.

 Sử dụng các công nghệ về web mới, thời gian xử lý nhanh chóng.

 Xây dựng giao diện đẹp, thân thiện hơn để thu hút khách hàng truy cập vào hệ thống.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 63 MSSV: 1111517

TÀI LIỆU THAM KHẢO (adsbygoogle = window.adsbygoogle || []).push({});

Tiếng Việt

[1] Jesse Cravens and Thomas Q Brady. Building Web Apps with Ember.js. Published by O’Reilly Media, Inc, 1005 Gravenstein Highway North, Sebastopol, CA 95472 July 2014.

[2] Phạm Thị Xuân Lộc. Phân tích hệ thốn hướng đối tượng, 2009.

[3] Shelley Powers. Learning Node. Published by O’Reilly Media, Inc., 1005

Gravenstein Highway North, Sebastopol, CA 95472 September 2012.

[4]Trần Đình Quế - Nguyễn Mạnh Sơn. Phân tích, thiết kế hệ thống thông tin, 2007.

[5] Một số Website hướng dẫn, kỹ năng lập trình, kiểm tra lỗi:

http://www.sinhvienit.net

http://stackoverflow.com

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 64 MSSV: 1111517

PHỤ LỤC

A. Cấu hình Zend Studio để tạo dự án Node.js

1. Cấu hình Zend Studio(đối với Zend Studio 10.5)

Hình 1 – Giao diện Zend Studio 10.5

Cài đặt thêm plugin mở rộng để phát triển dự án Node.js

Khởi động Zend Studio 10.5, vào Help > Install New Software

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 65 MSSV: 1111517

Bước kế tiếp:

Dán liên kết http://www.nodeclipse.org/updates/ vào textbox Work with sau đó Zend Studio tự động tìm và liệt kê ra danh sách các plugin có sẵn, chọn phần bổ trợ, liên quan cho việc phát triển Node.js

Nhấn Next để tiếp tục.

Hình 3 – Cửa sổ cài đặt plugin bổ trợ 2

Đợi hệ thống kiểm tra xem Zend Studio đã cài đặt hay chưa, nếu chưa thì việc cài đặt mới được tiến hành.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 66 MSSV: 1111517

Hình 4 – Cửa sổ cài đặt plugin bổ trợ 3

Bước cuối cùng chấp nhận các điều khoản sử dụng nhấn Finsh và đợi việc cài đặt kết thúc.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 67 MSSV: 1111517 (adsbygoogle = window.adsbygoogle || []).push({});

2. Tạo dự án Node.js trên Zend Studio

Sau khi cài đặt các plugin hỗ trợ thành công, để tạo dự án Node.js, khởi động Zend Studio 10.5, vào File > New > Other

Hình 6 – Cửa sổ tạo dự án 1

Chọn loại dự án là Node.js Project hoặc Node.js Express Project ở thư mục

Nodeclipse. Nếu chọn Node.js Express Project dự án sẽ hỗ trợ thêm framework

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 68 MSSV: 1111517

Hình 7 – Cửa sổ tạo dự án 2

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 69 MSSV: 1111517

Hình 8 – Cửa sổ tạo dự án 3

Ở bước này, đặt tên dự án vào textbox Project name. Ở phần Template Engine chọn ejs(mặc định sẽ chọn Jade). Ở Stylesheet Engine sẽ chọn CSS.

Nhấn Finsh để kết thúc việc tạo dự án.

Sau khi tạo thành công dự án, các thư mục và tập tin cần thiết cũng được tạo chung trong dự án.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 70 MSSV: 1111517

Hình 9 – Kết quả tạo dự án trên Zend Studio 10.5

Tập tin app.js để cấu hình dự án, xác định địa chỉ ip, cổng của server và include các mô-đun cần thiết cho việc phát triển dự án.

Chạy dự án để kiểm tra, nhấn phải vào tập tin app.js chọn Run As > Node Application.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 71 MSSV: 1111517

Hình 10 – Chạy dự án Node.js

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 72 MSSV: 1111517

Cửa sổ Console sẽ ghi lại tất cả nhật ký hoạt động của server, nếu bắt gặp lệnh

console.log(). Hiện tại, server đã lắng nghe(chờ) kết nối từ client đến server ở cổng 3000.

Vào trình duyệt để kiểm tra.

Hình 12 - Kết quả chạy dự án trên trình duyệt

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 73 MSSV: 1111517 (adsbygoogle = window.adsbygoogle || []).push({});

B. Giao diện bổ sung

1. Giao diện khách hàng

1.1 Xem thông tin trạm biếp áp

Hình 13 - Trang xem thông tin các trạm biến áp

Trang xem thông tin trạm biến áp hiện thị các trạm biến áp mà cơ quan đang quản lý.

1.2 Trang gửi ý kiến phản hồi

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 74 MSSV: 1111517

Khác hàng có thể gửi ý kiến phản hồi của mình, hay mọi thắc mắc có liên quan đến nhân viên, cơ quan, đến việc thu tiền điện thông qua trang gửi ý kiến phản hồi.

Sau khi đăng nhập, khách hàng vào chức năng hỏi và đáp, viết ý kiến của mình sau đó gửi lên hệ thống và đợi phản hồi từ nhân viên của cơ quan.

1.3 Trang hỏi và đáp

Hình 15 - Trang hỏi và đáp

Trang hỏi và đáp còn liệt kê tất cả các câu hỏi của tất cả khách hàng và phản hồi của nhân viên để khách hàng có thể tham khảo.

GVHD: Th.S Lê Minh Lý SV: Nguyễn Hải Đăng

MSCB: 2301 Trang 75 MSSV: 1111517

2. Giao diện nhân viên quản lý

2.1 Trang thêm công tơ điện

Hình 16 - Trang thêm công tơ điện

Trang thêm công tơ điện có chức năng thêm công tơ điện mới cho khách hàng, phần khách hàng có xác định khách hàng mới hay khách hàng cũ. Nếu là khách hàng cũ thì nhập mã khách hàng, kiểm tra thông tin nếu đúng thì thêm công tơ điện cho khách hàng cũ đăng tồn tại trong hệ thống. Ngược lại nếu là khách hàng mới thì hệ thống thêm thông tin khách hàng mới, sau đó thêm công tơ điện cho khách hàng. Bên cạnh đó, hệ thống tạo thêm tài khoản cho khách hàng truy cập vào website với tên đăng nhập và mật khẩu

Một phần của tài liệu xây dựng website quản lý việc thu tiền điện phường an hòa, tp cần thơ (Trang 60)