Designing solutions through programming - January 24 2017 Lesson Notes

What are we going to learn today?[edit]

I am out sick today. Again. Blech.
Follow these instructions
1. Watch this video and ensure your PHPStorm connection settings are correct. Pay attention to detail. https://youtu.be/mm1pnvjgxgU
2. Make sure you have this form http://85.90.244.131/bm/bootstrap_template.html
3. Make sure you have an output page for your output, like this one: http://85.90.244.131/bm/exercise.php
4. watch this video to see a overview of our objective: https://youtu.be/uBF64QtdkG0
5. This video is where you will actually start working https://youtu.be/bFwwyiirg4c
6. This video is where you create the file to process your login form: https://youtu.be/yWuhNOxs4wM
7. This video actually processes the login form https://youtu.be/25eKEXUFY74
8. We now need a way of "remembering" if our user is logged in or not. we do this with sessions. Simple: https://youtu.be/_zkgXfq_6SU
9. Before we continue, the MOST SIMPLE program you will ever write: how to logout in PHP: https://youtu.be/7d9XIaxrjNg
10. The final step (for now) in our login cycle: https://youtu.be/OB_yiI4CegA

PLEASE read the next section about assessment!!!!!!!

What is our homework?[edit]

None.

How am I being assessed today?[edit]

You must create a working login system using bootstrap template you worked on in your last class.
The file below is ABOUT what your final file should look like. If you do not follow instructions you will be confused :-)

<!DOCTYPE html>
<?php session_start(); ?>
<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"/>
    <meta name="description" content=""/>
    <meta name="author" content="Mr. MacKenty"/>

    <title>Welcome</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

    <!-- Custom CSS -->
    <style>
        body {
            padding-top: 50px;
        }
        .starter-template {
            padding: 40px 15px;
            text-align: center;
        }
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Mr. MacKenty's demo site</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Page Content -->

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Mr. MacKenty's demo site</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

            <?php

            if(isset($_SESSION['logged_in']))
            {
            ?>


                <form class="navbar-form navbar-right" action="logout.php" method="post">
                    <button type="submit" class="btn btn-success">LOGOUT</button>
                </form>

                <?php


            } else {

                ?>

                <form class="navbar-form navbar-right" action="login_check.php" method="post">
                    <div class="form-group">
                        <input type="email" name="user_email" placeholder="Email" class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" name="user_password" placeholder="Password" class="form-control">
                    </div>
                    <button type="submit" class="btn btn-success">Sign in</button>
                </form>

                <?php
            }
                ?>

        </div><!--/.navbar-collapse -->
    </div>
</nav>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <h1>Welcome to my website</h1>
        <p>Hello and welcome to Mr. MacKenty's classroom demonstration website</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
    </div>
</div>

<div class="container">
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-8 offset-2">
            <form action="exercise.php" method="post">
                <div class="form-group">
                    <label for="hours_of_exercise">How many hours do you exercise each week?</label>
                    <input type="number" name="hours_of_exercise" class="form-control" id="exampleInputEmail1" placeholder="Enter number here">
                </div>
                <div class="form-group">
                    <label for="type_of_exercise">What type of exercise do you do?</label>
                    <input type="text" name="type_of_exercise" class="form-control" id="type_of_exercise" placeholder="for example, running, football, video games, basketball">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div> <!-- end column -->
    </div> <!-- end rom -->
    <hr>

    <footer>
        <p>This is student work for an introduction to computer science class.</p>
    </footer>
</div> <!-- /container -->


<!-- /.container -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Standards we are covering today[edit]

Apply your understanding of grid system and bootstrap
Apply your understanding of forms to bootstrp
Click here for all our standards

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

Credits[edit]

Icons used with tremendous gratitude by Freepik from flaticon