Xã hội phát triển về nhiều mặt kinh tế, văn hóa, xã hội kèm theo đó sự bùng nổ mạnh mẽ của công nghệ thông tin. Vì thế, nhu cầu chia sẻ thông tin để kết nối giữa doanh nghiệp và người tiêu dùng càng ngày càng cần thiết. Để đáp ứng nhu cầu đó, website cho các công ty, doanh nghiệp, cá nhân đã ra đời. Và việc xây dựng website là nhu cầu không còn xa lạ với mỗi cá nhân, tập thể trên môi trường Internet. Có rất nhiều cách để xây dựng website, có thể thuê đối tác bên ngoài để tiến hành xây dựng hoặc tự bản thân doanh nghiệp, cá nhân cũng có thể sử dụng hệ thống mã nguồn mở có sẵn để xây dựng. Wordpress là một trong số đó, với giao diện trực quan, dễ sử dụng, và dễ dàng đáp ứng được nhu cầu cơ bản nâng cao của một cá nhân hay tập thể đã được nhiều người thiết kế, sử dụng phản hồi tích cực. Nắm được nhu cầu đó, em chọn đề tài “Tìm hiểu công nghệ mã nguồn mở wordpress. Phân tích thiết kế và xây dựng website sử dụng mã nguồn mở WordPress”.
TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP LỚN MÔN: Thực tập tốt nghiệp Đề tài: Tìm hiểu cơng nghệ mã nguồn mở wordpress Phân tích thiết kế xây dựng website sử dụng mã nguồn mở WordPress Giáo viên hướng dẫn: GV Nguyễn Văn Thắng Sinh viên thực hiện: Phùng Thế Anh MSSV: 0974060027 Hà Nội 12/2015 PHỤ LỤC III Tài liệu tham khảo 33 LỜI MỞ ĐẦU Xã hội phát triển nhiều mặt kinh tế, văn hóa, xã hội kèm theo bùng nổ mạnh mẽ cơng nghệ thơng tin Vì thế, nhu cầu chia sẻ thông tin để kết nối doanh nghiệp người tiêu dùng ngày cần thiết Để đáp ứng nhu cầu đó, website cho cơng ty, doanh nghiệp, cá nhân đời Và việc xây dựng website nhu cầu khơng cịn xa lạ với cá nhân, tập thể mơi trường Internet Có nhiều cách để xây dựng website, thuê đối tác bên để tiến hành xây dựng tự thân doanh nghiệp, cá nhân sử dụng hệ thống mã nguồn mở có sẵn để xây dựng Wordpress số đó, với giao diện trực quan, dễ sử dụng, dễ dàng đáp ứng nhu cầu nâng cao cá nhân hay tập thể nhiều người thiết kế, sử dụng phản hồi tích cực Nắm nhu cầu đó, em chọn đề tài “Tìm hiểu cơng nghệ mã nguồn mở wordpress Phân tích thiết kế xây dựng website sử dụng mã nguồn mở WordPress” Mặc dù cố gắng nỗ lực để hoàn thiện đề tài, bên cạnh khơng thể tránh khỏi thiếu sót Mong nhận ý kiến góp ý, phản hồi Thầy Cơ để chúng em hồn thiện đề tài tốt tạo tảng cho phát triển nghiệp sau Xin chân thành cảm ơn ! I: Tìm hiểu cơng nghệ mã nguồn mở wordpress Wordpress gì? WordPress phần mềm nguồn mở (Open Source Software) viết ngôn ngữ lập trình website PHP (Hypertext Preprocessor) sử dụng hệ quản trị sở liệu MySQL WordPress mắt lần vào ngày 27/5/2003 tác giả Matt Mullenweg Mike Little Hiện WordPress sở hữu phát triển cơng ty Automattic có trụ sở San Francisco, California thuộc hợp chủng quốc Hoa Kỳ WordPress mã nguồn mở ngôn ngữ PHP để hỗ trợ tạo blog cá nhân, nhiều người sử dụng ủng hộ tính dễ sử dụng, nhiều tính hữu ích Qua thời gian, số lượng người sử dụng tăng lên, cộng tác viên lập trình viên tham gia đơng đảo để phát triển mã nguồn WordPress có thêm tính tuyệt vời Và thời điểm viết 2015, WordPress xem hệ quản trị nội dung (CMS – Content Management System) vượt trội để hỗ trợ người dùng tạo nhiều thể loại website khác blog, website tin tức / tạp chí, giới thiệu doanh nghiệp, bán hàng – thương mại điện tử, chí với loại website có độ phức tạp cao đặt phịng khách sạn, thuê xe, đăng dự án bất động sản,…v…v…Hầu hình thức website với quy mơ nhỏ vừa triển khai tảng WordPress Nhưng khơng có nghĩa WordPress thích hợp với dự án nhỏ, mà có tới khoảng 25% website danh sách 100 website lớn giới sử dụng mã nguồn WordPress Ví dụ trang tạp chí TechCrunch, Mashable, CNN, BBC America, Variety, Sony Music, MTV News, Bata, Quartz,…và nhiều website lớn khác Những thành tựu WordPress • Trên giới, có khoảng 25 viết đăng lên website sử dụng WordPress giây • Số lượng website làm WordPress chiếm 23% tổng số lượng website giới • Trong số 100% website sử dụng mã nguồn CMS, WordPress chiếm 60% • Phiên WordPress 4.0 đạt 16 triệu lượt tải sau khoảng hai tháng • WordPress dịch sang 52 ngơn ngữ khác Tuy nhiên lại chưa có phiên tiếng Việt thức, bạn Việt hóa dễ dàng cách tìm blog với từ khóa “Việt hóa WordPress“ • Có 80 chương trình họp mặt WordPress tổ chức vào năm 2014 • Mã nguồn WordPress có khoảng 785 lập trình viên hợp tác phát triển • Chỉ tính giao diện (hay cịn gọi theme) miễn phí thư viện WordPress.org có 2.700 themes khác Ưu nhược điểm WordPress 3.1 Ưu điểm • Nhiều plugin hỗ trợ, ý tưởng có plugin hỗ trợ • Nhiều theme có sẵn, nhiều CMS Bao gồm theme miễn phí theme trả phí chun nghiệp • Dễ tùy biến, bạn người có kiến thức sẵn PHP, CSS, HTML điều dễ dàng • Nhiều cộng đồng hỗ trợ hướng dẫn, đơn cử ThachPham.Com • Có thể làm nhiều thể loại website, từ blog cá nhân đến trang thương mại điện tử • Dễ cài đặt • Nhẹ hao tốn tài ngun máy chủ • Các Theme Framework có giúp bạn tự thiết kế giao diện WordPress dễ dàng • Dễ sử dụng quản lý 3.2 Nhược điểm • Nhiều khái niệm khó hiểu bạn bắt đầu • Muốn tùy biến WordPress, bạn phải có kiến thức lập trình web • Các theme đẹp đa phần phải trả phí Và plugin • Nếu bạn Developer, bạn mệt mỏi với hàm có sẵn WordPress q nhiều Các tính giao diện wordpress 4.1 Các tính • WordPress Themes: WordPress có hệ thống đầy đủ theme giúp bạn thiết kế tất thứ từ blog đơn giản đến tạp chí online phức tạp Bạn chuyển đổi nhiều chủ đề với giao diện hồn tồn khác cú nhấp chuột • Công cụ giao tiếp blog: WordPress hỗ trợ đầy đủ tiêu chuẩn Trackback Pingback Các nhà phát triển cam kết hỗ trợ tiêu chuẩn khác phát triển tương lai • Comments: Với tính khách truy cập vào website bạn họ để lại ý kiến bình luận mục riêng biệt, thông qua Trackback hay Pingback để bình luận trang họ Bạn cho phép khơng cho phép bình luận viết cụ thể • Bảo vệ Spam: WordPress trang bị công cụ mạnh mẽ tích hợp danh sách đen, mở kiểm tra proxy để quản lý loại bỏ bình luận spam blog bạn Nó có mảng phong phú plug-in để giúp nâng cao tính • Đăng ký người dùng: WordPress có hệ thống đăng ký người dùng tích hợp sẵn (nếu bạn chọn) cho phép người đăng ký, trì hồ sơ để lại bình luận xác nhận blog Bạn đóng chức bình luận cho người dùng khơng đăng ký Ngồi ra, cịn có plug-in giúp ẩn viết cho tài khoản người dùng cấp thấp • Mật bảo vệ viết: Tính cung cấp mật cho viết riêng biệt để ẩn chúng trang Bạn có viết cá nhân xem người viết • Nhiều tác giả: Hệ thống người dùng nâng cao WordPress cho phép đến 10 cấp độ người dùng, với cấp độ khác người dùng có đặc quyền (và cấu hình) khác việc xuất bản, chỉnh sửa, tùy chọn người dùng khác • Bookmarklets: Tính bookmarklets đa trình duyệt giúp bạn dễ dàng xuất đến blog thêm liên kết vào danh sách blog • Ping away: WordPress hỗ trợ ping Ping-O-Matic, có nghĩa giúp cơng cụ tìm kiếm tiếp xúc tối đa với blog bạn Tóm lại, WordPress cơng cụ viết blog đa năng, dễ sử dụng khả tùy biến cao Quá trình cài đặt đơn giản, sưu tập template đa dạng, kiến trúc plug-in đa dạng, phù hợp cho người bắt đầu đáp ứng nhu cầu blogger chuyên nghiệp 4.2 Giao diện mặc định - Sau cài đặt xong Wordpress mặc đinh cho ta giao diện mang tên Twenty Fifteen Ảnh giao diện trang chủ * Ý nghĩa phần trang chủ: • Tên trang mơ tả (Description): Đây phần thể tên trang web Description phần thể câu hiệu, slogan bạn • Sidebar: Là thành phần phụ nằm cạnh thành phần website Nó nằm bên phải, bên trái hai bên, tùy theme Trong giao diện mặc định này, thấy số thành phần khung tìm kiếm, viết mới, phản hồi mới,… Các phần gọi chung Widget • Bài viết: Mỗi bạn đăng viết lên trang web, tự động chèn vào trang web Ngồi viết (post) ra, cịn loại page Hơi khác với post chút, thêm page chúng khơng đưa ngồi trang chủ post Chỉ đọc nội dung truy cập vào địa page • Thơng tin post: Với phần này, Sẽ biết viết đăng tải nào, thuộc chuyên mục (Category) có bình luận thuộc viết,… cịn số thính khác mà có hiển thị hay khơng tùy theme sử dụng • Footer: Là thành phần cuối trang web, bạn hiển thị thơng tin liên hệ hay bạn thích • Thanh Adminbar: Mặc định, bạn đăng nhập vào tài khoản, trang web xuất menu màu đen Tại có liên kết dẫn tới trang khác Giao diện trang chi tiết viết * Ý nghĩa phần trang chi tiết viết: • Tiêu đề: Khơng có khó hiểu cả, phần tiêu đề viết • Nội dung: Đây phần thể đầy đủ nội dung post Còn bên vài thông tin liên quan đến viết ngày đăng, tác giả viết, v.v.v.v… • Bình luận: Tại hiển thị bình luận dành cho viết Mỗi bình luận có tên người bình luận, ngày bình luận nút Trả lời (Reply) cho bình luận 4.3 Trang quản trị (Dashboard) - Đước rồi, giao diện trang quản trị Dashboard WordPress Giao diện trang quản trị * Chức menu: • Bảng tin: Trong menu có số chức Lời chào tới WordPress, Phác thảo nhanh viết, Xem bình luận mới, tin tức từ WordPress,… • Bài viết: Với menu này, quản lý viết đăng website, hay đăng thêm viết Ngoài quản lý chuyên mục (category), thẻ (tag) • Phương tiện: Với menu quản lý file đăng tải lên website • Trang: Tại tạo thêm trang xóa trang cũ • Phản hồi: menu quản lý bình luận web cho phép hiển thị, đánh dấu Spam hay xóa comment • Giao diện: Tại thay giao diện cho web, tùy biến giao diện dùng, chỉnh sửa • Gói mở rộng: quản lý plugin website Cài thêm plugin mới, xóa plugin cũ • Thành viên: Đây khu vực bạn quản lý thành viên website • Cơng cụ: Với menu xuất liệu trang web file SQL Hay nhập liệu từ blog khác vào blog • Cài đặt: Đây nơi cài đặt thiết lập cho trang web tiêu đề, câu slogan, cài đặt viết, bình luận, đường dẫn tĩnh,v.v.vv II Phân tích xây dựng website ứng dụng mã nguồn mở Wordpress - Xây dựng website giới thiệu sản phẩm thiết bị nhà bếp, đồ gia dụng hãng Teka Phân tích hệ thống 1.1 Chức phía frontend STT Chức Mơ tả Xem chi tiết sản phẩm Người xem xem thông tin sản phẩm đồ gia dụng bao gồm: tên sản phẩm, Giá niêm yết, giá bán, mã sản phẩm, hãng sản xuất, thời hạn bảo hành, tình trạng cịn hàng hay hết hàng Bình luận Người xem bình luận sản phẩm Tìm kiếm sản phẩm Khách hàng nhập thơng tin vào tìm kiếm để tìm kiếm sản phẩm Quảng cáo Trên website có slider banner quảng cáos Liên hệ Khách hàng nhập thông tin liên hệ vào form để liên hệ với cửa hàng - Chi tiết chức phía frontend o Xem hàng: Khách hàng truy cập vào địa website url, chọn vào page site để xem thông tin Đầu vào: Thông tin yêu cầu khách hàng sản phẩm Xử lý: Khi khách hàng chọn sản phẩm page, thông tin mà khách hàng gửi xử lý, hệ thống lấy liệu từ sở liệu, gửi lên cho người dùng Đầu ra: thông tin sản phẩm bao gồm: tên sản phẩm, Giá niêm yết, giá bán, mã sản phẩm, hãng sản xuất, thời hạn bảo hành, tình trạng cịn hàng hay hết hàng o Bình luận: Sử dụng ứng dụng form comment facebook, Người xem chia sẻ cảm nghĩ họ sản phẩm, thơng tin bình luận khách hàng lưu vào database facebook o Tìm kiếm sản phẩm: Sử dụng ứng dụng tìm kiếm google để kết tìm kiếm trả sát với yêu cầu khách hàng o Liên hệ: Cho phép khách hàng liên hệ với nhân viên bán hàng thông qua thông qua form liên hệ o Quảng cáo: Trên trang chủ trang danh mục có đặt slider cho phép đặt banner quảng cáo, giới thiệu sản phẩm giảm giá - Sơ đồ chức Sơ đồ 1.2 Chức phía admin STT Chức Mơ tả 10 - Cột bên phải ( sidebar ) : hiển thị danh sách sản phẩm chuyên mục với sản phẩm chi tiết 21 2.1.4.4 Giao diện hiển thị danh mục viết - Hiển thị tên, mô tả danh mục sản phẩm - Hiển thị danh sách viết có danh mục - Phân trang 22 2.1.4.5 Giao diện hiển thị danh mục viết - Hiển thị nội dung viết Cột phải: hiển thị viết liên quan, chuyên mục Comment facebook 23 24 2.1.5 Code sử lý 2.1.5.1 Ngơn ngữ viết chương trình HTML (HyperText Markup Language) : gọi ngơn ngữ đánh dấu siêu văn Nó tạo nhằm cấu trúc lên trang web với mẩu thơng tin trình bày World Wide Web Một số thẻ thường dùng , , , , ,Giá niêm yết:
Giá bán:
Mã sản phẩm:
Hãng sản xuất: TEKA
Bảo hành: 24 tháng
Tình trạng: Cịn 29 hàng
Hãy gọi để có giá tốt hơn0906.099.786 Code hiển thị danh sách sản phẩm trang danh mục sản phẩm 32 III Tài liệu tham khảo Tài liệu tin trang internet, khơng có tên báo, số xuất - Precisioη (2014) Setup a Domain on Your Windows VPS [Internet] [trích dẫn ngày 03/03/2014] Lấy từ: URL: https://www.youtube.com/watch?v=2Zz9SB5Gxmk - Wordpress (2014) Class Reference/wpdb [Internet] [trích dẫn ngày 03/03/2014] Lấy từ: URL: https://codex.wordpress.org/Class_Reference/wpdb - Mr Nav (2014) [WordPress Plugin] Database Info [Internet] [trích dẫn ngày 03/03/2014] Lấy từ: URL: http://www.izwebz.com/wordpress/plug-in/wordpress-plugindatabase-info/ - Google (2014) Google [Internet] [trích dẫn ngày 03/03/2014] Lấy từ: URL: https://google.com/ 33 ... thể nhiều người thiết kế, sử dụng phản hồi tích cực Nắm nhu cầu đó, em chọn đề tài ? ?Tìm hiểu cơng nghệ mã nguồn mở wordpress Phân tích thiết kế xây dựng website sử dụng mã nguồn mở WordPress” Mặc... hành xây dựng tự thân doanh nghiệp, cá nhân sử dụng hệ thống mã nguồn mở có sẵn để xây dựng Wordpress số đó, với giao diện trực quan, dễ sử dụng, dễ dàng đáp ứng nhu cầu nâng cao cá nhân hay tập. .. blog khác vào blog • Cài đặt: Đây nơi cài đặt thiết lập cho trang web tiêu đề, câu slogan, cài đặt viết, bình luận, đường dẫn tĩnh,v.v.vv II Phân tích xây dựng website ứng dụng mã nguồn mở Wordpress