17 trang 5 lượt tải

Báo Cáo Dự Án Website Chăm Sóc Thú Cưng | Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Dự án làm web chăm sóc thú cưng là một trang web được thiết kế để cung cấp thông tin và hỗ trợ cho các chủ nuôi thú cưng. Trang web này có thể cung cấp các thông tin về chăm sóc thú cưng, bao gồm dinh dưỡng, y tế, giáo dục và các hoạt động giải trí cho thú cưng. Tài liệu được sưu tầm gồm 17 trang, giúp bạn ôn tập tốt hơn. Mời các bạn đón xem.

Môn: Công Nghệ Thông Tin (CN01) 10 tài liệu

Trường: Trường Cao đẳng Công nghệ Tây Nguyên 34 tài liệu

Tác giả:

Linh Giang

2 tuần trước

Danh sách Quiz

lOMoARcPSD| 58702377

MỤC LỤC

1 Giới thiệu dự án...............................................................................................2

1.1 Mở đầu......................................................................................................2

1.2 Mô tả chức năng........................................................................................2

2 Hệ thống Website............................................................................................2

2.1 Miêu tả Website bán đồ ăn.........................................................................2

2.2 Công cụ thiết kế........................................................................................3

2.3 Phương pháp thực hiện.............................................................................3

3 Hình ảnh website Dịch Vụ Chăm Sóc Thú Cưng()............................................4

3.1 Giao diện trang chủ...................................................................................4

3.2 Giao diện thú cưng....................................................................................7

3.3 Giao diện chi ết thú cưng........................................................................9

3.4 Giao diện n tức......................................................................................10

3.5 Giao diện dịch vụ....................................................................................11

lOMoARcPSD| 58702377

GIỚI THIỆU SƠ LƯỢC VỀ WEBSITE

1 Giới thiệu dự án

1.1 Mở đầu

Dự án làm web chăm sóc thú cưng là một trang web được thiết kế để cung cấp

thông n và hỗ trợ cho các chủ nuôi thú cưng. Trang web này có thể cung cấp

các thông n về chăm sóc thú cưng, bao gồm dinh dưỡng, y tế, giáo dục và các

hoạt động giải trí cho thú cưng.

Ngoài ra, trang web cũng có thể cung cấp các dịch vụ chăm sóc thú cưng như

đặt lịch khám, chăm sóc sức khỏe, tắm rửa và cắt tỉa lông cho thú cưng. Các

chủ nuôi thú cưng cũng có thể m kiếm và đặt hàng các sản phẩm cần thiết cho

thú cưng như thức ăn, đồ chơi và phụ kiện khác.

Để thiết kế và phát triển một trang web chăm sóc thú cưng hiệu quả, bạn cần

phải có kinh nghiệm trong lĩnh vực thiết kế web, hiểu biết về chăm sóc thú

cưng, và có khả năng tương tác với khách hàng.

1.2 Mô tả chức năng

- Trang giới thiệu được thiết kế rõ ràng, bắt mắt thể hiện đầy đủ thông n

liên hệ của Shop đến khách hàng

- Cung cấp cho khách hàng những thông về các dịch vụ

- Có n tức để tham khảo những căn bệnh của thú cưng

2 Hệ thống Website

2.1 Miêu tả Website bán đồ ăn

ST Thành phần trang Mô tả chức năng

lOMoARcPSD| 58702377

2.2 Công cụ thiết kế

- Ngôn ngữ lập trình: HTML,CSS. PHP

- Ứng dụng lập trình: visual studio code,

- Chương trình tạo máy chủ web: Xampp

- Kỹ thuật : AJAX

lOMoARcPSD| 58702377

2.3 Phương pháp thực hiện

- Sự dụng phương pháp External CSS là để thêm Style CSS vào website

của mình bằng cách liên kết với một le .css từ bên ngoài. Bằng cách này

bất kỳ thay đổi nào ở le .css sẽ thay đổi trên website của mình. Các để

thực hiện là đặt link CSS trong mục <head> của trang

- Sử dụng phương pháp include , được sử dụng để chèn một le PHP vào

trong một le PHP khác. Vì sao lại sử dụng phương pháp này, vì nó đem

lại cho ta một giao diện code dễ đọc tối ưu và tránh sự trùng lặp ở nhiều

trang, khi sử dụng phương pháp này ta chỉ việc chỉnh sửa ở le include

mọi trang còn lại cũng sẽ được chỉnh sửa theo ết kiệm thời gian cho

người lập trình.

lOMoARcPSD| 58702377

3 Hình ảnh website Dịch Vụ Chăm Sóc Thú Cưng()

Ở giao diên trang chủ bán đồ ăn được thiết kế để giới thiệu về

shop

Header (Tiêu đề): Đây là phần trên cùng của trang chứa logo,

tên của trang web và các menu điều hướng để người dùng có

thể dễ dàng điều hướng đến các phần hoặc các trang khác nhau

của trang web.

3.1.1 Code Trang Chủ

</div>

lOMoARcPSD| 58702377

</div>

<ul>

<li class="nav-item"><a class="nav-item"

href="index.php">Trang ch </ủ a></li>

<li class="nav-item"><a class="nav-item" href="?

i=thucung">Thú C ng</ưa></li>

<li class="nav-item"><a class="nav-item" href="?

i=tintuc">Tin T c</ứa></li>

<li class="nav-item"><a class="nav-item" href="?

i=dichvu">Dch V </ị ụ a></li>

</ul>

</nav> </div>

</div>

</header>

<body>

<?php

$view="gioithieu.php";

if(isset($_GET['i'])){

$view=$_GET['i']; include

$view.'.php';

} else{

include $view; }?>

</div>

lOMoARcPSD| 58702377

</div>

</section>

</div>

<h6>Thông Tin Liên H </ệ h6>

<label>Email: petcom@gmail.com</label><br>

</div>

<p>30/2/1/4/7/2 Lê Du n TP.BMT Tnh DakLak</ẩ ỉ p>

</div>

</footer>

</body>

Giải thích :

Phần header bao gồm một hàng chứa hai phần: logo và banner quảng cáo.

Phần logo chứa một hình ảnh và một êu đề. Phần banner quảng cáo có một

hình ảnh và không có êu đề. Phần header cũng bao gồm một hàng chứa thanh

điều hướng với bốn mục: "Trang chủ", "Thú Cưng", "Tin Tức" và "Dịch Vụ".

Phần body bao gồm một secon có class "container-uid" và một div có class

"content". Div "content" chứa một đoạn mã PHP dùng để quyết định hiển thị

trang nào dựa trên tham số URL. Nếu tham số được truyền vào, trang tương

ứng sẽ được hiển thị, nếu không, trang giới thiệu "gioithieu.php" sẽ được hiển

thị.

Phần footer bao gồmmột hàng với ba cột chứa thông n liên hệ. Cột đầu ên

có chiều rộng 2/12 và chứa thông báo bản quyền. Các cột còn lại chứa thông

n liên hệ với địa chỉ email, số điện thoại và địa chỉ của trang web.

lOMoARcPSD| 58702377

3.2 Giao diện thú cưng

Ở giao diện thú cưng là một giao diện mà web sẽ cung cấp đến

người dùng những thông n chi ết về một con vật đó.

Hình ảnh thú cưng: Trang thú sẽ hiển thị hình ảnh của sản phẩm

để người dùng có thể nhìn thấy ngoại hình

Tiêu đề: Tiêu đề sản phẩm mô tả tên con vật đó

3.2.1 Code Giao diện Thú cưng

<imgx

src="https://encrypted-tbn3.gstatic.com/images?

q=tbn:ANd9GcRbDXmLMZ1xnRDdAiY5jcIR4sXAWjNNAV5OGxtLS3gDP_H9MXtO">

lOMoARcPSD| 58702377

</a>

</div>

<img src="https://th.bing.com/th/id/OIP.-

7kTcogr_Eb6Ri29qSfaQAAAA?w=253&h=180&c=7&r=0&o=5&pid=1.7">

</a>

</div>

<img

src="https://th.bing.com/th/id/OIP.J5LqY8ggNF_iyAn222ORvAHaHa?

w=149&h=180&c=7&r=0&o=5&pid=1.7">

</a>

</div>

<img src="https://th.bing.com/th/id/OIP.vrEESvuqJbGmtO-

CC_X1rwHaEK?w=294&h=180&c=7&r=0&o=5&pid=1.7">

</a>

</div>

Giải Thích Code:

Đoạn code này bao gồm một div có class "container", một div có class "row" và

bốn div con, mỗi div con đại diện cho một sản phẩm.

Mỗi div sản phẩm có class "col-sm-12 col-lg-3 dv". Class này có nghĩa là vào

màn hình nhỏ (độ rộng < 768px), các cột sẽ chiếm toàn bộ màn hình, và vào

màn hình lớn (độ rộng >= 992px), các cột sẽ chiếm 1/4 của màn hình. Các div

sản phẩm này chứa một div con với class "" chứa một hình ảnh đại diện cho

sản phẩm và một êu đề với tên sản phẩm. Để chuyển đến trang sản phẩm

lOMoARcPSD| 58702377

tương ứng, mỗi div sản phẩm cũng có một thẻ a với thuộc nh href dựa trên

tham số URL.

3.3 Giao diện chi ết thú cưng

Trang chi ết sản phẩm là trang giao diện người dùng được

cung cấp thông n chi ết về thú cưng cụ thể.

3.3.1 Code Trang chi tiết thú cưng

</div>

<img src=" https://encrypted-tbn3.gstatic.com/images?

q=tbn:ANd9GcRbDXmLMZ1xnRDdAiY5jcIR4sXAWjNNAV5OGxtLS3gDP_H9MXtO ">

</div>

<div class="col-sm-12 col-lg-8"> N iộ dung Chi ti t c a Thú c

ngế ủ ư

</div>

lOMoARcPSD| 58702377

Giải Thích:

Đoạn mã này bao gồm một div có class "container", một div có class "row" và

hai div con.

Div đầu ên chứa êu đề sản phẩm với class "td".

Div thứ hai chứa nội dung chi ết của sản phẩm. Div này chia làm hai cột, một

cột với class "col-sm-12 col-lg-4" chứa hình ảnh đại diện cho sản phẩm và một

cột với class "col-sm-12 collg-8" chứa nội dung chi ết của sản phẩm.

3.4 Giao diện n tức

Giao diện trang n tức là sẽ hiển thị những n tức các loại bệnh

mà các thú cưng khác đang gặp phải

3.4.1 Code Trang tin tức

Đoạn mã này bao gồm một div có class "container", một div có class "row" và

hai div con.

Mỗi div con đại diện cho một bài viết n tức với class "". Mỗi div này chia làm

hai cột, một cột với class "col-lg-12 col-sm-12" chứa một hình ảnh đại diện cho

n tức và một cột với class "col-lg-12 col-sm-12" chứa êu đề và mô tả ngắn về

n tức.

lOMoARcPSD| 58702377

Mỗi div n tức chứa một thẻ img với class "ig" để hiển thị hình ảnh đại diện

cho n tức và một div con chứa êu đề n tức và mô tả ngắn về n tức.

Mã nguồn này có thể được sử dụng để hiển thị các bài n tức mới nhất hoặc

các bài viết quan trọng trên trang web.

3.5 Giao diện dịch vụ

Giao diện web dịch vụ sẽ hiển thị những dịch vụ của shop

3.5.1 Code Trang dịch vụ

Mỗi div con đại diện cho một dịch vụ với class "col-lg-6". Mỗi div này chứa một

bảng với một hình ảnh đại diện cho dịch vụ và mô tả ngắn về dịch vụ.

Mỗi bảng chứa một thẻ img với class "igdv" để hiển thị hình ảnh đại diện cho

dịch vụ và một bảng con chứa mô tả ngắn về dịch vụ.

Mã nguồn này có thể được sử dụng để hiển thị các dịch vụ cung cấp cho chó

mèo trên trang web.

lOMoARcPSD| 58702377

3.6Css

header ul{

display: flex;

} header ul

li{

padding-left: 120px;

/* padding-right: 120px; */

font-size: 23px; list-

style-type:none; margin-

top: 5px; font-weight:

600;

}

a{ text-

decoration:none;

color:black;

} a:hover{ color: rgb(236,

175, 255);

} ul{

display:flex;

} .content{

width: 100%;

height: 100%;

} div.logo{

display:flex;

lOMoARcPSD| 58702377

} .Nweb{ margin-

top: 20px;

} .qc{ width: 800px;

height: 89px; background-

repeat:no-repeat ;

background-size: cover;

} th{ font-size:

34px; text-align:

center;

} td img{ padding-

left:20px;

width:200px;

height:230px;

} .menu{

background:#93badd; } /* .tt{

border: 2px solid #ebe6e67d;

}

.tt:hover{ border: 2px

solid #05d9ff7d

} */

.col-lg-3.dv img{

display: block;

width: 100%;

height: 210px;

}

.col-lg-3.dv h3{ margin-

left:39%;

} .nd{ padding-left:10px; width:800px; font-family:

'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight:

500;

} main{

display:flex;

/* border:2px solid black;

*/ width: 100%; height:

500px;

lOMoARcPSD| 58702377

} .row.td{ text-align:

center; } .tc{

height:75px; background-

color: #f5f5f5;

} .igdv{

width:220px;

height:170px;

} div.tt{

display: flex;

} td{ font-

weight: 500;

} section{ padding-

bottom: 50px;

}

footer{

display:block;

}

@media only screen and (max-width: 990px) {

.tt{

width: 350px;

} header

ul li{

padding-left: 50px;

/* padding-right: 120px; */

font-size: 13px; list-style-

type:none; margin-top: 5px;

font-weight: 600;

}

/* div.tt{

font-size: 20px;

width: 100px;

height: 100px; } */

.Nweb{

display:none;

}

lOMoARcPSD| 58702377

Ý KIẾN CỦA NGƯỜI HƯỚNG DẪN

Nhận xét:

……………………………………………………………………………………………………

……………………………………………………………………………………………………………

……………………………………………

……………………………………………………………………………………………………………

…………………………

………….., ngày … tháng … năm ……

NGƯỜI HƯỚNG DẪN

(Ký và ghi rõ tên )

Bấm Tải xuống để xem toàn bộ.

Preview text:

<?php $view="gioithieu.php"; if(isset($_GET['i'])){ $view=$_GET['i']; include $view.'.php'; } else{ include $view; }?> lOMoAR cPSD| 58702377
© Pet.com T t c các quy n đ c b o l uấ ả ề ượ ả ư
Thông Tin Liên H ệ h6> Email: petcom@gmail.com +84 942321493 Đa Chịỉ h6>

30/2/1/4/7/2 Lê Du n TP.BMT Tnh DakLakẩ ỉ p>

Báo Cáo Dự Án Website Chăm Sóc Thú Cưng | Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Tài liệu liên quan:

Chuyển trang androi | Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Lắp Ráp, Cài Đặt và Bảo Trì Máy Tính | Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Xây Dựng Website Bán Cây Cảnh | Đồ án Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Xây dựng Website Bán Mỹ Phẩm | Đồ án Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên

Báo cáo Dự án Web Bán Đồng Hồ với Java Servlet | Môn Công Nghệ Thông Tin - Trường Cao đẳng Công nghệ Tây Nguyên