CHƯƠNG 1. PKHẢO SÁT VÀ PHÂN TÍCH BÀI TOÁN 1. Phát biểu bài toán Website được xây dựng một các rõ ràng, dễ nhìn, dễ điều khiển và sắp xếp được các sản phẩm một cách hợp lí theo từng nhóm l ớn để người mua có thể dễ dàng trong việc truy cập, thao tác, quan sát và mua sản phẩm, ngoài ra cần chức năng liên hệ để thuận tiện cho việc trao đổi với chủ trang web và trang giới thiệu để nói lên được sơ lượt về trang web. Sau khi người mua đăng kí thành viên có thể mua được những sản phẩm của trang web, thấy được chi tiết của các sản phẩm đang được bán trên trang web và thực hiện được nhiều chức năng của trang web hơn.
Phân tích các chức năng STT CHỨC NĂNG MÔ TẢ Giới thiệu tổng quan về trang web, trang web bán 1 Giới thiệu sản phẩm gì. Đưa ra các thông tin của chủ trang web như số 2 Liên hệ điện thoại, email để khách hàng tiện lợi trong việc liên hệ. Giúp khách hàng có thể đăng ký được thành viên 3 Đăng ký của trang web. Giúp người mua đăng nhập được vào trang web từ 4 Đăng nhập tài khoản đã đăng ký.
Phân loại các s ản phẩm trong cùng một nhóm lại 5 Phân loại sản phẩm với nhau, tạo thành nhiều nhóm để người mua có thể dễ dàng chọn lựa. Chỉ ra khách hàng được các chi tiết của một sản 6 Chi tiết sản phẩm phẩm từ tên của sản phẩm, tác giả, giá, nhà xuất bản,. khách hàng có thể đặt mua trên trang này. Thiết kế giao diện CHƯƠNG 2.
THIẾT KẾ GIAO DIỆN 2. Giao diện trang chủ.1: Giao diện trang chủ 1. Gồm có các trang như sau: Trang chủ, Giới thiệu, Liên hệ, Sách giáo khoa và tham khảo, Văn học, Đăng nhập, Đăng ký. Trên trang chủ còn hiển thị menu bao gồm các trang Sách giáo khoa, Sách tha m khảo, Sách bài tập, Văn học Việt Nam, Văn học nước ngoài.
Bên cạnh đó trang còn có các slider hình ảnh quảng cáo, và các danh mục sản phẩm đang bán chạy và sản phẩm mới để người mua có thể theo dỗi. Thiết kế giao diện Người dùng click chuột chọn vào các thẻ tương ứng để chọn được các mục mình mong muốn.2: Giao diện trang chủ 2. Giao diện trang đăng ký thành viên.3: Giao diện trang đăng ký. - Ý nghĩa hoạt động: Đăng kí thành viên để sử dụng được nhiều chức năng của trang web hơn.
Thiết kế giao diện - Quy tắc hoạt động: Khách hàng muốn đăng kí thành viên để có thể mua được sản phẩm cần phải tạo một tài khoản. Điền tất cả thông tin mà trang web yêu cầu để có thể tạo được một tài khoản. - Các thao tác màn hình: Người dùng nhập địa chỉ email, mật khẩu, nhập lại mật khẩu, nhập vào họ tên, số điện thoại và ngày tháng năm sinh sau đó nhấn vào nút Đăng kí để tạo tài khoản. Giao diện trang đăng nhập.4: Giao diện trang đăng nhập.
- Ý nghĩa hoạt động: Đăng nhập vào trang web. - Quy tắc hoạt động: Khách hàng s ử dụng email và mật khẩu đã đăng kí trước rồi đăng nhập vào hệ thống bằng cách gõ thông tin email và mật khẩu vào khung mẫu. Khi đăng nhập vào thành công thì khách hàng có thể xem và mua sản phẩm. - Các thao tác màn hình: Khách hàng nhập email và mật khẩu đúng vào các ô sau đó bấm vào nút đăng nhập để có thể đăng nhập vào trang web.
Giao diện trang giới thiệu. Thiết kế giao diện Hình 2.5: Giao diện trang giới thiệu. - Ý nghĩa hoạt động: Đây là trang để giới thiệu sơ lượt về trang web. - Quy tắc hoạt động: Trang này hiện thị thông tin về các loại sách mà cửa hàng đang bán, các tiêu chí và phương châm của trang web.
- Thao tác màn hình: Click chuột vào phần Giới thiệu trên thanh điều hướng để có thể đến được trang web, từ trang này có thể đến được các trang khác bằng cách click vào ô tương ứng trên thanh điều hướng 2. Giao diện trang liên hệ. - Ý nghĩa hoạt đông: Đưa ra các thông tin email, số điện thoại của trang web để khách hàng có thể dễ dàng liên hệ. - Quy tắc hoạt động: Khác hàng có thể sử dụng các thông tin hiển thị trên trang web để liên lạc, đặt câu hỏi và có bất kì thiếu nại nào với trang web.
Thiết kế giao diện - Thao tác màn hình: Click chuột vào phần Liên hệ trên thanh điều hướng để có thể đến được trang web, từ trang này có thể đến được các trang khác bằng cách click vào ô tương ứng trên thanh điều hướng Hình 2.6: Giao diện trang liên hệ. Giao diện trang sách giáo khoa. - Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách giáo khoa cho người mua lựa chọn dễ dàng hơn. - Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách giáo khoa được hiển thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các trang khác, ngoài ra còn có menu để đến được trang các loại sách khác. Để mua sản phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm. Thiết kế giao diện Hình 2.7: Giao diện trang sách giáo khoa. Thiết kế giao diện 2.
Giao diện trang sách tham khảo.8: Giao diện trang sách tham khảo. - Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách tham khảo cho người mua lựa chọn dễ dàng hơn. - Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách tham khảo được hiển thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm. - Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các trang khác, ngoài ra còn có menu để đến được trang các loại sách khác.
Để mua sản 9 0 0 Chương 2. Thiết kế giao diện phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm. Giao diện trang sách bài tập.9: Giao diện trang sách bài t ập. - Ý nghĩa hoạt đông: Trang này chỉ hiển thị loại sách tham khảo cho người mua lựa chọn dễ dàng hơn.
- Quy tắc hoạt động: Khách hàng có thể lựa chọn và mua sách bài tập được hiển thị trên trang, các sản phẩm được hiển thị theo tên và có để giá cho từng sản phẩm. - Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các trang khác, ngoài ra còn có menu để đến được trang các loại sách khác. Để mua sản 10 0 0 Chương 2. Thiết kế giao diện phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm.
Giao diện trang Văn học Việt Nam.10: Giao diện trang Văn học Việt Nam. Thiết kế giao diện - Ý nghĩa hoạt động: Trang này hiển thị các tác phẩm văn học Việt Nam với nhiều thể loại truyện ngắn, tiểu thuyết, tùy bút,… để người đọc có thể lựa chọn. - Quy tắc hoạt động: Sách văn học Việt Nam được để tên, bìa sách và cả giá sách, khác hàng có thể xem được tổng quan trang web có bao nhiêu sản phẩm về văn học Việt Nam từ nhiều giai đoạn khác nhau. - Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các trang khác, ngoài ra còn có menu để đến được trang các loại sách khác.
Để mua sản phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm. Giao diện trang văn học nước ngoài.11: Giao diện trang văn học nước ngoài. Thiết kế giao diện - Ý nghĩa hoạt động: Trang này hiển thị các tác phẩm văn học nước ngoài với nhiều thể loại truyện ngắn, tiểu thuyết, tùy bút,… từ nhiều quốc gia khác nhau, để người đọc có thể thoải mái lựa chọn. - Quy tắc hoạt động: Sách văn học nước ngoài được để tên, bìa sách và cả giá sách, khác hàng có thể xem được tổng quan trang web có bao nhiêu sản phẩm về văn học nước ngoài từ nhiều quốc gia khác nhau.
- Thao tác màn hình: Khác hàng có thể sử dụng thanh điều hướng để đến được các trang khác, ngoài ra còn có menu để đến được trang các loại sách khác. Để mua sản phẩm được hiển thị khác hàng bấm và nút đặc mua bên dưới giá, để biết được chi tiết của sản phẩm có thể bấm vào tên sản phẩm để đến được trang chi tiết sản phẩm. Giao diện trang chi tiết sản phẩm.12: Giao diện trang chi tiết sản phẩm. Thiết kế giao diện - Ý nghĩa hoạt động: Trang này hiển thị chi tiết của sản phẩm được bán trong trang web.
- Quy tắc hoạt động: Trang hiển thị cụ thể tất cả chi tiết của sản phẩm bao gồm: tên sản phẩm, hình sản phẩm, tác giả của sản phẩm, thể loại của sản phẩm, nhà xuất bản sản phẩm, giá sản phẩm, và giới thiệu sơ lượt về sản phẩm. - Thao tác màn hình: Khác hàng có thể xem các giới thiệu chi tiết sản phẩm và có thể mua sản phẩm bằng cách chọn nút Đặc mua. Thiết kế chương trình CHƯƠNG 3. THIẾT KẾ CHƯƠNG TRÌNH 3.
Source code HTML. <!doctype html> <html> <head> <meta charset="utf-8" name="viewport" content="width = device-width, initial- scale = 1"> <!-- TemplateBeginEditable name="doctitle" --> <title>Untitled Document</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <link rel="shortcut icon" href=".png"> <link type="text/css" rel="stylesheet" href=".css"> <link rel="stylesheet" href="https://maxcdn.css"> <script src="https://ajax.com/ajax/libs/jquery/3.js"></script> <script src="https://maxcdn.js"></script> </head> <body> <header class="container"> <img src=".png" id="banner"> <a href=".html"><img src=".png" id="logo"></a> <div id="dangnhap"> <a href="Dangnhap.html">Đăng nhập</a> | <a href="Dangky.html">Đăng ký</a> </div> </header> <!-- TemplateBeginEditable name="nav" --> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container"> 15 0 0 Chương 3. Thiết kế chương trình <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="#navbar1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href=".html">SI's BOOKSTORE</a> </div> <div class="collapse navbar-collapse" id="navbar1"> <ul class="nav navbar-nav"> <li><a href=".html">TRANG CHỦ</a> </li> <li><a href=".html">GIỚI THIỆU</a> </li> <li><a href=".html">LIÊN HỆ</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria- haspopup="true">SÁCH GIÁO KHOA VÀ THAM KHẢO<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href=".html">Sách giáo khoa</a> </li> <li role="separator" class="divider"></li> <li><a href=".html">Sách tham khảo</a> </li> <li role="separator" class="divider"></li> <li><a href=".html">Sách bài tập</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria- haspopup="true">VĂN HỌC<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href=".