SpookBlog

Hoofdmenu

HTML5 Webdesign Links

Toegevoegd op 8 Jun 2017, 7:58 - Categorie: HTML5 LINKS


Contactformulier HTML+PHP+SQL

Reacties
Dit is een korte handleiding over hoe een contactformulier met controle op je webpagina te krijgen. Het gebruikt PHP en slaat de gegevens op in een SQL database. Er wordt van uit gegaan dat je je eigen CSS gebruikt om het contactformulier op te maken.
HTML
Maak het bestand contact.html met de volgende code.
<form action="bedankt.php" method="post">

Naam:<input type="text" name="u_naam" required><br>
Email:<input type="email" name="u_email" required><br>
Onderwerp:<input type="text" name="u_onderwerp" required><br>
Bericht: <input type="text" name="u_bericht" required><br>
<input type="submit" value="Verzend"><br>
</form>

Opzetten SQL Database
Maak een database aan met een zinvolle naam, bijvoorbeeld reacties met de opzet utf8_general_ci.
Maak hierin een tabel aan met een zinvolle naam bijvoorbeeld tb_form. Maak nu in deze tabel de volgende velden aan:
  • ID (integer auto_increment)
  • naam (text)
  • email (text)
  • onderwerp (text)
  • bericht (text)

  • PHP link met de database maken
    Maak een php bestand aan in dezelfde directory als waar je html staat en noem het dbconnect.php.
    <?php
    
    function Connect()
    // Vul hier de gegevens in om contact te maken met je database. Localhost is alleen als je een locale server hebt zonder wachtwoord.
    {
    $dbhost = "localhost";
    $dbuser = "root";
    $dbpass = "";
    $dbname = "reacties";
    // Maken van de connectie met de database
    $conn = new mysqli($dbhost, $dbuser, $dbpass, $dbname) or die($conn->connect_error);
    return $conn;
    } ?>

    'Bedankt'-pagina en foutcontrole
    Maak een nieuw php bestand en noem het bedankt.php. Als er een fout is onstaan in dbconnect.php zal er een foutmelding getoond worden.
    <?php
    
    require 'dbconnect.php';
    $conn = Connect();
    $naam = $conn->real_escape_string($_POST['u_naam']);
    $email = $conn->real_escape_string($_POST['u_email']);
    $onderwerp = $conn->real_escape_string($_POST['u_onderwerp']);
    $bericht = $conn->real_escape_string($_POST['u_bericht']);
    //plaatsen van de gegevens in de database
    $query = "INSERT into tb_form (naam,email,onderwerp,bericht) VALUES('" . $naam . "','" . $email . "','" . $onderwerp . "','" . $bericht . "')";
    $success = $conn->query($query);
    if (!$success) { die("Fout: ".$conn->error); }
    echo "Bedankt voor uw bericht. <br>";
    $conn->close();
    ?>

    Uitvoeren
    Als je bovenstaande bestanden in de directory /contact gezet hebt kun je ze nu uitvoeren met localhost/contact/contact.html.


    Toegevoegd op 22 Feb 2017, 10:27 - Categorie: PHP SQL HTML5


    HTML5 favicons en icons

    Reacties
    Favicons
    Favicons zijn kleine afbeeldingen die in de browsertab van je pagina worden getoond.
    Zoek op deze website maar eens een favicon uit. Download de favicon en kies er eentje met de hoogste resolutie.
    Plaats vervolgens in de webpagina de volgende code:

    <head>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico">
    </head>

    Font Awesome Icons
    Plaats bovenaan in de CSS:

    @import url(font-awesome.min.css);

    Zoek op deze website een icoon uit wat je wilt gebruiken.
    Gebruik het icoontje als volgt in je tekst:

    <i class="icon fa-dot-circle-o"></i>

    Icoontje groter? Gebruik dan fa-2x:

    <i class="icon fa-dot-circle-o fa-2x"></i>



    Toegevoegd op 22 Feb 2017, 16:56 - Categorie: HTML5


    Pagina's: [1]