From Computer Science Wiki
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.
- click here to learn about headers: https://youtu.be/OzqVC_YN6KM
- 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 »</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]
|
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]
|