TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front End TÊN ĐỀ TÀI Thiết kế, lập trình Fron End Website giày Giảng viên hướng dẫn ThS Ngu[.]
TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End TÊN ĐỀ TÀI Thiết kế, lập trình Fron-End Website giày Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện Sinh viên thực hiện: 1571020179: Dương Văn Môn 1571020226: Phan Văn Sơn 1571020209: Trần Trường Phước 1571020206: Hoàng Minh Phụng Hà Nội, tháng 12 năm 2022 TRƯỜNG ĐẠI HỌC ĐẠI NAM KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO BÀI TẬP LỚN MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front-End TÊN ĐỀ TÀI Thiết kế, lập trình Fron-End Website giày Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện Sinh viên thực hiện: 1571020179: Dương Văn Môn 1571020226: Phan Văn Sơn 1571020209: Trần Trường Phước 1571020206: Hoàng Minh Phụng Hà Nội, tháng 12 năm 2022 MỞ ĐẦU - Giới thiệu mơn học: Lập trình Front end việc sử dụng ngôn ngữ HTML, CSS hay ngôn ngữ lập trình Javascript để lập trình viên thiết kế giao diện ứng dụng trang web cho người dùng Những bạn nhìn thấy, “chạm”, “lướt”, tương tác hình kết lập trình Front end - Lý chọn đề tài: Trong năm gần đây, với nâng cao chất lượng sống người, nhu cầu mua sắm trang phục, phụ kiện, đặc biệt giày đề cao coi trọng Giờ đây, không coi giày phương tiện để di chuyển mà coi công cụ để thể cá tính phong cách thời trang thân Nhất lúa tuổi thiếu niên, người động mạnh mẽ, họ cần có cho đơi giày thật đẹp để mang lại tự tin thoải mái bước Như thấy thị trường việc cạnh tranh kinh doanh ngày trở nên liệt hầu hết cửa hàng vừa lớn tâm đến việc làm khách hàng thỏa mãn tiện lợi cách tốt Biết nhu cầu đó, đề tài “Xây dựng website bán bán giày thể thao MSP” xây dựng nhằm đáp ứng cho người tiêu dùng khắp nước thông qua hệ thống website họ đặt mua mặt hàng hay sản phẩm cần thiết Khơng cịn giúp cửa hàng quản lý tốt việc mua bán giúp mang lại lợi ích kinh doanh hiệu - Nội dung ứng dụng nội dung học vào đề tài: HTML, CSS, JS - Danh sách thành viên: Dương Văn Môn, Phan Văn Sơn, Trần Trường Phước, Hồng Minh Phụng - Phân cơng nhiệm vụ: Dương Văn Môn (Trang chủ + Word), Phan Văn Sơn + Trần Trường Phước (Admin+Sản phẩm) , Hoàng Minh Phụng (Giới thiệu + Liên hệ) LỜI CẢM ƠN Lời đầu tiên, em xin gởi lời cảm ơn chân thành đến giáo viên hướng dẫn ThS Nguyễn Đức Thiện Trong suốt thời gian học làm tập lớn tận tình hướng dẫn, định hướng giúp đỡ cho em suốt trình thực tập lớn này.Đồng thời, em xin cảm ơn quý thầy cô trường Đại Học Đại Nam truyền đạt kiến thức cần thiết kinh nghiệm quý báu cho em thời gian em học tập để em thực tốt tập Trong trình thực tập, kiến thức thời gian thực cịn hạn chế nên khơng thể tránh khỏi sai sót thiếu sót Vì em mong q thầy thơng cảm góp ý để em hồn thiện tập Và lời góp ý bước đệm để em phát triển sau Em xin kính chúc tồn thể quý thầy,cô trường Đại Học Đại Nam lời chúc sức khỏe thành công công tác giảng dạy học tập Em xin chân thành cảm ơn! Hà Nội, Tháng 12, Năm 2022 Sinh viên thực Dương Văn Mơn Trần Trường Phước Phan Văn Sơn Hồng Minh Phụng I Chương : Cơ sở lý thuyết lập trình web Front-End HTML HTML gì? HTML (HyperText Markup language) ngôn ngữ đánh dấu siêu văn , dung để tạo trang web HTML bao gồm số tập hợp thẻ dùng để : Định nghĩa cấu trúc trang web Định nghĩa nội dung trang web Tạo siêu liên kết để liên kết đến trang web khác Chèn âm thanh, hình ảnh, video ,… vào trang web Tập tin HTML gì? Tập tin HTML loại tin text có chứa thẻ HTML(tập tin có phần mở rộng html htm) Tập tin HTML gọi trang web Nếu cú pháp có bị sai trình duyệt khơng báo lỗi , hiển thị không ý muốn Cấu trúc HTML: Một tài liệu HTML gói cặp tag và Cặp tag và sẽ nơi mơ tả nhìn thấy trang Như vậy, trang web viết html có cấu trúc sau: Phần trình bày nội dung Ngồi phần body cịn có phần head, viết cặp tag Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm cặp tag nữa, là Giữa và là tên trang web hiển thị phía menubar Như trang web với lúc có cấu trúc sau: Tiêu đề trang web Phần trình bày nội dung Thẻ HTML Mỗi thẻ từ khóa bao quanh ngoặc nhọn (vd: ; ;) Mỗi thẻ HTML thường bao gồm cặp :thẻ mở (bắt đầu định dạng), thẻ đóng (kết thúc định dạng) Thẻ đóng giống thẻ mở , thẻ đóng có thêm dấu gạch chéo “/”trước tên thẻ (vd: ;;) Văn cần định dạng đặt thẻ đóng thẻ mở: Các khoảng trắng dư thừa ký tự xuống dòng bị bỏ qua Có loại thẻ : Thẻ đơn : Các thẻ có thẻ mở ( vd: ) Thẻ kép cặp thẻ đóng mở ( vd: ; ) Các thẻ lồng vào không chéo Vd :Tôi sinhviên
Vd sai:Tôi sinh
viên Một số thẻ có thêm thuộc tính Dùng để định số thuộc tính khác liên quan đến thẻ Nếu có , khai báo thẻ mở Vd:(color thuộc tính dùng màu sắc văn bản.) II CSS CSS gì? – CSS viết tắt cụm từ “Cascading Style Sheet”, ngơn ngữ quy định cách trình bày thẻ html trang web Là ngôn ngữ sử dụng nhiều lập trình web, nói CSS đời tạo nên cách mạng Đôi bạn bối rối nhận thấy đoạn code viết hiển thị khơng giống trình duyệt khác nhau, CSS giúp bạn giải toán – CSS quy định cách hiển thị nội dung thẻ HTML trình duyệt gần giống nhau, cách quy định thuộc tính cho thẻ HTML Phương thức hoạt động CSS tìm dựa vào vùng chọn, vùng chọn tên thẻ HTML, tên ID, class hay nhiều kiểu khác Sau áp dụng thuộc tính cần thay đổi lên vùng chọn Hình Giới thiệu CSS Tại phải học CSS? – Css tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc chỉnh màu nền,đường viền,đổ bóng cho thẻ html Nếu website mà làm html khơng sử dụng css website nhìn thơ xơ Bạn tưởng tượng xe máy mà bỏ hết lớp sơn áo bên ngồi cịn lại khung máy – CSS cung cấp cho bạn hàng trăm thuộc tính trình bày đành cho đối tượng với sáng tạo cao kết hợp thuộc tính giúp mang lại hiệu – Ngồi ra, CSS hỗ trợ tất trình duyệt khác Cấu trúc 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 VD: product-related-title p { font-family: var( main-text-font); font-size: 14px; font-weight: bold; color: #333333; } Cách chèn CSS vào HTML Trên thực tế có tới cách hay sử dụng chèn css vào website: – Cách 1: Chèn nội dung CSS vào cặp thẻ phần trang web Cách chèn CSS vào html body{background: red;} h1{ color:blue;font-size:12px;} Cách 1 – Cách :Chèn nội dung CSS vào trực tiếp thẻ mở thơng qua thuộc tính style: Cách chèn CSS vào html Cách 2 – Cách 3: Lưu nội dung CSS file riêng có phần mở rộng css chèn file vào website thông tin thẻ , thường file css chèn cặp thẻ Sau tao file có tên style.css vs nội dung sau: body { backgroud:red;} h1{font-size: 12px;color: blue;} Lúc chèn file vào website sau: Cách chèn CSS vào html Cách2 III JS JavaScript gì? – JS (viết tắt Javascript) tảng (cross-platform), ngôn ngữ kịch hướng đối tượng (object-oriented) Nó ngôn ngữ nhỏ nhẹ Chạy môi trường máy chủ lưu trữ (ví dụ: trình duyệt web), JavaScript kết nối với đối tượng môi trường để cung cấp kiểm sốt chương trình chúng – JavaScript ngơn ngữ lập trình dựa logic Nó sử dụng để sửa đổi nội dung trang web Và khiến hoạt động theo nhiều cách khác để đáp ứng với hành động người dùng Các cách sử dụng phổ biến cho JavaScript bao gồm hộp xác nhận, kêu gọi hành động thêm danh tính vào thơng tin có Hình JavaScript ngơn ngữ lập trình đa tảng Javascript dùng để làm gì: – JavaScript có thể ứng dụng nhiều lĩnh vực: Lập trình web Xây dựng ứng dụng cho website máy chủ Ứng dụng di động, app, trị chơi… Lợi ích dùng Javascript: Là ngơn ngữ lập trình phổ biến sử dụng 92% tảng website nay, JavaScript đã thể vai trò quan trọng với lĩnh vực Tầm quan trọng thể qua thao tác, cơng dụng như: – Triển khai tập lệnh phía máy khách – Viết mã phía máy chủ – Thiết kế web responsive – Google AMP – Nhiều chuyển đổi Hình JavaScript ứng dụng nhiều việc tạo dựng website Các thư viện Javascript phổ biến: Hiện có nhiều thư viện khung viết từ Javascript như: jQuery: Chuyên hiệu ứng js: Chuyên xây dựng ứng dụng thời gian thực AngularJS: Chuyên xây dựng ứng dụng trang cá nhân ReactJS: Chuyên viết ứng dụng mobile Một số thư viện khác như ExtJS, Sencha Touch,… Hình Ngơn ngữ Javascript viết lập trình viên tập Làm để thêm JavaScript website bạn? Để thêm chuỗi code JavaScript vào trang web, bạn cần gắn tag Ví dụ sau: Your JavaScript code Với quy tắc bản, bạn nên gắn JavaScript tag cho website bạn trừ bạn muốn thực thi thời điểm định yếu tố định trang web Bạn lưu code JavaScript file riêng gọi lên cần website IV Bootstrap Giới thiệu Bootstrap Bootstrap là framework HTML, CSS, và JavaScript phổ biến để phát triển trang web có yếu tố tính phản hồi tích hợp thiết bị di động Nếu bạn có nhu cầu muốn sở hữu một website chuẩn responsive, có khả tương thích trình duyệt thiết bị di động chắn cơng nghệ thành phần lý tưởng thiếu để dùng đến Bootstrap dùng để làm gì? Bootstrap giúp trình phát triển web nhanh dễ dàng Bootstrap bao gồm mẫu thiết kế dựa HTML CSS typography, forms, buttons, tables, navigation, modals, image carousels… plugin JavaScript tùy chọn Lợi ích dùng Bootstrap Phát triển giao diện nhanh chóng: Dễ dàng phát triển giao diện website cách nhanh, trang bình thường cắt xong ngày chưa tới ngày Chưa kể đến tính tương thích với trình duyệt thiết bị di động Dễ học, dễ sử dụng: Cộng đồng đông đúc tài liệu tham khảo rõ ràng sức mạnh Bootstrap Nền tảng tối ưu: Trong bootstrap đã tạo sẵn thư viện để lưu trữ mà nhà thiết kế sử dụng tuỳ ý chỉnh sửa theo mục đích cá nhân Điều giúp cho việc phát triển website trở nên nhanh chóng lựa chọn mẫu có sẵn phù hợp thêm màu sắc, hình ảnh, video có giao diện đẹp Hơn nữa, bootstrap sự tương thích với trình duyệt thiết bị kiểm tra nhiều lần nên hồn tồn n tâm với kết làm, chí cịn bỏ qua bước kiểm tra lại, tiết kiệm thời gian, tiền bạc cho website Giao diện đầy đủ, sang trọng: Giao diện bootstrap có màu xám bạc sang trọng hỗ trợ gần đầy đủ thành phần mà website đại cần có Cầu trúc HTML rõ ràng giúp nhanh chóng nắm bắt cách sử dụng phát triển Khơng vậy, bootstrap cịn giúp website hiển thị tốt co dãn hình windows Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap hỗ trợ thêm tính customizer, bạn thay đổi gần tất thuộc tính để phù hợp với chương trình Nếu tuỳ chình khơng đáp ứng u cầu mình, hồn tồn chỉnh sửa trực tiếp mã nguồn bootstrap Boostrap tương thích tốt với HTML5 Hỗ trợ SEO tốt: Đây lý quan trọng Google cập nhật thuật tốn tìm kiếm Responsive yếu tố quan trọng để đưa từ khóa lên top Những file Bootstrap nhiều người sử dụng Bootstrap.css Bootstrap.css framework CSS có chức xếp quản lý bố cục trang web Trong HTML có nhiệm vụ quản lý cấu trúc nội dung trang web, CSS xử lý bố cục trang web Vì mà, hai cấu trúc phải tồn song song để thực hành động cụ thể Với chức nó, CSS cho phép bạn tạo giao diện thống nhiều trang web khác Giờ bạn tốn thời gian với việc phải ngồi hàng để chỉnh sửa thủ công với thay đổi độ rộng đường viền.Với Bootstrap.css, tất bạn cần làm dẫn trang web đến file CSS Bất kỳ thay đổi cần thiết thực file đó.Các hàm CSS khơng giới hạn kiểu văn chúng cịn sử dụng để định dạng bảng bố cục hình ảnh Vì CSS có nhiều khai báo chọn, nên bạn cần chút thời gian để CSS ghi nhớ Bootstrap.JS Bootstrap.JS phần cốt lõi Bootstrap bao gồm file JavaScript đảm nhiệm cho việc tương tác website Để giúp tiết kiệm thời gian viết cú pháp, nhà phát triển sử dụng đến jQuery Bootstrap.JS có thư viện JavaScript đa tảng với mã nguồn mở phổ biến cho phép người dùng thêm chức khác vào trang web.Dưới số chức mà jQuery đảm nhiệm: Thực yêu cầu Ajax như: loại bỏ liệu đến từ vị trí khác cách linh hoạt Giúp tạo tiện ích đơn giản nhanh chóng sưu tập Plugin JavaScript jQuery tạo hình động tùy chỉnh thuộc tính CSS Thêm tính động cho nội dung trang Web bạn Tuy Bootstrap cần thuộc tính Element HTML CSS hoạt động tốt, cần đến jQuery để tạo thiết kế Responsive Nếu khơng, bạn sử dụng phần tĩnh CSS mà Glyphicons Để tạo nên giao diện trang web hoàn chỉnh thiếu icons Chúng sử dụng để tạo liên kết với hành động liệu định giao diện người dùng Và Bootstrap sử dụng Glyphicons để đáp ứng nhu cầu này.Bootstrap bao gồm Halflings Glyphicons mở khóa để sử dụng miễn phí V Jquery Ở phiên này, người dùng lựa chọn giao diện chuẩn phù hợp với chức thiết yếu.Nếu bạn muốn muốn sử dụng icon có phong cách hơn, bạn mua icon premium khác mà Glyphicons có bán, chắn giao diện trang web bạn trơng đẹp Ngồi ra, bạn tải biểu tượng riêng biệt miễn phí trang web khác Flaticon, GlyphSearch Icons8 Hãy lựa chọn sử dụng icons phù hợp với trang web bạn cần Cách nhúng Bootstrap vào HTML Nhúng từ liên kết Bootstrap : !DOCTYPE html> Cảm ơn bạn quan tâm đến Vietnix Cảm ơn bạn quan tâm đến Vietnix Nhúng Bootstrap vào HTML cách tự Host : Welcome to website Welcome to Website V Jquery Jquery gì? Jquery thư viện JavaScript thiết kế đơn giản hóa thao tác HTML DOM, xử lý kiện, hoạt ảnh CSS, Ajax Nó phần mềm mã nguồn mở, miễn phí sử dụng giấy phép MIT License Jquery dùng để làm gì? Jquery là một thuật ngữ phổ biến lập trình web, dùng để thư viện javascript bật Nó giúp xây dựng cách chức cho website javascript, dễ dàng, nhanh chóng, đa dạng. jQuery được ứng dụng giúp website có tính tương tác, hấp dẫn, thêm animation để tạo cảm giác sinh động, thơng minh Lợi ích sử dụng Jquery Đơn giản, dễ sử dụng: Với cú pháp đơn giản, người dùng phải viết dòng lệnh để tạo chức tương tự, giúp tiết kiệm thời gian cho lập trình viên Là thư viện lớn javaScript: Có khả thực thi nhiều chức so với thư viện javaScript khác Cộng đồng mã nguồn mở mạnh mẽ (một số plugin jquery có sẵn): JQuery có cộng đồng người dùng lớn giúp phát triển plugin Nhờ mà hàng trăm plugin viết sẵn để tải lập tức, giúp đẩy nhanh trình viết code lập trình viên Đồng thời, script đảm bảo an toàn hiệu cao Có sẵn nhiều tài liệu hướng dẫn cụ thể: Các trang web JQuery có sẵn tài liệu hướng dẫn chi tiết, kể người làm lập trình tham khảo áp dụng thực tế Hỗ trợ Ajax: JQuery giúp người dùng dễ dàng phát triển template Ajax Khơng vậy, Ajax cịn giúp giao diện website trở nên thu hút hơn, thực chức trang mà tải lại toàn trang Các module phổ biến Jquery Ajax (xử lý Ajax) Effect (xử lý hiệu ứng) DOM (xử lý Data Object Model) Event (xử lý kiện) Form (xử lý kiện liên quan đến form) Attributes (xử lý thuộc tính đối tượng HTML) Selector (xử lý luồng lách đối tượng HTML) Cách sử dụng Jquery Cài đặt Jquery nội : html> The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello Sử dụng CDN : The jQuery Example $(document).ready(function(){ document.write("Hello, World!"); }); Hello CHƯƠNG : ỨNG DỤNG XÂY DỰNG FRONT-END CHO WEBSITE GIÀY ... TIN BÁO CÁO BÀI TẬP LỚN MÔN THỰC TẬP CNTT3 – Thiết kế, lập trình Front- End TÊN ĐỀ TÀI Thiết kế, lập trình Fron -End Website giày Giảng viên hướng dẫn: ThS Nguyễn Đức Thiện Sinh viên thực hiện:... ngơn ngữ lập trình Javascript để lập trình viên thiết kế giao diện ứng dụng trang web cho người dùng Những bạn nhìn thấy, “chạm”, “lướt”, tương tác hình kết lập trình Front end - Lý chọn đề tài: ... gian em học tập để em thực tốt tập Trong trình thực tập, kiến thức thời gian thực hạn chế nên khơng thể tránh khỏi sai sót thiếu sót Vì em mong q thầy thơng cảm góp ý để em hồn thiện tập Và lời