Web Programming: Difference between revisions

From Free Geek Seattle
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
[[Category:Programming Training]]
[[Category:Programming Training]]
[[Category:Classes]]
[[Category: Overviews]]


This page is an overview and introduction to basic Web programming concepts. Before diving in, please read [[Web Development]] first.


:The Web Programming track will cover basic dynamic website creation using [[FLOSS]] technologies.  
More Web programming topics are available at [[Web Client Programming]] and [[Web Server Programming]].  
This page is an initial syllabus for the intro class. Later we'll amend it to make it more a general reference.
The initial class planned will be about 3 hours long and cover the following:


=Introduction=
=First steps=


==Who am I?==
To get started with basic Web programming, all that is needed is a Web browser and a text editor. Since it's possible to implement an editor within the browser (I'm using one now), technically all you need is the browser.


Instructor, introduce thyself!
Try this on for size:


Name, rank, serial number... I mean email address, IRC handle, any other info you think is relevant.
# Open up your text editor.
# Make a New File.
# Type in (or paste) the code in the box below.
# Save the file, giving it a name ending in ".html" Remember where you saved the file (that is, the ''path'' to the file.)
# Open the browser.
# In the browser's address bar, type: 'file://[path-to-your-file]' - replacing the stuff in brackets with the path and name of your .html file.
# You have now successfully written and run a program! Congratulations!


Introduce FGS, what we do, pitch for donations?
Once you have written your program and seen it run, you might want to make some changes. Just edit the text file, save it, and hit Refresh in your browser, and you will see the changes you've made.


=Other (and therefore better) resources=
<pre>
<!DOCTYPE html>
<html>
<head>
<script language="javascript">
      alert("Hello World! I'm an annoying Alert Box!");
</script>
<body>
<p>I promise not to use alert() any more in these examples. It's terrible!</p>
</body>
</html>
</pre>


References:
That's a pretty basic program- it doesn't do much. To do more sophisticated programming, it's useful to have a collection of further tools.


[http://w3.org  World Wide Web Consortium(W3C)]
=Programming Tools=
[http:whatwg.org Web Hypertext Application Group (WHATWG)]


Questions Answered:
==Editor==


[http://stackexchange.com StackExchange]
While a basic text editor is enough to get the job done, more powerful ones offer useful features. I like Bluefish Editor.
Beyond the simple programmer's editor is a large program or suite of programs called an Integrated Development Environment or IDE. Emacs and Eclipse are examples.


Tutorials:
==Shell==
 
[http://codecademy.com CodeCademy]
[http://php.org The PHP site]
 
Ctrl-U is your friend!
Hit Ctrl-u on any web page (or choose View Source from your browser's menus) to see the source code of any web page in your browser.
 
=Web Programming Overview=
 
==Setting Up==
 
===What You Need: A Programming Environment===
 
====Shell====
The shell is where you give commands to the OS. Windows started out as a shell for DOS; now it's a shell for an OS also called Windows.
The shell is where you give commands to the OS. Windows started out as a shell for DOS; now it's a shell for an OS also called Windows.
GNU/Linux has lots of shells. sh, tcsh, ash, Bourne, csh, bash, dash are all command-line shells. fvwm, twm, xmonad, GNOME, KDE, et al. are all graphical shells.  
GNU/Linux has lots of shells. sh, tcsh, ash, Bourne, csh, bash, dash are all command-line shells. fvwm, twm, xmonad, GNOME, KDE, et al. are all graphical shells.  
Line 52: Line 54:
Scriptability is good but technically optional; it's ''mostly'' possible to do all your scripting in PHP or whichever language you are using.
Scriptability is good but technically optional; it's ''mostly'' possible to do all your scripting in PHP or whichever language you are using.


=====If you MUST use Windows=====
Install Cygwin or PowerShell. Steep learning curve, but well worth the effort.


====Interpreter / Compiler====
==Interpreter / Compiler==


An interpreter runs when you run your code and executes it. A compiler takes your code and turns it into a stand-alone executable.
An interpreter is a program that reads your code and executes it.
Compiled code runs faster but takes longer to write. Hardly anyone does web development in compiled languages.
This class will use PHP, a popular interpreted language originally developed for web programming, for all examples.


====Editor====
Javascript is interpreted by your Web browser.
A compiler takes your code and turns it into a stand-alone executable.


*Basic: gedit, kate, nano
Compiled code runs faster but takes longer to write, due to the additional steps of linking and compilation between writing the program and running it.
*Full-featured: Bluefish, PHPEdit, or fancy IDEs like Eclipse
C and c++ are compiled languages, along with Pascal, Ada and Fortran. All of these are supported by gcc, the Gnu Compiler Collection. Web development is rarely done in compiled languages, although there are instances where pre-compiled libraries are linked or an entire site is done in a compiled language for speed.
*Advanced: vim or Emacs


=====If you MUST use Windows=====
==Working in Groups: Other useful tools==
*DO NOT USE Notepad, it is broken. Notepad++ is free and better and should ship w/Windows (part of Sysinternals Suite)


Strongly recommended to install Sysinternals Suite (provided free by Microsoft) and Cygwin for development in Windows (among other things Cygwin provides a working SSH client. PuTTY is for masochists.)
===Communication===
 
HOLY WARS ARE BAD M'KAY
 
 
===Working in Groups: Other useful tools===
 
====Communication====
Maillists, IRC, wiki, etc
Maillists, IRC, wiki, etc


Avoid meetings. They will eat your soul and sap your will to live.
Avoid meetings. They will eat your soul and sap your will to live.


====Version Control====
===Version Control===


If you are working with just one or two other programmers you can get away with just using diff and patch. These tools are important to know in any case.
If you are working with just one or two other programmers you can get away with just using diff and patch. These tools are important to know in any case.
Line 99: Line 89:




===What a Web Application Needs: Infrastructure===
===Infrastructure===


====Database====
====Database====
Line 115: Line 105:




==A quick look at programming==
==Basics of programming==
===Why I made a big deal out of what HTML, CSS, JS are for===
 


Best Practices. Learn them, know them, practice them.
Best Practices. Learn them, know them, practice them.
Line 157: Line 147:


Mostly we won't care about shell scripts in this class. Client-side scripts are embedded in or called from webpages via <script> tag, server-side ones sometimes use different tags or invoked by server.
Mostly we won't care about shell scripts in this class. Client-side scripts are embedded in or called from webpages via <script> tag, server-side ones sometimes use different tags or invoked by server.
==Client-server architecture==
Client is usually a Web browser (but can be other program)
Server will be called htppd (it's a daemon that serves HTTP requests)
*What's a daemon?
#User invokes client, interacts with document, clicks something (i.e., fills out form, clicks ''Submit'')
#Client sends HTTPRequest containing client data to server (via GET or POST)
#Server passes client data to scripting engine
#Script engine opens connection to database, sends CRUD instructions and data
#Database sends response to script engine
#Script engine uses data to construct HTML document, sends same to server
#Server sends HTML document via HTTPResponse to client
#Client formats and displays document
Ta-da!
=The [[LAMP]] server stack=
Linux, Apache, MySQL, and PHP
[[LAMP]] pretty much covers the server end of things as far as this class is concerned.
Obvs LAMP is for Linux, but versions exist for Win and Mac
Also there's XAMPP and its Portable edition
XAMPP is ok for development and testing but not meant for production servers
What does that mean?
==Linux and Apache==
Linux is great and rewards study, but we're not going into it in this class.
Information about Linux as a server can be found at [[Server Operating System]], at least in theory.
Apache is an HTTP server (httpd), probably the most widely-used in the world. According to Netcraft Apache2 serves more than half of all websites.
Apache2 docs live here: https://httpd.apache.org/docs/2.2/
See also [[Server Software]].
Apache is the "kitchen sink" of httpd. It can do just about anything you can think of, and its modular structure allows it to do things no one has thought of yet (along with the fact that it's Free Software of course.)
Apache's configuration is complex and Byzantine. You shouldn't need to fool with it for a basic development environment.
Here's a brief overview.
===apache2.conf===
This is the 'base' file where the configuration data goes for the server itself.
===Sites-available and sites-enabled===
Apache2 supports an important feature called "virtual hosts". This allows one server setup to serve multiple web sites, each with its own domain name, port, etc. Sites-available and Sites-enabled are directories. Sites-available contains configuration data for each site the server will host. Sites-enabled contains [[symbolic links]] to the relevant files in sites-available, indicating which sites the server is currently hosting.
There's also a mods-available and mods-enabled. Once your setup is done in *-available you don't edit the symlinks in *-enabled directly. Instead you use a2ensite / a2enmod or a2dissite / a2dismod
===Modules===
As mentioned earlier, Apache2 is modular. That means its functionality can be extended with bits of code that can be added to it, called modules. If you are using PHP, you can use mod_php (this reflects the general name convention for apache modules: mod_*) where otherwise you would need to use a CGI interface to your language of choice. This class will not cover CGI nor mod_perl or whathaveyou.
In fact, since LAMP bundles come with mod_php already set up, we're done talking about modules.
==MySQL==
It's probably possible to build a web application without a database, but I wouldn't recommend it. The database is where your data lives, and data is the important part of your app. Using a database means you don't have to figure out how to structure your own data.
MySQL is a relational database engine. Relational databases store data in tables, like so:
{|
  <table>
  <caption>Computers</caption>
  <tr><th>BoxID</th><th>hostName</th> <th>Location</th> <th>RAMconfig</th> <th>CPUType</th></tr>
  <tr>  <td> 1</td>  <td>www</td>  <td>datacenter</td>  <td>2 </td>  <td>Xeon </td></tr>
  <tr>  <td> 2</td>  <td>backup</td>  <td>office-remote</td>  <td>2 </td>  <td>Core3i</td></tr>
  <tr>  <td> 3</td>  <td>mysql</td>  <td>datacenter</td>  <td>3 </td>  <td>Xeon</td></tr>
  <tr>  <td> 4</td>  <td>firewall</td>  <td>datacenter</td>  <td> 7</td>  <td>Xeon</td></tr>
  </table>
|}
This probably looks familiar to you if you work with spreadsheets. Spreadsheets also use tabular data, and spreadsheets are ok, but database > spreadsheet.
Let's look at this table.
First off, you wouldn't have that first column in a spreadsheet (because the spreadsheet already provides it). BoxID is the "primary key" for this table. Every table must have a primary key. The primary key serves two important functions:
* It is a unique identifier for each record (row) in a table.
* It serves as an endpoint to identify relations between tables.
What are relations between tables? We'll get to that in a bit. First, let's have a look at the RAMconfig column. Why are there numbers for RAMConfig? Those numbers don't really describe anything, do they?
Check this out:
{|
  <table>
  <caption>RAMtypes</caption>
  <tr><th>configID</th><th>RAMtype</th> <th>numberOfSticks</th> <th>totalMB</th> </tr>
  <tr>  <td>1</td>  <td>1</td>  <td>2</td>  <td>1024 </td>  </tr>
  <tr>  <td>2</td>  <td>1</td>  <td>4</td>  <td>2048</td>  </tr>
 
  <tr>  <td> 4</td>  <td>2</td>  <td>2</td>  <td>4096</td></tr>
  </table>
|}
So what, it's another table. This table lists a bunch of configurations of RAM. Big deal.
But the other table has a column for configurations of RAM. If we had entered all that RAM data into the top table we would have had to repeat ourselves a bunch of times, since two machines each have RAMConfig number 2.
Instead, we split off the RAM data into a separate table with its own data, and a primary key isomorphic to the RAMConfig column in the first table. Then we tell the database something like:
<pre>
ALTER TABLE `accounts`
  ADD CONSTRAINT `FK_myKey` FOREIGN KEY (`RAMconfig`) REFERENCES `RAMconfigs` (`configID`) ON DELETE CASCADE ON UPDATE CASCADE;
</pre>
That's basically what SQL ([[Structured Query Language]]) commands look like. That command is probably wrong, SQL is fairly complicated.
OR you could just install phpMyAdmin and draw a little arrow going from RAMconfig in the Computers table to configID in the RAMconfigs table and hey presto, you've got a relation without typing all that complex stuff.
==PHP==
PHP is an old scripting language. The name kinda-sorta stands for Hypertext Preprocessor, which is PHP's main function. PHP has been around since the early 1990s (hence 'ancient', though Perl hackers still think of PHP as the 'new kid') and has since grown into a full-featured scripting / programming language. As of PHP 5 the language supports OOP, but that's a topic for a different class.
PHP can be embedded in HTML files. The server can ''sometimes'' parse PHP in files with .html extension, but using .php extension is safer.
Here's a sample of some embedded PHP:
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script lang="php" src="function_defs.php" />
<-- If we wanted to define some functions to use later we might do this. This isn't PHP yet.Note that this is an HTML comment, PHP comments show up later !>
<title>This is a sample page</title>
</head>
<body>
<?php> //This is an opening PHP tag- it tells the server to send the following to the PHP interpreter. The server sends the output to the browser, not the code you see here.
echo "<div id="php-generated"> You can use PHP to generate arbitrary HTML</div>";
echo "<script> getElementByID("php-generated")InnerHTML = "You can also use it to generate Javascript"; </script>";
for(i=0, i>5, i++){
  echo 'printing i numbers';
  /*PHP treats single quotes differently from double quotes-
    one allows parsing within a string and one does not
    following is a different way to do this */
  //echo "printing".i."numbers";
  }
  </?>
</body>
</html>
</pre>
=Client side technologies=
These are things served to the client from the browser.
==Browser quirks==
w3c.org promulgates standards for how clients (browsers, etc) should render Web content.
Not all browsers implement the standards the same (I'm looking at ''you'', Internet Explorer...)
Many browsers have a 'Standards' or 'Strict' mode and a 'Quirks Mode'. Usually Quirks Mode is there to support older code.
Browsers sometimes decide which mode to use based on [[DOCTYPE |http://www.w3schools.com/tags/tag_doctype.asp]]. DOCTYPE is mandatory in XHTML. Using xmlns="XHTML 1.0 Strict" should force Standards mode and make things work across different clients.
Your Mileage May Vary.
Keeping style markup out of your HTML can work to make it better across browsers. You can use separate CSS files for different clients, etc.
==HTML==
#It's really XML! Sort of. HTML is based on SGML, and XHTML is based on XML. I'm showing you XHTML because of reasons.
#OK, so what's XML? XML is Extensible Markup Language. It's a meta-language designed as a framework for Data Description Languages. It's a strict method of structuring data. Properly structuring data makes programming easier. Use of XHTML vs HTML 4.01 or HTML 5 encourages better habits. Newer versions of XHTML will support the bells and whistles in HTML5, hopefully without the security holes and cross-browser incompatibilities.
#HTML is for data
Use HTML for documents and markup. Markup means, this part's a form, this part's a heading, this part should be a blockquote, etc.
NOT use this font here, this color here, etc.
#CSS is for presentation. Use CSS for your pretty-printing. Specify colors, fonts, weights, position, scaling, and more. 1000% more flexible than inline styles and it keeps your code clean.
#ECMAScript is for logic.
*WTF is ECMAScript?
*It's just Javascript, I'm being pedantic
Use Javascript to change the content in your HTML or the styles in your CSS on-the-fly. Use it to pull data from the server and insert it into the page without refresh or to send data to the server transparently. Javascript is optional-ish, but very useful. Be careful with it, it carries lots of security risk.
You cannot get a job in web development unless you know Javascript.
Sample HTML
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is a sample page</title>
</head>
<body>
<div class = "float-top">
<--! This is an HTML comment. "class" and "id" attributes identify elements so that you can style them with CSS or manipulate them with ECMAScript. -->
<form id = "asksomestuff" action = "inputFromForm.php" method = "POST">
  Tell me something: <input type = "text" name = "something"> <br />
  <input type = "submit" value = "Send It!" />
</form>
  <--! This is a basic form that sends the stuff you type in "something" to a program called "inputfromForm.php" on the server that served this page. -->
</div>
</body>
</html>
</pre>
http://www.w3schools.com/html/html_xhtml.asp
==CSS==
CSS stands for Cascading Style Sheets. You can specify different styles for different elements using a group of CSS files with rules for choosing the styles. It's all very complex: http://www.w3schools.com/css/default.asp
But it's actually pretty easy for basic use. Here's a sample CSS file for our sample page:
<pre>
head {
/* CSS uses this comment style */
}
body {
background-color: #bel337;
  div {
  float: left;
  background-color: #b31340;
}
  div.class {
text-align: center;
color: green;
}
  #asksomestuff {
color: red;
}
/* These make all divs float left, all divs of class "class" have centered green text, and the element with id "asksomestuff" have red text. */
}
</pre>
==Javascript==
Use javascript to change the content of HTML pages on the fly.
As with PHP, javascript can be embedded in Web pages. Unlike PHP, when javascript is used on a page, it's visible in the Page Source (ctrl-U).
Here's a sample of some javascript embedded in a div:
<pre>
<div id="putithere">Podner</div>
<script type="javascript>
var tonto = document.getElementByID("putithere");
tonto.innerHTML = "Kemosabe";
// this replaces the text inside the div
</script>
</pre>
===DOM===

Latest revision as of 23:54, 29 October 2013


This page is an overview and introduction to basic Web programming concepts. Before diving in, please read Web Development first.

More Web programming topics are available at Web Client Programming and Web Server Programming.

First steps[edit]

To get started with basic Web programming, all that is needed is a Web browser and a text editor. Since it's possible to implement an editor within the browser (I'm using one now), technically all you need is the browser.

Try this on for size:

  1. Open up your text editor.
  2. Make a New File.
  3. Type in (or paste) the code in the box below.
  4. Save the file, giving it a name ending in ".html" Remember where you saved the file (that is, the path to the file.)
  5. Open the browser.
  6. In the browser's address bar, type: 'file://[path-to-your-file]' - replacing the stuff in brackets with the path and name of your .html file.
  7. You have now successfully written and run a program! Congratulations!

Once you have written your program and seen it run, you might want to make some changes. Just edit the text file, save it, and hit Refresh in your browser, and you will see the changes you've made. 

 <!DOCTYPE html>
 <html>
 <head>
 <script language="javascript">
      alert("Hello World! I'm an annoying Alert Box!");
 </script>
 <body>
 <p>I promise not to use alert() any more in these examples. It's terrible!</p>
 </body>
 </html>

That's a pretty basic program- it doesn't do much. To do more sophisticated programming, it's useful to have a collection of further tools.

Programming Tools[edit]

Editor[edit]

While a basic text editor is enough to get the job done, more powerful ones offer useful features. I like Bluefish Editor. Beyond the simple programmer's editor is a large program or suite of programs called an Integrated Development Environment or IDE. Emacs and Eclipse are examples.

Shell[edit]

The shell is where you give commands to the OS. Windows started out as a shell for DOS; now it's a shell for an OS also called Windows. GNU/Linux has lots of shells. sh, tcsh, ash, Bourne, csh, bash, dash are all command-line shells. fvwm, twm, xmonad, GNOME, KDE, et al. are all graphical shells. This is drastically oversimplified but it doesn't matter- You don't have to install this, just know how to use it. For programming purposes the important thing about the shell is that it should:

  1. Be scriptable;
  2. Be able to background or multiplex tasks.

Scriptability is good but technically optional; it's mostly possible to do all your scripting in PHP or whichever language you are using.


Interpreter / Compiler[edit]

An interpreter is a program that reads your code and executes it.

Javascript is interpreted by your Web browser. A compiler takes your code and turns it into a stand-alone executable.

Compiled code runs faster but takes longer to write, due to the additional steps of linking and compilation between writing the program and running it. C and c++ are compiled languages, along with Pascal, Ada and Fortran. All of these are supported by gcc, the Gnu Compiler Collection. Web development is rarely done in compiled languages, although there are instances where pre-compiled libraries are linked or an entire site is done in a compiled language for speed.

Working in Groups: Other useful tools[edit]

Communication[edit]

Maillists, IRC, wiki, etc

Avoid meetings. They will eat your soul and sap your will to live.

Version Control[edit]

If you are working with just one or two other programmers you can get away with just using diff and patch. These tools are important to know in any case. If you are working with a larger group than that, you need version control.

Version control is a means of tracking changes to your code as they are made. A good VCS lets you know who made any given change and when it was made, as well as allowing you to roll back arbitrary changes. There are two main types.

  • Centralized VCS (AKA SCCM)

CVS is the granddaddy. It and it's descendants provide a centralized 'repository' where the code lives. When you want to work on a module, you 'check it out', which locks that part of the code so others can't make changes to it. When you are done you check it back in. Other centralized VCS include svn and Bazaar.

  • Distributed

Distributed VCS allow each developer to set up its own repository and tracks changes not only within the local repo but against other non-local ones. Decentralized VCS include Mercurial and git. Git is my favorite :^)


Infrastructure[edit]

Database[edit]

httpd[edit]

Connects via module or CGI to...

Language interpreter[edit]

Holy Cats, that's a lot to set up![edit]

Linux metapackages, i.e. 'ubuntu-lampserver'[edit]

XAMPP[edit]

Basics of programming[edit]

Best Practices. Learn them, know them, practice them.

  • For example: Separate data, logic and presentation!

Modularity is good, spaghetti code is bad.

  • DATA IS KING.

Most programs are about data. Think carefully about your data and its representation before you start coding. This will save you time and headaches in the long run. Make sure your data is well-structured before you start building logic to manipulate it.

  • Copious comments create comprehension.

Comment your code. When you start out in programming, make sure you over-comment. You'll feel foolish doing this. That is OK. Soon you will get a feel for what and where to put comments. Feeling foolish for over-commenting is much better than the feeling you get from looking over 2-month old code and realizing you have no idea what it does. Ask me how I know... What comments look like: 

/*This is
  a multi-line comment.
  some people prefer to put
  the comment delimiters on a separate line like so:
*/

//This is a single line comment.
//Lots of short comments are a Good Thing.
//If you use a lot of them in a row, you might consider using the multi-line style...
//Or not. It's up to you.
  • Self-documenting code

Apart from comments there are other techniques to use to keep your code easy to read and understand.

  1. Descriptive variable names. If you have a variable that tracks the number of computers you have on the shelf, don't call it 'x'; call it 'computersOnTheShelf' or something. A good programmer's editor will pick up on the variable names you use and autocomplete them for you, so there's no need to be a lazy typist. The exception here is 'i' for iterators- that's a convention, everyone knows what it means. If you want to use a descriptive name for your iterators, go ahead- there's no reason not to.
  2. Descriptive module names. By "modules" I mean functions, classes, objects, attributes and methods. Each should represent or do something specific and well-defined, and its name and the names of any arguments should reflect that.
  3. Docstrings. A docstring is a little 'manual' embedded in your program, callable by one of its methods. Write it first and you can use it to keep track of what this particular module does. If you find yourself changing the docstring to reflect features you want to add, consider putting those features in a different module instead.


Ba da bing, the whole #![edit]

Folks call it "shebang" Used in scripts that will be executed by the shell, indicates path to interpreter like so: 

#!/usr/bin/python

Some languages are interpreted, some compiled. All languages covered in this class are interpreted.

  • Anyone care about the difference?

Mostly we won't care about shell scripts in this class. Client-side scripts are embedded in or called from webpages via <script> tag, server-side ones sometimes use different tags or invoked by server.

Retrieved from "http://freegeekseattle.org/wiki/index.php?title=Web_Programming&oldid=491"