\documentclass[a4paper]{article}

%\documentclass[a4paper,fontsize=13pt]{scrartcl}

\usepackage{vntex}
%\usepackage{helvet} %set font Helvetica

%\usepackage{times} %set font Times New Roman

\renewcommand{\familydefault}{\sfdefault} %set font Sans Serif

%\usepackage[english,vietnam]{babel}
%\usepackage[utf8]{inputenc}

%\usepackage[utf8]{inputenc}
%\usepackage[francais]{babel}
\usepackage{a4wide,amssymb,epsfig,latexsym,array,hhline,fancyhdr}

\usepackage{amsmath}
\usepackage{amsthm}
\usepackage{multicol,longtable,amscd}
\usepackage{diagbox}%Make diagonal lines in tables
\usepackage{booktabs}
\usepackage{alltt}
\usepackage[framemethod=tikz]{mdframed}% For highlighting paragraph backgrounds
\usepackage{caption,subcaption}

\usepackage{lastpage}
\usepackage[lined,boxed,commentsnumbered]{algorithm2e}
\usepackage{enumerate}
\usepackage{color}
\usepackage{graphicx} % Standard graphics
package
\usepackage{array}
\usepackage{tabularx, caption}
\usepackage{multirow}
\usepackage{multicol}
\usepackage{rotating}
\usepackage{graphics}
\usepackage{geometry}

\usepackage{setspace}
%\singlespacing
%\onehalfspacing
%\doublespacing
%\setstretch{1.5}

\usepackage{epsfig}
\usepackage{tikz}
\usetikzlibrary{calc}
\newcommand\HRule{\rule{\textwidth}{1pt}}
\usetikzlibrary{arrows,snakes,backgrounds}
\usepackage[unicode]{hyperref}
\hypersetup{urlcolor=blue,linkcolor=black,citecolor=black,colorlinks=true}
%\usepackage{pstcol} % PSTricks with
the standard color package

\usepackage{a4wide,amssymb,epsfig,latexsym,array,hhline,fancyhdr}
\usepackage[makeroom]{cancel}
\usepackage{amsmath}
\usepackage{amsthm}
\usepackage{multicol,longtable,amscd}
\usepackage{diagbox}%Make diagonal lines in tables
\usepackage{booktabs}
\usepackage{alltt}
\usepackage[framemethod=tikz]{mdframed}% For highlighting paragraph backgrounds
\usepackage{caption,subcaption}
\usepackage{arydshln}
\usepackage{tabularx} % in the preamble

\setlength\dashlinedash{1.5pt}
\setlength\dashlinegap{4.5pt}
\setlength\arrayrulewidth{0.2pt}

\usepackage{textcomp}
\usepackage{listings}
\usepackage{listingsutf8}
% Typesetting Listings
\usepackage{xcolor}
\usepackage{color}
\definecolor{listinggray}{gray}{0.9}
\definecolor{lbcolor}{rgb}{0.9,0.9,0.9}
\definecolor{Darkgreen}{rgb}{0.1,0.6,0.1}

\lstset{
backgroundcolor=\color{lbcolor},
tabsize=4,
% rulecolor=,
language=[GNU]C++,
basicstyle=\scriptsize,
upquote=true,
aboveskip={1.5\baselineskip},
columns=fixed,
showstringspaces=false,
extendedchars=false,
breaklines=true,
prebreak = \raisebox{0ex}[0ex][0ex]{\ensuremath{\hookleftarrow}},
frame=single,
numbers=left,
showtabs=false,
showspaces=false,
showstringspaces=false,
identifierstyle=\ttfamily,
keywordstyle=\color[rgb]{0,0,1},
commentstyle=\color[rgb]{0.026,0.112,0.095},
stringstyle=\color[rgb]{0.627,0.126,0.941},
numberstyle=\color[rgb]{0.205, 0.142, 0.73},
% \lstdefinestyle{C++}{language=C++,style=numbers}’.
}
\lstset{
backgroundcolor=\color{lbcolor},
tabsize=4,
language=C++,
captionpos=b,
tabsize=3,
frame=lines,
numbers=left,
 numberstyle=\tiny,
numbersep=5pt,
breaklines=true,
showstringspaces=false,
basicstyle=\footnotesize,
% identifierstyle=\color{magenta},
keywordstyle=\color[rgb]{0,0,1},
commentstyle=\color{Darkgreen},
stringstyle=\color{red}
}

\usepackage{lastpage}
\usepackage[lined,boxed,commentsnumbered]{algorithm2e}
\usepackage{enumerate}
\usepackage{color}
\usepackage{graphicx} % Standard graphics
package
\usepackage{array}
\usepackage{tabularx, caption}
\usepackage{multirow}
\usepackage{multicol}
\usepackage{rotating}
\usepackage{graphics}
\usepackage{geometry}
\usepackage{setspace}
\usepackage{epsfig}
\usepackage{tikz}
\usetikzlibrary{arrows,snakes,backgrounds}
\usepackage[unicode]{hyperref}
\hypersetup{urlcolor=blue,linkcolor=black,citecolor=black,colorlinks=true}
%\usepackage{pstcol} % PSTricks with
the standard color package
\usepackage{verbatim}

%\usepackage{fancyhdr}
\setlength{\headheight}{40pt}
\pagestyle{fancy}
\fancyhead{} % clear all header fields
\fancyhead[L]{
\begin{tabular}{rl}
\begin{tabular}{l}
\textbf{\bf \ttfamily Trường ĐH Bách Khoa TP. HCM -- Khoa Khoa học và
Kỹ thuật Máy tính}\\
\end{tabular}
\end{tabular}
}
\fancyhead[R]{
\begin{tabular}{l}
\tiny \bf \\
\tiny \bf
\end{tabular} }
\fancyfoot{} % clear all footer fields
\fancyfoot[L]{\scriptsize \ttfamily Báo cáo Bài tập lớn, môn Thực tập Công nghệ
phần mềm}
\fancyfoot[R]{\scriptsize \ttfamily Trang {\thepage}/\pageref{LastPage}}
\renewcommand{\headrulewidth}{0.3pt}
\renewcommand{\footrulewidth}{0.3pt}

%%%
\setcounter{secnumdepth}{4}
\setcounter{tocdepth}{3}
\makeatletter
\newcounter {subsubsubsection}[subsubsection]
\renewcommand\thesubsubsubsection{\thesubsubsection .\@alph\c@subsubsubsection}
\newcommand\subsubsubsection{\@startsection{subsubsubsection}{4}{\z@}%
{-3.25ex\@plus -1ex \@minus -.2ex}%
{1.5ex \@plus .2ex}%
{\normalfont\normalsize\bfseries}}
\newcommand*\l@subsubsubsection{\@dottedtocline{3}{10.0em}{4.1em}}
\newcommand*{\subsubsubsectionmark}[1]{}
\makeatother

\everymath{\color{blue}}%make in-line maths symbols blue to read/check easily

\sloppy
\captionsetup[figure]{labelfont={small,bf},textfont={small,it},belowskip=-
1pt,aboveskip=-9pt}
%space remove between caption, figure, and text
\captionsetup[table]{labelfont={small,bf},textfont={small,it},belowskip=-
1pt,aboveskip=7pt}
\setlength{\floatsep}{5pt plus 2pt minus 2pt}
\setlength{\textfloatsep}{5pt plus 2pt minus 2pt}
\setlength{\intextsep}{10pt plus 2pt minus 2pt}

\begin{document}

\begin{titlepage}
\begin{tikzpicture}[remember picture, overlay]
\draw[line width = 2pt,color=blue] ($(current page.north west) + (2.7cm,-2.7cm)$)
rectangle ($(current page.south east) + (-2.7cm,2.7cm)$);
\draw[line width = 1pt,color=green] ($(current page.north west) + (2.6cm,-2.6cm)
$) rectangle ($(current page.south east) + (-2.6cm,2.6cm)$);
\end{tikzpicture}
\vspace{0cm}
\begin{center}
TRƯỜNG ĐẠI HỌC BÁCH KHOA TP HCM \\
\textbf{KHOA KHOA HỌC VÀ KỸ THUẬT MÁY TÍNH } \\
- - - - - - - - - - - -
\end{center}

\vspace{1cm}
\begin{figure}[h!]
\begin{center}
\includegraphics[width=3.6cm]{Images/hcmut.png}
\end{center}
\end{figure}
\vspace{1cm}

\begin{center}
\begin{tabular}{c}
\multicolumn{1}{c}{\textbf{{\huge LẬP TRÌNH WEB}}}\\
~~\\
\hline
\\

\multicolumn{1}{c}{\textbf{{\Large Báo cáo Bài tậo lớn }}}\\

\\

\textbf{{\Huge Xây dựng và phát triển}} \\

\textbf{{\Huge Website bán mắt kính }}\\
\\
\hline
\end{tabular}
\end{center}
\begin{table}[h]
\begin{tabular}{rrl}
\hspace{5cm} & \textbf{GV hướng dẫn}: &Nguyễn Hữu Hiếu \\
\\
\hspace{4cm} & \textbf{Email liên hệ}: &1611967@hcmut.edu.vn \\
\end{tabular}
\end{table}
\vspace{-0.2cm}

\begin{table}[h]
\begin{tabular}{rrl}
\hspace{5cm} & \textbf{SV thực hiện}: \\
& &Hoàng Công Lý -- 1611967 \\
& &Nguyễn Trường Giang -- 1510846\\
& &Trần Thị Anh -- 1610107\\
& &Trần Thị Ngọc Ánh -- 1610131

\end{tabular}
\end{table}

\vspace{0.5cm}

\begin{center}
{\footnotesize Tp. Hồ Chí Minh, Tháng 12/2019}
\end{center}
\end{titlepage}

%Mục lục
\newpage
\thispagestyle{empty}
\tableofcontents

%Danh sách bảng

\newpage
\thispagestyle{empty}
\listoftables

%Danh sách hình

\newpage
\thispagestyle{empty}
\listoffigures

\newpage

\section{Giới thiệu}

Tài liệu này bước đầu đặc tả dự án Website bán mắt kính. Dự án được thực
hiện bởi nhóm sinh viên lớp L02, môn lập trình Web ở học kì
191, trường Đại học Bách Khoa thành phố Hồ Chí Minh. Dự án này nếu được
hoàn thành sẽ giúp đỡ các nhà bán lẻ mắt kính dễ dàng tiếp cận với người tiêu
dùng và giúp người tiêu dùng thuận lợi hơn trong việc mua sắm hàng cụ thể là mắt
kính.\\
Ngày này trong nhịp sống hối hả của con người thì việc giành thời gian để
ra ngoài để mua sắm trở nên là 1 điều quá xa sỉ. Với mua sắm trực tuyến(online),
bạn cũng không cần phải lo lắng về điều kiện thời tiết. Người tiêu dùng và các
khách hàng là những tổ chức, công ty,… đang dần chuyển sang mua sắm trực tuyến
nhiều hơn nhằm tiết kiệm thời gian\\

Chính vì thế việc mua sắm online càng trở nên quan trọng và cần thiết,chỉ cần
1 cú click chuột thì họ có thể có được sản phẩm mà mình mong muốn.Việc mua sắm
online có nhiều ưu điểm là có thể sở hữu mọi thứ thông qua các cú click chuột chứ
không cần phải đến tận nơi để mua hàng. Sau khi vào website bán hàng, chọn sản
phẩm, chỉ cần đặt hàng (order) người bán sẽ mang sản phẩm đến tận nhà bạn. Mua sắm
online cho phép mua hàng bất cứ khi nào bạn muốn. Các cửa hang trên mạng không bao
giờ đóng cửa, có thể mua sắm 24/24 giờ và 7 ngày trong tuần.Chính vì thế tạo nên
website bạn luôn đẹp mắt. Website luôn đầy đủ tính năng đáp ứng yêu cầu của người
tiêu dùng. Quản trị nội dung dễ dàng. Đầy đủ chức năng yêu cầu. Giao diện đẹp, bắt
mắt là yếu tố rất quan trọng giúp cho các nhà bán hàng có thể tăng doanh thu

\section{Mục tiêu}
Trong vài năm trở lại đây, việc internet phát triển quá nhanh đã làm thay
đổi thói quen mua hàng trực tuyến của người tiêu dùng, chính vì thế nhu cầu làm
website bán hàng online của các cửa hàng và doanh nghiệp ngày càng tăng cao. Chỉ
cần 1 cú click chuột thì họ có thể có được sản phẩm mà mình mong muốn.Việc mua sắm
online có nhiều ưu điểm là có thể sở hữu mọi thứ thông qua các cú click chuột chứ
không cần phải đến tận nơi để mua hàng. Do đó phần lớn các nhà bán hàng hiện nay
tạo website để bán hàng. Mục tiêu của nhóm là thiết kế một website đảm bảo được:\\
\begin{itemize}
\item Nâng cấp sản phẩm và thu hút khách hàng mới \\

\item Giúp tăng hiệu quả kinh doanh\\

\item Lơi nhuận tốt hơn khi sử dụng trang web bán hàng \\

\item Giao diện thân thiện và dễ sử dụng \\

\item Hình ảnh sản phẩm rõ ràng \\

\item Cho phép thống kê lượt người dùng, phân tích lượng người dùng để đánh
giá hiệu quả kinh doanh\\
\item Đồng thời website cần dễ quản trị, có thể tự cập nhật thông tin cho
website\\

\end{itemize}

\section{Cơ sở lý thuyết}
Sử dụng các kiến thức được học HTML5/CSS3, Javascript, PHP 7.2 và MySQL
\subsection{HTML5/CSS3}
\subsubsection{HTML5}
\begin{itemize}
\item HTML là chữ viết tắt của cụm từ tiếng anh HyperText Markup Language dịch
theo tiếng Việt thì có nghĩa là ngôn ngữ đánh dấu siêu văn bản.
\item HTML được sinh ra để tạo nên các trang web với các mẩu thông tin được
trình bày trên World Wide Web
\item HTML có thể được viết lên bởi các phần mềm, các trình soạn thảo văn bản
thông thường như notepad, wordpad, notepad ++, editplus,... hoặc các trình soạn
thảo chuyên dụng như visual studio, dev c,...
\item Một file HTML sẽ có 2 định dạng mở rộng là .html và .htm
\end{itemize}
Trong quá trình thiết kế thì nhóm sử dụng HTML5. Với HTML5:Ít phụ thuộc vào các
plugin cho các chức năng.
Scripting nên được thay thế bằng markup bất cứ khi nào có thể.
Độc lập thiết bị (ví dụ, có sẵn trên tất cả các thiết bị và cung cấp các trải
nghiệm giống nhau đối với người dùng).
Công bố quá trình phát triển để mọi người đều có thể nhìn thấy những gì đang diễn
\subsubsection{CSS3}
CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng
để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ
như HTML). Nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo
ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm một
chút “phong cách” vào các phần tử HTML đó như đổi màu sắc trang, đổi màu chữ, thay
đổi cấu trúc,…rất nhiều\\

CSS3 là việc giới thiệu các mô-đun. Ưu điểm của các mô-đun là cho phép thuộc tính
được hoàn thành và phê duyệt nhanh hơn vì các phân đoạn được hoàn thành và được
phê duyệt theo từng khối. Các tính năng được bao gồm trong CSS3 bao gồm hỗ trợ
cho các bộ chọn bổ sung, đổ bóng, góc tròn, nhiều hình nền, hình động, độ trong
suốt ..vv... Nó chứa “thuộc tính CSS” (đã được chia thành các phần nhỏ hơn).
\subsection{Javascript}
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm
qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:
\begin{itemize}
\item HTML: Giúp bạn thêm nội dung cho trang web.
\item CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web
\item JavaScript: Cải thiện cách hoạt động của trang web..
\end{itemize}
JavaScript hoặc JS sẽ giúp tăng tính tương tác trên website. Script này chạy trên
các trình duyệt của người dùng thay vì trên server và thường sử dụng thư vuiên
của bên thứ 3 nên có thể tăng thêm chức năng cho website mà không phải code từ
đầu.
\subsection{PHP}
PHP là từ được viết tắt từ Hypertext Preprocessor, đây là một ngôn ngữ của lập
trình có thể thực hiện kích bản hoặc là đưa ra một loại mã lệnh mà được dùng chủ
yếu trong việc phát triển những ứng dụng có liên quan đến việc viết cho máy chủ;
mã nguồn mở hay là mục đích tổng quát.
Hiện nay, PHP đang là một ngôn ngữ lập trình cho web được sử dụng và biết đến vô
cùng phổ biến trên thế giới. Lý do là bởi việc tối ưu hóa các ứng dụng của web,
việc có tốc độ nhanh và nhỏ gọn. Bên cạnh đó, các cú pháp của PHP cũng giống với
là C và Java nên các lập trình viên có thể học và xây dựng được một sản phẩm là
tương đối nhanh so với các ngôn ngữ khác.
:
\begin{itemize}
\item Ưu điểm: \\
- PHP được sử dụng miễn phí, là yếu tố vô cùng tuyệt vời cho những ai muốn
học về ngôn ngữ lập trình này\\
 - Cấu trúc của PHP cực đơn giản, theo họ nó sẽ không bị mất quá nhiều thời
gian mới có thể học được\\
- Thư viện mà PHP tạo ra thì có sự phong phú, cũng như được cộng đồng hỗ trợ
một cách mạnh mẽ\\
\item Nhược điểm:\\
- Thứ nhất, PHP có hạn chế về cấu trúc của ngữ pháp, bởi nó không được thiết
kế gọn gàng và có phần đẹp mắt như những ngôn ngữ trong lập trình khác\\
- PHP chỉ có thể hoạt động và sử dụng được trên các ứng dụng trong web.
\end{itemize}
\subsection{MySQL}
MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (Relational Database
Management System, viết tắt là RDBMS) hoạt động theo mô hình client-server. RDBMS
là một phần mềm hay dịch vụ dùng để tạo và quản lý các cơ sở dữ liệu (Database)
theo hình thức quản lý các mối liên hệ giữa chúng.\\

MySQL là một trong số các phần mềm RDBMS. RDBMS và MySQL thường được cho là một
vì độ phổ biến quá lớn của MySQL. Các ứng dụng web lớn nhất như Facebook,
Twitter, YouTube, Google, và Yahoo! đều dùng MySQL cho mục đích lưu trữ dữ liệu.
Kể cả khi ban đầu nó chỉ được dùng rất hạn chế nhưng giờ nó đã tương thích với
nhiều hạ tầng máy tính quan trọng như Linux, macOS, Microsoft Windows, và
Ubuntu.\\
\textbf{Mô hình Client-server}
Máy tính cài đặt và chạy phần mềm RDBMS được gọi là client (máy khách). Mỗi khi
chúng cần truy cập dữ liệu, chúng kết nối tới máy chủ (server) RDBMS. Cách thức
này chính là mô hình “client-server”.\\

\textbf{Open source}\\
Được hiểu là mã nguồn mở, Open source cho phép mọi người dùng sử dụng, cài đặt và
tùy chỉnh nó\\

\textbf{MySQL Server}\\
MySQL Server là gì? Đây là máy tính hay một hệ các máy tính cài đặt phần mềm MySQL
dành cho server để giúp bạn lưu trữ dữ liệu trên đó để máy khách có thể truy cập
vào quản lý.\\

\textbf{MySQL Client }\\

MYSQL Client là tên gọi chung của mọi phần mềm có thể thực hiện truy vấn MySQL
server và nhận kết quả trả về. Hay nói cách khác, MySQL Client là đoạn mã PHP
script trên một máy tính hay trên cùng server dùng để kết nối tới MySQL database\\

\textbf{MySQL hoạt động}\\

\begin{figure}[!h]
\centering
\includegraphics[height=140pt,width=240pt]{Images/1.png}
\caption{Cách MySQL vận hành.}
\label{mainbook1}
\end{figure}

Cách vận hành chính trong môi trường MySQL như sau:
\begin{itemize}
\item MySQL tạo ra bảng để lưu trữ dữ liệu, định nghĩa sự liên quan giữa các
bảng đó.
\item Client sẽ gửi yêu cầu SQL bằng một lệnh đặc biệt trên MySQL.
\item Ứng dụng trên server sẽ phản hồi thông tin và trả về kết quả trên máy
client.
\end{itemize}
\textbf{Ưu điểm}\\

\begin{itemize}
 \item Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và
hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất
mạnh
\item Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDL
trên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao.
\item Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một
hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp.
\item Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc
rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi.
\item Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và
hơn thế nữa nó có thể được mở rộng nếu cần thiết
\end{itemize}
\textbf{Nhược điểm}\\
\begin{itemize}
\item Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm
với các hạn chế về chức năng mà một vào ứng dụng có thể cần.
\item Độ tin cậy: Cách các chức năng cụ thể được xử lý với MySQL (ví dụ tài
liệu tham khảo, các giao dịch, kiểm toán,…) làm cho nó kém tin cậy hơn so với một
số hệ quản trị cơ sở dữ liệu quan hệ khác.
\item Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy
xuất dữ liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện
pháp để tăng tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều
server, hoặc tạo cache MySQL
\end{itemize}

\section{Giới thiệu mã nguồn được sử dụng }

\section{Mô tả thiết kế cơ sở dữ liệu}

To be continue....

\newpage
\section{Cách thức cài đặt ứng dụng, phiên bản PHP hỗ trợ}
To be continue....
\newpage
\section{Các tính năng trong hệ thống}

Hệ thống phân loại người dùng thành 3 nhóm với những quyền truy cập và giới hạn
khác nhau. Bao gồm:\\
- Người dùng nặc danh (guest)\\
- Người dùng đã đăng nhập\\
- Admin\\

\subsection{Người dùng nặc danh}

Người dùng nặc danh hay là khách hàng thông thường, có nhu cầu tìm kiếm các sản
phẩm liên quan đến mắt kính và các khuyến mãi nhưng họ chưa đăng ký tài khoản trên
hệ thống. Họ vẫn có thể sử dụng được các tính năng cơ bản của website như sau:\\
\begin{itemize}
\item Xem các thông tin về website, điều khoản, chính sách bảo mật.
\item Đăng ký tài khoản và đăng nhập.
\item Xem được các sản phẩm và các khuyến mãi.
\item Xem thông tin của sản phẩm.
\item Xem thông tin giỏ hàng.
\item Đặt hàng và thanh toán.
\item Gửi yêu cầu hỗ trợ.
\end{itemize}

\subsection{Người dùng đã đăng nhập}

Người dùng đã đăng nhập là nhóm người dùng thông thường, nhưng khác với người
dùng nặc danh, họ đã đăng ký tài khoản thành viên trên website. Bằng cách đăng ký
tài khoản thành viên trên hệ thống, nhóm người này có thể sử dụng toàn bộ các
chức năng của người dùng nặc danh v thêm một số tính năng khác của website như:\\
\begin{itemize}
\item Quản lý thông tin tài khoản và mật khẩu
\item Đánh giá và viết lời bình về sản phẩm (sau khi đã mua hàng)
\item Tự động điền thông tin khi thanh toán.
\item Quản lý danh sách các sản phẩm đã mua, các đơn hàng và tình trạng đơn
hàng.
\item Lưu lại thông tin giỏ hàng khi sử dụng hai máy khác nhau.
\end{itemize}

\subsection{Quản trị viên}

Quản trị viên hệ thống là nhóm người dùng có quyền cao nhất, truy xuất và chỉnh
sửa các thông tin trên website nhằm đảm bảo website hoạt động đúng mục đích ban
đầu, cung cấp thông tin chính xác cho người dùng cuối. Quản trị viên có quyền thực
hiện các thao tác trên ứng dụng web GlassesAdmin như sau: \\
\begin{itemize}
\item Đăng nhập tài khoản quản trị viên.
\item Cấp tài khoản cho quản trị viên khác.
\item Thêm, xóa, sửa thông tin sản phẩm, danh mục sản phẩm
\item Thêm, xóa, sửa thông tin khuyến mãi.
\item Xem danh sách đơn hàng, thông tin chi tiết của đơn hàng, xem thông tin
người đặt hàng và cập nhật trạng thái đơn hàng
\item Quản lý các tin nhắn liên hệ từ khách hàng, phản hồi khách hàng.
\item Thêm, xóa, sửa các nội dung trên website như trang giới thiệu, chính
sách, điều khoản
\item Xem các thống kê về tình trạng hoạt động của website.

\end{itemize}
\newpage
\section{Hướng dẫn sử dụng}
Có lẽ mọi người đã rất quen thuộc với một trang web bán hàng. Với website này
cũng vậy, website với giao diện dễ sử dụng giúp cho việc tiếp cận với website đễ
dàng và thuận tiện. Sau đây là một số hướng dẫn cụ thể khi sử dụng website.
\subsection{Người dùng nặc danh}
Người dùng nặc danh hay là khách hàng thông thường, có nhu cầu tìm kiếm các sản
phẩm liên quan đến mắt kính và các khuyến mãi nhưng họ chưa đăng ký tài khoản trên
hệ thống. Họ vẫn có thể sử dụng được các tính năng cơ bản của website như sau: \\

- Xem các thông tin về website, thông tin liên hệ. Khi vào trang chủ của trang
web, sau khi chọn mục LIÊN HỆ thì trang web sẻ mỡ ra các thông tin liên hệ bao gồm
địa chỉ trên bản đồ, số điện thoại, email. Đồng thời người dùng nặc danh có thể
gửi thông tin liên hệ của mình cho trang web.(như hình 2)\\
\includegraphics[height=200pt,width=400pt]{Images/2.png}
\begin{figure}[!h]
\centering
\caption{Thông tin liên hệ cửa hàng.}
\label{mainbook2}
\end{figure}

\\ - Đăng ký tài khoản và đăng nhập.

Bao gồm:
\begin{itemize}
\item Thông tin tài khoản: Tài khoản, email, mật khẩu.
\item Thông tin cá nhân: Họ tên, giới tính, số điện thoại liên hệ, địa chỉ
\end{itemize}\\
 \includegraphics[height=200pt,width=400pt]{Images/3.png}
\begin{figure}[!h]
\centering
\caption{Đăng ký thông tin tài khoản.}
\label{mainbook3}
\end{figure}

- Xem được các sản phẩm và các khuyến mãi(như hình dưới)\\
\includegraphics[height=200pt,width=500pt]{Images/4.png}
\begin{figure}[!h]
\centering
\caption{Xem các sản phẩm và các chương trình khuyến mãi.}
\label{mainbook4}
\end{figure}

\\- Xem thông tin của sản phẩm.Sau khi click vào 1 sản phẩm, bạn sẽ xem được
các thông tin của sản phẩm như thương hiệu, xuất xứ, chất liệu, giá thành, ..(như
hình dưới).\\
\includegraphics[height=200pt,width=500pt]{Images/5.png}
\begin{figure}[!h]
\centering
\caption{Xem thông tin sản phẩm.}
\label{mainbook5}
\end{figure}

\\ - Xem thông tin giỏ hàng. Các bạn sẽ được thấy sản phẩm bạn đã thêm vào giỏ
hàng, các trường của sản phẩm như tên sản phẩm, hình ảnh, giá bán, số lượng, tổng
thành tiền(như hình dưới)\\
\includegraphics[height=200pt,width=500pt]{Images/6.png}
\begin{figure}[!h]
\centering
\caption{Xem thông tin giỏ hàng.}
\label{mainbook6}
\end{figure}
\\- Đặt hàng và thanh toán. Bao gồm:
\begin{itemize}
\item Địa chỉ thanh toán và đặt hàng: Họ tên, SĐT, Email, Địa chỉ giao
hàng
\item Thanh toán và giao hàng: đơn vị vận chuyển và cách thức thanh toán
\item Thông tin đơn hàng: thành tiền, phí vận chuyển và tổng hóa đơn
\end{itemize}
\\
\includegraphics[height=200pt,width=500pt]{Images/7.png}
\begin{figure}[!h]
\centering
\caption{Đặt hàng và thanh toán.}
\label{mainbook7}
\end{figure}

\subsection{Người dùng sau khi đã đăng nhập}

Giao diện người dùng sau khi đăng nhập thành công:(như hình dưới)\\
\includegraphics[height=200pt,width=500pt]{Images/8.png}
\begin{figure}[!h]
\centering
\caption{Trang chủ người dùng}
\label{mainbook8}
 \end{figure}
\\Ngoài chức năng giống như người dùng nặc danh, người dùng sau khi đăng nhập còn
có thêm các chức năng khác như:
Quản lý thông tin tài khoản và mật khẩu
- Đánh giá và viết lời bình về sản phẩm (sau khi đã mua hàng)\\
- Tự động điền thông tin khi thanh toán.Người dùng không cần điền tên và địa
chỉ vì hệ thống sẽ tự động load từ cơ sở dữ liệu\\
\includegraphics[height=200pt,width=500pt]{Images/14.png}
\begin{figure}[!h]
\centering
\caption{Quản lý thông tin tài khoản và mật khẩu.}
\label{mainbook14}
\end{figure}
- Quản lý danh sách các sản phẩm đã mua, các đơn hàng và tình trạng đơn hàng.
- Lưu lại thông tin giỏ hàng khi sử dụng hai máy khác nhau

\subsection{Quản trị viên}

- Đăng nhập tài khoản quản trị viên.Đây là màn hình sau khi đăng nhập với
cai trò quản trị viên(như hình)\\
\includegraphics[height=200pt,width=500pt]{Images/9.png}
\begin{figure}[!h]
\centering
\caption{Đăng nhập hệ thống với vai trò quản trị viên}
\label{mainbook9}
\end{figure}

\\- Cấp tài khoản cho quản trị viên khác. Bạn có thể cấp tài khoản quản trị
viên bằng việc thay đổi \textbf{Quyền}. Hoặc có thể tạo mới một tài khoản với vai
trò là quản trị viên(như hình 10)\\
\includegraphics[height=200pt,width=500pt]{Images/10.png}
\begin{figure}[!h]
\centering
\caption{Cấp quyền tài khoản cho quản trị viên khác}
\label{mainbook10}
\end{figure}
\\Thêm, xóa, sửa thông tin sản phẩm, danh mục sản phẩm, thông tin khuyến
mãi(như hình 11)\\
\includegraphics[height=200pt,width=500pt]{Images/11.png}
\begin{figure}[!h]
\centering
\caption{Thêm sản phẩm vào danh mục}
\label{mainbook11}
\end{figure}

Chỉnh sửa thông tin sản phẩm. Khi sản phẩm có sự thay đổi, như giá bán hay
khuyến mãi, bạn có thể chỉnh sửa thông tin sản phẩm mà không cần xóa và tạo
mới(như hình 12)\\
\includegraphics[height=200pt,width=500pt]{Images/12.png}
\begin{figure}[!h]
\centering
\caption{Chỉnh sửa thông tin sản phẩm}
\label{mainbook12}
\end{figure}

Xem danh sách đơn hàng(như hình 13)\\

\includegraphics[height=200pt,width=500pt]{Images/13.png}
 \begin{figure}[!h]
\centering
\caption{Xem danh sách đơn hàng}
\label{mainbook13}
\end{figure}
\\- Quản lý các tin nhắn liên hệ từ khách hàng, phản hồi khách hàng.
- Thêm, xóa, sửa các nội dung trên website như trang giới thiệu, chính sách,
điều khoản
- Xem các thống kê về tình trạng hoạt động của website.

\newpage
\section{Nhiệm vụ, vai trò của từng thành viên trong nhóm}
\begin{center}
\begin{tabular}{| c | c | c |}
\hline
STT & Nhiệm vụ & Thành viên \\
\hline
cell4 & cell5 & cell6 \\
\hline
cell7 & cell8 & cell9 \\
\hline
\end{tabular}
\end{center}

\newpage

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\addcontentsline{toc}{section}{Tài liệu tham khảo}
\begin{thebibliography}{99999}
\bibitem[tvtt]{tvtt} {Web Diary : \url{https://wiki.matbao.net/kb/mysql-la-gi-
huong-dan-toan-tap-ve-mysql/}}. Truy cập nhật 7/12/2019.
\bibitem[tvtt]{tvtt} {Web Diary : \url{https://www.hostinger.vn/huong-dan/mysql-la-
gi/}}. Truy cập nhật 7/12/2019.
\end{thebibliography}
\end{document}