\chapter{การวิเคราะห์และออกแบบระบบ}

การวิเคราะห์และออกแบบระบบก่อนดำเนินการจริงเป็นอีกหนึ่งขั้นตอนที่มีความสำคัญมาก เพราะการวิเคราะห์และออกแบบระบบนั้นเป็นการกระทำที่ทำให้ผู้พัฒนาเห็นรายละเอียดส่วนย่อยของงานทั้งหมด เพิ่มประสิทธิภาพในการวางแผน การทำงาน และยังช่วยลดปัญหาที่อาจจะเกิดขึ้นในระหว่างพัฒนา เพื่อให้ระบบมีความสมบูรณ์มากยิ่งขึ้น เนื่องจากการวิเคราะห์และออกแบบระบบนั้นจะช่วยให้ให้บริการ จัดการทรัพยากรได้อย่างคุ้มค่าและตรงตามความต้องการของระบบ

การวิเคราะห์และออกแบบระบบ การจองคิวร้านเสริมสวย ในบทนี้จะแบ่งออกเป็น 6 ขั้นตอนเพื่อให้เห็นการดำเนินงานอย่างมีระบบ ในหัวข้อแรกจะนำเสนอภาพรวมของระบบ ก่อนจะนำเสนอเอกสารแสดงความต้องการของระบบซึ่งจะทำให้เห็นที่มาของหน้าของระบบ ในขั้นตอนของการออกแบบในหัวข้อที่สาม ส่วนหัวข้อที่เหลือจะแสดงแผนภาพการการทำงานของระบบโดยใช้ UML diagram ซึ่งประกอบไปด้วย Use Case diagram, Class diagram และ Sequence Diagram เพื่อแสดงรายละเอียดของระบบก่อนนำไปเขียนคำสั่งด้วยภาษาโปรแกรมในบทต่อไป

\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{โครงสร้างภาพรวมของระบบ}
     System Architecture \cite{architecture} หมายถึง กรอบโครงสร้างของระบบที่อธิบายความสัมพันธ์ขององค์ประกอบต่าง ๆ ไปจนถึงขั้นการเชื่อมต่อกันของระบบย่อยต่าง ๆ โดยจัดกลุ่มองค์ประกอบไว้ในหลาย ๆ ลักษณะเพื่อให้ผู้เกี่ยวข้อง (Stakeholder) จากพื้นฐานสาขาอาชีพที่แตกต่าง กันสามารถทำความเข้าใจได้ง่าย เช่น การจัดแบ่งองค์ประกอบตามลักษณะการทำงานของระบบ (functional components) เป็นต้น
    
    การออกแบบ System architecture แสดงภาพรวมและเทคโนโลยีของระบบจองคิวร้านเสริมสวย มีรายละเอียดดังรูปที่ \ref{Fig:architecture}
   	\begin{figure}[H]
   		\centering
   		\includegraphics[width=\textwidth]{Figures/3/architecture/architecture}
   		\caption{System architecture ระบบการจองคิวร้านเสริมสวย}
   		\label{Fig:architecture}
   	\end{figure}
   
   จากรูปที่ \ref{Fig:architecture} สามารถอธิบายโครงสร้างและเทคโนโลยีของระบบโดยแบ่งเป็น 3 ส่วนหลัก ดังนี้
   \begin{enumerate}
   	\item Database
   	 ระบบใช้บริการฐานข้อมูลแบบ MySQL ของไฟร์เบส(Firebase) ชื่อ Relational Database Management System (RDBMS)
	  \item Server
	   กระบวนการทำงานในส่วนของเซิฟเวอร์ (server) แบ่งเป็น 2 ส่วนได้แก่
	   \begin{itemize}
	   	\item ชุดเผยแพร่สำหรับการพัฒนาเว็บไซต์ซึ่งในที่นี้ใช้ Node.js และ Express ในการพัฒนา 
	   	\item ชุดบริการ phpmyadmin Api ใช้สำหรับการทำงานกับบริการต่าง ๆ ของ MySLQ 
	   \end{itemize}
	   \item Client
	     เว็บแอปพลิเคชันการจองคิวร้านเสริมสวย มีวัตถุประสงค์เพื่อรองรับการทำงานของผู้ใช้บนเว็บบราวเซอร์พัฒนาด้วย React
	    
   \end{enumerate}

\section{System Requirements}
\subsection{Functional Requirements}
	ระบบการจองคิวร้านเสริมสวย แบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้
	\begin{enumerate}
		\item เจ้าของร้าน
			\begin{itemize}[label={--}]
				\item สามารถลงทะเบียนเข้าสู่ระบบด้วย Email ได้
				\item สามารถดูคิวที่ผู้ใช้บริการได้ทำการจองคิวไว้
				\item สามารถจัดการคิวได้
				\item สามารถ post ภาพผลงานทั้งหมดของร้านได้
				\item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้
				\item สามารถเพิ่ม แก้ไข  ข้อมูลร้านได้
				\item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้ 
			\end{itemize}
		\item ช่างประจำร้าน
			\begin{itemize}[label={--}]
				\item ลงทะเบียนใช้ web ด้วย Email ได้
				\item สามารถดูตารางการทำงานของตนเองได้
				\item สามารถ post ภาพผลงานของตัวเองได้
				\item สามารถแก้ไขข้อมูลส่วนตัวได้		
			\end{itemize}
		\item ผู้ใช้บริการ
			\begin{itemize}[label={--}]
				\item สามารถลงทะเบียนเข้าสู่ระบบด้วย Email ได้
				\item สามารถค้นหาร้านเสริมสวยได้
				\item สามารถจองคิวของร้านเสริมสวยได้
				\item สามารถดูคิวว่างของร้านเสริมสวยได้
				\item สามารถดูข้อมูลต่างๆของร้านเสริมสวยได้
				\item สามารถดูตำแหน่งของทางร้านได้
				\item สามารถดูผลงานของร้านได้
				\item สามารถเขียนรีวิว ติชม ได้
						
		\end{itemize}
	\end{enumerate}

\subsection{Non-functional Requirements}
		\begin{enumerate}
		\item เว็บแอปพลิเคชัน
		\begin{itemize}[label={--}]
			\item ใช้โปรโตคอล (Protocol) แบบ  Hypertext Transfer Protocol Secure(HTTPS) ในการสื่อสารที่ช่วยรักษาความสมบูรณ์ถูกต้องของข้อมูลผู้ใช้และเก็บข้อมูลไว้เป็นความลับระหว่างคอมพิวเตอร์ของผู้ใช้กับเว็บไซต์ 
			\item รองรับการใช้งานบนเว็บบราวน์เซอร์และสมาร์ทโฟน
		\end{itemize}
	
	\end{enumerate}
	
\section{User Interface Design}
User Interface Design ของระบบการจองคิวร้านเสริมสวย แบ่งเป็น 3 ส่วน มีดังนี้

	\begin{enumerate}
		\item ผู้ใช้บริการ \\ 
		User Interface ผู้ใช้บริการ จะออกแบบให้สะดวกต่อการใช้งาน 
		
			\begin{itemize}
				\item การออกแบบหน้าจอหลัก
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Home}
					\caption{หน้าจอหลัก}
					\label{Fig:Home}
				\end{figure}
				จากภาพที่ \ref{Fig:Home}  แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน  เพื่ออำนวยความสะดวกต่อผู้ใช้งาน ในหน้าหลักได้รวบรวมข้อมูลสรุปของร้านและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูจองคิว รายละเอียดร้านและข้อมูลรีวิว
			
				\item การออกแบบหน้าจอข้อมูลร้าน
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shop}
					\caption{หน้าจอข้อมูลร้าน}
					\label{Fig:Shop}
				\end{figure}
				จากภาพที่ \ref{Fig:Shop}  แสดงหน้าจอข้อมูลรายละเอียดภายในร้าน เพื่ออำนวยความสะดวกต่อผู้ใช้งาน ในรายละเอียดร้านได้รวบรวมข้อมูลรวมถึง การดูรายการ การจองคิว ดูผลงานร้าน ดูผลงานช่าง และดูรีวิว 
				\newpage
				\item การออกแบบหน้าจอการจองคิว
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopgueue}
					\caption{หน้าจอการจองคิว}
					\label{Fig:Shopgueue}
				\end{figure}
				จากภาพที่ \ref{Fig:Shopgueue}  แสดงหน้าจอการจองคิวร้านเสริมสวย เมื่อผู้ใช้กดปุ่มจองคิวในหน้าหลักหรือหน้ารายละเอียดร้าน ระบบจะแสดง dialog การจองคิว ส่วนการจองคิว จะมีข้อมูลวันที่ รายการ ช่าง และเวลา ที่ใช้ในการจองคิว
				\newpage
				\item การออกแบบหน้าจอดูรายการ
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoplist}
					\caption{หน้าจอดูรายการ}
					\label{Fig:Shoplist}
				\end{figure}
				จากภาพที่ \ref{Fig:Shoplist}  แสดงหน้าจอรายการที่ให้บริการประจำร้าน เมื่อผู้ใช้งานกดปุ่มรายการที่หน้ารายละเอียดร้าน ระบบจะแสดง dialog รายการ เพื่อให้ผู้ใช้งานดูรายการประจำร้าน 
				\newpage
					\item การออกแบบหน้าจอเขียนรีวิว
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopreview}
					\caption{หน้าจอเขียนรีวิว}
					\label{Fig:Shopreview}
				\end{figure}
				จากภาพที่ \ref{Fig:Shopreview}  แสดงหน้าจอการเขียนรีวิว เมือ่ผู้ใช้กดปุ่มเขียนรีวิวในหน้ารายละเอียดร้าน ระบบจะสดง dialog เพื่อให้ผู้ใช้งานเขียนรีวิว 
				\newpage
					\item การออกแบบหน้าจอลงทะเบียน
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/register}
					\caption{หน้าจอลงทะเบียน}
					\label{Fig:Register}
				\end{figure}
				จากภาพที่ \ref{Fig:Register}  แสดงหน้าจอการลงทะเบียนของผู้ใช้บริการ เพื่อให้ผู้ใช้ลงทะเบียนขอใช้ระบบ โดยจะมีข้มูล ชื่อ-นามสกุล อีเมลล์ รหัสผ่าน ยืนยันรหัสผ่าน ที่อยู่ และ เบอร์โทร
				\item การออกแบบหน้าจอเข้าสู่ระบบ
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Login}
					\caption{หน้าจอเข้าสู่ระบบ}
					\label{Fig:Login}
				\end{figure}
				จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้ โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ
			\end{itemize}
		\newpage
			\item เจ้าของร้าน \\ 
		User Interface เจ้าของร้าน แสดงดังภาพ \ref{Fig:Shopprofile} - \ref{Fig:Shoppic}
		
		\begin{itemize}
			\item การออกแบบหน้าจอโปรไฟล์ร้าน
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopprofile}
				\caption{หน้าจอโปรไฟล์ร้าน}
				\label{Fig:Shopprofile}
			\end{figure}
			จากภาพที่ \ref{Fig:Shopprofile}  แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน  เมื่อเจ้าของร้านเข้าสู่ระบบ ระบบจะแสดงหน้าโปรไฟล์ เพื่อให้เจ้าของร้านดูข้อมูลโปรไฟล์ และอัพโหลดรูปภาพ
			\newpage
			\item การออกแบบหน้าจอเพิ่มข้อมูลร้าน
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/datashop}
				\caption{หน้าจอเพิ่มข้อมูลร้าน}
				\label{Fig:Datashop}
			\end{figure}
			จากภาพที่ \ref{Fig:Datashop}  แสดงหน้าจอเพิ่มข้อมูลร้าน เมื่อเจ้าของร้านกดเมนูข้อมูลร้าน ระบบจะแสดงหน้าข้อมูลร้าน เพื่อให้เจ้าของร้านทำการดูข้อมูลร้าน เพิ่มข้อมูลร้าน แก้ไขข้อมูลร้าน
			\newpage
			\item การออกแบบหน้าจอเพิ่มรายการ
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/list}
				\caption{หน้าจอเพิ่มรายการ}
				\label{Fig:List}
			\end{figure}
			จากภาพที่ \ref{Fig:List}  แสดงหน้าจอเพิ่มข้อมูลรายการของร้าน เมื่อเจ้าของร้านกดเมนูข้อมูลรายการ ระบบจะแสดงหน้าข้อมูลรายการ เพื่อให้เจ้าของร้านทำการดูข้อมูลรายการ เพิ่มข้อมูลรายการ แก้ไขข้อมูลรายการ และลบข้อมูลรายการ
			
			\item การออกแบบหน้าจอเพิ่มข้อมูลช่าง
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/qely}
				\caption{หน้าจอเพิ่มข้อมูลช่าง}
				\label{Fig:Qely}
			\end{figure}
			\newpage
			จากภาพที่ \ref{Fig:Qely}  แสดงหน้าจอข้อมูลช่าง เจ้าของร้านกดที่เมนูข้อมูลช่าง ระบบจะแสดงหน้าข้อมูลช่าง เพื่อให้เจ้าของร้านดูข้อมูลช่าง เพิ่มข้อมูลช่าง และลบข้อมูลช่าง
			\item การออกแบบหน้าจอดูการจองคิว
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopqely}
				\caption{หน้าจอดูการจองคิว}
				\label{Fig:ShopQely}
			\end{figure}
			จากภาพที่ \ref{Fig:ShopQely}  แสดงหน้าจอการจองคิว เมื่อเจ้าของร้านกดที่เมนูดูการจองคิว ระบบจะแสดงหน้าข้อมูลการจองคิว
			\item การออกแบบหน้าจอเพิ่มรูปภาพ
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoppic}
				\caption{หน้าจอเพิ่มรูปภาพ}
				\label{Fig:Shoppic}
			\end{figure}
			จากภาพที่ \ref{Fig:Shoppic}  แสดงหน้าจอเพิ่มรูปภาพ เมื่อเจ้าของร้านกดเมนูเพิ่มรูปภาพ ระบบจะแสดงหน้าเพิ่อมรูปภาพ เพื่อให้เจ้าของร้านเพิ่มรูปภาพและลบรูอภาพ
		
		\end{itemize}
		
	\item เจ้าของร้าน \\ 
	User Interface เจ้าของช่าง แสดงดังภาพ \ref{Fig:Bprofile} - \ref{Fig:Bpic}
	
	\begin{itemize}
		\item การออกแบบหน้าจอโปรไฟล์ช่าง
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bprofile}
			\caption{หน้าจอโปรไฟล์ช่าง}
			\label{Fig:Bprofile}
		\end{figure}
		จากภาพที่ \ref{Fig:Bprofile}  แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน  เมื่อช่างเข้าสู่ระบบ ระบบจะแสดงหน้าโปรไฟล์ เพื่อให้ช่างดูข้อมูลโปรไฟล์ และอัพโหลดรูปภาพ
		\newpage
		\item การออกแบบหน้าจอดูตารางงาน
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/work}
			\caption{หน้าจอดดูตารางงาน}
			\label{Fig:Work}
		\end{figure}
		จากภาพที่ \ref{Fig:Work} แสดงหน้าจอตารางงาน เมื่อช่างกดเมนูตารางงาน ระบบจะแสดงหน้าตารางงาน เพื่อให้ช่างดูข้อมูลตารางงาน
		
		\item การออกแบบหน้าจอเพิ่มรูปภาพผลงานช่าง
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bpic}
			\caption{หน้าจอเพิ่มรูปภาพผลงานช่าง}
			\label{Fig:Bpic}
		\end{figure}

		จากภาพที่ \ref{Fig:Bpic} แสดงหน้าจอเพิ่มรูปภาพ เมื่อช่างกดเมนูภาพผลงาน ระบบจะแสดงหน้าเพิ่อมรูปภาพ เพื่อให้ช่างเพิ่มรูปภาพและลบรูอภาพ
		\end{itemize}
	\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=1.05\textwidth]{Figures/3/Usecase}
	\caption{Use Case Diagram ของระบบ จองคิวร้านเสริมสวย}
		\label{Fig:usecase}
	\end{figure}
	
	\begin{table}[H]
		\centering
		\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase}}
		\label{tab:usecase}
		\resizebox{\totalheight}{!}{\textwidth}{%
			\begin{tabular}{|c|p{8cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
				ดูข้อมูลต่างๆของร้านเสริมสวย & ผู้ใช้บริการสามารถดูข้อมูลได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
				ดูตำแหน่งของร้านเสริมสวย & ผู้ใช้บริการสามารถดูตำแหน่งร้านได้ โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
				ค้นหาร้านเสริมสวย & ผู้ใช้งานทั่วไปสามารถค้นหาร้านได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
				ดูผลงานของร้านเสริมสวย & ผู้ใช้บริการสามารถดูผลงานของร้านเสริมสวยได้โดยไม่ต้องทำการเข้าสู่ระบบก่อน\\ \hline
				ดูคิวว่างของร้านเสริมสวย& ผู้ใช้บริการสามารถดูคิวว่างของร้านเสริมสวยได้โดยไม่ต้องทำการเข้าสู่ระบบก่อน \\ \hline
				ดูรีวิว & ผู้ใช้บริการสามารถดูรีวิวได้โดยไม่จำเป็นต้องเข้าสู่ระบบก่อน \\ \hline
				เขียนรีวิวติชม & ผู้ใช้บริการสามารถเขียนรีวิวติชมได้โดยจำเป็นต้องเข้าสู่ระบบก่อน \\ \hline
				จองคิวร้านเสริมสวย & ผุ้ใช้บริการสามารถจองคิวร้านเสริมสวยได้โดยจำเป็นต้องเข้าสู่ระบบก่อน และจำเป็นต้อง เลือก วันที่ รายการ ช่าง เวลา \\ \hline
				เพิ่ม แก้ไข และลบรายการ & ใช้เจ้าของร้านเพื่อ เพิ่ม แก้ไขหรือลบข้อมูลรายการ \\ \hline
				post ภาพผลงานทั้งหมดของร้านเสริมสวย & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม post รูปภาพผลงานของร้าน\\ \hline
				เพิ่มแก้ไขข้อมูลร้าน & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม แก้ไขหรือลบข้อมูลร้าน \\ \hline
				
			
				
			\end{tabular}%
		}
	\end{table}
		\begin{table}[H]
			\centering
			\caption{อธิบาย Use Case หน้าที่ของระบบ(ต่อ) ในภาพที่ \ref{Fig:usecase}}
			\label{tab:usecase}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|c|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
				ดูการจองคิว & ใช้สำหรับเจ้าของร้านเพื่อ ดูคิวจองที่ผู้ใช้บริการได้ทำการจองคิว \\ \hline
				เพิ่มข้อมูลช่าง & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม ข้อมูลช่าง \\ \hline
				แก้ไขข้อมูล & ใช้สำหรับช่างเพื่อ  แก้ไขข้อมูลส่วนตัว \\ \hline
				ดูตารางงาน & ใช้สำหรับช่างเพื่อ ดูตารางงาน \\ \hline
				post ภาพผลงานของตัวเอง & ใช้สำหรับช่างเพื่อ post ภาพผลงาน \\ \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
			\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 : ผู้ใช้บริการสามารถดูตำแหน่งร้านเสริมสวย ไม่จำเป็นต้องเข้าสู่ระบบ} \\ \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{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 : ดูรีวิวได้โดยไม่จำเป็นต้องเข้าสู่ระบบ} \\ \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 : เขียนรีวิวติชมได้ต้องเข้าสู่ระบบ} \\ \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 : เมื่อนักศึกษาต้องการใช้งานระบบทั้งหมดของกองทุนจำเป็นต้องเข้าสู่ระบบก่อน หากยังไม่มีบัญชีสามารถสมัครได้โดยต้องกรอกข้อมูลอีเมลและรหัสผ่าน} \\ \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 : เมื่อนักศึกษาต้องการใช้งานระบบทั้งหมดของกองทุนจำเป็นต้องเข้าสู่ระบบก่อนโดยต้องกรอกข้อมูลอีเมลและรหัสผ่าน} \\ \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 : เจ้าของร้าน เพิ่ม แก้ไขหรือลบรายการในระบบได้
			    			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบรายการได้} \\ \hline
			    		\end{tabular}%
			    	}
		  \end{table}	
		    \begin{table}[H]
		    	\centering
		    	\caption{Use Case post ภาพผลงานทั้งหมดของร้าน}
		    	\label{tab:usecase}
		    	\resizebox{\totalheight}{!}{\textwidth}{%
		    		\begin{tabular}{|c|p{10cm}|}
		    			\hline
		    			\multicolumn{1}{|c|}{\textbf{Use Case Title : post ภาพผลงานทั้งหมดของร้าน}} & \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 : เจ้าของร้าน post ภาพผลงานทั้งหมดของร้านได้} \\ \hline
		    			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ post ภาพผลงานทั้งหมดของร้านได้} \\ \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 : 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
		   		\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 : 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}{!}{\textwidth}{%
		  		\begin{tabular}{|c|p{10cm}|}
		  			\hline
		  			\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่มข้อมูลช่าง}} & \multicolumn{1}{c|}{\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}{!}{\textwidth}{%
	  		\begin{tabular}{|c|p{10cm}|}
	  			\hline
	  			\multicolumn{1}{|c|}{\textbf{Use Case Title : แก้ไขข้อมูล}} & \multicolumn{1}{c|}{\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}{!}{\textwidth}{%
	  			\begin{tabular}{|c|p{10cm}|}
	  				\hline
	  				\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูตารางงาน}} & \multicolumn{1}{c|}{\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 post ภาพผลงานของตัวเอง}
  		\label{tab:usecase}
  		\resizebox{\totalheight}{!}{\textwidth}{%
  			\begin{tabular}{|c|p{10cm}|}
  				\hline
  				\multicolumn{1}{|c|}{\textbf{Use Case Title : post ภาพผลงานของตัวเอง}} & \multicolumn{1}{c|}{\textbf{Use case Id : 18 }} \\ \hline
  				\multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
  				\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
  				\multicolumn{2}{|p{\linewidth}|}{Main Flow : post ภาพผลงานของตัวเองได้} \\ \hline
  				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถpost ภาพผลงานของตัวเองได้} \\ \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:classD} ดังต่อไปนี้

\begin{sidewaysfigure}
	\begin{figure}[H]
		\includegraphics[width=1.0\columnwidth]{Figures/3/Class/ClassDiagram}
		\caption{Class Diagram ของแอปพลิเคชันระบบจองคิวร้านเสริมสวย}
		\label{Fig:classD}
	\end{figure}
\end{sidewaysfigure}


	% TABLE of class
\newpage	
	จากรูปภาพที่ \ref{Fig:classD} สามารถอธิบายแผนภาพ 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}{Server}
			& \setstretch{1.5} {คลาส Server จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เป็ดเว็บแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสนี้คือ เพื่อใช้ในการเชื่อมต่อ api ระหว่างคลาสอื่นๆ กับฐานข้อมูล} \\ \hline
			\raisebox{-\totalheight}{Register}
			& \setstretch{1.5} {คลาส Register จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เปิดเว็บแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสคือ เพื่อใช้ในการลงทะเบียนขอใช้เว็บแอปพลิเคชัน} \\ \hline
			\raisebox{-\totalheight}{Login}
			& \setstretch{1.5} {คลาส Login เป็นคลาสที่ใช้เพื่อให้ผู้ใช้ที่ได้ลงทะเบียนกับระบบเข้าสู่ระบบเพื่อใช้งานบริการต่าง ๆ จากระบบ} \\ \hline
			\raisebox{-\totalheight}{Beautician}
			& \setstretch{1.5} {คลาส Beautician เป็นคลาสที่ใช้เพิ่มข้อมูลช่าง} \\ \hline
			\raisebox{-\totalheight}{Shop}
			& \setstretch{1.5} {คลาส Shop  เป็นคลาสที่ใช้จัดการการทำงาน Shop} \\ \hline
			\raisebox{-\totalheight}{List}
			& \setstretch{1.5} {คลาส List เป็นคลาสที่ใช้จัดการการทำงานของรายการ} \\ \hline
			\raisebox{-\totalheight}{Review}
			& \setstretch{1.5} {คลาส Review เป็นคลาสที่ใช้จัดการการรีวิวของผู้ใช้งาน} \\ \hline
			\raisebox{-\totalheight}{Booking}
			& \setstretch{1.5} {คลาส Booking เป็นคลาสที่ใช้เก็บข้อมูลการจองคิว} \\ \hline
			\raisebox{-\totalheight}{Bookingcontroller}
			& \setstretch{1.5} {คลาส Bookingcontroller เป็นคลาสที่ใช้จัดการการจองคิว} \\ \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}
%
%	Sequence Diagram ที่ใช้อธิบายการทำงานของระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยสศาสตร์ มหาวิทยาลัยอุบลราชธานี มีรายละเอียดดังต่อไปนี้

\newpage
	
	\begin{figure}[H]
		\centering
		\includegraphics[width=1.0\columnwidth]
		{Figures/3/Sequence/Register}
		\caption{Sequence Diagram ลงทะเบียน}
		\label{Fig:Sequence-register}
	\end{figure}
\newpage

	จากภาพที่ \ref{Fig:Sequence-register} สามารถอธิบายแผนภาพ Sequence Diagram การลงทะเบียน ได้ดังนี้ เมื่อ
	ผู้ใช้กดปุ่ม register คลาส Register แสดงหน้าลงทะเบียน เมื่อผู้ใช้กรอกข้อมูลระบบจะเรียกใช้เมธอด  onRegister() ที่คลาส Register เมื่อ ข้อมูลการลงทะเบียน ถูกติดตั้งบน api:Server เมธอด register จะทำการเพิ่มข้อมูลการลงทะเบียนลงในฐานข้อมูล และนำข้อมูลที่ได้เพิ่มลงมาเก็บในรูปแบบ response ที่คลาส api:Server โดยมีการสืบค้นข้อมูลเพื่อตรวจสอบการลงทะเบียนที่คลาส MySQL และเมื่อข้อมูลที่เพิ่มมีการลงทะเบียนแล้วจะแสดง error email ถูกใช้งานแล้ว แต่ถ้าลงทะเบียนสำเร็จจะส่งข้อมูลมาที่คลาส Register และคลาส Register จะส่งข้อมุลการลงทะเบียนแจ้งผูใช้ว่าลงทะเบียนสำเร็จและจะแสดงหน้าหลัก

	
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\columnwidth]
		{Figures/3/Sequence/Login}
		\caption{Sequence Diagram เข้าสู่ระบบ}
		\label{Fig:Sequence-login}
	\end{figure}

	\newpage
	จากภาพที่ \ref{Fig:Sequence-login} สามารถอธิบายแผนภาพ Sequence Diagram การเข้าสู่ระบบ ได้ดังนี้ เมื่อ
	เมื่อผู้ใช้กดปุ่ม Login ที่คลาส Login ระบบจะแสดงหน้า login ผู้ใช้ทำการกรอก email และ password ที่คลาส Login เมธอด onLogin() จะทำการเพิ่มข้อมูล   Login โดยคลาส api:Server เมธอด login จะทำการสืบค้นข้อมูลจากฐานข้อมูลมาตรวจสอบสถานะการเข้าสู่ระบบ api:Server ทำการส่งข้อมูลการเข้าสู่ระบบไปยังคลาส Login และคลาส Login ส่งข้อมูลการเข้าสู้ระบบไปยังผู้ใช้แจ้งว่าเข้าสู่ระบบสำเร็จ
	\newpage
	
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\columnwidth]
		{Figures/3/Sequence/Review}
		\caption{Sequence Diagram การรีวิว}
		\label{Fig:Sequence-review}
	\end{figure}


	จากภาพที่ \ref{Fig:Sequence-review} สามารถอธิบายแผนภาพ Sequence Diagram การรีวิว ได้ดังนี้ เมื่อผู้ใช้เปิดหน้า ShopPage ระบบจะเรียกใช้เมธอด componentDidMount() ที่คลาส Review ระบบจะแสดงข้อมูลการรีวิวออกทางหน้าจอ  ผู้ใช้กดปุ่มเขียนรีวิวระบบจะแสดง model กรอกข้อมูลรีวิว และเมื่อผู้ใช้งานเลือกหัวข้อรีวิว กรอกข้อความรีวิว ให้คะแนนรีวิว และกด submit ระบบจะเรียกใช้เมธอด onAddReview() ที่คลาส Review โดยระบบจะส่งข้อมูลการรีวิวในรูปแบบ post ไปที่คลาส api:Server  เมธอด review ทำการ insert ข้อมูลรีวิวลงฐานข้อมูล และระบบจะส่งสถานะการรีวิวมาที่คลาส api:Server และคลาส api:Server ทำการส่งสถานะการรีวิวสำเร็จมาที่คลาส Review ระบบจะแสดงข้อมูลการรีวิวออกทางหน้าจอ 
	\begin{sidewaysfigure}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\columnwidth]
		{Figures/3/Sequence/addBeautician}
		\caption{Sequence Diagram การเพิ่มข้อมูลช่าง}
		\label{Fig:Sequence-addBeautician}
	\end{figure}
	\end{sidewaysfigure}
	\newpage
	จากภาพที่ \ref{Fig:Sequence-addBeautician} สามารถอธิบายแผนภาพ Sequence Diagram การเพิ่มข้อมูลช่าง ได้ดังนี้ เมื่อเจ้าของร้านกดเครื่องหมายบอกระบบจะทำการแสดง model เพื่อกรอกข้อมูลเจ้าของร้านทำการกรอกข้อมูลและกดยืนยัน ระบบจะเรียกใช้เมธอด onAddBeautician ที่คลาส Beautician ระบบจะทำการส่งข้อมูลการลงทะเบียนช่างไปยังคลาส Register
	โดยใช้เมธอด Onregister() ที่คลาส  Register ส่งข้อมูลการลงทะเบียนระบบจะเรียกใช้เมธอด register ที่คลาส api:Server ทำการเชื่อม api insert ข้อมูลลงฐานข้อมูล ฐานข้อมูลจะส่งสถานะการลงทะเบียนมาที่คลาส api:Server ระบบจะแสดงสถานะการลงทะเบียนมายังคลาส Register และจะแสดงออกทางหน้าจอไปยังเจ้าของร้าน
	
	\begin{sidewaysfigure}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.99\columnwidth]
		{Figures/3/Sequence/List}
		\caption{Sequence Diagram การจัดการรายการ}
		\label{Fig:Sequence-list}
	\end{figure}
	\end{sidewaysfigure}
\newpage
	จากภาพที่ \ref{Fig:Sequence-list} สามารถอธิบายแผนภาพ Sequence Diagram การจัดการรายการ ได้ดังนี้ เมื่อเจ้าของร้านทำการ login เสร็จ
	 เจ้าของร้านกดปุ่มบวก ระบบจะแสดงช่องกรอกข้อมูล เจ้าของร้านทำการกรอกข้อมูลแล้วกดยืนยัน 
	 ระบบจะทำการเรียกใช้เมธอด onAddList() ที่คลาส List  ระบบจะทำการส่งข้อมูลแบบ post ไปยังคลาส api:Server ด้วยเมธอด list จะทำการ insert ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนเพิ่มขข้อมูลสำเร็จและแสดงข้อมูลออกทางหน้าจอ 
	 
	 เมื่อเจ้าของร้านกดปุ่มแก้ไข กรอกข้อมูลที่ต้องการแก้ไขเสร็จแล้วกดเครื่องหมายถูก ระบบจะทำการเรียกใช้เมธอด updateList() ที่คลาส List ระบบจะทำการส่งข้อมูลแบบ put ไปยังคลาส api:Server ด้วยเมธอด list จะทำการ update ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนแก้ไขข้อมูลสำเร็จและแสดงข้อมูลแก้ไขออกทางหน้าจอ
	 
	 เมื่อเจ้าของร้านกดปุ่มลบ ระบบจะทำการเรียกใช้เมธอด ondeleteList() ที่คลาส List ระบบจะทำการส่งข้อมูลแบบ delete ไปยังคลาส api:Server ด้วยเมธอด list จะทำการ delete จากฐานข้อมูล ระบบจะทำการแจ้งเตือนลบสำเร็จออกทางหน้าจอง
	
	\begin{sidewaysfigure}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\columnwidth]
		{Figures/3/Sequence/Shop}
		\caption{Sequence Diagram การจัดการข้อมูลร้าน }
		\label{Fig:Sequence-shop}
	\end{figure}
\end{sidewaysfigure}
	\newpage
จากภาพที่ \ref{Fig:Sequence-shop} สามารถอธิบายแผนภาพ Sequence Diagram การจัดการข้อมูลร้าน ได้ดังนี้ เเมื่อเจ้าของร้านทำการ login เสร็จ เจ้าของร้านทำการกรอกข้อมูลแล้วกดยืนยัน 
ระบบจะทำการเรียกใช้เมธอด onAddShop() ที่คลาส Shop ระบบจะทำการส่งข้อมูลแบบ post ไปยังคลาส api:Server ด้วยเมธอด shop จะทำการ insert ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนเพิ่มขข้อมูลสำเร็จและแสดงข้อมูลออกทางหน้าจอ 

เมื่อต้องการแก้ไขให้กรอกข้อมูลและกดยืนยัน ระบบจะทำการเรียกใช้เมธอด updateShop() ที่คลาส Shop ระบบจะทำการส่งข้อมูลแบบ put ไปยังคลาส api:Server ด้วยเมธอด shop จะทำการ update ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนแก้ไขข้อมูลสำเร็จและแสดงข้อมูลแก้ไขออกทางหน้าจอ

	\begin{sidewaysfigure}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.8\columnwidth]
		{Figures/3/Sequence/Booking}
		\caption{Sequence Diagram การจองคิว}
		\label{Fig:Sequence-booking}
	\end{figure}
\end{sidewaysfigure}
	\newpage
จากภาพที่ \ref{Fig:Sequence-booking} สามารถอธิบายแผนภาพ Sequence Diagram การจองคิว ได้ดังนี้ เมื่อผู้ใช้ทำการเข้าสู่ระบบสำเร็จ ทำการเลือกร้านที่ต้องการจองคิวที่คลาส Shop ระบบจะทำการแสดง model เพื่อจองคิว ผู้ใช้เรียกวันที่ รายการ ข้อมูลช่าง เวลา และกดยืนยัน ระบบจะเรียกใช้เมธอด addBooking() ที่คลาส BookingController เพิ่มข้อมูลวันที่ รายการ ข้อมูลช่าง เวลา แบบเมธอด post ในคลาส api:Server ด้วย เมธอด booking ทำการ insert ข้อมูลการจองคิวลงฐานข้อมูล ระบบจะทำการเช็คการจองคิวที่คลาส api:Server จะทำการตรวสอบข้อมูลการจองคิวกับฐานข้อมูลและส่งสถานะกับมาที่คลาส api:Server เพื่อแจ้งเตือนสถานะการจองคิว ถ้าการจองคิวไม่สำเร็จระบบจะแจ้งเตือนว่ายังไม่เข้าสู่ระบบและจะแสดงหน้าเข้าสู่ระบบ และเมื่อจองคิวสำเร็จระบบจะแจ้งเตือนว่าจองคิวสำเร็จระบบจะแสดงข้อมูลการจองคิวออกทางหน้าจอ 
	 
	\newpage
\section{ER-Diagram}
แผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล (Entity Relationship Diagram : ERD) คือ แผนภาพที่ใช้เป็นเครื่องมือสําหรับจําลองข้อมูล ซึ่งจะประกอบไปด้วย เอนทิตี (Entity) แอททริบิว (Attribute) และความสัมพันธ์ (Relationship) ซึ่งการออกแบบฐานข้อมูลของเว็บบล็อกสำหรับวิจารณ์ภาพยนตร์ โดยใช้รูปแบบ ERD Chen Model ซึ่งมีสัญลักษณ์ดังตารางที่ \ref{tab:ER-Diagram}
\newpage
\begin{sidewaysfigure}
	\begin{figure}[H]
		\centering
		\includegraphics[width=1.0\columnwidth]
		{Figures/3/DB/ER}
		\caption{ER Diagram ระบบจองคิวร้านเสริมสวย}
		\label{Fig:data}
	\end{figure}
	\end {sidewaysfigure}

\begin{table}[H]
	\caption{สัญลักษณ์ของ ER-Diagram}
	\label{tab:ER-Diagram}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=2cm]{Figures/table/ER/1}}
		& \setstretch{1.5} {การใช้งาน ใช้แสดงเอนทิตี้ เอนทิตี้ คือ กลุ่มของข้อมูลที่เป็นเรื่องเดียวกันที่ เกี่ยวข้องกัน} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[height=2cm]{Figures/table/ER/2}}
		& \setstretch{1.5} {เอนทิตี้อ่อนแอ (Weak entity) คือ เอนทิตี้ที่มีการคงอยู่เกี่ยวข้อง กับเอนทิตี้อื่นในระบบฐานข้อมูล} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=3cm]{Figures/table/ER/3}}
		& \setstretch{1.5} {เส้นความสัมพันธ์ (Relationship line ) คือ เส้นเชื่อมความสัมพันธ์ ระหว่าง เอนทิตี้} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/4}}
		& \setstretch{1.5} {ความสัมพันธ์ ใช้แสดงความสัมพันธ์ระหว่าง 2 เอนทิตี้ขึ้นไป} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/5}}
		& \setstretch{1.5} {Generalization แอททริบิว ใช้แสดง แอททริบิว ของ เอนทิตี้} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/6}}
		& \setstretch{1.5} {คีย์หลัก (Key Attribute) ใช้แสดงคีย์หลัก} \\ \hline
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/7}}
		& \setstretch{1.5} {Multi-Value Attribute แอดที่นิ้วที่มีค่าของข้อมูลในแต่ละสมาชิกของเอนทิตี้ได้หลายค่า} \\ \hline		
		\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/ER/8}}
		& \setstretch{1.5} {ความสัมพันธ์แบบหนึ่งต่อหนึ่ง} \\ \hline		
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/9}}
		& \setstretch{1.5} {ความสัมพันธ์แบบหนึ่งต่อกลุ่ม} \\ \hline		
		\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/10}}
		& \setstretch{1.5} {ความสัมพันธ์แบบกลุ่มต่อกลุ่ม} \\ \hline		
	\end{tabular}
\end{table}



\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Entity ของ ER-Diagram ระบบจองคิวร้านเสริมสวย}
	\label{tab:แสดงรายละเอียด Entity}
	\begin{tabular}{|p{3cm}|p{3cm}|p{4cm}|}
		\hline
		\multicolumn{1}{|c|}{\centering{ชื่อตาราง(ภาษาอังกฤษ)}} & \multicolumn{1}{c|}{\centering {ชื่อตาราง(ภาษาไทย)}} & \multicolumn{1}{c|}{\centering {อธิบาย}} \\ \hline
		Users & ข้อมูลผู้ใช้ & ตารางเก็บข้อมูลผู้ใช้งาน \\ \hline
		shops &  ข้อมูลร้าน & ตารางเก็บข้อมูลร้าน \\ \hline
		Lists & ข้อมูลรายการ & ตารางเก็บข้อมูลรายการ \\ \hline
		Bookings & ข้อมูลการจอง & ตารางเก็บข้อมูการจองคิว \\ \hline
		Beauticians & ข้อมูลช่าง & ตารางเก็บข้อมูช่าง \\ \hline
		Reviews & ข้อมูลรีวิว & ตารางเก็บข้อมูลรีวิว \\ \hline
		Userimages & ข้อมูลรูปภาพผู้ใช้ & ตารางเก็บข้อมูลรูปภาพผู้ใช้งาน \\ \hline
		Shopimages & ข้อมูลรูปภาพร้าน & ตารางเก็บข้อมูลรูปภาพร้าน \\ \hline
		Workimages & ข้อมูลรูปภาพผลงานร้าน & ตารางเก็บข้อมูลรูปภาพผลงานร้าน \\ \hline
		Beauticianimages & ข้อมูลรูปภาพผลงานช่าง & ตารางเก็บข้อมูลรูปภาพผลงานช่าง  \\ \hline
\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Users}
	\label{tab:แสดงรายละเอียด users}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสผู้ใช้งาน & PK & \\ \hline
		name & varchar(50) & ชื่อ & & \\ \hline
		email & varchar(255)  & อีเมลล์ & & \\ \hline
		password & varchar(255)  &  รหัสผ่าน & &\\ \hline
		address & text &  ที่อยู่ & &\\ \hline
		tel & int(11) &  เบอร์โทร & &\\ \hline
		role & int (11)& บทบาท & &\\ \hline
	\end{tabular}
\end{table}

\newpage
\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Shops}
	\label{tab:แสดงรายละเอียดข้อมูล Shops}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสร้าน & PK & \\ \hline
		name & varchar(50) & ชื่อ & & \\ \hline
		nameeng & varchar(50)  & ชื่อภาษาอังกฤษ & & \\ \hline
		timeopen & time  &  เวลาเปิด & &\\ \hline
		timeclose & time &  เวลาปิด & &\\ \hline
		address & text &  ที่อยู่ & &\\ \hline
		tel & varchar(20)& เบอร์โทร & &\\ \hline
		detail & text & รายละเอียด & & \\ \hline
		lat & double  & ตำแหน่ง x & & \\ \hline
		lng& double  &  ตำแหน่ง y & &\\ \hline
		facebook & text &  เฟสบุ๊ค & &\\ \hline
		userId & int(11) &  รหัสผู้ใช้ &FK & Users\\ \hline
		type & text & บทบาท & &\\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Lists}
	\label{tab:แสดงรายละเอียดข้อมูล Lists}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสรายการ & PK & \\ \hline
		name & varchar(50) & ชื่อ & & \\ \hline
		price & int(11) & ราคา & & \\ \hline
		time & int(11)  &  เวลา & &\\ \hline
		shop & int(11) &  รหัสร้าน &FK &Shops\\ \hline
		userId & int(11) &  รหัสผู้ใช้งาน &FK &Users\\ \hline
		
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Bookings}
	\label{tab:แสดงรายละเอียดข้อมูล Bookings}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสการจอง & PK & \\ \hline
		name & varchar(50) & ชื่อ & & \\ \hline
		shop & int(11)  & รหัสร้าน & FK&Shops \\ \hline
		list & int(11)  &  รหัสรายการ &FK &Lists\\ \hline
		beautician & int(11) &  รหัสช่าง &FK &Beauticians\\ \hline
		date & int(11) &  วันที่ & &\\ \hline
	    time & time & เวลา & &\\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Beauticians}
	\label{tab:แสดงรายละเอียดข้อมูล Beauticians}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสช่าง & PK & \\ \hline
		name & varchar(50) & ชื่อ & & \\ \hline
		userID & int(11) & รหัสผู้ใช้งาน & FK&Users\\ \hline
		shopID & int (11)& รหัสร้าน &FK &Shops\\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Reviews}
	\label{tab:แสดงรายละเอียดข้อมูล Reviews}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		id & int(11) &  รหัสรีวิว & PK & \\ \hline
		topic & text & หัวข้อรีวิว & & \\ \hline
		message &text  & ข้อความรีวิว & & \\ \hline
		point & double  &  คะแนน & &\\ \hline
		shop & int(11) &  รหัสร้าน &FK &Shops\\ \hline
		userID & int(11) &  เบอร์โทร & FK&Users\\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Userimages}
	\label{tab:แสดงรายละเอียดข้อมูล Userimages}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		image_id & int(11) &  รหัสรูปภาพ & PK & \\ \hline
		user_id & int(11) & รหัสผู้ใช้งาน & PK& \\ \hline
		image & longblob  & รูปภาพผู้ใช้งาน & & \\ \hline
		type& varchar(50)  &  ประเภทรูปภาพ & &\\ \hline
	
	\end{tabular}
\end{table}
\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Shopimages}
	\label{tab:แสดงรายละเอียดข้อมูล Shopimages}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		image_id & int(11) &  รหัสรูปภาพ & PK & \\ \hline
		shop_id & int(11) & รหัสร้าน & PK& \\ \hline
		image & longblob  & รูปภาพร้าน & & \\ \hline
		type& varchar(50)  &  ประเภทรูปภาพ & &\\ \hline
	\end{tabular}
\end{table}
\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Workimages}
	\label{tab:แสดงรายละเอียดข้อมูล Workimages}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		image_id & int(11) &  รหัสรูปภาพ & PK & \\ \hline
		shop_id & int(11) & รหัสร้าน & PK& \\ \hline
		image & longblob  & รูปภาพผลงานร้าน & & \\ \hline
		type& varchar(50)  &  ประเภทรูปภาพ & &\\ \hline
	\end{tabular}
\end{table}

\begin{table}[H]
	\centering
	\caption{แสดงรายละเอียด Attribute ของ Entity Beauticianimages}
	\label{tab:แสดงรายละเอียดข้อมูล Beauticianimages}
	\begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
		\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
		image_id & int(11) &  รหัสรูปภาพ & PK & \\ \hline
		beautician_id & int(11) & รหัสช่าง & PK& \\ \hline
		image & longblob  & รูปภาพผลงานช่าง & & \\ \hline
		type& varchar(50)  &  ประเภทรูปภาพ & &\\ \hline
	\end{tabular}
\end{table}