• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to Build a Web App (for Non-Programmers)
 

How to Build a Web App (for Non-Programmers)

on

  • 22,046 views

I presented this to an audience of advertising planners/strategists. Code examples and other downloads at: http://noahbrier.com/planningness

I presented this to an audience of advertising planners/strategists. Code examples and other downloads at: http://noahbrier.com/planningness

Statistics

Views

Total Views
22,046
Views on SlideShare
20,560
Embed Views
1,486

Actions

Likes
41
Downloads
0
Comments
3

28 Embeds 1,486

http://www.noahbrier.com 1017
http://barbariangroup.com 168
http://lurnq.com 88
http://www.barbariangroup.com 69
http://noahbrier.com 34
https://twitter.com 32
http://runmotherfuckerrun.wordpress.com 13
http://chriscloud.posterous.com 9
http://www.nothingtodowithcreditunions.com 9
http://thinkdoer.com 8
http://ciu.dev 4
http://ranchero.com 4
http://pinterest.com 4
http://lookingforawesome.tumblr.com 4
http://leolikes.com 3
http://static.slidesharecdn.com 3
http://www.pinterest.com 2
http://translate.googleusercontent.com 2
http://localhost 2
http://socialkind.posterous.com 2
http://www.seenitbefore.net 2
http://www.twylah.com 1
http://tweetedtimes.com 1
http://www.instapaper.com 1
http://www.hpnw.de 1
http://webcache.googleusercontent.com 1
http://twittertim.es 1
http://www.slideshare.net 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great resource for beginners.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks for the post. Here’s a tool the lets you create your apps in minutes, without coding. Just Point-and-Click http://www.caspio.com/online-database
    Are you sure you want to
    Your message goes here
    Processing…
  • http://0845.com/Inr

    I tide fashion

    Good-looking, not expensive

    Free transport
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    How to Build a Web App (for Non-Programmers) How to Build a Web App (for Non-Programmers) Presentation Transcript

    • 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