Hoe bouw ik een website?

Stap 1.1: BASIS pagina's aanmaken

Maak een database aan via o.a. MySQL.
Daarna maak je eerst een aantal standaard pagina's met standaard basis informatie.
Om fouten te voorkomen en om dezelfde info op te roepen waar nodig...
de volgende pagina's maak je aan en plaats je in de map 'public_html':

- 'config.php' -> Maak verbinding met de server.
- 'info.php' -> Jouw Server informatie.
- 'header.php' -> META/ICON.
- 'navbar.php' -> Jouw menu voor de website.
- 'css.php' -> Actief CSS.
- 'js.php' -> Javascripts voor alle opties.
- 'footer.php' -> Jouw footer info.
- 'index.php' -> Basis voor elke pagina die ontwikkeld word.

Deze bewerkingen kun jij uitvoeren met o.a. het programma Dreamweaver CC van Adobe.
Dit voorbeeld hieronder resulteerd in een website die in verbinding staat met een database naar keuze.
De pagina's zijn zo gemaakt dat deze op elke pagina op dezelfde manier in beeld word gebracht.
Ook voor de database mogelijkheden zijn de CSS en javascripts pagina's in .php format.

Na jarenlange ervaring met bouwen van websites vind ik persoonlijk dit de makkelijkste en overzichtelijkste manier om een webvsite op te zetten...

Veel plezier ermee!

Stap 1.2: edit config.php

Maak verbinding met de server.

<?php
include ("info.php"); // wachtwoord, gebruikersnaam en database gegevens oproepen.
// Create connection
$servername = "$host";
$username = "$user";
$password = "$pass";
$db = "$dbase";

$website = "https://jouwwebsite.com"; // Vul hier jouw website in.

$conn = new mysqli($servername, $username, $password, $db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
terug naar menu

Stap 1.3: edit info.php

Om verbinding te maken met de server is er informatie nodig.
Vul hieronder de informatie in die jij terug kunt vinden bij de HOST.

<?PHP
$host = "localhost"; // meestal gewoon localhost...
$user = "gebruikersnaam"; // vul een gebruikersnaam in van de database.
$pass = "wachtwoord"; // vul het wachtwoord in van de gebruikersnaam.
$db = "database"; // vul de naam in van de database die je gebruiken wilt.
?>
terug naar menu

Stap 1.4: edit header.php

Op deze pagina is het mogelijk de standaard opmaak van het html op te roepen via scripts van andere partijen.
Standaard ICON, CSS, JQuery, Angular, Bootstrap en lettertypes die gebruikt worden kun je hier plaatsen.
Ook is dit de plek voor alle meta en google mogelijkheden...

<?PHP
@ob_start(); // nodig voor inloggen.
session_start(); // nodig voor inloggen.
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/gif" href="http://jouwicon.gif">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Vast Shadow' rel='stylesheet'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

terug naar menu
Stap 1.5: edit navbar.php

Maak een eigen menu en/of NavBar en plaats die op deze pagina...

<?PHP
if($pageactive == "index"){
$index = "active"; // zet pagina actief als bezoeker op de pagina is.
}else{
$index = ""; // zet pagina NIET actief als bezoeker NIET op de pagina is.
}
?>

<div class="sidebar">
<a class="<?=$index?>" href="<?=$website?>/index.php">Home</a>
</div<
terug naar menu

Stap 1.6: edit js.php

Plaats hier alle javascripts die je gebruikt op de website.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<scripts>
Vul hier jouw javascripts in.
</scripts>
terug naar menu

Stap 1.7: edit css.php

Plaats hier alle CSS coderingen in samenwerking met users database o.a....

<?PHP
$maincolor = "#38AFE1"; // Vul hier jouw kleurcode in als basiskleur voor de website.
?>
<style>

.sidebar {
margin: 0;
padding: 0;
width: 200px;
background: linear-gradient(to bottom, <?=$maincolor?> 0%, #000 100%);
position: fixed;
height: 100%;
overflow: auto;
text-shadow:3px 3px 6px black;
transition: 1.0s ease;
text-decoration: none;
border-right: black solid;
}

.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
transition: 1.0s ease;
}

.sidebar a.active {
background: linear-gradient(to bottom, <?=$maincolor?> 0%, #000 30%,#000 70%, <?=$maincolor?> 100%);
color: white;
text-shadow:3px 3px 6px <?=$maincolor?>;
text-decoration: none;
transition: 1.0s ease;
}
.sidebar a:hover:not(.active) {
background: linear-gradient(to bottom, <?=$maincolor?> 0%, #000 30%,#000 70%, <?=$maincolor?> 100%);
color: white;
text-decoration: none;
text-shadow:3px 3px 6px <?=$maincolor?>;
transition: 1.0s ease;
}

div.content {
margin-left: 200px;
padding: 1px 16px;
}

@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>

terug naar menu

Stap 1.8: edit footer.php

Maak een eigen footer die zichtbaar zal zijn op elke pagina...

<?PHP
// Plaats hier MySQL database PHP coderingen.
?>
<div class="content">
Plaats hier HTML voor je footer.php.
<div>
</body>
</html>
terug naar menu

Stap 1.9: edit index.php

De inhoud moet geplaatst worden op elke pagina die jij in beeld brengt voor de front end user.
Plaats onderstaande codering op elke pagina voor de eindgebruikers.

<?PHP
INCLUDE("config.php"); // verbinding maken met server.
INCLUDE("header.php"); // metascripts, header info.
INCLUDE("CSS.php"); // css oproepen.
</head>
?>
<body>
<?PHP
$pageactive = "index"; // word gebruikt door navbar.php.
INCLUDE("Navbar.php"); // navigatie ophalen.
?>
<div class="content">
Welkom op mijn site!
(plaats hier jouw content voor deze pagina...)
<div>
<?PHP
INCLUDE("JS-scripts.php"); // javascripts oproepen.
INCLUDE("footer.php"); // footer oproepen.
</head>
?>
terug naar menu

Nu is de website online en heeft verbinding met de server...


->-> Ga naar stap 2: Opmaak <-<-


Michel de Nooijer

(+31) 06 188 70 896