ระบบตะกร้าสินค้า(Shopping Cart) ตอนที่ 1 หยิบสินค้าใส่ตะกร้า(Add To Cart) , แก้ไขจำนวน , ลบรายการสินค้าในตะกร้า

   ได้เวลาที่ต้องอัปเดตบทความกันซะหน่อยแล้วคับ เดือนนี้มีบทความให้ท่านได้อ่าน เพียงแค่บทความเดียวเท่านั้นเอง เหตุผลที่หายไปไม่ใช่ว่าผมติดธุระ งานยุ่งอะไรหรอกคับ เป็นเพราะความขี้เกียจมากกว่า สำหรับเนื้อหาการทำระบบ E-Commerce ด้วย PHP + MySQL ในวันนี้ ผมจะสอนท่านทำตะกร้าสินค้า(Shopping Cart) โดยตอนนี้จะสอน Add To Cart กับ Update จำนวนสินค้า ลบสินค้าในตะกร้ากันก่อนคับ  มาดูผลลัพธ์กันก่อนเลยคับ ให้ท่านคลิกที่Iconรูปตะกร้า
    สำหรับแนวคิดของการทำระบบนี้ของผม คือ การสร้างตัวแปรแบบ Session ขึ้นมา เพื่อเก็บค่าข้อมูลของสินค้าที่ลูกค้าคลิกสั่งซื้อ ดังรูป

แสดงการคลิกสั่งซื้อสินค้า

ค้นหาสินค้า (Product Search)

บทความสอนทำร้านค้าออนไลน์ (เว็บขายของ) (E-Commerce Website) ด้วย PHP + MySQL ผมจะสอนท่านทำระบบค้นหาสินค้าในร้านแบบง่ายๆกันคับ โดยเราจะสร้างFilterขึ้นมาแค่ตัวเดียวโดยใช้ Textfiled สำหรับเอาไว้กรอกข้อความหรือ Keyword ที่ต้องการค้นหา และเราจะใช้คำสั่ง LIKE ของ sql เพื่อค้นหาข้อมูลจากColumn  pd_name ว่าพบข้อความตรงกันหรือไม  หากพบข้อความในใน Column pd_name ตรงกับ Keyword ที่เราป้อน ก้อให้มันแสดงออกมาตามจำนวนที่เจอ หากไม่พบก็ให้ข้อความว่า “ไม่พบข้อมูลที่ค้นหา” อย่างนี้เป็นต้น  ดูผลลัพธ์ของโปรแกรมกันก่อนเลยคับ (กลัวจะหาว่าผมโม้ เลยตัองโชว์ผลลัพธ์ให้ดูกันหน่อยแหล่ะ)
เปิดโปรแกรม Dreamweaver ขึ้นมาคับ สร้างไฟล์ขึ้นมา 2 ไฟล์ ตั้งชื่อว่า searchpd.php และ searchpd_result.php

แสดงสินค้าหน้าร้าน ตอนที่ 4 ซูมรูปสินค้าด้วย TopUp (Jquery)

ดูผลลัพธ์ของโปรแกรมก่อนเลยคับ โดยให้คลิกที่รูปเพื่อขยาย
Blog สอนสร้าง Web E-Commerce ด้วย PHP + MySQL ในวันนี้ผมจะสอนเขียน Code เพื่อ ขยายรูป(Zoom Images)สินค้าโดยใช้ Pugin ของ Jquery ตัวนึง ชื่อว่า TopUp ให้ท่านDownload จากตรงนี้เลยคับ ซึ่งผมได้แก้ไข Code บางส่วนให้สามารถใช้งานร่วมกับระบบ E-Commerce นี้คับ หลังจากที่ท่านได้Download ไฟล์ที่ผมแจกให้เรียบร้อยแล้ว ให้ทำการแตกไฟล์ จะได้ Folder ที่ชื่อว่า zoomimg ให้Copy ทั้ง Folder ไปไว้ใน Folder jquery ประมาณนี้คับ

กำหนดPathเก็บFolder zoomimg

จากนั้นให้เปิดไฟล์ fp_showpd_detail.php ขึ้นมา  ในส่วนของแท็ก head ให้พิมพ์ Code ลงไปตามนี้คับ

แสดงสินค้าหน้าร้าน ตอนที่ 3 แสดงรายละเอียดของสินค้า

หลังจากที่ผมได้สอนท่านเขียนCodeแสดงรายการสินค้าทั้งหมดแล้ว เว็บไซต์ E-Commerce หรือร้านค้าออนไลน์ เว็บขายของ ตอนต่อไปนี้ จะสอนท่านเขียนCode PHP แสดงรายละเอียดของสินค้าที่เราเลือกคับ ดู ผลลัพธ์ ของโปรแกรมกันก่อนคับ จะเห็นได้ว่ารายการสินค้าที่เราเอามาแสดงนั้น จะมีข้อมูลแค่ชื่อสินค้ากับราคาสินค้าเท่านั้นดังรูป

ดังนั้นเราจึงต้องดึงข้อมูลที่เหลือ ซึ่งยังไม่ได้แสดงให้ลูกค้าเห็น เช่น หมวดสินค้า , รายละเอียดสินค้า เอาออกมาแสดง ดังรูปคับ

แสดงสินค้าหน้าร้าน ตอนที่ 2 แสดงสินค้าทั้งหมดในร้าน

บทความสอน เว็บ E-Commerce หรือร้านค้าออนไลน์ (เว็บขายของ) ด้วย PHP ตอนนี้ผมจะสอนท่าน เขียนคำสั่ง PHP แสดงรายการสินค้าทั้งหมด ที่เราได้เพิ่มเข้าไป โดยสามารถเลือกแสดงสินค้าได้ตามสถานะสินค้า ซึ่งก็คือการ แสดงสินค้าค้ามาใหม่ทั้งหมด แสดงสินค้าแนะนำทั้งหมด แสดงสินค้าขายดีทั้งหมด หรือ จะแสดงสินค้าทั้งสามสถานะรวมกันทั้งหมดก็ได้คับ มาลุยกันเลยคับ
หากท่านได้ศึกษาบทความตอนที่1มาบ้างแล้ว ก็พอจะเข้าใจคำสั่งของการแสดงผลข้อมูลโดยมีการแบ่งข้อมูลออกเป็นคอลัมน์ตามจำนวนที่เราสามารถกำหนดได้ และโค๊ดการแบ่งหน้าข้อมูล บทความตอนนี้เป็นตอนที่ต่อจากบทความตอนที่แล้ว ซึ่งจะมีความสมบูรณ์ของโปรแกรมมาขึ้น เพราะผมได้ปรับปรุงแก้ไขโค๊ดบางส่วน ซึ่งท่านจำเป็นจะต้องแก้ไขคำสั่งตามที่ผมจะบอกต่อไปนี้คับ

แสดงสินค้าหน้าร้าน ตอนที่ 1 แสดงรายการสินค้าใหม่ , สินค้าแนะนำ , และสินค้าขายดี ในหน้าHome Page

ถึงเวลาที่ต้องอัปเดตบทความสอนพัฒนาร้านค้าออนไลน์ เว็บขายของ ด้วยPHPแล้วล่ะคับ เดือนนี้แทบไม่ได้ทำบทความให้อ่านกันเลย และเนื้อหาที่จะสอน เริ่มเป็นระดับ Advance กันแล้ว หลังจากที่ท่านได้อ่านบทความ ระบบทะเบียนสินค้า(หลังร้าน) ซึ่งเป็นส่วนจัดการของ Admin บทความนี้เราจะสอนแสดงสินค้าที่เราเพิ่มเข้าไป นำมาแสดงให้ลูกค้าเห็นกันคับ
อันดับแรกผมได้สร้างไฟล์ขึ้นมา 2 ไฟล์ ไฟล์แรกตั้งชื่อว่า function.php แล้วพิมพ์ Code PHP เหล่านี้ลงไป

ระบบทะเบียนสินค้า ตอนที่ 4 แก้ไขข้อมูลสินค้า แก้ไขรูป และลบรูปสินค้า (ตอนจบ

หลังจากที่ได้สอนท่าน ทำระบบทะเบียนสินค้า ในส่วนของการเพิ่ม ลบ แสดง ข้อมูลของ หมวดสินค้า และรายการสินค้าแล้ว บทความตอนนี้ก็เหลือแค่การแก้ไขข้อมูลรายการสินค้าเท่านั้น เรามาเริ่มกันเลยคับ

ให้ท่านดีไซน์เว็บเพจของท่านประมาณนี้คับ

ระบบทะเบียนสินค้า ตอนที่ 3 เพิ่ม/แสดง/ลบ รายการสินค้า

ระบบทะเบียนสินค้า ตอนที่ 3  เพิ่ม/แสดง/ลบ รายการสินค้า
วันนี้ขออัปเดตบล็อกของตัวเองซะหน่อยคับ ผมสอนแค่การเพิ่มรายการสินค้า แสดงรายการสินค้า และลบรายการสินค้าก่อนคับ ส่วนการแก้ไขข้อมูลสินค้า ,แก้ไขรูป ,ลบรูปสินค้า จะขออธิบายในบทความตอนต่อไปคับ เนื่องจากว่า เนื้อหาที่จะนำเสนอมีค่อนข้างเยอะ ไม่สามารถอธิบายทั้งหมดได้ในบทความนี้คับ  ก่อนอื่นท่านต้องกลับไปศึกษา บทความตอนที่ 1 กับ ตอนที่ 2 ก่อนคับ เผื่อจะได้ไม่งงกับบทความตอนนี้ เพราะมันต่อยอดมาจากบทความตอนที่1กับตอนที่2นั้นเองคับ
ผมได้ดีไซน์เว็บเพจของผม ดังนี้คับ

ระบบทะเบียนสินค้า ตอนที่ 2 เพิ่ม แสดง ลบ หมวดหมู่สินค้า

ต่อจากบทความตอนที่ 1 เรื่องของการออกแบบและการสร้างฐานข้อมูล บทความตอนนี้จะสอนท่านเขียนโปรแกรม เพื่อเพิ่มแสดง ลบ หมวดหมู่สินค้า (แต่ไม่มีแก้ไขเพราะไม่จำเป็น) ผมได้ออกแบบหน้าเว็บเพจตามในตอนที่ 1 เรียบร้อยแล้วคับ เรามาดูหน้าตาที่ผมออกแบบไว้กันเลย ส่วนฐานข้อมูลของผมชื่อ db_exshop table คือ tb_category คับ

ระบบทะเบียนสินค้า ตอนที่ 1 การสร้างเทเบิลเพื่อจัดเก็บข้อมูลสินค้าและการออกแบบเว็บเพจ

บทความต่อไปนี้ ท่านได้เห็นภาพของระบบE-Commerceมากยิ่งขึ้น เราจะสอนท่านทำระบบจัดการข้อมูลสินค้าภายในร้านของท่าน โดยระบบนี้ เราจะสอนท่านทำคือ การเพิ่ม แสดง ลบ แก้ไข หมวดหมู่และรายการสินค้า สำหรับสินค้าที่ผมจะใช้ประกอบการสอนในบทความนี้คือ ตุ๊กตาถักไหมพรม คับ
ผมได้สร้างเทเบิลหมวดหมู่สินค้าและเทเบิลรายการสินค้า ดังรูปคับ

แสดงความสัมพันธ์ระหว่าง table tb_category(หมวดหมู่สินค้า)และ tb_product(รายการสินค้า)

ระบบข้อมูลส่วนตัวของสมาชิก ตอนที่ 3 การเขียนคำสั่งเพื่อ Update ข้อมูลในฐานข้อมูล MySQL ของสมาชิก (ตอนจบ)

บทความตอนนี้เป็นบทความตอนสุดท้ายของระบบข้อมูลส่วนตัวของสมาชิก ผมจะสอนเขียนคำสั่ง PHP สำหรับ Update ข้อมูลในฐานข้อมูล db_exshop ของเทเบิล tb_member ผลลัพธ์ของโปรแกรมจะเป็นดังนี้คับ
หากสมาชิกต้องการแก้ไขข้อมูลเช่น ชื่อ-สกุล , เบอร์โทร เป็นต้น สามารถกรอกข้อมูลใหม่หรือเพิ่มเติมได้ จากนั้นกดที่ปุ่ม แก้ไข ดังรูป

จะได้ผลลัพธ์ ดังรูป

หรือหากมีกรอกรหัสผ่านใหม่แต่กรอกทั้งสองช่องไม่ตรงกัน จะแสดงผลลัพธ์ดังรูป

เรามาเริ่มลงมือเขียนคำสั่งกันเลยคับ

ระบบข้อมูลส่วนตัวของสมาชิก ตอนที่ 2 แก้ไขและลบรูปภาพของสมาชิก

บทความตอนนี้ ของระบบข้อมูลส่วนตัวของสมาชิก ผมจะสอนท่านเขียนโปรแกรมจัดการกับไฟล์รูปภาพของสมาชิก นั่นก็คือการแก้ไขและลบรูปภาพของสมาชิก ซึ่งสามารถลบแก้ไขรูปภาพของตนเองได้เท่านั้นคับ แต่ไม่สามารถที่จะเข้าไปแก้ไขหรือลบของสมาชิกคนอื่นๆได้

ผลลัพธ์ที่ได้จะแสดงดังรูปต่อไปนี้
หากต้องการจะเปลี่ยนรูปภาพให้คลิกที่ แก้ไขรูป ดังรูป

ผลลัพธ์จากการแก้ไขรูป ดังรูป

หากต้องการจะลบรูปให้คลิกที่ ลบรูป ดังรูป

ผลลัพธ์จากการลบรูปภาพ

เรามาดูกันคับว่า ผมจะเขียนโค๊ดยังไงให้ได้ผลลัพธ์ตามที่บอกมาคับ

ระบบข้อมูลส่วนตัวของสมาชิก ตอนที่1 การสร้างฟอร์มสำหรับแสดงข้อมูลของสมาชิก

บทความนี้เราจะได้เห็นประโยชน์จากการใช้งานตัวแปรแบบเซสชั่นได้ชัดเจนขึ้น ซึ่งผมได้เกริ่นไปแล้วในบทความที่ผ่านมาคับ จากบทความที่ผ่านคือระบบล็อกอิน เราได้ใช้ตัวแปรเซสชั่นเก็บUsernameของสมาชิกเอาไว้ บทความนี้เรานำใช้ตัวเซสชั่นมาใช้ประโยนช์ในการเข้าถึงข้อมูลในฐานข้อมูลของสมาชิกคนนั้นๆคับ บางท่านอาจจะงงอยู่บ้าง แต่ก็ต้องพยายามศึกษาเนื้อหาที่ผมกำลังนำเสนอต่อไปนี้คับ


มาดูผลลัพธ์ของโปรแกรมกันก่อนเลย
เมื่อเราได้กรอกUsernameและPassword ผ่าน ดังรูป

ไฟล์ login.php

จากนั้นเมื่อเรากดที่ปุ่ม OK มันจะ redirect มายังไฟล์ mbedit.php ซึ่งผมกำลังจะสอนท่านอยู่ในขณะนี้คับ จะได้ผลลัพธ์ของโปรแกรมดังรูป

ไฟล์ mbedit.php

แต่ก่อนอื่นให้ท่านกลับไปเพิ่มโค๊ดในส่วนของjavascript ของไฟล์ login.php ตามบรรทัดที่23ดังรูป

ไฟล์ login.php

จากนั้นสร้างไฟล์ mbedit.php ขึ้นมาหนึ่งไฟล์ แล้วออกแบบให้ได้หน้าตาดังรูป

ไฟล์ mbedit.php

จากนั้นให้กดที่ show code view แล้วพิมพ์โค๊ดPHPตั้งแต่บรรทัดที่1-11ตามนี้เคยคับ

เลื่อนscrollbarลงมาตรงส่วนของbody ให้เพิ่ม/แก้ไขโค๊ด ตามรูปนี้เลยคับ

ไฟล์ mbedit.php

เมื่อกดที่ show design view ดูอีกที ฟอร์มที่เราออกแบบจะมีหน้าตาดังนี้คับ

ไฟล์ mbedit.php

บทความนี้ผมขอนำเสนอแค่นี้ก่อนนะคับ ผมไม่ขออธิบายอะไรมาก บทความต่อไปผมจะมาสอนการ แก้ไข/ลบรูปภาพกันคับ

PHP For E-Commerce

ระบบล็อกอิน ตอนที่ 2 การเขียนสคริปต์PHP เพื่อตรวจสอบความถูกต้องของUsernameและPassword ตอนจบ

บทความตอนนี้เป็นตอนจบของระบบล็อกอินแล้วคับ ผมเองก้ออยากทำให้มันจบไวๆเหมือนกัน เพราะจะได้ทำบทความอย่างอื่นต่อไป อย่างเช่น ระบบข้อมูลส่วนตัวของสมาชิก ระบบทะเบียนสินค้า ระบบตะกร้าสินค้า เป็นต้น บทความตอนนี้ก้อเลยทำเสร็จไวหน่อยคับ ก่อนอื่น เรื่องฐานข้อมูล ผมใช้ฐานข้อมูลตัวเดิมคับ ตามในบทความนี้เลย ส่วนเทเบิลที่ใช้ ผมก็ยังใช้เทเบิลเดิมอยู่คับ คือ tb_member ดังรูป

จากนั้น เราก้อมาลุยกันเลยคับ!!!
เมื่อสั่งให้มันรันและกรอกข้อมูลลงในช่องUsernameและPassword ดังรูป

หากใส่Username และ Password ถูกต้องจะได้ผลลัพธ์ดังรูปคับ

หากใส่ไม่ถูกต้องจะได้ผลลัพธ์ดังรูป

เรามาดูโค๊ดกันคับ 

++ให้กำหนด Star Session และ Import ไฟล์ config.php เข้ามา

บรรทัดที่ 2 คำสั่ง session_start() คือ การประกาศการเก็บค่าจาก Web Server เพื่อนำมาเก็บไว้ในเครื่องของClient เพื่อใช้อ้างอิงเกี่ยวกับการใช้งานของUserคนนั้นๆ (เราจะได้เห็นภาพมากยิ่งขึ้นในบทความต่อไป คือในส่วนของระบบข้อมูลส่วนตัวของสมาชิกคับ) ส่วนบรรทัดที่ 3 คือการเรียกใช้คำสั่งของADODBเพื่อเข้าถึงฐานข้อมูลของเรา

++สำหรับพระเอกของบทความนี้คับ พิมพ์สคริปต์เหล่านี้เข้าไปใต้สคริปต์ของจาวาสคริปต์

บรรทัดที่ 49 ตรวจสอบParameter Request ที่ส่งมาว่าคือ POST(ส่งค่าผ่านฟอร์ม) หรือไม่ หากว่าใช่ ให้ทำงานตั้งแต่บรรทัดที่ 50-62 

บรรทัดที่ 52 ตรวจสอบUsername และ Password ซ้ำอีกครั้งนึง ว่าเป็นค่าว่างหรือไม่ หากไม่เป็นค่าว่า ให้คำสั่งตั้งแต่ 53-61 ทำงาน

บรรทัดที่ 53 ส่งคำสั่ง SQL ไปตรวจสอบในฐานข้อมูลว่ามีUsername กับ Passwordนี้อยู่หรือไม่ แล้ว Return ค่ามาเก็บไว้ในตัวแปร $rs_login ซึ่งค่าที่ได้คือจำนวนของแถว หากเป็นศูนย์แสดงว่า ไม่พบUsernameและPasswordในเทเบิล tb_member คับ

บรรทัดที่ 54 กำหนดเงื่อนไขว่า ถ้าค่าที่ได้เท่ากับ1 ให้สร้างตัวแปรแบบsession (บรรทัดที่ 55 )  มารับค่าคือ ชื่อUsername นั่นเอง และแสดงไดอะล็อก(บรรทัด56-57) หากมีค่าที่ได้นอกเหนือจาก 1 ให้แสดงไดอะล็อกแจ้งเตือนว่า Username หรือ Password ไม่ถูกต้อง

สามารถดาวโหลดโค๊ดที่สมบูรณ์แล้วของบทความนี้ได้จากที่นี่คับ

PHP For E-Commerce

ระบบล็อกอิน ตอนที่ 1 เขียนสคริปต์ JQuery ตรวจสอบUsernameและPassword

       และแล้วก้อถึงเวลาที่ผมจะต้องอัปเดตบทความในบล็อกของผมแล้วคับ บทความนี้ผมจะสอนท่านทำระบบล็อกอินอย่างง่ายๆ ผมได้แบ่งบทความออกเป็นสองตอนคับ ตอนนี้ผมจะสอนการเขียนสคริปต์JQuery เพื่อตรวจสอบข้อมูลเบื้องต้น คือแค่ตรวจเช็คความว่างเปล่าของTextBoxเท่านั้น ส่วนการตรวจสอบUsernameกับPasswordที่สมาชิกกรอกถูกหรือไม่นั้น ผมจะขอสอนในบทความตอนต่อไป ซึ่งเป็นในส่วนของการเขียนสคริปต์PHP เพื่อเปรียบเทียบข้อมูลที่สมาชิกกรอกว่าตรงกับข้อมูลในฐานข้อมูลหรือไม่ มาลุยกันเลยครับ

     เมื่อสั่งให้รันโปรแกรมขึ้นมา จะปรากฎหน้าตาของโปรแกรมเป็นดังนี้

หากสมาชิกไม่กรอกUsernameกับPassword แล้วกดปุ่ม Login จะปรากฎผลลัพธ์ดังรูป

      รูปข้างล่าง แสดงการกรอกข้อมูลที่ถูกต้องและกรอกไม่ถูกต้อง ถ้ากรอกถูกต้อง เส้นขอบของTextBoxจะเป็นสีเขียว หากไม่ถูกต้องจะเป็นสีแดงคับ และจะแสดงไดอะล็อกข้อความเฉพาะข้อมูลที่

กรอกไม่ถูกต้อง ดังรูปข้างล่างเลย

ระบบสมัครสมาชิก ตอนที่ 4 เพิ่มข้อมูลลงฐานข้อมูลและอัปโหลดไฟล์รูปภาพของสมาชิก (ตอนจบ)

ระบบสมัครสมาชิกตอนนี้เป็นตอนสุดท้ายแล้วคับ และเนื้อหาจะเข้มข้นกว่าเดิม ท่านจะได้เห็นการเขียนโค๊ดที่ซับซ้อนขึ้น  ไม่ว่าจะเป็นการเขียนโค๊ดอัปโหลดไฟล์ และการเพิ่มข้อมูลสมาชิกลงฐานข้อมูล ซึ่งต้องใช้คำสั่ง sql มาเกี่ยวข้องด้วยคับ เรามาลุยกันคับ
      อันดับแรกผมจะให้ท่านได้เห็นผลลัพธ์ของโปรแกรมก่อนคับ
เมื่อท่านกรอกข้อมูลถูกต้อง และกดปุ่ม Register มันจะแสดงไดอะล็อกแจ้งการลงทะเบียนสมบูรณ์ ดังรูป

และข้อมูลก็จะจัดเก็บลงไว้ในฐานข้อมูล ดังรูป

ส่วนไฟล์รูปภาพก็จะถูกจัดเก็บไว้ในไฟล์เดอร์ Photo_Member ที่ผมได้สร้างขึ้น ดังรูป

ระบบสมัครสมาชิก ตอนที่ 3 ตรวจสอบชื่อผู้ใช้งาน

บทความตอนนี้ผมจะสอนการเขียนสคริปต์พีเอชพี ตรวจสอบชื่อผู้ใช้งาน (Username) ว่าซ้ำกันหรือไม่ ซึ่งกฏขั้นพื้นฐานของการพัฒนาเว็บแอพพลิเคชั่น คือ ชื่อผู้ใช้งาน หรือ Username ของแต่ละคนจะต้องไม่ซ้ำกัน เพราะมันมีความจำเป็นต่อการเข้าถึงข้อมูลของบุคคลนั้นๆ  ซึ่งผลลัพธ์ที่ได้จะแสดงผลดังรูป

กรณีที่ผู้ใช้งานกรอกชื่อผู้ใช้งาน(Username)ซ้ำ จะปรากฎไดอะล็อกนี้ขึ้นมา และให้กรอกข้อมูลใหม่อีกครั้ง 

เรามาดูกันว่า เราจะสามารถเขียนโค๊ดเพื่อตรวจสอบชื่อผู้ใช้งานกันยังไง มาลุยกันเลยคับ!!!!

แต่ก่อนอื่น….ท่านได้ศึกษาบทความเหล่านี้หรือยัง

--- ระบบสมัครสมาชิก ตอนที 1

---ระบบสมัครสมาชิก ตอนที่ 2

++เปิดโปรแกรมDreamweaver และเปิดไฟล์ register.php ขึ้นมา คลิกที่มุมมอง show view code จากนั้นให้ import ไฟล์ config.php เข้ามายังเอกสารหน้านี้ ดังรูป

ให้เขียนคำสั่งดังรูปเลยคับ ให้โค๊ดอยู่บรรทัดแรกสุดเลยคับ

++จากนั้นให้กำหนด ค่า VALUE ให้กับControl ตามที่ผมได้ขีดเส้นใต้นี้เลยคับ

ภาพนี้เป็นการรับค่า Parameter Request จากการส่งค่ามาแล้วรับเอามาแสดงผลที่เดิม เพื่อไม่ให้ค่าที่เรากรอกตั้งแต่แรกหายไป 

ระบบสมัครสมาชิก ตอนที่ 2 การเขียนโค๊ดJqueryตรวจสอบความถูกต้องของข้อมูล

บทความต่อไปนี้ ผมจะสอนการเขียนคำสั่งของ Jquery เพื่อตรวจสอบความถูกต้องจากการกรอกข้อมูลของสมาชิก ก่อนอื่นท่านต้องกลับไปศึกษาบทความในบทที่ผ่านมาก่อนคับ คลิก นี่ เลยคับ
หลังจากที่ท่านสร้างฐานข้อมูลและสร้างฟอร์มสำหรับกรอกข้อมูลเสร็จแล้ว ซึ่งผลลัพธ์ที่ได้ผมต้องการให้มันแสดงผลลัพธ์ ดังรูปคับ

กรณีที่ไม่กรอกข้อมูลอะไรเลย แต่ดันทะลึ่งไปกดปุ่ม Register มันจะแสดงไดอะล็อกฟ้องดังรูปข้างล่าง

กรณีที่กรอกข้อมูลแต่ดั๊นกรอกไม่ถูกต้อง มันจะแสดงไดอะล็อกฟ้องดังรูปข้างล่าง

ระบบสมัครสมาชิก ตอนที่ 1 สร้างตารางข้อมูลของสมาชิกในฐานข้อมูลและการสร้างฟอร์มสำหรับกรอกข้อมูล

คราวนี้ผมจะสอนการทำระบบสมัครสมาชิกกันคับ และเราจะนำไฟล์config.phpที่เราได้สอนทำในบทความก่อนหน้า มาใช้งานในบทความนี้ แต่ก่อนอื่นเราจะต้องสร้างเทเบิลในฐานข้อมูลก่อน เพื่อใช้สำหรับเก็บข้อมูลที่สมาชิกกรอกคับ โดยให้ท่านสร้างเทเบิลตามนี้ได้เลยคับ แล้วตั้งชื่อว่า tb_member คับ หากยังไม่เข้าใจให้ศึกษา นี่ ก่อนคับ

จากนั้นให้ท่านเปิดโปรแกรมDreamweaverขึ้นมาแล้วสร้างฟอร์มดังรูปนี้คับ

 

จากนั้นให้กำหนดProperty name ให้กับInputต่างๆตามนี้เลยคับ แล้ว Save ไฟล์ ชื่อ register.php แล้วพบกันในบทความตอนต่อไปคับ ^^

การสร้างไฟล์ config.php เพื่อเก็บคำสั่งที่ใช้งานบ่อยๆ

หากโค๊ดหรือคำสั่งที่เราเขียนมีความจำเป็นที่จะนำไปใช้ในหลายๆเพจ เพื่อแสดงผลลัพธ์ในลักษณะเดียวกัน เราจำเป็นจะต้องสร้างเป็นฟังก์ชั่นหรือแยกคำสั่งเก็บไว้ในอีกไฟล์นึงแล้ว import เข้ามายังเอกสารที่จะเรียกใช้คำสั่งเหล่านี้

ให้สังเกตดูภาพข้างบนคับ สมมุติว่า xxx คือคำสั่งที่เราใช้งานบ่อยๆ การใช้งานมันจะมี 2 แบบคือ แบบAกับB
แบบ A คือ การเขียนคำสั่งเหล่านี้ทุกเพจเลย หากจะแก้ไขคำสั่ง จำเป็นจะต้องแก้ไขทุกเพจที่มีคำสั่งนี้ฝังอยู่คับ
ส่วน แบบ B คือ การสร้างไฟล์ขึ้นมา 1 ไฟล์ที่จัดเก็บคำสั่งที่จะถูกเรียกใช้งานบ่อยๆ หากเพจไหนต้องการที่จะนำคำสั่งนี้ไปใช้ เราก็แค่ใช้ฟังก์ชั่น require หรือ include เพื่อ import มาใช้งาน หากจะแก้ไข เราก็แค่เข้าไปแก้ไขไฟล์ที่เก็บคำสั่งนี้ เพียงแค่ไฟล์เดียว ซึ่งก็คือไฟล์ config.php ที่ผมกำลังจะสอนท่านอยู่ในขณะนี้คับ มาลุยกันเลยคับ!!!
++เปิดDreamขึ้นมาก เลือก ไปที่ Create New แล้วเลือก PHP  ก่อนอื่นต้องตั้งค่าManage Site ก่อนครับ

++จากนั้นให้Saveไฟล์ตั้งชื่อว่า config.php
++คลิกที่มุมมอง Show code view ให้ลบTag HTML ที่ Dream สร้างมาให้ ออกให้หมด  แล้วบรรจงพิมพ์คำสั่งเหล่านี้ลงไป

บรรทัดที่ 2 คือการ import ไฟล์ adodb.inc.php ของ ADODB เข้ามา ผมเก็บ ADODBไว้ในFolder adodb ดังรูปคับ

ท่านสามารถดาวน์โหลดได้จากhttp://sourceforge.net/projects/adodblite/files/

บรรทัดที่ 3 เรียกใช้คลาส NewADOConnection แล้วระบุพารามิเตอร์เป็นmysql เพื่อบอกให้รู้ว่า เราใช้ฐานข้อมูลmysqlนะ

บรรทัดที่ 4 เรียกใช้ เมธอดConnect(“ชื่อHost”,”User Database”,”Password database”,”ชื่อฐานข้อมูลที่เราได้สร้างไว้”)

บรรทัดที่ 5-7 คือการส่งคำสั่ง Execute เพื่อเซตค่าตัวอักขระให้รองรับภาษาไทย

บรรทัดที่ 8-10 คือตรวจสอบการสมบูรณ์ของการเชื่อมต่อ ค่าReturn ของตัวแปร$connเป็นFalseแสดงว่า การเชื่อมต่อผิดพลาดคับ และมันจะแสดงข้อความ Connection False!!!! ออกทางหน้าจอคับ

เซตค่า Manage Site ให้กับ Dreamweaver

ก่อนอื่นที่เราจะเริ่มสร้างโปรเจ็คงานของเรานั้น สำหรับคนที่ใช้Dreamเป็นTool Editor สิ่งที่ต้องทำอันดับแรกคือ การตั้งค่า Manage Site เพื่อให้ Dreamweaver ได้รู้จักกับไฟล์โปรเจ็คของเรา จะทำให้การแก้ไขไฟล์ หรือการRunไฟล์มีความสะดวกมากยิ่งขึ้น มาลุยกันเลยคับ!!!!

1 เลือกที่แท็บ Files แล้วคลิกที่ลิสเมนูดังรูป

2 คลิกที่ Manage Sites

3 คลิกปุ่ม New....

4 คลิกเมนู Site

5 ปรากฎไดอะล็อก ดังรูป ให้เลือกแท็บAdvanced ตรง Category ให้เลือก Local Info

6 ตั้งชื่อให้กับ Site ของเรา

7 เลือก Path Folder ที่เก็บไฟล์โปรเจ็คของเราไว้

8 เลือก Path Folder ที่เก็บ ไฟล์รูปภาพของโปรเจ็คของเราเอาไว้

9 เืลือก Links relative เป็น Document

10 กำหนด HTTP address URLของโปรเจ็คของเรา คลิกที่นี่ หากยังงงอยู่ 

11 จากนั้นใ้ห้เลือก Testing Server เพื่อใช้สำหรับรันดูผลลัพธุ์ของโปรเจ็คของเราบนSever

12 เลือก Server model เป็น PHP MySQL เพราะเราได้ติดตั้ง Apperv ลงไปเรียบร้อยแล้ว

13 เลือก Access เป็น Local/Network คับ เพราะเราใช้ localhost ไม่ได้ใช้ Server จริงๆ

14 พิมพ์ชื่อFolder ที่เก็บไฟล์โปรเจ็คของเรา ต่อท้ายคำว่า http://localhost/

15 กดปุ่ม OK แล้วจะได้ผลลัพธุ์ ดับรูปทางซ้ายมือ คับ เป็นอันว่าการเซตค่าถูกต้องเสร็จสมบูรณ์แล้วคับ 

    

     เตรียมตัวพบกับบทความต่อไป เร็วนี้ๆ อิอิ

บทความที่เกี่ยวข้อง

>>Apperv คืออะไร

>>Dreamweaver คืออะไร

การสร้างฐานข้อมูล MySQL ด้วย phpMyadmin

วันนี้จะสอนการสร้างฐานข้อมูลด้วยphpmyadminคับ phpmyadmin คือ โปรแกรมบริหารจัดการฐานข้อมูลmysql ที่ช่วยอำนวยความสะดวกในการจัดการฐานข้อมูล โดยไม่ต้องจัดการฐานข้อมูลผ่านทางหน้าจอ Commandline ซึ่งต้องอาศัยการพิมพ์คำสั่งเพื่อจัดการกับฐานข้อมูลคับ เพื่อไม่ให้เสียเวลา เรามาสร้างฐานข้อมูลกันเลยคับ
++เปิดphpmyadminขึ้นมา  โดยพิมพ์ว่า http://localhost/phpmyadmin จากนั้นจะปรากฎไดอะล็อกบ๊อกให้เราใส่ชื่อผู้ใช้ และ รหัสผ่าน ของMySQL ดังรูป

++การสร้างฐานข้อมูล 

           1.ให้เลือกชุดตัวอักษรให้รองรับกับภาษาไทย โดยเลือก tis620_thai_ci หรือ utf8_unicode_ci (แนะนำ)

           2.ตั้งชื่อฐานข้อมูล แล้วกดปุ่มสร้าง 

เราก็จะได้ฐานข้อมูลที่เราสร้างขี้นมา 1 ตัว 

++การสร้างเทเบิลและฟิลด์ในฐานข้อมูลที่เราสร้างขึ้น
     1 คลิกเลือกฐานข้อมูล
     2 พิมพ์่ชื่อเทเบิล
     3 กำหนดจำนวนฟิลด์ในเทเบิลของเรา
     4 กดปุ่ม ลงมือ

++การกำหนดชื่อและค่าต่างๆให้กับฟิลด์ในเทเบิลของเรา
     1 ตั้งชื่อฟิลด์ตามจำนวนข้อมูลที่เราจะจัดเก็บ
     2 กำหนดชนิดข้อมูลให้กับฟิลด์ของเรา เช่น mb_id คือ รหัสของสมาชิก ซึ่งเป็นตัวเลข ให้กำหนดเป็น INT ส่วน mb_fname เป็นชื่อจริงของสมาชิก เป็นอักขระ ให้กำหนดเป็น VARCHA เป็นต้น
     3 กำหนดความยาวของตัวอักษร
     4 บังคับให้ฟิลด์ใดๆจำเป็นต้องมีข้อมูลจัดเก็บอยู่(not null)หรือไม่จำเป็นต้องมีข้อมูลก็ได้(null) ให้เราสามารถกำหนดฟิล์ดของเราได้
     5 กำหนดให้ mb_id เป็น auto_increment คือ การเพิ่มลำดับเรคคอร์ดให้อัตโนมัติ โดยที่เราไม่ต้องกำหนดตัวเลขให้เองคับ ส่วนมากแล้วเราจะกำหนดคุณสมบัตินี้ให้กับฟิลด์ที่เป็น PRIMARY KEY คับ
     6 กำหนด ให้ฟิลด์ mb_id เป็น PRIMARY KEY (คีย์หลัก) เป็นค่าที่ไม่ซ้ำ สามารถเป็นเอกลักษณ์เฉพาะให้กับข้อมูลใตแต่ละเรคคอร์ดได้ ซี่งมันมีประโยชน์ต่อการทำนอร์มอลไลเซชั่น
     7 จากนั้นให้กดที่ปุ่ม บันทึก  เป็นอันเสร็จขั้นตอนการสร้างฐานข้อมูลแล้วคับ

บทความที่เกี่ยวของ
>>Apperv คืออะไร