xây dựng webite du lịch sử dụng html css và ruby on rails

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP XÂY DỰNG WEBITE DU LỊCH SỬ DỤNG HTML/CSS VÀ RUBY ON RAILS Công ty thực tập : Neolab Việt Nam HCM Người phụ trách : Nguyễn Văn Tiến Thực tập sinh : Đặng Hoàng Long TP Hồ Chí Minh, tháng năm 2019 LỜI CẢM ƠN Để hoàn thành đồ án này, trước tiên, em xin gửi lời cảm ơn chân thành đến tồn thể giảng viên Trường Đại học Cơng nghệ thơng tin – ĐHQG TP.HCM nói chung, thầy Khoa Cơng nghệ Phần mềm nói riêng tận tâm truyền đạt kiến thức, kinh nghiệm, dạy tận tình cho chúng em từ ngày đầu bước chân vào trường, vào chuyên ngành Đặc biệt, lời cảm ơn sâu sắc em xin gửi tới công ty TNHH NeoLab Việt Nam TP.HCM, công ty tạo điều kiện cho em thực tập tham gia vào hoạt động cơng ty để có thêm kiến thức hồn thành tốt chương trình thực tập, em xin cảm ơn tới anh Nguyễn Văn Tiến, người đồng hành em suốt tập qua Được hướng dẫn trực tiếp anh với tận tâm bảo, theo sát hỗ trợ hết lịng, gắn bó chặng đường nhỏ khoảng thời gian để giúp cho em hoàn thành tốt đồ án lần Cuối cùng, em gửi lời cảm ơn tới anh chị, bạn bè Khoa Công nghệ Phần mềm nhiệt tình hướng dẫn, góp ý thiếu sót chia sẻ kinh nghiệm, tài liệu trình làm đồ án suốt thời gian em học tập trường Đặng Hoàng Long TpHCM, ngày 20 tháng năm 2019 Nguyễn Văn Tiến Đặng Hoàng Long NHẬN XÉT CỦA KHOA Nguyễn Văn Tiến Đặng Hoàng Long MỤC LỤC MỤC LỤC Chương 1: Giới thiệu công ty thực tập Giới thiệu công ty Neolab Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project 10 Lịch làm việc 11 Chương 3: Chi tiết project 14 Giới thiệu project 14 Thực 24 Kế hoạch 24 TÀI LIỆU THAM KHẢO 26 TỔNG KẾT 27 Nguyễn Văn Tiến Đặng Hoàng Long Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Neolab Neolab Việt Nam tự hào thành viên tập đoàn NeoCareer - Tập đoàn nhân sự, cơng nghệ hàng đầu Nhật Bản Tập đồn có gần 2000 nhân viên làm việc 50 văn phòng Nhật chi nhánh nước Châu Á Neolab Việt Nam chuyên cung cấp sản phẩm giải pháp CNTT, bao gồm phát triển ứng dụng thiết bị di động, website, nghiên cứu công nghệ Sản phẩm công ty Các dự án Neolab Việt Nam đa dạng lĩnh vực dịch vụ Hiện 100% dự án từ Nhật Bản Neolab định hướng không phát triển dự án cho khách hàng mà cịn phát triển hệ thống sản phẩm Hiện công ty chia thành hướng: Một hướng phận chuyên làm dự án với khách hàng, phận chuyên làm dự án sản phẩm công ty (Product) Công nghệ áp dụng Neolab Việt Nam cơng nghệ hồn tồn phát triển quốc gia, : VR, media (video) management system, SEM, Toilet Search App that reflects the true Japanese culture (very interesting) Nguyễn Văn Tiến Đặng Hoàng Long Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Xây dựng website du lịch sử dụng HTML/CSS với Ruby on Rails” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình web service, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc mơi trường phát triển phần mềm chun nghiệp Tìm hiểu công ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty • Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triển, quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty • Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc, hệ thống kênh chat riêng công ty… Kết : Hiểu thêm cơng ty Neolab, q trình thành lập phát triển Có thêm kỹ việc sử dụng email công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 2.2 Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng trình làm việc ▪ Trong thời gian này, anh Technical hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho cơng việc sau Một số phần mềm số Git - sử dụng làm việc nhóm, JIRA quản lý phân công công việc với nhiều tiện ích, Visual Studio Code - chương trình soạn thảo văn viết code hữu ích phổ biến với lập trình viên Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE Tìm hiểu HTML, CSS, Javascript Thời gian : 10 ngày Nội dung : Tìm hiểu thực hành HTML, CSS, Javascript ▪ Trong thời gian ngày, anh Technical hướng dẫn thực tập sinh tìm hiểu HTML, CSS Nguyễn Văn Tiến Đặng Hoàng Long ▪ Ngày thứ thứ 5, nhóm thực tập sinh thực hành làm tập HTML, CSS ▪ Ngày thứ 6, nhóm thực tập sinh hướng dẫn Javascipt/Jquery ▪ Ngày thứ 7, nhóm làm tập thực hành Javascript/Jquery ▪ Trong ngày tiếp theo, nhóm thực tập giao kiểm tra nội dung học: Hãy viết trang web cho phép người dùng đăng tin, sửa xóa blog họ Trong trang web có trang chính: Home (hiển thị tồn blog), About (hiển thị thơng tin thực tập sinh), Contact (cho phép người dùng gửi thông tin góp ý cho trang web) Trong blog, sử dụng Jquery để người dùng comment đếm số lượt view, hiển thị thông tin cần thiết blog Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE 2.3 Tìm hiểu ngơn ngữ Ruby Thời gian : ngày Nội dung : Được training kỹ thuật Ruby từ đến nâng cao, kiến thức quan trọng cho việc tối ưu website - Lập trình hướng đối tượng Các kiến thức lập trình hướng đối tượng khái niêm, đặc tính tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngồi ra, thực tập sinh hướng dẫn cách thiết kế lớp cho services kiến trúc phần mềm - Mơ hình MVC : Mơ hình MVC mơ hình kiến phần mềm tạo với mục đích quản lý xây dựng dự án phần mềm có hệ thống Mơ hình dùng rộng rãi đặc biệt ngôn ngữ lập trình web - Nền tảng trình duyệt Thực tập sinh hướng dẫn kĩ thuật sử dụng web tools cấu trúc phạm vi trình duyệt giao tiếp với giao thức mạng Những kiến thức áp dụng xuyên suốt trình hình thành lên internet - Ruby on Rails: Ruby on Rails web framework viết ngơn ngữ lập trình Ruby sử dụng việc xây dựng phát triển ứng dụng web Phiên Ruby on Rails giới thiệu cộng đồng vào năm 2015 Ruby Nguyễn Văn Tiến Đặng Hoàng Long on Rails phần mềm mã nguồn mở miễn phí phát triển David Heinemeier Hansson Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học Kết : - 2.4 Nâng cao kỹ lập trình với ngơn ngữ Ruby Có kiến thức quan trọng cho việc lập trình web sau Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu Lập trình Ruby on Rails Thời gian : ngày Nội dung: Các kiến thức Ruby on Rails để làm web đơn giản - Khái niệm Ruby on Rails: Ruby ngơn ngữ lập trình, sử dụng Ruby lập trình viên phát triển nhiều loại ứng dụng khác ngồi việc tạo website ví dụ phần mềm chạy máy tính cá nhân hay máy chủ Ruby on Rails web framework viết sử dụng ngôn ngữ Ruby Ruby on Rails giới hạn việc xây dựng phát triển ứng dụng web Ruby on Rails xây dựng tập quán đại xây dựng phát triển website bạn nắm vững Ruby on Rails bạn dễ dàng chuyển sang web framework khác Ruby on Rails có cấu trúc sáng dễ hiểu dễ tiếp cận cho lập trình viên vào nghề Ngồi ra, Rails cung cấp cho cơng cụ cửa sổ dịng lệnh CLI giúp tự động hố nhiều cơng việc thường gặp lập trình qua tăng tốc độ hiệu suất làm việc - Nguyễn Văn Tiến Mơ hình MVC: MVC viết tắt Model – View – Controller Là kiến trúc phần mềm hay mơ hình thiết kế sử dụng kỹ thuật phần mềm Nói cho dễ hiểu, mơ hình phân bố source code thành phần, thành phần có nhiệm vụ riêng biệt độc lập với thành phần khác Đặng Hoàng Long Controller: Giữ nhiệm vụ nhận điều hướng yêu cầu từ người dùng gọi phương thức xử lý chúng… Chẳng hạn thành phần nhận request từ url form để thao tác trực tiếp với Model Model: Đây thành phần chứa tất nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả liệu Class, hàm xử lý… View: Đảm nhận việc hiển thị thông tin, tương tác với người dùng, nơi chứa tất đối tượng GUI textbox, images… Hiểu cách đơn giản, tập hợp form file HTML - Kiến thức mạng Mơ hình OSI (Open Systems Interconnection Reference Model, viết ngắn OSI Model OSI Reference Model) - thiết kế dựa vào nguyên lý tầng cấp, lý giải cách trừu tượng kỹ thuật kết nối truyền thơng máy vi tính thiết kế giao thức mạng chúng Mơ hình phát triển thành phần kế hoạch Open Systems Interconnection ISO IUT-T khởi xướng Nó cịn gọi Mơ hình bảy tầng OSI Mơ hình OSI phân chia chức giao thức thành chuỗi tầng cấp Mỗi tầng cấp có đặc tính sử dụng chức tầng nó, đồng thời cho phép tầng sử dụng chức Một hệ thống cài đặt giao thức bao gồm chuỗi tầng nói gọi protocol stack Chồng giao thức cài đặt phần cứng, phần mềm, tổ hợp hai Thông thường có tầng thấp Nguyễn Văn Tiến Đặng Hoàng Long 10 cài đặt phần cứng, tầng khác cài đặt phần mềm - User Interface Html/css ngôn ngữ makeup cho việc thiết kế giao diện người dùng cho phép người dùng có trải nghiệm thực với control có sẵn html5 với việc tạo style control css làm cho web page có thêm phần thực tế Javascript coi ngôn ngữ lập trình chạy tang trình duyệt máy tính khách để xử lý logic việc thiết kế user interface có sẵn html/css Bootstrap xem thư viện javascript phổ biến việc cung cấp nguồn tài nguyên css style theo chiều hướng tốt có sẵn giúp cho lập trình viên front end phát triển UI nhanh tiết kiệm nhiều thời gian mà có trải nghiệm tốt Thực : - Tham gia đầy đủ buổi trainning - Làm tập thực hành tạo website liên kết database áp dụng cấu trúc CRUD, routes … - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm lập trình ứng dụng web với ruby on rails - Tạo website sử dụng ruby on rails Thực project Sau tháng training, thực tập sinh nắm kiến thức HTML, CSS, Javascript/Jquery, Ruby bản, Ruby nâng cao, Ruby on Rails, kỹ thuật testing thực hành tự viết trang website cho người dùng đăng blog sử dụng kiến thức HTML/CSS Javascript/Jquery học Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để áp dụng ngôn ngữ Ruby (sử dụng Ruby On Rails) vào trang blog làm tháng thứ thực project website du lịch kết hợp front-end back-end Chi tiết đồ án nói phần sau Nguyễn Văn Tiến Đặng Hoàng Long 13 Thực code giao diện front-end - Thực phân tích vẽ sơ đồ ERD cho database - Viết chức đăng nhập - Viết chức quản lý CRUD (thêm/xóa/sửa) đối tượng database - Viết chức hiển thị trang blog du lịch Giai đoạn Sprint 2: - Viết chức chuyển đổi tiền tệ, thời tiết - Hoàn thiện chức hiển thị trang blog du lịch - Viết chức hiển thị trải nghiệm du lịch - Sửa lỗi bug hoàn thiện chức tìm kiếm Giai đoạn Sprint giai đoạn kết thúc, báo cáo : - Viết chức đặt trải nghiệm theo ngày - Test lại chức làm sửa lỗi - Báo cáo cuối đợt thực tập - Nguyễn Văn Tiến Anh Nguyễn Văn 100% Tiến Anh Nguyễn Văn 90% Tiến Đặng Hoàng Long 14 Chương 3: Chi tiết project Giới thiệu project SUITO Japan trang web du lịch giới thiệu trải nghiệm có địa điểm Bên cạnh đó, trang web cịn đăng blog host viết trải nghiệm riêng họ địa điểm đó, giới thiệu địa điểm có đặc biệt đến tham quan Khi người dùng sử dụng, họ nhận gợi ý blog trải nghiệm có liên quan đến địa điểm, hashtags, loại mục categories Hơn nữa, người sử dụng cung cấp chức tìm kiếm trải nghiệm blog, theo hashtags, thời gian du lịch, loại mục categories Sau chọn trải nghiệm u thích, người dùng tiến hành đặt trải nghiệm với tính booking đơn giản dễ dàng Nguyễn Văn Tiến Đặng Hoàng Long 15 Nguyễn Văn Tiến Đặng Hoàng Long 16 Nguyễn Văn Tiến Đặng Hoàng Long 17 Nguyễn Văn Tiến Đặng Hoàng Long 18 Nguyễn Văn Tiến Đặng Hoàng Long 19 Nguyễn Văn Tiến Đặng Hoàng Long 20 Nguyễn Văn Tiến Đặng Hoàng Long 21 Nguyễn Văn Tiến Đặng Hoàng Long 22 Nguyễn Văn Tiến Đặng Hoàng Long 23 Nguyễn Văn Tiến Đặng Hoàng Long 24 Thực thành viên team internship NeoLab HCM: - Đặng Hoàng Long Đặng Nghĩa Dương Thị Trang Và giúp đỡ tận tình team trainer NeoLab Việt Nam HCM Kế hoạch Giai đoạn Sprint 1: Scrum master: Đặng Nghĩa - Khảo sát lấy yêu cầu trang web Cài đặt cơng nghệ cần thiết Hồn thành giao diện front-end với template cho trước Phân tích thiết kế database Viết chức thêm/xóa/sửa đối tượng database cho admin Viết chức đăng nhập Hiển thị blog mục blog trang Blog trang Home Deploy sản phẩm Kết : - Các tính hồn thành 70% Cịn thiếu sót chưa kiểm thử Được anh trainer góp ý để hoàn thiện Giai đoạn Sprint 2: Scrum master: Đặng Hoàng Long - - Hoàn thiện lỗi Sprint Hoàn thành trang blog Hiển thị trải nghiệm mục Experience trang Experience trang Home Viết chức chuyển đổi tiền tệ Viết chức hiển thị thời tiết vị trí Viết chức tìm kiếm blog trải nghiệm trang Home, Blog, Experience Deploy sản phẩm Nguyễn Văn Tiến Đặng Hoàng Long 25 Kết : Đã hồn thành tồn tính anh trainer góp ý để hồn thiện tốt chức Giai đoạn Sprint 3: Scrum master: Dương Thị Trang - Hoàn thiện lỗi góp ý Sprint Viết chức booking Kiểm thử Thiết kế lại giao diện đăng nhập Viết chức chuyển đổi ngôn ngữ Việt – Anh Deploy sản phẩm Kết : - Hầu hết tính thực hiện, trừ phần AI Hỗ trợ thêm đồ có địa hình cao thấp Nguyễn Văn Tiến Đặng Hoàng Long 26 TÀI LIỆU THAM KHẢO For Ruby On Rails https://viblo.asia/p/series-huong-dan-lap-trinh-ruby-on-rails-phan-1-mrDkMrrNvzL https://www.tutorialspoint.com/ruby/ Ruby On Rails Tutorial – 4th Edition – Michael Hartl For HTML5/CSS3 https://www.tutorialspoint.com/html_online_training/index.asp https://www.tutorialspoint.com/css_online_training/index.asp For Javascript/Jquery https://www.tutorialspoint.com/javascript/index.htm Nguyễn Văn Tiến Đặng Hoàng Long 27 TỔNG KẾT Như vậy, vòng hai tháng ngắn ngủi, em kịp hoàn thành project chạy tảng web viết ngôn ngữ Ruby, sử dụng framework Ruby On Rails Website có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính website cịn đơn giản, hình ảnh chưa đẹp mong đợi Chân thành cảm ơn giúp đỡ anh chị nhóm trainer cơng ty NeoLab HCM, nỗ lực nhóm thực tập chúng em để hồn thành đồ án kết thúc tập Cảm ơn thầy Lê Thanh Trọng giúp em hoàn thành báo cáo Nguyễn Văn Tiến Đặng Hoàng Long ... nhân hay máy chủ Ruby on Rails web framework viết sử dụng ngôn ngữ Ruby Ruby on Rails giới hạn việc xây dựng phát triển ứng dụng web Ruby on Rails xây dựng tập quán đại xây dựng phát triển website... thức áp dụng xuyên suốt trình hình thành lên internet - Ruby on Rails: Ruby on Rails web framework viết ngơn ngữ lập trình Ruby sử dụng việc xây dựng phát triển ứng dụng web Phiên Ruby on Rails. .. Học Ruby nâng cao - Tìm hiểu mơ hình MVC Ruby on Rails - Tìm hiểu Rails - Đọc nghiên cứu sách Ruby On Rails Tutorial - Đọc nghiên cứu sách Ruby On Rails Tutorial (tt) - Áp dụng Ruby on Rails vào