Webová aplikace - HTML,CCS a Javascript – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Webová aplikace - HTML,CCS a Javascript – JavaScript, AJAX, jQuery – Fórum – Programujte.comWebová aplikace - HTML,CCS a Javascript – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Toto vlákno bylo označeno za vyřešené.
16. 7. 2022   #1
-
0
-

Ahoj,

    jsem na rekvalifikačním kurzu a dostal jsem za úkol - 

Naprogramuj webovou aplikaci pro evidenci pojistných událostí.

Minimální požadavky ke splnění

Aplikace obsahuje správu pojištěných (to jsou pojištěné osoby, např. "Jan Novák"):

Vytvoření pojištěného

Evidujte jméno, příjmení, věk a telefonní číslo

Zobrazení seznamu všech pojištěných

Dané entity jsou uloženy v kolekci v paměti (JS) 
Aplikaci lze pro zjednodušení vytvořit celou jen na jedné stránce
Aplikace je naprogramována podle dobrých praktik

Dobré praktiky

Oddělujte kód do samostatných tříd a souborů

JavaScript

Využívejte konstruktory pro inicializaci objektů
toString() pro jejich výpis

Mohl by mi prosím někdo poradit? Postup? Osnovu? Jak má člověk začít? Případně kody? Já jsem typ člověka, který se učí, tak, že se nejdříve podívá na výsledek a z toho se učím. Děkuji David

Nahlásit jako SPAM
IP: 86.49.17.–
gna
~ Anonymní uživatel
1730 příspěvků
16. 7. 2022   #2
-
+1
-
Zajímavé

   

<html>
<body>
<pre id="databaze"></pre>
<script>
class Pojistenec {
    constructor(jmeno, prijmeni, vek, tel) {
        this.jmeno = jmeno;
        this.prijmeni = prijmeni;
        this.vek = vek;
        this.tel = tel;
    }

    toString() {
        return `${this.tel}, ${this.jmeno} ${this.prijmeni}, ${this.vek}`;
    }
}

let databaze = [
    new Pojistenec('Jana', 'Svobodová', 24, '+420123456789'),
    new Pojistenec('Jiří', 'Novák', 25, '+420123456790'),
    
];

databaze.push(new Pojistenec('Jan', 'Novotný', 26, '+420123456791'));

document.getElementById('databaze').innerText = databaze.join('\n');
</script>
</body>
</html>
Nahlásit jako SPAM
IP: 213.211.51.–
gna
~ Anonymní uživatel
1730 příspěvků
16. 7. 2022   #3
-
0
-

Teda to HTML takhle není úplně pěkné, ale mně šlo o ten JS, abys mohl nějak začít.

Nahlásit jako SPAM
IP: 213.211.51.–
16. 7. 2022   #4
-
0
-

#2 gna
Jsi úžasný. Děkuji.

Takže udělám si klasickou strukturu v HTML (Index), Javascript zvlášt a pak ho vložím do indexu. Případně pak udělat style v CSS a opět ho přidat přes link v Indexu, ale jak udělám - 

Vytvoření pojištěného

Evidujte jméno, příjmení, věk a telefonní číslo

Zobrazení seznamu všech pojištěných

Musí se to udělat přes MYSQL? Nebo udělat tabulky v HTML?

Jsem amatér. Tak se omlouvám. Když tak ti pak pošlu na pivo :))

Připojen obrázek.

Připojen obrázek.


Připojen obrázek.

Nahlásit jako SPAM
IP: 86.49.17.–
peter
~ Anonymní uživatel
3888 příspěvků
17. 7. 2022   #5
-
+1
-
Zajímavé

myslq? cti zadani

"Dané entity jsou uloženy v kolekci v paměti (JS) | Aplikaci lze pro zjednodušení vytvořit celou jen na jedné stránce"

Tim je mysleno to, ze cely program pobezi v js. Aspon to tak chapu ja. Takze databaze bude nejaka js promena. Viz gna priklad. Jenom upravis jeho html kod a provazes ho na tlacitka formulare. Html formular, ktery provadi pridani radku do databaze a vypis noveho stavu. Vlastne ti to gna cele napsal. Bohuzel je to profesionalne, takze, to mozna neni uplne jasne :)
- do prom. databaze ulozi class pojistence.
- pokazde, kdyz ten class se ma zobrazit, tak se zavola funkce toString(), cili
databaze.join() vypise seznam lidi
- ale jinak se da pristupovat k jednotlivym polozkam pres databaze[0].jmeno, databaze[1].jmeno ...
 

Nahlásit jako SPAM
IP: 193.84.196.–
18. 7. 2022   #6
-
0
-

#5 peter

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta content="text/html"; charset="UTF-8"/>
        <title>Evidence Pojištěných</title>
        <link rel="stylesheet" rel="nofollow" href="styles.css">
    </head>
    <body>
        <h1>Registrace pojištěnce</h1>
        <table>
            <tr>
                <td>
                    <form action="" method="post" autocomplete="off">
                        <div>
                            <label>Jmeno</label>
                            <input type="text" name="jmeno" id="jmeno">
                        </div>
                        <div>
                            <label>Prijmeni</label>
                            <input type="text" name="Prijmeni" id="Prijmeni">
                        </div>
                        <div>
                            <label>Vek</label>
                            <input type="text" name="Vek" id="Vek">
                        </div>
                        <div>
                            <label>Tel</label>
                            <input type="text" name="Tel" id="Tel">
                        </div>
                        <br><button type="submit" formaction="#">
                            Uložit<br>
                           
                        </button>
                         
                    </form>
                </td>
               
            </tr>
        </table>
    <pre id="databaze"></pre>
    <script>
    class Pojistenec {
        constructor(jmeno, prijmeni, vek, tel) {
            this.jmeno = jmeno;
            this.prijmeni = prijmeni;
            this.vek = vek;
            this.tel = tel;
        }
   
        toString() {
            return `${this.tel}, ${this.jmeno} ${this.prijmeni}, ${this.vek}`;
        }
    }
   
    let databaze = [
        new Pojistenec('Jana', 'Svobodová', 24, '+420603568442'),
        new Pojistenec('Jiří', 'Novák', 25, '+420721896357'),
        new Pojistenec('Eliška', 'Jelenová', 53, '+420608547236'),
        new Pojistenec('David', 'Nejedlý', 41, '+420603444228'),
       
    ];
   
    databaze.push(new Pojistenec('Jan', 'Novotný', 26, '+420123456791'));
   
    document.getElementById('databaze').innerText = databaze.join('\n');
    </script>
    </body>
    </html>
 

Upravil jsem to takhle. Poradíte mi jak mám udělat, aby se načetly údaje z tabulek? Když přidám nového človeka přes tabulku a dám uložit, aby se zobrazil ve výpisu? Případně jak mám udělat, aby výpis lidí byl též v tabulce? Děkuji

Nahlásit jako SPAM
IP: 86.49.17.–
peter
~ Anonymní uživatel
3888 příspěvků
18. 7. 2022   #7
-
+1
-
Zajímavé

   

//return `${this.tel}, ${this.jmeno} ${this.prijmeni}, ${this.vek}`;
return `<tr><td>${this.tel}, ${this.jmeno} ${this.prijmeni}, ${this.vek}</td></tr>`;

//document.getElementById('databaze').innerText = databaze.join('\n');
document.getElementById('databaze').innerHTML = '<table>'+databaze.join('\n')+'</table>';

Ja myslim, ze neco by sis mohl udelat i sam metodou pokus omyl, ze jo?

<button type="submit"  - submit nepouzivej, ten odesila formular a tlacitko button je default typu submit :)
<input type="button" 

https://www.jakpsatweb.cz/html/
-> odkaz Formulare https://www.jakpsatweb.cz/…rmulare.html

Nahlásit jako SPAM
IP: 193.84.196.–
18. 7. 2022   #8
-
0
-

#7 peter

Strávil jsem nad tím asi 6 hodin dneska a stále nemůžu přijít na to, jak mám udělat, aby se mi zadané hodnoty ve formuláři po kliknutí na tlačítko uložit, uložily do tabulky do databáze klientů....


<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta content="text/html"; charset="UTF-8"/>
        <title>Evidence Pojištěných</title>
        <link rel="stylesheet" rel="nofollow" href="styles.css">
    </head>
    <body>
        <h1>Registrace pojištěnce</h1>
        <table>
            <tr>
                <td>
                    <form>
                        <div>
                            <label>Jmeno</label>
                            <input type="text" name="jmeno" id="jmeno">
                        </div>
                        <div>
                            <label>Prijmeni</label>
                            <input type="text" name="Prijmeni" id="Prijmeni">
                        </div>
                        <div>
                            <label>Vek</label>
                            <input type="text" name="Vek" id="Vek">
                        </div>
                        <div>
                            <label>Tel</label>
                            <input type="text" name="Tel" id="Tel">
                        </div>
                        <input type="submit" name="databaze" value="Uložit">
                           
                        <div id="hlaska_ok">
                           
                        </div>
                        <div id="hlaska_ko">
                        </div>
                         
                    </form>
                </td>
               
            </tr>
        </table>
    <pre id="databaze"></pre>
    <script>
       
    class Pojistenec {
        constructor(jmeno, prijmeni, vek, tel) {
            this.jmeno = jmeno;
            this.prijmeni = prijmeni;
            this.vek = vek;
            this.tel = tel;
        }
   
        toString() {
            return `<tr><td>${this.tel}, ${this.jmeno} ${this.prijmeni}, ${this.vek}</td></tr>`;
        }
    }
   
    let databaze = [
        new Pojistenec('Jana', 'Svobodová', 24, '+420603568442'),
        new Pojistenec('Jiří', 'Novák', 25, '+420721896357'),
        new Pojistenec('Eliška', 'Jelenová', 53, '+420608547236'),
        new Pojistenec('David', 'Nejedlý', 41, '+420603444228'),
       
    ];
   
    databaze.push(new Pojistenec('Jan', 'Novotný', 26, '+420123456791'));
    document.getElementById('databaze').innerText = databaze.join('\n');
    document.getElementById('databaze').innerHTML='<table>'+databaze.join('\n')+'</table>';
    function Uložit(){
        var Jmeno=document.getElementByld("Jmeno").value;
        var Prijmeni=document.getElementById("Prijmeni").value;
        var Vek=document.getElementById("Vek").value;
        var Tel=document.getElementById("Tel").value;
    }
    var data=[Jmeno, Prijmeni,Vek, Tel, ]
    google.script.run
    .withSuccessHandler(Hotovo)
    .withSuccessHandler(Chyba)
    .Uložit_data(data);
    function Hotovo(){
        var Jmeno=document.getElementByld("Jmeno").value = '';
        var Prijmeni=document.getElementById("Prijmeni").value = '';
        var Vek=document.getElementById("Vek").value = '';
        var Tel=document.getElementById("Tel").value = '';
        var el = document.getElementById("hlaska_ok");
        el.innerHTML  = 'Uložit';
        setTimeout(function(){el.innerHTLM  = '';}, 2000);
    }
    function chyba(err){
    var el = document.getElementById("hlaska_ko");
    el.innerHTML  = err;
 }
 function Uložit_data(data){
    var sheet = SpreadsheetApp.getActive().getSheetByName('databaze')
    var Uložit = [data]
    var radek = sheet.getLastRow() + 1
    var range = sheet.getRange(radek, 1, 1, data.length)
    range.setValues(Uložit)
 }
    </script>
    </body>
    </html>


Nahlásit jako SPAM
IP: 86.49.17.–
gna
~ Anonymní uživatel
1730 příspěvků
19. 7. 2022   #9
-
0
-

Ještě tě to trolení nepustilo? Jdi s tím na psychinu.

Nahlásit jako SPAM
IP: 213.211.51.–
peter
~ Anonymní uživatel
3888 příspěvků
19. 7. 2022   #10
-
0
-

Nevim, co s tim ma spolecne google sheet. O tom nebyla v zadani preci ani zminka. (nehlede na to, ze bez vlozeni knihovny google.sheet ti ten jejich kod asi nepojede :) )

Nevim, proc jednou pouzivas
document.getElementById('databaze').innerHTML a podruhe
                                 el.innerHTLM 

Nevim, proc tam nemas funkci vypis databaze a v ni prave ten kod s table+neco+/table.
Nevim, proc funkci s vypisem databaze nemas ve funkci ulozit.
Nevim, proc ve funkci ulozit nemas pridani radku do databaze databaze.push... 

Nevim, proc pouzivas konstrukci 
var Jmeno = document.getElementByld("Jmeno").value = '';

Tohle by mohlo byt totez jako napsat
var Jmeno = '';
document.getElementByld("Jmeno").value = '';

Ale, je to o moc vic nejednoznacne.

Jak pise gna, cela tva zprava mi prijde jako vymysleny podvod, falesna zprava nez jako pokus o skutecny program.

Nahlásit jako SPAM
IP: 2001:718:2601:258:9dd2:f132:1827:a23b...–
gna
~ Anonymní uživatel
1730 příspěvků
19. 7. 2022   #11
-
0
-

To je zase náš slavný Montezo. Namatlá dohromady náhodné kusy kódu a baví se tím, jak se to snažíme pobrat.

Nahlásit jako SPAM
IP: 213.211.51.–
19. 7. 2022   #12
-
0
-

#11 gna
Promin, ale dělám rekvalifikační kurz asi 1 měsíc a dostal jsem úkol, který se snažím splnit. Nejde mi to, tak jsem požádal slušně o pomoc nebo rady. Snažil jsem se i číst články, takže se omlouvám, že mám nesmyslný kod. Jak jsi na tom byl ty po měsíci učení? Tak ze mě nedělej nějakého Trolla. Místo toho by jsi mi mohl pomoci a říc mi jak má ten kod být správně...

Nahlásit jako SPAM
IP: 86.49.17.–
gna
~ Anonymní uživatel
1730 příspěvků
19. 7. 2022   #13
-
0
-

Věděl bych, že lokální proměnné funkce nejsou vidět mimo tu funkci, Že ve standardní knihovně není objekt `google`. Že moje volná funkce se magicky nestane jeho metodou. Že v konzoli uvidím běhové chyby... prostě takové ty tiviality, co se člověk naučí do týdne.

Taky bych z několikařádkového ukázkového kódu poznal, kde tam je přidávání položky do pole a převod celého pole do HTML, takže přesně to bych pak v tom svém přidaném formuláři použil.

Tak tady to máš, jen tak zhruba. Nejsem webař a neříkám, že to má být zrovna takhle. Třeba CSS jsem částečně prasil vědomě a částečně protože to prostě lépe neumím, ale máš tam dost věcí, abys měl na pár dní co Googlit, pokud něčemu nerozumíš.

<html>
  <head>
    <style type="text/css">
      .page {
        padding: 0px 30px;
      }

      .page.active {
        display: block;
      }

      .page.hidden {
        display: none;
      }

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
      }

      li {
        float: left;
      }

      li a {
        display: block;
        color: white;
        text-align: center;
        padding: 20px 20px;
        text-decoration: none;
      }

      li a:hover {
        background-color: black;
      }

      table,
      th,
      td {
        padding: 10px;
        border-collapse: collapse;
      }

      #userList table {
        width: 100%;
      }

      #userList table,
      #userList th,
      #userList td {
        border: 1px solid black;
        text-align: left;
      }

      #userForm table {
        margin-left: auto;
        margin-right: auto;
      }

      input[type="button"] {
        display: block;
        margin: auto;
        padding: 10px 30px;
      }
    </style>
    <script type="text/javascript">
      class Pojistenec {
        constructor(jmeno, prijmeni, vek, tel) {
          this.jmeno = jmeno;
          this.prijmeni = prijmeni;
          this.vek = vek;
          this.tel = tel;
        }
      }

      let databaze = [
        new Pojistenec("Jana", "Svobodová", 24, "+420123456789"),
        new Pojistenec("Jiří", "Novák", 25, "+420123456790"),
        new Pojistenec("Jan", "Novotný", 26, "+420123456791"),
      ];

      function addUser(form) {
        databaze.push(
          new Pojistenec(
            form.jmeno.value,
            form.prijmeni.value,
            +form.vek.value,
            form.tel.value
          )
        );
        renderUserList();
      }

      function renderUserList() {
        const tbody = document.querySelector("#userList tbody");
        tbody.innerHTML = "";

        for (const user of databaze) {
          const row = document.createElement("tr");
          [user.jmeno + " " + user.prijmeni, user.tel, user.vek].forEach(
            (text) => {
              const td = document.createElement("td");
              td.innerText = text;
              row.appendChild(td);
            }
          );
          tbody.appendChild(row);
        }
      }

      function showPage(pageId) {
        for (const page of document.querySelectorAll(".page")) {
          if (page.id == pageId) {
            page.classList.remove("hidden");
            page.classList.add("active");
          } else {
            page.classList.remove("active");
            page.classList.add("hidden");
          }
        }
      }
    </script>
  </head>
  <body onload="renderUserList()">
    <ul>
      <li>
        <a href="#" onclick="showPage('pageUsers'); return false;">Pojištěnci</a>
      </li>
      <li>
        <a href="#" onclick="showPage('pageAbout'); return false;">O aplikaci</a>
      </li>
    </ul>
    <div id="pageUsers" class="page active">
      <div id="userList">
        <h2>Pojištěnci</h2>
        <table>
          <thead>
            <tr>
              <th>Jméno a příjmení</th>
              <th>Telefon</th>
              <th>Věk</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <div id="userForm">
        <h2>Nový pojištěnec</h2>
        <form>
          <table>
            <tr>
              <td>
                <label for="jmeno">Jméno</label><br />
                <input type="text" name="jmeno" />
              </td>
              <td>
                <label for="prijmeni">Příjmení</label><br />
                <input type="text" name="prijmeni" /><br />
              </td>
            </tr>
            <tr>
              <td>
                <label for="vek">Věk</label><br />
                <input type="number" name="vek" /><br />
              </td>
              <td>
                <label for="tel">Telefon</label><br />
                <input type="telnum" name="tel" /><br />
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <input type="button" value="Uložit" onclick="addUser(this.form)" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div>
    <div id="pageAbout" class="page hidden">
      <h2>Výplod v0.1</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
  </body>
</html>
Nahlásit jako SPAM
IP: 213.211.51.–
peter
~ Anonymní uživatel
3888 příspěvků
19. 7. 2022   #14
-
0
-

Ha, gna dosla trpelivost :) A zplacal mu cely kod. To, ale moc nepovede k tomu, aby se neco naucil. Vzit puvodni funkcni kod od gna a obohatit jej o sve upravy... No, tak to drzim palce. Spravne by ses mel radit s tim ucitelem. Od toho si ho platis.

Nahlásit jako SPAM
IP: 2001:718:2601:258:9dd2:f132:1827:a23b...–
19. 7. 2022   #15
-
0
-

#14 peter
jestli je to Montezo, tak o "naučení se" mám pochybnosti.

hu

Nahlásit jako SPAM
IP: 195.178.67.–
19. 7. 2022   #16
-
0
-

#15 hlucheucho
Pane bože, co furt máte s nějakým Montezo :) Chtěl bych Vám všem poděkovat. Mě osobně se to nejlépe učí, když vidím jak to má být, následně zkouším co a jak. Takové zpětné inženýrství. Lektor má pouze poradní sezení online jednou za týden. :)

Nahlásit jako SPAM
IP: 86.49.17.–
19. 7. 2022   #17
-
0
-

A pak taková rychlokvaška s certifikátem, který dostane s odřenýma ušima, dostane flek namísto samouka s maturitou, který už pár fungujících aplikací postavil. Na co tyhle rekvalifikační kurzy jsou?

Asi si budu muset jít na rekvalifikační kurz. Rekvalifikovat se z programátora na programátora s certifikátem   

hu

Nahlásit jako SPAM
IP: 2001:af0:ffe4:85f4:7984:e0f2:cd6b:2680...–
peter
~ Anonymní uživatel
3888 příspěvků
19. 7. 2022   #18
-
0
-

Jasne, bez certifikatu ses nula :)

Montezo je zdejsi celebrita. Pouziva mnoho nicku. Ma spoustu otazek, zle nulova vlastni iniciativa. Ocekava hotove reseni za 0 penez, ktere nasledne zpenezi za 10.000 a vic.

Nahlásit jako SPAM
IP: 193.84.196.–
20. 7. 2022   #19
-
0
-

Jasne, bez certifikatu ses nula :)

Na certifikáty jsem alergický, takže skončím jako nezaměstnatelný nezaměstnaný. Příjemná perspektiva.

hu

Nahlásit jako SPAM
IP: 195.178.67.–
Bla
~ Anonymní uživatel
2 příspěvky
15. 8. 2022   #20
-
0
-

Zdar chlapi, jelikož jsem se ocitla ve stejný situaci, jako chudák Selficek, tak potvrzuju, že tohle zadání fakt existuje a s tím prdem, co taková rekvalifikace člověka má naučit, je 5 řádkové zadání doslova horor pro odpich. A to i pro člověka s dvěma doktoráty a zvyklého jet výzkum a učit se nové věci od píky. Hned někoho zesměšňovat, to mu fakt pomůže, když už třeba i tak je rok v háji, protože v okolí nesežene práci ve svým oboru, na kterým dvacet let makal. Takže já děkuji GNA, že se nakonec hecl a něco smysluplného poradil.  Mít za ty prachy tutora, který na nás má 30 min týdne a stejně mi nedokáže v kódu z lekce (!!!) najít chybu, aby mi fachala pokemon API databáze...co dodat ke kvalitě, ale nejmenuju. Googlit je jedna věc, ale vidět funkční kód a zjistit na něm, co jsem zapomněl nebo co si musím podchytit, je jiná. Asi obzvlášť v JS, kde nedává smysl skoro nic, ani když člověk celé dny čučí na yablka, Mike Dane, udemy i W3schools. Já si teda aspoň našla tenhle hint. CSS zvládnu, šlo mi taky o ten JS nástřel....zda by tam neměla být nějaká validace vstupů, když někdo místo jména vyplní číslo nebo nic ...atd....

Nahlásit jako SPAM
IP: 185.69.71.–
Zjistit počet nových příspěvků

Přidej příspěvek

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 4 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032022 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý