Xây dựng website giới thiệu n¬ớc lào

Đại học vinh khoa công nghệ thông tin - - Đề tài: Xây dựng website Giới thiệu nớc Lào Đồ án tốt nghiệp nghành kỹ s CNTT Lời nói đầu Trong su toàn cầu hóa máy tính hệ thống mạng thông tin ngày đợc sử dụng rộng rÃi Hầu hết lĩnh vực đời sống xà hội chịu tác động to lớn nghành công nghệ thông tin Website phần quan trọng lĩnh vực Ngày có nhiều Website đời vai trò đời sống xà hội thiếu Thông tin trang web đa dạng phong phú, nội dung cập nhật liên tục nhanh nhất, hiệu Từ website đời đà mang đến cho ngời biết kiến thức, giúp ngời hiểu biết thêm nhiều mặt đời sống Website nơI giao lu chia thông tin ngời với ngêi gi÷a nh÷ng nhãm ngêi víi nhau, trao đổi thông tin qua website hiệu nhiều có đợc góp ý nhiều ngời Chúng ta ngồi nơI mà biết đợc tin tức xà hội từ nơI tráI đất mà không phảI tốn nhiều chi phí Website nơI quảng bá hình ảnh cách hiệu đất nớc, ngời, du lịch, thể thao, giảI trí Đề tài thiết kế website giới thiệu nớc Lào đợc viết công nghệ ASP.NET không nằm mục đích giới thiệu hình ảnh đất nớc ngời Lào đến với đông đảo ngời từ thêm thắt chặt tình đoàn kết Việt Nam-Lào anh em Đề tài đợc hoàn thành vào tháng 05 năm 2009 chúng em xin chân thành cảm ơn tận tình giúp đỡ Thạc sỹ: Trần Thị Kim Oanh thầy cô giáo khoa CNTT, bạn lớp 45k Tin đà động viên, giúp đỡ tạo điều kiện thuận lợi để chúng em hoàn thành đề tài Vì khả thời gian hạn chế nên trình thiết kế website cha đợc tối u tránh khỏi thiếu sót Do góp ý bổ sung thầy cô bạn bè quý báu với chúng em Vinh ngày 07 tháng 05 năm 2009 Sinh viªn thùc tËp: Ngun Anh Tn - Sucsavat Khunnhotha Néi dung trang web gåm cã ch¬ng: - Ch¬ng 1: Giới thiệu tổng quan để tài thiết kế web giới thiệu đất nớc ngời Lào - Chơng 2: Hệ thống tổ chức đặc tả yêu cầu - Chơng 3: Phân tích thiết kế sở liệu - Chơng 4: Giới thiệu công cụ hổ trợ thiêt kế Web - Chơng 5: Lập trìnhCSDL xử lý chức - Chơng 6: Thiết kế giao diện website - Chơng 7: Cài đặt thử nghiệm - Chơng 8: Đánh giá kết luận Chơng 1: Giới thiệu tổng quan đề tài I Lý chọn đề tài Việt Nam Lào hai nớc láng giếng từ lâu đà có mối quan hƯ nh anh em mét nhµ nh qua câu hát Việt-Lào hai nớc chúng ta, tình xâu nớc Hồng Hà, Cữu Long Hai đất nớc sông liỊn s«ng, ni liỊn nói, tr·I qua bao thÐ hƯ lÃnh đạo nhân dân hai nớc đà không giữ đợc mối quan hệ anh em bạn bè mà ngày đa mối quan hệ lên tầm cao mới, thời đại Cũng su thÕ héi nhËp cđa qc tÕ, ViƯt Nam ®· më rộng cửa đón chào sinh viên khắp giới đến để học tập nghiên cứu, số có nhứng ngời bạn Lào anh em Đại học Vinh Trờng Đại học lớn nớc số lợng sinh viên Lào đến theo học không nhỏ ngày có nhiều sinh viên đến theo học Trong su phát triển cđa thÕ giíi th× viƯc giao lu t×m hiĨu nỊn văn hóa nớc việc làm cần thiết Internet đời từ lâu với đời mà hàng loạt chơng trình đà xuất tiêu biểu nhng trang web, website nơI chia sẻ, trao đổ thông tin cách đại vừa đa dạng vừa nhanh trình cập nhật thông tin Cũng với mục đích tìm hiểu văn hóa nớc giới, sinh viên khoa công nghệ thông tin nhóm làm đồ án chúng em võa cã sinh viªn ViƯt Nam võa cã sinh viªn Lào nên chúng em nghĩ nên tận dụng kiến thøc ®· häc ®Ĩ thiÕt kÕ mét trang web giới thiệu đất nớc Lào với mục đích giới thiệu hình ảnh ngời đất nớc Lào đến víi mäi ngêi, ®Ĩ ngêi VIƯt Nam biÕt ®Õn nỊn văn hóa nớc bạn Lào ngời Lào biết rõ đất nớc để thêm yêu tổ quốc II Giới thiệu đề tài Đề tài thiết kế web giới thiệu đất nớc Lào đợc viết công nghệ ASP.net ngôn ngứ C# cở sở liệu sử dụng công cụ Microsoft SQL 2005Expres tất nằm phần mềm Microsoft Visual Web Developer 2008 Express Edition hảng Microsoft Để tạo cho website sinh động mặt giao diện chúng em đà sử dụng công cụ thiết kế nh Photoshop, Flash sử dụng CSS để định dạng văn Để sử lý số chức làm cho website thêm đa dạng phong phú chúng em đà đa vào ứng dụng đề tài ngôn ngữ JavaScript Để hổ trợ cho công việc lập trình đồ án ®· sư dơng ®Õn c«ng nghƯ Ajax mét c«ng nghƯ đại Dữ liệu đợc thiết kế lu trữ SQL2005 có sẳn phần mềm VisualStudio2008 Chức Website giới thiệu nớc Lào đợc chia thành hai phần: - Phần Ngời quản trị(Administrator) gồm nhiệm vụ: + ThiÕt kÕ giao diƯn + LËp tr×nh giao diện hiển thị liệu chức + Tạo Quản lý CSDL + + + + + + Phần ngời Dùng gồm chức sau: lựa chọn ngôn ngữ để duyệt tin Duyệt tin Nhận Xét, góp ý Tìm kiếm Liên hệ Tải liệu: ảnh , nhạc hình, nhạc tiếng, âm nhạc Trang web giới thiệu đất nớc Lào mà chúng em xây dựng cã néi dung chÝnh lµ giíi thiƯu víi mäi ngêi mặt văn hóa, xà hội, địa điểm du lịch, ngời sông nơI la trang da ngon ngu gom thu tieng Vietnam va Lao nên thuật lợi cho muốn duyệt web Website đem đến cho bạn xem nhìn tổng quan sinh động đất nớc Lào thông qua viết hình ảnh, ca khúc nhạc tiếng , nhạc hình, âm nhạc III Các bớc thực đề tài Chuẩn bị: - Lập đề cơng chi tiết cho đồ án - Nghiên cứu, tham khảo tài liệu về: + Microsoft Visual Web Developer 2008 Express Edition + Sql Server 2005 Express + Photoshop + Flash + Các chế mà hóa thông tin sở dự liệu + Công nghệ Asp.net - Ajax + Ngôn ngử định dạng văn cho Web CSS + JavaScript - Tìm hiểu chế tổ chức, cách thức thực website giới thiệu nớc Lào - Tìm hiểu, tổng hợp thông tin, chuÈn bÞ néi dung cho trang web néi Thực hiện: - Xây dựng sơ đồ chức tơng tác trang trang Web - Xây dựng sở liệu mô hình quan hệ d÷ liƯu - ThiÕt kÕ giao diƯn cho Website - Lập trình hiển thị nội dụng website - phân quyền cho ngời quản trị ngời dùng - Tạo trang quản trị để cập nhật nội dung đậu cho webstite - Mà hóa thông tin thông tin nhạy cảm - Tạo trang web hiển thị hai ngôn ngữ Việt Nam Lào - Tạo trang hiển thị Hoàn tất: - Kiểm tra tính xác việc lập trình hiển thị nội dung Website - Kiểm tra việc tìm kiếm thông tin - KiĨm tra viƯc thùc hiƯn cËp nhËt ®éng - Kiểm tra phân quyền ngời quản trị - Kiểm tra tính an toàn toàn vẹn thông tin - Kiểm tra tính toàn diện website Chơng 2: Hệ thống tổ chức đặc tả yêu cầu: I- Môhìnhdữ liệu: II- Đặc tả yêu cầu: 1-Yêu cầu ngời quản trị Admin: - Đăng nhập hệ thông để quản trị website - Quản trị nội dung website - Bảo đảm đứng đắn thông tin - Thiết kế giao diện - Giải đáp thắc măc nh lắng nghe ý kiến phản hồi độc giả 2-Yêu cầu ngời sử dụng- User: - Duyệt tin theo ngôn ngữ mà lựa chọn Liên hệ với ngời quản trị để biết thêm thông tin Nhận xét viết hay vấn đề liên quan đến tin Tìm kiếm thông tin trang web - Download th viện ảnh hát - Xem trợ giúp để dể sử dụng - Xem quảng cáo - Xem thông tin cần thiết - Chuyển nhanh đến website khác liên kêt website Chơng 3: Phân tích thiết kế CSDL: I- Trình bày nội dung ph©n tÝch: Néi dung ph©n tÝch Trang web giíi thiƯu níc Lµo lµ mét trang web mang tÝnh chất tin tức nên sở liệu chủ yếu dới dạng text hình ảnh đợc lu trữ Cơ sở liệu SQL2005 Th viện tài nguyên gồm hình ảnh, nhạc hình, nhạc tiếng chúng đợc lu trữ th mục website đợc lu trữ sở liệu dời dạng đờng dẫn Sơ đồ quan hệ: II- Thiết Kế sở liệu: Bảng tblMainMenu (Bảng Menu cha): khóa trờng DiƠn gi¶i KiĨu null khãa M_id M_Name ID Menu cha Tên Menu cha not not M_Status M_File Trạng thái Tên File M_Order Thø tù SX Int nvarchar(50 ) Int nvarchar(50 ) Int not not B¶ng tblSubMenu (B¶ng Menu con): khãa trêng DiƠn gi¶i KiĨu null khãa S_id M_id S_Name ID Menu ID Menu cha Tªn Menu not not not S_Status S_File Trạng thái Tên File S_Order Thứ tù SX Int Int nvarchar(50 ) Int nvarchar(50 ) Int not not B¶ng tblContent (B¶ng néi dung): khãa trêng DiƠn gi¶i KiĨu null khãa ContentIdD M_id S_id Subject ID néi dung ID Menu cha ID Menu Tiêu đề not not not not Abstract Tãm T¾t Contents ImageUrl néi dung URL hình ảnh Int int int nvarchar(40 0) nvarchar(10 00) ntext nvarchar(10 0) int int datetime C_View sè lÇn xem C_Status Trạng thái C_Datetime ngày đăng not not not not Bảng tblLink (Bảng Liên kết): khóa trờng Diễn giải Kiểu null khóa LinkId Title ID liên kết Tiêu đề not not Url Đờng dẫn liên kết int nvarchar(50 ) nvarchar(50 ) Bảng tblttcb (Bảng thông tin cần biết ): 10 not if (i == 0) drow = dt.NewRow(); drow[i] = fileName.Substring(fileName.LastIndexOf("\\") + 1); i++; if (i == 3) { dt.Rows.Add(drow); i = 0; } } } GridView1.DataSource = dt; GridView1.DataBind(); 2-Chức login: protected void ButtonLogin_Click(object sender, EventArgs e) { string un = TextBox1.Text.Trim().Replace("'", "''"); string pw = TextBox2.Text.Trim().Replace("'", "''"); un = un.Replace(";", ""); pw = pw.Replace(";", ""); //pw = FormsAuthentication.HashPasswordForStoringInConfigFile(pw, "MD5"); string sql = string.Format("Select * From tblAdmin Where (A_UserName='{0}') And (A_Password='{1}')", un, pw); VietDB mydb = new VietDB(); DataTable myUser = mydb.Getdata(sql, "myUser").Tables["myUser"]; if (myUser.Rows.Count == 0) { 28 lbltbao.Text = "Đăng nhập có lỗi"; return; } if (myUser.Rows.Count == 1) { if ((myUser.Rows[0]["A_UserName"].ToString().Trim() == un) && (myUser.Rows[0]["A_Password"].ToString().Trim() == pw)) { Session["UserName"] = un; lbltbao.Text = ""; Response.Redirect("~/Language_VietNam/VietNam_Admin/Default.aspx "); } else { lbltbao.Text = "Sai tên mật khẩu!"; lbltbao.Visible = true; return; } } else { lbltbao.Visible = true; lbltbao.Text = "Sai tên mật khẩu!"; return; } } Ch¬ng 6: ThiÕt kÕ giao diƯn website 29 I- Giới thiệu CSS: 1.Css gì? Css thay thÕ cho mét cơm tõ tiÕng Anh lµ Cascading Style Sheet Css định nghĩa thành phần HTML hiển thị nh thê Css thông thờng đợc lu trữ Style sheets Css đà đợc thêm vào từ phiên HTML 4.0 Các cách chèn CSS vào HTML a Css có ba cách chèn vào HTML: Cách :External Style Sheets Style Sheets tệp: Cách định dạng đợc lu tệp có phần mở rộng css Khi đa vào trang HTML có kiÓu nh sau: - C¸ch : Internal Style Sheets- Style Sheets trong: C¸ch CSS đợc tạo trang HTML đa vào HTML có cáu trúc nh ví dụ sau: - hr{color: sienna} p{margin-left: 20px} body {background-image: url("images/back40.gif")} C¸ch : Inline Style Sheets Style Sheets nội tuyến Cách CSS đợc tạo thẻ đa vào trang HTML sÏ cã kiĨu nh vÝ dơ sau: - 30

This is a paragraph

b Độ u tiên: Khi ứng dụng web đợc sử dụng đồng thời nhiều cáchchèn CSS nh trang HTML đợc kế thừa từ tất định dạng độ u tiên Inline Style Sheets Internal Style Sheets External Style Sheets Chú thích CSS: Trong CSS thích đợc bắt đầu /* kết thúc */ /*Đây dòng thích */ p{text-align: center; /*Đây dòng thÝch */ color: black; font-family: arial } II-Giíi thiƯu phÇn mềm Photoshop: Adobe photoshop chơng trình đồ họa hảng Adobe System, thị trờng phần mêm photoshop đứng đầu khả chỉnh sửa ảnh, đợc coi tiêu chuẩn nhà đồ họa chuyên nghiệp Ngoài chức chỉnh sửa ảnh, photoshop đợc sử dụng rộng rÃi lĩnh vùc thiÕt kÕ ®å häa, thiÕt kÕ web, vÏ tranh, vÏ Texture cho c¸c øng dơng 3D 31 Trong lÜnh vực thiết kế web photoshop thật thiÕu thiÕt kÕ giao diÖn cho trang web Nhê có photoshop mà website trông hấp dẫn sinh động tạo lôi cho ngời xem III - Giíi thiƯu vỊ phÇn mỊm Flash: Giíi thiƯu Flash 8: Adobe Flash hay cách đơn giản gọi Flash kỹ thuật đa phơng tiện lẫn phần mềm để thị Macromedia Flash Player Thực Macromedia Flash Player đợc dùng để ám chơng trình tạo tập tin Flash Còn từ Flash Player ám ứng dụng có nhiệm vụ thi hành hay hiển thị tập tin Flash Tuy Chữ Flash đợc dùng để hai chơng trình nói Giao diện nh hình dới: 32 ứng dụng Flash: Kỹ thuật Flash đợc đính vào trang web sử dụng nh ứng dụng internet độc lập Thực tệp tin .swf độc lập không cần phần mềm, ngắt kết nối internet Giới thiệu SwisHmax: SwisHmax chơng trình tạo flash mạnh mẽ dùng để thiết kế hoạt cảnh, film nhạc website 33 SwisHmax dung lợng nhỏ nhng chức không nhỏ lập trình thiết kế IV - Mô tả giao diên: b Trang chủ: Giao diện nh hình vẽ: 34 trang chủ kết hợp Photoshop Flash với hình ảnh tợng trng cho phong cảnh đất nớc Lào tơI đẹp vừa cổ kính vừa đại Flash tạo chử hình ảnh biến đổi trông đẹp Dòng có mục chứa đờng Link dẫn đến trang mµ ngêi sư dơng mn xem c Trang giíi thiƯu: Giao diƯn nh h×nh vÏ: 35 Giao diƯn trang giíi thiệu giao diện chung cho trang chứa tin tức, website đợc thiết kế theo năm phần: ãphần đầu- Top, Chứa Banner có lồng ghép hình ảnh với đợc làm Photoshop, kết hợp với hình ảnh chử đợc làm Flash Dới Banner màu xanh chứa thông tin nh: ngày tháng tại, Menu ngang biểu tợng cờ Lào có tác dụng ngời dùng nhấp vào chuyển đến trang trình duyệt tiếng Lào 36 Dới màu xanh màu xanh da trời nơI chứa thông tin đợc xử lý cho chạy ngang ã phần dới Bootom Chứa Banner màu xanh da trời kết hợp với hình ảnh flash Dới Banner menu cha chứa liên kết đến thông tin cần biết nh thời tiết, thị trờng chứng khoán, giá vàng ã Phần bên tráI Left Trên chứa LeftMenu chứa danh sách mục lựa chọn Dới LeftMenu bảng quảng cáo chứa hình ảnh liên kết mang tính quảng cáo Dới bảng quảng cáo mục tìm kiếm thông tin Dới mục tìm kiếm danh sách liên kết nhanh đến số website ã Phần ben phảI Right Trên bảng tin vắn, dới bảng tin vắn bảng tiêu điểm ã Phần Center : Là nơI hiển thị liệu webstite Dữ liệu đợc bố trí theo thiết kế lập tr×nh 37 d Trang chđ Addmin: Giao diƯn nh h×nh vẽ: Là trang có giao diện gồm phần: ã Phần đầu top: Là Banner đợc thiết kế photoshop với hình ảnh ngời phong cảnh Lào trang có hình ảnh flash cho sinh động có cha button thoát đăng nhập ã Phân bên tráI Left: Là danh sách Menu chứa link dẫn đến trang quản trị khác ã PhÇn díi – Bottom: Chøa banner thiÕt kÕ b»ng photoshop hình ảnh flash 38 ã Phần phần bên phảI: Đợc trộn lẫn vào với mục đích làm tăng không gian hiển thị va tiện quản trị, phần chứa giao diện sử lý bảng liệu e Trang nhập liệu: Giao diện nh hình: Trang trang ngời quản trị cập nhật liệu vào sở liệu 39 f Trang xem ảnh: Giao diện nh hình ảnh đợc hiển thị phần giao diện, với năm hàng ba cột 40 g Trang quản trị thông tin cần biết : Giao diện nh hình ảnh Trang đợc thiết kế theo kiêu Tab để lựa chọn danh mục quản trị ngời quản trị điều khiển thông tin trang nhng lại quản lý đợc nhiều công việc 41 V- Hoạt động trang đợc thiÕt kÕ: Trang chđ ®Ĩ cho phÐp ngêi dut web lựa chọn ngôn ngữ hiễn thị ngời quản trị dùng làm nơi truy cập vào trang quản trị Trang tin tøc sÏ hiĨn thÞ néi dung tin tøc theo yêu cầu ngời sử dụng Các trang th viện nơi chứa nội dung hình ảnh ca nhạc Các trang thông tin cần biết giới thiệu thông tin cần quan tâm nh thời tiết, thị trờng chứng khoán Trang du lịch giới thiệu địa điểm du lịch tiếng Lào Trang Login trang đăng nhập để ngời quản trị cã thĨ truy cËp vµo hƯ thèng Trang logout lµ trang Trang quản trị tùy thuộc vào nội dung ngời quản trị muốn cập nhật bảng VI- Quan hệ trang: Các trang website có đợc liên kết chặt chẻ với - khởi đầu website đợc ngời dùng truy cập giao diện trang chủ sẻ đợc bật có liên kết đến trang khác nhờ c¸c link - Khi ngêi dut web lùa chän đờng link cho trang đợc bËt, tïy ngêi dïng trän qun cho m×nh nÕu xem trình duyệt tiếng Lào mở link tiếng Lào chọn link tiếng Việt duyệt web theo tiếng Việt Đặc biệt ngời quản trị đăng nhập hệ thống bắt buộc họ phảI đăng nhập - Khi ngời sử dụng duyệt web trang web có đờng link th mơc ®Ĩ hä lùa chän 42 ... giíi thiệu đất nớc Lào với mục đích giới thiệu hình ảnh ngời đất nớc Lào đến với ngời, để ngời VIệt Nam biết đến văn hóa nớc bạn Lào ngời Lào biết rõ đất nớc để thêm yêu tổ quốc II Giới thiệu. .. chức, cách thức thực website giới thiệu nớc Lào - Tìm hiểu, tổng hợp thông tin, chuÈn bÞ néi dung cho trang web néi Thùc hiện: - Xây dựng sơ đồ chức tơng tác trang trang Web - Xây dựng sở liệu mô... chi phí Website nơI quảng bá hình ảnh cách hiệu đất nớc, ngời, du lịch, thể thao, giảI trí Đề tài thiết kế website giới thiệu nớc Lào đợc viết công nghệ ASP.NET không nằm mục đích giới thiệu hình