มาสร้าง Web Browser แบบง่ายใช้กันเองดีกว่า

มาสราง Web Browser แบบงายใชกันเองดีกวา [[email protected] ]  การพัฒนาโปรแกรมในทุกวันนี้งา ยขึ้นทุกวัน เพราะเครื่องมือที่ที่ใชพัฒนาโปรแกรมนั้นมีความสะดวกขึ้นมาก เชน โปรแกรม Microsoft Visual Studio ที่ผูพัฒนาสามารถที่จะเลือก Control ตาง ๆ มีใสใน Form ไดทันทีโดยที่ tool จะเปน ตัวสราง code ใหอัตโนมัต ิ โดยในบทความนี้จะยกตัวอยางการสราง Web Browser แบบงาย โดย Tool ที่เลือกใชนั้นคือ

 

Microsoft Visual Studio และภาษาที่ลเอกใชนั้นจะใช ภาษา C#

 หรือถาผูอานทานใดถนัดเขียนภาษา Basic ก็สามารถใช VB.NET ก็เพราทั้ง VB.NET และ C# นั้นใช object 

ที่รันอยูบนสถาปตยกรรม .NET ตัวเดียวกัน ดังนั้นการพัฒนาของทั้งสองภาษาจึงตางกันที่ syntax

 

รูปที่ 1 หนาตาง New Project 

จากรูปที่ 1 ในชอง Project types  เลือก ภาษาที่จะใชในการพัฒนา โดยในบทความนี้จะเลือก Visual C#  ชอง Templates เลือกลักษณะของ Application โดยบทความนี้จะพัฒนา Windows Application  ชอง Name ใสชื่อ Project ในบทความนี้ใสเปน

uEasyWebbrowser จากนั้นกด OK เพื่อสราง Project ใหม  

 

 

รูปที่ 2 Microsoft Visual Studio Design Explorer  หลังจากเสร็จสิน้ ขั้นตอนขางตนจะโปรแกรมจะสรางหนา Form (หนาตาง Windows) ใหอัตโนมัติ ดังรูปที่ 2 โดย Form จะใชเปนพื้นที่ในการพัฒนาโปรแกรม รูปที่ 3

 

Tool Box  

ใน Tool Box จะเปนที่เก็บรวบรวม Control ตาง ๆ ที่จะใชในการพัฒนาโปรแกรม โดยในโปรแกรมที่จะพัฒนา ๆ จะเลือกใช Control ตาง ๆ ดังนี้ 1.

 

2.

 

3. 4.                

 

   

เลือก Control ทั้งสามใสใน Form ดังรูปที่ 3  

 

รูปที่ 3 เลือก Control มาใสใน Form  จากนั้นใหเปลี่ยน Properties ของ Control ทั้งหมด ดังตารางที่ 1    Control Name  Label1  textBox1  button1  button2  webBrowser1  Form1 

Rename  lbl1  txtUrl  btGo  btBack  wb1  ‐ 

ตารางที่ 1 รายละเอียด Control 

Text  URL:  “”  Go  Back  ‐  My Easy Web Browser 

จากนั้น Copy Code ลงในหนา source code    private void btGo_Click(object sender, EventArgs e) { if (txtUrl.Text.IndexOf("http://") == -1) { txtUrl.Text = "http://" + txtUrl.Text; wb1.Navigate(txtUrl.Text); } else { wb1.Navigate(txtUrl.Text); } } private void btBack_Click(object sender, EventArgs e) { wb1.GoBack(); } 

 

จากนั้น Build Project แลวทําลองรันดูจะไดผลดังนี ้

 

หรือจะลองสราง Shortcut จาก ปุมกดงายโดยการเพิ่มลงไปดังนี้ 

จากนั้นใหเปลี่ยน Properties ของ Control label1 – label4 ดังตารางที่ 2   

Control Name  Rename  lable1  lblRobot  lable2  lblGoogle  lable3  lblMornor  lable4  lblCPENU    จากนั้นเพิ่ม Event Double Click ให Label ตาง ๆ ดังนี้

Text  Robot NU  Google  Mornor.com  CPE.nu.ac.th 

private void lblRobot_DoubleClick(object sender, EventArgs e) { wb1.Navigate("http://www.robotnu.com"); txtUrl.Text = "http://www.robotnu.com"; } private void lblCPENU_Click(object sender, EventArgs e) { wb1.Navigate("http://www.cpe.nu.ac.th"); txtUrl.Text = "http://www.cpe.nu.ac.th"; } private void lblGoogle_Click(object sender, EventArgs e) { wb1.Navigate("http://www.google.co.th"); txtUrl.Text = "http://www.google.co.th"; } private void lblMornor_Click(object sender, EventArgs e) { wb1.Navigate("http://www.mornor.com"); txtUrl.Text = "http://www.mornor.com"; }

จากนั้น Build Project แลวทําลองรันดู

 

หลังจากเสร็จสิน้ บทความนี้ทานผูอานก็สามารถที่จะสราง  Web Browser งาย ๆ ไดดวยตัวทานเอง ultra mcu