Web Programming Class Notes: Difference between revisions

From Free Geek Seattle
(Created page with "Category:Programming Training Category:Classes :The Web Programming track will cover basic dynamic website creation using FLOSS technologies. This page is an in...")
 
No edit summary
Line 6: Line 6:
This page is an initial syllabus for the intro class. Later we'll amend it to make it more a general reference.
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:
The initial class planned will be about 3 hours long and cover the following:
These notes are divided into Client-side and Server side sections. Experience so far has shown it's too much stuff for one class (for new folks anyway.)


=Introduction=
=Introduction=
Line 36: Line 37:
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.
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=
=Client side web programming=


==Setting Up==
==Things you will need==


===What You Need: A Programming Environment===
===For the client side===


====Shell====
#A computer with a web browser and a text editor (NOT a word processor.)
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.
#That's really all.
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:
#Be scriptable;
#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.
Optional: Version control, access to the internet for looking up references.


=====If you MUST use Windows=====
===Client-side references===
Install Cygwin or PowerShell. Steep learning curve, but well worth the effort.
http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc
#DOM
*https://developer.mozilla.org/en-US/docs/DOM
*http://dom.spec.whatwg.org/
*http://www.w3.org/wiki/Dom
#HTML
*https://developer.mozilla.org/en-US/docs/Web/HTML
*http://docs.webplatform.org/wiki/html
*http://reference.sitepoint.com/html
*http://www.w3.org/wiki/HTML
*http://www.whatwg.org/specs/web-apps/current-work/multipage/
#CSS
*https://developer.mozilla.org/en-US/docs/Web/CSS
*http://docs.webplatform.org/wiki/css
*http://reference.sitepoint.com/css
*http://www.w3.org/wiki/CSS
#Javascript
*https://developer.mozilla.org/en-US/docs/Web/JavaScript
*http://docs.webplatform.org/wiki/javascript
*http://reference.sitepoint.com/javascript


====Interpreter / Compiler====
==Your first Web page==


An interpreter runs when you run your code and executes it. A compiler takes your code and turns it into a stand-alone executable.
It can be as simple as this:
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====
 
*Basic: gedit, kate, nano
*Full-featured: Bluefish, PHPEdit, or fancy IDEs like Eclipse
*Advanced: vim or Emacs
 
=====If you MUST use Windows=====
*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.)
 
HOLY WARS ARE BAD M'KAY
 
 
===Working in Groups: Other useful tools===
 
====Communication====
Maillists, IRC, wiki, etc
 
Avoid meetings. They will eat your soul and sap your will to live.
 
====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 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 :^)
 
 
 
===What a Web Application Needs: Infrastructure===
 
====Database====
 
====httpd====
Connects via module or CGI to...
 
====Language interpreter====
 
===Holy Cats, that's a lot to set up!===
 
====Linux metapackages, i.e. 'ubuntu-lampserver'====
====XAMPP====
 
 
 
==A quick look at programming==
===Why I made a big deal out of what HTML, CSS, JS are for===
 
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.
# 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.
# 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.
# 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 #!===
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.
 
==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:


#Fire up your text editor of choice.
#Enter the text that follows this list.
#Save as [something].html - for example, "hello.html"
<pre>
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<!DOCTYPE html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head />
<head>
  <body>
<script lang="php" src="function_defs.php" />
    <h1>Hello World!</h1>
<-- 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 !>
   </body>
<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>
  </html>
</pre>
</pre>
=Client side technologies=
Now open your Web browser and point it at your file. You can type its path into your address bar:
file:///home/user/hello.html


These are things served to the client from the browser.  
Or you can drag-and-drop the file's icon from your file manager into the browser.


==Browser quirks==
That's a pretty basic web page, and it doesn't do much. Actually, it doesn't do anything.
Before making it do stuff, let's talk about structure.


w3c.org promulgates standards for how clients (browsers, etc) should render Web content.
==DOM==
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.
Your HTML is a template for a Document Object.
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.  
In programming (Object Oriented Programming) an *object* is an instance of a *class*- for example, a particular document is an instance of the general class of documents. This class is described by the Document Object Model.


Your Mileage May Vary.
When the browser loads your HTML file, it takes the information in it and builds a document object out of it. This object is a tree-like structure, like a file system. Instead of file names and file contents, the document object contains the tags and the text inside the tags- along with other things. Instead of 'files', these key-value sets are called 'nodes'.


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.
So, the "Hello World" text in the example might have a DOM path something like:
document.html.body.h1.InnerHTML


==HTML==
==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==
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===
==ECMAScript==

Revision as of 01:38, 19 December 2013


The Web Programming track will cover basic dynamic website creation using FLOSS technologies.

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: These notes are divided into Client-side and Server side sections. Experience so far has shown it's too much stuff for one class (for new folks anyway.)

Introduction

Who am I?

Instructor, introduce thyself!

Name, rank, serial number... I mean email address, IRC handle, any other info you think is relevant.

Introduce FGS, what we do, pitch for donations?

Other (and therefore better) resources

References:

  1. World Wide Web Consortium(W3C)
  2. [http:whatwg.org Web Hypertext Application Group (WHATWG)]

Questions Answered:

StackExchange

Tutorials:

  1. CodeCademy
  2. 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.

Client side web programming

Things you will need

For the client side

  1. A computer with a web browser and a text editor (NOT a word processor.)
  2. That's really all.

Optional: Version control, access to the internet for looking up references.

Client-side references

http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/#toc

  1. DOM
  1. HTML
  1. CSS
  1. Javascript

Your first Web page

It can be as simple as this:

  1. Fire up your text editor of choice.
  2. Enter the text that follows this list.
  3. Save as [something].html - for example, "hello.html"
 <!DOCTYPE html>
 <html>
   <head />
   <body>
     <h1>Hello World!</h1>
   </body>
 </html>

Now open your Web browser and point it at your file. You can type its path into your address bar: 

file:///home/user/hello.html

Or you can drag-and-drop the file's icon from your file manager into the browser.

That's a pretty basic web page, and it doesn't do much. Actually, it doesn't do anything. Before making it do stuff, let's talk about structure.

DOM

Your HTML is a template for a Document Object. In programming (Object Oriented Programming) an *object* is an instance of a *class*- for example, a particular document is an instance of the general class of documents. This class is described by the Document Object Model.

When the browser loads your HTML file, it takes the information in it and builds a document object out of it. This object is a tree-like structure, like a file system. Instead of file names and file contents, the document object contains the tags and the text inside the tags- along with other things. Instead of 'files', these key-value sets are called 'nodes'.

So, the "Hello World" text in the example might have a DOM path something like: 

document.html.body.h1.InnerHTML

HTML

CSS

ECMAScript

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