Designing Solutions Through Programming block 1 Lesson Notes - December 4 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) |
||
Line 111: | Line 111: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== File | === File 2: login.css === | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Line 256: | Line 256: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
=== File 3: login_process.php === | === File 3: login_process.php === | ||
Revision as of 10:04, 4 December 2017
Our Big Idea[edit]
The function of every web application system is to accept data, process data and output information. Effective design of interdependent components results in useful function.
|
|
What are we going to learn today?[edit]Hello Class!
By the end of class you should say: To Learn[edit]
<!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>
File 2: login.css[edit]/*
* 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);
}
File 3: login_process.php[edit]<?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;
}
}
File 4: register.php[edit]Please create a file named my_web_app.php and paste in the following code: <?php
session_start();
?>
<!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">
<?php
$error_password_match = $_SESSION['error_password_match'];
if($error_password_match == TRUE) {
echo "<div class=\"alert alert-danger\" role=\"alert\">
Your password and confirm password don't match
</div>";
}
$_SESSION['error_password_match'] = FALSE;
?>
<!-- <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">Thank you for registering</p>
<form class="form-signin" action="register_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" value="<?php
if($error_password_match == TRUE) {
$email = $_SESSION['email'];
echo "$email";
}
?>
" required>
<input name="screen_name" type="text" id="inputEmail" class="form-control"
placeholder="The name other users will see" value="<?php
if($error_password_match == TRUE) {
$screen_name = $_SESSION['screen_name'];
echo "$screen_name";
}
?>" required>
<input name = "password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<input name = "confirm_password" type="password" id="inputPassword" class="form-control" placeholder="Confirm Password" required>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Register</button>
</form><!-- /form -->
</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>
File 5: register_process.php[edit]<?php
session_start();
$email = $_POST['email'];
$screen_name = $_POST['screen_name'];
$password = $_POST['password'];
$confirm_password = $_POST['confirm_password'];
echo "<p>email is: $email</p>";
echo "<p>screen name is: $screen_name</p>";
echo "<p>password is: $password</p>";
echo "<p>confirm password is: $confirm_password</p>";
if($password != $confirm_password) {
echo "oh dear. The password and confirm password don't match.";
$_SESSION['error_password_match'] = TRUE;
$_SESSION['email'] = $email;
$_SESSION['screen_name'] = $screen_name;
header('location:register.php');
} else {
echo "the password and confirm password match,
we should now do other stuff like check for duplicate emails. But later.";
}
|
What is our homework?[edit]
|
How am I being assessed today?[edit]I will assess you formatively today, and make a professional judgement to what extent you understand our learning material. I will use observation, your written work, answers to questions, and contribution to class discussions as data to make my decisions. I normally record my observations in a "evidence of learning" spreadsheet, which I will happily share with you privately if you so wish. I usually need a day or two notice. |
|
As a computer scientist, you have:[edit]
|
|
Credits[edit] |