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

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 3: Hình thành

Trang 1

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.

Trang 2

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

Trang 3

M c l c ục lục ục lục

Phần 1: Mở đầu 6

I Đặt vấn đề: 6

1.1 Lý do nghiên cứu: 6

1.2 Mục đích nghiên cứu: 6

1.3 Đối tượng: 6

1.4 Phương pháp nghiên cứu 6

1.5 Phạm vi nghiên cứu: 6

Phần 2: Nội dung 6

Chương 1: Khảo sát, đánh giá hiện trạng 6

Khảo sát nhu cầu: 6

Yêu cầu đặt ra: 6

Chương 2: Phân tích thiết kế 8

2.1 Sơ đồ phân rã chức năng: 8

2.2 Sơ đồ ngữ cảnh: 9

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

2.4 Kế hoạch thực hiện Website 11

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

I.Ý t ưởng hình thành website: ng hình thành website: 12

II.Giao di n phát th o: ện phát thảo: ảo: 12

1.1 Phần chung: 12

1.2 Giao diện phác thảo Trang chủ 12

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

1.4 Sơ đồ DOM 15

II.PHÂN CHIA CÔNG VIỆC 15

2.1 Công việc chung : 15

2.2 Công việc riêng : 16

III.XÂY DỰNG QUY CÁCH CHUNG CHO WEBSITE 16

3.1 Thiết kế chung 16

3.2 Xây dựng nội dung cho Website 16

3.3 Quy tắc xây dựng code 16

3.4 Định dạng các thành phần HTML chung 16

IV.CHI TIẾT PHẦN ĐỊNH DẠNG CHUNG: 16

V.BÁO CÁO CÁ NHÂN 19

5.1 Phạm Thị Hồng Vân 19

Trang 4

5.1.1 Template trang chủ 19

 Phần Header: 19

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

 Header-Logo: 20

 Header-banner 21

 Nav: 21

1.6 22

 Giỏ hàng 22

 Đăng nhập: 22

 Thanh nav responsive 24

 Slider 25

 Phần aside 26

 Left_section 26

 Article : 31

 Hea 32

 section( sản phẩm ) 32

 aside-right: 37

 Footer 38

 Footer-1 38

 Footer-5 39

 Footer-2: 39

 Footer 4 39

 Footer3: 40

5.1.2 Responsive của các loại màn hình 40

 Màn hình nhỏ hơn 1400px 40

 Màn dình nhỏ hơn 768 41

 Màn dình nhỏ hơn 600px 42

VI.Báo cáo cá nhân: 46

1 Phạm Thị Hồng Vân: 46

1.1 Trang chi tiết sản phẩm( dựa vào template trang chủ) 46

 hea 46

 sản phẩm,thông tin mua 46

 Chi tiết, thông số kỹ thuật: 47

2 Trần Thái Sơn : 52

Trang 5

 Giỏ hàng 52

 dangki_dangnhap 53

 Thông tin khách hàng : 55

 Đăng ký tài khoản: 58

 Trang liên hệ : 65

 Đăng nhập : 67

3 Hoàng Kim Gia Vượng : 67

3.1 Số trang : 10 67

3.2 Phác thảo giao diện 68

3.3 Sơ đồ Dom 69

3.4 Kế thừa từ trang chủ 69

3.5 Thiết Kế 70

 Header 70

 Header.Log 70

 Header.Logo 71

 Title 71

 NAV 72

 Content 75

 Footer 75

 Login 76

VII.Một số code của các trang 81

Trang 6

1.2 M c đích nghiên c u: ục lục ứ

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 ối tượng: ượng: 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 3: Hình thành website 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: ạ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 3: Hình thành website 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.

Trang 7

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.

Trang 8

Ch ương 3: Hình thành website ng 2: Phân tích thi t k ết kế ết kế

2.1 S đ phân rã ch c năng: ơng 3: Hình thành website ồ phân rã chức năng: ứ

Trang 9

2.2 S đ ơng 3: Hình thành website ồ phân rã chức năng: ngữ c nh: ảo:

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.

Trang 10

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

Trang 11

2.4 K ho ch th c hi n Website ết kế ạm vi nghiên cứu: ực hiện Website ện phát thảo:

STT Tên công việc Thời gian dự kiến Thời gian bắt đầu Thời gian hoàn thành

1 Tham khảo các website online 2 ngày 1/03/2015 3/03/2015

2 Thảo luận 1 ngày 4/03/2015 5/03/2015

4 Phác thảo các template 4 ngày 11/03/2015 15/03/2015

5 Báo cáo đề cương 4 ngày 17/03/2015 21/03/2015

6 Thu thập và chỉnh sửa ảnh 7 ngày 22/03/2015 29/03/2015

7

Thiết kế cấu trúc

nội dung website 10 ngày 1/04/2015 10/04/2015

8 Thiết kế giao diện 10 ngày 13/04/2015 23/04/2015

9 Tiến hành code các page 10 ngày 24/04/2015 04/05/2015

10

Soạn thảo nội

dung đưa vào

15 Báo cáo toàn văn 08/06/2015

Trang 12

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

I Ý t ưởng hình thành website: 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: ện phát thảo: ảo:

1.1 Ph n chung: ầ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Ủ

Trang 14

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

.

Trang 15

1.4 Sơ đồ DOM

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.

Trang 16

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.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 ắc xây dựng code ực hiện Website

- 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 ịnh dạng các thành phần HTML chung ạm vi nghiên cứu: ần 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

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

Trang 17

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

V.1 Ph m Th H ng Vân ạm vi nghiên cứu: ịnh dạng các thành phần HTML chung ồ phân rã chức năng:

<input type="text" name="id" id="id" placeholder="Tìm kiếm " /> <img src=" /IMAGES/logosearch.png" id="timkiem"

style="cursor:pointer;" onclick= "#"/>

</form>

</div>

Trang 18

<li><a href="?xem=sanpham" >Trang chủ</a></li>

<li><a href="?xem=gioithieu">Giới Thiệu</a></li>

<li><a href="HTML/Laptop.html">&rsaquo;&rsaquo;Laptop</a>

<li><a href="#">&rsaquo;&rsaquo;CHUỘT</a></li>

<li><a href="#">&rsaquo;&rsaquo;BÀN PHÍM</a></li>

<li><a href="#">&rsaquo;&rsaquo;THIẾT BỊ MẠNG</a></li> <li><a href="#">&rsaquo;&rsaquo;RAM LAPTOP</a></li>

<li><a href="#">&rsaquo;&rsaquo;HDD(ổ cứng)</a></li>

<li><a href="#">&rsaquo;&rsaquo;SPEAKER(Loa)</a></li>

</ul>

</li>

<li><a href="?xem=hdanmuahang">Hướng dẫn</a></li>

<li class="cap2"><a href="#">Thành Viên</a>

</ul>

Trang 19

<?php echo $prd; ?> </span> sản phẩm </div>

 Đăng nh p: ập:

<div class="hea"><a href=" /index.html">Trang chủ</a>

&rsaquo;&rsaquo; Đăng nhập</div>

<h2 align="center">Login</h2>

<input type="text" id="tendangnhap" name="tendangnhap" placeholder="Tên đăng nhập"/

$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

Trang 20

}

?>

Trang 21

 Slider

</div>

Trang 22

 sanpham :

article{

}

Trang 23

 aside-right:

<h3>Quảng cáo</h3>

</div>

</div>

 Footer

Trang 24

 Footer-5

<a href="#"><h4>Trang chủ</h4></a>

<a href="#"><h4>Giới thiệu</h4></a>

<a href="#"><h4>Thành viên</h4></a>

Trang 26

header #center_header #logo{

Trang 30

VI Báo cáo cá nhân:

1 Ph m Th H ng Vân: ạm vi nghiên cứu: ịnh dạng các thành phần HTML chung ồ phân rã chức năng:

1.1 Trang chi ti t s n ph m( d a vào template trang ch ) ết kế ảo: ẩm( dựa vào template trang chủ) ực hiện Website ủ

Trang 31

 Chi ti t, thông s kỹ thu t: ết kế ối tượng: ập:

điểm nổi bật:</span>

<li>Bộ xử lý : Intel Core i5

4200U</li>

<li>Đồ họa : Intel HD Graphics</li>

display:inline-block;

} /* - Tab Links -*/

/* Clearfix */

.tab-links:after { display:block;

clear:both;

content:'';

}

.tab-links li { margin:0px 5px;

float:left;

list-style:none;

} .tab-links a { padding:9px 15px;

display:inline-block;

border-radius:3px 3px 0px 0px; background:#7FB5DA;

font-size:16px;

font-weight:600;

color:#4c4c4c;

transition:all linear 0.15s; }

.tab-links a:hover {

Trang 32

src=" /IMAGES/chitietsp/Vaio Pro

9.jpg"/><br/>

<strong>Màn hình Full HD tích

hợp những côngnghệ tốt nhất</strong><br/>

Được trang bị màn hình<strong>

LCD Full HD với kích cỡ 13.3"</strong>, màn

hình <strong>VAIO Pro 13

SVP13213CYB</strong> đủ rộng để bạn có

thể dễ dàng xem thoải mái mọi tài liệu cũng

như tối ưu thưởng thức nội dung đa phương

tiện Công nghệ<strong> TRILUMINOS

Display</strong> đã từng rất thành công trên

những chiếc Xperia giờ đây được tích hợp trên

màn hình Vaio Pro 13 SVP13213CYB.<br/>

li.active a, li.active a:hover { background:#fff;

color:#4c4c4c;

} /* - Content of Tabs -*/ .tab-content {

padding:15px;

border-radius:3px;

box-shadow:-1px 1px 1px rgba(0,0,0,0.15);

background:#fff;

} .tab { display:none;

}

.tab.active { display:block;

}/* -bảng -*/table{

border-collapse: collapse;width:100%;

}

th, td { border: 1px solid ;}

th{background:#CCC;

width:130px;

}td.col1{background:#dedede;width:160px;}

Trang 33

<td>Intel</td>

</tr>

<tr>

</tr>

<tr>