Skip to content

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

update

parent f8554879
Show whitespace changes
Inline Side-by-side
Showing with 1823 additions and 1683 deletions
Document/Latex/1-introduction.tex
View file @ cfaa58ab
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
\item สามารถดูคิวที่ผู้ใช้บริการได้ทำการจองคิวไว้ \item สามารถดูคิวที่ผู้ใช้บริการได้ทำการจองคิวไว้
\item สามารถ post ภาพผลงานทั้งหมดของร้านได้ \item สามารถ post ภาพผลงานทั้งหมดของร้านได้
\item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้ \item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้
\item สามารถเพิ่ม แก้ไข และลบ ข้อมูลร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลร้านได้
\item สามารถเพิ่ม แก้ไข และลบข้อมูลตำแหน่งร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้
\end{itemize} \end{itemize}
\item ช่างประจำร้าน \item ช่างประจำร้าน
\begin{itemize} \begin{itemize}
......
Document/Latex/2-background.tex
View file @ cfaa58ab
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
ได้แก่ ความรู้พื้นฐานเกี่ยวกับ React Node.js JavaScript MySQL Visual studio code Google maps API ได้แก่ ความรู้พื้นฐานเกี่ยวกับ React Node.js JavaScript MySQL Visual studio code Google maps API
และในส่วนที่สองเป็นเนื้อหาเกี่ยวกับเว็ปแอพพลิเคชันที่เกี่ยวข้องกับโครงงานนี้เว็บแอพพลิเคชัน Gowabi และในส่วนที่สองเป็นเนื้อหาเกี่ยวกับเว็ปแอพพลิเคชันที่เกี่ยวข้องกับโครงงานนี้เว็บแอพพลิเคชัน Gowabi
\section{ความรู้พื้นฐานเกี่ยวกับ React} \section{ความรู้พื้นฐานเกี่ยวกับ React}
React เป็น JavaScript Library ที่ถูกสร้างโดย Facebook ซึ่ง React ทำหน้าที่เป็นเพียง User Interface (UI) ที่สร้างมาจากพื้นฐานแนวความคิดแบบ Model View Controller (MVC) React \cite{bib2} เป็น JavaScript Library ที่ถูกสร้างโดย Facebook ซึ่ง React ทำหน้าที่เป็นเพียง User Interface (UI) ที่สร้างมาจากพื้นฐานแนวความคิดแบบ Model View Controller (MVC)
React ทำหน้าที่เฉพาะส่วน View (จาก Model View Controller) เหมาะกับงาน Web Front-End ที่สามารถแบ่งออกเป็น Web Component ย่อยๆ โดยหลักการวิเคราะห์ควรแยกให้ย่อยที่สุดเท่าที่จะทำได้ ซึ่งสามารถแบ่ง Component ออกเป็น 2 รูปแบบ คือ React ทำหน้าที่เฉพาะส่วน View (จาก Model View Controller) เหมาะกับงาน Web Front-End ที่สามารถแบ่งออกเป็น Web Component ย่อยๆ โดยหลักการวิเคราะห์ควรแยกให้ย่อยที่สุดเท่าที่จะทำได้ ซึ่งสามารถแบ่ง Component ออกเป็น 2 รูปแบบ คือ
\begin{itemize} \begin{itemize}
...@@ -24,19 +24,6 @@ React ทำหน้าที่เฉพาะส่วน View (จาก Mod ...@@ -24,19 +24,6 @@ React ทำหน้าที่เฉพาะส่วน View (จาก Mod
\caption{concept หลักของ React}{ที่มา: https://www.designil.com/wp-content/uploads/2017/07/react-concept-designil.jpg} \caption{concept หลักของ React}{ที่มา: https://www.designil.com/wp-content/uploads/2017/07/react-concept-designil.jpg}
\label{Fig:react-concept} \label{Fig:react-concept}
\end{figure} \end{figure}
\subsection{React Life Cycle}
การเขียน render() ฟังก์ชันใน component \cite{react3} นั้น ควรจะเขียนในแบบ pure function ซึ่งจะไม่มีการเปลี่ยน state และสร้าง side effect ต่อภายนอกทั้งสิ้น อย่างเช่น การ call extenal service แบบ Ajax request, Firebase calling เป็นต้น เพราะหน้าที่ของ render() มีแค่การ render UI เท่านั้น หากไม่สามารถทำสิ่งดังกล่าวภายใน render() แล้ว กิจกรรมเหล่านั้นจึงสามารถทำได้ที่ life cycle ของ React
ตลอดช่วงวงจรชีวิต \cite{react4} สามารถควบคุมเหตุการณ์ต่างๆ ที่เกิดขึ้นในการแสดงผล UI การอัพเดทข้อมูล และการ re-rendering จนกระทั้งข้อมูลนั้นหายไป โดยที่ React ได้มีการเตรียมฟังก์ชันต่างๆ ไว้ สามารถอธิบายการทำงานของฟังก์ชันได้ ดังนี้
\begin{itemize}
\item componentWillMount() : คุณสมบัติของ componentWillMount ไม่มีอะไรเกี่ยวกับการใช้งาน component เพราะยังไม่มีการ mount อะไรขึ้นมา โดยมีหน้าที่ คือ การกำหนดค่าเริ่มต้นสำหรับการใช้งาน
\item componentDidMount() : เกิดขึ้นเมื่อทำการ Mount เรียบร้อย พร้อมที่จะใช้งาน โดยปกติจะใช้ในการกำหนดค่าทุกอย่างที่ต้องใช้ DOM และรับข้อมูลที่ต้องการมาแสดงผล
\item componentWillReceiveProps(nextProps) : เมื่อ Component ทำงาน จนกระทั้งมี pro-ps ใหม่เข้ามา เพื่อทำการเปลี่ยนแปลงข้อมูล componentWillReceive Props จะถูกเรียก โดยมี nextProps เป็นตัวแปรที่ถูกส่งเข้ามา
\item shouldComponentUpdate(nextProps, nextState) : ถูกเรียกเมื่อ component มีการเปลี่ยนแปลงด้วย nextProps กับ nextState
\item componentWillUpdate(nextProps, nextState) : ถูกเรียกก่อนที่จะ render หลังจากได้รับค่าใหม่ของ props หรือ state คุณสมบัติของคล้ายกับ componentWillReveiveProps
\item componentDidUpdate(prevProps, prevState) : ถูกเรียกทันที่หลังจากเกิดการเปลี่ยนแปลงของ component แต่จะไม่ถูกเรียกตอนครั้งแรกที่ render โดยที่ componentDidUpd-ate สามารถใช้งานได้เหมือน componentDidMount
\item componentWillUnmount() : ถูกเรียกก่อนที่ component ทำการ unmount และ destroy โดยปกติแล้วจะใช้เพื่อทำการรีเซ็ต (reset) ค่าต่างๆ
\end{itemize}
\subsection{React Life Cycle} \subsection{React Life Cycle}
การเขียน render() ฟังก์ชันใน component \cite{bib5} นั้น ควรจะเขียนในแบบ pure function ซึ่งจะไม่มีการเปลี่ยน state และสร้าง side effect ต่อภายนอกทั้งสิ้น อย่างเช่น การ call extenal service แบบ Ajax request, Firebase calling เป็นต้น เพราะหน้าที่ของ render() มีแค่การ render UI เท่านั้น หากไม่สามารถทำสิ่งดังกล่าวภายใน render() แล้ว กิจกรรมเหล่านั้นจึงสามารถทำได้ที่ life cycle ของ React การเขียน render() ฟังก์ชันใน component \cite{bib5} นั้น ควรจะเขียนในแบบ pure function ซึ่งจะไม่มีการเปลี่ยน state และสร้าง side effect ต่อภายนอกทั้งสิ้น อย่างเช่น การ call extenal service แบบ Ajax request, Firebase calling เป็นต้น เพราะหน้าที่ของ render() มีแค่การ render UI เท่านั้น หากไม่สามารถทำสิ่งดังกล่าวภายใน render() แล้ว กิจกรรมเหล่านั้นจึงสามารถทำได้ที่ life cycle ของ React
...@@ -55,16 +42,16 @@ React ทำหน้าที่เฉพาะส่วน View (จาก Mod ...@@ -55,16 +42,16 @@ React ทำหน้าที่เฉพาะส่วน View (จาก Mod
\section{ความรู้พื้นฐานเกี่ยวกับ Node.js} \section{ความรู้พื้นฐานเกี่ยวกับ Node.js}
Node.js \cite{nodejs} เป็นภาษาที่ทำงานอยู่ในฝั่งเซิร์ฟเวอร์ (server) ซึ่ง syntax ที่ใช้ในการเขียนคือ JavaScript และเป็นภาษาที่ออกแบบมาให้ทำงานแบบ Event-Driven หรือทำงานเมื่อเกิดเหตุการณ์ตามที่กำหนดไว้ และการทำงานแบบ Asynchronous ซึ่งสามารถทำงานในลำดับต่อไปโดยที่ไม่ต้องรอให้งานก่อนหน้าเสร็จก่อนแล้วจึงทำงานขั้นต่อไป แต่ก็สามารถกำหนดให้ทำงานแบบ Synchronous ได้เช่นกัน โดยการกำหนด Callback เมื่องานแรกทำงานเสร็จแล้ว นอกจากนี้ Node.js นั้นจะใช้ Compiler จาก Google JavaScript Engine V8 Node.js \cite{bib7} เป็นภาษาที่ทำงานอยู่ในฝั่งเซิร์ฟเวอร์ (server) ซึ่ง syntax ที่ใช้ในการเขียนคือ JavaScript และเป็นภาษาที่ออกแบบมาให้ทำงานแบบ Event-Driven หรือทำงานเมื่อเกิดเหตุการณ์ตามที่กำหนดไว้ และการทำงานแบบ Asynchronous ซึ่งสามารถทำงานในลำดับต่อไปโดยที่ไม่ต้องรอให้งานก่อนหน้าเสร็จก่อนแล้วจึงทำงานขั้นต่อไป แต่ก็สามารถกำหนดให้ทำงานแบบ Synchronous ได้เช่นกัน โดยการกำหนด Callback เมื่องานแรกทำงานเสร็จแล้ว นอกจากนี้ Node.js นั้นจะใช้ Compiler จาก Google JavaScript Engine V8
ส่วนใหญ่จะนิยมใช้ node.js ในงานที่ทำเป็นเบื้องหลัง คือ งานที่ประมวลผลสั่งเซิร์ฟเวอร์ซึ่งเป็นงานที่อาจจะต้อง interface กับผู้ใช้ หรือไม่ต้อง interface กับผู้ใช้ ตัวอย่างงานที่ต้อง interface กับผู้ใช้ เช่น การทำตัวเองเป็น http server ในการดึงหน้าเว็บมาแสดงผลให้กับ user หรือว่า การเปิด socket เพื่อรับส่งข้อมูลกันระหว่างเซิร์ฟเวอร์กับผู้ใช้งาน เช่น ทำเป็นห้อง chat ทำเกม ทำระบบที่ป้อนข้อมูลเพื่อคำนวณผลลัพธ์ เป็นต้น ตัวอย่างงานที่ไม่ต้อง interface กับผู้ใช้ เช่น ทำ spider crawler เว็บ คือ การเปิดเว็บแล้วเก็บข้อมูลไปเรื่อยๆ หรือ โปรแกรมที่ รอรับค่าจาก streaming ต่างๆ เพื่อนำมาบันทึกไว้ ซึ่งการทำงานเหล่านี้ไม่จำเป็นต้อง interface กับผู้ใช้ ส่วนใหญ่จะนิยมใช้ node.js ในงานที่ทำเป็นเบื้องหลัง คือ งานที่ประมวลผลสั่งเซิร์ฟเวอร์ซึ่งเป็นงานที่อาจจะต้อง interface กับผู้ใช้ หรือไม่ต้อง interface กับผู้ใช้ ตัวอย่างงานที่ต้อง interface กับผู้ใช้ เช่น การทำตัวเองเป็น http server ในการดึงหน้าเว็บมาแสดงผลให้กับ user หรือว่า การเปิด socket เพื่อรับส่งข้อมูลกันระหว่างเซิร์ฟเวอร์กับผู้ใช้งาน เช่น ทำเป็นห้อง chat ทำเกม ทำระบบที่ป้อนข้อมูลเพื่อคำนวณผลลัพธ์ เป็นต้น ตัวอย่างงานที่ไม่ต้อง interface กับผู้ใช้ เช่น ทำ spider crawler เว็บ คือ การเปิดเว็บแล้วเก็บข้อมูลไปเรื่อยๆ หรือ โปรแกรมที่ รอรับค่าจาก streaming ต่างๆ เพื่อนำมาบันทึกไว้ ซึ่งการทำงานเหล่านี้ไม่จำเป็นต้อง interface กับผู้ใช้
node.js มีส่วนเสริมที่ชื่อว่า node package management (npm) ซึ่งเปรียบเหมือน google play ใน android หรือ app store ใน iOS ที่สามารถเอา package ที่คนอื่นเขียนเอาไว้แล้ว เพื่อแจกฟรี (free) มาต่อยอดเพื่อใช้ในงานของตนได้ โดยตัวอย่างที่ได้รับความนิยมจะเป็น underscore, async, request และ express เป็นต้น สำหรับการติดตั้ง ใช้คำสั่ง npm install ตามด้วยชื่อ package ที่ต้องการติดตั้ง \cite{nodejs1} node.js มีส่วนเสริมที่ชื่อว่า node package management (npm) ซึ่งเปรียบเหมือน google play ใน android หรือ app store ใน iOS ที่สามารถเอา package ที่คนอื่นเขียนเอาไว้แล้ว เพื่อแจกฟรี (free) มาต่อยอดเพื่อใช้ในงานของตนได้ โดยตัวอย่างที่ได้รับความนิยมจะเป็น underscore, async, request และ express เป็นต้น สำหรับการติดตั้ง ใช้คำสั่ง npm install ตามด้วยชื่อ package ที่ต้องการติดตั้ง \cite{bib8}
node.js มีการทำงานเป็น Asynchronous คือ การทำงานบางอย่างไม่ต้องรอให้บรรทัดนั้นทำงานเสร็จ เช่น ส่งคำสั่งไป query ข้อมูลจากฐานข้อมูล แล้วสามารถข้ามไปทำงานบรรทัดต่อไปโดยไม่ต้องรอผลจากฐานข้อมูล เมื่อการทำงานนั้นทำงานเสร็จจึงค่อยรอผลลัพธ์กลับมา ดังนั้นปัญหาจะเกิดทันที ถ้าการทำงานต่อไปนำผลลัพธ์จากคำสั่งก่อนหน้านั้นมาใช้ต่อ ซึ่งส่งผลให้เกิดการทำงานผิดพลาด เพราะผลลัพธ์ยังไม่ได้รับกลับมา node.js มีการทำงานเป็น Asynchronous คือ การทำงานบางอย่างไม่ต้องรอให้บรรทัดนั้นทำงานเสร็จ เช่น ส่งคำสั่งไป query ข้อมูลจากฐานข้อมูล แล้วสามารถข้ามไปทำงานบรรทัดต่อไปโดยไม่ต้องรอผลจากฐานข้อมูล เมื่อการทำงานนั้นทำงานเสร็จจึงค่อยรอผลลัพธ์กลับมา ดังนั้นปัญหาจะเกิดทันที ถ้าการทำงานต่อไปนำผลลัพธ์จากคำสั่งก่อนหน้านั้นมาใช้ต่อ ซึ่งส่งผลให้เกิดการทำงานผิดพลาด เพราะผลลัพธ์ยังไม่ได้รับกลับมา
\subsection{node.js ทำงานแบบ event driven} \subsection{node.js ทำงานแบบ event driven}
การทำงานของ node \cite{nodejs2} เรียกว่าเป็นการขับเคลื่อนด้วย event ต่างๆ ที่เกิดขึ้น ทำให้สามารถข้ามจาก event หนึ่งที่เสร็จแล้วไปยัง event อื่นได้ด้วยการสั่งงานต่อเนื่องกันไป หรือการสั่งให้ event หลาย event เริ่มทำงานในเวลาใกล้เคียงกัน ประโยชน์ที่ได้จาก event driven คือ การสั่งให้รอรับ event นั้นไปตลอดการณ์ โดยไม่เปลืองทรัพยากร เช่น การเชื่อมต่อไปยัง streaming channel ที่หนึ่ง ซึ่งอาจเป็น text หรือข้อมูลบางอย่าง เช่น ปริมาณน้ำฝน เอาไว้ หากต้นทางของ streaming ยังไม่มีข้อมูลส่งมา จะไม่เกิด event ใดๆ และ node.js จะรออยู่ แต่หากต้นทาง streaming มีข้อมูลมา node.js จะทำงานเพื่อตอบสนองต่อ event ที่เกิดขึ้นนั้นทันที สามารถแสดงการทำงานดังกล่าวได้ ดังรูปที่ \ref{Fig:event-driven} การทำงานของ node \cite{bib9} เรียกว่าเป็นการขับเคลื่อนด้วย event ต่างๆ ที่เกิดขึ้น ทำให้สามารถข้ามจาก event หนึ่งที่เสร็จแล้วไปยัง event อื่นได้ด้วยการสั่งงานต่อเนื่องกันไป หรือการสั่งให้ event หลาย event เริ่มทำงานในเวลาใกล้เคียงกัน ประโยชน์ที่ได้จาก event driven คือ การสั่งให้รอรับ event นั้นไปตลอดการณ์ โดยไม่เปลืองทรัพยากร เช่น การเชื่อมต่อไปยัง streaming channel ที่หนึ่ง ซึ่งอาจเป็น text หรือข้อมูลบางอย่าง เช่น ปริมาณน้ำฝน เอาไว้ หากต้นทางของ streaming ยังไม่มีข้อมูลส่งมา จะไม่เกิด event ใดๆ และ node.js จะรออยู่ แต่หากต้นทาง streaming มีข้อมูลมา node.js จะทำงานเพื่อตอบสนองต่อ event ที่เกิดขึ้นนั้นทันที สามารถแสดงการทำงานดังกล่าวได้ ดังรูปที่ \ref{Fig:event-driven}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[scale=0.5]{Figures/2/unnamed} \includegraphics[scale=0.5]{Figures/2/unnamed}
...@@ -83,7 +70,7 @@ node.js มีการทำงานเป็น Asynchronous คือ กา ...@@ -83,7 +70,7 @@ node.js มีการทำงานเป็น Asynchronous คือ กา
\end{itemize} \end{itemize}
\section{ความรู้พื้นฐานเกี่ยวกับ JavaScript} \section{ความรู้พื้นฐานเกี่ยวกับ JavaScript}
JavaScript \cite{javascript} คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต (Internet) ที่กำลังได้รับความนิยมอย่างสูง JavaScript เป็น ภาษาสคริปต์ (script) เชิงวัตถุ ที่เรียกกันว่า "สคริปต์" ซึ่งการใช้ JavaScript ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) จะช่วยให้เว็บไซต์ดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น โดยมีวิธีการทำงานในลักษณะ "แปลความและดำเนินงานไปทีละคำสั่ง" (interpret) หรือเรียกว่า โปรแกรมเชิงวัตถุ (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (client) และ ทางฝั่งเซิร์ฟเวอร์ JavaScript \cite{bib12} คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต (Internet) ที่กำลังได้รับความนิยมอย่างสูง JavaScript เป็น ภาษาสคริปต์ (script) เชิงวัตถุ ที่เรียกกันว่า "สคริปต์" ซึ่งการใช้ JavaScript ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) จะช่วยให้เว็บไซต์ดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น โดยมีวิธีการทำงานในลักษณะ "แปลความและดำเนินงานไปทีละคำสั่ง" (interpret) หรือเรียกว่า โปรแกรมเชิงวัตถุ (Object Oriented Programming) ที่มีเป้าหมายในการ ออกแบบและพัฒนาโปรแกรมในระบบอินเทอร์เน็ต สำหรับผู้เขียนด้วยภาษา HTML สามารถทำงานข้ามแพลตฟอร์มได้ โดยทำงานร่วมกับ ภาษา HTML และภาษา Java ได้ทั้งทางฝั่งไคลเอนต์ (client) และ ทางฝั่งเซิร์ฟเวอร์
JavaScript ถูกพัฒนาขึ้นโดย บริษัท เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator 2.0 เพื่อใช้สร้างเว็บเพจ (Web page) โดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ (Sun Microsystems, Inc) ปรับปรุงระบบของเบราว์เซอร์ (Browser) เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวา (Java) ได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี พ.ศ. 2538 แล้วตั้งชื่อใหม่ว่า JavaScript ซึ่ง JavaScript ทำให้การสร้างเว็บเพจมีลูกเล่นต่างๆ มากมาย และยังสามารถโต้ตอบกับผู้ใช้ได้อย่างทันที เช่น การใช้เมาส์คลิก หรือ การกรอกข้อความในฟอร์ม เป็นต้น JavaScript ถูกพัฒนาขึ้นโดย บริษัท เน็ตสเคปคอมมิวนิเคชันส์ (Netscape Communications Corporation) โดยใช้ชื่อว่า Live Script ออกมาพร้อมกับ Netscape Navigator 2.0 เพื่อใช้สร้างเว็บเพจ (Web page) โดยติดต่อกับเซิร์ฟเวอร์แบบ Live Wire ต่อมาเน็ตสเคปได้ร่วมมือกับ บริษัทซันไมโครซิสเต็มส์ (Sun Microsystems, Inc) ปรับปรุงระบบของเบราว์เซอร์ (Browser) เพื่อให้สามารถติดต่อใช้งานกับภาษาจาวา (Java) ได้ และได้ปรับปรุง LiveScript ใหม่เมื่อ ปี พ.ศ. 2538 แล้วตั้งชื่อใหม่ว่า JavaScript ซึ่ง JavaScript ทำให้การสร้างเว็บเพจมีลูกเล่นต่างๆ มากมาย และยังสามารถโต้ตอบกับผู้ใช้ได้อย่างทันที เช่น การใช้เมาส์คลิก หรือ การกรอกข้อความในฟอร์ม เป็นต้น
...@@ -98,13 +85,13 @@ JavaScript ถูกพัฒนาขึ้นโดย บริษัท เ ...@@ -98,13 +85,13 @@ JavaScript ถูกพัฒนาขึ้นโดย บริษัท เ
\item JavaScript สร้าง Cookies (เก็บข้อมูลของผู้ใช้ในคอมพิวเตอร์ของผู้ใช้เอง) ได้ \item JavaScript สร้าง Cookies (เก็บข้อมูลของผู้ใช้ในคอมพิวเตอร์ของผู้ใช้เอง) ได้
\end{itemize} \end{itemize}
\subsection{ข้อดีและข้อเสียของ Java JavaScript} \subsection{ข้อดีและข้อเสียของ Java JavaScript}
JavaScript \cite{javascript1} ทำงานบนเว็บบราวเซอร์ (client-side script) จึงไม่มีข้อจำกัดว่าจะใช้เซิร์ฟเวอร์แบบไหนก็ตาม เพราะ JavaScript ทำงานเฉพาะในเครื่องของผู้ใช้งานเท่านั้น ซึ่งต่างกับภาษาสคริปต์อื่น เช่น PHP , ASP, JSP หรือ Perl ซึ่งต้องประมวลผลและทำงานที่เครื่องเซิร์ฟเวอร์ (server-side script) จึงจำเป็นต้องใช้บนเซิร์ฟเวอร์ ที่สนับสนุนภาษาเหล่านี้เท่านั้นจึงจะสามารถใช้งาน server-side script ได้ แต่อย่างไรก็ตาม จากลักษณะการทำงานที่กล่าวมาก็ทำให้ JavaScript มีข้อจำกัด กล่าวคือคือไม่สามารถรับและส่งข้อมูลต่างๆ กับเซิร์ฟเวอร์โดยตรง เช่น การอ่านไฟล์จากเซิร์ฟเวอร์ เพื่อนำมาแสดงบนเว็บเพจ หรือรับข้อมูลจากผู้ชม เพื่อนำไปเก็บบนเซิร์ฟเวอร์ เป็นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้องอาศัยภาษา server-side script อยู่ (ความจริงมี JavaScript ที่ทำงานบนเซิร์ฟเวอร์เช่นกัน ซึ่งต้องอาศัยเซิร์ฟเวอร์ที่สนับสนุนโดยเฉพาะเช่นกัน แต่ไม่เป็นที่นิยมนัก) JavaScript \cite{bib13} ทำงานบนเว็บบราวเซอร์ (client-side script) จึงไม่มีข้อจำกัดว่าจะใช้เซิร์ฟเวอร์แบบไหนก็ตาม เพราะ JavaScript ทำงานเฉพาะในเครื่องของผู้ใช้งานเท่านั้น ซึ่งต่างกับภาษาสคริปต์อื่น เช่น PHP , ASP, JSP หรือ Perl ซึ่งต้องประมวลผลและทำงานที่เครื่องเซิร์ฟเวอร์ (server-side script) จึงจำเป็นต้องใช้บนเซิร์ฟเวอร์ ที่สนับสนุนภาษาเหล่านี้เท่านั้นจึงจะสามารถใช้งาน server-side script ได้ แต่อย่างไรก็ตาม จากลักษณะการทำงานที่กล่าวมาก็ทำให้ JavaScript มีข้อจำกัด กล่าวคือคือไม่สามารถรับและส่งข้อมูลต่างๆ กับเซิร์ฟเวอร์โดยตรง เช่น การอ่านไฟล์จากเซิร์ฟเวอร์ เพื่อนำมาแสดงบนเว็บเพจ หรือรับข้อมูลจากผู้ชม เพื่อนำไปเก็บบนเซิร์ฟเวอร์ เป็นต้น ดังนั้นงานลักษณะนี้ จึงยังคงต้องอาศัยภาษา server-side script อยู่ (ความจริงมี JavaScript ที่ทำงานบนเซิร์ฟเวอร์เช่นกัน ซึ่งต้องอาศัยเซิร์ฟเวอร์ที่สนับสนุนโดยเฉพาะเช่นกัน แต่ไม่เป็นที่นิยมนัก)
นักพัฒนาเว็บส่วนใหญ่จึงนิยมใช้ JavaScript ร่วมกับ ภาษา Server Script เพื่อทำการส่งข้อมูลระหว่าง เซิร์ฟเวอร์กับเครื่องของผู้ใช้งาน ซึ่งทำให้การแสดงผลของหน้าเว็บมีความสวยงามและราบรื่นมากยิ่งขึ้น นักพัฒนาเว็บส่วนใหญ่จึงนิยมใช้ JavaScript ร่วมกับ ภาษา Server Script เพื่อทำการส่งข้อมูลระหว่าง เซิร์ฟเวอร์กับเครื่องของผู้ใช้งาน ซึ่งทำให้การแสดงผลของหน้าเว็บมีความสวยงามและราบรื่นมากยิ่งขึ้น
\section{ความรู้พื้นฐานเกี่ยวกับ MySQL} \section{ความรู้พื้นฐานเกี่ยวกับ MySQL}
MySQL \cite{bib14} เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (Relational Database Management System : RDBMS) ตัวหนึ่ง ซึ่งเป็นที่นิยมกันมากในปัจจุบัน โดยเฉพาะอย่างยิ่งในโลกของอินเตอร์เน็ต สาเหตุเพราะว่า MySQL เป็นฟรีแวร์ ทางด้านของฐานข้อมูลที่มีประสิทธิภาพสูง เป็นทางเลือกใหมจากผลิตภัณฑ์ระบบจัดการฐานข้อมูลในปัจจุบัน ที่มักจะเป็นการผูกขาดของผลิตภัณฑ์เพียงไม่กี่ตัว นักพัฒนาระบบฐานขอมูลที่เคยใช้ MySQL ต่างยอมรับในความสามารถความรวดเร็ว การรองรับจํานวนผู้ใช้ และขนาดของข้อมูลจํานวนมหาศาล ทั้งยังสนับสนุนการใช้งานบนระบบปฏิบัติการมากมาย ไม่ว่าจะเป็น Unix , OS/2 , Mac , OS หรือ Windows ก็ตาม นอกจากนี้ MySQL ยังสามารถใช้ งานร่วมกับ Web Development Platform ทั้งหลาย ไม่ว่าจะเป็น C, C++, Java, Perl, PHP, Python, Tcl หรือ ASP ดังนั้น MySQL จึงได้รับความนิยมอย่างมากในปัจจุบัน และมีแนวโน้มสูงยิ่งขึ้นต่อไปในอนาคต MySQL \cite{bib15} เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (Relational Database Management System : RDBMS) ตัวหนึ่ง ซึ่งเป็นที่นิยมกันมากในปัจจุบัน โดยเฉพาะอย่างยิ่งในโลกของอินเตอร์เน็ต สาเหตุเพราะว่า MySQL เป็นฟรีแวร์ ทางด้านของฐานข้อมูลที่มีประสิทธิภาพสูง เป็นทางเลือกใหมจากผลิตภัณฑ์ระบบจัดการฐานข้อมูลในปัจจุบัน ที่มักจะเป็นการผูกขาดของผลิตภัณฑ์เพียงไม่กี่ตัว นักพัฒนาระบบฐานขอมูลที่เคยใช้ MySQL ต่างยอมรับในความสามารถความรวดเร็ว การรองรับจํานวนผู้ใช้ และขนาดของข้อมูลจํานวนมหาศาล ทั้งยังสนับสนุนการใช้งานบนระบบปฏิบัติการมากมาย ไม่ว่าจะเป็น Unix , OS/2 , Mac , OS หรือ Windows ก็ตาม นอกจากนี้ MySQL ยังสามารถใช้ งานร่วมกับ Web Development Platform ทั้งหลาย ไม่ว่าจะเป็น C, C++, Java, Perl, PHP, Python, Tcl หรือ ASP ดังนั้น MySQL จึงได้รับความนิยมอย่างมากในปัจจุบัน และมีแนวโน้มสูงยิ่งขึ้นต่อไปในอนาคต
\subsection{โครงสร้างของ MySQL} \subsection{โครงสร้างของ MySQL}
โครงสร้างภายในของ MySQL \cite{bib14} คือ การออกแบบการทํางานในลักษณะของ Client Server นั่นเอง ซึ่งประกอบด้วย 2 ส่วน คือ ส่วนของผู้ให้บริการ (Server) และ ส่วนของผู้ใช้บริการ (Client) โดยในแต่ละส่วนจะมีโปรแกรมสําหรับการทํางานตามหน้าที่ของโปรแกรมนั้น ส่วนของผู้ให้บริการ (Server) จะเป็นส่วนที่ทําหน้าที่บริหารจัดการระบบฐานข้อมูล (MySQL Server) และเป็นที่จัดเก็บข้อมูลทั้งหมด ข้อมูลที่เก็บไว้นี้มีข้อมูลที่จําเป็นสําหรับการทํางานกับระบบฐานข้อมูลและข้อมูลที่เกิดจากการที่ผู้ใช้แต่ละคนสร้างขึ้นมา ส่วนของผู้ใช้บริการ (Client) คือ ส่วนที่ผู้ใช้ใช้งาน โดยโปรแกรมสําหรับใช้งานในส่วนนี้ได้แก่ MySQL , Client , Access . Web Development เป็นต้น โครงสร้างภายในของ MySQL \cite{bib14} คือ การออกแบบการทํางานในลักษณะของ Client Server นั่นเอง ซึ่งประกอบด้วย 2 ส่วน คือ ส่วนของผู้ให้บริการ (Server) และ ส่วนของผู้ใช้บริการ (Client) โดยในแต่ละส่วนจะมีโปรแกรมสําหรับการทํางานตามหน้าที่ของโปรแกรมนั้น ส่วนของผู้ให้บริการ (Server) จะเป็นส่วนที่ทําหน้าที่บริหารจัดการระบบฐานข้อมูล (MySQL Server) และเป็นที่จัดเก็บข้อมูลทั้งหมด ข้อมูลที่เก็บไว้นี้มีข้อมูลที่จําเป็นสําหรับการทํางานกับระบบฐานข้อมูลและข้อมูลที่เกิดจากการที่ผู้ใช้แต่ละคนสร้างขึ้นมา ส่วนของผู้ใช้บริการ (Client) คือ ส่วนที่ผู้ใช้ใช้งาน โดยโปรแกรมสําหรับใช้งานในส่วนนี้ได้แก่ MySQL , Client , Access . Web Development เป็นต้น
...@@ -169,7 +156,7 @@ Google Maps API \cite{maps} เป็นชุด API ของ Google สำห ...@@ -169,7 +156,7 @@ Google Maps API \cite{maps} เป็นชุด API ของ Google สำห
\newpage \newpage
\section{เอกสารและงานวิจัยที่เกี่ยวข้อง} \section{เอกสารและงานวิจัยที่เกี่ยวข้อง}
\subsection{เว็บแอพพลิเคชัน Gowabi} \subsection{เว็บแอพพลิเคชัน Gowabi}
Gowabi\cite{wongnai} เป็นเว็บไซต์และแอปพลิเคชันที่ให้บริการเกี่ยวกับการค้นหาและจองคิวร้านเสริมสวย มีฟังก์ชันการทำงานพื้นฐานอันได้แก่ การค้นหา การจองคิว ดูข้อมูล เป็นต้น Gowabi\cite{gowabi} เป็นเว็บไซต์และแอปพลิเคชันที่ให้บริการเกี่ยวกับการค้นหาและจองคิวร้านเสริมสวย มีฟังก์ชันการทำงานพื้นฐานอันได้แก่ การค้นหา การจองคิว ดูข้อมูล เป็นต้น
\subsection{ข้อแตกต่างระหว่างเว็บแอปพลิเคชั่น Gowabi กับเว็บของโครงงาน} \subsection{ข้อแตกต่างระหว่างเว็บแอปพลิเคชั่น Gowabi กับเว็บของโครงงาน}
เว็บแอปพลิเคชั่นของ Gowabi ยังไม่มีฟังก์ชันเลือกรายการ และช่างในการจองคิว ผู้พัฒนาจึงได้ทำฟังก์ชันเลือกรายหารและะช่างที่เหมาะสมตามรสนิยมของผู้ใช้เพิ่มลงในเว็บของโครงงาน เว็บแอปพลิเคชั่นของ Gowabi ยังไม่มีฟังก์ชันเลือกรายการ และช่างในการจองคิว ผู้พัฒนาจึงได้ทำฟังก์ชันเลือกรายหารและะช่างที่เหมาะสมตามรสนิยมของผู้ใช้เพิ่มลงในเว็บของโครงงาน
\begin{figure}[H] \begin{figure}[H]
......
Document/Latex/3-design.tex
View file @ cfaa58ab
...@@ -51,8 +51,8 @@ ...@@ -51,8 +51,8 @@
\item สามารถจัดการคิวได้ \item สามารถจัดการคิวได้
\item สามารถ post ภาพผลงานทั้งหมดของร้านได้ \item สามารถ post ภาพผลงานทั้งหมดของร้านได้
\item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้ \item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้
\item สามารถเพิ่ม แก้ไข และลบ ข้อมูลร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลร้านได้
\item สามารถเพิ่ม แก้ไข และลบข้อมูลตำแหน่งร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้
\end{itemize} \end{itemize}
\item ช่างประจำร้าน \item ช่างประจำร้าน
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
...@@ -635,38 +635,20 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -635,38 +635,20 @@ User Interface Design ของระบบการจองคิวร้า
\newpage \newpage
%IMAGE of class %IMAGE of class
Class Diagram แสดงความสัมพันธ์ในรูปแบบต่างๆ ระหว่างคลาสของแอปพลิเคชันระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี อธิบายได้ตามภาพที่ \ref{Fig:MainActivity20C} ดังต่อไปนี้ Class Diagram แสดงความสัมพันธ์ในรูปแบบต่างๆ ระหว่างคลาสของแอปพลิเคชันระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี อธิบายได้ตามภาพที่ \ref{Fig:classD} ดังต่อไปนี้
\begin{figure}[H]
\includegraphics[width=1.0\columnwidth]{Figures/3/Class/MainActivity}
\caption{Class Diagram ของแอปพลิเคชันระบบ XX}
\label{Fig:MainActivity20C}
\end{figure}
\begin{figure}[H]
\includegraphics[width=1.0\columnwidth]{Figures/3/Class/Feed}
\caption{Class Diagram ของแอปพลิเคชันระบบ XX}
\label{Fig:FeedC}
\end{figure}
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\includegraphics[width=1.0\columnwidth]{Figures/3/Class/Doc} \includegraphics[width=1.0\columnwidth]{Figures/3/Class/ClassDiagram}
\caption{Class Diagram ของแอปพลิเคชันระบบ XX} \caption{Class Diagram ของแอปพลิเคชันระบบจองคิวร้านเสริมสวย}
\label{Fig:DocC} \label{Fig:classD}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\begin{figure}[H]
\includegraphics[width=\columnwidth]{Figures/3/Class/Submit}
\caption{Class Diagram ของแอปพลิเคชันระบบ XX}
\label{Fig:SubmitC}
\end{figure}
\begin{figure}[H]
\includegraphics[width=1.0\columnwidth]{Figures/3/Class/UserChat}
\caption{Class Diagram ของแอปพลิเคชันระบบ XX}
\label{Fig:UserChatC}
\end{figure}
% TABLE of class % TABLE of class
\newpage \newpage
จากรูปภาพที่ \ref{Fig:MainActivity20C} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้ จากรูปภาพที่ \ref{Fig:classD} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบาย Class Diagram ของคลาสพื้นฐานของระบบ} \caption{อธิบาย Class Diagram ของคลาสพื้นฐานของระบบ}
...@@ -674,89 +656,30 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -674,89 +656,30 @@ User Interface Design ของระบบการจองคิวร้า
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|c|p{10cm}|}
\hline \hline
\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
\raisebox{-\totalheight}{MainApplication} \raisebox{-\totalheight}{Server}
& \setstretch{1.5} {คลาส MainApplication จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เปิดแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสนี้คือ เพื่อใช้จัดการทรัพยากรที่จำเป็นสำหรับการใช้งานในคลาสอื่น ๆ } \\ \hline & \setstretch{1.5} {คลาส Server จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เป็ดเว็บแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสนี้คือ เพื่อใช้ในการเชื่อมต่อ api ระหว่างคลาสอื่นๆ กับฐานข้อมูล} \\ \hline
\raisebox{-\totalheight}{SplashScreenActivity} \raisebox{-\totalheight}{Register}
& \setstretch{1.5} {คลาส SplashScreenActivity จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เปิดแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสคือ เพื่อใช้ตรวจสอบสถานะการเข้าสู่ระบบของผู้ใช้} \\ \hline & \setstretch{1.5} {คลาส Register จะถูกเรียกใช้งานทุกครั้งเมื่อผู้ใช้เปิดเว็บแอปพลิเคชัน โดยวัตถุประสงค์การทำงานของคลาสคือ เพื่อใช้ในการลงทะเบียนขอใช้เว็บแอปพลิเคชัน} \\ \hline
\raisebox{-\totalheight}{MainActivity} \raisebox{-\totalheight}{Login}
& \setstretch{1.5} {คลาส MainActivity เป็นคลาสหลักที่ใช้ในการทำงานของแอปพลิเคชันโดยการทำงานของคลาสนี้เน้นไปที่การสร้าง Fragment เพื่อใช้แสดงข้อมูลต่าง ๆ โดยองค์ประกอบการทำงานของคลาสนี้ประกอบบไปด้วยสองส่วนหลักๆ ได้แก่ เมนูนำทาง Drawer และ Fragment Container} \\ \hline & \setstretch{1.5} {คลาส Login เป็นคลาสที่ใช้เพื่อให้ผู้ใช้ที่ได้ลงทะเบียนกับระบบเข้าสู่ระบบเพื่อใช้งานบริการต่าง ๆ จากระบบ} \\ \hline
\raisebox{-\totalheight}{SignInActivity} \raisebox{-\totalheight}{User}
& \setstretch{1.5} {คลาส SignInActivity เป็นคลาสที่ใช้เพื่อให้สมาชิกที่ได้ลงทะเบียนกับระบบเข้าสู่ระบบเพื่อใช้งานบริการต่าง ๆ จากระบบ} \\ \hline & \setstretch{1.5} {คลาส User เป็นคลาสที่ใช้เก็บข้อมูลจากการลงทะเบียน} \\ \hline
\end{tabular} \raisebox{-\totalheight}{BookingController}
\end{table} & \setstretch{1.5} {คลาส BookingController เป็นคลาสที่ใช้เพิ่มข้อมูลช่าง} \\ \hline
\raisebox{-\totalheight}{Shop}
\newpage & \setstretch{1.5} {คลาส Shop เป็นคลาสที่ใช้จัดการการทำงาน Shop} \\ \hline
จากรูปภาพที่ \ref{Fig:FeedC} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้ \raisebox{-\totalheight}{EditShop}
\begin{table}[H] & \setstretch{1.5} {คลาส EditShop เป็นคลาสที่ใช้ในการจัดการการ update ข้อมูลร้าน} \\ \hline
\centering \raisebox{-\totalheight}{List}
\caption{อธิบาย Class Diagram ของส่วนของการแสดงข่าวสาร} & \setstretch{1.5} {คลาส List เป็นคลาสที่ใช้จัดการการทำงานของรายการ} \\ \hline
\label{tab:class} \raisebox{-\totalheight}{EditList}
\begin{tabular}{|c|p{10cm}|} & \setstretch{1.5} {คลาส EditList เป็นคลาสที่ใช้จัดการการ update ข้อมูลรายการ} \\ \hline
\hline \raisebox{-\totalheight}{Review}
\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline & \setstretch{1.5} {คลาส Review เป็นคลาสที่ใช้จัดการการรีวิวของผู้ใช้งาน} \\ \hline
\raisebox{-\totalheight}{FeedFragment} \raisebox{-\totalheight}{Booking}
& \setstretch{1.5} {คลาส FeedFragment เป็นคลาสหลักที่ใช้ในการแสดงข้อมูลข่าวสาร มีการทำงานหลักคือสืบค้นฐานข้อมูลจากไฟร์เบสเพื่อนำมาแสดง} \\ \hline & \setstretch{1.5} {คลาส Booking เป็นคลาสที่ใช้เก็บข้อมูลการจองคิว} \\ \hline
\raisebox{-\totalheight}{FeedItemAdapter} \raisebox{-\totalheight}{Bookingcontroller}
& \setstretch{1.5} {คลาส FeedItemAdapter เป็นคลาสที่มีหน้าที่ในการแปลงชุดข้อมูลที่ได้จากคลาส FeedFragment แล้วคืนค่ากลับเป็นลิสต์รายการของชุดข้อมูลนั้น ๆ} \\ \hline & \setstretch{1.5} {คลาส Bookingcontroller เป็นคลาสที่ใช้จัดการการจองคิว} \\ \hline
\raisebox{-\totalheight}{Post}
& \setstretch{1.5} {คลาส Post เป็นคลาสโมเดลที่กำหนดค่าต่างๆที่จำเป็นสำหรับใช้ในการสร้างลิสต์รายการของคลาส FeedItemAdapter} \\ \hline
\raisebox{-\totalheight}{PostDetailActivity}
& \setstretch{1.5} {คลาส PostDetailActivity เป็นคลาสที่มีหน้าที่ในการแสดงข้อมูลรายละเอียดของข่าวสารแต่ละแถวที่ได้รับจากหน้า FeedFragment ที่จะส่งข้อมูลเมื่อผู้ใช้กดที่แถวรายการข่าวสาร} \\ \hline
\raisebox{-\totalheight}{RecyclerViewClickListener}
& \setstretch{1.5} {คลาส RecyclerViewClickListener เป็นคลาสอินเทอร์เฟส(Interface)ที่ใช้ในการสร้างแม่แบบเมื่อคลาสใด ๆ ต้องการใช้งานสำหรับการรับค่าเมื่อผู้ใช้กดแถวในลิสต์รายการ คลาสลูกที่ทำการสืบทอดคุณสมบัติจะสามารถรับข้อมูลตำแหน่งแถวที่ผู้ใช้กดบนลิสต์รายการได้} \\ \hline
\end{tabular}
\end{table}
\newpage
จากรูปภาพที่ \ref{Fig:DocC} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
\begin{table}[H]
\centering
\caption{อธิบาย Class Diagram ของส่วนของการแสดงรายการเอกสารในระบบ}
\label{tab:class}
\begin{tabular}{|c|p{10cm}|}
\hline
\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
\raisebox{-\totalheight}{DocumentsFragment}
& \setstretch{1.5} {คลาส DocumentsFragment เป็นคลาสที่ใช้ในการแสดงข้อมูลเอกสารที่ถูกอัพโหลดเข้าสู่ระบบโดยเจ้าหน้าที่ซึ่งจะถูกแสดงเป็นลิสต์รายการ} \\ \hline
\raisebox{-\totalheight}{DocItemAdapter}
& \setstretch{1.5} {คลาส DocItemAdapter เป็นคลาสที่มีหน้าที่ในการแปลงชุดข้อมูลที่ได้รับจากคลาส DocumentsFragment เป็นลิสต์รายการแล้วคืนกลับไปยังคลาส DocumentsFragment} \\ \hline
\raisebox{-\totalheight}{Doc}
& \setstretch{1.5} {คลาส Doc เป็นคลาสโมเดลที่กำหนดค่าต่าง ๆ ที่จำเป็นสำหรับใช้ในการสร้างลิสต์รายการของคลาส DocItemAdapter} \\ \hline
\raisebox{-\totalheight}{RecyclerViewClickListener}
& \setstretch{1.5} {คลาส RecyclerViewClickListener เป็นคลาสอินเทอร์เฟสที่ใช้ในการสร้างแม่แบบเมื่อคลาสใด ๆ ต้องการใช้งานสำหรับการรับค่าเมื่อผู้ใช้กดแถวในลิสต์รายการ คลาสลูกที่ทำการสืบทอดคุณสมบัติจะสามารถรับข้อมูลตำแหน่งแถวที่ผู้ใช้กดบนลิสต์รายการได้} \\ \hline
\end{tabular}
\end{table}
\newpage
จากรูปภาพที่ \ref{Fig:SubmitC} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
\begin{table}[H]
\centering
\caption{อธิบาย Class Diagram ของส่วนของการส่งสำเนาเอกสาร}
\label{tab:class}
\begin{tabular}{|c|p{10cm}|}
\hline
\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
\raisebox{-\totalheight}{SubmitFragment}
& \setstretch{1.5} {คลาส SubmitFragment เป็นคลาสที่ใช้ในการแสดงหน้าจอส่งสำเนาเอกสาร โดยมีการดำเนินการภายในคลาสหลัก ๆ ได้แก่ การถ่ายภาพ แปลงภาพและบันทึกภาพเข้าสู่ระบบ} \\ \hline
\end{tabular}
\end{table}
จากรูปภาพที่ \ref{Fig:UserChatC} สามารถอธิบายแผนภาพ Class Diagram ได้ดังนี้
\begin{table}[H]
\centering
\caption{อธิบาย Class Diagram ของส่วนของการสนทนา}
\label{tab:class}
\begin{tabular}{|c|p{10cm}|}
\hline
\textbf{Class Diagram} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline
\raisebox{-\totalheight}{UserChatFragment}
& \setstretch{1.5} {คลาส UserChatFragment เป็นคลาสที่ใช้ในการแสดงหน้าจอสนทนาสำหรับนักศึกษา เพื่อติดต่อสอบถามข้อมูลกับเจ้าหน้าที่ มีการสืบค้นข้อมูลประวัติการสนทนาเพื่อส่งไปแปลงเป็นข้อมูลลิสต์รายการที่คลาส MessagesListAdapter} \\ \hline
\raisebox{-\totalheight}{MessagesListAdapter}
& \setstretch{1.5} {คลาส MessagesListAdapter เป็นคลาสที่ใช้ในการแปลงชุดข้อมูลที่ได้รับจากคลาส UserChatFragment เป็นลิสต์รายการแล้วทำการคืนค่าลิสต์รายการที่ได้กลับไปยังคลาส UserChatFragment} \\ \hline
\raisebox{-\totalheight}{MessagesList}
& \setstretch{1.5} {คลาส MessagesList เป็นคลาสที่ใช้ในการจัดเก็บข้อมูลภายในคลาส UserChatFragment หลังจากที่ได้ทำการสืบค้นข้อมูลการสนทนาจากไฟร์เบสเพื่อส่งไปยังคลาส MessagesListAdapter} \\ \hline
\raisebox{-\totalheight}{RecyclerViewClickListener}
& \setstretch{1.5} {คลาส RecyclerViewClickListener เป็นคลาสอินเทอร์เฟสที่ใช้ในการสร้างแม่แบบเมื่อคลาสใด ๆ ต้องการใช้งานสำหรับการรับค่าเมื่อผู้ใช้กดแถวในลิสต์รายการ คลาสลูกที่ทำการสืบทอดคุณสมบัติจะสามารถรับข้อมูลตำแหน่งแถวที่ผู้ใช้กดบนลิสต์รายการได้} \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
...@@ -792,396 +715,323 @@ User Interface Design ของระบบการจองคิวร้า ...@@ -792,396 +715,323 @@ User Interface Design ของระบบการจองคิวร้า
% Sequence Diagram ที่ใช้อธิบายการทำงานของระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยสศาสตร์ มหาวิทยาลัยอุบลราชธานี มีรายละเอียดดังต่อไปนี้ % Sequence Diagram ที่ใช้อธิบายการทำงานของระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยสศาสตร์ มหาวิทยาลัยอุบลราชธานี มีรายละเอียดดังต่อไปนี้
\newpage \newpage
\begin{landscape}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.95\columnwidth] \includegraphics[width=1.0\columnwidth]
{Figures/3/Sequence/home} {Figures/3/Sequence/Register}
\caption{Sequence Diagram ข้อมูลร้าน} \caption{Sequence Diagram ลงทะเบียน}
\label{Fig:Sequence-home} \label{Fig:Sequence-register}
\end{figure} \end{figure}
\end{landscape} \newpage
จากภาพที่ \ref{Fig:Sequence-register} สามารถอธิบายแผนภาพ Sequence Diagram การลงทะเบียน ได้ดังนี้ เมื่อ
ผู้ใช้กดปุ่ม register คลาส Register แสดงหน้าลงทะเบียน เมื่อผู้ใช้กรอกข้อมูลระบบจะเรียกใช้เมธอด onRegister() ที่คลาส Register เมื่อ ข้อมูลการลงทะเบียน ถูกติดตั้งบน api:Server เมธอด register จะทำการเพิ่มข้อมูลการลงทะเบียนลงในฐานข้อมูล และนำข้อมูลที่ได้เพิ่มลงมาเก็บในรูปแบบ response ที่คลาส api:Server โดยมีการสืบค้นข้อมูลเพื่อตรวจสอบการลงทะเบียนที่คลาส MySQL และเมื่อข้อมูลที่เพิ่มมีการลงทะเบียนแล้วจะแสดง error email ถูกใช้งานแล้ว แต่ถ้าลงทะเบียนสำเร็จจะส่งข้อมูลมาที่คลาส Register และคลาส Register จะส่งข้อมุลการลงทะเบียนแจ้งผูใช้ว่าลงทะเบียนสำเร็จและจะแสดงหน้าหลัก
จากภาพที่ \ref{Fig:Sequence-home} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลร้าน ได้ดังนี้ เมื่อ
ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ Shopdata ถูกติดตั้งบน ShowShop เมธอด callData() จะสืบค้นข้อมูลจากฐานข้อมูลบน MySQL (node:shops) และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowShop โดยมีการคืนค่าเป็นข้อมูลร้านแต่ละแถวและในขั้นตอนสุดท้ายคลาส ShowShop จะทำการแสดงรายการข้อมูลร้านทั้งหมดออกทางหน้าจอ หากผู้ใช้มีการกดเลือกร้านบางแถวคลาส ShowShop จะทำการเรียกใช้ ShowShopDetail เพื่อแสดงรายละเอียดข้อมูลร้านของแถวที่ถูกเลือก
\begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/shop} {Figures/3/Sequence/Login}
\caption{Sequence Diagram การแสดงข้อมูลโปรโมชั่น} \caption{Sequence Diagram เข้าสู่ระบบ}
\label{Fig:Sequence-shop} \label{Fig:Sequence-login}
\end{figure} \end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-login} สามารถอธิบายแผนภาพ Sequence Diagram การเข้าสู่ระบบ ได้ดังนี้ เมื่อ
เมื่อผู้ใช้กดปุ่ม Login ที่คลาส Login ระบบจะแสดงหน้า login ผู้ใช้ทำการกรอก email และ password ที่คลาส Login เมธอด onLogin() จะทำการเพิ่มข้อมูล Login โดยคลาส api:Server เมธอด login จะทำการสืบค้นข้อมูลจากฐานข้อมูลมาตรวจสอบสถานะการเข้าสู่ระบบ api:Server ทำการส่งข้อมูลการเข้าสู่ระบบไปยังคลาส Login และคลาส Login ส่งข้อมูลการเข้าสู้ระบบไปยังผู้ใช้แจ้งว่าเข้าสู่ระบบสำเร็จ
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-shop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงโปรโมชั่น ได้ดังนี้ เมื่อ
ผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
ข้อมูลโปรโมชั่น ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ ข้อมูลโปรโมชั่น ถูกติดตั้งบน ShowPromotion เมธอด callData() จะสืบค้นข้อมูลกำหนดการของวันปัจจุบันจากฐานข้อมูลบน MySQL node:promotions และส่งข้อมูลที่ได้ไปแปลงที่คลาส ShowPromotion โดยขั้นตอนสุดท้ายคลาส ShowPromotion จะทำการแสดงข้อมูลโปรโมชั่นออกทางหน้าจอ
\begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/review} {Figures/3/Sequence/Review}
\caption{Sequence Diagram การแสดงข้อมูลรีวิว} \caption{Sequence Diagram การรีวิว}
\label{Fig:Sequence-review} \label{Fig:Sequence-review}
\end{figure} \end{figure}
\end{sidewaysfigure}
\newpage
จากภาพที่ \ref{Fig:Sequence-review} สามารถอธิบายแผนภาพ Sequence Diagram แสดงข้อมูลรีวิว ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส WebBrowser ระบบจะทำการสร้าง
ข้อมูลรีวิว ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส WebBrowser เมื่อ บ้อมูลรีวิว ถูกติดตั้งบน Showreview เมธอด callData() จะสืบค้นข้อมูลรีวิวทั้งหมดจากฐานข้อมูลบน MySQL node:reviews และส่งข้อมูลที่ได้ไปแปลงที่คลาส Showreview โดยจะทำการแสดงข้อมูลรีวิวออกทางหน้าจอ
จากภาพที่ \ref{Fig:Sequence-review} สามารถอธิบายแผนภาพ Sequence Diagram การรีวิว ได้ดังนี้ เมื่อผู้ใช้เปิดหน้า ShopPage ระบบจะเรียกใช้เมธอด componentDidMount() ที่คลาส Review ระบบจะแสดงข้อมูลการรีวิวออกทางหน้าจอ ผู้ใช้กดปุ่มเขียนรีวิวระบบจะแสดง model กรอกข้อมูลรีวิว และเมื่อผู้ใช้งานเลือกหัวข้อรีวิว กรอกข้อความรีวิว ให้คะแนนรีวิว และกด submit ระบบจะเรียกใช้เมธอด onAddReview() ที่คลาส Review โดยระบบจะส่งข้อมูลการรีวิวในรูปแบบ post ไปที่คลาส api:Server เมธอด review ทำการ insert ข้อมูลรีวิวลงฐานข้อมูล และระบบจะส่งสถานะการรีวิวมาที่คลาส api:Server และคลาส api:Server ทำการส่งสถานะการรีวิวสำเร็จมาที่คลาส Review ระบบจะแสดงข้อมูลการรีวิวออกทางหน้าจอ
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addreview} {Figures/3/Sequence/addBeautician}
\caption{Sequence Diagram การเพิ่มรีวิว} \caption{Sequence Diagram การเพิ่มข้อมูลช่าง}
\label{Fig:Sequence-addreview} \label{Fig:Sequence-addBeautician}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-addreview} สามารถอธิบายแผนภาพ Sequence Diagram แสดงการสนทานา ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-addBeautician} สามารถอธิบายแผนภาพ Sequence Diagram การเพิ่มข้อมูลช่าง ได้ดังนี้ เมื่อเจ้าของร้านกดเครื่องหมายบอกระบบจะทำการแสดง model เพื่อกรอกข้อมูลเจ้าของร้านทำการกรอกข้อมูลและกดยืนยัน ระบบจะเรียกใช้เมธอด onAddBeautician ที่คลาส Beautician ระบบจะทำการส่งข้อมูลการลงทะเบียนช่างไปยังคลาส Register
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส UserChatFragment เมื่อ UserChatFrag-ment ถูกติดตั้งบน MainActivity เมธอด getMessage() จะสืบค้นข้อมูลประวัติการสนทนาของผู้ใช้คนปัจจุบันทั้งหมดจากฐานข้อมูลบน Firebase FireStore และส่งข้อมูลที่ได้ไปแปลงที่คลาส MessagesListAdapter โดยมีการคืนค่าเป็นข้อมูลรายการประวัติการสนทนาทั้งหมดและในขั้นตอนสุดท้ายคลาส User-ChatFragment จะทำการแสดงรายการประวัติการสนทนาทั้งหมดออกทางหน้าจอ เมื่อผู้ใช้พิมพ์ข้อความและกดปุ่มส่งระบบจะเรียกให้เมธอด send() เพื่อทำการบันทึกข้อมูลไว้บน Firebase FireStore และทำการแสดงข้อมูลรายการประวัติการสนทนาทั้งหมดที่ถูกอัพเดท โดยใช้เมธอด Onregister() ที่คลาส Register ส่งข้อมูลการลงทะเบียนระบบจะเรียกใช้เมธอด register ที่คลาส api:Server ทำการเชื่อม api insert ข้อมูลลงฐานข้อมูล ฐานข้อมูลจะส่งสถานะการลงทะเบียนมาที่คลาส api:Server ระบบจะแสดงสถานะการลงทะเบียนมายังคลาส Register และจะแสดงออกทางหน้าจอไปยังเจ้าของร้าน
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.99\columnwidth] \includegraphics[width=0.99\columnwidth]
{Figures/3/Sequence/booking} {Figures/3/Sequence/EditList}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ} \caption{Sequence Diagram การแก้ไขรายการ}
\label{Fig:Sequence-booking} \label{Fig:Sequence-Editlist}
\end{figure} \end{figure}
\end{sidewaysfigure} \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 \newpage
จากภาพที่ \ref{Fig:Sequence-addshop} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-Editlist} สามารถอธิบายแผนภาพ Sequence Diagram การแก้ไขรายการ ได้ดังนี้ เมื่อเจ้าของร้านทำการ login เสร็จ เจ้าของร้านกดที่สัญลักษณ์แก้ไขระบบจะแสดงช่องให้กรอกข้อมูล และเมื่อเจ้าของร้านกรอกข้อมูลที่ต้องการแก้ไขเสร็จแล้วกดเครื่องหมายถูก ระบบจะทำการเรียกใช้เมธอด updateList() ที่คลาส Editlist ระบบจะทำการส่งข้อมูลแบบ put ไปยังคลาส api:Server ด้วยเมธอด list จะทำการ update ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนแก้ไขข้อมูลสำเร็จและแสดงข้อมูลแก้ไขออกทางหน้าจอ
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addlist} {Figures/3/Sequence/Editshop}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ} \caption{Sequence Diagram การแก้ไขข้อมูลร้าน }
\label{Fig:Sequence-addlist} \label{Fig:Sequence-editshop}
\end{figure} \end{figure}
\end{sidewaysfigure} \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 \newpage
จากภาพที่ \ref{Fig:Sequence-addpromotion} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-editshop} สามารถอธิบายแผนภาพ Sequence Diagram การแก้ไขข้อมูลร้าน ได้ดังนี้ เเมื่อเจ้าของร้านทำการ login เสร็จ เจ้าของร้านกดที่สัญลักษณ์แก้ไขระบบจะแสดงช่องให้กรอกข้อมูล และเมื่อเจ้าของร้านกรอกข้อมูลที่ต้องการแก้ไขเสร็จแล้วกดยืนยัน ระบบจะทำการเรียกใช้เมธอด updateShop() ที่คลาส EditShop ระบบจะทำการส่งข้อมูลแบบ put ไปยังคลาส api:Server ด้วยเมธอด shop จะทำการ update ข้อมูลลงฐานข้อมูล ระบบจะทำการแจ้งเตือนแก้ไขข้อมูลสำเร็จและแสดงข้อมูลแก้ไขออกทางหน้าจอ
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=0.8\columnwidth]
{Figures/3/Sequence/addbeautician} {Figures/3/Sequence/Booking}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ} \caption{Sequence Diagram การจองคิว}
\label{Fig:Sequence-addbeautician} \label{Fig:Sequence-booking}
\end{figure} \end{figure}
\end{sidewaysfigure} \end{sidewaysfigure}
\newpage \newpage
จากภาพที่ \ref{Fig:Sequence-addbeautician} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง จากภาพที่ \ref{Fig:Sequence-booking} สามารถอธิบายแผนภาพ Sequence Diagram การจองคิว ได้ดังนี้ เมื่อผู้ใช้ทำการเข้าสู่ระบบสำเร็จ ทำการเลือกร้านที่ต้องการจองคิวที่คลาส Shop ระบบจะทำการแสดง model เพื่อจองคิว ผู้ใช้เรียกวันที่ รายการ ข้อมูลช่าง เวลา และกดยืนยัน ระบบจะเรียกใช้เมธอด addBooking() ที่คลาส BookingController เพิ่มข้อมูลวันที่ รายการ ข้อมูลช่าง เวลา แบบเมธอด post ในคลาส api:Server ด้วย เมธอด booking ทำการ insert ข้อมูลการจองคิวลงฐานข้อมูล ระบบจะทำการเช็คการจองคิวที่คลาส api:Server จะทำการตรวสอบข้อมูลการจองคิวกับฐานข้อมูลและส่งสถานะกับมาที่คลาส api:Server เพื่อแจ้งเตือนสถานะการจองคิว ถ้าการจองคิวไม่สำเร็จระบบจะแจ้งเตือนว่ายังไม่เข้าสู่ระบบและจะแสดงหน้าเข้าสู่ระบบ และเมื่อจองคิวสำเร็จระบบจะแจ้งเตือนว่าจองคิวสำเร็จระบบจะแสดงข้อมูลการจองคิวออกทางหน้าจอ
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 \newpage
จากภาพที่ \ref{Fig:Sequence-addshopimage} สามารถอธิบายแผนภาพ Sequence Diagram แสดงส่งเอกสารตรวจสอบ ได้ดังนี้ เมื่อผู้ใช้เปิดโปรแกรมระบบจะเรียกใช้เมธอด onCreate() ที่คลาส MainActivity ระบบจะทำการสร้าง \section{ER-Diagram}
Fragment ขึ้นมาโดยใช้เมธอด onCreate() ที่คลาส SubmitFragment เมื่อ Submit-Fragment ถูกติดตั้งบน MainActivity เมธอด initInstances() จะถูกเรียกเพื่อสร้างหน้าจอแสงดผลเมื่อผู้ใช้กดปุ่มถ่ายรูประบบจะเรียกใช้ไลบรารี่ ScanConstants เพื่อถ่ายภาพเอกสารและรอให้ผู้ใช้ถ่ายครบทั้งสองแผ่นจึงจะแสดงปุ่มกดส่งเอกสารเพื่อตรวจสอบ แผนภาพแสดงความสัมพันธ์ระหว่างข้อมูล (Entity Relationship Diagram : ERD) คือ แผนภาพที่ใช้เป็นเครื่องมือสําหรับจําลองข้อมูล ซึ่งจะประกอบไปด้วย เอนทิตี (Entity) แอททริบิว (Attribute) และความสัมพันธ์ (Relationship) ซึ่งการออกแบบฐานข้อมูลของเว็บบล็อกสำหรับวิจารณ์ภาพยนตร์ โดยใช้รูปแบบ ERD Chen Model ซึ่งมีสัญลักษณ์ดังตารางที่ \ref{tab:ER-Diagram}
\newpage
\begin{sidewaysfigure} \begin{sidewaysfigure}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.8\columnwidth] \includegraphics[width=1.0\columnwidth]
{Figures/3/Sequence/addbeauticianimage} {Figures/3/DB/ER.png}
\caption{Sequence Diagram แสดงส่งเอกสารตรวจสอบ} \caption{ER Diagram ระบบจองคิวร้านเสริมสวย}
\label{Fig:Sequence-addbeauticianimage} \label{Fig:data}
\end{figure} \end{figure}
\end{sidewaysfigure} \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
แสดงดังตารางที่ \ref{tab:DB}
\begin{table}[H] \begin{table}[H]
\centering \caption{สัญลักษณ์ของ ER-Diagram}
\caption{สัญลักษณ์ของโครงสร้างฐานข้อมูลแบบ Firebase} \label{tab:ER-Diagram}
\label{tab:DB} \begin{tabular}{|c|p{10cm}|}
\begin{tabular}{| c | p{10cm} |}
\hline \hline
\textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \textbf{สัญลักษณ์} & \multicolumn{1}{c|}{\textbf{การใช้งาน}} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbroot}} \raisebox{-\totalheight}{\includegraphics[height=2cm]{Figures/table/ER/1}}
& \setstretch{1.5} {Database เป็นการเรียกชื่อแทนโหนด(Node)บนสุดที่ใช้ในการเก็บข้อมูล} \\ \hline & \setstretch{1.5} {การใช้งาน ใช้แสดงเอนทิตี้ เอนทิตี้ คือ กลุ่มของข้อมูลที่เป็นเรื่องเดียวกันที่ เกี่ยวข้องกัน} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbcollection}} \raisebox{-\totalheight}{\includegraphics[height=2cm]{Figures/table/ER/2}}
& \setstretch{1.5} {Collection เป็นการเรียกชื่อแทนของการเก็บหลาย ๆ เอกสารไว้ด้วยกัน} \\ \hline & \setstretch{1.5} {เอนทิตี้อ่อนแอ (Weak entity) คือ เอนทิตี้ที่มีการคงอยู่เกี่ยวข้อง กับเอนทิตี้อื่นในระบบฐานข้อมูล} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.1\textwidth]{Figures/3/DB/dbdoc}} \raisebox{-\totalheight}{\includegraphics[width=3cm]{Figures/table/ER/3}}
& \setstretch{1.5} {Document เป็นการเรียกชื่อแทนหน่วยการเก็บของข้อมูลใน Cloud Firestore ภายในจะประกอบไปด้วย ชื่อของ Document ชื่อของคีย์ (key) และ ค่าข้อมูล (value) โดยชื่อของ Document ห้ามซ้ำกัน ซึ่งใน Cloud Firestore สามารถระบุประเภทของข้อมูลได้ 9 ประเภทได้แก่ boolean, number, string, geo point, timestamp, array, object, reference และ null} \\ \hline & \setstretch{1.5} {เส้นความสัมพันธ์ (Relationship line ) คือ เส้นเชื่อมความสัมพันธ์ ระหว่าง เอนทิตี้} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/4}}
& \setstretch{1.5} {ความสัมพันธ์ ใช้แสดงความสัมพันธ์ระหว่าง 2 เอนทิตี้ขึ้นไป} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/5}}
& \setstretch{1.5} {Generalization แอททริบิว ใช้แสดง แอททริบิว ของ เอนทิตี้} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/6}}
& \setstretch{1.5} {คีย์หลัก (Key Attribute) ใช้แสดงคีย์หลัก} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/7}}
& \setstretch{1.5} {Multi-Value Attribute แอดที่นิ้วที่มีค่าของข้อมูลในแต่ละสมาชิกของเอนทิตี้ได้หลายค่า} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.3\textwidth]{Figures/table/ER/8}}
& \setstretch{1.5} {ความสัมพันธ์แบบหนึ่งต่อหนึ่ง} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/9}}
& \setstretch{1.5} {ความสัมพันธ์แบบหนึ่งต่อกลุ่ม} \\ \hline
\raisebox{-\totalheight}{\includegraphics[width=0.2\textwidth]{Figures/table/ER/10}}
& \setstretch{1.5} {ความสัมพันธ์แบบกลุ่มต่อกลุ่ม} \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\begin{figure}[H]
\centering
\includegraphics[width=0.7\columnwidth]
{Figures/3/DB/DB1}
\caption{โครงสร้างฐานข้อมูลแบบ Firebase}
\label{Fig:DB1}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=0.9\columnwidth] \begin{table}[H]
{Figures/3/DB/DB2}
\caption{โครงสร้างฐานข้อมูลแบบ Firebase(ต่อ)}
\label{Fig:DB2}
\end{figure}
\begin{figure}[H]
\centering
\includegraphics[width=0.55\columnwidth]
{Figures/3/DB/DB3}
\caption{โครงสร้างฐานข้อมูลแบบ Firebase(ต่อ)}
\label{Fig:DB3}
\end{figure}
\begin{figure}[H]
\centering \centering
\includegraphics[width=0.7\columnwidth] \caption{แสดงรายละเอียด Entity ของ ER-Diagram ระบบจองคิวร้านเสริมสวย}
{Figures/3/DB/DB4} \label{tab:แสดงรายละเอียด Entity}
\caption{โครงสร้างฐานข้อมูลแบบ Firebase(ต่อ)} \begin{tabular}{|p{3cm}|p{3cm}|p{4cm}|}
\label{Fig:DB4} \hline
\end{figure} \multicolumn{1}{|c|}{\centering{ชื่อตาราง(ภาษาอังกฤษ)}} & \multicolumn{1}{c|}{\centering {ชื่อตาราง(ภาษาไทย)}} & \multicolumn{1}{c|}{\centering {อธิบาย}} \\ \hline
Users & ข้อมูลผู้ใช้ & ตารางเก็บข้อมูลผู้ใช้งาน \\ \hline
shops & ข้อมูลร้าน & ตารางเก็บข้อมูลร้าน \\ \hline
Lists & ข้อมูลรายการ & ตารางเก็บข้อมูลรายการ \\ \hline
Bookings & ข้อมูลการจอง & ตารางเก็บข้อมูการจองคิว \\ \hline
Beauticians & ข้อมูลผช่าง & ตารางเก็บข้อมูช่าง \\ \hline
Reviews & ข้อมูลรีวิว & ตารางเก็บข้อมูลรีวิว \\ \hline
Userimages & ข้อมูลรูปภาพผู้ใช้ & ตารางเก็บข้อมูลรูปภาพผู้ใช้งาน \\ \hline
Shopimages & ข้อมูลรูปภาพร้าน & ตารางเก็บข้อมูลรูปภาพร้าน \\ \hline
Workimages & ข้อมูลรูปภาพผลงานร้าน & ตารางเก็บข้อมูลรูปภาพผลงานร้าน \\ \hline
Beauticianimages & ข้อมูลรูปภาพผลงานช่าง & ตารางเก็บข้อมูลรูปภาพผลงานช่าง \\ \hline
\end{tabular}
\end{table}
\newpage
จากรูที่ \ref{Fig:DB1}-\ref{Fig:DB4} สามารถอธิบายโครงสร้างของข้อมูลได้ดังนี้
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]
{Figures/3/DB/nodePost}
\caption{โหนดเก็บข้อมูลประกาศ}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลประกาศ} \caption{แสดงรายละเอียด Attribute ของ Entity Users}
\label{my-label1} \label{tab:แสดงรายละเอียด users}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Posts & โหนดสำหรับเก็บข้อมูลประกาศทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
Post & สำหรับเก็บข้อมูลแต่ละประกาศ \\ \hline id & int(11) & รหัสผู้ใช้งาน & PK & \\ \hline
title & สำหรับเก็บชื่อหัวข้อประกาศ \\ \hline name & varchar(50) & ชื่อ & & \\ \hline
description & สำหรับเก็บรายละเอียดประกาศ \\ \hline email & varchar(255) & อีเมลล์ & & \\ \hline
collection & สำหรับเก็บประเภทของประกาศได้แก่ สาธารณะและเฉพาะบุคคล \\ \hline password & varchar(255) & รหัสผ่าน & &\\ \hline
fileURL & สำหรับเก็บ url ของเอกสารแนบประกาศ \\ \hline address & text & ที่อยู่ & &\\ \hline
id & สำหรับเก็บรหัสของประกาศ \\ \hline tel & int(11) & เบอร์โทร & &\\ \hline
time & สำหรับเก็บเวลาที่ประกาศ \\ \hline role & int (11)& บทบาท & &\\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage \newpage
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]
{Figures/3/DB/nodeDoc}
\caption{โหนดเก็บข้อมูลเอกสารที่เกี่ยวข้อง}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลเอกสารที่เกี่ยวข้อง} \caption{แสดงรายละเอียด Attribute ของ Entity Shops}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Shops}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Docs & โหนดสำหรับเก็บข้อมูลของเอกสารที่เกี่ยวข้องทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
Doc & สำหรับเก็บข้อมูลเอกสารแต่ละฉบับ \\ \hline id & int(11) & รหัสร้าน & PK & \\ \hline
title & สำหรับเก็บชื่อหัวเรื่องของเอกสาร \\ \hline name & varchar(50) & ชื่อ & & \\ \hline
description & สำหรับเก็บรายละเอียดของเอกสาร \\ \hline nameeng & varchar(50) & ชื่อภาษาอังกฤษ & & \\ \hline
fileType & สำหรับนามสกุลไฟล์เอกสาร เช่น .pdf .png เป็นต้น \\ \hline timeopen & time & เวลาเปิด & &\\ \hline
fileURL & สำหรับเก็บ url ของเอกสาร\\ \hline timeclose & time & เวลาปิด & &\\ \hline
time & สำหรับเก็บเวลาที่ถูกอัพโหลดเข้าสู่ระบบโดยเจ้าหน้าที่\\ \hline address & text & ที่อยู่ & &\\ \hline
tel & varchar(20)& เบอร์โทร & &\\ \hline
detail & text & รายละเอียด & & \\ \hline
lat & double & ตำแหน่ง x & & \\ \hline
lng& double & ตำแหน่ง y & &\\ \hline
facebook & text & เฟซบุ๊ค & &\\ \hline
userId & int(11) & รหัสผู้ใช้ &FK & Users\\ \hline
type & text & บทบาท & &\\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage
\begin{figure}[H]
\centering
\includegraphics[width=0.4\columnwidth]
{Figures/3/DB/nodeChat}
\caption{โหนดเก็บข้อมูลประวัติการสนทนา}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลประวัติการสนทนา} \caption{แสดงรายละเอียด Attribute ของ Entity Lists}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Lists}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Chats & โหนดสำหรับเก็บข้อมูลประวัติการสนทนาทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
User\_id & สำหรับเก็บประวัติการสนทนาของผู้ใช้แต่ละคน \\ \hline id & int(11) & รหัสรายการ & PK & \\ \hline
Messages & สำหรับเก็บประวัติการสนทนาทั้งหมดของผู้ใช้ \\ \hline name & varchar(50) & ชื่อ & & \\ \hline
Message & สำหรับเก็บข้อมูลของแต่ละข้อความ \\ \hline price & int(11) & ราคา & & \\ \hline
message & สำหรับเก็บข้อความ \\ \hline time & int(11) & เวลา & &\\ \hline
name & สำหรับเก็บชื่อของผู้ส่งข้อความ\\ \hline shop & int(11) & รหัสร้าน &FK &Shops\\ \hline
photo & สำหรับเก็บ url รูปภาพของผู้ส่งข้อความ\\ \hline userId & int(11) & รหัสผู้ใช้งาน &FK &Users\\ \hline
senderId & สำหรับเก็บรหัสของผู้ส่งข้อความ\\ \hline
time & สำหรับเก็บเวลาที่ข้อความถูกส่ง\\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]
{Figures/3/DB/nodeEvent}
\caption{โหนดเก็บข้อมูลกำหนดการ}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลกำหนดการ} \caption{แสดงรายละเอียด Attribute ของ Entity Bookings}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Bookings}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Events & โหนดสำหรับเก็บข้อมูลของกำหนดการทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
Event & สำหรับเก็บข้อมูลของแต่ละกำหนดการ \\ \hline id & int(11) & รหัสการจอง & PK & \\ \hline
title & สำหรับเก็บชื่อหัวข้อของกำหนดการ \\ \hline name & varchar(50) & ชื่อ & & \\ \hline
description & สำหรับเก็บรายละเอียดของกำหนดการ\\ \hline shop & int(11) & รหัสร้าน & FK&Shops \\ \hline
time & สำหรับเก็บเวลาของกำหนดการ\\ \hline list & int(11) & รหัสรายการ &FK &Lists\\ \hline
beautician & int(11) & รหัสช่าง &FK &Beauticians\\ \hline
date & int(11) & วันที่ & &\\ \hline
time & time & เวลา & &\\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage
\begin{figure}[H]
\centering
\includegraphics[width=0.4\columnwidth]
{Figures/3/DB/nodeReq}
\caption{โหนดเก็บข้อมูลการยื่นสำเนาเอกสารเพื่อตรวจสอบของนักศึกษา}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลการยื่นสำเนาเอกสารเพื่อตรวจสอบของนักศึกษา} \caption{แสดงรายละเอียด Attribute ของ Entity Beauticians}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Beauticians}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
RusetSubmitDocs & โหนดสำหรับเก็บข้อมูลการยื่นสำเนาเอกสารเพื่อตรวจสอบของนักศึกษาทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
User\_id & สำหรับเก็บข้อมูลของแต่ละสำเนาเอกสารของนักศึกษาแต่ละคน \\ \hline id & int(11) & รหัสช่าง & PK & \\ \hline
doc2 & สำหรับเก็บ url ของภาพถ่ายสำเนาเอกสารฉบับที่ 1\\ \hline name & varchar(50) & ชื่อ & & \\ \hline
doc2 & สำหรับเก็บ url ของภาพถ่ายสำเนาเอกสารฉบับที่ 2\\ \hline userID & int(11) & รหัสผู้ใช้งาน & FK&Users\\ \hline
status & สำหรับเก็บผลการตรวจสอบของเจ้าหน้าที่ \\ \hline shopID & int (11)& รหัสร้าน &FK &Shops\\ \hline
time & สำหรับเก็บเวลาที่สำเนาเอกสารถูกเพิ่มเข้าสู่ระบบ \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage
\begin{figure}[H]
\centering
\includegraphics[width=0.35\columnwidth]
{Figures/3/DB/nodeUser}
\caption{โหนดเก็บข้อมูลของนักศึกษา}
\label{Fig:DB4}
\end{figure}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลของนักศึกษา} \caption{แสดงรายละเอียด Attribute ของ Entity Reviews}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Reviews}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Users & โหนดสำหรับเก็บข้อมูลของนักศึกษา \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
User\_id & สำหรับเก็บข้อมูลของนักศึกษาแต่ละคน \\ \hline id & int(11) & รหัสรีวิว & PK & \\ \hline
depart & สำหรับเก็บภาควิชาของนักศึกษา\\ \hline topic & text & หัวข้อรีวิว & & \\ \hline
major & สำหรับเก็บสาขาของนักศึกษา\\ \hline message &text & ข้อความรีวิว & & \\ \hline
sid & สำหรับเก็บรหัสประจำตัวนักศึกษา \\ \hline point & double & คะแนน & &\\ \hline
name & สำหรับเก็บชื่อของนักศึกษา \\ \hline shop & int(11) & รหัสร้าน &FK &Shops\\ \hline
year & สำหรับเก็บชั้นปีของนักศึกษา \\ \hline userID & int(11) & เบอร์โทร & FK&Users\\ \hline
lastChat & สำหรับเก็บเวลาที่สนทนากับเจ้าหน้าที่ล่าสุด \\ \hline
photoUrl & สำหรับเก็บ url รูปภาพโปรไฟล์ (Profile) \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage \begin{table}[H]
\begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth] \caption{แสดงรายละเอียด Attribute ของ Entity Userimages}
{Figures/3/DB/nodeQueue} \label{tab:แสดงรายละเอียดข้อมูล Userimages}
\caption{โหนดเก็บข้อมูลการจองคิวของนักศึกษา} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\label{Fig:DB4} \hline
\end{figure} \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
image_id & int(11) & รหัสรูปภาพ & PK & \\ \hline
user_id & int(11) & รหัสผู้ใช้งาน & PK& \\ \hline
image & longblob & รูปภาพผู้ใช้งาน & & \\ \hline
type& varchar(50) & ประเภทรูปภาพ & &\\ \hline
\end{tabular}
\end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลการจองคิวของนักศึกษา} \caption{แสดงรายละเอียด Attribute ของ Entity Shopimages}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Shopimages}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Queue & โหนดสำหรับเก็บข้อมูลการจองคิวของนักศึกษาทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
q\_id & สำหรับเก็บข้อมูลของการจองคิวแต่ละครั้งที่เปิดจองคิว \\ \hline image_id & int(11) & รหัสรูปภาพ & PK & \\ \hline
Date & สำหรับเก็บวันที่สำหรับส่งเอกสาร\\ \hline shop_id & int(11) & รหัสร้าน & PK& \\ \hline
Time & สำหรับเก็บรายชื่อของนักศึกษาที่ทำการจองคิวในส่งเอกสารเวลานั้น ๆ\\ \hline image & longblob & รูปภาพร้าน & & \\ \hline
User\_id & สำหรับเก็บรหัสของนักศึกษา \\ \hline type& varchar(50) & ประเภทรูปภาพ & &\\ \hline
title & สำหรับเก็บชื่อหัวเรื่องกำหนดการการจองคิว \\ \hline
studentPerHr & สำหรับเก็บจำนวนนักศึกษาต่อชั่วโมง \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\begin{table}[H]
\newpagedr
\begin{figure}[H]
\centering \centering
\includegraphics[width=0.4\columnwidth] \caption{แสดงรายละเอียด Attribute ของ Entity Workimages}
{Figures/3/DB/nodeFaq} \label{tab:แสดงรายละเอียดข้อมูล Workimages}
\caption{โหนดเก็บข้อมูลคำถามที่พบบ่อย} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\label{Fig:DB4} \hline
\end{figure} \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
\multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
image_id & int(11) & รหัสรูปภาพ & PK & \\ \hline
shop_id & int(11) & รหัสร้าน & PK& \\ \hline
image & longblob & รูปภาพผลงานร้าน & & \\ \hline
type& varchar(50) & ประเภทรูปภาพ & &\\ \hline
\end{tabular}
\end{table}
\begin{table}[H] \begin{table}[H]
\centering \centering
\caption{อธิบายโหนดที่ใช้เก็บข้อมูลคำถามที่พบบ่อย} \caption{แสดงรายละเอียด Attribute ของ Entity Beauticianimages}
\label{my-label1} \label{tab:แสดงรายละเอียดข้อมูล Beauticianimages}
\begin{tabular}{|c|p{10cm}|} \begin{tabular}{|p{2cm}|p{2cm}|p{2cm}|p{2cm}|p{2cm}|}
\hline \hline
\multicolumn{1}{|c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{คำอธิบาย}} \\ \hline \multicolumn{1}{|c|}{\textbf{Field}} & \multicolumn{1}{c|}{\textbf{Type}} & \multicolumn{1}{c|}{\textbf{Description}} &
Queue & โหนดสำหรับเก็บข้อมูลคำถามที่พบบ่อยทั้งหมด \\ \hline \multicolumn{1}{c|}{\textbf{Key}} & \multicolumn{1}{c|}{\textbf{Reference}} \\ \hline
Faq\_id & สำหรับเก็บข้อมูลคำถามที่พบบ่อยแต่ละรายการ \\ \hline image_id & int(11) & รหัสรูปภาพ & PK & \\ \hline
title & สำหรับเก็บคำถาม \\ \hline beautician_id & int(11) & รหัสช่าง & PK& \\ \hline
description & สำหรับเก็บคำตอบ \\ \hline image & longblob & รูปภาพผลงานช่าง & & \\ \hline
type& varchar(50) & ประเภทรูปภาพ & &\\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\ No newline at end of file
Document/Latex/4-implementation.tex
View file @ cfaa58ab
This source diff could not be displayed because it is too large. You can view the blob instead.
Document/Latex/5-testing.tex
View file @ cfaa58ab
\chapter{การทดสอบระบบ} \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}
\item{การทดสอบการใช้งานเมนูนำทางของแอนดรอยด์แอปพลิเคชัน}
การทดสอบเมนูนำทางของแอปพลิเคชันในการนำทางผู้ใช้งาน ซึ่งเมนูหลักประกอบด้วย เมูนูหน้าประกาศ เมนูหน้าสนทนา เมนูหน้าปฏิทินกำหนดการ เมนูหน้าดาวน์โหลดเอกสาร เมนูส่งภาพถ่ายสำเนาเอกสาร เมนูหน้าจองคิวส่งเอกสาร เมนูหน้าคำถามทีพบบ่อย เมนูหน้าเกี่ยวกับ เมนูหน้าข้อมูลส่วนตัวและเมนูออกจากระบบ ผลทดสอบดังตารางที่ \ref{tab:ผลการทดเมนูหลัก}-\ref{tab:ผลการทดเมนูนำทาง2}
\begin{table}[H]
\caption{ผลการทดสอบเมนูนำทาง}
\centering
\label{tab:ผลการทดเมนูหลัก}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{เมนูประกาศ}
& \setstretch{1.0}{กดปุ่มเมนูประกาศ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการประกาศทั้งหมด} \\ \hline
\setstretch{1.0}{เมนูสนทนา}
& \setstretch{1.0}{กดปุ่มเมนูสนทนา}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงข้อมูลประวัติการสนทนา} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าปฏิทินกำหนดการ}
& \setstretch{1.0}{กดปุ่มเมนูปฏิทินกำหนดการ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงข้อมูลประวัติการสนทนา} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าส่งภาพถ่ายสำเนาเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าส่งภาพสำเนาเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าส่งเอกสารภาพสำเนาเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\begin{table}[H]
\caption{ผลการทดสอบเมนูนำทาง(ต่อ)}
\centering
\label{tab:ผลการทดเมนูนำทาง2}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{เมนูหน้าจองคิวส่งเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าจองคิวส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจองคิวส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอข่าวสารพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าคำถามทีพบบ่อย}
& \setstretch{1.0}{กดปุ่มเมนูหน้าคำถามทีพบบ่อย}
& \setstretch{1.0}{ระบบแสดงหน้าจองคิวส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าเกี่ยวกับ}
& \setstretch{1.0}{กดปุ่มเมนูหน้าเกี่ยวกับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าเกี่ยวกับซึ่งแสดงข้อมูลผู้พัฒนาวรมไปถึงแสดงเครดิต (credit) ไลบรารีต่าง ๆ ที่ใช้งานภายในแอปพลิเคชัน} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าบัญชีผู้ใช้}
& \setstretch{1.0}{กดปุ่มเมนูหน้าบัญชีผู้ใช้}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอข้อมูลส่วนตัวโดยมีข้อมูล รูปประจำตัว ชื่อผู้ใช้ สาขาวิชาและภาควิชา} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูออกจากระบบ}
& \setstretch{1.0}{กดปุ่มเมนูออกจากระบบ}
& \setstretch{1.0}{ทำการออกจากระบบและแสดงหน้าจอข่าวสาร} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้ารายละเอียดประกาศ}
ในการแสดงผลหน้าจอรายละเอียดประกาศนั้นจะประกอบไปด้วยหัวเรื่องประกาศ รายละเอียดประกาศ วันที่ประกาศและเอกสารแนบ ผลการทดสอบดังตารางที่ \ref{tab:การทดหน้ารายละเอียดประกาศ}
\begin{table}[H]
\caption{ผลการทดสอบหน้ารายละเอียดประกาศ}
\centering
\label{tab:การทดหน้ารายละเอียดประกาศ}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้ารายละเอียดประกาศ}
& \setstretch{1.0}{กดปุ่มเมนูประกาศ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการประกาศทั้งหมด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มอ่านรายละเอียดประกาศ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายละเอียดประกาศ} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มดาวน์โหลดเอกสารแนบ}
& \setstretch{1.0}{ระบบแสดงผลการดาวน์โหลดเอกสารแนบ} \\ \cline{2-3}
& \setstretch{1.0}{เมื่อดาวน์โหลดเสร็จ กดปุ่มเปิดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายละเอียดประกาศ} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับอีกครั้ง}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้าสนทนา} ในการแสดงผลหน้าจอสนทนานั้นจะประกอบไปด้วยรายการประวิติการสนทนา ช่องกรอกข้อความและปุ่มส่งข้อความ ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าสนทนา}
\begin{table}[H]
\caption{ผลการการทดสอบหน้าสนทนา}
\centering
\label{tab:การทดสอบหน้าสนทนา}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้ารายละเอียดประกาศ}
& \setstretch{1.0}{กดปุ่มเมนูสนทนา}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงรายการประวัติการสนทนา} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มที่ช่องกรอกข้อความ}
& \setstretch{1.0}{ระบบแสดงตัวกระพริบ (cursor) เพื่อชี้ให้รู้ว่า ตำแหน่งของการพิมพ์อักขระ} \\ \cline{2-3}
& \setstretch{1.0}{พิมพ์อักขระ}
& \setstretch{1.0}{ระบบแสดงผลอัขระที่ถูกพิมพ์} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มส่งข้อความ}
& \setstretch{1.0}{ระบบแสดงข้อความที่ถูกพิมพ์บนรายการประวัติสนทนาล่าสุด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้าปฏิทินกำหนดการ}
ในการแสดงผลหน้าปฏิทินกำหนดการนั้นจะประกอบไปด้วยรายการประวิติการสนทนา ช่องกรอกข้อความและปุ่มส่งข้อความ ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าปฏิทินกำหนดการ}
\begin{table}[H]
\caption{ผลการการทดสอบหน้าปฏิทินกำหนดการ}
\centering
\label{tab:การทดสอบหน้าปฏิทินกำหนดการ}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าปฏิทินกำหนดการ}
& \setstretch{1.0}{กดปุ่มเมนูปฏิทินกำหนดการ}
& \setstretch{1.0}{ระบบแสดงหน้าจอปฏิทินกำหนดการโดยมีการแสดงกำหนดการของวันปัจจุบัน} \\ \cline{2-3}
& \setstretch{1.0}{กดเลือกวันที่ต้องการดูกำหนดการในปฏิทิน}
& \setstretch{1.0}{ระบบแสดงกำหนดการของวันที่ถูกเลือก} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้าดาวน์โหลดเอกสาร}
ในการแสดงผลหน้าจอดาวน์โหลดเอกสารนั้นจะประกอบไปด้วยรายการเอกสารโดยที่แต่ละฉบับบจะแสดงชื่อเอกสารและปุ่มดาวน์โหลดเอกสาร ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าดาวน์โหลดเอกสาร}
\begin{table}[H]
\caption{ผลการการทดสอบหน้าดาวน์โหลดเอกสาร}
\centering
\label{tab:การทดสอบหน้าดาวน์โหลดเอกสาร}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลการดาวน์โหลดเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{เมื่อดาวน์โหลดเสร็จ กดปุ่มเปิดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้าส่งภาพถ่ายสำเนาเอกสาร}
% \item การทดสอบหน้าส่งภาพถ่ายสำเนาเอกสาร\\
ในการแสดงผลหน้าส่งภาพถ่ายสำเนาเอกสารนั้นจะประกอบไปด้วยปุ่มเพิ่มเอกสารฉบับที่ 1 ปุ่มเพิ่มเอกสารฉบับที่ 2 และปุ่มส่งเอกสาร ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าส่งภาพถ่ายสำเนาเอกสาร}
\begin{table}[H]
\caption{ผลการทดสอบหน้าส่งภาพถ่ายสำเนาเอกสาร}
\centering
\label{tab:การทดสอบหน้าส่งภาพถ่ายสำเนาเอกสาร}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าส่งภาพถ่ายสำเนาเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าจองคิวส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงหน้าจองคิวส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเพิ่มเอกสารฉบับที่ 1}
& \setstretch{1.0}{ระบบแสดงหน้าจอกล้องถ่ายภาพ} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มถ่ายภาพเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลภาพเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มถัดไป}
& \setstretch{1.0}{ระบบแสดงผลหน้าปรัปแต่งภาพเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มยืนยัน}
& \setstretch{1.0}{ระบบแสดงผลภาพหน้าส่งภาพถ่ายสำเนาเอกสารพร้อมทั้งแสดงผลภาพเอกสารฉบับที่ 1} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเพิ่มเอกสารฉบับที่ 2}
& \setstretch{1.0}{ระบบแสดงหน้าจอกล้องถ่ายภาพ} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มถ่ายภาพเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลภาพเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มถัดไป}
& \setstretch{1.0}{ระบบแสดงผลหน้าปรัปแต่งภาพเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มยืนยัน}
& \setstretch{1.0}{ระบบแสดงผลภาพหน้าส่งภาพถ่ายสำเนาเอกสารพร้อมทั้งแสดงผลภาพเอกสารฉบับที่ 1 และฉบับที่ 2} \\ \cline{2-3}
& \setstretch{1.0}{กดส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลการส่งเอกสารและแสดงสถานะการตรวจเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage
\item{การทดสอบหน้าจองคิวส่งเอกสาร}
ในการแสดงผลหน้าจองคิวส่งเอกสารนั้นจะประกอบไปด้วยปุ่มกดเลือกวันที่ ปุ่มกดเลือเวลา ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าจองคิวส่งเอกสาร}
\begin{table}[H]
\caption{ผลการทดสอบหน้าจองคิวส่งเอกสาร}
\centering
\label{tab:การทดสอบหน้าจองคิวส่งเอกสาร}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าจองคิวส่งเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าจองคิวส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอกำหนดการส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเลือกวันที่ต้องการส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลวันที่ถูกเลือก} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเลือกเวลาที่ต้องการส่งเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลเวลาที่ถูกเลือกพร้อมทั้งแสดงปุ่มกดบันทึก} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มบันทึก}
& \setstretch{1.0}{ระบบแสดงผลการจองวันที่ส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\end{itemize}
% \end{enumerate}
\section{การทดสอบการใช้งานเว็บแอปพลิเคชัน} \section{การทดสอบการใช้งานเว็บแอปพลิเคชัน}
\begin{itemize} \begin{itemize}
\item{การทดสอบการใช้งานเมนูนำทางของเว็บแอปพลิเคชัน} \item{การทดสอบหน้ารายละเอียดร้าน}
การทดสอบเมนูนำทางของเว็บแอปพลิเคชันในการนำทางผู้ใช้งาน ซึ่งเมนูหลักประกอบด้วย เมูนูหน้าประกาศ เมนูหน้าสนทนา เมนูหน้าปฏิทินกำหนดการ เมนูหน้าดาวน์โหลดเอกสาร เมนูหน้าคำถามทีพบบ่อย เมนูหน้าเกี่ยวกับและเมนูออกจากระบบ ผลทดสอบดังตารางที่ \ref{tab:ผลการทดเมนูหลัก}-\ref{tab:ผลการทดเมนูนำทาง2} ในการแสดงผลหน้าจอรายละเอียดร้านนั้นจะประกอบไปด้วย ข้อมูลร้าน แผนที่ร้าน รายการร้าน การจองคิว รีวิว ผลการทดสอบดังตารางที่ \ref{tab:Shop}
\begin{table}[H] \begin{table}[H]
\caption{ผลการทดสอบเมนูนำทาง} \caption{ผลการทดสอบหน้ารายละเอียดร้าน}
\centering \centering
\label{tab:ผลการทดเมนูหลัก} \label{tab:Shop}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | } \begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline \hline
% {\setstretch{1.0} } % {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} & {\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline {\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{เมนูประกาศ} \setstretch{1.0}{หน้ารายละเอียดร้าน}
& \setstretch{1.0}{กดปุ่มเมนูประกาศ} & \setstretch{1.0}{กดที่รูปภาพร้าน}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการประกาศทั้งหมด} \\ \hline & \setstretch{1.0}{ระบบแสดงผลหน้าจอร้านพร้อมทั้งแสดงรายการร้านทั้งหมด} \\ \cline{2-3}
\setstretch{1.0}{เมนูสนทนา} & \setstretch{1.0}{กดที่แผ่นที่}
& \setstretch{1.0}{กดปุ่มเมนูสนทนา} & \setstretch{1.0}{ระบบแสดงผลแผ่นที่} \\ \cline{2-3}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงข้อมูลประวัติการสนทนา} \\ \cline{2-3} & \setstretch{1.0}{กดปุ่มรายการ}
& \setstretch{1.0}{กดปุ่มย้อนกลับ} & \setstretch{1.0}{ระบบแสดงผลรายการ} \\ \cline{2-3}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline & \setstretch{1.0}{กดปุ่มจองคิว}
\setstretch{1.0}{ & \setstretch{1.0}{ระบบแสดงผลหน้าจอจองคิว} \\ \cline{2-3}
เมนูหน้าปฏิทินกำหนดการ} & \setstretch{1.0}{กดปุ่มจเขียนรีวิว}
& \setstretch{1.0}{กดปุ่มเมนูปฏิทินกำหนดการ} & \setstretch{1.0}{ระบบแสดงผลหน้าจอเขียนรีวิว} \\ \hline
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงข้อมูลประวัติการสนทนา} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอตารางรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าคำถามทีพบบ่อย}
& \setstretch{1.0}{กดปุ่มเมนูหน้าคำถามทีพบบ่อย}
& \setstretch{1.0}{ระบบแสดงหน้าจองคิวส่งเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูหน้าเกี่ยวกับ}
& \setstretch{1.0}{กดปุ่มเมนูหน้าเกี่ยวกับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าเกี่ยวกับซึ่งแสดงข้อมูลผู้พัฒนาวรมไปถึงแสดงเครดิต (credit) ไลบรารีต่าง ๆ ที่ใช้งานภายในแอปพลิเคชัน} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\setstretch{1.0}{
เมนูออกจากระบบ}
& \setstretch{1.0}{กดปุ่มเมนูออกจากระบบ}
& \setstretch{1.0}{ทำการออกจากระบบและแสดงหน้าจอข่าวสาร} \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage \newpage
\item{การทดสอบหน้ารายละเอียดประกาศ} \item{การทดสอบหน้าเจ้าของร้าน} ในการแสดงผลหน้าจอเจ้าของร้านนั้นจะประกอบไปด้วย โปรไฟล์ ข้อมูลร้าน รายการ ข้อมูลช่าง ดูการจองคิว เพิ่มรูปภาพ ผลการทดสอบดังตารางที่ \ref{tab:datashop}
ในการแสดงผลหน้าจอรายละเอียดประกาศนั้นจะประกอบไปด้วยหัวเรื่องประกาศ รายละเอียดประกาศ วันที่ประกาศและเอกสารแนบ ผลการทดสอบดังตารางที่ \ref{tab:การทดหน้ารายละเอียดประกาศ}
\begin{table}[H] \begin{table}[H]
\caption{ผลการทดสอบหน้ารายละเอียดประกาศ} \caption{ผลการการทดสอบหน้าเจ้าของร้าน}
\centering \centering
\label{tab:การทดหน้ารายละเอียดประกาศ} \label{tab:datashop}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | } \begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline \hline
% {\setstretch{1.0} } % {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} & {\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline {\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้ารายละเอียดประกาศ} \setstretch{1.0}{หน้าจอเจ้าของร้าน}
& \setstretch{1.0}{กดปุ่มเมนูประกาศ} & \setstretch{1.0}{กดปุ่มเมนูโปรไฟล์}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการประกาศทั้งหมด} \\ \cline{2-3} & \setstretch{1.0}{ระบบแสดงผลหน้าจอโปรไฟล์ ทั้งแสดงรูปภาพโปรไฟล์} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มอ่านรายละเอียดประกาศ} & \setstretch{1.0}{กดปุ่มเมนูข้อมูลร้าน}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายละเอียดประกาศ} \\ \cline{2-3} & \setstretch{1.0}{ระบบแสดงหน้าจอข้อมูลร้านทั้งหมด พร้แมทั้งแสดงรูปภาพร้าน} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มดาวน์โหลดเอกสารแนบ} & \setstretch{1.0}{กดปุ่มเมนูรายการ}
& \setstretch{1.0}{ระบบแสดงผลการดาวน์โหลดเอกสารแนบ} \\ \cline{2-3} & \setstretch{1.0}{ระบบแสดงหน้ารายการ} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ} & \setstretch{1.0}{กดปุ่มเมนูข้อมูลช่าง}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline & \setstretch{1.0}{ระบบแสดงหน้าข้อมูลช่าง} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเมนูดูการจองคิว}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอการจองคิว} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มเมนูเฟิ่มรูปภาพ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอการเพิ่มรูปภาพ} \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage \newpage
\item{การทดสอบหน้าสนทนา} ในการแสดงผลหน้าจอสนทนานั้นจะประกอบไปด้วยรายการประวิติการสนทนา ช่องกรอกข้อความและปุ่มส่งข้อความ ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าสนทนา} \item{การทดสอบหน้าช่าง} ในการแสดงผลหน้าจอเจ้าของร้านนั้นจะประกอบไปด้วย โปรไฟล์ ตารางงาน เพิ่มรูปภาพ ผลการทดสอบดังตารางที่ \ref{tab:Work}
\begin{table}[H] \begin{table}[H]
\caption{ผลการการทดสอบหน้าสนทนา} \caption{ผลการการทดสอบหน้าเจ้าของร้าน}
\centering \centering
\label{tab:การทดสอบหน้าสนทนา} \label{tab:Work}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | } \begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline \hline
% {\setstretch{1.0} } % {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} & {\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline {\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้ารายละเอียดประกาศ} \setstretch{1.0}{หน้าจอเจ้าของร้าน}
& \setstretch{1.0}{กดปุ่มเมนูสนทนา} & \setstretch{1.0}{กดปุ่มเมนูโปรไฟล์}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอสนทนาพร้อมทั้งแสดงรายการประวัติการสนทนา} \\ \cline{2-3} & \setstretch{1.0}{ระบบแสดงผลหน้าจอโปรไฟล์ ทั้งแสดงรูปภาพโปรไฟล์} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มที่ช่องกรอกข้อความ}
& \setstretch{1.0}{ระบบแสดงตัวกระพริบ (cursor) เพื่อชี้ให้รู้ว่า ตำแหน่งของการพิมพ์อักขระ} \\ \cline{2-3}
& \setstretch{1.0}{พิมพ์อักขระ}
& \setstretch{1.0}{ระบบแสดงผลอัขระที่ถูกพิมพ์} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มส่งข้อความ}
& \setstretch{1.0}{ระบบแสดงข้อความที่ถูกพิมพ์บนรายการประวัติสนทนาล่าสุด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\newpage & \setstretch{1.0}{กดปุ่มเมนูตารางงาน}
\item{การทดสอบหน้าปฏิทินกำหนดการ} & \setstretch{1.0}{ระบบแสดงผลหน้าจอตารางงาน} \\ \cline{2-3}
ในการแสดงผลหน้าปฏิทินกำหนดการนั้นจะประกอบไปด้วยรายการประวิติการสนทนา ช่องกรอกข้อความและปุ่มส่งข้อความ ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าปฏิทินกำหนดการ} & \setstretch{1.0}{กดปุ่มเมนูเฟิ่มรูปภาพ}
\begin{table}[H] & \setstretch{1.0}{ระบบแสดงผลหน้าจอการเพิ่มรูปภาพ} \\ \hline
\caption{ผลการการทดสอบหน้าปฏิทินกำหนดการ}
\centering
\label{tab:การทดสอบหน้าปฏิทินกำหนดการ}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าปฏิทินกำหนดการ}
& \setstretch{1.0}{กดปุ่มเมนูปฏิทินกำหนดการ}
& \setstretch{1.0}{ระบบแสดงตารางกำหนดารทั้งหมด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular} \end{tabular}
\end{table} \end{table}
\newpage
\item{การทดสอบหน้าดาวน์โหลดเอกสาร}
ในการแสดงผลหน้าจอดาวน์โหลดเอกสารนั้นจะประกอบไปด้วยรายการเอกสารโดยที่แต่ละฉบับบจะแสดงชื่อเอกสารและปุ่มดาวน์โหลดเอกสาร ผลการทดสอบดังตารางที่ \ref{tab:การทดสอบหน้าดาวน์โหลดเอกสาร}
\begin{table}[H]
\caption{ผลการการทดสอบหน้าดาวน์โหลดเอกสาร}
\centering
\label{tab:การทดสอบหน้าดาวน์โหลดเอกสาร}
\begin{tabular}{ | p{4.5cm} | p{4.5cm} | p{4.5cm} | }
\hline
% {\setstretch{1.0} }
{\multicolumn{1}{c}{\centering การทำงาน}} &
{\multicolumn{1}{c}{\centering เงื่อนไขการทดสอบ}} & {\multicolumn{1}{c}{\centering ผลการทดสอบ}} \\ \hline
\setstretch{1.0}{หน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{กดปุ่มเมนูหน้าดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอตารางรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มดาวน์โหลดเอกสาร}
& \setstretch{1.0}{ระบบแสดงผลการดาวน์โหลดเอกสาร} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอรายการเอกสารในระบบพร้อมทั้งแสดงปุมดาวน์โหลด} \\ \cline{2-3}
& \setstretch{1.0}{กดปุ่มย้อนกลับ}
& \setstretch{1.0}{ระบบแสดงผลหน้าจอประกาศพร้อมทั้งแสดงรายการข่าวสารทั้งหมด} \\ \hline
\end{tabular}
\end{table}
\end{itemize} \end{itemize}
Document/Latex/6-conclusion.tex
View file @ cfaa58ab
...@@ -15,10 +15,10 @@ ...@@ -15,10 +15,10 @@
\item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้ \item สามารถเพิ่ม แก้ไข และลบรายการให้บริการประจำร้านได้
\item สามารถเพิ่ม แก้ไข ข้อมูลร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลร้านได้
\item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้ \item สามารถเพิ่ม แก้ไข ข้อมูลตำแหน่งร้านได้
\item สามารถเพิ่ม ลบ ข้อมูลช่างได้
\end{itemize} \end{itemize}
\item ช่างประจำร้าน \item ช่างประจำร้าน
\begin{itemize} \begin{itemize}
\item ลงทะเบียนใช้ web ด้วย Email ได้
\item สามารถดูตารางการทำงานของตนเองได้ \item สามารถดูตารางการทำงานของตนเองได้
\item สามารถ post ภาพผลงานของตัวเองได้ \item สามารถ post ภาพผลงานของตัวเองได้
\item สามารถแก้ไขข้อมูลส่วนตัวได้ \item สามารถแก้ไขข้อมูลส่วนตัวได้
...@@ -39,8 +39,13 @@ ...@@ -39,8 +39,13 @@
\section{ปัญหาและอุปสรรคในการพัฒนา} \section{ปัญหาและอุปสรรคในการพัฒนา}
\begin{enumerate} \begin{enumerate}
\item เนื่องจากทางผู้พัฒนามีความประสงค์ให้ระบบนี้สามารถใช้งานได้จริง ดังนั้น การพัฒนาในตอนนี้ยังมีข้อจำกัดเรื่องขนาดของข้อมูลที่จัดเก็บบนไฟร์เบสที่สามารถอัพโหลดเข้าสู่ระบบสูงสุดเพียง 5 GB ซึ่งหากระบบถูกใช้งานจริงจำนวนข้อมูลในระบบจะเกินจำนวนที่ไฟร์เบสให้ใช้งานฟรี \\ \item เนื่องจากครั้งแรกที่ใช้ lalavel framework ไม่ค่อยสอดคล้องกับระบบ \\
แนวทางการแก้ไข : ทำการบีบอัดข้อมูลให้มีขนาดเล็กลง ส่วนในอนาคตอาจจำเป็นต้องศึกษาแนวทางการสร้างเซิฟเวอร์ (Server) เป็นของระบบเอง แนวทางการแก้ไข : ทำการเปลี่ยน จาก lalavel framework เป็น React.js
\item เนื่องจากได้ทำการเปลี่ยน framework จึงทำให้ต้องเสียเวลา \\
แนวทางการแก้ไข : เร่งศึกษา และเร่งทำ
\item โรค covit 19 ทำให้การเข้าพบอาจารย์ไม่สะดวก\\
แนวทางการแก้ไข : พบทางออนไลน์แทนการเข้าพบแบบตัวต่อตัว
\end{enumerate} \end{enumerate}
...@@ -49,6 +54,8 @@ ...@@ -49,6 +54,8 @@
\item การพัฒนาช่องทางการติดต่อ \item การพัฒนาช่องทางการติดต่อ
\item เจ้าของร้านสามารถยืนยันการจองคิวได้ \item เจ้าของร้านสามารถยืนยันการจองคิวได้
\item การพัฒนาเป็นแอปพลิเคชัน \item การพัฒนาเป็นแอปพลิเคชัน
\item การเพิ่มข้อมูลโปรดมชั่น
\item การค้นหาร้านตามวันและเวลาว่างของร้าน
\end{enumerate} \end{enumerate}
......
Document/Latex/Figures/3/usecase.png
View replaced file @ f8554879 View file @ cfaa58ab
Document/Latex/Figures/3/usecase.png

360 KB | W: | H:

Document/Latex/Figures/3/usecase.png

362 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
Document/Latex/appendix2-installation.tex
View file @ cfaa58ab
\chapter{คู่มือการติดตั้งระบบ} \chapter{คู่มือการติดตั้งระบบ}
ในการติดตั้งเพื่อใช้งานแอปพลิเคชันระบบกองทุนเงินให้กู้ยืมเพื่อการศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี หรือ ESP สามารถทำได้โดยมีขั้นตอนดังนี้ ในการติดตั้งเพื่อใช้งานเว็บแอปพลิเคชันระบบจองคิวร้านเสริมสวยสามารถทำได้โดยมีขั้นตอนดังนี้
\begin{enumerate} \begin{enumerate}
\item สามารถดาวน์โหลด ESP installer package ได้ที่ https://drive.google.com/drive/folders/1k6HnoFgLAatgrfLAtFgnJYbRrpJHHwol ดังแสดงในรูปที่ \ref{Fig:dl1} \item สามารถดาวน์โหลด และติดตั้งระบบ ได้ที่ http://projectcs.sci.ubu.ac.th/senior-prj-62/59110440259.git ดังแสดงในรูปที่ \ref{Fig:dl1} และรูปที่ \ref{Fig:dl2}
\begin{figure}[H] \begin{figure}[H]
\centering {\setstretch{1.0}
\includegraphics[width=\columnwidth]{Figures/7/installApp/dl} \begin{lstlisting}[numbers=none]
\caption{หน้าเว็บดาวน์โหลด ESP installer package} git clone http://projectcs.sci.ubu.ac.th/senior-prj-62/59110440259.git
\end{lstlisting}}
\caption{คำสั่งดาวน์โหลด}
\label{Fig:dl1} \label{Fig:dl1}
\end{figure} \end{figure}
\item ดัดลอกไฟล์ app-debug.apk ที่อยู่ในแฟ้มงาน(Folder)ที่อยู่บนคอมพิวเตอร์ไปไว้ในหน่วยความจำบนอุปกรณ์ที่ต้องการ ดังแสดงในรูปที่ \ref{Fig:dl2}
\begin{figure}[H] \begin{figure}[H]
\centering {\setstretch{1.0}
\includegraphics[width=0.3\columnwidth]{Figures/7/installApp/1} \begin{lstlisting}[numbers=none]
\caption{ไฟล์ app-debug.apk บนอุปรกรณ์} npm install หรือ npm i
\end{lstlisting}}
\caption{คำสั่งติดตั้ง}
\label{Fig:dl2} \label{Fig:dl2}
\end{figure} \end{figure}
\item ทำการเปิดไฟล์ app-debug.apk และกด INSTALL เพื่อทำการติดตั้ง ดังแสดงในรูปที่ \ref{Fig:dl3}
\begin{figure}[H]
\centering
\includegraphics[width=0.3\columnwidth]{Figures/7/installApp/2}
\caption{หน้าจอต้อนรับการติดตั้งแอปพลิเคชันบนอุปรกรณ์แอนดรอย์}
\label{Fig:dl3}
\end{figure}
\item เมื่อทำการติดตั้งแอปพลิเคชันสำเร็จระบบจะแสดงผล ดังแสดงในรูปที่ \ref{Fig:dl4}
\begin{figure}[H]
\centering
\includegraphics[width=0.3\columnwidth]{Figures/7/installApp/3}
\caption{หน้าจอต้อนรับการติดตั้งแอปพลิเคชันบนอุปรกรณ์แอนดรอย์}
\label{Fig:dl4}
\end{figure}
\end{enumerate} \end{enumerate}
Document/Latex/appendix3-manual.tex
View file @ cfaa58ab
\chapter{คู่มือการใช้งานระบบ} \chapter{คู่มือการใช้งานระบบ}
คู่มือการใช้งานทั้งหมดของระบบ สามารถแบ่งออกเป็น 2 ส่วน ดังนี้ คู่มือการใช้งานทั้งหมดของระบบ สามารถแบ่งออกเป็น 3 ส่วน ดังนี้
\begin{enumerate} \begin{enumerate}
\item ส่วนของหน้าเมนูแอปพลิเคชันสำหรับนักศึกษา \item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับผู้ใช้บริการ
\begin{itemize} \begin{itemize}
\item หน้าจอต้อนรับแสดงผลทุกครั้งเมื่อผู้ใช้ทำการเปิดใช้งานแอปพลิเคชัน ดังแสดงในรูปที่ \ref{Fig:open} \item หน้าจอหลักแสดงผลทุกครั้งเมื่อผู้ใช้ทำการเปิดใช้งานเว็บแอปพลิเคชัน ดังแสดงในรูปที่ \ref{Fig:home}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.3\columnwidth]{Figures/7/Manual/open} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Home}
\caption{หน้าจอต้อนรับ} \caption{หน้าจอหลัก}
\label{Fig:open} \label{Fig:home}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:register} สามารถอธิบายการใช้งานได้ดังนี้
\item เมื่อระบบทำการตรวจสอบว่ามีสิทธิ์(Permission)ในการใช้งานแอปพลิเคชันที่ผู้ใช้ยังไม่ได้อนุญาตให้เข้าถึง ระบบจะแสดงหน้าต่างขอสิทธิ์การเข้าถึง ดังแสดงในรูปที่ \ref{Fig:permission}
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/permission}
\caption{หน้าต่างขอสิทธิ์การเข้าถึง}
\label{Fig:permission}
\end{figure}
จากรูปที่ \ref{Fig:permission} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หน้าต่างขอสิทธิ์การเข้าถึงข้อมูล \item หมายเลข 1 คือ ปุ่มเข้าสู่ระบบ
\item หมายเลข 2 คือ ปุ่มให้สิทธิ์และยกเลิกการให้สิทธิ์ \item หมายเลข 2 คือ ปุ่มลงทะเบียนสำหรับผู้ใช้งานทั่วไป
\item หมายเลข 3 คือ ปุ่มลงทะเบียนสำหรับเจ้าของร้าน
\item หมายเลข 4 คือ ฟอร์มสำหรับค้นหาร้าน
\item หมายเลข 5 คือ คลิ๊กที่รูปภาพเพื่อนเปิดหน้าต่างรายละเอียดร้าน
\item หมายเลข 6 คือ ปุ่มสำหรับจองคิว
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้งานกดที่ปุ่ม Register ระบบจะทำการแสดงหน้าต่างลงทะเบียน ดังแสดงในรูปที่ \ref{Fig:register}
\item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานเปิดใช้งานแอปพลิเคชัน หากผู้ใช้งานคนปัจจุบันยังไม่ได้เข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:signin}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/signin} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Register}
\caption{หน้าจอเข้าสู่ระบบ} \caption{หน้าต่างลงทะเบียน}
\label{Fig:signin} \label{Fig:register}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:signin} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:register} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่าน \item หมายเลข 1 คือ กรอกข้อมูลในการลงทะเบียนแล้วกดยืนยัน
\item หมายเลข 2 คือ ปุ่มกดเข้าสู่ระบบ
\end{itemize} \end{itemize}
\item หน้าแสดงข่าวสารประชาสัมพันธ์ซึ่งเป็นหน้าจอหลักของแอปพลิเคชัน ดังแสดงในรูปที่ \ref{Fig:feed} \item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:login}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/feed} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
\caption{หน้าแสดงข่าวสาร} \caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:feed} \label{Fig:login}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:feed} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:login} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ข่าวสารที่มีข้อมูล หัวข้อข่าวสาร แท็ก(Tag)และวันที่ประการข่าวสาร \item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดเลือกดูรายละเอียดของข่าวสาร ระบบจะแสดงหน้าจอรายละเอียดข่าวสาร ดังแสดงในรูปที่ \ref{Fig:viewpost} \item หน้าแสดงรายละเอียดข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:shop}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/viewpost} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shop}
\caption{หน้ารายละเอียดของข่าวสาร} \caption{หน้าแสดงรายระเอียดร้าน}
\label{Fig:viewpost} \label{Fig:shop}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:viewpost} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shop} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หัวข้อข่าวสาร \item หมายเลข 1 คือ ปุ่มสำหรับดูรายการร้าน
\item หมายเลข 1 คือ รายละเอียดของข่าวสาร \item หมายเลข 2 คือ ปุ่มสำหรับจองคิว
\item หมายเลข 3 คือ ปุ่มสำหรับเขียนรีวิว
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดเลือกเมนู Drawer ระบบจะแสดงเมนูนำทางหลักของแอปพลิเคชันซึ่งประกอบไปด้วยเมนู ประชาสัมพันธ์ ข้อความ กำหนดการ เอกสาร ส่งเอกสาร จองคิว คำถามที่พบบ่อย เกี่ยวกับเรา บัญชีผู้ใช้และออกจากระบบ ดังแสดงในรูปที่ \ref{Fig:nav} \item เมื่อผู้ใช้กดปุ่มจองคิว ระบบจะแสดง model จองคิว ดังแสดงในรูปที่ \ref{Fig:shopgueue}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/nav} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopgueue}
\caption{เมนูนำทางหลักของแอปพลิเคชัน} \caption{หน้าการจองคิว}
\label{Fig:nav} \label{Fig:shopgueue}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:nav} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shopgueue} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ รายการเมนูนำทางหลักของแอปพลิเคชัน \item หมายเลข 1 คือ สำหรับเลือกวันที่ในการจองคิว
\item หมายเลข 2 คือ เมนูนำทาง \item หมายเลข 2 คือ เลือกรายการสำหรับจองคิว
\end{itemize} \item หมายเลข 3 คือ เลือกช่างที่ต้องการจองคิว
\item หมายเลข 4 คือ เลือกเวลาในการจองคิว
\item เมื่อผู้ใช้เลือกเมนูกำหนดการ ระบบจะแสดงหน้าจอกำหนดการ ดังแสดงในรูปที่ \ref{Fig:event} \end{itemize}
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/event}
\caption{หน้าจอกำหนดการ}
\label{Fig:event}
\end{figure} \item ส่วนของหน้าเมนูแอปพลิเคชันสำหรับนักศึกษา
\item หน้าจอต้อนรับแสดงผลทุกครั้งเมื่อผู้ใช้ทำการเปิดใช้งานแอปพลิเคชัน ดังแสดงในรูปที่ \ref{Fig:open}
\begin{figure}[H]
\centering
\includegraphics[width=0.3\columnwidth]{Figures/7/Manual/open}
\caption{หน้าจอต้อนรับ}
\label{Fig:open}
\end{figure}
\item เมื่อระบบทำการตรวจสอบว่ามีสิทธิ์(Permission)ในการใช้งานแอปพลิเคชันที่ผู้ใช้ยังไม่ได้อนุญาตให้เข้าถึง ระบบจะแสดงหน้าต่างขอสิทธิ์การเข้าถึง ดังแสดงในรูปที่ \ref{Fig:permission} \item เมื่อผู้ใช้กดปุ่มรายการ ระบบจะแสดง model รายการ ดังแสดงในรูปที่ \ref{Fig:shoplist}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/permission} \includegraphics[width=0.5\columnwidth]{Figures/7/Manual/shoplist}
\caption{หน้าต่างขอสิทธิ์การเข้าถึง} \caption{เมนูดูรายการร้าน}
\label{Fig:permission} \label{Fig:shoplist}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:permission} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shoplist} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หน้าต่างขอสิทธิ์การเข้าถึงข้อมูล \item หมายเลข 1 คือ รายการประจำร้าน
\item หมายเลข 2 คือ ปุ่มให้สิทธิ์และยกเลิกการให้สิทธิ์
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดปุ่มเขียนรีวิว ระบบจะแสดง model เพื่อให้ผู้ใช้งานเขียนรีวิว ดังแสดงในรูปที่ \ref{Fig:shopreview}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/event} \includegraphics[width=0.5\columnwidth]{Figures/7/Manual/shopreview}
\caption{หน้าแสดงกำหนดการ} \caption{หน้าจอเขียนรีวิว}
\label{Fig:event} \label{Fig:shopreview}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:event} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shopreview} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ปฏิทินแสดงวันที่ปัจจุบันและผู้ใช้สามารถเลือกวันที่ต้องการเพื่อดูกำหนดการก่อนหน้า \item หมายเลข 1 คือ กรอกข้อมูลการรีวิวและกด submit
\item หมายเลข 2 คือ แสดงรายการกำหนดการของวันนั้น ๆ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้เลือกเมนูเอกสาร ระบบจะแสดงหน้าจอรายการเอกสาร ดังแสดงในรูปที่ \ref{Fig:doc}
\begin{figure}[H]
\centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/doc}
\caption{หน้าจอเอกสาร}
\label{Fig:doc}
\end{figure}
จากรูปที่ \ref{Fig:doc} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}]
\item หมายเลข 1 คือ รายการเอกสาร
\item หมายเลข 2 คือ ปุ่มดาวน์โหลดเอกสาร
\item หมายเลข 3 คือ สถานะการดาวน์โหลดเอกสาร
\end{itemize} \end{itemize}
\item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับเจ้าของร้าน
\begin{itemize}
\item เมื่อผู้ใช้เลือกเมนูข้อความ ระบบจะแสดงหน้าจอสนทนา ดังแสดงในรูปที่ \ref{Fig:chat} \item เมื่อผู้ใช้งานกดที่ปุ่ม RegisterShop ระบบจะทำการแสดงหน้าต่างลงทะเบียน ดังแสดงในรูปที่ \ref{Fig:registershop}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/chat} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/registershop}
\caption{หน้าจอสนทนา} \caption{หน้าต่างลงทะเบียนธุรกิจ}
\label{Fig:chat} \label{Fig:registershop}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:chat} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:registershop} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ รายการประวัติการสนทนา \item หมายเลข 1 คือ กรอกข้อมูลในการลงทะเบียนแล้วกดยืนยัน
\item หมายเลข 2 คือ ช่องกรอกข้อความเพื่อสนทนา
\item หมายเลข 3 คือ ปุ่มส่งข้อความ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้เลือกเมนูส่งเอกสารระบบจะตรวจสอบข้อมูลว่าเจ้าหน้าที่ได้ทำการเปิดให้นักศึกษาส่งเอกสารได้หรือไม่ หากตรวจสอบแล้วพบว่าสามารถส่งได้ระบบจะแสดงหน้าจอส่งเอกสาร ดังแสดงในรูปที่ \ref{Fig:submit} \item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:loginshop}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
\caption{หน้าจอส่งเอกสาร} \caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:submit} \label{Fig:loginshop}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:loginshop} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ เมื่อผู้ใช้เข้ามาครั้งแรกเมื่อผู้ใช้กดรูปภาพเอกสารระบบจะนำผู้ใช้ไปยังหน้าจอถ่ายภาพเอกสารและแสดงรูปภาพพรีวิว(Preview)ภาพถ่ายเอกสาร \item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
\item หมายเลข 2 คือ ปุ่มกดส่งเอกสาร
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดที่ปุ่มถ่ายภาพเอกสารระบบจะแสดงหน้าจอถ่ายภาพเอกสาร ดังแสดงในรูปที่ \ref{Fig:submit1} \item เมื่อเจ้าของร้านเข้าสู่ระบบสำเร็จ ดังแสดงในรูปที่ \ref{Fig:shopprofile}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit1} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopprofile}
\caption{หน้าจอถ่ายภาพเอกสาร} \caption{หน้าจอโปรไฟล์}
\label{Fig:submit1} \label{Fig:shopprofile}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit1} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shopprofile} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ปุ่มกดถ่ายภาพสำเนาเอกสาร \item หมายเลข 1 คือ ปุ่มสำหรับอัพโหลดรูปภาพ
\end{itemize} \end{itemize}
\item หน้าจอแสดงภาพพรีวิวภาพถ่ายสำเนาเอกสาร ดังแสดงในรูปที่ \ref{Fig:submit2} \item เมื่อเจ้าของร้านคลิ๊กที่เมนูข้อมูลร้าน ระบบจะแสดงหน้าข้อมูลร้าน ดังแสดงในรูปที่ \ref{Fig:datashop}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit2} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/datashop}
\caption{หน้าจอแสดงภาพพรีวิวภาพถ่ายสำเนาเอกสาร} \caption{หน้าจอข้อมูลร้าน}
\label{Fig:submit2} \label{Fig:datashop}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit2} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:datashop} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ปุ่มปรับมุมภาพทั้ง 8 มุมเพื่อปรับขนาดภาพถ่ายเอกสาร \item หมายเลข 1 คือ ปุ่มสำหรับเพิ่มรูปภาพ
\item หมายเลข 2 คือ ปุ่มสำหรับแก้ไขรูปภาพ
\item หมายเลข 3 คือ กรอกข้อมูลร้านทั้งหมด
\end{itemize} \end{itemize}
\item หน้าจอแสดงปรับแต่งภาพถ่ายสำเนาเอกสาร ดังแสดงในรูปที่ \ref{Fig:submit3} \item เมื่อเจ้าของร้านคลิ๊กที่เมนูรายการ ระบบจะแสดงหน้ารายการ ดังแสดงในรูปที่ \ref{Fig:list}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit3} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/list}
\caption{หน้าจอแสดงปรับแต่งภาพถ่ายสำเนาเอกสาร} \caption{หน้าจอรายการร้าน}
\label{Fig:submit3} \label{Fig:list}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit3} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:list} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ เมื่อผู้ใช้ต้องการปรับความคมชัดของภาพสามารถทำได้จาก 4 ปุ่ม คือ ปุ่มภาพต้นฉบับ ปุ่มปรับสีอัตโนมัติ ปุ่มปรับปรับสีเป็นสีเทา ปุ่มปรับสีเป็นสีขาวดำ \item หมายเลข 1 คือ ปุ่มบวกใช้เพื่อเพิ่มข้อมูลรายการ
\item หมายเลข 2 คือ ปุ่มสำหรับแก้ไขข้อมูลรายการ
\item หมายเลข 3 คือ ปุ่มสำหรับลบข้อมูลรายการ
\end{itemize} \end{itemize}
\item หน้าจอแสดงภาพพรีวิวภาพถ่ายสำเนาเอกสารทั้งสองฉบับ ดังแสดงในรูปที่ \ref{Fig:submit4} \item เมื่อเจ้าของร้านกดที่ปุ่มข้อมูลช่าง ระบบจะทำการแสดงหน้าข้อมูลช่าง ดังแสดงในรูปที่ \ref{Fig:qely}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit4} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/qely}
\caption{หน้าจอแสดงภาพพรีวิวภาพถ่ายสำเนาเอกสาร} \caption{หน้าจอข้อมูลช่าง}
\label{Fig:submit4} \label{Fig:qely}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit4} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:qely} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ แสดงภาพพรีวิวภาพถ่ายสำเนาเอกสารทั้งสองฉบับ \item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มข้อมูลช่าง
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดปุ่มส่งเอกสาร ระบบจะแสดงหน้าต่างแสดงสถานะการอัพโหลดเอกสาร ดังแสดงในรูปที่ \ref{Fig:submit5} \item เมื่อเจ้าของร้านคลิ๊กที่เมนูดูคิวจอง ระบบจะแสดงหน้าข้อมูลการจองคิว ดังแสดงในรูปที่ \ref{Fig:shopqely}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/submit5} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shopqely}
\caption{หน้าต่างแสดงสถานะการอัพโหลดเอกสาร} \caption{หน้าจอดูการจองคิว}
\label{Fig:submit5} \label{Fig:shopqely}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:submit5} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shopqely} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หน้าต่างสถานะการอัพโหลดเอกสาร \item หมายเลข 1 คือ เลือกวันที่ที่ต้องการดูการจองคิว
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดเมนูจองคิว ระบบจะตรวจสอบถสานะการส่งเอกสารว่าถูกเจ้าหน้าที่ตรวจสอบแล้วหรือไม่ ถ้าเจ้าหน้าที่อนุมัติแล้วระบบจะแสดงหน้าจอจองวันที่ส่งเอกสาร ดังแสดงในรูปที่ \ref{Fig:checkin} \item เมื่อเจ้าของร้านคลิ๊กที่เมนูเพิ่มรูปภาพ ดังแสดงในรูปที่ \ref{Fig:shoppic}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/checkin} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/shoppic}
\caption{หน้าจอจองคิว} \caption{หน้าจอเพิ่มรูปภาพ}
\label{Fig:checkin} \label{Fig:shoppic}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:checkin} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:shoppic} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ รายละเอียด \item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มรูปภาพ
\item หมายเลข 2 คือ ส่วนของการเลือกวันที่ที่ต้องการส่งเอกสาร
\item หมายเลข 3 คือ ส่วนของการเลือกเวลาที่ต้องการส่งเอกสาร
\item หมายเลข 4 คือ ปุ่มกดส่งเอกสาร
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดปุ่มเลือกวันที่ที่ต้องการส่งเอกสารระบบจะแสดงหน้าต่างเลือกวันที่โดยจะแสดงเฉพาะวันที่ที่เจ้าหน้าที่เลือกไว้เท่านั้น ดังแสดงในรูปที่ \ref{Fig:date} \end{itemize}
\item ส่วนของหน้าเมนูเว็บแอปพลิเคชันสำหรับช่าง
\begin{itemize}
\item ระบบทำการตรวจสอบทุกครั้งเมื่อผู้ใช้งานกดปุ่มเข้าสู่ระบบ ระบบจะแสดงหน้าจอเข้าสู่ระบบโดยผู้ใช้งานจำเป็นต้องทำการกรอกข้อมูลคือ อีเมลและรหัสผ่าน ดังแสดงในรูปที่ \ref{Fig:loginb}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/date} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/Login}
\caption{หน้าต่างปฏิทินเลือกวันที่ต้องการส่งเอกสาร} \caption{หน้าจอเข้าสู่ระบบ}
\label{Fig:date} \label{Fig:loginb}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:date} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:loginb} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หน้าต่างปฏิทินเลือกวันที่ต้องการส่งเอกสาร \item หมายเลข 1 คือ ส่วนของฟอร์มในการกรอกข้อมูลอีเมลและรหัสผ่านและ ปุ่มกดเข้าสู่ระบบ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดปุ่มเลือกเวลาที่ต้องการส่งเอกสารระบบจะแสดงหน้าต่างเลือกเวลาโดยจะแสดงเฉพาะเวลาที่เจ้าหน้าที่เลือกไว้เท่านั้น ดังแสดงในรูปที่ \ref{Fig:time} \item หน้าช่างเข้าสู่ระบบสำเร็จ ระบบจะแสดงหน้าโปรไฟล์ ดังแสดงในรูปที่ \ref{Fig:bprofile}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/time} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/bprofile}
\caption{หน้าต่างนาฬิกาเลือกเวลาที่ต้องการส่งเอกสาร} \caption{หน้าโปรไฟล์}
\label{Fig:time} \label{Fig:bprofile}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:time} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:bprofile} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ หน้าต่างนาฬิกาเลือกเวลาที่ต้องการส่งเอกสาร \item หมายเลข 1 คือ กดปุ่มเพื่ออัพโหลดรูปภาพ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดเมนูคำถามที่พบบ่อยระบบจะแสดงหน้าจอคำถามที่พบบ่อย ดังแสดงในรูปที่ \ref{Fig:faq2} \item เมื่อช่างคลิ๊กที่เมนูตารางงาน ระบบจะแสดงหน้าดูตารางงาน ดังแสดงในรูปที่\ref{Fig:work}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/faq2} \includegraphics[width=0.7\columnwidth]{Figures/7/Manual/work}
\caption{หน้าจอคำถามที่พบบ่อย} \caption{หน้าตารางงาน}
\label{Fig:faq2} \label{Fig:work}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:faq2} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:work} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ คำถาม \item หมายเลข 1 คือ เลือกวันที่ที่ต้องการให้แสดงตารางงาน
\item หมายเลข 2 คือ คำตอบ
\end{itemize} \end{itemize}
\item เมื่อผู้ใช้กดปุ่มเมนูเกี่ยวกับเราระบบจะแสดงข้อมูลรายะเอียดของงานพัฒนานักศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี ดังแสดงในรูปที่ \ref{Fig:about} \item เมื่อช่างคลิ๊กที่เมนูภาพผลงาน ระบบจะแสดงหน้าเพิ่มผลงานช่าง ดังแสดงในรูปที่ \ref{Fig:bpic}
\begin{figure}[H] \begin{figure}[H]
\centering \centering
\includegraphics[width=0.5\columnwidth]{Figures/7/Manual/about} \includegraphics[width=0.5\columnwidth]{Figures/7/Manual/bpic}
\caption{หน้าเกี่ยวกับ} \caption{หน้าจอภาพผลงานช่าง}
\label{Fig:about} \label{Fig:bpic}
\end{figure} \end{figure}
จากรูปที่ \ref{Fig:about} สามารถอธิบายการใช้งานได้ดังนี้ จากรูปที่ \ref{Fig:bpic} สามารถอธิบายการใช้งานได้ดังนี้
\begin{itemize}[label={--}] \begin{itemize}[label={--}]
\item หมายเลข 1 คือ ข้อมูลติดต่องานพัฒนานักศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานี \item หมายเลข 1 คือ กดปุ่มเพื่อเพิ่มรูปภาพผลงานช่าง
\item ปุ่มกดสำหรับเปิดกลุ่มงานพัฒนานักศึกษา คณะวิทยาศาสตร์ มหาวิทยาลัยอุบลราชธานีบน Facebook
\end{itemize} \end{itemize}
\end{itemize} \end{itemize}
......
Document/Latex/references.bib
View file @ cfaa58ab
...@@ -7,148 +7,157 @@ ...@@ -7,148 +7,157 @@
publisher = {กรุงเทพฯ: ซีเอ็ดยูเคชั่น} publisher = {กรุงเทพฯ: ซีเอ็ดยูเคชั่น}
} }
@book{androidbook1, @book{bib1,
author = {{กอบเกียรติ สระอุบล.}}, author = {{ประชา พฤกษ์ประเสริฐ}},
title = {การพัฒนา App Android}, title = {สร้างเว็บและลูกเล่นด้วย JavaScript DHTML},
date = {}, publisher = {{สำนักพิมพ์ ซิมพลิฟาย}},
month = {}, month = {มีนาคม},
year = {2549}, year = {2558},
publisher= {กรุงเทพฯ: มีเดีย เนทเวิร์ค}
} }
@misc{bib2,
@misc{bib1, author = {Chai Phonbopit},
author = {{ทศพล ต้นสมบัติ.}}, title = {React คืออะไร เริ่มต้นเขียน React},
title = {ระบบปฏิบัติการ ANDROID},
date = {},
month = {}, month = {},
year = {ม.ป.ป.}, year = {2558},
note = {12 พฤษภาคม 2561}, note = {09 เมษายน 2562},
url = {https://beerkung.wordpress.com/ระบบปฏิบัติการรุ่นล่าส/ระบบปฏิบัติการ-android.html} url = {https://devahoy.com/posts/getting-started-with-reactjs}
} }
@misc{bib2, @misc{bib2,
author = {{MarcusCode.}}, author = {Chai Phonbopit},
title = {การเขียนโปรแกรมเชิงวัตถุ}, title = {React คืออะไร เริ่มต้นเขียน React},
date = {},
month = {}, month = {},
year = {2018}, year = {2558},
note = {12 พฤษภาคม 2561}, note = {09 เมษายน 2562},
url = {http://marcuscode.com/lang/java/introduction} url = {https://devahoy.com/posts/getting-started-with-reactjs}
} }
@misc{bib3,
@misc{vuejs, author = {vittayasak},
author = {{Vue.js Team.}}, title = {ReactJS Path1 พื้นฐานการสร้าง Web Component},
title = {Introduction},
url = {https://vuejs.org/v2/guide/},
date = {},
month = {}, month = {},
year = {2560}, year = {2559},
note = {2 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {http://ajbee.me/2016/10/04/reactjs-part1-basic-component}
} }
@misc{bib4,
@misc{ActivityLifeCycle, author = {DESIGNIL},
author = {{Sleeping For Less.}}, title = {React คืออะไร ไขข้อสงสัยสำหรับมือใหม่ แนวทางการหัด React ตั้งแต่เริ่มต้น},
title = {Activity Life Cycle},
url = {http://www.akexorcist.com/2016/04/why-do-we-need-to-know-about-activity-life-cycle-th.html},
date = {},
month = {}, month = {},
year = {2557}, year = {ม.ป.ป.},
note = {12 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {https://www.designil.com/react-คืออะไร.html}
} }
@misc{bib5,
@misc{openhandsetalliance, author = {him aeng},
author = {{Google.}}, title = {React Life Cycle},
title = {Open Handset Alliance},
url = {http://www.openhandsetalliance.com/},
date = {},
month = {}, month = {},
year = {2557}, year = {2559},
note = {20 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {http://www.forminit.com/react-basic-07}
} }
@misc{PSU, @misc{bib6,
author = {{งานกองทุนเงินให้กู้ยืมเพื่อการศึกษา มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตหาดใหญ่.}}, author = {Nattawut Ruangvivattanaroj},
title = {กยศ.ม.อ(PSU Studentloan)}, title = {อธิบาย React Lifecycle แต่ละอันมีหน้าที่อย่างไร},
url = {https://studentloan.psu.ac.th/home},
date = {},
month = {}, month = {},
year = {2554}, year = {2560},
note = {20 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {https://igokuz.com/อธิบาย-react-lifecycle-แต่ละอันมีหน้าที่อย่างไร-48e65c922af1}
} }
@misc{bib7,
@misc{blackbox, author = {M.D.Soft},
author = {{Atthaboon S.}}, title = {Node.js คืออะไร},
title = {BLACK-BOX TESTING STRATEGY month = {},
}, year = {ม.ป.ป.},
url = {http://everybitsconsult.com/blog/2015/06/22/black-box-testing.html}, note = {09 เมษายน 2562},
date = {}, url = {https://www.mdsoft.co.th/ความรู้/140-what-node-js.html}
}
@misc{bib8,
author = {BeYourCyber},
title = {เจาะลึกกับ node.js แบบเริ่มต้นทำความรู้จัก},
month = {}, month = {},
year = {2555}, year = {2556},
note = {20 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {http://meewebfree.com/site/nodejs/441-learn-about-node-js-with-basic-of-node-js}
} }
@misc{bib9,
author = {อมรเดช คีรีพัฒนานนท์},
@misc{eStudentloan, title = {node.js คืออะไร คือ programming language ที่เขียนด้วย JavaScript},
author = {{Tni.Student.}},
title = {แอปพลิเคชัน eStudentloan},
url = {https://play.google.com/store/apps/details?id=th.co.dest.anek.studentloan},
date = {},
month = {}, month = {},
year = {2560}, year = {2559},
note = {20 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {https://beyourcyber.com/2016/node-js-is-programming-language-by-javascript/}
} }
@misc{bib12,
@misc{กยศ, author = {mindphp},
author = {{กองทุนเงินให้กู้ยืมเพื่อการศึกษา(กยศ.).}}, title = {JavaScript คืออะไร},
title = {กองทุนเงินให้กู้ยืมเพื่อการศึกษา(กยศ.)},
url = {https://www.studentloan.or.th/index.php/aboutus},
date = {},
month = {}, month = {},
year = {2554}, year = {2560},
note = {20 พฤษภาคม 2561} note = {09 เมษายน 2562},
url = {http://www.mindphp.com/คู่มือ/73-คืออะไร/2187-java-javascript-คืออะไร.html}
} }
@misc{bib13,
@misc{ScanLibrary, author = {admin},
author = {{jhansireddy.}}, title = {JavaScript คืออะไร},
title = {AndroidScannerDemo},
url = {https://www.studentloan.or.th/index.php/aboutus},
date = {},
month = {}, month = {},
year = {2557}, year = {2558},
note = {3 เมษายา 2561} note = {09 เมษายน 2562},
url = {https://nokhookstudio.com/javascript-คืออะไร}
} }
@misc{bib14,
@misc{firestore, author = {easyhostdomain},
author = {{Thanongkiat Tamtai.}}, title = {MySQL มีความสำคัญอย่างไรกับเซิร์ฟเวอร์},
title = {เข้มข้นกับ Firebase Cloud Firestore},
date = {},
month = {}, month = {},
year = {2557}, year = {2557},
url = {https://goo.gl/ZmqY3g}, note = {08 มกราคม 2562},
note = {18 เมษายา 2561} url = {http://th.easyhostdomain.com/dedicated-servers/mysql.html}
} }
@misc{bib15,
@misc{scenario, author = {itgenius},
author = {{ Inflectra. }}, title = {จุดเด่นและหลักการทำงาน MySQL},
title = {Software Testing Methodologies},
date = {},
month = {}, month = {},
year = {2018}, year = {2556},
url = {https://www.inflectra.com/ideas/topic/testing-methodologies.aspx}, note = {08 มกราคม 2562},
note = {14 พฤษภาคม 2561} url = {https://www.itgenius.co.th/article/%20MySQL.html}
} }
@misc{js, @misc{ActivityLifeCycle,
author = {{mindphp.}}, author = {{Sleeping For Less.}},
title = {JavaScript คืออะไร}, title = {Activity Life Cycle},
url = {http://www.akexorcist.com/2016/04/why-do-we-need-to-know-about-activity-life-cycle-th.html},
date = {}, date = {},
month = {}, month = {},
year = {2555}, year = {2557},
url = {https://goo.gl/FAeTb2},
note = {12 พฤษภาคม 2561} note = {12 พฤษภาคม 2561}
} }
@internet{vscode,
author = {mindphp},
title = {รู้จักกับ Visual Studio Code (วิชวล สตูดิโอ โค้ด) โปรแกรมฟรีจากค่ายไมโครซอฟท์},
date = {6},
month = {เมษายน},
year = {2562},
url = {https://www.mindphp.com/บทความ/microsoft/4829-visual-studio-code.html},
}
@internet{gowabi,
author = {gowabi},
title = {gowabi},
date = {6},
month = {เมษายน},
year = {2563},
url = {https://www.gowabi.com},
}
@internet{maps,
author = {google map api},
title = {google map api},
date = {28},
month = {มีนาคม},
year = {2562},
url = {https://cloud.google.com/maps-platform/},
}
@misc{architecture, @misc{architecture,
author = {{Kunchit Phiu-Nual.}}, author = {{Kunchit Phiu-Nual.}},
title = {ความหมายและความสำคัญของ System Architecture}, title = {ความหมายและความสำคัญของ System Architecture},
......
Source/Backend/controllers/auth/index.js
View file @ cfaa58ab
...@@ -2,6 +2,7 @@ const User = require("../../models/user"); ...@@ -2,6 +2,7 @@ const User = require("../../models/user");
const bcryptjs = require("bcryptjs"); const bcryptjs = require("bcryptjs");
const JWT = require("jsonwebtoken"); const JWT = require("jsonwebtoken");
const config = require("../../config"); const config = require("../../config");
const Beautician = require("../../models/beautician")
exports.getUserById = async (req, res) => { exports.getUserById = async (req, res) => {
console.log("here"); console.log("here");
...@@ -24,6 +25,7 @@ createToken = id => { ...@@ -24,6 +25,7 @@ createToken = id => {
exports.register = async (req, res) => { exports.register = async (req, res) => {
try { try {
const registerData = req.body; const registerData = req.body;
const user = await User.findOne({ const user = await User.findOne({
where: { email: registerData.email } where: { email: registerData.email }
}); });
...@@ -40,6 +42,7 @@ exports.register = async (req, res) => { ...@@ -40,6 +42,7 @@ exports.register = async (req, res) => {
tel: registerData.tel, tel: registerData.tel,
role: registerData.role role: registerData.role
}); });
const token = await createToken(newUser.id); const token = await createToken(newUser.id);
res.status(200).send("success"); res.status(200).send("success");
} }
...@@ -48,6 +51,7 @@ exports.register = async (req, res) => { ...@@ -48,6 +51,7 @@ exports.register = async (req, res) => {
res.sendStatus(401); res.sendStatus(401);
} }
}; };
exports.login = async (req, res) => { exports.login = async (req, res) => {
const loginData = req.body; const loginData = req.body;
const user = await User.findOne({ const user = await User.findOne({
......
Source/Backend/controllers/beautician/index.js 0 → 100644
View file @ cfaa58ab
const Beautician = require("../../models/beautician");
exports.add = async (req, res) => {
try {
const addbeauticianData = req.body;
console.log(addbeauticianData);
await Beautician.create({
name: addbeauticianData.name,
email: addbeauticianData.email,
address: addbeauticianData.address,
tel: addbeauticianData.tel,
shopID: addbeauticianData.shopID
});
res.send("create");
} catch (err) {
console.log(err);
res.sendStatus(401);
}
};
exports.getbeauticianShopId = async (req, res) => {
try {
const id = req.params.shopID;
let beautician = await Beautician.findAll({
where: {
shopID: id
}
});
console.log('beautician', beautician)
res.status(200).send(beautician);
} catch (err) {
res.send({
error: err.message
});
}
};
exports.deletelist = async (req, res) => {
try {
const listId = req.params.listId;
await List.destroy({
where: {
id: listId
}
});
res.status(200).send("success");
} catch (err) {
console.log(err);
res.sendStatus(401);
}
};
\ No newline at end of file
Source/Backend/controllers/promotion/index.js
View file @ cfaa58ab
...@@ -51,7 +51,20 @@ exports.getPromotionId = async (req, res) => { ...@@ -51,7 +51,20 @@ exports.getPromotionId = async (req, res) => {
res.sendStatus(401); res.sendStatus(401);
} }
}; };
exports.getUserId = async (req, res) => {
try {
const userId = req.params.id;
let promotion = await Promotion.findOne({
where: {
id: userId
}
});
res.status(200).send("success");
} catch (err) {
console.log(err);
res.sendStatus(401);
}
};
exports.updatePromotion = async (req, res) => { exports.updatePromotion = async (req, res) => {
try { try {
const promotionData = req.body; const promotionData = req.body;
......
Source/Backend/controllers/shop/index.js
View file @ cfaa58ab
...@@ -88,3 +88,17 @@ exports.updateuserId = async (req, res) => { ...@@ -88,3 +88,17 @@ exports.updateuserId = async (req, res) => {
res.sendStatus(401); res.sendStatus(401);
} }
}; };
exports.searchShop= async (req, res) => {
const name = req.body.name;
console.log('name', name);
if(name !== undefined) {
console.log('called1');
var condition = name ? { name: { [Op.like]: `%${name}%` } } : null;
const datasearch = await Shop.findAll({
where: condition
})
res.status(200).send(datasearch)
}
}
Source/Backend/models/beautician/index.js 0 → 100644
View file @ cfaa58ab
const Sequelize = require("sequelize");
const db = require("../../db");
const User = require('../user')
module.exports = db.sequelize.define("beauticians", {
id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
name: {
type: Sequelize.TEXT,
},
email: {
type: Sequelize.TEXT,
},
address: {
type: Sequelize.TEXT,
},
tel: {
type: Sequelize.TEXT,
},
shopID: {
type: Sequelize.INTEGER,
references: 'shops',
referencesKey: 'id'
}
});
Source/Backend/models/beauticianImg/index.js
View file @ cfaa58ab
...@@ -7,6 +7,10 @@ module.exports = db.sequelize.define("beauticianImages", { ...@@ -7,6 +7,10 @@ module.exports = db.sequelize.define("beauticianImages", {
primaryKey: true, primaryKey: true,
autoIncrement: true autoIncrement: true
}, },
beautician_id:{
type: Sequelize.INTEGER,
primaryKey: true
},
image: { image: {
type: Sequelize.BLOB type: Sequelize.BLOB
......
Source/Backend/models/booking/index.js
View file @ cfaa58ab
...@@ -27,10 +27,12 @@ module.exports = db.sequelize.define("bookings", { ...@@ -27,10 +27,12 @@ module.exports = db.sequelize.define("bookings", {
references: 'users', references: 'users',
referencesKey: 'id' referencesKey: 'id'
}, },
dete: { date: {
type: Sequelize.DATE type: Sequelize.DATE
}, },
time: { time: {
type: Sequelize.TIME type: Sequelize.TIME
} }
}); });
Source/Backend/models/reviews/index.js
View file @ cfaa58ab
...@@ -9,7 +9,7 @@ module.exports = db.sequelize.define("reviews", { ...@@ -9,7 +9,7 @@ module.exports = db.sequelize.define("reviews", {
}, },
topic: { topic: {
type: Sequelize.INTEGER type: Sequelize.STRING
}, },
message: { message: {
type: Sequelize.STRING type: Sequelize.STRING
...@@ -22,7 +22,7 @@ module.exports = db.sequelize.define("reviews", { ...@@ -22,7 +22,7 @@ module.exports = db.sequelize.define("reviews", {
references: 'shops', references: 'shops',
referencesKey: 'id' referencesKey: 'id'
}, },
user: { userID: {
type: Sequelize.INTEGER, type: Sequelize.INTEGER,
references: 'users', references: 'users',
referencesKey: 'id' referencesKey: 'id'
......
Source/Backend/models/shop/index.js
View file @ cfaa58ab
const Sequelize = require("sequelize"); const Sequelize = require("sequelize");
const db = require("../../db"); const db = require("../../db");
const ShopImage = require("../shopimage"); const ShopImage = require("../shopimage");
const WorkImage = require("../workimage")
module.exports = db.sequelize.define("shops", { const Shop = db.sequelize.define("shops", {
id: { id: {
type: Sequelize.INTEGER, type: Sequelize.INTEGER,
primaryKey: true, primaryKey: true,
...@@ -55,3 +56,7 @@ module.exports = db.sequelize.define("shops", { ...@@ -55,3 +56,7 @@ module.exports = db.sequelize.define("shops", {
) )
} }
}); });
Shop.hasMany(ShopImage, { foreignKey: 'image_id' });
// Shop.hasMany(ShopImage, { foreignKey: 'image_id' });
module.exports = Shop;
\ No newline at end of file
Source/Backend/models/shopimage/index.js
View file @ cfaa58ab
const Sequelize = require("sequelize"); const Sequelize = require("sequelize");
const db = require("../../db"); const db = require("../../db");
const User =require("../user")
const ShopImage = db.sequelize.define("shopimages", {
module.exports = db.sequelize.define("shopimages", {
image_id: { image_id: {
type: Sequelize.INTEGER, type: Sequelize.INTEGER,
primaryKey: true, primaryKey: true,
...@@ -10,19 +11,14 @@ module.exports = db.sequelize.define("shopimages", { ...@@ -10,19 +11,14 @@ module.exports = db.sequelize.define("shopimages", {
shop_id: { shop_id: {
type: Sequelize.INTEGER, type: Sequelize.INTEGER,
primaryKey: true, primaryKey: true,
references: 'shops',
referencesKey: 'id'
},
userId:{
type: Sequelize.INTEGER,
references: 'users',
referencesKey: 'id'
}, },
image: { image: {
type: Sequelize.BLOB('long') type: Sequelize.BLOB
}, },
type: { type: {
type: Sequelize.STRING type: Sequelize.STRING
} }
}); });
module.exports = ShopImage;
\ No newline at end of file
Source/Backend/models/user/index.js
View file @ cfaa58ab
const Sequelize = require("sequelize"); const Sequelize = require("sequelize");
const db = require("../../db"); const db = require("../../db");
const UserImage = require("../userimage");
module.exports = db.sequelize.define( const WorkImage = require("../workimage")
"users", const User = db.sequelize.define("users", {
{
id: { id: {
type: Sequelize.INTEGER, type: Sequelize.INTEGER,
primaryKey: true, primaryKey: true,
autoIncrement: true autoIncrement: true,
}, },
name: { name: {
type: Sequelize.STRING type: Sequelize.STRING,
}, },
email: { email: {
type: Sequelize.STRING type: Sequelize.STRING,
}, },
password: { password: {
type: Sequelize.STRING type: Sequelize.STRING,
}, },
address: { address: {
type: Sequelize.STRING type: Sequelize.STRING,
}, },
tel: { tel: {
type: Sequelize.STRING type: Sequelize.STRING,
}, },
role: { role: {
type: Sequelize.INTEGER type: Sequelize.INTEGER,
}
}, },
); });
\ No newline at end of file User.hasMany(UserImage, { foreignKey: "image_id" });
// User.hasMany(WorkImage, { foreignKey: "image_id" });
module.exports = User;
Source/Backend/models/userimage/index.js 0 → 100644
View file @ cfaa58ab
const Sequelize = require("sequelize");
const db = require("../../db");
const UserImage = db.sequelize.define("userimages", {
image_id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true
},
user_id: {
type: Sequelize.INTEGER,
primaryKey: true,
},
image: {
type: Sequelize.BLOB
},
type: {
type: Sequelize.STRING
}
});
module.exports = UserImage;
\ No newline at end of file
Source/Backend/models/workimage/index.js 0 → 100644
View file @ cfaa58ab
const Sequelize = require("sequelize");
const db = require("../../db");
const WorkImage = db.sequelize.define("workimages", {
image_id: {
type: Sequelize.INTEGER,
primaryKey: true,
autoIncrement: true,
},
shop_id: {
type: Sequelize.INTEGER,
primaryKey: true,
},
// user_id: {
// type: Sequelize.INTEGER,
// primaryKey: true,
// },
image: {
type: Sequelize.BLOB,
},
type: {
type: Sequelize.STRING,
},
});
module.exports = WorkImage;
Source/Backend/package-lock.json
View file @ cfaa58ab
...@@ -567,6 +567,16 @@ ...@@ -567,6 +567,16 @@
"vary": "~1.1.2" "vary": "~1.1.2"
} }
}, },
"express-promise-router": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/express-promise-router/-/express-promise-router-3.0.3.tgz",
"integrity": "sha1-Xm0ipaPwE9cYMxcv6NereAw/a3A=",
"requires": {
"is-promise": "^2.1.0",
"lodash.flattendeep": "^4.0.0",
"methods": "^1.0.0"
}
},
"fill-range": { "fill-range": {
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
...@@ -848,6 +858,11 @@ ...@@ -848,6 +858,11 @@
"path-is-inside": "^1.0.1" "path-is-inside": "^1.0.1"
} }
}, },
"is-promise": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
"integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ=="
},
"is-property": { "is-property": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz", "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
...@@ -955,6 +970,11 @@ ...@@ -955,6 +970,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
}, },
"lodash.flattendeep": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
"integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
},
"lodash.includes": { "lodash.includes": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
...@@ -1068,17 +1088,17 @@ ...@@ -1068,17 +1088,17 @@
"dev": true "dev": true
}, },
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.5",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "^1.2.5"
}, },
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "0.0.8", "version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
} }
} }
}, },
......
Source/Backend/package.json
View file @ cfaa58ab
...@@ -12,13 +12,14 @@ ...@@ -12,13 +12,14 @@
"multer": "^1.4.2", "multer": "^1.4.2",
"mysql2": "^2.1.0", "mysql2": "^2.1.0",
"sequelize": "^5.21.3", "sequelize": "^5.21.3",
"util": "^0.12.1" "util": "^0.12.1",
"express-promise-router": "3.0.3"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "^2.0.2" "nodemon": "^2.0.2"
}, },
"scripts": { "scripts": {
"start": "node server.js", "start": "nodemon server.js",
"start-dev": "nodemon server.js" "start-dev": "nodemon server.js"
}, },
"author": "", "author": "",
......
Source/Backend/routers/auth/index.js
View file @ cfaa58ab
...@@ -8,7 +8,6 @@ router.get("/get", (req, res) => { ...@@ -8,7 +8,6 @@ router.get("/get", (req, res) => {
}); });
router.get("/getUserById/:id", authController.getUserById); router.get("/getUserById/:id", authController.getUserById);
router.post("/register", authController.register); router.post("/register", authController.register);
router.post("/login", authController.login); router.post("/login", authController.login);
router.get('/currentuser', authController.currentUser); router.get('/currentuser', authController.currentUser);
......
Source/Backend/routers/beautician/index.js 0 → 100644
View file @ cfaa58ab
const express = require("express");
const router = express.Router();
const BeauticianController = require("../../controllers/beautician");
router.post("/add", BeauticianController.add);
router.get("/getbeauticianShopId/:shopID", BeauticianController.getbeauticianShopId);
module.exports = router;
Source/Backend/routers/index.js
View file @ cfaa58ab
...@@ -4,7 +4,11 @@ const shop = require("./shop"); ...@@ -4,7 +4,11 @@ const shop = require("./shop");
const promotion = require("./promotion"); const promotion = require("./promotion");
const review = require("./review"); const review = require("./review");
const booking = require("./booking"); const booking = require("./booking");
const storage = require("./storage") const storage = require("./storage");
const storageprofile= require("./storageprofile");
const storageshop = require("./storageshop")
const storagebeautician = require("./storagebeautician")
const Beautician = require("./beautician")
module.exports = { module.exports = {
auth, auth,
list, list,
...@@ -12,5 +16,9 @@ module.exports = { ...@@ -12,5 +16,9 @@ module.exports = {
promotion, promotion,
review, review,
booking, booking,
storage storage,
storageprofile,
storageshop,
storagebeautician,
Beautician
}; };
Source/Backend/routers/promotion/index.js
View file @ cfaa58ab
...@@ -8,6 +8,7 @@ router.post("/add",promotiomController.addpromotion); ...@@ -8,6 +8,7 @@ router.post("/add",promotiomController.addpromotion);
router.get('/all',promotiomController.getPromotion); router.get('/all',promotiomController.getPromotion);
router.delete('/delete/:promotionId',promotiomController.deletePromotion); router.delete('/delete/:promotionId',promotiomController.deletePromotion);
router.get('/getPromotionId/:id',promotiomController.getPromotionId); router.get('/getPromotionId/:id',promotiomController.getPromotionId);
router.get('/getUserId/:id', promotiomController.getUserId)
router.put('/updatePromotion/id',promotiomController.updatePromotion); router.put('/updatePromotion/id',promotiomController.updatePromotion);
......
Source/Backend/routers/storage/index.js
View file @ cfaa58ab
const express = require('express');
const router = express.Router();
const router = require('express-promise-router')();
const storage = require('../../multer'); const storage = require('../../multer');
const ShopImage = require('../../models/shopimage'); const ShopImage = require('../../models/shopimage');
const User = require('../../models/user');
router.post('/upload/shop/:shopId', storage.single('images'), async (req, res) => {
// console.log(req.body.shopId);
const images = req.file;
const shop_id = req.body.shopId
router.post('/upload/shop/:shopId', storage.array('images', 5), async (req, res) => { // console.log(req);
console.log(images) await ShopImage.create({
// const images = req.files; shop_id: req.params.shopId,
// for (let i = 0; i < images.length; i++) { image: images.buffer,
// await ShopImage.create({ type: images.mimetype
// shop_id: req.params.productId, });
// userId: req.params.productId, res.send('success')
// image: images[i].buffer,
// type: images[i].mimetype
// });
// }
// res.send('success')
}) })
//get file //get file
router.get('/file/product/:imageId', async (req, res) => { router.get('/file/shop/:shopId', async (req, res) => {
const existingImage = await ProductImage.findOne({ const existingImage = await ShopImage.findOne({
where: { where: {
image_id: req.params.imageId shop_id: req.params.shopId
} }
}) })
const url = existingImage.image.toString('base64'); const urlimg = existingImage.image.toString('base64');
res.status(200).send(url); const dataimg = {
url: urlimg,
type: existingImage.type
}
res.status(200).send(dataimg);
}) })
router.put('/file/shop/:shopId', storage.single('images') ,async (req, res) => {
const editImage = req.file;
const profileimage = {
image: editImage.buffer
}
module.exports = router; const shopId = req.params.shopId;
await ShopImage.update(
profileimage,
{ where: { shop_id: shopId } }
)
res.send('success')
})
module.exports = router;
Source/Backend/routers/storagebeautician/index.js 0 → 100644
View file @ cfaa58ab
const router = require("express-promise-router")();
const storagebeautician = require("../../multer");
const BeauticianImage = require("../../models/beauticianImg");
const User = require("../../models/user");
router.post(
"/upload/beautician/:beauticianId",storagebeautician.single("images"),async (req, res) => {
// console.log(req.body.shopId);
const images = req.file;
const shop_id = req.body.shopId;
const beautician_id = req.params.beauticianId;
// console.log(req);
await BeauticianImage.create({
beautician_id: req.params.beauticianId,
image: images.buffer,
type: images.mimetype,
});
res.send("success");
}
);
//get file
router.get('/file/beautician/:beauticianId', async (req, res) => {
const existingImage = await ShopImage.findAll({
where: {
beautician_id: req.params.beauticianId
}
})
const urlimg = existingImage.image.toString('base64');
const dataimg = {
url: urlimg,
type: existingImage.type
}
res.status(200).send(dataimg);
})
module.exports = router;
Source/Backend/routers/storageprofile/index.js 0 → 100644
View file @ cfaa58ab
const router = require('express-promise-router')();
const storageprofile = require('../../multer');
const UserImage = require('../../models/userimage');
router.post('/upload/user/:userId', storageprofile.single('images'), async (req, res) => {
// console.log(req.body.shopId);
const images = req.file;
const user_id = req.body.userId
// console.log(req);
await UserImage.create({
user_id: req.params.userId,
image: images.buffer,
type: images.mimetype
});
res.send('success')
})
//get file
router.get('/file/user/:userId', async (req, res) => {
const existingImage = await ShopImage.findOne({
where: {
user_id: req.params.userId
}
})
const urlimg = existingImage.image.toString('base64');
const dataimg = {
url: urlimg,
type: existingImage.type
}
res.status(200).send(dataimg);
})
router.put('/file/user/:userId', storageprofile.single('images') ,async (req, res) => {
const editImage = req.file;
const profileimage = {
image: editImage.buffer
}
const userId = req.params.shopId;
await UserImage.update(
profileimage,
{ where: {user_id: userId } }
)
res.send('success')
})
module.exports = router;
\ No newline at end of file
Source/Backend/routers/storageshop/index.js 0 → 100644
View file @ cfaa58ab
const router = require('express-promise-router')();
const storageshop = require('../../multer');
const WorkImage = require('../../models/workimage');
const Shop = require('../../models/shop')
router.post('/upload/work/:shopId', storageshop.single('images'), async (req, res) => {
// console.log(req.body.shopId);
const images = req.file;
const shop_id = req.body.shopId
// const user_id = req.body.userId
// console.log(req);
await WorkImage.create({
shop_id: req.params.shopId,
// user_id: req.params.userId,
image: images.buffer,
type: images.mimetype
});
res.send('success')
})
//get file
router.get('/file/shop/:shopId', async (req, res) => {
const existingImage = await ShopImage.findAll({
where: {
shop_id: req.params.shopId
}
})
const urlimg = existingImage.image.toString('base64');
const dataimg = {
url: urlimg,
type: existingImage.type
}
res.status(200).send(dataimg);
})
module.exports = router;
Source/Backend/server.js
View file @ cfaa58ab
...@@ -16,7 +16,10 @@ app.use("/api/promotion", router.promotion); ...@@ -16,7 +16,10 @@ app.use("/api/promotion", router.promotion);
app.use("/api/review", router.review); app.use("/api/review", router.review);
app.use("/api/booking", router.booking); app.use("/api/booking", router.booking);
app.use("/api/storage", router.storage); app.use("/api/storage", router.storage);
app.use("/api/storageprofile", router.storageprofile);
app.use("/api/storageshop", router.storageshop);
app.use("/api/storagebeautician", router.storagebeautician)
app.use("/api/beautician", router.Beautician)
app.listen(port, () => { app.listen(port, () => {
console.log("Express server listening on port " + port); console.log("Express server listening on port " + port);
}); });
Source/b_beauty_project/src/views/DataShopPage/Addimage/index.js
View file @ cfaa58ab
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
DialogContent, DialogContent,
DialogTitle, DialogTitle,
TextField, TextField,
InputAdornment InputAdornment,
} from "@material-ui/core"; } from "@material-ui/core";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
...@@ -16,9 +16,9 @@ import Fab from "@material-ui/core/Fab"; ...@@ -16,9 +16,9 @@ import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add"; import AddIcon from "@material-ui/icons/Add";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate"; import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import MaterialTable from "material-table"; import MaterialTable from "material-table";
import axios from "axios";
import { connect } from "react-redux";
const styles = theme => ({ const styles = (theme) => ({
root: { root: {
height: 150, height: 150,
flexGrow: 1, flexGrow: 1,
...@@ -26,54 +26,47 @@ const styles = theme => ({ ...@@ -26,54 +26,47 @@ const styles = theme => ({
// The position fixed scoping doesn't work in IE 11. // The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others. // Disable this demo to preserve the others.
"@media all and (-ms-high-contrast: none)": { "@media all and (-ms-high-contrast: none)": {
display: "none" display: "none",
} },
}, },
modal: { modal: {
display: "flex", display: "flex",
padding: theme.spacing(1), padding: theme.spacing(1),
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "center",
}, },
fab: { fab: {
position: "absolute", position: "absolute",
bottom: theme.spacing(2), bottom: theme.spacing(2),
right: theme.spacing(2) right: theme.spacing(2),
} },
}); });
class Databeautician extends Component { class AddImage extends Component {
state = { state = {
open: false, open: false,
columns: [ columns: [{ title: "รูปภาพ", field: "img" }],
{ title: "รูปภาพ", field: "img" } data: [],
], file: null,
data: [ shop: [],
{ img: "Mehmet"},
{
img: "Zerya Betül"
}
]
}; };
handleClickOpen = () => { handleClickOpen = () => {
this.setState({ this.setState({
open: true open: true,
}); });
}; };
handleClose = () => { handleClose = () => {
this.setState({ this.setState({
open: false open: false,
}); });
}; };
handleCloseAndSave = () => { handleCloseAndSave = () => {
//Save to db //Save to db
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
const newData = { const newData = {
img: "Mehmet", img: "Mehmet",
}; };
data.push(newData); data.push(newData);
return { ...prevState, data: data, open: false }; return { ...prevState, data: data, open: false };
...@@ -83,16 +76,50 @@ class Databeautician extends Component { ...@@ -83,16 +76,50 @@ class Databeautician extends Component {
// open: false // open: false
// }); // });
}; };
componentDidMount = () => { // componentDidMount = () => {
let { pathname } = this.props.location; // let { pathname } = this.props.location;
pathname = pathname.substring(1, pathname.length); // pathname = pathname.substring(1, pathname.length);
// console.log('pathname', pathname) // // console.log('pathname', pathname)
// };
componentDidMount = async () => {
const { location, userInfo } = this.props;
const { shop } = this.state;
// const id = location.state.id;
// const response = await axios.get(
// `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
// );
// console.log("response.data", response.data);
// if (response.data)
// this.setState({
// shop: response.data,
// data: response.data,
// });
const response = await axios.get(
`http://localhost:9000/api/shop/getUserId/${userInfo.id}`
);
const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data.id}`)
// console.log(resposeimgshop);
response.data.image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
console.log("response.data",response.data);
// console.log("response.data",b.data);
if (response.data)
this.setState({
shop: response.data,
data: response.data
});
// if (b.data)
// this.setState({
// data: b.data,
// });
}; };
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const { open, columns, data } = this.state; const { open, columns, data, file, shop } = this.state;
return ( return (
<div> <div>
<MaterialTable <MaterialTable
...@@ -100,44 +127,20 @@ class Databeautician extends Component { ...@@ -100,44 +127,20 @@ class Databeautician extends Component {
columns={columns} columns={columns}
data={data} data={data}
options={{ options={{
selection: false selection: false,
}} }}
editable={{ editable={{
// onRowAdd: newData => onRowDelete: (oldData) =>
// new Promise(resolve => { new Promise((resolve) => {
// setTimeout(() => {
// resolve();
// this.setState(prevState => {
// const data = [...prevState.data];
// data.push(newData);
// return { ...prevState, data };
// });
// }, 600);
// }),
// onRowUpdate: (newData, oldData) =>
// new Promise(resolve => {
// setTimeout(() => {
// resolve();
// if (oldData) {
// this.setState(prevState => {
// const data = [...prevState.data];
// data[data.indexOf(oldData)] = newData;
// return { ...prevState, data };
// });
// }
// }, 600);
// }),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => { setTimeout(() => {
resolve(); resolve();
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1); data.splice(data.indexOf(oldData), 1);
return { ...prevState, data }; return { ...prevState, data };
}); });
}, 600); }, 600);
}) }),
}} }}
/> />
<div className="row"> <div className="row">
...@@ -158,7 +161,6 @@ class Databeautician extends Component { ...@@ -158,7 +161,6 @@ class Databeautician extends Component {
> >
<DialogTitle id="alert-dialog-title">{"เพิ่มรูปภาพ"}</DialogTitle> <DialogTitle id="alert-dialog-title">{"เพิ่มรูปภาพ"}</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
className={classes.margin} className={classes.margin}
id="outlined-file-input" id="outlined-file-input"
...@@ -171,7 +173,12 @@ class Databeautician extends Component { ...@@ -171,7 +173,12 @@ class Databeautician extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<AddPhotoAlternateIcon /> <AddPhotoAlternateIcon />
</InputAdornment> </InputAdornment>
) ),
}}
onChange={(e) => {
this.setState({
file: e.target.files[0],
});
}} }}
/> />
</DialogContent> </DialogContent>
...@@ -180,7 +187,29 @@ class Databeautician extends Component { ...@@ -180,7 +187,29 @@ class Databeautician extends Component {
ยกเลิก ยกเลิก
</Button> </Button>
<Button <Button
onClick={this.handleCloseAndSave} onClick={() => {
const { location, userInfo } = this.props;
const formData = new FormData();
console.log(file);
formData.append("images", file);
formData.append("shop_id", shop.id);
// formData.append('userId', userInfo.id)
axios
.post(
`http://localhost:9000/api/storageshop/upload/work/${shop.id}`,
formData
)
.then((response) => {
console.log("เพิ่มรูปภาพสำเร็จ", response);
alert("เพิ่มรูปภาพสำเร็จ");
this.handleClose();
})
.catch((error) => {
console.log(error);
});
}}
color="primary" color="primary"
autoFocus autoFocus
> >
...@@ -193,5 +222,13 @@ class Databeautician extends Component { ...@@ -193,5 +222,13 @@ class Databeautician extends Component {
); );
} }
} }
const mapStateToProps = (state) => ({
userInfo: state.user,
});
const mapDispatchToProps = (dispatch) => {};
export default compose(withStyles(styles), withRouter)(Databeautician); export default connect(
mapStateToProps,
mapDispatchToProps
)(compose(withStyles(styles), withRouter)(AddImage));
Source/b_beauty_project/src/views/DataShopPage/Databeautician/index.js
View file @ cfaa58ab
...@@ -8,7 +8,7 @@ import { ...@@ -8,7 +8,7 @@ import {
DialogTitle, DialogTitle,
InputAdornment, InputAdornment,
TextField, TextField,
Fab Fab,
} from "@material-ui/core"; } from "@material-ui/core";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import compose from "recompose/compose"; import compose from "recompose/compose";
...@@ -21,9 +21,10 @@ import BusinessIcon from "@material-ui/icons/Business"; ...@@ -21,9 +21,10 @@ import BusinessIcon from "@material-ui/icons/Business";
import MaterialTable from "material-table"; import MaterialTable from "material-table";
import { connect } from "react-redux";
import axios from "axios"; import axios from "axios";
const styles = theme => ({ const styles = (theme) => ({
root: { root: {
height: 150, height: 150,
flexGrow: 1, flexGrow: 1,
...@@ -31,23 +32,23 @@ const styles = theme => ({ ...@@ -31,23 +32,23 @@ const styles = theme => ({
// The position fixed scoping doesn't work in IE 11. // The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others. // Disable this demo to preserve the others.
"@media all and (-ms-high-contrast: none)": { "@media all and (-ms-high-contrast: none)": {
display: "none" display: "none",
} },
}, },
modal: { modal: {
display: "flex", display: "flex",
padding: theme.spacing(1), padding: theme.spacing(1),
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "center",
}, },
fab: { fab: {
position: "absolute", position: "absolute",
bottom: theme.spacing(2), bottom: theme.spacing(2),
right: theme.spacing(2) right: theme.spacing(2),
}, },
table: { table: {
minWidth: 700 minWidth: 700,
} },
}); });
class Databeautician extends Component { class Databeautician extends Component {
...@@ -57,19 +58,9 @@ class Databeautician extends Component { ...@@ -57,19 +58,9 @@ class Databeautician extends Component {
{ title: "Name", field: "name" }, { title: "Name", field: "name" },
{ title: "E-mail", field: "email" }, { title: "E-mail", field: "email" },
{ title: "Address", field: "address" }, { title: "Address", field: "address" },
{ {title: "Phone number", field: "tel",}
title: "Phone number",
field: "phone"
}
],
data: [
{
name: "ปิยพร อาภรศรี",
email: "piyaphorn.ar@gmail.com",
address: "7/1 ต.หนองบก",
phone: "0647183784"
}
], ],
data: [],
name: "", name: "",
email: "", email: "",
...@@ -77,34 +68,35 @@ class Databeautician extends Component { ...@@ -77,34 +68,35 @@ class Databeautician extends Component {
password2: "", password2: "",
address: "", address: "",
tel: "", tel: "",
rolr: "" rolr: "",
shops: [],
}; };
handleChange = event => { handleChange = (event) => {
console.log("name : ", event.target.name); console.log("name : ", event.target.name);
console.log("value : ", event.target.value); console.log("value : ", event.target.value);
this.setState({ this.setState({
[event.target.name]: event.target.value [event.target.name]: event.target.value,
}); });
}; };
handleClickOpen = () => { handleClickOpen = () => {
this.setState({ this.setState({
open: true open: true,
}); });
}; };
handleClose = () => { handleClose = () => {
this.setState({ this.setState({
open: false open: false,
}); });
}; };
handleCloseAndSave = () => { handleCloseAndSave = () => {
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
const newData = { const newData = {
name: "Mehmet", name: "Mehmet",
surname: "Baran", surname: "Baran",
birthYear: 1987, birthYear: 1987,
birthCity: 63 birthCity: 63,
}; };
data.push(newData); data.push(newData);
return { ...prevState, data: data, open: false }; return { ...prevState, data: data, open: false };
...@@ -114,14 +106,26 @@ class Databeautician extends Component { ...@@ -114,14 +106,26 @@ class Databeautician extends Component {
// open: false // open: false
// }); // });
}; };
componentDidMount = () => { componentDidMount = async () => {
let { pathname } = this.props.location; const { location, userInfo } = this.props;
pathname = pathname.substring(1, pathname.length); const { shops } = this.state;
// console.log('pathname', pathname)
const response = await axios.get(
`http://localhost:9000/api/shop/getUserId/${userInfo.id}`
);
const responsedata = await axios.get(
`http://localhost:9000/api/beautician/getbeauticianShopId/${shops.id}`
);
console.log(response.data);
console.log(responsedata.data);
this.setState({
shops: response.data,
data: responsedata.data
});
}; };
render() { render() {
const { classes } = this.props; const { classes, userInfo } = this.props;
const { const {
open, open,
...@@ -133,8 +137,9 @@ class Databeautician extends Component { ...@@ -133,8 +137,9 @@ class Databeautician extends Component {
password2, password2,
address, address,
tel, tel,
shops,
role role,
} = this.state; } = this.state;
return ( return (
<div> <div>
...@@ -143,44 +148,20 @@ class Databeautician extends Component { ...@@ -143,44 +148,20 @@ class Databeautician extends Component {
columns={columns} columns={columns}
data={data} data={data}
options={{ options={{
selection: false selection: false,
}} }}
editable={{ editable={{
// onRowAdd: newData => onRowDelete: (oldData) =>
// new Promise(resolve => { new Promise((resolve) => {
// setTimeout(() => {
// resolve();
// this.setState(prevState => {
// const data = [...prevState.data];
// data.push(newData);
// return { ...prevState, data };
// });
// }, 600);
// }),
onRowUpdate: (newData, oldData) =>
new Promise(resolve => {
setTimeout(() => {
resolve();
if (oldData) {
this.setState(prevState => {
const data = [...prevState.data];
data[data.indexOf(oldData)] = newData;
return { ...prevState, data };
});
}
}, 600);
}),
onRowDelete: oldData =>
new Promise(resolve => {
setTimeout(() => { setTimeout(() => {
resolve(); resolve();
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1); data.splice(data.indexOf(oldData), 1);
return { ...prevState, data }; return { ...prevState, data };
}); });
}, 600); }, 600);
}) }),
}} }}
/> />
<div className="row"> <div className="row">
...@@ -207,14 +188,14 @@ class Databeautician extends Component { ...@@ -207,14 +188,14 @@ class Databeautician extends Component {
id="name" id="name"
name="name" name="name"
value={name} value={name}
label="ชื่อ-สกุล" label="ชื่อ-สกุล*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<AccountCircle /> <AccountCircle />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -226,14 +207,14 @@ class Databeautician extends Component { ...@@ -226,14 +207,14 @@ class Databeautician extends Component {
id="email" id="email"
name="email" name="email"
value={email} value={email}
label="E_mail" label="E_mail*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<MailOutlineIcon /> <MailOutlineIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -245,7 +226,7 @@ class Databeautician extends Component { ...@@ -245,7 +226,7 @@ class Databeautician extends Component {
id="password" id="password"
name="password" name="password"
value={password} value={password}
label="Password" label="Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
...@@ -254,7 +235,7 @@ class Databeautician extends Component { ...@@ -254,7 +235,7 @@ class Databeautician extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<VpnKeyIcon /> <VpnKeyIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -266,7 +247,7 @@ class Databeautician extends Component { ...@@ -266,7 +247,7 @@ class Databeautician extends Component {
id="password2" id="password2"
name="password2" name="password2"
value={password2} value={password2}
label="Confirm-Password" label="Confirm-Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
...@@ -275,7 +256,7 @@ class Databeautician extends Component { ...@@ -275,7 +256,7 @@ class Databeautician extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<VpnKeyIcon /> <VpnKeyIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -295,7 +276,7 @@ class Databeautician extends Component { ...@@ -295,7 +276,7 @@ class Databeautician extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<BusinessIcon /> <BusinessIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -315,7 +296,7 @@ class Databeautician extends Component { ...@@ -315,7 +296,7 @@ class Databeautician extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<ContactPhoneIcon /> <ContactPhoneIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
...@@ -330,20 +311,30 @@ class Databeautician extends Component { ...@@ -330,20 +311,30 @@ class Databeautician extends Component {
autoFocus autoFocus
onClick={() => { onClick={() => {
if (password === password2) { if (password === password2) {
axios const register = axios.post(
.post("http://localhost:9000/api/auth/register", { "http://localhost:9000/api/auth/register",
{
name: name,
email: email, email: email,
password: password, password: password,
address: address,
tel: tel,
role: "2",
}
);
const Beautician = axios
.post("http://localhost:9000/api/beautician/add", {
name: name, name: name,
email: email,
address: address, address: address,
tel: tel, tel: tel,
role: "2" shopID: shops.id,
}) })
.then(response => { .then((response) => {
console.log("สร้างผู้ใช้สำเร็จ", response); console.log("สร้างผู้ใช้สำเร็จ", response);
this.handleClose(); this.handleClose();
}) })
.catch(error => { .catch((error) => {
console.log(error); console.log(error);
}); });
// alert("ลงทะเบียนสำเร็จ"); // alert("ลงทะเบียนสำเร็จ");
...@@ -362,4 +353,13 @@ class Databeautician extends Component { ...@@ -362,4 +353,13 @@ class Databeautician extends Component {
} }
} }
export default compose(withStyles(styles), withRouter)(Databeautician); const mapStateToProps = (state) => ({
userInfo: state.user,
});
const mapDispatchToProps = (dispatch) => {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(compose(withStyles(styles), withRouter)(Databeautician));
Source/b_beauty_project/src/views/DataShopPage/Datashop/index.js
View file @ cfaa58ab
...@@ -36,8 +36,7 @@ import PlaceIcon from '@material-ui/icons/Place'; ...@@ -36,8 +36,7 @@ import PlaceIcon from '@material-ui/icons/Place';
import FacebookIcon from '@material-ui/icons/Facebook'; import FacebookIcon from '@material-ui/icons/Facebook';
import MergeTypeIcon from '@material-ui/icons/MergeType'; import MergeTypeIcon from '@material-ui/icons/MergeType';
import axios from "axios"; import axios from "axios";
import MuiAlert from "@material-ui/lab/Alert";
import Avatar from "react-avatar";
import { connect } from "react-redux"; import { connect } from "react-redux";
const styles = theme => ({ const styles = theme => ({
...@@ -104,8 +103,9 @@ class Datashop extends Component { ...@@ -104,8 +103,9 @@ class Datashop extends Component {
}, },
file: null, file: null,
promotion: "", promotion: {detail:""},
open: false open: false,
openupdate: false
}; };
handleClickOpen = () => { handleClickOpen = () => {
this.setState({ this.setState({
...@@ -117,6 +117,16 @@ class Datashop extends Component { ...@@ -117,6 +117,16 @@ class Datashop extends Component {
open: false open: false
}); });
}; };
handleClickOpenupdate = () => {
this.setState({
openupdate: true
});
};
handleCloseupdate = () => {
this.setState({
openupdate: false
});
};
handleChange = event => { handleChange = event => {
let { shop } = this.state; let { shop } = this.state;
console.log("name : ", event.target.name); console.log("name : ", event.target.name);
...@@ -135,14 +145,21 @@ class Datashop extends Component { ...@@ -135,14 +145,21 @@ class Datashop extends Component {
const response = await axios.get( const response = await axios.get(
`http://localhost:9000/api/shop/getUserId/${userInfo.id}` `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
); );
const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data.id}`)
// console.log(resposeimgshop);
const responsepromotion = await axios.get(
`http://localhost:9000/api/promotion/getuserId/${userInfo.id}`
);
response.data.image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
if (response.data) this.setState({ shop: response.data }); if (response.data) this.setState({ shop: response.data });
if (responsepromotion.data) this.setState({ promotion: responsepromotion.data });
}; };
render() { render() {
const { classes, userInfo } = this.props; const { classes, userInfo } = this.props;
const { currency, shop, promotion, open, file } = this.state; const { currency, shop, promotion, open, file ,openupdate} = this.state;
return ( return (
<div className="row center"> <div className="row center">
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
...@@ -150,14 +167,14 @@ class Datashop extends Component { ...@@ -150,14 +167,14 @@ class Datashop extends Component {
</div> </div>
<br /> <br />
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
<div className="col s12 m6 l12"> <div className="col s12 m12 l12">
<div className="row center"> <div className="row center">
<h3>ข้อมูลทั่วไป</h3> <h3>ข้อมูลทั่วไป</h3>
</div> </div>
<div className="row center"> <div className="row center">
<br /> <br />
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRGzUPvW-KAdZI6KiIyh-HHSKtqKRGSWcP3vDqHUd2Sn2F3SHwr" /> <img src={shop.image} width="60%"/>
</div> </div>
<div className="row center"> <div className="row center">
...@@ -205,20 +222,22 @@ class Datashop extends Component { ...@@ -205,20 +222,22 @@ class Datashop extends Component {
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
const { location, userInfo } = this.props;
const formData = new FormData(); const formData = new FormData();
formData.append("images", file); console.log(file);
formData.append('images', file)
formData.append('shop_id', shop.id)
// formData.append('userId', userInfo.id)
axios axios
.post( .post(
`http://localhost:9000/api/storage/upload/shop/${shop.id}`,
formData, `http://localhost:9000/api/storage/upload/shop/${shop.id}`,formData)
shop.id,
userInfo.id
)
.then(response => { .then(response => {
console.log("เพิ่มรูปภาพสำเร็จ", response); console.log("เพิ่มรูปภาพสำเร็จ", response);
alert("เพิ่มรูปภาพสำเร็จ"); alert("เพิ่มรูปภาพสำเร็จ");
this.handleClose();
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
...@@ -232,20 +251,84 @@ class Datashop extends Component { ...@@ -232,20 +251,84 @@ class Datashop extends Component {
</DialogActions> </DialogActions>
</Dialog> </Dialog>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
<Button variant="outlined" color="primary"> <Button variant="outlined" onClick={this.handleClickOpenupdate} color="primary">
<PhotoCameraIcon /> <PhotoCameraIcon />
แก้ไขรูปภาพร้าน แก้ไขรูปภาพร้าน
</Button> </Button>
<Dialog
open={openupdate}
onClose={this.handleCloseupdate}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"แก้ไขรูปภาพ"}
</DialogTitle>
<DialogContent>
<TextField
className={classes.margin}
id="outlined-file-input"
label="แก้ไขรูปภาพ"
type="file"
autoComplete="current-password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AddPhotoAlternateIcon />
</InputAdornment>
)
}}
onChange={e => {
this.setState({
file: e.target.files[0]
});
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleCloseupdate} color="primary">
ยกเลิก
</Button>
<Button
onClick={() => {
const { location, userInfo } = this.props;
const formData = new FormData();
// console.log(file);
formData.append('images', file)
formData.append('shop_id', shop.id)
// // formData.append('userId', userInfo.id)
axios
.put(
`http://localhost:9000/api/storage/file/shop/${shop.id}`,formData)
.then(response => {
console.log("แก้ไขรรูปภาพสำเร็จ", response);
alert("แกไขรูปภาพสำเร็จ");
this.handleCloseupdate();
})
.catch(error => {
console.log(error);
});
}}
color="primary"
autoFocus
>
ยืนยัน
</Button>
</DialogActions>
</Dialog>
</div> </div>
</div> </div>
<div className="col s12 m6 l12"> <div className="col s12 m12 l12">
<div ClassName="row"> <div ClassName="row">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="name" id="name"
name="name" name="name"
value={shop.name} value={shop.name}
label="ชื่อร้าน" label="ชื่อร้าน*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -261,7 +344,7 @@ class Datashop extends Component { ...@@ -261,7 +344,7 @@ class Datashop extends Component {
id="nameeng" id="nameeng"
name="nameeng" name="nameeng"
value={shop.nameeng} value={shop.nameeng}
label="Name" label="Name*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -277,7 +360,7 @@ class Datashop extends Component { ...@@ -277,7 +360,7 @@ class Datashop extends Component {
id="timeopen" id="timeopen"
name="timeopen" name="timeopen"
value={shop.timeopen} value={shop.timeopen}
label="เวลาเปิดร้าน" label="เวลาเปิดร้าน*"
autoComplete="timeopen" autoComplete="timeopen"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -289,15 +372,13 @@ class Datashop extends Component { ...@@ -289,15 +372,13 @@ class Datashop extends Component {
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
</div>
<br />
<div>
<TextField <TextField
className={classes.margin} className={classes.margin}
id="timeclose" id="timeclose"
name="timeclose" name="timeclose"
value={shop.timeclose} value={shop.timeclose}
label="เวลาปิดร้าน" label="เวลาปิดร้าน*"
autoComplete="timeclose" autoComplete="timeclose"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -314,7 +395,7 @@ class Datashop extends Component { ...@@ -314,7 +395,7 @@ class Datashop extends Component {
id="tel" id="tel"
name="tel" name="tel"
value={shop.tel} value={shop.tel}
label="เบอร์โทรร้าน" label="เบอร์โทรร้าน*"
autoComplete="tel" autoComplete="tel"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -331,7 +412,7 @@ class Datashop extends Component { ...@@ -331,7 +412,7 @@ class Datashop extends Component {
id="address" id="address"
name="address" name="address"
value={shop.address} value={shop.address}
label="ที่อยู่ร้าน" label="ที่อยู่ร้าน*"
autoComplete="address" autoComplete="address"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -343,15 +424,13 @@ class Datashop extends Component { ...@@ -343,15 +424,13 @@ class Datashop extends Component {
}} }}
onChange={this.handleChange} onChange={this.handleChange}
/> />
</div>
<br />
<div>
<TextField <TextField
className={classes.margin} className={classes.margin}
id="detail" id="detail"
name="detail" name="detail"
value={shop.detail} value={shop.detail}
label="รายละเอียดร้าน" label="รายละเอียดร้าน*"
autoComplete="detail" autoComplete="detail"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -368,7 +447,7 @@ class Datashop extends Component { ...@@ -368,7 +447,7 @@ class Datashop extends Component {
id="lat" id="lat"
name="lat" name="lat"
value={shop.lat} value={shop.lat}
label="lat" label="lat*"
autoComplete="lat" autoComplete="lat"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -385,7 +464,7 @@ class Datashop extends Component { ...@@ -385,7 +464,7 @@ class Datashop extends Component {
id="lng" id="lng"
name="lng" name="lng"
value={shop.lng} value={shop.lng}
label="lng" label="lng*"
autoComplete="lng" autoComplete="lng"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -420,7 +499,7 @@ class Datashop extends Component { ...@@ -420,7 +499,7 @@ class Datashop extends Component {
name="type" name="type"
value={shop.type} value={shop.type}
select select
label="ประเภทของร้าน" label="ประเภทของร้าน*"
onChange={this.handleChange} onChange={this.handleChange}
SelectProps={{ SelectProps={{
native: true native: true
...@@ -460,13 +539,13 @@ class Datashop extends Component { ...@@ -460,13 +539,13 @@ class Datashop extends Component {
userId: userInfo.id userId: userInfo.id
}) })
.then(response => { .then(response => {
console.log("สร้างผู้ใช้สำเร็จ", response); console.log("เพิ่มข้อมูลร้านสำเร็จ", response);
alert("เพิ่มข้อมูลสำเร็จ"); alert("กรอกข้อมูลไม่ครบ");
}) })
.catch(error => { .catch(error => {
console.log(error); console.log(error);
}); });
// alert("ลงทะเบียนสำเร็จ");
}} }}
> >
ตกลง ตกลง
...@@ -479,61 +558,7 @@ class Datashop extends Component { ...@@ -479,61 +558,7 @@ class Datashop extends Component {
</div> </div>
</div> </div>
</div> </div>
<div className="row center">
<div className="row">
<h3>ข้อมูลโปรโมชั่น</h3>
</div>
<div>
<TextField
className={classes.margin}
id="promotion"
name="promotion"
value={promotion}
label="ข้อมูลโปรโมชั่น"
autoComplete="promotion"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<PostAddIcon />
</InputAdornment>
)
}}
onChange={this.handleChange}
/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
<Button variant="contained" color="secondary">
ยกเลิก
</Button>{" "}
&nbsp; &nbsp; &nbsp;
<Button
variant="contained"
color="primary"
onClick={() => {
axios
.post("http://localhost:9000/api/promotion/add", {
shop: shop
})
.then(response => {
console.log("สร้างผู้ใช้สำเร็จ", response);
alert("เพิ่มข้อมูลสำเร็จ");
// window.location.href = "/";
})
.catch(error => {
console.log(error);
});
// alert("ลงทะเบียนสำเร็จ");
}}
>
ตกลง
</Button>
&nbsp; &nbsp; &nbsp;
<Fab color="secondary" aria-label="edit">
<EditIcon />
</Fab>
</div>
<br></br>
</div>
</div> </div>
); );
} }
......
Source/b_beauty_project/src/views/DataShopPage/List/index.js
View file @ cfaa58ab
...@@ -4,8 +4,8 @@ import { withRouter } from "react-router-dom"; ...@@ -4,8 +4,8 @@ import { withRouter } from "react-router-dom";
import compose from "recompose/compose"; import compose from "recompose/compose";
import MaterialTable from "material-table"; import MaterialTable from "material-table";
import axios from "axios"; import axios from "axios";
import { connect } from "react-redux";
const styles = theme => ({ const styles = (theme) => ({
root: { root: {
height: 150, height: 150,
flexGrow: 1, flexGrow: 1,
...@@ -13,20 +13,20 @@ const styles = theme => ({ ...@@ -13,20 +13,20 @@ const styles = theme => ({
// The position fixed scoping doesn't work in IE 11. // The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others. // Disable this demo to preserve the others.
"@media all and (-ms-high-contrast: none)": { "@media all and (-ms-high-contrast: none)": {
display: "none" display: "none",
} },
}, },
modal: { modal: {
display: "flex", display: "flex",
padding: theme.spacing(1), padding: theme.spacing(1),
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "center",
}, },
fab: { fab: {
position: "absolute", position: "absolute",
bottom: theme.spacing(2), bottom: theme.spacing(2),
right: theme.spacing(2) right: theme.spacing(2),
} },
}); });
class List extends Component { class List extends Component {
...@@ -35,23 +35,28 @@ class List extends Component { ...@@ -35,23 +35,28 @@ class List extends Component {
{ title: "ชื่อรายการ", field: "name" }, { title: "ชื่อรายการ", field: "name" },
{ title: "ราคา", field: "price" }, { title: "ราคา", field: "price" },
{ title: "เวลาที่จอง", field: "time" } { title: "เวลาที่จอง", field: "time" },
], ],
data: [], data: [],
shop: null, userId: null,
userId: null lists: {
id:"",
name:"",
price:"",
time:""
},
}; };
handleCloseAndSave = () => { handleCloseAndSave = () => {
//Save to db //Save to db
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
const newData = { const newData = {
name: "Mehmet", name: "Mehmet",
surname: "Baran", surname: "Baran",
birthYear: 1987, birthYear: 1987,
birthCity: 63 birthCity: 63,
}; };
data.push(newData); data.push(newData);
return { ...prevState, data: data, open: false }; return { ...prevState, data: data, open: false };
...@@ -62,26 +67,29 @@ class List extends Component { ...@@ -62,26 +67,29 @@ class List extends Component {
// }); // });
}; };
componentDidMount = async () => { componentDidMount = async () => {
let { pathname } = this.props.location; let { pathname} = this.props.location;
const { userInfo } = this.props;
pathname = pathname.substring(1, pathname.length); pathname = pathname.substring(1, pathname.length);
const { shop } = this.state;
// get shop const responseshop = await axios.get(
const shop = 5; `http://localhost:9000/api/shop/getUserId/${userInfo.id}`
const userId = 36; );
const response = await axios.get( const response = await axios.get(
`http://localhost:9000/api/list/getListuser/${userId}` `http://localhost:9000/api/list/getListshop/${responseshop.data.id}`
); );
console.log("response.data", response.data); console.log("response.data", response.data);
if (response.data) { console.log("response.data", responseshop.data);
this.setState({ this.setState({
shop: 5, shop: responseshop.data,
userId: 36, data: response.data,
data: response.data list: response.data,
}); });
} else {
console.log("cannot get shop data");
}
// console.log('pathname', pathname) // console.log('pathname', pathname)
}; };
...@@ -89,7 +97,7 @@ class List extends Component { ...@@ -89,7 +97,7 @@ class List extends Component {
render() { render() {
const { classes } = this.props; const { classes } = this.props;
const { columns, data, shop, userId } = this.state; const { columns, data, shop, userId, lists } = this.state;
return ( return (
<div> <div>
<div className="row"> <div className="row">
...@@ -98,55 +106,74 @@ class List extends Component { ...@@ -98,55 +106,74 @@ class List extends Component {
columns={columns} columns={columns}
data={data} data={data}
options={{ options={{
selection: false selection: false,
}} }}
editable={{ editable={{
onRowAdd: newData => onRowAdd: (newData) =>
new Promise(resolve => { new Promise((resolve) => {
newData = { ...newData, shop: shop, userId: userId }; const { userInfo } = this.props;
newData = { ...newData, shop: shop.id, userId: shop.userId };
axios axios
.post(`http://localhost:9000/api/list/add/`, newData) .post(`http://localhost:9000/api/list/add/`, newData)
.then(response => { .then((response) => {
console.log("เพิ่ม list สำเร็จ", response); console.log("เพิ่ม list สำเร็จ", response);
alert("เพิ่ม list สำเร็จ"); alert("เพิ่ม list สำเร็จ");
resolve(); resolve();
this.setState(prevState => { this.setState((prevState) => {
let data = [...prevState.data]; let data = [...prevState.data];
data = [newData, ...data]; data = [newData, ...data];
return { ...prevState, data }; return { ...prevState, data };
}); });
}) })
.catch(error => { .catch((error) => {
console.log(error); console.log(error);
alert(`เพิ่ม list ไม่สำเร็จ ${error.message}`); alert(`เพิ่ม list ไม่สำเร็จ ${error.message}`);
}); });
}), }),
onRowUpdate: (newData, oldData) => onRowUpdate: (newData, oldData) =>
new Promise(resolve => { new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
newData = { ...newData, shop: shop, userId: userId };
axios
.post(`http://localhost:9000/api/list/updateList/${oldData.id}`, newData)
.then((response) => {
console.log("แก้ไข list สำเร็จ", response);
alert("แก้ไขรายการสำเร็จ");
resolve(); resolve();
if (oldData) { if (oldData) {
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
data[data.indexOf(oldData)] = newData; data[data.indexOf(oldData)] = newData;
return { ...prevState, data }; return { ...prevState, data };
}); });
} }
}, 600); }, 600);
})
.catch((error) => {
console.log(error);
alert(`เพิ่ม list ไม่สำเร็จ ${error.message}`);
});
}), }),
onRowDelete: oldData => onRowDelete: (oldData) =>
new Promise(resolve => { new Promise((resolve) => {
setTimeout(() => { setTimeout(() => {
axios.delete(
`http://localhost:9000/api/list/delete/${oldData.id}`
);
console.log("ลบ list สำเร็จ");
alert("ลบรายการสำเร็จ");
resolve(); resolve();
this.setState(prevState => { this.setState((prevState) => {
const data = [...prevState.data]; const data = [...prevState.data];
data.splice(data.indexOf(oldData), 1); data.splice(data.indexOf(oldData), 1);
return { ...prevState, data }; return { ...prevState, data };
}); });
}, 600); }, 600);
}) }),
}} }}
/> />
</div> </div>
...@@ -154,5 +181,14 @@ class List extends Component { ...@@ -154,5 +181,14 @@ class List extends Component {
); );
} }
} }
const mapStateToProps = state => ({
userInfo: state.user
});
const mapDispatchToProps = dispatch => {};
export default connect(
mapStateToProps,
mapDispatchToProps
)(compose(withStyles(styles), withRouter)(List));
export default compose(withStyles(styles), withRouter)(List);
Source/b_beauty_project/src/views/DataShopPage/Managequeue/index.js
View file @ cfaa58ab
...@@ -114,45 +114,7 @@ class Managequeue extends Component { ...@@ -114,45 +114,7 @@ class Managequeue extends Component {
options={{ options={{
selection: false selection: false
}} }}
editable={{
// onRowAdd: newData =>
// new Promise(resolve => {
// setTimeout(() => {
// resolve();
// this.setState(prevState => {
// const data = [...prevState.data];
// data.push(newData);
// return { ...prevState, data };
// });
// }, 600);
// }),
// onRowUpdate: (newData, oldData) =>
// new Promise(resolve => {
// setTimeout(() => {
// resolve();
// if (oldData) {
// this.setState(prevState => {
// const data = [...prevState.data];
// data[data.indexOf(oldData)] = newData;
// return { ...prevState, data };
// });
// }
// }, 600);
// }),
// onRowDelete: oldData =>
// new Promise(resolve => {
// setTimeout(() => {
// resolve();
// this.setState(prevState => {
// const data = [...prevState.data];
// data.splice(data.indexOf(oldData), 1);
// return { ...prevState, data };
// });
// }, 600);
// })
}}
/> />
</div> </div>
</div> </div>
......
Source/b_beauty_project/src/views/DataShopPage/Profile/index.js
View file @ cfaa58ab
...@@ -6,7 +6,21 @@ import { ...@@ -6,7 +6,21 @@ import {
InputAdornment, InputAdornment,
TextField, TextField,
Button, Button,
Fab Fab,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
FormControl,
TextareaAutosize,
Paper,
CardMedia,
MenuItem,
Snackbar,
} from "@material-ui/core"; } from "@material-ui/core";
import AccountCircle from "@material-ui/icons/AccountCircle"; import AccountCircle from "@material-ui/icons/AccountCircle";
import MailOutlineIcon from "@material-ui/icons/MailOutline"; import MailOutlineIcon from "@material-ui/icons/MailOutline";
...@@ -16,32 +30,49 @@ import EditIcon from "@material-ui/icons/Edit"; ...@@ -16,32 +30,49 @@ import EditIcon from "@material-ui/icons/Edit";
import { connect } from "react-redux"; import { connect } from "react-redux";
import PhotoCameraIcon from "@material-ui/icons/PhotoCamera"; import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
import Avatar from "react-avatar"; import Avatar from "react-avatar";
import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
import axios from "axios"; import axios from "axios";
const styles = theme => ({ const styles = (theme) => ({
margin: { margin: {
margin: theme.spacing(1) margin: theme.spacing(1),
} },
}); });
class Profile extends Component { class Profile extends Component {
state = { state = {
user: "" user: "",
file: null,
open: false
};
handleClickOpen = () => {
this.setState({
open: true
});
};
handleClose = () => {
this.setState({
open: false
});
}; };
componentDidMount = async () => { componentDidMount = async () => {
const { location, userInfo } = this.props; const { location, userInfo } = this.props;
// const id = userInfo.id; // const id = userInfo.id;
const response = await axios.get( const response = await axios.get(
`http://localhost:9000/api/auth/getUserById/${userInfo.id}` `http://localhost:9000/api/auth/getUserById/${userInfo.id}`
); );
// const resposeimguser = await axios.get(`http://localhost:9000/api/storageprofile/file/user/${userInfo.id}`)
// // console.log(resposeimgshop);
// response.data.image = ('data:' + resposeimguser.data.type+';base64,'+resposeimguser.data.url)
console.log(response.data); console.log(response.data);
this.setState({ this.setState({
user: response.data user: response.data,
}); });
}; };
render() { render() {
const { classes, userInfo } = this.props; const { classes, userInfo } = this.props;
const { user } = this.state; const { user, file ,shop,open} = this.state;
return ( return (
<div className="row center"> <div className="row center">
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
...@@ -49,24 +80,99 @@ class Profile extends Component { ...@@ -49,24 +80,99 @@ class Profile extends Component {
</div> </div>
<br /> <br />
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
<div className="col s12 m6 l4"> <div className="col s12 m12 l4">
<div className="row center"> <div className="row center">
<br /> <br />
<Avatar <Avatar
skypeId="sitebase" skypeId="sitebase"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQZeSPYraiTcEz6JxyXy8ITsaGldAqDjX6860m7eCpYhYeQDQkL" src={user.image}
size="200" size="200"
round={true} round={true}
/> />
</div> </div>
<div className="row center"> <div className="row center">
<Button
variant="outlined"
color="primary"
onClick={this.handleClickOpen}
>
<AddAPhotoIcon />
เพิ่มรูปภาพร้าน
</Button>
<Dialog
open={open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"เพิ่มรูปภาพ"}
</DialogTitle>
<DialogContent>
<TextField
className={classes.margin}
id="outlined-file-input"
label="เพิ่มรูปภาพ"
type="file"
autoComplete="current-password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<AddPhotoAlternateIcon />
</InputAdornment>
),
}}
onChange={(e) => {
this.setState({
file: e.target.files[0],
});
}}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClose} color="primary">
ยกเลิก
</Button>
<Button
onClick={() => {
const { location, userInfo } = this.props;
const formData = new FormData();
console.log(file);
formData.append("images", file);
// formData.append("shop_id", shop.id);
formData.append('userId', userInfo.id)
axios
.post(
`http://localhost:9000/api/storageprofile/upload/user/${userInfo.id}`,
formData
)
.then((response) => {
console.log("เพิ่มรูปภาพสำเร็จ", response);
alert("เพิ่มรูปภาพสำเร็จ");
this.handleClose();
})
.catch((error) => {
console.log(error);
});
}}
color="primary"
autoFocus
>
ยืนยัน
</Button>
</DialogActions>
</Dialog>
&nbsp; &nbsp; &nbsp;
<Button variant="outlined" color="primary"> <Button variant="outlined" color="primary">
<PhotoCameraIcon /> <PhotoCameraIcon />
แก้ไขรูปโปรไฟล์ แก้ไขรูปภาพร้าน
</Button> </Button>
</div> </div>
</div> </div>
<div className="col s12 m6 l8"> <div className="col s12 m12 l8">
<br /> <br />
<div ClassName="row"> <div ClassName="row">
<TextField <TextField
...@@ -81,7 +187,7 @@ class Profile extends Component { ...@@ -81,7 +187,7 @@ class Profile extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<AccountCircle /> <AccountCircle />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
...@@ -97,7 +203,7 @@ class Profile extends Component { ...@@ -97,7 +203,7 @@ class Profile extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<MailOutlineIcon /> <MailOutlineIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
</div> </div>
...@@ -116,7 +222,7 @@ class Profile extends Component { ...@@ -116,7 +222,7 @@ class Profile extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<BusinessIcon /> <BusinessIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
...@@ -133,7 +239,7 @@ class Profile extends Component { ...@@ -133,7 +239,7 @@ class Profile extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<ContactPhoneIcon /> <ContactPhoneIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
/> />
</div> </div>
...@@ -160,11 +266,11 @@ class Profile extends Component { ...@@ -160,11 +266,11 @@ class Profile extends Component {
); );
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
userInfo: state.user userInfo: state.user,
}); });
const mapDispatchToProps = dispatch => {}; const mapDispatchToProps = (dispatch) => {};
export default connect( export default connect(
mapStateToProps, mapStateToProps,
......
Source/b_beauty_project/src/views/HomePage/index.js
View file @ cfaa58ab
...@@ -136,6 +136,7 @@ class HomePage extends Component { ...@@ -136,6 +136,7 @@ class HomePage extends Component {
shops: [], shops: [],
columns: [{ title: "เวลา", field: "time" }], columns: [{ title: "เวลา", field: "time" }],
data: [], data: [],
}; };
handleClickOpen = () => { handleClickOpen = () => {
this.setState({ this.setState({
...@@ -179,21 +180,39 @@ class HomePage extends Component { ...@@ -179,21 +180,39 @@ class HomePage extends Component {
// 7 // 7
const response = await axios.get("http://localhost:9000/api/shop/all"); const response = await axios.get("http://localhost:9000/api/shop/all");
console.warn(response.data); for (let i = 0; i < response.data.length; i++) {
const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
// console.log(resposeimgshop);
response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
}
console.log("response", response.data);
this.setState({ this.setState({
tab: tab, tab: tab,
shops: response.data shops: response.data,
// data: result,
});
};
calculate = (endTime, timeopen) => {
let timeStops = [];
let dateOpen = new Date();
dateOpen.setHours(parseInt(timeopen[0]));
dateOpen.setMinutes(parseInt(timeopen[1]));
let startTime = moment(dateOpen).add(
"m",
15 - (moment(dateOpen).minute() % 15)
);
while (startTime < endTime) {
timeStops.push({
time: new moment(startTime).format("LT"),
}); });
// console.log("response", response.data); startTime.add("m", 15);
// 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);
return timeStops;
}; };
handleChangeTab = (event, newValue) => { handleChangeTab = (event, newValue) => {
...@@ -237,9 +256,7 @@ class HomePage extends Component { ...@@ -237,9 +256,7 @@ class HomePage extends Component {
<div className="row "> <div className="row ">
<center> <center>
<Paper component="form" className={classes.root}> <Paper component="form" className={classes.root}>
{/* <IconButton className={classes.iconButton} aria-label="menu">
<MenuIcon />
</IconButton> */}
<InputBase <InputBase
className={classes.input} className={classes.input}
inputProps={{ "aria-label": "ค้นหาร้าน" }} inputProps={{ "aria-label": "ค้นหาร้าน" }}
...@@ -251,14 +268,7 @@ class HomePage extends Component { ...@@ -251,14 +268,7 @@ class HomePage extends Component {
> >
<SearchIcon /> <SearchIcon />
</IconButton> </IconButton>
{/* <Divider className={classes.divider} orientation="vertical" /> */}
{/* <IconButton
color="primary"
className={classes.iconButton}
aria-label="directions"
>
<DirectionsIcon />
</IconButton> */}
</Paper> </Paper>
</center> </center>
</div> </div>
...@@ -269,7 +279,7 @@ class HomePage extends Component { ...@@ -269,7 +279,7 @@ class HomePage extends Component {
<div className="col s12 m6 l6"> <div className="col s12 m6 l6">
<div className="row mt-3 mb-2 center"> <div className="row mt-3 mb-2 center">
<img <img
src="https://www.smeleader.com/wp-content/uploads/2018/05/%E0%B9%81%E0%B8%9F%E0%B8%A3%E0%B8%99%E0%B9%84%E0%B8%8A%E0%B8%AA%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%A7%E0%B8%A2-%E0%B8%A3%E0%B8%A7%E0%B8%A1%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%99-%E0%B8%AA%E0%B8%B2%E0%B8%99%E0%B8%9D%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%97%E0%B8%A3%E0%B8%87%E0%B8%9C%E0%B8%A1.jpg" src={shop.image}
width="60%" width="60%"
onClick={() => { onClick={() => {
this.props.history.push("/ShopPage", { id: shop.id}); this.props.history.push("/ShopPage", { id: shop.id});
......
Source/b_beauty_project/src/views/HomePage/tmp.js 0 → 100644
View file @ cfaa58ab
// let timeopen = ["10", "00", "00"];
// let timeclose = ["19", "30", "00"];
// let timeInTable = [];
// while (timeopen[0] !== timeclose[0] && timeopen[1] !== timeopen[1]) {
// let tmpTimeHourOpen = parseInt(timeopen[0]);
// let tmpTimeMinuteOpen = parseInt(timeopen[1]);
// let tableTimeHour = tmpTimeHourOpen;
// let tableTimeMinute = tmpTimeMinuteOpen;
// if (tmpTimeMinuteOpen === 45) {
// tableTimeHour = tableTimeHour + 1;
// tableTimeHour = 0
// }else{
// }
// let timeTable = Number(timeopen[0]);
// let timeTable = Number(timeopen[0]);
// timeInTable.push();
// }
// console.log("test");
// ================================ 2 ===========================
// function addMinutes(date, minutes) {
// return new Date(date.getTime() + minutes * 60000);
// }
// let date = new Date();
// let result = "";
// for (let index = 0; index < 30; index++) {
// let m = ((((date.getMinutes() + 7.5) / 15) | 0) * 15) % 60;
// let h = (((date.getMinutes() / 105 + 0.5) | 0) + date.getHours()) % 24;
// date = new Date(date.getYear(), date.getMonth(), date.getDay(), h, m, 0, 0);
// if (index > 0) result += ", ";
// result += ("0" + h).slice(-2) + ":" + ("0" + m).slice(-2);
// date = addMinutes(date, 15);
// }
// console.log('result', result)
// import moment from 'moment'
const moment = require("moment");
function calculate(endTime) {
let timeStops = [];
let timeopen = ["10", "00", "00"];
let dateOpen = new Date();
dateOpen.setHours(parseInt(timeopen[0]));
dateOpen.setMinutes(parseInt(timeopen[1]));
console.log("dateOpen", dateOpen);
let startTime = moment(dateOpen).add(
"m",
15 - (moment(dateOpen).minute() % 15)
);
while (startTime < endTime) {
timeStops.push(new moment(startTime));
startTime.add("m", 15);
}
return timeStops;
}
let timeclose = ["19", "30", "00"];
let dateClose = new Date();
dateClose.setHours(parseInt(timeclose[0]));
dateClose.setMinutes(parseInt(timeclose[1]));
console.log("dateClose", dateClose);
// const result = calculate(moment().add("h", 1));
const result = calculate(moment(dateClose));
console.log("result : ", result.length);
Source/b_beauty_project/src/views/LoginPage/index.js
View file @ cfaa58ab
...@@ -39,8 +39,7 @@ class Login extends Component { ...@@ -39,8 +39,7 @@ class Login extends Component {
return ( return (
<div> <div>
<div className="row center"> <div className="row center">
<br />
<br />
<div className="row mt-5 "> <div className="row mt-5 ">
<h2>เข้าสู่ระบบ</h2> <h2>เข้าสู่ระบบ</h2>
</div> </div>
...@@ -62,8 +61,8 @@ class Login extends Component { ...@@ -62,8 +61,8 @@ class Login extends Component {
onChange={this.handleChange} onChange={this.handleChange}
/> />
</div> </div>
<br></br>
<div> <div className="row mt-3 ">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="password" id="password"
...@@ -83,8 +82,8 @@ class Login extends Component { ...@@ -83,8 +82,8 @@ class Login extends Component {
onChange={this.handleChange} onChange={this.handleChange}
/> />
</div> </div>
<br></br>
<div> <div className="row mt-3 ">
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
...@@ -112,8 +111,10 @@ class Login extends Component { ...@@ -112,8 +111,10 @@ class Login extends Component {
this.props.history.push("/BeauticianShopPage"); this.props.history.push("/BeauticianShopPage");
} }
} }
alert("เข้าสู่ระบบสำเร็จ");
}) })
.catch(error => { .catch(error => {
alert("email หรือ password ไม่ถูกต้อง");
console.log(error); console.log(error);
}); });
// alert("ลงทะเบียนสำเร็จ"); // alert("ลงทะเบียนสำเร็จ");
...@@ -124,12 +125,8 @@ class Login extends Component { ...@@ -124,12 +125,8 @@ class Login extends Component {
</div> </div>
<br /> <br />
<br /> <br />
<div className="row center">
<h4> <div className="row center mt-5">
คุณลืมรหัสผ่าน ? <Link href="/">Forgot Password</Link>
</h4>
</div>
<div className="row center">
<h4> <h4>
คุณยังไม่ลงทะเบียน ? <Link href="/RegisterPage">ลงทะเบียน</Link> คุณยังไม่ลงทะเบียน ? <Link href="/RegisterPage">ลงทะเบียน</Link>
</h4> </h4>
......
Source/b_beauty_project/src/views/RigisterPage/index.js
View file @ cfaa58ab
...@@ -64,7 +64,7 @@ class RegisterPage extends Component { ...@@ -64,7 +64,7 @@ class RegisterPage extends Component {
id="name" id="name"
name="name" name="name"
value={name} value={name}
label="ชื่อ-สกุล" label="ชื่อ-สกุล*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -81,7 +81,7 @@ class RegisterPage extends Component { ...@@ -81,7 +81,7 @@ class RegisterPage extends Component {
id="email" id="email"
name="email" name="email"
value={email} value={email}
label="E_mail" label="E_mail*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -100,7 +100,7 @@ class RegisterPage extends Component { ...@@ -100,7 +100,7 @@ class RegisterPage extends Component {
id="password" id="password"
name="password" name="password"
value={password} value={password}
label="Password" label="Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
...@@ -119,7 +119,7 @@ class RegisterPage extends Component { ...@@ -119,7 +119,7 @@ class RegisterPage extends Component {
id="password2" id="password2"
name="password2" name="password2"
value={password2} value={password2}
label="Confirm-Password" label="Confirm-Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
......
Source/b_beauty_project/src/views/RigisterShopPage/index.js
View file @ cfaa58ab
...@@ -50,7 +50,7 @@ class RegisterShopPage extends Component { ...@@ -50,7 +50,7 @@ class RegisterShopPage extends Component {
id="name" id="name"
name="name" name="name"
value={name} value={name}
label="ชื่อ-สกุล" label="ชื่อ-สกุล*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -67,7 +67,7 @@ class RegisterShopPage extends Component { ...@@ -67,7 +67,7 @@ class RegisterShopPage extends Component {
id="email" id="email"
name="email" name="email"
value={email} value={email}
label="E_mail" label="E_mail*"
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
startAdornment: ( startAdornment: (
...@@ -86,7 +86,7 @@ class RegisterShopPage extends Component { ...@@ -86,7 +86,7 @@ class RegisterShopPage extends Component {
id="password" id="password"
name="password" name="password"
value={password} value={password}
label="Password" label="Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
...@@ -105,7 +105,7 @@ class RegisterShopPage extends Component { ...@@ -105,7 +105,7 @@ class RegisterShopPage extends Component {
id="password2" id="password2"
name="password2" name="password2"
value={password2} value={password2}
label="Confirm-Password" label="Confirm-Password*"
type="password" type="password"
autoComplete="current-password" autoComplete="current-password"
variant="outlined" variant="outlined"
......
Source/b_beauty_project/src/views/ShopPage/index.js
View file @ cfaa58ab
...@@ -21,7 +21,7 @@ import { ...@@ -21,7 +21,7 @@ import {
DialogTitle, DialogTitle,
InputAdornment, InputAdornment,
TextField, TextField,
InputBase InputBase,
} from "@material-ui/core"; } from "@material-ui/core";
import GoogleMapReact from "google-map-react"; import GoogleMapReact from "google-map-react";
import Marker from "./marker"; import Marker from "./marker";
...@@ -39,7 +39,7 @@ import MaterialTable from "material-table"; ...@@ -39,7 +39,7 @@ import MaterialTable from "material-table";
import moment from "moment"; import moment from "moment";
import "moment/locale/th"; import "moment/locale/th";
const styles = theme => ({ const styles = (theme) => ({
root: { root: {
minWidth: 275, minWidth: 275,
height: 150, height: 150,
...@@ -48,169 +48,169 @@ const styles = theme => ({ ...@@ -48,169 +48,169 @@ const styles = theme => ({
// The position fixed scoping doesn't work in IE 11. // The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others. // Disable this demo to preserve the others.
"@media all and (-ms-high-contrast: none)": { "@media all and (-ms-high-contrast: none)": {
display: "none" display: "none",
} },
}, },
bullet: { bullet: {
display: "inline-block", display: "inline-block",
margin: "0 2px", margin: "0 2px",
transform: "scale(0.8)" transform: "scale(0.8)",
}, },
title: { title: {
fontSize: 14 fontSize: 14,
}, },
pos: { pos: {
marginBottom: 12 marginBottom: 12,
}, },
modal: { modal: {
display: "flex", display: "flex",
padding: theme.spacing(1), padding: theme.spacing(1),
alignItems: "center", alignItems: "center",
justifyContent: "center" justifyContent: "center",
}, },
fab: { fab: {
position: "absolute", position: "absolute",
bottom: theme.spacing(2), bottom: theme.spacing(2),
right: theme.spacing(2) right: theme.spacing(2),
} },
}); });
const currencieslist = [ const currencieslist = [
{ {
value: "1", value: "1",
label: " กรุณาเลือกรายการ " label: " กรุณาเลือกรายการ ",
}, },
{ {
value: "2", value: "2",
label: "อบไอน้ำ 30 นาที" label: "อบไอน้ำ 30 นาที",
}, },
{ {
value: "3", value: "3",
label: "นวดหน้า 60 นาที " label: "นวดหน้า 60 นาที ",
}, },
{ {
value: "4", value: "4",
label: "สระได 20 นาที" label: "สระได 20 นาที",
}, },
{ {
value: "5", value: "5",
label: "ทำเล็บ 60 นาที" label: "ทำเล็บ 60 นาที",
}, },
{ {
value: "6", value: "6",
label: "ยืดผมถาวร 120 นาที" label: "ยืดผมถาวร 120 นาที",
}, },
{ {
value: "7", value: "7",
label: "ทำสีผม 60 นาที" label: "ทำสีผม 60 นาที",
} },
]; ];
const currencies = [ const currencies = [
{ {
value: "1", value: "1",
label: " กรุณาเลือกช่าง " label: " กรุณาเลือกช่าง ",
}, },
{ {
value: "2", value: "2",
label: "ช่าง ก" label: "ช่าง ก",
}, },
{ {
value: "3", value: "3",
label: "ช่าง ข" label: "ช่าง ข",
}, },
{ {
value: "4", value: "4",
label: "ช่าง ค" label: "ช่าง ค",
}, },
{ {
value: "5", value: "5",
label: "ช่าง ง" label: "ช่าง ง",
}, },
{ {
value: "6", value: "6",
label: "ช่าง จ" label: "ช่าง จ",
}, },
{ {
value: "7", value: "7",
label: "ช่าง" label: "ช่าง",
} },
]; ];
const currenciesreview = [ const currenciesreview = [
{ {
value: "1", value: "1",
label: " กรุณาเลือกหัวข้อการรีวิว " label: " กรุณาเลือกหัวข้อการรีวิว ",
}, },
{ {
value: "2", value: "รีวิวช่าง",
label: "รีวิวช่าง" label: "รีวิวช่าง",
}, },
{ {
value: "3", value: "รีวิวร้าน",
label: "รีวิวร้าน" label: "รีวิวร้าน",
}, },
{ {
value: "4", value: "การให้บริการ",
label: "การให้บริการ" label: "การให้บริการ",
}, },
{ {
value: "5", value: "การต้อนรับ",
label: "การต้อนรับ" label: "การต้อนรับ",
}, },
{ {
value: "6", value: "บรรยากาศ",
label: "บรรยากาศ" label: "บรรยากาศ",
}, },
{ {
value: "7", value: "อื่นๆ",
label: "อื่นๆ" label: "อื่นๆ",
} },
]; ];
const currenciespoint = [ const currenciespoint = [
{ {
value: "1", value: "0",
label: " กรุณาเลือกคะแนน " label: " กรุณาเลือกคะแนน ",
}, },
{ {
value: "2", value: "0.5",
label: "0.5" label: "0.5",
}, },
{ {
value: "3", value: "1",
label: "1" label: "1",
}, },
{ {
value: "4", value: "1.5",
label: "1.5" label: "1.5",
}, },
{ {
value: "5", value: "2",
label: "2" label: "2",
}, },
{ {
value: "6", value: "2.5",
label: "2.5" label: "2.5",
}, },
{ {
value: "7", value: "3",
label: "3" label: "3",
}, },
{ {
value: "8", value: "3.5",
label: "3.5" label: "3.5",
}, },
{ {
value: "9", value: "4",
label: "4" label: "4",
}, },
{ {
value: "10", value: "4.5",
label: "4.5" label: "4.5",
}, },
{ {
value: "11", value: "5",
label: "5" label: "5",
} },
]; ];
class ShopPage extends Component { class ShopPage extends Component {
state = { state = {
...@@ -220,89 +220,92 @@ class ShopPage extends Component { ...@@ -220,89 +220,92 @@ class ShopPage extends Component {
// open: true, // open: true,
open: false, open: false,
shop: null, shop: null,
reviwe: { review: {
topic: "", topic: null,
nameeng: "", message: null,
point: "" point: null,
}, },
columns: [{ title: "เวลา", field: "time" }], columns: [{ title: "เวลา", field: "time" }],
columnslist: [ columnslist: [
{ title: "ชื่อรายการ", field: "name" }, { title: "ชื่อรายการ", field: "name" },
{ title: "ราคา", field: "price" }, { title: "ราคา", field: "price" },
{ title: "เวลาที่จอง", field: "time" } { title: "เวลาที่จอง", field: "time" },
], ],
data: [], data: [],
selectedRow: null, selectedRow: null,
datalist: [] datalist: [],
}; };
handleClickOpenreview = () => { handleClickOpenreview = () => {
this.setState({ this.setState({
reviweOpen: true reviweOpen: true,
}); });
}; };
handleClosereview = () => { handleClosereview = () => {
this.setState({ this.setState({
reviweOpen: false reviweOpen: false,
}); });
}; };
handleClickOpenQ = () => { handleClickOpenQ = () => {
this.setState({ this.setState({
open: true open: true,
}); });
}; };
handleCloseQ = () => { handleCloseQ = () => {
this.setState({ this.setState({
open: false open: false,
}); });
}; };
handleSaveQ = () => { handleSaveQ = () => {
this.setState({ this.setState({
open: false open: false,
}); });
}; };
ClickOpen = () => { ClickOpen = () => {
this.setState({ this.setState({
list: true list: true,
}); });
}; };
Close = () => { Close = () => {
this.setState({ this.setState({
list: false list: false,
}); });
}; };
handleChange = event => { handleChange = (event) => {
let { shop } = this.state; let { review } = this.state;
console.log("name : ", event.target.name); console.log("name : ", event.target.name);
console.log("value : ", event.target.value); console.log("value : ", event.target.value);
shop[event.target.name] = event.target.value; review[event.target.name] = event.target.value;
this.setState({ this.setState({
shop review,
}); });
}; };
handleChangeDate = newDate => { handleChangeDate = (newDate) => {
console.log("newDate: ", newDate); console.log("newDate: ", newDate);
this.setState({ this.setState({
date: newDate date: newDate,
}); });
}; };
componentDidMount = async () => { componentDidMount = async () => {
const { location } = this.props; const { location, userInfo } = this.props;
const id = location.state.id; const id = location.state.id;
const response = await axios.get( const response1 = await axios.get(
`http://localhost:9000/api/shop/getShopId/${id}` `http://localhost:9000/api/shop/getShopId/${id}`
// `http://localhost:9000/api/list//getListshop/${id}`
); );
console.log("response", response.data); const response2 = await axios.get(
let { timeopen, timeclose } = response.data; `http://localhost:9000/api/list/getListshop/${id}`
);
console.log("response", response1.data);
console.log("response", response2.data);
let { timeopen, timeclose } = response1.data;
timeopen = timeopen.split(":"); timeopen = timeopen.split(":");
timeclose = timeclose.split(":"); timeclose = timeclose.split(":");
let dateClose = new Date(); let dateClose = new Date();
...@@ -310,21 +313,13 @@ class ShopPage extends Component { ...@@ -310,21 +313,13 @@ class ShopPage extends Component {
dateClose.setMinutes(parseInt(timeclose[1])); dateClose.setMinutes(parseInt(timeclose[1]));
const result = this.calculate(moment(dateClose), timeopen); 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({ this.setState({
shop: response.data, shop: response1.data,
data: result data: result,
datalist: response2.data
}); });
// console.log(this.state.shop);
}; };
calculate = (endTime, timeopen) => { calculate = (endTime, timeopen) => {
...@@ -339,7 +334,7 @@ class ShopPage extends Component { ...@@ -339,7 +334,7 @@ class ShopPage extends Component {
while (startTime < endTime) { while (startTime < endTime) {
timeStops.push({ timeStops.push({
time: new moment(startTime).format("LT") time: new moment(startTime).format("LT"),
}); });
startTime.add("m", 15); startTime.add("m", 15);
} }
...@@ -348,11 +343,11 @@ class ShopPage extends Component { ...@@ -348,11 +343,11 @@ class ShopPage extends Component {
}; };
render() { render() {
const { classes } = this.props; const { classes, userInfo } = this.props;
const bull = <span className={classes.bullet}>•</span>; const bull = <span className={classes.bullet}>•</span>;
const { const {
shop, shop,
reviwe, review,
reviweOpen, reviweOpen,
list, list,
date, date,
...@@ -361,7 +356,7 @@ class ShopPage extends Component { ...@@ -361,7 +356,7 @@ class ShopPage extends Component {
data, data,
datalist, datalist,
selectedRow, selectedRow,
columnslist columnslist,
} = this.state; } = this.state;
return ( return (
...@@ -379,7 +374,7 @@ class ShopPage extends Component { ...@@ -379,7 +374,7 @@ class ShopPage extends Component {
{shop.address} {shop.address}
</div> </div>
</div> </div>
<div className="row mt-4 mb-2"> <div c>
<div className="col s12 m6 l8"> <div className="col s12 m6 l8">
<div className="row center"> <div className="row center">
<img <img
...@@ -413,7 +408,7 @@ class ShopPage extends Component { ...@@ -413,7 +408,7 @@ class ShopPage extends Component {
columns={columnslist} columns={columnslist}
data={datalist} data={datalist}
options={{ options={{
selection: false selection: false,
}} }}
/> />
</div> </div>
...@@ -449,7 +444,7 @@ class ShopPage extends Component { ...@@ -449,7 +444,7 @@ class ShopPage extends Component {
<div className="col s12 m5"> <div className="col s12 m5">
<div <div
style={{ style={{
maxWidth: "fit-content" maxWidth: "fit-content",
}} }}
> >
<DatePicker <DatePicker
...@@ -467,7 +462,7 @@ class ShopPage extends Component { ...@@ -467,7 +462,7 @@ class ShopPage extends Component {
<Typography> <Typography>
วันที่ที่เลือกคือ{" "} วันที่ที่เลือกคือ{" "}
{format(new Date(date), "dd MMMM yyyy", { {format(new Date(date), "dd MMMM yyyy", {
locale: th locale: th,
})} })}
</Typography> </Typography>
<div className="mt-2"> <div className="mt-2">
...@@ -479,10 +474,10 @@ class ShopPage extends Component { ...@@ -479,10 +474,10 @@ class ShopPage extends Component {
id="list" id="list"
name="list" name="list"
select select
label="เลือกรายการ" label="เลือกรายการ*"
onChange={this.handleChange} onChange={this.handleChange}
SelectProps={{ SelectProps={{
native: true native: true,
}} }}
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -490,15 +485,15 @@ class ShopPage extends Component { ...@@ -490,15 +485,15 @@ class ShopPage extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<ListIcon /> <ListIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
> >
{currencieslist.map(option => ( {datalist.map((datalist) => (
<option <option
key={option.value} key={datalist.id}
value={option.value} value={datalist.id}
> >
{option.label} {datalist.name}
</option> </option>
))} ))}
</TextField> </TextField>
...@@ -509,10 +504,10 @@ class ShopPage extends Component { ...@@ -509,10 +504,10 @@ class ShopPage extends Component {
id="list" id="list"
name="list" name="list"
select select
label="เลือกช่าง" label="เลือกช่าง*"
onChange={this.handleChange} onChange={this.handleChange}
SelectProps={{ SelectProps={{
native: true native: true,
}} }}
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -520,10 +515,10 @@ class ShopPage extends Component { ...@@ -520,10 +515,10 @@ class ShopPage extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<AssignmentIndIcon /> <AssignmentIndIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
> >
{currencies.map(option => ( {currencies.map((option) => (
<option <option
key={option.value} key={option.value}
value={option.value} value={option.value}
...@@ -547,14 +542,14 @@ class ShopPage extends Component { ...@@ -547,14 +542,14 @@ class ShopPage extends Component {
search: false, search: false,
showTitle: false, showTitle: false,
toolbar: false, toolbar: false,
rowStyle: rowData => ({ rowStyle: (rowData) => ({
backgroundColor: backgroundColor:
this.state.selectedRow && this.state.selectedRow &&
this.state.selectedRow.tableData.id === this.state.selectedRow.tableData.id ===
rowData.tableData.id rowData.tableData.id
? "#EEE" ? "#EEE"
: "#FFF" : "#FFF",
}) }),
}} }}
/> />
</div> </div>
...@@ -589,11 +584,11 @@ class ShopPage extends Component { ...@@ -589,11 +584,11 @@ class ShopPage extends Component {
<div style={{ height: "50vh", width: "100%" }}> <div style={{ height: "50vh", width: "100%" }}>
<GoogleMapReact <GoogleMapReact
bootstrapURLKeys={{ bootstrapURLKeys={{
key: "AIzaSyBJWuQmrf6UgrkGbMJF6-m1GwTZrazBFBo" key: "AIzaSyBJWuQmrf6UgrkGbMJF6-m1GwTZrazBFBo",
}} }}
defaultCenter={{ defaultCenter={{
lat: shop.lat * 1, lat: shop.lat * 1,
lng: shop.lng * 1 lng: shop.lng * 1,
}} }}
defaultZoom={16} defaultZoom={16}
> >
...@@ -619,44 +614,20 @@ class ShopPage extends Component { ...@@ -619,44 +614,20 @@ class ShopPage extends Component {
</div> </div>
<div className="row mt-2 mb-2"> <div className="row mt-2 mb-2">
<div className="col s12 m6 l7"> <div className="col s12 m5 l7">
<div className="row center"> <div className="row center">
<h4>ผลงานช่าง ปิยพร อาภรศรี</h4> <h4>ผลงานช่าง ปิยพร อาภรศรี</h4>
<div className="col s12 m6 l4"> <div className="col s12 m12 l6 mb-5">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
</div> </div>
<div className="col s12 m6 l4"> <div className="col s12 m12 l6 mb-5">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
</div> </div>
</div> </div>
</div> </div>
<div className="col s12 m6 l1"></div> <div className="col s12 m1 l1"></div>
<div className="col s12 m6 l4"> <div className="col s12 m6 l4">
<div className="row">
<center></center>
</div>
<div className="row">
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
<h3>โปรโมชั่น</h3>
</Typography>
<Typography variant="body2" component="p">
<h4> จองคิวผ่าน B Beauty ลด 5 %</h4>
{'"12/02/2020 18:00"'}
</Typography>
</CardContent>
{/* <CardActions>
<Button size="small">Learn More</Button>
</CardActions> */}
</Card>
</div>
<div className="row"> <div className="row">
<Card className={classes.root} variant="outlined"> <Card className={classes.root} variant="outlined">
<CardHeader <CardHeader
...@@ -723,16 +694,17 @@ class ShopPage extends Component { ...@@ -723,16 +694,17 @@ class ShopPage extends Component {
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="alert-dialog-slide-description"> <DialogContentText id="alert-dialog-slide-description">
<div className={classes.root}> <div className="row mt-4 mb-2">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="topic" id="topic"
name="topic" name="topic"
value={review.topic}
select select
label="หัวข้อรีวิว" label="หัวข้อรีวิว"
onChange={this.handleChange} onChange={this.handleChange}
SelectProps={{ SelectProps={{
native: true native: true,
}} }}
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -740,25 +712,45 @@ class ShopPage extends Component { ...@@ -740,25 +712,45 @@ class ShopPage extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<ListIcon /> <ListIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
> >
{currenciesreview.map(option => ( {currenciesreview.map((option) => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</option> </option>
))} ))}
</TextField> </TextField>
<br /> <br /> </div>
<div className="row mt-4 mb-2">
<TextField
className={classes.margin}
id="message"
name="message"
value={review.message}
label="ข้อความรีวิว"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
{/* <AccountCircle /> */}
</InputAdornment>
),
}}
onChange={this.handleChange}
/>
</div>
<div className="row mt-4 mb-2">
<TextField <TextField
className={classes.margin} className={classes.margin}
id="point" id="point"
name="point" name="point"
value={review.point}
select select
label="คะแนน" label="คะแนน"
onChange={this.handleChange} onChange={this.handleChange}
SelectProps={{ SelectProps={{
native: true native: true,
}} }}
variant="outlined" variant="outlined"
InputProps={{ InputProps={{
...@@ -766,40 +758,52 @@ class ShopPage extends Component { ...@@ -766,40 +758,52 @@ class ShopPage extends Component {
<InputAdornment position="start"> <InputAdornment position="start">
<ListIcon /> <ListIcon />
</InputAdornment> </InputAdornment>
) ),
}} }}
> >
{currenciespoint.map(option => ( {currenciespoint.map((option) => (
<option key={option.value} value={option.value}> <option key={option.value} value={option.value}>
{option.label} {option.label}
</option> </option>
))} ))}
</TextField> </TextField>
<br /> <br />
<TextField
className={classes.margin}
id="messagee"
name="messagee"
// value={shop.name}
label="ข้อความรีวิว"
variant="outlined"
InputProps={{
startAdornment: (
<InputAdornment position="start">
{/* <AccountCircle /> */}
</InputAdornment>
)
}}
onChange={this.handleChange}
/>
</div> </div>
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={this.handleClickOpenreview} color="primary"> <Button
onClick={this.handleCloserevie}
color="primary"
>
ยกเลิก ยกเลิก
</Button> </Button>
<Button onClick={this.handleClickOpenreview} color="primary"> <Button
onClick={() => {
if(userInfo.id){
axios
.post("http://localhost:9000/api/review/add", {
...review,
shop: shop.id,
userID: userInfo.id,
})
.then((response) => {
console.log("เขียนรีวิวสำเร็จ", response);
alert("เขียนรีวิวสำเร็จ");
})
.catch((error) => {
console.log(error);
alert("คุณยังไม่ได้ทำการ login ");
this.props.history.push("/LoginPage");
});
}
else{
alert("คุณยังไม่ได้ทำการ login ");
this.props.history.push("/LoginPage");
}
}}
color="primary"
>
ยันยัน ยันยัน
</Button> </Button>
</DialogActions> </DialogActions>
...@@ -814,11 +818,11 @@ class ShopPage extends Component { ...@@ -814,11 +818,11 @@ class ShopPage extends Component {
} }
} }
const mapStateToProps = state => ({ const mapStateToProps = (state) => ({
userInfo: state.user userInfo: state.user,
}); });
const mapDispatchToProps = dispatch => {}; const mapDispatchToProps = (dispatch) => {};
export default connect( export default connect(
mapStateToProps, mapStateToProps,
......
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