In this two part tutorial we will cover creating a simple iOS5 app using storyboards that enables users to log in to your app by calling a PHP page to authenticate. We’ll also discuss techniques used to keep log in state using NSUserDefaults and NSNotificationCenter to notify other view controllers about our state. The goal of this tutorial is to get your started creating member only sections in your app that require authentication.
In part one of this tutorial we will cover setting up the app and hooking up all our outlets using storyboarding and Xcode’s assistant editor.
Let’s get started creating the app.
The first thing you’ll need to do is open up Xcode (I’m using 4.x) and create a New Project – Single View Application. I’m going to call this app “MyFirstLoginApp” but you can change this to suite your needs.
Make sure you check Automatic Reference Counting & Use Storyboards.
Now you’ll want to click on your MainStoryboard.storyboard file which with open up your storyboard to the right with your initial View Controller for you app. The first thing we’ll do is embed this View Controller in a Navigation Controller. This is purely for appearance in this case since we wont actually be pushing any View Controllers. We do this by selecting our View Controller and choosing the option in the top menu under Editor > Embed In > Navigation Controller. You can now double click on your View Controller’s Navigation bar and enter a title. Below is the result.
Creating the Log In View Controller
Now that we have our basic app setup, let’s take a moment to create our log in view controller. Again, select your storyboard file on the left to bring up your storyboard file. The next thing we’ll do is drag out a new Table View Controller from the right side Object Menu. Your setup should now look like the following picture with 3 items on your storyboard.
First we’ll also embed this Table View Controller in a Navigation Controller by choosing the option in the top menu under Editor > Embed In > Navigation Controller. Next we’ll modify our Table View Controller and change the content to use Static Cells with a Grouped Style. When you change from Dynamic Prototypes cell to Static Cells it will by default give you three cells. Select any two of the cells and delete them. Here’s what the Attributes Inspector panel looks like.
Let’s setup our static cells now. We’re going to add some Labels & Text Fields to our static cell now for the log in. You can do this by dragging over a Label from the Object Library on the bottom right and dropping it inside our static cell. Repeat this step for adding a Text Field but make sure to position your Text Field to the right of your Label. Now would also be a good time to select your Text Field and change the border style to none. To save time we copy the static cell we just made and pasting it to create a copy as a starting point for our second static cell. Simply select the static cell your made and copy + paste it. (cmd + c for copy / cmd + p for paste). We now have our two static cells! While we’re at it, let’s drag out a Bar Button Item and place it in to our Navigation Controller’s right side. This will be our log in button for our form.
Double click on your labels to change the text. You can set the placeholder text by selecting your text fields and editing the value in the Attributes Inspector.
It’s actually starting to look like something. Wohoo! There’s one big problem, though. We didn’t create an Objective-c class to handle this Table View Controller. Under File > New > File. Select Objective-c Class and give it a name of LoginTableViewController which will be a subclass of UITableViewController. You should now have a header and implementation file for our new class. Jump back to your storyboard file and select the Table View Controller we just created. Once selected, in the Indentity Inspector change the class from UITableViewController to LoginTableViewController. This step is really important and it will be a step your forget at some point, so make sure you get in the habit of doing this now. Without this step, we can’t handle any actions being made in our Table View Controller.
Now comes the fun part – we’re going to hook up our text fields and log in button. Once again, load up your storyboard file and select our new Table View Controller we just created. We’re going to use an awesome new feature in Xcode called assistant editor (located in the upper right, the tuxedo looking icon). When you select this it will bring up our implementation or header file so we can make some connections. If you haven’t done so already, select the assistant editor and bring up the LoginTableViewController.m file on the right. The first two connections we’ll make is for our text fields so we have a weak reference to them. Ctrl+click and drag from the first text field into our LoginTableViewController interface. This will bring up a dialog asking your to name your text field, let’s call it UIEmailTextField and do the same for the second text field calling it UIPasswordTextField. Make sure you use a weak reference!
The next action we’re going to hook up is our bar button. Ctrl+click and drag from the Log In bar button item over to our implementation file and create IBAction to handle when the user presses our log in button. Let’s call this connection loginButtonPressed.
- (IBAction)loginButtonPressed:(UIBarButtonItem *)sender {
NSLog(@"Log In button was pressed!");
}
If you’re confused at this point with the assistant editor and making connections from your storyboard, dont worry! I will include the source file at the end so you can inspect everything. 🙂
Hooking up our Log in View Controller to our main View Controller
Now that all our references and actions are set, we need a way to launch our new log in view controller from our main view controller. In your storyboard drag a Button on to our main view controller. The next thing we need to do is hook up a segue to launch our LoginTableViewController. Again, ctrl+click and drag from our new button to the LoginTableViewControllers navigation controller using a storyboard segue of type Modal.
That’s it! If you launch the app, pressing the Log In button should launch the Log In Table View Controller. In part 2 of this tutorial we will discuss handling the server requests to our php file to authenticate the log in information as well as application state. Stay tuned!