CSS Archives - Web Design

CSS DEMOS HTML JAVASCRIPT

Progress Step User Interface Design Patterns: Tips, Code Snippets & Freebies

Progress steps are great for user experience. You typically find these on signup pages and checkout forms where the user needs to enter data across multiple steps. Breadcrumbs can also use this progress UI since they flow in a natural hierarchical order. But how can you design a progress bar structure that works for your site? […]

CSS HTML jQuery-Ajax Tutorials

How to Create Simple Sliding Menu Using CSS & jQuery

There are plenty of Responsive menus on the net, which you can incorporate within your project to make an exciting navigation system. But more often than not we end up fixing and tweaking things with those menus! So today let’s focus on creating our own simple sliding navigation menu which will fit any screen size […]

CSS DEMOS HTML MYSQL PHP PHP PROJECT

How to Fetch Data in Excel or Generate Excel file in PHP

File structure for this tutorial : config.php (database connection file) index.php (For fetching data ) genrate-excel.php (For genrating excel file) Create a sql table tblemployee. Structure of sql table employe .

CREATE TABLE `tblemploye` (
  `id` int(11) NOT NULL,
  `fullName` varchar(120) NOT NULL,
  `emailId` varchar(150) NOT NULL,
  `phoneNumber` int(11) NOT NULL,
  `department` varchar(100) NOT NULL,
  `joiningDate` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `tblemploye`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `tblemploye`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
COMMIT;

CREATE TABLE `tblemploye` (

`id` int(11) NOT NULL,

`fullName` varchar(120) NOT NULL,

`emailId` varchar(150) NOT NULL,

`phoneNumber` int(11) NOT NULL,

`department` varchar(100) NOT NULL,

`joiningDate` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tblemploye`

ADD PRIMARY KEY (`id`);

ALTER TABLE `tblemploye`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

COMMIT;

Now insert some data into this table.

INSERT INTO `tblemploye` (`id`, `fullName`, `emailId`, `phoneNumber`, `department`, `joiningDate`) VALUES
(1, 'Ogbugbu Ejiroghene, 'ogbugbu14@gmail.com', 08154761214, 'IT', '2018-05-01'),
(2, 'Ejiro', 'john@test.com', 45455454, 'HR', '2017-08-12'),
(3, 'Kefe', 'demo@test.com', 23423423, 'Account', '2016-10-01'),
(4, 'Test', 'test@test.com', 834856384, 'IT', '2017-12-01');

INSERT INTO `tblemploye` (`id`, `fullName`, `emailId`, `phoneNumber`, `department`, `joiningDate`) VALUES

(1, 'Ogbugbu Ejiroghene, 'ogbugbu14@gmail.com', 08154761214, 'IT', '2018-05-01'),

(2, 'Ejiro', 'john@test.com', 45455454, 'HR', '2017-08-12'),

(3, 'Kefe', 'demo@test.com', 23423423, 'Account', '2016-10-01'),

(4, 'Test', 'test@test.com', 834856384, 'IT', '2017-12-01');

Index.php in this file we will read the data from database.

?php
$query=mysqli_query($con,"select * from tblemploye");
$cnt=1;
while ($row=mysqli_fetch_array($query)) {
 
?>
  <tr>
                <td><?php echo $cnt;  ?></td>
                <td><?php echo $row['fullName']?></td>
                <td><?php echo $row['emailId']?></td>
                <td><?php echo $row['phoneNumber']?></td>
                <td><?php echo $row['department']?></td>
                <td><?php echo $row['joiningDate']?></td>
            </tr>
<?php 
$cnt++;
} ?>       
</table>

?php

$query=mysqli_query($con,"select * from tblemploye");

$cnt=1;

while ($row=mysqli_fetch_array($query)) {

<tr>

</tr>

<?php

$cnt++;

} ?>

</table>

genrate-excel.php in this […]

CSS HTML

Fancy Neon Text Effects with CSS3

Did you ever want to create fancy neon effects? No? Well…to bad I’ll explain how to create them anyways. Neon text mostly is achieved by using the CSS3 property “text-shadow” on multiple layers and a saturated colour, as well as some animations to look more realistic. Live Example The most important are the “text-shadow” – […]

CSS HTML MYSQL PHP

Upload and Preview sing PHP and MySQL Database

User experience can be greatly improved on an image upload feature if we enable the user to preview the image they have selected before actually uploading it to the server by clicking the upload button. In this tutorial, we will create a form that takes two inputs: the user’s profile picture (image), and their bio […]

CSS DEMOS HTML MYSQL PHP PHP PROJECT WEB DEVELOPMENT

Creating a web chat with PHP and MySQL

In this Tutorial, I’ll show you how you can write your very own web-based Chat App using HTML, CSS, JavaScript/jQuery, PHP and MySQL. For a full functioning Web-Chat we’ll need three basic components: A Client-Side HTML Document that sends the Chat Text and receives Data from the database A PHP file which writes user input […]

CSS HTML MYSQL PHP WEB DEVELOPMENT

PHP CRUD Create, edit, update and delete posts with MySQL database

Creating, editing, updating and deleting content on a website is what makes the site dynamic. That’s what we are going to be doing in this post. A user who visits our site will be able to create posts that will be saved in a mysql database, retrieve the posts from the database and display them on […]

CSS HTML MYSQL PHP WEB DEVELOPMENT

Contact form with mail function and Storing data in the database

Contact form with mail function and Storing in the database project has two module : User Module admin Module User Module Sql table structure for tblcontactdata table where we will store our data

CREATE TABLE `tblcontactdata` (
  `id` int(11) NOT NULL,
  `FullName` varchar(200) DEFAULT NULL,
  `PhoneNumber` char(12) DEFAULT NULL,
  `EmailId` varchar(200) DEFAULT NULL,
  `Subject` varchar(255) DEFAULT NULL,
  `Message` mediumtext,
  `UserIp` varbinary(16) DEFAULT NULL,
  `PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `Is_Read` int(1) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `tblcontactdata`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

CREATE TABLE `tblcontactdata` (

`id` int(11) NOT NULL,

`FullName` varchar(200) DEFAULT NULL,

`PhoneNumber` char(12) DEFAULT NULL,

`EmailId` varchar(200) DEFAULT NULL,

`Subject` varchar(255) DEFAULT NULL,

`Message` mediumtext,

`UserIp` varbinary(16) DEFAULT NULL,

`PostingDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,

`Is_Read` int(1) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `tblcontactdata`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

Now create a HTML for user inputs. index.php

<form name="ContactForm" method="post">
 
<h4>your name</h4>
<input type="text" name="name" class="user" placeholder="Johne"  autocomplete="off" required>
 
<h4>your phone number</h4>
<input type="text" name="phonenumber" class="phone" placeholder="0900.234.145678" maxlength="10" required autocomplete="off">
 
<h4>your email address</h4>
<input type="email" name="emailaddres" class="email" placeholder="Example@mail.com" required autocomplete="off">
 
<h4>your subject</h4>
<input type="text" name="subject" class="email" placeholder="Subject" autocomplete="off">
 
<h4>your message</h4>
<textarea class="mess" name="message" placeholder="Message" required></textarea>
<input type="submit" value="send your message" name="submit">
</form>

<h4>your phone number</h4>

<h4>your email address</h4>

<h4>your subject</h4>

<h4>your message</h4>

</form>

MYSql database connection

<?php 
// DB credentials.
define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','contactdb');
// Establish database connection.
try
{
$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
catch (PDOException $e)
{
exit("Error: " . $e->getMessage());
}
?>

<?php

// DB credentials.

define('DB_HOST','localhost');

define('DB_USER','root');

define('DB_PASS','');

define('DB_NAME','contactdb');

// Establish database connection.

try

{

$dbh = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME,DB_USER, DB_PASS,array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));

}

catch (PDOException $e)

{

exit("Error: " . $e->getMessage());

}

Insert Data into Database

include('config.php');
if(isset($_POST['submit']))
{
// getting Post values	
$name=$_POST['name'];
$phoneno=$_POST['phonenumber'];
$email=$_POST['emailaddres'];
$subject=$_POST['subject'];
$message=$_POST['message'];
$uip = $_SERVER ['REMOTE_ADDR'];
$isread=0;
// Insert quaery
$sql="INSERT INTO  tblcontactdata(FullName,PhoneNumber,EmailId,Subject,Message,UserIp,Is_Read) VALUES(:fname,:phone,:email,:subject,:message,:uip,:isread)";
$query = $dbh->prepare($sql);
// Bind parameters
$query->bindParam(':fname',$name,PDO::PARAM_STR);
$query->bindParam(':phone',$phoneno,PDO::PARAM_STR);
$query->bindParam(':email',$email,PDO::PARAM_STR);
$query->bindParam(':subject',$subject,PDO::PARAM_STR);
$query->bindParam(':message',$message,PDO::PARAM_STR);
$query->bindParam(':uip',$uip,PDO::PARAM_STR);
$query->bindParam(':isread',$isread,PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
//mail function for sending mail
$to=$email; 
$headers .= "MIME-Version: 1.0"."\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
$headers .= 'From:PHPGurukul Contact Form Demo<info@phpgurukul.com>'."\r\n";
$ms.="<html></body><div>
<div><b>Name:</b> $name,</div>
<div><b>Phone Number:</b> $phoneno,</div>
<div><b>Email Id:</b> $email,</div>";
$ms.="<div style='padding-top:8px;'><b>Message : </b>$message</div><div></div></body></html>";
mail($to,$subject,$ms,$headers);
echo "<script>alert('Your info submitted successfully.');</script>";
}
else 
{
echo "<script>alert('Something went wrong. Please try again');</script>";
}
}

include('config.php');

if(isset($_POST['submit']))

{

// getting Post values

$name=$_POST['name'];

$phoneno=$_POST['phonenumber'];

$email=$_POST['emailaddres'];

$subject=$_POST['subject'];

$message=$_POST['message'];

$uip = $_SERVER ['REMOTE_ADDR'];

$isread=0;

// Insert quaery

$sql="INSERT INTO tblcontactdata(FullName,PhoneNumber,EmailId,Subject,Message,UserIp,Is_Read) VALUES(:fname,:phone,:email,:subject,:message,:uip,:isread)";

$query = $dbh->prepare($sql);

// Bind parameters

$query->bindParam(':fname',$name,PDO::PARAM_STR);

$query->bindParam(':phone',$phoneno,PDO::PARAM_STR);

$query->bindParam(':email',$email,PDO::PARAM_STR);

$query->bindParam(':subject',$subject,PDO::PARAM_STR);

$query->bindParam(':message',$message,PDO::PARAM_STR);

$query->bindParam(':uip',$uip,PDO::PARAM_STR);

$query->bindParam(':isread',$isread,PDO::PARAM_STR);

$query->execute();

$lastInsertId = $dbh->lastInsertId();

if($lastInsertId)

{

//mail function for sending mail

$to=$email;

$headers .= "MIME-Version: 1.0"."\r\n";

$headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";

$headers .= 'From:PHPGurukul Contact Form Demo<info@phpgurukul.com>'."\r\n";

$ms.="<html></body><div>

<div><b>Phone Number:</b> $phoneno,</div>

<div><b>Email Id:</b> $email,</div>";

$ms.="<div style='padding-top:8px;'><b>Message : </b>$message</div><div></div></body></html>";

mail($to,$subject,$ms,$headers);

echo "<script>alert('Your info submitted successfully.');</script>";

}

else

{

echo "<script>alert('Something went wrong. Please try again');</script>";

}