Posts

Showing posts from April, 2020

How to Connect the Database in PHP

Image
We will tell you how to connect the database in PHP. In any PHP file for insert/Delete/update/fetch data from Mysql database. we have to create a connection with the Mysql database. This connection will be the type of the database is Mysql. Follow the bellow Code to creating a connection with the Mysql database. Method 1: <?php mysql_connect('localhost', 'root', 'pass'); mysql_select_db('databse'); ?> localhost : is the Host of the Server root ; is the username of the Database pass : is the password of the Database database : is the name of the Mysql database Method 2: <?php $dbhost = 'localhost:3306'; $dbuser = 'root'; $dbpass = 'pass'; $conn = mysql_connect($dbhost, $dbuser, $dbpass); if(! $conn ) { die('Could not connect: ' . mysql_error()); } echo 'Connected successfully'; mysql_close(

How to Update Data into Database using PHP

Image
index.php <html> <head> <title>Update Data</title> </head> <body> <form method="post" action="update.php" enctype="multipart/form-data"> <div class="name"> <div class="name1"><h1>Student Name:</h1></div> <div class="name2"><input type="text" name="name" value="<?php echo $row['name']; ?>" /></div> </div> <div class="name"> <div class="name1"><h1>Father Name:</h1></div> <div class="name2"><input type="text" name="father_name" value="<?php echo $row['father_name']; ?>" /></div> </div> <div class="name"> <div class="name1"><h1>Mother Name:</h1></div> <div class="name2"><input type="

How to Delete Data From Mysql Database

Image
table.php <?php include(db.php); ?> <html> <head> <title>Table</title> </head> <body> <div class="table"> <div class="tab1"><h1>Name</h1></div> <div class="tab1"><h1>Father name</h1></div> <div class="tab1"><h1>Mother name</h1></div> <div class="tab1"><h1>E-mail</h1></div> <div class="tab1"><h1>Address</h1></div> <div class="tab1"><h1>DOB</h1></div> <div class="tab1"><h1>Category</h1></div> <div class="tab1"><h1>Image</h1></div> <div class="tab1"><h1>Action</h1></div> <div class="tab1"><h1>Delete</h1></div> <?php $query1 = "select * from n

How to Create Filters using jQuery

Image
Example:- Method of Filter Tables <html> <head> <title>Filter Table<title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td,th { border: 1px solid #dddddd; text-align: left; padding: 8px; } </style> </head> <body> <h2>Filter Table</h2> <p>Type something in input box to search the table for first names, last names or emails:</p> <input id="myInput" type="text" placeholder="Search.."> <br><br&g

How to Create Remove Element or Content using jQuery

Image
jQuery remove() Method Example:- <html> <head> <title>jQuery remove()</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").remove(); }); }); </script> </head> <body> <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:red;color:#ffffff"> <p>Welcome to Hub of Tutorials</p> <p>jQuery remove Method.</p> </div> <br> <button>Remove div element</button> </body> </html> jQuery empty() Method Example:- <html> <head> <title>jQuery empty()</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button"

How to Add New HTML Content using jQuery

Image
Four  jQuery  Methods for add new content. append() prepend() after() before() jQuery append() method <html> <head> <title>jQuery append() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>paragraph.</p> <p>another paragraph.</p> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <button id="btn1">Append text</button> <button id="btn2">Append list items</button> </body> </html> jQuery prepen

How to Create Get Content and Attributes in jQuery

Image
Get Content text() html() val() Example:- <html> <head> <title>Get Content</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); }); </script> </head> <body> <p id="test">In this paragraph having some<b>bolded</b> text.</p> <button id="btn1">Show Text</button> <button id="btn2">Show HTML</button> </body> </html> Example 2:- <html> <head> <title>Get Content</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(documen

How to Create Callback Function in jQuery

Image
Example:- <html> <head> <title>Callback Function in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); }); }); </script> </head> <body> <button>Click to Hide</button> <p>Welcome to Hub of Tutorials.</p> </body> </html> Read Full article

How to Create a start and stop Function using jQuery

Image
Example:- <html> <head> <title>start() and stop() Function using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#start").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: Red; color: white; border: solid 1px #666; border-radius: 3px; } #panel { padding: 50px; display: none; } </style> </head> <body> <button id="start">Start sliding</button> <button id="stop">Stop sliding</button> <div id="flip">Welcome to Hub of Tutorials</div> <div id="panel">Start() and Stop() Function</div> </

How to Create Sliding Method using jQuery

Image
Example:- <html> <head> <title>Sliding Method in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style> #panel, #flip { padding: 5px; text-align: center; color:#ffffff; background-color: #e8002b; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">Click for slide panel down or up</div> <div id="panel">Welcome to Hub of Tutorials</div> </body> </html> Read Full article How to Create Fading Method using jQuery

How to Create Animation using jQuery

Image
Example:- <html> <head> <title>Animation in jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ var div = $("div"); div.animate({left: '250px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); }); </script> </head> <body> <button>Click to Animation</button> <div style="background:red;color:#fff;height:200px;width:500px;position:absolute;">Welcome to Hub of Tutorials</div> </body> </html> Read Full article How to use Hide and Show Function using jQuery

How to Create Fading Method using jQuery

Image
In this article, we will explain How to Create Fading Method using  jQuery . Some fade Methods are;- fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() Example:- <html> <head> <title>fadeIn() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }); </script> </head> <body> <button>Click for fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br> <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br> <div id="div3" style="wid

How to use Hide and Show Function using jQuery

Image
in this article, you will learn How to use Hide and Show Function using jQuery. Example:- <html> <head> <title>Hide Show Function</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If click on the "Hide" button, it will be hide and if click on show button it will be show.</p> <button id="hide">Hide</button> <button id="show">Show</button> </body> </html> Hide or Show function using Speed <html> <head> <title>Hide and Show Function using Speed</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&