ĐỒ ÁN : WEBSITE BÁN ĐIỆN THOẠI ONLINE | Đại học Ngoại Ngữ - Tin Học Thành Phố Hồ Chí Minh

Bộ giáo dục và đào tạo
Trường Đại học Ngoại ngữ-Tin học TP.HCM
ĐỒ ÁN : WEBSITE BÁN ĐIỆN THOẠI ONLINE
Nghành : Công Nghệ Thông Tin Bộ môn :Lập trình web
Giảng viên hướng dẫn: Ths.Trần Phương tuấn Sinh viên thực hiện: Trần Đình Bảo-22DH114460 Nguyễn Anh Khoa-22DH111656 Võ Minh Toàn-22DH113802 Lê Dức Phát-22DH114674 0
TP.HCM,Ngày 19,Tháng 11,Năm 2023
Bộ giáo dục và đào tạo
Trường Đại học Ngoại ngữ-Tin học TP.HCM
ĐỒ ÁN : WEBSITE BÁN ĐIỆN THOẠI ONLINE
Nghành : Công Nghệ Thông Tin Bộ môn :Lập trình web
Giảng viên hướng dẫn: Ths.Trần Phương tuấn Sinh viên thực hiện: Trần Đình Bảo-22DH114460 Nguyễn Anh Khoa-22DH111656 Võ Minh Toàn-22DH113802 Lê Dức Phát-22DH114674 1
TP.HCM,Ngày 19,Tháng 11,Năm 2023 Mục lục
Chương 1:Mở đầu..............................................................................................................2
1.Bối cảnh của đề tài......................................................................................................2
2.động lực tại sao phải làm đề tài.....................................................................2
3.Mục đích chọn đề tài...................................................................................................3
4.khảo sát hiện trạng.............................................................................................3
Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng.....................................................3 1.
HTML...................................................................................................................3
1.2. Ưu điểm..............................................................................................................3
2. CSS............................................................................................................................4
2.1. Định nghĩa...........................................................................................................4
2.2. Ưu điểm..............................................................................................................4
2.3. Các thành phần trong CSS...................................................................................5
3. Javascript....................................................................................................................5
3.1. Định nghĩa JavaScript.........................................................................................5
3.2. Ưu điểm..............................................................................................................5
3.3. Các thành phần trong Javascript..........................................................................6
4. Bootstrap 5.................................................................................................................6 2
4.1. Định nghĩa Bootstrap..........................................................................................6
4.2. Ưu điểm..............................................................................................................6
4.3. Các thành phần trong Bootstrap 5.......................................................................7
5. Công cụ Visual Studio 2022.......................................................................................7
5.1 định nghĩa.............................................................................................................7
5.2 Ưu điểm:..............................................................................................................8
6 SQL Sever...................................................................................................................8
6.1 định nghĩa.............................................................................................................8
6.2 ưu điểm................................................................................................................8
Chương 3: thiết kế..............................................................................................................9
1 .Giao dện trang chủ.....................................................................................................9
2.Trang chi tiết sản phẩm.............................................................................................11
3.Trang sản phẩm.........................................................................................................12
4.Trang M.Product (nhà sản xuất)................................................................................14
5.trang loại sản phẩm (Product-Type)..........................................................................15
6.Trang giỏ hang..........................................................................................................16
7 . Trang đăng nhập đăng kí.........................................................................................17
Chương 4: code các chức năng ứng dụng.........................................................................18
1.Code hiển thị sản phẩm.............................................................................................18
2.Phần menu của header...............................................................................................19
3. Code hiển thị chi tiết sản phẩm................................................................................19
4. Code hiển thị trang loại sản phẩm (Product Type)...................................................20
5. code hiển thị trang phân loại theo từng nhà sản xuất................................................20
6. code hiển thị top 4 sản phẩm mới.............................................................................20
7. code hiển thị 4 sản phẩm hot....................................................................................20
8. Code thanh tìm kiếm hiển thị sản phẩm tìm kiếm....................................................21
9. trang giỏ hàng...........................................................................................................21
Thanh toán...................................................................................................................21
10.Trang thanh toán thành công...................................................................................22 3
11.Code bình luận........................................................................................................22
Chương 5: Kết luận và hướng phát triển..........................................................................22
1.Kết luận..................................................................................................................... 22
2. hướng phát triển.......................................................................................................22
3.Phân công công việc..................................................................................................23
Tài liệu kham khảo...........................................................................................................23 Chương 1:Mở đầu
1.Bối cảnh của đề tài
Ở xã hội ngày nay, công nghệ thông tin được coi là một trong những ngành có quyền
lực bậc nhất. Từ sản xuất, kinh doanh, giáo dục, y tế… Đặc biệt, trong thời đại 4.0 - mà
tại Việt Nam cơ bản là ứng dụng tự động hóa trong công nghệ sản xuất. Đây vừa là nền
tảng, vừa là động lực để bắt kịp đà phát triển của thế giới. Các công nghệ thông minh hệ
thống là điều kiện để tối ưu hóa năng suất lao động, tiết giảm nhân lực lao động thủ công, chi phí sản xuất.
Hiện nay các công ty tin học hàng đầu thế giới không ngừng đầu tư và cải thiện các
giải pháp cũng như các sản phẩm nhằm cho phép tiến hành thương mại hóa trên Internet.
Thông qua các sản phẩm và công nghệ này, chúng ta dễ dàng nhận ra tầm quan trọng và
tính tất yếu của thương mại điện tử. Với những thao tác đơn giản trên máy có nối mạng 4
Internet bạn sẽ có tận tay những gì mình cần mà không phải mất nhiều thời gian. Bạn
chỉ cần vào các trang dịch vụ thương mại điện tử, làm theo hướng dẫn và click vào
những gì bạn cần. Các nhà dịch vụ sẽ mang đến tận nhà cho bạn. Động lực tại sao phải làm đề tài.
2.động lực tại sao phải làm đề tài
Nhằm đáp ứng sự tăng cao của khoa học và công nghệ đối với cuộc
sống của chúng ta hiện nay ,việc có thể truy cập vào các trang web
cũng như nhiều nền tảng khác trên mạng xã hội, để có thể truy cập
chúng ta phải cần những thiết bị tối ưu để giúp chúng ta thực hiện.Vì
vậy nhóm chúng em đã thực hiện một đề tài Website kinh doanh điện
thoại . Ở đây mọi người có thể tìm được những mẫu điện thoại tốt với
giá thành hợp lí với mỗi người và có thể đáp ứng đầy đủ nhu cầu mà
khách hàng đặt ra . website kinh doanh điện thoại của nhóm em được
thành lập để có thể giúp mọi người có thể mua điện thoại trực tuyến
một cách dễ dàng và có nhiều sự lựa chọn.
3.Mục đích chọn đề tài
-quản lý thông tin khách hàng
- cập nhật các sản phẩm phù hợp với nhu cầu khách hàng
- tạo ra nhiều sự lựa chọn cho khách hàng
- tăng hiệu quả kinh doanh 4.khảo sát hiện trạng
Nhằm tạo ra thuận lợi cho việc mua bán và lựa chọn trực tuyến .
Website chúng em được thiết kế một cách đơn giản và rõ ràng chi tiết
từng dòng sản phầm để khách hàng có thể lựa chọn một cách dễ dàng
và đơn giản tránh việc làm khách hàng không biết phải làm gì khi vào
web . Việc buôn bán khách hàng có thể thanh toán khi nhận hàng hoặc 5
thanh toán bằng thẻ , mọi thông tin sẽ được hiển thị rõ trong trang
web, kèm theo đó khách hàng có thể đánh giá khi nhận được sản phẩm một cách công khai.
Chương 2: Giới thiệu về ngôn ngữ và công cụ sử dụng 1. HTML 1.1. Định nghĩa
+ Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một
trong các loại ngôn ngữ được sử dụng trong lập trình web.
+Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới
nhiều trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML).
+Ngôn ngữ HTML (HyperText Markup Language – ngôn ngữ siêu văn bản) là một
trong các loại ngôn ngữ được sử dụng trong lập trình web.
+Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới
nhiều trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML). 1.2. Ưu điểm
- Giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web).
- Góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh. Þ Ưu điểm
nổi trội nhât và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và khiến
trang web đi vào quy củ một hệ thống hoàn chỉnh. 2. CSS 2.1. Định nghĩa
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm
và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML).
Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Nếu HTML đóng vai trò
định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…
thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục,
màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… Phương thức hoạt động của 6
CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một
ID, class hay nhiều kiểu khác.
Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó. Có 3 cách nhúng
CSS vào HTML: Inline, Internal, External. 4 Mối tương quan giữa HTML và CSS rất
mật thiết. HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách
(tất cả những gì tạo nên giao diện website), chúng là không thể tách rời. 2.2. Ưu điểm
- Giải quyết vấn đề lớn: Nhờ CSS mà source code của trang Web sẽ được tổ chức gọn
gàng hơn, trật tự hơn. Nội dung trang web sẽ được tách bạch hơn trong việc định dạng
hiển thị. Từ đó, quá trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML.
- Tiết kiệm thời gian: Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy
có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp. Sử dụng CSS sẽ giúp
bạn không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, bạn có thể tiết
kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp kiểm soát dễ dàng hơn các lỗi không đáng có.
- CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ đó
giảm tránh việc lặp lại các định dạng của các trang web giống nhau. - Cung cấp thêm các
thuộc tính: CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của
trang web. CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng
điều chỉnh trang của bạn trở nên vô hạn.
2.3. Các thành phần trong CSS
Có rất nhiều thuộc tính trong CSS, chúng ta dùng chúng để làm đẹp cho trang thêm sinh
động hơn. Sau đây là các thuộc tính thường dùng:
- Thuộc tính Color: Chức năng để thiết lập màu sắc và độ trong suốt của văn bản.
- Thuộc tính Background và Border: Chức năng thiết lập các thuộc tính màu nền và
đường biên cho các đối tượng trên trang.
- Thuộc tính Table: cho phép tạo bảng, layout cho trang web.
- Thuộc tính Transitions: tạo hiệu ứng chuyển đổi cho trang web.
- Thuộc tính Animation: cho phép tạo các hệu ứng chuyển động, sử dụng để tạo hiệu ứng
di chuyển cho các phần tử và được ứng dụng khá nhiều trong các website hiện nay. Để 7
tạo một chuyển động Animation, cần phải có các keyframe. 5 Mỗi keyframe sẽ được
chạy ở một thời điểm xác định và trong keyframe đó nó quy định việc phần tử sẽ di chuyển ra sao.
- Ngoài ra, Animation còn gồm một số thuộc tính quy định các chi tiết khá quan trọng
của hiệu ứng thường đi kèm như: animation-name, animation-duration, animation-
timing-function, animation-delay, animation-iteration-count, aniamtion-direction, animation-fill-mode. 3. Javascript
3.1. Định nghĩa JavaScript
là một ngôn ngữ lập trình của HTML và WEB. Nó là nhẹ và được sử dụng phổ biến nhất
như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script
tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương
trình thông dịch với các khả năng hướng đối tượng. 3.2. Ưu điểm
Sự tương tác Server ít hơn: chúng ta có thể xác nhận đầu vào (input) người sử dụng trước
khi gửi trang tới Server. Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server
của chúng ta tải ít hơn. Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho
một trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó. Khả năng tương tác tăng
lên: chúng ta có thể tạo các giao diện mà phản ứng lại khi người sử dụng rê chuột qua
chúng hoặc kích hoạt chúng thông qua bàn phím. Giao diện phong phú hơn: Bạn có thể
sử dụng JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD) và
các con trượt (Slider) để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site
khách truy cập của bạn.
3.3. Các thành phần trong Javascript
Các thành phần cơ bản như: - Biến: Khai báo bằng từ khóa var, có thể chứa chữ cái, chữ
số, ký hiệu _,không bắt đầu bằng chữ số.
- Kiểu dữ liệu: Numbers, Boolean, Strings, Null, Object (cấp phát bằng từ khóa new).
- Hằng số: Số nguyên, Số thực, Boolean, Null, Chuỗi. - Toán tử: Số học, logic, so sánh, chuỗi, khác,…
- Biểu thức: có các dạng biểu thức: số học, logic, chuỗi - Câu lệnh điều khiển: câu lệnh
điều kiện, câu lệnh lặp, các từ khóa,…
- Hàm: do người dùng định nghĩa và hàm định nghĩa sẵn. 8
- Đối tượng (Object): Bao gồm thuộc tính, phương thức.
- Mảng: được xem như đối tượng trong JS. Sự kiện (Event): Hành động xảy ra trên trang
web, hoặc khi load web xong. Các sự kiện thông thường: onClick, onLoad, onChange,
onFocus,… Các đối tượng Window, Location, History, Document,… 4. Bootstrap 5 4.1. Định nghĩa Bootstrap
là một framework HTML, CSS, và JS phổ biến nhất để phát triển các project ưu tiên thiết
bị di động trên web. Đây là công cụ để phát triển website chuẩn reponsive. Về cơ bản,
framework Bootstrap giúp tiết kiệm thời gian viết CSS, từ đó ta sẽ có nhiều thời gian cho
việc thiết kế các trang web hơn. Và hơn hết, nó “HOÀN TOÀN MIỄN PHÍ”. 4.2. Ưu điểm
Tiết kiệm thời gian: Bootstrap cực kỳ hữu ích khi các developer phải “chạy deadline” khi
xây dựng các trang web, ứng dụng web hay ứng dụng mobile. Sở dĩ vì framework
Bootstrap có rất nhiều block được build sẵn, giúp dễ dàng hoàn thành các công việc. Rõ
ràng rằng các developer không cần phải khổ sở xây dựng mọi thứ từ đầu, mà có thể thay
đổi những thứ có sẵn ở trong thư viện Bootstrap. Dễ sử dụng: Bất kể là chuyên gia hay là
người mới bắt đầu, ai cũng có thể sử dụng Bootstrap nhanh chóng mà không gặp bất kỳ
rắc rối nào. Đúng vậy, không cần là chuyên gia về công nghệ web (HTML, CSS,
JavaScript), bạn cũng có thể biết được cách sử dụng Bootstrap cơ bản. 7 Tùy chỉnh dễ
dàng: Người dùng có thể dễ dàng chỉnh sửa các file CSS Bootstrap nếu cảm thấy không
hài lòng. Bên cạnh đó, ta cũng có thể kết hợp chúng với những desgin đã có sẵn, hay là
bổ sung các chức năng cho nhau…Việc này đặc biệt hữu ích khi người dùng muốn xây
dựng một trang web độc đáo, những lại không đủ thời gian để tìm hiểu sâu về CSS.
Responsive: Tạo một trang mới với Bootstrap sẽ bắt đầu bằng việc tạo các grid layout
cho trang. Hệ thống grid responsive trong Bootstrap chắc chắn là ưu tiên hàng đầu, vì
hiện đang ngày càng có nhiều người sử dụng điện thoại di động hơn. Vì vậy, bất kỳ sai
sót nào trong thiết kế front-end đều sẽ ảnh hưởng đến tính xác thực của trang web. Từ đó
làm giảm uy tín của trang web trong mắt người dùng. Tương thích với trình duyệt:
Bootstrap luôn đảm bảo khả năng tương thích của framework với mọi phiên bản và nền
tảng của các trình duyệt phổ biến hiện nay. Bên cạnh đó, các developer của Bootstrap
cũng khẳng định rằng họ không hỗ trợ proxy brower cũng như những trình duyệt cũ nữa.
Dẫu vậy, việc này cũng không ảnh hưởng gì đến chức năng của framework Bootstrap.
Mã nguồn mở: Một đặc điểm nổi bật khác nữa của framework Bootstrap chính là mã
nguồn mở. Vì vậy người dùng có thể tự do sửa đổi framework này theo nhu cầu cụ thể 9