Đồ án Thiết kế web trên nền joomla

Sau đây mình xin chia sẻ với tất cả các bạn yêu thích chuyên ngành công nghệ thông tin bài báo cáo về môn thiết kế Web .Bài báo cáo này nói về trường Trung Học Phổ Thông Năng KhiếuĐại Học Quốc Gia TPHCM được thiết kế trên nền JOOMLA .Tuy nó còn sơ sài nhưng mình nghỉ nó có thể có ích cho các bạn khi học ngành này.

12 TH 1 TRƯỜNG CAO ĐẲNG KỸ THUẬT CÔNG NGHỆ VẠN XUÂN KHOA CÔNG NGHỆ THÔNG TIN    BÁO CÁO MÔN HỌC THIẾT KẾ WEB GVHD : Thầy Trần Việt Khánh Sinh viên thực hiện : - Phạm Văn Cảnh MSSV : 1120010020 - Nguyễn Thị Út Hào MSSV : 1120010018 Phạm Văn Cảnh Nguyễn Thị Út Hào 12 TH 1 Mục Lục LỜI CÁM ƠN Phạm Văn Cảnh Nguyễn Thị Út Hào 12 TH 1 Trước tiên, tôi gởi lời cảm ơn chân thành đến Trường Cao Đẳng Kỹ Thuật Công Nghệ Vạn Xuân đã tạo điều kiện thuận lợi cho tôi học lớp 12 Th1 CNTT, tôi gởi lời cảm ơn chân thành đến qúi thầy cô bộ môn đã nhiệt tình giảng dạy tôi trong thời gian qua, qua đó tôi đã có được những kiến thức rất bổ ích để làm bài báo cao. Đặc biệt tôi gởi lời cảm ơn chân thành đến thầy Trần Việt Khánh đã nhiệt tình hướng dẫn và có nhiều đóng góp cho tôi thực hiện bài tiểu luận này. Xin chân thành cảm ơn. Tp.HCM, ngày 04 tháng 06 năm 2014 HỌC SINH THỰC HIỆN Phạm Văn Cảnh Nguyễn Thị Út Hào Phạm Văn Cảnh Nguyễn Thị Út Hào 12 TH 1 LỜI NÓI ĐẦU Ngày nay, Internet đã trở thành một phần không thể thiếu trong các lĩnh vực phát triển của xã hội. Bên cạnh những tác dụng to lớn đối với các tổ chức khác nhau, website còn là nơi chia sẻ kiến thức và kết nối cộng đồng, thực sự đem lại rất nhiều lợi ích thiết thực. ngày càng khẳng định được tính hữu dụng và sức mạnh trong mọi phương diện, mọi ngành nghề của cuộc sống, nhất là trong thời đại kinh tế thị trường hiện như bây giờ. Đặc biệt là trong mùa thi cử , phụ huynh học sinh cần biết thông tin tuyển sinh về các trường phổ thông ,cao đẳng , đại học. Hiện nay có rất nhiều người thường xuyên truy cập các trang web thông tin tuyển sinh để xem các tin tức tuyển sinh thay vì mua các tờ báo ở ngoài hiệu sách báo! Đã có rất nhiều website tuyển được xây dựng để nhằm thỏa mãn nhu cầu tra cứu thông tin hàng ngày của người Việt Nam. Từ những hiệu quả mà một website mang lại, em muốn tìm hiểu về cách xây dựng và thiết kế website.Có nhiều phần mềm,công cụ hỗ trợ thực hiện thiết kế một website, Joomla! là hệ thống quản trị nội dung mã nguồn mở số 1 thế giới hiện nay được viết bằng ngôn ngữ PHP và kết nối đến cơ sở dữ liệu SQL. Linh hoạt, đơn giản, tính tuỳ biến rất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về Joomla!, được sử dụng trên toàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp. Việc cài đặt dễ dàng, quản lý đơn giản, đáng tin cậy. Đó là các lý do em chọn Joomla là công cụ để thực hiên đề tài "Xây dựng website tuyển sinh trường Phổ Thông Năng Khiếu – ĐHQG Tp.HCM bằng joomla". Sau một thời gian học tập và tìm hiểu, em tiến hành xây dựng một website tuyển sinh nhằm mục đích là đáp ứng thêm nhu cầu tra cứu thông tin tuyển sinh ngày càng nhiều của mọi người. Trong quá trình tiến hành dự án, việc cập nhật thông tin mới nhất còn hạn chế, kiến thức học hỏi còn hạn hẹp. Do đó trang Web chưa thật sự đầy đủ về nhiều mặt. em sẽ điều chỉnh trong thời gian sắp tới! Dưới đây là bản báo cáo tóm tắt quá trình thực hiện dự án của em. Trong quá trình làm báo cáo, cũng như thực hiện dự án, không thể tránh khỏi những thiếu sót, rất mong được sự đóng góp ý kiến của thầy giáo và bạn đọc! Xin cảm ơn! Phạm Văn Cảnh Nguyễn Thị Út Hào 12 TH 1 Tp.HCM, ngày 04 tháng 06 năm 2014 HỌC SINH THỰC HIỆN Phạm Văn Cảnh Nguyễn Thị Út Hào Phạm Văn Cảnh Nguyễn Thị Út Hào 12 TH 1 CHƯƠNG 1 TỔNG QUAN VỀ WEBSITE 1.1. Giới thiệu: - Với sự phát triển vượt bậc của công nghệ thông tin, ngày nay việc quản lý danh sách hồ sơ về tài nguyên con người đã là một việc cực kì dễ. Các tài liệu quản lý giờ đây đã được xây dựng trên rất nhiều tiện ích đặt biệt là các WEBSITE quản lý. Và để quản lý một cách tối ưu sổ sách, thông tin của các học sinh cho một trường nào đó đã quá đơn giản, thồng qua việc chỉ cần nhập dữ liệu vào hệ thống quản lý của một website. - Trong số đó có website của Thông tin tuyển sinh Trường PHỔ THÔNG NĂNG KHIẾU được ra đời để đáp ứng nhu cầu quản lý học sinh, thông tin của học sinh. - Khi trang Website Quản lý này ra đời cho thấy được sự tiện dụng và hữu ích của nó so với việc nhập liệu thủ công bằng giấy viết. Hơn nữa rất tiết kiệm thời gian thay vì phải tốn nhiều thời gian để nhập liệu so với vài cú click chuột nhập dữ liệu trên bàn phím. 1.2 Mô Tả Hiện Trạng: • Components về quản lý kỳ thi Tuyển Sinh cho Trường PTNK (Entrance Exam Management System) là một website mang tính xây dựng. • Trong đó có một người quản lý tài liệu cho phép nhập xuất thông tin với vai trò là admin của website. • Components được cập nhật và chỉnh sửa trực tiếp trên website quản lý dưới sự cho phép của admin ( người quản lý hoặc người có tài khoản đăng nhập trên website). • Mọi người có thể xem thông tin và tìm tiếm thông tin trên trang chủ của website. • Hệ thống website quản lý sẽ có 8 phần : - Phần 1: Đăng Nhập. - Phần 2: Trang Chủ. - Phần 3: Giới Thiệu Trường. - Phần 4: Thư Viện Đề Thi. - Phần 5: Thông Tin Tuyển Sinh. - Phần 6: STEMAP. - Phần 7: Liên Hệ. - Phần 8: Hình Ảnh. Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 6 12 TH 1 • Chi tiết các phần trong website : - Phần 1 : Đăng nhập Cho phép đăng nhập và xem thông tin chỉnh sửa thông tin các đối tượng cần quản lý trong website. Chỉ có admin và người có tài khoản đăng nhập dưới quyền giống admin mới được xem thông tin chi tiết cũng như chỉnh sửa thông tin của các đối tượng có trong danh sách quản lý. - Phần 2 : Trang Chủ gồm có 7 mục nhỏ + Mục 1: Kết quả thi + Mục 2: Thông báo nhận số báo danh + Mục 3: Đăng ký vào lớp 10 Công Lập + Mục 4: Đại học Quốc Gia tuyển thẳng học sinh trường + Mục 5: Chỉ tiêu vào lớp 10 tại Tp.hcm + Mục 6: Tp.hcm mở rộng tuyển thẳng lớp 10 + Mục 7: Tuyển sinh lớp 10 tại Tp.hcm Đây là phần giới thiệu của trang web hay nói cách khác là bộ mặt của trang web. Ở trang này người xem có thể biết được các thông tin của trang web vừa cập nhật, Website hiện đang quản lý cho khu vực nào, bộ phận nào, quản lý về vấn đề gì…v…v. Người lập ra trang web sẽ cập nhật các thông tin mới khi cần thiết và có thể chỉnh sửa lại trang web nếu có yêu cầu. Là đường dẫn đầu tiên cho việc tìm kiếm mọi thông tin trên web, nơi hiển thị toàn bộ chức năng mà trang web quản lý này có. - Phần 3: Giới thiệu trường gồm có 2 mục nhỏ + Mục 1: sơ đồ trường + Mục 2: lịch sử trường Là nơi giới thiệu về trường , về ngày thành lập, các hoạt động cơ bản của trường trong suốt thời gian qua. Đây là nơi để người dung tìm kiếm thông tin về trường. Cũng là nơi người người lập web sẽ cập nhật các thông tin mới khi cần thiết. - Phần 4: Thư viện đề thi gồm có 5 mục nhỏ + Mục 1: Đề thi môn toán + Mục 2: Đề thi môn văn + Mục 3: Đề thi môn anh Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 7 12 TH 1 + Mục 4: Đề thi môn lí + Mục 5: Đề thi môn hóa Đây là nơi lưu dữ các đề thi qua các năm của trường. Thư viện này giúp cho người dùng dễ dàng tiếp cận với những tài liệu cần thiết (đề thi qua các năm). Ở đây người quản lý web sẽ cập nhật tài liệu về đề thi mới nhất, chinh sửa khi cần thiết. - Phần 5: Thông tin tuyển sinh. Cũng như những phần trên Thông tin tuyển sinh, cũng là nơi nói về những thông tin cần thiết cho người dùng về thông tin tuyển sinh của trường. Ở phần này admin của web sẽ cập nhật tài liệu cần thiết về tuyển sinh của trường, thay đổi chinh sửa nếu cần thiết. - Phần 6: STEMAP. Phần này thể hiện khái quát về trang thông tin về trường PTNK. Thông qua phần này người dùng có thể biết được minh đang ở đâu trong trang web. - Phần 7: Liên hệ. Liên hệ là nơi lưa dữ cái thông tin như số điện thoại, địa chỉ trường, tên trường… Giúp cho người dùng dễ dàng tiếp cận những thông tin cần thiết khi cần để liên hệ về trường. Phần này người quản lý web có thể cập nhật những thông tin về liên hệ mới sau khi thay đổi. - Phần 8: Hình ảnh. Là thư mục hình ảnh của trường, qua các ngày kỷ niệm…. Ở đây người dùng có thể thấy được những hình ảnh của trường, các hoạt động… Ở phần này người quản lý sẽ cập nhật những hình ảnh mới nhất về trường… 1.3.Sơ đồ luồn dữ liệu 1.3.1 Đăng nhập vào hệ thống Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 8 12 TH 1 D1 D2 Mô tả Dữ liệu: • D1: Nhận thông tin đăng nhập của người dung (Tên, Mật khẩu) • D2: Màn hình trang chủ Component (nếu đăng nhập thành công) Xử lý: • Nhận và kiểm tra D1: tên và mật khẩu phải trùng khớp • Hiển thị màn hình trang chủ để người dung bắt đầu làm việc 1.3.2 Đăng xuất khỏi hệ thống D1 D2 Mô tả Dữ liệu: • D1: Nhận thông tin yêu cầu đăng xuất • D2: Màn hình trang chủ Component (trạng thái chưa đăng nhập) Xử lý: • Nhận và xử lí D1 • Hiển thị màn hình trang chủ dưới trang thái đa đăng xuất Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 9 Người dùng Đăng nhập vào hệ thống Người dùng Đăng xuất khỏi hệ thống 12 TH 1 1.3.3 Xem danh sách D1 D2 D3 Database Mô tả Dữ liệu: • D1: Nhận yêu cầu từ người dùng • D2: Thông tin danh sách Thanh Thiếu niên Nhi đồng • D3: Giống D2 Xử lý: • Nhận D1 • Lấy danh sách quản lý thanh thiếu niên nhi đồng • Hiển thị cho người dùng 1.3.4 Thêm mới D1 D2 Database Mô tả Dữ liệu: • D1: Yêu cầu thêm mới đối tượng và vị trí lưu • D2: thông tin chi tiết của đối tượng cần thêm Xử lý: • Nhận D1 • Kiểm tra các thông tin của đối tượng cần them có hợp lệ không? • Nếu hợp lệ thì lưu xuống cơ sở dữ liệu Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 10 Người dùng Xem danh sách Người dùng Thêm mới [...]... là root) Kết quả : Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 25 12TH1 Hình 2.2 2.2.Cài Đặt Joomla Trên Localhost Tải chương trình tại địa chỉ: www .joomla. org a Tiến hành cài đặt Giải nén file zip ra một thư mục (tạm đặt tên thư mục là joomla) và chép thư mục joomla vào thư mục www của Appsev (mặc định là C:\Appsev\www) Mở trình duyệt web, gõ localhost /joomla (nếu thư mục chứa mã nguồn Joomla! trong... đồng 1.4.2.7 Quan hệ giữa quản lý và database Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 17 12TH1 - Đây là quan hệ 1-1:1 trình quản lý kỳ thi tuyển sinh chỉ sử dụng một database và ngược lại CHƯƠNG 2 CÀI ĐẶT JOOMLA 2.1 Cài Đặt Appsever Để Tạo Localhost 2.1.1 Giới thiệu chung về Appsever Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 18 12TH1 Để xây dựng website Joomla! trên localhost, cần phải có một server ảo trên. .. Bước 5: FTP Configuration: thiết lập FTP, có thể mở hoặc không NhấnNEXT Bước 6: Main Configuration: thiết lập cho website như tên web, email và password của admin Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 31 12TH1 Hình 3.5 - Site Name: đặt tên website - Confirm the admin email and password Password này sẽ là password của admin sau này đăng nhập vào trang quản trị của website - Install default... dạng "http://localhost /joomla" ) Vào C:\AppServ\www\webcntt\ để sửa lỗi cơ bản bằng cách viết vào sau dòng 1 của configuration dòng ini_set(“memory_limit”, “30M”); Kết quả thu được: Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 32 12TH1 Hình 3.6 2.3.Dùng Quyền Quản Trị Để Quản Lý Thành Viên Xây Dựng Việc xây dựng một website trên thực tế luôn là một vấn đề phức tạp, do nhu cầu biến đổi mà website có thể thay đổi... việc) phù hợp Kết quả thu được: danh sách thành viên và nhóm làm việc của website: Hình 3.9 Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 35 12TH1 CHƯƠNG 3 THIẾT KẾ CÁC THÀNH PHẦN CHÍNH CHO WEBSITE 3.1.Cài Đặt Template 3.1.1 Giới thiệu về template Template là một bản mẫu khung sẵn trong đó cho phép người dùng đặt các vị trí module và component đã được định vị trước 3.1.2 Cài đặt template cho Joomla! Tuỳ thuộc... mục joomla vào thư mục www của Appsev (mặc định là C:\Appsev\www) Mở trình duyệt web, gõ localhost /joomla (nếu thư mục chứa mã nguồn Joomla! trong thư mục www của Appsev là joomla, như đã nói ở trên) Trang web Joomla! Web Installer xuất hiện NEXT để qua bước tiếp theo và PREVIOUS để trở lại bước trước Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 26 12TH1 Bước 1: Choose Language: chọn ngôn ngữ Chọn... thay đổi các mục đích, bố cục nên sự đóng góp phát triển website của các thành viên khác chiếm một vai trò quan trọng Trang Quản Trị: Mở trình duyệt web, nhập địa chỉ: "http://localhost/administrator" Xuất hiện trang quản trị, nhập : Username : admin Password: là password ở bước 6 khi cài đặt Joomla! Xuất hiện trang quản trị website: Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 33 12TH1 Hình... sample data: Cài đặt mặc định dữ liệu cho Joomla! - Load local Joomla! 1.5 SQL script : Export dữ liệu từ bản 1.5 cũ và load tại đây - Load migration script : dùng để nâng cấp các trang từ phiên bản 1.0.x lên 1.5 Nhấn NEXT Bước 7: Finish: Cài đặt hoàn tất b Kiểm tra Để website hoạt động, cần xóa hoặc rename thư mục Installation trong thư mục Appsev\www \Joomla Chọn Site để xem thử site (địa chỉ... Hào Trang 34 12TH1 UserName: Tên sử dụng khi đăng nhập website Email: Email thành viên New Password: nhập mật khẩu thành viên Verify Password: nhập lại mật khẩu Group: Tạo quyền quản trị của thành viên Public Front-end: Thành viên có quyền đăng nhập website Public Back-End: Thành viên có quyền đăng nhập quản trị website Xóa thành viên: Tick vào tên thành viên và nhấn... Trang 28 12TH1 Hình 3.3 Nhấn NEXT Phạm Văn Cảnh Nguyễn Thị Út Hào Trang 29 12TH1 Bước 4: Database Configuration: Thiết lập cơ sở dữ liệu Hình 3.4 - Database Type: Hiện MySQL hỗ trợ 2 chuẩn là mysql và mysqli ( mới hơn ), thường chọn mysql - Host Name: nếu sử dụng MySQL trên chính máy cài Joomla! thì điền vào là localhost, còn trong trường hợp khác, nếu sử dụng MySQL và truy xuất database thông qua 1 . nói về Joomla! , được sử dụng trên toàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp. Việc cài đặt dễ dàng, quản lý đơn giản, đáng tin cậy. Đó là các lý do em chọn Joomla. tới! Dưới đây là bản báo cáo tóm tắt quá trình thực hiện dự án của em. Trong quá trình làm báo cáo, cũng như thực hiện dự án, không thể tránh khỏi những thiếu sót, rất mong được sự đóng góp ý kiến. chân thành đến thầy Trần Việt Khánh đã nhiệt tình hướng dẫn và có nhiều đóng góp cho tôi thực hiện bài tiểu luận này. Xin chân thành cảm ơn. Tp.HCM, ngày 04 tháng 06 năm 2014 HỌC SINH THỰC