Và đặc biệt cùng với sự hỗ trợ của các loại cơ sở dữ liệu quan hệ, bạn có thể kết hợp chúng với một kịch bản trên trình chủ như HTML, CSS,Javascrip, PHP, bạn có thể xây dựng và triển kha
CƠ SỞ LÝ THUYẾT
Ngôn ngữ HTML, CSS, PHP
HTML, viết tắt của HyperText Markup Language, là ngôn ngữ đánh dấu siêu văn bản được định nghĩa bởi Tim Berners Lee vào năm 1989 Nó kết hợp giữa Hypertext và Markup, cho phép người dùng xây dựng và cấu trúc các phần trong trang web hoặc ứng dụng HTML thường được sử dụng để phân chia các đoạn văn, tiêu đề, liên kết, và trích dẫn.
HyperText là văn bản có khả năng kết nối đến các văn bản khác thông qua việc sử dụng các "thẻ" để "đánh dấu" nội dung, giúp trình duyệt xác định cách hiển thị trang web cho người dùng Tập tin HTML là một loại tập tin văn bản chứa các thẻ định dạng, cho phép trình duyệt Web biết cách trình bày trang web Để được công nhận là tập tin HTML, nó cần có đuôi mở rộng là htm hoặc html và có thể được viết bằng bất kỳ trình soạn thảo văn bản đơn giản nào.
Các thẻ HTML được xác định bằng cặp ngoặc góc nhọn ‘’ Chúng thường xuất hiện theo cặp và không phân biệt chữ thường hay chữ hoa.
• Thẻ mở (thẻ bắt đầu):
• Thẻ đóng (thẻ kết thúc) :
Hình 1 2: Bố cục HTML của 1 trang web
CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ phức tạp được đề xuất lần đầu bởi Hồkon Wium Lie vào ngày 10 tháng 10 năm 1994 Ngôn ngữ này được sử dụng để tìm và định dạng các phần tử do các ngôn ngữ đánh dấu như HTML tạo ra, đóng vai trò quan trọng trong thiết kế và phát triển web CSS cho phép thêm bố cục và thiết kế cho các trang web, đồng thời hỗ trợ việc chia sẻ kiểu dáng giữa các phần tử khác nhau trên trang.
Sử dụng ngôn ngữ CSS cho trang web giúp tổ chức nội dung một cách gọn gàng và trật tự hơn, đồng thời tách bạch việc định dạng hiển thị Điều này không chỉ làm cho quá trình cập nhật nội dung trở nên dễ dàng hơn mà còn hạn chế sự rối rắm trong mã HTML CSS cho phép tránh việc lặp lại các mô tả cho từng thành phần và cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện trang web Nhờ đó, người dùng có thể áp dụng nhiều kiểu dáng khác nhau trên một trang HTML, mở ra khả năng điều chỉnh trang web một cách vô hạn.
Có 3 loại style CSS chính:
• Style CSS Internal: Các thuộc tính style cho các thẻ (tag) được khai báo trước trong phần tag của trang trước khi sử dụng
• Style CSS Inline: Các thuộc tính style được nhúng trực tiếp trong các thẻ (tag) khi sử dụng.
• External style: Các thuộc tính style cho các thẻ (tag) được nhúng từ một tập tin *.css bên ngoài vào trang
JavaScript là một ngôn ngữ lập trình web phổ biến, được tích hợp vào HTML để làm cho website trở nên sống động hơn Nó hoạt động như một phần của website, cho phép thực hiện các script phía client tương tự như trên máy chủ (Node.js), từ đó tạo ra những website động.
JavaScript hoạt động trên trang web và thường được nhúng trực tiếp hoặc tham chiếu qua file js Là ngôn ngữ phía Client, JavaScript sẽ được tải về máy client khi truy cập, cho phép hệ thống xử lý ngay lập tức mà không cần tải về máy server.
Hình 1 7: Ví dụ đoạn code của js
PHP, viết tắt của Personal Home Page, được phát minh bởi Rasmus Lerdorf vào năm 1994 và đã được phát triển bởi nhiều cá nhân và tổ chức khác Vì vậy, PHP được coi là một sản phẩm mã nguồn mở.
PHP là kịch bản trình chủ (server script) chạy trên phía server (server side) như các server script khác
PHP là ngôn ngữ kịch bản mạnh mẽ, cho phép phát triển ứng dụng web tương tác trên internet và intranet, hỗ trợ kết nối với nhiều loại cơ sở dữ liệu như mySQL, PostgreSQL, Oracle, SQL Server và Access.
Khi người dùng truy cập trang PHP, Web Server sẽ kích hoạt PHP Engine để xử lý và trả về kết quả cho người dùng.
Hình 1 8: Mô hình hoạt động của PHP
PHP sử dụng cặp thẻ mở , phía bên trong chính là nội dung của mã code PHP
Hình 1 9: Thực hiện câu lệnh PHP
MySQL is an open-source relational database management system (RDBMS) that operates on a client-server model It is a software or service designed to create and manage databases by organizing the relationships between them.
Cơ sở dữ liệu (database) là một tập hợp dữ liệu có cấu trúc đồng nhất, được lưu trữ trong một bộ dữ liệu chung (dataset) Cơ sở dữ liệu được tổ chức và sắp xếp tương tự như một bảng tính, với các dữ liệu có sự liên kết chặt chẽ với nhau.
12 Open source được hiểu là mã nguồn mở, Open source cho phép mọi người dùng sử dụng, cài đặt và tùy chỉnh nó
Máy tính sử dụng phần mềm RDBMS được gọi là máy khách (client) và khi cần truy cập dữ liệu, chúng sẽ kết nối với máy chủ RDBMS (server) Đây chính là mô hình client-server.
Mô hình client-server là một cấu trúc trong đó máy tính hoặc hệ thống máy tính cài đặt phần mềm MySQL hoạt động như một server, cho phép lưu trữ dữ liệu Điều này giúp các máy khách có thể truy cập và quản lý dữ liệu một cách hiệu quả.
MySQL Client là phần mềm dùng để thực hiện truy vấn tới MySQL server và nhận kết quả Nó có thể được hiểu là đoạn mã PHP script chạy trên máy tính hoặc trên cùng server để kết nối với cơ sở dữ liệu MySQL.
Cách vận hành chính trong môi trường MySQL như sau:
Công cụ Xây dựng trang web dung Visual Studio Code và XAMPP Control Panel
Visual Studio Code, hay còn gọi là VS Code, là một ứng dụng mạnh mẽ cho phép biên tập và soạn thảo mã nguồn, hỗ trợ nhanh chóng trong việc xây dựng và thiết kế website Trình soạn thảo này hoạt động mượt mà trên các hệ điều hành như Windows, macOS và Linux, đồng thời tương thích với các thiết bị máy tính có cấu hình tầm trung, giúp người dùng dễ dàng sử dụng.
Visual Studio Code cung cấp nhiều chức năng Debug mạnh mẽ, tích hợp Git và hỗ trợ Syntax Highlighting Nổi bật với tính năng tự hoàn thành mã thông minh, Snippets và khả năng cải tiến mã nguồn, nó giúp lập trình viên làm việc hiệu quả hơn Đặc biệt, Visual Studio Code cho phép tùy chỉnh Theme, phím tắt và nhiều tùy chọn khác, mang lại trải nghiệm lập trình linh hoạt và cá nhân hóa.
Visual Studio Code liên tục cải tiến và cung cấp nhiều tiện ích đa dạng, giúp lập trình viên sử dụng dễ dàng hơn Một số ưu điểm nổi bật bao gồm:
• Đa dạng ngôn ngữ lập trình giúp người dùng thỏa sức sáng tạo và sử dụng như HTML, CSS, JavaScript, C++, …
• Ngôn ngữ, giao diện tối giản, thân thiện, giúp các lập trình viên dễ dàng định hình nội dung
• Các tiện ích mở rộng rất đa dạng và phong phú
• Tích hợp các tính năng quan trọng như tính năng bảo mật (Git), khả năng tăng tốc xử lý vòng lặp (Debug), …
• Đơn giản hóa việc tìm quản lý hết tất cả các Code có trên hệ thống. h 1 12: Phần mềm Visual Studio Code Hìn
XAMPP là một gói giải pháp web mã nguồn mở, bao gồm các thành phần như Apache, MySQL, PHP và Perl Từ "X" trong XAMPP đại diện cho Cross-Platform, cho phép chạy trên nhiều hệ điều hành khác nhau Gói này cung cấp các bản phân phối Apache và các tệp thực thi dòng lệnh cho nhiều máy chủ, bao gồm các module như Apache server, MariaDB, PHP và Perl.
XAMPP là một công cụ hữu ích cho việc kiểm tra các trang web trên localhost hoặc máy chủ trước khi xuất bản lên hosting Nền tảng này cung cấp môi trường lý tưởng để giám sát và kiểm tra các dự án dựa trên Apache, Perl, MySQL và PHP Trong số các công nghệ này, Perl được sử dụng cho quản trị hệ thống, PHP phục vụ cho phát triển back-end website, và MariaDB là cơ sở dữ liệu phát triển từ MySQL.
Hình 1 13: Trang chủ XAMPP Control Panal
CHƯƠNG 2: XÂY DỰNG WEBSITE BẰNG NGÔN NGỮ PHP
2.1 Trình bày cách xây dựng giao diện
2.1.1 Mô tả về trang web
Website bán hàng trực tuyến được phát triển bằng ngôn ngữ PHP và sử dụng hệ quản trị cơ sở dữ liệu MySQL, cho phép khách hàng truy cập và thực hiện nhiều chức năng tiện ích.
• Tạo tài khoản sử dụng
• Chọn mua điện thoại các loại
2.1.2 Sơ đồ luồng dữ liệu
Khách hàng đưa ra yêu cầu đặt hàng Trang web bán hàng qua mạng Thực hiện yêu cầu và giao hàng
2.1.3 Các yêu cầu của trang web
Có một hosting trên mạng, một tên miên riêng của cửa hàng điện thoại Việt Mỹ phone
2.1.4 Thiết kế giao diện a Giao diện trang chủ
Hình 2 1: Giao diện trang chủ b Giao diện trang sản phẩm
Hình 2 2: Giao diện trang sản phẩm c Giao diện trang đăng nhập tài khoản admin
Hình 2 3: Giao diện trang đăng nhập admin d Giao diện trang giỏ hàng
Hình 2 4: Giao diện trang giỏ hàng
19 e Giao diện trang đặt hàng thành công
Hình 2 5: Giao diện trang đặt hàng thành công f Giao diện thanh tìm kiếm.
Hình 2 6: Giao diện trang tìm kiếm g Giao diện trang chủ quản lý
Hình 2 7: Giao diện trang chủ quản lý
21 h Giao diện các trang quản lý
Hình 2 8: Giao diện các trang quản lý
2.2 Các chức năng của trang Web
2.2.1 Chức năng form đăng nhập tài khoản admin
Chức năng đăng nhập tài khoản admin giúp nhà quản lý trang web có quản lý được các thông tin của trang web
Sau khi người dùng nhập thông tin tài khoản và mật khẩu, bộ xử lý sẽ kiểm tra và gửi dữ liệu lên cơ sở dữ liệu Tại đây, cơ sở dữ liệu sẽ xác minh thông tin, lưu trữ và trả về thông báo Nếu tài khoản và mật khẩu đúng, hệ thống sẽ thông báo đăng nhập thành công; ngược lại, sẽ hiển thị thông báo sai thông tin tài khoản hoặc mật khẩu.
2.2.2 Chức năng tìm kiếm sản phẩm
Chức năng tìm kiếm sản phẩm giúp khách hàng có thể dễ dàng tìm kiếm được sản phẩm đã được đăng lên
Sau khi người dùng bấm vào chức năng tìm kiếm, bộ xử lý sẽ kiểm tra và gửi yêu cầu đến cơ sở dữ liệu Cơ sở dữ liệu sẽ xác minh thông tin đã được lưu trữ; nếu có, nó sẽ trả về kết quả cho người tìm kiếm Ngược lại, nếu không tìm thấy sản phẩm, cơ sở dữ liệu sẽ thông báo rằng không có sản phẩm nào được tìm kiếm.
Sau khi người dùng chọn xem chi tiết giỏ hàng, bộ xử lý sẽ kiểm tra thông tin và gửi lên cơ sở dữ liệu Cơ sở dữ liệu sẽ xác minh dữ liệu và lấy thông tin đã lưu trữ, sau đó hiển thị kết quả mà người dùng cần tìm.
Chức năng thêm vào giỏ hàng cho phép khách hàng lưu lại các sản phẩm mong muốn, giúp họ dễ dàng xem lại và so sánh với các sản phẩm trên các website khác.
Chức năng xóa giỏ hàng cho phép khách hàng loại bỏ những sản phẩm không còn cần thiết, giúp tránh nhầm lẫn khi đặt hàng với các mặt hàng khác.
Sau khi chọn các giỏ hàng cần xóa và nhấn nút xóa, bộ xử lý sẽ kiểm tra thông tin và gửi yêu cầu lên cơ sở dữ liệu Cơ sở dữ liệu sẽ xác nhận dữ liệu, lưu lại và thông báo xóa thành công.
Chức năng đặt hàng cho phép khách hàng mua sản phẩm đã chọn một cách dễ dàng, đồng thời cung cấp thông tin nhận hàng một cách đơn giản và nhanh chóng.
Sau khi khách hàng điền đầy đủ thông tin và đặt hàng mọi thông tin đề được trả về database
2.2.5 Chức năng quản lý danh mục sản phẩm
Giúp người quản lý dễ dàng thêm và xóa sản phẩm mới trên website, từ đó mang đến nhiều lựa chọn cho người dùng và tăng doanh thu cho trang web.
Sau khi sản phẩm được thêm vào, nó sẽ được xử lý và lưu trữ trong cơ sở dữ liệu Chức năng này chỉ dành cho người quản trị (Admin).
2.2.6 Chức năng quản lý đơn hàng
Cách kết nối cơ sở dữ liệu 24 1 Mô tả bảng lưu trữ dữ liệu 24 CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC 28 3.1 Về phần
2.3.1 Mô tả bảng lưu trữ dữ liệu a Bảng lưu trữ thêm hình ảnh logo b Bảng lưu trữ danh mục sản phẩm c Bảng lưu trữ thông tin trên thanh title
24 d Bảng lưu trữ thông tin đặt hàng thành công e Bảng lưu trữ bình luận của khách hàng f Bảng lưu trữ thông tin sản phẩm
25 g Bảng lưu trữ thông tin tài khoản đăng nhập admin h Bảng lưu trữ thông tin liên hệ và giới thiệu trang
CHƯƠNG 3: KẾT QUẢ ĐẠT ĐƯỢC 3.1 Về phần giao diện trang web Đã tạo ra một giao diện đầy đủ về menu động, các thanh tìm kiếm, dòng chữ chạy hay nhưng banner góp phần làm cho website thêm sinh động và đẹp mắt
Về sản phẩm: có đầy đủ các loại điện thoại được đưa lên trang web bán hàng a
Khi truy cập trang chủ của VIETMY PHONE, người dùng sẽ ngay lập tức thấy công cụ tìm kiếm, logo, giỏ hàng cùng với số lượng sản phẩm hiện có trong giỏ.
Bên dưới thanh công cụ là thanh title với các danh mục sản phẩm khác nhau của cửa hàng
Banner ngang và hàng banner nhỏ bên phải màn hình được sắp xếp dễ nhìn hợp mắt
Cửa hàng giới thiệu các sản phẩm nổi bật được sắp xếp bởi nhà quản trị, tiếp theo là danh sách các sản phẩm mới nhất được cập nhật.
Hình 3 1: Kết quả hiển thị trang chủ
Chân trang được thiết kế là vị trí để giới thiệu thông tin của cửa hàng Để khách hàng dễ dàng liên hệ đến cửa hàng
Hình 3 2: Kết quả hiển thị trang chủ b Giao diện trang sản phẩm
Giao diện sản phẩm hiển thị đầy đủ thông tin khi người dùng click vào một sản phẩm, với hai hàng banner vẫn giữ nguyên như trên trang chủ Thông tin chi tiết về sản phẩm được cập nhật một cách đầy đủ và rõ ràng.
Hình 3 3: Kết quả hiển thị trang sản phẩm
Sau phần thông tin về sản phẩm là phần viết bình luận của khách hàng.
4: Kết quả hiển thị trang chủ c Giao diện đăng nhập tài khoản admin
30 Giao diện đăng nhập admin giúp admin đăng nhập được vào trang quản lý hệ thống cửa hàng
Hình 3 5: Kết quả hiển thị trang đăng nhập trang quản lý admin d Giao diện trang giỏ hàng
Khi truy cập vào trang giỏ hàng, người dùng sẽ thấy hai hàng banner cùng với thông tin chi tiết về các sản phẩm đã chọn Ngoài ra, trang cũng cung cấp khu vực để khách hàng điền thông tin cá nhân nhằm thực hiện việc đặt hàng.
Hình 3 6: Kết quả hiển thị trang giỏ hàng
31 e Giao diện trang đặt hàng thành công
Click vào nút mua ngay sau khi điền đầy đủ thông tin đặt hàng Màn hình sẽ hiển thị
“Bạn đã đặt hàng thành công”
Hình 3 7: Kết quả hiển thị trang đặt hàng thanh công
3.2 Kết quả các chức năng a Chức năng form đăng nhập tài khoản admim
Để đăng nhập vào trang quản trị, người dùng cần nhập email và mật khẩu admin đã lưu trong cơ sở dữ liệu Nếu muốn lưu thông tin đăng nhập cho lần sau, hãy chọn "Nhớ tài khoản" Sau khi điền thông tin, nhấn nút đăng nhập để truy cập vào trang quản lý.
Hình 3 9: Kết quả hiển thị trang chủ quản lý admin b Chức năng tìm kiếm sản phẩm
Hình 3 10: Kết quả hiển thị trang chủ
Khi nhấp vào mục tìm kiếm trên thanh công cụ, bạn sẽ thấy lịch sử tìm kiếm trước đó Để tìm sản phẩm mong muốn, hãy nhập tên sản phẩm vào thanh tìm kiếm và nhấn nút tìm kiếm bên cạnh.
Nếu sản phẩm có trong database thì sẽ hiển thị các sản phẩm mình cần tìm và số lượng sản phẩm hiện đang có.
Hình 3 11: Kết quả hiển thị trang tìm kiếm khi tìm thấy sản phẩm
Nếu sản phẩm khách hàng tìm kiếm không có trong database thì trên màn hình sẽ hiển thị là “0 sản phẩm”
Hình 3 12: Kết quả hiển thị trang tìm kiếm khi không tìm thấy sản phẩm c Chức năng giỏ hàng
Khách hàng có thể chọn sản phẩm mình quan tâm trên màn hình, sau đó nhấn nút “mua ngay” để thêm vào giỏ hàng hoặc thực hiện giao dịch ngay lập tức.
Hình 3 13:: Kết quả hiển thị trang sản phẩm
Sau khi thực hiện thao tác, màn hình sẽ hiển thị trang giỏ hàng Tại đây, khách hàng có thể điều chỉnh số lượng sản phẩm và xem tổng giá thành sau khi nhấn nút “Cập nhật giỏ hàng”.
Hình 3 14: Kết quả hiển thị trang giỏ hàng d Chức năng đặt hàng
Sau khi khách hàng thêm sản phẩm vào giỏ hàng và chọn số lượng mong muốn, họ cần điền đầy đủ thông tin trong form đặt hàng Cuối cùng, hãy nhấn nút “Mua ngay” để hoàn tất đơn hàng.
Hình 3 15: Kết quả hiển thị trang giỏ hàng
Xong thao tác trên mà hình hiển thị bạn đã đặt hàng thành công Tức là bạn đã đặt hàng thành công.
Hình 3 16: Kết quả hiển thị trang đặt hàng thành công e Chức năng quản lý đơn hàng
Nhà quản lý trang web sau khi đăng nhập vào trang admin sẽ thấy nút "Quản lý đơn hàng" Khi nhấn vào nút này, màn hình sẽ hiển thị danh sách các đơn hàng mà khách hàng đã đặt.
Khi đơn hàng đã được giao, bạn có thể nhấn nút “xử lý” để chuyển trạng thái thành “Đã xử lý”, giúp dễ dàng quản lý các đơn hàng đã giao và chưa giao.
Hình 3 17: Kết quả hiển thị trang quản lý đơn hàng f Chức năng quản lý bình luận
Khi khách hàng để lại bình luận trên trang sản phẩm, nhà quản lý chỉ cần đăng nhập vào trang admin để xem tất cả các ý kiến của khách hàng Họ cũng có khả năng xóa những bình luận tiêu cực về sản phẩm trên trang web.
Hình 3 18: Kết quả hiển thị trang quản lý bình luận g Chức năng quản lý cấu hình
Nhà quản lý trang web có thể thay đổi cấu hình của trang web sao cho phù hợp với thay đổi của cửa hàng
Hình 3 19: Kết quả hiển thị trang quản lý cấu hình
Để thay đổi thông tin tại chân trang như địa chỉ hoặc hotline, nhà quản trị chỉ cần nhấp vào mục “Cấu hình chân trang” để thực hiện các thay đổi một cách dễ dàng.
Trên màn hình, bạn có thể thấy tất cả nội dung đã thêm trước đó Để chỉnh sửa nội dung, hãy nhấp vào biểu tượng hình bút trong cột tác vụ, và nếu bạn muốn xóa nội dung, hãy nhấp vào biểu tượng chữ x màu đỏ trong cùng cột.
Hình 3 20: Kết quả hiển thị trang nội dung quản lý cấu hình title
Nếu muốn thêm chân trang mới ta click vào “ Thêm chân trang” để thêm mới Ta có thể thêm mọi thứ mà mình muốn thêm như form cho trước