\chapter{การติดตั้งเครื่องมือที่ใช้พัฒนาโปรแกรม}
การติดตั้งเครื่องมือที่ใช้ในการพัฒนาเว็บแนะนำและสร้างแผนการท่องเที่ยว  มีโปรแกรมที่จำเป็นในการพัฒนาระบบดังต่อไปนี้
\begin{itemize}
	\item การติดตั้ง VisualStudioCode
	\item การติดตั้ง XAMPP
\end{itemize}

\section{การติดตั้ง Visual Studio Code}
\begin{enumerate}
	\item สามารถดาวน์โหลด VisualStudioCodeได้ที่https://code.visualstudio.com/download ดังแสดงในรูปที่ \ref{Fig:VisualStudioCode1}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/1}
		\caption{หน้าเว็บดาวน์โหลด Visual Studio Code}
		\label{Fig:VisualStudioCode1}
	\end{figure}
	\newpage
	\item   แสดงหน้าต่างต้อนรับของ Visual Studio Codeทำการกด Next เพื่อเริ่มกระบวนการติดตั้ง ดังแสดงในรูปที \ref{Fig:VisualStudioCode2}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/2}
		\caption{หน้าต่างต้อนรับของ Visual Studio Code}
		\label{Fig:VisualStudioCode2}
	\end{figure}
	
	\item   แสดงหน้าต่างข้อตกลงการใช้งาน Visual Studio Code ทำการกด IAgree ดังแสดงในรูปที่  \ref{Fig:VisualStudioCode3}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/3}
		\caption{หน้าต่างข้อตกลงการใช้งาน Visual Studio Code}
		\label{Fig:VisualStudioCode3}
	\end{figure}
	
	\item   แสดงหน้าต่างที่จัดเก็บไฟล์ต่างๆของ Visual Studio Codeทำการกด Next ดังแสดงในรูปที
	 \ref{Fig:VisualStudioCode4}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/4}
		\caption{หน้าต่างที่จัดเก็บไฟล์ต่างๆของ Visual Studio Code}
		\label{Fig:VisualStudioCode4}
	\end{figure}
	
	\item  แสดงหน้าต่างเริ่มทำการติดตั้งทำการกด Install ดังแสดงในรูปที \ref{Fig:VisualStudioCode5}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/5}
		\caption{หน้าต่างติดตั้งโปรแกรม Visual Studio Code}
		\label{Fig:VisualStudioCode5}
	\end{figure}
	
	\item แสดงหน้าต่างผลการติดตั้ง Visual Studio Code ดังแสดงในรูปที \ref{Fig:VisualStudioCode6}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/6}
		\caption{ หน้าต่างผลการติดตั้ง Android Studio}
		\label{Fig:VisualStudioCode6}
	\end{figure}
	
\end{enumerate}
	\newpage
\section{การติดตั้ง XAMPP }
\begin{enumerate}
	\item สามารถดาวน์โหลด XAMPP ได้ที่ https://www.apachefriends.org/index.html ดังแสดง ในรูปที \ref{Fig:XAMPP1}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/x1}
		\caption{หน้าเว็บดาวน์โหลด XAMPP}
		\label{Fig:XAMPP1}
	\end{figure}
	\newpage
	\item แสดงหน้าต่างติดตั้ง (setup) ของ XAMPP ทำการกด Next เพื่อเริ่มกระบวนการติดตั้งดัง แสดงในรูปที \ref{Fig:XAMPP2}
	\begin{figure}[H]
		\includegraphics[width=\columnwidth]{Figures/7/x2}
		\caption{หน้าสำหรับติดตั้ง XAMPP}
		\label{Fig:XAMPP2}
	\end{figure}
		\newpage
	\item  แสดงหน้าต่างทำการเลือก Components ที่เราต้องการใช้งาน XAMPP และกด Next ดัง แสดงในรูปที่
	 \ref{Fig:XAMPP3}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/x3}
		\caption{หน้าต่างเลือก Components ที่ต้องการใช้งาน XAMPP}
		\label{Fig:XAMPP3}
	\end{figure}
	\newpage
	\item แสดงหน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้งและกด Next ดังแสดงในรูปที  \ref{Fig:XAMPP4}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/x4}
		\caption{หน้าต่างเลือกโฟลเดอร์ที่จะทำการติดตั้ง XAMPP}
		\label{Fig:XAMPP4}
	\end{figure}
	
	\item แสดงหน้าต่างติดตั้งเสร็จสิ้นและทำการกด Finish เพื่อจบการติดตั้งดังแสดงในรูปที \ref{Fig:XAMPP5}
	\begin{figure}[H]
		\centering
		\includegraphics[width=0.7\columnwidth]{Figures/7/x5}
		\caption{หน้าต่างเสร็จสิ้นการติดตั้ง XAMPP}
		\label{Fig:XAMPP5}
	\end{figure}
	
	
