jQuery, PHP & Ajax: Edycja profilu

Autor: Arkadiusz Tobiasz 12 grudnia 2010

Dzisiaj pokażę jak z wykorzystaniem jQuery i Ajaxa stworzyć dynamiczną edycję profilu, trochę przypominającą tą na Facebooku. A więc do dzieła!

Rozpoczniemy od zaprojektowania tabeli w bazie danych. Tabela będzie miała nazwę users i 4 kolumny: user_id, username, password, profile

1
2
3
4
5
6
CREATE TABLE  `users` (
`user_id` INT NOT NULL PRIMARY KEY AUTO_INCREMENT ,
`username` VARCHAR(45) NULL UNIQUE,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);

Teraz chcemy wyświetlać dane z kolumny profile, którą będzie można edytować w tym celu tworzymy skrypt profile.php, gdzie w sekcji <body>…</body> umieszczamy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="mainbox">
   <a href="#" class="edit_link" title="Edytuj">Edytuj</a>
   <?php
   include("db.php"); // skrypt do łączenia z bazą danych
   $user_id = $session_id; // pobieramy identyfikator zalogowanego użytkownika z sesji
   $sql = mysql_query("SELECT profile FROM users WHERE user_id='".$user_id."'"); // pobieramy wartość kolumny profile
   $row = mysql_fetch_array($sql);
   $profile = $row['profile']; // przypisujemy wartość do zmiennej
   ?>
   <div class="text_wrapper">
   <?php
      echo $profile; // wyświetlamy pobraną zawartość
   ?>
   </div>
   <div class="edit" style="display:none">
    <textarea class="editbox" cols="23" rows="3"></textarea>
   </div>
</div>

Plik stylu powinien zawierać:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
body {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
}
.mainbox {
   width:250px;
   margin:50px;
}
.text_wrapper {
   border:solid 1px #0099CC;
   padding:5px;
   width:187px;
}
.edit_link {
   float:right
}
.editbox {
   overflow: hidden;
   height: 61px;
   border:solid 1px #0099CC;
   width:190px;
   font-size:12px;
   font-family:Arial, Helvetica, sans-serif;
   padding:5px
}

Jak możesz zauważyć div, którego nazwa klasy to edit nie jest wyświetlany poprzez dodanie atrybutu display:none. Zawiera on textarea, który będziemy chcieli pokazać w momencie kliknięcia w link edytuj. Wykorzystamy do tego jQuery. W sekcji <head>…</head> pliku profile.php umieszczamy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   // funkcja wywoływana w momencie kliknięcia w link Edytuj
   $('.edit_link').click(function(){
      $('.text_wrapper').hide(); // ukrywamydiva, w którym wyświetlany dane z kolumny profile
      var data = $('.text_wrapper').html(); // pobieramy zawartość tego diva do zmiennej data
     $('.edit').show(); // wyświetlamy diva zawierającego textarea
     $('.editbox').html(data); // umieszczamy zwartość zmiennej data w polu textarea
     $('.editbox').focus(); // ustawiamy kursor w polu textarea
   });

   // wyłączamy funkcję mouseup w przypadku pola textarea
   $(".editbox").mouseup(function(){
      return false
   });

   // funkcja wywoływana w momencie zmiany zawartości textarea
   $(".editbox").change(function(){
      $('.edit').hide(); // ukrywamy diva z polem textarea
      var boxval = $(".editbox").val(); // pobieramy zawartość pola textarea do zmiennej boxval
      var dataString = 'data='+ boxval;
      // wysyłamy zmienną boxval metodą POST do pliku update_profile.php
      $.ajax({
         type: "POST",
         url: "update_profile.php",
         data: dataString,
         cache: false,
         success: function(html){
            // w przypadku gdy operacja kończy się sukcesem
            $('.text_wrapper').html(boxval); // umieszczamy zwartość zmiennej w divie o klasie text_wrapper
            $('.text_wrapper').show(); // pokazujemy diva
         }
      });
   });
   // w momencie wystąpienia zdarzenia mouseup
   $(document).mouseup(function(){
      $('.edit').hide(); // chowamy diva z polem textarea
      $('.text_wrapper').show(); // pokazujemy diva z informacją o zmiennej profile
   });
});
</script>

Zawartość pliku update_profile.php będzie wyglądać następująco:

1
2
3
4
5
6
7
8
9
10
<?php
   include("db.php");
   if($_POST['data']) {
      $data = $_POST['data'];
      $data = mysql_escape_String($data);
      $user_id = $session_id;
      $sql = "UPDATE users SET profile = '".$data."' WHERE user_id='".$user_id."'";
      mysql_query( $sql);
   }
?>

Tradycyjnie demo dotępne jest pod tym adresem.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]