4. Programowanie obiektowe – settery, wyświetlamy obiektowy post

Czas stworzyć funkcje, które nadają wartość zmiennym obiektu, czyli settery.  Gdy rozumiejąc zasadę działania getterów i setterów i zaczniesz je stosować, programowanie obiektowe, nie będzie już takie skomplikowane, jak się to wydaje.

Funkcja ta ma jako argument, przyjmować wartość (do nawiasów), która trafi do zmiennej klasy.  Użyjemy więc omówionego wcześniej „This” i operatora przypisania =.Będzie to wyglądać np. tak:

function ustawNazwe($_nazwa){
$this->nazwa = $_nazwa; //argument funkcji wpada do zmiennej klasy i po sprawie 🙂
}

Napisz teraz settery do reszty zmiennych sam!

Nasz klasa Post, powinna teraz wyglądać tak:

class Post{
private $nazwa;
private $tresc;
private $autor;

function pokazNazwe(){
return $this->nazwa;
}
function pokazTresc(){
return $this->tresc;
}
function pokazAutora(){
return $this->autor;
}

function ustawNazwe($_nazwa){
$this->nazwa = $_nazwa;
}
function ustawTresc($_trescMojegoSuperPostu){
$this->tresc = $_trescMojegoSuperPostu;
}
function ustawAutora($_autor){
$this->autor = $_autor;
}
}

Teraz chcemy utworzyć post, według planu jakim jest klasa i zrobić z tego coś ładnego 🙂

Aby utworzyć nowy post, musimy stworzyć nowy obiekt, typu post.

$mojNajlepszyWpis = new Post();

Teraz możemy mu przypisać odpowiednie dane, za pomocą funkcji. Funkcje wywołujemy, biorąc obiekt w postaci zmiennej np. $mojNajlepszyWpis. Dopisujemy strzałkę -> oraz nazwę funkcji. Spróbuj to zrobić sam i przejdź dalej.

Wyglądać, ma to tak:

$mojNajlepszyWpis->ustawAutora("Janusz");
$mojNajlepszyWpis->ustawNazwe("Rowerem wodnym przez Czarnogórę");
$mojNajlepszyWpis->ustawTresc("Witaj na moim blogu podróżniczym");

Dane możemy wypisać na ekran przy pomocy getterów, w dowolnej części kodu html.

<h1><?php echo $mojNajlepszyWpis->pokazNazwe(); ?></h1>
<p><?php echo $mojNajlepszyWpis->pokazTresc(); ?></p>
<b>Autor: <?php echo $mojNajlepszyWpis->pokazAutora(); ?></b>

Wiesz już w jaki sposób, nasz kod będzie działał. Teraz przydałoby się, wypisać dane na ekran, tak aby w miarę fajnie to wyglądało.

Uwaga, teraz przyda się znajomość html! Jeśli go nie znasz, to zostań przy samym wypisaniu zmiennych obiektu, za pomocą echo.

Użyjemy teraz bootstrapa. Jest to framework css. Brzmi to poważnie, jednak na początek wystarczy, abyś wiedział, że działa on jak gotowy arkusz stylów. Twoim zadaniem jest, dopisywanie tylko odpowiednich klas do znaczników w html np.  <div class="container">

Zrób tak:

  1. Pobierz bootstrapa ze strony: http://getbootstrap.com/getting-started/
  2. Rozpakuj zawartość archiwum tak aby w folderze głównym strony, znajdowały się foldery css, fonts, js. Musisz je wyciągnąć z folderu, który jest w archiwum.
  3. Przekopiuj kod podstawowego szablonu bootstrapa z http://getbootstrap.com/getting-started/#template
  4. <html lang="en">, zmień na pl

Masz już działającego bootstrapa. Kod klasy umieść między znaczkami <?php ?> nad całym kodem html. Może on się znajdować, też pod kodem. W programowaniu obiektowym nie ma to znaczenia.

W sekcji <body> skasuj nagłówek „Hello World”.

Wrzuć tam kod tworzenia obiektu Post i nadawanie wartości, czyli:

<?php
$mojNajlepszyWpis = new Post();
$mojNajlepszyWpis->ustawAutora("Janusz");
$mojNajlepszyWpis->ustawNazwe("Rowerem wodnym przez Czarnogórę");
$mojNajlepszyWpis->ustawTresc("Witaj na moim blogu podróżniczym");
?>

Jak dobrze zauważyłeś, kod php jest otwierany i zamykany nad kodem html, a także w nim. Dobrze, abyś wiedział, że możesz tak robić. Daje to możliwość wyświetlania zmiennych między znaczkami html.

Teraz stworzymy, to co oglądał będzie użytkownik. Zostając w sekcji <body>,  zrób sekcję, czyli div o klasie container. W nim umieścimy nasze elementy. Będzie to jakby główny pojemnik, na części, z których składa się strona. W nim utwórz kolejną sekcję o klasie „page-header”. W środku będzie nagłówek, wyświetlający zmienną z tytułem: <?php echo $mojNajlepszyWpis->pokazNazwe(); ?>. Zamknij sekcję z nagłówkiem i wypisz pozostałe zmienne, według własnego  uznania, tak aby wyglądało to dobrze np. tekst jako akapity.

U mnie wygląda to tak:

 <div class="container">
<div class="page-header">
<h1><?php echo $mojNajlepszyWpis->pokazNazwe(); ?></h1>
</div>
<p><?php echo $mojNajlepszyWpis->pokazTresc(); ?></p>
<b>Autor: <?php echo $mojNajlepszyWpis->pokazAutora(); ?></b>
</div>

Kod całej strony:

<?php
class Post{
private $nazwa;
private $tresc;
private $autor;

function pokazNazwe(){
return $this->nazwa;
}
function pokazTresc(){
return $this->tresc;
}
function pokazAutora(){
return $this->autor;
}

function ustawNazwe($_nazwa){
$this->nazwa = $_nazwa;
}
function ustawTresc($_trescMojegoSuperPostu){
$this->tresc = $_trescMojegoSuperPostu;
}
function ustawAutora($_autor){
$this->autor = $_autor;
}
}
?>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Nasz kod zaczyna się tutaj-->
<?php
$mojNajlepszyWpis = new Post();
$mojNajlepszyWpis->ustawAutora("Janusz");
$mojNajlepszyWpis->ustawNazwe("Rowerem wodnym przez Czarnogórę");
$mojNajlepszyWpis->ustawTresc("Witaj na moim blogu podróżniczym");
?>
<!--Widok Strony-->
<div class="container">
<div class="page-header">
<h1><?php echo $mojNajlepszyWpis->pokazNazwe(); ?></h1>
</div>
<p><?php echo $mojNajlepszyWpis->pokazTresc(); ?></p>
<b>Autor: <?php echo $mojNajlepszyWpis->pokazAutora(); ?></b>
</div>
<!--A tutaj kończy :)-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *