Color odd and even div alternatively with different color

I had a situation where I need to have an alternate background color for the rows inside a parent div. Sample code is shown below

<div class="content-body-notification content-body  ">
<div class="user-row">
1
</div>
<div class="user-row">
2
</div>
<div class="user-row">
3
</div>
<div class="user-row">
4
</div>
</div>

So now we are going to give different background color to odd and even user-row rows as shown below


.content-body .user-row:nth-child(odd) {
    background: #eeeff2;
}
.content-body .user-row:nth-child(even) {
    background: #f8f8fa;
}

and we get output same as diagram shown below:

Laravel Pagination links not including other GET parameters

When there are some GET parameters in the URL,
eg: http://yoursiteurl.com/search-vehicle-profile?startdate=07%2F28%2F2017&enddate=08%2F01%2F2017&vin_number=2HGFC2F89GH033029, the pagination links produced only contain the page parameter and nothing else as http://yoursiteurl.com/search-vehicle-profile?page=2

This happens when you use link in your blade as {{ $vehicleHistoryDetail->link() }}

so rather than just using that, you need to you appends function as shown below

{{ $vehicleHistoryDetail->appends(request()->input())->links() }}

Raw Query in Laravel

We can write raw query in laravel as shown below. Here we have made use of where, where in, with ‘and’ and ‘or’ condition. The most important thing you need to consider while writing raw query is DB::select( DB::raw())


  $vehicleHistoryDetail =
            DB::select( DB::raw("SELECT mdi_ext_batt_voltage,mdi_dashboard_fuel_level,mdi_obd_mileage FROM vehicle_info_devices WHERE profile_id IN (1,2)and(
        mdi_dashboard_fuel_level <> 0 or mdi_ext_batt_voltage <> 0 or mdi_obd_mileage <> 0) ") );

Fun with Array

I have a locationlist class which has geographical latitude and longitude as shown below


<?php 
namespace App\LocationProviders; 
class LocationList 
{ 
public function getLocations() 
{ 
       $locationCoords = []; $locationCoords[0] = [ ["lat" => 43.75812569798546, "lng" => -79.79318417608738],
            ["lat" => 43.758138774543475, "lng" => -79.7931607067585],
            ["lat" => 43.75810390371577, "lng" => -79.7931244969368],
            ["lat" => 43.75809034283284, "lng" => -79.79314729571342]
        ];

        $locationCoords[1] = [
            ["lat" => 43.7581397431773, "lng" => -79.79315668344498],
            ["lat" => 43.758152819732246, "lng" => -79.7931332141161],
            ["lat" => 43.75811843322978, "lng" => -79.7930970042944],
            ["lat" => 43.758105356667315, "lng" => -79.79311980307102]
        ];
        $locationCoords[2] = [
            ["lat" => 43.7581547569994, "lng" => -79.79312919080257],
            ["lat" => 43.7581673492344, "lng" => -79.7931070625782],
            ["lat" => 43.758132962740284, "lng" => -79.79307018220425],
            ["lat" => 43.75812037049805, "lng" => -79.79309231042862]
        ];

    return $locationCoords;
     }

}

Now what I intend to do is, I want to have array of latitude and array of longitude for the array $locationCoords[0],$locationCoords[1],$locationCoords[2] and so on.For this i have written below code


public function vehicle_map_with_info()
    {

      $locationListInfo = new LocationList();

        $locationinfo = $locationListInfo->getLocations();

        $newCoordinateArr = [];
        foreach ($locationinfo as $key => $value) {
            $latitudeArr = [];
            $longitudeArr = [];
            foreach ($value as $keyanother => $anothervalue) {

                $latitudeArr[] = $anothervalue['lat'];
                $longitudeArr[] = $anothervalue['lng'];
            }
            $newCoordinateArr[$key]['lat'] = $latitudeArr;
            $newCoordinateArr[$key]['lng'] = $longitudeArr;


        }

        echo "<pre>";
        //print_r($latitudeArr);
        return $newCoordinateArr;

}

Here it is, now you can get array in the form as shown below:


[
{
"lat": [43.75812569798546,43.758138774543475,43.75810390371577,43.75809034283284],
"lng": [-79.79318417608738,-79.7931607067585,-79.7931244969368,-79.79314729571342]
},
{
"lat": [43.7581397431773,43.758152819732246,43.75811843322978,43.758105356667315],
"lng": [-79.79315668344498,-79.7931332141161,-79.7930970042944,-79.79311980307102]
}
]

Fun with Array -2

Now i have another requirement too, that is i want array of latitude and longitude in the form of

$finalcoordinates=array("lat1 lng1","lat2 lng2","lat3 lng3"); ie

$finalcoordinates = array("43.7592439755264 -79.79324888437986","43.759231383517985 -79.79323044419289","43.759203535797674 -79.79327369481325","43.759215643503765 -79.7932904586196","43.7592439755264 -79.79324888437986");

In order to get this output i have written a code as shown below:


public function vehicle_map_with_info($vin_id)
    {
        $locationObj = new FindLocation();
        $locationinfo = $locationObj->showLocations();

        foreach ($locationinfo as $key => $value) {
            $newCoordinateArr = [];
            foreach ($value as $seckey => $finalvalue) {
                $newCoordinateArr[$seckey] = $finalvalue['lat'] . " " . $finalvalue['lng'];

            }
          
          
        }

        return $newCoordinateArr;
}

Now you get your output as


[
"43.758909802097 -79.794197380543",
"43.758935954868 -79.794150441885",
"43.758917551068 -79.794130325317",
"43.758891398289 -79.794177263975",
"43.758909802097 -79.794197380543"
]

Hope it gives solution to your problem.

Background image and providing padding to it

I have a select input and i want to put small image icon at the right of it with some padding on it. For this the easy solution is

My input

 <select placeholder="Filter By" class="searchuser userddl">
                    <option>Filter By</option>
                    <option>Recently Updated</option>
                    <option>Recently Deleted</option>
                </select>

And the css to give background image along with some padding is:


select.searchuser.userddl {
    background: #000 url('/images/down-arrow.png');
    background-position: right 7px top 6px;
    background-repeat: no-repeat;
}

And the output appears as

Preview Image before it is uploaded

Today we are going to learn about Image preview before it is uploaded.

In your php file, you have code as shown below:

<form id="form1" runat="server">
        <input type='file' id="uploadFile" />
        <img id="imagePreview" src="#" alt="your image" />

<script type="text/javascript" src="js/imagePreview.js"></script>
</form>

Include your script file in your header or footer, and you have js file with the name imagePreview as shown below:

$(function() {
    $("#uploadFile").on("change", function()
    {


        $( "#imagePreview" ).addClass( "giveImgStyle" );
        var files = !!this.files ? this.files : [];
        if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

        if (/^image/.test( files[0].type)){ // only image file
            var reader = new FileReader(); // instance of the FileReader
            reader.readAsDataURL(files[0]); // read the local file

            reader.onloadend = function(){ // set image data as background of div
                $("#imagePreview").css("background-image", "url("+this.result+")");
            }
        }
        else{
            alert('Please Select Image');
        }
    });
});


Then in your style sheet, add the style for giveImgStyle


.giveImgStyle{
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
    display: inline-block;
}

Then you are done. you get imagepreview as shown below

imagepreview

Enable user register even after login laravel 5

In order to enable user register even after logging in laravel, you can do following simple step:

1. Go to your RegisterController.php which is inside controllers followed by Auth.

There you get code as shown below

   public function __construct()
    {
        $this->middleware('guest');
       
    }

You can remove the $this->middleware() line entirely to prevent the middleware being applied to all your login and register routes.

This will enable you to register user even after login.

Laravel 5 Class ‘form’ not found

When i was trying to run my laravel application with form tags like:

{!! Form::label('featured_image','Select Featured Image',array('id'=>'','class'=>'')) !!}
{!! Form::file('image',array('class'=>'imageUpload','id'=>'uploadFile')) !!}

I got an error with Laravel 5 Class ‘form’ not found
With some research, i found a solution for it. Here are some steps to solve it.

1. Go to your composer.json file
2. Include “laravelcollective/html”: “^5.2.0” within require
3. then update your composer using a command in your terminal :\> composer update

Once the composer is updated

4. Now go to your app.php file within config folder
5. In providers add following code

  Collective\Html\HtmlServiceProvider::class,

6. then go to alias section and add below code

   'Form' => Collective\Html\FormFacade::class,
   'Html' => Collective\Html\HtmlFacade::class,

Now run your application and you are free of error.

Implement Font Awesome icon inside submit button

If you want to place font awesome icon inside a submit button, first of all you cannot use

 <input type="submit" value="Submit">

but instead, you need to use as shown below:

  <button type="submit" class="btn btn-danger">
                <i class="fa fa-search" aria-hidden="true"></i>
 </button>

List of mostly used media queries

Last time we had discussed most appropriate and easy media queries for your site.I feel those media query itself is enough to make your site responsive. But If you want more detailed media queries that fit almost all varieties of mobiles, desktops, iPads, tablets, and laptops, you can use following media queries.

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}

Implement Google and other fonts in your site style sheet

Provided you have downloaded fonts which need to get implemented in the site, do following stuff

Method 1

1. Create a separate folder fonts parallel to your other folder,
2. if you have all the formats of font, then paste all of them inside folder,
3. if you dont have all formats, go to the font generator eg: https://www.web-font-generator.com/
4. upload any of the format you have and generate all other formats like .eot, .woff, .svg, .ttf, .otf
5. Then as told earlier, copy those files inside your fonts folder,
6. then paste below code in the style sheet. please make sure your font path is correct along with correct font name.


@font-face {
	font-family: 'Oswald-Bold';
	src: url('fonts/Oswald-Bold.eot');
	src: url('fonts/Oswald-Bold.otf');
	src: url('fonts/Oswald-Bold.woff') format('woff'), url('fonts/Oswald-Bold.ttf') format('truetype'), url('fonts/Oswald-Bold.svg') format('svg');	
}

then in your css you can use as:


.h4{
font-family:Oswald-Bold;
}

Method 2

Before taking all these tensions to implement your font, you first check if the font is available in google fonts

1. First go to google fonts if the font you require is available or not.ie : https://fonts.google.com/

2. search your required font
3. Click plus icon to add font in your list as shown below

4. then you place your link inside tag of your site header as

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

then use font as


.h4{
font-family:Roboto;
}

Complete Media query to make your site responsive

The code below helps your site to fit in different screen sizes. we can find various media queries when we google it, among all those codes i feel these to be the most appropriate and easy to use.


//for larger screen ie large desktops
@media only screen and (min-width: 1200px) and (max-width: 1440px) { 

}

//for medium screen 15inch laptops
@media only screen and ( min-width: 992px) and (max-width: 1024px) { 

}

//for small size laptops ie 13inch laptops
@media only screen and ( max-width: 960px ) { 

}
//for ipad and tablets
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) { 

}

//for mobiles either horizontal orientation or large size mobiles
@media only screen and ( max-width: 767px ) { 

}

 //for mobiles or vertical orientation
@media only screen and ( max-width: 479px ) { 
}


How to change color of placeholder

Here is the code to change the color of placeholder for you inputs

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Hello World! First iphone App

From today we will begin learning ios. We will begin with hello world application and will keep learning through out. with each learning you can find sample application for downloading.

In the xcode 5 and above, we do not get xib or interface builder, but instead we get storyboard where we do all designing stuffs. Let us start our hello world program now.

1. First of all open xcode. create a new project as shown below:

Screen Shot 2014-11-16 at 7.43.16 PM

2. Within Application , Choose Application , then select single view application:
Screen Shot 2014-11-16 at 7.46.12 PM

3: then enter the product name as helloworld.

Screen Shot 2014-11-16 at 7.47.17 PM

syntax highlighting in wordpress

To accomplish the syntax highlighting, just wrap your code in these tags:

33

Where Your_used_langauge can be

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • python
  • ruby
  • scala
  • sql
  • vb
  • xml

Embed Youtube video in html

1. open your youtube link
2. Click on Share link, just below the subscribe button
11

3. You can see Embed link after clicking on share.

[There you find iframe code ]

4. copy iframe code and paste in your html file.

22

Iframe code

5. You can customize video width and height manually or can do it clicking on more option with some other options as well.

Iframe video in html displays as:

Insert Data using JSON ASP.NET Web services and jQuery

Hello everyone, today we will learn how to insert data in sql server database using json asp.net web services.
In sql server Database:
– Create your database
– Create a table with fields “Name, PhoneNumber, Email, Address”

2

In Visual Studio 2010
1. Open visual studio.
2. Go to file- new – website
3. Type your project name

1

Let us first create aspx page which will send our input values to the asmx page. Here we are using jquery -ajax for sending datas to .asmx page which will insert those data to sql database.

1. Now create a new aspx page

  • In solution explorer, right click then add new item
  • Select Web form
  • Enter page name eg:InsertData.aspx

3

2. Copy the below code in your aspx page.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        function CallJsonService() {

            // Creating variables to hold data from textboxes
            var name = $('#_txtname').val();
            var phone = $('#_phone').val();
            var email = $('#_email').val();
          
            var addr = $('#_addr').val();
            alert(name);
            $.ajax({
                type: "POST",
                url: "insertdatajson.asmx/ReceiveWebservice",
                data: "{ 'name': '" + name + "','phone': '" + phone + "', 'email': '" + email + "','address':'" + addr + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (data) {
                    $('#message').text(data.d);
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div><B> DATA INSERTION  USING JSON ASP.NET WEB SERVICES AND JQUERY</B></div><br /><br />
    <div style="margin:0 auto;width:1000px;">
        Name:
        <asp:TextBox ID="_txtname" runat="server"></asp:TextBox><br /><br />
         Phone:
        <asp:TextBox ID="_phone" runat="server"></asp:TextBox><br /><br />
        Email:
        <asp:TextBox ID="_email" runat="server"></asp:TextBox><br /><br />
       
        Adrss:
        <asp:TextBox ID="_addr" runat="server"></asp:TextBox><br /><br />
        <input id="_btnSubmit" type="button" value="Submit" onclick="CallJsonService();" />
        <span id="message"></span>
    </div>
    </form>
</body>
</html>

In the above code we are making post ajax call, where type is POST method, and the page to be called is insertdatajson.asmx and the data refers to the data to be passed to asmx page.On successful insertion we get success message.

3. In your web config file , add the connectionstring as :

 <connectionStrings>
    <add name="con" connectionString="server=ANIL-PC;uid=sa;pwd=emizr123;database=ServerCommunication"/>
  </connectionStrings>

4. Now again in solution explorer, add new item, select web service .
Name it as insertdatajson.asmx

4

5. In insertdatajson.asmx add the following code.

using System;
using System.Collections;
using System.Collections.Generic;
using System.Web;
using System.Web.Services;
using System.Web.Configuration;
using System.Data;
using System.Data.SqlClient;


/// <summary>
/// Summary description for insertdatajson
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class insertdatajson : System.Web.Services.WebService {

    public insertdatajson () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    // getting connection string
    string conStr = WebConfigurationManager.ConnectionStrings["con"].ConnectionString;
    int rowsInserted = 0;
    [WebMethod]
    public string ReceiveWebservice(string name,string phone ,string email,  string address)
    {
        // Creating Sql Connection
        using (SqlConnection conn = new SqlConnection(conStr))
        {
            // Creating insert statement
            string sql = string.Format(@"INSERT INTO tbl_your_profile ([Name],[PhoneNumber],[Email],[Address])VALUES('{0}','{1}','{2}','{3}')", name,phone, email,  address);
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = sql;
            cmd.CommandType = CommandType.Text;
            conn.Open();
            rowsInserted = cmd.ExecuteNonQuery();
            conn.Close();
            cmd = null;

        }

        return string.Format("Congrats, {0} row has been updated", rowsInserted);
    }

}

Note: To allow this Web Service to be called from script, using ASP.NET AJAX,you should uncomment the following line.

[System.Web.Script.Services.ScriptService]

6. Now make your insertdata.aspx as start page. run it , then u get :

5

7. Fill up the fields and click submit:

6

8. Now your table will contain the data that you entered.

7

9. You can even make insertdatajson.asmx as start page, then you can directly fill the data from it.
1

on clicking ReceiveWebservice, you get screen like:

2

After you click invoke option, data gets inserted into the database.

3

Now your table appears as:

4

You can call above asp web service from any other platforms like iphone, android.

Download above sample application Here