Monday, July 27, 2015

LẬP TRÌNH PHẦN MỀM LƯỚT WEB VỚI VB.NET

QUẢNG CÁO

Đầu tiên để lập trình phần mềm các bạn phải có 1 tools để lập trình,
tùy theo ngôn ngữ mà các bạn lập trình 😀
Ở đây mình dùng vb.net nên mình sẽ sử dụng visua studio 2012 😀
Các bạn có thể tải về ở đây.
Còn đây là key cài đặt:
RBCXF-CVBGR-382MK-DFHJ4-C69G8

Mình còn dùng thêm 1 framework .net nữa tên là webkit.
Các bạn có thể tải về ở đây.
Sau khi cài đặt và khởi động các bạn sẽ thấy giao diện của Visua studio như sau:
vb-1-1

Các bạn ấn vào New Project…
Rồi chọn phiên bản .net framework mà các bạn thích, ở đây mình xài .net 3.5 chứ mình ko xài 4.5 vì phiên bản 4.5 hiện tại nếu mà đưa qua máy khác thì hầu hết tất cả các máy đấy đều ko hỗ trợ .net framework 4.5 😀
vb-1-2
Đây chính là màn hỉnh hiển thị:
vb-1-3
Giờ chúng ta sẽ làm cho khung giới hạn của phần mềm to ra nhé, các bạn có thể kéo đến kích cỡ mình thích hoặc dùng cái hộp solution Exploder ở bên phải, kéo xuống có chữ size rồi sửa theo kích cỡ cũng đc.
Giờ chúng ta sẽ làm 1 cái form cho vb.net (cứ gọi là giao diện đi cho dễ), Chúng ta sẽ cần 1 menustrip, 4 button và 1 textbox.
Các bạn sắp xếp như thế này nhé.
vb-1-4
Sau đó ta sẽ thay đổi tên của các button:
Ấn click chọn vào button cần thay rồi nhìn sang bên phải, chỗ Solution Exploder rồi kéo xuống đến đoạn Text rồi đổi thành tên mình muốn.
Lưu ý: Nhớ là text chứ ko phải name trên cùng nhé, cái đó nhiều bạn hay nhầm lắm.
Giờ chúng ta sẽ add thêm Components frameword là webkit vào, bởi vì mặc định của visua studio chỉ có mỗi webbrowser thôi chứ ko có webkitbrowser.
Về ưu điểm và nhược điểm thì webkit có lợi hơn khi cho thấy 1 phiên bản hoàn chỉnh như chrome hoặc firefox còn webbrowser thì giống như Internet Exploder 8. Lý do là vì webkit nó sẽ hoàn thành tất cả các lệnh từ sever chuyển đến client còn webbrowser nó sẽ hiện thông báo rằng có chạy .js hay ko, vì vậy sẽ gây khó chiu cho người sử dụng.
Các bạn mở mục Toolbox ra rồi chuột phải trong chỗ all windows form.
Chọn choose item.
vb-1-5
Các bạn chọn browse rồi chọn vào đường dẫn đã đc giải nén của cái webkit mà mình đã cho tải bên trên.
Sau đó các bạn chọn vào webkitbrowser.dll rồi ấn ok.
==> Giờ thì trong form đã xuất hiện thêm biểu tượng của webkitbrowser, các bạn tích vào nó rồi kéo hết khung của form phần mềm 😀
vb-1-6
Mình kéo từ chỗ bên dưới mấy cái form mình đã tạo sẵn, để khi hiển thị nó chỉ hiện từ đó trở xuống thôi chứ ko đè lên mấy cái form cũ của mình.
vb-1-7
Chọn auto size là true để khi bạn có phóng to hay thu nhỏ phần mềm thì nó vẫn ko bị tràn hay gì cả 😀
Vậy là xong phần thiết kế, giờ chúng ta sẽ viết code cho phần mềm 😀
Các bạn click 2 lần vào form chính (là form lớn nhất mà khi vừa create project đã có rồi ý.
Sau đó nó sẽ hiện ra 1 khung chèn code, các bạn chèn dòng này vào.
CenterToScreen()
vb-1-8Sau đó các bạn ấn vào Form1.vb (design) để trở lại phần thiết kế, sau đó click vào từng cái button mà các bạn đã tạo hồi nãy, rồi chèn code như mình bảo vào. Code của button (trở lại)
WebKitBrowser1.GoBack()
Code của button (tiếp theo)
WebKitBrowser1.GoForward()
Code của button (Go)
WebKitBrowser1.Navigate(TextBox1.Text)
Code của button (trang chủ): Ta sẽ đặt mặc định là blog của tôi nhé 😀
WebKitBrowser1.Navigate("http://zorovhsvn.com")
==> Vậy là xong phần button, giờ sẽ đến phần menu.
Ở đây menu tôi thiết kế gồm 3 phần chính là File, Path và Help
File gồm: Exit
Path gồm: Google, Facebook, ZoroVHS
Help gồm: about
Các bạn mở lại menu ra rồi ấn click 2 lần vào là có thể đến phần viết code của nó.
Code Menu (exit)
End
Code Menu (google, facebook và zorovhs) giống như code button home, các bạn chỉ cần thay đường dẫn thôi là chiến đc rồi 😀
Code Menu (About)
MessageBox.Show("Code by Zorovhs")
Sau đó các bạn vào theo đường dẫn này để copy tất cả các file .dll mà các bạn đã giải nén đc rồi dán vào đó
C:\Users\zorovhs\Documents\Visual Studio 2012\Projects\webkit\webkit\bin\Debug
(có thể thay webkit thành tên project mà các bạn tạo và thay zorovhs thành tên user máy tính của các bạn)
Rồi các bạn ấn vào build / Build webkit (tên project để build ra phần mềm)
Và đây là thành quả của chúng ta thu được.
vb-1-9
End tut 😀

Leave a comment: