<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MySQL - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</title>
	<atom:link href="https://www.itoffside.com/tag/mysql/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.itoffside.com</link>
	<description>ข้อมูลข่าวสารและเรื่องราวบนโลกของไอทีที่ ล้ำหน้า พร้อมสาระการเขียนโปรแกรมคอมพิวเตอร์</description>
	<lastBuildDate>Tue, 22 Apr 2025 15:20:25 +0000</lastBuildDate>
	<language>th</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://www.itoffside.com/wp-content/uploads/2020/04/cropped-favicon-96x96-1-32x32.png</url>
	<title>MySQL - itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</title>
	<link>https://www.itoffside.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>แจกฟรี! ระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี &#038; ใบสั่งซื้อ รองรับทุกธุรกิจ</title>
		<link>https://www.itoffside.com/free-accounting-system-php-invoice-purchase-order/</link>
					<comments>https://www.itoffside.com/free-accounting-system-php-invoice-purchase-order/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Tue, 22 Apr 2025 15:13:27 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php 8]]></category>
		<category><![CDATA[php login]]></category>
		<category><![CDATA[php workshop]]></category>
		<category><![CDATA[php5]]></category>
		<category><![CDATA[php7]]></category>
		<category><![CDATA[phpexcel]]></category>
		<category><![CDATA[PhpSpreadsheet]]></category>
		<category><![CDATA[ระบบบัญชี php]]></category>
		<category><![CDATA[ใบกำกับภาษี php]]></category>
		<category><![CDATA[ใบสั่งซื้อ php]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3633</guid>

					<description><![CDATA[<p>ในยุคออนไลน์ที่ทุกอย่างต้องการความรวดเร็ว **ระบบบัญชี PHP** ที่มีฟังก์ชันครบถ้วนสำหรับการ พิมพ์ใบกำกับภาษี, ใบเสร็จรับเงิน และ ใบสั่งซื้อ ถือเป็นเครื่องมือที่จำเป็นสำหรับธุรกิจทุกประเภท ไม่ว่าจะเป็นร้านค้าออนไลน์ บริษัท หรือองค์กรที่ต้องการจัดการเอกสารทางบัญชีได้อย่างสะดวก วันนี้เรามีระบบจัดการบัญชี...</p>
<p>The post <a href="https://www.itoffside.com/free-accounting-system-php-invoice-purchase-order/">แจกฟรี! ระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี & ใบสั่งซื้อ รองรับทุกธุรกิจ</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>ในยุคออนไลน์ที่ทุกอย่างต้องการความรวดเร็ว <em><strong><span style="color: #ff00ff;">**ระบบบัญชี PHP**</span></strong></em> ที่มีฟังก์ชันครบถ้วนสำหรับการ <strong>พิมพ์ใบกำกับภาษี</strong>, <strong>ใบเสร็จรับเงิน</strong> และ <strong>ใบสั่งซื้อ</strong> ถือเป็นเครื่องมือที่จำเป็นสำหรับธุรกิจทุกประเภท ไม่ว่าจะเป็นร้านค้าออนไลน์ บริษัท หรือองค์กรที่ต้องการจัดการเอกสารทางบัญชีได้อย่างสะดวก วันนี้เรามีระบบจัดการบัญชีที่ใช้งานง่าย พร้อมแจกให้ดาวน์โหลดฟรี!<span id="more-3633"></span></p>
<p><!-- Features Section --></p>
<h2>ฟีเจอร์เด่นของระบบบัญชี PHP</h2>
<ul>
<li><strong>บันทึกใบกำกับภาษี &amp; ใบเสร็จรับเงิน</strong> – รองรับการพิมพ์ใบกำกับภาษีแบบเต็มรูปแบบ พร้อมฟอร์มที่ถูกต้องตามมาตรฐาน</li>
<li><strong>พิมพ์ใบสั่งซื้อ</strong> – ระบบพิมพ์ใบสั่งซื้อที่ช่วยให้การจัดการคำสั่งซื้อเป็นไปอย่างมีประสิทธิภาพ พร้อมฟอร์มที่ถูกต้องตามมาตรฐาน</li>
<li><strong>จัดการข้อมูลสินค้า</strong> – เพิ่ม/แก้ไขข้อมูลสินค้า</li>
<li><strong>จัดการข้อมูลลูกค้า</strong> – บันทึกและจัดเก็บข้อมูลลูกค้าอย่างเป็นระบบ</li>
<li><strong>จัดการข้อมูลผู้จำหน่าย</strong> – บริหารจัดการข้อมูลซัพพลายเออร์ได้ง่ายดาย</li>
<li><strong>การตั้งค่าระบบเต็มรูปแบบ</strong> – ปรับแต่งการทำงานของระบบตามความต้องการของธุรกิจคุณ</li>
</ul>
<p><a class="ngg-simplelightbox" title=" " href="https://www.itoffside.com/wp-content/gallery/eaccount/eaccount-10.png" rel="" data-image-id="64" data-src="https://www.itoffside.com/wp-content/gallery/eaccount/eaccount-10.png" data-thumbnail="https://www.itoffside.com/wp-content/gallery/eaccount/thumbs/thumbs_eaccount-10.png" data-title="eaccount-10" data-description=" "><img decoding="async" class="ngg-singlepic ngg-none" src="https://www.itoffside.com/wp-content/gallery/eaccount/eaccount-10.png" alt="eaccount-10"></a></p>
<p><!-- SEO Keywords --></p>
<h2>ระบบบัญชี PHP ที่รองรับการพิมพ์ใบกำกับภาษี &amp; ใบสั่งซื้อ</h2>
<p>ระบบนี้ได้รับการออกแบบให้ใช้งานง่าย รองรับทุกฟังก์ชันสำคัญ ทั้งการ <strong>พิมพ์ใบกำกับภาษี PHP</strong>, <strong>พิมพ์ใบสั่งซื้อ PHP</strong>, <strong>ระบบขาย/ซื้อ PHP</strong> ซึ่งช่วยให้การดำเนินธุรกิจเป็นไปอย่างคล่องตัว</p>
<p><!-- Call to Action --></p>
<h2>ดาวน์โหลดฟรี – ติดตั้งง่าย พร้อมใช้งาน!</h2>
<p>หากคุณกำลังมองหา <strong>ระบบบัญชี PHP</strong> ที่สามารถ <strong>พิมพ์ใบกำกับภาษี PHP</strong> และ <strong>พิมพ์ใบสั่งซื้อ PHP</strong> ได้ครบถ้วน นี่คือโอกาสที่คุณไม่ควรพลาด! คลิกที่ลิงก์ด้านล่างเพื่อดาวน์โหลดระบบและเริ่มใช้งานได้ทันที</p>
<p><a href="https://drive.google.com/file/d/1Om9QG8V0L0vj97mJBjLE34aOP99_o-dj/view?usp=sharing" target="_blank" rel="nofollow noopener">ดาวน์โหลดระบบบัญชีฟรีที่นี่</a></p>
<p><!-- Closing Statement --></p>
<h2>⚙️ วิธีติดตั้งระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี &amp; ใบสั่งซื้อ</h2>
<p>การติดตั้ง <strong>ระบบบัญชี PHP</strong> นี้ง่ายและรวดเร็ว เพียงทำตามขั้นตอนต่อไปนี้ คุณจะสามารถเริ่มใช้งานระบบได้ทันที!</p>
<h3>ขั้นตอนการติดตั้ง</h3>
<ol>
<li><strong>ดาวน์โหลดไฟล์ระบบ</strong>: คลิกที่ลิงก์ด้านล่างเพื่อดาวน์โหลดซอร์สโค้ดระบบบัญชี <a href="https://drive.google.com/file/d/1Om9QG8V0L0vj97mJBjLE34aOP99_o-dj/view?usp=sharing" target="_blank" rel="nofollow noopener">ดาวน์โหลดระบบบัญชีฟรีที่นี่</a></li>
<li><strong>แตกไฟล์ ZIP</strong>: หลังจากดาวน์โหลดเสร็จ ให้แตกไฟล์ ZIP และนำไปวางไว้ในเซิร์ฟเวอร์ของคุณ ตัวอย่างไว้ใน c:/xampp/htdocs/eaccount-lite</li>
<li><strong>ตั้งค่าฐานข้อมูล MySQL</strong>:
<ul>
<li>สร้างฐานข้อมูลใหม่ใน MySQL (แนะนำใช้ phpMyAdmin) ชื่อฐานข้อมูล <strong>eaccount_lite</strong></li>
<li>Import sql นำเข้าตารางฐานข้อมูลจากไฟล์ <code>eaccount_lite.sql</code></li>
<li>ตั้งค่าการเชื่อมต่อฐานข้อมูลและตั้ง URL ในไฟล์ <code>config.php</code></li>
</ul>
</li>
<li><strong>ตั้งค่าเซิร์ฟเวอร์</strong>: ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์รองรับ PHP version 8 ขึ้นไป และ MySQL เวอร์ชันล่าสุด</li>
<li><strong>ทดสอบการใช้งาน</strong>: เปิดเบราว์เซอร์แล้วไปที่ URL ของเซิร์ฟเวอร์เพื่อล็อกอินเข้าสู่ระบบ</li>
</ol>
<h3>คำแนะนำเพิ่มเติม</h3>
<ul>
<li>ควรตั้งค่าสิทธิ์ไฟล์และโฟลเดอร์ให้เหมาะสม (CHMOD 755 หรือ 777) เพื่อให้สามารถอัปโหลดไฟล์เอกสารได้</li>
<li>ตรวจสอบว่ามีการเปิดใช้งานโมดูล <strong>mysqli</strong> ในเซิร์ฟเวอร์ของคุณ</li>
<li>หากพบข้อผิดพลาดในการติดตั้ง สามารถติดต่อทีมพัฒนาเพื่อรับคำแนะนำเพิ่มเติม</li>
</ul>
<h2>ดาวน์โหลดและเริ่มใช้งานเลย!</h2>
<p>ระบบนี้รองรับทุกฟังก์ชันสำคัญ เช่น <strong>พิมพ์ใบกำกับภาษี PHP</strong>, <strong>พิมพ์ใบสั่งซื้อ PHP</strong>, <strong>ระบบขาย/ซื้อ PHP</strong> และสามารถปรับแต่งเพิ่มเติมได้ตามความต้องการ รีบดาวน์โหลดและเริ่มใช้งานเพื่อเพิ่มประสิทธิภาพในการจัดการบัญชีของคุณ</p>
<p>หวังว่าระบบนี้จะช่วยให้การจัดการบัญชีและเอกสารของคุณเป็นเรื่องง่ายขึ้น! หากมีข้อสงสัยเกี่ยวกับการติดตั้งหรือการใช้งาน สามารถสอบถามเพิ่มเติมได้เลย</p><p>The post <a href="https://www.itoffside.com/free-accounting-system-php-invoice-purchase-order/">แจกฟรี! ระบบบัญชี PHP พร้อมพิมพ์ใบกำกับภาษี & ใบสั่งซื้อ รองรับทุกธุรกิจ</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/free-accounting-system-php-invoice-purchase-order/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>แจกระบบเอกสาร PHP &#038; MySQL &#124; ดาวน์โหลดฟรี พร้อมวิธีติดตั้ง</title>
		<link>https://www.itoffside.com/edocument-php-mysql-sourcecode/</link>
					<comments>https://www.itoffside.com/edocument-php-mysql-sourcecode/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Thu, 03 Apr 2025 00:27:03 +0000</pubDate>
				<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[edocument]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php 8]]></category>
		<category><![CDATA[php5]]></category>
		<category><![CDATA[php7]]></category>
		<category><![CDATA[ระบบเอกสาร]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3600</guid>

					<description><![CDATA[<p>หากคุณกำลังมองหา ระบบเอกสารออนไลน์ที่พัฒนาด้วย PHP และ MySQL ที่ช่วยให้การจัดเก็บและบริหารจัดการไฟล์เป็นเรื่องง่าย โค๊ดสคริปต์นี้จะช่วยให้คุณเข้าใจการทำงานของระบบ พร้อมลิงก์ดาวน์โหลดฟรี! ระบบเอกสาร PHP &#38; MySQL คืออะไร? ระบบเอกสารออนไลน์ (E-Document System) เป็นระบบโปรแกรมที่ช่วยให้คุณสามารถ จัดเ...</p>
<p>The post <a href="https://www.itoffside.com/edocument-php-mysql-sourcecode/">แจกระบบเอกสาร PHP & MySQL | ดาวน์โหลดฟรี พร้อมวิธีติดตั้ง</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>หากคุณกำลังมองหา <strong>ระบบเอกสารออนไลน์ที่พัฒนาด้วย PHP และ MySQL</strong> ที่ช่วยให้การจัดเก็บและบริหารจัดการไฟล์เป็นเรื่องง่าย โค๊ดสคริปต์นี้จะช่วยให้คุณเข้าใจการทำงานของระบบ พร้อมลิงก์ดาวน์โหลดฟรี!</p>
<h2><strong> ระบบเอกสาร PHP &amp; MySQL คืออะไร?</strong></h2>
<p>ระบบเอกสารออนไลน์ (E-Document System) เป็นระบบโปรแกรมที่ช่วยให้คุณสามารถ <strong>จัดเก็บไฟล์เอกสาร</strong> ค้นหา การเข้าถึงได้อย่างสะดวก เหมาะสำหรับองค์กร บริษัท หรือบุคคลทั่วไปที่ต้องการเครื่องมือช่วยจัดการเอกสาร</p>
<p><span id="more-3600"></span></p>
<figure id="attachment_3602" aria-describedby="caption-attachment-3602" style="width: 1636px" class="wp-caption aligncenter"><img fetchpriority="high" decoding="async" class="size-full wp-image-3602" src="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02.png" alt="edocument php mysql" width="1636" height="775" srcset="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02.png 1636w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02-300x142.png 300w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02-1024x485.png 1024w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02-768x364.png 768w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02-1536x728.png 1536w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-02-80x38.png 80w" sizes="(max-width: 1636px) 100vw, 1636px" /><figcaption id="caption-attachment-3602" class="wp-caption-text">edocument php mysql</figcaption></figure>
<p>&nbsp;</p>
<figure id="attachment_3601" aria-describedby="caption-attachment-3601" style="width: 551px" class="wp-caption aligncenter"><img decoding="async" class=" wp-image-3601" src="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01.png" alt="edocument php mysql" width="551" height="309" srcset="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01.png 1651w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01-300x168.png 300w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01-1024x574.png 1024w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01-768x430.png 768w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01-1536x861.png 1536w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-01-80x45.png 80w" sizes="(max-width: 551px) 100vw, 551px" /><figcaption id="caption-attachment-3601" class="wp-caption-text">edocument php mysql</figcaption></figure>
<figure id="attachment_3603" aria-describedby="caption-attachment-3603" style="width: 2025px" class="wp-caption aligncenter"><img decoding="async" class="size-full wp-image-3603" src="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03.png" alt="edocument php mysql" width="2025" height="1417" srcset="https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03.png 2025w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03-300x210.png 300w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03-1024x717.png 1024w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03-768x537.png 768w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03-1536x1075.png 1536w, https://www.itoffside.com/wp-content/uploads/2025/04/edocument-php-03-80x56.png 80w" sizes="(max-width: 2025px) 100vw, 2025px" /><figcaption id="caption-attachment-3603" class="wp-caption-text">edocument php mysql</figcaption></figure>
<h2><strong>✨ คุณสมบัติเด่นของระบบ</strong></h2>
<p>✔ <strong>อัปโหลดและจัดเก็บเอกสาร</strong> รองรับไฟล์หลากหลายประเภท<br />
✔ <strong>จัดหมวดหมู่เอกสาร</strong> แยกตามประเภทหรือแผนกเพื่อค้นหาง่ายขึ้น<br />
✔ <strong>ค้นหาเอกสารได้รวดเร็ว</strong> ด้วยระบบค้นหาตามชื่อไฟล์หรือคำสำคัญ<br />
✔ <strong>อินเตอร์เฟซใช้งานง่าย</strong> ดีไซน์เรียบง่าย มือใหม่ก็ใช้งานได้ทันที</p>
<h2><strong> ดาวน์โหลดและติดตั้งระบบเอกสาร</strong></h2>
<p>โครงการนี้ถูกเผยแพร่ผ่าน <strong>GitHub</strong> สามารถดาวน์โหลดได้ที่ <a title="ระบบเอกสาร php" href="https://github.com/ipball/edocument" target="_blank" rel="noopener">https://github.com/ipball/edocument</a></p>
<h3><strong>วิธีติดตั้ง</strong></h3>
<p>1️⃣ ดาวน์โหลดโค้ดจาก GitHub<br />
2️⃣ อัปโหลดลงเซิร์ฟเวอร์ที่รองรับ PHP และ MySQL หรือติดตั้งบนเครื่องโดยใช้ xampp จำลองเซิฟเวอร์แทนได้<br />
3️⃣ สร้างฐานข้อมูลชื่อ document และนำเข้าตารางจากไฟล์ SQL ที่แนบมาชื่อไฟล์ _database.sql ในกรณีผมใช้ phpmyadmin ในการจัดการฐานข้อมูล<br />
4️⃣ ตั้งค่าการเชื่อมต่อฐานข้อมูลใน <code>config.php</code><br />
5️⃣ เริ่มใช้งานระบบเอกสารได้เลย!</p>
<p>เข้าจัดการเอกสาร /admin<br />
ผู้ใช้: todo<br />
รหัสผ่าน: passpass</p>
<h2><strong> ประโยชน์ของระบบเอกสาร</strong></h2>
<p><strong>ทำไมต้องใช้ระบบเอกสารออนไลน์?</strong> นอกจากช่วยจัดการไฟล์ได้ง่ายขึ้นแล้ว ยังช่วยให้ทีมงานสามารถเข้าถึงข้อมูลสำคัญได้ตลอดเวลา ไม่ต้องกังวลเรื่องเอกสารสูญหาย ลดการใช้กระดาษ และเพิ่มประสิทธิภาพการทำงาน</p>
<p>หากคุณกำลังมองหาวิธี <strong>บริหารเอกสารให้มีประสิทธิภาพ</strong> ระบบนี้คือคำตอบ! รองรับการใช้งานหลากหลาย และสามารถปรับแต่งเพิ่มเติมได้ตามความต้องการ</p>
<p>และโปรแกรมแจกฟรี เขียนโดย <strong>PHP&amp;Mysql</strong> ทำให้ไม่ต้องกังวลเรื่องเซิฟเวอร์ราคาแพง เพราะเป็นภาษาไม่เสียค่าลิขสิทธิ์</p><p>The post <a href="https://www.itoffside.com/edocument-php-mysql-sourcecode/">แจกระบบเอกสาร PHP & MySQL | ดาวน์โหลดฟรี พร้อมวิธีติดตั้ง</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/edocument-php-mysql-sourcecode/feed/</wfw:commentRss>
			<slash:comments>9</slash:comments>
		
		
			</item>
		<item>
		<title>PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!</title>
		<link>https://www.itoffside.com/php-workshop-register-login/</link>
					<comments>https://www.itoffside.com/php-workshop-register-login/#respond</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Wed, 17 Apr 2024 17:27:57 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[login]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php 8]]></category>
		<category><![CDATA[php login]]></category>
		<category><![CDATA[php workshop]]></category>
		<category><![CDATA[php7]]></category>
		<category><![CDATA[sql]]></category>
		<category><![CDATA[ระบบสมัครสมาชิก]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3513</guid>

					<description><![CDATA[<p>วิดีโอนี้พาสอนการเขียนโปรแกรมเต็มรูปแบบมีระบบ สมัครสมาชิก เข้าสู่ระบบ ตรวจสอบการเข้าสู่ระบบว่า ได้เข้าสู่ระบบหรือไม่ PHP Workshop ทำระบบ Register + Login สอนละเอียด เต็มระบบ พร้อม Sourcecode นำไปดูเป็นตัวอย่าง วิธีการดาวน์โหลด Source code กดติดตาม ช่อง Youtube ช่องนี้&#160;Youtube Bahtsoft ทักไปที่เ...</p>
<p>The post <a href="https://www.itoffside.com/php-workshop-register-login/">PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<h2>วิดีโอนี้พาสอนการเขียนโปรแกรมเต็มรูปแบบมีระบบ</h2>
<ol>
<li>สมัครสมาชิก</li>
<li>เข้าสู่ระบบ</li>
<li>ตรวจสอบการเข้าสู่ระบบว่า ได้เข้าสู่ระบบหรือไม่</li>
</ol>
<p><span id="more-3513"></span></p>
<h1>PHP Workshop ทำระบบ Register + Login สอนละเอียด เต็มระบบ</h1>
<h3>พร้อม Sourcecode นำไปดูเป็นตัวอย่าง</h3>
<h3>วิธีการดาวน์โหลด Source code</h3>
<ol>
<li>กดติดตาม ช่อง Youtube ช่องนี้&nbsp;<a title="Youtube" href="https://www.youtube.com/channel/UCzcg3GJMK1gwpEDa24Gfm6A" target="_blank" rel="noopener">Youtube Bahtsoft</a></li>
<li>ทักไปที่เพจ <a href="https://www.facebook.com/itoffside" target="_blank" rel="noopener">https://www.facebook.com/itoffside</a> แจ้งว่า ขอ source code ระบบ Register+Login พร้อม แคปภาพว่า ได้กดติดตามช่อง Youtube แล้ว</li>
</ol>
<h3>สิ่งที่ได้รับจากวิดีโอนี้</h3>
<ol>
<li>การเขียน PHP เชื่อมต่อกับ MySQLi</li>
<li>การเขียน PHP workshop แบบ สมาชิกสามารถ Login, สามารถ Register ได้</li>
<li>การเขียน PHP กับ Session ในการจัดการตรวจสอบการเข้าสู่ระบบ</li>
</ol>
<h3>สารบัญการสอน</h3>
<ol>
<li>สร้างโปรเจ็ค</li>
<li>สร้างฐานข้อมูล</li>
<li>สร้างไฟล์ index.php (โปรไฟล์) ตรวจสอบสิทธิ์การ Login</li>
<li>สร้างหน้า Login</li>
<li>สร้างหน้าสมัครสมาชิก (register)</li>
<li>บันทึกข้อมูลการสมัครสมาชิกลง Database</li>
<li>ทำระบบ Login ตรวจสอบ username/password</li>
<li>ทำหน้าแรก แสดงข้อมูลโปรไฟล์</li>
</ol>
<h3>วิดีโอสอน Full Course ฟรี</h3>
<p><iframe loading="lazy" title="PHP Workshop ทำระบบ Register + Login สอนละเอียด เต็มระบบ [FULL]" width="660" height="371" src="https://www.youtube.com/embed/LjxjrBQuxy0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p><p>The post <a href="https://www.itoffside.com/php-workshop-register-login/">PHP Workshop Register+Login ระบบสมัครสมาชิก+Login [Full Course] สอนละเอียด ฟรี!</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/php-workshop-register-login/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!</title>
		<link>https://www.itoffside.com/php-workshop-shoppingcart/</link>
					<comments>https://www.itoffside.com/php-workshop-shoppingcart/#respond</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Tue, 29 Aug 2023 05:20:01 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php 8]]></category>
		<category><![CDATA[php shopping cart]]></category>
		<category><![CDATA[php workshop]]></category>
		<category><![CDATA[php ระบบจัดการสินค้า]]></category>
		<category><![CDATA[php5]]></category>
		<category><![CDATA[php7]]></category>
		<category><![CDATA[shopping cart]]></category>
		<category><![CDATA[workshop cart]]></category>
		<category><![CDATA[ระบบตะกร้าสินค้า]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3485</guid>

					<description><![CDATA[<p>วิดีโอสอนเขียนโปรแกรมแบบ WorkShop PHP Shoppingcart ตะกร้าสินค้า วิดีโอนี้พาสอนการเขียนโปรแกรมเต็มรูปแบบมีระบบ 1. จัดการสินค้า เพิ่ม ลบ แก้ไข แสดงรายการสินค้า 2. จัดการตะกร้าสินค้า เพิ่มสินค้าเข้าในตะกร้า, อัพเดทจำนวนสินค้าในตะกร้า, ลบสินค้าออกจากตะกร้า 3. ระบบสั่งซื้อหลังจากหยิบสินค้าใส่ตะกร้าแล้ว ส...</p>
<p>The post <a href="https://www.itoffside.com/php-workshop-shoppingcart/">PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<h1>วิดีโอสอนเขียนโปรแกรมแบบ WorkShop PHP Shoppingcart ตะกร้าสินค้า</h1>
<h3>วิดีโอนี้พาสอนการเขียนโปรแกรมเต็มรูปแบบมีระบบ</h3>
<p>1. จัดการสินค้า เพิ่ม ลบ แก้ไข แสดงรายการสินค้า<br />
2. จัดการตะกร้าสินค้า เพิ่มสินค้าเข้าในตะกร้า, อัพเดทจำนวนสินค้าในตะกร้า, ลบสินค้าออกจากตะกร้า<br />
3. ระบบสั่งซื้อหลังจากหยิบสินค้าใส่ตะกร้าแล้ว</p>
<h3>สิ่งที่ได้รับจากวิดีโอนี้</h3>
<p>1. การเขียน PHP เชื่อมต่อกับ MySQLi<br />
2. การเขียน PHP workshop แบบ CRUD [Create, Read, Update Delete]<br />
3. การเขียน PHP กับ Session ในการจัดการตะกร้าสินค้า</p>
<p><span id="more-3485"></span></p>
<h3>สารบัญการสอน</h3>
<ol>
<li>Demo ระบบ</li>
<li>สร้างฐานข้อมูล(Database)</li>
<li>สร้างโปรเจ็ค Shoppingcart</li>
<li>สร้างไฟล์ config.php</li>
<li>สร้างหน้า index.php รายการ, เพิ่ม, แก้ไข, ลบ สินค้า</li>
<li>เพิ่มสินค้าเข้าฐานข้อมูล</li>
<li>แสดงรายการสินค้า</li>
<li>แก้ไขสินค้า</li>
<li>ลบสินค้า</li>
<li>สินค้าสำหรับหยิบใส่ตะกร้า</li>
<li>เพิ่มสินค้าลงในตะกร้า</li>
<li>แสดงจำนวนสินค้าตะกร้า</li>
<li>หน้ารายการตะกร้าสินค้า</li>
<li>ลบสินค้าออกจากตะกร้า</li>
<li>อัพเดทจำนวนสินค้าในตะกร้า</li>
<li>หน้าสั่งซื้อสินค้า Checkout</li>
<li>fix error session[cart]</li>
</ol>
<h3>วิดีโอสอน Full Course ฟรี</h3>
<p><iframe loading="lazy" title="PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full] สอนละเอียด เต็มระบบ" width="660" height="371" src="https://www.youtube.com/embed/UWaWAjAqPzs?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3><span style="color: #ff00ff;">หากต้องการ Sourcode สามารถซื้อเพื่อสนับสนุนผู้สอนได้ที่</span></h3>
<h4><span style="color: #ff9900;"><span style="color: #ff0000;"><del>500บาท</del></span> <span style="color: #000000;">โปรลดราคาเหลือเพียง</span> <em>300 บาท</em></span></h4>
<p>inbox เพจ <a href="https://www.facebook.com/itoffside" target="_blank" rel="noopener">https://www.facebook.com/itoffside</a><br />
หรือ ติดต่อที่ไลน์ไอดี @eke8377p (มี @ ข้างหน้าด้วย)</p>
<p><strong>LINE ID:</strong></p>
<p><img loading="lazy" decoding="async" class="" src="https://qr-official.line.me/L/GjDKhMhfT9.png" width="223" height="223"></p><p>The post <a href="https://www.itoffside.com/php-workshop-shoppingcart/">PHP Workshop Shoppingcart จัดการสินค้า, ตะกร้าสินค้า, สั่งซื้อสินค้า [Full Course] สอนละเอียด ฟรี!</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/php-workshop-shoppingcart/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel WorkShop ระบบ Blog และ Login</title>
		<link>https://www.itoffside.com/laravel-workshop-blog-and-login/</link>
					<comments>https://www.itoffside.com/laravel-workshop-blog-and-login/#respond</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Thu, 31 Mar 2022 21:56:48 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[pagination]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[PHP Framework]]></category>
		<category><![CDATA[workshop]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3316</guid>

					<description><![CDATA[<p>ระบบจัดการ Blog สามารถ เพิ่ม แก้ไข ลบ และแสดงรายการ ได้ มีการตรวจสอบการกรอกข้อมูล และมีระบบยืนยันตัวตนผ่านการล๊อกอิน(Login) เป็นระบบ workshop laravel อย่างง่ายๆ ให้ผู้อ่านผู้ชม ได้เห็นการเขียนโปรแกรมด้วย laravel ว่าเขียนประมาณไหนบ้าง พาใช้งาน Laravel ผ่าน Workshop Blog/Login เพื่อนๆจะได้รู้จักกับ กา...</p>
<p>The post <a href="https://www.itoffside.com/laravel-workshop-blog-and-login/">Laravel WorkShop ระบบ Blog และ Login</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p><strong>ระบบจัดการ Blog</strong> สามารถ เพิ่ม แก้ไข ลบ และแสดงรายการ ได้ มีการตรวจสอบการกรอกข้อมูล และมีระบบยืนยันตัวตนผ่านการล๊อกอิน(Login) เป็นระบบ <strong>workshop laravel</strong> อย่างง่ายๆ ให้ผู้อ่านผู้ชม ได้เห็นการเขียนโปรแกรมด้วย <strong>laravel</strong> ว่าเขียนประมาณไหนบ้าง</p>
<p><span class="style-scope yt-formatted-string" dir="auto">พาใช้งาน <strong>Laravel</strong> ผ่าน <strong>Workshop Blog/Login</strong> เพื่อนๆจะได้รู้จักกับ</span></p>
<ul>
<li><span class="style-scope yt-formatted-string" dir="auto">การสร้าง <strong>Controller, Model, View</strong> &#8211; การกำหนด Route ของ Web (GET, POST, PUT, DELETE)</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>Migrate</strong> ของ database</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>Middleware</strong> และการใช้งาน middleware ผ่าน <strong>Route</strong></span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ Authen login แบบ Manual</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>CRUD</strong> ของ Blog</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>Paginate</strong> แบ่งหน้า</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>Validate</strong> form</span></li>
<li><span class="style-scope yt-formatted-string" dir="auto">การทำ <strong>Relation</strong> ของ ORM (One to Many)</span></li>
</ul>
<p><span id="more-3316"></span></p>
<p>วิดีโอประกอบการสอน workshop</p>
<p><iframe loading="lazy" title="Laravel Workshop ระบบ Blog และ Login" width="660" height="371" src="https://www.youtube.com/embed/wA75lGFF9E8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p><span class="style-scope yt-formatted-string" dir="auto">ดาวน์โหลด Sourcecode </span><a class="yt-simple-endpoint style-scope yt-formatted-string" dir="auto" spellcheck="false" href="https://github.com/ipball/Laravel-Blog" target="_blank" rel="nofollow noopener">https://github.com/ipball/Laravel-Blog</a></p><p>The post <a href="https://www.itoffside.com/laravel-workshop-blog-and-login/">Laravel WorkShop ระบบ Blog และ Login</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/laravel-workshop-blog-and-login/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL</title>
		<link>https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/</link>
					<comments>https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Tue, 21 Jan 2020 06:50:38 +0000</pubDate>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php workshop]]></category>
		<category><![CDATA[php5]]></category>
		<category><![CDATA[php7]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3185</guid>

					<description><![CDATA[<p>บทความนี้เป็นการสอนการทำ Dropdown 3 ชั้น โดยใช้เทคนิค Ajax ในการช่วยเพื่อให้หน้าเว็บไปต้องรีเฟส โดยขั้นตอนการทำงานเริ่มจากเลือกจังหวัด เมื่อเลือกจังหวัดแล้ว Dropdown ชั้นที่ 2 จะมีรายชื่ออำเภอของจังหวัดที่เลือกเท่านั้น หลังจากนั้นเมื่อเราเลือกอำเภอ Dropdown ชั้นที่ 3 จะมีรายชื่อตำบลของอำเภอที่เราเลื...</p>
<p>The post <a href="https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/">การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>บทความนี้เป็นการสอนการทำ <strong>Dropdown 3 ชั้น</strong> โดยใช้เทคนิค <strong>Ajax</strong> ในการช่วยเพื่อให้หน้าเว็บไปต้องรีเฟส โดยขั้นตอนการทำงานเริ่มจากเลือกจังหวัด เมื่อเลือกจังหวัดแล้ว Dropdown ชั้นที่ 2 จะมีรายชื่ออำเภอของจังหวัดที่เลือกเท่านั้น หลังจากนั้นเมื่อเราเลือกอำเภอ Dropdown ชั้นที่ 3 จะมีรายชื่อตำบลของอำเภอที่เราเลือก จะเห็นได้ว่าทั้งหมดนี้เราใช้ ภาษา <strong>PHP + MySQL</strong> (เทคนิค Ajax) เท่านั้น ซึ่งทางผู้เขียนจะอธิบายขั้นตอนของ code เพื่อให้ผู้อ่านเข้าใจได้ง่ายขึ้น<span id="more-3185"></span></p>
<h3>เดโม่ตัวอย่าง</h3>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3204" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown.gif" alt="" width="726" height="294"></p>
<h3>เครื่องมือพัฒนา</h3>
<p>1. <strong>XAMPP</strong> สำหรับจำลองเครื่องเราเป็น SERVER ให้ใช้เวอร์ชั่นล่าสุด (ที่ใช้ php 7 ขึ้นไป)<br />
2. <strong>VSCODE</strong> ใช้ในการเขียนโปรแกรม</p>
<h3>ขั้นตอน</h3>
<p>1. ดาวน์โหลดฐานข้อมูลมาก่อน สามารถดาวน์โหลดได้ที่ <a href="https://raw.githubusercontent.com/ipball/multiple_dropdown/master/thailand.sql" target="_blank" rel="noopener noreferrer">Click to Download</a> อ้างอิงจาก https://github.com/parsilver/thailand-provinces<br />
2. หลังจากนั้นทำการสร้าง database ชื่อ thailand แล้วทำการ Import SQL โดยใช้ <span style="color: #ff00ff;"><strong>PHPMyAdmin</strong></span><br />
3 สร้างโปรเจค multiple_dropdown ไว้ใน c:\xampp\htdocs\<br />
4. สร้างไฟล์ <span style="color: #000080;">connect.php</span> เพื่อเชื่อมต่อฐานข้อมูล code ตัวอย่างด้านล่าง</p><pre class="crayon-plain-tag">&lt;?php
$info = array(
    'host' =&gt; 'localhost',
    'user' =&gt; 'root',
    'password' =&gt; '',
    'dbname' =&gt; 'thailand'
);
$conn = mysqli_connect($info['host'], $info['user'], $info['password'], $info['dbname']) or die('Error connection database!');
mysqli_set_charset($conn, 'utf8');</pre><p>5. สร้างไฟล์ <span style="color: #000080;">index.php</span> เพื่อสร้าง html และทำ multiple dropdown ดู code ตัวอย่างด้านล่าง</p><pre class="crayon-plain-tag">&lt;?php
include('connect.php');
$sql = "SELECT * FROM provinces";
$query = mysqli_query($conn, $sql);
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Multiple Dropdown - itoffside.com&lt;/title&gt;

    &lt;link href="assets/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container my-5"&gt;
    &lt;div class="card"&gt;
        &lt;div class="card-body"&gt;
            &lt;h3&gt;การทำ Multiple Dropdown ด้วย Ajax เลือก 3 ขั้น&lt;/h3&gt;
            &lt;form&gt;
                &lt;div class="form-row"&gt;
                    &lt;div class="form-group col-md-4"&gt;
                        &lt;label for="province"&gt;จังหวัด&lt;/label&gt;
                        &lt;select name="province_id" id="province" class="form-control"&gt;
                            &lt;option value=""&gt;เลือกจังหวัด&lt;/option&gt;
                            &lt;?php while($result = mysqli_fetch_assoc($query)): ?&gt;
                                &lt;option value="&lt;?=$result['id']?&gt;"&gt;&lt;?=$result['name_th']?&gt;&lt;/option&gt;
                            &lt;?php endwhile; ?&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group col-md-4"&gt;
                        &lt;label for="amphure"&gt;อำเภอ&lt;/label&gt;
                        &lt;select name="amphure_id" id="amphure" class="form-control"&gt;
                            &lt;option value=""&gt;เลือกอำเภอ&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group col-md-4"&gt;
                        &lt;label for="district"&gt;ตำบล&lt;/label&gt;
                        &lt;select name="district_id" id="district" class="form-control"&gt;
                            &lt;option value=""&gt;เลือกตำบล&lt;/option&gt;
                        &lt;/select&gt;
                    &lt;/div&gt;
                &lt;/div&gt;                
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script src="assets/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="assets/script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;?php
mysqli_close($conn);</pre><p><strong>คำอธิบาย Code</strong><br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-3191" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-01.png" alt="" width="309" height="102" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-01.png 309w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-01-300x99.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-01-80x26.png 80w" sizes="auto, (max-width: 309px) 100vw, 309px" /></p>
<p><span style="text-decoration: underline;">บรรทัด 1-5</span> เป็นการเชื่อต่อฐานข้อมูลและดึงข้อมูลจังหวัดมา (province)</p>
<p><img loading="lazy" decoding="async" class="alignnone wp-image-3192 " src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-02.png" alt="" width="526" height="151" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-02.png 766w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-02-300x86.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-02-80x23.png 80w" sizes="auto, (max-width: 526px) 100vw, 526px" /><br />
<span style="text-decoration: underline;">บรรทัด 22-31</span> เป็นการนำข้อมูลจังหวัดที่ได้ จากบรรทัด 1-5 มาแสดงในหน้าจอ</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3193" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-03.png" alt="" width="641" height="246" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-03.png 641w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-03-300x115.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-03-80x31.png 80w" sizes="auto, (max-width: 641px) 100vw, 641px" /><br />
<span style="text-decoration: underline;">บรรทัด 32-43</span> เป็นการใส่ dropdown อำเภอ, ตำบล แต่ยังไม่มีข้อมูล จนกว่า เราจะเลือกจังหวัด ซึ่งเราจะนำ javascript มาจับ Event หน้าจอ เพื่อเรียกใช้งาน ajax แล้วนำข้อมูล อำเภอ, ตำบล มาใส่ตามลำดับ</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3194" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-04.png" alt="" width="391" height="78" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-04.png 391w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-04-300x60.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-04-80x16.png 80w" sizes="auto, (max-width: 391px) 100vw, 391px" /><br />
<span style="text-decoration: underline;">บรรทัด 51</span> เป็นการเรียกใช้ไฟล์ <span style="color: #000080;">script.js</span> โดย file นี้มีความสำคัญในการ จัดการ <strong>AJAX</strong></p>
<p>6. สร้างไฟล์ <span style="color: #000080;">script.js</span> ไว้ที่โฟล์เดอร์ assets เพื่อใช้สำหรับ เวลาเราเปลี่ยนแปลง จังหวัดหรืออำเภอ ให้ทำการ ดึงข้อมูล มาใหม่</p><pre class="crayon-plain-tag">$(function(){
    var provinceObject = $('#province');
    var amphureObject = $('#amphure');
    var districtObject = $('#district');

    // on change province
    provinceObject.on('change', function(){
        var provinceId = $(this).val();

        amphureObject.html('&lt;option value=""&gt;เลือกอำเภอ&lt;/option&gt;');
        districtObject.html('&lt;option value=""&gt;เลือกตำบล&lt;/option&gt;');

        $.get('get_amphure.php?province_id=' + provinceId, function(data){
            var result = JSON.parse(data);
            $.each(result, function(index, item){
                amphureObject.append(
                    $('&lt;option&gt;&lt;/option&gt;').val(item.id).html(item.name_th)
                );
            });
        });
    });

    // on change amphure
    amphureObject.on('change', function(){
        var amphureId = $(this).val();

        districtObject.html('&lt;option value=""&gt;เลือกตำบล&lt;/option&gt;');
        
        $.get('get_district.php?amphure_id=' + amphureId, function(data){
            var result = JSON.parse(data);
            $.each(result, function(index, item){
                districtObject.append(
                    $('&lt;option&gt;&lt;/option&gt;').val(item.id).html(item.name_th)
                );
            });
        });
    });
});</pre><p><strong>อธิบาย Code</strong><br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-3195" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-05.png" alt="" width="320" height="61" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-05.png 320w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-05-300x57.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-05-80x15.png 80w" sizes="auto, (max-width: 320px) 100vw, 320px" /><br />
<span style="text-decoration: underline;">บรรทัด 2-4</span> สร้างตัวแปรเพื่อเก็บ Element Selector ของ <strong>Dropdown จังหวัด, อำเภอ, ตำบล</strong></p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3196" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-06.png" alt="" width="555" height="321" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-06.png 555w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-06-300x174.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-06-80x46.png 80w" sizes="auto, (max-width: 555px) 100vw, 555px" /><br />
<span style="text-decoration: underline;">บรรทัด 7-21</span><br />
&#8211; เมื่อมีการเปลี่ยนแปลง <strong>Dropdown (เลือกจังหวัด)</strong> จะทำการ Clear ข้อมูล อำเภอ, ตำบล ตามบรรทัด 10-11<br />
&#8211; หลังจากนั้น จะทำการใช้ GET ของ jQuery ยิง Request ไปที่ <span style="color: #000080;">get_amphure.php</span> เพื่อดึงข้อมูลอำเภอมา โดยใส่ข้อมูลตัวแปร จังหวัดที่เลือกไปด้วยเพื่อดึงอำเภอเฉพาะจังหวัดที่เลือกเท่านั้น ตัวแปรชื่อ provicne_id ตามบรรทัดที่ 13<br />
&#8211; หลังจากยิง Request ไปที่ server แล้ว Server จะตอบกลับมาเป็นข้อมูลรายการของอำเภอจากจังหวัดที่เลือกใน Dropdown รูปแบบของการตอบกลับเป็น <strong>JSON</strong> ดังนั้นเราต้องทำการ parse data ก่อน ตามบรรทัด 14<br />
&#8211; เมื่อ parse data แล้วข้อมูลจะอยู่ในรูปแบบนี้</p><pre class="crayon-plain-tag">[
  {
    "id":1,
    "name_th": "ห้างฉัตร",
    "province_id": 324
  },
  {},
  ...
]</pre><p>&#8211; ให้เราใช้คำสั่ง <strong>jQuery Append</strong> ข้อมูลลงใน HTML โดยข้อมูลมาเป็น Array ให้ทำการวนข้อมูล โดยใส่ value คือ item.id และ name คือ item.name_th ตามบรรทัด 17&nbsp;</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3197" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-07.png" alt="" width="537" height="296" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-07.png 537w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-07-300x165.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-07-80x44.png 80w" sizes="auto, (max-width: 537px) 100vw, 537px" /><br />
<span style="text-decoration: underline;">บรรทัด 24-37</span> เป็นการดึงข้อมูลตำบลของอำเภอที่เราเลือกมาแสดงบน HTML โดย Event จะทำงานเมื่อคลิกเปลี่ยนอำเภอใน Dropdown การทำงานจะคล้ายกับ การเปลี่ยนจังหวัด แต่แตกต่างที่ ไฟล์ที่ดึงข้อมูลต้องเปลี่ยนเป็น <span style="color: #000080;">get_district.php</span> และ ตัวแปรที่ส่งไปเป็นตัวแปรของอำเภอที่ถูกเลือก และสุดท้าย ตอนได้รับข้อมูลจาก Server มาก็นำมาวนใส่ ใน Dropdown ตำบล ก็เป็นอันจบการทำงาน</p>
<p>7. สร้างไฟล์ <span style="color: #000080;">get_amphure.php</span> เพื่อดึงข้อมูล อำเภอ จากจังหวัดที่เลือกมา ดู code ตัวอย่างด้านล่าง</p><pre class="crayon-plain-tag">&lt;?php
include('connect.php');
$sql = "SELECT * FROM amphures WHERE province_id={$_GET['province_id']}";
$query = mysqli_query($conn, $sql);

$json = array();
while($result = mysqli_fetch_assoc($query)) {    
    array_push($json, $result);
}
echo json_encode($json);</pre><p><strong>อธิบาย Code</strong><br />
เมื่อ ไฟล์ script.js request ขอข้อมูลจาก server โดยเรียกใช้ไฟล์ <span style="color: #000080;">get_amphure.php</span> และส่งตัวแปร province_id มาด้วย เป็นตัวแปร ได้จากการเลือกจังหวัด<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-3198" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-08.png" alt="" width="518" height="196" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-08.png 518w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-08-300x114.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-08-80x30.png 80w" sizes="auto, (max-width: 518px) 100vw, 518px" /><br />
<span style="text-decoration: underline;">บรรทัด 1</span> เชื่อมต่อฐานข้อมูล<br />
<span style="text-decoration: underline;">บรรทัด 2-3</span> ดึงข้อมูลเอารายการอำเภอ จากจังหวัดที่เลือก โดย where province_id<br />
<span style="text-decoration: underline;">บรรทัด 6-9</span> ดึงข้อมูลแล้วทำการ วนเก็บข้อมูลอำเภอ ไว้ใน $json ในรูปแบบ Array<br />
<span style="text-decoration: underline;">บรรทัด 10</span> ทำการแปลงข้อมูล Array ไปเป็น JSON เพิ่มเตรียมส่งกลับไปให้กลับ Client ที่เรียกใช้(<span style="color: #000080;">script.js</span>)</p>
<p>8. สร้างไฟล์ get_district.php เพื่อดึงข้อมูล ตำบล จากอำเภอที่เลือกมา ดู code ตัวอย่างด้านล่าง</p><pre class="crayon-plain-tag">&lt;?php
include('connect.php');
$sql = "SELECT * FROM districts WHERE amphure_id={$_GET['amphure_id']}";
$query = mysqli_query($conn, $sql);

$json = array();
while($result = mysqli_fetch_assoc($query)) {    
    array_push($json, $result);
}
echo json_encode($json);</pre><p><strong>อธิบาย Code</strong><br />
การทำงานคล้ายกับไฟล์ get_amphure.php แตกต่างกันในเรื่องของการดึงข้อมูลคนละตารางเท่านั้น และตัวแปรที่ใช้การ where เป็น amphure_id</p>
<h3>ผลลัพท์</h3>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-3200" src="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f.png" alt="" width="1135" height="610" srcset="https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f.png 1135w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f-300x161.png 300w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f-1024x550.png 1024w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f-768x413.png 768w, https://www.itoffside.com/wp-content/uploads/2020/01/multiple-dropdown-f-80x43.png 80w" sizes="auto, (max-width: 1135px) 100vw, 1135px" /></p>
<h3>ดาวน์โหลด</h3>
<p>สามารถดาวน์โหลด Code เต็มๆ หรือ clone code มาดูได้ที่ลิงค์ <a href="https://github.com/ipball/multiple_dropdown" target="_blank" rel="noopener noreferrer">https://github.com/ipball/multiple_dropdown</a></p>
<h3>สรุป</h3>
<p>สำหรับบทความนี้ ผู้เขียนคิดว่า หลายๆคนน่าจะเข้าใจหลักการทำงาน ของ Client &#8211; Server มองเห็นภาพการทำงานชัดเจนในทำงานของโปรแกรม ซึ่งในปี 2020 อาจจะหลายๆคนบอกว่า ยังใช้ jQuery อยู่อีกเหรอ ยังใช้ PHP อยู่อีกเหรอ?</p>
<p>จริงๆแล้วไม่ว่าเราจะใช้ภาษาอะไรหรือเทคโนโลยีอะไรก็ตามแต่ เราจงหาสิ่งที่เราถนัดและเหมาะสมกับงาน แต่ไม่ได้หมายความว่าจะให้ทุกคนจะต้องใช้ PHP ตลอด เราก็ควรศึกษาเรียนรู้ภาษา เทคโนโลยีใหม่ด้วย เช่นกัน เหมือนกับผู้เขียนที่ยังต้องเขียน Node.js, ExpressJS, MongoDB, Angular อยู่เลย เราเป็นนักพัฒนา เราก็ต้องศึกษาพัฒนาตัวเองอยู่สม่ำเสมอ</p><p>The post <a href="https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/">การทำ Multiple Dropdown จังหวัด, อำเภอ, ตำบล แบบ 3 ชั้น ด้วย Ajax + PHP + MySQL</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/dropdown-dynamic-3-level-with-ajax/feed/</wfw:commentRss>
			<slash:comments>23</slash:comments>
		
		
			</item>
		<item>
		<title>Source code ระบบ การขาย, พิมพ์ใบกำกับภาษี/ใบเสร็จรับเงิน</title>
		<link>https://www.itoffside.com/source-code-e-invoice-print/</link>
					<comments>https://www.itoffside.com/source-code-e-invoice-print/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Wed, 24 Apr 2019 04:00:08 +0000</pubDate>
				<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[codeigniter]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[DataTables]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[php7]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=3080</guid>

					<description><![CDATA[<p>eInvoice คือ ระบบการขาย, พิมพ์ใบกำกับภาษี/ใบเสร็จรับเงิน(Invoice) เป็นระบบที่ช่วยให้การออกหลักฐานของการเสียภาษีมูลค่าเพิ่ม ออกให้กับลูกค้าทุกครั้งที่มีการเข้ามาซื้อสินค้า/บริการ จากเรา ซึ่งผมได้ทำออกมา เพื่อให้บุคคลที่สนใจสามารถนำไปเป็นตัวอย่าง Sourcecode หรือนำไปใช้งานได้ ระบบนี้จะพัฒนาต่อไปเรื่อยๆ...</p>
<p>The post <a href="https://www.itoffside.com/source-code-e-invoice-print/">Source code ระบบ การขาย, พิมพ์ใบกำกับภาษี/ใบเสร็จรับเงิน</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p><strong>eInvoice</strong> คือ ระบบ<strong>การขาย</strong>, <strong>พิมพ์ใบกำกับภาษี</strong>/ใบเสร็จรับเงิน(<strong>Invoice</strong>) เป็นระบบที่ช่วยให้การออกหลักฐานของการเสียภาษีมูลค่าเพิ่ม ออกให้กับลูกค้าทุกครั้งที่มีการเข้ามาซื้อสินค้า/บริการ จากเรา ซึ่งผมได้ทำออกมา เพื่อให้บุคคลที่สนใจสามารถนำไปเป็นตัวอย่าง <strong>Sourcecode</strong> หรือนำไปใช้งานได้ ระบบนี้จะพัฒนาต่อไปเรื่อยๆ นะครับไม่มีหยุด<span id="more-3080"></span></p>
<p><strong>ความสามารถของระบบ<br />
</strong></p>
<ul>
<li>ทำงานบน Window, Linux, OSX</li>
<li>หน้าจอใช้งานง่าย สวยงาม</li>
<li>สามารถจัดการข้อมูลลูกค้าได้</li>
<li>สามารถจัดการข้อมูลสินค้าได้</li>
<li>สามารถสร้างการขายและพิมพ์ใบกำกับภาษีได้</li>
<li>มีระบบป้องกันการเข้าถึงข้อมูล</li>
<li>มีระบบการค้นหาข้อมูลการขาย</li>
<li>ระบบจัดการร้านค้า</li>
</ul>
<p><strong>เทคโนโลยีในการพัฒนาระบบ</strong></p>
<ul>
<li>PHP 7, PHP 8</li>
<li>MariaDB</li>
<li>Codeigniter 3.1.13</li>
<li>Bootstrap 4</li>
<li>Vuejs 2</li>
<li>jQuery 3</li>
<li>VSCode</li>
</ul>
<p><strong>รูปภาพหน้าจอ</strong></p>
 [<a href="https://www.itoffside.com/source-code-e-invoice-print/">See image gallery at www.itoffside.com</a>] 
<p><strong>*สนับสนุนโปรแกรม eInvoice*</strong><br />
<span style="color: #ff9900;"><strong>350 บาท</strong></span><span class="text_exposed_show"><br />
ธนาคารไทยพาณิชย์<br />
เลขบัญชี 351-253589-0</span></p>
<p><strong>ดาวน์โหลด<br />
</strong>inbox เพจ&nbsp;<a href="https://www.facebook.com/itoffside" target="_blank" rel="noopener">https://www.facebook.com/itoffside</a><br />
หรือ ติดต่อที่ไลน์ไอดี @eke8377p (มี @ ข้างหน้าด้วย)</p>
<p><strong>LINE ID:</strong></p>
<p><img loading="lazy" decoding="async" class="" src="https://qr-official.line.me/L/GjDKhMhfT9.png" width="223" height="223"></p><p>The post <a href="https://www.itoffside.com/source-code-e-invoice-print/">Source code ระบบ การขาย, พิมพ์ใบกำกับภาษี/ใบเสร็จรับเงิน</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/source-code-e-invoice-print/feed/</wfw:commentRss>
			<slash:comments>5</slash:comments>
		
		
			</item>
		<item>
		<title>แจกระบบจัดการเอกสาร โดยใช้ Laravel 5 Framework [PHP+MySQL]</title>
		<link>https://www.itoffside.com/sourcecode-ecdocument-laravel-php-mysql/</link>
					<comments>https://www.itoffside.com/sourcecode-ecdocument-laravel-php-mysql/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Sat, 02 Jun 2018 18:28:21 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[database]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[PHP Framework]]></category>
		<category><![CDATA[php7]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=2843</guid>

					<description><![CDATA[<p>ระบบเอกสารที่ผมได้ทำขึ้นมาใช้เครื่องมือในการพัฒนาคือ VSCODE และ Framework ของ ภาษา PHP คือ Laravel 5.6 ส่วน CSS ใช้ Framework Bootstrap 4.1 ในการพัฒนาเช่นกัน ซึ่งไว้ว่าการแจกจ่าย Source code จะเป็นตัวอย่าง code ให้กับผู้ที่สนใจศึกษา Laravel เหมือนผมเช่นกัน และระบบที่ผมนำมาแจกนั้นใช้ Template จาก Pik...</p>
<p>The post <a href="https://www.itoffside.com/sourcecode-ecdocument-laravel-php-mysql/">แจกระบบจัดการเอกสาร โดยใช้ Laravel 5 Framework [PHP+MySQL]</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p>ระบบเอกสารที่ผมได้ทำขึ้นมาใช้เครื่องมือในการพัฒนาคือ VSCODE และ Framework ของ ภาษา PHP คือ Laravel 5.6 ส่วน CSS ใช้ Framework Bootstrap 4.1 ในการพัฒนาเช่นกัน ซึ่งไว้ว่าการแจกจ่าย Source code จะเป็นตัวอย่าง code ให้กับผู้ที่สนใจศึกษา Laravel เหมือนผมเช่นกัน และระบบที่ผมนำมาแจกนั้นใช้ Template จาก <a href="https://www.pikeadmin.com/" target="_blank" rel="noopener">PikeAdmin</a> ซึ่งมีการใช้ bootstrap 4 ในการทำ Template และในสุดท้ายนี้หากใครมีปัญหาการติดตั้ง สามารถแสดงความเห็นไว้ด้านล่างนี้นะครับ<span id="more-2843"></span></p>
<p>ระบบเอกสารมีตาราง 3 ตารางได้แก่ ตาราง users, categories, documents</p>
<p><strong>ความสามารถของโปรแกรม</strong></p>
<ol>
<li>สามารถกำหนดสิทธิ์การเข้าถึงตามผู้ใช้และผู้ดูแลได้ โดยผู้ใช้สามารถอ่านเอกสารได้อย่างเดียว</li>
<li>เอกสารสามารถอัพโหลดไฟล์ได้เฉพาะนามสกุล PDF และป้องกันไม่ให้อัพโหลดนามสกุลอื่น</li>
<li>มีหมวดหมู่เพื่อจำแนกประเภทเอกสารได้</li>
<li>มีระบบตรวจสอบสิทธิ์การเข้าถึง โดยต้องระบบทุกครั้งที่ใช้งาน</li>
</ol>
<p><strong>ความต้องการของโปรแกรม</strong></p>
<ol>
<li>PHP version 7.1.3 หรือมากกว่า</li>
<li>ฐานข้อมูล maria DB</li>
</ol>
<p><strong>ทดสอบการใช้งาน</strong></p>
<p>demo link <a href="https://www.bahtsoft.com/demo_ecdocument" target="_blank" rel="noopener">https://www.bahtsoft.com/demo_ecdocument</a><br />
username : tawatsak<br />
password : 123456</p>
<p><strong>ดาวน์โหลด</strong></p>
<p>[sociallocker]<a href="https://github.com/ipball/ecdocument2" target="_blank" rel="noopener">https://github.com/ipball/ecdocument2</a>[/sociallocker]</p>
<p><strong>การติดตั้ง</strong></p>
<ol>
<li>ดาวน์โหลด Project มาแล้ว เปิด Command line เข้าไปโฟล์เดอร์ Project</li>
<li>พิมพ์ composer install</li>
<li>พิมพ์ php artisan key:generate</li>
<li>สร้างฐานข้อมูล และ ตั้งค่าข้อมูลในไฟล์ .env</li>
<li>พิมพ์ php artisan migrate</li>
<li>พิมพ์ npm install</li>
<li>พิมพ์ npm run dev</li>
<li>พิมพ์ php artisan serve</li>
<li>เข้าเว็บ http://127.0.0.1:8000</li>
<li>ตั้งค่ากำหนดสิทธิ์อัพโหลดไฟล์ที่โฟล์เดอร์ storage ให้ทุกคนสามารถอัพโหลดได้ (CHMOD 777)</li>
</ol>
<p>** ขั้นตอนที่ 5 หากไม่ใช้ migrate สามารถ import sql ได้ (ไฟล์ฐานข้อมูลอยู่ใน root project)</p>
<p>** คู่มือเพิ่มเติม <a href="https://laravel.com/docs" target="_blank" rel="noopener">https://laravel.com/docs</a></p>
<p>*********<br />
<span style="color: #0000ff;"><strong>Special Thanks</strong></span><br />
*********<br />
ขอขอบคุณทุกๆท่านที่ทำให้นักพัฒนามีแรงบรรดาลใจในการพัฒนาต่อไปโดยการ บอกต่อ(Share)<br />
ธวัชศักดิ์ แตงเอี่ยม<br />
ขอบคุณครับ</p>
<p><strong>รูปภาพโปรแกรม</strong></p>
<p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-2844" src="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-01-1024x564.jpg" alt="" width="660" height="364" srcset="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-01-1024x564.jpg 1024w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-01-300x165.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-01-768x423.jpg 768w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-01.jpg 1661w" sizes="auto, (max-width: 660px) 100vw, 660px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-2845" src="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-02-1024x628.jpg" alt="" width="660" height="405" srcset="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-02-1024x628.jpg 1024w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-02-300x184.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-02-768x471.jpg 768w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-02.jpg 1281w" sizes="auto, (max-width: 660px) 100vw, 660px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-2846" src="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-03-1024x595.jpg" alt="" width="660" height="383" srcset="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-03-1024x595.jpg 1024w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-03-300x174.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-03-768x446.jpg 768w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-03.jpg 1432w" sizes="auto, (max-width: 660px) 100vw, 660px" /></p>
<p><img loading="lazy" decoding="async" class="alignnone size-large wp-image-2847" src="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-04-1024x595.jpg" alt="" width="660" height="383" srcset="https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-04-1024x595.jpg 1024w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-04-300x174.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-04-768x446.jpg 768w, https://www.itoffside.com/wp-content/uploads/2018/06/ecdocument-04.jpg 1432w" sizes="auto, (max-width: 660px) 100vw, 660px" /></p><p>The post <a href="https://www.itoffside.com/sourcecode-ecdocument-laravel-php-mysql/">แจกระบบจัดการเอกสาร โดยใช้ Laravel 5 Framework [PHP+MySQL]</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/sourcecode-ecdocument-laravel-php-mysql/feed/</wfw:commentRss>
			<slash:comments>33</slash:comments>
		
		
			</item>
		<item>
		<title>ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax)</title>
		<link>https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/</link>
					<comments>https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Sat, 06 Jan 2018 18:26:12 +0000</pubDate>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Codeigniter]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[codeigniter]]></category>
		<category><![CDATA[DataTables]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[PHP Framework]]></category>
		<category><![CDATA[php workshop]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=2784</guid>

					<description><![CDATA[<p>สวัสดีครับคุณผู้อ่านทุกท่าน เมื่อคราวที่แล้ว ผมได้มีการลงบทความ การใช้งาน Datatables แบบบ้านๆ โดยใช้ PHP ธรรมดาในการ ทำงาน ซึ่งทางผมเองคาดว่าผู้อ่าน จะได้รับประโยนช์จากบทความ ไม่มากก็น้อยครับ ดังนั้นในบทความนี้ ผมก็เลยมาสอนการใช้ Datatables กับ Codeigniter ว่าต้องทำอย่างไรบ้าง เริ่มจากตรงไหนบ้าง ซึ่...</p>
<p>The post <a href="https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/">ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax)</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p><em>สวัสดีครับคุณผู้อ่านทุกท่าน</em> เมื่อคราวที่แล้ว ผมได้มีการลงบทความ การใช้งาน Datatables แบบบ้านๆ โดยใช้ <strong>PHP</strong> ธรรมดาในการ ทำงาน ซึ่งทางผมเองคาดว่าผู้อ่าน จะได้รับประโยนช์จากบทความ ไม่มากก็น้อยครับ</p>
<p>ดังนั้นในบทความนี้ ผมก็เลยมาสอนการใช้ <strong>Datatables</strong> กับ <strong>Codeigniter</strong> ว่าต้องทำอย่างไรบ้าง เริ่มจากตรงไหนบ้าง ซึ่งบทความนี้เหมาะกับคนที่เคยเขียน Codeigniter และเขียน <strong>javascript</strong> พอได้ ครับ<span id="more-2784"></span></p>
<p><span style="color: #ff00ff;">Demo</span><br />
<a href="http://sysapp.itoffside.com/datatables_ci/" target="_blank" rel="noopener">http://sysapp.itoffside.com/datatables_ci/</a></p>
<p><span style="color: #ff00ff;">Download</span><br />
<a href="https://github.com/ipball/datatables_ci/archive/master.zip" target="_blank" rel="noopener">https://github.com/ipball/datatables_ci/archive/master.zip<br />
</a></p>
<p><span style="color: #ff00ff;">Clone git</span><br />
<a href="https://github.com/ipball/datatables_ci.git" target="_blank" rel="noopener">https://github.com/ipball/datatables_ci.git</a></p>
<p><span style="color: #000080;"><strong>สิ่งที่ต้องเตรียม</strong></span><br />
1. ไฟล์ <a href="https://datatables.net/download" target="_blank" rel="noopener">plugins Datatables</a><br />
2. ไฟล์ <a href="https://jquery.com/download/" target="_blank" rel="noopener">jQuery</a><br />
3. <a href="http://getbootstrap.com/docs/3.3/" target="_blank" rel="noopener">Bootstrap framework</a><br />
4. <a href="https://www.codeigniter.com/" target="_blank" rel="noopener">Codeiniter framework</a><br />
5. <a href="https://raw.githubusercontent.com/ipball/datatables_ci/master/datatables.sql" target="_blank" rel="noopener">ฐานข้อมูล</a></p>
<p><em>เริ่มต้นกันเลยครับ</em></p>
<p>สร้างฐานข้อมูลชื่อ datatables แล้ว import ไฟล์ sql (ในข้อ 5)<br />
กำหนด application/config/config.php<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2810" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-10.jpg" alt="datatables-with-codeigniter-10" width="560" height="94" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-10.jpg 560w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-10-300x50.jpg 300w" sizes="auto, (max-width: 560px) 100vw, 560px" /></p>
<p>กำหนด application/config/database.php ให้ตรงตามค่าเซฟเวอร์<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2811" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-09.jpg" alt="datatables-with-codeigniter-09" width="481" height="422" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-09.jpg 481w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-09-300x263.jpg 300w" sizes="auto, (max-width: 481px) 100vw, 481px" /></p>
<p>ให้เราสร้างไฟล์ <strong>index.php</strong> ไว้ในไฟล์ <span style="color: #000080;">Application/view/</span><br />
จะได้เป็น <span style="color: #000080;">Application/view/index.php</span></p>
<p><em>ต่อมาให้เรา</em>ทำการ Include ไฟล์ jquery, bootstrap, dataTables ไว้ &lt;body&gt; นะครับ จากตัวอย่างไว้ ล่างสุดของ body<br />
โดยไฟล์ที่เพิ่มจะมีด้วยกัน 4 ไฟล์นะครับ ซึ่งมี jquery, bootstrap, datatables(2 ไฟล์)<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2798" src="https://www.itoffside.com/wp-content/uploads/2017/12/datatables-with-codeigniter-01.jpg" alt="datatables-with-codeigniter-01" width="963" height="278" srcset="https://www.itoffside.com/wp-content/uploads/2017/12/datatables-with-codeigniter-01.jpg 963w, https://www.itoffside.com/wp-content/uploads/2017/12/datatables-with-codeigniter-01-300x87.jpg 300w, https://www.itoffside.com/wp-content/uploads/2017/12/datatables-with-codeigniter-01-768x222.jpg 768w" sizes="auto, (max-width: 963px) 100vw, 963px" /></p>
<p>จากนั้น เพิ่ม css ไฟล์ไว้ใน &lt;header&gt; ตามรูปภาพด้านล่าง<br />
โดยมีด้วยกัน 2 ไฟล์คือ ไฟล์ bootstrap, datatables สำหรับ bootstrap<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2799" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-02.jpg" alt="datatables-with-codeigniter-02" width="941" height="192" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-02.jpg 941w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-02-300x61.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-02-768x157.jpg 768w" sizes="auto, (max-width: 941px) 100vw, 941px" /></p>
<p>เมื่อเรา include ไฟล์ js, css มาครบแล้วที่นี้เราก็พร้อมที่จะใช้งานแล้วครับ แต่เราต้องสร้างตาราง ไว้ใน &lt;body&gt; กันก่อน สร้างตารางตามรูปภาพด้านล่างนี้เลยนะครับ<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2800" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-03.jpg" alt="datatables-with-codeigniter-03" width="744" height="362" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-03.jpg 744w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-03-300x146.jpg 300w" sizes="auto, (max-width: 744px) 100vw, 744px" /></p>
<p>จากนี้จะเป็นการเรียกใช้งาน datatables โดยใช้ jQuery นะครับ โดยผมจะนำโค้ดไว้ล่างสุด ก่อน &lt;/body&gt; ลองดูตัวอย่างโค้ดครับ</p><pre class="crayon-plain-tag">&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
      var table = $('#table_id').DataTable({
        pageLength: 10,
        serverSide: true,
        processing: true,
        ajax: {
          url:'&lt;?php echo site_url('customer/find_with_page'); ?&gt;'
        },
        'columns':[
        {
          data:'name',
          render: function(data, type, row){
            return '&lt;a href="&lt;?php echo site_url('customer/edit/'); ?&gt;'+row['id']+'"&gt;'+data+'&lt;/a&gt; ';
          }
        },
        {
          data:'phone'
        },
        {
          data:'fax'
        },
        {
          data:'state',
          render: function (data,type,row){
            var active = '&lt;span class="label label-success"&gt;ใช้งาน&lt;/span&gt;';
            var inactive = '&lt;span class="label label-danger"&gt;ยกเลิก&lt;/span&gt;';
            var status = (data==true) ? active : inactive;
            return status;
          }
        },
        {
          data:'id',
          render:function(data,type,row){
            var dataName = row['name'];
            var btnDelete = '&lt;a href="#" data-href="&lt;?php echo site_url('customer/delete'); ?&gt;" data-id="'+data+'" data-name="'+dataName+'" role="button" class="btn btn-danger btn-xs"&gt;&lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt; ลบ&lt;/a&gt;';
            return btnDelete;
          },
          orderable: false
        }
        ]
      });
    })
  &lt;/script&gt;</pre><p>ภาพตัวอย่าง<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2801" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-04.jpg" alt="datatables-with-codeigniter-04" width="921" height="636" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-04.jpg 921w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-04-300x207.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-04-768x530.jpg 768w" sizes="auto, (max-width: 921px) 100vw, 921px" /></p>
<p><strong><span style="color: #000080;">อธิบายโค้ดคำสั่ง</span></strong><br />
โดยสังเกตุ นะครับ ว่าโค้ด jQueryส่วนของ var table = <strong><em>$(&#8216;#table_id&#8217;)</em></strong> จะต้องตรงกับ &lt;table id=&#8221;<em><strong>table_id</strong></em>&#8220;&gt; เพื่อใช้ในการอ้างอิงการทำงาน<br />
&#8211; <span style="color: #000080;">pageLength</span> หมายถึงจำนวนต่อหน้าที่แสดงผล<br />
&#8211; <span style="color: #000080;">serverSide</span> หมายถึง เปิดใช้งานโหมด server-side<br />
&#8211; <span style="color: #000080;">processing</span> หมายถึง เวลามีการเปลี่ยนแปลงข้อมูลให้แสดง label loading ขึ้นมา<br />
&#8211;  <span style="color: #000080;">ajax</span> { url:&#8230;} หมายถึงการเรียกดึงข้อมูลจาก server ในตัวอย่างดึงข้อมูลจาก site_url(&#8216;customer/find_with_page&#8217;) นั้นหมายถึง ว่าเราต้องมี controller ชื่อ Customer และ Method ชื่อ find_with_page เดี่ยวเราจะมาสร้าง Controller กันต่อครับ<br />
&#8211; &#8216;<span style="color: #000080;">columns</span>&#8216;:[] หมายถึง คอลัมน์ใน datatables มีอะไรบ้างเราสามารถกำหนดได้ที่นี้โดยอ้างอิงจากฟิล์ดข้อมูลที่เราดึงมาจาก server ด้วยครับ เช่นเราดึงข้อมูลมีฟิล์ด id, name, age ดังนั้นจะได้ &#8216;columns&#8217;:[data:&#8217;name&#8217;, data:&#8217;age&#8217;] โดยโค้ดนี้จะแสดง คอลัมน์ name, age ครับ กรณีถ้าเราต้องการ style column เราก็ใช้คำสั่ง render เช่น</p><pre class="crayon-plain-tag">'columns':[
        {
          data:'name',
          render: function(data, type, row){
            return '&lt;a href="&lt;?php echo site_url('customer/edit/'); ?&gt;'+row['id']+'"&gt;'+data+'&lt;/a&gt; ';
          }
        },</pre><p>สำหรับ <span style="color: #000080;">view/index.php</span> ก็มีเพียงเท่านี้นะครับ ต่อไปเราจะมาเขียนโค้ดในส่วนของ Controller และ Model กันต่อ</p>
<p>สร้างไฟล์ <strong>Customer.php</strong> ในโฟล์เดอร์<span style="color: #000080;"> application/controllers</span><br />
จะได้เป็น <span style="color: #000080;">application/controllers/Customer.php</span><br />
แล้วให้นำโค้ดนี้ไปวางไว้ใน ไฟล์ครับ</p><pre class="crayon-plain-tag">&lt;?php
defined('BASEPATH') or exit('No direct script access allowed');

class Customer extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this-&gt;load-&gt;model('Customer_model');
    }

    public function index()
    {
        $this-&gt;load-&gt;view('customer/index');
    }

    public function find_with_page()
    {
        $order_index = $this-&gt;input-&gt;get('order[0][column]');
        $param['page_size'] = $this-&gt;input-&gt;get('length');
        $param['start'] = $this-&gt;input-&gt;get('start');
        $param['draw'] = $this-&gt;input-&gt;get('draw');
        $param['keyword'] = trim($this-&gt;input-&gt;get('search[value]'));
        $param['column'] = $this-&gt;input-&gt;get("columns[{$order_index}][data]");
        $param['dir'] = $this-&gt;input-&gt;get('order[0][dir]');

        $results = $this-&gt;Customer_model-&gt;find_with_page($param);

        $data['draw'] = $param['draw'];
        $data['recordsTotal'] = $results['count'];
        $data['recordsFiltered'] = $results['count_condition'];
        $data['data'] = $results['data'];
        $data['error'] = $results['error_message'];

        $this-&gt;output-&gt;set_content_type('application/json')-&gt;set_output(json_encode($data));
    }
}</pre><p><span style="color: #000080;"><strong>อธิบายโค้ด</strong></span><br />
Method <strong>find_with_page</strong><br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2803" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-05.jpg" alt="datatables-with-codeigniter-05" width="678" height="237" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-05.jpg 678w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-05-300x105.jpg 300w" sizes="auto, (max-width: 678px) 100vw, 678px" /></p>
<p><em>จากรูปภาพด้านบน</em> ตัวแปรอาเรย์ $param รับค่าจาก datatables มา แล้วเรานำค่านี้ส่งไปยัง model เพื่อ query ข้อมูลตามเงื่อนไขของ datatables เช่น ต้องการแสดงหน้า 2 หรือต้องการ sort ตารางนะครับ</p>
<p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-2805" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-06-1.jpg" alt="datatables-with-codeigniter-06" width="854" height="244" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-06-1.jpg 854w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-06-1-300x86.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-06-1-768x219.jpg 768w" sizes="auto, (max-width: 854px) 100vw, 854px" /></p>
<p><em>จากรูปภาพด้านบน</em> บรรทัดที่ 27 เราใช้ model ในการ get ค่าจากฐานข้อมูลมาแล้วไว้ใน $results แล้ว ก็ส่งตอบกลับไปที่ datatables ในแบบ JSON ครับโดยจำเป็นต้องส่งไปคือข้อมูล<br />
&#8211; <span style="color: #000080;">draw</span><br />
&#8211; <span style="color: #000080;">recordsTotal</span> หมายถึงจำนวนทั้งหมดของข้อมูล<br />
&#8211; <span style="color: #000080;">recordsFiltered</span> หมายถึงจำนวนทั้งหมดของข้อมูลที่ กรองมาแล้ว<br />
&#8211; <span style="color: #000080;">data</span> หมายถึงข้อมูล เช่น name, email, phone<br />
&#8211; <span style="color: #000080;">error</span> หมายถึง error ข้อผิดพลาดจากการเรียกข้อมูล ถ้าไม่มีให้ใส่เป็นค่าว่าง</p>
<p>สำหรับ Controller มีเพียงเท่านี้ครับ แล้วเรามาเขียนส่วนของ Model ว่าทำอย่างไรถึงจะโยนข้อมูลในรูปแบบนี้มาให้ Controller</p>
<p>สำหรับ Model ให้เราสร้างไฟล์ <strong>Customer_model.php</strong> ไว้ในโฟล์เดอร์ <span style="color: #000080;">application/models</span><br />
ได้เป็น <span style="color: #000080;">application/models/Customer_model.php</span><br />
จากนั้นให้เรานำโค้ดนี้ไปใส่ในไฟล์</p><pre class="crayon-plain-tag">&lt;?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Customer_model extends CI_Model {
	public function __construct(){
		parent::__construct();
	}

	public function find_with_page($param){
		$keyword = $param['keyword'];
		$this-&gt;db-&gt;select('*');

		$condition = "1=1";
		if(!empty($keyword)){
			$condition .= " and (name like '%{$keyword}%' or phone like '%{$keyword}%')";
		}

		$this-&gt;db-&gt;where($condition);
		$this-&gt;db-&gt;limit($param['page_size'], $param['start']);
		$this-&gt;db-&gt;order_by($param['column'], $param['dir']);

		$query = $this-&gt;db-&gt;get('customer');
		$data = [];
		if($query-&gt;num_rows() &gt; 0){
			foreach($query-&gt;result() as $row){
				$data[] = $row;
			}
		}

		$count_condition = $this-&gt;db-&gt;from('customer')-&gt;where($condition)-&gt;count_all_results();
		$count = $this-&gt;db-&gt;from('customer')-&gt;count_all_results();
		$result = array('count'=&gt;$count,'count_condition'=&gt;$count_condition,'data'=&gt;$data,'error_message'=&gt;'');
		return $result;
	}
}</pre><p><span style="color: #000080;"><strong>อธิบายโค้ด</strong></span><br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2807" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-07.jpg" alt="datatables-with-codeigniter-07" width="954" height="504" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-07.jpg 954w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-07-300x158.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-07-768x406.jpg 768w" sizes="auto, (max-width: 954px) 100vw, 954px" /></p>
<p><em>จากรูปภาพด้านบน</em><br />
<strong>บรรทัด 9 &#8211; 27</strong> เป็นการ get ข้อมูลจากฐานข้อมูลโดยมีเงื่อนไขต่างๆที่รับตัวแปรมาจาก controller ครับ<br />
<strong>บรรทัดที่ 29</strong> คือ จำนวนทั้งหมดของข้อมูลแบบที่กรองข้อมูลมาแล้ว<br />
<strong>บรรทัดที่ 30</strong> คือ จำนวนข้อมูลทั้งหมด<br />
<strong>บรรทัดที่ 31</strong> คือ $result คืนค่าข้อมูลแบบ array มาโดยมี count, count_condition, data ,error_message</p>
<p>เสร็จแล้วครับ ผลลัพท์ได้เป็นดังนี้<br />
<img loading="lazy" decoding="async" class="alignnone size-large wp-image-2808" src="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-08-1024x520.jpg" alt="datatables-with-codeigniter-08" width="660" height="335" srcset="https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-08-1024x520.jpg 1024w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-08-300x152.jpg 300w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-08-768x390.jpg 768w, https://www.itoffside.com/wp-content/uploads/2018/01/datatables-with-codeigniter-08.jpg 1185w" sizes="auto, (max-width: 660px) 100vw, 660px" /></p>
<p>เราสามารถ sort column ได้ ค้นหาชื่อลูกค้าได้ สามารถกำหนด style ใน column ได้ สามารถกำหนดว่าจะแสดงกี่แถวในหนึ่งหน้าได้ ซึ่งผมว่า datatables เหมาะนำไปใช้งานเกือบทุกๆงาน ครับ<br />
จบแล้วครับสำหรับการใช้ <strong>dataTables</strong> กับ <strong>Codeigniter</strong> หากใครมีคำถามข้อสงสัยเพิ่มเติมสามารถเขียนความเห็นด้านล่างไว้เลยนะครับ</p><p>The post <a href="https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/">ใช้ Datatables กับ Codeigniter แบบ Server-Side (Ajax)</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/use-datatables-with-codeigniter-server-side-ajax/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]</title>
		<link>https://www.itoffside.com/howto-datatables-retrieve-data-ajax/</link>
					<comments>https://www.itoffside.com/howto-datatables-retrieve-data-ajax/#comments</comments>
		
		<dc:creator><![CDATA[Onmobile]]></dc:creator>
		<pubDate>Sat, 25 Mar 2017 16:04:11 +0000</pubDate>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[DataTables]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[MySQLi]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php5]]></category>
		<guid isPermaLink="false">https://www.itoffside.com/?p=2678</guid>

					<description><![CDATA[<p>DataTables เป็นส่วนเสริมของ jQuery (Javascript library) ซึ่ง Datatables เป็นเครื่องมือที่มีความหยืดหยุ่นในการใช้งาน ได้หลากหลายรูปแบบ โดย DataTables จะนำข้อมูลออกมาแสดงในรูปแบบของตาราง มีการเรียงลำดับตามคอลัมน์ มีการค้นหา และที่สำคัญสุดมีการจัดการในเรื่องของการแบ่งหน้าของตารางอีกด้วย และดึงข้อมูลแบบ...</p>
<p>The post <a href="https://www.itoffside.com/howto-datatables-retrieve-data-ajax/">การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></description>
										<content:encoded><![CDATA[<p><strong><span style="color: #ff00ff;">DataTables</span></strong> เป็นส่วนเสริมของ<span style="color: #ff00ff;"> jQuery (Javascript library)</span> ซึ่ง Datatables เป็นเครื่องมือที่มีความหยืดหยุ่นในการใช้งาน ได้หลากหลายรูปแบบ โดย DataTables จะนำข้อมูลออกมาแสดงในรูปแบบของตาราง มีการเรียงลำดับตามคอลัมน์ มีการค้นหา และที่สำคัญสุดมีการจัดการในเรื่องของการแบ่งหน้าของตารางอีกด้วย และดึงข้อมูลแบบ AJAX โดยดึงข้อมูลที่ใช้จริงมาแสดง เช่น ดึงข้อมูลที่หน้า 5 จำนวน 10 แถว เป็นต้น โดยเพียงการเขียนโค๊ดเพียงไม่กี่บรรทัดเท่านั้นเอง</p>
<p>สำหรับ source code DataTables Plugin สามารถดาวน์โหลดได้ฟรี ครับ<br />
<span id="more-2678"></span></p>
<p>ซึ่งเนื้อหาบทความนี้ จะสอนวิธีการติดตั้ง ตั้งแต่เริ่มต้นพร้อมคำอธิบาย รูปภาพประกอบกันไปเลยเพื่อให้ผู้อ่าน ได้มีความเข้าใจได้ง่ายขึ้น</p>
<p><strong><span style="color: #ff6600;">ทดสอบการใช้งาน <a style="color: #ff6600;" href="http://sysapp.itoffside.com/datatables/" target="_blank">(DEMO) คลิกที่นี้เพื่อทดสอบ</a></span></strong></p>
<p>เรามาเริ่มกันเลยดีกว่า วิธีการติดตั้งขั้นตอนแรกให้เราไปโหลด Sourcecode DataTables จากลิงค์ดาวน์โหลดจากเว็บหลักที่นี้ <a href="https://datatables.net/download/packages" target="_blank">https://datatables.net/download/packages</a><br />
<img loading="lazy" decoding="async" class="alignnone wp-image-2681 size-full" src="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-01.jpg" alt="" width="685" height="445" srcset="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-01.jpg 685w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-01-300x195.jpg 300w" sizes="auto, (max-width: 685px) 100vw, 685px" /></p>
<p>&nbsp;</p>
<p>หลักจากนั้นให้เราแตกไฟล์ Sourcecode ที่ได้โหลดมา แล้ว Copy โฟล์เดอร์ media มาทั้งหมดมาวางไว้ในภายในโปรเจคที่เราจะเรียกใช้งานนะครับ</p>
<p>ต่อจากนั้นโหลดไฟล์ฐานข้อมูลที่ชื่อ datatables.sql เพื่อใช้สำหรับเป็นข้อมูลทดสอบสำหรับบทความนี้นะครับ <a href="https://raw.githubusercontent.com/ipball/ex_datatables/master/datatables.sql" target="_blank">คลิกเพื่อดาวน์โหลด</a></p>
<p>ดาวน์โหลดไฟล์ ssp.class.php <a href="https://raw.githubusercontent.com/ipball/ex_datatables/master/ssp.class.php" target="_blank">คลิกเพื่อดาวน์โหลด</a> ไฟล์นี้คือชุดคำสั่งเรียกข้อมูลจาก mysql</p>
<p>ดาวน์โหลดมาแล้วให้ทำการ import ข้อมูลลงสู่ฐานข้อมูล วิธีการคือ<br />
1. สร้างชื่อฐานข้อมูลในตัวอย่างบทความนี้ใช้ชื่อ datatables พอใส่ชื่อเสร็จกดปุ่ม Create ได้เลย<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2682" src="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-02.jpg" alt="" width="549" height="200" srcset="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-02.jpg 549w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-02-300x109.jpg 300w" sizes="auto, (max-width: 549px) 100vw, 549px" /></p>
<p>2. คลิกเลือกเมนู import ตรงเมนูบน<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2683" src="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-03.jpg" alt="" width="378" height="212" srcset="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-03.jpg 378w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-03-300x168.jpg 300w" sizes="auto, (max-width: 378px) 100vw, 378px" /></p>
<p>3. คลิกเลือกปุ่ม &#8220;เลือกไฟล์&#8221;แล้วเลือกไฟล์ฐานข้อมูลที่เราดาวน์โหลดมาเมื่อกี้ครับ (datatables.sql)<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2684" src="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-04.jpg" alt="" width="431" height="300" srcset="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-04.jpg 431w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-04-300x209.jpg 300w" sizes="auto, (max-width: 431px) 100vw, 431px" /></p>
<p>หลักจากที่เรา import ข้อมูลเสร็จแล้ว ขั้นตอนต่อไปเป็นการเรียกใช้งานนะครับ<br />
<span style="color: #ff0000;"><em>การเรียกใช้งานจำเป็นต้องมีไฟล์ jquery นะครับ ถ้าหากไม่มี datatables จะไม่ทำงาน!</em></span><br />
1. ให้ include ไฟล์ js &#8212; jquery.dataTables.js และไฟล์ css &#8212; jquery.dataTables.min.css ไว้บน &lt;header&gt;</p><pre class="crayon-plain-tag">&lt;link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.min.css"&gt;
&lt;script src="media/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="media/js/jquery.dataTables.js" type="text/javascript"&gt;&lt;/script&gt;</pre><p>2. ในส่วนของเนื้อหาที่จะแสดงตารางข้อมูล ให้นำโค๊ดตัวอย่างด้านล่างนี้ใส่ไปครับ</p><pre class="crayon-plain-tag">&lt;table id="example" class="display" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;First name&lt;/th&gt;
          &lt;th&gt;Last name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tfoot&gt;
        &lt;tr&gt;
          &lt;th&gt;First name&lt;/th&gt;
          &lt;th&gt;Last name&lt;/th&gt;
          &lt;th&gt;Position&lt;/th&gt;
          &lt;th&gt;Office&lt;/th&gt;
          &lt;th&gt;Start date&lt;/th&gt;
          &lt;th&gt;Salary&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/tfoot&gt;
    &lt;/table&gt;</pre><p>3. เขียนคำสั่ง javascript ให้เรียกใช้งาน</p><pre class="crayon-plain-tag">&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
    $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": "server_processing.php"
    } );
  } );
  &lt;/script&gt;</pre><p><span style="color: #ff00ff;"><strong>คำอธิบาย</strong>ของโค๊ดนี้คือ ดึงข้อมูลแบบ server-side โดยให้ไฟล์ server_processing.php ประมวลผลข้อมูลแล้วนำกลับมาใช้ที่หน้าตารางนี้ โดยโค๊ดของไฟล์ server_processing.php จะเรียกข้อมูลมาเฉพาะที่จะแสดงผลเท่านั้น เช่นดึงข้อมูลหน้า 5 และดึงมาเพียง 10 แถวเท่านั้น</span><br />
ให้เราสร้างไฟล์ server_processing.php และนำโค๊ดด้านล่างนี้วาง แล้วกด Save ครับ</p><pre class="crayon-plain-tag">&lt;?php
//ชื่อตาราง
$table = 'datatables_demo';
//ชื่อคีย์หลัก
$primaryKey = 'id';
//ข้อมูลอะเรที่ส่งป datables
$columns = array(
  array( 'db' =&gt; 'first_name', 'dt' =&gt; 0 ),
  array( 'db' =&gt; 'last_name',  'dt' =&gt; 1 ),
  array( 'db' =&gt; 'position',   'dt' =&gt; 2 ),
  array( 'db' =&gt; 'office',     'dt' =&gt; 3 ),
  array(
    'db' =&gt; 'start_date',
    'dt' =&gt; 4,
    'formatter' =&gt; function( $d, $row ) {
      return date( 'jS M y', strtotime($d));
    }
  ),
  array(
    'db' =&gt; 'salary',
    'dt' =&gt; 5,
    'formatter' =&gt; function( $d, $row ) {
      return '$'.number_format($d);
    }
    )
  );

  //เชื่อต่อฐานข้อมูล
  $sql_details = array(
    'user' =&gt; 'root',
    'pass' =&gt; '',
    'db'   =&gt; 'datatables',
    'host' =&gt; 'localhost'
  );
  // เรียกใช้ไฟล์ spp.class.php
  require( 'ssp.class.php' );

//ส่งข้อมูลกลับไปเป็น JSON โดยข้อมูลถูกดึงมาจากการเรียกใช้ class ssp
  echo json_encode(
      SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
  );</pre><p><strong><span style="color: #ff00ff;">คำอธิบาย</span></strong><br />
<span style="color: #ff00ff;"> เป็นไฟล์ที่ใช้ในการดึงข้อมูลจากฐานข้อมูลมาแล้วมาจัดรูปแบบข้อมูลให้อยู่ในแบบที่ต้องการ โดยจัดเป็นแบบ Array ส่วนไฟล์ที่เรียกใช้ฐานข้อมูลคือไฟล์ ssp.class.php</span><br />
<span style="color: #ff00ff;"> ในส่วนของรายละเอียดการเชื่อมต่อฐานข้อมูลตรงนี้ เราต้องใส่ให้ถูกต้องกับข้อมูล Server ของเราด้วยครับ</span></p>
<p>ลองดูผลลัพธ์ด้านล่าง<br />
<img loading="lazy" decoding="async" class="alignnone size-full wp-image-2686" src="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-05.jpg" alt="" width="921" height="527" srcset="https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-05.jpg 921w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-05-300x172.jpg 300w, https://www.itoffside.com/wp-content/uploads/2017/03/datatables-ajax-processing-05-768x439.jpg 768w" sizes="auto, (max-width: 921px) 100vw, 921px" /></p>
<p>ต่อ&#8230; สำหรับใครต้องการผลรวมแต่ละหน้า สามารถทำได้โดยเขียน script javascript เพิ่มเติมใน</p><pre class="crayon-plain-tag">$('#example').DataTable( {</pre><p>ตามโค๊ดด้านล่างนี้นะครับ</p><pre class="crayon-plain-tag">"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 5, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 5 ).footer() ).html(
                '$'+pageTotal +' total'
            );
        }</pre><p>&nbsp;</p>
<p>จบแล้วสำหรับบทความนี้<br />
สำหรับ Source code ตัวอย่าง แบบเต็มสามารถดาวน์โหลดได้ที่ <a href="https://github.com/ipball/ex_datatables/archive/master.zip" target="_blank">https://github.com/ipball/ex_datatables/archive/master.zip</a></p>
<p>หรือ Clone Git <a href="https://github.com/ipball/ex_datatables" target="_blank">https://github.com/ipball/ex_datatables</a></p>
<p>ทางผู้เขียนคงคิดว่าน่าจะมีประโยชน์สำหรับคนที่เข้ามาอ่านไม่มากก็น้อย แต่ก็ดีใจครับ ที่ยังมี ฮ่าๆ หากมีข้อสงสัยตรงไหน คอมเม้นไว้ด้านล่างเลยครับ&#8230;ขอบคุณครับ</p><p>The post <a href="https://www.itoffside.com/howto-datatables-retrieve-data-ajax/">การติดตั้งใช้งาน Datatables กับการดึงข้อมูลแบบ AJAX Server-side [PHP+MySQL]</a> first appeared on <a href="https://www.itoffside.com">itOffside.com | บทความการเขียนโปรแกรม เรื่องราวข้อมูลเทคโนโลยี</a>.</p>]]></content:encoded>
					
					<wfw:commentRss>https://www.itoffside.com/howto-datatables-retrieve-data-ajax/feed/</wfw:commentRss>
			<slash:comments>19</slash:comments>
		
		
			</item>
	</channel>
</rss>
