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 1BÞ 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 2TUYÊ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 3Là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 41.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 5K¿t nối giao dián 634.3 Kiểm thử các chăc nng 63
Trang 6CH¯¡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 71
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 82
1.3 Lập trình máy tính
Trang 93 QuÁn lý thông tin cá nhân
QuÁn lý danh sách thành viên
Trang 104 QuÁn lý danh mÿc sÁn phẩm
Thi¿t k¿ mua hàng
Trang 115 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 126 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 137
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 148
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 159
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 1610
</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 1711
<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 1812
}
.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 1913 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 2014
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 2115
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 2216
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 2317 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 2418 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 2519 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 2620 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 2721
}
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 2822 </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 2923
</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 3024
<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 3125
</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 3226
Trang 3327
Trang 3428
H°ßng dẫn: File HTML
<!DOCTYPE html>
Trang 3529 <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>