Logo mark Archiwum

[TS3 PHP Framework] Gotowa lista klientów

Poradniki
ts3
Jebanany
Jebanany

Tworzenie tabeli z użytkownikami na stronie

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)

Zaczynajmy - potrzebne narzędzia

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.

Tworzymy prostą i czytelną stronę internetową

W tagu `` umieszczamy potrzebne style (Bootstrap) oraz biblioteke JQuery - uzyskane ze strony GitHub.

 
			
		
		
		
	
		Tabela użytkowników na serwerze TeamSpeak 3
		
		
	
		
		
	
 
	
		
			Lista użytkowników online
			Tabelka

Jeśli poprawnie stworzymy kod, strona powinna wyglądać tak: 509x163

Tworzenie tabeli z użytkownikami online

To, jak uzyskać listę użytkowników, wiecie już z poprzedniego poradnika https://lvlup.rok.ovh/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:

 
	
		
			Nickname
			Czas online (sekundy)

Na jakim kanale przebywa użytkownik

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:

Małe zabezpieczenia

Dodajmy jeszcze try i catch oraz funkcje, które usprawnią wyświetlanie nicków, które mogą kłócić się z językiem HTML.

 
		
			
			
			
		
		Kod błędu: '.$e->getCode().' oraz treść błędu: '.$e->getMessage().'';
	}
?>

Funkcja htmlentities() zabezpiecza nas przed nieporządanymi dla HTML znakami np. `` 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://lvlup.rok.ovh/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.: 690x107

Jeśli wszystko zrobimy zgodnie z poradnikiem otrzymamy taki rezultat: 690x176

Dodajmy małe sortowanie - DataTables

Kolejna biblioteka! Cudownie. Ułatwi nam ona sortowanie danych, co za chwilę zobaczycie na screenie. Dodajemy ponownie z CDN (style, skrypty):

 
 
 
 
 
 
	$(document).ready( function () {
		$('#ts_users_table').DataTable(); //id naszej tabeli
	});

Ostateczny wygląd

Użycie DataTables umożliwia nam wygodną paginację, sortowanie wierszy tabeli oraz wyszukiwanie bez potrzeby odświeżania strony:

690x335

Podsumowanie

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ę).

Cały kod do pobrania

Tutaj jest dostępny cały kod do pobrania (paczka zip): gotowa_lista_klientow.zip

Propozycje

Piszcie w komentarzach, co myślicie o takich poradnikach. Wolicie gotowe rozwiązania? Czy chcecie wiedzieć jak to działa? Komentujcie i oceniajcie!

Timo
Timo Moderator forum.lvlup.pro

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
anon82750602

Fajny dodatek na stronę gdy będę otwierał ts-a dla sieci

Jebanany
Jebanany

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

  • do sprawdzenia, czy kanał jest spacer'em
  • jaki to typ spacer'a
  • uzyskanie tylko nazwy spacera

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
Glupikocz

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?

257x188

DBanaszewski
DBanaszewski α-tester v3

Pytanie nie do mnie, ale powiem 😛

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).