Designing solutions through programming - January 24 2017 Lesson Notes: Difference between revisions
Mr. MacKenty (talk | contribs) |
Mr. MacKenty (talk | contribs) |
||
(3 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
# Follow these instructions | # Follow these instructions | ||
## Watch this video and ensure your PHPStorm connection settings are correct. Pay attention to detail. https://youtu.be/mm1pnvjgxgU | ## Watch this video and ensure your PHPStorm connection settings are correct. Pay attention to detail. https://youtu.be/mm1pnvjgxgU | ||
## Make sure you have this form http://85.90.244.131/bm/ | ## Make sure you have this form http://85.90.244.131/bm/bootstrap_template.html | ||
## Make sure you have an output page for your output, like this one: http://85.90.244.131/bm/exercise.php | ## Make sure you have an output page for your output, like this one: http://85.90.244.131/bm/exercise.php | ||
## watch this video to see a overview of our objective: https://youtu.be/uBF64QtdkG0 | ## watch this video to see a overview of our objective: https://youtu.be/uBF64QtdkG0 | ||
Line 15: | Line 15: | ||
## This video actually processes the login form https://youtu.be/25eKEXUFY74 | ## This video actually processes the login form https://youtu.be/25eKEXUFY74 | ||
## 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 | ## 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 | ||
## Before we continue, the MOST SIMPLE program you will ever write: how to logout in PHP: https://youtu.be/7d9XIaxrjNg | |||
## The final step (for now) in our login cycle: https://youtu.be/OB_yiI4CegA | |||
# PLEASE read the next section about assessment!!!!!!! | # PLEASE read the next section about assessment!!!!!!! | ||
Line 37: | Line 37: | ||
# You must create a working login system using bootstrap template you worked on in your last class. | # 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 :-) | |||
<syntaxhighlight lang="php"> | |||
<!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> | |||
</syntaxhighlight> | |||
</td> | </td> |
Latest revision as of 20:12, 23 January 2017
What are we going to learn today?[edit]
|
What is our homework?[edit]None.
|
|
How am I being assessed today?[edit]
<!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]
|
|
Credits[edit] |