Politechnika Świętokrzyska

Laboratorium projektowania aplikacji internetowych

Temat:

Html, Formularze,

Arkusze stylów css, PHP

wprowadzenie

Grupa 312A:

Łukasz Gos

Kamil Kasprzyk

Data wykonania ćwiczenia:

30.11.2010r

godz. 13.30 – 15.20

1. Elementy CSS

-

Metody łączenia styli z dokumentem html

* Plik zewnętrzny

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

* Wewnątrz dokumentu

<style type="text/css">

<!--
table{border: 1px solid orange}
tr.row{background-color: #FFFF99}
-->

</style>

* Z atrybutem style

<table border="0" width="300" cellpadding="0" cellspacing="0" style="height: 100px;

overflow:scroll;">

- Długości przykłady



<p style="text-indent: 1cm">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam

vestibulum purus quis urna vulputate ut semper mi elementum. Donec scelerisque iaculis
…
</p>



#baner{

width: 600px;

height: 80px;

}



<div id="baner" style="font-size:2em; font-family: arial; font-
weight:bold">Przykładowa strona</div>

-

Selektory kontekstowe



ul li a{
color: black;
}

Efekt:

Kod:

<div id="prawa_kol">Menu
<ul>

<li><a href="index.php">Strona główna</a></li>

<li><a href="form1.php">Wprowadzanie danych</a></li>

<li><a href="reg.php">Rejestracja</a></li>

<li><a href="log.php">Logowanie</a></li>

</ul>

</div>



td > a{
color: red;
}

Efekt:

Kod:

<table border="0" width="300" cellpadding="0" cellspacing="0" style="height:
100px; overflow:scroll;">
<tr class="row">
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td><a href="#">Przykładowy link 1</a></td>
</tr>
</table>



#tekst + #stopka a{
margin-left: 200px;
color: green;
float: inherit;
}

Efekt:

Kod:

<div id="stopka"><a href="#">Przykładowy link4</a></div>

- Elementy div i span



<span style="font-weight: bold">Sed lectus lacus, pulvinar non condimentum
sed, rutrum sed odio.</span>



<div id="prawa_kol">Menu
<?php include("menu.inc") ?>
</div>

-

Ramki



Padding
ul li a:hover{
color: black;
padding-left: 5px;
}



Margin
#stopka{
margin-top: 50px;
width: 600px;
height: 20px;
border-top: 1px solid gray;
float: right;
}



Border
#prawa_kol{
width: 199px;
min-height: 300px;
border-right: 1px dotted green;
float: left;
}

-

Właściwości tekstu



<p style="text-indent: 1cm">



p{
line-height: 30px
}

-

Pseudoklasy

:first-child

,

:hover

,

:active

.



ul li a:hover{
color: black;
padding-left: 5px;
}



ul li a:active{
color: green;

}

-

inherit



#tekst + #stopka a{
margin-left: 200px;
color: green;
float: inherit;
}

W tym przypadku link dziedziczy przyleganie diva o id tekst.

2. Formularze

Przykładowy formularz
<form action="reg.php" method="post">
<table border="0" width="300" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" size="30" maxlength="30" name="username"
/></td><td>Login</td>
</tr>
<tr>
<td><input type="password" size="30" maxlength="30"
name="password" /></td><td>Hasło</td>
</tr>
<tr>
<td><input type="password" size="30" maxlength="30"
name="password2" /></td><td>Powtórz hasło</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="rejestruj" /></td>
</tr>
</table>
</form>

3. PHP

Przekazywanie danych z formularza plik form1.php
<div id="tekst">

<?php

if(isset($var1))

echo "var1: ".$var1."<br />";

if(isset($opcjeWyboru))

echo "opcjeWyboru:

".$opcjeWyboru."<br />";

if(isset($polaWyboru)){

echo "polaWyboru : ";

foreach($polaWyboru as $item)

echo $item." ";

echo "<br />";

}

?>

<form action="form1.php" method="get">

<table border="0" width="380"

cellpadding="0" cellspacing="0">

<tr>

<td><input type="text"

size="30" maxlength="30" name="var1"/></td><td>zmienna 1</td>

</tr>

<tr class="row">

<td>

<select

name="opcjeWyboru">

<option>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

</select>

</td>

<td>

Jakieś opcje

</td>

</tr>

<tr>

<td>

<input

type="checkbox" name="polaWyboru[]" value="v1"/> a<br />

<input

type="checkbox" name="polaWyboru[]" value="v2"/> b

</td>

<td>

Pola wyboru

</td>

</tr>

<tr class="row">

<td colspan="2"><input

type="submit" value="zapisz"/></td>

</tr>

</table>

</form>

</div>

Dane z tego formularza przechwytywane są przy globals=on ale domyślnie formularz ten
przekazuje dane metodą get. Aby przechwycić wartość konkretnej zmiennej wystarczy
sprawdzić czy istnieje $_GET[‘nazwa_zmiennej’].

Połączenie z bazą MySQL (zapis danych przekazanych z formularza)
if (isset($_POST['username']) &&

isset($_POST['password']) && isset($_POST['password2'])) {

if ($_POST['password'] ==

$_POST['password2']) {

$link = mysql_connect('localhost',

'root', 'admin');

if (!$link) {

die('Nie można się połączyć: ' .

mysql_error());

}

echo 'Połączenie nawiazane';

$query = "insert into user (login,

password)values('" . $_POST['username'] . "', '" .

$_POST['password'] . "')";

echo $query;

if (!mysql_select_db('gos_lab3_db',

$link)) {

echo 'Nie można wybrać bazy

danych';

exit;

}

mysql_query($query, $link);

mysql_close($link);

}

}

Połączenie z bazą MySQL (odczyt danych)
$link = mysql_connect('localhost', 'root', 'admin');

if (!$link) {

die('Nie można się połaczyć: ' .

mysql_error());

}

echo 'Połączenie nawiązane';

$query = "select * from user";

if (!mysql_select_db('gos_lab3_db', $link)) {

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

exit;

}

$result = mysql_query($query, $link);

echo "<pre>";

$count = mysql_num_rows($result);

$obj = mysql_fetch_object($result);

for ($i = 0; $i < $count; $i++) {

print_r($obj);

$obj = mysql_fetch_object($result);

}

echo "</pre>";

mysql_close($link);