ระบบล็อกอิน ตอนที่ 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 คืออะไร

ADODB คืออะไร

ADODB เป็นคลาสไลบารี่ที่เขียนด้วยภาษาPHP มีหน้าที่ช่วยอำนวยความสะดวกกับการเขียนคำสั่งPHP เพื่อเข้าถึงฐานข้อมูลได้ทุกระบบฐานข้อมูล โดยที่เราไม่จำเป็นต้องเปลี่ยนคำสั่งติดต่อกับฐานข้อมูลตามชนิดของฐานข้อมูล เช่นถ้าจะเข้าถึงฐานข้อมูล Mysql เราใช้ mysql_connect() หากเป็น MS-Access เราใช้ odbc_connect() หากเป็นฐานข้อมูลอื่นๆ เราจึงจำเป็นจะต้องเปลี่ยนคำสั่งเหล่านี้ให้เข้ากับระบบฐานข้อมูลนั้นๆทุกครั้ง ทำให้เกิดความไม่สะดวกในการเขียนคำสั่งที่จะต้องคอยปรับแก้ทุกครั้งไป ถ้าหากเราใช้ ADODB เข้ามาช่วย เราจะใช้คำสั่ง ADOConnection('xxx') xxx คือให้เราระบุ ชื่อของฐานข้อมูลลงไป เช่น เราใช้Mysql ให้ระบุว่า ADOConnection('mysql'); ท่านสามารถศึกษาเพิ่มเติมได้โดยเสิร์ทจากทางกูเกิล มีเว็บไซต์หลายแห่งที่สอนการใช้งานอยู่เหมือนกันคับ ไว้วันหลังผมจะสอนการนำADODBไปประยุกต์ใช้งานกับการทำระบบE-Commerce คับ

DreamWeaver คืออะไร

Dreamweaver เป็นโปรแกรมที่มีหน้าที่เป็นเครื่องมือช่วยอำนวยความสะดวก ในการสร้างเอกสารHTMLได้อย่างสะดวกสบาย โดยที่เราไม่ต้องเสียเวลากับการเขียนคำสั่งHTMLให้ยุ่งยาก และนอกจากนั้นDreamweaver สามารถสร้างโค๊ดได้หลายภาษา เช่น  PHP, ASP , JSP และการเชื่อมต่อกับฐานข้อมูลได้หลายตัว อาทิ MySQL , MS-Access ,My SQL Server เป็นต้น โดยที่เราไม่ต้องสร้างโค๊ดหรือเขียนโค๊ดเอง ซึ่งหน้าที่เหล่านี้Dreamweaverจะช่วยสร้างโค๊ดให้เราเองคับ
ส่วนมากแล้วผมใช้Dreamช่วยในการสร้างเอกสารHTML ส่วนการเขียนคำสั่งPHP มักจะเขียนคำสั่งเหล่านี้เอง โดยไม่ใช้Dramweaverช่วยGanarateโค๊ดให้คับ

Appserv คืออะไร

Apperv เป็นโปรแกรมที่พัฒนาโดยฝีมือของคนไทย ซึ่งAppervเป็นซอฟต์แวร์ที่มีหน้าที่รวบรวมซอฟต์แวร์ 4 ตัวไว้เข้าด้วยกัน ได้แก่
- Apache
- PHP
- MySQL
- phpMyAdmin
มีหน้าที่ติดตั้งและกำหนดค่า Config โดยกำหนด สภาพแวดล้อมต่างๆให้เอง โดยที่เราไม่ต้องConfigเองให้ยุ่งยากและเสียเวลา
ท่านสามารถศึกษาเพิ่มได้จากลิงค์เหล่านี้คับ
>>ประวัติApperv
>>การติดตั้ง

MySQL คืออะไร

MySQL คือระบบจัดการฐานข้อมูลหรือDBMS โดยใช้ภาษาSQL เป็นซอฟต์แวร์ประเภทOpen Source ที่สามารถใช้ฟรีและแบบใช้ในทางธุรกิจ(เสียตังค์) ซึ่งแบบเสียตังค์จะแตกต่างกับที่ให้ใช้ฟรีคือ การให้บริการด้านการช่วยเหลือเมื่อมีปัญหาจากการใช้งาน โดยจะแบ่งเวอร์ชั่นการใช้งานออกเป็นดังนี้
- MySQL Enterprise
- MySQL  Cluster
- MySQL Embedded
- MySQL Community (Open Source) -->ในบทความของผมใช้งานตัวนี้
ท่านสามารถศึกษาเพิ่มเติมได้จากเว็บไซต์เหล่านี้ได้เลยครับ
>>วิกิพีเดีย
>>สอนติดตั้งใช้งานและคำสั่งต่างๆที่ควรรู้
>>ตัวอย่างการใช้ฟังก์ชั่นของPHPเพื่อติดต่อกับMySQL(อ่านปูพื้นฐานไปก่อนคับ เด่วผมจะสอนการนำไปประยุกต์ใช้งานอีกทีนึง)