HTML + PHP

Door koh do op 15-04-2015 12:53 gewijzigd op 15-04-2015 12:55

2.330 views

Ik heb eigenlijk een vraag met betrekking tot het combineren van HTML & PHP. ik heb een klein voorbeeldje gemaakt. Is dit de juiste manier of kan dit beter? Want dit is natuurlijk maar een klein voorbeeldje maar dit wordt vrij snel zeer on overzichtelijk.

<?php
<!DOCTYPE html>
<html>
<head>
<style>

body {

background-color: #ffffff;
}

#mainContainer {
width: 560px;
margin: 0 auto;
overflow: auto;
text-align: center;
background-color: #000000;
}

#titleContainer{
color: #ffffff;
}

.studentContainer{
overflow: auto;
}

.dataContainer{
float: left;
width: 100px;
padding: 10px;
margin: 10px;
background-color: #999999;
}

}

</style>
</head>

<?php
include ('connect.php');

$students = mysqli_query($connect, "SELECT * FROM `students` ORDER BY `studentId` ASC");

?>

<body>

<div id = mainContainer>

<div id = titleContainer>
voorbeeld
</div>

<?php
while ($record = mysqli_fetch_array($students))
{
?> <div class = studentContainer>
<div class = dataContainer>
<?php echo $record['id'] ?>
</div>
<div class = dataContainer>
<?php echo $record['firstName'] ?>
</div>
<div class = dataContainer>
<?php echo$record['surname'] ?>
</div>
<div class = dataContainer>
<?php echo $record['age'] ?>
</div>
</div>

<?php } ?>

</div>

</body>
</html>
?>

Veur Heur

15-04-2015 13:08

Ik zou je adviseren om html en php te scheiden van elkaar. Kijk bijv. maar eens naar templatepower of smarty.

- Ariën -

15-04-2015 16:14

Voor een groot project zou ik dat wel doen, maar voor een simpele site is het geen noodzaak.
Persoonlijk ben ik niet meer zo verzot op Smarty. Het is bloated, en neemt behoorlijk meer geheugen in terwijl je met PHP alleen sneller uit de voeten kunt met een eigen geschreven templatesysteem die volledig op PHP's basisfuncties leunt.

Thomas van den Heuvel

15-04-2015 20:21 gewijzigd op 15-04-2015 20:25

"PHP is ook een template engine".

@koh do, je moet gewoon doen wat jij fijn vindt en alles wat de leesbaarheid bevordert lijkt mij een positieve zaak. Van jouw bovenstaande fragment zou ik het volgende maken:

<?php
require './includes/connect.php';
require './includes/functions.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="media/css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="mainContainer">
    <div id="titleContainer">voorbeeld</div><?php
    $res = mysqli_query($connect,
        'SELECT *
        FROM students
        ORDER BY studentId ASC'
    );
    if ($res === false) {
        ?><p>Query error.</p><?php
    } else {
        if (mysqli_num_rows($res)) {
            while ($row = mysqli_fetch_assoc($res)) {
                ?><div class="studentContainer">
                    <div><?php echo escape($row['id']) ?></div>
                    <div><?php echo escape($row['firstName']) ?></div>
                    <div><?php echo escape($row['surname']) ?></div>
                    <div><?php echo escape($row['age']) ?></div>
                </div><?php
            }
        } else {
            ?><p>Geen resultaten.</p><?php
        }
        mysqli_free_result($res);
    }
?></div>
</body>
</html>

- maak voor zaken met een specifiek doel (database, hulpfuncties) aparte bestanden of classes
- include alle PHP-bestanden voordat je document begint, als dit gaat
- organiseer e.e.a. in directories zodat je snel bestanden terug kunt vinden
- spring zowel HTML (waar nodig) en PHP (eigenlijk altijd) in en zet het inspringen van HTML in PHP voort en andersom
- verpak PHP luchtdicht in HTML en andersom, dit leest, in combinatie met het inspringen, best fijn, je kunt heel snel visueel zien op welke diepte een PHP- of HTML-blok zich bevindt
- alles heeft een character encoding: je database, je HTML, je PHP document, wees hier expliciet in of bereid je voor op problemen; gebruik dus mysqli_set_charset($connect', 'utf8') direct na het verbinden en in een PHP-header of meta-tag voor je HTML-document
- ESCAPE je OUTPUT, bijvoorbeeld met de functie escape():

<?php
function escape($in) {
    return htmlspecialchars($in, ENT_QUOTES, 'UTF-8');
}
?>

- zorg voor foutafhandeling (bijvoorbeeld in je database class) of (zoals in dit geval) geef netjes weer dat er fouten zijn opgetreden
- schrijf queries uit over meerdere regels
- gebruik (in PHP) enkele quotes waar je kunt en dubbele waar het niet anders kan
- zet (in HTML) altijd dubbele quotes om attributen
- definieer geen stijlen inline, maar verplaats deze naar een extern bestand:

body                    { background-color: #ffffff; }
#mainContainer          { width: 560px; margin: 0 auto; overflow: auto; text-align: center; background-color: #000000; }
#mainContainer p        { color: #ffffff; }
#titleContainer         { color: #ffffff; }
.studentContainer       { overflow: auto; }
.studentContainer div   { float: left; width: 100px; padding: 10px; margin: 10px; background-color: #999999; }

- niet alle HTML elementen hoeven een klasse of div te hebben

Oftewel: houd het gewoon SIMPEL en KORT.

EDIT: zelfs met enige toevoegingen is het oorspronkelijke bestand geslonken van 80 naar 40 regels.

Reageren

Inloggen om te reageren