Tagboard Template Class

Transkript

1 Tagboard Template Class Skrevet af Daniel Pedersen Tagboard Template Class Skrevet af Daniel Pedersen Side 1 af 22

2 Indholdsfortegnelse 1.0 INDLEDNING SYSTEM DESIGN INDIVIDUEL SYSTEM DESIGN FORKLARING: INDEX: CLASS: DOCUMENTTPL.PHP...4 function documenttpl ($path)...4 function settitle ($title)...5 function setcontent ($content)...5 function setcss ($css)...5 function create ()...5 Globale Variabler: CLASS: TAGBOARD_CLASS.PHP...6 function tagboard($path)...6 function close_mysql()...6 function mysql_connect_selectdb($host,$user,$password,$database)...6 function query_mysql($sql)...6 function add_post($post,$name)...6 function import_tagboard()...6 function set_box_style($css_class)...6 function show()...6 Globale Variabler: TEMPLATE:...7 tagboard_skapelon.tpl...7 skapelon.tpl CSS: DATABASE DESIGN FILSTRUKTUR KILDEKODE INDEX.PHP TAGBOARD_CLASS.PHP DOCUMENTTPL_CLASS.PHP TAGBOARD_SKAPELON.TPL SKAPELON.TPL TAGBOARD_STYLE.CSS...22 Tagboard Template Class Skrevet af Daniel Pedersen Side 2 af 22

3 1.0 Indledning Guiden går ikke i dybden med de forskellige funktioner, eller design valg som der bliver gennemgået. Denne guide fortæller om en preprogrammeret Tagboard Template Class, som kan udskrive et Tagboard, med mulighed for at indsætte et stykke tekst, med sit navn og tilhørende dato. Der vil her og der være små hint s til hvad der kunne være spændende at tilføje til Tagboadet. Det skal dog siges at i punkt 5 er der visse kildekodeunderpunkter som kan virke forvirrendende, pga kodens bredde. Sprøg instruktøren efter en kopi af filerne på en diskette ect... Tagboard Template Class Skrevet af Daniel Pedersen Side 3 af 22

4 2.0 System design Her kan du læse om hvordan systemet er sat sammen fra bund til top. På billedet (Fig 1) nedenunder ses infrastrukturen i 4 trin. Du kan læse om de individuelle trin i punkt 2.1. Fig Individuel System Design forklaring: I punkt 5 (kildekode) kan du se alle filers indhold Index: 1). index.php Alt bliver samlet her til en hjemmeside. Klasserne bliver inkluderet til index siden, objekterne bliver kaldt, og de forskellige tamplates bliver loadet med css stylesheet Class: documenttpl.php Denne klasse styre template området, nedenunder ses en liste over de funktioner/variabler, som documenttpl.php indeholder. function documenttpl ($path) Dette er Constructor en!!! $path variablen bestemmer hvor template filen skal loades fra. Template s er også det samme som en skapelon. Du kan manipulere med en skapelon, indesætte tabeller med database udtræk, eller en ftp client osv. Tagboard Template Class Skrevet af Daniel Pedersen Side 4 af 22

5 function settitle ($title) $title variablen bestemmer hvad titlen skal være. Funktionen sætter titlen på den valgte side. function setcontent ($content) $content variablen bestemmer hvad indholdet skal være. Funktionen indsætter holdet på den valgte side. function setcss ($css) $css variablen bestemmer stien til stylesheet et. Funktionen indsætter en HTML streng hvor stylesheet stien står i. function create () Funktionen retunere den globale variablen $template, som indeholder en manipuleret version af den template fil, der blev loadet af Constructoren, når klassen blev initiliseret. Funktionen har intet input. Globale Variabler: Var $template Dette er (documenttpl.php) klassens eneste globale variabel, som indeholder en manipuleret version af skapelon.tpl. Tagboard Template Class Skrevet af Daniel Pedersen Side 5 af 22

6 Class: tagboard_class.php Denne klasse indeholder et Tagboard, nedenunder ses en liste over de funktioner/variabler, som tagboard_class.php indeholder. function tagboard($path) Dette er Constructor en!!! Denne funktion loader $path som indeholder den sti hvor tagboard_skapelon.tpl ligger. function close_mysql() Funktion lukker klassens MYSQL forbindelse, som hentes fra variablen $con. function mysql_connect_selectdb($host,$user,$password,$database) Denne funktionen opretter forbindelse til en MYSQL server, og vælger en database. Eks. mysql_connect_selectdb( localhost, root, my_root_pasword, ansatte_databasen ) function query_mysql($sql) Funktionen udføre en SQL sætning, som fås fra variablen $sql. function add_post($post,$name) Denne function tilføjer et nyt TAG til Tagboardet, hvor $post er Tag teksten, og $name er brugernavnet. function import_tagboard() Denne funktion importere Taboardet i $template variablen, med de rette HTML tag s, og database udtræk. function set_box_style($css_class) Denne funktion kan ændre css stylesheet et til Tagboardet Box, hvor variablen $css_class indeholder style klassens navn. Selve Taboardet er indkapslet i <div> tag s. function show() Funktionen retunere den globale variablen $template, som indeholder en manipuleret version af den template fil, der blev loadet af Constructoren, når klassen blev initiliseret. Funktionen har intet input. Globale Variabler: var $template Denne variable indeholder en manipuleret version af tagboard_skapelon.tpl. var $con Denne variabel indeholder en MYSQL forbindelse. Tagboard Template Class Skrevet af Daniel Pedersen Side 6 af 22

7 2.1.2 Template: I dette punkt kan du se og læse om de forskellige template s, i en mere detaljeret udgave. tagboard_skapelon.tpl På næste side kan du se en rå udskrift af tagboard_skapelon.tpl filen. Denne template er til Tagboardet, med en Token der bliver udskiftet med $template variablen fra tagboard_class.php, som bliver udført af funktionen show(). Tagboard skapelonen s Token ser sådan her ud: {tagboard Hvis denne Token ikke blev udskiftet med variablen $template fra tagboard_class.php, så ville resultatet vise dette. Se Fig 2. Fig 2. Som ses på Fig 2. er {tagboard Token en ikke blevet udskiftet, denne udskrift kan udgåes ved at programere en funktionen som fjernet ikke brugte Token s. Det kan du f.eks selv programmere til klassen, som en øvelse, gør du det så se tagboard_class.php filen. Man kunne også sige at det er en mangel i tagboard_class.php. Tagboard Template Class Skrevet af Daniel Pedersen Side 7 af 22

8 Her kan du se hvordan Tagboardet ser ud, når alt virker 100 %, Se Fig 3. Fig 3. En kort beskrivelse af de enkelte elementer og tekstfelter. 1). Tag Text (Max 50 char s) Her skriver du den besked, som du vil ud med på internettet. Der vises ikke nedtælling, det kunne være en opgave at tage sig til. Hvis du vælger at gøre dette, kunne løsningen være Javascript. 2). Your Name (Max 30 char s) Her skriver du dit navn, men husk kun 30 bogstaver. Der vises ikke nedtælling, dette kunne også være en lille opgave. 3).Add Tag Dette er en knap, som indsætter hvad som står i Tag Text og Your name felterne. 4). Message 5). Author 6). Time Created Beskeden Initialer måned/dag/år timer/minutter/sekunder Tagboard Template Class Skrevet af Daniel Pedersen Side 8 af 22

9 Her vises en rå udskrift af tagboard_skapelon.tpl filen. <div class="tagboard_style"> <form method="post" action="index.php"> <table class="tagboard_style"> <tr> <td> <p class="center">tagboard 2004</p> </td> </tr> <tr> <td> Tag Text (Max 50 char s)<br/> <textarea wrap="hard" name="tag_text"></textarea> </td> </tr> <tr> <td> Your name(max 30 char s)<br> <input maxlength="30" type="text" name="name"> </td> </tr> <tr> <td> <input type="submit" value="add Tag"> </td> </tr> </table> </form> {tagboard </div> Tagboard Template Class Skrevet af Daniel Pedersen Side 9 af 22

10 skapelon.tpl Denne template er selve hovede HTML siden, hvor alt bliver samlet til en 100 % færdig side, som viser et Tagboard. Den har 3 Token s {sitetitle, {css, {sitecontent, som alle bliver udskiftet med forskelligt HTML, fra documenttpl_class.php filen. Funktionen setcss($css) udskifter {css. Funktionen setcontent($content) udskifter {sitecontent. Funktionen settitle($title) udskifter {sitetitle. Hvis ingen af Token sene blev udskiftet, ville resultatet se sådanne ud. Se Fig 4. Fig 4. <html> <head> <title>{sitetitle</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> {css </head> <body> {sitecontent </body> </html> Tagboard Template Class Skrevet af Daniel Pedersen Side 10 af 22

11 2.1.3 CSS: I dette punkt kan du se og læse om stylesheet et. Pga. størelsen af stylesheet et er den rå udskrift på næste side. En ting som er god at vide når man arbejder med *.css dokumenter, er hvad som automatisk bliver sat fra stylesheet et, og hvad man selv skal kalde/referere til. I en *.css fil opretter man klasser, som har visse tag s som beskriver farver, størelser, bredde, højde osv. Hvis en klasse er skrevet således, med et punktom foran klasse navnet, betyder det at du selv skal kalde klasse, for at få dens opsætning..min_css_class { text-align:center; Men hvis en klasse er skrevet således, uden punktom foran klassens navn, så betyder det at dens opsætning automatisk bliver indstillet. Text_farve { Color:#CAFE12; Du kommer til at se dette på et tidpunkt hvis du kigger stylesheet et igennem. Når der står h1, h2, betyder det bare at <h1> og <h2> tagget har farven i HEX code # h1, h2 { color: #663300; Tagboard Template Class Skrevet af Daniel Pedersen Side 11 af 22

12 Her vises en rå udskrift af tagboard_style.css dokumentet. input { border:1px solid inline; textarea { border:1px solid inline; body, td, th { color: #000000; h1, h2 { color: #663300; h3, h4, h5, h6 { color: #996633; a { color: #336600;.tagboard_style { border-width: 1px 1px 1px; border-style: solid; border-color: #99abcd; width:500px; background-color:#99abcd;.tags_style { border-width: 0px 1px 1px; border-style: solid; border-color: #7789ab; width:500px;.center { text-align:center; Tagboard Template Class Skrevet af Daniel Pedersen Side 12 af 22

13 3.0 Database design Nedenunder kan vises de SQL sætninger, og tabeller som beskriver databasen. CREATE DATABASE `tags` Denne SQL sætning opretter en database ved navn tags. CREATE TABLE tags ( tag_text varchar(50) NOT NULL default '', name varchar(30) NOT NULL default '', date varchar(30) NOT NULL default '', PRIMARY KEY (tag_text,name) ) TYPE=MyISAM; Her opretter vi selve tabellen som al data skal ligge i. Tabelbillede: Fig 5. Tag_text Kan indeholde 50 tegn Name Kan indeholde 30 tegn Data Kan indeholde 30 tegn Tagboard Template Class Skrevet af Daniel Pedersen Side 13 af 22

14 4.0 Filstruktur Denne guide er skrevet udfra at alt indhold ligger fordelt i mapper således: tagboard class (Hovede mappen) documenttpl.php index.php tagboard_class.php documenttpl_class.php skapeloner (Mappe i hovedemappen) skapelon.tpl tagboard_skapelon.tpl style (Mappe i hovedemappen) tagboard_style.css Tagboard Template Class Skrevet af Daniel Pedersen Side 14 af 22

15 5.0 Kildekode 5.1 index.php 1. <?php 2. # WRITTEN BY DANIEL PEDERSEN # INCLUDE THE *.PHP FILES TO THE SITE 4. require 'documenttpl_class.php'; 5. require 'tagboard_class.php'; 6. # SET CSS STYLESHEET 7. $css_style = "<link href='style/tagboard_style.css' rel='stylesheet' type='text/css'>"; 8. # CLASS INITIATION 9. $document = new documenttpl("skapeloner\\"); 10. $tagboard = new tagboard("skapeloner\\"); 11. $tagboard->mysql_connect_selectdb("localhost","root","","tagboard"); 12. # CHECK IF A NEW TAG IS POSTED 13. if(isset($_post["name"]) && $_POST["name"] && $_POST["tag_text"]) { i. $tagboard->add_post($_post["tag_text"],$_post["name"]); # IMPORT TAGBOARD (NEED MYSQL CONNECTION) 16. $tagboard->import_tagboard(); 17. # USE OF CLASS FUNCTIONS 18. $document->settitle("tagboard Test Site"); 19. $document->setcontent($tagboard->show()); 20. $document->setcss($css_style); 21. # CLOSE THE MYSQL CONNECTION 22. $tagboard->close_mysql(); 23. # EXIT THIS DOCUMENT AND SHOW THE SITE 24. exit($document->create()); 25.?> Tagboard Template Class Skrevet af Daniel Pedersen Side 15 af 22

16 5.2 tagboard_class.php 1. <?php 2. ##### TAGBOARD TEMPLATE CLASS ########### 3. # WRITTEN BY DANIEL PEDERSEN # TAGBOARD 2004 FOR SMALL MESSAGES 5. # 6. # 7. # CLASS FUNCTION LIST 8. # # tagboard CLASS CONSTRUCTOR 10. # close_mysql CLOSE CLASS MYSQL CONNECTION 11. # mysql_connect_selectdb OPEN A MYSQL CONNECTION AND SELECT A DATABASE 12. # query_mysql EXECUTE A MYSQL QUERY 13. # add_post ADD A POST TO THE TAGBOARD 14. # import_tagboard IMPORTS THE TAGBOARD INTO THE $TEMPLATE VARIABEL 15. # set_box_style SET TAGBOARD BOX STYLE 16. # show RETURN TAGBOARD TEMPLATE. TO SHOW TYPE : EXIT($TAGBOARD->SHOW()); 17. # 18. # CLASS GLOBAL VARIABLES 19. # # template HOLD THE TAGBOARD TEMPLATE 21. # con HOLD THE MYSQL CONNECTION 22. ############################################################## 23. class tagboard { 24. # CLASS GLOBAL VARIBLES 25. var $template; 26. var $con; 27. #FUNCTION tagboard function tagboard($path) { i. $this->template=file_get_contents ($path.'tagboard_skapelon.tpl'); Tagboard Template Class Skrevet af Daniel Pedersen Side 16 af 22

17 #FUNCTION close_mysql function close_mysql() { i. mysql_close($this->con); #FUNCTION mysql_connect_selectdb function mysql_connect_selectdb($host,$user,$password,$database) { i. $this->con = mysql_connect("localhost","root","") or die("could not connect: ". mysql_error()); ii. mysql_select_db("tagboard")or die ('Can\'t use database : '. mysql_error()); #FUNCTION query_mysql function query_mysql($sql) { i. $result = mysql_query($sql) or die("query error!"); ii. while($row[] = mysql_fetch_assoc($result)); iii. mysql_free_result($result); iv. array_pop( $row ); v. return $row; #FUNCTION add_post function add_post($post,$name) { i. $tiden = strftime('%c'); ii. mysql_query("insert INTO tags (tag_text,name,date) VALUES ('".$post."','".$_post['name']."','".$tiden."')"); #FUNCTION import_tagboard function import_tagboard() { i. $tagboard = "<table class='tags_style'><td>message</td><td>author</td><td>time Created</td>"; ii. $return_val = $this->query_mysql("select tag_text,name,date FROM tags"); iii. foreach($return_val as $currentrow ) { 1. $cells = implode("</td><td class='tags_style'>", $currentrow); Tagboard Template Class Skrevet af Daniel Pedersen Side 17 af 22

18 $tagboard.= "<tr><td class='tags_style'>". $cells."</td></tr>"; iv. v. $this->template = str_replace("{tagboard",$tagboard,$this- >template); 45. #FUNCTION set_box_style function set_box_style($css_class) { i. $this->template = str_replace("{class",$css_class,$this- >template); #FUNCTION show function show() { i. return $this->template; # # END CLASS 53.?> Tagboard Template Class Skrevet af Daniel Pedersen Side 18 af 22

19 5.3 documenttpl_class.php 1. <?php 2. #### DOCOMENT TEMPLATE CLASS #### 3. # WRITTEN BY DANIEL PEDERSEN #!! READ THIS FIRST!! 5. # 6. # CLASS FUNCTION LIST 7. # # documenttpl THIS IS THE CONSTRUCTOR, LOADS SKAPELON.HTML INTO '$TEMPLATE' 9. # settitle THIS FUNCTION SET THE SITE TITLE 10. # setcontent THIS FUNCTION SET THE SITE CONTENT EG. TABLES, NEWS, LINKS, ECT 11. # setcss THIS FUNCTION SET THE CSS STYLESHEET ATTACHTMENT 12. # create THIS FUNCTION RETURN THE $TEMPLATE VARIABLE 13. # 14. # CLASS GLOBAL VARIABLES 15. # # template THIS VARIABLE HOLD SKAPELON.TPL CONTENTS 17. # CLASS NAME class documenttpl { 19. # CLASS GLOBAL VARIBLES 20. var $template; 21. #FUNCTION documenttpl function documenttpl($tpl_path) { i. $this->template=file_get_contents ($tpl_path.'skapelon.tpl'); #FUNCTION settitle function settitle($title) { i. $this->template = str_replace("{sitetitle",$title,$this->template); #FUNCTION setcontent Tagboard Template Class Skrevet af Daniel Pedersen Side 19 af 22

20 28. function setcontent($content) { i. $this->template = str_replace("{sitecontent",$content,$this- >template); #FUNCTION setcss function setcss($css) { i. $this->template = str_replace("{css",$css,$this->template); #FUNCTION create function create() { i. return $this->template; # CLASS END 37.?> Tagboard Template Class Skrevet af Daniel Pedersen Side 20 af 22

21 5.4 tagboard_skapelon.tpl <div class="tagboard_style"> <form method="post" action="index.php"> <table class="tagboard_style"> <tr> <td> <p class="center">tagboard 2004</p> </td> </tr> <tr> <td> Tag Text (Max 50 char s)<br/> <textarea wrap="hard" name="tag_text"></textarea> </td> </tr> <tr> <td> Your name(max 30 char s)<br> <input maxlength="30" type="text" name="name"> </td> </tr> <tr> <td> <input type="submit" value="add Tag"> </td> </tr> </table> </form> {tagboard </div> 5.5 skapelon.tpl <html> <head> <title>{sitetitle</title> <meta http-equiv="content-type" content="text/html; charset=iso " /> {css </head> <body> {sitecontent </body> </html> Tagboard Template Class Skrevet af Daniel Pedersen Side 21 af 22

22 5.6 tagboard_style.css input { border:1px solid inline; textarea { border:1px solid inline; body, td, th { color: #000000; h1, h2 { color: #663300; h3, h4, h5, h6 { color: #996633; a { color: #336600;.tagboard_style { border-width: 1px 1px 1px; border-style: solid; border-color: #99abcd; width:500px; background-color:#99abcd;.tags_style { border-width: 0px 1px 1px; border-style: solid; border-color: #7789ab; width:500px;.center { text-align:center; Tagboard Template Class Skrevet af Daniel Pedersen Side 22 af 22