FIXOVÁNÍ 1: Fixní tabulka před tabulkou scrollovatelnou do šířky

Další dotaz, tentokrát přes chat (najdete ho vpravo dole), se týkal zafixování čtyř sloupců a dvou scrollovatelných do šířky. Tuto vlastnost můžete znát z MS Office, kde se buňky přichytávaly k okraji.

Řešení bylo pomocí první tabulky, která je zafixovaná překrývá tu druhou. Druhá tabulka je pomocí paddingu odsazená vedle té první.

HTML kód (s částí CSS):

<table id="fixni" style="text-align: left; width: 300px; max-height: 200px" border="1">
  <tbody>
    <tr>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text -  8956254564184. Klidně se i zalomí...</td>
      </tdbody>
       </table>
       <table id="druha" style="text-align: left; min-width: 85px; min-height: 190px;" border="1">
   <tdbody>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
      <td id="pohyb" style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýýtgrrfewgfzgezfgrfzugvczutfgewbdszfugwhejasgfzuuwgfhcbzwgfcwhegfzš</td>
    </tr>
  </tbody>
</table>

CSS kód: 

    #fixni {
        position: fixed; 
        left: 0; 
        top: 0; 
        background: #8ECCF0; 
        z-index: 1
        
    }
 
    #fixni td {
        max-width: 75px; 
        word-wrap: break-word
    }
    #druha {
        padding-left: 324px;
        margin: -8px;
    }

Živá ukázka pomocí iframe ve stránce

Živá ukázka samotných tabulek (zkuste si zmenšit okno prohlížeče)

Sloupce v tabulce s danou a proměnnou šířkou

Na DJPW se objevil dotaz, jak mít u čtyř sloupců pevnou šířku, tak Vám napíšu řešení i sem na web. Základem úspěchu je nebát se používat vlastnost min-width, což znamená minimální šířku.

HTML + CSS:

<table style="text-align: left; width: 1800px;" border="1">
  <tbody>
    <tr>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text - 8956254564184</td>
      <td style="max-width: 75px; word-wrap: break-word">První řádek (neměnný) A je tu hrozně
dlouhý text -  8956254564184. Klidně se i zalomí...</td>
      <td style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí</td>
      <td style="min-width: 10px;">Pohodlně dlouhý text, kterému se
buňka přizpůsobí a může být stráááááááááááááááááááááááááááááááááááááááššššššššššššššněěěěěěěěěěěěěěěě dlouuuuuuuuuuuuuuhýýýýýýý</td>
    </tr>
  </tbody>
</table>

Živá ukázka

Dvojstĺpcový layout s pätou vždy dole

Niekedy z rôznych dôvodov (obsahu je príliš málo, a nevyzerá to dobre) obyčajný dvojstĺpcový layout nestačí. Je preto na mieste zabezpečiť, aby minimálna výška obsahovej časti bola vždy aspoň 100% veľká. Ako na to, si ukážeme a popíšeme v nasledujúcom príklade:

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="obal">
               <div id="stlpec">
                   <p>iné informácie</p>
               </div>
               <div id="obsah">
                   <h1>Webová stránka</h1>
                   <p>Obsah webovej stránky</p>
               </div>
               <div class="clear"></div>
               <div id="pata">
                   <p>&copy; Vaše meno</p>
               </div>
           </div>
    </body>
</html>
   

CSS bude vyzerať takto:

html, body {
    height: 100%;    /*zapezpečí, že dokument bude vždy vysoký na celú výšku monitora*/
}
body {
    margin: 0; /*vynuluje predvolený vonkajší okraj 8px*/
}
#obal {
    width: 960px;    /*určí šírku obaľovacieho prvku*/
    margin: 0 auto;    /*vycentruje*/
    min-height: 100%;    /*ak by ste použili height, obsah by pri stránke vyššej ako 100% vytiekol*/
    padding-bottom: 8em;    /*vytvorí miesto pre pätu*/
    position: relative;    /*zapezbečí možnosť poziciovať pätu vzhľadom na obaľovací prvok,
namiesto <body>*/
    background-color: #CCC;    /*slúži na viditeľnosť pri kontrole správnosti*/
}
#stlpec {
    float: right;    /*vlastnsoť float dovolí prvkom byť zoabrazené vedľa seba*/
    width: 240px;    /* určenie rozmerov*/
    min-height: 700px;    /*min-height kvôli neprečeteniu obsahu pri jeho väčšom množstve;
hodnota musí byť v pixeloch*/
    padding: 5px;
    background-color: rebeccapurple;    /*opäť kvôli viditaľnosti*/
}
#obsah {
    padding: 10px;
    margin-right: 250px;    /*vytvorí miesto pre stĺpec; v prípade,
že by bol zobrazený naľavo, použijeme vlastnsoť margin-left*/
}
.clear {
    clear: both;
}
#pata {
    width: 100%;    /*nastaví päte rozmery, ktoré deaktivovalo použitie absolútneho poziciovania*/
    position: absolute;   
    left: 0;
    bottom: 0;    /*zariadime, aby bola päta vždy dole vzhľadom na obaľovací prvok
(ktorý je vždy vysoký aspoň 100%) a nastavíme umiestnenie zľava a zdola*/
    text-align: center;
    border-top: 1px dotted #000;    /*viditeľnosť*/
}

Živá ukážka

Princípom jednostĺpcového layoutu je nastaviť obalu minimálnu výšku (min-height) 100% a pätu absolútne napoziciovať (position: absolute;) na dno stránky. Ak obalu neudáme vlastnosť position: relative päta sa bude poziciovať, ale vzhľadom na prvok <body>, nie obal.

Pri dvojstĺpcovom layoute ide o rovnaký princíp, ale obsahovú časť musíme rozdeliť. Požadovaný efekt by sa nám podarilo dosiahnuť, aj v prípade, že by sme nechali obtekať (pomocou float) obidva stĺpce… Nebolo by však možné vytvoriť aspoň sčasti responzívny dizajn (ak nie je float, môžeme použiť min-width a max-width).

Dúfam, že je článok pochopiteľný a pre mnohých z vás  aj poučný. Ak by ste niečomu nerozumeli alebo v článku našli chybu, pokojne prispejte do komentárov.

Jednoduché přihlášení v PHP a MySQL

Kapitoly:

Nejdříve si v databázi vytvoříme pomocí phpMyAdmin (nebo Adminer) tabulku, kterou pojmenujeme uzivatele. Bude obsahovat čtyři sloupce id, login, heslo, email:

  • id
    • INT(5)
  • login
    • VARCHAR(40)
  • heslo
    • VARCHAR(32)
  • emal
    • VARCHAR(50)

Databáze

Vykonejme tedy tento SQL dotaz, který nám vytvoří vše výše popisované:

CREATE TABLE IF NOT EXISTS `uzivatele` (
 `id` int(5) NOT NULL auto_increment,
 `login` varchar(40) NOT NULL,
 `heslo` varchar(32) NOT NULL,
 `email` varchar(50) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Tím jsme si vytvořili tabulku uzivatele se sloupci id, login, heslo a email.

registrace.php

Nyní si otevřeme textový editor (např. PSPad, Notepad++, Sublime text…), vytvoříme nový PHP dokument, který pojmenujeme registrace.php a vložíme do něj velmi jednoduchý skript pro registraci:

<?php
include "connect.php";/* připojení k databázi - budeme se tomu věnovat níže... */
if(isset($_POST['submit'])) {
 $nick = mysql_real_escape_string($_POST['nick']);
 $heslo = mysql_real_escape_string($_POST['heslo']);
 $over_heslo = mysql_real_escape_string($_POST['over_heslo']);
 $md5_heslo = md5($heslo);
 $email = mysql_real_escape_string($_POST['email']);
 /* Nyní ověříme, zda byly zadané všechny potřebné údaje (registračnímu formuláři se budeme věnovat níže) */
 $user_check = mysql_query("SELECT login FROM uzivatele WHERE login='".$nick."'");
 if($nick==""){echo"Nebyl vyplněn nick!";}
 else if(mysql_num_rows($user_check)){echo"Tento nick používá již jiný uživatel.";}
 else if($heslo==""){echo"Nebylo vyplněno heslo";}
 else if($over_heslo==""){echo"Nebylo vyplněno ověřovací heslo";}
 else if($heslo!=$over_heslo){echo"Vyplněná hesla se neshodují";}
 else if($email==""){echo"Nebyl vyplněn email";}
 else{
 $sql= mysql_query("INSERT INTO uzivatele VALUES ('','$nick','$md5_heslo','$email')") or die(mysql_error());
 echo"Registrace byla úspěšně dokončena!";
 }
}
?>

 

Do téhož souboru ještě připíšeme přihlašovací formulář (na konec souboru vložte):

<form action="#" method="post"> 
<table> 
<tr> <td>Přezdívka: </td> <td><input type="text" name="nick" value="<?php if(isset($_POST["nick"])){echo $_POST["nick"];}?>" size="25" tabindex="1" /></td> </tr>
<tr> <td>Heslo: </td> <td><input type="password" name="heslo" value="" size="25" tabindex="2" /></td> </tr> 
<tr> <td>Ověření hesla: </td> <td><input type="password" name="over_heslo" value="" size="25" tabindex="3" /></td> </tr> 
<tr> <td>Email: </td> <td><input type="text" name="email" value="<?php if(isset($_POST["email"])){echo $_POST["email"];}?>" size="25" tabindex="4" /></td> </tr> 
<tr> <td colspan="2"><input type="submit" name="submit" value="Registrovat se" /></td> </tr> 
</table> 
</form>

Nyní jsme si vytvořili skript, který se nám připojí k DB (= databáze), ověří, zda byly zadané všechny správné údaje (správnost e-mailu se dozvíte v tomto článku) a následně je zapíše do DB.

connect.php

Dále si vytvoříme soubor pro připojení k databázi. Nazveme ho connect.php a vložíme do něj:

<?php
$db_server = 'server'; /* Název serveru, ke kterému se budeme připojovat */
$db_login = 'uzivatel'; /* Jméno uživatele do DB */
$db_password = 'heslo'; /* Heslo uživatele do DB */
$db_name = 'databaze'; /* Název databáze, ve které jsme si vytvořili tabulku "uzivatele" */
$spojeni = @MySQL_Connect($db_server ,$db_login, $db_password);
@MySQL_Select_DB($db_name)or die('<p style="color: red">Nastala chyba v pripojeni k databazi');
mysql_query("set names utf8");
?>

index.php

Nyní si vytvoříme soubor index.php, který bude obsahovat přihlašovací formulář a do jeho obsahu vložíme tento kód:

<form action="login.php" method="post"> 
 <table>
 <tr>
 <td>Přezdívka: </td>
 <td><input type="text" name="nick" value="" size="17" tabindex="1" /></td>
 </tr>
 <tr>
 <td>Heslo: </td>
 <td><input type="password" name="heslo" value="" size="17" tabindex="2" /></td>
 </tr>
 <tr>
 <td colspan="2"><input type="submit" name="submit" value="Přihlásit se" /></td>
 </tr>
 <tr>
 <td colspan="2" align="right">Pokud nemáte účet, <a href="/registrace.php">registrujte se</a></td>
 </tr>
 </table>
 </form>

K tomuto formuláři není moc co psát…

login.php

Dále si tedy vytvoříme soubor login.php (na který jsme odkazovali ve formuláři). Tento soubor bude sloužit k ověření správnosti dat s databází a případně vytvoří SESSION ‚login‘, kterou se budeme prokazovat jako přihlášení. Po shodě dat z MySQL, se přesměrujeme na admin.php. Do souboru login.php vložte:

<?php
include "./connect.php";/* připojení k databázi */
$login = mysql_real_escape_string($_POST["nick"]);/* nick zadaný ve formuláři pro přihlašování */
$heslo = mysql_real_escape_string($_POST["heslo"]);/* heslo zadané ve formuláři pro přihlašování */
$md5heslo = md5($heslo);/* Pomocí funkce md5() heslo zahashujeme */
/* — SQL DOTAZ PRO OVĚŘENÍ PRAVOSTI PŘIHLAŠOVACÍH DAT V DATABÁZI A UŽIVATELEM ZADANÝCH — */
$dotaz = mysql_query("select * from uzivatele where login = '$login' and heslo = '$md5heslo'");
$overeni = mysql_num_rows($dotaz);
$row = mysql_fetch_array($dotaz);
if($overeni == 1) {
 session_start();
 $_SESSION['login'] = stripslashes($login); 
/* Zde se vytváří SESSION 'login', kterou se budeme prokazovat jako přihlášení */
 $_SESSION['id'] = $row["id"];
 header("Location: admin.php"); /* V případě správného přihlášení se přesměruje na admin.php */
 die();
} else {
 echo"Zadal jsi špatný login nebo heslo!";
}
?>

admin.php

Dále si vytvoříme soubor admin.php, který bude přístupný pouze registrovaným uživatelům. To zajistíme tak, že povolíme výpis tajných dat pouze, pokud má uživatel SESSION ‚login‘, pokud nemá, zobrazíme přihlašovací formulář a hlášku, že se musí příhlásit. Do souboru admin.php vložte:

<?php
session_start(); /* Všude, kde chceme, aby probíhala autorizace, vložíme session_start */
?>
</head>
<body>
<h2>TEXT PRO VŠECHNY UŽIVATELE (přihlášené+nepřihlášené)</h2> /* Text pro všechny */
<?php
 if($_SESSION['login']!=""){
 echo'TEXT POUZE PRO PŘIHLÁŠENÉ UŽIVATELE - JSI VÍTÁN!!!<br> /* Text pro přihlášené */
 <a href="/logout.php">Odhlásit se</a>'; /* Zde je možnost, odhlásit se, povíme si, jak... */
 } else {
 echo'TEXT PRO NEPŘIHLÁŠENÉ UŽIVATELE - Tato stránka je přístupná pouze přihlášeným uživatelům. Pokud nemáš účet, <a href="/registrace.php">zaregistruj se</a>!<br> /* Text pro nepřihlášené */
 <h2>Přihlásit se:</h2>
 <form action="login.php" method="post"> 
 <table>
 <tr>
 <td>Přezdívka: </td>
 <td><input type="text" name="nick" value="" size="17" tabindex="1" /></td>
 </tr>
 <tr>
 <td>Heslo: </td>
 <td><input type="password" name="heslo" value="" size="17" tabindex="2" /></td>
 </tr>
 <tr>
 <td colspan="2"><input type="submit" name="submit" value="Přihlásit se" /></td>
 </tr>
 </table>
 </form>';
 }
?>

logout.php

Nyní nám zbývá už poslední část – odhlášení! Vytvořme si tedy soubor logout.php a napište do něj:

<?php
session_start();// Zapneme session
session_destroy();// Smažeme všechna session 'login'
header("location: index.php"); // Přesměruje na přihlašovací stránku
?>

Upozornění

V době, kdy jsem tento skript psal (prosinec 2013) byl aktuální. Z důvodu, že skript už není nejaktuálnější, chci Vás upozornit, že:

  • používat hashování pomocí MD5 je již zastaralé
  • používat rozšíření mysql_ je již zastaralé – doporučuji mysqli_
  • by bylo dobré uživatelské vstupy ošetřovat před XSS útoky (článek).

Samozřejmě není problém, tento typ přihlašování používat. Jen je dobré, abyste to věděli.

Shrnutí

Vytvořili jsme si tedy celkem šest souborů (index.php, connect.php, login.php, logout.php, admin.php, registrace.php).

Vše si můžete zdarma stáhnout a použít na svém webu: http://ukazky.mujskript.cz/jednoduche-prihlaseni-pomoci-mysql/prihlaseni.zip

Uvítám Vaše připomínky níže v diskusi 🙂

Zalamování slov v CSS pomocí word-wrap

Aniž bychom museli používat maximální šířku v CSS pro body, můžeme v CSS použít vlastnost word-wrap

HTML (s inline stylem):

<div class="obal-sloupce" style="word-wrap: break-word">
    <p>NějakéHodněDlouhéSlovoCoSeDoSloupceNevejde</p>
  </div>

CSS je zapsáno inline stylem, ale je možné vlastnost zapsat i externím CSS souborem.

Živá ukázka

Zdrojový kód

Škrtnutí textu pomocí značky s

Tato značka slouží pro škrtání obsahu. Používá se stejně jako značky <h1>, <span>, <div>, což znamená, že je  párová. Musí mít začátek <s> a konec </s>. Zdrojový kód:

<s>Toto je přeškrtnutý text pomocí značky  &lt;s&gt; v CSS.</s>

Pro správné vypsání jsem pochopitelně musel výpis fráze „<s>“ zaentinovat (aby se podruhé neprovedl, nýbrž vypsal.

Živá ukázka

Zdrojový kód

Proč používat značku <s> a ne značku <del>?

Jak jste si jistě všimli, na předchozí ukázce je pouze základní zápis značky <s>. Ano, samozřejmě uznávám, že existuje i značka <del>, která je také párová. Značka <del> byla vyvinuta předevšim pro nahrazování již neplatného textu. Chci tím říci, že značkou <del> škrtáme již neplatný obsah, informaci. Nyní se ale budeme věnovat především značce <s>.

<del>Neplatné sdělení</del>. <p>Platné sdělení</p>

Živá ukázka

Stylování značky <s>

Značka <s> jde pochopitelně velmi dobře stylovat pomocí (většinou) externího CSS.

→ Šikmé přeškrtnutí pomocí CSS

Ano, i to je možné. Tuto variantu asi často vídáte na různých nákupních serverech. Přeškrtnutí už ale nebude tak jednoduhé (= podpora ve starších prohlížečích). I tak se dá do CSS zapsat:

s {
    position: relative;
    text-decoration: none;
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #000;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);

}
A HTML tedy bude vypadat následovně:

<p><s>Neplatné sdělení</s></p>
<p>Platné sdělení</p>

Živá ukázka

Zdrojový kód

CSS jsme vlastně druhým zápisem s before deklarovali „nasměrování“ přeškrtnutí na text, a pomocí prvního zápisu, aby se text neotáčel spolu s přeškrtnutím.

→ Cenové přeškrtnutí (jako u e-shopu)

Přeškrtnutí starých cen a nahrazení novými je velmi lehké. Pokud bychom chtěli mít starou cenu červeně přeškrtnutou a novou cenu tučně zelenou, stačí si pohrát barvami: 

HTML: 

<p>Dříve: <s>250,- Kč s DPH</s></p>
<p>Nyní:  <span>180,- Kč s DPH</span></p>

CSS:

s {
    position: relative;
    text-decoration: none;
    background
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid red;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}
 
span {
    color: green;
    font-weight: bold;
}

Živá ukázka

Zdrojový kód

Změna textu po kliknutí na obrázek (div, nebo odkaz)

Stačí zaměnit jen to, co je červeně vyznačené. Tedy cesty k obrázkům a „střídavé“ texty.

HTML (celý zdrojový kód):

<a href="javascript:;" onclick="this.style.display = 'none'; 
document.getElementById('t1').style.display = 'none';
document.getElementById('2').style.display = 'block';
document.getElementById('t2').style.display = 'block';"
id="1">
<img src="http://diskuse.jakpsatweb.cz/img/logo.png"></a>
<a href="javascript:;" onclick="this.style.display = 'none'; 
document.getElementById('t2').style.display = 'none';
document.getElementById('1').style.display = 'block';
document.getElementById('t1').style.display = 'block';"
style="display: none;" id="2">
<img src="http://diskuse.jakpsatweb.cz/img/logo.png "></a>
<div id="t1">Nějaký <strong>první</strong> hrooozně dlouhý text.<br></div>
<div id="t2" style="display: none;">Nějaký <strong>druhý</strong> hrooozně dlouhý text.</div>
 

Živá ukázka

Zdrojový kód

Animace načítání po kliknutí na odkaz – JavaScript

Živá ukázka

HTML: 

<img src="http://ukazky.mujskript.cz/img/loading.gif" alt="" id="nacitani">
<a href="http://mujskript.cz" onclick="okno()">MůjSkript.cz</a>

 

CSS (je důležité pro skrytí prvku nacitani):

#nacitani {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

JS:

function okno() {
    document.getElementById("nacitani").style.display = "block";
}

Živá ukázka

Zákaz přístupu do složky zvenčí – .htaccess

Pro zákaz přístupu do určité složky na serveru v prohlížeči je možno vložit do této složky soubor .htaccess s následujícím obsahem.

deny from all

Nic víc. Tento jediný řádek kódu zajistí, že interní skripty se do adresáře dostanou, ale návštěvníci skrz webový prohlížeč již nikoliv. Ukažme si to na příkladu:

Mám tuto strukturu na FTP:

 – html

 – css

 – moduly

 – skripty

Po zadání do prohlížeče URL adresu www.domena.cz/html, nebo třeba www.domena.cz/moduly, zobrazí se mi třeba výpis složky (nebo výchozí soubor složky). Pokud chci do složek modulyskripty zakázat přístup přes webový prohlížeč, stačí těchto dvou adresářů vložit výše zmíněný soubor .htaccess. Potom – po zadání www.domena.cz/moduly, nebo www.domena.cz/skripty se mi vypíše hláška, že nemám přístup do adresáře.

Pokud zadám www.domena.cz/html, nebo www.domena.cz/css a tato složka neobsahuje tento soubor .htaccess s obsahem deny from all, obsah složky se mi vypíše.