Κεφάλαιο 3 - Ανάπτυξη και Υλοποίηση της Εφαρμογής
54
ένα πλέγμα γύρω από τις εξόδους λειτουργιών του εξυπηρετητή και προσαρμόζει τα στοιχεία
τους ώστε να εμφανίζονται με συγκεκριμένο τρόπο. Η ανάπτυξη του θέματος εμφάνισης
βασίζεται στο πλαίσιο Bootstrap όπως παρουσιάστηκε στο θεωρητικό υπόβαθρο. Από το
πλαίσιο Bootstrap λαμβάνουμε χρήσιμες κλάσεις CSS και συναρτήσεις JavaScript που
προσαρμόσαμε για τις ανάγκες του δικού μας θέματος. Οι βάσεις του θέματος εμφάνισης
βρίσκονται σε τρία αρχεία και περιβάλλουν κάθε σελίδα που επισκέπτεται ο χρήστης.
Το πρώτο αρχείο ονομάζεται “header.php” και περιλαμβάνει τα πρώτα HTML στοιχεία που
χρησιμοποιεί η κάθε σελίδα. Τα στοιχεία αυτά βρίσκονται κυρίως μεταξύ των ετικετών τίτλου
και περιλαμβάνουν τον τίτλο της σελίδας, την κωδικοποίηση μετα-στοιχεία και την εισαγωγή
των αρχείων CSS και απαραίτητων αρχείων JavaScript (Κώδικας 19, γραμμές 4-19). Επίσης
στο αρχείο “header.php” ξεκινάμε την ετικέτα σώματος και εισάγουμε το επόμενο βασικό
αρχείο θέματος, το “nav-bar.php” πριν την δημιουργία του στοιχείου εμφάνισης μηνυμάτων
ανάδρασης και την αρχή του στοιχείου που θα περιέχει την έξοδο των λειτουργιών (Κώδικας
19, γραμμές 22-24).
1.
<nav
class
=
"navbar navbar-default navbar-top"
>
2.
<div
class
=
"container-fluid"
>
3.
<div
class
=
"collapse navbar-collapse pull-left"
id
=
"navbar-header"
>
4.
<ul
class
=
"nav navbar-nav"
>
5.
<li
class
=
"dropdown"
>
6.
<a
id
=
"search-nav-dropdown"
href
=
"javascript:void(0)"
class
=
"dropdown-toggle"
data-toggle=
"dropdown"
>
Projects
<span
class
=
"caret"
></span></a>
7.
<ul
id
=
"search-nav-dropdown-ul"
class
=
"dropdown-menu"
>
8.
[...]
9.
</ul>
10.
</li>
11.
<li
class
=
"navbar-form"
>
12.
<input
type
=
"hidden"
id
=
"nav-search-type"
value
=
"Projects"
>
13.
<input
type
=
"text"
class
=
"form-control nav-search-typeahead"
autocomplete=
"off"
placeholder
=
"Search"
id
=
"nav-search"
>
14.
</li>
15.
</ul>
16.
</div>
17.
<div
class
=
"navbar-user pull-right"
>
18.
[...]
19.
</div>
20.
</div>
21.
</nav>
Κώδικας 20: nav-bar.php - Η γενική δομή της μπάρας εργαλείων με τις κλάσεις που προσφέρει το πλαίσιο Bootstrap
Στο αρχείο “nav-bar.php” γίνεται χρήση των διαθέσιμων εργαλείων του Bootstrap για την
δημιουργία μίας μπάρας εργαλείων στην κορυφή της σελίδας. Ακολουθούμε την δομή που
συνιστάται για την δημιουργία μίας τέτοιας μπάρας που περικλείει, με την κλάση “container-
fluid”, τα στοιχεία για την πλήρη οριζόντια κάλυψη της σελίδας. Έπειτα διαχωρίζονται τα
στοιχεία ταξινομημένα στην αριστερή και στην δεξιά πλευρά της μπάρας με τις κλάσεις “pull-
left” και “pull-right” αντίστοιχα (Κώδικας 20). Χρησιμοποιούμε την αριστερή πλευρά της
μπάρας εργαλείων για την διατήρηση μίας εσωτερικής μηχανής αναζήτησης έργων, χρηστών