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

Đặc biệt, lời cảm ơn sâu sắc của em xin gửi tới công ty TNHH NeoLab Việt Nam tại TP.HCM, công ty đã tạo điều kiện cho em được thực tập và tham gia vào hoạt động của công ty để có thêm ki

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

Thực tập sinh : Đặng Hoàng Long

TP Hồ Chí Minh, tháng 8 năm 2019

LỜI CẢM ƠN

Để hoàn thành được đồ án này, trước tiên, em xin gửi lời cảm ơn chân thành đến toàn thể giảng viên Trường Đại học Công nghệ thông tin – ĐHQG TP.HCM nói chung, các thầy cô trong 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, chỉ dạy tận tình cho chúng em từ những 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 của em xin gửi tới công ty TNHH NeoLab Việt Nam tại TP.HCM, công ty đã tạo điều kiện cho em được thực tập và tham gia vào hoạt động của công ty

để có thêm kiến thức cũng như hoàn thành tốt được chương trình thực tập, và em cũng xin cảm

ơn tới anh Nguyễn Văn Tiến, người đã đồng hành cùng em trong suốt kỳ thực tập qua Được sự hướng dẫn trực tiếp của anh cùng với sự tận tâm chỉ bảo, luôn theo sát và hỗ trợ hết lòng, gắn bó trong từng chặng đường nhỏ trong khoảng thời gian này để giúp cho em hoàn thành tốt đồ án lần này

Cuối cùng, em cũng gửi lời cảm ơn tới các anh chị, bạn bè trong Khoa Công nghệ Phần mềm đã nhiệt tình hướng dẫn, góp ý về những thiếu sót cũng như chia sẻ những kinh nghiệm, tài liệu trong quá trình làm đồ án này cũng như trong suốt thời gian em học tập tại trường

Đặng Hoàng Long

TpHCM, ngày 20 tháng 8 năm 2019

NHẬN XÉT CỦA KHOA

MỤC LỤC

MỤC LỤC 4

Chương 1: Giới thiệu công ty thực tập 5

1 Giới thiệu công ty Neolab 5

2 Sản phẩm của công ty 5

Chương 2: Nội dung thực tập 6

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty 6

2 Nghiên cứu kỹ thuật 6

3 Thực hiện project 10

4 Lịch làm việc 11

Chương 3: Chi tiết về project 14

1 Giới thiệu về project 14

2 Thực hiện 24

3 Kế hoạch 24

TÀI LIỆU THAM KHẢO 26

TỔNG KẾT 27

Chương 1: Giới thiêu công ty thực tập

1 Giới thiệu công ty Neolab

Neolab Việt Nam tự hào là thành viên tập đoàn NeoCareer - Tập đoàn về nhân sự, công nghệ hàng đầu Nhật Bản Tập đoàn có gần 2000 nhân viên làm việc tại hơn 50

văn phòng tại Nhật và các chi nhánh tại các nước Châu Á

Neolab Việt Nam chuyên cung cấp các sản phẩm và giải pháp CNTT, bao gồm phát triển ứng dụng trên thiết bị di động, website, nghiên cứu những công nghệ mới

Công nghệ được áp dụng tại Neolab Việt Nam là những công nghệ hoàn toàn mới

và đang rất phát triển tại các quốc gia, như : VR, media (video) management system,

SEM, Toilet Search App that reflects the true Japanese culture (very interesting)

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 được đào tạo toàn diện về lập trình web service, đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên

có cơ hội được học tập, khám phá và làm việc trong một môi trường phát triển phần mềm chuyên nghiệp

1 Tìm hiểu công ty và các kỹ năng cơ bản trong công ty

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

• Được nghe người phụ trách giới thiệu về công ty, quá trình thành lập và 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ủa công ty

• Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc, hệ thống kênh chat riêng của công ty…

Kết quả : Hiểu thêm về công ty Neolab, quá trình thành lập và phát triển Có thêm các kỹ

năng về việc sử dụng email trong công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn

2 Nghiên cứu kỹ thuật

2.1 Các công cụ làm việc

Thời gian : 2 ngày

Nội dung : Tìm hiểu về các công cụ sẽ được sử dụng trong quá 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 về các công cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong

số đó như Git - sử dụng trong làm việc nhóm, JIRA quản lý và phân công công việc với nhiều tiện ích, Visual Studio Code - một chương trình soạn thảo văn bản và viết code rất hữu ích và phổ biến với lập trình viên

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ

với nhau, so với việc dung các IDE

2.2 Tìm hiểu HTML, CSS, Javascript

Thời gian : 10 ngày

Nội dung : Tìm hiểu và thực hành về HTML, CSS, và Javascript

▪ Trong thời gian 3 ngày, anh Technical đã hướng dẫn thực tập sinh tìm hiểu

về HTML, CSS

▪ Ngày thứ 4 và thứ 5, nhóm thực tập sinh được thực hành làm các bài tập cơ bản về HTML, CSS

▪ Ngày thứ 6, nhóm thực tập sinh được hướng dẫn về Javascipt/Jquery

▪ Ngày thứ 7, nhóm làm bài tập thực hành về Javascript/Jquery

▪ Trong 3 ngày tiếp theo, nhóm thực tập được giao bài kiểm tra về nội dung

đã học: Hãy viết một trang web cho phép người dùng đăng tin, sửa và xóa bài blog của họ Trong trang web này có 3 trang chính: Home (hiển thị toàn

bộ 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 mỗi bài blog, sử dụng Jquery

để người dùng comment và đếm số lượt view, hiển thị các thông tin cần thiết của một bài blog

Thực hiện : Thực hành sử dụng các phần mềm đã nêu trên

Kết quả : Lập trình sử dụng các công cụ miễn phí, giúp dễ dàng kết hợp các công cụ với

nhau, so với việc dung các IDE

2.3 Tìm hiểu ngôn ngữ Ruby

Thời gian : 5 ngày

Nội dung : Được training về các kỹ thuật Ruby từ cơ bản đến nâng cao, những kiến

thức quan trọng cho việc tối ưu trên website

- Lập trình hướng đối tượng Các kiến thức cơ bản về lập trình hướng đối tượng như khái niêm, các đặc tính như tính kế thừa, tính đóng gói, tính ảo hóa, tính đa hình Ngoài ra, thực tập sinh còn được hướng dẫn về cách thiết kế lớp cho các services và kiến trúc phần mềm

- Mô hình MVC :

Mô hình MVC là một mô hình kiến phần mềm được tạo ra với mục đích quản

lý và xây dựng dự án phần mềm có hệ thống hơn Mô hình này được dùng khá rộng rãi và đặc biệt là trong các ngôn ngữ lập trình web

- Nền tảng về trình duyệt Thực tập sinh sẽ được hướng dẫn về các kĩ thuật sử dụng web tools cũng như các cấu trúc và phạm vi của trình duyệt khi giao tiếp với các giao thức mạng Những kiến thức này được áp dụng trong xuyên suốt quá trình hình thành lên internet

- Ruby on Rails:

Ruby on Rails là một web framework được viết trên ngôn ngữ lập trình Ruby

và được sử dụng trong việc xây dựng và phát triển các ứng dụng web Phiên bản đầu tiên của Ruby on Rails được giới thiệu ra cộng đồng vào năm 2015 Ruby

on Rails là phần mềm mã nguồn mở miễn phí được phát triển bởi David Heinemeier Hansson

Thực hiện :

- Tham gia đầy đủ các buổi training của công ty

- Làm các bài thực hành, kiểm tra về kiến thức đã học

Kết quả :

- Nâng cao kỹ năng lập trình với ngôn ngữ Ruby

- Có được những kiến thức quan trọng cho việc lập trình web sau này

- Ngoài ra còn được biết thêm một số quy tắc trong việc viết code sao cho đúng chuẩn, dễ đọc, dễ hiểu

2.4 Lập trình Ruby on Rails

Thời gian : 5 ngày

Nội dung: Các kiến thức cơ bản về Ruby on Rails để có thể làm ra một web đơn giản

- Khái niệm cơ bản về Ruby on Rails:

Ruby là ngôn ngữ lập trình, sử dụng Ruby các lập trình viên có thể phát triển nhiều loại ứng dụng khác nhau ngoài việc tạo website ví dụ như các phần mềm chạy trên máy tính cá nhân hay máy chủ

Ruby on Rails có cấu trúc trong sáng và dễ hiểu rất dễ tiếp cận cho những lập trình viên mới vào nghề Ngoài ra, Rails cung cấp cho chúng ta công cụ cửa sổ dòng lệnh CLI giúp tự động hoá nhiều công việc thường gặp khi lập trình qua

đó tăng tốc độ và hiệu suất làm việc

- Mô hình MVC:

MVC là viết tắt của Model – View – Controller Là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nói cho dễ hiểu,

nó là mô hình phân bố source code thành 3 phần, mỗi thành phần có một nhiệm

vụ riêng biệt và độc lập với các thành phần khác

Controller: Giữ nhiệm vụ nhận điều hướng các yêu cầu từ người dùng và gọi đúng những phương thức xử lý chúng… Chẳng hạn thành phần này sẽ nhận request từ url và form để thao tác trực tiếp với Model

Model: Đây là thành phần chứa tất cả các nghiệp vụ logic, phương thức xử lý, truy xuất database, đối tượng mô tả dữ liệu như các 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

cả các đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là tập hợp các form hoặc các file HTML

- Kiến thức mạng căn bản

Mô hình OSI (Open Systems Interconnection Reference Model, viết ngắn là

OSI Model hoặc OSI Reference Model) - là một thiết kế dựa vào nguyên lý tầng cấp, lý giải một cách trừu tượng kỹ thuật kết nối truyền thông giữa các máy vi tính và thiết kế giao thức mạng giữa chúng Mô hình này được phát triển thành một phần trong kế hoạch Open Systems Interconnection do ISO và IUT-T khởi

xướng Nó còn được gọi là Mô hình bảy tầng của OSI

Mô hình OSI phân chia chức năng của một giao thức ra thành một chuỗi các tầng cấp Mỗi một tầng cấp có một đặc tính là nó chỉ sử dụng chức năng của tầng dưới nó, đồng thời chỉ cho phép tầng trên sử dụng các chức năng của mình Một hệ thống cài đặt các giao thức bao gồm một chuỗi các tầng nói trên được gọi là protocol stack Chồng giao thức có thể được cài đặt trên phần cứng, hoặc phần mềm, hoặc là tổ hợp của cả hai Thông thường thì chỉ có những tầng thấp

hơn là được cài đặt trong phần cứng, còn những tầng khác được cài đặt trong phần mềm

- User Interface

Html/css là 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ó những trải nghiệm thực với các control có sẵn trong html5 cùng với việc tạo các style các control bằng css làm cho web page có thêm phần thực

tế hơn Javascript được coi là một ngôn ngữ lập trình chạy trên nền tang trình duyệt máy tính khách để xử lý các logic trong việc thiết kế user interface có sẵn trong html/css

Bootstrap được xem như là thư viện javascript phổ biến nhất trong việc cung cấp nguồn tài nguyên css và style theo chiều hướng tốt và có sẵn giúp cho lập trình viên front end phát triển UI nhanh hơn và tiết kiệm được nhiều thời gian

mà vẫn có trải nghiệm tốt nhất có thể

Thực hiện :

- Tham gia đầy đủ các buổi trainning

- Làm các bài tập thực hành như tạo website cơ bản liên kết database và áp dụng cấu trúc CRUD, routes …

- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm

sử dụng các kiến thức HTML/CSS cũng như Javascript/Jquery đã học

Trong tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng nhữ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ứ nhất và thực hiện một project website du lịch kết hợp cả front-end và back-end

Chi tiết đồ án sẽ được nói ở phần sau

4 Lịch làm việc

Tuần Công việc Người hướng dẫn

Mức

độ hoàn thành

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công ty, cách tổ chức của công ty

- Làm quen với các công cụ, phòng làm việc trong công ty

- Học cách trao đổi, làm việc qua email

- Tìm hiểu về Git và Git Flow

- Cài đặt hệ điều hành Ubuntu

Chị Phạm Thị Ngọc Duyên

Anh Nguyễn Văn Tiến

Anh Nguyễn Văn Bảo Chinh

100%

2

- Làm bài tập về HTML5/CSS3 (tt)

- Học về Responsive trong lập trình web

- Tìm hiểu về các thư việc CSS như Boostrap,

Foundation…

- Tìm hiểu về Javascript/Jquery

- Làm bài tập về Javascript/Jquery

- Làm bài test về Client Side Scripting (Viết 1 trang website cho phép người dùng đăng các bài blog)

Anh Trần Hữu Trung

Anh Nguyễn Văn Bảo Chinh

100%

3

- Cài đặt Ruby

- Tìm hiểu về ngôn ngữ Ruby căn bản

- Tìm hiểu về Ruby Toolbox

- Tìm hiểu về Ruby Gem

- Tìm hiểu về OOP trong Ruby

- Làm bài tập về OOP trong Ruby

- Áp dụng Ruby để giải quyết các bài tập bằng các thuật toán

- Học về Testing

Anh Trần Hữu Trung

Anh Nguyễn Văn Bảo Chinh

Anh Hà Chí Danh

100%

4

- Làm bài tập về Testing

- Tìm hiểu về TDD/BDD

- Cài đặt Ruby on Rails

- Học Ruby nâng cao

- Tìm hiểu về mô hình MVC trong Ruby on Rails

- Tìm hiểu về Rails

- Đọc và nghiên cứu sách Ruby On Rails Tutorial

Anh Trần Hữu Trung

Anh Nguyễn Văn Bảo Chinh

100%

5

- Đọc và nghiên cứu sách Ruby On Rails Tutorial (tt)

- Áp dụng Ruby on Rails vào trang blog

Giai đoạn Sprint 1:

- Khảo sát, lấy yêu cầu về trang web

- Tiến hành phân công công việc theo mô hình Scrum

Anh Nguyễn Văn Tiến

100%

- Thực hiện code giao diện front-end

- Viết các chức năng hiển thị trang blog

du lịch

7

Giai đoạn Sprint 2:

- Viết các chức năng chuyển đổi tiền tệ, thời tiết hiện tại

- Hoàn thiện chức năng hiển thị trang blog du lịch

- Viết các chức năng hiển thị trải nghiệm

du lịch

- Sửa lỗi bug và hoàn thiện các chức năng tìm kiếm

Anh Nguyễn Văn Tiến

100%

8

Giai đoạn Sprint 3 và giai đoạn kết thúc, báo cáo :

- Viết chức năng đặt trải nghiệm theo ngày

- Test lại các chức năng đã làm và sửa lỗi

- Báo cáo cuối đợt thực tập

Anh Nguyễn Văn Tiến

90%

Chương 3: Chi tiết về project

1 Giới thiệu về project

SUITO Japan là một trang web về du lịch giới thiệu về các trải nghiệm có ở từng địa điểm Bên cạnh đó, trang web còn đăng những bài blog của các host viết về trải nghiệm riêng của họ về địa điểm đó, cũng như giới thiệu về địa điểm đó có những gì đặc biệt khi đến tham quan Khi người dùng sử dụng, họ sẽ được nhận được các gợi ý các bài blog hoặc các trải nghiệm có liên quan đến địa điểm, hashtags, hoặc các loại mục categories Hơn nữa, người sử dụng cũng được cung cấp chức năng tìm kiếm các trải nghiệm cũng như các bài blog, theo hashtags, thời gian du lịch, các loại mục categories Sau khi chọn được một trải nghiệm yêu thích, người dùng có thể tiến hành đặt trải nghiệm đó với tính năng booking đơn giản và dễ dàng

Giai đoạn Sprint 1: Scrum master: Đặng Nghĩa

- Khảo sát lấy yêu cầu về trang web

- Cài đặt các công nghệ cần thiết

- Hoàn thành giao diện front-end với template được cho trước

- Phân tích thiết kế database

- Viết chức năng thêm/xóa/sửa các đối tượng trong database cho admin

- Viết chức năng đăng nhập

- Hiển thị các bài blog trong mục blog của 2 trang Blog và trang Home

- Deploy sản phẩm

Kết quả :

- Các tính năng trên đều được hoàn thành 70%

- Còn thiếu sót và chưa được kiểm thử

- Được các anh trainer góp ý để hoàn thiện

Giai đoạn Sprint 2: Scrum master: Đặng Hoàng Long

- Hoàn thiện các lỗi ở Sprint 1

- Hoàn thành trang blog

- Hiển thị các trải nghiệm trong mục Experience của 2 trang Experience và trang Home

- Viết chức năng chuyển đổi tiền tệ

- Viết chức năng hiển thị thời tiết tại vị trí hiện tại

- Viết chức năng tìm kiếm các bài blog và các trải nghiệm ở 3 trang Home, Blog, Experience

- Deploy sản phẩm