YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Eine neue kleine Videoreihe wurde gestartet: Newsletter versenden! Wir werden gemeinsam ein kleines, einfaches, System bauen, um sich für einen Newsletter zu registrieren und Newsletter zu senden. Inkl. Bestätigung der Eintragung und Auflistung aller Subscriber + Newsletterversant. In diesem ersten Video zeige ich euch, wie ihr ein einfaches Formular mit HTML erstellen und die Eingaben in einer Datenbank speichern könnt.

+++ WICHTIG: Damit die mail-Funktion eine Mail versenden kann, muss auf dem System, auf dem sie ausgeführt wird, ein Mailserver eingerichtet sein. Somit funktioniert diese Methode standardmäßig nicht, wenn man gängige Tools wie XAMPP lokal nutzt. Auf einem Webserver/Webspace sollte es allerdings ohne weitere Probleme funktionieren +++

Quellcode herunterladen

TutCubeDE-Newsletter-erstellen-1Herunterladen

Quellcode index.php:

<?php
    require_once 'database.php';
    $db = new DB();

    if($_POST['eintragen']) {
        $name = $_POST['name'];
        $email = $_POST['email'];

        if($db->subscribeToNewsletter($name, $email)) {
            echo "Vielen Dank!";
        } else {
            echo "Leider trat ein Problem beim Eintragen in den Newsletter auf. Bitte probiere es später erneut! :(";
        }
    }
?>

<html>
    <head>
        <title>Newsletter</title>
        <meta charset="UTF-8"> 
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="wrapper" class="shadow">
            <h1>Zum Newsletter anmelden</h1>
            <form action="index.php" method="POST">
                <table border="0">
                    <tr>
                        <td>Name:</td>
                        <td><input type="text" name="name" required /></td>
                    </tr>
                    <tr>
                        <td>E-Mail:</td>
                        <td><input type="email" name="email" required /></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="checkbox" name="datenschutz" value="datenschutz_ok" required /> Mit Anmeldung zum Newsletter stimme ich den Datenschutzbestimmungen zu. Der Newsletter wird ausschließlich dazu verwendet, Dich über neue Inhalte von TutCubeDE zu informieren. Gelegentlich können auch interessante Inhalte von oder über TutCubeDE verteilt werden.</td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="Eintragen" name="eintragen" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

Quellcode database.php:

<?php
    class DB {
        private static $db_username 	= "c1newsletter";
        private static $db_password 	= "fgwgjMQ!4RD3";
        private static $db_host 		= "localhost";
        private static $db_name			= "c1newsletterdb";
        private static $db;

        function __construct() {
            try {
                self::$db = new PDO("mysql:host=" . self::$db_host . ";dbname=" . self::$db_name,  self::$db_username , self::$db_password);
            } catch(PDOException $e) {
                echo "Datenbankverbindung gescheitert!";
                die();
            }
        }

        function subscribeToNewsletter($name, $email) {
            $stmt = self::$db->prepare("INSERT INTO newsletter_user (name, email) VALUES(:name, :email)");
            $stmt->bindParam(":name", $name);
            $stmt->bindParam(":email", $email);

            if($stmt->execute() && $stmt->rowCount()) {
                return true;
            } else {
                return false;
            }
        }
    }

Quellcode style.css:

body {
    margin-top: 20px;
    font-family: Arial, Helvetica, sans-serif;

    background: #70737c;
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    background-color: #fefefe;
    padding: 40px;
}

.shadow {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

.shadow-menu {
    -webkit-box-shadow: 0px 0px 3px #000;
    -moz-box-shadow: 0px 0px 3px #000;
    box-shadow: 0px 0px 3px #000;
}