Postawienie strony/bloga WordPress na własnym komputerze

Będziemy potrzebowali systemu operacyjnego, tutaj będzie to Linux, dystrybucja Ubuntu 22.04. Serwerem na którym będą przechowywane pliki będzie Apache. Będzie potrzebna jeszcze baza danych, czyli MySQL i PHP, jako że WordPress jest m.in. napisany w tym języku.

Krok 1 – Instalacja Apache

Zainstaluj Apache z:
$ sudo apt install apache2

Po zatwierdzeniu instalacji, możemy sprawdzić działanie w przeglądarce pod adresem http://localhost:80.
Pliki będą znajdować się w lokalizacji /var/www/html
Możemy też z poziomu własnego komputera sprawdzić publiczny adres IP serwera:
$ curl http://icanhazip.com
Aby był widoczny z zewnątrz trzeba byłoby utworzyć odpowiednią regułę w domyślnym ufw (Uncomplicated firewall) firewall-u Ubuntu. Nie będziemy tego potrzebowali w celu roboczym działania WordPress-a tylko na własny użytek. Bloga możemy potem migrować na hosting za pomocą jednej z wielu darmowych dostępnych wtyczek.

Krok 2 – Instalacja MySQL

Instalujemy oprogramowanie:
$ sudo apt install mysql-server
Nadajemy hasło dla głównego użytkownika w celu bezpieczeństwa.
Najpierw uruchamiamy wywołanie MySQL:
$ sudo mysql
i nadajemy hasło:
> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
a następnie wychodzimy:
mysql> exit
Później za pomocą interaktywnego skryptu przypisujemy hasło root-a do zabezpieczenia bazy danych:
$ sudo mysql_secure_installation
i zatwierdzamy usunięcie wszelkich dalszych zależności do bazy.
Sprawdzamy działanie:
$ sudo mysql -u root -p
poproszeni o hasło wprowadzamy je.

Krok 3 – Instalowanie PHP

Do zainstalowania pakietów używamy:
$ sudo apt install php libapache2-mod-php php-mysql
Sprawdzamy zainstalowaną wersję:
$ php -v

Krok 4 – Zabezpieczenia plików serwera Apache

Najpierw tworzymy plik .htpasswd do zabezpieczenia:
$ sudo htpasswd -c /sciezka/do/.htpasswd username
Zostajemy zapytani o hasło i jego potwierdzenie.

Edytujemy plik konfiguracyjny serwera znajdujący się w /etc/apache2/apache2.conf
Pod koniec dodajemy:

<Directory /var/www/html/>
     AuthType Basic
     AuthUserFile /sciezka/do/.htpasswd
     Require valid-user
     Order Deny, Allow
     Deny from all
     Allow from localhost
</Directory>

Krok 5 – Utworzenie bazy danych

Wchodzimy do MySQL:
$ sudo mysql -u root -p
oraz tworzymy bazę:
mysql> CREATE DATABASE nazwa_bazy;

Krok 6 – Instalacja WordPress

Ściągamy najnowszą wersję WordPress-a z oryginalnej strony.
Uzupełniamy posiadane dane do instalacji, potem wymagane informacje i możemy już w pełni korzystać z aplikacji.

Problem aktualizacji aplikacji Rambox pod Ubuntu

Dowiadujemy się, że jest aktualizacja aplikacji Rambox do nowszej wersji pod linuksem.
Ściągamy najnowszą wersję i próbujemy ją zainstalować poleceniem:

sudo snap install ./Rambox-x.x.x-linux-x64.snap

Może nam wówczas pojawić się błąd:

error: cannot find signatures with metadata for snap “./Rambox-x.x.x-linux-x64.snap”

Krótkie wyjaśnienie. Dzieje się tak, ponieważ pobraliśmy pakiet Snap od strony trzeciej.
Mechanizm snapów w Ubuntu oczekuje, że otrzyma pakiet snap z oficjalnego sklepu z snapami. Stąd widzimy komunikat o błędzie.

Istnieje rozwiązanie umożliwiające obejście tego problemu.
A mniej więcej, używamy flagi “dangerous”.
Pokrótce komenda powinna wyglądać następująco:

sudo snap install –dangerous ./Rambox-x.x.x-linux-x64.snap

Zainstalowaną wersję, możemy sprawdzić komendą:

snap info rambox

Nie zapominajmy zamknąć wszystkie procesy rambox-a przed instalacją(można to zrobić m.in za pomocą aplikacji “monitor systemu”, wyszukać aplikację i zakończyć proces). Trzeba też nadać prawa wykonania do ściągniętego pliku (chmod +x Rambox…).

Rozwiązanie jak usunąć wszystkie zdjęcia z Google Zdjęcia

Prosty sposób na zwiększenie wolnego miejsca w darmowych indywidualnych usługach Google (standardowo 15GB).
Domyślnie w Google Zdjęcia robi się kopia zapasowa zdjęć robionych na telefonie.
Najprostszym sposobem na problem z malejącą przestrzenią jest archiwizacja zdjęć z usługi chmurowej na jakimś dysku fizycznym i usunięcie danych z chmury.

Rozwiązanie jest bardzo proste (tak jak i w menedżerach graficznych plików w systemach operacyjnych na komputerach).
Wchodzimy do usługi Zdjęcia Google. Zaznaczamy pierwsze zdjęcie, przewijamy (najlepiej scroll-em) na sam dół (tak by przy przewijaniu względnie widoczne były miniaturki), wciskamy SHIFT na klawiaturze, zaznaczamy ostatnie zdjęcie i klikamy ‘usuń’.
Wszystkie zdjęcia powinny się usunąć.

Problem po aktualizacji Ubuntu z 20 do wersji 22

Tak jak w tytule spotkałem się z problemem po aktualizacji systemu z wersji 20 do 22.
W moim przypadku pojawił się monit dostępności aktualizacji podczas pracy sytemu. Wybrałem automatyczną aktualizację.

Aktualizacja wykonała się bezproblemowo, GRUB (posiadam dwa systemy: + Windows 10) załadował się prawidłowo. Natomiast po wybraniu dystrybucji linuks-a, system zaczął się ładować i zakończyło się na informacji:

Failed to start default target: Transaction for graphical.target/start is destructive,(emergency.target has ‘start’ job queued, but ‘stop’ is included in transaction).

Posiadana grafika to Nvidia.
Podejmowane były następujące kroki:
-instalacja najnowszych sterowników Nvidia
-próba naprawienia błędów w systemie plików:
komendą:

fsck /dev/diskname

, gdzie trzeba odpowiednio wpisać lokalizację swojego dysku.
-zmiana systemu okienek z Wayland poprzez:
edytowanie:
sudo nano /etc/gdm3/custom.conf

i zmianę linii/odkomentowanie:
WaylandEnable=false
oraz restart menadżera wyświetlania komendą:
sudo systemctl restart gdm3

-tryby awaryjne z boot-loadera nie działały

Tryb recovery się zacinał/ nie działał prawidłowo/zawieszał się.
Edytowanie odpowiednio trybu recovery w GRUB-ie:
dodawanie:

systemd.unit=rescue.target

w linijce: “linux … $vt_handoff” na jej końcu.
(‘rescue’ używane zamiennie z ’emergency’)
Tutaj podaje link do porad ładowania trybu odzyskiwania:
https://ostechnix.com/how-to-boot-into-rescue-mode-or-emergency-mode-in-ubuntu-18-04/

Ostatecznie dokonałem backup-u danych z dystrybucji CD Ubuntu 22 na pendrivie (polecam program Rufus do wykonania USB dysku). Dane skopiowałem na zewnętrzny dysk USB, ponieważ próby nadania dostępu zapisu na inne partycje i przekopiowania plików nie skutkowały powodzeniem.

Następnie dokonałem czystej instalacji z dysku CD-pendrive z formatowaniem partycji ręcznie. Pod koniec instalacji wyskoczył błąd. Po ponownym uruchomieniu wystąpił błąd z GRUB-em – nie uruchamiał się boot-loader.
Wspomnę też, że próby zamiany w BIOS-ie z Legacy na UEFI (ustawianie Secure Boot) kończyły się niepowodzeniem we wcześniejszych krokach, jeszcze przy pierwszej aktualizacji systemu.
Uruchomiłem dysk CD i zastosowałem się do wskazówek z linku:
https://www.download.net.pl/jak-naprawic-grub-gdy-ubuntu-sie-nie-uruchamia/n/9890/

W skrócie poniżej instalacja narzędzia Boot Repair na CD drive:

sudo apt-add-repository ppa:yannubuntu/boot-repair

sudo apt-get update

sudo apt-get install -y boot-repair

boot-repair


Uruchomiłem narzędzie Boot Repair do naprawy GRUB-a (wybrałem zalecaną naprawę).

Po ponownym uruchomieniu załadował się GRUB prawidłowo, jak i system się uruchomił.

Zmiana rozmiaru zdjęcia w Ubuntu/terminalu

Najpierw instalujemy ImageMagick komendą:

sudo apt-get install imagemagick

Następnie dokonujemy zmiany rozmiaru zdjęcia:

convert -resize 20% source.png dest.jpg

gdzie kolejno podajemy procent ile ma mieć nowe zdjęcie w stosunku do oryginału. Plik źródłowy i końcowy z wybranym rozszerzeniem.

Obliczanie średniej ocen z przedmiotów – Java

package net.traininguniverse.srednia_ocen;

/**
 * 
 * Program wyliczający średnią ocen z kilku przediotów w szkole.
 *
 */

public class Main {

	public float obliczSrednia(int[][] uczen) {

		float suma = 0;

		for (int i = 0; i < uczen.length; ++i)
			for (int j = 0; j < uczen[i].length; ++j) {
				suma += uczen[i][j];
			}
		return suma / (uczen.length * uczen[uczen.length - 1].length);
	}

	public static void main(String[] args) {

		int numberOfClasses = 3; // liczba przedmiotów
		int numberOfNotes = 4; // liczba ocen z danego przedmiotu
		int[][] Pawel = new int[numberOfClasses][numberOfNotes];

		Pawel[0] = new int[] { 2, 2, 2, 2 };
		Pawel[1] = new int[] { 3, 3, 3, 3 };
		Pawel[2] = new int[] { 5, 5, 5, 5 };

		Main main = new Main();
		System.out.println(main.obliczSrednia(Pawel));

	}
}

Utworzenie bazy danych, użytkownika i nadanie dostępu w PostgreSQL oraz logowanie

Jeżeli chcemy rozpocząć pracę z bazami danych, musimy początkowo wykonać kilka kroków by móc z niej korzystać.

Nejpierw logujemy się jako postgres:

sudo -i -u postgres

gdzie i- to logowanie, a u znaczy nazwę użytkownika.
Następnie logujemy się do bazy PostgreSQL:
psql

Teraz tworzymy bazę danych:
CREATE DATABASE <nazwa_bazy_danych>;

Potem tworzymy użytkownika z hasłem:
CREATE USER <nazwa_uzytkownika> WITH ENCRYPTED PASSWORD ‘<moje_haslo>’;

I przydzielamy uprawnienia:
GRANT ALL PRIVILEGES ON DATABASE <nazwa_bazy_danych> to <nazwa_uzytkownika>;

 

Logujemy się następująco:

psql -U <nazwa_uzytkownika> -d <nazwa_bazy_danych>

Może nam wówczas wyskoczyć taki błąd:
psql: error: connection to server on socket “/var/run/postgresql/.s.PGSQL.5432” failed: FATAL: Peer authentication failed for user “<nazwa_uzytkownika>”

Musimy wtedy zlokalizować plik konfiguracyjny pg_hba.conf:
locate pg_hba.conf

Edytujemy dowolnym edytorem:
sudo gedit <znaleziona_lokalizacja>

Następującą linię:
local   <nazwa_bazy_danych>   <nazwa_uzytkownika>   peer

Zamieniamy na:
local   <nazwa_bazy_danych>   <nazwa_uzytkownika>   md5

Jeżeli nie ma, to dopisujemy. Pamiętamy o stosowaniu tabulacji, zamiast spacji pomiędzy wyrazami.
Po zapisaniu zmian, trzeba jeszcze zrestartować system:
sudo service postgresql restart

I teraz powinna się pojawić możliwość zalogowania:
psql -U <nazwa_uzytkownika> -d <nazwa_bazy_danych>

Jak uzyskać URL/zdjęcie z Instagrama z innego konta poprzez przeglądarkę

  1. Przejść do wybranego postu na Instagramie.
  2. Otworzyć narzędzia developerskie w przeglądarce.
  3. Wybrać zakładkę “Sieć”.
  4. Filtrować żądania poprzez “Img”.
  5. Jeżeli nie widać żadnych żądań odświeżyć stronę.
  6. Zaznaczyć żądanie zdjęcia, którego URL chcieliśmy znaleźć.
  7. Kliknąć prawym przyciskiem myszy na zdjęciu, którego link chciano skopiować.
  8. Wybrać “Kopiuj adres URL”.
  9. Wkleić łącze adresu do przeglądarki, aby zobaczyć, że jest to aktualny “jpeg” z linku.
  10. Aby pobrać kliknąć prawym przyciskiem myszy na zdjęciu i wybrać “Zapisz obraz jako…”.

Proste poziome menu nawigacyjne z pionowym rozwijanym w HTML i CSS

Przedstawię mniej więcej jak utworzyć menu i podmenu, które powinno wyglądać tak jak poniżej:

Menu

 

 

 

 



Składać się będą na to dwa pliki “index.html” i “style.css”.
Dokładniejszy opis wykonania będzie umieszczony w plikach źródłowych.

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Menu</title>
<!--zewnętrzny arkusz stylów-->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li class="dropdown">
<!--to bedzie rozwijana do dołu lista-->
<a href="javascript:void(0)" class="dropbtn">News</a>
<!--po wybraniu nic sie nie dzieje-->
<div class="dropdown-content">
<!--zagnieżdżona lista rozwijana w dół-->
<a href="#news1">News 1</a>
<a href="#news2">News 2</a>
<a href="#news3">News 3</a>
</div>
</li>
<li><a href="#contact">Contact</a></li>

</ul>
</nav>
</header>
</body>
</html>

 

 

 

/*jako że są to kaskadowe arkusze stylów, to kolejno od góry do dołu są dokonywane kolejne zmiany i też jak zajdzie potrzeba nadpisywane*/
ul {
    list-style-type: none; /*wyłączenie punktowania elementów listy*/
    margin: 0; /*zerowy margines naokoło listy*/
    padding: 0; /*otoczenie wewnętrzne*/
    overflow: hidden; /*ukrycie nadmiarowego rozmiaru listy*/
    background-color: #333;
}

li {
    float: left; /*ustawienie elementów listy tak by "pływały" w lewym kierunku*/
}

li a, .dropbtn {/*znak spacji w css oznacza następujące (niekoniecznie kolejno) po sobie elementy, natomiast przecinek oznacza tylko, że ".dropbtn" jest kolejnym elementem do takiego samego ostylowania*/
    display: block; /*wyświetlanie jako bloku*/
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /*wyłączenie podkreślenia w linkach*/
}

li a:hover, .dropdown:hover .dropbtn {/*":hover", czyli co będzie się działo po najechaniu na podstawowe menu*/
    background-color: #04AA6D;
}
li.dropdown {
    display: block;
}
.dropdown-content {
    display: none; /*pierwotne ukrycie menu rozwijanego w dół*/
    position: absolute; /*tak jakby usunięte jest zajmowane miejsce w dokumencie zajmowane przez element i ustawione do najbliższego pozycyjnego przodka;*/
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1; /*określenie pozycji w dokumencie (że menu będzie widoczne nad elementami ciała dokumentu*/
}

.dropdown-content a:hover {
    background-color: #04AA6D; /*kolor po najechaniu na element rozwijany w dół*/
}

.dropdown:hover .dropdown-content {
    display: block;
}

Typy wejściowe w formularzu w HTML

<input type="text">
<input type="password">

Radio:

<input type="radio" id="html" name="fav_language" value="HTML"><label for="html">HTML</label>
<input type="radio" id="css" name="fav_language" value="CSS" checked="checked"><label for="css">CSS</label>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label>

Checkbox:

<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label>

 

 

<input type="button" value="button">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image" id="image" alt="Login"
src="/login-button.png">
<input type="number">
<input type="range">
<input type="search">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}" required>
<input type="time">
<input type="date">
<input type="datetime-local">
<input type="url" placeholder="https://example.com" pattern="https://.*" size="30" required>
<input type="submit">
<input type="reset">
<input type="color">



 

 

 

 





Oczywiście gdzie nie podano, należy odpowiednio dodać atrybuty “name” i “id”, w celu ich identyfikacji i możliwości użycia w formularzu.