Đang tải... (xem toàn văn)
Ưu điểm: o Được sử dụng rộng rãi, có nhiều nguồn tài nguyên hỗ trợ cộng đồng sử dụng lớn o Học đơn giản dễ hiểu o Mã nguồn mở hồn tồn miễn phí o Markup gọn gàng đồng o Tiêu chuẩn giới vận hành World Wide Web Consortium (W3C) o Dễ dàng tích hợp với ngơn ngữ backend PHP, Python… Khuyết điểm: o Được dùng chủ yếu cho web tĩnh Đối với tính động update hay realtime thời gian thực, bạn cần sử dụng JavaScript ngôn ngữ backend bên thứ PHP o Một số trình duyệt chậm hỗ trợ tính CSS CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngơn ngữ đánh dấu (HTML) Nói ngắn gọn ngôn ngữ tạo phong cách cho trang web Mối tương quan HTML CSS mật thiết HTML ngôn ngữ markup (nền tảng site) CSS định hình phong cách (tất tạo nên giao diện website), chúng khơng thể tách rời Tailwind Tailwind utility-first CSS framework giúp cho bạn xây dựng giao diện người dùng cách nhanh Tailwind CSS phát hành lần vào tháng 10/2019 phát triển Adam Wathan Nếu so sánh với tảng lập trình CSS khác Bootstrap, Materialize, Foundation, Material Design… chúng có điểm chung với Ưu điểm: • Xây dựng giao diện cần khai báo class file html • Chỉ xuất file css chứa class sử dụng giao diện • Dễ dàng thiết lập Responsive file html • Hỗ trợ tương tác hover, focus… class html • Tối ưu cấu trúc html css có tính lặp lại • Định nghĩa thêm class phối hợp class có sẵn tailwind • Hỗ trợ chế độ tối Dark Mode • Dễ dàng mở rộng, chỉnh sửa biến đổi • Tăng tốc độ code với Extension thông minh VS Code Typescript Typescript Là ngôn ngữ Microsoft tặng free cho chúng ta, tảng TypeScript nhiều có liên quan đến JavaScript ngơn ngữ mã nguồn mở JavaScript Vai trò TypeScript dùng để thiết kế xây dựng dự án ứng dụng quy mơ lớn mang tính chất phức tạp TypeScript xem phiên nâng cao JavaScript thiết kế thêm nhiều chức tiện lợi hơn, cải tiến từ điểm yếu JavaScript lớp hướng đối tượng Static Structural typing, bên cạnh TypeScript cịn hoạt động rộng rãi cho ứng dụng ngôn ngữ Angular2 Nodejs Ưu điểm: • Thuận tiện hồn tồn miễn phí • Thao tác nhanh chóng đơn giản • Tái cấu trúc • Giảm tỷ lệ mắc lỗi hệ thống • Hợp mã đơn giản CHƯƠNG 4: THIẾT KẾ CƠ SỞ DỮ LIỆU 4.1 Danh sách quan hệ 4.1.1 Bảng user Bảng 4.1: Cơ sở liệu user STT Thực thể Kiểu liệu Ghi id number Không đổi name string Tên người dùng avtURL string Ảnh đại điện người dùng email string Email người dùng password string Mật người dùng 4.1.2 Bảng playlist Bảng 4.2: sở liệu playlist STT Thực thể Kiểu liệu Ghi id number Độc name string Tên danh sách hát bg_color string Màu giao diện category string Thể loại hát danh sách views number Số lượng người nghe imageURL string Ảnh đại diện danh sách likes number Số lượng thích danh sách User_id number Id user 4.1.3 Bảng artist Bảng 4.3: Cơ sở liệu artist STT Thực thể Kiểu liệu Ghi id number Độc name string Tên tác giả followed number Số lượng người theo dõi User_id number Id user 4.1.4 Bảng song Bảng 4.4: Cơ sở liệu hát STT Thực thể Kiểu liệu Ghi id number Độc name string Tên hát liked number Số lượt thích views number Số lượt nghe imageURL string Ảnh hát audioURL string Bài hát Artist_id number Id tác giả Playlist_id number Id cũa playlist 4.1.5 Bảng comment Bảng 4.5: Cơ sở liệu comment STT Thực thể Kiểu liệu Ghi id number Độc content string Nội dung Song_id number Id hát User_id number Id user 4.1.6 Bảng history Bảng 4.6: Cơ sở liệu history STT Thực thể Kiểu liệu Ghi id Number Độc views number Lượt xem User_id number Id user Song_id number Id song 4.1.7 Bảng notification Bảng 4.7: Cơ sở liệu notification STT Thực thể Kiểu liệu Ghi id number Độc content string Thông báo User_id number Id user Song_id number Id song Bg_url string Hình 4.2 Kiến trúc hệ thống - Backend sử dụng mơ hình MVC (Model-View-Controller) - MVC mẫu kiến trúc phần mềm để tạo lập giao diện người dùng máy tính MVC chia thành ba phần kết nối với thành phần có nhiệm vụ riêng đợc lập với thành phần khác Tên gọi thành phần: + Model (dữ liệu): Quản lý xử lí liệu + View (giao diện): Nơi hiển thị liệu cho người dùng + Controller (bộ điều khiển): Điều khiển tương tác phần Model View CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 5.1 Đăng nhập Hình 5.1: Màn hình đăng nhập Mơ hình chi tiết: - Chọn text ‘username’ để ghi tên người dùng - Chọn text ‘password’ để ghi mật tài khoản - Nhấp button ‘sign in’ để xác nhận đăng nhập 5.2 Màn hình Hình 5.2: hình trang chủ Mô tả chi tiết: - Nhấp biểu tượng ‘Pause’ header để quay trang chủ - Nhấp ‘search’ header để đến giao diện kết tìm kiếm - Nhấp ‘profile’ header để đến giao diện thân - Nhấp ‘edit profile’ header để đến giao diện chỉnh sửa thông tin - Nhấp ‘upload song’ header để đến giao diện thêm hát - Nhấp ‘create playlist’ header để đến giao diện thêm hát - Ghi text ‘search’ để đến giao diện kết tìm kiểm - Nhấp vào hình album để đến giao diện album - Nhấp vào icon music bar để tương tác với nhạc 5.3 Màn hình mợt danh sách hát Hình 5.3: Màn hình album Mơ tả chi tiết: - Nhấp vào tên hát để đến giao diện hát - Nhấp vào tên tác giả để đến giao diện tác giả - Nhấp vào hát sidebar để đến giao diện hát 5.4 Màn hình mợt hát Hình 5.4: Màn hình hát Mơ tả chi tiết: Nhấp vào icon play để phát hát Nhập nội dung phần bình luận ấn submit để đăng bình luận Nhấp vào ảnh đại diện để đến giao diện tác giả Nhấp vào hát bên tay phải để qua giao diện hát nghe gần - Nhấp vào chữ ‘viewall’ để sang giao diện hát vừa nghe - 5.5 Tìm kiếm Hình 5.5: Màn hình kết tìm kiếm Mô tả chi tiết: - Nhấp icon play để phát nhạc - Nhấp tên hát để đến giao diện hát - Nhấp tên tác giả để đến giao diện tác giả - Nhấp button ‘copy link’ để chép đường dẫn đến hát 5.6 Upload hát Hình 5.6: Màn hình thêm hát Mơ tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh cho hát - Nhấp ‘upload audio’ để thêm file mp3 cho hát - Nhấp ‘Playlist’ để chọn playlist cho hát - Nhập tên hát phần ‘name’ - Nhấp button ‘upload song’ để thêm hát 5.7 Tạo danh sách hát Hình 5.7: Màn hình tạo playlist Mơ tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh cho playlist - Nhấp ‘category’ để chọn thể loại cho playlist - Nhập tên playlist phần ‘playlist’s name’ - Nhấp button ‘create’ để xác nhận tạo playlist 5.8 Màn hình thơng tin thân Hình 5.8: Màn hình thơng tin cá nhân Mơ tả chi tiết: - Nhấp tên hát để đến giao diện hát - Nhấp button ‘copy link’ để lấy đường dẫn đến giao diện hát - Nhấp button play hát người dùng để nghe nhạc - Nhấp hát ỏ sidebar để đến giao diện hát 5.9 Màn hình sửa thơng tin Hình 5.9: Màn hình chỉnh sửa thơng tin thân Mô tả chi tiết: - Nhấp ‘upload image’ để thêm ảnh giao diện - Nhập tên phần ‘new name’ - Nhấp button ‘comfirm’ để xác nhận thông tin muốn thay đổi CHƯƠNG 6: KẾT LUẬN 6.1 Tổng kết • Điều quan trọng làm website nghe nhạc trực tuyến phải có đầy đủ tính cần thiết trang web mua hàng trực tuyến đa dạng sản phẩm giao diện thân thiện dễ nhìn để phục vụ đáp ứng nhu cầu người dùng • Cần phân tích kỹ xác định tính trước thực code, thiết kế giao diện, thiết kế sở liệu • Cần xếp thời gian code cho chức cách hợp lý hơn, không nên tốn nhiều thời gian cho phần • Có khả đọc tài liệu tiếng anh lợi hướng dẫn bản, hay tài liệu đa số viết tiếng Anh 6.2 Khó khăn • Việc làm đồ án gặp nhiều trở ngại cơng đoạn xác định tính ứng dụng, phần việc xếp theo thứ tự chưa thật hợp lý, khơng có nhiều thời gian để hồn thành đồ án • Nhóm tốn nhiều thời gian cho việc xây dựng giao diện người dùng cách hợp lý cố gắng thực mục tiêu đề 6.3 Hạn chế • Code chưa tối ưu tốt nên load website cịn chậm • Giao diện người dùng mức • Cịn nhiều tính chưa tối ưu, chưa tiện dụng người dùng • Chưa sử dụng nhiều ngơn ngữ 6.4 Hướng phát triển • Đầu tư, phát triển thiết kế giao diện • Sử dụng đa dạng ngơn ngữ • Tối ưu hóa code • Nâng cấp thêm tính tiện ích hỗ trợ người dùng TÀI LIỆU THAM KHẢO Laravel: https://laravel.com Tailwind: https://tailwind.com Remix: https://remix.run MVC: https://fptcloud.com/mvc-la-gi PHP:https://topdev.vn/blog/ngon-ngu-lap-trinh-php-la-gi-tat-tan-tat nhung-dieu-ban-can-biet-ve-php/