Programming Dump

Thursday, February 28, 2019

Create SQL procedure and insert data into table using while loop

Using this syntax procedures can be created. Variables are used in decision making statments

as while <condition>.

DELIMITER $$

DROP PROCEDURE IF EXISTS `procedure_insert_data`$$

CREATE PROCEDURE `procedure_insert_data`()
BEGIN
    DECLARE i INTEGER DEFAULT 0;
    DECLARE n INTEGER DEFAULT 0;
    DECLARE j INTEGER DEFAULT 0;
    DECLARE k INTEGER DEFAULT 0;
    SELECT COUNT(*) FROM abc INTO n;
    #loop starts
    WHILE i < n DO
      SET @siteId = 3;
        INSERT INTO abc (a,b,c)
        SELECT a,b,c
        FROM xyz LIMIT i,1;

          #nested loop start
          WHILE j < k DO

            INSERT INTO abd (a, b, c)
            SELECT a, b, c FROM wxy
            WHERE   LIMIT j,1;

            SET j = j + 1;
          END WHILE;
          SET j = 0;
      SET i = i + 1;
    END WHILE;
END$$

DELIMITER ;

A way to call the procedure.

CALL procedure_insert_data();

Monday, September 18, 2017

Form validation using JavaScript with bootstrap alert messages

In html page you can set the bootstrap messages, that can be shown and hide using JavaScript. On alert message put a css class that does not display when the page is loaded and by using the validation rules get the text from text box in JavaScript and shown hide messages as you need.

If name and father name is missing than it shown alert message in red color. If name and father name is present it shows success message in green color.

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
function validate() {
var name = document.getElementById("name").value;
var fname = document.getElementById("fname").value;
$("#fname-alert").hide();
$("#name-alert").hide();
$("#success-message").hide();
//var message = "";
if(name.trim() == "") {
//message = "Your name required ";
//document.getElementById("message-name").innerHTML = message;
$("#name-alert").show();
}
if(fname.trim() == "") {
//message = " Father name required ";
//document.getElementById("message-fname").innerHTML = message;
$("#fname-alert").show();
}
if(name.trim() != "" && fname.trim() != "") {
//document.getElementById("message").innerHTML = "Student Information is saved...";
$("#success-message").show();
}
}

</script>
<style>
.alert{
display: none;
padding: 5px;
margin-top: 25px;
border: 1px solid transparent;
border-radius: 4px;
}

</style>
</head>
<body>

<div class="container">
<div class="alert alert-success alert-dismissable" id="success-message">
<p id="message"> Student Information is saved...</p>
</div>
<div class="row-fluid">
<div class="col-sm-12 col-md-12 col-lg-12"><h2>Student Information</h2></div>
</div>
<div class="row-fluid">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</div>
<div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="alert alert-danger alert-dismissable" id="name-alert">
<p id="message-name">Name is Required</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="fname">Father Name:</label>
<input type="text" class="form-control" id="fname">
</div>
</div>
<div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="alert alert-danger alert-dismissable" id="fname-alert">
<p id="message-fname"> Father Name is Required</p>
</div>
</div>
</div>

</div>
<div class="clearfix"></div>
<div class="row-fluid">
<div class="col-md-12 col-sm-12 col-lg-12 ">
<div class="separator"> </div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-12 col-sm-12 col-lg-12 ">
<input type="button" class="btn" name="btn" value="Validate" onClick="validate()">
</div>
</div>

</div>
</body>
</html>

Tuesday, September 5, 2017

Dynamically add row inside bootstrap table using JavaScript

Create a bootstrap table using html with table head and table body. Now create an other table that is hidden (not shown on user interface) with table row and table data. Get hidden table's table row using java script change the id's value at run time using counter variable and than append that row inside your main table (in which you want to add row).

<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
function addUserRow() {
var counter = 1;
var tableRow = $("#user-detail-table").find(".user-first-row").clone();
tableRow.addClass("user-first-row"+counter);
tableRow.attr("id", "active-user-row"+counter);
var userName = tableRow.find("#user-name0");
userName.attr("id", "user-name"+counter);
var lastName = tableRow.find("#last-name0");
lastName.attr("id", "last-name"+counter);
var email = tableRow.find("#email0");
email.attr("id", "email"+counter);
var mainTable = $("#student-table");
mainTable.append(tableRow);
}

</script>

</head>
<body>

<div class="container">
<h2>Student Table</h2>
<p>Add Dynamic Row in table</p>
<table class="table" id="student-table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
<input type="button" class="btn" name="btn" value="Add Row" onClick="addUserRow()">
</div>
<table id="user-detail-table" class="table" style="display:none">
<tr id="active-user-row0" class="user-first-row">
<td><input class="form-control" type="text" id="user-name0"></td>
<td><input class="form-control" type="text" id="last-name0"></td>
<td><input class="form-control" type="text" id="email0"></td>
</tr>
</table>

</body>
</html>

Tuesday, October 20, 2015

Create a video player by using html 5 and JavaScript

Here we are creating a video player with html 5 and JavaScript .

html file contains video, play/pause button and a progress bar

Snap shot of Video Player

Download Code Here!