I malá chyba znamená spoustu problémů
Dnes se mi stala celkem legrační věc. Dělal jsem logovací soubor k jednomu importu XML dat do databáze. Log jsem ukládal do souboru a ten jsem pak odesílal mailem. Jen nastal menší problémek!
Zapoměl jsem totiž resetovat v každém cyklu jednu proměnnou a tak tato proměnná každým průchodem cyklu exponenciálně rostla. Celková velikost reportu pro cca. 1500 produktů je vidět na obrázku. Normální velikost souboru se správně vynulovanou proměnnou je cca. 300kB.
Pravidla psaní kódu
Existuje řada pravidel jak psát (resp. strukturovat) psaný kód. Tyto pravidla se týkají všech programovacích jazyků (PHP, C, C++, Java, ...). Osobně jsem se setkal se třemi pravidly. V tomto článku se Vám pokusím ukázat styl, který používám já při psaní mých programových kódů.
Nejdříve dva termíny: maléVelbloudíPísmo a VelkéVelbloudíPísmo.
maléVelbloudíPísmo označuje způsob jakým se píší jména proměnných, funkcí a instancí tříd (příklad $jmenoMehoSouseda, $mujMobilniTelefon). VelkéVelbloudíPísmo se používá pro názvy tříd (class NakupniKosik).
Osobně mi přijde používat maléVelbloudíPísmo a VelkéVelbloudíPísmo lepší než psaní druhým způsobem $jmeno_meho_souseda nebo class nakupni_kosik. Úplně za kritickou hrubku považuji kombinaci těchto stylů: $jmeno_mehoSouseda.
Výjimkou je mé označování „sloupečků v SQL, kde používám druhý způsob psaní: id_vyrobce, id_dodavatele, fk_id_vyrobku, pk_id_uzivatele.
Pár příkladů:
podmínka IF: if ($podminka) { ... } elseif ($podminka) { … } else { … }
proměnné: $mojeTelefoniCislo;
třídy: class NazevTridy {};
atributy: public, private, protected $mojeTelefoniCislo;
metody: function get() { … };
větvení SWITCH: switch ($neco) { case 'moznost1': … break; case 'moznost2': ... break; default: ... }
FOR, WHILE: for ($i = 0; $i < 10; $i++) { ... } while ($podminka) { ... }
Používat require_once() a include_once() místo require() a include(). Vždy pracovat s register_globals off ($_GET, $_POST, $_SESSION, $_SERVER).
řetězce: //rychlejsi echo 'naky text '.$var1.n.'dalsi'.n; //pomalejsi ale pohodlnejsi (nekdy) echo naky text $var1ndalsin;
ARRAY: pole ukončovat až dole, ne hned za poslední položkou (vede k častým syntaktickým chybám, a zpomaluje vpisování nových položek) + nechávat čárku za poslední položkou není duležité, pouze zlepšuje komfort psaní. array( 'xx' => 'xx', 'yy' => 'yy', );
Univerzální dataGrid
Už delší dobu mám v plánu, že budu zveřejňovat své třídy, které mi přijdou užitečné. První třída, kterou zveřejním se týká třídění, shlukování a řazení dat v tabulce. Nazval jsem jí univerzální dataGrid protože je to hodně jednoduchá a všeobecná třída. Osobně jí používám víc rozšířenou. Tohle je jen základ, který by měl na obyčejnou práci s daty bohatě stačit. Pro správné fungování třídy doporučují min. verzi PHP 5.0.
Kdyby měl někdo velký zájem mohu poskytnou zdrojové kódy, které pracují se Smarty nebo zobrazují ve výpisu obrázky a používají různé fce. Dokonce mám i šablonu, kde se místo do tabulky data zobrazují ve stromové struktuře (tu uveřejním později).
Tuto třídu budu licencovat pod GNU General Public License. Stručně řečeno můžete si jí volně stáhnout, upravovat, rozšiřovat ale také licencovat pod GNU GPL.
Co třída dovede. Základem je aby třída tahala data z databáze a ty přehledně zobrazovala na výstupu. Vy si v souboru ve kterém budete třídu volat jen řekněte jakou tabulku chci použít, jaké sloupečky chci zobrazit a zda budu používat WHERE restrikci. Nechal jsem tam jedno rozšíření, které v tabulce vypíše odkazy pro editaci a smazání.
Výslednou tabulku můžete tedy řadit podle všech sloupů, můžete si nastavit stránkování (počet položek na stránku).
Příklad při plném užití:
- Nejdříve se načtou všechny potřebné soubory,
- vytvořím instanci třídy dataGrid se vstupními parametry (připojení do DB [mysql server, uživatel, heslo, databáze, kódování], název tabulky, ostatní ponechám),
- do proměnné vyplním jaké sloupečky chci z tabulky vypisovat (vždy je to název [který se bude vypisovat v tabulce] => název sloupečku v tabulce),
- je možnost nastavení stránkování (počet řádků na jedu stránku),
- mohu nastavit WHERE restrikci (jaký sloupeček, jaká hodnota, operátor),
- mohu nastavit speciální odkazy (př. edit a delete),
- dále sestavím tabulku,
- vypíšu tabulku.
//nacteni potrebnych souboru
require('./conf/conf.php');
require('./dataGrid.php');
//vytvoreni instance tridy dataGrid s potrebnymi vstupnimi parametry
$classDataGrid = new dataGrid($_db, 'nazev_tabulky', $_GET['page'], $_GET['sort'],
$_GET['desc']);
//nastaveni hodnot ktere chceme mit v dataGridu
$classDataGrid->arrItem = array ('id' => 'id', 'kód zboží' =>'code', 'jméno'
=> ' title','výrobce' => 'name','naše cena' => 'oursPrice');
//nastaveni poctu polozek na stranku
$classDataGrid->setPagging(100);
//nastaveni where restrikce (jaky sloupec, jaka hodnota, porovnani)
$classDataGrid->setWhereRestriction('oursPrice', '10000', '>');
//nastaveni edit a delete
$classDataGrid->editLink = kam_mam_ukazovat;
$classDataGrid->deleteLink = kam_mam_ukazovat;
//sestaveni hodnot
$classDataGrid->getList();
//zobrazi tabulku
echo $classDataGrid->showTable();
funkční příklad zde: univerzální dataGrid.
Třídu s příkladem je možné stáhnout zde: zdrojové kódy univerzální dataGrid.
MySQL - cizí klíče
Dnes si ukážeme jak používat cizí klíče v databázovém systému MySQL. Minulý týden jsme v databázových systémech tuto problematiku opakovali a jak se ukázalo tak řada lidí ani pořádně neví k čemu cizí klíče slouží natož jak je správně používat!
V první řadě si vytvoříme 3 tabulky. Příklady budu ukazovat na problému s propojením článků a sekcí třeba na mém blogu.
CREATE TABLE `clanky` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_czech_ci NOT NULL
) ENGINE = innodb CHARACTER SET utf8 COLLATE utf8_czech_ci;
CREATE TABLE `sekce` (
`id` INT( 5 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`title` VARCHAR( 255 ) CHARACTER SET utf8 COLLATE utf8_czech_ci NOT NULL
) ENGINE = innodb CHARACTER SET utf8 COLLATE utf8_czech_ci;
CREATE TABLE `clanky_join_sekce` (
`id_clanku` int(5) NOT NULL,
`id_sekce` int(5) NOT NULL,
KEY `fk_id_clanku` (`id_clanku`),
KEY `fk_id_sekce` (`id_sekce`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_czech_ci;
Nyní na tabulce clanky_join_sekce vytvoříme potřebné cizí klíče pro políčka id_sekce a id_clanku.
ALTER TABLE `clanky_join_sekce`
ADD CONSTRAINT `fk_id_sekce`
FOREIGN KEY(`id_sekce`) REFERENCES sekce(id)
ON UPDATE CASCADE ON DELETE RESTRICT;
ALTER TABLE `clanky_join_sekce`
ADD CONSTRAINT `fk_id_clanku`
FOREIGN KEY(`id_clanku`) REFERENCES clanky(id)
ON UPDATE CASCADE ON DELETE CASCADE;
Samotný význam cizích klíčů nemá za úkol usnadnit práci vývojářům při manipulaci s daty, ale udržet data ve správné formě. Vlastnosti pro UPDATE a DELETE pro cizí klíče jsou následující:
- CASCADE – provede změny ve sloupci podle změny v referenčním sloupci
- RESTRICT – znemožní upravit či smazat data
- SET NULL – při nastaveni referenčního sloupce na NULL či smazání, nastaví se sloupec cizího klíče na NULL (zde samozřejmě je třeba, aby cizí klíč měl možnost obsahovat NULL)
Nyní naplníme tabulky jednoduchými daty a ukážeme si význam vlastnosti ON UPDATE a ON DELETE při manipulacemi s daty.
INSERT INTO `clanky` ( `id` , `title` ) VALUES (NULL , 'První článek');
INSERT INTO `clanky` ( `id` , `title` ) VALUES (NULL , 'Druhý článek');
INSERT INTO `clanky` ( `id` , `title` ) VALUES (NULL , 'Třetí článek');
INSERT INTO `sekce` ( `id` , `title` ) VALUES (NULL , 'Sekce 1');
INSERT INTO `sekce` ( `id` , `title` ) VALUES (NULL , 'Sekce 2');
INSERT INTO `sekce` ( `id` , `title` ) VALUES (NULL , 'Sekce 3');
Naplníme propojení mezi články a sekcemi v tabulce clanky_join_sekce.
INSERT INTO `clanky_join_sekce` ( `id_clanku` , `id_sekce` ) VALUES ('1', '1');
INSERT INTO `clanky_join_sekce` ( `id_clanku` , `id_sekce` ) VALUES ('1', '2');
INSERT INTO `clanky_join_sekce` ( `id_clanku` , `id_sekce` ) VALUES ('2', '2');
Nyní máme naplněnou strukturu základními daty. Teďka si ukážeme k čemu vůbec cizí klíče slouží!? Zkuste si vložit do tabulky clanky_join_sekce id_clanku = 5 a id_sekce = 3. Databázový systém Vám vrátí chybu ve znění: Nepovedlo se vložit nebo změnit řádek, cizí klíč selhal! Toto vzniklo kvůli tomu, že jste vkládali id_clanku, které není v tabulce clanky! To je jedno ze základních výhod cizích klíčů.
Další výhodou je to, že když budete používat pro UPDATE a DELETE vlastnost CASCADE tak se Vám při změně klíče v referenční tabulce změní i cizí klíč v ostatních tabulkách.
Příklad: UPDATE `clanky` SET `id` = '4' WHERE `id` = 1;
Když si vypíšete tabulku clanky_join_sekce uvidíte následující
| id_clanku | id_sekce |
|---|---|
| 4 | 1 |
| 4 | 2 |
| 2 | 3 |
Další nesporná výhoda je ta, že pokud budu chtít smazat nějakou sekci, která má uvedené své ID v tabulce clanky_join_sekce, tak mi opět databázový systém zahlásí chybu, protože jsme pro akci ON DELETE nastavily RESTRICT.
Toto je podle mě velká výhoda, vemte si že byste měli objednávku a v ní uživatele, teďka byste smazali uživatele a v životě už byste se nedozvěděli pro koho ta objednávka byla určená!
Tato vlastnost se dá obejít v případě nastavení ON DELETE na CASCADE (to by se ale i objednávka smazala) nebo nastavením na SET NULL (ovšem musí být možné aby se v tabulce, kde se nacházel cizí klíč mohla vyskytnout hodnota NULL).
Jak vidíte cizí klíče jsou nespornou výhodou při návrhu tabulek. Správný SQL developer cizí klíče používá a snaží se je cpát všude tam kam jdou.
WYSIWYG editor TinyMCE - konfigurace
Před čtením tohoto článku doporučuji si přečíst základní informace o TinyMCE a jeho instalaci. TinyMCE je velice mocný nástroj pro psaní, formátování textů a obrázků v internetových aplikací. Jeho nesporná výhoda spočívá v mnoha nastaveních a řadě vlastností, které lze přirovnat k aplikacím typu MS Word, ... V dnešní části o TinyMCE si ukážeme jak docílit toho aby TinyMCE tvořil text vážně jako WYSIWYG (What you see is what you get) a né jako WYSIWYNG (What you see is what you never get). Aby výsledný kód byl jednoduchý, přehledný a neobsahoval přebytečné tagy, které do něj nepatří. Hlavním přínosem tohoto článku je aby výsledný dokument vytvořený v TinyMCE byl plně XHTML validní.
TinyMCE - základní nastavení
| Vlastnost | Hodnota | Popis |
|---|---|---|
| theme | advanced | mód editoru |
| language | cs | volba jazyka |
| mode | textareas/specific_textareas | první hodnota znamná, že se TinyMCE bude načítat do všech textarea elementů / druhá, že se bude načítat jen do přesně definovaných elementu s class= |
| editor_selector | název třídy | TinyMCE se bude načítat do předem definovaných textarea elementů |
| button_tile_map | true | rychlejší načítání obrázků pro jednotlivé příkazy WYSIWYGu |
| theme_advanced_toolbar_location | top/bottom/external | definuje kde se má načíst lišta s nástroji |
| plugins | názvy | zde se definuje, jaké plaginy se mají načíst |
| content_css | cesta k externímu CSS souboru | načte externí CSS soubor |
| verify_html | true | umožní vyčištění textu od přebytečných elementů |
| valid_elements | více zde | zde se definuje jaké elementy s jakými atributy jsou povolené ve výsledném textu |
| theme_advanced_statusbar_location | bottom | tento parametr je vhodný při velkém zanořování textu, při najetí na text se přehledně zobrazí jeho zanoření (v jakých HTML elemtech se nachází) |
| theme_advanced_blockformats | p,div,h1,h2,h3,h4,h5,h6,pre | blokové elementy v nabídce FORMAT |
| width | px | šířka editoru v pixelech |
| height | px | výška elementu v pixelech |
| entity_encoding | raw | bude překládat pouze speciální znaky na entity |
| apply_source_formatting | true | naformátuje výsledný HTML kód do přehledné podoby |
| další vlastnosti | a jejich nastavení | naleznete zde! |
TinyMCE - plně XHTML validní výstup
Pro plně validní XHTML výstup z WYSIWYG editoru TinyMCE se v nastavení editoru uvádí vlastnost valid_elements. Do ní vložte následující text!
a[accesskey|charset|class|coords|dir<ltr?rtl|href|hreflang|id|lang|name +|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|rel|rev +|shape<circle?default?poly?rect|style|tabindex|title|target|type], +abbr[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +acronym[class|dir<ltr?rtl|id|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +address[class|align|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +applet[align<bottom?left?middle?right?top|alt|archive|class|code|codebase +|height|hspace|id|name|object|style|title|vspace|width], +area[accesskey|alt|class|coords|dir<ltr?rtl|href|id|lang|nohref<nohref +|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup +|shape<circle?default?poly?rect|style|tabindex|title|target], +base[href|target], +basefont[color|face|id|size], +bdo[class|dir<ltr?rtl|id|lang|style|title], +big[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +blockquote[dir|style|cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick +|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout +|onmouseover|onmouseup|style|title], +body[alink|background|bgcolor|class|dir<ltr?rtl|id|lang|link|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onload|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|onunload|style|title|text|vlink], +br[class|clear<all?left?none?right|id|style|title], +button[accesskey|class|dir<ltr?rtl|disabled<disabled|id|lang|name|onblur +|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|style|tabindex|title|type +|value], +caption[align<bottom?left?right?top|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +center[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +cite[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +code[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +col[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id +|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|span|style|title +|valign<baseline?bottom?middle?top|width], +colgroup[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl +|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|span|style|title +|valign<baseline?bottom?middle?top|width], +dd[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title], +del[cite|class|datetime|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +dfn[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +dir[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +div[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +dl[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +dt[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title], +em/i[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +fieldset[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +font[class|color|dir<ltr?rtl|face|id|lang|size|style|title], +form[accept|accept-charset|action|class|dir<ltr?rtl|enctype|id|lang +|method<get?post|name|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onreset|onsubmit +|style|title|target], +frame[class|frameborder|id|longdesc|marginheight|marginwidth|name +|noresize<noresize|scrolling<auto?no?yes|src|style|title], +frameset[class|cols|id|onload|onunload|rows|style|title], +h1[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +h2[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +h3[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +h4[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +h5[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +h6[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +head[dir<ltr?rtl|lang|profile], +hr[align<center?left?right|class|dir<ltr?rtl|id|lang|noshade<noshade|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|size|style|title|width], +html[dir<ltr?rtl|lang|version], +iframe[align<bottom?left?middle?right?top|class|frameborder|height|id +|longdesc|marginheight|marginwidth|name|scrolling<auto?no?yes|src|style +|title|width], +img[align<bottom?left?middle?right?top|alt|border|class|dir<ltr?rtl|height +|hspace|id|ismap<ismap|lang|longdesc|name|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|src|style|title|usemap|vspace|width], +input[accept|accesskey|align<bottom?left?middle?right?top|alt +|checked<checked|class|dir<ltr?rtl|disabled<disabled|id|ismap<ismap|lang +|maxlength|name|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect +|readonly<readonly|size|src|style|tabindex|title +|type<button?checkbox?file?hidden?image?password?radio?reset?submit?text +|usemap|value], +ins[cite|class|datetime|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +isindex[class|dir<ltr?rtl|id|lang|prompt|style|title], +kbd[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +label[accesskey|class|dir<ltr?rtl|for|id|lang|onblur|onclick|ondblclick +|onfocus|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout +|onmouseover|onmouseup|style|title], +legend[align<bottom?left?right?top|accesskey|class|dir<ltr?rtl|id|lang +|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +li[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title|type +|value], +link[charset|class|dir<ltr?rtl|href|hreflang|id|lang|media|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|rel|rev|style|title|target|type], +map[class|dir<ltr?rtl|id|lang|name|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +menu[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +meta[content|dir<ltr?rtl|http-equiv|lang|name|scheme], +noframes[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +noscript[class|dir<ltr?rtl|id|lang|style|title], +object[align<bottom?left?middle?right?top|archive|border|class|classid +|codebase|codetype|data|declare|dir<ltr?rtl|height|hspace|id|lang|name +|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|standby|style|tabindex|title|type|usemap +|vspace|width], +ol[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|start|style|title|type], +optgroup[class|dir<ltr?rtl|disabled<disabled|id|label|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +option[class|dir<ltr?rtl|disabled<disabled|id|label|lang|onclick|ondblclick +|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout +|onmouseover|onmouseup|selected<selected|style|title|value], +p[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|style|title], +param[id|name|type|value|valuetype<DATA?OBJECT?REF], +pre/listing/plaintext/xmp[align|class|dir<ltr?rtl|id|lang|onclick|ondblclick +|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout +|onmouseover|onmouseup|style|title|width], +q[cite|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +s[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title], +samp[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +script[charset|defer|language|src|type], +select[class|dir<ltr?rtl|disabled<disabled|id|lang|multiple<multiple|name +|onblur|onchange|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|size|style +|tabindex|title], +small[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +span[align<center?justify?left?right|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +strike[class|class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title], +strong/b[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +style[dir<ltr?rtl|lang|media|title|type], +sub[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +sup[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title], +table[align<center?left?right|bgcolor|border|cellpadding|cellspacing|class +|dir<ltr?rtl|frame|height|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|rules +|style|summary|title|width], +tbody[align<center?char?justify?left?right|char|class|charoff|dir<ltr?rtl|id +|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|style|title +|valign<baseline?bottom?middle?top], +td[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class +|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|rowspan|scope<col?colgroup?row?rowgroup +|style|title|valign<baseline?bottom?middle?top|width], +textarea[accesskey|class|cols|dir<ltr?rtl|disabled<disabled|id|lang|name +|onblur|onclick|ondblclick|onfocus|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|onselect +|readonly<readonly|rows|style|tabindex|title], +tfoot[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id +|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|style|title +|valign<baseline?bottom?middle?top], +th[abbr|align<center?char?justify?left?right|axis|bgcolor|char|charoff|class +|colspan|dir<ltr?rtl|headers|height|id|lang|nowrap<nowrap|onclick +|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown|onmousemove +|onmouseout|onmouseover|onmouseup|rowspan|scope<col?colgroup?row?rowgroup +|style|title|valign<baseline?bottom?middle?top|width], +thead[align<center?char?justify?left?right|char|charoff|class|dir<ltr?rtl|id +|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup|onmousedown +|onmousemove|onmouseout|onmouseover|onmouseup|style|title +|valign<baseline?bottom?middle?top], +title[dir<ltr?rtl|lang], +tr[abbr|align<center?char?justify?left?right|bgcolor|char|charoff|class +|rowspan|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title|valign<baseline?bottom?middle?top], +tt[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title], +u[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress|onkeyup +|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style|title], +ul[class|compact<compact|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown +|onkeypress|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover +|onmouseup|style|title|type], +var[class|dir<ltr?rtl|id|lang|onclick|ondblclick|onkeydown|onkeypress +|onkeyup|onmousedown|onmousemove|onmouseout|onmouseover|onmouseup|style +|title]
WYSIWYG editor TinyMCE
Už skoro rok používám tento vynikající WYSIWYG editor. Proto jsem se rozhodl se se všemi čtenáři blogu podělit o moje zkušenosti s tímto editorem. V plánu je pár zajímavých článků o tomto editoru. Dneska se pokusím vysvětlit co to je WYSIWYG editor a integraci TinyMCE do HTML.
WYSIWYG je zkratka, která označuje způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu.
Nejčastěji se jako WYSIWYG označují některé textové procesory, ve kterých se editovaný text zobrazuje tak, jak bude vytištěn na papír. Kvůli obtížnosti tohoto úkolu dochází ovšem často k drobným chybám, kdy uživatel „nedostane, co vidí. Příkladem editorů pracujících v režimu WYSIWYG je např. Microsoft Word či Open Office.org Writer nebo WYSIWYG editory WWW stránek.
WYSIWYG při tvorbě webu
Praxe je taková, že pro většinu klientů bývají WYSIWYG editory lepší volbou, než marná snaha o pochopení značek HTML. WYSIWYG editory si s sebou nesou určité břímě, v podobě častých chyb ve výsledném značkovacím kódu, a to jak z hlediska syntaxe, tak sémantiky.
Tvůrce nebo implementátor redakčního systému by v případě WYSIWYG editorů měl myslet především na dva důležité body:
- Vybrat pro implementaci vhodný WYSIWYG editor (o tomto problému budu psát někdy příště).
- Případně omezit možnosti WYSIWYG editoru, aby v něm měl uživatel pouze vybrané formátovací možnosti, které omezí jeho přílišnou kreativitu (také příště).
Dnes se zaměřuji na WYSIWYG editor TinyMCE o kterém se budu na tomto webu párkrát zmiňovat. TinyMCE patří mezi ty lepší editory, tzn. mezi ty, kteří se snaží dodržovat určité standardy (XHTML).
V první řadě si musíte stáhnout editor TinyMCE ze jeho oficiálních stránek http://tinymce.moxiecode.com. Postupně si stáhněte editor a češtinu, ta se označuje jako CS. Po stažení rozbalte TinyMCE a češtinu do složky.
Proto aby se správně TinyMCE integroval do HTML stránky je potřeba udělat pár jednoduchých kroků.
- vytvořit HTML objekt textarea,
- načíst TinyMCE,
- nakonfigurovat ho.
Nyní je potřeba si spustit nějaký editor textu (PSPad, notepad) ve kterém budete psát HTML kód. Ve složce, kde je rozbalený WYSIWYG editor TinyMCE, vytvořte index.html. Ten si poté spusťte v editoru textu. Vytvářený HTML kód bude hodně jednoduchý (nebereme zde v úvahu hlavičky a další potřebné tagy).
<html> <body> <textarea></textarea> </body> </html>
Soubor uložíme a otevřeme ve webovém prohlížeči (Internet Explorer, Firefox, Opera, ...). V prohlížeči vidíme vytvořené pole pro psaní textu (Tag textarea). Tím máme první krok hotový.
Teďka přejdeme na druhý krok - načteme TinyMCE do námi vytvořeného souboru. K dosavadnímu textu přidáme:
<html> <head> <script language=javascript type=text/javascript src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script> </head>
Celý text bude vypadat takto:
<html> <head> <script language=javascript type=text/javascript src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script> </head> <body> <textarea></textarea> </body> </html>
Když soubor uložíme a podíváme se na výsledek ve webovém prohlížeči uvidíme že se nic nestalo. Přesto máme krok 2 hotový.
Krokem 3 je konfigurace TinyMCE (zde je možné nastavovat nespočet důležitých i naprosto zbytečných parametrů). My si dneska ukážeme jen to nejdůležitější!
K dosavadnímu textu přidáme:
<script language=javascript type=text/javascript>
tinyMCE.init(
{ mode : textareas, language : cs });
</script>
Celý text bude vypadat takto:
<html>
<head>
<script language=javascript type=text/javascript
src=./tinymce/jscripts/tiny_mce/tiny_mce.js></script>
<script language=javascript type=text/javascript>
tinyMCE.init({
mode : textareas, language : cs
});
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>>
Soubor uložíme a obnovíme webový prohlížeč. Pokud došlo ke změně - gratuluji! Nyní vidíte WYSIWYG editor TinyMCE v jeho základním zobrazení.
Některé texty převzaty z http://blog.h1.cz/qa-jaky-pouzit-wysiwyg-editor/
Bez čeho se nedokážu obejít při vývoji
V tomto článku bych Vám chtěl blíže popsat bez jakých nástrojů se nedokážu v mé práci obejít. Jak mnozí vědí, živím se jako PHP/SQL developer senior.
První věcí, bez které nelze programovat je webový server. V mém případě jasně vítězí server od Apache Group Apache 2. Podle mě je tento server lepší než konkurenční IIS. IIS je sice standardně k dispozici na instalačním CD Windows XP ale pro funkci WWW serveru se dá použít jen s maximálním přístupem pěti lidí najednou (jen ta verze co je na CD).
Druhou službou je samozřejmě samotné PHP. Osobně používám jak PHP 4 tak i PHP 5. Je to z důvodu, že PHP 5 si se staršími projekty neví rady – PHP 5 je bohužel zpětně nekompatibilní s PHP 4 a nižšími.
Mezi třetí patří databázový server. Osobně mi bohatě postačuje MySQL databázový server. Opět používám verzi 4 i 5. Je tomu jako v předešlém případě. I když bych přesně doslova o zpětné kompatibilitě nemluvil – spíše je to o návrhu databáze.
Čtvrtou a podstatnou věcí je nástroj, ve kterém vyvíjet projekty – psát kód. Když se zaměříme na PHP je spousta známých pracovních prostředí jako je PSPad, PDT Eclipse, JEdit, … Osobně používám PSPad (ten spíše na menší projekty) a PDT Eclipse pro plnohodnotný, rychlý a přehledný vývoj větších projektů (zde je ale potřeba mít větší operační paměť, není totiž nic nezvyklého, že si PDT vezme i 400MB).
Pro vývoj v SQL, resp. v MySQL používám standardní PHP projekt PHPMyAdmin (o kterém se již dlouho mluví jako o velice špatně napsaném projektu) – musím ale podotknout, že na spoustu základních prací s databází bohatě vyhovuje. Lepším se spoustou funkcí je SQL Manager Lite for MySQL, který jsem začal používat v poslední době, zatím si ho nemůžu vynachválit. Jen pro zajímavost: Včera jsem se snažil importovat 19MB databázi. Přes PHPMyAdmin (zkoušeno ve Firefoxu a v IE) jsem cca. po 10minutách, kdy byl procesor využit na 100%, paměť byla přibližně okolo 1.2GB, natvrdo vypínal prohlížeče. Teprve až SQL Manager Lite for MySQL dokázal během minuty importovat celý obsah 19MB databáze.
Pokud pracujete v týmu je dobré si uvědomit důležitost vašeho kódu. Kdokoli z týmu můžu smazat/přepsat váš nově vytvořený kód. Bohužel se to dost často stává. Proto je velice dobré používat různé nástroje pro týmovou práci. Tyto nástroje se vyznačují tím, že na serveru je nainstalovaná služba nebo démon (ano je to pro Linux i Windows), která má na starosti zdrojové kódy celého projektu. Vy pomocí např. TortoiseSVN můžete jednoduše nahrát vaše změny ve zdrojovém kódu na tento server, přidat poznámku co konkrétního se změnilo. Vaši kolegové u sebe v počítači načnou obsah projektu ze serveru a vidí, které soubory se změnily, případně i vaší poznámku. Samozřejmě to má i spoustu dalších výhod.
Závěrem shrnu nástroje, které používám:
- Apache 2
- PHP 4,5
- MySQL 4,5
- PSPad, PDT Elipse
- PHPMyAdmin, SQL Manager Lite for MySQL
- TortoiseSVN
Efektivní vývoj v PHP
Cílem tohoto článku je ukázat začínajícím programátorům i zkušeným vývojářům v PHP jak co nejefektivněji a nejrychleji vyvýjet PHP kód. Na toto téma jsem se zaměřil hlavně ze tří důvodu:
- 1, rychlejší práce
- 2, přehlednost
- 3, jednoduchá dokumentace
Jak lze v PHP efektivně programovat
Nevěříte? Věřte mi, že to lze! Stačí k tomu alespoň trochu umět programovací jazyk PHP, phpDoc a mýt k dispozici nástroj zvaný IDE. Mezi skvělé IDE programy patří PHP Development Tool (PDT) Eclipse. Tento nástroj lze zdarma získat na adrese www.eclipse.org.
Jak docílíme efektovnosti
Pomocí komentování kódu je možné s PHP pracovat jako s jinými programovacími jazyky. Myslím, že vše nejlépe vystihne následující příklad: obsah articles.class.php
/**
* Trida pro praci se sekcemi
* Dedeni od moduleBase
* @author HarvyM
* @version 1.1
* @todo dodelat funkci pro zmenu pocasi
*/
class articles extends moduleBase {
/** pomocne pole
* @var []
*/
var $temparr;
/**
* vrati pole novinek omezenych podle vstupniho parametru $count_news
* @param int $count_news
* @param char $section_name
* @return false OR articles[]
*/
function getArticleNews($count_news, $section_name) {
}
obsah index.phpobsah index.phprequire_once(articles.class.php); $article = new articles(); $article->getArticleNews(5,novinky);
Výpis tříd
Výpis proměnných
Celkové informace o metodě
Seznam tagů:
| abstract | metoda, atribut nebo třída je abstraktní |
| access | označení elementu jako public, private nebo protected |
| author | jméno případně e-mail autora |
| category | sdružuje několik balíků do stejné kategorie |
| copyright | informace o právech ke kopírování |
| global | označení globální proměnné nebo popis jejího použití ve funkci |
| license | odkaz na popis licenčních podmínek |
| name | změní jméno globální proměnné uvedené v dokumentaci |
| package | označení příslušnosti elementu k balíku |
| param | seznam parametrů popisované funkce |
| return | popis návratové hodnoty funkce |
| since | verze nebo informace od kdy existuje daný element |
| static | metoda nebo třída je statická |
| staticvar | popis staticky deklarovaných proměnných ve funkci |
| subpackage | označení příslušnosti elementu k subbalíku |
| todo | informuje, co se má v souboru nebo v elementu dodělat |
| uses | seznam použitých elementů v těle popisovaného elementu |
| var | popis atributů třídy |
| version | verze elementu v libovolném formátu |
Pro více informací doporučuji:Jak na dokumentaci php kódu
Další projekt hotov
Tak už asi týden jede na internetových stránkách http://www.mcomp.cz můj nový projekt! Jedná se o internetový obchod s repasovanými počítači, notebooky, monitory, tiskárnami, komponenty.