How to build a web app

Or at least how to understand what a web app is better than you do now.

1

2

hey, it’s noah

3

4

My Story

5

6

7

8

What is $44.6 billion?

9

10

11

Big Barrier #1

How do you pass stuff from one page to another?

12

13

It’s pretty much all forms

You hit a submit button and do something with a user’s data

But how do you do it?

How do you take what someone types in and build something to respond to it?

14

Let’s talk about HTTP

“HTTP functions as a request-response protocol in the client-server computing model.”

15

In english ...

HTTP is a set of nine things you can ask/tell a server.

16

The Big Nine

1. HEAD2. GET3. POST4. PUT5. DELETE6. TRACE7. OPTIONS8. CONNECT9. PATCH

17

The Big Nine Two

1. HEAD2. GET3. POST4. PUT5. DELETE6. TRACE7. OPTIONS8. CONNECT9. PATCH

18

19

GET

For getting data (aka asking for something)

POST

For posting data (aka submitting it)

20

Simple enough, right?

But what does it really mean?

21

23

24

ÜííéWLLïïïKÖooÖäÉKÅoãLëÉ~êÅÜ\èZé~ëëáåÖHÇ~í~HÑêoãHoåÉHé~ÖÉHíoH~åoíÜÉêCÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ

25

ÜííéWLLïïïKÖooÖäÉKÅoãLëÉ~êÅÜ\èZé~ëëáåÖHÇ~í~HÑêoãHoåÉHé~ÖÉHíoH~åoíÜÉêCÄíådZdooÖäÉHpÉ~êÅÜC~èZÑCoèZ

26

search?q=passing+data+from+one+page+to+another

1. search2. ?3. q=4. passing+data+from+one+page+to+another

27

search?q=passing+data+from+one+page+to+another

1. search (page that is processing the data)2. ? (start of query string)3. q= (field name)4. passing+data+from+one+page+to+another (query)

28

When you type in any URL

Your browser is making a GET request.

So the very easiest way to pass data between pages

Is by putting it in the URL. You already do this, you just don’t realize it.

29

30

31

ÜííéWLLïïïKÜoïãìÅÜÇoÉëáíÄìóKÅoãLÅoëíëKéÜé\ïÜ~íZ~PUMCãoåÉóZTUTHÄáääáoå

32

33

To get started making simple web apps

All you need is two things ...

1. How to make a web form

34

2. How to do something with the data in the URL on the other end

35

36

<form method=“get” action=“webapp.php”> <input type=“text” name=“stuff”> <input type=“submit”></form>

<form method=“get” action=“webapp.php”> <input type=“text” name=“stuff”> <input type=“submit”></form>

37

HTTP request method(passed in URL)

Page that will process our request

Name input will be saved under

<form method=“get” action=“webapp.php”> <input type=“text” name=“stuff”> <input type=“submit”></form>

38

HTTP request method(passed in URL)

Page that will process our request

Name input will be saved under

webapp.php?stuff=WHATEVERPEOPLETYPEIN

39

40

What will the URL be?

41

ÜííéWLLóoìêÇoã~áåKÅoãLãóÑáêëíïÉÄ~ééLïÉÄ~ééKéÜé\ëíìÑÑZëïÉÉíåÉëë

42

Now we just need to figure out how to get stuff down

At this point we turn to our trusty language of choice.

PHP

PHP Hypertext Protocol

43

That’s right

It’s a RECURSIVE INITIALISM!

44

Every language has its own syntax for this stuff

We’re going to be using PHP because that’s what I know.

45

So how do I get stuff down from the URL in PHP?

It’s simple really.

46

<? $_GET[‘stuff’];?>

That’s it. It’s all about what you do with it from there.

47

<? print $_GET[‘stuff’];?>

48

49

<strong><? print $_GET[‘stuff’];?></strong>

50

51

You wrote: <strong><? print $_GET[‘stuff’];?></strong>

52

53

54

We’ll dig in on more syntax later ...

But you get the drift.

POST

The other way to pass data.

55

POST is generally used for data you’re going to save.

But for now let’s just think of it as data you don’t want to show up in a URL.

56

Like a password ...

57

58

<form method=“post” action=“checkpassword.php”> Password: <input type=“password” name=“password”> <input type=“submit”></form>

59

60

<?if($_POST['password'] == 'password1') { print 'AWESOMECAKE!';} else { print 'FAIL!';}?>

61

62

<?if($_POST['password'] == 'password1') { print 'AWESOMECAKE!';} else {?> You got the password wrong, try again.<br />

<form method="post" action="checkpassword.php"> Password: <input type="password" name="password"> <input type="submit"> </form><?}?>

63

That about covers barrier #1

Let’s do a quick recap

64

Two main ways to pass data between pages?

65

GET & POST

66

Which one saves data in the URL string?

67

GET

68

Where does it put it?

69

URL: page.php?name=value

70

Big Barrier #2

What the hell is a database?

71

72

73

Co

lum

n

74

Row

75

Table

76

SELECT column_name FROM table_name WHERE column = value

77

78

SELECT * FROM sheet1 WHERE state = ‘CA’

79

80

INSERT into table_name (column1,column2) VALUES (value1,value2)

81

82

INSERT INTO sheet1 VALUES (‘Noah Brier’, ‘1 Noah Street’, ‘NY’, ‘NY’, ‘10032’)

83

Let’s write some code

84

Download These

MAMP: http://www.mamp.info/en/downloads/index.html

TextWrangler: http://www.barebones.com/products/textwrangler/download.html

Code: http://noahbrier.com/planningness.zip

OR YOU COULD GO TO http://noahbrier.com/planningness

85

86

87

88

89

90

91

92

93

94

The Basics

✤ $string = ‘string’;✤ if($string == ‘string’) {print this;}✤ else {print that;}✤ $_GET[‘field_name’];