\chapter{คู่มือการใช้งานระบบ}
คู่มือการใช้งานทั้งหมดของระบบ สามารถแบ่งออกเป็น 3 ส่วน ดังนี้
\begin{enumerate}
	\item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับผู้ใช้บริการ
		\begin{itemize}
			\item หน้าจอหลักแสดงผลทุกครั้งเมื่อผู้ใช้ทำการเปิดใช้งานเว็บแอปพลิเคชัน ดังแสดงในรูปที่ \ref{Fig:home}
				\begin{figure}[H]
					\centering
					\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Home}
					\caption{หน้าจอหลัก}
					\label{Fig:home}
				\end{figure}
				จากรูปที่ \ref{Fig:register} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ ปุ่มเข้าสู่ระบบ
				\item หมายเลข 2 คือ ปุ่มลงทะเบียนสำหรับผู้ใช้งานทั่วไป
				\item หมายเลข 3 คือ ปุ่มลงทะเบียนสำหรับเจ้าของร้าน
				\item หมายเลข 4 คือ ฟอร์มสำหรับค้นหาร้าน
				\item หมายเลข 5 คือ เลือกที่รูปภาพเพื่อเปิดหน้าต่างรายละเอียดร้าน
				\item หมายเลข 6 คือ ปุ่มสำหรับจองคิว
			\end{itemize}
			\item เมื่อผู้ใช้งานกดที่ปุ่ม Register ระบบจะทำการแสดงหน้าต่างลงทะเบียน ดังแสดงในรูปที่ \ref{Fig:register}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Register}
				\caption{หน้าต่างลงทะเบียน}
				\label{Fig:register}
			\end{figure}
		จากรูปที่ \ref{Fig:register} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ กรอกข้อมูลในการลงทะเบียนแล้วกดยืนยัน
			
			\end{itemize}
			
			\item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:login}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
				\caption{หน้าจอเข้าสู่ระบบ}
				\label{Fig:login}
			\end{figure}
			จากรูปที่ \ref{Fig:login} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
			\end{itemize}
		
			\item หน้าแสดงรายละเอียดข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:shop}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shop}
				\caption{หน้าแสดงรายระเอียดร้าน}
				\label{Fig:shop}
			\end{figure}
			จากรูปที่ \ref{Fig:shop} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ ปุ่มสำหรับดูรายการร้าน
				\item หมายเลข 2 คือ ปุ่มสำหรับจองคิว
				\item หมายเลข 3 คือ ปุ่มสำหรับเขียนรีวิว
			\end{itemize}
		
			\item เมื่อผู้ใช้กดปุ่มจองคิว ระบบจะแสดง model จองคิว ดังแสดงในรูปที่ \ref{Fig:shopgueue}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopgueue}
				\caption{หน้าการจองคิว}
				\label{Fig:shopgueue}
			\end{figure}
			จากรูปที่ \ref{Fig:shopgueue} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ สำหรับเลือกวันที่ในการจองคิว
				\item หมายเลข 2 คือ เลือกรายการสำหรับจองคิว
				\item หมายเลข 3 คือ เลือกช่างที่ต้องการจองคิว
				\item หมายเลข 4 คือ เลือกเวลาในการจองคิว
						
			\end{itemize}
		
			\item เมื่อผู้ใช้กดปุ่มรายการ ระบบจะแสดง model รายการ ดังแสดงในรูปที่ \ref{Fig:shoplist}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/shoplist}
				\caption{เมนูดูรายการร้าน}
				\label{Fig:shoplist}
			\end{figure}
			จากรูปที่ \ref{Fig:shoplist} สามารถอธิบายการใช้งานได้ดังนี้
			\begin{itemize}[label={--}]
				\item หมายเลข 1 คือ รายการประจำร้าน
			\end{itemize}
		
			\item เมื่อผู้ใช้กดปุ่มเขียนรีวิว ระบบจะแสดง model เพื่อให้ผู้ใช้งานเขียนรีวิว ดังแสดงในรูปที่ \ref{Fig:shopreview}
			\begin{figure}[H]
				\centering
				\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/shopreview}
				\caption{หน้าจอเขียนรีวิว}
				\label{Fig:shopreview}
			\end{figure}	
          จากรูปที่ \ref{Fig:shopreview} สามารถอธิบายการใช้งานได้ดังนี้
          \begin{itemize}[label={--}]
          	\item หมายเลข 1 คือ กรอกข้อมูลการรีวิวและกด submit
          \end{itemize}
          
		
				
		\end{itemize}
		\item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับเจ้าของร้าน
	\begin{itemize}
		
		\item เมื่อผู้ใช้งานกดที่ปุ่ม RegisterShop ระบบจะทำการแสดงหน้าต่างลงทะเบียน ดังแสดงในรูปที่ \ref{Fig:registershop}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/registershop}
			\caption{หน้าต่างลงทะเบียนธุรกิจ}
			\label{Fig:registershop}
		\end{figure}
		จากรูปที่ \ref{Fig:registershop} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ กรอกข้อมูลในการลงทะเบียนแล้วกดยืนยัน
			
		\end{itemize}
		
		\item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:loginshop}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
			\caption{หน้าจอเข้าสู่ระบบ}
			\label{Fig:loginshop}
		\end{figure}
		จากรูปที่ \ref{Fig:loginshop} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
		\end{itemize}
		
		\item เมื่อเจ้าของร้านเข้าสู่ระบบสำเร็จ ดังแสดงในรูปที่ \ref{Fig:shopprofile}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopprofile}
			\caption{หน้าจอโปรไฟล์}
			\label{Fig:shopprofile}
		\end{figure}
		จากรูปที่ \ref{Fig:shopprofile} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ ปุ่มสำหรับอัพโหลดรูปภาพ
		
		\end{itemize}
		
		\item เมื่อเจ้าของร้านเลือกที่เมนูข้อมูลร้าน ระบบจะแสดงหน้าข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:datashop}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/datashop}
			\caption{หน้าจอข้อมูลร้าน}
			\label{Fig:datashop}
		\end{figure}
		จากรูปที่ \ref{Fig:datashop} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ ปุ่มสำหรับเพิ่มรูปภาพ
			\item หมายเลข 2 คือ ปุ่มสำหรับแก้ไขรูปภาพ
			\item หมายเลข 3 คือ กรอกข้อมูลร้านทั้งหมด
	
			
		\end{itemize}
		
		\item เมื่อเจ้าของร้านเลือกที่เมนูรายการ ระบบจะแสดงหน้ารายการ ดังแสดงในรูปที่ \ref{Fig:list}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/list}
			\caption{หน้าจอรายการร้าน}
			\label{Fig:list}
		\end{figure}
		จากรูปที่ \ref{Fig:list} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ ปุ่มบวกใช้เพื่อเพิ่มข้อมูลรายการ
			\item หมายเลข 2 คือ ปุ่มสำหรับแก้ไขข้อมูลรายการ
			\item หมายเลข 3 คือ ปุ่มสำหรับลบข้อมูลรายการ
		\end{itemize}
		
		\item เมื่อเจ้าของร้านกดที่ปุ่มข้อมูลช่าง ระบบจะทำการแสดงหน้าข้อมูลช่าง ดังแสดงในรูปที่ \ref{Fig:qely}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/qely}
			\caption{หน้าจอข้อมูลช่าง}
			\label{Fig:qely}
		\end{figure}	
		จากรูปที่ \ref{Fig:qely} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มข้อมูลช่าง
		\end{itemize}
		
			\item เมื่อเจ้าของร้านเลือกที่เมนูดูคิวจอง ระบบจะแสดงหน้าข้อมูลการจองคิว  ดังแสดงในรูปที่ \ref{Fig:shopqely}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopqely}
			\caption{หน้าจอดูการจองคิว}
			\label{Fig:shopqely}
		\end{figure}	
		จากรูปที่ \ref{Fig:shopqely} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ เลือกวันที่ที่ต้องการดูการจองคิว
		\end{itemize}
		
		\item เมื่อเจ้าของร้านเลือกที่เมนูเพิ่มรูปภาพ ดังแสดงในรูปที่ \ref{Fig:shoppic}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shoppic}
			\caption{หน้าจอเพิ่มรูปภาพ}
			\label{Fig:shoppic}
		\end{figure}	
		จากรูปที่ \ref{Fig:shoppic} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มรูปภาพ
		\end{itemize}
	
\end{itemize}
	\item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับช่าง
   	    \begin{itemize}
		
		\item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:loginb}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
			\caption{หน้าจอเข้าสู่ระบบ}
			\label{Fig:loginb}
		\end{figure}
		จากรูปที่ \ref{Fig:loginb} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
		\end{itemize}
		
		\item หน้าช่างเข้าสู่ระบบสำเร็จ ระบบจะแสดงหน้าโปรไฟล์ ดังแสดงในรูปที่ \ref{Fig:bprofile}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/bprofile}
			\caption{หน้าโปรไฟล์}
			\label{Fig:bprofile}
		\end{figure}
		จากรูปที่ \ref{Fig:bprofile} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ กดปุ่มเพื่ออัพโหลดรูปภาพ
		
		\end{itemize}
		
		\item เมื่อช่างเลือกที่เมนูตารางงาน  ระบบจะแสดงหน้าดูตารางงาน ดังแสดงในรูปที่\ref{Fig:work}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.7\columnwidth]{Figures/7/Manual/work}
			\caption{หน้าตารางงาน}
			\label{Fig:work}
		\end{figure}
		จากรูปที่ \ref{Fig:work} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ เลือกวันที่ที่ต้องการให้แสดงตารางงาน
		
		\end{itemize}
		
		\item เมื่อช่างเลือกที่เมนูภาพผลงาน ระบบจะแสดงหน้าเพิ่มผลงานช่าง ดังแสดงในรูปที่ \ref{Fig:bpic}
		\begin{figure}[H]
			\centering
			\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/bpic}
			\caption{หน้าจอภาพผลงานช่าง}
			\label{Fig:bpic}
		\end{figure}
		จากรูปที่ \ref{Fig:bpic} สามารถอธิบายการใช้งานได้ดังนี้
		\begin{itemize}[label={--}]
			\item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มรูปภาพผลงานช่าง

		\end{itemize}
		
	\end{itemize}

\end{enumerate}
