Family Network – Drzewo Genealogiczne w PHP

Dziś dla odmiany zamiast teorii trochę praktyki a mianowicie przykładowy projekt w PHP – Drzewo genealogiczne.

Jest to pierwszy z serii artykułów o tym projekcie. Chciałbym, aby przykłady tu podane były użyteczne dla początkujących programistów dopiero rozpoczynających swoją przygodę. O co będzie chodziło w samym projekcie napiszę następnym razem. Teraz raczej chciałbym zacząć od razu z marszu pokazać jak utworzyć nowy projekt z prostą stroną internetową w języku PHP. Tak tak, pamiętam co pisałem poprzednio o tej technologii i tak naprawdę dalej odradzam ją na początek, no ale akurat tak się złożyło że obecnie znalazłem czas akurat na ten a nie inny projekt. Spróbujmy więc wycisnąć z niego tyle ile się da, szczególnie że podstawy są dość uniwersalne.

To może najpierw parę słów o tym jak to wszystko działa. Przeglądarki internetowe na naszych urządzeniach łączą się z serwerami które na żądanie wykonują po swojej stronie pewne operacje zwracające na koniec treść stron. Treść ta jest otrzymywana zwrotnie przez naszą przeglądarkę i wyświetlana na urządzeniu. To tak w ogólnym skrócie, ale powinno to nam dawać jasno do zrozumienia, że do rozpoczęcia pracy potrzebujemy następujących rzeczy:

  • serwer na którym wykona się nasz kod
  • przeglądarka na której będziemy oglądać kolejne wersje naszej strony
  • narzędzia do pisania kodu
  • napisany przez nas(lub kogoś innego) kod

Z przeglądarką problemu nie będzie, gdyż już ją mamy, bez niej wszak nie czytałbyś właśnie tego wpisu. Jak zatem wygląda sprawa z serwerem? Wiele osób pewnie słysząc termin serwer wyobraza sobie wiele mocno okablowanych pudeł stojących na regałach w jakiejś piwnicy. Tak naprawdę słowo serwer tyczy się przedewszystkim oprogramowania, które „serwuje” nam rządane treści. Dobra wiadomość jest więc taka, że to oprogramowanie możemy sobie ściągnąć i uruchomić na tym samym komputerze na którym będziemy pisać kod i testować stronę. Na potrzeby tego ćwiczenia polecam serwer appache pobrany razem z pakietem xampp: https://www.apachefriends.org/pl/index.html

Xampp to bardzo wygodny zestaw dający nam serwer na którym odrazu mamy uruchomione wsparcie dla języka PHP, a także dodatkowy serwer do obsługi bazy danych.

Pobieramy i instalujemy. W katalogu który wskazaliśmy podczas instalacji powinniśmy mieć plik xampp-control.exe. Jest to panel sterowania naszego serwera. Otwieramy go a następnie klikamy przyciski Start przy pozycjach Apache i MySQL. W ten sposób uruchamiamy serwer aplikacji (Apache) oraz serwer baz danych (MySQL)

Aby potwierdzić, że wszystko przebiegło według planu wpisujemy w naszą przeglądarkę adres http://localhost/
Jest to lokalny adres naszego serwera i pod nim będziemy mogli sprawdzić wsystkie strony jakie napiszemy. Powinniśmy zobaczyć stronę powitalną.

Ostatnie co nam się jeszcze przyda to jakiś program do pisania kodu. To tak naprawdę dłuższy temat, którym też się teraz nie będziemy zajmować. Jak ktoś chce iśc na całość to polecam ściągnąć program eclipse wraz z rozszerzeniami dla PHP. Natomiast aby uniknąć zamieszania z konfiguracją to na ten moment wystarczy zwykły notatnik, albo jeszcze lepiej Notepad++, który jest najlepszym notatnikiem jakiego będziecie kiedykolwiek potrzebować:
https://notepad-plus-plus.org/download/v7.6.6.html

W tym momencie powinniśmy mieć już wszystko czego nam potrzeba zatem możemy przejść do kodowania.

KOD

Wejdźmy znów do katalogu w którym zainstalowaliśmy xampp. W środku powinien znajdować się międzyinnymi katalog htdocs. Jest to folder w którym docelowo znajduje się kod wszystkich stron uruchamianych na danym serwerze. Utwórzmy tutaj folder FamilyNetwork a w nim plik index.php. Otwieramy go w notatniku (albo innym edytorze jaki wybraliśmy) i w środku piszemy coś takiego:

<?php
?>
<html>
	<head></head>
	<body>
		Witaj Świecie
	</body>
</html>

Jest to najprostsza wersja kodu html z jakiego zbudowane są strony internetowe. Można o nim myśleć jak o pojemnikach których ścianki zbudowane są z tagów, czyli elementów w ostrych nawiasach. Tag bez ukośnika zaznacza gdzie jest początek pojemnika a ten z ukośnikiem pokazuje gdzie jest koniec. Każda strona musi mieć pojemnik a w nim zawierający tzw metadane oraz pojemnik w którym jest cała treść strony. Więcej o podstawach html możemy przeczytać tutaj:
https://www.w3schools.com/html/

Oprócz tagów html jest tu również znacznik PHP:

<?php 
?>

Jest to obszar w którym możemy umieszczać kod PHP. Później zobaczymy dokładnie jak to działa, póki co jednak sprawdźmy jak wygląda nasza pierwsza strona. W tym celu wchodzimy na adres http://localhost/FamilyNetwork/index.php

Tak jak pisałem wcześniej, wszystkie strony umieszczone w katalogu htdocs dostępne są pod adresem localhost. Musimy tylko wpisać nazwę katalogu lub/i nazwę pliku jaki chcemy otworzyć.

Jeśli wszystko działa to możemy przejść do czegoś bardziej zaawansowanego. Większość współczesnych stron posiada jakiś system zarządzania użytkownikami, którzy mogą zmieniać treść znajdującą się na portalu. Zwykle w najprostszej postaci składa się to z jakiegoś formularza dodawania użytkowników, formularza logowania do systemu oraz miejsca w bazie danych gdzie możemy przechować informacje o utworzonych uzytkownikach i ich aktywności. Oczywiście to wszystko połączone jest odpowiednim kodem weryfikującym to co chcemy umieścić i wyciągnąć z bazy danych.

Skoro o bazie mowa to czas zająć się naszą. Nie będę tu omawiał szczegółowo architektury relacyjnych baz danych oraz tajników języka SQL. Zainteresowanych tym tematem odsyłam tutaj:
https://www.w3schools.com/sql/

Nam wystarczy wiedzieć, że informacje w bazach danych trzymane są w tabelach. Tabele przedstawiają np jakieś ogólne obiekty jak np osoba, samochód itp. oraz relacje między nimi, czyli przykładowo może istnieć tabela mówiąca ile samochodów należy do danej osoby. W naszym przypadku potrzebujemy tabeli przechowującej informacje o użytkowniku takie jak jego login, hasło czy numer identyfikacyjny w naszym systemie.

Ponownie otwieramy panel sterowania z pliku xampp-control.exe
Tym razem przy pozycji MySQL (która powinna być wcześniej już uruchomiona) klikamy przycisk Admin.


Ukaże się nam panel phpAdmin służący do zarządzania bazą danych. Po lewej stronie znajdziemy tam przycisk „Nowa”. Pozwoli nam on założyć nową bazę danych.

Nadajmy jej nazwę „famnet” a z rozwijanej listy wybierzmy „utf8_general_ci”. Klikamy utwórz a następnie na nazwę bazy którą właśnie utworzyliśmy. W głównym oknie powinniśmy zobaczyć pasek z różnymi zakładkami. Wybieramy tą z napisem „SQL”.


Wklejamy tam poniższy kod i klikamy przycisk „Wykonaj”.


SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;

--
-- Baza danych: `famnet`
--

-- --------------------------------------------------------

--
-- Struktura tabeli dla tabeli `users`
--

CREATE TABLE `users` (
  `user_id` int(11) NOT NULL,
  `user_name` varchar(50) COLLATE utf8_bin NOT NULL,
  `user_pw` varchar(255) COLLATE utf8_bin NOT NULL,
  `create_time` date DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

--
-- Indeksy dla tabeli `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`user_id`),
  ADD UNIQUE KEY `username` (`user_name`);


--
-- AUTO_INCREMENT dla tabeli `users`
--
ALTER TABLE `users`
  MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
COMMIT;

Powyższy skrypt napisany w języku SQL utworzył nam tabelę ‚users’ wraz z niezbędnymi kolumnami.

phpAdmin nie będzie nam chwilowo potrzebny, możemy więc go zamknąć i wrócić do naszego katalogu FamilyNetwork w htdocs. Zajmiemy się teraz łączeniem z bazą danych i stworzymy formularz dodawania nowych użytkowników, ale to już w następnym wpisie 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *