W sieci powstał nowy ciekawy portal, który nazywa się Vlogers.pl. Serwis ma na celu skupianie społeczności polskich vlogerów i jest to jedyny taki serwis w Polsce. Ciekawostką jest to, że portal został napisany w Yii Framework. Strona jest na razie w wersji beta, ale można znaleźć na niej już ciekawe vlogi użytkowników. Autorzy serwisu zapowiadają wkrótce jakieś ciekawe nagrody i funkcjonalności. Portal proponuje również emisję reklam w przystępnej cenie. Popularność polskich vlogów stale rośnie i mam nadzieję, że portal naprawdę może zyskać na popularności. Autor zapowiada bowiem również takie funkcjonalności jak ranking vlogerów, system partnerski, system wiadomości wewnętrznych i promocję użytkowników portalu w sieciach społecznościowych. Zapraszam do odwiedzenia http://vlogers.pl
Domyślnie każdy widget korzystający z paginacji pobiera style z domyślnego pliku CSS umieszczonego w frameworku Yii (pager.css). Z poziomy widgetu można ten plik wyłączyć i ustawić w głównym pliku CSS własne style pagera. Można również ustawić ścieżkę do własnego pliku ze stylami CSS dla pagera, co jest bardziej optymalne i nie generuje niepotrzebnych problemów.
Oto przykłady:
Wyłączenie pliku CSS pager.css
1 2 3 4 5 6 7 8 |
$this->widget('zii.widgets.CListView', array( 'ajaxUpdate'=>true, 'dataProvider'=>$promocje->search(), 'itemView'=>'_view', 'pager'=>array( 'cssFile'=>false, // Ustawiając cssFile na false wyłączamy domyślny plik pager.css ), )); |
Istnieje jeszcze wiele możliwości modyfikacji widgetów Yii, które opiszę innym razem jak widać powyżej ustawiając cssFile na wartość false wyłączamy domyślny plik pager.css
Podanie ścieżki do własnego pliku pager.css
1 2 3 4 5 6 7 8 |
$this->widget('zii.widgets.CListView', array( 'ajaxUpdate'=>true, 'dataProvider'=>$promocje->search(), 'itemView'=>'_view', 'pager'=>array( 'cssFile'=>Yii::app()->request->baseUrl."/themes/sklep/css/pager_promocje.css", // Tak wygląda prawidłowe skierowanie do własnego pliku css. ), )); |
W ten sposób każdy z naszych widgetów może mieć swój indywidualny styl lub plik ze stylami CSS
Niedługo przedstawię i wyjaśnię możliwe opcje widgetów w Yii Framework.
Yii Framework posiada wbudowane ładowanie skryptów JS. Jak wielu pewnie z was próbowało, chciałem bez zbędnych ceregieli po prostu wstawić odnośnik do bibliotek jquery i skryptu w standardowym html’u. Niestety, albo stety taka opcja działała tylko na głównej stronie, a natomiast na podstronach niestety nie ponieważ niektóre widgety yii frameworka również kożystają z biblioteki jQuery i ją rejestrują, co powoduje konflikt…
W Yii Framework wystarczy wywołać bibliotekę jQuery w odpowiednim miejscu naszej aplikacji Yii. Co to nam daje? Jeśli nasz widget rejestruje jQuery i posiadamy jeszcze inny skrypt który tą bibliotekę rejestruje i działa na kilku innych widokach to możemy zapomnieć o o podwójnym uruchomieniu tej biblioteki, ponieważ klasa jest zabezpieczona przed tego typu błędami. Jest to bardzo dobre rozwiązanie stosowane w wielu frameworkach.
Jak uruchomić bibliotekę jQuery w Yii Framework? To bardzo proste, wystarczy zarejestrować go za pomocą kodu:
1 2 3 4 5 6 |
//Rejestrowanie bibliteki jquery do aplikacji Yii <?php Yii::app()->clientScript->registerCoreScript('jquery'); // Rejestrowanie biblioteki jquery Yii::app()->clientScript->registerCoreScript('jquery.ui'); //Rejestrowanie jquery ui ?> |
Ze względu na różne zapotrzebowanie możemy ten kod umieścić w kontrolerach lub widokach naszej aplikacji.
Aby wszystko działało naprawdę poprawnie i bez problemów powinniśmy użyć metody registerScriptFile
i w ten sposób możemy dodać w kontrolerach i widokach naszej aplikacji nowy skrypt .js, który będzie działał prawidłowo. Można również w ten sposób rejestrować pliki css za pomocą metody registerCssFile
.
A teraz dokładnie jak to zrobić można zobaczyć poniżej:
1 2 3 4 5 6 7 8 |
//Dodanie pliku js i css do aplikacji Yii <?php $baseUrl = Yii::app()->baseUrl; $cs = Yii::app()->getClientScript(); $cs->registerScriptFile($baseUrl.'/js/twoj_skrypt.js'); //Dodanie pliku javascript $cs->registerCssFile($baseUrl.'/css/twoj_css.css'); //Dodanie pliku css ?> |
A co jeśli chcemy wstawić do aplikacji tylko malutki kodzik javascript? Do tego celu służy metoda RegisterScript:
1 2 3 4 5 6 7 8 9 10 |
//Dodanie skryptu do kodu aplikacji Yii <?php $cs = Yii::app()->getClientScript(); $cs->registerScript( 'nazwa_skryptu', 'document.write("Hello World!")', //Wiadomo o co chodzi :) CClientScript::POS_END // O tym napiszę niżej. ); ?> |
Co może jeszcze się przydać w wstawianiu javascript do aplikacji yii?
Możemy wybrać miejsce w którym ma wyświetlać się nasz skrypt. Są trzy możliwości:
-w nagłówku <head> (CClientScript::POS_HEAD)
-w treści strony(w miejscu gdzie bezpośrednio wstawiony jest kod – CClientScript::POS_BEGIN)
-na samym dole strony (W celu ładowania skryptów js na samym końcu- CClientScript::POS_END)
Po więcej opcji kieruję was do dokumentacji klasy CClientScript.
phpThumb() to prosta i lekka biblioteka operująca na popularnych formatach grafik powstała na silniku GD. Idealna do tworzenia miniatur zdjęć w takich formatach jak .JPG .PNG .GIF .BMP. Podstawowe operacje to zmniejszanie wymiarów zdjęć, przycinanie zdjęcia do konkretnego wymiaru(kadrowanie), rotacja itp. Jeśli potrzebujesz w łatwy i szybki sposób tworzyć miniatury zdjęć to ta biblioteka jest właśnie dla Ciebie.
Yii i phpThumb
Tworząc aplikację w Yii framework mamy do dyspozycji rozszerzenie EphpThumb i jedynymi rzeczami jakie trzeba w nim zrobić to skopiowanie rozszerzenia do folderu /protected/extensions/ oraz dopisanie w pliku /protected/config/main.php nowego komponentu co widać poniżej:
1 2 3 4 5 6 7 8 |
'components'=>array( 'phpThumb'=>array( 'class'=>'ext.EPhpThumb.EPhpThumb', //'options'=>array(optional phpThumb specific options are added here) ), ... |
Teraz możemy już korzystać z możliwości tej biblioteki. Przykładowa zmiana wymiarów zdjęcia:
1 2 3 |
$thumb=Yii::app()->phpThumb->create('../images/myImage.jpg'); //Ładujemy obrazek do biblioteki. $thumb->resize(100,100); //Zmiana wymiarów (100px x 100px) $thumb->save('../images/thumb.jpg'); /Zapis nowej miniaturki |
To tylko jedna z funkcji tej biblioteki. Jedną z kilku ciekawych funkcji jest też przycięcie obrazka do środka tzn. kadrowanie obrazu. Do tego celu służy funkcja adaptiveResize():
1 |
$thumb->adaptiveResize(200,200); |
Mając np. zdjęcie o wymiarach 1200x800px zostanie wycięty ze środka fragment o wymiarach 200x200px.
Dostępne są również takie funkcje jak rotateImage(), crop(), czy resizePercent(), które możecie sobie sprawdzić sami lub sprawdzając ich działanie na stronie phpthumb https://github.com/masterexploder/PHPThumb/wiki/Basic-Usage
Serdecznie zapraszam do korzystania z rozszerzenia EphpThumb i pozdrawiam Haensel.
Pewnego pięknego dnia przerzucając swoją aplikację na serwer klienta spotkała mnie dość ciekawa niespodzianka.
Error 500
CDbConnection nie zdołał otworzyć połączenia DB.
Pomyślałem sobie od razu, pewnie dane dostępowe do mojej bazy mysql się nie zgadzają… Jeszcze większą niespodzianką było to, że dane w pliku /config/main.php były w 100% poprawne. Szukając w sieci rozwiązania mojego problemu, nigdzie nie znalazłem jednoznacznej odpowiedzi na mój problem. Zdziwiony tym zjawiskiem użyłem magicznego skryptu skonstruowanego w php:
1 2 3 4 5 6 7 8 |
<?php $link = mysql_connect('localhost', 'mysql_user', 'mysql_password'); if (!$link) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close($link); ?> |
I co widzę? Działa :)
I wtedy tchnęła mnie jedna myśl aby zrobić to co powinienem zrobić na samym początku, czyli sprawdzić ustawienia serwera, oraz php.
Używając funkcji phpinfo():
1 2 3 4 5 |
<?php phpinfo(); ?> |
I wszystko mi się wyjaśniło, gdy zobaczyłem, że nie ma zainstalowanego sterownika PDO dla Mysql. Przypadek trochę dziwny, choć niektórym znany. Na szczęście PDO jest coraz bardziej popularne i u większości hostingodawców jest on dostępny. Oczywiście możecie sobie napisać funkcję korzystającą z PDO, aby sprawdzić czy działa, ale po co za dużo klikać. 🙂
Budując aplikację internetową, którą udostępnimy w sieci musimy wziąć pod uwagę fakt, że aby zaistniała w wyszukiwarkach internetowych odpowiednie będą pewne kroki w celu optymalizacji kodu. Dokładniej mówiąc chodzi o SEO (Search Engine Optimization), które polega na zoptymalizowaniu kodu pod kątem wyszukiwarek.
Istotnym krokiem w optymalizacji SEO jest ustawienie odpowiednich metatagów, czyli znaczników z których korzystają wyszukiwarki. Trzy najważniejsze z nich to:
1 2 3 |
<meta name="description" content="Twój krótki opis strony wyświetlany w wyszukiwarkach, zawierający w sobie słowa kluczowe" /> <meta name="title" content="Tytuł strony wyświetlany w wyszukiwarkach." /> <meta name="keywords" content="Słowa, kluczowe, dla, wyszukiwarek" /> |
Treść, meta-tagów należy zdefiniować z poziomu kontrolera:
controllers/SiteController.php:
1 2 3 4 5 6 7 8 |
class SiteController extends Controller { public $layout='//layouts/column1'; public $pageMetaDescription; public $pageMetaTitle; public $pageMetaKeywords; ... |
Następnie mamy kilka możliwości, możemy zdefiniować nasze meta tagi przed renderowaniem akcji np. Index:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public function actionIndex() { $this->pageMetaTitle = 'Przykładowy tytuł'; $this->pageMetaKeywords = 'Przykładowe keywords'; $this->pageMetaDescription = 'Przykładowe Description'; $dataProvider=new CActiveDataProvider('Oferta'); $this->render('index',array( 'dataProvider'=>$dataProvider, )); } ... |
Takie rozwiązanie można zastosować do dowolnej akcji.
Można również zdefiniować nasze meta tagi bezpośrednio w pliku widoku
np. views/site/contact.php w taki sposób:
1 2 3 4 5 |
<?php $this->pageMetaTitle = 'Przykładowy tytuł'; $this->pageMetaKeywords = 'Przykładowe keywords'; $this->pageMetaDescription = 'Przykładowe Description'; ?> |
Kiedy już mamy zdefiniowane nasze zmienne meta tagów możemy przejść do edycji layoutu:
views/layouts/main.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="pl" /> <?php if (!empty($this->pageMetaDescription)) { echo ' <meta name="description" content="' . $this->pageMetaDescription . '" /> '; } if (!empty($this->pageMetaTitle)) { echo ' <meta name="title" content="' . $this->pageMetaTitle . '" /> '; } if (!empty($this->pageMetaKeywords)) { echo ' <meta name="keywords" content="' . $this->pageMetaKeywords . '" /> '; } ?> ... |
Dzięki takiemu rozwiązaniu nasza aplikacja wyświetli zdefiniowane przez nas meta-tagi. Jest wiele możliwości zdefiniowania naszych metatagów takich jak z poziomu akcji kontrolera, jak i w samych plikach widoku co daje nam możliwość ustawienia meta w statycznych częściach aplikacji.
Ponieważ jakiś czas już grzebię sobie w Yii Framework jednym z nurtujących mnie zagadnień do zrealizowania było stworzenie formularza z możliwością uploadu pliku, zdjęcia. Mój formularz dodaje zdjęcie i plik dla przykładu wykorzystałem tutorialowy blog Yii. W tworzeniu stron internetowych niezwykle ważne są elementu formularza typu file. A więc zacznijmy od kontrolera, który będzie miał za zadanie zapisanie naszego pliku w określonej przez nas lokalizacji. Dla kontrolera musimy utworzyć bądź zmodyfikować dwie akcje actionCreate(), actionUpdate().
Kontroler:
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 |
public function actionCreate() { $model=new Post; if(isset($_POST['Post'])) { $model->attributes=$_POST['Post']; //Pobieramy atrybuty z formularza $model->image=CUploadedFile::getInstance($model,'image'); //Przypisujemy nazwę wysłanego pliku do atrybutu image modelu Post $model->file=CUploadedFile::getInstance($model,'file'); //Przypisujemy nazwę wysłanego pliku do atrybutu file modelu Post if($model->save()) { $images_path = realpath(Yii::app()->basePath . '/../files/images'); //określamy ścieżkę zapisu zdjęcia $files_path = realpath(Yii::app()->basePath . '/../files/files'); //określamy ścieżkę zapisu pliku $model->image->saveAs($images_path . '/' . $model->image); //zapis image $model->file->saveAs($files_path . '/' . $model->file); //zapis pliku // redirect to success page $this->redirect(array('view','id'=>$model->id)); } } $this->render('create',array( 'model'=>$model, )); } |
Funkcja Create jest dość prosta, ponieważ polega ona na pobraniu nazwy zdjęcia i pliku do zapisu w bazie danych, oraz na zapisie nowych plików pobranych poprzez formularz. Większy problem zaczyna się przy akcji Update, co opisałem dokładnie krok po kroku:
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 43 44 |
public function actionUpdate() { $model=$this->loadModel(); if(isset($_POST['Post'])) { $old_image = $model->image; // Zapisujemy w zmiennej stary atrybut image $old_file = $model->file; // Zapisujemy w zmiennej stary atrybut pliku $model->attributes=$_POST['Post']; / Pobieramy atrybuty z formularza //Zapisujemy do zmiennej pobrane dane z formularzy(jeśli pola były użyte) $image = CUploadedFile::getInstance($model,'image'); //Zapisujemy do zmiennej pobrane dane $file = CUploadedFile::getInstance($model,'file'); //Sprawdzamy, czy pole image było wypełnione, jeśli nie to zostanie użyta zmienna $old_image if (is_object($image) && get_class($image)==='CUploadedFile') { $model->image = $image; } else { $model->image = $old_image; } //Sprawdzamy, czy pole file było wypełnione, jeśli nie to zostanie użyta zmienna $old_file if (is_object($file) && get_class($file)==='CUploadedFile') { $model->file = $file; } else { $model->file = $old_file; } //Zapis plików if($model->save()){ if (is_object($image) && get_class($image)==='CUploadedFile') { $images_path = realpath(Yii::app()->basePath . '/../files/images/'); $model->image->saveAs($images_path.$model->image); } if (is_object($file) && get_class($file)==='CUploadedFile') { $files_path = realpath(Yii::app()->basePath . '/../files/files/'); $model->file->saveAs($files_path.$model->file); } $this->redirect(array('view','id'=>$model->id)); } } $this->render('update',array( 'model'=>$model, )); } |
Kolejnym elementem naszego formularza który przeanalizuję będzie model w którym ustawimy wszystkie reguły. Na początek definiujemy nasze dwie zmienne image, oraz file.
Model:
1 2 3 4 5 6 7 |
<?php class Post extends CActiveRecord { public $image; public $file; |
Teraz przechodzimy do funkcji rules(), gdzie ustawimy nasze reguły. Ja z powodu braku takiej potrzeby nie ustawiałem żadnych reguł po za rodzajem pliku.
Model:
1 2 3 4 5 |
public function rules() { return array( array('image', 'file', 'types'=>'jpg, gif, png, jpeg', 'allowEmpty'=>true), array('file', 'file', 'types'=>'zip, rar', 'allowEmpty'=>true), |
A więc jedyne, co nam pozostało do wykonania to edycja pliku widoku. Tak jak wspominałem, korzystałem z tutorialowego blogu yii tak więc edytowałem plik _form.php dla widoku Post, lecz można to zrobić z dowolnym formularzem np. wygenerowanym przez Gii. Wystarczy teraz wkleić kod widoku naszych pól image i file formularza.
Widok:
1 2 3 4 5 6 7 8 9 10 11 |
<div class="row"> <?php echo $form->labelEx($model, 'image'); ?> <?php echo $form->fileField($model, 'image'); ?> <?php echo $form->error($model, 'image'); ?> </div> <div class="row"> <?php echo $form->labelEx($model, 'file'); ?> <?php echo $form->fileField($model, 'file'); ?> <?php echo $form->error($model, 'file'); ?> </div> |
Najlepiej to wkleić przed ostatnimi elementami formularza lecz ułożenie jest dowolne 🙂
1 2 3 4 5 |
<div class="row buttons"> <?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?> </div> <?php $this->endWidget(); ?> |
Od teraz możemy się cieszyć uploadem plików i zdjęć z naszego formularza. Na dzień dzisiejszy nie potrzebowałem tworzyć akcji usuwania plików lecz może zabiorę się za to już wkrótce:)
Thanks for laret 🙂
Yii jest jednym z najszybszych i najciekawszych Frameworków w języku PHP. Właściwie najszybszym z jakim się spotkałem. Projektowanie stron internetowych dynamicznych to teraz żaden problem. Najciekawszą rzeczą, która mnie zainteresowała jest przeglądarkowy generator kodu Gii, który pozwala nam na automatyczne tworzenie kontrolerów, modeli, formularzy, modułów oraz CRUD – czyli create, read, update and delete, cztery podstawowe procedury na wpisach z bazy danych. Tworząc CRUD, powstaje nam nowy widok, który umożliwia przeglądanie rekordów tabeli, kasowanie aktualizowanie i usuwanie. Do tego celu generator tworzy również odpowiednie formularze. Bardzo ładnie napisana dokumentacja jest również częściowo spolszczona co bardzo ułatwia naukę tego frameworka. Te wszystkie czynniki sprawiają, że szybkie pisanie aplikacji staje się naprawdę możliwe.
Dopiero zaczynam przygodę z tym frameworkiem dlatego ucząc się będę opisywał następnych wpisach wszelkie zagadnienia dotyczące Yii. Serdecznie zapraszam na stronę projektu www.yiiframework.com
W Polskim internecie powstaje coraz więcej stron mobilnych. Czy są one poprawne? Czy działają zgodnie z naszymi urządzeniami?
Jak działa strona mobilna?
Tworzenie stron mobilnych wymaga dostosowania kodu witryny do przeglądarek instalowanych w tych urządzeniach, jak i również do wielkości wyświetlaczy.
Jak przeglądarka ma przejść do wersji mobilnej strony?
To ustawienie wymaga odpowiedniej konfiguracji serwera, lub zastosowania skryptów, najlepszym sposobem na przekierowanie do strony mobilnej jest zmiana ustawienia serwera Apache w pliku .htaccess, gdzie można ustawić przekierowanie po nagłówku przeglądarki.
Dlaczego taki sposób?
Nie wszystkie przeglądarki mobilne obsługują skrypty takie jak javascript, co może spowodować, że przekierowanie na stronę mobilną nie zadziała tworzenie stron olesnica…
Pierwszy wpis nie będę się ropisywał 😛