Locked lesson.
About this lesson
Let's create the main skeleton of our Flashcard App.
Exercise files
Download this lesson’s related exercise files.
Creating The Index Page And Form.docx59.3 KB Creating The Index Page And Form - Solution.docx
59.9 KB
Quick reference
Creating the Index Page and Form
Let's create an index page and web form.
When to use
Do this to start our app.
Instructions
Our code so far...
<html>
<head>
<title>Math Flashcards!</title>
</head>
<body>
<center>
<h1>Addition</h1>
<h1>
<?php
$num1 = rand(1,10);
$num2 = rand(1,10);
echo $num1 . " + " . $num2;
?>
</h1>
<br/><br/><br/>
<form method="post" action="/">
Answer: <input name="answer"> <button>Submit</button> <button>New Card </button>
</form>
</center>
</body>
</html>
Hints & tips
- Create random numbers
- Create a form
- 00:04 So let's jump right in here and start building our math flash card app.
- 00:08 Now we're gonna start with the addition page and then we'll just go from there.
- 00:12 So if we look at our list,
- 00:13 we need to create four pages with each of these things.
- 00:16 So the first page will be just our index page.
- 00:18 And if we come up here and right click, and create a new page,
- 00:24 let's call this subtraction.php, and we'll do the same thing for
- 00:31 multiplication.php, and finally division.php.
- 00:37 And we can just leave this all blank for now.
- 00:39 So what next?
- 00:40 Well, we need to create a couple of random numbers.
- 00:43 So let's make them as variables.
- 00:45 So let's call it
- 00:47 number 1 = rand(1,10) let's just make it between 1 and 10 for now.
- 00:52 You can make it whatever you want, and number 2 = rand(1,10).
- 00:58 Those will generate two random numbers between one and ten.
- 01:01 So let's output those to the screen, and
- 01:06 let's do that by wrapping this in another h1 tag.
- 01:11 That's just an html tag, tab these over.
- 01:15 So we wanna echo out number one and let's put a plus sign under the screen so
- 01:21 we concatenate that out and num2.
- 01:24 Let's save this, come back here and hit reload.
- 01:27 And we get 9 + 8, so we've also put a center tag.
- 01:32 We need to close that center tag.
- 01:34 It's just an HTML tag that puts everything in the center of the screen.
- 01:38 So okay, so far so good.
- 01:39 Now, next we need a place for the user to enter their answer.
- 01:43 So let's put some line breaks here.
- 01:47 And let's create a form.
- 01:49 We've done this already.
- 01:50 And let's say answer.
- 01:52 And now we want an input field.
- 01:54 Actually before we do that, let's come up here and we need a method.
- 01:59 So we can either do post or get.
- 02:01 Let's do post, it doesn't really matter.
- 02:04 Let's do post and action, where do we wanna point this form?
- 02:08 Let's point this form to our same page, to index.php,
- 02:12 and you'll see exactly why that's cool in just a little bit here.
- 02:17 So the answer, let's create an input field, and let's name it answer, pretty simple,
- 02:22 and let's create a button and let's call it Submit and
- 02:26 if we save this, back here and hit reload, we have okay.
- 02:30 So now if we type something in nothing actually happens.
- 02:33 But whenever we click this button, it just reloads the page.
- 02:36 And every time it does that, it creates two new random numbers.
- 02:39 'Cause the page is being reloaded, the whole file is being reloaded.
- 02:42 So we can create another button if we want, and call this New Card.
- 02:49 This one doesn't do anything just yet, but it can sit there and looks good.
- 02:53 So we have our basic setup for our addition page.
- 02:56 It doesn't actually do anything just yet, but
- 02:59 we are a good way towards getting this thing done.
- 03:02 And that was a pretty quick setup, I think.
- 03:04 In the next video, we'll start to work on the functionality of this thing.
Lesson notes are only available for subscribers.