Difference between revisions of "Designing Solutions Through Programming block 1 Lesson Notes - December 4 2017"

From Computer Science Wiki
Jump to navigation Jump to search
 
Line 448: Line 448:
 
     we should now do other stuff like check for duplicate emails. But later.";
 
     we should now do other stuff like check for duplicate emails. But later.";
 
}
 
}
 +
 +
</syntaxhighlight>
 +
 +
 +
=== File 6: logout.php ===
 +
 +
<syntaxhighlight lang="php">
 +
 +
<?php
 +
session_start();
 +
session_destroy();
 +
?>
 +
 +
</syntaxhighlight>
 +
 +
=== File 7: index.php ===
 +
 +
<syntaxhighlight lang="php">
 +
 +
<?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">
 +
 +
 +
</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">
 +
<?php
 +
    $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!!</p>";
 +
 +
    } else {
 +
 +
    echo "Hello. You are not logged in.";
 +
 +
    }
 +
?>
 +
    <!-- rows, columns, card, and your web app go here!!! -->
 +
 +
</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>
 
</syntaxhighlight>

Latest revision as of 08:07, 4 December 2017

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]

  • Hello!
  • Please make sure you have ALL THE FILES below and they are identical to the ones below. We can consider this (almost) a point where we freeze our login and registration system (meaning we will not make any more changes to them).
  • File 1: login.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>

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


File 6: logout.php[edit]

<?php
session_start();
session_destroy();
?>

File 7: index.php[edit]

<?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">


</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">
<?php
    $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!!</p>";

    } else {

    echo "Hello. You are not logged in.";

    }
?>
    <!-- rows, columns, card, and your web app go here!!! -->

</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>


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]

Produce a plan, simulation or model.

A state in which two things are able to exist or occur together without problems or conflict.

Add labels to a diagram.

Give a brief account.

Consider the merits or otherwise of an argument or concept. Opinions and conclusions should be presented clearly and supported with appropriate evidence and sound argument.

Retrieved from "https://computersciencewiki.org/index.php?title=Designing_Solutions_Through_Programming_block_1_Lesson_Notes_-_December_4_2017&oldid=7258"