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

V minulé lekci, Návštěvní kniha přes WebSocket - Zprovoznění komunikace, jsme zprovoznili komunikaci: Klient -> PHP server -> Node.js server -> Klienti.

Dokážeme 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řídě 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="Váš email ([email protected])">

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

                    <button type="submit" class="button" id="form-action" name="form_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 protected]</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 - WebSocket - Real-time návštěvní kniha v PHP

Příště, v lekci Návštěvní kniha přes WebSocket - JavaScriptový klient, se opět vrátíme k programování.

Článek pro vás napsal Patrik Smělý

Uživatelské hodnocení:

8 hlasů

Autor miluje filosofii, sci-fi, technologie, hry a hlavně svobodu. Aktivně se věnuje programování, designu, 3D grafice, správě sítí a trochu méně hardwaru. Mimo technologické zaměření se velice zajímá o politiku a psychologii.

Aktivity