Designing Solutions Through Programming block 1 Lesson Notes - November 29 2017: Difference between revisions
Mr. MacKenty (talk | contribs) (Created page with " __NOTOC__ <table cellspacing="10" style="width:100%;"> <tr> <td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; backgr...") |
Mr. MacKenty (talk | contribs) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 30: | Line 30: | ||
=== To Learn === | === To Learn === | ||
* I can | * I can create a simple login system | ||
* Please watch this video: https://youtu.be/SLv8luTcyHw | |||
Step 1: | |||
# Please DO NOT create a new project in PHP storm | |||
# Please create a new PHP file, name it login.php | |||
# paste in this code: | |||
<syntaxhighlight lang="php"> | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<head> | |||
<meta charset="utf-8"> | |||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | |||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |||
<title>Welcome to my site!</title> | |||
<!-- Bootstrap --> | |||
<!-- Latest compiled and minified CSS --> | |||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> | |||
<!-- <link rel="stylesheet" href="bootstrap.css"> --> | |||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> | |||
<!-- Optional theme --> | |||
<link rel="stylesheet" href="bootstrap-theme.css"> | |||
<!-- weird emoji CSS --> | |||
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> | |||
<!-- login css --> | |||
<link rel="stylesheet" href="login.css"> | |||
</head> | |||
<body> | |||
<!-- Fixed navbar --> | |||
<nav class="navbar navbar-dark bg-primary"> | |||
<span class="navbar-brand mb-0 h1">Hello World!</span> | |||
</nav> | |||
<div class="container"> | |||
<div class="card card-container"> | |||
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> --> | |||
<img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" /> | |||
<p id="profile-name" class="profile-name-card"></p> | |||
<form class="form-signin" action="login_process.php" method="POST"> | |||
<span id="reauth-email" class="reauth-email"></span> | |||
<input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> | |||
<input name = "password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> | |||
<div id="remember" class="checkbox"> | |||
<label> | |||
<input name="remember" type="checkbox" value="remember-me"> Remember me | |||
</label> | |||
</div> | |||
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> | |||
</form><!-- /form --> | |||
<a href="#" class="forgot-password"> | |||
Forgot the password? | |||
</a> | |||
</div><!-- /card-container --> | |||
</div> <!-- /container --> | |||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> | |||
<!-- Include all compiled plugins (below), or include individual files as needed --> | |||
<!-- Latest compiled and minified JavaScript --> | |||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
Step 2: | |||
# Create a file named login.css and paste in this code: | |||
<syntaxhighlight lang="css"> | |||
/* | |||
* Specific styles of signin component | |||
*/ | |||
/* | |||
* General styles | |||
*/ | |||
body, html { | |||
height: 100%; | |||
background-repeat: no-repeat; | |||
background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); | |||
} | |||
.card-container.card { | |||
max-width: 350px; | |||
padding: 40px 40px; | |||
} | |||
.btn { | |||
font-weight: 700; | |||
height: 36px; | |||
-moz-user-select: none; | |||
-webkit-user-select: none; | |||
user-select: none; | |||
cursor: default; | |||
} | |||
/* | |||
* Card component | |||
*/ | |||
.card { | |||
background-color: #F7F7F7; | |||
/* just in case there no content*/ | |||
padding: 20px 25px 30px; | |||
margin: 0 auto 25px; | |||
margin-top: 50px; | |||
/* shadows and rounded borders */ | |||
-moz-border-radius: 2px; | |||
-webkit-border-radius: 2px; | |||
border-radius: 2px; | |||
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); | |||
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); | |||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); | |||
} | |||
.profile-img-card { | |||
width: 96px; | |||
height: 96px; | |||
margin: 0 auto 10px; | |||
display: block; | |||
-moz-border-radius: 50%; | |||
-webkit-border-radius: 50%; | |||
border-radius: 50%; | |||
} | |||
/* | |||
* Form styles | |||
*/ | |||
.profile-name-card { | |||
font-size: 16px; | |||
font-weight: bold; | |||
text-align: center; | |||
margin: 10px 0 0; | |||
min-height: 1em; | |||
} | |||
.reauth-email { | |||
display: block; | |||
color: #404040; | |||
line-height: 2; | |||
margin-bottom: 10px; | |||
font-size: 14px; | |||
text-align: center; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
-moz-box-sizing: border-box; | |||
-webkit-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | |||
.form-signin #inputEmail, | |||
.form-signin #inputPassword { | |||
direction: ltr; | |||
height: 44px; | |||
font-size: 16px; | |||
} | |||
.form-signin input[type=email], | |||
.form-signin input[type=password], | |||
.form-signin input[type=text], | |||
.form-signin button { | |||
width: 100%; | |||
display: block; | |||
margin-bottom: 10px; | |||
z-index: 1; | |||
position: relative; | |||
-moz-box-sizing: border-box; | |||
-webkit-box-sizing: border-box; | |||
box-sizing: border-box; | |||
} | |||
.form-signin .form-control:focus { | |||
border-color: rgb(104, 145, 162); | |||
outline: 0; | |||
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); | |||
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(104, 145, 162); | |||
} | |||
.btn.btn-signin { | |||
/*background-color: #4d90fe; */ | |||
background-color: rgb(104, 145, 162); | |||
/* background-color: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));*/ | |||
padding: 0px; | |||
font-weight: 700; | |||
font-size: 14px; | |||
height: 36px; | |||
-moz-border-radius: 3px; | |||
-webkit-border-radius: 3px; | |||
border-radius: 3px; | |||
border: none; | |||
-o-transition: all 0.218s; | |||
-moz-transition: all 0.218s; | |||
-webkit-transition: all 0.218s; | |||
transition: all 0.218s; | |||
} | |||
.btn.btn-signin:hover, | |||
.btn.btn-signin:active, | |||
.btn.btn-signin:focus { | |||
background-color: rgb(12, 97, 33); | |||
} | |||
.forgot-password { | |||
color: rgb(104, 145, 162); | |||
} | |||
.forgot-password:hover, | |||
.forgot-password:active, | |||
.forgot-password:focus{ | |||
color: rgb(12, 97, 33); | |||
} | |||
</syntaxhighlight> | |||
Step 3: | |||
# create a file named login_process.php and paste in this code. Please CHANGE the email and password: | |||
<syntaxhighlight lang="php"> | |||
<?php | |||
session_start(); | |||
$email = $_POST['email']; | |||
$password = $_POST['password']; | |||
$remember = $_POST['remember']; | |||
echo "<p>email: $email</p>"; | |||
echo "<p>password: $password</p>"; | |||
echo "<p>remember me: $remember</p>"; | |||
$valid_email = "bmackenty@aswarsaw.org"; | |||
$valid_password = "password123"; | |||
if ($email != $valid_email) { | |||
echo "That username isn't the right username"; | |||
} else { | |||
if ($password != $valid_password) { | |||
echo "you have the right username, but not the right password"; | |||
} else { | |||
echo "You are logged in!"; | |||
$_SESSION['logged_in'] = TRUE; | |||
$_SESSION['email'] = $email; | |||
echo "Please <a href=\"my_web_app.php\">click here to test if you are logged in</a>"; | |||
} | |||
} | |||
</syntaxhighlight> | |||
Step 4: | |||
Please create a file named my_web_app.php and paste in the following code: | |||
<syntaxhighlight lang="php"> | |||
<?php | |||
session_start(); | |||
$logged_in = $_SESSION['logged_in']; | |||
$email = $_SESSION['email']; | |||
if($logged_in) { | |||
echo "You are logged in with email: $email "; | |||
echo "<p> here is my protected content that only a logged-in user can see!!</p>"; | |||
} else { | |||
echo "Hello. You are not logged in."; | |||
} | |||
</syntaxhighlight> | |||
</td> | </td> |
Latest revision as of 22:03, 27 November 2017
|
|
|
|
|
|
|
|
|