XÂY DỰNG và THIẾT kế WEBSITE

MỤC LỤC MỤC LỤC PHẦN MỞ ĐẦU 1 Lý do, mục đích chọn đề tài Giới thiệu tổng quan Joomla Mục tiêu Website: .4 PHẦN CÀI ĐẶT, HIỂN THỊ WEBSITE .4 Cài đặt Appserv 2.5.9 để tạo localhost: Sử dụng quyền quản trị để đăng nhập quản trị website: .18 Thêm/Xóa/Hạn chế thành viên: 19 XÂY DỰNG VÀ THIẾT KẾ WEBSITE .20 Xây dựng website 20 Thiết kế website: 22 2.1 Tạo Catelogy, Section, Article 22 2.2 Tạo Menu 23 2.3 Tạo/Xóa/ Sửa Article (bài viết) 26 2.4 Tạo liên kết viết menu 27 2.5 Module đăng nhập, đăng ký, quên mật khẩu 28 2.6 Module footer show copyright website 28 2.7 Module showslide ảnh giới thiệu Trang chủ 29 2.8 Module show banner Hình ảnh hoạt động .31 2.9 Module show vị trí truy cập 33 2.10 Module show thành viên lãnh đạo .33 2.11 Tạo menu Contact (Liên hệ) cho website 34 2.12 Tạo Mod_banner quảng bá wedsite .37 2.13 Module bình chọn thăm dị ý kiến 39 2.14 Module tin cũ tin đọc: .40 PHẦN KẾT LUẬN .42 CÁC WEBSITE THAM KHẢO 42 GVHD: ths Nguyễn Quang Ninh PHẦN MỞ ĐẦU Lý do, mục đích chọn đề tài Trong thế kỷ mà công nghệ liên tục phát triển, doanh nghiệp cần chiến lược phương pháp điều hành có hiệu quả Vấn đề bản đặt là: thị trường thế giới thời kỳ chuyển biến sôi động hội nhập quốc tế Internet đã trở thành công cụ hỗ trợ có hiệu quả kinh doanh trực tuyến Các doanh nghiệp cần có website để tạo dựng uy tín khơng đời sống thực tế mà tận dụng nhiều hội tốt phục vụ khách hàng tiềm thị trường nước Tuy nhiên, bên cạnh đó, với doanh nghiệp có quy mơ nhỏ, việc nên xây dựng website hay không vấn đề cần quan tâm Tuy vậy nếu xây dựng Website ngày khơng cịn khó khăn tốn nhiều kinh phí nó mang lại cho Doanh nghiệp nhiều lợi ích: Tiếp cận thị trường thế giới: - Cung cấp đầy đủ thông tin cho khách hàng cách nhanh chóng, tiện lợi - Giải đáp thắc mắc, yêu cầu khách hàng cách nhanh chóng, hiệu quả - Cung cấp dịch vụ tiện lợi cho khách hàng chọn hàng, đặt hàng lúc nơi - Kinh doanh mà không bị giới hạn phạm vi địa lý - Truyền tải nhiều thông tin, thời lượng - Dễ dàng theo dõi hiệu quả nhận phản hồi khách hàng - Tiết kiệm chi phí marketing truyền thống: in ấn, phone, fax, nhân viên tiếp thị - Tạo dựng tăng lợi thế cạnh tranh - Tăng cường hội nhập quốc tế GVHD: ths Nguyễn Quang Ninh - Việc toán trực tuyến dịch vụ doanh nghiệp cần phải hướng tới để giảm chi phí sản xuất, giảm chi phí giao dịch tạo tiện lợi lớn cho khách hàng “Một doanh nghiệp không có website hẳn không theo kịp thời đại, không chuyên nghiệp” Giới thiệu tổng quan Joomla Đã có số trang web Việt Nam phát triển dựa Joomla Với lợi thế hệ thống mở, dễ dàng thay đổi giao diện, công cụ quản trị tốt, có tính phát triển cao miễn phí giúp tiếp cận rộng rãi, Joomla môi trường tốt cho phát triển trang Web tương lai Joomla! hệ quản trị nội dung mã nguồn mở Joomla! viết ngôn ngữ PHP kết nối đến sở liệu MySQL, điều giúp người dùng dễ dàng xuất bản nội dung họ lên internet Joomla phát âm theo tiếng Swahili Jumla, có nghĩa “Đồng tâm hiệp lực” Joomla! có mã nguồn mở hồn tồn miễn phí cho người dùng thế giới Joomla có đặc tính bản 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, bản tin nhanh, blog, diễn đàn, bình chọn, bảng biểu, hỗ trợ tìm kiếm site hỗ trợ đa ngôn ngữ Joomla! có nguồn gốc từ Mambo công cụ giúp tạo quản trị website tiếng Tuy nhiên, Mambo Foudation tác động hỗ trợ cho tập đoàn Miro Australia muốn ngăn cản Mambo sử dụng rộng rãi cộng đồng bất đồng quan điểm đã xảy Ngày 17.8.2005, tồn 20 thành viên nịng cốt nhóm phát triển đã rời khỏi dự án Mambo làm việc với phiên bản 4.5.3 thành lập nhánh lấy tên Joomla! Nhờ sự trợ giúp Trung tâm Luật Tự Phần mềm (Software Freedom Law Center SFLC), 20 thành viên nòng cốt cũ Mambo đã thành lập tổ chức phi lợi nhuận khác lấy tên Open Source Matters, để hỗ trợ mặt tổ chức, pháp lý kinh phí cho dự án mã nguồn mở cịn chưa đặt tên họ Cùng lúc đó, nhóm phát triển lập website lấy tên OpenSourceMatters để phân phối thông tin tới người sử dụng, người phát triển, người thiết kế cộng đồng Joomla nói chung Ngày 16.09.2005 phiên bản Joomla 1.0 đời GVHD: ths Nguyễn Quang Ninh Hiện Joomla ứng dụng rộng rãi cổng thông tin điện tử, thương mại trực tuyến, báo chí trực tuyến, website cá nhân hoặc tổ chức Dòng phiên bản 1.0.x: phiên bản phát hành ổn định sử dụng rộng rãi.Có nhiều thành phần mở rộng(component, module, ) Phiên bản (1.0.0) đời ngày 15.09.2005 Phiên bản tốt dòng 1.0.x 1.0.13 đời ngày 21.07.2007 Dòng phiên bản 1.5.x đã phát triển Joomla 1.5 RC1 vào cuối tháng năm 2007, hoạt động chưa ổn định nên chủ yếu chạy thử nghiệm máy đơn Những địa cần quan tâm: Website thức Joomla tại địa http://joomla.org Bản demo Joomla: http://demo.joomla.org Thành phần mở rộng hỗ trợ :http://extensions.joomla.org Những thông tin chi tiết Joomla viết tiếng Việt có thể đọc tại http://vi.wikipedia.org/wiki/Joomla Cộng đồng người sử dụng nguồn mở Joomla Việt Nam, theo thống kê nhất, với trung bình 25.000 đăng ký với 5.000.000 lượt viếng thăm tháng, Joomla hệ thống quản trị nội dung mã nguồn mở có đặc tính: linh hoạt, đơn giản, tính tuỳ biến cao công cụ mạnh sử dụng nhiều toàn thế giới từ trang web đơn giản cho đến ứng dụng phức tạp Mục tiêu Website: Bất kì website xây dựng nó có chung yếu tố quan trọng đó xây dựng hệ thống thông tin Theo quan điểm trực tuyến: nếu liệu hoặc nội dung trang web cấu trúc theo cách thân thiện cho tìm kiếm kết quả đạt tích cực Nội dung trang: Bố cục nội dung hiển thị vị trí cố định Hạn chế bị lỗi cập nhật thơng tin nó tràn sang phần khác trang web Nội dung viết không dài hay ngắn, viết phải chất lượng nhằm thu hút du khách đến với trang site Dùng heading cho tiêu đề viết Viết nội dung tiếng Việt có dấu hay không dấu tùy biến Tùy theo yếu tố quan trọng tiêu đề Giao diện website: GVHD: ths Nguyễn Quang Ninh Bố cục website phải rõ ràng, website thể cấu trúc trang web( header, nội dung, footer) Website hoạt động tốt Xác định cho người dùng biết làm đâu PHẦN CÀI ĐẶT, HIỂN THỊ WEBSITE Cài đặt Appserv 2.5.9 để tạo localhost: Để xây dựng website Joomla localhost, cần phải có server ảo máy tính Nhiều phần mềm có chức này, báo cáo này, tơi tạm dùng Appserv-win32-2.5.8 chương trình hồn tồn miễn phí, dễ sử dụng nhẹ, phù hợp với máy cấu hình trung bình Download chương trình tại địa chỉ: "http://nchc.dl.sourceforge.net/project/appserv/AppServ%20Open %20Project/2.5.8/appserv-win32-2.5.8.exe" hoặc "http://www.mediafire.com/?mj01jqnzmzr" Tiến hành cài đặt: Bước 1: Chạy tập tin chương trình Bước 2: Xuất giao diện chương trình: GVHD: ths Nguyễn Quang Ninh Nhấn NEXT Bước 3: Xuất bản License, chọn I argee Nhấn NEXT Bước 4: Chọn đường dẫn cài đặt GVHD: ths Nguyễn Quang Ninh Mặc định C:\AppSev Nhấn NEXT Bước 5: Chọn Componens: GVHD: ths Nguyễn Quang Ninh Ở Appsever đã tổ hợp cài đặt Apache, MySQL, PHPMyadmin Nhấn NEXT Bước 6: Điền thông tin sever: Ở báo cáo tập trung xây dựng website localhost nên chọn: SeverName : localhost Email: Email quản trị Apache HTTP Port: 80 Nhấn NEXT Bước 7: Mật khẩu MySQL GVHD: ths Nguyễn Quang Ninh Nhập password confirm password Nhấn NEXT Bước 8: Chương trình tiến hành cài đặt: GVHD: ths Nguyễn Quang Ninh Bước 9: Hoàn tất cài đặt: Chọn Start Apache Start MySQL để chương trình khởi động Nhấn FINISH Với cài đặt mặc định: C:\AppServ\www địa webroot, nơi copy file php vào C:\AppServ\mysql\data\ chứa CSDL MySQL, CSDL folder, để lưu liệu MySQL, copy folder thành nhiều bản Kiểm tra: Mở trình duyệt web, gõ địa chỉ: "http://localhost/ "(hoặc "http://127.0.0.1") Trình duyệt sau nếu cài đặt thành công: GVHD: ths Nguyễn Quang Ninh 10 Access level: mức độ truy cập : Chọn public Parameters/ Select Article: Chọn viết menu trỏ đến (liên kết) Apply save để kết thúc, Preview để xem trước Nếu muốn thay đổi liên kết từ menu đến viết ta có thể thực cách vào Menus/Main Menu chọn menu cần thao tác thay đổi liên kết đến viết phần Parameters/ Select Article 2.5 Module đăng nhập, đăng ký, quên mật khẩu: Mở menu Extentsions/ Module Manager chọn New/Login Tùy chọn vị trí module Postion Nhấn Apply Save để kết thúc, Preview để xem trước 2.6 Module footer show copyright website: Mở menu Extentsions/ Module Manager chọn New/Custom HTML GVHD: ths Nguyễn Quang Ninh 28 Postion: chọn footer (thơng thường gán vị trí cuối website) Custom output chọn Edit HTML source Gõ đoạn code sau vào hộp thoại :

Đại học Vinh_ Nơi đào tạo nhân tài tương lai cho đất nước Địa chỉ: tpVinh_ Nghệ An

Trong đó ta có thể thay màu chữ cách thay vào chuỗi mã hexa tương ứng Nhấn Save để kết thúc kiểm tra Preview 2.7 Module showslide ảnh giới thiệu Trang chủ: Cài đặt module: Mở menu Ententsions/ Install/Uninstall chọn đường dẫn đến gói cài đặt module nhấn Upload & Install Copy thư viện ảnh cho slide vào thư mục: AppServ\www\Joomla\images\stories Mở menu Ententsions/ Module Manager chọn mod vừa cài đặt GVHD: ths Nguyễn Quang Ninh 29 Module Paramenters: Start Item: Mục bắt đầu Main Item width: Chiều rộng khung Slide Main Item hight: Chiều cao khung slide Description: Phần mô tả ( show hoặc khơng) Description When: Nếu Description chọn Yes chọn thao tác để mô tả Readmore text: Xem thêm Animation Duration: Thời gian chuyển hai ảnh liên tiếp Animation Type: Kiểu hình thức chuyển hai ảnh liên tiếp ( thường chọn Fading đẹp ) Effect: Hiệu ứng chuyển ảnh Container Width: Có tác dụng nếu chọn Animation type Moving Navigation: Điều hướng (chọn điều hướng dạng số hoặc hình nhỏ) Thumbnail width: Chiều rộng ảnh nhỏ (chỉ với Navigation: Thumnail) GVHD: ths Nguyễn Quang Ninh 30 Thumbnail height: Chiều cao ảnh nhỏ (chỉ với Navigation: Thumnail) Thumbnail Spacing: khoảng cách hình nhỏ với Number of thumnail: Số hình nhỏ điều hướng Control button: Hiện trỏ Auto play: Tự động trình diễn slide Interval: khoảng cách thời gian đổi ảnh liên tiếp nếu chọn auto play: yes Thumnail Opacity: thời gian ảnh nhỏ mờ chuyển Description background opacity: Thời gian mờ phần mô tả ảnh Next/Prev Images opacity: Thời gian mờ ảnh Nhấn Apply Save để kết thúc Preview để xem trước Chỉnh sửa khung thông số để phù hợp với website 2.8 Module show banner Hình ảnh hoạt động a Tạo Client banner: Mở menu Components/Banner/Client Client Name: Nhập tên khách hàng Contact Name: Nhập địa khách hàng Contact Email: Nhập email khách hàng Apply Save b Tạo Catelogies Banner: Mở menu Components/Banner/Catelogies Title: Tiêu đề (thường dùng để phân loại khách hàng) Apply Save c Tạo Banner: Mở menu Site/Media Manager chọn Banner upload ảnh cần thiết GVHD: ths Nguyễn Quang Ninh 31 Mở menu Components/Banner/Banners chọn New Name: Tên Banner ( vd: banner1) Catelogy: Chọn catelogies Client Name: Chọn Client Name Banner Image Selector: Chọn hình ảnh đã up load Media\Banner Width: Chiều ngang ảnh Height: Chiều cao ảnh (2 thông số quyết định sự cân đối ảnh với website, thường sau show banner, nếu thấy khơng phù hợp chỉnh sửa size ảnh đây) Apply Save Tương tự vậy tạo banner cần thiết để up lên website d Show Banner giao diện website: Mở menu Extentions/Module Manager/New/Banner Tittle: Tiêu đề Banner Position: Vị trí đặt banner (hình ảnh hoạt động show tại GVHD: ths Nguyễn Quang Ninh 32 Parameners/Count : Nhập số banner show Parameners/Banner Client: Chọn tên client đã tạo Parameners/Category: Chọn cate đã tạo Apply Save để kết thúc Preview để xem trước chỉnh sửa thông số height width banner cho phù hợp với website 2.9 Module show vị trí truy cập: Mở menu Extentsions/ Module Manager chọn New/Breadcrumbs Ở Module Parameters: Show Home : Chọn Yes nếu muốn đường dẫn trang chủ, chọn No nếu muốn đường dẫn trang kế tiếp Text for Home Entry: Viết giới thiệu trang chủ ( hiển thị đường dẫn ) Show Last : Yes nếu trang trước đó, chọn No nếu không Nhấn Save để kết thúc kiểm tra Preview 2.10 Module show thành viên lãnh đạo: Mở menu Extentsions/ Module Manager chọn New/Custom HTML GVHD: ths Nguyễn Quang Ninh 33 Position: vị trí module Edit HTML source sau: border="0" cellspacing="0" Tên vụ border="0" width="52" Chức Nếu muốn thêm item ta có thể làm tương tự Nhấn Save để kết thúc kiểm tra Preview 2.11 Tạo menu Contact (Liên hệ) cho website: a Tạo Contact: Mở menu Components/Contacts/Categories chọn New: Title: Tạo tên nhóm liên hệ Nhấn Apply Save Mở menu Components/Contacts/Contacts chọn New: GVHD: ths Nguyễn Quang Ninh 34 Tittle: Tên chủ liên hệ Catelogies: Chọn nhóm liên hệ Linked to user: Chọn liên kết đến người dùng Infomation: Điền thông tin người liên hệ Contact's Position: Vị trí thư liên hệ Email : Email thư liên hệ Street Address: Địa đường Town/Suburb: Thị trấn/Tỉnh State/Country: Bang/Quốc gia Postal Code/Zip: Mã vùng Country: Quốc gia Telephone: Điện thoại Mobile Phone Number: Số di động Fax: Số máy Fax Web URL: Đường dẫn đến trang chủ Miscellaneous Information: Thông tin cá nhân Contact Image: Chọn hình liên hệ Contact Parameters: Cho phép ẩn/hiện thông số liên hệ GVHD: ths Nguyễn Quang Ninh 35 Advanced Parameters: Tham số nâng cao Icon/ Text: Biểu tượng/chữ (văn bản/biểu tượng/No) Address Icon: Biểu tượng địa Email Icon: Biểu tượng thư Telephone Icon: Biểu tượng điện thoại Mobile Icon: Biểu tượng di động Fax Icon: Biểu tượng Fax Miscellaneous Icon: Biểu tượng cá nhân Email Parameters: Thông số email E-mail Form: Biểu mẫu thư Description Tittle: Dịng miêu tả Banned e-mail: Đình email Banned Subject: Đình chủ đề Banned Text: Đình nội dung Nhấn Apply Save để kết thúc b Tạo menu Liên hệ cho website: Mở menu Menus/Main Menu chọn New: Select Menu Item Type/InteralLinks/Contacts/Contact/Standar Contact Layout GVHD: ths Nguyễn Quang Ninh 36 Title: Liên Hệ (tên menu) Display in: chọn menu Parren Item: chọn menu chứa Parameters: Select contact: Chọn contact đã tạo Nhấn Apply Save để kết thúc Preview để xem trước 2.12 Tạo Mod_banner quảng bá wedsite: Mở menu Extensions/Module manager chọn New chọn Banner Title: Tên mod Position: Vị trí đặt mod Order: Muốn mod nằm mục Category:chọn category Tạo category: - Vào Components/Banner/categorie chọn New GVHD: ths Nguyễn Quang Ninh 37 Title: Tên category Apply save để kết thúc Tạo link quảng bá wed mod quảng bá: Vào Components/Banner/Banners chọn New Name : Tên quảng bá Category : Chọn category vừa tạo GVHD: ths Nguyễn Quang Ninh 38 Click URL: Đường dẫn đến wed quảng bá Custom Banner code: bạn copy đoạn mã dán vào:" {NAME}" nhấp vào tên quảng bá wed quảng bá Chọn apply save để kết thúc 2.13 Module bình chọn thăm dò ý kiến: Ở phần Extensions chọn Install/Uninstall chọn đường dẫn đến module thăm dò ý kiến sau đó nhấn Upload File & Install Vào Extentions/ Module Manager để thực thao tác module vừa cài đặt Title: Tên Position: Vị trí show Module Tạo ý thăm dò ý kiến cho Mod Vào mục Components/Polls chọn New GVHD: ths Nguyễn Quang Ninh 39 Title :Tên câu hỏi Option : Các ý kiến đưa Apply save lại để kết thúc Chọn Preview để xem thử 2.14 Module tin cũ tin đọc: Ở phần Extensions chọn Install/Uninstall chọn đường dẫn đến module thăm dò ý kiến sau đó nhấn Upload File & Install Vào Extentions/ Module Manager để thực thao tác module vừa cài đặt.Sẽ có mod cài đặt: Mod_newsflash: GVHD: ths Nguyễn Quang Ninh 40 Mod_latestnew: Và mod_mostread: GVHD: ths Nguyễn Quang Ninh 41 PHẦN KẾT LUẬN Hiện mã nguồn mở người dùng ưa chuộng tính cạnh tranh hồn thiện cao, chúng em viết báo cáo xây dựng website công cụ Joomla_ chương trình hồn tồn miễn phí, có xu hướng phát triển rộng tương lai Với 750.000 lượt truy cập ngày, việc thiết kế website cá nhân hay thương mại điện tử theo yêu cầu người dùng đơn giản hóa nhiều Dựa số tin tức trường Đại học Vinh, chúng em xây dựng website tin tức nhằm đưa đến cho bạn đọc thông tin bổ ích trường Đại học Vinh Mặc dù chúng em đã cố gắng để hoàn thiện trang website, kinh nghiệm kiến thức có hạn nên không thể tránh khỏi thiếu sót Rất mong nhận lời nhận xét từ thầy bạn để đề tài chúng em hoàn thiện Xin trân trọng cảm ơn Chúng em xin chân thành cảm ơn thầy giáo Nguyễn Quang Ninh, người đã tận tình hướng dẫn chúng em suốt trình làm đề tài Sinh viên thực hiện: Đặng Thị Thắm Nguyễn Trọng Đắc Cao Văn Trí CÁC WEBSITE THAM KHẢO www.joomlart.org; www.joomla.com (cộng đồng joomla việt nam); www.wikipmedia.com(từ điển bách khoa toàn thư mở ); www.jsharing.com (các templates thiết kế miễn phí mở rộng) GVHD: ths Nguyễn Quang Ninh 42 ... viên, thay đổi group hạn chế phù hợp Vậy ta đã xây dựng xong bản website mã nguồn Joomla! localhost XÂY DỰNG VÀ THIẾT KẾ WEBSITE Xây dựng website: a Cài đặt template: GVHD: ths Nguyễn Quang... từ trang web đơn giản cho đến ứng dụng phức tạp Mục tiêu Website: Bất kì website xây dựng nó có chung yếu tố quan trọng đó xây dựng hệ thống thông tin Theo quan điểm trực tuyến: nếu... tố quan trọng tiêu đề Giao diện website: GVHD: ths Nguyễn Quang Ninh Bố cục website phải rõ ràng, website thể cấu trúc trang web( header, nội dung, footer) Website hoạt động tốt Xác định