Designing solutions through programming - January 24 2017 Lesson Notes: Difference between revisions
Mr. MacKenty (talk | contribs) |
Mr. MacKenty (talk | contribs) |
||
(5 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 | ||
## This video is where you will actually start working https://youtu.be/bFwwyiirg4c | ## This video is where you will actually start working https://youtu.be/bFwwyiirg4c | ||
## This video is where you create the file to process your login form: https://youtu.be/yWuhNOxs4wM | ## This video is where you create the file to process your login form: https://youtu.be/yWuhNOxs4wM | ||
## 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 | |||
## 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 35: | 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
|
|
|
|
||
|
|
|
|