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




                1
hey, it’s noah
  2
3
4
My Story




     5
6
7
What is $44.6 billion?




      8
9
10
Big Barrier #1
How do you pass stuff from one page to another?




                11
12
It’s pretty much all forms
You hit a submit button and do something with a user’s data




                13
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. HEAD
2. GET
3. POST
4. PUT
5. DELETE
6. TRACE
7. OPTIONS
8. CONNECT
9. PATCH



             17
The Big Nine Two

1. HEAD
2. GET
3. POST
4. PUT
5. DELETE
6. TRACE
7. OPTIONS
8. CONNECT
9. PATCH



             18
GET
For getting data (aka asking for something)




                19
POST
For posting data (aka submitting it)




                20
Simple enough, right?
But what does it really mean?




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


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


      25
search?q=passing+data
+from+one+page+to
+another
1. search
2. ?
3. q=
4. passing+data+from+one+page+to+another




              26
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)




                  27
When you type in any URL
Your browser is making a GET request.




               28
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
ÜííéWLL
ïïïKÜoïãìÅÜÇoÉëáíÄìóKÅoãL
ÅoëíëKéÜé
ïÜ~íZ~PUMCãoåÉóZTUTHÄáääáoå


      31
32
To get started making
simple web apps
All you need is two things ...




                  33
1. How to make a web form




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




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




              36
Page that will
   HTTP request method                      process our request
               (passed in URL)




<form method=“get” action=“webapp.php”>
   <input type=“text” name=“stuff”>
   <input type=“submit”>
</form>
                                 Name input will be
                                 saved under




              37
Page that will
   HTTP request method                      process our request
               (passed in URL)




<form method=“get” action=“webapp.php”>
   <input type=“text” name=“stuff”>
   <input type=“submit”>
</form>
                                 Name input will be
                                 saved under


         webapp.php?stuff=WHATEVERPEOPLETYPEIN

              38
39
What will the URL be?




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



      41
Now we just need to figure
out how to get stuff down
At this point we turn to our trusty language of choice.




                 42
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
We’ll dig in on more syntax
later ...
But you get the drift.




                 54
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
<form method=“post” action=“checkpassword.php”>
   Password: <input type=“password” name=“password”>
   <input type=“submit”>
</form>




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




                60
61
<?
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>
<?}
?>


               62
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
     Column
Row




74
Table

   75
SELECT column_name
FROM table_name WHERE
column = value




    76
77
SELECT * FROM sheet1
WHERE state = ‘CA’




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




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



      82
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
The Basics



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




                     94

Noah Brier: How to build web apps