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

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


   \begin{figure}[H]
	\centering
	\includegraphics[width=\textwidth]{Figures/3/architecture/tensorflow}
	
	\caption{การทำงานในส่วนของการ train model และ predict}
	\label{Fig:3-tensorflow}
\end{figure}

\newpage
\section{System Requirements}
\subsection{ความต้องการหลักของโปรแกรม (Functional Requirements)}
	ระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี แบ่งความสามารถของระบบตามประเภทของผู้ใช้งานดังนี้
	\begin{enumerate}
		\item ผู้ใช้งานทั่วไป
			\begin{itemize}[label={--}]
				\item สามารถสมัครสมาชิกและเข้าสู่ระบบได้
				\item สามารถค้นหาชื่อสถานที่ท่องเที่ยว ร้านอาหาร และที่พักได้
				\item สามารถดูผลลัพธ์การจัดอันดับสถานที่ท่องเที่ยว ร้านอาหาร และที่พักได้
				\item สามารถดูข้อมูลรายละเอียดของสถานทีท่องเที่ยว ร้านอาหาร และที่พักได้
				\item สามารถเขียนรีวิวให้คะแนนสถานที่ได้
				\item สามารถทำแบบประเมินเพื่อวิเคราะห์หมวดท่องเที่ยวที่เหมาะสมกับผู้ใช้ได้
				\item สามารถเพิ่มข้อมูลสถานที่ได้
				\item สามารถแจ้งแก้ไขข้อมูลสถานที่
			\end{itemize}
		\item ผู้ดูแลระบบ
			\begin{itemize}[label={--}]
				\item สามารถเข้าสู่ระบบได้
				\item สามารถเพิ่มข้อมูลสถานที่ท่องเที่ยว ร้านอาหารและที่พักได้
				\item สามารถแก้ไขข้อมูลสถานที่ท่องเที่ยว ร้านอาหารและที่พักได้
				\item สามารถลบข้อมูลสถานที่ท่องเที่ยว ร้านอาหารและที่พักได้
				\item สามารถสั่ง Train Model ได้	
			\end{itemize}
	\end{enumerate}

\subsection{ความต้องการด้านคุณภาพ (Non-functional Requirements)}
		\begin{itemize}[label={--}]
			\item ต้องเชื่อมต่ออินเตอร์เน็ตเพื่อใช้งานเว็บแอปพลิเคชัน
			\item สนับสนุนการแสดงผลในหน้าจอคอมพิวเตอร์เท่านั้น
		\end{itemize}
	\newpage
\section{การออกแบบส่วนติดต่อกับผู้ใช้ (User Interface Design)}
ในการออกแบบแบ่งการออกเป็น 2 ส่วนคือ ส่วนของผู้ใช้งาน และส่วนของผู้ดูแลระบบ
\subsection{ส่วนของผู้ใช้งาน}
โดยประกอบด้วยส่วนการออกแบบหน้าจอทำงานต่างๆดังนี้
	\begin{enumerate}
		\item การออกแบบหน้าสมัครสมาชิก \\ 
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/register}
				
				\caption{หน้าสมัครสมาชิก}
				\label{Fig:register}
			\end{figure}
			จากภาพที่ \ref{Fig:register} การออกแบบหน้าสมัครสมาชิก หากผู้ใช้ยังไม่มีบัญชีในระบบผู้ใช้งานสามารถทำการสมัครสมาชิกเพื่อเข้าใช้งานระบบได้จากหน้าสมัครสมาชิก โดยผู้ใช้จำเป็นต้องกรอกข้อมูลให้ครบก่อนกดปุ่มสมัครสมาชิก
			\newpage
			\item การออกแบบหน้าจอเข้าสู่ระบบ
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/login}
					
					\caption{หน้าเข้าสู่ระบบ}
					\label{Fig:login}
				\end{figure}
				จากภาพที่ \ref{Fig:login} แสดงหน้าจอเข้าสู่ระบบเมื่อผู้ใช้ยังไม่ได้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลชื่อผู้ใช้และรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ ซึ่งการเข้าสู่ระบบจะทำเพียงครั้งเดียวเท่านั้น เมื่อผู้ใช้เปิดการทำงานเว็บแอปพลิเคชั่นในครั้งถัดไประบบจะระบุข้อมูลของผู้ใช้งานอัตโนมัติ
				\newpage
				\item การออกแบบหน้าจอการจัดอันดับ
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/popular}
					
					\caption{หน้าจัดอันดับ}
					\label{Fig:popular}
				\end{figure}
				จากภาพที่ \ref{Fig:popular} แสดงหน้าจอการจัดอันดับสถานที่ตามหมวด หากผู้ใช้ต้องการดูข้อมูลการจัดอันดับของหมวดอื่นก็สามารถเลือกหมวดที่ต้องการได้
				\newpage
				\item การออกแบบหน้าจอหมวดที่เที่ยว
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/travel}
					
					\caption{หน้าจอหมวดที่เที่ยว}
					\label{Fig:travel-1}
				\end{figure}
				จากภาพที่ \ref{Fig:travel-1} แสดงหน้าจอหมวดที่เที่ยว ซึ่งการออกแบบในหน้านี้จะมีประกอบด้วยหมวดที่เที่ยวทั้งหมด 6 หมวดได้แก่ หมวดน้ำตก หมวดสวนน้ำและสวนสัตว์ หมวดสถานที่ทางศาสนา
				หมวดอุทยานและธรรมชาติ หมวดถนนคนเดิน หมวดสถานบันเทิง และจะมีในส่วนของการค้นหาสถานที่ถ้าผู้ใช้ต้องการค้นหาสถานที่ก็สามารถค้นหาได้ด้วยการเลือกประเภทหลังจากนั้นก็กรอกชื่อสถานที่เพื่อค้นหา
				\newpage
				\item การออกแบบหน้าจอหมวดที่กิน
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/eat}
					
					\caption{หน้าจอหมวดที่กิน}
					\label{Fig:eat-1}
				\end{figure}
				จากภาพที่ \ref{Fig:eat-1} แสดงหน้าจอหมวดที่กิน ซึ่งการออกแบบในหน้านี้จะมีประกอบด้วยหมวดที่กินทั้งหมด 6 หมวดได้แก่ หมวดบุฟเฟ่ต์ปิ้งย่าง หมวดคาเฟ่ หมวดอาหารประเภทเส้น
				หมวดอาหารท้องถิ่น หมวดอาหารญี่ปุ่น หมวดสเต็ก และจะมีในส่วนของการค้นหาสถานที่ถ้าผู้ใช้ต้องการค้นหาสถานที่ก็สามารถค้นหาได้ด้วยการเลือกประเภทหลังจากนั้นก็กรอกชื่อสถานที่เพื่อค้นหา
				\newpage
				\item การออกแบบหน้าจอหมวดที่พัก
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/hotel}
					
					\caption{หน้าจอหมวดที่พัก}
					\label{Fig:hotel-1}
				\end{figure}
				จากภาพที่ \ref{Fig:hotel-1} แสดงหน้าจอหมวดที่พัก ซึ่งการออกแบบในหน้านี้จะมีประกอบด้วยหมวดที่พักทั้งหมด 6 ประเภทได้แก่ วิลล่า โรงแรม รีสอร์ท กางเต้นท์ บังกะโล/เกส์ทเฮาส์ โฮมสเตย์
				และจะมีในส่วนของการค้นหาสถานที่ถ้าผู้ใช้ต้องการค้นหาสถานที่ก็สามารถค้นหาได้ด้วยการเลือกประเภทหลังจากนั้นก็กรอกชื่อสถานที่เพื่อค้นหา
				\newpage
				\item การออกแบบหน้าจอแสดงสถานที่
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/listplace}
					
					\caption{หน้าจอแสดงสถานที่}
					\label{Fig:listplace}
				\end{figure}
				
				จากภาพที่ \ref{Fig:listplace} แสดงหน้าจอสถานที่ โดยจะแสดงสถานที่ตามหมวดที่ผู้ใช้เลือกซึ่งในหน้านี้จะแสดงรูปภาพสถานที่ ชื่อสถานที่ ที่อยู่สถานที่และจำนวนคะแนนที่เป็นรูปดาว
		\newpage
				\item การออกแบบหน้าจอแสดงรายละเอียดสถานที่
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/detailplace}
					
					\caption{หน้าจอแสดงรายละเอียดสถานที่}
					\label{Fig:detailplace}
				\end{figure}
				จากภาพที่ \ref{Fig:detailplace} แสดงหน้าจอข้อมูลรายละเอียดของสถานที่ โดยข้อมูลทีแสดงในหน้านี้ประกอบด้วย รูปภาพสถานที่ ชื่อสถานที่ รายละเอียดสถานที่ แผนที่แสดงตำแหน่งของสถานที่ ปุ่มบันทึกสถานที่ ปุ่มรีวิว ปุ่มแจ้งแก้ไข 
				และมีในส่วนของการแสดงคะแนนเฉลี่ยจากการเขียนรีวิวของผู้ใช้
				\newpage
				\item การออกแบบหน้าจอเขียนรีวิว
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/review}
					
					\caption{หน้าจอเขียนรีวิว}
					\label{Fig:review-1}
				\end{figure}
				จากภาพที่ \ref{Fig:review-1} แสดงหน้าจอเขียนรีวิวและให้คะแนน เมื่อผู้ใช้กดปุ่มรีวิว จากภาพที่ \ref{Fig:detailplace} โปรแกรมจะแสดงหน้าจอเขียนรีวิวโดยผู้ใช้จะต้องกรอกข้อมูลให้ครบก่อนกดปุ่มบันทึกรีวิวและถ้าผู้ใช้ไม่ต้องการเขียนรีวิวก็สามารถกดปุ่ม "ยกเลิก" ได้ 
				\newpage
			\item การออกแบบหน้าแนะนำสถานที่
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/question}
					
					\caption{หน้าจอแบบประเมิน}
					\label{Fig:question}
				\end{figure}
				จากภาพที่ \ref{Fig:question} แสดงหน้าจอแบบประเมินโดยมีข้อมูลในการทำแบบประเมินแบ่งออกเป็น 3 ส่วนได้แก่ ข้อมูลส่วนตัว ข้อมูลการท่องเที่ยวและปัจจัยที่มีผลต่อการตัดสินใจในการมาท่องเที่ยว
			\newpage
				\item การออกแบบหน้าเพิ่มสถานที่
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/addplace}
					
					\caption{หน้าจอเพิ่มสถานที่}
					\label{Fig:addplace}
				\end{figure}
				จากภาพที่ \ref{Fig:addplace}  แสดงหน้าจอเพิ่มสถานที่โดยมีช่องให้กรอกชื่อสถานที่ ที่อยู่ รายละเอียด เบอร์โทร เว็บไซต์(website) เฟสบุค(facebook) ละติจูด(latitude) ลองจิจูด(longitude)และรูปภาพสถานที่
				\newpage 
				\item การออกแบบหน้าแสดงผลลัพธ์การแนะนำ
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/resultpredict}
					
					\caption{หน้าจอผลลัพธ์การแนะนำสถานที่}
					\label{Fig:resultpredict}
				\end{figure}
				จากภาพที่ \ref{Fig:resultpredict}  แสดงหน้าจอผลลัพธ์การแนะนำหมวดท่องเที่ยวที่เหมาะสมกับผู้ใช้ ทั้งนี้ผลลัพธ์การแนะนำได้มาจากการข้อมูลที่ผู้ใช้กรอกแบบประเมิน ซึ่งในหน้าจอแสดงลผลลัพธ์การเรียงลำดับจากตัวที่มีค่าสูงสุดไปหาตัวที่ต่ำสุด และแสดงค่าเปอร์เซ็นต์ในรูปแบบของ progress bar
			\newpage
				\item การออกแบบหน้าจอโปรไฟล์ของผู้ใช้งาน
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/profile}
					
					\caption{หน้าจอโปรไฟล์}
					\label{Fig:profile}
				\end{figure}
				จากภาพที่ \ref{Fig:profile} แสดงหน้าจอโปรไฟล์ของผู้ใช้โดยหน้านี้แสดงข้อมูลการเขียนรีวิว การบันทึกสถานที่และข้อมูลการเพิ่มสถานที่ของผู้ใช้งาน นอกจากนี้ผู้ใช้งานสามารถลบรีวิว แก้ไขรีวิว ลบข้อมูลสถานที่ แก้ไขข้อมูลสถานที่ได้ 
			\end{enumerate}
\newpage
			\subsection{ส่วนของผู้ดูแลระบบ}
			\begin{enumerate}
				\item การออกแบบหน้าจัดการข้อมูลสถานที่เที่ยว
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/Atravel}
					
					\caption{หน้าจอจัดการข้อมูลสถานที่เที่ยว}
					\label{Fig:Atravel}
				\end{figure}
				จากภาพที่ \ref{Fig:Atravel} แสดงหน้าจอในส่วนของผู้ดูแลระบบ โดยในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่ท่องเที่ยวทั้งหมดที่มีอยู่ในระบบผู้ดูแลระบบสามารถกดเลือกประเภทข้อมูลเพื่อดูข้อมูลเฉพาะประเภทนั้นๆได้ ซึ่งผู้ดูแลระบบสมารถกดปุ่มเพิ่มข้อมูลสถานที่เที่ยวได้ กดแก้ไขข้อมูลสถานที่หรือกดปุ่มลบข้อมูลสถานที่ได้
				\newpage
				\item การออกแบบหน้าจัดการข้อมูลสถานที่กิน
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/Aeat}
					
					\caption{หน้าจอจัดการข้อมูลสถานที่กิน}
					\label{Fig:Aeat}
				\end{figure}
				จากภาพที่ \ref{Fig:Aeat} แสดงหน้าจอในส่วนของผู้ดูแลระบบ โดยในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่ร้านอาหารทั้งหมดที่มีอยู่ในระบบผู้ดูแลระบบสามารถกดเลือกประเภทข้อมูลเพื่อดูข้อมูลเฉพาะประเภทนั้นๆได้ ซึ่งผู้ดูแลระบบสมารถกดปุ่มเพิ่มข้อมูลสถานที่กินได้ กดแก้ไขข้อมูลสถานที่หรือกดปุ่มลบข้อมูลสถานที่ได้
				\newpage
				\item การออกแบบหน้าจัดการข้อมูลสถานที่พัก
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.95\textwidth]{Figures/3/UIWeb/Ahotel}
					
					\caption{หน้าจอจัดการข้อมูลสถานที่พัก}
					\label{Fig:Ahotel}
				\end{figure}
				จากภาพที่ \ref{Fig:Ahotel} แสดงหน้าจอในส่วนของผู้ดูแลระบบ โดยในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่พักทั้งหมดที่มีอยู่ในระบบผู้ดูแลระบบสามารถกดเลือกประเภทข้อมูลเพื่อดูข้อมูลเฉพาะประเภทนั้นๆได้ ซึ่งผู้ดูแลระบบสมารถกดปุ่มเพิ่มข้อมูลสถานที่พักได้ กดแก้ไขข้อมูลสถานที่หรือกดปุ่มลบข้อมูลสถานที่ได้
			\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}{\includegraphics[width=0.3\textwidth]{Figures/table/use-case/1}}
		& \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 ด้านหัวลูกศรทุกครั้งที่มีการทำงาน} \\ \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=\columnwidth,height=17cm]{Figures/3/usecase}
		
		\caption{Use Case Diagram ระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี}
		\label{Fig:usecase}
	\end{figure}
	
	\begin{table}[H]
		\centering
		\caption{อธิบาย Use Case หน้าที่ของระบบในภาพที่ \ref{tab:usecase-15}}
		\label{tab:usecase-15}
		\resizebox{\totalheight}{!}{\textwidth}{
			\begin{tabular}{|c|p{10cm}|}
				\hline
				\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
				สมัครสมาชิก & ผู้ใช้งานสามารถสมัครสมาชิกเพื่อเข้าใช้งานในระบบได้ \\ \hline
				เข้าสู่ระบบ & ผู้ใช้ที่เป็นสมาชิกสามารถใช้ username และ password ของตัวเองเพื่อเข้าสู่ระบบได้ \\ \hline 
				เขียนรีวิวให้คะแนนสถานที่ & เมื่อผู้ใช้งานเข้าสู่ระบบเรียบร้อยแล้วจะสามารถเขียนรีวิวและให้คะแนนสถานที่ต่างๆได้ \\ \hline
				เพิ่มข้อมูลสถานที่ & เมื่อผู้ใช้งานและผู้ดูแลระบบเข้าสู่ระบบกเรียบร้อยแล้วจะสามารถเพิ่มข้อมูลสถานที่ลงในระบบได้ \\ \hline
				กรอกแบบประเมิน & ผู้ใช้งานสามารถกรอกข้อมูลแบบประเมินได้โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
				ดูผลลัพธ์การแนะนำ &  ผู้ใช้งานสามารถดูผลลัพธ์การแนะนำหมวดท่องเที่ยวที่เหมาะสมกับผู้ใช่ได้โดยไม่จำเป็นต้องเข้าสู่ระบบ ซึ่งข้อมูลจะแสดงชื่อหมวดและค่าเปอร์เซ็นของแต่ละหมดโดยเรียงจากมากไปน้อย\\ \hline
				ดูรายละเอียดสถานที่ &  ผู้ใช้งานสามารถดูข้อมูลรายละเอียดของสถานที่ที่ผู้ใช้งานต้องการได้โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
				ดูผลลัพธ์การจัดอันดับ & ผู้ใช้งานสามารถดูผลลัพธ์การจัดอันดับของสถานที่และสามารถเลือกหมวดที่ต้องการดูผลลัพธ์การจัดอันดับได้โดยไม่จำเป็นต้องเข้าสู่ระบบ ซึ่งข้อมูลที่แสดงจะเรียงลำดับตามจำนวนดาวจากมากไปน้อย\\ \hline
				ค้นหาสถานที่ & ผู้ใช้งานสามารถค้นหาสถานที่ที่ผู้ใช้งานต้องการได้โดยไม่จำเป็นต้องเข้าสู่ระบบ \\ \hline
			\end{tabular}%
		}
	\end{table}
		\begin{table}[H]
			\centering
			\caption{อธิบาย Use Case หน้าที่ของระบบในภาพที่ \ref{tab:usecase-15} (ต่อ)}
			\label{tab:usecase-15}
			\resizebox{\totalheight}{!}{\textwidth}{%
				\begin{tabular}{|c|p{10cm}|}
					\hline
					\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
					แจ้งแก้ไขข้อมูลสถานที่ & ผู้ใช้งานสามารถแจ้งแก้ไขข้อมูลสถานที่ได้โดยจะต้องเข้าสู่ระบบให้เรียบร้อยก่อน \\ \hline
					ลบข้อมูลสถานที่ & ใช้สำหรับผู้ดูแลระบบสามารถจัดการลบข้อมูลสถานที่ออกจากกระบบได้ \\ \hline
					แก้ไขข้อมูลสถานที่ & ใช้สำหรับผู้ดูแลระบบสามารถจัดการแก้ไขข้อมูลสถานที่ในระบบได้ \\ \hline
					สั่งเทรนโมเดล & ใช้เพื่อปรับโมเดลให้มีความแม่นยำมากยิ่งขึ้น \\ \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 : 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 : username ที่กรอกเข้ามาจะต้องไม่ซ้ำในระบบถึงจะสามารถสมัครสมาชิกได้ } \\ \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 : เมื่อผู้ใช้งานกดปุ่มแนะนำสถานที่จะแสดงหน้าแบบประเมินเพื่อให้ผู้ใช้กรอกแบบประเมินซึ่งแบบประเมินมีทั้งหมด 3 ส่วนได้แก่ ข้อมูลส่วนตัว ข้อมูลการท่องเที่ยวและปัจจัยที่มีผลต่อการตัดสินใจในการมาท่องเที่ยว} \\ \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}{!}{\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 : ส่วนดูผลลัพธ์การแนะนำสถานที่ เมื่อผู้ใช้กดส่งข้อมูลระบบจะแสดงหน้าผลลัพธ์การแนะนำสถานที่โดยแสดงชื่อหมวดและค่าเปอร์เซ็นเรียงจากค่ามากไปน้อย หมวดที่ระบบจะแนะนำมีทั้งหมวด 6 หมวดได้แก่ น้ำตก สวนน้ำและสวนสัตว์ สถานที่ทางศาสนา อุทยานและธรรมชาติ ถนนคนเดินและสถาบันเทิง} \\ \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 : 10 }} \\ \hline
		  			\multicolumn{2}{|l|}{Primary Actor : ผู้ใช้งาน} \\ \hline
		  			\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
		  			\multicolumn{2}{|p{\linewidth}|}{Main Flow : ส่วนดูผลลัพธ์การจัดอันดับ เมื่อใช้กดปุ่มสถานที่ยอดนิยมระบบจะแสดงหน้าข้อมูลการจัดอันดับสถานที่ซึ่งผู้ใช้สามารถเลือกประเภทเพื่อดูผลลัพธ์การจัดอันดับ โดยมีทัังหมด 3 ประเภท ได้แก่ สถานที่ท่องเที่ยว ร้านอาหารและที่พัก ข้อมูลที่จะแสดงจะเรียงลำดับตามจำนวนดาวจากมากไปน้อย} \\ \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
							\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้งานไม่เลือกประเภทสถานที่และไม่กรอกชื่อสถานที่จะไม่สามารถค้นหาสถานที่ได้} \\ \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 : Train model}} & \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 : ผู้ดูแลระบบสามารถกด Train model ได้} \\ \hline
						\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ดูแลระบบไม่เชื่อมต่ออินเทอร์เน็ตหรือไม่ได้เข้าสู่ระบบ จะไม่สามารถ Train model ได้} \\ \hline
					\end{tabular}
				}
			\end{table}
			\newpage

			\section{Class Diagram}
				Class Diagram คือแผนภาพที่ใช้แสดงคลาสและความสัมพันธ์ในแบบต่างๆ ระหว่างคลาส สัญลักษณ์ที่ใช้ในการเขียน Class Diagram แสดงในตารางที่ \ref{tab:classDiagram}
				\begin{center}
					\begin{table}[H]
						\centering
						\caption{สัญลักษณ์ของ Class Diagram}
						\label{tab:classDiagram}
						\begin{tabular}{|c|p{9cm}|}
							\hline
							\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
							\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/11}}
							& \setstretch{1.5} {Class สัญลักษณ์แทนด้วยสี่เหลี่ยมแบ่งเป็น 3 ส่วน ส่วนบนเป็นชื่อ Class ส่วนกลางเป็น Attribute และส่วนล่างเป็น Operation Name หรือ Method ซึ่งคลาสเป็นสิ่งที่เก็บรวบรวมข้อมูลที่แสดงถึงบุคคล สถานที่ เหตุการณ์หรือสิ่งต่างๆ ที่มีความเกี่ยวข้องกับระบบ Method เป็นการกระทำหรือฟังก์ชันที่คลาสนั้นสามารถทำได้ \\ \hline
						
							\raisebox{-\totalheight}{\includegraphics[width=80]{Figures/table/class/22}}
							& \setstretch{1.5} {Method สามารถแบ่งการมองเห็น (Visibility) ได้ 3 ชนิดได้แก่ 
							
							- Public แทนสัญลักษณ์ด้วยเครื่องหมายบวก (+)
							
							- Private แทนสัญลักษณ์ด้วยเครื่องหมายบวก (-)
							
							- Protected แทนสัญลักษณ์ด้วยเครื่องหมายบวก (\#) \\ \hline
							\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/1}}
							& \setstretch{1.5} {DependencyRelationship หมายความว่า คลาสที่อยู่ฝั่งต้นลูกศรสามารถเรียกใช้คลาสที่อยู่ฝั่งหัวลูกศร} \\ \hline
							
							\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/05}}
							& \setstretch{1.5} {Aggregation เป็นความสัมพันธ์ระหว่าง Object หรือ class แบบ "Whole-Part" หรือ "is part of" โดยจะมี class ที่เป็นใหญ่ที่สุดเป็น object หลัก และมี class อื่นเป็นส่วนประกอบ} \\ \hline
							
							\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/class/5}}
							& \setstretch{1.5} {Association Relationship หมายความว่า คลาสที่อยู่ฝั่งต้นลูกศรทำการกำหนดคลาสอื่นในรูป Attribute ภายในคลาส และสามารถเรียกใช้ Method จากคลาสนั้นได้} \\ \hline
			
							\raisebox{-\totalheight}{\includegraphics[width=50,height=50]{Figures/table/class/connector}}
							& \setstretch{1.5} {Connector เป็นสัญลักษณ์แทนด้วยรูปห้าเหลี่ยมและมีชื่ออยู่ตรงกลาง จะสร้างสัญลักษณ์นี้ไว้เมื่อต้องการเชื่อมต่อคลาสที่อยู่คนละหน้า} \\ \hline
						\end{tabular}
					\end{table}
				\end{center}			
\begin{sidewaysfigure}
	\begin{figure}[H]
		\includegraphics[width=\textwidth,height=\textheight,keepaspectratio]{Figures/3/Class/user}
		\caption{Class Diagram ระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี}
		\label{Fig:user1}
	\end{figure}
\end{sidewaysfigure}

\begin{sidewaysfigure}
\begin{figure}[H]
	\includegraphics[width=0.8\columnwidth]{Figures/3/Class/admin}
	\caption{Class Diagram ระบบแนะนำสถานที่ท่องเที่ยวในจังหวัดอุบลราชธานี}
	\label{Fig:admin1}
\end{figure}
\end{sidewaysfigure}
	
	\begin{table}[H]
		\centering
		\caption{อธิบาย Class Diagram ผู้ใช้งานจากภาพที่ \ref{Fig:user1} ได้ดังนี้}
		\label{tab:class}
		\begin{tabular}{|c|p{9cm}|}
			\hline
			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			\raisebox{-\totalheight}{QuestionnaireComponent}
			& \setstretch{1.5} {คลาส QuestionnaireComponent เป็นคลาสที่ใช้แสดงหน้าให้ผู้ใช้กรอกแบบประเมิน เพื่อดูผลลัพธ์การแนะนำหมวดท่องเที่ยว ซึ่งสามารถเรียกใช้คลาส DialogResultComponent} \\ \hline
			\raisebox{-\totalheight}{PopularComponent}
			& \setstretch{1.5} {คลาส PopularComponent เป็นคลาสที่ใช้แสดงหน้าแรกเมื่อเข้ามาใช้งานโดยหน้านี้จะแสดงสถานที่ยอดนิยม} \\ \hline
			\raisebox{-\totalheight}{DialogLoginComponent}
			& \setstretch{1.5} {คลาส DialogLoginComponent เป็นคลาสที่ใช้เพื่อให้สมาชิกที่ได้ลงทะเบียนกับระบบเข้าสู่ระบบเพื่อใช้งานบริการต่าง ๆ จากระบบ ซึ่งสามารถเรียกใช้คลาส RegisterComponent} \\ \hline
			\raisebox{-\totalheight}{RegisterComponent}
			& \setstretch{1.5} {คลาส RegisterComponent เป็นคลาสที่ใช้แสดงหน้าสมัครสมาชิกเพื่อให้ผู้ใช้ที่ต้องการลงทะเบียนเข้าสู่ระบบสามารถใช้งานได้} \\ \hline
			\raisebox{-\totalheight}{TopnavComponent}
			& \setstretch{1.5} {คลาส TopnavComponent เป็นคลาสที่จัดการเกี่ยวกับการแสดงแถบเมนูส่วนบนของเว็บไซต์ ซึ่งจะสามารถเรียกใช้คลาสQuestionnaireComponent PopularComponent DialogLoginComponent ProfileComponent TravelComponent EatComponent และคลาส HotelComponent} \\ \hline
			\raisebox{-\totalheight}{TravelComponent}
			& \setstretch{1.5} {คลาส TravelComponent เป็นคลาสที่ใช้แสดงหน้าหมวดสถานที่ท่องเที่ยวเพื่อให้ผู้ใช้ได้เลือกดูข้อมูลสถานที่ตามประเภทของหมวดต่างๆได้ ซึ่งสามารถเรียกใช้คลาส ListPlaceComponent ในการแสดงหน้ารายการสถานที่} \\ \hline
		\end{tabular}
	\end{table}
	\newpage
			
	\begin{table}[H]
		\centering
		\caption{อธิบาย Class Diagram ผู้ใช้งานจากภาพที่ \ref{Fig:user1} ได้ดังนี้ (ต่อ)}
		\label{tab:class}
		\begin{tabular}{|c|p{9cm}|}
			\hline
			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			\raisebox{-\totalheight}{EatComponent}
			& \setstretch{1.5} {คลาส EatComponent เป็นคลาสที่ใช้แสดงหน้าหมวดร้านอาหารเพื่อให้ผู้ใช้ได้เลือกดูข้อมูลสถานที่ตามประเภทของหมวดต่างๆได้ ซึ่งสามารถเรียกใช้คลาส ListPlaceComponent ในการแสดงหน้ารายการสถานที่} \\ \hline
			\raisebox{-\totalheight}{HotelComponent}
			& \setstretch{1.5} {คลาส HotelComponent เป็นคลาสที่ใช้แสดงหน้าหมวดสถานที่พักเพื่อให้ผู้ใช้ได้เลือกดูข้อมูลสถานที่ตามประเภทของหมวดต่างๆได้ ซึ่งสามารถเรียกใช้คลาส ListPlaceComponent ในการแสดงหน้ารายการสถานที่} \\ \hline
			\raisebox{-\totalheight}{DialogAddComponent}
			& \setstretch{1.5} {คลาส DialogAddComponent เป็นคลาสที่ใช้ในการแสดงหน้าเพิ่มข้อมูลสถานที่} \\ \hline
			\raisebox{-\totalheight}{ListPlaceComponent}
			& \setstretch{1.5} {คลาส ListPlaceComponent เป็นคลาสที่ใช้ในการแสดงข้อมูลสถานที่ มีการทำงานหลักคือสืบค้นฐานข้อมูลจาก Kuzzle เพื่อนำมาแสดง และสามารถเรียกใช้คลาส DialogAddComponent เมื่อผู้ใช้กดปุ่มเพิ่มสถานที่} \\ \hline
			\raisebox{-\totalheight}{DialogReviewComponent}
			& \setstretch{1.5} {คลาส DialogReviewComponent เป็นคลาสที่ใช้ในการแสดงหน้าเขียนรีวิวและให้คะแนนสถานที่} \\ \hline
			\raisebox{-\totalheight}{DetailPlaceComponent}
			& \setstretch{1.5} {คลาส DetailPlaceComponent เป็นคลาสที่มีหน้าที่ในการแสดงข้อมูลรายละเอียดของสถานที่ที่ได้รับจากหน้า ListPlaceComponent ที่จะส่งข้อมูลเมื่อผู้ใช้กดที่รูปภาพของสถานที่ ซึ่งในคลาสนี้สามารถเรียกใช้คลาส DialogReviewComponent เมื่อผู้ใช้กดปุ่มรีวิว } \\ \hline
			\raisebox{-\totalheight}{EditPlaceComponent}
			& \setstretch{1.5} {คลาส EditPlaceComponent เป็นคลาสที่ใช้ในการแสดงหน้าแจ้งแก้ไขข้อมูลสถานที่ โดยจะดึงข้อมูลจากฐานข้อมูลมาแสดงในแบบฟอมที่กำหนดไว้ ในคลาสนี้จะถูกทำงานก็ต่อเมื่อผู้ใช้กดปุ่มแจ้งแก้ไข} \\ \hline
		\end{tabular}
\end{table}
\newpage
	\begin{table}[H]
		\centering
		\caption{อธิบาย Class Diagram ผู้ดูแลระบบจากภาพที่ \ref{Fig:admin1} ได้ดังนี้}
		\label{tab:class}
		\begin{tabular}{|c|p{9cm}|}
			\hline
			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			\raisebox{-\totalheight}{AdminloginComponent}
			& \setstretch{1.5} {คลาส AdminloginComponent เป็นคลาสที่ใช้แสดงหน้าเข้าสู่ระบบของผู้ดูแลระบบ โดยผู้ใช้จะต้องเข้าสู่ระบบก่อนถึงจะสามารเข้าไปจัดการข้อมูลสถานที่ได้ เมื่อผู้ดูแลรบบกดปุ่มเข้าสู่ระบบ จะไปเรียกใช้คลาส PageEditComponent } \\ \hline
			\raisebox{-\totalheight}{PageEditComponent}
			& \setstretch{1.5} {คลาส PageEditComponent เป็นคลาสที่ใช้ในการแสดงหน้าข้อมูลการแจ้งแก้ไขข้อมูลสถานที่จากผู้ใช้งาน ข้อมูลจะถูกแก้ไขก็ต่อเมื่อผู้แลระบบกดแก้ไข และจะไปเรียกใช้คลาส DialogeditComponent} \\ \hline
			\raisebox{-\totalheight}{TopbarComponent}
			& \setstretch{1.5} {คลาส TopbarComponent เป็นคลาสที่จัดการเกี่ยวกับการแสดงแถบเมนูส่วนบนของเว็บไซต์ ของผู้ดูแลระบบซึ่งจะสามารถเรียกใช้คลาส PageEditComponent Adminroomcomponent AdmineatComponent และคลาส AdmintourComponent} \\ \hline
			\raisebox{-\totalheight}{Adminroomcomponent}
			& \setstretch{1.5} {คลาส Adminroomcomponent เป็นคลาสที่ใช้ในการแสดงหน้าจัดการข้อมูลสถานที่พักในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่ ข้อมูลที่อยู่ ประเภทของสถานที่ เมื่อผู้ดูแลระบบกดปุ่มเพิ่มสถานที่ จะไปเรียกใช้คลาส DialogaddComponent เมื่อผู้ดูแลระบบกดปุ่มแก้ไขจะไปเรียกใช้คลาส DialogeditComponent และเมื่อผู้ดูแลระบบกดปุ่มลบ จะไปเรียกใช้คลาส DialogdeleteComponent} \\ \hline
			\raisebox{-\totalheight}{AdmineatComponent}
			& \setstretch{1.5} {คลาส AdmineatComponent เป็นคลาสที่ใช้ในการแสดงหน้าจัดการข้อมูลสถานที่กินในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่ ข้อมูลที่อยู่ ประเภทของสถานที่ เมื่อผู้ดูแลระบบกดปุ่มเพิ่มสถานที่ จะไปเรียกใช้คลาส DialogaddComponent เมื่อผู้ดูแลระบบกดปุ่มแก้ไขจะไปเรียกใช้คลาส DialogeditComponent และเมื่อผู้ดูแลระบบกดปุ่มลบ จะไปเรียกใช้คลาส DialogdeleteComponent} \\ \hline
		\end{tabular}
	\end{table}	
\newpage

	\begin{table}[H]
		\centering
		\caption{อธิบาย Class Diagram ผู้ดูแลระบบจากภาพที่ \ref{Fig:admin1} ได้ดังนี้ (ต่อ)}
		\label{tab:class}
		\begin{tabular}{|c|p{9cm}|}
			\hline
			\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
			\raisebox{-\totalheight}{AdmintourComponent}
			& \setstretch{1.5} {คลาส AdmintourComponent เป็นคลาสที่ใช้ในการแสดงหน้าจัดการข้อมูลสถานที่เที่ยวในหน้านี้จะแสดงข้อมูลรายชื่อสถานที่ ข้อมูลที่อยู่ ประเภทของสถานที่ เมื่อผู้ดูแลระบบกดปุ่มเพิ่มสถานที่ จะไปเรียกใช้คลาส DialogaddComponent เมื่อผู้ดูแลระบบกดปุ่มแก้ไขจะไปเรียกใช้คลาส DialogeditComponent และเมื่อผู้ดูแลระบบกดปุ่มลบ จะไปเรียกใช้คลาส DialogdeleteComponent} \\ \hline
			\raisebox{-\totalheight}{DialogdeleteComponent}
			& \setstretch{1.5} {คลาส DialogdeleteComponent เป็นคลาสที่ใช้ในการแสดงการถามยืนยันลบข้อมูลสถานที่ออกจากระบบ คลาสนี้จะทำงานก็ต่อเมื่อผู้ดูแลระบบกดปุ่มลบ} \\ \hline
			\raisebox{-\totalheight}{DialogeditComponent}
			& \setstretch{1.5} {คลาส DialogeditComponent เป็นคลาสที่ใช้ในการแสดงหน้าแก้ไขข้อมูลสถานที่ โดยจะดึงข้อมูลจากฐานข้อมูลมาแสดงในแบบฟอมที่กำหนดไว้ คลาสนี้จะทำงานก็ต่อเมื่อผู้ดูแลระบบกดปุ่มแก้ไข} \\ \hline 
			\raisebox{-\totalheight}{DialogaddComponent}
			& \setstretch{1.5} {คลาส DialogaddComponent เป็นคลาสที่ใช้ในการแสดงหน้าเพิ่มข้อมูลสถานที่ คลาสนี้จะทำงานก็ต่อเมื่อผู้ดูแลระบบกดปุ่มเพิ่มสถานที่} \\ \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{9cm} |}
		\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

Sequence Diagram ที่ใช้อธิบายการทำงานของระบบแนะนำสถานที่ท่องเทียวในจังหวัดอุบลราชธานี มีรายละเอียดดังต่อไปนี้
\subsection{Sequence Diagram ของการสมัครสมาชิก}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/register}
		\caption{Sequence Diagram ของการสมัครสมาชิก}
		\label{Fig:Sequence-1}
	\end{figure}

	จากรูปที่ \ref{Fig:Sequence-1} สามารถอธิบายแผนภาพ Sequence Diagram ของการสมัครสมาชิก ได้ดังต่อไปนี้ เมื่อผู้ใช้กดสมัครสมาชิกระบบจะไปเรียกใช้ฟังก์ชัน ngOnInit() หรือคลาส RegisterComponent โดยจะแสดงหน้าสมัครสมาชิกเมื่อผู้ใช้กรอกชื่อ รหัสผ่าน ยืนยันรหัสผ่าน เลือกเพศ เลือกรูปโปรไฟล์เสร็จและกดปุ่มสมัครสมาชิกระบบจะไปเรียกฟังก์ชัน saveRegister() ซึ่งจะทำการเช็คเงื่อนไขว่ารหัสผ่านตรงกับรหัสยืนยันหรือไม่ ถ้าตรงจะส่งข้อมูล user ไปตรวจสอบในส่วน security ในฐานข้อมูล Kuzzle และจะทำการสร้าง user เสร็จจะส่ง status การสมัครสมาชิกไปกลับไปให้คลาส registerComponent และจะแสดงข้อความแจ้งผู้ใช้ว่าสมัครสมาชิกสำเร็จ หรือในกรณีที่รหัสผ่านและรหัสยืนยันไม่ตรงกันระบบจะแจ้งผู้ใช้ว่า รหัสผ่านไม่ตรงกัน
	\subsection{Sequence Diagram ของการเข้าสู่ระบบ}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/login}
		\caption{Sequence Diagram ของการเข้าสู่ระบบ}
		\label{Fig:Sequence-2}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-2} สามารถอธิบายแผนภาพ Sequence Diagram ของการเข้าสู่ระบบ ได้ดังต่อไปนี้ เมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ จากนั้นระบบจะเรียกใช้ฟังก์ชัน onClickLogin() โดยฟังก์ชัน onClickLogin() จะไปเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส DialogLoginComponent มาแสดงหน้าเข้าสู่ระบบต่อมาผู้ใช้กรอก username  และ password เสร็จกดเข้าสู่ระบบทำให้ระบบไปเรียกใช้ฟังก์ชัน Login() โดยจะส่งข้อมูล username และ password ไปตรวจสอบในส่วน security และ Kuzzle ทำการค้นหาและส่ง status การล็อคอินกลับไปที่คลาส DialogLoginComponent ซึ่งในคลาสนี้จะทำการเช็คสเตตัสการเข้าสูระบบและจะแสดงข้อความแจ้งผู้ใช้ให้ทราบว่าเข้าสู่ระบบสำเร็จ หรือ ไม่สำเร็จ 

\subsection{Sequence Diagram ของการดูข้อมูลรายละเอียดสถานที่}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/detail}
		\caption{Sequence Diagram ของการดูข้อมูลรายละเอียดสถานที่}
		\label{Fig:Sequence-3}
	\end{figure}

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

	\subsection{Sequence Diagram ของการเขียนรีวิวให้คะแนนสถานที่}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/review}
		\caption{Sequence Diagram ของการเขียนรีวิวให้คะแนนสถานที่}
		\label{Fig:Sequence-4}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-4} สามารถอธิบายแผนภาพ Sequence Diagram ของการเขียนรีวิวให้คะแนนสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ใช้งานเข้าสู่หน้าแสดงรายละเอียดสถานที่ ผู้ใช้กดปุ่มรีวิวจากนั้นระบบจะเรียกใช้ฟังก์ชัน onReview() ของคลาส DetailPlaceComponent โดยส่ง id สถานที่และ type ของสถานที่ไปเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส DialogReviewComponent มาแสดงหน้าเขียนรีวิว ต่อมาผู้ใช้เขียนรีวิวและให้คะแนนสถานที่เสร็จกดบันทึกรีวิว ซึ่งทำให้ระบบเรียกใช้ฟังก์ชัน reviewPlace() และเก็บข้อมูลการเขียนรีวิวไว้ในตัวแปร dataReview และทำการส่งข้อมูลการเขียนรีวิวเข้าไปบันทึกลงในฐานข้อมูล Kuzzle หลังจากทำการอัพเดทเพิ่มรีวิวเสร็จระบบจะส่งข้อมูลรีวิวไปให้คลาส DetailPlaceComponent และเรียกใช้ฟังก์ชัน ngOnInit() เพื่อทำการแสดงข้อมูลการเขียนรีวิวให้กับผู้ใช้ได้เห็น

	\subsection{Sequence Diagram ของการแจ้งแก้ไขข้อมูลสถานที่}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/UEdits}
		\caption{Sequence Diagram ของการแจ้งแก้ไขข้อมูลสถานที่}
		\label{Fig:Sequence-4e}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-4e} สามารถอธิบายแผนภาพ Sequence Diagram ของการแจ้งแก้ไขข้อมูลสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ใช้กดปุ่มแจ้งแก้ไขจากนั้นระบบจะเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส EditPlaceComponent โดยส่ง id สถานที่ไปค้นหาในฐานข้อมูล Kuzzle ทำการ query หาข้อมูลและส่งข้อมูลสถานที่มาเก็บไว้ที่คลาส PageEditComponent และจะแสดงหน้าแจ้งแก้ไขข้อมูลสถานที่ เมื่อผู้ใช้กรอกข้อมูลแจ้งแก้ไขเสร็จกดปุ่มแจ้งแก้ไขจไปเรียกใช้ฟังก์ชัน editDataPlace() หลังจากนั้นจะส่งข้อมูลการแจ้งแก้ไขไปเพิ่มลงในฐานข้อมูล Kuzzle ฐานข้อมูลทำการเพิ่มประวัติการแจ้งแก้ไขและแสดงข้อความแจ้งแก้ไขข้อมูลสำเร็จ
	
	\subsection{Sequence Diagram ของการเพิ่มข้อมูลสถานที่}	
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/3/Sequence/addplace}
		\caption{Sequence Diagram ของการเพิ่มข้อมูลสถานที่}
		\label{Fig:Sequence-5}
	\end{figure}

	จากรูปที่ \ref{Fig:Sequence-5} สามารถอธิบายแผนภาพ Sequence Diagram ของการเพิ่มข้อมูลสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ใช้งานและผู้ดูแลระบบกดปุ่มเพิ่มสถานที่จากนั้นระบบจะเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส DialogAddComponent โดยทำการแสดงหน้าเพิ่มสถานที่ให้กับผู้ใช้และผู้ดูแลระบบได้กรอกข้อมูลเมื่อกรอกเสร็จกดบันทึกระบบจะไปเรียกใช้ฟังก์ชัน addPlace() ของคลาส DialogAddComponent ทำการเก็บข้อมูลทั้งหมดที่ผู้ใช้และผู้ดูแลระบบกรอกเข้ามาไว้ในรูปแบบของ object ในตัวแปร data และทำการส่งข้อมูลการเพิ่มสถานที่ไปเพิ่มลงในฐานข้อมูล Kuzzle หลังจากเพิ่มข้อมูลงฐานข้อมูล Kuzzle สำเร็จระบบจะปิดหน้าเพิ่มสถานที่และแสดงแจ้งเพิ่มข้อมูลสถานที่สำเร็จ
	
	\subsection{Sequence Diagram ของการกรอกแบบประเมิน}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/question}
		\caption{Sequence Diagram ของการกรอกแบบประเมิน}
		\label{Fig:Sequence-6}
	\end{figure}

	จากรูปที่ \ref{Fig:Sequence-6} สามารถอธิบายแผนภาพ Sequence Diagram ของการกรอกแบบประเมิน ได้ดังต่อไปนี้ เมื่อผู้ใช้งานเข้าสู่หน้าแนะนำสถานที่หรือคลาส QuestionnaireComponent จากนั้นระบบจะเรียกใช้ getModelQuestionnaire() เพื่อแสดงหน้าจอแบบประเมินเมื่อผู้ใช้กรอกข้อมูลแบบประเมินเสร็จกดส่งข้อมูล จะไปเรียกใช้ฟังก์ชัน predict() โดยทำการส่งข้อมูลการกรอกแบบประเมินของผู้ใช้ไปในรูปแบบอาเรย์ในตัวแปร resultModel ไปให้เชิฟเวอร์และเชิฟเวอร์ทำการโหลดโมเดลนำโมเดลที่ได้ทำนายผลลัพธ์มาเก็บไว้ที่คลาส DialogResultComponent และคลาส DialogResultComponent จะแสดงผลลัพธ์การแนะนำหมวดท่องเที่ยวให้กับผู้ใช้ได้ดู 
	
	\subsection{Sequence Diagram ของการดูผลลัพธ์การจัดอันดับ}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/popular}
		\caption{Sequence Diagram ของการดูผลลัพธ์การจัดอันดับ}
		\label{Fig:Sequence-7}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-7} สามารถอธิบายแผนภาพ Sequence Diagram ของการดูผลลัพธ์การจัดอันดับ ได้ดังต่อไปนี้ เมื่อผู้ใช้งานเข้าสู่หน้าสถานที่ยอดนิยมหรือคลาส PopularComponent จากนั้นระบบจะเรียกฟังก์ชัน ngOnInit() ของคลาส PopularComponent โดยทำการนำข้อมูลจากฐานข้อมูลมาแสดงในหน้าสถานที่ยอดนิยม ต่อมาผู้ใช้งานเลือกหมวดที่ต้องการดูสถานที่ยอดนิยมได้แก่หมวดสถานที่ท่องเที่ยว ที่พักและหมวดร้านอาหาร ซึ่งทำให้ระบบเรียกใช้งานฟังก์ชัน selectGroup และนำข้อมูลหมวดที่เลือกไปเก็บไว้ในต้วแปร select และส่งไปค้นหาข้อมูลจากฐานข้อมูล Kuzzle หลังจากได้ข้อมูลจะส่งข้อมูลสถานที่ทั้งหมดของหมวดที่ผู้ใช้เลือกมาเก็บไว้ในคลาส PopularComponent จะนำข้อมูลที่ได้มาจัดอับดับและแสดงผลการจัดอันดับ
	
	\subsection{Sequence Diagram ของการจัดการแก้ไขข้อมูลสถานที่}
	
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/edit}
		\caption{Sequence Diagram ของการจัดการแก้ไขข้อมูลสถานที่}
		\label{Fig:Sequence-9}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-9} สามารถอธิบายแผนภาพ Sequence Diagram ของการจัดการแก้ไขข้อมูลสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ดูแลระบบกดปุ่มแก้ไข จากนั้นระบบเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส DialogeditComponent และส่ง id ไปค้นหาข้อมูลในฐานข้อมูล Kuzzle ทำการ query หาข้อมูลส่งข้อมูลสถานที่มาเก็บไว้ที่คลาส DialogeditComponent เพื่อแสดงหน้าแก้ไขข้อมูลสถานที่ ต่อมาผู้ดูแลระบบแก้ไขรายละเอียดสถานที่เสร็จกดบันทึกการแก้ไขระบบจะไปเรียกใช้งานฟังก์ชัน edit() ของคลาส DialogeditComponent โดยส่งข้อมูลรายละเอียดการแก้ไขไปเก็บไว้ในตัวแปร data หลังจากนั้นนำข้อมูลที่ส่งมาไปให้ฐานข้อมูล Kuzzle เพื่อทำการอัปเดทข้อมูลการแก้ไข เมื่อบันทึกข้อมูลการแก้ไขสำเร็จระบบจะปิดหน้าแก้ไขข้อมูลสถานที่ลง
	
	\subsection{Sequence Diagram ของการจัดการลบข้อมูลสถานที่}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/ADelete}
		\caption{Sequence Diagram ของการจัดการลบข้อมูลสถานที่}
		\label{Fig:Sequence-10}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-10} สามารถอธิบายแผนภาพ Sequence Diagram ของการจัดการลบข้อมูลสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ดูแลระบบกดปุ่มลบ จากนั้นระบบจะเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส DialogdeleteComponent เพื่อแสดงหน้าข้อมความถามเพื่อยืนยันการลบข้อมูลสถานที่โดยจะมีปุ่มให้เลือกอยู่ 2 ปุ่มคือ ใช่ และ ไม่ใช่ ต่อมาผู้ดูแลระบบกดปุ่มใช่ระบบเรียกใช้งานฟังก์ชัน delete() ของคลาส DialogdeleteComponent โดยส่ง id สถานที่ที่ต้องการลบและนำ id สถานที่ไปค้นหาในฐานข้อมูล Kuzzle เพื่อทำการลบข้อมูลสถานที่ออกจากฐานข้อมูล เมื่อลบข้อมูลสถานที่สำเร็จระบบจะปิดหน้ายืนยันการลบข้อมูลสถานที่ลงและแสดงหน้าจัดการข้อมูลสถานที่
	
	\subsection{Sequence Diagram ของการจัดการแจ้งแก้ไขข้อมูลสถานที่}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/AEdits}
		\caption{Sequence Diagram ของการจัดการแจ้งแก้ไขข้อมูลสถานที่}
		\label{Fig:Sequence-11}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-11} สามารถอธิบายแผนภาพ Sequence Diagram ของการจัดการแจ้งแก้ไขข้อมูลสถานที่ ได้ดังต่อไปนี้ เมื่อผู้ดูแลระบบกดเมนูแจ้งแก้ไข จากนั้นระบบจะเรียกใช้ฟังก์ชัน ngOnInit() ของคลาส PageEditComponent และจะเรียกใช้ข้อมูลแจ้งแก้ไขในฐานข้อมูล Kuzzle ทำการค้นหาข้อมูลและส่งข้อมูลประวัติแจ้งแก้ไขมาเก็บไว้ที่คลาส PageEditComponent เพื่อแสดงหน้าข้อมูลแจ้งแก้ไข ต่อมาผู้ดูแลระบบกดปุ่มยืนยันการแก้ไขระบบจะไปเรียกใช้งานฟังก์ชัน editplace() ของคลาส PageEditComponent โดยส่งข้อมูลการแก้ไขไปอัปเดทในฐานข้อมูล Kuzzle และฐานข้อมูลทำการอัปเดทข้อมูลและแสดงแจ้งแกไขข้อมูลสำเร็จ

	\subsection{Sequence Diagram ของการจัดการ train model}
	
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]
		{Figures/3/Sequence/train}
		\caption{Sequence Diagram ของการจัดการ train model}
		\label{Fig:Sequence-12}
	\end{figure}
	
	จากรูปที่ \ref{Fig:Sequence-12} สามารถอธิบายแผนภาพ Sequence Diagram ของการจัดการ train model ได้ดังต่อไปนี้ เมื่อผู้ดูแลระบบกดเลือกเมนู train ของคลาส TopbarComponent จากนั้นระบบจะเรียกใช้ฟังก์ชัน train() และจะไปเรียกใช้งาน server โดยส่ง url ที่อยู่ของข้อมูลไปค้นหาในฐานข้อมูล Kuzzle เมื่อค้นหาและได้ข้อมูลมาจะส่งชุดข้อมูลไปใช้งานต่อที่ server หลังจากที่ได้ชุดข้อมูลนำชุดข้อมูลที่ได้มาแยกค่า xTrain yTrain ต่อมาก็เริ่มทำการ load ข้อมูล xTrain yTrain เมื่อโหลดข้อมูลสำเร็จจะทำการสร้างโมเดล ด้วยคำสั่ง tf.sequential() หลังจากสร้างโมเดลสำเร็จระบบจะเริ่ม train โดยใช้ adam learning เมื่อ train สำเร็จจะทำการ savemodel เมื่อ savemode เสร็จจะแจ้งให้ผู้ดูแลระบบได้ทราบ

\newpage 
	
\section{โครงสร้างฐานข้อมูลคาสเซิล(Kuzzle Database Stucture)}
Kuzzle Database นั้นเป็น Database แบบ NoSQL และเป็น JSON database ที่มีโครงสร้างที่เป็น Key และ Value จัดเก็บข้อมูลในลักษณะโหนด หากต้องการเรียกงานจะเรียกใช้โดย
การท่องไปยังโหนดที่ต้องการ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียนโครงสร้างฐานข้อมูลแบบ Kuzzle แสดงดังรูปภาพที่ \ref{Fig:tabledb}

\begin{figure}[H]
	\includegraphics[width=\columnwidth]
	{Figures/3/DB/tabledb}
	\caption{สัญลักษณ์ของโครงสร้างฐานข้อมูลแบบ Kuzzle}
	\label{Fig:tabledb}
\end{figure}

\newpage
	\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/db}
	\caption{โครงสร้างฐานข้อมูลภาพรวมใน Kuzzle}
	\label{Fig:db}
	\end{figure}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/datamodel} \\
	\caption{โครงสร้างฐานข้อมูล datamodel}
	\label{Fig:datamodel}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel จากรูปที่ \ref{Fig:datamodel}}
	\label{my-labe5}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		age & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"อายุ" \\ \hline
		conveniece &  สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ความสะดวกในการเข้าถึงแหล่งท่องเที่ยว" \\ \hline
		decision & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"สิ่งที่มีผลต่อการตัดสินใจเลือกมาเที่ยวในครั้งนี้" \\ \hline
		environment & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"สภาพแวดล้อมของสถานที่ท่องเที่ยวที่ท่านต้องการ"  \\ \hline
		gender & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"เพศ" \\ \hline
		goal & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"จุดประสงค์ที่ท่านเดินทางมาเที่ยวครั้งนี้"\\ \hline
		gotoUbon & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ท่านเคยเดินทางมาเที่ยวที่จังหวัดอุบลราชธานีหรือไม่"  \\ \hline
		income & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"รายได้ต่อเดือน" \\ \hline
		info & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ท่านทราบข้อมูลท่องเที่ยวจากแหล่งใด"\\ \hline
		job & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"อาชีพ"  \\ \hline
		lives & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"คุณเป็นคนจังหวัดอุบลราชธานีหรือไม่" \\ \hline
		travelUbon & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ความถี่ในการท่องเที่ยวของท่าน"\\ \hline
		travel purpose & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"วัตถุประสงค์ในการเดินทางมาอุบลราชธานีในครั้งนี้" \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ datamodel จากรูปที่ \ref{Fig:datamodel} (ต่อ)}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		travel style & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ลักษณะการเดินทาง" \\ \hline
		vehicle & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ยานพาหนะในการเดินทาง"\\ \hline
		want & สำหรับเก็บข้อมูลช้อยส์ตัวเลือกของคำถาม"ท่านต้องการได้รับอะไรจากสถานที่ท่องเที่ยว"\\ \hline
	\end{tabular}
\end{table}

\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/dataedit} \\
	\caption{โครงสร้างฐานข้อมูล dataedit}
	\label{Fig:dataedit}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ dataedit จากรูปที่ \ref{Fig:dataedit}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		address & สำหรับเก็บข้อมูลที่อยู่ของสถานที่ \\ \hline
		cityprovince &  สำหรับเก็บข้อมูลอำเภอและจังหวัดของสถานที่ \\ \hline
		desciption & สำหรับเก็บข้อมูลรายละเอียดของสถานที่ \\ \hline
		edit by & สำหรับเก็บข้อมูลชื่อผู้แจ้งแก้ไข  \\ \hline
		facebook & สำหรับเก็บข้อมูลชื่อเฟสบุ๊คของสถานที่ \\ \hline
		group & สำหรับเก็บข้อมูลประเภทของสถานที่ \\ \hline
		image &  สำหรับเก็บข้อมูลรูปภาพสถานที่ โดยเก็บเป็น base64 \\ \hline
		img user & สำหรับเก็บข้อมูลรูปภาพผู้ใช้ โดยเก็บเป็น base64 \\ \hline
		lat & สำหรับเก็บข้อมูลค่าละจิจูดของสถานที่  \\ \hline
		lng & สำหรับเก็บข้อมูลค่าลองจิจูดของสถานที่ \\ \hline
		namelocation & สำหรับเก็บข้อมูลชื่อสถานที่ \\ \hline
		openclose &  สำหรับเก็บข้อมูลวันเวลาเปิด-ปิดของสถานที่ \\ \hline
		phonenumber & สำหรับเก็บข้อมูลเบอร์โทรติดต่อสถานที่ \\ \hline
		price & สำหรับเก็บข้อมูลราคาอาหาร ราคาที่พัก และราคาเข้าชมสถานที่  \\ \hline
		website & สำหรับเก็บข้อมูล url เว็บไซต์ของสถานที่ \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/eat} \\
	\caption{โครงสร้างฐานข้อมูล eat}
	\label{Fig:eat}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลที่ใช้เก็บข้อมูลสถานที่กิน จากรูปที่ \ref{Fig:eat}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		address & สำหรับเก็บข้อมูลที่อยู่ของสถานที่ \\ \hline
		cityprovince &  สำหรับเก็บข้อมูลอำเภอและจังหวัดของสถานที่ \\ \hline
		desciption & สำหรับเก็บข้อมูลรายละเอียดของสถานที่ \\ \hline
		facebook & สำหรับเก็บข้อมูลชื่อเฟสบุ๊คของสถานที่ \\ \hline
		group & สำหรับเก็บข้อมูลประเภทของสถานที่ \\ \hline
		image &  สำหรับเก็บข้อมูลรูปภาพสถานที่ โดยเก็บเป็น base64 \\ \hline
		lat & สำหรับเก็บข้อมูลค่าละจิจูดของสถานที่  \\ \hline
		lng & สำหรับเก็บข้อมูลค่าลองจิจูดของสถานที่ \\ \hline
		namelocation & สำหรับเก็บข้อมูลชื่อของสถานที่กิน \\ \hline
		openclose &  สำหรับเก็บข้อมูลวันเวลาเปิด-ปิดของสถานที่ \\ \hline
		phonenumber & สำหรับเก็บข้อมูลเบอร์โทรติดต่อของสถานที่ \\ \hline
		price & สำหรับเก็บข้อมูลราคาอาหาร ราคาที่พัก และราคาเข้าชมสถานที่  \\ \hline
		website & สำหรับเก็บข้อมูล url เว็บไซต์ของสถานที่ \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/travel} \\
	\caption{โครงสร้างฐานข้อมูล travel}
	\label{Fig:travel}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลที่ใช้เก็บข้อมูลสถานที่เที่ยว จากรูปที่ \ref{Fig:travel}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		address & สำหรับเก็บข้อมูลที่อยู่ของสถานที่ \\ \hline
		cityprovince &  สำหรับเก็บข้อมูลอำเภอและจังหวัดของสถานที่ \\ \hline
		desciption & สำหรับเก็บข้อมูลรายละเอียดของสถานที่ \\ \hline
		facebook & สำหรับเก็บข้อมูลชื่อเฟสบุ๊คของสถานที่ \\ \hline
		group & สำหรับเก็บข้อมูลประเภทของสถานที่ \\ \hline
		image &  สำหรับเก็บข้อมูลรูปภาพสถานที่ โดยเก็บเป็น base64 \\ \hline
		lat & สำหรับเก็บข้อมูลค่าละจิจูดของสถานที่  \\ \hline
		lng & สำหรับเก็บข้อมูลค่าลองจิจูดของสถานที่ \\ \hline
		namelocation & สำหรับเก็บข้อมูลชื่อของสถานที่เที่ยว \\ \hline
		openclose &  สำหรับเก็บข้อมูลวันเวลาเปิด-ปิดของสถานที่ \\ \hline
		phonenumber & สำหรับเก็บข้อมูลเบอร์โทรติดต่อของสถานที่ \\ \hline
		price & สำหรับเก็บข้อมูลราคาอาหาร ราคาที่พัก และราคาเข้าชมสถานที่  \\ \hline
		website & สำหรับเก็บข้อมูล url เว็บไซต์ของสถานที่ \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.7\columnwidth]
	{Figures/3/DB/hotel} \\
	\caption{โครงสร้างฐานข้อมูล hotel}
	\label{Fig:hotel}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลที่ใช้เก็บข้อมูลสถานที่พัก จากรูปที่ \ref{Fig:hotel}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		address & สำหรับเก็บข้อมูลที่อยู่ของสถานที่ \\ \hline
		cityprovince &  สำหรับเก็บข้อมูลอำเภอและจังหวัดของสถานที่ \\ \hline
		desciption & สำหรับเก็บข้อมูลรายละเอียดของสถานที่ \\ \hline
		facebook & สำหรับเก็บข้อมูลชื่อเฟสบุ๊คของสถานที่ \\ \hline
		group & สำหรับเก็บข้อมูลประเภทของสถานที่ \\ \hline
		image &  สำหรับเก็บข้อมูลรูปภาพสถานที่ โดยเก็บเป็น base64 \\ \hline
		lat & สำหรับเก็บข้อมูลค่าละจิจูดของสถานที่  \\ \hline
		lng & สำหรับเก็บข้อมูลค่าลองจิจูดของสถานที่ \\ \hline
		namelocation & สำหรับเก็บข้อมูลชื่อของสถานที่พัก \\ \hline
		openclose &  สำหรับเก็บข้อมูลวันเวลาเปิด-ปิดของสถานที่ \\ \hline
		phonenumber & สำหรับเก็บข้อมูลเบอร์โทรติดต่อของสถานที่ \\ \hline
		price & สำหรับเก็บข้อมูลราคาอาหาร ราคาที่พัก และราคาเข้าชมสถานที่  \\ \hline
		website & สำหรับเก็บข้อมูล url เว็บไซต์ของสถานที่ \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.8\columnwidth]
	{Figures/3/DB/review} \\
	\caption{โครงสร้างฐานข้อมูล review}
	\label{Fig:review}
\end{figure}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลที่ใช้เก็บข้อมูลการเขียนรีวิวสถานที่ จากรูปที่ \ref{Fig:review}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		review & เป็น array ที่เก็บเป็น object รายละเอียดตข้อมูลต่างๆ ของการเขียนรีวิวโดยใน review จะเก็บข้อมูลการเขียนรีวิวทั้งหมด 8 อย่าง ชื่อผู้เขียนรีวิว รูปภาพผู้เขียนรีวิว หัวข้อรีวิว รายละเอียดรีวิว รูปภาพของรีวิว คะแนนรีวิว วันเวลาในการเขียนรีวิวและไอดี(id)ของสถานที่ \\ \hline
		create_by & สำหรับเก็บข้อมูลชื่อผู้ใช้ที่เขียนริวิว \\ \hline
		description & สำหรับเก็บข้อมูลรายละเอียดของรีวิว \\ \hline
		id & สำหรับเก็บข้อมูลไอดี(id) ของสถานที่ \\ \hline
		image & สำหรับเก็บข้อมูลรูปภาพรีวิว โดยเก็บเป็น base64 \\ \hline
		imageUser &  สำหรับเก็บข้อมูลรูปภาพปผู้ใช้ที่เขียนรีวิว โดยเก็บเป็น base64 \\ \hline
		score & สำหรับเก็บข้อมูลการให้คะแนนรีวิวสถานที่ \\ \hline
		timeReview & สำหรับเก็บข้อมูลวันเวลาในการเขียนรีวิว  \\ \hline
		title & สำหรับเก็บข้อมูลหัวข้อของรีวิว \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.9\columnwidth]
	{Figures/3/DB/admin} \\
	\caption{โครงสร้างฐานข้อมูล Admin}
	\label{Fig:admin}
\end{figure}

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ admin ในส่วน security จากรูปที่ \ref{Fig:admin}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		Content & สำหรับเก็บข้อมูลทั่วไปที่เราต้องการบันทึก \\ \hline
		Profiles & เก็บข้อมูลว่าเรามีสิทธิ์ในการจัดการข้อมูลในระดับไหน \\ \hline
		username & สำหรับเก็บข้อมูลชื่อผู้ดูแลระบบ \\ \hline
		password & สำหรับเก็บข้อมูลรหัสผ่านของผู้ดูแลระบบ  \\ \hline
		Credentials & สำหรับเก็บข้อมูลสิ่งที่่สำคัญเพื่อใช้ระบุตัวตน \\ \hline
		local & สำหรับเก็บข้อมูล username ของผู้ดูแลระบบและเก็บ id หรือ Token ของผู้ดูแลระบบไว้ใน kuid \\ \hline
	\end{tabular}
\end{table}
\newpage

\begin{figure}[H]
	\centering
	\includegraphics[width=0.9\columnwidth]
	{Figures/3/DB/user} \\
	\caption{โครงสร้างฐานข้อมูล User}
	\label{Fig:user}
\end{figure}
\newpage

\begin{table}[H]
	\centering
	\caption{อธิบายโครงสร้างฐานข้อมูลของ user ในส่วน security จากรูปที่ \ref{Fig:user}}
	\label{my-labe6}
	\begin{tabular}{|c|p{10cm}|}
		\hline
		\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
		Content & สำหรับเก็บข้อมูลทั่วไปที่เราต้องการบันทึก \\ \hline
		Profiles & เก็บข้อมูลว่าเรามีสิทธิ์ในการจัดการข้อมูลในระดับไหน \\ \hline
		bookmarks & สำหรับเก็บข้อมูลสถานที่ทั้งหมดที่ผู้ใช้กดบันทึกสถานที่ \\ \hline
		reviews & สำหรับเก็บข้อมูลประวัติการเขียนรีวิวสถานที่ต่างๆของผู้ใช้ \\ \hline
		places & สำหรับเก็บข้อมูลการเพิ่มสถานที่ของผู้ใช้ \\ \hline
		username & สำหรับเก็บข้อมูลชื่อผู้ใช้ในระบบ  \\ \hline
		gender & สำหรับเก็บข้อมูลเพศของผู้ใช้ในระบบ  \\ \hline
		imageSrc & สำหรับเก็บข้อมูลรูปภาพของผู้ใช้ในระบบ โดยเก็บเก็บ base64 \\ \hline
		password & สำหรับเก็บข้อมูลรหัสผ่านของผู้ใช้ในระบบ  \\ \hline
		Credentials & สำหรับเก็บข้อมูลสิ่งที่่สำคัญเพื่อใช้ระบุตัวตน \\ \hline
		local & สำหรับเก็บข้อมูล username ของผู้ใช้และเก็บ id หรือ Token ของผู้ใช้ไว้ใน kuid \\ \hline
	\end{tabular}
\end{table}

