Design and wireframes

Before we start building, we should always take a look at what we plan to build.

Firstly, a brief description of our intent: we plan to build an app that will display a simple form to the user. The user will be encouraged to enter a URL into the form and submit that form.

A unique code will be generated and associated with the URL entered by the user. This URL and unique code will be saved to a database.

A new URL will be shown to the user containing the unique code we just generated. That unique code will be appended to the URL of the app we're building. Should the user (or anyone else) click on that link, the app will look up the unique code in the database. If the unique code exists, it will redirect the user to the original URL associated with that unique code.

So, let's take a look at some wireframes to help us understand what this might look like on screen:

This is the first page that the user will see. The user is invited to enter a URL into the textbox and hit the Go button.

The page will be submitted and code will be generated. Both this code and the original URL will be saved to the database. The user will then see the new URL we've just created for them. They can copy that URL to their clipboard (for pasting into an e-mail and so on) or click on it there and then if they wish. This is shown in the following screenshot:

application/
├── controllers/
│   ├── create.php
│   ├── go.php
├── models/
│   ├── urls_model.php
├── views/create/
│   ├── create.php
├── views/nav/
│   ├── top_nav.php
├── language/english/
    ├── en_admin_lang.php