Đồ án môn học lập trình web xây dựng website bán linh kiện máy tính theo mô hình mvc

Untitled TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ ĐỒ ÁN MÔN HỌC LẬP TRÌNH WEB XÂY DỰNG WEBSITE BÁN LINH KIỆN MÁY TÍNH THEO MÔ HÌNH MVC GVHD TH S NGUYỄN HỮU VĨNH SVTH CAO VĂN TÂM MSSV 18248[.]

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ

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

XÂY DỰNG WEBSITE BÁN LINH KIỆN MÁY

TÍNH THEO MÔ HÌNH MVC

GVHD: TH.S NGUYỄN HỮU VĨNH SVTH: CAO VĂN TÂM

MSSV: 1824801030183 SVTH: PHAN THẾ NHỰT MSSV: 1824801030209 LỚP: D18PM03

BÌNH DƯƠNG – 12/2020

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ

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

XÂY DỰNG WEBSITE BÁN LINH KIỆN MÁY

TÍNH THEO MÔ HÌNH MVC

GVHD: TH.S NGUYỄN HỮU VĨNH SVTH: CAO VĂN TÂM

MSSV: 1824801030183 SVTH: PHAN THẾ NHỰT MSSV: 1824801030209 LỚP: D18PM03

BÌNH DƯƠNG – 12/2020

i

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT KHOA KỸ THUẬT – CÔNG NGHỆ

NHẬN XÉT VÀ CHẤM ĐIỂM CỦA GIẢNG VIÊN

Họ và tên giảng viên: Nguyễn Hữu Vĩnh

Tên đề tài: XÂY DỰNG WEBSITE BÁN LINH KIỆN MÁY TÍNH THEO MÔ

HÌNH MVC

Nội dung nhận xét:

Điểm:

Bằng số:

Bằng chữ:

GIẢNG VIÊN CHẤM

(Ký, ghi rõ họ tên)

ThS Nguyễn Hữu Vĩnh

ii

MỞ ĐẦU

Ngày nay khoa học kỹ thuật trên thế giới nói chung, ở Việt Nam nói riêng đang trên đà phát triển mạnh mẽ và không ngừng nâng cao phát triển về mọi mặt Đặc biệt là ngành công nghệ thông tin Để đáp ứng nhu cầu ngày càng cao của con người thì hàng loạt các công ty về máy tính được ra đời và các ứng dụng công nghệ thông tin đang được áp dụng ngày một nhều hơn.Với công nghệ hiện đại như ngày nay thì con người dần dần được giải phóng bởi những công việc nặng nhọc và thay vào đó là những ứng dụng của công nghệ thông tin ngày một hiện đại và kỹ xảo như các robot, máy tự động, các phần mềm quản lý và rất nhiều các ứng dụng đang được áp dụng ngoài thực tiễn Nhưng bên cạnh đó cũng còn rất nhiều vấn đề về kỹ thuật mà con người cần phải khắc phục Hàng năm có rất nhiều máy tính, các phần mềm, ứng dụng

bị lỗi bị hỏng và lúc này chúng ta cần đến những người sửa chữa, khắc phục sự cố này Nhận thức được tầm quan trọng của vấn đề đó nên em

đã chọn đề tài thực tập: “

Qua đây em xin cám ơn các Thầy, cô đã giúp em trong quá trình học tập Đặc biệt em xin cảm ơn thầy Nguyển Hữu Vĩnh đã tận tình hướng dẫn và sửa những sai sót giúp em hoàn thành bài báo cáo này.

iii

MỤC LỤC

DANH SÁCH CÁC KÝ TỰ, CHỮ VIẾT TẮT vii

CHƯƠNG 1:GIỚI THIỆU CÔNG NGHỆ 1

CHƯƠNG 2: KHẢO SÁT VÀ THU THẬP YÊU CẦU 10

1.1 Thông tin cá nhân: 10

1.2 Các công nghệ sử dụng trong đề tài: 10

1.3 Khảo sát hiện trạng: 10

1.4 Mô tả bài toán: 10

1.5 Mô tả yêu cầu 10

1.6 Các chức năng của bài toán: 11

CHƯƠNG 3: PHÂN TÍCH HỆ THỐNG 11

PHẦN 1: XÁC ĐỊNH YÊU CẦU CỬA TỔ CHỨC 11

1.1 Khảo sát khách hàng 11

1.2 Yêu cầu sau khi khảo sát 11

PHẦN 2: PHÂN TÍCH QUY TRÌNH HOẠT ĐỘNG CỦA HỆ THỐNG 12

1.1 Hoạt động mua sản phẩm 12

1.2 Đăng ký sử dụng dịch vụ 12

1.3 Lập báo cáo 12

PHẦN 3: PHÂN TÍCH HỆ THỐNG THEO UML 12

1.1 Biểu đồ Use Case 12

CHƯƠNG 4 : Thiết kế cơ sở dữ liệu 14

1.1 Lớp sản phẫm 14

1.2 Lớp Nhà Sản Xuất 14

1.3 Lớp nhà cung cấp 15

1.4 Lớp loại sản phẫm 15

1.5 Lớp khách hàng 15

1.6 Lớp loại thành viên 15

1.7 Lớp thành viên 16

1.8 Lớp đơn đặt hàng 16

1.9 Lớp chi tiết đơn đặt hàng 16

1.10 Lớp phiếu nhập 17

Thiết kế cơ sở dữ liệu 17

iv

Chương 4: Cài đặt chương trình và giao diện chức năng của hệ thống website 18

1.1 Giao diên trang chủ(index) 18

1.2 Giao diện chức năng thanh Menu sản phẩm 19

1.3 Giao diện chức năng trang tìm kiếm sản phẩm 19

1.4 Giao diện trang sản phẫm (Product) 20

1.5 Giao diện trang chi tiết sản phẫm 20

1.6 Giao diện chức năng giỏ hàng 21

1.7 Giao diện trang đăng nhập 21

1.8 Giao diện trang đăng kí 22

KẾT LUẬN 23

TÀI LIỆU KHAM KHẢO 23

v

DANH MỤC HÌNH

Hình 1.Trang chủ website 18

Hình 2.Thanh Menu sản phẩm 19

Hình 3.Tìm kiếm sản phẩm 19

Hình 4.Trang sản phẫm 20

Hình 5.Trang chi tiết sản phẩm 20

Hình 6.Giao diện giỏ hàng 21

Hình 7.Giao diện đăng nhập 21

Hình 8.Giao diện đăng kí 22

vi

CHƯƠNG 1:GIỚI THIỆU CÔNG NGHỆ

 Model giúp lưu trữ dữ liệu của ứng dụng và trạng thái của nó Nó là một

cơ sở dữ liệu hoặc cũng có thể chỉ là một tập tin XML.

 View được coi là một giao diện người dùng được sử dụng bởi khách truy cập trang web của bạn để nhìn thấy các dữ liệu Các trang ASPX thường được sử dụng để hiển thị view trong các ứng dụng ASP.NET MVC.

 Controller chịu trách nhiệm xử lý các tương tác của người dùng với trang web Nó được sử dụng để xác định loại view nào cần phải được hiển thị Controller cũng được sử dụng cho mục đích giao tiếp với model.

Framework này là khá nhẹ và cung cấp khả năng kiểm thử, trong đó tích hợp với các tính năng hiện có của ASP.NET như xác thực (authentication) dựa trên membership và cả các master page.

Hiện nay Techmaster cũng đang có khóa học "Xây dựng mạng xã hội chia sẻ ảnh với ASP.NET MVC" Giảng viên là anh Nguyễn Thanh Tùng, kiến trúc sư giải pháp NET tại công ty MISA Anh Tùng còn là chuyên gia công nghệ Microsoft (Microsoft Most Valuable Professional).

Tại sao bạn nên sử dụng nó?

Bạn nên sử dụng ASP.NET MVC framework cho việc tạo ra các ứng dụng web

vì những lý do được liệt kê sau đây:

SoC

Một trong những lợi ích chính được đưa ra bởi ASP.NET MVC đó là Separation

of Concern (phân tách mối bận tâm) Framework này cung cấp sự phân tách rất

rõ gàng giữa model, logic nghiệp vụ, giao diện người dùng và dữ liệu.

Control

Khi bạn sử dụng framework ASP.NET MVC, bạn được cung cấp một bộ control rất mạnh mẽ trên JavaScript, HTML và CSS so với các control được cung cấp bởi một số hình thức truyền thống trên web.

Có khả năng kiểm thử

viii

Framework ASP.NET MVC hỗ trợ việc kiểm thử các ứng dụng web rất tốt Vì vậy, nếu bạn muốn kiểm thử ứng dụng web của mình trước khi đưa chúng cho người sử dụng, bạn có thể chỉ cần sử dụng ASP.NET MVC.

Gọn nhẹ

Framework này không sử dụng View State, hỗ trợ bạn trong việc làm giảm băng thông của các request rất nhiều Nhiều chuyên gia khuyên bạn nên sử dụng framework này nếu bạn quan tâm đến việc tạo ra các ứng dụng MVC tuyệt vời

và hữu ích dựa trên web.

View và Size của Control

Các framework ASP.NET thường phải đối mặt với vấn đề của view state và kích thước của control trong HTML Phần view lưu toàn bộ dữ liệu đã được rendered

và do đó kích thước các tập tin HTML trở nên lớn hơn Nếu bạn sử dụng một đường kết nối internet chậm, bạn sẽ quan sát thấy độ trễ trong việc tải các trang web và ứng dụng Vấn đề này không còn tồn tại trong framework ASP.NET MVC cũng như nó không chứa một khái niệm về view ở trong đó Bằng cách sử dụng ASP.NET MVC, bạn sẽ không còn phải đối mặt với các vấn đề về thời gian tải trang nữa.

Tích hợp

Khi bạn tích hợp MVC với jQuery, bạn có thể viết code của mình chạy trong các trình duyệt web Điều này sẽ giúp giảm tải cho các web server của bạn.

Khả năng sử dụng

Bạn không cần phải có nhiều kiến thức kỹ thuật khi sử dụng framework

ASP.NET MVC Tuy nhiên, bạn sẽ thích nó sau khi học được cách làm cho nó hoạt động Framework này tốt hơn rất nhiều so với nhiều hình thức trang web khác Lý do là nó hoạt động khá gần với các chiến lược làm việc của web và được coi là khá dễ dàng và thú vị để sử dụng.

API Services

Một lợi thế lớn khác đó là việc rendered bởi MVC giúp bổ sung thêm các API web services Nếu bạn muốn thêm các service tới ứng dụng web của mình, thì bạn chắc chắn cần phải tìm hiểu làm thế nào những service này hoạt động.

HTML là gì?

HTML là chữ viết tắt của Hypertext Markup Language Nó giúp người dùng tạo và cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading, links, blockquotes, vâng vâng

ix

HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra các chức năng “động” được Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạng trang web.

Khi làm việc với HTML, chúng ta sẽ sử dụng cấu trúc code đơn giản (tags và attributes) để đánh dấu lên trang web Ví dụ, chúng ta có thể tạo một đoạn văn bằng cách đặt văn bản vào trong cặp tag mở và đóng văn bản <p> và </p>

1. <p>Đây là cách bạn thêm đoạn văn trong HTML.</p>

2. <p>Bạn có thể thêm nhiều đoạn văn!</p>

Tổng quan, HTML là ngôn ngữ markup, nó rất trực tiếp dễ hiểu, dễ học, và tất cả mọi người mới đều có thể bắt đầu học nó để xây dựng website Sau đây là những gì bạn sẽ được tìm hiểutrong bài viết này:

Lịch sử của HTML

ở Thụy Sĩ Anh ta đã nghĩ ra được ý tưởng cho hệ thống hypertext trên nền Internet

Hypertext có nghĩa là văn bản chứa links, nơi người xem có thể truy cập ngay lập tức Anh xuất bản phiên bản đầu tiên của HTML trong năm 1991 bao gồm 18 tag HTML Từ đó, mỗi phiên bản mới của HTML đều có thêm tag mới và attributes mới

tags, mặc dù một vài trong số chúng đã bị tạm ngưng (không hỗ trợ bởi các trình duyệt hiện đại)

Nhanh chóng phổ biến ở mức độ chóng mặt, HTML được xem như là chuẩn mật của một website Các thiết lập và cấu trúc HTML được vận hành và phát triển bởi World Wide Web Consortium (W3C) Bạn có thể kiểm tra tình trạng mới nhất của ngôn ngữ này bất kỳ lúc nào trên trang W3C’s website

vào markup, để xác định rõ nội dung thuộc loại là gì, như là <article> <header>, ,

và <footer>

HTML hoạt động như thế nào?

HTML documents là files kết thúc với đuôi html hay .htm Bạn có thể xem chúng bằng cách

sử dụng bất kỳ trình duyệt web nào (như Google Chrome, Safari, hay Mozilla Firefox) Trình duyệt đọc các files HTML này và xuất bản nội dung lên internet sao cho người đọc có thể xem được nó

Thông thường, trung bình một web chứa nhiều trang web HTML, ví dụ như: trang chủ, trang about, trang liên hệ, tất cả đều cần các trang HTML riêng

việc xây dựng từng khối của một trang web Nó tạo thành cấu trúc cây thư mục bao gồm section, paragraph, heading, và những khối nội dung khác

Hầu hết các HTML elements đều có tag mở và tag đóng với cấu trúc như <tag></tag>.Bên dưới, bạn có thể xem code ví dụ của một trang HTML được cấu trúc như thế nào:

1. <div>

x

2. <h1>The Main Heading</h1>

3. <h2>A catchy subheading</h2>

4. <p>Paragraph one</p>

5. <img src="/" alt="Image">

6. <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>

7. </div>

 Element ngoài cùng là bộ tag division (<div></div>), dùng để mark up cho phần nội dung lớn

 Nó bao gồm một tag tiêu đề (<h1></h1>), một tag subheading (<h2></h2>), 2 văn bản

(<p></p>), và một bước hình (<img>)

 Đoạn văn thứ 2 chứa tag chứa link (<a></a>) với attribute href chứa địa chỉ URL đích.

 Tag hình ảnh cũng có 2 attribute: src cho ảnh, và cho mô tả của hình.alt

Tổng quan của các tag thông dụng nhất của HTML

HTML tags có 2 loại chính: block-level và inline tags

1 Elements Block-level sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web Headings và paragraph là những ví dụ chính của block tags

2 Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web Chúng thường dùng để định dạng nội dung bên trong của block level elements Links và những tag nhấn mạnh là những tag inlines phổ biến

Block-Level Tags

3 block level tags của mỗi trang HTML cần có những tag như là <html> <head>, ,

và <body>

1 Tag <html></html> là element cao nhất dùng để đóng gói mỗi trang HTML

2 Tag <head></head> chứa các thông tin meta như là tiêu đề trang và charset

3 Cuối cùng, <body></body> tag dùng để đóng gói tất cả nội dung sẽ hiện trên trang

 Divisions là những khu vực lớn, chứa nhiều paragraph, images, blockquotes, và các yếu tố khác Chúng ta có thể đánh dấu chúng bằng cách sử dụng <div></div> Div element cũng có thể chứa div tag khác bên trong nó

 Bạn cũng có thể dùng tag <ol></ol> cho danh sách theo thứ tự và <ul></ul> cho danh sách không theo thứ tự Danh sách cần được được đặt trong tag <li></li> Ví dụ, đây là cách hiển thị của một danh sách không theo thứ tự trong HTML:

xi

1. <ul>

2. <li>List item 1</li>

3. <li>List item 2</li>

4. <li>List item 3</li>

5. </ul>

Inline Tags

Có nhiều inline tags được dùng để định dạng vnă bản Ví dụ như, tag <strong></strong> sẽ

định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên

Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ

thể:

1. <a href="https://example.com/">Click me!</a>

Ảnh cũng là element inline Bạn có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần

1. <img src="/images/example.jpg" alt="Example image">

chúng tôi (có thể download được file cheat sheet)

Sự phát triển của HTML Có gì khác biệt giữa HTML và HTML5?

Từ những ngày đầu tiên, HTML đã là một phát minh vượt thời đại W3C liên tục xuất bản cácbản cập nhật và nâng cấp

HTML4 (cũng thường được gọi là “HTML”) được phát hành năm 1999, trong khi phiên bản

năng quan trọng mới

Một trong số các tính năng hấp dẫn nhất của HTML5 là khả năng hỗ trợ audio và video Thay

vì sử dụng Flash Player, chúng ta giờ đây chỉ cần nhúng videos và audio files vào trong trang web bằng tag <audio></audio> hay <video></video> Nó cũng hỗ trợ những tính năng mặc định như hỗ trợ scalable vector graphics (SVG) và MathML cho các công thức toán học và phương trình khoa học

HTML5 có rất nhiều cải thiện về mặt ngôn ngữ Các tag mới nhằm giới thiệu cho trình duyệt biết mục đích chính của nội dung trong website là gì, việc này có lợi cho cả người đọc và cả search engine

Các semantic tags đó

là <article></article> <section></section> <aside></aside> <header></header>, , , ,

chuyên sâu giữa HTML và HTML5 của chúng tôi

Ưu điểm và nhược điểm của HTML

Như hầu hết mọi chuyện, HTML có ưu và nhược điểm của riêng nó

Ưu điểm:

 Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn

 Sử dụng mượt mà trên hầu hết mọi trình duyệt

 Có quá trình học đơn giản và trực tiếp

xii

 Mã nguồn mở và hoàn toàn miễn phí.

 Markup gọn gàng và đồng nhất

 Chuẩn chính của web được vận hành bởi World Wide Web Consortium (W3C)

 Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js

 Một số trình duyệt chậm hỗ trợ tính năng mới

 Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới)

HTML, CSS, và JavaScript liên quan với nhau như thế nào?

Mặc dù HTML là một ngôn ngữ mạnh mẽ, nó vẫn không đủ tính năng để xây dựng một website chuyên nghiệp và hoàn toàn responsive Chúng ta chỉ có thể dùng HTMl để thêm element dạng văn bản và tạo ra giao diện cấu trúc cho nội dung

Sheets), và JavaScript Cùng với nhau, những ngôn ngữ này có thể kết hợp với nhau để tăng trải nghiệm người dùng và thiết lập các chức năng cao cấp khác:

 CSS chịu trách nhiệm cho việc thiết kế, tạo kiểu cho backgrounds, màu sắc, bố cục, phân cách

và hiệu ứng

 JavaScript giúp bạn tạo ra những chức năng động như: slider, pop-up và thư viện ảnh

Hãy xem HTML giống như là một người, CMS giống như là quần áo, JavaScript là cách ứng

xử và hành vi của người đó

Vậy…HTML là gì?

HTML là ngôn ngữ markup của thế giới web Ngôn ngữ markup là loại ngôn ngữ dùng để thiết kế và sắp đặt nội dung, ảnh, và tất cả những yếu tố trên website Nó chạy trên bất kỳ trình duyệt nào và được quản lý bởi World Wide Web Consortium

Bạn có thể dùng nó để cấu trúc nội dung của website hay ứng dụng web Nó là lớp thấp nhất trong các lớp xử lý ở frontend, đảm nhiệm việc tạo phong cách cơ bản nhất cho website, và kết hợp với CSS để làm đẹp cho website hơn và kết hợp với JavaScript để tăng chức năng chowebsite

CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang web – Cascading Style Sheet language Nó dùng

để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu,

công sức cho người viết web Nó phân biệt cách hiển thị của trang web với nội dung chính của trang bằng cách điều khiển bố cục, màu sắc, và font chữ

xiii

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996, vì một lý do đơn giản HTML không được thiết kế để gắn tag để giúp định dạng trang web Bạn chỉ có thể dùng nó để “đánh dấu” lên site.

Những tag như <font> được ra mắt trong HTML phiên bản 3.2, nó gây rất nhiều rắc rối cho lập trình viên Vì website có nhiều font khác nhau, màu nền và phong cách khác nhau Để viếtlại code cho trang web là cả một quá trình dài, cực nhọc Vì vậy, CSS được tạo bởi W3C là đểgiải quyết vấn đề này

Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện website), chúng là khôngthể tách rời

CSS về lý thuyết không có cũng được, nhưng khi đó website sẽ không chỉ là một trang chứa văn bản mà không có gì khác

Ưu điểm của CSS là gì

Sự khác biệt giữa site có CSS và không có CSSrất dễ nhận biết

Chắc bạn đã thấy rồi, khi website không load được đầy đủ và chỉ có nền trắng và chữ thì chỉ

có màu đen và xanh Như sau:

Điều này có nghĩa là thành phần CSS của bạn không tải lên được hay nó không tồn tại

Đó một website không có CSS, vậy bạn có muốn website của mình trông như thế không? Hẵn

là không rồi phải không

Trước khi sử dụng CSS, tất cả những phong cách của CSS cần được đính kèm vào trong HTML markup Có nghĩa là bạn cần tách ra để xác định các thành phần như background, font colors, canh hàng, vâng vâng

CSS giúp bnạ định kiểu mọi thứ trên một file khác, bạn có thể tạo phong cách trước rồi sau đótích hợp file CSS lên trên cùng của file HTML Việc này giúp HTML markup rõ ràng và dễ quản lý hơn nhiều

Tóm lại,với CSS bạn không cần lặp lại các mô tả cho từng thanh phần Nó tiết kiệm thời gian,làm code ngắn lại để bạn có thể kiểm soát lỗi dễ dàng hơn

CSS giúp bạn có nhiều styles trên một trang web HTML, vì vậy, khả năng điều chỉnh trang gần như vô hạn?

CSS hoạt động như thế nào?

CSS sử dụng cấu trúc tiếng Anh đơn giản để tạo ra một bộ các quy tắc bạn có thể tận dụng Như đã nói ở trên, HTML không được dùng để tạo phong cách cho các yếu tố, nó chỉ đánh dấu từng phần để biết được yếu tố đó là gì thôi Ví dụ: <p>Đây là văn bản.</p>

Còn làm thế nào để tạo ra phong cách cho văn bản đó? Syntax của CSS rất đơn giản Nó có phần block chọn và block khai báo Bạn chọn một yếu tố và khai báo làm gì với nó Rất đơn giản phải không?

Tuy nhiên, cũng có nhiều quy tắc cần ghi nhớ

Selector sẽ trỏ về yếu tố HTML bạn cần muốn tạo phong cách Block khai báo sẽ bao gồm một hay nhiều khai báo cách nhau bởi dấu chấm phẩy,

xiv

Mỗi khai báo bao gồm một tên CSS và giá trị, cách nhấu bởi dấu 2 chấm Khai báo CSS luôn kết thúc bằng dấu chấm phẩn, và block khai báo được đặt trong dấu ngoặc nhọn.

Hãy xem qua ví dụ:

Tất cả các thành phần trong element <p> sẽ dùng màu xanh và in đậm

Giờ hãy nói về các loại CSS Chúng có 3 loại là Inline, External và Internal

Khi bạn bắt đầu lên kế hoạch tạo website, hãy đảm bảo bạn chọn đúng công cụ dựng web Hostinger có công cụ kéo thả để dựng web dễ dàng Bạn có thể tạo web hoạt động tốt trên mọithiết bị, sử dụng một trong số mẫu website của chúng tôi và xuất bản trang web của bạn ngay trong tích tắc

Bootstrap là gì?

Bootstrap cho phép quá trình thiết kế website diễn ra nhanh chóng

và dễ dàng hơn dựa trên những thành tố cơ bản sẵn có như

typography, forms, buttons, tables, grids, navigation, image

carousels… Cùng Mắt Bão tìm hiểu tính năng và lợi ích mang lại cho lập trình viên của Bootstrap là gì nhé!

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và công cụ dùng để tạo ra một mẫu webiste hoàn chỉnh Với các thuộc tính về giao diện được quy định sẵn như kích thước, màu sắc, độ cao,

độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quá trình thiết kế giao diện website

Đến ngày 31/1/2012, Bootstrap phiên bản 2 đã được phát

hành Bootstrap 2 được bổ sung bố cục lưới 12 cột với thiết kế tùy chỉnh đáp ứng cho nhiều màn hình kích thước Tiếp nối sự thành

xv

công của phiên bản 2, Bootstrap 3 ra đời vào ngày 19/8/2013 với giao diện tương thích với smartphone.

Chỉ 3 năm sau ngày ra mắt, Bootstrap đã trở thành No.1 project trên GitHub Vào tháng 10/2014, Mark Otto công bố phiên

mới nhất của Bootstrap được giới thiệu đến người dùng là Bootstrap

thiết kế website có lượng người dùng “khủng” nhất.

Cấu trúc và tính năng của Bootstrap là gì?

Bootstrap chứa các tập tin JavaScript, CSS và fonts đã được biên

dịch và nén lại Ngoài ra, Bootstrap được thiết kế dưới dạng các mô-đun Do đó, dễ dàng tích hợp với hầu hết các mã nguồn mở

như WordPress Joomla Magento , , , …Trong đó, Bootstrap mang đến nhiều chức năng nổi bật.

“khổng lồ” các thành tố dùng để tạo nên giao diện của một

website hoàn chỉnh như font, typography, form, table, grid…

trước khi tải xuống và sử dụng nó tại trang web của khung.

xác các tính năng trong quá trình lập trình web của bạn.

 Định nghĩa glyphicons nhằm giảm thiểu việc sử dụng hình

CHƯƠNG 2: KHẢO SÁT VÀ THU THẬP YÊU CẦU

1.1Thông tin cá nhân:

- Họ tên sinh viên:Cao Văn Tâm

- Lớp:D18PM03

- MSSV:1824801030183

- Họ tên sinh viên:Phan Thế Nhựt

xvi