Bài Giảng Thiết Kế Website

THIẾT KẾ WEBSITE NỘI DUNG Các khái niệm Thị trường điện tử Lợi ích & Giới hạn Xu hướng phát triển Một số khái niệm • Website gì? • Domain + Hosting ? • DNS ? => bước xử lý để truy cập website Thanh toán điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • Web động, web tĩnh ? => Web động/ tĩnh khác đâu ? • Web thương mại điện tử ? Thanh tốn điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • Website responsive gì? • Cross Browser ? • Retina display ? Thanh toán điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • SEO Ready ? Thanh tốn điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • CMS ?  Content Management System • Check CMS & other tools: Builtwith; Similartech • CMS có loại? gồm loại ?  Wordpress Thanh toán điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • Ưu điểm nhược điểm 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 viết blog cá nhân  Hằng năm có hàng nghìn thiết kế giao diện cho wordpress - free trả tiền (e.g trang tiếng: https://themeforest.net/search/$2)  Số lượng plugin nhiều không cần th code làm web mong muốn  Free: https://wordpress.org/plugins/tags/free/  Buy: https://codecanyon.net/  Cộng đồng sử dụng wp rộng nhiều  wp hướng tới giao diện cho di động  wp mã nguồn mở free  Dễ search google  Có phần soạn thảo dễ sử dụng với giao diện office Thanh toán điện tử - ThS Dương Đắc Quang Hảo Một số khái niệm • Ưu điểm nhược điểm wordpress ? Nhược điểm  Bảo mật  WordPress mã nguồn mở nên hacker dễ dàng tìm thấy kẽ hở điểm yếu bảo mật  WordPress thiếu khả quản lý người dùng phân chia vai trò  WordPress báo cáo có hiệu suất thấp việc xử lý sở liệu dung lượng lớn multisite  Theme WordPress khó chỉnh sửa  Rất nhiều WordPress themes plugins miễn phí khơng cập nhật hỗ trợ Thanh toán điện tử - ThS Dương Đắc Quang Hảo Cài đặt wordpress Cài đặt local host tải wordpress Method 1: Phương pháp truyền thống, cài local host Cài Server (local host) máy ⇒ để cài đặt chỗ lưu trữ liệu (cài wamp) để cài đặt chỗ lưu trữ liệu (cài wamp) Wamp Services: http://www.wampserver.com/en/ Download wordpress: https://wordpress.org/download/ Method 2: Instant wordpress - phương pháp cài đặt nhanh Vào trang https://instantwp.com/downloads/ để tải & cài đặt Note: cách làm web bán hàng có chút lỗi tiếng việt Thanh toán điện tử - ThS Dương Đắc Quang Hảo 10 Cài đặt wordpress Tạo website • Trong folder C:\wamp64\www, tạo thư mục để lưu trữ 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 Cài đặt wordpress Hai Kiểu liệu wordpress ? • Bài viết (post)  vnexpress.net • Trang (page)  contact, about, FAQs,… Note: Kiểu liệu post có phần danh mục, cịn page khơng Thanh tốn điện tử - ThS Dương Đắc Quang Hảo 12 Cài đặt wordpress Themes? Có 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 Wordpress tools (import/ export)? Thanh toán điện tử - ThS Dương Đắc Quang Hảo 13 Exercise → Thực hành tạo web đặt tên web1 • Tùy chỉnh theme mặc định wordpress: • viết bài: post test • Tạo Trang: trang test • Sửa Menu: thêm trang vào menu • Cài contact form 7: thêm vào viết • Nhập xuất liệu wordpress • Nhập 20 sản phẩm mẫu • Hồn thành xong trang vozexpress hồn chỉnh: gồm viết , trang Thanh toán điện tử - ThS Dương Đắc Quang Hảo 14 Thiết lập web bán hàng Purpose: Tự bán hàng quản lý hàng, đơn hàng, dịch vụ ship hàng Process: • Step - Set up wordpress & woocommerce • Step - Set up thông số cho woocommerce • Step - add new products • Step - add & adjust menu • Step - add themes + import the existing data • Step - 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 → Cài mẫu web đặt tên 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 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 → Cài web đặt tên web3: Cài theme: storefront Import liệu từ web2 Sửa lại web3 cho đẹp Thiết lập web phần quản trị , giao hàng, Thanh toán điện tử - ThS Dương Đắc Quang Hảo 17 Exercise → Web tin tức: Cài mẫu web đặt tên webnews Cài đặt wordpress Cài đặt Themes ⇒ để cài đặt chỗ lưu trữ liệu (cài wamp) simple blog Update liệu Tùy biến giao diện ⇒ để cài đặt chỗ lưu trữ liệu (cài wamp) Có cách để tùy chỉnh giao diện (M1: Appearance/ Customise; M2: Click on the “customise” button on website) Cài thêm plugin Ex Facebook comment; Contact Form Thanh toán điện tử - ThS Dương Đắc Quang Hảo 18