Designing solutions through programming - January 25 2017 Lesson Notes: Difference between revisions

Revision as of 21:00, 24 January 2017

What are we going to learn today?[edit]

You must finish your login system from our previous class
We are going to ADD some functionality to your application, so don't go on to the next step until you have the system working as described.
Watch this video and ensure your PHPStorm connection settings are correct. Pay attention to detail. https://youtu.be/mm1pnvjgxgU
the instructions to setup a login system are here: click here please.
1. click here to learn about headers: https://youtu.be/OzqVC_YN6KM

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

What is our homework?[edit]

It is time for you to dedicate at least 30-45 minutes every evening to working on your app.

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

Revision as of 17:47, 24 January 2017 (view source) Mr. MacKenty (talk \| contribs) (→‎File:class_plan.png What are we going to learn today?) ← Older edit		Revision as of 21:00, 24 January 2017 (view source) Mr. MacKenty (talk \| contribs) (→‎file:homework.png What is our homework?) Newer edit →
Line 19:		Line 19:
	==[[file:homework.png]] What is our homework? ==		==[[file:homework.png]] What is our homework? ==

	~~None~~.		# It is time for you to dedicate at least 30-45 minutes every evening to working on your app.