\chapter{การพัฒนาระบบ}
หลังจากที่ได้มีการเตรียมความพร้อมสำหรับการพัฒนาในด้านต่าง ไม่ว่าจะเป็นที่มาและความสำคัญของปัญหา เทคโนโลยีที่มีความเหมาะสมกับระบบ และการออกแบบระบบการทำงานรวมไปถึงโครงสร้างของข้อมูล ในบทนี้จะเป็นการพูดถึงการสร้างระบบที่ได้มีการออกแบบไว้ โดย
การพัฒนาระบบท่องเที่ยวอีสาน ถูกพัฒนาขึ้นด้วย Laravel Framework มีรายละเอียดดังนี้
	
\section{โครงสร้างของ loginController}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$user = $request->input('username');
$pass = $request->input('password');
$admin = User::where('username', 'admin')->first()->toArray();
if ($user == $admin["username"] && $pass == $admin["password"]) {
session()->put('login', true);
return Redirect::to('/admin');
} else {
session()->flash('loginFail', 'fail');
return Redirect::to('/adminlogin');
}
		\end{lstlisting}}
	\caption{function login}
	\label{Fig:functionLogin}
\end{figure}
จากภาพที่ \ref{Fig:functionLogin} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1	 เป็นการรับค่าอินพุตจาก username มาเก็บในตัวแปร user
	\item บรรทัดที่ 2 	 เป็นการรับค่าอินพุตจาก password มาเก็บในตัวแปร pass
	\item บรรทัดที่ 3 	 เป็นดึงข้อมูล admin มาเก็บในตัวแปร admin 
	\item บรรทัดที่ 4-6   เป็นการตรวจสอบการ login และอัพเดทสถานการณ์ login
	\item บรรทัดที่ 7-9  	 เป็นการอัพเดทสถานะเข้าสู่ระบบไม่สำเร็จ
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
		if (Session::has('login')) {
		return Redirect::to('admin');
		} else
		return view('login');
		\end{lstlisting}}
	\caption{function checklogin}
	\label{Fig:functionCheckLogin}
\end{figure}
จากภาพที่ \ref{Fig:functionCheckLogin} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-2	เป็นการตรวจสอบการ login ถ้ามีการloginแล้วให้ทำการไปหน้า admin
	\item บรรทัดที่ 3-4 	เป็นการตรวจสอบถ้ายังไม่มีการ login ให้ไปหน้า login
	
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
		$request->session()->forget('login');
		return Redirect::to('/');
		\end{lstlisting}}
	\caption{function logout}
	\label{Fig:functionLogout}
\end{figure}
จากภาพที่ \ref{Fig:functionLogout} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-2	เป็นการลบสถานะการ login และกลับไปหน้าแรก
	
	
\end{itemize}
\section{โครงสร้างของหน้า login}
	\begin{figure}[H]
		{\setstretch{1.0}\begin{lstlisting}
<div class="card text-white bg-dark mb-3" style="width: 25rem;">
<center>
<div class="card-header">
Login
</div>
</center>
<div class="card-body">
@if(Session::has('loginFail'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
username หรือ password ไม่ถูกต้อง
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@else
@endif
<form action="{{route('loginController.login')}}" method="post">
{{csrf_field()}}
<div class="form-col">
<div class="form-group">
<label for="username" class="card-text">Username:</label><br>
<input type="text" name="username" id="username" class="form-control" required>
</div>
<div class="form-group">
<label for="password" class="card-text">Password:</label><br>
<input type="password" name="password" id="password" class="form-control">
</div>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
</form>
</div>
</div>
			\end{lstlisting}}
		\caption{ไฟล์ login.blade.php}
		\label{Fig:login}
	\end{figure}
	จากภาพที่ \ref{Fig:login} โครงสร้างของไฟล์ login.blade.php สามารถอธิบายการทำงานได้ดังนี้
	\begin{itemize}[label={--}]
		\item บรรทัดที่  1	   เป็นการสร้างการ์ด
		\item บรรทัดที่  3 -5  เป็นการกำหนดส่วนหัวของการ์ด
		\item บรรทัดที่  8 -16 เป็นการแสดงข้อความกรณีเข้าสู่ระบบไม่สำเร็จ
		\item บรรทัดที่  17 -30 เป็นการสร้างฟอร์มกรอกข้อมูล
		\item บรรทัดที่  20 -23 เป็นการสร้างช่องสำหรับกรอก username
		\item บรรทัดที่  24 -27 เป็นการสร้างช่องกรอก password
		\item บรรทัดที่  28    เป็นการสร้างปุ่ม submit
	\end{itemize}

\section{โครงสร้างหน้า admin}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<script>
$(document).ready(function() {
$('.delete').on('submit', function() {
if (confirm("ยืนยันการลบ ?")) {
return true;
} else {
return false;
}
});
});
</script>

		\end{lstlisting}}
	\caption{การยืนยันการลบข้อมูล}
	\label{Fig:admin1}
\end{figure}
จากภาพที่ \ref{Fig:admin1} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 3  เป็นการตรวจสอบว่ามีการกดปุ่มหรือไม่
	\item บรรทัดที่ 4-5  กรณียืนยันการลบจะ return true เพื่อทำงานลบ
	\item บรรทัดที่ 6-7  กรณีไม่ยืนยันการลบจะ return false	
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
@if(Session::has('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
ลบข้อมูลแล้ว
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
<div class="card">
<table style="width:100%" class="table">
<tr>
<th scope="col">รหัสจังหวัด</th>
<th scope="col">ชื่อจังหวัด</th>
<th></th>
</tr>
@foreach ($provinces as $province)
<tr>
<td>{{$province["provinces_id"]}}</td>
<td>{{$province["provinces_name"]}}</td>
<form class="delete" action="{{ route('adminController.deleteProvince') }}" method="post">
{{csrf_field()}}
<input type="hidden" name="province_id" value={{$province["provinces_id"]}}>
<td><input type="submit" class="btn btn-danger" value="ลบ"></td>
</form>
<form action="{{ route('adminController.search') }}" method="get">
<input type="hidden" name="province_id" value={{$province["provinces_id"]}}>
<td><input type="submit" class="btn btn-primary" value="ค้นหา"></td>
</form>
</tr>
@endforeach
</table>
</div>
		\end{lstlisting}}
	\caption{โครงสร้างหน้า admin}
	\label{Fig:admin2}
\end{figure}
จากภาพที่ \ref{Fig:admin2} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-8  เป็นการแสดงแจ้งเตือนการลบสำเร็จ
	\item บรรทัดที่ 10-31  เป็นการสร้างตาราง
	\item บรรทัดที่ 16-30  เป็นการแสดงรายชื่อจังหวัด
	\item บรรทัดที่ 20-24  เป็นการสร้างปุ่มลบ
	\item บรรทัดที่ 25-28  เป็นการสร้างปุ่มค้นหา	
\end{itemize}
\section{โครงสร้างของ adminController}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$province = new Province([
'provinces_id' => $request->input('province_id'),
'provinces_name' => $request->input('province_name')
]);
$province->timestamps = false;
$province->save();
session()->flash('inserted', 'success');
return Redirect::to('/admin/insert');
		\end{lstlisting}}
	\caption{function insertProvince}
	\label{Fig:adminControllerInsertProvince}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerInsertProvince} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-4  เป็นการรับค่าที่อินพุตเข้ามา
	\item บรรทัดที่ 5  เป็นคำสั่งกำหนดว่าไม่ทำการบันทึกเวลาการเพิ่มข้อมูล
	\item บรรทัดที่ 6  เป็นการบันทึกข้อมูล
	\item บรรทัดที่ 7-8 เป็นการส่งแจ้งเตือนการเพิ่มสำเร็จ	
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$attraction_id = $request->input('attraction_id');
$attractions = Attraction::where('attractions_id', $attraction_id)->get()->toArray();
return view('update')->with('attractions', $attractions);
		\end{lstlisting}}
	\caption{function edit}
	\label{Fig:adminControllerEdit}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerEdit} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1  เป็นการรับค่าจากอินพุต
	\item บรรทัดที่ 2  เป็นการดึงข้อมูลสถานที่ท่องเที่ยวที่มี id เท่ากับค่าอินพุต
	\item บรรทัดที่ 3  เป็นการส่งค่าที่ได้ไปแสดงหน้าอัพเดท
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$province_id = $request->input('province_id');
$attractions = Attraction::where('provinces_id', $province_id)->get()->toArray();
return view('adminsearch')
->with('attractions', $attractions);
		\end{lstlisting}}
	\caption{function search}
	\label{Fig:adminControllerSearch}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerSearch} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1  เป็นการรับค่าจากอินพุต
	\item บรรทัดที่ 2  เป็นการดึงข้อมูลสถานที่ท่องเที่ยวที่มี id เท่ากับค่าอินพุต
	\item บรรทัดที่ 3  เป็นการส่งค่าที่ได้ไปแสดงหน้า adminsearch
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$attraction_id = $request->input('attraction_id');
$data = Attraction::where('attractions_id',$attraction_id)->get()->toArray();
$data_img = $data[0]['image_url'];
$pics = explode("|",$data_img);
foreach ($pics as $pic) {
if(file_exists(public_path('upload/'.$pic))){
unlink(public_path('upload/'.$pic));
}}
$attraction = Attraction::where('attractions_id', $attraction_id);
$attraction->delete();
session()->flash('success', 'success');
return Redirect::back();
		\end{lstlisting}}
	\caption{function deleteAttraction}
	\label{Fig:adminControllerDeleteAttraction}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerDeleteAttraction} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1  เป็นการรับค่าจากอินพุต
	\item บรรทัดที่ 2-3  เป็นการดึงข้อรูปภาพของสถานที่
	\item บรรทัดที่ 4  เป็นการแยก string
	\item บรรทัดที่ 5-8  เป็นการลบรูปภาพ
	\item บรรทัดที่ 9-10 เป็นการลบข้อมูลในฐานข้อมูล
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$this->validate($request,[
'image' => 'required',
'image.*' => 'image|mimes:jpeg,png,jpg|max:2048'
]);
$attraction_id = $request->input('attractions_id');
$data = Attraction::where('attractions_id',$attraction_id)->get()->toArray();
$data_img = $data[0]['image_url'];
$pics = explode("|",$data_img);
foreach ($pics as $pic) {
if(file_exists(public_path('upload/'.$pic))){
unlink(public_path('upload/'.$pic));
}
}
if ($request->hasFile('image')) {
$files = $request->file('image');
foreach($files as $file){
$filename=$file->getClientOriginalName();
$file->move('upload',$filename);
$images[]=$filename;
}
$data=implode("|",$images);
}
Attraction::where('attractions_id', $attraction_id)
->update([
'attractions_name' => $request->input('attractions_name'),
'Latitude' => $request->input('lat'),
'longitude' => $request->input('lng'),
'description' => $request->input('description'),
'image_url' => $data
]);
session()->flash('success', 'success');
return Redirect::back();
		\end{lstlisting}}
	\caption{function update}
	\label{Fig:adminControllerUpdate}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerUpdate} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-4  เป็นการตรวจสอบไฟล์ที่อินพุตเข้ามา
	\item บรรทัดที่ 5  เป็นการรับค่าจากอินพุต
	\item บรรทัดที่ 6  เป็นการดึงข้อมูลสถานที่ท่องเที่ยวจากฐานข้อมูล
	\item บรรทัดที่ 7  เป็นการดึงรูปภาพจากฐานข้อมูล
	\item บรรทัดที่ 8  เป็นการแยก string
	\item บรรทัดที่ 9-13   เป็นการลบรูปภาพใน folder upload
	\item บรรทัดที่ 14-21  เป็นการเพิ่มรูปภาพใน folder upload
	\item บรรทัดที่ 23-30  เป็นการอัพเดทข้อมูลลงฐานข้อมูล
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$province_id = $request->input('province_id');
$attraction = Attraction::where('provinces_id', $province_id)->get()->toArray();
for ($i=0; $i < count($attraction); $i++) {
$data = $attraction[$i];
$data_img = $data['image_url'];
$pics = explode("|",$data_img);
foreach ($pics as $pic) {
if(file_exists(public_path('upload/'.$pic))){
unlink(public_path('upload/'.$pic));
}
}
}
$attractions = Attraction::where('provinces_id', $province_id);
$attractions->delete();
$province = Province::where('provinces_id', $province_id);
$province->delete();
session()->flash('success', 'success');
return Redirect::to('/admin');
		\end{lstlisting}}
	\caption{function deleteProvince}
	\label{Fig:adminControllerDeleteProvince}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerDeleteProvince} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1  เป็นการรับค่า province\_id จากอินพุต
	\item บรรทัดที่ 2  เป็นการดึงข้อมูลสถานที่ท่องเที่ยวจากฐานข้อมูล
	\item บรรทัดที่ 3-12  เป็นการลบข้อมูลรูปภาพใน folder upload
	\item บรรทัดที่ 13-14 เป็นการลบข้อมูลสถานที่ท่องเที่ยวออกจากฐานข้อมูล
	\item บรรทัดที่ 15-16 เป็นการลบข้อมูลจังหวัดอกจากฐานข้อมูล
	\item บรรทัดที่ 17-18 เป็นการส่งแจ้งเตือนการลบสำเร็จพร้อมกลับไปยังหน้า admin
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$this->validate($request,[
'image' => 'required',
'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'
]);
if ($request->hasFile('image')) {
$files = $request->file('image');
foreach($files as $file){
$filename=$file->getClientOriginalName();
$file->move('upload',$filename);
$images[]=$filename;
}
$data=implode("|",$images);
}
$attraction = new Attraction([
'provinces_id' => $request->input('province_id'),
'attractions_name' => $request->input('attractions_name'),
'Latitude' => $request->input('lat'),
'longitude' => $request->input('lng'),
'description' => $request->input('description'),
'image_url' => $data
]);
$attraction->timestamps = false;
$attraction->save();
session()->flash('inserted', 'success');
return Redirect::to('/admin/insert');
		\end{lstlisting}}
	\caption{function insertAttraction}
	\label{Fig:adminControllerInsertAttraction}
\end{figure}
จากภาพที่ \ref{Fig:adminControllerInsertAttraction} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-4  เป็นการตรวจสอบไฟล์ที่อินพุตเข้ามา
	\item บรรทัดที่ 5-13  เป็นการเพิ่มรูปภาพลงใน folder upload
	\item บรรทัดที่ 14-21 เป็นการกำหนดค่าที่จะบันทึกลงในฐานข้อมูล
	\item บรรทัดที่ 22  เป็นการกำหนดค่าไม่บันทึกเวลาลงข้อมูล
	\item บรรทัดที่ 23   เป็นการบันทึกข้อมูล
	\item บรรทัดที่ 24-25 เป็นการส่งแจ้งเตือนการบันทึกสำเร็จ
\end{itemize}
\section{โครงสร้างของหน้า adminsearch}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">Travel</a>
<form class="form-inline">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a href="/admin" class="dropdown-item">หน้าแรก</a>
<a class="dropdown-item" href="/admin/insert">เพิ่มข้อมูล</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/admin/logout">Log out</a>
</div>
</div>
</form>
</nav>
@if(Session::has('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
success
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
@endif
		\end{lstlisting}}
	\caption{การสร้าง navbar หน้า adminsearch}
	\label{Fig:adminsearch}
\end{figure}
จากภาพที่ \ref{Fig:adminsearch} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-16 เป็นการสร้าง navbar
	\item บรรทัดที่ 2    เป็นการสร้างลิงค์ไปหน้าค้นหาสถานที่ท่องเที่ยว
	\item บรรทัดที่ 4-14 เป็นการ dropdown
	\item บรรทัดที่ 17-24 เป็นการตรวจสอบสถานะการลบ ถ้าลบสำเร็จจะทำการแสดงข้อความ success
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="card">
@if($attractions!=null)
<table style="width:100%" class="table">
<tr>
<th scope="col">รหัสสถานที่ท่องเที่ยว</th>
<th scope="col">ชื่อสถานที่ท่องเที่ยว</th>
<th></th>
</tr>
@foreach ($attractions as $attraction)
<tr>
<td>{{$attraction["attractions_id"]}}</td>
<td>{{$attraction["attractions_name"]}}</td>
<form action="{{route('adminController.deleteAttraction')}}" method="post">
{{csrf_field()}}
<input type="hidden" name="attraction_id" value={{$attraction["attractions_id"]}}>
<td><input type="submit" class="btn btn-danger" value="ลบ"></td>
</form>
<form action="{{route('adminController.edit')}}" method="get">

<input type="hidden" name="attraction_id" value={{$attraction["attractions_id"]}}>
<td><input type="submit" class="btn btn-warning" value="แก้ไข"></td>
</form>
</tr>
@endforeach
</table>
@else
<p>ไม่มีข้อมูล</p>
@endif
</div>
		\end{lstlisting}}
	\caption{adminsearch.blade.php}
	\label{Fig:adminsearch}
\end{figure}
จากภาพที่ \ref{Fig:adminsearch} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 2    เป็นการตรวจสอบว่ามีข้อมูลหรือไม่ ถ้าไม่มีข้อมูลจะทำงานบรรทัดที่ 27
	\item บรรทัดที่ 3-25  เป็นการสร้างตาราง
	\item บรรทัดที่ 9-24  เป็นการวนลูปเพื่อแสดงชื่อสถานที่ท่องเที่ยวลงในตาราง
	\item บรรทัดที่ 13-17 เป็นการสร้างปุ่มลบข้อมูลสถานที่ท่องเที่ยว
	\item บรรทัดที่ 18-22 เป็นการสร้างปุ่มแก้ไขข้อมูลสถานที่ท่องเที่ยว
	\item บรรทัดที่ 27    เป็นการแสดงข้อความไม่มีข้อมูล
\end{itemize}
\section{โครงสร้างของหน้า getview}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="row">
@foreach($places as $place)
<div class="card text-white bg-secondary mb-3" style="width: 18rem;">
<?php
$pic= explode("|",$place['image_url']);
?>
<img class="card-img-top" src="../upload/{{$pic[0]}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{$place["attractions_name"]}}</h5>
<div class="row">
<a href="/detail_/{{$place["attractions_id"]}}" class="btn btn-primary">รายละเอียด</a>
<form action="{{ route('addplace.add') }}" method="get">
<!--{{csrf_field()}}-->
<input type= "hidden" name= "id" value="{{$place["attractions_id"]}}">
<input onclick="success()" type= "submit" class="btn btn-primary" value= "เลือก">
</form>
</div>
</div>
</div>
@endforeach
</div>
		\end{lstlisting}}
	\caption{getview.blade.php}
	\label{Fig:getview}
\end{figure}
จากภาพที่ \ref{Fig:getview} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 2-20    เป็นการวนลูปเพื่อนำข้อมูลมาแสดง
	\item บรรทัดที่ 4-6     เป็นการแยก string
	\item บรรทัดที่ 7       เป็นการแสดงรูปภาพ
	\item บรรทัดที่ 5		เป็นการแสดงชื่อสถานที่ท่องเที่ยว
	\item บรรทัดที่ 11		เป็นการสร้างปุ่มรายละเอียด
	\item บรรทัดที่ 12-16	เป็นการสร้างปุ่มเลือก
\end{itemize}
\section{โครงสร้างของหน้า insert}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<script type="text/javascript">
function setForm(value) {
if (value == 'form1') {
document.getElementById('form1').style = 'display:block;';
document.getElementById('form2').style = 'display:none;';
} else {
document.getElementById('form2').style = 'display:block;';
document.getElementById('form1').style = 'display:none;';
}
}
</script>
		\end{lstlisting}}
	\caption{การสลับ form กรอกข้อมูล}
	\label{Fig:insert}
\end{figure}
จากภาพที่ \ref{Fig:insert} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 3-5		เป็นการตรวจสอบถ้าค่าเท่ากับ form1 ให้แสดงform1
	\item บรรทัดที่ 6-8    	เป็นการแสดง form2
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="card-header">
<label>เพิ่มข้อมูล</label>
<select class="custom-select" onchange="setForm(this.value)" style="width: 25rem;">
<option value="form1">สถานที่ท่องเที่ยว</option>
<option value="form2">จังหวัด</option>
</select>
</div>
		\end{lstlisting}}
	\caption{การสร้างเมนู select หน้า insert}
	\label{Fig:insert2}
\end{figure}
จากภาพที่ \ref{Fig:insert2} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 2		เป็นการแสดงข้อความ เพิ่มข้อมูล
	\item บรรทัดที่ 3-7		เป็นการสร้างปุ่ม select
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div id="form2" style="display: none">
<form action="{{route('adminController.insertProvince')}}" method="post">
{{csrf_field()}}
<div class="col-md-4 mb-3">
<label>รหัสจังหวัด</label>
<input type="number" class="form-control" name="province_id" required></div>
<div class="col-md-4 mb-3">
<label>ชื่อจังหวัด</label>
<input type="text" class="form-control" name="province_name" required></div>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit"></form></div>
		\end{lstlisting}}
	\caption{form2 หน้า insert}
	\label{Fig:insert3}
\end{figure}
จากภาพที่ \ref{Fig:insert3} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 4-6		เป็นการสร้างช่องกรอกข้อมูลรหัสจังหวัด
	\item บรรทัดที่ 7-9	เป็นการสร้างช่องกรอกข้อมูลชื่อจังหวัด
	\item บรรทัดที่ 10		เป็นการสร้างปุ่ม submit
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div id="form1">
<form action="{{route('adminController.insertAttraction')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-col">
<div class="col-md-4 mb-3">
<label>จังหวัด</label>
<select name="province_id" class="form-control">
@foreach ($provinces as $province)
<option value={{$province["provinces_id"]}}>{{$province["provinces_name"]}}</option>
@endforeach
</select>
</div>
<div class="col-md-4 mb-3">
<label>ชื่อสถานที่ท่องเที่ยว</label>
<input type="text" class="form-control" name="attractions_name" required>
</div>
<div class="col-md-4 mb-3">
<label>Latitude</label>
<input type="number" step="any" class="form-control" name="lat" required>
</div>
<div class="col-md-4 mb-3">
<label>Longtitud</label>
<input type="number" step="any" class="form-control" name="lng" required>
</div>
<div class="col-md-4 mb-3">
<label>รายละเอียด</label>
<textarea class="form-control " name="description" required></textarea>
</div>
<div class="col-md-4 mb-3">
<label>รูปภาพ</label>
<input type="file" name="image[]"  multiple="multiple" required multiple>
</div>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
</form>
</div>
		\end{lstlisting}}
	\caption{form1 หน้า insert}
	\label{Fig:insert4}
\end{figure}
จากภาพที่ \ref{Fig:insert4} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 5-12	เป็นการสร้างเมนู select
	\item บรรทัดที่ 8-10	เป็นการสร้าง option แสดงชื่อจังหวัด  
	\item บรรทัดที่ 14-16	เป็นการสร้างช่องกรอกข้อมูลชื่อสถานที่ท่องเที่ยว
	\item บรรทัดที่ 17-20	เป็นการสร้างช่องกรอกข้อมูลละติจูด
	\item บรรทัดที่ 21-24	เป็นการสร้างช่องกรอกข้อมูลลองจิจูด
	\item บรรทัดที่ 25-28	เป็นการสร้างช่องกรอกข้อมูลรายละเอียด
	\item บรรทัดที่ 29-32	เป็นการสร้างที่เพิ่มรูปภาพ
	\item บรรทัดที่ 33		เป็นการสร้างปุ่ม submit
\end{itemize}
\section{โครงสร้างของหน้า result}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="card">
<div class="card-header">
ลำดับการเดินทาง
</div>
<ul class="list-group list-group-flush">
<?php
$p=array('B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K');
$i=0;
?>
<li class="list-group-item">A ตำแหน่งปัจจุบัน</li>
@foreach($dataresults as $data)
<li class="list-group-item">{{$p[$i]}} {{$data["attractions_name"]}}</li>
<?php $i++; ?>
@endforeach
</ul>
</div>
		\end{lstlisting}}
	\caption{การแสดงลำดับการเดินทาง}
	\label{Fig:result}
\end{figure}
จากภาพที่ \ref{Fig:result} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 6-9		เป็นการสร้าง array เพื่อนำไปใช้ในการบอกตำแหน่งของสถานที่ท่องเที่ยว
	\item บรรทัดที่ 11-14	เป็นการวนลูปเพื่อแสดงข้อมูลลำดับการเดินทาง
	
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsRenderer = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 13.684164, lng: 100.709522},
zoom: 6
});
directionsRenderer.setMap(map);
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {lat: position.coords.latitude,lng: position.coords.longitude};
map.setCenter(pos);
map.setZoom(15);

DisplayRoute(directionsService, directionsRenderer,pos);
});
}
		\end{lstlisting}}
	\caption{initMap}
	\label{Fig:result2}
\end{figure}
จากภาพที่ \ref{Fig:result2} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 2-3		เป็นการเรียกใช้งานการค้นหาเส้นทางและการแสดงผลเส้นทาง
	\item บรรทัดที่ 4-6		เป็นการกำหนดค่าให้แผนที่
	\item บรรทัดที่ 8		เป็นการสร้างแผนที่ ที่กำหนดค่าเอาไว้
	\item บรรทัดที่ 9-12	เป็นการหาค่า lat,lng ของตำแหน่งปัจจุบันของผู้ใช้
	\item บรรทัดที่ 14		เป็นการเรียกใช้งาน DisplayRoute
	
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function DisplayRoute(directionsService, directionsRenderer,pos) {
var waypts = [];
<?php
for ($i=0; $i <= count($dataresults)-2; $i++) {
echo "waypts.push({";
echo "location: {lat:".$dataresults[$i]["Latitude"].",lng:".$dataresults[$i]["longitude"]."},";
echo "stopover: true";
echo "});";
}
?>
var posdes = {lat: <?php echo $dataresults[count($dataresults)-1]["Latitude"]; ?>,lng: <?php echo $dataresults[count($dataresults)-1]["longitude"]; ?>};
directionsService.route(
{
origin: pos,
destination: posdes,
waypoints: waypts,
travelMode: 'DRIVING'
},
function(response, status) {
if (status === 'OK') {
directionsRenderer.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
		\end{lstlisting}}
	\caption{DisplayRoute}
	\label{Fig:result3}
\end{figure}
จากภาพที่ \ref{Fig:result3} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 3-10	เป็นการนำผลลัพธ์เก็บไว้ใน waypts
	\item บรรทัดที่ 11		เป็นการนำผลลัพธ์ตำแหน่งสุดท้ายเก็บไว้ในตัวแปร posdes
	\item บรรทัดที่ 12-25	เป็นการกำหนดค่าเพื่อใช้ในการแสดงเส้นทาง
	
\end{itemize}
\section{โครงสร้างหน้า search}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<?php
use App\Province;
$provinces =  Province::all();
?>
<center>
<div class="container">
<form action="{{ route('getplace.getdata') }}" method="get">
<div class="form-group">
<select name="province" class="form-control">
@foreach ($provinces as $province)
<option value={{$province["provinces_id"]}} >{{$province["provinces_name"]}}</option>

@endforeach
</select>
</div>
<input type= "submit" class="btn btn-primary" value= "ค้นหา">
</form>
</div>
</center>
<a class="btn btn-secondary" href="/adminlogin">admin</a>
		\end{lstlisting}}
	\caption{search.blade.php}
	\label{Fig:search}
\end{figure}
จากภาพที่ \ref{Fig:search} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-4		เป็นการดึงข้อมูลจังหวัดจากฐานข้อมูลมาเก็บในตัวแปร provinces
	\item บรรทัดที่ 7-17	เป็นการสร้าง form เพื่อส่งค่าที่ผู้ใช้เลือก
	\item บรรทัดที่ 9-14	เป็นการสร้างเมนู select
	\item บรรทัดที่ 10-13	เป็นการกำหนดค่า option 
	\item บรรทัดที่ 16 		เป็นการสร้างปุ่มค้นหา
\end{itemize}
\section{โครงสร้างหน้า selectview}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">Travel</a>
<div class="form-inline">
<a class="btn btn-danger" href="/delAllSelect">ลบที่เลือกทั้งหมด</a>
<form action="{{ route('ResultController.getresult') }}" method="post">
{{csrf_field()}}
<input type= "hidden" name= "lat" id= "lat" >
<input type= "hidden" name= "lng" id= "lng" >
<input type= "submit" class="btn btn-primary" value= "ค้นหาเส้นทาง">
</form>
</div>
</nav>
<div class="row">
@foreach($selecteds as $selected)
<div class="card text-white bg-secondary mb-3" style="width: 18rem;">
<img class="card-img-top" src="{{$selected['image_url']}}" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{$selected["attractions_name"]}}</h5>
</div>
<div class="card-body">
<form action="{{ route('addplace.del') }}" method="get">
<input type= "hidden" name= "id" value="{{$selected["attractions_id"]}}">
<input type= "submit" class="btn btn-danger" value= "ลบ">
</form>
</div>
</div>
@endforeach
</div>
		\end{lstlisting}}
	\caption{การแสดงสถานที่ท่องเที่ยวที่เลือก}
	\label{Fig:selectview}
\end{figure}
จากภาพที่ \ref{Fig:selectview} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 1-12	เป็นการสร้าง navbar
	\item บรรทัดที่ 4		เป็นการสร้างปุ่ม ลบที่เลือกทั้งหมด
	\item บรรทัดที่ 5-10	เป็นการสร้าง form ส่งข้อมูล lat,lng
	\item บรรทัดที่ 14-27	เป็นการแสดงสถานที่ท่องเที่ยวที่ผู้ใช้เลือก
	\item บรรทัดที่ 16 		เป็นการแสดงรูปภาพ
	\item บรรทัดที่ 18 		เป็นการแสดงชื่อสถานที่ท่องเที่ยวที่เลือก
	\item บรรทัดที่ 21-24 	เป็นการสร้างปุ่มลบ
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<script>
var lat = document.getElementById("lat");
var lng = document.getElementById("lng");
function getCurrent() {
navigator.geolocation.getCurrentPosition(function(position) {
lat.value = position.coords.latitude;
lng.value = position.coords.longitude;
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQLj-_PEe0qXFXtqhs_EdE-ZmC5zoReMs&callback=getCurrent">
</script>
		\end{lstlisting}}
	\caption{การหาค่า lat,lng ของตำแหน่งผู้ใช้งาน}
	\label{Fig:selectview}
\end{figure}
จากภาพที่ \ref{Fig:selectview} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}]
	\item บรรทัดที่ 2-3		เป็นการสร้างตัวแปร
	\item บรรทัดที่ 4-9		เป็นการหาค่า lat,lng ของตำแหน่งผู้ใช้งาน
	\item บรรทัดที่ 11-13	เป็นการเรียกใช้งานบริการของ google
\end{itemize}	
\section{โครงสร้างของหน้า update}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="card">
<div class="card-body">
<form action="{{route('adminController.update')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-col">
<input type="hidden" name="attractions_id" value="{{$attraction['attractions_id']}}">
<div class="col-md-4 mb-3">
<label>ชื่อสถานที่ท่องเที่ยว</label>
<input type="text" class="form-control" name="attractions_name" placeholder="{{$attraction['attractions_name']}}" value="{{$attraction['attractions_name']}}" required>
</div>
<div class="col-md-4 mb-3">
<label>Latitude</label>
<input type="number" step="any" class="form-control" name="lat" placeholder="{{$attraction['Latitude']}}" value="{{$attraction['Latitude']}}" required>
</div>
<div class="col-md-4 mb-3">
<label>Longtitud</label>
<input type="number" step="any" class="form-control" name="lng" placeholder="{{$attraction['longitude']}}" value="{{$attraction['longitude']}}" required>
</div>
<div class="col-md-4 mb-3">
<label>รายละเอียด</label>
<textarea class="form-control " name="description" required>{{$attraction['description']}}</textarea>
</div>
<div class="col-md-4 mb-3">
<label>รูปภาพ</label>
<input type="file" name="image[]"  multiple="multiple" required multiple>
</div>
<input type="submit" name="submit" class="btn btn-info btn-md" value="submit">
</div>
</form>
</div>
</div>
		\end{lstlisting}}
	\caption{โครงสร้างของหน้า update}
	\label{Fig:update}
\end{figure}
จากภาพที่ \ref{Fig:update} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 7-10	เป็นการสร้างช่องกรอกข้อมูลชื่อสถานที่ท่องเที่ยว
	\item บรรทัดที่ 11-14	เป็นการสร้างช่องกรอกข้อมูลละติจูด
	\item บรรทัดที่ 15-18	เป็นการสร้างช่องกรอกข้อมูลลองจิจูด
	\item บรรทัดที่ 19-22	เป็นการสร้างช่องกรอกข้อมูลรายละเอียด
	\item บรรทัดที่ 23-26	เป็นการสร้างที่เพิ่มรูปภาพ
	\item บรรทัดที่ 27		เป็นการสร้างปุ่ม submit
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
@if (count($errors) > 0)
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
		\end{lstlisting}}
	\caption{การแสดงผล error}
	\label{Fig:update2}
\end{figure}
จากภาพที่ \ref{Fig:update2} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 1		เป็นการตรวจสอบถ้ามี error มากกว่า 0 ให้ทำงานบรรทัดที่ 2-8
	\item บรรทัดที่ 4-6		เป็นการวนลูปเพื่อแสดงผล error
\end{itemize}
\section{โครงสร้างหน้า viewdetail}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<?php
$pics= explode("|",$detail['image_url']);
?>
<center>
<div class="card">
<div class="card-body">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php
for ($i=0; $i < count($pics) ; $i++) {
if ($i==0) {
echo "<div class='carousel-item active'>";
echo "<img class='d-block w-100' src='../upload/$pics[$i]' >";
echo "</div>";
}else {
echo "<div class='carousel-item'>";
echo "<img class='d-block w-100' src='../upload/$pics[$i]' >";
echo "</div>";
}
} ?>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</center>
		\end{lstlisting}}
	\caption{โครงสร้างหน้า viewdetail}
	\label{Fig:viewdetail1}
\end{figure}
จากภาพที่ \ref{Fig:viewdetail1} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 1-3		เป็นการแยก string
	\item บรรทัดที่ 9-20	เป็นการแสดงรูปภาพ
	\item บรรทัดที่ 22-25	เป็นการสร้างปุ่มดูรูปภาพก่อนหน้า
	\item บรรทัดที่ 26-29	เป็นการสร้างปุ่มดูรูปภาพต่อไป
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<h3 class="text-left">{{$detail['attractions_name']}}</h3>
<div class="row">
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: {{$detail["Latitude"]}}, lng:{{$detail["longitude"]}} };
var map = new google.maps.Map(
document.getElementById('map'), {
zoom: 16,
center: uluru
});
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAQLj-_PEe0qXFXtqhs_EdE-ZmC5zoReMs&callback=initMap"
async defer></script>
<div class="card">
<h3>รายละเอียด</h3>
<p>{{$detail["description"]}}</p>
</div>
</div>
		\end{lstlisting}}
	\caption{โครงสร้างหน้า viewdetail}
	\label{Fig:viewdetail2}
\end{figure}
จากภาพที่ \ref{Fig:viewdetail2} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 1		เป็นการแสดงชื่อสถานที่ท่องเที่ยว
	\item บรรทัดที่ 5-13	เป็นการแสดงตำแหน่งของสถานที่ท่องเที่ยวในแผนที่
	\item บรรทัดที่ 15-16	เป็นการเรียกใช้งานบริการของ google
	\item บรรทัดที่ 17-20	เป็นการแสดงรายละเอียดของสถานที่ท่องเที่ยว
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
<div class="card" id="cardlocation">
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/th_TH/sdk.js#xfbml=1&version=v6.0"></script>
<center><div class="fb-comments" data-href={{Request::url()}} data-width="1000" data-numposts="5"></div></center>
</div>
		\end{lstlisting}}
	\caption{โครงสร้างหน้า viewdetail}
	\label{Fig:viewdetail3}
\end{figure}
จากภาพที่ \ref{Fig:viewdetail3} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 3		เป็นการเรียกใช้งาน Comments Plugin
	\item บรรทัดที่ 4		เป็นการตั้งค่า Comments Plugin
\end{itemize}
\section{โครงสร้างของ detail}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function showdetail($id){
$details = Attraction::where('attractions_id',$id)->get()->toArray();
return view('viewdetail')->with('details',$details);
}
		\end{lstlisting}}
	\caption{function showdetail}
	\label{Fig:detail}
\end{figure}
จากภาพที่ \ref{Fig:detail} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2	เป็นการนำข้อมูลสถานที่ท่องเที่ยวที่มีค่า attractions\_id เท่ากับ id เก็บในตัวแปร 
	\item บรรทัดที่ 3	เป็นการแสดงหน้า viewdetail พร้อมส่งค่า details ไปด้วย  
\end{itemize}
\section{โครงสร้างของ getplace}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function getdata(Request $request){
$item=$request->input('province');
$places = Attraction::where('provinces_id',$item)->get()->toArray();
return view('getview')
->with('places',$places);
}
		\end{lstlisting}}
	\caption{function getdata}
	\label{Fig:getplace}
\end{figure}
จากภาพที่ \ref{Fig:getplace} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2	เป็นการนำค่าอินพุตจาก province มาเก็บในตัวแปร item
	\item บรรทัดที่ 3	เเป็นการนำข้อมูลสถานที่ท่องเที่ยวที่มีค่า attractions\_id เท่ากับ item เก็บในตัวแปร  
	\item บรรทัดที่ 4	เป็นการแสดงหน้า getview พร้อมส่งค่า places ไปด้วย   
\end{itemize}
\section{โครงสร้างของ addplace}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
$id=$request->input('id');
$addPlace = Session::has('attraction_id') ? Session::get('attraction_id') : null;
if ($addPlace==null) {
$addPlace= array();
array_push($addPlace,$id);
$request->session()->put('attraction_id',$addPlace);
}else {
$have=false;
for ($i=0; $i < count($addPlace) ; $i++) {
if ($addPlace[$i]==$id) {
$have=true;
break;
}
}
if($have==false){
array_push($addPlace,$id);
$request->session()->put('attraction_id',$addPlace);
}
}
return Redirect::back();
		\end{lstlisting}}
	\caption{function add}
	\label{Fig:funcadd}
\end{figure}
จากภาพที่ \ref{Fig:funcadd} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 1 เป็นการนำค่า id เก็บไว้ในตัวแปร
	\item บรรทัดที่ 2 เป็นการตรวจสอบว่ามี session attraction\_id หรือไม่ ถ้ามีนำค่าไปเก็บในตัวแปร addPlace ถ้าไม่มีเก็บเป็นค่า null 
	\item บรรทัดที่ 3 เป็นการตรวจสอบว่า addPlace มีค่าเท่ากับ null หรือไม่ ถ้ามีจะทำงานบรรทัดที่ 5-7 ถ้าไม่ใช่จะทำงานบรรทัดที่ 9-13 
	\item บรรทัดที่ 4 เป็นการสร้าง array
	\item บรรทัดที่ 5 เป็นการเพิ่มค่า id ลงใน addPlace 
	\item บรรทัดที่ 6 เป็นการสร้าง session attraction_id ที่มีค่าเท่ากับ addPlace
	\item บรรทัดที่ 8 เป็นการประกาศตัวแปร have มีค่าเท่ากับ false
	\item บรรทัดที่ 19-14 เป็นการวนลูปเพื่อนตรวจสอบว่ามีค่าซ้ำกันหรือไม่
	\item บรรทัดที่ 15-17 เป็นการตรวจสอบดูว่าถ้าไม่มีค่าซ้ำจะทำการเพิ่มค่า id ในตัวแปร addPlace และใส่ค่าใน attraction_id ใหม่
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function showselect(){
if (Session::has('attraction_id')) {
$selecteds = array();
$getselects = Session::get('attraction_id');
foreach($getselects as $getselect){
$place = Attraction::where('attractions_id',$getselect )->get()->toArray();
$selecteds=array_merge($selecteds,$place);
}
return view('selectview')->with('selecteds',$selecteds);
}else {
return view('selectview');
}
}
		\end{lstlisting}}
	\caption{function showselect}
	\label{Fig:funcshowselect}
\end{figure}
จากภาพที่ \ref{Fig:funcshowselect} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2 เป็นการตรวจสอบว่ามี session attraction\_id หรือไม่ ถ้ามีจะทำงานบรรทัดที่ 3-9 ถ้าไม่มีจะทำงานบรรทัดที่ 11
	\item บรรทัดที่ 3 เป็นการสร้าง array ชื่อ selecteds
	\item บรรทัดที่ 4 เป็นการนำค่าจาก session attraction\_id เก็บไว้ในตัวแปร getselect
	\item บรรทัดที่ 5-9 เป็นการวนลูปเพื่อนำค่า id จาก getselect มาดึงข้อมูลสถานที่ท่องเที่ยวเก็บไว้ในตัวแปร place และเพิ่มลงใน array selecteds
	\item บรรทัดที่ 9   เป็นการ return ไปหน้า selectview พร้อมกับส่งค่า selecteds ด้วย 
	\item บรรทัดที่ 11   เป็นการ return ไปหน้า selectview 
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function del(Request $request){
$id=$request->input('id');
$getselects = Session::get('attraction_id');
$newgetselects=array();
foreach($getselects as $getselect){
if($getselect!=$id){
array_push($newgetselects,$getselect);
$request->session()->put('attraction_id',$newgetselects);
}
}
if ($newgetselects==null) {
$request->session()->forget('attraction_id');
}
return Redirect::to('selectview');
//return redirect('del','/search');
//return view('selectview')->with('selecteds',$selecteds);
}
		\end{lstlisting}}
	\caption{function del}
	\label{Fig:funcdel}
\end{figure}
จากภาพที่ \ref{Fig:funcdel} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2 เป็นการนำค่า id เก็บในตัวแปร id
	\item บรรทัดที่ 3 เป็นการนำค่าจาก session attraction\_id เก็บไว้ในตัวแปร getselects
	\item บรรทัดที่ 4 เป็นการสร้าง array ชื่อ newgetselects
	\item บรรทัดที่ 5-10 เป็นการวนลูปเพื่อตรวจสอบว่าค่า getselects เท่ากับค่า id หรือไม่ ถ้าไม่เท่ากันจะทำนำข้อมูลจาก getselect เพิ่มลง newgetselects และทำการเปลี่ยนค่า session attraction\_id ให้มีค่าเท่ากับ newgetselects 
	\item บรรทัดที่ 11-13 เป็นการตรวจสอบว่า newgetselects เท่ากับ null หรือไม่ ถ้าใช่จะทำการลบ session attraction\_id
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function delAllSelect(Request $request){
$request->session()->forget('attraction_id');
return Redirect::to('/');
}
		\end{lstlisting}}
	\caption{function delAllSelect}
	\label{Fig:funcdelall}
\end{figure}
จากภาพที่ \ref{Fig:funcdelall} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2 เป็นการลบ session ชื่อ attraction_id
	\item บรรทัดที่ 3 เป็นการ redirect ไปที่ ‘/’
\end{itemize}
\section{โครงสร้างของ ResultController}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
public function geturl($lat,$lng,$getselects){
$url = "https://maps.googleapis.com/maps/api/distancematrix/json?origins=".$lat.",".$lng."&destinations=";
$i=1;
foreach ($getselects as $getselect) {
$place = Attraction::where('attractions_id',$getselect )->get()->toArray();
foreach ($place as $p) {
$deslat=$p["Latitude"];
$deslng=$p["longitude"];
$url .= $deslat.",".$deslng;
}
if($i!=count($getselects)){
$i++;
$url .= "|";
}else {
$url .= "&key=AIzaSyAQLj-_PEe0qXFXtqhs_EdE-ZmC5zoReMs";
}
}
return $url;
}
		\end{lstlisting}}
	\caption{function geturl}
	\label{Fig:funcgeturl}
\end{figure}
จากภาพที่ \ref{Fig:funcgeturl} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2    เป็นการต่อสติงเพื่อใส่ค่าต้นทาง
	\item บรรทัดที่4-17 เป็นการต่อสติงค่าปลายทาง
	\item บรรทัดที่ 5     เปแนการดึงข้อสถานที่ท่องเที่ยวจาก database มาเก็บไว้ในตัวแปร place
	\item บรรทัดที่ 18   ทำการ return ค่า url
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
function getresult(Request $request){
$getselects = Session::get('attraction_id');
$lat=$request->input('lat');
$lng=$request->input('lng');
$url= $this->geturl($lat,$lng,$getselects);
$getselects = $this->getdistance($url,$getselects);
while (count($getselects)>1) {
$place = Attraction::where('attractions_id',end($this->results) )->get()->toArray();
foreach ($place as $p) {
$lat=$p["Latitude"];
$lng=$p["longitude"];
}
$url=$this->geturl($lat,$lng,$getselects);
$getselects = $this->getdistance($url,$getselects);
}
if(count($getselects)==1){
foreach ($getselects as $getselect) {
array_push($this->results,$getselect);
}
}
Session::put('result', 'have');
$dataresults=array();
foreach($this->results as $result){
$dataresult = Attraction::where('attractions_id',$result )->get()->toArray();
$dataresults=array_merge($dataresults,$dataresult);
}
return view('result')->with('dataresults',$dataresults);
}
		\end{lstlisting}}
	\caption{function getresult}
	\label{Fig:funcgetresult}
\end{figure}
จากภาพที่ \ref{Fig:funcgetresult} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 2 เป็นการนำค่าจาก session attraction_id เก็บไว้ในตัวแปร getselects
	\item บรรทัดที่ 3-4 เป็นการเอาค่าละติจูดและลองจิจูดมาเก็บในตัวแปร
	\item บรรทัดที่ 5    เป็นการเรียกใช้งานฟังก์ชัน geturl
	\item บรรทัดที่ 6   เป็นการเรียกใช้งานฟังก์ชัน getdistance
	\item บรรทัดที่ 7-15 เป็นการวนลูปเพื่อเรียกใช้งานฟังก์ชัน geturl และ getdistance
	\item บรรทัดที่ 6-20  เป็นการเพิ่มข้อมูลใน getselects ใส่ใน result
	\item บรรทัดที่ 23-26 เป็นการนำค่าจาก result ไปดึงข้อมูลจาก database มาเก็บใน dataresult
	\item บรรทัดที่ 27     เป็นการ return ไปหน้า result พร้อมส่งค่า dataresult ด้วย
\end{itemize}
\begin{figure}[H]
	{\setstretch{1.0}\begin{lstlisting}
public function getdistance($url,$getselects){
$mindistance = null;
$index=null;
$client = new \GuzzleHttp\Client();
$response = $client->request('GET', $url);
$data = $response->getBody();
$get_rows = json_decode($data, true);
$get_elements = $get_rows["rows"];
$get_distance = $get_elements[0];
$get_value = $get_distance["elements"];
for ($i=0; $i < count($get_value); $i++) {
$text = $get_value[$i]["distance"]["text"];
$split= explode(" ",$text);
$distance = floatval($split[0]);
if($mindistance==null){
$mindistance = $distance;
$index=$i;
}else {
if ($mindistance>=$distance) {
$mindistance = $distance;
$index=$i;
}
}
}
$i=0;
foreach ($getselects as $getselect) {
if($i==$index){
$index=array_search($getselect, $getselects);
array_push($this->results,$getselects[$index]);
unset($getselects[$index]);
}
$i++;
}
return $getselects;
}
		\end{lstlisting}}
	\caption{function getdistance}
	\label{Fig:getdistance}
\end{figure}
จากภาพที่ \ref{Fig:getdistance} สามารถอธิบายการทำงานได้ดังนี้
\begin{itemize}[label={--}] 
	\item บรรทัดที่ 4-5 	เป็นการส่ง request เพื่อหาระยะทาง
	\item บรรทัดที่ 6-10	เป็นการนำผลลัพธ์ระยะทางมาเก็บในตัวแปร
	\item บรรทัดที่ 11-24 	เป็นการหาปลายทางที่ใกล้ที่สุด
	\item บรรทัดที่ 12		เป็นการนำค่าระยะทางที่เป็น string เก็บในตัวแปร \$text
	\item บรรทัดที่ 13		เป็นการแยก string
	\item บรรทัดที่ 14		เป็นการแปลงตัวอักษรเป็นตัวเลข
	\item บรรทัดที่ 15-23	เป็นการเก็บค่าระยะทางที่สั้นที่สุดในตัวแปร mindistance
	\item บรรทัดที่ 26-33 เป็นการเพิ่มปลายทางที่ใกล้ที่สุดใส่ในตัวแปร result
	
\end{itemize}