XÂY DỰNG WEBSITE CÔNG NGHỆ THÔNG TIN

Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG CÔNG THƯƠNG TP.HCM KHOA CÔNG NGHỆ THÔNG TIN ĐỒ ÁN TỐT NGHIỆP ĐỀ TÀI: XÂY DỰNG WEBSITE CÔNG NGHỆ THÔNG TIN Giảng viên hướng dẫn: HỒ DIÊN LỢI Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi PHỤ LỤC Contents ĐỒ ÁN TỐT NGHIỆP TP Hồ Chí Minh – Tháng 05/2014 LỜI NÓI ĐẦU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN TP Hồ Chí Minh, ngày 29 tháng 05 năm 2014 .4 PHỤ LỤC Chương - TỔNG QUAN 1.1 Lý chọn đề tài: .6 1.2 Đối tượng nghiên cứu: 1.3 Mục tiêu đề tài: 1.4 Phạm vi giới hạn nghiên cứu thiết kế: 1.5 Ý nghĩa đề tài: Chương – TÌM HIỂU VỀ JOOMLA 2.1 Giới thiệu sơ lược joomla: 2.2 Cấu trúc joomla: 2.2.1 Quản Lý component: 2.2.2 Quản lý Module: 2.2.3 Quản lý Template: .9 2.2.4 Cách đưa module,template vào joomla 11 2.3 Sử dụng WampSever chạy joomla: 13 2.4 Cài đặt joomla: 17 Chương – THIẾT KẾ CÁC THÀNH PHẦN CHÍNH CỦA WEBSITE: 21 3.1 Cài đặt template: .21 3.1.1 Thiết kế template: 21 3.1.2 Vẽ cấu trúc khung : 25 3.1.3 Cài đặt template vừa tạo : 26 3.1.4 Tạo menu và đặt vị trí cho trang web : 26 3.1.5 Cài đặt module cần thiết cho trang web: 28 3.2 Viết bài: 28 KẾT THÚC 31 Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Chương - TỔNG QUAN 1.1 Lý chọn đề tài: Với phát triển nhảy vọt công nghệ thông tin nay, Internet ngày càng giữ vai trò quan trọng lĩnh vực khoa học kĩ thuật và đời sống Dĩ nhiên bạn nghe nói nhiều Internet, nói cách đơn giản, Internet là tập hợp máy tính nối kết với nhau, là mạng máy tính toàn cầu mà kết nối máy PC họ Với mạng Internet, tin học thật tạo nên cách mạng trao đổi thơng tin lĩnh vực văn hóa,giáo dục, xã hội, trị, kinh tế Trong cơng số website đóng vai trò khơng thể thiếu mạng internet.Website đa dạng nội dung và đa dạng thể loại Ví dụ:  Trong lĩnh vực giáo dục gồm có :website trường cao đẳng công thương,website trường đại học sư phạm kỹ thuật…  Trong lĩnh vực văn hóa gồm có:website giới thiệu danh lam thánh cảnh việt nam,website giới thiệu đặc sản,di tích lịch sử việt nam…  Trong lĩnh vực xã hội-chính trị:website báo cơng an,báo tuổi trẻ…  Trong lĩnh vực giải trí:facebook,webgame… Qua ta thấy website đóng vai trò khơng thể thiếu lĩnh vực cơng nghệ thơng tin và để hình thành trang web ta cần phải qua khâu thiết kế.Nên việc thiết kế web đóng vai trò lớn cơng nghệ kỹ thuật số.Sau học trường cao đẳng công thương em nắm bắt nhiều kiến thức website qua em thấy website đóng vai trò khơng thể thiếu lĩnh vực giáo dục lĩnh vực khác…qua chúng em muốn xây dựng website lĩnh vực giáo dục,nên đồ án tốt nghiệp này chúng em chọn đề tài thiết kế website trang Khoa Cơng Nghệ Hóa Học 1.2 Đối tượng nghiên cứu: Sau bàn bạc và thống nhóm chúng em chọn đối tượng để thiết kế trang web là joomla.Vì lý sau:  Việc thiết kế joomla giúp rút ngắn thời gian,tiền bạc  Giúp cho việc bảo mật an toàn Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi  Dễ dàng cho bạn mới,tiếp cận nhanh hơn… 1.3 Mục tiêu đề tài: Nghiên cứu joomla để thiết kế trang khoa cơng nghệ hóa học,nhằm giúp cho học sinh,sinh viên thuận tiện việc tìm kiếm thơng tin,xem điểm,đăng kí môn học nắm bắt thông tin kịp thời … 1.4 Phạm vi giới hạn nghiên cứu thiết kế:  Phạm vi:Khoa cơng nghệ hóa học  Giới hạn:do phạm vi thời gian có hạn,nên trang web khoa mang tính chất thử nghiệm,chưa thể vào thực tế 1.5 Ý nghĩa đề tài: Ngày công cơng nghiệp hóa,hiện đại hóa đất nước cơng nghệ hóa học đóng vai trò khơng thể thiếu.ở nước ta cơng nghệ hóa học yếu so với nước khác,nên ta cần tuyên truyền cho người biết vai trò thật cơng nghệ này và lợi ích mang lại.Ví dụ như:nghiên cứu cơng nghệ hóa học để tìm nguồn lượng cung cấp thay cho khí đốt,điện… Chương – TÌM HIỂU VỀ JOOMLA 2.1Giới thiệu sơ lược joomla: Joomla! là hệ quản trị nội dung mã nguồn mở Joomla! viết ngôn ngữ PHP và kết nối tới sở liệuMySQL, cho phép người sử dụng dễ dàng xuất nội dung họ lên Internet Intranet Joomla! có đặc tính là: đệm trang (page caching) để tăng tốc độ hiển thị, lập mục, đọc tin RSS (RSS feeds), trang dùng để in, tin nhanh, blog, diễn đàn, bình chọn, lịch biểu, tìm kiếm site và hỗ trợ đa ngôn ngữ Joomla! phát âm theo tiếng Swahili là jumla nghĩa là "đồng tâm hiệp lực" Joomla! sử dụng khắp nơi giới, từ website cá nhân hệ thống website doanh nghiệp có tính phức tạp cao, cung cấp nhiều dịch vụ và ứng dụng Joomla! dễ dàng cài đặt, dễ dàng quản lý và có độ tin cậy cao Joomla! có mã nguồn mở việc sử dụng Joomla! là hoàn toàn miễn phí cho tất người giới Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi 2.2Cấu trúc joomla: Joomla gồm có tầng hệ thống Tầng là mức tảng, chứa thư viện và plugin (còn biết với tên gọi mambot) Tầng thứ hai là mức ứng dụng và chứa lớp JApplication Hiện tầng này gồm lớp con: JInstallation, JAdministrator và JSite Tầng thứ ba là mức mở rộng Tại tầng này có thành phần (component), mô đun (module) và giao diện (template) thực thi và thể 2.2.1 Quản Lý component: Các component là thành phần nội dung đặc biệt hay ứng dụng Joomla bao gồm số nhân component và hỗ trợ khả tự tăng cường tính với component hãng thư ba Những component gắn sẵn, cai bao gồm Joomla, là phần tính nhân Bạn tìm thấy compnent hãng thứ ba Joomla Forge nhiều nhà phát triển thứ ba vầ site cộng đồng Cấu hình và trợ giúp thêm thường cung cấp với kèm với component Những component là mơ tự nhiên, điềunày làm có khả tăng cường chức Joomla hoàn cảnh nào Một component đặc trưng giống Menu item Những visitor và/hay user thấy content component cách click vào liên kết Menu item này Nó thường hiển thị vùng nội dung site Những component bao gồm với Joomla là : ƒ Banners – ô quảng cáo ƒ Contacts – Liên hệ ƒ Newsfeeds – điểm tin Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi ƒ Polls – thăm dò ƒ Web Links – liên kết web 2.2.2 Quản lý Module: Modules thường dùng để hiển thị thơng tin khác và/hoặc tính tương tác toàn site Joomla bạn Một Module chứa thứ từ văn đơn giản,đến HTML, đến ứng dụng hoàn toàn độc lập hãng thứ ba Những Module hiển thị nội dung tương tác, poll (thăm dò ý kiến), tagboard, tin nhất, tin khẩn và nhiều Các Site Module khác với Administrator Module chúng hiển thị nội dung Front-end site Admini Module liên quan đến tác vụ và/hoặc tính khác Administrative (hoặc Back-end) Các Module tạo bạn (costom/user module) hay tải và cài đặt Quản lý cac module luôn làm Administrator (Admin Seciton) Vào Modules Module Manager Menu Ở bạn cài đặt/tháo bỏ module và chỉnh sửa nhứng cấy hình phổ biến là: tên, trang xuất hiện, vùng đặt nó, và cấp độ truy cập Từ danh sách chọn module bạn muốn cấu hình Module Manager là thiết đặt hiển thị số lượng xác module Tận cuối danh sách ban thấy chức tổ chức trang, nơi cho phép bạn điều hướng đến cài đặt module danh sách Bạn cài đặt số module hiển thị trang băng chọn số hộp chọn đổ xuống góc phải màn hình Ở bạn tìm thấy danh sách tất thiết lập mặc đinh site module cài đặt Joomla Mỗi quy chiếu đến loại module cụ thể định từ trước Dưới tiêu đề danh sách cụ thể hiển thị trạng thái Module cài đặt hệ thống Những Module xác đinh môt kểu (ví dụ mod_mainmenu) Nhiều thể module có thẻ tạo cách chép mơt loại module cụ thể, cho tiêu đề khác và thông số khác theo nhu cầu bạn 2.2.3 Quản lý Template: Cung cấp nơi làm việc để cài đặt và điều khiển template Các Administrator và Manager với quyền cấp phép đặc biệt cho Template Manager chỉnh sửa template Cái nhìn cung cấp cho bạn danh sách template cài Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi đặt Một dấu kiểm xanh lên bên tên template xuất Vài thông tin template lên Các template gán cho phần khác site, giống module Nếu bạn có nhiều template cài đặt hệ thống Joomla, bạn điểu khiển chúng cách thuận lợi Bạn gán template cho (hay nhiều) trang đặc biệt từ than công cụ Khi bạn chọn template để gán, bạn thấy danh sách trang dể chọn Bạn chọn nhiều trang từ menu và gán chúng cho template Khi gán song, template người dùng click vào trang này Nó đè lên template mặc định Nếu bạn muốn xóa template gán từ (hay nhiều) trang, chọn lai template gán (bằng nút radio), click biểu tượng “Assign” công cụ Bây bạn chọn item bạn khơng muốn gán cho template này hay khác, click “None” để xóa hoàn toàn việc gán cho template này Template Manager cho phép bạn chuyển đổi qua lại template mặc định (dùng nút Default) xuất tất trang mà khơng có gán đặc biệt nào CHÚ Ý : Cả template gán và template mặc định bị gạt qua bên Template Selector module, có dùng Để biết cách cài đặt và tháo bỏ Site Template và Administrator Template, click vào liên kết Help Screen này Install/Uninstall a Language or Template Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Để biết cách chỉnh sửa và xuất Site Template và Administrator Template, lick vào liên kết Help Screen này Template Manager CHÚ Ý :Những Administrator Template bật tắt cách nhấn biểu tượng “Publish” Chúng gán cho trang Administrator 2.2.4 Cách đưa module,template vào joomla  Bước 1:Đưa trỏ chuột vào extensions sổ xuống,rồi ấn vào extensions manager để install module template Trang Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi  Bước 2:Chọn tệp cần upload  Bước 3:Sau chọn xong tập tin cần upload xong ấn vào upload &install Trang 10 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Các thư mục và tập tin Joomla! Cài đặt Joomla! 1.7.x localhost  Mở trình duyệt web và nhập http://localhost vào địa trình duyệt sau nhấn Go phím Enter Địa web localhost Chương trình cài đặt Joomla xuất cửa sổ trình duyệt Sau là bước cài đăt Joomla! 1.7 Localhost  Choose language (Chọn ngôn ngữ cài đặt) Bạn chọn ngôn ngữ cài đặt Đây là ngôn ngữ hiển thị trình cài đặt sau cài đặt xong ngôn ngữ mà bạn chọn tích hợp sẵn cài đặt Joomla! hiển thị ln ngơn ngữ này, khơng hiển thị ngôn ngữ mặc định là tiếng Anh và bạn cần phải tự tay cài đặt thêm gói ngơn ngữ Sau chọn xong nhấn Next Chọn ngôn ngữ cài đặt Joomla!  Pre-Installation check (Kiểm tra trước cài đặt) Để đảm bảo trình cài đặt và sử dụng Joomla! tốt nhất, chương trình kiểm tra trước thông số máy chủ web xem có phù hợp với Joomla! hay khơng Đây là thơng số cần biết để sau này chọn Host cho trang web thiết kế Joomla! Tất thơng số phải có màu xanh hình, có thơng số nào màu đỏ chứng tỏ thơng số khơng phù hợp với Joomla! bạn cần phải thay đổi lại thông số này và nhấn vào nút Check Again để kiểm tra lại Nếu tất thơng số bạn nhấn Next để tiếp tục Trang 16 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Kiểm tra trước cài đặt Joomla! Database Type: Chọn loại sở liệu, thông thường là MySQL 1) Host Name: Nhập tên Host, thông thường là localhost 2) Username: Nhập tên tài khoản truy cập Database, cài đặt Localhost nên tên truy cập này thường mặc định thường là root 3) Password: Nhập mật truy cập Database, cài đặt Localhost nên mật truy cập này để trống (khơng có mật khẩu) 4) Database Name: Nhập tên Database, là tên bạn đặt lúc tạo Database 5) Table Prefix: Tiền tố bảng liệu, Joomla! 1.7 tạo cách ngẫu nhiên, bạn đặt lại theo ý muốn 6) Backup/Remove: Lựa chọn Sao lưu (Backup) hay Xóa (Remove) bảng liệu có sẵn sử dụng lại Database cũ Nhấn Next để tiếp tục Nếu thơng tin khai báo chương trình cài đặt chuyển sang bước kế tiếp, không chương trình yêu cầu bạn nhập thơng tin tiếp tục  FTP Configuration (Thiết lập cấu hình FTP) Đây là phần thiết lập FTP, giao thức truyền tập tin mạnginternet Bước cài đặt này thông thường không cần phải thực trừ số Host có yêu cầu Bạn bỏ qua thông số này và nhấn Next để tiếp tục (Sau này thiết lập lại cần thiết phần quản lý Joomla!) Trang 17 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Thiết lập cấu hình FTP  Configuration (Phần cấu hình) Tại bước này bạn thiết lập thông tin cho trang web Thiết lập cấu hình cho Joomla! 1) Site Name: Nhập tên cho trang web, là tên trang web tên miền (Domain Name) nhiên muốn bạn đặt theo tên miền Ngoài bạn nhấn vào Advanced Settings - optional để nhập thêm thông tin: - Meta Description: Nhập phần mô tả ngắn để giới thiệu cho nội dung trang web - Meta Keywords: Nhập từ khóa có liên quan đến nội dung trang web, từ khóa này giúp người sử dụng tìm kiếm trang web bạn sử dụng cơng cụ tìm kiếm (yahoo, google, ) Bạn nhập nhiều từ khóa, từ cách dấu phẩy (,) 2) Admin Email: Nhập địa email người quản trị trang web, là địa Email dùng để trao đổi thông tin tự động trang web và thành viên 3) Admin Username: Đặt tên cho tài khoản dùng để truy cập vào phần quản trị trang web, đặt tên tùy ý, là tài khoản có quyền hạn cao (Super Admin) 4) Admin Password: Đặt mật cho tài khoản quản trị trang web 5) Confirm Admin Password: Nhập lại lần để xác nhận mật này Trang 18 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi 6) Install Sample Data (Cài đặt liệu mẫu), là lần cài đặt và sử dụng Joomla! bạn nhấn vào nút này để tìm hiểu cách thiết lập cấu hình và sử dụng thông qua liệu mẫu Sau nhấn vào nút này thơng báo liệu mẫu cài đặt và ẩn  Finish (Hoàn tất cài đặt) Hoàn tất cài đặt Joomla! Chương – THIẾT KẾ CÁC THÀNH PHẦN CHÍNH CỦA WEBSITE: 3.1Cài đặt template: 3.1.1 Thiết kế template:  Bước 1:Chuẩn bị Download template mẫu webx  Bước 2:Thiết kế giao diện Cấu trúc giao diện Trang 19 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Template_demo -images -css -js -html(sao chép từ template mẫu 2.5) -favicon.ico -template_thumbnail.png -templateDetails.xml -index.php Trang 20 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi  Bước 3:Chuyển giao diện sang template joomla Trang 21 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Kết khung Index.php để xác định vị trí module TemplateDetails.xml đặt vị trí module Trang 22 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi  Bước 3:Cài đặt joomla bình thường: 3.1.2 Vẽ cấu trúc khung : 3.1.3 Cài đặt template vừa tạo : Trang 23 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Chọn template vừa tạo: Trang 24 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi 3.1.4 Tạo menu và đặt vị trí cho trang web : Tạo menu cho menu vừa tạo: Trang 25 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi 3.1.5 Cài đặt module cần thiết cho trang web: Trang 26 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi 3.2Viết bài:  Bước 1:Tạo trung gian,để kết nối tới menu và bài viết  Bước 2:Viết bài trỏ đến trung gian Trang 27 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi  Bước 3:Kết nối menu tới trung gian Trang 28 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi Kết quả: Trang 29 Đồ Án Tốt Nghiệp GVHD:Hồ Diên Lợi KẾT THÚC Ngôn ngữ Joomla kết hợp với hệ quản trị sở liệu MySQL cho phép thiết và xây dựng Web có tính cao Thời đại mà công nghệ thông tin trở thành nhu cầu thiếu Việc trường học có trang web giúp sinh viên thu thập thông tin nhanh Với thời gian và lực có hạn, thời gian chúng em nghiên cứu và ứng dụng ngôn ngữ Joomla và hệ quản trị MySQL để xây dựng trang Web Khoa công nghệ công nghệ thông tin Đề tài này hoàn thành, xong khơng thể tránh khỏi thiếu sót và kết đạt chưa cao Kính mong thơng cảm thầy cô và bạn Để hoàn thành đề tài này, lần em xin chân thành cảm ơn giảng viên Hồ Diên Lợi là người quan tâm, giúp đỡ chúng em suốt thời gian qua Và cho chúng em bày tỏ lòng biết ơn tới thầy giáo, cô giáo khoa Công Nghệ Thông Tin giúp chúng em hoàn thành đề tài chuyên ngành này CHÚNG EM XIN CHÂN THÀNH CẢM ƠN Trang 30 ... Joomla và hệ quản trị MySQL để xây dựng trang Web Khoa công nghệ công nghệ thông tin Đề tài này hoàn thành, xong tránh khỏi thiếu sót và kết đạt chưa cao Kính mong thông cảm thầy cô và bạn Để... giáo dục lĩnh vực khác…qua chúng em muốn xây dựng website lĩnh vực giáo dục,nên đồ án tốt nghiệp này chúng em chọn đề tài thiết kế website trang Khoa Công Nghệ Hóa Học 1.2 Đối tượng nghiên cứu:... MySQL cho phép thiết và xây dựng Web có tính cao Thời đại mà cơng nghệ thơng tin trở thành nhu cầu thiếu Việc trường học có trang web giúp sinh viên thu thập thông tin nhanh Với thời gian và