|
|
| (6 intermediate revisions by the same user not shown) |
| Line 11: |
Line 11: |
| ## click here to learn about headers: https://youtu.be/OzqVC_YN6KM | | ## click here to learn about headers: https://youtu.be/OzqVC_YN6KM |
| ## click here to learn how to show the name of the logged in user: https://youtu.be/V-1Lh6-QqLU | | ## click here to learn how to show the name of the logged in user: https://youtu.be/V-1Lh6-QqLU |
| | | ## click here to learn how to simply prevent brute force attacks against your login form: https://youtu.be/IQThd6WJ-Tk |
| | | ## and here we actually implement the lock: https://youtu.be/-ukU3wzCp18 |
| | ## click here to clean up the login_check script: https://youtu.be/rxaV5zUUilM |
| | ## We can now customize content based on the status of a user: https://youtu.be/bWkFa3p6M-c |
| | ## let's make something actually useful: https://youtu.be/JzK5xNs7xZw |
|
| |
|
| # PLEASE read the next section about assessment!!!!!!! | | # PLEASE read the next section about assessment!!!!!!! |
| Line 33: |
Line 36: |
| ==[[File:target.png]] How am I being assessed today? == | | ==[[File:target.png]] How am I being assessed today? == |
|
| |
|
| # You must create a working login system using bootstrap template you worked on in your last class. | | # If you do not email me a link to your file you will not a get a grade on this, which would be a sad day for you. |
| # 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"> | | <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> | | </syntaxhighlight> |
|
| |
|
