\chapter{การวิเคราะห์และออกแบบระบบ}
\indent
ในบทนี้จะกล่าวถึงการวิเคราะห์และออกแบบระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี ซึ่งการวิเคราะห์และออกแบบระบบที่ใชในการพัฒนาจะแบ่งออกเป็น 6 ขั้นตอนดังนี้ 

\begin{enumerate}[label=3.\arabic*]
	\item โครงสร้างภาพรวมของระบบ (System Architecture) เป็นการออกแบบภาพรวมและเทคโนโลยีของระบบ
	\item System Requirements คือ ความต้องการหรือสิ่งที่ระบบควรจะทำ หรือหน้าที่หลักของ
	ระบบที่จะต้องทำ
	\item User Interface Design เป็นการออกแบบส่วนต่อประสานกับผู้ใช้
	\item Use Case Diagram เป็นแผนภาพที่ใช้แสดงให้ทราบว่าระบบทำงานหรือมีหน้าที่ใดบ้าง
	\item Class Diagram เป็นแผนภาพที่ใช้แสดง Class และความสัมพันธ์ระหว่าง Class
	\item Sequence Diagram เป็นแผนภาพที่ใช้แสดงให้เห็นถึงการตอบโต้ข้อมูลระหว่างคลาส เรียงตามลำดับของเวลาที่เกิดเหตุการณ์จากน้อยไปมาก
\end{enumerate}	

\section{โครงสร้างภาพรวมของระบบ}
\indent
    ความหมายของ System Architecture \cite{SystemArchitecture} กรอบโครงสร้างของระบบ ITS ที่อธิบายความสัมพันธ์ขององค์ประกอบต่างๆถึงขั้นการเชื่อมต่อกันของระบบย่อยต่างๆ รวมไปถึงระบบ ITS ต่างๆโดยจัดกลุ่มองค์ประกอบไว้หลายๆลักษณะเพื่อให้ผู้เกี่ยวข้อง (Stakeholder) จากพื้นฐาน (สาขาอาชีพ) ต่างๆกันสามารถทำความเข้าใจได้ง่าย เช่น การจัดแบ่งองค์ประกอบตามลักษณะการทำงานของระบบ (functional components) หรือจัดแบ่งองค์ตามลักษณะการเป็นเจ้าของภาระกิจหรือตามลักษณะของที่จะเข้าร่วมในภารกิจนั้นๆ (marketing or institutional components)
    
   การออกแบบ System architecture แสดงภาพรวมและเทคโนโลยีของระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี ซึ่งมีรายละเอียดดังรูปที่ \ref{Fig:architecture}
   	\begin{figure}[H]
   		\centering
   		\includegraphics[width=0.8\textwidth]{Figures/3/architecture/3.1}
   		\caption{System architecture ระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี}
   		\label{Fig:architecture}
   	\end{figure}
   
   จากรูปที่ \ref{Fig:architecture} สามารถอธิบายโครงสร้างและเทคโนโลยีของระบบโดยแบ่งเป็น 3 ส่วนหลัก ดังนี้
   \begin{enumerate}[label=\arabic*.]
   	\item Database ระบบใช้ระบบจัดการฐานข้อมูล SQLite3 
	\item Server กระบวนการทำงานในส่วนของเซิฟเวอร์ (server) คือใช้ Django เป็น framework ที่ใช้ในการสร้าง web application
	\item Client เว็บแอปพลิเคชันแนะนำการแต่งกายสุภาพบุรษและสุภาพสตรี มีวัตถุประสงค์เพื่อรองรับการทำงานของผู้ใช้บนเว็บบราวเซอร์พัฒนาด้วย pythonanywhere
   \end{enumerate}

\section{System Requirements}
\subsection{Functional Requirements}
	ระบบของเว็บแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี แบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้
	\begin{enumerate}[label=3.2.1.\arabic*]
		\item ผู้ใช้งาน
		\begin{itemize}
			\item สามารถสมัครสมาชิกได้
			\item สามารถเข้าสู่เข้าสู่ระบบได้
			\item สามารถแก้ไขข้อมูลผู้ใช้งานได้
			\item สามารถดูรายการเสื้อผ้าจากร้านค้าได้
			\item สามารถดูรายการร้านค้าได้
			\item สามารถดูรายการแนะนำเสื้อผ้าได้
			\item สามารถบันทึกรายการเสื้อผ้าที่ถูกใจได้
			\item สามารถบันทึกรายการร้านค้าที่ถูกใจได้
			\item สามารถดูบันทึกรายการเสื้อผ้าที่ถูกใจได้
			\item สามารถดูบันทึกรายการร้านค้าที่ถูกใจได้
			\item สามารถดูค้นหาเสื้อผ้าได้
		\end{itemize}
		\item ร้านค้า
		\begin{itemize}
			\item สามารถสมัครสมาชิกได้
			\item สามารถเข้าสู่ระบบได้
			\item สามารถแก้ไขข้อมูลร้านค้าได้
			\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลเสื้อผ้าในร้านค้าได้
			\item สามารถดูรายการคนที่ถูกใจเสื้อผ้าได้
			\item สามารถดูรายการคนที่ถูกใจร้านค้าได้
		\end{itemize}
		\item ผู้ดูแลระบบ
		\begin{itemize}
			\item สามารถเข้าสู่ระบบได้
			\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลร้านค้าได้
			\item สามารถเพิ่ม ลบ แก้ไข ข้อมูลผู้ใช้งานได้
		\end{itemize}
	\end{enumerate}

\subsection{Non-functional Requirements} 
		\begin{itemize}[label={--}]
			\item ต้องเชื่อมต่ออินเตอร์เน็ตเพื่อใช้งานเว็บ
			\item สนับสนุนการแสดงผลในหน้าจอคอมพิวเตอร์เท่านั้น
		\end{itemize}

	
\section{User Interface Design}
ในการออกแบบแบ่งการออกเป็น 3 ส่วนคือ ส่วนของผู้ใช้งาน ส่วนของร้านค้า และส่วนของผู้ดูแลระบบ
\subsection{ส่วนของผู้ใช้งาน} 
โดยประกอบด้วยส่วนการออกแบบหน้าจอทำงาน ดังนี้
	\begin{enumerate}[label=\arabic*.]
		\item การออกแบบหน้าสมัครสมาชิก \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าสมัครสมาชิก}
				\caption{หน้าสมัครสมาชิก}
				\label{Fig:หน้าสมัครสมาชิก}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้าสมัครสมาชิก} การออกแบบหน้าสมัครสมาชิก หากผู้ใช้ยังไม่มีบัญชีในระบบผู้ใช้งานสามารถทำการสมัครสมาชิกเพื่อเข้าใช้งานในระบบได้จากหน้าสมัครสมาชิก โดยผู้ใช้จำเป็นต้องกรอกข้อมูลให้ครบก่อนกดปุ่มสมาชิก

			\newpage
			\item การออกแบบหน้าจอเข้าสู่ระบบ \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/เข้าสู่ระบบ}
				\caption{หน้าเข้าสู่ระบบ}
				\label{Fig:เข้าสู่ระบบ}
			\end{figure}
			จากภาพที่ \ref{Fig:เข้าสู่ระบบ} แสดงหน้าจอเข้าสู่ระบบเมื่อผู้ใช้ยังไม่ได้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกชื่อผู้ใช้และรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ
			
			\newpage
			\item การออกแบบหน้าจอเสื้อผ้าทั้งหมด \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าเสื้อผ้าทั้งหมด}
				\caption{หน้าจอเสื้อผ้าทั้งหมด }
				\label{Fig:หน้าเสื้อผ้าทั้งหมด}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้าเสื้อผ้าทั้งหมด} แสดงหน้าจอเสื้อผ้าทั้งหมด ซึ่งการออกแบบในหน้านี้จะแยกเป็นประเภทของเสื้อผ้ามีทั้งหมด 6 ประเภท ได้แก่ เสื้อ กางเกง กระโปรง เดรส สูท และอื่นๆ หากผู้ใช้ต้องการดูรายละเอียดของเสื้อผ้าก็สามารถคลิกดูที่ปุ่มดูรายละเอียดเสื้อผ้าได้ และจะมีในส่วนของการค้นหาเสื้อผ้าถ้าผู้ใช้ต้องการค้นหาเสื้อผ้าก็สามารถค้นหาได้
			
			\newpage
			\item การออกแบบหน้ารายละเอียดเสื้อผ้า \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้ารายละเอียดเสื้อผ้า}
				\caption{หน้าจอรายละเอียดเสื้อผ้า}
				\label{Fig:หน้ารายละเอียดเสื้อผ้า}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้ารายละเอียดเสื้อผ้า} แสดงหน้าจอรายละเอียดเสื้อผ้า โดยข้อมูลที่แสดงในหน้านี้ประกอบไปด้วย รูปสินค้า ชื่อสินค้า ชื่อร้านค้า ราคา ขนาดสินค้า สีสินค้า จำนวนสินค้า  และปุ่มเพิ่มเป็นสินค้าโปรด โดยในส่วนของปุ่มสินค้าโปรดจะแสดงก็ต่อเมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบเท่านั้น
			
			\newpage
			\item การออกแบบหน้าจอร้านค้าทั้งหมด \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าร้านค้าทั้งหมด}
				\caption{หน้าจอร้านค้าทั้งหมด}
				\label{Fig:หน้าร้านค้าทั้งหมด}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้าร้านค้าทั้งหมด} โดยจะแสดงรายการร้านค้าทั้งหมดที่มีในระบบ จะแสดงรูปภาพร้านค้า ชื่อร้านค้า และหากผู้ใช้ต้องการดูรายละเอียดของร้านค้าก็สามารถคลิกดูที่ปุ่มดูรายละเอียดร้านค้าได้
			
			\newpage
			\item การออกแบบหน้าจอรายละเอียดร้านค้า \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้ารายละเอียดร้านค้า}
				\caption{หน้าจอรายละเอียดร้านค้า}
				\label{Fig:หน้ารายละเอียดร้านค้า}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้ารายละเอียดร้านค้า} แสดงหน้าจอรายละเอียดร้านค้า โดยข้อมูลที่แสดงในหน้านี้ประกอบไปด้วย รูปร้านค้า ชื่อร้าค้า ที่อยู่ร้าน เบอร์โทรติดต่อ อีเมล์ (E-mail), Facebook สินค้าในร้าน และปุ่มเพิ่มเป็นร้านโปรดโดย ในส่วนของปุ่มร้านโปรดจะแสดงก็ต่อเมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบเท่านั้น

			\newpage
			\item การออกแบบหน้าจอข้อมูลผู้ใช้งาน \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าข้อมูลผู้ใช้งาน}
				\caption{หน้าจอข้อมูลผู้ใช้งาน}
				\label{Fig:หน้าข้อมูลผู้ใช้งาน}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้าข้อมูลผู้ใช้งาน} แสดงหน้าจอข้อมูลผู้ใช้งานโดยหน้านี้จะแสดงข้อมูลของผู้ใช้งาน ได้แก่ ชื่อผู้ใช้ วัน เดือน ปีเกิด เพศ รูปร่าง สีผิว และรูปโปร์ไฟล์ นอกจากนี้หากผู้ใช้งานต้องการแก้ไขข้อมูลก็สามารถกดที่ปุ่มแก้ไขข้อมูลได้ และสามาถดูรายการเสื้อผ้าและร้านค้าโปรดได้
			
			\newpage
			\item การออกแบบหน้าแสดงรายการสินค้าโปรด \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้ารายการสินค้าโปรด}
				\caption{หน้าจอรายการสินค้าโปรด}
				\label{Fig:หน้ารายการสินค้าโปรด}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้ารายการสินค้าโปรด} แสดงหน้าจอรายละเอียดสินค้าโปรด โดยจะแสดงรายการเสื้อผ้าที่ผู้ใช้งานได้ทำการเพิ่มเป็นสินค้าโปรดแล้ว นอกจากนี้สามาถดูรายละเอียดเสื้อผ้าและสามารถลบรายการเสื้อผ้าออกจากรายการโปรดได้
			
			\newpage
			\item การออกแบบหน้ารายการร้านโปรด \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้ารายการร้านโปรด}
				\caption{หน้าจอรายการร้านโปรด}
				\label{Fig:หน้ารายการร้านโปรด}
			\end{figure}
			จากภาพที่ \ref{Fig:หน้ารายการร้านโปรด} แสดงหน้าจอข้อมูลผู้ใช้งานโดยหน้านี้จะแสดงข้อมูลของผู้ใช้งาน ได้แก่ ชื่อผู้ใช้ วัน เดือน ปีเกิด เพศ รูปร่าง สีผิว และรูปโปร์ไฟล์ นอกจากนี้หากผู้ใช้งานต้องการแก้ไขข้อมูลก็สามารถกดที่ปุ่มแก้ไขข้อมูลได้ และสามาถดูรายการเสื้อผ้าและร้านค้าโปรดได้
			
			\newpage
			\item การออกแบบหน้ารายการแนะนำเสื้อผ้า \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/แนะนำเสื้อผ้า}
				\caption{หน้าจอรายการแนะนำเสื้อผ้า}
				\label{Fig:แนะนำเสื้อผ้า}
			\end{figure}
			จากภาพที่ \ref{Fig:แนะนำเสื้อผ้า} แสดงหน้าจอรายการแนะนำเสื้อผ้า โดยจะแสดงรายการเสื้อผ้าที่มีคนชื่นชอบมากที่สุดมา 9 ชิ้น ในกรณีที่ยังไม่มีการเพิ่มรายการเสื้อผ้าที่ชอบ และในกรณีที่มีรายการเสื้อผ้าที่ถูกใจแล้ว ระบบจะแนะนำรายการเสื้อผ้า 9 ชิ้น ตามรายการเสื้อผ้าที่ผู้ใช้ชื่นชอบ 
		\end{enumerate}
	
\newpage
\subsection{ส่วนของร้านค้า} 
โดยประกอบด้วยส่วนการออกแบบหน้าจอทำงาน ดังนี้
\begin{enumerate}[label=\arabic*.]
	\item การออกแบบหน้าจอเพิ่มร้านค้า \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าเพิ่มร้านค้า}
		\caption{หน้าจอเพิ่มร้านค้า}
		\label{Fig:หน้าเพิ่มร้านค้า}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าเพิ่มร้านค้า} แสดงหน้าจอเพิ่มร้านค้า ในการเพิ่มร้านค้าผู้ใช้งานจะสามารถเพิ่มร้านได้แค่ 1 ร้าน โดยผู้ใช้จำเป็นต้องกรอกข้อมูลให้ครบก่อนกดปุ่มสมาชิก
	
	\newpage
	\item การออกแบบหน้าจอข้อมูลร้านค้า \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าข้อมูลร้านค้า}
		\caption{หน้าจอข้อมูลร้านค้า}
		\label{Fig:หน้าข้อมูลร้านค้า}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าข้อมูลร้านค้า} แสดงหน้าจอข้อมูลร้านค้าโดยหน้านี้จะแสดงข้อมูลร้านค้าได้แก่  รูปร้านค้า ชื่อร้าค้า ที่อยู่ร้าน เบอร์โทรติดต่อ อีเมล์ (E-mail)  Facebook และรูปโปร์ไฟล์ร้านค้า นอกจากนี้ร้านค้าต้องการแก้ไขข้อมูลร้านก็สามารถกดที่ปุ่มแก้ไขข้อมูลร้านค้าได้ หากร้านค้าต้องการดูรายการสินค้าในร้าค้าสามาถคลิกดูได้ที่จัดการสินค้าเพื่อทำการเพิ่มสินค้า แก้ไข และลบได้ และร้านค้ายังสามาถดูรายการคนที่ถูกใจเสื้อผ้าและร้านค้าได้
	
	\newpage
	\item การออกแบบหน้าจอจัดการข้อมูลสินค้า \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าจัดการข้อมูลสินค้า}
		\caption{หน้าจอจัดการข้อมูลสินค้า }
		\label{Fig:หน้าจัดการข้อมูลสินค้า}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าจัดการข้อมูลสินค้า} แสดงหน้าจอจัดการข้อมูลสินค้าในส่วนของร้านค้า โดยหน้านี้จะแสดงข้อมูลรายการเสื้อผ้าทั้งหมดที่มีในร้าน ซึ่งร้านค้าสามาถทำการเพิ่มสินค้าได้ สามารถแก้ไขข้อมูลเสื้อผ้า และสามารถลบรายการเสื้อผ้าได้
	
	\newpage
	\item การออกแบบหน้าจอเพิ่มสินค้า \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าเพิ่มสินค้า}
		\caption{หน้าจอเพิ่มสินค้า}
		\label{Fig:หน้าเพิ่มสินค้า}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าเพิ่มสินค้า} แสดงหน้าจอเพิ่มสินค้า โดยมีช่องให้กรอกชื่สินค้า ประเภทสินค้า จำนวนสินค้า ขนาดสินค้า สีสินค้า ราคาสินค้า และรูปสินค้า
\end{enumerate}

\newpage
\subsection{ส่วนของผู้ดูแลระบบ} 
โดยประกอบด้วยส่วนการออกแบบหน้าจอทำงาน ดังนี้
\begin{enumerate}[label=\arabic*.]
	\item การออกแบบหน้าจอเข้าสู่ระบบ \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าเข้าสู่ระบบผู้ดูแลระบบ}
		\caption{หน้าจอเข้าสู่ระบบผู้ดูแลระบบ}
		\label{Fig:หน้าเข้าสู่ระบบผู้ดูแลระบบ}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าเข้าสู่ระบบผู้ดูแลระบบ} แสดงหน้าจอเข้าสู่ระบบ โดยต้องกรอกชื่อผู้ใช้และรหัสผ่านก่อนกดปุ่ม Login
	
	\newpage
	\item การออกแบบหน้าจอฐานข้อมูลทั้งหมดในระบบ \\ 
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\textwidth]{Figures/3/Wireframe/หน้าฐานข้อมูลทั้งหมดในระบบ}
		\caption{หน้าจอฐานข้อมูลทั้งหมดในระบบ}
		\label{Fig:หน้าฐานข้อมูลทั้งหมดในระบบ}
	\end{figure}
	จากภาพที่ \ref{Fig:หน้าฐานข้อมูลทั้งหมดในระบบ} แสดงหน้าจอฐานข้อมูลทั้งหมดในระบบ ยกตัวอย่างเช่น ข้อมูลผู้ใช้งาน ข้อมูลร้านค้า ข้อมูลเสื้อผ้า  เป็นต้น
\end{enumerate}


\newpage

\section{Use Case Diagram}
	Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
	\begin{table}[H]
		\caption{สัญลักษณ์ของ Use case Diagram}
		\label{tab:use-case2}
		\begin{tabular}{|c|p{10cm}|}
		\hline
		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
		\raisebox{-\totalheight}{Use case}
		& \setstretch{1.5} {Use case คือส่วนย่อยของระบบงาน แทนด้วยวงรีและชื่อของ Use case ภายในวงรี} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=1.5cm]{Figures/table/use-case/2}}
		& \setstretch{1.5} {Actor คือบุคคลหรือระบบงานอื่นที่ใช้งานระบบหรือได้รับประโยชน์จากระบบซึ่งอยู่ภายนอกระบบ แทนด้วยรูปคนและมีชื่อบทบาทการใช้งานระบบ} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=3cm]{Figures/table/use-case/3}}
		& \setstretch{1.5} {เส้นตรงที่แสดงถึงการใช้งาน Use case ของผู้กระทำ} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/4}}
		& \setstretch{1.5} {กรอบสี่เหลี่ยมแสดงถึงขอบเขตของระบบโดยแสดงชื่อระบบภายในหรือด้านบนกรอกสี่เหลี่ยม Use case อยู่ภายในกรอบสี่เหลี่ยม และ actor อยู่ภายนอกกรอบสี่เหลี่ยม} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/5}}
		& \setstretch{1.5} {ความสัมพันธ์แบบ <<includes>> แสดงว่า Use case หนึ่งดำเนินการตามขั้นตอนของ Use case อื่น โดยแทนด้วยสัณลักษณ์ลูกศรเส้นประ ซึ่ง Use case ที่หางลูกศรเรียกใช้งาน Use case ที่หัวลูกศรทุกครั้งที่มีการทำงาน} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/6}}
		& \setstretch{1.5} {ความสัมพันธ์แบบ <<extend>> แสดงว่า Use case หนึ่งดำเนินการตามขั้นตอนของ Use case อื่น โดยแทนด้วยสัญลักษณ์ลูกศรเส้นประ ซึ่ง Use case ที่หัวลูกศรเรียกใช้งาน Use case ที่หางลูกศร แต่การใช้งานไม่จำเป็นต้องเกิดขึ้นทุกครั้งขึ้นอยู่กับเงื่อนไขระหว่างการทำงาน} \\ \hline
		\end{tabular}
	\end{table}

	\begin{figure}[H]
		\includegraphics[width=0.8\textwidth]{Figures/3/use case diagram}
		\caption{Use Case Diagram ระบบแนะนำการแต่งการสุภาพบุรุษและสุภาพสตรี}
		\label{Fig:use case diagram}
	\end{figure}
	
	\begin{table}[H]
		\centering
		\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:use case diagram}}
		\label{tab:usecase}
		\resizebox{\totalheight}{!}{\textwidth}{%
			\begin{tabular}{|p{5cm}|p{10cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
				สมัครสมาชิก & ผู้ใช้งานและร้านค้าสามารถสมัครสมาชิกเพื่อเข้าใช้งานในระบบได้ \\ \hline
				เข้าสู่ระบบ & ผู้ใช้งานที่เป็นสมาชิกสามารถใช้ username และ password ของตัวเอง เพื่อเข้าสู่ระบบได้ \\ \hline
				แก้ไขข้อมูลผู้ใช้งาน & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อย จะสามารถแก้ไขข้อมูลผู้ใช้งานได้ \\ \hline
				ดูรายการเสื้อผ้าจากร้านค้า & ผู้ใช้งานสามารถเลือกดูรายการเสื้อผ้าจากร้านค้าได้ โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
				ดูรายการร้านค้า & ผู้ใช้งานสามารถเลือกดูรายการร้านค้าได้ โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
				ดูรายการแนะนำเสื้อผ้า & ผู้ใช้งานสามารถเลือกดูเสื้อผ้าที่แนะนำจากร้านค้าได้ โดยจำเป็นต้องเข้าสู่ระบบก่อน โดยรายการเสื้อผ้าที่แนะนำจะดึงข้อมูลมาจากการรายการสินค้าโปรดของผู้ใช้งาน โดยจะแบ่งออกเป็น 2 กรณี คือ กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ และกรณีที่มีรายการเสื้อผ้าที่ถูกใจ \\ \hline
				ดูรายการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ & การแนะนำเสื้อผ้าในกรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ จะแนะนำสินค้าตามรายการสินค้าที่มีคนถูกใจมากที่สุดหรือให้คะแนนสินค้ามากที่สุด โดยจะแนะนำมาทั้งหมด 9 รายการ \\ \hline
				ดูรายการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ & การแนะนำเสื้อผ้าในกรณีที่มีรายการเสื้อผ้าที่ถูกใจ จะแนะนำสินค้าตามรายการที่ผู้ใช้งานถูกใจเสื้อผ้าหรือสินค้านั้น โดยจะแนะนำมาทั้งหมด 9 รายการ \\ \hline
				บันทึกรายการเสื้อผ้าที่ถูกใจ & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถบันทึกรายการเสื้อผ้าที่ถูกใจได้ \\ \hline
				บันทึกรายการร้านค้าที่ถูกใจ & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถบันทึกรายการร้านค้าที่ถูกใจได้ \\ \hline
			\end{tabular}%
		}
	\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบาย Use Case หน้าที่ของระบบ (ต่อ) ในภาพที่ \ref{Fig:use case diagram}}
	\label{tab:usecase}
	\resizebox{\totalheight}{!}{\textwidth}{%
		\begin{tabular}{|p{5cm}|p{10cm}|}
			\hline
			\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			ดูบันทึกรายการเสื้อผ้าที่ถูกใจ & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถดูบันทึกรายการเสื้อผ้าที่ถูกใจได้ \\ \hline
			ดูบันทึกรายการร้านค้าที่ถูกใจ & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถดูบันทึกรายการร้านค้าที่ถูกใจได้ \\ \hline
			ค้นหาเสื้อผ้า & ผู้ใช้งานสามารถค้นหารายชื่อเสื้อผ้าที่ต้อการได้ โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
			เพิ่มร้านค้า & เมื่อผู้ใช้ทำการสมัครสมาชิกและเข้าสู่ระบบแล้ว สามารถทำการเพิ่มร้านค้าได้ \\ \hline
			แก้ไขข้อมูลร้านค้า & เมื่อร้านค้าเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถแก้ข้อมูลร้านค้าได้ \\ \hline
			เพิ่ม ลบ แก้ไขข้อมูลเสื้อผ้าในร้านค้า & เมื่อร้านค้าเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถเพิ่มเสื้อผ้า ลบ และแก้ไขข้อมูลเสื้อมูลเสื้อผ้าในร้านค้าได้ \\ \hline
			ดูรายการคนที่ถูกใจเสื้อผ้า & เมื่อร้านค้าเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถดูรายการคนที่ถูกใจเสื้อผ้าได้ \\ \hline
			ดูรายการคนที่ถูกใจร้านค้า & เมื่อร้านค้าเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถดูรายการคนที่ถูกใจร้านค้าได้ \\ \hline
			เพิ่ม ลบ แก้ไขข้อมูลร้านค้า & เมื่อผู้ดูแลระบบเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถเพิ่ม ลบ แก้ไขข้อมูลร้านค้าได้ \\ \hline
			เพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งาน & เมื่อผู้ดูแลระบบเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถเพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งานได้ \\ \hline
		\end{tabular}%
	}
\end{table}

		
	% Please add the following required packages to your document preamble:
	% \usepackage{graphicx}
	\begin{table}[H]
		\centering
		\caption{Use Case สมัครสมาชิก}
		\label{tab:usecase}
		\resizebox{\totalheight}{!}{\textwidth}{%
			\begin{tabular}{|p{10cm}|p{10cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case Title : สมัครสมาชิก}} & \multicolumn{1}{c|}{\textbf{Use case Id : 1 }} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Primary Actor : ผู้ใช้งาน และร้านค้า} \\ \hline
			    \multicolumn{2}{|p{\linewidth}|}{Stakeholder Actor : -} \\ \hline
			    \multicolumn{2}{|p{\linewidth}|}{Main Flow : ผู้ใช้งานและร้านค้าสามารถสมัครสมาชิกเพื่อเข้าใช้งานระบบได้ จะต้องกรอกข้อมูลให้ครบถ้วนทุกช่อง} \\ \hline
			    \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตจะไม่สามารถสมัครสมาชิกได้} \\ \hline
			    \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้กรอกข้อมูลไม่ครบทุกช่องตามที่กำหนดจะไม่สามารถกดสมัครสมาชิกได้} \\ \hline
			    \multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 3 : หากผู้ใช้กรอกชื่อเป็นภาษาไทยระบบจะไม่สามารถทำการสมัครสมาชิกได้ และชื่อผู้ใช้ที่กรอกเข้ามาจะต้องไม่ซ้ำในระบบถึงจะสามารถสมัครสมาชิกได้} \\ \hline
			\end{tabular}%
		}
	\end{table}
	\begin{table}[H]
		\centering
		\caption{Use Case เข้าสู่ระบบ}
		\label{tab:usecase}
		\resizebox{\totalheight}{!}{\columnwidth}{%
			\begin{tabular}{|p{7cm}|p{7cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case Title : เข้าสู่ระบบ}} & \textbf{Use case Id : 2 } \\ \hline
				\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน ร้านค้า และผู้ดูแลระบบ} \\ \hline
				\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนนี้ผู้ใช้งานเเละผู้ดูแลระบบ สามารถใช้ username เเละ password ที่มีเพื่อลงชื่อเข้าใช้งานระบบได้} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตจะไม่สามารถสมัครสมาชิกได้} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้กรอก username และ password ไม่ถูกต้องจะไม่สามารถเข้าสู่ระบบได้} \\ \hline
			\end{tabular}%
		}
	\end{table}

	\begin{table}[H]
		\centering
		\caption{Use Case แก้ไขข้อมูลใช้งาน}
		\label{tab:usecase}
		\resizebox{\totalheight}{!}{\textwidth}{%
			\begin{tabular}{|p{7cm}|p{7cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case Title : แก้ไขข้อมูลใช้งาน}} & \textbf{Use case Id : 3 } \\ \hline
				\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
				\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนของการแก้ไขข้อมูลผู้ใช้งาน เมื่อเข้าสู่ระบบเรียบร้อยแล้วจะสามารถทำการแก้ไขข้อมูลผู้ใช้งานได้ โดยสามารถแก้ไขข้อมูลได้ทั้งหมด} \\ \hline
				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถบันทึกข้อมูลผู้ใช้งาน} \\ \hline
			\end{tabular}%
		}
		\end{table}
		
		\begin{table}[H]
			\centering
			\caption{Use Case ดูรายการเสื้อผ้าจากร้านค้า}
			\label{tab:usecase}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|p{10cm}|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการเสื้อผ้าจากร้านค้า}} & \multicolumn{1}{c|}{\textbf{Use case Id : 4 }} \\ \hline
					\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
					\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนของดูเสื้อผ้าจากร้านค้านี้ผู้ใช้งานสามารถกดดูรายการเสื้อผ้าในระบบได้ทั้งหมด โดยไม่จำเป็นต้องเข้าสู่ระบบ หรือเมื่อเข้าสู่ระบบแล้วก็สามารถดูเสื้อผ้าจากร้านค้าได้เช่นกัน } \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตจะไม่สามารถดูรายการเสื้อผ้าจากร้านค้าได้} \\ \hline
				\end{tabular}%
			}
		\end{table}
		
		\begin{table}[H]
			\centering
			\caption{Use Case ดูรายการร้านค้า}
			\label{tab:usecase}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|c|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการร้านค้า}} & \multicolumn{1}{c|}{\textbf{Use case Id : 5 }} \\ \hline
					\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
					\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Main Flow :ในส่วนของดูร้านค้านี้ผู้ใช้งานสามารถกดดูรายการร้านค้าในระบบได้ทั้งหมด โดยไม่จำเป็นต้องเข้าสู่ระบบ  หรือเมื่อเข้าสู่ระบบแล้วก็สามารถดูร้านค้าได้เช่นกัน } \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตจะไม่สามารถดูรายการร้านค้าได้} \\ \hline
				\end{tabular}%
			}
		\end{table}
	
		\begin{table}[H]
			\centering
			\caption{Use Case ดูรายการแนะนำเสื้อผ้า}
			\label{tab:usecase}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|c|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการแนะนำเสื้อผ้า}} & \multicolumn{1}{c|}{\textbf{Use case Id : 6 }} \\ \hline
					\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
					\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบเรียบร้อย จะสามารถดูรายการแนะนำเสื้อผ้าได้ ผู้ใช้งานสามารถเลือกดูเสื้อผ้าที่แนะนำจากร้านค้าได้ โดยจำเป็นต้องเข้าสู่ระบบก่อน โดยรายการเสื้อผ้าที่แนะนำจะดึงข้อมูลมาจากการรายการสินค้าโปรดของผู้ใช้งาน โดยจะแบ่งออกเป็น 2 กรณี คือ กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ และกรณีที่มีรายการเสื้อผ้าที่ถูกใจ } \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูรายการแนะนำเสื้อผ้าได้} \\ \hline
				\end{tabular}%
			}
		\end{table}	
		
		\begin{table}[H]
			\centering
			\caption{Use Case ดูรายการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ}
			\label{tab:usecase}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|c|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 7 }} \\ \hline
					\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
					\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบเรียบร้อย จะสามารถดูรายการแนะนำเสื้อผ้าได้ ซึ่งข้อมูลส่วนนี้จะมาจากรายการสินค้าโปรด การแนะนำเสื้อผ้าในกรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ จะแนะนำสินค้าตามรายการสินค้าที่มีคนถูกใจมากที่สุดหรือให้คะแนนสินค้ามากที่สุด โดยจะแนะนำมาทั้งหมด 9 รายการ} \\ \hline
					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูรายการแนะนำเสื้อผ้าได้} \\ \hline
				\end{tabular}%
			}
		\end{table}	
	
		  \begin{table}[H]
		  	\centering
		  	\caption{Use Case ดูรายการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ}
		  	\label{tab:usecase}
		  	\resizebox{\totalheight}{!}{\textwidth}{%
		  		\begin{tabular}{|c|p{10cm}|}
		  			\hline
		  			\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 8 }} \\ \hline
		  			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
		  			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		  			\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบเรียบร้อย จะสามารถดูรายการแนะนำเสื้อผ้าได้ ซึ่งข้อมูลส่วนนี้จะมาจากรายการสินค้าโปรด การแนะนำเสื้อผ้าในกรณีที่มีรายการเสื้อผ้าที่ถูกใจ จะแนะนำสินค้าตามรายการที่ผู้ใช้งานถูกใจเสื้อผ้าหรือสินค้านั้น โดยจะแนะนำมาทั้งหมด 9 รายการ} \\ \hline
		  			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูรายการแนะนำเสื้อผ้าได้} \\ \hline
		  		\end{tabular}%
		  	}
		  \end{table}\\
	  	
		  \begin{table}[H]
			    	\centering
			    	\caption{Use Case บันทึกรายการเสื้อผ้าที่ถูกใจ}
			    	\label{tab:usecase}
			    	\resizebox{\totalheight}{!}{\textwidth}{%
			    		\begin{tabular}{|c|p{10cm}|}
			    			\hline
			    			\multicolumn{1}{|c|}{\textbf{Use Case Title : บันทึกรายการเสื้อผ้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 9 }} \\ \hline
			    			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
			    			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
			    			\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถบันทึกรายการเสื้อผ้าที่ถูกใจได้ โดยกดปุ่มเพิ่มเป็นสินค้าโปรด ระบบก็จะทำการบันทึกข้อมูลรายการเสื้อผ้าแนั้น โดยในส่วนของการเพิ่มเสื้อผ้าเป็นสินค้าโปรดนั้นจะมีระดับให้สามารถเลือกได้ด้วยว่าชอบสินค้าในระดับใดใน 1-5} \\ \hline
			    			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถบันทึกรายการเสื้อผ้าได้} \\ \hline
			    		\end{tabular}%
			    	}
		  \end{table}	
	  
		    \begin{table}[H]
		    	\centering
		    	\caption{Use Case บันทึกรายการร้านค้าที่ถูกใจ}
		    	\label{tab:usecase}
		    	\resizebox{\totalheight}{!}{\textwidth}{%
		    		\begin{tabular}{|c|p{10cm}|}
		    			\hline
		    			\multicolumn{1}{|c|}{\textbf{Use Case Title : บันทึกรายการร้านค้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 10 }} \\ \hline
		    			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
		    			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		    			\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถบันทึกรายการร้านค้าที่ถูกใจได้ โดยกดปุ่มเพิ่มเป็นร้านค้าโปรด ระบบก็จะทำการบันทึกข้อมูลรายการร้านค้านั้น} \\ \hline
		    			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถบันทึกรายการร้านค้าที่ถูกใจได้} \\ \hline
		    		\end{tabular}%
		    	}
		    \end{table}	
	    
		   \begin{table}[H]
		   	\centering
		   	\caption{Use Case ดูบันทึกรายการเสื้อผ้าที่ถูกใจ}
		   	\label{tab:usecase}
		   	\resizebox{\totalheight}{!}{\textwidth}{%
		   		\begin{tabular}{|c|p{10cm}|}
		   			\hline
		   			\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูบันทึกรายการเสื้อผ้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 11 }} \\ \hline
		   			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
		   			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		   			\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถดูบันทึกรายการเสื้อผ้าที่ถูกใจได้ โดยจะแสดงรายการเสื้อผ้าตามที่ผู้ใช้งานได้ทำการเพิ่ม และสามารถลบรายการสื้อผ้าที่ถูกใจได้เช่นกัน} \\ \hline
		   			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูบันทึกรายการเสื้อผ้าได้} \\ \hline
		   		\end{tabular}%
		   	}
		   \end{table}
	   	
			  \begin{table}[H]
			  	\centering
			  	\caption{Use Case ดูบันทึกรายการร้านค้าที่ถูกใจ}
			  	\label{tab:usecase}
			  	\resizebox{\totalheight}{!}{\textwidth}{%
			  		\begin{tabular}{|c|p{10cm}|}
			  			\hline
			  			\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูบันทึกรายการร้านค้าที่ถูกใจ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 12 }} \\ \hline
			  			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
			  			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
			  			\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ใช้งานสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถดูบันทึกรายการร้านค้าที่ถูกใจได้ โดยจะแสดงรายการร้านค้าตามที่ผู้ใช้งานได้ทำการเพิ่ม และสามารถลบรายการร้านค้าที่ถูกใจได้เช่นกัน} \\ \hline
			  			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูบันทึกรายการร้านค้าที่ถูกใจได้} \\ \hline
			  		\end{tabular}%
			  	}
			  \end{table}
		  
	  \begin{table}[H]
	  \centering
	  \caption{Use Case ค้นหาเสื้อผ้า}
	  \label{tab:usecase}
	  \resizebox{\totalheight}{!}{\columnwidth}{%
	  	\begin{tabular}{|p{7cm}|p{7cm}|}
	  		\hline
	  		\multicolumn{1}{|c|}{\textbf{Use Case Title : ค้นหาเสื้อผ้า}} & \textbf{Use case Id : 13 } \\ \hline
	  		\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
	  		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
	  		\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนของค้นหาเสื้อผ้านี้ผู้ใช้งานสามารถค้นหาเสื้อผ้าหรือสินค้าที่ต้องการได้ โดยไม่จำเป็นต้องเข้าสู่ระบบ โดยระบบจะค้นหาเสื้อผ้าหรือสินค้าตามชื่อของสินค้าเท่านั้น} \\ \hline
	  		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้ไม่เชื่อมต่ออินเทอร์เน็ตจะไม่สามารถค้นหาสินค้าได้} \\ \hline
	  		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้กรอกข้อมูลที่ต้องการค้นหาเป็นสีเสื้อ หรือราคา เป็นต้น ระบบจะไม่สามารถทำการค้นหาได้} \\ \hline
	  	\end{tabular}%
	  }
  \end{table}

\begin{table}[H]
\centering
\caption{Use Case เพิ่มร้านค้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่มร้านค้า}} & \textbf{Use case Id : 14 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ร้านค้า} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนของการเพิ่มร้านค้า เมื่อผู้ใช้ทำการเข้าสู่ระบบเรียบร้อยแล้ว สามารถทำการเพิ่มร้านค้าได้ โดยการเพิ่มร้านค้านี้จะประกอบไปด้วยข้อมูลร้านค้าทั้งหมดและรายการเสื้อผ้าหรือสินค้าในร้านค้า} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากร้านค้าไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถบันทึกข้อมูลร้านค้าได้} \\ \hline
	\end{tabular}%
}
\end{table}

\begin{table}[H]
\centering
\caption{Use Case แก้ไขข้อมูลร้านค้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : แก้ไขข้อมูลร้านค้า}} & \textbf{Use case Id : 15 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ร้านค้า} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow : ในส่วนของการแก้ไขข้อมูลร้านค้า เมื่อร้านค้าทำการเข้าสู่ระบบเรียบร้อยแล้ว จะสามารถแก้ไขข้อมูลได้ โดยสามารถแก้ไขข้อมูลได้ทั้งหมด} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากร้านค้าไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถแก้ไขข้อมูลร้านค้าได้} \\ \hline
	\end{tabular}%
}
\end{table}


\begin{table}[H]
\centering
\caption{Use Case เพิ่ม ลบ แก้ไขข้อมูลเสื้อผ้าในร้านค้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่ม ลบ แก้ไขข้อมูลเสื้อผ้าในร้านค้า}} & \textbf{Use case Id : 16 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ร้านค้า} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow :  เมื่อร้านค้าเข้าสู่ระบบเรียบร้อยร้อย จะสามารถเพิ่มรายการเสื้อผ้า ลบ และแก้ไขข้อมูลเสื้อมูลเสื้อผ้าในร้านค้าได้} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากร้านค้าไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถเพิ่มรายการเสื้อผ้า ลบ และแก้ไขข้อมูลเสื้อมูลเสื้อผ้าในร้านค้าได้} \\ \hline
	\end{tabular}%
}
\end{table}


\begin{table}[H]
\centering
\caption{Use Case ดูรายการการคนที่ถูกใจเสื้อผ้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการการคนที่ถูกใจเสื้อผ้า}} & \textbf{Use case Id : 17 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ร้านค้า} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อร้านค้าสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถดูรายการการคนที่ถูกใจเสื้อผ้าได้} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากร้านค้าไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูรายการการคนที่ถูกใจเสื้อผ้าได้} \\ \hline
	\end{tabular}%
}
\end{table}


\begin{table}[H]
\centering
\caption{Use Case ดูรายการการคนที่ถูกใจร้านค้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูรายการการคนที่ถูกใจร้านค้า}} & \textbf{Use case Id : 18 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ร้านค้า} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow :  เมื่อร้านค้าสมัครสมาชิกและเข้าสู่ระบบแล้ว จะสามารถดูรายการการคนที่ถูกใจร้านค้าได้} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากร้านค้าไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถดูรายการการคนที่ถูกใจร้านค้าได้} \\ \hline
	\end{tabular}%
}
\end{table}


\begin{table}[H]
\centering
\caption{Use Case เพิ่ม ลบ แก้ไขข้อมูลร้านค้า}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่ม ลบ แก้ไขข้อมูลร้านค้า}} & \textbf{Use case Id : 19 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ผู้ดูแลระบบ} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ดูแลเข้าสู่ระบบแล้ว จะสามารถ เพิ่ม ลบ แก้ไขข้อมูลร้านค้าได้} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ดูแลระบบไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถเพิ่ม ลบ แก้ไขข้อมูลร้านค้าได้} \\ \hline
	\end{tabular}%
}
\end{table}

\begin{table}[H]
\centering
\caption{Use Case เพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งาน}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\columnwidth}{%
	\begin{tabular}{|p{7cm}|p{7cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งาน}} & \textbf{Use case Id : 20 } \\ \hline
		\multicolumn{2}{|l|}{Primary Actor : ผู้ดูแลระบบ} \\ \hline
		\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Main Flow : เมื่อผู้ดูแลเข้าสู่ระบบแล้ว จะสามารถ เพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งานได้} \\ \hline
		\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ดูแลระบบไม่เชื่อมต่ออินเทอร์เน็ตและยังไม่ได้เข้าสู่ระบบจะไม่สามารถเพิ่ม ลบ แก้ไขข้อมูลผู้ใช้งานได้} \\ \hline
	\end{tabular}%
}
\end{table}

	
\newpage

\section{Class Diagram}
	Class Diagram คือแผนภาพที่ใช้แสดงคลาสและความสัมพันธ์ในแบบต่างๆ ระหว่างคลาส สัญลักษณ์ที่ใช้ในการเขียน Class Diagram แสดงในตารางที่ \ref{tab:class2} 
	\begin{center}
	\begin{table}[H]
		\centering
		\caption{สัญลักษณ์ของ Class Diagram}
		\label{tab:class2}
		\begin{tabular}{|c|p{10cm}|}
			\hline
			\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/11}}
			& \setstretch{1.5} {คลาส สัญลักษณ์แทนด้วยสี่เหลี่ยมแบ่งเป็น 3 ส่วน 
				ส่วนบน เป็นชื่อของ class ส่วนกลาง เป็นชื่อ Attribute และส่วนล่างเป็น Operation Name หรือ Method ใช้สำหรับเขียนฟังก์ชันในการทำงานของคลาสนั้น ๆ
				ชนิดของ Visibility ของ Method และ Attribute
				แบ่งเป็น 3 ชนิด ได้แก่
				\begin{enumerate}
					\item Public แทนสัญลักษณ์ด้วยเครื่องหมายบวก (+)
					\item Private แทนสัญลักษณ์ด้วยเครื่องหมายลบ (-)
					\item Protected แทนสัญลักษณ์ด้วยเครื่องหมายชาร์ป (#)
				\end{enumerate}
			} \\ \hline
			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/1}}
			& \setstretch{1.5} {Dependency Relationship หมายความว่า คลาสที่อยู่ฝั่งต้นลูกศรสามารถเรียกใช้คลาสที่อยู่ฝั่งหัวลูกศร}
			\\ \hline
			\raisebox{-\totalheight}{\includegraphics[width=0.35\textwidth]{Figures/3/Class/aggre}}
			& \setstretch{1.5} {Composition Relationship เป็นความสัมพันธ์ระหว่างออบเจ็กต์หรือคลาสแบบขึ้นต่อกันและมีความเกี่ยวข้องกันเสมอ} \\ \hline
			\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/3/Class/implement}}
			& \setstretch{1.5} {Realization Relationship เป็นความสัมพันธ์ระหว่าง Object หรือ Class ในลักษณะของการสืบทอดคุณสมบัติจาก Class หนึ่ง (Super class) ไปยังอีก Class หนึ่ง (Subclass)} \\ \hline
			\raisebox{-\totalheight}{\includegraphics[width=50,height=50]{Figures/table/class/connector}}
			& \setstretch{1.5} {Connector เป็นสัญลักษณ์แทนด้วยรูปห้าเหลี่ยมและมีชื่ออยู่ตรงกลาง จะสร้างสัญลักษณ์นี้ไว้เมื่อต้องการเชื่อมต่อคลาสที่อยู่คนละหน้า} \\ \hline
		\end{tabular}
	\end{table}
	\end{center}

\newpage
  %IMAGE of class
Class Diagram แสดงความสัมพันธ์ในรูปแบบต่างๆ ระหว่างคลาสของแอปพลิเคชันระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี อธิบายได้ตามภาพที่ \ref{Fig:Class Diagram} ดังต่อไปนี้

	\begin{figure}[H]
		\includegraphics[width=0.6\columnwidth]{Figures/3/Class/Class Diagram}
		\caption{Class Diagram ระบบแนะนำการแต่งกายสุภาพบุรุษและสุภาพสตรี}
		\label{Fig:Class Diagram}
	\end{figure}

	% TABLE of class
\newpage	
	จากรูปภาพที่ \ref{Fig:Class Diagram} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
	\begin{table}[H]
		\centering
		\caption{อธิบาย Class Diagram ของคลาสพื้นฐานของระบบ}
		\label{tab:class}
		\begin{tabular}{|c|p{10cm}|}
			\hline
			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			\raisebox{-\totalheight}{Login}
			& \setstretch{1.5} {คลาส Login เป็นคลาสที่ใช้เพื่อให้สมาชิกที่ได้ลงทะเบียนกับระบบเข้าสู่ระบบเพื่อใช้งานบริการจากระบบ ซึ่งสามารถเรียกใช้คลาส Registeruser Registerstore Recommend และคลาส Profileuser } \\ \hline
			\raisebox{-\totalheight}{Registeruser}
			& \setstretch{1.5} {คลาส Registeruser เป็นคลาสที่ใช้แสดงหน้าสมัครสมาชิกเพื่อให้ผู้ใช้ที่ต้องการลงทะเบียนเข้าสู่ระบบสามารถใช้งานได้ ซึ่งสามารถเรียกใช้คลาส MemberForm} \\ \hline
			\raisebox{-\totalheight}{MemberForm}
			& \setstretch{1.5} {คลาส MemberForm เป็นคลาสที่ใช้ในการสร้างฐานข้อมูลของผู้ใช้งาน จะมีคลาสหลักคือ django.forms.ModelForm  ซึ่งสามารถเรียกใช้คลาส Member} \\ \hline
			\raisebox{1.5}{\totalheight}{Member}
			& \setstretch{1.5} {คลาส Member เป็นคลาสที่ใช้ในการเก็บข้อมูลผู้ใช้งาน} \\ \hline
			\raisebox{-\totalheight}{Registerstore}
			& \setstretch{1.5} {คลาส Registerstore เป็นคลาสที่ใช้แสดงหน้าสมัครสมาชิกร้านค้าเพื่อให้ผู้ใช้ที่ต้องการลงทะเบียนร้านค้าสามารถลงทะเบียนและมีร้านค้าได้ ซึ่งสามารถเรียกใช้คลาส StoreForm} \\ \hline
			\raisebox{-\totalheight}{StoreForm}
			& \setstretch{1.5} {คลาส StoreForm เป็นคลาสที่ใช้ในการสร้างฐานข้อมูลของร้านค้า จะมีคลาสหลักคือ django.forms.ModelForm  ซึ่งสามารถเรียกใช้คลาส Store} \\ \hline
			\raisebox{1.5}{\totalheight}{Store}
			& \setstretch{1.5} {คลาส Store เป็นคลาสที่ใช้ในการเก็บข้อมูลร้านค้า} \\ \hline
			\raisebox{-\totalheight}{Recommend}
			& \setstretch{1.5} {คลาส Recommend เป็นคลาสที่ใช้แสดงรายการแนะนำเสื้อผ้าให้แก่ผู้ใช้งานหลังจากได้เข้าสู่ระบบแล้ว} \\ \hline
			\raisebox{-\totalheight}{Profileuser}
			& \setstretch{1.5} {คลาส Profileuser เป็นคลาสที่ใช้แสดงข้อมูลของผู้ใช้งานทั้งหมดหลังจากได้ทำการสมัครสมาชิกและเข้าสู่ระบบเรียบร้อยแล้ว ซึ่งสามารถเรียกใช้คลาส Editprofileuser Favoriteclothadd และคลาส Favoritestoreadd} \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบาย Class Diagram ของคลาสพื้นฐานของระบบ (ต่อ)}
	\label{tab:class}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		\raisebox{-\totalheight}{Editprofileuser}
		& \setstretch{1.5} {คลาส Login เป็นคลาสที่ใช้เพื่อให้สมาชิกที่ได้ลงทะเบีคลาส Editprofileuser เป็นคลาสที่ใช้แสดงหน้ารายละเอียดข้อมูลของผู้ใช้งานทั้งหมดที่สามารถทำการแก้ไขข้อมูลได้  ซึ่งสามารถเรียกใช้คลาส MemberForm } \\ \hline
		\raisebox{-\totalheight}{Favoriteclothadd}
		& \setstretch{1.5} {คลาส Favoriteclothadd เป็นคลาสที่ใช้แสดงหน้ารายการสินค้าโปรดที่ผู้ใช้งานได้กดถูกใจ} \\ \hline
		\raisebox{-\totalheight}{Favoritestoreadd}
		& \setstretch{1.5} {คลาส Favoritestoreadd เป็นคลาสที่จะแสดงหน้ารายการร้านโปรดที่ผู้ใช้งานได้กดถูกใจ} \\ \hline
		\raisebox{-\totalheight}{Profilestore}
		& \setstretch{1.5} {คลาส Profilestore เป็นคลาสที่แสดงข้อมูลของร้านค้าทั้งหมดหลังจากได้ทำการสมัครสมาชิกและเข้าสู่ระบบเรียบร้อยแล้ว ซึ่งสามารถเรียกใช้คลาส Editprofilestore} \\ \hline
		\raisebox{-\totalheight}{Editprofilestore}
		& \setstretch{1.5} {คลาส Editprofilestore เป็นคลาสที่ใช้แสดงหน้ารายละเอียดข้อมูลของร้านค้าทั้งหมดที่สามารถทำการแก้ไขข้อมูลได้  ซึ่งสามารถเรียกใช้คลาส StoreForm} \\ \hline
		\raisebox{1.5}{\totalheight}{Store}
		& \setstretch{1.5} {คลาส Store เป็นคลาสที่ใช้แสดงรายการร้านค้าที่มีทั้งหมดในระบบ สามารถเรียกใช้คลาส Storedetail Favoriteliststore และคลาส Favoritelistcloth} \\ \hline
		\raisebox{-\totalheight}{Storedetail}
		& \setstretch{1.5} {คลาส Storedetail เป็นคลาสที่ใช้แสดงรายละเอียดของร้านค้า และรายการสินค้าที่มีในร้าน  ซึ่งสามารถเรียกใช้คลาส Favoritestoreadd} \\ \hline
		\raisebox{-\totalheight}{Favoriteliststore}
		& \setstretch{1.5} {คลาส Favoriteliststore เป็นคลาสที่ใช้แสดงรายการคนที่กดถูกใจร้านค้า} \\ \hline
		\raisebox{-\totalheight}{Favoritelistcloth}
		& \setstretch{1.5} {คลาส Favoritelistcloth เป็นคลาสที่ใช้แสดงรายการคนที่กดถูกใจสินค้า} \\ \hline
		\raisebox{-\totalheight}{Manageproduct}
		& \setstretch{1.5} {คลาส  Manageproduct เป็นคลาสที่ใช้แสดงหน้าตารางเพื่อจัดการรายการสินค้าในการเพิ่ม ลบ และแก้ไขสินค้า ซึ่งสามารถเรียกใช้คลาส Addclothe Editclothe และ Delete-clothe} \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบาย Class Diagram ของคลาสพื้นฐานของระบบ (ต่อ)}
	\label{tab:class}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		\raisebox{-\totalheight}{Addclothe}
		& \setstretch{1.5} {คลาส Addclothe เป็นคลาสที่ใช้แสดงหน้าเพิ่มสินค้า ซึ่งสามารถเรียกใช้คลาส ClothForm} \\ \hline
		\raisebox{-\totalheight}{Editclothe}
		& \setstretch{1.5} {คลาส Editclothe เป็นคลาสที่ใช้แสดงหน้ารายละเอียดข้อมูลของสินค้าที่สามารถทำการแก้ไขข้อมูลได้ ซึ่งสามารถเรียกใช้คลาส ClothForm} \\ \hline
		\raisebox{-\totalheight}{ClothForm}
		& \setstretch{1.5} {คลาส ClothForm เป็นคลาสที่ใช้ในการสร้างฐานข้อมูลของเสื้อผ้า จะมีคลาสหลักคือ django.forms.ModelForm  ซึ่งสามารถเรียกใช้คลาส Cloth} \\ \hline
		\raisebox{-\totalheight}{Delete-clothe}
		& \setstretch{1.5} {คลาส Delete-clothe เป็นคลาสที่ใช้ในการลบรายการเสื้อผ้าในร้านค้า} \\ \hline
		\raisebox{-\totalheight}{Clothe}
		& \setstretch{1.5} {คลาส Clothe เป็นคลาสที่ใช้แสดงรายการเสื้อผ้าที่มีทั้งหมดในระบบ ซึ่งสามารถเรียกใช้คลาส Clothedetail และ Clothe-cat} \\ \hline
		\raisebox{1.5}{\totalheight}{Clothedetail}
		& \setstretch{1.5} {คลาส Clothedetail เป็นคลาสที่ใช้แสดงรายละเอียดของเสื้อผ้า} \\ \hline
		\raisebox{-\totalheight}{Clothe-cat}
		& \setstretch{1.5} {คลาส  Clothe-cat เป็นคลาสที่ใช้แสดงรายการเสื้อผ้าแบ่งตามประเภททั้งหมด 6 ประเภท ได้แก่ เสื้อ กางเกง กระโปรง สูท เดรส และอื่นๆ} \\ \hline
	\end{tabular}
\end{table}

\newpage
\section{Sequence Diagram}
	Sequence Diagram เป็น Diagram ที่แสดงขั้นตอนการทำงานของแต่ละ Use Case ระหว่าง Object ต่างๆ ที่ส่งข้อความถึงกันและกัน โดย Sequence Diagram จะช่วยให้มองเห็นการทำงานของภาพรวมของระบบ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียน Sequence Diagram 
	แสดงดังตารางที่ \ref{tab:Sequences}
	
	\begin{table}[H]
		\centering
		\caption{สัญลักษณ์ของ Sequence Diagram}
		\label{tab:Sequences}
		\begin{tabular}{| c	| p{10cm} |}
		\hline
		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.17\textwidth]{Figures/table/Sequence/Sequence1}}
		& \setstretch{1.5} {Class แสดงถึงการทำงานของ Use Case ในการส่งหรือรับข้อความ แทนด้วยสัญลักษณ์สี่เหลี่ยมมีชื่อคลาสอยู่ภายใน} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/table/Sequence/Sequence2}}
		& \setstretch{1.5} {Lifeline หรือเส้นอายุขัย แสดงช่วงเวลาตั้งแต่เริ่มสร้าง object ในคลาสนั้น จนกระทั่ง object นั้นถูกทำลาย สัญลักษณ์แทนด้วยเส้นประ} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/table/Sequence/Sequence3}}
		& \setstretch{1.5} {Focus of control หรือจุดควบคุม เป็นจุดควบคุมที่ object ใช้ทำการส่งหรือรับข้อความ สัญลักษณ์แทนด้วยสี่เหลี่ยม} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/Sequence/Sequence4}}
		& \setstretch{1.5} {Message คือ ข้อความที่รับส่งระหว่าง Object สัญลักษณ์แทนด้วยลูกศรและประกอบด้วย 2 ส่วน คือ ข้อมูล (Data) และฟังก์ชัน (Function)} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/Sequence/Sequence5}}
		& \setstretch{1.5} {Return Message เป็นข้อมูลที่ส่งกลับหลังจากทำงานเสร็จ} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=0.08\textheight]{Figures/3/selfcall}}
		& \setstretch{1.5} {Self call เป็นการเรียกฟังชันก์การทำงานภายในตัวเอง} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=0.1\textheight,width=0.3\textwidth]{Figures/3/frame}}
		& \setstretch{1.5} {สร้างกรอบการทำงานของโปรแกรม เพื่อให้รู้ขอบเขตของการทำงานเช่น ลูป(loop)} \\ \hline
		\end{tabular}
	\end{table}

\newpage
\subsection{Sequence Diagram ของการสมัครสมาชิก}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.95\columnwidth]
		{Figures/3/Sequence/Sequence ผู้ใช้งาน-สมัครสมาชิก}
		\caption{Sequence Diagram ของการสมัครสมาชิก}
		\label{Fig:Sequence ผู้ใช้งาน-สมัครสมาชิก}
	\end{figure}

	จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-สมัครสมาชิก} สามารถอธิบายแผนภาพ Sequence Diagram ของการสมัครสมาชิก ได้ดังนี้ เมื่อผู้ใช้กดสมัครสมาชิกระบบจะไปเรียกใช้ฟังก์ชัน RegisterUser() โดยจะแสดงหน้าสมัครสมาชิกส่งข้อความไปเรียกข้อมูลใน MemberForm() และส่งค่าข้อมูลทั้งหมดของสมาชิกมาในรูปแบบ form เมื่อผู้ใช้กรอกชื่อ รหัสผาน อีเมล์ เลือกเพศ เลือกวัน/เดือน/ปีเกิด เลือกรูปร่าง เลือกสีผิว เลือกรูปโปรไฟลเสร็จและกดปุมสมัครสมาชิกระบบจะไปเรียกฟังก์ชัน save() ซึ่งจะทำการเช็คเงื่อนไข ว่ากรอกข้อมูลครบทุกช่องหรือไม่ ถ้าครบแล้วจะส่งข้อมูล user ไปตรวจสอบในฐานข้อมูล SQLite3 และจะทำการสร้าง user เสร็จจะส่งสถานะการสมัครสมาชิกไปกลับไปให้คลาส Registeruser() และจะแสดงข้อมูลของผู้ใช้ถือว่าสมัครสมาชิกสำเร็จ หรือในกรณีกรอกข้อมูลไม่ครบทุกช่องตามที่กำหนดระบบจะแจ้งให้กรอกช่องที่ยังไม่ได้ทำการกรอก และทำการแจ้งสมัครสมาชิกสำเร็จ
	
\newpage
\subsection{Sequence Diagram ของการเข้าสู่ระบบ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-เข้าสู่ระบบ}
	\caption{Sequence Diagram ของการเข้าสู่ระบบ}
	\label{Fig:Sequence ผู้ใช้งาน-เข้าสู่ระบบ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-เข้าสู่ระบบ} สามารถอธิบายแผนภาพ Sequence Diagram ของการเข้าสู่ระบบ ได้ดังนี้ เมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ จากนั้นระบบจะเรียกใช้ฟังก์ชัน Login() โดยฟังก์ชัน Login() จะไปเรียกใช้ฟังก์ชัน Login() มาแสดงหน้าเข้าสู่ระบบต่อมาผู้ใช้กรอกชื่อผู้ใช้และรหัสผ่านเสร็จกดเข้าสู่ระบบทำใหระบบไป เรียกใช้ฟงกชัน Login() โดยจะส่งข้อมูลชื่อผู้ใช้และรหัสผ่านไปตรวจสอบในส่วน security และ SQLite3 ทำการค้นหาและส่งสถานะการเข้าสู่ระบบกลับไปที่คลาส Login ซึ่งในคลาสนี้จะทำการตรวจสอบสถานะการเข้าสู่ระบบและจะแสดงหน้าหลักของระะหากกรอกชื่อผู้ใช้และรหัสผ่านถูกต้อง แต่ถ้าหากกรอกไม่ถูกต้องระบบก็จะไม่ไปที่หน้าหลัก

\newpage
\subsection{Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-แก้ไขข้อมูลผู้ใช้}
	\caption{Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน}
	\label{Fig:Sequence ผู้ใช้งาน-แก้ไขข้อมูลผู้ใช้}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-แก้ไขข้อมูลผู้ใช้} สามารถอธิบายแผนภาพ Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน ได้ดังนี้ เมื่อผู้ใช้กดเลือกหน้าแก้ไขข้อมูลผู้ใช้งาน ระบบจะเรียกใช้ฟังห์ชัน Editprofileuser() ส่งข้อความไปเรียกข้อมูลใน MemberForm() และส่งค่าข้อมูลทั้งหมดของสมาชิกมาในรูปแบบ form จากนั้นเมื่อผู้ใช้ทำการกรอกชื่อผู้ใช้ รหัสผ่าน วัน/เดือน/ปีเกิด สีผิว รูปร่าง เลือกรูปโปร์ไฟล์ และทำการแก้ไข้อมูลผู้ใช้งาน ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขโดยต้องกรอกข้อมูลชื่อเป็นภาษาอังกฤษและต้องไม่ซ้ำกับฐานข้อมูล กรอกให้ครบทุกช่องก็จะสามารถทำการกดแก้ไขข้อมูลผู้ใช้งานได้ และทำการแจ้งแก้ไขข้อมูลผู้ใช้งานสำเร็จ

\newpage
\subsection{Sequence Diagram ของบันทึกรายการเสื้อผ้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-บันทึกเสื้อที่ถูกใจ}
	\caption{Sequence Diagram ของบันทึกรายการเสื้อผ้าที่ถูกใจ}
	\label{Fig:Sequence ผู้ใช้งาน-บันทึกเสื้อที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-บันทึกเสื้อที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของบันทึกรายการเสื้อผ้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้ต้องการกดบันทึกรายการเสื้อผ้าที่ถูกใจ ระบบจะเรียกใช้ฟังก์ชัน Clothdetail() และแสดงหน้ารายละเอียดเสื้อผ้าที่ผู้ใช้สนใจ เมื่อผู้ใช้ทำการกดปุ่มเพิ่มเป็นสินค้าโปรด พร้อมให้คะแนนระดับความชอบสิ้นค้าชิ้นนั้น ระบบจะส่งข้อมูลหมายเลยผู้ใช้งาน (mid) รหัสสินค้า (cid) และคะแนนความชอบสินค้า (star)  ไปบันทึกลงในฐานข้อมูล SQLite3 และทำการแจ้งเตือนสถานะการเพิ่มเป็นสินค้าโปรดแล้ว

\newpage
\subsection{Sequence Diagram ของบันทึกรายการร้านค้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-บันทึกร้านที่ถูกใจ}
	\caption{Sequence Diagram ของบันทึกรายการร้านค้าที่ถูกใจ}
	\label{Fig:Sequence ผู้ใช้งาน-บันทึกร้านที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-บันทึกร้านที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของบันทึกรายการร้านค้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้ต้องการกดบันทึกรายการร้านค้าที่ถูกใจ ระบบจะเรียกใช้ฟังก์ชัน Storedetail() และแสดงหน้ารายละเอียดร้านค้าที่ผู้ใช้สนใจ เมื่อผู้ใช้ทำการกดปุ่มเพิ่มร้านโปรด ระบบจะส่งข้อมูลหมายเลยผู้ใช้งาน (mid) และรหัสร้านค้า (sid) ไปบันทึกลงในฐานข้อมูล SQLite3 และทำการแจ้งเตือนสถานะการเพิ่มเป็นร้านโปรดแล้ว

\newpage
\subsection{Sequence Diagram ของดูบันทึกรายการเสื้อผ้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-ดูเสื้อที่ถูกใจ}
	\caption{Sequence Diagram ของดูบันทึกรายการเสื้อผ้าที่ถูกใจ}
	\label{Fig:Sequence ผู้ใช้งาน-ดูเสื้อที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-ดูเสื้อที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของดูบันทึกรายการเสื้อผ้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้ต้องการกดดูบันทึกรายการเสื้อผ้าที่ถูกใจ ระบบจะเรียกใช้ฟังก์ชัน Profileuser() และแสดงหน้าข้อมูลผู้ใช้งาน เมื่อผู้ใช้ทำการกดปุ่มดูรายการสินค้าโปรด ระบบจะเรียกใช้ฟังก์ชัน Favoritecloth() โดยส่งรหัสผู้ใช้งาน (mid) ไปค้นหาในฐานข้อมูล SQLite3 และแสดงผลลัพธ์รายการสินค้าโปรดตามรายการที่ผู้ใช้ได้ทำการบันทึก

\newpage
\subsection{Sequence Diagram ของดูบันทึกรายการร้านค้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-ดูร้านที่ถูกใจ}
	\caption{Sequence Diagram ของดูบันทึกรายการร้านค้าที่ถูกใจ}
	\label{Fig:Sequence ผู้ใช้งาน-ดูร้านที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-ดูร้านที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของดูบันทึกรายการร้านค้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้ต้องการกดดูบันทึกรายการร้านค้าที่ถูกใจ ระบบจะเรียกใช้ฟังก์ชัน Profileuser() และแสดงหน้าข้อมูลผู้ใช้งาน เมื่อผู้ใช้ทำการกดปุ่มดูรายการสินค้าโปรด ระบบจะเรียกใช้ฟังก์ชัน Favoritestore() โดยส่งรหัสผู้ใช้งาน (mid) ไปค้นหาในฐานข้อมูล SQLite3 และแสดงผลลัพธ์รายการร้านโปรดตามรายการที่ผู้ใช้ได้ทำการบันทึก

\newpage
\subsection{Sequence Diagram ของดูรายการเสื้อผ้าจากร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-ดูรายการเสื้อผ้าจากร้านค้า}
	\caption{Sequence Diagram ของดูรายการเสื้อผ้าจากร้านค้า}
	\label{Fig:Sequence ผู้ใช้งาน-ดูรายการเสื้อผ้าจากร้านค้า}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-ดูรายการเสื้อผ้าจากร้านค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของดูรายการเสื้อผ้าจากร้านค้า ได้ดังนี้ เมื่อผู้ใช้กดดูรายการเสื้อผ้าจากร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชันก์ Clothe() โดยจะไปทำการดึงข้อมูลมาจากฐานข้อมูลตารางเสื้อผ้า Cloth จากฐานข้อมูล SQLite3 เมื่อค้นหาข้อมูลเสร็จ ระบบจะแสดงรายการเสื้อผ้าทั้งหมดไปยังหน้าเว็บ clothe.html

\newpage
\subsection{Sequence Diagram ของดูรายการร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-ดูรายการร้านค้า}
	\caption{Sequence Diagram ของดูรายการร้านค้า}
	\label{Fig:Sequence ผู้ใช้งาน-ดูรายการร้านค้า}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-ดูรายการร้านค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของดูรายการร้านค้า ได้ดังนี้ เมื่อผู้ใช้กดดูรายการร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชันก์ Store() โดยจะไปทำการดึงข้อมูลมาจากฐานข้อมูลตารางร้านค้า Store จากฐานข้อมูล SQLite3 เมื่อค้นหาข้อมูลเสร็จ ระบบจะแสดงรายการร้านค้าทั้งหมดไปยังหน้าเว็บ store.html

\newpage
\subsection{Sequence Diagram ของค้นหาเสื้อผ้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ใช้งาน-ค้นหาเสื้อผ้า}
	\caption{Sequence Diagram ของค้นหาเสื้อผ้า}
	\label{Fig:Sequence ผู้ใช้งาน-ค้นหาเสื้อผ้า}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ใช้งาน-ค้นหาเสื้อผ้า} สามารถอธิบายแผนภาพ Sequence Diagram ของค้นหาเสื้อผ้า ได้ดังนี้ เมื่อผู้ใช้กดค้นหาเสื้อผ้า ระบบจะทำการเรียกใช้ฟังก์ชันก์ Clothe() โดยจะไปทำการดึงข้อมูลมาจากฐานข้อมูลตาราง Cloth จากฐานข้อมูล SQLite3 เมื่อเมื่อผู้ใช้ทำการกรอกชื่อสินค้าที่ต้องการค้นหาเสร็จ ระบบจะส่งข้อมูลไปในรูปแบบ method POST นำชื่อสินค้าที่ผู้ใช้กรอกไปค้นหาใในตารางเสื้อผ้า Cloth ในฐานข้อมูล SQQLite3 เมื่อค้นหาข้อมูลเสร็จ ระบบจะแสดงข้อมูลเสื้อผ้าที่ผู้ใช้ต้องการไปยังหน้าเว็บ clothe.html

\newpage
\subsection{Sequence Diagram ของการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence แนะนำเสื้อผ้า-กรณียังไม่เพิ่มรายการเสื้อผ้าที่ถูกใจ}
	\caption{Sequence Diagram ของการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ}
	\label{Fig:sequence แนะนำเสื้อผ้า-กรณียังไม่เพิ่มรายการเสื้อผ้าที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:sequence แนะนำเสื้อผ้า-กรณียังไม่เพิ่มรายการเสื้อผ้าที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของการแนะนำเสื้อผ้า กรณียังไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้เข้าสู่หน้าหลักของระบบและทำการกดปุ่มแนะนำเสื้อผ้า ระบบจะทำการส่งรหัสผู้ใช้ (mid) ไปเพื่อทำการค้นหาว่ารหัสผู้ใช้ที่ทำการเข้าสู่ระบบมาแล้วนั้นมีรายการบันทึกเสื้อผ้าที่ถูกใจหรือไม่ Recommend() เมื่อทำการตรวจสอบ FavoriteCloth() ไม่พบรายการบันทึกเสื้อผ้าที่ถูกใจระบบจะส่งค่าเป็น None และจากนั้นระบบจะทำการส่งข้อมูล FavoriteCloth.all.order-by(star) ส่งคำร้องขอไปยังฐานข้อมูล SQLite3 เพื่อให้ระบบทำการแนะนำรายการเสื้อผ้าที่มีการให้คะแนนหรือดาวมากที่สุด และแสดงรายการเรียงลำดับตามจำนวนคะแนนหรือดาวจากมากไปหาน้อย โดยข้อมูลที่นำมาแสดงจะมีทั้งหมด 9 ชิ้น Recommend Cloth[9] แสดงรายการแนะนำเสื้อผ้า Recommend() ให้แก่ผู้ใช้งานในกรณีที่ไม่มีเพิ่มรายการเสื้อผ้าที่ถูกใจ

\newpage
\subsection{Sequence Diagram ของการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence แนะนำเสื้อผ้า-กรณีมีรายการเสื้อผ้าที่ถูกใจ}
	\caption{Sequence Diagram ของการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ}
	\label{Fig:sequence แนะนำเสื้อผ้า-กรณีมีรายการเสื้อผ้าที่ถูกใจ}
\end{figure}

จากภาพที่ \ref{Fig:sequence แนะนำเสื้อผ้า-กรณีมีรายการเสื้อผ้าที่ถูกใจ} สามารถอธิบายแผนภาพ Sequence Diagram ของการแนะนำเสื้อผ้า กรณีที่มีรายการเสื้อผ้าที่ถูกใจ ได้ดังนี้ เมื่อผู้ใช้เข้าสู่หน้าหลักของระบบและทำการกดปุ่มแนะนำเสื้อผ้า ระบบจะทำการส่งรหัสผู้ใช้ (mid) ไปเพื่อทำการค้นหาว่ารหัสผู้ใช้ที่ทำการเข้าสู่ระบบมาแล้วนั้นมีรายการบันทึกเสื้อผ้าที่ถูกใจหรือไม่ Recommend() เมื่อทำการตรวจสอบ FavoriteCloth() มีรายการเสื้อผ้าที่ถูกใจ ระบบจะทำการร้องขอข้อมูลไปยังฐานข้อมูล SQLite3 แสดงรายการสินค้าโปรดของผู้ใช้ และนำรหัสสินค้าโปรด (cid) ไปใช้ในการคำนวณเพื่อทำนายการแนะนำเสื้อผ้า Surprise() เมื่อทำการโหลดข้อมูลเสร็จแล้วระบบจะส่งค่า (cid) ได้แนะนำรหัสสินค้า 9 ชิ้น มายังฟังก์ชันก์ Recommemend() และ Recomend() ได้ทำการส่งรหัสสินค้า 9 ชิ้น ไปร้องขอข้อมูลยังฐานข้อมูล SQLite3 และได้ข้อมูลรายการเสื้อผ้าแนะนำมาจาก FavoriteCloth() นำผลมาแสดงยัง Recommend() เป็นรายการแนะนำเสื้อผ้าให้แก่ผู้ใช้งานในกรณีที่มีรายการเสื้อผ้าที่ถูกใจ

\newpage
\subsection{Sequence Diagram ของเพิ่มร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-เพิ่มร้านค้า}
	\caption{Sequence Diagram ของเพิ่มร้านค้า}
	\label{Fig:sequence ร้านค้า-เพิ่มร้านค้า}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-เพิ่มร้านค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของเพิ่มร้านค้า ได้ดังนี้ เมื่อร้านค้ากดปุ่มเพิ่มร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชัน RegisterStore() โดยจะแสดงหน้าเพิ่มร้านค้า ส่งข้อความไปเรียกข้อมูลใน StoreForm() และส่งค่าข้อมูลทั้งหมดของร้านค้ามาในรูปแบบ form เมื่อร้านค้าทำการกรอกชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail, Facebook เลือกรูปโปรไฟล์ร้านค้า และทำการกดสมัครสมาชิกหรือเพิ่มร้านค้า ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขคือต้องกรอกข้อมูลให้ครบทุกช่องตามที่กำหนด จึงจะทำการกดเพิ่มร้านค้าได้ และทำการแจ้งเพิ่มร้านค้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของแก้ไขข้อมูลร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-แก้ไขข้อมูลร้าน}
	\caption{Sequence Diagram ของแก้ไขข้อมูลร้านค้า}
	\label{Fig:sequence ร้านค้า-แก้ไขข้อมูลร้าน}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-แก้ไขข้อมูลร้าน} สามารถอธิบายแผนภาพ Sequence Diagram ของแก้ไขข้อมูลร้านค้า ได้ดังนี้ เมื่อร้านค้ากดปุ่มแก้ไขข้อมูลร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชัน Editpropilestore() โดยจะแสดงหน้าแก้ไขข้อมูลร้านค้า ส่งข้อความไปเรียกข้อมูลใน StoreForm() และส่งค่าข้อมูลทั้งหมดของร้านค้ามาในรูปแบบ form เมื่อร้านค้าทำการกรอกชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail, Facebook เลือกรูปโปรไฟล์ร้านค้า และทำการกดแก้ไขข้อมูลร้านค้า ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขคือต้องกรอกข้อมูลให้ครบทุกช่องตามที่กำหนด จึงจะทำการกดเพิ่มร้านค้าได้ และทำการแจ้งแก้ไขข้อมูลร้านค้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของเพิ่มเสื้อผ้าในร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-เพิ่มสินค้า}
	\caption{Sequence Diagram ของเพิ่มเสื้อผ้าในร้านค้า}
	\label{Fig:sequence ร้านค้า-เพิ่มสินค้า}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-เพิ่มสินค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของเพิ่มเสื้อผ้าในร้านค้า ได้ดังนี้ เมื่อร้านค้ากดเพิ่มเสื้อผ้าในร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชัน Addclothe() โดยจะแสดงหน้าเพิ่มเสื้อผ้า ส่งข้อความไปเรียกข้อมูลใน ClothForm() และส่งค่าข้อมูลทั้งหมดของสินค้ามาในรูปแบบ form เมื่อร้านค้าทำการกรอกชื่อสินต้า จำนวนสินค้า ราคาสินค้า ขนาดสินค้า ประเภทสินค้า สีสินค้า เลือกรูปสินค้า และทำการกดเพิ่มเสื้อผ้า ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขคือต้องกรอกข้อมูลให้ครบทุกช่องตามที่กำหนด จึงจะทำการกดเพิ่มเสื้อผ้าได้ และทำการแจ้งเพิ่มเสื้อผ้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของลบเสื้อผ้าในร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-ลบสินค้า}
	\caption{Sequence Diagram ของลบเสื้อผ้าในร้านค้า}
	\label{Fig:sequence ร้านค้า-ลบสินค้า}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-ลบสินค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของลบเสื้อผ้าในร้านค้า ได้ดังนี้ เมื่อผู้ใช้กดสมัครสมาชิกระบบจะไปเรียกใช้ฟังก์ชัน RegisterUser() โดยจะแสดงหน้าสมัครสมาชิกส่งข้อความไปเรียกข้อมูลใน MemberForm() และส่งค่าข้อมูลทั้งหมดของสมาชิกมาในรูปแบบ form เมื่อผู้ใช้กรอกชื่อ รหัสผาน อีเมล์ เลือกเพศ เลือกวัน/เดือน/ปีเกิด เลือกรูปร่าง เลือกสีผิว เลือกรูปโปรไฟลเสร็จและกดปุมสมัครสมาชิกระบบจะไปเรียกฟังก์ชัน save() ซึ่งจะทำการเช็คเงื่อนไข ว่ากรอกข้อมูลครบทุกช่องหรือไม่ ถ้าครบแล้วจะส่งข้อมูล user ไปตรวจสอบในฐานข้อมูล SQLite3 และจะทำการสร้าง user เสร็จจะส่งสถานะการสมัครสมาชิกไปกลับไปให้คลาส Registeruser() และจะแสดงข้อมูลของผู้ใช้ถือว่าสมัครสมาชิกสำเร็จ หรือในกรณีกรอกข้อมูลไม่ครบทุกช่องตามที่กำหนดระบบจะแจ้งให้กรอกช่องที่ยังไม่ได้ทำการกรอก และทำการแจ้งสมัครสมาชิกสำเร็จ

\newpage
\subsection{Sequence Diagram ของแก้ไขข้อมูลเสื้อผ้าในร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-แก้ไขสินค้า}
	\caption{Sequence Diagram ของแก้ไขข้อมูลเสื้อผ้าในร้านค้า}
	\label{Fig:sequence ร้านค้า-แก้ไขสินค้า}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-แก้ไขสินค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของแก้ไขข้อมูลเสื้อผ้าในร้านค้า ได้ดังนี้ เมื่อร้านค้ากดแก้ไขข้อมูลเสื้อผ้า ระบบจะทำการเรียกใช้ฟังก์ชัน Editclothe() โดยจะแสดงหน้าแก้ไขข้อมูลเสื้อผ้า ส่งข้อความไปเรียกข้อมูลใน ClothForm() และส่งค่าข้อมูลทั้งหมดของสินค้าในรูปแบบ form เมื่อร้านค้าทำการกรอกชื่อสินต้า จำนวนสินค้า ราคาสินค้า ขนาดสินค้า ประเภทสินค้า สีสินค้า เลือกรูปสินค้า และทำการกดแก้ไขข้อมูลเสื้อผ้า ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขคือต้องกรอกข้อมูลให้ครบทุกช่องตามที่กำหนด จึงจะทำการกดเพิ่มเสื้อผ้าได้ และทำการแจ้งแก้ไขข้อมูลเสื้อผ้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของดูรายการคนที่ถูกใจเสื้อผ้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-ดูคนที่ถูกใจสินค้า}
	\caption{Sequence Diagram ของดูรายการคนที่ถูกใจเสื้อผ้า}
	\label{Fig:sequence ร้านค้า-ดูคนที่ถูกใจสินค้า}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-ดูคนที่ถูกใจสินค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของดูรายการคนที่ถูกใจเสื้อผ้า ได้ดังนี้ เมื่อร้านค้าต้องการกดดูรายการคนที่ถูกใจเสื้อผ้า ระบบจะเรียกใช้ฟังก์ชัน Profilestore() และแสดงหน้าข้อมูลร้านค้า เมื่อร้านค้าทำการกดปุ่มดูรายการคนที่ถูกใจสินค้า ระบบจะเรียกใช้ฟังก์ชัน Favoritelistcloth() โดยส่งรหัสผู้ใช้งาน (mid) ไปค้นหาในฐานข้อมูล SQLite3 และแสดงผลลัพธ์รายการายการคนที่ถูกใจสินค้าตามรายการที่ผู้ใช้ได้ทำการบันทึก

\newpage
\subsection{Sequence Diagram ของดูรายการคนที่ถูกใจร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/sequence ร้านค้า-ดูคนที่ถูกใจร้าน}
	\caption{Sequence Diagram ของดูรายการคนที่ถูกใจร้านค้า}
	\label{Fig:sequence ร้านค้า-ดูคนที่ถูกใจร้าน}
\end{figure}

จากภาพที่ \ref{Fig:sequence ร้านค้า-ดูคนที่ถูกใจร้าน} สามารถอธิบายแผนภาพ Sequence Diagram ของดูรายการคนที่ถูกใจร้านค้า ได้ดังนี้ เมื่อร้านค้าต้องการกดดูรายการคนที่ถูกใจร้านค้า ระบบจะเรียกใช้ฟังก์ชัน Profilestore() และแสดงหน้าข้อมูลร้านค้า เมื่อร้านค้าทำการกดปุ่มดูรายการคนที่ถูกใจร้านค้า ระบบจะเรียกใช้ฟังก์ชัน Favoriteliststore() โดยส่งรหัสผู้ใช้งาน (mid) ไปค้นหาในฐานข้อมูล SQLite3 และแสดงผลลัพธ์รายการายการคนที่ถูกใจร้านค้าตามรายการที่ผู้ใช้ได้ทำการบันทึก

\newpage
\subsection{Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ดูแลระบบ-แก้ไขผู้ใช้งาน}
	\caption{Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน}
	\label{Fig:Sequence ผู้ดูแลระบบ-แก้ไขผู้ใช้งาน}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ดูแลระบบ-แก้ไขผู้ใช้งาน} สามารถอธิบายแผนภาพ Sequence Diagram ของแก้ไขข้อมูลผู้ใช้งาน ได้ดังนี้ เมื่อผู้ดูแลระบบกดเลือกหน้าแก้ไขข้อมูลผู้ใช้งาน ระบบจะเรียกใช้ฟังห์ชัน AdminPage() ส่งข้อความไปเรียกข้อมูลใน MemberForm() และส่งค่าข้อมูลทั้งหมดของสมาชิกมาในรูปแบบ form จากนั้นเมื่อผู้ใช้ทำการกรอกชื่อผู้ใช้ รหัสผ่าน วัน/เดือน/ปีเกิด สีผิว รูปร่าง เลือกรูปโปร์ไฟล์ และทำการแก้ไข้อมูลผู้ใช้งาน ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขโดยต้องกรอกข้อมูลชื่อเป็นภาษาอังกฤษและต้องไม่ซ้ำกับฐานข้อมูล กรอกให้ครบทุกช่องก็จะสามารถทำการกดแก้ไขข้อมูลผู้ใช้งานได้ และทำการแจ้งแก้ไขข้อมูลผู้ใช้งานสำเร็จ

\newpage
\subsection{Sequence Diagram ของลบผู้ใช้งาน}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ดูแลระบบ-ลบผู้ใช้งาน}
	\caption{Sequence Diagram ของลบผู้ใช้งาน}
	\label{Fig:Sequence ผู้ดูแลระบบ-ลบผู้ใช้งาน}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ดูแลระบบ-ลบผู้ใช้งาน} สามารถอธิบายแผนภาพ Sequence Diagram ของลบผู้ใช้งาน ได้ดังนี้ เมื่อผู้ดูแลระบบต้องการลบผู้ใช้งาน ระบบจะเรียกใช้ฟังก์ชัน AdminPage() และทำการเลือกผู้ใช้ที่ต้องการลบ จากนั้นระบบจะส่งรหัสผู้ใช้ (mid) ไปยังฐานข้อมูล เมื่อร้านค้าทำการกดลบผู้ใช้งาน ระบบจะแสดงสถานะการลบผู้ใช้งานและทำการลบผู้ใช้งานออกจากฐานข้อมูล และแจ้งลบผู้ใช้งานสำเร็จ
\\
\newpage
\subsection{Sequence Diagram ของแก้ไขข้อมูลร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ดูแลระบบ-แก้ไขร้านค้า}
	\caption{Sequence Diagram ของแก้ไขข้อมูลร้านค้า}
	\label{Fig:Sequence ผู้ดูแลระบบ-แก้ไขร้านค้า}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ดูแลระบบ-แก้ไขร้านค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของแก้ไขข้อมูลร้านค้า ได้ดังนี้ เมื่อผู้ดูแลระบบกดปุ่มแก้ไขข้อมูลร้านค้า ระบบจะทำการเรียกใช้ฟังก์ชัน AdminPage() โดยจะแสดงหน้าแก้ไขข้อมูลร้านค้า ส่งข้อความไปเรียกข้อมูลใน StoreForm() และส่งค่าข้อมูลทั้งหมดของร้านค้ามาในรูปแบบ form เมื่อร้านค้าทำการกรอกชื่อร้าน ที่อยู่ร้าน เบอร์โทรติดต่อ E-mail, Facebook เลือกรูปโปรไฟล์ร้านค้า และทำการกดแก้ไขข้อมูลร้านค้า ระบบจะทำการส่งข้อมูลทั้งหมดที่ผู้ใช้กรอกครบไปยังฐานข้อมูล SQLite3 ทำการบันทึกลงฐานข้อมูล โดยมีเงื่อนไขคือต้องกรอกข้อมูลให้ครบทุกช่องตามที่กำหนด จึงจะทำการกดเพิ่มร้านค้าได้ และทำการแจ้งแก้ไขข้อมูลร้านค้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของลบร้านค้า}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ดูแลระบบ-ลบร้านค้า}
	\caption{Sequence Diagram ของลบร้านค้า}
	\label{Fig:Sequence ผู้ดูแลระบบ-ลบร้านค้า}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ดูแลระบบ-ลบร้านค้า} สามารถอธิบายแผนภาพ Sequence Diagram ของลบร้านค้า ได้ดังนี้ เมื่อผู้ดูแลระบบต้องการลบร้านค้า ระบบจะเรียกใช้ฟังก์ชัน AdminPage() และทำการเลือกผู้ใช้ที่ต้องการลบ จากนั้นระบบจะส่งรหัสร้านค้า (sid) ไปยังฐานข้อมูล เมื่อร้านค้าทำการกดลบร้านค้า ระบบจะแสดงสถานะการลบร้านค้าและทำการลบร้านค้าออกจากฐานข้อมูล และแจ้งลบร้านค้าสำเร็จ

\newpage
\subsection{Sequence Diagram ของฝึกแบบจำลองสำหรับระบบแนะนำ}
\begin{figure}[H]
	\centering
	\includegraphics[width=0.95\columnwidth]
	{Figures/3/Sequence/Sequence ผู้ดูแลระบบ-ฝึกแบบจำลองสำหรับระบบแนะนำ}
	\caption{Sequence Diagram ของฝึกแบบจำลองสำหรับระบบแนะนำ}
	\label{Fig:Sequence ผู้ดูแลระบบ-ฝึกแบบจำลองสำหรับระบบแนะนำ}
\end{figure}

จากภาพที่ \ref{Fig:Sequence ผู้ดูแลระบบ-ฝึกแบบจำลองสำหรับระบบแนะนำ} สามารถอธิบายแผนภาพ Sequence Diagram ของฝึกแบบจำลองสำหรับระบบแนะนำ ได้ดังนี้ ผู้ดูแลระบบทำการสั่งสร้าง models Recommender() จากนั้นทำการแปลงข้อมูล favoritecloth จาก xlax เป็น csv และทำการนำส่งข้อมูลจาก csv ไปยัง Pandas() ได้ผลลัพธ์กลับมา matrix จากนั้นทำการคำนวณค่าโดยใช้เทคนิคทั้งหมด 3 เทคนิคดังนี้คือ KNNBaseline(), KNNBasic() และ KNNWithMean() ไปยัง Surprise() และได้ models มาที่ Recommender() จากนั้นทำการแบ่ง matrix เป็นชุดฝึกและชุดทดสอบ แล้วทำการ train models ด้วยชุดฝึก และทดสอบ models ด้วยชุดทดสอบ เมื่อได้ผลลัพธ์แล้วทำการ save modelsที่ผลทดสอบดีที่สุดเป็นไฟล์ knn.model เก็บไฟล์ knn.model ไปไว้ที่ server WebApplication() และแจ้งผลลัพธ์การ train model



\newpage	 
	
\section{โครงสร้างฐานข้อมูล SQLite3}
ฐานข้อมูล SQLite เป็นโปรแกรมฐานข้อมูลที่มีขนาดเล็กมาก (ไม่ถึง 1MB)  เก็บฐานข้อมูลเป็นไฟล์โดยไม่จำเป็นต้องมีเซิร์ฟเวอร์ ทำให้ถูกใช้ในหลายๆ โปรแกรมหรือถูกติดตั้งลงไปในอุปกรณ์พกพาหลายชนิดๆ เช่น iPhone, Android เพื่อใช้ในการเก็บข้อมูล

	\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/data-member}
	\caption{ตารางฐานข้อมูลสมาชิกหรือผู้ใช้งาน}
	\label{Fig:data-member}
	ตารางฐานข้อมูลสมาชิกหรือผู้ใช้งาน Member จะประกอบไปด้วย Gender, Shape, Skincolor และ AbstractUser ในส่วนของ  AbstractUser นี้ Django จะสร้างขึ้นมาให้อัตโนมัติ
	\end{figure}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Member} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		id & สำหรับเก็บรหัสสมาชิก \\ \hline
		gender &  สำหรับเก็บข้อมูลเพศ โดยดึงข้อมูลมาจากตาราง Gender \\ \hline
		shape & สำหรับเก็บข้อมูลรูปร่าง โดยดึงข้อมูลมาจากตาราง Shape \\ \hline
		skincolor & สำหรับเก็บข้อมูลสีผิว โดยดึงข้อมูลมาจากตาราง SkinColor  \\ \hline
		cover & สำหรับเก็บข้อมูลรูปภาพผู้ใช้งาน \\ \hline
		dob & สำหรับเก็บข้อมูลวันที่ \\ \hline
		password & สำหรับเก็บข้อมูลรหัสผ่าน \\ \hline
		username & สำหรับเก็บข้อมูลชื่อผู้ใช้งาน \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Gender} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		id & สำหรับเก็บรหัสเพศ \\ \hline
		name &  สำหรับเก็บชื่อเพศ \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Shape} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		id & สำหรับเก็บรหัสรูปร่าง \\ \hline
		name &  สำหรับเก็บชื่อรูปร่าง \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ SinColor} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		id & สำหรับเก็บรหัสสีผิว \\ \hline
		name &  สำหรับเก็บชื่อสีผิว \\ \hline
	\end{tabular}
\end{table}


	\begin{figure}[H]
	\centering
	\includegraphics[width=0.3\columnwidth]
	{Figures/3/DB/data-store}
	\caption{ตารางฐานข้อมูลร้านค้า}
	\label{Fig:data-store}
	
\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Store} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		sid & สำหรับเก็บรหัสร้านค้า \\ \hline
		member &  สำหรับเก็บชื่อผู้ใช้ ซึ่งจะดึงข้อมูลมาจากตาราง Member \\ \hline
		address & สำหรับเก็บข้อมูลที่อยู่ร้านค้า \\ \hline
		cover & สำหรับเก็บข้อมูลรูปภาพร้านค้า  \\ \hline
		email & สำหรับเก็บข้อมูลอีเมล์ร้านค้า \\ \hline
		facebook & สำหรับเก็บข้อมูลเฟสบุ๊กร้านค้า \\ \hline
		name & สำหรับเก็บชื่อร้านค้า \\ \hline
		tel & สำหรับเก็บข้อมูลชื่อผู้ใช้งาน \\ \hline
	\end{tabular}
\end{table}
	
	
	
\end{figure}
	\begin{figure}[H]
	\centering
	\includegraphics[width=0.8\columnwidth]
	{Figures/3/DB/data-cloth}
	\caption{ตารางฐานข้อมูลเสื้อผ้า}
	\label{Fig:data-cloth}
	ตารางฐานข้อมูลเสื้อผ้า Cloth จะประกอบไปด้วย Category, Color และ Size
\end{figure}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Cloth} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		cid & สำหรับเก็บรหัสสินค้า \\ \hline
		category &  สำหรับเก็บประเภทสินค้า โดยดึงข้อมูลมาจากตาราง Category \\ \hline
		namecolor & สำหรับเก็บสีสินค้า โดยดึงข้อมูลมาจากตาราง Color \\ \hline
		size & สำหรับเก็บขนาดสินค้า โดยดึงข้อมูลมาจากตาราง Size  \\ \hline
		store & สำหรับเก็บข้อมูลร้านค้า โดยดึงข้อมูลมาจากตาราง Store \\ \hline
		cover & สำหรับเก็บรูปภาพสินค้า \\ \hline
		name & สำหรับเก็บชื่อสินค้า \\ \hline
		num & สำหรับเก็บจำนวนสินค้า \\ \hline
		price & สำหรับเก็บราคาสินค้า \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Category} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		cid & สำหรับเก็บรหัสประเภทสินค้า \\ \hline
		name &  สำหรับเก็บชื่อประเภทสินค้า \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Color} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		colorid & สำหรับเก็บรหัสสีสินค้า \\ \hline
		namecolor &  สำหรับเก็บชื่อสีสินค้า \\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Size} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		sid & สำหรับเก็บรหัสขนาดสินค้า \\ \hline
		name &  สำหรับเก็บชื่อขนาดสินค้า \\ \hline
	\end{tabular}
\end{table}


	\begin{figure}[H]
	\centering
	\includegraphics[width=0.4\columnwidth]
	{Figures/3/DB/data-favoritecloth}
	\caption{ตารางฐานข้อมูลสินค้าโปรด}
	\label{Fig:data-favoritecloth}
\end{figure}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ FavoriteCloth} 
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		fid & สำหรับเก็บรหัสสินค้าโปรด \\ \hline
		cloth &  สำหรับเก็บชื่อข้อมูลสินค้า โดยดึงข้อมูลมาจากตาราง Cloth \\ \hline
		member & สำหรับเก็บชื่อข้อมูลชื่อผู้ใช้ โดยดึงข้อมูลมาจากตาราง Member \\ \hline
		star &  สำหรับเก็บชื่อข้อมูลอันดับความชอบสินค้า \\ \hline
	\end{tabular}
\end{table}


\begin{figure}[H]
	\centering
	\includegraphics[width=0.4\columnwidth]
	{Figures/3/DB/data-favoritestore}
	\caption{ตารางฐานข้อมูลร้านโปรด}
	\label{Fig:data-favoritestore}
\end{figure}
\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ FavoriteStore}
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		fid & สำหรับเก็บรหัสร้านโปรด \\ \hline
		member &  สำหรับเก็บชื่อข้อมูลชื่อผู้ใช้ โดยดึงข้อมูลมาจากตาราง Member \\ \hline
		store & สำหรับเก็บชื่อข้อมูลชื่อร้าค้า โดยดึงข้อมูลมาจากตาราง Store \\ \hline
	\end{tabular}
\end{table}


\begin{figure}[H]
	\centering
	\includegraphics[width=0.4\columnwidth]
	{Figures/3/DB/data-recommend}
	\caption{ตารางฐานข้อมูลแนะนำเสื้อผ้า}
	\label{Fig:data-recommend}
\end{figure}
\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel ของ Recommend}
	\label{my-label1}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		rid & สำหรับเก็บรหัสรายการแนะนำเสื้อผ้า \\ \hline
		favorite &  สำหรับเก็บชื่อข้อมูลเสื้อผ้าที่ผู้ใช้ได้กดเพิ่มเป็นสินค้าโปรด จากตาราง FavoriteCloth \\ \hline
		member & สำหรับเก็บชื่อข้อมูลชื่อผู้ใช้ โดยดึงข้อมูลมาจากตาราง Member \\ \hline
	\end{tabular}
\end{table}


