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

Post Reply
User avatar
DrXThirst
Posts: 98
Joined: Fri Jan 04, 2008 9:40 pm

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]
Last edited by DrXThirst on Wed Jun 09, 2010 4:45 pm, edited 3 times in total.
User avatar
Click16
Posts: 1941
Joined: Mon Dec 31, 2007 4:36 am
Location: United States

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

Post by Click16 »

wow... how complex.... [/sarcasm]

its good, although i think anyone could figure this one out...
Image
User avatar
OwnZ joO
Posts: 1197
Joined: Sun Dec 09, 2007 4:46 pm

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

Post by OwnZ joO »

Some might say that about your ftp app. It's good in that it lets beginners get started using Visual C#. It's not anything actually worthwhile, but it might show newer people that they are interested in programming.
xxpenguinxx
Posts: 1974
Joined: Sun Jan 27, 2008 4:50 am

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

Post by xxpenguinxx »

Its a decent tut, it shows how easy it is to migrate from VB to C#.
DemonicSandwich wrote:See that? You see that how it is highlighted down here but it's not highlighted right there? Ah, I guess that's what I get for pirating it.
In Soviet Russia, DS touches you. Say it again and I'll do more than touch. ~DS -Oh baby
A cat was licking itself to the sound of potato chips.
User avatar
Remnant Samurai
Posts: 882
Joined: Mon Jan 28, 2008 7:29 am
Location: Land Of The Long White Cloud
Contact:

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

Post by Remnant Samurai »

I might actually use this have been looking at something new to do thanks :D

I haven't read it all yet but can you set it up to use tabs and stuff?
Image
User avatar
DrXThirst
Posts: 98
Joined: Fri Jan 04, 2008 9:40 pm

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

Post by DrXThirst »

This is an extremely basic tutorial. I might write up an advanced one later.
xxpenguinxx
Posts: 1974
Joined: Sun Jan 27, 2008 4:50 am

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

Post by xxpenguinxx »

RaZoR73 wrote:I might actually use this have been looking at something new to do thanks :D

I haven't read it all yet but can you set it up to use tabs and stuff?
You can re-load a new tab as a duplicate of the first, but I forget how to.
DemonicSandwich wrote:See that? You see that how it is highlighted down here but it's not highlighted right there? Ah, I guess that's what I get for pirating it.
In Soviet Russia, DS touches you. Say it again and I'll do more than touch. ~DS -Oh baby
A cat was licking itself to the sound of potato chips.
User avatar
DrXThirst
Posts: 98
Joined: Fri Jan 04, 2008 9:40 pm

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

Post by DrXThirst »

Fixed all images and re-uploaded source. :)
User avatar
troymac1ure
Keeper of Entity
Posts: 1282
Joined: Sat Aug 09, 2008 4:16 am
Location: British Columbia, Canada, eh
Contact:

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

Post by troymac1ure »

I was looking for something like this a long time ago... Hmmm, it may just come in handy.

Thanks!
User avatar
DrXThirst
Posts: 98
Joined: Fri Jan 04, 2008 9:40 pm

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

Post by DrXThirst »

No problem. It's quite an easy concept as you're not really creating anything at all.

If you wanted your program to download something easily and efficiently without having to write much code at all, you could add a webbrowser to it, make it small and non-visible (invisible?) and then write this code:

Code: Select all

webbrowser1.navigate("http://www.example.com/updatedprogram.zip");
Then, that's all you would have to write for the program to ask you to download the new version. Extremely simple. It downloads from an Internet Explorer-based dialog box.
User avatar
troymac1ure
Keeper of Entity
Posts: 1282
Joined: Sat Aug 09, 2008 4:16 am
Location: British Columbia, Canada, eh
Contact:

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

Post by troymac1ure »

DrXThirst wrote:No problem. It's quite an easy concept as you're not really creating anything at all.

If you wanted your program to download something easily and efficiently without having to write much code at all, you could add a webbrowser to it, make it small and non-visible (invisible?) and then write this code:

Code: Select all

webbrowser1.navigate("http://www.example.com/updatedprogram.zip");
Then, that's all you would have to write for the program to ask you to download the new version. Extremely simple. It downloads from an Internet Explorer-based dialog box.

I tried that but it said "The webpage cannot be found". Must be something wrong with your code.
User avatar
Gary
Posts: 1946
Joined: Thu Feb 14, 2008 10:17 pm
Location: USA, FL
Contact:

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

Post by Gary »

Your not using "http://www.example.com/updatedprogram.zip" as a test right?
User avatar
DrXThirst
Posts: 98
Joined: Fri Jan 04, 2008 9:40 pm

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

Post by DrXThirst »

I believe he's joking. I hope so anyway.
User avatar
troymac1ure
Keeper of Entity
Posts: 1282
Joined: Sat Aug 09, 2008 4:16 am
Location: British Columbia, Canada, eh
Contact:

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

Post by troymac1ure »

http://www.example.com/updatedprogram.zip is still not working. Maybe someone hacked the servers and took them down :shock:
User avatar
Gary
Posts: 1946
Joined: Thu Feb 14, 2008 10:17 pm
Location: USA, FL
Contact:

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

Post by Gary »

heh...

http://www.example.com/
You have reached this web page by typing "example.com", "example.net", or "example.org" into your web browser.

These domain names are reserved for use in documentation and are not available for registration. See RFC 2606, Section 3.
Post Reply