Tag: portfolio

Post #51 DB Test PHP MySql Apps
DB Test PHP MySql Apps to prosta aplikacja z zapisem do bazy w środowisku lokalnym. Tworzę projekt edukacujnie i do portfolio. Będzie zawierał dobrą dokumentację jak to przećwiczyć na swoim środowisku lokalnym.
Fukcjonalność jeszcze nieokkreślona
Obecnie zawiera tablicę users służącą do logowania – uproszonego bez potwierdzania mailowego. Pole Bio użytkownika do edycji oraz sesję i drobny feauture pokazujący w Toast ile jest zalogowanych użytkowników.
Dokumentacja Techniczna
1. Konfiguracja Projektu
Aby uruchomić projekt lokalnie, wykonałem następujące kroki:
- Pobrałem i zainstalowałem XAMPP (lub inny lokalny serwer) na swoim komputerze.
- Utworzyłem folder dla swojego projektu w katalogu htdocs (np. phpsandbox/test-baza).
- Skopiowałem wszystkie pliki projektu, w tym index.php, register.php, login.php i about.php, do tego folderu.
- Uruchomiłem Apache i MySQL w panelu sterowania XAMPP.
- W przeglądarce przeszedłem do //localhost:3000/phpmyadmin, aby skonfigurować bazę danych.
Konfiguracja Bazy Danych
Aby skonfigurować bazę danych MySQL i utworzyć niezbędne tabele, wykonałem następujące kroki:
Utworzyłem nową bazę danych o nazwie baza_test_login_data. W tej bazie danych utworzyłem tabelę o nazwie users z następującymi kolumnami: id – INT, klucz główny, autoinkrementacja firstName – VARCHAR(50), imię użytkownika secondName – VARCHAR(50), nazwisko użytkownika email – VARCHAR(100), unikalny, adres e-mail użytkownika password – VARCHAR(255), hasło bio – TEXT, opcjonalne pole na biografię użytkownika
Rejestracja Użytkownika
Plik register.php obsługuje rejestrację użytkownika. Działa w następujący sposób:
Gdy użytkownik przesyła formularz rejestracyjny, jego dane wejściowe są walidowane, aby upewnić się, że wszystkie pola są wypełnione. Skrypt sprawdza, czy adres e-mail już istnieje w bazie danych. Jeśli tak, wyświetlane jest ostrzeżenie. Jeśli adres e-mail jest unikalny, dane użytkownika są zapisywane, a wyświetlany jest komunikat o sukcesie. Hasło jest przechowywane w postaci haszowanej dla bezpieczeństwa, przy użyciu funkcji password_hash().
Logowanie Użytkownika
Plik login.php umożliwia zalogowanie zarejestrowanym użytkownikom:
Po przesłaniu formularza, adres e-mail i hasło są walidowane względem bazy danych. Jeśli dane uwierzytelniające są poprawne, użytkownik otrzymuje dostęp. Dla bezpieczeństwa funkcja password_verify() jest używana do porównania hasła haszowanego z bazą danych.
Walidacja i Alerty
Aby poprawić doświadczenie użytkownika, dodałem alerty Bootstrap dla komunikatów zwrotnych:
Alert sukcesu: Wyświetlany, gdy użytkownik pomyślnie się zarejestruje. Alert ostrzeżenia: Wskazuje, że adres e-mail jest już używany podczas rejestracji. Alert błędu: Wyświetlany, jeśli wystąpi błąd podczas rejestracji.
Pliki Kodu i Ich Funkcje
index.php – Strona główna aplikacji. register.php – Zawiera formularz rejestracyjny i logikę PHP do dodawania użytkowników do bazy danych. login.php – Obsługuje logowanie użytkownika i uwierzytelnianie. about.php – Strona dokumentacji technicznej (ta strona). db.php – Zawiera kod połączenia z bazą danych przy użyciu mysqli. menu.php – Pasek nawigacyjny zawarty na każdej stronie dla łatwej nawigacji.
Przykładowy Kod Połączenia z Bazą Danych
Poniżej znajduje się przykład kodu używanego do połączenia z bazą danych w db.php:
```
// ...
$conn = mysqli_connect($servername, $username, $password, $dbname);

// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
// ...
```
1. Bezpieczeństwo i Najlepsze Praktyki
Hasła są haszowane przed przechowywaniem w bazie danych dla bezpieczeństwa. Pole e-mail jest unikalne w bazie danych, zapobiegając duplikatom rejestracji. Używane są przygotowane zapytania, aby zapobiec iniekcji SQL. Dla dodatkowego bezpieczeństwa należy rozważyć implementację SSL i zarządzania sesjami użytkowników.
2025-04-11
Post #47 Projekty wykonane
Projekty wykonane – Telomers & React portfolio
Ostatnio zrealizowałem dwa projekty, które rozbudowały zarówno moje portfolio, jak i stronę Telomers.pl.
1. Trzy strony dla Telomers.pl
Dla serwisu Telomers.pl dodałem trzy nowe strony:
- Poranne rozbudzanie: Strona skupiająca się na zdrowych porannych rytuałach. Poranne rytuały
- Witaminy i Minerały na wiosnę: Informacje na temat optymalnego doboru witamin i minerałów w sezonie wiosennym.Witaminy Minerały Suplementy
- 3 domowe sposoby na przeziębienie: Naturalne sposoby na walkę z przeziębieniem. 3 domowe spososby na przeziębienie Całość została wdrożona w krótkim czasie, a nowe treści są już dostępne dla użytkowników serwisu.
2. Aplikacja React Hooks
Stworzyłem również aplikację w React, która demonstruje wykorzystanie hooków takich jak useState, useEffect oraz useContext. Projekt polega na dynamicznej zmianie koloru tła oraz liczniku, który można zwiększać przyciskiem. W aplikacji zaimplementowane są funkcje:
- Obsługa zmiany wartości inputu z wykorzystaniem useState.
- Dynamiczna zmiana tła na podstawie wprowadzonego koloru w formacie HEX.
- Wykorzystanie kontekstu (useContext) do aktualizacji tła.
Zobacz applikację React i jej proste funkcje.
Poniżej fragment kodu aplikacji:
```
import React, { useState, useEffect, createContext, useContext } from 'react';

const BackgroundColorContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('#0e0e0e');
  const [bgColor, setBgColor] = useState('#0e0e0e');

  useEffect(() => {
    if (/^#[0-9A-F]{6}$/i.test(inputValue) || /^#[0-9A-F]{3}$/i.test(inputValue)) {
      setBgColor(inputValue);
    }
  }, [inputValue]);

  return (
    &lt;BackgroundColorContext.Provider value={{ bgColor, setBgColor }}>
      &lt;div style={{ backgroundColor: bgColor }}>
        &lt;p>Count: {count}&lt;/p>
        &lt;button onClick={() => setCount(count + 1)}>Increment&lt;/button>
        &lt;input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        &lt;BackgroundColorInput />
      &lt;/div>
    &lt;/BackgroundColorContext.Provider>
  );
}

function BackgroundColorInput() {
  const { setBgColor } = useContext(BackgroundColorContext);

  return (
    &lt;input
      type="text"
      placeholder="Input color..."
      onChange={(e) => setBgColor(e.target.value)}
    />
  );
}

export default App;
```
Całość zajęła 6 godzin i można zobaczyć efekty na telomers.pl i porfolio
2025-04-07
Post #19 Docker Toolbox, Teachers, Portfolio i Glitch
Docker Toolbox – App Teachers – Portfolio
Zainstalowałem Docker-Toolbox wraz z VM ale mój pecet jest za stary i nie wsółpracuje z VM, nawet w starszych instalacjach. Problem leży także w wersji Home. Próbowałem jeszcze możliwości sub-systemu Windows z Linuxem ale mam trochę dośwaidczeń z drugiej strony Linuxa z subsystemem Windowsa i wiem że taki twory gdzie są dwa OS działają beznadziejnie jak auta Hybrydowe – zrezygnowałem z walki na Win Home z konteneryzacją ale wrócę z nowym PC-tem na Pro lub Enterprise. Więcej o Docker
Dodałem app Node i Express do Glich
Łatwiejszym rozwiązaniem jest hosting na serverach Node takich jak Glitch, Netlify czy Heroku. Ostatecznie leży na Glitch – zobacz Portfolio gdzie znajdziesz linki do uruchomionej app. Glitch trzyma włączoną i oferuje darmowe 1000 h na miesiąc.
Plan dla Finanse – pilne rachunki i planner
Zrobiłem rozpiskę planu applikacj finansowej w podstawowych założeniach i wygląda imponująco. Teraz się zastanawiam jaki zespół to napisze ? Ja i ja 😀😀😀
Mniej więcej interfejs aplikacji Doradca finansowy będzie zawierał następujące funkcje:
- Planer brief na następny miesiąc: Zapewniający przegląd planów finansowych na nadchodzący miesiąc.
- Analiza wydatków na podstawie paragonów: Umiejętność analizowania wydatków na podstawie zdjęć paragonów w celu lepszego zrozumienia, gdzie pieniądze są wydawane.
- Ewaluacja suwaków dla zwiekszenia i zmniejszenia: Pozwala użytkownikowi manipulować suwakami, aby zobaczyć, jak zmiana wydatków wpłynie na ich ogólną sytuację finansową.
- Analiza wydatków wraz z możliwościami inwestycji: Zapewnia szczegółową analizę wydatków i sugeruje potencjalne możliwości inwestycyjne na podstawie sytuacji finansowej użytkownika.
- Moduł optymalizacji kupowania: Pomaga użytkownikowi w optymalizacji zakupów poprzez sugerowanie najlepszych sposobów oszczędzania pieniędzy podczas zakupów.
- Login personalny oraz rodzinny ( dwa personalne np dla pary )
- Moduł wykresów: Umożliwia generowanie różnych wykresów i grafik, które pomagają wizualizować wydatki, oszczędności, inwestycje itp., aby użytkownicy mogli łatwiej zrozumieć swoją sytuację finansową.
- Integracja z API rynków finansowych oraz API aplikacji: Zapewnia dostęp do aktualnych danych z rynków finansowych oraz integrację z innymi aplikacjami finansowymi w celu ułatwienia monitorowania i zarządzania portfelem.
- Możliwość eksportu do plików CSV: Umożliwia eksport danych finansowych do plików CSV, co pozwala użytkownikom na przenoszenie danych do innych programów lub przeglądanie ich w arkuszach kalkulacyjnych.
- Budżetowanie na dłuższy okres: Dodanie funkcji umożliwiającej planowanie budżetu na rocznej lub wieloletniej skali czasowej, co pozwala użytkownikom na lepsze zarządzanie długoterminowymi celami finansowymi, takimi jak emerytura czy oszczędności na edukację dzieci.
- Prognozowanie wydatków: Integracja algorytmów prognostycznych, które analizują wzorce wydatków użytkownika i prognozują przyszłe wydatki, co pomaga w lepszym planowaniu finansowym.
- Śledzenie aktywów: Dodanie funkcji umożliwiającej śledzenie wartości posiadanych aktywów, takich jak nieruchomości, inwestycje, emerytury itp., aby użytkownicy mieli pełny obraz swojego majątku.
- Personalizowane porady: Wykorzystanie sztucznej inteligencji do dostarczania spersonalizowanych porad finansowych, uwzględniających indywidualną sytuację i cele użytkownika.
- Edukacyjne zasoby: Dodanie sekcji zasobów edukacyjnych, która zawiera artykuły, poradniki i kursy dotyczące różnych aspektów zarządzania finansami osobistymi, aby użytkownicy mogli kontynuować rozwój swojej wiedzy na temat finansów.
- Integracja z technologią blockchain: Jeśli jest to odpowiednie dla użytkowników, integracja z technologią blockchain może umożliwić im śledzenie transakcji, zarządzanie portfelem kryptowalut oraz uczestnictwo w rynkach DeFi (finansów zdecentralizowanych).
Następnie API Async Xhr Ajax metody fetch()
Dopracowanie szczegółów app i research wyboru architektury i technologi
Konfiguracja Flutter do tworzenie aplikacji mobilnych Ios i Android
2025-03-04