updete

Document/Latex/3-design.tex

@@ -86,160 +86,170 @@
 	\end{enumerate}
 	
 \section{User Interface Design}
-User Interface Design ของระบบการจองคิวร้านเสริมสวย มีดังนี้
+User Interface Design ของระบบการจองคิวร้านเสริมสวย แบ่งเป็น 3 ส่วน มีดังนี้
 
 	\begin{enumerate}
 		\item ผู้ใช้บริการ \\ 
-		User Interface ผู้ใช้บริการ จะแบ่งออกแบบให้สะดวกต่อการใช้งาน 
+		User Interface ผู้ใช้บริการ จะออกแบบให้สะดวกต่อการใช้งาน 
+		
+			\begin{itemize}
+				\item การออกแบบหน้าจอหลัก
 				\begin{figure}[H]
 					\centering
-				\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/login}
-				\caption{หน้าจอเข้าสู่ระบบ}
-				\label{Fig:หน้าจอเข้าสู่ระบบ}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Home}
+					\caption{หน้าจอหลัก}
+					\label{Fig:Home}
 				\end{figure}
-			จากภาพที่ \ref{Fig:หน้าจอเข้าสู่ระบบ} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ
+				จากภาพที่ \ref{Fig:Home}  แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน  เพื่ออำนวยความสะดวกต่อผู้ใช้งาน ในหน้าหลักได้รวบรวมข้อมูลสรุปของร้านและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูจองคิว รายละเอียดร้านและข้อมูลรีวิว
+			
+				\item การออกแบบหน้าจอข้อมูลร้าน
 				\begin{figure}[H]
 					\centering
-				\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shop}
 					\caption{หน้าจอข้อมูลร้าน}
-				\label{Fig:หน้าจอข้อมูลร้าน}
+					\label{Fig:Shop}
 				\end{figure}
-			จากภาพที่ \ref{Fig:หน้าจอข้อมูลร้าน} แสดงหน้าจอข้อมูลรา้นเพื่อใช้ตัดสินใจในกาเลือกรจองคิวร้านเสริมสวย
+				จากภาพที่ \ref{Fig:Shop}  แสดงหน้าจอข้อมูลรายละเอียดภายในร้าน
+				\newpage
+				\item การออกแบบหน้าจอการจองคิว
 				\begin{figure}[H]
 					\centering
-				\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed}
-				\caption{หน้าจอข้อมูลแต่ละร้าน}
-				\label{Fig:หน้าจอข้อมูลแต่ละร้าน}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopgueue}
+					\caption{หน้าจอการจองคิว}
+					\label{Fig:Shopgueue}
 				\end{figure}
-			จากภาพที่ \ref{Fig:หน้าจอข้อมูลแต่ละร้าน}
-			แสดงหน้าจอข้อมูลแต่ละร้าน เพื่อดูข้อมูลและการประชาสัมพันธ์ของร้าน
+				จากภาพที่ \ref{Fig:Shopgueue}  แสดงหน้าจอการจองคิวร้านเสริมสวย ทั้งนี้ผู้ที่มีสิทธิ์ในการจองคิวมีเพียงผู้ใช้งานเท่านั้น
+				\newpage
+				\item การออกแบบหน้าจอดูรายการ
 				\begin{figure}[H]
 					\centering
-				\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/calendar}
-				\caption{หน้าจอการเลือกวันในการจองคิว}
-				\label{Fig:หน้าจอการเลือกวันในการจองคิว}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoplist}
+					\caption{หน้าจอดูรายการ}
+					\label{Fig:Shoplist}
 				\end{figure}
-			จากภาพที่ \ref{Fig:หน้าจอปฎิธินกำหนดการ} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนโดยหน้าจอมีการแสดงปฏิทินและแถวรายการกำหนดการ
-
-		\item High-fidelity wireframes \\ 
-		ใช้งาน High-fidelity wireframes สำหรับการนำเสนอไอเดีย (idea) หรือรูปแบบการ Action ให้แก่ Customer เสมือนงานจริงมากที่สุด ข้อดีคือ สามารถชี้นำการใช้งานจากหน้าหนึ่งไปยังอีกหนึ่งได้ดีด้วยการทำ Motion ระหว่างหน้ารวมทั้งสามารถทำ Interaction กับผู้ใช้งานซึ่งเป็นการสร้างการโต้ตอบการใช้งานกับผู้ใช้ได้ดี
-		\begin{itemize}
-			\item โมบายแอปพลิเคชัน
-			\begin{itemize}
-				\item การออกแบบหน้าจอ splash screen 
+				จากภาพที่ \ref{Fig:Shoplist}  แสดงหน้าจอรายการที่ให้บริการประจำร้าน
+				\newpage
+					\item การออกแบบหน้าจอเขียนรีวิว
 				\begin{figure}[H]
 					\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/splash_screen}
-					\caption{หน้าจอ splash screen}
-					\label{Fig:splash_screen}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopreview}
+					\caption{หน้าจอเขียนรีวิว}
+					\label{Fig:Shopreview}
 				\end{figure}
-				จากภาพที่ \ref{Fig:splash_screen} แสดงหน้าจอ splash screen ใช้ในการแสดงทุกครั้งที่ผู้ใช้เปิดแอปพลิเคชันโดยวัตถุประสงค์การทำงานของหน้านี้คือเพื่อใช้แสดงขณะที่แอปพลิเคชันทำการประมวลผลข้อมูลบนพื้นหลัง (Background process) เช่น การตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้คนปัจจุบัน เป็นต้น
-				\item การออกแบบหน้าจอเข้าสู่ระบบ
+				จากภาพที่ \ref{Fig:Shopreview}  แสดงหน้าจอการเขียนรีวิว ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงผู้ใช้งานเท่านั้น
+				\newpage
+					\item การออกแบบหน้าจอลงทะเบียน
 				\begin{figure}[H]
 					\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_in}
-					\caption{หน้าจอเข้าสู่ระบบ}
-					\label{Fig:sign_in}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/register}
+					\caption{หน้าจอลงทะเบียน}
+					\label{Fig:Register}
 				\end{figure}
-				จากภาพที่ \ref{Fig:sign_in} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบเมื่อผู้ใช้ยังไม่ได้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ ซึ่งการเข้าสู่ระบบจะทำเพียงครั้งเดียวเท่านั้น เมื่อผู้ใช้เปิดการทำงานแอปพลิชันใหม่ในครั้งถัดไประบบจะระบุข้อมูลของผู้ใช้งานอัตโนมัติ
-				\item การออกแบบหน้าจอสมัครสมาชิก
+				จากภาพที่ \ref{Fig:Register}  แสดงหน้าจอการลงทะเบียนของผู้ใช้บริการ เพื่อใช้ในการเข้าสู่ระบบ
+				\item การออกแบบหน้าจอเข้าสู่ระบบ
 				\begin{figure}[H]
 					\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_up}
-					\caption{หน้าจอสมัครสมาชิก}
-					\label{Fig:sign_up1}
+					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Login}
+					\caption{หน้าจอเข้าสู่ระบบ}
+					\label{Fig:Login}
 				\end{figure}
-				จากภาพที่ \ref{Fig:sign_up1} แสดงหน้าจอสมัครสมาชิก หากผู้ใช้ยังไม่มีบัญชีในระบบผู้ใช้งานสามารถทำการสมัครสมาชิกเพื่อเข้าใช้งานระบบได้จากหน้าสมัครสมาชิก โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมล รหัสผ่านและรหัสนักศึกษาในการสมัครสมาชิก
-				\item การออกแบบหน้าจอข่าวสารและประชาสัมพันธ์
+				จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ
+			\end{itemize}
+		\newpage
+			\item เจ้าของร้าน \\ 
+		User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน 
+		
+		\begin{itemize}
+			\item การออกแบบหน้าจอโปรไฟล์ร้าน
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_feed}
-					\caption{หน้าจอข่าวสารและประชาสัมพันธ์}
-					\label{Fig:home_feed}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopprofile}
+				\caption{หน้าจอโปรไฟล์ร้าน}
+				\label{Fig:Shopprofile}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_feed} แสดงหน้าจอข่าวสารหรือประชาสัมพันธ์จากเจ้าหน้าที่หรือผู้ที่เกี่ยวข้อง
-				\item การออกแบบหน้าจอเมนูนำทางหลัก 
+			จากภาพที่ \ref{Fig:Shopprofile}  แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน  เพื่อดูข้อมูลของเจ้าของร้าน 
+			\newpage
+			\item การออกแบบหน้าจอเพิ่มข้อมูลร้าน
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_drawer_nav}
-					\caption{หน้าจอเมนูนำทางหลัก}
-					\label{Fig:home_drawer_nav}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/datashop}
+				\caption{หน้าจอเพิ่มข้อมูลร้าน}
+				\label{Fig:Datashop}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_drawer_nav} แสดงเมนูนำทางหลักที่ใช้นำทางผู้ใช้งานไปยังหน้าจออื่นๆ ภายในแอปพลิเคชัน
-				\item การออกแบบหน้าจอปฏิทินกำหนดการการดำเนินการ
+			จากภาพที่ \ref{Fig:Datashop}  แสดงหน้าจอเพิ่มข้อมูลร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลร้าน
+			\newpage
+			\item การออกแบบหน้าจอเพิ่มรายการ
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_calendar}
-					\caption{หน้าจอปฏิทินกำหนดการการดำเนินการ}
-					\label{Fig:home_calendar}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/list}
+				\caption{หน้าจอเพิ่มรายการ}
+				\label{Fig:List}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_calendar} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี
-				\item การออกแบบหน้าจอสนทนา
+			จากภาพที่ \ref{Fig:List}  แสดงหน้าจอเพิ่มข้อมูลรายการของร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลรายการที่ให้บริการประจำร้าน
+			
+			\item การออกแบบหน้าจอเพิ่มข้อมูลช่าง
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_chat}
-					\caption{หน้าจอสนทนา}
-					\label{Fig:home_chat}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/qely}
+				\caption{หน้าจอเพิ่มข้อมูลช่าง}
+				\label{Fig:Qely}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_chat} นักศึกษาสามารถส่งข้อความไปยังเจ้าหน้าที่เพื่อติดต่อสอบถามข้อมูลกับทางเจ้าหน้าที่ได้โดยตรง
-				\item การออกแบบหน้าจอเอกสารที่เกี่ยวข้อง
+			จากภาพที่ \ref{Fig:Qely}  แสดงหน้าจอข้อมูลช่าง เพื่อเพิ่มและอสดงข้อมูลช่างประจำร้าน
+			\newpage
+			\item การออกแบบหน้าจอดูการจองคิว
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_doc}
-					\caption{หน้าจอเอกสารที่เกี่ยวข้อง}
-					\label{Fig:home_doc}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopqely}
+				\caption{หน้าจอดูการจองคิว}
+				\label{Fig:ShopQely}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_doc} นักศึกษาสามารถดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี เช่น ข้อกำหนดและคุณสมบัติของผู้กู้ยืม เป็นต้น ซึ่งเอกสารได้ถูกอัพโหลดไว้โดยเจ้าหน้าที่
-				\item การออกแบบหน้าจอจองวันที่และเวลาส่งเอกสาร
+			จากภาพที่ \ref{Fig:ShopQely}  แสดงหน้าจอการจองคิว เพื่อให้เจ้าของร้านดูข้อมูลการจองคิวจากผู้ใช้งาน
+			\item การออกแบบหน้าจอเพิ่มรูปภาพ
 			\begin{figure}[H]
 				\centering
-					\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_booking}
-					\caption{หน้าจอจองวันที่และเวลาส่งเอกสาร}
-					\label{Fig:home_booking}
+				\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoppic}
+				\caption{หน้าจอเพิ่มรูปภาพ}
+				\label{Fig:Shoppic}
 			\end{figure}
-				จากภาพที่ \ref{Fig:home_booking}  เมื่อเจ้าหน้าที่ทำการเพิ่มวันที่และช่วงเวลาในการส่งเอกสาร นักศึกษาสามาจองวันที่และเวลาในการส่งเอกสารฉบับจริงของตนได้จากหน้าจอดังกล่าวโดยมีเงื่อนไขคือนักศึกษาผู้ที่จะทำการส่งเอกสารฉบับจริงจำเป็นต้องส่งภาพสำเนาเอกสารผ่านทางระบบเพื่อให้เจ้าหน้าที่ยืนยันความถูกต้องเสียก่อน
+			จากภาพที่ \ref{Fig:Shoppic}  แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัปโหลดรุปภาพเฉพาะเจ้าของร้าน
+		
 		\end{itemize}
-			\item เว็บแอปพลิเคชัน
+		\newpage
+	\item เจ้าของร้าน \\ 
+	User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน 
+	
 	\begin{itemize}
-				\item การออกแบบหน้าจอหลัก
+		\item การออกแบบหน้าจอโปรไฟล์ช่าง
 		\begin{figure}[H]
 			\centering
-					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Home}
-					\caption{หน้าจอหลัก}
-					\label{Fig:Home}
+			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bprofile}
+			\caption{หน้าจอโปรไฟล์ช่าง}
+			\label{Fig:Bprofile}
 		\end{figure}
-				จากภาพที่ \ref{Fig:Home}  แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน  เพื่ออำนวยความสะดวกต่อเจ้าหน้าที่ ในหน้าหลักได้รวบรวมข้อมูลสรุปและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูนำทาง ข่าวสารประชาสัมพันธ์และปฏิทินกำหนดการ
-				\item การออกแบบหน้าจอสนทนา
+		จากภาพที่ \ref{Fig:Bprofile}  แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน  เพื่อดูข้อมูลของช่าง
+		\item การออกแบบหน้าจอดูตารางงาน
 		\begin{figure}[H]
 			\centering
-					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Chat}
-					\caption{หน้าจอสนทนา}
-					\label{Fig:Chat}
+			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/work}
+			\caption{หน้าจอดดูตารางงาน}
+			\label{Fig:Work}
 		\end{figure}
-				จากภาพที่ \ref{Fig:Chat}  แสดงหน้าจอสนทนามีการแสดงรายชื่อนักศึกษาและส่วนของห้องสนทนาด้วย
-				\item การออกแบบหน้าจออัพโหลดเอกสาร
-				\begin{figure}[H]
-					\centering
-					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Doc}
-					\caption{หน้าจออัพโหลดเอกสาร}
-					\label{Fig:Doc}
-				\end{figure}
-				จากภาพที่ \ref{Fig:Doc}  แสดงหน้าจออัพโหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงเจ้าหน้าที่เท่านั้น
-				\item การออกแบบหน้าจอเข้าสู่ระบบ
+		จากภาพที่ \ref{Fig:Work} แสดงหน้าจอตารางงาน เฉพาะช่าง
+		\newpage
+		\item การออกแบบหน้าจอเพิ่มรูปภาพผลงานช่าง
 		\begin{figure}[H]
 			\centering
-					\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Login}
-					\caption{หน้าจอเข้าสู่ระบบ}
-					\label{Fig:Login}
+			\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bpic}
+			\caption{หน้าจอเพิ่มรูปภาพผลงานช่าง}
+			\label{Fig:Bpic}
 		\end{figure}
-				จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ
-			\end{itemize}
+		จากภาพที่ \ref{Fig:Bpic} แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัพโหลดรุปภาพผลงานเฉพาะช่าง
 		\end{itemize}
 	\end{enumerate}
 \newpage
 
 \section{Use Case Diagram}
-	Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งในระบบระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
+	Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งระบบจองคิวร้านเสริมสวย ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
 	\begin{table}[H]
 		\caption{สัญลักษณ์ของ Use case Diagram}
 		\label{tab:use-case2}
@@ -262,8 +272,8 @@ User Interface Design ของระบบการจองคิวร้า
 	\end{table}
 
 	\begin{figure}[H]
-		\includegraphics[width=1.2\textwidth]{Figures/3/usecase}
-		\caption{Use Case Diagram ของระบบ XX}
+	\includegraphics[width=1.05\textwidth]{Figures/3/Usecase}
+	\caption{Use Case Diagram ของระบบ จองคิวร้านเสริมสวย}
 		\label{Fig:usecase}
 	\end{figure}
 	
@@ -272,32 +282,39 @@ User Interface Design ของระบบการจองคิวร้า
 		\caption{อธิบาย Use Case หน้าที่ของระบบ ในภาพที่ \ref{Fig:usecase}}
 		\label{tab:usecase}
 		\resizebox{\totalheight}{!}{\textwidth}{%
-			\begin{tabular}{|c|p{10cm}|}
+			\begin{tabular}{|c|p{8cm}|}
 				\hline
 				\multicolumn{1}{|c|}{\textbf{Use Case}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
-				ดูประชาสัมพันธ์ & นักศึกษาสามารถดูประชาสัมพันธ์ได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
-				ดูปฏิทินกำหนดการ & นักศึกษาสามารถเปิดดูปฏิทินวันที่และเวลากำหนดการของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์วิทยาลัยอุบลราชธานี โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
-				ดาวน์โหลดเอกสาร & นักศึกษาดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนกู้ยีมการศึกษาคณะวิทยาศาสตร์มหาวิทยาลัยอุบลราชธานีได้โดยไม่จำเป็นต้องทำการเข้าสู่ระบบก่อน \\ \hline
-				ดู FAQs & หน้าแสดงรายการคำถามที่พบบ่อย \\ \hline
-				จองคิวส่งเอกสาร & เมื่อนักศึกษาเข้าสู่ระบบเรียบร้อยแล้วนักศึกษา สามารถจองคิววันที่และเวลาในการส่งเอกสารฉบับจริงหลังจากที่ได้รับการตรวจสอบโดยเจ้าหน้าที่เรียบร้อยแล้ว \\ \hline
-				ส่งเอกสารตรวจสอบ & นักศึกษาสามารถส่งเอกสารหน้าที่ตรวจสอบโดยการถ่ายรูปแล้วทำการอัพโหลดเข้าสู่ระบบ เมื่อเจ้าหน้าที่ตรวจสอบเรียบร้อยแล้วจะยืนยันสถานะของเอกสารอีกที \\ \hline
-				สนทนา & นักศึกษาสามารถสอบถามข้อมูลของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ได้จากช่องสนทนา \\ \hline
-				จัดการกำหนดการส่งเอกสาร & ใช้สำหรับเจ้าหน้าที่เพื่อ เพิ่ม แก้ไขหรือลบกำหนดการส่งเอกสารของนักศึกษา \\ \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{tab:usecase-15}}
-			\label{tab:usecase-15}
+			\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
+				ดูการจองคิว & ใช้สำหรับเจ้าของร้านเพื่อ ดูคิวจองที่ผู้ใช้บริการได้ทำการจองคิว \\ \hline
+				เพิ่มข้อมูลช่าง & ใช้สำหรับเจ้าของร้านเพื่อ เพิ่ม ข้อมูลช่าง \\ \hline
+				แก้ไขข้อมูล & ใช้สำหรับช่างเพื่อ  แก้ไขข้อมูลส่วนตัว \\ \hline
+				ดูตารางงาน & ใช้สำหรับช่างเพื่อ ดูตารางงาน \\ \hline
+				post ภาพผลงานของตัวเอง & ใช้สำหรับช่างเพื่อ post ภาพผลงาน \\ \hline
 				\end{tabular}%
 			}
 		\end{table}
@@ -305,114 +322,113 @@ User Interface Design ของระบบการจองคิวร้า
 	% \usepackage{graphicx}
 	\begin{table}[H]
 		\centering
-		\caption{Use Case ดูประชาสัมพันธ์}
+		\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{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 ดูปฏิทินกำหนดการ}
+		\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
+				\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 ดาวน์โหลดเอกสาร}
+		\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
-				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 2 : หากผู้ใช้โมบายแอปพลิเคชันไม่เปิดสิทธิ์การอ่านและเขียนไฟล์บนความจำสำรอง จะไม่สามารถดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \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 ดู FAQs}
+			\caption{Use Case ดูผลงานของร้านเสริมสวย}
 			\label{tab:usecase}
 			\resizebox{\totalheight}{!}{\textwidth}{%
 				\begin{tabular}{|p{10cm}|p{10cm}|}
 					\hline
-					\multicolumn{1}{|c|}{\textbf{Use Case Title : ดู FAQs}} & \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
+					\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 จองคิวส่งเอกสาร}
+			\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
+					\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 ส่งเอกสารตรวจสอบ}
+			\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
-					\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากผู้ใช้โมบายแอปพลิเคชันไม่เปิดสิทธิ์ใช้งานกล้อง จะไม่สามารถถ่ายภาพเพื่อส่งเอกสารตรวจสอบได้} \\ \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 สนทนา}
+			\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
+					\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}	
@@ -448,76 +464,136 @@ User Interface Design ของระบบการจองคิวร้า
 %		 \end{table}	
 		  \begin{table}[H]
 		  	\centering
-		  	\caption{Use Case จัดการกำหนดการส่งเอกสาร}
+		  	\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 : 10 }} \\ \hline
-		  			\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \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
+			  			\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 จัดการประชาสัมพันธ์}
+		  	\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{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
+		  			\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 จัดการปฏิทินกำหนดการ}
+	  	\caption{Use Case แก้ไขข้อมูล}
 	  	\label{tab:usecase}
 	  	\resizebox{\totalheight}{!}{\textwidth}{%
 	  		\begin{tabular}{|c|p{10cm}|}
 	  			\hline
-		    			\multicolumn{1}{|c|}{\textbf{Use Case Title : จัดการปฏิทินกำหนดการ}} & \multicolumn{1}{c|}{\textbf{Use case Id : 12 }} \\ \hline
-		    			\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \hline
+	  			\multicolumn{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
+	  			\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 จัดการเอกสาร}
+	  		\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{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
+	  				\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 แจ้งเตือนนักศึกษา}
+  		\caption{Use Case post ภาพผลงานของตัวเอง}
   		\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{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 : แจ้งเตือนไปยังนักศึกษาเมื่อมีการเพิ่มประชาสัมพันธ์โดยเจ้าหน้าที่} \\ \hline
-			  			\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากนักศึกษาที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถรับแจ้งเตือนเมื่อมีการเพิ่มประชาสัมพันธ์โดยเจ้าหน้าที่} \\ \hline
+  				\multicolumn{2}{|p{\linewidth}|}{Main Flow : post ภาพผลงานของตัวเองได้} \\ \hline
+  				\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถpost ภาพผลงานของตัวเองได้} \\ \hline
   			\end{tabular}%
   		}
   	\end{table}	
@@ -720,69 +796,146 @@ User Interface Design ของระบบการจองคิวร้า
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.95\columnwidth]
-		{Figures/3/Sequence/feed}
-		\caption{Sequence Diagram การแสดงข่าวสาร}
-		\label{Fig:Sequence-feed}
+		{Figures/3/Sequence/home}
+		\caption{Sequence Diagram ข้อมูลร้าน}
+		\label{Fig:Sequence-home}
 	\end{figure}
   \end{landscape}
 
-	จากภาพที่ \ref{Fig:Sequence-feed} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข่าวสาร ได้ดังนี้ เมื่อ
-	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
-	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส FeedFragment เมื่อ FeedFragment ถูกติดตั้งบน MainActivity เมธอด callData() จะสืบค้นข้อมูลจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส FeedItemAdapter โดยมีการคืนค่าเป็นข้อมูลข่าวสารแต่ละแถวและในขั้นตอนสุดท้ายคลาส FeedFragment จะทำการแสดงรายการข้อมูลข่าวสารทั้งหมดออกทางหน้าจอ หากผู้ใช้มีการกดเลือกข่าวสารบางแถวคลาส FeedFragment จะทำการเรียกใช้ PostDetailActivity เพื่อแสดงรายละเอียดข้อมูลข่าวสารของแถวที่ถูกเลือก
+	จากภาพที่ \ref{Fig:Sequence-home} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลร้าน ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ Shopdata ถูกติดตั้งบน ShowShop เมธอด callData() จะสืบค้นข้อมูลจากฐานข้อมูลบน MySQL (node:shops) และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowShop โดยมีการคืนค่าเป็นข้อมูลร้านแต่ละแถวและในขั้นตอนสุดท้ายคลาส ShowShop จะทำการแสดงรายการข้อมูลร้านทั้งหมดออกทางหน้าจอ หากผู้ใช้มีการกดเลือกร้านบางแถวคลาส ShowShop จะทำการเรียกใช้ ShowShopDetail เพื่อแสดงรายละเอียดข้อมูลร้านของแถวที่ถูกเลือก
+
 	\begin{sidewaysfigure}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.8\columnwidth]
-		{Figures/3/Sequence/calendar}
-		\caption{Sequence Diagram การแสดงปฏิทินกำหนดการ}
-		\label{Fig:Sequence-calendar}
+		{Figures/3/Sequence/shop}
+		\caption{Sequence Diagram การแสดงข้อมูลโปรโมชั่น}
+		\label{Fig:Sequence-shop}
 	\end{figure}
 	\end{sidewaysfigure}
 	\newpage
-	จากภาพที่ \ref{Fig:Sequence-calendar} สามารถอธิบายแผนภาพ Sequence Diagram แสดงปฏิทินกำหนดการ ได้ดังนี้ เมื่อ
-	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
-	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส ScheduleFragment เมื่อ ScheduleFragment ถูกติดตั้งบน MainActivity เมธอด callData() จะสืบค้นข้อมูลกำหนดการของวันปัจจุบันจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส Schedule-ItemAdapter โดยมีการคืนค่าเป็นข้อมูลกำหนดการแต่ละแถวและในขั้นตอนสุดท้ายคลาส Schedule-Fragment จะทำการแสดงรายการกำหนดการวันปัจจุบันออกทางหน้าจอ หากผู้ใช้มีการกดเลือกวันที่ที่ต้องการทราบกำหนดการจากปฏิทินคลาส ScheduleFragment จะทำการเรียกใช้ callData() อีกครั้งโดยสืบค้นข้อมูลกำหนดการของวันที่ถูกเลือกจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส ScheduleItemAdapter โดยมีการคืนค่าเป็นข้อมูลแต่กำหนดการละแถวและในขั้นตอนสุดท้ายคลาส ScheduleFragment จะทำการแสดงรายการกำหนดการวันที่ผู้ใช้เลือกออกทางหน้าจอ
+	จากภาพที่ \ref{Fig:Sequence-shop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงโปรโมชั่น ได้ดังนี้ เมื่อ
+	ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
+	ข้อมูลโปรโมชั่น ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ ข้อมูลโปรโมชั่น ถูกติดตั้งบน ShowPromotion เมธอด callData() จะสืบค้นข้อมูลกำหนดการของวันปัจจุบันจากฐานข้อมูลบน MySQL node:promotions และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowPromotion  โดยขั้นตอนสุดท้ายคลาส ShowPromotion จะทำการแสดงข้อมูลโปรโมชั่นออกทางหน้าจอ
 
 	\begin{sidewaysfigure}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.8\columnwidth]
-		{Figures/3/Sequence/doc}
-		\caption{Sequence Diagram การแสดงดาวน์โหลดเอกสาร}
-		\label{Fig:Sequence-doc}
+		{Figures/3/Sequence/review}
+		\caption{Sequence Diagram การแสดงข้อมูลรีวิว}
+		\label{Fig:Sequence-review}
 	\end{figure}
 	\end{sidewaysfigure}
 	\newpage
-	จากภาพที่ \ref{Fig:Sequence-doc} สามารถอธิบายแผนภาพ Sequence Diagram แสดงดาวน์โหลดเอกสาร ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
-	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส DocumentsFragment เมื่อ DocumentsFragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะสืบค้นข้อมูลเอกสารทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส DocItem-Adapter โดยมีการคืนค่าเป็นข้อมูลเอกสารแต่ละแถวและในขั้นตอนสุดท้ายคลาส Documents-Fragment จะทำการแสดงรายการกำหนดการวันปัจจุบันออกทางหน้าจอ
+	จากภาพที่ \ref{Fig:Sequence-review} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลรีวิว ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
+	ข้อมูลรีวิว ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ บ้อมูลรีวิว ถูกติดตั้งบน Showreview เมธอด callData() จะสืบค้นข้อมูลรีวิวทั้งหมดจากฐานข้อมูลบน MySQL node:reviews  และส่งข้อมูลที่ได้ไปแปลงที่คลาส Showreview โดยจะทำการแสดงข้อมูลรีวิวออกทางหน้าจอ
 
 	\begin{sidewaysfigure}
 	\begin{figure}[H]
 		\centering
 		\includegraphics[width=0.8\columnwidth]
-		{Figures/3/Sequence/chat}
-		\caption{Sequence Diagram การแสดงบทสนทนา}
-		\label{Fig:Sequence-chat}
+		{Figures/3/Sequence/addreview}
+		\caption{Sequence Diagram การเพิ่มรีวิว}
+		\label{Fig:Sequence-addreview}
 	\end{figure}
 	\end{sidewaysfigure}
 	\newpage
-	จากภาพที่ \ref{Fig:Sequence-chat} สามารถอธิบายแผนภาพ Sequence Diagram แสดงการสนทานา ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+	จากภาพที่ \ref{Fig:Sequence-addreview} สามารถอธิบายแผนภาพ Sequence Diagram แสดงการสนทานา ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
 	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส UserChatFragment เมื่อ UserChatFrag-ment ถูกติดตั้งบน MainActivity เมธอด getMessage() จะสืบค้นข้อมูลประวัติการสนทนาของผู้ใช้คนปัจจุบันทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส MessagesListAdapter โดยมีการคืนค่าเป็นข้อมูลรายการประวัติการสนทนาทั้งหมดและในขั้นตอนสุดท้ายคลาส User-ChatFragment จะทำการแสดงรายการประวัติการสนทนาทั้งหมดออกทางหน้าจอ เมื่อผู้ใช้พิมพ์ข้อความและกดปุ่มส่งระบบจะเรียกให้เมธอด send() เพื่อทำการบันทึกข้อมูลไว้บน Firebase FireStore และทำการแสดงข้อมูลรายการประวัติการสนทนาทั้งหมดที่ถูกอัพเดท
 
 	\begin{sidewaysfigure}
 	\begin{figure}[H]
 		\centering
-		\includegraphics[width=0.8\columnwidth]
-		{Figures/3/Sequence/submit}
+		\includegraphics[width=0.99\columnwidth]
+		{Figures/3/Sequence/booking}
 		\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
-		\label{Fig:Sequence-submit}
+		\label{Fig:Sequence-booking}
 	\end{figure}
 	\end{sidewaysfigure}
 	\newpage
-	จากภาพที่ \ref{Fig:Sequence-submit} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+	จากภาพที่ \ref{Fig:Sequence-booking} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
 	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+	 
+	\begin{sidewaysfigure}
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]
+		{Figures/3/Sequence/addshop}
+		\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
+		\label{Fig:Sequence-addshop}
+	\end{figure}
+\end{sidewaysfigure}
 \newpage
+จากภาพที่ \ref{Fig:Sequence-addshop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
 	 
+	\begin{sidewaysfigure}
+	\begin{figure}[H]
+		\centering
+		\includegraphics[width=0.8\columnwidth]
+		{Figures/3/Sequence/addlist}
+		\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
+		\label{Fig:Sequence-addlist}
+	\end{figure}
+\end{sidewaysfigure}
+\newpage
+จากภาพที่ \ref{Fig:Sequence-addlist} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+	 
+		\begin{sidewaysfigure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]
+			{Figures/3/Sequence/addpromotion}
+			\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
+			\label{Fig:Sequence-addpromotion}
+		\end{figure}
+	\end{sidewaysfigure}
+	\newpage
+	จากภาพที่ \ref{Fig:Sequence-addpromotion} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+ 
+		 	\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 แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+		 Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+		
+			\begin{sidewaysfigure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]
+			{Figures/3/Sequence/addshopimage}
+			\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
+			\label{Fig:Sequence-addshopimage}
+		\end{figure}
+	\end{sidewaysfigure}
+	\newpage
+	จากภาพที่ \ref{Fig:Sequence-addshopimage} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+	 
+		\begin{sidewaysfigure}
+		\begin{figure}[H]
+			\centering
+			\includegraphics[width=0.8\columnwidth]
+			{Figures/3/Sequence/addbeauticianimage}
+			\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
+			\label{Fig:Sequence-addbeauticianimage}
+		\end{figure}
+	\end{sidewaysfigure}
+	\newpage
+	จากภาพที่ \ref{Fig:Sequence-addbeauticianimage} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
+	Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
+	\newpage
 \section{โครงสร้างฐานข้อมูลไฟร์เบส(Firebase Database Stucture)}
 Firebase Database นั้นเป็น Database แบบ NoSQL และเป็น JSON database ที่มีโครงสร้างที่เป็น Key และ Value จัดเก็บข้อมูลในลักษณะโหนด หากต้องการเรียกงานจะเรียกใช้โดย
 การท่องไปยังโหนดที่ต้องการ ส่วนประกอบสัญลักษณ์ที่ใช้ในการเขียนโครงสร้างฐานข้อมูลแบบ Firebase

Document/Latex/5-testing.tex

 \chapter{การทดสอบระบบ}
-การทดสอบการทำงานขอแอนดรอยด์งแอปพลิเคชันระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานีและทดสอบการทำงานในส่วนของเว็บไซต์ โดยทำการทดสอบในลักษณะ Black-box Testing \cite{blackbox} หรือ Data-Driven testing ซึ่งเป็นการเทสแบบที่ไม่สนใจโปรเซส (Process) การทำงานภายในของโปรแกรมว่าทำงานอย่างไร แต่จะเน้นไปที่ Input และ Result ที่ได้มากกว่าว่าการทำงานต่าง ๆ ถูกต้องตามความต้องการ (Requirement) หรือไม่ ซึ่งการทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน และ การใช้งานเว็บแอปพลิเคชัน ได้ผลดังนี้
+การทดสอบการทำงานของเว็บไซต์ โดยทำการทดสอบในลักษณะ Black-box Testing \cite{blackbox} หรือ Data-Driven testing ซึ่งเป็นการเทสแบบที่ไม่สนใจโปรเซส (Process) การทำงานภายในของโปรแกรมว่าทำงานอย่างไร แต่จะเน้นไปที่ Input และ Result ที่ได้มากกว่าว่าการทำงานต่าง ๆ ถูกต้องตามความต้องการ (Requirement) หรือไม่ ซึ่งการทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน และ การใช้งานเว็บแอปพลิเคชัน ได้ผลดังนี้
 
 	\section{การทดสอบการใช้งานแอนดรอยด์แอปพลิเคชัน}
 		\begin{itemize}

Document/Latex/6-conclusion.tex

@@ -39,14 +39,13 @@
 \section{ปัญหาและอุปสรรคในการพัฒนา}
   \begin{enumerate}
     
-    \item เนื่องจากทางผู้พัฒนามีความประสงค์ให้ระบบนี้สามารถใช้งานได้จริง ดังนั้น การพัฒนาในตอนนี้ยังมีข้อจำกัดเรื่องขนาดของเอกสารที่จัดเก็บบนไฟร์เบสที่สามารถอัพโหลดเข้าสู่ระบบสูงสุดเพียง 5 GB ซึ่งหากระบบถูกใช้งานจริงจำนวนข้อมูลในระบบจะเกินจำนวนที่ไฟร์เบสให้ใช้งานฟรี \\ 
+    \item เนื่องจากทางผู้พัฒนามีความประสงค์ให้ระบบนี้สามารถใช้งานได้จริง ดังนั้น การพัฒนาในตอนนี้ยังมีข้อจำกัดเรื่องขนาดของข้อมูลที่จัดเก็บบนไฟร์เบสที่สามารถอัพโหลดเข้าสู่ระบบสูงสุดเพียง 5 GB ซึ่งหากระบบถูกใช้งานจริงจำนวนข้อมูลในระบบจะเกินจำนวนที่ไฟร์เบสให้ใช้งานฟรี \\ 
     แนวทางการแก้ไข : ทำการบีบอัดข้อมูลให้มีขนาดเล็กลง ส่วนในอนาคตอาจจำเป็นต้องศึกษาแนวทางการสร้างเซิฟเวอร์ (Server) เป็นของระบบเอง
     
   \end{enumerate}
 
 \section{แนวทางการพัฒนาต่อ}
 \begin{enumerate}
-	\item สร้าง Web server ของระบบซึ่งเป็นโปรแกรมที่มีหน้าที่ให้บริการด้านการจัดการเว็บไซต์และ Database server ซึ่งเป็นโปรแกรมที่ทำหน้าที่ให้บริการด้านการจัดการดูแลข้อมูลต่าง ๆ ภายในเว็บไซต์ โปรแกรมที่มีการใช้งานส่วนใหญ่เป็น mysql, postgresql, DB2
  	\item การพัฒนาช่องทางการติดต่อ
  	\item เจ้าของร้านสามารถยืนยันการจองคิวได้
  	\item การพัฒนาเป็นแอปพลิเคชัน 

Source/Backend/controllers/list/index.js

@@ -62,6 +62,24 @@ exports.getListuser = async (req, res) => {
     });
   }
 };
+exports.getListshop = async (req, res) => {
+  try {
+    const listshop = req.params.shop;
+    let list = await List.findAll({
+      where: {
+        shop: listshop
+      }
+    });
+    console.log('list', list)
+    res.status(200).send(list);
+  } catch (err) {
+    // console.log(err);
+    // res.sendStatus(401);
+    res.send({
+      error: err.message
+    });
+  }
+};
 
 exports.updateList = async (req, res) => {
   try {

Source/Backend/controllers/shop/index.js

@@ -27,8 +27,8 @@ exports.deleteshop = async (req, res) => {
     const shopId = req.params.shopId;
     await Shop.destroy({
       where: {
-        id: shopId
-      }
+        id: shopId,
+      },
     });
     res.status(200).send("success");
   } catch (err) {
@@ -42,8 +42,8 @@ exports.getShopId = async (req, res) => {
     const shopId = req.params.id;
     let shop = await Shop.findOne({
       where: {
-        id: shopId
-      }
+        id: shopId,
+      },
     });
     res.status(200).send(shop);
   } catch (err) {
@@ -65,13 +65,13 @@ exports.updateShop = async (req, res) => {
 };
 exports.getUserId = async (req, res) => {
   try {
-    const userId = req.params.id;
-    let shop = await Shop.findOne({
+    const userId = req.params.userId;
+    let response = await Shop.findOne({
       where: {
-        userId: id
-      }
+       userId: userId,
+      },
     });
-    res.status(200).send(shop);
+    res.status(200).send(response);
   } catch (err) {
     console.log(err);
     res.sendStatus(401);

Source/Backend/models/shopimage/index.js

@@ -19,7 +19,7 @@ module.exports = db.sequelize.define("shopimages", {
     referencesKey: 'id'
   },
   image: {
-    type: Sequelize.BLOB
+    type: Sequelize.BLOB('long')  
   },
   type: {
     type: Sequelize.STRING

Source/Backend/routers/list/index.js

@@ -8,6 +8,7 @@ router.post("/add", listController.addlist);
 router.get('/all', listController.getList);
 router.delete('/delete/:listId',listController.deletelist);
 router.get('/getListuser/:userId',listController.getListuser);
+router.get("/getListshop/:shop", listController.getListshop)
 router.put('/updateList/id',listController.updateList);
 
 

Source/Backend/routers/shop/index.js

@@ -7,7 +7,7 @@ router.post("/add", shopController.addShop);
 router.get("/all", shopController.getShop);
 router.delete("/delete/:shopId", shopController.updateShop);
 router.get("/getShopId/:id", shopController.getShopId);
-router.put("/updateshop/id", shopController.updateShop);
+router.put("/updateshop/:id", shopController.updateShop);
 router.get("/getUserId/:userId", shopController.getUserId);
 router.put("/updateuserId/:userId", shopController.updateuserId);
 

Source/Backend/routers/storage/index.js

@@ -4,25 +4,23 @@ const router = express.Router();
 const storage = require('../../multer');
 const ShopImage = require('../../models/shopimage');
 
-router.post('/upload/shop/:userId', storage.single('images',5), async (req, res) => {
+router.post('/upload/shop/:shopId', storage.array('images', 5), async (req, res) => {
    
-    console.warn(req.files)
-    
-    const images = req.files;
-    for (let i = 0; i < images.length; i++) {
-        await ShopImage.create({ 
-            shop_id: req.params.shop_id,
-            user_id: req.params.userId,
-            image: images[i].buffer,
-            type: images[i].mimetype
-        });
-    }
-    
-    res.send('success')
+    console.log(images)
+    // const images = req.files;
+    // for (let i = 0; i < images.length; i++) {
+    //     await ShopImage.create({
+    //         shop_id: req.params.productId,
+    //         userId: req.params.productId,
+    //         image: images[i].buffer,
+    //         type: images[i].mimetype
+    //     });
+    // }
+    // res.send('success')
 })
-// get file
-router.get('/file/Shop/:imageId', async (req, res) => {
-    const existingImage = await ShopImage.findOne({
+//get file
+router.get('/file/product/:imageId', async (req, res) => {
+    const existingImage = await ProductImage.findOne({
         where: {
             image_id: req.params.imageId
         }
@@ -32,3 +30,4 @@ router.get('/file/Shop/:imageId', async (req, res) => {
 })
 
 module.exports = router;
+

Source/Backend/server.js

@@ -15,7 +15,7 @@ app.use("/api/shop", router.shop);
 app.use("/api/promotion", router.promotion);
 app.use("/api/review", router.review);
 app.use("/api/booking", router.booking);
-// app.use("/api/storage", router.storage);
+app.use("/api/storage", router.storage);
 
 app.listen(port, () => {
   console.log("Express server listening on port " + port);

Source/b_beauty_project/src/views/BeauticianShopPage/Profile/index.js

@@ -2,27 +2,21 @@ import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
 import { withRouter } from "react-router-dom";
 import compose from "recompose/compose";
-import Input from "@material-ui/core/Input";
-import InputLabel from "@material-ui/core/InputLabel";
-import InputAdornment from "@material-ui/core/InputAdornment";
-import FormControl from "@material-ui/core/FormControl";
-import TextField from "@material-ui/core/TextField";
-import Grid from "@material-ui/core/Grid";
+import {
+  InputAdornment,
+  TextField,
+  Button,
+  Fab
+} from "@material-ui/core";
 import AccountCircle from "@material-ui/icons/AccountCircle";
-import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
 import MailOutlineIcon from "@material-ui/icons/MailOutline";
-import VpnKeyIcon from "@material-ui/icons/VpnKey";
-import Button from "@material-ui/core/Button";
-import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
 import BusinessIcon from "@material-ui/icons/Business";
-import Fab from "@material-ui/core/Fab";
 import EditIcon from "@material-ui/icons/Edit";
-import Paper from "@material-ui/core/Paper";
-import CardMedia from "@material-ui/core/CardMedia";
+import { connect } from "react-redux";
 import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
 import Avatar from "react-avatar";
-
+import axios from "axios";
 const styles = theme => ({
   margin: {
     margin: theme.spacing(1)
@@ -30,9 +24,24 @@ const styles = theme => ({
 });
 
 class Profile extends Component {
-  render() {
-    const { classes } = this.props;
+  state = {
+    user: ""
+  };
 
+  componentDidMount = async () => {
+    const { location, userInfo } = this.props;
+    // const id = userInfo.id;
+    const response = await axios.get(
+      `http://localhost:9000/api/auth/getUserById/${userInfo.id}`
+    );
+    console.log(response.data);
+    this.setState({
+      user: response.data
+    });
+  };
+  render() {
+    const { classes, userInfo } = this.props;
+    const { user } = this.state;
     return (
       <div className="row center">
         <div className="row mt-2 mb-2">
@@ -62,8 +71,10 @@ class Profile extends Component {
             <div ClassName="row">
               <TextField
                 className={classes.margin}
-                id="outlined-uncontrolled"
-                label="ชื่อร้าน"
+                id="name"
+                name="name"
+                value={user.name}
+                label="ชื่อ-นามสกุล"
                 variant="outlined"
                 InputProps={{
                   startAdornment: (
@@ -76,7 +87,9 @@ class Profile extends Component {
 
               <TextField
                 className={classes.margin}
-                id="outlined-uncontrolled"
+                id="email"
+                name="email"
+                value={user.email}
                 label="E_mail"
                 variant="outlined"
                 InputProps={{
@@ -92,41 +105,9 @@ class Profile extends Component {
             <div>
               <TextField
                 className={classes.margin}
-                id="outlined-password-input"
-                label="Password"
-                type="password"
-                autoComplete="current-password"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <VpnKeyIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
-                label="Confirm-Password"
-                type="password"
-                autoComplete="current-password"
-                variant="outlined"
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <VpnKeyIcon />
-                    </InputAdornment>
-                  )
-                }}
-              />
-            </div>
-            <br></br>
-            <div>
-              <TextField
-                className={classes.margin}
-                id="outlined-password-input"
+                id="address"
+                name="address"
+                value={user.address}
                 label="ที่อยู่"
                 autoComplete="address"
                 variant="outlined"
@@ -138,9 +119,12 @@ class Profile extends Component {
                   )
                 }}
               />
+
               <TextField
                 className={classes.margin}
-                id="outlined-password-input"
+                id="tel"
+                name="tel"
+                value={user.tel}
                 label="เบอร์โทร"
                 autoComplete="Phone number"
                 variant="outlined"
@@ -176,4 +160,13 @@ class Profile extends Component {
     );
   }
 }
-export default compose(withStyles(styles), withRouter)(Profile);
+const mapStateToProps = state => ({
+  userInfo: state.user
+});
+
+const mapDispatchToProps = dispatch => {};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(compose(withStyles(styles), withRouter)(Profile));

Source/b_beauty_project/src/views/DataShopPage/Datashop/index.js

@@ -133,7 +133,7 @@ class Datashop extends Component {
     const { location, userInfo } = this.props;
     // const id = location.state.id;
     const response = await axios.get(
-      `http://localhost:9000/api/shop/getuserId/${userInfo.id}`
+      `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
     );
     
     if (response.data) this.setState({ shop: response.data });
@@ -210,11 +210,11 @@ class Datashop extends Component {
 
                       axios
                         .post(
-                          `http://localhost:9000/api/storage/upload/shop/${userInfo.id}`,
+                          `http://localhost:9000/api/storage/upload/shop/${shop.id}`,
 
                           formData,
-                          // shop.id,
-                          // userInfo.id
+                          shop.id,
+                          userInfo.id
                         )
                         .then(response => {
                           console.log("เพิ่มรูปภาพสำเร็จ", response);

Source/b_beauty_project/src/views/HomePage/index.js

@@ -5,6 +5,7 @@ import {
   Button,
   DialogActions,
   DialogContent,
+  Typography,
   DialogContentText,
   DialogTitle,
   Paper,
@@ -28,7 +29,9 @@ import DirectionsIcon from "@material-ui/icons/Directions";
 import ListIcon from "@material-ui/icons/List";
 import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
 import Rating from "@material-ui/lab/Rating";
-
+import MaterialTable from "material-table";
+import moment from "moment";
+import "moment/locale/th";
 const styles = theme => ({
   root: {
     // padding: "2px 4px",
@@ -130,7 +133,9 @@ class HomePage extends Component {
     open: false,
     list: false,
     rating: 0,
-    shops: []
+    shops: [],
+    columns: [{ title: "เวลา", field: "time" }],
+    data: [],
   };
   handleClickOpen = () => {
     this.setState({
@@ -180,6 +185,15 @@ class HomePage extends Component {
       tab: tab,
       shops: response.data
     });
+    // console.log("response", response.data);
+    // let { timeopen, timeclose } = response.data;
+    // timeopen = timeopen.split(":");
+    // timeclose = timeclose.split(":");
+    // let dateClose = new Date();
+    // dateClose.setHours(parseInt(timeclose[0]));
+    // dateClose.setMinutes(parseInt(timeclose[1]));
+    // const result = this.calculate(moment(dateClose), timeopen);
+
   };
 
   handleChangeTab = (event, newValue) => {
@@ -212,7 +226,8 @@ class HomePage extends Component {
     const { classes } = this.props;
     // const tab = this.state.tab;
     // หรือ
-    const { tab, date, open, list, value, rating, shops } = this.state;
+    const { tab, date, open, list, value, rating, shops, columns,
+      data, } = this.state;
     return (
       <div>
         <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />
@@ -297,7 +312,9 @@ class HomePage extends Component {
                   </Button>
                   <Dialog
                     open={open}
-                    onClose={this.handleClose}
+                    fullWidth={true}
+                    maxWidth="md"
+                    onClose={this.handleCloseQ}
                     aria-labelledby="alert-dialog-title"
                     aria-describedby="alert-dialog-description"
                   >
@@ -305,12 +322,13 @@ class HomePage extends Component {
                       {"จองคิว"}
                     </DialogTitle>
                     <DialogContent>
-                      <h6>
-                        วันที่ที่เลือกคือ{" "}
-                        {format(new Date(date), "dd MMMM yyyy", {
-                          locale: th
-                        })}
-                      </h6>
+                      <div className="row">
+                        <div className="col s12 m5">
+                          <div
+                            style={{
+                              maxWidth: "fit-content"
+                            }}
+                          >
                             <DatePicker
                               autoOk
                               orientation="static"
@@ -320,34 +338,19 @@ class HomePage extends Component {
                               value={date}
                               onChange={this.handleChangeDate}
                             />
-                    </DialogContent>
-                    <DialogActions>
-                      <Button
-                        variant="outlined"
-                        onClick={this.handleClose}
-                        color="primary"
-                      >
-                        ยกเลิก
-                      </Button>
-                      <Button
-                        variant="outlined"
-                        color="primary"
-                        onClick={this.ClickOpen}
-                      >
-                        ถัดไป
-                      </Button>
-                    </DialogActions>
-                  </Dialog>
-                  <Dialog
-                    open={list}
-                    onClose={this.Close}
-                    aria-labelledby="max-width-dialog-title"
-                  >
-                    <DialogTitle id="max-width-dialog-title">
-                      กรุณาเลือกข้อมูลการจอง
-                    </DialogTitle>
-                    <DialogContent>
-                      <DialogContentText>
+                          </div>
+                        </div>
+                        <div className="col s12 m7">
+                          <Typography>
+                            วันที่ที่เลือกคือ{" "}
+                            {format(new Date(date), "dd MMMM yyyy", {
+                              locale: th
+                            })}
+                          </Typography>
+                          <div className="mt-2">
+                            <Typography>กรุณาเลือกข้อมูลการจอง</Typography>
+                            <div className="row mt-2">
+                              <div className="col">
                                 <TextField
                                   className={classes.margin}
                                   id="list"
@@ -368,11 +371,16 @@ class HomePage extends Component {
                                   }}
                                 >
                                   {currencieslist.map(option => (
-                            <option key={option.value} value={option.value}>
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
                                       {option.label}
                                     </option>
                                   ))}
                                 </TextField>
+                              </div>
+                              <div className="col">
                                 <TextField
                                   className={classes.margin}
                                   id="list"
@@ -393,19 +401,59 @@ class HomePage extends Component {
                                   }}
                                 >
                                   {currencies.map(option => (
-                            <option key={option.value} value={option.value}>
+                                    <option
+                                      key={option.value}
+                                      value={option.value}
+                                    >
                                       {option.label}
                                     </option>
                                   ))}
                                 </TextField>
-                      </DialogContentText>
+                              </div>
+                              <div className="col s12 mt-2">
+                                <MaterialTable
+                                  title=""
+                                  columns={columns}
+                                  data={data}
+                                  onRowClick={(evt, selectedRow) => {
+                                    console.log("selectedRow", selectedRow);
+                                    this.setState({ selectedRow });
+                                  }}
+                                  options={{
+                                    selection: false,
+                                    search: false,
+                                    showTitle: false,
+                                    toolbar: false,
+                                    rowStyle: rowData => ({
+                                      backgroundColor:
+                                        this.state.selectedRow &&
+                                        this.state.selectedRow.tableData.id ===
+                                          rowData.tableData.id
+                                          ? "#EEE"
+                                          : "#FFF"
+                                    })
+                                  }}
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </DialogContent>
                     <DialogActions>
-                      <Button onClick={this.Close} color="primary">
-                        Cancel
+                      <Button
+                        variant="outlined"
+                        onClick={this.handleCloseQ}
+                        color="secondary"
+                      >
+                        ยกเลิก
                       </Button>
-                      <Button onClick={this.Close} color="primary">
-                        Subscribe
+                      <Button
+                        variant="outlined"
+                        color="primary"
+                        onClick={this.handleSaveQ}
+                      >
+                        ยืนยัน
                       </Button>
                     </DialogActions>
                   </Dialog>

Source/b_beauty_project/src/views/ShopPage/index.js

@@ -136,14 +136,89 @@ const currencies = [
     label: "ช่าง"
   }
 ];
-
+const currenciesreview = [
+  {
+    value: "1",
+    label: "    กรุณาเลือกหัวข้อการรีวิว    "
+  },
+  {
+    value: "2",
+    label: "รีวิวช่าง"
+  },
+  {
+    value: "3",
+    label: "รีวิวร้าน"
+  },
+  {
+    value: "4",
+    label: "การให้บริการ"
+  },
+  {
+    value: "5",
+    label: "การต้อนรับ"
+  },
+  {
+    value: "6",
+    label: "บรรยากาศ"
+  },
+  {
+    value: "7",
+    label: "อื่นๆ"
+  }
+];
+const currenciespoint = [
+  {
+    value: "1",
+    label: "    กรุณาเลือกคะแนน    "
+  },
+  {
+    value: "2",
+    label: "0.5"
+  },
+  {
+    value: "3",
+    label: "1"
+  },
+  {
+    value: "4",
+    label: "1.5"
+  },
+  {
+    value: "5",
+    label: "2"
+  },
+  {
+    value: "6",
+    label: "2.5"
+  },
+  {
+    value: "7",
+    label: "3"
+  },
+  {
+    value: "8",
+    label: "3.5"
+  },
+  {
+    value: "9",
+    label: "4"
+  },
+  {
+    value: "10",
+    label: "4.5"
+  },
+  {
+    value: "11",
+    label: "5"
+  }
+];
 class ShopPage extends Component {
   state = {
     reviweOpen: false,
     list: false,
     date: new Date(),
-    open: true,
-    // open: false,
+    // open: true,
+    open: false,
     shop: null,
     reviwe: {
       topic: "",
@@ -151,8 +226,15 @@ class ShopPage extends Component {
       point: ""
     },
     columns: [{ title: "เวลา", field: "time" }],
+    columnslist: [
+      { title: "ชื่อรายการ", field: "name" },
+      { title: "ราคา", field: "price" },
+
+      { title: "เวลาที่จอง", field: "time" }
+    ],
     data: [],
-    selectedRow: null
+    selectedRow: null,
+    datalist: []
   };
 
   handleClickOpenreview = () => {
@@ -217,6 +299,7 @@ class ShopPage extends Component {
     const id = location.state.id;
     const response = await axios.get(
       `http://localhost:9000/api/shop/getShopId/${id}`
+      // `http://localhost:9000/api/list//getListshop/${id}`
     );
     console.log("response", response.data);
     let { timeopen, timeclose } = response.data;
@@ -227,10 +310,20 @@ class ShopPage extends Component {
     dateClose.setMinutes(parseInt(timeclose[1]));
     const result = this.calculate(moment(dateClose), timeopen);
 
+    // console.log("response.data", response.data);
+    // if (response.data) {
+    //   this.setState({
+    //     datalist: response.data
+    //   });
+    // } else {
+    //   console.log("cannot get shop data");
+    // }
+
     this.setState({
       shop: response.data,
       data: result
     });
+
     // console.log(this.state.shop);
   };
 
@@ -266,7 +359,9 @@ class ShopPage extends Component {
       open,
       columns,
       data,
-      selectedRow
+      datalist,
+      selectedRow,
+      columnslist
     } = this.state;
 
     return (
@@ -303,7 +398,7 @@ class ShopPage extends Component {
                   <Dialog
                     open={list}
                     fullWidth={true}
-                    maxWidth="md"
+                    // maxWidth="mr"
                     onClose={this.Close}
                     aria-labelledby="max-width-dialog-title"
                   >
@@ -312,8 +407,16 @@ class ShopPage extends Component {
                     </DialogTitle>
                     <DialogContent>
                       <DialogContentText>
-                        You can set my maximum width and whether to adapt or
-                        not.
+                        <div className="row">
+                          <MaterialTable
+                            title="รายการ"
+                            columns={columnslist}
+                            data={datalist}
+                            options={{
+                              selection: false
+                            }}
+                          />
+                        </div>
                       </DialogContentText>
                     </DialogContent>
                     <DialogActions>
@@ -609,14 +712,17 @@ class ShopPage extends Component {
                   </Button>
                   <Dialog
                     open={reviweOpen}
+                    // TransitionComponent={Transition}
+                    keepMounted
                     onClose={this.handleClosereview}
-                    aria-labelledby="form-dialog-title"
+                    aria-labelledby="alert-dialog-slide-title"
+                    aria-describedby="alert-dialog-slide-description"
                   >
-                    <DialogTitle id="form-dialog-title">
+                    <DialogTitle id="alert-dialog-slide-title">
                       เขียนรีวิวติชม
                     </DialogTitle>
                     <DialogContent>
-                      <DialogContentText>
+                      <DialogContentText id="alert-dialog-slide-description">
                         <div className={classes.root}>
                           <TextField
                             className={classes.margin}
@@ -637,7 +743,7 @@ class ShopPage extends Component {
                               )
                             }}
                           >
-                            {currencieslist.map(option => (
+                            {currenciesreview.map(option => (
                               <option key={option.value} value={option.value}>
                                 {option.label}
                               </option>
@@ -663,7 +769,7 @@ class ShopPage extends Component {
                               )
                             }}
                           >
-                            {currencieslist.map(option => (
+                            {currenciespoint.map(option => (
                               <option key={option.value} value={option.value}>
                                 {option.label}
                               </option>
@@ -690,11 +796,11 @@ class ShopPage extends Component {
                       </DialogContentText>
                     </DialogContent>
                     <DialogActions>
-                      <Button onClick={this.handleClosereview} color="primary">
-                        Cancel
+                      <Button onClick={this.handleClickOpenreview} color="primary">
+                        ยกเลิก
                       </Button>
-                      <Button onClick={this.handleClosereview} color="primary">
-                        Subscribe
+                      <Button onClick={this.handleClickOpenreview} color="primary">
+                       ยันยัน
                       </Button>
                     </DialogActions>
                   </Dialog>