Tìm hiểu thiết kế website VÕ LÊ TƯ THÀNH

BÁO CÁO THỰC TẬP TỐT NGHIỆP

LỜI MỞ ĐẦU
Với sự phát triển của Công nghệ thông tin, cùng với việc ứng
dụng rộng rãi công nghệ thông tin trong rất nhiều các lĩnh vực, khối
lượng thông tin lưu trữ cũng như trao đổi ngày càng lớn, số lượng các
website ngày càng tăng. Nhu cầu quản lý , bảo mật, … của các website
ngày càng được chú trọng hơn.
Đề tài quản lý website là một đề tài gắn liền với thực tế, đồng
thời nó cũng liên quan nhiều đến những kiến thức em đã được học ở
trường. Do đó, em quyết định chọn đề tài này để có cơ hội thực hành,
áp dụng những kiến thức đã được học vào trong môi trường thực tế.
Bước đầu làm quen với những công việc cụ thể, học hỏi kinh nghiệm
và kiến thức thực tiễn giúp cho quá trình công tác sau này được thuận
tiện hơn.
Nơi em tiến hành thực tập là công ty Cổ Phần Hệ Thống
ATOMI. Trong 2 tháng thực tập tại đây, em đã thu được rất nhiều kinh
nghiệm quý báu, được thực hành những kiến thức đã học vào công việc
cụ thể, tìm hiểu thêm được nhiều kiến thức mới, điều này sẽ giúp ích
cho em rất nhiều trong công việc sau này và có cơ sở thực tế để hoàn
thành tốt báo cáo thực tập.
Vì vậy, em xin chân thành cảm ơn toàn thể nhân viên của Công
Ty Cổ Phần Hệ Thống ATOMI đã nhiệt tình hướng dẫn, giúp đỡ cho
em hoàn thành tốt nhiệm vụ được giao trong thời gian thực tập tại đây.
Bên cạnh đó, em cũng xin gởi lời cảm ơn đến các thầy cô trong đoàn
thực tập trường Đại Học Sư Phạm Đà Nẵng, đặc biệt là thầy Lê Văn

VÕ LÊ TƯ THÀNH

Page 1

BÁO CÁO THỰC TẬP TỐT NGHIỆP

Dũng người đã trực tiếp giám sát, hướng dẫn em trong thời gian thực
tập vừa qua.
Em xin chân thành cảm ơn!
Sinh viên

Võ Lê Tư Thành

VÕ LÊ TƯ THÀNH

Page 2


BÁO CÁO THỰC TẬP TỐT NGHIỆP

PHẦN I
GIỚI THIỆU VỀ CÔNG TY CỔ PHẦN HỆ THỐNG ATOMI
I. Đôi nét về công ty ATOMI
1. Quá trình hình thành và phát triển :

- ATOMI Systems là một công ty phần mềm, được thành lập
ngày 12/09/2008 tại Hà Nội. Là công ty chuyên thiết kế các
sản phầm phần mềm phục vụ trong các lĩnh vực giáo dục, y
tế…
- Công ty đặt nhu cầu thực tế của người sử dụng lên hàng đâu
do đó luôn cải tiến, sáng tạo không ngừng cho phù hợp với
nhu cầu ngày càng tăng của khách hàng.
- Các sản phẩm của công ty luôn gắn liền với nhu cầu thực tế,

đáp ứng được yêu cầu của khách hàng.
2. Đội ngũ nhân viên:
- Đội ngũ nhân viên gồm có thạc sĩ, kỹ sư, cử nhân, … có năng
lực chuyên môn tốt, tinh thần trách nhiệm cao và khả năng
sáng tạo trong công việc.
- ATOMI Systems có một tập thể nhân viên đầy nhiệt huyết và
giàu kiến thức chuyên môn, luôn hướng tới mục tiêu là cung
cấp sản phẩm tốt nhất cho khách hàng.

VÕ LÊ TƯ THÀNH

Page 3


BÁO CÁO THỰC TẬP TỐT NGHIỆP

3. Các lĩnh vực chuyên môn:
- Sản xuất, buôn bán phần cứng, phần mềm tin học : bao gồm
các linh kiện máy tính như: CPU, chuột, màn hình, … . Các
phần mềm hỗ trợ học tập như : e-learning, phần mềm quản
lý…
- Đào tạo tin học : tin học văn phòng, lập trình viên máy tính…
- Cung cấp các dịch vụ trực tuyến như: Thương mại điện tử,
giải trí trực tuyến, phần mềm trực tuyến, cung cấp thồng tin
qua mạng.
- Tư vấn lắp đặt, sửa chữa, bảo dưỡng, bảo hành máy móc,
thiết bị điện tử, tin học, viễn thông.
- Mua bán vật tư, máy móc, thiết bị bưu chính viễn thông.
- Tư vấn, cung cấp các giải pháp tin học.
- Xuất, nhập khẩu các mặt hàng công ty kinh doanh.

- Cung cấp và khai thác nội dung thông tin, dịch vụ giá trị gia
tăng trên mạng viễn thông, internet và các phương tiện thông
tin đại chúng.
- Cung cấp dịch vụ xử lí nội dung cơ sỡ dữ liệu thể thao, văn
hóa, kinh tế, xã hội, giải trí.

VÕ LÊ TƯ THÀNH

Page 4


BÁO CÁO THỰC TẬP TỐT NGHIỆP

II. Mục tiêu của công ty trong thời gian sắp tới :
ATOMI Systems đã và đang phấn đấu để trở thành một trong
những nhà cung cấp dịch vụ công nghệ thông tin hàng đầu trong
nước và quốc tế. Phấn đấu để đưa lĩnh vực còn non trẻ này trở
thành thế mạnh của nước ta.
Công ty không ngừng sáng tạo để có thể cung cấp nhiều sản
phẩm thiết thực, góp phần đáp ứng nhu cầu công nghệ thông tin
trong đời sống ngày càng cao của con người.

VÕ LÊ TƯ THÀNH

Page 5


BÁO CÁO THỰC TẬP TỐT NGHIỆP

PHẦN II

NỘI DUNG THỰC TẬP
I. Mục đích và nội dung thực tập.
1. Mục đích:
Qua đợt thực tập nhằm rèn luyện cho sinh viên:
a. Về ý thức:
- Tính tổ chức kỷ luật trong nghề nghiệp.
- Nâng cao ý thức của người cán bộ khoa học.
- Tinh thần trách nhiệm đối với công việc được giao.
- Tinh thần khắc phục mọi khó khăn, phát huy tính tích
cực trong học tập.
b. Về chuyên môn:
- Giúp cho sinh viên củng cố kiến thức đã được tiếp thu
tại trường Đại học
- Vận dụng những kiến thức đã học vào môi trường làm
việc thực tế. Góp phần đào tạo toàn diện về trình độ, kỹ
năng thực hành cũng như phương pháp học tập, nghiên
cứu cho sinh viên nhằm mục đích đạt chất lượng tốt
trong học tập nhằm đáp ứng nhu cầu của xã hội nhằm
phát triển đất nước.
- Bổ sung những kiến thức cần thiết cho sinh viên trong
thời gian thực tập vào công việc sau này, nhằm củng cố
VÕ LÊ TƯ THÀNH

Page 6


BÁO CÁO THỰC TẬP TỐT NGHIỆP

thêm nhận thức và nâng cao tay nghề chuyên môn của
người cán bộ khoa học trong tương lai.

2. Nội dung thực tập:
- Tìm hiểu, nghiên cứu cách thiết kế một website.
- Tìm hiểu và nghiên cứu phương pháp quản lý website cho
mạng nội bộ tại công ty ATOMI, đồng thời thu thập một
số kinh nghiệm từ các anh chị đồng nghiệp cho công việc
sau này.
- Thực hành cài đặt và làm việc với một số sản phẩm phần
mềm của công ty.
- Tham gia các phong trào hoạt động :
• Tham dự các cuộc họp và các hoạt động hàng tháng
của công ty.
•Tìm hiểu và thực hành kỹ thuật nối mạng cục bộ( mạng
Bus).
•

Tìm hiểu cách thiết kế website.

•

Thực hành quản lý website.

- Trao đổi, học hỏi kinh nghiệm.

VÕ LÊ TƯ THÀNH

Page 7


BÁO CÁO THỰC TẬP TỐT NGHIỆP

II.

Nhật ký thực tập:
Ngày 30/01/2012, tôi chính thức tham gia thực tập tại công ty
Cổ Phần Hệ Thống ATOMI.
Tôi đã được thực tập tại bộ phận nghiên cứu, phát triển phần
mềm của công ty.
Dưới sự phân công của công ty, tôi đã được cô Trần Thị
Hường làm cán bộ hướng dẫn trong thời gian thực tập tại đây. Theo
đó tôi đã trao đổi với người hướng dẫn một số thông tin cần biết về
công ty, các vấn đề liên quan đến nội dung công việc thực tập, tham
gia buổi họp công ty, cách tổ chức công việc và làm quen với các anh
chị đồng nghiệp.

VÕ LÊ TƯ THÀNH

Page 8


BÁO CÁO THỰC TẬP TỐT NGHIỆP

Kế hoạch thực tập được thực hiện:

Tuần 1

- Làm quen với cơ sở thực tập.
- Nắm bắt tình hình chung của công ty.
- Tìm hiểu một số nội dung lĩnh vực thuộc sự quản lý của công ty

Tuần 2

đang được đăng trên website.
- Tìm hiểu một số phần mềm do công ty thiết kế.
- Cập nhật các thông tin các sản phẩm mới của công ty dưới sự

Tuần 3

hướng dẫn của người phụ trách.
- Kiểm tra tốc độ hoạt động của trang web.

Tuần 4

- Tìm hiểu về cách lập trình, thiết kế một website.
-Tham gia buổi họp nhân viên để tích lũy kinh nghiệm làm việc.

Tuần 5

-Kiểm tra và cập nhật các thông tin mới lên website của công ty.

Tuần 6

- Tham gia các hoạt động tập thể trong công ty.

Tuần 7

-Thu thập tài liệu chẩn bị viết báo cáo thực tập.

Tuần 8

- Tiến hành viết báo cáo thực tập.

- Tổng kết đợt thực tập.

III. Tìm hiểu về thiết kế website
VÕ LÊ TƯ THÀNH

Page 9


BÁO CÁO THỰC TẬP TỐT NGHIỆP

1. Giới thiệu về website
- Website là một “live-profile” trên mạng Internet, đây là nơi giới
thiệu những thông tin, hình ảnh về doanh nghiệp và sản phẩm, dịch
vụ của doanh nghiệp ( hay bất cứ thông tin gì) để khách hàng có thể
truy cập ở bất kỳ nơi đâu, bất cứ lúc nào.với điều kiện có thiết bị thu
phát ,kết nối internet.
- Website là tập hợp nhiều trang . Khi doanh nghiệp xây dựng website
nghĩa là đang xây dựng nhiều trang thông tin, sản phẩm, dịch vụ...
.Để tạo nên một website cần phải có 3 yếu tố cơ bản:
• Cần phải có tên miền (domain).
•

Nơi lưu trữ website (hosting).

•

Nội dung các trang thông tin .

2. Giới thiệu về ngôn ngữ HTML
- HTML ( hay Hypertext Markup Language - Ngôn ngữ liên kết siêu

văn bản ) là ngôn ngữ đánh dấu chuẩn dùng để chỉ rõ một trang web
được hiển thị như thế nào trên trình duyệt.
- Ngôn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các
trình duyệt (Web browsers) cách hiển thị các thành phần của web.
Với các tag này bạn có thể:
• Điều khiển hình thức và nội dung của trang.
• Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực
tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu
HTML.
VÕ LÊ TƯ THÀNH

Page 10


BÁO CÁO THỰC TẬP TỐT NGHIỆP

• Tạo các biểu mẫu để thu thập thông tin về người dùng, quản lí
các giao dịch…
• Chèn các đối tượng như audio clip, video clip, các file CSS,
Javascript …
- Tài liệu HTML tạo thành mã nguồn của trang web. Trình duyệt đọc
các đuôi .html hoăc .htm và hiển thị lên trang web theo các lệnh có
trong đó. Trình duyệt đọc trang web từ trên xuống, từ dưới qua và
hiển thị cũng như vậy.
3. Tạo một trang HTML và hiển thị lên trình duyệt
-

Một trang html được tạo bởi các html element ( phần tử html). Đây
là các phần tử cấu tạo nên trang web.

-Một element bao gồm có 3 phần:
• Tag mở.
• Nội dung tag.
• Tag đóng.
Ví dụ:

: tag mở một đoạn văn bản

: tag đóng. Kết thúc đoạn văn bản.

- Một trang html bao gồm có 3 element chính:
• <html>

element: bao gồm tag mở <html> và tag đóng

</html>. Tất cả nội dung của html phải nằm trong hai tag
này.

VÕ LÊ TƯ THÀNH

Page 11


BÁO CÁO THỰC TẬP TỐT NGHIỆP

• <head> element: được đặt bên trong phần tử <html>. Phần
tử này thường chứa thông tin của website .
• <body> element: chứa hầu hết các phần tử khác. Đây là
thành phần quan trọng giúp cấu thành nội dung website.
3.1. Trang web đầu tiên
- Chọn start /all programs/ Accesssories/notepad. Sau đó tiến hành

nhập code cho website.

- Sau đó lưu file bằng cách vào file/save , chọn nơi và lưu với đuôi
.html
- Mở file vừa lưu lên và quan sát trên trình duyệt.

VÕ LÊ TƯ THÀNH

Page 12


BÁO CÁO THỰC TẬP TỐT NGHIỆP

3.2.Các tag trong html
- Tag trong html được bắt đầu bằng dấu “ < “ và kết thúc bởi dấu “
>”. Nội dung nằm giữa dấu < > là tên của tag.
- Html có rất nhiều tag , dưới đây là một số tag cơ bản:
+ Headings tag : để hiển thị kích cỡ của tựa đề trang web.
Headings được định nghĩa bằng tag mở <h..> và tag đóng </h..>.
Tag headings có 6 kích cỡ từ h1 đến h6, trong đó h1 là lớn nhất
và giảm dần tới h6.

VÕ LÊ TƯ THÀNH

Page 13


BÁO CÁO THỰC TẬP TỐT NGHIỆP

Kết quả:

VÕ LÊ TƯ THÀNH

Page 14


BÁO CÁO THỰC TẬP TỐT NGHIỆP

+ Tag paragraphs:

và

dùng để trình diễn các đoạn
chương trình.

Kết quả:

VÕ LÊ TƯ THÀNH

Page 15


BÁO CÁO THỰC TẬP TỐT NGHIỆP

+ Line breaks: là một tag rỗng, dùng để chèn một dòng trống. Đây
là một tag không có tag đóng. Cú pháp là
.
+ Horizontal rule: dùng để chèn một đường kẻ ngang. Đây cũng là
một tag không có tag đóng. Cú pháp <hr>
+ Hidden coments: <! > nội dung ở giữa tag này sẽ không được
hiển thị lên trình duyệt.
3.3.Các liên kết trong html
- Để chèn một link khác đến trang web ta sử dụng tag <a>
Ví dụ: <a href = > liên kết đến trang google
</a>

+ Liên kết được đặt sau thuộc tính herf. Thuộc tính này giúp
xác định địa chỉ cụ thể.
+ Thuộc tính target: dùng để xác định tài liệu liên kết sẽ được
mở như thế nào (ở cửa sổ hiện tại hay cửa sổ mới … ).
+ Thuộc tính name: cho phép liên kết các phần trong cùng tài
liệu.
+ Có nhiều cách để hiển thị links lên trình duyệt như: dòng
tiêu đề, một câu hay một hình ảnh, …
- Để chèn hình ảnh ta dùng tag <img>
Cú pháp: <img src= “địa chỉ url của ảnh”>
Ví dụ:

<img src=”file:///C:/Users/VoThanh/Desktop/1.jpg”>

VÕ LÊ TƯ THÀNH

Page 16


BÁO CÁO THỰC TẬP TỐT NGHIỆP

Kết quả:

3.4.Tạo form giao tiếp với người dùng:
- Khả năng giao tiếp với người dùng là một trong những yêu cầu
rất quan trọng của bất kì trang web nào.
VÕ LÊ TƯ THÀNH

Page 17

BÁO CÁO THỰC TẬP TỐT NGHIỆP

- Để tạo một form giao tiếp ta bắt đầu với cặp tag <form>
</form>.
<form action=”insert.html” method=”post” name=”form1”>
</form>
+ Action : là địa chỉ mà form sẽ được gởi đến sau khi người
dùng nhập thông tin.
+ Method: là phương thức gởi của form. Có hai phương
thức là Post và Get ( giá trị mặc định là Get)
+ Name: tên của form
- Giữa hai cặp tag <form> và </form> là các thẻ input, nơi người
dùng sẽ nhập thông tin. Thông qua thuộc tính Type của <input>
mà ta sẽ xác định nội dung nhập là văn bản, họ tên, hay
passwork,…
<input type=”text” name=”text_name”>
<input type=”passwork” name=”passwork”>
<input type=”checkbox” name=”lua_chon”>
- Để nội dung được gởi đi ta tạo thêm nút [ Submit], khi người
dùng click chuột vào đây thì form sẽ được gởi.
<input type=”submit” value=” send”>

VÕ LÊ TƯ THÀNH

Page 18


BÁO CÁO THỰC TẬP TỐT NGHIỆP

Ví dụ:

Kết quả:

VÕ LÊ TƯ THÀNH

Page 19


BÁO CÁO THỰC TẬP TỐT NGHIỆP

Trên đây chỉ là những giới thiệu cơ bản nhất về thiết kế website. Các
trang web được tạo bởi Html chỉ là những trang web tĩnh. Do đó, khi
thiết kế website ngoài Html người ta còn phải chèn vào các file khác
như: CSS( Cascading Style Sheet ), Javascript, PHP ( Hypertext
Preprocessor) , …, để tạo tính tương tác qua lại với người dùng cho
website.
Một số website tham khảo về lập trình web như:
-



-



-

o

VÕ LÊ TƯ THÀNH

Page 20


BÁO CÁO THỰC TẬP TỐT NGHIỆP

IV. Thực hành quản lý website:
Đăng nhập: http://jerrylaptop/atomisite/administrator/
+ Username: admin
+ Password:

1. Thêm bài viết chọn:
VÕ LÊ TƯ THÀNH

Page 21


BÁO CÁO THỰC TẬP TỐT NGHIỆP

add new artical
2. Cập nhật nội dung trang
+ Vào article manager

VÕ LÊ TƯ THÀNH

Page 22


BÁO CÁO THỰC TẬP TỐT NGHIỆP

3. Chỉnh sửa nội dung bài viết
+ Chọn nội dung muốn chỉnh sửa. Nhập nội dung vào ô soạn
thảo.

VÕ LÊ TƯ THÀNH

Page 23


BÁO CÁO THỰC TẬP TỐT NGHIỆP

+ Chèn hình ảnh: click vào nút [image] bên dưới cửa sổ, chọn
hình ảnh muốn hiển thị

+ Click nút [ start upload ] để tải ảnh lên.
+ Khi đã upload xong, click chọn hình đã upload trong khung
và bấm nút

[ insert] để chèn hình vào văn bản.

+ Canh chỉnh ảnh: chọn hình ảnh, click [ Insert/edit
image],chọn canh lề: left, margin:2, xong click update.
+ Xong bấm [ save] để hoàn tất văn bản.
VÕ LÊ TƯ THÀNH

Page 24


BÁO CÁO THỰC TẬP TỐT NGHIỆP

4. Cách quản lý menu:
+ Vào menus chọn [menu manager], sau đó chọn [ new] để tạo
một menu mới.
+ Nhập các giá trị cho menu, sau đó click [ save].

VÕ LÊ TƯ THÀNH

Page 25