Publikacja – światłowód jako medium transmisyjne


Ostatnimi czasy robiąc porządki w systemie, trafiłem na katalog zawierający moje prace zaliczeniowe na uczelnie. Już miałem spakować go w archiwum i wrzucić gdzieś w otchłanie dysku twardego.
Jednak nagle zapaliła się lampka i pomyślałem, że może te kilka godzin zmagań, jakie musiałem włożyć w napisanie tego tekstu nie pójdą na marne. Tym samym pierwszy z ciekawszych tekstów ląduje w sieci.

Życzę miłej lektury!

Światłowód jako medium transmisyjne

Opublikowano Różne | Otagowano , , | Dodaj komentarz

Silverlight WCF RIA Services + Telerik OpenAccess ORM + PostgreSQL


Drugi artykuł z serii Silverlight, w którym omówię jak połączyć warstwę klienta, z warstwą modelu danych udostępnionego za pomoca ORM Open Access Telerik. Do wykonania tego zadania potrzebujemy zainstalowanej bazy PostgreSQL oraz środowiska Telerik. Poniżej linki do pobrania oprogramowania. Oczywiście zarówno PostgreSQL jak i Open Access są darmowe.

http://www.telerik.com/products/orm.aspx

http://www.postgresql.org/download/

Model bazy danych

Pracę rozpoczynamy od utworzenia nowego projektu Silverlight Application w Visual Studio. Przy konfiguracji parametrów należy zaznaczyć opcję Enable WCF RIA Services, to umożliwi nam korzystanie z usług, o których wspominałem w pierwszym poście. Po wygenerowaniu nowego projektu, tak naprawdę otrzymamy dwa projekty. Pierwszy to klient Silverlight, który uruchamia się w przeglądarce, a drugi to aplikacja po stronie serwera (z końcówką .Web). My chcemy utworzyć model danych, więc w pierwszej części będziemy pracować na drugim projekcie po stronie serwera.

  1. Jeśli instalacja ORM przebiegła prawidłowo, to do projektu na serwerze możemy dodać nowy model. Robimy to poprzez dodanie do projektu nowego obiektu. Szablon nazywa się Telerik OpenAcces Domain Model i znajduje się w zakładce Data. Pamiętajmy o nadaniu sensownej nazwy np. ModelBazy.rlinq1_OpenAccess_Szablon
  2. Następnie w polu Backend wybieramy PostgreSQL i tu bardzo ważna sprawa aby nadać również sensowną nazwę dla Model name, ponieważ tą nazwą będziemy się posługiwali.Wybranie Bazy
  3. Kolejny krok jest bardzo istotny, ponieważ tu w polu Connection string musimy określić dane dostępu do naszej bazy (Jeśli się pomylimy to nic nie szkodzi, ponieważ później te dane można edytować w pliku Web.Config).Ustawienie connection string
  4. W kolejnym kroku określamy z jakich schematów w bazie chcemy korzystać oraz mamy możliwość wybrania tabel, widoków, procedur i funkcji zdefiniowanych w naszej bazie. Oczywiście później spokojnie będziemy mogli dodać, usunąć, edytować tabele itp.
  5. Kolejne kroki możemy zostawić bez zmian, chyba że wiemy jak i mamy potrzebę konfiguracji. Jeśli zostawimy wartości domyślne wszystko będzie działało dobrze, więc klikamy Finish. Po wygenerowaniu modelu w projekcie serwera pojawi się nowy obiekt z rozszerzeniem .rlinq. Gdy go uruchomimy otrzymamy schemat tabel, które wybraliśmy. W tym oknie można edytować i aktualizować model. Po każdej zmianie w bazie trzeba aktualizować (generować) model.

Domenowa usługa modelu danych

Gdybyśmy pracowali w technologi ASP.NET ten tutorial można by już zakończyć, ponieważ model jest stworzony i można się z nim łączyć na serwerze. Natomiast jak zaznaczałem w pierwszym artykule, do połączenia klienta z bazą, trzeba tworzyć usługi RIA WCF. Dlatego w tym podrozdziale zajmiemy się stworzeniem podstawowych usług wystawiających udostępniane dane. We wcześniejszych wersjach ORM usługi trzeba było tworzyć od podstaw. W nowych wersjach ORM mamy do tego już gotowe szablony. Jest kilka sposobów na tworzenie różnych usług, dlatego po obszerniejszą wiedzę, odsyłam do dokumentacji OA ORM. My w przykładzie skupimy się na stworzeniu usługi domenowej.

  1. Podobnie jak w przypadku modelu, do projektu dodajemy nowy obiekt Telerik OpenAccess Domain Service, który znajduje się w zakładce z szablonami WebDomain service
  2. W pierwszym oknie wybieramy rlinq i naciskamy Next
  3. Na tym etapie wybieramy dla których tabel z modelu będą generowane usługi oraz czy będzie możliwość edycji. Ważne by podać jednoznaczną nazwę, ponieważ później będziemy się do niej odwoływać.Dodanie tabel do usług
  4. Po wygenerowaniu usługi otrzymamy obiekt z rozszerzeniem .tt. Po jego rozwinięciu zobaczymy klasę. Metody tej klasy reprezentują konkretne operacje na bazie. Select, Insert, Update, Delete. Aby zademonstrować działanie skupimy się na samym Select. Metoda obsługująca zwraca dane typu Iqueryable, czyli umożliwiające przeglądanie kwerend.
public partial class UslugiModeluBazy : OpenAccessDomainService<ModelBazy>
{
    public UslugiModeluBazy() : base()
    {
    }
    public IQueryable<Formaty> GetFormaties()
    {
        return this.DataContext.Formaties;
    }
}

Połączenie klienta z usługami

Teraz aby móc skorzystać z utworzonych usług, musimy wygenerować drugi koniec po stronie klienta. Na szczęście Silverlight robi to za nas, wystarczy zbudować projekt Build. Aby zobaczyć usługi po stronie klienta, musimy w Solution Explorer zaznaczyć opcję Show All Files, następnie przejść do katalogu Generated_Code. W tym katalogu znajduje się klasa nazwana podobnie do projektu na serwerze. Znajdziemy w niej odpowiedniki klas modelu z serwera np. metoda odpowiadająca operacji SELECT

public EntityQuery<Formaty> GetFormatiesQuery()
{
    this.ValidateMethod("GetFormatiesQuery", null);
    return base.CreateQuery<Formaty>("GetFormaties", null, false, true);
}

Teraz możemy przystąpić do ostatecznej części, czyli wyświetlenia danych. W tym celu uruchamiamy MainPage.xaml i dodajemy nową kontrolkę DataGrid

<sdk:DataGrid x:Name="gridDane" HorizontalAlignment="Left" Height="204" Margin="21,37,0,0" VerticalAlignment="Top" Width="357"/>

Następnie w pliku z kodem wczytujemy dane łącząc się z usługą oraz przekazujemy je do grida

using ORMC.Web; //Projektu na serwerze
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.ServiceModel.DomainServices.Client; //Potrzebne do LoadOperation
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ORMC
{
    public partial class MainPage : UserControl
    {
        private UslugiModeluBazy baza;

        public MainPage()
        {
            InitializeComponent();

            Loaded += new RoutedEventHandler(OnLoaded);
        }

        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            baza = new UslugiModeluBazy();

            LoadOperation<Formaty> daneZBazy = baza.Load<Formaty>(baza.GetFormatiesQuery());
            daneZBazy.Completed += (s, args) =>
                {
                    gridDane.ItemsSource = daneZBazy.Entities;
                };
        }
    }
}
Opublikowano Silverlight RIA WCF | Otagowano , , , , , | Dodaj komentarz

C# – klasy i obiekty


Ostatnimi czasy mało się działo na blogu, a to za sprawą tego, że mam natłok zadań. Chciałbym pisać więcej, nawet stworzyłem listę tematów do opisania, ale niestety praca i uczelnia pochłania mnie na całego. Jednak pomimo natłoku zadań udało mi się w końcu dorwać do klawiatury. To w sumie zupełnie przypadkiem, bo w trakcie wyszukiwania w internecie książki do C#, natknąłem na się na portal Wikibooks. Jest to bardzo fajna sprawa, ponieważ każdy (podobnie jak na siostrzanej Wikipedii) może stworzyć książkę, napisać nowy rozdział lub poprawić błędy (jeśli takie znajdzie). Oczywiście temat ten mnie bardzo zainteresował, a już w szczególności, gdy spostrzegłem że w książce do C# rozdział o klasach jest w opłakanym stanie. Nie mogłem sobie odpuścić, by napisać swój pierwszy rozdział w książce informatycznej. Aby jakoś uwiecznić tą chwilę oraz dodać nowy artykuł na bloga, postanowiłem że umieszczę tu moje wypociny. Może nie jest to zbyt wyszukany temat, ale na pewno wiele osób z niego skorzysta, a mowa tu o klasach i obiektach w języku C#.

Link do rozdziału z dn. 17.01.2013 http://pl.wikibooks.org/wiki/C_Sharp/Klasa

Rozdział może być edytowany przez innych, ale ja zamieszczam tylko to co sam napisałem. Zapraszam do lektury!

Klasa i obiekt C#

Klasa to podstawowa konstrukcja logiczna, na której bazuje cały język C#, ponieważ to ona definiuje każdy obiekt i określa jego możliwości. Jedną z najważniejszych cech klasy jest to, że definiuje nowy typ danych. Jest to swoisty szablon pewnego obiektu, natomiast obiekt jest egzemplarzem klasy. Można powiedzieć że klasa opisuje w sposób abstarkcyjny prametry i funkcje konkretnych bytów.

Przykładowo, gdyby tworzyć obiektową grę wyścigi, takimi bytami nazwiemy obiekty w grze, czyli Samochody i Tor wyścigowy. Jak z definicji wynika, obiekty te mogą posiadać różne parametry oraz funkcje, które są zdefiniowane w szablonie czyli klasie. W dalszej części rozdziału będziemy rozbudowywać nasze byty o nowe funkcje i parametry.

Deklaracja klasy i parametrów

Zacznijmy od podstaw, czyli od deklaracji klasy oraz podstawowych parametrów. W naszym przykładzie będą dwie klasy Samochod oraz TorWyscigowy. Dla samochodu stworzymy 3 podstawowe parametry, czyli pojemność baku, prędkość maksymalna oraz prędkość aktualna. Natomiast tor będzie posiadał parametry tj. liczba aut na torze oraz samochód prowadzący. Oczywiście parametrów, można stworzyć nieskończenie wiele, natomiast dla przykładu taka liczba jest w zupełności wystarczająca.

class Auto
{
        double pojemnoscBaku;
        int predkoscMaksymalna;
        int predkoscAktualna;
}

class TorWyscigowy
{
        int liczbaAutNaTorze;
        Auto prowadzacy;
}

Nowo utworzone klasy definiują nam nowe typy danych. Są one takie same jak nazwa klasy, czyli Auto oraz TorWyscigowy. Istotną sprawą jest to, że sama definicja class nie tworzy jeszcze obiektu, jest to jedynie szablon.

Tworzenie obiektu

Aby utworzyć egzemplarz klasy, czyli obiekt, należy wykonać poniższą instrukcję:

Auto auto1 = new Auto(); //Tworzy obiekt klasy Auto o nazwie auto1
Auto auto2 = new Auto(); //Tworzy inny obiekt klasy Auto o nazwie auto2

Dostęp do obiektu

Na początku definiując klasę, zdefiniowaliśmy kilka parametrów początkowych. Aby dostać się do parametrów (również do metod) wykorzystuje się operator kropki [.], operator ten łączy nazwę obiektu z nazwą składowej.

auto1.predkoscMaksymalna = 180;
auto2.predkoscMaksymalna = 210;

Metody klasy

Oprócz parametrów klasy, można tworzyć również metody. Określają one w pewnym sensie funkcje danego obiektu. Tak również jest w świecie rzeczywistym, auto oprócz parametrów tj. prędkość maksymalna czy pojemność baku, posiada funkcje przyśpieszania, zwalniania itd. W podobny sposób można opisać tor wyścigowy.

class Auto
{
    public double pojemnoscBaku;
    public int predkoscMaksymalna;
    public int predkoscAktualna;

    public void przyspiesz(int predkosc)
    {
        this.predkoscAktualna += predkosc;
    }

    public void zwolnij(int predkosc)
    {
        this.predkoscAktualna -= predkosc;
    }
}

class TorWyscigowy
{
    public int liczbaAutNaTorze;
    public Auto prowadzacy;

    public void dodajSamochodDoWyscigu()
    {
        liczbaAutNaTorze++;
    }

    public void zmienProwadzacego(Auto prowadzacy)
    {
        this.prowadzacy = prowadzacy;
    }
}

Poniżej przykład wykorzystania utworzonych klas, czyli symulacja wyścigu

//Zadeklarowanie nowych obiektów w grze
Auto auto1 = new Auto();
Auto auto2 = new Auto();
TorWyscigowy tor = new TorWyscigowy();

//Dodadnie dwóch samochodów do wyścigu
tor.dodajSamochodDoWyscigu();
tor.dodajSamochodDoWyscigu();

//Zmiana prędkości samochodów
auto1.przyspiesz(100);
auto2.przyspiesz(120);

//auto2 jedzie szybciej od auto1 wiec to ono obejmuje prowadzenie
tor.zmienProwadzacego(auto2);

//Statystyki wyścigu
Console.WriteLine("Na torze jest: " + tor.liczbaAutNaTorze + " samochodów.");
Console.WriteLine("Aktualna prędkość auta prowadzącego w wyścigu wynosi: " + tor.prowadzacy.predkoscAktualna);

Konstruktor

Inicjalizacja wszystkich zmiennych po koleji, podczas tworzenia nowego obiektu, jest zajęciem uciążliwym. Już nie wspominając o inicjalizacji kilkunastu obiektów z kilkoma parametrami. Aby ułatwić te zadania, stworzono narzędzie jakimi są konstruktory. Jak z samej nazwy można wywnioskować, konstruktor, to narzędzie do konstruowania obiektu. Co za tym idzie jest wywoływany podczas inicjalizacji. Tak więc każda klasa musi zawierać konstruktor. No dobrze, ktoś by zapytał dlaczego w powyższych przykładach brakuje konstruktora? Odpowiedź jest prosta, jeśli nie napiszemy żadnego konstruktora, to C# sam sobie stworzy, w domyśle, pusty konstruktor. Możemy się o tym przekonać podczas inicjalizacji obiektu, ponieważ po słowie kluczowym new wywołujemy konstruktor domyślny:

Auto auto1 = new Auto();

Analizując powyższy fragment kodu, można zauważyć że konstruktor jest podobny do metody, o takiej samej nazwie co klasa. Od metody różni się tym, że nie może zwracać żadnych wartości. Poniższy przykład pokazuje jak należy definiować konstruktor podstawowy inicjalizujący wybrane parametry.

class Auto
{
    public double pojemnoscBaku;
    public int predkoscMaksymalna;
    public int predkoscAktualna;

    public Auto()
    {
        this.predkoscMaksymalna = 200;
        this.pojemnoscBaku = 50.0;
    }
}

Konstruktor sparametryzowany

Wcześniej omawialiśmy konstruktor prosty, który umożliwia nam inicjalizacje parametrów. Jednak takie przypisywanie wartości, nie jest zbyt uniwersalnym rozwiązaniem, ponieważ każdorazowe utworzenie obiektu, nadaje takie same parametry. W celu lepszej kontroli nad inicjalizacją utworzymy konstruktor sparametryzowany. Podczas tworzenia nowego konstruktora, skorzystamy z możliwości przeciążania metod.

class Auto
{
    public double pojemnoscBaku;
    public int predkoscMaksymalna;
    public int predkoscAktualna;

    public Auto()
    {
        this.predkoscMaksymalna = 200;
        this.pojemnoscBaku = 50.0;
    }

    public Auto(int predkoscMaksymalna, double pojemnoscBaku)
    {
        this.predkoscMaksymalna = predkoscMaksymalna;
        this.pojemnoscBaku = pojemnoscBaku;
    }
}

Nowy konstruktor przyjmuje dwa parametry, a następnie przekazuje je do parametrów globalnych, oznaczonych słówkiem kluczowym this. Poniżej przykład zastosowania obu konstruktorów. Na koniec jeszcze dodam wzmiankę, że konstruktorów możemy tworzyć nieskończenie wiele. Jest tylko jedno ograniczenie, każdy nowy konstruktor musi przyjmować inne parametry, od istniejących konstruktorów. Podczas inicjalizacji odpowiedni konstruktor jest wybierany automatycznie, poprzez dopasowanie typów i ilości przekazywanych parametrów.

//Wykorzystujemy konstruktor domyślny
Auto auto1 = new Auto();

//Wykorzystujemy konstruktor sparametryzowany
Auto auto2 = new Auto(150, 45.0);

Słowo kluczowe this

Słowo kluczowe this umożliwia metodzie, odwołanie się do obiektu który ją wywołał. W powyższych przykładach wykorzystywaliśmy słowo kluczowe this przed nazwą parametru, aby zaznaczyć że odwołujemy się do parametrów globalnych, aktualnego obiektu. Tak na prawdę użycie słówka kluczowego this nie jest wymagane, poza jedną sytuacją. Chodzi o ukrywanie zmiennych składowych. W przykładzie z konstruktorem sparametryzowanym dla zachowania spójności nazw, zastosowaliśmy takie same nazwy parametrów konstruktora, jak parametry globalne. W tym przykładzie słowem kluczowym this oznaczamy parametry globalne natomiast, parametry bez słowa kluczowego this odwołują się do parametrów konstruktora.

Opublikowano C# | Otagowano , , , , , | 2 komentarzy

Wprowadzenie do Silverlight 5 RIA WCF


Wstęp

Ostatnimi czasy zacząłem pracować z technologią Silverlight 5, co natchnęło mnie do tego by odświeżyć blog i rozpocząć serię artykułów na temat tej technologii. Artykuły będą troszkę bardziej zaawansowane, ale w sumie po co pisać o „hello world” skoro od takich artykułów w sieci aż dudni. Ja skupię się na tworzeniu aplikacji biznesowej z wykorzystaniem usług do pobierania danych z bazy tzw. RIA WCF (Rich Internet Application Windows Communication Foundation).

Jeśli ktoś już próbował tworzyć aplikację biznesową w ASP.NET, to na pewno spotkał się z problemem, który mnie zmusił do poszukania jednak jakieś alternatywy. O ile ASP.NET jest świetny przy tworzeniu serwisów internetowych (nawet bardzo zaawansowanych np. bankowość internetowa), to tworzenie w nim aplikacji RIA sprawia dużo trudności. Dokładnie chodzi o technologię AJAX i przeładowywanie strony, nawet komercyjne kontrolki nie dają pełnej kontroli nad przeładowywaniem treści. Ja pracowałem z kontrolkami AJAX Telerik i planowanie AJAX Paneli, było dla mnie istną katorgą, w szczególności przy częściach tworzonych dynamicznie i kontrolkach uzupełnianych z bazy. Wszystkie „problemy” wynikały z tego że protokół HTTP jest bezstanowy. Oczywiście są narzędzia umożliwiające zapamiętanie stanu np. Session lub ViewState, ale zawsze trzeba o tym pamiętać i to kontrolować, co może być bardzo uciążliwe, przy dużej ilości danych i kontrolek.

Lekarstwem na te wszystkie problemy może być Silverlight. Technologia ta podobnie jak Flash (Adobe Flex) czy applet Java uruchamia się w środowisku wirtualnej maszyny, poprzez wtyczkę w przeglądarce internetowej. Pozwala to tworzyć aplikacje, podobnie jak programy biurkowe i co najważniejsze nie ogranicza nas problem bez stanowości protokołu HTTP. Silverlight bierze wszystko co najlepsze z platformy .NET, jednak w porównaniu do serwisów ASP.NET tworzenie aplikacji wymaga od programisty posiadania większej wiedzy i na początku może okazać się dużo bardziej skomplikowane. Chodzi o to że, trzeba opanować nowy wzorzec MVVC, usługi WCF i nowy język XAML.

MVVC czy MVC?

Oczywiście każdy z nas zna wzorzec MVC (Model – View – Controler i lepiej nie spolszczać) ostatnio tak popularny, ale na pewno nie każdy spotkał się z MVVC. Wzorzec ten został stworzony na potrzeby technologii Silverlight. Mówiąc skrótowo, to MVVC składa się z warstwy logiki, czyli Model oraz prezentacji, na którą składa się View oraz ViewControler. Warto dobrze sobie przyswoić te pojęcia, zanim siądziemy do tworzenia aplikacji, ponieważ projekt jest podzielony na te dwie części.

  • Model – podobnie jak w MVC jest to logika systemu w uproszczeniu baza danych oraz usługi udostępniające dane dla klientów;
  • ViewControler – są to usługi klienta analogiczne do usług w Modelu;
  • View– interfejs użytkownika, część wizualna systemu.Schemat MVVC

Wzorzec opisany powyżej rodzi jednak pewne niebezpieczeństwo, o którym bezwzględnie należy pamiętać. Chodzi o to że trzeba zabezpieczyć zarówno dostęp do usług jaki i warstwy prezentacji. Jak widać na schemacie klient łączy się z gniazdem WCF w modelu, co za tym idzie istnieje możliwość podpięcia innego klienta do tego samego gniazda i uzyskania dostępu do bazy. Na szczęście programiści z Redmond pomyśleli o tym i Silverlight posiada bardzo dobre narzędzia do tworzenia zabezpieczeń. W kolejnych artykułach postaram się opisać to zagadnienie.

WCF

Technologia pozwala tworzyć usługi, które mogą się ze sobą komunikować. W Silverlight usługi wykorzystujemy, głównie do komunikacji klienta z bazą.

  • Model: usługa udostępnia dane, może je aktualizować oraz edytować (Select, Insert, Update, Delete). Te usługi tworzymy samodzielnie.
  • Prezentacja: usługi generowane są automatycznie na podstawie usług zdefiniowanych w Modelu.

XAML

Jest to język podobny do XML, służy do opisywania części wizualnej klienta. Dzięki niemu możemy definiować kontrolki, zarządzać widokiem itp. W skrócie wszystko to co wizualne w Silverlight jest opisane za pomocą XAML.

Podsumowanie

O technologii można by jeszcze dużo pisać, ale ten artykuł ma tylko pokazać zarys działania. Jest to kamień milowy w zrozumieniu kolejnych artykułów. Zachęcam więc do śledzenia serii. W kolejnym artykule przejdziemy do praktyki, czyli wykorzystamy ORM Telerik OpenAccess oraz bazę PostgreSQL (nietypowo, zamiast MSSQL) do stworzenia modelu, podstawowych usług RIA WCF oraz klienta.

Opublikowano Silverlight RIA WCF | Otagowano , | Dodaj komentarz

Jak zabezpieczyć formularz HTML z wykorzystaniem JavaScript, PHP oraz Smarty


Do stworzenia tego artykułu zainspirowało mnie pewne zajście, które miało miejsce kilka dni temu. Mianowicie, pewien dowcipniś zabawił się formularzem umożliwiającym dodawanie wpisów do księgi gości. W efekcie tego, po wejściu na stronę wszystkie wpisy stały się wielkości znacznika h1 i pływały od lewej do prawej. W księdze zapanował chaos. Na szczęście szybko udało się temu zaradzić, poprzez wykasowanie złośliwych wpisów z poziomu bazy danych. Następnie musiałem zabezpieczyć system, aby taka sytuacja się nie powtórzyła. Kolejny dowcipniś mógłby być sprytniejszy i zamiast znacznika h1 oraz marque, zastosować skrypt z poleceniem ;DROP TABLE; Poniżej opiszę w jaki sposób możemy zabezpieczać formularze przed tego typu dowcipnisiami.

1. Formularz

Po pierwsze musimy stworzyć formularz na którym będziemy działać. Ja proponuje zdefiniować następujące pola: imię, nazwisko, email, wiek, miejscowość oraz przycisk zatwierdzający. Ponad to musimy zdefiniować plik save.php, który będzie odbierał zgłoszenie przesyłane metodą post oraz dodać atrybut onsubmit, w którym po zatwierdzeniu formularza zwrócimy funkcję sprawdzającą pola validateForm().

<form name="formularz" action="save.php" onsubmit="return validateForm()" method="post">
	<div class="inputForm">
		<label for="firstName">Imię:</label>
		<input type="text" name="firstName"></input>
	</div>
	<div class="inputForm">
		<label for="lastName">Nazwisko:</label>
		<input type="text" name="lastName"></input>
	</div>
	<div id="email" class="inputForm">
		<label for="email">Email:</label>
		<input type="text" name="email"></input>
	</div>
	<div class="inputForm">
		<label for="age">Wiek:</label>
		<input type="text" name="age"></input>
	</div>
	<div class="inputForm">
		<label for="city">Miejscowoœć:</label>
		<input type="text" name="city"></input>
	</div>
	<div id="submit">
		<input type="submit" value="Popieram" />
	</div>
</form>

2. Zabezpieczenie przy wprowadzaniu danych do formularza po stronie klienta

Naszą pierwszą linią oporu jest przeglądarka, w której użytkownik wprowadza dane do formularza. Tu wykorzystamy JavaScript. Założenie jest następujące: gdy użytkownik wypełni i  zatwierdzi formularz, zostanie wywołana funkcja zdefiniowana w atrybucie onsubmit, która sprawdzi dane, zanim dostaną się do skryptu na serwerze.

Schemat działania validateForm()

  1. Sprawdzamy wybrane pola formularza pod kątem znaków specjalnych i w razie ich wystąpienia usuwamy je.
  2. Przypisujemy do zmiennych wartości pól formularza, definiujemy indeks który odpowiada @ oraz . w podanym adresie email, definiujemy tablicę w której będziemy wpisywać wykryte błędy przy sprawdzaniu pól oraz tworzymy zmienną response, w której będziemy przechowywać informacje o błędach.
  3. Definiujemy styl domyślny pól na szarą ramkę.
  4. Sprawdzamy po kolei wszystkie pola i jeśli któreś jest puste lub źle sformatowane (email, wiek), to do tablicy info dodajemy nazwę pola oraz definiujemy styl ramki na czerwony bold.
  5. Ostatecznie sprawdzamy tablice info. Jeśli zawiera jakieś informacje, to w zmiennej response tworzymy raport błędów, który wypisujemy w sekcji oznaczonej identyfikatorem alert oraz zwracamy false, aby wysyłanie formularza zostało zatrzymane.
/*
 *@Author Jacek Gzel
 *@Contact Jacek.Gzel[at]gmail.com
 *Sprawdzanie formularza
 */
function validateForm() {
	/*oczyszcznie pol*/
	document.forms['formularz']['firstName'].value = clear(document.forms['formularz']['firstName'].value);
	document.forms['formularz']['firstName'].value = clear(document.forms['formularz']['firstName'].value);
	document.forms['formularz']['age'].value = clear(document.forms['formularz']['age'].value);
	document.forms['formularz']['city'].value = clear(document.forms['formularz']['city'].value);

	/* Deklaracje podstawowych danych */
	var firstName = document.forms['formularz']['firstName'].value;
	var lastName = document.forms['formularz']['firstName'].value;
	var email = document.forms['formularz']['email'].value;
	var age = parseInt(document.forms['formularz']['age'].value);
	var city = document.forms['formularz']['city'].value;
	var atpos = email.indexOf("@");
	var dotpos = email.lastIndexOf(".");
	var info = new Array();
	var response = "";

	/* Ustawienie stylu domyslnego dla formularza */
	document.forms['formularz']['firstName'].style.border =
	document.forms['formularz']['lastName'].style.border =
	document.forms['formularz']['email'].style.border =
	document.forms['formularz']['city'].style.border =
	document.forms['formularz']['age'].style.border =
	"1px solid #CCCCCC";

	/* Sprawdzenie pól formularza */
	if(firstName == null || firstName == "") {
		info.push("imię");
		document.forms['formularz']['firstName'].style.border="2px solid red";
	};
	if(lastName == null || lastName == "") {
	info.push("nazwisko");
	document.forms['formularz']['lastName'].style.border="2px solid red";
	};
	if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
		info.push("email (nazwa@domena.pl)");
		document.forms['formularz']['email'].style.border="2px solid red";
	};
	if(city == null || city == "") {
		info.push("miejscowość");
		document.forms['formularz']['city'].style.border="2px solid red";
	};
	if(age == null || age == "" || isNaN(age) == true || age < 1 || age >= 150) {
	info.push("wiek (od 1 do 150)");
	document.forms['formularz']['age'].style.border="2px solid red";
	};

	/* Jeśli są jakieś pola puste */
	if(info.length){
		response = 'Przed zatwierdzeniem, należy poprawnie wypełnić ponizsze pola<br />';
		for(var i=0;i<info.length;i++) {
			response += info[i]+"<br />";
		};
		document.getElementById('alert').innerHTML= response;
		return false;	//Blokada wysyłania danych
	}
	else{
		response = "Dziękujemy za wpis!";
	};
	alert(response);
	return true;
}

/**
 * Usuwa znaki specjalne np ";", "$" itp.
 * @string - ciag znaków ktory ma zostac przeszukany pod katem znakow specjalnych
 * @return - funkcja zwraca oczyszczony ze znaków specjalnych ciag znakow
 */
function clear(string) {
	r = /\$|,|@|#|~|`|\%|\*|\^|\&|\(|\)|\+|\=|\[|\_|\]|\[|\}|\{|\;|\:|\'|\"|\<|\>|\?|\||\\|\!|\$|\./g;
	return string.replace(r, "");
}

3. Zabezpieczenie przy wprowadzaniu danych do formularza po stronie serwera

Zakładamy, że pierwsza linia obrony zawiodła i dane dotarły do skryptu. Jeśli teraz zostaną wpisane do bazy, a następnie wyświetlone, ktoś może uzyskać hasła lub usunąć dane z bazy. Zanim zostanie wykonana metoda dbQuery() musimy jak najszybciej usunąć znaki specjalne. Na szczęście php oferuje nam kilka metod, dzięki którym możemy się zabezpieczyć. W zależności od wersji PHP jaką posiadamy powinniśmy wybrać:

  • PHP 4 i więcej – addslashes($string)
  • PHP 4.3.0 i więcej – mysql_real_escape_string($string) przy tej metodzie należy zaznaczyć, że aby zadziałała poprawnie, wcześniej należy określić kodowanie bazy poprzez mysql_set_charset(). Warto również coś powiedzieć, na temat podobnej metody mysql_escape_string($string). Różnica między nimi jest dość istotna, ponieważ mysql_escape_string() usuwa również litery typu ł, ś, ż.
  • PHP 5 – w tej wersji zaleca się stosowanie metod PDO lub mysqli czyli: PDO::quote($string) lub mysqli::real_escape_string($string)

Poniżej przykładowy skrypt odbierający i oczyszczający dane post z formularza

<?php
/*(...)*/

/* Stworzenie zapytania SQL z danymi z formularza */
if(isset($_POST['lastName']) AND isset($_POST['email']) AND isset($_POST['age'])){
	$query = "INSERT INTO `tabela`
		(`firstName`, `lastName`, `email`, `city`, `age`,)
		VALUES (";

	$query .= "'". addslashes($_POST['firstName']) ."',";
	$query .= "'". addslashes($_POST['lastName']) ."',";
	$query .= "'". addslashes($_POST['email']) ."',";
	$query .= "'". addslashes($_POST['city']) ."',";
	$query .= "'". addslashes($_POST['age']) ."',";

	dbQuery($query);

/*(...)*/
?>

4. Zabezpieczenie przy wyświetlaniu danych

Pierwsza linia zawodzi, druga podobnie, dane z niebezpiecznym skryptem wpłynęły do naszej bazy. W najlepszym przypadku, w księdze wyświetli się coś głupiego, typu ogromny tekst <h1>LOL</h1>, w najgorszym przypadku tracimy dane. Ale nie koniecznie, stawiamy trzeci mur. Faktycznie, niebezpieczne dane są w bazie i należy je jak najszybciej wykasować, ale ciągle są unieszkodliwione. Tym razem podczas wyświetlania, wykorzystamy gotowe metody szablonów SMARTY i z ich pomocą zapobiegniemy tragedii.

  • escape:‚htmlall’:’UTF-8′ – usuwa niebezpieczne znaczniki oraz zachowuje litery specjalne typu ł, ś, ą zakodowane w UTF-8
  • truncate:20:’…’ – przycina tekst do 20 znaków, a zamiast reszty ciągu wstawia …

Poniżej przykład tworzący tabelę z danymi z bazy

<table>
	{foreach from=$views key=k item=rows}
		<tr>
			<td>{$rows.firstName|escape:'htmlall':'UTF-8'|truncate:20:'...'}</td>
			<td>{$rows.lastName|escape:'htmlall':'UTF-8'|truncate:20:'...'}</td>
			<td>{$rows.city|escape:'htmlall':'UTF-8'|truncate:20:'...'}</td>
			<td>{$rows.data|escape:'htmlall':'UTF-8'|truncate:20:'...'}</td>
		</tr>
	{/foreach}
</table>
Opublikowano PHP, Smarty | Otagowano , , , , | 4 komentarzy

Praca z XML Schema (XSD)


W tym artykule opiszę w jaki sposób pracować ze standardem XSD. Jednak nie będę rozpisywał się na temat definicji, bo to można znaleźć w sieci. Natomiast skupię się na tworzeniu samego dokumentu.

XSD (XML: Schema Definition) – jest to bazujący na XML język służący do definiowania zawartości dokumentu XML. Wykorzystanie tego standardu daje wiele zalet m.in.

  • Definiowanie elementów oraz atrybutów
  • Definiowanie elementu dziecka oraz rodzica
  • Określanie kolejności oraz liczby elementów potomnych
  • Określanie czy element ma być pusty czy ma zawierać tekst
  • Definiowanie typów danych dla elementów i atrybutów
  • Definiowanie stałych i zmiennych wartości elementów i atrybutów
  • Walidacja oraz ujednolicenie dokumentu
  • Praca z danymi z bazy danych
  • Wykorzystanie parsera XML do parsowania pliku XSD
  • Struktura oparta na węzłach DOM

Tyle na temat samej definicji. Teraz czas na stronę praktyczną. Aby przedstawić przykładowe zastosowanie języka pokaże jak zdefiniować schemat książki adresowej. Po pierwsze wypiszę jakie elementy będą przechowywane w książce oraz wstępnie zdefiniuje ich typy.

Element Typ
Imię Tekst
Nazwisko Tekst
Data urodzenia Data
Telefon Liczba
Adres Tekst

Na początku zdefiniuje plik xml przedstawiający pusty szablon książki z kolejnymi osobami rozróżnianymi identyfikatorem.

<?xml version="1.0"?>
<book>
	<person id="">
		<name></name>
		<surname></surname>
		<dateborn ></dateborn>
		<mobile></mobile>
		<adress></adress>
	</person>
</book>

Następnie powyższy szablon przedstawię za pomocą schematu XSD z okreslonymi typami danych.

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://www.w3schools.com"
xmlns="http://www.w3schools.com"
elementFormDefault="qualified">

<xs:element name="book">
	<xs:complexType>
		<xs:sequence>
			<xs:element name="person">
				<xs:complexType>
					<xs:sequence>
						<xs:element name="name" type="xs:string"/>
						<xs:element name="surname" type="xs:string"/>
						<xs:element name="dateborn" type="xs:date"/>
						<xs:element name="mobile" type="xs:positiveInteger"/>
						<xs:element name="address" type="xs:string"/>
					</xs:sequence>
				</xs:complexType>
				<xs:attribute name="id" type="xs:integer"/>
			</xs:element>
		</xs:sequence>
	</xs:complexType>
</xs:element>

</xs:schema>

Teraz opiszę z czego składa się schemat rozpoczynając od elementów najgłębiej zagnieżdżonych.

  • Elementy proste <xs:element name=”nazwa” type=”xs:typ” /> mogą zawierać jedynie tekst określony typem oraz opcjonalnie zakresem typu. W naszym przypadku będą to konkretne elementy tj. imię nazwisko, telefon itd.
  • Następnie mamy element złożony <xs:element name=”person„> który składa się z <xs:complexType> przekonywującego elementy proste w powtarzających sie sekwencjach <xs:sequence> oraz atrybutu z identyfikatorem <xs:attribute name=”id” type=”xs:integer” />
  • Na samej górze mamy root element book
Opublikowano Różne | Otagowano , | Dodaj komentarz

Oracle APEX – chart, czyli jak tworzyć wykresy


W tym artykule opiszę jak tworzyć strony z wykresami. Do wyboru mamy dwa typy wykresów, Flash oraz HTML. Aby rozpocząć, musimy stworzyć stronę z wykresem, w tym celu:

  • W Application Builder wybieramy Create Page
  • Następnie zaznaczamy Chart

HTML Chart

Umożliwia tworzenie prostych wykresów HTML. Najważniejszą zakładką jest Chart Definition, ponieważ umożliwia zdefiniowanie źródła danych oraz jak ma wyglądać wykres. Najważniejszą sprawą jest odpowiednio zdefiniowane zapytanie SQL określające źródło danych. Składnia jest następująca:

select LINK, LABEL, VALUE from …

  • LINK – określa to co zostanie wyświetlone po naciśnięciu na etykietę wykresu
  • LABEL – jest to tekst jaki będzie wyświetlony przy pasku (np. data)
  • VALUE – długość pojedynczego paska na  wykresie (np. kwota)

Obrazek pasek wykresu

Kolejne opcje to:

  • Font size – wielkość czcionki na wykresie
  • Maximum Rows – określa ile wierszy ma zostać wyświetlone na pojedynczej stronie
  • Number Mask – określa w jakim formacie mają być wyświetlane wartości
  • Scale – skala wykresu
  • Axis center – określa w jaki sposób mają być wyświetlane paski wykresu
  • Chart Type – możliwe typy wykresów poziomy i pionowy
  • Include in summary– wartości jakie mają zostać wyświetlone w podsumowaniu

Przykład

Wyświetlić wartości zamówień w danym dniu.

Dane na ten temat są zawarte w tabeli DEMO_ORDERS. Nas będą interesowały kolumny ORDER_TIMESTAMP oraz ORDER_TOTAL. Stwórzmy zapytanie SQL:

select null, ORDER_TIMESTAMP, ORDER_TOTAL
from DEMO_ORDERS

Pozostałe opcje możemy pozostawić domyślne

Obrazek wykres HTML

Flash Chart

Stosując tą samą składnie SQL, jak w przypadku HTML możemy tworzyć wykresy Flash. Te jednak dają nam o wiele większe możliwości, zarówno w wyborze typów wykresu jak i w konfiguracji wyglądu. Dla przykładu stwórzmy bardziej rozbudowany wykres liniowy, składający się z linii zamówień zrealizowanych przez wybranych klientów w danym dniu. Załóżmy że będą to klienci z id 3 oraz 7. Podczas tworzenia strony z wykresem, stworzymy linię klienta 3, a następnie przejdziemy do edycji i dodamy linię klienta 7. Do rzeczy.

  • Tworzymy stronę, ale tym razem jako typ wykresu wybieramy Flash Chart.
  • Chart Type wybieramy Line
  • Kolejne etapy edytujemy analogicznie do HTML Chart, aż do pozycji Query. W tym momencie musimy stworzyć zapytanie SQL, które wyświetli dane do naszego wykresu. Składnie już znamy. Poniżej zapytanie, które wyświetli kwoty zmówień w danym dniu, zrealizowane przez klienta 3.
select null, o.ORDER_TIMESTAMP, o.ORDER_TOTAL as "Edward Logan"
from DEMO_CUSTOMERS c, DEMO_ORDERS o
where c.CUSTOMER_ID = o.CUSTOMER_ID
and c.CUSTOMER_ID = 3
  • Zapisujemy stronę i możemy ją sobie podejrzeć. W tym momencie otrzymamy linię klienta 3. My jednak chcemy dodać kolejnego klienta. W tym celu wchodzimy do edycji strony, naciskamy prawym na Chart i wybieramy Edit Chart.
  • Następnie przechodzimy do zakładki Chart Series i wybieramy Add Series >
  • w polu Query, analogicznie do podpunktu 3, tworzymy zapytanie, które wyświetli dane klienta 7.
select null, o.ORDER_TIMESTAMP, o.ORDER_TOTAL "Eugene Bradle"
from DEMO_CUSTOMERS c, DEMO_ORDERS o
where c.CUSTOMER_ID = o.CUSTOMER_ID
and c.CUSTOMER_ID = 7
  • Ostatecznie zapisujemy zmiany i możemy uruchomić stronę. W efekcie powinniśmy otrzymać wynik, jak na poniższym obrazku.Obrazek wykres flash
Opublikowano APEX | Otagowano , , , , , , | Dodaj komentarz