MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

fixed php

Browse Source
This commit is contained in:
Joey Lai
2017-01-13 15:38:23 +01:00
parent d61694b543
commit bd36258548
4 changed files with 399 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
website/login.php
View File

@@ -1,217 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="styles/index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/dobPicker.min.js"></script>
<meta charset="utf-8">
<title>MyHyvesbook+</title>
</head>
<?php
include("views/login_head.php");
?>
<body>
<div>
<img style="width:50%;margin-left:25%"
src="img/top-logo.png"
alt="MyHyvesbook+">
</div>
<form action="../profile.php"
method="post">
<h1>Welkom bij MyHyvesbook+</h1>
<div class="login_containerlogin">
<label><b>Gebruikersnaam</b></label>
<input type="text"
placeholder="Voer uw gebruikersnaam in"
name="uname"
pattern=".{6,}"
title="Moet 6 of meer karakters bevatten"
required>
</div>
<div class="login_containerlogin">
<label><b>Wachtwoord</b></label>
<input type="password"
placeholder="Voer uw wachtwoord in"
name="psw"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
required>
</div>
<div class="login_containerlogin">
<input type="submit"
value="Login"
name="Submit"
id="frm1_submit" />
</div>
</form>
<div class="login_containerlogin">
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
</div>
<div class="login_containerregister">
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close"
title="Close Modal">
&times;</span>
<!-- Register Content -->
<form class="modal-content animate"
action="../profile.php"
onsubmit="return passwordfunction()"
method="post">
<h2>Registreer uw account</h2>
<div class="login_containerregister">
<label><b>Naam</b></label>
<input type="text"
placeholder="Voer uw naam in"
name="name"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Achternaam</b></label>
<input type="text"
placeholder="Voer uw achternaam in"
name="surname"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Geboortedatum</b></label>
<!-- These are the select elements we will target -->
<select id="dobday"
title="Voer een dag in"
required></select>
<select id="dobmonth"
title="Voer een maand in"
required></select>
<select id="dobyear"
title="Voer een jaar in"
required></select>
<!-- And here's the library being called! -->
<script>
$(document).ready(function() {
$.dobPicker({
daySelector: '#dobday',
monthSelector: '#dobmonth',
yearSelector: '#dobyear',
dayDefault: 'Dag',
monthDefault: 'Maand',
yearDefault: 'Jaar',
minimumAge: 12,
maximumAge: 80
});
});
</script>
</div>
<div class="login_containerregister">
<label><b>Gebruikersnaam</b></label>
<input type="text"
placeholder="Voer uw gebruikersnaam in"
name="username"
pattern=".{6,}"
title="Moet minstens 6 karakters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Wachtwoord</b></label>
<input type="password"
placeholder="Voer uw wachtwoord in"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
id="password"
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Herhaal wachtwoord</b></label>
<input type="password"
placeholder="Herhaal wachtwoord"
name="confirmpassword"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
id="confirmpassword"
title="Herhaal wachtwoord"
required>
</div>
<div class="login_containerregister">
<label><b>Straatnaam</b></label>
<input type="text"
placeholder="Voer uw straatnaam in"
name="name"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Straatnummer</b></label>
<input type="text"
placeholder="Voer uw straatnummer in"
name="name"
pattern="[1-9][0-9]{0,}"
title="Mag alleen nummers bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Email</b></label>
<input type="email"
placeholder="Voer uw email in"
id="email"
title="Voer een geldige email in"
required>
</div>
<div class="login_containerregister">
<input type="submit"
value="Registreer uw account"
name="Submit"
id="frm1_submit" />
</div>
</form>
</div>
</div>
<?php
/*
* This view adds login view
*/
include("views/login-view.php");
?>
</body>
</html>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
function passwordfunction() {
var password1 = document.getElementById("password").value;
var password2 = document.getElementById("confirmpassword").value;
var passwordmatching = true;
if (password1 != password2) {
document.getElementById("password").style.borderColor = "red";
document.getElementById("confirmpassword").style.borderColor = "red";
passwordmatching = false;
confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
}
return passwordmatching;
}
</script>

247
website/styles/index.css
View File

@@ -1,3 +1,47 @@
::selection {
background: #845663;
color: white;
}
::-moz-selection {
background: #845663;
color: white;
}
a, a:link, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
div[data-title]:hover:after{
content: attr(data-title);
padding: 4px 4px;
color: #FFFFFF;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-color: #333;
font-size: 15px;
line-height: normal;
font-family: Arial, sans-serif;
}
/* Add Zoom Animation */
.animate {
animation: animatezoom 0.6s
-webkit-animation: animatezoom 0.6s;
}
/* Body */
body {
height: 100%;
@@ -8,6 +52,39 @@ body {
font-family: Arial, sans-serif;
}
/* stijl voor alle buttons */
button {
background-color: #845663;
border: 2px solid black;
border-radius: 12px;
color: white;
cursor: pointer;
height: 50%;
margin: 8px 0;
padding: 14px 20px;
width: 25%;
font-family: Arial;
font-size: 16px;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
color: white;
font-size: 100px;
font-weight: bold;
position: absolute;
right: 25px;
top: 0;
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* inlogform */
form {
background-color: #a87a87;
@@ -32,76 +109,47 @@ h2 {
font-size: 2.0em;
}
input[type=text], input[type=password], input[type=email], input[type="date"] {
border-radius: 12px;
border: 5px solid #ccc;
box-sizing: border-box;
display: inline-block;
height: 50%;
padding: 12px 20px;
margin: 8px 0;
width: 50%;
font-family: Arial;
font-size: 16px;
}
input[type=submit] {
background-color: #845663;
border: 2px solid black;
border-radius: 12px;
color: white;
cursor: pointer;
height: 50%;
margin: 8px 0;
padding: 14px 20px;
width: 50%;
font-family: Arial;
font-size: 16px;
}
label {
display: block;
}
/* datepicker */
select {
border-radius: 12px;
border: 5px solid #ccc;
box-sizing: border-box;
display: inline-block;
height: 50%;
padding: 12px 20px;
margin: 8px 0;
width: 15%;
font-family: Arial;
font-size: 16px;
}
input[type=text], input[type=password], input[type=email] {
border-radius: 12px;
border: 5px solid #ccc;
box-sizing: border-box;
display: inline-block;
height: 50%;
padding: 12px 20px;
margin: 8px 0;
width: 50%;
font-family: Arial;
font-size: 16px;
}
input[type=submit]{
background-color: #845663;
border: 2px solid black;
border-radius: 12px;
color: white;
cursor: pointer;
height: 50%;
margin: 8px 0;
padding: 14px 20px;
width: 50%;
font-family: Arial;
font-size: 16px;
}
/* stijl voor alle buttons */
button {
background-color: #845663;
border: 2px solid black;
border-radius: 12px;
color: white;
cursor: pointer;
height: 50%;
margin: 8px 0;
padding: 14px 20px;
width: 25%;
font-family: Arial;
font-size: 16px;
}
/* padding voor registreer container */
.login_containerregister {
padding: 16px;
text-align: left;
padding: 16px;
text-align: left;
}
/* padding voor login_containers */
.login_containerlogin {
padding: 16px;
text-align: center;
padding: 16px;
text-align: center;
}
/* The Modal (background) */
@@ -130,28 +178,23 @@ button {
height: 80%;
}
/* The Close Button */
.close {
/* Position it in the top right corner outside of the modal */
color: white;
font-size: 100px;
font-weight: bold;
position: absolute;
right: 25px;
top: 0;
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Close button on hover */
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
animation: animatezoom 0.6s
-webkit-animation: animatezoom 0.6s;
/* datepicker */
select {
border-radius: 12px;
border: 5px solid #ccc;
box-sizing: border-box;
display: inline-block;
height: 50%;
padding: 12px 20px;
margin: 8px 0;
width: 18%;
font-family: Arial;
font-size: 16px;
}
@-webkit-keyframes animatezoom {
@@ -159,45 +202,7 @@ button {
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
::selection {
background: #845663;
color: white;
}
::-moz-selection {
background: #845663;
color: white;
}
a, a:link, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
a[data-title]:hover:after, img[data-title]:hover:after, span[data-title]:hover:after,
div[data-title]:hover:after{
content: attr(data-title);
padding: 4px 4px;
color: #FFFFFF;
position: absolute;
left: 0;
top: 100%;
z-index: 20;
white-space: nowrap;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-color: #333;
font-size: 15px;
line-height: normal;
font-family: Arial, sans-serif;
ul {
font-family: Arial;
font-size: 16px;
}

254
website/views/login-view.php Normal file
View File

@@ -0,0 +1,254 @@
<?php
// define variables and set to empty values
$name = $surname = $bday = $username = $password = $confirmpassword = $streetname = $housenumber = $email = "";
$passwordErr = $confirmpasswordErr = "";
$correct = true;
if (isset($_POST["name"])) {
$name = $_POST["name"];
}
if (isset($_POST["surname"])) {
$surname = $_POST["surname"];
}
if (isset($_POST["bday"])) {
$bday = $_POST["bday"];
}
if (isset($_POST["username"])) {
$username = $_POST["username"];
}
if (isset($_POST["password"])) {
$password = $_POST["password"];
}
if (isset($_POST["streetname"])) {
$streetname = $_POST["streetname"];
}
if (isset($_POST["housenumber"])) {
$housenumber = $_POST["housenumber"];
}
if (isset($_POST["email"])) {
$email = $_POST["email"];
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if ($_POST["password"]!= $_POST["confirmpassword"]) {
$passwordErr = "Wachtwoorden matchen niet";
$confirmpasswordErr = "Wachtwoorden matchen niet";
$correct = false;
?>
<script>document.getElementById('id01').style.display='block'</script>
<?php
}
}
?>
<div>
<img style="width:50%;margin-left:25%"
src="img/top-logo.png"
alt="MyHyvesbook+">
</div>
<form action="../profile.php"
method="post">
<h1>Welkom bij MyHyvesbook+</h1>
<div class="login_containerlogin">
<label><b>Gebruikersnaam</b></label>
<input type="text"
placeholder="Voer uw gebruikersnaam in"
name="uname"
pattern=".{6,}"
title="Moet 6 of meer karakters bevatten"
required>
</div>
<div class="login_containerlogin">
<label><b>Wachtwoord</b></label>
<input type="password"
placeholder="Voer uw wachtwoord in"
name="psw"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters lang zijn"
required>
</div>
<div class="login_containerlogin">
<input type="submit"
value="Login"
name="Submit"
id="frm1_submit" />
</div>
</form>
<div class="login_containerlogin">
<button onclick="document.getElementById('id01').style.display='block'">Registreer</button>
</div>
<div class="login_containerregister">
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close"
title="Close Modal">
&times;</span>
<!-- Register Content -->
<form class="modal-content animate"
action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
return= $correct
method="post">
<h2>Registreer uw account</h2>
<div class="login_containerregister">
<label><b>Naam</b></label>
<input type="text"
placeholder="Voer uw naam in"
name="name"
value="<?php echo $name ?>"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Achternaam</b></label>
<input type="text"
placeholder="Voer uw achternaam in"
name="surname"
value="<?php echo $surname ?>"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Geboortedatum</b></label>
<input type="date"
name="bday"
value="<?php echo $bday ?>"
id="bday"
placeholder="01/01/1900">
</div>
<div class="login_containerregister">
<label><b>Gebruikersnaam</b></label>
<input type="text"
placeholder="Voer uw gebruikersnaam in"
name="username"
value="<?php echo $username ?>"
pattern=".{6,}"
title="Moet minstens 6 karakters bevatten"
required>
</div>
<ul>
<li>Minstens 6 karakters</li>
</ul>
<div class="login_containerregister">
<label><b>Wachtwoord</b></label>
<input type="password"
placeholder="Voer uw wachtwoord in"
name="password"
value="<?php echo $password ?>"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
id="password"
title="Moet minimaal 1 cijfer, hoofdletter en kleine letter bevatten en minstens 8 karakters bevatten"
required>
<span class="error">* <?php echo $passwordErr;?></span>
</div>
<ul>
<li>Minstens 8 karakters</li>
<li>Minimaal 1 cijfer</li>
<li>Minimaal 1 hoofdletter</li>
<li>Minimaal 1 kleine letter</li>
</ul>
<div class="login_containerregister">
<label><b>Herhaal wachtwoord</b></label>
<input type="password"
placeholder="Herhaal wachtwoord"
name="confirmpassword"
value="<?php echo $confirmpassword ?>"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
id="confirmpassword"
title="Herhaal wachtwoord"
required>
<span class="error">* <?php echo $confirmpasswordErr;?></span>
</div>
<div class="login_containerregister">
<label><b>Straatnaam</b></label>
<input type="text"
placeholder="Voer uw straatnaam in"
name="streetname"
value="<?php echo $streetname ?>"
pattern="[A-Za-z]{1,}"
title="Mag alleen letters bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Huisnummer</b></label>
<input type="text"
placeholder="Voer uw straatnummer in"
name="housenumber"
value="<?php echo $housenumber ?>"
pattern="[1-9][0-9]{0,}"
title="Mag alleen nummers bevatten"
required>
</div>
<div class="login_containerregister">
<label><b>Email</b></label>
<input type="email"
placeholder="Voer uw email in"
name="email"
value="<?php echo $email ?>"
id="email"
title="Voer een geldige email in"
required>
</div>
<div class="login_containerregister">
<input type="submit"
value="Registreer uw account"
name="Submit"
id="frm1_submit" />
</div>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<script>
function passwordfunction() {
var password1 = document.getElementById("password").value;
var password2 = document.getElementById("confirmpassword").value;
var passwordmatching = false;
if (password1 == password2) {
document.getElementById("password").style.borderColor = "red";
document.getElementById("confirmpassword").style.borderColor = "red";
confirmpassword.setCustomValidity("Wachtwoorden matchen niet")
} else {
passwordmatching = true;
}
return passwordmatching;
}
</script>

10
website/views/login_head.php Normal file
View File

@@ -0,0 +1,10 @@
<head>
<meta charset="utf-8">
<title>MyHyvesbook+</title>
<link rel="stylesheet"
type="text/css"
href="styles/index.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/dobPicker.min.js"></script>
</head>