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

Tìm hiểu công ty và các kỹ năng cơ bản trong công ty Thời gian : 1 ngày Nội dung : Giới thiệu về công ty, cách tổ chức của công ty Được nghe người phụ trách giới thiệu về công ty, quá

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

Thực tập sinh : Lê Ngọc Châu

TP Hồ Chí Minh, tháng 7 năm 2020

LỜI MỞ ĐẦU

Ngày nay, ngành công nghiệp phát triển ứng dụng web là một bộ phận không thể thiếu của ngành công nghiệp phần mềm Với tốc độ phát triển vô cùng mạnh mẽ, ngành phát triển ứng dụng web đã và đang là nhân tố kích thích sự phát triển của công nghệ thông tin thế giới, cảvề phần cứng và phần mềm

Cùng với xu thế phát triển của thế giới, Việt Nam cũng không phải ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam đã và đang phát triển mạnh mẽ, để hòa nhập với những công ty hàng đầu về xây dựng nền tảng web trên thế giới Bên cạnh sự phát triển của web thì những ngành nghề được tiếp cận người dùng một cách nhanh chóng như những gì ta có thể thấy

là mạng xã hội hay những website bán hàng trực tuyến cũng đang rất thịnh hành trên cả thế giới lẫn Việt Nam

Sau ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia làm web application trong một môi trường chuyên nghiệp, em có dự định

là sẽ thực tập trong hè Vì vậy, em quyết định chọn Công ty Global Guru Code một môi trường

lý tưởng, chuyên nghiệp - là nơi sẽ giúp em thực hiện được dự định này

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ó

cơ hội được thực tập tại công ty

Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer, em đã tiếp thu được những kiến thức quan trọng để có thể làm được một trang web bằng 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 các kiến thức cơ bản đến nâng cao về front-end gồm: HTML/CSS, jQuery và đặc biệt là kiến thức back-end về ngôn ngữ lập trình PHP dùng trong Worspress Trong suốt quá trình training, anh đã hỗ trợ em rất nhiều trong việc làm báo cáo, lên kế hoạch, cách làm các test case report

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này

Lê Ngọc Châu TpHCM, ngày 28 tháng 7 năm 2020

NHẬN XÉT CỦA KHOA

MỤC LỤC

Chương 1: Giới thiêu công ty thực tập 6

1 Giới thiệu công ty Global Guru Code 6

2 Sản phẩm của công ty 6

Chương 2: Nội dung thực tập 7

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 7

2 Nghiên cứu kỹ thuật 7

2.1 Các công cụ làm việc 7

2.2 Tìm hiểu về ngôn ngữ lập trình front-end với html/css/jquery 7

2.3 Tìm hiểu cơ bản, nâng cao ngôn ngữ lập trình php và lập trình với wordpress 8

2.3.1 Tìm hiểu về PHP 8

2.3.2 Tìm hiểu về Wordpress và lập trình Wordpress 9

3 Thực hiện project 13

4 Lịch làm việc 13

Chương 3: Chi tiết về project 15

1 Giới thiệu về IMAGE VIEW SYSTEM 15

1.1 Các màn hình thực hiện (full stack) 15

2 Thực hiện 19

3 Kết quả 19

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Global Guru Code

GLORUCODE là một công ty CNTT toàn cầu với các dịch vụ đầy đủ về Dịch vụ Công nghệ và Phát triển Phần mềm Cung cấp cho khách hàng các sản phẩm chất lượng cao theo cách đáng tin cậy và hiệu quả nhất về chi phí

Một trong những trụ cột của công ty là sự hài lòng của khách hàng Các giải pháp luôn tạo ra một tác động đáng kể, tiến bộ và không bị ảnh hưởng đến mọi khách hàng, bao gồm các yếu tố cần thiết CNTT sáng tạo để thuê ngoài trong 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/

2 Sản phẩm của công ty

Công ty cung cấp tích hợp thương mại điện tử như Magento, Prestashop, Opencart, Wooc Commerce Phát triển các trang web chuyên nghiệp với các công nghệ nguồn mở như PHP, MySQL, javascript, jquery, HTML, CSS3, JSON, bootstrap, v.v Cũng làm việc với

google api, facebook api, instagram api và sửa đổi các plugin wordpress / Joomla khác nhau

Chương 2: Nội dung thực tập

Đợt thực tập với chủ đề “Lập trình website bằng wordpress” nhằm mục đích giúp sinh viên thực tập được đào tạo toàn diện về lập trình website gồm back-end và front-end, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên

có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển ứng dụng commerce chuyên nghiệp

e-1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty TNHH Global Guru Code, quá trình thành lập và phát

triển Có thêm các kỹ năng về việc sử dụng email trong công việc, làm việc có kế hoạch,

có kỷ luật, có trách nhiệm hơn

2 Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc

Thời gian : 1 tuần

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá 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 về các công

cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số đó như Jetbrain PphStorm – IDE lập trình với php nâng cao với những tính năng nâng cao, tiện lợi, git, sourcetree: sử dụng để làm việc với push, pull code từ repo cho mỗi lần làm task

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau, so với việc dung các IDE

2.2 Tìm hiểu về ngôn ngữ lập trình front-end với html/css/jquery

- Thời gian : 7 ngày (1 tuần)

- Nội dung : HTML structure, CSS, Javascript, JQuery, Bootstrap - Các syntax, quy chuẩn

về việc lập trình từng nội dung trên (sử dụng eslint để kiểm tra)

Tìm hiểu về ES6:Block – Scoped, Arrow Function, Rest Parameter, Destructuring

Assignment, Default Parameters, Template Literals, Promises, Classes

Tìm hiểu JQuery và các 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 hiện :

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- Kết quả:

- Nâng cao kỹ năng lập trình web

- Có được những kiến thức quan trọng cho việc lập trình web sau này

Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu và dùng eslint để kiểm tra

2.3 Tìm hiểu cơ bản, nâng cao ngôn ngữ lập trình php và lập trình với wordpress

- Thời gian : 4 tuần

- Tìm hiểu về cách xử lý lấy dữ 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 dữ liệu này lưu về cơ sở dữ liệu, truy vấn cơ sở dữ liệu để đối chiếu thông tin xác thực

- PHP nâng cao:

Tìm hiểu về cách thêm file khác, định nghĩa về Session, Cookies và cách dùng

Làm sao sử dụng Session để lưu thông tin của người dùng hiện tại, khi user đăng xuất ra

hệ thống thì xử lý session thế nào

Cách sử dụng lệnh gọi hàm để xử lý, đồng thời cách xử lý các đoạn dữ liệu về JSON

- MySQL database

Cách sử dụng một hệ cơ sở dữ liệu làm việc với PHP

Tìm hiểu về cách kết nối cơ sở dữ liệu, cấu hình chi tiết cơ sở dữ liệu đó Tạo cơ sở dữ liệu mới, các cách thêm dữ liệu vào cơ sở dữ liệu Tìm hiểu về truy vấn cơ sở dữ liệu như: INSERT, UPDATE, DELETE,…, các query cao cấp như orderby, limit data,… Kết hợp demo để kết nối một cơ sở dữ liệu có sẵn bằng PHP, đồng thời thực hiện các thao tác cơ bản như thêm, xóa, sửa dữ liệu

- Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- Kết quả:

- Hiểu và sử dụng thuần thục ngôn ngữ lập trình PHP

- Bước đầu xây dựng 1 website thuần kết hợp front-end và back end bằng PHP

2.3.2 Tìm hiểu về Wordpress và lập trình Wordpress

- Tìm hiểu cách cài đặt localhost trên XAMPP và WAMP

Được hướng dẫn sử dụng 2 phần mềm XAMPP và WAMP để tạo ra localhost, đồng thời biết cách cấu hình để thực kết nối các file, folder đưa lêt localhost

- Cài website wordpress trên localhost bằng 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 mới một cơ sở dữ liệu và bắt đầu cài đặt

- Tìm hiểu khái niệm tổng quan về Wordpress và các chức năng chính

 Thay đổi được thông cơ bản về website, tiêu đề, description, ngôn ngữ của

website

 Thêm, sửa, xóa, bài viết trong wordpress

 Cài được theme, plugin và sử dụng được chúng

 Tạo được menu trong wordpress

 Phân biệt được page và post

 Thêm, sửa, xóa user, phân quyền user trong wordpress

 Sử dụng được widget, shortcode

 Hiểu được các 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 cấu trúc theme wordpress : biết được cây thư mục của một theme wordpress, gồm những file nào, chức năng của từng file như thế nào

 Tìm hiểu những hàm cơ bản trong wordpress:WordPress có vô số hàm, trong đó

có những hàm rất quan trọng dùng xuyên suốt trong quá trình xây dựng them.e Nắm được những hàm cơ bản trong wordpress như:

bloginfo() và get_bloginfo() là hàm lấy dữ liệu wordpress của website đang sử dụng, nó lấy các dữ liệu chung như: Tiêu đề trang web, đường dẫn trang web, version của wordpress đang dùng… Hàm get_bloginfo() là hàm lấy dự liệu trả về,

dữ liệu của get_bloginfo() có thể đem đi xử lý, còn bloginfo() cũng tương tự như

dự liệu của hảm này tự động in ra luôn

get_header(), get_footer(), get_sidebar(): là các hàm tương tự như hàm include() trong PHP, chức năng của nó là nối file header.php, footer.php và sidebar.php vào file khác

wp_head() và wp_footer(): bổ sung header và footer (phía trên và dưới) của trang web

Các hàm lấy dữ liệu trong một bài viết (Post) the_permalink() – Hiển thị thị đường dẫn của bài viết the_title() – Hiển thị tiêu đề của bài viết

the_content() – Hiển thị nội dung chi tiết của bài viết the_excerpt() – Hiển thị nội dung mổ tả cho bài viết the_ID() – Hiển thị id của bài viết the_tags() – Hiển thị các thẻ của bài viết the_date() – Hiển thị ngày đăng bài viết

the_category() – Hiển thị các chuyên mục của bài viết the_author_posts_link() – Hiển thị tác giả của bài viết

Các hàm lấy dữ liệu của category (Chuyên mục) category_description() – Hiển thị mô tả của chuyên mục tag_description() – Hiển thị mô tả của thẻ (tag)

get_queried_object_id() – Hiển thị ID chuyên mục hiện tại 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 trong truy vấn single_tag_title() – Hiển thị tên thẻ (tag) trong 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 bài viết của wordpress: Đây là cách hiện thị bài viết ra ngoài giao diện

Sử dụng Wp_query để truy vấn các bài biết theo mong muốn

 Tìm hiểu cách lấy chuyên mục trong wordpress: -> Get danh mục trong wordpress

 Tìm hiểu cách lấy menu và sidebar (widget) trong wordpress:

Cách get menu & sidebar làm cho website đang dạng về chức năng Cũng như giúp đỡ rất nhiều trong việc quản trị website một cách hiệu quả

 Tìm hiểu cách lấy hình đại diện của bài viết: Get thumbnail trong wordpress

Lấy hình ảnh và hiện thị của bài viết

- Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- Kết quả:

- Hiểu và sử dụng thuần thục các chức năng website bằng WordPress

- Bước đầu xây dựng 1 website nhỏ được dựng từ theme cơ bản, bao gồm những trang tin tức, trang blog nhỏ

- Lập trình WorsPress nâng cao

- Tìm hiểu cách tạo một Custom post type

Mặt định khi cài wordpress, ta sẽ thấy phần post (bài viết) và page (trang) 2 phần này có nhiệm vụ xuất bản nội dung, người ta gọi nó là post type Trường hợp 2 phần này chưa đủ đáp ứng nhu cầu và muốn có thêm 1 phần là sản phẩm để úp sản phẩm của website thì bắt buộc phải tạo thêm 1 post type mới và khi đó phần sản phẩm này

sẽ gọi là custom post type

- Tìm hiểu về cách tạo Custom field

Một bài viết mặt định của wordpress sẽ có khu vực để post tiêu đề, nội dung, ảnh đại diện… Các khu vực đó gọi là các field của bài viết Trong trường hợp bình thường các mục đó đáp ứng nhu cầu thì không có vấn đề gì sảy ra Nhưng nếu dự án yêu cầu phải có thêm 1 khu vực để post tác giả hoặc link download… Thì bắt buộc phải tạo thêm 1 khu vực để post nội dung này Các khu vực được tạo thêm đó được gọi là custom field

- Tìm hiểu cách tạo Custom taxonomy

Tạo ra một phân loại nội dung mói có cấu trúc tương tự như category, tag

- Tìm hiểu cách tạo Custom term meta

Mặc định khi cài wordpress lên chúng ta sẽ thấy ở phần category thì mỗi category có các trường như: Tiêu đề, mô tả, đường dẫn tỉnh… Các thành phần này được gọi là term meta Có thể hiểu những trường này như là custom field của taxonomy Việc tạo một field mới ở khu vực này gọi là custom term meta

- Tìm hiểu về cách tạo Custom user meta

Mặc định khi cài wordpress lên, thì tương ứng với mỗi user sẽ có một số trường để lưu các thông tin của user đó như: Username, Password, Email, Website, Description Các trường này được xem là user meta, chúng ta tạo một trường mới mà mặc định không có trong danh sách trên gọi là custom user meta, ví dụ tạo một custom user meta: gender,…

- Tìm hiểu cách tạo shortcode

Shortcode là một loại code đặc biệt trong Wordpress có thể được chèn vào nội dung của trang hoặc bài viết và sẽ được chuyển hoá thành mã HTML khi trang hoặc bài viết tương ứng được hiển thị

Việc thêm shortcode vào Wordpress được thực hiện thông qua đăng ký một hàm callback ứng với tên của shortcode

- Tìm hiểu cách tạo meta box

Meta Box nghĩa là một cái hộp nhập liệu được tích hợp trong khu vực soạn thảo nội dung, và các dữ liệu sẽ được gửi vào trong cơ sở dữ liệu của website.Nhưng hiện nay, Meta Box đa phần được ứng dụng để làm việc với Meta Data (gồm

wp_usermeta, wp_commentmeta và wp_postmeta)

- Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về kiến thức đã học

- Kết quả:

- Hiểu và sử dụng thuần thục các chức năng website bằng WordPress

- Từ các kiến thức lập trình wordpress nâng cao, tạo một plugin và tạo ra những phần đã được tìm hiểu trên plugin đấy

3 Thực hiện project

Sau hơn một tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực cơ bản về C#, HTML,CSS, Jquery, SNV Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực hiện một project web application Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

Tuần Công việc Người hướng dẫn

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công

ty, cách tổ chức của công ty

- Làm quen với các công cụ làm việc trong công ty

- Học cách trao đổi, làm việc qua email

Anh Kevin Huynh

1- 2

- Lập trình end (html/css jquery, javascript, bootstrap, …)

front-Anh Kevin Huynh

4-5

- Tìm hiểu về ngôn ngữ lập trình PHP nâng cao

- Thực hành PHP

- Thực hiện các task training

Anh Kevin Huynh

6

- Tìm hiểu về wordpress

- Tìm hiểu về phần mềm XAMP

Anh Kevin Huynh