Licence (žádná), historie SQL příkazů, drobnosti v CSS.
authorFrantišek Kučera <franta-hg@frantovo.cz>
Sun May 24 00:24:48 2009 +0200 (2009-05-24)
changeset 571c6de7f0a38
parent 4 49903d1fe188
child 6 817ec319b143
Licence (žádná), historie SQL příkazů, drobnosti v CSS.
html/ahoj.html
html/grafika/historie.png
html/grafika/tabulka-zahlavi.png
html/historie.html
html/hlavni.js
html/index.html
html/licence.txt
html/styl.css
html/vysledek.html
     1.1 --- a/html/ahoj.html	Sat May 23 21:33:25 2009 +0200
     1.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.3 @@ -1,88 +0,0 @@
     1.4 -<table>
     1.5 -    <thead>
     1.6 -        <tr>
     1.7 -            <td>Sloupeček 1</td>
     1.8 -            <td>Sloupeček 2</td>
     1.9 -            <td>Sloupeček 3</td>
    1.10 -            <td>Sloupeček 4</td>
    1.11 -        </tr>
    1.12 -    </thead>
    1.13 -    <tbody>
    1.14 -        <tr>
    1.15 -            <td>Hodnota 1</td>
    1.16 -            <td>Hodnota 2</td>
    1.17 -            <td>Hodnota 3</td>
    1.18 -            <td class="cislo">1234,56</td>
    1.19 -        </tr>
    1.20 -        <tr>
    1.21 -            <td>Hodnota 1</td>
    1.22 -            <td>Hodnota 2</td>
    1.23 -            <td>Hodnota 3</td>
    1.24 -            <td class="cislo">1234,56</td>
    1.25 -        </tr>
    1.26 -        <tr>
    1.27 -            <td>Hodnota 1</td>
    1.28 -            <td>Hodnota 2</td>
    1.29 -            <td>Hodnota 3</td>
    1.30 -            <td class="cislo">1234,56</td>
    1.31 -        </tr>
    1.32 -        <tr>
    1.33 -            <td>Hodnota 1</td>
    1.34 -            <td>Hodnota 2</td>
    1.35 -            <td>Hodnota 3</td>
    1.36 -            <td class="cislo">1234,56</td>
    1.37 -        </tr>
    1.38 -        <tr>
    1.39 -            <td>Hodnota 1</td>
    1.40 -            <td>Hodnota 2</td>
    1.41 -            <td>Hodnota 3</td>
    1.42 -            <td class="cislo">1234,56</td>
    1.43 -        </tr>
    1.44 -        <tr>
    1.45 -            <td>Hodnota 1</td>
    1.46 -            <td>Hodnota 2</td>
    1.47 -            <td>Hodnota 3</td>
    1.48 -            <td class="cislo">1234,56</td>
    1.49 -        </tr>
    1.50 -        <tr>
    1.51 -            <td>Hodnota 1</td>
    1.52 -            <td>Hodnota 2</td>
    1.53 -            <td>Hodnota 3</td>
    1.54 -            <td class="cislo">1234,56</td>
    1.55 -        </tr>
    1.56 -        <tr>
    1.57 -            <td>Hodnota 1</td>
    1.58 -            <td>Hodnota 2</td>
    1.59 -            <td>Hodnota 3</td>
    1.60 -            <td class="cislo">1234,56</td>
    1.61 -        </tr>
    1.62 -        <tr>
    1.63 -            <td>Hodnota 1</td>
    1.64 -            <td>Hodnota 2</td>
    1.65 -            <td>Hodnota 3</td>
    1.66 -            <td class="cislo">1234,56</td>
    1.67 -        </tr>
    1.68 -        <tr>
    1.69 -            <td>Hodnota 1</td>
    1.70 -            <td>Hodnota 2</td>
    1.71 -            <td>Hodnota 3</td>
    1.72 -            <td class="cislo">1234,56</td>
    1.73 -        </tr>
    1.74 -        <tr>
    1.75 -            <td>Hodnota 1</td>
    1.76 -            <td>Hodnota 2</td>
    1.77 -            <td>Hodnota 3</td>
    1.78 -            <td class="cislo">1234,56</td>
    1.79 -        </tr>
    1.80 -        <tr>
    1.81 -            <td>Hodnota 1</td>
    1.82 -            <td>Hodnota 2</td>
    1.83 -            <td>Hodnota 3</td>
    1.84 -            <td class="cislo">1234,56</td>
    1.85 -        </tr>
    1.86 -    </tbody>
    1.87 -</table>
    1.88 -<p class="vysledekOK">Ahoj. Právě jsi zmáčknul tlačítko :-)</p>
    1.89 -<p class="vysledekVarovani">Tohle se zobrazí při varování.</p>
    1.90 -<p class="vysledekChyba">A tohle, když se něco nepovede.</p>
    1.91 -<p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p>
     2.1 Binary file html/grafika/historie.png has changed
     3.1 Binary file html/grafika/tabulka-zahlavi.png has changed
     4.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     4.2 +++ b/html/historie.html	Sun May 24 00:24:48 2009 +0200
     4.3 @@ -0,0 +1,26 @@
     4.4 +<div>
     4.5 +    <table>
     4.6 +        <thead title="Chceš setřídit výsledek podle nějakého sloupce? Co takhle ORDER BY sloupec.">
     4.7 +            <tr>
     4.8 +                <td>Kdy</td>
     4.9 +                <td>SQL příkaz</td>
    4.10 +            </tr>
    4.11 +        </thead>
    4.12 +        <tbody>
    4.13 +            <tr>
    4.14 +                <td>2008-05-24 16:00:08</td>
    4.15 +                <td>SELECT * FROM tabulka WHERE id = 123;</td>
    4.16 +            </tr>
    4.17 +            <tr>
    4.18 +                <td>2008-05-24 15:55:10</td>
    4.19 +                <td>SELECT * FROM tabulka WHERE id = 123 ORDER BY datum DESC;</td>
    4.20 +            </tr>
    4.21 +            <tr>
    4.22 +                <td>2008-05-24 15:51:28</td>
    4.23 +                <td>SELECT * <br/>FROM tabulka <br/>JOIN druha_tabulka USING (email) <br/>WHERE id = 8;</td>
    4.24 +            </tr>
    4.25 +        </tbody>
    4.26 +    </table>
    4.27 +    <p class="vysledekOK">Toto je historie provedených SQL příkazů.</p>
    4.28 +    <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p>
    4.29 +</div>
    4.30 \ No newline at end of file
     5.1 --- a/html/hlavni.js	Sat May 23 21:33:25 2009 +0200
     5.2 +++ b/html/hlavni.js	Sun May 24 00:24:48 2009 +0200
     5.3 @@ -48,6 +48,15 @@
     5.4  }
     5.5  
     5.6  /**
     5.7 + * Zobrazí text ve vstupním poli.
     5.8 + * Požijeme pro načtení SQL příkazu z historie.
     5.9 + * @param text text k zobrazení
    5.10 + **/
    5.11 +function zobrazVstup(text) {
    5.12 +    zobraz(text, vstupniPole);
    5.13 +}
    5.14 +
    5.15 +/**
    5.16   * Zobrazí text ve poli pro nápovědu.
    5.17   * @param text text k zobrazení
    5.18   **/
    5.19 @@ -56,10 +65,10 @@
    5.20  }
    5.21  
    5.22  /** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
    5.23 -function demo() {
    5.24 +function ajaxVykonatSQL() {
    5.25      if (ajax.readyState == 4 || ajax.readyState == 0) {
    5.26          ajax.open("GET", 'ahoj.html', true);
    5.27 -        ajax.onreadystatechange = demoVypis;
    5.28 +        ajax.onreadystatechange = vykonatSQLVypis;
    5.29          ajax.send(null);
    5.30      }
    5.31      //zobrazNapovedu('Nějaká nápověda k danému příkazu.');
    5.32 @@ -67,8 +76,25 @@
    5.33  }
    5.34  
    5.35  /** Pomocná funkce – postará se o vypsání v pravou chvíli. */
    5.36 -function demoVypis() {
    5.37 +function vykonatSQLVypis() {
    5.38      if (ajax.readyState == 4) {
    5.39          zobrazVystup(ajax.responseText);
    5.40      }
    5.41  }
    5.42 +
    5.43 +
    5.44 +/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
    5.45 +function ajaxZobrazitHistorii() {
    5.46 +    if (ajax.readyState == 4 || ajax.readyState == 0) {
    5.47 +        ajax.open("GET", 'historie.html', true);
    5.48 +        ajax.onreadystatechange = zobrazitHistoriiVypis;
    5.49 +        ajax.send(null);
    5.50 +    }
    5.51 +}
    5.52 +
    5.53 +/** Pomocná funkce – postará se o vypsání v pravou chvíli. */
    5.54 +function zobrazitHistoriiVypis() {
    5.55 +    if (ajax.readyState == 4) {
    5.56 +        zobrazVystup(ajax.responseText);
    5.57 +    }
    5.58 +}
     6.1 --- a/html/index.html	Sat May 23 21:33:25 2009 +0200
     6.2 +++ b/html/index.html	Sun May 24 00:24:48 2009 +0200
     6.3 @@ -6,10 +6,10 @@
     6.4          <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     6.5          <link href="styl.css" type="text/css" rel="StyleSheet"/>
     6.6          <script type="text/javaScript" src="hlavni.js"></script>
     6.7 -        <title>SQL: pojďte si hrát!</title>
     6.8 +        <title>SQL: tenhle jazyk tě bude bavit!</title>
     6.9      </head>
    6.10      <body>
    6.11 -        <div id="zahlavi"><h1>SQL: pojďte si hrát!</h1></div>
    6.12 +        <div id="zahlavi"><h1>SQL: tenhle jazyk tě bude bavit!</h1></div>
    6.13  
    6.14          <div id="bloky">
    6.15              <div class ="blok" id="napoveda">
    6.16 @@ -27,7 +27,16 @@
    6.17                      <div class="vnitrekBloku">
    6.18                          <form>
    6.19                              <textarea id="vstupniPole">SELECT * FROM tabulka;</textarea>
    6.20 -                            <button type="button" onclick="javascript:demo();">&nbsp;</button>
    6.21 +                            <button class="zobrazitHistorii"
    6.22 +                                    name="zobrazitHistorii"
    6.23 +                                    title="Vypíše historii SQL příkazů."
    6.24 +                                    type="button"
    6.25 +                                    onclick="javascript:ajaxZobrazitHistorii();">&nbsp;</button>
    6.26 +                            <button class="vykonatSQL"
    6.27 +                                    name="vykonatSQL"
    6.28 +                                    title="Vykoná zadaný SQL příkaz."
    6.29 +                                    type="button"
    6.30 +                                    onclick="javascript:ajaxVykonatSQL();">&nbsp;</button>
    6.31                          </form>
    6.32                      </div>
    6.33                  </div>
    6.34 @@ -79,5 +88,3 @@
    6.35  
    6.36      </body>
    6.37  </html>
    6.38 -
    6.39 -
     7.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     7.2 +++ b/html/licence.txt	Sun May 24 00:24:48 2009 +0200
     7.3 @@ -0,0 +1,5 @@
     7.4 +Tento HTML návrh aplikace „SQL Výuka“ není šířen pod žádnou zvláštní licencí.
     7.5 +Nejste tedy oprávněni ho volně použít.
     7.6 +Až výsledná aplikace bude svobodný software s jasně určenou licencí.
     7.7 +
     7.8 +František Kučera
     8.1 --- a/html/styl.css	Sat May 23 21:33:25 2009 +0200
     8.2 +++ b/html/styl.css	Sun May 24 00:24:48 2009 +0200
     8.3 @@ -12,6 +12,7 @@
     8.4  /** Bezpatkové písmo */
     8.5  body {
     8.6      font-family: sans-serif;
     8.7 +    font-size: 12px;
     8.8  }
     8.9  
    8.10  /** Prostor pro logo a název programu */
    8.11 @@ -56,14 +57,25 @@
    8.12  }
    8.13  
    8.14  #vstup button {
    8.15 -    width: 146px;
    8.16      height: 20px;
    8.17      border: none;
    8.18 -    background-image: url('grafika/tlacitko-sql.png');
    8.19      margin-right: 0px;
    8.20      margin-top: 5px;
    8.21      padding: 0px;
    8.22      cursor: pointer;
    8.23 +    background-repeat: no-repeat;
    8.24 +}
    8.25 +
    8.26 +#vstup button.zobrazitHistorii {
    8.27 +    background-image: url('grafika/historie.png');
    8.28 +    background-color: transparent;
    8.29 +    background-position: center;
    8.30 +    width: 20px;
    8.31 +}
    8.32 +
    8.33 +#vstup button.vykonatSQL {
    8.34 +    background-image: url('grafika/tlacitko-sql.png');
    8.35 +    width: 146px;
    8.36  }
    8.37  
    8.38  #vystup .vnitrekBloku {
    8.39 @@ -119,6 +131,8 @@
    8.40  table {
    8.41      border: 1px solid green;
    8.42      border-collapse:collapse;
    8.43 +    background-color: white;
    8.44 +    margin: 3px;
    8.45  }
    8.46  
    8.47  td {
    8.48 @@ -126,6 +140,7 @@
    8.49      padding: 4px;
    8.50      padding-left: 8px;
    8.51      padding-right: 8px;
    8.52 +    vertical-align: top;
    8.53  }
    8.54  
    8.55  td.cislo {
    8.56 @@ -133,8 +148,11 @@
    8.57  }
    8.58  
    8.59  thead {
    8.60 -    background: silver;
    8.61 +    background: gray;
    8.62      font-weight:bold;
    8.63 +    background-image: url('grafika/tabulka-zahlavi.png');
    8.64 +    background-repeat: repeat-x;
    8.65 +    height: 28px;
    8.66  }
    8.67  
    8.68  thead td a {
    8.69 @@ -142,6 +160,10 @@
    8.70      text-decoration: none;
    8.71  }
    8.72  
    8.73 +thead td {
    8.74 +    vertical-align: middle;
    8.75 +}
    8.76 +
    8.77  /** Ikonky pro zprávu k výsledku */
    8.78  #vystupniPole p {
    8.79      background-repeat: no-repeat;
     9.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     9.2 +++ b/html/vysledek.html	Sun May 24 00:24:48 2009 +0200
     9.3 @@ -0,0 +1,90 @@
     9.4 +<div>
     9.5 +    <table>
     9.6 +        <thead title="Chceš setřídit výsledek podle nějakého sloupce? Co takhle ORDER BY sloupec.">
     9.7 +            <tr>
     9.8 +                <td>Sloupeček 1</td>
     9.9 +                <td>Sloupeček 2</td>
    9.10 +                <td>Sloupeček 3</td>
    9.11 +                <td>Sloupeček 4</td>
    9.12 +            </tr>
    9.13 +        </thead>
    9.14 +        <tbody>
    9.15 +            <tr>
    9.16 +                <td>Hodnota 1</td>
    9.17 +                <td>Hodnota 2</td>
    9.18 +                <td>Hodnota 3</td>
    9.19 +                <td class="cislo">1234,56</td>
    9.20 +            </tr>
    9.21 +            <tr>
    9.22 +                <td>Hodnota 1</td>
    9.23 +                <td>Hodnota 2</td>
    9.24 +                <td>Hodnota 3</td>
    9.25 +                <td class="cislo">1234,56</td>
    9.26 +            </tr>
    9.27 +            <tr>
    9.28 +                <td>Hodnota 1</td>
    9.29 +                <td>Hodnota 2</td>
    9.30 +                <td>Hodnota 3</td>
    9.31 +                <td class="cislo">1234,56</td>
    9.32 +            </tr>
    9.33 +            <tr>
    9.34 +                <td>Hodnota 1</td>
    9.35 +                <td>Hodnota 2</td>
    9.36 +                <td>Hodnota 3</td>
    9.37 +                <td class="cislo">1234,56</td>
    9.38 +            </tr>
    9.39 +            <tr>
    9.40 +                <td>Hodnota 1</td>
    9.41 +                <td>Hodnota 2</td>
    9.42 +                <td>Hodnota 3</td>
    9.43 +                <td class="cislo">1234,56</td>
    9.44 +            </tr>
    9.45 +            <tr>
    9.46 +                <td>Hodnota 1</td>
    9.47 +                <td>Hodnota 2</td>
    9.48 +                <td>Hodnota 3</td>
    9.49 +                <td class="cislo">1234,56</td>
    9.50 +            </tr>
    9.51 +            <tr>
    9.52 +                <td>Hodnota 1</td>
    9.53 +                <td>Hodnota 2</td>
    9.54 +                <td>Hodnota 3</td>
    9.55 +                <td class="cislo">1234,56</td>
    9.56 +            </tr>
    9.57 +            <tr>
    9.58 +                <td>Hodnota 1</td>
    9.59 +                <td>Hodnota 2</td>
    9.60 +                <td>Hodnota 3</td>
    9.61 +                <td class="cislo">1234,56</td>
    9.62 +            </tr>
    9.63 +            <tr>
    9.64 +                <td>Hodnota 1</td>
    9.65 +                <td>Hodnota 2</td>
    9.66 +                <td>Hodnota 3</td>
    9.67 +                <td class="cislo">1234,56</td>
    9.68 +            </tr>
    9.69 +            <tr>
    9.70 +                <td>Hodnota 1</td>
    9.71 +                <td>Hodnota 2</td>
    9.72 +                <td>Hodnota 3</td>
    9.73 +                <td class="cislo">1234,56</td>
    9.74 +            </tr>
    9.75 +            <tr>
    9.76 +                <td>Hodnota 1</td>
    9.77 +                <td>Hodnota 2</td>
    9.78 +                <td>Hodnota 3</td>
    9.79 +                <td class="cislo">1234,56</td>
    9.80 +            </tr>
    9.81 +            <tr>
    9.82 +                <td>Hodnota 1</td>
    9.83 +                <td>Hodnota 2</td>
    9.84 +                <td>Hodnota 3</td>
    9.85 +                <td class="cislo">1234,56</td>
    9.86 +            </tr>
    9.87 +        </tbody>
    9.88 +    </table>
    9.89 +    <p class="vysledekOK">Ahoj. Právě jsi zmáčknul tlačítko „Vykonat SQL“ :-)</p>
    9.90 +    <p class="vysledekVarovani">Tohle se zobrazí při varování.</p>
    9.91 +    <p class="vysledekChyba">A tohle, když se něco nepovede.</p>
    9.92 +    <p class="vysledekTip">„Nějaký pěkný tip, citát, nebo <a href="http://frantovo.cz/blog/">odkaz</a> na stránku.“</p>
    9.93 +</div>
    9.94 \ No newline at end of file