In this lesson you are going to learn how to create a signup script. In the last lesson I showed you how to set up a server and set up and install VSCode. Now we are going to take the next step for creating a sign up script.
Terminal Commands
So to get things started lets fire up on XAMPP server on our local machine. For Mac and windows the process is simple, just look for XAMPP and start up the servers. For Linux enter the following into your terminal command line.
cd /
Then
sudo /opt/lampp/lampp start
If you wanted to see the XAMPP interface you can enter this terminal command.
sudo /opt/lampp/manager-linux-x64.run
What to Remember
The important thing is to know how to do what you need to do and NOT memorize everything. If you try to memorize everything you will get frustrated and be inefficient. It is like getting down an algorithm, remember the algorithm, not the parameters. Bookmark this page for reference later.
Files To Create
In your VS Code create the following files, we will be entering code in them later. This just helps us get ready.
- config.php
- footer.php
- header.php
- index.php
- processor.php
- signup.php
In your Index.php File Put this code
This is an example on how you can use a CDN Content Delivery Network for your Bootstrap files. We however will be downloading Boostrap into our project later. But this examples shows you how to use a CDN without downloading Bootstrap. Preview it in your browser and you can see how it works. http://localhost/test/index.php is where it should be located.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign Up</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>Sign up to recieve Newsletters</h1>
<p>Sign up to recieve our newsletters.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Download Bootstrap
Download the Bootstrap scripts to your computer. Make sure you download the examples. You can use the examples to code your application. Extract the Bootstrap zip file to your htdocs/test folder. This way it will be easy for you to view the examples and see how they are coded.
File Paths
The most important thing after downloading the examples and using it in your application is to make sure that you have the correct file paths set up. So if you are calling in a script or a style sheet make sure in the header that you have the correct file path. In the image below I am editing the header.php and making sure that the scripts are being called in from my example downloads. Notice the path of the color-modes.js script.
More Files You Need
You will need to create the other files in your VS Code application by following along in the video below or you can purchase them here. Of course paid subscribers can download all the files and software I create on this site.
Config.php
<?php// Prevent direct access to this file
if (basename($_SERVER['PHP_SELF']) == basename(__FILE__)) {
exit("Direct access is not allowed.");
}
// Database configuration
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '');
define('DB_NAME', 'test');
// Establish a database connection
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
// Check connection
if (!$con) {
die("Database connection failed: " . mysqli_connect_error());
}
// Optionally suppress success message in production
// echo "Connection successful.";
?>
Header.php File
<?php session_start(); ?>
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head><script src="bootstrap-5.3.3-examples/assets/js/color-modes.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.122.0">
<title>Signin Template · Bootstrap v5.3</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
<link href="bootstrap-5.3.3-examples/assets/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
width: 100%;
height: 3rem;
background-color: rgba(0, 0, 0, .1);
border: solid rgba(0, 0, 0, .15);
border-width: 1px 0;
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.btn-bd-primary {
--bd-violet-bg: #712cf9;
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
--bs-btn-font-weight: 600;
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bd-violet-bg);
--bs-btn-border-color: var(--bd-violet-bg);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: #6528e0;
--bs-btn-hover-border-color: #6528e0;
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
--bs-btn-active-color: var(--bs-btn-hover-color);
--bs-btn-active-bg: #5a23c8;
--bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
z-index: 1500;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display: block !important;
}
</style>
<!-- Custom styles for this template -->
<link href="css/sign-in.css" rel="stylesheet">
</head>Processor.php File
<?php session_start();
require_once "config.php";
if(isset($_POST['name1'])){
// Get user input
$name1=$_POST['name1'];
$email1 = $_POST['email1'];
$password1 = password_hash($_POST['password1'], PASSWORD_DEFAULT);
// Prepare and execute the SQL statement
try {
$stmt = $con->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name1, $email1, $password1);
$stmt->execute();
echo "<div class='alert alert-success'>Sign up successful!</div>";
} catch (mysqli_sql_exception $e) {
// Check if the error is due to a duplicate email
if ($e->getCode() == 1062) { // 1062 is the MySQL error code for duplicate entry
echo "<div class='alert alert-danger'>This email address is already in use. Please try another.</div>";
} else {
echo "An error occurred: " . $e->getMessage();
}
}
// Close the statement and connection
$stmt->close();
$con->close();
}Signup.php File
<?php require_once 'header.php'; ?>
<body class="d-flex align-items-center py-4 bg-body-tertiary">
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
<main class="form-signin w-100 m-auto">
<form>
<img class="mb-4" src="bootstrap-5.3.3-examples/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
<h1 class="h3 mb-3 fw-normal">Please sign up</h1>
<div class="form-floating">
<input type="text" class="form-control" id="name" placeholder="Your Name">
<label for="name">Enter Full Name</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="[email protected]">
<label for="email">Email address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Password">
<label for="password">Password</label>
</div>
<button class="btn btn-primary w-100 py-2" id="submit">Sign Up</button>
<p class="mt-5 mb-3 text-body-secondary">© 2017–2024</p>
</form>
<div id="display"></div>
<script>
$(document).ready(function(){
$("#submit").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password;
if(name==''|| email=='' || password=='')
{
$("#display").html("Please Fill All Fields");
}
else
{
$.ajax({
type: "POST",
url: "processor.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</main>
<script src="bootstrap-5.3.3-examples/assets/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Video for Programming A Sign Up Script In Php Mysql Ajax And Jquery Lesson 2
Now you have all the scripts to do this lesson. Here is the detailed video on how I created these scripts. We have a long way to go but if you take the time to understand these concepts you will be way ahead of the game.