In this article we will build a Web Browser using ‘UIWebView’ controller. Using this controller we will be enable to view websites on mobile like we use our internet explorers on windows or other operating systems.

In xcode we use Interface Builder’s storyboards that are preferred way to create user interfaces(UIs).  

To create Web Browser using UIWebView controller, follow these steps:

1.    Create a single view project and name it “WebViewExample”, its main view controller will be called ViewController. 

2.   Now, add some controllers from object library that is available on right bottom corner of Xcode. For example- add- 1 UITextField, 1 UIWebView, UIToolBar and add 4 UIBarButtonItem on the UIToolBar,

3.   now, add Flexible Space Bar Button Items, it represents a flexible space item on a UIToolBar objects.

4.   Now, go to the Assistant Editor, when you click on Assistant Editor two views will be open where we open two different files.

5.   Now, open ViewController.h file on one side of assistant editor view and open MainStoryBoard.storyboard on the other assistant editor view.

6.   Now, select UIWebView that you added on MainStoryBoard and press CTRL and click web view and drag it on ViewController.h file between the @interface start and @end, a popup opens with some options, give the name as webView to create a property for web view, here is the code after addition:

property (strong, nonatomic) IBOutlet UIWebView *webView;

7. Same as above, drag some other properties like UITextField give it name as

searchBar, drag all the UIBarButtons one by one and give it names as BackBtn,

ForwardBtn, StopBtn, RefreshBtn.

@property(nonatomic,strong) IBOutlet UITextField *searchBar; 

@property (weak, nonatomic) IBOutlet UIBarButtonItem *BackBtn; 

@property (weak, nonatomic) IBOutlet UIBarButtonItem *ForwardBtn; 

@property (weak, nonatomic) IBOutlet UIBarButtonItem *StopBtn; 

@property (weak, nonatomic) IBOutlet UIBarButtonItem *RefreshBtn;

 8.    Now, add three methods like loadurlAction:, goToWebPage:, and

loadRequestFromString:,

here is the code:

-(IBAction)loadurlAction:(id)sender; 

-(IBAction)goToWebPage:(id)sender; 

-(void)loadRequestFromString:(NSString *) urlString;

9. now, implement an UIWebViewDelegate also on the ViewController.h file, here is

the code: 

interface ViewController : UIViewController<UIWebViewDelegate>

10. now, go to the ViewController.m file and synthesize all the properties: here is the code:

@synthesize searchBar,BackBtn,StopBtn,RefreshBtn,ForwardBtn;

11. and implement all the methods in the implementation file, after completing all

the steps, our view will look like this: 

12. source code of our sample provided below: 

ViewController.h file

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController<UIWebViewDelegate> 
@property (strong, nonatomic) IBOutlet UIWebView *webView; 
@property(nonatomic,strong) IBOutlet UITextField *searchBar; 
@property (weak, nonatomic) IBOutlet UIBarButtonItem *BackBtn; 
@property (weak, nonatomic) IBOutlet UIBarButtonItem *ForwardBtn; 
@property (weak, nonatomic) IBOutlet UIBarButtonItem *StopBtn; 
@property (weak, nonatomic) IBOutlet UIBarButtonItem *RefreshBtn; 
-(IBAction)loadurlAction:(id)sender; 
-(IBAction)goToWebPage:(id)sender; 
-(void)loadRequestFromString:(NSString *) urlString; 
@end

ViewDelegate.m

#import ViewController.h"
@interface ViewController () 
@end 
@implementation ViewController
@synthesize searchBar,BackBtn,StopBtn,RefreshBtn,ForwardBtn; 
 
-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil 
{ 
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; 
if (self) { 
//Custom initialization 
} 
return self; 
}
-(void)viewDidLoad 
{ 
[super viewDidLoad]; 
//Do any additional setup after loading the view, typically from a nib. 
self.webView.delegate=self; 
[self loadRequestFromString:@http://www.mindstick.com]; 
}
-(void)didReceiveMemoryWarning 
{ 
[super didReceiveMemoryWarning]; 
//Dispose of any resources that can be recreated. 
} 
-(IBAction)loadurlAction:(id)sender 
{ 
NSMutableURLRequest * request =[NSMutableURLRequest requestWithURL:[NSURL URLWithString:@http://www.google.com]]; 
[self.webView loadRequest:request]; 
} 
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 
{ 
NSLog(@"Loading URL :%@",request.URL.absoluteString); 
//return FALSE; //to stop loading 
return YES; 
} 
-(IBAction)goToWebPage:(id)sender { 
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://%@",searchBar.text]]]; 
[self.webView loadRequest:request]; 
} 
-(void)loadRequestFromString:(NSString *)homePage{ 
NSURL *url = [NSURL URLWithString:homePage]; 
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; 
[self.webView loadRequest:urlRequest]; 
}
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error 
{ 
NSLog(@"Failed to load with error: %@",[error debugDescription]); } 
-(void)webViewDidStartLoad:(UIWebView *)webView 
{ 
}
-(void)webViewDidFinishLoad:(UIWebView *)webView 
{ 
self.BackBtn.enabled=webView.canGoBack; 
self.ForwardBtn.enabled=webView.canGoForward; 
self.StopBtn.enabled = self.webView.loading; 
} 
@end

Now, run the application, after running the application it will look like this, the website which is already open it is our default web page it is temporary we can change it, below is the demo image: 

Here notice one thing back, stop and forward buttons are disabled, it has a reason.because the current UI has some problems that can easily be solved with a littlemore code: all the buttons on the toolbar will be enabled all the time (if we not usethe below code in our code) and there is no indication to the user that networkactivity is taking place. In webViewDidFinishLoad: method add this code:

-(void)webViewDidFinishLoad:(UIWebView *)webView
{ 
self.BackBtn.enabled=webView.canGoBack; 
self.ForwardBtn.enabled=webView.canGoForward; 
self.StopBtn.enabled = self.webView.loading; 
} 
@end

This code effect will display on the view where we see the backward, stop, and

forward buttons used. If no history page or click on page is available then the back

button will be disable and if no forward page history is available then the forward button also be disable and also stop button will be disable after page loading, allthese things works when you add those methods.Now, ok when you click on any link back button will be enable, see the demo

image below: