├── README.md
├── css
    ├── login.css
    ├── style.css
    └── validation.css
├── layout
    ├── page_footer.php
    └── page_header.php
├── phpinfo
    ├── php_custom.php
    ├── server_variables.php
    └── session_variables.php
└── session
    ├── close_session.php
    ├── index.php
    ├── panel.php
    └── validation.php


/README.md:
--------------------------------------------------------------------------------
 1 | `#php-sessions` `#Assembler Institute`
 2 | 
 3 | Pill Assignment for # Assembler Institute: [PHP SESSIONS WORKSHOP] Workshop 
 4 | 
 5 | Completed following the Assembler Institute workshop:
 6 | (https://github.com/assembler-institute/php-sessions-workshop)
 7 | 
 8 | ## Table of Contents <!-- omit in toc -->
 9 | 
10 | - [Task organization](#taskorganization)
11 | - [Contents](#contents)
12 | - [Resources](#resources)
13 | 
14 | ## Task organization
15 | 
16 | - Practice pages covering server and session variables were completed first, as well as editing php.ini files. 
17 | - Basic design using .css was included, as well as use of 'include/require' to repeated use of headers and footers throughout the assignment.
18 | - The login system was added next, starting with the login page, followed by validation, panel and close_session pages.
19 | 
20 | 
21 | ## Contents
22 | - Use of php, with external styles added in .css.
23 | 
24 | 
25 | ## Resources
26 | 
27 | [PHP Sessions](https://www.php.net/manual/es/reserved.variables.session.php)
28 | [PHP Globals](https://www.php.net/manual/en/reserved.variables.globals.php)
29 | [Assembler Sessions Workshop](https://github.com/assembler-institute/php-sessions-workshop)
30 | 


--------------------------------------------------------------------------------
/css/login.css:
--------------------------------------------------------------------------------
 1 | .login {
 2 |     margin-top: 3rem;
 3 |     width: 100%;
 4 | }
 5 | 
 6 | .login__form {
 7 |     width: 100%;
 8 |     flex-direction: column;
 9 |     margin: auto;
10 | }
11 | 
12 | .login h1 {
13 |     margin-bottom: 1.6rem;
14 |     /* font-weight:400; */
15 |     font-size: 1.4rem;
16 | }
17 | 
18 | fieldset {
19 |     display: flex;
20 |     flex-direction: column;
21 |     align-items: center;
22 |     border: none;
23 |     width: 100%;
24 | }
25 | 
26 | .label {
27 |     display: none;
28 | }
29 | 
30 | input {
31 |     padding: 0.5rem;
32 |     min-width:14rem;
33 |     max-width: 30%;
34 | }
35 | 
36 | input:focus::placeholder {
37 |     color: transparent;
38 | }
39 | 
40 | .form__footer {
41 |     flex-direction: column;
42 | }
43 | 
44 | .btn {
45 |     margin-top: 1.6rem;
46 |     width: fit-content;
47 |     padding: 0.4rem 3rem;
48 |     background-color: var(--color--lines);
49 |     color: white;
50 |     border: 0.1rem solid var(--color--header);
51 |     border-radius: 0.25rem;
52 |     font-size: 1rem;
53 | }
54 | 
55 | .btn:hover {
56 |     border: 0.3rem solid var(--color--header);
57 | }
58 | 
59 | .error__msg {
60 |     margin-top: 1rem;
61 |     font-size: 1.4rem;
62 |     color: firebrick;
63 | }
64 | 
65 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('./login.css');
  2 | @import url('./validation.css');
  3 | 
  4 | 
  5 | * {
  6 |     margin: 0;
  7 |     padding: 0;
  8 |     font-family: sans-serif;
  9 | }
 10 | 
 11 | :root {
 12 |     --color--header: #61A4bc;
 13 |     --color--instr: #6b8ab8;
 14 |     --color--lines: #2d3e58;
 15 |     --color--answer: #7db15b;
 16 |     --border-style: solid 0.3rem var(--color--instr);
 17 | 
 18 | }
 19 | 
 20 | .main {
 21 |     display: flex;
 22 |     flex-direction: column;
 23 |     position: relative;
 24 |     min-height: 100vh;
 25 | }
 26 | 
 27 | .nav {
 28 |     display: flex;
 29 |     flex-direction: row;
 30 |     background-color: var(--color--header);
 31 |     position: sticky;
 32 |     top: 0;
 33 |     height: 8vh;
 34 |     margin: 0;
 35 |     padding: 0;
 36 |     width: 100%;
 37 | }
 38 | 
 39 | .nav__ul {
 40 |     list-style: none;
 41 |     display: flex;
 42 |     justify-self: flex-start;
 43 |     position: absolute;
 44 |     left: 2rem;
 45 |     background-color: var(--color--header);
 46 | }
 47 | 
 48 | .nav__text {
 49 |     color: white;
 50 |     text-decoration: none;
 51 |     text-transform: capitalize;
 52 |     font-weight: bold;
 53 |     padding: 0 1rem;
 54 |     background-color: var(--color--header);
 55 | 
 56 |   }
 57 | 
 58 | .nav__ul li+li:before {
 59 |     color: white;
 60 |     content: ">";
 61 |     font-weight: bold;
 62 |   }
 63 | 
 64 | .nav__text:hover {
 65 |     color: var(--color--lines);
 66 |     text-decoration: underline;
 67 | }
 68 | 
 69 | .nav__header {
 70 |     position: absolute;
 71 |     right: 2rem;
 72 |     font-weight: bold;
 73 |     font-size: 2.2rem;
 74 |     color: var(--color--lines);
 75 | }
 76 | 
 77 | .content {
 78 |     margin: 3rem 3rem;
 79 |     display: flex;
 80 |     flex-direction: column;
 81 |     padding-bottom: 10vh;
 82 | 
 83 | }
 84 | 
 85 | .task {
 86 |     padding: 1rem;
 87 |     background-color: var(--color--lines);
 88 |     color: white;
 89 |     font: bolder;
 90 |     font-size: larger;
 91 |     border-radius: 0.25rem 0.25rem 0 0 ;
 92 | }
 93 | 
 94 | .instr {
 95 |     background-color: #DdDDDD;
 96 |     margin-top: 0;
 97 |     margin-bottom: 1rem;
 98 |     padding: 2rem 3rem;
 99 |     border-radius: 0.25rem;
100 | }
101 | 
102 | .answer {
103 |     margin-top: 1rem;
104 |     overflow-x: scroll;
105 |     background-color: rgb(240, 240, 240);
106 |     border-left: solid 0.4rem var(--color--answer);
107 |     padding: 1rem 2rem;
108 |     box-shadow: 0 0.05rem var(--color--answer);
109 | }
110 | 
111 | .mark {
112 |     font-weight: bold;
113 |     color: var(--color--answer);
114 | }
115 | 
116 | .flex {
117 |     display: flex;
118 |     align-items: center;
119 |     justify-content: center;
120 | }
121 | 
122 | .page__footer {
123 |     background-color: var(--color--header);
124 |     position: absolute;
125 |     bottom: 0;
126 |     display: flex;
127 |     align-items: center;
128 |     justify-content: center;
129 |     height: 10vh;
130 |     width: 100%;
131 |     color: white;
132 |     font-weight: bold;
133 |     font-size: 1.2rem;
134 | 
135 | }
136 | 
137 | 


--------------------------------------------------------------------------------
/css/validation.css:
--------------------------------------------------------------------------------
 1 | 
 2 |     /* Validation and Panel */
 3 |     .panel {
 4 |       flex-direction: column;
 5 |   }
 6 | 
 7 |   .validation__msg {
 8 |     flex-direction: column;
 9 |   }
10 |   
11 |   .validation {
12 |       margin-top: 1rem;
13 |       font-size: 1.6rem;
14 |       text-align: center;
15 |       width: fit-content;
16 |       padding: 1rem 3rem;
17 |     }
18 |   
19 |   .success {
20 |       border: solid 0.2rem var(--color--answer);
21 |     }
22 |   
23 |   .fail {
24 |       border: solid 0.2rem firebrick;
25 |   }
26 | 


--------------------------------------------------------------------------------
/layout/page_footer.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $pageFooter = '
 4 |         </section>
 5 |         <footer class="page__footer">
 6 |             <p>Assembler</p>
 7 |         </footer>
 8 |     </main>
 9 | 
10 | </body>
11 | </html>';
12 | 
13 | echo $pageFooter;
14 | 
15 | ?>


--------------------------------------------------------------------------------
/layout/page_header.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | $pageHeader = '
 4 | <!DOCTYPE html>
 5 | <html lang="en">
 6 | <head>
 7 |     <meta charset="UTF-8">
 8 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 |     <link rel="stylesheet" href="../css/style.css"></link>
11 |     <script src="../src/form.js" defer></script>
12 |     <title>PHP Sessions Pill</title>
13 | </head>
14 | <body>
15 |     <main class="main">
16 |         <nav class="nav flex">
17 |             
18 |             <ul class="nav__ul">
19 |                 <li class="nav__item"><a class="nav__text" href="../session/index.php">Login</a></li> 
20 |                 <li class="nav__item"><a class="nav__text" href="../phpinfo/server_variables.php">server variables</a></li>                
21 |                 <li class="nav__item"><a class="nav__text" href="../phpinfo/session_variables.php">session variables</a></li>                
22 |                 <li class="nav__item"><a class="nav__text" href="../phpinfo/php_custom.php">PHP custom</a></li>
23 |                 
24 |             </ul>
25 |             <header class="nav__header">PHP Sessions</header>
26 |         </nav>
27 |         <section class="content">';
28 | 
29 | echo $pageHeader;
30 | 
31 | ?>
32 | 
33 | 
34 | 


--------------------------------------------------------------------------------
/phpinfo/php_custom.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     require '../layout/page_header.php';
 3 | ?>
 4 | 
 5 |     <!-- sesion analysis with $_SESSION -->
 6 |     <header class='task'>Find the function that shows your php.ini path.</header>
 7 |     <section class="instr">
 8 |         <ul>
 9 |             <li>Change the time zone to Europe / Madrid.</li>
10 |             <li>Maximum execution time "max_execution_time" from 30 to 60 seconds.</li>
11 |             <li>Add a comment at the end of the file.</li>
12 |         </ul>
13 |     </section>    
14 |     <?php
15 |     echo '<div class="answer">';
16 |     $inipath = php_ini_loaded_file();
17 |     
18 |     if (!$inipath) {
19 |         echo 'Your php.ini cannot be loaded.';
20 |     } else {
21 |         echo "Your php.ini path is: <br><br> $inipath";
22 |     }    
23 |     echo '</div>';
24 | 
25 |     echo '<div class="answer">';
26 |     echo "<pre>
27 |     echo ini_get('date.timezone');
28 |     ini_set('date.timezone');
29 |     echo ini_get('date.timezone');</pre><br>";
30 |     echo ini_get('date.timezone') . ' changes to...';
31 |     ini_set('date.timezone', 'Europe/Madrid');
32 |     echo '<p class="mark">';
33 |     echo ini_get('date.timezone');
34 |     echo '<p>';
35 |     echo '<br>other options: use date_default_timezone_set(), or edit file manually.';
36 |     echo '</div>';
37 | 
38 |     echo '<div class="answer">';
39 |     echo "<pre>
40 |     echo ini_get('max_execution_time');
41 |     ini_set('max_execution_time', '60');
42 |     echo ini_get('max_execution_time');</pre><br>";
43 |     echo ini_get('max_execution_time') . ' changes to...';
44 |     ini_set('max_execution_time', '60');
45 |     echo '<p class="mark">';
46 |     echo ini_get('max_execution_time');
47 |     echo '<p>';
48 |     echo '</div>';
49 | 
50 |     echo '<div class="answer">';
51 |     echo "echo phpinfo();<br><br>";
52 |     // $phpinfo = print_r(phpinfo());
53 |     // echo '<i>Readout of phpinfo() would appear here.</i>';
54 |     echo phpinfo();
55 |     echo '</div>';
56 |     
57 |     require '../layout/page_footer.php';


--------------------------------------------------------------------------------
/phpinfo/server_variables.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     require '../layout/page_header.php';
 3 | ?>
 4 | 
 5 |     <!-- server analysis with $_SERVER -->
 6 |     <header class='task'>Using local PHP server variable $_SERVER</header>
 7 | 
 8 |     <?php
 9 |     echo '<div class="answer">';
10 | 
11 |     echo '<pre>';
12 |     print_r($_SERVER);
13 |     echo '</pre>';
14 |     echo '</div>';
15 | 
16 | 
17 |     require '../layout/page_footer.php';


--------------------------------------------------------------------------------
/phpinfo/session_variables.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     require '../layout/page_header.php';
 3 | ?>
 4 | 
 5 |     <header class='task'>Start a session and dump the content of the $_SESSION variable.</header>
 6 |     <section class="instr">Add this to script:<br>
 7 |         <pre>
 8 |         session_start();
 9 |         $_SESSION['browser'] = $_SERVER['HTTP_USER_AGENT'];
10 |         $_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
11 |         $_SESSION['time'] = time();
12 |         echo '&lt;pre&gt;;
13 |         print_r($_SESSION);
14 |     </section>
15 |     
16 |     <?php
17 |     
18 |     echo '<div class="answer">';
19 |     
20 |     $_SESSION['browser'] = $_SERVER['HTTP_USER_AGENT'];
21 |     $_SESSION['ip'] = $_SERVER['REMOTE_ADDR'];
22 |     $_SESSION['time'] = time();
23 |     
24 |     echo '<pre>';
25 |     print_r($_SESSION);
26 |     
27 |     echo '</div>';
28 |    
29 | 
30 |     require '../layout/page_footer.php';
31 | 


--------------------------------------------------------------------------------
/session/close_session.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <?php
 3 |     session_start();
 4 |     require '../layout/page_header.php';
 5 | 
 6 | // unset all session variables
 7 | // can also use session_unset();
 8 | unset($_SESSION);
 9 | 
10 | // destroy session cookie
11 | if (ini_get("session.use_cookies")) {
12 |     $params = session_get_cookie_params();
13 |     setcookie(
14 |         session_name(),
15 |         '',
16 |         time() - 42000,
17 |         $params["path"],
18 |         $params["domain"],
19 |         $params["secure"],
20 |         $params["httponly"]
21 |     );
22 | }
23 | 
24 | // destroy the session
25 | session_destroy();
26 | header('Location:./index.php?logout=true');
27 | 
28 | 
29 | require '../layout/page_footer.php';
30 | 
31 | ?>


--------------------------------------------------------------------------------
/session/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     require '../layout/page_header.php';
 3 |     if (isset($_GET['loginerr'])) {
 4 |         $loginError = true;
 5 |     }
 6 |     if (isset($_GET['logout'])) {
 7 |         $logout = true;
 8 |     }
 9 |     if (isset($_GET['redirect'])) {
10 |         $redirect = true;
11 |     };
12 | ?>
13 | 
14 |         <header class='task'>Creating a login page in PHP</header>
15 |         <section class="instr">
16 |             <ul>
17 |                 <li>require user and password fields and a login button.</li>
18 |                 <li>The fields must be in a form and point the action to a validation script.</li>
19 |                 <li>If the user is already logged in, they will be redirected to the panel.</li>
20 |             </ul>
21 |         </section>
22 |         <section class="login">
23 |             <form method="POST" action="./validation.php" id="loginForm" class="login__form flex">
24 |                 <h1>Please sign in:</h1>
25 |                 <fieldset id="inputFieldset class="input__fieldset>
26 |                     <label for="inputEmail" class="label">Email address</label>
27 |                     <input id="inputEmail" type="email" name="email" placeholder="username@domain.com">
28 |                     <label for="inputPassword" class="label">Password</label>
29 |                     <input id="inputPassword" type="password" name="password" placeholder="password">
30 |                 </fieldset>
31 |                 <footer id="formFooter" class="form__footer flex">
32 |                     <button id="inputBtn" class="input__btn btn" type="submit">Sign in</button>
33 |                 </footer>
34 |                 <?php
35 |                     if (isset($loginError)) {
36 |                         echo '<pre>
37 |                             <section id="formError" class="form__error flex">
38 |                                 <p class="error__msg">Your email or password is incorrect.</p>
39 |                             </section></pre>';
40 |                     } else if (isset($logout)) {
41 |                         echo '<pre>
42 |                             <section id="formError" class="form__error flex">
43 |                                 <p class="error__msg">You are currently logged out.</p>
44 |                             </section></pre>';
45 |                     } else if (isset($redirect)) {
46 |                         echo '<pre>
47 |                             <section id="formError" class="form__error flex">
48 |                                 <p class="error__msg">That is an internal page. You have been redirected.</p>
49 |                             </section></pre>';
50 |                     };
51 |                 ?>
52 |             </form>
53 |         </section>
54 |     </section>
55 | 
56 | <?php
57 |     require '../layout/page_footer.php';
58 | ?>


--------------------------------------------------------------------------------
/session/panel.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <?php
 3 |     session_start();
 4 |     require '../layout/page_header.php';
 5 | ?>
 6 | 
 7 |     <header class='task'>Create a panel.php file. This panel should:</header>
 8 |     <section class="instr">
 9 |         <ul>
10 |             <li>indicate whether the user is already logged in or not.</li>
11 |             <li>In case they are, require a button to log out, destroy the current session and then redirect you to the "index.php" file.</li>
12 |             <li>If not logged in, alert the user that this is a private section.</li>
13 |         </ul>
14 |     </section>
15 |     <?php
16 | 
17 |     if (!isset($_SESSION["email"])) {
18 |         // Similar to timeout, by using header('Refresh: #seconds; URL=url');
19 |         header('Location:./index.php?redirect=true');
20 |     } else {
21 |         $currentEmail = $_SESSION['email'];
22 |         echo "<pre>
23 |             <section class='validation__msg flex'>
24 |                 <div class='panel flex'>
25 |                 <p class='validation success'>Welcome $currentEmail!</p>
26 |                 <p class='validation'>You are currently logged in.</p>
27 |                     <form method='GET' action='./close_session.php' id='logoutForm' class='logout__form flex'>
28 |                         <button id='logoutBtn' class='btn logout__btn'>Log out</button>
29 |                     </form>
30 |                 </div>
31 |             <section></pre>";
32 |     }
33 | 
34 |     require '../layout/page_footer.php';
35 | ?>
36 | 
37 | 
38 | 


--------------------------------------------------------------------------------
/session/validation.php:
--------------------------------------------------------------------------------
 1 | 
 2 | <?php
 3 |     require '../layout/page_header.php'; 
 4 | 
 5 | // All login validations must be done in this file.
 6 | // Use the POST method and redirect the user depending on whether the login is correct or not.
 7 | 
 8 | // Go through $_POST array and set value for each key variable, same as e.g. $email = $_POST["email"]
 9 | foreach($_POST as $key => $value) {
10 |     ${$key} = $value;
11 | }
12 | 
13 | 
14 | $dbEmail = "user@user.com";
15 | $dbPass = "user123";
16 | $dbPassEnc = password_hash($dbPass, PASSWORD_DEFAULT);
17 | 
18 | if ($email === $dbEmail && password_verify($dbPass, $dbPassEnc)) {
19 |     // pw is good
20 |     session_start();                        // start session
21 |     $_SESSION["email"] = $email;            // create session variable we can use from panel page
22 |     header('Location: ./panel.php');
23 |         // move to panel page
24 | } else {
25 |     header('Location: ./index.php?loginerr=true');
26 | }
27 | 
28 | 
29 |     require '../layout/page_footer.php';
30 | ?>


--------------------------------------------------------------------------------