Designing Solutions Through Programming block 1 Lesson Notes - November 29 2017

From Computer Science Wiki

Target.png 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.

Class plan.png What are we going to learn today?[edit]

Hello Class!

By the end of class you should say:

To Learn[edit]

Step 1:

  1. Please DO NOT create a new project in PHP storm
  2. Please create a new PHP file, name it login.php
  3. paste in this code:
<!DOCTYPE html>
<html lang="en">
    <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="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <!-- <link rel="stylesheet" href="bootstrap.css"> -->
    <link rel="stylesheet" href="" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="bootstrap-theme.css">

    <!-- weird emoji CSS -->
    <link href="" rel="stylesheet">

    <!-- login css -->
    <link rel="stylesheet" href="login.css">


<!-- Fixed navbar -->
<nav class="navbar navbar-dark bg-primary">

    <span class="navbar-brand mb-0 h1">Hello World!</span>


<div class="container">
    <div class="card card-container">
        <!-- <img class="profile-img-card" src="//" alt="" /> -->
        <img id="profile-img" class="profile-img-card" src="//" />
        <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">
                    <input name="remember" type="checkbox" value="remember-me"> Remember me
            <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?
    </div><!-- /card-container -->

</div> <!-- /container -->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

Step 2:

  1. Create a file named login.css and paste in this code:
 * 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:focus {
    background-color: rgb(12, 97, 33);

.forgot-password {
    color: rgb(104, 145, 162);

    color: rgb(12, 97, 33);

Step 3:

  1. create a file named login_process.php and paste in this code. Please CHANGE the email and password:

$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 = "";
$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>";



Step 4:

Please create a file named my_web_app.php and paste in the following code:


$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.";


Homework.png What is our homework?[edit]

  • none

Target.png 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.

Computer1.png As a computer scientist, you have:[edit]

  • Confidence in dealing with complexity
  • Persistence in working with difficult problems
  • Tolerance for ambiguity
  • The ability to deal with open-ended problems
  • The ability to communicate and work with others to achieve a common goal or solution

Credit.png Credits[edit]