giáo trình xây dựng website thương mại ngành công nghệ thông tin cao đẳng liên thông

H°ớng d¿n vÃ ph°¢ng pháp giÁng d¿y, học tÁp môn học: - Đái với giáo viên: Giáo viên d¿y môn Xây dāng website th°¢ng m¿i có b¿ng tát nghiáp Đ¿i học chuyên ngành Công nghá thông tin, có ph

T¿o bá cāc há tháng

KÁt nái c¢ sá dÿ liáu

Trang hiÅn thị chi tiÁt sÁn phẩm

HiÅn thị sÁn phẩm trên website

1.3.3 T¿o trang tìm kiÁm sÁn phẩm

1.4.1 Thụng tin mua hàng trong giò hàng

1.5 ThiÁt kÁ giao dián Web

Ch°Âng 2: QuÁn trò hò thòng bỏn hàng Thỏi gian: 30 giỏ

Māc tiêu: Cung cấp cho người học cách thiết kế trang quản trị hệ thống bán hàng

IV ĐiÁu kiòn thāc hiòn mụn hỏc:

1 Phòng học chuyên môn hóa/nhà x°áng: Phòng thāc hành máy tính

2 Trang thiÁt bị máy móc: Máy chiÁu Projector, màn chiÁu và các thiÁt bị trÿ giÁng khác

3 Học liáu, dāng cā, nguyên vÁt liáu:

- Giáo trình, đÃc°¢ng, giáo án, tài liáu tham khÁo;

V Nòi dung và ph°Âng phỏp, đỏnh giỏ:

+ Xây dāng bá cāc trang web với WordPress

+ QuÁn trị trang và thay đái nái dung website bán hàng

+ T¿o trang quÁn trị thay đái nái dung website bán hàng

- Năng lāc tā chÿ và trách nhiám: Rèn luyán tính sáng t¿o, óc thẩm mÿ trong công viác

STT Nòi dung Quy đònh

Ghi chú Hình th ứ c Tr ọ ng s ố

1 Trung bình chung kiÅm tra Tā luÁn/ trắc nghiám/ thāc hành 40% ≥ 5

2 ĐiÅm thi kÁt thúc môn học Tā luÁn/ trắc nghiám/ thāc hành 60%

VI H°òng dẫn thāc hiòn mụn hỏc:

1 Ph¿m vi áp dāng môn học: Xây dāng Website th°¢ng m¿i trong thāc tÁ

2 H°ớng d¿n vÃ ph°¢ng pháp giÁng d¿y, học tÁp môn học:

- Đái với giáo viên: Giáo viên d¿y môn Xây dāng website th°¢ng m¿i có b¿ng tát nghiáp Đ¿i học chuyên ngành Công nghá thông tin, có phẩm ch¿t đ¿o đāc tát, có ch°¢ng trình học phÁn, có bài giÁng chi tiÁt Chuẩn bị tát các tài liáu minh họa và áp dāng linh ho¿t các ph°¢ng pháp giÁng d¿y đÅ phát huy tính chÿ đáng, tích cāc cho ng°òi học Giỏo viờn cú thÅ sā dāng cỏc ph°Âng phỏp giÁng d¿y sau:

+ ThuyÁt trình, giÁng giÁi, phát v¿n;

+ Nêu v¿n đÃ, giao bài tÁp nhóm và bài tÁp thāc hành;

+ Tỏ chāc thÁo luÁn nhúm đÅ ng°òi học tā rỳt ra kÁt luÁn

- Đỏi với ng°òi học: Ng°òi học cú b¿ng tỏt nghiỏp THPT hoặc t°Âng đ°Âng, trong quỏ trỡnh học ng°òi học phÁi cú đÁy đÿ tài liỏu học tÁp đÅ phāc vā cho viỏc học tÁp trờn lớp và nghiờn cāu ỏ nhà Ng°òi học phÁi tham gia đÁy đÿ sỏ buỏi học theo quy định và thāc hián các bài tÁp thāc hành do giáo viên giao cho

3 Nhÿng trọng tâm cÁn chú ý:

[1] Bài giÁng Xõy dựng website thương mại, Khoa Tin học kinh tÁ, Tr°òng Cao đÁng Kinh tÁ - Kÿ thuÁt th°¢ng m¿i, năm 2017

[2] Đặng Ngọc Bình, Thiết kế Web siêu tốc, APPNET – Trung tâm Đào t¿o

Digital Marketing – Đ¿i học Bách Khoa TPHCM, năm 2015

- https://thachpham.com/category/web-development/html-css

CH¯ĂNG 1: XÂY DĀNG Hị THịNG BÁN HÀNG TRấN

Māc tiêu: Cung cấp cho người học cách thiết kế website bán hàng

Banner trong tiÁng Anh cú nghĩa là biÅu ngÿ, khẩu hiỏu chớnh trị, lỏ cò Trong lĩnh vāc truyÃn thông, khái niám banner dùng đÅ chỉ nhÿng t¿m bÁng có nhiÃu kích th°ớc khác nhau, đ°ÿc trình bày nhÿng nái dung liên quan tới sÁn phẩm, lo¿i hình dịch vā hay mát thông điáp tới khách hàng mà doanh nghiêp nhắm tới, nh¿m thu hỳt sā chỳ ý cÿa mọi ng°òi

Banner là mát d¿ng ¿n phẩm truyÃn thông quÁng cáo cho các sÁn phẩm, dịch vā, sā kián, hoặc truyÃn thông cho th°¢ng hiáu

Các lo ạ i banner quÁng cáo hián nay đ°ÿc dùng phá biÁn trong lo¿i hình online, đ°ÿc đăng tÁi trên các website mà n¢i ¿y có các đái t°ÿng tiÃm năng mà doanh nghiỏp mong muỏn h¿p d¿n ng°òi dựng truy cÁp tới thụng điỏp quÁng cỏo cÿa họ

Banner in ¿n là các biÅu ngÿ đ°ÿc thiÁt kÁ đặc biát, chāa văn bÁn, hình Ánh, màu sắc, thông điáp v.v… nh¿m māc đích quÁng cáo hoặc thông báo điÃu gì đó tới mọi ng°òi Banner in ¿n th°òng đ°ÿc thiÁt kÁ b¿ng mỏt sỏ phÁn mÃm trờn mỏy tớnh và in ¿n với ch¿t liáu cũng nh° công nghá in hián đ¿i ngày nay

Banner báo, t¿p chí là đ°ÿc thÅ hián d°ới d¿ng quÁng cáo trên các ¿n phẩm cÁm tay nh° t¿p chí, báo gi¿y

Kớch th°ớc cÿa banner bỏo phā thuỏc vào ng°òi dàn layout cÿa ¿n phẩm hoặc quy định cÿa tũa bỏo Thụng th°òng, cỏc lo¿i banner này s¿ cú bÃ rỏng b¿ng với chiÃu ngang c ÿ a m ặ t báo, t ¿ p chí

Kích th°ớc cÿa banner t¿p chí s¿ phā thuác vào kích th°ớc layout cÿa tòa so¿n và phong cách thiÁt kÁ banner

Banners được sử dụng phổ biến để thu hút sự chú ý của những người đi ngang qua Đối tượng nhìn thấy banner có thể bao gồm người đi xe máy, đi bộ, xe hơi hoặc các loại xe khác và thời gian nhìn thấy thông điệp chỉ kéo dài tối đa vài giây.

Vỡ th Á , banner c ÿ a b ¿ n ph Á i gõy ¿n t°ÿ ng ngay l Á p t ā c v ớ i n ỏ i dung d ò hi Å u và hình thāc bắt mắt, sinh đáng

Nh ÿng banner này th°òng đ°ÿc đặ t ỏ nÂi đụng ng°òi nh° ngó ba, ngó t° lớ n, qu Áng tr°òng … đÅ l ¿ y đ°ÿ c nhi Ã u s ā chỳ ý c ÿa ng°òi đi đ°ò ng

Banner online là nhÿng biÅn hiáu đ°ÿc đặt trên các website có l°ÿt truy cÁp lớn, t¿i cỏc bỏo điỏn tā hoặc cỏc trang web cú nhiÃu ng°òi truy cÁp Nhÿng khung hỡnh này th°òng cú kớch th°ớc khỏ bộ, giỏng nh° t¿m Ánh 4ì6 và chỳng cú thÅ là video, hình Ánh tĩnh, hình Ánh đáng

Māc đích cÿa viác sā dāng banner online là truyÃn tÁi thông điáp, ý nghĩa và nỏi dung cÿa sÁn phẩm, dịch vā mà doanh nghiỏp muỏn đem tới cho mọi ng°òi Th°òng là thu hỳt đÅ ng°òi dựng nhỡn th¿y và click vào đÅ đÁn mỏt trang đớch nào đó Hình thāc này đ°ÿc áp dāng r¿t phá biÁn hián nay, đem tới nhiÃu hiáu quÁ và lÿi ích cao

Tr°ớc khi tiÁn hành t¿o mát menu ngang trong HTML, b¿n cÁn thiÁt lÁp HTML mark-up b¿ng 1 liên kÁt di chuyÅn đÁn style sheet á ngoài (có d¿ng style.css) HTML này cũng đ°ÿc sā dāng đÅ t¿o kiÅu thiÁt kÁ cho menu

Cú pháp câu lánh t¿o HTML mark-up có d¿ng nh° sau:

An Horizontal Menu

B°ớc 2: TiÁn hành viÁt CSS cho Menu Division

Khi đã hoàn t¿t t¿o mát HTML mark-up, b¿n thāc hián tiÁp b°ớc viÁt code CSS cho Menu Divsion Lúc này, b¿n sā dāng đo¿n mã bên d°ới đÅ viÁt CSS

{ width: 900px; border: 1px solid #000; height: 100px; background-color: #181818; font-family: Helvetica, sans-serif; font-size: 13px; border-radius: 10px;

T¿i phÁn nái dung xác định t¿o menu ngang CSS, b¿n nhÁp các thông sá nh° sau:

- Kích th°ớc chiÃu ráng là 900px, chiÃu cao là 100px

- Màu nÃn: Chọn màu đen

- TiÁp đÁn, b¿n xác định font chÿ, kích th°ớc chÿ

- Sử dụng CSS3 border - radius để thiết lập một đường cong nhỏ cho menu

Bước 3: Thêm item vào menu Đối với tạo menu ngang trong HTML, bước này giúp bạn định danh từng item để người dùng truy cập website dễ dàng di chuyển, hoặc chọn lựa trang cần xem thông tin Để tạo menu item, bạn dùng đạn unordered tag list (là dạng thẻ danh sách không có thứ tự), và thêm đoạn code bên dưới vào giữa các menu division tag của phần nội dung của HTML document.

Trang chủ

Dịch vụ

Sản phẩm

Giới thiệu

Liên hệ

Trong mòi tag cÿa item s¿ cú mỏt anchor tag đúng vai trũ t¿o liờn kÁt à b°ớc này, t¿t cÁ các thuác tính hreft đÃu ch°a có giá trị (tāc là còn tráng) nên đo¿n code trờn b¿n sā dāng ký hiỏu # Cũn khi muỏn t¿o liờn kÁt thāc, b¿n xúa d¿u # ròi nhÁp địa chỉ URL cÿa trang web

B°ớc 4: T¿o kiÅu cho danh sách

Sau khi tạo menu ngang bằng mã HTML, bạn nên tùy chỉnh giao diện bằng mã CSS để tăng tính thẩm mỹ Ở bước 4, bạn sẽ tạo kiểu cho danh sách và liên kết để menu ngang trở nên bắt mắt và chuyên nghiệp hơn.

Khi các item đ°ÿc t¿o ra thì chúng s¿ hiÅn thị theo chiÃu dọc tÿ trên xuáng và đ°ÿc mặc định cú mỏt vũng trũn mò bao quanh Trong ph¿m vi bài viÁt này là t¿o menu trong HTML theo chiÃu ngang nên b¿n cÁn thay đái bá cāc mặc định, và xúa bullet ỏđÁu dũng ra khòi danh sỏch ĐÅ thāc hián viác này, b¿n sā dāng cú pháp câu lánh bên d°ới:

{ list-style-type: none; display: inline; margin-left: 50px;

- margin- top: 42px đóng vai trò trỏ đến danh sách item không thứ tự, đồng thời di chuyển danh sách một khoảng là 42px tính từ trên cùng

+ list-style- type: none thực hiện việc bỏ dấu bullet ở đầu dòng.

+ display: inline thực hiện nhiệm vụ thay đổi cách hiển thị của mỗi mục có trong danh sách, cụ thể là chuyển từ trạng thái dọc sang ngang.

+ margin- left: 50px thực hiện nhiệm vụ giãn cách các mục trong danh sách.

B°ớc 5: T¿o kiÅu cho các liên kÁt Đây là b°ớc cuái cùng cÿa quá trình t¿o menu ngang trong HTML

Lưu ý thẻ HTML nằm trong thẻ danh sách (

Unordered List > List item > Anchor / Link Tag=

Tiếp theo, bạn dùng cú pháp câu lệnh như sau:

6 color: #FFF; text-decoration: none; text-transform: uppercase; padding-top: 40px; padding-bottom: 40px; padding-left: 20px; padding-right: 20px;

{ color: #FFF; text-decoration: none; text-transform: uppercase;

-webkit-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);

-moz-box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93); box-shadow: 0px 4px 5px rgba(50, 50, 50, 0.93);

- #menu ul li a:link là sytle chung đ°ÿc áp dāng cho các liên kÁt có trong menu

- #FFF là màu cÿa liên kÁt Màu này là màu trắng mang đÁn sā trāc quan và giỳp ng°òi dựng dò đọc

- code text-decoration: none thāc hián viác xóa phÁn g¿ch chân mặc định cÿa các liên kÁt

- transform: uppercase đ°ÿc sā dāng đÅ t¿o chÿ viÁt in hoa

- padding: Đóng vai trò giúp xác định khu vāc đÅ click vào liên kÁt

Ngoài ra, b¿n có thÅ thêm background-color: red vào #menu ul li a:link đÅ th¿y rõ h¢n vai trò cÿa padding

KÁ đÁn, b¿n xóa phÁn background-color : red

- # menu ul li a:visited có tác dāng đÁm bÁo giÿ nguyên định d¿ng cÿa các liên kÁt sau khi đ°ÿc click vào

Xây dāng bÁng giao dịch

view: l°ÿt xem sÁn phẩm này

1.3.3 Xây d ự ng b ả ng giao d ị ch

– Đây là bÁng r¿t quan trọng và không thÅ thiÁu trong 1 website th°¢ng m¿i đián tā thanh toán trāc tuyÁn,bÁng này có chāc năng l°u thông tin cÿa toàn bá giao dịch trờn website Với bÁng giao dịch này chỳng ta cÁn l°u cỏc tr°òng thụng tin : id : khúa chớnh và tr°òng dÿ liỏu này mỡnh đÅ tā tăng status: l°u tr¿ng thái cÿa giao dịch,dāa vào tr¿ng thái này đÅ biÁt giao dịch đã thanh toán thành công ch°a,ví dā 1 là thành công,0 là ch°a thanh toán user_id: id cÿa thành viên mua hàng,nÁu khách không có tài khoÁn thì tr°¢ng này không cÁn l°u user_name: tên cÿa khách hàng user_email: email cÿa khách hàng user_phone: sá đián tho¿i cÿa khách hàng amount: táng sá tiÃn cÁn thanh toán,và đây chính là táng sá tiÃn chúng ta gāi sang bên cáng thanh toán payment: tên cáng thanh toán mà khách hàng chọn đÅ thanh toán payment_info: toàn bá thông trÁ vÃ tÿ bên cáng thanh toán gÿi cho chúng ta message: nái dung yêu cÁu cÿa khách hàng security: mã bÁo mÁt cho giao dịch,1 sá cáng thanh toán ta cÁn gāi mã bÁo mÁt created: thòi điÅm t¿o giao dịch,dāa vào tr°òng này mà chỳng ta hoàn toàn cú thÅ làm thỏng kờ cỏo cỏo doanh thu theo thòi gian

ThiÁt kÁ giao dián Web

Ch°Âng 2: QuÁn trò hò thòng bỏn hàng Thỏi gian: 30 giỏ

Māc tiêu: Cung cấp cho người học cách thiết kế trang quản trị hệ thống bán hàng

Menu

SÁn phẩm

QuÁn lý hóa đ¢n

Bá cāc

Thay đái banner