Thiết kế website (part 1)

THIẾT KẾ WEBSITE

ThS. Dương Đắc Quang Hảo
Giảng viên
Đại học Kinh tế - Đại học Huế

Huế, 02/2019


NỘI DUNG

1.

Các khái niệm cơ bản

2.

Thị trường điện tử

3.

Lợi ích & Giới hạn

4.

Xu hướng phát triển

2


1. Một số khái niệm cơ bản

Website là gì?
Domain + Hosting là gì ?
DNS là gì ? => 4 bước xử lý để truy cập website

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

3


1. Một số khái niệm cơ bản
Web động, web tĩnh là gì ?
=> Web động/ tĩnh khác nhau ở đâu ?
Web thương mại điện tử là gì ?

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

4


1. Một số khái niệm cơ bản
Website responsive là gì?
Cross Browser là gì ?
Retina display là gì ?

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

5


1. Một số khái niệm cơ bản

SEO Ready là gì ?

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

6


1. Một số khái niệm cơ bản
CMS là gì ?  Content Management System
Check CMS & other tools: 1. Builtwith; 2. Similartech
CMS có mấy loại? gồm loại gì ?  Wordpress

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

7


1. Một số khái niệm cơ bản
Ưu điểm và nhược điểm của wordpress ?
Ưu điểm

Dễ cài đặt (5 mins for setting up), quản lý & update
Sử dụng cho mục đích làm web hoặc viết blog cá nhân đều được
Hằng năm có hàng nghìn thiết kế giao diện cho wordpress - cả bản free và trả tiền (e.g. trang rất nổi tiếng:
/>
Số lượng plugin nhiều không cần thuê code cũng có thể làm web mình mong muốn
Free: />Buy: />Cộng đồng sử dụng wp rộng và nhiều
wp được hướng tới giao diện cho di động
wp là một bộ mã nguồn mở free
Dễ search trên google

Có phần soạn thảo dễ sử dụng với giao diện như office

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

8


1. Một số khái niệm cơ bản
Ưu điểm và nhược điểm của wordpress ?
Nhược điểm

Bảo mật.
WordPress là mã nguồn mở nên hacker dễ dàng tìm thấy kẽ hở và điểm yếu về bảo mật.
WordPress thiếu khả năng quản lý người dùng cơ bản và phân chia vai trò.
WordPress cũng đã được báo cáo là có hiệu suất thấp trong việc xử lý các cơ sở dữ liệu dung lượng lớn và multisite.
Theme của WordPress khó chỉnh sửa.
Rất nhiều WordPress themes và plugins miễn phí không được cập nhật và hỗ trợ.

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

9


2. Cài đặt wordpress
1. Cài đặt local host và tải wordpress

Method 1: Phương pháp truyền thống, cài trên local host
1. Cài Server (local host) trên máy ⇒ để cài đặt chỗ lưu trữ dữ liệu (cài
wamp)
Wamp Services: />2. Download wordpress: /> 

Method 2: Instant wordpress - phương pháp cài đặt nhanh
Vào trang để tải & cài đặt
Note: cách này khi làm web bán hàng sẽ có 1 chút lỗi tiếng việt

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

10


2. Cài đặt wordpress
2. Tạo website

Trong folder C:\wamp64\www, tạo thư mục để lưu trữ dữ liệu (Giải nén folder
wordpress, đổi tên folder => ex. Web1)
vào trang http://localhost/phpmyadmin/ (User: root; PW: …)  database, tạo
CSDL online
Vào trang localhost/web1 để tạo website

B1. Lựa chọn ngôn ngữ
B2. Nhập thông tin CSDL
B3. Nhập thông tin website (tên CSDL: web1; ID: root; PW: …)

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

11


2. Cài đặt wordpress
Hai Kiểu dữ liệu trong wordpress là gì ?
Bài viết (post)  vnexpress.net

Trang (page)  contact, about, FAQs,…
Note: Kiểu dữ liệu post có phần danh mục, còn page thì không

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

12


2. Cài đặt wordpress
Themes?
Có 2 cách để add theme:
Method 1: download, giải nén xong up lên
Method 2: ấn nút “Add new”

Widget?
Menu?
Plugin? Ex. Contact form 7
Wordpress tools (import/ export)?

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

13


Exercise 1
→ Thực hành tạo 1 web đặt tên là web1
Tùy chỉnh theme mặc định trên wordpress:
viết bài: 5 post test
Tạo Trang: 5 trang test
Sửa Menu: thêm trang vào menu

Cài contact form 7: thêm vào bài viết
Nhập xuất dữ liệu wordpress
Nhập 20 sản phẩm mẫu
Hoàn thành xong 1 trang vozexpress hoàn chỉnh: gồm 5 bài viết , 5 trang

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

14


3. Thiết lập web bán hàng
Purpose: Tự bán hàng và quản lý hàng, đơn hàng, dịch vụ ship hàng
Process:
Step 1 - Set up wordpress & woocommerce
Step 2 - Set up các thông số cho woocommerce
Step 3 - add new products
Step 4 - add & adjust menu
Step 5 - add themes + import the existing data
Step 6 - Thiết lập quản trị (check order, set promotion code, report, setting general business info)

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

15


Exercise 2
→ Cài mẫu web mới đặt tên là web2
Cài xong, cài thêm plugin woocommerco
Thêm demo 10 sản phẩm : đầy đủ hình ảnh, giá , chi tiết sản phẩm
Thêm tất cả trang vào menu: giỏ hàng, tài khoản, cửa hàng , trang chủ

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

16


Exercise 3
→ Cài 1 web mới đặt tên là web3:
Cài theme: storefront
Import dữ liệu từ web2
Sửa lại web3 cho đẹp
Thiết lập web trong phần quản trị , giao hàng,.....

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

17


Exercise 4
→ Web tin tức: Cài mẫu web mới đặt tên là webnews
Cài đặt wordpress
Cài đặt Themes ⇒ simple blog
Update dữ liệu
Tùy biến giao diện ⇒ Có 2 cách để tùy chỉnh giao diện (M1: Appearance/
Customise; M2: Click on the “customise” button on website)
Cài thêm các plugin
Ex. Facebook comment; Contact Form 7

Thanh toán điện tử - ThS Dương Đắc Quang Hảo

18