Báo cáo môn cơ sở lập trình web

CHƯƠNG 1: TỔNG QUAN VỀ HTML, CSS VÀ JAVASCRIPT 1.1 HTML 1.1.1 HTML gì? HTML viết tắt Hypertext Markup Language ngơn ngữ lập trình dùng để xây dựng cấu trúc lại thành phần có website Một website thường chứa nhiều trang trang lại có tập tin HTML riêng Lưu ý, HTML khơng phải ngơn ngữ lập trình Điều có nghĩa khơng thể thực chức “động” Hiểu cách đơn giản hơn, tương tự phần mềm Microsoft Word, HTML có tác dụng bố cục định dạng trang web HTML kết hợp với CSS JavaScript trở thành tảng vững cho giới mạng 1.1.2 Lịch sử đời HTML HTML phát hành lần vào năm 1991 HTML tạo Tim Berners-Lee, nhà vật lý học trung tâm nghiên cứu CERN Thụy Sĩ Hiện nay, HTML trở thành chuẩn Internet tổ chức W3C (World Wide Web Consortium) vận hành phát triển Bạn tự tìm kiếm tình trạng HTML thời điểm website W3C Phiên HTML xuất năm 1991, gồm 18 tag HTML Phiên HTML 4.01 xuất năm 1999 Sau đó, nhà phát triển thay HTML XHTML vào năm 2000 Đến năm 2014, HTML nâng cấp lên chuẩn HTML5 với nhiều tag thêm vào markup, mục đích để xác định rõ nội dung thuộc loại (ví dụ như: , , , …) 1.1.3 Ưu điểm Nhược điểm HTML 1.1.3.1 Ưu điểm HTML • Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vơ lớn • Có thể hoạt động mượt mà hầu hết trình duyệt • Học HTML đơn giản • Các markup sử dụng HTML thường ngắn gọn, có độ đồng cao • Sử dụng mã nguồn mở, hồn tồn miễn phí • HTML chuẩn web vận hành W3C • Dễ dàng để tích hợp với loại ngơn ngữ backend (ví dụ như: PHP, Node.js,…) 1.1.3.2 Nhược điểm HTML • • • • Được dùng chủ yếu cho web tĩnh Đối với tính động, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP Nó thực thi số logic định cho người dùng Vì vậy, hầu hết trang cần tạo riêng biệt, kể sử dụng yếu tố, headers hay footers Một số trình duyệt chậm hỗ trợ tính Khó kiểm sốt cảnh thực thi trình duyệt (ví dụ, trình duyệt cũ không render tag mới) 1.1.4 Bố cục HTML Tiêu đề trang web Nội dung trang web đặt thẻ hmtl Bắt đầu thẻ mở kết thúc thẻ đóng → Trong đó: • : khai báo kiểu liệu hiển thị • : cặp thẻ bắt buộc, element cấp cao nhất, có nhiệm vụ đóng gói tất nội dung trang HTML • : khai báo thông tin meta trang web như: tiêu đề trang, charset • : cặp thẻ nằm bên thẻ , dùng để khai báo tiêu đề trang • : cặp thẻ dùng để đóng gói tất nội dung hiển thị trang 1.2 CSS 1.2.1 CSS gì? CSS chữ viết tắt cụm từ ‘Cascading Style Sheets’ CSS ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng để tạo phong cách định kiểu cho yếu tố viết dạng ngôn ngữ đánh dấu, HTML Nó điều khiển định dạng nhiều trang web lúc để tiết kiệm công sức cho người viết web Nó phân biệt cách hiển thị trang web với nội dung trang cách điều khiển bố cục, màu sắc, font chữ 1.2.2.Lịch sử CSS CSS lần đề xuất Håkon Wium Lie vào ngày 10 tháng 10 năm 1994 Vào thời điểm đó, Lie làm việc với Tim Berners-Lee CERN Một số ngôn ngữ định kiểu khác cho web đề xuất lúc thảo luận danh sách gửi thư cộng đồng đồng thuận World Wide Web Consortium dẫn đến CSS W3C (CSS1) phát hành vào năm 1996 Đặc biệt, đề nghị Bert Bos có ảnh hưởng ơng trở thành đồng tác giả CSS1 coi đồng sáng tạo CSS Tập tin định kiểu theo tầng tồn dạng hay dạng khác kể từ bắt đầu Ngôn ngữ đánh dấu tổng quát tiêu chuẩn (SGML -Standard Generalized Markup Language) vào năm 1980 CSS phát triển để cung cấp biểu định kiểu cho web 1.2.3 Ưu điểm nhược điểm CSS 1.2.3.1 Ưu điểm CSS • Nhiều phần tử HTML có nhiều tài liệu chứa lớp • Một tệp sử dụng để kiểm sốt nhiều tài liệu có kiểu khác • Các phương thức chọn nhóm sử dụng để nhóm kiểu trường hợp hỗn hợp • CSS giúp định kiểu thứ file khác, bạn tạo phong cách trước sau tích hợp file CSS lên file HTML Việc giúp HTML markup rõ ràng dễ quản lý nhiều • CSS khơng cần lặp lại mơ tả cho phần Nó tiết kiệm thời gian, làm code ngắn lại, kiểm soát lỗi dễ dàng 1.2.3.2 Nhược điểm CSS • Cần phải tải thêm vào tài liệu quan trọng có thơng tin định dạng • Nó khơng thực tế cho định nghĩa định dạng nhỏ • Để hiển thị tài liệu, trang định dạng bên phải tải 1.2.4 Bố cục CSS Cấu trúc đoạn CSS Một đoạn CSS bao gồm phần này: Vùng chọn { thuộc tính : giá trị; thuộc tính: giá trị; } Nghĩa khai báo vùng chọn, sau thuộc tính giá trị nằm bên cặp dấu ngoặc nhọn {} Mỗi thuộc tính ln có giá trị riêng, giá trị dạng số, tên giá trị danh sách có sẵn CSS Phần giá trị thuộc tính phải cách dấu hai chấm, dòng khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính 1.3 JavaScript 1.3.1 JavaScript gì? Một ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website sống động JavaScript cho phép kiểm soát hành vi trang web tốt so với sử dụng HTML Ứng dụng thực tiễn JavaScript Các slideshow, pop-up quảng cáo tính autocomplete Google Thế mạnh Javascript tương thích với nhiều thiết bị kết nối khác JavaScript ngơn ngữ lập trình hỗ trợ tất trình duyệt Firefox, Chrome, … chí trình duyệt thiết bị di động 1.3.2 Lịch sử JavaScript JavaScript tạo mười ngày Brandan Eich, nhân viên Netscape, vào tháng năm 1995 Được đặt tên Mocha, tên đổi thành Mona LiveScript Trong năm 1996, JavaScript thức đặt tên ECMAScript ECMAScript phát hành năm 1998 ECMAScript tiếp tục mắt vào năm 1999 Nó liên tục phát triển thành JavaScript ngày 1.3.3 Ưu điểm nhược điểm JavaScript 1.3.3.1 Ưu điểm JavaScript • JavaScript ngơn ngữ lập trình dễ học • Lỗi JavaScript dễ phát dễ sửa • JavaScript hoạt động nhiều trình duyệt, tảng • JavaScript giúp website tương tác tốt với khách truy cập • JavaScript nhanh nhẹ ngôn ngữ lập trình khác 1.3.3.2 Nhược điểm JavaScript • Dễ bị khai thác • Có thể dùng để thực thi mã độc máy tính người dùng Có thể bị triển khai khác tùy thiết bị dẫn đến việc khơng đồng • 1.3.4 Bố cục JavaScript → • • Cách -Nhúng JS HTML Cách thứ mã JavaScript viết nhúng văn HTML với thẻ Thẻ đặt bên thẻ văn HTML → - - Cách -Tải JS từ file Mã JavaScript Có thể không cần viết trực tiếp với file văn HTML Các mã viết file, thường file có đặt tên với phần mở rộng js sau tải vào HTML thẻ với cú pháp: Ví dụ mã JavaScript viết file javascript.js sau file nhúng vào HTML thẻ vị trí file thuộc tính src 1.3.5 Một số thư viện Javascript - AngularJS: Một thư viện dùng để xây dựng ứng dụng Single Page NodeJS: Một thư viện phát triển phía Server dùng để xây dựng ứng dụng realtime Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications) jQuery: Một thư viện mạnh hiểu ứng ReactJS: Một thư viện viết ứng dụng mobie 1.3.5.1 Thư viện jQuery JavaScript  JQuery thư viện kiểu Javascript giúp đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web Jquery hỗ trợ người dùng thao tác tốt Ajax với thư viện đơn giản dễ áp dụng Có thể chạy hầu hết trình duyệt jQuery kèm với nhiều hiệu ứng hình ảnh động mà bạn sử dụng trang web bạn Nói ngắn gọn, jQuery thư viện định nghĩa sẵn phương thức javascript để bạn viết code javascript nhanh hơn, đơn giản Chèn thư viện Jquery vào website: + Cách 1:Chèn thư viện vào web thẻ cặp thẻ , đặt tên file jquery.js + Cách 2: Chèn file jQuery từ CDN Google sau chèn thư viện vào web Cú pháp: $(document).ready(function(){ //code here }) 1.4 Kết luận HTML - ngôn ngữ đánh dấu sử dụng để cấu thành nội dung mang đến ngữ nghĩa cho trang web, ví dụ định danh cho đoạn văn, tiêu đề, liệu dạng bảng nhúng hình ảnh, video vào trang web CSS - ngôn ngữ định dạng áp dụng để tạo nên “vẻ ngồi” trang web, ví dụ thiết lập màu font chữ, bố trí nội dung dựa theo mơ hình cột Javascript - ngơn ngữ kịch cho phép tạo trang web động – cập nhật nội dung theo ngữ cảnh, điều khiển đa phương tiện, hoạt cảnh hình ảnh nhiều thứ khác CHƯƠNG 2: TỔNG QUAN VỀ ĐỀ TÀI 2.1.Mục tiêu đề tài Hiện nay, công nghệ thông tin xem ngành mũi nhọn quốc gia, đặc biệt quốc gia phát triển, tiến hành cơng nghiệp hóa đại hố nước ta Sự bùng nổ thông tin phát triển mạnh mẽ công nghệ kỹ thuật số, yêu cầu muốn phát triển phải tin học hố tất ngành, lĩnh vực Với kiến thức học lớp với dẫn tận tình thầy cơ, chúng em đưa ý tưởng thiết kế website mua sắm mỹ phẩm để tổng hợp kiến thức Các giao diện trang web thể chức nó, cụ thể:  Tổng quan website  Sản phẩm website  Hướng dẫn mua hàng website  Giới thiệu cửa hàng  Địa cửa hàng  Đăng nhập vào website  Đăng kí người dùng 2.2 Mơ tả tốn 2.2.1 Định nghĩa toán Hệ thống mua sắm mỹ phẩm Website cung cấp cho người sử dụng, nhà quản lý chức cần thiết để tiến hành giao dịch, quản lý hoạt động theo dõi tình hình phát triển cửa hàng Đối với khách hàng, hệ thống cho phép xem thông tin sản phẩm cửa hàng Sau đăng kí làm thành viên, khách hàng chọn sản phẩm website đưa vào giỏ hàng tiến hành giao dịch mua bán Sau chọn hàng xong khách hàng chuyển qua việc tốn hình thức toán, đồng thời chọn địa điểm xác định thời gian giao hàng Sau thực xong, khách hàng nhấn xác nhận để hoàn tất giao dịch Đối với nhân viên, người tiếp nhận đơn hàng người quản lý chuyển đến, thực việc giao hàng xác nhận việc giao hàng hồn tất Khi khách hàng có u cầu bảo hành sản phẩm mua cửa hàng, phận bảo hành tiến hành kiểm tra, sửa chữa gửi lại cho khách kèm theo hoá đơn toán bảo hành (nếu sản phẩm vượt thời gian bảo hành) Các thông tin việc bảo hành sản phẩm lưu lại sổ bảo hành 2.2.2 Các nhóm chức hệ thống Chức hệ thống chia làm nhóm chức sau: Nhóm chức đăng ký, đăng nhập thành viên Nhóm chức xem thông tin, bao gồm xem thông tin giỏ hàng, xem thông tin đơn hàng, xem thông tin sản phẩm, xem thơng tin cá nhân Nhóm chức quản lý thông tin, bao gồm quản lý thông tin cá nhân, quản lý danh sách thành viên, quản lý danh mục sản phẩm 2.2.3 Xác định thực thể Dựa mơ tả tốn, ta xác định thực thể hệ thống sau: Khách hàng: người giao dịch với hệ thống thông qua đơn đặt hàng, khách hàng chọn loại sản phẩm, chọn địa điểm thời gian giao hàng Khách hàng đăng ký làm thành viên hệ thống Người quản lý: người điều hành, quản lý theo dõi hoạt động hệ thống Nhân viên: người tiếp nhận xử lý đơn hàng, yêu cầu bảo hành người quản lý giao Thành viên: bao gồm người quản lý, nhân viên khách hàng đăng ký Sau đăng nhập để trở thành thành viên, chức chung 10 người sử dụng, có thêm số chức khác phục vụ cho công việc cụ thể đối tượng 2.2.4 Xác định Use case - - - Thực thể khách hàng có UC sau:  Đăng kí làm thành viên  Xêm thông tin sản phẩm  Xem thông tin giỏ hàng  Chọn sản phẩm cẩn mua  Thêm, bớt sản phẩm giỏ hàng  Thực việc mua hàng  Thanh toán  Yêu cầu bảo hành  Nhận lại sản phẩm sau bảo hành Thực thể Người quản lý có UC sau:  Tiếp nhận đơn hàng, nhận yêu cầu bảo hành  Giao cho nhân viên thực  Quản lý danh sách thành viên  Quản lý danh mục sản phẩm Thực thể Nhân viên có UC sau:  Thực việc giao hàng  Thực việc bảo hành sản phẩm  Báo cáo kết Ngoài ra, thành viên hệ thống bao gồm người quản lý, nhân viên khách hàng đăng ký làm thành viên cịn có UC sau:    Đăng nhập Xem thông tin cá nhân Sửa đổi thông tin cá nhân 11 CHƯƠNG 3:THIẾT KẾ GIAO DIỆN WEBSITE 3.1.Giao diện 3.1.1.Trang chủ 12 Gồm có chức giao diện sau: • Header: logo cửa hàng • Đăng nhập,Đăng ký • Thơng tin giỏ hàng • Thanh menu: gồm mục: Khuyến hot, Chăm sóc da, Trang điểm, Chăm sóc cá nhân, Chăm sóc sức khỏe, Tất thương hiệu,Thương hiệu hàng đầu • Giao diện thông tin ưu đãi: - Là slide show ảnh - Chứa thông tin ưu đãi diễn 13 • Giao diện truy cập nhanh: • Giao diện sản phẩm ưu đãi: • Giao diện sản phẩm u thích 14 • Giao diện thương hiệu hot • Footer 15 3.1.2 Trang thơng tin đặt hàng 16 3.1.3 Trang thương hiệu hàng đầu 17 3.1.4 Trang trang điểm 18 3.2 Đánh giá ưu nhược điểm Giao diện hệ thống 3.2.1 Ưu điểm Có nhiều ưu điểm hệ thống mua sắm mỹ phẩm việc hỗ trợ quản lý có số lợi ích thu thơng qua việc quản lý hệ thống phần mềm là: Một lợi khác bán mỹ phẩm online giúp bạn tiết kiệm chi phí đồng thời phù hợp bạn khởi nghiệp kinh doanh mỹ phẩm Bạn không cần chi phí để thuê mặt kinh doanh, lựa chọn địa điểm mở cửa hàng hay trang trí cửa hàng, nhờ giảm thiểu chi phí đầu tư ban đầu Ngoài ra, ưu điểm bán mỹ phẩm online so với kinh doanh truyền thống khách hàng ghé thăm website bán hàng nắm bắt thơng tin sản phẩm mỹ phẩm nhanh chóng thuận tiện với hình ảnh, thông số sản phẩm Đồng thời chủ cửa hàng cập nhật hàng nghìn sản phẩm lên website bán hàng Fanpage Facebook cửa hàng Nhím Cosmetic cách tiện lợi, nơi bạn trưng bày tất sản phẩm bật cửa hàng Ngồi cịn tương tác với khách mua hàng nhanh chóng thơng qua cơng cụ chat trực tuyến, liên hệ trực tuyến 3.2.2 Nhược điểm Tuy nhiên kinh doanh laptop mạng nhược điểm, nhược điểm chủ yếu hình thức kinh doanh khách hàng khơng sờ tận tay, nhìn tận mắt sản phẩm nên niềm tin khách hàng đặt vào sản phẩm vào việc mua hàng thiếu, đặc biệt mặt hàng laptop, giá trị sản phẩm có lên tới hàng chục triệu đồng Chính vậy, có điều kiện bạn nên kết hợp hai hình thức mở showroom, cửa hàng mỹ phẩm truyền thống kinh doanh mỹ phẩm online để gặt hái hiệu tối ưu Khách hàng sau ghé thăm website đến trực tiếp cửa hàng để xem sản phẩm thực tế đặt hàng, gia tăng tỷ lệ chốt khách mua hàng Còn kinh doanh mỹ phẩm với số vốn ít, muốn tiết kiệm chi phí kinh doanh online lựa chọn phù hợp 19 ... thầy cơ, chúng em đưa ý tưởng thiết kế website mua sắm mỹ phẩm để tổng hợp kiến thức Các giao diện trang web thể chức nó, cụ thể:  Tổng quan website  Sản phẩm website  Hướng dẫn mua hàng website... ngữ lập trình dễ học • Lỗi JavaScript dễ phát dễ sửa • JavaScript hoạt động nhiều trình duyệt, tảng • JavaScript giúp website tương tác tốt với khách truy cập • JavaScript nhanh nhẹ ngơn ngữ lập. .. khai báo thuộc tính ln có dấu chấm phẩy cuối Một vùng chọn sử dụng khơng giới hạn thuộc tính 1.3 JavaScript 1.3.1 JavaScript gì? Một ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website