1
00:00:00,000 --> 00:00:08,000
[Master Class] [Designer and Developer Workflow] [Wireframing the Forms View]

2
00:00:08,000 --> 00:00:12,000
We've created our index view and our show view, 

3
00:00:12,000 --> 00:00:17,000
but now, we need to create a form that will be for the new view 

4
00:00:17,000 --> 00:00:21,000
and the edit view for our jobs.

5
00:00:21,000 --> 00:00:28,000
So, let's go ahead and just duplicate this as a new mockup, and we'll go ahead and save it,

6
00:00:28,000 --> 00:00:35,000
and we'll call this "New View," and once we get into the CSS, we can go ahead and just 

7
00:00:35,000 --> 00:00:42,000
slightly modify our new job view to also be our edit job view.

8
00:00:42,000 --> 00:00:47,000
So, I'll go ahead and save that out, and we'll keep a fairly consistent styling here.

9
00:00:47,000 --> 00:00:55,000
So, let's just go ahead and change this page title or job title to say 

10
00:00:55,000 --> 00:01:02,000
"New Job" or maybe something more friendly like "Post a New Job."

11
00:01:02,000 --> 00:01:09,000
That looks good, and we can delete some of these other things that we don't need.

12
00:01:09,000 --> 00:01:16,000
And we're actually going to keep this button here because we will need a submit button.

13
00:01:16,000 --> 00:01:19,000
We'll come back to that in a second.

14
00:01:19,000 --> 00:01:22,000
So now, we need to create our form fields.

15
00:01:22,000 --> 00:01:27,000
Now, if you recall, we had a job title, a company name, 

16
00:01:27,000 --> 00:01:31,000
a job description, and a see more link.

17
00:01:31,000 --> 00:01:41,000
So, I'll go ahead and jump over to text here, and I'll just create my labels.

18
00:01:41,000 --> 00:01:55,000
So, I'll say "Job Title," duplicate that, and change it to say "Job Description."

19
00:01:55,000 --> 00:02:06,000
I'll duplicate that, and we'll create our label for company name, 

20
00:02:06,000 --> 00:02:14,000
and then finally, we'll go ahead and call this our details link, 

21
00:02:14,000 --> 00:02:19,000
and in parantheses, we'll say that it's optional.

22
00:02:19,000 --> 00:02:23,000
And right now, I don't think this link will actually be optional.

23
00:02:23,000 --> 00:02:28,000
In fact, I don't think we'll have any real serious form validation right now.

24
00:02:28,000 --> 00:02:32,000
But, we can add that in a future iteration.

25
00:02:32,000 --> 00:02:37,000
So, we'll go ahead and create our details link there, and now,

26
00:02:37,000 --> 00:02:42,000
we have all of the labels that we're going to need to create this form.

27
00:02:42,000 --> 00:02:47,000
So, now we can go ahead and start creating some of the form fields.

28
00:02:47,000 --> 00:02:53,000
So, I'll go ahead and jump over to our containers here,

29
00:02:53,000 --> 00:03:05,000
and we'll just grab a rectangle here, and we'll change this into a text box, just like that.

30
00:03:05,000 --> 00:03:10,000
And we'll put that right under our job title,

31
00:03:10,000 --> 00:03:15,000
and we'll move our labels down here a little bit, duplicate this text box

32
00:03:15,000 --> 00:03:18,000
and put it right under company name.

33
00:03:18,000 --> 00:03:25,000
And we'll need a larger input for our job description,

34
00:03:25,000 --> 00:03:35,000
and this will probably actually be a text area in the markup.

35
00:03:35,000 --> 00:03:42,000
So, we'll move some things out of the way and put that down there.

36
00:03:42,000 --> 00:03:48,000
Maybe we'll move that up a little bit.

37
00:03:48,000 --> 00:03:51,000
There we go.

38
00:03:51,000 --> 00:03:57,000
And now, we can go ahead and put the rest of our stuff down here.

39
00:03:57,000 --> 00:04:05,000
We'll copy another text field, and we'll put it here for our details link.

40
00:04:05,000 --> 00:04:13,000
And then finally, we have our submit button down here at the bottom, 

41
00:04:13,000 --> 00:04:19,000
and for the submit button I'll just go ahead and change this to say something more friendly

42
00:04:19,000 --> 00:04:31,000
like "Create New Job" or maybe "Create New Job Posting."

43
00:04:31,000 --> 00:04:36,000
And again, we can always change this to say something else like "Post New Job"

44
00:04:36,000 --> 00:04:39,000
or really whatever we want, it doesn't matter.

45
00:04:39,000 --> 00:04:42,000
We just need to make sure that we create the space for it now 

46
00:04:42,000 --> 00:04:46,000
so that we know it's something we need to include on the page.

47
00:04:46,000 --> 00:04:48,000
So, this is looking pretty good.

48
00:04:48,000 --> 00:04:52,000
We could probably tighten up this layout a little bit and maybe put some of these 

49
00:04:52,000 --> 00:04:59,000
form fields adjacent to one another or move a few of these things up and adjust the spacing.

50
00:04:59,000 --> 00:05:05,000
But so far, I think this looks pretty good.

51
00:05:05,000 --> 00:05:10,000
So, we have this space over here, and we could go ahead and put in maybe some

52
00:05:10,000 --> 00:05:16,000
paragraph text that just outlines a few guidelines for how a job posting

53
00:05:16,000 --> 00:05:22,000
should be structured, but really, I'm just going to leave this space blank right now

54
00:05:22,000 --> 00:05:29,000
because I have a feeling that we're going to flesh that out in a future iteration.

55
00:05:29,000 --> 00:05:35,000
For example, we might be able to have tool tips come up on each one of these form fields

56
00:05:35,000 --> 00:05:39,000
as the person filling it out works their way down the page.

57
00:05:39,000 --> 00:05:42,000
So, we would want to leave this space open 

58
00:05:42,000 --> 00:05:45,000
just in case we wanted to add a feature like that.

59
00:05:45,000 --> 00:05:48,000
However, I think we can go ahead and just get away with having 

60
00:05:48,000 --> 00:05:51,000
a fairly simple form to start out with.

61
00:05:51,000 --> 00:05:56,000
So, I'll go ahead and save that out.

62
00:05:56,000 --> 00:06:05,000
So, just to review, we have our index view, our show view, and our new or edit view.

63
00:06:05,000 --> 00:06:13,000
And those are really all the views that we need to get started with for this iteration.

64
00:06:13,000 --> 00:06:17,000
So now, I think we're ready to go ahead and jump into code.