The Design Diaries PHP projekt

Transkript

1 The Design Diaries PHP projekt Anna Emely Jensen Oliver Alexander Vedel Trojhan Link til GoLogo blog

2 Indledning Denne opgave tog udgangspunkt i, at lave en blog baseret på PHP og database. Vi fik stillet til opgave, at finde et emne indenfor et designrelateret emne og derefter lave blogindlægs/artikler som skal uploades på bloggen. Ydermere skal det være en mulighed, at kunne oprette feedback på bloggen - dette gøres gennem oprettelsen af en ny artikel. Afslutningsvis skal der laves en use case eller en user story samt en tableattribute, som skal være grundlag for udarbejdelsen af selve databasen. Vi har i dette projekt valgt emnet Logodesign. Vi har valgt, at have et bredt fokus for, at kunne ramme flere brugere online, men også for at blive klogere på forskellige aspekter indenfor logodesign. Vores artikler handler henholdsvis om hvordan man skaber et godt logo, logoets historie samt hvordan logoer påvirker mennesker til daglig.

3 Use case Følgende sider vil være den use case vi har udarbejdet. Vi har valgt, at lave en use case da vi følte det gav mest mening for os. Vi har lavet et use case diagram, hvor brugeren og administratoren er sat overfor hinanden. I mellem dem ses de funktioner ovenstående bliver udsat for. Efter dette diagram kommer to skemaer med informationer om use casen. Det ene skema tager udgangspunkt i de handlinger databasen skal kunne for at møde brugerens behov. Skemaet er derfor skrevet ud fra, at brugerne af bloggen skal udføre de forskellige handlinger. Det andet skema tager derfor udgangspunkt i administratorens handlinger. Denne use case viser altså, hvilke opgaver aktørerne, både brugerne og administratoren, skal kunne løse på bloggen.

4

5 Use case #UC1 Use case med udgangspunkt i brugerens handlinger.for at danne et overblik over, hvilke funktioner og handlinger brugeren bliver sat overfor når de besøger bloggen er alt dette samlet i et skema. I skemaet har use casen fået et navn, et ID, aktøren er beskrevet, handlingerne har fået en beskrivelse mv. Alt dette kan ses i skemaet til venstre. Ydermere kan use casen med udgangspunkt i administratoren ses på næste side.

6 Use case #UC2 Denne use case tager udgangspunkt i de funktioner administratoren kommer til, at kunne administrere, samt handlinger de kan udføre. Dette skema, ligesom beskrevet på forrige side, er beskrevet i detaljer for at skabe et overblik over handlingerne aktøren skal igennem - i dette tilfælde administratoren.

7 Attribute table Dette er vores attribute tabler som viser, hvordan vi ønskede at opbygge vores database. Den øverste er simpel, hvor den nedenunder er mere kompleks.

8 Blogdesign Vi har til start i dette projekt lavet en wireframe for, at danne et klart billede af hvordan vi ønskede vores blog skulle se ud. Vi har gennem nettet fået megen inspiration, og undersøgt forskellige blogtyper. Idet kravet til bloggen var, at det skulle være en singlepage følte vi, at vi måtte udarbejde et site som var meget overskueligt, og enkelt. Vores site indeholder en del elementer, men vi ønskede at holde det så struktureret som muligt for, at kunne bevare enkeltheden så meget som muligt. Vi har prøvet, at gøre sitet struktureret ved hjælp af forskellige kasser, hvor de forskellige elementer er i. Altså er hvert blogindlæg/artikel i hver sin kasse, samt der er nogle sidebars ude i højre side, hvori man kan finde forskellige informationer. Ydermere har vi prøvet at bevare enkeltheden ved, at anvende få farver som går igen. Farverne vi har valgt at anvende på vores blog er grå, hvid og orange. Vi mener, at disse farver komplementere hianden godt og giver et godt spil, uden at det hverken er for kedeligt eller for meget.

9 PHP koder fra Index-fil <?php // Indlæser filen database_fb require_once( database_fb.php );?> <?php // Er med til at skabe forbindelse til databasen - set_charset for sprog/tegn (utf8) $connection = new MySQLi(HOSTNAME, MYSQLUSER, MYSQLPASS, MYSQLDB); $connection->set_charset( utf8 ); /* // For at kontrollere om det virker eller ej, anvendes dette. Vores er udkommenteret da vi ikke ønsker det skal vises på det endelige site, men blot har været en hjælp til os under udvikling. if($connection->connect_error){ die($connection->connect_error); } else { echo <h1>den er gået igennem, åben en tuborg!</h1> ; } */?>

10 <?php // for at hente records fra databasen oprettes en variabel indenfor en variabel. Her anvendes query metoden. $data = $connection->query( SELECT * FROM artikler ); // While anvendes for at skabe loop i vores artikler, så alle artiklerne bliver vist på sitet while ($result = $data->fetch_array()) { echo <article class= topcontent > ; echo <h2 class= headlinecolor >. $result[ overskrift ]. </h2> ; echo <p class= post-info >. Skrevet. af. $result[ forfatter ]. <p> ; echo <p>. $result[ tekst ]. <p> ; // Indsæt billede, hvis du har lyst! Vi har sat en str. på billedet til 400px, og sagt den skal sige intet billede, hvis dette er tilfældet if($result[ img ]){ echo <img src=.$result[ img ]. alt=. $result[ overskrift ]. width= 400px > ; } else { echo Intet billede ; } echo </article> ; }?>

11 PHP koder fra database_fb-fil <?php //Forbindelse til DB server // msqli metoden, alt dette er en definition af forbindelseskonstanter. Nederste udkommenteret blok anvendes når siden udvikles igennem localhost. Ovenstående er egen database. define( MYSQLUSER, olivervedeltrojahn_com_php_blog ); define( MYSQLPASS, hj6c42kd ); define( HOSTNAME, olivervedeltrojahn.com.mysql ); define( MYSQLDB, olivervedeltrojahn_com_php_blog ); /* define( MYSQLUSER, phpblog ); define( MYSQLPASS, bebe ); define( HOSTNAME, localhost ); define( MYSQLDB, php_project ); */

12 <?php // link til databasen require_once( database_fb.php );?> PHP koder fra Form-fil <!-- Henvendelse til serveren... enctype attribute tilføjes for at kunne implementere billede/filer --> <form method= post class= form action= <?php echo $_SERVER[ PHP_SELF ];?> enctype= multipart/ form-data > <?php // kontrollerer om post-array findes + at knappen er aktiveret if(isset($_post[ opretartikel ])) { // opret forbindelse til databasen $connection = new MySQLi(HOSTNAME, MYSQLUSER, MYSQLPASS, MYSQLDB); $connection->set_charset( utf8 );

13 //Denne sikre igen at der er forbindelse til databasen. Giver en bedsked hvis der er hul igennem /* if($connection->connect_error){ die($connection->connect_error); } else { echo <h1>den er gået igennem, åben en tuborg!</h1> ; } */ // Får fat i post-array data // sikring mod sql injection = mysqli_escape_string $overskrift = mysqli_escape_string($connection, $_POST[ overskrift ]); $forfatter = mysqli_escape_string($connection, $_POST[ forfatter ]); $tekst = mysqli_escape_string($connection, $_POST[ tekst ]);

14 /////////////////////////////////// ///// Image upload ///// ////////////////////////////////// $uploadok = 0; // Definerer mapppen hvor billede skal placeres if(!empty($_files[ filetoupload ][ name ])) { $target_dir = images/ ; // Definerer stien til billedet $target_file = $target_dir. basename($_files[ filetoupload ][ name ]); //fortæller hvis der er et billede $uploadok = 1; move_uploaded_file($_files[ filetoupload ][ tmp_name ], $target_file); echo The image. basename( $_FILES[ filetoupload ][ name ]). Er blevet uploaded - ; } else { echo Intet billede uploaded. ; } /////////// END image upload ////////////

15 /* // Formulerer query en. Denne er udkommenteret grundet den nye forespørgsel der bliver lavet nedenunder her. $sqlupdate = INSERT INTO artikler (overskrift, forfatter, tekst) VALUES ( $overskrift, $forfatter, $tekst ) ; */ // formuler query en if($uploadok == 1){ $sqlupdate = INSERT INTO artikler (overskrift, forfatter, tekst, img) VALUES ( $overskrift, $for fatter, $tekst, $target_file ) ; } else { $sqlupdate = INSERT INTO artikler (overskrift, forfatter, tekst) VALUES ( $overskrift, $forfatter, $tekst ) ; } // bruger feedback - skaber den feedback brugeren får på skærmen når billedet er uploadet mv. if(mysqli_query($connection, $sqlupdate )){ echo <p class= feedback >. Indlæg tilføjet. </p> ; } else { echo <p class= feedback >. Noget gik galt... </p> ; } }?>

16 Refleksion Hvis vi reflekterer over vores projekt har vi lært, at oprette og anvende databaser. Dette er et smart system, som for fremtiden vil gøre en del arbejde lettere. Herudover har vi lært, om php og hvordan disse koder bruges. Ydermere har vi lært om use cases og user stories, samt det at lave en attribute table. Især attribute table var en stor hjælp, da databasen skulle oprettes. Vi er herudover blevet klogere på det emne vi havde valgt vore blog skulle handle om.