1. Trang chủ
  2. » Công Nghệ Thông Tin

giáo trình xây dựng phần mềm quản lý ngành công nghệ thông tin cao đẳng

71 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây dựng Phần mềm Quản lý
Tác giả Đỗ Thị Xuân Thắm
Trường học Trường Cao đẳng Xây dựng số 1
Chuyên ngành Công nghệ thông tin
Thể loại Giáo trình
Năm xuất bản 2021
Thành phố Hà Nội
Định dạng
Số trang 71
Dung lượng 1,07 MB

Nội dung

Vß trí, tính ch¿t cāa mô đun: - Vị trí: Xây dāng phÁn mÁm quÁn lý là mô đun cÁn thi¿t thuác nhóm các môn học, mô đun đào t¿o ngành Công nghá thông tin.. Vận dÿng ki¿n thăc phân tích thi

Trang 1

BÞ XÂY DĂNG TR¯àNG CAO ĐẲNG XÂY DĂNG SÞ 1

GIÁO TRÌNH

DþNG PHÀN MÀM

TRÌNH Đà: CAO ĐÀNG

Ban hành kèm theo Quyết định số: 368ĐT/QĐ-CĐXD1 ngày 10 tháng 8 năm

2021của Hiệu trưởng Trường Cao đẳng Xây dựng số 1

Hà Nßi, nm 2021

Trang 2

TUYÊN BÞ BÀN QUYÀN

Tài liáu này thuác lo¿i sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bÁn hoặc trích dùng cho các mÿc đích vÁ đào t¿o và tham khÁo

Mọi mÿc đích khác mang tính lách l¿c hoặc sử dÿng với mÿc đích kinh doanh thi¿u lành m¿nh sẽ bị nghiêm c¿m

Trang 3

LàI NÓI ĐÀU

Giáo trình XÂY DĀNG PHÀN MÀM QUÀN LÝ được biên so¿n nh¿m phÿc vÿ cho giÁng d¿y và học tập cho trình đá Trung c¿p ngành Công nghá Thông tin ăng dÿng phÁn mÁm ở trường Cao đÁng Xây dāng số 1 XÂY DĀNG PHÀN MÀM QUÀN LÝ là môn học cơ sở ngành nh¿m cung c¿p các ki¿n thăc vÁ công nghá thông tin, kỹ nng sử dÿng ngôn ngÿ lập trình đÁu tiên

Giáo trình XÂY DĀNG PHÀN MÀM QUÀN LÝ do bá môn Tin cơ sở gồm: ThS.Đß Thị Xuân Thắm làm chā biên Giáo trình này được vi¿t theo đÁ cương môn học Lập trình cn bÁn, tuân thā theo các quy tắc thống nh¿t Ngoài ra giáo trình còn bổ sung thêm mát số ki¿n thăc mà trong các giáo trình trước chưa đÁ cập tới

Nội dung gồm 2 chương sau:

Bài 1 Quy trình xây dăng phÁn mÁm quÁn lý Bài 2 Xây dăng giao dißn phÁn mÁm quÁn lý Bài 3 Xây dăng chăc nng cāa phÁn mÁm quÁn lý Bài 4 K¿t nßi c¢ sã dā lißu, giao dißn và kiểm thÿ ch°¢ng trình

Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường

Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khó tránh khỏi những thiếu sót Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp

Trân trọng cảm ơn!

Tham gia biên so¿n 1 ThS Đß Thị Xuân Thắm - Chā biên

Trang 4

1.5 Triển khai và bÁo trì 7

BÀI 2: XÂY DĀNG GIAO DIàN PHÀN MÀM QUÀN LÝ 9

2.4 Giao dián hiển thị dÿ liáu 18

2.4.1 Xem hóa đơn 18

2.4.2 Xóa hóa đơn 20

2.5 Bố cÿc 21

2.5.1 Thay đổi banner 21

2.5.2 Thay đổi Footer 23

2.5.3 Thay đổi quÁng cáo 24

3.5 Chăc nng Thống kê, báo cáo 61

4.1 K¿t nối cơ sở dÿ liáu 62

4.2 K¿t nối các giao dián 62

Trang 5

K¿t nối giao dián 634.3 Kiểm thử các chăc nng 63

Trang 6

CH¯¡NG TRÌNH MÔN HàC Tên mô đun: XÂY DĂNG PHÀN MÀM QUÀN LÝ Mã môđun: MH23

Thái gian thăc hißn mô đun: 90 giờ; (Lý thuy¿t: 30 giờ; Thāc hành, thí nghiám,

thÁo luận, bài tập: 56 giờ; Kiểm tra: 5giờ)

I Vß trí, tính ch¿t cāa mô đun:

- Vị trí: Xây dāng phÁn mÁm quÁn lý là mô đun cÁn thi¿t thuác nhóm các môn học, mô đun đào t¿o ngành Công nghá thông tin

- Tính ch¿t:Môn Xây dāng phÁn mÁm quÁn lý được ăng dÿng ráng rãi trong lĩnh vāc Công nghá thông tin, góp phÁn nâng cao ch¿t lượng đào t¿o nghÁ và phát triển nguồn nhân lāc trong giai đo¿n mới

II Mÿc tiêu mô đun:

- Ki¿n thăc: Hiểu quy trình xây dāng phÁn mÁm quÁn lý Vận dÿng ki¿n thăc phân tích thi¿t k¿ và ngôn ngÿ lập trình để xây dāng phÁn mÁm quÁn lý

- Kỹ nng: Xây dāng được phÁn mÁm quÁn lý cÿ thể -Nng lāc tā chā và trách nhiám: Tích cāc nghiên cău nhÿng ngôn ngÿ lập trình, nhÿng bài toán quÁn lý để xây dāng phÁn mÁm quÁn lý hiáu quÁ Rèn luyán ý thăc ch¿p hành kỷ luật lao đáng, phát huy tinh thÁn chā đáng nghiên cău, học hỏi, sáng t¿o trong học tập và làm viác

III Nßi dung mô đun:

Trang 7

1

BÀI 1 QUY TRÌNH XÂY DĂNG PHÀN MÀM QUÀN LÝ

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

1.1 Phân tích hß thßng

1.2 Thi¿t k¿ hß thßng

Trang 8

2

1.3 Lập trình máy tính

Trang 9

3 QuÁn lý thông tin cá nhân

QuÁn lý danh sách thành viên

Trang 10

4 QuÁn lý danh mÿc sÁn phẩm

Thi¿t k¿ mua hàng

Trang 11

5 Xử lý đơn hàng

1.4 Kiểm thÿ phÁn mÁm

Kiểm thử phÁn mÁm (software testing) là ho¿t đáng nh¿m tìm ki¿m và phát hián ra các lßi cāa phÁn mÁm, đÁm bÁo phÁn mÁm chính xác, đúng và đÁy đā theo yêu cÁu cāa khách hàng, yêu cÁu cāa sÁn phẩm đã đặt ra Software testing cũng cung c¿p mÿc tiêu, cái nhìn đác lập vÁ phÁn mÁm điÁu này cho phép đánh giá và hiểu rõ các rāi ro khi thāc thi phÁn mÁm Các phương pháp kiểm thử phÁn mÁm:

 Kiểm thử háp trắng (white box testing): Trong kiểm thử háp trắng c¿u trúc mã, thuật toán được đưa vào xem xét Người kiểm thử truy cập vào mã nguồn cāa chương trình để có thể kiểm tra nó

 Kiểm thử háp đen (black box testing) : Kiểm tra các chăc nng cāa há thống dāa trên bÁn đặc tÁ yêu cÁu

 Kiểm thử háp xám (gray box testing): Là sā k¿t hợp giÿa black box testing và white box testing

Kiểm thử phÁn mÁm đóng vai trò r¿t quan trọng :

Trang 12

6  Kiểm thử phÁn mÁm là ho¿t đáng đÁm bÁo ch¿t lượng phÁn mÁm và mang

tính sống còn trong các dā án sÁn xu¿t phÁn mÁm Vì vậy nó đã trở thành quy trình bắt buác trong các dā án phÁn mÁm hián nay

 Kiểm thử phÁn mÁm để tránh nhÿng rāi ro, lßi phát sinh trong suốt quá trình t¿o ra sÁn phẩm

 Lßi càng phát hián ra sớm càng giúp tránh được rāi ro và chi phí Mÿc đích cāa kiểm thử phÁn mÁm:

 Kiểm thử phÁn mÁm để đánh giá phÁn mÁm có đ¿t yêu cÁu mong đợi hay có sai sót nào không?

 PhÁn mÁm có làm viác như mong muốn không?  PhÁn mÁm có giÁi quy¿t được yêu cÁu cāa khách hàng không?Nó làm

được gì mà người dùng mong đợi?  Người dùng có thích nó không?  Nó có tương thích với các há thống khác cāa chúng ta hay không?  Quy trình kiểm thử phÁn mÁm xác định các giai đo¿n, pha trong Quy trình

kiểm thử phÁn mÁm

Quy

Phân tích yêu cÁu

Tài liáu SRS, tài liáu thi¿t k¿, bÁn prototype Đọc hiểu, nghiên cău phân tích các yêu cÁu có trong các bÁn tài liáu

Đưa ra các câu hỏi còn thắc mắc vÁ yêu cÁu phÁn mÁm với BA, team, leader, khách hàng để hiểu rõ hơn vÁ yêu cÁu sÁn phẩm

File Q & A

Lập k¿ ho¿ch Các tài liáu đã được cập nhật thông qua

file Q & A trong giai đo¿n phân tích yêu cÁu

Xác định ph¿m vi kiểm thử: thời gian, lịch trình cho các công viác Xác định phương pháp ti¿p cận Xác định nguồn lāc: con người và thi¿t bị

Lên k¿ ho¿ch thi¿t k¿ công viác test: các chăc nng cÁn kiểm thử, cái nào cÁn thāc hián trước, sau, ai là người thāc hián

Test plan, checklist

Thi¿t k¿ kiểm Test plan, checklist và các tài liáu đặc tÁ đã Review tài liáu: xác định công viác cÁn làm Test design, test case,

Trang 13

7

Quy

thử được cập nhật Vi¿t test case/checklist

Chuẩn bị dÿ liáu kiểm thử: test data, test script

Review test case/checklist: tránh rāi ro trong thi¿t k¿ test case

check list, test data, test automation script Chuẩn

bị môi trường

Test plan, smoke test case, test data Thāc thi các smoke test case để kiểm

tra môi trường kiểm thử đã sẵn sàng cho viác test chưa

Môi trường đã được chuẩn bị sẵn sàng cho viác test và các k¿t quÁ cāa smoke test case

Thāc hián kiểm thử

Test design, test case, check list, test data, test automation script

Thāc hián test theo kịch bÁn kiểm thử

So sánh k¿t quÁ thāc t¿ với mong đợi và log bug lên tool quÁn lý lßi, theo dõi quá trình xử lý lßi

Test results, defect reports

K¿t thúc T¿t cÁ các tài liáu

được tổng hợp từ giai đo¿n đÁu tiên

Tổng k¿t báo cáo k¿t quÁ vÁ viác thāc thi test, chăc nng nào hoàn thành/ chăc nng chưa hoàn thành, lßi còn nhiÁu ở chăc nng nào, dev nào còn nhiÁu lßi, lßi có nghiêm trọng hay không

Test report, test results final

1.5 Triển khai và bÁo trì Vùng phā sóng rßng và ổn đßnh:

ĐÁm bÁo tín hiáu Wifi phā sóng toàn bá khu vāc vn phòng, nhà xưởng, kho bãi,…

H¿n ch¿ tối đa tình tr¿ng nhißu sóng, m¿t k¿t nối hoặc tín hiáu y¿u Cung c¿p đường truyÁn internet tốc đá cao, đáp ăng nhu cÁu sử dÿng cāa nhiÁu người cùng lúc

Trang 14

8

KhÁ nng quÁn lý linh ho¿t:

Cho phép quÁn trị viên dß dàng c¿u hình, giám sát và quÁn lý há thống Wifi Theo dõi hiáu su¿t ho¿t đáng, thống kê lưu lượng truy cập, phát hián và khắc phÿc sā cố nhanh chóng

Hß trợ các tính nng nâng cao như giới h¿n bng thông, lọc nái dung, ưu tiên truy cập cho các ăng dÿng quan trọng

Trang 15

9

BÀI 2: XÂY DĂNG GIAO DIÞN PHÀN MÀM QUÀN LÝ

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 Nái dung chương:

2.1 Chán ngôn ngā lập trình 2.2 Xây dăng giao dißn cho phÁn mÁm

2.2.1 Giao diện đăng nhập Một số giao diện đăng nhập:

<! menu section ends ><section class="products" id="products">

<h1 class="heading"> our <span>products</span> </h1>

<div class="box-container">

<div class="box">

<div class="icons">

<a href="#" class="fas cart"></a>

<a href="#" class="fas fa-heart"></a>

<a href="#" class="fas fa-eye"></a>

</div>

<div class="image">

<img src="images/product-1.png" alt="">

</div>

<div class="content">

<h3>fresh coffee</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

</div>

<div class="price">$15.99

<span>$20.99</span></div>

</div>

Trang 16

10

</div>

<div class="box">

<div class="icons">

<a href="#" class="fas cart"></a>

<a href="#" class="fas fa-heart"></a>

<a href="#" class="fas fa-eye"></a>

</div>

<div class="image">

<img src="images/product-2.png" alt="">

</div>

<div class="content">

<h3>fresh coffee</h3>

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

<div class="box">

<div class="icons">

<a href="#" class="fas cart"></a>

<a href="#" class="fas fa-heart"></a>

<a href="#" class="fas fa-eye"></a>

</div>

<div class="image">

<img src="images/product-3.png" alt="">

</div>

<div class="content">

<h3>fresh coffee</h3>

Trang 17

11

<div class="stars">

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star"></i>

<i class="fas fa-star-half-alt"></i>

2.2.2 Giao diện chính

.about row{ display: flex; align-items: center; background:var( black); flex-wrap: wrap;

}

.about row image{ flex:1 1 45rem; }

.about row image img{ width: 100%;

}

.about row content{ flex:1 1 45rem; padding:2rem; }

.about row content h3{ font-size: 3rem; color:#fff;

Trang 18

12

}

.about row content p{ font-size: 1.6rem; color:#ccc;

padding:1rem 0; line-height: 1.8; }

.menu box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem,

1fr)); gap:1.5rem; }

.menu box-container box{ padding:5rem;

text-align: center; border:var( border); }

.menu box-container box img{ height: 10rem;

}

.menu box-container box h3{ color: #fff;

font-size: 2rem; padding:1rem 0; }

.menu box-container box price{ color: #fff;

font-size: 2.5rem; padding:.5rem 0; }

Trang 19

13 menu box-container box price span{ font-size: 1.5rem;

text-decoration: line-through; font-weight: lighter;

grid-template-columns: repeat(auto-fit, minmax(30rem,

1fr)); gap:1.5rem; }

.products box-container box{ text-align: center;

border:var( border); padding: 2rem;

}

.products box-container box icons a{ height: 5rem;

width: 5rem; line-height: 5rem; font-size: 2rem; border:var( border); color:#fff;

margin:.3rem; }

.products box-container box icons a:hover{

Trang 20

14

background:var( main-color); }

.products box-container box image{ padding: 2.5rem 0;

.products box-container box content stars{ padding: 1.5rem;

}

.products box-container box content stars i{ font-size: 1.7rem;

color: var( main-color); }

2.3 Giao dißn nhập dā lißu

2.3.1 Thêm sản phẩm

.header cart-items-container btn{ width: 100%;

text-align: center; }

.home{ min-height: 100vh; display: flex; align-items: center; background:url( /images/home-img.jpeg) no-repeat; background-size: cover;

Trang 21

15

background-position: center; }

.home content{ max-width: 60rem; }

.home content h3{ font-size: 6rem; text-transform: uppercase; color:#fff;

}

.home content p{ font-size: 2rem; font-weight: lighter; line-height: 1.8; padding:1rem 0; color:#eee; }

2.3.2 Xóa sản phẩm

2.3.3 Sửa sản phẩm

.header navbar a:hover{ color:var( main-color); border-bottom: 1rem solid var( main-color); padding-bottom: 5rem;

}

.header icons div{ color:#fff; cursor: pointer; font-size: 2.5rem; margin-left: 2rem; }

.header icons div:hover{

Trang 22

16

color:var( main-color); }

#menu-btn{ display: none; }

.header search-form{ position: absolute; top:115%; right: 7%; background: #fff; width: 50rem; height: 5rem; display: flex; align-items: center; transform: scaleY(0); transform-origin: top; }

.header search-form.active{ transform: scaleY(1); }

.header search-form input{ height: 100%;

width: 100%; font-size: 1.6rem; color:var( black); padding:1rem;

text-transform: none; }

.header search-form label{ cursor: pointer;

font-size: 2.2rem; margin-right: 1.5rem; color:var( black); }

Trang 23

17 header search-form label:hover{ color:var( main-color);

}

.header cart-items-container{ position: absolute;

top:100%; right: -100%; height: calc(100vh - 9.5rem); width: 35rem;

background: #fff; padding:0 1.5rem; }

.header cart-items-container.active{ right: 0;

}

.header cart-items-container cart-item{ position: relative;

margin:2rem 0; display: flex; align-items: center; gap:1.5rem;

.header cart-items-container cart-item fa-times:hover{ color:var( main-color);

}

Trang 24

18 header cart-items-container cart-item img{ height: 7rem;

}

.header cart-items-container cart-item content h3{ font-size: 2rem;

color:var( black); padding-bottom: 5rem; }

.header cart-items-container cart-item content price{ font-size: 1.5rem;

color:var( main-color); }

2.4 Giao dißn hiển thß dā lißu

2.4.1 Xem hóa đơn

html::-webkit-scrollbar{ width: 8rem;

}

html::-webkit-scrollbar-track{ background: transparent; }

html::-webkit-scrollbar-thumb{ background: #fff;

border-radius: 5rem; }

body{ background: var( bg); }

section{ padding:2rem 7%; }

Trang 25

19 heading{

text-align: center; color:#fff;

text-transform: uppercase; padding-bottom: 3.5rem; font-size: 4rem;

}

.heading span{ color:var( main-color); text-transform: uppercase; }

.btn{ margin-top: 1rem; display: inline-block; padding:.9rem 3rem; font-size: 1.7rem; color:#fff;

background: var( main-color); cursor: pointer;

}

.btn:hover{ letter-spacing: 2rem; }

.header{ background: var( bg); display: flex;

align-items: center; justify-content: space-between; padding:1.5rem 7%;

border-bottom: var( border); position: fixed;

top:0; left: 0; right: 0; z-index: 1000;

}

Trang 26

20 header logo img{

height: 6rem; }

.header navbar a{ margin:0 1rem; font-size: 1.6rem; color:#fff;

}

2.4.2 Xóa hóa đơn

@import

url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

:root{ main-color:#d3ad7f; black:#13131a;

bg:#010103; border:.1rem solid rgba(255,255,255,.3); }

*{ font-family: 'Roboto', sans-serif; margin:0; padding:0;

box-sizing: border-box; outline: none; border:none; text-decoration: none;

text-transform: capitalize; transition: 2s linear; }

html{ font-size: 62.5%; overflow-x: hidden; scroll-padding-top: 9rem; scroll-behavior: smooth;

Trang 27

21

}

2.5 Bß cÿc

2.5.1 Thay đổi banner

<section class="contact" id="contact">

<h1 class="heading"> <span>contact</span> us </h1>

<div class="row">

<iframe class="map"src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1629452077891!5m2!1sen!2sin" allowfullscreen=""

loading="lazy"></iframe>

<form action="">

<h3>get in touch</h3>

<div class="inputBox">

<span class="fas fa-user"></span>

<input type="text" placeholder="name">

</div>

<div class="inputBox">

<span class="fas fa-envelope"></span>

<input type="email" placeholder="email">

</div>

<div class="inputBox">

<span class="fas fa-phone"></span>

<input type="number" placeholder="number">

Trang 28

22 </section>

<! contact section ends ><! blogs section starts ><section class="blogs" id="blogs">

<h1 class="heading"> our <span>blogs</span> </h1>

<div class="box-container">

<div class="box">

<div class="image">

<img src="images/blog-1.jpeg" alt="">

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

</div>

</div>

<div class="box">

<div class="image">

<img src="images/blog-2.jpeg" alt="">

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

Trang 29

23

</div>

</div>

<div class="box">

<div class="image">

<img src="images/blog-3.jpeg" alt="">

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

</div>

</div>

</div></section>

2.5.2 Thay đổi Footer

<! footer section starts ><section class="footer">

<div class="share">

<a href="#" class="fab fa-facebook-f"></a>

<a href="#" class="fab fa-twitter"></a>

<a href="#" class="fab fa-instagram"></a>

<a href="#" class="fab fa-linkedin"></a>

<a href="#" class="fab fa-pinterest"></a>

</div>

<div class="links">

<a href="#">home</a>

<a href="#">about</a>

<a href="#">menu</a>

Trang 30

24

<a href="#">products</a>

<a href="#">review</a>

<a href="#">contact</a>

<a href="#">blogs</a>

</div>

<div class="credit">created by <span>mr web designer</span> | all rights reserved</div>

</section><! footer section ends >

2.5.3 Thay đổi quảng cáo

<! blogs section starts ><section class="blogs" id="blogs">

<h1 class="heading"> our <span>blogs</span> </h1>

<div class="box-container">

<div class="box">

<div class="image">

<img src="images/blog-1.jpeg" alt="">

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

</div>

</div>

<div class="box">

<div class="image">

<img src="images/blog-2.jpeg" alt="">

Trang 31

25

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

</div>

</div>

<div class="box">

<div class="image">

<img src="images/blog-3.jpeg" alt="">

</div>

<div class="content">

<a href="#" class="title">tasty and refreshing coffee</a>

<span>by admin / 21st may, 2021</span>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit Non, dicta.</p>

<a href="#" class="btn">read more</a>

</div>

</div>

</div></section><! blogs section ends >

Thăc hành:

Thi¿t k¿ web bán cà phê với giao dián như sau:

Trang 32

26

Trang 33

27

Trang 34

28

H°ßng dẫn: File HTML

<!DOCTYPE html>

Trang 35

29 <html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>complete responsive coffee shop website design</title>

<! font awesome cdn link >

<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<! custom css file link >

<link rel="stylesheet" href="css/style.css">

</head><body>

<! header section starts ><header class="header">

<a href="#" class="logo">

<img src="images/logo.png" alt="">

</a>

<nav class="navbar">

<a href="#home">home</a>

<a href="#about">about</a>

<a href="#menu">menu</a>

<a href="#products">products</a>

<a href="#review">review</a>

<a href="#contact">contact</a>

<a href="#blogs">blogs</a>

</nav>

Ngày đăng: 14/09/2024, 21:32