Emmet - dokumentacja

Plugin Emmet jest popularnym rozszerzeniem do edytorów programistycznych takich jak: Notepad++, Sublime Text, Visual Studio Code itp. Najlepiej emmet działa w dwóch ostatnich wymienionych programach. 

Emmet pozwala zaoszczędzić pisania kodu od zera, nawet jeżeli samo stworzenie dokumentu dla strony html5, jest krótkie, to i tak już daje szablon. Przykładowo, tworząc stronę w html5, to wystarczy wpisać html:5 i nacisnąć klawisz tab, a już ukaże się nam szablon. Resztę wystarczy uzupełnić i inne linijki meta itp.

Dokumentacja Emmet jest na tej stronie  Emmet dokumentacja  i można też pobrać pdf z dokumentacją o ile tego potrzebujemy:)

Bootstrap 4 - nowości i podstawowe porady

Temat jest spóźniony czasowo i dlatego dopiero teraz piszę o ostatniej wersji Bootstrap 4, nie znaczy, że dopiero teraz obudziłem się lub zobaczyłem, że jest.

Pisałem już wcześniej na tym blogu o frameworku bootstrap, ale była to wersja 2. Wiele zmian zaszło, chociażby pasek menu oraz stare ikony, które były, nie działają (działają w wersji 2). W poprzednim temacie pisałem jak zmienić tło w plikach bootstrap lub w pliku CSS.

Jak zaimplementować nowego bootstrapa na własnej stronie, jest opisane tutaj pod podanym linkiem:

https://getbootstrap.com/docs/4.1/getting-started/introduction/. 

Warto zaktualizować bootstrapa na własnej stronie! Jeżeli chodzi o ikony, które działały w wersji 2 i są na tej stronie: https://getbootstrap.com/docs/3.3/components/, a w nowej wwersji nie działają, to należy użyć innych ikon i są podane linki do stron na bootstrapie 4 tu:

https://getbootstrap.com/docs/4.1/extend/icons/. Dlaczego nie pokazuje zrzutów? Chciałbym, aby czytelnik sam zaimplementował framework jak i ikony. 

Co do ikon na stronie, to będzie osobny temat. A teraz czas na podstawowe porady dotyczące bootstrap 4.

Będą te same porady, które pisałem już wcześniej, ale przedstawię inaczej:

Własny plik CSS - własne zmiany na stronie

Zamiast grzebać w stylach bootsrapa, lepiej stworzyć własny plik CSS, aby dokonywać stron na swojej stronie. Zakładam, że stworzyłeś/aś nowy plik CSS. 

Tło:

Jeżeli chcemy zmienić tło, ale nie chcemy nic zmieniać w stylach frameworka, to piszemy:

BODY{ background-color: #000000 !important;} - zmiana tła, może być też sam background:)

Framework daje własne style. Na formularze, na różne elementy w HTML5 np: nav, section, artitle, footer, header itp.

Aby nadać własny wygląd, niż jaki jest obecny, to wystarczy napisać w pliku CSS:

Nazwa elementu np: footer,
A następnie podać swoje wartości i tak wygląda całość:
footer{
background-color: #222222;
width: 300px;
height: 100px;
}
Powyższy przykład pokazałem, jak stylizować.

Na zakończenie, jeżeli uważasz, że to banał, to masz rację. Ponieważ przedstawiłem podstawy, które mają pomóc początkującym, nie weteranom, którzy tworzą strony nie od dziś.

  

Przyszłość PHP - Czy warto uczyć się tego języka

Wielu początkujących zadaje sobie pytanie, czy warto uczyć się języka PHP? Jaki jest dziś język PHP a co daje konkurencja? W tym temacie  napiszę, czy warto uczyć się języka PHP.

Dziś język php jest w wersji 7 i wiele nowych funkcji wprowadziło a jakich, to odsyłam do strony głównej, ponieważ, nie jest to temat na funkcje PHP wersji 7.

Ale odpowiedzmy sobie na pytanie, czy dziś warto uczyć się języka PHP? 

Odpowiedź brzmi, TAK!, warto i dlaczego?

•  są oferty pracy, które poszukują programistów PHP,
•  jest dużo hostingów z tym językiem,
•  jest popularny!

A jakie są wady tego języka? Zanim napiszę o wadach, to jeszcze napiszę o tym, dlaczego warto uczyć się języka php. PHP to nie tylko nauka samej składni, ale też poznanie licznych frameworków, począwszy od CakePHP, Symfony, Zen Framework po CodeIgniter i bardziej popularny, lepszy od poprzedników Laravel. I też wymagają pracodawcy znajomości, chociaż jednego frameworka z tych wymienionych. 

Dobrze, a wady? PHP jeżeli chodzi o połączenie z bazą danych, to ma dwa jeszcze zalecane  sposoby, a nimi są: new mysqli (powoli od tej metody odchodzi się) i PDO zalecane i coraz więcej ludzi przechodzi na tą metodę. Nie oznacza, że stosując new mysqli, aplikacja nie będzie działać, czy przestanie działać za 5 lat, nie, ale wtedy stanie się już przestarzała jak mysql_query, której już nie zaleca się!

Język php, to też CMS-y i czasem bywa  kłopotliwe stosowanie tego języka, że nasza strona wolniej chodzi. Ja mimo to, jestem za uczeniem się  języka PHP!

PHP a konkurencja

Zadajmy sobie kolejne pytanie, jak bardzo rozwinął się język PHP na tle innych języków, w których można tworzyć aplikacje internetowe?

PHP nie rozwinął się tak jak inne języki, była wersja 5, później 5.5, 5.6. Następnie, miała być wersja 6, ale wycofano i po danym czasie dano wersję 7 języka php. W między czasie, też powstały nowe frameworki np: wyżej wymieniony CodeIgniter, czy Laravel. 

JavaScript - dużo lepiej rozwinęła się niż PHP. Kiedyś JS, był zwykłym językiem a teraz powstało na bazie JS wiele bibliotek, zaczynając od JQuery, Node.JS, Angular.JS po React i Vue.js.

Dziś za pomocą JS, można stworzyć CMS, który lżejszy jest i co ważne, szybciej ładuje się. Dlatego, oprócz nauki PHP, warto też uczyć się JavaScript. 

Powstały też technologie .NET, Ruby, Python itd. Jak widać, konkurencja jest silna i nie należy ograniczać się tylko do jednej technologii webowej. Później może okazać się, że PHP na hostingu zostanie usunięty!

CKEditor i TinyMCE - instalacja obu edytorów na stronę internetową

W temacie dotyczącym porównania obu edytorów, przestawiłem różnice oraz pokazałem jak wyglądają. Wspomniałem na końcu, że kolejny temat, będzie dotyczyć konfiguracji obu edytorów oraz integracji pluginu KCfinder, darmowego rozszerzenia ładowania zdjęć do swoich tekstów. 

W tym temacie omówię, tylko konfigurację obu edytorów a w kolejnym instalacje rozszerzenia KCFinder.
Zacznę od instalacji CKEditora.Nie muszę pisać, ale zakładam, że wybrałeś odpowiednią wersję CKeditora z tej strony https://ckeditor.com/ckeditor-4/download/  z trzech możliwych wersji:

Następnie, pobierz i wypakuj do swojego katalogu, w którym ma działać strona z edytorem. Po rozpakowaniu, będziesz miał różne katalogi oraz luzem dwa pliki: ckeditor.js i config.js, na razie nigdzie nie umieszczaj i upewnij się, że będzie Ci działać. U mnie tak wyglądają katalogi po rozpakowaniu:

 Aby można było ujrzeć rezultat, wystarczy, że twój kod, będzie tak wyglądać.

Zauważ, że na górze ramach head jest dodany plik ckeditor.js. Jest to ścieżka do pliku, bez niego nie zadziała edytor, będzie samo pole textarea. Jak zauważyłeś, name w textarea jak i CKEDITOR.replace('editor1'), mają taką samą nazwę. Jeżeli wszystko przebiegło tak jak ja mam, to edytor powinien działać. Wygląd już pokazałem we wcześniejszym temacie, więc pominę dodawanie ponownego zrzutu edytora. 

Oprócz plików ckeditor.js i config.js, też jest ważny plik build-config.js, jednak w tym pliku nic się nie zmienia a jak już mamy skonfigurować i dodawać dodatkowe pluginy, to konfigurujemy w pliku config.js. 

Czas na instalację edytora TinyMCE

Tu również zakładam, że pobrałeś odpowiednią wersję i rozpakowałeś do katalogu, w którym będzie działać edytor. Po rozpakowaniu powinieneś mieć takie pliki:

Nie zwracaj na dużą ilość katalogów, ponieważ ja już dodawałem inne pliki z obsługą dodawania tekstu na stronę z obsługą bazy danych.
Mój edytor jest akurat w pliku dodaj.php i bez znaczenia jest, czy w index.php, czy w innym pliku, będzie kod edytora.
U mnie plik dodaj.php (fragment, gdzie jest kod odpowiadający za działanie edytora) wygląda tak:

I to już wszystko, żadnego kodu w atrybutach textarea nie dodajesz! Pamiętaj, aby było id="textarea" w linii po name. I nie zapomnij dodać linijki w ramach <head></head>, która odnosi się do skryptu obsługującego edytor:

<script src='js/tinymce/tinymce.js'></script> 

Na powyższym obrazku jest pokazany fragment kodu odpowiadający za działanie kcfindera, który jest bezpłatnym dodatkiem do obu edytorów. A teraz pokażę sam  kod odpowiadający za kcfinder:

Dlatego, nie martw się, że u mnie jest więcej kodu, ale ten kod jak i nad nim zrzut, będzie ponownie pokazany, gdy będzie omawiana instalacja  tego darmowego dodatku do tych edytorów.

I to wszystko, otwórz stronę i zobacz, czy działa. Jak nie działa, to znaczy, że coś przeoczyłeś.

Następny temat to omówienie KCFinder w obu edytorach.