HTML - zobrazení hodnoty z jiného souboru

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod honzik_01 3. 12. 2015 12:57

Zdravím,
potřeboval bych poradit s předpokládám triviální záležitostí.
V jednom adresáři mám dva soubory, jednu .htm stránku a druhý soubor s "databázi" - co nejjednodušší formát s několika desítkami hodnot.
Tento "databázový" soubor se bude periodicky měnit (bude ho přepisovat externí zařízení).
Já bych potřeboval pomocí .htm souboru přímo zobrazit na určitých místech konkrétní hodnoty

Uvedu příklad:

.htm stránka (teploty.htm):
Kód: Vybrat vše
<!DOCTYPE html>
<html>
<head>
<title>TEPLOTY STROJE</title>
</head>
<body>
<h1>stroj 1</h1>
<p>teplota 1: ?????????</p>
<p>teplota 2: ?????????</p>
</body>
</html>


"databázový soubor" (teploty.txt):
Kód: Vybrat vše
teplota_1=56.3
teplota_2=32,9


jak dostat do webové stránky zobrazené spuštěním teploty.htm aktuální hodnotu teploty 1, která je uložena v souboru teploty.txt?
A když už se ptám na základní věci, jak dopsat autorefresh třeba po 5s?

Omlouvám se za primitivní dotaz, ale nějak se mi nedaří najít správný postup.
Díky
honzik_01
Junior

Odeslat příspěvekod JirkaVejrazka 3. 12. 2015 13:14

Na tohle uz potrebujes nejaky jazyk, kterym naprogramujes zakladni funkcnost. At uz PHP s nejakym frameworkem (pro zjednoduseni programovani), Angular.JS + node.js, nebo treba Python + Flask + SQLAlchemy. Moznosti je spousta, ale pokud jsi nic takoveho predtim nedelal, asi ti to par veceru zabere.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod Nargon 3. 12. 2015 14:46

Asi by se to dalo zpracovat pomocí Javascriptu, ale psát se mi to nechce.
Desktop: Ryzen 7 1800X (3.95GHz, 1.35V), Asus Crosshair VI Hero, 16GB DDR4 Ram (3200MHz), 128GB SSD + 3TB HDD, Nvidia GTX 1080
Notebook: Asus UL50VT 15.6" (SU7300@1.7GHz, 4GB ram, 500GB HDD, Intel GMA 4500MHD + nVidia G210M, dlouha vydrz cca 7+ hod)
Nargon
Moderátor

Odeslat příspěvekod honzik_01 3. 12. 2015 14:48

to jakože fakt nejde udělat základním HTML? :shock:
Sice jsem to nenašel, ať jsem zkoušel různé weby a různé cesty jak na to, ale nepochyboval jsem, že je to pouze mou hloupostí...
A nějaký tip kde začít by nebyl? Případně pár řádků kódu? ;-)
honzik_01
Junior

Odeslat příspěvekod JirkaVejrazka 3. 12. 2015 15:03

Ne, nejde to udelat se zakladnim HTML.

A kde zacit? Treba tady: https://www.codecademy.com/learn/javascript

Ale opravdu to za hodinu mit nebudes, pokud jsi nic takoveho nikdy nedelal.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod soban 3. 12. 2015 18:24

Jsou dvě možnosti nějaký jazyk (PHP) na takovou trivialitu stačí.

A nebo by jiný externí program co by se spouštěl třeba z cronu mohl měnit ten html soubor, ovšem pak je problém aby www server se nějak dozvěděl že se soubor změnil a neposílal ten starý z cache a pod.....
/----------------------------------------\
| Petr Šobáň |
| Olomouc |
\----------------------------------------/
soban
Pokročilý

Odeslat příspěvekod Pjotr12 4. 12. 2015 11:18

a nešlo by to udělat "dřevorubeckou metodou", mít 3 soubory : 1-soubor s horní částí html, 2-data, 3-soubor s dolní částí html.
Pak v pravidelných intervalech spouštět : copy soubor1.html + data.txt + soubro2.html vysledek.html
Zobrazovat se bude vysledek.html

to by asi stačilo a je to bez programování
Pjotr12
Kolemjdoucí

Odeslat příspěvekod gandor 4. 12. 2015 11:26

Na takuto trivialitu staci HTML + cisty vanilla javascript.
Vyzeralo by to potom takto:
Kód: Vybrat vše
<!DOCTYPE html>
<html>
<head>
<title>TEPLOTY STROJE</title>
</head>
<body>
<h1>stroj 1</h1>
<div id="generovaneHodnoty"></div>
<script>
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange=function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var transformedContent=xhttp.responseText.split('\n').map(function(item){return item.replace('_',' ').replace('=',' : ')});
      document.getElementById("generovaneHodnoty").innerHTML = '<p>'+transformedContent.join('</p><p>')+'</p>';
    }
  };
  xhttp.open("GET", "teploty.txt", true);
  xhttp.setRequestHeader('cache-contol','no-cache, no-store, must-revalidate');
  xhttp.send();
</script>
</body>
</html>

Pisane z hlavy, nekontroloval som si veci a urcite tam bude chyba. Ale ako zaklad ktory uz len doodladujes by to malo stacit...

A potom mas este potencialny problem s cache podla nastavenia servera:
1, ignoruje request cache-control headre. V tom pripade treba skusat menit URL (tak ze nebudem getovat teploty.txt, ale teploty.txt?random='+Math.random())..
2, pokial nieje presna zhoda nazvu, tak ti server odmietne vratit dany file - potom budes musiet nastavit server tak, aby ti necacheoval vysledky (ak mas apache, tak napriklad cez mod_cache, pripadne mod_headers)
3, ak nemas pristup k nastaveniam serveru, tak to budes musiet riesit cez nejaky server-side jazyk a cez ten nastavovat headre...
gandor
Mírně pokročilý

Odeslat příspěvekod honzik_01 4. 12. 2015 14:00

gandor: takhle jsem to nemyslel, tys jednoduše zkopíroval teploty txt do stránky, akorát jsi nahradil nějaké znaky aby to vypadalo...

Tak jednoduché to ale není. Ten příklad byl zjednodušený aby se na něm dalo snadno prezentovat řešení.
Já jsem měl představu že v teploty.txt bude u každé proměnné nějaký identifikátor (odkaz), na který se budu odkazovat ve webové stránce (a ta mi načte přímo hodnotu proměnné).
Tím bych si mohl udělat nějaký vzhled stránky, řazení proměnných nezávislé na teploty.txt atd.

teplota_1 je pouze odkaz, že bude následovat proměnná reprezentující hodnotu teploty třeba radiálního ložiska. taky řazení proměnných ve webové stránce bude asi jiné než v databázi teploty.txt
honzik_01
Junior

Odeslat příspěvekod Nargon 4. 12. 2015 14:19

I to půjde.
Kód stránky bude plus mínus takto:
Kód: Vybrat vše
<!DOCTYPE html>
<html>
<head>
<title>TEPLOTY STROJE</title>
</head>
<body>
<h1>stroj 1</h1>
<p>teplota 1: <span id="teplota_1">?????????</span></p>
<p>teplota 2: <span id="teplota_2">?????????</span></p>
</body>
</html>

A k tomu podobný JS kód, který to přes ajax načte, pak ten soubor rozparsuje, každý řádek jeden záznam a text před rovnítkem bude ID elementu kam se vyplní ta hodnota za rovnítkem. Ale psát ten kód nebudu.
Desktop: Ryzen 7 1800X (3.95GHz, 1.35V), Asus Crosshair VI Hero, 16GB DDR4 Ram (3200MHz), 128GB SSD + 3TB HDD, Nvidia GTX 1080
Notebook: Asus UL50VT 15.6" (SU7300@1.7GHz, 4GB ram, 500GB HDD, Intel GMA 4500MHD + nVidia G210M, dlouha vydrz cca 7+ hod)
Nargon
Moderátor

Odeslat příspěvekod gandor 5. 12. 2015 17:18

Presne jak pise nargon. Dokonca ten kod upravit by bolo jednoduche a nepotrebujes ziaden prikaz, ktory nieje v tom mojom example (az na getElementById)...
gandor
Mírně pokročilý


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků