Scribd
Upload
44 views55 pages

Adobe XD Project Setup Guide

Very useful

Uploaded by

ramalakshmi1712003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views55 pages

Adobe XD Project Setup Guide

Very useful

Uploaded by

ramalakshmi1712003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Program:

Open Adobe XD and choose the size of your project

A new page will be appear with required size

Using tools in the side bar background and texts can be created
Using shapes tools and rescaling it slightly will make a required background

Using text tool required text can be typed just by clicking anywhere in the document
Using templates from internet, required buttons and elements can be clicked and dragged into your
Document

Templates are recommended to download from xdguru.com . The downloaded template’s format will
be same as what we save (.xd)
Program:

Open Adobe XD and choose the size of your project

A new page will be appear with required size , go to View > Layers to get Artboards menu

By right clicking over the created page , you can duplicate the page
Using tools in the side bar background and texts can be created

Using shapes tools and rescaling it slightly will make a required background
Using text tool required text can be typed just by clicking anywhere in the document

Using templates from internet, required buttons and elements can be clicked and dragged into your document
Finally by clicking prototype , you can redirect from one element to another page or another element

Templates are recommended to download from xdguru.com . The downloaded template’s format
will be same as

what we save (.xd)


Program:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Registration Form</h1>
<form id="registrationForm" onsubmit="return validateForm()">
<div class="input-container">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-container">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="input-container">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="input-container">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
</div>
<button type="submit">Register</button>
</form>

<script src="script.js"></script>
</body>
</html>

script.js

function validateForm() {
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirmPassword').value;

if (username === '' || email === '' || password === '' || confirmPassword === '') {
alert('All fields are required');
return false;
}
if (password !== confirmPassword) {
alert('Passwords do not match');
return false;
}

alert('Registration successful!');
return false;
}

styles.css

body {
font-family: Arial, sans-serif;
text-align: center;
}

h1 {
color: #333;
}

form {
margin: 20px auto;
max-width: 400px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.input-container {
margin-bottom: 15px;
text-align: left;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}
Output:
Program:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Sticky Navbar</title>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<div class="content">
<!-- Your page content goes here -->
<main id="main">

<!-- Title of the page -->


<h1 id="title">
A. P. J. Abdul Kalam
</h1>

<div id="img">

<!--Image of the Tribute Person-->


<img src="APJ Kalam.png"
id="image" a
lt="Error Loading Image">
<small id="caption">
Great Indian scientist and
politician who played a leading
role in the development of India’s
missile and nuclear weapons
programs.
</small>
</div>

<div id="tribute-data">

<!--Achievements and other


details of the person-->
<h1 class="title-APJ">
About the Legend
</h1>
<p>
☛ A.P.J. Abdul Kalam, in full
Avul Pakir Jainulabdeen Abdul Kalam,
was born on October 15, 1931, in
Rameswaram, Tamil Nadu, India.<br><br>
☛ He served as the 11th President
of India from 2002 to 2007.<br><br>
☛ Kalam earned a degree in
aeronautical engineering from the
Madras Institute of Technology and in
1958 joined the Defence Research and
Development Organisation (DRDO).<br><br>
☛ In 1969, he moved to the Indian
Space Research Organisation, where he
was project director of the SLV-III, the
first satellite launch vehicle that was
both designed and produced in India.
<br><br> ☛ Rejoining DRDO in 1982,
Kalam planned the program that produced
a number of successful missiles, which
helped earn him the nickname <strong>
“Missile Man.”</strong>
<br><br> ☛ Among those successes
was Agni, India’s first intermediate-range
ballistic missile, which incorporated
aspects of the SLV-III and was launched
in 1989.
<br><br> ☛ He also played a
pivotal organisational, technical,
and political role in India's Pokhran-II
nuclear tests in 1998, the first since
the original nuclear test by India in 1974.
<br><br> ☛ From 1992 to 1997 Kalam
was scientific adviser to the defense
minister, and he later served as principal
scientific adviser (1999–2001) to the
government with the rank of cabinet minister.
<br><br> ☛ His prominent role in
the country’s 1998 nuclear weapons tests
solidified India as a nuclear power and
established Kalam as a national hero,
although the tests caused great concern
in the international community.
<br><br> ☛ In 1998 Kalam put
forward a countrywide plan called
Technology Vision 2020, which he described
as a road map for transforming India from
a less-developed to a developed society
in 20 years. The plan called for, among
other measures, increasing agricultural
productivity, emphasizing technology as
a vehicle for economic growth, and
widening access to health care and
education.
<br><br> ☛ Kalam received <b>7</b>
honorary doctorates from <b>40</b>
universities. The Government of India
honoured him with the <b>Padma Bhushan
in 1981</b> and the <b>Padma Vibhushan
in 1990</b> for his work with ISRO and
DRDO and his role as a scientific advisor
to the Government.
<br><br> ☛ In 1997, Kalam received
India's highest civilian honour, the
Bharat Ratna, for his contribution to
the scientific research and modernisation
of defence technology in India.
<br><br> ☛ In 2013, he was the
recipient of the Von Braun Award from
the National Space Society "to recognize
excellence in the management and leadership
of a space-related project".
<br><br> ☛ While delivering a
lecture at the Indian Institute of
Management Shillong, Kalam collapsed and
died from an apparent cardiac arrest on
<b>27 July 2015</b>, aged 83.
<br><br> ☛ Wheeler Island, a
national missile test site in Odisha, was
renamed <b>Kalam Island</b> in September
2015.
<br><br> ☛ A prominent road in
New Delhi was renamed from Aurangzeb
Road to <b>Dr APJ Abdul Kalam Road</b>
in August 2015.
<br><br> ☛ In February 2018,
scientists from the Botanical Survey
of India named a newly found plant
species as Drypetes kalamii, in his
honour.
<br><br><br>
</p>

</div>
<br>
</main>
</div>
</body>
</html>
style.css

*{
margin: 0;

padding: 0;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}
.navbar {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 10px 0;
}
.logo {
float: left;
font-size: 24px;
padding: 5px 20px;
}
.menu {
float: right;
list-style: none;
margin-right: 20px;
}
.menu li {
display: inline-block;
margin-left: 20px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
.menu li a:hover {
border-bottom: 2px solid #fff;
}
.content {
margin-top: 80px;
padding: 20px;
/* Your content styling goes here */
/* Styling the Title and giving shadow to the title */
/* Setting width and display type of image */
/* Setting font color and font size of the image-caption */
/* Styling the content of the page like- padding, font-size, font color etc.*/
/* Styling the title of the content */
/* Styling the link provided at the end */
}
.content body {
background-color: #00fa9a;
margin: 20%;
}
.content #title {
text-align: center;
text-shadow: 5px 5px 10px white;
font-size: 7vh;
}
.content img {
display: inline-block;
width: 100%;

}
.content #caption {
font-size: 17px;
font-family: Gill Sans;
color: black;
}
.content div#tribute-data {
background-color: #2e8b57;
box-shadow: 20px 20px 20px #98fb98;
font-family: Georgia;
padding: 25px 25px;
margin: 11px;
margin-top: 50px;
}
.content h1.title-APJ {
font-size: 35px;
color: white;
text-align: center;
text-shadow: 5px 5px 10px black;
}
.content #tribute-link {
text-decoration: none;
color: black;
}

style.scss

// styles.scss

// Reset default margin and padding


*{
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

header {
background-color: #333;
color: #fff;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}

.navbar {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 10px 0;
}

.logo {
float: left;
font-size: 24px;
padding: 5px 20px;
}

.menu {

float: right;
list-style: none;
margin-right: 20px;

li {
display: inline-block;
margin-left: 20px;

a{
color: #fff;
text-decoration: none;

&:hover {
border-bottom: 2px solid #fff;
}
}
}
}

.content {
margin-top: 80px; // Ensure content isn't hidden behind the navbar
padding: 20px;
/* Your content styling goes here */
body {
background-color: #00FA9A;
margin: 20%;
}

/* Styling the Title and giving


shadow to the title */
#title {
text-align: center;
text-shadow: 5px 5px 10px white;
font-size: 7vh;
}

/* Setting width and display


type of image */
img {
display: inline-block;
width: 100%;
}

/* Setting font color and font


size of the image-caption */
#caption {
font-size: 17px;
font-family: Gill Sans;
color: black;
}

/* Styling the content of the page like-


padding, font-size, font color etc.*/
div#tribute-data {
background-color: rgb(46, 139, 87, 0.25);
box-shadow: 20px 20px 20px #98FB98;
font-family: Georgia;
padding: 25px 25px;
margin: 11px;
margin-top: 50px;
}

/* Styling the title of the content */


h1.title-APJ {
font-size: 35px;

color: white;
text-align: center;
text-shadow: 5px 5px 10px black;

/* Styling the link provided at the end */


#tribute-link {
text-decoration: none;
color: black;
}
}
Output:
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}

section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 2em;
}

.portfolio-item {
flex: 1;
margin: 1em;
padding: 1em;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em 0;
}

@media screen and (max-width: 600px) {


section {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>ECJ tech - Developer Portfolio</h1>
</header>

<section>
<div class="portfolio-item">
<h2>Project 1</h2>
<p>Description of Project 1.</p>

</div>

<div class="portfolio-item">
<h2>Project 2</h2>
<p>Description of Project 2.</p>
</div>

</section>

<footer>
<p>&copy; 2023 ECJ tech - Developer Portfolio</p>
</footer>

</body>
</html>
Output:
Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Pricing Cards</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #000000;
color: #FF0000;
text-align: center;
padding: 20px;
}

.pricing-cards {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 1200px;
margin: 20px auto;
}

.pricing-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
margin: 10px;
text-align: center;
width: 30%;
min-width: 250px;
transition: transform 0.3s ease-in-out;
}

.pricing-card:hover {
transform: scale(1.05);
}

h2 {
color: #333;
}

.price {
font-size: 1.5em;
color: #4CAF50;
}

ul {
list-style: none;
padding: 0;
}

li {
margin: 5px 0;
}

button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}

button:hover {
background-color: #45a049;
}
</style>
</head>
<header>
<h1>ECJ Prime</h1>
</header>
<body>

<div class="pricing-cards">
<div class="pricing-card">
<h2>Basic Plan</h2>
<p class="price">₹199 INR/month</p>
<ul>
<li>Unlimited ad-free movies, TV shows, and mobile games</li>
<li>Watch on 1 supported device at a time</li>
<li>Watch in HD</li>
</ul>
<button>Subscribe</button>
</div>

<div class="pricing-card">
<h2>Pro Plan</h2>
<p class="price">₹499 INR/month</p>
<ul>
<li>Unlimited ad-free movies, TV shows, and mobile games</li>
<li>Watch on 2 supported devices at a time</li>
<li>Watch in Full HD</li>
<li>Download on 2 supported devices at a time</li>
</ul>
<button>Subscribe</button>
</div>

<div class="pricing-card">
<h2>Premium Plan</h2>
<p class="price">₹649 INR/month</p>
<ul>
<li>Unlimited ad-free movies, TV shows, and mobile games</li>
<li>Watch on 4 supported devices at a time</li>
<li>Watch in Ultra HD</li>
<li>Download on 6 supported devices at a time</li>
<li>Netflix Dolby audio</li>
</ul>
<button>Subscribe</button>
</div>
</div>

</body>
</html>
Output:
Program:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="style.css">

<script type="text/javascript" src="script.js"></script>


</head>
<body>

<h1>Registration form</h1>

<form name="reg_form" action="submit.html" method="post">


<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<div id="nameError" class="error-message"></div>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<div id="emailError" class="error-message"></div>

<label for="college">College Name:</label>


<input type="text" id="college" name="college"><br>
<div id="collegeError" class="error-message"></div>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label>
<input type="submit" value="Submit" onclick="return validateForm()">
</form>

</body>
</html>

script.js

function validateForm()
{

var name = document.getElementById('name').value;


var email = document.getElementById('email').value;
var college = document.getElementById('college').value;
var gender = document.querySelector('input[name="gender"]:checked');

var nameError = document.getElementById('nameError');


var emailError = document.getElementById('emailError');
var collegeError = document.getElementById('collegeError');
var genderError = document.getElementById('genderError');
//nameError.innerHTML = "";
//emailError.innerHTML = "";
//collegeError.innerHTML = "";
//genderError.innerHTML = "";

if (name === "") {


nameError.innerHTML = "Please enter your name.";
return false;
}

if (email === "") {


emailError.innerHTML = "Please enter your email.";
return false;
}

if (college === "") {


collegeError.innerHTML = "Please enter your college name.";
return false;
}

if (!gender) {
genderError.innerHTML = "Please select your gender.";
return false;
}

var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;


if (!emailRegex.test(email)) {
emailError.innerHTML = "Please enter a valid email address.";
return false;
}
return true;
}

style.css

.error-message {
color: red;
}

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
width: 100%;
height: 25vh;
display: grid;

place-items: center;
}
.box{
width: 300px;
border:1px solid #000;
padding: 20px;
}
input{
width: 100%;
height: 25px;
margin-bottom: 15px;
}
h3{
padding: 20px;
}
input[type="submit"]{
height: 30px;
background-color: darkblue;
border: none;
outline: none;
cursor: pointer;
color: #fff;
font-size: 16px;
transition: .5s;
}
input[type="submit"]:hover{
background-color: blue;
}
input[type="radio"]{
width: 12px;
height: 12px;
}
.gender label{
padding-right: 20px;
}

submit.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center" >
<h1> Form submitted successfully </h1>
</div>
</body>
</html>
Output:
Program :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONPlaceholder API </title>
<style>
header {
background-color: F5F5F5;
color: #000000;
text-align: center;
padding: 20px;
}
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}

.card {
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 10px;
padding: 15px;
border-radius: 8px;
width: 300px;
}

.card h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}

.card p {
color: #555;
}
</style>
</head>
<header>
<h1>JSONPlaceholder</h1>
</header>
<body>
<div class="container" id="post-container"></div>
<script>
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(posts => {
const postContainer = document.getElementById('post-container');
posts.forEach(post => {
const card = document.createElement('div');
card.className = 'card';

const title = document.createElement('h2');


title.textContent = post.title;

const body = document.createElement('p');


body.textContent = post.body;

card.appendChild(title);
card.appendChild(body);

postContainer.appendChild(card);
});
})
.catch(error => console.error('Error fetching data:', error));
</script>
</body>
</html>
Output:
Program:
index.php

<!DOCTYPE html>
<html>
<head>
<title>Create</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<style>
.example{
background-image: url("ka.jpg");
background-size: cover
}
.example1{
background-color: skyblue;
}
.te{
font-family: arial;
color: white;
font-size: 20
}
</style>
<body>
<div class="example">
<h1><center>MCA Group of Companies</center></h1>
<h2><center>Employee Details</center></h2>
<div class="container">
<div class="example1">
<form action="php/create.php"
method="post">
<h4 class="display-4 text-center">Create</h4><hr><br>
<?php if (isset($_GET['error'])) { ?>
<div class="alert alert-danger" role="alert">
<?php echo $_GET['error']; ?>
</div>
<?php } ?>
<div class="form-group">
<label for="name">Name</label>
<input type="name"
class="form-control"
id="name"
name="name"
value="<?php if(isset($_GET['name']))
echo($_GET['name']); ?>"
placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email"
class="form-control"
id="email"
name="email"
value="<?php if(isset($_GET['email']))
echo($_GET['email']); ?>"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="salary">salary</label>
<input type="number"
class="form-control"
id="salary"
name="salary"
value="<?php if(isset($_GET['salary']))
echo($_GET['salary']); ?>"
placeholder="Enter salary">
</div>
<div class="form-group">
<label for="account">account no</label>
<input type="number"
class="form-control"
id="account"
name="account"
value="<?php if(isset($_GET['account']))
echo($_GET['account']); ?>"
placeholder="Enter account">
</div>
<div class="form-group">
<label for="phone">phone no</label>
<input type="number"
class="form-control"
id="phone"
name="phone"
value="<?php if(isset($_GET['phone']))
echo($_GET['phone']); ?>"
placeholder="Enter phone">
</div>

<button type="submit"
class="btn btn-primary"
name="create">Create</button>
<div class="link-right">
<div class="te">
<h2><a href="read.php" class="link-primary">View</a></h2>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
db_conn.php

<?php

$sname = "localhost";
$uname = "root";
$password = "";

$db_name = "my_db";

$conn = mysqli_connect($sname, $uname, $password, $db_name);

if (!$conn) {
echo "Connection failed!";
}

read.php

<?php include "php/read.php"; ?>


<!DOCTYPE html>
<html>
<head>
<title>Create</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<style>
.example{
background-image: url("ar.jpg");
background-size: cover;
}
.example1{
background-color: skyblue;
}
.te{
font-family: arial;
color: white;
}
</style>
<script language="JavaScript" type="text/javascript">
function checkDelete(){
return confirm('Are you sure?');
}
</script>
<body>
<div class="example">
<div class="te">
<h1><center>MCA Group of Companies</center></h1>
<h2><center>Employee Details</center></h2></div>
<div class="container">
<div class="example1">
<div class="box">
<h4 class="display-4 text-center">Read</h4><br>
<?php if (isset($_GET['success'])) { ?>
<div class="alert alert-success" role="alert">
<?php echo $_GET['success']; ?>
</div>
<?php } ?>
<?php if (mysqli_num_rows($result)) { ?>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">salary</th>
<th scope="col">account</th>
<th scope="col">phone</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
while($rows = mysqli_fetch_assoc($result)){
$i++;
?>
<tr>
<th scope="row"><?=$i?></th>
<td><?=$rows['name']?></td>
<td><?php echo $rows['email']; ?></td>
<td><?php echo $rows['salary']; ?></td>
<td><?php echo $rows['account']; ?></td>
<td><?php echo $rows['phone']; ?></td>
<td><a href="update.php?id=<?=$rows['id']?>"
class="btn btn-success">Update</a>

<a href="php/delete.php?id=<?=$rows['id']?>"
class="btn btn-danger" onclick="return checkDelete()">Delete</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<?php } ?>
<div class="link-right">
<h2><a href="index.php" class="link-primary">Create</h2></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
update.php

<?php include 'php/update.php'; ?>


<!DOCTYPE html>
<html>
<head>
<title>Update</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<style>
.example{
background-image: url("ka.jpg");
background-size: cover
}
.example1{
background-color: skyblue;
}
</style>
<body>
<div class="example">
<h1><center>MCA Group of Companies</center></h1>
<h2><center>Employee Details</center></h2>
<div class="container">
<div class="example1">
<form action="php/update.php"
method="post">

<h4 class="display-4 text-center">Update</h4><hr><br>


<?php if (isset($_GET['error'])) { ?>
<div class="alert alert-danger" role="alert">
<?php echo $_GET['error']; ?>
</div>
<?php } ?>
<div class="form-group">
<label for="name">Name</label>
<input type="name"
class="form-control"
id="name"
name="name"
value="<?=$row['name'] ?>" >
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email"
class="form-control"
id="email"
name="email"
value="<?=$row['email'] ?>" >
</div>
<div class="form-group">
<label for="salary">Salary</label>
<input type="number"
class="form-control"
id="number"
name="salary"
value="<?=$row['salary'] ?>" >
</div>
<div class="form-group">
<label for="account">Account no</label>
<input type="number"
class="form-control"
id="number"
name="account"
value="<?=$row['account'] ?>" >
</div>
<div class="form-group">
<label for="phone">phone no</label>
<input type="number"
class="form-control"
id="number"
name="phone"
value="<?=$row['phone'] ?>" >
</div>
<input type="text"
name="id"
value="<?=$row['id']?>"
hidden >

<button type="submit"
class="btn btn-primary"
name="update">Update</button>
<div class="link-right">
<h3><a href="read.php" class="link-primary">View</a></h3>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

create.php

<?php

if (isset($_POST['create'])) {
include "../db_conn.php";
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

$name = validate($_POST['name']);
$email = validate($_POST['email']);
$salary = validate($_POST['salary']);
$account = validate($_POST['account']);
$phone = validate($_POST['phone']);

$user_data = 'name='.$name. '&email='.$email. '&salary='.$salary. '&account='.$account.


'&phone='.$phone;

if (empty($name)) {
header("Location: ../index.php?error=Name is required&$user_data");
}else if (empty($email)) {
header("Location: ../index.php?error=Email is required&$user_data");
}else if (empty($email)) {
header("Location: ../index.php?error=salary is required&$user_data");
}else if (empty($email)) {
header("Location: ../index.php?error=account is required&$user_data");
}else if (empty($email)) {
header("Location: ../index.php?error=phone is required&$user_data");
}else {

$sql = "INSERT INTO users(name, email, salary, account, phone)


VALUES('$name', '$email', '$salary', '$account', '$phone')";
$result = mysqli_query($conn, $sql);
if ($result) {
header("Location: ../read.php?success=successfully created");
}else {
header("Location: ../index.php?error=unknown error occurred&$user_data");
}
}

delete.php

<?php

if(isset($_GET['id'])){
include "../db_conn.php";
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$id = validate($_GET['id']);

$sql = "DELETE FROM users


WHERE id=$id";
$result = mysqli_query($conn, $sql);
if ($result) {
header("Location: ../read.php?success=successfully deleted");
}else {
header("Location: ../read.php?error=unknown error occurred&$user_data");
}

}else {
header("Location: ../read.php");
}

read.php

<?php

include "db_conn.php";

$sql = "SELECT * FROM users ORDER BY id DESC";


$result = mysqli_query($conn, $sql);

update.php

<?php

if (isset($_GET['id'])) {
include "db_conn.php";

function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

$id = validate($_GET['id']);

$sql = "SELECT * FROM users WHERE id=$id";


$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
$row = mysqli_fetch_assoc($result);
}else {
header("Location: read.php");
}

}else if(isset($_POST['update'])){
include "../db_conn.php";
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

$name = validate($_POST['name']);
$email = validate($_POST['email']);

$salary = validate($_POST['salary']);
$account = validate($_POST['account']);
$phone = validate($_POST['phone']);
$id = validate($_POST['id']);

if (empty($name)) {
header("Location: ../update.php?id=$id&error=Name is required");
}else if (empty($email)) {
header("Location: ../update.php?id=$id&error=Email is required");
}else if (empty($salary)) {
header("Location: ../update.php?id=$id&error=salary is required");
}else if (empty($account)) {
header("Location: ../update.php?id=$id&error=account is required");
}else if (empty($phone)) {
header("Location: ../update.php?id=$id&error=phone is required");
}else {

$sql = "UPDATE users


SET name='$name', email='$email', salary='$salary', account='$account', phone='$phone'
WHERE id=$id ";
$result = mysqli_query($conn, $sql);
if ($result) {
header("Location: ../read.php?success=successfully updated");
}else {
header("Location: ../update.php?id=$id&error=unknown error occurred&$user_data");
}
}
}else {
header("Location: read.php");
}

style.css

.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.container form {
width: 500px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.box {
width: 750px;
}
.container table {
padding: 20px;
border-radius: 10px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


}
.link-right {
display: flex;
justify-content: flex-end;
}
Output:
Program:

create.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account</title>
<style>
body{
background-image: url("np.jpg");
background-size:cover;
}
table{
width: 100px;
height:200px;
border:5px solid black;
}
table{
margin-top:150px
}
table tr td{
padding:10px;
}
label{
color:blue;
}
input{
border:2px solid blue;
width:200px;
height: 30px;
border-radius: 24px;
}
button{
width:100px;
height: 40px;
color:mediumBlue;
}
</style>
</head>
<body>
<h2 style="text-align:center; color:#fff; ">Create Account</h2>
<form action="" method="post">
<center>
<table style="border-color:crimson;">
<tr><h2><td><label for="">Name</lable></td> <td><input require type="text" name="name"
id=""></td><tr>
<td><label for="">Password</label></td> <td><input require type="password" name="pass"
id=""></td></tr>
<tr> <td><label for="">Email</label></td> <td><input require type="email" name="email"
id=""></td></tr>
<tr> <td><label for="">phone</label></td> <td><input require type="number" name="phone"

id=""></td></tr>
<tr> <td><label for="">Account no</label></td> <td><input require type="number" name="account"
id=""></td></tr></h2></tr>
<tr><td></td> <td><button name="btn">Create</button>
<p style="text-align:center;">Not yet account?<a href="log.php">log in</a></p></td></tr></table></center>
</form>
<center>
<?php
if(isset($_POST['btn'])){
$con=new mysqli("localhost","root","","userform");
if($_POST['name']!=''&&$_POST['pass']!=''&&$_POST['pass']!=''&&$_POST['email']!=''&&$_POST['phone']
!=''&&$_POST['account']!=''){
$sql="INSERT INTO usertable(name,password,email,phone,account)
VALUES('{$_POST['name']}','{$_POST['pass']}','{$_POST['email']}','{$_POST['phone']}','{$_POST['account'
]}' ) ";
if($con->query($sql)){
header("location:log.php");
echo"Account created";
}
else{
echo"Failed to create";
}
}
else{
echo"Fill all the field";
}
}
?>
</center>
</body>
</html>

log.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<style>
body{
background-image: url("np.jpg");
background-size:cover;
background-repeat: no-repeat;
background-position:relative;
}
table{
width: 100px;
height:200px;
border:5px solid black;
}
table{
margin-top:150px;
}
table tr td{

padding:15px;
}
label{
color:yellow;
}
input{
border:2px solid blue;
width:200px;
height: 30px;
border-radius: 24px;
}
button{
width:100px;
height: 40px;
color:blue;
}
p{
text-align: center;
}
a{
text-align: center;
}
</style>
<body>
<center>
<h1>Login</h1>
<form method="post">
<table>
<tr>
<td>
<label for="">User Name</label>
</td>
<td>
<input name="name" type="text">
</td></tr><tr>
<td>
<label for="">password</label>
</td>
<td>
<input name="pass" type="password">
</td></tr>
<tr><td></td><td><button name="button">Login</button>
<label for=""><p style="text-align:center;">Make your account?</label><a
href="create.php">Create</a></p></td></tr></table>
</form>
<?php
if(isset($_POST["button"])){
$con=new mysqli("localhost","root","","userform");
$sql="SELECT * FROM usertable WHERE name='{$_POST['name']}' AND password ='{$_POST['pass']}'";
$res=$con->query($sql);
if($res->num_rows>0){
header("location:success.html");
}else{
echo"Invalid user details";
}
}
?>
</center>
</body>
</html>

success.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Success page</title>
</head>
<style>
body{
background-image: url("netflix.jpg");
background-size:cover;
}
</style>
<body>
<h1 style="color: red;font-family: arial;margin-top: 100px;" align="center">Loged in successfully</h1>
</div>
</body>
</html>
Output:

You might also like