Thursday, 12 May 2016
How to create modal dialog using bootstrap
We are now a days using css3 and html5,but responsive website is very necessary for all users who are surfing all sites online
Developer have to create such designs for all devices,you can create it using bootstrap css and bootstrap js.
Please check below code for sample modal popup.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Friend modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hello!!!</h4>
</div>
<div class="modal-body">
<p>Hello friends,this is sample modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Developer have to create such designs for all devices,you can create it using bootstrap css and bootstrap js.
Please check below code for sample modal popup.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Friend modal</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Hello!!!</h4>
</div>
<div class="modal-body">
<p>Hello friends,this is sample modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Tuesday, 7 April 2015
Box Animation Effect using CSS
Hi friends,Today i am posting here a topic which is not part of programming.I have created one simple animation effect using HTML5 and CSS3.Many of you have tried it by your own.You may find it useful because this code is so simple.
CSS
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
HTML
Lets see how whole code will do.
<html>
<head>
<title>Text Effect</title>
<style>
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
</style>
</head>
<body>
<h1>This is<br/>Image Animation of Box</h1><br/><br/>
<img src="e:\2.jpg" alt="flipped" border="0"/>
</body>
store file with whatevername.html and run in browser.change image path with your image path in img tag.
CSS
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
HTML
Lets see how whole code will do.
<html>
<head>
<title>Text Effect</title>
<style>
h1:hover{
/* Rotate div */
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
h1{
/* Rotate div */
width: 50%;
height: 20%;
background-color: yellow;
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
transform: rotateY(180deg);
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
img
{
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
img:hover
{
-webkit-animation:spin1 4s linear infinite;
-moz-animation:spin1 4s linear infinite;
animation:spin1 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes spin1 { 100% { -moz-transform: rotate(360deg);font-size: 10px;} }
@-webkit-keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
@keyframes spin1 { 100% { -webkit-transform: rotate(360deg); font-size: 10px; } }
</style>
</head>
<body>
<h1>This is<br/>Image Animation of Box</h1><br/><br/>
<img src="e:\2.jpg" alt="flipped" border="0"/>
</body>
store file with whatevername.html and run in browser.change image path with your image path in img tag.
Friday, 3 April 2015
Sticky Header using HTML5 and CSS3
Hi friends,Today i am posting here a topic which is not part of programming.I have created one simple sticky header using HTML5 and CSS3.Many of you have tried it by your own.You may find it useful because this code is so simple.
CSS
body{
margin:0px;
background:#000;
}
.header-cont {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
height: 204px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #CCC;
border: 1px solid #CCC;
height: 2000px;
margin: 70px auto;
}
.ul
{
width:100%;
list-style-type:none;
}
.ul li
{
display:inline-block;
list-style-type:none;
}
First of write simple css for page in which we will make three part.Header,content and menu.this is for study so i m trying make it as simple as i can.
HTML
Lets see how whole code will do.
<html>
<head>
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
height: 204px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
(this is css for sticky header.sticky header will work when we use position:fixed).just define this and header will take effect of sticky header.
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #CCC;
border: 1px solid #CCC;
height: 2000px;
margin: 70px auto;
}
.ul
{
width:100%;
list-style-type:none;
}
.ul li
{
display:inline-block;
list-style-type:none;
}
</style>
</head>
<body>
<div class="header-cont">
<h5>This is Sticky header demo by Ruchi Sanghvi</h5>
<div></div>
</div>
(this is portion for sticky header)
<div class="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</body>
</html>
happy coding!!
CSS
body{
margin:0px;
background:#000;
}
.header-cont {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
height: 204px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #CCC;
border: 1px solid #CCC;
height: 2000px;
margin: 70px auto;
}
.ul
{
width:100%;
list-style-type:none;
}
.ul li
{
display:inline-block;
list-style-type:none;
}
First of write simple css for page in which we will make three part.Header,content and menu.this is for study so i m trying make it as simple as i can.
HTML
Lets see how whole code will do.
<html>
<head>
<style type="text/css">
body{
margin:0px;
background:#000;
}
.header-cont {
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
height: 204px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
(this is css for sticky header.sticky header will work when we use position:fixed).just define this and header will take effect of sticky header.
.header {
height:50px;
background:#F0F0F0;
border:1px solid #CCC;
width:960px;
margin:0px auto;
}
.content {
width:960px;
background: #CCC;
border: 1px solid #CCC;
height: 2000px;
margin: 70px auto;
}
.ul
{
width:100%;
list-style-type:none;
}
.ul li
{
display:inline-block;
list-style-type:none;
}
</style>
</head>
<body>
<div class="header-cont">
<h5>This is Sticky header demo by Ruchi Sanghvi</h5>
<div></div>
</div>
(this is portion for sticky header)
<div class="content">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</div>
</body>
</html>
happy coding!!
Tuesday, 31 March 2015
Simple Registration using PHP
Hello Friends, As we have went through many topics like login,login with facebook,login with google,sms sending api,ffmpeg.But each and every website needs user to register on their website.they want user to be in touch with their website all time.Also they store data of user on website.For that one process is necessary which is known as registration.
All language like .NET,PHP,JAVA has codes to do registration.Even wordpress,drupal also do same.
But as PHP developer and being writing PHP codes,here i need to explain you how registration works and how code is implement.
First of all i will explain you process for same.
All language like .NET,PHP,JAVA has codes to do registration.Even wordpress,drupal also do same.
But as PHP developer and being writing PHP codes,here i need to explain you how registration works and how code is implement.
First of all i will explain you process for same.
- User come for visit on you website and signup for registration.
- When he goes on registration page,he fills simple information form on your site and submit it.
- All information which he inputs,they get stored into database.
Let's See this process in form of code:
HTML to create Form
index.php
<html>
<body>
<form action="" method="POST" name="form1" id="form1">
<label>Name:</label>
<input type="text" id="your_name" name="your_name" value=""/>
<label>User Name:</label>
<input type="text" id="user_name" name="user_name" value=""/>
<label>Password:</label>
<input type="text" id="pass" name="pass" value=""/>
<label>Confirm Password:</label>
<input type="text" id="c_pass" name="c_pass" value=""/>
<input type="submit" id="submit" name="submit" value="Submit"/>
</form>
</body>
</html>
PHP Code to store information:
index.php
paste this code upside of html in same file.
<?php
include('connect.php');
if(isset($_POST['submit']))
{
$your_name=$_POST['your_name'];
$user_name=$_POST['user_name'];
$pass=$_POST['pass'];
$insert="INSERT INTO users SET name='".$your_name."',user_name='".$user_name."',password='".$pass."'";
$res=mysql_query($insert) or die(mysql_error());
$id=mysql_insert_id();
if($id > 0)
{
header('location:index.php?msg=1');
}
else
{
header('location:index.php?msg=2');
}
}
?>
connect.php
<?php
$host="your_host_name";
$username="your_username";
$password="your_password";
$db="your_db_name";
$link=mysql_connect($host,$username,$password);
mysql_select_db($db,$link);
?>
Create database and make one table named "user" with fields username,password,name and other fields which you want from user to get stored.
run code...!!
Tuesday, 3 March 2015
Online Voting System
Hello Friends,Today I came with small application on this blog.I am sure you will like it.This system is name as "online voting system".
In this system,Right now voting functionality is shown.voting questions and options are static and also user is also static.
Here are two files are used and one database with one table.
config.php
<?php
$host="localhost";
$username="root";
$password="";
$db="test";
$link=mysql_connect($host,$username,$password);
mysql_select_db($db,$link);
?>
voting.php
<?php
include('config.php');
if(isset($_POST['submit1']))
{
$vote=$_POST['actor'];
$INSERT="insert into votes SET user_id='".$_SESSION['id']."',answer='".$vote."',create_date='now()'";
$res=mysql_query($INSERT) or die(mysql_error());
if(mysql_insert_id() > 0)
{
header("location:voting.php?msg=1");
}
}
$select="select * from votes where id>0";
$res1=mysql_query($select) or die(mysql_error());
$tot=mysql_num_rows($res1);
if(mysql_num_rows($res1) > 0)
{
$answer1=0;
$answer2=0;
$answer3=0;
$answer4=0;
while($row_s=mysql_fetch_array($res1))
{
if($row_s['answer']==1)
{
$answer1+=1;
$per1=($answer1/$tot) * 100;
}
else if($row_s['answer']==2)
{
$answer2+=1;
$per2=($answer2/$tot) * 100;
}
else if($row_s['answer']==3)
{
$answer3+=1;
$per3=($answer3/$tot) * 100;
}
else if($row_s['answer']==4)
{
$answer4+=1;
$per4=($answer4/$tot) * 100;
}
}
}
?>
<html>
<head>
<title>Online Voting System</title>
</head>
<body>
<?php if($_GET['msg']==1){?><span style="background:green;color:#FFF;border-radius:5px;font-size:14px;width:100%;height:100%;">Your vote is submitted successfully</span><?php } ?><br/>
<?php echo 'Total Votes '.$tot;?>
<div style="">
<span>Arjun Kapoor <?=$answer1;?> <?= $per1.'%';?></span><br/>
<span>Ranvir Kapoor <?=$answer2;?> <?= $per2.'%';?></span><br/>
<span>Rabir Kapoor <?=$answer3;?> <?= $per3.'%';?></span><br/>
<span>Varun Dhawan <?=$answer4;?> <?= $per4.'%';?></span><br/>
</div>
<h1>Who will take place of superstar?</h1>
<form id="voteform" name="voteform" action="" method="post">
<input type="radio" name="actor" id="actor" value="1">Arjun Kapoor<br/>
<input type="radio" name="actor" id="actor" value="2">Ranvir Kapoor<br/>
<input type="radio" name="actor" id="actor" value="3">Rabir Kapoor<br/>
<input type="radio" name="actor" id="actor" value="4">Varun Dhawan<br/>
<input type="submit" name="submit1" id="submit1" value="Vote"/>
</form>
</body>
</html>
Database table structure:
In this system,Right now voting functionality is shown.voting questions and options are static and also user is also static.
Here are two files are used and one database with one table.
config.php
<?php
$host="localhost";
$username="root";
$password="";
$db="test";
$link=mysql_connect($host,$username,$password);
mysql_select_db($db,$link);
?>
voting.php
<?php
include('config.php');
if(isset($_POST['submit1']))
{
$vote=$_POST['actor'];
$INSERT="insert into votes SET user_id='".$_SESSION['id']."',answer='".$vote."',create_date='now()'";
$res=mysql_query($INSERT) or die(mysql_error());
if(mysql_insert_id() > 0)
{
header("location:voting.php?msg=1");
}
}
$select="select * from votes where id>0";
$res1=mysql_query($select) or die(mysql_error());
$tot=mysql_num_rows($res1);
if(mysql_num_rows($res1) > 0)
{
$answer1=0;
$answer2=0;
$answer3=0;
$answer4=0;
while($row_s=mysql_fetch_array($res1))
{
if($row_s['answer']==1)
{
$answer1+=1;
$per1=($answer1/$tot) * 100;
}
else if($row_s['answer']==2)
{
$answer2+=1;
$per2=($answer2/$tot) * 100;
}
else if($row_s['answer']==3)
{
$answer3+=1;
$per3=($answer3/$tot) * 100;
}
else if($row_s['answer']==4)
{
$answer4+=1;
$per4=($answer4/$tot) * 100;
}
}
}
?>
<html>
<head>
<title>Online Voting System</title>
</head>
<body>
<?php if($_GET['msg']==1){?><span style="background:green;color:#FFF;border-radius:5px;font-size:14px;width:100%;height:100%;">Your vote is submitted successfully</span><?php } ?><br/>
<?php echo 'Total Votes '.$tot;?>
<div style="">
<span>Arjun Kapoor <?=$answer1;?> <?= $per1.'%';?></span><br/>
<span>Ranvir Kapoor <?=$answer2;?> <?= $per2.'%';?></span><br/>
<span>Rabir Kapoor <?=$answer3;?> <?= $per3.'%';?></span><br/>
<span>Varun Dhawan <?=$answer4;?> <?= $per4.'%';?></span><br/>
</div>
<h1>Who will take place of superstar?</h1>
<form id="voteform" name="voteform" action="" method="post">
<input type="radio" name="actor" id="actor" value="1">Arjun Kapoor<br/>
<input type="radio" name="actor" id="actor" value="2">Ranvir Kapoor<br/>
<input type="radio" name="actor" id="actor" value="3">Rabir Kapoor<br/>
<input type="radio" name="actor" id="actor" value="4">Varun Dhawan<br/>
<input type="submit" name="submit1" id="submit1" value="Vote"/>
</form>
</body>
</html>
Database table structure:
table name:votes.
fields:id,user_id,answer,create_date
Integrate this code into your files.Enjoy coding!!!!
Tuesday, 24 February 2015
How to get which checkbox is checked using jquery
Today we will see how can we check which checkbox is checked in html using jquery
If i have group of checkbox of 3checkbox then how will I know which checkbox is checked.
Code:
HTML
<html>
<body>
<input name="sheeping1" class="add" id="ship" type="radio" checked="checked">
<input name="sheeping1" class="add" id="bill" type="radio">
</body>
</html>
Jquery:
$(".add").change(function () {
if ($('.add:checked').length > 0) {
var Id = $(this).attr('id');
alert(Id);
}
});
Give class to each radio button named 'add'
then apply jquery.
If i have group of checkbox of 3checkbox then how will I know which checkbox is checked.
Code:
HTML
<html>
<body>
<input name="sheeping1" class="add" id="ship" type="radio" checked="checked">
<input name="sheeping1" class="add" id="bill" type="radio">
</body>
</html>
Jquery:
$(".add").change(function () {
if ($('.add:checked').length > 0) {
var Id = $(this).attr('id');
alert(Id);
}
});
Give class to each radio button named 'add'
then apply jquery.
Wednesday, 19 November 2014
How To send sms using API in PHP??
Today we guys mostly use sms services available on internet like way2sms,160by2.but have we ever thought to take them in our webapplications.
In PHP,We can do this with simple code of thirdparty api..
Here i have created simple code which sends sms to given mobile number using clickatell API.
Here is code:
<?php
$user = "xxxxxx";
$password = "xxxxxx";
$api_id = "xxxxxx";
$baseurl ="http://api.clickatell.com";
$text = urlencode("This is an example message");
$to = "+919408046690";
// auth call
$url = "$baseurl/http/auth?user=$user&password=$password&api_id=$api_id";
// do auth call
$ret = file($url);
// explode our response. return string is on first line of the data returned
$sess = explode(":",$ret[0]);
if ($sess[0] == "OK") {
$sess_id = trim($sess[1]); // remove any whitespace
$url = "$baseurl/http/sendmsg?session_id=$sess_id&to=$to&text=$text";
// do sendmsg call
$ret = file($url);
$send = explode(":",$ret[0]);
if ($send[0] == "ID") {
echo "successnmessage ID: ". $send[1];
} else {
echo "send message failed";
}
} else {
echo "Authentication failure: ". $ret[0];
}
?>
In this code,user,password and api id are needed for code,which is available on www.clickatell.com/
site.
Happy Coding guys!!!
In PHP,We can do this with simple code of thirdparty api..
Here i have created simple code which sends sms to given mobile number using clickatell API.
Here is code:
<?php
$user = "xxxxxx";
$password = "xxxxxx";
$api_id = "xxxxxx";
$baseurl ="http://api.clickatell.com";
$text = urlencode("This is an example message");
$to = "+919408046690";
// auth call
$url = "$baseurl/http/auth?user=$user&password=$password&api_id=$api_id";
// do auth call
$ret = file($url);
// explode our response. return string is on first line of the data returned
$sess = explode(":",$ret[0]);
if ($sess[0] == "OK") {
$sess_id = trim($sess[1]); // remove any whitespace
$url = "$baseurl/http/sendmsg?session_id=$sess_id&to=$to&text=$text";
// do sendmsg call
$ret = file($url);
$send = explode(":",$ret[0]);
if ($send[0] == "ID") {
echo "successnmessage ID: ". $send[1];
} else {
echo "send message failed";
}
} else {
echo "Authentication failure: ". $ret[0];
}
?>
In this code,user,password and api id are needed for code,which is available on www.clickatell.com/
site.
Happy Coding guys!!!
Simple Login With PHP
Hello Friends,
Today I am going to show you simple login with php session and html form.First we will create html form as follow:
<form method="post" action="index.php" name="form1" id="form1">
<h2>Login</h2>
<p>
<input type="text" placeholder="Username" name="username" id="username">
</p>
<p>
<input type="password" placeholder="Password" name="pass" id="pass">
</p>
<input type="submit" name="submit1" id="submit1" value="Login" class="button"/>
</form>
Here on above form there is two fields username and password.User will enter username and password into form and submit it to page.
After submitting form to same page,here see how following code will accept data.
if(isset($_POST['submit1']))
{
$username=addslashes($_POST['username']);
$pass=addslashes($_POST['pass']);
$sel="select * from admin where username='$username' AND password='$pass'";
$res=mysql_query($sel) or die(mysql_error());
$total=mysql_num_rows($res);
if($total > 0)
{
while($rows=mysql_fetch_array($res))
{
session_start();
$_SESSION['ID']=$rows['id'];
$_SESSION['USERNAME']=$rows['username'];
header("location:dashboard.php");
}
}
}
Please see structure of table admin as follow:
Wednesday, 24 September 2014
How to send email using php?
$subject="Hi How are you??";
$body="Hi What's Up??Come to see me sometimes.";
//echo $body;
$from="ruchivsanghvi@gmail.com";
$reply_to="ruchivsanghvi@gmail.com";
$headers .= "Content-type: text/plain\r\n";
$headers .= "From:Ruchi Sanghvi <$from> \r\n";
$headers .= "Reply-To: Admin <$reply_to>\n";
$headers .= "X-Mailer: PHP". phpversion() ."\n";
$res=mail("kinjalashukla@gmail.com",$subject,$body,$headers);
PHP has fabulous function for sending simple text and html mails.
The function is mail() function.
This function takes 4 parameters as follow:
to ->Email of receiver;
subject->subject of email.
body->message of email.
header->it takes extra parameter combination like from email,type of data,php version,reply to attributes etc.
this is very simple script.I hope u will enjoy it.
$body="Hi What's Up??Come to see me sometimes.";
//echo $body;
$from="ruchivsanghvi@gmail.com";
$reply_to="ruchivsanghvi@gmail.com";
$headers .= "Content-type: text/plain\r\n";
$headers .= "From:Ruchi Sanghvi <$from> \r\n";
$headers .= "Reply-To: Admin <$reply_to>\n";
$headers .= "X-Mailer: PHP". phpversion() ."\n";
$res=mail("kinjalashukla@gmail.com",$subject,$body,$headers);
PHP has fabulous function for sending simple text and html mails.
The function is mail() function.
This function takes 4 parameters as follow:
to ->Email of receiver;
subject->subject of email.
body->message of email.
header->it takes extra parameter combination like from email,type of data,php version,reply to attributes etc.
this is very simple script.I hope u will enjoy it.
Sunday, 14 September 2014
Display Audio File On HTML5 page
Today I am going to cover small but very useful topic of HTML5. In previous I explained you how to upload audio file in database using php.
Today we will see how to show audio file in our webpage with html <audio> tag.
<audio> tag is useful to stream audio mp3,wave,ogg files using html5. <audio> tag works fine with IE,Chrome,Safari,Mozilla Firefox.This tag supports 3 files i.e. mp3,wave,ogg.
Put following code with audio file path in html5 page.
<audio controls="controls">
<source src="ring.mp3" type="audio/mpeg">
</audio>
In above code,"controls" will show controls of audio."autoplay" will play audio at loading of page.
Today we will see how to show audio file in our webpage with html <audio> tag.
<audio> tag is useful to stream audio mp3,wave,ogg files using html5. <audio> tag works fine with IE,Chrome,Safari,Mozilla Firefox.This tag supports 3 files i.e. mp3,wave,ogg.
Put following code with audio file path in html5 page.
<audio controls="controls">
<source src="ring.mp3" type="audio/mpeg">
</audio>
In above code,"controls" will show controls of audio."autoplay" will play audio at loading of page.
Thursday, 11 September 2014
Upload audio using php and mysql
Today, I am going to show you one script for audio file uploads like mp3,wmv,mp4 etc..This is as easy as we upload image using php.We guys always go to site of songs to download our favourite singer songs.But how do these site allow user to upload audio is tricky.
But let us not waste time on discussing what they do.I am going to give you easy code for mp3 file upload.
the code is as below:
First we will create simple HTML code with form as below:
<form name="audio_form" id="audio_form" action="" method="post" enctype="multipart/form-data">
<fieldset>
<label>Audio File:</label>
<input name="audio_file" id="audio_file" type="file"/>
<input type="submit" name="Submit" id="Submit" value="Submit"/>
</fieldset>
</form>
Create one blank folder names "Audios" in your project to save audio files.
After Submitting form page will be redirect to same page.We can check file type using below:
<?php
if(isset($_POST['Submit']))
{
$file_name = $_FILES['audio_file']['name'];
if($_FILES['audio_file']['type']=='audio/mpeg' || $_FILES['audio_file']['type']=='audio/mpeg3' || $_FILES['audio_file']['type']=='audio/x-mpeg3' || $_FILES['audio_file']['type']=='audio/mp3' || $_FILES['audio_file']['type']=='audio/x-wav' || $_FILES['audio_file']['type']=='audio/wav')
{
$new_file_name=$_FILES['audio_file']['name'];
// Where the file is going to be placed
$target_path = "Audios/".$new_file_name;
//target path where u want to store file.
//following function will move uploaded file to audios folder.
if(move_uploaded_file($_FILES['audio_file']['tmp_name'], $target_path)) {
//insert query if u want to insert file
}
}
}
?>
In the Above code, $target_path is where you want to store file.
After successful execution of above code.you will be able to see your file uploaded in Audios file
But let us not waste time on discussing what they do.I am going to give you easy code for mp3 file upload.
the code is as below:
First we will create simple HTML code with form as below:
<form name="audio_form" id="audio_form" action="" method="post" enctype="multipart/form-data">
<fieldset>
<label>Audio File:</label>
<input name="audio_file" id="audio_file" type="file"/>
<input type="submit" name="Submit" id="Submit" value="Submit"/>
</fieldset>
</form>
Create one blank folder names "Audios" in your project to save audio files.
After Submitting form page will be redirect to same page.We can check file type using below:
<?php
if(isset($_POST['Submit']))
{
$file_name = $_FILES['audio_file']['name'];
if($_FILES['audio_file']['type']=='audio/mpeg' || $_FILES['audio_file']['type']=='audio/mpeg3' || $_FILES['audio_file']['type']=='audio/x-mpeg3' || $_FILES['audio_file']['type']=='audio/mp3' || $_FILES['audio_file']['type']=='audio/x-wav' || $_FILES['audio_file']['type']=='audio/wav')
{
$new_file_name=$_FILES['audio_file']['name'];
// Where the file is going to be placed
$target_path = "Audios/".$new_file_name;
//target path where u want to store file.
//following function will move uploaded file to audios folder.
if(move_uploaded_file($_FILES['audio_file']['tmp_name'], $target_path)) {
//insert query if u want to insert file
}
}
}
?>
In the Above code, $target_path is where you want to store file.
After successful execution of above code.you will be able to see your file uploaded in Audios file
Friday, 5 September 2014
Excel Spreadsheet creation in PHP
Spreadsheets are used everywhere and they are most useful to manage and organize data.They are quite popular.
PHP also supports creation of excel spreadsheets using PHP.I am wondered that PHP creates it without any class.
It only needs 4-5 lines of code using php.Mostly \t and \n tags are used.You can generate excel spreadsheets easilyusing PHP. You need to use below code to create excel file.
<?php
header( "Content-Type: application/vnd.ms-excel" );
header( "Content-disposition: attachment; filename=spreadsheet.xls" );
// print your data here. note the following:
// - cells/columns are separated by tabs ("\t")
// - rows are separated by newlines ("\n")
// for example:
echo 'First Name' . "\t" . 'Last Name' . "\t" . 'Phone' . "\n";
echo 'Ruchi' . "\t" . 'Sanghvi' . "\t" . '666-6666' . "\n";
?>
To define content type following line is used:
header( "Content-Type: application/vnd.ms-excel" );
To define its name and download it following line is used:
header( "Content-disposition: attachment; filename=spreadsheet.xls" );
FirstName,LastName and Phone define Header of excel sheet.
Last line defines data to be displayed in excel sheet.
\t and \n is to define space and new line in code accordingly.
PHP also supports creation of excel spreadsheets using PHP.I am wondered that PHP creates it without any class.
It only needs 4-5 lines of code using php.Mostly \t and \n tags are used.You can generate excel spreadsheets easilyusing PHP. You need to use below code to create excel file.
<?php
header( "Content-Type: application/vnd.ms-excel" );
header( "Content-disposition: attachment; filename=spreadsheet.xls" );
// print your data here. note the following:
// - cells/columns are separated by tabs ("\t")
// - rows are separated by newlines ("\n")
// for example:
echo 'First Name' . "\t" . 'Last Name' . "\t" . 'Phone' . "\n";
echo 'Ruchi' . "\t" . 'Sanghvi' . "\t" . '666-6666' . "\n";
?>
To define content type following line is used:
header( "Content-Type: application/vnd.ms-excel" );
To define its name and download it following line is used:
header( "Content-disposition: attachment; filename=spreadsheet.xls" );
FirstName,LastName and Phone define Header of excel sheet.
Last line defines data to be displayed in excel sheet.
\t and \n is to define space and new line in code accordingly.
PHP Invoice Creation for Billing
Today I will cover one great documentary topic which is know as pdf coding.or I will call it as pdf coding.
PHP has tremendous advantages.It has all aspects of features to get things done.Generating invoices is needed in every php developers life because they work with ecommerece and at the end ecommerece projects demand for invoice generation and billing system.so every php developer must know how to create invoice pdf using php.
PHP has pdf creation class which is very helpful for pdf class.There are fpdf,tcpdf classes which has different functions which is used to create PDF functions.Here I have created small code for billing invoice.I have used FPDF
Class and its functions.
You can get FPDF class from below link:
http://www.fpdf.org/
Go to Download Link and Download class which is as ZIP.
copy and paste fpdf.php class and fonts in your project folder and give path in your code like below:
require('u/fpdf.php');
Here u is folder and fpdf.php is class file.
create another folder named invoice where all invoices which you generate will be stored.
Take a look below code:
Here I have create one simple form which takes billing information:
<style>
a{
color:#999999;
text-decoration:none;
}
a:hover{
color:#999999;
text-decoration:underline;
}
#content{
width:800px;
height:600px;
background-color:#FEFEFE;
border: 10px solid rgb(255, 255, 255);
border: 10px solid rgba(255, 255, 255, .5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 10px;
opacity:0.90;
filter:alpha(opacity=90);
margin:auto;
}
#footer{
width:800px;
height:30px;
padding-top:15px;
color:#666666;
margin:auto;
}
#title{
width:770px;
margin:15px;
color:#999999;
font-size:18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#body{
width:770px;
height:360px;
margin:15px;
color:#999999;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#body_l{
width:385px;
height:360px;
float:left;
}
#body_r{
width:385px;
height:360px;
float:right;
}
#name{
width:width:385px;
height:40px;
margin-top:15px;
}
input{
margin-top:10px;
width:345px;
height:32px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #ccc;
color:#999;
margin-left:15px;
padding:5px;
}
#up{
width:770px;
height:40px;
margin:auto;
margin-top:10px;
}
</style>
After submitting submit button we can get all data via form post and generate fine invoice:
<?php
if(isset($_POST["submit"]))
{
$company = $_POST["company"];
$address = $_POST["address"];
$email = $_POST["email"];
$telephone = $_POST["telephone"];
$number = $_POST["number"];
$item = $_POST["item"];
$price = $_POST["price"];
$dis = $_POST["dis"];
$vat = $_POST["vat"];
$final_amt=$price - ($dis/100) + ($vat/100);
$pay = 'Payment information';
$price = str_replace(",",".",$price);
$vat = str_replace(",",".",$vat);
$p = explode(" ",$price);
$v = explode(" ",$vat);
$re = $p[0] + $v[0];
function r($r)
{
$r = str_replace("$","",$r);
$r = str_replace(" ","",$r);
$r = $r." $";
return $r;
}
$price = r($price);
$vat = r($vat);
require('u/fpdf.php');
class PDF extends FPDF
{
function Header()
{
if(!empty($_FILES["file"]))
{
$uploaddir = "logo/";
$nm = $_FILES["file"]["name"];
$random = rand(1,99);
move_uploaded_file($_FILES["file"]["tmp_name"], $uploaddir.$random.$nm);
$this->Image($uploaddir.$random.$nm,10,10,20);
unlink($uploaddir.$random.$nm);
}
$this->SetFont('Arial','B',12);
$this->Ln(1);
}
function Footer()
{
$this->SetY(-15);
$this->SetFont('Arial','I',8);
$this->Cell(0,10,'Page '.$this->PageNo().'/{nb}',0,0,'C');
}
function ChapterTitle($num, $label)
{
$this->SetFont('Arial','',12);
$this->SetFillColor(200,220,255);
$this->Cell(0,6,"$num $label",0,1,'L',true);
$this->Ln(0);
}
function ChapterTitle2($num, $label)
{
$this->SetFont('Arial','',12);
$this->SetFillColor(249,249,249);
$this->Cell(0,6,"$num $label",0,1,'L',true);
$this->Ln(0);
}
}
$pdf = new PDF();
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->SetFont('Times','',12);
$pdf->SetTextColor(32);
$pdf->Cell(0,5,$company,0,1,'R');
$pdf->Cell(0,5,$address,0,1,'R');
$pdf->Cell(0,5,$email,0,1,'R');
$pdf->Cell(0,5,'Tel: '.$telephone,0,1,'R');
$pdf->Cell(0,30,'',0,1,'R');
$pdf->SetFillColor(200,220,255);
$pdf->ChapterTitle('Invoice Number ',$number);
$pdf->ChapterTitle('Invoice Date ',date('d-m-Y'));
$pdf->Cell(0,20,'',0,1,'R');
$pdf->SetFillColor(224,235,255);
$pdf->SetDrawColor(192,192,192);
$pdf->Cell(170,7,'Item',1,0,'L');
$pdf->Cell(20,7,'Price',1,1,'C');
$pdf->Cell(170,7,$item,1,0,'L',0);
$pdf->Cell(20,7,$price,1,1,'C',0);
$pdf->Cell(0,0,'',0,1,'R');
$pdf->Cell(170,7,'Discount',1,0,'R',0);
$pdf->Cell(20,7,$dis,1,1,'C',0);
$pdf->Cell(170,7,'VAT',1,0,'R',0);
$pdf->Cell(20,7,$vat,1,1,'C',0);
$pdf->Cell(170,7,'Total',1,0,'R',0);
$pdf->Cell(20,7,$final_amt." $",1,0,'C',0);
$filename=rand(0,1999).".pdf";
$pdf->Output("invoice/".$filename,'F');
}
?>
Above code I have used rand() function for pdf name so that every pdf class is recognized with unique name.then we will store it in folder invoice which we have created at starting of tutorial.
PHP has tremendous advantages.It has all aspects of features to get things done.Generating invoices is needed in every php developers life because they work with ecommerece and at the end ecommerece projects demand for invoice generation and billing system.so every php developer must know how to create invoice pdf using php.
PHP has pdf creation class which is very helpful for pdf class.There are fpdf,tcpdf classes which has different functions which is used to create PDF functions.Here I have created small code for billing invoice.I have used FPDF
Class and its functions.
You can get FPDF class from below link:
http://www.fpdf.org/
Go to Download Link and Download class which is as ZIP.
copy and paste fpdf.php class and fonts in your project folder and give path in your code like below:
require('u/fpdf.php');
Here u is folder and fpdf.php is class file.
create another folder named invoice where all invoices which you generate will be stored.
Take a look below code:
Here I have create one simple form which takes billing information:
<form action="" method="post" enctype="multipart/form-data">
<div id="body_l">
<div id="name"><input name="company" placeholder="Company Name" type="text" /></div>
<div id="name"><input name="address" placeholder="Company Address" type="text" /></div>
<div id="name"><input name="email" placeholder="Email" type="text" /></div>
<div id="name"><input name="telephone" placeholder="telephone number" type="text" /></div>
<div id="name"><input name="item" placeholder="Item" type="text" /></div>
</div>
<div id="body_r">
<div id="name"><input name="price" placeholder="price" type="text" /></div>
<div id="name"><input name="dis" placeholder="discount" type="text" /></div>
<div id="name"><input name="vat" placeholder="VAT" type="text" /></div>
</div>
<div id="up" align="center"><input name="submit" style="margin-top:60px;" value="Submit" type="submit" /><br /><br />
</div>
</form>
Here we can some CSS in code:
<style>
a{
color:#999999;
text-decoration:none;
}
a:hover{
color:#999999;
text-decoration:underline;
}
#content{
width:800px;
height:600px;
background-color:#FEFEFE;
border: 10px solid rgb(255, 255, 255);
border: 10px solid rgba(255, 255, 255, .5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-radius: 10px;
opacity:0.90;
filter:alpha(opacity=90);
margin:auto;
}
#footer{
width:800px;
height:30px;
padding-top:15px;
color:#666666;
margin:auto;
}
#title{
width:770px;
margin:15px;
color:#999999;
font-size:18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#body{
width:770px;
height:360px;
margin:15px;
color:#999999;
font-size:16px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#body_l{
width:385px;
height:360px;
float:left;
}
#body_r{
width:385px;
height:360px;
float:right;
}
#name{
width:width:385px;
height:40px;
margin-top:15px;
}
input{
margin-top:10px;
width:345px;
height:32px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #ccc;
color:#999;
margin-left:15px;
padding:5px;
}
#up{
width:770px;
height:40px;
margin:auto;
margin-top:10px;
}
</style>
After submitting submit button we can get all data via form post and generate fine invoice:
<?php
if(isset($_POST["submit"]))
{
$company = $_POST["company"];
$address = $_POST["address"];
$email = $_POST["email"];
$telephone = $_POST["telephone"];
$number = $_POST["number"];
$item = $_POST["item"];
$price = $_POST["price"];
$dis = $_POST["dis"];
$vat = $_POST["vat"];
$final_amt=$price - ($dis/100) + ($vat/100);
$pay = 'Payment information';
$price = str_replace(",",".",$price);
$vat = str_replace(",",".",$vat);
$p = explode(" ",$price);
$v = explode(" ",$vat);
$re = $p[0] + $v[0];
function r($r)
{
$r = str_replace("$","",$r);
$r = str_replace(" ","",$r);
$r = $r." $";
return $r;
}
$price = r($price);
$vat = r($vat);
require('u/fpdf.php');
class PDF extends FPDF
{
function Header()
{
if(!empty($_FILES["file"]))
{
$uploaddir = "logo/";
$nm = $_FILES["file"]["name"];
$random = rand(1,99);
move_uploaded_file($_FILES["file"]["tmp_name"], $uploaddir.$random.$nm);
$this->Image($uploaddir.$random.$nm,10,10,20);
unlink($uploaddir.$random.$nm);
}
$this->SetFont('Arial','B',12);
$this->Ln(1);
}
function Footer()
{
$this->SetY(-15);
$this->SetFont('Arial','I',8);
$this->Cell(0,10,'Page '.$this->PageNo().'/{nb}',0,0,'C');
}
function ChapterTitle($num, $label)
{
$this->SetFont('Arial','',12);
$this->SetFillColor(200,220,255);
$this->Cell(0,6,"$num $label",0,1,'L',true);
$this->Ln(0);
}
function ChapterTitle2($num, $label)
{
$this->SetFont('Arial','',12);
$this->SetFillColor(249,249,249);
$this->Cell(0,6,"$num $label",0,1,'L',true);
$this->Ln(0);
}
}
$pdf = new PDF();
$pdf->AliasNbPages();
$pdf->AddPage();
$pdf->SetFont('Times','',12);
$pdf->SetTextColor(32);
$pdf->Cell(0,5,$company,0,1,'R');
$pdf->Cell(0,5,$address,0,1,'R');
$pdf->Cell(0,5,$email,0,1,'R');
$pdf->Cell(0,5,'Tel: '.$telephone,0,1,'R');
$pdf->Cell(0,30,'',0,1,'R');
$pdf->SetFillColor(200,220,255);
$pdf->ChapterTitle('Invoice Number ',$number);
$pdf->ChapterTitle('Invoice Date ',date('d-m-Y'));
$pdf->Cell(0,20,'',0,1,'R');
$pdf->SetFillColor(224,235,255);
$pdf->SetDrawColor(192,192,192);
$pdf->Cell(170,7,'Item',1,0,'L');
$pdf->Cell(20,7,'Price',1,1,'C');
$pdf->Cell(170,7,$item,1,0,'L',0);
$pdf->Cell(20,7,$price,1,1,'C',0);
$pdf->Cell(0,0,'',0,1,'R');
$pdf->Cell(170,7,'Discount',1,0,'R',0);
$pdf->Cell(20,7,$dis,1,1,'C',0);
$pdf->Cell(170,7,'VAT',1,0,'R',0);
$pdf->Cell(20,7,$vat,1,1,'C',0);
$pdf->Cell(170,7,'Total',1,0,'R',0);
$pdf->Cell(20,7,$final_amt." $",1,0,'C',0);
$filename=rand(0,1999).".pdf";
$pdf->Output("invoice/".$filename,'F');
}
?>
Above code I have used rand() function for pdf name so that every pdf class is recognized with unique name.then we will store it in folder invoice which we have created at starting of tutorial.
Wednesday, 3 September 2014
Show Your Address on Google Maps
Hello Friends,
Today I am going to introduce you simple google map integration on html page.it is just 2steps process.
Step:-1:
go to https://www.google.co.in/maps/preview site.put your address on left top corner and search it.
Step-2:-
Click on shown icon on google map and get embed code from embed source.copy that code in your html page.The code contain <iframe> </iframe> tags.
Today I am going to introduce you simple google map integration on html page.it is just 2steps process.
Step:-1:
go to https://www.google.co.in/maps/preview site.put your address on left top corner and search it.
Click on shown icon on google map and get embed code from embed source.copy that code in your html page.The code contain <iframe> </iframe> tags.
Tuesday, 2 September 2014
How to upload video on Youtube using PHP
Today, I am going to show you code for very advance API.We use youtube in daily basis but this time php will be used to post video on youtube.I have got new code for it and here I thought to share with you all.
The code is so simple.you should download zend package from zend site.and got developer key from google.also your gmail username and password will work in this code.
Here is code:
<?php
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_YouTube');
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
try
{
$authenticationURL= 'https://www.google.com/accounts/ClientLogin';
$httpClient = Zend_Gdata_ClientLogin::getHttpClient(
$username = 'XXXX', //your gmail password and username
$password = 'XXXXX',
$service = 'youtube',
$client = null,
$source = 'Yoh Money',
$loginToken = null,
$loginCaptcha = null,
$authenticationURL);
}
catch (Zend_Gdata_App_Exception $e)
{
$arry['data']['flag'] = false;
$arry['data']['msg'] = 'Username or Password Invalid.';
print_r(json_encode($arry));
die();
}
$developerKey='XXXXXX';//make an application and get its developer key
$applicationId = 'not require';
$clientId = 'not require';
$yt = new Zend_Gdata_YouTube($httpClient, $applicationId, $clientId, $developerKey);
$fileName = "Offo.mp4";
$fileType = "video/mp4";
$newEntry = new Zend_Gdata_YouTube_VideoEntry();
$filesource = $yt->newMediaFileSource($fileName);
$filesource->setContentType('video/mp4');
$filesource->setSlug($fileName);
$newEntry->setMediaSource($filesource);
$newEntry->setVideoTitle("Offo");
$newEntry->setVideoDescription("Offo is awesome song of 2states");
$newEntry->setVideoCategory("Comedy");
$newEntry->setVideoTags("2 States,Offo");
try {
$newEntry = $yt->insertEntry($newEntry, 'http://uploads.gdata.youtube.com/feeds/api/users/default/uploads', 'Zend_Gdata_YouTube_VideoEntry');
$state = $newEntry->getVideoState();
if ($state)
{
$videourl = $newEntry->getVideoWatchPageUrl();
$arry['data']['flag'] = true;
$arry['data']['url'] = $videourl;
$arry['data']['msg'] = "Video Uploaded Successfully.";
}
else
{
$arry['data']['flag'] = false;
$arry['data']['msg'] = "Not able to retrieve the video status information yet. " ."Please try again later.\n";
}
}
catch (Zend_Gdata_App_Exception $e) {
$arry['data']['flag'] = false;
$arry['data']['msg'] = $e->getMessage();
}
echo "<pre>";
print_r($arry);
?>
The code is so simple.you should download zend package from zend site.and got developer key from google.also your gmail username and password will work in this code.
Here is code:
<?php
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_YouTube');
Zend_Loader::loadClass('Zend_Gdata_AuthSub');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
try
{
$authenticationURL= 'https://www.google.com/accounts/ClientLogin';
$httpClient = Zend_Gdata_ClientLogin::getHttpClient(
$username = 'XXXX', //your gmail password and username
$password = 'XXXXX',
$service = 'youtube',
$client = null,
$source = 'Yoh Money',
$loginToken = null,
$loginCaptcha = null,
$authenticationURL);
}
catch (Zend_Gdata_App_Exception $e)
{
$arry['data']['flag'] = false;
$arry['data']['msg'] = 'Username or Password Invalid.';
print_r(json_encode($arry));
die();
}
$developerKey='XXXXXX';//make an application and get its developer key
$applicationId = 'not require';
$clientId = 'not require';
$yt = new Zend_Gdata_YouTube($httpClient, $applicationId, $clientId, $developerKey);
$fileName = "Offo.mp4";
$fileType = "video/mp4";
$newEntry = new Zend_Gdata_YouTube_VideoEntry();
$filesource = $yt->newMediaFileSource($fileName);
$filesource->setContentType('video/mp4');
$filesource->setSlug($fileName);
$newEntry->setMediaSource($filesource);
$newEntry->setVideoTitle("Offo");
$newEntry->setVideoDescription("Offo is awesome song of 2states");
$newEntry->setVideoCategory("Comedy");
$newEntry->setVideoTags("2 States,Offo");
try {
$newEntry = $yt->insertEntry($newEntry, 'http://uploads.gdata.youtube.com/feeds/api/users/default/uploads', 'Zend_Gdata_YouTube_VideoEntry');
$state = $newEntry->getVideoState();
if ($state)
{
$videourl = $newEntry->getVideoWatchPageUrl();
$arry['data']['flag'] = true;
$arry['data']['url'] = $videourl;
$arry['data']['msg'] = "Video Uploaded Successfully.";
}
else
{
$arry['data']['flag'] = false;
$arry['data']['msg'] = "Not able to retrieve the video status information yet. " ."Please try again later.\n";
}
}
catch (Zend_Gdata_App_Exception $e) {
$arry['data']['flag'] = false;
$arry['data']['msg'] = $e->getMessage();
}
echo "<pre>";
print_r($arry);
?>
Subscribe to:
Posts
(
Atom
)
