pai 03 313B 03, Studia PŚK informatyka, Semestr 5, programowanie współiberze

Politechnika Świętokrzyska w Kielcach

Projektowanie aplikacji internetowych 1

Nr Laboratorium:

Gr. 313B

Paweł Markiewicz

Data i godzina wykonania ćwiczenia:

Przebieg ćwiczenia.

Elementy CSS

- Metody łączenia styli z dokumentem html

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<title>zadania</title>

<link rel="stylesheet" href="css.css" type="text/css"></link>

<style type="text/css">

body {

background-color: #FFCC66;

}

#tekst {

font-family:'Arial';

font-size:15;

color:blue;

font-style:bold;

font-variant:normal;

}

p {

color: black;

}

p.czerwony {

color: red;

}

p.niebieski {

color: blue;

}

#rozowy {

color: pink;

}

p[sel_typ]#zad1c { color: blue }

p[sel_typ="5"]#zad1c2 { color: red }

p[sel_typ~="1"]#zad1c3 { color: green }

p b {

color: black;

}

p + b {

color: brown;

}

p > b {

color: purple;

}

a:first-child {color:green}

a:hover {color:blue}

a:active {color:red}

input:first-child {background-color:green}

input:hover {background-color:blue}

input:active {background-color:red}

p:first-child {color:green}

p:hover {color:blue}

p:active {color:red}

h1:before {content:url(css.jpg);}

h1:after {content:url(css.jpg);}

#zad1f {

border-style:solid;

border-color:black;

padding:15px 20px;

margin:50px 20px 20px 20px;

overflow: auto;

}

</style>

</head>

<body>

<frameset rows="80,*" border="0" frameborder="0" framespacing="0">

<frame name="banner" noresize="noresize" scrolling="yes" frameborder="0" />

<frameset cols="80,*" border="0" frameborder="0" framespacing="0">

<frame name="spis" noresize="noresize" frameborder="0" />

<frame name="strona" noresize="noresize" frameborder="0" />

Różne metody łączenia stylu z dokumentem HTML (wewnątrz dokumentu,

zewnętrzny plik CSS, atrybut style) wykorzystując własności czcionek: krój,

wielkość, kolor, styl, wariant.

<p id="tekst">To jest tekst sformatowany wewętrznym stylem CSS</p>

<p style="color:red; font-size:25; font-variant:normal;">To jest tekst sformatowany poprzez atrybut style</p>

<p id="zad1">To jest tekst sformatowany zewnętrznym stylem CSS</p>

<br><br>

Długości w stylach CSS (względne, bezwzględne).

<hr style="width:300px"><tr><td>Linia szerokosci 300 pikseli</td></tr></table>

<br><br>

<table border="3" style="width:70%">

<tr>

<td>

tabela szerokosci 70%

</td>

</tr>

</table>

</br></br>

Selektory odwołujące się do atrybutów: atrybuty class i id, selektory typu [x],

[x="y"], [x~="y"].

<p class="czerwony">akapit czerwony- atrybut class</p>

<p class="niebieski">akapit niebieski- atrybut class</p>

<p id="rozowy">akapit rozowy - atrybut id</p>

<p sel_typ="5" id="zad1c2">akapit selektor typu</p>

<p sel_typ="2" id="zad1c">akapit selektor typu </p>

<p sel_typ="wwww 1 aaa" id="zad1c3">akapit selektor typu</p>

</br></br>

Selektory kontekstowe

<p><i><b>p i b</b></i></p>

<p></p><b>b jest po p</b>

<p><b>p b</b></p>

</br></br>

Elementy div, span.

<span style="color: red;font-style:italic;">jakis tekst</span>

<div style="width: 100%">

<div style="width:15%; float:left; background-color: maroon">

<p id="tekst">

Blok o szerokosci 15%

</p>

</div>

<div style="width:50%; float right;background-color: silver">

Blok o szerokosci 50%

</div>

</br></br>

<frameset id="zad1f" rows="80,*" border="0" frameborder="0" framespacing="0">

<frame name="banner" noresize="noresize" scrolling="yes" frameborder="0" src="zad1.html" />

<frameset id="zad1f" cols="80,*" border="0" frameborder="0" framespacing="0">

<frame name="spis" noresize="noresize" frameborder="0" src="zad3.html" />

<frame name="strona" noresize="noresize" frameborder="0" src="zad2.html" />

</frameset>

</br></br>

Właściwości tekstu: wyrównanie (w pionie i poziomie), odstępy pomiędzy liniami,

słowami i znakami, trasformacja do dużych/małych liter.

<p style="text-transform: capitalize">Zamiana Pierwszych liter wszystkich wyrazów na wielkie</p>

<p style="text-transform: uppercase">Zamiana Wszystkich Liter na wielkie</p>

<p style="text-transform: lowercase">Zamiana Wszystkich Liter na małe</p>

<p>Napis<span style="vertical-align:sub;">vertical-align:sub</span></p>

<p>Napis<span style="vertical-align:super;">vertical-align:super</span></p>

<p>Napist<span style="vertical-align:baseline;">vertical-align:baseline</span></p>

<p>Napis<span style="vertical-align:middle;">vertical-align:middle</span></p>

<p>Napis<span style="vertical-align:text-bottom;">vertical-align:text-bottom</span></p>

<p>Napis<span style="vertical-align:text-top;">vertical-align:text-top</span></p>

<p style="text-align:left">text-align:left</p>

<p style="text-align:right">text-align:right</p>

<p style="text-align:justify">text-align:justify</p>

<p style="text-align:center">text-align:center</p>

<p style="line-height: 4">odstep<br>miedzy<br>wierszami</p>

<p style="word-spacing: 8">odstep miedzy wyrazami</p>

<p style="letter-spacing: 8">odstepmiedzyliterami</p>

</br></br>

Właściwości tła: kolor, rysunek (ilość, położenie, krotność).

<div style="width: 900px; height: 320px; background-image: url(css.jpg); background-repeat: repeat-x;"></div>

<div style="width: 600px; height: 400px; background-image: url(css.jpg); background-repeat: repeat-y;"></div>

<div style="width: 800; height: 320px; background-image: url(css.jpg); background-repeat: no-repeat; background-position: right bottom;"></div>

</br></br>

seudoklasy :first-child, :hover, :active. Tworzenie odnośnika do innych

dokumentów zmieniającego swój wygląd po najechaniu myszką. Utwórzyć

formularz, którego pola będą wyróżniane po wybraniu. </br>

<a href="index.html">główna</a>

<p>Jaki napis</p>

<form method="GET">

<input type="text" name="login"></td>

<input type="text" name="miasto">

<textarea name="tekscik"></textarea>

<input type="reset" value="RESET">

<input type="submit" value="WYSLIJ" style="border: 1px solid black; font-family: Tahoma">

</br>

Pseudoelementy :first-line, :first-letter. Teksty generowane

automatycznie: :before, :after.

<a href="zad10.html">zad10</a>

<p>Pierwsza linia czerwona, pierwszy znak niebieski</p>

<h1>Przed utworzeniem i po wstawieniu obrazka</h1>

</br>Dziedziczenie: słowo kluczowe inherit (np. względna wielkość czcionki).

Przykład: zagnieżdżenie elementu <small>.

</br>

<small style="color: purple;">

Jakis tekst<br>

<small style="color: inherit;">Drugi napis

<small style="color: inherit;">Trzeci napis

</small>

</br>

<br><br><br><br><br><br><br>

<p style="color:red; position:relative; top:0px; right:10px; bottom:10px; left:120px;">position:relative</p>

<p style="color:blue; position:absolute; top:10px; right:50px;"> position:absolute</p>

<br><br><br><br><br><br><br>

<p style="color:green; position:fixed; top:250px; right:100px; bottom:10px; left:100px;"> Napis w jednym miejscu na ekranie</p>

<br><br><br><br><br><br><br>

Białe spacje

<p style="white-space: normal">spacja white-space: normal</p>

<p style="white-space: pre">spacja white-space: pre</p>

<p style="white-space: nowrap">Spacja <br /></b><br /></p>

<p style="white-space: pre-wrap">Spacja spacja

tabulator tabulator</p>

</br>

Typy elementów: block, inline.

</br>

<p style="display:inline; border-width:2px; border-style:solid;">p style="display:inline"</p>

<p style="display:block; border-width:2px; border-style:solid;">p style="display:block"</p>

</body>

</html>

PHP - zawatość robiona w domu

Zawartość bazy danych sql:

-- Struktura tabeli dla tabeli `mc_cars`

CREATE TABLE IF NOT EXISTS `mc_cars` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(40) NOT NULL,

`model` varchar(20) NOT NULL,

`state` varchar(15) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

-- Zrzut danych tabeli `mc_cars`

INSERT INTO `mc_cars` (`id`, `name`, `model`, `state`) VALUES

(1, 'Audi', 'A4', 'nowy'),

(2, 'Opel', 'Astra', 'używany'),

(3, 'Skoda', 'Felicja', 'nowy');

Kod:

Index.php

<?php

require('classes/init.php'); //Ładuje podstawowe funkcjonalności

$page = isset($_GET['page'])?$_GET['page']:'';

$odpowiedz='';

if($page==""){

$display='main.php';

}elseif($page=="cars"){

if(isset($_POST['delete_car'])) {$odpowiedz=$sv->Delete_car($_POST['id']);}

if(isset($_POST['add_car'])) {$odpowiedz=$sv->Add_car($_POST);}

if(isset($_POST['car_edit'])) {$car=$sv->Get_car($_POST['id']);}

if(isset($_POST['edit_car'])) {$odpowiedz=$sv->Edit_car($_POST);}

$cars=(isset($_GET['state']))?$sv->Get_cars($_GET['state']):$sv->Get_cars(); if($cars==null) $cars=array();

$display='cars.php';

}else{

$display='404.php';

}

require '_header.php';

require '_nav.php';

require $display;

require '_footer.php';

.htacces:

Options FollowSymlinks

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^([a-zA-Z0-9-z\-\_]+)/?$ index.php?page=$1 [L,NC,QSA]

classes/init.php

<?php

$dblink=mysql_connect('localhost', 'root', 'admin');

if (!mysql_select_db('pai_lab3', $dblink)) {

echo 'Nie można wybrać bazy danych';

exit;

} else {

mysql_query("SET NAMES utf8") ;

}

require_once('classes/service.php');

require_once('classes/db.php');

$db=new DB($dblink);

$sv=new SERVICE($db);

$ROOT = "http://localhost/";

classes/db.php

<?php

class DB{

var $db;

var $errors=array();

var $result;

function DB(&$dblink){

$this->db=$dblink;

}

function Execute($query){

if(!$this->result=mysql_query($query, $this->db))

$this->errors[] = array('query' => $query,'error' => mysql_error($this->db));

return mysql_affected_rows($this->db);

}

function GetAll($query){

if($query) $this->Execute($query);

$result = NULL;

if($this->result)while($row = mysql_fetch_assoc($this->result))$result[] = $row;

return $result;

}

function GetRow($query){

if($query) $this->Execute($query);

if($this->result) $res=mysql_fetch_assoc($this->result);

return $res;

}

function GetCol($query){

if($query) $this->Execute($query);

$result = NULL;

if($this->result) while($row = mysql_fetch_array($this->result)) $result[] = $row[0];

return $result;

}

function GetOne($query){

if($query) $this->Execute($query);

if($this->result)

$one= mysql_fetch_row($this->result);

return $one[0];

}

classes/service.php

<?php

class SERVICE{

var $db;

function SERVICE(&$DB){ $this->db=$DB; }

function Add_car($d){

$this->db->Execute('INSERT INTO `mc_cars`(`name`, `model`, `state`) VALUES (

"'.$d['name'].'",

"'.$d['model'].'",

"'.$d['state'].'")');

return 'Dodano nowy samochód';

}

function Edit_car($d){

$this->db->Execute('UPDATE `mc_cars` SET

`name`="'.$d['name'].'",

`model`="'.$d['model'].'",

`state`="'.$d['state'].'"

WHERE id='.$d['id']);

return 'Edytowano samochód';

}

function Get_cars($s='id ASC'){

return $this->db->GetAll('SELECT * FROM mc_cars ORDER BY '.$s);

}

function Get_car($p){

return $this->db->GetRow('SELECT * FROM mc_cars WHERE id='.$p);

}

function Delete_car($p){

$this->db->Execute('DELETE FROM `mc_cars` WHERE `id`="'.$p.'"');

return 'Usunięto samochód';

}

_header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

</head>

<body>

</header>

_nav.php

<nav>

<tr class="three"><td><a href="./">Glowna</a></td></tr>

</table>

</nav>

cars.php

<fieldset><legend>Dodaj Samochód</legend>

<table>

<tr><td class="r_left">Nazwa</td><td><input type="text" name="name" /></td></tr>

<tr><td class="r_left">Model</td><td><input type="text" name="model" /></td></tr>

<option>używany</option>

</select></td>

</tr>

</table>

</form>

</fieldset>

<?php if(isset($_POST['car_edit']) && !isset($_POST['edit_car'])){ ?>

<fieldset><legend>Edycja</legend>

<table>

<tr><td class="r_left">Nazwa</td><td><input type="text" name="name" value="<?php if(isset($car['name'])) echo $car['name']; ?>" /></td></tr>

<tr><td class="r_left">Model</td><td><input type="text" name="model" value="<?php if(isset($car['model'])) echo $car['model']; ?>" /></td></tr>

<option <?php if(isset($car['state']) && $car['state']=='używany') echo 'selected="selected"'; ?>>używany</option>

</select>

</table>

</form>

</fieldset>

<?php } ?>

<fieldset><legend>Sortój</legend>

<option value="id ASC">Id rosnąco</option>

<option value="id DESC" <?php if(isset($_GET['state']) && $_GET['state']=='id DESC') echo 'selected="selected"'; ?>>Id malejąco</option>

<option value="name ASC" <?php if(isset($_GET['state']) && $_GET['state']=='name ASC') echo 'selected="selected"'; ?>>Nazwa rosnąco</option>

<option value="name DESC" <?php if(isset($_GET['state']) && $_GET['state']=='name DESC') echo 'selected="selected"'; ?>>Nazwa malejąco</option>

<option value="model ASC" <?php if(isset($_GET['state']) && $_GET['state']=='model ASC') echo 'selected="selected"'; ?>>Model rosnąco</option>

<option value="model DESC" <?php if(isset($_GET['state']) && $_GET['state']=='model DESC') echo 'selected="selected"'; ?>>Model malejąco</option>

</select>

</form>

</fieldset>

<br />

<tr>

<th>Nazwa</th>

<th>Model</th>

<th>Akcja</th>

</tr>

<tr>

<?php foreach ($cars as $key => $value) { ?>

<td>

</form>

</td>

</tr>

<?php } ?>

</table>

_footer.php

</section>

</div>

</footer>

</div>

</body>

</html>

main.php

STRONA STARTOWA

404.php

BŁĄD 404<br />BRAK TEKIEJ STRONY

Style.css

body{

width:900px;

margin:auto;

background:#FAE870;

}

header{

background:#7BAD4E;

margin-top:7px;

min-height:110px;

background-image: url("http://www.baaber-düne.com/uploads/tf/head.jpg");

}

.message{

border:2px solid #5f5;

background:#afa;

color:#1a1;

min-height:19px;

margin-top:5px;

margin-bottom:10px;

text-align:center;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

-moz-box-shadow: 5px 5px 5px #888;

-webkit-box-shadow: 5px 5px 5px #888;

box-shadow: 5px 5px 5px #888;

}

.body{

position:relative;

}

nav{

float:left;

width:180px;

padding:10px 5px 10px 5px;

min-height:120px;

background:#96D45F;

}

section{

float:left;

width:691px;

min-height:155px;

margin-left:5px;

padding: 7px;

background:#B1FA71;

}

article{

width:100%;

min-height:30px;

background:#FAFAFA;

}

footer{

margin:5px 0;

padding:5px 0 0 5px;

min-height:50px;

background:#7BAD4E;

}

input[type=text]{

width:168px;

padding-left: 5px;

}

color:#151515;

}

a:hover{

color:#FAE870;

}

padding:0px;

margin:0px;

}

#table{

background:white;

border: 1px solid orange;

border-collapse: collapse;

width:100%;

}

#table th, #table td{

border: 1px solid orange;

text-align: center;

}

Wyszukiwarka