WebDev.wiki > Návody pro webmastery a vývojáře > Díl 1

Díl 1 - jQuery: Praktická webová aplikace

vydáno: 02.01.2017, seriál: jQuery: Praktická webová aplikace

V této sérii se pokusíme prakticky naprogramovat jednoduchou webovou aplikaci, ve které uplaníme znalosti z předcházející série použití jQuery.

Ukážeme si, jak vytvořit kompletně funkční více stránkovou webovou aplikaci, která bude umět mezi stránkami přepínat bez znovu načítání se ze serveru a bude při tom umět zobrazovat data pomocí techniky AJAX. Na straně serveru použijeme populární PHP a MySQL pro ukládání centrálních dat a pro přenos dat použijeme populární formát JSON.

Vytvoříme si jednoduchou aplikaci ve stylu Facebook / Twitter, kam uživatelé budou moci bez přihlášení posílat příspěvky. Na úvodní stránce se zobrazí seznam posledních přidaných příspěvků se zkrácenými texty a po kliknutí na tlačítko "Read it all" se zobrazí celý příspěvek. Součástí každého příspěvku bude text, datum přidání a jméno autora.

Startovní pozice

Abychom si usnadnili práci a aplikace byla vzhledově trochu na úrovni, využijeme knihovnu/framework Bootstrap. Pro účely této série článků nemusíte vědět, o co se jedná. Veškeré použití Bootstrapu si na místě vysvětlíme. A samozřejmě jQuery.

Vytvořme si nový soubor s názvem index.html a naplňíme ho následujícím základním HTML:

Ukázka:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>The Wall</title>
</head>
<body>

</body>
</html>

Použité tagy: <html>, <head>, <meta>, <title>, <body>

Přidání Bootstrap a jQuery

Stáhneme si Bootstrap a jQuery. Buď pomocí Bower:

bower install jquery bower install bootstrap#v4.0.0-alpha.5

Nebo pomocí NPM:

npm install jquery npm install bootstrap@4.0.0-alpha.5

Oba příkazy musí být spuštěny ve stejném adresáři, jako je náš soubor index.html. V době psaní tohoto článku je Bootstrap 4 ještě ve stádiu alpha. V době čtení tohoto článku Vám bude pravděpodobně stačit, když si stáhnete aktuální verzi Bootstrapu bez specifikování verze, například:

bower install bootstrap npm install bootstrap

Nebo si samozřejmě můžete Bootstrap a jQuery stáhnout.

V každém případě potřebujeme najít soubory jquery.min.js, bootstrap.min.css a bootstrap.min.js a přidat je do naší webové aplikace. S ohledem na způsob instalace zmíněných souborů a jejich relativních cest k našemu index.html přidáme do <head> CSS Bootstrapu, například:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

A těsně před </body> přidáme skripty, například:

<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

Zde je třeba dbát na pořadí - Bootstrap používá jQuery funkce a proto jQuery musí být načtená před Bootstrapem.

Přidání vlastního JavaScriptu a CSS

Vytvoříme si i vlastní skript, kam budeme psát logiku naší aplikace. Bude to soubor app.js v podadresáři js/ a hned si jej zaplníme startovním skriptem:

Ukázka:

Javascript

window.app = {

    init: function()
    {

    }
}

$(document).ready(app.init);

Výsledek:

Tento skript zařídí, aby se nám spustila funkce app.init() jakmile se celá aplikace poprvé načte do prohlížeče. Vlastně jej ještě musíme přidat do index.html, opět těsně před </body>:

<script type="text/javascript" src="js/app.js"></script>

Ještě budeme potřebovat soubor vlastních kaskádových stylů, můžeme si jej vytvořit ve stejném adresáři s názvem třeba screen.css a vložit ho těsně před </head> pomocí:

<link rel="stylesheet" href="screen.css">

A jsme připraveni začít tvořit. V příštím díle si naprogramujeme univerzálení přepínání stránek.

Rekapitulace

Na závěr rekapitulace našich souborů index.html a app.js:

Ukázka:

Javascript

window.app = {

    init: function()
    {

    }
}

$(document).ready(app.init);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>The Wall</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="screen.css">
</head>
<body>


    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

Použité tagy: <html>, <head>, <meta>, <title>, <link>, <body>, <script>

Seriál jQuery: Praktická webová aplikace

Přejít na následující kapitolu:Díl 2 - přepínání mezi stránkami >

Témata

Seriály

Díl 1 - jQuery: Praktická webová aplikace

Startovní pozice

Přidání Bootstrap a jQuery

Přidání vlastního JavaScriptu a CSS

Rekapitulace

Seriál jQuery: Praktická webová aplikace

Seznam všech článků seriálu: