Table of Contents
Web Development
Lesson 1 - Overview
Objective
This lesson introduces the technologies required to create a fully functional web application or web site.
Introduction
The following technologies are commonly used to create web pages and applications. While an extremely basic page can be created solely using HTML, you'll usually want to use a combination of these for your sites.
| Tecnologia | Funcion |
|---|---|
| HTML (HyperText Markup Language) | Estructura y contenido de página |
| CSS (Cascading Style Sheet) | Diseño de página |
| Javascript | Hacer dinámica la página |
| Server Side Script - PHP, Java | Hacer consistencia entre paginas, Personalización |
| Database - MySQL, SQL | Guardar información |
Let's look at a simple page to get an idea of what each of these technologies provides by building a page that shows a photo, and allows the photo to be changed by clicking on links in a side panel.
HTML
This version uses only HTML. It is typically where we start building our page because it contains the content and provides the structure that will be used later. We typically put the elements in the order we see them on the page (top to bottom, left to right). In the <body> of the code we can see a <header> section and a <main> section. The <main> section contains the navigation and the displayed image.
See the resulting page here.
overall.html
<!DOCTYPE html>
<head>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
CSS
Cascading Style Sheets provide the design information including positioning and coloring of elements. Notice the new line in <head> of the html file that informs the client where to find the css file. Our example is beginning to look more like a web page. See the results here
overallcss.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li>Image 1</li>
<li>Image 2</li>
<li>Image 3</li>
<li>Image 4</li>
<li>Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
style.css
body
{
background-color: #334;
}
h1
{
text-align: center;
color: #eee;
font-size: 3em;
}
nav
{
top: 100px;
color: #ddd;
padding-right: 100px;
}
nav li
{
list-style: none;
font-family: sans-serif;
font-size: 1.5em;
}
main
{
display: flex;
justify-content: space-between;
}
img
{
max-width: 1000px;
padding: 10px 10px;
border: 2px #eee solid;
}
Javascript
The page really begins to take off when we add Javascript, again by including a line in <head> telling the client where to find the JS (Javascript) code. The code is activated by clicking the item in the sidebar, which includes details of the image to use. The code replaces the image and changes the colours of the sidebar items to show which image has been selected.
See the results here.
overall.html
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<li onclick="showImage(this, 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg')">Image 1</li>
<li onclick="showImage(this, 'https://www.applelanguages.com/en/img/top/sydney.jpg')">Image 2</li>
<li onclick="showImage(this, 'https://www.northshoremums.com.au/wp-content/uploads/elementor/thumbs/Trumpet-flowers-mr-ooz5cybjd1wb1rxa64q62sdfu2vr72qano0k7ul72e.jpg')">Image 3</li>
<li onclick="showImage(this, 'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg')">Image 4</li>
<li onclick="showImage(this, 'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg')">Image 5</li>
</ul>
</nav>
<img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg" />
</main>
</body>
overall.js
function showImage(element, photo)
{
// restore colour of all nav text
list = document.getElementsByTagName('li');
for(a of Object.keys(list))
{
item = list[a];
console.log(list[a]);
item.style.color="#ddd";
}
element.style.color='#0dd'; // change selected text to blue
document.getElementById('photo').src=photo; // update photo
}
PHP
PHP is code that runs on the server to produce the HTML sent to the client. It is very powerful, but in this example, we simply provide the same HTML we've already seen. For a large number of images, the PHP code is much more efficient. It can also cope with lists of different lengths more easily than pure HTML can.
See the results here.
overall.php
<!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1>Sydney</h1>
</header>
<main>
<nav>
<ul>
<?php
// prepare list of photos
$images = array('https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg/1920px-Sydney_Opera_House_and_Harbour_Bridge_Dusk_%282%29_2019-06-21.jpg',
'https://www.applelanguages.com/en/img/top/sydney.jpg',
'https://www.northshoremums.com.au/wp-content/uploads/elementor/thumbs/Trumpet-flowers-mr-ooz5cybjd1wb1rxa64q62sdfu2vr72qano0k7ul72e.jpg',
'https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a0095a95a132d27ed996859b9.jpg',
'https://upload.wikimedia.org/wikipedia/commons/e/e5/Bondi_Beach_Sydney_Australia_7.jpg');
// create HTML code for nav items
foreach($images as $k => $photo)
{
$i = $k+1; // display number is 1-5 instead of 0-4 used in $images
echo "<li onclick=\"showImage(this, '$photo')\">Image $i</li>"; // the HTML code
}
?>
</ul>
</nav>
<img id="photo" src="<?php echo $images[0]; ?>" />
</main>
</body>
MySQL
MySQL is a database that can be used to store any information you need in a set of tables. In this example, we store a list of photos in a single table. Then we connect to the database in the first part of the PHP code and get the list of photos in the later part.
See the results at http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=sydney and http://techschool.murraygunn.id.au/webdev/demo/overallsql.php?city=medellin.
MySQL
| ID | City | Photo | Link |
|---|---|---|---|
| 1 | Sydney | harbour | https://upload.wikimedia.org/wikipedia/commons/thu… |
| 2 | Sydney | city | https://www.applelanguages.com/en/img/top/sydney.j… |
| 3 | Sydney | Vivid | https://www.northshoremums.com.au/wp-content/uploa… |
| 4 | Sydney | Darling Harbour | https://i.pinimg.com/originals/ea/5c/0c/ea5c0c5a00… |
| 5 | Sydney | Bondi Beach | https://upload.wikimedia.org/wikipedia/commons/e/e… |
| 6 | Medellin | Mountains | https://thenomadvisor.com/wp-content/uploads/2019/… |
| 7 | Medellin | Nighttime | https://i0.wp.com/www.acimedellin.org/wp-content/u… |
| 8 | Medellin | Plaza Botero | https://elcomercio.pe/resizer/wIn8OAiq2Lp2zNAzUTN2… |
| 9 | Medellin | Botanical Gardens | https://inhabitat.com/files/orq-1-frontpage-b-537x… |
overall.php
<?php
// Set up database connection
define ('DBCONNECT', "/home/mag/pdo.php"); // database connection
define ('ROOT', "/var/www/html/"); // url
define ('DB', "webtut");
include_once DBCONNECT;
$db = DB;
$dsn = "mysql:host=$db_host;dbname=$db;charset=$db_char";
try
{ // connect
$pdo = new MyPDO($dsn, $db_user, $db_pass, $db_options);
} catch (\PDOException $e) {
throw new \PDOException ($e->getMessage(), (int)$e->getCode());
}
// get city from URL
$city = $_GET['city'];
?><!DOCTYPE html>
<head>
<link rel="stylesheet" media="screen" type="text/css" href="screen.css" />
<script type="text/javascript" src="overall.js"></script>
</head>
<body>
<header>
<h1><?php echo $city; ?></h1>
</header>
<main>
<nav>
<ul>
<?php
// get photos
$query = "SELECT * FROM photos WHERE city=?";
$args = array($city);
$rslt = $pdo->prepare($query);
$rslt->execute($args);
while ($row = $rslt->fetch())
{
$url = $row['url'];
echo "<li onclick=\"showImage(this, '{$row['url']}')\">{$row['name']}</li>";
}
?>
</ul>
</nav>
<img id="photo" src="<?php echo $url; ?>" />
</main>
</body>
