Posted by
on 16 April 2013 - 12:55
Nazwa pliku: Rangi na forum (Web-Talk.pl)
Plik Dodał: zonic
Plik wysłano: 16 kwi 2013
Kategoria pliku: Darmowe pliki graficzne
Przedstawiam Wam pierwszą, bezpłatną paczkę od web-talk.pl.
Rangi dla forum dyskusyjnego. Paczka zawiera zarówno pliki .png rang jak i w pełni edytowalne pliki .PSD ze wszystkimi warstwami.
Zabrania się odsprzedaży plików jak i ich rozpowszechniania za pośrednictwem innego portalu niż web-talk.pl
Podgląd:
Posted by
on 26 January 2014 - 13:49
W tym poradniku pokażę jak stworzyć prosty formularz kontaktowy, obsługiwany ajaxem, czyli bez konieczności przeładowywania strony.
Zaczniemy od htmla, przedstawiam najprostszy formularz chyba z możliwych:
HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AJAX FORM</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js.js"></script>
<style>
.error{color:#f00;border:1px solid #f00;}
</style>
</head>
<body>
<form id="actionForm" action="send.php" method="post">
Imię: <input type="text" name="name" id="name" placeholder="Podaj swoje imię" /><br />
Temat: <input type="text" name="subject" id="subject" placeholder="Podaj temat kontaktu" /><br />
Wiadomość: <textarea name="message" placeholder="Wpisz wiadomość"></textarea><br />
Czy lew jest psem czy kotem? <input type="text" name="question" placeholder="Odpowiedz na pytanie" /><br />
<button type="submit">Wyślij</button>
</form>
</body>
</html>
Teraz w php odbierzemy informacje przesłane z formularza:
PHP (send.php)
<?php
//zapisujemy otrzymane wartości do zmiennych
$name = isset($_POST['name']) ? $_POST['name'] : '';
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$question= isset($_POST['question']) ? $_POST['question'] : '';
//na wstepie sprawdzamy czy formularz nie zostal wypelniony przez bota:
if( !in_array(strtolower($question),array('kot','kotem') ) ){
echo json_encode(array('status'=>false,'errors'=>array('question'),'msg'=>"Ty bocie ty!"));
exit;
}
//przygotowujemy sobie zmienne do zwrocenia
$status = true;
$error = array();
$msg = 'Dziękujemy zapraszamy ponownie';
//tutaj robimy walidację jaką chcemy, ja upewniam się że pole 'name' składa się z przynajmniej 3 znaków i składa się jedynie z liter, liczb, spacji oraz '-'
if( !preg_match("/^([a-zA-z0-9 -]{3,})$/",$name) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'name';
}
//tutaj upewniam się ze tytul nie jest pusty
if( !preg_match("/^(.+)$/",$subject) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'subject';
}
//tutaj upewniam się ze wiadomosc ma przynajmniej 10 znaków
if( !preg_match("/^((.*){10,})$/",$message) ){
//w przypadku niepoprawnego pola ustawiamy status na false i do tablicy $error dodajemy name pola z bledem
$status = false;
$error[] = 'message';
}
//jeżeli wystąpił jakiś błąd zmieniamy komunikat
if( !$status ){
$msg = "Proszę wypełnić formularz poprawnie";
}else{
//tutaj robimy co chcemy robić w przypadku poprawnych danych, np zapisujemy do bazy, wysyłamy maila, etc.
//możemy tu też sprawdzać czy docelowa akcja się powiedzie i jeżeli nie to zmieniamy status na false i msg na konkretną informacę
}
//wyświetlamy wynik całej operacji jako json
echo json_encode(array('status'=>$status,'errors'=>$error,'msg'=>$msg));
exit;
Jeżeli teraz wysłalibyśmy taki formularz to strona by się przeładowała do pliku send.php i otrzymalibyśmy goły json z wynikami operacji. Żeby to zmienić potrzebny nam jest odpowiedni skrypt JavaScript (musimy mieć załączoną bibliotekę jquery).
JAVASCRIPT (js.js)
$(document).ready(function(){
$("form#actionForm").submit(function(e){
e.preventDefault(); //
var form = $(this);
$.post(
form.attr('action'),
form.serialize(),
function(r){
if( r.status ){
form.html(r.msg);
}else{
alert(r.msg);
form.find('.error').removeClass('error');
for( var i=0;i<r.errors.length;i++ ){
var name = r.errors[i];
form.find('input[name="'+name+'"],textarea[name="'+name+'"]').addClass('error');
}
}
return;
},
'json'
);
});
});
Przeanalizujmy źródło js:
3: e.preventDefault() - dzięki tej linijce formularz się nie wyśle standardową akcją
5: $.post - wysyłamy formularz za pomocą AJAXA, requestem POST (można użyć $.get)
6: form.attr('action') - ustawiamy cel wysłania formularza na taki jaki jest w htmlu ustawiony action
7: form.serialize() - przetwarzamy wartosci wszystkich pol formularza na stringa i przekazujemy je do skryptu php
8: function® - jako parametr callback-u (funkcji wywołanej po otrzymaniu odpowiedzi od serwera) podajemy odpowiedź serwera
9: if( r.status ) - sprawdzamy czy w ospowiedzi jest ustawiona wartość status na true
10: form.html(r.msg) - jeżeli powyższe tak to wyświetlamy w miejsce formularza podziękowanie
jeżeli powyższe nie to:
12: alert(r.msg) - wyświetlamy błąd
13: form.find('.error').removeClass('error') - usuwamy wszystkim elementom formularza klasę 'error'
14-17: for(...){ ... } - przelatujemy przez wszystkie błedy i błędnym polom ustawiamy klasę error - za mocą css wyrózniamy te pola
22: 'json' - jako ostatni parametr funkcji post podajemy typ danych jakie otrzmyamy od serwera
DEMO: http://web-talk.pl/demo/933-formularz/
DOWNLOAD: 
formularz.zip 4.45KB
0 downloads
Jeżeli masz jakieś propozycje zmian lub rozbudowy, czekam na informację.
Poradnik jest własnością autora zgodnie z ustawą z dnia 4 lutego 1994 roku o prawie autorskim i prawach pokrewnych. Publikowanie ich na innych forach i serwisach internetowych bez wiedzy i zgody autorów jest surowo zabronione.
Posted by
on 09 July 2013 - 00:06
Posted by
on 09 July 2014 - 20:48
Siemanko!
Mam chwilę aby podzielić się z wami podstawami o AngularJS, którego mam nadzieje zacznie używać więcej ludzi w Polsce 
Link do strony domowej: https://angularjs.org/
AngularJS to JavaScriptowski framework MVW, wypluty przez google, który jest dość łatwy w uzyciu, bardzo szybko wykonamy rzeczy, które w czystym JS zajmują o wiele więcej czasu i posiada on bardzo dużo plusów na tle pozostałych z tej kategorii.
Dobra, pierwsze co to zacznijmy od 'zainstalowania' biblioteki. Stwórzmy prosty dokument z dodanym frameworkiem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mój pierwszy skrypt!</title>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
// document body here!
</body>
</html>
Jesli mamy już stworzony plik, który zawiera plik z AngularJS, teraz czas na wykonanie kilku prostych poleceń, które 'ożywią' nasz dokument!
Piwersze z nich to dodanie 'ng-app' jako wbudowanej dyrektywy, która definiuje naszą aplikacje. Wszystko pomiędzy tą dyrektywą co związane jest z Angularem, będzie brane pod uwagę przy wykonywaniu skryptu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mój pierwszy skrypt!</title>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
</head>
<body>
<div ng-app>
<input type="text" ng-model="q">
<span>{{q}}</span>
</div>
</body>
</html>
Tutaj mamy do czynienia także z wbudowaną dyrektywą jaką jest ng-model. Generalnie prefiks 'ng' jest zarezerwowany dla wbudowanych dyrektyw w tym frameworków.
ng-model definiuje model danych, które są sprawdzane pod kątem zmian oraz przetwarzane w tym frameworku. Działanie to jest trawione w definicji zwanej digest cycle ale o tym troszkę później. ng-model można określić jako model danych wysyłanych do rdzenia frameworka Czyli jak wpiszemy w pole tkstowe tekst, Angular przetrawi go i zwróci wynik końcowy natychmiast.
Jak widać, użyłem także tagów {{ }} typowych dla AngularJS, pomiędzy nim, w prostszy sposó (co nie znaczy że najlepszy) definiujemy naszą treść, którą Angular wypluje - dobrym porównaniem jest 'echo' w PHP.
Tutaj można zobaczyć proste demo: http://jsfiddle.net/5Tb88/
Czyż nie jest łatwe ? Jest. Jednakże to jest początek góry lodowej, która czeka nas do wyuczenia, jeśli chcemy oczywiście cokolwiek tworzyć w tym frameworku.
To są akurat podstawy podstaw, opisane moimi słowami, myślę że to taki przedsmak tego co opiszę w następnych tematach. Chciałbym je rozdzielić na więcej i mniejszych tematów, ponieważ z doświadczenia wiem, że z tym co za dużo to i nie zdrowo.
Także nie długo kolejna część, bardziej treściwa na temat ogólnie dyrektyw, wbudowanych dyrektyw w AngularJS oraz stworzymy jakiś prosty skrypcik, który będzie korzystał z ich mocy
Tymczasem zachęcam do czytania przede wszytskim dokumentacji i powodzenia w nacue tym, którzy są zainteresowani w tym temace
Posted by
on 11 April 2014 - 20:44
Kiedys sie korzystalo z darmowek. Teraz to strach tykac nawet i te platne.
Jak masz dobry content to i ruch sam przyjdzie.
Powiedział to kolega od warezów...
Posted by
on 26 March 2014 - 00:01
Moim zdaniem słaby hosting, nie przypadł mi do gustu i miałem z nim dużo problemów. Najlepiej jest postawić na linuxpl.com lub speedhost.pl
Posted by
on 28 February 2013 - 22:41
Posted by
on 07 September 2013 - 21:12
Jeśli chcemy stworzyć na swoim forum wysuwany Like Box Facebooka to możemy skorzystać z wtyczki:
Facebook Slide Fanpage
Instalujemy to rozszerzenie i w zasadzie możemy cieszyć się Like Boxem.
Niestety czasami efekt wysuwania nie działa. Wtedy musimy zrealizować następujące kroki:
- Wybieramy nasz styl w panelu administracyjnym i przechodzimy do pliku indoFacebookSlide
- Odnajdujemy w tym pliku poniższy fragment:
<!-- <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type='text/javascript'>!window.jQuery && document.write('<script src="{style_images_url}/js/jquery.min.js"><\/script>')</script> -->
i usuwamy tagi komentarza. (tj. <!--- oraz -->)
I voila! Teraz powinno wszystko hulać
Posted by
on 31 January 2016 - 14:54
Instalujesz Gulpa globalnie czyli "npm install -g gulp"
Wchodzisz do swojego katalogu z projektem i tam już powinieneś mieć package.json - wtedy byś tylko zrobił "npm i" i by zainstalowało wszystkie zależności.
Jeśli go nie masz to robisz od początku czyli "npm init". Potem możesz dodać te swoje dev zależności: "npm install --save-dev gulp" itd.
Gulpfile też powinien być w głównym folderze ale chyba ścieżki musisz w nim poprawić.
Jak potrzebujesz tylko proste rzeczy robić to Gulp czy Grunt jest zbędny. Wszystko możesz zrobić przy pomocy npm'a.
Posted by
on 21 September 2015 - 15:20
W tym przypadku słówko this wskazuje na element, który został kliknięty.
Możesz tą metodę wywołać po prostu tak: Locate.setAttributes()
Posted by
on 25 August 2015 - 12:58
Jak nadać własne style elementom input radio i checkbox?
Wbrew pozorom nie jest to trudne zadanie. Jednak wiele osób nie wie jak to zrobić, bowiem nie da się nadać stylów tym elementom w standardowy sposób. Taki sposób nie zadziała:
input[type=checkbox] {
background: red;
border: 1px solid red;
}
Jak więc osiągnąć zamierzony efekt?
Jest to bardzo proste. Zazwyczaj elementowi input towarzyszy label i to on przejmie rolę tego pola.
<input type="checkbox" name="custom1" id="custom1"> <label for="custom1"> Label</label>
Dlatego więc ukryjemy nasz input właściwością display: none i najzwyczajniej ostylujemy element label. Nie możemy jednak zamienić całego label, ponieważ wewnątrz może znajdować się tekst opisujący nasze pole. Użyjemy do tego celu pseudoklasy :befor, po to żeby pole checkbox znalazło się przed naszym opisem.
label:befor powinien mieć pozycję absolutną, aby móc dokładnie ustalić jego położenie, a także być elementem blokowym (display: block). Reszta stylów (wysokość, szerokość, kolory) zależą od naszego uznania. Dodatkowo w poniższym przykładzie została dodana właściwość transition, dzięki temu osiągniemy efekt płynności podczas zaznaczania naszych pól.
W celu określenia co ma się stać gdy element będzie zaznaczony lub zablokowany należy użyć pseudoklas, kolejno :checked i :disabled
W celu uzyskania zamierzonego efektu należy zmienić, według uznania, właściwości background-color, border-color, width, height. Zachęcam do eksperymentowania.
Demo: http://jsfiddle.net/writen/9L9bamcs
input[type=checkbox], input[type=radio] {
display: none; /* ukrywamy nasz input */
}
input[type=checkbox] + label, input[type=radio] + label {
position: relative;
padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */
}
input[type=checkbox] + label:before, input[type=radio] + label:before {
position: absolute;
content: "";
display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */
width: 10px;
height: 10px;
top: 0; /* ustalamy pozycje */
left: 0;
cursor: pointer; /* dodamy jeszcze odpowiedni kursor */
transition: all .4s ease;
-webkit-transition: all .4s ease;
background-color: #cccccc;
border: 3px solid #cccccc;
}
/* checkbox */
input[type=checkbox] + label:before {
border-radius: 2px;
}
/* radio */
input[type=radio] + label:before {
border-radius: 50%; /* aby input radio był okrągły */
}
/* gdy zaznaczony */
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
background-color: #ffffff;
}
/* gdy zablokowany */
input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before {
background-color: #b6b6b6;
border-color: #b6b6b6;
}
/* gdy zaznaczony i zablokowany */
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before {
background-color: #cccccc;
border-color: #b6b6b6;
}
Posted by
on 03 February 2015 - 02:26
Czym jest LAMP(Linux, Apache, MySQL, PHP)?
Jest to podstawowy zbiór programów zapewniający platformę serwerową dynamicznych stron WWW w którego skład wchodzą:
). Aby swobodnie zainstalować LAMP potrzebujemy konta root, jeśli nie mamy do niego dostępu każdą komendę poprzedzamy komendą sudo.
1. Instalacja Apache
Wpisujemy komendę uaktualniającą system.
apt-get update
Instalujemy serwer Apache
apt-get install apache2
Po instalacji możemy sprawdzić czy serwer działa wchodząc na adres IP serwera lub podpiętą domenę do niego domenę. Powinien być wyświetlony tekst:
It works!
2. Instalacja MySQL
Wraz z serwerem MySQL instalujemy moduły powiązane z Apache oraz PHP.
apt-get install mysql-server libapache2-mod-auth-mysql php5-mysql
Gdy tylko MySQL zostanie zainstalowane aktywujemy go komendą:
mysql_install_db
Ostatnią czynnością związaną z MySQL będzie uruchomienie skryptu zabezpieczającego serwer.
/usr/bin/mysql_secure_installation
Wyświetli się komunikat o wprowadzeniu hasła MySQL.
Enter current password for root (enter for none):
Później zapyta nas czy chcemy usunąć konta anonimowe.
Remove anonymous users? [Y/n]
Jeśli chcemy to wpisujemy Y, jeśli nie to n.
Kolejnym pytaniem będzie czy chcemy zablokować zdalny dostęp do konta root.
Disallow root login remotely? [Y/n]
Następnie, czy chcemy usunąć bazę o nazwie test oraz dostęp do niej.
Remove test database and access to it? [Y/n]
I ostatecznie, czy chcemy odświeżyć przywileje.
Reload privilege tables now? [Y/n]
3. Instalacja PHP
Czas na instalację PHP do którego dodajemy moduł związany z Apache oraz moduł odpowiadający za szyfrowanie.
apt-get install php5 libapache2-mod-php5 php5-mcrypt
I gotowe! LAMP zainstalowany.
Dodatkowo możemy doinstalować moduły PHP.
Moduły PHP
Instalujemy je wpisując:
apt-get install nazwa modułu
np.
apt-get install php-adodb
Pełną listę modułów można ujrzeć wpisując:
apt-cache search php5-
4. Restart Apache
Ostatni krok to restart serwera Apache, który można dokonać za pomocą komendy:
service apache2 restart
Aby sprawdzić czy wszystko działa tworzymy nowy plik PHP.
nano /var/www/index.php
lub
vim /var/www/index.php
Wpisujemy:
<?php phpinfo(); ?>
Zapisujemy i wchodzimy ponownie na adres swojego serwera.
Jeśli wszystko się powiodło powinniśmy ujrzeć informację nt. PHP oraz naszego serwera.
Posted by
on 18 January 2015 - 00:41
Zapewne chcesz osiągnąć dodatkowo pełen ekran. Bo teraz u mnie na dużej rozdzielczości to słabo wygląda.
Polecam Ci rozwiązanie typu:
body{
background: url(../img/images/pic01.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Posted by
on 27 May 2013 - 21:34
W dziale download u nas na forum.
Posted by
on 01 April 2014 - 14:12
Ok zbadałem ten przypadek z braku zajęcia
thx.php
if(!$b) {
$post['thanks'] = "<a class=\"thanks\" id=\"a{$post['pid']}\"
onclick=\"javascript:return thx({$post['pid']});\"
href=\"showthread.php?action=thank&tid={$post['tid']}&pid={$post['pid']}\">Podziękuj</a>";
}
else if($mybb->settings['thx_del'] == "1") {
$post['thanks'] = "<a class=\"removeThanks\" id=\"a{$post['pid']}\"
onclick=\"javascript:return rthx({$post['pid']});\"
href=\"showthread.php?action=remove_thank&tid={$post['tid']}&pid={$post['pid']}\">Nie dziękuj</a>";
}
Tutaj wywaliłem na dobre <img> i ustawiłem w linku treść, którą sprawdza się po odświeżeniu przykładowo.
Kolejną linijkę wywaliłem z xml'a (<image>)
$output = "<thankyou>
<list><![CDATA[$list]]></list>
<display>".($list ? "1" : "0")."</display>
<del>{$mybb->settings['thx_del']}</del>
</thankyou>";
echo $output;
Usunąłem to bo przecież tego nie chcesz mieć, a tylko CSS.
Teraz pokaże co zrobiłem żeby tekst się zmieniał. Każdorazowo po kliknięciu leci nowe żądanie a więc przypisałem to tak:
thx.js
function thx_action(response)
{
lin=thx_common(response)
if(lin!=null)
{
lin.onclick= new Function("","return rthx("+pid+");");
lin.href='showthread.php?action=remove_thank&pid='+pid;
lin.textContent = "Nie dziękuj";
}
}
function rthx_action(response)
{
lin=thx_common(response)
if (lin!=null)
{
lin.onclick = new Function("", "return thx(" + pid + ");");
lin.href = 'showthread.php?action=thank&pid=' + pid;
lin.textContent = "Podziękuj";
}
}
Dodałem do nich lin.textContent i jeśli klikniesz w link to wywołasz funkcję która ustawi tekst odpowiedni dla akcji.
Z tego pliku poleciało także to:
img = document.getElementById('i' + pid);
img.src = xml.getElementsByTagName('image').item(0).firstChild.data;
Powinno zadziałać. U mnie błędów nie ma.
Teraz tylko dodaj klasę do <a> i będziesz mógł stylowac swój button 
Posted by
on 20 February 2014 - 14:49
Wrzuciłem concrete5 na FTP i możecie sobie tutaj przetestować możliwości skryptu:
http://webbarta.drl.pl/concrete/
Na samym dole strony jest odnośnik do logowania:
login: demo hasło: demowebtalk
Posted by
on 07 January 2014 - 04:51
Jak masz dużo czasu, to najlepsza jest praktyka. Tj. jakiś kurs podstaw, a później po prostu robić strony. Gdy utkniesz na jakimś problemie google pomoże. Raz, drugi i nauczysz się nowych rzeczy
Posted by
on 25 March 2013 - 07:54
W skrócie chodzi o to, że dostajesz informacje o tym czy strona nie zawiera jakiś błędów, robot google nie może odczytać czegoś, jak strona nie jest dostępna dłuższy czas to nawet e-mail na pocztę dostaniesz. Ponadto jest tam podgląd na linki zewnętrzne prowadzące do twojej strony. Niestety nie jest to bardzo dokładne, ale lepiej takie niż żadne
Dobrze to mieć i sobie sprawdzać co kilka miesięcy czy wszystko ze stroną jest OK.
Posted by
on 03 May 2015 - 19:34
No zapomniałeś wpisać literki e.
$("#submit").click(function(e) {
Patrz w konsoli javascript jakie masz błędy.
Posted by
on 23 April 2015 - 13:41
Aaa że w ten sposób
Obędzie się tutaj bez gita ;p taki suchar
Projekt zonic Kodowanie MediaInfini
Community Forum Software by IP.Board 3.4.6
Licensed to: Web-talk.pl
