báo cáo lập trình web đề tài web bán giày

1.1 Mục đích chọn đề tài : Trong những năm gần đây, ứng d ng CNTT v quụ ề ản lý web đang phát triển m nh ạ mẽ, giúp cho các c a hàng kiử ếm được lợi nhuận nhiều hơn nhờ vào các trang web

TRƯƠNG ĐAI HOC CÔNG NGHÊ TP.HCM Viện Công Nghệ Việt-Nhật

Đề tài: Web bán giày

Môn h c: L p trình Web ọ ậ

Giảng viên hương d n: Võ Tâ ấn Dũng

Sinh viên thực hiện:

NHẬN XÉT CỦA GIẢNG VIÊN

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

LỜI MỞ ĐẦU

Qua th i gian h c t p và ki n ờ ọ ậ ế thức đã được h c t môn môn L p trình Web, chúng ọ ừ ậ

em th y vi c t o ra mấ ệ ạ ột trang bán hàng online sẽ giúp người dùng dễ tiếp c n s n phậ ả ẩm hơn Chính vì thế nhóm chúng em đã cùng nhau học tập và tìm hiểu về cách làm một trang web bán hàng

Sau đây là bài báo cáo sơ lược v quy trình làm viề ệc nhóm và đúc kết được những kinh nghi m và thông tin tệ ừ việc tìm hi u v l p trình web N u chúng em có nh ng ể ề ậ ế ữkhuyết điểm, mong thầy đánh giá và nhận xét nhóm em để chúng em nhận ra được thiết sót c a mình trong bài báo cáo l n này ủ ầ

Nhóm em xin chân thành cảm ơn!

Mục lục

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI NGHIÊN CỨU 1

1.1 Mục đích chọn đề tài : 1

1.2 Mục đích nghiên cứu: 1

1.3 Mục tiêu đề tài: 2

1 CHƯƠNG II: TÌM HIỂU VỀ CƠ SỞ LÝ THUY T Ế 4

2.1 SQL Sever 4

2.2 Các bảng dữ liệ 4 u 2.3 Lượt đồ CSDL 5

2.4Tổng quan v ASP.NET: ề 6

2.4.1Giới thiệu về ASP.NET: 6

2.4.2 Tìm hi u v mô hình l p trình web MVC c a ASP.NET:ể ề ậ ủ 6

2.5Giới thiệu mô hình lập trình Web b ng ASP.NET MVC5 ằ 8

2.6 HTML: 10

2.7 CSS: 10

2.8 Bootstrap: 11

2.9 Jquery: 11

2 CHƯƠNG III: HƯỚNG DẪN S DỬ ỤNG 13

16 CHƯƠNG IV: NHẬN XÉT VÀ ĐÁNH GIÁ 19

4.1 Kết luận: 19

4.1.1 Kết quả đạt được: 19

4.1.3 Hướng phát triển của đề tài: 19

4.2 Kết luận: 19

17 CHƯƠNG V: TÀI LIỆU THAM KH O Ả 20

1

CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI NGHIÊN CỨU

1.1 Mục đích chọn đề tài :

Trong những năm gần đây, ứng d ng CNTT v quụ ề ản lý web đang phát triển m nh ạ

mẽ, giúp cho các c a hàng kiử ếm được lợi nhuận nhiều hơn nhờ vào các trang website bán hàng nhanh Nên nhóm chúng em quyết định chọn đề tài xây dựng trang website bán hàng tiêu dùng V i mong mu n giúp cho c a hàng ki m thêm ớ ố ử ếthu nh p nhiậ ều hơn nhờ vào vi c bán online Ngoài ra, website bán hàng r t thân ệ ấthiện giúp cho khách hàng mua được thuận lợi hơn, khách hàng sẽ được mua những hàng công ngh mà mình thích không c n t n nhi u thệ ầ ố ề ời gian để đi ra cửa hàng mua Đây là điều tuyệt nhất đối với khách hàng

Một trong các nhà phát tri n ph n mể ầ ềm hàng đầu thế giới về lĩnh vực này là Microsoft, họ đã cho ra đời mô hình ASP.NET MVC hỗ trợ người phát triển các

với Entity Framework hỗ trợ làm vi c v i các lo i CSDL ệ ớ ạ

Do đó, nhóm sinh viên chúng em chọn đề tài “Ứng d ng công ngh phát tri n web ụ ệ ểASP.NET MVC, Xây d ng Website bán hàng công nghự ệ ” để thực hiện đồ án l p ậtrình web đáp ứng theo chương trình đào tạo của Trường, đồng thời mong mu n ốgóp phần đẩy đưa ứng dụng CNTT vào Website để cho vi c bán hàng công ngh ệ ệđược hoàn thiện và thân thi n nh t giúp cho khách hàng hài lòng khi vào Website ệ ấbán hàng công ngh c a nhóm chúng em ệ ủ

1.2 Mục đích nghiên cứu:

Học được những ki n th c mế ứ ới

Tìm hiểu kĩ thuậ ật l p trình trên ASP.NET MVC

Tìm hi u v ngôn ng và ki n thể ề ữ ế ức tương tác CSDL (Lambda to SQL và Entity

FrameWork)

Cách điều khi n dể ữ liệu(Controller)

Xây dựng trang web “chuẩn Seo”

Tìm hiểu GoogleMapAPI để đánh dấu địa điểm của website trên bản đồ, chỉ dẫn đường đi từ vị trí của khách hàng đến cửa hàng của website, giúp thân thi n vệ ới người dùng hơn

Tìm hiểu FB API để đăng nhập bằng FB làm coment, like, share cho web, Tìm hiểu Websivice để web cung c p các thành ph n ng dấ ầ ứ ụng như chuyển đổi tiền t , báo cáo th i tiệ ờ ết…

1.3 Mục tiêu đề tài:

Vì là m t website bán hàngộ , nên điều được nhóm chúng em chú trọng đó là tính thân thi n vệ ới người dùng, giao diện đẹp m t, cách trình bày s n phắ ả ẩm cũng như chi ti t s n ph m, giá c hế ả ẩ ả ợp lý cũng là cách để gây ấn tượng tốt với khách hàng

Cả khách hàng và nhà qu n lý s c m th y tho i mái khi s d ng mả ẽ ả ấ ả ử ụ ột trang web đẹp và dễ truy cập

Người dùng (User):

Tham quan trang web

Tìm ki m và l a ch n s n ph m c n mua ế ự ọ ả ẩ ầ

Xem chi ti t 1 s n phế ả ẩm

Đăng ký, đăng nhập phục vụ cho việc mua bán online

Thực hiện việc mua hàng và thanh toán tr c tuy n ự ế

Gửi ý kiến phản hồi, bình luận về sản phẩm qua facebook dưới chi tiết các sản phẩm

Xem nơi bán của shop thông qua Google Map trên trang liên h , gi i thi u ệ ớ ệ Người quản tr (Admin): ị

3

Quản lý trang web c a mình thông qua tài kho n Admin rõ ràng, d s d ng, ủ ả ễ ử ụbảo m t cao.ậ

Quản lý t t c các s n ph m mấ ả ả ẩ ột cách dễ dàng

Xem s n ph m danh sách s n ph m m i và danh sách s n ph m bán ch ả ẩ ả ẩ ớ ả ẩ ạy.

Thêm lo i s n ph m, màu cho lo i s n phạ ả ẩ ạ ả ẩm

Kiểm tra và xử lý đơn đặt hàng

Theo dõi và ph n h i ý ki n khách hàng.ả ồ ế

SQL Server có khả năng cung cấp đầy đủ các công c cho vi c qu n lý t giao ụ ệ ả ừ

diện GUI đến s d ng ngôn ng cho vi c truy vử ụ ữ ệ ấn SQL Điểm m nh c a SQL ạ ủđiểm mạnh của nó là có nhiều nền tảng được kết hợp cùng như: ASP.NET, C#

để xây dựng Winform cũng chính nó có khả năng hoạt động độc lập Tuy nhiên, SQL Server thường đi kèm với vi c th c hi n riêng các ngôn ngệ ự ệ ữ SQL, T-SQL,…

2.2 Các b ng dả ữ liệ u

Hình 1: Tài Kho n ả

Hình 2: S n Ph m ả ẩ

Hình 3: Rank

5

Hình 4: Phân lo i s n ph m ạ ả ẩ

zHình 5: Hãng giày

Hình 6: Lược đồ CSDL

6

2.4 T ng quan v ASP.NET: ổ ề

2.4.1 Giới thi u v ASP.NET: ệ ề

Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá m i m vớ ẻ ới tên gọi ban đầu là ASP+, tên chính th c sau này là ASP.Net V i ASP.Net, không ứ ớnhững không cần đòi hỏ ại b n ph i bi t các tag HTML, thi t k web, mà nó còn h ả ế ế ế ỗtrợ m nh lạ ập trình hướng đối tượng trong quá trình xây d ng và phát tri n ng ự ể ứdụng Web ASP.Net là k ỹ thuật l p trình và phát tri n ậ ể ứng d ng web phía Server ụ ở(Server-side) dựa trên n n t ng c a Microsoft Net Framework H u h t, nh ng ề ả ủ ầ ế ữngười mới đến với lập trình web đều bắt đầu tìm hi u nh ng k ể ữ ỹ thuật ở phía Client (Client-side) như: HTML, Java Script, CSS (Cascading Style Sheets) Khi Web browser yêu c u m t trang web (trang web s d ng kầ ộ ử ụ ỹ thuật client-side), Web server tìm trang web mà Client yêu cầu, sau đó gởi về cho Client Client nhận kết quả trả về t Server và hiừ ển th lên màn hình ASP.Net s d ng kị ử ụ ỹ thuậ ật l p trình

ở phía server thì hoàn toàn khác, mã l nh phía server (ví d : mã l nh trong trang ệ ở ụ ệASP) s ẽ được biên d ch và thi hành tị ại Web Server Sau khi được Server đọc, biên dịch và thi hành, kết qu tự động được chuyển sang HTML/JavaScript/CSS và tr ả ả

về cho Client T t c các x lý l nh ASPấ ả ử ệ Net đều được th c hi n t i Server và do ự ệ ạ

đó, gọi là kỹ thuật lập trình ở phía server ASP.NET được Microsoft phát tri n qua ểnhiều phiên b n tả ừ ASP.NET 1.0, 1.1, 2.0 và gần đây nhất là phiên b n ASP.NET ả

5

2.4.2 Tìm hi u v mô hình l p trình web MVC c a ASP.NET: ể ề ậ ủ

Mô hình MVC (vi t t t chế ắ ữ cái đầu của 3 từ Model - View Controller) là một - kiến trúc ph n m m hay mô hình thi t kầ ề ế ế được s dử ụng trong k ỹ thuật ph n mầ ềm (đặc biệt đố ới phát triển ng di v ứ ụng web) Nó giúp cho tổ chức ứng d ng (phân ụ

bố source code ng d ng) thành 3 ph n khác nhau ứ ụ ầ Model, View và Controller Mỗi thành ph n có m t nhi m vầ ộ ệ ụ riêng biệt và độc lập với các thành phần khác

Model: là các thành ph n chầ ứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất CSDL, đối tượng mô t d u ả ữ liệ như các Class, hàm xử lý Model được

và các file ngu n là mồ ột phần của View

Controller: Controller là t ng trung gian giầ ữa Model và View Controller được giao nhi m v nh n các yêu c u tệ ụ ậ ầ ừ người dùng (phía máy khách) M t yêu cộ ầu được nhận t máy khách được thực hi n b i m t chừ ệ ở ộ ức năng logic thích hợp từ thành phần Model và sau đó sinh ra các kết quả cho người dùng và được thành phần View hi n thể ị ActionServlet, Action, ActionForm, struts-config.xml là các thành ph n c a Controller ầ ủ

Một ứng dụng web được phát tri n theo mô hình MVC, có nguyên lý hoể ạt động

xử lý yêu c u cầ ủa người dùng như sau:

- Khi có yêu c u phát sinh tầ ừ người dùng (phía Client), yêu c u này sầ ẽ được gởi

đến phía Server, tại đây Contronler sẽ tiếp nh n yêu cậ ầu để ử x lý

- Bên trong Controller ch a nhiứ ều phương thức (action), mỗi action tương ứng với 1 yêu c u cầ ụ thể ừ người dùng Controller s l a ch n action phù h p v t ẽ ự ọ ợ ới yêu cầu để ử x lý Trong quá trình xử lý, Controller tương tác với Model để có được d liệu mà người dùng mong mu n ữ ố

- Sau khi Controller làm vi c vệ ới model để có được dữ liệu theo yêu cầu, Controller sẽ gởi về cho View thành phần Data Model, và nhi m vệ ụ của View

sẽ chuyển Data Model nhận được thành dữ liệu ng d ng và g i tr v phía ứ ụ ở ả ềClient để hiển thị kết quả yêu cầu

8

Hình 7: Mô hình MVC

2.5 Giớ i thi u mô hình l p trình Web b ng ASP.NET MVC5 ệ ậ ằ

ASP.NET MVC5 giúp cho chúng ta có th tể ạo được các ứng d ng web áp d ng mô ụ ụhình MVC thay vì t o ạ ứng d ng theo m u ASP.NET Web Forsm N n t ng ụ ẫ ề ảASP.NET MVC có đặc điểm n i b t là nh (lightweight), dổ ậ ẹ ễ kiểm th ph n giao ử ầdiện (so với ứng d ng Web Forms), tích hụ ợp các tính năng có sẵn c a ASP.NET ủNền tảng ASP.NET MVC được định nghĩa trong namespace System.Web.MVC và

là một ph n c a name space System.Web MVC là mầ ủ ột mẫu thi t k (design pattern) ế ếchuẩn mà nhi u lề ập trình viên đã quen thuộc M t sộ ố loại ứng d ng web sụ ẽ thích hợp v i ki n trúc MVC M t s khác v n thích h p v i ASP.NET Web Forms và ớ ế ộ ố ẫ ợ ớ

cơ chế postbacks Đôi khi có những ng d ng kứ ụ ết hợp cả hai ki n trúc trên ế Tách b ch các tác vạ ụ của ứng d ng (logic nh p li u, business logic, và logic giao ụ ậ ệdiện), d dàng ki m th và mễ ể ử ặc định áp dụng hướng phát tri n TDD T t cể ấ ả các tính năng chính của mô hình MVC được cài đặ ựa trên Interface và đượt d c kiểm th ửbằng cách s dử ụng các đối tượng mocks, mock object là các đối tượng mô ph ng ỏcác tính năng của những đối tượng th c s trong ng d ng B n có thự ự ứ ụ ạ ể kiểm th ửunit-test cho ứng d ng mà không c n ch y Controller trong ti n trình ASP.NET, và ụ ầ ạ ếđiều đó giúp unit test được áp dụng nhanh chóng và ti n d ng B n có th s d ng ệ ụ ạ ể ử ụbất k n n t ng unit-ỳ ề ả testing nào tương thích vớ ề ải n n t ng

NET MVC là m t n n t ng kh mộ ề ả ả ở rộng (extensible) & kh nhúng (pluggable) ảCác thành ph n cầ ủa ASP.NET MVC được thiết kể để chúng có th ể được thay th ế

9

một cách d dàng ho c d dàng tùy chễ ặ ễ ỉnh B n có th nhúng thêm view engine, ạ ể

cơ chế định tuyến cho URL, cách kết xuất tham s c a action-method và các ố ủthành phần khác ASP.NET MVC cũng hỗ trợ vi c s d ng Dependency Injection ệ ử ụ(DI) và Inversion of Control (IoC) DI cho phép b n gạ ắn các đối tượng vào một lớp cho lớp đó sử ụ d ng thay vì bu c lộ ớp đó phả ựi t mình kh i tở ạo các đối tượng IoC quy định r ng, n u mằ ế ột đối tượng yêu c u mầ ột đối tượ g khác, đối tượng đần u

sẽ lấy đối tượng thứ hai từ m t ngu n bên ngoài, ví dộ ồ ụ như từ tập tin cấu hình

Và nh v y, vi c s d ng DI và IoC s giúp ki m th dờ ậ ệ ử ụ ẽ ể ử ễ dàng hơn

ASP.NET MVC có thành ph n ánh x URL m nh m cho phép b n xây d ng ầ ạ ạ ẽ ạ ựnhững ứng d ng có các a ch URL xúc tích và d tìm kiụ đị ỉ ễ ếm Các địa ch URL ỉkhông c n ph i có ph n m r ng c a tên tầ ả ầ ở ộ ủ ập tin và được thi t kế ế để ỗ h trợ các mẫu định dạng tên phù hợp với việc tối ưu hóa tìm kiếm (URL) và phù h p vợ ới lập địa chỉ theo kiểu REST

Hỗ trợ ử dụng đặc tả (các th ) c s ẻ ủa các trang ASP.NET (.aspx), điều khiển người dùng (.ascx) và trang master page B n có th s dạ ể ử ụng các tính năng có sẵn của ASP.NET như là sử dụng l ng các trang master page, s d ng in-line expression ồ ử ụ(<%= %>), sử d ng server controls, m u, data-ụ ẫ binding, địa phương hóa (localization) và hơn thế nữa

Hỗ trợ các tính năng có sẵn của ASP.NET như cơ chế xác thực người dùng, qu n ả

lý thành viên, quy n, output caching và data caching, session và profile, qu n lý ề ảtình tr ng ng d ng, hạ ứ ụ ệ thống c u hìnấ h…

thiết l p các view nhanh chóng, d dàng và t n ít công sậ ễ ố ức hơn so với vi c s ệ ửdụng Web Forms view engine

10

2.6 HTML:

HTML là ch vi t t t c a c m tữ ế ắ ủ ụ ừ HyperText Markup Language ( dịch là Ngôn ng ữđánh dấ siêu văn bản ), đượu c sử dụng để tạo một trang web, trên m t website có th ộ ể

sẽ chứa nhi u trang và mề ỗi trang được quy ra là một tài liệu, tập tin HTML

và ch t ch c a World Wide Web Consortium ủ ị ủ (W3C – ổ chứ t c thi t l p ra các chuế ậ ẩn trên môi trường Internet)

quy định bằng các c p thặ ẻ (tag), các c p thặ ẻ này được bao b c bọ ởi một dấu ngo c ngặ ọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm th m và th ẻ ở ẻđóng (ví <strong> dụ </strong> và ) Các văn bản muốn được đánh dấu bằng HTML

sẽ được khai báo bên trong c p th (ví dặ ẻ ụ <strong>Đây là chữ in đậm</strong>) Nhưng một s ố thẻ đặc biệt l i không có th ạ ẻ đóng và dữ liệu được khai báo s n m trong ẽ ằcác thu c tính (ví dộ ụ như thẻ<img>)

Một t p tin HTML s bao g m các ph n tậ ẽ ồ ầ ử HTML và được lưu lại dưới đuôi mở rộng

là html ho c htm ặ

2.7 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 (ví dụ như HTML) B n có th hiạ ể ểu đơn giả ằn r ng, nếu HTML đóng vai trò định dạng các phần

tử trên website như việ ạo ra các đoạn văn bảc t n, các tiêu đề ảng,…thì CSS sẽ, b giúp chúng ta có th thêm mể ột chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay đổ ấu trúc,…rấi c t nhi u ề

11

Hình 8: ví dụ CSS trang trí thêm cho văn bản viết b ng HTML ằ

Phương thức hoạt động của 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 đó

2.8 Bootstrap:

Bootstrap là một framework CSS được Twitter phát triển Nó là một tập hợp các b ộchọn, thuộc tính và giá tr có sẵn để giúp web designer tránh vi c lị ệ ặp đi lặ ạp l i trong quá trình t o ra các class CSS và nhạ ững đoạn mã HTML gi ng nhau trong d án web ố ựcủa mình Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích được vi t dế ựa trên JQuery(Carousel, Tooltip, Popovers , )

2.9 Jquery:

Jquery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web JQuery thêm tương tác Ajax vào trong trang web của bạn

JQuery được thiết kế để thay đổi cách viết Javascript của bạn Chỉ với 10 dòng lệnh JQuery bạn có thể thay thế cả 20 chục dòng lệnh DOM JavaScript