BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH LẬP TRÌNH WEB .NET MVC 5 ...

Có thể bạn quan tâm

Tải bản đầy đủ (.docx) (67 trang)

Trang chủ

Công Nghệ Thông Tin

Kỹ thuật lập trình

BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH LẬP TRÌNH WEB .NET MVC 5 BÁN HÀNG CÔNG NGHỆ

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.3 MB, 67 trang )

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ TPHCMKHOA CÔNG NGHỆ THÔNG TIN*****ĐỒ ÁN MÔN HỌCLẬP TRÌNH WEBBÁN HÀNG CÔNG NGHỆGVHD:Nguyễn Thúy LoanSVTH:NGUYỄN XUÂN PHÚC1311070709HỒ VĂN QUANG1311071546NGUYỄN TRỌNG QUÝ1311070905TPHCM, Ngày 15/05/20171MỤC LỤC2CHƯƠNG I: TỔNG QUAN VẤN ĐỀ NGHIÊN CỨU.1.1 Giới thiệu đề 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ạnhmẽ, 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 trangwebsite bán hàng nhanh. Nên nhóm chúng em quyết định chọn đề tài xây dựngtrang website bán hàng công nghệ . Với mong muốn giúp cho cửa hàng kiếm thêmthu 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ânthiện giúp cho khách hàng mua được thuận lợi hơn, khách hàng sẽ được muanhữ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ửahà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 MVC5 hỗ trợ người phát triển cácứng dụng web trên nền .NET Framework trong đó có tích hợp công nghệ LINQvớ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 webASP.NET MVC5, Xây dựng Website bán hàng công nghệ ” để thực hiện đồ án lậptrình web đáp ứng theo chương trình đào tạo của Trường, đồng thời mong muốngó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 Websitebá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 MVC5.Tìm hiểu các công nghệ hỗ trợ như: HTML5, CSS3, Ajax, Jquery, Web Sevice…Tìm hiểu về ngôn ngữ và kiến thức tương tác CSDL (LINQ to SQL và EntityFrameWork).Cách điều khiển dữ liệu(Controller).3Tìm hiểu về thanh toán trực tuyến vào web để cung cấp chức năng thanh toánonline qua các thẻ…Tìm hiểu về Domain Hosting và triển khai vận hành Website trên môi trườngInternet.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ớingười dùng hơn.Tìm hiểu Google API để đăng nhập bằng gmail cho trang website.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 đổitiề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ínhthâ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.•Xem quảng cáo.•Đă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ácsản phẩm.•Gửi liên hệ cho công ty TTBShop.•Xem nơi bán của shop thông qua Google Map trên trang liên hệ, giới thiệu.4 Người quản trị (Admin):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.52 CHƯƠNG II: TÌM HIỂU VỀ CƠ SỞ LÝ THUYẾT2.1 Tổng quan về ASP.NET:2.1.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ớ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ôngnhữ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ònhỗ 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 ứngdụng Web. ASP.Net là kỹ thuật lập trình và phát triển ứng dụng web ở phíaServer (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 clientside), 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 đượcServer đọc, biên dịch và thi hành, kết quả tự động được chuyển sangHTML/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.1.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ộtkiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phầnmềm (đặc biệt đối với phát triển ứng dụ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ànhphần khác.6Model: 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ữ liệu như các Class, hàm xử lý... Modelđược giao nhiệm vụ cung cấp dữ liệu cho CSDL và lưu dữ liệu vào các khochứ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.View: View hiển thị các thông tin cho người dùng của ứng dụng và được giaonhiệ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ườidùng đến bộ điều khiển (Controller), sau đó là nhận lại các phản hồi từ bộ điềukhiển và hiển thị kết quả cho người dùng. Các trang HTML, JSP, các thư việnthể 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 đượcgiao 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ànhphần View hiển thị. ActionServlet, Action, ActionForm, struts-config.xml là cácthà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 độngxử 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 ứngvới 1 yêu cầu cụ thể từ người dùng. Controller sẽ lựa chọn action phù hợp vớiyê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ẽ7chuyể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.Hình 2.1: Mô hình MVC2.2 Giới thiệu mô hình lập trình Web bằng ASP.NET MVC5ASP.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ảngASP.NET MVC có đặc điểm nổi bật là nhẹ (lightweight), dễ kiểm thử phần giaodiệ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ế (designpattern) 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 WebForms và cơ chế postbacks. Đôi khi có những ứng dụng kết hợp cả hai kiến trúctrên.•Tách bạch các tác vụ của ứng dụng (logic nhập liệu, business logic, và logic giaodiệ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áctính năng chính của mô hình MVC được cài đặt dựa trên Interface và được kiểmthử 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ình8ASP.NET, và điều đó giúp unit test được áp dụng nhanh chóng và tiện dụng. Bạncó 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 thaythế một cách dễ dàng hoặc dễ dàng tùy chỉnh. Bạn có thể nhúng thêm viewengine, cơ chế định tuyến cho URL, cách kết xuất tham số của action-methodvà các thành phần khác. ASP.NET MVC cũng hỗ trợ việc sử dụng DependencyInjection (DI) và Inversion of Control (IoC). DI cho phép bạn gắn các đối tượngvà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ượng khác,đối tượng đầu sẽ lấy đối tượng thứ hai từ một nguồn bên ngoài, ví dụ như từ tậptin 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ựngnhững ứng dụng có các địa chỉ URL xúc tích và dễ tìm kiếm. Các địa chỉ URLkhô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ácmẫ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ớilập địa chỉ theo kiểu REST.• Hỗ trợ sử dụng đặc tả (các thẻ) của các trang ASP.NET (.aspx), điều khiểnngườ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-lineexpression (<%= %>), sử dụng server controls, mẫu, data-binding, địa phươnghó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ình…• ASP.NET MVC bổ sung một view engine mới là Razor View Engine cho phépthiế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.92.3 Hoạt động của các thành phần chính trong ASP.NET MVC:• Khi 1 request phát sinh từ web browser đi đến IIS Web Server thì request đó cuốicùng được đưa đến 1 MVC Handler.• MVC Handler có nhiệm vụ chọn ra đúng 1 Controller để xử lý request đó.Controller được tạo ra bởi 1 thành phần được gọi là Controller Factory.• Sau khi được tạo ra, Controller sẽ xác định request này được xử lý bởi ActionMethod cụ thể nào và sau đó sẽ thực thi Action Method đó. Action method có thểtương tác với những Model Class để có thể truy xuất dữ liệu hoặc thực thi một sốbusiness logic.• Sau khi hoàn tất xử lý Action Method đó sẽ trả về 1 Action Result. ASP.NETMVC cung cấp nhiều Action Result, trong đó có 1 Action Result đặc biệt là ViewResult. Action Result này có nhiệm vụ làm việc với 1 View nhất định để tạo ramã HTML để trả về cho web browser và người dùng có thể nhận được kết quả xửlý.• View Engine là thành phần thực hiện hiển thị 1 View, đi kèm với ASP.NET MVClà Webform View Engine tức là chúng ta có thể viết View bằng ASPX.10Hình 2.2: Mô tả hoạt động của MVC trong ASP.NET2.4Tại sao phải sử dụng ASP.NET?Yêu cầu về xây dựng các ứng dụng thương mại điện tử ngày càng đuợc phát triểnvà nâng cao. Khi đó ASP không còn đáp ứng được yêu cầu đặt ra. ASP được thiếtkế riêng biệt và nằm ở tầng phía trên hệ điều hành Windows và InternetInformation Service, do đó các công dụng của nó hết sức rời rạc và giới hạn.ASP.Net đưa ra một phương pháp phát triển hoàn toàn mới khác hẳn so với ASPtrước kia và đáp ứng được các yêu cầu đặt ra.2.5Ưu điểm và khuyết điểm của ASP.NET:Ưu điểm:• ASP chỉ sử dụng VBScript và JavaScript mà không sử dụng được cácngôn ngữ mạnh khác: Visual Basic, C++… Trong khi đó ASP.NET chophép viết nhiều ngôn ngữ: VBScript, JavaScript, C#, Visual Basic.Net, …• ASP.Net sử dụng phong cách lập trình mới: Code behide. Tách code riêng,giao diện riêng dễ đọc, dễ quản lý và bảo trì.• Trong các trang ASP chúng ta phải viết mã để kiểm tra dữ liệu nhập từngười dùng, ASP.NET hỗ trợ các validation controls để kiểm tra chúng takhông cần viết mã, ...• Hỗ trợ phát triển Web được truy cập trên các thiết bị di động: PocketPC,••••Smartphone…Hỗ trợ nhiều web server control.Hỗ trợ thiết kế và xây dựng MasterPage lồng nhau.Hỗ trợ bẫy lỗi (debug) JavaScript.Cho phép người dùng thiết lập giao diện trang Web theo sở thích cá nhân••••sử dụng Theme, Profile, WebPart.Tăng cường các tính năng bảo mật (security).Hỗ trợ kỹ thuật truy cập dữ liệu mới LINQ.Hỗ trợ kỹ thuật xây dụng các ứng dụng đa phương tiện SilverLight.Hỗ trợ kỹ thuật bất đồng bộ ASP.Net Ajax.11• ASP.Net hỗ trợ mạnh mẽ bộ thư viện phong phú và đa dạng của .NetFramework, làm việc với XML, Web Service, truy cập cơ sở dữ liệu qua••••ADO.Net, …ASPX và ASP có thể cùng hoạt động trong 1 ứng dụng.Kiến trúc lập trình giống ứng dụng trên Windows.Hỗ trợ quản lý trạng thái của các control.Tự động phát sinh mã HTML cho các Server control tương ứng với từngloại Browser.• Hỗ trợ nhiều cơ chế Cache.• Triển khai cài đặt: Không cần lock, không cần đăng ký DLL, cho phépnhiều hình thức cấu hình ứng dụng.• Hỗ trợ quản lý ứng dụng ở mức toàn cục: Global.aspx có nhiều sự kiệnhơn, quản lý session trên nhiều Server, không cần Cookies.• Trang ASP.Net được biên dịch trước. Thay vì phải đọc và thông dịch mỗikhi trang web được yêu cầu, ASP.Net biên dịch những trang web độngthành những tập tin DLL mà Server có thể thi hành nhanh chóng và hiệuquả. Yếu tố này làm gia tăng tốc độ thực thi so với kỹ thuật thông dịch củaASP.Khuyết điểm:• Đổi với dự án nhỏ việc áp dụng mô hình MVC gây cồng kềnh, tốn thờigian trong quá trình phát triển.• Tốn thời gian trung chuyển dữ liệu của các thành phần.Sự khác biệt mô hình lập trình Web ASP.NET MVC và ASP.NETWebform:2.6Các tính năngASP.NET WebFormASP.NET MVCKiến trúc chươngtrìnhKiến trúc sử dụng việc phânKiến trúc mô hình WebForm –chia chương trình thành:> Bussiness –> DatabaseModels, Views, ControllersCú pháp chươngtrìnhSử dụng cú pháp của Các sự kiện được điều khiểnWebForm, tất cả các sự kiện và bởi controllers, các controls12controls do server quản lýkhông do server quản lýTruy cập dữ liệuSử dụng hầu hết các công nghệ Phần lớn dùng LINQ và SQLtruy cập dữ liệu trong ứng class để tạo mô hình truy cậpdụngđối tượngDebugDebug phải thực hiện tất cảDebug có thể sử dụng các unitbao gồm các lớp truy cập dữtest để kiểm tra các phươngliệu, sự hiển thị, điều khiển cácthức trong controllerscontrolsTốc độ phân tảiPhân tải nhanh hơn do khôngTốc độ phân tải chậm khi trongphải quản lý ViewState đểtrang có quá nhiều các controlsquản lý các controls trongvì ViewState quá lớntrangTươngtácJavaScriptTương tác với JavaScript dễTương tác với JavaScript khóvớidàng vì các đối tượng khôngkhăn vì các controls được điềudo server quản lý điều khiểnkhiển bởi serverkhông khóURL addressCấu trúc địa chỉ URL có dạng: Cấu trúc địa chỉ rành mạch, dễ<filename>.aspx?&Controllers/Action/ID2.7 Ajax:2.7.1 Ajax là gì nhỉ?Ajax là một khái niệm có thể mới lạ với những bạn mới học lập trình web đôi lúc cácbạn nghĩ nó là một ngôn ngữ lập trình mới. Nhưng thực tế không như vậy, ajax là mộtkỹ thuật viết tắt của chữ AJAX = Asynchronous JavaScript and XML, đây là một côngnghệ giúp chung ta tạo ra những Web động mà hoàn toàn không reload lại trang nênrất mượt và đẹp. Đối với công nghệ web hiện nay thì ajax không thể thiếu, nó là mộtphần làm nên sự sinh động cho website. Còn đối với ngành SEO thì khi sửdụng ajax lại không tốt, tại vì con bọ google sẽ không index được, nhưng thực tế ta cócách khắc phục lỗi này, vấn đề này ta sẽ tìm hiểu nó ở một bài khác.Ajax được viết bằng ngôn ngữ Javascript nên nó chạy trên client, tức là mỗi máy (user)sẽ chạy độc lập không hoàn toàn ảnh hưởng lẫn nhau. Hiện nay có nhiều thư viện13javascript như jQuery hay Angular đều hỗ trợ kỹ thuật này nhằm giúp chúng ta thaotác dễ dàng hơn.2.7.2 Ajax hoạt động thế nào?Từ lâu, mọi người đã tưởng tượng ứng dụng máy tính rồi sẽ được lưu và chạy hoàntoàn trên web thay vì nằm bó buộc trong ổ cứng. Dù vậy, viễn cảnh đó vẫn chưa thểxảy ra do ứng dụng web bị hạn chế bởi nguyên lý rằng tất cả các thao tác phải đượcthực hiện thông qua HTTP (HyperText Transfer Protocol - Giao thức truyền tải quasiêu liên kết). Những hoạt động của người sử dụng trên trang web sẽ tạo ra một yêucầu HTTP tới server. Máy chủ thực hiện một số khâu xử lý như lấy lại dữ liệu, tínhtoán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trangHTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe có vẻhợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vaitrò của nó thì người dùng sẽ làm gì? Tất nhiên là chờ đợi.Để khắc phục hạn chếtrên, các chuyên gia phát triển giới thiệu hình thức trung gian - cơ chế xử lý AJAX giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa choứng dụng để giảm quá trình “đi lại” của thông tin và giảm thời gian phản ứng. Thayvì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còngiữ nguyên các phần khác. Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụngkhông bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát - dấuhiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, vớiứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có mộtthay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêuđề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng.Nhiều công ty khác cũng đang nối gót xu thế này như trang chia sẻ ảnh Flickr (hiệnthuộc Yahoo) hay công cụ tìm kiếm A9.com của Amazon. Yahoo dự định trong vàituần tới sẽ ra mắt bản Yahoo Mail Beta 1 sử dụng AJAX trên toàn thế giới (đangđược thử nghiệm giới hạn). Hòm thư mới sẽ được trang bị thêm nhiều tính năngthuộc Web 2.0 như RSS, chế độ xem thư trước (preview)… Microsoft cũng đang14triển khai chương trình Windows Live Mail và Windows Live Messenger hỗ trợAJAX.Những dự án trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đanghiện diện ngay trong thế giới thực, từ mô hình rất đơn giản như Google Suggest đếntinh vi và phức tạp như Google Maps.Thách thức lớn nhất khi tạo ứng dụng AJAX không nằm ở khâu kỹ thuật bởi nhữngthành phần của nó đã xuất hiện từ lâu, hoạt động ổn định và được hiểu người biếtđến. Vấn đề ở đây chỉ là “các chuyên gia thiết kế cần quên đi những giới hạn củaweb, bắt đầu nghĩ rộng hơn, sâu hơn về khả năng của công nghệ và sáng tạo nó theocách riêng của mỗi người”, Alexei White, Giám đốc sản xuất của công ty eBusiness(Mỹ), nhận xét. “AJAX sẽ làm mất dần ảnh hưởng của Microsoft trên thị trường.Tuy chưa thể lấn át hoàn toàn, nó sẽ mang lại những tính năng thay thế cho hầu hếtcác sản phẩn như Office”.2.7.3Nhược điểm của AJAX?AJAX có thể góp phần tạo nên một thế hệ mới cho ứng dụng web (như colr.org haybackpackit.com). Tuy nhiên, nó cũng là một công nghệ “nguy hiểm” khi gây rakhông ít rắc rối về giao diện người dùng. Chẳng hạn, phím “Back” được đánh giácao trong giao diện website chuẩn. Đáng tiếc, chức năng này không hoạt động ănkhớp với Javascript và mọi người không thể tìm lại nội dung trước đó khi bấm phímBack. Bởi vậy, chỉ một sơ xuất nhỏ là dữ liệu trên trang đã bị thay đổi và khó có thểkhôi phục lại được. Đây là một trong những nguyên nhân chính khiến nhiều ngườikhông ủng hộ ứng dụng Javascript.Bên cạnh đó, mọi người không thể lưu lại địa chỉ web vào thư mục Favorite(Bookmark) để xem lại về sau. Do áp dụng lớp trung gian để giao dịch, các ứngdụng AJAX không có một địa chỉ cố định cho từng nội dung. Khiếm khuyết nàylàm cho AJAX dễ “mất điểm” trong mắt người dùng.15Những trình duyệt hỗ trợ AJAX là Microsoft Internet Explorer 5.0 trở lên; browserdựa trên Gecko như Mozilla, Firefox, SeaMonkey, Epiphany, Galeon và Netscape7.1; trình duyệt chứa KHTML API 3.2 trở lên như Konqueror, Apple Safari…CSS - tập tin định kiểu theo tầng (Cascading Style Sheets) - được dùng để miêu tảcách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHTML, XML, SVG,XUL… Các thông số kỹ thuật của CSS do tổ chức World Wide Web Consortium(W3C) quản lý.DOM - mô hình đối tượng tài liệu (Document Object Model) - là một giao diện lậptrình ứng dụng (API). Thông thường DOM có dạng một cây cấu trúc dữ liệu vàđược dùng để truy xuất các tài liệu HTML và XML. Mô hình DOM hoạt động độclập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tàiliệu.DHTML, hay HTML động, tạo một trang web bằng cách kết hợp các thành phần:ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ lệnh máy khách (như Javascript) và ngônngữ định dạng CSS và DOM. Do có khả năng phong phú, DHTML còn được dùngnhư một công cụ xây dựng các trò chơi đơn giản trên trình duyệt.2.8HTML:2.8.1 HTML là gì?HTML là chữ viết tắt của cụm từ HyperText Markup Language ( dịch là Ngôn ngữđánh dấu siêu văn bản ), đượ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.Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Webvà chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩntrên môi trường Internet).Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) đượcquy đị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ặc16ngọ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ằngHTML 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 đượckhai 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ộnglà .html hoặc .htm.2.8.2 HTML được xử lý ra sao?Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảmnhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽchuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do các bot máytính hiểu).2.8.3 Dùng chương trình gì để tạo tập tin HTML?HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo vănbản không có chức năng định dạng văn bản để tạo ra một tập tin HTML. TrongWindows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì cóthể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phảilưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó.17Hình 2.3: ví dụ soạn thảo HTML bằng NotepadTuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo, nên chúng tasẽ dùng một chương trình khác tương tự để soạn thảo HTML. Và mình cũng khôngbao giờ khuyến khích bạn sửa một tập tin HTML bất kỳ bằng chương trinh Notepad đểtránh gặp các lỗi hiển thị ký tự tiếng Việt.2.8.4 HTML đóng vai trò gì trong website?Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai tròxây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số(media) như hình ảnh, video, nhạc.2.9CSS:CSS là gì?Là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìmvà đị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ần18tử 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 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 đổi cấu trúc,…rất nhiều.Hình 2.4: ví dụ CSS trang trí thêm cho văn bản viết bằng HTMLPhươ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ẽ ápdụng các thuộc tính cần thay đổi lên vùng chọn đó.2.10 Bootstrap:2.10.1 Bootstrap là gì?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 trongquá trình tạo ra các class CSS và những đoạn mã HTML giống nhau trong dự ánweb của mình. Ngoài CSS ra, thì bootstrap còn hỗ trợ các function tiện ích đượcviết dựa trên JQuery(Carousel, Tooltip, Popovers ,...)192.10.2 Vì sao phải dùng nó?Được viết bởi những người có óc thẩm mỹ và tài năng trên khắp thế giới. Sự tươngthích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tin tưởng kếtquả mình làm ra và nhiều khi không cần kiểm tra lại. Vì vậy, giúp cho dự án củabạn tiết kiệm được thời gian và tiền bạc.Chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng Bootstrapđể tạo nên một trang web sang trọng và đầy đủ. Nhưng lại không cần code quánhiều CSS.Với giao diện mặc định là màu xám bạc sang trọng, hỗ trợ các component thôngdụng mà các website hiện nay cần có. Vì nó là opensource nên bạn có thể vào mãnguồn của nó để thay đổi theo ý thích của bản thân.Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive. Bootstrapđược viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobile trước.Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kích thướcmàn hình. Nhờ đó mà chúng ta không cần xây dựng thêm một trang web riêng biệtcho mobile.Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer. Giúp chodesigner có thể lựa chọn những thuộc tính, component phù hợp với project của họ.Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy.2.11 Jquery:2.11.1 Jquery là gì?Jquery là một thư viện kiểu mới của Javascript giúp đơn giản hóa cách viếtJavascript và tăng tốc độ xử lý các sự kiện trên trang web. JQuery thêm tương tácAjax 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ònglệnh JQuery bạn có thể thay thế cả 20 chục dòng lệnh DOM JavaScript.JQuery là 1 bộ thư viện khổng lồ hỗ trợ cho mọi ngôn ngữ lập trình mà người lậptrình chỉ cần có kiến thức về HTML đều có thể học được. Một lập trình viên sửdụng jquery để lập trình sẽ tiết kiệm được nhiều thời gian của người lập trình web.2.11.2 Jquery giúp ích gì cho người lập trình web?1. Truy cập các phần tử trong nội dung trang web:202. Jquery cho phép bạn chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễdàng như sử dụng CSS.3. Thay đổi hình thức giao diện của trang web:4. Jquery ra đời để lấp chỗ trống này, vì vậy bạn có thể sử dụng nó để giúp trang webcó thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có thể thay đổiclass hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào củaHTML ngay cả khi trang web đó đã được trình duyệt load thành công.5. Thay đổi nội dung trang web.6. jquery không chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổinội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể thêm hoặc bớt nộidung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sáchcó thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng cóthể được viết lại và mở rộng.7. Jquery cho phép các nhà phát triển web viết code javascript đơn giản hơn nhiều sovới cách truyền thống như là các vòng lặp và điều khiển mảng.2.11.3 Tại sao phải dùng Jquery?Có rất nhiều lí do để mình khuyên các bạn nên dùng jquery thay vì dùng javascriptphải nói đến đầu tiên đó chính là số plugin của jquery khá là khổng lồ giúp bạn tiếtkiệm được kha khá thời gian viết các ứng dụng liên quan đến giao diện , các hiệu ứng…Hơn nữa, jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiệntrên trang web, giúp tiết kiệm thời gian và công sức rất nhiều so với việc ngồi viếtjavascript theo cách thông thường. Đúng như khẩu hiệu của nó Viết ít hơn, làm nhiềuhơn, nếu không dùng jQuery thì một chuyên gia cũng phải viết mất vài trang giấymới làm được một nút Back to Top với hiệu ứng trượt, trong khi đó dân nghiệp dưchỉ cần vài dòng code ngắn ngủi. jQuery là đã có thể “múa rìu qua mắt thợ”. Bêncạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệtweb.212.12 HTML5:2.12.1 HTML5 là gì?HTML5 là một chuẩn mới và là thế hệ tiếp theo của ngôn ngữ đánh dấu siêu vănbản – HyperText Markup Language explained (gọi tắt là HTML). Các phiên bảntrước của HTML, như HTML 4.01 đã ra đời từ năm 1999. Cho đến nay các trangweb đã có những thay đổi rất nhiều kể từ đó. HTML5 vẫn còn trong giai đoạn pháttriển và hoàn thiện. Tuy nhiên, nhiều phiên bản trình duyệt mới hiện nay đã có cáchỗ trợ cho những phần tử, thẻ mới có trong HTML5 và các APIs.HTML5 là kết quả của sự hợp tác giữa tổ chức W3C và nhóm WHATWG.WHATWG làm việc với các web form và các ứng dụng, còn W3C thì được làm việcvới XHTML 2.0. Trong năm 2006, họ quyết định hợp tác và tạo ra một phiên bảnmới của HTML, đó chính là HTML5.2.12.2 HTML5 là vấn đề quan trọng của chúng ta?Như mọi người sử dụng web, bạn sẽ được hưởng lợi từ HTML5 bởi vì nó sửa chữanhững vấn đề sai sót rõ ràng nhất trong HTML4. Các trang wen sẽ có tiêu chuẩnweb tốt hơn, kết quả của nội dung hiệu quả hơn và cải thiện hiệu suất. Một khiHTML5 được áp dụng trên diện rộng, các trang web sẽ bắt đầu chạy nhanh hơn,băng thông sẽ tốn ít hơn khi được và thời gian “thọ” của pin trên các thiết bị di độngsẽ được kéo dài hơn.Một điều thêm nữa là bạn sẽ không cần phải giữ quá nhiều plugin như Flash và Javavì sự update. Hiện nay vấn đề này vẫn là một nguyên nhân gây phiền nhiễu chongười dùng khá nhiều. Người dùng phải liên tục cập nhật quá nhiều addon và plugincho mỗi trình duyệt. Và điều gì sẽ xảy ra khi một trong số chúng là phiên bản bị sai?Tất nhiên là các trang web ngừng hoạt động cho đến khi bạn khắc phục bằng sự cậpnhật đúng. Tất cả các điều đó sẽ được giải quyết ngay khi HTML5 trở thành tiêuchuẩn chính.Nếu bạn chỉ là một người sử dụng web thông thường và bạn không có ý định mãhóa hoặc duy trì trang web riêng của bạn, bạn không cần phải làm bất cứ điều gì để22thưởng thức các tính năng tuyệt vời của HTML5. Tất cả các trình duyệt hiện nayđược HTML5 hỗ trợ ở một mức độ lớn và bạn đã có thể được tận dụng lợi thế củanó mà không hề hay biết. Chỉ cần giữ cho trình duyệt của bạn được cập nhật thườngxuyên và bạn sẽ nhận được những gì tốt đẹp nhất.Và nếu bạn là một nhà phát triển web, HTML5 sẽ làm cho mọi thứ trở nên đơn giảnvà dễ dàng hơn cho bạn. Nếu mọi việc suôn sẻ, bạn sẽ không còn phải đối phó vớitrường hợp xấu, lỗi, trục trặc trong thiết kế web bởi vì tất cả các trình duyệt cần phảituân thủ các tiêu chuẩn như nhau.2.13 CSS3:Là phiên bản nâng cấp của CSS, CSS3 tuy chưa được chính thức sử dụng rộng rãinhưng những gì mà nó có thể làm được quả là rất đáng mong đợi. Về mặt nguyên lýthì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript. Bởi vì người ta nóirằng HTML dùng để thể hiện nội dung, CSS dùng để trình bày cấu trúc vàJavascript thì tương tác với người dùng. Nhưng những tính năng mới của CSS3 nhưtransition và animation phần nào đã làm thay đổi nguyên lý này.Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đến điều kiệntrình duyệt của người dùng không bật Javascript. Nhưng nếu trong tương lai (hyvọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơn giản mà không cầnsự hỗ trợ của Javascript thì cũng rất tiện.CSS3 được phát triển nhằm tăng sự tương thích với HTML5 trong việc bố cục trìnhbày nội dung. Giờ đây, những tài liệu HTML đã có một bố cục hết sức rõ ràng và dễhiểu, các thuộc tính CSS và các thẻ HTML giờ đã không còn bị chồng lấn mà đượcphân tách bằng các hàng “class” và “id”.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ừatrong HTML khi việc sử dụng những thẻ thuộc tính trong HTML không còn cầnthiết nữa.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ính23uyển chuyển của ứng dụng.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ềunhất để có sự điều chỉnh tốt nhất cho trình duyệt đó hoặc bạn có thể sử dụng một sốhàm fix hỗ trợ CSS3.243CHƯƠNG III: PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG3.1 Phân tích thiết kế các chức năng ứng dụng:3.1.1 Mô tả chức năng ứng dụng:Mục đích đề tài xây dựng hệ thống phần mềm hoạt trên môi trường web để quảnlý việc bán hàng được thuận tiện, rất dễ quản lý các sản phẩm giúp cho ngườiquản lý sẽ dễ dàng trong việc quản lý bán hàng cho khách có thể kiểm soát đượckhách hàng mua hàng và thống kê doanh thu của cửa hàng. Còn khách hàng muahàng trên web sẽ được thoải mải hơn không tốn thời gian để đến cửa hàng, màvẫn mua được sản phẩm mà mình thích.Bộ phận quản lý, thực hiện các nghiệp vụ sau (trước tiên muốn thực hiện cácnghiệp vụ cần phải đăng nhập tài khoản và mật khẩu thì mới thực hiện được cácchức năng. Trong đó đã phân quyền các nhân viên để thực hiện các chức năngkhác nhau, chỉ có người quản lý chính mới được đầy đủ quyền kiểm soát): 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. Xem tình trạng sản phẩm còn hàng hay hết hàng, nều hết thì cập nhật sản phẩmcho web bán hàng. Cập nhật giá mới cho sản phẩm. Nhập loại sản phẩm. Nhập nhà sản xuất. Nhập sản phẩm mới. Xem danh sách người liên hệ. Quản lý đơn hàngTrang web còn phục vụ cho khách hàng, với những chức năng sau: Tìm kiếm sản phẩm theo hãng Xem sản phẩm. Chọn sản phẩm và xem chi tiết sản phẩm.25

Tài liệu liên quan

Báo cáo đồ án chuyên ngành phần mềm xử lý
- 18
- 1
- 3
Báo cáo đồ án chuyên ngành xây dựng website bán hàng quà lưu niệm
- 68
- 3
- 18
Bài giảng - Giáo án: Bài tập HTML và CSS nâng cao dành cho chuyên gia lập trình Web
- 20
- 2
- 4
BÁO cáo đồ án THIẾT kế lập TRÌNH WEB
- 44
- 2
- 4
đồ án chuyên ngành chương trình quản lý thư viện
- 45
- 758
- 0
Báo cáo đồ án chuyên ngành chế tạo thiết bị hoạt hóa than từ tre, vỏ dừa
- 19
- 910
- 0
báo cáo đồ án xây dựng chương trình quản lý kho sơn
- 12
- 568
- 0
Báo cáo đồ án môn học lập trình ứng dụng mạng
- 40
- 1
- 1
BÁO CÁO ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB VÀ ỨNG DỤNG
- 59
- 5
- 30
BÁO CÁO ĐỒ ÁN PHÁT TRIỂN ỨNG DỤNG WEB Xây dựng website bán thiết bị Số qua mạng
- 87
- 2
- 6