Store documents and media files in MySQL and php


Abstract

 A PHP script can be used with a HTML form to allow users to upload files to the server. Initially files are uploaded and stored into MySQL database  by a PHP script.This tutorial is an attempt to show you  how to store binary files in MySQL using BOLB .

1.What is BOLB ?!

BLOB (Binary Large Object) is a large object data type in the database system. BLOB could store a large chunk of data, document types and even media files like audio or video files. BLOB fields allocate space only whenever the content in the field is utilized. BLOB allocates spaces in Giga Bytes.

  • USAGE OF BLOB :

You can write a binary large object (BLOB) to a database as either binary or character data, depending on the type of field at your data source. To write a BLOB value to your database, issue the appropriate INSERT or UPDATE statement and pass the BLOB value as an input parameter. If your BLOB is stored as text, such as a SQL Server text field, you can pass the BLOB as a string parameter. If the BLOB is stored in binary format, such as a SQL Server image field, you can pass an array of type byte as a binary parameter.

2. BOLB and MySQL

MySQL provides a BLOB type that can hold a large amount of data. BLOB stands for the binary large data object. The maximum value of a BLOB object is specified by the available memory and the communication package size. You can change the communication package size by using the max_allowed_packet variable in MySQL and post_max_size in the PHP settings.

3.Files

In your /www folder of wamp/Lamp server create this files to start the project 


  • Config.php : set the globle variables of our application
  • index.php: this is the main page where the upload form was created 
  • insert.php: link to the database and insert files 
  • download.php: fetch data from the database and force files to be downloaded .
  • show.php: list all files in the database 

4.Create the Database

Database name: mystore
Table name: file_upload

CREATE TABLE IF NOT EXISTS `file_upload` (
  `file_id` int(11) NOT NULL AUTO_INCREMENT,
  `name` text NOT NULL,
  `mime` text NOT NULL,
  `size` text NOT NULL,
  `data` blob NOT NULL,
  `ext` text NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`file_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


5. config.php

<?php
define("host","_HOST_");
define("username","_USERNAME_");
define("password","_PASSOWRD_");
define("db","_DBname_");
?>

6. index.php


<!--
This application developed by ibsSOFT @NODEME blog
visit http://nodeme.blogspot.com
@ihebBenSalem
-->
<!DOCTYPE html>
<html lang="EN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Upload</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>

<center>


<form action="insert.php" method="POST" role="form" enctype = "multipart/form-data">
 <legend>Upload files</legend>

<label class="btn btn-default btn-file">
    Browse <input type="file" name="myfile">
</label>

 <button type="submit" class="btn btn-danger">Upload</button>
</form><br>
<a href="show.php">Show upload file list</a>
</center>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

7. insert.php


<?php
/*
This application developed by ibsSOFT @NODEME blog
visit http://nodeme.blogspot.com
@ihebBenSalem
*/
require("config.php");
if (isset($_FILES["myfile"])) {
$error=$_FILES["myfile"]["error"];

if ($error ==0) {
 # code...
 $db_link=mysqli_connect(host,username,password,db) or die("Can not connect to db !");

     if (mysqli_connect_errno()) {
     echo "Failed to connect to MySQL: " . mysqli_connect_error();
     }

}

$name = mysqli_real_escape_string($db_link,$_FILES['myfile']['name']);
$extension = strtolower(substr($name, strpos($name, '.') + 1));
$tmp_name = mysqli_real_escape_string($db_link,$_FILES['myfile']['tmp_name']);
$type = mysqli_real_escape_string($db_link,$_FILES['myfile']['type']);
$size = mysqli_real_escape_string($db_link,$_FILES['myfile']['size']);
$data=mysqli_real_escape_string($db_link,file_get_contents($tmp_name));


$sql="INSERT INTO file_upload (name,mime, size,ext,data) VALUES ('$name','$type','$size','$extension','$data')";

if (!mysqli_query($db_link,$sql)) {
  die('Error: ' . mysqli_error($con));
}
else
{
header("location:show.php");
}
}
?>

8. download.php

<?php
/*
This application developed by ibsSOFT @NODEME blog
visit http://nodeme.blogspot.com
@ihebBenSalem
*/
require("config.php");
if (isset($_GET["id"]) and !empty($_GET["id"])) {
 # code...
$id=$_GET["id"];
if ($id<=0) { //check the id is valid
 # code...
 die("Error in id ! try again");
}
  $con=new mysqli(host,username,password,db) or die(" Can not connect to db ! ");
  $result=$con->query(" SELECT file_id,  `mime` ,  `name` ,  `size` ,  `data` FROM  `file_upload` WHERE  `file_id` ='$id'  ");


   if($result) {
            // Make sure the result is valid
            if($result->num_rows == 1) {
            // Get the row
                $row = mysqli_fetch_assoc($result);
 
                // Print headers
                header("Content-Type: ". $row['mime']);
                header("Content-Length: ". $row['size']);
                header("Content-Disposition: attachment; filename=". $row['name']);
 
                // Print data
                ob_clean();
                flush();
                echo $row['data'];
            }
        }
}
?>

9. show.php


<?php
/*
This application developed by ibsSOFT @NODEME blog
visit http://nodeme.blogspot.com
@ihebBenSalem
*/
require("config.php"); 
$con=new mysqli(host,username,password,db);
     if (mysqli_connect_errno()) {
     echo "Failed to connect to MySQL: " . mysqli_connect_error();
     }
     $qy=$con->query(" SELECT * FROM `file_upload` order by date DESC;");
?>

<!DOCTYPE html>
<html lang="EN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Show</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
<div class="well well-lg"><center><h3> Files List</h3></center> </div>
<a class="btn btn-default btn-block" href="index.php" role="button">Upload more files</a>

<table class="table table-hover">
 <thead>
  <tr>
   <th>#id</th>
   <th>#Name</th>
   <th>#Mime</th>
   <th>#size
</th>
   <th>#Extension</th>
   <th>#Download</th>
   <th>#Date</th>
  </tr>
 </thead>
 <tbody>

<?php
$counter=0;
while ($rs=$qy->fetch_array()) {
 # code...
 $counter++;
 echo '<tr>
 <td>'.$counter.'</td>
 <td>'.$rs[1].'</td>
 <td>'.$rs[2].'</td>
 <td>'.$rs[3].'</td>
 <td>'.$rs[5].'</td>
 <td>'.$rs[6].'</td>
 <td><a href="download.php?id='.$rs[0].'">Download</a>
 </td>
 </tr>';
}

?> 
 </tbody>
</table>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

10.Configure apache

By trying to upload huge files such as 1 G0 or even files in Mo this application, we'll not work well because by default the size supported by mysql server is limited to 16 M0 for allowing packet, and 16 M0 for max file size, so, obviously we need to change this configuration to upload files with big size.
open up your Terminal and let's go :D:

nano /etc/my.cnf 


and now :

add the line: max_allowed_packet=256M (obviously adjust size for whatever you need) 
under the [MYSQLD] section. He made a mistake of putting it at the bottom of the
file first so it did not work.
 
Press Ctrl+x  then Y to save the conf .
Now let's update the apache upload size :


sudo nano /etc/php5/apache2/php.ini
which will show you the actual maximum file size .change the 

upload_max_filesize 2M 2M
to 500M for exemple

Now Restart apache and mysql server

sudo service apache2 restart

sudo service mysql restart

11.Screenshots of the project


12.Download the project


Download the project from Github :bolb-in-php-and-mysql



Install Kali linux tools on ubuntu


Abstract

Kali is one of the most powerful penetration testing platforms on the market. It's a Linux distribution that can be installed and used for free to help you run just about every kind of network test imaginable.
A bunch of tools are pre installed in Kali linux ,its support all kind of security tools for hackers ,pentesters, or security experts. 
But for some, running Kali would be so much easier if it could be integrated with the likes of Ubuntu.This article shows you how to install all this tools using an easy script called "Katoolin".

1.What is Katoolin ?!

Katoolin is a script that helps to install Kali Linux tools on your Linux distribution of choice. For those of us who like to use penetration testing tools provided by Kali Linux development team can effectively do that on their preferred Linux distribution by using Katoolin.
Major Features of Katoolin
  • Adding Kali Linux repositories. 
  • Removing Kali Linux repositories. 
  • Installing Kali Linux tools.

Requirements


  • An operating system for this case we are using Ubuntu 14.04 64-bit. 
  • Python 2.7

2.Installation


sudo su
git clone https://github.com/LionSec/katoolin.git && cp katoolin/katoolin.py /usr/bin/katoolin
chmod +x /usr/bin/katoolin

3.Run the script


sudo katoolin

OUTPUT:



 Press 1 to select the first item
OUTPUT

 Now,Press again 1 to select the first item,after the add completed press "2" 

  • after the update now everything is ready to install .. type "back"

OUTPUT

Finally, press 2 to select the categories

OUTPUT


4. Warning !

After you have successfully  installed the tools ,don't forget to remove the repositories ,because an upgrade of the system could harm your ubuntu distribution .I have a private experience with Katoolin which have harmed my backbox and i was forced to reinstall it and lose my data .stay safe :D 


Write your own PHP MVC Framework [part 1]


Abstract

This article shows you how to start writing your own php mvc framework ,from the basic architecture to an advanced approach to build more module in your framework.Am sharing with you this method ,in the hope that it will be useful.
"Unless you try to do something beyond what you have already mastered, you will never grow.                                                                                                         -Waldo Emerson

1.What is MVC ?!         

MVC is a software architecture - the structure of the system - that separates domain/application/business (whatever you prefer) logic from the rest of the user interface. It does this by separating the application into three parts: the model, the view, and the controller. 

  •  The model manages fundamental behaviors and data of the application. It can respond to requests for information, respond to instructions to change the state of its information, and even to notify observers in event-driven systems when information changes. This could be a database, or any number of data structures or storage systems. In short, it is the data and data-management of the application. 
  •  The view effectively provides the user interface element of the application. It'll render data from the model into a form that is suitable for the user interface. 
  •  The controller receives user input and makes calls to model objects and the view to perform appropriate actions. All in all, these three components work together to create the three basic components of MVC.
For more information visit this link :introduction to the mvc_framework

2.Architecture

The architecture is a combination of a front controller on the server and model-view-controller design pattern and a directory structure ,that makes adding features in a self contained modular way easy. We will delve into each of these core architectural components in turn below.
Directory structure


3.Configure Apache


sudo a2enmod rewrite

For and change AllowOverride None to AllowOverride All. This may be on lines 7 and 11 of /etc/apache2/sites-available/default. Modern versions of Ubuntu store these in the main config file: /etc/apache2/apache2.conf.

sudo nano /etc/apache2/apache2.conf

Now restart your apache server :

sudo service apache2 restart



4.The front controller: index.php

The first key point is that all site traffic is directed through index.php. This is a common design pattern called the front controller which allows us to load components used by the whole application such as user sessions and database connection in one place. We use mod_rewrite to make the URL look clean, converting:
myframework/user/login
to:
myframework/index.php?q=user/login

index.php then fetches the property q with $_GET['q']. using q as a command to tell the application what to do.


5.Build it


Start by creating a folder in your LAMP server /var/www directory lets call it framework Create a new file called .htaccess and open it in your favourite code editor, copy and paste the following code into the .htaccess file:
 .htaccess:


# Don't show directory listings for URLs which map to a directory.
Options -Indexes

# Set the default handler.
DirectoryIndex index.php

# Various rewrite rules.

  RewriteEngine on
  # Rewrite URLs of the form 'x' to the form 'index.php?q=x'.
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]



This script tells Apache that whenever a HTTP request arrives and if no physical file (!-f) or path (!-d) or symbolic link (!-l) can be found, it should transfer control to index.php, which is the front controller. Next create a new file called index.php, to illustrate what the .htaccess file does add the following two lines to index.php.

<?php

echo "q=".$_GET['q'];
?>
Next: navigate to http://localhost/framework/stories/list.json in your browser and you should see the following:
q=stories/list.json

As you can see the stories/list.json part has been passed to index.php as a string rather than navigating to an actual folder and file location.

1) Decoding the route

Next we want to decode the "stories/list.json" so that we can use it in our application, in this example: 


  • stories is the controller (the module we want to use) 
  • list is the action 
  • json is the format

Copy and paste the following into index.php:

<?php

require "route.php";
$route = new Route($_GET['q']);

echo "The requested controller is: ".$route->controller."<br>";
echo "The requested action is: ".$route->action."<br>";
echo "The requested format is: ".$route->format."<br>";



and create a file called route.php with the following:

<?php

class Route
{
    public $controller = '';
    public $action = '';
    public $subaction = '';
    public $format = "html"; 

    public function __construct($q)
    {
        $this->decode($q);
    }

    public function decode($q)
    {
        // filter out all except a-z and / .
        $q = preg_replace('/[^.\/A-Za-z0-9]/', '', $q);

        // Split by /
        $args = preg_split('/[\/]/', $q);

        // get format (part of last argument after . i.e view.json)
        $lastarg = sizeof($args) - 1;
        $lastarg_split = preg_split('/[.]/', $args[$lastarg]);
        if (count($lastarg_split) > 1) { $this->format = $lastarg_split[1]; }
        $args[$lastarg] = $lastarg_split[0];

        if (count($args) > 0) { $this->controller = $args[0]; }
        if (count($args) > 1) { $this->action = $args[1]; }
        if (count($args) > 2) { $this->subaction = $args[2]; }
    }
}


Navigate again to http://localhost/framework/stories/list.json in your browser and you should see the following:

The requested controller is: stories
The requested action is: list
The requested format is: json


For more information visit this documentation  of the community  src:_Link_
note:this framework have inspired me to build my own framework .
@emoncms

make real Time charts with Flot


1.Introduction

In this post we will be talking about how to to make real time progressing chart , to be frank i had been searching for a selections for a quit a while ,now and the best solution ,i have came up with so far is to use flot , flot framework  is a good way to do plotting , its ,fast,free and open source.

2.Flot VS Google charts !?

Flot :

  1. jQuery plugin : if you are familiar with jQuery (or if your apps is integrated with jQuery), it seems natural to use Flot
  2. Offline visualization : you can test or have it installed into an internal website. Google Visu can only work if you have acces to the google website !!
  3. Customization : this is basically a JavaScript file so if you are good at JS coding, you can customize your charts as your convenience. Also the Flot plugin system allows you better modularity
Google charts :
  1. Documentation : awesome ! Examples for each type of graphs are available in the Google site
  2. Easy to use : Really. Easier than Flot (that requires to somehow customize the div container)
  3. Powerful : you have many sorts of graphs and features (zooming, interactivity,...)

3.Requirement


  • Flot library Flot_library
  • Sublime edit Text
  • Wamp server/EasyPHP or other ...
  • Jquery CDN

4.Files

start your Wamp server and then create this files in WWW folder (C:/wamp/www)


5.index.php


<!-- NodeME{2016} @iheb_b3N_Sal3m  !-->
<script src="flot/jquery.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://static.pureexample.com/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.time.js"></script>    
<script type="text/javascript" src="http://static.pureexample.com/js/flot/jquery.flot.axislabels.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>

<!-- Javascript -->
<script>
var data = [];
var dataset;
var totalPoints = 50;
var updateInterval = 1000;
var now = new Date().getTime();



function get_feeds_from_the_db()//ajax request to get the finale data from backend
{


return $.ajax({
      url: "Get_feeds.php"
  });

}



function GetData(i) {
    data.shift();

    while (data.length < totalPoints) {   
        var y=i;//axe_y
        var temp = [now += updateInterval, y];//axe_x
        data.push(temp);
    }
}

var options = {
    series: {
        lines: {
            show: true,
            lineWidth: 1.2,
            fill: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [2, "second"],
        tickFormatter: function (v, axis) {
            var date = new Date(v);

            if (date.getSeconds() % 20 == 0) {
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return hours + ":" + minutes + ":" + seconds;
            } else {
                return "";
            }
        },
        axisLabel: "Time",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxis: {
        min: 0,
        max: 100,        
        tickSize: 5,
        tickFormatter: function (v, axis) {
            if (v % 10 == 0) {
                return v + "%";
            } else {
                return "";
            }
        },
        axisLabel: "CPU loading",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 6
    },
    legend: {        
        labelBoxBorderColor: "#fff"
    }
};

$(document).ready(function () {
    GetData();

    dataset = [
        { label: "temperature", data: data }
    ];

    $.plot($("#flotcontainer"), dataset, options);

    function update() {
        var promise = get_feeds_from_the_db();
  promise.success(function (data) {
  console.log(data);//console output to check the function
        GetData(data);
        $.plot($("#flotcontainer"), dataset, options)
        setTimeout(update, updateInterval);
       

});

    }

    update();
});



</script>

<!-- HTML -->
<!-- Your app starts here!!   -->
<div id="flotcontainer"></div>



6.Get_feeds.php

This this is the logic page of our application .If you need to fetch data from the data base you w'll just connect to your host server ,get the feeds ,then echo the out put .
<?php
/*--------------------------------------
write your code here,if u need to get feeds from
mySQL data base


-----------------------------------------*/


echo rand(0,100); //generate random number between 0<y<100

?>

7.Screenshot


8.Download demo



9.Watch the live demo here :



Google charts and MySQL


I was working on some projects that needs to use charts in the application ,so ,after a long search in the web ,here is my solution . 
right now I am developing two types of charts 
  •  real Time 
  • Static charts 
In this article, I will show your how to fetch data from database to use it on the google Line charts to create beautiful and customisable charts for your future projects. . 

1.Introduction

It is practically impossible to imagine any dashboard without graphs and charts. They present complex statistics quickly and effectively. Additionally, a good graph also enhances the overall design of your website.

2.What is google charts ?

The Google Chart API is a tool that lets people easily create a chart from some data and embed it in a web page. Google creates a PNG image of a chart from data and formatting parameters in an HTTP request.
read more :GoogleAPI

3.Files

start your Wamp server and then create this files in WWW folder (C:/wamp/www)

config.php:define the settings for the application
get_feeds:fetch data from data base 

4.Create database

Database name is :google_charts
table name:mychart    

CREATE TABLE IF NOT EXISTS `mychart` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `axe_x` text NOT NULL,
  `axe_y` text NOT NULL,
  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=101 ;

--
-- Contenu de la table `mychart`
--

INSERT INTO `mychart` (`id`, `axe_x`, `axe_y`, `time`) VALUES
(1, '0', '30', '2016-04-13 20:52:15'),
(2, '1', '90', '2016-04-13 20:52:15'),
(3, '2', '36', '2016-04-13 20:52:16'),
(4, '3', '85', '2016-04-13 20:52:16'),
(5, '4', '87', '2016-04-13 20:52:16'),
(6, '5', '10', '2016-04-13 20:52:16'),
(7, '6', '25', '2016-04-13 20:52:16'),
(8, '7', '87', '2016-04-13 20:52:16'),
(9, '8', '28', '2016-04-13 20:52:16'),
(10, '9', '32', '2016-04-13 20:52:16'),
(11, '10', '68', '2016-04-13 20:52:16'),
(12, '11', '42', '2016-04-13 20:52:16'),
(13, '12', '11', '2016-04-13 20:52:16'),
(14, '13', '60', '2016-04-13 20:52:16'),
(15, '14', '91', '2016-04-13 20:52:16'),
(16, '15', '85', '2016-04-13 20:52:16'),
(17, '16', '7', '2016-04-13 20:52:16'),
(18, '17', '75', '2016-04-13 20:52:16'),
(19, '18', '29', '2016-04-13 20:52:16'),
(20, '19', '40', '2016-04-13 20:52:16'),
(21, '20', '22', '2016-04-13 20:52:16'),
(22, '21', '92', '2016-04-13 20:52:17'),
(23, '22', '28', '2016-04-13 20:52:17'),
(24, '23', '30', '2016-04-13 20:52:17'),
(25, '24', '56', '2016-04-13 20:52:17'),
(26, '25', '45', '2016-04-13 20:52:17'),
(27, '26', '86', '2016-04-13 20:52:17'),
(28, '27', '18', '2016-04-13 20:52:17'),
(29, '28', '74', '2016-04-13 20:52:17'),
(30, '29', '84', '2016-04-13 20:52:17'),
(31, '30', '29', '2016-04-13 20:52:17'),
(32, '31', '4', '2016-04-13 20:52:17'),
(33, '32', '73', '2016-04-13 20:52:17'),
(34, '33', '65', '2016-04-13 20:52:17'),
(35, '34', '89', '2016-04-13 20:52:17'),
(36, '35', '59', '2016-04-13 20:52:17'),
(37, '36', '75', '2016-04-13 20:52:17'),
(38, '37', '13', '2016-04-13 20:52:17'),
(39, '38', '46', '2016-04-13 20:52:17'),
(40, '39', '2', '2016-04-13 20:52:17'),
(41, '40', '45', '2016-04-13 20:52:18'),
(42, '41', '13', '2016-04-13 20:52:18'),
(43, '42', '44', '2016-04-13 20:52:18'),
(44, '43', '55', '2016-04-13 20:52:18'),
(45, '44', '73', '2016-04-13 20:52:18'),
(46, '45', '34', '2016-04-13 20:52:18'),
(47, '46', '40', '2016-04-13 20:52:18'),
(48, '47', '79', '2016-04-13 20:52:18'),
(49, '48', '8', '2016-04-13 20:52:18'),
(50, '49', '68', '2016-04-13 20:52:18'),
(51, '50', '19', '2016-04-13 20:52:18'),
(52, '51', '30', '2016-04-13 20:52:18'),
(53, '52', '60', '2016-04-13 20:52:18'),
(54, '53', '46', '2016-04-13 20:52:18'),
(55, '54', '60', '2016-04-13 20:52:18'),
(56, '55', '15', '2016-04-13 20:52:18'),
(57, '56', '91', '2016-04-13 20:52:18'),
(58, '57', '45', '2016-04-13 20:52:18'),
(59, '58', '33', '2016-04-13 20:52:18'),
(60, '59', '65', '2016-04-13 20:52:19'),
(61, '60', '28', '2016-04-13 20:52:19'),
(62, '61', '61', '2016-04-13 20:52:19'),
(63, '62', '68', '2016-04-13 20:52:19'),
(64, '63', '1', '2016-04-13 20:52:19'),
(65, '64', '26', '2016-04-13 20:52:19'),
(66, '65', '57', '2016-04-13 20:52:19'),
(67, '66', '60', '2016-04-13 20:52:19'),
(68, '67', '100', '2016-04-13 20:52:19'),
(69, '68', '70', '2016-04-13 20:52:19'),
(70, '69', '5', '2016-04-13 20:52:19'),
(71, '70', '2', '2016-04-13 20:52:19'),
(72, '71', '14', '2016-04-13 20:52:19'),
(73, '72', '18', '2016-04-13 20:52:19'),
(74, '73', '45', '2016-04-13 20:52:19'),
(75, '74', '68', '2016-04-13 20:52:19'),
(76, '75', '90', '2016-04-13 20:52:19'),
(77, '76', '79', '2016-04-13 20:52:19'),
(78, '77', '7', '2016-04-13 20:52:19'),
(79, '78', '69', '2016-04-13 20:52:19'),
(80, '79', '87', '2016-04-13 20:52:19'),
(81, '80', '75', '2016-04-13 20:52:19'),
(82, '81', '87', '2016-04-13 20:52:19'),
(83, '82', '16', '2016-04-13 20:52:20'),
(84, '83', '34', '2016-04-13 20:52:20'),
(85, '84', '33', '2016-04-13 20:52:20'),
(86, '85', '76', '2016-04-13 20:52:20'),
(87, '86', '49', '2016-04-13 20:52:20'),
(88, '87', '24', '2016-04-13 20:52:20'),
(89, '88', '20', '2016-04-13 20:52:20'),
(90, '89', '81', '2016-04-13 20:52:20'),
(91, '90', '88', '2016-04-13 20:52:20'),
(92, '91', '48', '2016-04-13 20:52:20'),
(93, '92', '42', '2016-04-13 20:52:20'),
(94, '93', '56', '2016-04-13 20:52:20'),
(95, '94', '48', '2016-04-13 20:52:20'),
(96, '95', '67', '2016-04-13 20:52:20'),
(97, '96', '13', '2016-04-13 20:52:20'),
(98, '97', '7', '2016-04-13 20:52:20'),
(99, '98', '66', '2016-04-13 20:52:20'),
(100, '99', '82', '2016-04-13 20:52:20');

5.Config.php

<?php
define("host","127.0.0.1");
define("username","_YOUR_USERNAME_");
define("pwd","YOUR_PASSWORD_");
define("db","test");
?>

6.index.php


<?php
require("get_feeds.php");
?>

<h3 align="center">Google LineCharts</h3>

<!-- CDN charts   !-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!--END CDN charts   !-->


<!-- div to include the chart   !-->

<div id="chart_div"></div>

<!-- END div to include the chart   !-->


      
<script>
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCrosshairs);

function drawCrosshairs() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'consumption');
      data.addRows(<?php echo $out; ?>);

      var options = {
        hAxis: {
          title: 'Time'
        },
        vAxis: {
          title: 'Percentage'
        },
        colors: ['#536dfe'],
        crosshair: {
          color: '#000',
          trigger: 'selection'
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

      chart.draw(data, options);
      chart.setSelection([{row: 38, column: 1}]);

    }
    </script>
    

7.Screenshot


8.Download demo

9.Watch the live demo here :


how to say happy birthday in html 5


1.Overview of the project

This project was a gift ,and i thought to share it ,in our community.

2.Structure of the project

The HTML is fairly simple. We have the two buttons wrapped inside. And the inner content for each button that gets shown when the button expands to a modal, is placed just outside of the container for the button

3.HTML 

<div class="buttons-ctn">LEFT</span></a>
  <a href="" class="button button--right"><span>IHEB</span></a>
</div>
<div class="button__content button__content--left">
  <h2>You chose left!</h2>
  <a href="">Happy bday iheb</a>
</div>
<div class="button__content button__content--right">
  <h2>Youchose Iheb</h2>
  <a href="">Happy bday Iheb </a>
</div>

4.Styling

The buttons are floated to the left so their side by side with no gap in-between. The modal content is positioned in the center of the container and is hidden. We reveal the modal content by adding the class .button__content--active with jQuery. A few key things to note are the z-index values. The modal content must be given a higher z-index than the buttons so it doesn’t get placed behind the background of the buttons.

5.CSS


@mixin easeOut {
  transition: all .35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

$black: lighten(black, 8);

* {
  box-sizing: border-box;
}

body {
  background: #38c5b9;
  font-family: 'Lato';
  font-weight: 300;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

.buttons-ctn {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: -30px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.button {
  will-change: transform;
  position: relative;
  float: left;
  display: inline-block;
  padding: 20px;
  width: 140px;
  text-align: center;
  line-height: normal;
  @include easeOut;
  
  &--left {
    background: $black;
    color: white;
  }
  
  &--right {
    background: darken(white, 8);
    color: $black;
  }
  
  &--active {
   cursor: default;
    
   span {
     opacity: 0;
    }
  }
}

.button__content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 60px 20px;
  text-align: center;
  width: 600px;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  color: white;
  
  &--left {
    color: white;
    
    a {
      color: $black;
      background: white;
    }
  }
  
  &--right {
    color: $black;
    
    a {
      color: white;
      background: $black;
    }
  }
  
  &--active {
    opacity: 1;
    visibility: visible;
  }
  
  a {
    display: inline-block;
    padding: 10px 20px;
  }
  
  h2 {
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
  }
  
  @media (max-width: 650px) {
    width: 295px;
  }
}

main {
  color: white;
  text-align: center;
  h1 {
    font-weight: 300;
    margin-bottom: 8px;
    margin-top: 24px;
  }
  
  p {
    margin-top: 0;
    
    a {
      font-size: 20px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24px;
      color: rgba(black, 0.6);
    }
  } 
}

6.Animation

Here is where most of the magic lies. When a button is clicked, we find out which button was selected, and which one wasn’t, and move them both into the center of the screen by subtracting their offset().left value and.innerWidth() / 2 from half of the window width. It sounds more complicated than it is. We give the ‘unselected’ button a transition-delay so it moves to the center slightly after the first button. When that transition is complete we transform the scale value of the selected button to match the size of the inner content of that modal. We do this by dividing the .innerWidth() of the content by the .innerWidth() of the button. This value is what we use as the transform: scale(x) value; we do the same for the height and use that as the transform: scale(y) value

var button    = $('.button');
var content   = $('.button__content');
var win     = $(window);

var expand = function() {
  if (button.hasClass('button--active')) {
    return false;
  } else {
    var W      = win.width();
    var xc      = W / 2;

    var that     = $(this);
    var thatWidth  = that.innerWidth() / 2;
    var thatOffset  = that.offset();
    var thatIndex  = that.index();
    var other;

    if (!that.next().is('.button')) {
      other = that.prev();
    } else {
      other = that.next();
    }

    var otherWidth  = other.innerWidth() / 2;
    var otherOffset  = other.offset();

    // content box stuff
    var thatContent = $('.button__content').eq(thatIndex);
    var thatContentW = thatContent.innerWidth();
    var thatContentH = thatContent.innerHeight();

    // transform values for button
    var thatTransX  = xc - thatOffset.left - thatWidth;
    var otherTransX = xc - otherOffset.left - otherWidth;
    var thatScaleX = thatContentW / that.innerWidth();
    var thatScaleY = thatContentH / that.innerHeight();

    that.css({
      'z-index': '2',
      'transform': 'translateX(' + thatTransX + 'px)'
    });

    other.css({
      'z-index': '0',
      'opacity': '0',
      'transition-delay': '0.05s',
      'transform': 'translateX(' + otherTransX + 'px)'
    });

    that.on('transitionend webkitTransitionEnd', function() {
      that.css({
        'transform': 'translateX(' + thatTransX + 'px) scale(' + thatScaleX +',' + thatScaleY + ')',
      });

      that.addClass('button--active');
      thatContent.addClass('button__content--active');
      thatContent.css('transition', 'all 1s 0.1s cubic-bezier(0.23, 1, 0.32, 1)');
      that.off('transitionend webkitTransitionEnd');
    });

    return false;
  }
};

var hide = function(e) {
  var target= $(e.target);
  if (target.is(content)) {
    return;
  } else {
    button.removeAttr('style').removeClass('button--active');
    content.removeClass('button__content--active').css('transition', 'all 0.2s 0 cubic-bezier(0.23, 1, 0.32, 1)');
  }
};

var bindActions = function() {
  button.on('click', expand);
  win.on('click', hide);
};

var init = function() {
  bindActions();
};

init();

7.Screenshots




8.Download demo

Demo
https://drive.google.com/file/d/0B-qTMPAUIfdTbUZZd3I2dXVwenc/view?usp=sharing

How to create Basic Register page in Php,MySQL,Bootstrap [part 2]


1.Abstract

This tutorial is an attempt to show how to put together a basic user authentication system using PHP and MySQL(bootstrap for the front-end). 
In the previous post we have already created our basic application and it works fine but something still missing its the register page .Basically,any application needs always two interfaces the first one is register page ,in which the user create his account and profile and second page user authentication in which the system can identifying users and gives them there permission .(this one element of the information security )

take a look to the previous post first:
http://nodeme.blogspot.com/2016/04/how-to-create-basic-login-page-in.html

2.Files

after you have downloaded the project ,all we need now is to add new page->register.php
so the new project w'll be like that:




3.Register.php

the code looks the some of login page we just need to change the sql query from select to insert .
if you are new in this field ,you need to see more courses about SQL ,but even that you don't need it right now because its too easy to understand it .

<?php
require("config.php");
$flag="";
if (isset($_POST["btn-register"])) {
 # code...
$email=$_POST["email"];
$password=$_POST["password"];

$conx=new mysqli(host,username,pwd,db);

$request=$conx->query(" insert into login_info(email,password) values('$email','$password'); ");

if ($request) {
 $flag='<div class="alert alert-success">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Success </strong> you can login now <a href="login.php">login</a>
 </div>';
}
else
{
 $flag='<div class="alert alert-danger">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Failed to register !!</strong>something wrong here !
 </div>';
}


}

?>
<!DOCTYPE html>
<html lang="EN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Register</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
<?php
include("menu.php");
?>
<style type="text/css">
 #mypannel{
position: relative;
top: 130px;
 }

#mypannel2{
 background-color: #eeeeee;
}
</style>
<div class="container">
<div class="panel panel-default" id="mypannel">
 <div class="panel-body">
<center>
<h3>Register</h3>
<p>Each user registers his/her own account.
</p>
</center>
<div class="container-fluid  " align="center">
<form id="registerForm" action="" method="post">
<div style="line-height: 2px; background-color: rgba(210,210,210,0.5); padding: 20px 20px 20px 20px; border-radius: 6px;">
<br>
<div class="input-group">
<span style="width:135px !important;" class="input-group-addon">Email</span>
<input type="text" placeholder="email" name="email" class="form-control"/>
</div>

<br>
<div class="input-group">
<span style="width:135px !important;" class="input-group-addon">Password</span>
<input type="password" placeholder="Password" name="password" class="form-control"/>
</div><br><br>
<button type="submit" class="btn btn-success" name="btn-register">Register</button>
</div>
</form>
<?php
echo $flag;
?>

</div>
</div>
</div>
 </div>
</div>

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

4.Screenshots



How to create Basic Login page in Php,MySQL,Bootstrap [part 1]


1.Abstract

This tutorial is an attempt to show how to put together a basic user authentication system using PHP and MySQL(bootstrap for the front-end). 

2.Requirements for Sign-In webpage

(Before enter into the code part, You would need special privileges to create or to delete a MySQL database. So assuming you have access to root user, you can create any database using mysql mysqladmin binary)

  • Sublime Edit Text
  • Bootstrap package(for local use else use CDN)
  • Php
  • MySQL
  • Wamp/xampp/Lamp(for linux)/EasyPhp ........


3.Files 

start your Wamp server and then create this files in WWW folder (C:/wamp/www)

menu.php:we w'll include automatically this menu for every new page .
config.php:define the settings for the application

Create DataBase

Database name is :test
table name:login_info

CREATE TABLE IF NOT EXISTS `login_info` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `email` text NOT NULL,
  `password` text NOT NULL,
  `time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Config.php

<?php
define("host","127.0.0.1");
define("username","_YOUR_USERNAME_");
define("pwd","YOUR_PASSWORD_");
define("db","test");
?>

index.php

  <!DOCTYPE html>
<html lang="EN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyWebSite</title>
    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <style type="text/css">
body{
  background-color: #ffffff;
}

#myjump{
  position: relative;
  top: 50px;
  background-color: #000;
  color: #FFF;
}
  </style>
  <body>
<?php
include("menu.php");
?>
<div class="jumbotron" id="myjump">
  <div class="container" align="center">
    <h1>Hello, world!</h1>
    <p>Contents ...</p>
  
  </div>
</div>
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>






menu.php

This is the main menu of the web site ,all the code can be customized in this section(links,brand,website title....)
 

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="menuColor">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
          <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#">MarketPlace</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Updates</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Rules</a></li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
        </div>
<a href="login.php" class="btn btn-large btn-success ">Login/Register</a>
        </form>
      
    </div><!-- /.navbar-collapse -->
    </div>

  </div>
</nav>


<style type="text/css">
  
#menuColor
{
  background-color: #ecf0f1;
}

</style>

login.php

Login PHP is having information about php script and HTML script to do login.
 
<?php
require("config.php");
$msg="";
if (isset($_POST["btn-login"])) {
  # code...
$email=$_POST["email"];
$password=$_POST["password"];

$conx=new mysqli(host,username,pwd,db);

$req=$conx->query(" select * from login_info where email='$email' and password='$password' ");

if (mysqli_num_rows($req) >0) {
  # code...
header("location:welcome.php");
}
else
{
  $msg='<div class="alert alert-danger">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Check your email/password</strong>
</div>';
}
}
?>

<!DOCTYPE html>
<html lang="EN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>

    <!-- Bootstrap CSS -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
<style type="text/css">
  
 #mypannel{
position: relative;
top: 130px;

 }
</style>

  <body>
<?php
include("menu.php");
?>

<div class="container">
<div class="panel panel-default" id="mypannel">
  <div class="panel-body">

<form action="" method="POST" role="form">
  <legend>Login to your session</legend>

  <div class="form-group">
    <label for="">Login</label>
    <input type="text" class="form-control" name="email" placeholder="username/email">

<label for="">Password</label>
    <input type="password" class="form-control" name="password" placeholder="password">

  </div>
<center>
  <button type="submit" class="btn btn-success btn-lg " name="btn-login">Login</button>
  <a href="register.php" class="btn btn-lg btn-primary ">Register</a>
  <button type="submit" class="btn btn-danger btn-lg">Forgot my password</button>
  </center>
</form>


  </div>
<center>
<?php
echo $msg;
?>
</center>

  </div>
  </div>

    <!-- jQuery -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  </body>
</html>

What is the main difference between include and require ?

This is frequent question .(40% of people asks about that and 60% about get and post :p )

Use include if you don't mind your script continuing without loading the file (in case it doesn't exist etc) and you can (although you shouldn't) live with a Warning error message being displayed.

Using require means your script will halt if it can't load the specified file, and throw a Fatal error.


welcome.php

this is the welcome page of the user, 'profile page ' . In this post we have not ,yet ,set a default session to every user that have been login, to his session ,so, this is like a standard page .
(next post w'll be with session).
 
<!DOCTYPE html>
<html lang="EN">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>wellcome</title>

  <!-- Bootstrap CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
   <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body>
 <div class="navbar navbar-inverse">
  <div class="container-fluid">
   <a class="navbar-brand" href="#">profile</a>
   <ul class="nav navbar-nav">
    <li class="active">
     <a href="#">Profile</a>
    </li>
    <li>
     <a href="index.php">Logout</a>
    </li>
   </ul>
  </div>
 </div>

<center>
 <h3>Hi ! root </h3>

</center>
  <!-- jQuery -->
  <script src="//code.jquery.com/jquery.js"></script>
  <!-- Bootstrap JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </body>
</html>

What about security !!

this post was too easy to getting started with some coding stuff and create simple application but you should definitely think more about security issues ,because ,here for example the attacker can gaining the access through two basics attack (hack for fun :p ) Sql injection by just typing ' or 1=1; or XSS attack , because the application is not protected.So,you should think about security to take the good risk :D .(next post i w'll post things about security )

ScreenShot




Download the project

https://drive.google.com/file/d/0B-qTMPAUIfdTUXJ5YjRoRmpETzg/view?usp=sharing



Installation 

check this video:

Simple TCP [client/serveur] Application [C#]



Network programming

The term network programming refers to writing programs that execute across multiple devices (computers), in which the devices are all connected to each other using a network.

About the application

In this tutorial we are going to develop client/server application in C# 
Check the video above