server.listen(port, hostname, () => { console.log(`server running at });
|
|
|
- Grzegorz Dudek
- 7 lat temu
- Przeglądów:
Transkrypt
1 TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r. i ) Dla przypomnienia uruchamianie serwera http podającego statyczną treść polegało na stworzeniu skryptu wraz z osadzonym kodem statycznej strony HTML i utworzeniem funkcji obsługującej żądania przychodzące do serwera: var html = '<html>'+ '<head>'+ '<meta charset="utf-8">'+ '<title>to jest strona testowa</title>'+ '</head>'+ '<body>'+ '<h1>witaj świecie w NODE.JS</h1>'+ '<h2>to jest strona statyczna</h2>'+ '</body>'+ '</html>'; const http = require('http'); const hostname = ' '; const port = 3000; const server = http.createserver((req, res) => { res.statuscode = 200; res.setheader('content-type', 'text/html'); res.end(html); server.listen(port, hostname, () => { console.log(`server running at W ramach tego kodu można tworzyć statycznie działające witryny internetowe bez konieczności instalacji serwera Apache. Dodatkowo w celu zapewnienie sterowalności aplikacją i odpowiedzi na żądania przychodzące od klientów w postaci adresów URL można wykorzystać informację przekazywaną w nagłówku o wpisanym adresie i tym samym np. przygotować podstrony serwisu: const fs = require('fs'); const http = require('http'); const hostname = ' '; const port = 1337; const server = http.createserver((req,res) => { if( req.url == '/'){
2 res.writehead(200,{'content-type': 'text/html' fs.readfile('index.html','utf-8',(err,data) => { res.end(data); } else if( req.url == '/podstrona'){ res.writehead(200,{'content-type': 'text/html' fs.readfile('podstrona.html','utf-8',(err,data) => { res.end(data); } server.listen(port, hostname, () => { console.log(`server running at Instalacja środowiska Express.js Node.JS umożliwia również tworzenie złożonych i zaawansowanych aplikacji webowych w architekturze MVC (Model-View-Controller). Dziś poznamy kompletne narzędzia i metody do tworzenia aplikacji w tej architekturze w środowisku NODE.JS. Do tworzenia aplikacji w architekturze MVC w środkowsku NODE.JS służy pakiet Express (strona projektu: ). Jest to bardzo rozbudowane narzędzie ułatwiające budowanie aplikacji webowych w NODE.JS. Aby z niego skorzystać należy przeprowadzić instalację pakietu express składającą się z kilku kroków: 0) Domyślnie używamy powłoki terminala bash. Jeśli nie jest to domyślna powłoka należy się do niej przełączyć wpisując w terminalu polecenie: > bash 1) Za pomocą standardowej metody instalacji pakietów należy zainstalować w środowisku node.js moduł express : > npm install express 2) Dodoatkowo musimy doinstalować pakiet generatora express: > npm install -g express-generator Na tym etapie środowisko NODE.JS jest gotowe do tworzenie aplikacji w architekturze MVC. Tworzenie nowego projektu Aby utworzyć nowy projekt należy wykonać następujące kroki: 1) Utworzyć w kartotece głównej NODE.JS nowy katalog np.: > mkdir hello 2) Wygenerować strukturę aplikacji: > express hello 3) Wejść do kartoteki hello:
3 > cd hello/. 4) Doinstalować starndardowe pakiety: > npm install 5) Na tym etapie aplikacja jest gotowa do uruchomienia. Serwer uruchamiamy wydając polecenie: > npm start 6) W przeglądarce, po wpisaniu adresu localhost:3000 powinniśmy ujrzeć domyślną stronę projektu express. 7) Dodatkowo w konsoli w której uruchomiliśmy serwer dostajemy logi np.: GET / ms - 270b GET /stylesheets/style.css 200 8ms - 110b które mówią o czasach wykonywania przychodzących żadań do serwera i pobieranych plikach. Zgodnie podziałem na trójwarstwową strukturę aplikacji (Model-View-Controller) poszczególne moduły aplikacji są rozproszone w różnych kartotekach. Podstawowa struktura kartotek jest następująca: -rw-r--r :52 app.js drwxr-xr-x :52 bin drwxr-xr-x :52 node_modules -rw-r--r :52 package.json drwxr-xr-x :52 public drwxr-xr-x :52 routes drwxr-xr-x :52 views // główny plik aplikacji // katalog z serwerem // dodatkowe moduły node.js // pliki publiczne np. css // kontroler // widok Kartoteka models nie jest standardowo tworzona. Architektura trójwarstwowa wymusza podział na akcje i widoki. Gdzie akcje (znajdujące się kontrolerze) są odpowiedzialne za wykonywanie operacji i obsługę żądań przychodzących do serwera, a widoki za wyświetlanie danych przychodzących z kontrolera. Standardowo akcje przechowywane są w kartotece routes, a widoki w kartotece views. Rozpocznijmy od kontrolera: w kartotece routes znajdują się dwa plik jeden o nazwie index.js drugi user.js. Zajmijmy się tym pierwszym, który odpowiada za obsługę strony głównej w naszej aplikacji. Jego struktura jest bardzo prosta i zawiera tylko jedną funkcję obsługującą żądania GET przychodzące do serwera Dygresja: GET -> nasŧepuje kiedy wchodzimy na stronę (wpisujemy adres w przeglądarce) i w odpowiedzi na żądanie tego typu serwer zwraca treść do wyświetlania. POST -> następuje kiedy przesyłamy dane do serwera (np. wysyłając dane wpisane do formularza) które mają zostać przetworzone /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express'
4 W tej funkcji obsługujemy żądanie GET przychodzące od klienta (z przeglądarki), wymuszające wyświetlenie strony głównej aplikacji. W odpowiedzi na przychodzące żądanie req formowana jest odpowiedź res, która renderuje stronę index.html na podstawie widoku znajdującego się w kartotece views (ale o tym za chwile). Przeanalizujmy, jakie wartości przyjmuje metoda render. Jako pierwszy argument podajemy nazwę pliku widoku który ma zostać wyświetlony w wyniku realizacji tego zadania, a drugi parametr to obiekt z danymi przekazywanymi do widoku które mają zostać wyświetlone ostatecznie na stronie. Można to porównać do funkcji która zwraca wartość (tu w postaci złożonego obiektu) do innej funkcji. Przejdźmy teraz do widoku. W oparciu o architekturę MVC środowisko node.js wraz z modułem express wymusza wprowadzenie nowej formuły tworzenie widoków. Widoki poszczególnych stronę przechowywane są w plikach jade. Pliki te nie mają postaci standardowego kodu html, pewnego rodzaju kodu semi-html. Strona zbudowana jest w oparciu o główny widok przechowywany w pliku layout.jade oraz plików dodatkowych obsługujących poszczególne strony będące rozszerzeniem widoku głównego. W najprostszym ujęciu plik layout przechowuje część head strony, a pliki z konkretnymi podstronami zawierają tylko sekcję body która jest dynamicznie zmieniana w zależności od wysłania żądania do serwera: doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content W klasycznym pliku kodzie html składnia powyższa składnia jade odpowiadałaby: <!DOCTYPE html> <html> <head> <title>.. </title> <link rel="stylesheet" href="/stylesheets/style.css" /> </head> <body>.. </body> </html> Jak widać składnia semi-html jade, jest pozbawiony znaków określających znaczniki oraz jest również samo uzupełniający się ponieważ nie ma znaczników zamykających!!!! Przykład widoku wyświetlającego stronę główną jest umieszczony w pliku index.jade : extends layout block content h1= title p Welcome to #{title} Polecenie extends layout mówię serwerowi, że ten plik rozszerza funkcjonalność głównego widoku umieszczonego w pliku layout.
5 Dodatkowo w obu przypadkach widoku głównego, jak i widoku rozszerzającego widać również jak należy odbierać zmienne przekazywane przez w obiekcie funkcji render. Jak pamiętamy przekazaliśmy w kontrolerze objekt: { title: Express } Jest on teraz wyświetlany w dwóch miejscach w elemencie <h1> oraz <p>. W obu przypadkach dostęp do obiektu jest inny, jednak są to dwie równoważne metody. Z doświadczenie polecam metodę drugą czyli #{ nazwa zmiennej }. Przykład 1. (który już znamy): Zapisywanie znaczników w JADE: <div> Element blokowy </div> div Element blokowy Przykład 2. <html> <head> <title> Jade </title> </head> <body> <p> JADE </p> </body> </html> html... head... title Jade... body... p... JADE W przykładzie powyżej kropki oznaczają wcięcia zrobione za pomocą spacji. Alternatywnie można używać tabulatora (stałego odstępu). Należy jednak w pojedynczym pliku.jade używać spacji lub tabulacji (nigdy obu). Powyższy przykład pokazuje również niezwykłą zwięzłość tego typu kodowania. Wewnątrz tekstu języka JADE można używać znaczników HTML!!!!! Przykład 3. Plain text can include <strong>html</strong> <p> It must always be on its own line </p> Plain text can include <strong>html</strong> p It must always be on its own line Znaczniki HTML zostaną przesłane do przeglądarki gdzie zostaną zinterpretowane Przykład 4 - Lista <ul> <li>item A</li> ul li Item A
6 <li>item B</li> </ul> li Item B li Item C Tworzenie atrybutów znaczników: <a href="google.com">google</a> <a href="google.com" class="button">google</a> a(href='google.com') Google a(class='button', href='google.com') Google Klasy: <a class="button"></a> <div class="content"></div> a.button.content Identyfikatory: <a id="main-link"></a> <div id="content"></div> a#main-link #content Prosta logika w JADE: JADE umożliwia wykonywanie bardzo prostych operacji wyliczeniowych: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> ul each val in [1, 2, 3, 4, 5] li= val Możliwe jest wykonywanie prostych zadań które mają być wykonane w pętli: <li>item</li> <li>item</li> <li>item</li> - for (var x = 0; x < 3; x++) li item Dostęna jest również instrukcja warunkowa wyboru: <p>you have 10 friends</p> - var friends = 10 case friends when 0 p you have no friends when 1 p you have a friend default p you have #{friends} friends
7 Przekazywanie zmiennych przez adres - metoda GET w node.js. W kilku sytuacjach niezbędne jest jawne przekazanie wartości zmiennych przez adres (metoda GET), podobanie jak to było w PHP. Jako, że w tym przypadku metoda wysyłamy zmienne to GET możemy posłużyć się funkcją: router.get(). Jak już wiemy w metodzie.get() pierwszym parametrem jest adres obsługiwanego żądania. W tym miejscu możemy również przekazywać wartości zmiennych. Przykład: Chcemy przekazać 4 następujące zmienne o wartościach całkowitych: a=4, b=5, c=6, d=7. Aby to uczynić musimy w odpowiedni sposób spreparować maskę adresu dla metody.get(). Zakładamy że nasz funkcja będzie obsługiwała docelowo adres /test oraz w odpowiedzi będzie renderować stronę widoku o nazwie testowy.jade. W standardowym wypadku szablon naszej funkcji będzie następujący: router.get('/test, function(req, res){ var obj = 0; res.render('testowy', obj); Teraz musimy tak zmodyfikować maskę obsługiwanego adresu aby można było podać zmienne (oczywiście nie wpisujemy ich na sztywno w adresie!). Zmianę w adresie są symbolizowane przez: :nazwa_zmiennej // dwukropek i nazwa zmiennej przykładowo: router.get('/test/:a, function(req, res) gdzie :a jest nazwą naszej zmiennej którą będziemy mogli posługiwać się do odebrania wartości. Jesteśmy mamy tych zmiennych więcej oddzielamy je przecinkami: router.get('/test/:a,:b,:c,:d, function(req, res) Możliwe są również, inne kombinacje np: router.get('/test/:a/:b,:c/:d, function(req, res) router.get('/test/:a/:b/:c/:d, function(req, res) router.get('/test/:a/:b,:c,:d/:e/:f/:g,:h, function(req, res) W adresach można przesyłać dowolne wartości tj. liczby, znaki etc. Aby odebrać wartości ze zmiennych adresowych należy posługiwać się obiektem żądania i nazwą zmiennej zdefiniowanej w adresie: req.params.nazwa_zmiannej; np: req.params.a; req.params.b; Wykorzystanie tej funkcjonalności najczęściej polega na wpisaniu na sztywno np. odnośnikach wartości zmiennych. W widoku ma to np następującą postać:
8 a(href= /test/4,5,6,7 ) kliknij mnie Po kliknięciu w link zostanie wywołana metoda get obsługująca wywołany adres. Przekazywanie zmiennych przez formularz - metoda POST w node.js. Zacznijmy od zdefiniowania w routes/index.js nowej funkcji która będzie odpowiadała za wyświetlanie naszej strony oraz przetworzenie danych wpisanych do formularza. Standardowo w tym pliku mamy obiekt który obsługuje nam zapytania do serwera żądające wyświetlanie danej strony: /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' W tym wypadku w odpowiedzi renderowany jest szablon zapisany w pliku views/index.jade, będący rozszerzeniem domyślnego wyglądu strony. Aby obsłużyć formularz obsługujący dane musimy posłużyć się do tego celu metodą odbierającą dane z formularza czyli POST (wyjaśnienie różnicy pomiędzy GET a POST było przedstawione w poprzednich materiałach). Szkielet funkcji jest następujący: router.post( [link-wyswietlany], function(req,res){ res.render(' [nazwa.jade] ',{ } ); W naszym przypadku chcielibyśmy utworzyć formularz który posiada jedno pole typu text do którego wpisujemy dane, a następnie te dane są wyświetlane jak tytuł strony ( w nagłówku h1) strony wyświetlonej po przeładowaniu. Załóżmy że strona po przeładowaniu będzie się nazywać studentuj, a do szablonu jade przekazywana będzie wartość pola z formularza. Do pobierania danych z pól formularza, posługujemy się obiektem req który jest generowany w momencie wysłania żądania do serwera. Dostęp do wszystkich pól formularza jest możliwy przez obiekt body i podanie nazwy danego pola w formularzu np:. req.body.student. Pełny kod funkcji renderującej stronę na podstawie danych z formularza jest następujący: router.post('/studentuj',function(req,res) { var student = { name: req.body.student //nazwa pola }; res.render('index', {title: req.body.student Musimy odpowiednio zmodyfikować plik index.jade tak aby zawierał sam formularz: extends layout block content h1= title p Welcome to #{title} form(method="post" action="/studentuj") input(type="text" name="student")
9 input(type="submit") Formularz ten POSTuje (czyli wysyła dane) pod adres /studentuj który właśnie jest obsługiwany w kontrolerze przez wcześniej napisaną funkcję. Zadanie: Proszę przemyśleć zadaną konstrukcję obsługi formularza w architekturze View-Controller i spróbować stworzyć projekt który odwzorowuje omówiony przykład wraz ze swoim autorskim formularzem.
ZAAWANSOWANE TECHNIKI WWW (zajęcia r. i r.)
ZAAWANSOWANE TECHNIKI WWW (zajęcia 18.11.2017 r. i 17.12.2017 r.) 1. Przygotowanie środowiska pracy back-end (Node.js) NodeJS (wersja LTS: 8.9.1) jest zaawansowanym środowiskiem do tworzenia skalowalnych
Co to jest NODE.JS? Nowoczesne środowisko programistyczne
Node.js Co to jest NODE.JS? Nowoczesne środowisko programistyczne Środowisko programistyczne w sensie zestawu gotowych klas i metod których można używać do przygotowania własnych skalowalnych i wydajnych
Modele danych walidacja widoki zorientowane na model
Modele danych walidacja widoki zorientowane na model 1. Wprowadzenie Modele danych Modele danych w ASP.NET MVC to klasy znajdujące się w katalogu Models. Ich zadaniem jest mapowanie danych przesyłanych
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium PHP. Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, obsługa formularzy oraz zmiennych
Laboratorium 7 Blog: dodawanie i edycja wpisów
Laboratorium 7 Blog: dodawanie i edycja wpisów Dodawanie nowych wpisów Tworzenie formularza Za obsługę formularzy odpowiada klasa Zend_Form. Dla każdego formularza w projekcie tworzymy klasę dziedziczącą
Laboratorium 1 Wprowadzenie do PHP
Laboratorium 1 Wprowadzenie do PHP Ćwiczenie 1. Tworzenie i uruchamianie projektu PHP w Netbeans Tworzenie projektu Uruchom środowisko NetBeans. Stwórz nowy projekt typu PHP Application (File->New Project,
Laboratorium 6 Tworzenie bloga w Zend Framework
Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy
Technologie sieciowe Sprawozdanie z labolatorium. Lista 5
Politechnika Wrocławska Wydział Podstawowych Problemów Techniki Technologie sieciowe Sprawozdanie z labolatorium Lista 5 Autor: Piotr Kosytorz IIrokInf. indeks: 166174 Prowadzący: dr inż. Łukasz Krzywiecki
Referat z przedmiotu Technologie Internetowe SPIS TREŚCI
SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8
Podstawy JavaScript ćwiczenia Kontekst: REFERAT O PRACY DYPLOMOWEJ
REFERAT O PRACY DYPLOMOWEJ Temat pracy: Projekt i budowa systemu zarządzania treścią opartego na własnej bibliotece MVC Autor: Kamil Kowalski W dzisiejszych czasach posiadanie strony internetowej to norma,
Podstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 8 PHP, czyli poczatki nowej, dynamicznej znajomosci Na dzisiejszych zajęciach rozpoczniemy programowanie po stronie serwera w języku PHP. Po otrzymaniu żądania serwer
MVC w praktyce tworzymy system artykułów. cz. 2
MVC w praktyce tworzymy system artykułów. cz. 2 W drugiej części artykułu o wzorcu MVC stworzymy część skryptu, odpowiedzialną za obsługę kategorii. Tworzymy kontroler kategorii Na początek stwórzmy plik
PROJEKTOWANIE APLIKACJI INTERNETOWYCH
PROJEKTOWANIE APLIKACJI INTERNETOWYCH (WFAIS.IF-N016) dr inż. Marcin Zieliński Wykład dla kierunku: Informatyka Stosowana I rok, II stopień Rok akademicki: 2016/2017 - semestr letni WYKŁAD 6 Przypomnienie
Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4
03.04.2017r AGH, WIMIR, Inżynieria Mechatroniczna Dawid Furdzik Nr albumu: 279671 Sprawozdanie Sieci komputerowe i bazy danych Laboratorium nr 4 Po wywołaniu polecenia odpowiedź serwera wygląda następująco:
Aplikacje internetowe - laboratorium
Aplikacje internetowe - laboratorium PHP Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej opartej o język PHP. Aplikacja ilustruje takie mechanizmy jak: obsługa formularzy oraz obsługa
Tworzenie witryn internetowych PHP/Java. (mgr inż. Marek Downar)
Tworzenie witryn internetowych PHP/Java (mgr inż. Marek Downar) Rodzaje zawartości Zawartość statyczna Treść statyczna (np. nagłówek, stopka) Layout, pliki multimedialne, obrazki, elementy typograficzne,
Quiz Aplikacja internetowa
- 1 - Quiz Aplikacja internetowa Opis: Realizacja aplikacji internetowej Quiz w oparciu o Python i framework Flask (wersja 0.10.1). Autorzy: Tomasz Nowacki, Robert Bednarz Czas realizacji: 90 min Poziom
Ajax. 1. Wprowadzenie. 2. Aplikacja serwerowa
Ajax 1. Wprowadzenie Do tej pory każda akcja na Waszej stronie kończyła się nowym requestem do serwera i przeładowaniem całej strony w przeglądarce. W tej instrukcji dodamy elementy asynchroniczne na stronie,
Programowanie w Sieci Internet Blok 2 - PHP. Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki
Programowanie w Sieci Internet Blok 2 - PHP Kraków, 09 listopada 2012 mgr Piotr Rytko Wydział Matematyki i Informatyki Co dziś będziemy robić Podstawy podstaw, czyli małe wprowadzenie do PHP, Podstawy
INSTALACJA I KONFIGURACJA SERWERA PHP.
LABORATORIUM 0 INSTALACJA I KONFIGURACJA SERWERA PHP. W celu poprawnego wykonywania zadań na laboratorium konieczne jest zainstalowanie na komputerze wyposażonym w system operacyjny Windows następujących
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej JSP - Java Server Pages dr hab. inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki 2019 Aplikacje i skrypty WWW klasyfikacja
Materiały oryginalne: ZAWWW-2st1.2-l11.tresc-1.0kolor.pdf. Materiały poprawione
Materiały oryginalne: ZAWWW-2st1.2-l11.tresc-1.0kolor.pdf Materiały poprawione Rozwiązanie zadania w NetBeans IDE 7.4: Jarosław Ksybek, Adam Miazio Celem ćwiczenia jest przygotowanie prostej aplikacji
Zmienne i stałe w PHP
Zmienne i stałe w PHP Zmienne Zmienne to konstrukcje programistyczne, które pozwalają na przechowywanie danych. Każda zmienna posiada swoją nazwę oraz typ. Nazwa to jednoznaczny identyfikator, dzięki któremu
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium Serwlety Celem ćwiczenia jest przygotowanie kilku prostych serwletów ilustrujących możliwości tej technologii. Poszczególne ćwiczenia prezentują sposób przygotowania środowiska,
Aplikacje webowe w obliczu ataków internetowych na przykładzie CodeIgniter Framework
Uniwersytet Zielonogórski Wydział Elektrotechniki, Informatyki i Telekomunikacji Aplikacje webowe w obliczu ataków internetowych na przykładzie CodeIgniter Framework mgr inż. Łukasz Stefanowicz dr inż.
Na początku utworzymy formularz w czystym języku HTML i przetestujemy go za pomocą przeglądarki WWW.
Tematy: Przygotowanie formularza Przesyłanie danych przez formularz Mechanizm PostBack W rozdziale 1. pojawiła się prosta definicja strony WWW definicja ta określiła dynamiczną stronę WWW jako stronę,
ASP.NET MVC. Podstawy. Zaawansowane programowanie internetowe Instrukcja nr 3
3 ASP.NET MVC Podstawy 1 1. Cel zajęć Celem zajęć jest zapoznanie się z podstawami ASP.NET MVC 2.0 Framework. 2. Zadanie Proszę zbudować prostą aplikację WWW przy zastosowaniu framework a ASP.NET MVC 2.0
Poznaj ASP.NET MVC. Kamil Cieślak Microsoft Student Partner 2013-03-11
Poznaj ASP.NET MVC Kamil Cieślak Microsoft Student Partner 2013-03-11 Agenda Czym jest ASP.NET MVC? Wzorzec MVC ASP.NET MVC vs inne frameworki Bazy danych w ASP.NET MVC Jak zacząć? 2 Czym jest ASP.NET
Technologie informacyjne lab. 4
Technologie informacyjne lab. 4 Cel ćwiczenia: Zapoznanie się z komunikacją ze zdalnym serwerem w sieci na przykładzie bezpiecznego serwera SSH. Wstępne zapoznanie się z ideą certyfikatów. Praca z edytorem
WYKŁAD 1 ANGULARJS CZĘŚĆ 1
WYKŁAD 1 ANGULARJS CZĘŚĆ 1 DEFINICJA ANGULARJS Framework JavaScript na licencji open-source wykorzystywany do tworzenia aplikacji SPA (single page applications) w oparciu o wzorzec projektowy Model-View-Controler.
Zaawansowane aplikacje internetowe
Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium PHP + bazy danych Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, współpraca PHP z bazami
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL IV TI 6 godziny tygodniowo (6x15 tygodni =90 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 2. Przygotowanie środowiska pracy
Programowanie i projektowanie obiektowe
Programowanie i projektowanie obiektowe CherryPy, Genshi Paweł Daniluk Wydział Fizyki Jesień 2016 P. Daniluk(Wydział Fizyki) PO w. IX Jesień 2016 1 / 20 Aplikacje webowe Podejście standardowe Serwer (np.
Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych
PAŃSTWOWA WYŻSZA SZKOŁA ZAWODOWA W ELBLĄGU INSTYTUT INFORMATYKI STOSOWANEJ Sprawozdanie z Seminarium Dyplomowego Temat: Ułatwienia wynikające z zastosowania Frameworku CakePHP podczas budowania stron internetowych
Zaawansowany kurs języka Python
Środowisko Django początki 10 stycznia 2014 Plan wykładu 1 2 Plan wykładu 1 2 Co to jest Django Oparty o Pythona framework do tworzenia aplikacji internetowych. Co to jest Django Oparty o Pythona framework
Zaawansowane aplikacje internetowe - laboratorium
Zaawansowane aplikacje internetowe - laboratorium Web Services (część 3). Do wykonania ćwiczeń potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2005. Ponadto wymagany jest
Rys. 1. Widok uruchomienia polecenia apt-get install build-essential. Rys. 2. Widok uruchomienia polecenia apt-get install apache2
1. Instalacja serwera WWW Aby zainstalować serwer WWW w systemie Linux, należy wykorzystać menedżer pakietów apt-get. Polecenia które należy wpisać w terminalu użytkownika root 1 : apt-get install build-essential
ASP.NET MVC. Grzegorz Caban grzegorz.caban@gmail.com. 20 stycznia 2009
ASP.NET MVC Grzegorz Caban grzegorz.caban@gmail.com 20 stycznia 2009 Agenda Przyczyna powstania Co to jest ASP.NET MVC Architektura Hello World w ASP.NET MVC ASP.NET MVC vs ASP.NET WebForm Przyszłość framework'a
rk HTML 4 a 5 różnice
rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk
Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie
PROJEKTOWANIE APLIKACJI INTERNETOWYCH
PROJEKTOWANIE APLIKACJI INTERNETOWYCH LABORATORIUM NR 2 REJESTRACJA NA WEBRATIO.COM 1. Wejdź na webratio.com i zarejestruj konto na uczelniany adres email (@wi.zut.edu.pl). 2. Po wpisaniu danych i zatwierdzeniu,
Bazy Danych i Usługi Sieciowe
Bazy Danych i Usługi Sieciowe Język PHP Paweł Witkowski Wydział Matematyki, Informatyki i Mechaniki Jesień 2011 P. Witkowski (Wydział Matematyki, Informatyki i Mechaniki) BDiUS w. VIII Jesień 2011 1 /
Wykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
PROE wykład 2 operacje na wskaźnikach. dr inż. Jacek Naruniec
PROE wykład 2 operacje na wskaźnikach dr inż. Jacek Naruniec Zmienne automatyczne i dynamiczne Zmienne automatyczne: dotyczą kontekstu, po jego opuszczeniu są usuwane, łatwiejsze w zarządzaniu od zmiennych
Aplikacje internetowe
Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.
Microsoft.NET: ASP.NET MVC + Entity Framework (Code First)
Microsoft.NET: ASP.NET MVC + Entity Framework (Code First) Do realizacji projektu potrzebne jest zintegrowane środowisko programistyczne Microsoft Visual Studio 2012. W ramach projektu budowana jest prosta
Spring Web MVC, Spring DI
Państwowa Wyższa Szkoła Zawodowa w Tarnowie Zakład Informatyki Laboratorium 5 Spring Web MVC, Spring DI Prowadzący: Kierunek: Semestr: Rok: Informatyka Zimowy 2 Technologie Technologie / narzędzia będące
2 Podstawy tworzenia stron internetowych
2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument
Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)
Zaawansowane Techniki WWW (HTML, CSS i NODE.JS) Dr inż. Marcin Zieliński Środa 15:30-17:00 sala: A-1-04 WYKŁAD 8 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2014/2015 - semestr zimowy
Kurs języka Ruby. Ruby on Rails ActionPack
Kurs języka Ruby Ruby on Rails ActionPack Co to jest RoR: Środowisko do szybkiego tworzenia aplikacji webowych Garść informacji Stworzony przez Davida Heinemeiera Hanssona DRY Don't Repeat Yourself Mnóstwo
Klient poczty elektronicznej - Thunderbird
Klient poczty elektronicznej - Thunderbird Wstęp Wstęp Klient poczty elektronicznej, to program który umożliwia korzystanie z poczty bez konieczności logowania się na stronie internetowej. Za jego pomocą
app/ - folder zawiera pliki konfiguracyjne dla całej aplikacji src/ - folder zawiera cały kod PHP aplikacji
Baza danych i ORM Projekt zestaw usług dostępnych pod daną domeną. Aplikacja niezależnie działające programy/serwisy (w obrębie pojektu). Zwyczajowo projekt posiada dwie aplikacje: Frontend Backend Moduł
Instrukcja instalacji PHP-Hypercachera Refresher Standard oraz PHP-Hypercachera Refresher GZIP na Twojej witrynie
Instrukcja instalacji PHP-Hypercachera Refresher Standard oraz PHP-Hypercachera Refresher GZIP na Twojej witrynie 1. Instalacja w zwykłym skrypcie PHP Instalacja PHP Hypercachera Refresher Standard i PHP
ZPKSoft WDoradca. 1. Wstęp 2. Architektura 3. Instalacja 4. Konfiguracja 5. Jak to działa 6. Licencja
ZPKSoft WDoradca 1. Wstęp 2. Architektura 3. Instalacja 4. Konfiguracja 5. Jak to działa 6. Licencja 1. Wstęp ZPKSoft WDoradca jest technologią dostępu przeglądarkowego do zasobów systemu ZPKSoft Doradca.
JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...
JQuery jquery (jquery.com) to jedna z najbardziej popularnych bibliotek/frameworków do javascript. Jej popularność oczywiście znikąd się nie bierze. Dzięki tej bibliotece jesteśmy w stanie o wiele szybciej
Podstawy technologii WWW
Podstawy technologii WWW Ćwiczenie 14 AJAX, czyli jak odświeżyć bez odświeżania, część trzecia Na dzisiejszych zajęciach będziemy kontynuować realizację serwisu do wymiany wiadomości z wykorzystaniem technologii
Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
Widoki zagnieżdżone, layout. 1. Wprowadzenie Repozytoria danych
Widoki zagnieżdżone, layout 1. Wprowadzenie Repozytoria danych Identyczne operacje na danych często się powtarzają np. pobierz książkę. Jeśli zapytanie realizowane jest za każdym razem w metodzie kontrolera
WINDOWS Instalacja serwera WWW na systemie Windows XP, 7, 8.
WINDOWS Instalacja serwera WWW na systemie Windows XP, 7, 8. Gdy już posiadamy serwer i zainstalowany na nim system Windows XP, 7 lub 8 postawienie na nim serwera stron WWW jest bardzo proste. Wystarczy
Programowanie obiektowe
Programowanie obiektowe Laboratorium 1. Wstęp do programowania w języku Java. Narzędzia 1. Aby móc tworzyć programy w języku Java, potrzebny jest zestaw narzędzi Java Development Kit, który można ściągnąć
Ćwiczenie 2. Tworzenie serwisów internetowych. Zapoznanie z pakietem WebRatio
Ćwiczenie 2 Zapoznanie z pakietem WebRatio Zadaniem na drugie zajęcia będzie zapoznanie się z pakietem do wizualnego projektowania serwisów internetowych z wykorzystaniem języka WebML Uruchomienie i zapoznanie
Facelets ViewHandler
JSF i Facelets Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu
1 Przygotował: mgr inż. Maciej Lasota
Laboratorium nr 1 1/7 Język C Instrukcja laboratoryjna Temat: Programowanie w powłoce bash (shell scripting) 1 Przygotował: mgr inż. Maciej Lasota 1) Wprowadzenie do programowania w powłoce Skrypt powłoki
Plan. Stan sesji (1/2) Stan sesji (2/2) Stan sesji Tworzenie przycisku Integracja prostego formularza z raportem Tworzenie formularza z raportem
5 Integracja stron aplikacji, tworzenie zintegrowanych formularzy i raportów Plan Stan sesji Tworzenie przycisku Integracja prostego formularza z raportem Tworzenie formularza z raportem 2 Stan sesji (1/2)
Backend Administratora
Backend Administratora mgr Tomasz Xięski, Instytut Informatyki, Uniwersytet Śląski Katowice, 2011 W tym celu korzystając z konsoli wydajemy polecenie: symfony generate:app backend Wówczas zostanie stworzona
app/ - folder zawiera pliki konfiguracyjne dla całej aplikacji Można wybrać sposób zapisu konfiguracji: YML, XML, PHP
Baza danych i ORM Struktura Bundle app/ - folder zawiera pliki konfiguracyjne dla całej aplikacji Można wybrać sposób zapisu konfiguracji: YML, XML, PHP src/ - folder zawiera cały kod PHP aplikacji vendor/
Poszczególne elementy serwisu można umieścić dla porządku w odpowiednio przemyślanym drzewie katalogów, i tak: -
Tematy: Model modułowego serwisu WWW Szablon strony Dołączanie elementów statycznych Treść generowana dynamicznie Podsumowanie PHP to język skryptowy, którego kod jest osadzany wewnątrz stron WWW. W początkowych
Umieszczanie kodu. kod skryptu
PHP Definicja PHP jest językiem skryptowym służącym do rozszerzania możliwości stron internetowych. Jego składnia jest bardzo podobna do popularnych języków programowania C/C++, lecz jest bardzo uproszczona
Personal Home Page PHP: Hypertext Preprocessor
Języki, które już znacie Wykład9PodstawyPHP,str1 język polski język angielski język C język preprocesora C język bash-a język HTML kolejny język: PHP Język PHP Wykład9PodstawyPHP,str2 Personal Home Page
Dokumentacja wstępna TIN. Rozproszone repozytorium oparte o WebDAV
Piotr Jarosik, Kamil Jaworski, Dominik Olędzki, Anna Stępień Dokumentacja wstępna TIN Rozproszone repozytorium oparte o WebDAV 1. Wstęp Celem projektu jest zaimplementowanie rozproszonego repozytorium
Komponent Formularz. Rys. 1. Strona programu Joomla - http://joomla.pl. Rys. 2. Instalacja komponentu
Komponent Formularz Instalacja Aby wykorzystać gotowy komponent do tworzenia formularzy w systemie CMS (Joomla), naleŝy uprzednio zaimplementować go, postępując według poniŝszego schematu: 1. Wejść na
Współpraca z platformą Emp@tia. dokumentacja techniczna
Współpraca z platformą Emp@tia dokumentacja techniczna INFO-R Spółka Jawna - 2013 43-430 Pogórze, ul. Baziowa 29, tel. (33) 479 93 29, (33) 479 93 89 fax (33) 853 04 06 e-mail: admin@ops.strefa.pl Strona1
Ciekawym rozwiązaniem służącym do obsługi zdarzeń dla kilku przycisków w ramach jednej aktywności może być następujący kod:
1. Listener dla przycisku. Ciekawym rozwiązaniem służącym do obsługi zdarzeń dla kilku przycisków w ramach jednej aktywności może być następujący kod: W linii 24 tworzymy globalną metodę mglobal_onclicklistener,
Programowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
Materiały wprowadzające. dr inż. Arkadiusz Chrobot
Materiały wprowadzające dr inż. Arkadiusz Chrobot 26 lutego 2017 Spis treści Wprowadzenie 1 1. ssh 1 2. scp 1 3. Linux Cross Reference 2 Wprowadzenie W tych materiałach wstępnych zawarte są krótkie opisy
Materiały wprowadzające. dr inż. Arkadiusz Chrobot
Materiały wprowadzające dr inż. Arkadiusz Chrobot 25 lutego 2019 Spis treści Wprowadzenie 1 1. ssh 1 2. scp 2 3. Linux Cross Reference 2 Wprowadzenie W tych materiałach wstępnych zawarte są krótkie opisy
Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:
Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: oraz systemy CMS (Content Menager System): Dlaczego
KUP KSIĄŻKĘ NA: PRZYKŁADOWY ROZDZIAŁ KOMUNIKATY DLA UŻYTKOWNIKA
KUP KSIĄŻKĘ NA: WWW.PRAKTYCZNEPHP.PL PRZYKŁADOWY ROZDZIAŁ KOMUNIKATY DLA UŻYTKOWNIKA KOMUNIKATY DLA UŻYTKOWNIKA W większości aplikacji potrzebujesz mieć możliwość powiadomienia użytkownika o rezultacie
Projektowanie aplikacji w modelu MVC opartej o framework CodeIgniter
Projektowanie aplikacji w modelu MVC opartej o framework CodeIgniter Konfiguracja i przygotowanie przykładowej aplikacji opartej o model Model-View- Controller Konfiguracja frameworka Zainstaluj na serwerze
Zajęcia 4 - Wprowadzenie do Javascript
Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją
Napisy w PHP. Drukowanie napisów instrukcją echo
Napisy w PHP. Drukowanie napisów instrukcją echo 1. Ćwiczenia do samodzielnego wykonania Wszystkie poniższe ćwiczenia należy samodzielnie wykonać wpisując w edytorze bez stosowania techniki kopiuj-wklej.
Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:
Technologia wykonania projektu: HTML5 Javascript: o jquery (1.9.1), o CreateJS (0.6.1): EaselJS, TweenJS, PreloadJS. Części funkcjonalne projektu: Strona internetowa pliki strony internetowej zlokalizowane
znajdowały się różne instrukcje) to tak naprawdę definicja funkcji main.
Część XVI C++ Funkcje Jeśli nasz program rozrósł się już do kilkudziesięciu linijek, warto pomyśleć o jego podziale na mniejsze części. Poznajmy więc funkcje. Szybko się przekonamy, że funkcja to bardzo
PHP: bloki kodu, tablice, obiekty i formularze
1 PHP: bloki kodu, tablice, obiekty i formularze SYSTEMY SIECIOWE Michał Simiński 2 Bloki kodu Blok if-else Switch Pętle Funkcje Blok if-else 3 W PHP blok if i blok if-else wyglądają tak samo i funkcjonują
BAZY DANYCH MAKRA I PRZYCISKI. Microsoft Access. Adrian Horzyk. Akademia Górniczo-Hutnicza
BAZY DANYCH Microsoft Access MAKRA I PRZYCISKI Adrian Horzyk Akademia Górniczo-Hutnicza Wydział Elektrotechniki, Automatyki, Informatyki i Inżynierii Biomedycznej Katedra Automatyki i Inżynierii Biomedycznej
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
Systemy operacyjne. Instrukcja laboratoryjna. Ćwiczenie 1: Polecenia systemu UNIX/LINUX. Opracował: dr inż. Piotr Szpryngier
Systemy operacyjne Instrukcja laboratoryjna Ćwiczenie 1: Polecenia systemu UNIX/LINUX Opracował: dr inż. Piotr Szpryngier Olsztyn 2009 1 Wprowadzenie. Cel zajęć praktycznych. Wymagania stawiane studentom
WPROWADZENIE. Użycie PHP
WPROWADZENIE PHP jest językiem programowania po stronie serwera używanym do tworzenia dynamicznych witryn internetowych i interaktywne aplikacje internetowe. Skrót PHP pierwotnie oznaczał Osobistą stronę
Aplikacje WWW - laboratorium
Aplikacje WWW - laboratorium JavaServer Pages Celem ćwiczenia jest zbudowanie kilku prostych stron internetowych z użyciem technologii JSP. Podczas ćwiczenia wykorzystany zostanie algorytm sortowania bąbelkowego
Pomoc. BIP strona portalu
Pomoc BIP strona portalu Biuletyn Informacji Publicznej powstał w celu powszechnego udostępnienia informacji publicznej w postaci elektronicznej. Głównym zadaniem portalu jest przekazywanie informacji
Podstawy wzorca MVC 2011-10-18 MODEL KON- TROLER WIDOK. Odpowiada za wyświetlenie danych użytkownikowi. Zawiera dane aplikacji oraz jej logikę.
Podstawy wzorca MVC MODEL KON- TROLER WIDOK Zawiera dane aplikacji oraz jej logikę. MODEL WIDOK Odpowiada za wyświetlenie danych użytkownikowi KON- TROLER KON- TROLER MODEL WIDOK Jedyna część aplikacji,
Full Stack JavaScript z Angular i Nest. Dni: 5. Opis: Adresaci szkolenia
Kod szkolenia: Tytuł szkolenia: DED/FSJS Full Stack JavaScript z Angular i Nest Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest dla programistów posiadających podstawową wiedzę w zakresie JavaScript,
Instrukcja obsługi narzędzia API
Instrukcja obsługi narzędzia API 2012 1. Podstawowe informacje Aby umożliwić maksymalną integrację systemów i stron partnerów z naszym systemem, stworzyliśmy specjalne API, które umożliwia generowanie
OMNITRACKER Wersja testowa. Szybki przewodnik instalacji
OMNITRACKER Wersja testowa Szybki przewodnik instalacji 1 Krok 1:Rejestracja pobrania (jeżeli nie wykonana dotychczas) Proszę dokonać rejestracji na stronieomninet (www.omnitracker.com) pod Contact. Po
Wprowadzenie. 1. Terminal WebRTC. LABORATORIUM 5: WebRTC komunikacja między terminalami.
LABORATORIUM 5: WebRTC komunikacja między terminalami. Wprowadzenie Technika WebRTC (złożenie angielskiego słowa Web oraz akronimu RTC, pochodzącego od angielskiego Real-Time Communications, komunikacja