2013-06-28 2 views
1

안녕하세요 동료 프로그래머,AJAX 이미지 슬라이더

이 내 처음 AJAX를 사용 그래서 난 정말 도움 (프로젝트 마감이 다음 주입니다 만 몇 가지 더 내가 다 했어)가 필요합니다.

그래서 이론은 다음과 같은 : 나는 학생 프로젝트, 사람들은 판매를위한 자신의 주택을 광고 할 수있는 웹 사이트에 일하고 있어요

.

사용자 및 부동산의 관련 정보를 보유하고있는 MySQL 데이터베이스가 있습니다. (등 저장 id_property, id_user, 이름, 설명, 주소, ...)

  • 재산
  • propertyimages (저장 id_property, id_image, 경로, uploaddate)
  • : 재산에 관해서 나는 2 개 테이블이 내가 필요로 무엇

는 사용자가 슬라이드 쇼를 생성, 이미지 자체에 또는 아래에 이전/다음 버튼을 클릭 할 때까지 이미지를 한 번에 하나씩 보여주고, 자동으로 채워집니다 AJAX 코드 현재 이미지의 id_image가있는 숨겨진 텍스트 상자이므로 사용자는 d 버튼을 클릭 할 수 있습니다. 데이터베이스에서 이미지를 가져옵니다.

이 지금까지 내 코드는 다음과 같습니다

당신은 사용자에게 첫 번째 이미지를 표시해야
<?php session_start()?> 
<?php include 'w3.html'; ?> 
     <!-- put <title> code under here --> 
<?php include 'essentialhead.html'; ?> 
     <!-- put <head> code under here --> 

<?php include 'closeheadopenbody.html'; ?> 
      <!-- header --> 
      <?php include 'header.html'; ?> 
      <!-- content --> 
      <?php include 'row1clear.html'; ?> 
        <?php 
         $urlexplode = explode('?', "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"); 
         $token = end($urlexplode); 

         $connection = mysql_connect("localhost","root") 
             or die("Problem connecting to MySQL!"); 
         mysql_select_db("imobili"); 

         $propertyquery = mysql_query("SELECT * 
                 FROM property 
                 WHERE id_property='".$token."'");    
         $rowproperty = mysql_fetch_array($propertyquery); 
         echo $rowproperty['name']; 
        ?> 
      <?php include 'row2clear.html'; ?> 
        <?php 
         echo'<div class="profilewrapper"> 
           <div class="propertyslideshow"> 
            <div class="tablecell"> 
             <div id="slide" class="slider">'; **HERE IS WHERE I NEED AJAX TO SHOW THE IMAGES** 
              $imagesquery = mysql_query("SELECT * 
                   FROM propertyimages 
                   WHERE id_property='".$rowproperty['id_property']."'");     
              while($rowimage = mysql_fetch_array($imagesquery)) 
              { 
               echo'<img class="sliderimg" alt="no image" src="'.$rowimage['path'].'">';        
              } 

         echo'   </div> 
            </div> 
           </div> 
           <div class="propertytools">'; **IF THE USER IS THE OWNER OF THE PROPERTY, OR AN ADMINISTRATOR, HE GETS ACCESS TO THE FOLLOWING 3 TOOLS: USE AS MAIN PHOTO, DELETE CURRENT IMAGE, AND DELETE PROPERTY** 
            if($_SESSION['username'] == $rowproperty['username'] or $_SESSION['permissions'] == 'admin') 
            { 
            echo'<form class="property" method="post" name="uploadform" action="" enctype="multipart/form-data"> 
             <fieldset> 
             <legend>Upload another image</legend> 
             <input type="file" id="foto" name="foto"/><input class="submit" type="submit" value="Submit"/> 
             </fieldset> 
             </form> 
             <form class="property" method="post" name="uploadform" action=""> 
             <input type="hidden" name="currentimgid" value="**I NEED THE id_img here in real time!**"/> 


             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="setprev" value="Use this image as Preview"/> 
             **THE INPUT BELOW WILL POST THE id_image** 
             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="delimg" value="Delete this image"/> 
             <input onclick="submitform()" class="submitlink" type="submit" id="propform" name="delprop" value="Delete this property"/> 
             <script> 
              function submitform() 
              { 
               var r=confirm("Are you sure?"); 
               if(r==true) 
               { 
                document.propform.submit(); 
               } 
              } 
             </script> 
             </form>'; 
            } 
         echo' </div> 
           <div class="propertydetails"> 
            <div class="profiledetails">Date Of Construction</div>'.$rowproperty['dateconstruction'].' 
            <div class="profiledetails">Rent</div>'.$rowproperty['rentvalue'].' 
            <div class="profiledetails">Sell</div>'.$rowproperty['sellvalue'].' 
           </div> 
          </div>'; 



         echo' <form class="comment" name="commentform" action=""> 
           Leave a comment<br> 
           <textarea name="commentinput"></textarea> 
           <input type="submit" class="submit" value="Send"> 
           </form>'; 
          mysql_close(); 
        ?> 
        <?php 
         if(ISSET($_POST['delprop'])) 
         { 
          echo''; 
          $sql = "DELETE FROM property 
            WHERE id_property = ".$token; 
          mysql_query($sql); 

          $sql = "DELETE FROM propertyimages 
            WHERE id_property = ".$token; 
          mysql_query($sql); 
         } 
        //var_dump($_FILES['foto']); 
         if(ISSET($_FILES['foto'])) 
         { 
          $username = $_SESSION['username']; 
          //upload 
          $allowedExts = array("gif", "jpeg", "jpg", "png", "JPG"); 
          $explode = explode(".", $_FILES["foto"]["name"]); 
          $extension = end($explode); 
          //var_dump($extension); 
          if ((($_FILES["foto"]["type"] == "image/gif") 
          || ($_FILES["foto"]["type"] == "image/jpeg") 
          || ($_FILES["foto"]["type"] == "image/jpg") 
          || ($_FILES["foto"]["type"] == "image/pjpeg") 
          || ($_FILES["foto"]["type"] == "image/x-png") 
          || ($_FILES["foto"]["type"] == "image/png")) 
          && ($_FILES["foto"]["size"] < 200000000) //20MB 
          && in_array($extension, $allowedExts)) 
          { 
           if ($_FILES["foto"]["error"] > 0) 
           { 
           echo "Return Code: " . $_FILES["foto"]["error"] . "<br>"; 
           } 
           else 
           { 
           echo "Upload: " . $_FILES["foto"]["name"] . "<br>"; 
           echo "Type: " . $_FILES["foto"]["type"] . "<br>"; 
           echo "Size: " . ($_FILES["foto"]["size"]/1024) . " kB<br>"; 
           echo "Temp file: " . $_FILES["foto"]["tmp_name"] . "<br>"; 
           $path1 = "upload/".$username; 
           echo $path1; 
           $path2 = "upload/".$username."/".$token; 
            $dest = "upload/".$username."/".$token. "/". $_FILES["foto"]["name"]; 
            echo $dest; 
            if (file_exists("upload/" . $_FILES["foto"]["name"])) 
            { 
             echo $_FILES["foto"]["name"] . " already exists. "; 
            } 
            else 
            { 
            if (! is_dir($path1)) { 
             mkdir($path1); 
            } 
            if (! is_dir($path2)) { 
             mkdir($path2); 
            } 
            move_uploaded_file($_FILES["foto"]["tmp_name"], $dest); 
            } 
           } 
          $datetime = date_create()->format('Y-m-d H:i:s'); 
          $sqlimages = "INSERT INTO propertyimages (path, uploaddate, id_property) VALUES('$dest', '$datetime', '$token')";      
          //var_dump($sqlimages); 
          mysql_query($sqlimages); 
          } 
          else 
          { 
           echo "<script>alert(\"Wrong extension\")</script>"; 
          } 
         } 
        ?> 
      <?php include 'contentclose.html'; ?> 
      <!-- footer --> 
      <?php include 'footer.php'; ?> 
+0

자, 그럼 정확히 무슨 문제입니까? – Bojangles

+0

AJAX로이 작업을 수행하는 방법을 알지 못합니다. –

답변

0
  1. .
  2. 현재 이미지를 세션에 흰색으로 내립니다.
  3. 다음 이미지를 요청하는 버튼을 만듭니다.
  4. 다음 이미지를 서버에서 가져 오면 동일한 세션에서 새 이미지 색인을 흰색으로 내려서 계속합니다. 복잡한 코드는 작성할 수 없습니다.
0

jQuery과 같은 유틸리티 라이브러리를 사용하면 매우 도움이됩니다. $.ajax() 방법을 살펴보고 거기에서 그것을 파악할 수 있어야합니다. $.post()도 서버에서 데이터를 보내고 검색하는 속기 버전입니다. 예 :

$('.button').on('click', function(e) { 
    e.preventDefault(); 

    $.post('url.php', { data: 'here' }, function(result) { 
     // `result` contains the server response 
    }); 
}); 

url.php은 POST 데이터를 받아들이는 일반적인 PHP 스크립트 일뿐입니다. 어떤 것이 든 echo ed는 result의 콜백 함수로 되돌려 보내집니다.