THIẾT KẾ WEBSITE BÁN HÀNG ĐIỆN TỬ

Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công Nghệ Thông Tin, it, phầm mềm, website, web, mobile app, trí tuệ nhân tạo, blockchain, AI, machine learning - Công nghệ thông tin UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: TOÁN - TIN ---------- XAYSOMBOUN PANYANUVONG THIẾT KẾ WEBSITE BÁN HÀNG ĐIỆN TỬ KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Quảng Nam, tháng 5 năm 2022 UBND TỈNH QUẢNG NAM TRƯỜNG ĐẠI HỌC QUẢNG NAM KHOA: TOÁN - TIN ---------- KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC Tên đề tài: THIẾT KẾ WEBSITE BÁN HÀNG ĐIỆN TỬ Sinh viên thực hiện XAYSOMBOUN PANYANUVONG MSSV: 2118100125 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN KHÓA 2018 – 2022 Cán bộ hướng dẫn ThS. DƯƠNG PHƯƠNG HÙNG MSCB: ……… Quảng Nam, tháng 5 năm 2022 MỤC LỤC MỞ ĐẦU .................................................................................................................... 1 1. Lý do chọn đề tài ..................................................................................................... 1 2. Mục tiêu của đề tài................................................................................................... 1 3. Đối tượng và phạm vi nghiên cứu ............................................................................ 1 4. Phương pháp nghiên cứu ......................................................................................... 1 5. Lịch sử nghiên cứu .................................................................................................. 2 6. Đóng góp của đề tài ................................................................................................. 2 7. Cấu trúc đề tài.......................................................................................................... 2 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT ............................................................................ 3 1.1. Ngôn ngữ HTML .................................................................................................. 3 1.1.1. Giới thiệu về HTML .......................................................................................... 3 1.1.2. Vai trò của HTML trong tập trình Web ............................................................. 3 1.1.3. Các thẻ trong HTML ......................................................................................... 4 1.2. Giới thiệu ngôn ngữ CSS ..................................................................................... 5 1.2.1. Định nghĩa CSS ................................................................................................. 5 1.2.2. Cú pháp CSS...................................................................................................... 7 1.3. Tổng quan MySQL ............................................................................................... 8 1.3.1. Giới thiệu về xampp........................................................................................... 8 1.3.2. Các thành phần chính của Xampp ...................................................................... 8 1.3.3. Cài đặt xampp .................................................................................................. 10 1.4. Notepad++ .......................................................................................................... 13 CHƯƠNG 2. PHÂN TÍCH THIẾT KẾ HỆ THỐNG ................................................. 15 1. PHÂN TÍCH, ĐẶC TẢ YÊU CẦU CỦA HỆ THỐNG .......................................... 15 1.2. Yêu cầu phi chức năng........................................................................................ 15 1.3. Yêu cầu hệ thống ................................................................................................ 15 2. BIỂU ĐỒ USE CASE ........................................................................................... 15 2.1. Các tác nhân ....................................................................................................... 15 2.2. Xác định các Use Case........................................................................................ 16 2.3. Biểu đồ Use Case với tác nhân là Khách hàng .................................................... 17 2.4. Biểu đồ Use Case với tác nhân là Quản trị viên................................................... 17 2.5. Biểu đồ Use Case Quản lý sản phẩm ................................................................... 18 2.6. Biểu đồ Use Case Quản lý danh mục .................................................................. 18 2.7. Biểu đồ Use Case Quản đơn đặt hàng ................................................................. 18 2.8. Đặc tả Use Case .................................................................................................. 19 3. BIỂU ĐỒ LỚP ..................................................................................................... 20 4. MÔ HÌNH HÓA HÀNH VI ................................................................................... 20 4.1. Biểu đồ hoạt động ............................................................................................... 20 5. MÔ HÌNH HÓA TƯƠNG TÁC............................................................................. 21 5.1. Biểu đồ trình tự xem giỏ hàng ............................................................................. 21 5.2. Biểu đồ trình tự xóa sản phẩm trong giỏ hàng ..................................................... 22 6. THIẾT KẾ CÁC BẢNG DỮ LIỆU QUAN HỆ ..................................................... 22 6.1. Bảng products ..................................................................................................... 23 6.5. Bảng Categories .................................................................................................. 24 6.6. Bảng images ....................................................................................................... 24 6.7. Bảng comments .................................................................................................. 25 6.8. Bảng address....................................................................................................... 25 7. BIỂU ĐỒ CƠ SỞ DỮ LIỆU QUAN HỆ................................................................ 25 8. BIỂU ĐỒ THÀNH PHẦN ..................................................................................... 26 9. BIỂU ĐỒ TRIỂN KHAI....................................................................................... 26 CHƯƠNG 3. KẾT QUẢ ĐẠT ĐƯỢC....................................................................... 27 1. Giao diện phía người dùng. .................................................................................... 27 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .................................................................. 30 1. Kết quả đạt được.................................................................................................... 30 2. Hướng nghiên cứu ................................................................................................. 30 TÀI LIỆU THAM KHẢO ......................................................................................... 31 LỜI CẢM ƠN Trước tiên, em xin phép gửi lời mời cảm ơn sâu sắc tới Thầy Dương Phương Hùng đã nhiệt tình giúp đỡ và hướng dẫn em trong quá trình thực hiện khóa luận này. Em cũng xin gửi đến quý thầy cô đang giảng dạy tại trường Đại học Quảng Nam nói chung và thầy cô trong khoa Toán-Tin nói riêng lời biết ơn chân thành, cảm ơn thầy cô vì đã hết lòng truyền đạt cho em những kiến thức trong những năm tháng học tại Trường. Kính chúc quý thầy cô luôn mạnh khỏe, gặt hái được nhiều thành công trong sự nghiệp Dù đã cố gắng hết sức thực hiện đề tài nhưng cũng khó tránh khỏi những thiếu sót, em rất mong nhận được sự góp ý của quý thầy cô, các anh chị và các bạn để bản thân em khắc phục và tiến bộ hơn. Quảng Nam, tháng 5 năm 2022 Sinh viên thực hiện 1 MỞ ĐẦU 1. Lý do chọn đề tài Như chúng ta đã thấy trong thị trường hiện nay thì việc cạnh tranh về kinh doanh ngày càng trở nên quyết liệt và hầu hết những nhà kinh doanh, những công ty lớn đều rất chú tâm đến việc làm thoả mãn khách hàng một cách tốt nhất. So với kinh doanh truyền thống thì bán hàng trên Internet chi phí thấp hơn, hiệu quả đạt cao hơn. Hơn thế nữa, với lợi thế của công nghệ Internet nên việc truyền tải thông tin về sản phẩm nhanh chóng, thuận tiện. Kết hợp với bộ phận giao hàng tận nơi thông qua bưu điện và ngân hàng để thanh toán tiền, càng tăng thêm thuận lợi để loại hình này phát triển. Biết được những nhu cầu đó chương trình “Thiết kế website bán hàng điện tử” được xây dựng nhằm đáp ứng cho mọi người tiêu dùng trên toàn quốc và thông qua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết. Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua. Ở nước Lào có rất nhiều trang website bán hàng trực tuyến nhưng mặc hàng điện tử vẫn chưa được phổ biến rộng rãi. Trước thực tế đó em đã chọn đề tài: “Thiết kế website bán hàng điện tử” cho đề tài khóa luận tốt nghiệp của mình. 2. Mục tiêu của đề tài. Mục đích của đề tài là Xây dựng một trang website bán các sản phẩm, thiết bị điện tử cần thiết cho người tiêu dùng, nhằm đáp ứng nhu cầu sử dụng công nghệ trong thời điểm đang phát triển như hiện nay. 3. Đối tượng và phạm vi nghiên cứu - Nghiên cứu các kiến thức về thiết kế giao diện và xây dựng cơ sở dữ liệu Web. - Nghiên cứu ngôn ngữ PHP và cơ sở dữ liệu MySQL. - Thông tin địa lý du lịch tỉnh SeKong. 4. Phương pháp nghiên cứu - Sử dụng phương pháp tìm kiếm thông tin trên Internet; - Phân tích và tổng hợp số liệu. - Xây dựng và quản lý tiến trình. 2 5. Lịch sử nghiên cứu - Hiện có rất nhiều trang Web với mục đích bán hàng online tại Lào, đó là trang về ẩm thực, đồ gia dụng,… . Ở đây, đề tài tập trung vào giải quyết nhu cầu mua bán các sản phẩm điện máy như điện thoại di động, ti vi, máy giặt, tủ lạnh,… . 6. Đóng góp của đề tài Đề tài thành công sẽ mang lại công cụ hiệu quả, tạo điều kiện thuận loại cho việc mua bán hàng điện tử tại Lào. Bên cạnh đó, kết quả của đề tài có thể làm tài liệu tham khảo hữu ích cho sinh viên khoa Công nghệ thông tin và những ai muốn nghiên cứu về ứng dụng thông tin website này để tìm hiểu nhiểu hơn về thương mại điện tử. 7. Cấu trúc đề tài Đề tài gồm 3 chương: Chương 1: CƠ SỞ LÝ THUYẾT - Cung cấp kiến thức nền tảng về thiết kế và xây dựng Website Chương 2: PHÂN TÍCH VÀ THUYẾT KẾ HỆ THỐNG - Phân tích chức năng của hệ thống - Phân tích dữ liệu hệ thống Chương 3: DEMO CHƯƠNG TRÌNH - Giới thiệu một số kết quả đạt được, những chức năng chính của hệ thống. 3 CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1. Ngôn ngữ HTML 1.1.1. Giới thiệu về HTML Ngôn ngữ HTML (HyperText Markup Language - ngôn ngữ đánh dấu siêu văn bản) là một trong các loại ngôn ngữ được sử dụng trong lập trình web. Khi truy cập một trang web cụ thể là click vào các đường link, bạn sẽ được dẫn tới nhiều trang các nhau, và các trang này được gọi là một tài liệu HTML (tập tin HTML). Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag. Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó. Ở cuối các trang HTML thường hay có đuôi là .HTML hoặc HTML HTML là ngôn ngữ lập trình web được đánh giá là đơn giản. Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML. Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ. 1.1.2. Vai trò của HTML trong tập trình Web Vậy, đối với các website, ngôn ngữ HTML đóng vai trò như thế nào? HTML theo đúng nghĩa của nó là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức năng của nó cũng xoay quanh yếu tố này. Cụ thể, HTML giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh. Hình 1. Vai trò của HTML trong tập trình Web 4 Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và khiến trang web đi vào quy củ một cách hệ thống và hoàn chỉnh. Nếu bạn mong muốn sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố trong văn bản, hãy dùng HTML. Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà lập trình viên hay người dùng có thể lựa chọn ngôn ngữ lập trình riêng cho website của bạn, tuy nhiên thực chất HTML chứa những yếu tố cần thiết mà dù website của bạn có thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì nó vẫn phải cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập. Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nên tảng nào thì nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều. Đối với các lập trình viên hay nhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước khi bắt tay vào thiết kế trang web của họ. 1.1.3. Các thẻ trong HTML Như đã đề cập ở trên, các trang HTML được quy định bằng các thẻ tag. Những thẻ này được chứa trong các dấu ngoặc đơn dạng: . Trừ một vài thẻ đặc biệt, hầu hết các thẻ cơ bản đều có các thẻ đóng tương ứng với nó. Ví dụ, thẻ có thẻ đóng tương ứng là , thẻ có thẻ đóng tương ứng là … Dưới đây là các mẫu thẻ tag bạn thường gặp trong HTML. Tag Giải thích Còn gọi là thẻ khai báo một tài liệu HTML. Thẻ này xác định loại tài liệu và phiên bản HTML. Thẻ này chứa đựng các tài liệu HTML đầy đủ. Ở đầu trang sẽ xuất hiện các thẻ , và thân tài liệu là các thẻ , . Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ HTML như , … Thẻ được sử dụng trong thẻ chỉ tiêu đề tài liệu. 5 Thẻ này đại diện cho thân tài liệu và giữ các thẻ như , ,

… Thẻ tag này đại diện cho các tiêu đề trang.

Thẻ tag này đại diện cho định dạng các đoạn văn trong trang web. Dù website của bạn được xây dựng như thế nào, trên nên tảng nào thì nó cũng cần đến sự hỗ trợ của HTML. 1.2. Giới thiệu ngôn ngữ CSS 1.2.1. Định nghĩa CSS CSS là viết tắt của Cascading Style Sheets. Đây là một ngôn style sheet được sử dụng để mô tả giao diện và định dạng của một tài liệu viết bằng ngôn ngữ đánh dấu (markup). Nó cung cấp một tính năng bổ sung cho HTML. Nó thường được sử dụng với HTML để thay đổi phong cách của trang web và giao diện người dùng. Nó cũng có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL. CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động.  CSS làm được những gì? Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ. Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS.  Tại sao sử dụng CSS Đây là ba lợi ích chính của CSS: 1) Giải quyết một vấn đề lớn Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài tốn thời gian và công sức. Ví dụ: Nếu bạn đang phát triển một trang web 6 lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém. CSS đã được tạo ra để giải quyết vấn đề này. 2) Tiết kiệm rất nhiều thời gian Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp. 3) Cung cấp thêm các thuộc tính CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web. Các điểm chính của CSS được đưa ra dưới đây: CSS là viết tắt của Cascading Style Sheet. CSS được sử dụng để thiết kế các thẻ HTML. CSS là một ngôn ngữ được sử dụng rộng rãi trên web. HTML, CSS và JavaScript được sử dụng để thiết kế web. Nó giúp các nhà thiết kế web áp dụng phong cách trên các thẻ HTML.  Ví dụ về CSS h1 { color:white; background-color:00eeee; padding:5px; } p { color:blue; } 7 Write Your First CSS Example

This is Paragraph.

1.2.2. Cú pháp CSS Bộ quy tắc CSS chứa selector và khối khai báo. Selector: Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu cách. Nó có thể là bất kỳ thẻ nào như ...

UBND TỈNH QUẢNG NAM

TRƯỜNG ĐẠI HỌC QUẢNG NAM

KHOA: TOÁN - TIN

- -

XAYSOMBOUN PANYANUVONG

THIẾT KẾ WEBSITE BÁN HÀNG ĐIỆN TỬ

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 5 năm 2022

UBND TỈNH QUẢNG NAM

TRƯỜNG ĐẠI HỌC QUẢNG NAM

KHOA: TOÁN - TIN

- -

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC

Tên đề tài:

THIẾT KẾ WEBSITE BÁN HÀNG ĐIỆN TỬ

Sinh viên thực hiện XAYSOMBOUN PANYANUVONG

MSSV: 2118100125 CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

KHÓA 2018 – 2022 Cán bộ hướng dẫn

ThS DƯƠNG PHƯƠNG HÙNG

MSCB: ………

Quảng Nam, tháng 5 năm 2022

MỤC LỤC

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu của đề tài 1

3 Đối tượng và phạm vi nghiên cứu 1

4 Phương pháp nghiên cứu 1

5 Lịch sử nghiên cứu 2

6 Đóng góp của đề tài 2

7 Cấu trúc đề tài 2

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

1.1 Ngôn ngữ HTML 3

1.1.1 Giới thiệu về HTML 3

1.1.2 Vai trò của HTML trong tập trình Web 3

1.1.3 Các thẻ trong HTML 4

1.2 Giới thiệu ngôn ngữ CSS 5

1.2.1 Định nghĩa CSS 5

1.2.2 Cú pháp CSS 7

1.3 Tổng quan MySQL 8

1.3.1 Giới thiệu về xampp 8

1.3.2 Các thành phần chính của Xampp 8

1.3.3 Cài đặt xampp 10

1.4 Notepad++ 13

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THỐNG 15

1 PHÂN TÍCH, ĐẶC TẢ YÊU CẦU CỦA HỆ THỐNG 15

1.2 Yêu cầu phi chức năng 15

1.3 Yêu cầu hệ thống 15

2 BIỂU ĐỒ USE CASE 15

2.1 Các tác nhân 15

2.2 Xác định các Use Case 16

2.3 Biểu đồ Use Case với tác nhân là Khách hàng 17

2.5 Biểu đồ Use Case Quản lý sản phẩm 18

2.6 Biểu đồ Use Case Quản lý danh mục 18

2.7 Biểu đồ Use Case Quản đơn đặt hàng 18

2.8 Đặc tả Use Case 19

3 BIỂU ĐỒ LỚP 20

4 MÔ HÌNH HÓA HÀNH VI 20

4.1 Biểu đồ hoạt động 20

5 MÔ HÌNH HÓA TƯƠNG TÁC 21

5.1 Biểu đồ trình tự xem giỏ hàng 21

5.2 Biểu đồ trình tự xóa sản phẩm trong giỏ hàng 22

6 THIẾT KẾ CÁC BẢNG DỮ LIỆU QUAN HỆ 22

6.1 Bảng products 23

6.5 Bảng Categories 24

6.6 Bảng images 24

6.7 Bảng comments 25

6.8 Bảng address 25

7 BIỂU ĐỒ CƠ SỞ DỮ LIỆU QUAN HỆ 25

8 BIỂU ĐỒ THÀNH PHẦN 26

9 BIỂU ĐỒ TRIỂN KHAI 26

CHƯƠNG 3 KẾT QUẢ ĐẠT ĐƯỢC 27

1 Giao diện phía người dùng 27

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 30

1 Kết quả đạt được 30

2 Hướng nghiên cứu 30

TÀI LIỆU THAM KHẢO 31

LỜI CẢM ƠN

Trước tiên, em xin phép gửi lời mời cảm ơn sâu sắc tới Thầy Dương Phương Hùng đã nhiệt tình giúp đỡ và hướng dẫn em trong quá trình thực hiện khóa luận này

Em cũng xin gửi đến quý thầy cô đang giảng dạy tại trường Đại học Quảng Nam nói chung và thầy cô trong khoa Toán-Tin nói riêng lời biết ơn chân thành, cảm ơn thầy cô vì đã hết lòng truyền đạt cho em những kiến thức trong những năm tháng học tại Trường Kính chúc quý thầy cô luôn mạnh khỏe, gặt hái được nhiều thành công trong sự nghiệp!

Dù đã cố gắng hết sức thực hiện đề tài nhưng cũng khó tránh khỏi những thiếu sót, em rất mong nhận được sự góp ý của quý thầy cô, các anh chị và các bạn để bản thân em khắc phục và tiến bộ hơn

Quảng Nam, tháng 5 năm 2022 Sinh viên thực hiện

và thông qua hệ thống Website này họ có thể đặt mua các mặt hàng hay sản phẩm cần thiết

Do đó, với sự ra đời các website bán hàng qua mạng, mọi người có thể mua mọi thứ hàng hóa mọi lúc mọi nơi mà không cần phải tới tận nơi để mua Ở nước Lào có rất nhiều trang website bán hàng trực tuyến nhưng mặc hàng điện tử vẫn chưa được

phổ biến rộng rãi Trước thực tế đó em đã chọn đề tài: “Thiết kế website bán hàng điện tử” cho đề tài khóa luận tốt nghiệp của mình

2 Mục tiêu của đề tài

Mục đích của đề tài là Xây dựng một trang website bán các sản phẩm, thiết bị điện tử cần thiết cho người tiêu dùng, nhằm đáp ứng nhu cầu sử dụng công nghệ trong

thời điểm đang phát triển như hiện nay

3 Đối tượng và phạm vi nghiên cứu

- Nghiên cứu các kiến thức về thiết kế giao diện và xây dựng cơ sở dữ liệu Web

- Nghiên cứu ngôn ngữ PHP và cơ sở dữ liệu MySQL

- Thông tin địa lý du lịch tỉnh SeKong

4 Phương pháp nghiên cứu

- Sử dụng phương pháp tìm kiếm thông tin trên Internet;

- Phân tích và tổng hợp số liệu

- Xây dựng và quản lý tiến trình

5 Lịch sử nghiên cứu

- Hiện có rất nhiều trang Web với mục đích bán hàng online tại Lào, đó là trang

về ẩm thực, đồ gia dụng,… Ở đây, đề tài tập trung vào giải quyết nhu cầu mua bán các sản phẩm điện máy như điện thoại di động, ti vi, máy giặt, tủ lạnh,…

7 Cấu trúc đề tài

Đề tài gồm 3 chương:

Chương 1: CƠ SỞ LÝ THUYẾT

- Cung cấp kiến thức nền tảng về thiết kế và xây dựng Website

Chương 2: PHÂN TÍCH VÀ THUYẾT KẾ HỆ THỐNG

- Phân tích chức năng của hệ thống

- Phân tích dữ liệu hệ thống

Chương 3: DEMO CHƯƠNG TRÌNH

- Giới thiệu một số kết quả đạt được, những chức năng chính của hệ thống

Một trang HTML như vậy được cấu thành bởi nhiều phần tử HTML nhỏ và được quy định bằng các thẻ tag Bạn có thể phân biệt một trang web được viết bằng ngôn ngữ HTML hay PHP thông qua đường link của nó Ở cuối các trang HTML thường hay có đuôi là HTML hoặc HTML

HTML là ngôn ngữ lập trình web được đánh giá là đơn giản Mọi trang web, mọi trình duyệt web đều có thể hiển thị tốt ngôn ngữ HTML Hiện nay, phiên bản mới nhất của HTML là HTML 5 với nhiều tính năng tốt và chất lượng hơn so với các phiên bản HTML cũ

1.1.2 Vai trò của HTML trong tập trình Web

Vậy, đối với các website, ngôn ngữ HTML đóng vai trò như thế nào?

HTML theo đúng nghĩa của nó là một loại ngôn ngữ đánh dấu siêu văn bản, thế nên các chức năng của nó cũng xoay quanh yếu tố này Cụ thể, HTML giúp cấu thành các cấu trúc cơ bản trên một website (chia khung sườn, bố cục các thành phần trang web) và góp phần hỗ trợ khai báo các tập tin kĩ thuật số như video, nhạc, hình ảnh

Hình 1 Vai trò của HTML trong tập trình Web

Ưu điểm nổi trội nhất và cũng là thế mạnh của HTML là khả năng xây dựng cấu trúc và khiến trang web đi vào quy củ một cách hệ thống và hoàn chỉnh Nếu bạn mong muốn sở hữu một website có cấu trúc tốt có mục đích sử dụng nhiều loại yếu tố trong văn bản, hãy dùng HTML Nhiều ý kiến cho rằng tùy theo mục đích sử dụng mà lập trình viên hay người dùng có thể lựa chọn ngôn ngữ lập trình riêng cho website của bạn, tuy nhiên thực chất HTML chứa những yếu tố cần thiết mà dù website của bạn có thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì nó vẫn phải cần đến ngôn ngữ HTML để hiển thị nội dung cho người truy cập

Nói đúng hơn, dù website của bạn được xây dựng như thế nào, trên nên tảng nào thì nó cũng cần đến sự hỗ trợ của HTML, dù ít dù nhiều Đối với các lập trình viên hay nhà phát triển web, họ đều phải học HTML như một loại ngôn ngữ cơ bản trước khi bắt tay vào thiết kế trang web của họ

1.1.3 Các thẻ trong HTML

Như đã đề cập ở trên, các trang HTML được quy định bằng các thẻ tag Những

thẻ này được chứa trong các dấu ngoặc đơn dạng: <tên thẻ> Trừ một vài thẻ đặc biệt, hầu hết các thẻ cơ bản đều có các thẻ đóng tương ứng với nó Ví dụ, thẻ <html> có thẻ đóng tương ứng là </html>, thẻ <body> có thẻ đóng tương ứng là </body> … Dưới

đây là các mẫu thẻ tag bạn thường gặp trong HTML

<!DOCTYPE…> Còn gọi là thẻ khai báo một tài liệu HTML Thẻ này xác

định loại tài liệu và phiên bản HTML

<html> Thẻ này chứa đựng các tài liệu HTML đầy đủ Ở đầu trang

sẽ xuất hiện các thẻ <head>, </head> và thân tài liệu là các thẻ <body>, </body>

<head> Thẻ này đại diện cho đầu trang tài liệu mà có thể giữ các thẻ

HTML như <title>, <link> …

<title> Thẻ <title> được sử dụng trong thẻ <head> chỉ tiêu đề tài

liệu

<body> Thẻ này đại diện cho thân tài liệu và giữ các thẻ như <h1>,

<div>, <p> …

<h1> Thẻ tag này đại diện cho các tiêu đề trang

<p> Thẻ tag này đại diện cho định dạng các đoạn văn trong trang

có thể được sử dụng với bất kỳ loại tài liệu XML nào bao gồm cả XML đơn giản, SVG và XUL

CSS được sử dụng cùng với HTML và JavaScript trong hầu hết các trang web

để tạo giao diện người dùng cho các ứng dụng web và giao diện người dùng cho nhiều ứng dụng di động

 CSS làm được những gì?

Bạn có thể thêm giao diện mới vào các tài liệu HTML cũ

Bạn hoàn toàn có thể thay đổi giao diện trang web của mình chỉ với một vài thay đổi trong mã CSS

 Tại sao sử dụng CSS

Đây là ba lợi ích chính của CSS:

1) Giải quyết một vấn đề lớn

Trước khi có CSS, các thẻ như phông chữ, màu sắc, kiểu nền, các sắp xếp phần

tử, đường viền và kích thước phải được lặp lại trên mọi trang web Đây là một quá trình rất dài tốn thời gian và công sức Ví dụ: Nếu bạn đang phát triển một trang web

lớn nơi phông chữ và thông tin màu được thêm vào mỗi trang, nó sẽ trở thành một quá trình dài và tốn kém CSS đã được tạo ra để giải quyết vấn đề này

2) Tiết kiệm rất nhiều thời gian

Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thể thay đổi toàn bộ trang web bằng cách thay đổi chỉ một tệp

3) Cung cấp thêm các thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web

Các điểm chính của CSS được đưa ra dưới đây:

CSS là viết tắt của Cascading Style Sheet

CSS được sử dụng để thiết kế các thẻ HTML

CSS là một ngôn ngữ được sử dụng rộng rãi trên web

HTML, CSS và JavaScript được sử dụng để thiết kế web Nó giúp các nhà thiết

kế web áp dụng phong cách trên các thẻ HTML

Bộ quy tắc CSS chứa selector và khối khai báo

Selector: Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu cách Nó có thể là

bất kỳ thẻ nào như <h1>, <title>,…

Declaration Block: Khối khai báo có thể chứa một hoặc nhiều khai báo được

phân cách bởi dấu chấm phẩy (;) Đối với ví dụ trên, có hai khai báo:

Value: Các giá trị được gán cho thuộc tính CSS Trong ví dụ trên, giá trị

“yellow” được gán cho thuộc tính color

Selector{Property1: value1; Property2: value2; ;}

1.3 Tổng quan MySQL

1.3.1 Giới thiệu về xampp

Phần mềm Xampp là một trong những phần mềm được nhiều lập trình viên sử dụng để thiết lập website theo ngôn ngữ PHP XAMPP có công dụng thiết lập web server có cài đặt sẵn các công cụ như PHP, Apache, MySQL… Xampp sở hữu thiết

kế giao diện thân thiện với người dùng, cho phép các lập trình viên có thể đóng mở hoặc reboot các tính năng của server mọi lúc Ngoài ra, Xampp cũng được xây dựng

theo source code mở

Đánh giá một cách tổng thể, Xampp được đánh giá là một trong những phần mềm trọng yếu trong việc xây dựng website dành cho các lập trình viên PHP Xampp cài đặt các thành tố trọng yếu, hỗ trợ lẫn nhau bao gồm:

- Apache

- PHP (thiết lập nền tảng để các tập tin script php hoạt động)

- MySql (hệ quản trị dữ liệu)

được thiết lập và cập nhật bởi Apache Software Foundation

Ra đời hơn 20 năm về trước, Apache được nhiều chuyên gia công nhận là một trong những web server uy tín, đáng sử dụng cho các website Song song với NGINX (một phần mềm web phổ biến khác), Apache giúp website sở hữu một server hoàn thiện hơn, có thể tải nhiều nội dung lên cho website của mình nổi bật

hơn mà không gặp phải bất kỳ trở ngại nào

- MySQL

MySQL là một hệ thống quản lý cơ sở dữ liệu liên kết có ưu điểm nhanh chóng,

dễ dùng cho các lập trình viên MySQL được ứng dụng khá nhiều cho các website

thương mại điện tử hiện nay

Hệ thống được phát triển bởi công ty Thụy Điển này hiện được nhiều lập trình viên hàng đầu trên thế giới ưa chuộng bởi những ưu điểm sau

MySQL là một opensource, hoàn toàn miễn phí

Hiệu suất hoạt động của MySQL rất mạnh mẽ, kể cả khi khối lượng dữ liệu khổng lồ

Cái tên nói lên tất cả, hệ thống này sử dụng ngôn ngữ dữ liệu SQL để cấu trúc hóa website của bạn

MySQL tương thích với hầu hết các hệ điều hành (Windows, Mac, Linux…) cùng các ngôn ngữ lập trình như PHP, C++, Java…

MySQL rất tương thích với PHP, ngôn ngữ lập trình phổ biến của nhiều lập trình viên

MySQL có hệ thống thông tin khổng lồ, chứa đến 50 triệu hàng dữ liệu trong 1 board Dữ liệu tối thiểu của board này là 4GB, còn tối đa là 8TB (tùy theo độ mạnh của

Ngôn ngữ lập trình PHP có thể được nhúng trong HTML, được ứng dụng trong quản lý các loại nội dung website (nhất là nội dung động) cũng như quản lý các dữ liệu thống kê liên quan đến website như số phiên, thời gian phiên… PHP được sử dụng nhiều trong các loại Database phổ biến như MySQL, PostgreSQL, Oracle, Sybase, Informix, và Microsoft SQL Server

- Perl

PERL có tên đầy đủ là Practical Extraction and Report Language, là một trong những ngôn ngữ lập trình hiện đại hoạt động song song với PHP trong Xampp có khả năng lọc bỏ những dữ liệu thừa và cung cấp những dữ liệu quan trọng trong việc thiết lập website Tuy không nổi bằng PHP, Perl cũng có những ưu điểm nhất định khiến nhiều lập trình viên trên toàn thế giới cảm thấy ấn tượng và ứng dụng cho website của mình

 Tự động quản lý và phân tích dữ liệu website

 Có thể hoạt động tốt với các chuỗi cú pháp, ký tự

 Cộng đồng sử dụng Perl khá lớn, góp công vào việc xây dựng kho mã lệnh CPAN khổng lồ cho các lập trình viên

 Tương tự như PHP, Perl có cú pháp giống ngôn ngữ lập trình C

 Độ linh hoạt của Perl cao, cho phép lập trình viên có thể tùy biến chúng để giải quyết các vấn đề liên quan đến website và ứng dụng

1.3.3 Cài đặt xampp

Tiến hành đến phần cài đặt Xampp Trước tiên, tải về phần mềm cài đặt ở dưới

đây

- Phiên bản XAMPP bản mới nhất

- Tải các phiên bản XAMPP khác

Nếu đã xong bước này thì cài đặt Xampp vào máy tính của mình theo bước sau

- Đến đây, chọn nơi muốn lưu Xampp, có thể skip bước này để Xampp tự động lưu vào ổ C, còn không thì có thể lưu ở bất cứ ổ đĩa nào bạn muốn

Hình 4 Cài đặt thành công

- Click vào phpMyAdmin trong các trình duyệt web trên máy tính (Chrome, FireFox, Cốc Cốc…) Sẽ thấy nhanh chóng các chỉ số phiên bản PHP - MySQL mà đang dùng

- Truy cập vào liên kết

http://localhost/phpmyadmin (hoặc http://127.0.0.1/phpmyadmin) để bắt đầu thiết lập trang quản trị cơ sở dữ liệu cho website như dưới đây

Hình 5 Trang chính

- Đến đây, sẽ bắt đầu thiết lập cơ sở dữ liệu ngôn ngữ SQL cho website Cách tạo database SQL cho Xampp như chỉ dẫn dưới đây:

Hình 6 Trang phpMyadmin

(1) Chọn ngôn ngữ cho Xampp, ví dụ English, Vietnamese…

(2) Chọn bộ mã ký tự cho server của bạn Chọn “Default”

(3) Đây là database mà phpMyAdmin sẽ show ra cho mình tham khảo

(4) Thêm database mới cho mục (3)

(5) Nhập dữ liệu cho database mới theo ngôn ngữ dữ liệu SQL

(6) Xuất dữ liệu SQL mới bạn vừa nhập

(7) Nhập dữ liệu SQL mới này vào database bạn mới tạo

Đặc biệt cần ghi nhớ: Lúc cài đặt và sử dụng Xampp, hãy tắt hết các phần mềm đang sử dụng để phòng ngừa trường hợp bị xung đột phần mềm dẫn đến lỗi không thể triển khai Xampp được

1.4 Notepad++

Notepad++ là một phần mềm soạn thảo tiện ích của mã nguồn mở được hỗ trợ cho nhiều ngôn ngữ lập trình HTML, PHP, ASP, C#, Python, Java,… Phần mềm hoạt động trong môi trường Microsoft Windows Được các webmaster trên thế giới tin

dùng

Ngoài ra, Notepad++ là phần mềm thay thế hoàn hảo cho Notepad cổ điển xưa, không những về mặt tính năng mà cả về giao diện tương tác đều cho thấy sự đẳng cấp vượt trội

Notepad++ là phiên bản nâng cấp hoàn hảo cho Notepad cổ điển xưa, không những về mặt tính năng mà cả về giao diện tương tác đều cho thấy sự đẳng cấp vượt

trội Cùng với DiziBrand điểm qua một số ưu điểm của Notepad++ như:

Notepad++ được phát triển dựa trên Notepad mặc định của Windows nên phần mềm sẽ có những tính năng tinh túy nhất của Notepad và được cải thiện thêm để trở thành một phần mềm hoàn chỉnh hơn về mọi mặt

Mặc dù được phát triển thêm nhiều tính năng tích hợp trong phần mềm nhưng Notepad++ vẫn giữ được sự gọn nhẹ, đơn giản và dễ dàng sử dụng, dung lượng nhỏ gọn chỉ chưa đầy 10MB

Notepad++ liên tục được cập nhật những phiên bản mới với việc khắc phục lỗi

và bổ sung thêm những tính năng khác nhau

Và đặc biệt hơn là người sáng lập ra Notepad++ là người có tên tuổi trên cộng đồng Gifhub