KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI: XÂY DỰNG TRANG THÔNG TIN CÔNG NGHỆ WIKITECH

Tuy nhiên, sự phát triển quá nhanh chóng của công nghệ, phần đông trong chúng ta chưa theo kịp với nó, dẫn đến sự thiếu hiểu biết về thông tin sản phẩm và khó khăn trong việc

Trang 1

ĐẠI HỌC ĐÀ NẴNGKHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 1

ĐỀ TÀI: XÂY DỰNG TRANG THÔNG TIN

CÔNG NGHỆ WIKITECH

Sinh viên thực hiện : Phạm Trần Triêm

Giảng viên hướng dẫn : ThS Phan Trọng Thanh

Đà nẵng, tháng 8 năm 2020

Trang 2

MỞ ĐẦU

Ngày nay với sự phát triển không ngừng của công nghệ, các sản phẩm công nghệ cao được sản xuất và xuất hiện ngày càng nhiều trên thị trường thương mại với nhiều cấu hình, mẫu mã, giao diện khác nhau để phù hợp với nhiều thành phần người tiêu dùng.

Với sự phát triển nhanh chóng như vậy, người dùng được thoải mái lựa chọn các sản phẩm có thể đáp ứng đầy đủ nhu cầu, mục đích sửa dụng của mình Tuy nhiên, cũng vì đó mà cũng tạo ra sự khó khăn đối với người tiêu dùng khi chọn những sản phẩm phù hợp, có chất lượng đối với khả năng kinh tế cũng như yêu cầu công việc.

Wikitech sẽ là một phương tiện hỗ trợ lựa chọn sản phẩm cho khách hàng, đặc biệt là các bạn học sinh, sinh viên muốn mua thiết bị thông minh một cách hợp lí, đúng đắn nhất, cũng như cung cấp một cách chi tiết các thông tin về các thiết bị thông minh để khách hàng hiểu rõ sản phẩm mà mình quan tâm hơn.

Trang 3

Mặc dù trong quá trinh nghiên cứu đề tài , bản thân em có những cố gắng nhất định song do trình độ và thời gian có hạn nên đề tài không tránh khỏi những thiếu sót.vậy kinh mong các thầy cô và các bạn đóng góp ý kiến để em được hoàn thiện hơn.

Trang 4

NHẬN XÉT

(Của giảng viên hướng dẫn)

………

Trang 5

MỤC LỤC Chương 1 Giới thiệu 1

1.1 Tổng quan 1

1.2 Phương pháp, kết quả 1

1.3 Cấu trúc đồ án 1

Chương 2 Nghiên cứu tổng quan 3

2.1 Tìm hiểu ngôn ngữ lập trình: 3

2.1.1 HTML là gì? 3

2.1.2 CSS là gì? 4

2.1.3 PHP là gì? 4

2.2 Các thư viện 5

2.2.1 Thư viện JavaScript 5

2.2.2 Thư viện Bootstrap 5

2.2.3 Thư viện Jquery 6

Trang 6

2.3 Các Framework 7

2.3.1 ReactJS 7

2.3.2 NodeJS 9

2.4 Cơ sở dữ liệu MySql 10

Chương 3 Phân tích thiết kế hệ thống 12

3.1 Yêu cầu về chức năng và giao diện 12

3.2 Thiết kế hệ thống với cơ sở dữ liệu 12

3.2.1 Các đối tượng trong cơ sở dữ liệu 12

3.2.2 Mô tả chi tiết 12

3.3 Triển khai xây dựng một số giao diện chính 14

Chương 4 Kết luận và hướng phát triển 17

4.1 Kết luận 17

4.2 Hướng phát triển 17

DANH MỤC HÌNH Picture 1 Trang chủ 14

Picture 2 Đăng nhập 14

Picture 3 Đăng ký 15

Picture 4 Liên hệ trực tuyến 15

Picture 5 Bình luận 15

Picture 6 Thông tin sản phẩm 16

DANH MỤC BẢNG

Trang 7

Table 1 Bảng Gmail đăng ký nhận thông báo 12

Table 2 Bảng Tài khoản thông tin tài khoản đăng nhập 13

Table 3 Bảng Thông tin sản phẩm 13

Table 4 Bảng Đánh giá, phản hồi của người dùng 13

Trang 8

DANH MỤC CỤM TỪ VIẾT TẮT

Trang 9

Chương 1 Giới thiệu

1.1 Tổng quan.

Sự phát triển của xã hội đang ngày càng nhanh chóng, mức sống của cá nhân cũng đang ngày càng được nâng cao rõ rệt Chúng ta nay đã tiến đến cuộc cách mạng công nghiệp lần thứ 4 với những sự phát triển mạnh mẽ của máy móc, thiết bị, công nghệ Đặc biệt, các thiết bị thông minh như máy tính, điện thoại thông minh, các thiết bị đeo thông minh đang chiếm vị trí cực gì quan trọng trong đời sống hằng ngày của mỗi con người.

Tuy nhiên, sự phát triển quá nhanh chóng của công nghệ, phần đông trong chúng ta chưa theo kịp với nó, dẫn đến sự thiếu hiểu biết về thông tin sản phẩm và khó khăn trong việc chọn lựa các thiết bị phù với với nhu cầu cũng như tài chính của bản thân cũng như nhiều luồng thông tin trái chiều làm cho chúng ta bị nhiễu loạn.

Từ đó, mong muốn tạo ra một trang thông tin một cách đầy đủ, chính xác, rõ ràng về các tính năng, cũng như thành phần của các thiết bị để người dùng có cái nhìn tổng quát hơn về thiết bị được quan tâm, cũng như tổng hợp các ý kiến, trải nghiệm người dùng một cách khách quan hơn về sản phẩm và tư vấn trực tiếp nếu cần thiết.

1.2 Phương pháp, kết quả.

Phương pháp xây dựng ứng dụng sẽ bao gồm các bước sau:

- Tìm hiểu, học tập các ngôn ngữ lập trình cần thiết để xây dựng một

Frontend cho trang web hoàn chỉnh: HTML, PHP, CSS, JavaScript

- Tìm hiểu và sử dụng các khung phần mềm (Framework) để xây dựng kết cấu phía sau của trang web: React, mongoDB, ExpressJS, NodeJS.

- Thu thập, chọn lọc thông tin, dữ liệu chính thống từ những địa chỉ đáng tin cậu nhằm xây dựng và cập nhật cơ sở dữ liệu một cách chính xác.

1.3 Cấu trúc đồ án.

Phần tiếp theo của báo cáo bao gồm:

Chương 2: Nghiên cứu tổng quan

1

Trang 10

Trong chương này, em sẽ giới thiệu tổng quát về các ngôn ngữ lập trình cần thiết.

Chương 3: Phân tích thiết kế hệ thống

Ở phần này em sẽ trình mô hình tổng quan của website và cách thức triển khai.

Chương 4: Kết luận và hướng phát triển.

Tổng kết đề tài và đưa ra phương hướng phát triển trong tương lai.

2

Trang 11

Chương 2 Nghiên cứu tổng quan.

2.1 Tìm hiểu ngôn ngữ lập trình:

2.1.1 HTML là gì?

HTML (HyperText Markup Language) – Ngôn ngữ đánh dấu siêu vănbản được sử dụng để tạo các tài liệu có thể truy cập trên mạng Tài liệu HTMLđược tạo nhờ dùng các thẻ và các phần tử của HTML File được lưu trên máychủ dịch vụ web với phần mở rộng “.htm” hoặc “.html” Các trình duyệt sẽ đọctập tin HTML và hiển thị chúng dưới dạng trang web Các thẻ HTML sẽ đượcẩn đi, chỉ hiển thị nội dung văn bản và các đối tượng khác: hình ảnh, media Vớicác trình duyệt khác nhau đều hiển thị một tập HTML với một kết quả nhất định.Các trang HTML được gửi đi qua mạng internet theo giao thức HTTP HTMLkhông những cho phép nhúng thêm các đối tượng hình ảnh, âm thanh mà còncho phép nhúng các kịch bản vào trong đó như các ngôn ngữ kịch bản nhưJavascript để tạo hiệu ứng động cho trang web Để trình bày trang web hiệu quảhơn thì HTML cho phép sử dụng kết hợp với CSS HTML không những chophép nhúng thêm các đối tượng hình ảnh, âm thanh mà còn cho phép nhúng cáckịch bản vào trong đó như các ngôn ngữ kịch bản như Javascript để tạo hiệu ứngđộng cho trang web

HTML là một chuẩn ngôn ngữ internet được tạo ra và phát triển bởi tổchức World Wide Web Consortium còn được viết tắc là W3C Trước đó thìHTML xuất bản theo chuẩn của RFC HTML được tương thích với mọi hệ điềuhành cùng các trình duyệt của nó Khả năng dễ học, dễ viết là một ưu điểm củaHTML không những vậy việc soạn thảo đòi hỏi hết sức đơn giản, chúng ta cóthể dùng word, notepad hay bất cứ một trình soạn thảo văn bản nào để viết vàchỉ cần lưu với định dạng “.html “ hoặc “.htm” là đã có thể tạo ra một file chứaHTML Hiện nay, phiên bản mới nhất của HTML là HTML5 với nhiều tínhnăng ưu việt so với các phiên bản cũ HTML cải tiến khá nhiều đặc biệt hỗ trợmạnh mẽ các phần tử multimedia mà không cần các plugin Một tập tin HTML

3

Trang 12

bao gồm trong đó là các đoạn văn bản HTML, được tạo lên bởi các thẻ HTML.HTML5 nói chung mạnh mẽ hơn nhiều không chỉ về tốc độ và độ thích ứng cao

mà chính là khả năng hỗ trợ API (Application Programming Interface - giaodiện lập trình ứng dụng) và DOM (Document Object Model – các đối tượngthao tác văn bản)

2.1.2 CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ quy định cách trình bàycho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…CSS quyđịnh cách hiển thị của các thẻ HTML bằng cách quy định các thuộc tính của cácthẻ đó (font chữ, kích thước, màu sắc )

CSS có cấu trúc đơn giản và sử dụng các từ tiếng anh để đặt tên cho cácthuộc tính CSS khi sử dụng có thể viết trực tiếp xen lẫn vào mã HTML hoặctham chiếu từ một file css riêng biệt Hiện nay CSS thường được viết riêngthành một tập tin với mở rộng là “.css” Chính vì vậy mà các trang web có sửdụng CSS thì mã HTML sẽ trở nên ngắn gọn hơn Ngoài ra có thể sử dụng mộttập tin CSS đó cho nhiều website tiết kiệm rất nhiều thời gian và công sức Mộtđặc điểm quan trọng đó là tính kế thừa của CSS do đó sẽ giảm được số lượngdòng code mà vẫn đạt được yêu cầu

Tuy nhiên, đối với CSS thì các trình duyệt hiểu theo kiểu riêng của nó

Do vậy, việc trình bày một nội dung trên các trình duyệt khác nhau là khôngthống nhất CSS cung cấp hàng trăm thuộc tính trình bày dành cho các đối tượngvới sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

2.1.3 PHP là gì?

PHP (Hypertext Preprocessor) là một ngôn ngữ lập trình kịch bản hay mộtloại mã lệnh chủ yếu được dùng để phát triển các ứng dụng viết cho máy chủ,mã nguồn mở, dùng cho mục đích tổng quát Nó rất thích hợp với web và có thể

dễ dàng nhúng vào trang HTML Do được tối ưu hóa cho các ứng dụng web, tốcđộ nhanh, nhỏ gọn, cú pháp giống ngôn ngữ lập trình C và ngôn ngữ lập trìnhJava, dễ học và thời gian xây dựng sản phẩm tương đối ngắn hơn so với các

4

Trang 13

ngôn ngữ khác nên PHP đã nhanh chóng trở thành một ngôn ngữ lập trình webphổ biến nhất thế giới Một tập tin PHP có phần mở rộng *.php, nó có thể chứacác văn bản, mã nguồn HTML, CSS, Javascript, Jquery và đương nhiên có thểchứa mã nguồn PHP.

Đối với các trang PHP khi có yêu cầu xem trang web thì Server sẽ tiếnhành phát sinh trang web đó từ mã nguồn PHP sang mã nguồn HTML, sau đómới chuyển mã nguồn đó về trình duyệt web để người dùng xem Vì các trìnhduyệt web không thể đọc được các mã nguồn PHP mà chỉ đọc được các mãnguồn HTML

2.2 Các thư viện

2.2.1 Thư viện JavaScript

JavaScript là một ngôn ngữ dạng script thường được sử dụng cho việc lậptrình web ở phía client, nó tuân theo chuẩn ECMAScript Là một ngôn ngữ linhđộng, cú pháp dễ sử dụng như các ngôn ngữ khác và dễ dàng lập trình.JavaScript không hề liên quan tới ngôn ngữ lập trình java, được hầu hết các trìnhduyệt ngày nay hỗ trợ Với javascript, ứng dụng web của bạn sẽ trở nên vô cùngsinh động, mang tính trực quan và tương tác cao JavaScript theo phiên bản hiệnhành là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từcác ý niệm nguyên mẫu Ngôn ngữ này được dùng rộng rãi cho các trang web,nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằmsẵn trong các ứng dụng Giống Java, JavaScript có cú pháp tương tự ngôn ngữlập trình C “.js” là phần mở rộng thường được dùng cho tập tin mã nguồnJavaScript

2.2.2 Thư viện Bootstrap

- Tiết kiệm thời gian: Boostrap giúp người thiết kế giao diện website tiếtkiệm rất nhiều thời gian Các thư viện Bootstrap có những đoạn mã sẵn sàng chobạn áp dùng vào website của mình Bạn không phải tốn quá nhiều thời gian để

tự viết code cho giao diện của mình

5

Trang 14

- Tùy biến cao: Bạn hoàn toàn có thể dựa vào Bootstrap và phát triểnnền tảng giao diện của chính mình Bootstrap cung cấp cho bạn hệ thống GridSystem mặc định bao gồm 12 bột và độ rộng 940px Bạn có thể thay đổi, nângcấp và phát triển dựa trên nền tảng này.

- Responsive Web Design: Với Bootstrap, việc phát triển giao diệnwebsite để phù hợp với đa thiết bị trở nên dễ dàng hơn bao giờ hết Đây là xuhướng phát triển giao diện website đang rất được ưu chuộng trên thế giới

2.2.3 Thư viện Jquery

JQuery là một thư viện kiểu mới của JavaScript, được tạo bởi John Resigvào năm 2006 với một phương châm tuyệt vời: Write less, do more - Viết ít hơn,làm nhiều hơn

JQuery làm đơn giản hóa việc truyền tải HTML, xử lý sự kiện, tạo hiệuứng động và tương tác Ajax Với jQuery, khái niệm Rapid Web Development đãkhông còn quá xa lạ

JQuery là một bộ công cụ tiện ích JavaScript làm đơn giản hóa các tác vụ

đa dạng với việc viết ít code hơn Dưới đây liệt kê một số tính năng tối quantrọng được hỗ trợ bởi jQuery:

- Thao tác DOM − jQuery giúp dễ dàng lựa chọn các phần tử

DOM để traverse (duyệt) một cách dễ dàng như sử dụng CSS, và chỉnh sửa nội

dung của chúng bởi sử dụng phương tiện Selector mã nguồn mở, mà được gọi

là Sizzle

- Xử lý sự kiện − jQuery giúp tương tác với người dùng tốt hơnbằng việc xử lý các sự kiện đa dạng mà không làm cho HTML code rối tung lênvới các Event Handler

- Hỗ trợ AJAX − jQuery giúp bạn rất nhiều để phát triển một sitegiàu tính năng và phản hồi tốt bởi sử dụng công nghệ AJAX

- Hiệu ứng − jQuery đi kèm với rất nhiều các hiệu ứng đa dạng vàđẹp mắt mà bạn có thể sử dụng trong các Website của mình

6

Trang 15

- Gọn nhẹ − jQuery là thư viện gọn nhẹ - nó chỉ có kích cỡ khoảng19KB (gzipped).

- Được hỗ trợ hầu hết bởi các trình duyệt hiện đại − jQuery đượchỗ trợ hầu hết bởi các trình duyệt hiện đại, và làm việc tốt trên IE 6.0+, FF 2.0+,Safari 3.0+, Chrome và Opera 9.0+

- Cập nhật và hỗ trợ các công nghệ mới nhất − jQuery hỗ trợ CSS3Selector và cú pháp XPath cơ bản

2.3 Các Framework

2.3.1 ReactJS

React (còn được gọi là Reactjs hay React.js) là một Thư viện javascriptđược tạo ra bởi sự cộng tác giữa Facebook và Instagram Nó cho phép nhữngnhà phát triển web tạo ra giao diện người dung nhanh chóng Phần Views củaReactjs thường được hiển thị bằng việc chủ yếu dung các component mà chứacác component cụ thể hoặc các thẻ HTML Một trong những đặc trưng duy nhấtcủa Reactjs là việc render dữ liệu không những có thể thực hiện ở tầng server

mà còn ở tầng client

Nó cũng sử dụng khái niệm là Virtual DOM (DOM ảo) Virtual DOM tạo

ra bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ Sau đó, ở mỗi vòng lặp,nó liệt kê những thay đổi và sau đó là cập nhật lại sự thay đổi trên DOM củatrình duyệt một cách hiệu quả Điều này cho phép ta viết các đoạn code như thểtoàn bộ trang được render lại dù thực tế là Reactjs chỉ render những componenthay subcomponent nào thực sự thay đổi

Ưu điểm:

- Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi màcác component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệu suất rấtnhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật len DOM và chỉthực hiện chúng Điều này giúp Reactjs tránh những thao tác cần trên DOM mànhiều chi phí Chúng ta có thể viết một ví dụ đơn giản về ReactJS như sau

7

Trang 16

- Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú phápđặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML vàJavascript Ta có thể them vào các đoạn HTML vào trong hàm render mà khôngcần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽ chuyển đổi cácđoạn HTML thành các hàm khởi tạo đối tượng HTML bằng bộ biến đổi JSX.

- Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên càiđặt ứng dụng mở rộng của Chrome dành cho Reactjs Nó giúp bạn debug code

dễ dàng hơn Sau khi bạn cài đặt ứng dụng này, bạn sẽ có cái nhìn trực tiếp vàovirtual DOM như thể bạn đang xem cây DOM thông thường

- Render tầng server: Một trong những vấn đề với các ứng dụng đơn trang

là tối ưu SEO và thời gian tải trang Nếu tất cả việc xây dựng và hiển thị trangđều thực hiện ở client, thì người dung sẽ phải chờ cho trang được khởi tạo vàhiển thị lên Điều này thực tế là chậm Hoặc nếu giả sử người dung vô hiệu hóaJavascript thì sao? Reactjs là một thư viện component, nó có thể vừa render ởngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML

và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có way binding hay là Ajax

2 Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cầnphải cấu hình lại

8

Định dạng
Số trang	25
Dung lượng	5,32 MB