Thiết kế giao diện và cài đặt chương trình
Bảng các điều khiển sử dụng trong chương trình STT Tên thành phần Chức năng asp:Label Dùng để mô tả thông tin ...
| STT | Tên thành phần | Chức năng |
| asp:Label | Dùng để mô tả thông tin | |
| asp:TextBox | Dùng để chứa dữ liệu và load dữ liệu | |
| asp:Button | Dùng để thực thi các chức năng | |
| asp:LinkButton | Dùng để thực thi các chức năng | |
| asp:ImageButton | Dùng để thực thi các chức năng | |
| asp:HyperLink | Dùng để tạo các siêu liên kết | |
| asp:DropDownList | Dùng để chứa các lựa chọn | |
| asp:CheckBox | Dùng để đánh dấu các lựa chọn | |
| asp:Image | Dùng để hiển thị một hình ảnh | |
| asp:HiddenField | Dùng để chứa dữ liệu ẩn | |
| asp:Calendar | Dùng để một bảng lịch | |
| asp:FileUpload | Dùng để tạo một điều khiển Upload dữ liệu | |
| asp:MultiView | Dùng để tạo nhiều khung nhìn | |
| asp:View | Dùng để tạo một khung nhìn | |
| asp:GridView | Dùng để load dữ liệu dạng bảng | |
| asp:DataList | Dùng để load dữ liệu kiểu danh sách | |
| asp:FormView | Dùng để load dữ liệu theo kiểu form | |
| asp:Repeater | Dùng để load dữ liệu | |
| asp:SqlDataSource | Dùng để tạo một nguồn dữ liệu | |
| asp:RequiredFieldValidator | Dùng để kiểm tra có dữ liệu nhập vào không | |
| asp:RegularExpressionValidator | Dùng để kiểm tra giá trị nhập vào theo một công thức có sẵn | |
| asp:CompareValidator | Dùng để so sánh dữ liệu nhập giữa các điều khiển | |
| asp:ValidationSummary | Dùng để hiển thị thông báo của các điều khiển kiểm tra |
Giao diện chương trình chính
Giao diện chương trình hiển thị tất cả các menu chức năng của hệ thống cho phép người dùng thao tác với hệ thống. Tùy theo từng quyền của người dùng mà khi đăng nhập vào hệ thống mà chương trình hiển thị chức năng tương ứng. Những người không phải là admin của hệ thống thì không có quyền truy cập vào trang “ Quản trị ” của hệ thống.
Giao diện chính của chương trình
Đăng nhập
Giao diện đăng nhập Người dùng muốn vào hệ thống của mình thì phải đăng nhập đúng theo tài khoản của mình đã được quản trị hệ thống cấp.
a. Tại chức năng đăng nhập người dùng nào chưa có tài khoản để đăng nhập vào hệ thống thì click vào link “ Bạn chưa có tài khoản ” và nhập đầy đủ các thông tin và đúng định dạng thì mới đăng ký thành công.
Giao diện đăng ký thông tin truy cập website
b. Khi đăng nhập thành công nếu muốn thay đổi mật khẩu khi vẫn nhớ mật khẩu cũ thì người dùng có thể thay đổi bằng cách click vào mục “ Đổi mật khẩu” 
Giao diện click để đổi mật khẩu
Khi đã click vào “ Đổi mật khẩu ” thì lúc này người dùng phải điền đầy đủ chính xác một số thông tin yêu cầu thì mới thay đổi được mật khẩu.
Giao diện thay đổi mật khẩu
c. Tại giao diện click để đổi mật khẩu, người dùng cũng có thể thông tin cá nhân bằng cách click vào “ Thông tin cá nhân ”. Bảng thông tin cá nhân hiện ra. Click vào nút “ Thay đổi ” và thay đổi thông tin mà người dùng muốn thay đổi.
Giao diện thay đổi thông tin cá nhân
Tìm kiếm sản phẩm
Ở giao diện trang chủ người dùng có thể tìm kiếm sản phẩm mình mong muốn bằng 2 cách:
- Tìm kiếm theo tên sản phẩm.
Tại đây người dùng sẽ nhập tên hãng điện thoại, tên điện thoại hoặc 1 hay nhiều ký tự liên quan đến sản phẩm mà người dùng muốn tìm.
Giao diện tìm kiếm theo tên sản phẩm
- Tìm kiếm theo giá tiền sản phẩm
Giao diện tìm kiếm theo giá tiền sản phẩmTên trang chủ người dùng chỉ cần click vào mức giá phù hợp với nhu cầu của mình thì sẽ tìm được những sản phẩm ưng ý.
Trang tin tức
Tại trang chủ nếu người dùng muốn xem tin tức về các loại sản phẩm trên thị trường thì chỉ cần click vào chức năng “Tin tức”.
Giao diện tin tức
Giao diện chức năng giỏ hàng
Mua hàng là nội dung chính của một website bán hàng trực tuyến. Khi người dùng muốn mua sản phẩm nào thì chỉ cần click vào nút “giỏ hàng”
Giao diện thêm sản phẩm vào giỏ hàng
Khi người dùng đã thêm vào giỏ hàng những sản phẩm mình muốn, để xem thông tin về đơn hàng của mình, người dùng click vào chức năng “giỏ hàng”. Ở đây sẽ lưu lại tất cả những sản phẩm mà người dùng đã chọn mua. Người dùng có thể :
- Thêm bớt số lượng muốn mua bằng cách: Trên giao diện giỏ hàng nhập số lượng muốn mua vào ô “số lượng” sau đó click vào nút “Cập nhật giỏ hàng”
- Thực hiện tiếp việc lựa chọn mua các mặt hàng khác bằng cách: Trên giao diện giỏ hàng click vào nút “Tiếp tục mua hàng”.
- Thực hiện xóa các mặt hàng đã chọn mua trước đó bằng cách: Trên giao hiện giỏ hàng click vào nút “Xóa toàn bộ giỏ hàng”
- Khi người dùng đã có cho mình một đơn hàng vừa ý, muốn thanh toán đơn hàng thì trên giao diện giỏ hàng click vào nút “Thanh toán đơn hà
Giao diện giỏ hàng
Giao diện liên hệ - góp ý
Khi người dùng có thắc mắc hay góp ý về website thì trên giao diện trang chủ, click vào chức năng “Liên hệ”
- Sau khi điền đầy đủ thông tin ở trang liên hệ - góp ý thì click nút “Gửi” để gửi góp ý tới website.
Giao diện góp ý
Giao diện trang quản trị (admin)
Khi đăng nhập website bằng tài khoản admin thì người dùng có thể truy cập vào trang quản trị của hệ thống.
Giao diện trang admin
Tại giao diện này người quản trị có thể lựa chọn để quản trị các chức năng của website
- Chức năng “Người sử dụng” để quản lý tài khoản người sử dụng. Tại đây người quản trị có thể kìm kiếm tên đăng nhập hay hiển thị toàn bộ tên đăng nhập đã truy cập vào website; ngoài ra có thể cập nhật, thêm mới và xóa thông tin người sử dụng
- Click vào nút X có màu đỏ: Xóa tài khoản người sử dụng
- Click vào nút bút vẽ : Xem hoặc sửa thông tin tài khoản người sử dụng
- Sau khi đã điền đầy đủ thông tin vào bảng “Thông tin người sử dụng” thì click vào nút cập nhật / thêm mới để cập nhật hoặc thêm mới tài khoản người sử dụng.
Giao diện chức năng người sử dụng
- Chức năng “Góp ý / Liên hệ” để quản lý tất cả các ý kiến đóng góp, liên hệ của khách hàng với website.
Giao diện chức năng góp ý / liên hệ
- Chức năng “Tin tức” để quản lý tất cả các bản tin trên website. Tại đây người quản trị có thể thêm, sửa, xóa các bản tin.
- Trên giao diện “Tin tức” muốn xóa bản tin click vào nút X . Còn muốn sửa bản tin thì click vào nút bút vẽ
Giao diện sửa, xóa bản tin
- Trên giao diện “Tin tức” người quản trị có thể nhập nội dung bản tin muốn đăng
Giao diện nhập nội dung bản tin
- Trên giao diện “Tin tức” người quản trị có thể lựa chọn ngày tháng đăng tin, load ảnh lên bản tin rồi sau đó cập nhật, thêm mới bản tin.
Giao diện cập nhật, thêm mới bản tin
- Chức năng “Nhà sản xuất” để quản lý thông tin tất cả các nhà sản xuất cung cấp sản phẩm cho website. Tại đây người quản trị có thể thêm, sửa, xóa và cập nhật nhà sản xuất mình muốn.
- Click vào X màu đỏ : Xóa thông tin nhà sản xuất nhà sản xuất
- Click vào bút vẽ : Xem và sửa thông tin nhà sản xuất
- Click vào nút “Cập nhật” hoặc “Thêm mới” khi đã điền đầy đủ thông tin vào bảng “Chi tiết nhà sản xuất”.
Giao diện chức năng nhà sản xuất
- Chức năng “Điện thoại” để quản lý thông tin điện thoại được bán trên website.
- Trên giao diện “Điện thoại” muốn xóa sản phẩm thì click vào nút X. Nếu muốn xem hoặc sửa thông tin điện thoại thì click nút bút vẽ.
Giao diện sửa, xóa sản phẩm
- Trên giao diện “Điện thoại” người quản trị có thể nhập các thông tin, upload ảnh cho điện thoại trong bảng “Chi tiết điện thoại”. Sau đó click nút “Cập nhật” hoặc “Thêm mới” nếu muốn thêm sản phẩm. Còn không muốn thêm sản phẩm click nút “Hủy”
Giao diện chi tiết điện thoại
- Chức năng “Đơn hàng” để quản lý đơn hàng của người dùng.
- Trên giao diện “Đơn hàng” muốn xóa đơn hàng thì click vào X.
- Muốn xem hay sửa đơn hàng thì click vào bút vẽ sau đó ấn nút “Cập nhật”.
Giao diện sửa, xóa đơn hàng
- Chức năng “Đơn hàng” còn cho phép cập nhật thêm đơn hàng mới bằng cách ghi đầy đủ thông tin vào bẳng chi tiết đơn hàng rồi click nút “Cập nhật”.
Giao diện thêm mới đơn hàng
Chức năng “Doanh thu” để thống kê doanh thu hàng tháng của công ty.
Giao diện doanh thu
