Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][MySQL][PHP] Skrypt testu w JS a przeniesienie wyniku do bazy danych.
Forum PHP.pl > Forum > Przedszkole
Klycior
Cześć. Robię sobie na własną potrzebę mały skrypt na test online. Chciałbym podłączyć go pod bazę danych którą już posiadam abym miał wgląd do wyników danych użytkowników.
Dostęp do skryptu oczywiście nie jest anonimowy dlatego zależy mi abym wiedział kto jakie ma osiągnięcia i sam użytkownik był świadomy swoich wyników.

Skrypt testów znalazłem gdzieś w internecie - jest dość prosty co dla mnie jest sporą zaletą - z zawodu jestem diagnostą samochodowym facepalmxd.gif
Pozostałość napisałem sam - coś tam pamiętam z czasów zabawy z komputerem. Niżej zamieszczam kody które posiadam.
Prosiłbym o pomoc bo wykładam ręce, szukałem sporo i to co udało mi się wywnioskować to muszę zastosować Ajax którego nie znam kompletnie.
Wyświetlanie testu:
  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  2. <script src="quiz.js"></script>
  3. <?php
  4. require 'header.php';
  5. require 'config.php';
  6. require_once 'user.class.php';
  7. $quiz = mysql_query('SELECT trescpytania, odpowiedz1, odpowiedz2, odpowiedz3, odpowiedz4, poprawna, rodzaj FROM pytania ORDER BY RAND() LIMIT 1, 50');
  8. $quiz1 = mysql_fetch_array($quiz,MYSQL_BOTH);
  9. $quiz2 = mysql_query('SELECT trescpytania, odpowiedz1, odpowiedz2, odpowiedz3, odpowiedz4, poprawna, rodzaj FROM pytania ORDER BY RAND() LIMIT 1, 50');
  10. $quiz22 = mysql_fetch_array($quiz2,MYSQL_BOTH);
  11. ?>
  12.  
  13. <script>
  14. var questions=[
  15. ['<?php echo $quiz1['trescpytania'];?>',['<?php echo $quiz1['odpowiedz1'];?>','<?php echo $quiz1['odpowiedz2'];?>','<?php echo $quiz1['odpowiedz3'];?>'],'<?php echo $quiz1['poprawna'];?>']
  16. ,['<?php echo $quiz22['trescpytania'];?>',['<?php echo $quiz22['odpowiedz1'];?>','<?php echo $quiz22['odpowiedz2'];?>','<?php echo $quiz22['odpowiedz3'];?>'],'<?php echo $quiz22['poprawna'];?>']
  17. ]
  18. new Quiz(questions);
  19. </script>
  20.  


Test:
  1. function(w)
  2. {
  3. var quiz=function(questions,name,resultTxt,introButtonTxt)
  4. {
  5. var tm=this
  6. ,name=name||'Kliknij niżej aby rozpocząć:'
  7. ,resultTxt=resultTxt||'Twój wynik:'
  8. ,introButtonTxt=introButtonTxt||'START';
  9.  
  10. $('<div id="QUIZ_intro" class="pager"><h1>'+name+'</h1><br><button class="myButton">'+introButtonTxt+'</button></div><div id="QUIZ_question" class="myButton"><p></p><ol></ol></div><div id="QUIZ_results" class="pager"><h1>'+resultTxt+'</h1><p><br>Liczba uzyskanych punktów: <span id="QUIZ_points"></span>/<span id="QUIZ_total"></span><br><a href="java script:location.reload()">NOWY TEST</a></p></div>').appendTo('body');
  11.  
  12. var introElem=$('#QUIZ_intro')
  13. ,introButton=introElem.find('button')
  14. ,questionElem=$('#QUIZ_question')
  15. ,questionP=questionElem.find('p')
  16. ,questionList=questionElem.find('ol')
  17. ,resultElem=$('#QUIZ_results')
  18. ,totalElem=$('#QUIZ_total')
  19. ,pointsElem=$('#QUIZ_points')
  20. ,points=0
  21. ,currentQuestion=0;
  22.  
  23.  
  24.  
  25. introButton.click(function(e)
  26. {
  27. e.preventDefault();
  28. introElem.hide();
  29. tm.run();
  30. });
  31.  
  32. questionList.on('click','li',function()
  33. {
  34. var t=$(this)
  35. ,question=t.attr('data-question')
  36. ,answer=t.attr('data-answer')
  37. ,correct=(questions[question][2]==answer)
  38. console.log(questions[question][2],answer);
  39. tm.clickAnswer(correct);
  40. });
  41.  
  42. tm.run=function()
  43. {
  44. totalElem.html(questions.length);
  45. questionElem.show();
  46. tm.ask(currentQuestion);
  47. }
  48.  
  49. tm.ask=function(e)
  50. {
  51. questionP.html(questions[e][0]);
  52. questionList.html('');
  53. for(var i=0;i<questions[e][1].length;i++)
  54. {
  55. $('<button class="myButton2"><li data-question="'+e+'" data-answer="'+i+'">'+questions[e][1][i]+'</li></tr></table>').appendTo(questionList);
  56. }
  57. }
  58.  
  59. tm.clickAnswer=function(correct)
  60. {
  61. if(correct)
  62. ++points;
  63. if(currentQuestion==questions.length-1)
  64. tm.summarise();
  65. else
  66. tm.ask(currentQuestion+1);
  67. ++currentQuestion
  68. }
  69.  
  70. tm.summarise=function()
  71. {
  72. questionElem.hide();
  73. pointsElem.html(points);
  74. resultElem.show();
  75. }
  76. }
  77. w.Quiz=quiz;
  78. }(window))



<span id="QUIZ_points"> - tutaj mamy wynik który chciałbym wysłać do bazy - jak tego dokonać ?
Z góry dziękuję smile.gif
shx420
Hej,

gotowego kodu za Ciebie nie napiszę bo późno już i ledwo na oczy widzę, ale dam Ci kilka wskazówek (jeśli złożyłeś do kupy kod który wkleiłeś to zakończenie sprawy nie powinno Ci przysporzyć problemów).

Ajax faktycznie rozwiąże problem. Na pocieszenie dodam, że to wcale nie jest osobny język, a jedynie technika której możesz używać za pomocą javascriptu (a jeszcze prościej będzie jeśli użyjemy do tego jquery które już zaimportowałeś w pierwszej linijce). A w najprostszej wersji działa to tak:

  1. $.ajax({
  2. type: 'GET',
  3. url: 'http://localhost/dodaj_punkty.php?punkty=' + ('#QUIZ_points').val() ,
  4. cache: false
  5. });


Najważniejszy jest url, resztą się nie przejmuj. To adres skryptu który ma się wykonać bez przeładowania strony. Tam musisz umieścić prosty kod php który będzie pobierał z tablicy GET wartość punkty i umieszczał ją w bazie danych.

Pozdrawiam i życzę powodzenia!

PS. Spróbuj przepisać quiz tylko w php, gra nie powinna zając więcej niż 10-15 linijek.
Klycior
Dzięki wielkie wink.gif

Jak wrócę z pracy to zabieram się za zmiany smile.gif
Użycie takiego kodu jest bezpieczne ? Bo rozumiem, że po wyświetleniu źródła strony jest możliwe odczytanie
  1. url: 'http://localhost/dodaj_punkty.php?punkty=' + ('#QUIZ_points').val() ,

Przez co można sobie samemu nabijać później punkty - dobrze rozumiem ? smile.gif
shx420
Nie ma problemu ;) Bardzo dobrze rozumiesz (i tym bardziej się dziwię, że rozumiejąc takie rzeczy nie przepiszesz po prostu gry w php, ewentualnie dodając jakieś elementy js na samym końcu ;P ). Ale rozwiązanie które podałem jest raczej mało eleganckie, nie spodziewałem się, że chcesz ten kod umieszczać online. Jeśli tak to ogólnie jest bardzo mało bezpieczny i pozostawia otwartych wiele dziur, mogących prowadzić do poważniejszych atrakcji jak ataki sql injection lub xss.

Wracając do Twojej gry, tymczasowym rozwiązaniem mogłoby być utworzenie sesji w php i wykonanie kodu tylko wtedy, gdy zmienna w sesji jest ustawiona na określoną wartość. Np. uruchamiając grę, tworzy się zmienna:

  1. $_SESSION['tryb_gry'] = 'trwa';


Po ostatnim pytaniu ustawiamy ją na:

  1. $_SESSION['tryb_gry'] = 'skończona';


I tylko wtedy pozwalamy na wykonanie się kodu w skrypcie dodaj_punkty.php:

  1. if ($_SESSION['tryb_gry'] == 'skończona') {
  2. ... dodaj punkty do bazy ...
  3. // i na koniec ustawiamy tryb_gry na null zeby uniemozliwic ponowne wykonanie kodu
  4. $_SESSION['tryb_gry'] = null;
  5. }


Ale, jak już wspomniałem wcześniej, to też nie zabezpiecza wszystkiego i sprytny użytkownik i tak będzie w stanie zmodyfikować swój wynik. Żeby to bezpiecznie chodziło musiałbyś poprawić też inne formularze i ogólnie cały kod (przeczytaj mój post który akurat wczoraj napisałem: Temat: PHPzabezpieczenie formularza kontaktowego ). Wiem, że to już staje się powoli nudne, ale po raz kolejny proponuje Ci przepisanie gry w całości w php ;) - dodając ewentualnie javascript już na sam koniec do działającej wersji (żeby np. nie musieć przeładowywać strony).

Edit:

w dużym skrócie: php wykonuje się po stronie serwera, javascript po stronie klienta. Co za tym idzie, samym javascriptem nigdy tak naprawdę nie zabezpieczysz strony.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.