3.1. Thiết kế kiến trúc:

• Front-end: HTML, CSS, Bootstrap
• Back-end: Ruby on Rails
• Cơ sở dữ liệu: MySQL, phpMyAdmin.co
• Server: Heroku (có đường dẫn tới Repository của GitHub)
• Sử dụng thêm Google Analytics và Facebook Comments

3.2. Thiết kế cơ sở dữ liệu:

Bảng sau đây mô tả thiết kế cơ sở dữ liệu tổng quan của ứng dụng:

Hình 3.2: Cơ sở dữ liệu

3.3. Thiết kế các thành phần trong ứng dụng:

3.3.1. Thiết kế phần đọc truyện:

a. Thanh chuyển chức năng:

• Ở vị trí đầu tiên, trên nền đen đậm.

• Có 5 thanh chức năng để chuyển tới gồm: Trang Chủ, Truyện Mới Cập Nhập, Tất Cả Các Truyện, Thể Loại, Đăng Nhập.

• Trong thanh Trang Chủ: có hình ngôi nhà và chữ.

• Trong thanh Đăng Nhập: có hình ngôi sao và chữ.

• Trong thanh Thể Loại: khi kích chuột vào sẽ ra một danh sách gồm: Truyện Ngắn, Truyện Ngụ Ngôn, Truyện Cổ Tích, được ghim ở dưới để có thể chọn trực tiếp.

• Còn lại đều chỉ có chữ.

• Các thanh này đều có thể kích đơn chuột vào để chuyển tới trang mới tương ứng.

Hình 3.3.1.a: Thanh chuyển chức năng

b. Thanh tìm kiếm truyện:

• Ở vị trí đầu tiên, bên phải, trên nền đen đậm và cách với thanh chuyển chức năng.

• Có một khung với chữ gợi ý Tìm Kiếm để gõ tên truyện cần tìm và nút có biểu tượng search bên cạnh để bắt đầu tìm hoặc ấn phím enter để tìm truyện sau khi gõ.

• Truyện được tìm sẽ chứa chữ cái ấy.

Hình 3.3.1.b: Thanh tìm kiếm truyện

c. Tiêu đề ứng dụng:

• Phía dưới thanh chức năng.

• Truyện Song Ngữ Anh-Việt với một quyển sách là biểu tượng ở bên cạnh.

Hình 3.3.1.c: Tiêu đề ứng dụng

d. Chi tiết truyện đang đọc:

• Tên truyện, Thể Loại, Tên Tiếng Việt, Tên Tiếng Anh, Thời gian cập nhập, Thanh đánh giá, Thống kê đánh giá.

• Nội dung truyện được lấy từ cơ sở dữ liệu.

Hình 3.3.1.d: Chi tiết truyện đang đọc

e. Bình luận:

• Kết thúc nội dung truyện.

• Gồm có: Thống kê số lượng bình luận, lọc theo hai tiêu chí: mới nhất và cũ nhất, viết bình luận và đăng lên, hiển thị nội dung và tên người bình luận (khi không đăng nhập thì sẽ để bí danh).

• Người dùng cũng có thể sử dụng tính năng bình luận của Facebook.

• Bình luận sẽ được lưu trữ tại cơ sở dữ liệu, sau đó lấy ra để hiển thị.

Hình 3.3.1.e: Bình luận

3.3.2. Thiết kế trang chủ:

• Có lời giới thiệu về trang.

Hình 3.3.2.a: Trang chủ

• Có các truyện mới cập nhật nổi bật với hiệu ứng tự động trượt sang đẹp mắt, người dùng có thể chọn để đọc.

Hình 3.3.2.b: Các truyện mới cập nhật nổi bật

3.3.3. Thiết kế trang truyện mới cập nhập:

• Hiển thị danh sách tất cả các truyện mới được cập nhật vào trong ứng dụng.

• Mỗi truyện được hiển thị bao gồm tên Tiếng Việt, tên Tiếng Anh, một phần nội dung truyện, thời gian cập nhật truyện, các lượt đánh giá của truyện.

Hình 3.3.3: Truyện mới cập nhật

3.3.4. Thiết kế trang Tất cả các truyện:

• Hiển thị danh sách tất cả các truyện.

Hình 3.3.4: Tất cả các truyện

3.3.5. Thiết kế trang kết quả tìm kiếm truyện:

• Hiển thị các truyện có tên Tiếng Việt hoặc Tiếng Anh chứa từ khóa tìm kiếm.

Hình 3.3.5.e: Kết quả tìm kiếm truyện

3.3.6. Giao diện đăng nhập, đăng kí:

Mục đích chung: Nhằm giúp người dùng có thể bình luận , đánh giá truyện.

a. Giao diện đăng nhập:

• Sau khi chọn đăng nhập, giao diện đăng nhập sẽ hiển thị gồm hai ô TextBox để nhập vào EMAIL và MẬT KHẨU, ngoài ra còn có hai tùy chọn ĐĂNG NHẬP (nếu người dùng đã có tài khoản) hoặc ĐĂNG KÝ (nếu người dùng chưa có tài khoản).

• Sau khi đăng nhập xong, thì tên người dùng sẽ được hiển thị trên thanh chức năng, thế vào vị trí của tùy chọn tìm kiếm.

Hình 3.3.6.a: Giao diện đăng nhập

b. Giao diện đăng xuất:

Sau khi hết phiên làm việc, người dùng có thể đăng xuất khỏi ứng dụng.

Hình 3.3.6.b: Giao diện đăng xuất

c. Giao diện đăng ký:

• Giao diện đăng ký yêu cầu người dùng phải nhập đầy đủ họ TÊN, HỌ, EMAIL, MẬT KHẨU
• Sau khi đăng ký xong thì tài khoản người dùng đó sẽ được đăng nhập luôn vào trong ứng dụng.

Hình 3.3.6.c: Giao điện đăng ký