báo cáo thực tập xây dựng WEBSITE bằng WORDPRESS

1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP XÂY DỰNG WEBSITE BẰNG WORDPRESS Công ty thực tập : Global Guru Code Người phụ trách : Huỳnh Duy Khoa Thực tập sinh : Lê Ngọc Châu TP Hồ Chí Minh, tháng năm 2020 Lê Ngọc Châu LỜI MỞ ĐẦU Ngày nay, ngành công nghiệp phát triển ứng dụng web phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, ngành phát triển ứng dụng web nhân tố kích thích phát triển cơng nghệ thông tin giới, cảvề phần cứng phần mềm Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam phát triển mạnh mẽ, để hịa nhập với cơng ty hàng đầu xây dựng tảng web giới Bên cạnh phát triển web ngành nghề tiếp cận người dùng cách nhanh chóng ta thấy mạng xã hội hay website bán hàng trực tuyến thịnh hành giới lẫn Việt Nam Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm web application môi trường chuyên nghiệp, em có dự định thực tập hè Vì vậy, em định chọn Cơng ty Global Guru Code môi trường lý tưởng, chuyên nghiệp - nơi giúp em thực dự định Lê Ngọc Châu LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công Ty TNHH Global Guru Code tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình nhóm trainer, em tiếp thu kiến thức quan trọng để làm trang web Wordpress Em đặc biệt chân thành cảm ơn anh Huỳnh Duy Khoa(Kenvin Huynh), người tận tình giúp đỡ, hướng dẫn, đánh giá cho chúng em kiến thức đến nâng cao front-end gồm: HTML/CSS, jQuery đặc biệt kiến thức back-end ngôn ngữ lập trình PHP dùng Worspress Trong suốt trình training, anh hỗ trợ em nhiều việc làm báo cáo, lên kế hoạch, cách làm test case report Cũng xin cảm ơn thầy cô khoa Cơng nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Lê Ngọc Châu TpHCM, ngày 28 tháng năm 2020 Lê Ngọc Châu NHẬN XÉT CỦA KHOA Lê Ngọc Châu MỤC LỤC Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Global Guru Code Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu công ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu ngơn ngữ lập trình front-end với html/css/jquery 2.3 Tìm hiểu bản, nâng cao ngơn ngữ lập trình php lập trình với wordpress 2.3.1 Tìm hiểu PHP 2.3.2 Tìm hiểu Wordpress lập trình Wordpress Thực project 13 Lịch làm việc 13 Chương 3: Chi tiết project 15 Giới thiệu IMAGE VIEW SYSTEM 15 1.1 Các hình thực (full stack) 15 Thực 19 Kết 19 Lê Ngọc Châu Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Global Guru Code GLORUCODE công ty CNTT toàn cầu với dịch vụ đầy đủ Dịch vụ Công nghệ Phát triển Phần mềm Cung cấp cho khách hàng sản phẩm chất lượng cao theo cách đáng tin cậy hiệu chi phí Một trụ cột cơng ty hài lòng khách hàng Các giải pháp tạo tác động đáng kể, tiến không bị ảnh hưởng đến khách hàng, bao gồm yếu tố cần thiết CNTT sáng tạo để th ngồi lĩnh vực quản lý cơng nghệ - Địa chỉ: 77/7 Ngô Gia Tự, Phường 2, Quận 10, Thành phố Hồ Chí Minh Website: https://glorucode.com/ Sản phẩm cơng ty Cơng ty cung cấp tích hợp thương mại điện tử Magento, Prestashop, Opencart, Wooc Commerce Phát triển trang web chuyên nghiệp với công nghệ nguồn mở PHP, MySQL, javascript, jquery, HTML, CSS3, JSON, bootstrap, v.v Cũng làm việc với google api, facebook api, instagram api sửa đổi plugin wordpress / Joomla khác Lê Ngọc Châu Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình website wordpress” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình website gồm back-end front-end, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển ứng dụng ecommerce chuyên nghiệp Tìm hiểu công ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty TNHH Global Guru Code, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 2.2 - Các công cụ làm việc Thời gian : tuần Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Jetbrain PphStorm – IDE lập trình với php nâng cao với tính nâng cao, tiện lợi, git, sourcetree: sử dụng để làm việc với push, pull code từ repo cho lần làm task Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE Tìm hiểu ngơn ngữ lập trình front-end với html/css/jquery Thời gian : ngày (1 tuần) Lê Ngọc Châu - Nội dung : HTML structure, CSS, Javascript, JQuery, Bootstrap - Các syntax, quy chuẩn việc lập trình nội dung (sử dụng eslint để kiểm tra) - HTML Xây dựng cấu trúc trang tĩnh gồm thẻ HTML CSS : Tiến hành tìm hiểu css style cho trang HTML trước Javascript, JQuery: Tìm hiểu ES6:Block – Scoped, Arrow Function, Rest Parameter, Destructuring Assignment, Default Parameters, Template Literals, Promises, Classes Tìm hiểu JQuery thư viện liên quan như: jquery validate, jcarousel,… Thêm javascript cho trang web Bootstrap: Tìm hiểu bootstrap: grid, flex,… Style trang web dùng bootstrap - - Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học - Kết quả: - Nâng cao kỹ lập trình web - Có kiến thức quan trọng cho việc lập trình web sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu dùng eslint để kiểm tra 2.3 Tìm hiểu bản, nâng cao ngơn ngữ lập trình php lập trình với wordpress - Thời gian : tuần - Nội dung : 2.3.1 Tìm hiểu PHP - Tìm hiểu PHP như: cú pháp, biến, kiểu liệu, hàm, cấu trúc điều kiện if/else,… PHP form: Lê Ngọc Châu - - - Tìm hiểu cách xử lý lấy liệu từ form: $_POST, $_GET, , cách validation form URL/Email, form required Khi người dùng điển thông tin vào form sau nhấn gửi, cách đề lấy khối liệu lưu sở liệu, truy vấn sở liệu để đối chiếu thông tin xác thực PHP nâng cao: Tìm hiểu cách thêm file khác, định nghĩa Session, Cookies cách dùng Làm sử dụng Session để lưu thông tin người dùng tại, user đăng xuất hệ thống xử lý session Cách sử dụng lệnh gọi hàm để xử lý, đồng thời cách xử lý đoạn liệu JSON MySQL database Cách sử dụng hệ sở liệu làm việc với PHP Tìm hiểu cách kết nối sở liệu, cấu hình chi tiết sở liệu Tạo sở liệu mới, cách thêm liệu vào sở liệu Tìm hiểu truy vấn sở liệu như: INSERT, UPDATE, DELETE,…, query cao cấp orderby, limit data,… Kết hợp demo để kết nối sở liệu có sẵn PHP, đồng thời thực thao tác thêm, xóa, sửa liệu - Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học - Kết quả: - Hiểu sử dụng thục ngơn ngữ lập trình PHP - Bước đầu xây dựng website kết hợp front-end back end PHP 2.3.2 Tìm hiểu Wordpress lập trình Wordpress - - - Tìm hiểu cách cài đặt localhost XAMPP WAMP Được hướng dẫn sử dụng phần mềm XAMPP WAMP để tạo localhost, đồng thời biết cách cấu hình để thực kết nối file, folder đưa lêt localhost Cài website wordpress localhost XAMPP Tải mã nguồn từ website Wordpress.org, từ kiến thức phần sử dụng XAMPP, copy mã nguồn vào local đồng thời tạo sở liệu bắt đầu cài đặt Tìm hiểu khái niệm tổng quan Wordpress chức  Thay đổi thông website, tiêu đề, description, ngôn ngữ website Lê Ngọc Châu 10 -  Thêm, sửa, xóa, viết wordpress  Cài theme, plugin sử dụng chúng  Tạo menu wordpress  Phân biệt page post  Thêm, sửa, xóa user, phân quyền user wordpress  Sử dụng widget, shortcode  Hiểu khái niệm như: Post type, taxonomy, custom field Lập trình wordpress:  Tìm hiểu cấu trúc theme wordpress: nắm cấu trúc theme wordpress : biết thư mục theme wordpress, gồm file nào, chức file  Tìm hiểu hàm wordpress: WordPress có vơ số hàm, có hàm quan trọng dùng xuyên suốt trình xây dựng them.e Nắm hàm wordpress như: bloginfo() get_bloginfo() hàm lấy liệu wordpress website sử dụng, lấy liệu chung như: Tiêu đề trang web, đường dẫn trang web, version wordpress dùng… Hàm get_bloginfo() hàm lấy dự liệu trả về, liệu get_bloginfo() đem xử lý, bloginfo() tương tự dự liệu hảm tự động in get_header(), get_footer(), get_sidebar(): hàm tương tự hàm include() PHP, chức nối file header.php, footer.php sidebar.php vào file khác wp_head() wp_footer(): bổ sung header footer (phía dưới) trang web Các hàm lấy liệu viết (Post) the_permalink() – Hiển thị thị đường dẫn viết the_title() – Hiển thị tiêu đề viết the_content() – Hiển thị nội dung chi tiết viết the_excerpt() – Hiển thị nội dung mổ tả cho viết the_ID() – Hiển thị id viết the_tags() – Hiển thị thẻ viết the_date() – Hiển thị ngày đăng viết the_category() – Hiển thị chuyên mục viết the_author_posts_link() – Hiển thị tác giả viết Các hàm lấy liệu category (Chuyên mục) category_description() – Hiển thị mô tả chuyên mục tag_description() – Hiển thị mô tả thẻ (tag) Lê Ngọc Châu 11     get_queried_object_id() – Hiển thị ID chuyên mục wp_dropdown_categories() – Hiển thị danh sách category với dạng dropdown single_cat_title() – Hiển thị tên chuyên mục truy vấn single_tag_title() – Hiển thị tên thẻ (tag) truy vấn wp_tag_cloud() – Hiển thị mây thẻ Các hàm điều kiện is_admin(),is_attachment(),… Tìm hiểu vòng lặp lấy viết wordpress: Đây cách thị viết giao diện Sử dụng Wp_query để truy vấn biết theo mong muốn Tìm hiểu cách lấy chuyên mục wordpress: -> Get danh mục wordpress Tìm hiểu cách lấy menu sidebar (widget) wordpress: Cách get menu & sidebar làm cho website dạng chức Cũng giúp đỡ nhiều việc quản trị website cách hiệu Tìm hiểu cách lấy hình đại diện viết: Get thumbnail wordpress Lấy hình ảnh thị viết - Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học - Kết quả: - Hiểu sử dụng thục chức website WordPress - Bước đầu xây dựng website nhỏ dựng từ theme bản, bao gồm trang tin tức, trang blog nhỏ - Lập trình WorsPress nâng cao - Tìm hiểu cách tạo Custom post type Mặt định cài wordpress, ta thấy phần post (bài viết) page (trang) phần có nhiệm vụ xuất nội dung, người ta gọi post type Trường hợp phần chưa đủ đáp ứng nhu cầu muốn có thêm phần sản phẩm để úp sản phẩm website bắt buộc phải tạo thêm post type phần sản phẩm gọi custom post type - Tìm hiểu cách tạo Custom field Lê Ngọc Châu 12 - - - - Một viết mặt định wordpress có khu vực để post tiêu đề, nội dung, ảnh đại diện… Các khu vực gọi field viết Trong trường hợp bình thường mục đáp ứng nhu cầu khơng có vấn đề sảy Nhưng dự án yêu cầu phải có thêm khu vực để post tác giả link download… Thì bắt buộc phải tạo thêm khu vực để post nội dung Các khu vực tạo thêm gọi custom field Tìm hiểu cách tạo Custom taxonomy Tạo phân loại nội dung mói có cấu trúc tương tự category, tag Tìm hiểu cách tạo Custom term meta Mặc định cài wordpress lên thấy phần category category có trường như: Tiêu đề, mô tả, đường dẫn tỉnh… Các thành phần gọi term meta Có thể hiểu trường custom field taxonomy Việc tạo field khu vực gọi custom term meta Tìm hiểu cách tạo Custom user meta Mặc định cài wordpress lên, tương ứng với user có số trường để lưu thơng tin user như: Username, Password, Email, Website, Description Các trường xem user meta, tạo trường mà mặc định khơng có danh sách gọi custom user meta, ví dụ tạo custom user meta: gender,… Tìm hiểu cách tạo shortcode Shortcode loại code đặc biệt Wordpress chèn vào nội dung trang viết chuyển hoá thành mã HTML trang viết tương ứng hiển thị Việc thêm shortcode vào Wordpress thực thông qua đăng ký hàm callback ứng với tên shortcode Tìm hiểu cách tạo meta box Meta Box nghĩa hộp nhập liệu tích hợp khu vực soạn thảo nội dung, liệu gửi vào sở liệu website Nhưng nay, Meta Box đa phần ứng dụng để làm việc với Meta Data (gồm wp_usermeta, wp_commentmeta wp_postmeta) - Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học - Kết quả: Lê Ngọc Châu 13 - Hiểu sử dụng thục chức website WordPress - Từ kiến thức lập trình wordpress nâng cao, tạo plugin tạo phần tìm hiểu plugin Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực C#, HTML,CSS, Jquery, SNV Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project web application Chi tiết đồ án nói phần sau Lịch làm việc Tuần Công việc - - 1- 4-5 - - Tìm hiểu cơng ty, cách tổ chức công ty Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Lập trình frontend (html/css jquery, javascript, bootstrap, …) Tìm hiểu ngơn ngữ lập trình PHP nâng cao Thực hành PHP Thực task training Tìm hiểu wordpress Tìm hiểu phần mềm XAMP Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Kevin Huynh Anh Kevin Huynh Anh Kevin Huynh Anh Kevin Huynh Lê Ngọc Châu 14 - 6-7 - 7-8-9 - 10-30 Thực hành tạo website wordpress localhost Tìm hiểu lập trình wordpress Thực task training Tìm hiểu lập trình wordpress nâng cao Thực task training Báo cáo cuối đợt thực tập Tham gia vào project công ty Anh Kevin Huynh Anh Kevin Huynh Anh Kevin Huynh Lê Ngọc Châu 15 Chương 3: Chi tiết project Giới thiệu IMAGE VIEW SYSTEM IMAGE VIEW SYSTEM ứng dụng web mạng xã hội đươc xây dựng để phục vụ game thủ trò chơi Class of Clans, đơi lời trị chơi này: - Tính đến 17/7/2019, có 621 triệu lượt tải dòng máy adroid ios - Doanh thu trung bình triệu ngày - Doanh thu qua năm: Source: https://sensortower.com/blog/clash-of-clans-revenue-2019 1.1 Các hình thực (full stack) Lê Ngọc Châu 16 - Trang cá nhân: - Trang đăng ký/ đăng nhập/ quên password Lê Ngọc Châu 17 Lê Ngọc Châu 18 - Trang tạo câu hỏi Lê Ngọc Châu 19 - Trang chỉnh sửa thông tin cá nhân Thực - Với giúp đỡ leader thành viên nhóm thực project Kết - Đã hồn thiện hình giao theo tiến độ yêu cầu thời gian TÀI LIỆU THAM KHẢO Front-end https://www.w3schools.com/html/html_css.asp https://www.w3schools.com/jquery/default.asp https://www.w3schools.com/js/default.asp Lê Ngọc Châu 20 PHP https://www.w3schools.com/php/default.asp WORDPRESS https://www.wpbeginner.com/ https://wordpress.org/support/ Lê Ngọc Châu 21 TỔNG KẾT Trong suốt q trình thực tập cơng ty Global Guru Code, em học, tiếp thu luyện tập kiến thức bổ ích, có giá trị cho đường lập trình website Được tham gia vào nhiều dự án công ty, nhờ vậy, kiến thức hiểu biết trình học tập ứng dụng vào cơng việc mở rộng, tích lũy nhiều kinh nghiệm cho sau Chân thành cảm ơn giúp đỡ anh Huỳnh Duy Khoa, hỗ trợ anh chị, bạn bè công ty giúp đỡ, hỗ trợ để em hồn thành tốt nhiệm vụ giao quãng thời gian thực tập công ty Lê Ngọc Châu ... 7-8-9 - 10-30 Thực hành tạo website wordpress localhost Tìm hiểu lập trình wordpress Thực task training Tìm hiểu lập trình wordpress nâng cao Thực task training Báo cáo cuối đợt thực tập Tham gia... plugin wordpress / Joomla khác Lê Ngọc Châu Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Lập trình website wordpress? ?? nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình website. .. dụng thục chức website WordPress - Từ kiến thức lập trình wordpress nâng cao, tạo plugin tạo phần tìm hiểu plugin Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực C#, HTML,CSS,