The Design Diaries. Link til blog

Transkript

1 The Design Diaries Link til blog Alexander Nicholas Klug Rasmussen Melissa Pietrykoski Julie Wulff Voravong

2 Use case

3

4

5 Database attribute tabel

6 PHP kode <?php //Variabler til at forbinde databasen med mysql. Databasen hedder blog. $servername = localhost ; $username = root ; $password = 6A6NaVtK5udDCRMQ ; $dbname = blog ;?> // Her bliver forbindelsen lavet $conn = new mysqli($servername, $username, $password, $dbname); // Dette stykke gør at vi kan bruge æ ø og å på hjemmesiden. mysqli_set_charset($conn, utf8 ); // Hvis der går fejl på forbindelsen, så vil man få at vide at forbindelsen fejler. if ($conn->connect_error) { die( Connection failed:. $conn->connect_error); /* Variablen sql vælger alt fra tabellen som hedder blogposts. Det er den tabel alle vores artikler ligger i, sammen med links til billederne, forfatterne og overskrifter.*/ $sql = SELECT * FROM blogposts ; /* Variablen result er den som skaber forbindelsen til tabellen, så vi bare kan bruge variablen result fremover til at forbinde os til blogposts tabellen */ $result = $conn->query($sql);

7 <?php //Hvis der bliver fundet nogen rækker i tabellen blogposts if ($result->num_rows > 0) { // Så henter vi hver række med et while loop. while($blogposts = $result->fetch_assoc()) { /* Og det viser vi på hjemmesiden ved at echo det ud. Da variablen blogposts nu er hver række i tabellen blogposts, kan vi opsætte og skrive variablerne én gang i det vi echo er ud på siden, da vi bruger while loop, som gennemgår hver række til der ikke er flere rækker tilbage. Når vi echo er det ud på siden, kan vi bruge variablen blogposts, også kan vi vælge hvad vi gerne vil have fat i fra hver række ved at f.eks. skrive [ id ]. Det vil så give og id et på alle rækkerne i loopet.*/ echo <a href=./index.php?page=. $blogposts[ id ]. > <div class= blogbox > <div class= col-sm-4 profileimage > <div class= first-image ><img src=. $blogposts[ image ]. > <div class= twitter ><img src= img/twitter-share.png > <div class= facebook ><img src= img/facebook-share.png > <div class= col-sm-8 textonblogbox > <h1>. $blogposts[ overskrift ]. </h1> <h4>skrevet af:. $blogposts[ forfatter ]. d.. $blogposts[ dato ]. </h4> <p>. $blogposts[ artikel ]. </p> </a> ; //Hvis det ikke er nogen rækker i tabellen blogposts, så er der ingen artikler, og det viser vi på siden istedet. else { echo Ingen artikler! ;?>

8 <?php $artikelnavn = (isset($_post[ artikelnavn ])? $_POST[ artikelnavn ] : null); $date = (isset($_post[ date ])? $_POST[ date ] : null); $overskrift = (isset($_post[ overskrift ])? $_POST[ overskrift ] : null); $artikel = (isset($_post[ artikel ])? $_POST[ artikel ] : null); $submitartikel = (isset($_post[ submitartikel ])? $_POST[ submitartikel ] : null); if($submitartikel) { if ($artikelnavn&&$date&&$overskrift&&$artikel){ $conn = new mysqli($servername, $username, $password, $dbname); $conn->set_charset( utf8 ); $uploadok = 0; f(!empty($_files[ filetoupload ][ name ])) { $target_dir = img/ ; //specifies the directory where the file is going to be placed //specifies the path of the file to be uploaded $target_file = $target_dir. basename($_files[ filetoupload ][ name ]); $uploadok = 1; //tmp_name contains the actual copy of your file content on the server move_uploaded_file($_files[ filetoupload ][ tmp_name ], $target_file); echo The image. basename( $_FILES[ filetoupload ][ name ]). has been uploaded - ; else { echo No image uploaded. ; if($uploadok == 1) { $sqlupdate = INSERT INTO blogposts (overskrift,artikel,forfatter,dato,image) VALUES ( $overskrift, $artikel, $artikel Navn, $date, $target_file ) ; else {

9 $sqlupdate = INSERT INTO blogposts (overskrift,artikel,forfatter,dato) VALUES ( $overskrift, $artikel, $artikel Navn, $date ) ; if(mysqli_query($conn, $sqlupdate)){ echo New Subject added to database ; else{ echo Ooops - something went wrong ;?> else { echo <div class= container style= color:red; >Du mangler at udfylde navn, dato, overskrift eller artikel<div> ; <?php /* Længere oppe kan vi se at hver artikel linker til <a href=./index.php?page=. $blogposts[ id ]. > Det gør at de linker til hvert deres unikke id. Men det i sig selv gør ikke noget. Så derfor fortæller vi hvad siden så skal vise, hvis id et f.eks. er 1 eller 2. I vores tabel blogposts, der har hver artikel sit eget unikke tal. Det tal bruger vi til at sætte lig med page. Det som linket linker til er page=1, hvis man trykker på artiklen med id et 1, og hvis man trykker på den artikel med id = 2, så vil page=2. Her under bruger vi GET metoden, da vi gerne vil have talene op i URL en så vi kan se hvad der sker. */ //Page bliver lig med det nummer som artiklen har som vi går ind på. if(isset($_get[ page ])) { //Her laver vi en variabel, så vi har gemt artikel/page nummeret. $page = $_GET[ page ]; //Hvis nummeret er sat, så udfører den alt det som står inden i. if(isset($page)) { // id sætter vi lig med page-nummeret, bare for at det bliver mere logisk, da det er id nummeret på artiklen vi har fat i.

10 $id = $page; // variablen $blog, vælger lige præcis den række fra vores tabel blogposts, hvor id et er lig med $id som er vores $page-nummer. $blog = SELECT * FROM blogposts WHERE id = $id ; // Variablen $row forbinder så databasen ved at fortælle hvad den skal gøre. I dette tilfælde skal den hente rækken med det korrekte id. $row = $conn->query($blog); // Variablen $blogpost gør at vi kan få lov til at hente informationen fra den bestemte række i vores tabel blogposts. // Variablen $blogpost bruger vi senere til at vise informationen ude på hjemmesiden, så folk kan se det. $blogpost = $row->fetch_assoc(); /* Her bruger vi så jquery til at fortælle at den skal skjule class en forsvind, hvilket er den class hvor alle artiklerne på forsiden ville ligge. Det gør plads til at vi så kan vise den artikel som der er blevet trykket på. Måden vi henter den præcise artikel man har trykket på er ved at bruge vores variabel $blogpost, som henter præcis den række med det id som der er blevet trykket på. */ echo <script> $( document ).ready(function() { $(.forsvind ).hide(); $(.artikelform ).hide(); ); </script> <div class= container > <div class= col-sm-8 artikler > <h1>. $blogpost[ overskrift ]. </h1> <p>skrevet af:. $blogpost[ forfatter ]. d.. $blogpost[ dato ]. </p> <p>. $blogpost[ artikel ]. </p> <div class= col-sm-4 >

11 <img src=. $blogpost[ image ]. > <div class= container > <div class= col-sm-8 > <h3>skriv en kommentar her:</h3> <form method= POST action= index.php?page=. $blogpost[ id ]. > <input type= text name= name placeholder= Navn > <textarea name= comment placeholder= Kommentar ></textarea> <input type= submit name= submit value= Send > </form> <div class= container > <div class= col-sm-8 > <div class= streg > ; // Længere oppe har vi lavet en form, som skal blive brugt til at vise de kommentare som bliver skrevet ud på siden /* I input-feltet har vi givet den et name = name, hvor vi bruger POST method til at afsende informationen. Brugte vi GET vil det komme op i URL en og være mere usikkert, da folk vil kunne læse information direkte der fra. Vi har også et textarea, hvor name= comment, og til sidst har vi et input-felt igen, som har et name= submit. De navne som felterne har fået bruge vi til at lave de variabler som ses nedenfor. Det som variablerne bruges til er at vi kan være sikre på at der bliver skrevet noget i felterne, så man ikke bare kan lægge tomme kommentarer ud.*/ $name = (isset($_post[ name ])? $_POST[ name ] : null); $comment = (isset($_post[ comment ])? $_POST[ comment ] : null); $submit = (isset($_post[ submit ])? $_POST[ submit ] : null); // Variablen $NewTable gør det, at hvis der ikke eksiterer en tabel hvor vi kan holde styr på kommentarene i vores database,

12 // Så laver den en unik tabel til præcis det $id som der er blevet trykket på. $NewTable = CREATE TABLE IF NOT EXISTS comments$id ( id int(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY, name VARCHAR(70) NOT NULL, comment VARCHAR(10000) NOT NULL) ; // Her bliver tabellen så faktisk lavet, da vi forbinder os til vores database. // MEN tabellen bliver kun lavet hvis den ikke allerede eksiterer. Så tabellen bliver først oprettet, // når den første kommentar kommer. $CreateNewTable = mysqli_query($conn, $NewTable); // Hvis der bliver trykket på submit/send knappen if ($submit) { // og hvis der står noget i navn og i kommentar-feltet if ($name&&$comment) { // Så indsætter den navn og kommentar i vores tabel, med det unikke $id, som den artikel har som man er gået ind på. mysqli_query($conn, INSERT INTO comments$id (name,comment) VALUES ( $name, $comment ) ); //Ellers får man besked på at skulle skrive navn og kommentar else { echo <div class= container >Skriv navn og kommentar!<div> ; // Variablen $com vælger så alt fra den unikke tabel som er lavet til kommentarerne som er blevet lagt i tabellen. // Den viser dem i omvendt orden, så de nyeste kommentarer kommer øverst. $com = SELECT * FROM comments$id ORDER BY id DESC ; // Variablen $result2 forbinder $com til databasen. $result2 = $conn->query($com); // Hvis der er nogle rækker i den unikke tabel som er lavet til kommentarerne. (Hvis der er nogen kommentarer)

13 if ($result2->num_rows > 0) { // Så får vi en ny variabel $comments, som er alle kommentarene der bliver hentet fra den unikke tabel som er blevet lavet. while($comments = $result2->fetch_assoc()) { // Her echo er vi så navn og kommentar, og da vi er inde i et while loop, vil den vise alle rækkerne i vores unikke tabel. echo <div class= container > <div class= col-sm-8 > <div class= commentbox > <p>. $comments[ name ]. </p> <p>. $comments[ comment ]. </p> ; // Hvis der ikke er nogle rækker i vores tabel (Hvis ingen har kommenteret), så vises dette i stedet for. else { echo <div class= container >Ingen kommentarer ;?> // Her lukker vi forbindelsen til vores database. $conn->close(); //Hvis siden ikke eksisterer, så vil dette felt komme frem. else { echo Siden eksisterer ikke! ;