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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.02 MB, 24 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

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:

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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!

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>CHƯƠNG I: TỔNG QUAN VỀ ĐỀ TÀI NGHIÊN CỨU. </b>

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ế ứ <b>ới. </b>

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

<b>FrameWork). </b>

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b> Xây dựng trang web “chuẩn Seo”. </b>

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

Đă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): ị

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<small>3 </small> 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ấ ả ả ẩ <b>ột cách dễ dàng. </b>

<small>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.</small> Thêm lo i s n ph m, màu cho lo i s n phạ ả ẩ ạ ả <b>ẩm. </b>

Kiểm tra và xử lý đơn đặt hàng. Theo dõi và ph n h i ý ki n khách hàng.ả ồ ế <small> </small>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

<b>2.1 SQL Sever </b>

SQL server hay còn được gọi là Microsoft SQL Server, nó từ viế ắ ủt t t c a MS SQL Server. Đây chính là một loại phần mềm đã được phát triển b i Microsoft và nó ở được s dử ụng để có th dể ễ dàng lưu trữ cho những dữ liệu dựa theo tiêu chuẩn RDBMS.

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,…

Hình 1: Tài Kho n ả

Hình 2: S n Ph m ả ẩ

Hình 3: Rank

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>2.4 T ng quan v ASP.NET: </b>ổ ề 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ì hồn tồ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.

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

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.

<b>Model: là các thành ph n ch</b>ầ ứ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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<small>7 </small> giao nhi m v cung c p dệ ụ ấ ữ liệu cho CSDL và lưu dữ liệu vào các kho ch a d ứ ữ liệu. T t c các nghi p vấ ả ệ ụ logic được thực thi ở Model. D ữ liệu vào t ừ người dùng sẽ thông qua View để kiểm tra ở Model trước khi lưu vào cơ sở dữ liệu. Vi c truy ệ xuất, xác nhận và lưu dữ liệu là m t ph n c a Model. ộ ầ ủ

<b>View: View hi n th</b>ể ị các thông tin cho người dùng của ứng dụng và được giao nhiệm v cho vi c nh n các dụ ệ ậ ữ liệu vào từ người dùng, gởi đi các yêu cầu người dùng đến bộ điều khiển (Controller), sau đó là nhận lại các phản hồi từ bộ điều khiển và hi n th kể ị ết qu ả cho người dùng. Các trang HTML, JSP, các thư viện th ể và các file ngu n là mồ ột phần của View.

<b>Controller: Controller là t ng trung gian gi</b>ầ ữ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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<small>8 </small> Hình 7: Mơ hình MVC

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

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 ế

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<small>9 </small> 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 ngồ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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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. ặ

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. ề

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<small>11 </small> 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 đó.

<b>2.8 Bootstrap: </b>

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. Ngồ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 ,...)

<b>2.9 Jquery: </b>

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.

</div>