ITV0110 4. töö 2019: andmebaasiga serverirakendus

Allikas: Lambda
Twitter


Mis tuleb teha

Neljanda praktikumi ülesandeks on ehitada mini-twitter (vaata saiti ja wikipediat) kasutades selleks PHP-d ja MySQL-i.

Konkreetselt:

  • Saad vaadata loetelu kõigist kasutajatest ja nende tweetidest.
  • Saad vaadata tweedi juures olevaid kommentaare: neid näidatakse aja järgi langevalt sorteeritult.
  • Saad teha konto: anda oma kasutajanime (kontrollitakse unikaalsust) ja parooli ja pärisnime ja emaili.
  • Saad sisse logida: sisesta kasutajanime ja parooli
  • Kui oled sisse loginud, siis saad lisada tweedi.
  • Kui oled sisse loginud, siis saad olemasolevale tweedile lisada kommentaari.
  • Kui oled sisse loginud, saad olemasolevale teise kasutaja tweedile lisama 'like'
  • Teised kasutajad saavad otsida kasutajaid ja näha nende oma lehte: kasutajanime, kirjeldusteksti, fotot ja nende tweete sorteeritud hilisemast järgmisele

Hindamine, kohustuslikud ja mittekohustuslikud osad

Praktikum annab maksimaalselt 12 punkti.

Konkreetselt on kohustuslikud osad, mis peavad olema tehtud ja mille realiseerimine annab kokku kuni 6 punkti:

  • Saad sisse logida: minimaaljuhul parooli ei kasuta, sisestad mistahes kasutajanime. Edasiarendatud variandis on parooliga sisselogimine. Ilma sisse logimata midagi teha või vaadata ei saa.
  • Pead saama sisestada enda kohta kirjeldusteksti (a la kes ma olen vms) ja laadima ülesse foto.
  • Teised kasutajad saavad otsida kasutajanime järgi kasutajaid ja näha nende oma lehte: kasutajanime, kirjeldusteksti ja fotot.
  • Pead saama jälgida ehk followda mistahes teisi twitteri kasutajaid: valid või otsid ühe ja vajutad "follow" nuppu.
  • Pead saama sisestada tweeti ehk lühikese teksti.
  • Sinu oma lehel on näha sinu enda viimased kolm tweeti.

Elementaarsed turvanõuded peavad olema täidetud:

  • Ei kuvata otse, nö puhastamata välja kasutaja sisestatud tekste (javascript injection ehk XSS takistatud)
  • Ei kasutata otse, nö puhastamata, kasutaja sisestatud tekste SQL päringute kokkupanekul (sql injection takistatud)

Rakendus ei tohi välja näha väga kole. Vaata ka Htmli_kujunduse_üldpõhimõtted

Soovitavad osad, mis annavad lisaks baaspunktidele veel kuni 6 punkti:

  • (1 p) Oma accoundi tegemine. Accoundis pead saama anda oma kasutajatunnuse, parooli ja emaili vabatekstina. Sel juhul toimub sisselogimine kasutajanime ja parooli kasutades ja account peab sisselogimiseks juba olemas olema.
  • (1 p) Pead saama tweete kommenteerida
  • (1 p) Pead saama tweete like'da.
  • (1 p) Pead saama tweete edasi saatma (retweetima)
  • (1 p) Sul on leht, kus näed, keda sa jälgid ning saad neid sealt lehelt ka mitte-jälgitavaks teha.
  • (1 p) Sul on "home" leht, kus näed korraga kõigi followtud kasuajate (ja mitte teiste) viimaseid N tweeti kronoloogilises järjekorras.

Lisaks neile funktsionaalsustele võib ehitada juurde muid huvitavaid mittetriviaalseid funktsionaalsusi, mis annavad piisavalt hästi tegemise korral siis samuti veidi lisapunkte.

Tehnoloogilised nõuded

  • Kõik serverirakendused tuleb realiseerida PHP-s ja andmeid tuleb hoida MySQL-s
  • Rakendus peab olema võrgus vabalt brauseriga ligipääsetav, mitte lihtsalt töötama näiteks sinu laptopis.

Abi ja soovitusi

Esiteks: tutvu PHP ja SQL materjalidega, kas kursuse esilehelt või koopiana siitsamast:


Arendusvahendid

Kui varasemad praktikumitööd said tehtud ka oma arvutis, siis selle töö juures on rangelt soovituslik installeerida enda arvutisse vajalikud arendusvahendid (veebiserver, PHP, Mysql). Windowsi ja OSX all saad seda kõige lihtsamini teha kui installeerid XAMPP-i https://www.apachefriends.org/. Otseselt veebiserverit vaja ei lähe sest PHP uuemates versioonides (7.+) on see sisse ehitatud. Samuti saaks installeerida andmebaasimootori eraldi.

Siis saad kasutada andmebaasi haldamiseks graafilisi töövahendeid - Mysql Workbench, PhpMyAdmin, Adminer vms

Tee rakendus oma lokaalses serveris valmis. Lisa sinna andmebaasi-dump, ja nüüd kui rakenduse dijkstrasse tahad saada saad failid üle kopeerida ja seejärel pead käsurealt andmebaasi dump-i importima. Arvesta et rakenduse serverisse paigaldamine see võtab aega - aga ikkagi tunduvalt vähem kui Dijkstra andmebaasipäringuid otse kirjutada.

Debugimine

  • Dijkstra php konf on selline, et php vigade korral kuvatakse neid välja veebilehel, vaata näiteks http://dijkstra.cs.ttu.ee/~tammet/t2.php
  • Vajadusel kasuta - lisaks eelnevale - oma proges trükkimiseks echo käsku, et tuvastada, kus täpselt ja mis muutujate väärtuste korral viga tekib.
  • Alternatiivina (mida enam ilmselt vaja ei lähe) saan endiselt teha nii, et logid dijkstrasse sisse ja ütled käsurealt
php myprog.php

ja siis kuvatakse sulle käsurealt süntaksivead välja. .

Andmebaasi tabelite versioonid vs kustutamine

Dijkstras ei ole myqsli kasutajale st2014 hetkel antud õigust tabeleid kustutada. Sestap on hea mõte teha oma tabelid versiooninumbriga ja jätta vanad tabelid lihtsalt prahina alles.

Näiteks nii: matriklinrvN_tabel ehk t12334v3_users

Teine hea variant on kasutusel olevaid tabeleid jooksvalt vajaduse järgi muuta. Seda saad teha näiteks nii: 

ALTER TABLE tt1v1_photos ADD filename  VARCHAR(100);

Faili upload

Uploadi jaoks sobiv tutorial on siin

Kõigepealt otse tutorialist pärit html vormi näide: 

<!DOCTYPE html>
<html>
<body>

Upload form:

<form action="upload.php" method="post" 
    enctype="multipart/form-data">
    Select photo upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

Järgmisena sobiv näide uploaditud faili kontrollimise ja salvestamise jaoks. Näide baseerub sellelsamal w3schoolsi tutorialil.

NB!

  • Enne selle näitega katsetamist tee endale public_html alla kataloog uploads ja anna kõigile õigus sinna kataloogi kirjutada ja sealt lugeda:
chmod a+rw uploads
  • Üleslaetud fail salvestatakse numbrilise nimega 10 pluss suffix, a la 10.jpg. Vaata brauserist taneli kataloogist

Php näide: 


<?php

function upload_my_file($fileid) {
  echo "starting";
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
  
  echo "<p>$target_file " . $target_file;
  $uploadOk = 1;
  $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
  echo "<p>$imageFileType " . $imageFileType;
  $saved_file = $target_dir . $fileid . "." . $imageFileType;
  // Check if image file is a actual image or fake image
  if(isset($_POST["submit"])) {
      $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
      if($check !== false) {
          echo "File is an image - " . $check["mime"] . ".";
          $uploadOk = 1;
      } else {
          echo "File is not an image.";
          $uploadOk = 0;
      }
  }
  echo "all is fine before checks";
  // Check if file already exists
  if (file_exists($target_file)) {
      echo "Sorry, file already exists.";
      $uploadOk = 0;
  }
  // Check file size
  if ($_FILES["fileToUpload"]["size"] > 5000000) {
      echo "Sorry, your file is too large.";
      $uploadOk = 0;
  }
  // Allow certain file formats
  if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
  && $imageFileType != "gif" ) {
      echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
      $uploadOk = 0;
  }
  // Check if $uploadOk is set to 0 by an error
  if ($uploadOk == 0) {
      echo "Sorry, your file was not uploaded.";
  // if everything is ok, try to upload file
  } else {
      if (move_uploaded_file(
           $_FILES["fileToUpload"]["tmp_name"], $saved_file)) {
          echo "<p>The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
      } else {
          echo "<p>Sorry, there was an error uploading your file.";
      }
  }
}

upload_my_file(10);

?>

Turvaküsimused

Sul on tingimata vaja teha kahte turva-asja:

  • Mitte võimaldada kasutajal sisestada teksti nii, et see tekst sisaldaks veebilehele kuvamisel html tage (pilte, skripte jms). Selleks kasuta htmlentities funktsiooni või htmlspecialchars funktsiooni või mõnda tema analoogi. Kindlasti katseta ise, et asi töötaks!
  • Mitte võimaldada kasutajal sisestada teksti nii, et see tekst tekitaks SQL lausesetes ootamatuid kõrvalefekte (näiteks kasutaja sisestab pildi nimeks '; drop table ...' vms). Selleks kasuta mysqli_real_escape_string funktsiooni.

Veel ideid ja näpunäiteid

  • Struktureeri oma rakendus nii et eraldi oleksid lehed ja lehtede vahel jagatavad komponendid, nt. sessioonihaldus ja andmebaasiühendused.
  • Faili struktureerimiseks (näiteks hoida eraldi failis päis ja jalus) siis selleks on php include käsk.
  • Erinevad tegevused (a la sisse/väljalogimine, foto lisamine) saad realiseerida nii, et php lehel vaadatakse, mis argumendid on antud (näiteks fotod.php?username=xx&password=yy peale tehakse sisse logimine, fotof.php?op=logout peale väljalogimine jne). Alati on võimalik võtta ka kasutusele eraldi parameeter, ntx op, mille väärtus ütleb siis, et mis tegevus tuleb ette võtta.
  • Debugimise jaoks on lihtsam kasutada vormidel method="get", siis näed brauserist, et mis parameetrid saadeti.
  • Samuti on debugimise juures abiks trükkida välja (echo) kokkuklopsitud sql päring tervikuna, et kontrollida, kas sai selline, nagu tahtsid.
  • Sisselogimise jaoks (tee seda alles siis, kui baasfunktsionaalsus olemas!) on mõistlik kasutada php session funktsiooni (lihtsa tutoriali leiad siit) ja seada sessioonis sisselogimisel $_SESSION['username'] ja edaspidi alati kontrollida, kas on isset($_SESSION['username']) ja kui jah, siis kasutada seda väärtust, kui ei, siis kuvada sisselogimise vorm. Väljalogimisel piisab siis session_destroy() kasutamisest.
  • Kui soovid ilusaid URLe, siis hea viisi kuidas seda teha leiad siit õpetusest: https://bishrulhaq.com/posts/simple-php-page-router

Sobivad õpetused lugemiseks

Umbes selles järjekorras:

PHP
SQL, loe selles järjekorras
SQL PHP-s, loe selles järjekorras
Erinevad vormivälja-tüübid peale hariliku <input type=text>


Siit leiad eelmise aasta versiooni: ITV0110 4. töö 2015

Pärit leheküljelt "http://lambda.ee/w/index.php?title=ITV0110_4._töö_2019:_andmebaasiga_serverirakendus&oldid=16351"