DESIGN. Blog: Portfolioer: CPH-mails:

Transkript

1 DESIGN Gruppenr: 5 Portfolioer: CPH-mails: cph-ac148@cphbusiness.dk cph-mp327@cphbusiness.dk cph-mh542@cphbusiness.dk Blog:

2 USE CASE Vi har lavet en user case, for at definere hvilke handlinger, de forskellige aktører har mulighed for at gøre. Log på database Opret indlæg Ændre indlæg /Slet indlæg Vores forfatter har mulighed for at komme ind på databasen og oprette nye indlæg, samt at redigere og slette de nuværende. en er derfor en slags manager der bestemmer hvordan tingene skal styles vha php en og databasen. Vores bruger har mulighed for at gå ind og oprette et nyt blogindlæg via hjemmesiden. Dette bliver så oploadet til databasen, hvorpå det bliver linket op på hjemmesiden. Bruger Besøgende Skrive kommentar Slette kommentar Vi har valgt at bloggen skal have en begrænsning, og derfor skal man have en bestemt kode, inden man kan oploade sin artikel - dette har vi ikke gjort i praksis, men det er noget der ville skulle udføres, hvis bloggen skulle blive ved med at fungere. Det gør vi for at holde styr på hvad der bliver skrevet, og at det holder sig til det rigtige emne, og med det korrekte sprogbrug.

3 NAVN IDENTIFIKATION AKTØR FORUDSÆTNING BASIS METODE BLOG - USE CASE Lav en artikel/blogindlæg Use Case 1 e Der er tilgang til databasen og serveren 1 Log på database 2 Skriv/ændre et indlæg/artikel Overskrift; Brødtekst; Billede; Dato;. 3 Format på billeder skal være JPEG eller PNG 4 Mulighed for at slette tidligere indlæg På dette billede har vi helt enkelt vist, hvordan tingene i praksis skal håndteres. Dette gælder hvis tingene ikke fungere - så er der lavet en alternativ metode. ALTERNATIV METODE 2.a. Fejlmelde hvis dato er forkert 3.a. Fejlmelde hvis billedeformat er forkert 4.a. Pop-up vindue med bekræftelse Slut tilstand Artiklen er oprettet på bloggen

4 NAVN IDENTIFIKATION AKTØR FORUDSÆTNING BASIS METODE ALTERNATIV METODE Slut tilstand Slette kommentar ; Bruger e; Brugere BLOG - USE CASE Der er kommentarer der kan slettes 1. Log på database/blog 2. Kunne søge på fy ord 2. Vurdering af kommentarere 3. Slette valgte kommentarer Bruger 4. Kunne slette egen kommentar 1.a. Pop-up vindue med bekræftelse af sletning Bruger 4.a. Kunne kontakte adminstrator/forfattere for at få slettet kommentaren 4.b. Pop-up vindue med bekræftelse af sletning Kommentarer/kommentaren er blevet slettet På dette billede kan man se hvilke aktører der kan gå ind og slette blogindlæg/kommentarer Brugeren skal kunne slette sin egen kommentar/blogindlæg, men ikke andres. ne skal derimod have mulighed for at gå ind og slette/rette i alle blogindlæg - de har nemlig direkte adgang til databasen - som tidligere nævnt Når disse ting skal udføres, vil der komme et pop-up vindue,der afventer bekræftelse på at det er den rigtige udførelse. Hvis det ikke er muligt for besøgeren at slette sin egen kommentar/blogindlæg, skal de have mulighed for at kontakte de relevante forfattere.

5 Attribut tabel Enintitet Attributter Noter Datatype Længde Post_ID Primære nøgle - genere unikt nummer INT 1 Overskrift Overskrift for blogindlæg 60 POST Indhold Billede Brødtekst til blogindlægget Billede til blog opslag TEXT TEXT en af artiklen 60 Dato Dato for blogindlæg 8 Kommentar_ID Primære nøgle - genere unikt nummer INT Indhold Kommentaren fra brugeren 200 KOMMENTAR Navn Navnet på brugeren på brugeren TEXT TEXT Dato Datoen på opslaget 8 En attribute tabel bruges som en hurtig måde at få et overblik over en database opsætning. Den indeholder alt information som indsættes i databasen. Herover findes vores attributetabel, som senere hen har gjort det mere overskueligt, at indsætte tingene i databasen.

6 PHP kode <?php // Has the botton been used? if(isset($_post[ addpost ])){ // GEt connection CONSTANTS require_once( database_fb.php ); $connection = new MySQLi(HOSTNAME, MYSQLUSER, MYSQLPASS, MYSQLDB); //set utf8 character set for dataset transfer $connection->set_charset( utf8 ); // grab user intput $overskrift = $_POST[ overskrift ]; $brodtekst = $_POST[ brodtekst ]; $forfatter = $_POST[ forfatter ]; $dato = $_POST[ dato ]; Forklaring Denne kode viser hvordan vi har fået uploadet de indtastede artikler op til databasen - for at den derefter bliver publiceret på vores blog-side. Vi har if else statements med, for at finde ud af, hvorvidt blogindlægget bliver tilføjet eller ej. Hvis ikke det bliver tilføjet kommer der Beklager - der skete en fejl - og omvendt hvis det lykkedes. $update = $connection->query( INSERT INTO artikel (overskrift, img, brodtekst, forfatter, dato) VALUES ( $overskrift, $target_file, $brodtekst, $forfatter, $dato ) ); // user feedback //is Update true? Was the query executed if($update) { echo Nyt blogindlæg tilføjet ; }else{ echo Beklager - der skete en fejl ; } // close conection to database server mysqli_close($connection);

7 PHP kode ///////////////////////// ///// Image upload ///// ///////////////////////// $uploadok = 0; if(!empty($_files[ filetoupload ][ name ])) { $target_dir = image/ ; //specifies the directory where the file is going to be placed $target_file = $target_dir. basename($_files[ filetoupload ] [ name ]); //specifies the path of the file to be uploaded $uploadok = 1; move_uploaded_file($_files[ filetoupload ][ tmp_name ], $target_ file); //tmp_name contains the actual copy of your file content on the server echo The image. basename( $_FILES[ filetoupload ][ name ]). has been uploaded - ; } /////////// END image upload //////////// Forklaring Denne kode viser hvordan vi har fået uploadet de forskellige billeder til artiklerne. Vi har valgt det er et krav, at uploade et billede for hver artikel der bliver publiceret - derfor har vi ikke nogle if else statements. Vi har brugt variablen $_FILES, da det ikke er tekst der skal uploades, men en binær fil.

8 Design manual Farver Vi har valgt at holde os til rolige farver, så som rød/rust og grå. Vores baggrund er meget lys og kold, og derfor valgte vi, at finde en varm farve til vores footer. Valget faldt på en rød/ rust farve. Denne farve skaber et varmere udtryk til vores blog, og dermed skaber den nærhed og kontakt til læseren, da han/hun vil føle sig mere velkommen. Logo Vi har valgt at vores blog skulle hedde Design, da vores blog handler om logo er. I vores navn har vi lavet en ordleg hvor sign, er skrevet med blåt, fordi det betyder logo. Hvis vi f.eks. havde valgt en kold blå farve til vores footer, ville bloggen havde givet et udtryk af en slags distance, og dette var ikke vores formål. Vi ville have, at brugeren skulle føle sig velkommen samtidig med at bloggen er så simpel som muligt. Derfor er den røde/rust farve god til formålet, da den tiltrækker en væk fra alt det kolde.

9 Design manual Artiklerne Vi har valgt at anslag pr. linje max må være på 70. Dette gør det lettere for læseren at overskue det, og de mister derfor ikke lysten til at læse oplægget. Meningen var at der skulle være breaks i teksten, så det blev delt op i afsnit, men dette har vi ikke kunne fuldføre i praksis. Vores billeder refererer til de ting der står i de forskellige artikler. Vi har valgt at bruge billeder for at gøre det mere interessant, og fordi det er lettere for brugeren, at forstå det der bliver skrevet i artiklerne.