Báo cáo Xây dựng website giới thiệu về trường ĐH Công nghiệp Hà Nội

MỤC LỤC NHẬN XÉT CỦA GIÁO VIÊN LỜI NÓI ĐẦU Ngày nay, với sự phát triển mạnh mẽ của Công nghệ thông tin đặc biệt là Internet đã đưa chúng ta đến gần nhau hơn. Việc xây dựng các website đã trở thành 1 nhu cầu cấp thiết không chỉ là nhu cầu riêng của các tổ chức cơ quan hay của các công ty mà đã trở thành một trào lưu chung cho toàn xã hội. Với mong muốn đóng góp 1 phần công sức của mình cho việc xây dựng hệ thống website giới thiệu về Trường ĐH Công nghiệp Hà Nội đặc biệt sau khi học môn công cụ phát triển ứng dụng trên Internet nhóm chúng em quyết định chọn đề tài “Xây dựng website giới thiệu về trường ĐH Công nghiệp Hà Nội” với mong muốn để cho các bạn học sinh, sinh viên ở khắc mọi miền tổ quốc đều có thể biết đến các thông tin về nhà trường cũng như đường lối phát triển, các ngành nghề đào tạo, đặc biệt các ngành có thế mạnh mà trường chúng ta đã được công nhận. Mặc dù nhóm chúng em đã có sự cố gắng tìm hiểu trong khi thực hiện đề tài nhưng do điều kiện và thời gian có hạn, cũng như khả năng của chúng em còn hạn chế nên trong bài báo cáo này chúng em không tránh khỏi thiếu sót, chúng em rất mong nhận được sự giúp đỡ từ phía các thầy cô. Đặc biệt chúng em xin chân thành cảm ơn thầy giáo “Nguyễn Trung Phú” đã tận tình giúp đỡ chúng em trong quá trình làm đề tài này. Hà nội, ngày 09 tháng 09 năm 2011 Nhóm thực hiện: Nhóm 8 1.Vũ Sỹ Thành 2. Lưu Văn Hội PHẦN I. MỞ ĐẦU 1. Mục đích xây dựng website Thiết kế một website giới thiệu trường học bảo đảm tính tiện dụng đối với cả người sử dụng và người quản trị. Nội dung và cách trình bày của website đơn giản, rõ ràng, dễ nhìn. Xây dựng website vể trường học nhằm cung cấp các thông tin hoạt động của nhà trường, hoạt động của từng khoa, từng tổ chuyên môn một cách nhanh nhất cho giáo viên và học sinh, sinh viên hoặc cung cấp lịch học, sinh hoạt đến từng học sinh, sinh viên và các bậc phụ huynh. 2. Tính năng kỹ thuật Website được thiết kế theo hướng mở, cho phép nâng cấp và cập nhật thêm các tính năng sử dụng mới trong tương lai khi có phát sinh nhu cầu. Hỗ trợ sử dụng tiếng Việt theo chuẩn Unicode. Tương thích với các trình duyệt Internet như Google Chrome, Mozilla Firefox và Internet Explorer(Từ IE7 trở lên). Ứng dụng các công nghệ phát triển web tiên tiến nhất, đồng thời sử dụng các phần mềm thông dụng như: Photoshop, Dreamweaver... để mang đến cho website một dáng vẻ sống động và hiện đại, sử dụng hiệu ứng Flash để tạo sự sống động, lôi cuốn cho giao diện website. Website tương thích và chạy trên các loại Server chuẩn của Window. 3. Công cụ phát triển Adobe Photoshop CS 3 Macromedia Dreamweaver 8 HTML JavaScript VBScript ASP CSS Cơ sở dữ liệu Access 4. Tài liệu tham khảo và mã nguồn của 1 số chương trình Trong quá trình thiết kế website nhóm em có sử dụng 1 số mã nguồn mở để nhúng vào trang web. Thiết kế và định dạng giao diện trang web bằng CSS Nhóm em tham khảo các bài viêt có trên IZWebz tại địa chỉ: Sử dụng bộ soạn thảo mã nguồn mở FCKeditor để nhúng vào trang web Địa chỉ download: Cách nhúng vào trang web nhóm em có tham khảo các bài viết trên website pcworld.com.vn và diendan.cnt45dh.net tại địa chỉ: Sử dụng mã nguồn mở jQuery Image Gallery/Slider để trình chiếu ảnh và tin tưc Nhóm em có tham khảo và download tại địa chỉ: 5. Mổ tả các chức năng Trang chủ: Là cổng thông tin chính của website, các tin mới của từng chuyên mục sẽ được bố trí phù hợp giúp người dùng dễ dàng vào được chuyên mục cần xem. Các tin nổi bật sẽ được bố trí ở khu vực đầu trang với hiệu ứng chuyển động tin đẹp mắt. Giới thiệu: Đăng tải các bài viết và hình ảnh về lịch sử hình thành và phát triển nhà trường, tầm nhìn, sứ mạng, chích sách chất lượng, cơ cấu tổ chức, công đoàn, đảng bộ. Tin tức: Đăng tải các bài viết liên quan đến trường, tin tức giáo dục, tin trong nước, tin quốc tế. Các tin tức sẽ được sắp xếp theo ngày đăng. Tuyển sinh: Đăng tải thông báo về tuyển sinh, hướng dẫn tuyển sinh, xem phòng thi, xem số báo danh và xem kết quả thi. Chương trình đào tạo: Đăng tải các thông tin về các bậc đào tạo, nội dung đào tạo, sơ đồ đào tạo, chất lượng đào tạo. Liên hệ: Nhận các thông tin liên hệ được gửi tới phòng đào tạo - tuyển sinh, công ty đào tạo và xuất khẩu lao động hoặc gửi tới ban quản trị website. Nhóm thiết kế: Hiển thị thông tin liên quan đến nhóm thiết kế website. Tin mới nhất: Sẽ trình chiếu 5 tin mới nhất ra trang chủ. Tin nhiều người xem: Sẽ hiển thị 5 tin được nhiều người xem nhất ra trang chủ. Quảng cáo: Thông tin quảng cáo sẽ được hiển thị cho từng khu vực trên trang chủ. Thiết kế sẵn một số khu vực dành cho quảng cáo, cho phép sử dụng các file ảnh và file flash làm quảng cáo. Thống kê truy cập: Hiển thị số người đang trực tuyến, tổng số người đã truy cập vào website. Thông báo: Chuyên mục này sẽ hiển thị liên tục các thông báo mới nhất về trường. PHẦN II. THIẾT KẾ CƠ SỞ DỮ LIỆU 1. Bảng dữ liệu 1.1. Bảng nhóm chức năng STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 chucnangID ID chức năng Long Integer Khóa chính 2 tenchucnang Tên chức năng Text(255) 3 mota Mô tả chức năng Text(255) 1.2. Bảng lĩnh vực STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 linhvucID ID lĩnh vực Long Integer Khóa chính 2 chucnangID ID chức năng Long Integer Khóa ngoại 3 tenlinhvuc Tên lĩnh vực Text(255) 4 motalinhvuc Mô tả lĩnh vực Text(255) 1.3. Bảng tin tức STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 tintucID ID tin tức Long Integer Khóa chính 2 linhvucID ID lĩnh vực Long Integer Khóa ngoại 3 tieude Tiêu đề tin Text(255) 4 Trichdan Trích dẫn tin Memo 5 noidung Nội dung tin tức Memo 6 ngaythang Ngày đăng tin Date/Time 7 anhminhhoa Tên file ảnh Text(200) 8 luotxem Đếm số lượt xem Long Integer 9 chuthich Chú thích tin Text(255) 1.4. Bảng tài khoản STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 taikhoanID ID tài khoản Long Integer Khóa chính 2 hoten Họ tên thành viên Text(255) 3 tentaikhoan Tên tài khoản Text(50) 4 matkhau Mật khẩu Text(150) 5 email Email Text(255) 6 diachi Địa chỉ Text(255) 7 mucquyen Mức quyền Text(255) 1.5. Bảng liên hệ STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 lienheID ID liên hệ Long Integer Khóa chính 2 hoten Họ tên Text(50) 3 diachi Địa chỉ Text(50) 4 email Email Text(50) 5 dienthoai Điện thoại Text(255) 6 chude Chủ đề liên hệ Text(50) 7 noidung Nội dung liên hệ Memo 8 lienhe Nơi liên hệ Text(255) 1.6. Bảng quảng cáo STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 quangcaoID ID quảng cáo Long Integer Khóa chính 2 tencongty Tên công ty Text(255) 3 dienthoai Điện thoại Text(255) 4 diachi Địa chỉ Text(255) 5 website Website Text(255) 6 email Email Text(255) 7 anhminhhoa Ảnh minh họa Text(255) 8 linhvucqc Lĩnh vực QC Text(255) 9 vitri Vị trí quảng cáo Text(255) 10 motachung Mổ tả chung Memo 1.7. Bảng hình ảnh nổi bật STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 hinhanhID ID hình ảnh Long Integer Khóa chính 2 tenanh Tên file ảnh Text(255) 3 tieude Tiêu đề ảnh Text(255) 1.8. Bảng liên kết website STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 lienketID ID liên kết Long Integer Khóa chính 2 hinhanh Hình ảnh liên kết Text(255) 3 tenwebsite Tên website Text(255) 4 tieude Tiêu đề Text(255) 1.9. Bảng bộ đếm STT Thuộc tính Diễn giải Kiểu DL(Độ dài) Khóa 1 ID ID Long Integer Khóa chính 2 solanxem Số lần xem Long Integer 2. Biểu đồ quan hệ PHẦN III. THIẾT KẾ GIAO DIỆN WEB 1. Ý tưởng thiết kế Thiết kế giao diện làm sao đơn giản, dễ quan sát, dễ sử dụng đặc biệt về màu sắc sao cho nhẹ nhàng nhưng vẫn đảm bảo tính thẩm mỹ, đảm bảo sự ấn tượng dễ cuốn hút người xem, website có bố cục rõ ràng. 2. Bố cục website Website được thiết kế với bố cục 3 phần Phần 1: Header(phần đầu của website) Phần này sẽ chứa logo, khẩu hiệu, tiêu đề và menu ngang của website. Kích thước: Chiều cao: 180px Chiều dài: 960px Phần 2: Content(phần thân của website) Phần này sẽ chứa toàn bộ nội dung hiển thị của website. Kích thước: Chiều cao: tùy thuộc nội dung hiển thị Chiều dài: 960px Trong phần này lại gồm 2 phần: Phần 1: Primary Kích thước: Chiều cao: tùy thuộc nội dung hiển thị Chiều dài: 690px Phần 2: Sidebar Kích thước: Chiều cao: tùy thuộc nội dung hiển thị Chiều dài: 260px Phần 3: Footer(phần chân của website) Phần này sẽ chứa toàn bộ thông tin về tên trường, địa chỉ, điện thoại. Kích thước: Chiều cao: 126px Chiều dài: 960px 3. Giao diện thiết kế trên Photoshop Ở đây nhóm chúng em chủ yếu sử dụng phần mềm Photoshop CS3 để thiết kế. 4. Giao diện trên web Ở đây nhóm em sử dụng HTML, CSS để định dạng và xây dựng giao diện dựa trên file ảnh đã được cắt nhỏ từ giao diện được thiết kế bằng Photoshop. 5. Một số giao diện khác Trang liên hệ Trang nhóm thiết kế  Trang tin tức Trang hiển thị chi tiết tin tức PHẦN IV. HƯỚNG DẪN CÀI ĐẶT VÀ SỬ DỤNG 1. Hướng dẫn cài đặt website 1.1. Cài đặt cơ sở dữ liệu Ở đây nhóm em dùng cơ sở dữ liệu Access nên chỉ cần cài chương trình Access có trong bộ cài phần mềm Office (ta dùng bản Office 2003 trở đi). 1.2. Cài đặt website Yêu cầu: Máy tính đã phải cài DotNetFramework và cài đặt dịch vụ IIS. Cấu hình để chạy Website trên IIS Bước 1: Kích chuột phải lên thư mục haui_k3 có trong đĩa CD rồi chọn properties. Bước 2: Chọn WebSharing rồi chọn Share this folder Bước 3: Ta để theo các giá trị mặc định. Phần Alias ta giữ nguyên theo tên haui_k3 để hiển thị chính xác các file ảnh. Bước 4: Kích chọn Apply --> chọn OK. Nhập địa chỉ “localhost/haui_k3” vào trình duyệt Sau khi thiết lập xong website ta mở trình duyệt Internet và gõ đường dẫn như hình để chạy và kiểm tra website. 2. Hướng dẫn sử dụng 2.1. Hướng dẫn đăng nhập Để đăng nhập vào hệ thống quản trị website ta làm như hình 123456 vusythanh Sau khi nhấn vào nút Đăng nhập trang web quản trị hệ thống sẽ xuất hiện Ở đây ta có thể thêm mới, sửa, xóa các thông tin có trong các mục tin tức, quảng cáo, liên kết website, hình ảnh nổi bật và trả lời thư liên hệ của bạn đọc. 2.2. Hướng dẫn cập nhật tin tức Để cập nhật tin tức chúng ta chọn mục tin tức hoặc kích vào mục quản lý tin tức như trong hình. Hoặc chọn mục này Chọn mục này để cập nhật tin tức Màn hình cập nhật tin tức xuất hiện Chọn mục này để sửa, xóa tin tức Chọn nút nàyđể thêm mới tin tức Thêm mới tin tức Kích vào đây để upload ảnh Cuối cùng kích nút đăng tin để đăng tin Nhập ngày đăng tin Nhập tên file ảnh Chọn 1 trong 3 mục này để dán tin tức Chọn mục này để chèn hình ảnh Nhập tiêu đề tin Nhập nội dung tóm tắt tin Nhập nội dung chi tiết tin tức Lựa chọn lĩnh vực đưa tin Sửa tin tức Đầu tiên chúng ta phải chọn lĩnh vực mà ta cần sửa tin tức. Chúng ta sẽ lựa chọn như trong hình. Sau khi ta chọn lĩnh vực sẽ xuất hiện danh sách tất cả các tin tức liên quan có trong cơ sở dữ liệu. Kích vào tiêu đề mỗi bản tin để sửa Sau khi kích vào mục tin muốn sửa sẽ xuất hiện trang mới như hình bên dưới. Chúng ta sẽ chọn những nội dung cần phải thay đổi, cuối cùng chúng ta nhấn vào nút cập nhật để cập nhật lại tin tức. Kích nút này để cập nhật lại tin tức Xóa tin tức Ở mục này chúng ta có thể lựa chọn xóa tất cả hoặc một vài tin tức. Nhấn nút xóa để xóa tin Nhấn vào đây để lựa chọn tất cả các tin PHẦN V. KẾT LUẬT 1. Hướng phát triển Bổ sung thêm các chức năng: Chức năng đăng ký thành viên. Chức năng lấy lại mật khẩu cho thành viên và ban quản trị trang web. Chức năng phân quyền quản trị hệ thống cho tường đối tượng cụ thể. Chức năng gửi bài viết, góp ý đối với các thành viên. 2. Kết luật Sau một thời gian bắt tay vào làm việc với sự giúp đỡ của Thầy giáo hướng dẫn nhóm chúng em đã hoàn thành đề tài “Xây dựng hệ thống website giới thiệu về trường ĐH Công nghiệp Hà Nội”. Tuy nhiên trong quá trình phân tích, thiết kế và xây dựng hệ thống do thời gian có hạn và kinh nghiệm của bản thân còn hạn chế nên chắc chắn trong báo cáo này không tránh khỏi thiếu sót và những chỗ xử lý vấn đề chưa được tối ưu. Chúng em rất mong nhận được những nhận xét, đánh giá từ phía các Thầy, Cô để chúng em khắc phục và hoàn thiện hơn cho hệ thống website vận hành sau này. Nhóm thực hiện: Nhóm 8 1.Vũ Sỹ Thành 2. Lưu Văn Hội