Jebanany | 2018-06-13 11:49:48 UTC | #1
Dzisiaj pokażę Wam, w jaki sposób umieścić tabelę z listą użytkowników na swojej stronie internetowej. Pomoże nam w tym TS3 PHP Framework oraz Bootstrap. Oczywiście, aby sobie pomóc korzystamy również z dokumentacji PHP.
INFO: (cały kod przedstawionego poradnika dostępny do pobrania na końcu postu)
Wykorzystamy do tego Boostrap - o nim poczytacie więcej na jego stronie. Nie będę zagłębiać się tutaj w to, jak wygląda tworzenie strony internetowej, po prostu przejdę do konkretów.
Skorzystamy również z witryn/witryny, która dostarcza przy pomocy CDN plików JavaScript, CSS itp.
Jak podaje Wikipedia:
Content delivery network (ang. CDN) - duży, rozproszony system dostarczania treści do wielu centrów danych i punktów wymiany ruchu (IX) w Internecie. Celem CDN jest udostępnianie zawartości o wysokiej dostępności i wydajności końcowym użytkownikom.
i co ważne:
Optymalizacja z użyciem CDN przynosi zazwyczaj niższe koszty za usługi hostingowe, przyspiesza wczytywanie stron internetowych oraz zwiększa odporność na przejściowe zwiększenie natężenia ruchu na obsługiwanej stronie.
Czyli zamiast pobierać np. skrypty i kaskadowe arkusze stylów z naszego hosta, użyjemy po prostu zewnętrznych linków, które przyspieszą działanie naszej strony i zapewnią 100% dostępność do tych plików.
Zazwyczaj znane projekty same utrzymują swoje biblioteki, ale istnieją popularne serwisy, które za darmo hostują wiele popularnych bibliotek - ułatwia to proces umieszczania takowych w swojej stronie. Np:
W swoim poradniku skorzystam z tych od GibHuba.
W tagu <head> umieszczamy potrzebne style (Bootstrap) oraz biblioteke JQuery - uzyskane ze strony GitHub.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tabela użytkowników na serwerze TeamSpeak 3</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<h1>Lista użytkowników online</h1>
<p>Tabelka</p>
</div>
</body>
</html>
Jeśli poprawnie stworzymy kod, strona powinna wyglądać tak:
To, jak uzyskać listę użytkowników, wiecie już z poprzedniego poradnika
https://forum.lvlup.pro/t/poradnik-ts3-php-framework-pobieranie-listy-klientow-dzialamy/1116
Teraz musimy tylko to ładnie ubrać i wpleść w tabelkę HTML. W tym celu umieszczamy pętlę w PHP wewnątrz tabeli i dla każdego użytkownika tworzymy oddzielny wiersz.
Kod takiej tabeli powinien wyglądać tak:
<table id="ts_users_table" class="table">
<thead>
<tr>
<th>Nickname</th>
<th>Czas online (sekundy)</th>
</tr>
</thead>
<tbody>
<?php
foreach($clients as $client){
if($client['client_type']) continue; //pomijamy ServerQuery
?>
<tr>
<td><?php echo $client['client_nickname']; ?></td>
<td><?php echo $client['connection_connected_time']/1000; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
Dodajmy jeszcze informację - kanał, na którym przebywa użytkownik. Pobieramy w tym celu listę kanałów na serwerze TeamSpeak 3.
$channels = $ts->channelList();
Następnie w naszej pętli dodajemy dodatkową kolumnę wyświetlającą kanał, na którym jest użytkownik:
<td><?php echo $channels[$client['cid']]; ?></td>
Dodajmy jeszcze try i catch oraz funkcje, które usprawnią wyświetlanie nicków, które mogą kłócić się z językiem HTML.
<?php
try{
foreach($clients as $client){
if($client['client_type']) continue; //pomijamy ServerQuery
?>
<tr>
<td><?php echo htmlentities($client['client_nickname']); ?></td>
<td><?php echo round($client['connection_connected_time']/1000, 0); ?></td>
<td><?php echo htmlentities($channels[$client['cid']]); ?></td>
</tr>
<?php
}
}
catch(Exception $e){
echo 'Wystąpił błąd podczas generowania listy użytkowników: <br>Kod błędu: <code><b>'.$e->getCode().'</b></code> oraz treść błędu: <b><code>'.$e->getMessage().'</code></b>';
}
?>
Funkcja htmlentities() zabezpiecza nas przed nieporządanymi dla HTML znakami np. <br> itp.
Funkcja round() zaokrągli liczbę sekund online (dzielimy czas online przez 1000, bo jest podany w mikrosekundach).
Natomiast zastosowanie try oraz catch było omawiane we wcześniejszym poradniku:
https://forum.lvlup.pro/t/poradnik-ts3-php-framework-laczenie-z-serwerem-oraz-bloki-try-catch/1081
Dzięki temu, podczas wystąpienia błędu - strona się nie wysypie, a pokaże komunikat np.:
Jeśli wszystko zrobimy zgodnie z poradnikiem otrzymamy taki rezultat:
Kolejna biblioteka! Cudownie. Ułatwi nam ona sortowanie danych, co za chwilę zobaczycie na screenie. Dodajemy ponownie z CDN (style, skrypty):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/css/dataTables.bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready( function () {
$('#ts_users_table').DataTable(); //id naszej tabeli
});
</script>
Użycie DataTables umożliwia nam wygodną paginację, sortowanie wierszy tabeli oraz wyszukiwanie bez potrzeby odświeżania strony:
Mam nadzieję, że teraz jeszcze lepiej rozumiesz to, jak korzystać z TS3 PHP Framework. Taką tabelkę możecie dowolnie przebudować i umieścić na swojej stronie internetowej. Warto zauważyć, iż każde odświeżenie strony powoduje ponowne pobranie danych z serwera TeamSpeak 3. W następnych częściach dowiecie się, jak zapisać dane o użytkownikach w pliku, aby pobierały się tylko co jakiś czas (np. co 1 minutę).
Tutaj jest dostępny cały kod do pobrania (paczka zip): gotowalistaklientow.zip
Piszcie w komentarzach, co myślicie o takich poradnikach. Wolicie gotowe rozwiązania? Czy chcecie wiedzieć jak to działa? Komentujcie i oceniajcie!
Timo | 2017-03-22 19:21:52 UTC | #2
Bardzo ciekawe, jak będę tworzył serwer teamspeaka to koniecznie zastosuję :)
A jeszcze pytanie - czy dałoby się z kolumny Aktualny Kanał usunąć oznaczenia [cspacer], [spacer] lub inne? Lub ewentualnie żeby sformatować tekst w tej kolumnie jedynie do liter (by wyświetlało litery, dla przykładu [cspacer] → Fajny Kanał ← wyświetlało samo Fajny Kanał) :D
anon82750602 | 2017-03-22 20:25:14 UTC | #3
Fajny dodatek na stronę gdy będę otwierał ts-a dla sieci
Jebanany | 2017-03-22 22:02:16 UTC | #4
Jak najbardziej jest to możliwe, istnieją funkcje w Frameworku, które to sprawdzają, ale ja preferują delikatną zmianę na takie coś.
Przygotowałem 3 funkcje
Trzeba pamiętać, że spacer’y nie mają swojego pid - spacer może być spacer’em tylko wtedy, gdy jest podkanałem serwera - nie będacy podkanałem żadnego kanału.
Przyjmijmy, że $lista_kanalow to nasza zmienna z kanałami:
function channelIsSpacer($cid){
global $lista_kanalow;
// sprawdzamy, czy w ogóle istnieje taki kanał
// sprawdzamy, czy jest spacer'em - czy jest podkanałem serwera
// dodany jest też warunek, czy kanał jest kanałem stałym
// kanały temporary i semi-permanent - nie mogą być spacerem
if(isset($lista_kanalow[$cid])){
return (preg_match("/\[[^\]]*spacer[^\]]*\]/", $lista_kanalow[$cid]['channel_name']) && $lista_kanalow[$cid]["channel_flag_permanent"] && !$lista_kanalow[$cid]["pid"]) ? true : false;
}
else{
return false;
}
}
// sprawdzamy typ spacer'a
// jakie wyrównanie tekstu
function channelSpacerType($cid){
global $lista_kanalow;
if(isset($lista_kanalow[$cid])){
if(!channelIsSpacer($cid) || !preg_match("/\[(.*)spacer.*\]/", $lista_kanalow[$cid]['channel_name'], $matches) || !isset($matches[1])){
return 'LEFT';
}
else{
switch($matches[1]){
case "*":
return 'REPEAT';
case "c":
return 'CENTER';
case "r":
return 'RIGHT';
default:
return 'LEFT';
}
}
}
else{
return false;
}
}
// uzyskujemy nazwę spacer'a - najbardziej trywialne rozwiązanie jakie istnieje
// podzielenie nazwy w miejscu wystąpienia pierwszego znaku "]"
function return_spacer_name($cid){
global $lista_kanalow;
$cid = $lista_kanalow[$cid]['channel_name'];
$array = explode(']', $cid);
array_shift($array);
$channel_name = implode('', $array);
return htmlspecialchars($channel_name);
}
W taki oto sposób można sobie poradzić z spacer’ami na swoim serwerze. Przykład budowy drzewa i zastosowania moich powyższych funkcji znajdziesz na Użytkownicy Online - Teamspeak Eqipa.pl - Nowy Wymiar Rozmów
Glupikocz | 2017-04-10 06:24:33 UTC | #5
Jebanany a można np zmienić sekundy na minuty lub godziny?
a tu oddzielny temat dało by rade zrobić coś takiego? lub jest to może jakiś gotowy skrypt bo widzę ty się na tym znasz?
DBanaszewski | 2017-04-10 06:45:43 UTC | #6
Pytanie nie do mnie, ale powiem :stuckouttongue:
Tak, jak najbardziej :slight_smile:
https://pastebin.com/HFPQXpmY
Po użyciu opcji czasNaGodziny(ilość sekund) nie musisz dawać go w echo (czyli echo czasNaGodziny(ilość sekund); jest błędem).