Tìm hiểu lập trình theme trong wordpress và ứng dụng minh họa cho website bán hàn

Đồ án tốt nghiệp đại học TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN Sinh viên:Cao Bá Quyết BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: TÌM HIỂU LẬP TRÌNH THEME TRONG WORDPRESS VÀ ỨNG DỤNG MINH HỌA CHO WEBSITE BÁN HÀNG Nghệ An, tháng 05 năm 2016 Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học TRƢỜNG ĐẠI HỌC VINH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC Tên đồ án: TÌM HIỂU LẬP TRÌNH THEME TRONG WORDPRESS VÀ ỨNG DỤNG MINH HỌA CHO WEBSITE BÁN HÀNG Sinh viên thực hiện: Cao Bá Quyết–1151076147 Lớp: 52k3 Giáo viên hướng dẫn: TS.Lê Hồng Trang Nghệ An, tháng 05 năm 2016 Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học LỜI CẢM ƠN Lời cho phép em gửi lời cảm ơn sâu sắc tới toàn thể thầy cô giáo khoa Công nghệ thông tin – Đại học Vinh, ngƣời truyền đạt cho chúng em kiến thức quý báu bổ ích suốt năm học vừa qua Để hoàn thành đƣợc đồ án này, đặc biệt em xin đƣợc bày tỏ cảm động xin chân thành cảm ơn giảng viên TS.Lê Hồng Trang, thầy cô giáo tổ môn Hệ thống thông tin giáo viên khoa Công nghệ thông tin Trƣờng Đại học Vinh, Thầy trực tiếp bảo, tận tình giúp đỡ hƣớng dẫn em suốt trình để hoàn thành đồ án tốt nghiệp Trong thời gian làm việc với thầy, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập đƣợc tinh thần làm việc, thái độ học tập nghiêm túc, hiệu quả, điều cần thiết cho em q trình học tập cơng tác sau Em xin chân thành cám ơn thầy cô giáo tổ môn Khoa Công nghệ thông tin-Trƣờng Đại học Vinh Sau xin gửi lời cảm ơn chân thành tới gia đình, bạn bè động viên, đóng góp ý kiến giúp đỡ q trình học tâp, nghiên cứu hồn thành đồ án tốt nghiệp Vinh, tháng 05 năm 2016 Sinh viên Cao Bá Quyết Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học MỤC LỤC LỜI CẢM ƠN MỤC LỤC LỜI NÓI ĐẦU CHƢƠNG 1: TÌM HIỂU WORDPRESS 1.1 Wordpress gì? .7 1.2 Phát triển website Wordpress 1.3 Cài đặt Wordpress Localhost CHƢƠNG 2: TÌM HIỂU CẤU TRÚC WORDPRESS THEME 14 2.1 Tìm hiểu Wordpress Theme 14 2.1.1 Định nghĩa: 14 2.1.2 Theme hoạt động nào? 14 2.1.3 Kỹ kiến thức cần có để tạo chỉnh sửa Theme .14 2.2 Cấu trúc Theme 15 2.3 Cấu trúc Theme bán hàng online có tích hợp Woocommerce 17 CHƢƠNG 3: TÌM HIỂU VỀ LẬP TRÌNH THEME TRONG WORDPRESS 25 3.1 Tìm hiểu PHP Wordpress 25 3.1.1 Mảng .25 3.1.2 Biến liệu 25 3.1.3 Hàm .25 3.1.4 Vòng lặp .27 3.1.5 Các lớp & đối tƣợng .28 3.1.6 Hook 29 3.2 Cơ sở liệu Wordpress 29 3.2.1 Cấu hình database Tệp wp-config.php 29 3.2.2 Cấu trúc database mặc định 30 3.3 Cấu trúc sở liệu sau tích hợp plugin Woocommerce adrotate .31 CHƢƠNG 4: XÂY DỰNG THEME VÀ ỨNG DỤNG CHO WEBSITE 33 4.1 Giao diện trang chủ .33 4.1.1 Phần header: 33 4.1.2 Main content 35 4.1.3 Footer 39 4.2 Trang sản phẩm 39 Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học 4.3 Trang chi tiết sản phẩm .42 4.4 Trang giỏ hàng 45 4.5 Trang toán 47 4.6 Trang hàng giá rẻ 48 4.7 Các trang tin 50 4.8 Sản phẩm Theme 52 KẾT LUẬN 54 TÀI LIỆU THAM KHẢO 55 Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học LỜI NÓI ĐẦU Hiện nay, phát triển công nghệ thông tin, internet kéo theo phát triển hệ thống website để phục vụ nhu cầu cá nhân tổ chức Từ website sơ khai, đơn giản, tính thẩm mỹ chƣa cao, với mục đích sử dụng, cạnh tranh lên “TOP” để thu hút lƣợt truy cập internet đòi hỏi website phải đẹp hơn, cầu kỳ hơn, có tính bật, dễ dụng, dễ thiết kế hơn, chuyên nghiệp đáp ứng đƣợc nhu cầu ngƣời Vì Matt Mullenweg sáng lập Wordpress đƣợc Michel Valdrighi phát triển để đáp ứng nhu cầu Ban đầu Wordpress phục vụ để làm blog forum, sau phát triển lên website nhƣ website tin tức, bán hàng…và mặc định số Theme Sự hạn chế Wordpress Theme khiến lập trình viên đƣa ý tƣởng lập trình thiết kế Theme Và Theme đƣợc phát triển nhanh chóng Vì em chọn đề tài “Tìm hiểu lập trình Theme Wordpress ứng dụng minh hoạ cho website bán hàng ” muốn tìm hiểu tự làm Theme cho riêng Hồn thiện kỹ lập trình Theme để chun nghiệp hịa nhập với cộng đồng Wordpress Để giải toán cho đề tài trên, cần đòi hỏi kỹ nhƣ: Photoshop, thành thạo Html/css, biết lập trình PHP hiểu MySql, biết sử dụng mã nguồn Wordpress Hƣớng giải toán: Từ thiết kế Photoshop, sử dụng Html/css thiết kế giao diện trang tĩnh Theme ,sau áp dụng lập trình php sử dụng mã nguồn Wordpress chuyển trang tĩnh thành Theme Wordpress Để hiểu rõ toán hƣớng giải quyết, em thực đồ án “ Tìm hiểu lập trình Theme Wordpress ứng dụng minh hoạ cho website bán hàng” với nội dung chƣơng sau: Chƣơng mở đầu Chƣơng 1: Tìm hiểu Wordpress Chƣơng 2: Tìm hiểu cấu trúc Wordpress Theme Chƣơng 3: Tìm hiểu lập trình Wordpress Theme Chƣơng 4: Xây dựng ứng dụng Theme cho Website bán hàng online Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học CHƢƠNG 1: TÌM HIỂU WORDPRESS 1.1 Wordpress gì? Wordpress phần mềm mã nguồn mở CMS(Content Managerment System hay gọi hệ thống quản lý nội dung) Đƣợc xây dựng từ ngôn ngữ PHP sử dụng hệ quản trị sở liệu MySQL để lƣu trữ Wordpress đƣợc phát triển Michel Valdrighi hồn tồn miễn phí Trƣớc Wordpress đƣợc dùng làm blog cá nhân hay doanh nghiệp tạo website đơn giản để quảng bá thƣơng hiệu Tuy nhiên phát triển áp dụng cho nhiều loại website, có website mảng thƣơng mại điện tử 1.2 Phát triển website Wordpress Phát triển website Wordpress có kiểu: Lập trình website(lập trình Theme) Lập trình Theme sử dụng ngơn ngữ Html/css, PHP-MySQL, javascript để xây dựng website Công việc lập trình viên website dựa vào yêu cầu khách hàng để phân tích hệ thống CSDL, dựa vào mẫu thiết kế Photoshop để chuyển website tĩnh thành giao diện website động + Website tĩnh website thiết kế ngôn ngữ HTML/CSS, Javascript đáp ứng cho việc thị, giới thiệu thông tin cho người dùng xem + Website động website sử dụng ngơn ngữ lập trình PHP….và có sở liệu MySQL để người xem tương tác với website Tạo website Thƣờng ngƣời không chuyên lập trình, họ sử dụng cơng cụ có sẵn mã nguồn có sẵn để tạo website 1.3 Cài đặt Wordpress Localhost Wordpress đƣợc lập trình ngơn ngữ PHP sử dụng hệ quản trị sở liệu MySQL nên muốn cài đặt Wordpress phải có web server ảo máy tính Để có web server ảo cần cài đặt phần mềm thông dụng nhƣ Wamp, Xampp Wamp: môi trƣờng phát triển web hệ điều hành Windows Nó cho phép bạn tạo ứng dụng Web với Apache, PHP MySQL Bên cạnh đó, PhpMyAdmin cho phép quản lý sở liệu dễ dàng Wamp viết tắt Windows, Apache, MyAdmin PHP Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học Xampp: chƣơng trình tạo máy chủ Web (Web Server) đƣợc tích hợp sẵn Apache, PHP, MySQL, FPT Server, Mail Server công cụ PhpMyAdmin Xampp viết tắt X, Apache, MySQL, PHP, Perl - Apache: chƣơng trình máy chủ HTTP X: ám dùng đƣợc cho hệ điều hành khác nhau: Windows, Linux, - Solaris MacOS Perl: ngơn ngữ lập trình thơng dụng hệ thống xử lí trang web Tuy Xampp hỗ trợ đầy đủ, chạy hay bị lỗi treo So với Xampp Wamp nhẹ chạy ổn định Vì em chọn Wamp để chạy máy chủ ảo Localhost 1.3.1 Cài đặt Wamp - Chương trình cài đặt Wampp server tải trang Wampserver.com Cách cài đặt chương trình Wampserver: + Sau tải tập tin cài đặt chƣơng trình Wamp Server máy tính bạn chạy để tiến hành cài đặt + Cách cài đặt chƣơng trình Wamp Server giống nhƣ chƣơng trình thơng thƣờng khác + Trong lúc cài đặt, bạn thay đổi ổ dĩa tên thƣ mục chứa tập tin chƣơng trình Wamp Server muốn - Cách sử dụng chương trình Wamp Server Hình 2.1: chương trình Wamp Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học Bạn truy cập vào trình đơn Wamp Server cách nhấn nút trái chuột vào biểu tƣợng chƣơng trình Wamp Server khay hệ thống Trong có mục cần lƣu ý sau: + Localhost: Truy cập vào địa máy chủ web + PhpMyAdmin: Truy cập vào phần quản lý sở liệu (Database) + Www directory: Truy cập vào thƣ mục web gốc, mặc định thƣ mục www nằm thƣ mục cài đặt Wamp Server Đây thƣ mục chứa tập tin ứng dụng web bạn + Khi muốn tắt chƣơng trình Wamp Server, bạn nhấn nút phải chuột vào biểu tƣợng chƣơng trình Wamp Server khay hệ thống chọn Exit 1.3.2 Cài đặt Wordpress Đầu tiên bạn cần phải download mã nguồn Wordpress đƣờng dẫn https://Wordpress.org/latest.zip Giải nén Tệp vừa download bạn thấy folder Wordpress nằm sau bạn việc copy folder vào folder C:Wamp/www folder chứa mã nguồn để chạy Localhost, mã nguồn bắt buộc phải nằm hoạt động đƣợc Cài đặt Wordpress Localhost Bƣớc 1: Để thực việc cài đặt bạn mở trình duyệt lên đƣợc nhập vào địa web với đƣờng dẫn http://:Localhost/Wordpress, Wordpress tên folder mà bạn giải nén vào Localhost Nếu bạn có thay đổi tên folder chứa mã nguồn Wordpress thay đổi lại đƣờng dẫn cho phù hợp Và kết nhƣ hình 2.2 Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page Đồ án tốt nghiệp đại học hình 2.2:bước Bƣớc 2: chọn continue kết ( hình 2.3) hình 2.3:bước Bƣớc 3: bấm thực kết (hình 2.4) Phải điền thông tin: - Tên sở liệu: tên Database mà bạn khởi tạo Phpmyadmin - Tên đăng nhập: mặc định Wamp có tên Root Cao Bá Quyết – Lớp 52k3 – Khoa CNTT Page 10 Đồ án tốt nghiệp đại học