Navigation

Lost In Code a developer's blog
Home
  • Home
  • Contact
Return to Content

Creating a log in view controller for your app in iOS5 with a PHP backend (1/2)

By Bill on May 31, 2012 in iOS, iPhone, PHP

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.

Xcode project single view project

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.
xcode storyboard view controller with navigation

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.

xcode storyboard table view controller

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.

xcode attributes inspector panel for tableview

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.

xcode log in form controller in table view controller

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.
identity inspector

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!

xcode assistant editor

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.

storyboard segue 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!

Download the Xcode project on GitHub

About Bill

iOS, Ruby on Rails developer in Los Angeles, CA.
View all posts by Bill →

Subscribe

Subscribe to our e-mail newsletter to receive updates.

Related Posts:

  • How to migrate data from Laravel Cashier 5 to 6
  • Swift – Google Analytics
  • Laravel 4 – Pivot vs Polymorphic – Part 1
  • Creating the bouncy/zoom image effect in the KickStarter iOS app
  • Creating a pull to refresh animation like the popular Vine iOS app

ios, login, PHP, storyboard, tableview, xcode

Lighttpd – url rewrite and query string QSA
Creating a pull to refresh animation like the popular Vine iOS app
  • Popular
  • Latest
  • Comments
  • Tags
  • JQuery sort() February 11, 2009
  • SDWebImages-Tut-0 SDWebImage fixed width cell images November 20, 2011
  • PHP5 Email Validation February 10, 2009
  • Error calling method on NPObject! February 12, 2009
  • Getting Upcoming Birthdays From MySQL March 31, 2009
  • How to migrate data from Laravel Cashier 5 to 6 February 4, 2016
  • Swift – Google Analytics February 11, 2015
  • Laravel Logo Laravel 4 – Pivot vs Polymorphic – Part 1 April 5, 2014
  • kickstarter Creating the bouncy/zoom image effect in the KickStarter iOS app April 25, 2013
  • 687474703a2f2f7777772e7772696368617264732e636f6d2f6769746875622f73736769746875625f76696e652e706e67 Creating a pull to refresh animation like the popular Vine iOS app April 21, 2013
  • Andrey Solovey: Good tip, thanks! The only addition - you set a to...
  • Deepika Sample: Very good informative article. Thanks for sharing ...
  • Fuzzy International: Code is not working. I have tried the same way but...
  • William Ã…ström: Thanks man. Came back to an old project and this c...
  • ananthi ayiram: Thanks for posting useful information.You have pro...
actionscript Amazon S3 as3 base_convert() birthday bucket url Chrome CNAME Cr-48 crossdomain.xml cURL custom domain dom email validation exif ExternalInterface Flash Flash 8 Google innerHTML ios iOS 4.2 ios5 iphone JavaScript JQuery laravel lighttpd lighty login controller missing sdk MOUSE_MOVE MTV MTVN MySQL NPObject Objective C PHP scrollbar search sort sphinx startDrag UITableView usort()
Tweets by @lostincode

Categories

  • Actionscript 2.0 (1)
  • Actionscript 3.0 (2)
  • Amazon S3 (1)
  • Flash (3)
  • iOS (4)
  • iPhone (7)
  • JavaScript (2)
  • JQuery (2)
  • Laravel (2)
  • Lighttpd (1)
  • MySQL (2)
  • PHP (10)
  • Swift (1)
  • Uncategorized (2)

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2022 Lost In Code. All Rights Reserved.

Powered by WordPress. Designed by Woo Themes