Sesión 07 –

Dynamic Web Content

Clase: FUNDAMENTOS DE PROGRAMACIÓN WEB
(ADI302)
Objetivos
• En esta sesión, echaremos un vistazo breve a los diversos
componentes que hacen la web y el software que ayuda a que su uso
sea una experiencia rica y dinámica.
 HTTP and HTML
• HTTP is a communication standard governing the requests and responses that are
sent between the browser running on the end user’s computer and the web
server.
• The server’s job is to accept a request from the client and attempt to reply to it in
a meaningful way, usually by serving up a requested web page—that’s why the
term server is used.
• The natural counterpart to a server is a client, so that term is applied both to the
web browser and the computer on which it’s running.
• A web server can usually handle multiple simultaneous connections, and when
not communicating with a client, it spends its time listening for an incoming
connection.
The Request/Response Procedure
• At its most basic level, the
request/response process
consists of a web browser
asking the web server to
send it a web page and the
server sending back the
page.
The Request/Response Procedure
• For an average web page, this process also takes place once for each object
within the page: a graphic, an embedded video or Flash file, and even a CSS
template.
• In step 2, notice that the browser looks up the IP address of server.com.
• Every machine attached to the internet has an IP address—your computer
included—but we generally access web servers by name, such as google.com.
The Request/Response Procedure
• For dynamic web pages,
the procedure is a little
more involved, because it
may bring both PHP and
MySQL into the mix.
 The Request/Response Procedure
• Although it’s helpful to be aware of this process so that you know how the three
elements work together, in practice you don’t really need to concern yourself
with these details, because they all happen automatically.
The Benefits of PHP, MySQL, JavaScript,
CSS, and HTML5
• HP’s simplicity and built-in links to the MySQL database program had earned it
more than double the number of users.
• And JavaScript, which had become an essential part of the equation for
dynamically manipulating Cascading Style Sheets (CSS) and HTML, now took on
the even more muscular task of handling the client side of the asynchronous
communication (exchanging data between a client and server after a web page
has loaded).
• Using asynchronous communication, web pages perform data handling and send
requests to web servers in the background—without the web user being aware
that this is going on.
The Benefits of PHP, MySQL, JavaScript,
CSS, and HTML5
• No doubt the symbiotic nature of PHP and MySQL helped propel them both
forward, but what attracted developers to them in the first place? The simple
answer has to be the ease with which you can use them to quickly create
dynamic elements on websites.
• MySQL is a fast and powerful yet easy-to-use database system that offers just
about anything a website would need in order to find and serve up data to
browsers.
• When PHP allies with MySQL to store and retrieve this data, you have the
fundamental parts required for the development of social networking sites and
the beginnings of Web 2.0.
 Using PHP
• With PHP, it’s a simple matter to embed dynamic activity in web pages.
• When you give pages the .php extension, they have instant access to the scripting
language.
• From a developer’s point of view, all you have to do is write code such as the
following:
<?php
echo " Today is " . date("l") . ". ";
?>
Here's the latest news.
 Using PHP
• The opening <?php tells the web server to allow the PHP program to interpret all
the following code up to the ?> tag.
• Outside of this construct, everything is sent to the client as direct HTML.
• So, the text Here's the latest news. is simply output to the browser; within the
PHP tags, the built-in date function displays the current day of the week
according to the server’s system time.
• The final output of the two parts looks like this:
Today is Wednesday. Here's the latest news.
 Using PHP
• The point is that with PHP, web developers have a scripting language that,
although not as fast as compiling your code in C or a similar language, is
incredibly speedy and also integrates seamlessly with HTML markup.
• Using PHP, you have unlimited control over your web server. Whether you need
to modify HTML on the fly, process a credit card, add user details to a database,
or fetch information from a third-party website, you can do it all from within the
same PHP files in which the HTML itself resides.
 Using MySQL
• In the early days of the web, many sites used “flat” text files to store data such as
usernames and passwords.
• But this approach could cause problems if the file wasn’t correctly locked against
corruption from multiple simultaneous accesses.
• That’s where relational databases with structured querying become essential.
• And MySQL, being free to use and installed on vast numbers of internet web
servers, rises superbly to the occasion.
• It is a robust and exceptionally fast database management system that uses
English-like commands.
 Using MySQL
• The highest level of MySQL structure is a database, within which you can have
one or more tables that contain your data.
• For example, let’s suppose you are working on a table called users, within which
you have created columns for surname, firstname, and email, and you now wish
to add another user.
• One command that you might use to do this is as follows:
INSERT INTO users VALUES('Smith', 'John', '[email protected]');
 Using MySQL
• It’s equally easy to look up data. Let’s assume that you have an email address for
a user and need to look up that person’s name.
• To do this, you could issue a MySQL query such as the following:
SELECT surname,firstname
FROM users
WHERE email='[email protected]’;

• MySQL will then return Smith, John and any other pairs of names that may be
associated with that email address in the database.
 Using JavaScript
• The oldest of the three core technologies discussed, JavaScript, was created to
enable scripting access to all the elements of an HTML document.
• In other words, it provides a means for dynamic user interaction such as checking
email address validity in input forms and displaying prompts such as “Did you
really mean that?” (although it cannot be relied upon for security, which should
always be performed on the web server).
• Combined with CSS, JavaScript is the power behind dynamic web pages that
change in front of your eyes rather than when a new page is returned by the
server.
 Using JavaScript
• However, JavaScript can also be tricky to use, due to some major differences in
the ways different browser designers have chosen to implement it.
• This mainly came about when some manufacturers tried to put additional
functionality into their browsers at the expense of compatibility with their rivals.
 Using JavaScript
• For now, let’s take a look at how to use basic JavaScript, accepted by all browsers:
<script type="text/javascript">
document.write("Today is " + Date() );
</script>
• This code snippet tells the web browser to interpret everything within the <script>
tags as JavaScript, which the browser does by writing the text Today is to the
current document, along with the date, using the JavaScript function Date.
• The result Will look something like this:
Today is Sun Jan 01 2017 01:23:45
 Using CSS
• CSS is the crucial companion to HTML, ensuring that the HTML text and
embedded images are laid out consistently and in a manner appropriate for the
user’s screen.
• For example, not only can you style any HTML element to change its dimensions,
colors, borders, spacing, and so on, but now you can also add animated
transitions and transformations to your web pages, using only a few lines of CSS.
 Using CSS
• Using CSS can be as simple as inserting a few rules between <style> and </style>
tags in the head of a web page, like this:
<style>
p{
text-align:justify;
font-family:Helvetica;
}
</style>
• These rules change the default text alignment of the <p> tag so that paragraphs
contained in it are fully justified and use the Helvetica font.
Using HTML5
• As useful as all these additions to the web standards became, they were
not enough for ever more ambitious developers.
• For example, there was still no simple way to manipulate graphics in a web
browser without resorting to plug-ins such as Flash.
• And the same went for inserting audio and video into web pages.
• Plus, several annoying inconsistencies had crept into HTML during its
evolution.
The Apache Web Server
• In addition to PHP, MySQL, JavaScript, CSS, and HTML5, there’s a sixth hero
in the dynamic web: the web server.
• In the case of this class, that means the Apache web server.
• We’ve discussed a little of what a web server does during the HTTP server/
client exchange, but it does much more behind the scenes.
• For example, Apache doesn’t serve up just HTML files—it handles a wide
range of files, from images and Flash files to MP3 audio files, RSS (Really
Simple Syndication) feeds, and so on.
The Apache Web Server
• And these objects don’t have to be static files such as GIF images.
• They can all be generated by programs such as PHP scripts.
• PHP can even create images and other files for you, either on the fly or in
advance to serve up later.