CHUONG I: KHAI NIEM TONG QUAT VE MA NGUON MO 1.1 KHAI NIEM MA NGUON MO Mã nguồn mở là những phần mềm được cung cấp dưới cả dạng mã và nguồn, không chỉ là miễn phí về giá mua mà chủ yếu l
13 CÁC LOẠI MÃ NGUỎN MỞ THƯỜNG DÙNG TRONG THIẾT KẺ- NukeViet Mã nguồn mé Nukeviet 1a san pham “made in Viét Nam” có khả năng tích hợp nhiều ứng dụng trên nền Web NukeViet được viết bằng ngôn ngữ PHP và chủ yếu sử dụng cơ sở đữ liệu MySQL,cho phép người sử dụng có thê dễ dàng xuất bản và quản trị các nội dung của họ lên Internet hoặc Intranet
NukeViet được sử dụng ở nhiều website, từ những website cá nhân cho tới những hệ thống website doanh nghiệp, nó cung cấp nhiều dịch vụ và ứng dụng nhờ khả năng tăng cường tính năng bằng cách cài thêm các module, block Nuke Viet có thể dễ dàng cài đặt, dễ dàng quản lý kế cả với những người mới sử dụng
Hiện nay ở Việt Nam, TDEFOSS là một trong những đơn vị nổi bật nhất trong việc ứng dụng mã nguồn mở NukeViet vào thiết kế website, đem đến những website có giao diện đẹp cùng tính năng phong phú Hiện đã có rất nhiều khách hàng cá nhân và doanh nghiệp tại Việt Nam tin dùng sản phẩm của TDFOSS
- WordPress Một trong những mã nguồn mở được nhiều người lựa chọn sử dụng hiện nay chính là WordPress Với nền tảng mã nguồn mở này sẽ giúp thiết kế website nhanh chóng, giao diện quán trị dễ dùng phù hợp với mọi đôi tượng khách hàng Ngoài ra hệ thống còn hỗ trợ tối ưu hóa SEO hiệu quả.
- Joomla Đây là mã nguồn mở xuất hiện đầu tiên trên internet vào năm 2005 và đến nay vẫn đang được sử dụng, đặc biệt là trong các website thương mại điện tử Các lập trình viên có thê thêm các module đề tùy chỉnh website bán hàng Joomla còn được viết bằng PHP và có thể được sử dụng trong môi trường PHP & Mysdl
- Magento Ra mắt vào năm 2008, Magento cho phép thiết kế web bán hàng rất hiệu quả
Magento được xây dựng dựa trên nên tảng Zend Framework
- OpenCart Thiết kế gần gũi và phù hợp với với phong cách thương mai điện tử của Việt Nam chính là ưu điểm của mã nguồn mở OpenCart OpenCart sử dụng ngôn ngữ PHP nhằm cung cấp cho người dùng các giải pháp thương mại điện tử mạnh mẽ với khả năng mua bán trực tuyến
- CMS Made Simple Made Simple ra đời vào năm 2009 và cung cấp cho người dùng một phương pháp phát triển và tùy chỉnh website theo cách thật đơn giản mà không cần phải đối diện với những dòng lệnh phức tạp
- B2evolution B2evolution ra đời vào năm 2003 và hỗ trợ nhiều blog, admm và user chỉ với một lần cài đặt duy nhất
Mã nguồn mở đem đến nhiều tiện ích và thuận lợi trong quá trình thiết kế cũng như sử dụng website Tuy nhiên hiện nay có rất nhiều đơn vị thiết kế website dựa trên nền tảng mã nguồn mở, bạn cần lựa chọn được một đơn vị thiết kế uy tín, chất lượng để có được một websife hoạt động hiệu quả, được tôi ưu hóa
CHƯƠNG II: GIOI THIEU VE WORDPRESSWORDPRESS LA Gh ?- WordPress là phần mềm mã nguồn mở được cung cấp miễn phí, sử dụng ngôn ngữ lập trình PHP và hệ cơ sở dữ liệu MyS5QL Do đó, nó thích hợp cho ai muốn đặt blog trên chính website sử dụng tên miền của riêng mình Tuy nhiên, nếu không có tên miền riêng và chịu được một vài hình ảnh quảng cáo đôi khi xuất hiện, bạn vẫn có thê dùng chung với nhà cung cấp Automattic Production tai địa chỉ http://wordpress.com tương tự các nhà cung cập khác
- WordPress là một dạng phần mềm mã nguồn mở, là hậu duệ chính thức của b2/cafelog, được phát triển bởi Michel Valdrighi Cái tên WordPress được đề xuất bởi Christine Selleck, một người bạn của nhà phát triển chính Matt Mullenweg
- WordPress viết bằng PHP và sử dụng hệ quản trị MySQL WordPress chay tot trên PHP5, hầu hết mọi host (dịch vụ lưu trữ trực tuyến) có PHP đều hỗ trợ WordPress Nhiều Host (Godaddy, Host Gator, ) con cd chire nang tự động cài đặt WordPress
- WordPress để đăng tải thông tin lên mạng, WordPress có chức năng như mọi Website khác Nó có thể làm site tin tức, đánh gia, ban hàng thậm chí là mạng xã hội
Ngoài ra, WordPress còn hỗ trợ tạo Blog miễn phí trên WordPress.com dé nhiing ai không có điều kiện tài chính, kỹ thuật, thời gian có thê sử dụng được WordPress
- WordPress còn thêm vào một số tính năng nhỏ nhằm hỗ trợ người dùng trong quá trình sử dụng như khả năng tự động lưu liên tục khi soạn thảo, nạp nội dung từ blog khác hay chia mục cho bài viết Tuy nhiên, WordPress lại không có chức năng xem trước
(preview) nội dung bài viết của mình, điều gây khó khăn cho người dùng khi họ cần xem xét và chỉnh sửa
- Các bản nâng cấp chính được chỉ định tên mã (codenames) đại diện cho các nhạc sĩ nhạc jazz nỗi tiếng
- Tuy nhiên, như thế không đồng nghĩa với việc WordPress chỉ thích hợp với các dự án quy mô nhỏ mà vừa, hiện nay, có tới khoảng 283% website trong danh sách 100 website lớp nhất thế giới chọn sử dụng mã nguồn wordpress này Như tạp chí TechCrunch, MTV News, Bata, Quartz, CNN, BBC America, Sony Music, và rất nhiều website khác.
NHUNG THANH TUU CUA WORDPRESSNhững thành tựu rất vượt bậc và là một mã nguồn CMS mở pho bién nhat hanh tinh
WordPress da dat được những thành tựu như sau: rJ Trên thế giới, có khoảng 25 bài viết được đăng lên các website sử dụng WordPress mỗi giây
4 Số lượng website làm bang WordPress chiếm 27% tổng số lượng website trén thé gIỚI
LJ Trong số 100% các website sử dụng mã nguồn CMS, WordPress chiếm 60%
LI Phiên bản WordPress 4.0 đạt hơn I6 triệu lượt tải chỉ sau khoảng hai tháng
C1 WordPress đã được dịch sang 169 ngôn ngữ khác nhau, bao gồm phiên bản Tiếng
Việt được dich day đủ Ì Chỉ tính các giao diện (hay còn gọi là theme) miễn phí trên thư viện WordPress.org thì đã có hơn 2.700 themes khác nhau.
CÂU TRÚC CƠ BVN CỦA MỘT TRANG WORDPRESS Với một website thông thường, nó sẽ bao gồm các thành phần sauGiao diện (Front-end): Là những gì chúng ta thấy nó hiển thị ra bên ngoài như bố cục, màu sắc của website Phần này chúng ta gọi là giao điện và nó được xếp vào loại Tront-end của một website
Mã nguồn xử lý (Backend): Giống như một cỗ máy, đề nó hoạt động được như những gì chúng ta thay thì phải có một hệ thống bên trong đề xử lý Ví dụ khi vào website bạn ấn nút đăng ký, làm sao hệ thông có thê lưu trữ các thông tin của bạn lại thì sẽ do các mã nguồn xử lý
Cơ sở dữ liệu (Database): Với các website hiện nay thì sẽ có một phần không thê thiếu gọi là cơ sở dữ liệu Cơ sở dữ liệu sẽ lưu lại dữ liệu mềm của website đó như dữ liệu bài viết, nội dung trên website, hay các thiết lập Còn mã nguồn chỉ lưu trữ các tập tin của mã nguồn, tap tin hình ảnh
Như vậy để xây dựng được một website, chúng ta phải làm 3 phần này với độ phức tạp cao và yêu cầu bảo mật khất khe Thế nhưng với sự hỗ trợ của WordPress, công việc này đã được làm sẵn và chúng ta chỉ việc sử dụng cho nó chạy
Bộ quản trị WP gồm các phần cơ bản sau:
- Dashboard: Téng quan vé quan trị wordpress, bao gồm thông tin tóm tắt về website wordpress, viết blog nhanh, một số bình luận mới nhất, bài từ wordpress.org blog, plugin mới vả phô biên nhật và link đên website của bạn
- Updates: Hién thi tat cả các theme và plugin có bản mới
- Posts: Quan ly bai viét, tag va danh muc (category)
- All posts: Quản lý tất cả các bài viết
- Add new: Đăng bài viết mới
- Categories: Quản lý tất cả các danh mục
- Tags: Quản lý tất cả các Post Tag
- Appearance: Quan lý giao diện
- Plugins: Quản lý các thành phần mở rộng
- Settings: Thiét lap các tùy chọn.
LY DO NEN CHON WORDPRESS Dưới đây là một số lý do rất tuyệt vời để chọn WP làm nên tảng xây dựng website cho- Dé sir dung WordPress được phát triên nhằm phục vụ đối tượng người dùng phố thông, không có nhiều kiến thức về lập trình website nâng cao Các thao tác trong WP rất đơn giản, giao điện quản trị trực quan giúp bạn có thê nắm rõ cơ cấu quản lý một website WP trong thời gian ngắn Về cách cài đặt lại càng dễ hơn, bạn có thể tự cài đặt một website WP trên host (máy chủ) riêng của mình và tự vận hành nó sau vải cú click Bạn đang lo lắng cách cai dat thé nao, host là gì? Không sao, các phần tiếp theo của serie học WP căn bản của mình đã có nói rất chỉ tiết
- _ Cộng đồng hỗ trợ đông đảo Là một mã nguồn CMS mở phô biến nhất thế giới, điều này cũng có nghĩa là bạn sẽ được cộng đồng người sử dụng WP hỗ trợ bạn các khó khăn gặp phải trong quá trình sử dụng Nếu bạn có khả năng tiếng Anh tốt, bạn có thê dễ dàng tìm câu trả lời cho vấn đề bạn đang gặp phải trên Google chỉ với vài từ khóa tìm kiếm
- Nhiều gói giao diện có sẵn Trong khi sử dụng WP, khái nệm giao diện website thường được gọi là theme nên kê từ phần này, mình sẽ gọi nó là theme Hiện nay WP có rất nhiều theme miễn phí khác nhau đề bạn có thể dễ dàng thay đôi “da thịt” của website mình chỉ với vải cú click mà không cần bận tâm việc làm sao để thiết kế một theme cho riêng mình Còn nếu bạn muốn website đẹp và chuyên nghiệp hơn, bạn có thể mua các theme trả phí với giá bán dao động từ $30 đến $65
- _ Nhiều plugin hỗ trợ Plugin nghĩa là một trình cắm thêm vào website dé bố sung các chức năng mà bạn cần Ví dụ mặc định sau khi cài website WP, bạn không có chức năng hiển thị các bài viết liên quan ở dưới mỗi bài viết, nhưng với nhiều plugin miễn phí hỗ trợ thì bạn có thể dễ dàng cài thêm một plugin miễn phí để website mình có chức năng đó Tương tự với theme, cũng có rất nhiều plugin trả phí mang những tính năng rất độc đáo và có ích vào website và nó sẽ có giá khoảng từ $10 đến $80 tùy theo độ phức tạp
- _ Dễ phát triển cho lập trình viên
Nếu bạn là một người có am hiểu về việc làm website như thành thạo HTML, CSS, PHP thì có thể dễ dàng mở rộng website WP của bạn ra với rất nhiều tính năng vô cùng có ích Cách phát triển cũng rất đơn giản vì WP là một mã nguồn mở nên bạn có thể dễ dàng hiểu được cách hoạt động của nó và phát triển thêm các tính năng
Với hàng nghìn hàm (function) có sẵn của nó, bạn có thể thoải mái sử dụng, bạn cũng có thê thay đối cau trac của một hàm với filter hook và hầu như quy trình làm việc của một lập trình viên chuyên nghiệp có thê ứng dụng dễ dàng vào WP
- _ Hỗ trợ nhiều ngôn ngữ
Mã nguồn WP hiện tại có rất nhiều gói ngôn ngữ đi kèm, bao gồm tiếng Việt Mặc dù trong mỗi giao diện hay plugin đều có ngôn ngữ riêng nhưng ban co thé dé dang ty dịch lại nó với các phần mềm hỗ trợ
- _ Có thể làm nhiều loại website
Dùng WordPress không có nghĩa là bạn chỉ có thể làm blog cá nhân, mà bạn có thê biến website mình thành một trang bán hàng, web công ty, web tin tức/ tạp trí hay kê cả web phim bằng việc sử dụng kết hợp các theme và plugin với nhau Tuy nhiên để làm được, bạn nên chắc chắn là đã hiểu được WP chứ đừng vội một bước lên mây để nhận các cảm giác thất vọng vì độ phức tạp của nó.
CHUONG III: XAY DUNG TRANG WEBDAT VAN DE VA PHAN TICH NHIEM VU CUA HE THONG 1 DAT VAN DETrong nền kinh tế thị trường hiện nay, các cửa hàng muốn tôn tại và phát triển phải có những chiến lược phát triển kinh doanh, chiến lược thị trường và chiến lược cạnh tranh một cách đúng đắn và sáng tạo cho phù hợp với khả năng cửa các cửa hàng với thực tế của thị trường Việc ứng dụng một mô hình TMĐT cho cửa hàng là rất quan trọng, góp phân giúp cho cửa hàng phát triển hơn về mặt bán lẻ cũng như quảng cáo dịch vụ, tăng hiệu quả trong kinh doanh
Căn cứ vào quá trình khảo sát thực tế và nhu cầu của nền kinh tế thị trường, nhận thấy cần phải xây dựng một Website trực tuyến cho cửa hàng, đáp ứng nhu cầu của khách hang, cua nha quan ly và nâng cao hiệu quả kinh doanh của cửa hàng Việc xây dựng Website bán hàng trực tuyến có ý nghĩa rất quan trọng Nó nó không chỉ giúp nhà quản lý có thê quản lý được sản phẩm của cửa hàng, quảng bá sản phẩm, dịch vụ mà còn giúp cho khách hàng quản lý sản phẩm một cách thuận thiện nhất, giảm chỉ phí, không bị giới hạn bởi không gian địa lý Dựa vào quy trình bán hàng của đa số các cửa hàng trên sàn thương mại điện tử, hệ thống website xây dựng cần thỏa mãn những điều kiện sau:
-_ Giao diện đơn gián, dễ sử dụng, thân thiện với nhà quản lý và khách hàng
-_ Phù hợp với quy định của nhà nước và doanh nghiệp
-_ Phù hợp với tình hình hoạt động của cửa hàng
3.1.2 MOT SO NHIEM VU CO BVN CUA WEBSITE Website được xây dựng, cần đáp ứng được yêu cầu:
- - Cập nhật, đăng mới sản phẩm lên website cho người tiêu dùng dễ dàng tìm kiếm, so sánh và mua săm
- _ Đơn giản hóa việc mua hàng cho người tiêu dùng bằng phương thức đặt hàng và phương thức thanh toán trực tuyến có trên website
- _ Đăng lên host và có thể tìm kiếm trên mạng
- Sử dụng WordPress và các tính năng hữu ích của nó cho việc thiết kế một website giới thiệu địch vụ và bán hàng bắt mắt.
DANG KY DOMAIN VA MUA HOSTINGHosting được cung cấp bởi thầy Vương Xuân Chí dựa trên bảng điều khiển của DirectAdmin
DirectAdmin là gi? DirectAdmin la mét trong nhimg Bang diéu khién (Control Panel) đành cho người quản trị Web Hosting được ưa chuộng hiện nay với giao diện trực quan, dé str dyng DirectAdmin cung cấp các tính năng như xem, thay đổi thiết lập phần cứng và phần mềm của máy chủ Đồng thời nâng cao tính bảo mật và kiểm soát tài khoản người dùng Ưu điểm:
- Phương thức sử dụng đơn giản
- Tốc độ sử dụng nhanh, ít tiêu tốn tài nguyên
- Các tính năng chưa được hoàn thiện đầy đủ
- DirectAdmin không tương thích với dòng font unicode nên rất khó để để sửa khi file sử dụng các ngôn ngữ không phải là tiếng Anh.
CÀI ĐẶT WORDPRESS TRÊN HOSTINGTải ủle nộn WordPress miễn phớ thụng qua đường dẫn: https://vi.wordpress.org/download/.
Chép file vao thu muc “public_html”, sau đó giải nénDANG NHAP VAO PHAN QUVN TRI CUA WORDPRESSSau khi hoàn tất các bước cài đặt WP, bước tiếp theo đề đăng nhập vào trang quản trị thông qua đường dẫn: “tenmienWPcuaban/wp-admin”, cụ thê em thực hiện cài đặt WP dựa trên host của thầy Vương Xuân Chí cung cấp, nên sẽ có đường dẫn như sau:
“thanhhiep.daihocsontt.edu.vn/wp-admin”’
Xin chào! Bạn đã đăng nhập vào khu vực Quản trị của
7 Tìm hiếu thêm về phiên bản 6.1.1
“+ m= Author rịch content with blocks Bi Start Customizing a Discover a new way to build your i and patterns © wader menus and site, a led a ©m Ạ chỉnh e
Hình 3 Giao điện trang quan tri wordpress 3.5 CÀI ĐẶT TEMPLATE CÁC TRANG CHO WEBSITE
Sử dụng plugin có sẵn trên WP là “Elementor Website Builder”
The Elementor Website Builder has it all: drag and drop Chi tiét page builder, pixel perfect design, mobile responsive editing, and more Get started now!
KKK KK 6.376 Cập nhật lăn cuối: 2 ngày trước
5 triệu+ lượt kích hoạt Tương thích với phiên bản WordPress của bạn
Hinh 4 Plugin Elementor Elementor là một plugin tạo trang WordPress phố biến hiện nay, giúp bạn tạo ra các website đẹp mắt chỉ với những thao tác kéo thả đơn giản nhất Với Elementor, bạn sẽ xây dựng được một website của riêng mình mà không cần viết code Plugin này mang đến sự tiện lợi, đơn giản cho người dùng và hiện đang là một trong những plugin được cài đặt nhiều nhất với hơn 5 triệu người dùng trên nền tảng WordPress.
Elementor sẽ trực tiếp dẫn bạn tới giao diện thiết kế Frontend (hay còn được gọi là giao diện người dùng) Do đó, giao diện mà bạn thấy được trong khi thiết kế cũng là những gì mà người dùng thấy được khi truy cập vào website Việc khó khăn nhất đối với bạn là kéo các tiện ích từ thanh công cụ thả vào màn hình thiết kế sau đó chính sửa theo ý muốn để tạo ra một thiết kế riêng Vì vậy, dù bạn chưa từng học bài bản về lập trình web, bạn vẫn có thể sử dụng Elemenfor một cách dễ đàng.
TRANG CHỦLà trang hiền thị đầu tiên khi người dùng truy cập trang web Chứa các thông tin tông quan của toàn bộ trang web: giới thiệu về dịch vụ, cam kết, feedback của người dùng, hệ thống chuỗi cửa hàng,
Giao diện tổng quan của trang chủ như sau:
'Wodfs and Putrs Services, Ín Ho CÀI Minh City
Dịch vụ chăm sóc tốt nhất mà thú cưng của bạn cần!
Bạn đang tìm kiếm địa chỉ cung cấp dịch vụ ci Duero un nr ee 0C TP.HCM ~ Đà Nẵng - Hải Phòng? Tại W chúng tôi cung cấp đầy đủ tất cả các loại hình dịch vụ chăm sóc và làm đẹp trọn gói tốt nhất dành cho thú cưng của bạn
Hình 5 Giao điện trang chủ
Từ mẫu template có sẵn, người quản trị có thể chỉnh sửa một cách trực quan thông qua Elementor
Bảng menu chính sẽ có cấu trúc như sau:
- Trang chủ - Dich vu - Cửa hàng
+ Sữa tắm + Đồ dùng ro, - Lién hé - Tai khoan
+ Quên mật khẩu - Giỏ hàng
— Wishlist Page n— Trang Tai khoan Thanh toán — Trang Thanh toar hang — Elementor, Trang Gio hang
Cửa hàng — Elementor, Trang Của hàng êm vào me:
Bài viết Sản phẩm Liên kết tự tạo Chuyên mục Danh mục sản phẩm Từ khóa sản phẩm Điểm cuối kết nối WooCommerce
Thức ăn chỉ mực con
Sữa tắm chị Đồ dùng
Hình 6 Giao điện quản ly menu
Với Elementor, khi click vào bất kì đối tượng nào, sidebar bên trái sẽ xuất hiện những nội dung của đối tượng đó như: icon, hình ảnh, văn bản, sẽ chỉnh sửa trực tiếp ở vùng này.
Woofs and Purrs Serviees, ín Ho Chỉ Minh Cíty
NDịch vụ chăm sóc tốt nhất Nhà thú cưng của bạn cần!
TP.HCM ~ Đà Nẵng ~ Hải Phòng? Tại Woofs and Purr ee Ey loại hình địch vụ chăm sóc và làm đẹp trọn gói tốt nh cho thú cưng của bạn
Hình 7 Giao điện chỉnh sửa wideetf Chỉnh sửa cột - section:
- Tùy chỉnh, sửa đổi section - cột: Đề tùy chỉnh (màu sắc, nền, chiều cao ) của section hay cột, hãy di chuyển chuột vào góc trên hay góc bên phải
- Tùy chỉnh, sửa đối đối tượng: click trực tiếp vào đối tượng hoặc click vào icon cây bút trên góc phải
Hết mình vì công việc Giá dịch vụ rẻ nhất Chất Lượng hàng đầu
Chúng tôi cam kết đưa ra mức giá tốt nhất so với thị trường : Chúng tôi không ngừng nâng cao phát triển trình độ kỹ năng Chúng tôi làm việc hết mình với chữ tâm, trách nhiệm và đế tất cả thú cưng đều có co hội được trải rghiệm dịch vụ của nhân sự đế phục vụ thú cưng những điều tốt đẹp nhất òng nhiệt huyết Thú cưng khỏe mạnh là niềm hạnh phúc của chúng tôi của chúng tòi
Hình 8 Giao điện chỉnh sửa section
TRANG DỊCH VỤ Trang chứa bảng giá của từng dịch vụ từng loại thú cưng, những lưu ý khi chuẩn bịDịch vụ chó Bang giá spa cho chó mèo tron gới đã bao gồm gói tắm gôi toàn diện, sấy khô, chái lông rụng, cắt dũa móng, vệ sinh tai theo yêu cầu mà không phái tỉnh thêm bất cử phụ phí não khác `
Dịch vụ mèo Bảng giá spa cho chó mèo tron gói đã bao gồm gói tắm gôi toàn điên, sấy khô, chải lông rung, cắt dữa móng, vệ sinh tai theo yêu cầu mà không phải tính thêm bất cứ phụ phí nào khác
Hình 9 Giao diện bảng giá dịch vụ Video giới thiệu dịch vụ:
Các tùy chọn cho video
Nguồn video được upload từ Youtube, với Elementor người dùng chỉ cần còn những lựa chọn mà mình cần như: đường liên kết video, thời gian bắt đầu video, thời gian kết ằ
Hình 10 Giao điện chỉnh sửa video giới thiệu dịch vụ thúc, tắt tiếng, lặp lại, tỷ lệ khung hình, hiệu ứng chuyên động, rất nhiều những tính năng hữu ích khác.
TRANG CỬA HÀNGLà trang khá quan trọng chứa toàn bộ những sản phâm dành cho thú cưng đang được bày bán của cửa hàng Với menu con là phân loại của các sản phẩm như: thức ăn, sữa tắm, đồ dùng, thuốc thú y,
'Woofs and Purrs Services, in Ho Chí Minh Gity
Dịch vụ chẩọm súc tốt nhất mà thú cưng của bạn cẩn!
Bạn đang tìm kiếm địa chỉ cung cấp dịch vụ cắt tỉa lông chó mèo chuyên nghiệp tại Hà Nội TP.HCM - Đa Nẵng - Hải Phòng? Tại Woofs and Purrs, chủng tôi cung cấp đầy đủ tất cả các loại hình dịch vụ chăm sóc và làm đẹp trọn gói tốt nhất dành cho thú cưng của bạn
Hình 11 Giao dién menu cua hang
Chuồng chó mèo bằng sắt sàn nhựa Quần áo cho chó mèo AMBABY PET Sốt pate cho mèo CIAO phi lê gà và Sữa tắm chó mèo mùi hương bơ hạnh
AUPET Dog Cage 2JXF164 thịt bò nhân BBN Almond Butter wwwww wwwww wwwwwd tuwww
Hình 12 Giao điện menu sản phẩm
Chứa các sản phẩm với các thông tin như ảnh sản phẩm, giá tiền, đánh giá, thêm vào gio hang,
Ngoài ra, người dùng còn có thê click vào sản phẩm để xem chỉ tiết về: ảnh sản phẩm, mô tả chỉ tiết, xem đánh giá, sản phẩm cùng loại tương tự, Từ đó có thể tự tin lựa chọn sản phẩm đề thêm vào giỏ hàng của mình
Trong chủ ức 4r / Sất pate cho mèn thịt bò
Q x 3 l(yaš 2290725301160 Sốt pate cho méo CIAO phi lé ga va thit x bo
20.000 đ sot phi lê gồ và thịt bò dạng gói phù hợp với như cầu
- dinh đưỡng dành cho mèo can đến mèo trưởng thành có thể tự ăn riêng
ES ui ae Bis Gea Re hoặc trộn cùng với bữa ăn bàng ngày Hoàn toàn không sử đụng chất bảo Ni
Mé ta Thông fn bổ sung Đánh gió (0) Thịt ức gà 35%, thịt bồ 1%, tình bột, chất điều vị sò điệp cùng các hương liệu phụ gia an taàn khác
Cho mèo ăn một ngày từ 2 đến 3 lần trở lên, mới lần khoảng 1 túi Hoặc có thể điều chỉnh tùy theo trọng lượng và mức độ hoạt động của mỗi bé mèo Xem ngày sản xuất ở mặt sau của bao bì, Thời hạn sử dụng 2 năm kể từ ngày sẵn xuất Bảo quân trong tủ lạnh sau khi mở Có thể hầm ấm trước khi sử dụng
Hình 13 Giao điện chỉ tiết sản phẩm
3.7.1 TAO TRANG SVN PHAM WooCommerce là một plugin mã nguồn mở trên WordPress hỗ trợ thiết kế website thương mại điện tử hay web bán hàng Tác vụ của nó là biến website trở thành một trang thương mại điện tử nhanh chóng, hiệu quả
WooCommerce is the world's most popular open-source Chỉ tiết eCommerce solution Bdi Automattic wk KT 2.995) Cập nhật lần cuối: 21 giờ trước
5 triệu + lượt kích hoạt Tương thích với phiên bản WordPress của bạn
WooCommerce cung cấp rất nhiều tính năng hữu ích như:
- Tạo danh sách để người dùng tùy ý nhập và tra cứu thông tin sản phẩm (ví dụ như: mã, tên, số lượng, đơn gián, )
- Tính toán được tông chỉ phí đơn hàng của người mua một cách nhanh chóng, chính xác
- Hỗ trợ các hình thức thanh toán trực tiếp và online thông dụng như: PayPal, Credit
- Hỗ trợ tính thuế VAT hoặc thuế doanh nghiệp
- Cung cấp template mẫu, hỗ trợ xây dựng giao diện hiện thị cho doanh nghiệp
- Xác nhận trạng thái đơn hàng, giúp người bán biết được món hàng của mình đang ở giai đoạn nào (đã xác nhận đơn, đang giao hàng, đã giao thành công hay yêu cầu trả lại hang, )
Với giao diện trực quan, WooCommerce cho phép người dùng có thê thêm các thông tin sản phẩm một cách dễ dàng thông qua các bước:
- Nhập tên sản phẩm - Mô tả sản phẩm
Thêm sản phẩm mới Cửa làng chưa sử dụng kết rối an toàn Ban nên sử dụng HTTPS để đảm: bảo an toàn chơ khách hàng, Tìm: Wit thêm tại đầy,
Sữa tắm chó mèo mùi hương bơ hạnh nhân BBN Almond Butter
Liên kết tĩnh hitts/2tsanhhiep.dailiecsanttsdi i homeo bo-almand-b Chính rửa
Q) Thim Media [Ế] Add Fam | @ Trực do Đoạn vẲB T7 Ekt€&= Ÿ£ z8
Sữa tắm chó mèo mùi hương bơ hạnh nhân BBN Almond Buttar kết hợp hanh nhân chuyên dùng cho thú cưng có mảu lông vảng Với các thảnh phản từ dâu chiết xuất hạnh nhân, tinh dầu yari, vitamin E, chiết xuất collagen, chiết xuất thực vật, axit amin Sản phẩm giúp lây lại màu lông gốc tuyệt đẹp cho thủ cưng của bạn
Hình 15 Giao điện thêm sản phẩm mới l
- GIả bán ngày thường - Giá khuyến mãi - Thời gian diễn ra khuyến mãi
Dữ liệu sản phẩm — Sản phẩm đơn giản vị 9 Sản phẩm ảo: €ó thể tải xuống: caer Giá bán thường (đ 180000
5iọ khuyến mói (đ 150000 B® Giao hang
# Các sản phẩm được kết nổi 2022-12-12 —
B các thuộc tính Ð' Nắng cac
Hình l6 Giao điện thêm sản phẩm mới 2
- Số lượng sản phẩm có trong kho - Cho phép đặt hàng trước - Ngưỡng số lượng sản phẩm sắp hết hàng
Dữ liệu sản phẩm — _ Sản phẩm đơn giản vị @ Sánphẩmáo[ ] C6 thé tai xudng: Avia
@ kiểm kờ kho hàng ơ tân lý kho hãng (VÌ Manage stock leve nt Giao hing lương trong kho | 10 ©
€ Các sản phẩm được kết ng oom | Cho phép v.9 f các thuộc tính
# Nâng cao Án tiết _Ì Limit purchases to 1 item per order @
Hình 17 Giao diện thêm sản phẩm mới 3 - lrọng lượng và kích thước của sản phâm
Dữ liệu sản phẩm — | Sản phẩm đơn giản xi Sảnphẩmảo[ Ì Có thểtải xuống: - Avia
# Chung Trọng lương (kg) | 01 e © kiém ké kho hang
Các sản phẩm được kết Sp giao har | Không có lớp giao hang vị9 fR Các thuộc tỉnh
Hình 18 Giao dién thém san pham moi 4 - Thiết lập anh cho sản phâm Ảnh sản phẩm x
Lọc media Tim kiếm CHI TET DIN KEM
Hình 19 Giao điện thêm sản phẩm mới 5 - Thêm từ khóa cho sản phẩm
Từ khúa sản phẩm Av ô4 sua tam Thém
Phân cách các thẻ bằng dấu phẩy © sua tam
Chọn từ các tag phổ biến nhất
Hình 20 Giao điện thêm sản phâm mới 6 - Phân loại sản phâm
Danh mục sản phẩm Av *^
Tất cả danh mục _ Dùng nhiều nhất w' Sữa tắm Chưa phân loại
Hình 21 Giao điện thêm sản phẩm mới 7
3.7.3 QUVN LY SVN PHAM TRONG KHO
Sản phẩm Activity a Hoan ta cải ở U
| Ÿ _ Téng do cat lang ché méo chay pin = Côn hãng 540066 Đã dừng tong dc {Baus bin
3 Xương cho chó vị thịt bó VEGEBRAND E Hit hang 50004 — thứcán xuống #
(i —_Thuoc téy giun cho ch6 BAYER Drontal Chờ hãng 55000đ — rhuổcthúy thuoc thụ ý ty s Plus Flavour fal Chuông cho mèo bằng sắt sân nhựa ‘Con hang +350:000 © Chudng chuong W ban
“Sp AUPET Dog Cage d 08/12/2022 lúc 6:06 chiều
4 o Quin 40 cho ché méo AMBABY PET Con hang 245.000 Phụ kin Quan ao Wy Đãmuftbán
3 S01 pate cho méo CIAO phi lé ga va thit - '€ên hàng 200004 Thứcai pate * Đã wud bỏ )H/12/2622 lúc 4:53 chiều
E 4 Sữa tầm chỏ méo mùi hương bơ hạnh = Cénhang (10) ARSE Sita eam sua tam ty Da ust ban
Hình 22 Giao điện quản lý sản phẩm trong kho
Với Woocommerce việc quản lý sản phẩm trở lên dễ dàng hơn, từ đó bạn có thẻ: chính sửa sản phẩm, xóa, xem san pham, ha gia thành, số lượng trong kho, từ khóa của sản phẩm, điều chỉnh giá khuyến mãi,
TRANG LIÊN HỆChứa tất cả những thông tin mà người dùng có thể liên hệ như: địa chỉ các chỉ nhánh, số điện thoại, email, link google map, form hé tro tu vấn,
Ores Trang Chi Dich WW choHòng~ seve Tekh QED
Pet Mart tai TP Hồ Chí Minh
Get In Touch eee s + 14P Quốc Hương, Phường Thảo Điền, Quận 2
+ 841 Nguyễn Trãi, Phường 7, Quận 5 + 180 Hậu Giang, Phường 6, Quận 6 + 483 Nguyễn Thị Thập, Phường Tân Phong, Quận 7 + 84 Phan Khiêm Ích, Phường Tân Phong, Quận 7 + 116 Ba Tháng Hai Phường 12, Quận 10
Hình 23 Criao điện trang liên hệ
SlE>teso-És si „vs 9° bố (thê vua Gore vhs ° 9 @ezeer Tổ hở © oO ° - a 9 a Berar See oD Ỉ Ị : @ 9 a ¿ 99 8 mm av ° 9) ÿ ẹ + So e vn nT „850 i : a ® Te $ ‘ ©
Hình 24 Giao điện địa chỉ google map 3.8.1 FORM HO TRO TU VAN
Tên thú cưng của bạn?
Vấn đề bạn đang cần?
Số điện thoại của bạn?
Hình 23% Giao dién form hồ trợ tư vấn bằng trình drag & drop
Plugin WPEorms sẽ giải quyết yêu cầu này.WPForms là một trong những plugin contact form tốt nhất trên thị trường hiện nay, cho phép người dùng xây dựng biểu mẫu se
Contact Form by WPForms - Drag &
Drop Form Builder for WordPress
== Th le best WordPress contact for fi S online forrr np builder that helps yc
Chỉ tiết agin Drag & Dror
> beautiful contact form custom ns in minutes
2372 Cập nhật lần cuối: 4 tuần trước lượt kích hoạt w Tương thích với phiên
Với WPForms, bạn có thể tạo bảng khảo sát, biểu mẫu liên hệ, biểu mẫu đăng ký trực tuyến, biểu mẫu thanh toán và nhiều loại form khác mà không cần phải viết bất kỳ dòng mã nào Hiện đã có hơn 4 triệu người dùng WPForms đề xây dựng biểu mẫu
Có rất nhiều kiểu lựa chọn cho các bạn: tùy chỉnh các trường, thêm trường, xóa trường, thay đổi text
Tên thú cưng của bạn?
Fancy Fields mx Mác Vấn đề bạn đang căn? mm : soda
Hình 27 Giao dién chinh sua cua plugin WPForms
TRANG TAI KHOVNNgười dùng có thể truy cập trang này đề theo dõi đơn hàng, thay đổi thông tin liên hé, dia chi,
Xin chào thanhhiep (không phải tài khoản thanhhiep? Hãy và đăng nhập vào tài khoản của bạn)
Từ trang quản lý tài khoản bạn có thể xem quản lý 4 ) and
Hình 28 Giao điện trang tài khoản Theo dõi đơn hàng của mình:
Tai khoan Đ ang #841 đã được đặt lúc 9 Tháng Mười Hai, 2022 và hiện tại là Đang xử lý Chi tict don hang
Hình 29 Ciiao điện mục xem đơn hàng
TRANG GIỎ HÀNGSau khi người dùng chọn thêm sản phâm vào giỏ hàng, thì toàn bộ các sản phẩm sẽ được cập nhật vào trang giỏ hàng Ngoài ra người dùng có thể thay đối số lượng, nhập mã giảm giá và đến bước tiền hành đặt hàng
Sản phẩm Giá Số lượng Tạm tính
1 530.000 4 1 530.000 đ ôxp Hinh 30 Giao diộn trang giỏ hàng
3.10.1 THANH TOAN Sau khi hoàn tất việc xác nhận giỏ hàng, bước tiếp đến là tiễn hành thanh toán.
Giao hang Giao hàng miễn phí
Tùy chọn giao hàng sẽ được cập nhật trong quá trình thanh toán
Hình 3l Giao điện thanh toản
Sau khi ấn nút “Tiến hành thanh toán” thì người cùng cần nhập các thông tin cơ bản của người nhận như: tên, địa chỉ, số điện thoại, email, ghi chú, phương thức thanh toán, bước cuôi cùng là ân nút “Đặt hàng”.
Tên công ty (tuỳ chọn)
Quốc gia/Khu vực * Việt Nam Địa chỉ *
Apartment, suite, unit, etc (optional) Ma bwu dién (tuy chon)
0337247398 Địa chỉ email * nguyenvana8gmail.com
=I 6lao hàng tói dịa chỉ khác?
Ghi chú đơn hàng (tuỳ chon) Đơn hàng của bạn
Sữa tăm chó mèo mùi hương bơ hạnh nhân BBN Almond Butter ee Quén do cho cho méo AMBABY PET 2JXF154 1 200.000 đ
Tông đơ cắt lông chó mèo chạy pin g 000 đ
Giaa hồng Su: hàng miễn phí
Tổng 880.000 đ ® Chuyển khoản ngân hàng
Thực hiện thanh toán vào ngay tài khoỏn ngắn hàng của chúng tôi Vui lòng sử dụng Mã đơn hàng của bạn trong phần Nôi dung thanh toán Đơn hàng sẽ được giao sau khi tiền đã chuyển © Trả tiền mặt khi nhận hàng
Thông tin cá nhân của bạn sẽ được sử dụng để xử lý đơn hàng tăng trải nghiệm sử dụng website, và cho các mục đích cụ thể khác đã được mô tẻ trong : (ai: sóc! éng †z của chúng tôi
Hình 32 Giao diện điền thông tin đơn hàng
Sau khi đặt hàng thành công thì sẽ được chuyên đến trang thông tin đơn đặt hàng, chứa toàn bộ các thông tin liên quan đến đơn mua.
Cam ơn bạn Đơn hàng của bạn đã được nhận
MA DON HANG: NGAY EMAIL: TONG CONG, PHƯƠNG THỨC THANH TOÁN
841 9 Tháng Mười Hai, 2022 nguyenvana@gmail.com 880.000 4 Trả tiền mặt khi nhận hàng Trả tiền mặt khi giao hang
Sẽu tim chú mốo mựi hương be hanh nhdn BBN Almond Butter ô1 150.000 đ
Quin do cho chộ mộo AMBABY PET 2JXFIộ4 ô1 200.000 đ
Tông đơ cši lông chó mèo ctay pin CODOS 3100 x 1 530.000 đ
Giao nhận hồng: Giao hàng miễn phí
Phương thức thanh toón: Trả tiền mặt khi nhận hàng
Tổng cộng 880.000 đ Địa chi thanh toán Địa chỉ giao hàng
34/23 Bình Chánh, TP.HCM 34/23 Bình Chánh, TP.HCM
Hồ Chí Minh Hồ Chí Minh
Hình 33 iao điện đặt hàng thành công
CHUONG IV: TONG KETĐÁNH GIÁ- WordPress là một Hệ thống quản lý nội dung - mặc dù không giống như công cụ xây dựng trang web, nhưng nó vẫn phục vụ cho cùng một mục đích là xây dựng trang web Mặc dù cài đặt WordPress và sử dụng nó chắc chắn phức tạp hơn so với công cụ tạo trang web thông thường khác, nhưng nếu dành thời gian đề tìm hiểu về Wordpress, chắc chắn nó sẽ mang lại rất nhiều lợi ích
- Giao điện quản trị (WordPress Admin) dễ sử dụng góp phần giúp cho chủ cửa hàng quản lý sản phẩm, khách hàng, đơn hàng một cách hiệu quả
- _ Giao diện trang web trực quan, dễ dàng đáp ứng nhu cầu của hầu hết khách hàng
- Tích hợp sẵn một số phương thức thanh toán trực tuyến giúp việc giao dịch trao đối giữa khách hàng và chủ cửa hàng diễn ra thuận lợi hơn
- Dự đoán được các sản phẩm mà khách hàng quan tâm từ đó có định hướng phát triển sản phẩm Đề xuất các nhóm sản phẩm cùng loại khác lên kệ hàng.
HƯỚNG PHAT TRIEN- _ Sử dụng công nghệ 3D giúp giới thiệu hình ảnh sản phẩm trực quan, bắt mắt hơn
- _ Tối ưu hóa công cụ tìm kiếm (SEO)
- _ Email Marketing: khi khách hàng đăng ký nhận tin qua Email thì cửa hàng dễ dàng thông báo các chương trình khuyến mại, chương trình tri ân khách hàng và đặc biệt là khách hàng có thé cap nhat nhanh nhất các mẫu sản phâm mới nhất của cửa hàng
- - Hệ thống tạo & quản lý mã giảm giá: Dành cho thành viên VIP, khách hàng thân thiết của cửa hàng.