tiểu luận đồ án cơ sở 2 đề tài xây dựng website bán giày thể thao online

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.28 MB, 33 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG VIỆT – HÀN</b>

<b>KHOA KHOA HỌC MÁY TÍNH</b>

<b>ĐỒ ÁN CƠ SỞ 2</b>

<b>ĐỀ TÀI: XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ONLINE</b>

<b>Sinh viên thực hiện: LÊ ĐÀO QUỐC ĐẠTMã: 21IT193</b>

Giảng viên hướng dẫn: <b>TS. NGUYỄN THU HƯƠNG</b>

<i><b>Đà nẵng, tháng 12 năm 2022 </b></i>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THƠNG VIỆT – HÀN</b>

<b>KHOA KHOA HỌC MÁY TÍNH</b>

<b>ĐỒ ÁN CƠ SỞ 2</b>

<b>XÂY DỰNG WEBSITE BÁN GIÀY THỂ THAO ONLINE</b>

<i><b>Đà Nẵng, tháng 12 năm 2022 </b></i>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>MỞ ĐẦU</b>

Trong cuộc sống xã hội hiện đại ngày nay, khi mà việc gặp gỡ giao tiếp giữa conngười với con người diễn ra hàng ngày hàng giờ, thì quan tâm tới hình thức bên ngồicủa bản thân đã trở thành một nhu cầu thiết yếu đối với mỗi người. Đặc biệt đối vớinhững người làm việc trong môi trường năng động như hiện nay thì giày thể thao làmột trong những đồ vật không thể thiếu. Giày thể thao khơng chỉ làm thỏa mãn nhucầu thời trang mà cịn thể hiện phong cách, cá tính, cũng như năng động thoải máitrong công việc, học tập cũng như hoạt động hằng ngày của người tiêu dùng.

Có thể nói trên thị trường hiện nay xuất hiện khá nhiều loại giày với nhiều mẫumã, chủng loại, chất lượng khác nhau, mang lại cho người tiêu dùng nhiều lựa chọnnhưng đồng thời cũng khiến cho người tiêu dùng cảm thấy khó khăn khi lựa chọn chomình một đơi giày thể thao như mong muốn với giá cả phải chăng. Đề tài này nhằmmục đích tạo ra một website để tìm và chọn một đơi giày thể thao ưng ý một cáchnhanh chóng tiện lợi.

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

Cuối cùng chúng em kính chúc cô dồi dào sức khỏe và đạt được nhiều thànhcông tốt đẹp trong công việc.

<i><b>Em xin chân thành cảm ơn!</b></i>

<b>Too long to read onyour phone? Save</b>

to read later onyour computer

Save to a Studylist

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>NHẬN XÉT CỦA GIẢNG VIÊN</b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>DANH MỤC HÌNH</b>

Hình 4.3-1 Biểu đồ lớp...11

Hình 5.1-1 Biều đồ tuần tự thêm người dùng...12

Hình 5.1-2 Biều đồ tuần tự thêm vào giỏ hàng...13

Hình 5.1-3 Biều đồ tuần tự thêm sản phẩm...13

Hình 5.1-4 Biều đồ tuần tự sửa sản phẩm...14

Hình 5.2-1 Biểu đồ hoạt động thêm người dùng...15

Hình 5.2-2 Biểu đồ hoạt động thêm vào giỏ hàng...16

Hình 5.2-3 Biểu đồ hoạt động thêm sản phẩm...17

Hình 5.2-4 Biểu đồ hoạt động sửa sản phẩm...18

Hình 6.1-2 Đăng nhập với vai trị admin...19

Hình 6.1-4 Đăng nhập với vai trị user...19

Hình 6.2-1 Giao diện trang đăng nhập...20

Hình 6.2-3 Trang chủ trước khi đăng nhập...20

Hình 6.2-4 Trang chủ sau khi đăng nhập với vai trị user...21

Hình 6.3-2 Giao diện trang đăng ký...21

Hình 6.4-1 Giao diện trang admin...22

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>Chương 1 Tổng quan về trang web</b>

Xây dựng trang web gồm các chức năng cơ bản sau đây:- Người dùng: Đọc truyện, theo dõi truyện.

- Người đăng truyện: Quản lý truyện, quản lý chapter.

- Người quản trị: Quản lý người dùng, quản lý thể loại, phân quyền, vai trò cho người dùng.

<b>1.4 Công cụ thiết kế</b>

Sử dụng Boostrap, JavaScript và các công cụ hỗ trợ định dạng như CSS để làmgiao diện cho trang web. Và được viết bằng ngôn ngữ PHP để xử lý các lệnh trênserver rồi sau đó sinh ra mã HTML trên client từ đó tạo ra một trang web động có cơsở dữ liệu là MySql. Và sử dụng Laravel FrameWork để xây dựng trang web theo mơhình MVC.

<b>1.5 Kế hoạch thực hiện</b>

<b>Thời gianNội dung thực hiện</b>

Tuần thứ 1 ngày 25/9 Gặp GVHD và duyệt đề cươngTuần thứ 2 từ 26/9

đến 2/10

Tham khảo các website đã có và lên ý tưởngThiết kế giao diện trang web

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

Phân tích thiết kế hệ thống trang webTuần thứ 3 từ 3/10

đến 9/10

Thiết kế giao diện các trang còn lạiXây dựng các chức năng backendTuần thứ 4 từ 10/10

đến 16/10

Thiết kế và xây dựng các form Xây dựng các chức năng backendTuần thứ 5 từ 17/10

đến 23/10

Xây dựng các chức năng frontendXây dựng các chức năng backendTuần thứ 6 từ 24/10

đến 30/10

Xây dựng các chức năng frontendXây dựng các chức năng thống kêTuần thứ 7 từ 31/10

đến 6/11

Kiểm lỗi trang web, test các nút được thêm vàoThêm các hiệu ứng vào website, các chức năng cơ bảnTuần thứ 8 từ 7/11

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>Chương 2 Cơ sở lý thuyết</b>

HTML (HyperText Markup Language) là ngơn ngữ lập trình dùng để xây dựngvà cấu trúc lại các thành phần có trong website. Là ngôn ngữ đánh dấu siêu văn bản.Người ta thường sử dụng HTML trong việc phân chia các đoạn văn, heading, links,blockquotes…

Cấu trúc HTML là website chứa nhiều trang con và mỗi trang con này lại có mộttập tin HTML riêng. HTML khơng phải ngơn ngữ lập trình cho nên khơng thể thựchiện các chức năng động, chỉ có tác dụng bố cục và định dạng trang web cho nên phảikết hợp với CSS (Cascading Style Sheets) và JavaScript.

CSS (Cascading Style Sheets) là ngơn ngữ được sử dụng để tạo nên phong cáchcho Website. Có thể hiểu là công cụ giúp chúng ta thêm vào những thay đổi về mặthình thức như bố cục màu sắc, font chữ… Hoạt động bằng cách khoanh vùng chọndựa trên 1 thẻ HTML, ID hay Class từ đó áp dụng những thuộc tính cần thay đổi lênvùng được chọn. Có thể hiểu nếu một website khơng có CSS thì đó sẽ chỉ đơn thuần làmột trang chứa văn bản với hai màu chủ đạo là trắng và đen.

JS (JavaScript) là ngơn ngữ lập trình website, được tích hợp và nhúng trongHTML giúp website sống động hơn. Các slide show, pop-up quảng cáo và tính năngautocomplete của Google đều được viết bằng JS. JS hỗ trợ hầu hết các trình duyệt trênmáy tính và điện thoại.

Khi tải một trang web, trình duyệt phân tích cú pháp HTML và tạo ra một loại dữliệu gọi là DOM từ nội dung. DOM thể hiện chế độ xem trực tiếp của trang web vớimã JavaScript. Đoạn mã này thực hiện cập nhật cho DOM và được trình bày ngay lậptức cho người dùng.

Trình duyệt cũng ghi nhận các sự kiện giao diện người dùng như: di chuyểnchuột, nhấp chuột, v.v. Sau đó, tùy theo phản hồi của người dùng, đoạn mã sẽ thựchiện cơng việc được lập trình tương ứng. Sử dụng tất cả các tiện ích này, bạn có thểxây dựng các ứng dụng nhỏ để phục vụ cho một vài mục đích được cho phép.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>2.4 Tìm hiểu về jQuery</b>

JQuery được tích hợp nhiều module khác nhau. Từ module hiệu ứng cho đếnmodule truy vấn selector. JQuery được sử dụng đến 99% trên tổng số website trên thếgiới. jQuery không phải là một ngơn ngữ lập trình riêng biệt mà hoạt động liên kếtvới JavaScript Với jQuery, bạn có thể làm được nhiều việc hơn mà lại tốn ít cơng sức<b>. </b>

hơn. JQuery cung cấp các API giúp việc duyệt tài liệu HTML, hoạt ảnh, xử lý sự kiệnvà thao tác AJAX đơn giản hơn.

<b>2.5 Tìm hiểu về boostrap</b>

Bootstrap là một bộ sưu tập miễn phí của các mã nguồn mở và cơng cụ dùng để tạo ra một mẫu webiste hoàn chỉnh. Với các thuộc tính về giao diện được quy định sẵnnhư kích thước, màu sắc, độ cao, độ rộng…, các designer có thể sáng tạo nhiều sản phẩm mới mẻ nhưng vẫn tiết kiệm thời gian khi làm việc với framework này trong quátrình thiết kế giao diện website.

Ngôn ngữ PHP là từ viết tắt của Personal Home Page (hiện nay là HypertextPreprocessor). Thuật ngữ này chỉ chuỗi ngôn ngữ kịch bản hay mã lệnh, phù hợp đểphát triển cho các ứng dụng nằm trên máy chủ. Khi viết phần mềm bằng ngôn ngữPHP, chuỗi lệnh sẽ được xử lý trên server để từ đó sinh ra mã HTML trên client. Vàdựa vào đó, các ứng dụng trên website của bạn sẽ hoạt động một cách dễ dàng.

Người ta thường sử dụng PHP trong việc xây dựng và phát triển các ứng dụngwebsite chạy trên máy chủ. Mã lệnh PHP có thể nhúng được vào trang HTML bằngcách sử dụng cặp thẻ PHP.Nhờ đó, website bạn phát triển dễ dàng kết nối được với cácwebsite khác trên hệ thống mạng internet.

PHP cũng là ngôn ngữ lập trình mã nguồn mở và miễn phí. PHP tương thích vớinhiều nền tảng khác nhau như Windows, MacOS và Linux, v.v. Đa phần các trangwebsite bạn đang sử dụng hàng ngày để học tập, làm việc và giải trí đều sử dụng ngơnngữ lập trình PHP. Chẳng hạn như Facebook, Pinterest, Wikipedia, WordPress, v.v.

Ngơn ngữ lập trình PHP được đánh giá là dễ đọc. Do vậy, cũng dễ hiểu tại sao nólại trở thành ngơn ngữ được nhiều bạn trẻ ưu tiên lựa chọn học trước khi bắt đầu vàonghề.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>2.7 Tìm hiểu về MySql</b>

Hệ thống sử dụng hệ cơ sở dữ liệu MySQL. MySQL là hệ quản trị cơ sở dữ liệutự do nguồn mở phổ biến nhất thế giới và được các nhà phát triển rất ưa chuộng trongquá trình phát triển ứng dụng. Vì MySQL là hệ quản trị cơ sở dữ liệu tốc độ cao, ổnđịnh và dễ sử dụng, có tính khả chuyển, hoạt động trên nhiều hệ điều hành cung cấpmột hệ thống lớn các hàm tiện ích rất mạnh. Với tốc độ và tính bảo mật cao, MySQLrất thích hợp cho các ứng dụng có truy cập CSDL trên internet. Người dùng có thể tảivề MySQL miễn phí từ trang chủ. MySQL có nhiều phiên bản cho các hệ điều hànhkhác nhau: phiên bản Win32 cho các hệ điều hành dòng Windows, Linux, Mac OS X,Unix, FreeBSD, NetBSD, Novel NetWare, SGI Irix, Solaris, SunOS<b>,..</b>

MySQL là một trong những ví dụ rất cơ bản về Hệ Quản trị Cơ sở dữ liệu quan hệsử dụng Ngơn ngữ truy vấn có cấu trúc (SQL). MySQL là một trong những ví dụ rất cơbản về Hệ Quản trị Cơ sở dữ liệu quan hệ sử dụng Ngơn ngữ truy vấn có cấu trúc(SQL).

2.8 Tìm hiểu về Laravel framework

Framework chính là một thư viện với các tài nguyên có sẵn cho từng lĩnh vực đểlập trình viên sử dụng thay vì phải tự thiết kế. Có Framework, lập trình viên chỉ tìmhiểu và khai thác những tài nguyên đó, gắn kết chúng lại với nhau và hồn chỉnh sảnphẩm của mình. Đối với lập trình viên trong mỗi một lĩnh vực, họ cần phải xây dựngcác lớp chương trình để xây dựng nên những phần mềm, ứng dụng thành phẩm.

PHP framework là thư viện làm cho sự phát triển của những ứng dụng web viếtbằng ngôn ngữ PHP trở nên trôi chảy hơn. Bằng cách cung cấp 1 cấu trúc cơ bản đểxây dựng những ứng dụng đó. Hay nói cách khác, PHP framework giúp bạn thúc đẩynhanh chóng q trình phát triển ứng dụng. Giúp bạn tiết kiệm được thời gian, tăng sựổn định cho ứng dụng. Giảm thiểu số lần phải viết lại code cho lập trình viên.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>Chương 3 Định nghĩa hệ thống</b>

Website bán giày thể thao online là website giúp cho người dùng có thể chọnmua những đôi giày thể thao, đối với người quản trị thì có thể quản lý các sản phẩm,quản lý các user hiện có. Đối với khách hàng có thể chọn mua giày thể thao mìnhmuốn.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>Chương 4 Phân tích hệ thống</b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

2. Người bán hàng điền thông tin sản phẩm vào form3. Người bán hàng thêm sản phẩm vào website

Hành động của hệ thống:1. Lưu dữ liệu vào cơ sở dữ liệu

2. Thêm, hiểm thị sản phẩm trên website

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Tên Use-case Thêm vào giỏ hàngTác nhân Người dùng

Mô tả Người dùng thêm sản phẩm vào giỏ hàng

Điều kiện trước Người dùng phải đăng nhập vào hệ thống

Điều kiện sau Thêm sản phẩm vào giỏ hàng thành công

Kịch bản Hành động của người dùng:1. Người dùng đăng nhập vào hệ thống

2. Người dùng chọn sản phẩmcần thêm

3. Người dùng thêm sản phẩmvào giỏ hàng

Hành động của hệ thống:1. Lưu dữ liệu vào cơ sở dữ liệu

2. Đưa tới trang giỏ hàng

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

Kịch bản Hành động của người bán hàng:1. Người bán hàng đăng nhập vào hệ thống

2. Người bán hàng chọn tính năng sửa sản phẩm trong danhsách sản phẩm

3. Người bán hàng sửa sản phẩm

Hành động của hệ thống:

Sửa dữ liệu sản phẩm trong cơsở dữ liệu

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

<b>Chương 5 Thiết kế hệ thống</b>

<b>5.1 Biểu đồ tuần tự5.1.1 Thêm người dùng</b>

<b><small>Hình 5.1-2 Biều đồ tuần tự thêm người dùng</small></b>

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

<b>5.2 Biểu đồ hoạt động5.2.1 Thêm người dùng</b>

<b><small>Hình 5.2-6 Biểu đồ hoạt động thêm người dùng</small></b>

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

<b>Chương 6 Triển khai thực hiện</b>

Hiện tại có 3 tác nhân tương ứng với 3 vai trị là: nguoi_dang_truyen, user, vàadmin. Mỗi vai trị có quyền hạn khác nhau và sẽ được chuyển đến trang khác nhausau khi đăng nhập.

<b><small>Hình 6.1-10 Đăng nhập với vai trị admin</small></b>

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

Để có thể sử dụng các chức năng liên quan đến cơ sở dữ liệu thì đầu tiên người sử dụng phải đăng nhập vào hệ thống.

<b><small>Hình 6.2-12 Giao diện trang đăng nhập</small></b>

<b><small>Hình 6.2-13 Trang chủ trước khi đăng nhập</small></b>

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

Muốn trở thành thành viên của website đọc truyện thì đầu tiên người dùng phảiđăng ký trở thành người dùng hệ thống. Đặc biệt là người dùng được tự động phân vaitrị user.

<b><small>Hình 6.3-15 Giao diện trang đăng ký</small></b>

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<b>6.6 Sửa thơng tin cá nhân</b>

Khi có như cầu cần sửa thông tin của bản thân hoặc là thay đổi ảnh đại diện,người sử dụng có thể sử dụng chức năng thay đổi ở profile người dùng.

</div>