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

TÀI LIỆU BÁO CÁO ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB ASP.NET. TÀI LIỆU BÁO CÁO ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB ASP.NET. TÀI LIỆU BÁO CÁO ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB ASP.NET. TÀI LIỆU BÁO CÁO ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB ASP.NET.

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TP HCM

Mục lục

LỜI NÓI ĐẦU

Chương 1: TỔNG QUAN ĐỀ TÀI -6

1 Giới thiệu đề tài và mô tả đề tài -6

- 1.1 Giới thiệu đề tài - 6

- 1.2 Mô tả đề tài - 6

2 Khảo sát ứng dụng liên quan -7

3 Kết quả mong muốn đạt được -8

- 3.1 Đối tượng và mục tiêu nghiên cứu -8

- 3.1.1 Đối tượng nghiên cứu -8

- 3.1.2 Mục tiêu nghiên cứu -8

- 3.1.3 Mục tiệu đề tài -8

Chương 2: CƠ SỞ LÝ THUYẾT -9

1 Giới thiệu về ngôn ngữ ASP.NET mô hình MVC 5 -9

- 1.1 Sơ lược về ASP.NET -9

- 1.2 Lịch sử phất triển của ASP.NET -9

- 1.3 Kiến trúc của MVC 5 -10

- 1.4 Sự khác biệt giữa ASP.NET Wedform và ASO.NET MVC -12

- 1.5 Ưu điểm và nhược điểm -13

2 Các công nghệ sử dụng -14

- 2.1 Ngôn ngữ HTML 5 - 14

- 2.2 Ngôn ngữ CSS 3 - 16

- 2.3 Thư viện JQuery - 17

- 2.4 Giới thiệu về Ajax -18

- 2.5 Giới thiệu về Bootstrap -19

3 Môi trường sử dụng để phát triển Website -20

4 Tính thực tiễn của Website -21

Chương 3: PHÂN TÍCH VÀ THIẾT KẾ ỨNG DỤNG -22

1 Phân tích yêu cầu đề tài -22

- 1.1 Đối với khách hàng truy cập website -22

- 1.2 Đối với người quản trị website -23

2 Thiết kế DataBase theo yêu cầu của đề tài -24

- 2.1 Các mô hình thiết kế dữ liệu -24

- 2.1.1 Mô hình tổng thể -24

- 2.1.2 Mô hình ERD - 25

- 2.1.3 Mô hình BFD - 25

- 2.1.4 Mô hình ngữ cảnh -26

- 2.1.5 Mô hình DFD - 26

- 2.2 Các sơ đồ thiết kế Database -27

- 2.2.1 Sơ đồ Use Case -27

- 2.2.2 Thứ tự thực hiện Use Case -28

- 2.3 Mô hình CSDL trên SQL server 2012 -28

- 2.4 Xác định kiểu dữ liệu cho từng thuộc tính của bảng -29

Chương 4: KẾT QUẢ ĐẠT ĐƯỢC -31

1 Giao diện chức năng và công nghệ thực hiện -31

- 1.1 Giao diện trang người dùng -31

- 1.2 Giao diện trang quản trị -34

Chương 5: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN -38

1 Kết quả nhận được - 38

- 1.1 Những điểm làm được -38

- 1.2 Những điểm chưa làm được -38

2 Hướng phát triển - 39

Chương 6: TÀI LIỆU THAM KHẢO -40

-LỜI NÓI ĐẦU

Ngày nay, khi mà ngành công nghệ thông tin ngày càng phát triển không ngừng, việcquản lý trở nên dễ dàng hơn Công nghệ thông tin giúp việc quản lý thông tin, truy cậpthông tin nhanh chóng để giúp tiết kiệm thời gian, chi phí và nâng cao hiệu quả quản lý,trong khi đó mạng internet được xem là một sản phẩm có giá trị hết sức lớn lao và ngàycàng trở thành một công cụ không thể thiếu,là nền tảng trong việc trao đổi và truyền tảithông tin trên toàn cầu Đồng thời khi thị trường càng lúc càng phát triển, nhu cầu củangười dùng ngày càng tăng cao, làm thế nào để có thể đáp ứng hết những yêu tố màkhách hàng đưa ra giúp cho khách hàng dễ dàng hơn trong việc chọn lựa cũng như tiếtkiệm thời gian và chi phí, những trang web bán hàng ngày càng phổ biến hơn, giờ đâymọi việc liên quan đến thông tin trở nên thật dễ dàng đối với người sử dụng, chỉ cần cómột thiết bị kết nối internet và một dòng dữ liệu thì cả thế giới hầu như có thể hiện ratrước mắt Dựa vào yếu tố đó nên việc mua bán thông qua internet ngày càng trở nên phổbiến hơn, đối với một cửa hàng hay shop việc quảng bá và giới thiệu đến khách hàng cácsản phẩm mới đáp ứng được nhu cầu của khách hàng là rất cần thiết Vậy để quảng bá thếnào đó là việc xây dựng một website cho cửa hàng để giới thiệu tất cả những sản phẩmmình có nhằm đáp ứng nhu cầu của người dùng

SINH VIÊN THỰC HIỆN

CHƯƠNG 1: TỔNG QUAN ĐỀ TÀI

1 Giới thiệu đề tài và mô tả đề tài

1.1.Giới thiệu đề tài

Internet ngày nay đã không còn xa lạ đối với bất cứ ai Internet phát triển với tốc

độ chóng mặt và ngày càng đi sâu vào mọi mặt của xã hội Sử dụng internet trong các hình thức kinh doanh giờ đã trở thành một khâu tất yếu Internet đã thay đổi thói quen kinh doanh cũng như mua sắm truyền thống Sử dụng website để thực hiện các giao dịch

mà không cần đến cửa mang đến rất nhiều lợi ích cho người mua cũng như người bán Chính vì những lí do đó, em quyết định xây dựng một website bán hàng nhằm mục đích giới thiệu và cung cấp các mỹ phẩm cao cấp Đây là một trong những trào lưu mua sắm hiện nay trong giới trẻ, các sản phẩm được nhập khẩu từ nước ngoài có các chứng nhận

rõ rang nguồn hàng uy tín Khách hàng thông qua website có thể đặt hàng cũng như tìm hiểu về các dòng mỹ phẩm cao cấp

1.2.Mô tả đề tài

Website xây dựng dựa trên nhu cầu của khách hàng về các dòng mỹ phẩm cao cấp

có xuất xứ cũng như uy tín cao Cung cấp các thông tin về sản phẩm, tạo điều kiện để khách hàng của có thể trải nghiệm tốt nhất về mua sắm trên website Từ đó, khách hàng

sẽ chọn được các sản phẩm phù hợp với sở thích và mục đính của mình Không chỉ từ phía khách hàng, thông qua website ban quản lí có thể nhanh chóng tiến hành các giao dịch, phân phối sản phẩm đến tay người mua hàng Không chỉ dừng ở đó từ các thông tin mua hàng trên website, sẽ được tổng hợp thống kê và liên tục cập nhật nhằm cải thiện sản phẩm cũng như hình thức tổ chức kinh doanh Nhờ vậy sẽ mang lại sự tương tác hai chiều giữa khách hàng và đơn vị kinh doanh Dẫn đến sự tin tưởng của khách hàng ngày cang nâng cao cũng như giúp hoạt động quản lí ngày càng hoàn thiện hơn

2 Khảo sát ứng dụng liên quan

2.1.Dunahouse.weebly.com

Trang web sửa dụng công cụ Weebly Nhưng vẫn chưa đầu tư vào phần thiết kế giao diện.Trang chủ được thiết kế khá giống với một blog cá nhân Chức năng hotline vẫn chưa được hiện thực

2.2.Hame.vn

Trang web này hoàn thiện hơn và cụng đạt top SEO của google Cách thiết kê chuyên nghiêp, có nhiều chức năng để cho người dùng trải nghiệm Không chỉ cung cấp các sản phẩm móc len, web cung cấp cả về các dụng cụ cũng như các bài hướng dẫn để tạo ra sảnphẩm.

3 Kết quả mong muốn đạt được

3.1.Đối tượng và mục tiêu nghiên cứu

3.1.1 Đối tượng nghiên cứuĐối tượng nghiên cứu của đề là Web bán hàng cung cấp các dòng mỹ phẩm cao cấp Website sẽ là môi trường trung gian thực hiện các giao dịch giữa khách hàng và đơn

vị cung cấp

3.1.2 Mục tiêu nghiên cứuXây dựng website bán hàng trên nên tảng ASP.NET MVC5 Thiết kế Full-Stack trên công cụ Visual Studio 2015

3.1.3 Mục tiêu đề tàiThiết kế website bán hàng với sản phẩm chính là các dòng mỹ phẩm cao cấp, thựchiện đầy đủ các chức năng của một web bán hàng Tạo ra môi trường thân thiện nhằm nâng cao trải nghiệm người dùng với sản phẩm Đồng thời cung cấp các chức năng giúp quản trị web như thống kê các đơn hàng, quản lí sản phẩm,đăng tin tức liên quan đến sản phẩm

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT

1 Giới thiệu về ngôn ngữ ASP.NET mô hình MVC Controller)

5(Model-View-1.1.Sơ lược về ASP.NET

ASP.NET sử dụng NET Framework, NET Framework là sự tổng hợp tất cáccác kỷ thuật cần thiết cho việc xây dựng một ứng dụng nền desktop, ứng dụng web,web services

ASP.NET là một nền tảng ứng dụng web (web application framework) đượcphát triển và cung cấp bởi Microsoft, cho phép những người lập trình tạo ra nhữngtrang web động, những ứng dụng web và những dịch vụ web Lần đầu tiên được đưa rathị trường vào tháng 2 năm 2002 cùng với phiên bản 1.0 của NET framework, là côngnghệ nối tiếp của Microsoft's Active Server Pages(ASP) ASP.NET được biên dịchdưới dạng Common Language Runtime (CLR), cho phép những người lập trình viết

mã ASP.NET với bất kỳ ngôn ngữ nào được hỗ trợ bởi NET language

1.2.Lịch sử phát triển của ASP.NET

Từ khoảng cuối thập niên 90, ASP (Active Server Page) đã được nhiều lập trìnhviên lựa chọn để xây dựng và phát triển ứng dụng web động trên máy chủ sử dụng hệđiều hành Windows ASP đã thể hiện được những ưu điểm của mình với mô hình lậptrình thủ tục đơn giản, sử dụng hiệu quả các đối tượng COM: ADO (ActiveX DataObject) - xử lý dữ liệu, FSO (File System Object) - làm việc với hệ thống tập tin…, đồngthời, ASP cũng hỗ trợ nhiều ngôn ngữ: VBScript, JavaScript Chính những ưu điểm đó,ASP đã được yêu thích trong một thời gian dài

Tuy nhiên, ASP vẫn còn tồn đọng một số khó khăn như Code ASP và HTML lẫnlộn, điều này làm cho quá trình viết code khó khăn, thể hiện và trình bày code khôngtrong sáng, hạn chế khả năng sử dụng lại code Bên cạnh đó, khi triển khai cài đặt, dokhông được biên dịch trước nên dễ bị mất source code Thêm vào đó, ASP không có hỗtrợ cache, không được biên dịch trước nên phần nào hạn chế về mặt tốc độ thực hiện.Quá trình xử lý Postback khó khăn,…

Đầu năm 2002, Microsoft giới thiệu một kỹ thuật lập trình Web khá mới mẻ vớitê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ữngkhô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ậptrình hướng đối tượng trong quá trình xây dựng và phát triển ứng dụng Web.

1.3.Kiến trúc của MVC 5

Mẫu kiến trúc Model – View – Controller được sử dụng nhằm chi ứng dụng thành

ba thành phần chính: model, view và controller Nền tảng ASP.NET MVC 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ẹ (lighweigt), 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ả haikiến trúc trên

Nền tảng MVC bao gồm các thành phần dưới đây:

Models: Các đối tượng Models là một phần của ứng dụng, các đối tượng này thiết lập

logic của phần dữ liệu của ứng dụng Thông thường, các đối tượng model lấy và lưu

trạng thái của model trong CSDL Ví dụ như, một đối tượng Product (sản phẩm) sẽ lấy

dữ liệu từ CSDL, thao tác trên dữ liệu và sẽ cập nhật dữ liệu trở lại vào bảng Products ở SQL Server.

Trong các ứng dụng nhỏ, model thường là chỉ là một khái niệm nhằm phân biệt hơn là được cài đặt thực thụ, ví dụ, nếu ứng dụng chỉ đọc dữ liệu từ CSDL và gởi chúng đến view, ứng dụng khong cần phải có tầng model và các lớp lien quan Trong trường hợp này, dữ liệu được lấy như là một đối tượng model (hơn là tầng model)

Views: Views là các thành phần dùng để hiển thị giao diện người dùng (UI) Thông

thường, view được tạo dựa vào thông tin dữ liệu model Ví dụ như, view dùng để cập nhật bảng Products sẽ hiển thị các hộp văn bản, drop-down list, và các check box dựa trên trạng thái hiện tại của một đối tượng Product

Controllers: Controller là các thành phần dùng để quản lý tương tác người dùng, làm việc

với model và chọn view để hiển thị giao diện người dùng Trong một ứng dụng MVC, view chỉ được dùng để hiển thị thông tin, controller chịu trách nhiệm quản lý và đáp trả nội dung người dùng nhập và tương tác với người dùng Ví dụ, controller sẽ quản lý các

dữ liệu người dùng gởi lên (query-string values) và gởi các giá trị đó đến model, model

sẽ lấy dữ liệu từ CSDL nhờ vào các giá trị này

Mẫu MVC giúp bạn tạo được các ứng dụng mà chúng phân tách rạch ròi các khía cạnh của ứng dụng (logic về nhập liệu, logic xử lý tác vụ và logic về giao diện) Mẫu MVC chỉ

ra mỗi loại logic kể trên nên được thiếp lập ở đâu trên ứng dụng Logic giao diện (UI

logic) thuộc về views Logic nhập liệu (input logic) thuộc về controller Và logic tác vụ (Business logic – là logic xử lý thông tin, mục đích chính của ứng dụng) thuộc về model

Sự phân chia này giúp bạn giảm bớt được sự phức tạp của ứng dụng và chỉ tập trung vào mỗi khía cạnh cần được cài đặt ở mỗi thời điểm Ví dụ như bạn chỉ cần tập trung vào giaodiện (views) mà không phải quan tâm đến logic xử lý thông tin của ứng dụng

Để quản lý sự phức tạp của ứng dụng, mẫu MVC giúp cho chúng ta có thể kiểm thử ứng dụng dễ dàng hơn hẳn so với khi áp dụng mẫu Web Forms Ví dụ, trong một ứng dụng ASP.NET Web Forms, một lớp thường được sử dụng để hiển thị thông tin xuất ra cho người dùng và đồng thời xử lý thông tin người dùng nhập Việc xây dựng các bộ test tự

động cho ứng dụng Web Forms là rất phức tạp, bởi để kiểm thử mỗi trang web, bạn phải khởi tạo đối tượng trang, khởi tạo tất cả các control được sử dụng trong trang và các lớp phụ thuộc trong ứng dụng Và bởi vì có quá nhiều lớp cần được khởi tạo để chạy được trang, thật khó để có thể viết các test chỉ tập trung vào một khía cạnh nào đó của ứng

dụng Và vì thế, kiểm thử đối với các ứng dụng dứa trên nền tảng Web Forms sẽ khó

khăn hơn nhiều so với khi áp dụng trên ứng dụng MVC Hơn thế nữa, việc kiểm thử trên nền tảng Web Forms yêu cầu phải sử dụng đến web server Nền tảng MVC phân tách các thành phần và sử dụng các interface (khái niệm giao diện trong lập trình hướng đối

tượng), và nhờ đó có thể kiểm thử các thành phần riêng biệt trong tình trạng phân lập với các yếu tố còn lại của ứng dụng

Sự phân tách rạch ròi ba thành phần của ứng dụng MVC còn giúp cho việc lập trình diễn

ra song song Ví dụ như một lập trình viên làm việc với view, lập trình viên thứ hai lo cài đặt logic của controller và lập trình viên thứ ba có thể tập trung vào logic tác vụ của

model tại cùng một thời điểm

1.4.Sự khác biệt giữa ASP.NET Webform và ASP.NET MVC

ASP.net WebForm sử dụng ViewState để quản lý, các trang ASP.net đều có lifecycle,postback và dùng các web controls, các event để thực hiện các hành động cho UI (UserInterface) khi có sự tương tác với người dùng nên hầu hết ASP.net WebForm xử lý chậm.ASP.net MVC chia ra làm 3 phần: Models, View, Controller Mọi tương tác của ngườidùng với Views sẽ được thực hiện hành động trong Controllers, không còn postback,lifecycel và events

Việc kiểm tra (test), gỡ lỗi (debug) với ASP.net WebForm đều phải chạy tất cả các tiếntrình của ASP.net, và sự thay đổi ID của bất kỳ Controls nào cũng ảnh hưởng đến ứngdụng Đối với MVC thì việc đó có thể sử dụng các unit test có thể thẩm định rất dễ dàngcác Controllers thực hiện như thế nào

Sau đây là bảng so sánh các tính năng của ASP.net WebForm với ASP.net MVC:

1.5.Ưu điểm và nhược điểm

Các sự kiện được điều khiểnbởi controllers, các controlskhông do server quản lý

Truy cập dữ liệu Sử dụng hầu hết các công nghệ

truy cập dữ liệu trong ứngdụng

Phần lớn dùng LINQ và SQLclass để tạo mô hình truy cậpđối tượng

Debug Debug phải thực hiện tất cả

bao gồm các lớp truy cập dữliệu, sự hiển thị, điều khiển cáccontrols

Debug có thể sử dụng cácunit test để kiểm tra các

controllers

Tốc độ phân tải Tốc độ phân tải chậm khi trong

trang có quá nhiều các controls

vì ViewState quá lớn

Phân tải nhanh hơn do khôngphải quản lý ViewState đểquản lý các controls trongtrang

Tương tác với

JavaScript

Tương tác với JavaScript khókhăn vì các controls được điềukhiển bởi server

Tương tác với JavaScript dễdàng vì các đối tượng không

do server quản lý điều khiểnkhông khó

URL address Cấu trúc địa chỉ URL có dạng:

<filename>.aspx?&<các thamsố>

Cấu trúc địa chỉ rành mạch

Controllers/Action/ID

 Tạo thành mô hình chuẩn cho nhiều dự án, các chuyên gia sẽ tiếp cận – tìmhiểu những dự án đó một cách nhanh chóng và hiệu quả Nếu bạn nắm rõ môhình MVC của một dự án nào đó, thì khi tiếp cận với một dự án khác mà bạnchưa từng biết hoặc tiếp xúc, nhưng nó lại được xây dựng với mô hình MVCthì sẽ không khó khăn gì mà cực kỳ dễ dàng Học một nhưng có thể hiểu và sửdụng được mười.

 Giúp các chuyên gia lập trình, nhà quản lý, nhà đầu tư, PM… có thể hiểu được

dự án hoạt động ra sao hoặc giúp các lập trình viên dễ dàng quản lý – pháttriển dự án Nó không phải ngôn ngữ, nhưng khi họ cùng nhìn vào nó thì sẽ tựhiểu nó là gì, khi đó họ có thể trao đổi các yêu cầu và bàn bạc công việc

 Đây là một mô hình chuẩn, nó tối ưu nhất hiện nay so với nhiều mô hình khác

và được sử dụng trong nhiều dự án và nhiều lĩnh vực, đặc biệt trong công nghệsản xuất ứng dụng – phần mềm Các lập trình viên sử dụng mô hình chuẩnMVC để có thể dễ dàng phân phối và chuyển giao công nghệ

 Đây là mô hình đơn giản, xử lý những nghiệp vụ đơn giản, và dễ dàng triển khai với các dự án nhỏ

Nhược điểm:

 Yêu cầu về chuyên môn khá cao, có kiến thức vững về các mô hình chuẩn;Khótriển khai với những dự án yêu cầu phúc tạp hơn Hiện nay đang có một khái niệm mô hình mới đó là HMVC đang dần thay thế cho MVC

2 Các công nghệ sử dụng

2.1.Ngôn ngữ HTML 5

HTML 5 là một ngôn ngữ được thiết kế để thiết lập nội dung web Nó nhằm làm cho việc thiết kế web và phát triển web dễ dàng hơn bằng cách tạo một giao diệnngôn ngữ đánh dấu chuẩn hóa và trực quan HTML5 cung cấp các phương tiện phân tích và phân định các trang của bạn, và nó cho phép bạn tạo các thành phần rời rạc không chỉ được thiết kế để cấu tạo trang web một cách hợp lý mà còn được tạo ra để cung cấp cho trang web các khả năng thông tin HTML5 có thể được gọi là “cách tiếp cận thông tin thông qua thiết kế” do nó kết hợp yếu tố cơ bản về lập bản đồ thông tin, phân chia và ghi nhãn thông tin giúp dễ dàng sử dụng và hiểu thông tin Đây là nền tảng của tiện ích ngữ nghĩa và thẩm mỹ gây ấn tượng sâu sắc của HTML5 HTML5 cung cấp khả năng xuất bản tất cả mọi thứ trên thế giới từ nội dung văn bản đơn giản

đến đa phương tiện phong phú, tương tác cho các nhà thiết kế website và các nhà phát triển ở mọi trình độ.

HTML5 cung cấp:

 Các thẻ mô tả chính xác những gì chúng được thiết kế để chứa đựng

 Tăng cường khả năng truyền thông trên mạng

 Cải thiện khả năng lưu trữ chung

 Các trình làm việc trên nền Web (Web Workers) để chạy các quá trình nền

 Giao diện WebSocket để thiết lập kết nối liên tục giữa các ứng dụng cư trú

và máy chủ

 Truy vấn dữ liệu đã được lưu trữ tốt hơn

 Cải thiện tốc độ nạp và lưu trang trên một website chuyên nghiệp

 Hỗ trợ cho CSS3 để quản lý giao diện người dùng đồ họa (GUI), có nghĩa

là HTML5 có thể được định hướng nội dung

 Cải thiện xử lý biểu mẫu trình duyệt

 Một API cơ sở dữ liệu dựa trên-SQL cho phép lưu trữ cục bộ, phía máy khách

 Canvas và video, để thêm đồ họa và video mà không cần cài đặt các plug-incủa bên thứ ba

 Đặc tả Geolocation API (API định vị toàn cầu), sử dụng khả năng định vị của máy điện thoại thông minh để kết hợp các dịch vụ và các ứng dụng đám mây di động

 Các biểu mẫu cải tiến làm giảm nhu cầu phải tải về mã JavaScript, cho phép truyền thông hiệu quả hơn giữa các thiết bị di động và các máy chủ điện toán đám mây

Các thẻ mới trong HTML5 có tính hấp dẫn cao, bao gồm cả vai trò và cách sử

dụng của chúng Các phiên bản trước của HTML thường dùng các thẻ không có gì nổi

bật cả Tuy nhiên, HTML5 có các nhãn trực quan, có khả năng mô tả cao Nó cung cấp các nhãn nội dung phong phú ngay lập tức xác định nội dung Ví dụ, thẻ <div> đãđược bổ sung bằng các thẻ<section> và <article> Ngoài ra các

thẻ <video>, <audio>, <canvas>, và <figure> cũng đưa ra sự mô tả chính xác hơn về các kiểu nội dung cụ thể

2.2.Ngôn ngữ CSS 3

CSS3 là một chuẩn mới nhất của CSS, hay nói cách khác nó là một Version mới của CSS Nó được chia ra làm nhiều module và mỗi module sẽ có những nhiệm vụ khác nhau, khi kết hợp chúng với nhau sẽ tạo nên những hiệu ứng tuyệt vời

Với CSS3 nếu bạn kết hợp với jQuery nữa thì website của bạn sẽ trở nên sinh động, điển hình là các hiệu ứng Paralax, Landing Page, …

CSS3 không phải là một thành phần của HTML5 nhưng lại có quan hệ mật thiết với HTML5 do được phát triển song song với HTML5:

 Thành phần của CSS3

 Backgrounds, borders, RGAa color, gradeint

 Image Values and Replaced Content

Media Queries mới được ra mắt trong CSS3 hỗ trợ tính tương thích với nhiều kíchthước màn hình khác nhau mà không cần chỉnh sửa nội dung hiển thị, làm tăng tính uyển chuyển của ứng dụng

Ngoài việc hỗ trợ về giao diện thì CSS3 còn giúp bạn loại bỏ những đoạn code thừa trong HTML khi việc sử dụng những thẻ thuộc tính trong HTML không còn cần thiết nữa

Bằng việc sử dụng duy nhất một file css, bạn sẽ luôn chắc chắn về sự đồng bộ về giao diện giữa những trang khác nhau trong cùng một website Ngoài ra, khi muốn thay đổi giao diện của website thì bạn cũng chỉ cần thay đổi một lần duy nhất trong file css đó.

Css3 là ngôn ngữ được hỗ trợ bởi hầu hết các trình duyệt trên thế giới Và nó thể hiện một website trên nhiều trình duyệt khác nhau cũng khá nhất quán Tuy nhiên, người thiết kế web vẫn cần xác định rõ trình duyệt được người dùng sử dụng nhiều nhất để có

sự điều chỉnh tốt nhất cho trình duyệt đó

Kết hợp cùng HTML5, CSS3 làm cho những ứng dụng web và bản thân trang webtrở nên hấp dẫn và chuyên nghiệp hơn nhờ những đặc điểm nổi bật so với các thế hệ ngônngữ trước đó

2.3.Thư viện Jquery

jQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resig vào năm

2006 với một phương châm tuyệt vời: Write less, do more.

jQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệu ứng động

và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đã không còn quá xalạ

jQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ đa dạngvới việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quan trọng được hỗ trợbởi jQuery:

 Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử DOM

để traverse một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội dung của

chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi

là Sizzle.

 Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơn bằng việc

xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lên vớicác Event Handler

 Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một site giàu tính

năng và phản hồi tốt bởi sử dụng công nghệ AJAX

 Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng và đẹp mắt

mà bạn có thể sử dụng trong các Website của mình

 Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng 19KB

(gzipped)

 Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery được hỗ trợ

hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+,Safari 3.0+, Chrome và Opera 9.0+

 Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3

Selector và cú pháp XPath cơ bản

2.4.Giới thiệu về Ajax

AJAX không phải là một công nghệ Nó là tập hợp của nhiều công nghệ với thếmạnh của riêng mình để tạo thành một sức mạnh mới AJAX bao gồm:

 Thể hiện Web theo tiêu chuẩn XHTML và CSS;

 Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);

 Trao đổi và xử lý dữ liệu bằng XML và XSLT;

 Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest;

 Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript

Ajax là từ viết tắt của các từ Asynchronous JavaScript và XML nói nôm na là mộtcông nghệ hoạt động kết hợp giữa JavaScript, XML và môi trường hoạt động bất đồng

bộ, những ai mớ

Khi bạn có sự tương tác với website mà chỉ có một phần của website đó thay đổi

mà không load lại hết trang web người tao gọi đó là bất đồng bộ, ngược lại là đồng bộ vì

nó làm toàn trang web load lại Ví dụ như khi bạn comment trên facebook thì chỉ có

comment được hiển thị và ai đó comment cũng thấy hiển thị lên mà cả trang facebook không load lại hoàn toàn người ta gọi đó là môi trường bất đồng bộ

Ứng dụng và ưu điểm của Ajax

Do cách thức hoạt động của nó bất đồng bộ nên cho ứng dụng web chúng ta load nhanh hơn rất nhiều, thay vì load lại toàn trang thì bây giờ chỉ có phần nào chúng ta

tương tác mà thôi, ví dụ chúng ta đăng nhập khi nhập tên pass và submit thì sẽ hiện lên

ngay khung đăng nhập kết quả thay vì load lại trang, hoặc bình chọn một sự kiện nào đó, khi mình bình chọn hiển thị luôn … rất nhiều ứng dụng của Ajax vào thiết kế web.

Mặt khác Ajax là một công cụ truyền tải dữ liệu ngầm giữ máy con duyệt web và server do vậy nó tương thích với mọi ngôn ngữ lập trình web: PHP, ASP.Net hay JSP … đều kết hợp với Ajax được cả

2.5.Giới thiệu về Bootstrap

Bootstrap là một framework cho phép thiết kế website reponsive nhanh hơn và dễ dàng hơn

Bootstrap là bao gồm các HTML templates, CSS templates và Javascript tao ra những cái

cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image

carousels và nhiều thứ khác Trong bootstrap có thêm các plugin Javascript trong nó

Giúp cho việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn

Lịch sử Bootstrap

Bootstrap là dược phát triển bởi Mark Otto và Jacob Thornton tại Twitter Nó được xuất bản như là một mã nguồn mở vào tháng 8 năm 2011 trên GitHub Tính ra đến thời điểm mình viết bài viết này nó cũng đã phát triển được 3 năm rồi Bản bootstrap mới nhất bây giờ là bootstrap 3

Ưu điểm khi sử dụng Bootstrap

Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript chỉ cẩn có kiến thức cơ bản về 3 cái đó là có thể sử dụng bootstrap tốt

Tính năng Responsive: Bootstrap’s xây dựng sẵn reponsive css trên các thiết bị phones, tablets, và desktops

Mobile: Trong Bootstrap 3 mobile-first styles là một phần của core framework

Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera)

3. Môi trường sử dụng để phát triển Website

Website được xây dựng trên trình biên dịch Visual Studio phiên bản 2015

Microsoft Visual Studio là một môi trường phát triển tích hợp từ Microsoft Nó được sử dụng để phát triển chương trình máy tính cho Microsoft Windows, cũng như các

trang web, các ứng dụng web và các dịch vụ web Visual Studio sử dụng nền tảng phát triển phần mềm của Microsoft như Windows API, Windows Forms, Windows

Presentation Foundation, Windows Store và Microsoft Silverlight Nó có thể sản xuất cả hai ngôn ngữ máy và mã số quản lý

Visual Studio bao gồm một trình soạn thảo mã hỗ trợ IntelliSense cũng như cảitiến mã nguồn Trình gỡ lỗi tích hợp hoạt động cả về trình gỡ lỗi mức độ mã nguồn và gỡlỗi mức độ máy Công cụ tích hợp khác bao gồm một mẫu thiết kế các hình thức xây

dựng giao diện ứng dụng, thiết kế web, thiết kế lớp và thiết kế giản đồ cơ sở dữ liệu Nó chấp nhận các plug-in nâng cao các chức năng ở hầu hết các cấp bao gồm thêm hỗ trợ cho các hệ thống quản lý phiên bản (như Subversion) và bổ sung thêm bộ công cụ mới như biên tập và thiết kế trực quan cho các miền ngôn ngữ cụ thể hoặc bộ công cụ dành cho các khía cạnh khác trong quy trình phát triển phần mềm

Visual Studio hỗ trợ nhiều ngôn ngữ lập trình khác nhau và cho phép trình biên tập

mã và gỡ lỗi để hỗ trợ (mức độ khác nhau) hầu như mọi ngôn ngữ lập trình Các ngôn ngữ tích hợp gồm có C, C++ và C++/CLI (thông qua Visual C++), VB.NET (thông qua Visual Basic.NET), C thăng (thông qua Visual C#) và F thăng (như của Visual Studio 2010[2]) Hỗ trợ cho các ngôn ngữ khác như J++/J thăng, Python và Ruby thông qua dịch

vụ cài đặt riêng rẽ Nó cũng hỗ trợ XML/XSLT, HTML/XHTML, JavaScript và CSS

4. Tính thực tiễn của ứng dụng

Đáp ứng nhu cầu mua sắm trên Internet của khách hàng Cung cấp các sản phẩm móc len – Arigurumi với giá thành hợp lí, chất lượng Đem đến sự trải nghiệm chuyên nghiệp cho khách hàng ghé thăm website Hỗ trợ hoạt động kinh doanh của nhà cung cấp.Thực hiện các chức năng quản lí sản phẩm cũng như đơn hàng Tạo ra môi trường thực hiện các giao dịch giữa nhà cung cấp và tiêu dùng một cách nhanh chóng và tiện lợi