Skip to content

5
59110440259
Commit 8b75acaa authored by Piyaphorn Arphornsri's avatar Piyaphorn Arphornsri
Browse files
Options

updete

parent 52b77fac
Hide whitespace changes
Inline Side-by-side
Showing with 755 additions and 439 deletions
Document/Latex/3-design.tex
View file @ 8b75acaa
......@@ -86,145 +86,66 @@
\end{enumerate}
\section{User Interface Design}
User Interface Design ของระบบการจองคิวร้านเสริมสวย มีดังนี้
User Interface Design ของระบบการจองคิวร้านเสริมสวย แบ่งเป็น 3 ส่วน มีดังนี้
\begin{enumerate}
\item ผู้ใช้บริการ \\
User Interface ผู้ใช้บริการ จะแบ่งออกแบบให้สะดวกต่อการใช้งาน
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/login}
\caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:หน้าจอเข้าสู่ระบบ}
\end{figure}
จากภาพที่ \ref{Fig:หน้าจอเข้าสู่ระบบ} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed}
\caption{หน้าจอข้อมูลร้าน}
\label{Fig:หน้าจอข้อมูลร้าน}
\end{figure}
จากภาพที่ \ref{Fig:หน้าจอข้อมูลร้าน} แสดงหน้าจอข้อมูลรา้นเพื่อใช้ตัดสินใจในกาเลือกรจองคิวร้านเสริมสวย
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/feed}
\caption{หน้าจอข้อมูลแต่ละร้าน}
\label{Fig:หน้าจอข้อมูลแต่ละร้าน}
\end{figure}
จากภาพที่ \ref{Fig:หน้าจอข้อมูลแต่ละร้าน}
แสดงหน้าจอข้อมูลแต่ละร้าน เพื่อดูข้อมูลและการประชาสัมพันธ์ของร้าน
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/Wireframe/calendar}
\caption{หน้าจอการเลือกวันในการจองคิว}
\label{Fig:หน้าจอการเลือกวันในการจองคิว}
\end{figure}
จากภาพที่ \ref{Fig:หน้าจอปฎิธินกำหนดการ} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนโดยหน้าจอมีการแสดงปฏิทินและแถวรายการกำหนดการ
\item High-fidelity wireframes \\
ใช้งาน High-fidelity wireframes สำหรับการนำเสนอไอเดีย (idea) หรือรูปแบบการ Action ให้แก่ Customer เสมือนงานจริงมากที่สุด ข้อดีคือ สามารถชี้นำการใช้งานจากหน้าหนึ่งไปยังอีกหนึ่งได้ดีด้วยการทำ Motion ระหว่างหน้ารวมทั้งสามารถทำ Interaction กับผู้ใช้งานซึ่งเป็นการสร้างการโต้ตอบการใช้งานกับผู้ใช้ได้ดี
\begin{itemize}
\item โมบายแอปพลิเคชัน
User Interface ผู้ใช้บริการ จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize}
\item การออกแบบหน้าจอ splash screen
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/splash_screen}
\caption{หน้าจอ splash screen}
\label{Fig:splash_screen}
\end{figure}
จากภาพที่ \ref{Fig:splash_screen} แสดงหน้าจอ splash screen ใช้ในการแสดงทุกครั้งที่ผู้ใช้เปิดแอปพลิเคชันโดยวัตถุประสงค์การทำงานของหน้านี้คือเพื่อใช้แสดงขณะที่แอปพลิเคชันทำการประมวลผลข้อมูลบนพื้นหลัง (Background process) เช่น การตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้คนปัจจุบัน เป็นต้น
\item การออกแบบหน้าจอเข้าสู่ระบบ
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_in}
\caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:sign_in}
\end{figure}
จากภาพที่ \ref{Fig:sign_in} แสดงหน้าจอสำหรับให้ผู้ใช้ทำการเข้าสู่ระบบเมื่อผู้ใช้ยังไม่ได้ทำการเข้าสู่ระบบ โดยจำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อใช้ในการเข้าสู่ระบบ ซึ่งการเข้าสู่ระบบจะทำเพียงครั้งเดียวเท่านั้น เมื่อผู้ใช้เปิดการทำงานแอปพลิชันใหม่ในครั้งถัดไประบบจะระบุข้อมูลของผู้ใช้งานอัตโนมัติ
\item การออกแบบหน้าจอสมัครสมาชิก
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/sign_up}
\caption{หน้าจอสมัครสมาชิก}
\label{Fig:sign_up1}
\end{figure}
จากภาพที่ \ref{Fig:sign_up1} แสดงหน้าจอสมัครสมาชิก หากผู้ใช้ยังไม่มีบัญชีในระบบผู้ใช้งานสามารถทำการสมัครสมาชิกเพื่อเข้าใช้งานระบบได้จากหน้าสมัครสมาชิก โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมล รหัสผ่านและรหัสนักศึกษาในการสมัครสมาชิก
\item การออกแบบหน้าจอข่าวสารและประชาสัมพันธ์
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_feed}
\caption{หน้าจอข่าวสารและประชาสัมพันธ์}
\label{Fig:home_feed}
\end{figure}
จากภาพที่ \ref{Fig:home_feed} แสดงหน้าจอข่าวสารหรือประชาสัมพันธ์จากเจ้าหน้าที่หรือผู้ที่เกี่ยวข้อง
\item การออกแบบหน้าจอเมนูนำทางหลัก
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_drawer_nav}
\caption{หน้าจอเมนูนำทางหลัก}
\label{Fig:home_drawer_nav}
\end{figure}
จากภาพที่ \ref{Fig:home_drawer_nav} แสดงเมนูนำทางหลักที่ใช้นำทางผู้ใช้งานไปยังหน้าจออื่นๆ ภายในแอปพลิเคชัน
\item การออกแบบหน้าจอปฏิทินกำหนดการการดำเนินการ
\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{Figures/3/UIMobile/home_calendar}
\caption{หน้าจอปฏิทินกำหนดการการดำเนินการ}
\label{Fig:home_calendar}
\end{figure}
จากภาพที่ \ref{Fig:home_calendar} แสดงหน้าจอปฏิทินกำหนดการการดำเนินการเพื่อให้ผู้ใช้สามารถตรวจสอบกำหนดการวันที่และเวลาในการดำเนินงานของกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี
\item การออกแบบหน้าจอสนทนา
\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/Home}
\caption{หน้าจอหลัก}
\label{Fig:Home}
\end{figure}
จากภาพที่ \ref{Fig:home_chat} นักศึกษาสามารถส่งข้อความไปยังเจ้าหน้าที่เพื่อติดต่อสอบถามข้อมูลกับทางเจ้าหน้าที่ได้โดยตรง
\item การออกแบบหน้าจอเอกสารที่เกี่ยวข้อง
จากภาพที่ \ref{Fig:Home} แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน เพื่ออำนวยความสะดวกต่อผู้ใช้งาน ในหน้าหลักได้รวบรวมข้อมูลสรุปของร้านและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูจองคิว รายละเอียดร้านและข้อมูลรีวิว
\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/shop}
\caption{หน้าจอข้อมูลร้าน}
\label{Fig:Shop}
\end{figure}
จากภาพที่ \ref{Fig:home_doc} นักศึกษาสามารถดาวน์โหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี เช่น ข้อกำหนดและคุณสมบัติของผู้กู้ยืม เป็นต้น ซึ่งเอกสารได้ถูกอัพโหลดไว้โดยเจ้าหน้าที่
\item การออกแบบหน้าจอจองวันที่และเวลาส่งเอกสาร
จากภาพที่ \ref{Fig:Shop} แสดงหน้าจอข้อมูลรายละเอียดภายในร้าน
\newpage
\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/shopgueue}
\caption{หน้าจอการจองคิว}
\label{Fig:Shopgueue}
\end{figure}
จากภาพที่ \ref{Fig:home_booking} เมื่อเจ้าหน้าที่ทำการเพิ่มวันที่และช่วงเวลาในการส่งเอกสาร นักศึกษาสามาจองวันที่และเวลาในการส่งเอกสารฉบับจริงของตนได้จากหน้าจอดังกล่าวโดยมีเงื่อนไขคือนักศึกษาผู้ที่จะทำการส่งเอกสารฉบับจริงจำเป็นต้องส่งภาพสำเนาเอกสารผ่านทางระบบเพื่อให้เจ้าหน้าที่ยืนยันความถูกต้องเสียก่อน
\end{itemize}
\item เว็บแอปพลิเคชัน
\begin{itemize}
\item การออกแบบหน้าจอหลัก
จากภาพที่ \ref{Fig:Shopgueue} แสดงหน้าจอการจองคิวร้านเสริมสวย ทั้งนี้ผู้ที่มีสิทธิ์ในการจองคิวมีเพียงผู้ใช้งานเท่านั้น
\newpage
\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/shoplist}
\caption{หน้าจอดูรายการ}
\label{Fig:Shoplist}
\end{figure}
จากภาพที่ \ref{Fig:Home} แสดงหน้าจอหลักบนเว็บแอปพลิเคชัน เพื่ออำนวยความสะดวกต่อเจ้าหน้าที่ ในหน้าหลักได้รวบรวมข้อมูลสรุปและเมนูเข้าถึงด่วนซึ่งแบ่งเป็น 3 ส่วนหลักได้แก่ เมนูนำทาง ข่าวสารประชาสัมพันธ์และปฏิทินกำหนดการ
\item การออกแบบหน้าจอสนทนา
จากภาพที่ \ref{Fig:Shoplist} แสดงหน้าจอรายการที่ให้บริการประจำร้าน
\newpage
\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/shopreview}
\caption{หน้าจอเขียนรีวิว}
\label{Fig:Shopreview}
\end{figure}
จากภาพที่ \ref{Fig:Chat} แสดงหน้าจอสนทนามีการแสดงรายชื่อนักศึกษาและส่วนของห้องสนทนาด้วย
\item การออกแบบหน้าจออัพโหลดเอกสาร
จากภาพที่ \ref{Fig:Shopreview} แสดงหน้าจอการเขียนรีวิว ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงผู้ใช้งานเท่านั้น
\newpage
\item การออกแบบหน้าจอลงทะเบียน
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/Doc}
\caption{หน้าจออัพโหลดเอกสาร}
\label{Fig:Doc}
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/register}
\caption{หน้าจอลงทะเบียน}
\label{Fig:Register}
\end{figure}
จากภาพที่ \ref{Fig:Doc} แสดงหน้าจออัพโหลดเอกสารที่เกี่ยวข้องกับกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ทั้งนี้ผู้ที่มีสิทธิ์ในการอัพโหลดเอกสารมีเพียงเจ้าหน้าที่เท่านั้น
จากภาพที่ \ref{Fig:Register} แสดงหน้าจอการลงทะเบียนของผู้ใช้บริการ เพื่อใช้ในการเข้าสู่ระบบ
\item การออกแบบหน้าจอเข้าสู่ระบบ
\begin{figure}[H]
\centering
......@@ -234,12 +155,101 @@ User Interface Design ของระบบการจองคิวร้า
\end{figure}
จากภาพที่ \ref{Fig:Login} แสดงหน้าจอการเข้าสู่ระบบของผู้ใช้โดยผู้ใช้จำเป็นต้องกรอกข้อมูลอีเมลและรหัสผ่านเพื่อเข้าใช้งานระบบ
\end{itemize}
\newpage
\item เจ้าของร้าน \\
User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize}
\item การออกแบบหน้าจอโปรไฟล์ร้าน
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopprofile}
\caption{หน้าจอโปรไฟล์ร้าน}
\label{Fig:Shopprofile}
\end{figure}
จากภาพที่ \ref{Fig:Shopprofile} แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน เพื่อดูข้อมูลของเจ้าของร้าน
\newpage
\item การออกแบบหน้าจอเพิ่มข้อมูลร้าน
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/datashop}
\caption{หน้าจอเพิ่มข้อมูลร้าน}
\label{Fig:Datashop}
\end{figure}
จากภาพที่ \ref{Fig:Datashop} แสดงหน้าจอเพิ่มข้อมูลร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลร้าน
\newpage
\item การออกแบบหน้าจอเพิ่มรายการ
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/list}
\caption{หน้าจอเพิ่มรายการ}
\label{Fig:List}
\end{figure}
จากภาพที่ \ref{Fig:List} แสดงหน้าจอเพิ่มข้อมูลรายการของร้าน เพื่อให้เจ้าของร้านเพิ่มข้อมูลรายการที่ให้บริการประจำร้าน
\item การออกแบบหน้าจอเพิ่มข้อมูลช่าง
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/qely}
\caption{หน้าจอเพิ่มข้อมูลช่าง}
\label{Fig:Qely}
\end{figure}
จากภาพที่ \ref{Fig:Qely} แสดงหน้าจอข้อมูลช่าง เพื่อเพิ่มและอสดงข้อมูลช่างประจำร้าน
\newpage
\item การออกแบบหน้าจอดูการจองคิว
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shopqely}
\caption{หน้าจอดูการจองคิว}
\label{Fig:ShopQely}
\end{figure}
จากภาพที่ \ref{Fig:ShopQely} แสดงหน้าจอการจองคิว เพื่อให้เจ้าของร้านดูข้อมูลการจองคิวจากผู้ใช้งาน
\item การออกแบบหน้าจอเพิ่มรูปภาพ
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/shoppic}
\caption{หน้าจอเพิ่มรูปภาพ}
\label{Fig:Shoppic}
\end{figure}
จากภาพที่ \ref{Fig:Shoppic} แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัปโหลดรุปภาพเฉพาะเจ้าของร้าน
\end{itemize}
\newpage
\item เจ้าของร้าน \\
User Interface เจ้าของร้าน จะออกแบบให้สะดวกต่อการใช้งาน
\begin{itemize}
\item การออกแบบหน้าจอโปรไฟล์ช่าง
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bprofile}
\caption{หน้าจอโปรไฟล์ช่าง}
\label{Fig:Bprofile}
\end{figure}
จากภาพที่ \ref{Fig:Bprofile} แสดงหน้าจอโปรไฟล์บนเว็บแอปพลิเคชัน เพื่อดูข้อมูลของช่าง
\item การออกแบบหน้าจอดูตารางงาน
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/work}
\caption{หน้าจอดดูตารางงาน}
\label{Fig:Work}
\end{figure}
จากภาพที่ \ref{Fig:Work} แสดงหน้าจอตารางงาน เฉพาะช่าง
\newpage
\item การออกแบบหน้าจอเพิ่มรูปภาพผลงานช่าง
\begin{figure}[H]
\centering
\includegraphics[width=0.8\textwidth]{Figures/3/UIWeb/bpic}
\caption{หน้าจอเพิ่มรูปภาพผลงานช่าง}
\label{Fig:Bpic}
\end{figure}
จากภาพที่ \ref{Fig:Bpic} แสดงหน้าจอเพิ่มรูปภาพ เพื่ออัพโหลดรุปภาพผลงานเฉพาะช่าง
\end{itemize}
\end{enumerate}
\newpage
\section{Use Case Diagram}
Use Case Diagram เป็นแผนผังเพื่อแสดงฟังก์ชันแสดงการทำงานของระบบโดยรวม แสดงส่วนประกอบในระบบและกิจกรรมที่เกิดขึ้นในระบบซึ่งในระบบระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ผู้ใช้จำเป็นต้องเข้าสู่ระบบเพื่อใช้งานระบบ สัญลักษณ์ที่ใช้ในการเขียน Use Case Diagram แสดงในตารางที่ \ref{tab:use-case2}
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,79 +464,139 @@ 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
\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 จัดการประชาสัมพันธ์}
\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 : 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}|}{Main Flow : เจ้าของร้าน เพิ่ม แก้ไขหรือลบรายการในระบบได้
\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 : 12 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor : เจ้าหน้าที่} \\ \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 : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบปฏิทินกำหนดการได้} \\ \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}
\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 : 13 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าหน้าที่ เพิ่ม แก้ไขหรือลบเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าหน้าที่ไม่เชื่อมต่ออินเทอร์เน็ต จะไม่สามารถ เพิ่ม แก้ไขหรือลบเอกสารที่เกี่ยวข้องกับกองทุนได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{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 : 14 }} \\ \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}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case เพิ่มข้อมูลช่าง}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : เพิ่มข้อมูลช่าง}} & \multicolumn{1}{c|}{\textbf{Use case Id : 15 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :เจ้าของร้าน} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : เจ้าของร้านเพิ่มข้อมูลช่าง} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากเจ้าของร้านที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถเพิ่มข้อมูลช่างได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case แก้ไขข้อมูล}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : แก้ไขข้อมูล}} & \multicolumn{1}{c|}{\textbf{Use case Id : 16 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : ช่างแก้ไขข้อมูลส่วนตัว} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถแก้ไขข้อมูลส่วนตัวได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case ดูตารางงาน}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : ดูตารางงาน}} & \multicolumn{1}{c|}{\textbf{Use case Id : 17 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : ดูตารางงาน ที่ผู้ใช้บริการได้ทำการจองคิว} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถดตารางงานได้} \\ \hline
\end{tabular}%
}
\end{table}
\begin{table}[H]
\centering
\caption{Use Case post ภาพผลงานของตัวเอง}
\label{tab:usecase}
\resizebox{\totalheight}{!}{\textwidth}{%
\begin{tabular}{|c|p{10cm}|}
\hline
\multicolumn{1}{|c|}{\textbf{Use Case Title : post ภาพผลงานของตัวเอง}} & \multicolumn{1}{c|}{\textbf{Use case Id : 18 }} \\ \hline
\multicolumn{2}{|l|}{Primary Actor :ช่าง} \\ \hline
\multicolumn{2}{|l|}{Stakeholder Actor : -} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Main Flow : post ภาพผลงานของตัวเองได้} \\ \hline
\multicolumn{2}{|p{\linewidth}|}{Exceptional Flow ที่ 1 : หากช่างที่ไม่เชื่อมต่ออินเทอร์เน็ต ไม่สามารถpost ภาพผลงานของตัวเองได้} \\ \hline
\end{tabular}%
}
\end{table}
\newpage
\section{Class Diagram}
......@@ -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.99\columnwidth]
{Figures/3/Sequence/booking}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-booking}
\end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \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/submit}
{Figures/3/Sequence/addlist}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ}
\label{Fig:Sequence-submit}
\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-submit} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
จากภาพที่ \ref{Fig:Sequence-addpromotion} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\newpage
\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
View file @ 8b75acaa
\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
View file @ 8b75acaa
......@@ -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 การพัฒนาเป็นแอปพลิเคชัน
......
Document/Latex/Figures/3/usecase.png
View replaced file @ 52b77fac View file @ 8b75acaa
Document/Latex/Figures/3/usecase.png

156 KB | W: | H:

Document/Latex/Figures/3/usecase.png

360 KB | W: | H:

Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
Document/Latex/Figures/3/usecase.png
  • 2-up
  • Swipe
  • Onion skin
Source/Backend/controllers/list/index.js
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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);
......@@ -87,4 +87,4 @@ exports.updateuserId = async (req, res) => {
console.log(err);
res.sendStatus(401);
}
};
\ No newline at end of file
};
Source/Backend/models/shopimage/index.js
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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) => {
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')
router.post('/upload/shop/:shopId', storage.array('images', 5), async (req, res) => {
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
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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
View file @ 8b75acaa
......@@ -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,107 +322,138 @@ class HomePage extends Component {
{"จองคิว"}
</DialogTitle>
<DialogContent>
<h6>
วันที่ที่เลือกคือ{" "}
{format(new Date(date), "dd MMMM yyyy", {
locale: th
})}
</h6>
<DatePicker
autoOk
orientation="static"
variant="static"
openTo="date"
minDate={new Date()}
value={date}
onChange={this.handleChangeDate}
/>
<div className="row">
<div className="col s12 m5">
<div
style={{
maxWidth: "fit-content"
}}
>
<DatePicker
autoOk
orientation="static"
variant="static"
openTo="date"
minDate={new Date()}
value={date}
onChange={this.handleChangeDate}
/>
</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"
name="list"
select
label="เลือกรายการ"
onChange={this.handleChange}
SelectProps={{
native: true
}}
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<ListIcon />
</InputAdornment>
)
}}
>
{currencieslist.map(option => (
<option
key={option.value}
value={option.value}
>
{option.label}
</option>
))}
</TextField>
</div>
<div className="col">
<TextField
className={classes.margin}
id="list"
name="list"
select
label="เลือกช่าง"
onChange={this.handleChange}
SelectProps={{
native: true
}}
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AssignmentIndIcon />
</InputAdornment>
)
}}
>
{currencies.map(option => (
<option
key={option.value}
value={option.value}
>
{option.label}
</option>
))}
</TextField>
</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
variant="outlined"
onClick={this.handleClose}
color="primary"
onClick={this.handleCloseQ}
color="secondary"
>
ยกเลิก
</Button>
<Button
variant="outlined"
color="primary"
onClick={this.ClickOpen}
onClick={this.handleSaveQ}
>
ถัดไป
</Button>
</DialogActions>
</Dialog>
<Dialog
open={list}
onClose={this.Close}
aria-labelledby="max-width-dialog-title"
>
<DialogTitle id="max-width-dialog-title">
กรุณาเลือกข้อมูลการจอง
</DialogTitle>
<DialogContent>
<DialogContentText>
<TextField
className={classes.margin}
id="list"
name="list"
select
label="เลือกรายการ"
onChange={this.handleChange}
SelectProps={{
native: true
}}
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<ListIcon />
</InputAdornment>
)
}}
>
{currencieslist.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
<TextField
className={classes.margin}
id="list"
name="list"
select
label="เลือกช่าง"
onChange={this.handleChange}
SelectProps={{
native: true
}}
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AssignmentIndIcon />
</InputAdornment>
)
}}
>
{currencies.map(option => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</TextField>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.Close} color="primary">
Cancel
</Button>
<Button onClick={this.Close} color="primary">
Subscribe
ยืนยัน
</Button>
</DialogActions>
</Dialog>
......
Source/b_beauty_project/src/views/ShopPage/index.js
View file @ 8b75acaa
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment