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);