Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Web Development ======
===== Lesson 1 - Overview =====

===== Objective =====
This lesson introduces the technologies required to create a fully functional web application or web site.

{{:en:web_development:overallphp.png?690|}}

===== 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 <html><main></html> section contains the navigation and the displayed image.

See the resulting page [[http://techschool.murraygunn.id.au/webdev/demo/overall.html|here]].

**overall.html**
<code><!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></code>
===== CSS =====
Cascading Style Sheets provide the design information including positioning and coloring of elements. Notice the new line in <html><head></html> 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 [[http://techschool.murraygunn.id.au/webdev/demo/overallcss.html|here]]

**overallcss.html**
<code><!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></code>

**style.css**
<code>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;
}</code>
===== Javascript =====
The page really begins to take off when we add Javascript, again by including a line in <html><head></html> 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 [[https://techschool.murraygunn.id.au/webdev/demo/overalljs.html|here]].

**overall.html**
<code><!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></code>

**overall.js**
<code>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
}</code>

===== 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 [[http://techschool.murraygunn.id.au/webdev/demo/overall.php|here]].

**overall.php**
<code><!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></code>

===== 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**
<code><?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></code>

[[en:web_development:text|Next Lesson: Text]]
Tech School

User Tools

Site Tools

Page Tools
