Designing Solutions Through Programming block 1 Lesson Notes - November 29 2017: Difference between revisions
Mr. MacKenty (talk | contribs) (Created page with " __NOTOC__ <table cellspacing="10" style="width:100%;"> <tr> <td style="margin:0; margin-top:10px; margin-right:10px; border:1px solid #dfdfdf; padding:0 1em 1em 1em; backgr...") |
Mr. MacKenty (talk | contribs) |
||
Line 30: | Line 30: | ||
=== To Learn === | === To Learn === | ||
* I can | * I can create a login system (a real simple one) | ||
Step 1: | |||
# Please DO NOT create a new project in PHP storm | |||
# Please create a new PHP file, name it login.php | |||
# paste in this code: | |||
<syntaxhighlight lang="php"> | |||
<!DOCTYPE html> | |||
<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"> | |||
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |||
<title>Welcome to my site!</title> | |||
<!-- Bootstrap --> | |||
<!-- Latest compiled and minified CSS --> | |||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> --> | |||
<!-- <link rel="stylesheet" href="bootstrap.css"> --> | |||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> | |||
<!-- Optional theme --> | |||
<link rel="stylesheet" href="bootstrap-theme.css"> | |||
<!-- weird emoji CSS --> | |||
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet"> | |||
<!-- login css --> | |||
<link rel="stylesheet" href="login.css"> | |||
</head> | |||
<body> | |||
<!-- Fixed navbar --> | |||
<nav class="navbar navbar-dark bg-primary"> | |||
<span class="navbar-brand mb-0 h1">Hello World!</span> | |||
</nav> | |||
<div class="container"> | |||
<div class="card card-container"> | |||
<!-- <img class="profile-img-card" src="//lh3.googleusercontent.com/-6V8xOA6M7BA/AAAAAAAAAAI/AAAAAAAAAAA/rzlHcD0KYwo/photo.jpg?sz=120" alt="" /> --> | |||
<img id="profile-img" class="profile-img-card" src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" /> | |||
<p id="profile-name" class="profile-name-card"></p> | |||
<form class="form-signin" action="login_process.php" method="POST"> | |||
<span id="reauth-email" class="reauth-email"></span> | |||
<input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> | |||
<input name = "password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> | |||
<div id="remember" class="checkbox"> | |||
<label> | |||
<input name="remember" type="checkbox" value="remember-me"> Remember me | |||
</label> | |||
</div> | |||
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">Sign in</button> | |||
</form><!-- /form --> | |||
<a href="#" class="forgot-password"> | |||
Forgot the password? | |||
</a> | |||
</div><!-- /card-container --> | |||
</div> <!-- /container --> | |||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> | |||
<!-- Include all compiled plugins (below), or include individual files as needed --> | |||
<!-- Latest compiled and minified JavaScript --> | |||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> | |||
</body> | |||
</html> | |||
</syntaxhighlight> | |||
</td> | </td> |
Revision as of 21:44, 27 November 2017
|
|
|
|
|
|
|
|
|