báo cáo thực tập xây dựng WEBSITE bằng WORDPRESS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.34 MB, 21 trang )
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 7 năm 2020
Lê Ngọc Châu
2
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 chun 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ê Ngọc Châu
3
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
Lê Ngọc Châu
4
NHẬN XÉT CỦA KHOA
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
...................................................................................................................................................
Lê Ngọc Châu
5
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
Lê Ngọc Châu
6
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: />
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.
Lê Ngọc Châu
7
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 ecommerce chun nghiệp.
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, q 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 .
Ngồ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, q 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.
2.2.
-
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.
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)
Lê Ngọc Châu
8
-
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).
-
HTML
Xây dựng cấu trúc của 1 trang tĩnh chỉ gồm các thẻ HTML.
CSS :
Tiến hành tìm hiểu về css và style cho trang HTML ở bài trước.
Javascript, JQuery:
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.
Ngồ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
-
Nội dung :
2.3.1 Tìm hiểu về PHP
-
Tìm hiểu về PHP cơ bản như: cú pháp, biến, kiểu dữ liệu, hàm, cấu trúc điều kiện
if/else,…
PHP form:
Lê Ngọc Châu
9
-
-
-
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.
Lê Ngọc Châu
10
-
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).
Lê Ngọc Châu
11
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
Lê Ngọc Châu
12
-
-
-
-
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ả:
Lê Ngọc Châu
13
-
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
-
1
-
1- 2
4-5
-
6
-
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.
Lập trình frontend
(html/css
jquery, javascript,
bootstrap, …)
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
Tìm
hiểu
về
wordpress
Tìm hiểu về phần
mềm XAMP
Người hướng
dẫn
Mức
độ
hồn
thành
Nhận xét của
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 một
website wordpress
trên localhost
Tìm hiểu lập trình
wordpress cơ bản
Thực hiện các task
training
Tìm hiểu lập trình
wordpress
nâng
cao
Thực hiện các task
training
Báo cáo cuối đợt
thực tập
Tham gia vào các
project của công
ty
Anh Kevin
Huynh
Anh Kevin
Huynh
Anh Kevin
Huynh
Lê Ngọc Châu
15
Chương 3: Chi tiết về project
1. Giới thiệu về IMAGE VIEW SYSTEM
IMAGE VIEW SYSTEM là một ứng dụng web mạng xã hội đươc xây dựng để phục vụ
các game thủ trong trị chơi Class of Clans, đơi lời về trị chơi này:
-
Tính đến 17/7/2019, đã có hơn 621 triệu lượt tải về trên 2 dòng máy adroid và ios.
-
Doanh thu trung bình 1 triệu đơ mỗi ngày.
-
Doanh thu qua các năm:
Source: />1.1. Các màn hình thực hiện (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
2. Thực hiện
-
Với sự giúp đỡ của leader cùng các thành viên trong nhóm thực hiện project.
3. Kết quả
-
Đã hồn thiện các màn hình được giao theo tiến độ và yêu cầu thời gian.
TÀI LIỆU THAM KHẢO
Front-end
/> /> />Lê Ngọc Châu
20
PHP
/>
WORDPRESS
/> />
Lê Ngọc Châu
21
TỔNG KẾT
Trong suốt q trình thực tập tại cơng ty Global Guru Code, em đã được học, tiếp thu và
luyện tập những kiến thức bổ ích, rất có giá trị cho mình trên con đường lập trình website. Được
tham gia vào nhiều dự án của công ty, nhờ vậy, kiến thức hiểu biết về quá trình học tập ứng
dụng vào cơng việc được mở rộng, tích lũy nhiều kinh nghiệm cho sau này.
Chân thành cảm ơn sự giúp đỡ của anh Huỳnh Duy Khoa, cũng như sự hỗ trợ của các
anh chị, bạn bè trong công ty đã giúp đỡ, hỗ trợ để em có thể hồn thành tốt các nhiệm vụ được
giao trong quãng thời gian thực tập ở công ty.
Lê Ngọc Châu
