The JAMS. Here are files, links, and other useful information to help you with the JAMS, completed scripts, downloads, images, etc.
Here is an SQL file that will create the "list" table: list.sql
If you have not yet created the "list" table, you can use phpMyAdmin, select your database, then go to the "Import" tab. Click the "Choose File" button and navigate to the downloaded SQL file, and the SQL script will create the table and add the data.
If you have created the table structure (defined the columns, etc.), you can open the SQL file in an editor, copy the INSERT statement in the script (with all the records), and paste it into the phpMyAdmin SQL window. (Use the SQL tab). Click "Go" and the data will be inserted into your existing table (providing your table columns match the ones in the exercise).
You can copy the SQL script or the INSERT query below:
(list.sql)-- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ -- -- Host: localhost:8889 -- Generation Time: Apr 01, 2020 at 04:21 PM -- Server version: 5.7.23 -- PHP Version: 7.2.10 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `ampjam_db` -- -- -------------------------------------------------------- -- -- Table structure for table `list` -- CREATE TABLE `list` ( `id` int(11) NOT NULL, `item` varchar(255) NOT NULL, `description` text NOT NULL, `image` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Dumping data for table `list` -- INSERT INTO `list` (`id`, `item`, `description`, `image`) VALUES (1, 'Tyrannosaurus Rex', 'Tyrannosaurus, meaning \"tyrant lizard\", from the Ancient Greek tyrannos, \"tyrant\", and sauros, \"lizard\" is a genus of coelurosaurian theropod dinosaur. It also had a tremendous bite force, the strongest of any Dinosaur and living terrestrial animal. Its bite force reached up to 12,800 pounds (roughly 5805 Kilograms).', 't_rex.jpg'), (2, 'Spinosaurus', 'Spinosaurus is a genus of theropod dinosaur that lived in what now is North Africa, during the lower Albian to lower Cenomanian stages of the Cretaceous period, about 112 to 97 million years ago.', 'spinosaurus.jpg'), (3, 'Velociraptor', 'Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period.', 'velociraptor.jpg'), (4, 'Triceratops', 'Triceratops is a genus of herbivorous ceratopsid dinosaur that first appeared during the late Maastrichtian stage of the late Cretaceous period, about 68 million years ago in what is now North America.', 'triceratops.jpg'), (5, 'Stegosaurus', 'Stegosaurus is a type of armored dinosaur. Their fossil bones have been found in rocks dated to the Late Jurassic period, between 155 and 150 million years ago, in the western United States and Portugal.', 'stegasaurus.jpg'), (6, 'Parasaurolophus', 'Parasaurolophus is a genus of ornithopod dinosaur that lived in what is now North America during the Late Cretaceous Period, about 76.5-74.5 million years ago.', 'parasaurolophus.jpg'), (7, 'Ankylosaurus', 'Ankylosaurus is a genus of armored dinosaur. Fossils of Ankylosaurus have been found in geological formations dating to the very end of the Cretaceous Period, between about 68-66 million years ago, in western North America, making it among the last of the non-avian dinosaurs.', 'ankylosaurus.jpg'), (8, 'Brachiosaurus', 'Brachiosaurus is a genus of sauropod dinosaur that lived in North America during the Late Jurassic, about 154-153 million years ago.', 'brachiosaurus.jpg'), (9, 'Carcharodontosaurus', 'Carcharodontosaurus is a genus of carnivorous carcharodontosaurid dinosaurs that existed between 100 and 94 million years ago, during the Cenomanian stages of the mid-Cretaceous Period.', 'carcharodontosaurus.jpg'), (10, 'Allosaurus', 'Allosaurus is a genus of large theropod dinosaur that lived 155 to 150 million years ago during the late Jurassic period.', 'allosaurus.jpg'); -- -- Indexes for dumped tables -- -- -- Indexes for table `list` -- ALTER TABLE `list` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `list` -- ALTER TABLE `list` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
(list.sql)INSERT INTO `list` (`id`, `item`, `description`, `image`) VALUES (1, 'Tyrannosaurus Rex', 'Tyrannosaurus, meaning \"tyrant lizard\", from the Ancient Greek tyrannos, \"tyrant\", and sauros, \"lizard\" is a genus of coelurosaurian theropod dinosaur. It also had a tremendous bite force, the strongest of any Dinosaur and living terrestrial animal. Its bite force reached up to 12,800 pounds (roughly 5805 Kilograms).', 't_rex.jpg'), (2, 'Spinosaurus', 'Spinosaurus is a genus of theropod dinosaur that lived in what now is North Africa, during the lower Albian to lower Cenomanian stages of the Cretaceous period, about 112 to 97 million years ago.', 'spinosaurus.jpg'), (3, 'Velociraptor', 'Velociraptor is a genus of dromaeosaurid theropod dinosaur that lived approximately 75 to 71 million years ago during the later part of the Cretaceous Period.', 'velociraptor.jpg'), (4, 'Triceratops', 'Triceratops is a genus of herbivorous ceratopsid dinosaur that first appeared during the late Maastrichtian stage of the late Cretaceous period, about 68 million years ago in what is now North America.', 'triceratops.jpg'), (5, 'Stegosaurus', 'Stegosaurus is a type of armored dinosaur. Their fossil bones have been found in rocks dated to the Late Jurassic period, between 155 and 150 million years ago, in the western United States and Portugal.', 'stegasaurus.jpg'), (6, 'Parasaurolophus', 'Parasaurolophus is a genus of ornithopod dinosaur that lived in what is now North America during the Late Cretaceous Period, about 76.5-74.5 million years ago.', 'parasaurolophus.jpg'), (7, 'Ankylosaurus', 'Ankylosaurus is a genus of armored dinosaur. Fossils of Ankylosaurus have been found in geological formations dating to the very end of the Cretaceous Period, between about 68-66 million years ago, in western North America, making it among the last of the non-avian dinosaurs.', 'ankylosaurus.jpg'), (8, 'Brachiosaurus', 'Brachiosaurus is a genus of sauropod dinosaur that lived in North America during the Late Jurassic, about 154-153 million years ago.', 'brachiosaurus.jpg'), (9, 'Carcharodontosaurus', 'Carcharodontosaurus is a genus of carnivorous carcharodontosaurid dinosaurs that existed between 100 and 94 million years ago, during the Cenomanian stages of the mid-Cretaceous Period.', 'carcharodontosaurus.jpg'), (10, 'Allosaurus', 'Allosaurus is a genus of large theropod dinosaur that lived 155 to 150 million years ago during the late Jurassic period.', 'allosaurus.jpg');
The LIST.
Here are completed files for The LIST: n413_list.zip
Database connection script: n413connect.zip
Images for The LIST exercise: list_images.zip
Here are completed versions of the scripts used for this project:
(n413connect.php)
<?php
$dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306'
$dbuser = 'root';
$dbpwd = 'root'; //XAMPP password is ''
$dbname = 'ampjam_db';
$link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname);
if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); }
?>
(list_1.php)
<?php
include("n413connect.php");
$sql = "SELECT item FROM `list`";
$result = mysqli_query($link, $sql);
while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){
echo $row["item"].'<br/>';
}
?>
(list_2.php)
<?php
include("n413connect.php");
$sql = "SELECT item, image FROM `list`";
$result = mysqli_query($link, $sql);
while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){
echo '<img src="'.$row["image"].'" style="height:75px;margin-right:20px;" />'.$row["item"].'<br/>';
}
?>
(list_3.php)
<?php
include("n413connect.php");
$sql = "SELECT id, item, description, image FROM `list`";
$result = mysqli_query($link, $sql);
$records = array();
while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){
$records[] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam List Project</title>
<style>
body { font-family:Arial; }
img { display:inline-block;vertical-align:top;height:75px;margin-left:50px;margin-right:20px;margin-bottom:10px; }
.desc { display:inline-block;width:60%;font-family:Arial;margin-bottom:10px; }
</style>
</head>
<body>
<h2>Full Stack Amp Jam List Project</h2>
<?php
foreach ($records as $record){
echo '
<div>
<img src="images/'.$record["image"].'" />
<div class="desc"> <b>'.$record["item"].'</b> '.$record["description"].'</div>
</div>';
}
?>
</body>
</html>
(list_4.php)
<?php
include("n413connect.php");
$sql = "SELECT id, item, description, image FROM `list`";
$result = mysqli_query($link, $sql);
$records = array();
while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){
$records[] = $row;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam List Project</title>
<style>
body { font-family:Arial; }
img { display:inline-block;vertical-align:top;height:75px;margin-left:50px;margin-right:20px;margin-bottom:10px; }
.desc { display:inline-block;width:60%;font-family:Arial;margin-bottom:10px;cursor:pointer;}
</style>
</head>
<body>
<h2>Full Stack Amp Jam List Project</h2>
<?php
foreach ($records as $record){
echo '
<div>
<img src="images/'.$record["image"].'" />
<div class="desc" onclick="show_alert('.$record["id"].', \''.$record["item"].'\');"> <b>'.$record["item"].'</b> '.$record["description"].'</div>
</div>';
}
?>
</body>
<script>
function show_alert(id,item){
alert("You have clicked Item "+id+", "+item+".");
}
</script>
</html>
The FORM.
Here are completed files for The FORM: n413_form.zip
Database connection script: n413connect.zip
SQL script for the FORM exercise: form_responses.sql
Here are completed versions of the scripts used for this project:
(n413connect.php)
<?php
$dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306'
$dbuser = 'root';
$dbpwd = 'root'; //XAMPP password is ''
$dbname = 'ampjam_db';
$link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname);
if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); }
?>
(form_1.html)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam Form Project</title>
<style>
body { font-family:Arial; }
h2 { text-align:center;margin-top:50px; }
#form-container { width:30%;margin-left:40%;margin-top:100px; }
input { font-size:18px;margin-bottom:20px; }
textarea{height:100px;width:300px;margin-bottom:30px;font-size:16px; }
#submit {float:right;}
</style>
</head>
<body>
<h2>Full Stack Amp Jam Form Project</h2>
<form method="POST" action="n413post.php">
<div id="form-container">
Name: <input type="text" id="name" name="name" value="" placeholder="Enter Name" required/><br/>
E-mail: <input type="email" id="email" name="email" value="" placeholder="Enter E-mail" required/><br/>
Comment: <textarea id="comment" name="comment" value="" placeholder="Add your comment here:"></textarea><br/>
<input type="submit" id="submit" value="Submit" />
</div>
</form>
</body>
</html>
(form_responses.sql)
-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: localhost:8889
-- Generation Time: Apr 23, 2020 at 05:07 PM
-- Server version: 5.7.23
-- PHP Version: 7.2.10
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `ampjam_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `form_responses`
--
CREATE TABLE `form_responses` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`comment` text NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `form_responses`
--
INSERT INTO `form_responses` (`id`, `name`, `email`, `comment`, `timestamp`) VALUES
(1, 'Oscar Wilde', 'oscar@wilde.com', 'Be yourself; everyone else is already taken.', '2020-04-19 18:05:09'),
(2, 'Albert Einstein', 'al@emc2.com', 'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe.', '2020-04-19 18:05:53'),
(3, 'Frank Zappa', 'z@eatyellowsnow.com', 'So many books, so little time.', '2020-04-19 18:07:22'),
(4, 'Mark Twain', 'mark@twain.com', 'If you tell the truth, you don\'t have to remember anything.', '2020-04-19 18:09:06'),
(5, 'John Lennon', 'John@fabfour.com', 'Life is what happens when you\'re busy making other plans.', '2020-04-19 18:11:45'),
(6, 'Dr. Strangelove', 'strange@love.com', 'Gentlemen, you can\'t fight in here! This is the war room!', '2020-04-19 18:31:42'),
(7, 'Groot', 'groot@guardians.com', 'I am Groot.', '2020-04-19 18:32:35');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `form_responses`
--
ALTER TABLE `form_responses`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `form_responses`
--
ALTER TABLE `form_responses`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
(n413post.php)
<?php
include("n413connect.php");
function sanitize($item){
global $link;
$item = html_entity_decode($item);
$item = trim($item);
$item = stripslashes($item);
$item = strip_tags($item);
$item = mysqli_real_escape_string( $link, $item );
return $item;
}
$name = "";
$email = "";
$comment = "";
if(isset($_POST["name"])) { $name = sanitize($_POST["name"]); }
if(isset($_POST["email"])) { $email = sanitize($_POST["email"]); }
if(isset($_POST["comment"])) { $comment = sanitize($_POST["comment"]); }
$sql = "INSERT INTO `form_responses` (`id`, `name`, `email`, `comment`, `timestamp`)
VALUES (NULL, '".$name."', '".$email."', '".$comment."', CURRENT_TIMESTAMP)";
$result = mysqli_query($link, $sql);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam Form Project</title>
<style>
body { font-family:Arial; }
h2 { text-align:center;margin-top:50px; }
#message-container { width:30%;margin-left:40%;margin-top:100px; }
.signoff{ float:right;font-style:italic;margin-top:30px; }
</style>
</head>
<body>
<h2>Full Stack Amp Jam Form Project</h2>
<div id="message-container">
<?php
if($result){
echo '<p>Thank you for submitting your comment. <br/>';
}else{
echo '<p>Sorry, but something went wrong. Please try again later. <br/>';
}
?>
<span class="signoff">The Web Site Team</span></p>
</div>
</body>
</html>
The SITE.
Here are completed files for The SITE: n413_site.zip
Here are the resources for the SITE Project:
Bootstrap 4.4.1
Download Bootstrap 4.4.1 JS files: bootstrap.min.js and bootstrap.min.js.map
Download Bootstrap 4.4.1 CSS files: bootstrap.min.css and bootstrap.min.css.map
Download Bootstrap 4 from getbootstrap.com
Download jQuery 3.6.2 from jquery.com
Images
Images for The LIST exercise: list_images.zip
Scripts
Database connection script: n413connect.zip
SQL script to create the "list" table: list.sql
Here are completed versions of the scripts used for this project:
(n413connect.php)<?php $dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306' $dbuser = 'root'; $dbpwd = 'root'; //XAMPP password is '' $dbname = 'ampjam_db'; $link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname); if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); } ?>
(head.php)<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <title>Full Stack Amp Jam Site Project</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.4.1.min.js" type="application/javascript"></script> <script src="js/bootstrap.min.js" type="application/javascript"></script> <script src="js/bootstrap.min.js.map" type="application/javascript"></script> <script> function navbar_update(this_page){ $("#"+this_page+"_item").addClass('active'); $("#"+this_page+"_link").append(' <span class="sr-only">(current)</span>'); } <script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="index.php">AMP JAM Site</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li id="home_item" class="nav-item"> <a id="home_link" class="nav-link" href="index.php">Home</a> </li> <li id="list_item" class="nav-item"> <a id="list_link" class="nav-link" href="list.php">The List</a> </li> <li id="contact_item" class="nav-item"> <a id="contact_link" class="nav-link" href="form.php">Contact</a> </li> </ul> </div> </nav>
(index.php)<?php include("n413connect.php"); include("head.php"); $sql = "SELECT * FROM `list` ORDER BY RAND() LIMIT 1"; $result = mysqli_query($link, $sql); $row = mysqli_fetch_array($result, MYSQLI_BOTH); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h1>AMP JAM Site</h1> </div> <!-- /col-12 --> </div> <!-- /row --> <div id="subtitle" class="row"> <div class="col-12 text-center"> <h3>The Dinosaur Top-Ten List</h3> </div> <!-- /col-12 --> </div> <!-- /row --> <div id="content" class="row mt-5"> <div class="col-1"></div><!-- spacer --> <div class="col-2 mt-5"> <!-- navigation --> <a href="list.php" ><h4>Top Ten List</h4></a> <a href="form.php" ><h4>Contact Us</h4></a> </div> <div class="col-6 text-center"> <!-- image --> <a href="list.php"> <img src="images/<?php echo $row["image"]; ?>" width="100%"; /><br/> <h2><?php echo $row["item"]; ?></h2></a> </div><!-- image placeholder --> </div> <!-- /row --> </div> <!-- /container-fluid --> </body> <script> var this_page = "home"; var page_title = "AMP JAM Site | Dinosaur Top Ten"; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //ready </script> </html>
(list.php)<?php include("n413connect.php"); include("head.php"); $sql = "SELECT id, item, description, image FROM `list`"; $result = mysqli_query($link, $sql); $records = array(); while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){ $records[] = $row; } ?> <style> .cursor-pointer {cursor:pointer;} </style> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Dinosaurs Top 10 List</h2> </div> <!-- /.col-12 --> </div> <!-- /.row --> <?php foreach ($records as $record){ echo ' <div class="row record-item mt-3 cursor-pointer" data-id="'.$record["id"].'" data-item="'.$record["item"].'"> <div class="col-1"></div> <!-- spacer --> <div class="col-2"><img src="images/'.$record["image"].'" width="100%"/></div> <div class="col-7"><b>'.$record["item"].'</b> '.$record["description"].'</div> </div> <!-- /.row -->'; } //foreach ?> </div> <!-- /.container-fluid --> </body> <script> var this_page = "list"; var page_title = 'AMP JAM Site | Dinosaur Top Ten List'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); $(".record-item").on("click", function(){ var id = $(this).data('id'); show_detail(id); }); //on() }); //document.ready function show_detail(id){ window.location.assign("detail.php?id="+id); } </script> </html>
(detail.php)<?php include("n413connect.php"); include("head.php"); $id = intval($_GET["id"]); $sql = "SELECT * FROM `list` WHERE id = '".$id."'"; $result = mysqli_query($link, $sql); $row = mysqli_fetch_array($result, MYSQLI_BOTH); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <?php if($row){ echo '<h1>'.$row["item"].'</h1>'; }else{ echo '<h2>There has been a database error.</h2>'; } ?> </div> <!-- /.col-12 --> </div> <!-- /.row --> <?php if($row){ echo ' <div id="content" class="row mt-3"> <div class="col-1"></div> <!-- spacer --> <div class="col-5"><img src="images/'.$row["image"].'" width="100%"/></div> <div class="col-5 h3 text-muted">'.$row["description"].'</div> </div> <!-- /.row -->'; } ?> <div class="row mt-4"> <div class="col-12 text-center"> <a href="list.php"><button class="btn btn-primary">Back to The List</button></a> </div> <!-- /.col-12 --> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </body> </html>
(form.php)<?php include("head.php"); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Full Stack Amp Jam Contact Form Project</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <form method="POST" action="n413post.php"> <div class="row mt-5"> <div class="col-4"></div> <!-- spacer --> <div id="form-container" class="col-4"> Name: <input type="text" id="name" name="name" class="form-control" value="" placeholder="Enter Name" required/><br/> E-mail: <input type="email" id="email" name="email" class="form-control" value="" placeholder="Enter E-mail" required/><br/> Comment: <textarea id="comment" name="comment" class="form-control" value="" placeholder="Add your comment here:"></textarea><br/> <button type="submit" id="submit" class="btn btn-primary float-right">Submit</button> </div> <!-- /#form-container --> </div> <!-- /.row --> </form> </body> <script> var this_page = "contact"; var page_title = 'AMP JAM Site | Contact Form'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
(n413post.php)<?php include("n413connect.php"); include("head.php"); function sanitize($item){ global $link; $item = html_entity_decode($item); $item = trim($item); $item = stripslashes($item); $item = strip_tags($item); $item = mysqli_real_escape_string( $link, $item ); return $item; } $name = ""; $email = ""; $comment = ""; if(isset($_POST["name"])) { $name = sanitize($_POST["name"]); } if(isset($_POST["email"])) { $email = sanitize($_POST["email"]); } if(isset($_POST["comment"])) { $comment = sanitize($_POST["comment"]); } $sql = "INSERT INTO `form_responses` (`id`, `name`, `email`, `comment`, `timestamp`) VALUES (NULL, '".$name."', '".$email."', '".$comment."', CURRENT_TIMESTAMP)"; $result = mysqli_query($link, $sql); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Full Stack Amp Jam Contact Form Project</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <div class="row mt-5"> <div class="col-4"></div> <!-- spacer --> <div id="message-container" class="col-4 text-center"> <?php if($result){ echo '<p>Thank you for submitting your comment. <br/>'; }else{ echo '<p>Sorry, but something went wrong. Please try again later. <br/>'; } ?> <span class="mt-5 float-right"><i>The Web Site Team</i></span></p> </div> <!-- /.message-container --> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </body> <script> var this_page = "contact"; var page_title = 'AMP JAM Site | Contact Form'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
The ACCOUNT.
Here are completed files for The ACCOUNT: n413_account.zip
Scripts
Database connection script: n413connect.zip
SQL script to create the "form_responses" table: form_responses.sql
SQL script to create the "users" table: users.sql
Here are completed versions of the scripts used for this project:
(n413connect.php)<?php $dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306' $dbuser = 'root'; $dbpwd = 'root'; //XAMPP password is '' $dbname = 'ampjam_db'; $link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname); if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); } ?>
(head.php)<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> <title>Full Stack Amp Jam Site Project</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-3.4.1.min.js" type="application/javascript"></script> <script src="js/bootstrap.min.js" type="application/javascript"></script> <script src="js/bootstrap.min.js.map" type="application/javascript"></script> <script> function navbar_update(this_page){ $("#"+this_page+"_item").addClass('active'); $("#"+this_page+"_link").append(' <span class="sr-only">(current)</span>'); } <script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="index.php">AMP JAM Site</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li id="home_item" class="nav-item"> <a id="home_link" class="nav-link" href="index.php">Home</a> </li> <li id="list_item" class="nav-item"> <a id="list_link" class="nav-link" href="list.php">The List</a> </li> <li id="contact_item" class="nav-item"> <a id="contact_link" class="nav-link" href="form.php">Contact</a> </li> </ul> <ul id="right_navbar" class="navbar-nav ml-auto mr-5"> <?php session_start(); if(isset($_SESSION["user_id"])){ if($_SESSION["role"] > 0){ echo ' <li id="messages_item" class="nav-item"> <a id="messages_link" class="nav-link" href="messages.php">Messages</a> </li>'; } // end - if($_SESSION["role"] > 0) echo ' <li id="logout_item" class="nav-item"> <a id="logout_link" class="nav-link" href="logout.php">Log-Out</a> </li>'; }else{ echo ' <li id="login_item" class="nav-item"> <a id="login_link" class="nav-link" href="login.php">Log-In</a> </li>'; } // end - else if(isset($_SESSION["user_id"])) ?> </ul> </div> </nav>
(messages.php)<?php include("n413connect.php"); include("head.php"); $messages = array(); $sql = "SELECT * FROM `form_responses` ORDER BY timestamp DESC"; $result = mysqli_query($link, $sql); while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)){ $messages[] = $row; } ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <?php if(count($messages) > 0){ echo '<h1>Contact Form Messages</h1>'; }else{ echo '<h2>There are no messages at this time.</h2>'; } ?> </div> <!-- /.col-12 --> </div> <!-- /.row --> <?php if($_SESSION["role"] > 0){ foreach($messages as $message){ echo' <div class="row mt-3"> <div class="col-2"></div> <!-- spacer --> <div class="col-2">'.$message["name"].'<br/> <a href="mailto:'.$message["email"].'">'.$message["email"].'</a><br/> ['.$message["timestamp"].'] </div> <div class="col-6">'.$message["comment"].'</div> </div> <!-- /.row -->'; } //foreach }else{ echo' <div class="row mt-3"> <div class="col-12 text-center"><h3>You are not authorized to view the messages.</h3></div> </div> <!-- /.row -->'; } //else if ?> </div> <!-- /.container-fluid --> </body> <script> var this_page = "messages"; var page_title = 'AMP JAM Site | Messages'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
(users.sql)-- phpMyAdmin SQL Dump -- version 4.8.3 -- https://www.phpmyadmin.net/ -- -- Host: localhost:8889 -- Generation Time: Apr 18, 2020 at 06:25 PM -- Server version: 5.7.23 -- PHP Version: 7.2.10 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `ampjam_db` -- -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE `users` ( `id` int(11) NOT NULL, `username` varchar(255) NOT NULL, `email` varchar(255) NOT NULL, `password` text NOT NULL, `role` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Indexes for dumped tables -- -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
(login.php)<?php include("head.php"); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Full Stack Amp Jam Log-in</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <form method="POST" action="n413auth.php"> <div class="row mt-5"> <div class="col-4"></div> <!-- spacer --> <div id="form-container" class="col-4"> User Name: <input type="text" id="username" name="username" class="form-control" value="" placeholder="Enter User Name" required/><br/> Password: <input type="password" id="password" name="password" class="form-control" value="" placeholder="Enter Password" required/><br/> <button type="submit" id="submit" class="btn btn-primary float-right">Submit</button> </div> <!-- /#form-container --> </div> <!-- /.row --> </form> </body> <script> var this_page = "login"; var page_title = 'AMP JAM Site | Login'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
(n413auth.php)<?php include("n413connect.php"); function sanitize($item){ global $link; $item = html_entity_decode($item); $item = trim($item); $item = stripslashes($item); $item = strip_tags($item); $item = mysqli_real_escape_string( $link, $item ); return $item; } $username = ""; $password = ""; if(isset($_POST["username"])) { $username = sanitize($_POST["username"]); } if(isset($_POST["password"])) { $password = sanitize($_POST["password"]); } $sql= "SELECT * FROM `users` WHERE username = '".$username."' AND password = '".$password."' LIMIT 1"; $result = mysqli_query($link, $sql); $row = mysqli_fetch_array($result, MYSQLI_BOTH); if($row){ session_start(); $_SESSION["user_id"] = $row["id"]; $_SESSION["role"] = $row["role"]; } include("head.php"); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Full Stack Amp Jam Log-in</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <div class="row mt-5"> <div class="col-4"></div> <!-- spacer --> <div class="col-4 text-center"> <?php if(isset($_SESSION["user_id"])){ echo '<h3>You are now Logged In.</h3>'; }else{ echo '<h3>The Log-In was not successful.</h3> <a href="login.php"><button class="btn btn-primary mt-5">Try Again</button></a>'; } ?> </div> <!-- /.col-4 --> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </body> <script> var this_page = "login"; var page_title = 'AMP JAM Site | Login'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
(logout.php)<?php session_start(); unset($_SESSION); session_destroy(); include("head.php"); ?> <div class="container-fluid"> <div id="headline" class="row mt-5"> <div class="col-12 text-center"> <h2>Full Stack Amp Jam Log-out</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <div class="row mt-5"> <div class="col-4"></div> <!-- spacer --> <div class="col-4 text-center"> <h3>You are now Logged Out.</h3> <a href="login.php"><button class="btn btn-primary mt-5">Log In</button></a> </div> <!-- /.col-4 --> </div> <!-- /.row --> </div> <!-- /.container-fluid --> </body> <script> var this_page = "logout"; var page_title = 'AMP JAM Site | Logout'; $(document).ready(function(){ document.title = page_title; navbar_update(this_page); }); //document.ready </script> </html>
The PASSWORD.
Here are completed files for The PASSWORD: n413_pw.zip
Scripts
Database connection script: n413connect.zip
SQL script to create the "form_responses" table: form_responses.sql
SQL script to create the "users_hash" table: users_hash.sql
Here are completed versions of the scripts used for this project:
(n413connect.php)
<?php
$dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306'
$dbuser = 'root';
$dbpwd = 'root'; //XAMPP password is ''
$dbname = 'ampjam_db';
$link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname);
if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); }
?>
(head.php)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam Site Project</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.4.1.min.js" type="application/javascript"></script>
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<script src="js/bootstrap.min.js.map" type="application/javascript"></script>
<script>
function navbar_update(this_page){
$("#"+this_page+"_item").addClass('active');
$("#"+this_page+"_link").append(' <span class="sr-only">(current)</span>');
}
<script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.php">AMP JAM Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li id="home_item" class="nav-item">
<a id="home_link" class="nav-link" href="index.php">Home</a>
</li>
<li id="list_item" class="nav-item">
<a id="list_link" class="nav-link" href="list.php">The List</a>
</li>
<li id="contact_item" class="nav-item">
<a id="contact_link" class="nav-link" href="form.php">Contact</a>
</li>
</ul>
<ul id="right_navbar" class="navbar-nav ml-auto mr-5">
<?php
session_start();
if(isset($_SESSION["user_id"])){
if($_SESSION["role"] > 0){
echo '
<li id="messages_item" class="nav-item">
<a id="messages_link" class="nav-link" href="messages.php">Messages</a>
</li>';
}
echo '
<li id="logout_item" class="nav-item">
<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>
</li>';
}else{
echo '
<li id="register_item" class="nav-item">
<a id="register_link" class="nav-link" href="register.php">Register</a>
</li>
<li id="login_item" class="nav-item">
<a id="login_link" class="nav-link" href="login.php">Log-In</a>
</li>';
}
?>
</ul>
</div>
</nav>
(register.php)
<?php
include("head.php");
?>
<style>
.error_msg { display:none;color:#C00; }
</style>
<div class="container-fluid">
<div id="headline" class="row mt-5">
<div class="col-12 text-center">
<h2>Full Stack Amp Jam Registration</h2>
</div> <!-- /col-12 -->
</div> <!-- /row -->
<form id="register_form" method="POST" action="">
<div class="row mt-5">
<div class="col-4"></div> <!-- spacer -->
<div id="form-container" class="col-4">
<div>User Name: <input type="text" id="username" name="username" class="form-control" value="" placeholder="Enter User Name" required/></div>
<div id="username_length" class="error_msg"></div>
<div id="username_exists" class="error_msg"></div>
<div class="mt-3">E-mail: <input type="email" id="email" name="email" class="form-control" value="" placeholder="Enter E-mail" required/></div>
<div id="email_exists" class="error_msg"></div>
<div id="email_validate" class="error_msg"></div>
<div class="mt-3">Password: <input type="password" id="password" name="password" class="form-control" value="" placeholder="Enter Password" required/></div>
<div id="password_length" class="error_msg"></div>
<div class="mt-5"><button type="submit" id="submit" class="btn btn-primary float-right">Submit</button></div>
</div> <!-- /#form-container -->
</div> <!-- /.row -->
</form>
</body>
<script>
var this_page = "register";
var page_title = 'AMP JAM Site | Register';
$(document).ready(function(){
document.title = page_title;
navbar_update(this_page);
$("#register_form").submit(function(event){
event.preventDefault();
$.post( "n413register.php",
$("#register_form").serialize(),
function(data){
if(data.status){
$("#form-container").html(data.success);
right_navbar_update();
}else{
if(data.errors){
// handle error messages here
for (var key in data){
switch(key){
case "status":
case "errors":
case "success":
case "failed":
break;
default: $("#"+key).html(data[key]);
$("#"+key).css("display","block");
break;
} //switch
} //for-in
}else{
$("#form-container").html(data.failed); //registration failed, but without errors
} //if data.errors
} //if data.status
}, //callback function
"json"
); //post
}); //submit
}); //document.ready
function right_navbar_update(){
var html = '<li id="logout_item" class="nav-item">'+
'<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>'+
'</li>';
$("#right_navbar").html(html);
}
</script>
</html>
(users_hash.sql)
-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: localhost:8889
-- Generation Time: Apr 30, 2020 at 08:20 PM
-- Server version: 5.7.23
-- PHP Version: 7.2.10
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `ampjam_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `users_hash`
--
CREATE TABLE `users_hash` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` text NOT NULL,
`role` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `users_hash`
--
INSERT INTO `users_hash` (`id`, `username`, `email`, `password`, `role`) VALUES
(1, 'groot', 'groot@guardians.com', '$2y$10$CEc6KF7zaYXIPdQrsiILqu8ro9j2UpqPdKtZ3wz3xEQ5LpD626QCG', 1),
(2, 'rocket', 'rocket@guardians.com', '$2y$10$xngf4UYeK7Pbupz5IE21hexBeuLLjXHcyZ3Kj90revx5.6rL8ffeW', 0);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `users_hash`
--
ALTER TABLE `users_hash`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `users_hash`
--
ALTER TABLE `users_hash`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
(n413register.php)
<?php
include("n413connect.php");
function sanitize($item){
global $link;
$item = html_entity_decode($item);
$item = trim($item);
$item = stripslashes($item);
$item = strip_tags($item);
$item = mysqli_real_escape_string( $link, $item );
return $item;
}
$messages = array();
$messages["status"] = 0;
$messages["errors"] = 0;
$messages["username_length"] = "";
$messages["username_exists"] = "";
$messages["email_exists"] = "";
$messages["email_validate"] = "";
$messages["password_length"] = "";
$messages["success"] = "";
$messages["failed"] = "";
$username = "";
$email = "";
$password = "";
if(isset($_POST["username"])) { $username = $_POST["username"]; }
$username = trim($username);
if( strlen($username) < 5 ){
$messages["error"] = 1;
$messages["username_length"] = "The Username must be at least 5 characters long.";
}else{
$username = sanitize($username);
}
if(isset($_POST["password"])) { $password = $_POST["password"]; }
$password = trim($password);
if( strlen($password) < 8 ){
$messages["error"] = 1;
$messages["password_length"] = "The Password must be at least 8 characters long.";
}else{
$encypted_password = password_hash($password, PASSWORD_DEFAULT);
if($encypted_password){
$password = $encypted_password;
}else{
$messages["errors"] = 1;
$messages["password_length"] = "Password encryption failed. You cannot register at this time";
}
}
if(isset($_POST["email"])) { $email = $_POST["email"]; }
if (filter_var($email, FILTER_VALIDATE_EMAIL)){
$email = sanitize($email);
}else{
$messages["errors"] = 1;
$messages["email_validate"] = "There are problems with the e-mail address. Please correct them.";
}
if( ! $messages["errors"]){
$sql = "SELECT * FROM `users_hash` WHERE username = '".$username."'";
$result = mysqli_query($link, $sql);
if( mysqli_num_rows($result) > 0){
$messages["errors"] = 1;
$messages["username_exists"] = "This Username is already in use. Please provide a different Username";
}
$sql = "SELECT * FROM `users_hash` WHERE email = '".$email."'";
$result = mysqli_query($link, $sql);
if( mysqli_num_rows($result) > 0){
$messages["errors"] = 1;
$messages["email_exists"] = "This E-mail address is already in use. You cannot register another account for this E-mail.";
}
} //if( ! $messages["errors"])
if( ! $messages["errors"]){
$sql = "INSERT INTO `users_hash` (`id`, `username`, `email`, `password`, `role`)
VALUES (NULL, '".$username."', '".$email."', '".$password."', '0')";
$result = mysqli_query($link, $sql);
$user_id = mysqli_insert_id($link);
if($user_id){
session_start();
$_SESSION["user_id"] = $user_id;
$_SESSION["role"] = "0";
}
} //if( ! $messages["errors"])
if(isset($_SESSION["user_id"])){
$messages["status"] = "1";
$messages["success"] = '<h3>You are now Registered and Logged In.</h3>';
}else{
$messages["failed"] = '<h3>The Registration was not successful.</h3>
<div class="col-12 text-center"><a href="register.php"><button type="button" class="btn btn-primary mt-5">Try Again</button></a></div>';
}
echo json_encode($messages);
?>
(n413auth.php)
<?php
include("n413connect.php");
function sanitize($item){
global $link;
$item = html_entity_decode($item);
$item = trim($item);
$item = stripslashes($item);
$item = strip_tags($item);
$item = mysqli_real_escape_string( $link, $item );
return $item;
}
$messages = array();
$messages["status"] = 0;
$messages["role"] = 0;
$messages["success"] = "";
$messages["failed"] = "";
$username = "";
$password = "";
if(isset($_POST["username"])) { $username = sanitize($_POST["username"]); }
if(isset($_POST["password"])) { $password = $_POST["password"]; }
$sql= "SELECT * FROM `users_hash`
WHERE username = '".$username."'
LIMIT 1";
$result = mysqli_query($link, $sql);
$row = mysqli_fetch_array($result, MYSQLI_BOTH);
if(password_verify($password, $row["password"])){
session_start();
$_SESSION["user_id"] = $row["id"];
$_SESSION["role"] = $row["role"];
}
if(isset($_SESSION["user_id"])){
$messages["status"] = "1";
$messages["role"] = $_SESSION["role"];
$messages["success"] = '<h3 class="text-center">You are now Logged In.</h3>';
}else{
$messages["failed"] = '<h3 class="text-center">The Log-in was not successful.</h3>
<div class="col-12 text-center"><a href="login.php"><button type="button" class="btn btn-primary mt-5">Try Again</button></a></div>';
}
echo json_encode($messages);
?>
(login.php)
<?php
include("head.php");
?>
<div class="container-fluid">
<div id="headline" class="row mt-5">
<div class="col-12 text-center">
<h2>Full Stack Amp Jam Log-in</h2>
</div> <!-- /col-12 -->
</div> <!-- /row -->
<form id="login_form" method="POST" action="">
<div class="row mt-5">
<div class="col-4"></div> <!-- spacer -->
<div id="form-container" class="col-4">
User Name: <input type="text" id="username" name="username" class="form-control" value="" placeholder="Enter User Name" required/><br/>
Password: <input type="password" id="password" name="password" class="form-control" value="" placeholder="Enter Password" required/><br/>
<button type="submit" id="submit" class="btn btn-primary float-right">Submit</button>
</div> <!-- /#form-container -->
</div> <!-- /.row -->
</form>
</body>
<script>
var this_page = "login";
var page_title = 'AMP JAM Site | Login';
$(document).ready(function(){
document.title = page_title;
navbar_update(this_page);
$("#login_form").submit(function(event){
event.preventDefault();
$.post("n413auth.php",
$("#login_form").serialize(),
function(data){
//handle messages here
if(data.status){
$("#form-container").html(data.success);
right_navbar_update(data.role);
}else{
$("#form-container").html(data.failed);
}
},
"json"
); //post
}); //submit
}); //document.ready
function right_navbar_update(role){
var html = "";
if (role > 0) {
html = '<li id="messages_item" class="nav-item">'+
'<a id="messages_link" class="nav-link" href="messages.php">Messages</a>'+
'</li>';
}
html += '<li id="logout_item" class="nav-item">'+
'<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>'+
'</li>';
$("#right_navbar").html(html);
}
</script>
</html>
The RESET.
Here are completed files for The RESET: n413_reset.zip
Scripts
Database connection script: n413connect.zip
SQL script to create the "form_responses" table: form_responses.sql
SQL script to create the "users_hash" table: users_hash.sql
SQL script to create the "password_reset_log" table: password_reset_log.sql
Here are completed versions of the scripts used for this project:
(n413connect.php)
<?php
$dbhost = 'localhost:8889'; //XAMPP is 'localhost:3306'
$dbuser = 'root';
$dbpwd = 'root'; //XAMPP password is ''
$dbname = 'ampjam_db';
$link = mysqli_connect($dbhost, $dbuser, $dbpwd, $dbname);
if (!$link) { die('Connect Error (' . mysqli_connect_errno() . ') '. mysqli_connect_error()); }
?>
(head.php)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<title>Full Stack Amp Jam Site Project</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.4.1.min.js" type="application/javascript"></script>
<script src="js/bootstrap.min.js" type="application/javascript"></script>
<script src="js/bootstrap.min.js.map" type="application/javascript"></script>
<script>
function navbar_update(this_page){
$("#"+this_page+"_item").addClass('active');
$("#"+this_page+"_link").append(' <span class="sr-only">(current)</span>');
}
<script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.php">AMP JAM Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li id="home_item" class="nav-item">
<a id="home_link" class="nav-link" href="index.php">Home</a>
</li>
<li id="list_item" class="nav-item">
<a id="list_link" class="nav-link" href="list.php">The List</a>
</li>
<li id="contact_item" class="nav-item">
<a id="contact_link" class="nav-link" href="form.php">Contact</a>
</li>
</ul>
<ul id="right_navbar" class="navbar-nav ml-auto mr-5">
<?php
session_start();
if(isset($_SESSION["user_id"])){
if($_SESSION["role"] > 0){
echo '
<li id="messages_item" class="nav-item">
<a id="messages_link" class="nav-link" href="messages.php">Messages</a>
</li>';
}
echo '
<li id="logout_item" class="nav-item">
<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>
</li>';
}else{
echo '
<li id="register_item" class="nav-item">
<a id="register_link" class="nav-link" href="register.php">Register</a>
</li>
<li id="login_item" class="nav-item">
<a id="login_link" class="nav-link" href="login.php">Log-In</a>
</li>';
}
?>
</ul>
</div>
</nav>
(register.php)
<?php
include("head.php");
?>
<style>
.error_msg { display:none;color:#C00; }
</style>
<div class="container-fluid">
<div id="headline" class="row mt-5">
<div class="col-12 text-center">
<h2>Full Stack Amp Jam Registration</h2>
</div> <!-- /col-12 -->
</div> <!-- /row -->
<form id="register_form" method="POST" action="">
<div class="row mt-5">
<div class="col-4"></div> <!-- spacer -->
<div id="form-container" class="col-4">
<div>User Name: <input type="text" id="username" name="username" class="form-control" value="" placeholder="Enter User Name" required/></div>
<div id="username_length" class="error_msg"></div>
<div id="username_exists" class="error_msg"></div>
<div class="mt-3">E-mail: <input type="email" id="email" name="email" class="form-control" value="" placeholder="Enter E-mail" required/></div>
<div id="email_exists" class="error_msg"></div>
<div id="email_validate" class="error_msg"></div>
<div class="mt-3">Password: <input type="password" id="password" name="password" class="form-control" value="" placeholder="Enter Password" required/></div>
<div id="password_length" class="error_msg"></div>
<div class="mt-5"><button type="submit" id="submit" class="btn btn-primary float-right">Submit</button></div>
</div> <!-- /#form-container -->
</div> <!-- /.row -->
</form>
</body>
<script>
var this_page = "register";
var page_title = 'AMP JAM Site | Register';
$(document).ready(function(){
document.title = page_title;
navbar_update(this_page);
$("#register_form").submit(function(event){
event.preventDefault();
$.post( "n413register.php",
$("#register_form").serialize(),
function(data){
if(data.status){
$("#form-container").html(data.success);
right_navbar_update();
}else{
if(data.errors){
// handle error messages here
for (var key in data){
switch(key){
case "status":
case "errors":
case "success":
case "failed":
break;
default: $("#"+key).html(data[key]);
$("#"+key).css("display","block");
break;
} //switch
} //for-in
}else{
$("#form-container").html(data.failed); //registration failed, but without errors
} //if data.errors
} //if data.status
}, //callback function
"json"
); //post
}); //submit
}); //document.ready
function right_navbar_update(){
var html = '<li id="logout_item" class="nav-item">'+
'<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>'+
'</li>';
$("#right_navbar").html(html);
}
</script>
</html>
(users_hash.sql)
-- phpMyAdmin SQL Dump
-- version 4.8.3
-- https://www.phpmyadmin.net/
--
-- Host: localhost:8889
-- Generation Time: Apr 30, 2020 at 08:20 PM
-- Server version: 5.7.23
-- PHP Version: 7.2.10
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `ampjam_db`
--
-- --------------------------------------------------------
--
-- Table structure for table `users_hash`
--
CREATE TABLE `users_hash` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` text NOT NULL,
`role` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Dumping data for table `users_hash`
--
INSERT INTO `users_hash` (`id`, `username`, `email`, `password`, `role`) VALUES
(1, 'groot', 'groot@guardians.com', '$2y$10$CEc6KF7zaYXIPdQrsiILqu8ro9j2UpqPdKtZ3wz3xEQ5LpD626QCG', 1),
(2, 'rocket', 'rocket@guardians.com', '$2y$10$xngf4UYeK7Pbupz5IE21hexBeuLLjXHcyZ3Kj90revx5.6rL8ffeW', 0);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `users_hash`
--
ALTER TABLE `users_hash`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `users_hash`
--
ALTER TABLE `users_hash`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
(n413register.php)
<?php
include("n413connect.php");
function sanitize($item){
global $link;
$item = html_entity_decode($item);
$item = trim($item);
$item = stripslashes($item);
$item = strip_tags($item);
$item = mysqli_real_escape_string( $link, $item );
return $item;
}
$messages = array();
$messages["status"] = 0;
$messages["errors"] = 0;
$messages["username_length"] = "";
$messages["username_exists"] = "";
$messages["email_exists"] = "";
$messages["email_validate"] = "";
$messages["password_length"] = "";
$messages["success"] = "";
$messages["failed"] = "";
$username = "";
$email = "";
$password = "";
if(isset($_POST["username"])) { $username = $_POST["username"]; }
$username = trim($username);
if( strlen($username) < 5 ){
$messages["error"] = 1;
$messages["username_length"] = "The Username must be at least 5 characters long.";
}else{
$username = sanitize($username);
}
if(isset($_POST["password"])) { $password = $_POST["password"]; }
$password = trim($password);
if( strlen($password) < 8 ){
$messages["error"] = 1;
$messages["password_length"] = "The Password must be at least 8 characters long.";
}else{
$encypted_password = password_hash($password, PASSWORD_DEFAULT);
if($encypted_password){
$password = $encypted_password;
}else{
$messages["errors"] = 1;
$messages["password_length"] = "Password encryption failed. You cannot register at this time";
}
}
if(isset($_POST["email"])) { $email = $_POST["email"]; }
if (filter_var($email, FILTER_VALIDATE_EMAIL)){
$email = sanitize($email);
}else{
$messages["errors"] = 1;
$messages["email_validate"] = "There are problems with the e-mail address. Please correct them.";
}
if( ! $messages["errors"]){
$sql = "SELECT * FROM `users_hash` WHERE username = '".$username."'";
$result = mysqli_query($link, $sql);
if( mysqli_num_rows($result) > 0){
$messages["errors"] = 1;
$messages["username_exists"] = "This Username is already in use. Please provide a different Username";
}
$sql = "SELECT * FROM `users_hash` WHERE email = '".$email."'";
$result = mysqli_query($link, $sql);
if( mysqli_num_rows($result) > 0){
$messages["errors"] = 1;
$messages["email_exists"] = "This E-mail address is already in use. You cannot register another account for this E-mail.";
}
} //if( ! $messages["errors"])
if( ! $messages["errors"]){
$sql = "INSERT INTO `users_hash` (`id`, `username`, `email`, `password`, `role`)
VALUES (NULL, '".$username."', '".$email."', '".$password."', '0')";
$result = mysqli_query($link, $sql);
$user_id = mysqli_insert_id($link);
if($user_id){
session_start();
$_SESSION["user_id"] = $user_id;
$_SESSION["role"] = "0";
}
} //if( ! $messages["errors"])
if(isset($_SESSION["user_id"])){
$messages["status"] = "1";
$messages["success"] = '<h3>You are now Registered and Logged In.</h3>';
}else{
$messages["failed"] = '<h3>The Registration was not successful.</h3>
<div class="col-12 text-center"><a href="register.php"><button type="button" class="btn btn-primary mt-5">Try Again</button></a></div>';
}
echo json_encode($messages);
?>
(n413auth.php)
<?php
include("n413connect.php");
function sanitize($item){
global $link;
$item = html_entity_decode($item);
$item = trim($item);
$item = stripslashes($item);
$item = strip_tags($item);
$item = mysqli_real_escape_string( $link, $item );
return $item;
}
$messages = array();
$messages["status"] = 0;
$messages["role"] = 0;
$messages["success"] = "";
$messages["failed"] = "";
$username = "";
$password = "";
if(isset($_POST["username"])) { $username = sanitize($_POST["username"]); }
if(isset($_POST["password"])) { $password = $_POST["password"]; }
$sql= "SELECT * FROM `users_hash`
WHERE username = '".$username."'
LIMIT 1";
$result = mysqli_query($link, $sql);
$row = mysqli_fetch_array($result, MYSQLI_BOTH);
if(password_verify($password, $row["password"])){
session_start();
$_SESSION["user_id"] = $row["id"];
$_SESSION["role"] = $row["role"];
}
if(isset($_SESSION["user_id"])){
$messages["status"] = "1";
$messages["role"] = $_SESSION["role"];
$messages["success"] = '<h3 class="text-center">You are now Logged In.</h3>';
}else{
$messages["failed"] = '<h3 class="text-center">The Log-in was not successful.</h3>
<div class="col-12 text-center"><a href="login.php"><button type="button" class="btn btn-primary mt-5">Try Again</button></a></div>';
}
echo json_encode($messages);
?>
(login.php)
<?php
include("head.php");
?>
<div class="container-fluid">
<div class="row">
<div class="col-12 text-center mt-5">
<h2>Full Stack Amp Jam Log-in</h2>
</div> <!-- /col-12 -->
</div> <!-- /row -->
<form id="login_form" method="POST" action="">
<div class="row mt-5">
<div class="col-4"></div> <!-- spacer -->
<div id="form-container" class="col-4">
User Name: <input type="text" id="username" name="username" class="form-control" value="" placeholder="Enter User Name" required/><br/>
Password: <input type="password" id="password" name="password" class="form-control" value="" placeholder="Enter Password" required/><br/>
<button type="submit" id="submit" class="btn btn-primary float-right">Submit</button>
<a data-toggle="modal" href="#forgotModal">Forgot Password?</a>
</div> <!-- /#form-container -->
</div> <!-- /.row -->
</form>
<script>
var this_page = "login";
var page_title = 'AMP JAM Site | Login';
$(document).ready(function(){
document.title = page_title;
navbar_update(this_page);
$("#login_form").submit(function(event){
event.preventDefault();
$.post("n413auth.php",
$("#login_form").serialize(),
function(data){
//handle messages here
if(data.status){
$("#form-container").html(data.success);
right_navbar_update(data.role);
}else{
$("#form-container").html(data.failed);
}
},
"json"
); //post
}); //submit
}); //document.ready
function right_navbar_update(role){
var html = "";
if (role > 0) {
html = '<li id="messages_item" class="nav-item">'+
'<a id="messages_link" class="nav-link" href="messages.php">Messages</a>'+
'</li>';
}
html += '<li id="logout_item" class="nav-item">'+
'<a id="logout_link" class="nav-link" href="logout.php">Log-Out</a>'+
'</li>';
$("#right_navbar").html(html);
}
</script>
<!-- -------------------------- AMP JAM RESET Reset Password Modal ------------------------- -->
<div class="modal fade" id="forgotModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">AMP JAM RESET Reset Password</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div> <!-- /.modal-header -->
<div class="modal-body">
<form id="reset_form" name="reset_form" class="form-horizontal" method="" action="" >
<div class="row">
<div class="col-12">
<div class="row" style="padding:2em;">
<div class="form-group">
<label for="email" class="control-label">Enter your E-mail:</label>
<input type="text" id="email" name="email" class="form-control" placeholder="E-mail address">
<div id="email_error" style="display:none;color:#990000;"></div>
</div> <!-- /.form-group -->
</div> <!-- /.row -->
<div class="row row-gap">
<div class="col-11">
<button type="submit" class="btn btn-primary float-right">Reset Password</button>
<div id="user_message" style="display:none;color:#990000;"></div>
</div> <!-- /.col-11 -->
</div> <!-- /.row row-gap -->
</div> <!-- /col-12 -->
</div> <!-- /.row -->
</form>
</div> <!-- /.modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> <!-- /.modal-footer -->
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<!-- -------------------------- end Reset Password Modal ------------------------------ -->
<script type="text/javascript">
// Attach a submit handler to the form
$( "#reset_form" ).submit(function( event ) {
event.preventDefault();
$.post("send_reset_link.php",
{email:$("#email").val()},
function(data){
//reset the error messages
$("#user_message").html("");
$("#user_message").css("display","none");
$("#email_error").html("");
$("#email_error").css("display","none");
if(data.status == "success"){
if(data.user_message != null){
$("#user_message").html(data.user_message);
$("#user_message").css("display","block");
}
}else{
if(data.email_error != null){
$("#email_error").html(data.email_error);
$("#email_error").css("display","block");
}
}
},
"json"
); //post
});//submit
</script>
</body>
</html>
(n413_email_config.php)<?php $reset_link = 'https://<your-server-domain-name>/<path-to-your-project>/n413_reset/verify_link.php'; //This is the return email address. Use your account name here. $from = '<your-account>@<your-server-domain-name>'; ?>
(password_reset_log.sql)-- phpMyAdmin SQL Dump -- version 4.9.3 -- https://www.phpmyadmin.net/ -- -- Host: localhost:8889 -- Generation Time: Oct 20, 2020 at 03:56 PM -- Server version: 5.7.26 -- PHP Version: 7.4.2 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; -- -- Database: `ampjam_db` -- -- -------------------------------------------------------- -- -- Table structure for table `password_reset_log` -- CREATE TABLE `password_reset_log` ( `id` int(11) NOT NULL, `user_id` int(11) NOT NULL, `reset_token` varchar(255) NOT NULL, `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP ) ENGINE=MyISAM DEFAULT CHARSET=latin1; -- -- Indexes for dumped tables -- -- -- Indexes for table `password_reset_log` -- ALTER TABLE `password_reset_log` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `password_reset_log` -- ALTER TABLE `password_reset_log` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
(send_reset_link.php)<?php include("n413connect.php"); include("n413_email_config.php"); $messages = array(); $messages["status"] = 0; $messages["errors"] = 0; $messages["email_error"] = ""; $messages["user_message"] = ""; $user_id = 0; $email = ""; if(isset($_POST["email"])){ $email = html_entity_decode($_POST["email"]); $email = trim($email); //check for an empty username if (strlen($email) < 1){ $messages["errors"] = true; $messages["email_error"] = 'You must enter your email address.'; } // if (strlen($email < 1) //check for valid email if (!filter_var($email, FILTER_VALIDATE_EMAIL)){ $messages["errors"] = true; $messages["email_error"] = 'You must enter a valid email address.'; }else{ // if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $email = stripslashes($email); $email = strip_tags($email); $email = mysqli_real_escape_string( $link, $email ); } // -end else- if (!filter_var($email, FILTER_VALIDATE_EMAIL)) } // if(isset($_POST["email"])) if(! $messages["errors"] ){ $sql = "SELECT id FROM users_hash WHERE email = '".$email."' "; $result = mysqli_query($link, $sql); if(mysqli_num_rows($result) == 1){ $row = mysqli_fetch_array($result, MYSQLI_BOTH); $user_id = $row["id"]; $token = sha1($email.time()); $sql = "INSERT INTO `password_reset_log` (`id`, `user_id`, `reset_token`, `timestamp`) VALUES (NULL, '".$user_id."', '".$token."', NOW())"; $result = mysqli_query($link, $sql); if(mysqli_affected_rows($link) == 1){ //define the headers $to = $_POST["email"]; //$from is defined in the "config" file. $subject = 'Password Reset Request'; $message_text = ' A password reset request has been made for your AMP JAM account that uses this e-mail address. If you did not initiate this request, please notify the security team at once. If you made the request, please click on the link below to reset your password. This link will expire one hour from the time this e-mail was sent. '.$reset_link.'?token='.$token; //$reset_link is defined in the "config" file. //be sure the /r/n (carriage return) characters are in DOUBLE QUOTES! //PHP treats single quoted escaped characters differently, and things will break $headers = 'From: '.$from . "\r\n" . 'Reply-To: '.$from . "\r\n" . 'X-Mailer: PHP/' . phpversion(); mail($to, $subject, $message_text, $headers); }else{ $messages["errors"] = true; $messages["email_error"] = "There was a problem with the database. Your password cannot be reset."; } }else{ // else - if(mysqli_num_rows($result) == 1) $messages["email_error"] = "The e-mail address you entered was not found in the database.
Check to be sure the e-mail address is correct and try again."; } // end else - if(mysqli_num_rows($result) == 1) } // if (! $messages["errors"] ) if ((! $messages["errors"])&&($user_id > 0)){ $messages["status"] = 'success'; $messages["user_message"] = "A link to reset your password has been mailed to your e-mail address.<br/>The link is valid for 1 hour."; echo json_encode($messages); }else{ $messages["status"] = 'failed'; echo json_encode($messages); } ?>
(verify_link.php)<?php include("n413connect.php"); $user_id = 0; $user_message = ""; $token = ""; if(isset($_GET["token"])){ $token = html_entity_decode($_GET["token"]); $token = trim($token); $token = stripslashes($token); $token = strip_tags($token); $token = mysqli_real_escape_string( $link, $token ); $sql = "SELECT user_id, timestamp FROM password_reset_log WHERE reset_token = '".$token."' "; $result = mysqli_query($link, $sql); if (mysqli_num_rows($result) == 1){ $row = mysqli_fetch_array($result, MYSQLI_BOTH); $user_id = $row["user_id"]; $start_time = $row["timestamp"]; $sql = "SELECT TIMESTAMPDIFF(SECOND, '".$start_time."', NOW()) as time_elapsed"; $result = mysqli_query($link, $sql); $row = mysqli_fetch_array($result, MYSQLI_BOTH); if ($row["time_elapsed"] < 3600){ //1 hour $link_status = "valid"; }else{ //if ($row["time_elapsed"] > 3600) $link_status = "expired"; } // -end else- if ($row["time_elapsed"] > 3600) }else{ // if (mysqli_num_rows() == 1) $link_status = "no_record"; } // -end else- if (mysqli_num_rows() == 1) }else{ // if(isset($_GET["token"])) $link_status = "no_token"; }// -end else- if(isset($_GET["token"])) switch ($link_status){ case "valid": $user_message .=' <div id="user_message" class="success"> <p>Please enter a new password to use with your account.<br/>It must have at least 8 characters.</p> <form id="password_form" name="password_form" class="form-horizontal" method="" action="" > <div class="row"> <div class="col-3"></div> <!-- spacer --> <div class="col-6"> <div class="form-group"> <label for="password" class="control-label">Password</label> <input type="password" id="password" name="password" class="form-control" placeholder="Password"> <div id="password_error" style="display:none;color:#990000;"></div> </div> <!-- /.form-group --> <button type="submit" class="btn btn-primary float-right">Submit</button> <div id="user_message" style="display:none;color:#990000;"></div> </div> <!-- /.col-6 --> </div> <!-- /.row --> </form> </div> <!-- /.success -->'; break; case "expired": $user_message .=' <div class="error"> <p>The password reset link has expired.</p> <p>Your password cannot be reset using this link.</p> </div>'; break; case "no_record": case "no_token": default: $user_message .=' <div class="error"> <p>The password reset token is not valid.</p> <p>Your password cannot be reset using this link.</p> </div>'; break; }//switch include("head.php"); ?> <style> .error { padding:30px;text-align:center;font-size:18px;font-weight:700;background-color:#fff;border:4px solid #900; } .success{ text-align:left;font-size:18px;font-weight:400; } .success > p { text-align:center;margin-bottom:30px; } </style> <div class="container-fluid"> <div class="row"> <div class="col-12 text-center mt-5"> <h2>AMP JAM Password Reset</h2> </div> <!-- /col-12 --> </div> <!-- /row --> <div class="row"> <div class="col-3"></div> <!-- spacer --> <div class="col-6 text-center mt-5"> <?= $user_message ?> </div> <!-- /col-6 --> </div> <!-- /row --> </div> <!-- /container-fluid --> </body> <script type="text/javascript"> // Attach a submit handler to the form $( "#password_form" ).submit(function( event ) { event.preventDefault(); $.post("update_password.php", {id:<?=$user_id?>, password:$("#password").val(), token:'<?=$token?>'}, function(data){ //reset any previous error messages $("#password_error").html(""); $("#password_error").css("display","none"); if(data.status == "success"){ if(data.user_message != null){ $("#user_message").html(data.user_message); $("#user_message").css("display","block"); } }else{ if(data.password_error != null){ $("#password_error").html(data.password_error); $("#password_error").css("display","block"); } } }, "json" ); //post }); //submit </script> </html>
(update_password.php)<?php include("n413connect.php"); $messages = array(); $messages["status"] = 0; $messages["errors"] = 0; $messages["password_error"] = ""; $messages["user_message"] = ""; $password = ""; $user_id = 0; $token = ''; $validated = false; if(isset($_POST["id"])){ $user_id = intval($_POST["id"]); }else{ $messages["errors"] = true; $messages["password_error"] = 'Password cannot be reset'; } //revalidate the token and the user id if(isset($_POST["token"])){ $token = $_POST["token"]; } if($token > ''){ $sql="SELECT * from password_reset_log WHERE reset_token = '".$token."'"; $result = mysqli_query($link, $sql); if(mysqli_num_rows($result) == 1){ $row = mysqli_fetch_array($result, MYSQLI_BOTH); if($user_id == $row["user_id"]){ $validated = true; } } } //if($token > '') if( $validated ){ if(isset($_POST["password"])) { $password = $_POST["password"]; trim($password); //delete leading and trailing spaces if(strlen($password) < 8){ $messages["errors"] = true; $messages["password_error"] = "The password must have at least 8 characters."; }else{ $encrypted_password = password_hash($password, PASSWORD_DEFAULT); if($encrypted_password){ $password = $encrypted_password; }else{ $messages["errors"] = true; $messages["password_error"] = "Password encryption failed. You cannot reset your password at this time."; } //if($encrypted_password) } //if(strlen($password) < 8) } //end - else - if(isset($_POST["password"])) }else{ $messages["errors"] = true; } // if ($validated) if( ! $messages["errors"] ){ $sql = "UPDATE users_hash set `password` = '".$password."' WHERE id = '".$user_id."' "; $result = mysqli_query($link, $sql); if(mysqli_affected_rows($link) == 1){ session_start(); $_SESSION["user_id"] = $user_id; }else{ $messages["errors"] = true; $messages["password_error"] = 'There was a problem with the database.
Your password cannot be reset'; } // if( ! mysqli_affected_rows($link) == 1 } // if ( ! $messages["errors"] ) if ($_SESSION["user_id"] > 0){ $messages["status"] = 'success'; $messages["user_message"] = '<p>Your password has been successfully reset.<br/><br/> <a href="login.php"><button type="button" class="btn btn-primary">Log In</button></a></p>'; echo json_encode($messages); }else{ $messages["status"] = 'failed'; echo json_encode($messages); } // -end else- if ($_SESSION["user_id"] > 0) $sql = "DELETE from password_reset_log WHERE reset_token = '".$token."'"; $result = mysqli_query($link, $sql); session_write_close(); ?>