Web Design LAB RECORD

EX.
NO : 1
Design a landing page for a website using Adobe XD
Date :
1
OUTPUT :
2
3
Ex.no : 2
Design an Admin Dashboard for an E-commerce website using Adobe
Date : XD
4
OUTPUT:
5
6
EX.NO : 3
Design and develop an event registration form.
Date :
7
PROGRAM
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<title>Training Application Form</title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div class="testbox">
<form action="/">
<div class="banner">
<h1>Training Application Form</h1>
</div>
<div class="Details">
<div class="item1">
<p>Name</p>
<div class="name-item">
<input type="text" name="name" placeholder="First"/>
<input type="text" name="name" placeholder="Last"/>
</div>
</div>
<div class="item">
<p>Phone</p>
<input type="text" name="name"/>
</div>
<div class="item">
<p>Email</p>
<input type="text" name="Email"/>
</div>
8
<div class="item">
<p>Company name</p>
</div>
<div class="item4">
<p>Address</p>
<input type="text" name="name" placeholder="Street address" />
<div class="city-item">
<input type="text" name="name" placeholder="City" />
<input type="text" name="name" placeholder="district" />
<select>
<option value="">Country</option>
<option value="1">India</option>
<option value="2">USA</option>
<option value="3">China</option>
</select>
</div>
</div>
<h2>Course Details</h2>
<div class="item">
<p>Course Code</p>
</div>
<div class="item">
<p>Location</p>
</div>
<div class="item">
<p>Start Date</p>
<input type="date" name="bdate"/>
9
</div>
<button class="submit" type="submit">submit</button>
</form>
</div>
</div>
</body>
</html>
Style.css
html, body {
min-height: 100%;
}
body, div, form, input, select, p {
padding: 0;
margin: 0;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 22px;
width: 100%;
}
h1 {
position: absolute;
font-size: 32px;
color: #8b66ad;
text-align: center;
}
h2 {
font-weight: 500;
font-family:Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
10
color: #320b57;
}
.testbox {
justify-content: center;
align-items: center;
padding: 20px;
}
form {
margin: auto;
width: 80%;
padding: 20px;
border-radius: 6px;
background:#FFC5C5;
box-shadow: rgb(255, 255, 255)20px 0 #095484;
}
.banner {
position: relative;
height: 100px;
background-size: cover;
display: flex;
text-align: center;
background-color:rgb(158, 98, 134), 131, 165;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
11
width: 100%;
height: 100%;
}
input, select {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input {
width: calc(80% - 10px);
padding: 5px;
}
select {
width: 80%;
padding: 7px 0;}
.item:hover p,input:hover::placeholder\
.item input:hover, .item select:hover {
border: 1px solid transparent;
box-shadow: 0 0 6px 0 #095484;
color: #095484;
}
.item1 {
position: relative;
margin: 10px 0;
}
.name-item{
12
display: flex;
}
.item4{
margin: auto;
display: contents;
width: 100%;
}
.city-item{
display: flex;
}
[type="date"]::-webkit-calendar-picker-indicator {
right: 1%;
z-index: 2;
opacity: 0;
cursor: pointer;
}
button {
width: 150px;
padding: 10px;
background: #095484;
font-size: 16px;
color: #fff;
cursor: pointer;
}
button:hover {
background: #0666a3;
}
.Details{
margin-left: 28%;
13
display: flexbox;
width: 60%;
}
OUTPUT :
14
15
Ex.No : 4
Design and develop a sticky navbar using floats and SASS.
Date :
16
PROGRAM
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style>
:root {
font: 400 2ch/1.25 Consolas;
}
body {
font-size: 2ch
}
#editor {
height: 100px;
width: 375px;
margin: 10px auto 0;
}
fieldset {
margin: 2px auto 15px;
width: 375px;
}
button {
width: 5ex;
text-align: center;
padding: 1px 3px;
}
</style>
</head>
<body>
17
<fieldset id="editor" contenteditable="true">
</fieldset>
<fieldset>
<button class="fontStyle" onclick="document.execCommand('italic',false,null);"
title="Italicize Highlighted Text"><i>I</i>
</button>
<button class="fontStyle" onclick="document.execCommand( 'bold',false,null);"
title="Bold Highlighted Text"><b>B</b>
</button>
<button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"
title='Underline Highlighted Text'><u>U</u>
</button>
</fieldset>
</body>
</html>
OUTPUT:
18
19
Ex.No : 5
Design and develop a developer portfolio page. Develop the layout using
Date : flexbox and ensure the page is responsive.
20
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="styles.css">
<title>TamilNadu Portfolio</title>
</head>
<body>
<header>
<div class="container">
<h1>Tamil Nadu </h1>
<b><h3>The Incredible State of India</h3></b>
</div>
</header>
<section class="projects">
<b><h1>TOURIST PLACES</h1></b>
<div class="project">
<h3>Chennai</h3>
<img src="chennai.jpg" alt="A beautiful example image">
<p>Chennai is the capital city of Tamil Nadu. The Marina beach especially is a place
of festivities with hundreds of shops selling locally handmade items. Chennai is connected by
an international airport and railway station so tourists can reach the city from any corner of the
world.</p>
</div>
<h3>Ooty</h3>
<img src="ooty2.jpg" alt="A beautiful example image">
21
<p>Ooty is a popular hill station in Tamil Nadu famous for its lush green hills and
beautiful flower gardens. The popular Tamilnadu tourist places in Ooty are botanical gardens,
rose gardens, pine forests, St Stephen’s Church, The Tea Factory & The Tea Museum,
Murugan Temple, Elk Hill, Doddabetta Peak, etc.</p>
</div>
<h3>Kanyakumari</h3>
<img src="kanyakumari.jpg" alt="A beautiful example image">
<p>Kanyakumari is the southernmost point in India. The popular places of attraction
here are Thiruvalluvar Statue, Kanyakumari Beach, Mahatma Gandhi Mandapam, Sarvani
Shaktipeeth Shri Kanya Kumari Bhagavathy Amman Temple, Our Lady of Ransom Shrine,
Sunset View Point, and Vattakottai Fort.</p>
</div>
</div>
</section>
<footer>
<section class="contact">
<h2>Contact</h2>
<p>Email: tngov.in</p>
<p></p>
</div>
</section>
</footer>
</body>
</html>
styles.css
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
22
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
header h1 {
margin: 0;
}
.projects {
background-color: #f4f4f4;
padding: 40px 0;
}
.project {
border: 2px double black;
padding: 10px;
}
@media (max-width: 600px) {
.container {
padding: 10px;
}
}
footer{
background-color: blueviolet;
23
}
OUTPUT:
24
25
26
Ex.No : 6
Design and develop pricing card list which are responsive using plain
Date : CSS and Flexbox.
27
PROGRAM:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Pricing Cards</title>
</head>
<body>
<div class="pricing-cards-container">
<div class="pricing-card">
<h2>Iphone</h2>
<img src="iphone15.jpg" alt="A beautiful example image">
<p class="price">Rs.79,999</p>
<ul>
<li>RAM : 8GB</li>
<li>SSD : 128GB (Expandable)</li>
<li>Camera : 48mp</li>
</ul>
<button>Buy Now</button>
</div>
<h2>Samsung S23 Ultra</h2>
<img src="Samsung galaxy S23.jpg" alt="A beautiful example image">
<p class="price">Rs.1,00,900</p>
<ul>
<li>RAM : 8GB</li>
28
</ul>
</div>
<h2>Vivo V17</h2>
<img src="vivo popup phone.jpg" alt="A beautiful example image">
<p class="price">Rs.33,000</p>
<ul>
<li>RAM : 8GB</li>
</ul>
</div>
</div>
</body>
</html>
Style.css
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pricing-container {
display: flex;
justify-content: space-around;
29
flex-wrap: wrap;
padding: 20px;
}
.pricing-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
margin: 10px;
flex: 1;
max-width: 300px;
transition: transform 0.3s;
}
.pricing-card:hover {
transform: scale(1.05);
}
.price {
font-size: 1.5em;
color: #333;
margin: 10px 0;
}
ul {
list-style: none;
padding: 0;
}
30
li {
margin: 5px 0;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #45a049;
}
OUTPUT:
31
32
Ex.No : 7
Develop a register form and validate it using JavaScript. Design the
Date : forms using CSS3 and display Error Messages in the HTML page.
33
PROGRAM
INDEX.HTML
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Form Validation</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script defer src="./nav.js"></script>
</head>
<body>
<form id="form" action="/">
<h1>Registration Form</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
<label for="email">Email</label>
<input id="email" name="email" type="text">
</div>
34
<label for="phonenumber">phonenumber</label>
<input id="phonenumber" name="phonenumber" type="tel">
</div>
<label for="password">Password</label>
<input id="password"name="password" type="password">
</div>
<label for="password2">confirm password</label>
<input id="password2"name="password2" type="password">
</div>
<button type="submit">Sign Up</button>
</form>
</div>
</body>
</html>
STYLE.CSS
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: 'Poppins', sans-serif;
}
#form {
width: 300px;
margin: 20vh auto 0 auto;
padding: 20px;
background-color: whitesmoke;
border-radius: 4px;
35
font-size: 12px;
}
#form h1 {
color: #0f2027;
text-align: center;
}
#form button {
padding: 10px;
margin-top: 10px;
width: 100%;
color: white;
background-color: rgb(41, 57, 194);
border: none;
border-radius: 4px;
}
.input-control {
display: flex;
flex-direction: column;
}
.input-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 12px;
padding: 10px;
width: 100%;
}
.input-control input:focus {
outline: 0;
}
36
.input-control.success input {
border-color: #09c372;
}
.input-control.error input {
border-color: #ff3860;
}
.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}
JAVASCRIPT
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const phonenumber = document.getElementById('phonenumber');
form.addEventListener('submit', e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {

const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = message;
inputControl.classList.add('error');
37
inputControl.classList.remove('success')
}
const setSuccess = element => {

const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector('.error');
errorDisplay.innerText = '';
inputControl.classList.add('success');
inputControl.classList.remove('error');
};
const isValidEmail = email => {

const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-
9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
const phonenumbervalue = phonenumber.value.trim();
if (usernameValue === '') {

setError(username, 'Username is required');
} else if (usernameValue.length < 3) {
setError(username, 'username must be more than 3 character.')
} else {
setSuccess(username);
38
}
if (emailValue === '') {

setError(email, 'Email is required');
} else if (!isValidEmail(emailValue)) {
setError(email, 'Provide a valid email address');
} else {
setSuccess(email);
}
if (passwordValue === '') {

setError(password, 'Password is required');
} else if (passwordValue.length < 8) {
setError(password, 'Password must be at least 8 character.')
} else {
setSuccess(password);
}
if (password2Value === '') {

setError(password2, 'Please confirm your password');
} else if (password2Value !== passwordValue) {
setError(password2, "Passwords doesn't match");
} else {
setSuccess(password2);
}
if (phonenumbervalue === '') {

setError(phonenumber, "please enter a number");
}
39
else if (phonenumbervalue.length < 10 || phonenumbervalue.length > 10) {
setError(phonenumber, "enter only 10 digit number");
}
else {
setSuccess(phonenumber);
}
};
OUTPUT :
40
41
Ex.No : 8
Develop a website that uses the ‘jsonplaceholder’ Api to get posts data
Date : and display them in the form of a card. Use Flexbox to style the cards
42
PROGRAM
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FlexBox Card</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section class="container">
<div class="Card">
<div class="card_image kochi"></div>
<h3>KOCHI</h3>
<p><br>Kochi also known by its former name Cochin is a major port city along the
Malabar Coast of India bordering the Laccadive Sea. It is part of the district of Ernakulam in
the state of Kerala. The city is also commonly referred to as Ernakulam. As of 2011, the
Kochi Municipal Corporation had a population of 677,381[4].</p>
<a href="https://en.wikipedia.org/wiki/Kochi
">read more</a>
</div>
<div class="Card">
<div class="card_image wayanad"></div>
<h3>WAYANAD</h3>
<p><br>Wayanad is a district in the north-east of the Indian state of Kerala, with
administrative headquarters at the municipality of Kalpetta. It is the only plateau in Kerala.[7]
The Wayanad Plateau forms a continuation of the Mysore Plateau, the southern portion of
Deccan Plateau which links the Western Ghats with the Eastern Ghats.</p>
<a href="https://en.wikipedia.org/wiki/Wayanad_district">read more</a>
</div>
43
<div class="Card">
<div class="card_image munnar"></div>
<h3>MUNNAR</h3>
<p><br>Munnar is a town and hill station in the Idukki district of the southwestern
Indian state of Kerala.Munnar is situated at around 1,600 metres (5,200 ft) above mean sea
level,[4] in the Western Ghats mountain range. Munnar is also called the "Kashmir of South
India" and is a popular honeymoon destination.</p>
<a href="https://en.wikipedia.org/wiki/Munnar
">read more</a>
</div>
</section>
</body>
</html>
CSS:
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background: rgb(20, 21, 20);
}
.container {
display: flex;
flex-wrap: nowrap;
}
.Card {
background: #ffffff;
width: 270px;
44
height: 500px;
margin: 10px;
}
.card_image {
height: 170px;
background-size: cover;
border-radius: 0 0 0 0;
}
.kochi {
background-image: url('image/kochi.jpg.jpeg');
}
.wayanad {
background-image: url('image/wayanad.jpg');
}
.munnar {
background-image: url('image/munnar.jpeg');
}
.Card h3 {
padding: 10px;
}
.Card p {
padding: 10px;
}
45
.Card a {
background-color: black;
color: white;
padding: 15px 20px;
display: block;
text-align: center;
margin: 20px 50px;
}
.Card:hover {
background-color: gray;
color: white;
cursor: pointer;
transform: scale(1.05);
}
OUTPUT :
46
47
Ex.No : 9
Develop a php server that Creates, Reads, Updates, Deletes Todo and
Date : save them in MySQL database
48
PROGRAM
<?php
$servername = "localhost";
$username = "root";
$password = "root123";
$database = "todo_app";
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "CREATE TABLE IF NOT EXISTS todos (
id INT AUTO_INCREMENT PRIMARY KEY,
First_Name VARCHAR(255) NOT NULL,
Last_Name VARCHAR (255) NOT NULL,
Email VARCHAR NOT NULL,
Gender TEXT,
)";
$conn->query($sql);
function createTodo($First_Name, $Email) {
global $conn;
$sql = "INSERT INTO todos (First_Name, Email) VALUES ('$First_Name', '$Email')";
$conn->query($sql);
return $conn->insert_id;
}
function readTodos() {
global $conn;
$sql = "SELECT * FROM todos";
$result = $conn->query($sql);
$todos = [];
while ($row = $result->fetch_assoc()) {
49
$todos[] = $row;
}
return $todos;
}
function updateTodo($id, $First_Name, $Email, $Gender) {
global $conn;
$sql = "UPDATE todos SET First_Name='$First_Name', Email='$Email',
Gender=$Gender WHERE id=$id";
$conn->query($sql);
}
function deleteTodo($id) {
global $conn;
$sql = "DELETE FROM todos WHERE id=$id";
$conn->query($sql);
}
$conn->close();
?>
OUTPUT:
50
51
Ex.No : 10
Develop a php server that registers and authenticates user session and
Date : stores user data in MySQL database.
52
PROGRAM
PHP:
<?php include 'includes/session.php'; ?>
<?php include 'includes/header.php'; ?>
<body class="hold-transition skin-blue layout-top-nav">
<div class="wrapper">
<?php include 'includes/navbar.php'; ?>

<div class="content-wrapper">

<section class="content">
<div class="row">
<div class="col-sm-9">
<?php
if(isset($_SESSION['error'])){
echo "
<div class='alert alert-danger'>
".$_SESSION['error']."
</div>
";
unset($_SESSION['error']);
}
?>
<div id="carousel-example-generic" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
53
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/banner1.png" alt="First slide">
</div>
<div class="item">
<img src="images/banner2.png" alt="Second slide">
</div>
<div class="item">
<img src="images/banner3.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-
slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-
slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
<h2>Monthly Top Sellers</h2>
<?php
$month = date('m');
$conn = $pdo->open();
try{
$inc = 3;
$stmt = $conn->prepare("SELECT *, SUM(quantity) AS total_qty FROM
details LEFT JOIN sales ON sales.id=details.sales_id LEFT JOIN products ON
products.id=details.product_id WHERE MONTH(sales_date) = '$month' GROUP BY
details.product_id ORDER BY total_qty DESC LIMIT 6");
$stmt->execute();
54
foreach ($stmt as $row) {
$image = (!empty($row['photo'])) ? 'images/'.$row['photo'] :
'images/noimage.jpg';
$inc = ($inc == 3) ? 1 : $inc + 1;
if($inc == 1) echo "<div class='row'>";
echo "
<div class='col-sm-4'>
<div class='box box-solid'>
<div class='box-body prod-body'>
<img src='".$image."' width='100%' height='230px'
class='thumbnail'>
<h5><a
href='product.php?product=".$row['slug']."'>".$row['name']."</a></h5>
</div>
<div class='box-footer'>
<b>$ ".number_format($row['price'], 2)."</b>
</div>
</div>
</div>
";
if($inc == 3) echo "</div>";
}
if($inc == 1) echo "<div class='col-sm-4'></div><div class='col-sm-
4'></div></div>";
if($inc == 2) echo "<div class='col-sm-4'></div></div>";
}
catch(PDOException $e){
echo "There is some problem in connection: " . $e->getMessage();
}
$pdo->close();
55
?>
</div>
<div class="col-sm-3">
<?php include 'includes/sidebar.php'; ?>
</div>
</div>
</section>
</div>
</div>
<?php include 'includes/footer.php'; ?>
</div>
<?php include 'includes/scripts.php'; ?>
</body>
</html>
MYSQL:
-- phpMyAdmin SQL Dump
-- version 4.2.11
-- http://www.phpmyadmin.net
--
56
-- Host: 127.0.0.1
-- Generation Time: Jul 09, 2018 at 03:25 PM
-- Server version: 5.6.21
-- PHP Version: 5.6.3
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";
-- Table structure for table `cart`
use ecomm;
CREATE TABLE IF NOT EXISTS `cart` (
ìd` int(11) NOT NULL,
ùser_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`quantity` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1;
-- Table structure for table `category`
CREATE TABLE IF NOT EXISTS `category` (

`name` varchar(100) NOT NULL,
`cat_slug` varchar(150) NOT NULL
-- Dumping data for table `category`
INSERT INTO `category` (ìd`, `name`, `cat_slug`) VALUES

(1, 'Laptops', 'laptops'),
(2, 'Desktop PC', 'desktop-pc'),
(3, 'Tablets', 'tablets'),
57
(4, 'Smart Phones', '');
-- Table structure for table `details`
CREATE TABLE IF NOT EXISTS `details` (

`sales_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`quantity` int(11) NOT NULL
-- Dumping data for table `details`
INSERT INTO `details` (ìd`, `sales_id`, `product_id`, `quantity`) VALUES

(14, 9, 11, 2),
(15, 9, 13, 5),
(16, 9, 3, 2),
(17, 9, 1, 3),
(18, 10, 13, 3),
(19, 10, 2, 4),
(20, 10, 19, 5);
-- Table structure for table `products`
CREATE TABLE IF NOT EXISTS `products` (

`category_id` int(11) NOT NULL,
`name` text NOT NULL,
`description` text NOT NULL,
`slug` varchar(200) NOT NULL,
58
`price` double NOT NULL,
`photo` varchar(200) NOT NULL,
`date_view` date NOT NULL,
`counter` int(11) NOT NULL
-- Dumping data for table `products`
INSERT INTO `products` (ìd`, `category_id`, `name`, `description`, `slug`, `price`, `photo`,
`date_view`, `counter`) VALUES
(1, 1, 'DELL Inspiron 15 7000 15.6', '<p>15-inch laptop ideal for gamers. Featuring the latest
Intel® processors for superior gaming performance, and life-like NVIDIA®
GeForce® graphics and an advanced thermal cooling design.</p>\r\n', 'dell-inspiron-15-
7000-15-6', 899, 'dell-inspiron-15-7000-15-6.jpg', '2018-07-09', 2),
(2, 1, 'MICROSOFT Surface Pro 4 & Typecover - 128 GB', '<p>Surface Pro 4 powers
through everything you need to do, while being lighter than ever before</p>\r\n\r\n<p>The
12.3 PixelSense screen has extremely high contrast and low glare so you can work through
the day without straining your eyes</p>\r\n\r\n<p>keyboard is not included and needed to be
purchased separately</p>\r\n\r\n<p>Features an Intel Core i5 6th Gen (Skylake)
Core,Wireless: 802.11ac Wi-Fi wireless networking; IEEE 802.11a/b/g/n compatible
Bluetooth 4.0 wireless technology</p>\r\n\r\n<p>Ships in Consumer packaging.</p>\r\n',
'microsoft-surface-pro-4-typecover-128-gb', 799, 'microsoft-surface-pro-4-typecover-128-
gb.jpg', '2018-05-10', 3),
(3, 1, 'DELL Inspiron 15 5000 15.6', '<p>Dell's 15.6-inch, midrange notebook is a
bland, chunky block. It has long been the case that the Inspiron lineup lacks any sort of
aesthetic muse, and the Inspiron 15 5000 follows this trend. It's a plastic, silver slab
bearing Dell's logo in a mirror sheen.</p>\r\n\r\n<p>Lifting the lid reveals the 15.6-
inch, 1080p screen surrounded by an almost offensively thick bezel and a plastic deck with a
faux brushed-metal look. There's a fingerprint reader on the power button, and the
keyboard is a black collection of island-style keys.</p>\r\n', 'dell-inspiron-15-5000-15-6',
599, 'dell-inspiron-15-5000-15-6.jpg', '2018-05-12', 1),
(5, 3, 'APPLE 9.7" iPad - 32 GB, Gold', '<p>9.7 inch Retina Display, 2048 x 1536
Resolution, Wide Color and True Tone Display</p>\r\n\r\n<p>Apple iOS 9, A9X chip with
64bit architecture, M9 coprocessor</p>\r\n\r\n<p>12 MP iSight Camera, True Tone Flash,
Panorama (up to 63MP), Four-Speaker Audio</p>\r\n\r\n<p>Up to 10 Hours of Battery
Life</p>\r\n\r\n<p>iPad Pro Supports Apple Smart Keyboard and Apple Pencil</p>\r\n',
'apple-9-7-ipad-32-gb-gold', 339, 'apple-9-7-ipad-32-gb-gold.jpg', '2018-07-09', 3)
59
60
61
62

Web Design LAB RECORD

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design LAB RECORD

Uploaded by

Copyright:

Available Formats

EX.

const setError = (element, message) => {

const setSuccess = element => {

const isValidEmail = email => {

if (usernameValue === '') {

if (emailValue === '') {

if (passwordValue === '') {

if (password2Value === '') {

if (phonenumbervalue === '') {

<?php include 'includes/navbar.php'; ?>

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

-- Table structure for table `category`

CREATE TABLE IF NOT EXISTS `category` (

-- Dumping data for table `category`

INSERT INTO `category` (`id`, `name`, `cat_slug`) VALUES

-- Table structure for table `details`

CREATE TABLE IF NOT EXISTS `details` (

-- Dumping data for table `details`

INSERT INTO `details` (`id`, `sales_id`, `product_id`, `quantity`) VALUES

-- Table structure for table `products`

CREATE TABLE IF NOT EXISTS `products` (

You might also like