Đang tải... (xem toàn văn)
Nối tiếp phần 1, Bài giảng Xây dựng website thương mại điện tử: Phần 2 tiếp tục cung cấp cho học viên những kiến thức về một số ngôn ngữ lập trình web: ngôn ngữ HTML, CSS, JavaScript, ngôn ngữ lập trình Backend; quản trị website; mô hình Client/Server; mô hình quản trị nội dung; xuất bản website; an toàn và bảo mật cho website thương mại điện tử; thực hành cài đặt và quản trị website thương mại điện tử;... Mời các bạn cùng tham khảo chi tiết nội dung bài giảng!
BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG Bài giảng: XÂY DỰNG WEBSITE THƯƠNG MẠI ĐIỆN TỬ Biên soạn: Th.S.Ao Thu Hoài Hiệu chỉnh TS Trần Thị Thập Th.S.Nguyễn Hoàng Anh 2018 CHƯƠNG 4: MỘT SỐ NGƠN NGỮ LẬP TRÌNH WEB 4.1 NGƠN NGỮ HTML 4.1.1 Khái niêm â HTML HTML viết tắt Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản) Một tài liệu HTML thường có mở rộng html htm tất nhiên trang web Các trang HTML nói riêng trang web nói chung (.php, asp, ) có tình chất văn file txt hay doc có điều phức tạp đa dạng Các trang web HTML đọc trình duyệt web (Web Browse) khác phổ biến Internet Explorer (IE) Ngơn ngữ HTML có ưu điểm đơn giản chạy tốt với nhiều hệ điều hành nhiều trình duyệt web khác Tuy trình duyệt hãng khác sản xuất có cách biên dịch trang web khác nói chung cho kết tương tự Ngòai HTML sọan thảo đơn giản, khơng cần chương trình chun dụng, cần notepad chương trình sọan thảo văn để viết sau save lại dưới dạng file html hoă Ăc htm 4.1.2 Cấu trúc của HTML Thành phần thơng dụng HTML thẻ (tag), tag qui định tất thứ trang web tag có cấu trúc sau: nội dung Chú ý tag có phần mở đầu tên tag bao cặp dấu kết thúc tag cách thêm dấu / vào trước tên tag Nếu thiếu xem sai tag khơng có tác dụng Nó giống tag forum tag forum dùng cặp [] để phân biệt với HTML Không phải tất tag có đóng, số tag đặc biệt khơng cần đóng mà sau sẽ tìm hiểu thêm Ví dụ: Trang chủ Đây tag title nội dung hàng chữ "Trang chủ" Một điều thứ tự mở đóng tag Khi làm trang web sẽ dùng nhiều tag chuyện tag nằm tag chuyện thường phải ý thứ tự mở đóng tag để tránh đóng nhầm gây sai Thứ tự tag mở trước sẽ đóng sau, tức tag mở sẽ đóng sau Ví dụ: Trang chủ Có thể thấy tag mở đóng sau cùng, nói bao tất tag khác 55 lịng Nhỏ tag thế, bao tag lịng theo thứ tự từ lớn tới nhỏ 4.1.3 Cấu trúc của file HTML Cấu trúc file HTML gồm nhiều tag kết hợp với tạo thành phân làm phần riêng biệt Đây cấu trúc chính: Nội dung head nội dung body Trong ý nghĩa tag sau: : Thông báo cho trình duyệt web định dạng html bắt đầu đọc file : Chứa thông số load cho trang web tên trang web hiển thị taskbar, font sử dụng, giá trị gán vào có dùng javascript dùng để chứa hàm hay khai báo file javascript (.js) viết sẵn : Đây phần chứa nội dung sẽ hiển thị trình duyệt web 4.1.4 Các thẻ thông dụng Sau số tag thông dụng html Đầu tiên tag tag : : Dây tag thông dụng dùng để khia báo tên trang sẽ hiển thị phần tên cửa sổ trình duyệt taskbar Thẻ : Các thông tin nhúng vào trang web font, thông số, Chú ý thẻ khơng có tag đóng Ví dụ: mở notepad hoă Ăc Microsoft Office sọan nội dung html sau: Học viê Ăn bưu viễn thơng Sau save lại thành file html mở thấy tác dụng hiển thị tên trình duyệt dười taskbar Thẻ qui định font sử dụng Unicode (UTF-8) nên hiển thị tiếng Việt Nếu khơng chữ có dấu sẽ biến thành mã Kế đến tag tag : 56 Đến xin lưu ý mộ điều tag cịn có thơng số phụ để chi tiết thuộc tính mà tag qui định, thông số thường gán với dấu = theo sau số bao bỡi cặp dấu "" Sau sẽ gặp thông số phụ này: : Đây tag chứa tịan nội dung hiển thị trang web - bgcolor: qui định màu cho trang - Background: Qui định hình cho trang Ví dụ: Đọan mã "#00CCFF" đọan mã màu theo bảng màu RGB Theo nguyên tắc pha màu tất màu màu đỏ (R=red), xanh dương (B=blue) xanh (G=green) pha trộn tùy theo mức độ mà tạo thành Đầu đọan mã phải có ký hiệu # để trình duyệt hiểu mã màu số sau RRBBGG màu sẽ có số cho màu số thập lục phân nên đến F coa Tòan dãy chữ số biểu thị cho 64 bit màu máy tính Chúng ta gặp mã màu nhiều chương trình vẽ chuyên dụng photoshop, corel, Flash, (Hãy thử cách viết trang HTML đổi số màu xem chúng pha màu sao) : Đây thẻ qui định in đậm, nội dung bao tag sẽ hiển thị đậm Tương tự tag in nghiêng, gạch dưới, gạch ngang chữ : Qui định font chữ mặc định cho tòan trang : Xuống dòng, chế độ sọan thảo khơng phân biệt xuống dịng nên muốn nội dung thị xuống dịng ta dùng tag đánh dấu dấu chấm xuống dòng Tag khơng có đóng : Canh nội dung bao bọc Tương tự tag canh trái tag canh phải : Đánh dấu đọan văn bao bọc mã máy tính, trình duyệt sẽ không biên dịch đọan : Thay đổi font cho đọan văn bao bọc - face: Chỉ tên font cần mà cần dùng Chú ý phải đánh tên font khơng sai chữ đề làm điều tốt nên nhớ tên vài font ưu thích để dễ dàng sử dụng - size: Cỡ lớn chữ Chú ý cỡ chữ theo văn mà cỡ theo web nghĩa có từ - thay cỡ chữ văn từ - 36 chí 72 Vì không nên làm to tránh bị sai - color: Qui định màu chữ, tất nhiên dùng bảng mã RGB nốt : Tạo đường kẻ ngang trang web - size: Cỡ lớn đường kẻ tính pixel, không qui định sẽ lấy mặc định 57 - color: Màu đường kẻ dùng bảng RGB không qui định sẽ lấy mặc định màu đen Chú ý tag khơng có đóng : qui định đọan văn hay phân mục cần tách riêng biệt Trình duyệt sẽ tự ngắt dịng khỏang, thụt đầu dòng, tùy theo qui định doanh nghiệp - align: Qui định vị trí đọan văn có vị trí center, left, right tương tự tag qui định ở phía qui định cho tòan khối
bao quanh : Đánh dấu không biên dịch đọan HTML dùng để hiển thị mã HTML web thường dùng trang hu7óng dẫn hay hỏi đáp HTML code : Tạo số dưới ký hiệu hóa học : Tạo số độ hay lũy thừa
- : Đánh dấu ký tự trang trí đầu dịng - type: Chỉ định ký tự trang trí cần hiển thị Có lọai thơng dụng disc chấm trịn, square chĩ vng, circle vịng trịn
- : Đánh dấu dịng cần trang trí đầu dịng
- : Đánh dấu tag
- chấm trịn
- chầm trịn
- hình vng
- vòng tròn
- chữ C
- chữ D
- Số
- Số
- đánh theo thứ tự kiểu qui định - type: Chỉ định kiểu đánh dấu thứ tự, có kiều A đánh dấu theo alphabet chữ hoa, a đánh dấu theo alphabet chữ thường, đánh dấu theo số I đánh dấu thoe số La Mã - start: Chỉ định số bắt đầu đếm, khơng muốn bắt đầu từ đầu mà bắt đầu từ dùng thơng số Ví dụ: tạo trang HTML với code sau: Thử tag Bắt đầu thử nghiệm
Tahoma chữ đậm đỏ Times New Roman nghiêng chữ xanh dương Courier New gạch dưới chữ xanh Arial gạch ngang chữ đen 58
Welcome To WallPearl's Blog
+ Cách 2: Bên (thẻ style) Tất thuộc tính CSS vào thẻ style (để tiện cho cơng tác bảo trì, sửa chữa) Ví dụ làm trang web có màu trắng, đoạn văn chữ xanh lá: Ví dụ body { background-color:#FFF } p { color:#00FF00 }A A Welcome To WallPearl's Blog A A
Lưu ý: Thẻ style nên đặt thẻ head + Cách 3: Bên (liên kết với file CSS bên ngoài) 62 Tương tự cách thay đặt tất mã CSS thẻ style sẽ đưa chúng vào file CSS (có phần mở rộng css) bên ngồi liên kết vào trang web thuộc tính href thẻ link Đây cách làm khuyến cáo, đặc biệt hữu ích cho việc đồng hay bảo trì website lớn sử dụng kiểu mẫu Ví dụ: Trong CSS cịn sử dụng thuộc tính @import để nhập file CSS vào CSS hành Cú pháp: @import url (liên kết) @import url("style.css"); Background: định màu nền/ảnh cho trang web kỹ thuật định vị, điều chỉnh ảnh Thuộc tính background-color giúp định màu cho thành phần trang web Các giá trị mã màu background-color giống color có thêm giá trị transparent để tạo suốt body { background-color:cyan} h1 { background-color:red} h2 { background-color:orange} Việc sử dụng ảnh giúp trang web trông sinh động bắt mắt Để chèn ảnh vào thành phần trang web sử dụng thuộc tính background-image body { background-image:url(logo.png)} h1 { background-color:red} h2 { backgroundcolor:orange} p {background-color: FDC689} Theo mặc định ảnh chèn sẽ nằm ở góc trên, bên trái hình Tuy nhiên với thuộc tính background-position bạn sẽ đặt ảnh ở vị trí (trong khơng gian thành phần mà làm nền) Có nhiều kiểu giá trị cho thuộc tính position Như đơn vị xác centimeters, pixels, inches, hay đơn vị qui đổi %, vị trí đặt biệt top, bottom, left, right Khi sử dụng nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa tốn nhiều dung lượng ổ cứng CSS đưa cấu trúc rút gọn cho thuộc tính nhóm background-color:transparent; background-image: url(logo.png); backgroundrepeat: no-repeat; background-attachment: fixed; background-position: right bottom; thành dòng ngắn gọn: background:transparent url(logo.png) no-repeat fixed right bottom; Khái quát cấu 63 Hình 11 Chọn đường dẫn cài đặt Ở trang kế tiếp, bạn bỏ chọn phần “Learn more about Bitnami for XAMPP“ Và ấn Next lần để bắt đầu trình cài đặt XAMPP PT IT Sau cài xong, ấn nút Finish để kết thúc cài đặt mở bảng điều khiển XAMPP Tuy nhiên, khởi động lại máy sau cài đặt xong để tránh tình trạng khơng khởi động localhost Hình 12Lựa chọn tùy chọn Khi bạn cài đặt XAMPP lên máy để tạo máy chủ web apache sẽ sử dụng mặc định cổng 80 để truyền liệu, nhiên phần mềm khác cài đặt máy chiếm cổng 80 để sử dụng khiến bạn khởi động Apache 126 Hình 13 Kết cài đặt Sau cài khởi động xong XAMPP tải mã nguồn wordpress để cài đặt wordpress Trước tiên bạn tải phiên mới mã nguồn WordPress địa https://wordpress.org/latest.zip IT Sau bạn giải nén sẽ có thư mục mang tên “wordpress“ PT Tất tập tin thư mục này, gọi mã nguồn WordPress Hình 14 Tải giải nén Wordpress Tại giao diện điều khiển XAMPP, phần MySQL bạn chọn Admin để truy nhập đường dẫn vào trang quản trị phpMyAdmin 127 Hình 15 Giao diện quản trị XAMPP Vào phần Create databsae, bạn nhập tên database cần tạo vào ô Database name, phần Collation bạn chọn utf8_general_ci hình dưới ấn nút Create kế bên, Chúng ta có: Database user: root Database password: trống PT Database name: cdit IT Database Host: localhost Hình 16 Giao diện quản trị phpMyAdmin Tại giao diện điều khiển XAMPP, tiến hành khởi động Apache MySQL Sau truy cập đường dẫn http://localhost:8080/cdit/ Một bảng giao diện chọn ngôn ngữ ra, bạn chọn Tiếng Việt chọn Tiếp tục 128 Hình 17 Chọn ngơn ngữ để cài Wordpress Bước tiếp theo,Wordpress khai báo cần thông tin để kết nối với sở liệu Bạn sẽ cần biết thông tin sau trước tiến hành Wordpress sẽ dùng thông tin để tạo tệp wp-config.php PT IT Bạn chọn Thực ngay! để Wordpress tự làm việc cho bạn Hình 18 Bắt đầu cài đặt Wordpress Tiếp theo, bạn nhập thông tin database để tiến hành cài đặt Sau bạn nhập thông tin xong, bạn ấn nút Gửi để thực bước 129 Hình 19 Cấu hình quản trị Bước tiếp theo, bạn tiến hành nhập thông tin quan trọng website Tiêu đề trang, Tên người dùng, Mật Thư điện tử bạn PT IT Sau nhập xong, bạn tiến hành ấn nút Cài đặt Wordpress Hình 20 Bắt đầu cài đặt Wordpress thơng báo website bạn cài đặt thành công Bạn ấn nút Đăng nhập để đăng nhập vào trang quản trị với tài khoản mật cài đặt 130 Hình 21 Cài đặt thành cơng 8.2.2.2 Quản lý website WordPress Hướng dẫn quản lí hình ảnh PT IT Hình ảnh lưu thư mục chứa hình ảnh upload /wpcontents/upload/2017,2016,2015,2014 Hình ảnh sau upload sẽ thấy phần “phương tiện” mục “thư viện” Hình 22 Giao diện quản trị Đăng viết, tính soạn thảo nội dung viết WORDPRESS Để đăng viết mới, bạn truy cập vào Bảng tin, click vào menu Bài viết bên trái chọn Viết mới 131 PT IT Hình 23 Viết Tại đây, bạn sẽ thấy giao diện trang đăng/sửa viết Wordpress bao gồm khu vực nhập tiêu đề, khung nội dung soạn thảo, chọn category Sau hoàn thiện viết bạn click vào Đăng viết để đăng viết lên trang Hình 24 Trình soạn thảo viết Sử dụng Page (Trang), lấy nội dung Page trang chủ WORDPRESS Khi bạn vào Trang > Viết trang bạn sẽ thấy giao diện giống giao diện đăng/sửa viết Tuy nhiên sẽ khơng có mục chọn category, Tag 132 Hình 25 Xem trang Page thích hợp để đăng nội dung có tính chất chung chung mà khơng phải phân loại như: ◉ Giới thiệu ◉ Trang giới thiệu dịch vụ PT ◉ IT ◉ Trang liên hệ Hình 26 Giao diện soạn thảo trang Đầu tiên bạn truy cập vào Cài đặt chọn Đọc, ở phần Hiển thị cho trang trước bạn chọn Một trang tĩnh Sau ở phần Trang bạn chọn trang mà bạn muốn làm trang chủ 133 Hình 27 Giao diện cấu hình trang Hướng dẫn upload quản lý tập tin Để upload, tải hình ảnh tập tin lên Wordpress Bạn chọn Phương tiện -> Thêm tập tin sau chọn ảnh, tập tin mà bạn muốn tải lên PT IT Để thấy tập ảnh, tập tin upload bạn vào Thư viện để hiển thị Hình 28 Giao diện quản lý tập tin 8.2.2.3 Cài đặt quản lý theme WordPress Hướng dẫn tìm theme Themeforest.net Themeforest chợ theme, theme Wordpress có khoảng 4000 theme cập nhật liên tục bởi hàng trăm nhà cung cấp khác nhau, kể doanh nghiệp Việt Nam 134 Hình 29 Giao diện quản lý theme Hướng dẫn đổi Giao diện(Theme) Trước tiên bạn phải uplpoad theme mà bạn muốn đổi lên Wordpress.Có cách để đưa theme lên Wordpress: ◉ Cách 1: Bạn copy file theme vào thư mục /wp-contens/themes/ IT ◉ Cách 2: Bạn tải Giao diện lên cách vào Giao diện > Giao diện > Thêm mới Lưu ý tệp thêm dưới dạng file zip PT Sau bạn tải Giao diện lên Wordpress Bạn click vào mục Giao diện > Giao diện bạn chọn Kích hoạt giao diện mà bạn vừa tải lên Như hồn thành việc đổi Giao diện mới Hình 30 Chức kích hoạt Theme 8.2.2.4 Cài đặt quản lý Plugins Cơ WordPress Hướng dẫn cài số plugin 135 Plugin hiểu theo tiếng Việt có nghĩa trình cắm, bổ sung số tính mà Wordpress mặc định khơng hỗ trợ Sau số plugin cần thiết để tạo trang web bản: ◉ WPBakery Visual Composer ◉ Woocomerce ◉ Mechanic Visitor Counter ◉ Master Slide ◉ Contact Form ◉ Tiny MCE Avanced Để cài plugin, bạn click vào Giao chọn Install Plugin Tiếp theo chọn Plugin mà bạn muốn cài vào Sau cài xong, bạn tiếp tục chọn kích hoạt plugin, plugin mới sử dụng PT IT Hình 31 Các plugin 8.2.2.5 Cài đặt quản lý Plugins cho TMĐT WordPress Sau vào CMS để quản lý chung, tìm xem trang sử dụng plugins chưa sửa dụng plugin cách: Vào Menu trái Plugin để xem plugin cài đặt 136 PT IT Hình 32 Giao diện quản lý Plugin Trong phần plugin cài đặt, Woocommerce cài đặt sẽ có giao diện hình Nếu khơng hồn tồn tìm kiếm plugin cài đặt hình dưới: Hình 33 Giao diện tìm kiếm Plugin Khi cài đặt được, điều hướng bên trái sẽ thấy biểu tưởng WooCommerce mục sản phẩm, từ xem sản phẩm, quản lý sản phẩm, quản lý danh mục, quản lý từ khóa, thuộc tính sản phẩm Liệt kê danh sách sản phẩm Menu trái Sản phẩm Tất sản phẩm 137 Hình 34 Giao diện Danh sách Sản phẩm Liệt kê toàn sản phẩm cửa hàng có, bao gồm tên, hình ảnh, giá bán, tình trạng, kích cỡ, thuộc tính thơng tin kèm theo Quản lý danh mục sản phẩm: PT IT Menu trái Sản phẩm Danh mục Hình 35 Các plugion Có thể tùy biến danh mục sản phẩm theo liệt kê theo nhiều cấp khác không hạn chế Danh mục giúp cho thể tồn mặt hàng có cửa hàng theo cấu trúc Chi tiết sản phẩm chỉnh sửa: Menu trái Sản phẩm chi tiết sản phẩm chọn Hình 36 Chỉnh sửa chi tiết sản phẩm Chỉnh sửa thông tin chi tiết sản phẩm cho phép tùy chỉnh nội dung, gắn sản phẩm vào mục, ảnh đại diện, chèn ảnh viết nội dung sản phẩm, giá bán, giá khuyến mại, thuộc tính khác 138 Quản lý đơn hàng báo cáo: Menu trái woocommerce Báo cáo Hình 37 Giao diện báo cáo Nội dung báo cáo thể doanh thu theo ngày, theo tuần, theo tháng theo khoảng thời gian, dựa vào số đơn hàng ghi nhận Cài đặt thông tin cửa hàng PT IT Menu WooCommerce Cài đặt Hình 38 Cài đặt Thơng tin cửa hàng Phần cài đặt cài đặt nội dung địa chỉ, thành phố, quốc gia, mã bưu điện, địa điểm, vị trí khách hàng, loại tiền sử dụng… 139 TÀI LIỆU THAM KHẢO Tiếng Việt Hoàng Đăng Hải, Quản lý An tồn thơng tin, NXB Khoa học Kỹ thuật, 2018 Nguyễn Văn Hùng (chủ biên), Thương mại điện tử - cẩm nang, NXB Kinh tế TP Hồ Chí Minh 2013 Đàm Gia Mạnh, Giáo trình An tồn dữ liệu Thương mại điện tử, NXB Thống Kê, 2009 Đàm Gia Mạnh, Thiết kế triển khai website, NXB Thống Kê, 2018 Nguyễn Văn Minh, Giáo trình Phát triển hệ thống thương mại điện tử, NXB Thống Kê, 2014 Lê Quân & Hồng Văn Hải, Giáo trình Quản trị tác nghiệp doanh nghiệp thương mại, NXB Thống Kê, 2010 Nguyễn Văn Thanh (chủ biên), Giáo trình Thanh tốn thương mại điện tử, NXB Thống Kê, 2011 Tiếng Anh IT Dave Chaffey, E-business and E-commerce Management: Strategy, Implementation and Practice – 6th, Pearson Education, 2015 PT Guy Creese & Jason Burby, Web Analytics Key Metrics and KPIs, Web Analytics Association, 2005 10 Don Tapscott, David Ticoll, Alex Lowy, Digital Capital: Harnessing the Power of Business Webs, Harvard Business Review Press, 2000 140 ... tên miền? 1 02 CHƯƠNG 7: AN TOÀN VÀ BẢO MẬT CHO WEBSITE MẠI ĐIỆN TỬ THƯƠNG 7.1 KHÁI NIỆM CHUNG Bảo mật cho website thương mại điện tử việc chống lại sự truy câ Ăp trái phép vào website người... địa Internet: 146. 123 .110 .22 4 PT (Địa IP tương lai sử dụng IPv6 có 128 bit dài gấp lần IPv4 Version IPv4 có khả cung cấp 23 2 = 29 4 967 29 6 địa Cịn Version IPv6 có khả cung cấp 128 địa chỉ) Do người... chí đến 50 100 phần nhỏ cho khách hàng thuê phần nhỏ Shared hosting phù hợp cho website nhỏ có lượng truy cập thấp, tài nguyên sử dụng khơng nhiều giá th rẻ, trung bình khoảng 2- 20 $/tháng tuỳ