Tutorial: Making a Web Browser using C# 2008 Express Edition

Post here about scripting and programming for HaloPC (audio, network, ai, etc.)
Post Reply
User avatar
DrXThirst




Connoisseur Foundry Pyre

Posts: 3011
Joined: Fri Jun 29, 2007 6:28 am
Location: Georgia
Contact:

Tutorial: Making a Web Browser using C# 2008 Express Edition

Post by DrXThirst »

This tutorial is going to be created assuming that someone has never touched C# in their entire life. So, be ready for a long, total explanation.

_____________________________________________________________

Step 1: Your first step towards creating a Web Browser in C# is to start the program, obviously.
Image

Step 2: Next, you'll see the "Start Page." The start page will either display Microsoft RSS news, or not, depending on your choices when installing Microsoft C# 2008 Express Edition. The first thing we'll do is press the "X" on the top right hand corner of the "Start Page."
Image

Step 3: After exiting out of the "Start Page," you'll see many familiar buttons along the top of the program including "File," "Edit," etc. You will become more familiar with the functions of these buttons later on in your C# programming. For now, you only need to press "File," then "New Project."
Image

Step 4: At this point, a window should pop up asking you what type of project that you would like to start working on. "Windows Forms Application" should alright be highlighted. If not, select it at this time.
Image

Step 5: Next, you'll want to name your program. I simply named mine, "My Web Browser." You can name yours anything you'd like, then press "OK."
Image

Step 6: Now that you've pressed "OK," the window should disappear and a form should show up in the middle with the title "Form1."
Image

Step 7: As you'll see in the image above, at the location of the red square, there is an empty space. This empty space is where you'll be making edits to the "properties" of the items that you add to your application. Now, if there is already a box in that location, then skip step 8. If not, then proceed normally.

Step 8: While making your application, you'll be making many edits via the "Properties" window. So, to make this box appear, right click "Form1" under the "Solution Explorer" and select "Properties."
Image

Step 9: This nifty little box allows you to edit many things like the text on a button or the image on one of your buttons. So, the first thing you need to do is click anywhere in the middle of your application, then scroll down to "Text" in the "Properties" box.
Image

Step 10: Renaming the title of your application is extremely simple. Right now, you'll want to erase "Form1" in the textbox and type whatever your desire. I am going to type "My Web Browser." Afterward, press "Enter" on your keyboard. Watch the name change!
Image

Step 11:
Once your application is renamed, we'll start work on the actual application. On the left hand side of the screen, hover your mouse over the label named "Toolbox." From here, click the "Tack/Pin" at the top of the "Toolbox" title bar to make it stay in place. Minimize all sections but "Common Controls" and "Menus & Toolbars" by pressing the "-" beside each one.
Image

Step 12: Explains itself.
Image

Step 13: Upon completing the above steps, drag "Web Browser" from "Common Controls" to the middle of your form. This should take up the rest of the space in your form. Next, click the "Tack/Pin" at the top of the "Toolbox" title bar to make it "Auto-Hide" once again.
Image

Step 14: Now that your web browser is on your form, we need buttons to make it work. So, click the "Menu Strip" and a "Type Here..." box should pop-up on the left-hand corner of the bar. Click within the text box, and type "Home." After typing "Home," press "Enter" on your keyboard. Another text box should pop-up to the right, and below the "Home" button. Click in the one to the right and type "Back." Do this again for "Forward" and "Refresh."
Image

Step 15: You now have most of the basic controls for your web browser. The only two things left are your URL textbox and your "Go" button. Click your "Menu Strip" once more and this time, instead of typing in the textbox, you're going to highlight it, press the "Down" arrow that pops-up and select "textbox." When it's created, add another button named "Go."
Image

Step 16: Coding time! Now time for the fun part. You get to learn the code that runs behind the scenes, and actually makes the program work. Your first task is to double-click the "Go" button that you created. You should be taken to the "Coding Part" of your application. You'll see something that looks a little something like this:
Image

Step 17: Ok, now right where your typing cursor automatically went to is where you'll type the code for your "Go" button. Creating a web browser is quite simple, although I'll still explain the code that you're typing. Now, type this:

Code: Select all

webBrowser1.Navigate(toolStripTextBox1.Text);
Breaking down the code:
  • "webBrowser1" - This says that you're talking to the Web Browser in your form and you're going to give it an action.
  • ".Navigate" - Denotes that you're telling the Web Browser to navigate. However, you obviously need to tell it where to navigate.
  • "(toolStripTextBox1.Text)" - If you had a textbox on your form, then it would be "TextBox1.Text." However, since ours is on a tool strip, then it says "ToolStripTextBox1.Text" stating that you're talking about the text box on the toolstrip. This part of this line of code says that you want the Web Browser in your form to navigate to the text that's in your text box on the toolstrip. Which is essentially your URL.
  • ";" - After every complete line of code, you'll add a semi-colon. This says, "Ok, this line of code is done and now I'm moving on to the next one."
Like this: Image

Step 18: Your "Home" button is complete. We're going to test the functionality of your application now! At the top middle of "C# 2008 Express Edition," you'll see a little button that looks like a green "Play" button. Click it. After clicking it, your application should pop up. Now, in the textbox, type "http://www.google.com" and click your "Go" button. See if it goes!
Image

If it worked, you'll see something like this:
Image

Step 19: Click the "Form1.cs[Design]" tab above the code that you previously wrote. This will take you back to the "Design Part" of your program. Now, double click on the "Home" button on your program. Type this code:

Code: Select all

webBrowser1.GoHome();
Breaking Down the Code:
  • "webBrowser1.Navigate" - Explained before. Read above.
  • "GoHome();" - This is telling your Web Browser to go to it's homepage. Set by your Internet Explorer. This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!
Image

Step 20: Go back to the Design tab and double-click on the "Back" button. Type this code:

Code: Select all

webBrowser1.GoBack();
Breaking Down the Code:
  • "webBrowser1.Navigate" - Explained before. Read above.
  • "GoBack();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!
Image

Step 21: Go back to the Design tab and double-click on the "Forward" button. Type this code:

Code: Select all

webBrowser1.GoForward();
Breaking Down the Code:
  • "webBrowser1.Navigate" - Explained before. Read above.
  • "GoForward();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!
Image

Step 22: Go back to the Design tab and double-click on the "Refresh" button. Type this code:

Code: Select all

webBrowser1.Refresh();
Breaking Down the Code:
  • "webBrowser1.Navigate" - Explained before. Read above.
  • "Refresh();" - This is a direct action towards the Web Browser, called a method. Since there's nothing else to call forth (EX: Textbox, Button, etc.) then you leave the parenthesis empty. Don't forget the semi-colon!
Image

Step 23:Now, we're going to set your application to go to your homepage when it starts up. So, go back to the "Design" tab of your application and double-click on title bar of your newly designed program. (Where the Minimize, Maximize, and X buttons are.) This will take you back to the coding section of your program, and you're going to need to copy and paste this code from earlier during your application creating process:

Code: Select all

webBrowser1.GoHome();
Image

Step 24: Your simple, basic web browser application is now complete! Good job! However, we're still not done. You need to save it so that you can show it to other people! First, (IMPORTANT!) press the "Play" button and make sure that everything works. When you press the "Play" button, it updates all code to the executable file, so after you save it, make sure you press "Play" again before attempting to open your application.

Step 25: Press "File" then press "Save All." Once the pop-up has come up, press "OK" and your application has been designed, coded, and saved!
Image

Step 26: To get to your actual .exe for sharing with people, go to the directory that you saved it in. If you do not remember that directory, then just go to "My Documents," then "Visual Studio 2008," then "Projects," and lastly find the folder for your project. After finding that folder, keep digging through until you find the .exe. Here's some help... mine was:

Code: Select all

C:\Users\Gages\Documents\Visual Studio 2008\Projects\My Web Browser\My Web Browser\bin\Debug\My Web Browser.exe
Image

I attached a download to this post that includes the following:
  • Folder with all images.
  • Notepad .txt file with the BB code for this post.
  • Source for my example application that I created while writing up this tutorial.
Attachment: [Download]
Image
User avatar
FleetAdmiralBacon




Critic Pyre Articulatist 500

Posts: 2377
Joined: Sat Nov 26, 2005 7:01 pm
Location: Ohio
Contact:

Re: Tutorial: Making a Web Browser using C# 2008 Express Edition

Post by FleetAdmiralBacon »

Trident embedded browser is fail. Get yourself a Gecko form control.
Image
Everything you'll ever need to know about me.
Need help with Linux, C#, C, Python, Java, PHP, Javascript, CSS, or VB? I'm available from 3:00PM-8:00PM EST on weekdays.
Post Reply