Báo Cáo Web Nâng Cao thiết kế Website Bán máy tính

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.33 MB, 67 trang )

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN
KHOA KHTN & CN

BÁO CÁO WEB
ĐỀ TÀI: WEBSITE BÁN MÁY TÍNH
Lớp:Công nghệ thông tin K12.
Giảng viên hướng dẫn: Th.S Nguyễn Thị Như.
Sinh viên thực hiện:

1. Phạm Thị Hồng Vân.
2. Trần Thái Sơn.
3. Hoàng Kim Gia Vượng.

Buôn Ma Thuột, tháng 6 năm 2015

1

TRƯỜNG ĐẠI HỌC TÂY NGUYÊN
BỘ MÔN TIN HỌC

BÁO CÁO WEB CƠ BẢN
THIẾT KẾ WEBSITE
ĐỀ TÀI: WEBSITE BÁN MÁY TÍNH VSV

GIẢNG VIÊN HƯỚNG DẪN

SINH VIÊN THỰC HIỆN

ThS. NGUYỄN THỊ NHƯ

NHÓM 3 – CNTT K12

2

Mục lục

3

Phần 1: Mở đầu
I. Đặt vấn đề:
1.1
Lý do nghiên cứu:
Ngày nay, khi công nghệ thông tin(CNTT) ngày càng phát triển, với việc
kinh doanh trên mạng ngày càng đa dạng. Việc thiết kế xây dựng trang web
giúp cho khách hàng có thể thoải mái tham khảo, lựa chọn và đặt hàng sản
phẩm mà không cần phải đến trực tiếp cửa hàng.
1.2
Mục đích nghiên cứu:
Phân tích thiết kế, xây dựng trang web bán máy tính.
Nghiên cứu này còn giúp bản thân em học tập thêm các kinh nghiệm về môn
web cơ bản, qua đó nâng cao kỹ năng lập trình, hỗ trợ và sau này phát triển
thêm.
1.3
Đối tượng:
Đối tượng sử dụng: Mọi khách hàng có nhu cầu mua máy tính.
Đối tượng nghiên cứu: Mô hình B2C.
1.4 Phương pháp nghiên cứu.
Phương pháp thu thập số liệu, hình ảnh.

1.5 Phạm vi nghiên cứu:
Trang Web được xây dựng phục vụ cho mục đích quảng cáo, giới thiệu sản
phẩm và bán hàng của chủ cửa hàng.
Người sử dụng Web có thể liên hệ tới chủ cửa hàng để hưởng các dịch vụ đi
kèm của sản phẩm đã mua qua hệ thống Website như bảo hành, đổi hàng lỗi.

Phần 2: Nội dung
Chương 1: Khảo sát, đánh giá hiện trạng
Khảo sát nhu cầu:
- Chủ cửa hàng: Quảng cáo, bán sản phẩm.
- Khách hàng: Tham khảo, lựa chon, so sánh và đặt hàng.
Yêu cầu đặt ra:

Yêu cầu phi chức năng:
-

Giao diện dễ sử dụng, dễ nhìn.
Chạy được trên 2 loại thiết bị: Laptop,Smartphone.
Có thể hỗ trợ tốt, đáp ứng mọi yêu cầu của người dùng.
4

Yêu cầu chức năng:
-

Trang chủ: Thành phần chính sẽ hiển thị một số sản phẩm mới nhất,

nổi bật nhất và bán chạy nhất cùng các tin tức của sản phẩm được lấy từ
trang tin tức trên website và danh mục phân loại sản phẩm.
Sản phẩm: sẽ được hiển thị đầy đủ thông tin về sản phẩm như: hình

ảnh, tên sản phẩm, thông tin chi tiết, giá, hãng sản xuất.
Chức năng giỏ hàng: khi tham khảo đầy đủ thông tin về sản phẩm
khách hàng có thể đặt hàng thông qua chức năng giỏ hàng mà không cần
đến địa điểm giao dịch, giỏ hàng có thể thêm bớt, thanh toán các sản phẩm
đã mua. Khi chọn thanh toán giỏ hàng khách hàng phải ghi đầy đủ thông tin
cá nhân.
Tìm kiếm:
Khi nhập từ khóa vào ô tìm kiếm hệ thống sẽ trả về yêu cầu với từ
khóa của khách hàng. Từ khóa sẽ được tìm trên website. Website cho
phép tìm kiếm một cách đa dạng, nhanh chóng, chính xác.

5

Chương 2: Phân tích thiết kế
2.1 Sơ đồ phân rã chức năng:

6

2.2 Sơ đồ ngữ cảnh:

Tác nhân ngoài ở đây là Khách hàng và Quản trị viên. Khách hàng gửi yêu cầu
vào hệ thống, các yêu cầu được xử lý và phản hồi lại.

7

2.3 Phác thảo giao diện:

8

2.4 Kế hoạch thực hiện Website
Thời gian Thời gian
STT
Tên công việc
dự kiến
bắt đầu
Tham khảo các
1
2 ngày
1/03/2015
website online
2
Thảo luận
1 ngày
4/03/2015
Phân tích thiết kế
hệ thống, tạo cơ
3
sở tiền đề cho
5 ngày
5/03/2015
thiết kế
Phác thảo các
4
4 ngày
11/03/2015
template

5
Báo cáo đề cương
4 ngày
17/03/2015
Thu thập và chỉnh
6
7 ngày
22/03/2015
sửa ảnh
Thiết kế cấu trúc
7
nội dung website 10 ngày
1/04/2015
8
Thiết kế giao diện 10 ngày
13/04/2015
Tiến hành code
9
10 ngày
24/04/2015
các page
Soạn thảo nội
10
dung đưa vào
10 ngày
5/05/2015
website
Lắp ráp hoàn
11
thành website cơ

5 ngày
16/05/2015
bản
12
Chạy thử
1 ngày
22/05/2015
Kiểm tra lỗi và
13
5 ngày
24/05/2015
sửa lỗi
Hoàn chỉnh
14
website
8 ngày
29/05/2015
15
Báo cáo toàn văn
08/06/2015

9

Thời gian hoàn
thành
3/03/2015
5/03/2015
10/03/2015
15/03/2015
21/03/2015

29/03/2015
10/04/2015
23/04/2015
04/05/2015
15/05/2015
21/05/2015
23/05/2015
29/05/2015
05/06/2015

Chương 3: Hình thành website
I.

Ý tưởng hình thành website:
Sau khi phân tích thiết kế hệ thống và tham khảo các website bán
máy tính Phong Vân thì nhóm em đã hình thành ý tưởng là Website bán máy
tính với tên cửa hàng là VSV.
Trang web được thiết kế trên lưới 960px, chia thành 12 cột
Bố cục trang web gồm 6 phần chính:
•
Phần 1 - Header: Bao gồm phần header-top(search, giỏ hàng ), logo,
banner, thanh nav.
•
Phần 2 – Slideshow: Bao gồm hình ảnh quảng cáo.
•
Phần 3 – Aside: Bao gồm danh mục, tìm kiếm, sản phẩm nổi bật.
•
Phần 4 – Artical( nội dung chính ): Là phần chứa nội dung chính,có
thể thay đổi của trang web.

•
Phần 5 – Aside-right: Chứa phần quảng cáo.
•
Phần 6 – Footer: Chứa phần liên hệ của web.

II.

Giao diện phát thảo:

1.1 Phần chung:
Website có 5 modules :
-

Modules header, left, right, footer .
Modules content: Là phần chứa nhưngx nội dung thay đổi của trang web.

1.2 Giao diện phác thảo Trang chủ
Giao diện phác thảo TRANG CHỦ

10

11

1.3 Giao diện template quản trị viên

.

12

1.4 Sơ đồ DOM

II.

PHÂN CHIA CÔNG VIỆC
II.1. Công việc chung :
Nêu ý tưởng thiết kế trang web.
-

Phối màu cho trang web .

-

Thiết kế các định dạng chung.
13

II.2. Công việc riêng :
-Thiết kế template “Trang chủ”, trang chi tiết sản phẩm, trang giỏ hàng, trang
các sản phẩm, trang chi tiết giỏ hàng, trang đăng nhập, trang đăng ký,
trang liên hệ, trang bảo hành, trang hướng dẫn mua hàng kế thừa từ
template “Trang chủ”: Trần Thái Sơn, Phạm Thị Hồng Vân.
-Thiết

kế template “admin”, các Page kế thừa từ template “adim” và các
trang đăng kí, liên hệ, trang chính sách bảo mật, trang giới thệu, trang
chính sách bảo hành, trang hướng dẫn mua hàng kế thừa từ template “
trang chủ”: Hoàng Kim Gia Vượng.

III.

XÂY DỰNG QUY CÁCH CHUNG CHO WEBSITE
III.1. Thiết kế chung
Website có 2 template tổng quát(Trang chủ, Admin) mỗi template sẽ
được xây dựng thành một file template mẫu bằng Dreamweaver, các Page sẽ
lấy nền từ các file Template chung này
III.2. Xây dựng nội dung cho Website
Nội dung của Website được xây dựng dựa trên phần Phân tích chức
năng và Phân tích yêu cầu của người sử dụng (Trong phần Phân tích thiết kế
hệ thống - chung của nhóm).
III.3. Quy tắc xây dựng code
- Sắp xếp các thẻ một cách logic, code phân cấp, không xô lệch. Đặt tên có
ý nghĩa cho id và class.
- Sử dụng CSS để định dạng và trang trí cho Website
- Tổ chức CSS có hệ thống, sắp xếp thuộc tính CSS theo quy định sẵn.
- Sử dụng tính kế thừa trong CSS.
- Website hiển thị nội dung từ trái sang phải trên xuống, giúp người dùng
dễ dàng nắm được nội dung truyền tải.
III.4. Định dạng các thành phần HTML chung
Nội dung của Website được định dạng hoàn toàn bởi file CSS bên ngoài.
Các thành phần cần định dạng được chia thành các class và id, nội dung
định dạng các id và class này nằm ở file CSS chung cho Website và file
CSS phần định dạng Responsives

IV.

CHI TIẾT PHẦN ĐỊNH DẠNG CHUNG:


Các thành phần tổng quát của Website: Header, Nav, Aside, Section,
Article, Footer.
14



V.

Các vị trí đó trong bản thiết kế được áp dụng bởi các Selector CSS cùng
tên.

BÁO CÁO CÁ NHÂN
V.1. Phạm Thị Hồng Vân.
5.1.1 Template trang chủ
 Phần Header:

header{
width:99%;
min-height:200px;
height:auto;
background:url(../IMAGES/image007.png);
margin-top:10px;
margin-left:5px;
}

 Header-top(Tìm kiếm | Giỏ hàng)

Ghi nội dung cần tìm

kiếm

<div class="header-top">
<div class="tk">
<form id="search" method="post" action="#">
<input type="text" name="id" id="id" placeholder="Tìm kiếm..." />

style="cursor:pointer;" onclick=
"#"/>
</form>
</div>
</div>

15

 Header-Logo:
<div class="header-logo">
<img src="../IMAGES/sanpham/logo copy.png"/>
</div>

 Header-banner

<div class="header-banner">
<img src="../IMAGES/sanpham/banner11.png" />
</div>

 Nav:
<nav>
<div class="nav-menu">

</a></div>
<ul>
<li><a href="?xem=sanpham" >Trang chủ</a></li>
<li><a href="?xem=gioithieu">Giới Thiệu</a></li>
<li class="cap2"><a href="#SanPham">Sản Phẩm</a>
<ul class="capcon">
<li><a href="HTML/Laptop.html">››Laptop</a>
<li><a href="#">››CHUỘT</a></li>
<li><a href="#">››BÀN PHÍM</a></li>
<li><a href="#">››THIẾT BỊ MẠNG</a></li>
<li><a href="#">››RAM LAPTOP</a></li>
<li><a href="#">››HDD(ổ cứng)</a></li>
<li><a href="#">››SPEAKER(Loa)</a></li>
</ul>
</li>
<li><a href="?xem=baohanh">Bảo Hành</a></li>
<li><a href="?xem=hdanmuahang">Hướng dẫn</a></li>
<li><a href="HTML/LienHe.html">Liên hệ</a></li>
<li class="cap2"><a href="#">Thành Viên</a>
<ul class="capcon">
16

<li class="dangnhap"><a href="?xem=login">Đăng Nhập</a></li>
<li><a href="?xem=dangky">Đăng Ký</a></li>
</ul>
</li>
</ul>
</div>
</nav>

 Giỏ hàng
<div class="icon">
<a href="?xem=giohang"><img src="IMAGES/icon_cart.png"/></a>
$prd=0;
if(isset($_SESSION['cart'])){
$prd=count($_SESSION['cart']);
}
?>
<span class="money">
<?php echo $prd; ?> </span> sản phẩm </div>

 Đăng nhập:

<div id="register">
<div class="hea"><a href="../index.html">Trang chủ</a>
›› Đăng nhập</div>

Login

</fieldset>
</form>
17

/>

if(isset($_POST['dangnhap'])){
$username = addslashes( $_POST['tendangnhap'] );
$password = md5( addslashes( $_POST['matkhau'] ) );
$sql="select id_user,username,matkhau from user where username='$username' ";
//ktra có tkhoan trong csdl chua
$sql_query= @mysql_query($sql);
$member = @mysql_fetch_array($sql_query);
//ktra xem no co ton tai hay khong
if(@mysql_num_rows($sql_query)<=0){
echo "Username này dã có nguời dùng, Bạn vui lòng chọn username khác.";
echo "
";
echo "<a href='javascript:history.go(-1)'>Nhấp vào dây dể quay trở lại</a>";
}
//ktra mat khau
if($password != $member['matkhau']){
echo "Nhập sai mật khẩu";
echo "
";
echo "<a href='javascript:history.go(-1)'>Nhấp vào dây dể quay trở lại</a>";
}
//$_SESSION['user_id'] = $member['id_use'];
//$_SESSION['user_ten'] = $member['username'];

else{
$_SESSION['dangnhap']=$username;
echo '<script>window.location="index.php?xem=sanpham"</script>';
}

}
?>

18

 Slider

<div class="slider-images">
<img src="../IMAGES/Dell-Vostro-2420-Banner-03.jpg" style="display:block;" />
<img src="../IMAGES/2015_1.jpg" style="display:none; "/>
<img src="../IMAGES/hp14.jpg" style="display:none;" />
<img src="../IMAGES/philips-246v5lsb.jpg" style="display:none;"/>
</div>

19

 sanpham :

article{

}

20

 aside-right:
<div class="aside-right">

Quảng cáo

Bộ vệ sinh lap top

59 000

</div>
</div>
<div class="section-qc">
<div class="qcmid">

</div>
<div class="qcnews">

Combo chăm sóc và bảo vệ
laptop

359 000

</div>
</div>
<div class="section-qc">
<div class="qcmid">
<img src="../IMAGES/1339670659.gif"/>
</div>
<div class="qcnews">

Quạt có đế làm mát

190 000

</div>

</div>
<div class="section-qc">
<div class="qcmid">
<img src="../IMAGES/bo_lau_chui_loptop_01.jpg"/>
</div>
<div class="qcnews">Bộ vệ sinh lap top</div>
</div>
<div class="section-qc">
<div class="qcmid">
<img src="../IMAGES/bo_lau_chui_loptop_01.jpg"/>
</div>
<div class="qcnews">Bộ vệ sinh lap top</div>
</div>
</div>

 Footer

21

 Footer-5

<div class="foot5">
<a href="#">

Trang chủ

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

Giới thiệu

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

Sản phẩm

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

Tin tức

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

Bảo hành

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

Thành viên

</a>
</div>

5.1.2 Responsive của các loại màn hình
 Màn hình nhỏ hơn 1400px
@media screen and (max-width: 1400px) {
#wrapper{
width:960px;
}
}

 Màn dình nhỏ hơn 768
@media screen and (max-width:768px){
.wrapper{
width:100%;
}
aside{
width:25.021277%;
}
22

.aside-right{
display:none;
}
article{
width:73.2787234%;
}
.icon{width:28.10638298%;
}
.tk{ width:33.53191489%;
}

.foot1{
display:none;
}
.foot5{
width: 98%;
}
.foot2{
width: 55%;
}
.iconf{
width:23.1%;
}
.foot4{
width: 35%;
}
.foot3{
width: 35%;
}
.slider-images{
display:none;
}
.nav-menu>ul>li{
background-color:rgba(255,0,0,0.5);
}
.nav-menu>ul>li{
width:95%;
z-index:9999;
}
.nav-menu>ul{
display:none;

width:50%;
}
.nav-menu>ul>li>ul{
display:none;
width:100%;
}
.nav-menu #show{
width:90%;
display:block;
23

}
.nav-menu>ul>li>ul>li{
background-color: rgb(0,153,1);
}
.nav-menu>ul>li:hover ul{
display:none;
z-index:99999999;
position:relative;
}
}

 Màn dình nhỏ hơn 600px
@media screen and (max-width:600px){
.wrapper{
width:100%;
}
aside{
display:none;

}
article{
width:99%;
}
.icon{
width:33%;
}
.tk{
width:40%;
}
}

 Màn dình nhỏ hơn 560px
@media screen and (max-width: 560px){
#wrapper{
width:100%;
}
section #content{
width:98.5%;
margin-right:0px;
}
section .sanpham{
width:31%;/*196.666667px*/
24

}
header #center_header #logo{
width:80px;
height:70px;

}
header #center_header #form_timkiem{
margin-left:8.04%;
}
footer #left_footer,footer #right_footer{
width:99%;
}
#noidungthongtin table td{
width:49.0%;
}
}

 Màn dình nhỏ hơn 480px
@media screen and (max-width:480px){
.wrapper{
width:100%;
}
article{
width:99%;
}
.section-sp{
width:47.5%;
}
.icon{
width:80%;
}
.tk{
margin-top:5px;
width:95%;
float:left;

}
.header-top{
width:55%;
height:100%;
margin-top:40px;
}
header{
width:98.4%;
}
.header-banner{
display:none;
}
25