Tuesday, 21 June 2016

Get IP, OS name and Browser Name using JQuery - JavaScript

  • Here i create one html file, in the click event of button, i called some simple javascript and jquery code for get IP address of current system, operating system name and browser name of system in pop up,
  • you can use this code in your login page of web-site, and get all details of users that login in your created system,you can also store these details and login time also and manage users by perfect security,
  • just copy and paste this code in your html page and hit the run,

Here is the code : 

<html>
    <head>
        <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>
        <script type="text/javascript" src="http://l2.io/ip.js?var=myip"></script>
        <!-------- this link is for get ip in myip name variable  --------->
    </head>
    <body>
        <div class="row">
            <div class="col-md-4 col-md-offset-5" style="margin-top: 25%">
                <input type="button" name="LoginButton" id="LoginButton" class="btn btn-primary" data-toggle="modal" data-target="#myModal" value="Click Me!" style="width: 150px;">
            </div>
        </div>
        <div class="modal fade " id="myModal" role="dialog">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header" align="center">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Get OS Name,Browser Name AND IP</h4>
                    </div>
                    <div class="modal-body">
                        <span>Your Operation System Name : </span><b><span id="OSsystem"></span></b><br/>
                        <span>Your Browser Name : </span><b><span id="BrowserName"></span></b><br/>
                        <span>Your IP Address : </span><b><span id="IPaddress"></span></b><br/>
                    </div>
                    <div class="modal-footer" align="center">
                        <a href="http://www.promptwebsolution.com">www.promptwebsolution.com</a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
        $("#LoginButton").click(function () {
            //------------------------------------  To Get Browser Name------------------------>
            if (navigator.userAgent.search("MSIE") >= 0) {
                var browser = "InternetExplorer";
            } else if (navigator.userAgent.search("Chrome") >= 0) {
                var browser = "Chrome";
            } else if (navigator.userAgent.search("Firefox") >= 0) {
                var browser = "Firefox";
            } else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
                var browser = "Safari";
            } else if (navigator.userAgent.search("Opera") >= 0) {
                var browser = "Opera";
            }
            //-------------------------------------  To get OS ------------------------------------>
            var OSName = "Unknown OS";
            if (navigator.appVersion.indexOf("Win") != -1)
                OSName = "Windows";
            if (navigator.appVersion.indexOf("Mac") != -1)
                OSName = "MacOS";
            if (navigator.appVersion.indexOf("X11") != -1)
                OSName = "UNIX";
            if (navigator.appVersion.indexOf("Linux") != -1)
                OSName = "Linux";
            var ip = myip;
            $("#OSsystem").html(OSName);
            $("#BrowserName").html(browser);
            $("#IPaddress").html(ip);

        });
    </script>
</html>


ENJOY : )   
Code By :-  RAJA MAHIYARIYA MAHER(tHuNdEr^fR0G)



Wednesday, 15 June 2016

Display data with AngularJS include Pagination and search


Hi there, i'll give you a two file for display data with smart angular code 
1. index.php
                      - this is the simple .php file and you need to copy paste below code in it.
                      - mention the comment in index.php for display table field name.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Prompt Websolution</title>
    <script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="GridContrl">
            <br /><br /><br />
            <div class="col-md-6">
                <div>{{TotalRecord}}</div>
                <div class="input-group">
                    <input type="text" name="txtSearch" class="form-control" ng-model="txtSearch" placeholder="Search anything..." ng-change="search()" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-search"></span>
                    </span>
                </div>
                <table class="table table-striped pagination-sm">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="data in filteredData">
                            <td ng-bind="$index + 1"></td><!--- index wise id --->
                            <td ng-bind="data.firstname"></td><!--- write your table field name wichone you want to display --->
<td ng-bind="data.lastname"></td>
                        </tr>
                    </tbody>
                </table>
                <pagination ng-model="currentPage" total-items="TotalRecord" max-size="maxSize" boundary-links="true" items-per-page="numPerPage" ng-disabled="ngDisabled">
                </pagination>
            </div>
        </div>
    </div>
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="../Scripts/Grid/mygetdatascript.js"></script>
</body>

</html>

2 mygetdatascript.js
               
2.1 - if you use CI then put url of controllername and function name like:
-> $http.get("/controllername/functionname?searchText=" + txtSearch + "&Begin=" + begin),
2.2  -   if you use simple core php then put the php file name like :
-> $http.get("PHPfilename.php?searchText=" + txtSearch + "&Begin=" + begin),   

       
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("GridContrl", function ($scope, $http) {
    $scope.filteredData = [], $scope.currentPage = 1, $scope.numPerPage = 25, $scope.maxSize = 5,$scope.ngDisabled = true;
    var firsttime = true;
    $scope.zbPagination = function () {
        $scope.$watch('currentPage + numPerPage', function () {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage)
            , end = begin + $scope.numPerPage;
            console.log("Begin:: " + begin + " End:: " + end);
            if (firsttime == false) {
                $scope.getData($scope.txtSearch, begin, false);
            }
            firsttime = false;
        });};
    $scope.getData = function (txtSearch, begin, callPaging) {
        $http.get("/controller/function?searchText=" + txtSearch + "&Begin=" + begin).then(function (response) {
            $scope.TotalRecord = response.data.TotalRecord;
            $scope.filteredData = response.data.returnData;
            if (callPaging) {
                $scope.zbPagination();
            }
        });
        $scope.search = function () {
            $scope.currentPage = 1;
            $scope.getData($scope.txtSearch, 0, false);
        };};
    $scope.txtSearch = "";
    $scope.getData($scope.txtSearch, 0,true);

});

here, i put the third php file for get idea, make sure that you have to get data in json format like :
3. PHPindex.php 

$Query = $this->db->query(" select * from tablename ");
$data = $Query->result();
$this->response($data);

output like :
{"data":[
    {"firstName":"Raj", "lastName":"Maher"},
    {"firstName":"Ravi", "lastName":"Patel"},
    {"firstName":"Jems", "lastName":"Patel"}
]}



Prompt Web Solution. Powered by Blogger.