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();"> </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();"> </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();"> </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
