4. díl - Návštěvní kniha přes WebSocket - Šablona aplikace

PHP Návštěvní kniha přes WebSocket Návštěvní kniha přes WebSocket - Šablona aplikace

V minulém tutoriálu seriálu Real-time návštěvní kniha přes WebSocket jsme zprovoznili komunikaci:

Klient -> PHP server -> Node.js server -> Klienti.

Dokážeme tedy z PHP obnovovat stránky klientům, kteří je mají otevřené. Náš systém přeposílá zprávy v reálném čase. Pojďme z něj nyní udělat opravdovou knihu návštěv/chat.

Dnes vytvoříme pro aplikaci nějakou rozumnou šablonu, abychom HTML a CSS kódem zbytečně nezatěžovali ostatní články, kde se vysvětluje fungování aplikace. Tento článek tedy obsahuje pouze HTML a CSS kód šablony. Věříme, že ho není třeba nijak více popisovat. Náš testovací script si můžeme smazat a stejně tak smažeme i div.messages a ve tříde MainClass.php odstraníme naše testovaní.

PHP/css/style.css

Připravil jsem si pro vás jednoduchý design zde je css.

* {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    box-sizing: border-box;
    outline: none;
}
body {
    background-color: #f5f5f5;
    color: black;
    font-size: 14px;
    font-family: Helvetica Neue, Helvetica, Arial;
}

section.wrapper {
    width: 840px;
    margin: 60px auto;
}
section.wrapper div.background {
    background-color: white;
    border-radius: 2px;
    float: left;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
}
section.wrapper h1 {
    font-family: Roboto;
    width: 100%;
    float: left;
    height: 200px;
    line-height: 250px;
    text-align: center;
    font-size: 60px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    color: white;
    background-color: #4aa3df;
}
section.wrapper article {
    padding: 20px 20px 20px 20px;
    float: left;
    width: 100%;
}

label.label {
    width: 100%;
    float: left;
    margin-bottom: 5px;
    cursor: pointer;
}

.input {
    width: 100%;
    padding: 10px 10px 10px 10px;
    text-align: left;
    border-radius: 2px;
    float: left;
    border: 1px solid #DDDDDD;
    margin-bottom: 10px;
    transition: border-color .2s;
}
.input:focus {
    border-color:  #0b97c4;
}

.hide {
    display: none;
}

textarea.input {
    max-width: 100%;
    min-height: 60px;
    max-height: 120px;
}

button.button {
    background-color: #0b97c4;
    text-align: center;
    color: white;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    border: none;
    float: right;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    transition: box-shadow .5s, background-color .5s;
}
button.button:hover {
    background-color: #0bb9e7;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.clear {
    clear: both;
}

.messages {
    width: 100%;
    float: left;
}

.message {
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    float: left;
    margin-bottom: 25px;
}
.message:last-child {
    margin-bottom: 0;
}
.message > .message-name {
    font-family: Roboto;
    font-weight: 600;
}
.message > .message-text {
    padding-top: 5px;
    word-break: break-all;
    padding-bottom: 10px;
}
.message > .message-date {
    float: right;
}
.message > .message-email {
    float: left;
}

PHP/template.phtml

A zde html:

<!DOCTYPE html>
<html>
<head lang="cs-cz">
    <meta charset="UTF-8">
    <meta name="author" content="Patrik Smělý(SogoCZE)">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Realtime Kniha návštěv">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Realtime Kniha návštěv</title>
    <base href="localhost">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" charset="UTF-8"></script>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js" charset="UTF-8"></script>
</head>
<body>
    <section class="wrapper">
        <div class="background">
            <h1>Realtime Kniha návštěv</h1>
            <article class="form">
                <form method="post" id="form">
                    <label class="label" for="form-name">Vaše jméno</label>
                    <input class="input" type="text" id="form-name" name="form_name" placeholder="Vaše jméno (Patrik Smělý)">

                    <label class="label" for="form-email">Váš email</label>
                    <input class="input" type="email" name="form_email" id="form-email" placeholder="Vaš email (email@email.com)">

                    <label class="label" for="form-text">Vaše zpráva</label>
                    <textarea class="input" name="form_text" id="form-text" placeholder="Váše zpráva"></textarea>

                    <button type="submit" class="button" id="form-action" name="forn_action">Odeslat <i class="fa fa-arrow-circle-right"></i></button>
                </form>
            </article>
            <article class="messages">
                <div class="message">
                    <h2 class="message-name">Patrik Smělý</h2>
                    <div class="message-text">
                        Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
                        Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing
                    </div>
                    <div class="message-email">email@email.com</div>
                    <div class="message-date">30.10.2015 12:02</div>
                </div>
            </article>
        </div>
        <div class="clear"></div>
    </section>
    <script src="js/index.js" type="application/javascript"></script>
</body>
</html>

Nyní byste měli dostat následující výsledek:

Šablona pro real-time chat v PHP a Node.js

Příště se opět vrátíme k programování.


 

  Aktivity (3)

Článek pro vás napsal Patrik Smělý (SogoCZE)
Avatar
Autor se věnuje front-end i back-end vývoji webových stránek, nejvíce pracuje s jazykem PHP a Javascript. Rád se učí nové věci a někdy strčí nos i do 3D / 2D grafiky.

Jak se ti líbí článek?
Celkem (2 hlasů) :
55555


 



 

 

Komentáře

Avatar
Hadi.k
Člen
Avatar
Hadi.k:

To myslíš vážně ?
Ano snaha se musí cenit a prvních pár dílů sem si myslel že i ten serial bude stát za to, ale když 4. díl místo kvalitního článku obsahuje pár zdrojáků bez dalších informací tak o kvalitě článku pochybuji.

Taktéž v prvním díle si už přešel k instalaci balíčků, někoho by mohlo zajímat jak tam to node třeba dostat. (Já to vím, ale jsou tu nováčcí kteři by se to node chtěli naučit).

To že dá 5. David jak premium dobrá, pokud ten obsah za to stat bude a že to psal on tak nejspíše bude.
Avšak tento díl ten serial dost zabil.

Ale snaha se cenní aspon někdo něco vytvořil :)

Odpovědět  ±0 17.11.2015 9:49
"Ajťák" nikdy nebere telefon po prvním zazvonění!! Vždy je totiž velice vytížen - buď musí nejprve dopít ká...
Avatar
Adam Ježek
Tým ITnetwork
Avatar
Odpovídá na Hadi.k
Adam Ježek:

Seriál jsem zatím jenom spěšně prohlíd, čas sem na to zatim neměl, ale připadá mi, že je tu dost informací. Tohle už je jenom šablona pro funkční projekt, co ti chybí v tomhle dílu?
A následující premium článek nejspíše obsahuje pokračování k tomuto, takže nemůžeš kritizovat že je to nekompletní, když je to pouze první část. A jak už název článku říká, je to šablona. Tady neni co vysvětlovat a počítá se alespoň se základy HTML a CSS

Odpovědět  +2 17.11.2015 11:02
Pokud chceš odpovědět, klikni na odpovědět. Pokud chceš vložit zdroják, klikni na vložit zdroják (</>)
Avatar
Patrik Smělý (SogoCZE)
Tým ITnetwork
Avatar
Odpovídá na Hadi.k
Patrik Smělý (SogoCZE):

Ahoj, celý seriál jsem psal já (David ho upravuje a opravuje) - takže i ty premium, původně toto nebyl samostatný článek ale součást druhého dílu který byl moc velký, tak jsme to museli rozdělit, proto je to bohužel přes celý článek. K tím informacím nevím co bych měl psát k html a css šabloně, je to seriál o WebSocketech a né o vytváření a stylování stránky :) proto jsem si pro vás připravil už hotovou html a css šablonu, nevidím v tom problém :).

Taktéž v prvním díle si už přešel k instalaci balíčků, někoho by mohlo zajímat jak tam to node třeba dostat. (Já to vím, ale jsou tu nováčcí kteři by se to node chtěli naučit).

Docela nechápu podstaty této věty, pochopil jsem z toho že píšeš něco ve smyslu že jsem ukázal lidem jak nainstalovat balíčky do nodejs ale neukázal jak nainstalovat node, což není tak úplně pravda ve článku je část:

Dále tedy potřebujeme Node.js. Ten stáhneme z adresy https://nodejs.org a taktéž nainstalujeme. Na instalaci není nic složitého, proto nepřiložím ani žádný obrázek :).

Který jasně říká že máš nodejs stáhnout a nainstalovat, pokud člověk nezvládne sám nainstalovat takzvanou "proklikávací instalaci" tak by neměl na tento seriál vůbec koukat.

Editováno 17.11.2015 11:18
Odpovědět  +2 17.11.2015 11:16
PHP můj oblíbený jazyk......
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Hadi.k
David Čápka:

Prosím tě, můžeš mi říci, jaké informace má obsahovat článek, ve kterém se tvoří šablona? Vážně by mě to zajímalo.

Odpovědět  +2 18.11.2015 13:25
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
hitzoR
Člen
Avatar
Odpovídá na David Čápka
hitzoR:

No offence, ale takový článek by tady v tomhle seriálu ani neměl být. Stačilo jen přiložit zdroják, nic víc, nic míň. Nevím, proč by v seriálu o WebSocketech měl být celý článek věnovaný tvorbě šablony, kterou si stejně každý udělá úplně jinak.

 
Odpovědět  +2 18.11.2015 17:26
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na hitzoR
David Čápka:

Protože ten seriál je ucelený, což je podstata zdejší výuky.

Odpovědět 19.11.2015 15:38
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Milan Křepelka
Redaktor
Avatar
Milan Křepelka:

Pánové i když chápu vaše argumenty ohledně velikosti informační hodnoty, tak zkuste přemýšlet nad tímto

  • tento článek je zdarma, tudíš se nemusí přemýtat nad slabší informační hodnotou
  • je to příprava, malá, ale nezbytná
  • uvedení zdrojáků formou textu je v jádru přehlednější, protože zdrojáky nepřekročily úměrnou mez a dávají přesnější obraz mezi "vstupem" a výstupem
 
Odpovědět 19.11.2015 20:23
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 7 zpráv z 7.