วันอาทิตย์ที่ 11 มีนาคม พ.ศ. 2555

สร้าง From Login ด้วยโปรแกรม Microsoft visual studio 2010

          สวัสดีครับท่านผู้มีเกียรติทุกท่าน ห่างหายกันไปหลายสัปดาห์กันเลยทีเดียว ผู้เขียนไม่ได้ไปรบกับเขมรหรือว่าหนีไปเตะฟุตบอลที่ไหนหรอกครับ(ฮา) บังเอิญว่าช่วงนี้มีสอบบวกกับมีงานเข้ามาหลายๆอย่างทำให้ไม่สะดวกนัก วันนี้มีเวลาว่างมากพอที่จะนำเสนอบทความ และเป็นการทบทวนความรู้เพื่อความพร้อมสำหรับการสอบประเมินความรู้ Senior Project ของผู้เขียนครับ นอกเรื่องมามากแล้วไปเข้าเรื่องกันเลยดีกว่า...


          การสร้าง From Login.vb นั้น สร้างได้ด้วยโปรแกรม Microsoft visual studio  2008,2010 หรือ โปรแกรมVisual Basic 2008,2010 สิ่งสำคัญคือ From vb หรือ Windows From Application นั่นเอง อ่านไปชักจะงงเรามาดูภาพกันเลย

1.       เริ่มจากการสร้างฟอร์ม Login เลือก New Project
2.        เลือก Windows Forms Application กดปุ่ม OK
                               
3.       เราจะได้ฟอร์มมาหนึ่งฟอร์ม หลังจากนั้นนำเครื่องมือต่างๆมาใส่ดังภาพ(หรือวางตำแหน่งแบบไหนก็ได้แล้วแต่ใจ)กันเลย

       3.1   นำ Picture box มาใส่ในฟอร์ม
         3.2   นำ Textbox มาใส่ในฟอร์ม
       3.3   นำ Label ใส่ในฟอร์ม
         3.4   นำปุ่ม Button มาใส่ในฟอร์ม
       3.5   คลิกขวาเปลี่ยนชื่อโปรเจ็คเป็น LOGINbsru.vb  
       3.6   คลิกซ้ายตรงตำแหน่งว่างในฟอร์มดูช่อง Properties ตั้งชื่อฟอร์มเป็น frmLogIn ดังภาพ
       3.7   เปลี่ยนชื่อเป็น frmLogIn ดังภาพ
*เครื่องมือต่างๆ Picture box , Textbox , Label, Button นำเข้าจาก Toolbox


 



4.        ตกแต่งให้ฟอร์มดูสวยงามดังภาพ (คือ...เข้าข้างตัวเองว่าสวยงาม)ด้วยการคลิ๊กที่ว่างในฟอร์มแล้วปรับแต่งตรงPropertie

เปลี่ยนชื่อและข้อความของเครื่องมือต่างๆดังนี้

4.1   คลิ๊กที่ Label Username หลังจากนั้นดูช่อง Properties แล้วใส่ชื่อดังภาพ
4.2   คลิ๊กที่ Label Password  หลังจากนั้นดูช่อง Properties ตั้งชื่อ (Name) เป็น Password และใส่ช่อง Text เป็น Password
4.3 คลิ๊กที่ Textbox Username หลังจากนั้นดูช่อง Properties ตั้งชื่อ (Name) เป็น  txtUser_ID
4.4 คลิ๊กที่ Textbox Password หลังจากนั้นดูช่อง Properties ตั้งชื่อ (Name) เป็น  txtPassword
4.5 คลิ๊กที่ปุ่ม Button Login ดูช่อง Properties ตั้งชื่อ (Name) เป็น btnLogIn และใส่ช่อง Text เป็น Login
4.6 คลิ๊กที่ปุ่ม Button Exit ดูช่อง Properties ตั้งชื่อ (Name) เป็น btnExit และใส่ช่อง Text เป็น Exit
*เราจะได้ฟอร์มสำหรับล็อกอินที่ยังไม่พร้อมใช้งาน เพราะยังไม่ได้ใส่โค๊ด


หลังจากนั้นเราจะมาเขียนโค๊ดโปรแกรมกันครับ  โดยการคลิ๊กตรงที่ว่างของฟอร์ม frmLogIn แล้วเขียนโค๊ดโปรแกรมดังนี้
Imports System.Data
Imports System.Data.SqlClient
Public Class frmLogIn
    Public pUser_id As String = ""
    Public pPassword As String = ""
    Private Sub btnLogIn_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLogIn.Click
        Dim queryString As String = "SELECT * FROM tblDatalogin WHERE user_id = '" & txtUser_ID.Text & "'"
        Using connection = New SqlConnection("Data Source=ASUS-PC\SQLEXPRESS;Initial Catalog=TestDataLogin;Integrated Security=True")
            Dim command As New SqlCommand(queryString, connection)
            connection.Open()
            Dim reader As SqlDataReader = command.ExecuteReader()
            If reader.HasRows = 0 Then
                MessageBox.Show("Invalid User", "Message", MessageBoxButtons.OK, MessageBoxIcon.Error)
                txtUser_ID.Focus()
            Else
                reader.Read()
                pUser_id = reader("user_id")
                pPassword = reader("password")
                If txtPassword.Text.Trim = pPassword.Trim Then
                    Me.Hide()
                    ' Complete
                    Dim frm As New Form1()
                    frm.Show()
                Else
                    MessageBox.Show("Password not match", "Message", MessageBoxButtons.OK, MessageBoxIcon.Error)
                    txtPassword.Focus()
                End If
            End If
            reader.Close()
        End Using
    End Sub
    Private Sub btnExit_Click(ByVal sender As System.Object, ByVal e As  System.EventArgs) Handles btnExit.Click
        Me.Close()
    End Sub
End Class 
เป็นอันเสร็จสิ้นสำหรับ frmLogIn

5.       สร้าง From อีกหนึ่งฟอร์มสำหรับเปิดเมื่อล็อกอินถูกต้องเริ่มจาก คลิกขวาที่ Project File (LOGINbsru) แล้วเลือก AddàNew Item เลือกสร้างฟอร์มดังรูปภาพ ในข้อ 2




หลังจากสร้างฟอร์มแล้วนำ Picture box มาใส่ดังภาพด้านล่าง

กดคลิ๊กเลือกตามลูกศรดังภาพ


1.       เลือก Project resource file

2.       เลือก Import ภาพจากคอมพิวเตอร์ของเรา

3.       เลือก ไฟล์รูปภาพที่ต้องการ

4.       กดปุ่ม ok

เป็นอันเสร็จสิ้นสำหรับฟอร์มที่ใช้เปิดเมื่อล็อกอินถูกต้อง



สร้างฐานข้อมูล(Database) ด้วย SQL server 2008 express
          การสร้างฐานข้อมูลเป็นสิ่งจำเป็น ซึ่งโปรแกรม Visual studio จะทำการตรวจสอบข้อมูลที่ถูกต้องก่อนการล็อกอิน ว่าข้อมูลตรงกับฐานข้อมูลหรือไม่ ถ้าข้อมูลมีอยู่ในฐานข้อมูลและถูกต้องก็สามารถล็อกอินเข้าสู่ระบบได้ ซึ่งวิธีการสร้างฐานข้อมูลด้วย SQL server 2008 express มีดังนี้

1. เปิดโปรแกรม  SQL server 2008 แล้วเลือก Connect

*สังเกตุตรงช่อง Server name เป็นชื่อของ Server ที่โปรแกรม Visual studio ใช้ติดต่อ

2.คลิ๊กที่ New Query ดังภาพ

แล้วเขียนโค๊ดดังนี้
create database Testdatalogin
go
use Testdatalogin
go
create table tblDatalogin
(user_id     varchar (20) not null  primary key,
password  varchar (20))
insert tblDatalogin (user_id,password)
values (‘donovan’,’1111’)
 insert tblDatalogin (user_id,password)
values (‘usop’,’2222’)
insert tblDatalogin (user_id,password)
values (‘solo’,’3333’)

หลังจากเขียนโค๊ดเสร็จสิ้น ก็ทำการ Execute โดยการคลุมตามโค๊ดเป็นลำดับแล้วกด Excute ดังภาพ
เป็นอันเสร็จสินในการสร้างฐานข้อมูล

ต่อไปเป็นการทดสอบโปรแกรมครับ
1.       กดปุ่มตามลูกศรที่แสดงให้เห็นจากภาพด้านล่าง (เป็นคำสั่งในการรันโปรแกรม)

2.       จะขึ้นหน้าจอล็อกอินเหมือนภาพด้านล่าง กรอก Username และ Password ที่ลงไว้ในฐานข้อมูล SQL Server à donovan,1111 : usop,2222 : solo,3333

3.       ในกรณีที่ Username ไม่ถูกต้อง Message box  error จะปรากฏขึ้นดังภาพด้านล่าง



4.       ในกรณีที่ Password ไม่ถูกต้อง Message box  error จะปรากฏขึ้นดังภาพด้านล่าง



5.       ในกรณีที่ Username และ Password ถูกต้อง จะปรากฏ Form1.vb เป็นอันถูกต้องและเสร็จสิ้นกระบวนการสร้างโปรแกรม Login ไชโย!