Bài tập thực hành thương mại Điện tửxây dựng website bằng wordpress

ả Mở trình duyệt, gõ vào đường dẫn http://localhost:8080/mrq mrq = tên thư mục đã đặt lúc giải nén wordpress tương ứng... Khai báo các thông tin như sau: Chú ý: database là tên của datab

TRƯỜNG ĐẠI HỌC CÔNG NGHI P TP H CHÍ MINH Ệ Ồ

KHOA CÔNG NGH THÔNG TIN Ệ

BỘ MÔN H Ệ THỐNG THÔNG TIN

THƯƠNG MẠI ĐIỆN TỬ

TÀI LIỆU LƯU HÀNH NỘI BỘ’

NĂM 2020

N I DUNG Ộ

Tuần 1 Cài đặt Wordpress 1 Tuần 2 M t s ộ ốtính năng của wordpress 11 Tuần 3 Backup và Restored 22 Tuần 4 T o trang ch và MENU 29 ạ ủTuần 5 T o bài vi t 32 ạ ếTuần 6 Qu n lý s n ph m 36 ả ả ẩTuần 7 Quản lý đơn hàng 41 Tuần 8 Vi t hóa chỉnh css website 47 ệ –Tuần 9 Layout website 50 Tuần 10 Báo cáo bài t p thực hành 53 ậ

TUẦN 1 CÀI ĐẶT WORDPRESS

1.1 Cài đặt trên local

1.1.1 Cài đặt môi trường chạy wordpress trên máy tính

Cài t Wampp (ho c xampp)đặ ặ Sau khi cài đặt xong, vào file httpd.conf đổ ổi c ng k t n i sang ế ốmột c ng khác c ng 80 (gổ ổ ợi ý đổi thành 8080) 02 v ở ị trí như sau:

Sau khi cài đặt xong, khởi động môi trường Bật ứng dụng Apache và MySql

Xem trang web localhost theo đường dẫn: http://localhost:8080

1.1.2 Cài đặt wordpress

T i wordpress phiên b n m i nh t ả ả ớ ấ

Giải nén vào thư mục C:\xampp\htdocs (hoặc wampp\www), đặt tên website

Tạo CSLD cho website, đặt tên tương ứng (d nh ) ễ ớ ;

Có th t o tài kho n qu n tr ể ạ ả ả ị CSDL, sau đó phân quyền cho tài khoản m i tớ ạo được m i quyọ ền

qu n lý CSDL trên ả

Mở trình duyệt, gõ vào đường dẫn http://localhost:8080/mrq (mrq = tên thư mục đã đặt lúc giải nén wordpress tương ứng)

Chọn ngôn ng cho wordpress (Ti ng Anh ho c Ti ng Vi t) ữ ế ặ ế ệ

Khai báo các thông tin như sau:

Chú ý: database là tên của database đã tạo ở bước trên; localhost, User Name c a database mủ ặc định là root, mật kh u mẩ ặc định để trống (ho c dùng tên user và m t khặ ậ ẩu đã tạ ở bước trên) và o Database Host luôn là localhost

Table Prefix nghĩa là tiền tố của database chứa dữ liệu WordPress, mặc định nó sẽ là wp_, chúng ta có th ể đổi nó thành b t cấ ứ cái gì nhưng phả ắi b t buộc có _ đằng sau

Khai báo các thông tin như tên website, tên người dùng và mật khẩu

Giao diện trang web khi vừa cài đặt xong wordpress

Giao diện admin dùng để quản trị web

1.2 Tri n khai wordpress trên hosting ể

1.2.1 Đăng ký hosting – domain

Truy c p vào ậ https://www.hostinger.vn/free-hosting để đăng ký hosting free; Nhập các thông tin theo yêu c u ầ

Kiểm tra mail để xác nhận việc đăng ký hosting

Xác nh n email thành công ậ

Chọn mục đích sử ụng website d

Chọn kinh nghi m thi t k web của b n thân ệ ế ế ả

Nhập địa chỉ website, password

1.2.2 Cài đặt wordpress trên hosting

Chọn cách th c t o website (dùng wordpress) ứ ạ

Chọn ngôn ng hi n thị, nhữ ể ập tên đăng nhập và mật khẩu để quản trị trang admin c a website ủđượ ạc t o

Chờ đợi quá trình cài đặt wordpress

Cài đặt xong

Đăng nhập vào trang quản trị; giao diện quản trị tương tự như khi cài đặt local

1.3 Thự c hành

1 Cài đặt wordpress trên máy tính cá nhân

2 Đăng ký tài khoản host free và tiến hành cài đặt wordpress trên host vừa đăng ký

TUẦN 2 MỘT S Ố TÍNH NĂNG CỦA WORDPRESS

2.1 Dashboard

Trong WordPress, dashboard là trang qu n tr c a website Vai trò c ả ị ủ ụ thể như sau:

▪ Thứ nhất, dashboard nơi thống kê nhanh và tóm tắt nh ng thông tin, tr ng thái c a website ữ ạ ủnhư: số lượng bài viết, số chuyên mục, số bình luận, số lượt xem,…

▪ Thứ hai, dashboard là trung tâm điều khiển các tính năng của website, như: kích hoạt, vô

hiệu hóa, thêm, xóa,… các plugin

▪ Thứba, dashboard là nơi thực hiện các tùy chỉnh và thi t l p website ế ậ

Hình dưới đây là các khu vực và vai trò tương ứng của chúng trang qu n tr (dashboard) trên ở ả ịWordPress:

Như trong hình, bố cục của dashboard được chia thành 3 khu vực tương ứng với 3 con số 1, 2

và 3 Trong đó:

▪ Khu vực 1: Đây là thanh công cụ Toolbar, nơi bạn th c hi n m t s thao tác nhanh t giao ự ệ ộ ố ừ

di n ệ website như đăng bài, xem bài, chuyển đổi qua l i gi a trang qu ng tr và giao diạ ữ ả ị ện website Khi b n cài thêm plugin thì s ạ ố trình đơn trên thanh menu này cũng sẽ nhiều hơn

▪ Khu vực 2: Đây là menu các thiết lập, công c quụ ản lý website và các tính năng bổ sung khi

b n cài thêm plugin ạ

▪ Khu v c 3: ự Nơi thể ệ hi n các thông tin, tr ng thái cạ ủa website Đồng thời đây là khu vực để

hi n th chi ti t ể ị ế các tính năng tương ứng v i menu khu v c 2 ớ ở ự

Một chuyên m c có thụ ể chứa nh ng chuyên m c c p thữ ụ ấ ấp hơn, chuyên mục lớn được gọi

là Category Parent (chuyên m c cha) Chuyên m c cha nên bao hàm các chuyên m c con v m t nụ ụ ụ ề ặ ội dung

2.2.1 Thêm chuyên mục mới

Đường d n truy c p: Post (1) >> Categories (2) (Bài vi t >> Chuyên m c) ẫ ậ ế ụ

(3) Name tên chuyên m– ục;

(4) Slug tên chuyên m– ục được viết không dấu và các được ngăn cách bằng d u - N u không ấ “ ” ế

đặt Slug thì mặc định WordPress sẽ tự t o Slug b ng tên chuyên m c ở m c Name (t ạ ằ ụ ụ ự động b dấu ỏtiếng Vi t và thêm d u “-”ệ ấ gi a các t ); ữ ừ

(5) Parent – chọn chuyên m c cha; ụ

(6) Decription mô t v chuyên m– ả ề ục

2.2.2 Chỉnh sửa chuyên m c ụ

Có 02 ch ế độ chỉnh s a: Edit (ch nh sử ỉ ửa) và Quick Edit (S a nhanh) ử

Quick Edit

Edit

2.3 Tags

Có th hiể ểu Tags là tên m t ch liên quan v m t n i dung gi a các bài vi Gộ ủ đề ề ặ ộ ữ ết ần gi ng ố như Categories, tags cũng có vai trò phân loại bài viết theo chủ đề Không giống như Categories, các Tag độ ậc l p v i nhau v m t c u trúc và không có Tag nào bao hàm Tag nào M t bài vi t có th ớ ề ặ ấ ộ ế ể đặt nhi u Tag khác nhau Tuy nhiên nên h n ch dùng quá nhi u Tags D gây r i và khó quề ạ ế ề ễ ố ản lý cũng như ử ụ s d ng khi c n ầ

T o Tags có 2 cách: cách 1 t o s n b ng công c Tags, cách 2 là t o trong công c vi t bài ạ là ạ ẵ ằ ụ ạ ụ ế(post)

Để ạ t o s n các Tags, t trang Dashboard >> Posts ẵ ừ >> Tags và điền các thông tin tương tự như hình bên dưới, sau đó nhấn Add New Tag để hoàn tất

▪ Name: tên c a Tag, tên này là duy nhủ ất

▪ Slug: tương tự với Categories, slug là duy nhất, nó không được trùng v i slug c a Categories ớ ủ(parent), c a post, c a page, ủ ủ

▪ Description: Mô t v Tags ả ề

Khi khung so n th o m ra có th ạ ả ở ể soạn n i dung, ộ chọn chuyên mục và đăng bài như sau:

(1) Post title – tiêu đề bài viết;

(2) Main Post Editing là cái vùng so n th o vi t bài – ạ ả ế (tương tự như trong Office Word) (3) Publish khung xu t b n T– ấ ả ại đây có thể xem trước bài viết trước khi đăng lên website bằng tính năng Preview Chỉ lưu bài viết mà không đăng thì nhấn Save Draft

(4) Categories khung l a ch n chuyên m c cho bài vi t (có th– ự ọ ụ ế ể chọn m t chuyên m c phù ộ ụhợp cho bài vi t ho c nế ặ ếu chưa có thì ch n vào Add New Category t o m t chuyên m c m i) ọ để ạ ộ ụ ớ(5) Tags tên ch liên quan, m i tag cách nhau b i d u ph y – ủ đề ỗ ở ấ ẩ

(6) Featured Image : Ảnh đại di n cho bài vi t, là ệ ế ảnh mà người đọc nhìn th y danh sách bài ấ ở

vi t (có thế ể chọ ản nh b t k trong s các ấ ỳ ố ảnh đã tải lên, n u mu n s d ng hình m i thì ế ố ử ụ ớ chọn Set featured image >> Select Files để chọ ải ản t nh lên t máy tính) ừ

Sau khi vi t và l a ch n/t o category và tag, nh n vào Publish ế ự ọ ạ ấ để đăng bài viết

2.4.2 Chỉnh sửa bài vi t ế

Bài viết trên WordPress được s p x p theo th tắ ế ứ ự thời gian g n nhầ ất, đồng thời chúng được nhóm theo t ng chuyên m c (Categories) và các chừ ụ ủ đề liên quan (Tags) Qu n lý bài viả ết là việc chỉnh s a, xóa, di chuyử ển,… các bài viết đó

Để m danh sách bài vi t trên website, vào Posts >> nh n All Posts ở ế ấ và danh sách bài đăng hiện

(4) Search Posts tìm ki– ếm bài đăng

(5) Actions – thực hiện hành động v i nh ng bài viớ ữ ết đã chọn Đầu tiên cần tick vào nh ng bài ữ

vi t c n quế ầ ản lý sau đó lựa ch n m t ọ ộ hành động ở Bulk Actions Để chỉnh s a nhanh các bài vi t, ử ế

chọn edit >> Apply N u mu n xóa ch n Trash ế ố ọ >> Apply

(6) Screen Option - có th tùy ch nh các n i dung c n hi n th cho m c All Posts ể ỉ ộ ầ ể ị ụ

2.5 Page

Tương tự như Posts, Pages (trang) trên WordPress cũng là một d ng bài vi t ạ ế Nó cũng có tiêu

đề, n i dung, trong n i dung có th chèn hình ảnh, video, cũng cho phép bình luận,… nói chung là ộ ộ ểnhư một bài viết (post) thông thường Tuy nhiên, nó có những điểm khác biệt sau đây:

▪ Pages thường được dùng để tạo các trang giới thiệu, liên hệ, quy định, điều khoản,… nói chung là các n i dung cộ ố định, ít khi c p nhậ ật

▪ Pages không được nhóm hay phân loại theo chuyên mục, theo tags Tuy nhiên, nó cho phép tạo trang cha trang con –

▪ Khi một trang đượ ạc t o, nó không xu t hi n trên dòng th i gian c a website, chấ ệ ờ ủ ỉ có thể ấ l y đường d n cẫ ủa nó và đặt một nơi phù hợp, ví dụthanh menu, đặt link trên các bài viết,

▪ Trang được hỗ trợ nhi u mề ẫu định d ng bài vi t, cái này tùy theo theme mà sạ ế ố lượng mẫu cũng sẽ khác nhau

2.5.1 Thêm page m i ớ

Tương tự như Posts, để tạo một Page thực hiện như sau:

Dashboard >> Pages>>Add New >> so n th o n i dung và xu t b n trang ạ ả ộ ấ ả

(8) Ch n m t s ọ ộ ố thứ t c a trang trong danh sách.ự ủ

2.5.2 Qu n lý Pages ả

Số lượng Page trên m t website ộ thường không nhi u nên vi c quề ệ ản lý chúng cũng khá dễ dàng

và th c hiự ện tương tự như với qu n lý Post ả

(1) Thống kê các trang đã xuấ ản và đã xóat b website;

(2) Th c hiự ện hành động với trang đang trỏ chuột;

Themes wordpress có 2 lo ại:

▪ Miễn phí: Có r t nhi u khi s d ng wordpress, hỗ trợ các chấ ề ử ụ ức năng cơ bản, h n chạ ế chỉnh sửa, nên ch n các themes do Wordpress cung c p ọ ấ

▪ Có phí: Hỗ trợ nhi u ch c nang, chề ứ ỉnh s a, tùy bi n giao di n theo yêu c u Có th mua ử ế ệ ầ ểthemes template t i accesspressthemes.com, themeforest.net, theme-ạ junkie.com…

2.6.1 Tìm và cài đặt theme t ừ thư viện

Dashboard >> Appearance>>Themes >> Add New

L a ch n theme phù h p v i nự ọ ợ ớ ội dung website, sau đó chọn Install để cài đặt theme hoặc Preview để xem trước bố cục trang web

Sau khi cài đặt theme, click chọn Active để kích ho t theme (kích ho t xong m i có th s dạ ạ ớ ể ử ụng theme)

2.6.2 Cài đặt theme b ng cách upload t máy tính lên website ằ ừ

Dashboard >> Appearance>>Themes >> Add New

Chọn Upload Theme, sau đó chọn file nén chứa theme mu n s d ng, chọn Install Now Sau ố ử ụkhi upload xong NH Active m i s dỚ ớ ử ụng theme được.

2.6.3 Cài đặt theme b ng cách upload ằ trực tiếp vào host

Chép thư mục chứa theme muốn sử dụng vào thư mục \wp-content\themes

Chọn active để sử dụng theme

2.7 Plugin

Plugin là công c m r ng c n cài thêm d b sung chụ ở ộ ầ ể ổ ức năng cho wordpress

▪ Mỗi Plugin có các chức năng cụ th do các l p trình viên vi t ra ể ậ ế

▪ Hiện nay có r t nhi u plugin tr phí và plugin mi n phí ấ ề ả ễ

▪ Cài thêm plugin là thêm công c cho Wordpress, nhung ch nên cài plugin khi c n thiụ ỉ ầ ết

d t ki m dung lu ng hosting ể tiế ệ ợ

▪ Nên ch n plugin có nhi u ngu i s d ng và update thu ng xuyên.ọ ề ờ ử ụ ờ

Một s plugin nên s d ng: ố ử ụ

▪ Yoast SEO: ki m tra bài vi t chu n Seo ể ế ẩ

▪ WP Edit: Thêm dinh d ng cho bài vi t (fonts chạ ế ữ, fonts size, …)

▪ Easy Google Fonts: Ðinh d ng fonts cho Wordpress ạ

▪ WP Super Cache: tang t c d t i trang web ố ộ ả

Các cài đặt plugin tương tự như cài đặt theme Khi cài đặt plugin nên lưu ý thời gian cập nhật

và s ố lượng ngườ ử ụng plugin đó.i s d

- Giới thi u các thành viên nhóm ệ

- Giới thi u v ệ ề ý tưởng kinh doanh c a nhóm ủ

- Địa ch , s ỉ ố điện tho i, email liên h ạ ệ

4 Tạo trang chính sách đổ ải tr hàng cho website

5 Cài đặt theme cho website

6 Cài đặt plugin classic editor và Advanced Editor Tools

7 Sử ụ d ng 2 plugin trên để đị nh d ng các bài viạ ết đã tạ ởo câu 2

TUẦN 3 BACKUP VÀ RESTORED

Backup (sao lưu) dữ liệu của website là m t vi c khá quan trộ ệ ọng để ả b o toàn d ữ liệu khi g p s ặ ự

c hoố ặc đơn giản là chuy n host cho website Sau vi c backup là ti n hành khôi ph c d ể ệ ế ụ ữ liệu d a vào ự

d liữ ệu đã backup để đưa website trở về trạng thái lúc backup

3.1 Cài đặ t plugin h ỗ trợ ạ t o form

Cài đặt plugin Contact Form 7

Hướng d n t o form liên h ẫ ạ ệ

T o Form: ạ

Bước 1: Chúng ta vào Contact > Thêm

Bước 2: Sau khi n nút t o form, chúng ta sấ ạ ẽ có được cửa sổ như sau:

Chúng ta có th ể thấy chỗ Biểu m u ẫ

- Text field: Trường dùng để chúng ta nhập text thông thường, thích h p t o field nh p ợ ạ ậtên, tiêu đề liên hệ,…

- Email: Trường đặc biệt dùng để khách nh p email c a h ậ ủ ọ vào, lúc đó các hệ thống email

sẽ hi u rể ằng đây là email của người liên h chúng ta n reply nhanh chóng ệ để ấ

- URL: Trường dùng để nh p liên kậ ết

- Telephone Number: Một trường đặc biệt để nh p s ậ ố điện tho ại

- Number (spinbox): Trường nh p s ậ ố có thêm tính năng tạo nút tăng/giảm s ố

- Number (slider): Trường chọn số đặc bi t, ch n theo ki u kéo slide, kéo qua ph i thì s ệ ọ ể ả ốtăng và kéo qua trái thì số giảm

- Date: Trường riêng biệt để chọn ngày tháng, có tích hợp thêm tính năng chọn theo l ch ị

- Text area: Trường để nhập text, nhưng khung text to hơn Thích hợp để làm form nhập

n i dung liên h ộ ệ

- Dropdown menu: Trường ch n giá tr ọ ị được định sẵn thông qua menu đổ xu ng ố

- Checkboxes: Trường ch n giá tr nh s n thông qua viọ ị đị ẵ ệc đánh dấu

- Radio buttons: Cũng là trường đánh dấu giá tr có sị ẵn nhưng chỉ được ch n mọ ột

- Quiz: Trường nh p n i dung theo ki u quiz ậ ộ ể

- CAPTCHA: Trường nh p mã captcha ki m tra, n u nhậ ể ế ập đúng thì mới có th g i form ể ử

- File upload: Trường cho phép upload t p tin khi g i liên h qua form này ậ ử ệ

- Submit button: Chèn nút g i form ử

Bước 3: Đặt chuột vào khung biểu mẫu – Nhấn vào field mong muốn chỉnh – xuất hiện: phần shortcode-form

Bước 4: Copy field trong khung màu xanh b vào khung Mesage body c a khung Mail phía ỏ ủbên trên Khung này có ý nghĩa là cài đặt mẫu các thư liên hệ mà khách gửi cho chúng ta qua

form này N u chúng ta không copy field màu xanh b vào khung bên ph i c a ph n Mail thì ế ỏ ả ủ ầchúng ta s không thẽ ể thấy n i dung mà khách nhộ ập vào trong field đó (Cài đặt trên 2 phiên

bản tương tự nhau nên mình ch l y m t hình) ỉ ấ ộ

Chèn form vào post/page

Bước 1: Copy đoạn shortcode của form Sang phần chèn Form này, chỉ cần copy code trong khung màu tím ngay dưới tiêu đề form Hình 2.5: Copy đoạn shortcode của form

Bước 2: Paste vào nội dung c a post/page ủ

3.2 Cài đặ t plugin h ỗ trợ việc backup và restored

Cài đặt plugin UpdraftPlus WordPress Backup Plugin

Active sau khi cài đặt xong

3.3 Backup

3.3.1 Thực hi n backup ệ

Để th c hi n backup, vào ự ệ Settings >> UpdraftPlus Backup

Chọn Backup Now để tiến hành backup website;

Check ch n backup database (ọ Include your database in the backup) và files (Include your files

in the backup) Sau đó chọn Backup Now để tiến hành backup

Backup xong, d ữ liệu backup được hi n th ể ị như hình bên dưỡi

3.3.2 Cài đặt backup t ự động

Chọn th Settings ẻ

Tiến hành cài đặt lịch backup file (Files backup schedule ) và backup database (Database backup schedule):

(1): Th i gian th c hi n backup: M i 2 4 8 12 ti ng, m i ngày, m i tuờ ự ệ ỗ – – – ế ỗ ỗ ần…

(2): Số lượng file backup lưu trữ ạ l i: chỉ lưu số lượng file m i nhớ ất theo cài đặt, các file cũ hơn sẽ được xóa tự động

Chọn vị trí lưu trữ các file backup, bấm nút Save Changes Sau đó tiến hành xác th c tài khoự ản lưu trữ

3.4 Restored

Để th c hi n restore, vào ự ệ Settings >> UpdraftPlus Backup >> Existing Backups

Nếu chưa có file backup, tiến hành upload các gói backup lên host để thực hi n vi c restore ệ ệ

Sau khi upload các gói backup xong, ti n hành restore website ế

Chọn các file c n restore ầ