Lập trình và thiết kế web

1
TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN
KHOA CÔNG NGHỆ THÔNG TIN












BÁO CÁO



LẬP TRÌNH VÀ THIẾT KẾ WEB




















Nhóm thự hiện :
* Lê Đức Thanh 02HC389
* Trần Thị Huyền Trân 02HC414


HCM - 2005
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

2
PHỤ LỤC



I. GIỚI THIỆU ĐỒ ÁN 3
1. Tên đồ án 3
2. Giới thiệu đồ án 3
3. Nội dung 3
4. Đối tượng phục vụ 3
II. THIẾT KẾ 3
1. Thiết kế vật lý - mô hình chức năng 3
1. Thiết kế logic “giải pháp cá nhân” 4
III. VẤN ĐỀ KỸ THUẬT 7
1. Môi trường 7
2. Các kỹ thuật cơ bản – các hàm, phương thức chính 7
3. ActiveX - mã nguồn mở 8
IV. GIỚI THIỆU WEBSITE 8
1. Website giới thiệu 8
2. Giải pháp cá nhân 11
a. Tin tức 11
b. Sổ địa chỉ 11
c. Các dự án 12
d. Album hình: 12
e. Lịch 14
V. NHÓM THỰC HIỆN 16
VI. TÀI LIỆU THAM KHẢO 16

THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

3

I. GIỚI THIỆU ĐỒ ÁN

1. Tên đồ án
Personal Solution (giải pháp cá nhân)

2. Giới thiệu đồ án
đề án được mô hình theo mô hình website giới thiệu công ty, trong đó
dịch vụ chính của công ty là cung cấp dịch vụ Website cá nhân một
cách tự động cho thành viên.

3. Nội dung
a. Trang thông tin giới thiệu
- Phần cho khách hàng:
+ Các bài viết giới thiệu website, giới thiệu dịch vụ, …
+ Liên hệ: liên hệ với quản trị website
+ Đăng ký, login vào trang “giải pháp cá nhân”
- Phần quản trị:
+ Công cụ cho phép chỉnh sửa menu bên trái
+ Công cụ đưa thông tin các bài giới thiệu lên website
+ Xem lại các liên hệ mà khách hàng gửi

b. Trang giải pháp cá nhân
o
Là thành viên của Website thì sẽ có các đặc quyền:
Được cung cấp công cụ để lưu thông tin cá nhân, như:
+ Tin tức của bản thân, gia đình, bạn bè
+ Các dự án đã tham gia trong quá trình học tập và làm việc
+ Album hình: các hình ưa thích
+ Lập Calendar (Các sự kiện): các dự định, sự kiện trong ngày
+ Sổ địa chỉ

4. Đối tượng phục vụ
Tất cả mọi người có nhu cầu


II. THIẾT KẾ

1. Thiết kế vật lý - mô hình chức năng
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

4

Diễn giải:
- Nhà quản trị sẽ thêm, sửa, xóa thông tin, quy định của website
giới thiệu lên.
- Người dùng:
a. Có thể xem những thông tin chung đó
b. Có thể đăng ký làm thành viên của website
c. Sau khi đăng ký thì có thể đăng nhập vào “giải pháp cá
nhân”
d. Tại đây, người dùng có thể thêm, sửa, xóa các thông tin cá
nhân của bản thân

1.
Thit k logic “gii pháp cá nhân”

Quản trả
Ngảải dùng
Data
Các công
cả & xả
Các công
cả hiản
ảảng ký
ảảng
nhảp
Thêm thông
tin cá nhân
Xem thông
tin cá nhân
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

5

Diản giải: Mải thành viên (members) đảảc quyản thêm xóa sảa
- Các sả kiản (events) cảa mình
- Các dả án (projects) mà mình tham gia
- Các tin tảc (news)
- Các đảa chả đả tảo thành sả đảa chả (addressbook) cảa bản thân
- Tao các album hình (albums) và đảa hình(pictures) lên album đó

a.
Bảng: members – các thành viên

STT Tên field Data type Ghi chú
1 Username Varchar(50) Tên đảng nhảp
2 Userpass Varchar(50) Mảt khảu truy cảp
3 Fullname Varchar(255) Tên đảy đả

b. Bảng: events – các sự kiện
STT Tên field Data type Ghi chú
1 Event_id Autonumber Mã sả kiản
2 Event_name Varchar(255) Tên sả kiản
3 Event_date Date/Time Ngày xảy ra sả kiản
4 Event_note Varchar(255) Ghi chú
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

6
5 Username Varchar(50) Sả kiản cảa ai?

c. Bảng projects – các dự án
STT Tên field Data type Ghi chú
1 pid Autonumber Mã sả án
2 pType Varchar(255) Lảai dả án
3 pName Varchar(225)
Tên dự án
4 pDate Date/Time Ngày bảt đảu dả án
5 pDetail Memo Chi tiảt vả dả án
6 Username Varchar(50) Dả án cảa ai?

d. Bảng addressbook – sổ địa chỉ
STT Tên field Data type Ghi chú
1 adID Autonumber Mã đảa chả
2 adName Varchar(255) Tên
3 adAddress Varchar(225) ảảa chả
4 adEmail Varchar(50) ảảa chả email
5 adHomePhone Varchar(50) ảiản thảai nhà
6 adHandPhone Varchar(50) ảiản thảai di đảng
7 adVisitedNo Integer Sả lản vào website
8 Username Varchar(50) Sả đảa chả cảa ai?

e. Bảng albums – album ảnh
STT Tên field Data type Ghi chú
1 Album_id Autonumber Mã album
2 Album_name Varchar(255) Tên album
3 Album_description Memo Diản giải
4 Album_date Date/Time Ngày tảo
5 Username Varchar(50) Album cảa ai?

f. Bảng pictures – hình ảnh
STT Tên field Data type Ghi chú
1 Pic_id Autonumber Mã hình ảnh
2 Album_id Integer Album
3 Pic_name Varchar(255) Tên hình
4 Pic_image Varchar(50) Tên file
5 Pic_height Varchar(10) Chiảu cao
6 Pic_width Varchar(10) Chiảu rảng
7 Pic_view Integer Sả lản xem
8 Pic_dated Date/Time Ngày post
9 Pic_description Memo Diản giải
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

7


g. Bảng news – tin tức

STT Tên field Data type Ghi chú
1 pid Autonumber Mã sả án
2 pType Varchar(255) Lảai dả án
3 pName Varchar(225)
Tên dự án
4 pDate Date/Time Ngày bảt đảu dả án
5 pDetail Memo Chi tiảt vả dả án
6 Username Varchar(50) Dả án cảa ai?


III. VẤN ĐỀ KỸ THUẬT
1. Môi trường
Ngôn ngữ web: ASP, ASPScript, JavaScript, HTML
Công cụ lập trình: DreamWeaver, Frontpage, Visual Interdev
Công cụ đồ họa: Photoshop, Swish
Web server: IIS
Hệ điều hành: Window 2000 Professional
Cơ sở dự liệu: Access

2. Các kỹ thuật cơ bản – các hàm, phương thức chính
- Các hàm về dữ liệu:
a. Tạo biến kết nối
Ví dụ:
Set adoCon = Server.CreateObject("ADODB.Connection")

b. Mở kết nối tới access
Ví dụ: Kết nối tới database pscompany.mdb
adoCon.Open "Provider=Microsoft.Jet.OLEDB.4.0; " & _
Data Source=" & _
Server.Mappath(" \db\pscompany.mdb") &_
";" & "Jet OLEDB:Database Password="

c. Làm việc với RecordSet
Ví dụ tạo recordset:
Set rs = Server.CreateObject("ADODB.Recordset")

Mở recordset:
strSQL="SELECT * FROM addressbook WHERE adID=" & id & ""

rs.Open strSQL, adoCon

d. Thực thi câu lệnh SQL (không phải câu SELECT)
Ví dụ:
adoCon.Execute strSQL
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

8

- Kỹ thuật phân trang:
a. Định kích thước trang: rs.PageSize=12
b. Lấy số phần tử của trang hiện tại:
rs.AbsolutePage=clng(current)


- Các hàm về ngày tháng:
a. Ngày hiện tại: Now()
b. Lấy tháng: month(ngàyNow)
c. Lấy năm: year(ngày)
d. Lấy số ngày trong tháng: DateDiff({ngày đầu}, {ngày cuối},
vbUseSystemDayOfWeek, vbUseSystem)
e. Lấy thứ trong tuần: Weekday(ngày, vbUseSystemDayOfWeek)

3. ActiveX - mã nguồn mở
Chương sử dụng lại một số mã nguồn mở và activex:
- MSCAL.OCX của Windows
- Upload file (image) của: Duware (http://www.duware.com)

IV. GIỚI THIỆU WEBSITE

1. Website giới thiệu
- Trang cho khách
B1: Hiển thị thông tin

Hiển thị thông tin do quản trị website đưa lên.

B2: Liên hệ
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

9




- Trang cho quản trị
B1: Đăng nhập hệ thống

B2: Hiệu chỉnh menu
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

10


B3: Thêm, cập nhật bài viết


THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

11
B4: Danh sách các liên hệ:



2. Giải pháp cá nhân
a. Tin tức
Đăng tin:


b. Sổ địa chỉ
Danh sách ở trang home:

Thêm vào sổ:
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

12


c. Các dự án
Thêm dự án:


d. Album hình:
Thêm album:
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

13

Thêm hình:

Danh sách album:

Cập nhật hình:
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

14


e. Lịch
Màn hình:
THÖ VIEÄN ÑIEÄN TÖÛ TRÖÏC TUYEÁN

Xem chi tiết: Lập trình và thiết kế web