Web Apps - The Least You Need To Know

From TNG Wiki
Jump to: navigation, search

TNG is a Web Application

Basically, that means that

  • TNG runs on a Web server rather than on your home computer,
  • Its data is out on the Web rather than on your home computer,
  • You - and the other people who look at your genealogy data - just need a good Web browser to run it (on a Windows PC, a Macintosh PC, a tablet, a smart phone, etc.).

It also means that

  • You need to be able to perform some administrative tasks on a Web server (or at least a Web site) in order to install and run TNG,
  • You need to be able to administer the TNG application - enable features, create user accounts, assign user rights, update data, etc., and
  • You need to be sensitive to the privacy of data about living (and/or recently living) people, since your data can potentially be viewed by many people out on the Web.

Like all good business-y things, web stuff has its own vocabulary, often involving initials like HTML and CSS. All that special jargon is intended to make it easy for programmers to interact with the computer, and not ON PURPOSE to make normal folks feel excluded, but that's often the way it works out. Usually it makes us feel stupid because we can't understand such "simple" stuff. Well, I daresay there's a lot of stuff in YOUR life that you know really well that the average programmer doesn't understand at all, and if he tried, he'd feel pretty stupid. So, stop feeling stupid, because you're not, and let's learn the least we need to know to get this TNG stuff making sense in our minds.

You sit at your desk and ask a TNG web site to show you all that it knows about John Smith, born 1776. The web server calls a TNG program that looks up a bunch of stuff in the TNG database, combines and formats it in a special way, and sends that info back to your computer, which displays it all pretty on your big monitor, as shown here:

Lets walk through what it takes.

  1. Your web browser sends the web address you requested to to the server. It uses HTTP.
  2. The server finds the file you requested, and notices that it's a "PHP" program. So the web server sends it to the PHP application, which thinks in the PHP language.
  3. When PHP needs to request some data from the TNG database, it uses a language called SQL.
  4. The PHP application repackages that data and creates a customized HTML document for you. That's PHP writing HTML!
  5. The server sends that HTML document to you. That's HTTP again.
  6. Your web browser now reads the HTML document and starts laying out the web page. That's HTML.
  7. Your web browser extracts formatting information from the HTML document. That's CSS
  8. There may be some programming code in or tied to the HTML document that needs to be executed within your web browser. That's JavaScript.

That's a lot of different languages! The whole thing designed so that each language is used for a specific kind of task, and so that each piece has to do as little talking as possible in order to get the message across, because in web-world, talking = data bits being transferred = time and money. And the good news is that YOU don't need to learn all those languages. Some of them, maybe, but certainly not at first.

Let's step through all of this, really simply, starting from what you see at your desktop.

Your Web Browser

Whether you use Firefox, Chrome, Internet Explorer, or Opera (or many others), or whether you're on a Windows PC, a Macintosh, an Ipad, an Android Tablet, a Windows Smart Phone (and so on...), your web browser is your connection to the Web. It

  1. Uses HTTP to communicate with web servers,
  2. Knows how to turn HTML documents into Web Pages,
  3. Uses CSS styles to format the information in HTML documents, and
  4. Uses JavaScript to manipulate the HTML and CSS code and the data within the document (e.g. make a subform appear; validate form fields, etc.)

If you're going to administer a web application like TNG, you don't have to know HTTP, HTML, CSS, and JavaScript, (at least not at first) but it sure helps a lot for you to know their roles:

  1. HTTP controls communication between the web browser and the web server.
  2. HTML describes the content in a document - its sections, paragraphs, headings, links, tables, table cells, forms, form fields, etc.
  3. CSS styles describe how to display that content - fonts, colors, spacing, borders, etc.
  4. JavaScript manipulates the content, the HTML, and the styles to make the web page's structure or appearance change, or to change the content within the page.

Web Pages

First, let's deal quickly with stuff you get from the web that isn't a "Web Page". For example, a web address that you enter into your web browser (or that results from a link that you click on) can retrieve a PDF document, or a Word document, or just an image. Those things come from "the Web", and web browsers deal with them (usually by handing them off to another program) but they aren't "Web Pages".

What makes something a "Web Page" is that it is based on an HTML document. I say "based on" because, for example, the images in a web page are not actually part of the HTML document. The HTML document just points to them, and your web browser then has to retrieve them separately. Some other parts of the web page, such as CSS and JavaScript (which are covered later) can also be in separate files that have to be retrieved separately. So the Web Page that you see in your web browser is not just one thing; it's the result of several objects coming together, with an HTML document in the center.

The key point here is that an "HTML Document" is not the same thing as a "Web Page". When you use your web browser to request something from a web server, you don't always know what that thing will be. But if the web servers sends your browser an HTML document, then your browser will build a web page from the information in the HTML document.

HTML

HTML (HyperText Markup Language) is a "markup" language, not a "programming" language. As a document markup language, it essentially describes the information in an HTML document. That is, its commands don't say "do this to that"; they simply describe what is in the document. (You may ask "But what about all of that formatting!?!? Good question - that from the "CSS", which we'll talk about soon.)

HTML Tags

HTML consists of commands (called "tags") - all in readable text - that

  • Describe the document itself (what version of HTML, what's its title, etc.),
  • Describe the text in the document (essentially, "here's the top heading"; "here's a level 3 heading", "here's a paragraph", "here's a quotation", "here's a table", and "here's the first cell in the table", etc.),
  • Point to (and describe) images, sound files, videos, etc.,
  • Point to CSS and JavaScript files, or
  • Enclose embedded CSS and JavaScript.

All tags are enclosed by a less-than sign and a greater-than sign, e.g. <html>, <head>, <title>. Most tags are used in pairs - a start tag (e.g. <p> to start a paragraph), and a corresponding end tag that starts with </ (e.g. </p> to close the paragraph). A tag pair like that, along with everything between the tags, is known as an "element".

HTML is very hierarchical. That is, within one element, you are likely to have other elements, like this:

<body>
  <div id="pageheading">
     <h1>Student comments on the first few days of Web Development training</h1>
  </div>
  <div id="content">
     <h2>Bob's Barker says:</h2>
     <p>Man, I'm going <em>Crazy</em> with all of these languages!</p>
  <div>
</body>

Note that several of the elements in this example simply describe the structure of the document, and other describe the text. (And it's kind of weird that the main heading is longer than the paragraph in this example. But it happens that way sometimes.)

Here's a brief summary of the HTML tags in this example:

  • <body> defines the information to be displayed (as opposed to the <head> element, which contains tags that describe the document.
  • <dic> simply defines an organization are of the page; in this case, the two <div> element identify the page heading, and the primary content.
  • &lth;1> &amp <h2> specify the most significant heading, and a second-level heading.
  • <p> defines a paragraph, and
  • <em> defines text that should be emphasized.

Styles

It is important to realize that nothing in HTML example above says how the information should be displayed. The HTML does not specify

  • Anything about text color,
  • How big headings should be, and whether they should be centered or not,
  • How much spacing goes between paragraphs,
  • Whether the first line of a paragraph should be indented, or
  • What emphasized text should look like.

All of those things are specified by "styles", which are defined by CSS, not HTML.

In truth, each web browser has default styles that they use when the HTML document doesn't contain styles for a particular situation, and those default styles could be different among different browsers. Fortunately, for the most part, web browsers have settled on common styles for most elements (like double-spacing between paragraphs, without indentation) but, particularly when you consider smart phone browsers versus PC browsers, there are differences.

Viewing a Page's HTML

In all PC Web browsers, you can issue a "View Source" command and see the HTML document that was sent to you. (Browsers are hiding their menus these days, so it's becoming hard to find that command, but hitting control-u should display the HTML source in most browsers.) Depending on the page, and the way it was generated, the HTML may be fairly readable, or it may look like gibberish. But you'll probably readily see some HTML tags at the top of the document, such as an <html> tag, a <head> tag, and a <title> tag.

Do I need to know HTML?

You don't absolutely have to know HTML to administer a TNG site, especially at first, but it sure comes in handy. Most particularly, you may want to

  1. Learn the most basic HTML commands, which you can then use within TNG templates and forms to write and format information on your home page, for example, or to write notes about people and places.
  2. Read a book or web tutorial, or take an HTML or web design class so that you can at least understand enough HTML and CSS to figure out why things look the way they do, and possibly to tweak that appearance.

There are LOTS of HTML learning resources on the Web, but many are out of date. The one I've used the most, which definitely stays up-to-date, is

Other resources include

  • Little Web Hut - Includes videos
  • HTML Dog - This site covers HTML and CSS quite well, particularly what matters in TNG. It seems to have been written during early stages of HTML5's roll-out, so it says some things about HTML5 that aren't quite accurate.

HTML Dog's Beginner Guide is a terrific starting point.

HTTP

HTTP (HyperText Transfer Protocol) is a "protocol"; a special kind of language that defines the instructions for moving information from one place to another. HTTP is how web browsers and web servers communicate (well, except when they are using its more secure sibling, HTTPS), and it really can't do much other than

  1. Transmit a request for a document
  2. Transmit the data in a web form
  3. Transmit documents (HTML documents, PDF's, images, etc.)

HTTP doesn't know anything about the contents of documents; it just knows the document's name, and, usually, what type of document it is. But it doesn't do anything with that document type other than tell the web browser or web server what it's supposed to be.

The "http://" at the beginning of web addresses tells your web browser to use HTTP to communicate with the server specified in the web address. Most of the time, of course, when you type a web address into your web browser, you don't actually need to type "http://", because, well, when the browser want to talk to a web server, it uses HTTP unless it's told otherwise.

The only two other protocols relevant to us are:

  • HTTPS, the "secure" sibling to HTTP. HTTPS encrypts messages and documents before sending them, and decrypts them at the other end, so that someone spying on the communication line can't read them.
  • FTP (File Transfer Protocol) which is fairly similar to HTTP, but which
    • Talks to an FTP server, not a Web server.
    • Just transfers a file as a file, and saves it as a file on the other end; it doesn't interpret it or try to build a Web Page or anything like that.
    • Can transfer whole folders and subfolders of files.
Most PC web browsers can use FTP, but aren't really very good at it. So most of the time we use dedicated FTP software when we want to transfer files from our PC's to a server.

You can read about FTP and its use in managing TNG web sites in the FTP Wiki article.

Do I need to know HTTP?

Absolutely not. I've been writing web applications for 20 years, and, for the most part, I wouldn't know an HTTP command if I tripped over it in the street. I just know what it's for, why and when it needs to be specified in a web address, and that web browsers and web servers depend on it to communicate.

The Web Server

It useful to know two meanings of the term "Web Server". On PCs' (and other end-user computers), we have different terms for the hardware and the software we're using. But out on the server, we use the same term for both. That is:

  1. The software that your web browser talks to is a "Web Server".
  2. The computer that your PC or tablet (etc) is communicating with is also a "Web Server".

Like your PC, your Web Server computer can potentially do other things. It probably has FTP server software. It might store and send email. It might control part of the electrical supply grid. Who knows? The term "Web Server" really describes one role that a computer may have. But still, most of the web servers (computers) we use to host web sites are pretty dedicated to serving up web pages.

On the software side, Web Server (software), like a web browser, is focused on handling web documents. It doesn't display them; it often doesn't even look at them, but it knows where to find them - and/or to find the pieces and parts to put HTML documents together.

PHP

PHP is

  1. A programming language, specifically designed to create HTML documents "on the fly" (see more about that below), and
  2. The program that interprets PHP programs and builds HTML documents. It must run on a web server (computer), and works closely with the web server (software).

Just in case you're familiar with JavaScript, Java, C, or C#, I'll note that PHP code looks a lot like their code. The differences lie in PHP's built-in functions, how it defines and uses variables, and in its focus on output to an HTML document.

I'll digress into some more jargon for a moment; but don't worry if this paragraph doesn't makes sense to you...
PHP is an interpreted and procedural language. It can define classes and objects, but doesn't take those concepts very far, and, in particular, TNG doesn't make much use of object techniques. There. Back to English (mostly).

PHP files are basically HTML files that the PHP interpreter reads, looking for PHP code to execute. You can take any HTML document, rename the file with a PHP extension, and you actually have a PHP program that produces a copy of that HTML document as its output! To add PHP code, you must bracket the PHP code with <?php and ?>. So a PHP program might look something like this:

... the HTML code that starts the page ...
<title>
<?php
   ### PHP code to open the database and read John Doe's basic data, and
  ### store his name in the PHP variable $personname ...
  ### (Note that all PHP variables start with $)
  echo $personname;
?>
</title>
... more html...
<?php
   ... More PHP code to read and display John Doe's data...
?>

... the HTML for the page footer and to end the web page...

Note that the PHP echo command in the first block of PHP code sends "John Doe" to the HTML document, so that the document contains

... the HTML code that starts the page ...
<title>
John Doe
</title>
... etc. ...

Do I need to know PHP?

You may not ever need to know PHP in order to use TNG successfully. Many TNG site administrators do not know PHP. You can install TNG "mods" that customize your TNG site without knowing PHP, but to customize it yourself, you would need know PHP. You can learn some PHP basics at PHP - The Least You Need to Know, but, for the time being, you just need to know that

  • It's the language that TNG is written in,
  • It runs on web servers (not on PC's, unless you are actually running web server software on your PC), and
  • It produces HTML documents

SQL

SQL ("Structured Query Language") is the special language that the server uses to talk to your database. It's Skippy the dog talking to Toonces the cat. But cats are finicky and so are databases. You have to have specified which database, given it a password, and asked for a connection first before it will even listen to you.

SQL is not a specific PHP thing; it's a database thing. If you're writing in Visual Basic, Java, C#, most other languages, and you need to communicate with databases managed by database systems such as MySQL, DB2, Oracle, and so on, you use SQL.

SQL identifies itself as a "Query Language", and its most common role is to query the database for information. But it also knows how to insert, update, and delete information in the database, and, for that matter, to define the database in the first place.

To get into some more non-critical jargon very briefly, I'll note that SQL communicates with so-called "Relational Databases", which are organized into tables, which have rows (i.e. records), and columns (i.e. fields). TNG uses 20 or so tables; for People, for Families, for Places, Media Object, Notes, Sources, Repositories, etc., etc.

Do I need to know SQL?

Again, you may never need to know SQL. You may never even see any of the SQL code that TNG's PHP programs use. For arbitrary queries, TNG's handy Reporting tool lets you use a web form to select database fields, and figures out the SQL code needed to retrieve and display that data. But many TNG administrators have learned at least some SQL and can use it both to retrieve data in ways that TNG's Reporting tool cannot, and to perform some mass updates.

When you've used TNG for a while, and find that you need information from your database that TNG just can deliver, then it's time to go online and learn SQL. For further reading see

  • W3 Schools
  • TutorialsPoint MySQL Tutoral seems like a pretty good resource, though it gets pretty technical pretty quickly. One advantage is that it focuses on MySQL and uses PHP for its examples.

CSS

This is the pretty in your web pages. This is where your web browser is told to make something bold or blue, or invisible until you hover over it, and so on. The CSS style rules for an HTML document can be found in three different places.

  1. Inside HTML tags, e.g. Make this paragraph right justified; make this text blue,
  2. In "style sheets"; e.g. in a <style> element; i.e. between <style>, and </style< tags, and
  3. Style Sheets in external files, with the filename extension .css.

Style sheets contain style rules that say which tags they apply to, and what formatting properties to set.

CSS stands for "Cascading Style Sheets". "Cascading" just means that the application of style rules flows downhill through the hierarchical structure of a web page.

Here is a simply stylesheet with two style rules.

<style>
p {color: black;}
p.sidebar {color:grey;}
</style>

The first rule says that all <p> elements are to be black (unless other specifications take ovf class="sidebar" will be grey. The second rule will be applied only to paragraphs that explicitly declare that they belong to the "sidebar" class through the HTML code <p class="sidebar">.

To see how amazing CSS can get, check out CSS Zen Garden. It demonstrates how the exact HTML file can produce web pages that are SO amazingly different by changing only the CSS.

Do I need to know CSS?

Well, again, you really can administer a TNG site without knowing CSS, just like you don't have to know HTML - especially at first. But it sure is handy. CSS and HTML training usually come together, since they work so closely together. So visit the resources listed under HTML for CSS training.

JavaScript

JavaScript, like PHP, and unlike CSS and HTML, is a programming language. It doesn't describe things; it provides specific step-by-step instruction on how things should be manipulated and displayed. It's actually very similar to PHP (and Java, and C) in its structure and syntax and its most basic operators, but it has different commands, built-in functions, and operators. And most significantly:

  • JavaScript is specifically designed to be run inside a web browser and to manipulate web pages. It is constrained to the web browser; it cannot read and write files on your PC. (Well, with one special exception, which is that it can read and write "cookies", which your web browser stores as files that are pretty well hidden from you and from other applications.
  • The real key to JavaScript's power inside web pages is that the entire HTML document and all CSS styles are automatically organized into a big data object that JavaScript can read and manipulate.

Do I need to know JavaScript?

Not really. It's a very important part of how TNG works, but not as fundamental as HTML and CSS. And, when you really feel you need to know it, the first place I'd look for online JavaScript training is W3 Schools.