Posty

[JavaScript] Przelicznik ceny złota

Aby przeliczyć wagę złota na cenę musimy znać szacunkową cenę danej próby. Formularz HTML Zacznijmy od stworzenia prostej strony HTML zawierającej formularz, w którym będzie wybierana próba złota oraz podawana do obliczenia waga: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Przelicznik Ceny Złota</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } </style> </head> <body> <h1>Przelicznik ceny złota użytkowego</h1> <p><label for="purity">Wybierz próbę złota:</label> <select id="purity"> <option value="333">333 (8 karatów)</option> <option value="375">375 (9 karatów)</option...
Prześlij komentarz
Czytaj więcej

[PHP] Jak zabezpieczyć formularz?

Aby zabezpieczyć swoją stronę przed atakami i niechcianymi danymi stosujemy walidację oraz sanitizację przesyłanych danych. Dodatkowo oprócz tego należy zabezpieczyć formularz przed atakami CSRF (Cross-Site Request Forgery). W tym celu dla każdego formularza należy wygenerować specjalny token przechowywany w sesji. Zabezpieczenie przed CSRF Ten przykład pokaże jak wdrożyć proste zabezpieczenie przed CSRF. Na początku stwórzmy przykładowy formularz: <form action="send.php" method="POST"> <input type="text" name="name" required> <input type="email" name="email" required> <!-- Ukryte pole z tokenem CSRF --> <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token']; ?>"> <button type="submit">Wyślij</button> </form> W formularzu znalazło się dodatkowe (ukryte) pole zawierające nasz CSRF to...
Prześlij komentarz
Czytaj więcej

[PHP] Jak przekonwertować plik PDF do obrazu?

W celu przekonwertowania pliku PDF do formatu graficznego potrzebna będzie biblioteka Spatie/PdfToImage , dodatkowo biblioteka ta wymaga Imagick i Ghostscript. Za pomocą tej biblioteki przekonwertujemy plik PDF nawet, gdy będzie miał więcej niż jedną stronę. Przykład użycia <?php $pdf = new \Spatie\PdfToImage\Pdf('ścieżka/do/pliku/.pdf'); $pdf->save('ścieżka/do/obrazu/strona-1.jpg'); Powyższy przykład przekonwertuje pierwszą stronę pliku, natomiast jeśli stron jest więcej potrzeba użyć metody `selectPage()`, gdzie jako argument podajemy numer strony: $pdf->selectPage(2)->save('ścieżka/do/obrazu/strona-2.jpg');
Prześlij komentarz
Czytaj więcej

[Angular] The AppComponent class is a standalone component, which can not be used in the @NgModule.bootstrap array. Use the bootstrapApplication function for bootstrap instead

W starszych wersjach tworzony komponent musiał być zadeklarowany w NgModule, aby można było użyć go w szablonie innego komponentu. W klasycznym podejściu do organizacji komponentów w Angularze tworzymy tak jak pokazano poniżej: import { Component } from '@angular/core'; @Component({ selector: 'app-hello', template: `<h1>Hello, {{ name }}</h1>`, }) export class HelloComponent { name: string = 'World'; } Następnie w app.module.ts musimy zadeklarować komponent: import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HelloComponent } from './hello.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, HelloComponent, // Deklarujemy nasz komponent ], imports: [ BrowserModule ], bootstrap: [AppComponent] // Wskazujemy główny komponent do inicjalizacji }) export class AppModule { } Prz...
Prześlij komentarz
Czytaj więcej

[Angular|Node.js] Wysyłanie wiadomości e-mail

W celu wysłania wiadomości e-mail z aplikacji Angular potrzebny będzie backend, który obsłuży wysyłkę. Można skorzystać z zewnętrznych usług np. EmailJS lub obsłużyć wysyłkę maila w Node.js. W tym wpisie popracujemy nad tą drugą możliwością. Node.js, Express i Nodemailer Utwórz nowy projekt `email-sender` i zainstaluj niezbędne moduły: nodemailer , cors i body-parser : npm install nodemailer cors body-parser Jeśli nie masz zainstalowanego frameworka Express , również go zainstaluj. Utwórz aplikację mailer.js obsługującą wysyłkę maila: const express = require('express'); const nodemailer = require('nodemailer'); const cors = require('cors'); const bodyParser = require('body-parser'); const app = express(); const PORT = process.env.PORT || 3000; // Dane do konta const emailConfig = { host: '', // Serwer SMTP port: 587, // Port: 465 dla SSL lub 587 dla TLS secure: false, // Ustaw na true, jeśli używasz portu 465 auth: { ...
Prześlij komentarz
Czytaj więcej

[HTML|CSS] Jak umieścić tekst obok obrazka?

Aby umieścić tekst obok obrazka można posłużyć się tzw. "kontenerem elastycznym". W tym celu tworzymy element `div` z właściwością display: flex , co pozwoli na układanie elementów w poziomie lub w pionie. Przykład Kod CSS: .container { display: flex; align-items: center; } Kod HTML: <div class="container"> <img src="logo.png" alt="Logo" /> <span>Lorem</span> </div> Powyższy kod wyświetli element `span` z prawej strony elementu `img`. W powyższym przykładzie użyta została również właściwość align-items: center , co spowoduje wyrównanie tekstu w pionie.
Prześlij komentarz
Czytaj więcej

[HTML|CSS] Jak zrobić ładny formularz HTML?

Drogi do ładnego formularza HTML są dwie - ostylujemy formularz sami, albo skorzystamy z bibliotek takich jak np. Bootstrap. W tym wpisie stworzymy przykładowy formularz zarówno z własnym stylem, jak i z użyciem Bootstrapa. Na potrzeby tego wpisu załóżmy, że chcemy stworzyć formularz kontaktowy. Własny styl formularza Najpierw tworzymy formularz: <div class="container"> <form> <div class="form-group"> <label for="name">Imię:</label> <input type="text" id="name" name="name" placeholder="Wpisz swoje imię" required> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Wpisz swój email" required> </div> <div class="form-...
Prześlij komentarz
Czytaj więcej