Thiết kế giao diện website giày mwc

- Chức năng và cách sử dụng phần tử ● Phần tử là một phần tử khối, mặc định thì phần tử khối này không có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho các

TRƯỜNG ĐẠI HỌC KINH TẾ

KHOA THỐNG KÊ – TIN HỌC

–––––––––––––––––––––––––––––––

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP

NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ

CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN

ĐỀ TÀI: THIẾT KẾ GIAO DIỆN WEBSITE GIÀY MWC

Giảng viên hướng dẫn : TS Nguyễn Thị Uyên Nhi

em trong suốt thời gian thực tập và cho em những lời tư vấn, nhận xét đúng đắn

đề em có đủ hành trang kiến thức để có thể tìm một vị trí thực tập tốt nhất vàhoàn thành báo cáo

Để hoàn thành kỳ thực tập và bài báo cáo này em cũng xin gửi lời cảm ơnsâu sắc tới công ty R2S đã nhận em vào thực tập cùng các anh chị tận tình giúp

đỡ, hỗ trợ nhiệt tình, củng cố kiến thức, tạo điều kiện thuận lợi trong quá trìnhthực tập

LỜI CAM ĐOAN

“Em xin cam đoan đề tài: “Thiết kế giao diện website giày MWC” là một công

trình nghiên cứu độc lập của em dưới sự hướng dẫn của các anh chị Mentors củacông ty R2S Ngoài ra không có bất cứ sự sao chép của người khác Đề tài, nội dung báo cáo thực tập là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường cũng như tham gia thực tập tại công ty.”

MỤC LỤC

LỜI CẢM ƠN iii

2.1.4 Cách sử dụng các thẻ <div>, <span> trong HTML 6

2.1.6 Thẻ tiêu đề (heading) và đoạn văn bản (paragraph) trong HTML 7

2.2.4 Cách tạo đường viền (border) cho phần tử 102.2.5 Cách thiết lập vùng đệm (padding) trong CSS 10

2.3.2 Cách sử dụng biến (Variable) trong JavaScript 12

2.3.6 Cách tạo đối tượng (Object) trong JavaScript 14

2.5.2 Câu lệnh bootstrap 20

3.1 Khảo sát thông tin cần thiết về hệ thống 213.1.1 Khảo sát và đánh giá hiện trạng hoạt động của các hệ thống hiện có: 21

3.2.1 Mục tiêu thiết kế giao diện 23

5.2 Kết luận và hướng phát triển về giải pháp 33

DANH MỤC HÌNH ẢNH

Hình 1.1 Logo công ty 3

Hình 2 Visual Studio Code 4

Hình 3 Ngôn ngữ HTML 5

Hình 4 Ngôn ngữ CSS 9

Hình 5 Ngôn ngữ JavaScript 12

Hình 6 Thư viện ReactJS 18

Hình 7 Thư viện Bootstrap 19 Hình 8 Sơ đồ Usecase 22 Hình 9 Công cụ Figma 23

Hình 10 Khung giao diện “Trang chủ”

24 Hình 11 Khung giao diện “Sản phẩm” 25 Hình 12 Khung giao diện “Bộ sưu tập” 26 Hình 13 Khung giao diện “Đăng nhập” 27 Hình 14 Giao diện “Trang chủ” 28

Hình 15 Giao diện “Bộ sưu tập” 30

Hình 16 Giao diện “Sản phẩm” 31

Hình 17 Giao diện “Đăng nhập” 32

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

STT Kí hiệu chữ viết

tắt

Chữ viết đầy đủ

LỜI MỞ ĐẦU

1 Mục tiêu nghiên cứu của đề tài

Mục tiêu của đề tài “Thiết kế giao diện website giày nam MWC” là có thể tạo

ra một website bán hàng online Sắp xếp và phân bổ được các bố cục của trangweb một cách hợp lý, phù hợp và dễ nhìn Vận dụng khả năng lập trình để tạocác mục giao diện web như: trang chủ, trang sản phẩm,…

2 Nhiệm vụ của đề tài

Tìm hiểu ngôn ngữ, môi trường lập trình Front End và vận dụng những kiếnthức đã học để xây dựng website đơn giản

3 Phương pháp nghiên cứu

- Nghiên cứu các kiến thức sẵn có trên internet

- Hướng dẫn bởi mentor

- Kiến thức tiếp thu tại công ty thực tập

- Xây dựng các demo để hiểu rõ hơn những gì đã học

4 Đối tượng và phạm vi nghiên cứu

- Phạm vi nghiên cứu

● Ngôn ngữ HTML

● Ngôn ngữ CSS

● Ngôn ngữ JavaScript

● Thư viện ReactJS

- Đối tượng nghiên cứu

● Giao diện của website

● Người dùng sử dụng website

5 Kết cấu của đề tài

Đề tài được tổ chức gồm phần mở đầu, 5 chương nội dung và phần kếtluận

- Mở đầu

- Chương 1: Tổng Quan

- Chương 2: Cơ sở lý thuyết

- Chương 3:Triển khai dự án

- Chương 4: Kết quả

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

R2S nhận phát triển phần mềm theo đơn đặt hàng từ khách hàng cá nhân,doanh nghiệp trong và ngoài nước Với những dự án này, học viên thử việc cóthể được nhận lương ngay trong thời gian thử việc; Và hơn hết các bạn có thể sẽtrở thành đội ngũ phát triển phần mềm của công ty.

R2S cung cấp các dịch vụ tư vấn giải pháp và triển khai các giải phápcông nghệ thông tin Cung cấp nguồn nhân lực hoặc hợp tác triển khai dự án.Ngoài ra R2S còn hỗ trợ các doanh nghiệp vừa và nhỏ triển bộ phận công nghệthông tin

1.2 Vị trí việc làm và sự thăng tiến

- Vị trí việc làm

● Thực tập ở vị trí Front-end tại công ty R2S, em đã học thêm được nhiều

kỹ năng và kinh nghiệm về lập trình Cá nhân em nghĩ sẽ cần thêm 1-2 năm kinh nghiệm để thành thạo hơn về mảng front-end

- Sự thăng tiến tại công ty

● Mặc dù thực tập chỉ được 1 thời gian ngắn tại công ty R2S Tuy nhiên khi hoàn thành tốt khóa thực tập, em đã trao đổi với mentor và vẫn có cơ hội được chuyển sang fresher và làm việc với công ty nếu như có thái độ học tập và biểu hiện tốt

1.3 Tổng quan về lập trình Front End

Phần front-end của một trang web là phần tương tác với người dùng Tất cả mọithứ bạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tớicác menu xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, vàJavaScript được điều khiển bởi trình duyệt máy tính của bạn

-Cài đặt công cụ : https://code.visualstudio.com/

Hình 2 Visual Studio Code

CHƯƠNG 2 CƠ SỞ LÝ THUYẾT

để tạo ra các trang web động và tĩnh

HTML là một ngôn ngữ đánh dấu được sử dụng để tạo và thiết kế các trangweb Dưới đây là một số ví dụ về mã HTML được sử dụng để tạo cáctrang web:

<h1>Đây là tiêu đề h1</h1>

<p>Đoạn văn bản được hiển thị.</p>

● Thuộc tính trong HTML là một loại thông tin liên quan đến phần tử

HTML, được đặt trong thẻ mở và có cú pháp "tên thuộc tính = giá trị thuộc tính" Các thuộc tính cung cấp thêm các thông tin cho phần tử HTML và giúp định dạng và xác định các đặc điểm của phần tử đó Mỗi thuộc tính sẽ được đại diện bởi một từ khóa, ví dụ như “href”, “src”,

“class”, “id”

● Ví dụ:

● Thuộc tính color dùng để nói đến màu sắc của phần tử

● Thuộc tính height dùng để nói đến chiều cao của phần tử

- Chức năng và cách sử dụng phần tử <div>

● Phần tử <div> là một phần tử khối, mặc định thì phần tử khối này không

có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho các phần tử khác

- Chức năng và cách sử dụng phần tử <span>

● Phần tử <span> trong HTML là một phần tử cấp độ inline tổng quát, được

sử dụng để nhóm các phần tử cho mục đích tạo kiểu (bằng cách áp dụng CSS) hoặc để định dạng một phần của văn bản Phần tử <span> không có

ý nghĩa ngữ nghĩa và không ảnh hưởng đến cấu trúc của trang web Nó chỉ

là một phần tử trống, được sử dụng để bao bọc một phần của văn bản hoặcmột số phần tử khác để áp dụng CSS cho chúng

● Để tạo một cái liên kết thì chúng ta dùng cú pháp như sau:

<a href="URL">tiêu đề đại diện cho liên kết</a>

- Thẻ tiêu đề (Heading)

● Thông thường, khi chúng ta xem một bài viết trên các trang tin tức thì chúng ta sẽ thấy bên trong bài viết có những dòng chữ được dùng để đại diện cho các nội dung chính, những dòng chữ đó được gọi là tiêu đề (đề mục) của bài viết

● Thẻ tiêu đề được chia ra làm sáu loại chính: <h1>, <h2>, <h3>, <h4>,

<h5>, <h6>

- Tạo một đoạn văn bản trong HTML

● Trong HTML, văn bản thường được thể hiện dưới dạng từng đoạn Mỗi đoạn văn bản sẽ có một khoảng cách lề phía trên & lề phía dưới (mặc định

là 16 pixel) để tách biệt đoạn văn bản với các nội dung nằm ở phía trên và phía dưới nó

● Để tạo một văn bản trong HTML thì dùng thẻ <p></p>

Trong ngôn ngữ HTML, thuộc tính id và thuộc tính class được sử dụng để đặt tên(phân loại) các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần

tử sau này

- Thuộc tính ID

● Thuộc tính id dùng để đặt tên cho phần tử, tên này phải là duy nhất, không

có trường hợp tên id của các phần tử bị trùng nhau

● Để khai báo id cho một phần tử thì chúng ta đặt thuộc tính id vào bên trong thẻ mở của phần tử đó với cú pháp id="tên id" Sau khi đã khai báo, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên id của

nó với cú pháp #tên id

- Thuộc tính Class

● Thuộc tính class cũng gần giống với thuộc tính id, đó chính là dùng để đặt tên cho phần tử Tuy nhiên, việc đặt tên class khác với tên id ở chỗ là với cùng một tên class thì chúng ta có thể dùng để đặt cho nhiều phần tử khác nhau

● Để khai báo class cho một phần tử thì chúng ta đặt thuộc tính class vào bên trong thẻ mở của phần tử với cú pháp class="tên class" Sau khi đã khai báo class, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên class của nó với cú pháp tên class

2.1.8 Thuộc tính Style trong HTML

- Chức năng của thuộc tính style là dùng để thiết lập việc định dạng cho mộtphần tử HTML

- Để sử dụng thuộc tính style thì chúng ta đặt nó vào bên trong thẻ mở của

phần tử mà mình muốn định dạng với cú pháp như sau:

style = " property : value "

- Phần tử khối là gì

● Phần tử khối là loại phần tử mà khi hiển thị lên màn hình thì nó sẽ có các đặc điểm như sau:

● Luôn luôn được bắt đầu trên một hàng mới.

● Chiều rộng của phần tử sẽ chiếm toàn bộ chiều rộng phần nội dung củaphần tử cha của nó

- Phần tử nội tuyến là gì

● Phần tử nội tuyến là loại phần tử mà khi hiển thị lên màn hình thì nó sẽ có

các đặc điểm như sau:

● Phần tử hiển thị tiếp nối trên hàng hiện tại (nếu anh của nó không phải

CSS là chữ viết tắt của cụm từ Cascading Style Sheets, nó được sử dụng để

"định dạng" cho các phần tử trên trang web, hay nói cách khác là nó quyết định việc các phần tử HTML khi hiển thị lên trang web sẽ trông như thế nào

Với việc áp dụng CSS trong thiết kế giao diện website, chúng ta có thể định dạng cho các phần tử trên trang web hiển thị giống với ý muốn của mình, từ đó tạo ra được những trang web có nội dung đặc sắc, sinh động, phong phú, đa dạng.

Thông thường thì "cấu trúc" của một phần tử HTML sẽ có bốn thành phần chính:

- CONTENT : Nội dung của phần tử

- BORDER : Đường viền bao xung quanh nội dung của phần tử

- PADDING : Khoảng cách (vùng đệm) nằm giữa đường viền của phần tửđến nội dung của phần tử

- MARGIN : Khoảng cách (lề) nằm giữa đường viền của phần tử đến mộtphần tử khác

2.2.4 Cách tạo đường viền (border) cho phần tử

Để thiết lập kiểu đường viền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính border-style cho phần tử đó với cú pháp như sau:

border-style: value

Vùng đệm (padding) là khoảng cách nằm giữa đường viền của phần tử & nội dung của phần tử Để thiết lập vùng đệm cho một phần tử HTML thì chúng ta cần

phải thiết lập thuộc tính padding cho phần tử đó với cú pháp như sau:

padding: value;

Lề (margin) là khoảng cách nằm giữa đường viền của phần tử đến một phần tửkhác Để thiết lập khoảng cách lề cho một phần tử thì chúng ta cần phải thiết

lập thuộc tính margin cho phần tử đó với cú pháp như sau:

margin: value;

Trong CSS, màu sắc có thể được xác định dựa theo một trong sáu loại giá trị:

● Để thiết lập chiều rộng cho phần nội dung (content) của phần tử thì chúng

● Để thiết lập chiều cao cho phần nội dung (content) của phần tử thì chúng

ta sử dụng thuộc tính height

height: value;

Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt Ví dụ thông thường nếu giao diện website đặtmột chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.

2.3.2 Cách sử dụng biến (Variable) trong JavaScript

Trong javascript chúng ta có thể khai báo biến bằng các cách sau đây:

- Cách 1: Sử dụng từ khóa var

var tenBien = giaTri;

- Cách 2: Không cần sử dụng từ khóa

tenBien = giaTri

Chú ý: Tên Biến phải được đặt theo quy tắc sau đây

- Tên biến bắt đầu phải là chữ cái hoặc ký tự '_'

- Tên biến không được bắt đầu bằng số

- Tên biến có độ dài không giới hạn

2.3.3 Toán tử cơ bản trong JavaScript

Kiểu dữ liệu (data type hoặc chúng ta có thể gọi đơn giản là type) là một cách

để phân loại dữ liệu cho trình biên dịch hiểu các lập trình viên muốn sử dụng loại dữ liệu nào

- Kiểu dữ liệu nguyên thủy:

● Number: Các số nguyên hoặc số thực Ví dụ: 5 hoặc 5.05

● String: là các text như “Các kiểu dữ liệu trong JavaScript”, text có thể có một hoặc nhiều ký tự

● Boolean: chỉ có 2 giá trị là true hoặc false

● Undefined: là các giá trị không xác định

● Null: đơn giản là không có giá trị nào cả

- Kiểu dữ liệu không nguyên thủy (tham chiếu):

● Object: Thể hiện một đối tượng và các thuộc tính có thể truy cập đến

● Array: Nhóm các giá trị giống nhau

● RegExp: Biểu thức chính quy

2.3.5 Cách tạo hàm (Function) trong JavaScript

Khai báo hàm, chúng ta dùng từ khóa function, theo sau nó là:

Có 3 cách để khai báo đối tượng trong Javascript:

Mảng Array là một đối tượng định nghĩa sẵn trong JS, nó là đối tượng chứa danh sách các dữ liệu Có hai cách tạo ra đối tượng mảng, sử dụng toán tử new và khởitạo bằng ký hiệu [].

- Cách 1, tạo mảng với new Array(), ví dụ:

var courses = new Array("HTML", "CSS", "JS");

- Cách 2, tạo mảng với khai báo dữ liệu trong []

var courses = ["HTML", "CSS", "JS"];

- Lệnh if sẽ được bao quanh bởi cặp ngoặc nhọn đóng mở {}

- Cú pháp lênh if

if (condition){

… }

- Vòng lặp While/Do-While

● Vòng lặp while và do while dùng để lặp với trường hợp tá không biết chính xác số lần lặp là bao nhiêu và trường hợp điều kiện dừng vòng lặp quá phức tạp, điều này hoàn toàn khác với vòng lặp for

● Vòng lặp while:

while (condition){

// câu lệnh }

● Vòng lặp do-while

do { // câu lệnh }

while (condition);

- Dom là gì?

● DOM Javascript là viết tắt của chữ Document Object Model, dịch tạm

ra là mô hình các đối tượng trong tài liệu HTML Thông qua mô hìnhDOM ta có thể truy xuất đến các thẻ HTML một cách dễ dàng

● Mỗi thẻ HTML sẽ có những thuộc tính (properties) và có phân cấp chacon với các thẻ HTML khác Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector, và DOM sẽ có nhiệm vụ xử lý các vấn đềnhư đổi thuộc tính, đổi cấu trúc của các thẻ HTML

- Nhiệm vụ của Dom

● Cho phép truy xuất đến các thẻ html

● Thay đổi các thuộc tính của thẻ html

● Thay đổi css của các thẻ html

● Tạo, xóa, thêm các thẻ html

- Các loại Dom trong javascript

● DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu của website

● DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các thuộc tính như tên class, id, name của thẻ HTML

● DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộctính của các thẻ HTML

● DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ

- Đối tượng Dom document trong javascript

● document.getElementById: Phương thức này giúp ta truy xuất đếnthẻ HTML thông qua ID Nếu trong tài liệu html của bạn bị trùng

ID thì nó sẽ lấy thẻ html có ID trùng khớp đầu tiên

● document.getElementsByTagName: Phương thức này lấy tất cả cácthẻ html có tên trùng với tham số truyền vào Ví dụ dưới đây là mình lấy tất cả thẻ div

● document.getElementsByClassName: Phương thức này lấy tất cả thẻ html có tên class trùng với tên của tham số truyền vào Ví dụ dưới đây mình lấy các thẻ có class là wrapper

2.4 Thư viện ReactJS

Hình 6 Thư viện ReactJS

React Js là một thư viện viết bằng javascript, dùng để xây dựng giao diện người dùng (UI) React được sử dụng rộng rãi và có hệ sinh thái đa dạng phong phú.React Js là một thư viện javascript dùng để xây dựng UI, UI ở đây được dùng chính ở 2 nền tảng Web và Mobile Ở lĩnh vực Web, sử dụng React Js có thể đemlại trải nghiệm tốt cho người dùng, cũng như khả năng Hot Reload giúp bạn lập trình nhanh hơn

Props là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element

Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components