BÁO CÁO "Xây dựng website bán giày”

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.34 MB, 38 trang )

1

LỜI CẢM ƠN
Em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đối
với các thầy cô của trường Đại Học Công Nghệ Thông Tin và
Truyền Thông Thái Nguyên, đặc biệt là các thầy cô khoa Khoa
Học Máy Tính của trường đã tạo điều kiện cho em tham gia kì
thực tập chuyên ngành để có nhiều trải nghiệm và những định
hướng tốt cho ngành nghề mà em theo đuổi. Và em cũng xin
chân thành cảm ơn thầy Lê Sơn Thái đã nhiệt tình hướng dẫn
em hoàn thành tốt kì thực tập.
Trong quá trình thực tập, cũng như là trong quá trình làm bài
báo cáo, khó tránh khỏi sai sót, rất mong các Thầy, Cô bỏ qua.
Đồng thời do trình độ hiểu biết cũng như kinh nghiệm thực tiễn
còn hạn chế nên bài báo cáo không tránh khỏi những thiếu sót,
em rất mong nhận được ý kiến đóng góp của Thầy, Cô để em
học thêm được nhiều kinh nghiệm và sẽ hoàn thành tốt hơn
trong kì đồ án sắp tới.
Em xin chân thành cảm ơn!
Sinh viên thực hiện
Hoàng Văn Cường

2

LỜI MỞ ĐẦU
Cùng với sự phát triển không ngừng về kỹ thuật máy tính và
mạng điện tử, công nghệ thông tin cũng được coi là những công
nghệ có trình độ cao và lần lượt chinh phục hết những đỉnh cao
này đến đỉnh cao khác.

Mạng Internet là một trong những sản phẩm có giá trị hết
sức to lớn và ngày cảng trở thành một công cụ không thể thiếu,
là nền tảng chính cho sự truyền tải, trao đổi thông tin trên toàn
cầu.
Giờ đây, mọi việc liên quan tới thông tin trở nên thật dễ
dàng cho người sử dụng: chỉ cần có một máy tính kết nối
Internet và một dòng dữ liệu truy tìm thì gần như ngay lập tức…
cả thế giới vấn đề mà bạn quan tâm sẽ hiện ra, có đầy đủ
thông tin, hình ảnh và thậm chí có cả âm thanh và video mà
bạn cần.
Trong hoạt động sản xuất, kinh doanh, giờ đây thương mại
điện tử đã khảng định được vai trò xúc tiến và thúc đẩy sự phát
triển các doanh nghiệp.
Đối với các dịch vụ kinh doanh, việc quảng bá và giới thiệu
đến khách hàng các chương trình khuyến mãi của các dịch vụ
trong từng thời điểm một cách hiệu quả và kịp thời là yếu tố
mang tính chất quyết định cho sự tồn tại và phát triển của
website.
Vì vậy: Đây là lý do em chọn đề tài “Xây dựng website
bán giày” làm đề tài thực tập cơ sở.
* Mục đích của đề tài:
- Tìm hiểu ngôn ngữ HTML,CSS.
- Tìm hiểu PHP
- Tìm hiểu hệ quản trị dữ liệu mySQL
- Tìm hiểu về javascrip
3

- Xây dựng website hỗ trợ bán hàng.
* Nội dung của đề tài được chia thành 3 chương.

- Chương 1: Cơ sở lí thuyết.
- Chương 2: Phân tích thiết kế.
- Chương 3: Thiết kế giao diện.

CHƯƠNG I :CƠ SỞ LÝ THUYẾT
I. HTML
1.HTML là gì?
HTML được ví như là bộ xương của một giao diện website,
dù nó là dành cho WordPress hay bất cứ website nào. “Bộ
xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website
và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau
đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một
vài trò riêng trong website.
HTML là từ viết tắt của HyperText Markup Language, nghĩa
là ngôn ngữ đánh dấu siêu văn bản.
Hypertext (siêu văn bản): là một đoạn text bất kì nhưng
có chứa link đến một nguồn thông tin khác (như một đoạn văn
bản khác, một địa chỉ website, hình ảnh, âm thanh…)
Ngôn ngữ đánh dấu này sẽ là cầu nối của sự giao tiếp
giữa người dùng và trình duyệt, giúp trình duyệt hiểu
được cách thức hiển thị trang web. Khi trình duyệt đọc thấy
1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn
muốn tô đậm, in nghiêng, hay màu mè hoa lá thế nào cả. Chính
lúc đấy, bạn cần HTML, thông qua việc sử dụng các thẻ HTML.
Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm
giữa dấu < và dấu >, và báo cho trình duyệt biết cách thức
hiển thị đoạn kí tự bên trong thẻ HTML đó.
In đậm bằng thẻ <b>:

<b>A</b>

In nghiêng bằng thẻ <i>:

<i>A</i>

2. Cấu trúc cây HTML cơ bản
4

Cấu trúc của HTML rất đơn giản và logic, với bố cục từ
trên xuống dưới, từ trái qua phải, với 2 phần chính
là HEAD và BODY. Các website viết bằng HTML đều tuân theo
cấu trúc cơ bản như sau:
Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa
chuẩn văn bản) ngay từ dòng đầu tiên.
Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của
trang HTML.
Thẻ <head> chứa tiêu đề và các thông tin khai báo, các
thông tin ẩn khác.
Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là
phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc
các mã HTML.
Mọi kí tự nằm giữa dấu <!– và –> sẽ được xem là thẻ comment
và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.
<html>
<head>
<title>Đây là thẻ đánh dấu tiêu đề trang web</title>

</head>
<body>

<b>Đây là dòng chữ in đậm</b>
<i>Đây là dòng chữ in nghiêng</i>
</body>
</html>

5

3. Pro tips:
Luôn đóng thẻ sau khi đã mở. Điều này giúp hạn chế lỗi
bất ngờ khi hiển thị trên trình duyệt.
Một số thẻ không có thẻ đóng, như thẻ
, thẻ <img>,
<input>,…..
Cẩn thận gặp lỗi khi đóng thẻ, mở thẻ trong trường hợp có
nhiều thẻ lồng nhau.

Tiêu đề

4. Các tag HTML cần biết cho blogger:
Đề mục: Có 6 loại đề mục tất cả với mức độ nhấn mạnh
giảm dần từ

đến

. Nếu bạn quan tâm đến SEO thì
có lẽ đây là thẻ mà bạn nên chú trọng sử dụng đúng cách.

6

01

Tiêu đề bài viết

Phần 1

Chương 1.1

Tiểu mục 1.1.1

Đề mục 1.1.1.1

Đề mục con 1.1.1.1.1

Định dạng Text:
01

<b>Tô đậm</b>

02

<i>In nghiêng</i>

03

<strong>Tô đậm theo chuẩn web ngữ nghĩa</strong>

04

<em>In nghiêm theo chuẩn web ngữ nghĩa</em>

Phân đoạn:
0
1
0
2
0
3
0
4
0
5

Đoạn văn bản

Xuống dòng với



0
7

6
0
7

<blockquote>"Tôi chuẩn man" ~ Cao Thái
Sơn</blockquote>

0
8
0
9
Danh sách: Có 2 loại là danh sách có đánh số thứ tự <ol> và
danh sách không đánh số thứ tự<ul>. Bên trong các thẻ danh
sách này, các phần tử được đánh dấu với thẻ <li>.
01



02

<ol>

03

<li>Phần tử 1</li>

04

<li>Phần tử 2</li>

05

</ol>

06



07

<ul>

08

<li>Phần tử 1</li>

09

<li>Phần tử 2</li>

10

</ul>

Liên kết:
01

<a href="địa chỉ liên kết">Đây là một liên kết</a>

02

<a href="địa chỉ liên kết" target="_blank">Liên kết này sẽ
sổ mới</a>

01

<img src="đường dẫn đến ảnh" alt="chú thích cho ảnh"/>

Ảnh:

8

II. CSS
1. Làm quen với CSS
Nếu HTML được xem như là bộ xương của một website thì
CSS chính là da thịt được đắp lên bộ xương đó, mục đích đơn
giản là cho website trông đẹp đẽ và chuyên nghiệp hơn.
CSS là từ viết tắt của Cascade Style Sheet, là ngôn ngữ
giúp trình duyệt hiểu được các thiết lập định dạng và bố cục
cho trang web. CSS cho phép bạn điều khiển thiết kế của nhiều
thành phần HTML chỉ với duy nhất 1 vùng chọn CSS. Điều này
giúp giảm thiểu thời gian thiết kế và chỉnh sửa, khi bạn có thể
tách biệt được cấu trúc (HTML) và định dạng (CSS).
CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua
nhiều con đường khác nhau. Style có thể được quy định ở trong
chỉ một thẻ HTML, được quy định trong 1 trang web hoặc ở
trong một file CSS bên ngoài.
2. Cú pháp cơ bản của CSS

Cú pháp cơ bản của CSS bao gồm 3 phần: vùng chọn
(selector), thuộc tính (property) và giá trị (value).
01

VÙNG-CHỌN {

02

Thuộc-tính-1: giá-trị-1;

03

Thuộc-tính-2: giá-trị-2;

04

}

Vùng chọn: là cách xác định các thẻ HTML dựa trên cấu
trúc phân cấp của HTML. Vùng chọn có thể được tạo nên dựa
trên nhiều yếu tố như định danh (id), tên lớp (class), quan hệ
cha – con – hậu duệ… Bạn có thể xem ví dụ trực quan về một
số vùng chọn CSS tại đây, hoặc đọc thêm tại W3S.
Thuộc tính: là yếu tố bạn muốn thay đổi ở các thẻ HTML
thuộc vùng chọn. Danh sách các thuộc tính có thể xem thêm
tại W3S.

9

Giá trị: mỗi thuộc tính sẽ yêu cầu một giá trị khác nhau.
Đó có thể là 1 từ khóa định sẵn (none, block), một tên màu hay
mã màu (black, white, #000, #FFFFFF), hay một giá trị kích
thước tính bằng px, em, rem, %.
3. Các vùng chọn CSS (selector) cần biết cho blogger
#ID
Dấu # được sử dụng để chọn một thẻ HTML có định danh cụ thể
(ID). Do đó, bản chất của việc sử dụng ID không thể tái sử
dụng. Hãy chắc chắn rằng việc gán ID cho thẻ HTML và chọn
thẻ này bằng ID này là cách duy nhất bạn có thể định dạng cho
nó.
0
1
0
2
0
3
0
4
0
5

<div id="vi-du">