Đồ án môn học lập trình web xây dựng website bán mô hình lắp ghép

Website bán mô hình lắp ghép có các tính năng của một website bán hàng thông thường như giỏ hàng, trang chủ, danh mục sản phẩm, chi tiết sản phẩm,..... + Trang chủ: Đưa ra các sản phẩm t

VIỆN KỸ THUẬT – CÔNG NGHỆ

ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB

XÂY DỰNG WEBSITE

BÁN MÔ HÌNH LẮP GHÉP

GVHD: THS NGUYỄN HỮU VĨNH SVTH: NGUYỄN MINH HÙNG MSSV: 1824801030141

LỚP: D18PM03

VIỆN KỸ THUẬT – CÔNG NGHỆ NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh

Tên đề tài: XÂY DỰNG WEBSITE BÁN MÔ HÌNH LẮP GHÉP Nội dung nhận xét:

Điểm:

Bằng số:

Bằng chữ:

GIẢNG VIÊN CHẤM

(Ký, ghi rõ họ tên)

NGUYỄN HỮU VĨNH

LỜI NÓI ĐẦU

dựng webste thương mại điện tử để kinh doanh là một trong những lựa chọn thông mình nhất.

Trong mỗi con người hiện nay, ai cũng có ít nhất một đam mê riêng của mình Ngoài công việc hằng ngày ra thì chúng ta vẫn còn một đam mê nhỏ nào đó chẳng hạn như mô hình lắp ghép Mô hình lắp ghép là một loại đồ chơi, một loại đam mê của một số người yêu thích kỹ thuật và nghệ thuật đồng thời cũng đòi hỏi sự cẩn thận tỉ mỉ đối với loại hình này

Việc tìm kiếm được những mô hình lắp ghép đẹp và đảm bảo được chất lượng hiện nay khá khó khăn với nhiều người Vì thế website bán mô hình lắp ghép xuất hiện nhằm phục vụ đam mê, sở thích của mọi người cũng như đảm bảo được chất lượng của sản phẩm Website bán mô hình lắp ghép có các tính năng của một website bán hàng thông thường như giỏ hàng, trang chủ, danh mục sản phẩm, chi tiết sản phẩm,

Đề tài tiểu luận gồm các phần được phân chương như sau:

Chương 1: Tổng quan về đề tài

Chương 2: Giới thiệu công nghệ

Chương 3: Cơ sở dữ liệu

Chương 4: Giao diện website

Chương 5: Kết luận và hướng phát triển

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN 7

1 Tên Đề Tài 7

2 Mục Tiêu của Đề Tài 7

3 Ý Nghĩa Của Đề Tài 7

4 Đối Tượng Của Đề Tài 7

5 Một Số Trang Chính Của Website 7

CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ 8

1 Giới Thiệu Về HTML 8

1.1 HTML là gì? 8

1.2 Công dụng của HTML 8

1.3 Định dạng của HTML 8

2 Giới thiệu về Adobe Dreamweaver 9

3 Ngôn ngữ CSS 9

4 Ngôn ngữ Javascript 10

5 JQuery 10

6 ASP.NET 10

7 ASP.NET MVC 11

8 Entity Framework 11

9 ADO.NET 12

10 Server Side Rendering 12

11 Client Side Rendering 12

CHƯƠNG 3: CƠ SỞ DỮ LIỆU 13

1 Cơ sở dữ liệu 13

2 Sản phẩm 13

3 Danh mục sản phẩm 14

4 Tài khoản 14

5 Slide 14

6 Giỏ hàng 15

7 Chi tiết giỏ hàng 15

CHƯƠNG 4: GIAO DIỆN CHƯƠNG TRÌNH 16

1 Cấu trúc Giao diện 16

1.1 Khách hàng 16

1.2 Admin 17

2 Đặc tả Giao diện 18

2.1 Trang chủ 18

2.2 Danh mục sản phẩm 20

2.3 Chi tiết sản phẩm 21

2.4 Đăng nhập 22

2.5 Đăng ký 23

2.6 Giỏ hàng 24

2.7 Thanh toán 25

2.8 Thanh toán thành công 27

2.9 Về chúng tôi 28

2.10 Đăng nhập (Admin) 29

2.11 Trang chủ (Admin) 30

2.12 Thêm tài khoản (Admin) 31

2.13 Danh sách tài khoản (Admin) 32

2.14 Sửa tài khoản (Admin) 33

2.15 Thêm sản phẩm (Admin) 34

2.16 Danh sách sản phẩm (Admin) 35

2.17 Sửa sản phẩm (Admin) 36

2.18 Danh sách đơn hàng (Admin) 37

2.19 Chi tiết đơn hàng (Admin) 38

CHƯƠNG 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 39

1 Kết quả đạt được: 39

2 Việc chưa làm được: 39

3 Hướng phát triển của đề tài 39

TÀI LIỆU THAM KHẢO 40

CHƯƠNG 1: GIỚI THIỆU TỔNG QUAN

1 Tên Đề Tài.

+ XÂY DỰNG WEBSITE BÁN MÔ HÌNH LẮP GHÉP

2 Mục Tiêu của Đề Tài.

+ Thiết kế, xây dựng được website bán mô hình lắp ghép đơn giản, dễ sử dụng đối vớingười dùng

3 Ý Nghĩa Của Đề Tài.

+ Tạo ra nơi mà mọi người có thể thỏa mản được đam mê mô hình của mình

+ Quảng bá thương hiệu

4 Đối Tượng Của Đề Tài.

+ Đối tượng của website chính là những người có niềm đam mê với mô hình, nghệthuật và kỹ thuật

5 Một Số Trang Chính Của Website.

+ Trang chủ: Đưa ra các sản phẩm tiêu biểu để giới thiệu website

+ Danh mục sản phẩm: Đưa ra các sản phẩm cùng loại

+ Chi tiết sản phẩm: Thông tin chi tiết về sản phẩm

+ Đăng nhập: Khách hàng đăng nhập vào website

+ Đăng ký: Khách hàng đăng ký tài khoản

+ Về chúng tôi: Đưa ra thông tin giới thiệu về website

+ Giỏ hàng: Chứa các sản phẩm khách hàng muốn mua

+ Thanh toán: Khách hàng điền thông tin để thanh toán

+ Quản lý đơn hàng: admin quản lý đơn hàng

+ Quản lý tài khoản: admin quản lý tài khoản

+ Quản lý sản phẩm: admin quản lý sản phẩm

+ Admin đăng nhập: admin đăng nhập vào hệ thống

CHƯƠNG 2: GIỚI THIỆU CÔNG NGHỆ

1 Giới Thiệu Về HTML.

1.1 HTML là gì?

HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữđánh dấu chuẩn dùng soạn thảo các tài liệu World Wide Web, chỉ rõ một trang Web đượchiển thị như thế nào trong trình duyệt

Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các trình duyệt (Webbrowsers) cách hiển thị các thành phần của trang như text và graphics

HTML là ngôn ngữ xác định cấu trúc của thông tin

HTML sử dụng một loạt các thẻ và thuộc tính và được dùng để hiện thị văn bản và cácthông tin khác, cung cấp siêu liên kết tới các tài liệu khác

1.2 Công dụng của HTML.

Thiết kế được nội dung và hình thức của trang web

Xuất bản được các tài liệu trực tuyến hay truy xuất các thông tin trực tuyến bằng cáchdùng các liên kết được chèn vào trang web

Tạo ra các biểu mẫu trực tuyến nhằm thu thập các thông tin người dùng, quản lý giaodịch…

Thêm vào đối tượng các hình ảnh video, âm thanh…

Macromedia Dreamweaver 8 là trình biên soạn HTML chuyên nghiệp dùng để thiết kế,viết mã và phát triển website cùng các trang web và các ứng dụng web Cho dù bạn cóthích thú với công việc viết mã HTML thủ công hoặc bạn thích làm việc trong môi trườngbiên soạn trực quan, Dreamweaver cung cấp cho bạn những công cụ hữu ích để nâng caokinh nghiệm thiết kế web của bạn.

Các tính năng biên soạn trực quan trong Dreamweaver cho phép bạn tạo nhanh cáctrang web mà không cần các dòng mã Bạn có thể xem tất cả các thành phần trong websitecủa bạn và kéo chúng trực tiếp từ một panel dễ sử dụng vào 1 văn bản Bạn có thể nâng caosản phẩm của bạn bằng cách tạo và sửa các ảnh trong Macromedia Fireworks hoặc trongứng dụng ảnh khác, rồi sau đó chèn trực tiếp vào Dreamweaver Dreamweaver cũng cungcấp những công cụ giúp đơn giản hóa việc chèn Flash vào trang web

Dreamweaver cũng cho phép bạn Thiết kế các ứng dụng web động dựa theo dữ liệu sửdụng công nghệ máy chủ như CFML, ASP.NET, ASP, JSP, và PHP Nếu sở thích của bạn làlàm việc với dữ liệu XML, Dreamweaver cung cấp những công cụ cho phép bạn dễ dàngtạo các trang XSLT, chèn file XML và hiển thị dữ liệu XML trên trang web của bạn

Dreamweaver có thể tùy biến hoàn toàn Bạn có thể tạo cho riêng mình những đốitượng và yêu cầu, chỉnh sửa shortcut bàn phím và thậm chí viết mã JavaScript để mở rộngnhững khả năng của Dreamweaver với những hành vi mới, những chuyên gia giám địnhProperty mới và những báo cáo site mới

CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài Có hiệu quả đồng bộ khi tạomột website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày nào đó.CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML Được trìnhduyệt diễn dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn

JavaScript là ngôn ngữ dựa trên đối tượng, nghĩa là bao gồm nhiều kiểu đối tượng, ví

dụ đối tượng Math với tất cả các chức năng toán học Nhưng JavaScript không là ngôn ngữhướng đối tượng như C++/Java

jQuery không phải là một ngôn ngữ lập trình riêng biệt mà hoạt động liên kết

với JavaScript Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít công sức hơn jQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiện và thao tác AJAX đơn giản hơn jQuery hoạt động tốt trên nhiều loại trình duyệt khác nhau Một trong những đối thủ nặng ký của jQuery đó là JS Framework

6 ASP.NET.

ASP.Net là một nền tảng dành cho phát triển web, được Microsoft phát hành và cung cấp lần đầu tiên vào năm 2002 Nền tảng được sử dụng để tạo ra các ứng dụng web-based

Phiên bản ASP.Net đầu tiên được triển khai là 1.0 và phiên bản ASP.Net mới nhất là phiên bản 4.6 ASP.Net được thiết kế để tương thích với giao thức HTTP HTTP là giao thức chuẩn được sử dụng trên tất cả các ứng dụng web

Các ứng dụng ASP.Net có thể được viết bằng nhiều ngôn ngữ Net khác nhau Trong

đó có các kiểu ngôn ngữ như C #, VB.Net và J #

ASP viết đầy đủ là Active Server Pages, và NET là viết tắt của Network Enabled Technologies

7 ASP.NET MVC.

ASP.NET MVC là một framework tuyệt vời hỗ trợ pattern MVC cho ASP.NET Nếu bạn muốn hiểu ASP.NET MVC làm việc như thế nào, bạn cần phải có một sự hiểu biết rõ ràng về mô hình MVC MVC là cụm từ viết tắt của Model-View-Controller, nó phân chia pattern của ứng dụng thành 3 phần - model, controller và view

- Model giúp lưu trữ dữ liệu của ứng dụng và trạng thái của nó Nó là một cơ sở

dữ liệu hoặc cũng có thể chỉ là một tập tin XML

- View được coi là một giao diện người dùng được sử dụng bởi khách truy cập trang web của bạn để nhìn thấy các dữ liệu Các trang ASPX thường được sử dụng để hiển thị view trong các ứng dụng ASP.NET MVC

- Controller chịu trách nhiệm xử lý các tương tác của người dùng với trang web

Nó được sử dụng để xác định loại view nào cần phải được hiển thị Controller cũng được sử dụng cho mục đích giao tiếp với model

Framework này là khá nhẹ và cung cấp khả năng kiểm thử, trong đó tích hợp với các tính năng hiện có của ASP.NET như xác thực (authentication) dựa trên membership và cả các master page

8 Entity Framework.

Entity Framework là một khung ORM mã nguồn mở cho các ứng dụng NET được Microsoft hỗ trợ Nó cho phép các nhà phát triển làm việc với dữ liệu bằng cách sử dụng các đối tượng của các lớp cụ thể của miền mà không cần tập trung vào các bảng và cột cơ

sở dữ liệu cơ bản nơi dữ liệu này được lưu trữ Với Entity Framework, các nhà phát triển

có thể làm việc ở mức độ trừu tượng cao hơn khi họ xử lý dữ liệu và có thể tạo và duy trì các ứng dụng hướng dữ liệu với ít mã hơn so với các ứng dụng truyền thống

Định nghĩa chính thức: Khung Entity Ent là một trình ánh xạ quan hệ đối tượng (O /RM) cho phép các nhà phát triển NET làm việc với cơ sở dữ liệu bằng các đối tượng NET Nó loại bỏ sự cần thiết của hầu hết các mã truy cập dữ liệu mà các nhà phát triển thường cần viết

9 ADO.NET.

ADO.NET là một bộ thư viện hướng đối tượng (OOP) cho phép tương tác với dữ liệunguồn Thông thường thì dữ liệu nguồn là một cơ sở dữ liệu (Database), nhưng củng có thể là file text, exel hoặc XML Ở đây ta chỉ xét ADO.NET làm việc với database

ADO.NET là một kỹ thuật NET để thao tác với nguồn dữ liệu Nó là môt tập hợp cáclớp nằm trong bộ thư viện lớp cơ sở của NET Framework

10 Server Side Rendering.

Server-side rendering: các trang web và ứng dụng web được xây dựng trên cơ sở logic của server Trong đó các trang web được lưu trữ trên server Các dòng lệnh HTML, CSS và Javascript được gửi từ server và thể hiện trên trình duyệt web

Ngày nay các công nghệ như ASP.NET và PHP vẫn sử dụng hình mẫu này Mặc dù với sự xuất hiện của các Javascript framework ngày nay Trong đó công nghệ server-side rendering có thể được sử dụng cho client-side rendering

11 Client Side Rendering

Với sự phát triển sức mạnh các trình duyệt và các cỗ máy Javascript trong trình duyệt

Xu hướng hiện nay dần chuyển sang công nghệ client-side rendering

Trong client-side rendering, nội dung của trang web được dựng trên trình duyệt thôngqua Javascript thay vì trên server Web server gửi các dòng lệnh Javascript đến trình duyệt,

và trình duyệt sẽ thực thi các lệnh này trên trang web Bao gồm việc điều khiển, truy xuất

dữ liệu từ server

Javascript được sử dụng để tạo ra và điều khiển các thành phần DOM của trang web Tạo ra các thành phần HTML và CSS của trang web và các ứng dụng trên web

Công nghệ client-side rendering khiến cho người sử dụng cảm thấy trình duyệt mượt

mà hơn Bởi vì khi này trình duyệt không cần gửi yêu cầu đến server để có thể hiện lên 1 trang web hoàn chỉnh Mà nó chỉ cần yêu cầu thêm dữ liệu và thực thi ngay trên trang web các yêu cầu đó

Vì vậy một vài ứng dụng client-side rendered được gọi là SPAs Có nghĩa là chỉ có 1 trang web và nội dung của trang web đó được cập nhật liên tục

CHƯƠNG 3: CƠ SỞ DỮ LIỆU

1 Cơ sở dữ liệu

2 Sản phẩm

3 Danh mục sản phẩm

4 Tài khoản

5 Slide

6 Giỏ hàng

7 Chi tiết giỏ hàng

CHƯƠNG 4: GIAO DIỆN CHƯƠNG TRÌNH

1 C ấu trúc Giao diện

1.1 Khách hàng

Giao diện khách hàng được phân thành các nhánh như sau

1.2 Admin

Giao diện admin được phân thành các nhánh như sau

2 Đặc tả Giao diện

2.1 Trang chủ

- Mục đích: Là giao diện tổng quan của website và giới thiệu sản phẩm

- Tại đây, người xem có thể đến được các trang khác thông qua các link đính kèm

- Trang web được chia thành các phần như sau:

 Phần trên cùng: logo của website và các link chuyển trang

 Phần tiếp theo: thanh tiêu đề chứa các link đến các loại sản phẩm

 Phần giữa: gồm phần slide giới thiệu các sản phẩm của website, các liên kết với trangmạng xã hội của và phần danh sách các mặt hàng mới, đặc trưng của website

 Phần trên dưới: gồm các thông tin như vận chuyển, liên lạc và mục tiêu của website

 Phần cuối: Chứa các link về các thông tin khách hàng cần tìm hiểu

2.2 Danh mục sản phẩm

- Mục đích: hiển thị các sản phẩm cùng loại

- Khách hàng có thể xem danh mục các sản phẩm để lựa chọn

2.3 Chi tiết sản phẩm

- Mục đích: hiển thị các thông tin chi tiết về sản phẩm

- Khách hàng có thể xem thông tin về sản phẩm để mua

- Ngoài ra còn có slide các sản phẩm được gợi ý

2.4 Đăng nhập

- Mục đích: khách hàng đăng nhập vào website

- Khách hàng còn có thể lựa chọn đăng ký tại đây

2.5 Đăng ký

- Mục đích: khách hàng đăng ký thành viên website

2.6 Giỏ hàng

- Mục đích: hiển thị các sản phẩm khách hàng thêm vào giỏ

- Còn có các nút:

+ Tiếp tục mua hàng: quay trở về trang chủ

+ Cập nhật giỏ hàng: cập nhật số lượng khách hàng thay đổi

+ Xóa giỏ hàng: xóa toàn sản phẩm trong giỏ hàng

+ Thanh toán: chuyển sang trang thanh toán

- Ngoài ra còn có link xóa ở cuối mỗi sản phẩm để khách hàng có thể xóa sản phẩm đó ra

khỏi giỏ hàng

2.7 Thanh toán

- Mục đích: khách hàng nhập thông tin để tiến hành thanh toán

2.8 Thanh toán thành công

- Mục đích: hiển thị thông báo thanh toán thành công

2.9 Về chúng tôi

- Mục đích: giới thiệu về webiste

2.10 Đăng nhập (Admin)

- Mục đích: admin đăng nhập vào để quản lý

- Muốn vào được các trang quản lý phải đăng nhập tài khoản admin vào

2.11 Trang chủ (Admin)

- Mục đích: hiển thị các chức năng quản lý của admin

- Bên trái gồm các mục cần quản lý của admin, bên trong có các mục con

2.12 Thêm tài khoản (Admin)

- Mục đích: admin thêm tài khoản nhân viên có quyền admin vào để quản lý

2.13 Danh sách tài khoản (Admin)

- Mục đích: hiển thị danh sách các tài khoản có trong cơ sở dữ liệu

- Cuối mỗi tài khoản có nút sửa để admin có thể sửa thông tin tài khoản

2.14 Sửa tài khoản (Admin)

- Mục đích: admin sửa thông tin tài khoản

2.15 Thêm sản phẩm (Admin)

- Mục đích: admin thêm sản phẩm vào cơ sở dữ liệu của website

2.16 Danh sách sản phẩm (Admin)

- Mục đích: hiển thị danh sách các sản phẩm có trong cơ sở dữ liệu

- Cuối mỗi sản phẩm có nút sửa để admin có thể sửa thông tin sản phẩm

2.17 Sửa sản phẩm (Admin)

- Mục đích: admin sửa thông tin của sản phẩm

2.18 Danh sách đơn hàng (Admin)

- Mục đích: hiển thị danh sách các đơn hàng

- Cuối mỗi đơn hàng có 2 nút là Xem để chuyển sang trang chi tiết đơn hàng và Xác

nhận để xác nhận thông tin của đơn hàng